/* Consolidada R3 · magia D1 y hojas B2 hasta la puerta [EXPERIMENT].
   Lo propio de esta página: el hilo narrativo en la Fraunces del par «Cuento» (la que ya tiene la obra, obra/estilo.css .par-A), los
   acentos del guion (PalabraViva), la Ñ del hero como actor de la magia (en el sitio de la Ñ plana), la capa mágica del valle (el reveal),
   la pausa global y el rótulo de laboratorio. El paquete (magia/) no lee nada de aquí: se lo da magia/adaptadores/obra-magia.js. */

/* —— el hilo narrativo: «Sigue la magia.» · «Hasta donde aún permanece.» · «Deja que te acompañe en el camino.» (par A · Cuento) */
.hilo{font-family:"Fraunces",Georgia,serif;font-weight:360;letter-spacing:-.02em;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144}
/* el acento: un elemento en línea más, con la caja de su texto (sin relleno ni borde). inline-block para que touch-action se aplique
   (B1 · límites); no mueve nada (las pruebas lo miden frente a ?magia=0) */
.acento{font:inherit;color:inherit;letter-spacing:inherit;font-variation-settings:inherit;font-optical-sizing:inherit;background:none;border:0;padding:0;margin:0;
  display:inline-block;vertical-align:baseline;line-height:inherit;text-transform:inherit;-webkit-tap-highlight-color:transparent}
.acento:focus{outline:none}
.acento:focus-visible{outline:2px solid currentColor;outline-offset:.12em;border-radius:.1em}
html:not(.d1-magia) .acento{cursor:text}

/* —— la Ñ del hero: la regla (el viewBox del símbolo, como la Ñ plana del laboratorio de la Ñ 3D), el lienzo y la zona de gestos del actor */
/* (el cuerpo de la Ñ de la obra, obra/ene3d.js CUERPO: centro 502,75 · 168,95 y alto 205,8 en el espacio 1024 × 576 de .hero-escena, con el
   cuerpo del símbolo en 480 · 500 y alto 1000 del viewBox: la regla es ese viewBox −20 −270 1300 1290 a 0,2058 px por unidad. Así la Ñ del
   actor cae donde y como la Ñ plana de la obra, ene-reposo, y donde ponía la suya ene3d.js) */
.d1-ene-regla{position:absolute;left:calc(399.85 / 1024 * 100%);top:calc(10.484 / 576 * 100%);width:calc(267.54 / 1024 * 100%);aspect-ratio:1300 / 1290;height:auto;
  overflow:visible;pointer-events:none;visibility:hidden}
.d1-ene-lienzo{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:1;visibility:hidden}
.d1-ene-listo .d1-ene-lienzo{visibility:visible}
.d1-ene-zona{position:absolute;left:calc(352 / 1024 * 100%);top:calc(-8 / 576 * 100%);width:calc(348 / 1024 * 100%);height:calc(322 / 576 * 100%);margin:0;padding:0;border:0;
  background:transparent;cursor:default;touch-action:pan-y pinch-zoom;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:14px;z-index:2}
.d1-ene-zona:disabled{pointer-events:none}
.d1-ene-zona.sobre{cursor:grab}
.d1-ene-zona.ene-arrastre{cursor:grabbing}
.d1-ene-zona:focus{outline:none}
.d1-ene-zona:focus-visible{outline:2px dashed var(--tinta,#331C0B);outline-offset:-2px;box-shadow:0 0 0 4px rgb(247 229 201/.7)}
/* con el actor listo, la Ñ plana queda debajo, oculta (vuelve si se pierde el 3D) */
.d1-ene-listo .ene-plana{visibility:hidden}
.d1-ene-pivote{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}

/* —— la capa mágica del valle (kit/llegada/magia/valle-magia-*.webp, la de Codex), revelada por la máscara de adaptador.revelar(): un
   lienzo dentro del fondo de «la cima», encima de sus capas y debajo de su velo y su frase, con la mezcla hard-light de la capa */
.d1-revelado{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;mix-blend-mode:hard-light;max-width:none}

/* —— las escenas superpuestas solo reciben gestos cuando su frase está revelada. */
.pelicula :is(#cima,#aldea){pointer-events:none}
.pelicula :is(#cima,#aldea)[data-d1-activo] .acento{pointer-events:auto}
#claro:not([data-d1-activo]) #acento-esperandote{pointer-events:none}
#claro[data-d1-activo] #acento-esperandote{pointer-events:auto}
#acento-esperandote{color:#ad4935}
.d1-magia :is(#inicio,#cima,#aldea,#claro) .acento[aria-disabled="true"]{pointer-events:none}

/* —— la pausa global («Pausar el viento»): también las animaciones CSS de la página (la flecha de «Pasea» y el vaivén de las ramas) */
html.d1-pausa .pasea-flecha,html.d1-pausa .capa-rama img{animation-play-state:paused!important}

/* —— rótulo de laboratorio (discreto) */
.d1-rotulo{position:fixed;right:12px;top:calc(var(--cab-h,64px) + 6px);z-index:46;margin:0;padding:2px 8px;font:600 .58rem/1.3 var(--ui,system-ui),sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:rgb(51 28 11/.62);background:rgb(247 229 201/.6);border-radius:2px;pointer-events:none}
html.captura .d1-rotulo{display:none}
@media print{.d1-rotulo,.magia-lienzo{display:none!important}}

/* R3: barrido ligado a la corriente. Una capa decorativa aria-hidden permite
   mantener una tinta opaca medible para C1, sin duplicar el nombre accesible. */
#acento-permanece.r3-acento{--r3-acento:#41613B}
#acento-camino.r3-acento{--r3-acento:#915b26}
#acento-esperandote.r3-acento{--r3-acento:#ad4935}
.r3-acento{--r3-frente:-10%;position:relative;color:var(--r3-acento)}
.r3-acento > [data-palabra-texto]{visibility:hidden;color:var(--r3-acento)}
.r3-acento-tinta{position:absolute;inset:0;display:block;white-space:pre;color:var(--r3-acento);pointer-events:none;font:inherit;letter-spacing:inherit;line-height:inherit}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .r3-acento-tinta{
    background-image:linear-gradient(90deg,var(--r3-acento) calc(var(--r3-frente) - 10%),var(--tinta,#331c0b) calc(var(--r3-frente) + 10%));
    background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  }
}
@media (forced-colors:active){
  .r3-acento-tinta{background:none;color:CanvasText;-webkit-text-fill-color:currentColor}
}

/* R5 · la pista y el paseo hablan con la misma mano que las notas de los personajes.
   Viven dentro del hero existente: sus cámaras y sus gestos siguen siendo los de D1. */
.hero-pista-r5{display:none;position:absolute;left:69%;top:10%;width:180px;z-index:3;pointer-events:none;color:#342416;user-select:none}
.d1-ene-listo .hero-pista-r5{display:block}
.hero-pista-r5 p{margin:0;font:600 30px/.96 AstraCaveat,cursive;letter-spacing:-.02em;transform:rotate(-5deg);transform-origin:0 50%}
.hero-pista-r5 p span{display:block}
/* R17 · la punta queda a la derecha y por encima de la onda de la Ñ, con aire
   entre ambos trazos. La curva conserva su enlace con la nota de rotulador. */
.hero-pista-flecha{position:absolute;left:-56px;top:25px;width:140px;height:100px;overflow:visible}
.hero-pista-flecha-estrecha{display:none}
.hero-pista-flecha path,#inicio .pasea-flecha path{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.hero-pista-flecha .trazo-eco,#inicio .pasea-flecha .trazo-eco{stroke-width:1.5;opacity:.5}
#inicio .puerta,#inicio .puerta:visited,#inicio .puerta:hover,#inicio .puerta:active,#inicio .puerta:focus{color:#211b16;background:none;text-decoration:none;transition:none}
#inicio .puerta:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
#inicio .pasea{gap:10px;font:600 30px/1 AstraCaveat,cursive;letter-spacing:-.02em;color:#342416;transform:rotate(-3deg)}
#inicio .pasea-flecha{display:block;width:29px;height:42px;flex:none;animation:none}
#inicio .pasea:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:3px}
@media(max-width:600px) and (orientation:portrait){
  .hero-pista-r5{left:auto;right:calc(50% - 50vw + 12px);top:65%;width:clamp(86px,27vw,106px)}
  .hero-pista-r5 p{font-size:clamp(19px,5.6vw,22px);line-height:.98;transform:rotate(4deg)}
  .hero-pista-flecha-ancha{display:none}
  .hero-pista-flecha-estrecha{display:block;left:0;top:-93px;width:100px;height:100px}
  #inicio .pasea{font-size:28px}
}
@media(max-height:559px) and (orientation:landscape){
  /* El papel lateral aloja las pistas sin reducir ni mover la ilustración. */
  #inicio .hero-escena{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
  .hero-pista-r5{left:72%;top:15%;width:148px}
  .hero-pista-r5 p{font-size:25px}
  .hero-pista-flecha{left:-36px;top:20px;width:100px;height:72px}
  #inicio .pasea{position:absolute;left:clamp(14px,4vw,40px);top:0;font-size:25px}
  #inicio .pasea-flecha{width:24px;height:34px}
}
@media(forced-colors:active){.hero-pista-r5,#inicio .pasea,#inicio .puerta{color:CanvasText}}