:root{--bosque:#0d1d17;--bosque-medio:#173228;--marfil:#f4eee1;--ambar:#e6ae5e;--tinta:#10261e;
 --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--p:0}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bosque);color:var(--marfil);font:16px/1.6 var(--sans);overflow-x:hidden}
#mundo{position:fixed;inset:0;z-index:0}
#mundo img,#mundo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;pointer-events:none}
#escena{opacity:0;transition:opacity 1.4s ease}#escena.viva{opacity:1}
#poster{filter:saturate(.8)}
/* gradación editorial: menos saturación que el visor, contraste suave → lee a arquitectura, no a videojuego */
#escena{filter:saturate(.74) contrast(1.05) brightness(.97)}
/* velo: legibilidad sin tapar la ilusión; se oscurece al anochecer */
#velo{position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,rgb(9 22 17/calc(.86 - var(--p)*.5)) 0,rgb(9 22 17/calc(.55 - var(--p)*.4)) 34%,transparent 62%),
 linear-gradient(180deg,rgb(8 20 16/.6) 0,transparent 20%,transparent 66%,rgb(8 20 16/.7) 100%),
 radial-gradient(120% 90% at 50% 50%,transparent 45%,rgb(6 16 12/calc(.25 + var(--p)*.3)) 100%)}
/* En vertical el texto del héroe ocupa TODO el ancho, así que un velo LATERAL no lo protege: medido sobre el
   póster a 390 px, el párrafo caía a 1,18:1 de contraste en el 7,2 % de su superficie (las ventanas encendidas
   de la torre le pasan por debajo). Aquí el velo pasa a ser vertical, que es como cae la columna de texto. */
@media(max-width:900px){
 #velo{background:
  linear-gradient(180deg,rgb(8 20 16/.72) 0,rgb(8 20 16/.44) 16%,rgb(9 22 17/calc(.66 - var(--p)*.2)) 40%,rgb(9 22 17/calc(.88 - var(--p)*.18)) 100%),
  radial-gradient(120% 90% at 50% 50%,transparent 45%,rgb(6 16 12/calc(.25 + var(--p)*.3)) 100%)}
}
main,header,footer,#reloj{position:relative;z-index:2}
.barra{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:28px;padding:18px clamp(18px,4vw,56px);z-index:5;
 transition:background .4s,backdrop-filter .4s}
.barra.pegada{background:rgb(13 29 23/.62);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.marca{display:inline-flex;align-items:center;gap:12px;color:var(--marfil);text-decoration:none;font:400 20px/1 var(--serif);letter-spacing:.34em}
.iso{width:30px;height:30px;fill:none;stroke:var(--ambar);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.barra nav{display:flex;gap:26px;margin-left:auto}
.barra nav a,.enlace{color:var(--marfil);opacity:.82;text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.barra nav a:hover,.enlace:hover{opacity:1;color:var(--ambar)}
.acciones{display:flex;align-items:center;gap:18px}
.boton{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--ambar);color:#1d1204;
 text-decoration:none;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:transform .2s,background .2s}
.boton:hover{transform:translateY(-2px);background:#f0c27e}.boton.grande{min-height:56px;padding:0 34px;font-size:13px}
a:focus-visible{outline:3px solid var(--ambar);outline-offset:4px;border-radius:6px}
#reloj{position:fixed;right:clamp(14px,3vw,40px);bottom:clamp(14px,3vw,34px);z-index:5;display:flex;align-items:center;gap:10px;
 font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:10px 14px;border-radius:999px;
 background:rgb(13 29 23/.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgb(244 238 225/.18)}
#reloj i{width:54px;height:2px;background:linear-gradient(90deg,var(--ambar) calc(var(--p)*100%),rgb(244 238 225/.25) 0)}
.escena-seccion{min-height:135vh;display:flex;flex-direction:column;justify-content:center;padding:18vh clamp(18px,6vw,96px)}
.lado-der{align-items:flex-end}.lado-izq{align-items:flex-start}
.heroe{min-height:125vh;justify-content:center;padding-top:22vh;max-width:none}
.heroe>*{max-width:620px}
.heroe .regla{width:64px;height:1px;background:var(--ambar);margin:0 0 30px}
.cifras{display:flex;gap:38px;margin-top:7vh;padding-top:22px;border-top:1px solid rgb(244 238 225/.2);max-width:560px!important}
.cifras b{display:block;font:400 26px/1 var(--serif);margin-bottom:8px}.cifras span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.sobre{font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ambar);margin:0 0 22px}
h1{font:400 clamp(40px,5.4vw,84px)/1.03 var(--serif);letter-spacing:-.012em;margin:0 0 26px}
.heroe .bajada{font-size:18px;max-width:46ch}
h2{font:400 clamp(34px,5vw,68px)/1.04 var(--serif);margin:0 0 22px;letter-spacing:-.01em}
h3{font:400 21px/1.2 var(--serif);margin:0 0 8px}
.lema{font:400 clamp(24px,3vw,40px)/1.12 var(--serif);margin:0 0 34px;text-shadow:0 1px 18px rgb(3 12 9/.6)}
.fila{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.centro{justify-content:center}
.nota{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.baja{margin-top:9vh;color:var(--marfil);opacity:.8;text-decoration:none;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.baja b{display:inline-block;margin-left:10px;animation:bajar 2.2s ease-in-out infinite}@keyframes bajar{50%{transform:translateY(6px)}}
/* paneles: vidrio ahumado verde, como los del visor; aparecen y se van con el scroll */
.panel{max-width:min(880px,100%);padding:clamp(24px,3.4vw,52px);border-radius:18px;border:1px solid rgb(244 238 225/.16);
 background:linear-gradient(160deg,rgb(16 38 30/.72),rgb(9 22 17/.58));-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
 box-shadow:0 30px 80px rgb(2 10 8/.45);opacity:0;transform:translateY(46px) scale(.985);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.panel.angosto{max-width:min(520px,100%)}
.visible .panel,.visible>.sobre,.visible>h2,.visible>.fila,.visible>.nota{opacity:1;transform:none}
.bajada{font-size:17px;opacity:.88;max-width:56ch;margin:0 0 30px}
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pasos b{display:block;font:400 34px/1 var(--serif);color:var(--ambar);margin-bottom:14px}
.pasos p,.cuatro p,.lista li{font-size:14.5px;opacity:.86;margin:0}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:18px}.lista li{padding-top:16px;border-top:1px solid rgb(244 238 225/.16)}
.lista b{display:block;font:400 19px/1.2 var(--serif);opacity:1;margin-bottom:4px}
.pantalla{margin:0 0 28px;border-radius:12px;overflow:hidden;border:1px solid rgb(244 238 225/.18);box-shadow:0 18px 50px rgb(2 10 8/.5)}
.pantalla img{display:block;width:100%;height:auto}
.cuatro{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.final{align-items:center;text-align:center;min-height:110vh}
.final>*{opacity:0;transform:translateY(30px);transition:opacity 1s,transform 1s}
.final h2{font-size:clamp(40px,6.4vw,92px);text-shadow:0 2px 30px rgb(3 12 9/.75),0 0 80px rgb(3 12 9/.5)}
.final{background:radial-gradient(70% 45% at 50% 38%,rgb(8 20 16/.5),transparent 75%)}
footer{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:28px clamp(18px,6vw,96px);
 background:rgb(9 20 16/.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:12px;letter-spacing:.08em}
@media(max-width:900px){.barra nav{display:none}.acciones .enlace{display:none}.pasos,.cuatro,.tres{grid-template-columns:1fr 1fr}
 .lado-der,.lado-izq{align-items:stretch}.escena-seccion{min-height:120vh}}
@media(max-width:560px){.pasos,.cuatro,.tres{grid-template-columns:1fr}#reloj{font-size:10px}.marca{font-size:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.panel,.final>*{opacity:1;transform:none;transition:none}.baja b{animation:none}}

/* ── secciones nuevas ── */
.panel.ancho{max-width:min(1040px,100%)}
.lugar{opacity:.7;letter-spacing:.14em}
.dolores{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:16px}
.dolores li{display:flex;gap:16px;align-items:flex-start;font-size:14.5px;opacity:.9}
.dolores b{display:block;font:400 20px/1.2 var(--serif);margin-bottom:2px}
.dolores i{flex:none;width:9px;height:12px;margin-top:8px;border-radius:2px;background:rgb(244 238 225/.18)}   /* ventana apagada */
.cierre{font:italic 400 19px/1.4 var(--serif);color:var(--ambar);margin:0}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-bottom:26px}
.rol h3{font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ambar);margin-bottom:16px}
.rol .grande{font:400 25px/1.2 var(--serif);margin:0 0 12px}.rol p{font-size:14.5px;opacity:.88;margin:0 0 14px}
.apoyo{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding-top:20px;border-top:1px solid rgb(244 238 225/.16);font-size:13.5px;opacity:.85}
.apoyo b{font-weight:600;color:var(--marfil)}
.lista.dos-col{grid-template-columns:1fr 1fr;gap:18px 34px;margin-bottom:24px}
.panel .enlace{display:inline-block;margin-top:6px;color:var(--ambar);opacity:1}
details{margin:28px 0 12px;border-top:1px solid rgb(244 238 225/.16);padding-top:18px}
summary{cursor:pointer;font:400 20px/1.2 var(--serif);list-style:none}summary::after{content:" +";color:var(--ambar)}details[open] summary::after{content:" –"}
details p{font-size:14.5px;opacity:.88;margin:14px 0 0}details p b{font-weight:600;opacity:1}
/* ── senderos: los procesos dibujados como un camino de luces, no como un diagrama de ingeniería ── */
.sendero{margin:30px 0 0}.sendero h3{font:400 22px/1.2 var(--serif);margin:0 0 2px}
.sendero svg{display:block;width:100%;height:auto;overflow:visible}
.sendero .camino{fill:none;stroke:rgb(244 238 225/.2);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:1 7}
.sendero .luzcamino{fill:none;stroke:var(--ambar);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:var(--largo);stroke-dashoffset:var(--largo);transition:stroke-dashoffset 2.6s cubic-bezier(.3,.6,.2,1)}
.sendero.encendido .luzcamino{stroke-dashoffset:0}
.sendero .ventana{fill:rgb(244 238 225/.14);stroke:rgb(244 238 225/.35);stroke-width:1;transition:fill .7s,filter .7s,stroke .7s;transition-delay:calc(var(--i)*.48s + .2s)}
.sendero.encendido .ventana{fill:var(--ambar);stroke:#f0c27e;filter:drop-shadow(0 0 7px rgb(230 174 94/.85))}
.sendero text{fill:var(--marfil);font:400 14.5px var(--serif);opacity:.35;transition:opacity .7s;transition-delay:calc(var(--i)*.48s + .2s)}
.sendero.encendido text{opacity:.95}.sendero .num{font:500 9.5px var(--sans);letter-spacing:.18em;fill:var(--ambar)}
@media(max-width:900px){.dos,.apoyo,.lista.dos-col{grid-template-columns:1fr}.sendero text{font-size:19px}}
@media(prefers-reduced-motion:reduce){.sendero .luzcamino{stroke-dashoffset:0;transition:none}.sendero .ventana{fill:var(--ambar);transition:none}.sendero text{opacity:.95;transition:none}}
/* páginas interiores */
/* ---- Telón de entrada -------------------------------------------------------------------------------------
   Cubre el primer instante con la marca en vez de con la página a medio vestir. Se retira cuando el póster
   está en pantalla (sitio.js), no cuando lo está la escena 3D: esperar los 2,7 MB del recorrido detrás de un
   telón sería justo lo contrario de no cortar la experiencia.
   RED DE SEGURIDAD: la animación `entrada-rescate` lo retira a los 6 s pase lo que pase. Si el guion no corre
   —JavaScript apagado, un error, un navegador que no traga algo— el telón no se queda encerrando la página. */
#entrada{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--bosque);
 animation:entrada-rescate .8s ease 6s both}
#entrada.fuera{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s;animation:none}
@keyframes entrada-rescate{to{opacity:0;visibility:hidden}}
/* El halo tibio es el mismo amanecer que la escena trae después: el paso de uno a otro no cambia de temperatura. */
.entrada-marca{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 24px;text-align:center}
.entrada-marca::before{content:"";position:absolute;left:50%;top:10px;width:260px;height:260px;margin:-130px 0 0 -130px;
 border-radius:50%;background:radial-gradient(circle,rgb(230 174 94/.16) 0,transparent 68%)}
.entrada-marca > *{position:relative;animation:entrada-sube .42s cubic-bezier(.2,.7,.2,1) both}
#entrada .iso{width:56px;height:56px;stroke-width:1.2;margin-bottom:22px}
.entrada-nombre{font:400 clamp(28px,5vw,40px)/1 var(--serif);letter-spacing:.46em;margin-right:-.46em;
 color:var(--marfil);animation-delay:.06s}
.entrada-linea{display:block;width:180px;max-width:52vw;height:1px;margin:24px 0 20px;overflow:hidden;
 background:rgb(244 238 225/.16);animation-delay:.12s}
.entrada-linea::after{content:"";display:block;width:100%;height:100%;
 background:linear-gradient(90deg,transparent 30%,var(--ambar) 50%,transparent 70%);
 transform:translateX(-100%);animation:entrada-destello 1.6s ease-in-out infinite}
.entrada-pie{margin:0;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
 color:rgb(244 238 225/.62);animation-delay:.18s}
@keyframes entrada-sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes entrada-destello{to{transform:translateX(100%)}}
/* Sin movimiento: la marca está quieta y el telón se va sin barrido, pero la red de seguridad sigue en pie. */
@media(prefers-reduced-motion:reduce){
 .entrada-marca > *{animation:none}
 .entrada-linea::after{animation:none;transform:none;background:var(--ambar);opacity:.5}
 #entrada.fuera{transition:opacity .01s linear,visibility 0s linear .01s}
}

body.interior #mundo img{filter:saturate(.7) brightness(.5)}body.interior main{padding:150px clamp(18px,6vw,96px) 90px;max-width:1100px}
body.interior .panel{opacity:1;transform:none;margin-bottom:26px;max-width:none}body.interior h1{font-size:clamp(38px,5vw,68px)}