/* ============================================================
   VITAL FIT — Sistema de diseño
   Regla dura del proyecto: el neón es TINTA ESCASA, no luz
   ambiental. Cero glow en tipografía, cero gradiente de relleno.
   El acento aparece en momentos contados; el resto es índigo,
   grano y tipografía.
   ============================================================ */
:root{
  /* Índigos derivados del fondo del logo */
  --ink-900:#08060F;
  --ink-850:#0B0917;
  --ink-800:#120E24;
  --ink-700:#1A1433;
  --ink-600:#241C45;

  /* Tinta clara: hueso, nunca blanco puro.
     Alfas fijadas por contraste medido sobre --ink-850, no a ojo:
     .62 → 6,9:1 · .55 → 5,6:1. Ambos pasan WCAG AA (4,5:1) en texto pequeño;
     con el .34 original las etiquetas mono quedaban en 2,53:1. */
  --bone:#F2F0EA;
  --bone-dim:rgba(242,240,234,.62);
  --bone-mute:rgba(242,240,234,.55);
  --line:rgba(242,240,234,.10);
  --line-soft:rgba(242,240,234,.055);

  /* Acentos del logo — uso racionado */
  --volt:#A8FF35;
  --aqua:#35E8C4;

  --display:"Archivo",'Arial Narrow',sans-serif;
  --body:"Inter Tight",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,.05,.36,1);

  --pad:clamp(1.25rem,4.2vw,4.5rem);
  --maxw:1560px;

  --z-fx:0; --z-content:2; --z-nav:60; --z-menu:195; --z-cursor:90; --z-load:100;
}

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

html{
  background:var(--ink-850);
  scrollbar-width:thin;
  scrollbar-color:rgba(168,255,53,.5) var(--ink-900);
  overflow-x:clip; /* body{overflow-x:hidden} no basta: el scroll sube a html */
}
html.is-loading{overflow:hidden}

body{
  font-family:var(--body);
  background:var(--ink-850);
  color:var(--bone);
  font-size:clamp(.95rem,.86rem + .32vw,1.06rem);
  line-height:1.6;
  font-weight:300;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--volt);color:var(--ink-900)}

/* Scrollbar */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--ink-900)}
::-webkit-scrollbar-thumb{background:rgba(168,255,53,.42);border:3px solid var(--ink-900);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--volt)}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{
  outline:2px solid var(--volt);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:fixed;top:-100px;left:1rem;z-index:200;
  background:var(--volt);color:var(--ink-900);
  padding:.7rem 1.1rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;border-radius:2px;
  transition:top .25s var(--e-out);
}
.skip:focus{top:1rem}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Tipografía display ---------- */
.d{
  font-family:var(--display);
  font-weight:800;
  font-stretch:66%;
  text-transform:uppercase;
  line-height:.85;
  letter-spacing:-.015em;
}
.d--i{font-style:italic;font-stretch:62%}

.mono{
  font-family:var(--mono);
  font-weight:300;
  font-size:clamp(.6rem,.55rem + .16vw,.72rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bone-mute);
}
.mono strong{font-weight:500;color:var(--bone-dim)}

/* Punto de acento — el neón como puntuación, no como luz */
.dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--volt);vertical-align:middle;
  margin-inline:.55em;flex:0 0 auto;
}

/* ---------- Holgura de anclas ----------
   Para CUALQUIER salto a un ancla, no sólo los que pasan por irA(): el salto
   nativo del navegador (llegar con #hash desde otra página) ignora el offset
   que calcula el JS y dejaba el titular debajo de la barra fija. */
section[id],.horario[id],#main{scroll-margin-top:6rem}

/* ---------- Scroll suave (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip} /* clip, no hidden: la pagina ya usa overflow-x:clip en html */

/* ---------- Grano de película global ---------- */
.grain{
  position:fixed;inset:-120%;z-index:80;pointer-events:none;
  opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite;
  will-change:transform;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}      20%{transform:translate(-6%,4%)}
  40%{transform:translate(4%,-5%)}  60%{transform:translate(-3%,-3%)}
  80%{transform:translate(5%,3%)}   100%{transform:translate(0,0)}
}

/* ============================================================
   1 · PRELOADER
   Concepto: una barra que se carga. Empezaron con dos mancuernas
   y una barra vacía; el contador es el peso que se fue sumando.
   ============================================================ */
.loader{
  position:fixed;inset:0;z-index:var(--z-load);
  background:var(--ink-900);
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:var(--pad);
  clip-path:inset(0 0 0 0);
  will-change:clip-path;
}
.loader__top{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:1px solid var(--line-soft);padding-bottom:1rem;
}
.loader__mid{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(1.6rem,4vh,3rem);
}

/* La barra: dos discos que se separan a medida que carga */
.bar{
  position:relative;height:60px;display:flex;align-items:center;
}
.bar__track{
  position:absolute;left:0;right:0;height:1px;background:var(--line-soft);
}
.bar__fill{
  position:absolute;left:0;height:2px;width:0%;
  background:var(--bone);
}
.bar__plate{
  position:absolute;top:50%;translate:0 -50%;
  width:9px;height:44px;background:var(--bone);border-radius:1px;
}
.bar__plate--l{left:0}
.bar__plate--r{left:0%;background:var(--volt);width:11px;height:56px}

.loader__count{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
}
.loader__num{
  font-family:var(--display);font-weight:800;font-stretch:62%;
  font-size:clamp(5rem,22vw,17rem);line-height:.78;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--bone);
}
.loader__num sup{
  font-size:.2em;vertical-align:super;color:var(--bone-mute);
  letter-spacing:.05em;
}
.loader__word{
  max-width:34ch;color:var(--bone-mute);
  font-size:clamp(.82rem,.78rem + .2vw,.95rem);line-height:1.55;
  padding-bottom:.9rem;
}
.loader__word b{color:var(--bone-dim);font-weight:400}

.loader__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  border-top:1px solid var(--line-soft);padding-top:1rem;
}

/* Filo neón que viaja con el barrido de salida */
.loader__edge{
  position:fixed;left:0;right:0;bottom:0;height:1px;
  background:var(--volt);z-index:calc(var(--z-load) + 1);
  opacity:0;pointer-events:none;
}

/* ============================================================
   2 · NAVEGACIÓN
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:clamp(.85rem,2vw,1.5rem) var(--pad);
  transition:padding .5s var(--e-out),background .5s var(--e-out),border-color .5s var(--e-out);
  border-bottom:1px solid transparent;
}
/* Única instancia de glass del sitio: la barra al hacer scroll */
.nav.is-stuck{
  padding-block:clamp(.6rem,1.2vw,.85rem);
  background:rgba(11,9,23,.62);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.brand{display:flex;align-items:center;gap:.7rem}
.brand__mark{
  width:38px;height:38px;border-radius:9px;object-fit:cover;
  border:1px solid var(--line);
  transition:width .5s var(--e-out),height .5s var(--e-out);
}
.nav.is-stuck .brand__mark{width:32px;height:32px}
.brand__type{
  font-family:var(--display);font-weight:800;font-stretch:66%;
  font-size:1.02rem;letter-spacing:.02em;text-transform:uppercase;
  line-height:1;
}
.brand__type i{font-style:italic;font-stretch:62%;font-weight:700}

.nav__links{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.4rem)}
.nav__link{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-dim);
  position:relative;padding-block:.35rem;
  transition:color .3s var(--e-out);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--volt);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--e-out);
}
.nav__link:hover{color:var(--bone)}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:860px){.nav__links{display:none}}

/* CTA WhatsApp de la nav */
.nav__cta{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;
  padding:.62rem 1.05rem;border:1px solid var(--line);border-radius:99px;
  color:var(--bone);
  transition:border-color .4s var(--e-out),color .4s var(--e-out),background .4s var(--e-out);
}
.nav__cta:hover{border-color:var(--volt);color:var(--volt)}
.nav__cta .pulse{
  width:6px;height:6px;border-radius:50%;background:var(--volt);
  position:relative;flex:0 0 auto;
}
.nav__cta .pulse::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--volt);animation:pulse 2.6s var(--e-out) infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.8}
  70%,100%{transform:scale(3.2);opacity:0}
}


/* ============================================================
   NAV KINETIC · Sterling Gate (port vanilla del componente React)
   Estructura, tiempos y easing idénticos al original; sólo cambian
   los colores: lima/aqua sobre índigo en vez de índigo/violeta/rosa.
   ============================================================ */
.nav{ --cubic-default:cubic-bezier(.65,.05,0,1); }
.nav-row__right{margin-left:auto;display:flex;align-items:center;gap:1.25rem}
.nav-toggle-label{pointer-events:auto;cursor:pointer}
.toggle-text{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-mute);
}
.nav-close-btn{
  display:flex;align-items:center;gap:.7rem;
  color:var(--bone);background:transparent;
  pointer-events:auto;cursor:pointer;
}
/* font-size propio: 1.3em se resolvia contra los 17px heredados del boton
   mientras los <p> median .7rem, asi que la ventana mostraba linea y media
   y asomaba "Cerrar" debajo de "Menú". */
.menu-button-text{display:flex;flex-direction:column;font-size:.7rem;height:1.3em;overflow:hidden}
.menu-button-text .p-large{
  margin:0;height:1.3em;line-height:1.3em;
  font-family:var(--mono);font-weight:500;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.icon-wrap{width:1rem;height:1rem}
.menu-button-icon{display:block;width:100%;height:100%}

.fullscreen-menu-container{position:relative}
/* La visibilidad depende del atributo data-nav, no de la timeline: si GSAP
   no carga o su ticker esta dormido, el menu igual abre. */
.nav-overlay-wrapper{position:fixed;inset:0;z-index:var(--z-menu);display:none}
.nav-overlay-wrapper[data-nav="open"]{display:block}
.overlay{position:absolute;inset:0;background:rgba(8,6,15,.62);cursor:pointer}
.menu-content{position:absolute;top:0;right:0;height:100%;width:min(35em,100%);overflow:hidden}
.menu-bg{position:absolute;inset:0}
/* las tres capas en cascada: acento, intermedia y fondo */
.backdrop-layer{position:absolute;inset:0;background:var(--ink-900)}
.backdrop-layer.first{background:var(--volt)}
.backdrop-layer.second{background:var(--ink-600)}

.ambient-background-shapes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bg-shape{position:absolute;inset:8% 4%;width:92%;height:84%;opacity:0;transition:opacity .3s}
.bg-shape.active{opacity:1}

.menu-content-wrapper{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:7rem 2.5rem 2.5rem;
}
.menu-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.menu-list-item{position:relative;overflow:hidden}
.nav-link{position:relative;display:block;padding:.12em .2em;text-decoration:none}
.nav-link-text{
  margin:0;position:relative;z-index:1;
  font-family:var(--display);font-weight:800;font-stretch:66%;
  font-size:clamp(2.4rem,6vh,3.6rem);line-height:1.12;
  letter-spacing:-.02em;text-transform:uppercase;
  color:var(--bone);will-change:transform;
}
.nav-link-hover-bg{
  position:absolute;inset:0;z-index:0;background:var(--volt);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .4s var(--cubic-default);
}
.nav-link:hover .nav-link-hover-bg,
.nav-link:focus-visible .nav-link-hover-bg{transform:scaleY(1)}
/* sobre el relleno lima el texto pasa a tinta: 16:1 de contraste */
.nav-link:hover .nav-link-text,
.nav-link:focus-visible .nav-link-text{color:var(--ink-900)}

.menu-details{display:flex;flex-direction:column;gap:.45rem}
.menu-details__label{
  margin:0 0 .3rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone-mute);
}
.menu-details a{width:fit-content;color:var(--bone-dim);font-size:.95rem;transition:color .3s}
.menu-details a:hover{color:var(--volt)}
.menu-details__cta{font-weight:500;color:var(--bone) !important}

@media (max-width:640px){
  .toggle-text{display:none}
  .menu-content-wrapper{padding:6rem 1.6rem 2rem}
  .nav-link-text{font-size:clamp(2rem,9vw,2.8rem)}
}

/* ============================================================
   4 · CURSOR
   ============================================================ */
.cursor{
  position:fixed;top:0;left:0;z-index:var(--z-cursor);
  width:34px;height:34px;border:1px solid rgba(242,240,234,.55);
  border-radius:50%;pointer-events:none;
  translate:-50% -50%;
  will-change:transform;
  transition:width .35s var(--e-out),height .35s var(--e-out),
             border-color .35s var(--e-out),background .35s var(--e-out),opacity .3s;
  opacity:0;
}
.cursor__dot{
  position:fixed;top:0;left:0;z-index:var(--z-cursor);
  width:4px;height:4px;border-radius:50%;background:var(--volt);
  pointer-events:none;translate:-50% -50%;will-change:transform;opacity:0;
}
.cursor.is-on{
  width:64px;height:64px;
  border-color:var(--volt);
  background:rgba(168,255,53,.07);
}
@media (hover:none),(pointer:coarse){.cursor,.cursor__dot{display:none}}

/* ============================================================
   5 · HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;
  isolation:isolate;
}
#fx{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:var(--z-fx);display:block;
}
/* Degradado de asiento: funde el canvas con el fondo de página */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(11,9,23,.72) 0%,rgba(11,9,23,0) 26%,rgba(11,9,23,0) 55%,rgba(11,9,23,.94) 100%),
    radial-gradient(120% 90% at 78% 22%,rgba(11,9,23,0) 35%,rgba(8,6,15,.72) 100%);
}

.hero__inner{
  position:relative;z-index:var(--z-content);
  /* space-between y no flex-end: con todo apoyado abajo quedaban ~370px
     muertos bajo la nav. Asi el eyebrow (que lleva el 4,7★) sube al tope,
     donde se ve de inmediato, y el titular sigue anclado abajo. */
  flex:1;display:flex;flex-direction:column;justify-content:space-between;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(5.8rem,11.5vh,7.2rem) var(--pad) clamp(1.4rem,3vh,2.2rem);
  gap:clamp(1.5rem,3.5vh,2.4rem);
}

.hero__eyebrow{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  padding-bottom:clamp(.8rem,2vh,1.2rem);
  border-bottom:1px solid var(--line-soft);
}
.hero__eyebrow span{display:inline-flex;align-items:center}
.hero__rating{color:var(--bone-dim)}
.hero__rating b{color:var(--volt);font-weight:500}

.hero__main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,clamp(260px,26vw,380px));
  gap:clamp(1.8rem,4vw,4rem);
  align-items:flex-end;
}
@media (max-width:1000px){
  .hero__main{grid-template-columns:1fr;gap:1.8rem}
}

.hero__title{
  font-family:var(--display);font-weight:800;font-stretch:64%;
  text-transform:uppercase;
  /* Escala con el ANCHO y el ALTO: sólo con vw, en pantallas bajas
     (1366×650) las tres líneas empujaban el CTA bajo el pliegue. */
  font-size:clamp(3.1rem,min(11.6vw,16vh),10.5rem);
  line-height:.845;
  letter-spacing:-.022em;
  color:var(--bone);
}
.hero__title em{
  font-style:italic;font-stretch:60%;font-weight:700;
  /* el único guiño cromático del titular: un filo, no un glow */
  color:var(--bone);
}
.hero__title .thin{
  -webkit-text-stroke:1px rgba(242,240,234,.44);
  color:transparent;
}
/* máscara de revelado por línea */
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln > span{display:block;will-change:transform}

.hero__aside{
  display:flex;flex-direction:column;gap:clamp(1.1rem,2.4vh,1.7rem);
  padding-bottom:.4rem;
}
.hero__lede{
  color:var(--bone-dim);
  font-size:clamp(.95rem,.9rem + .28vw,1.1rem);
  line-height:1.62;max-width:42ch;
}
.hero__lede b{color:var(--bone);font-weight:500}

.hero__actions{display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}

/* --- CTA magnético principal --- */
.cta{
  position:relative;display:inline-flex;align-items:center;gap:.9rem;
  padding:1.05rem 1.6rem;border-radius:99px;
  background:var(--volt);color:var(--ink-900);
  font-family:var(--mono);font-weight:500;font-size:.74rem;
  letter-spacing:.13em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;
  will-change:transform;
}
/* Rodillo de dos rótulos. line-height explícito: el 1.6 heredado del body
   hacía que cada línea midiera 1.6em dentro de una caja de 1.1em, así que el
   texto se recortaba y el segundo rótulo asomaba por debajo. */
.cta__label{
  position:relative;z-index:2;display:block;overflow:hidden;
  line-height:1.25;height:1.25em;
}
.cta__label span{display:block;white-space:nowrap;transition:transform .5s var(--e-out)}
.cta__label span::after{content:attr(data-t);display:block}
.cta:hover .cta__label span,
.cta:focus-visible .cta__label span{transform:translateY(-1.25em)}
.cta__ico{
  position:relative;z-index:2;width:15px;height:15px;flex:0 0 auto;
  transition:transform .5s var(--e-out);
}
.cta:hover .cta__ico{transform:translateX(3px)}
.cta::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--bone);
  transform:translateY(101%);
  transition:transform .55s var(--e-io);
}
.cta:hover::before{transform:translateY(0)}

.cta--ghost{
  background:transparent;color:var(--bone-dim);
  padding:.55rem 0;border-radius:0;
  gap:.6rem;
}
.cta--ghost::before{display:none}
.cta--ghost:hover{color:var(--bone)}
.cta--ghost .cta__ico{animation:nudge 2.4s var(--e-io) infinite}
@keyframes nudge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(4px)}
}

/* --- Barra inferior de datos --- */
.hero__bar{
  position:relative;z-index:var(--z-content);
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(.9rem,2vh,1.15rem) var(--pad);
  border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap;
}
.stat{display:flex;flex-direction:column;gap:.2rem}
.stat__k{
  font-family:var(--display);font-weight:800;font-stretch:70%;
  font-size:clamp(1rem,.9rem + .5vw,1.35rem);letter-spacing:.005em;
  text-transform:uppercase;line-height:1;color:var(--bone);
}
.stat__v{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-mute)}
@media (max-width:620px){
  .hero__bar .stat:nth-child(n+3){display:none}
}

/* ============================================================
   6 · ESTRUCTURA DE SECCIÓN
   ============================================================ */
.sec{
  position:relative;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(5rem,13vh,10rem) var(--pad);
}
.sec__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,clamp(260px,30vw,460px));
  gap:clamp(1.4rem,4vw,4rem);align-items:end;
  padding-bottom:clamp(2rem,5vh,3.4rem);
  border-bottom:1px solid var(--line-soft);
}
@media (max-width:900px){.sec__head{grid-template-columns:1fr;align-items:start}}
.sec__num{
  display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;
  color:var(--volt);margin-bottom:1.1rem;
}
.sec__title{
  font-family:var(--display);font-weight:800;font-stretch:66%;
  text-transform:uppercase;line-height:.9;letter-spacing:-.018em;
  font-size:clamp(2.1rem,5.4vw,4.6rem);
}
.sec__title em{font-style:italic;font-stretch:60%}
.sec__lede{color:var(--bone-dim);max-width:46ch;font-size:clamp(.92rem,.88rem + .22vw,1.04rem)}
.sec__lede b{color:var(--bone);font-weight:500}

/* Imagen con grading de marca: gris + índigo, nunca la foto cruda */
.duo{position:relative;overflow:hidden;background:var(--ink-900);isolation:isolate}
.duo img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.18) brightness(.64);
}
.duo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 105% at 26% 8%,rgba(53,232,196,.16),transparent 58%),
    linear-gradient(158deg,rgba(45,35,86,.78),rgba(11,9,23,.9));
  mix-blend-mode:screen;opacity:.6;
}
.duo::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(11,9,23,.92),transparent 58%);
}

/* ============================================================
   7 · ORIGEN — la línea de tiempo 2024 → hoy
   ============================================================ */
.origen__grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.6rem,4vw,4.5rem);align-items:stretch;
  padding-top:clamp(2.4rem,6vh,4rem);
}
@media (max-width:900px){.origen__grid{grid-template-columns:1fr}}
.origen__media{position:relative;min-height:clamp(320px,52vh,560px);border-radius:3px}
.origen__badge{
  position:absolute;left:0;bottom:0;z-index:3;
  padding:1rem 1.2rem;
  background:var(--volt);color:var(--ink-900);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
}
.origen__badge b{
  display:block;font-family:var(--display);font-weight:800;font-stretch:70%;
  font-size:1.5rem;letter-spacing:0;line-height:1;margin-top:.2rem;
}

.beats{display:flex;flex-direction:column;gap:0}
.beat{
  position:relative;padding:clamp(1.5rem,3.4vh,2.2rem) 0 clamp(1.5rem,3.4vh,2.2rem) clamp(2.6rem,4vw,3.6rem);
  border-bottom:1px solid var(--line-soft);
}
.beat:last-child{border-bottom:0}
/* riel vertical + nodo */
.beat::before{
  content:"";position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--line);
}
.beat:first-child::before{top:50%}
.beat:last-child::before{bottom:50%}
.beat__node{
  position:absolute;left:0;top:50%;translate:0 -50%;
  width:13px;height:13px;border-radius:50%;
  border:1px solid var(--line);background:var(--ink-850);
  transition:background .5s var(--e-out),border-color .5s var(--e-out),scale .5s var(--e-out);
}
.beat.is-live .beat__node{background:var(--volt);border-color:var(--volt);scale:1.15}
.beat__yr{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  color:var(--bone-mute);display:block;margin-bottom:.5rem;
  transition:color .5s var(--e-out);
}
.beat.is-live .beat__yr{color:var(--volt)}
.beat__t{
  font-family:var(--display);font-weight:800;font-stretch:68%;text-transform:uppercase;
  font-size:clamp(1.25rem,2.6vw,1.95rem);line-height:1;letter-spacing:-.01em;
  margin-bottom:.6rem;
  color:var(--bone-mute);transition:color .5s var(--e-out);
}
.beat.is-live .beat__t{color:var(--bone)}
.beat__d{color:var(--bone-dim);max-width:44ch;font-size:.96rem}

/* ============================================================
   9 · EXPERIENCIA — tarjeta 3D que se endereza con el scroll
   (port del ContainerScroll de Aceternity a CSS 3D + GSAP)
   ============================================================ */
.showcase{
  position:relative;padding-block:clamp(3rem,8vh,6rem);
  /* La proyección en perspectiva de la tarjeta inclinada es más ancha que su
     caja: sin esto asoma 46px de scroll horizontal. `clip` en vez de `hidden`
     para no crear un contenedor de scroll vertical implícito. */
  overflow-x:clip;
}
.showcase__stage{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);
  perspective:1000px;
}
.showcase__head{
  max-width:60rem;margin-inline:auto;text-align:center;
  padding-bottom:clamp(2rem,5vh,3.5rem);
  will-change:transform;
}
.showcase__kicker{display:block;margin-bottom:1rem}
.showcase__h{
  font-family:var(--display);font-weight:800;font-stretch:64%;
  text-transform:uppercase;line-height:.88;letter-spacing:-.02em;
  font-size:clamp(2rem,6.4vw,5.4rem);
}
.showcase__h em{font-style:italic;font-stretch:60%;color:var(--volt)}

.showcase__card{
  /* La caja proyectada mide ~1.19× la de layout (perspectiva + scale), así que
     el ancho se topa para que el borde no quede rebanado por el recorte. */
  max-width:min(1060px,78vw);margin-inline:auto;
  border:3px solid rgba(242,240,234,.12);
  border-radius:28px;padding:clamp(.4rem,1vw,.85rem);
  background:linear-gradient(165deg,rgba(45,35,86,.7),rgba(11,9,23,.9));
  box-shadow:
    0 9px 20px rgba(0,0,0,.30), 0 37px 37px rgba(0,0,0,.26),
    0 84px 50px rgba(0,0,0,.15), 0 149px 60px rgba(0,0,0,.05);
  transform-style:preserve-3d;
  will-change:transform;
  /* estado inicial del port: rotateX(20deg) scale(1.05) */
  transform:rotateX(20deg) scale(1.05);
}
.showcase__screen{
  position:relative;overflow:hidden;border-radius:18px;
  aspect-ratio:16/9;background:var(--ink-900);
}
@media (max-width:768px){
  .showcase__card{transform:rotateX(20deg) scale(.9);border-width:2px;border-radius:20px}
  .showcase__screen{aspect-ratio:4/3}
}
.showcase__screen .duo{position:absolute;inset:0}
.showcase__tag{
  position:absolute;left:0;bottom:0;z-index:4;
  display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1.1rem;background:rgba(11,9,23,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top-right-radius:12px;
}

/* ============================================================
   10 · MODALIDADES
   ============================================================ */
.mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-soft);
  margin-top:clamp(2.4rem,6vh,4rem);border-block:1px solid var(--line-soft)}
/* 4 -> 2 -> 1. En 2 columnas la retícula queda par (4 tarjetas, dos filas
   llenas); a 3 quedaria una tarjeta suelta arrastrando una fila entera. */
@media (max-width:1100px){.mods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.mods{grid-template-columns:1fr}}
.mod{
  position:relative;background:var(--ink-850);
  padding:clamp(1.4rem,3vw,2.2rem);
  display:flex;flex-direction:column;gap:1.1rem;
  overflow:hidden;isolation:isolate;
}
.mod__img{position:relative;aspect-ratio:5/4;overflow:hidden;border-radius:2px}
.mod__img .duo{position:absolute;inset:0}
.mod__img img{transition:scale 1.1s var(--e-out)}
.mod:hover .mod__img img{scale:1.06}
.mod__t{
  font-family:var(--display);font-weight:800;font-stretch:66%;text-transform:uppercase;
  font-size:clamp(1.4rem,2.6vw,2rem);line-height:1;letter-spacing:-.008em;
}
.mod__d{color:var(--bone-dim);font-size:.94rem;line-height:1.6;flex:1}
.mod__meta{display:flex;gap:1.2rem;flex-wrap:wrap;padding-top:.9rem;border-top:1px solid var(--line-soft)}
/* filo de acento que sube al hacer hover */
.mod::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--volt);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--e-out);
}
.mod:hover::after{transform:scaleX(1)}

/* ============================================================
   10b · HORARIO SEMANAL
   Vive DENTRO de la sección de clases, no como sección propia:
   la portada se acortó a 4 secciones a propósito y el horario es
   la respuesta inmediata a "¿cuándo?" que sigue a "¿qué?".
   ============================================================ */
.horario{margin-top:clamp(3rem,7vh,5rem)}
.horario__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1rem,4vw,3.5rem);align-items:end;
  padding-bottom:clamp(1.4rem,3vh,2.2rem);
}
@media (max-width:860px){.horario__head{grid-template-columns:1fr;gap:1rem}}
.horario__t{
  font-family:var(--display);font-weight:800;font-stretch:66%;
  text-transform:uppercase;line-height:.92;letter-spacing:-.015em;
  font-size:clamp(1.7rem,4.2vw,3.1rem);
}
.horario__t em{font-style:italic;font-stretch:60%;color:var(--volt)}
.horario__lede{color:var(--bone-dim);font-size:.95rem;line-height:1.62;max-width:46ch}
.horario__lede b{color:var(--bone);font-weight:500}

/* misma retícula de filo a filo que .mods: celdas separadas por 1px */
.horario__grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;background:var(--line-soft);
  border-block:1px solid var(--line-soft);
}
/* 6 -> 3 -> 2, siempre divisores de 6 para no dejar huecos en la fila.
   NO baja a 1 columna: medido a 320 px, dos columnas dan celdas de 140 px
   donde ni la hora ni "Full Dynamic" se cortan, y ahorran ~600 px de scroll
   en el móvil (1616 -> 1018) en una página que se acortó a propósito. */
@media (max-width:1180px){.horario__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.horario__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.horario__dia{
  background:var(--ink-850);
  padding:clamp(1rem,1.6vw,1.35rem) clamp(.9rem,1.4vw,1.15rem);
  display:flex;flex-direction:column;gap:.85rem;
}
.horario__d{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-mute);
  padding-bottom:.7rem;border-bottom:1px solid var(--line-soft);
}
.horario__lista{list-style:none;display:flex;flex-direction:column;gap:.45rem}

.horario__link{
  position:relative;display:flex;flex-direction:column;gap:.18rem;
  padding:.6rem .7rem;border-radius:3px;
  background:rgba(242,240,234,.03);
  text-decoration:none;color:inherit;
  transition:background .35s var(--e-out);
}
.horario__link:hover,.horario__link:focus-visible{background:rgba(168,255,53,.10)}
/* filo de acento a la izquierda, mismo gesto que el de .mod pero vertical */
.horario__link::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--volt);transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--e-out);
}
.horario__link:hover::before,.horario__link:focus-visible::before{transform:scaleY(1)}

.horario__hora{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  color:var(--bone-mute);display:flex;gap:.28em;white-space:nowrap;
}
.horario__mod{
  font-weight:500;font-size:.88rem;line-height:1.25;color:var(--bone);
}
/* Distintivo del bloque de mañana. Va en gris y no en lima: marca una franja
   horaria, no una oferta — si brillara competiría con los CTA de verdad. */
.horario__am{
  display:inline-block;margin-top:.3rem;align-self:flex-start;
  font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;
  color:var(--bone-mute);border:1px solid var(--line-soft);
  padding:.14rem .34rem;border-radius:2px;line-height:1;
}
.horario__nota{
  /* Párrafo normal, NO flex: con flex cada trozo de la frase se vuelve un
     item con gap propio y aparecían huecos antes de las comas. */
  padding-top:clamp(1.1rem,2.5vh,1.6rem);
  color:var(--bone-mute);font-size:.82rem;line-height:1.7;max-width:70ch;
}
.horario__nota b{color:var(--bone-dim);font-weight:500}
.horario__nota .horario__am{margin:0 .45rem 0 0;transform:translateY(-1px)}

/* ============================================================
   10b · CARRUSEL INFINITO DE OPINIONES
   Port a vanilla del InfiniteMovingCards (framer-motion) manteniendo
   su comportamiento: set duplicado para bucle sin salto, velocidad en
   px/s, pausa al pasar el cursor y máscaras de degradado en los bordes.
   ============================================================ */
.imc{position:relative;width:100%;margin-top:clamp(2.4rem,6vh,4rem)}
.imc__vp{overflow:hidden}
.imc__track{
  display:flex;width:max-content;padding-block:4px;
  will-change:transform;
}
.imc__card{
  flex:0 0 auto;
  /* mismas medidas que el original: min(20rem, 100vw - 4rem) y tope 356px */
  min-width:min(20rem,calc(100vw - 4rem));
  max-width:356px;
  display:flex;flex-direction:column;gap:.8rem;
  padding:clamp(1.1rem,2.2vw,1.4rem);
  border:1px solid var(--line);border-radius:16px;
  background:var(--ink-800);
  box-shadow:0 1px 3px rgba(0,0,0,.45);
  transition:transform .35s var(--e-out),border-color .35s var(--e-out);
}
.imc__card:hover{transform:translateY(-2px);border-color:rgba(168,255,53,.34)}

.imc__stars{color:var(--volt);font-size:.78rem;letter-spacing:.2em;line-height:1}
.imc__desc{font-size:.92rem;line-height:1.6;color:var(--bone-dim);flex:1}
.imc__tags{display:flex;flex-wrap:wrap;gap:.35rem}
.imc__tag{
  border:1px solid var(--line);background:rgba(242,240,234,.04);
  border-radius:99px;padding:.2rem .6rem;
  font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-mute);white-space:nowrap;
}
.imc__who{display:flex;align-items:center;gap:.65rem;padding-top:.15rem}
/* el original usa avatar; sin fotos de alumnos, la inicial cumple el mismo rol */
.imc__ini{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--line);background:var(--ink-700);
  display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-stretch:70%;
  font-size:.82rem;color:var(--bone);
}
.imc__name{font-size:.85rem;font-weight:500;color:var(--bone);line-height:1.2}
.imc__role{
  font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-mute);margin-top:.22rem;
}

.imc__mask{position:absolute;top:0;bottom:0;width:clamp(40px,7vw,80px);pointer-events:none;z-index:2}
.imc__mask--l{left:0;background:linear-gradient(to right,var(--ink-850),rgba(11,9,23,.72) 42%,transparent)}
.imc__mask--r{right:0;background:linear-gradient(to left,var(--ink-850),rgba(11,9,23,.72) 42%,transparent)}

/* Sin animación, el riel se vuelve desplazable a mano: si no, el contenido
   que queda fuera del encuadre sería inalcanzable. */
.imc.is-static .imc__vp{overflow-x:auto;scrollbar-width:thin}
.imc.is-static .imc__mask{display:none}

@media (prefers-reduced-motion:reduce){
  .imc__card{transition:none}
}

/* ============================================================
   11 · RESEÑAS
   ============================================================ */
.revs__src{
  margin-top:1.3rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-mute);
}
.revs__src a{border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
.revs__src a:hover{color:var(--volt);border-color:var(--volt)}

/* ============================================================
   11b · EN LA SALA — video real + fotos del recinto
   ============================================================ */
.sala{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line-soft);
  margin-top:clamp(2.4rem,6vh,4rem);
  border-block:1px solid var(--line-soft);
}
@media (max-width:900px){.sala{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sala{grid-template-columns:minmax(0,1fr)}}

.sala__i{
  position:relative;background:var(--ink-900);
  aspect-ratio:9/16;overflow:hidden;isolation:isolate;
}
/* las fotos del recinto son 3:4; van en la misma retícula sin deformarse */
.sala__i--foto{aspect-ratio:9/16}
/* Tratamiento MAS LIGERO que el duotono del resto del sitio: ese existe para
   disimular la fotografia de banco. Este material es propio y son tomas de
   interior ya oscuras, asi que se desatura a medias y no se apaga. */
.sala__i video,.sala__i img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  filter:grayscale(.55) contrast(1.06) brightness(.96);
}
.sala__i::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 100% at 30% 6%,rgba(53,232,196,.10),transparent 58%),
    linear-gradient(to top,rgba(11,9,23,.82),rgba(11,9,23,0) 46%);
}
.sala__tag{
  position:absolute;left:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:.5rem;
  padding:.7rem .9rem;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-dim);
}
/* aviso de que es material propio, no banco de imágenes */
.sala__real{
  position:absolute;top:0;left:0;z-index:3;
  background:var(--volt);color:var(--ink-900);
  font-family:var(--mono);font-weight:500;font-size:.52rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.3rem .55rem;
}

/* ============================================================
   12 · PLANES
   ============================================================ */
.plans{
  display:grid;
  /* minmax(0,...) y no 1fr: el rotulo del CTA lleva white-space:nowrap y su
     min-content ensancharia su columna. */
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line-soft);
  margin-top:clamp(2.4rem,6vh,4rem);
  border-block:1px solid var(--line-soft);
}
@media (max-width:1080px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.plans{grid-template-columns:minmax(0,1fr)}}

/* ---------- Selector de modalidad de pago ---------- */
/* Radios reales, no botones: el teclado y los lectores de pantalla lo
   entienden de fabrica (flechas para moverse, estado anunciado). */
.perio{
  display:inline-flex;align-items:stretch;gap:0;border:0;
  border:1px solid var(--line);border-radius:99px;padding:3px;
  margin-top:clamp(1.6rem,4vh,2.4rem);
}
.perio legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.perio input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.perio label{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.7rem 1.15rem;border-radius:99px;cursor:pointer;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bone-dim);white-space:nowrap;
  transition:background .45s var(--e-out),color .45s var(--e-out);
}
.perio label b{
  font-weight:500;font-size:.56rem;letter-spacing:.1em;color:var(--volt);
  transition:color .45s var(--e-out),opacity .45s var(--e-out);
}
.perio label:hover{color:var(--bone)}
.perio input:checked + label{background:var(--volt);color:var(--ink-900)}
.perio input:checked + label b{color:var(--ink-900);opacity:.68}
.perio input:focus-visible + label{outline:2px solid var(--volt);outline-offset:3px}
@media (max-width:620px){
  .perio{width:100%;flex-direction:column;border-radius:14px}
  /* .95rem y no .7rem: apilado quedaba en 39px de alto, bajo el minimo
     tactil de 44px */
  .perio label{justify-content:space-between;border-radius:11px;padding:.95rem 1.15rem}
}

/* Marca para los planes que no ofrecen la modalidad elegida */
.plan__only{
  display:none;align-self:flex-start;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bone-mute);
  border:1px solid var(--line);border-radius:99px;padding:.28rem .6rem;
}
.plan--solo .plan__only{display:inline-block}
/* Si el plan destacado no ofrece la modalidad elegida, cede el enfasis: si no,
   la tarjeta mas llamativa de la vista semestral es la que dice "solo mensual". */
.plan--pick.plan--solo{background:var(--ink-850)}
.plan--pick.plan--solo::before{display:none}
.plan--pick.plan--solo .plan__badge{display:none}
.plan--pick.plan--solo .cta--block{
  background:transparent;color:var(--bone);border-color:var(--line);
}
.plan--pick.plan--solo .cta--block::before{background:var(--volt)}
.plan--pick.plan--solo .cta--block:hover{color:var(--ink-900);border-color:var(--volt)}

.plan{
  position:relative;background:var(--ink-850);
  padding:clamp(1.5rem,2.8vw,2.1rem);
  display:flex;flex-direction:column;gap:.95rem;
  isolation:isolate;
}
/* El plan destacado se distingue por un filo y un fondo un paso mas claro,
   no por rellenarlo de color: el neon sigue racionado. */
.plan--pick{background:var(--ink-800)}
.plan--pick::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--volt);
}
.plan__badge{
  position:absolute;top:0;right:0;
  background:var(--volt);color:var(--ink-900);
  font-family:var(--mono);font-weight:500;font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.38rem .65rem;
}

.plan__head{display:flex;flex-direction:column;gap:.35rem}
.plan__term{
  font-family:var(--display);font-weight:800;font-stretch:68%;text-transform:uppercase;
  font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1;letter-spacing:-.008em;
}
.plan__sub{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--bone-mute);
  white-space:nowrap; /* si envuelve, esa tarjeta desalinea toda su fila */
}

/* Sesiones: el dato que realmente diferencia un plan de otro */
/* Una sola cifra dominante por tarjeta: el precio. El numero de sesiones
   competia de tu a tu con el (2.3rem contra 2.7rem) y por eso la grilla se
   leia inquieta. Aqui baja a una linea mono con el numero apenas realzado. */
.plan__ses{
  display:block;
  padding-bottom:.85rem;border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bone-dim);white-space:nowrap;
}
.plan__ses b{
  font-family:var(--display);font-weight:800;font-stretch:66%;
  font-size:1.3rem;line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--bone);
  margin-right:.15em;
}

.plan__figures{display:flex;flex-direction:column;gap:.3rem}
.plan__price{
  display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;
  font-family:var(--display);font-weight:800;font-stretch:64%;
  font-size:clamp(1.85rem,3.5vw,2.45rem);line-height:.9;letter-spacing:-.028em;
  font-variant-numeric:tabular-nums;
}
/* .plan__unit y NO "span": al introducir <span class="plan__amount"> para el
   selector de modalidad, este selector generico se llevaba tambien al monto y
   lo renderizaba en mono a 9px. */
.plan__price .plan__unit{
  font-family:var(--mono);font-weight:300;font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bone-mute);
}
.plan__total{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  color:var(--bone-dim);white-space:nowrap;
}
.plan__total s{color:var(--bone-mute);text-decoration-thickness:1px}
.plan__save{
  font-family:var(--mono);font-weight:500;font-size:.6rem;letter-spacing:.08em;
  color:var(--volt);white-space:nowrap;
}

/* La nota empuja el CTA al fondo: asi los botones alinean aunque el texto
   cambie de largo entre tarjetas. */
.plan__note{
  flex:1;font-size:.82rem;line-height:1.55;color:var(--bone-dim);
  padding-top:.1rem;
}
.plan__note b{color:var(--bone);font-weight:500}

/* CTA a ancho completo: hereda todo de .cta y solo cambia forma y relleno */
.cta--block{
  width:100%;justify-content:space-between;
  padding:.9rem 1.05rem;font-size:.64rem;letter-spacing:.1em;
  background:transparent;color:var(--bone);
  border:1px solid var(--line);
}
.cta--block::before{background:var(--volt)}
.cta--block:hover{color:var(--ink-900);border-color:var(--volt)}
.plan--pick .cta--block{background:var(--volt);color:var(--ink-900);border-color:var(--volt)}
.plan--pick .cta--block::before{background:var(--bone)}

/* ---------- Tarifas personalizadas ---------- */
.pers{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line-soft);
  margin-top:clamp(2.4rem,5vh,3.4rem);
  border-block:1px solid var(--line-soft);
}
@media (max-width:700px){.pers{grid-template-columns:minmax(0,1fr)}}
.pers__c{
  background:var(--ink-850);
  padding:clamp(1.4rem,2.6vw,2rem);
  display:flex;flex-direction:column;gap:1rem;
}
.pers__t{
  font-family:var(--display);font-weight:800;font-stretch:68%;text-transform:uppercase;
  font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1;letter-spacing:-.008em;
}
.pers__d{font-size:.86rem;line-height:1.5;color:var(--bone-dim)}
.pers__rows{display:flex;flex-direction:column;gap:0}
.pers__r{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.75rem 0;border-bottom:1px solid var(--line-soft);
}
.pers__r:last-child{border-bottom:0;padding-bottom:0}
.pers__k{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bone-dim);white-space:nowrap;
}
.pers__val{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.pers__v{
  font-family:var(--display);font-weight:800;font-stretch:68%;
  font-size:clamp(1.1rem,2.1vw,1.4rem);line-height:1;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pers__eq{
  font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;
  color:var(--bone-mute);font-style:normal;white-space:nowrap;
}
.pers__eq:empty{display:none}
.pers__per{
  font-family:var(--mono);font-size:.57rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--volt);
}
.pers__only{
  align-self:flex-start;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bone-mute);
  border:1px solid var(--line);border-radius:99px;padding:.28rem .6rem;
}
.pers__only:empty{display:none}
.pers__sub{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--bone-mute);white-space:nowrap;
}
/* mismo tratamiento que .plan--pick: filo y fondo un paso mas claro */
.pers__c{position:relative}
.pers__c--pick{background:var(--ink-800)}
.pers__c--pick::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--volt);
}
.pers__badge{
  position:absolute;top:0;right:0;
  background:var(--volt);color:var(--ink-900);
  font-family:var(--mono);font-weight:500;font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.38rem .65rem;
}

.plans__note{
  margin-top:1.5rem;display:flex;gap:clamp(1rem,3vw,3rem);flex-wrap:wrap;
}
.plans__note p{font-size:.86rem;line-height:1.55;color:var(--bone-dim);max-width:46ch}
.plans__note b{color:var(--bone);font-weight:500}

/* ============================================================
   12b · PREGUNTAS FRECUENTES
   ============================================================ */
/* <details> nativo: abre/cierra con teclado y funciona sin JS */
.faq{
  margin-top:clamp(2.4rem,6vh,4rem);
  border-top:1px solid var(--line-soft);
}
.faq__i{border-bottom:1px solid var(--line-soft)}
.faq__q{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.1rem,2.6vh,1.5rem) 0;
  font-family:var(--display);font-weight:800;font-stretch:70%;
  text-transform:uppercase;letter-spacing:-.005em;line-height:1.15;
  font-size:clamp(.98rem,1.6vw,1.2rem);
  color:var(--bone-dim);
  transition:color .4s var(--e-out);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:"";flex:0 0 auto;
  width:13px;height:13px;margin-top:.28em;
  background:var(--bone-mute);
  /* cruz dibujada con clip-path: gira 45° al abrir y queda en aspa */
  clip-path:polygon(44% 0,56% 0,56% 44%,100% 44%,100% 56%,56% 56%,56% 100%,44% 100%,44% 56%,0 56%,0 44%,44% 44%);
  transition:transform .45s var(--e-out),background .4s var(--e-out);
}
.faq__i[open] .faq__q{color:var(--bone)}
.faq__i[open] .faq__q::after{transform:rotate(45deg);background:var(--volt)}
.faq__q:hover{color:var(--bone)}
.faq__i:focus-within .faq__q{color:var(--bone)}
.faq__a{
  padding-bottom:clamp(1.1rem,2.6vh,1.5rem);
  max-width:68ch;
}
.faq__a p{color:var(--bone-dim);font-size:.95rem;line-height:1.62}
@media (prefers-reduced-motion:no-preference){
  .faq__i[open] .faq__a{animation:faqIn .5s var(--e-out) both}
}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================================================
   12c · BOTÓN FLOTANTE DE WHATSAPP
   ============================================================ */
.wsp{
  position:fixed;right:clamp(1rem,2.4vw,1.9rem);bottom:clamp(1rem,2.4vw,1.9rem);
  z-index:var(--z-nav);
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.85rem 1.15rem;border-radius:99px;
  background:var(--volt);color:var(--ink-900);
  font-family:var(--mono);font-weight:500;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
  /* entra recién cuando el hero deja de estar en pantalla */
  opacity:0;transform:translateY(18px) scale(.94);pointer-events:none;
  transition:opacity .5s var(--e-out),transform .5s var(--e-out),background .3s var(--e-out);
}
.wsp.is-on{opacity:1;transform:none;pointer-events:auto}
.wsp:hover{background:var(--bone)}
.wsp svg{width:17px;height:17px;flex:0 0 auto}
.wsp__t{display:inline}
@media (max-width:620px){
  /* en móvil sólo el ícono: el rótulo tapaba contenido */
  .wsp{padding:.95rem;gap:0}
  .wsp__t{display:none}
  .wsp svg{width:22px;height:22px}
}

/* ============================================================
   13 · AGENDA + FOOTER
   ============================================================ */
.agenda{position:relative;overflow:hidden;border-top:1px solid var(--line-soft)}
.agenda__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(5rem,14vh,10rem) var(--pad) clamp(3rem,7vh,5rem);
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(2rem,5vw,5rem);align-items:end;
}
@media (max-width:960px){.agenda__in{grid-template-columns:1fr;align-items:start}}
.agenda__h{
  font-family:var(--display);font-weight:800;font-stretch:62%;
  text-transform:uppercase;line-height:.84;letter-spacing:-.025em;
  font-size:clamp(2.6rem,10vw,8.5rem);
}
.agenda__h em{font-style:italic;font-stretch:58%}
.agenda__side{display:flex;flex-direction:column;gap:1.5rem}
.agenda__list{display:flex;flex-direction:column;gap:.9rem}
.agenda__row{
  display:flex;justify-content:space-between;gap:1rem;
  padding-bottom:.85rem;border-bottom:1px solid var(--line-soft);
}
.agenda__row dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-mute)}
.agenda__row dd{text-align:right;color:var(--bone);font-size:.94rem}
.agenda__row dd a:hover{color:var(--volt)}

.cta--xl{padding:1.25rem 2rem;font-size:.8rem}

.foot{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:1.6rem var(--pad) 2.4rem;
  border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;
}
.foot__brand{display:flex;align-items:center;gap:.7rem}
.foot__brand img{width:30px;height:30px;border-radius:8px;border:1px solid var(--line)}
.foot__by{display:inline-flex;align-items:center;gap:.35em}
.foot__by .heart{color:var(--volt);font-style:normal}
.foot__by a{
  color:var(--bone-dim);border-bottom:1px solid var(--line);
  transition:color .3s var(--e-out),border-color .3s var(--e-out);
}
.foot__by a:hover{color:var(--volt);border-bottom-color:var(--volt)}

/* ---------- utilidades de entrada ----------
   Se ocultan SOLO si el motor confirmo que va a animarlas (clase en <html>).
   Al reves, cualquier fallo de JS/GSAP dejaba la pagina en blanco. */
html.anim [data-rise]{opacity:0;transform:translateY(18px)}
html.anim [data-reveal]{opacity:0;transform:translateY(26px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .grain{animation:none}
  [data-rise],[data-reveal]{opacity:1;transform:none}
  .ln > span{transform:none !important}
  /* sin motion, la tarjeta se muestra de frente en vez de inclinada */
  .showcase__card{transform:none !important}
}