/* v45 · Página reorganizada (nov 2026, a pedido de Cristian):
   ¿Quién eres? → Videos → Capítulo gratis → Para niños → Portada y El libro (con la compra) →
   Videojuego → Juega y explora (Hoy en el Valle, preguntas del libro, cartas, frases, respira) →
   Comunidad → Redes → Quién está detrás. Primero lo gratis; la compra llega después de ver el libro. */

/* Capítulo de muestra: va solo, justo después de los videos */
.book-leer .book-preview { margin-top: 0; padding-top: 0; border-top: 0; }

/* Frase y pregunta para hoy: arriba, debajo de «¿Quién eres?» */
.para-hoy {
  padding: 6px var(--px) 34px;
  background: #1d1630;
  border-bottom: 1px solid #9c78eb33;
}
.para-hoy .hero-duo { border-top: 0; max-width: 1320px; margin: 0 auto; }
@media (max-width: 900px) {
  .para-hoy { padding-top: 4px; padding-bottom: 28px; }
}

/* La portada ya no es lo primero: una línea suave la separa de «Para niños» */
#inicio { border-top: 1px solid #9c78eb33; }

/* Quién está detrás: al final de la página */
.autor-final {
  background:
    radial-gradient(ellipse at 50% 0%, #7650d226, transparent 65%),
    #1b1530;
  border-top: 1px solid #9c78eb33;
}
.autor-final .book-author { margin: 0 auto; }

/* Juega y explora: la entrada a todo lo interactivo */
.interactivo-intro {
  padding: 72px var(--px) 40px;
  background:
    radial-gradient(60% 80% at 10% 0%, #d9ec3c1c 0%, transparent 70%),
    radial-gradient(50% 70% at 95% 100%, #9c78eb26 0%, transparent 70%),
    #161126;
  border-top: 3px solid #110d1d;
}
.interactivo-in {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 56px;
  align-items: end;
}
.interactivo-in h2 { margin: 8px 0 0; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.05; }
.interactivo-in h2 em { color: var(--lime); }
.interactivo-in .eyebrow { margin: 0; color: var(--lime); }
.interactivo-in p:not(.eyebrow) { margin: 0; color: #d8cfe2; font-size: 17px; line-height: 1.6; max-width: 58ch; }
.interactivo-atajos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.interactivo-atajos a {
  padding: 8px 14px;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  background: #ffffff0a;
  color: var(--fg);
  font: 600 14px/1.2 "DM Sans", Arial, sans-serif;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.interactivo-atajos a:hover { background: #ffffff16; border-color: var(--lime); }
.interactivo-atajos a:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
@media (max-width: 800px) {
  .interactivo-intro { padding: 56px var(--px) 28px; }
  .interactivo-in { grid-template-columns: minmax(0, 1fr); }
}