/* Norteña · P1 «La llegada» · prototipo local [PROPOSAL] · 03/10/2026
   Película en scroll: escenas a sangre, parallax por capas (v14) y un día entero que avanza con el scroll.
   Variante B «Editorial sereno»: Instrument Serif + Instrument Sans, lectura en Newsreader. */

/* ---------- Fuentes (solo se descargan las que se usan) ---------- */
@font-face{font-family:"Instrument Serif";src:url(kit/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(kit/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(kit/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Newsreader";src:url(kit/fonts/newsreader-latin-opsz-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(kit/fonts/newsreader-latin-opsz-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Fraunces";src:url(kit/fonts/fraunces-latin-full-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(kit/fonts/fraunces-latin-full-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Manrope";src:url(kit/fonts/manrope-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --papel:#F7E5C9; --papel-video:#F7E5C8; --pergamino:#DABE96; --tinta:#331C0B; --tinta-2:#5E3F24;
  --hayedo:#3F442B; --claro:#C79E45; --amanecer:#FBE4AD; --ventana:#FCDA7D; --brasa:#E48E2B;
  --haya:#B25F19; --haya-oscura:#7E3F0E; --atardecer:#9D7995; --rio:#578AAB; --anil:#143A5F; --noche:#09213F;

  /* La hora del día: app.js interpola estos valores con el scroll */
  --fondo:#F7E5C8; --fondo-rgb:247 229 200;
  --cielo:#FBE4AD;
  --texto:#331C0B; --texto-rgb:51 28 11;
  --hilo:rgb(51 28 11 / .55); --hilo-punta:#B25F19;

  /* Tipografía · B «Editorial sereno» */
  --display:"Instrument Serif","Newsreader",Georgia,serif;
  --ui:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lectura:"Newsreader",Georgia,serif;
  --display-peso:400; --display-track:-.012em;

  /* Escala 1,333 (cuarta justa) */
  --t-0:.75rem;
  --t-1:1rem;
  --t-2:clamp(1.0625rem,1rem + .3vw,1.333rem);
  --t-3:clamp(1.333rem,1.15rem + .7vw,1.777rem);
  --t-4:clamp(1.777rem,1.4rem + 1.4vw,2.369rem);
  --t-5:clamp(2.1rem,1.5rem + 2.3vw,3.157rem);
  --t-6:clamp(2.369rem,1.6rem + 3.2vw,4.209rem);
  --t-7:clamp(2.8rem,1.6rem + 4.6vw,5.61rem);
  --t-h2:clamp(2.15rem,1.35rem + 2.75vw,3.6rem);

  --gutter:clamp(16px,4vw,56px);
  --cab-h:64px;
  --medida:62ch;
  --ease:cubic-bezier(.22,1,.36,1);
  --lento:1400ms; --medio:900ms;
}
@media (max-width:760px){ :root{ --cab-h:56px } }

/* Panel de dirección: las tres parejas */
.par-A{--display:"Fraunces",Georgia,serif;--ui:"Manrope",system-ui,sans-serif;--lectura:"Fraunces",Georgia,serif;--display-peso:360;--display-track:-.02em}
.par-A .d{font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144}
.par-A .l{font-variation-settings:"SOFT" 50,"opsz" 14}
.par-C{--display:"Newsreader",Georgia,serif;--ui:"Manrope",system-ui,sans-serif;--lectura:"Newsreader",Georgia,serif;--display-peso:340;--display-track:-.018em}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--fondo);color:var(--texto)}
body{margin:0;font-family:var(--ui);font-size:var(--t-1);line-height:1.55;background:var(--fondo);color:var(--texto);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
picture{display:block}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,ul{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit}
cite{font-style:italic}
.d{font-family:var(--display);font-weight:var(--display-peso);letter-spacing:var(--display-track);line-height:1.06;text-wrap:balance;font-optical-sizing:auto}
.l{font-family:var(--lectura);text-wrap:pretty;font-optical-sizing:auto}
.eti{font:600 var(--t-0)/1.2 var(--ui);letter-spacing:.18em;text-transform:uppercase}
.eti-n{display:inline-block;min-width:1.6em;font-variant-numeric:tabular-nums;opacity:.7}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.simbolos{position:absolute;width:0;height:0;overflow:hidden}
.estado{display:inline-block;font:600 10.5px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;padding:6px 8px 5px;border:1px solid currentColor;border-radius:2px}
.rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);padding-inline:var(--gutter);max-width:1640px;margin-inline:auto}
@media (max-width:760px){.rejilla{grid-template-columns:repeat(4,minmax(0,1fr))}}

:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
main:focus,section:focus,footer:focus,.paseo:focus{outline:none}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis-smooth{scroll-behavior:auto!important}
.lenis-stopped{overflow:hidden}

/* ---------- Saltar al contenido ---------- */
.saltar{position:fixed;left:var(--gutter);top:10px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--tinta);color:var(--papel);font:600 .875rem/1 var(--ui);text-decoration:none;border-radius:2px;transform:translateY(-160%);transition:transform .5s var(--ease)}
.saltar:focus{transform:none;outline:2px solid var(--ventana);outline-offset:3px}

/* ---------- Cabecera mínima fija ---------- */
.cab{position:fixed;inset:0 0 auto;z-index:50;height:var(--cab-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:var(--gutter);color:var(--cab-tinta,#331C0B);background:rgb(var(--cab-placa,247 229 201)/.72);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);transition:color .8s var(--ease),background-color .8s var(--ease)}
.cab-marca{display:inline-flex;align-items:center;gap:11px;min-height:44px;text-decoration:none}
.cab-marca .ene{width:22px;height:22px;fill:currentColor;color:inherit;flex:none;transform:translateY(-1px)}
.cab-nombre{font-family:var(--display);font-weight:var(--display-peso);font-size:1.5rem;line-height:1;letter-spacing:.005em}
.cab-lista{display:flex;gap:clamp(14px,2.2vw,34px)}
.cab-lista a{display:inline-flex;align-items:center;min-height:44px;font:500 .8125rem/1 var(--ui);letter-spacing:.07em;text-decoration:none;background:linear-gradient(currentColor,currentColor) 50% calc(100% - 12px)/0 1px no-repeat;transition:background-size .8s var(--ease)}
.cab-lista a:hover,.cab-lista a:focus-visible{background-size:100% 1px}
.cab-indice{display:none}
/* Trabajo Astra@ · M01: solo la marca recibe el toque. El encabezado deja de ser
   una placa translúcida a todo el ancho; su fondo local protege la lectura. */
.cab#cab{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
.cab#cab .cab-marca{pointer-events:auto;padding-inline:10px;margin-left:-10px;border-radius:4px;
  background:rgb(var(--ll-cab-placa,var(--cab-placa,247 229 201))/.82);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cab#cab .cab-nav,.cab#cab .cab-indice{pointer-events:auto}
@media (max-width:760px){
  .cab-indice{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 2px;border:0;background:none;font:600 .75rem/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
  .cab-indice::after{content:"";width:16px;height:7px;border-block:1px solid currentColor;transition:transform .6s var(--ease)}
  .cab-indice[aria-expanded="true"]::after{transform:scaleX(.6)}
  .cab-lista{position:absolute;top:calc(var(--cab-h) - 4px);right:var(--gutter);flex-direction:column;gap:0;min-width:200px;padding:8px 18px;background:var(--papel);color:var(--tinta);border-radius:3px;box-shadow:0 18px 40px -16px rgb(30 14 4/.45),0 0 0 1px rgb(51 28 11/.08);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s .5s}
  .cab-nav.abierta .cab-lista{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .cab-lista a{width:100%;min-height:48px;font-size:.9375rem;letter-spacing:.04em;background:none;border-bottom:1px solid rgb(51 28 11/.1)}
  .cab-lista li:last-child a{border-bottom:0}
  .cab-nombre{font-size:1.375rem}
}


/* ---------- Hora del día ---------- */
.chips{position:fixed;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:8px}
.hora{display:flex;align-items:center;min-height:44px;margin:0;padding:0 16px;border-radius:999px;background:rgb(var(--pie-placa,247 229 201)/.88);color:var(--pie-tinta,#331C0B);font:600 .75rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),color .8s var(--ease),background-color .8s var(--ease)}
.hora.visible{opacity:1;transform:none}
.hora-lugar{text-transform:none;letter-spacing:.02em;font:italic 400 .9375rem/1 var(--lectura)}
.pausa{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:44px;padding:0 16px 0 14px;border:1px solid rgb(var(--pie-tinta-rgb,51 28 11)/.25);border-radius:999px;background:rgb(var(--pie-placa,247 229 201)/.88);color:var(--pie-tinta,#331C0B);font:500 .75rem/1 var(--ui);letter-spacing:.06em;cursor:pointer;transition:color .8s var(--ease),background-color .8s var(--ease)}
.pausa-icono{width:9px;height:10px;border-inline:2px solid currentColor;flex:none}
.pausa.en-pausa .pausa-icono{width:0;height:0;border:0;border-left:8px solid currentColor;border-block:5px solid transparent}
html[data-pie="oscuro"]{--pie-tinta-rgb:247 229 201}
@media (max-width:760px){
  .hora{display:none}
  .pausa{padding:0;width:44px}
  .pausa-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
html:not(.js) .hora{display:none}

/* ---------- Grano de papel ---------- */
.grano{position:fixed;inset:0;z-index:70;pointer-events:none;background:url(assets/grano.png) 0 0/140px 140px;opacity:.16}

/* ================= HERO ================= */
.hero{--hv-h:min(64svh,51.75vw);--hv-top:calc(var(--cab-h) + 8px - var(--hv-h) * .052);
  position:relative;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:var(--papel-video);color:var(--tinta)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:14%;background:linear-gradient(rgb(var(--fondo-rgb)/0),var(--fondo));pointer-events:none;z-index:-1}
.hero-escena{position:absolute;left:50%;top:var(--hv-top);height:var(--hv-h);aspect-ratio:1024/576;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-composite:intersect}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-video{opacity:0;transition:opacity 1.2s var(--ease)}
.hero-video.listo{opacity:1}
.hero-texto{position:absolute;left:0;right:0;top:calc(var(--hv-top) + var(--hv-h) * .955 + clamp(8px,2.2svh,28px));display:flex;flex-direction:column;align-items:center;text-align:center;padding-inline:var(--gutter);gap:clamp(10px,2.4svh,28px)}
.hero-h1{font-size:clamp(2.25rem,min(4.7vw,7.2svh),4.6rem);line-height:1.04;max-width:none;color:var(--tinta)}
.puertas ul{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:clamp(6px,1.4vw,18px)}
.puertas li{display:flex;align-items:center}
.puertas li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.45;margin-right:clamp(6px,1.4vw,18px)}
.puerta{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font:600 .78rem/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--tinta);background:linear-gradient(currentColor,currentColor) 50% calc(50% + .95em)/0 1px no-repeat;transition:background-size .9s var(--ease),color .9s var(--ease)}
.puerta:hover,.puerta:focus-visible{background-size:calc(100% - .2em) 1px;color:var(--haya-oscura)}
.pasea{display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:0 10px;font-family:var(--display);font-style:italic;font-size:1.3rem;line-height:1;color:var(--tinta-2);text-decoration:none}
.pasea-flecha{font-style:normal;font-family:var(--ui);font-size:.95rem;display:inline-block}
html.movimiento .pasea-flecha{animation:bob 3.2s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

@media (max-aspect-ratio:4/5){
  .hero{--hv-h:min(108vw,56svh);--hv-top:calc(var(--cab-h) + 4px - var(--hv-h) * .052)}
  .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-h1{font-size:clamp(2.1rem,10vw,3.4rem);max-width:9.6em}
  .puertas ul{display:grid;grid-template-columns:repeat(2,auto);column-gap:28px;row-gap:0}
  .puertas li+li::before{display:none}
  .hero-texto{gap:clamp(6px,1.6svh,18px)}
  .pasea{font-size:1.2rem}
}
@media (max-height:640px) and (min-aspect-ratio:4/5){
  .hero-h1{font-size:clamp(2rem,6.6svh,3.4rem)}
  .hero-texto{gap:6px}
}
/* web v2 · la Ñ 3D del hero [PROPOSAL], por defecto desde el 10/10/2026. La imagen plana va en el HTML (también con ?ene=2d); la zona
   de toque y la capa del lienzo las pone el script del hero solo con la Ñ 3D (html.ene3d). Medidas en el espacio 1024×576 de
   .hero-escena. La imagen plana (la Ñ en reposo y su halo) cubre el rectángulo del mundo x −0,65…0,929 · y −0,670…0,875 (alto del
   cuerpo = 1 = 205,8 px), centrado en el cuerpo de la Ñ (502,75 · 168,95: el del fotograma clave nuevo, subido 4 px para encajar el
   canal con la cinta): las mismas constantes que CUERPO y RECORTE en ene3d.js. Asoma un poco por encima de la escena, donde su máscara
   la recorta igual que el lienzo recorta el halo. El navegador la pinta redondeada al píxel del dispositivo y ene3d.js coloca la Ñ del
   lienzo en ese rectángulo. */
.ene-plana{position:absolute;left:calc(368.98 / 1024 * 100%);top:calc(-11.125 / 576 * 100%);width:calc(325 / 1024 * 100%);height:calc(318 / 576 * 100%);max-width:none;pointer-events:none;-webkit-user-select:none;user-select:none}
.ene-plana.oculta{visibility:hidden}
.ene-toque{position:absolute;left:calc(376 / 1024 * 100%);top:calc(6.2 / 576 * 100%);width:calc(301.9 / 1024 * 100%);height:calc(293.8 / 576 * 100%);touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
html.ene-listo .ene-toque{cursor:grab}
html.ene-arrastre .ene-toque{cursor:grabbing}
.ene-capa{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.ene-capa canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s linear}
.ene-capa canvas.visible{opacity:1}

/* ================= MANIFIESTO ================= */
.manifiesto{position:relative;padding-block:clamp(110px,18svh,200px) clamp(80px,12svh,150px)}
.manifiesto-texto{grid-column:3 / span 8;font-size:clamp(1.65rem,1.1rem + 1.9vw,2.6rem);line-height:1.2;letter-spacing:-.006em;text-wrap:pretty}
.frase{transition:opacity 1.2s var(--ease)}
.caminos{grid-column:3 / span 8;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(48px,8svh,88px)}
.caminos li{padding-top:18px;border-top:1px solid rgb(var(--texto-rgb)/.28);font:400 var(--t-2)/1.4 var(--lectura)}
.caminos strong{display:block;font-size:var(--t-3);font-style:italic;margin-bottom:4px}
.caminos span{color:rgb(var(--texto-rgb)/.82)}
.mapa{grid-column:2 / span 10;margin-top:clamp(56px,10svh,110px);mix-blend-mode:multiply}
.mapa img{width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 98%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 98%)}
@media (max-width:760px){
  .manifiesto-texto,.caminos{grid-column:1 / -1}
  .caminos{grid-template-columns:1fr;gap:0}
  .caminos li{padding-block:16px}
  .mapa{grid-column:1 / -1;margin-inline:calc(var(--gutter) * -1)}
}

/* ================= EL PASEO ================= */
.paseo{position:relative}
.paseo-escenario{position:relative}
.tramo{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
.tramo-fondo{position:absolute;inset:0;overflow:hidden}
.tramo-plano img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;object-position:var(--px,50%) var(--py,50%)}
.capas,.hojas,.rayos{display:none}
.tramo-velo{position:absolute;inset:0;pointer-events:none;z-index:1}
.tramo-texto{position:relative;z-index:2;padding:calc(var(--cab-h) + clamp(28px,7svh,72px)) var(--gutter) 0;margin-inline:auto;text-align:center;max-width:min(100%,46rem)}
.tramo-texto .eti{margin-bottom:clamp(14px,2.2svh,22px);color:var(--tinta)}
.tramo-texto h2{font-size:var(--t-h2);max-width:8.4em;margin-inline:auto;color:var(--tinta)}
.tramo-sub{margin-top:clamp(12px,2svh,20px);font-size:var(--t-2);font-style:italic;color:var(--tinta-2)}
.paseo-salida{display:none}

/* Estático (móvil, movimiento reducido): planos maestros de la v14 con velos */
.tramo-cima .tramo-plano img{--py:100%}
.tramo-cima .tramo-velo{background:linear-gradient(rgb(247 229 200/.55),rgb(247 229 200/0) 34%)}
.tramo-aldea .tramo-velo{background:linear-gradient(rgb(247 231 204/.92),rgb(247 231 204/.62) 26%,rgb(247 231 204/0) 46%)}
.tramo-hayedo .tramo-velo{background:linear-gradient(rgb(244 222 170/.9),rgb(244 222 170/.55) 24%,rgb(244 222 170/0) 42%)}
.tramo-claro .tramo-velo{background:linear-gradient(rgb(246 220 170/.92),rgb(246 220 170/.6) 26%,rgb(246 220 170/0) 46%)}
@media (min-aspect-ratio:1/1){
  .tramo-aldea .tramo-velo,.tramo-hayedo .tramo-velo,.tramo-claro .tramo-velo{background:radial-gradient(ellipse 46% 40% at 50% 14%,rgb(247 231 204/.88),rgb(247 231 204/.5) 55%,rgb(247 231 204/0))}
}

/* Película (escritorio con movimiento): un escenario fijado y las escenas superpuestas */
.pelicula .paseo-escenario{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;background:linear-gradient(180deg,var(--fondo) 0%,var(--cielo) 18%,var(--cielo) 34%,var(--fondo) 92%)}
.pelicula .tramo{position:absolute;inset:0;min-height:0;opacity:0}
.pelicula .tramo-cima{opacity:1}
.pelicula .tramo-plano{display:none}
.pelicula .capas{display:block;position:absolute;inset:0}
.capa{position:absolute;left:0;top:0;max-width:none;height:auto;transform-origin:0 0;pointer-events:none;user-select:none;-webkit-user-select:none}
.capa-rama{display:block}
.capa-rama img{display:block;width:100%;height:auto;max-width:none}
html.movimiento .capa-rama.izq img{transform-origin:6% 92%;animation:mecer 9s ease-in-out infinite alternate}
html.movimiento .capa-rama.der img{transform-origin:94% 90%;animation:mecer 10.5s ease-in-out -3s infinite alternate-reverse}
@keyframes mecer{from{transform:rotate(-.35deg)}to{transform:rotate(.4deg)}}
.capa-rama.calida img{filter:sepia(.16) saturate(1.12) hue-rotate(-10deg) brightness(1.05) contrast(.97)}
.capas[data-set="valle"]{-webkit-mask-image:linear-gradient(0deg,transparent,#000 9%,#000 93%,transparent);mask-image:linear-gradient(0deg,transparent,#000 9%,#000 93%,transparent)}
.capas[data-set="camino"]{-webkit-mask-image:linear-gradient(0deg,transparent,#000 10%,#000 95%,transparent);mask-image:linear-gradient(0deg,transparent,#000 10%,#000 95%,transparent)}
.capa-suelo{-webkit-mask-image:linear-gradient(#000 0%,#000 89%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 89%,transparent 100%)}
.capa-borde{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.capa-bruma{-webkit-mask-image:radial-gradient(ellipse,#000 18%,transparent 69%);mask-image:radial-gradient(ellipse,#000 18%,transparent 69%)}
.capa-claro{-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.casa-luz{display:block;mix-blend-mode:screen;opacity:0;background:radial-gradient(ellipse at 50% 55%,#fff3c4,#ffc35a 55%,#f0902c);filter:blur(5px);clip-path:polygon(0 3.8%,100% 0,100% 96.2%,0 100%)}
.pelicula .hojas{display:block;position:absolute;inset:0;pointer-events:none;z-index:1}
.hoja{position:absolute;top:0;width:clamp(28px,2.6vw,46px);height:auto;filter:drop-shadow(0 3px 3px rgb(64 40 18/.18))}
.hoja.h1{left:66%}.hoja.h2{left:80%;width:clamp(22px,2vw,36px)}.hoja.h3{left:44%;width:clamp(18px,1.6vw,30px)}
.pelicula .rayos{display:block;position:absolute;left:-10%;top:-12%;width:120%;height:auto;max-width:none;opacity:0;pointer-events:none;z-index:6;mix-blend-mode:screen}
.paseo-luz{display:none}
.pelicula .paseo-luz{display:block;position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:rgb(255 244 214)}
.pelicula .tramo-texto{position:absolute;margin:0;padding:0;max-width:none}
.pelicula .tramo-cima .tramo-texto,.pelicula .tramo-aldea .tramo-texto{left:50%;top:calc(var(--cab-h) + 5svh);width:min(86vw,46rem);transform:translateX(-50%)}
.pelicula .tramo-hayedo .tramo-texto{left:64%;top:calc(var(--cab-h) + 9svh);width:min(40vw,34rem);transform:translateX(-50%)}
.pelicula .tramo-claro .tramo-texto{left:max(var(--gutter),9vw);top:calc(var(--cab-h) + 6svh);width:min(40vw,34rem);text-align:left}
.pelicula .tramo-claro .tramo-texto h2{margin-inline:0}
.pelicula .tramo-velo{background:none}
.pelicula .tramo-aldea .tramo-velo{background:radial-gradient(ellipse 46% 46% at 50% 22%,rgb(250 240 220/.9),rgb(250 240 220/.62) 52%,rgb(250 240 220/0) 82%)}
.pelicula .tramo-hayedo .tramo-velo{background:radial-gradient(ellipse 32% 34% at 64% 25%,rgb(252 238 196/.82),rgb(252 238 196/.5) 50%,rgb(252 238 196/0) 76%)}
.pelicula .tramo-claro .tramo-velo{background:radial-gradient(ellipse 40% 42% at 22% 24%,rgb(250 234 200/.86),rgb(250 234 200/.55) 50%,rgb(250 234 200/0) 78%)}
.pelicula .paseo-salida{display:block;position:absolute;inset:0;z-index:7;background:var(--fondo);opacity:0;pointer-events:none}

/* ================= LIENZO: «cover» con punto focal y coordenadas de la imagen ================= */
.lienzo-marco{position:absolute;inset:0;overflow:hidden;container-type:size}
.lienzo{position:absolute;aspect-ratio:var(--ar);width:max(100cqw,calc(100cqh * var(--ar)));
  left:calc((100cqw - max(100cqw,calc(100cqh * var(--ar)))) * var(--fx,.5));
  top:calc((100cqh - max(100cqh,calc(100cqw / var(--ar)))) * var(--fy,.5));
  transform-origin:var(--ox,50%) var(--oy,50%)}
.lienzo > picture img,.lienzo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lienzo-video{position:absolute;top:var(--vy,0);left:var(--vx,0);width:var(--vw,100%);height:var(--vh,100%);object-fit:cover;opacity:0;transition:opacity 1.8s var(--ease);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.lienzo-video.vertical{-webkit-mask-image:linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent)}
.lienzo-video.listo{opacity:1}
.lienzo-alto,.lofi-alto{display:none}
@media (orientation:portrait){.lienzo-ancho,.lofi-ancho{display:none}.lienzo-alto,.lofi-alto{display:block}}
.pelicula .lienzo-ancho,.pelicula .lofi-ancho{display:block}.pelicula .lienzo-alto,.pelicula .lofi-alto{display:none}

/* ================= ANCLAS: escena a sangre + contenido ================= */
.ancla{position:relative}
.escena{position:relative}
.escena-banda{position:relative;height:var(--banda-h,clamp(440px,80svh,940px));overflow:hidden;isolation:isolate;color:var(--papel)}
.escena-velo{position:absolute;inset:0;pointer-events:none}
.escena-titulo{position:absolute;z-index:3;left:0;right:0;top:0;padding:calc(var(--cab-h) + clamp(20px,5svh,56px)) var(--gutter) 0;text-align:center}
.escena-titulo .eti{margin-bottom:clamp(12px,2svh,20px);color:var(--papel)}
.escena-titulo h2{font-size:var(--t-h2);max-width:8.4em;margin-inline:auto}
.entradilla{margin:clamp(14px,2.2svh,22px) auto 0;max-width:34ch;font-size:var(--t-2);line-height:1.45;color:rgb(247 229 201/.92)}
/* banda: la imagen entra desde el color del día */
.escena-banda::before{content:"";position:absolute;inset:0 0 auto;height:18%;z-index:2;opacity:var(--entrada,1);background:linear-gradient(var(--fondo),rgb(var(--fondo-rgb)/0));pointer-events:none}
.escena-banda::after{content:"";position:absolute;inset:auto 0 0;height:16%;z-index:2;background:linear-gradient(rgb(var(--fondo-rgb)/0),var(--fondo));pointer-events:none}

/* Película: la escena ocupa la pantalla y se fija */
.pelicula .escena{height:100svh;min-height:560px;overflow:hidden;container-type:size}
.pelicula .pista{position:relative}
.pelicula .pista > .escena{position:sticky;top:0}
.pelicula .escena-banda{position:absolute;inset:0;height:auto}
.pelicula .escena-banda::after{display:none}
.pelicula .escena-banda::before{height:16%;background:linear-gradient(var(--fondo),rgb(var(--fondo-rgb)/.82) 30%,rgb(var(--fondo-rgb)/.3) 70%,rgb(var(--fondo-rgb)/0))}

/* ---------- 5 · Libros ---------- */
.libros .escena-velo{background:linear-gradient(rgb(26 13 5/calc(.78 * var(--vt,1))),rgb(26 13 5/calc(.35 * var(--vt,1))) 30%,rgb(26 13 5/0) 52%)}
.balda{position:absolute;inset:0}
.lamina{position:absolute;left:var(--x);bottom:calc(100% - var(--y));width:var(--w);transform-origin:50% 100%}
.lamina-cubierta{--x:44.2%;--y:44.7%;--w:11.2%}
.lamina-a{--x:38.1%;--y:62.8%;--w:11.7%}
.lamina-b{--x:51.3%;--y:62.8%;--w:10.6%}
.lamina-btn{display:block;width:100%;padding:3.2%;border:0;border-radius:1px;background:linear-gradient(160deg,#5a3a20,#2c180a 60%,#3d2512);cursor:zoom-in;box-shadow:0 1px 0 rgb(255 220 160/.18) inset,0 .5em 1.2em -.2em rgb(18 8 2/.65),0 .1em .25em rgb(18 8 2/.5);transition:transform 1s var(--ease),box-shadow 1s var(--ease)}
.lamina-btn picture{display:block}
.lamina-btn img{display:block;width:100%;height:auto;border:.35em solid #efe0c2;box-shadow:0 0 0 1px rgb(60 36 16/.35) inset}
.lamina-btn:hover{transform:translateY(-2%)}
.lamina-btn:focus-visible{outline:2px solid var(--ventana);outline-offset:4px}
@media (orientation:portrait){
  .libros{--banda-h:clamp(460px,76svh,820px)}
  .lamina-cubierta{--x:43.3%;--y:80.2%;--w:13%}
  .lamina-a{--x:38.3%;--y:62.7%;--w:11.4%}
  .lamina-b{--x:50.4%;--y:62.7%;--w:10.6%}
  .libros .escena-velo{background:linear-gradient(rgb(26 13 5/.86),rgb(26 13 5/.55) 30%,rgb(26 13 5/0) 50%)}
}
.fichas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:clamp(20px,4svh,40px);padding:clamp(20px,5svh,56px) var(--gutter) clamp(64px,12svh,120px);max-width:1640px;margin-inline:auto}
.ficha{position:relative;grid-column:span 6;background:var(--papel) url(kit/img/codex2-papel_campo-1024.webp) 50% 50%/560px;color:var(--tinta);padding:clamp(22px,2.2vw,34px);border-radius:2px;box-shadow:0 1px 0 rgb(255 255 255/.45) inset,0 22px 44px -22px rgb(30 14 4/.6),0 2px 6px rgb(30 14 4/.16)}
.ficha::before{content:"";position:absolute;inset:7px;border:1px solid rgb(51 28 11/.16);pointer-events:none}
.ficha-eti{color:var(--haya-oscura);margin-bottom:12px}
.ficha h3{font-size:var(--t-5);line-height:1}
.ficha-sub{font-size:var(--t-3);margin-top:6px;color:var(--tinta-2)}
.ficha .l{margin-top:14px;font-size:1.0625rem;line-height:1.5;max-width:var(--medida)}
.ficha .estado{margin-top:18px;color:var(--haya-oscura)}
.cerca-ambiente{margin:16px 0 0}
.cerca-ambiente .pie-honesto{margin-top:6px}
.cerca-ambiente img{width:100%;height:auto;border-radius:1px;aspect-ratio:16/7;object-fit:cover;object-position:50% 58%;filter:saturate(.92)}
.colabo{margin-top:18px;padding:14px 16px 13px;border:1px dashed rgb(51 28 11/.42);border-radius:2px}
.colabo-titulo{font-size:var(--t-3)}
.sello{display:inline-block;margin-top:8px;padding:5px 8px 4px;border:1.5px solid #8A2E12;color:#8A2E12;font:700 .6875rem/1 var(--ui);letter-spacing:.14em;transform:rotate(-2.5deg);border-radius:2px}
.colabo-nota{margin-top:8px;font:500 .8125rem/1.4 var(--ui);color:var(--tinta-2)}
.bardos{grid-column:1 / -1;justify-self:center;text-align:center;font-style:italic;font-size:var(--t-2);color:var(--texto);max-width:44ch;padding-top:8px}
@media (max-width:760px){.fichas{grid-template-columns:1fr}.ficha{grid-column:1 / -1}}
.pelicula .libros .fichas{position:absolute;inset:0;display:block;padding:0;max-width:none;pointer-events:none;z-index:4}
.pelicula .libros .ficha{position:absolute;bottom:clamp(56px,10svh,110px);width:min(25vw,372px);pointer-events:auto}
.pelicula .cerca-ambiente img{aspect-ratio:16/6}
.pelicula .libros{margin-top:-78svh;z-index:2}
.pelicula .ficha-serie{left:var(--gutter)}
.pelicula .ficha-cerca{right:var(--gutter)}
.pelicula .libros .ficha .l{font-size:1rem}
.pelicula .libros .ficha h3{font-size:clamp(1.9rem,1.2rem + 1.4vw,2.7rem)}
.pelicula .bardos{position:absolute;left:50%;bottom:clamp(22px,4svh,40px);transform:translateX(-50%);width:min(40vw,34rem);padding:0;color:var(--papel);text-shadow:0 1px 14px rgb(20 8 2/.9)}
.pelicula .libros .escena-velo::after{content:"";position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(rgb(22 10 3/0),rgb(22 10 3/.72))}

/* ---------- 6 · Personajes ---------- */
.personajes .escena-velo{background:linear-gradient(rgb(18 14 8/calc(.74 * var(--vt,1))),rgb(18 14 8/calc(.32 * var(--vt,1))) 34%,rgb(18 14 8/0) 56%)}
.mostrador{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);padding:clamp(24px,5svh,56px) var(--gutter) clamp(28px,5svh,48px);max-width:1640px;margin-inline:auto}
.pj-figura{margin:0;display:flex;flex-direction:column;gap:16px}
.pj-retrato{position:relative;padding:3.5%;background:#f2e3c6;border-radius:2px;box-shadow:0 18px 34px -18px rgb(24 10 2/.7),0 2px 5px rgb(24 10 2/.25)}
.pj-retrato img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:1px}
.pj-zorro .pj-retrato img{aspect-ratio:4/3}
.pj-nombre{font-size:var(--t-4);line-height:1;margin-bottom:8px}
.pj-texto .l{font-size:1rem;line-height:1.5;max-width:34ch}
.pj-vacio{display:grid;place-items:center;aspect-ratio:2/3;background:transparent;border:1.5px dashed rgb(var(--texto-rgb)/.45);box-shadow:none}
.pj-vacio p{font-size:var(--t-3);font-style:italic;color:rgb(var(--texto-rgb)/.85)}
.pj-nota{padding:0 var(--gutter) clamp(64px,12svh,120px);text-align:center;font:500 .875rem/1.5 var(--ui);letter-spacing:.02em;color:rgb(var(--texto-rgb)/.86)}
@media (max-width:860px){
  .mostrador{grid-template-columns:1fr;gap:28px}
  .pj-figura{flex-direction:row;align-items:flex-start;gap:18px}
  .pj-retrato{flex:0 0 38%}
  .pj-zorro .pj-figura{flex-direction:column}
  .pj-zorro .pj-retrato{flex:none;width:72%}
  .pj-hueco .pj-retrato{flex:none;width:38%}
}
/* Película: fichas de pie sobre el mostrador, en coordenadas de la imagen */
.pelicula .mostrador{position:absolute;z-index:4;display:block;padding:0;margin:0;max-width:none;aspect-ratio:1.7778;width:max(100cqw,calc(100cqh * 1.7778));left:calc((100cqw - max(100cqw,calc(100cqh * 1.7778))) * .5);top:calc((100cqh - max(100cqh,calc(100cqw / 1.7778))) * .5);perspective:1400px}
.pelicula .pj{position:absolute;left:var(--x);bottom:47.3%;width:var(--w)}
.pelicula .pj-manolito{--x:16%;--w:12.6%}
.pelicula .pj-cormac{--x:31.6%;--w:12.6%}
.pelicula .pj-zorro{--x:47.2%;--w:21.4%}
.pelicula .pj-hueco{--x:71.6%;--w:12.6%}
.pelicula .pj-figura{display:block;position:relative}
.pelicula .pj-retrato{transform-origin:50% 100%;padding:4%;background:#f0e0c0}
.pelicula .pj-retrato::after{content:"";position:absolute;left:12%;right:12%;bottom:-.55em;height:.55em;background:linear-gradient(#5b3a1f,#2e1a0b);border-radius:1px;box-shadow:0 .3em .6em rgb(10 4 0/.5)}
.pelicula .pj-vacio::after{display:none}
.pelicula .pj-vacio{background:rgb(20 12 6/.55);border-color:rgb(247 229 201/.7);border-width:1.5px}
.pelicula .pj-vacio p{color:var(--papel);font-size:clamp(1.1rem,.8rem + .9vw,1.6rem)}
.pelicula .pj-texto{position:absolute;left:0;right:0;top:calc(100% + clamp(30px,5.4cqh,58px));color:var(--papel)}
.pelicula .pj-zorro .pj-texto{right:auto;width:min(100%,19rem)}
.pelicula .pj-nombre{font-size:clamp(1.5rem,1rem + 1vw,2.1rem)}
.pelicula .pj-texto .l{font-size:clamp(.875rem,.8rem + .2vw,1rem);line-height:1.45;color:rgb(247 229 201/.92)}
.pelicula .personajes .escena-velo::after{content:"";position:absolute;inset:52% 0 0;background:linear-gradient(rgb(16 9 3/.25),rgb(16 9 3/.8) 30%,rgb(16 9 3/.9))}
.pelicula .pj-nota{position:absolute;z-index:4;left:0;right:0;bottom:clamp(16px,3svh,30px);padding:0;color:var(--papel)}

/* ---------- 7 · La ventana ---------- */
.ventana .escena-velo{background:linear-gradient(0deg,rgb(14 10 6/.86),rgb(14 10 6/.5) 26%,rgb(14 10 6/0) 50%)}
.ventana .escena-titulo{top:auto;bottom:0;padding:0 var(--gutter) clamp(36px,8svh,80px);text-align:center}
.ventana-noche{position:absolute;inset:0;opacity:0}
.ventana-noche img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ventana-salida{position:absolute;inset:0;z-index:4;background:var(--fondo);opacity:0;pointer-events:none}
.pelicula .ventana .escena-titulo{left:var(--gutter);right:auto;width:min(46vw,40rem);bottom:clamp(40px,9svh,96px);padding:0;text-align:left}
.pelicula .ventana .escena-titulo h2,.pelicula .ventana .entradilla{margin-inline:0}
.pelicula .ventana .escena-velo{background:linear-gradient(20deg,rgb(14 10 6/.9),rgb(14 10 6/.72) 32%,rgb(14 10 6/.3) 50%,rgb(14 10 6/0) 64%)}
/* Las cuatro piezas, como fichas de papel sobre la ventana en crepúsculo */
.fuera{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:18px;padding:clamp(48px,9svh,96px) var(--gutter) clamp(90px,14svh,150px);
  background:linear-gradient(rgb(9 22 42/.62),rgb(9 22 42/.78)),url(kit/img/codex2-ventana_noche_16x9-960.webp) 50% 40%/cover}
.fuera .ficha{grid-column:span 4}
.fuera .ficha-juego{grid-column:1 / span 6;grid-row:span 3}
.fuera .ficha-idea{grid-column:7 / span 6}
.fuera h3{font-size:var(--t-3);margin-top:12px}
.fuera .ficha-juego h3{font-size:var(--t-4)}
.fuera .ficha .l{margin-top:6px}
.fuera .estado{margin-top:0}
.captura:not(html){margin:16px 0 0;padding:8px;background:#1d1a17;border-radius:3px;box-shadow:0 10px 24px -14px rgb(0 0 0/.7)}
.captura:not(html) img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:1px}
.captura:not(html) .pie-honesto{color:rgb(247 229 201/.86);padding:8px 2px 0}
@media (max-width:760px){.fuera{grid-template-columns:1fr}.fuera .ficha,.fuera .ficha-juego,.fuera .ficha-idea{grid-column:1 / -1;grid-row:auto}}
.pelicula .ventana .fuera{position:absolute;inset:0;z-index:4;background:none;padding:calc(var(--cab-h) + clamp(24px,5svh,56px)) var(--gutter) clamp(72px,11svh,110px);align-content:end;pointer-events:none}
.pelicula .ventana .fuera .ficha{pointer-events:auto;padding:clamp(16px,1.5vw,24px)}
.pelicula .ventana .fuera .ficha-juego{grid-column:1 / span 4;grid-row:1 / span 3;align-self:end}
.pelicula .ventana .fuera .ficha-idea{grid-column:9 / span 4}
.pelicula .ventana .fuera .ficha-idea .l{font-size:.9375rem}
.pelicula .ventana .fuera h3{font-size:clamp(1.3rem,1rem + .7vw,1.7rem)}
.pelicula .ventana .fuera .ficha-juego h3{font-size:clamp(1.5rem,1.1rem + .9vw,2.1rem)}

/* Pies de honestidad: cursiva de lectura, 13–14 px */
.pie-honesto{margin-top:8px;font:italic 400 .84rem/1.4 var(--lectura);letter-spacing:0;text-transform:none;color:var(--tinta-2)}

/* ---------- 8 · Taller ---------- */
.taller .escena-velo{background:linear-gradient(90deg,rgb(8 6 4/.82),rgb(8 6 4/.45) 30%,rgb(8 6 4/0) 46%),linear-gradient(rgb(8 6 4/.55),rgb(8 6 4/0) 30%)}
.pantalla{position:absolute;left:37.03%;top:25.75%;width:36.82%;height:39.92%;margin:0;overflow:hidden;background:#151515;clip-path:polygon(2.12% 0,99.6% .7%,100% 100%,0 97.67%)}
.pantalla-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pantalla-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s var(--ease)}
.pantalla-video.listo{opacity:1}
.pantalla::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 2.4em rgb(255 255 255/.12);pointer-events:none}
.mano{padding:clamp(28px,6svh,64px) var(--gutter) 0;max-width:40rem;margin-inline:auto;text-align:center}
.mano .eti{color:rgb(var(--texto-rgb)/.8)}
.mano-texto{font-size:var(--t-4);margin-top:10px}
.pie{margin-top:10px;font:italic 400 1rem/1.4 var(--lectura);color:rgb(var(--texto-rgb)/.8)}
@media (orientation:portrait){
  .taller .escena-banda{height:auto;padding-bottom:min(62svh,136vw);color:var(--texto)}
  .taller .escena-banda::before{display:none}
  .taller .lienzo-marco{top:auto;height:min(62svh,136vw)}
  .taller .escena-velo{top:auto;height:min(62svh,136vw);background:linear-gradient(rgb(var(--fondo-rgb)/1),rgb(var(--fondo-rgb)/0) 22%)}
  .taller .escena-titulo{position:relative;padding-bottom:clamp(8px,2svh,20px)}
  .taller .escena-titulo .eti,.taller .entradilla{color:rgb(var(--texto-rgb)/.86)}
}
.pelicula .taller .escena-titulo{left:var(--gutter);right:auto;top:calc(var(--cab-h) + clamp(40px,12svh,140px));width:min(31vw,30rem);padding:0;text-align:left}
.pelicula .taller .escena-titulo h2,.pelicula .taller .entradilla{margin-inline:0}
.pelicula .taller .escena-titulo h2{max-width:8.6em}
.pelicula .mano{position:absolute;z-index:3;right:var(--gutter);top:calc(var(--cab-h) + clamp(40px,22svh,240px));width:min(18vw,18rem);padding:0;text-align:left;color:var(--papel)}
.pelicula .mano .eti{color:rgb(247 229 201/.8)}
.pelicula .mano-texto{font-size:clamp(1.5rem,1rem + 1.1vw,2.2rem)}
.pelicula .mano .pie{color:rgb(247 229 201/.82)}
.pelicula .taller .escena-velo{background:linear-gradient(90deg,rgb(8 6 4/.84),rgb(8 6 4/.4) 30%,rgb(8 6 4/0) 42%,rgb(8 6 4/0) 70%,rgb(8 6 4/.62) 84%,rgb(8 6 4/.82)),linear-gradient(rgb(8 6 4/.4),rgb(8 6 4/0) 24%)}
.taller-mas{padding-block:clamp(64px,12svh,140px) clamp(90px,16svh,180px);row-gap:clamp(56px,10svh,110px)}
.documental{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:end}
.documental-imagen{grid-column:1 / span 7;margin:0;overflow:hidden;border-radius:2px;box-shadow:0 30px 60px -30px rgb(0 0 0/.7)}
.documental-imagen video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0b1626}
.documental-imagen .pie-honesto{padding:10px 14px 12px;color:rgb(247 229 201/.82);background:#0b1626}
.documental-texto{grid-column:9 / span 4}
.documental-texto .eti{color:rgb(var(--texto-rgb)/.78)}
.documental-titulo{font-size:var(--t-4);margin-top:12px}
.documental-texto .l{margin-top:8px;font-size:var(--t-2)}
.enlace{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font:600 .8125rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.cita{grid-column:2 / span 10;text-align:center}
.cita p{font-size:var(--t-6);font-style:italic;line-height:1.08;max-width:15em;margin-inline:auto}
.credito{grid-column:1 / -1;text-align:center}
.credito .d{font-size:var(--t-3)}
.credito p:last-child{margin-top:6px;font:italic 400 var(--t-2)/1.4 var(--lectura);color:rgb(var(--texto-rgb)/.82)}
@media (max-width:860px){.documental{display:block}.documental-texto{margin-top:22px}.cita{grid-column:1 / -1}}

/* ================= 9 · NOCHE · pie lo-fi ================= */
.noche{position:relative;background:var(--noche);color:var(--papel);--texto:#F7E5C9;--texto-rgb:247 229 201}
.noche-encendida{position:absolute;inset:0;opacity:1}
.noche-encendida img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.noche-halo{position:absolute;left:59.7%;top:37%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgb(252 218 125/.38),rgb(252 218 125/.12) 38%,rgb(252 218 125/0) 66%);mix-blend-mode:screen;opacity:1;pointer-events:none}
html.movimiento .noche-encendida,html.movimiento .noche-halo{opacity:0}
.noche .escena-velo{background:linear-gradient(rgb(5 14 30/.7),rgb(5 14 30/0) 40%)}
.noche .escena-banda::before{background:linear-gradient(var(--fondo),rgb(var(--fondo-rgb)/0))}
.noche .escena-banda::after{background:linear-gradient(rgb(9 33 63/0),var(--noche))}
.noche-titulo .eti{color:var(--papel)}
.noche-titulo h2{font-size:var(--t-7);color:var(--papel);max-width:8em}
.noche-en{margin-top:12px;font-size:var(--t-3);font-style:italic;color:var(--ventana)}
@media (orientation:portrait){.noche{--banda-h:clamp(460px,82svh,860px)}}
.pelicula .noche-titulo{left:var(--gutter);right:auto;top:calc(var(--cab-h) + clamp(30px,9svh,110px));width:min(44vw,44rem);padding:0;text-align:left}
.pelicula .noche-titulo h2{margin-inline:0}
.pelicula .noche .escena-velo{background:linear-gradient(rgb(5 14 30/.6),rgb(5 14 30/0) 20%),linear-gradient(110deg,rgb(5 14 30/.8),rgb(5 14 30/.4) 30%,rgb(5 14 30/0) 52%)}
.lofi{position:relative;height:100svh;min-height:560px;overflow:hidden;isolation:isolate}
.lofi-velo{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(var(--noche) 0%,rgb(9 33 63/0) 22%),linear-gradient(rgb(9 33 63/0) 70%,rgb(9 33 63/.55))}
.lofi-contenido{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(80px,17svh,190px) var(--gutter) max(72px,10svh)}
.lofi-ene{width:30px;height:30px;fill:var(--ventana);margin-bottom:22px}
.lofi-frase{font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem);color:var(--papel);max-width:12em}
.lofi-en{margin-top:10px;font-size:var(--t-3);font-style:italic;color:var(--ventana)}
.lofi-linea{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:clamp(14px,2.4vw,32px);row-gap:2px;font:500 .75rem/1.4 var(--ui);color:rgb(247 229 201/.88)}
.lofi-nav ul{display:flex;flex-wrap:wrap;justify-content:center;column-gap:clamp(12px,2vw,24px)}
.lofi-nav a{display:inline-flex;align-items:center;min-height:44px;font:600 .75rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--papel);background:linear-gradient(currentColor,currentColor) 50% calc(50% + .95em)/0 1px no-repeat;transition:background-size .9s var(--ease)}
.lofi-nav a:hover,.lofi-nav a:focus-visible{background-size:100% 1px}
.lofi-redes a{display:inline-flex;align-items:center;min-height:44px;font:italic 400 1rem/1 var(--display);color:var(--ventana);text-decoration:none}
.lofi-redes a:hover{text-decoration:underline;text-underline-offset:5px}
.lofi-credito{font:400 .8125rem/1.4 var(--lectura);letter-spacing:0;text-transform:none}
.lofi-estado{font:500 .75rem/1.4 var(--ui);letter-spacing:.06em;color:rgb(247 229 201/.8)}
@media (max-width:760px){.lofi-linea{flex-direction:column}}

/* ================= Visor de láminas ================= */
.visor{width:min(92vw,1280px);max-height:92svh;padding:0;border:0;background:transparent;color:var(--papel);overflow:visible}
.visor::backdrop{background:rgb(6 18 36/.86)}
.visor figure{margin:0}
.visor-img{width:100%;height:auto;max-height:80svh;object-fit:contain;border:8px solid #efe0c2;box-shadow:0 40px 80px -30px rgb(0 0 0/.8)}
.visor figcaption{margin-top:14px;text-align:center;font:400 1rem/1.4 var(--lectura)}
.visor figcaption .eti{display:block;margin-bottom:4px;color:var(--ventana)}
.visor-cerrar-f{position:absolute;right:0;top:-54px}
.visor-cerrar{min-height:44px;padding:0 16px;border:1px solid rgb(247 229 201/.4);border-radius:999px;background:transparent;font:500 .8125rem/1 var(--ui);letter-spacing:.06em;cursor:pointer;color:var(--papel)}
.visor[open]{animation:visor-in .9s var(--ease)}
@keyframes visor-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ================= Panel de dirección ================= */
.dir-boton{position:fixed;left:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:80;width:44px;height:44px;padding:0;display:grid;place-items:center;border:1px solid rgb(var(--pie-tinta-rgb,51 28 11)/.3);border-radius:50%;background:rgb(var(--pie-placa,247 229 201)/.88);color:var(--pie-tinta,#331C0B);font:italic 400 1.25rem/1 var(--display);cursor:pointer}
.dir-panel{position:fixed;left:12px;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 56px);z-index:81;width:min(360px,calc(100vw - 2 * var(--gutter)));padding:18px 18px 14px;background:var(--papel);color:var(--tinta);border-radius:4px;box-shadow:0 30px 60px -24px rgb(20 10 2/.55),0 0 0 1px rgb(51 28 11/.1);font:400 .875rem/1.4 var(--ui)}
.dir-panel[hidden]{display:none}
.dir-t{font:600 .6875rem/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--haya-oscura);margin-bottom:12px}
.dir-panel fieldset{border:0;margin:0 0 12px;padding:0}
.dir-panel legend{padding:0;margin-bottom:6px;font-weight:600}
.dir-op{display:flex;flex-wrap:wrap;gap:6px}
.dir-op button{min-width:44px;min-height:44px;padding:0 12px;border:1px solid rgb(51 28 11/.3);border-radius:3px;background:transparent;cursor:pointer;font:500 .8125rem/1 var(--ui)}
.dir-op button[aria-pressed="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.dir-ayuda{margin-top:6px;font-size:.8125rem;color:var(--tinta-2)}
.dir-cerrar{min-height:44px;padding:0 4px;border:0;background:none;font:600 .75rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--tinta-2)}
html.captura .dir-boton,html.captura .dir-panel{display:none!important}

/* ================= Aparición tranquila ================= */
html.movimiento .aparece{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.movimiento .aparece.visto{opacity:1;transform:none}

/* ================= Movimiento reducido ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ================= Impresión ================= */
@media print{.cab,.hilo,.hora,.grano,.dir-boton,.pausa,.lofi-pausa,video{display:none!important}.pelicula .paseo-escenario{height:auto}}

/* Móvil: encuadres verticales del paseo */
@media (orientation:portrait){
  html:not(.pelicula) .tramo-hayedo{min-height:116svh}
  html:not(.pelicula) .tramo-hayedo .tramo-texto{padding-top:calc(var(--cab-h) + 10px)}
  html:not(.pelicula) .tramo-hayedo .tramo-texto h2{font-size:clamp(2rem,9vw,2.6rem)}
  .tramo-aldea .tramo-velo{background:linear-gradient(rgb(247 231 204/.95),rgb(247 231 204/.88) 36%,rgb(247 231 204/0) 60%)}
  .tramo-hayedo .tramo-velo{background:linear-gradient(rgb(246 226 176/.92),rgb(246 226 176/.6) 18%,rgb(246 226 176/0) 30%)}
}
@media (min-aspect-ratio:1/1){
  html:not(.pelicula) .tramo-hayedo .tramo-texto{margin-inline:auto 7vw;max-width:min(44vw,36rem)}
  html:not(.pelicula) .tramo-hayedo .tramo-velo{background:radial-gradient(ellipse 34% 36% at 70% 20%,rgb(252 238 196/.8),rgb(252 238 196/0) 75%)}
}

/* ================= Estático (móvil, movimiento reducido, sin JS): cada tramo con su color fijo =================
   La interpolación continua del día vive en la película (escritorio), la cabecera, la hora y el hilo.
   En el modo apilado, los bloques de texto llevan el color de su hora para garantizar AA. */
.manifiesto{--c:#FAE5B6}
.tramo-cima{--c:#F8E8C9;--c-prev:#FAE5B6}
.tramo-aldea{--c:#F4E4C2;--c-prev:#F8E8C9}
.tramo-hayedo{--c:#EFD394;--c-prev:#F4E4C2}
.tramo-claro{--c:#C79E45;--c-prev:#EFD394}
.libros{--c:#E48E2B;--c-prev:#C79E45;--texto:#331C0B;--texto-rgb:51 28 11}
.personajes{--c:#6E3A1E;--c-prev:#E48E2B;--texto:#F7E5C9;--texto-rgb:247 229 201}
.ventana{--c:#143A5F;--c-prev:#6E3A1E;--texto:#F7E5C9;--texto-rgb:247 229 201}
.taller{--c:#0E2C4D;--c-prev:#143A5F;--texto:#F7E5C9;--texto-rgb:247 229 201}
.noche{--c:#09213F;--c-prev:#0E2C4D}
html:not(.pelicula) .manifiesto,html:not(.pelicula) .ancla{background:var(--c);color:var(--texto)}
html:not(.pelicula) .escena-banda::before{background:linear-gradient(var(--c-prev),rgb(0 0 0/0));opacity:1;height:14%}
html:not(.pelicula) .escena-banda::after{background:linear-gradient(rgb(0 0 0/0),var(--c));height:14%}
html:not(.pelicula) .tramo{background:var(--c)}
html:not(.pelicula) .tramo::before{content:"";position:absolute;inset:0 0 auto;height:12%;z-index:1;pointer-events:none;background:linear-gradient(var(--c-prev),rgb(0 0 0/0))}
html:not(.pelicula) .tramo::after{content:"";position:absolute;inset:auto 0 0;height:10%;z-index:1;pointer-events:none;background:linear-gradient(rgb(0 0 0/0),var(--c))}
html:not(.pelicula) .tramo-claro::after{background:linear-gradient(rgb(199 158 69/0),var(--c))}
@media (orientation:portrait){
  html:not(.pelicula) .noche-escena .lienzo{--fx:.7!important}
  html:not(.pelicula) .noche-titulo{top:auto;bottom:0;padding:0 var(--gutter) clamp(40px,9svh,90px)}
  html:not(.pelicula) .noche .escena-velo{background:linear-gradient(0deg,rgb(5 14 30/.92),rgb(5 14 30/.7) 26%,rgb(5 14 30/0) 52%)}
  html:not(.pelicula) .noche-titulo h2{font-size:clamp(2.4rem,11vw,3.4rem)}
  html:not(.pelicula) .ventana .escena-velo{background:linear-gradient(0deg,rgb(14 10 6/.92),rgb(14 10 6/.8) 42%,rgb(14 10 6/0) 72%)}
}

/* ================= Ronda 1 ================= */
h2,h3{scroll-margin-top:96px}
html{scroll-padding-top:96px;scroll-padding-bottom:72px}
/* Nada se queda sin revelar al recibir el foco */
.pelicula .ancla:focus-within:not(:focus) .lamina,.pelicula .ancla:focus-within:not(:focus) .ficha,.pelicula .ancla:focus-within:not(:focus) .pj-retrato,.pelicula .ancla:focus-within:not(:focus) .pj-texto,
.aparece:focus-within,.aparece:has(:focus-visible){opacity:1!important;transform:none!important;transition:none!important}
.pelicula .personajes:focus-within:not(:focus) .pj-retrato{transform:none!important}
@media (max-width:760px){
  .estado{font-size:12px;letter-spacing:.1em}
  .sello{font-size:12px;letter-spacing:.08em}
  .colabo-nota,.pj-nota{font-size:.8125rem}
  /* el contenido deja hueco a los botones fijos */
  .fichas,.mostrador,.fuera,.taller-mas,.pj-nota,.manifiesto{padding-bottom:max(84px,var(--pb,0px))}
  .escena-titulo{padding-bottom:12px}
  .ventana .escena-titulo{padding-bottom:84px}
  html:not(.pelicula) .noche-titulo{padding-bottom:84px}
  /* Libros: biblioteca oscurecida en lugar del bloque brasa liso */
  .libros{--c:#2E1A0E;--texto:#F7E5C9;--texto-rgb:247 229 201}
  .personajes{--c-prev:#2E1A0E}
  /* Mostrador: se ve el mueble y las fichas lo solapan */
  .personajes .escena-banda{--banda-h:56svh}
  .personajes .lienzo{--fy:.72!important}
  .personajes .escena-velo{background:linear-gradient(rgb(18 14 8/.8),rgb(18 14 8/.5) 40%,rgb(18 14 8/.1) 70%)}
  .personajes .escena-titulo{padding-top:calc(var(--cab-h) + 32px)}
  .mostrador{position:relative;z-index:3;margin-top:-48px;padding-top:0}
  .pj-hueco .pj-figura{display:block}
  .pj-hueco .pj-retrato{width:100%!important}
  .pj-hueco .pj-vacio{aspect-ratio:auto;height:calc((100vw - 2 * var(--gutter)) * .38 * 1.5)}
}
@media (orientation:portrait){
  /* Hayedo: encuadre con Manolito entero y el camino */
  html:not(.pelicula) .tramo-hayedo{min-height:100svh}
  html:not(.pelicula) .tramo-hayedo .tramo-fondo{top:auto;height:64svh}
  html:not(.pelicula) .tramo-hayedo .lienzo{--fx:.42!important;--fy:.6!important}
  html:not(.pelicula) .tramo-hayedo .tramo-velo{background:linear-gradient(var(--c) 0%,var(--c) 34%,rgb(239 211 148/0) 46%)}
  html:not(.pelicula) .tramo-hayedo .tramo-texto h2{font-size:clamp(2rem,9vw,2.6rem)}
  .tramo-hayedo .lienzo-video{object-position:46% 40%}
}
@media (max-width:760px){.lofi-frase,.lofi-en{display:none}.lofi-contenido{justify-content:flex-end}.lofi-ene{margin-bottom:auto}}
.fuera .ficha .l{color:var(--tinta-2)}
.fuera .ficha h3{color:var(--tinta)}

/* ================= Ronda 3 ================= */
/* Regla común: textos y fichas se revelan por clase (0,9 s completos), nunca a medias si el scroll se detiene */
.pelicula .revela{opacity:0;translate:0 22px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
.pelicula .revela.on{opacity:1;translate:none}
.pelicula .pj-retrato.revela{translate:none;transform:rotateX(86deg);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.pelicula .pj-retrato.revela.on{transform:none}
.pelicula .escena-titulo.revela{translate:0 -18px}
.pelicula .escena-titulo.revela.on{translate:none}
.pelicula .ancla:focus-within:not(:focus) .revela{opacity:1!important;translate:none!important} /* web v2: con el foco en la propia sección (puertas, llegada con #libros, «Volver a Norteña») no se revela todo de golpe: el titular se montaba sobre las láminas */
/* Altura del plano secuencia desde el primer pintado (evita que la carga diferida pida las láminas de abajo) */
.pelicula .paseo{height:calc(8.6 * 100svh)}
/* La ventana: sin costura recta, degradado de 30 svh hacia el color del día */
.pelicula .ventana .escena-banda::after{display:block;height:30svh;z-index:3;background:linear-gradient(rgb(var(--fondo-rgb)/0),var(--fondo))}
html:not(.pelicula) .ventana .escena-banda::after{height:30svh}
html:not(.pelicula) .fuera{background:linear-gradient(var(--c) 0,rgb(9 22 42/.7) 30svh,rgb(9 22 42/.7) calc(100% - 30svh),var(--c) 100%),url(kit/img/codex2-ventana_noche_16x9-960.webp) 50% 40%/cover}
/* Pie de la mano, bajo el portátil */
.pantalla-fig{margin:0}
.pantalla-pie{position:absolute;left:55.4%;top:84.6%;transform:translateX(-50%);margin:0;padding:4px 12px 5px;border-radius:999px;background:rgb(12 8 5/.66);color:var(--papel);font:italic 400 .875rem/1.3 var(--lectura);white-space:nowrap}
/* «Llegarán más.»: ficha tipográfica opaca */
.pj-vacio{background:var(--papel) url(kit/img/codex2-papel_campo-1024.webp) 50% 50%/420px;border:0;box-shadow:0 18px 34px -18px rgb(24 10 2/.7),0 2px 5px rgb(24 10 2/.25)}
.pj-vacio::before{content:"";position:absolute;inset:7px;border:1px solid rgb(51 28 11/.18);pointer-events:none}
.pj-vacio p,.pelicula .pj-vacio p{color:var(--tinta)}
.pelicula .pj-vacio{background:var(--papel) url(kit/img/codex2-papel_campo-1024.webp) 50% 50%/420px;border:0}

/* ================= Web v2 · la sala de libros (08/10/2026) [PROPOSAL] =================
   #libros es el avance estático de la sala (biblioteca/): la misma lámina del estante, las fichas y la entrada. Sin three.js aquí. */
/* «Entrar en la biblioteca» (texto [PROPOSAL], pendiente de Marcos): píldora de papel, como las fichas */
.entrar-sala{grid-column:1 / -1;justify-self:center;margin:0}
.entrar{display:inline-flex;align-items:center;gap:.8em;min-height:48px;padding:0 22px 0 26px;border-radius:999px;background:var(--papel) url(kit/img/codex2-papel_campo-1024.webp) 50% 50%/420px;color:var(--tinta);font:600 .8125rem/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 0 rgb(255 255 255/.5) inset,0 0 0 1px rgb(51 28 11/.14) inset,0 16px 34px -14px rgb(20 8 2/.78),0 2px 6px rgb(20 8 2/.32);transition:transform .9s var(--ease),box-shadow .9s var(--ease)}
.entrar::after{content:"";flex:none;width:.5em;height:.5em;margin-left:.05em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.entrar:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgb(255 255 255/.5) inset,0 0 0 1px rgb(51 28 11/.14) inset,0 22px 40px -14px rgb(20 8 2/.85),0 2px 6px rgb(20 8 2/.32)}
.entrar:focus-visible{outline:2px solid var(--ventana);outline-offset:4px}
.pelicula .entrar-sala{position:absolute;left:50%;bottom:clamp(56px,10svh,110px);transform:translateX(-50%);pointer-events:auto}
/* Trabajo Astra@ · la entrada permanece junto al titular, también al llegar desde Biblioteca. */
.libros .escena-titulo .entrar-sala{position:static;transform:none;margin-top:24px;pointer-events:auto}
/* Primera selección: Manolito y Cormac. Las figuras recortadas se desarrollan en la siguiente ronda. */
.mostrador{grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px;padding-bottom:clamp(24px,4svh,40px)}
.pelicula .pj-manolito{--x:31%;--w:14%}
.pelicula .pj-cormac{--x:55%;--w:14%}
@media(max-width:860px){.mostrador{grid-template-columns:1fr}}
/* película: lo que aún no se ha revelado (opacidad 0) no recibe toques; con el teclado sí (el foco lo revela) */
.pelicula .libros .revela:not(.on){pointer-events:none}
/* Ficha de La aventura original: el título es el enlace directo (biblioteca/?libro=…) y toda la ficha responde */
.ficha-enlace{--p:max(0px,calc((44.5px - 1em) / 2));text-decoration:none;color:inherit;display:inline-block;padding-block:var(--p);margin-block:calc(var(--p) * -1)} /* ≥ 44 px de alto sin mover la línea (el toque vale en toda la ficha) */
.ficha-enlace::after{content:"";position:absolute;inset:0;z-index:1;border-radius:2px}
.ficha-enlace:hover cite{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.ficha-enlace:focus-visible{outline:none}
.ficha-enlace:focus-visible::after{outline:2px solid var(--ventana);outline-offset:4px}
/* La línea de Bardos (CONTENIDO_v2 §4c): enlace a la sala con Bardos al frente, cerrado. Aquí no se dibuja Bardos */
.bardos-enlace{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:rgb(var(--texto-rgb)/.45);padding-block:.66em;transition:text-decoration-color .6s var(--ease)}
.bardos-enlace:hover{text-decoration-color:currentColor}
.pelicula .bardos{pointer-events:auto}
.pelicula .bardos-enlace{text-decoration-color:rgb(247 229 201/.55)}
.bardos-enlace:focus-visible{outline:2px solid var(--ventana);outline-offset:3px}
/* Transición entre documentos con la sala (mejora progresiva: Chrome 126+, Safari 18.2+; sin ella, navegación normal).
   La ida (portada → sala) la anima la sala con su fundido por defecto hacia su tono de arranque; la vuelta, estas reglas. */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.45s;animation-timing-function:var(--ease)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ================= Web v2 · la llegada, variante ?llegada=b (10/10/2026) [PROPOSAL] =================
   Solo con html.llegada-b (la pone el script de <head> con ?llegada=b): sin el parámetro no se aplica nada de esto. Aquí va lo que
   tiene que estar antes del primer pintado, para que nada salte; el resto llega con el motor (llegada.css y llegada.js).
   La sección se monta bajo el hero, que la destapa como una hoja al subir; su escena se fija con sticky (también en iOS). El paseo sube
   una pantalla y queda debajo de la escena, que se aparta al final sobre el mismo encuadre de «la cima».
   --ll-pantallas: pantallas de scroll con la escena fijada (contando la del hero); los momentos de kit/llegada/llegada.json suman eso. */
html.llegada-b{--ll-pantallas:5.45}
html.llegada-b.pelicula{--ll-pantallas:5.85}
html.llegada-b:not(.movimiento){--ll-pantallas:3.2}
/* R13: native #libros matches puertaEn(.3): 0.3 screens into pinear(lib,1.2). */
html.llegada-b.pelicula #libros{scroll-margin-top:-30svh}
html.llegada-b #manifiesto{display:none}
html.llegada-b .hero{z-index:2}
html.llegada-b .llegada{position:relative;z-index:1;margin-top:calc(-1 * max(100svh, 560px));height:calc((1 + var(--ll-pantallas)) * 100svh)}
html.llegada-b .ll-escena{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--fondo)}
html.llegada-b .ll-inicio{position:absolute;left:0;top:max(100svh, 560px);width:1px;height:1px;pointer-events:none}
html.llegada-b .ll-quieto,html.llegada-b .ll-texto{display:none}
html.llegada-b .paseo{margin-top:-100svh}
/* si el motor no arranca: las imágenes apiladas en su sitio, sin escena fijada (también sería la vista sin JS) */
html.llegada-b.ll-sin-motor .llegada{margin-top:0;height:auto}
html.llegada-b.ll-sin-motor .ll-escena{position:relative;height:auto;overflow:visible;padding:calc(var(--cab-h) + 24px) var(--gutter) 48px}
html.llegada-b.ll-sin-motor .ll-quieto,html.llegada-b.ll-sin-motor .ll-texto{display:block}
html.llegada-b.ll-sin-motor .paseo{margin-top:0}
.ll-quieto{max-width:1100px;margin-inline:auto;text-align:center}
.ll-q-mapa{position:relative;width:min(100%,62svh);margin-inline:auto}
.ll-q-mapa > picture > img{width:100%;height:auto}
.ll-q-glifo{position:absolute;left:-0.03%;top:21%;width:100%} /* el glifo de la cresta B2 sobre el mapa del pack 2 (llegada.json) */
.ll-q-glifo img{width:100%;height:auto}
.ll-q-cresta img{width:100%;height:auto;margin-top:24px}
.ll-quieto .ll-texto{font-size:var(--t-h2);color:var(--tinta);margin:20px auto}