/* =====================================================================
   ROCA GYM — rocagym.panoramicstudio.com.co
   Dirección: «VIÑETA DE ESQUINA» — pop-cómic de barrio en blanco, rojo y azul.
   Firma de motion: «PESO Y PÉNDULO» (asentamiento con overshoot + balanceo
   sobre pivote alto) + «EL DESREGISTRO VIVO» (la copia roja tiene su propio
   factor de parallax). Solo transform/opacity. Sin backdrop-filter.
   v20260821
   ===================================================================== */

/* ---------- Tipografías autohospedadas (cero llamadas a Google) ---------- */
@font-face{
  font-family:'Oswald'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/oswald-latin.woff2?v=20260824c) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Rubik'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/rubik-latin.woff2?v=20260824c) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Tokens ---------- */
:root{
  --blanco:#FFFFFF;
  --acero:#EFF2F6;
  --acero-d:#DDE3EA;
  --rojo:#E7343B;        /* SOLO relleno gráfico. Nunca texto, nunca fondo de texto blanco. */
  --rojo-d:#B4232B;      /* CTA sólido, banda roja, rojo tipográfico */
  --azul:#1B3E9B;
  --azul-l:#6E9BE8;      /* solo sobre carbón */
  --carbon:#14161A;
  --tinta:#1A1D22;
  --gris:#5A6470;

  --trazo:2px;                       /* filete, ya no contorno de viñeta */
  --maxw:min(92vw,1240px);
  --nav:64px;
  --r:10px;                          /* radio máximo */
  --disp:'Oswald','Rubik',system-ui,sans-serif;
  --txt:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* Escalón de pantalla ancha (lección de tres clientes seguidos) */
html{font-size:16px}
@media (min-width:1500px){ html{font-size:17.5px} :root{--maxw:min(90vw,1400px)} }
@media (min-width:1800px){ html{font-size:18.5px} :root{--maxw:min(88vw,1560px)} }
@media (min-width:2200px){ html{font-size:19.5px} :root{--maxw:1700px} }
@media (min-width:3000px){ html{font-size:20px}   :root{--maxw:1820px} }

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--blanco); color:var(--tinta);
  font-family:var(--txt); font-size:1.0625rem; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}     /* height:auto = nada estirado */
svg{display:block}
a{color:var(--azul); text-decoration-thickness:.08em; text-underline-offset:.18em}
button{font:inherit; color:inherit}
h1,h2,h3{margin:0; font-family:var(--disp); font-weight:700; letter-spacing:0; line-height:1.06}
h1,.h2{text-transform:uppercase}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--azul); outline-offset:3px; border-radius:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:var(--maxw); margin-inline:auto}
section{scroll-margin-top:calc(var(--nav) + 12px)}

/* =====================================================================
   MOTION — «peso y péndulo»
   ===================================================================== */
/* Entrada: llega desde abajo, pasa 5 px de largo y SE POSA. Nada sube flotando. */
html.is-anim [data-r]{opacity:0}
html.is-anim [data-r].in{animation:asentar 480ms cubic-bezier(.2,.9,.25,1) both}
@keyframes asentar{
  0%  {opacity:0; transform:translate3d(0,30px,0)}
  60% {opacity:1; transform:translate3d(0,-5px,0)}
  100%{opacity:1; transform:translate3d(0,0,0)}
}

/* Deriva ambiente: balanceo sobre un pivote ALTO — un disco colgado del rack. */
.flota{
  will-change:transform; transform-origin:50% -20%;
  animation:pendulo var(--dur,9s) ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -1.7s);
}
@keyframes pendulo{
  0%,100%{transform:translate3d(0,0,0) rotate(calc(var(--rot,1.1deg) * -1))}
  50%    {transform:translate3d(0,calc(var(--amp,10px) * -1),0) rotate(var(--rot,1.1deg))}
}
/* la capa de parallax es SIEMPRE un nodo distinto del de la deriva y del de data-r */
.px{display:block; will-change:transform}

@media (max-width:767px){
  .flota{--amp:5px; --rot:.6deg}          /* deriva a la mitad en móvil */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .flota,.px,[data-r]{animation:none!important; transform:none!important; opacity:1!important}
  .disco-carga{animation:none!important; transform:none!important; opacity:1!important}
}

/* =====================================================================
   Piezas del sistema gráfico
   ===================================================================== */
/* --- La viñeta: marco de contorno grueso + su desregistro rojo detrás --- */
/* La figura es una rejilla: fila 1 = la foto + su desregistro superpuestos,
   fila 2 = el pie. Así la copia roja NUNCA se come el pie de foto (el crédito
   al ilustrador quedaba ilegible: rojo sobre rojo). */
.vin{position:relative; display:grid; grid-template-columns:minmax(0,1fr); margin:0}
.vin__reg{display:none}                 /* el desregistro de imprenta se retiró (piel moderna) */
.vin__foto{grid-area:1 / 1; position:relative; z-index:1; display:block}
.vin__foto img{
  width:100%; border:var(--trazo) solid var(--carbon); border-radius:var(--r);
  background:var(--acero);
}
.vin figcaption{
  position:relative; z-index:1; margin-top:1rem; color:var(--gris);
  font-size:.875rem; line-height:1.5;
}

/* --- La barra cargada: el divisor no es un filete, es una olímpica --- */
.olimpica{display:flex; align-items:center; color:var(--carbon)}
.olimpica i{
  width:24px; height:24px; border-radius:50%; flex:none;
  border:3px solid currentColor; background:var(--rojo);
}
.olimpica span{flex:1; height:4px; background:currentColor}

/* --- Las piezas que flotan: la deriva va en un nodo, el parallax en otro --- */
.flota{display:block}
.flota > svg,.flota > img{width:100%; height:auto}

/* --- Botones --- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; justify-content:center;
  padding:.86rem 1.35rem; border-radius:var(--r); border:var(--trazo) solid var(--carbon);
  font-family:var(--txt); font-weight:700; font-size:1rem; line-height:1.15;
  text-decoration:none; cursor:pointer; background:var(--blanco); color:var(--tinta);
  transition:transform 150ms cubic-bezier(.2,.9,.25,1), background-color 150ms linear;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn--wa{background:var(--rojo-d); color:var(--blanco); border-color:var(--carbon)}
.btn--wa:hover{background:#9E1E25}
.btn--ghost{background:transparent}
.btn--ghost:hover{background:var(--acero)}
.btn--sm{padding:.62rem 1rem; font-size:.94rem; border-width:2px}
.btn svg{flex:none}

/* --- Etiqueta de sección --- */
.kicker{
  font-family:var(--txt); font-weight:500; font-size:.9rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--azul); margin:0 0 .7rem;
}
.h2{font-size:clamp(1.9rem,4.2vw,3rem)}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--tinta); max-width:62ch}

/* =====================================================================
   NAV — fondo sólido, filete de 2 px. SIN backdrop-filter.
   ===================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:70; height:var(--nav);
  background:var(--blanco); border-bottom:2px solid var(--carbon);
  display:flex; align-items:center;
}
.nav__in{width:var(--maxw); margin-inline:auto; display:flex; align-items:center; gap:1rem}
.nav__marca{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--tinta); margin-right:auto}
.nav__marca img{width:30px; height:33px}
.nav__marca b{font-family:var(--disp); font-weight:700; font-size:1.28rem; letter-spacing:-.02em}
.nav__links{display:flex; gap:1.35rem; align-items:center}
.nav__links a{
  color:var(--tinta); text-decoration:none; font-weight:500; font-size:.97rem;
  padding:.3rem 0; border-bottom:2px solid transparent;
}
.nav__links a:hover{border-bottom-color:var(--rojo)}
.hamb{
  display:none; width:44px; height:40px; align-items:center; justify-content:center;
  background:var(--blanco); border:2px solid var(--carbon); border-radius:var(--r); cursor:pointer;
}
.hamb span{display:block; width:20px; height:2px; background:var(--carbon); position:relative}
.hamb span::before,.hamb span::after{content:''; position:absolute; left:0; width:20px; height:2px; background:var(--carbon)}
.hamb span::before{top:-6px} .hamb span::after{top:6px}

/* Menú móvil — A PRUEBA DE FALLOS: por defecto OCULTO. */
.mobile-menu{
  display:none;
  position:fixed; inset:var(--nav) 0 0 0; z-index:69; background:var(--blanco);
  padding:1.6rem 6vw; flex-direction:column; gap:.2rem; overflow-y:auto;
}
.mobile-menu:not([hidden]){display:flex}
.mobile-menu a{
  color:var(--tinta); text-decoration:none; font-family:var(--disp); font-weight:600;
  font-size:1.6rem; padding:.75rem 0; border-bottom:2px solid var(--acero-d);
}
.mobile-menu .btn{margin-top:1.2rem}

@media (max-width:900px){
  .nav__links{display:none}
  .hamb{display:flex}
  .nav__cta{display:none}
}

/* =====================================================================
   §7.1 HERO — «La esquina, en capas»
   ===================================================================== */
/* Piel moderna: el hero pasa a carbón. La foto de la fachada de noche manda,
   el rojo queda de acento y desaparecieron los discos de contorno grueso. */
.hero{
  position:relative; padding-top:var(--nav); background:var(--carbon); color:var(--blanco);
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:stretch; column-gap:clamp(24px,4vw,64px);
  padding-left:max(24px,calc((100vw - var(--maxw)) / 2));
  overflow:hidden;                      /* el panel sangra por el borde derecho */
}
.hero__txt{padding:clamp(48px,6vw,84px) 0 clamp(54px,6vw,86px); position:relative; z-index:3; align-self:center}
.hero__kick{
  font-weight:500; font-size:.95rem; color:var(--azul-l); margin:0 0 1rem;
  letter-spacing:.01em; max-width:46ch;
}
.hero h1{font-size:clamp(2.35rem,5.2vw,4.05rem); margin:0 0 1.05rem; max-width:16ch}
.hero__lead{font-size:clamp(1.05rem,1.55vw,1.22rem); color:rgba(255,255,255,.8); max-width:52ch; margin:0 0 1.7rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.35rem}
.hero__confianza{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .95rem;
  font-size:.98rem; color:rgba(255,255,255,.62);
}
.sello-g{display:inline-flex; align-items:center; gap:.4rem; color:rgba(255,255,255,.9); font-weight:500}
.sello-g svg{color:var(--rojo)}
.hero__confianza .sep{color:rgba(255,255,255,.3)}
.hero .abierto{color:rgba(255,255,255,.9)}
.hero .abierto.si i{background:#39C46A}
/* el botón fantasma sobre carbón */
.hero .btn--ghost{color:var(--blanco); border-color:rgba(255,255,255,.42)}
.hero .btn--ghost:hover{background:rgba(255,255,255,.1)}
/* en columna el punto medio queda huérfano al final del renglón */
@media (max-width:620px){
  .hero__confianza{flex-direction:column; align-items:flex-start; gap:.45rem}
  .hero__confianza .sep{display:none}
}
.abierto{display:inline-flex; align-items:center; gap:.45rem; font-weight:500; color:var(--tinta)}
.abierto i{width:9px; height:9px; border-radius:50%; background:var(--gris); flex:none}
.abierto.si i{background:#1E8A3C}
.abierto.no i{background:var(--rojo-d)}

.hero__panel{position:relative; align-self:stretch; min-height:clamp(430px,62vh,660px)}
/* sobreancho del parallax ASIMETRICO: la capa solo se desplaza hacia ARRIBA
   (factor negativo, tope -60 px), asi que el margen util va abajo. Con -40 px
   arriba el letrero ROCAGYM, que en la foto arranca a 32 px del borde
   recortado, quedaba decapitado en reposo. */
.hero__panel .px{position:absolute; inset:-4px 0 -76px 0}
.hero__foto{position:absolute; inset:0}
.hero__foto::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg,rgba(20,22,26,.72) 0%,rgba(20,22,26,.12) 42%,transparent 70%);
}
.hero__foto picture{display:contents}
/* el encuadre baja hasta dejar fuera el aviso del negocio vecino que corona
   la terraza (arranca bajo el, sobre el letrero ROCAGYM y el primer piso) */
.hero__foto img{width:100%; height:100%; object-fit:cover; object-position:24% 50%}

/* piezas suspendidas del hero */
.hero__pieza{position:absolute; z-index:4; pointer-events:none}
.hero__pesa{left:-4%; bottom:5%; width:clamp(92px,10vw,152px)}
.hero__pesa img{width:100%; filter:drop-shadow(0 0 0 transparent)}
/* el disco grande sangra por el borde derecho: entra como fragmento y deja
   libre el aviso iluminado (antes se plantaba encima del edificio) */
.hero__disco-g{right:-7%; top:1%; width:clamp(165px,18vw,278px); z-index:1}
/* el disco pequeño baja al andén: arriba a la izquierda tapaba el aviso
   iluminado «ROCAGYM», que es justo lo que la foto tiene que enseñar */
.hero__disco-p{right:13%; bottom:6%; width:clamp(74px,8vw,118px); z-index:5}

@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr); padding-left:0; padding-bottom:0}
  .hero__txt{padding:clamp(30px,7vw,54px) 6vw clamp(26px,6vw,42px)}
  .hero__panel{min-height:clamp(340px,52vh,460px)}
  .hero__panel .px{inset:0}
  /* apaisado: la holgura vertical es enorme, 42 % deja el aviso vecino fuera
     de cuadro y conserva entero el letrero ROCAGYM */
  .hero__foto img{object-position:50% 6%}
  .hero__pesa{left:auto; right:4%; bottom:auto; top:-52px; width:clamp(112px,30vw,160px)}
  .hero__disco-g{display:none}
  .hero__disco-p{left:4%; right:auto; top:auto; bottom:14px; width:64px}
}
/* en telefono entra facade-noche-movil.webp, ya recortado bajo el aviso del
   vecino y con la proporcion del panel: se muestra entero, sin desplazamiento */
@media (max-width:620px){
  .hero__foto img{object-position:50% 50%}
  /* con el encuadre nuevo el letrero ROCAGYM sube al borde superior: la pesa
     suspendida le tapaba la M. Baja al anden, que es zona vacia de la foto. */
  .hero__pesa{right:5%; top:auto; bottom:7%; width:clamp(104px,26vw,146px)}
  .hero__disco-p{left:5%; bottom:9%; width:60px}
}

/* =====================================================================
   §7.3 Banda answer-first
   ===================================================================== */
.answer{background:var(--carbon); color:var(--blanco); padding:clamp(46px,6vw,74px) 0}
.answer p{
  font-family:var(--disp); font-weight:600; font-size:clamp(1.35rem,2.5vw,2.13rem);
  line-height:1.28; margin:0 0 1.6rem; max-width:46ch; letter-spacing:-.02em;
}
.answer em{font-style:normal; color:var(--azul-l)}
.answer .olimpica{color:var(--blanco); max-width:min(100%,700px)}

/* =====================================================================
   §7.4 La regla del día — el horario dibujado a escala
   ===================================================================== */
.reloj{background:var(--acero); padding:clamp(56px,7vw,96px) 0; position:relative; overflow:hidden}
.reloj__fantasma{
  position:absolute; right:-90px; top:8%; width:min(46vw,430px); z-index:0;
  color:var(--acero-d); pointer-events:none;
}
.reloj .wrap{position:relative; z-index:1}
.reloj__head{max-width:58ch; margin-bottom:clamp(28px,4vw,46px)}
.reloj__head p{color:var(--tinta); margin-top:1rem}

.riel-scroll{overflow-x:auto; overflow-y:hidden; scroll-padding-inline:18px; padding-bottom:6px; -webkit-overflow-scrolling:touch}
.riel{min-width:640px; position:relative}
.riel__horas{position:relative; height:26px; margin-left:var(--lab,168px); border-bottom:2px solid var(--carbon)}
.riel__h{position:absolute; top:0; transform:translateX(-50%); font-size:.8rem; color:var(--gris);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.riel__h::after{content:''; position:absolute; left:50%; bottom:-8px; width:2px; height:7px; background:var(--carbon)}
/* la última hora (10 p. m., al 100 %) se salía del riel y quedaba cortada */
.riel__h:last-child{transform:translateX(-100%)}
.riel__h:last-child::after{left:auto; right:0}

.franja{display:grid; grid-template-columns:var(--lab,168px) minmax(0,1fr); align-items:center; gap:0; margin-top:14px}
.franja__lab{font-weight:500; font-size:.95rem; padding-right:14px; color:var(--tinta)}
.franja__lab b{display:block; font-family:var(--disp); font-weight:600; font-size:1.02rem}
.franja__lab span{font-variant-numeric:tabular-nums; color:var(--gris); font-size:.86rem}
.franja__pista{position:relative; height:34px; background:var(--blanco); border:2px solid var(--acero-d); border-radius:4px}
.franja__barra{
  position:absolute; top:-2px; bottom:-2px; border:2px solid var(--carbon); border-radius:4px;
  left:var(--a); right:calc(100% - var(--b));
  transform-origin:left center;
}
html.is-anim .franja__barra{transform:scaleX(0)}
html.is-anim [data-r].in .franja__barra{animation:cargar 620ms cubic-bezier(.2,.9,.25,1) both; animation-delay:calc(var(--i,0)*90ms + 120ms)}
@keyframes cargar{0%{transform:scaleX(0)}72%{transform:scaleX(1.012)}100%{transform:scaleX(1)}}
.franja--lv .franja__barra{background:var(--rojo-d)}
.franja--sa .franja__barra{background:var(--azul)}
.franja--do .franja__barra,.franja--fe .franja__barra{background:var(--azul); opacity:.8}
.clases-seg{
  position:absolute; top:3px; bottom:3px; left:var(--a); right:calc(100% - var(--b));
  /* relleno azul, no blanco: un hueco calado sobre la barra roja se leia como
     «cerrado a esa hora», justo lo contrario de lo que marca */
  background:var(--azul); border:2px solid var(--carbon); border-radius:3px; z-index:2;
}
.clases-rot{
  position:absolute; left:var(--a); top:-30px; transform:translateX(-42%);
  font-size:.78rem; font-weight:500; color:var(--carbon); white-space:nowrap; z-index:3;
}
.franja--lv{margin-top:42px}          /* aire para el rótulo de las clases */
.riel__ahora{
  display:none;
  position:absolute; top:26px; bottom:0; width:2px; background:var(--carbon); z-index:6;
  left:calc(var(--lab,168px) + (100% - var(--lab,168px)) * var(--xf,0));
}
.riel__ahora:not([hidden]){display:block}
.riel__ahora b{
  position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  background:var(--carbon); color:var(--blanco); font-size:.72rem; font-weight:500;
  padding:.15rem .45rem; border-radius:3px; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* si «ahora» cae cerca del cierre, la etiqueta se ancla hacia dentro
   (a las 9:41 p. m. se salía del riel y se leía «ahora · 9:4») */
.riel__ahora.fin b{left:auto; right:0; transform:none}
.riel__ahora.ini b{left:0; transform:none}
.reloj__pie{margin-top:clamp(26px,3.6vw,40px); max-width:60ch; color:var(--tinta)}

@media (max-width:700px){
  .riel{--lab:120px}
  .franja__lab{font-size:.88rem}
}

/* =====================================================================
   §7.5 La cartelera — planes y precios
   ===================================================================== */
/* =====================================================================
   §7.5 PLANES — columnas sobre la foto de la terraza, en carbón.
   El precio manda (Oswald grande), la lista es la letra chica honesta y la
   tabla completa queda a un clic para no perder ningún dato de la cartelera.
   ===================================================================== */
.planes{position:relative; padding:clamp(64px,8vw,110px) 0; background:var(--carbon); color:var(--blanco); overflow:hidden}
.planes__fondo{position:absolute; inset:0; z-index:0; display:block}
.planes__fondo img{width:100%; height:100%; object-fit:cover; opacity:.5; filter:grayscale(.25) contrast(1.06)}
.planes__fondo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,22,26,.9) 0%,rgba(20,22,26,.62) 40%,rgba(20,22,26,.94) 100%);
}
.planes__in{position:relative; z-index:1}
.planes__head{max-width:56ch; margin-bottom:clamp(30px,4vw,50px)}
.planes h2{color:var(--blanco)}
.planes__lead{color:rgba(255,255,255,.78); margin-top:1rem; max-width:56ch}
.kicker--claro{color:var(--azul-l)}

.planes__cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,24px); align-items:stretch}
.plan-card{
  display:flex; flex-direction:column; background:#1B1E24; border:1px solid #2B3038;
  border-radius:var(--r); padding:clamp(1.4rem,2.4vw,2rem); position:relative;
}
.plan-card--top{
  background:#20242B; border-color:var(--rojo-d);
  box-shadow:0 18px 44px rgba(0,0,0,.4);
}
.plan-card__cinta{
  position:absolute; top:-1px; right:clamp(1rem,2vw,1.6rem); transform:translateY(-50%);
  background:var(--rojo-d); color:var(--blanco); border-radius:100px;
  font-family:var(--disp); font-weight:600; font-size:.76rem; letter-spacing:.09em;
  text-transform:uppercase; padding:.32rem .8rem; margin:0; white-space:nowrap;
}
.plan-card__nom{
  font-size:clamp(1.15rem,1.9vw,1.45rem); text-transform:uppercase; letter-spacing:.06em;
  color:rgba(255,255,255,.82); margin:0 0 .5rem; font-weight:600;
}
.plan-card__precio{
  font-family:var(--disp); font-weight:700; font-size:clamp(2.3rem,4.6vw,3.3rem); line-height:1;
  font-variant-numeric:tabular-nums; color:var(--blanco); margin:0;
}
.plan-card__mes{
  font-size:.95rem; color:var(--azul-l); margin:.4rem 0 1.3rem; font-weight:500;
  font-variant-numeric:tabular-nums;
}
.plan-card__lista{list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:.55rem}
.plan-card__lista li{
  position:relative; padding-left:1.5rem; font-size:.95rem; color:rgba(255,255,255,.78); line-height:1.45;
}
.plan-card__lista li::before{
  content:''; position:absolute; left:0; top:.42em; width:9px; height:9px; border-radius:50%;
  background:var(--rojo);
}
.plan-card__nota{font-size:.9rem; color:rgba(255,255,255,.55); margin:0 0 1.4rem}
.plan-card .btn{margin-top:auto; width:100%; justify-content:center}
.plan-card .btn--wa{border-color:var(--rojo-d)}

.planes__todos{margin-top:clamp(22px,3vw,34px); border-top:1px solid #2B3038; border-bottom:1px solid #2B3038}
.planes__todos summary{
  list-style:none; cursor:pointer; padding:1rem 0; font-family:var(--disp); font-weight:600;
  font-size:1.02rem; letter-spacing:.04em; text-transform:uppercase; color:var(--blanco);
  display:flex; align-items:center; gap:.7rem;
}
.planes__todos summary::-webkit-details-marker{display:none}
.planes__todos summary::after{
  content:''; width:10px; height:10px; margin-left:auto;
  border-right:2px solid var(--rojo); border-bottom:2px solid var(--rojo);
  transform:rotate(45deg); transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.planes__todos[open] summary::after{transform:rotate(-135deg)}
.planes__tabla{overflow-x:auto; padding-bottom:1.1rem}
.planes__tabla table{width:100%; border-collapse:collapse; min-width:280px}
.planes__tabla th{
  text-align:left; font-weight:400; color:rgba(255,255,255,.78); padding:.6rem 0;
  border-top:1px solid #2B3038; font-size:.98rem;
}
.planes__tabla td{
  text-align:right; padding:.6rem 0; border-top:1px solid #2B3038;
  font-family:var(--disp); font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--blanco); font-size:1.05rem;
}
.planes__pie{margin-top:1.4rem; font-size:.9rem; color:rgba(255,255,255,.6); line-height:1.6; max-width:70ch}
.planes__pie b{color:rgba(255,255,255,.86); font-weight:500}

@media (max-width:900px){ .planes__cols{grid-template-columns:minmax(0,1fr)} }

/* enunciado limpio (antes: estallido de cómic) */
.enunciado{
  margin:0 0 1.6rem; padding:0 0 0 clamp(14px,2vw,20px);
  border-left:4px solid var(--rojo); color:var(--tinta);
  font-family:var(--disp); font-weight:600; font-size:clamp(1.3rem,3vw,2.1rem);
  line-height:1.14; text-transform:uppercase; letter-spacing:.01em; text-wrap:balance;
}

/* =====================================================================
   §7.6 «No necesitas saber entrenar»
   ===================================================================== */
.ensenamos{padding:clamp(58px,7vw,100px) 0; background:var(--blanco); overflow:hidden}
.ensenamos__grid{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(38px,5vw,64px); align-items:center}
@media (min-width:960px){ .ensenamos__grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)} }
.ensenamos__col{position:relative}
.eco-pesa{position:absolute; right:-2%; top:-46px; width:clamp(90px,10vw,140px); z-index:0; opacity:.9; pointer-events:none}
.ensenamos__txt{position:relative; z-index:1}

.lema-muro{
  font-family:var(--disp); font-weight:600; font-size:clamp(1.15rem,2vw,1.55rem);
  color:var(--tinta); margin:0 0 1.2rem; letter-spacing:-.02em;
}
.linea-datos{
  display:flex; flex-wrap:wrap; gap:.35rem .8rem; align-items:baseline;
  font-size:.95rem; color:var(--gris); margin:1.4rem 0 1.5rem; line-height:1.55;
}
.linea-datos b{color:var(--tinta); font-weight:500}
/* los dos datos son largos: siempre parten en dos renglones y el punto medio
   quedaba huérfano al final del primero. Se apilan y el separador sobra. */
.linea-datos{flex-direction:column; gap:.3rem}
.linea-datos .sep{display:none}

/* =====================================================================
   §7.7 Las noches de clase
   ===================================================================== */
.clases{background:var(--acero); padding:clamp(56px,7vw,96px) 0 clamp(56px,7vw,96px); overflow:hidden}
.clases__grid{
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(34px,4.6vw,60px); align-items:center;
  width:var(--maxw); margin-inline:auto;
}
@media (min-width:960px){
  /* texto a la izquierda, foto a la derecha: el orden del HTML deja la foto
     primero (para que en móvil abra con la imagen) y aquí se invierte */
  .clases__grid{grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr)}
  .clases__foto{order:2}
  .clases__txt{order:1}
}
/* La foto ya NO sangra por el borde izquierdo: se alinea con el mismo eje que
   el resto de la página (antes arrancaba pegada al borde y se leía torcida). */
.clases__foto .vin__foto img{border-radius:var(--r)}
.renglones{border-top:2px solid var(--carbon)}
.renglon{
  display:flex; align-items:baseline; gap:1rem; padding:.95rem .5rem;
  border-bottom:2px solid var(--carbon); transition:background-color 160ms linear;
}
.renglon b{
  font-family:var(--disp); font-weight:600; font-size:clamp(1.2rem,2vw,1.6rem);
  min-width:5.6em; letter-spacing:-.02em; transition:transform 180ms cubic-bezier(.2,.9,.25,1);
}
.renglon span{font-size:1.02rem; color:var(--tinta)}
.renglon:hover,.renglon:focus-within{background:rgba(27,62,155,.08)}
.renglon:hover b,.renglon:focus-within b{transform:translateX(6px)}
.clases__cierre{margin-top:1.3rem; color:var(--gris); font-size:.95rem}

/* =====================================================================
   §7.9 La esquina
   ===================================================================== */
.esquina{padding:clamp(58px,7vw,100px) 0; background:var(--carbon); color:var(--blanco); overflow:hidden}
.esquina h2{color:var(--blanco)}
.esquina__grid{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(34px,4.4vw,58px); align-items:center}
@media (min-width:960px){ .esquina__grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)} }

/* ---- Tarjeta que se voltea (frente: datos · dorso: mapa) ----------------
   Las dos caras se apilan en la MISMA celda de grid, así que el alto del
   bloque es el de la cara más alta y no salta al voltear. El botón lo pone
   main.js: sin JS no hay botón, se ve la ficha normal y el mapa sigue a un
   clic de distancia por el enlace «Abrir en Google Maps».                 */
.volteo{perspective:1600px}
.volteo__in{
  display:grid; transform-style:preserve-3d;
  transition:transform 700ms cubic-bezier(.3,.9,.25,1);
}
.volteo.gira .volteo__in{transform:rotateY(180deg)}
.volteo__cara{
  grid-area:1 / 1; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:opacity 200ms linear;
}
.volteo__cara--dorso{transform:rotateY(180deg)}
/* la cara que no se ve también queda fuera del tabulador (lo hace main.js con
   inert / aria-hidden); esto sólo evita que se transparente en Safari */
.volteo:not(.gira) .volteo__cara--dorso,
.volteo.gira .volteo__cara--frente{opacity:0}
.ficha{
  background:#1B1E24; border:1px solid #2B3038; border-radius:var(--r);
  padding:clamp(22px,3vw,32px); height:100%;
}
.ficha--mapa{display:flex; flex-direction:column; padding:clamp(14px,1.8vw,18px)}
.ficha__h{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.8rem}
.ficha__dir{margin:0 0 .9rem; font-size:1.04rem; color:rgba(255,255,255,.8)}
.ficha__tm{
  color:var(--azul-l); font-weight:500; margin:0 0 1.3rem; font-size:1.04rem;
  display:flex; gap:.55rem; align-items:flex-start;
}
.ficha__tm svg{flex:none; margin-top:.22rem}
.horario{list-style:none; margin:0 0 1.3rem; padding:0; border-top:1px solid #2B3038}
.horario li{
  display:flex; justify-content:space-between; gap:1rem; padding:.5rem .1rem;
  border-bottom:1px solid #2B3038; font-variant-numeric:tabular-nums; font-size:.99rem;
  color:rgba(255,255,255,.8);
}
.horario li b{font-weight:500; color:var(--blanco)}
.horario li.hoy{background:rgba(110,155,232,.14); font-weight:700; padding-inline:.5rem; border-radius:3px}
.horario li.hoy b::after{content:' · hoy'; color:var(--azul-l); font-weight:500; font-size:.86em}
.ficha__acc{font-size:.95rem; color:rgba(255,255,255,.55); margin:0 0 1.4rem}
.ficha__cta{display:flex; flex-wrap:wrap; gap:.6rem}
.esquina .btn--ghost{color:var(--blanco); border-color:rgba(255,255,255,.42)}
.esquina .btn--ghost:hover{background:rgba(255,255,255,.1)}
.ver-mapa{margin-top:0}
.mapa{
  flex:1; min-height:clamp(300px,38vw,440px); border-radius:calc(var(--r) - 2px);
  overflow:hidden; background:#20242B; display:grid; place-items:center;
}
.mapa iframe{width:100%; height:100%; min-height:inherit; border:0; display:block}

@media (prefers-reduced-motion:reduce){
  .volteo__in{transition:none}
  .volteo.gira .volteo__in{transform:none}
  .volteo.gira .volteo__cara--dorso{transform:none}
  .volteo:not(.gira) .volteo__cara--dorso{display:none}
  .volteo.gira .volteo__cara--frente{display:none}
}

/* =====================================================================
   §7.10 Preguntas
   ===================================================================== */
.faq{padding:clamp(58px,7vw,100px) 0; background:var(--blanco)}
.faq__in{max-width:min(100%,760px); margin-inline:auto}
.faq h2{margin-bottom:clamp(24px,3vw,38px)}
.q{border:2px solid var(--carbon); border-radius:var(--r); margin-bottom:.7rem; background:var(--blanco)}
.q summary{
  list-style:none; cursor:pointer; padding:1rem 3rem 1rem 1.15rem; position:relative;
  font-family:var(--disp); font-weight:600; font-size:1.06rem; letter-spacing:-.01em; line-height:1.35;
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:''; position:absolute; right:1.15rem; top:1.35rem; width:14px; height:14px;
  border-right:3px solid var(--carbon); border-bottom:3px solid var(--carbon);
  transform:rotate(45deg); transition:transform 200ms cubic-bezier(.2,.9,.25,1);
}
.q[open] summary::after{transform:rotate(225deg); top:1.6rem}
.q[open] summary{background:var(--acero)}
.q__a{padding:.15rem 1.15rem 1.1rem; color:var(--tinta)}
.q__a p{margin:0 0 .7rem} .q__a p:last-child{margin:0}
.q__a em{font-style:italic}

/* =====================================================================
   Footer
   ===================================================================== */
.foot{background:var(--carbon); color:#D9DEE6; padding:clamp(48px,6vw,78px) 0 clamp(28px,3vw,40px)}
.foot a{color:#CFE0FF}
.foot__grid{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,3.4vw,48px)}
@media (min-width:760px){ .foot__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)} }
.foot__marca{display:flex; align-items:center; gap:.65rem; margin-bottom:.9rem}
.foot__marca img{width:38px; height:42px}
.foot__marca b{font-family:var(--disp); font-weight:700; font-size:1.4rem; color:var(--blanco); letter-spacing:-.02em}
.foot h3{font-size:1rem; color:var(--blanco); margin-bottom:.7rem; font-family:var(--txt); font-weight:700}
.foot p,.foot li{font-size:.95rem; line-height:1.65}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{padding:.16rem 0; font-variant-numeric:tabular-nums}
.foot__redes{display:flex; gap:.6rem; margin-top:.9rem}
.foot__redes a{
  display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .8rem; border-radius:var(--r);
  border:2px solid #3A3F49; text-decoration:none; color:#D9DEE6; font-size:.9rem; font-weight:500;
}
.foot__redes a:hover{border-color:var(--azul-l); color:var(--blanco)}
.foot__firma{
  margin-top:clamp(30px,3.6vw,48px); padding-top:1.2rem; border-top:2px solid #2A2F38;
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; justify-content:space-between;
  font-size:.9rem; color:#98A1AE;
}

/* =====================================================================
   FAB + modal QR de WhatsApp
   ===================================================================== */
.fab{
  position:fixed; right:clamp(14px,2.5vw,26px); bottom:clamp(14px,2.5vw,26px); z-index:66;
  display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.15rem;
  background:var(--rojo-d); color:var(--blanco); border:var(--trazo) solid var(--carbon);
  border-radius:999px; font-weight:700; font-size:.98rem; text-decoration:none; cursor:pointer;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity 220ms linear, transform 260ms cubic-bezier(.2,.9,.25,1);
}
.fab.show{opacity:1; transform:translateY(0); pointer-events:auto}
.fab:hover{background:#9E1E25}
.fab svg{flex:none}

.wa-modal{
  display:none;
  position:fixed; inset:0; z-index:90; place-items:center; padding:20px;
  background:rgba(20,22,26,.72);
}
.wa-modal:not([hidden]){display:grid}
.wa-card{
  background:var(--blanco); border:var(--trazo) solid var(--carbon); border-radius:var(--r);
  padding:clamp(22px,3vw,32px); max-width:400px; width:100%; text-align:center; position:relative;
}
.wa-card h3{font-size:1.24rem; margin-bottom:.5rem}
.wa-card p{font-size:.94rem; color:var(--gris); margin-bottom:1rem}
.wa-card .qr{
  display:flex; align-items:center; justify-content:center; min-height:180px;
  background:var(--blanco); border:2px solid var(--acero-d); border-radius:var(--r);
  padding:12px; margin-bottom:1rem;
}
.wa-card .qr img{width:186px; height:186px; image-rendering:pixelated}
.wa-card .prev{
  font-size:.86rem; color:var(--gris); background:var(--acero); border-radius:var(--r);
  padding:.6rem .8rem; margin-bottom:1rem; text-align:left; line-height:1.5;
}
.wa-x{
  position:absolute; top:8px; right:8px; width:38px; height:38px; border-radius:var(--r);
  background:transparent; border:2px solid transparent; cursor:pointer; color:var(--tinta);
  font-size:1.4rem; line-height:1;
}
.wa-x:hover{border-color:var(--carbon)}

/* ---------- Print / soporte ---------- */
@media print{ .nav,.fab,.wa-modal,.mobile-menu{display:none!important} }

/* =====================================================================
   Sujeción del eje horizontal — el parallax mueve en Y, así que preferimos
   `overflow-x:clip` (no recorta el movimiento vertical). `hidden` queda de
   respaldo para motores sin `clip`.
   ===================================================================== */
.ensenamos,.clases,.esquina{overflow:hidden}
@supports (overflow-x:clip){
  .ensenamos,.clases,.esquina{overflow-x:clip; overflow-y:visible}
}