/* ============================================================
   layout.css — estructura general de la página con scroll
   ============================================================ */

/* overlays CRT: fijos, cubren el viewport siempre */
.crt {
  position: fixed;
  inset: 0;
  z-index: var(--z-vignette);
  pointer-events: none;
}

/* ---------- sección inicial a pantalla completa ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5) 6vw;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-scene);
}
.hero__content {
  position: relative;
  z-index: var(--z-stage);
  transform: translateY(calc(var(--hero-parallax, 0) * -40px));
  opacity: calc(1 - var(--hero-parallax, 0) * 1.1);
  will-change: transform, opacity;
}

/* ---------- secciones de contenido ---------- */
.section {
  position: relative;
  padding: clamp(4rem, 12vh, 9rem) 6vw;
  max-width: 1100px;
  margin-inline: auto;
  isolation: isolate;
}
.section__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---------- capa del juego: ocupa toda la pantalla ---------- */
.game-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.game-layer[data-state="active"] {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease;
}

/* HUD del juego */
.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
}
@media (max-width: 560px) {
  .hud { padding: var(--space-1) var(--space-2); font-size: .62rem; }
}