/* ================================================================
   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:         #c9867b;  /* terracota — decorativo: bordes, rellenos */
    /* Versión oscurecida de --color-accent 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
       2.52–2.92:1 contra los fondos claros del sitio (falla AA); esta versión
       da 4.5:1+ contra los 4 fondos claros usados en el sitio, sin perder la
       familia terracota. Sobre --color-bg-dark (fondo fijo de .trust-bar,
       .why, .final-cta y el footer) --color-accent-strong sí falla (2.93: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:  #9d5446;

    --color-bg:             #fefaf6;  /* crema cálido */
    --color-bg-alt:         #ffffff;  /* tarjetas sobre fondo crema */
    --color-bg-tint:        #eef3f8;  /* tinte azul muy claro, alterna secciones */
    --color-bg-tint-warm:   #f7ece8;  /* tinte terracota muy claro */
    --color-bg-dark:        #2a4469;  /* secciones oscuras (why-us, final CTA) */

    --color-text:           #22303f;
    --color-text-muted:     #5c6b7a;
    --color-text-inverse:   #fefaf6;
    /* --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(254, 250, 246, 0.15);
    --overlay-header-bg:             rgba(254, 250, 246, 0.9);
    --overlay-tag-bg:                rgba(42, 68, 105, 0.85);

    /* ── Tipografía ───────────────────────────────── */
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body:    "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-accent:  "Tenor Sans", -apple-system, 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;
}


/* ── 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);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    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
   2.52–2.92: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. */
}

.site-header__menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-sm);
}

.site-header__menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-text-inverse);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Animación a "X" cuando el menú está abierto — usa aria-expanded (que
   script.js ya actualiza en cada click) en vez de depender de una clase
   extra. */
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header__menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.site-header__menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 768px) {
    .site-header__menu-toggle {
        display: none;
    }
}


/* ──────────────────────────────────────────────────
   NAVIGATION
   ────────────────────────────────────────────────── */
.site-nav {
    display: none;
}

/* Panel desplegable en móvil — el toggle ya ponía/quitaba esta clase
   (script.js) pero nunca existió el CSS que la hace visible. Fondo sólido
   propio porque el header flota transparente sobre la foto del hero; el
   menú desplegado necesita legibilidad garantizada sin importar qué haya
   detrás. */
.site-nav.site-nav--open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-bg-dark);
    box-shadow: var(--shadow-lg);
    padding: var(--space-lg) var(--space-md);
}

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

/* El CTA solo se muestra en el menú de desktop — en el desplegable móvil
   se oculta (el hero y el footer ya tienen su propio botón/link a
   WhatsApp, no hace falta repetirlo aquí). */
.site-nav--open .site-nav__link--cta {
    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 .eyebrow,
.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-lg);
    color: var(--color-text-inverse);
}

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

.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);
}


/* ──────────────────────────────────────────────────
   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);
}


/* ──────────────────────────────────────────────────
   PROBLEMA
   ────────────────────────────────────────────────── */
.problem {
    padding-block: var(--space-3xl);
    background-color: var(--color-bg-alt);
}

.problem__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.pain-card {
    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);
}

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

.pain-card__title {
    margin-bottom: var(--space-sm);
    font-size: var(--text-lg);
}

.pain-card__body {
    color: var(--color-text-muted);
}

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


/* ──────────────────────────────────────────────────
   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 vertical (9:16) — se deja en su proporción original en vez de
   forzarlo a un formato horizontal que no le corresponde.
   .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 {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 9 / 16;
    margin-inline: auto;
    justify-self: center;
}

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

/* Botón único del video: solo silenciar/activar audio — sin controles
   nativos, mismo lenguaje visual que los íconos flotantes de la foto del
   doctor en Nosotros (--overlay-tag-bg). */
.tech__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);
}

.tech__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. */
.tech__mute-icon[hidden] {
    display: none;
}

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

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

@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-bg-dark);
    color: var(--color-text-inverse);
}

.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-inverse);
}

.trust-bar__label {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--color-text-inverse-muted);
}

@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);
}

.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--doctor {
    aspect-ratio: 5 / 4;
}

/* Redes del doctor — placa flotante sobre su foto, mismo lenguaje visual
   que las etiquetas de las fotos en Resultados (--overlay-tag-bg), para
   que se lea con buen contraste sin importar qué haya detrás. */
.why__doctor-socials {
    position: absolute;
    right: var(--space-md);
    bottom: var(--space-md);
    z-index: 1;
    display: flex;
    gap: var(--space-sm);
}

.why__doctor-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);
}

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

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

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

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

    .why__title,
    .why__lead {
        white-space: nowrap;
    }

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


/* ──────────────────────────────────────────────────
   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 .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; }
}


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

.result-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    max-width: var(--container-md);
    margin-inline: auto;
}

.result-card {
    position: relative;
}

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

.result-card__tag {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: 1;
    padding: 4px 10px;
    font-family: var(--font-accent);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-inverse);
    background-color: var(--overlay-tag-bg);
    border-radius: var(--radius-sm);
}

.result-card__caption {
    margin-top: var(--space-sm);
    text-align: center;
    font-weight: 600;
    color: var(--color-text);
}


/* ──────────────────────────────────────────────────
   REELS DE INSTAGRAM
   ────────────────────────────────────────────────── */
.reels {
    padding-block: var(--space-3xl);
    background-color: var(--color-bg);
}

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

.reels__grid .instagram-media {
    /* El embed de Instagram fija min-width: 326px por inline style (vía su
       propio script). Sin este override, esa cota fuerza el ancho de la
       columna del grid y desborda la página en horizontal en viewports
       intermedios (~768–1000px), donde cada columna del grid es más
       angosta que 326px. */
    margin-inline: auto !important;
    min-width: 0 !important;
}

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


/* ──────────────────────────────────────────────────
   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);
}



/* ──────────────────────────────────────────────────
   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
       de la crema 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 (2.93: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);
}

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


/* ================================================================
   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 (#9d5446) da 4.5:1+ contra los fondos claros del
   sitio, pero solo 2.93: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í (5.55: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,
.final-cta :focus-visible,
.site-footer :focus-visible,
.site-header :focus-visible,
.hero__copy :focus-visible {
    outline-color: var(--color-accent);
}