/* ═══════════════════════════════════════════════════════════════
   ORI MEMORIES — HOJA DE ESTILOS PRINCIPAL
   Paleta oficial: Azul Marino #0B192C · Turquesa #00A8B5
                   Celeste #38BDF8 · Blanco · Gris neutro
   ═══════════════════════════════════════════════════════════════ */

/* ---------- 1. TOKENS ---------- */
:root{
  --navy:#0B192C;
  --navy-2:#0A192F;
  --navy-3:#12263F;
  --turq:#00A8B5;
  --turq-2:#00BDD6;
  --sky:#38BDF8;
  --gold:#C9A227;
  --wa:#25D366;
  --bg:#FAFCFF;
  --white:#FFFFFF;
  --ink:#0F172A;
  --muted:#5A6B80;
  --line:#E4EAF2;
  --line-2:#CBD5E1;
  --shadow-s:0 2px 10px rgba(11,25,44,.06);
  --shadow-m:0 10px 30px rgba(11,25,44,.10);
  --shadow-l:0 24px 60px rgba(11,25,44,.16);
  --r-s:10px;
  --r-m:16px;
  --r-l:24px;
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-text:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:1200px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
/* SCROLL HORIZONTAL BLOQUEADO.
   Va en html Y en body: con la regla solo en body, el navegador
   propaga ese overflow al viewport y el body deja de recortar a sus
   propios hijos, así que no servía de nada.
   Se usa 'clip' y no 'hidden' a propósito: 'hidden' convertiría al
   documento en un contenedor de scroll y rompería position:sticky y
   el desplazamiento suave de los enlaces del menú. 'clip' recorta sin
   crear ese contenedor. El @supports cubre navegadores viejos
   (Safari < 16), donde sí toca conformarse con 'hidden'.
   Qué se está recortando: las animaciones de entrada
   [data-animar="der"] empujan el bloque 42px a la derecha antes de
   aparecer; eso es lo que asomaba por el borde en pantallas
   estrechas.                                                       */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-text);font-size:16px;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
@supports not (overflow:clip){
  html,body{overflow-x:hidden}
}
img{max-width:100%;display:block}
/* El navegador da a <figure> un margen de 1em 40px. En los .marco absolutos
   (portada) ese margen encoge la caja y deja franjas blancas en los bordes. */
figure{margin:0}
a{color:var(--turq);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px}
.contenedor{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200}
.saltar:focus{left:12px;top:12px}

/* ---------- 3. TIPOGRAFÍA ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.12;margin:0 0 .5em;color:var(--navy);letter-spacing:-.015em}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
h4{font-size:1.05rem;font-family:var(--f-text);font-weight:700}
p{margin:0 0 1.1em}
.rotulo{
  font-family:var(--f-text);font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--turq);margin:0 0 14px;display:flex;align-items:center;gap:10px;
}
.rotulo::before{content:"";width:34px;height:2px;background:var(--turq);flex:none}
.entrada{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--muted);max-width:62ch}
.seccion{padding:clamp(64px,9vw,124px) 0;position:relative}
.seccion--oscura{background:var(--navy);color:#D8E3F0}
.seccion--oscura h2,.seccion--oscura h3,.seccion--oscura h4{color:#fff}
.seccion--oscura .entrada{color:#A9BDD4}
.cabecera-seccion{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}

/* Variante a dos columnas: el texto a la izquierda y una foto a la derecha.
   Se quita el max-width porque ahora la cabecera ocupa todo el contenedor;
   quien limita la línea de lectura es .entrada. */
.cabecera-seccion--dividida{
  max-width:none;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,64px);align-items:center;
}
.cabecera-seccion--dividida .entrada{max-width:54ch;margin-bottom:0}
.cabecera-seccion__foto{aspect-ratio:4/3;box-shadow:var(--shadow-m)}
.cabecera-seccion__foto:hover img{transform:scale(1.05)}

/* ---------- 4. BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 28px;border-radius:100px;border:1.5px solid transparent;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s;
  text-decoration:none;white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--primario{background:var(--turq);color:#fff;box-shadow:0 8px 22px rgba(0,168,181,.32)}
.btn--primario:hover{background:var(--turq-2);box-shadow:0 14px 30px rgba(0,168,181,.42)}
.btn--marino{background:var(--navy);color:#fff}
.btn--marino:hover{background:var(--navy-3)}
.btn--linea{background:transparent;color:var(--navy);border-color:var(--line-2)}
.btn--linea:hover{border-color:var(--navy);background:rgba(11,25,44,.04)}
.btn--linea-claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn--linea-claro:hover{background:rgba(255,255,255,.12)}
.btn--wa{background:var(--wa);color:#fff;box-shadow:0 8px 22px rgba(37,211,102,.3)}
.btn--wa:hover{background:#1EBE5A}
.btn--bloque{width:100%}
.btn--sm{min-height:44px;padding:0 20px;font-size:.87rem}

/* ---------- 5. HUECOS DE IMAGEN ---------- */
.marco{position:relative;overflow:hidden;background:#E7EDF5;border-radius:var(--r-m)}
.marco img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.hueco{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:14px;
  background:
    repeating-linear-gradient(45deg,#EDF2F8 0 12px,#E4EAF2 12px 24px);
  color:#7A8CA3;font-size:.72rem;font-family:ui-monospace,Menlo,Consolas,monospace;
}
.hueco strong{display:block;font-size:.86rem;color:var(--navy);letter-spacing:.04em}
.hueco span{opacity:.85;max-width:26ch;line-height:1.35}

/* ---------- 5b. ZOOM LENTO (KEN BURNS) ----------
   TODAS las fotos del sitio se acercan y se alejan sin parar:
   scale(1) → scale(1.08) en 10s y de vuelta. Ese viaje de ida y
   vuelta lo hace 'alternate'; sin él la foto pegaría un salto seco
   al reiniciar el ciclo.

   Es el comportamiento POR DEFECTO de cualquier .marco con foto, así
   que una imagen nueva ya nace con el efecto: no hay que acordarse
   de ponerle nada.

   La animación va en el <img>, NO en el .marco: el marco es quien
   recorta (overflow:hidden) y la imagen respira dentro sin desbordar.
   Solo se anima transform, así que lo resuelve la GPU y no provoca
   repintados. El bloque 21 (prefers-reduced-motion) la cancela entera.

   Ojo: mientras la animación corre gana sobre los transform de
   :hover del mismo <img>, así que los zooms al pasar el mouse de las
   tarjetas quedan en pausa (vuelven solos para quien pide menos
   movimiento en su sistema).                                      */
@keyframes zoomLento{from{transform:scale(1)}to{transform:scale(1.08)}}
.marco img{animation:zoomLento 10s ease-in-out infinite alternate}
/* Única excepción: los logos se muestran enteros y quietos. */
[data-slot^="logo-"] img{animation:none}
/* Las tarjetas de una misma fila arrancan desfasadas en tercios para
   que no respiren al unísono (retraso negativo = ciclo ya empezado).
   Si cambias los 10s, cambia también estos dos valores.           */
.rejilla > :nth-of-type(3n+2) .marco img,
.carrusel__slide:nth-of-type(3n+2) .marco img{animation-delay:-3.3s}
.rejilla > :nth-of-type(3n+3) .marco img,
.carrusel__slide:nth-of-type(3n+3) .marco img{animation-delay:-6.6s}

/* ---------- 6. ENCABEZADO ---------- */
.encabezado{
  position:fixed;top:0;left:0;right:0;z-index:90;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
  padding:16px 0;background:linear-gradient(180deg,rgba(11,25,44,.62),rgba(11,25,44,0));
}
.encabezado.compacto{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-s);padding:9px 0}
/* La barra del encabezado usa un contenedor más ancho que el resto del sitio
   para que el logo, los 7 enlaces y las acciones quepan en una sola línea. */
.encabezado .contenedor{max-width:1400px}
.barra{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);flex-wrap:nowrap}
.marca{display:flex;align-items:center;gap:12px;flex:none;text-decoration:none}
.marca .marco{width:220px;height:66px;border-radius:6px;background:transparent}
.marca .marco img{object-fit:contain}
/* El logo blanco va sobre la foto de portada; el de color, cuando la barra
   se vuelve blanca al bajar. Se superponen para que no haya salto de layout. */
.encabezado .marca{position:relative}
.encabezado .marca__color{position:absolute;inset:0;opacity:0;pointer-events:none}
.encabezado .marca__blanco,.encabezado .marca__color{transition:opacity .4s var(--ease)}
.encabezado.compacto .marca__blanco{opacity:0}
.encabezado.compacto .marca__color{opacity:1}
.marca .hueco{background:rgba(255,255,255,.14);color:#fff;font-size:.6rem}
.encabezado.compacto .marca .hueco{background:#EDF2F8;color:#7A8CA3}
.menu{display:flex;gap:clamp(16px,1.8vw,28px);margin-left:auto;align-items:center;flex-wrap:nowrap}
.menu a{
  color:rgba(255,255,255,.9);font-size:.92rem;font-weight:600;position:relative;padding:6px 0;
  white-space:nowrap;flex:none;
}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--turq);transition:width .35s var(--ease)}
/* El CTA vive dentro del <nav> pero sólo se muestra en el panel móvil. */
.menu__cta{display:none}
.menu a:hover{text-decoration:none}
.menu a:hover::after,.menu a.activo::after{width:100%}
.encabezado.compacto .menu a{color:var(--navy)}
.acciones{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:nowrap}
.hamburguesa{
  display:none;width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;align-items:center;justify-content:center;
}
.encabezado.compacto .hamburguesa{border-color:var(--line);background:#fff;color:var(--navy)}
.hamburguesa span{display:block;width:19px;height:2px;background:currentColor;position:relative}
.hamburguesa span::before,.hamburguesa span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
.hamburguesa span::before{top:-6px}
.hamburguesa span::after{top:6px}
.hamburguesa[aria-expanded="true"] span{background:transparent}
.hamburguesa[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.hamburguesa[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- 7. PORTADA ---------- */
/* El padding inferior reserva la banda del indicador "Desliza" (~72px
   de alto + aire). Con el valor anterior (mín. 48px) la fila de cifras
   quedaba pegada al indicador en pantallas de poca altura. */
.portada{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0 0 clamp(112px,13vh,140px);overflow:hidden}
.portada__fondo{position:absolute;inset:0;z-index:0}
/* A sangre completa: sin margen, sin radio y ocupando todo el alto y ancho. */
.portada__fondo .marco{position:absolute;inset:0;margin:0;width:100%;height:100%;border-radius:0}
.portada__fondo::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(11,25,44,.58) 0%,rgba(11,25,44,.24) 38%,rgba(11,25,44,.86) 100%);
}
.portada__contenido{position:relative;z-index:3;color:#fff;max-width:820px}
.portada h1{color:#fff;text-wrap:balance}
.portada .entrada{color:rgba(255,255,255,.9);font-size:clamp(1.02rem,1.7vw,1.28rem);max-width:56ch}
.portada .rotulo{color:var(--sky)}
.portada .rotulo::before{background:var(--sky)}
.portada__botones{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.portada__datos{display:flex;gap:34px;flex-wrap:wrap;margin-top:46px;padding-top:26px;border-top:1px solid rgba(255,255,255,.22)}
.portada__datos div{color:#fff}
.portada__datos b{display:block;font-family:var(--f-display);font-size:1.6rem;line-height:1.1}
.portada__datos small{color:rgba(255,255,255,.72);font-size:.8rem;letter-spacing:.04em}
.bajar{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;color:rgba(255,255,255,.7);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.bajar i{display:block;width:1px;height:34px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.8));animation:bajar 2.4s infinite}
@keyframes bajar{0%{opacity:0;transform:scaleY(.2)}45%{opacity:1}100%{opacity:0;transform:scaleY(1)}}
/* En pantallas bajas (móvil en horizontal) no hay altura que repartir:
   antes de apretujarlo contra las cifras, el indicador se retira. */
@media (max-height:640px){.bajar{display:none}}

/* ---------- 8. TARJETAS DE CONFIANZA ---------- */
.rejilla{display:grid;gap:22px}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.rejilla--4{grid-template-columns:repeat(4,1fr)}
.tarjeta{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:28px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.tarjeta:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);border-color:transparent}
.tarjeta__icono{
  width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#E6F7F9,#D6F0F4);color:var(--turq);margin-bottom:16px;
}
.tarjeta p{margin:0;color:var(--muted);font-size:.94rem}

/* ---------- 9. GALERÍA (70% visual) ---------- */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.galeria .marco{aspect-ratio:4/3}
.galeria .marco:nth-child(1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.galeria .marco:nth-child(6){grid-column:span 2;aspect-ratio:8/3}
.galeria .marco:hover img{transform:scale(1.06)}
.galeria__pie{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 16px 12px;color:#fff;
  font-size:.82rem;font-weight:600;letter-spacing:.03em;
  background:linear-gradient(180deg,transparent,rgba(11,25,44,.78));
}

/* ---------- 10. EXPERIENCIAS ---------- */
.exp{background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.exp:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.exp:hover .marco img{transform:scale(1.07)}
.exp .marco{aspect-ratio:16/9;border-radius:0}
.exp__cuerpo{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.exp__cuerpo h3{font-size:1.08rem;font-family:var(--f-text);font-weight:700;margin-bottom:8px}
.exp__cuerpo p{color:var(--muted);font-size:.9rem;margin-bottom:14px;flex:1}
.etiqueta{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:#E6F7F9;color:#046C77;border-radius:100px;padding:5px 12px;align-self:flex-start;
}
.etiqueta--oro{background:#FBF3DC;color:#8A6D0B}

/* ---------- 11. LÍNEA DEL TIEMPO ---------- */
.tiempo{position:relative;margin-top:56px;padding-left:8px}
.tiempo::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--turq),rgba(0,168,181,.12))}
.tiempo__item{position:relative;padding:0 0 30px 34px}
.tiempo__item::before{
  content:"";position:absolute;left:2px;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--navy);border:3px solid var(--turq);box-shadow:0 0 0 5px rgba(0,168,181,.14);
}
.tiempo__hora{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;letter-spacing:.08em;color:var(--turq);font-weight:700}
.tiempo__item h4{margin:2px 0 4px;color:inherit}
.tiempo__item p{margin:0;font-size:.9rem;color:#9DB1C7}

/* ---------- 12. PAQUETES ---------- */
.paquete{
  position:relative;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.paquete:hover{transform:translateY(-8px);box-shadow:var(--shadow-l)}
.paquete--estrella{border-color:var(--gold);box-shadow:0 18px 44px rgba(201,162,39,.16)}
.paquete__cinta{
  position:absolute;top:16px;right:16px;z-index:4;background:var(--gold);color:#2B2000;
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:100px;
}
.paquete .marco{aspect-ratio:3/2;border-radius:0}
.paquete__cuerpo{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.paquete__nombre{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--turq);margin:0 0 6px}
.paquete h3{font-size:1.42rem;margin-bottom:12px}
.paquete__precio{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.paquete__precio b{font-family:var(--f-display);font-size:2.5rem;line-height:1;color:var(--navy)}
.paquete__precio span{font-size:.82rem;color:var(--muted);font-weight:600}
.paquete--estrella .paquete__precio b{color:var(--gold)}
.paquete__nota{font-size:.85rem;color:var(--muted);margin:0 0 18px}
.lista{list-style:none;margin:0 0 22px;padding:0;flex:1}
.lista li{position:relative;padding:0 0 10px 28px;font-size:.92rem;color:#31404F}
.lista li::before{
  content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;
  background:#E6F7F9 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A8B5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.lista li b{color:var(--navy)}
.lista--oro li::before{background-color:#FBF3DC;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.modalidad{border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;margin-bottom:12px;background:#F8FBFD}
.modalidad--destacada{border-color:var(--turq);background:#F2FBFC}
.modalidad h4{margin:0 0 4px;font-size:.95rem}
.modalidad p{margin:0;font-size:.84rem;color:var(--muted)}
.modalidad b{color:var(--turq);font-size:1.1rem;font-family:var(--f-display)}
.aviso-upgrade{
  margin-top:34px;border:1px dashed var(--line-2);border-radius:var(--r-m);padding:22px 24px;
  background:var(--white);display:flex;gap:18px;align-items:flex-start;
}
.aviso-upgrade .tarjeta__icono{margin:0;flex:none;width:46px;height:46px;border-radius:14px;font-size:1.2rem}
.aviso-upgrade h4{margin:0 0 4px}
.aviso-upgrade p{margin:0;font-size:.9rem;color:var(--muted)}

/* ---------- 13. TESTIMONIOS ---------- */
.carrusel{position:relative;overflow:hidden;margin:0 -8px}
.carrusel__pista{display:flex;transition:transform .7s var(--ease);will-change:transform}
.carrusel__slide{flex:0 0 33.3333%;padding:0 8px;box-sizing:border-box}
.opinion{background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:28px;height:100%;display:flex;flex-direction:column}
.opinion__estrellas{display:flex;gap:3px;color:#E9A621;margin-bottom:12px}
.opinion__estrellas .ico{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:1.2}
.opinion p{font-size:.96rem;color:#31404F;flex:1;font-style:italic}
.opinion__pie{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.opinion__pie .marco{width:52px;height:52px;border-radius:50%;flex:none}
.opinion__pie .hueco{font-size:.52rem}
.opinion__pie b{display:block;font-size:.95rem;color:var(--navy)}
.opinion__pie small{color:var(--muted);font-size:.82rem}
.carrusel__control{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:30px}
.carrusel__flecha{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--navy);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s,border-color .3s;
}
.carrusel__flecha:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.carrusel__puntos{display:flex;gap:7px;margin:0 12px}
.carrusel__puntos button{width:8px;height:8px;padding:0;border-radius:100px;border:none;background:var(--line-2);cursor:pointer;transition:width .4s var(--ease),background .3s}
.carrusel__puntos button[aria-current="true"]{width:26px;background:var(--turq)}
.metricas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;text-align:center}
.metricas div{background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:26px 16px}
.metricas b{display:block;font-family:var(--f-display);font-size:2.4rem;color:var(--turq);line-height:1}
.metricas small{color:var(--muted);font-size:.84rem;letter-spacing:.04em}

/* ---------- 14. FAQ ---------- */
.faq__categoria{margin-bottom:36px}
.faq__categoria > h3{display:flex;align-items:center;gap:10px;font-family:var(--f-text);font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--turq);margin-bottom:14px}
.acordeon{border:1px solid var(--line);border-radius:var(--r-s);background:var(--white);margin-bottom:10px;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.acordeon[open]{border-color:var(--turq);box-shadow:var(--shadow-s)}
.acordeon summary{
  list-style:none;cursor:pointer;padding:18px 54px 18px 20px;position:relative;
  font-weight:700;font-size:.98rem;color:var(--navy);min-height:44px;display:flex;align-items:center;
}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{
  content:"";position:absolute;right:20px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A8B5' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease);
}
.acordeon[open] summary::after{transform:rotate(135deg)}
.acordeon__cuerpo{padding:0 20px 20px;color:var(--muted);font-size:.94rem}
.acordeon__cuerpo p:last-child{margin-bottom:0}

/* ---------- 14b. CIERRE (BANDA PANORÁMICA) ----------
   La foto va a sangre completa por detrás de todo el bloque y el
   degradado marino de ::after es lo que sostiene el contraste del
   texto blanco. Si algún día se sube una foto más clara, se SUBE la
   opacidad del degradado; no se quita.                            */
.cierre{overflow:hidden;min-height:clamp(400px,52vh,560px);display:flex;align-items:center}
.cierre__fondo{position:absolute;inset:0;z-index:0}
/* Sin margen, sin radio y ocupando todo el alto y ancho. El fondo
   marino del marco cubre el hueco si la foto todavía no existe. */
.cierre__fondo .marco{position:absolute;inset:0;margin:0;width:100%;height:100%;border-radius:0;background:var(--navy)}
.cierre__fondo .marco img{object-position:center 58%}
.cierre__fondo::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(11,25,44,.88) 0%,rgba(11,25,44,.62) 45%,rgba(11,25,44,.9) 100%);
}
.cierre__contenido{position:relative;z-index:3;text-align:center;max-width:760px}

/* ---------- 15. CONTACTO ---------- */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.canal{
  display:flex;gap:16px;align-items:center;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-m);padding:18px 20px;margin-bottom:12px;transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.canal:hover{transform:translateX(4px);box-shadow:var(--shadow-s);text-decoration:none}
.canal__icono{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:none;background:#E6F7F9;color:var(--turq)}
.canal b{display:block;color:var(--navy);font-size:.96rem}
.canal small{color:var(--muted);font-size:.84rem}
.campo{margin-bottom:14px}
.campo label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:50px;border:1px solid var(--line-2);border-radius:var(--r-s);padding:13px 15px;
  font-family:inherit;font-size:.98rem;color:var(--ink);background:#fff;transition:border-color .25s,box-shadow .25s;
}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--turq);box-shadow:0 0 0 4px rgba(0,168,181,.14)}
.campo--error input,.campo--error select,.campo--error textarea{border-color:#DC2626;box-shadow:0 0 0 4px rgba(220,38,38,.1)}
.mensaje-error{display:none;color:#B91C1C;font-size:.82rem;margin-top:6px;font-weight:600}
.campo--error .mensaje-error,.mensaje-error.visible{display:block}


/* ---------- 15b. CALENDARIO ----------
   Selector de fecha propio: idéntico en todos los navegadores,
   con fines de semana marcados y atajos rápidos.               */
.etiqueta-campo{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.calendario{position:relative}

.calendario__disparador{
  display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 16px;
  border:1px solid var(--line-2);border-radius:var(--r-s);background:#fff;cursor:pointer;
  font-family:inherit;font-size:.98rem;color:var(--ink);text-align:left;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.calendario__disparador:hover{border-color:var(--turq)}
.calendario.abierto .calendario__disparador{border-color:var(--turq);box-shadow:0 0 0 4px rgba(0,168,181,.14)}
.calendario__disparador > .ico:first-child{color:var(--turq)}
.calendario__valor{flex:1;font-weight:600}
.calendario__valor.es-marcador{color:#94A3B8;font-weight:400}
.calendario__flecha{color:var(--muted);transition:transform .35s var(--ease)}
.calendario.abierto .calendario__flecha{transform:rotate(180deg)}

.calendario__panel{
  position:absolute;z-index:20;top:calc(100% + 8px);left:0;width:min(340px,100%);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-l);padding:16px;
  animation:calAparecer .28s var(--ease);transform-origin:top center;
}
@keyframes calAparecer{from{opacity:0;transform:translateY(-8px) scale(.97)}}

.calendario__barra{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.calendario__mes{
  font-family:var(--f-display);font-size:1.06rem;color:var(--navy);
  text-transform:capitalize;letter-spacing:-.01em;
}
.calendario__nav{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--navy);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;
}
.calendario__nav:hover:not(:disabled){background:var(--navy);color:#fff;border-color:var(--navy)}
.calendario__nav:disabled{opacity:.3;cursor:not-allowed}

.calendario__semana{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px;
  font-size:.68rem;font-weight:800;letter-spacing:.08em;color:var(--muted);text-align:center;
}
.calendario__semana span{padding:4px 0}
.calendario__semana span:nth-child(6),
.calendario__semana span:nth-child(7){color:var(--turq)}

.calendario__dias{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-vacio{aspect-ratio:1}

.cal-dia{
  aspect-ratio:1;min-height:40px;border:none;border-radius:10px;background:transparent;
  font-family:inherit;font-size:.92rem;font-weight:600;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:background .2s,color .2s,transform .2s var(--ease);
}
.cal-dia:hover{background:#E6F7F9;color:#046C77;transform:scale(1.06)}
.cal-dia--finde{color:var(--turq)}
.cal-dia--hoy::after{
  content:"";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--turq);
}
.cal-dia--bloqueada{color:#C2CCD9;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}
.cal-dia--bloqueada:hover{background:transparent;transform:none}
.cal-dia--elegida,
.cal-dia--elegida:hover{
  background:var(--turq);color:#fff;transform:none;
  box-shadow:0 6px 16px rgba(0,168,181,.36);
}
.cal-dia--elegida.cal-dia--hoy::after{background:#fff}
.cal-dia:focus-visible{outline:3px solid var(--sky);outline-offset:1px}

.calendario__rapido{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.calendario__rapido button{
  border:1px solid var(--line);background:#F8FBFD;border-radius:100px;padding:8px 13px;
  font-family:inherit;font-size:.78rem;font-weight:600;color:var(--navy);cursor:pointer;
  min-height:36px;transition:all .22s;
}
.calendario__rapido button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.calendario__nota{margin:12px 0 0;font-size:.76rem;color:var(--muted);line-height:1.45}

/* En teléfono el panel ocupa todo el ancho disponible */
@media (max-width:520px){
  .calendario__panel{width:100%;left:0;right:0;padding:14px}
  .cal-dia{min-height:38px;font-size:.86rem}
  .calendario__rapido button{flex:1;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .calendario__panel{animation:none}
  .cal-dia:hover{transform:none}
}

/* ---------- 16. PIE DE PÁGINA ---------- */
.pie{background:var(--navy);color:#9DB1C7;padding:72px 0 0;font-size:.92rem}
.pie a{color:#C4D4E6}
.pie a:hover{color:var(--sky)}
.pie__rejilla{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px}
.pie h4{color:#fff;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;font-weight:800}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:10px}
.pie .marca .hueco{background:rgba(255,255,255,.1);color:#fff}
.pie__legal{
  border-top:1px solid rgba(255,255,255,.12);padding:22px 0 30px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:.84rem;color:#7C90A8;
}
.enlace-legal{
  background:none;border:none;padding:0;color:#C4D4E6;font-size:inherit;font-family:inherit;
  cursor:pointer;text-align:left;text-decoration:none;
}
.enlace-legal:hover{color:var(--sky);text-decoration:underline}


/* ---------- 16b. ICONOGRAFÍA ----------
   Todos los iconos son SVG en línea de trazo, heredan el color del
   contenedor y comparten grosor. Para cambiar el tamaño de uno,
   basta con una clase modificadora: no hay fuentes que cargar.       */
.ico{
  width:24px;height:24px;display:block;flex:none;
  color:inherit;pointer-events:none;
  transition:transform .35s var(--ease);
}
.ico--mini{width:14px;height:14px}
.ico--grande{width:32px;height:32px}
.tarjeta__icono .ico{width:26px;height:26px}
.canal__icono .ico{width:21px;height:21px}
.canal:hover .canal__icono .ico{transform:scale(1.08)}
.aviso-upgrade .tarjeta__icono .ico{width:22px;height:22px}
.cerrar .ico{width:18px;height:18px}
.carrusel__flecha .ico{width:20px;height:20px}
.btn .ico{width:19px;height:19px}

/* Marca de modalidad destacada, en vez de un emoji */
.marca-destacada{
  display:inline-flex;align-items:center;gap:5px;vertical-align:middle;margin-left:8px;
  background:#FBF3DC;color:#8A6D0B;border-radius:100px;padding:3px 10px;
  font-family:var(--f-text);font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.marca-destacada .ico{fill:currentColor;stroke:currentColor;stroke-width:1.1}
.opcion-paquete .marca-destacada{margin-left:6px}

/* Indicador de paso completado */
.paso.listo{position:relative}

/* ---------- 17. BARRA MÓVIL FIJA ---------- */
.barra-movil{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;gap:10px;align-items:center;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -8px 26px rgba(11,25,44,.1);
}
.barra-movil__precio{font-size:.7rem;color:var(--muted);line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.barra-movil__precio b{display:block;font-family:var(--f-display);font-size:1.15rem;color:var(--navy);letter-spacing:0;text-transform:none}
.barra-movil .btn{flex:1;min-height:48px;padding:0 14px;font-size:.9rem}
.barra-movil .btn--wa{flex:0 0 52px;padding:0}
.barra-movil .btn--wa .ico{width:22px;height:22px}

/* ---------- 18. MODALES ---------- */
.velo{
  position:fixed;inset:0;z-index:120;background:rgba(6,15,28,.66);backdrop-filter:blur(4px);
  display:none;padding:24px;overflow-y:auto;overscroll-behavior:contain;
}
.velo.abierto{display:block}
.modal{
  background:var(--white);border-radius:var(--r-l);max-width:1020px;margin:20px auto;overflow:hidden;
  box-shadow:var(--shadow-l);animation:aparecerModal .45s var(--ease);
}
.modal--angosto{max-width:660px}
.modal--legal{max-width:820px}
@keyframes aparecerModal{from{opacity:0;transform:translateY(22px) scale(.985)}}
.modal__cabecera{background:var(--navy);color:#fff;padding:22px 28px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;position:sticky;top:0;z-index:6}
.modal__cabecera h3{color:#fff;margin:0;font-size:1.28rem}
.modal__cabecera p{margin:4px 0 0;color:#8FD3DC;font-size:.86rem}
.cerrar{
  width:44px;height:44px;flex:none;border-radius:12px;border:1px solid rgba(255,255,255,.32);
  background:transparent;color:#fff;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .25s;
}
.cerrar:hover{background:rgba(255,255,255,.16)}
.modal__cuerpo{padding:26px 28px}
.modal__pie{padding:18px 28px;background:#F6F9FC;border-top:1px solid var(--line);display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;position:sticky;bottom:0;z-index:6}
.pasos{display:flex;gap:6px;padding:16px 28px;background:#F1F6FA;border-bottom:1px solid var(--line)}
.paso{flex:1;border-top:3px solid var(--line-2);padding-top:9px;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .3s,border-color .3s}
.paso.activo{color:var(--navy);border-color:var(--turq)}
.paso.listo{color:var(--turq);border-color:var(--turq)}

/* selección de paquete dentro del modal */
.opcion-paquete{
  position:relative;display:block;width:100%;text-align:left;background:#fff;border:2px solid var(--line);
  border-radius:var(--r-m);padding:18px;cursor:pointer;transition:border-color .3s,box-shadow .3s,transform .3s var(--ease);
}
.opcion-paquete:hover{transform:translateY(-3px);box-shadow:var(--shadow-s)}
.opcion-paquete[aria-pressed="true"]{border-color:var(--turq);box-shadow:0 0 0 4px rgba(0,168,181,.16)}
.opcion-paquete h4{margin:0 0 2px}
.opcion-paquete .precio{font-family:var(--f-display);font-size:1.6rem;color:var(--turq);line-height:1.1}
.opcion-paquete small{color:var(--muted);font-size:.82rem;display:block}
.opcion-paquete ul{margin:10px 0 0;padding-left:16px;font-size:.82rem;color:var(--muted)}

/* El paquete más vendido lleva cinta dorada también dentro del modal.
   Al seleccionarlo gana el borde turquesa como los demás. */
.opcion-paquete--estrella{border-color:var(--gold)}
.opcion-paquete--estrella h4{padding-right:92px}
.opcion-paquete__cinta{
  position:absolute;top:-2px;right:-2px;background:var(--gold);color:#2B2000;
  font-size:.6rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:0 var(--r-m) 0 12px;
}

/* Selector de desayuno del paso 1: obligatorio en los paquetes que lo
   incluyen, oculto en el Paquete 1. Los precios los escribe js/main.js
   porque cambian según el paquete elegido. */
.selector-desayuno{
  margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:var(--r-m);background:#F4F8FC;
}
.selector-desayuno[hidden]{display:none}
.selector-desayuno__titulo{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 12px;font-weight:800;color:var(--navy);font-size:.98rem;
}
.marca-obligatoria{
  background:#FBF3DC;color:#8A6D0B;border-radius:100px;padding:3px 10px;
  font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.opcion-desayuno{
  display:flex;gap:12px;align-items:flex-start;background:#fff;min-height:44px;
  border:2px solid var(--line);border-radius:var(--r-s);padding:14px 16px;
  cursor:pointer;transition:border-color .25s,box-shadow .25s;
}
.opcion-desayuno[hidden]{display:none}
.opcion-desayuno:hover{border-color:var(--turq)}
.opcion-desayuno input{margin-top:3px;width:18px;height:18px;accent-color:var(--turq);flex:none}
.opcion-desayuno b{display:block;font-size:.94rem;color:var(--navy)}
.opcion-desayuno small{color:var(--muted);font-size:.83rem}
.opcion-desayuno__precio{color:var(--turq);font-weight:800;white-space:nowrap}
/* La clase la pone el JS; :has() es el refuerzo para navegadores que lo soportan. */
.opcion-desayuno--elegida,
.opcion-desayuno:has(input:checked){border-color:var(--turq);box-shadow:0 0 0 4px rgba(0,168,181,.16)}
.extra{
  display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-s);
  padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .25s,background .25s;min-height:44px;
}
.extra[hidden]{display:none}
.extra:hover{border-color:var(--turq);background:#F7FCFD}
.extra input{margin-top:4px;width:18px;height:18px;accent-color:var(--turq);flex:none}
.extra b{display:block;font-size:.94rem;color:var(--navy)}
.extra small{color:var(--muted);font-size:.83rem}
.extra__precio{margin-left:auto;font-weight:800;color:var(--turq);font-size:.92rem;white-space:nowrap;padding-left:10px}
.extra.bloqueado{opacity:.45;pointer-events:none}
.contador{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-s);overflow:hidden;height:50px}
.contador button{width:50px;height:100%;border:none;background:#F1F6FA;color:var(--navy);font-size:1.3rem;cursor:pointer;transition:background .25s}
.contador button:hover{background:#E2ECF4}
.contador span{flex:1;text-align:center;font-weight:800;font-size:1.05rem}
.resumen{border:1px solid var(--line);border-radius:var(--r-m);background:#F8FBFD;padding:20px;position:sticky;top:16px}
.resumen h4{margin:0 0 12px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--turq)}
.resumen__linea{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px dashed var(--line-2);font-size:.9rem}
.resumen__linea span{color:var(--muted)}
.resumen__linea b{color:var(--navy);white-space:nowrap}
.resumen__total{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;margin-top:6px}
.resumen__total span{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.resumen__total b{font-family:var(--f-display);font-size:1.9rem;color:var(--navy)}
.nota{
  font-size:.82rem;color:var(--muted);background:#F1F6FA;border-left:3px solid var(--turq);
  padding:11px 14px;border-radius:0 var(--r-s) var(--r-s) 0;margin:14px 0;
}
.exito{width:70px;height:70px;border-radius:50%;background:#DCFCE7;color:#15803D;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.exito .ico{width:32px;height:32px}
.vista-mensaje{
  white-space:pre-wrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;color:#31404F;
  background:#F6F9FC;border:1px solid var(--line);border-radius:var(--r-s);padding:16px;margin:0;max-height:260px;overflow:auto;
}
.legal h4{margin:26px 0 8px;color:var(--navy)}
.legal h4:first-child{margin-top:0}
.legal p,.legal li{font-size:.92rem;color:#31404F}
.legal ul{padding-left:20px;margin:0 0 14px}
.legal li{margin-bottom:6px}
.legal__fecha{font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:26px}

/* ---------- 19. APARICIÓN AL HACER SCROLL ---------- */
[data-animar]{opacity:0;will-change:transform,opacity}
[data-animar="subir"]{transform:translateY(38px)}
[data-animar="bajar"]{transform:translateY(-28px)}
[data-animar="izq"]{transform:translateX(-42px)}
[data-animar="der"]{transform:translateX(42px)}
[data-animar="zoom"]{transform:scale(.94)}
[data-animar="cortina"]{clip-path:inset(0 0 100% 0);transform:none}
[data-animar].visible{
  opacity:1;transform:none;clip-path:inset(0 0 0 0);
  transition:opacity .9s var(--ease),transform 1s var(--ease),clip-path 1.1s var(--ease);
  transition-delay:var(--retraso,0ms);
}
.progreso{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--turq),var(--sky));width:0;z-index:100;transition:width .12s linear}

/* ---------- 20. RESPONSIVO ---------- */
@media (max-width:1400px){
  /* Se recorta un poco el logo para que los 7 enlaces sigan en una línea. */
  .marca .marco{width:196px;height:59px}
}
@media (max-width:1200px){
  /* Por debajo de este ancho el menú horizontal ya no cabe junto al logo:
     en vez de partirse en dos líneas, pasa al panel de hamburguesa. */
  .hamburguesa{display:flex;order:3}
  .acciones{margin-left:auto}

  /* La barra (logo + idioma + X) queda POR ENCIMA del panel, que ocupa toda
     la pantalla por detrás. Así el logo y la X siguen visibles y sirven de
     cabecera del propio menú. */
  .encabezado .marca,.acciones{position:relative;z-index:2}

  /* OJO: .encabezado.compacto lleva backdrop-filter, y eso lo convierte en el
     bloque contenedor de sus hijos position:fixed. Con inset:0 el panel se
     encogía al tamaño de la barra. Se fija el alto contra el viewport y se
     anula el filtro mientras el menú está abierto (queda tapado igualmente). */
  .encabezado.nav-abierto{backdrop-filter:none;-webkit-backdrop-filter:none}
  .menu{
    position:fixed;top:0;left:0;right:0;bottom:auto;
    height:100vh;height:100dvh;
    z-index:1;margin:0;
    padding:calc(96px + 18px) 28px calc(28px + env(safe-area-inset-bottom));
    background:var(--white);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-100%);
    transition:transform .55s var(--ease);
  }
  .menu.abierto{transform:translateY(0)}

  /* Enlaces grandes con la tipografía de marca. */
  .menu a{
    font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;
    font-size:clamp(1.45rem,5.6vw,1.95rem);line-height:1.25;
    color:var(--navy)!important;padding:15px 0;border-bottom:1px solid var(--line);
    opacity:0;transform:translateY(16px);
  }
  /* Los márgenes automáticos centran el bloque cuando sobra sitio y se
     anulan solos cuando no cabe, en vez de dejar el inicio inalcanzable
     como haría justify-content:center junto a overflow. */
  .menu a:first-child{border-top:1px solid var(--line);margin-top:auto}
  .menu a.activo{color:var(--turq)!important}
  .menu a::after{height:2px;bottom:-1px}

  /* Entrada escalonada de cada elemento al abrir. */
  .menu.abierto a,.menu.abierto .menu__cta{
    opacity:1;transform:none;
    transition:opacity .45s var(--ease),transform .45s var(--ease);
  }
  .menu.abierto a:nth-child(1){transition-delay:.10s}
  .menu.abierto a:nth-child(2){transition-delay:.16s}
  .menu.abierto a:nth-child(3){transition-delay:.22s}
  .menu.abierto a:nth-child(4){transition-delay:.28s}
  .menu.abierto a:nth-child(5){transition-delay:.34s}
  .menu.abierto a:nth-child(6){transition-delay:.40s}
  .menu.abierto a:nth-child(7){transition-delay:.46s}
  .menu.abierto .menu__cta{transition-delay:.54s}

  .menu__cta{display:inline-flex;margin:30px 0 auto;width:100%;min-height:54px;opacity:0;transform:translateY(16px)}

  /* Estado "menú abierto": la barra pasa a versión clara (logo a color y X
     oscura) porque por detrás ya no está la foto, sino el panel blanco. */
  .encabezado.nav-abierto .marca__blanco{opacity:0}
  .encabezado.nav-abierto .marca__color{opacity:1}
  .encabezado.nav-abierto .hamburguesa{border-color:var(--line);background:#fff;color:var(--navy)}
}
/* Bloquea el scroll del fondo mientras el panel está abierto. */
body.sin-scroll{overflow:hidden}
@media (max-width:1080px){
  .rejilla--4{grid-template-columns:repeat(2,1fr)}
  .carrusel__slide{flex-basis:50%}
  .pie__rejilla{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:900px){
  /* El panel del menú se define completo en el bloque de 1200px. */
  .acciones .btn{display:none}
  .barra-movil{display:flex}

  /* PORTADA EN MÓVIL: el contenido deja de ir pegado abajo y queda centrado,
     tanto vertical como horizontalmente. El padding superior compensa la
     barra fija; el inferior deja aire para el indicador "Desliza".
     Se mantiene min-height (no height), así que si el texto no cabe la
     sección crece en vez de recortarse por arriba. */
  .portada{align-items:center;padding:96px 0 124px}
  .portada__contenido{text-align:center;margin-inline:auto}
  .portada .rotulo{justify-content:center}
  .portada .entrada{margin-inline:auto}
  .portada__botones{justify-content:center}
  .portada__datos{justify-content:center;text-align:center}
  body{padding-bottom:76px}
  .contacto{grid-template-columns:1fr}
  /* La cabecera a dos columnas se apila: primero el texto, luego la foto. */
  .cabecera-seccion--dividida{grid-template-columns:1fr;gap:28px}
  .cabecera-seccion--dividida .entrada{max-width:62ch}
  .cabecera-seccion__foto{aspect-ratio:16/9}
  .rejilla--3{grid-template-columns:1fr 1fr}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .galeria .marco:nth-child(1),.galeria .marco:nth-child(6){grid-column:span 2;grid-row:auto;aspect-ratio:16/9}
  .carrusel__slide{flex-basis:100%}
  .modal{margin:0;border-radius:0;min-height:100%;max-width:none}
  .velo{padding:0}
  .modal__cuerpo{padding:20px}
  .modal__cabecera,.modal__pie,.pasos{padding-left:20px;padding-right:20px}
  .modal__pie .btn{flex:1}
  .resumen{position:static}
}
@media (max-width:640px){
  .marca .marco{width:170px;height:51px}
  .rejilla--2,.rejilla--3,.rejilla--4{grid-template-columns:1fr}
  .metricas{grid-template-columns:1fr}

  /* PIE EN TELÉFONO: al quedar en una sola columna, el texto alineado
     a la izquierda deja los bloques descolgados y sin eje común. Se
     centra todo el pie —solo aquí; de 641px en adelante sigue a la
     izquierda porque ahí hay 2 o 4 columnas y centrarlas las rompería. */
  .pie__rejilla{grid-template-columns:1fr;text-align:center}
  .pie .marca{justify-content:center}
  .pie .enlace-legal{text-align:center}
  .pie__legal{justify-content:center;text-align:center;gap:8px}
  .portada__datos{gap:22px}
  .paso{font-size:.62rem;letter-spacing:.04em}
  .seccion{padding:56px 0}
}

/* ---------- 21. ACCESIBILIDAD ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-animar]{opacity:1!important;transform:none!important;clip-path:none!important}
}
@media print{
  .encabezado,.barra-movil,.velo,.bajar{display:none!important}
}