/* base.css — reset, tipografía base, grilla/ritmo, canvas persistente, reduced-motion */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* overflow-x: clip en AMBOS (html y body): impide el scroll horizontal residual que dejaban
   los offsets de transform de las animaciones de entrada (.capa del descenso, .frow…) en
   pantallas angostas. `clip` no crea contenedor de scroll → no afecta a position:fixed. */
html { scroll-behavior: auto; overflow-x: clip; }   /* Lenis maneja el smooth */
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }

/* Canvas persistente del cerebro — fijo, detrás del contenido, nunca se desmonta */
#scene-root {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#scene-root canvas { display: block; width: 100% !important; height: 100% !important; }

/* El contenido scrollea por encima del canvas */
#content { position: relative; z-index: 1; }

/* Acto = sección de pantalla completa que respira */
.act {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Padding SOLO vertical. El gutter horizontal lo dan los contenedores internos
     (.cancha/.versus/.meet… usan width:min(Npx, 92vw) + margin:0 auto → 4vw a cada lado).
     Antes era `var(--act-pad) 6vw`: 6vw de padding + 92vw del inner = 104vw → desbordaba y
     DESCENTRABA el contenido (p. ej. el título de versus) cuando aparecía la barra de scroll. */
  padding: var(--act-pad) 0;
  text-align: center;
}
.act__label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Tipografía base */
h1, h2 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin: 0; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
.display { font-family: var(--display); font-weight: 400; font-size: var(--fs-display); line-height: 0.95; }
.accent  { font-family: var(--serif-accent); font-style: italic; font-weight: 500; color: var(--accent-deep); }
.eyebrow {
  font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--dim);
}

/* Accesibilidad: respetar reduced-motion (estados finales, sin teatro) */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}