/* ============================================================
   sections.css — contenido con scroll bajo la pantalla inicial
   ============================================================ */

/* indicador "baja" en la sección inicial */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: var(--z-stage);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5em;
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0;
  animation: fade-up 1s ease 1.8s forwards;
}
.scroll-cue__arrow {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--red-glow);
  border-bottom: 2px solid var(--red-glow);
  transform: rotate(45deg);
  animation: cue-bounce 1.6s ease-in-out infinite;
}
@keyframes cue-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .4; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* encabezado de sección */
.section__kicker {
  font-size: var(--step--1);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--red-glow);
  text-shadow: 0 0 10px var(--red);
}
.section__title {
  margin-top: var(--space-2);
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 0 8px var(--red-glow), 0 0 30px var(--red-deep);
}
.section__lead {
  margin-top: var(--space-3);
  max-width: 60ch;
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--ink);
}
.section__lead b { color: var(--red-glow); font-weight: 700; }

/* sección del juego */
.play {
  text-align: center;
  overflow: hidden;
}
.play__frame {
  margin: var(--space-5) auto 0;
  max-width: 720px;
  padding: var(--space-5) var(--space-3);
  border: 1px solid rgba(255, 59, 87, .3);
  border-radius: var(--radius);
  background: rgba(5, 1, 10, .5);
  box-shadow: 0 0 50px rgba(255, 30, 60, .18);
}
.play .section__lead { margin-inline: auto; }
.cta--static { animation: none; opacity: 1; }
.cta--lg { font-size: var(--step-1); padding: 1em 2em; }

/* pie de página */
.footer {
  border-top: 1px solid rgba(255, 59, 87, .2);
  padding: var(--space-4) 6vw calc(var(--space-4) + env(safe-area-inset-bottom));
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
}
.footer__links {
  display: flex;
  gap: var(--space-4);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer__links a { color: var(--ink-dim); transition: color .2s ease, text-shadow .2s ease; }
.footer__links a:hover { color: var(--red-glow); text-shadow: 0 0 10px var(--red); }

/* ---------- revelado al hacer scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
[data-reveal="2"] { transition-delay: .12s; }
[data-reveal="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .scroll-cue, .scroll-cue__arrow { animation: none; opacity: .7; }
}