/* ============================================================
   PALETA — tomada del material de la ciudad, no de un template:
   asfalto mojado, niebla de sabana, sodio de alumbrado,
   rojo troncal de TransMilenio, verde pálido de páramo, papel de libro.
   ============================================================ */
:root{
  --asfalto:#0A0C0F; --asfalto2:#12161B; --asfalto3:#1B222A;
  --niebla:#C9D1D3; --niebla-suave:#8A9499;
  --sodio:#F0A33C; --troncal:#C8102E; --paramo:#8FB6A3; --papel:#E8E2D2;
  --acento:var(--sodio);
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --display:"Anton", "Arial Narrow", Impact, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --dur:.45s;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--asfalto); color:var(--niebla);
  font-family:var(--serif); overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--sodio); outline-offset:3px}

/* ---------- capas de fondo ---------- */
#stage{position:fixed; inset:0; overflow:hidden}
#videoLayer{position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover;
  opacity:0; transition:opacity 1.2s ease; filter:grayscale(.55) contrast(1.15) brightness(.5);}
#videoLayer.on{opacity:.34}
/* --- clip real de la Torre Colpatria: mismo tratamiento que las atmósferas,
   con un desenfoque extra para que nunca compita con el texto --- */
#videoLayer.colpatria{filter:grayscale(.42) contrast(1.1) brightness(.52) saturate(.85) blur(3.5px);
  transform:scale(1.08); animation:derivaCol 24s ease-in-out infinite alternate}
#videoLayer.on.colpatria{opacity:.40}
@keyframes derivaCol{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-2%,-1.2%,0)}}
/* --- clip real del cerro de Monserrate: mismo tratamiento, deriva más lenta --- */
#videoLayer.monserrate{filter:grayscale(.5) contrast(1.06) brightness(.5) saturate(.78) blur(3.5px);
  transform:scale(1.06); animation:derivaCer 30s ease-in-out infinite alternate}
#videoLayer.on.monserrate{opacity:.38}
@keyframes derivaCer{from{transform:scale(1.05) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(1.8%,1%,0)}}
body.clip-real #tint{opacity:.46}
#fx{position:absolute; inset:0; width:100%; height:100%}
#tint{position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light;
  background:radial-gradient(120% 90% at 50% 110%, var(--acento) 0%, transparent 62%);
  opacity:.38; transition:background 1.2s ease}
#vignette{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%, transparent 30%, rgba(5,6,8,.72) 78%, rgba(3,4,5,.96) 100%);}
#grain{position:absolute; inset:-50%; width:200%; height:200%; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.55'/></svg>");
  animation:grain 1.1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
#scan{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .8s;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px)}
body.amb-archivo #scan{opacity:.9}
body.amb-noche #reader{text-shadow:.6px 0 rgba(200,16,46,.45), -.6px 0 rgba(60,180,220,.35)}

/* ---------- barra superior ---------- */
#hud{position:fixed; top:0; left:0; right:0; z-index:30; display:flex; gap:18px;
  align-items:center; padding:14px clamp(14px,3vw,34px); font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--niebla-suave);
  background:linear-gradient(180deg, rgba(8,10,13,.85), transparent)}
#hud .marca{color:var(--papel); letter-spacing:.28em}
#hud .marca b{color:var(--troncal); font-weight:500}
#hud .sep{flex:1}
#hud button{padding:6px 10px; border:1px solid rgba(201,209,211,.22); border-radius:2px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--niebla-suave); transition:.25s}
#hud button:hover{color:var(--papel); border-color:var(--sodio); background:rgba(240,163,60,.08)}
#hud button[aria-pressed="true"]{color:var(--asfalto); background:var(--sodio); border-color:var(--sodio)}

/* ---------- lector ---------- */
#reader{position:absolute; inset:0; display:grid; place-items:center;
  padding:86px clamp(18px,5vw,60px) clamp(24px,5vh,60px); z-index:20;
  overflow-y:auto; overscroll-behavior:contain;
  align-items:safe center; align-content:safe center}
#col{width:min(760px,100%); position:relative; padding-left:clamp(16px,3vw,34px)}
/* firma: la ruta troncal que crece con el recorrido */
#col::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--troncal) 0%, var(--troncal) var(--ruta,10%), rgba(201,209,211,.14) var(--ruta,10%));
  transition:--ruta .8s}
#meta{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--niebla-suave); display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:14px}
#meta .nodo{color:var(--papel)}
#meta .atm{color:var(--acento)}
#meta .punto{width:6px;height:6px;background:var(--troncal);display:inline-block;border-radius:50%;
  box-shadow:0 0 0 0 rgba(200,16,46,.6); animation:latido 2.6s infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(200,16,46,.55)}70%{box-shadow:0 0 0 12px rgba(200,16,46,0)}100%{box-shadow:0 0 0 0 rgba(200,16,46,0)}}
h1#titulo{font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2rem,6.2vw,3.9rem); line-height:.94; letter-spacing:.005em;
  margin:0 0 22px; color:var(--papel)}
h1#titulo .pal{display:inline-block; white-space:nowrap}
h1#titulo .car{display:inline-block; opacity:0; transform:translateY(.28em);
  animation:sube .5s cubic-bezier(.2,.8,.25,1) forwards}
@keyframes sube{to{opacity:1; transform:none}}
#texto{font-size:clamp(1.05rem,2.4vw,1.36rem); line-height:1.68; font-weight:300;
  color:var(--niebla); margin:0 0 34px; min-height:5.2em; max-width:62ch}
#texto .lugar{color:var(--papel); font-family:var(--mono); font-size:.82em; font-weight:500;
  letter-spacing:.08em; padding:1px 5px; margin:0 1px; border-bottom:1px solid var(--acento);
  background:linear-gradient(180deg,transparent 60%, rgba(240,163,60,.14) 60%)}
#texto .nota{font-style:italic; color:var(--niebla-suave); font-size:.9em}
#texto .cursor{display:inline-block; width:.55em; height:1.05em; vertical-align:-.16em;
  background:var(--acento); animation:parpadeo .85s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}

/* ---------- los desvíos viven dentro del relato ---------- */
#texto .lugar.salto{display:inline; cursor:pointer; text-align:inherit; white-space:normal;
  -webkit-appearance:none; appearance:none; touch-action:manipulation;
  border:0; border-bottom:1px solid var(--acento); border-radius:0;
  transition:background .25s, color .25s, box-shadow .25s, border-color .25s}
#texto.listo .lugar.salto{box-shadow:inset 0 -3px 0 -1px var(--acento)}
#texto .lugar.salto:hover,#texto .lugar.salto:focus-visible{
  background:var(--acento); color:#0A0C0F; outline:none; box-shadow:none}
#texto .lugar.salto.visitado{border-bottom-style:dashed; color:var(--sodio)}
#pista{margin:-14px 0 24px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--niebla-suave); min-height:1.5em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;   /* que la línea no reacomode la página */
  opacity:0; transform:translateY(5px); transition:opacity .6s, transform .6s}
#pista.entra{opacity:.8; transform:none}
#pie{margin-top:16px; border-top:1px solid rgba(201,209,211,.14); padding-top:16px; display:flex; gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--niebla-suave)}
#pie b{color:var(--papel); font-weight:500}
#pie button{text-decoration:underline; text-underline-offset:3px; letter-spacing:.16em; font-size:10.5px; font-family:var(--mono); color:var(--niebla-suave)}
#pie button:hover{color:var(--sodio)}

/* ---------- transición entre nodos: el bus que cruza ---------- */
#wipe{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0}
#wipe.va{animation:wipe .62s cubic-bezier(.5,0,.2,1)}
@keyframes wipe{
  0%{opacity:1; transform:translateX(-100%)}
  55%{opacity:1; transform:translateX(0)}
  100%{opacity:1; transform:translateX(100%)}}
#wipe .barra{position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(10,12,15,.98) 12%, var(--troncal) 46%, rgba(10,12,15,.98) 84%, transparent)}
#cruce{position:fixed; inset:0; width:100%; height:100%; z-index:62; pointer-events:none; opacity:0}
#cruce.on{opacity:1}
#flash{position:fixed; inset:0; z-index:95; pointer-events:none; background:#fff; opacity:0}
#flash.va{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.72}100%{opacity:0}}
.sacude{animation:sacude .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes sacude{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}
  30%,50%,70%{transform:translate(-7px,2px)}40%,60%{transform:translate(7px,-1px)}}

/* ---------- secuencia de entrada ---------- */
#intro{position:fixed; inset:0; z-index:80; background:#040507; display:none}
#intro.on{display:block}
#introVid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s}
#introVid.on{opacity:.85}
#introCanvas{position:absolute; inset:0; width:100%; height:100%}
#introTxt{position:absolute; left:0; right:0; bottom:12%; text-align:center;
  font-family:var(--mono); font-size:clamp(11px,2.6vw,14px); letter-spacing:.34em;
  text-transform:uppercase; color:var(--papel); text-shadow:0 2px 24px #000; opacity:0}
#introTxt.on{opacity:1; transition:opacity .6s}
#saltar{position:absolute; right:18px; bottom:18px; font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:#6E787D; border:1px solid #262C33; padding:7px 12px}
#saltar:hover{color:var(--papel); border-color:var(--sodio)}

/* ---------- mapa del rizoma ---------- */
#mapa{position:fixed; inset:0; z-index:70; background:rgba(6,8,10,.985); display:none;
  backdrop-filter:blur(3px)}
#mapa.on{display:block}
body.mapa-abierto #hud{opacity:0; pointer-events:none; transition:opacity .3s}
#mapaCanvas{position:absolute; inset:0; width:100%; height:100%}
#mapaInfo{position:absolute; left:0; right:0; top:0; padding:16px clamp(14px,3vw,34px);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--niebla-suave); display:flex; gap:20px; flex-wrap:wrap; align-items:center}
#mapaInfo b{color:var(--papel); font-weight:500}
#mapaInfo .k{display:inline-flex; align-items:center; gap:7px}
#mapaInfo i{width:9px;height:9px;border-radius:50%;display:inline-block;font-style:normal}
#cerrarMapa{margin-left:auto; border:1px solid rgba(201,209,211,.24); padding:6px 12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase}
#cerrarMapa:hover{border-color:var(--sodio); color:var(--papel)}

@media (max-width:640px){
  #hud{font-size:10px; gap:10px; padding:11px 14px}
  #hud .marca span{display:none}
  #reader{padding-top:70px}
  #texto{min-height:7em}
}
@media (prefers-reduced-motion:reduce){
  #grain,#meta .punto{animation:none}
  .sacude{animation:none}
  #wipe.va{animation-duration:.25s}
}