/* Megacenter Gym — referencias aprobadas: Third Space (la sala y sus luces sobre negro) y
   Psycle (titular blanco, una palabra en el color de marca). El amarillo sale del logo
   con pipeta y va SOLO como acento: línea, número, palabra, estado activo. */

:root {
  --amarillo: #f1d833;
  --negro: #0a0a0b;
  --carbon: #121214;
  --grafito: #1b1b1f;
  --linea: #2a2a30;
  --blanco: #f4f4f1;
  --gris: #a3a3a8;
  --tenue: #6e6e75;
  --redondeo: 18px;
  --tit: 'Archivo', system-ui, sans-serif;
  --txt: 'Inter', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --marco: 1240px;
  --cab: 78px;
  --curva: cubic-bezier(.22,.68,0,1);
  --glow: 0 0 6px rgba(255,255,255,.55), 0 0 22px rgba(255,255,255,.18);
  --glow-a: 0 0 6px rgba(241,216,51,.75), 0 0 26px rgba(241,216,51,.35), 0 0 60px rgba(241,216,51,.18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--negro); }
body { margin: 0; background: var(--negro); color: var(--blanco); font: 400 17px/1.65 var(--txt); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--tit); font-variation-settings: "wdth" 118; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.3vw, 58px); }
h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
h1 em, h2 em, .cita em { font-style: normal; color: var(--amarillo); }
p { margin: 0; }
.mono { font-family: var(--mono); }
.marco { width: min(var(--marco), 100% - 64px); margin-inline: auto; }
section { padding: clamp(76px, 9vw, 130px) 0; }
.rotulo { font: 500 11.5px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--amarillo); }
.lead { font-size: 18.5px; line-height: 1.6; color: var(--gris); max-width: 46ch; margin-top: 22px; text-wrap: pretty; }
.lead b { color: var(--blanco); font-weight: 600; }
.baj { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: rgba(244,244,241,.82); max-width: 44ch; margin-top: 24px; text-wrap: pretty; }
.acc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.dos.arriba { align-items: start; }
.sec-tit { margin-bottom: clamp(36px, 5vw, 60px); }
.sec-tit h2 { margin-top: 16px; max-width: 18ch; }
.solo-cel { display: none; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 99px; font: 600 16px/1 var(--txt); text-decoration: none; border: 1.5px solid transparent; transition: background .35s var(--curva), color .35s var(--curva), border-color .35s var(--curva), transform .35s var(--curva), box-shadow .35s var(--curva); cursor: pointer; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 20px; height: 20px; }
.btn-a { background: var(--amarillo); color: #111; }
.btn-a:hover { box-shadow: 0 0 0 4px rgba(241,216,51,.16), 0 10px 30px -8px rgba(241,216,51,.55); }
.btn-b { border-color: rgba(244,244,241,.28); color: var(--blanco); background: rgba(10,10,11,.3); backdrop-filter: blur(6px); }
.btn-b:hover { border-color: var(--blanco); background: var(--blanco); color: #111; }
.btn-chico { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn-chico svg { width: 18px; height: 18px; }
.flecha { transition: transform .25s; display: inline-block; }
.btn:hover .flecha, .link-a:hover .flecha { transform: translateX(4px); }
.link-a { display: inline-block; margin-top: 18px; color: var(--amarillo); text-decoration: none; font-weight: 500; }

/* ---------- encabezado ---------- */
.barra { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--amarillo); box-shadow: 0 0 10px var(--amarillo); z-index: 60; }
.cab { position: fixed; inset: 0 0 auto; height: var(--cab); z-index: 50; background: linear-gradient(180deg, rgba(10,10,11,.7), rgba(10,10,11,0)); border-bottom: 1px solid transparent; transition: transform .35s, height .3s, background .3s, border-color .3s; }
.cab .in { height: 100%; display: flex; align-items: center; gap: 34px; }
.logo img { height: 40px; width: auto; transition: height .3s; }
.menu { display: flex; gap: 30px; margin-left: auto; }
.menu a { text-decoration: none; font-weight: 500; font-size: 15.5px; position: relative; padding: 6px 0; color: rgba(244,244,241,.86); }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--amarillo); box-shadow: 0 0 8px var(--amarillo); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.menu a:hover, .menu a[aria-current] { color: var(--blanco); }
.menu a:hover::after, .menu a[aria-current]::after { transform: scaleX(1); }
.cab.compacta { height: 64px; background: rgba(10,10,11,.88); backdrop-filter: blur(14px); border-color: var(--linea); }
.cab.compacta .logo img { height: 32px; }
.cab.oculta { transform: translateY(-100%); }
.menu-btn, .menu-cel { display: none; }
main { padding-top: var(--cab); }
.p-index main { padding-top: 0; }

/* ---------- hero: la sala a sangre, tres fotos que se funden despacio ---------- */
.hero { position: relative; min-height: 100svh; padding: 0; display: flex; align-items: flex-end; overflow: hidden; background: var(--negro); }
.hero-foto { position: absolute; inset: 0; overflow: hidden; }
.hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.8s ease, transform 9s linear; }
.hero-foto img.on { opacity: 1; transform: scale(1); }
.hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,11,.9) 0%, rgba(10,10,11,.72) 40%, rgba(10,10,11,.25) 72%, rgba(10,10,11,.12) 100%), linear-gradient(0deg, rgba(10,10,11,.95) 0%, rgba(10,10,11,0) 45%); }
.hero-txt { position: relative; padding: calc(var(--cab) + 60px) 0 clamp(64px, 10vh, 120px); }
.sube { opacity: 1; }
.anima .sube { animation: sube .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 140ms + 1500ms); }
.anima .sube[style*="--i:0"] { animation-delay: 150ms; }
@keyframes sube { from { opacity: 0; transform: translateY(18px); } }

/* EL SELLO: el titular es un tubo de neón que se prende. Encendido es el estado por
   defecto (sin JS se lee entero); mueve.js lo apaga y lo enciende con el parpadeo. */
.neon { font-size: clamp(50px, 8.2vw, 124px); line-height: .96; margin-top: 20px; font-variation-settings: "wdth" 122; font-weight: 800; letter-spacing: -.035em; }
.tubo { display: block; color: #fff; text-shadow: var(--glow); transition: color .05s, text-shadow .05s; }
.tubo em { font-style: normal; color: var(--amarillo); text-shadow: var(--glow-a); }
.neon.apagado .tubo:not(.luz), .neon.apagado .tubo:not(.luz) em { color: rgba(244,244,241,.07); text-shadow: none; -webkit-text-stroke: 1px rgba(244,244,241,.14); }
.neon .tubo.parpadea, .neon .tubo.parpadea em { color: rgba(244,244,241,.3); text-shadow: none; }

/* ---------- entrada por sección ---------- */
/* sin desenfoque: el texto tiene que poder leerse en cuanto aparece */
.anima .entra { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--curva), transform .8s var(--curva); }
.anima .entra.dentro { opacity: 1; transform: none; }
.anima .entra-foto { opacity: 0; transform: scale(.975); clip-path: inset(8% 0 0 0 round var(--redondeo)); transition: opacity .8s var(--curva), transform 1s var(--curva), clip-path 1s var(--curva); }
.anima .entra-foto.dentro { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round var(--redondeo)); }

/* ---------- números ---------- */
.numeros { padding: clamp(56px, 7vw, 90px) 0; border-bottom: 1px solid var(--linea); }
.numeros .marco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.num b { display: block; font: 800 clamp(64px, 8vw, 118px)/.9 var(--tit); font-variation-settings: "wdth" 125; color: var(--amarillo); text-shadow: 0 0 30px rgba(241,216,51,.25); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.num span { display: block; margin-top: 16px; color: var(--gris); font-size: 15.5px; max-width: 24ch; border-top: 1px solid var(--linea); padding-top: 14px; }

/* ---------- qué hay adentro: la lista manda y la foto acompaña ---------- */
.adentro-rej { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.filas { list-style: none; margin: 0; padding: 0; }
.fila { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 26px 0 26px; border-top: 1px solid var(--linea); cursor: default; outline: none; }
.fila:last-child { border-bottom: 1px solid var(--linea); }
.fila::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--amarillo); box-shadow: 0 0 10px var(--amarillo); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--curva); }
.fila-k { color: var(--tenue); font-size: 13px; padding-top: 6px; transition: color .3s; }
.fila-txt { transition: transform .45s var(--curva); }
.fila h3 { font-size: clamp(24px, 2.4vw, 34px); color: rgba(244,244,241,.55); transition: color .35s; }
.fila p { color: var(--gris); margin-top: 8px; font-size: 16px; max-width: 40ch; }
.fila.on::before { transform: scaleX(1); }
.fila.on h3 { color: var(--blanco); }
.fila.on .fila-k { color: var(--amarillo); }
@media (hover: hover) { .fila.on .fila-txt { transform: translateX(12px); } }
.fila-foto { display: none; margin: 0; }
.adentro-foto { position: sticky; top: 110px; border-radius: var(--redondeo); overflow: hidden; aspect-ratio: 16 / 10; background: var(--carbon); }
.adentro-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform 1.2s var(--curva); }
.adentro-foto img.on { opacity: 1; transform: none; }

/* ---------- reseñas: cita tipográfica integrada, nunca tarjeta ---------- */
.resena { margin: 38px 0 0; padding: 0; max-width: 40ch; }
.resena-ancha { max-width: 52ch; margin-top: 56px; }
.resena blockquote { margin: 0; font: 500 clamp(20px, 2vw, 26px)/1.35 var(--tit); font-variation-settings: "wdth" 100; letter-spacing: -.02em; text-indent: -.42em; text-wrap: pretty; }
.resena blockquote::before { content: "“"; color: var(--amarillo); }
.resena blockquote::after { content: "”"; color: var(--amarillo); }
.resena figcaption { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.resena .cara { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; }
.resena .cara img { width: 100%; height: 100%; object-fit: cover; }
.resena .quien { display: flex; align-items: baseline; gap: 8px; }
.resena .quien b { font-size: 15px; font-weight: 600; }
.resena .quien span { font: 400 12px var(--mono); color: var(--tenue); }
.estrellas { display: flex; gap: 2px; }
.estrellas svg { width: 13px; height: 13px; fill: var(--amarillo); }
.enlace-g { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font: 400 12px var(--mono); color: var(--gris); padding: 5px 10px; border-radius: 99px; background: var(--grafito); transition: background .3s; }
.enlace-g:hover { background: var(--linea); }
.enlace-g svg { width: 13px; height: 13px; }

/* ---------- lo dicen los socios: una reseña por vez, las caras se prenden ----------
   Nada de tarjetas ni muro (rechazado dos veces en Acapulcopark): la cita es tipografía
   grande y la cara activa se enciende con el mismo neón del titular. */
.socios { border-top: 1px solid var(--linea); }
.socios-cab { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.socios-cab h2 { margin-top: 16px; max-width: 15ch; }
.socios-cab h2 em { text-shadow: var(--glow-a); }
.repiten-t { color: var(--gris); font-size: 15px; max-width: 40ch; }
.repiten ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.repiten li { display: grid; grid-template-columns: 11.5em 1fr 2.2em; gap: 14px; align-items: center; font-size: 15px; }
.repiten i { position: relative; height: 4px; border-radius: 4px; background: var(--grafito); overflow: hidden; }
.repiten i::after { content: ""; position: absolute; inset: 0; background: var(--amarillo); box-shadow: 0 0 12px var(--amarillo); border-radius: 4px; transform-origin: left; transform: scaleX(var(--p)); }
.anima .repiten i::after { transform: scaleX(0); transition: transform 1.4s var(--curva); }
.anima .socios.dentro .repiten li:nth-child(1) i::after { transition-delay: .1s; }
.anima .socios.dentro .repiten li:nth-child(2) i::after { transition-delay: .25s; }
.anima .socios.dentro .repiten li:nth-child(3) i::after { transition-delay: .4s; }
.anima .socios.dentro .repiten li:nth-child(4) i::after { transition-delay: .55s; }
.anima .socios.dentro .repiten i::after { transform: scaleX(var(--p)); }
.repiten b { color: var(--amarillo); font-weight: 500; text-align: right; }

.foco { display: grid; gap: clamp(30px, 4vw, 48px); }
.foco-top { display: grid; grid-template-columns: clamp(200px, 22vw, 300px) 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.foco-grande { position: relative; aspect-ratio: 1; border-radius: 50%; }
.foco-grande img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 50%; object-fit: cover; opacity: 0; transform: scale(.94); transition: opacity .6s var(--curva), transform .8s var(--curva); }
.foco-grande img.on { opacity: 1; transform: none; }
.foco-grande .aro { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.foco-grande .aro circle { fill: none; stroke: var(--amarillo); stroke-width: 1.6; filter: drop-shadow(0 0 5px var(--amarillo)) drop-shadow(0 0 18px rgba(241,216,51,.55)); transition: stroke-opacity .05s; }
.foco-grande.chispa .aro circle { stroke-opacity: .12; filter: none; }
.foco-citas { display: grid; font-size: clamp(26px, 2.8vw, 38px); }
.foco-cita { grid-area: 1 / 1; margin: 0; align-self: start; opacity: 0; transform: translateY(18px); filter: blur(8px); transition: opacity .6s var(--curva), transform .8s var(--curva), filter .6s var(--curva); pointer-events: none; }
.foco-cita.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.foco-cita blockquote { margin: 0; font: 500 1em/1.22 var(--tit); font-variation-settings: "wdth" 104; letter-spacing: -.028em; max-width: 34ch; text-wrap: pretty; color: rgba(244,244,241,.78); }
.foco-cita blockquote em { font-style: normal; color: var(--amarillo); text-shadow: var(--glow-a); }
.foco-cita figcaption { margin-top: 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 16px; }
.foco-cita figcaption b { font-weight: 600; }
.foco-cita figcaption .mono { font-size: 12px; color: var(--tenue); }
.foco-caras { display: flex; gap: 14px; flex-wrap: wrap; }
.foco-cara { --t: 0; position: relative; width: 66px; height: 66px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .45s var(--curva); }
.foco-cara img { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 50%; object-fit: cover; filter: grayscale(1) brightness(.55); transition: filter .5s var(--curva); }
.foco-cara:hover img { filter: grayscale(.3) brightness(.85); }
.foco-cara .aro { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.foco-cara .aro circle { fill: none; stroke: var(--linea); stroke-width: 2.5; }
.foco-cara.on { transform: scale(1.14); }
.foco-cara.on img { filter: none; }
/* el aro del activo es el neón que se prende, y además cuenta el tiempo hasta la siguiente */
.foco-cara.on .aro circle { stroke: var(--amarillo); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 295.3; stroke-dashoffset: calc(295.3 * (1 - var(--t))); filter: drop-shadow(0 0 4px var(--amarillo)) drop-shadow(0 0 12px rgba(241,216,51,.6)); }
.foco-cara.chispa .aro circle { stroke-opacity: .15; filter: none; }
.foco-cara:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 4px; }

/* ---------- banda: la sala con los neones y su frase ---------- */
.banda { position: relative; padding: 0; display: grid; overflow: hidden; background: var(--negro); }
.banda > * { grid-area: 1 / 1; }
.banda-foto { overflow: hidden; }
.banda-foto img { width: 100%; height: auto; }
.banda::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(10,10,11,.9) 0%, rgba(10,10,11,.55) 42%, rgba(10,10,11,.05) 72%); pointer-events: none; }
.banda-txt { position: relative; z-index: 2; align-self: center; padding: clamp(40px, 6vw, 90px) 0; }
.cita { font: 800 clamp(46px, 8.2vw, 132px)/.92 var(--tit); font-variation-settings: "wdth" 120; color: #fff; max-width: 11ch; letter-spacing: -.04em; margin-top: 20px; }
.cita em { text-shadow: var(--glow-a); }
.cita .pal { display: block; overflow: hidden; padding-bottom: .05em; }
.cita .pal > span { display: block; }
.anima .cita .pal > span { transform: translateY(108%); transition: transform 1.05s var(--curva); transition-delay: calc(var(--i) * 120ms); }
.anima .banda.dentro .cita .pal > span { transform: none; }
.cita-pie { margin-top: 26px; font: 400 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(244,244,241,.55); }
.parx img { will-change: transform; }

/* ---------- no arrancás solo ---------- */
.lista { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.lista li { position: relative; padding-left: 26px; color: var(--blanco); }
.lista li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--amarillo); box-shadow: 0 0 8px var(--amarillo); }
.clip-g { display: block; justify-self: center; width: min(100%, 400px); aspect-ratio: 9 / 16; max-height: 78vh; border-radius: var(--redondeo); overflow: hidden; background: var(--carbon); }
.clip-g video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- tira de reels ---------- */
.redes-sec { overflow: hidden; background: var(--carbon); }
.tira-caja { overflow: hidden; }
.tira { display: flex; gap: 18px; width: max-content; padding-left: max(32px, calc((100vw - var(--marco)) / 2)); will-change: transform; }
.clip { position: relative; width: clamp(210px, 20vw, 280px); aspect-ratio: 9 / 16; border-radius: var(--redondeo); overflow: hidden; background: var(--grafito); flex: none; text-decoration: none; }
.clip video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
.clip:hover video { transform: scale(1.04); }
.clip-et { position: absolute; left: 12px; right: 12px; bottom: 12px; font: 500 12px/1.3 var(--mono); padding: 8px 12px; border-radius: 10px; background: rgba(10,10,11,.66); backdrop-filter: blur(8px); }
.redes-acc { margin-top: 40px; }
.redes-acc svg { width: 19px; height: 19px; }

/* ---------- promo del mes ---------- */
.promo-rej { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.promo-p { padding: clamp(36px, 4vw, 56px) clamp(0px, 3vw, 44px) clamp(36px, 4vw, 56px) 0; }
.promo-p + .promo-p { border-left: 1px solid var(--linea); padding-left: clamp(24px, 4vw, 56px); }
.promo-p h2 { font-size: clamp(30px, 3.4vw, 46px); margin-top: 16px; max-width: 14ch; }

/* ---------- convenios y academia ---------- */
.extra { padding-top: 0; }
.extra-rej { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.extra-p { background: var(--carbon); border-radius: var(--redondeo); padding: 34px 36px 36px; border: 1px solid var(--linea); transition: border-color .4s var(--curva), transform .5s var(--curva); }
.extra-p:hover { border-color: rgba(241,216,51,.45); transform: translateY(-3px); }
.extra-p h3 { margin-top: 14px; font-size: clamp(24px, 2.4vw, 32px); }
.extra-p p:not(.rotulo) { color: var(--gris); margin-top: 12px; max-width: 42ch; }

/* ---------- cierre: los tubos de la sala ---------- */
.cierre { position: relative; overflow: hidden; background: #060607; border-top: 1px solid var(--linea); padding: clamp(110px, 13vw, 190px) 0; isolation: isolate; }
.cierre-in { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; }
.cierre h2 { margin-top: 18px; font-size: clamp(38px, 5.6vw, 82px); max-width: 15ch; }
.cierre .lead { margin-inline: auto; }
.cierre .acc { justify-content: center; }
.tubos { position: absolute; inset: 0; z-index: 0; }
.tubos i { position: absolute; left: var(--x); top: 50%; width: 5px; height: var(--h); transform: translateY(-50%); border-radius: 6px; background: var(--c); box-shadow: 0 0 10px var(--c), 0 0 34px var(--c), 0 0 90px var(--c); opacity: .5; }
.anima [data-neon] .tubos i { animation: zumba 7s ease-in-out var(--d) infinite; }
@keyframes zumba { 0%, 100% { opacity: .42; } 50% { opacity: .62; } 62% { opacity: .2; } 63% { opacity: .6; } 64% { opacity: .3; } 66% { opacity: .58; } }
.cierre::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(6,6,7,.92), rgba(6,6,7,.55) 70%, rgba(6,6,7,.2)); }
[data-neon].quieta * { animation-play-state: paused !important; }

/* ---------- páginas internas ---------- */
.cabeza { padding: clamp(70px, 9vw, 130px) 0 clamp(30px, 4vw, 50px); }
.cabeza h1 { font-size: clamp(46px, 7vw, 104px); margin-top: 18px; max-width: 13ch; line-height: .96; }
.cabeza h1 em { text-shadow: var(--glow-a); }
.cabeza-404 { min-height: 70vh; }

/* el buscador de sede: día + hora → qué está abierto */
.buscador-sec { padding-top: 20px; }
.buscador { background: var(--carbon); border: 1px solid var(--linea); border-radius: calc(var(--redondeo) + 4px); padding: clamp(24px, 3vw, 38px); display: grid; gap: 22px; }
.bus-fila { display: grid; grid-template-columns: 70px 1fr; gap: 18px; align-items: center; }
.bus-et { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 15px var(--txt); padding: 11px 18px; border-radius: 99px; border: 1.5px solid var(--linea); background: transparent; color: var(--gris); cursor: pointer; transition: border-color .2s, color .2s, background .2s, box-shadow .2s; }
.chip:hover { border-color: rgba(244,244,241,.4); color: var(--blanco); }
.chip[aria-pressed="true"] { border-color: var(--amarillo); color: #111; background: var(--amarillo); box-shadow: 0 0 18px rgba(241,216,51,.35); }
.reloj { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.reloj-h { font: 800 clamp(34px, 3.4vw, 48px)/1 var(--tit); font-variation-settings: "wdth" 125; font-variant-numeric: tabular-nums; color: var(--amarillo); text-shadow: var(--glow-a); min-width: 4.2ch; }
.reloj input { width: 100%; accent-color: var(--amarillo); height: 28px; cursor: pointer; }
.bus-res { font-size: 17px; color: var(--blanco); border-top: 1px solid var(--linea); padding-top: 20px; min-height: 1.6em; }
.bus-res b { color: var(--amarillo); font-weight: 600; }
.sedes-rej { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.sede { position: relative; background: var(--carbon); border: 1px solid var(--linea); border-radius: var(--redondeo); padding: 28px 28px 30px; transition: border-color .45s var(--curva), box-shadow .45s var(--curva), opacity .45s var(--curva); scroll-margin-top: 100px; }
.sede-cab { display: flex; justify-content: space-between; align-items: center; }
.sede-n { font-size: 13px; color: var(--tenue); }
.estado { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--linea); color: var(--tenue); }
.estado:empty { display: none; }
.sede h2 { font-size: clamp(30px, 2.8vw, 40px); margin-top: 22px; }
.sede-sello { font: 500 13px var(--mono); color: var(--amarillo); margin-top: 8px; }
.sede-dir { display: block; margin-top: 18px; color: var(--gris); text-decoration: none; font-size: 15.5px; transition: color .25s; }
.sede-dir:hover { color: var(--blanco); }
.horas, .sede-extra { list-style: none; margin: 22px 0 0; padding: 0; }
.horas li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--linea); }
.horas span { font: 400 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.horas b { font-weight: 500; font-size: 16px; }
.sede-extra li { font-size: 14.5px; color: var(--gris); padding-left: 18px; position: relative; margin-top: 8px; }
.sede-extra li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1.5px; background: var(--tenue); }
.sede.abierta { border-color: var(--amarillo); box-shadow: 0 0 0 1px rgba(241,216,51,.3), 0 0 40px -6px rgba(241,216,51,.28); }
.sede.abierta .estado { color: #111; background: var(--amarillo); border-color: var(--amarillo); }
.sede.paga .estado { color: var(--amarillo); background: transparent; border-color: var(--amarillo); }
.sede.cerrada { opacity: .45; }
.nota { color: var(--tenue); font-size: 14.5px; line-height: 1.6; margin-top: 26px; max-width: 70ch; }

/* planes */
.precios-sec { padding-top: 20px; }
.precios { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 18px; }
.precio { background: var(--carbon); border: 1px solid var(--linea); border-radius: var(--redondeo); padding: 28px 26px 30px; transition: border-color .4s var(--curva), transform .5s var(--curva); }
.precio:hover { transform: translateY(-3px); border-color: rgba(244,244,241,.25); }
.precio-dest { border-color: rgba(241,216,51,.55); box-shadow: 0 0 44px -14px rgba(241,216,51,.35); }
.monto { margin-top: 20px; }
.monto b { display: block; font: 800 clamp(34px, 3.2vw, 46px)/1 var(--tit); font-variation-settings: "wdth" 118; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.precio-dest .monto b { color: var(--amarillo); text-shadow: 0 0 26px rgba(241,216,51,.3); }
.monto span { display: block; margin-top: 8px; font: 400 12.5px var(--mono); color: var(--gris); }
.monto-2 { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); color: var(--gris); font-size: 15px; }
.precio ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; color: var(--blanco); }
.precio li::before { content: "— "; color: var(--amarillo); }
.faq details { border-top: 1px solid var(--linea); }
.faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 44px 24px 0; font: 600 19.5px/1.35 var(--tit); font-variation-settings: "wdth" 100; letter-spacing: -.015em; position: relative; transition: color .3s; }
.faq summary:hover { color: var(--amarillo); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font: 400 28px var(--txt); color: var(--amarillo); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 26px; color: var(--gris); max-width: 56ch; font-size: 16.5px; }
.normas { background: var(--carbon); }
.normas-l { list-style: none; margin: 0; padding: 0; }
.normas-l li { display: flex; gap: 20px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--linea); font-size: 17px; }
.normas-l li:last-child { border-bottom: 1px solid var(--linea); }
.normas-l span { color: var(--amarillo); font-size: 13px; }

/* ---------- pie ---------- */
.pie { background: var(--negro); padding: 44px 0 34px; border-top: 1px solid var(--linea); }
.pie-rej { display: grid; grid-template-columns: auto 1fr auto; gap: 44px; align-items: center; }
.pie-marca img { width: 130px; height: auto; }
.pie-datos { display: grid; gap: 4px; font-size: 14px; }
.pie-datos a, .pie-links a { text-decoration: none; color: var(--gris); transition: color .25s; }
.pie-datos b { color: var(--blanco); font-weight: 500; }
.pie-datos a:hover, .pie-links a:hover { color: var(--amarillo); }
.pie-links { display: flex; align-items: center; gap: 20px; font-size: 14.5px; }
.redes { display: flex; gap: 12px; }
.redes svg { width: 19px; height: 19px; }
.pie-baja { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--linea); font: 400 11.5px var(--mono); letter-spacing: .08em; color: var(--tenue); }

/* ---------- velo entre páginas ---------- */
.velo-paso { position: fixed; inset: 0; background: var(--negro); z-index: 80; pointer-events: none; opacity: 1; transition: opacity .35s; }
.entro .velo-paso { opacity: 0; }
.saliendo .velo-paso { opacity: 1; transition-duration: .22s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- celular: layout propio, no achicado ---------- */
@media (max-width: 900px) {
  :root { --cab: 64px; }
  body { font-size: 16px; }
  .marco { width: calc(100% - 40px); }
  .solo-pc { display: none !important; }
  .solo-cel { display: initial; }
  .menu, .cab .btn-chico { display: none; }
  .cab { background: rgba(10,10,11,.86); backdrop-filter: blur(14px); }
  .logo img { height: 32px; }
  .menu-btn { display: grid; gap: 6px; margin-left: auto; background: none; border: 0; padding: 12px 4px; cursor: pointer; }
  .menu-btn span { display: block; width: 24px; height: 2px; background: var(--blanco); transition: transform .3s; }
  .menu-abierto .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-abierto .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .menu-cel { display: block; position: fixed; inset: var(--cab) 0 0; background: var(--negro); z-index: 45; opacity: 0; pointer-events: none; transition: opacity .3s; }
  .menu-abierto .menu-cel { opacity: 1; pointer-events: auto; }
  .menu-cel-in { padding: 30px 20px; display: grid; gap: 4px; }
  .menu-cel-in > a { font: 800 34px/1.35 var(--tit); font-variation-settings: "wdth" 118; text-decoration: none; }
  .menu-cel-pie { margin-top: 24px; }

  /* el hero cambia de forma: la foto entera arriba, el titular abajo sobre negro */
  .hero { min-height: 0; display: block; }
  .hero-foto { position: relative; aspect-ratio: 16 / 11; margin-top: var(--cab); }
  .hero-foto::after { background: linear-gradient(0deg, var(--negro) 0%, var(--negro) 2%, rgba(10,10,11,0) 42%); }
  .hero-txt { padding: 0 0 56px; margin-top: -26px; }
  .neon { font-size: clamp(44px, 12.6vw, 64px); }

  .dos, .adentro-rej, .promo-rej, .extra-rej, .sedes-rej { grid-template-columns: 1fr; }
  .numeros .marco { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .num b { font-size: clamp(46px, 13vw, 64px); }
  .num span { font-size: 13px; }
  .fila { grid-template-columns: 38px 1fr; }
  .fila-foto { display: block; grid-column: 1 / -1; border-radius: 14px; overflow: hidden; margin-top: 16px; aspect-ratio: 16 / 9; }
  .fila-foto img { width: 100%; height: 100%; object-fit: cover; }
  .fila h3 { color: var(--blanco); }
  .banda { display: block; padding-bottom: 50px; }
  .banda::after { display: none; }
  .banda-txt { padding: 30px 0 0; }
  .cita { max-width: 10ch; font-size: clamp(42px, 12.6vw, 64px); }
  .clip { width: 58vw; }
  .tira { padding-left: 20px; }
  .clip-g { width: min(100%, 320px); }
  .promo-p { padding: 32px 0; }
  .promo-p + .promo-p { border-left: 0; border-top: 1px solid var(--linea); padding-left: 0; }
  .extra-p { padding: 28px 24px; }
  .cierre .acc { display: grid; width: 100%; }
  .cierre .acc .btn { justify-content: center; }
  .tubos i { width: 4px; }
  .bus-fila { grid-template-columns: 1fr; gap: 10px; }
  .precios { grid-template-columns: 1fr 1fr; gap: 12px; }
  .precio-dest { grid-column: 1 / -1; }
  .precio { padding: 22px 18px 24px; }
  .pie-rej { grid-template-columns: 1fr; gap: 22px; }
  .pie-links { flex-wrap: wrap; }
  .pie { padding: 36px 0 40px; }
  .resena blockquote { font-size: 19px; }
  .socios-cab { grid-template-columns: 1fr; gap: 30px; }
  .repiten li { grid-template-columns: 1fr 2em; grid-template-areas: "t n" "b b"; font-size: 14px; gap: 6px 12px; }
  .repiten li span { grid-area: t; }
  .repiten li i { grid-area: b; }
  .repiten li b { grid-area: n; }
  .foco-citas { font-size: clamp(21px, 6vw, 26px); }
  .foco-top { grid-template-columns: 1fr; gap: 26px; }
  .foco-grande { width: 150px; }
  .foco-caras { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 10px 20px; gap: 10px; }
  .foco-caras::-webkit-scrollbar { display: none; }
  .foco-cara { width: 58px; height: 58px; flex: none; }
}