/* Astra R5 · EXPERIMENT. Elevación sobre muelle y presión angular independientes. */
@font-face{font-family:AstraCaveat;src:url(assets/astra-caveat-latin.woff2) format('woff2');font-style:normal;font-weight:600;font-display:swap}
#personajes{background:#281b11;--c:#281b11;--texto:#f7e5c9;--texto-rgb:247 229 201}
#personajes .escena{height:100svh;min-height:640px;overflow:hidden;container-type:size;perspective:1200px}
#personajes .escena-banda{position:absolute;inset:0;height:100%;overflow:hidden}
#personajes .lienzo-marco{inset:16% 0 0}
#personajes .lienzo{--fy:.5!important;--fx:.5!important}
#personajes .escena-velo{background:linear-gradient(#281b11 8%,rgb(40 27 17/.96) 20%,transparent 40%,transparent 64%,rgb(20 12 7/.7) 82%)}
#personajes .escena-velo::after{display:none}
#personajes .escena-banda::before,#personajes .escena-banda::after{display:none}
#personajes .escena-titulo{top:0;padding:calc(var(--cab-h) + 14px) 24px 0;z-index:5;opacity:1;transform:none}
#personajes .escena-titulo h2{font-size:clamp(2rem,5.2cqh,3.8rem);line-height:1.04;max-width:14em}
#personajes .escena-titulo .eti{margin-bottom:12px;font-size:.65rem}
#personajes .mostrador-pop{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;padding:0;aspect-ratio:auto;z-index:4;perspective:1200px;pointer-events:none}
#personajes .pj{position:absolute;left:30%;bottom:39.7%;width:0;height:0;--alto:28.8cqh;--margen:.158;--aspecto:.666667;--base-tab:28px}
#personajes .pj-cormac{left:70%;--alto:40cqh;--margen:.0794}
#personajes .pj-figura{display:block;position:relative;margin:0;width:0;height:0}
/* The wire is fixed to the timber; the card sits above it and never sinks into it. */
#personajes .pj-resorte{position:absolute;bottom:0;left:0;width:22px;max-width:none;height:var(--base-tab);translate:-50% 0;overflow:visible;z-index:1;pointer-events:none;fill:none;stroke:#cdbb92;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(1px 1px 1px #1b1008)}
#personajes .pj-resorte path{vector-effect:non-scaling-stroke}
#personajes .pj-resorte-anclaje{stroke:#9c8357;stroke-width:2.2}
#personajes .pj-recorte{position:absolute;bottom:0;left:0;width:calc(var(--alto) * var(--aspecto));height:var(--alto);translate:-50% calc(var(--alto) * var(--margen) - var(--base-tab));perspective:900px;z-index:2}
#personajes .pj-muelle{display:block;position:relative;width:100%;height:100%;border:0;margin:0;padding:0;appearance:none;background:none;color:inherit;pointer-events:auto;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;perspective:900px;outline:none}
#personajes .pj-muelle:active,#personajes .pj-muelle.pj-presionada{cursor:grabbing}
#personajes .pj-tarjeta{display:block;position:relative;width:100%;height:100%;transform-origin:50% calc((1 - var(--margen)) * 100%);transform-style:preserve-3d;filter:drop-shadow(1px 0 0 #ead9ba) drop-shadow(0 4px 3px rgb(10 4 0/.35));backface-visibility:visible}
#personajes .pj-tarjeta::before{content:"";position:absolute;z-index:-1;left:50%;bottom:calc(var(--alto) * var(--margen) - 3px);width:15px;height:6px;translate:-50% 0;background:#d9c39b;box-shadow:0 1px 2px #160a02}
#personajes .pj-muelle:focus-visible .pj-tarjeta{filter:drop-shadow(2px 0 0 #ffe68f) drop-shadow(-2px 0 0 #ffe68f) drop-shadow(0 -2px 0 #ffe68f) drop-shadow(0 4px 3px #160a02)}
#personajes .pj-muelle[aria-disabled="true"]{pointer-events:none}
#personajes .pj-recorte picture{display:block;width:100%;height:100%;-webkit-mask:url(assets/astra-manolito-mask.svg) 50% 50%/100% 100% no-repeat;mask:url(assets/astra-manolito-mask.svg) 50% 50%/100% 100% no-repeat}
#personajes .pj-cormac .pj-recorte picture{-webkit-mask-image:url(assets/astra-cormac-mask.svg);mask-image:url(assets/astra-cormac-mask.svg)}
#personajes .pj-recorte img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
#personajes .pj::before{content:"";position:absolute;left:0;top:-4px;width:clamp(30px,6cqw,100px);height:8px;translate:-50% 0;background:radial-gradient(ellipse,rgb(18 8 0/.6),transparent 70%);pointer-events:none}
#personajes .pj-apunte{position:absolute;top:46px;left:0;right:auto;width:min(36cqw,270px);translate:-50% 0;text-align:center;color:#f7e5c9;transform:rotate(-2deg);text-shadow:0 2px 12px #140c07}
#personajes .pj-cormac .pj-apunte{transform:rotate(2deg)}
#personajes .pj-nombre{font:600 clamp(2.1rem,4.8cqh,3.1rem)/.95 AstraCaveat,var(--display);margin-bottom:14px}
#personajes .pj-apunte .l{font:600 clamp(1.05rem,2.25cqh,1.35rem)/1.08 AstraCaveat,var(--lectura);max-width:24ch;margin-inline:auto;color:#f7e5c9}
#personajes .pj-flecha{position:absolute;bottom:calc(100% + 8px);left:50%;width:60px;height:45px;fill:none;stroke:#eed4a1;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;translate:-15% 0;transform:rotate(-12deg)}
#personajes .pj-cormac .pj-flecha{scale:-1 1;translate:-85% 0;transform:rotate(8deg)}
#personajes .pj-subrayado{position:absolute;top:calc(clamp(2.1rem,4.8cqh,3.1rem) * .95 - 1px);left:10%;width:80%;height:9px;fill:none;stroke:#eed4a1;stroke-width:2;stroke-linecap:round}
#personajes .popups-ayuda{position:absolute;bottom:clamp(70px,8.5cqh,100px);left:12%;right:12%;text-align:center;z-index:5;color:#f7e5c9;font:600 clamp(1.05rem,2.3cqh,1.4rem)/1.1 AstraCaveat,var(--lectura);text-shadow:0 2px 8px #140c07;pointer-events:none}
#personajes:not(.popups-ready) .popups-ayuda,#personajes:not(.popups-animados) .popups-ayuda,#personajes.popups-sin-rebote .popups-ayuda{display:none}
#personajes.popups-animados .pj-apunte{opacity:0;transition:opacity .18s}
#personajes.popups-animados .pj-apunte path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s cubic-bezier(.2,.6,.4,1)}
#personajes.popups-animados .pj-nombre,#personajes.popups-animados .pj-apunte .l{opacity:0;translate:0 4px;transition:opacity .35s,translate .35s}
#personajes.popups-animados .popups-ayuda{opacity:0;transition:opacity .4s}
#personajes.popups-anotados .pj-apunte{opacity:1}
#personajes.popups-anotados .pj-apunte path{stroke-dashoffset:0}
#personajes.popups-anotados .pj-nombre{opacity:1;translate:0 0;transition-delay:.24s}
#personajes.popups-anotados .pj-subrayado path{transition-delay:.4s}
#personajes.popups-anotados .pj-apunte .l{opacity:1;translate:0 0;transition-delay:.53s}
#personajes.popups-anotados .popups-ayuda{opacity:.85;transition-delay:1s}
#personajes.popups-sin-rebote .pj-apunte,#personajes.popups-sin-rebote .pj-apunte *,#personajes.popups-sin-rebote .popups-ayuda{transition:none!important}
#personajes.personajes-activos{height:255svh}
#personajes.personajes-activos > .escena{position:sticky;top:0}
@supports(height:100dvh){#personajes .escena{height:100dvh}#personajes.personajes-activos{height:calc(155svh + 100dvh)}}
/* R13 · Safari's visible portrait height is often lower than the device screen.
   Keep the compact title clear of the original R4 cards; the shared pose cap
   lives in astra-posturas.css so both characters retain their proportions. */
@media (orientation:portrait) and (max-width:599px) and (max-height:800px){
  #personajes .escena-titulo{padding-top:calc(var(--cab-h) + 4px)}
  #personajes .escena-titulo .eti{margin-bottom:6px}
  #personajes .escena-titulo h2{font-size:clamp(1.85rem,4.7cqh,2.15rem);line-height:1.02}
  #personajes .pj{--base-tab:18px}
}
/* R2 · 2.2 · vertical bajo (iPhone SE): los controles flotantes (sonido y pausa, 56 px abajo) tapaban la nota de Cormac
   y la ayuda, que además salía por debajo del visor. Las notas se compactan para terminar por encima de los controles y la
   ayuda sube al hueco libre de la izquierda, sobre Manolito. Figuras, muelles y repisa no se mueven. */
@media (orientation:portrait) and (max-width:599px) and (max-height:640px){
  #personajes .pj-apunte{top:28px}
  #personajes .pj-nombre{font-size:1.72rem;margin-bottom:7px}
  #personajes .pj-apunte .l{font-size:.96rem;line-height:1.04}
  #personajes .popups-ayuda{top:calc(var(--cab-h) + 150px);bottom:auto;left:4%;right:auto;width:30%;text-align:left;font-size:1rem;line-height:1.08}
}
@media(min-width:1000px) and (min-height:560px) and (min-aspect-ratio:5/4){
  #personajes .escena{min-height:560px}
  #personajes .pj{left:38%}
  #personajes .pj-cormac{left:62%}
}
@media(orientation:landscape) and (max-height:559px){
  #personajes .escena{min-height:320px}
  #personajes .escena-titulo{left:3%;right:auto;width:28%;padding:calc(var(--cab-h) + 10px) 0 0;text-align:left}
  #personajes .escena-titulo h2{font-size:clamp(1.6rem,6cqh,2.2rem)}
  #personajes .escena-titulo .eti{font-size:.58rem}
  #personajes .pj{left:55%;--alto:35.5cqh;--base-tab:20px}
  #personajes .pj-cormac{left:78%;--alto:49.3cqh}
  #personajes .pj-apunte{top:clamp(0px,calc(12cqh - 42px),8px);width:19cqw}
  #personajes .pj-nombre{font-size:clamp(1.55rem,7.8cqh,2rem);margin-bottom:9px}
  #personajes .pj-apunte .l{font-size:clamp(.94rem,4.2cqh,1.15rem);line-height:1.02}
  #personajes .pj-subrayado{top:calc(clamp(1.55rem,7.8cqh,2rem) * .95 - 1px)}
  #personajes .popups-ayuda{left:3%;right:auto;width:28%;bottom:70px;font-size:1.05rem;text-align:left}
  #personajes .pj-flecha{height:27px;width:38px;bottom:calc(100% + 2px)}
}
@media(prefers-reduced-motion:reduce){#personajes .pj-apunte,#personajes .pj-apunte *,#personajes .popups-ayuda{transition:none!important}}
@media print{#personajes.personajes-activos{height:auto}#personajes.personajes-activos > .escena{position:relative}#personajes .pj-tarjeta,#personajes .pj-apunte,#personajes .pj-apunte *{opacity:1!important;transform:none!important;translate:none!important;stroke-dashoffset:0!important}#personajes .popups-ayuda{display:none}}