/* ================================================================
   PLANTILLA BASE — styles.css
   ----------------------------------------------------------------
   Arquitectura siguiendo SytezAgent Web Standards
   (ver .claude/skills/web-standards/SKILL.md)

   Orden:
     1. Reset
     2. Variables (custom properties / design tokens)
     3. Base
     4. Layout
     5. Componentes
     6. Utilities

   Esta plantilla NO tiene identidad visual definida.
   Personalizar los valores marcados con ← COMPLETAR
   ================================================================ */


/* ================================================================
   1. RESET MODERNO
   ================================================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    text-wrap: balance;
}

p {
    overflow-wrap: break-word;
    text-wrap: pretty;
}


/* ================================================================
   2. VARIABLES — Design Tokens
   ----------------------------------------------------------------
   Completar los valores comentados al iniciar un proyecto real.
   Cambiar el tema entero debe requerir modificar solo este bloque.
   ================================================================ */

:root {
    /* ── Colores ──────────────────────────────────── */
    --color-primary:        #2a4469;  /* navy — marca real */
    --color-primary-hover:  #1c3050;
    --color-secondary:      #93b2cb;  /* azul empolvado */
    --color-accent:         #b9cbde;  /* azul empolvado claro (de la web completa) — decorativo: bordes, rellenos */
    /* Versión oscura de --color-accent, tomada de la web completa, para usos
       de TEXTO/primer plano que necesitan pasar AA: .eyebrow, .zones-note a,
       el número de .step__number y el anillo de :focus-visible. --color-accent
       puro da ~1.4–1.7:1 contra los fondos claros del sitio (falla AA); esta
       versión da ~6.3:1 contra los fondos claros usados en el sitio. Sobre
       --color-bg-dark (fondo fijo de .trust-bar, .why, .final-cta y el
       footer) --color-accent-strong sí falla (~1.6:1) así que esas secciones
       vuelven a --color-accent normal para el anillo de foco (ver sección 7
       al final del archivo) — excepto .step__number, que se queda en
       --color-accent-strong porque ahí también pasa AA. */
    --color-accent-strong:  #50626f;

    --color-bg:             #ffffff;  /* blanco */
    --color-bg-alt:         #ffffff;  /* tarjetas — mismo blanco que el fondo base */
    --color-bg-tint:        #eef3f8;  /* tinte azul muy claro, alterna secciones */
    --color-bg-tint-warm:   #e6eef6;  /* tinte azul claro (variante de --color-accent aclarada), alterna con --color-bg-tint */
    --color-bg-dark:        #2a4469;  /* secciones oscuras (why-us, final CTA) */

    --color-text:           #22303f;
    --color-text-muted:     #5c6b7a;
    --color-text-inverse:   #ffffff;
    /* --color-secondary sobre --color-bg-dark da 4.45:1 (falla AA 4.5:1 en texto
       pequeño). Versión aclarada específica para texto secundario sobre fondo
       oscuro — 5.1:1, cumple AA con margen. */
    --color-text-inverse-muted: #a3bed3;

    --color-border:         #dfe3e8;
    --color-border-subtle:  #ececec;

    /* ── Overlays — valores rgba() repetidos, ver SKILL.md ─── */
    --overlay-border-subtle-inverse: rgba(255, 255, 255, 0.15);
    --overlay-header-bg:             rgba(255, 255, 255, 0.9);
    --overlay-tag-bg:                rgba(42, 68, 105, 0.85);

    /* ── Tipografía ───────────────────────────────────────────────
       Única y exclusivamente Montserrat en todo el sitio — decisión
       del cliente. --font-display y --font-accent se mantienen como
       tokens (en vez de eliminarlos) porque los componentes que los
       usan siguen necesitando distinguirse por tamaño/peso/spacing,
       no por familia tipográfica.
       ─────────────────────────────────────────────────────────── */
    --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-accent:  "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;

    /* Escala tipográfica fluida con clamp() */
    --text-xs:   clamp(0.75rem,  0.7rem  + 0.15vw, 0.875rem);
    --text-sm:   clamp(0.875rem, 0.8rem  + 0.2vw,  1rem);
    --text-nav:  clamp(0.9rem, 0.82rem + 0.22vw, 1.0625rem); /* un paso sutil arriba de --text-sm, para el menú del header */
    --text-base: clamp(1rem,     0.9rem  + 0.3vw,  1.125rem);
    --text-lg:   clamp(1.25rem,  1rem    + 0.5vw,  1.5rem);
    --text-xl:   clamp(1.5rem,   1.2rem  + 0.8vw,  2rem);
    --text-2xl:  clamp(2rem,     1.5rem  + 1.5vw,  3rem);
    --text-hero: clamp(2.5rem,   2rem    + 2vw,    4.5rem);

    /* ── Espaciado ──────────────────────────────────
       Escala consistente. No inventar valores fuera de esta escala.
    */
    --space-xs:   0.25rem;  /*  4px */
    --space-sm:   0.5rem;   /*  8px */
    --space-md:   1rem;     /* 16px */
    --space-lg:   1.5rem;   /* 24px */
    --space-xl:   2rem;     /* 32px */
    --space-2xl:  3rem;     /* 48px */
    --space-3xl:  4rem;     /* 64px */
    --space-4xl:  6rem;     /* 96px */

    /* ── Radios ─────────────────────────────────────
       ← Definir un estilo (redondeado o recto) y mantenerlo.
    */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --radius-2xl:   24px;
    --radius-full:  9999px;

    /* ── Sombras ────────────────────────────────────
       ← COMPLETAR — sombras coherentes con la atmósfera del proyecto.
    */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.16);

    /* ── Transiciones ───────────────────────────────
       Duraciones según tipo de interacción (ver SKILL.md sección 5).
    */
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms ease-out;
    --transition-slow: 400ms ease-out;

    /* ── Layout — Contenedores ──────────────────── */
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1280px;

    /* Altura real del header — el hero la usa como padding-top para que su
       contenido no quede tapado por el header, que ahora flota encima
       (position: absolute) en vez de empujar el layout hacia abajo. */
    --header-height: 84px;

    /* Altura de la barra fija de contacto en mobile — el body la usa como
       padding-bottom (solo <768px) para que el footer nunca quede tapado
       detrás de la barra. */
    --mobile-cta-bar-height: 76px;
}


/* ── Prefers reduced motion — accesibilidad ─────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ================================================================
   3. BASE — Estilos globales del documento
   ================================================================ */

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    transition: background-color var(--transition-base), color var(--transition-base);
}

@media (max-width: 767px) {
    /* Deja espacio para que la barra fija de contacto (.mobile-cta-bar) no
       tape el último tramo del contenido — en particular el footer. */
    body {
        padding-bottom: calc(var(--mobile-cta-bar-height) + env(safe-area-inset-bottom));
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
}

h1 { font-size: var(--text-hero); line-height: 1.1; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  line-height: 1.3; }

p {
    color: var(--color-text);
}

/* Focus visible — accesibilidad para navegación con teclado
   Usa --color-accent-strong (no --color-accent) porque este es el único
   indicador de foco por teclado del sitio: --color-accent puro da
   ~1.4–1.7:1 contra los fondos claros del sitio, por debajo del mínimo
   3:1 (WCAG 2.2 SC 1.4.11) para indicadores no textuales. Dentro de
   secciones con fondo --color-bg-dark se sobreescribe de vuelta a
   --color-accent (ver sección 7 al final del archivo), que sí cumple
   3:1+ ahí. */
:focus-visible {
    outline: 2px solid var(--color-accent-strong);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Selección de texto */
::selection {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}


/* ================================================================
   4. LAYOUT — Contenedores y grids de página
   ================================================================ */

.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--space-xl);
    }
}


/* ================================================================
   5. COMPONENTES
   ================================================================ */

/* ──────────────────────────────────────────────────
   HEADER
   ────────────────────────────────────────────────── */
.site-header {
    /* El header ya no es sticky: flota (absolute) sobre la imagen de fondo
       del hero y se va con el resto de la página al hacer scroll — decisión
       explícita del cliente para poder mostrar la imagen detrás del header
       sin la complejidad de JS que requeriría un sticky-transparente que se
       vuelve sólido al hacer scroll. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    min-height: var(--header-height);
    border-bottom: 1px solid var(--overlay-border-subtle-inverse);
}

.site-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    max-width: var(--container-xl);
    height: var(--header-height);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.site-header__logo {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-inverse);
    transition: opacity var(--transition-fast);
}

.site-header__logo:hover {
    opacity: 0.7;
}

.site-header__logo-img {
    height: 52px;
    width: auto;
    /* Antes llevaba un outline de drop-shadow para leerse sobre el fondo
       oscuro del hero, pero eso lo emborronaba (mismo problema ya resuelto
       una vez en el header claro). En vez de desenfocar el logo, se agregó
       .hero__header-scrim — una franja oscura fija solo detrás del header —
       así el logo se queda nítido y el contraste se resuelve con el fondo,
       no con un filtro sobre la imagen. */
}


/* ──────────────────────────────────────────────────
   LEGAL HEADER — versión simple para páginas sin hero
   (Aviso de Privacidad, Términos). El .site-header normal flota
   transparente sobre la foto del hero con texto claro; estas páginas no
   tienen esa foto detrás, así que necesitan un header propio, en flujo
   normal y con colores para fondo claro.
   ────────────────────────────────────────────────── */
.legal-header {
    padding-block: var(--space-md);
    border-bottom: 1px solid var(--color-border-subtle);
}

.legal-header .container {
    display: flex;
}

.legal-header img {
    display: block;
}


/* ──────────────────────────────────────────────────
   NAVIGATION
   Solo visible en desktop — sin menú hamburguesa/panel móvil: en
   viewport pequeño el nav queda oculto y el único camino es el logo.
   ────────────────────────────────────────────────── */
.site-nav {
    display: none;
}

@media (min-width: 768px) {
    .site-nav {
        display: block;
    }

    .site-nav__list {
        display: flex;
        gap: var(--space-lg);
    }
}

.site-nav__link {
    font-size: var(--text-nav);
    /* El header flota sobre la imagen oscura del hero — mismo par
       adaptado/muted que ya usa el footer sobre --color-bg-dark. */
    color: var(--color-text-inverse-muted);
    transition: color var(--transition-fast);
}

.site-nav__link:hover {
    color: var(--color-text-inverse);
}

.site-nav__link--cta {
    padding: var(--space-sm) var(--space-lg);
    background-color: var(--color-primary-hover);
    color: var(--color-text-inverse);
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast);
}

.site-nav__link--cta:hover {
    transform: translateY(-2px);
}


/* ──────────────────────────────────────────────────
   EYEBROW — label pequeño sobre headings
   ────────────────────────────────────────────────── */
.eyebrow {
    display: inline-block;
    margin-bottom: var(--space-sm);
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent-strong);
}


/* ──────────────────────────────────────────────────
   HERO
   El header (position: absolute) flota sobre este bloque, así que el hero
   arranca en y=0 de la página y usa padding-top para que su contenido no
   quede debajo del header. El fondo de 3 fotos + scrim cubre TODO el
   bloque, incluida el área bajo el header.
   ────────────────────────────────────────────────── */
.hero {
    position: relative;
    padding-top: calc(var(--header-height) + var(--space-2xl));
    padding-bottom: var(--space-3xl);
    overflow: hidden;
}

@media (min-width: 768px) {
    .hero {
        padding-top: calc(var(--header-height) + var(--space-3xl));
        padding-bottom: var(--space-4xl);
    }
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Slider: las 2 fotos se apilan exactamente en el mismo lugar y se van
   turnando con un fundido cruzado — no 2 paneles lado a lado, sino una
   sola foto visible a la vez, con transición suave entre ellas. */
.hero__bg-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: hero-bg-slide 11s ease-in-out infinite;
}

.hero__bg-slide,
.hero__bg-slide img {
    width: 100%;
    height: 100%;
}

.hero__bg-slide img {
    object-fit: cover;
}

.hero__bg-slide:nth-child(1) { animation-delay: 0s; }
.hero__bg-slide:nth-child(2) { animation-delay: 5.5s; }

/* Cada foto dura 5s visible + 0.5s de fundido cruzado hacia la siguiente
   (ciclo de 11s = 2 x 5.5s, con la segunda foto desfasada media vuelta). */
@keyframes hero-bg-slide {
    0%, 45.45%  { opacity: 1; }
    50%         { opacity: 0; }
    95.45%      { opacity: 0; }
    100%        { opacity: 1; }
}

/* Con prefers-reduced-motion, el override global (sección BASE) fuerza
   animation-duration a 0.01ms — sin esto, las fotos parpadearían a toda
   velocidad en vez de quedarse quietas. Se apaga la animación del todo y
   se deja la primera foto fija. */
@media (prefers-reduced-motion: reduce) {
    .hero__bg-slide {
        animation: none;
        opacity: 0;
    }

    .hero__bg-slide:nth-child(1) {
        opacity: 1;
    }
}

/* Opacidad pareja en todo el hero — antes era un degradado con distintos
   niveles según la altura; ahora es un solo tono constante de arriba a
   abajo. */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(22, 33, 47, 0.65);
}

/* Franja oscura fija SOLO detrás del header, independiente del scrim
   general (que se dejó claro a propósito para que se aprecien las fotos).
   Así el logo y el nav se leen bien sin depender de qué tan clara esté la
   foto de fondo en ese momento del slider, y sin tener que desenfocar el
   logo con un filtro. */
.hero__header-scrim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: calc(var(--header-height) + 40px);
    background: linear-gradient(180deg, rgba(22, 33, 47, 0.55) 0%, rgba(22, 33, 47, 0) 100%);
}

.hero__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

/* El scrim es un degradado parejo — no se adapta a qué tan clara sea la
   foto en cada punto. En parches muy claros (ej. piel muy iluminada en la
   foto 2) el texto blanco caía hasta ~1.2:1 de contraste aunque el resto
   se leyera bien. Este text-shadow da un contorno oscuro constante,
   independiente de qué imagen del slider esté detrás en cada momento. */
.hero__title,
.hero__tagline,
.hero__subtitle,
.hero__micro {
    text-shadow: 0 2px 16px rgba(15, 23, 33, 0.55), 0 1px 3px rgba(15, 23, 33, 0.5);
}

.hero__title {
    margin-bottom: var(--space-sm);
    color: var(--color-text-inverse);
}

/* Segundo nivel de la jerarquía: la frase de marca queda más chica que el
   H1 de arriba (--text-xl en vez del --text-2xl por defecto de h2),
   todavía por encima del subtítulo. */
.hero__tagline {
    margin-bottom: var(--space-lg);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text-inverse);
}

.hero__subtitle {
    max-width: 42ch;
    margin-bottom: var(--space-xl);
    font-size: var(--text-lg);
    color: var(--color-text-inverse);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.hero__micro {
    font-size: var(--text-sm);
    color: var(--color-text-inverse-muted);
}

.hero__micro strong {
    color: var(--color-text-inverse);
}

.hero__form-card {
    width: 100%;
}

.hero__form-card .contact-form {
    margin-inline: auto;
    max-width: 420px;
}

@media (min-width: 1024px) {
    .hero__container {
        grid-template-columns: 1.05fr 0.95fr;
        align-items: center;
        text-align: left;
    }

    .hero__form-card .contact-form {
        margin-inline: 0;
        margin-left: auto;
    }
}


/* ──────────────────────────────────────────────────
   BUTTON
   ────────────────────────────────────────────────── */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast);
}

.button:hover {
    transform: translateY(-2px);
}

.button:active {
    transform: translateY(0);
}

.button:focus-visible {
    outline: 2px solid var(--color-accent-strong);
    outline-offset: 3px;
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

.button--primary {
    background-color: var(--color-primary-hover);
    color: var(--color-text-inverse);
}

.button--secondary {
    background-color: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.button--secondary:hover {
    background-color: var(--color-bg-alt);
}


/* ──────────────────────────────────────────────────
   MOBILE CTA BAR
   Barra fija de contacto — solo mobile (<768px). Entre el formulario del
   hero y el siguiente CTA hay varias pantallas de scroll sin punto de
   conversión visible; esta barra se queda siempre a mano. Es un elemento
   estático (link a #agenda + link a WhatsApp), nunca se abre solo ni
   tapa contenido como overlay — solo ocupa su franja fija en el borde
   inferior, y body ya reserva ese espacio (ver sección BASE).
   ────────────────────────────────────────────────── */
.mobile-cta-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    height: var(--mobile-cta-bar-height);
    padding: var(--space-sm) var(--space-md);
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
    /* Glassmorfismo: banner translúcido + blur en vez de una franja sólida
       o del vacío total — se sigue intuyendo el contenido detrás pero la
       barra se lee como una superficie propia, no como botones sueltos. */
    background-color: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(1px) saturate(140%);
    -webkit-backdrop-filter: blur(1px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}

.mobile-cta-bar__primary {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 44px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-inverse);
    background-color: var(--color-primary-hover);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-fast);
}

.mobile-cta-bar__primary:active {
    transform: scale(0.97);
}

.mobile-cta-bar__whatsapp {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--color-primary-hover);
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.mobile-cta-bar__whatsapp svg {
    width: 22px;
    height: 22px;
}

.mobile-cta-bar__whatsapp:active {
    transform: scale(0.97);
}

@media (hover: hover) {
    .mobile-cta-bar__whatsapp:hover {
        background-color: var(--color-secondary);
        color: var(--color-text-inverse);
    }
}

@media (min-width: 768px) {
    .mobile-cta-bar {
        display: none;
    }
}


/* ──────────────────────────────────────────────────
   SECTION HEAD — encabezado reutilizable de sección
   ────────────────────────────────────────────────── */
.section-head {
    max-width: var(--container-md);
    margin-bottom: var(--space-2xl);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head__title {
    margin-bottom: var(--space-md);
}

.section-head__lead {
    font-size: var(--text-base);
    color: var(--color-text-muted);
}


/* ──────────────────────────────────────────────────
   COOLITE EVO³
   ────────────────────────────────────────────────── */
.tech {
    padding-block: var(--space-3xl);
    background-color: var(--color-bg-tint-warm);
}

.tech__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
    max-width: var(--container-lg);
    margin-inline: auto;
}

.tech__features {
    display: grid;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.tech__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.tech__feature-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.tech__feature-icon svg {
    width: 14px;
    height: 14px;
}

.tech__feature-title {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--text-base);
}

.tech__feature-body {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ──────────────────────────────────────────────────
   VIDEO PLAYER — componente reusable
   Video vertical (9:16) con un solo botón de silenciar/activar audio, sin
   controles nativos. Lo usan tanto Tecnología (un video grande) como Reels
   (una grilla de varios) — el tamaño lo define cada contexto, este bloque
   solo define la proporción y el comportamiento.
   ────────────────────────────────────────────────── */
.video-player {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
}

.video-player__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-dark);
    box-shadow: var(--shadow-md);
}

/* Mismo lenguaje visual que los íconos flotantes de la foto del doctor en
   Nosotros (--overlay-tag-bg). */
.video-player__mute-btn {
    position: absolute;
    right: var(--space-md);
    bottom: var(--space-md);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-text-inverse);
    background-color: var(--overlay-tag-bg);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.video-player__mute-btn svg {
    width: 18px;
    height: 18px;
}

/* El reset global (svg { display: block }) le gana al comportamiento por
   defecto de [hidden] — sin esto, los dos íconos se ven encimados. */
.video-player__mute-icon[hidden] {
    display: none;
}

.video-player__mute-btn:hover {
    transform: translateY(-2px);
    background-color: var(--color-primary-hover);
}

.video-player__mute-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* .tech__media tiene el tamaño exacto del video (no solo lo centra desde
   afuera) para que el botón, posicionado absolute dentro de él, quede
   anclado a las esquinas reales del video y no a un contenedor más ancho. */
.tech__media {
    max-width: 360px;
    margin-inline: auto;
    justify-self: center;
}

@media (min-width: 1024px) {
    .tech { padding-block: var(--space-4xl); }

    .tech__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3xl);
        align-items: stretch;
    }

    /* A esta altura, el video empata con la altura del bloque de texto
       en vez de tener un ancho fijo — el ancho sale de la proporción
       9:16 aplicada a esa altura. */
    .tech__media {
        width: auto;
        height: 100%;
        max-width: 420px;
        max-height: 640px;
    }
}


/* ──────────────────────────────────────────────────
   BARRA DE CIFRAS
   ────────────────────────────────────────────────── */
.trust-bar {
    padding-block: var(--space-md);
    background-color: var(--color-secondary);
    color: var(--color-text);
}

.trust-bar__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    text-align: center;
}

.trust-bar__number {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text);
}

/* --color-text-muted da 2.47:1 sobre --color-secondary (falla AA 4.5:1) —
   está pensado para fondos claros blancos, no para este azul empolvado.
   Usamos --color-text a 85% de opacidad, que sí pasa (4.55:1). */
.trust-bar__label {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--text-xs);
    color: rgba(34, 48, 63, 0.85);
}

@media (min-width: 768px) {
    .trust-bar__grid { grid-template-columns: repeat(4, 1fr); }
}


/* ──────────────────────────────────────────────────
   POR QUÉ ALTA PLÁSTICA
   ────────────────────────────────────────────────── */
.why {
    padding-block: var(--space-3xl);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

.why .eyebrow { color: var(--color-text-inverse-muted); }

.why__head {
    margin-inline: auto;
    margin-bottom: var(--space-2xl);
    max-width: var(--container-lg);
    text-align: center;
}

.why__title,
.why__lead {
    color: var(--color-text-inverse);
}

.why__lead {
    margin-bottom: var(--space-xl);
    font-size: var(--text-base);
    opacity: 0.85;
}

.why__list {
    display: grid;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.why__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.why__item-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.why__item-icon svg {
    width: 14px;
    height: 14px;
}

.why__item-title {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--text-base);
    color: var(--color-text-inverse);
}

.why__item-body {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-inverse-muted);
}

.credential-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md) var(--space-lg);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--overlay-border-subtle-inverse);
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    color: var(--color-text-inverse-muted);
}

.credential-list li::before {
    content: "◈ ";
    color: var(--color-accent);
}

/* Variante para usarse sobre fondos claros (p. ej. .doctor), donde los
   colores "inverse" de la variante original no pasarían AA. */
.credential-list--on-light {
    border-top-color: var(--color-border);
    color: var(--color-text-muted);
}

.credential-list--on-light li::before {
    color: var(--color-accent-strong);
}

.why__gallery {
    position: relative;
}

.why__gallery-img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    box-shadow: var(--shadow-lg);
}

.why__gallery-img--cabin {
    aspect-ratio: 5 / 4;
}

@media (min-width: 1024px) {
    .why { padding-block: var(--space-4xl); }

    .why__title {
        white-space: nowrap;
    }

    .why__grid {
        display: grid;
        grid-template-columns: 0.9fr 1.15fr;
        gap: var(--space-2xl);
        align-items: center;
    }
}


/* ──────────────────────────────────────────────────
   RESPALDO MÉDICO — Dr. Luis Arturo
   ────────────────────────────────────────────────── */
.doctor {
    padding-block: var(--space-3xl);
    background-color: var(--color-bg-tint);
}

.doctor__head {
    margin-inline: auto;
    margin-bottom: var(--space-2xl);
    max-width: var(--container-lg);
    text-align: center;
}

.doctor__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

.doctor__list {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.doctor__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.doctor__item-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.doctor__item-icon svg {
    width: 14px;
    height: 14px;
}

.doctor__item-text {
    font-size: var(--text-sm);
    color: var(--color-text);
}

.doctor__gallery {
    position: relative;
}

.doctor__gallery-img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    aspect-ratio: 5 / 4;
    box-shadow: var(--shadow-lg);
}

/* Redes del doctor — placa flotante sobre su foto, mismo lenguaje visual
   que las etiquetas de las fotos en Resultados (--overlay-tag-bg). */
.doctor__gallery-socials {
    position: absolute;
    right: var(--space-md);
    bottom: var(--space-md);
    z-index: 1;
    display: flex;
    gap: var(--space-sm);
}

.doctor__gallery-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-inverse);
    background-color: var(--overlay-tag-bg);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.doctor__gallery-social svg {
    width: 18px;
    height: 18px;
}

.doctor__gallery-social:hover {
    transform: translateY(-2px);
    background-color: var(--color-primary-hover);
}

.doctor__gallery-social:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (min-width: 1024px) {
    .doctor { padding-block: var(--space-4xl); }

    .doctor__grid {
        grid-template-columns: 1.1fr 0.9fr;
        gap: var(--space-3xl);
    }
}


/* ──────────────────────────────────────────────────
   CÓMO FUNCIONA
   ────────────────────────────────────────────────── */
.how {
    padding-block: var(--space-3xl);
    background-color: var(--color-bg-alt);
}

.how__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    list-style: none;
}

.how__step {
    padding: var(--space-xl);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.how__step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.how__step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-md);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-accent-strong);
    background-color: var(--color-bg-tint-warm);
    border-radius: var(--radius-full);
}

.how__step-title {
    margin-bottom: var(--space-xs);
    font-size: var(--text-lg);
}

.how__step-body {
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .how { padding-block: var(--space-4xl); }
    .how__grid { grid-template-columns: repeat(4, 1fr); }
    .how .section-head__title { white-space: nowrap; }
}


/* ──────────────────────────────────────────────────
   ZONAS Y PROMOCIÓN
   ────────────────────────────────────────────────── */
.zones {
    padding-block: var(--space-3xl);
    background-color: var(--color-bg-tint);
}

.zone-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.zone-card {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.zone-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.zone-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.zone-card__bg picture,
.zone-card__bg img {
    display: block;
    width: 100%;
    height: 100%;
}

.zone-card__bg img {
    object-fit: cover;
}

/* Misma familia visual que .hero__scrim. Estas tarjetas son cuadradas y
   chicas — el degradado va más comprimido hacia abajo para no oscurecer
   toda la foto, solo la franja del nombre. */
.zone-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(22, 33, 47, 0) 55%,
        rgba(22, 33, 47, 0.8) 100%
    );
}

.zone-card__name {
    position: relative;
    z-index: 1;
    padding: var(--space-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-inverse);
    text-shadow: 0 2px 10px rgba(15, 23, 33, 0.5);
}

.promo-banner {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background-color: var(--color-bg-tint-warm);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.promo-banner__title {
    margin: var(--space-xs) 0;
    font-size: var(--text-xl);
}

.promo-banner__body {
    color: var(--color-text-muted);
}

.promo-banner__body + .promo-banner__body {
    margin-top: var(--space-xs);
}

.promo-banner__disclaimer {
    margin-top: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.promo-banner .button {
    flex-shrink: 0;
}

.zones-note {
    text-align: center;
    color: var(--color-text-muted);
}

.zones-note a {
    font-weight: 600;
    color: var(--color-accent-strong);
}

@media (min-width: 768px) {
    .zones { padding-block: var(--space-4xl); }
    .zone-grid { grid-template-columns: repeat(4, 1fr); }
    .promo-banner { flex-direction: row; align-items: center; justify-content: space-between; }
    .zones .section-head__title { white-space: nowrap; }
}


/* ──────────────────────────────────────────────────
   RESULTADOS REALES — comparación sesión 1 / sesión 5
   ────────────────────────────────────────────────── */
.results {
    padding-block: var(--space-3xl);
    background-color: var(--color-bg);
}

.results__compare {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    max-width: var(--container-md);
    margin-inline: auto;
}

.results__photo {
    position: relative;
    width: 100%;
    max-width: 320px;
}

.results__photo picture,
.results__photo img {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    object-fit: cover;
    box-shadow: var(--shadow-md);
}

/* Mismo lenguaje visual que las placas flotantes de Nosotros y el botón
   de mute de los videos (--overlay-tag-bg). */
.results__tag {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-xs);
    font-family: var(--font-accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-inverse);
    background-color: var(--overlay-tag-bg);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
}

.results__tag--after {
    background-color: var(--color-accent-strong);
}

.results__caption {
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.results__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-strong);
    transform: rotate(90deg);
}

.results__arrow svg {
    width: 28px;
    height: 28px;
}

.results__note {
    max-width: var(--container-md);
    margin: var(--space-2xl) auto 0;
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-text-muted);
    text-align: center;
}

@media (min-width: 768px) {
    .results__compare {
        flex-direction: row;
        justify-content: center;
    }

    .results__arrow {
        transform: rotate(0deg);
    }
}


/* ──────────────────────────────────────────────────
   QUÉ PUEDES ESPERAR
   ────────────────────────────────────────────────── */
.expect {
    padding-block: var(--space-3xl);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

.expect .eyebrow {
    color: var(--color-text-inverse-muted);
}

.expect .section-head__title {
    color: var(--color-text-inverse);
}

.expect__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    max-width: var(--container-lg);
    margin-inline: auto;
}

.expect__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
}

.expect__item-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.expect__item-icon svg {
    width: 18px;
    height: 18px;
}

.expect__item-title {
    display: block;
    font-size: var(--text-lg);
    color: var(--color-text-inverse);
}

.expect__item-body {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-inverse-muted);
}

.expect__note {
    max-width: var(--container-md);
    margin: var(--space-2xl) auto 0;
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-text-inverse-muted);
    text-align: center;
}

@media (min-width: 768px) {
    .expect__list {
        grid-template-columns: repeat(4, 1fr);
    }

    .expect__item-title {
        white-space: nowrap;
    }
}


/* ──────────────────────────────────────────────────
   RESULTADOS EN VIDEO
   ────────────────────────────────────────────────── */
.reels {
    padding-block: var(--space-3xl);
    background-color: var(--color-bg);
}

.reels__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    max-width: var(--container-lg);
    margin-inline: auto;
}

.reels__grid .video-player {
    max-width: 300px;
    margin-inline: auto;
}

@media (min-width: 768px) {
    .reels { padding-block: var(--space-4xl); }
    .reels__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .reels { padding-block: var(--space-4xl); }
    .reels__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .reels .section-head__title { white-space: nowrap; }
}


/* ──────────────────────────────────────────────────
   FAQ
   ────────────────────────────────────────────────── */
.faq {
    padding-block: var(--space-3xl);
    background-color: var(--color-bg-tint);
}

.faq__list {
    max-width: var(--container-md);
    margin-inline: auto;
}

.faq-item {
    margin-bottom: var(--space-sm);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
}

.faq-item__question::-webkit-details-marker {
    display: none;
}

/* Ícono "+" — gira 45° y se lee como "×" cuando la respuesta está
   abierta, sin necesitar dos estados/íconos distintos. */
.faq-item__question::after {
    content: "+";
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--color-text-muted);
    background-color: var(--color-bg-tint);
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast);
}

.faq-item[open] > .faq-item__question::after {
    transform: rotate(45deg);
}

.faq-item__question:focus-visible {
    outline: 2px solid var(--color-accent-strong);
    outline-offset: -2px;
}

.faq-item__answer {
    padding: 0 var(--space-lg) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .faq { padding-block: var(--space-4xl); }
}


/* ──────────────────────────────────────────────────
   CTA FINAL
   ────────────────────────────────────────────────── */
.final-cta {
    padding-block: var(--space-3xl);
    text-align: center;
}

/* Tarjeta tipo píldora — ya no ocupa todo el ancho, y el margin-bottom
   evita que choque directo con el footer. */
.final-cta__card {
    position: relative;
    max-width: 1120px;
    margin-inline: auto;
    padding: var(--space-xl);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-xl);
}

.final-cta__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.final-cta__bg picture,
.final-cta__bg img {
    display: block;
    width: 100%;
    height: 100%;
}

.final-cta__bg img {
    object-fit: cover;
    /* La tarjeta es mucho más ancha que alta, así que object-fit: cover
       ajusta por ANCHO (se ve el 100% del ancho de la foto, sin recorte
       horizontal) y recorta verticalmente — por eso el eje horizontal de
       object-position no hace nada aquí, solo importa el vertical. Subir
       el % baja la ventana visible hacia la parte de abajo de la foto,
       donde está la cara completa (ojos/nariz/boca) en vez de solo la
       frente. */
    object-position: 50% 88%;
}

/* Mismo tono/opacidad que el scrim del hero, para que se sienta como la
   misma familia visual. */
.final-cta__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(22, 33, 47, 0.68) 0%,
        rgba(42, 68, 105, 0.6) 45%,
        rgba(42, 68, 105, 0.72) 100%
    );
}

.final-cta__content {
    position: relative;
    z-index: 1;
}

.final-cta__title {
    margin-bottom: var(--space-md);
    color: var(--color-text-inverse);
}

.final-cta__body {
    max-width: 52ch;
    margin-inline: auto;
    margin-bottom: var(--space-xl);
    color: var(--color-text-inverse-muted);
}

/* Fondo claro / texto navy para contrastar contra la imagen oscura de la
   tarjeta — mismo patrón que el botón del hero usaba antes de
   homologarse; aquí se queda así porque el fondo detrás sigue siendo
   oscuro. */
.final-cta .button--primary {
    background-color: var(--color-text-inverse);
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .final-cta { padding-block: var(--space-3xl); }
    .final-cta__card { padding: var(--space-2xl) var(--space-3xl); }
}


/* ──────────────────────────────────────────────────
   FORMULARIO DE CONTACTO
   Vive dentro del hero (.hero__form-card), sobre la imagen de fondo — por
   eso necesita ser una tarjeta opaca con sombra fuerte, para separarse
   claramente de la foto en vez de flotar sin borde como el resto del sitio.
   ────────────────────────────────────────────────── */
.contact-form {
    padding: var(--space-xl);
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.contact-form__title {
    margin-bottom: var(--space-xs);
    font-size: var(--text-xl);
}

.contact-form__subtitle {
    margin-bottom: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.contact-form__field {
    margin-bottom: var(--space-md);
}

.contact-form__field label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}

.contact-form__field input,
.contact-form__field select {
    width: 100%;
    padding: var(--space-md);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    transition: border-color var(--transition-fast);
}

.contact-form__field input:focus,
.contact-form__field select:focus {
    /* outline: none se quitó a propósito — suprimía el único indicador de
       foco por teclado del sitio. El cambio de border-color por sí solo
       (~2.8:1 contra el fondo del campo) no llega al 3:1 mínimo de WCAG
       2.2 SC 1.4.11 para indicadores de foco. Se deja como refuerzo visual
       secundario; el anillo global :focus-visible (--color-accent-strong)
       es el indicador real. */
    border-color: var(--color-accent);
}

.contact-form__submit {
    width: 100%;
    margin-top: var(--space-sm);
}

.contact-form__consent {
    margin-top: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
}

.contact-form__consent a {
    color: var(--color-accent-strong);
    text-decoration: underline;
}



/* ──────────────────────────────────────────────────
   REVEAL ON SCROLL — Animación de aparición
   ────────────────────────────────────────────────── */
@keyframes revealFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Escondido por defecto SOLO si el JS llegó a correr (clase `.js` en <html>,
   agregada por script.js apenas se ejecuta — ver ahí). Sin esa clase, esta
   regla no aplica y los ~18 elementos .reveal del sitio (≈un tercio del
   contenido de texto de la página) se muestran normalmente en vez de
   quedarse en opacity: 0 para siempre si el script falla en cargar. */
.js .reveal {
    opacity: 0;
    transform: translateY(30px);
}

.reveal.is-visible {
    animation: revealFadeInUp var(--transition-slow) forwards;
}


/* ──────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────── */
.site-footer {
    padding-block: var(--space-2xl);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

/* El selector global `p { color: var(--color-text); }` (sección 3, BASE) le
   gana a `.site-footer { color: ... }` porque es un match directo de tipo,
   no depende de herencia — así que los <p> del footer (dirección, horario,
   copyright) se quedaban con --color-text (#22303f) sobre el fondo oscuro
   del footer (#2a4469): 1.36:1, muy por debajo de AA. */
.site-footer p {
    color: var(--color-text-inverse-muted);
}

.site-footer__container {
    display: grid;
    gap: var(--space-xl);
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.site-footer__logo-img {
    height: 40px;
    width: auto;
    margin-bottom: var(--space-sm);
    /* El logo tiene un color fijo horneado en el PNG; sobre el fondo
       oscuro del footer (--color-bg-dark) da 2.89:1, por debajo de 3:1.
       Outline para reforzar el contorno — el footer no tiene el respiro
       del fondo claro detrás que sí tiene el header, así que aquí
       necesita un poco más de fuerza que ahí. */
    filter:
        drop-shadow(0 0 0.4px var(--color-text-inverse))
        drop-shadow(0 0 0.4px var(--color-text-inverse))
        drop-shadow(0 0 0.4px var(--color-text-inverse));
}

.site-footer__tagline {
    max-width: 40ch;
    color: var(--color-text-inverse-muted);
}

.site-footer__socials {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.site-footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--overlay-border-subtle-inverse);
    border-radius: var(--radius-full);
    color: var(--color-text-inverse-muted);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.site-footer__social svg {
    width: 18px;
    height: 18px;
}

.site-footer__social:hover {
    color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
}

.site-footer__social:focus-visible {
    /* --color-bg-dark (fondo fijo del footer) no cumple 3:1 con
       --color-accent-strong (~1.6:1) — igual que el resto del footer,
       usa --color-accent normal, que sí pasa contra este fondo. */
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.site-footer__heading {
    margin-bottom: var(--space-sm);
    font-size: var(--text-lg);
    letter-spacing: 0.02em;
    color: var(--color-text-inverse);
}

.site-footer__hours {
    margin-top: var(--space-lg);
}

.site-footer__link {
    color: var(--color-text-inverse-muted);
    transition: color var(--transition-fast);
}

.site-footer__link:hover {
    color: var(--color-text-inverse);
}

.site-footer__legal {
    grid-column: 1 / -1;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--overlay-border-subtle-inverse);
    font-size: var(--text-sm);
    color: var(--color-text-inverse-muted);
}

.site-footer__legal-links {
    margin-top: var(--space-xs);
}

.site-footer__legal-links .site-footer__link {
    text-decoration: underline;
}

@media (min-width: 768px) {
    .site-footer__container {
        grid-template-columns: 1.4fr 1fr 1fr;
    }
}


/* ──────────────────────────────────────────────────
   LEGAL — páginas de texto largo (Aviso de Privacidad,
   Términos de la promoción)
   ────────────────────────────────────────────────── */
.legal {
    padding-block: var(--space-3xl);
}

.legal .container {
    max-width: var(--container-md);
}

.legal__updated {
    margin-bottom: var(--space-xl);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.legal__title {
    margin-bottom: var(--space-sm);
}

.legal h2 {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-sm);
    font-size: var(--text-lg);
}

.legal p,
.legal li {
    color: var(--color-text-muted);
}

.legal p + p {
    margin-top: var(--space-md);
}

.legal ul {
    margin-top: var(--space-sm);
    padding-left: var(--space-lg);
}

.legal li + li {
    margin-top: var(--space-xs);
}

.legal a {
    color: var(--color-accent-strong);
    text-decoration: underline;
}


/* ================================================================
   6. UTILITIES
   ================================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }
.text-center  { text-align: center; }

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}


/* ================================================================
   7. ANILLO DE FOCO SOBRE FONDOS OSCUROS FIJOS
   ----------------------------------------------------------------
   --color-accent-strong (#50626f) da ~6.3:1 contra los fondos claros del
   sitio, pero solo ~1.6:1 contra --color-bg-dark (#2a4469) — el fondo fijo
   de .trust-bar, .why, .final-cta y el footer, que no depende del tema del
   sistema. --color-accent original sí cumple ahí (~6:1), así que
   cualquier elemento enfocable dentro de esas secciones usa --color-accent
   en su anillo de :focus-visible. El header y `.hero__copy` entran por la
   misma razón: flotan sobre la imagen + scrim oscuro del hero. El
   formulario del hero (`.hero__form-card`) NO entra aquí a propósito — es
   una tarjeta blanca/clara, así que necesita quedarse con
   --color-accent-strong (el valor correcto contra fondos claros).

   Este bloque va al FINAL del archivo a propósito: `.button:focus-visible`
   y `.faq-item__question:focus-visible` tienen la misma especificidad que
   esta regla — en un empate de especificidad gana el que aparece después
   en el código fuente. Puesto antes, esta regla perdía silenciosamente
   contra esas definiciones más abajo en el archivo.
   ================================================================ */
.trust-bar :focus-visible,
.why :focus-visible,
.expect :focus-visible,
.final-cta :focus-visible,
.site-footer :focus-visible,
.site-header :focus-visible,
.hero__copy :focus-visible {
    outline-color: var(--color-accent);
}