/* ============================================================
   EXTREAM ROLLERS — C.D. de patinaje en línea, Mérida
   Sistema: negro absoluto + magenta #F900A4, tipografía Archivo
   (variable wdth 62–125 / wght 100–900), radios 0, sin sombras.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var.woff2') format('woff2');
}

:root {
  --black: #000000;
  --iron: #181818;
  --charcoal: #202020;
  --white: #ffffff;
  --smoke: #f5f5f5;
  --ash: #868686;
  --steel: #969696;
  --accent: #F900A4;
  --accent-dark: #B8007A;
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1200px;
  --pad: clamp(20px, 4vw, 40px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Tipos de voz ---------- */

.display {
  font-size: clamp(2.75rem, 8vw, 6.75rem);
  font-weight: 800;
  font-stretch: 115%;
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.display-xl { font-size: clamp(3.25rem, 11vw, 8.5rem); }

.label {
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 62%;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 1.25rem;
}

.accent { color: var(--accent); }
.accent-text { color: var(--accent); }

.lead { font-size: 1.25rem; line-height: 1.5; color: var(--smoke); }

strong { font-weight: 700; color: var(--white); }

/* ---------- Botones: rectángulos afilados, interacción solo de color ---------- */

.btn {
  display: inline-block;
  border-radius: 0;
  border: 0;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  font-stretch: 80%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 18px 32px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.btn-accent { background: var(--accent); color: var(--black); }
.btn-accent:hover, .btn-accent:focus-visible { background: var(--accent-dark); color: var(--white); }

.btn-ghost { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.5); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--accent); color: var(--accent); }

.btn-big { padding: 24px 48px; font-size: 1rem; }

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

/* ---------- Barra de progreso ---------- */

/* en el borde INFERIOR del header fijo: en iOS con el navegador plegado la
   barra de estado del sistema tapa los primeros píxeles de la página, así que
   cualquier línea en el borde superior desaparece al hacer scroll hacia abajo */
.progress { position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: transparent; pointer-events: none; }
body.menu-open .progress { visibility: hidden; }
.progress span { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Cabecera ---------- */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 18px var(--pad);
  background: transparent;
  transition: background-color .3s ease, border-color .3s ease, padding .3s ease;
  border-bottom: 1px solid transparent;
}

.header.scrolled { background: #000; border-bottom-color: var(--iron); padding-top: 12px; padding-bottom: 12px; }

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-mark { width: 34px; height: 34px; flex: none; display: block; }
.brand-name {
  font-size: 1rem; font-weight: 800; font-stretch: 115%;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1;
}
.brand-name em { font-style: normal; color: var(--accent); }

.nav { display: flex; gap: 2rem; }
.nav a {
  font-size: 0.8rem; font-weight: 500; font-stretch: 80%;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--smoke);
  transition: color .2s ease;
}
.nav a:hover { color: var(--accent); }

.btn-nav { padding: 12px 22px; font-size: 0.78rem; }

.menu-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 7px;
}
.menu-toggle span { display: block; width: 26px; height: 2px; background: var(--white); transition: transform .25s ease, opacity .25s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--black);
  display: none;
  align-items: center; justify-content: center;
}
.mobile-menu.open { display: flex; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 2rem; text-align: center; }
.mobile-menu nav a {
  font-size: 2rem; font-weight: 800; font-stretch: 115%;
  text-transform: uppercase; letter-spacing: 0;
  color: var(--white);
}
.mobile-menu nav a:hover { color: var(--accent); }
.mobile-menu nav .btn { font-size: 1rem; margin-top: 1rem; }

/* ---------- Hero con scroll-scrub ---------- */

.hero-scrub { position: relative; min-height: 200vh; }
/* selector compuesto: .hero { position: relative } llega después en el archivo
   y con un selector simple pisaría el sticky */
.hero-scrub .hero-sticky { position: -webkit-sticky; position: sticky; top: 0; height: 100svh; min-height: 0; }
.hero-scrub .hero-media { inset: 0; background: #000; } /* sin sobreescaneo de parallax: el scrub lo sustituye */
.hero-scrub .hero-media picture { position: absolute; inset: 0; display: block; }
.hero-media canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity .4s ease;
}
.hero-media canvas.ready { opacity: 1; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.hero-media { position: absolute; inset: -12% 0; z-index: 0; will-change: transform; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.78) 100%),
    linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 55%);
}

.hero-content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(4rem, 10vh, 8rem);
}

.hero-label { color: var(--smoke); }

.hero-title {
  font-size: clamp(4rem, 14vw, 12rem);
  font-weight: 900;
  font-stretch: 115%;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 1.5rem -0.05em;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: inline-block; }
.js .hero-title .line > span { transform: translateY(110%); }
.js .hero-title.ready .line > span { animation: riseUp .9s cubic-bezier(.22,.9,.3,1) forwards; }
.js .hero-title.ready .line:nth-child(2) > span { animation-delay: .12s; }
@keyframes riseUp { to { transform: translateY(0); } }

.hero-sub { font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--smoke); max-width: 34rem; margin-bottom: 2.25rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Marquee ---------- */

.marquee { overflow: hidden; border-top: 1px solid var(--iron); border-bottom: 1px solid var(--iron); padding: 18px 0; background: var(--black); }
.marquee-track {
  display: flex; width: max-content;
  /* translate3d + from explícito: iOS Safari no compone animaciones de translateX(%) implícitas */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: marquee 28s linear infinite;
}
.marquee-track span {
  white-space: nowrap;
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  font-weight: 800; font-stretch: 115%;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--white);
  padding-right: 0.5em;
}
.marquee-track i { font-style: normal; color: var(--accent); }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- Secciones ---------- */

.section { padding: clamp(5rem, 12vw, 10rem) 0; background: var(--black); }

.club-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.club-copy p + p { margin-top: 1.25rem; color: var(--ash); }

.stats { list-style: none; border-top: 1px solid var(--charcoal); }
.stats li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--charcoal); }
.stat-num {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800; font-stretch: 115%;
  line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 0.75rem; font-stretch: 62%; letter-spacing: 0.24em; text-transform: uppercase; color: var(--steel); }

/* ---------- Clases ---------- */

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }

.card { background: var(--iron); border: 1px solid var(--charcoal); display: flex; flex-direction: column; position: relative; }
.card::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--accent); transition: right .4s ease;
}
.card:hover::after { right: 0; }

.card-media { aspect-ratio: 3 / 4; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }

.card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.card-index { font-size: 0.75rem; font-stretch: 62%; letter-spacing: 0.24em; color: var(--accent); }
.card h3 { font-size: 1.35rem; font-weight: 800; font-stretch: 108%; text-transform: uppercase; line-height: 1.05; overflow-wrap: break-word; }
.card p { color: var(--ash); font-size: 0.95rem; }
.tag {
  margin-top: auto; align-self: flex-start;
  font-size: 0.68rem; font-weight: 600; font-stretch: 62%;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--smoke);
  border: 1px solid var(--charcoal);
  padding: 7px 12px;
}

/* ---------- Horarios ---------- */

/* el propio #horarios es .reveal: el ancla se calcula con el translateY(28px)
   del estado pre-revelado, así que se compensa con scroll-margin */
.horarios { margin-top: clamp(3.5rem, 7vw, 6rem); scroll-margin-top: 28px; }
.horarios-title { font-size: 1.35rem; font-weight: 800; font-stretch: 115%; text-transform: uppercase; margin-bottom: 1.5rem; }
.horarios-note { font-size: 0.72rem; font-weight: 600; font-stretch: 62%; letter-spacing: 0.2em; color: var(--steel); vertical-align: middle; }

.horario-list { list-style: none; border-top: 1px solid var(--charcoal); }
.horario-list li {
  display: grid;
  grid-template-columns: 110px 130px minmax(0, 1fr) auto;
  gap: 1rem; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid var(--charcoal);
}
.h-dia { font-size: 0.72rem; font-weight: 600; font-stretch: 62%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel); }
.h-hora { font-size: 0.95rem; font-weight: 600; color: var(--smoke); font-variant-numeric: tabular-nums; }
.h-grupo { font-size: 1rem; font-weight: 700; }
.h-grupo em { font-style: normal; font-weight: 400; font-size: 0.85rem; color: var(--ash); }
.h-estado {
  font-size: 0.66rem; font-weight: 600; font-stretch: 62%;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--charcoal); white-space: nowrap;
}
.h-estado.libre { color: var(--accent); border-color: rgba(249, 0, 164, 0.55); }
.h-estado.completo { color: var(--steel); }
.horarios-foot { margin-top: 1.5rem; color: var(--ash); font-size: 0.9rem; max-width: 46rem; }

/* ---------- Bandas full-bleed ---------- */

.band { position: relative; overflow: hidden; min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.band-tall { min-height: 92vh; }

.band-media { position: absolute; inset: -14% 0; z-index: 0; will-change: transform; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }

.band-veil { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.45); }
.band-tall .band-veil { background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.35) 45%, rgba(0,0,0,.75)); }

.band-title {
  position: relative; z-index: 2;
  white-space: nowrap;
  /* la frase mide ~18.4em: a 6vw sangra ~5vw por lado y la deriva de scroll resuelve los extremos */
  font-size: clamp(2.5rem, 6vw, 6rem);
  font-weight: 900; font-stretch: 115%;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white);
  will-change: transform;
}

.band-tall .band-media img { object-position: 62% 40%; }

.band-content { position: relative; z-index: 2; width: 100%; padding-top: 6rem; padding-bottom: 6rem; }
.band-content .display { margin-bottom: 1.5rem; }
.band-sub { color: var(--smoke); font-size: 1.1rem; max-width: 36rem; }

/* ---------- Inscripción ---------- */

.precios {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.precios li { border-top: 2px solid var(--accent); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.precio-num { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 800; font-stretch: 115%; line-height: 1; }
.precio-num em { font-style: normal; font-size: 1rem; font-weight: 600; font-stretch: 80%; color: var(--steel); }
.precio-label { font-size: 0.8rem; font-weight: 600; font-stretch: 80%; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.precio-nota { color: var(--ash); font-size: 0.85rem; }

.link-accent { color: var(--accent); }
.link-accent:hover { color: var(--white); }

.condiciones { list-style: none; margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 46rem; }
.condiciones li { color: var(--ash); font-size: 0.85rem; padding: 0.35rem 0 0.35rem 1.4rem; position: relative; }
.condiciones li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

.steps {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.steps li { border-top: 2px solid var(--charcoal); padding-top: 1.5rem; }
.step-num { display: block; font-size: 0.8rem; font-stretch: 62%; letter-spacing: 0.24em; color: var(--accent); margin-bottom: 0.9rem; }
.steps h3 { font-size: 1.3rem; font-weight: 800; font-stretch: 115%; text-transform: uppercase; margin-bottom: 0.6rem; }
.steps p { color: var(--ash); font-size: 0.95rem; }

.inscripcion-cta { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta-note { font-size: 0.8rem; font-stretch: 80%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); }

/* ---------- Contacto ---------- */

.contact-links { border-top: 1px solid var(--charcoal); }
.contact-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 2rem 0; border-bottom: 1px solid var(--charcoal);
}
.contact-kind { font-size: 0.75rem; font-stretch: 62%; letter-spacing: 0.24em; text-transform: uppercase; color: var(--steel); }
.contact-value {
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  font-weight: 800; font-stretch: 115%; text-transform: uppercase; line-height: 1;
  text-align: right;
  overflow-wrap: anywhere;
  transition: color .2s ease;
}
a.contact-link:hover .contact-value { color: var(--accent); }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--iron); padding-top: 3rem; overflow: hidden; }

.footer-grid {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 3rem;
}
.footer-copy { font-size: 0.78rem; color: var(--steel); font-stretch: 80%; letter-spacing: 0.08em; }
.footer-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-nav a { font-size: 0.75rem; font-stretch: 80%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); transition: color .2s ease; }
.footer-nav a:hover { color: var(--accent); }

.footer-word {
  /* "Extream Rollers" mide ~12.2em: 8vw ≈ 97vw de ancho, encaja de borde a borde */
  font-size: 8vw;
  font-weight: 900; font-stretch: 115%;
  text-transform: uppercase; line-height: 0.78;
  text-align: center; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--charcoal);
  transform: translateY(0.12em);
  user-select: none;
}

/* ---------- Animaciones de scroll ---------- */

.js .reveal,
.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.9,.3,1);
}
/* red de seguridad: si main.js no llega a ejecutarse (404, error), el contenido aparece solo.
   main.js añade .js-ready al final y desactiva estas animaciones antes de que disparen. */
.js:not(.js-ready) .reveal,
.js:not(.js-ready) .reveal-stagger > *,
.js:not(.js-ready) .hero-title .line > span { animation: reveal-fallback 0s 2.5s forwards; }
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }
.js .reveal.in,
.js .reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.js .reveal-stagger.in > :nth-child(2) { transition-delay: .12s; }
.js .reveal-stagger.in > :nth-child(3) { transition-delay: .24s; }
.js .reveal-stagger.in > :nth-child(4) { transition-delay: .36s; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav, .btn-nav { display: none; }
  .menu-toggle { display: flex; }
  .club-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .precios { grid-template-columns: 1fr; }
  .band-title { white-space: normal; text-align: center; padding: 0 var(--pad); }
  .contact-link { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .contact-value { text-align: left; }
}

@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .horario-list li {
    grid-template-columns: auto 1fr;
    grid-template-areas: "dia hora" "grupo grupo" "estado estado";
    gap: 0.35rem 1rem;
  }
  .h-dia { grid-area: dia; }
  .h-hora { grid-area: hora; }
  .h-grupo { grid-area: grupo; }
  .h-estado { grid-area: estado; justify-self: start; }
}

@media (max-width: 600px) {
  .hero-title { font-size: clamp(2.9rem, 16vw, 12rem); }
  .hero-sub br { display: none; }
  .display { font-size: clamp(2.1rem, 11vw, 6.75rem); }
  .display-xl { font-size: clamp(2.4rem, 10vw, 8.5rem); }
  .contact-value { font-size: clamp(0.95rem, 4.3vw, 2.6rem); }
}

@media (min-width: 901px) {
  /* red de seguridad: el overlay móvil nunca debe existir en escritorio */
  .mobile-menu { display: none !important; }
}

/* ---------- Modo QA (capturas sin animaciones) ---------- */

html.qa { scroll-behavior: auto; }
.qa .marquee-track { animation: none; }
.qa .hero-title .line > span { transform: none !important; animation: none !important; }
.qa .reveal, .qa .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Nota: por decisión del club, el sitio NO desactiva sus animaciones con
   prefers-reduced-motion ("eliminar animaciones" del móvil). Solo el modo
   QA (?qa=1) las congela, para capturas deterministas. */