:root {
    --gold: #f6c500;
    --gold-ink: #111111;
    --gold-hover: #ffd524;
    --whatsapp: #25d366;
    --whatsapp-ink: #061b0d;
    --whatsapp-hover: #38e277;
    --ink: #0b0b0b;

    /* Superficies de vidrio
       ---------------------
       La tarjeta es translúcida y desenfoca lo que tiene detrás. El velo
       es tenue a propósito: el vidrio se nota donde hay algo que filtrar
       (la cabecera sobre el contenido, el modal sobre la página, las fotos
       de servicios), no como una capa lechosa sobre todo.
         --glass       → relleno en reposo; --glass-hover, bajo el cursor.
         --glass-line  → filo claro del borde.
         --glass-blur  → radio de desenfoque del fondo. */
    --glass: rgba(255, 255, 255, 0.055);
    --glass-hover: rgba(255, 255, 255, 0.09);
    --glass-line: rgba(255, 255, 255, 0.12);
    --glass-blur: 10px;

    /* Mismo vidrio, pero teñido del color de la acción en vez de blanco.
       Es lo que usan los botones que viven dentro de una sección: hablan
       el idioma de las tarjetas que tienen alrededor (relleno translúcido
       y filo de 1px) sin renunciar al oro y al verde de la marca. */
    --gold-glass: rgba(246, 197, 0, 0.10);
    --gold-glass-hover: rgba(246, 197, 0, 0.20);
    --whatsapp-glass: rgba(37, 211, 102, 0.10);
    --whatsapp-glass-hover: rgba(37, 211, 102, 0.20);

    /* Superficie casi opaca, para lo que debe leerse sí o sí por encima de
       otra cosa: listas desplegables, leyendas y avisos flotantes. Ahí el
       vidrio estorba, porque el texto de debajo se cuela. */
    --surface: rgba(24, 24, 24, 0.96);
    --line-strong: rgba(255, 255, 255, 0.22);

    /* Alto de la cabecera fija.
       -------------------------
       Un único valor del que dependen tres cosas que tienen que cuadrar
       entre sí: el hueco que el body deja arriba, el punto donde frena el
       scroll al saltar desde el menú, y el alto de las secciones que
       ocupan la pantalla completa. Estaban puestos a mano y no coincidían
       (la barra medía 64px y el scroll frenaba a 80px), que es lo que
       descuadraba las zonas al llegar desde la navegación. */
    --header-h: 64px;

    /* Escala de radios. Muy generosa en las superficies grandes; algo menor
       en los campos, donde un radio de tarjeta se comería el texto; y
       píldora completa en botones y etiquetas. */
    --radius: 28px;
    --radius-sm: 16px;
    --radius-pill: 999px;

    /* Curvas de movimiento
       ---------------------
       Todas de salida rápida y frenado largo, sin rebotes: el movimiento
       arranca decidido y se posa, que es lo que se lee como fluido.
         --ease-organic → desplazamientos y entradas.
         --ease-soft    → color y opacidad.
         --ease-flow    → recorridos largos que empiezan y acaban parados
                          (el carrusel), donde una curva sólo de salida
                          arranca de golpe. */
    --ease-organic: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-flow: cubic-bezier(0.65, 0, 0.35, 1);

    /* Duraciones base: micro-interacción, transición y entrada.
       Generosas a propósito — con valores más cortos el cambio se percibe
       como un salto entre dos estados en vez de como un recorrido. */
    --dur-fast: 0.22s;
    --dur-base: 0.4s;
    --dur-slow: 0.75s;
}

html {
    scroll-behavior: smooth;

    /* Exactamente el alto de la barra: la sección de destino queda a ras
       de la cabecera, sin quedarse por debajo ni tapada. El aire lo pone
       el padding de 96px que ya lleva cada sección por dentro. */
    scroll-padding-top: var(--header-h);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    min-height: 100svh;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;

    padding-top: var(--header-h);

    color: white;
    overflow-x: hidden;

    font-family: "Merriweather Sans", sans-serif;

    background-color: var(--ink);

    margin: 0;
}

/* Tinte de fondo, quieto.
   -----------------------
   Sobre un negro perfectamente liso el desenfoque del vidrio no tiene nada
   que filtrar y las tarjetas se ven como simples rectángulos más claros.
   Estos dos halos muy tenues le dan al backdrop-filter algo que recoger.
   No se animan: la deriva lenta que había antes es lo que hacía que el
   fondo compitiera con el texto. */
body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(circle at 18% 22%, rgba(246, 197, 0, 0.09), transparent 30%),
        radial-gradient(circle at 82% 74%, rgba(246, 197, 0, 0.06), transparent 34%);
}

/* En móvil la barra sube sólo un poco sobre los 64px de escritorio: lo
   justo para el objetivo táctil del botón de menú. Antes medía 76px, que
   sobre una pantalla de 700px de alto se comía un 11% de la vista. Al
   cambiar el token la siguen el hueco del body, el frenado del scroll,
   el alto de la propia barra y las secciones de pantalla completa.

   Aquí ya no se toca el font-size raíz: estaba en 18px, que agrandaba un
   12.5% todo lo medido en rem, y de todas formas responsive.css —que se
   carga después— lo devolvía a 100%. */
@media (max-width: 768px) {
    :root {
        --header-h: 68px;
    }
}