/* ============================================================================
   ENJOY MEDICAL · hoja de estilo
   ============================================================================
   Hereda el sistema de diseño del proyecto Velia (mismo ritmo, misma disciplina
   de tokens, mismo vocabulario de componentes) y lo reescribe entero para la
   identidad real de Enjoy Medical, extraída de su presentación corporativa.

   Índice
     1. TOKENS
     2. PRIMITIVAS
     3. NAVEGACIÓN
     4. HERO
     5. PROBLEMA
     6. PROCESO
     7. PLANES
     8. ACOMPAÑANTE
     9. CIUDAD
    10. CONFIANZA
    11. FAQ
    12. BONO
    13. CIERRE
    14. PIE
    15. MODAL
    16. ASISTENTE Y WHATSAPP FLOTANTE
    17. COOKIES
    18. RESPONSIVE
    19. MOVIMIENTO REDUCIDO
    20. BIENESTAR
    21. PUERTAS DE ENTRADA
   ============================================================================ */

/* ============================================================================
   1. TOKENS
   ============================================================================ */
:root{
  /* --- Marca, de la presentación oficial ---------------------------------- */
  --azul:#28407E;          /* primario: el color dominante de la marca */
  --turquesa:#00BFA8;      /* acento: el color del símbolo del logo */
  --crema:#FBF6F1;         /* superficie cálida */
  --menta:#B0E7E1;         /* apoyo */
  --azul-palido:#E2EBF2;   /* apoyo */
  --coral:#F79A91;         /* cálido para el bono; viene de las ilustraciones */

  /* --- Derivados, todos verificados contra AA ------------------------------
     Ninguno es decorativo: cada uno existe porque su versión de marca no
     alcanza el contraste mínimo en el uso que se le da.
       --turquesa como TEXTO sobre crema da 2.17:1  → --turquesa-texto da 5.0
       --coral    como TEXTO sobre crema da 1.96:1  → --coral-texto    da 6.2
       --turquesa como BOTÓN con texto blanco da 2.3:1, así que los botones
       turquesa llevan texto oscuro (6.6:1) en vez de blanco. */
  --azul-profundo:#152441;
  --turquesa-texto:#00786B;
  --coral-texto:#8C4A42;
  --tinta:#20313D;
  --niebla:#5B6B79;        /* secundario sobre fondos claros (5.1:1) */
  --niebla-noche:#C3CEDB;  /* secundario sobre fondos oscuros (9.7:1) */

  /* --- Velos, sobre fondos oscuros. Cuatro por rol, no doce sueltos -------- */
  --velo-1:rgba(251,246,241,.14);  /* hairlines y separadores */
  --velo-2:rgba(251,246,241,.24);  /* marcas sutiles */
  --velo-3:rgba(251,246,241,.45);  /* secundario: casillas, ejes */
  --velo-4:rgba(251,246,241,.62);  /* etiquetas y estados */

  /* --- Dinámicos: los mueve el scroll desde main.js ------------------------
     No llevan transición a propósito. El fondo salta en el punto exacto en
     que tinta y crema contrastan igual, que es el momento menos visible; un
     fundido de 300 ms dejaría el texto en grises intermedios ilegibles. */
  --bg:#FBF6F1;
  --fg:#20313D;
  --niebla-din:#5B6B79;
  --acento-din:#00786B;
  --linea-din:rgba(40,64,126,.16);

  /* --- Ritmo -------------------------------------------------------------- */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
  --pad:clamp(20px,5vw,88px);
  /* Aire entre secciones. Cada sección aporta este padding arriba y abajo,
     así que el hueco real entre dos secciones es el DOBLE de este valor. */
  --sec:clamp(46px,6vh,80px);
  --ancho:1180px;
  /* Ancho único de los retratos y marcos de persona (equipo y testimonios).
     Así las dos retículas de la sección Confianza se leen a la misma escala. */
  --retrato:280px;

  --fuente-titulo:'Fraunces',Georgia,'Times New Roman',serif;
  --fuente-cuerpo:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* --- Escala de RADIO: tres niveles, y nada más ---------------------------
     Antes había catorce valores de border-radius sueltos por el fichero. El
     ojo no los nombra, pero los nota: es lo que separa «compuesto» de
     «montado». Aquí quedan tres, por tamaño de superficie:

       xs  detalles casi rectos — biseles, etiquetas, el filo de un bocadillo
       sm  controles y placas  — campos, botones cuadrados, placas ilustradas
       --  tarjetas y paneles — el tamaño por defecto de casi todo

     Las pastillas (100px) y los círculos (50%) no son niveles: son FORMAS, y
     se quedan como están. */
  --radio-xs:4px;
  --radio-sm:10px;
  --radio:16px;

  /* --- Escala de SOMBRA: tres alturas --------------------------------------
     Había doce sombras distintas, casi todas escritas a mano en su tarjeta.
     Cada componente inventaba su propia luz, y eso se ve aunque no se sepa
     decir qué se ve. Ahora hay tres alturas:

       1  en reposo      — una tarjeta apoyada
       2  elevado        — al pasar el ratón, o la pieza destacada de la sección
       3  flotante       — lo que va POR ENCIMA de la página: modal, asistente

     El brillo turquesa de los botones no es una cuarta altura: es color de
     marca, y se COMPONE encima de un nivel (ver .btn-primario). */
  --sombra-1:0 1px 2px rgba(21,36,65,.04),0 12px 32px rgba(21,36,65,.06);
  --sombra-2:0 2px 6px rgba(21,36,65,.05),0 20px 48px rgba(21,36,65,.08);
  --sombra-3:0 26px 70px rgba(21,36,65,.28);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--fuente-cuerpo);
  font-weight:400;
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Fondo continuo atado al scroll: una sola capa fija detrás de todo. */
#capa-fondo{position:fixed;inset:0;z-index:-2;background:var(--bg);pointer-events:none}

/* Grano. Muy sutil: quita el aspecto de plano digital sin que se note. */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--fuente-titulo);font-weight:500;margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
svg{display:block}

:focus-visible{outline:3px solid var(--turquesa-texto);outline-offset:3px;border-radius:var(--radio-xs)}
.salto-contenido{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--azul);color:#fff;padding:14px 22px;border-radius:0 0 var(--radio-sm) 0;
}
.salto-contenido:focus{left:0}

/* Cuando el fondo se vuelve oscuro, el texto principal se invierte. */
body.noche{--fg:#FBF6F1}


/* ============================================================================
   2. PRIMITIVAS
   ============================================================================ */
.wrap{padding-inline:var(--pad)}
.inner{max-width:var(--ancho);margin:0 auto}
.sec{padding-block:var(--sec)}
.sec--compacta{padding-block:calc(var(--sec) * .6)}

.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:.6875rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;color:var(--acento-din);margin-bottom:20px;
  transition:color .4s var(--ease-io);
}
/* El hilo que precede a cada ceja. Es el recurso editorial más barato que hay
   y el que da coherencia al conjunto: la misma marca tipográfica abre todas
   las secciones, así que la página se lee como una publicación y no como una
   pila de bloques. */
.eyebrow::before{
  content:"";width:clamp(28px,4vw,54px);height:1px;
  background:currentColor;opacity:.5;flex-shrink:0;
}
.head--centrado .eyebrow{justify-content:center}
.head{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.head--centrado{margin-inline:auto;text-align:center}

.h-xl{font-size:clamp(2.5rem,6.6vw,5.5rem);line-height:1.02}
.h-l{font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.08}
.h-m{font-size:clamp(1.375rem,2.2vw,2rem);line-height:1.18;font-weight:600}
.lead{
  font-size:clamp(1.0625rem,1.15vw,1.1875rem);
  line-height:1.75;color:var(--niebla-din);max-width:64ch;
  transition:color .4s var(--ease-io);
}

.hairline{height:1px;background:var(--linea-din);border:0;margin:0;transition:background .4s var(--ease-io)}

/* --- Botones --------------------------------------------------------------
   El primario es turquesa con texto oscuro, no blanco: blanco sobre #00BFA8
   da 2.3:1 y no pasa AA. Con texto oscuro da 6.6:1 y conserva el turquesa
   exacto de la marca. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:100px;
  font-size:.9375rem;font-weight:600;letter-spacing:.02em;line-height:1.2;
  transition:transform .3s var(--ease),background .3s var(--ease-io),
             color .3s var(--ease-io),box-shadow .3s var(--ease),
             border-color .3s var(--ease-io);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* El brillo interior superior —inset 0 1px 0— simula luz cayendo desde
   arriba. Es lo que hace que un botón se lea como un objeto con grosor y no
   como un rectángulo de color plano. Detalle de un píxel, efecto entero. */
.btn-primario{
  background:var(--turquesa);color:var(--azul-profundo);
  /* Un nivel de elevación MÁS el brillo de marca. El turquesa no es una cuarta
     altura: se compone encima, y así el botón sigue la misma escala que todo lo
     demás en vez de inventarse la suya. */
  box-shadow:var(--sombra-1),
             0 10px 24px rgba(0,191,168,.22),
             inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primario:hover{
  background:#00CDB5;
  box-shadow:var(--sombra-2),
             0 16px 34px rgba(0,191,168,.28),
             inset 0 1px 0 rgba(255,255,255,.35);
}

.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:#1F356B}

.btn-contorno{border:1.5px solid var(--linea-din);color:var(--fg)}
.btn-contorno:hover{border-color:var(--turquesa-texto);color:var(--turquesa-texto)}

/* Sobre fondo oscuro el primario se invierte para no perder contraste. */
body.noche .btn-primario{background:var(--crema);color:var(--azul-profundo)}
body.noche .btn-contorno{border-color:var(--velo-3);color:var(--crema)}

/* La banda de cookies tiene fondo oscuro SIEMPRE, no sólo de noche, pero el
   botón de contorno tomaba --fg (tinta oscura en modo claro). Contraste
   resultante: 1,05:1 sobre #152441, o sea invisible — y rechazar cookies es
   una acción con implicación legal que debe verse igual que aceptarlas.
   Con --crema sube a 13,6:1. */
#cookies .btn-contorno{border-color:var(--velo-3);color:var(--crema)}

.btn-ancho{width:100%}
.btn-grande{padding:18px 34px;font-size:1rem}

.enlace-flecha{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.9375rem;font-weight:600;color:var(--turquesa-texto);
  border-bottom:1.5px solid transparent;transition:border-color .3s var(--ease-io)
}
.enlace-flecha:hover{border-bottom-color:var(--turquesa-texto)}

/* --- Tarjetas -------------------------------------------------------------- */
.tarjeta{
  background:rgba(255,255,255,.72);
  border:1px solid var(--linea-din);
  border-radius:var(--radio);
  padding:clamp(22px,2.6vw,34px);
  backdrop-filter:blur(6px);
  transition:border-color .35s var(--ease-io),transform .35s var(--ease),box-shadow .35s var(--ease);
}
body.noche .tarjeta{background:rgba(255,255,255,.05)}

/* --- Tríadas de datos ------------------------------------------------------ */
.stats{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,48px)}
.stats b{
  display:block;font-family:var(--fuente-titulo);font-weight:600;
  font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1;color:var(--fg)
}
.stats span{
  display:block;margin-top:8px;font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--niebla-din);
  transition:color .4s var(--ease-io)
}

/* --- Datos pendientes ------------------------------------------------------
   El brief prohíbe inventar cifras. Lo que Enjoy todavía no ha entregado se
   marca así, en vez de rellenarse con algo plausible: un dato sin confirmar
   tiene que GRITAR para que no se publique por descuido. */
.pendiente{
  display:inline-block;
  border:1px dashed rgba(140,74,66,.5);
  background:rgba(247,154,145,.14);
  color:var(--coral-texto);
  border-radius:var(--radio-xs);padding:.05em .5em;
  font-size:.8125rem;font-style:italic;line-height:1.5;
}
body.noche .pendiente{
  border-color:rgba(247,154,145,.6);background:rgba(247,154,145,.18);color:#FFCFC8;
}

/* --- Aparición al hacer scroll --------------------------------------------
   Las .rv las activa ScrollTrigger. Sin JS quedan visibles: el estado base
   es visible y el JS las oculta antes de revelarlas, no al revés. */
.rv{opacity:1}
.js .rv{opacity:0}


/* ============================================================================
   3. NAVEGACIÓN
   ============================================================================ */
/* Altura real de la cabecera fija, medida a 320–2560px con la sonda. La usan
   el hero, para no dejar un hueco de más antes del titular, y scroll-margin-top,
   para que las anclas no aterricen por debajo de la cabecera. */
:root{--alto-nav:71px}
@media (min-width:1100px){:root{--alto-nav:83px}}

/* Al pulsar un enlace del menú, la sección aterrizaba con su borde superior en
   y=0 y la cabecera fija se comía sus primeros 7–11px de contenido. Esto le
   dice al navegador cuánto tiene que dejar libre por arriba. */
section[id]{scroll-margin-top:var(--alto-nav)}

#nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  transition:background .4s var(--ease-io),border-color .4s var(--ease-io),
             transform .45s var(--ease);
  border-bottom:1px solid transparent;
}
#nav.solido{
  background:rgba(251,246,241,.86);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--linea-din);
}
body.noche #nav.solido{background:rgba(21,36,65,.78)}
#nav.oculto{transform:translateY(-102%)}

.nav-inner{
  max-width:var(--ancho);margin:0 auto;
  display:flex;align-items:center;gap:clamp(14px,2vw,24px);
  padding:16px var(--pad);
}
.marca{display:flex;align-items:center;gap:11px;flex-shrink:0}
.marca-simbolo{width:30px;height:30px;flex-shrink:0}
.marca-texto{
  font-family:var(--fuente-titulo);font-weight:600;font-size:1.125rem;
  letter-spacing:-.01em;line-height:1.1;
}
.marca-texto small{
  display:block;font-family:var(--fuente-cuerpo);font-size:.5625rem;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--niebla-din);transition:color .4s var(--ease-io)
}

.nav-links{display:flex;align-items:center;gap:clamp(12px,1.5vw,20px);margin-left:auto}
.nav-links a{
  font-size:.8125rem;font-weight:500;letter-spacing:.01em;
  color:var(--fg);opacity:.78;transition:opacity .3s var(--ease-io);
  /* Una etiqueta de navegación no se parte en dos líneas NUNCA. Si no cabe,
     el problema es que falta sitio; partirla sólo lo disimula, y de paso
     dispara la altura de la cabecera y descoloca todo lo que va debajo. */
  white-space:nowrap;
  /* 16px de alto se queda por debajo del mínimo táctil; la zona de toque se
     amplía sin tocar el alto de la fila (que fija --alto-nav). */
  position:relative
}
.nav-links a::after{content:'';position:absolute;inset:-5px -4px}
.nav-links a:hover{opacity:1}

.nav-derecha{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav-links + .nav-derecha{margin-left:0}

/* Selector de idioma. Dos botones, no un desplegable: son dos opciones. */
.idioma{
  display:flex;align-items:center;gap:2px;
  border:1.5px solid var(--linea-din);border-radius:100px;padding:3px;
  transition:border-color .4s var(--ease-io)
}
.idioma button{
  padding:5px 11px;border-radius:100px;font-size:.75rem;font-weight:600;
  letter-spacing:.06em;color:var(--fg);opacity:.55;
  transition:opacity .25s,background .25s var(--ease-io)
}
.idioma button[aria-pressed="true"]{opacity:1;background:var(--azul);color:#fff}

/* El botón de la cabecera sólo entra cuando de verdad cabe. Por debajo de
   1100px no hay sitio para marca + 5 enlaces + idioma + CTA, y el ancla
   anterior (900px) lo "resolvía" partiendo «Hablar con un asesor» en hasta
   cuatro líneas: como el botón era el elemento más alto de la fila, su altura
   se contagiaba a toda la cabecera, que llegaba a medir 137px. */
.nav-cta{display:none;white-space:nowrap}
@media (min-width:1100px){.nav-cta{display:inline-flex}}

#nav-burger{display:flex;flex-direction:column;gap:5px;padding:8px;margin-left:6px}
#nav-burger span{display:block;width:20px;height:1.5px;background:var(--fg);transition:transform .3s var(--ease)}
@media (min-width:900px){#nav-burger{display:none}}

/* Zonas táctiles. Se agrandan con un pseudo-elemento en vez de con relleno,
   para no alterar la altura de la cabecera (que está atada a --alto-nav ni la
   del pie). Los controles de la cabecera andaban entre 24 y 30px de alto. */
#nav-burger{position:relative}
#nav-burger::after{content:'';position:absolute;inset:-10px -4px}
.marca{position:relative}
.marca::after{content:'';position:absolute;inset:-7px 0}
.idioma button{position:relative}
.idioma button::after{content:'';position:absolute;inset:-7px -1px}

/* Por debajo de 400px no cabe todo. La cabecera pide 363px (marca 205 + idioma
   144 + hueco) y solo hay 280–320px, así que el botón del menú —la ÚNICA vía a
   la navegación en móvil— quedaba fuera del viewport, y como la cabecera es
   fija ese desborde no genera scroll: no había forma de abrirlo.
   Se sueltan la sede bajo el logotipo (ya está en el pie) y relleno de los
   botones de idioma. La altura de la cabecera no cambia: la marca el selector
   de idioma, no el logotipo. */
@media (max-width:399px){
  .marca-texto small{display:none}
  .idioma button{padding:5px 8px}
}
/* A 320px siguen faltando ~26px. Se aprieta el logotipo y el relleno lateral
   en lugar de quitar el selector de idioma, que en una landing bilingüe para
   viajeros es lo último que se debe esconder. */
@media (max-width:359px){
  .nav-inner{padding-inline:12px}
  .marca-texto{font-size:1rem}
  #nav-burger{margin-left:0}
}

/* Menú móvil */
#menu-movil{
  position:fixed;inset:0;z-index:39;
  background:var(--azul-profundo);color:var(--crema);
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:var(--pad);
  transform:translateY(-100%);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .5s var(--ease),opacity .3s var(--ease),visibility .5s;
}
#menu-movil.abierto{
  transform:translateY(0);
  opacity:1;visibility:visible;pointer-events:auto;
}
#menu-movil a{
  font-family:var(--fuente-titulo);font-size:clamp(1.75rem,7vw,2.5rem);
  font-weight:500;padding:10px 0;
}


/* ============================================================================
   4. HERO
   ============================================================================ */
#hero{
  position:relative;
  /* Cabecera + un respiro corto y estable. Antes era clamp(132px,17vh,200px),
     que depende de la ALTURA del viewport: el hueco entre la cabecera y la
     primera línea bailaba entre 31px y 103px según la pantalla (lo peor, una
     tablet en vertical). Atado a la altura real de la cabecera, es el mismo
     respiro en todas. */
  padding-top:calc(var(--alto-nav) + clamp(8px,1.2vh,16px));
  padding-bottom:clamp(48px,6vh,84px);
  /* Lavado de luz. Dos radiales muy suaves que hacen que el fondo se sienta
     ILUMINADO en vez de plano — que es la diferencia entre "una web con fondo
     crema" y "una habitación con luz entrando por la izquierda".
     Van como background de la sección, no como capa con z-index: así dejan ver
     el --bg dinámico por los tramos transparentes sin pelearse con el motor de
     color del scroll. */
  background-image:
    radial-gradient(115% 85% at 8% -8%, rgba(176,231,225,.45), transparent 58%),
    radial-gradient(85% 70% at 100% 4%, rgba(247,154,145,.16), transparent 62%);
}

.hero-grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(44px,6vw,76px);
  /* Las dos columnas arrancan a la misma altura. Con `center`, y como el bloque
     de texto es bastante más alto que la lámina, el vídeo se centraba: acababa
     35–38px por debajo del titular y con un hueco muerto de ~116px bajo la
     cabecera. Alineadas arriba, la lámina acompaña al texto en vez de flotar. */
  align-items:start;
}
/* Asimetría deliberada. Un reparto 1:1 se lee como plantilla; 1.2:0.8 se lee
   como decisión. El texto manda y la lámina lo acompaña. */
@media (min-width:1000px){
  /* Los botones viven fuera de .hero-texto para que en móvil puedan ir
     DESPUÉS del vídeo. Aquí vuelven a la columna izquierda: el vídeo ocupa
     las dos primeras filas de la derecha y los micros cierran bajo el texto. */
  .hero-grid{
    grid-template-columns:1.15fr .85fr;
    grid-template-areas:
      "texto figura"
      "acciones figura"
      "micro .";
    row-gap:0;
  }
  .hero-texto{grid-area:texto}
  .hero-acciones{grid-area:acciones}
  .hero-figura{grid-area:figura}
  .hero-micro{grid-area:micro}
}
@media (min-width:1200px){.hero-grid{grid-template-columns:1.2fr .8fr;column-gap:clamp(60px,7vw,108px)}}

.hero-texto{max-width:660px}
.hero-acciones{max-width:660px}
@media (max-width:999px){
  /* El gap del grid ya separa el vídeo de los botones: el margen del bloque
     de CTAs sobraría y duplicaría el aire. */
  .hero-acciones .hero-ctas{margin-top:0}
}

/* ---------------------------------------------------------------------------
   Las cuatro capas del hero: ceja / titular / subtítulo / entradilla.
   Es la estructura de una portada de revista —kicker, headline, deck,
   standfirst— y es de donde viene la sensación de producto caro. La jerarquía
   se construye con FAMILIA, ESTILO y COLOR, no solo con tamaño.
   --------------------------------------------------------------------------- */
/* La ceja del hero es la primitiva .eyebrow, sin variantes: mismo hilo, misma
   versalita, mismo color dinámico. Solo se le da más aire debajo, porque aquí
   separa del titular más grande de la página. */
#hero .eyebrow{margin-bottom:12px;letter-spacing:.24em}
/* La ceja del hero es la línea más larga de la página y con .24em de tracking
   no cabe en 350px: partía en dos y descolgaba el titular. En móvil se aprieta
   el tracking para que el corte caiga en el separador. */
@media (max-width:560px){#hero .eyebrow{letter-spacing:.1em}}

.hero-titulo{
  font-size:clamp(2.6rem,6.4vw,5.25rem);
  line-height:.98;          /* más apretado que un titular normal: a este
                               tamaño, el aire de línea se vuelve hueco */
  letter-spacing:-.028em;
  font-weight:400;
  max-width:15ch;
  text-wrap:balance;        /* reparte las líneas en vez de dejar una viuda */
}

/* El deck. Serif en cursiva: el escalón que faltaba entre titular y cuerpo,
   y la marca visual de la edición cuidada. */
.hero-subtitulo{
  font-family:var(--fuente-titulo);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.3rem,2.5vw,2.05rem);
  line-height:1.3;
  letter-spacing:-.005em;
  color:var(--turquesa-texto);
  max-width:26ch;
  margin-top:20px;
  text-wrap:balance;
}

/* Entradilla: deliberadamente pequeña y apagada. Responde "¿qué es esto?"
   para el tráfico frío de anuncio, sin competir con el titular. */
.hero-entradilla{
  font-size:.9375rem;line-height:1.7;
  color:var(--niebla-din);
  max-width:46ch;
  margin-top:24px;
  transition:color .4s var(--ease-io);
}

.hero-ctas{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin-top:clamp(32px,4vw,44px);
}
.hero-nota{
  margin-top:16px;font-size:.8125rem;line-height:1.6;
  color:var(--niebla-din);transition:color .4s var(--ease-io);
}


/* La flecha que se desplaza al pasar el ratón. Detalle pequeño, y es
   exactamente lo que separa un botón de un enlace bonito. */
.btn-flecha{width:16px;height:16px;flex-shrink:0;transition:transform .35s var(--ease)}
.btn:hover .btn-flecha{transform:translateX(4px)}

/* ---------------------------------------------------------------------------
   Microbeneficios. Se van los iconos: abarataban. Etiqueta en versalitas,
   texto debajo, y separación por hilos verticales.
   --------------------------------------------------------------------------- */
.hero-micro{
  display:grid;gap:0;grid-template-columns:1fr;
  /* Ya no vive dentro de .hero-texto: es una pieza más de la retícula del
     hero. En móvil el hueco de arriba lo pone el `gap` de .hero-grid, así que
     aquí no va margen (si lo llevara, se sumaría al gap). En escritorio sí lo
     recupera, para dejar la maqueta como estaba. */
  margin-top:0;
  padding-top:clamp(26px,3vw,34px);
  border-top:1px solid var(--linea-din);
}
/* En escritorio sí recupera su margen: cae en una fila propia bajo la columna
   de texto y el row-gap de la retícula es 0, así que la separación la pone
   este margen. Va aquí, y no en el bloque de .hero-grid, porque una regla
   posterior con la misma especificidad anularía el margin-top:0 de arriba. */
@media (min-width:1000px){.hero-micro{margin-top:clamp(40px,5vw,58px)}}
.hero-micro li{padding-block:8px}
.hero-micro b{
  display:block;
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acento-din);margin-bottom:10px;
  transition:color .4s var(--ease-io);
}
.hero-micro span{
  display:block;font-size:.8125rem;line-height:1.55;
  color:var(--niebla-din);transition:color .4s var(--ease-io);
}
@media (min-width:680px){
  .hero-micro{grid-template-columns:repeat(3,1fr)}
  .hero-micro li{padding-block:0}
  .hero-micro li + li{
    border-left:1px solid var(--linea-din);
    padding-left:clamp(16px,2vw,26px);
    margin-left:clamp(16px,2vw,26px);
  }
}

/* ---------------------------------------------------------------------------
   La figura, tratada como LÁMINA enmarcada, no como hueco de imagen.
   Paspartú + hilo interior + pie de foto: el lenguaje de una obra colgada.
   --------------------------------------------------------------------------- */
.hero-figura{margin:0}
@media (min-width:1000px){
  /* Sin descolgar. El -26px de antes pretendía separar la lámina del bloque de
     texto, pero sumado al centrado de la retícula sólo la hundía: el vídeo
     empezaba por debajo del titular. Ahora el margen es 0 y la alineación la
     resuelve `align-items:start`. */
  .hero-figura{margin-top:0}
}
.hero-lamina{
  padding:clamp(12px,1.4vw,20px);           /* el paspartú */
  background:rgba(255,255,255,.55);
  border:1px solid var(--linea-din);
  border-radius:var(--radio-xs);             /* casi recto: lo muy redondeado
                                               es lenguaje de app, no de lujo */
  box-shadow:var(--sombra-2);
}
body.noche .hero-lamina{background:rgba(255,255,255,.06)}
.hero-lamina-inner{
  position:relative;overflow:hidden;
  aspect-ratio:4/5;
  background:linear-gradient(155deg,var(--menta),var(--azul-palido) 58%,var(--crema));
  display:grid;place-items:center;
}
/* El bisel interior: un hilo a 10px del borde, como el que separa la obra
   del paspartú en un marco de verdad. Va por ENCIMA del vídeo, así que se
   mantiene flojo: sobre imagen en movimiento, un hilo fuerte ensucia. */
.hero-lamina-inner::after{
  content:"";position:absolute;inset:10px;z-index:1;
  border:1px solid rgba(255,255,255,.34);pointer-events:none;
}

/* El vídeo llena la lámina. Arranca en opacity 0 y se enciende cuando ya tiene
   fotogramas — si no, se vería un rectángulo negro durante la carga. */
.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .9s var(--ease);
}
.hero-video.listo{opacity:1}

/* Botón de sonido: cristal sobre el vídeo. No lleva velo oscuro debajo porque
   el fondo translúcido más el desenfoque ya lo sostienen sobre cualquier
   fotograma. */
.hero-sound{
  position:absolute;right:14px;bottom:14px;z-index:2;
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(21,36,65,.48);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#FBF6F1;
  transition:background .3s var(--ease-io),border-color .3s var(--ease-io),
             transform .3s var(--ease);
}
/* 42x42 se queda corto para el dedo: la zona de toque llega a 46. */
.hero-sound::after{content:'';position:absolute;inset:-2px}
.hero-sound:hover{background:rgba(21,36,65,.66);transform:scale(1.06)}
.hero-sound svg{width:17px;height:17px}
.hero-sound .ico-on{display:none}
.hero-sound[aria-pressed="true"] .ico-on{display:block}
.hero-sound[aria-pressed="true"] .ico-off{display:none}

/* Cuando el navegador ha bloqueado el arranque con sonido, el botón late UNA
   vez. Es lo único que separa a la persona de oír el vídeo, y sin una señal
   nadie repara en un icono de 42px en una esquina. */
.hero-sound.invita{animation:latido 2.6s var(--ease-io) 1}
@keyframes latido{
  0%,55%,100%{box-shadow:0 0 0 0 rgba(0,191,168,0)}
  25%{box-shadow:0 0 0 11px rgba(0,191,168,.2)}
}

.hero-pie{
  margin-top:16px;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--niebla-din);transition:color .4s var(--ease-io);
}

/* Aparición escalonada del hero. La pone y la quita main.js; si GSAP no
   carga, main.js deja todo visible. */
.js .hero-anim{opacity:0}

/* Marco de imagen. Las fotografías son verticales, así que el formato es 4:5
   — el mismo que la lámina del hero y que el `.persona-foto` del equipo. Eso
   es lo que hace que todas las piezas se lean como una familia y no como
   imágenes sueltas; con un marco horizontal, además, se recortaría más de la
   mitad de cada foto. */
.marco{
  /* El navegador da a <figure> un margen por defecto de 1em 40px. Nadie lo
     reseteaba, así que los dos bloques de foto de esta sección —acompañante y
     Barranquilla— perdían 80px de ancho y arrastraban 16px de aire arriba,
     desalineados con la retícula que los contiene. */
  margin:0;
  position:relative;border-radius:var(--radio);overflow:hidden;
  background:linear-gradient(150deg,var(--menta),var(--azul-palido));
  border:1px solid var(--linea-din);
  aspect-ratio:4/5;
  box-shadow:var(--sombra-2);
}
.marco picture,.marco img{width:100%;height:100%;object-fit:cover;display:block}


/* ============================================================================
   5. PROBLEMA
   ============================================================================ */
#problema .inner{display:grid;gap:clamp(40px,5vw,68px)}
@media (min-width:920px){
  #problema .inner{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start}
}

/* La comparativa como pieza editorial, no como hoja de cálculo. Tres columnas
   en escritorio —etiqueta, la situación, la respuesta— para que la etiqueta
   nunca cruce por encima de la columna destacada. */
.comparativa{
  border:1px solid var(--linea-din);
  border-radius:var(--radio);
  overflow:hidden;
  background:rgba(255,255,255,.66);
  box-shadow:var(--sombra-2);
}
body.noche .comparativa{background:rgba(255,255,255,.05)}

/* En móvil la comparativa es larga: se pliega tras un solo botón para que la
   sección no se coma tres pantallas antes de llegar a los planes. Es un solo
   desplegable, no un acordeón por fila: el valor está en ver la comparación
   entera de un vistazo. */
.comparativa-toggle{
  display:none;width:100%;align-items:center;justify-content:space-between;gap:14px;
  padding:16px clamp(16px,2.2vw,26px);
  border:0;border-bottom:1px solid var(--linea-din);
  background:transparent;color:var(--fg);
  font-family:var(--fuente-cuerpo);font-size:.8125rem;font-weight:600;
  letter-spacing:.02em;text-align:left;cursor:pointer;
  transition:color .25s var(--ease-io);
}
.comparativa-toggle:hover{color:var(--acento-din)}
.comparativa-toggle-icono{width:18px;height:18px;flex-shrink:0;transition:transform .3s var(--ease)}
.comparativa-toggle-ocultar{display:none}
.comparativa-toggle[aria-expanded="true"] .comparativa-toggle-ver{display:none}
.comparativa-toggle[aria-expanded="true"] .comparativa-toggle-ocultar{display:inline}
.comparativa-toggle[aria-expanded="true"] .comparativa-toggle-icono{transform:rotate(180deg)}

@media (max-width:699px){
  .comparativa-toggle{display:flex}
  .comparativa--plegada .comparativa-cuerpo{display:none}
  .comparativa--plegada .comparativa-toggle{border-bottom:0}
}

.comparativa-cabecera,
.comparativa-fila{display:grid;grid-template-columns:1fr 1fr}

.comparativa-cabecera{border-bottom:1px solid var(--linea-din)}
.comparativa-cabecera > *{
  padding:17px clamp(16px,2.2vw,26px);
  font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--niebla-din);
}
.comparativa-cabecera .enjoy{color:var(--turquesa-texto)}
.comparativa-cabecera .hueco{display:none}

.comparativa-fila{border-top:1px solid var(--linea-din)}
.comparativa-fila:first-child{border-top:0}
.comparativa-fila > *{padding:clamp(15px,1.9vw,21px) clamp(16px,2.2vw,26px)}

.comparativa-fila .etiqueta{
  grid-column:1/-1;padding-bottom:0;
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--niebla-din);transition:color .4s var(--ease-io);
}
.comparativa-fila .us{
  font-size:.9375rem;line-height:1.5;color:var(--niebla-din);
  transition:color .4s var(--ease-io);
}

/* La respuesta va en serif y más grande. Esa asimetría tipográfica ES el
   argumento: a la izquierda una circunstancia, a la derecha una promesa. */
.comparativa-fila .enjoy{
  font-family:var(--fuente-titulo);
  font-size:clamp(1.0625rem,1.5vw,1.3125rem);
  line-height:1.3;font-weight:500;
  color:var(--fg);
}
/* La columna de Enjoy, elevada de arriba abajo. Al ir el fondo en CADA celda y
   no en una capa aparte, la banda es continua sin depender de medir el ancho
   de las columnas. */
.comparativa-cabecera .enjoy,
.comparativa-fila .enjoy{
  background:rgba(255,255,255,.5);
  border-left:1px solid var(--linea-din);
}
body.noche .comparativa-cabecera .enjoy,
body.noche .comparativa-fila .enjoy{background:rgba(255,255,255,.06)}

/* En móvil la etiqueta vuelve a cruzar a lo ancho, así que la banda dejaría de
   ser continua: se queda solo el filete como separador. */
@media (max-width:699px){
  .comparativa-cabecera .enjoy,
  .comparativa-fila .enjoy{background:transparent}
}
@media (min-width:700px){
  .comparativa-cabecera,
  .comparativa-fila{grid-template-columns:minmax(150px,.8fr) 1fr 1fr}
  .comparativa-fila .etiqueta{grid-column:auto;align-self:center}
  .comparativa-cabecera .hueco{display:block}
}

/* Rótulo de columna repetido dentro de la celda. Sólo se ve cuando la tabla se
   apila; en el resto de anchos lo pone la cabecera. */
.celda-rotulo{display:none}

/* Por debajo de 560px, dos columnas de ~175px con la respuesta a 17px se leen
   apretadas. Se apila: cada comparación queda como etiqueta y dos bloques, y
   cada bloque lleva su propio rótulo —al desaparecer la cabecera, si no, no se
   sabría cuál es cuál—. El filete pasa de vertical a horizontal. */
@media (max-width:560px){
  .comparativa-cabecera{display:none}
  .comparativa-fila{grid-template-columns:1fr}
  .comparativa-fila .etiqueta{padding-bottom:4px}
  .comparativa-fila .us{padding-top:14px}
  .comparativa-fila .enjoy{
    padding-top:14px;border-left:0;border-top:1px solid var(--linea-din);
  }
  .celda-rotulo{
    display:block;margin-bottom:6px;
    font-family:var(--fuente-cuerpo);
    font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    color:var(--niebla-din);
  }
  .comparativa-fila .enjoy .celda-rotulo{color:var(--turquesa-texto)}
}

.comparativa-pie{
  padding:15px clamp(16px,2.2vw,26px);
  border-top:1px solid var(--linea-din);
  font-size:.8125rem;line-height:1.6;color:var(--niebla-din);
  transition:color .4s var(--ease-io);
}

/* ---------------------------------------------------------------------------
   TELECONSULTA — el servicio gancho
   ---------------------------------------------------------------------------
   Panel oscuro dentro de una sección clara: no cambia el fondo de la página
   (el motor de color sigue midiendo el crema), pero separa la oferta de entrada
   del resto. Todo el texto de dentro fija su color: no hereda del motor. */
.teleconsulta-panel{
  display:grid;gap:clamp(28px,4vw,56px);
  padding:clamp(28px,4.4vw,60px);
  border-radius:var(--radio);
  background:var(--azul-profundo);
  color:var(--crema);
}
@media (min-width:900px){
  .teleconsulta-panel{grid-template-columns:1.15fr .85fr;align-items:start}
  .teleconsulta-lado{align-self:center}
}
.teleconsulta-panel .eyebrow{color:var(--turquesa)}
.teleconsulta-panel .h-l{color:var(--crema);margin-top:14px}
.teleconsulta-panel .lead{color:var(--velo-3);margin-top:18px;max-width:52ch}
.teleconsulta-panel .btn-grande{margin-top:22px}

.teleconsulta-precio{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-top:24px;
}
.teleconsulta-precio-cifra{
  font-family:var(--fuente-titulo);font-weight:500;
  font-size:clamp(2.25rem,4.6vw,3.25rem);line-height:1;
  letter-spacing:-.025em;color:var(--turquesa);
}
.teleconsulta-precio-texto{font-size:.875rem;color:var(--velo-4)}
.teleconsulta-ancla{
  margin-top:10px;max-width:52ch;
  font-size:.8125rem;line-height:1.55;color:var(--turquesa);
}
.teleconsulta-sin-presion{
  margin-top:14px;font-size:.8125rem;line-height:1.6;
  color:var(--turquesa);
}
.teleconsulta-nota{
  margin-top:16px;max-width:48ch;
  font-size:.75rem;line-height:1.6;color:var(--velo-3);
}

.teleconsulta-lado{
  padding:clamp(20px,2.6vw,30px);
  border:1px solid var(--velo-1);
  border-radius:var(--radio-sm);
  background:rgba(255,255,255,.05);
}
.teleconsulta-lado h3{
  font-family:var(--fuente-cuerpo);font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--turquesa);
  margin-bottom:18px;
}
.teleconsulta-lista{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.teleconsulta-lista li{
  position:relative;padding-left:24px;
  font-size:.9375rem;line-height:1.6;color:var(--crema);
}
.teleconsulta-lista li::before{
  content:'';position:absolute;left:0;top:.58em;
  width:8px;height:8px;border-radius:50%;background:var(--turquesa);
}

.teleconsulta-modelo-cabeza{
  margin-top:clamp(40px,5vw,64px);
  margin-bottom:24px;
}
.teleconsulta-modelo{
  display:grid;gap:clamp(18px,2vw,26px);
  grid-template-columns:1fr;
}
@media (min-width:600px){.teleconsulta-modelo{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.teleconsulta-modelo{grid-template-columns:repeat(4,1fr)}}
.teleconsulta-paso{
  padding-top:18px;
  border-top:1px solid var(--linea-din);
}
.teleconsulta-paso-num{
  display:block;font-size:.6875rem;font-weight:600;letter-spacing:.16em;
  color:var(--acento-din);margin-bottom:12px;
}
.teleconsulta-paso h4{
  font-family:var(--fuente-titulo);font-size:1.25rem;line-height:1.3;
  color:var(--fg);margin-bottom:8px;
}
.teleconsulta-paso p{
  font-size:.875rem;line-height:1.65;color:var(--niebla-din);
  transition:color .4s var(--ease-io);
}

/* ---------------------------------------------------------------------------
   COMPARATIVA DE PRECIOS EE. UU.
   ---------------------------------------------------------------------------
   Anclaje visual: la cifra estadounidense manda en tamaño; la local va debajo,
   en el acento, para que la comparación se lea de un vistazo. */
.precios-usa-cabeza{max-width:720px;margin-bottom:clamp(28px,4vw,44px)}
.precios-usa-lista{border-top:1px solid var(--linea-din)}
.precio-fila{
  padding-block:clamp(22px,3vw,30px);
  border-bottom:1px solid var(--linea-din);
}
.precio-fila-servicio{
  font-family:var(--fuente-titulo);font-size:1.25rem;line-height:1.3;
  color:var(--fg);margin-bottom:14px;
}
.precio-fila-paneles{
  display:grid;grid-template-columns:1fr;
  gap:10px;position:relative;
}
@media (min-width:700px){
  .precio-fila-paneles{grid-template-columns:1fr 1fr;gap:0}
  /* La flecha marca la dirección de la oportunidad: de lo que cuesta allí a
     lo que cuesta aquí. */
  .precio-fila-paneles::after{
    content:'→';position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:34px;height:34px;border-radius:50%;
    display:grid;place-items:center;
    background:var(--crema);border:1px solid var(--linea-din);
    color:var(--acento-din);font-size:1rem;z-index:1;
  }
}
.precio-panel{
  padding:clamp(18px,2.2vw,24px);
  border:1px solid var(--linea-din);
  border-radius:var(--radio-sm);
  display:flex;flex-direction:column;
}
@media (min-width:700px){
  .precio-panel-us{border-radius:var(--radio-sm) 0 0 var(--radio-sm);border-right:0}
  .precio-panel-local{border-radius:0 var(--radio-sm) var(--radio-sm) 0}
}
.precio-panel-us{background:rgba(255,255,255,.55)}
body.noche .precio-panel-us{background:rgba(255,255,255,.06)}
.precio-panel-local{
  /* Respaldo plano primero: si no hay color-mix, el panel sigue destacando. */
  background:rgba(0,191,168,.14);
  background:color-mix(in srgb, var(--turquesa) 14%, transparent);
  border-color:var(--turquesa);
}
.precio-panel-label{
  font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--niebla-din);margin-bottom:7px;
}
.precio-panel-local .precio-panel-label{color:var(--acento-din)}
.precio-panel-cifra{
  font-family:var(--fuente-titulo);font-weight:500;
  font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1;
  letter-spacing:-.03em;color:var(--fg);white-space:nowrap;
}
.precio-panel-local .precio-panel-cifra{color:var(--acento-din)}
.precio-panel small{
  margin-top:8px;font-size:.75rem;line-height:1.5;color:var(--niebla-din);
}
.precio-panel-diferencia{
  display:inline-block;align-self:flex-start;
  margin-top:10px;padding:5px 10px;border-radius:100px;
  background:rgba(247,154,145,.22);
  font-size:.75rem;font-weight:600;line-height:1.4;
  color:var(--coral-texto);
}
.precio-panel-diferencia[hidden]{display:none}
.precios-usa-nota{
  margin-top:clamp(24px,3vw,34px);max-width:78ch;
  font-size:.75rem;line-height:1.7;color:var(--niebla-din);
}
.precios-usa-cta{margin-top:clamp(24px,3vw,32px)}


/* ============================================================================
   6. PROCESO
   ============================================================================ */
/* Antes era una lista vertical: cinco bloques de texto apilados, correctos y
   planos. Ahora es un carrusel de desplazamiento NATIVO (`scroll-snap`), que
   aporta tres cosas que la lista no daba: recorrido (se ve que hay más), ritmo
   (cada paso ocupa su propio plano) y control (flechas, teclado, gesto).

   Nativo y no un carrusel de JavaScript a propósito: `scroll-snap` ya trae
   gesto táctil, inercia, teclado y accesibilidad de serie. Reimplementarlo en
   JS sólo añade formas de romperse. */
.proceso-cabeza{
  display:grid;gap:clamp(24px,3vw,40px);
  align-items:end;
  margin-bottom:clamp(34px,4.4vw,56px);
}
@media (min-width:820px){.proceso-cabeza{grid-template-columns:1fr auto}}

.carrusel-nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,28px);margin-left:auto}
.carrusel-cuenta{display:flex;align-items:baseline;gap:5px;font-family:var(--fuente-titulo)}
.carrusel-cuenta b{
  font-size:1.5rem;font-weight:500;line-height:1;color:var(--fg);
  font-variant-numeric:tabular-nums;   /* sin esto el contador baila al cambiar */
}
.carrusel-cuenta span{font-size:.75rem;color:var(--niebla-din);transition:color .4s var(--ease-io)}

.carrusel-flechas{display:flex;gap:8px}
.carrusel-flecha{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--linea-din);color:var(--fg);
  transition:border-color .3s var(--ease-io),color .3s var(--ease-io),
             background .3s var(--ease-io),opacity .3s var(--ease-io);
}
.carrusel-flecha:hover{border-color:var(--turquesa-texto);color:var(--turquesa-texto)}
.carrusel-flecha svg{width:19px;height:19px}
.carrusel-flecha[disabled]{opacity:.28;cursor:default}
.carrusel-flecha[disabled]:hover{border-color:var(--linea-din);color:var(--fg)}

.carrusel-pista{
  display:flex;gap:clamp(16px,2.2vw,26px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-inline:var(--pad);        /* sangra hasta el borde... */
  scroll-padding-inline:var(--pad); /* ...y encaja alineado con la retícula */
  margin:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;    /* que el gesto no arrastre la página entera */
}
.carrusel-pista::-webkit-scrollbar{display:none}

.paso{
  flex:0 0 clamp(272px,76vw,420px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--linea-din);
  border-radius:var(--radio);
  background:rgba(255,255,255,.6);
  /* Los paneles inactivos se retiran y el activo se adelanta. Da profundidad
     sin mover el scroll: es el mismo truco por el que una revista se lee por
     páginas y no como un rollo continuo. */
  opacity:.5;
  transition:opacity .5s var(--ease-io),border-color .4s var(--ease-io),
             background .4s var(--ease-io),transform .5s var(--ease),
             box-shadow .5s var(--ease);
}
body.noche .paso{background:rgba(255,255,255,.05)}
.paso.activo{
  opacity:1;
  transform:translateY(-6px);
  box-shadow:var(--sombra-2);
}

/* La placa ilustrada. Va con bisel interior, igual que la lámina del hero, para
   que las dos piezas hablen el mismo idioma. */
.paso-placa{
  position:relative;
  aspect-ratio:16/10;
  border-radius:var(--radio-sm);
  background:linear-gradient(150deg,var(--menta),var(--azul-palido) 62%,var(--crema));
  display:grid;place-items:center;
  margin-bottom:clamp(22px,2.6vw,30px);
  overflow:hidden;
}
.paso-placa svg{width:44%;max-width:100px;color:var(--azul);opacity:.8}
.paso-placa::after{
  content:"";position:absolute;inset:9px;pointer-events:none;
  border:1px solid rgba(255,255,255,.42);border-radius:var(--radio-xs);
}

.paso-num{
  font-size:.6875rem;font-weight:600;letter-spacing:.18em;
  color:var(--acento-din);margin-bottom:12px;
  transition:color .4s var(--ease-io);
}
.paso h3{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.2;margin-bottom:14px}
.paso p{font-size:.9375rem;line-height:1.7;color:var(--niebla-din);transition:color .4s var(--ease-io)}

/* Rail de progreso: un testigo que se desliza, no una barra que se llena. Dice
   "estás en el 3 de 5", que es más útil que "llevas el 60%". */
.carrusel-rail{
  position:relative;height:1px;margin-top:clamp(28px,3.4vw,42px);
  background:var(--linea-din);
}
.carrusel-rail i{
  position:absolute;top:-0.5px;left:0;height:2px;width:20%;
  background:var(--turquesa);
  transition:transform .35s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .paso,.paso.activo{transform:none}
  .carrusel-rail i{transition:none}
}


/* ============================================================================
   7. PLANES
   ============================================================================ */
.planes-grid{
  display:grid;gap:clamp(18px,2.2vw,26px);
  grid-template-columns:1fr;
  /* Las tarjetas NO se estiran a la altura de la más alta: cuando alguien
     despliega una, las otras dos se quedan como estaban en vez de abrir un
     hueco entre su contenido y su botón. */
  align-items:start;
}
@media (min-width:820px){.planes-grid{grid-template-columns:repeat(3,1fr)}}

.plan{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.78);
  border:1px solid var(--linea-din);
  border-radius:var(--radio);
  padding:clamp(22px,2.4vw,30px);
  transition:border-color .35s var(--ease-io),box-shadow .35s var(--ease),transform .35s var(--ease);
}
body.noche .plan{background:rgba(255,255,255,.05)}
.plan:hover{box-shadow:var(--sombra-2);transform:translateY(-3px)}
.plan.destacado{border-color:var(--turquesa);border-width:2px}

.plan-modalidad{
  font-size:.625rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--niebla-din);margin-bottom:14px;transition:color .4s var(--ease-io);
}
.plan h3{font-size:clamp(1.375rem,2vw,1.75rem);margin-bottom:6px}
.plan-lugar{
  font-size:.875rem;color:var(--niebla-din);margin-bottom:20px;
  transition:color .4s var(--ease-io);
}
.plan-precio{
  font-family:var(--fuente-titulo);font-weight:600;
  font-size:clamp(1.75rem,2.6vw,2.25rem);line-height:1;margin-bottom:4px;
}
.plan-precio-nota{
  font-size:.75rem;color:var(--niebla-din);margin-bottom:22px;
  transition:color .4s var(--ease-io);
}
.plan-duracion{
  display:flex;align-items:center;gap:8px;font-size:.875rem;
  padding-block:14px;margin-bottom:20px;
  border-top:1px solid var(--linea-din);border-bottom:1px solid var(--linea-din);
  color:var(--niebla-din);transition:color .4s var(--ease-io);
}
.plan-duracion svg{width:16px;height:16px;color:var(--turquesa-texto)}

/* --- El desplegable de cada plan ------------------------------------------
   El detalle nace PLEGADO. Antes cada tarjeta abría sus 24 prestaciones de
   golpe: tres columnas altísimas que no se podían comparar de un vistazo, que
   es justo lo que se viene a hacer aquí. Plegado, lo que se compara —precio,
   duración, dónde— queda a la misma altura en las tres. */
.plan-toggle{
  width:100%;
  display:grid;grid-template-columns:1fr auto auto;
  align-items:center;gap:12px;
  padding-block:15px;margin-bottom:20px;
  border-top:1px solid var(--linea-din);
  border-bottom:1px solid var(--linea-din);
  text-align:left;color:var(--fg);
  transition:color .3s var(--ease-io),border-color .3s var(--ease-io);
}
.plan-toggle:hover{color:var(--turquesa-texto)}
.plan-toggle-texto{font-size:.875rem;font-weight:600}
/* Las tres etiquetas de la tarjeta se quedan en 10px: subirlas a 11 engordaba
   el ancho mínimo de la columna y, como la retícula de planes va a 3 columnas
   desde 820px, la tercera tarjeta se salía del viewport. El contador de
   prestaciones va con white-space:nowrap, así que su ancho mínimo es el texto
   entero: cada décima de más empuja la tarjeta. */
.plan-toggle-cuenta{
  font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--niebla-din);transition:color .4s var(--ease-io);
}
.plan-toggle-flecha{
  width:18px;height:18px;color:var(--turquesa-texto);
  transition:transform .35s var(--ease);
}
.plan-toggle[aria-expanded="true"] .plan-toggle-flecha{transform:rotate(180deg)}

/* SIN padding en el panel: con `box-sizing:border-box`, un height:0 con
   padding dentro seguiría midiendo el padding y no plegaría del todo. El aire
   va en el hijo. */
.plan-detalle{overflow:hidden;height:0;transition:height .4s var(--ease)}
.plan-grupos{display:grid;gap:18px;padding-block:20px 26px}
.plan-grupo h4{
  font-family:var(--fuente-cuerpo);font-size:.625rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acento-din);
  margin-bottom:9px;transition:color .4s var(--ease-io);
}
.plan-grupo li{
  position:relative;padding-left:20px;font-size:.875rem;line-height:1.6;
  color:var(--niebla-din);margin-bottom:5px;transition:color .4s var(--ease-io);
}
.plan-grupo li::before{
  content:"";position:absolute;left:2px;top:.58em;
  width:5px;height:5px;border-radius:50%;background:var(--turquesa);
}

.plan-cta{margin-top:auto}

.plan-a-medida{margin-top:clamp(44px,6vw,80px)}
.plan-a-medida-cabeza{margin-bottom:clamp(24px,3vw,34px)}
.plan-a-medida-cabeza .eyebrow{margin-bottom:14px}

.a-medida-grid{display:grid;gap:clamp(18px,2.2vw,26px);grid-template-columns:1fr}
@media (min-width:760px){.a-medida-grid{grid-template-columns:repeat(2,1fr)}}

/* --- Modalidades a la medida ----------------------------------------------
   Comparten ESQUELETO con las tarjetas de plan —misma cabecera, mismo nombre en
   serif, misma fila de datos con filetes, mismo botón— y eso es lo que las hace
   parecer de la casa. Lo que cambia es el ESCALÓN: sin relleno, sin precio y
   sin levantarse al pasar el ratón.

   Se cotizan, no se compran de un vistazo, y el diseño tiene que decir eso
   antes de que nadie lea una palabra. */
.plan--medida{background:transparent}
body.noche .plan--medida{background:transparent}
.plan--medida:hover{
  transform:none;box-shadow:none;border-color:var(--turquesa-texto);
}
.plan-medida-texto{
  font-size:.9375rem;line-height:1.7;color:var(--niebla-din);
  margin-bottom:20px;transition:color .4s var(--ease-io);
}

.nota-precio{
  margin-top:22px;font-size:.8125rem;color:var(--niebla-din);
  transition:color .4s var(--ease-io);
}


/* ============================================================================
   8. ACOMPAÑANTE
   ============================================================================ */
#acompanante .inner{
  display:grid;gap:clamp(34px,5vw,60px);align-items:center;
}
@media (min-width:900px){#acompanante .inner{grid-template-columns:.9fr 1.1fr}}
#acompanante h2{margin-bottom:22px}
#acompanante .lead{margin-bottom:26px}
.beneficio-acompanante{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 20px;border-radius:100px;
  background:rgba(255,255,255,.7);border:1px solid rgba(140,74,66,.22);
  color:var(--coral-texto);font-size:.875rem;font-weight:600;
  margin-bottom:28px;
}
body.noche .beneficio-acompanante{background:rgba(255,255,255,.08)}
.beneficio-acompanante svg{width:18px;height:18px;flex-shrink:0}


/* ============================================================================
   9. CIUDAD
   ============================================================================ */
#ciudad .inner{display:grid;gap:clamp(32px,5vw,56px)}
@media (min-width:900px){#ciudad .inner{grid-template-columns:1fr 1fr;align-items:center}}
.ciudad-texto p{color:var(--niebla-din);margin-bottom:18px;max-width:56ch;transition:color .4s var(--ease-io)}


/* ============================================================================
   10. CONFIANZA
   ============================================================================ */
/* --- El equipo, como una plantilla de personal ----------------------------
   Sin tarjetas. Una retícula separada por hilos se lee como la cabecera de una
   publicación seria; las tarjetas se leen como fichas de producto.

   Los dos van con el mismo peso y en dos columnas a partir de 700px, para que
   se vean uno al lado del otro. Antes el fundador salía a un bloque destacado
   arriba (retrato grande + texto) y aquí solo quedaba el resto: con dos
   personas, eso dejaba media fila vacía y ninguna de las dos se veía junto a
   la otra. */
.equipo-grid{display:grid;grid-template-columns:1fr;border-top:1px solid var(--linea-din)}
.persona{padding-block:clamp(26px,3vw,36px);border-bottom:1px solid var(--linea-din)}

@media (min-width:700px){
  .equipo-grid{grid-template-columns:repeat(2,1fr)}
  .persona{padding-inline:clamp(18px,2vw,28px);border-left:1px solid var(--linea-din)}
  .persona:nth-child(2n+1){padding-left:0;border-left:0}
}

/* El monograma hace de retrato. Es lo que se pone cuando no hay foto, y bien
   hecho no parece un hueco: parece una inicial grabada. */
.persona-mono{
  display:grid;place-items:center;
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--linea-din);
  font-family:var(--fuente-titulo);
  font-size:1.0625rem;font-weight:500;letter-spacing:.04em;
  color:var(--turquesa-texto);
  margin-bottom:22px;
  transition:color .4s var(--ease-io),border-color .4s var(--ease-io);
}
/* Retrato en la ficha. Ocupa el sitio del monograma, pero con otra naturaleza:
   el monograma es lo que se pone cuando no hay foto.

   El ancho se limita a 280px por una razón concreta: el retrato de Sogny mide
   362x452 de origen, así que por debajo de eso se ve nítido incluso en
   pantallas de 2x, y por encima se estiraría una foto que no tiene más píxeles
   que dar. El de Elias mide 768x960 y no es el que manda aquí.

   No lleva `object-position`: los dos ficheros están recortados a 4:5, que es
   justo el ratio del marco, así que `cover` no recorta nada y la propiedad no
   tendría efecto. El encuadre de cada uno ya está dentro de su fichero. */
.persona-foto{
  margin:0 0 22px;max-width:min(100%,var(--retrato));
  aspect-ratio:4/5;border-radius:var(--radio);overflow:hidden;
  border:1px solid var(--linea-din);
  background:linear-gradient(150deg,var(--menta),var(--azul-palido));
}
.persona-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* El nombre pesa más que antes: cuando esto era una lista de plantilla, el
   retrato grande lo llevaba el fundador arriba y aquí 1.25rem iba bien. Ahora
   los dos son igual de protagonistas, así que el nombre tiene que sostener un
   retrato de 280px. Sigue muy por debajo del titular de sección, que es
   `.h-l`: no compite con él. */
.persona h3{font-size:clamp(1.35rem,2.2vw,1.6rem);line-height:1.15;margin-bottom:6px}
.persona-cargo{
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acento-din);margin-bottom:14px;transition:color .4s var(--ease-io);
}
.persona-detalle{
  font-size:.9375rem;line-height:1.65;color:var(--niebla-din);
  transition:color .4s var(--ease-io);
}

/* --- Testimonios ----------------------------------------------------------
   Cuatro vídeos verticales (9:16) en carrusel nativo. La tarjeta comparte el
   ancho `--retrato` del equipo, pero el marco conserva el ratio del vídeo:
   recortar un 9:16 a 4:5 se llevaría buena parte del encuadre.
   Si un testimonio no tuviera vídeo, el marco cae en el degradado con el
   aviso «Vídeo pendiente»: un hueco declarado, nunca una reseña inventada. */
.testimonios{margin-top:clamp(56px,7vw,96px)}
.testimonios-cabeza{
  display:grid;gap:clamp(24px,3vw,40px);align-items:end;
  margin-bottom:clamp(24px,3vw,36px);
}
@media (min-width:820px){.testimonios-cabeza{grid-template-columns:1fr auto}}
.testimonios-cabeza .eyebrow{margin-bottom:14px}
.testimonios-intro{
  margin-top:12px;font-size:.9375rem;line-height:1.7;
  color:var(--niebla-din);max-width:62ch;
  transition:color .4s var(--ease-io);
}
.testimonios-pista{
  display:flex;gap:clamp(18px,2.4vw,28px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  margin:0;padding:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.testimonios-pista::-webkit-scrollbar{display:none}
/* Espaciador final: deja que la última tarjeta pueda alinearse al borde y que
   el mando tenga recorrido real cuando casi todas caben en pantalla. */
.testimonios-pista::after{
  content:"";
  flex:0 0 calc(100% - min(var(--retrato),82vw));
}

.testimonio{
  flex:0 0 min(var(--retrato),82vw);
  scroll-snap-align:start;
  display:flex;flex-direction:column;
}
.testimonio-marco{
  position:relative;aspect-ratio:9/16;
  border-radius:var(--radio);overflow:hidden;
  border:1px solid var(--linea-din);
  background:linear-gradient(150deg,var(--menta),var(--azul-palido) 62%,var(--crema));
  display:grid;place-items:center;
}
.testimonio-marco video{
  width:100%;height:100%;object-fit:cover;display:block;
  background:#000;
}
.testimonio-play{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(27,44,86,.24);
  background:rgba(255,255,255,.58);
  color:var(--azul);
}
.testimonio-play svg{width:22px;height:22px;margin-left:2px}
.testimonio-pendiente{
  position:absolute;left:0;right:0;bottom:16px;
  text-align:center;font-size:.6875rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--azul);
}
.testimonio-pie{padding-top:16px}
.testimonio-num{
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acento-din);
  margin-bottom:8px;transition:color .4s var(--ease-io);
}
.testimonio-nombre{
  font-family:var(--fuente-titulo);font-weight:500;
  font-size:clamp(1.125rem,1.6vw,1.35rem);line-height:1.25;
  margin-bottom:4px;
}
.testimonio-ciudad{
  font-size:.8125rem;color:var(--niebla-din);
  transition:color .4s var(--ease-io);
}
.testimonio-cita{
  margin-top:10px;font-size:.9375rem;line-height:1.7;
  color:var(--niebla-din);transition:color .4s var(--ease-io);
}
.testimonios-aviso{
  margin-top:clamp(22px,3vw,32px);
  font-size:.8125rem;line-height:1.6;color:var(--niebla-din);
  max-width:62ch;transition:color .4s var(--ease-io);
}

/* La información de los tiquetes aéreos —que vivía en el tercer compromiso—
   sigue en la nota de precio de los planes, en el FAQ y en Nova. */


/* ============================================================================
   11. FAQ
   ============================================================================ */
.acordeon{max-width:840px;border-top:1px solid var(--linea-din)}
.acordeon-item{border-bottom:1px solid var(--linea-din)}
.acordeon-boton{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;padding:22px 0;text-align:left;
  font-family:var(--fuente-titulo);font-weight:500;
  font-size:clamp(1.0625rem,1.5vw,1.3rem);line-height:1.4;
}
.acordeon-icono{
  position:relative;flex-shrink:0;width:18px;height:18px;margin-top:.3em;
}
.acordeon-icono::before,.acordeon-icono::after{
  content:"";position:absolute;background:var(--turquesa-texto);
  transition:transform .35s var(--ease),opacity .3s var(--ease-io);
}
.acordeon-icono::before{top:8px;left:0;width:18px;height:2px}
.acordeon-icono::after{left:8px;top:0;width:2px;height:18px}
.acordeon-boton[aria-expanded="true"] .acordeon-icono::after{transform:scaleY(0);opacity:0}

.acordeon-panel{
  overflow:hidden;height:0;
  transition:height .4s var(--ease);
}
.acordeon-panel p{
  padding-bottom:24px;max-width:68ch;
  color:var(--niebla-din);font-size:.9375rem;line-height:1.75;
  transition:color .4s var(--ease-io);
}

/* --- El desplegable del resto ---------------------------------------------
   Nueve preguntas seguidas son un muro. Se ven las tres primeras y el resto
   espera detrás de esta línea. El color sale del acento DINÁMICO (--acento-din)
   porque esto sí vive sobre el fondo de la página, que cambia con el scroll. */
.acordeon-mas{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:24px 0 0;
  font-size:.875rem;font-weight:600;color:var(--acento-din);
  transition:color .4s var(--ease-io);
}
.acordeon-mas:hover{
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.acordeon-mas-flecha{
  width:16px;height:16px;flex-shrink:0;
  transition:transform .35s var(--ease);
}
/* Las dos etiquetas están en el DOM y el CSS enseña una u otra. Así el texto
   cambia sin que el manejador delegado sepa nada de este botón. */
.acordeon-mas-menos{display:none}
.acordeon-mas[aria-expanded="true"] .acordeon-mas-texto{display:none}
.acordeon-mas[aria-expanded="true"] .acordeon-mas-menos{display:inline}
.acordeon-mas[aria-expanded="true"] .acordeon-mas-flecha{transform:rotate(180deg)}

/* Sin padding en el panel: con box-sizing border-box un height:0 con padding
   dentro seguiría midiendo el padding y no plegaría del todo. */
.acordeon-resto{overflow:hidden;height:0;transition:height .45s var(--ease)}
/* El primer item del resto abre lista propia, para que al desplegar se vea
   dónde empieza en vez de aparecer pegado al botón. */
.acordeon-resto > div > .acordeon-item:first-child{border-top:1px solid var(--linea-din)}


/* ============================================================================
   12. BONO
   ============================================================================ */
#bono .inner{
  border-radius:var(--radio);
  padding:clamp(30px,4.4vw,60px);
  background:rgba(255,255,255,.66);
  border:1px solid rgba(140,74,66,.24);
  display:grid;gap:clamp(26px,4vw,44px);align-items:center;
}
@media (min-width:860px){#bono .inner{grid-template-columns:1.3fr auto}}
#bono .eyebrow{color:var(--coral-texto)}
#bono h2{margin-bottom:16px}
#bono p{color:var(--niebla-din);max-width:58ch;transition:color .4s var(--ease-io)}

.contador{display:flex;gap:12px;margin-top:22px}
.contador-unidad{
  min-width:66px;padding:12px 10px;border-radius:var(--radio-sm);
  background:rgba(255,255,255,.8);border:1px solid rgba(140,74,66,.2);
  text-align:center;
}
body.noche .contador-unidad{background:rgba(255,255,255,.08)}
.contador-unidad b{
  display:block;font-family:var(--fuente-titulo);font-weight:600;
  font-size:1.6rem;line-height:1;color:var(--coral-texto);
  font-variant-numeric:tabular-nums;
}
.contador-unidad span{
  display:block;margin-top:7px;font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--niebla-din);
  transition:color .4s var(--ease-io);
}
.bono-condiciones{
  margin-top:22px;font-size:.75rem;line-height:1.6;
  color:var(--niebla-din);transition:color .4s var(--ease-io);
}


/* ============================================================================
   13. CIERRE
   ============================================================================ */
#cierre{text-align:center}
#cierre .inner{max-width:820px;margin:0 auto}
#cierre h2{margin-bottom:22px}
#cierre .lead{margin:0 auto 36px}
.cierre-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}


/* ============================================================================
   14. PIE
   ============================================================================ */
#pie{
  background:var(--azul-profundo);color:var(--crema);
  padding-block:clamp(50px,7vw,84px);
  margin-top:var(--sec);
}
#pie .inner{display:grid;gap:clamp(30px,4vw,54px)}
@media (min-width:620px){#pie .inner{grid-template-columns:1fr 1fr}}
@media (min-width:960px){
  #pie .inner{
    grid-template-columns:1.5fr .7fr .8fr 1fr;
    gap:clamp(36px,4.5vw,64px);
    align-items:start;
  }
}
#pie .marca-texto{color:var(--crema)}
#pie .marca-texto small{color:var(--velo-4)}
#pie .marca-simbolo path{fill:var(--turquesa)}

.pie-tagline{
  margin-top:20px;font-family:var(--fuente-titulo);
  font-size:1.25rem;color:var(--menta);max-width:24ch;
}
.pie-identidad{
  margin-top:18px;font-size:.75rem;line-height:1.7;
  color:var(--velo-3);
}
.pie-identidad p{margin:0}
.pie-identidad strong{font-weight:600;color:var(--velo-4)}
.pie-identidad address{font-style:normal}
.pie-identidad a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pie-identidad a:hover{color:var(--turquesa)}

.pie-redes{
  margin-top:26px;padding-top:22px;
  border-top:1px solid var(--velo-1);
}
.pie-redes h3{
  font-family:var(--fuente-cuerpo);font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--velo-4);
  margin-bottom:14px;
}
.pie-redes-lista{
  display:flex;align-items:center;gap:10px;
  padding:0;margin:0;list-style:none;
}
.pie-red-social{
  width:42px;height:42px;border-radius:50%;
  display:inline-grid;place-items:center;
  border:1px solid var(--velo-2);color:var(--crema);
  transition:background .25s var(--ease-io),border-color .25s var(--ease-io),
             color .25s var(--ease-io),transform .25s var(--ease-io);
}
.pie-red-social svg{width:19px;height:19px;display:block}
.pie-red-social:hover{
  background:var(--turquesa);border-color:var(--turquesa);
  color:var(--azul-profundo);transform:translateY(-1px);
}
.pie-red-social--sin-enlace{opacity:.5;cursor:default}
.pie-red-social--sin-enlace:hover{
  background:transparent;border-color:var(--velo-2);
  color:var(--crema);transform:none;
}
.pie-col h3{
  font-family:var(--fuente-cuerpo);font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--velo-4);margin-bottom:16px;
}
.pie-col li{margin-bottom:10px;font-size:.875rem;color:var(--velo-3)}
.pie-col address{font-style:normal;line-height:1.6}
.pie-col a{color:var(--crema);transition:color .25s var(--ease-io);
  /* Los enlaces del pie medían 69x17 y 93x20. WCAG 2.5.8 (AA) pide 24x24, y
     la excepción de «enlace dentro de una frase» no aplica: aquí van en una
     lista. El relleno vertical les da altura sin separarlos de su renglón. */
  display:inline-block;padding-block:6px}
.pie-col a[hidden]{display:none}
.pie-col a:hover{color:var(--turquesa)}

.pie-legal{
  grid-column:1/-1;padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--velo-1);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:.75rem;color:var(--velo-3);
}
.pie-legal a{position:relative}
.pie-legal a::after{content:'';position:absolute;inset:-4px -3px}
.pie-aviso{
  grid-column:1/-1;font-size:.75rem;line-height:1.7;
  color:var(--velo-3);max-width:70ch;
}


/* ============================================================================
   15. MODAL
   ============================================================================ */
#modal{
  position:fixed;inset:0;z-index:60;
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
#modal.abierto{display:flex}
.modal-fondo{
  position:absolute;inset:0;background:rgba(21,36,65,.62);
  backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s var(--ease-io);
}
#modal.abierto .modal-fondo{opacity:1}
.modal-caja{
  /* dvh y no vh: en móvil `vh` mide la pantalla CON la barra del navegador
     oculta, así que la caja puede exceder el área visible y cortarse por abajo
     —justo donde van los botones—. La línea de vh queda como respaldo para
     navegadores sin dvh. */
  position:relative;width:100%;max-width:480px;max-height:92vh;max-height:92dvh;overflow-y:auto;
  background:var(--crema);color:var(--tinta);
  border-radius:var(--radio);padding:clamp(26px,3.4vw,38px);
  box-shadow:var(--sombra-3);
  transform:translateY(14px) scale(.985);
  transition:transform .4s var(--ease);
}
#modal.abierto .modal-caja{transform:none}
.modal-cerrar{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;color:var(--niebla);
  transition:background .25s var(--ease-io),color .25s;
}
.modal-cerrar:hover{background:rgba(40,64,126,.08);color:var(--azul)}
.modal-caja h2{font-size:1.5rem;margin-bottom:10px}
.modal-intro{font-size:.9375rem;color:var(--niebla);margin-bottom:26px}

.campo{margin-bottom:18px}
.campo label{
  display:block;font-size:.8125rem;font-weight:600;
  margin-bottom:7px;color:var(--tinta);
}
.campo .opcional{
  font-weight:400;color:var(--niebla);font-size:.75rem;margin-left:6px;
}
.campo input,.campo select{
  width:100%;padding:13px 15px;
  font-family:inherit;font-size:1rem;color:var(--tinta);
  background:#fff;border:1.5px solid rgba(40,64,126,.18);
  border-radius:var(--radio-sm);
  transition:border-color .25s var(--ease-io),box-shadow .25s;
}
.campo input:focus,.campo select:focus{
  outline:none;border-color:var(--turquesa-texto);
  box-shadow:0 0 0 3px rgba(0,191,168,.22);
}
.campo-ayuda{font-size:.75rem;color:var(--niebla);margin-top:6px}
.campo-tel{display:grid;grid-template-columns:auto 1fr;gap:10px}
.campo-tel select{width:auto;min-width:104px}

.campo-error{
  display:none;font-size:.75rem;color:#A33;margin-top:6px;font-weight:500;
}
.campo.invalido input,.campo.invalido select{border-color:#C55}
.campo.invalido .campo-error{display:block}

.casilla{display:flex;gap:11px;align-items:flex-start;margin-bottom:24px}
.casilla input{
  width:19px;height:19px;flex-shrink:0;margin-top:2px;
  accent-color:var(--turquesa-texto);
}
.casilla label{font-size:.8125rem;line-height:1.55;color:var(--niebla)}
.casilla a{color:var(--turquesa-texto);text-decoration:underline}
.casilla.invalido label{color:#A33}

.modal-nota{font-size:.75rem;color:var(--niebla);margin-top:14px;text-align:center}
.modal-acciones{display:grid;gap:10px}

body.modal-abierto{overflow:hidden}


/* ============================================================================
   16. ASISTENTE (Nova)
   ============================================================================
   Una burbuja en la esquina y un panel que sube al pulsarla.

   El panel NO es modal: se puede seguir leyendo la página con él abierto, así
   que no bloquea el scroll ni encierra el foco. Un chat que secuestra la
   pantalla para preguntar el nombre es lo contrario de elegante.

   OJO CON LOS COLORES: aquí NO se usan los tokens dinámicos (--fg,
   --niebla-din, --linea-din). Esos los mueve el motor de color según el fondo
   de la PÁGINA, y este panel tiene fondo crema propio que no cambia con el
   scroll. Con los dinámicos, al pasar por un tramo oscuro el texto del chat se
   volvería claro sobre crema y no se leería. Aquí todo es fijo. */
.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- La burbuja ------------------------------------------------------------ */
.asistente-burbuja{
  position:fixed;right:18px;bottom:18px;z-index:46;
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--azul-profundo);color:var(--turquesa);
  box-shadow:var(--sombra-3);
  transition:transform .4s var(--ease),background .3s var(--ease-io),
             opacity .3s var(--ease-io);
}
.asistente-burbuja:hover{transform:scale(1.05)}
.asistente-burbuja svg{
  grid-area:1/1;width:26px;height:26px;
  transition:opacity .3s var(--ease-io),transform .4s var(--ease);
}
.asistente-burbuja .burbuja-cerrar{opacity:0;transform:rotate(-45deg)}
.asistente-burbuja[aria-expanded="true"] .burbuja-abrir{opacity:0;transform:rotate(45deg)}
.asistente-burbuja[aria-expanded="true"] .burbuja-cerrar{opacity:1;transform:none}

/* Un latido al llegar, que se apaga en cuanto se abre. Es lo único que hace
   que alguien repare en una burbuja de 58px en una esquina. */
.burbuja-latido{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1.5px solid var(--turquesa);opacity:0;
}
.asistente-burbuja.invita .burbuja-latido{animation:latidoAsistente 3s var(--ease-io) 2}
@keyframes latidoAsistente{
  0%{opacity:.7;transform:scale(1)}
  70%,100%{opacity:0;transform:scale(1.5)}
}

/* --- El panel -------------------------------------------------------------- */
.asistente{
  position:fixed;right:18px;bottom:88px;z-index:46;
  width:min(400px,calc(100vw - 36px));
  max-height:min(640px,calc(100vh - 130px));
  max-height:min(640px,calc(100dvh - 130px));   /* ver nota en .modal-caja */
  display:flex;flex-direction:column;
  background:var(--crema);
  border:1px solid rgba(40,64,126,.16);
  border-radius:var(--radio);
  box-shadow:var(--sombra-3);
  overflow:hidden;
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .3s var(--ease-io),transform .38s var(--ease);
}
.asistente[hidden]{display:none}   /* el display:flex de arriba anula [hidden] */
.asistente.abierto{opacity:1;transform:none}

.asistente-cabeza{
  display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:12px;
  padding:15px 16px;
  background:var(--azul-profundo);color:var(--crema);
  flex-shrink:0;
}
.asistente-simbolo{width:32px;height:32px;color:var(--turquesa)}
.asistente-quien h2{
  font-family:var(--fuente-titulo);font-weight:500;
  font-size:1.25rem;line-height:1.1;color:var(--crema);
}
.asistente-quien p{font-size:.75rem;color:var(--velo-3);margin-top:3px}
.asistente-estado{
  display:flex;align-items:center;gap:7px;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--velo-3);white-space:nowrap;
}
.asistente-estado i{
  width:6px;height:6px;border-radius:50%;background:var(--turquesa);
  box-shadow:0 0 0 3px rgba(0,191,168,.2);
}
.asistente-cerrar{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:var(--velo-3);
  transition:background .25s var(--ease-io),color .25s var(--ease-io);
}
.asistente-cerrar:hover{background:rgba(251,246,241,.1);color:var(--crema)}
.asistente-cerrar svg{width:18px;height:18px}

/* --- La conversación -------------------------------------------------------- */
.asistente-hilo{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:12px;
  padding:20px 18px 10px;
}
.mensaje{
  max-width:86%;font-size:.9375rem;line-height:1.6;
  animation:entraMensaje .45s var(--ease) both;
}
@keyframes entraMensaje{from{opacity:0;transform:translateY(8px)}}
.mensaje-nova{
  align-self:flex-start;
  background:#fff;border:1px solid rgba(40,64,126,.16);
  /* La cola va abajo a la IZQUIERDA en los de Nova y abajo a la derecha en los
     del usuario: son espejo, y por eso el orden de las cuatro esquinas no es
     el mismo. */
  border-radius:var(--radio-sm) var(--radio-sm) var(--radio-sm) var(--radio-xs);
  padding:12px 15px;color:var(--tinta);
}
.mensaje-tu{
  align-self:flex-end;
  background:var(--turquesa);color:var(--azul-profundo);
  border-radius:var(--radio-sm) var(--radio-sm) var(--radio-xs) var(--radio-sm);
  padding:12px 15px;font-weight:500;
}
.mensaje a{color:var(--turquesa-texto);text-decoration:underline}
.mensaje strong{font-weight:600}

/* Tres puntos mientras Nova prepara la respuesta. */
.mensaje-pensando{display:flex;gap:5px;align-items:center;padding:15px 16px}
.mensaje-pensando i{
  width:6px;height:6px;border-radius:50%;background:var(--niebla);
  animation:puntoEscribiendo 1.3s var(--ease-io) infinite;
}
.mensaje-pensando i:nth-child(2){animation-delay:.16s}
.mensaje-pensando i:nth-child(3){animation-delay:.32s}
@keyframes puntoEscribiendo{
  0%,60%,100%{opacity:.28;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}
}

/* --- Sugerencias ------------------------------------------------------------ */
.asistente-sugerencias{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:4px 18px 14px;flex-shrink:0;
}
.asistente-sugerencias:empty{display:none}
.sugerencia{
  padding:8px 14px;border-radius:100px;
  border:1px solid rgba(40,64,126,.16);
  font-size:.8125rem;color:var(--tinta);
  transition:border-color .25s var(--ease-io),color .25s var(--ease-io),
             background .25s var(--ease-io);
}
.sugerencia:hover{border-color:var(--turquesa-texto);color:var(--turquesa-texto)}
.sugerencia--accion{background:var(--turquesa);border-color:var(--turquesa);color:var(--azul-profundo);font-weight:600}
.sugerencia--accion:hover{background:#00CDB5;border-color:#00CDB5;color:var(--azul-profundo)}

/* --- Escribir --------------------------------------------------------------- */
.asistente-form{
  display:grid;grid-template-columns:1fr auto;gap:8px;
  padding:12px 14px;flex-shrink:0;
  border-top:1px solid rgba(40,64,126,.16);
  background:rgba(255,255,255,.62);
}
.asistente-form input{
  width:100%;padding:12px 16px;font:inherit;font-size:.9375rem;
  color:var(--tinta);background:#fff;
  border:1.5px solid rgba(40,64,126,.16);border-radius:100px;
  transition:border-color .25s var(--ease-io),box-shadow .25s var(--ease-io);
}
.asistente-form input:focus{
  outline:none;border-color:var(--turquesa-texto);
  box-shadow:0 0 0 3px rgba(0,191,168,.2);
}
.asistente-form button{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--turquesa);color:var(--azul-profundo);
  transition:background .25s var(--ease-io),transform .25s var(--ease);
}
.asistente-form button:hover{background:#00CDB5;transform:scale(1.05)}
.asistente-form button svg{width:20px;height:20px}

.asistente-aviso{
  padding:0 18px 14px;flex-shrink:0;
  font-size:.6875rem;line-height:1.5;color:var(--niebla);
}

/* --- Móvil: el panel pasa a hoja inferior ---------------------------------- */
@media (max-width:520px){
  .asistente{
    right:0;left:0;bottom:0;
    width:100%;max-height:86vh;max-height:86dvh;
    border-radius:var(--radio) var(--radio) 0 0;border-bottom:0;
  }
  .asistente-estado{display:none}
  .asistente-burbuja{right:14px;bottom:14px}
  /* Con la hoja abierta, la burbuja sobra: el panel ya trae su cruz. */
  .asistente-burbuja[aria-expanded="true"]{opacity:0;pointer-events:none}
}

@media (prefers-reduced-motion:reduce){
  .asistente,.asistente-burbuja,.asistente-burbuja svg{transition:none}
  .mensaje{animation:none}
  .asistente-burbuja.invita .burbuja-latido{animation:none}
}


/* --- WhatsApp flotante -----------------------------------------------------
   La vía más corta a una conversación. Misma familia visual que la burbuja
   de Nova —azul profundo y turquesa—, pero en pastilla con etiqueta: el icono
   solo no dice «WhatsApp» con la misma claridad.

   z-index 45: por encima de la navegación (40) y por debajo de lo que tiene
   que taparlo de verdad —cookies (50) y modal (60)—. */
.wa-flotante{
  position:fixed;right:18px;bottom:18px;z-index:45;
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:10px;
  height:56px;padding:0 20px 0 10px;
  border-radius:100px;
  background:var(--azul-profundo);color:var(--crema);
  border:1px solid rgba(0,191,168,.32);
  box-shadow:var(--sombra-2);
  font-size:.8125rem;font-weight:600;letter-spacing:.01em;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),
             border-color .3s var(--ease-io),background .3s var(--ease-io);
}
.wa-flotante:hover{
  transform:translateY(-2px);
  border-color:var(--turquesa);
  box-shadow:var(--sombra-3);
}
.wa-flotante-icono{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:rgba(0,191,168,.16);color:var(--turquesa);
  transition:background .3s var(--ease-io),color .3s var(--ease-io);
}
.wa-flotante-icono svg{width:21px;height:21px;display:block}
.wa-flotante:hover .wa-flotante-icono{
  background:var(--turquesa);color:var(--azul-profundo);
}
.wa-flotante-texto{white-space:nowrap;padding-right:2px}

/* En móvil, círculo limpio: la etiqueta se oculta, pero el nombre accesible
   sigue viniendo de flotante.aria. */
@media (max-width:520px){
  .wa-flotante{
    width:56px;height:56px;padding:0;justify-content:center;
    right:max(14px,env(safe-area-inset-right));
    bottom:max(14px,env(safe-area-inset-bottom));
  }
  .wa-flotante-texto{display:none}
}

/* ============================================================================
   17. COOKIES
   ============================================================================ */
#cookies{
  position:fixed;left:18px;right:18px;bottom:18px;z-index:50;
  max-width:620px;margin:0 auto;
  background:var(--azul-profundo);color:var(--crema);
  border-radius:var(--radio);padding:22px clamp(20px,3vw,28px);
  box-shadow:var(--sombra-3);
  display:none;
}
#cookies.visible{display:block}
#cookies p{font-size:.875rem;line-height:1.65;color:var(--velo-3);margin-bottom:18px}
#cookies .acciones{display:flex;flex-wrap:wrap;gap:10px}
/* En móvil, hoja a ancho completo. Con 18px de margen por lado y ~250px de
   alto, la banda se comía un tercio de la pantalla y tapaba contenido hasta
   que se decidía. Pegada abajo, ancho completo, y el texto más compacto. */
@media (max-width:520px){
  #cookies{
    left:0;right:0;bottom:0;max-width:none;
    border-radius:var(--radio) var(--radio) 0 0;
    padding:18px 20px calc(18px + env(safe-area-inset-bottom));
  }
  #cookies p{font-size:.8125rem;line-height:1.55;margin-bottom:14px}
}


/* ============================================================================
   18. RESPONSIVE
   ============================================================================ */
@media (max-width:899px){
  .nav-links{display:none}
}
@media (max-width:639px){
  .stats{gap:22px}
  .comparativa-fila > *{padding:13px 14px;font-size:.875rem}
  .contador{flex-wrap:wrap}
}


/* ============================================================================
   19. MOVIMIENTO REDUCIDO
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rv{opacity:1 !important;transform:none !important}
  .btn:hover{transform:none}
}


/* ============================================================================
   20. BIENESTAR — camino propio, no complemento forzado
   ============================================================================
   Va al final del fichero y con prefijo `wellness-` en TODO, a propósito: son
   estilos nuevos y no deben rozar ninguno de los que ya existían. Ninguna regla
   de aquí toca una clase anterior.

   Los colores salen solo de las variables que ya existían. Donde el brief pedía
   `--color-warm-soft` y `--color-highlight`, que NO existen en esta identidad,
   se usa --coral: es el cálido real de la marca, y es exactamente el hueco que
   ese token venía a llenar (la marca no tiene ámbar). */
.wellness-panel{
  border-radius:var(--radio);
  border:1px solid var(--linea-din);
  padding:clamp(30px,4.4vw,60px);
  /* Respaldo plano primero: si el navegador no entiende color-mix, se queda
     el crema y no rompe nada. */
  background:var(--crema);
  background:color-mix(in srgb, var(--coral) 8%, var(--crema));
}
body.noche .wellness-panel{background:rgba(255,255,255,.05)}

/* --- Las dos tarjetas de descuento ---------------------------------------- */
.wellness-descuentos{
  display:grid;grid-template-columns:1fr;
  gap:clamp(14px,1.8vw,20px);
  margin-bottom:14px;
}
@media (min-width:700px){.wellness-descuentos{grid-template-columns:1fr 1fr}}

.wellness-descuento{
  padding:clamp(22px,2.6vw,32px);
  border-radius:var(--radio-sm);
  border:1px solid var(--linea-din);
  background:rgba(255,255,255,.5);
}
body.noche .wellness-descuento{background:rgba(255,255,255,.06)}

/* El destacado lleva el cálido de la marca, en borde y en fondo. */
.wellness-descuento--destacado{
  border-color:var(--coral);
  background:rgba(247,154,145,.16);                          /* --coral al 16% */
  background:color-mix(in srgb, var(--coral) 16%, transparent);
}
body.noche .wellness-descuento--destacado{
  background:rgba(247,154,145,.12);
}

.wellness-descuento-cifra{
  font-family:var(--fuente-titulo);font-weight:500;
  font-size:clamp(2.25rem,4.6vw,3.25rem);line-height:1;
  letter-spacing:-.025em;color:var(--coral-texto);
  margin-bottom:10px;
}
.wellness-descuento-texto{
  font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.45;
  color:var(--fg);
}
.wellness-descuento-nota{
  margin-top:12px;font-size:.8125rem;line-height:1.6;
  color:var(--niebla-din);transition:color .4s var(--ease-io);
}
.wellness-descuentos-nota{
  margin-bottom:clamp(40px,5vw,60px);
  font-size:.8125rem;color:var(--niebla-din);
  transition:color .4s var(--ease-io);
}

/* --- Los tratamientos ------------------------------------------------------ */
.wellness-tratamientos-cabeza{margin-bottom:clamp(24px,3vw,34px)}
.wellness-tratamientos-intro{
  margin-top:12px;font-size:.9375rem;line-height:1.7;
  color:var(--niebla-din);max-width:56ch;
  transition:color .4s var(--ease-io);
}
.wellness-tratamientos{
  display:grid;grid-template-columns:1fr;
  gap:clamp(16px,2vw,24px);
}
@media (min-width:760px){.wellness-tratamientos{grid-template-columns:repeat(2,1fr)}}
/* Los descuentos van DESPUÉS de los servicios: primero se ve la oferta
   estética, luego el incentivo. */
.wellness-tratamientos + .wellness-descuentos{margin-top:clamp(34px,4vw,52px)}

.wellness-tratamiento{
  display:flex;flex-direction:column;
  padding:clamp(20px,2.4vw,28px);
  border-radius:var(--radio-sm);
  border:1px solid var(--linea-din);
  background:rgba(255,255,255,.46);
}
body.noche .wellness-tratamiento{background:rgba(255,255,255,.06)}

/* Placa en vez de foto. Las imágenes que pide el brief son de ESPACIOS y
   AMBIENTES; mientras no lleguen, un degradado de marca con un trazo fino
   aguanta el hueco sin parecer un error. */
.wellness-placa{
  position:relative;overflow:hidden;
  /* CUADRADA, no 16:10. Las fotos son verticales (768×1376) y un marco
     apaisado les comería casi dos tercios: en cuadrada se recorta el 44%, que
     en estos encuadres deja la cara —o la piscina— dentro. */
  aspect-ratio:1/1;border-radius:var(--radio-sm);
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--menta),var(--azul-palido) 62%,var(--crema));
  margin-bottom:20px;
}
.wellness-placa svg{width:42%;max-width:82px;color:var(--azul);opacity:.75}
.wellness-placa img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
/* El bisel va POR ENCIMA de la foto, así que flojo: sobre imagen, un hilo
   fuerte ensucia. */
.wellness-placa::after{
  content:"";position:absolute;inset:8px;z-index:1;pointer-events:none;
  border:1px solid rgba(255,255,255,.4);border-radius:var(--radio-xs);
}

.wellness-precio-usa{
  display:inline-block;align-self:flex-start;
  margin-top:14px;padding:7px 12px;border-radius:100px;
  background:rgba(247,154,145,.16);
  font-size:.75rem;font-weight:600;color:var(--coral-texto);
}

.wellness-tratamiento-nombre{font-size:1.25rem;margin-bottom:8px}
.wellness-tratamiento-texto{
  font-size:.9375rem;line-height:1.65;color:var(--niebla-din);
  margin-bottom:18px;transition:color .4s var(--ease-io);
}
.wellness-tratamiento-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:auto;margin-bottom:20px;
  font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--niebla-din);transition:color .4s var(--ease-io);
}
.wellness-sin-recuperacion{
  padding:5px 12px;border-radius:100px;
  color:var(--turquesa-texto);
  background:rgba(0,191,168,.14);                            /* --turquesa al 14% */
  background:color-mix(in srgb, var(--turquesa) 14%, transparent);
}

/* --- El aviso obligatorio -------------------------------------------------- */
.wellness-aviso{
  margin-top:clamp(26px,3.2vw,38px);padding-top:22px;
  border-top:1px solid var(--linea-din);
  font-size:.75rem;line-height:1.65;
  color:var(--niebla-din);max-width:78ch;
  transition:color .4s var(--ease-io);
}


/* ============================================================================
   21. PÁGINAS LEGALES — privacidad.html y terminos.html
   ============================================================================
   Estas dos páginas rompen a propósito dos reglas del resto del sitio:

   1. Llevan el texto DENTRO del HTML, no en i18n/*.json. Un documento legal
      tiene que poder leerse sin JavaScript —lo consulta un regulador, se
      archiva, se imprime, y si el JS falla no puede quedarse en blanco—. Por
      eso los dos idiomas van en el DOM y el script de la página solo oculta el
      que no toca: sin script se ven los dos, que es el modo a prueba de fallo.

   2. No cargan main.js. No hay motor de color por scroll, ni asistente, ni
      modal: son documentos, no la landing. El fondo se queda en el tono claro
      de --bg.

   Sí comparten styles.css y por tanto los tokens, para que la marca sea la
   misma y no haya dos fuentes de verdad para el color o la tipografía.
   ---------------------------------------------------------------------------- */

.pagina-legal{background:var(--bg);color:var(--fg)}

/* --- Cabecera --------------------------------------------------------------- */
.legal-cabecera{
  padding-block:18px;
  border-bottom:1px solid var(--linea-din);
}
.legal-cabecera-fila{
  display:flex;flex-wrap:wrap;gap:14px 24px;
  align-items:center;justify-content:space-between;
}
.legal-marca{
  display:flex;align-items:center;gap:10px;
  font-family:var(--fuente-titulo);font-size:1.0625rem;font-weight:600;
}
.legal-marca .marca-simbolo{width:28px;height:28px;fill:var(--turquesa)}
.legal-nav{
  display:flex;align-items:center;gap:clamp(14px,3vw,28px);
  font-size:.8125rem;font-weight:500;
}
.legal-nav a{
  color:var(--niebla-din);
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease-io),border-color .3s var(--ease-io);
}
.legal-nav a:hover{color:var(--acento-din)}
.legal-nav a[aria-current="page"]{
  color:var(--fg);border-bottom-color:var(--turquesa);
}
/* El conmutador de idioma va separado del resto: no es un destino, es un
   cambio de idioma, y mezclarlo con los enlaces de documento confunde. */
.legal-idioma{
  display:flex;gap:2px;
  padding-left:clamp(14px,3vw,28px);
  border-left:1px solid var(--linea-din);
}
.legal-idioma a{
  padding:3px 8px;border-radius:var(--radio-xs);
  font-weight:600;letter-spacing:.04em;
}
.legal-idioma a:hover{background:rgba(0,191,168,.1)}

/* --- El cuerpo del documento ------------------------------------------------ */
.legal-cuerpo{padding-block:clamp(34px,6vh,64px) clamp(46px,8vh,84px)}
.legal{max-width:74ch}                       /* ~74 caracteres: lectura cómoda */

/* En el resto del sitio `p` y `ul` están reseteados a cero. Aquí hay que
   devolverles el ritmo, porque esto es texto corrido y no una landing. */
.legal p{margin:0 0 1.05em}
.legal h2{
  margin:2.2em 0 .7em;
  font-size:clamp(1.25rem,2.6vw,1.5rem);font-weight:600;
  line-height:1.25;
}
.legal h3{
  margin:1.7em 0 .55em;
  font-size:1.0625rem;font-weight:600;
}
.legal ul{
  margin:0 0 1.15em;padding-left:1.35em;
  list-style:disc;
}
.legal li{margin-bottom:.5em}
.legal li::marker{color:var(--turquesa)}
.legal a{color:var(--acento-din);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{text-decoration-thickness:2px}
.legal code{
  padding:1px 5px;border-radius:var(--radio-xs);
  background:rgba(0,191,168,.1);
  font-size:.875em;
  overflow-wrap:anywhere;
}
.legal h1{
  margin:0 0 .35em;
  font-size:clamp(1.9rem,5vw,2.6rem);font-weight:600;line-height:1.1;
}

/* La ceja y la fecha: enmarcan el documento como documento, igual que la ceja
   del hero enmarca la portada. */
.legal-eyebrow{
  margin:0 0 10px;
  font-size:.6875rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acento-din);
}
.legal-fecha{
  margin:0 0 1.6em;
  font-size:.8125rem;color:var(--niebla-din);
}

/* La entradilla: el párrafo que dice de qué va esto antes de la primera
   sección. Un escalón de tamaño, como el deck del hero. */
.legal-entradilla{
  margin:0 0 2em;padding-bottom:1.6em;
  border-bottom:1px solid var(--linea-din);
  font-size:1.0625rem;line-height:1.65;
}

/* El bloque de datos de salud (sección 3 de privacidad) y el de "no es consejo
   médico" (sección 3 de términos): lo que más consecuencias tiene, marcado para
   que se vea aunque alguien solo pase la vista. */
.legal-destacado{
  margin:0 0 1.2em;padding:14px 18px;
  border-left:3px solid var(--turquesa);
  border-radius:0 var(--radio-sm) var(--radio-sm) 0;
  background:rgba(0,191,168,.08);
  font-weight:500;
}

/* Las notas al margen de una sección: un escalón más pequeña y apagada. */
.legal-nota{
  font-size:.875rem;line-height:1.65;
  color:var(--niebla-din);
}

.legal-tabla{
  width:100%;margin:0 0 1.3em;
  border-collapse:collapse;
  font-size:.875rem;
}
.legal-tabla th,.legal-tabla td{
  padding:10px 12px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--linea-din);
}
.legal-tabla th{
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--niebla-din);
}
.legal-tabla tr:last-child td{border-bottom:0}

/* --- Huecos por rellenar ----------------------------------------------------
   Los datos que Enjoy tiene que aportar antes de publicar (NIT, dirección,
   correo). Se marcan a la vista a propósito: si alguien sube el sitio sin
   rellenarlos, tiene que darse cuenta. Mismo espíritu que la clase .pendiente
   del resto del sitio, pero en amarillo para que canse más a la vista. */
.falta{
  padding:1px 6px;border-radius:var(--radio-xs);
  background:rgba(214,158,26,.2);
  box-shadow:inset 0 0 0 1px rgba(214,158,26,.5);
  color:inherit;font-size:.9375em;font-weight:500;
}

/* --- Pie -------------------------------------------------------------------- */
.legal-pie{
  padding-block:26px;
  border-top:1px solid var(--linea-din);
  font-size:.8125rem;color:var(--niebla-din);
}
.legal-pie .inner{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  align-items:center;justify-content:space-between;
}
.legal-pie a{color:var(--acento-din);text-decoration:underline;text-underline-offset:2px}

.legal-pie-doc{
  margin-top:2.4em;padding-top:1.4em;
  border-top:1px solid var(--linea-din);
  font-size:.9375rem;
}

/* ============================================================================
   21. PUERTAS DE ENTRADA
   ============================================================================
   Cuatro caminos en carrusel, no cuatro botones iguales en el hero. La
   tarjeta entera es el enlace: en móvil, un botón pequeño dentro de una
   tarjeta grande es un blanco difícil. */
.puertas-cabeza{
  display:grid;gap:clamp(24px,3vw,40px);
  align-items:end;
  margin-bottom:clamp(26px,3.4vw,40px);
}
@media (min-width:820px){.puertas-cabeza{grid-template-columns:1fr auto}}
.puertas-intro{
  margin-top:12px;font-size:.9375rem;line-height:1.7;
  color:var(--niebla-din);max-width:58ch;
  transition:color .4s var(--ease-io);
}
/* Pista de desplazamiento nativo, igual que la del proceso: el gesto, la
   inercia y el teclado los pone el navegador; el JS solo sincroniza los
   mandos. Las tarjetas siguen el lenguaje visual del panel del proceso para
   que las dos piezas se lean como el mismo componente. */
.puertas-pista{
  display:flex;gap:clamp(14px,1.8vw,20px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  /* Mismo ancho que la retícula del contenido: así el carrusel no se estira
     hasta los bordes en pantallas grandes y siempre le queda recorrido. */
  max-width:calc(var(--ancho) + 2 * var(--pad));
  margin-inline:auto;
  padding-inline:var(--pad);
  scroll-padding-inline:var(--pad);
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.puertas-pista::-webkit-scrollbar{display:none}

.puerta{
  flex:0 0 clamp(272px,76vw,440px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,30px);
  border-radius:var(--radio);
  border:1px solid var(--linea-din);
  background:rgba(255,255,255,.46);
  color:inherit;text-decoration:none;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),
             border-color .35s var(--ease),background .35s var(--ease);
}
body.noche .puerta{background:rgba(255,255,255,.06)}
.puerta:hover,.puerta:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--sombra-2);
  border-color:var(--turquesa-texto);
  outline:none;
}
.puerta-etiqueta{
  font-size:.6875rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--turquesa-texto);
  margin-bottom:14px;
}
.puerta-titulo{
  font-size:clamp(1.2rem,1.8vw,1.4rem);line-height:1.25;
  margin-bottom:10px;
}
.puerta-texto{
  font-size:.9375rem;line-height:1.65;
  color:var(--niebla-din);margin-bottom:20px;
  transition:color .4s var(--ease-io);
}
.puerta-cta{
  margin-top:auto;font-size:.875rem;font-weight:600;
  color:var(--turquesa-texto);
}
.puerta-cta::after{content:" →"}

/* Dos botones del bloque de acompañante: viajar con alguien o regalar. */
.acompanante-acciones{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}

/* Precio local de referencia en las tarjetas de bienestar. */
.wellness-precio-local{
  display:inline-block;align-self:flex-start;
  margin-top:8px;padding:7px 12px;border-radius:100px;
  background:rgba(0,191,168,.14);                            /* --turquesa al 14% */
  background:color-mix(in srgb, var(--turquesa) 14%, transparent);
  font-size:.75rem;font-weight:600;color:var(--turquesa-texto);
}

/* Asistente Nova desactivado a petición: la conversión va directa a WhatsApp.
   Se ocultan el panel y la burbuja aunque quede su marcado en index.html. */
#asistente,
#asistente-burbuja{display:none!important}