/* =========================================================
   GYM MAXFIT — Salto, Uruguay
   Sale de sus posts de Instagram: azul eléctrico con grano, negro, letra cuadrada y pesada,
   las rayitas //////, bloques oscuros bien redondeados y pastillas blancas con borde azul.
   Las fotos de stock van en azul y negro (tools/procesar-fotos.py).
   ========================================================= */
:root {
  --noche: #0b0f14;       /* fondo */
  --pizarra: #1a2027;     /* bloques oscuros de los posts */
  --ink: #f4f7fa;         /* texto sobre oscuro */
  --soft: #a9b5c2;        /* notas sobre oscuro (9:1) */
  --line: rgb(244 247 250 / .14);
  --azul: #0670d6;        /* azul de los posts, apenas más hondo para que el texto blanco lea (4,9:1) */
  --azul-luz: #2a9dff;    /* azul sobre negro (6,6:1) */
  --azul-tinta: #0558aa;  /* azul sobre claro */
  --hielo: #e8eff6;       /* celdas de la grilla */

  --fd: "Bungee", "Arial Black", Impact, sans-serif;
  --ff: "Poppins", "Segoe UI", system-ui, sans-serif;

  --step-small: clamp(.8125rem, .79rem + .1vw, .875rem);
  --step-body: clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-lead: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --step-head: clamp(2.2rem, 1.1rem + 3.8vw, 4.6rem);
  --step-display: clamp(2.5rem, .9rem + 6.6vw, 6.4rem);

  --m: clamp(16px, 2.6vw, 40px);
  --gap: clamp(14px, 1.8vw, 24px);
  --section: clamp(84px, 10vw, 160px);
  --header: 72px;
  --r: 28px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: dark;
}
@media (max-width: 959px) { :root { --header: 64px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--noche); scroll-padding-top: var(--header); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--noche); color: var(--ink);
  font: 400 var(--step-body)/1.55 var(--ff); -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--fd); font-weight: 400; line-height: 1; text-transform: uppercase; }
h2 { font-size: var(--step-head); text-wrap: balance; }
.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; }
.wrap { width: min(100% - 2 * var(--m), 1360px); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--azul-luz); outline-offset: 3px; }
.hero :focus-visible, .cierre :focus-visible { outline-color: #fff; }
.skip { position: absolute; left: var(--m); top: -80px; z-index: 200; padding: .7rem 1.1rem; border-radius: 999px; background: #fff; color: var(--noche); font-weight: 600; }
.skip:focus { top: 12px; }
.ico { width: 1.2em; height: 1.2em; flex: none; }

/* las rayitas ////// de los posts */
.rayas {
  display: block; width: 7.5rem; height: 1.15rem;
  background: repeating-linear-gradient(115deg, transparent 0 .55rem, currentColor .55rem .9rem);
  -webkit-mask: linear-gradient(90deg, #000 92%, transparent); mask: linear-gradient(90deg, #000 92%, transparent);
}

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: .7em 1.5em; border: 2px solid transparent; border-radius: 999px;
  font-weight: 600; line-height: 1.15; text-decoration: none; white-space: nowrap;
  transition: transform .35s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .35s var(--ease);
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-sm { min-height: 44px; padding: .5em 1.15em; font-size: var(--step-small); }
.btn-azul { background: var(--azul); color: #fff; }
.btn-azul:hover { background: #fff; color: var(--azul-tinta); }
.btn-negro { background: var(--noche); color: #fff; }
.btn-negro:hover { background: #000; box-shadow: 0 10px 0 -4px rgb(0 0 0 / .35); }
.btn-line { border-color: currentColor; }
.btn-line:hover { background: #fff; border-color: #fff; color: var(--noche); }
.link {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: .3em; transition: text-underline-offset .3s var(--ease);
}
.link:hover { text-underline-offset: .45em; }

/* ---------- pantalla de carga: se arma el logo ---------- */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 26px;
  background: var(--noche) var(--grano); transition: opacity .45s ease, visibility 0s .45s;
  animation: ld-failsafe 0s 7s forwards;
}
.loader.out { opacity: 0; visibility: hidden; }
.ld { width: clamp(200px, 34vw, 300px); overflow: visible; transition: transform .6s var(--ease); }
.ld use { transform-box: view-box; transform-origin: 200px 143px; }
.ld-rayas { width: 120px; height: 14px; color: var(--azul-luz); background: repeating-linear-gradient(115deg, transparent 0 7px, currentColor 7px 12px); }
.loader.out .ld { transform: scale(1.12); }
@keyframes ld-failsafe { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: no-preference) {
  .ld-barra { animation: ld-barra .5s var(--ease) both; }
  .ld-disco { animation: ld-disco .55s cubic-bezier(.3, 1.6, .5, 1) .25s both; }
  .ld-hex { animation: ld-hex .7s var(--ease) .45s both; }
  .ld-txt { animation: ld-txt .5s cubic-bezier(.3, 1.5, .5, 1) .8s both; }
  .ld-rayas { animation: rayas-corren .6s linear infinite; }
}
@keyframes ld-barra { from { transform: scaleX(0); } }
@keyframes ld-disco { from { transform: translateX(-70px); opacity: 0; } }
@keyframes ld-hex { from { transform: scale(.4) rotate(-60deg); opacity: 0; } }
@keyframes ld-txt { from { transform: scale(1.6); opacity: 0; } }
@keyframes rayas-corren { to { background-position: 13.24px 0; } }   /* 12 px de período / sen 115° */

/* ---------- header ---------- */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: rgb(11 15 20 / .84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.hd.is-scrolled { border-bottom-color: var(--line); }
.hd-in { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; height: var(--header); }
.brand { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; text-decoration: none; font: 400 1.25rem/1 var(--fd); text-transform: uppercase; position: relative; z-index: 2; white-space: nowrap; }
.brand svg { width: 66px; height: auto; transition: transform .8s var(--ease); }
.brand:hover svg { transform: rotate(-8deg) scale(1.06); }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav ul { display: flex; gap: clamp(.9rem, 1.7vw, 1.8rem); }
.nav ul a { position: relative; display: inline-block; padding-block: .6rem; font-weight: 600; font-size: .9375rem; text-decoration: none; }
.nav ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 3px; background: var(--azul-luz);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav ul a:hover::after, .nav ul a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.burger { display: none; }

@media (max-width: 959px) {
  .burger {
    display: grid; place-content: center; gap: 7px; width: 48px; height: 48px; margin-right: -10px;
    background: none; border: 0; cursor: pointer; position: relative; z-index: 2;
  }
  .burger span { width: 26px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease); }
  .nav-open .burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .nav-open .burger span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .nav {
    position: fixed; inset: 0; height: 100dvh; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2.5rem;
    padding: 96px var(--m) 48px; background: var(--azul) var(--grano);
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s;
  }
  .nav ul { flex-direction: column; gap: .3rem; }
  .nav ul a { font: 400 clamp(2.2rem, 10vw, 3.6rem)/1.05 var(--fd); text-transform: uppercase; }
  .nav ul a::after { height: 5px; bottom: .1rem; background: #fff; }
  .nav li, .nav .btn { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 60ms + 80ms); }
  .nav-open .nav { opacity: 1; visibility: visible; transition: opacity .35s; }
  .nav-open .nav li, .nav-open .nav .btn { opacity: 1; transform: none; }
  .nav .btn-sm { min-height: 52px; font-size: var(--step-body); background: var(--noche); }
}

/* ---------- hero: póster azul ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: calc(var(--header) + clamp(28px, 5vw, 64px)) 0 clamp(56px, 7vw, 96px);
  background: radial-gradient(120% 90% at 85% 10%, #1488f0 0%, transparent 60%), linear-gradient(180deg, var(--azul), #0560bd);
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grano); opacity: .22; mix-blend-mode: multiply; pointer-events: none; }
.hero-fondo {
  position: absolute; left: 0; top: 50%; z-index: -1; translate: 0 -50%; white-space: nowrap; pointer-events: none;
  font: 400 clamp(9rem, 26vw, 24rem)/1 var(--fd); text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 2px rgb(255 255 255 / .1);
}
.hero-fondo span { display: block; width: max-content; }
.hero-grid { display: grid; gap: clamp(40px, 5vw, 64px); align-items: center; }
.live { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: clamp(20px, 2.6vw, 30px); padding: .45rem 1rem .45rem .75rem; border-radius: 999px; background: rgb(11 15 20 / .28); font-size: var(--step-small); font-weight: 600; }
.live i { width: 9px; height: 9px; border-radius: 50%; background: #fff; opacity: .6; }
.live:has(.is-open) i { background: #59f08a; opacity: 1; box-shadow: 0 0 0 0 rgb(89 240 138 / .6); }
.hero .rayas { color: #fff; margin-bottom: clamp(14px, 2vw, 22px); }
.hero-copy { container-type: inline-size; }
.hero-title { font-size: min(var(--step-display), 11.2cqi); line-height: .98; letter-spacing: -.01em; }   /* "EMPIEZA ACÁ." entra en una línea */
.hero-title .ln { display: block; overflow: hidden; padding-block: .04em; }
.hero-title .ln > span { display: block; }
.hero-title em { font-style: normal; color: var(--noche); }
.hero-sub { max-width: 34ch; margin-top: clamp(20px, 2.6vw, 30px); font-size: var(--step-lead); line-height: 1.45; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: clamp(26px, 3vw, 38px); }

.hero-media { position: relative; aspect-ratio: 4 / 3.4; }
.bloque { position: absolute; border-radius: 46px; background: var(--pizarra); }
.bloque-a { inset: -9% -14% auto 34%; height: 46%; }
.bloque-b { inset: auto -14% -12% 52%; height: 42%; }
.hero-photos {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--r);
  background: var(--noche); box-shadow: 0 30px 60px -20px rgb(0 20 50 / .6);
}
.hero-photos img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--x, 50%) 40%;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-photos img.is-on { opacity: 1; }
.hero-photos::after { content: ""; position: absolute; inset: 0; background: var(--grano); opacity: .25; mix-blend-mode: overlay; pointer-events: none; }
.pills { position: absolute; left: clamp(-30px, -2.2vw, -12px); bottom: clamp(18px, 9%, 60px); z-index: 3; display: grid; gap: 10px; justify-items: start; }
.pill {
  display: grid; gap: 0; padding: 10px 20px 12px; border: 3px solid var(--azul); border-radius: 22px;
  background: #fff; color: var(--noche); box-shadow: 0 16px 34px rgb(0 0 0 / .32);
}
.pill:first-child { rotate: -3deg; }
.pill:last-child { rotate: 2deg; margin-left: 18px; }
.pill span { font-size: .75rem; font-weight: 600; letter-spacing: .06em; }
.pill b { font: 400 clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem)/1 var(--fd); color: var(--azul-tinta); }
.hero-logo { position: absolute; right: clamp(-10px, 1vw, 20px); top: clamp(-34px, -3vw, -20px); z-index: 3; width: clamp(120px, 13vw, 190px); height: auto; filter: drop-shadow(0 14px 22px rgb(0 0 0 / .4)); }

@media (min-width: 960px) {
  .hero { min-height: 100svh; display: grid; align-items: center; }
  .hero-grid { grid-template-columns: 1.12fr .88fr; }
  .hero-media { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--header) - 110px); width: 100%; justify-self: end; }
}
@media (max-width: 959px) {
  .hero-media { width: min(100%, 640px); justify-self: center; }
}
@media (max-width: 599px) {
  .hero-media { aspect-ratio: 1 / 1; }
  .bloque-a { inset: -6% -20% auto 40%; }
  .bloque-b { inset: auto -20% -8% 56%; }
  .pills { left: -6px; bottom: 14px; }
  .pill { padding: 7px 14px 9px; border-radius: 18px; }
  .hero-logo { right: -6px; top: -26px; width: 108px; }
  .hero-actions .btn { flex: 1 1 auto; }
}

/* ---------- cintas ---------- */
.ribbons { position: relative; z-index: 2; margin-top: -34px; padding-bottom: clamp(24px, 4vw, 48px); overflow: hidden; }
.ribbon { width: 112%; margin-left: -6%; overflow: hidden; }
.ribbon-negra { background: var(--noche); color: #fff; rotate: -2deg; position: relative; z-index: 2; border-block: 3px solid var(--azul-luz); }
.ribbon-blanca { margin-top: -8px; background: #fff; color: var(--azul); rotate: 1.4deg; }
.track { display: flex; align-items: center; width: max-content; padding-block: .6em; font: 400 clamp(1.4rem, .9rem + 2.2vw, 3rem)/1 var(--fd); text-transform: uppercase; }
.track span { padding-inline: .5em; white-space: nowrap; }
.track i { width: .6em; height: .68em; flex: none; background: var(--azul-luz); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ribbon-blanca .track i { background: var(--noche); }

/* ---------- cabeceras de sección ---------- */
.head { display: grid; gap: 14px; margin-bottom: clamp(36px, 5vw, 64px); }
.head-row { align-items: end; }
@media (min-width: 900px) { .head-row { grid-template-columns: 1fr minmax(0, 26rem); gap: 2rem 4rem; } }
.kicker { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--ff); font-size: var(--step-small); font-weight: 600; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--azul-luz); }
.kicker::before { content: ""; width: 3.2rem; height: .8rem; flex: none; background: repeating-linear-gradient(115deg, transparent 0 .4rem, currentColor .4rem .65rem); }
.head h2 { max-width: 16ch; }
.lead { max-width: 46ch; font-size: var(--step-lead); line-height: 1.5; color: var(--soft); }

/* ---------- entrenar ---------- */
.entrenar { padding-top: clamp(24px, 4vw, 48px); padding-bottom: var(--section); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--gap); }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  position: relative; display: flex; flex-direction: column; gap: .65rem; padding: 10px 10px 22px; border-radius: var(--r); background: var(--pizarra);
  transition: translate .5s var(--ease), background-color .3s;
}
.card::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--azul-luz); transform: scaleX(0); transition: transform .5s var(--ease); }
.card:hover { translate: 0 -6px; background: #212932; }
.card:hover::after { transform: scaleX(1); }
.card-pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; margin-bottom: .45rem; background: var(--noche); }
.card-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--y, 50%); transition: transform 1s var(--ease); }
.card:hover .card-pic img { transform: scale(1.07); }
.tag { position: absolute; left: 10px; top: 10px; padding: .32rem .75rem; border-radius: 999px; background: #fff; color: var(--azul-tinta); font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.card h3, .card p { padding-inline: 12px; }
.card h3 { font-size: clamp(1.6rem, 1.3rem + .9vw, 2.1rem); }
.card p { color: var(--soft); }
.card .meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .5rem; }
.meta span { padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-size: .8125rem; color: var(--ink); }
@media (max-width: 599px) {
  .cards {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--m) * -1); padding-inline: var(--m); scroll-padding-inline: var(--m); scrollbar-width: none;
  }
  .cards::-webkit-scrollbar { display: none; }
  .card { scroll-snap-align: start; }
}

/* ---------- clases: la grilla del post ---------- */
.clases { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section); background: linear-gradient(180deg, var(--azul), #0560bd); }
.clases::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grano); opacity: .22; mix-blend-mode: multiply; }
.clases::after { content: ""; position: absolute; z-index: -1; right: -5%; top: 40%; width: 27%; height: 52%; border-radius: 64px; background: var(--pizarra); }
.clases .kicker { color: #fff; }
.clases .lead { color: #fff; }
.grilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dia { display: grid; grid-template-rows: auto; gap: 6px; border-radius: 18px; transition: background-color .3s; }
.dia h3 { padding: 14px 8px 10px; font-size: clamp(1rem, .6rem + 1vw, 1.6rem); text-align: center; }
.dia ul { display: grid; gap: 6px; }
.clase {
  position: relative; display: grid; align-content: center; justify-items: center; gap: 2px; min-height: 96px; padding: 14px 8px;
  background: var(--hielo); color: var(--noche); text-align: center;
}
.clase:first-child { border-radius: 14px 14px 0 0; }
.clase:last-child { border-radius: 0 0 14px 14px; }
.clase b { font: 400 clamp(.9rem, .55rem + .75vw, 1.3rem)/1.05 var(--fd); color: var(--azul-tinta); text-transform: uppercase; }
.clase small { font-size: .78rem; font-weight: 600; line-height: 1.2; }
.clase time { font: 400 clamp(1rem, .7rem + .7vw, 1.4rem)/1.1 var(--fd); }
.dia.is-today h3 { color: var(--noche); background: #fff; border-radius: 14px; }
.dia.is-today h3::after { content: "Hoy"; display: block; margin-top: 4px; font: 600 .7rem/1 var(--ff); letter-spacing: .14em; color: var(--azul-tinta); }
.dia.is-today .clase { background: #fff; }
.clase.is-next { background: var(--noche) !important; color: #fff; }
.clase.is-next b { color: var(--azul-luz); }
.clase.is-next::before { content: "Próxima"; position: absolute; top: -9px; left: 50%; translate: -50% 0; padding: .15rem .55rem; border-radius: 999px; background: #59f08a; color: var(--noche); font: 600 .6875rem/1.3 var(--ff); letter-spacing: .06em; white-space: nowrap; }
.clases-nota { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.2rem; margin-top: 22px; font-weight: 600; }
@media (max-width: 759px) {
  .grilla {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--m) * -1); padding: 10px var(--m) 4px; scroll-padding-inline: var(--m); scrollbar-width: none;
  }
  .grilla::-webkit-scrollbar { display: none; }
  .dia { scroll-snap-align: start; }
  .dia h3 { font-size: 1.35rem; }
  .clase b { font-size: 1.15rem; }
  .clase time { font-size: 1.3rem; }
  .clases::after { display: none; }
}

/* ---------- fotos: dos filas que corren ---------- */
.fotos { padding-block: var(--section); overflow: hidden; }
.fotos-links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.nota-fotos { font-size: var(--step-small); color: var(--soft); }
.reel { overflow: hidden; }
.reel + .reel { margin-top: var(--gap); }
.reel-track { display: flex; gap: var(--gap); width: max-content; padding-right: var(--gap); }
.reel-track li { flex: none; height: clamp(190px, 21vw, 300px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: var(--pizarra); }
.reel-track li.wide { aspect-ratio: 3 / 2; }
.reel-track img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.reel-track li:hover img { transform: scale(1.06); }

/* ---------- cierre (azul) ---------- */
.cierre { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--section); background: linear-gradient(160deg, #1488f0, var(--azul) 45%, #054f9e); text-align: center; }
.cierre::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grano); opacity: .22; mix-blend-mode: multiply; }
.cierre-in { position: relative; display: grid; justify-items: center; gap: 22px; }
.cierre-logo { position: absolute; left: 50%; top: 50%; z-index: -1; width: min(110vw, 980px); max-width: none; height: auto; translate: -50% -50%; opacity: .1; pointer-events: none; }
.cierre .rayas { color: #fff; }
.cierre h2 { font-size: clamp(2.4rem, .8rem + 6.4vw, 7rem); line-height: .98; }
.cierre h2 span { color: var(--noche); }
.cierre p { max-width: 36ch; font-size: var(--step-lead); font-weight: 600; }

/* ---------- horario de la sala y ubicación ---------- */
.info { padding-block: var(--section); }
.info-grid { display: grid; gap: var(--gap); }
.horas, .donde { position: relative; min-width: 0; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r); background: var(--pizarra); overflow: hidden; }
.donde { background: #fff; color: var(--noche); }
.info-title { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem); line-height: .95; }
.info-title span { display: block; font-size: .62em; color: var(--azul-luz); }
.donde .info-title span { color: var(--azul-tinta); }
.horas-hoy { margin-block: 22px 18px; }
.status { font-variant-numeric: tabular-nums; }
.horas-hoy .status { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px; color: var(--soft); font-size: var(--step-small); font-weight: 600; }
.horas-hoy .status.is-open { border-color: #59f08a; color: #59f08a; }
.horas-hoy .status.is-open::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.turnos { display: grid; gap: 12px; }
.turnos li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 12px 12px 12px 20px; border: 1px solid var(--line); border-radius: 999px; }
.turnos span { font-weight: 600; }
.turnos b { padding: .35rem 1rem; border: 3px solid var(--azul-luz); border-radius: 999px; background: #fff; color: var(--noche); font: 400 clamp(1.05rem, .9rem + .5vw, 1.35rem)/1.1 var(--fd); white-space: nowrap; }
.turnos li.is-today { border-color: var(--azul-luz); background: rgb(42 157 255 / .12); }
.turnos li.is-today span::after { content: " · hoy"; color: var(--azul-luz); }
.donde-dir { display: flex; align-items: flex-start; gap: .7rem; margin-block: 24px 26px; font: 400 clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem)/1.05 var(--fd); text-transform: uppercase; }
.donde-dir .ico { width: .9em; height: .9em; margin-top: .05em; color: var(--azul); }
.donde-dir small { display: block; margin-top: .4rem; font: 600 var(--step-small)/1.4 var(--ff); text-transform: none; color: #3d4955; }
.donde-btns { display: flex; flex-wrap: wrap; gap: .7rem; }
.donde .btn-line:hover { background: var(--noche); border-color: var(--noche); color: #fff; }
@media (min-width: 900px) { .info-grid { grid-template-columns: 1.1fr .9fr; } }
@media (max-width: 479px) { .turnos li { border-radius: 22px; } }

/* ---------- pie ---------- */
.footer { padding-block: clamp(56px, 7vw, 96px) 28px; border-top: 1px solid var(--line); font-size: var(--step-small); color: var(--soft); }
.foot-grid { display: grid; gap: 32px var(--gap); }
@media (min-width: 600px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-brand { display: flex; align-items: center; gap: 16px; }
.foot-brand svg { width: 96px; height: auto; flex: none; }
.foot-brand p { font: 400 1.6rem/1 var(--fd); text-transform: uppercase; color: var(--ink); }
.foot-brand span { display: block; margin-top: 6px; font: 600 .75rem/1.4 var(--ff); letter-spacing: .1em; color: var(--azul-luz); }
.footer h2 { margin-bottom: 12px; font: 600 .75rem var(--ff); letter-spacing: .16em; color: var(--azul-luz); }
.footer li { min-height: 32px; display: flex; align-items: center; }
.footer li a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.footer li a:hover { color: var(--ink); text-decoration: underline; }
.foot-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); }
.credit { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; font-size: .75rem; letter-spacing: .18em; text-decoration: none; text-transform: uppercase; }
.credit svg { width: auto; height: 1.375rem; fill: currentColor; }
.credit:hover { color: var(--azul-luz); }

/* ---------- WhatsApp flotante ---------- */
.fab {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--azul); color: #fff; box-shadow: 0 12px 30px rgb(0 0 0 / .45);
  transition: transform .5s var(--ease), opacity .4s;
}
.fab .ico { width: 30px; height: 30px; }
.fab.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }

/* =========================================================
   Movimiento: todo lo que se mueve solo vive acá, apagado con reduced motion
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* entradas del hero, después de la pantalla de carga */
  .js .hero-title .ln > span { transform: translateY(108%); transition: transform 1.1s var(--ease) calc(var(--d) * 90ms); }
  .js .hero-in { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease) calc(var(--d) * 90ms + 120ms), transform .9s var(--ease) calc(var(--d) * 90ms + 120ms); }
  .ready .hero-title .ln > span, .ready .hero-in { transform: none; opacity: 1; }

  /* el MAXFIT gigante de fondo corre despacio; las rayitas avanzan */
  .hero-fondo span { animation: marquee 50s linear infinite; }
  .rayas { animation: rayas-corren-l .9s linear infinite; }

  /* fotos del hero: zoom lento; pastillas y logo flotan */
  .hero-photos img.is-on { animation: kenburns 7s ease-out both; }
  .live:has(.is-open) i { animation: ping 1.8s ease-out infinite; }
  .pill:first-child { animation: bob 4.6s ease-in-out infinite; }
  .pill:last-child { animation: bob 4.6s ease-in-out -2.3s infinite; }
  .hero-logo { animation: flota 6s ease-in-out infinite; }
  .bloque-a { animation: deriva 9s ease-in-out infinite alternate; }
  .bloque-b { animation: deriva 11s ease-in-out -4s infinite alternate-reverse; }

  /* cintas */
  .ribbon-negra .track { animation: marquee 26s linear infinite; }
  .ribbon-blanca .track { animation: marquee 30s linear infinite reverse; }

  /* entradas al hacer scroll */
  .js .rv { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease) calc(var(--d, 0) * 90ms), transform .9s var(--ease) calc(var(--d, 0) * 90ms); }
  .js .rv.in { opacity: 1; transform: none; }

  /* la grilla de clases entra celda por celda */
  .js .grilla .clase { opacity: 0; scale: .9; transition: opacity .5s var(--ease), scale .5s var(--ease); transition-delay: calc(var(--c, 0) * 35ms + 150ms); }
  .js .grilla.in .clase { opacity: 1; scale: 1; }
  .clase.is-next::before { animation: late 1.6s ease-in-out infinite; }
  .horas-hoy .status.is-open::before { animation: ping 1.8s ease-out infinite; }

  /* fotos que corren */
  .reel-track { animation: marquee 60s linear infinite; }
  .reel-back .reel-track { animation-duration: 70s; animation-direction: reverse; }
  .reel:hover .reel-track { animation-play-state: paused; }

  /* cierre: el logo de fondo respira */
  .cierre-logo { animation: respira 8s ease-in-out infinite; }

  /* WhatsApp flotante: respira y cada tanto se sacude */
  .fab:not(.is-hidden) { animation: breathe 2.6s ease-in-out infinite, shake 7s ease-in-out 3s infinite; }
}
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(89 240 138 / .6); } 100% { box-shadow: 0 0 0 10px rgb(89 240 138 / 0); } }
@keyframes bob { 50% { translate: 0 -10px; } }
@keyframes flota { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -12px; rotate: -4deg; } }
@keyframes deriva { to { translate: -18px 14px; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes rayas-corren-l { to { background-position: .993rem 0; } }
@keyframes late { 50% { scale: 1.1; } }
@keyframes respira { 50% { scale: 1.06; opacity: .16; } }
@keyframes breathe { 50% { scale: 1.07; box-shadow: 0 12px 30px rgb(0 0 0 / .45), 0 0 0 10px rgb(42 157 255 / .22); } }
@keyframes shake { 0%, 88%, 100% { rotate: 0deg; } 90% { rotate: -14deg; } 92% { rotate: 12deg; } 94% { rotate: -9deg; } 96% { rotate: 6deg; } 98% { rotate: -3deg; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .track, .reel-track { flex-wrap: wrap; width: auto; }
  .reel-track [aria-hidden] { display: none; }
}