/* Astra Valle R2 · textos del guion · Cuento (Fraunces), independiente del panel antiguo.
   Sólo tipografía, lectura y revelado. El cierre y el footer conservan su motor. */
:root { --acento-dia:#825716; --acento-noche:#edc77d; --acento-brillo:#ffe1a0; }
:root[data-acento="bosque"] { --acento-dia:#41613b; --acento-noche:#b8d7a5; --acento-brillo:#d7edc7; }
:root[data-acento="rio"] { --acento-dia:#285f83; --acento-noche:#a7d5ee; --acento-brillo:#d3eefd; }
:root[data-acento="brezo"] { --acento-dia:#82526f; --acento-noche:#e4b8d2; --acento-brillo:#f6d7e9; }
.d.guia {
  font-family:"Fraunces",Georgia,serif;
  font-weight:360;
  font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144;
  letter-spacing:-.02em;
  line-height:1.12;
  text-wrap:balance;
  --guia-oro:var(--acento-dia);
}
.guia-acento { color:var(--guia-oro); }
#cima-t.guia { --guia-oro:#41613b; }
.ancla .guia { --guia-oro:var(--acento-noche); }
.cita .guia { color:var(--acento-noche); --guia-oro:var(--acento-brillo); }
#noche .noche-frase.guia {
  color:#f7e5c9;
  --guia-oro:var(--acento-noche);
  max-width:15em;
  font-size:clamp(2rem,3.3vw,3.2rem);
  line-height:1.12;
}
#noche .noche-en[hidden] { display:none; }
#noche .noche-volver.guia {
  flex:0 0 auto;
  width:100%;
  margin:0 auto 8px;
  color:#f7e5c9;
  --guia-oro:var(--acento-noche);
  font-size:clamp(1.1rem,2vw,1.6rem);
  line-height:1.15;
}
.dir-panel { max-height:calc(100svh - 96px); overflow-y:auto; overscroll-behavior:contain; }
.dir-acentos button { display:flex; align-items:center; gap:7px; }
.dir-acentos button span { width:13px; height:13px; border-radius:50%; background:var(--muestra); border:1px solid currentColor; }

/* One thought per scene, with room for the longest words on a small screen. */
.tramo-texto .guia,.escena-titulo .guia { max-width:14em; }
.hero-h1.guia { line-height:1.1; }
#libros .guia { max-width:17em; }
#claro .guia { max-width:12em; }
#ventana .guia { max-width:12em; }
.cita .guia { max-width:19em; }

/* Complete phrases settle quickly; their host timelines determine when to reveal. */
.pelicula .tramo-texto.revela,.pelicula .escena-titulo.revela {
  translate:0 8px;
  transition:opacity .65s var(--ease),translate .65s var(--ease);
}
.pelicula .tramo-texto.revela.on,.pelicula .escena-titulo.revela.on { translate:none; }
.tramo-texto.aparece,.escena-titulo.aparece,.cita.aparece {
  transform:translateY(8px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.tramo-texto.aparece.visto,.escena-titulo.aparece.visto,.cita.aparece.visto { transform:none; }

@keyframes guia-bienvenida { from { opacity:0; translate:0 6px; } to { opacity:1; translate:none; } }
html.movimiento .hero-h1.guia { animation:guia-bienvenida .85s .18s both; }

@media (orientation:portrait) {
  .tramo-texto .guia,.escena-titulo .guia { font-size:clamp(1.9rem,7.6vw,3.3rem); }
  #claro .guia { font-size:clamp(1.85rem,7.6vw,3.1rem); }
  #libros .guia { font-size:clamp(1.8rem,7.4vw,3.15rem); }
  #personajes .escena-titulo .guia { font-size:clamp(1.85rem,7.6vw,3.1rem); line-height:1.12; }
  #noche .noche-frase.guia { font-size:clamp(1.65rem,6.8vw,2.8rem); }
  .cita .guia { font-size:clamp(1.85rem,7.5vw,3.25rem); }
}
@media (orientation:portrait) and (max-height:620px) {
  #noche .noche-frase.guia { font-size:1.65rem; line-height:1.08; }
}
@media (orientation:landscape) and (max-height:559px) {
  #noche .noche-frase.guia { font-size:clamp(1.4rem,3.1vw,1.9rem); }
}
@media (prefers-reduced-motion:reduce) {
  html.movimiento .hero-h1.guia { animation:none; }
  .tramo-texto.aparece,.escena-titulo.aparece,.cita.aparece { opacity:1; transform:none; transition:none; }
}