/* Trabajo Astra@ · R2 · same original layers; one route controlled by app.js.
   Static composition remains available with no script or reduced motion. */
.ruta-claro,.ruta-escenario{position:relative}
.ruta-rama{display:none;position:absolute;left:0;top:0;max-width:none;height:auto;z-index:8;pointer-events:none;opacity:0}
.tramo-claro{--c-prev:#F4E4C2;background:#c79e45}
.tramo-claro .tramo-fondo{container-type:size;background:linear-gradient(#f6e8ce 8%,#ecd4a3 52%,#c79e45)}
.tramo-claro .capas{display:block;position:absolute;inset:0;--cw:min(100cqw,220cqh);--cx:calc((100cqw - var(--cw)) / 2);--clear:max(calc(var(--cw) * .88),172cqh)}
.tramo-claro [data-capa="forest"]{width:calc(var(--cw) * 1.26);transform:translate(calc(var(--cx) - var(--cw) * .13),-7.6cqh)}
.tramo-claro [data-capa="mist"]{width:calc(var(--cw) * .85);transform:translate(calc(var(--cx) + var(--cw) * .12),4.6cqh);opacity:.13}
.tramo-claro [data-capa="clearing"]{width:var(--clear);transform:translate(var(--cx),5.8cqh)}
.tramo-claro [data-capa="cabin"]{width:calc(var(--clear) * .24);transform:translate(calc(var(--cx) + var(--clear) * .60),calc(5.8cqh + var(--clear) * .0478))}
.tramo-claro [data-capa="manolito"]{width:calc(var(--cw) * .072);transform:translate(calc(var(--cx) + var(--clear) * .40 - var(--cw) * .036),calc(5.8cqh + var(--clear) * .46687 - var(--cw) * .15542))}
.tramo-claro [data-capa="branch-left"]{width:calc(var(--cw) * .4);transform:translate(calc(var(--cx) - var(--cw) * .18),11.5cqh)}
.tramo-claro [data-capa="branch-right"]{width:calc(var(--cw) * .39);transform:translate(calc(var(--cx) + var(--cw) * .82),11.25cqh)}
.pelicula .ruta-claro,.pelicula .ruta-escenario{display:contents}
.pelicula .ruta-rama,.ruta-activa .ruta-rama{display:block}
.pelicula #claro{z-index:3}
.pelicula #claro .tramo-texto{width:min(36vw,30rem)}
.pelicula #paseo{height:calc(7 * 100svh)}
/* R17: valley, path and clearing share the same stage on every animated viewport. */
.ruta-activa .ruta-claro,.ruta-activa .ruta-escenario{display:contents}
.ruta-activa .paseo-escenario{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:#f4e4c2}
@supports(height:100dvh){.ruta-activa .paseo-escenario{height:100dvh}}
.ruta-activa .paseo-escenario .tramo{position:absolute;inset:0;min-height:0;height:100%;margin:0}
.ruta-activa #claro{z-index:3}
.ruta-activa .paseo-escenario .tramo-texto{opacity:0;translate:0 8px;transition:opacity .6s var(--ease),translate .6s var(--ease);pointer-events:none}
.ruta-activa .paseo-escenario .tramo-texto.ruta-visible{opacity:1;translate:none;pointer-events:auto}
.ruta-activa .paseo-escenario .tramo::before,.ruta-activa .paseo-escenario .tramo::after{display:none}
.camino-continuo{--camino-borde:-24%;-webkit-mask-image:linear-gradient(165deg,#000 calc(var(--camino-borde) - 12%),transparent calc(var(--camino-borde) + 12%));mask-image:linear-gradient(165deg,#000 calc(var(--camino-borde) - 12%),transparent calc(var(--camino-borde) + 12%))}
@media(orientation:portrait){
  .tramo-claro .capas{--cw:min(145cqw,73cqh);--clear:calc(var(--cw) * 1.55)}
  .tramo-claro [data-capa="forest"]{width:calc(var(--cw) * 1.65);transform:translate(calc(var(--cx) - var(--cw) * .35),18.4cqh)}
  .tramo-claro [data-capa="mist"]{width:calc(var(--cw) * 1.28);transform:translate(calc(var(--cx) - var(--cw) * .12),17.6cqh)}
  .tramo-claro [data-capa="clearing"]{width:var(--clear);transform:translate(calc(var(--cx) - var(--cw) * .5),35.3cqh)}
  .tramo-claro [data-capa="cabin"]{width:calc(var(--cw) * .42);transform:translate(calc(var(--cx) + var(--cw) * .412),calc(35.3cqh + var(--cw) * .01866))}
  .tramo-claro [data-capa="manolito"]{width:calc(var(--cw) * .105);transform:translate(calc(var(--cx) + var(--cw) * .23025),calc(35.3cqh + var(--cw) * .42724))}
  .tramo-claro [data-capa="branch-left"]{width:calc(var(--cw) * .68);transform:translate(calc(var(--cx) - var(--cw) * .44),13.5cqh)}
  .tramo-claro [data-capa="branch-right"]{width:calc(var(--cw) * .62);transform:translate(calc(var(--cx) + var(--cw) * .79),11.25cqh)}
  #claro .tramo-texto{padding-top:calc(var(--cab-h) + 14px);max-width:100%;width:100%}
  #claro .tramo-texto h2{font-size:clamp(1.9rem,8.4vw,3.3rem);max-width:10em}
  #claro .tramo-texto .eti{font-size:.65rem;margin-bottom:12px}
  #claro .tramo-velo{background:linear-gradient(rgb(246 232 206/.94),rgb(246 232 206/.88) 25%,transparent 49%)}
}
@media(orientation:landscape) and (max-height:559px){
  #claro .tramo-velo{background:radial-gradient(ellipse 42% 82% at 18% 36%,rgb(250 234 200/.98),rgb(250 234 200/.85) 42%,transparent 82%)}
  #claro .tramo-texto{position:absolute;left:4%;top:24%;width:38%;padding:0;text-align:left}
  #claro .tramo-texto h2{font-size:clamp(1.4rem,4vh,2rem)}
  #claro .tramo-texto .eti{font-size:.6rem;margin-bottom:10px}
}
@media print{.ruta-activa #paseo{height:auto!important}.ruta-activa .paseo-escenario{position:relative;height:auto;overflow:visible}.ruta-activa .paseo-escenario .tramo{position:relative;min-height:100vh;visibility:visible!important;opacity:1!important}.camino-continuo{mask-image:none;-webkit-mask-image:none}.ruta-rama{display:none!important}.ruta-activa .paseo-escenario .tramo-texto{opacity:1;translate:none}}

/* R2.1 · el único acceso vuelve a los estantes; el claro conserva su escena propia. */
.libros .entrar{white-space:normal;text-align:center;line-height:1.4;max-width:100%}

/* R3 · horizontal corto: el titular y la entrada caben sobre los estantes,
   también al llegar directamente a #libros con el margen de navegación. */
@media(orientation:landscape) and (max-height:559px){
  #libros .escena-titulo{padding:calc(var(--cab-h) + 10px) 7vw 0}
  #libros .escena-titulo .eti{font-size:.6rem;margin-bottom:8px}
  #libros .escena-titulo h2{font-size:clamp(1.65rem,5.7svh,2rem);line-height:1.06;max-width:24em}
  #libros .escena-titulo .entrar-sala{margin-top:12px}
}