/* David Valor — capa 2D.
   La portada es un sistema solar de pantalla fija: no se hace scroll, se viaja.
   Todo el texto vive en el DOM y en orden de lectura; el 3D solo lo acompaña.
   Sin `.spatial` (sin JS, sin WebGL o con ?texto=1) la misma página se lee como
   un documento normal, de arriba abajo. Ese es el modo de respaldo real. */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --orange:#ea5536; --accent:#f96a17; --amber:#ffd166;
  --bg:#0c0a09; --card:#1a1614; --txt:#f5f3f1; --mut:#b3aaa4;
  --line:rgba(245,243,241,.10);
  --line-hot:rgba(234,85,54,.55);
  --glass:rgba(20,16,14,.66);
  --shadow:0 24px 60px -28px rgba(0,0,0,.9);
  --col:940px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --top:54px; --bar:78px;
}

html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--sans);background:var(--bg);color:var(--txt);line-height:1.65;
  background-image:
    radial-gradient(900px 620px at 50% -6%, rgba(234,85,54,.20), transparent 62%),
    radial-gradient(700px 520px at 88% 22%, rgba(255,209,102,.09), transparent 60%),
    radial-gradient(760px 640px at 6% 72%, rgba(249,106,23,.10), transparent 62%);
  background-attachment:fixed;
}

/* ---------- Lienzo 3D ---------- */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 34%, transparent 30%, rgba(12,10,9,.72) 100%),
    linear-gradient(180deg, rgba(12,10,9,.62) 0%, transparent 22%, transparent 66%, rgba(12,10,9,.74) 100%)}
.page{position:relative;z-index:2}

/* Sin WebGL: aurora CSS animada, nunca una página vacía */
html.no-3d body::before{
  content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:.7;
  background:
    radial-gradient(closest-side at 30% 34%, rgba(234,85,54,.32), transparent),
    radial-gradient(closest-side at 72% 26%, rgba(255,209,102,.16), transparent),
    radial-gradient(closest-side at 54% 76%, rgba(249,106,23,.22), transparent);
  filter:blur(38px);animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{to{transform:translate3d(-3%,4%,0) scale(1.12)}}

.wrap{max-width:var(--col);margin:0 auto;padding:0 22px}
.narrow{max-width:720px}

/* ---------- Botones (compartidos con las subpáginas) ---------- */
.btn{display:inline-block;padding:13px 22px;border-radius:11px;font-weight:700;font-size:15px;
  text-decoration:none;border:1px solid transparent;transition:transform .22s var(--ease),
  box-shadow .22s var(--ease),border-color .22s,background .22s}
.btn-p{background:linear-gradient(180deg,var(--accent),var(--orange));color:#fff;
  box-shadow:0 12px 30px -12px rgba(234,85,54,.85)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(234,85,54,.95)}
.btn-s{background:rgba(255,255,255,.05);color:var(--txt);border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-s:hover{transform:translateY(-2px);border-color:var(--line-hot);background:rgba(255,255,255,.09)}
.btn.sm{padding:8px 15px;font-size:13.5px}

/* ================================================================
   BARRA SUPERIOR
   ================================================================ */
.topbar{position:relative;z-index:30;flex:none;display:flex;align-items:center;gap:14px;
  height:var(--top);min-height:var(--top);padding:0 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(12,10,9,.92),rgba(12,10,9,.6));
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt);
  font-weight:800;font-size:15px;letter-spacing:-.2px;flex:none}
.brand .mark{width:24px;height:24px;border-radius:8px;flex:none;
  background:conic-gradient(from 210deg,var(--orange),var(--amber),var(--accent),var(--orange));
  box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 6px 18px -6px rgba(234,85,54,.9)}
.topbar .now{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--mut);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .now b{color:var(--amber);font-weight:600}
.topbar .now .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff4d4d;
  margin-right:7px;box-shadow:0 0 0 0 rgba(255,77,77,.6);animation:livePulse 1.8s infinite}
@keyframes livePulse{70%{box-shadow:0 0 0 8px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
.readmode{flex:none;font-size:12.5px;color:var(--mut);text-decoration:none;
  border-bottom:1px dotted rgba(245,243,241,.3);padding-bottom:1px}
.readmode:hover{color:var(--accent)}
@media(max-width:900px){.topbar .now{display:none}}
@media(max-width:520px){.topbar{gap:10px;padding:0 12px}.readmode{display:none}}

/* ================================================================
   MODO ESPACIAL — la ventana fija al sistema
   ================================================================ */
html.spatial,html.spatial body{height:100%;overflow:hidden}
html.spatial body{position:fixed;inset:0;display:flex;flex-direction:column}
html.spatial main{position:relative;flex:1 1 auto;min-height:0;z-index:10}
html.spatial .foot,html.spatial .topbar,html.spatial .chart{flex:none}

/* Un destino = un lugar. Solo uno visible; el resto sigue en el DOM y en orden. */
html.spatial .dest{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility 0s .45s}
/* .on = destino activo: ya ocupa layout para poder medirlo y anclar los hilos
 * durante el vuelo, pero todavía no se pinta. El texto entra en .here, que se
 * añade al aterrizar — antes se pintaba en .on y las animaciones de entrada
 * (fill both) lo devolvían a su estado inicial en .here: aparecía, desaparecía
 * y volvía a aparecer. */
html.spatial .dest.on{visibility:visible}
html.spatial .dest.on.here{opacity:1;transition:opacity .4s var(--ease)}

/* El ancla del cuerpo 3D: caja invisible que le dice al planeta dónde posarse. */
.orb{position:absolute;display:block;pointer-events:none}
html:not(.spatial) .orb{display:none}

/* ---------- Lectura anclada al cuerpo (nunca una tarjeta) ---------- */
.rd{position:absolute;max-width:min(460px,42vw)}
.rd::before{content:"";position:absolute;left:-14%;top:-12%;width:130%;height:128%;
  z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(10,8,7,.92),rgba(10,8,7,.72) 52%,transparent 78%)}
.idx{font-family:var(--mono);font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--mut)}
.rd .tag{display:block;font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--accent);margin-top:8px}
.rd h2:focus-visible{outline-offset:6px}
.rd h2{font-size:clamp(21px,3.6vh + .7vw,40px);font-weight:900;letter-spacing:-1.3px;line-height:1.04;
  margin:.5vh 0 1.4vh;color:#fff}
/* la frase que carga el peso: una línea, sin conectores */
.claim{font-size:clamp(15px,2.1vh + .35vw,23px);font-weight:700;line-height:1.25;color:#fff;
  letter-spacing:-.4px;max-width:22ch}
.pts{list-style:none;margin-top:1.6vh;display:grid;gap:.9vh}
.pts li{position:relative;padding-left:15px;font-size:clamp(12px,1.45vh + .22vw,15px);
  line-height:1.45;color:var(--mut);max-width:44ch}
.pts li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 9px var(--orange)}
.rol{font-family:var(--mono);font-size:clamp(9.5px,1.15vh,11.5px);letter-spacing:1.5px;
  text-transform:uppercase;color:var(--amber);margin-top:1.4vh}
.stackrow{display:flex;flex-wrap:wrap;gap:.5vh 12px;margin-top:1.8vh}
.stackrow span{font-family:var(--mono);font-size:clamp(9.5px,1.2vh,12px);color:#ded7d1;
  padding-bottom:2px;border-bottom:1px solid rgba(249,106,23,.4)}
.fine{font-size:clamp(10px,1.2vh,12.5px);color:var(--mut);margin-top:1.4vh}
.rd .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:2.2vh}
.rd .acts .btn{padding:clamp(9px,1.3vh,13px) clamp(15px,2vw,22px);font-size:clamp(13px,1.6vh,15px)}

  font-size:13px;align-items:baseline}
/* aparición escalonada al llegar: nunca en bucle */
.dest.here .stackrow span,.dest.here .pts li{animation:up .5s var(--ease) both}
.dest.here .stackrow span:nth-child(2),.dest.here .pts li:nth-child(2){animation-delay:.06s}
.dest.here .stackrow span:nth-child(3),.dest.here .pts li:nth-child(3){animation-delay:.12s}
.dest.here .stackrow span:nth-child(4){animation-delay:.18s}
.dest.here .stackrow span:nth-child(5){animation-delay:.24s}
.dest.here .stackrow span:nth-child(6){animation-delay:.3s}
@keyframes up{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.dest.here .idx{animation:up .5s var(--ease) both}
.dest.here .rd h2{animation:up .55s .06s var(--ease) both}
.dest.here .claim{animation:up .55s .12s var(--ease) both}
.dest.here .rol{animation:up .55s .26s var(--ease) both}
.dest.here .rd .acts{animation:up .55s .2s var(--ease) both}

/* saltos entre casos: texto, sin botones ni cajas */
.hop{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px;font-size:12.5px}
.hop a{color:var(--mut);text-decoration:none;border-bottom:1px solid transparent}
.hop a:hover,.hop a:focus-visible{color:var(--accent);border-bottom-color:var(--line-hot)}

/* ---------- ESTRELLA / vista general ---------- */
#sistema .hero{position:absolute;left:5%;top:50%;transform:translateY(-50%);width:min(430px,42%)}
.halo{position:relative;width:118px;height:118px;margin-bottom:20px}
.halo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 50px -18px #000,0 0 0 8px rgba(234,85,54,.10)}
html:not(.spatial) .halo::after,html.no-3d .halo::after{content:"";position:absolute;inset:-12px;
  border-radius:50%;border:1px solid rgba(234,85,54,.42);
  box-shadow:0 0 42px rgba(234,85,54,.34), inset 0 0 30px rgba(249,106,23,.14)}
h1{font-size:clamp(36px,5.2vw,66px);font-weight:900;letter-spacing:-2.4px;line-height:.98;
  background:linear-gradient(94deg,#fff 12%,var(--accent) 50%,#fff 88%);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 9s linear infinite}
@keyframes shine{to{background-position:220% center}}
#sistema .sub{color:var(--accent);font-weight:700;font-size:clamp(15px,2vw,19px);margin-top:10px}
.loc{color:var(--mut);font-size:14px;margin-top:12px}
.loc b{color:var(--txt)}
#sistema .cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}
.tip{margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--mut)}
.tip span{color:var(--accent);margin-right:8px;display:inline-block;animation:blink 2.6s infinite}
@keyframes blink{50%{opacity:.25}}

#sistema .orb-sun{left:68%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px}

/* ---------- Los planetas: navegación real, enlaces reales ---------- */
.bodies{position:absolute;inset:0;z-index:12;pointer-events:none;
  transition:opacity .4s var(--ease),visibility 0s .4s}
html.spatial .bodies{opacity:0;visibility:hidden}
html.spatial body[data-at=sistema] .bodies{opacity:1;visibility:visible;transition:opacity .5s .1s var(--ease)}
html:not(.spatial) .bodies{display:none}

.planet{position:absolute;left:var(--x);top:var(--y);width:58px;height:58px;
  margin:-29px 0 0 -29px;pointer-events:auto;text-decoration:none;color:var(--txt);display:block}
.planet .body{display:block;width:100%;height:100%;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 33% 28%,var(--pc,#f2924a),#1b0e08 74%)}
html.no-3d .planet .body{opacity:1;box-shadow:0 0 30px -6px var(--pc)}
.planet::after{content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1px solid var(--pc,#f96a17);opacity:0;transform:scale(.82);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.planet:hover::after,.planet:focus-visible::after{opacity:.9;transform:none}
.planet .lbl{position:absolute;left:50%;top:calc(100% + 11px);transform:translateX(-50%);
  width:160px;text-align:center;line-height:1.3}
.planet .lbl b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.2px;
  text-shadow:0 2px 14px #000,0 0 26px rgba(0,0,0,.9)}
.planet .lbl i{display:block;font-style:normal;font-size:10px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--mut);margin-top:2px;text-shadow:0 2px 10px #000}
.planet:hover .lbl b,.planet:focus-visible .lbl b{color:var(--amber)}
body[data-at=sistema] .planet{animation:up .6s var(--ease) both}
.planet[data-i="1"]{animation-delay:.06s}.planet[data-i="2"]{animation-delay:.12s}
.planet[data-i="3"]{animation-delay:.18s}.planet[data-i="4"]{animation-delay:.24s}
.planet[data-i="5"]{animation-delay:.3s}.planet[data-i="6"]{animation-delay:.36s}

/* ---------- Un caso: el planeta a la izquierda, su lectura al lado ---------- */
.caso .orb{left:23%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px}
.caso .rd{left:41%;top:50%;transform:translateY(-50%);width:min(500px,50vw)}
/* hilo que ata la lectura al cuerpo: el panel no flota, cuelga del planeta */
.caso .rd::after{content:"";position:absolute;right:100%;top:50%;width:calc(18vw - 116px);height:1px;
  background:linear-gradient(90deg,rgba(249,106,23,.15),rgba(249,106,23,.8));pointer-events:none}
.caso.here .rd::after{animation:thread .6s var(--ease) both}
@keyframes thread{from{opacity:0;transform:scaleX(.2);transform-origin:right}to{opacity:1;transform:none}}

/* ---------- Núcleo: la Tierra, y la estrella pequeña al fondo ---------- */
#nucleo .orb-earth{left:74%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px}
#nucleo .orb-sun{left:95%;top:11%;width:58px;height:58px;margin:-29px 0 0 -29px}
.rd-core{left:6%;top:50%;transform:translateY(-50%);width:min(520px,48vw)}
.telem{list-style:none;display:flex;gap:26px;flex-wrap:wrap;margin-top:24px}
.telem b{display:block;font-size:34px;font-weight:900;letter-spacing:-1.6px;line-height:1;
  background:linear-gradient(180deg,#fff 25%,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.telem span{display:block;font-size:11.5px;color:var(--mut);margin-top:4px;max-width:130px;line-height:1.35}
.dest.here .telem li{animation:up .6s var(--ease) both}
.dest.here .telem li:nth-child(2){animation-delay:.08s}
.dest.here .telem li:nth-child(3){animation-delay:.16s}

/* ---------- Cinturón: los cuerpos menores esparcidos, no una fila ---------- */
.rd-belt{left:5%;top:12%;width:min(420px,40vw)}
.belt{list-style:none;position:absolute;inset:0;z-index:2;pointer-events:none}
.belt li{position:absolute;left:var(--x);top:var(--y);pointer-events:auto}
.belt a{display:block;width:clamp(118px,15vw,148px);margin-left:calc(clamp(118px,15vw,148px) / -2);text-align:center;text-decoration:none;
  color:var(--txt);transition:transform .3s var(--ease)}
.belt a:hover,.belt a:focus-visible{transform:translateY(-6px)}
.moon{position:relative;display:block;width:clamp(62px,10vh,92px);height:clamp(62px,10vh,92px);
  margin:0 auto 10px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(circle at 32% 26%,#443933,#17120f 74%);
  box-shadow:0 14px 34px -14px #000,0 0 0 5px rgba(249,106,23,.05)}
.moon img{width:100%;height:100%;object-fit:contain;padding:15%;display:block}
.moon::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 26%,rgba(255,196,130,.18),transparent 54%),
             linear-gradient(122deg,transparent 46%,rgba(0,0,0,.7) 94%)}
.belt a:hover .moon,.belt a:focus-visible .moon{border-color:var(--line-hot)}
.belt b{display:block;font-size:clamp(12px,1.7vh,14.5px);font-weight:800;color:#fff;
  text-shadow:0 2px 12px #000,0 0 24px #000}
.belt i{display:block;font-style:normal;font-size:clamp(10px,1.4vh,12px);color:#c9c0ba;
  line-height:1.35;margin-top:3px;text-shadow:0 2px 10px #000,0 0 20px #000}
#cinturon.here .belt li{animation:up .55s var(--ease) both}
.belt li:nth-child(2){animation-delay:.06s}.belt li:nth-child(3){animation-delay:.12s}
.belt li:nth-child(4){animation-delay:.18s}.belt li:nth-child(5){animation-delay:.24s}
.belt li:nth-child(6){animation-delay:.3s}

/* ---------- Nebulosa: el stack como capas ---------- */
.rd-neb{left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,88vw);max-width:none;
  text-align:center}
.rd-neb::before{width:150%;left:-25%}
.rd-neb .claim,.rd-sig .claim{margin-inline:auto}
.layers{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;margin-top:22px;text-align:left;
  font-family:var(--mono);font-size:13px}
.layers dt{color:var(--amber);letter-spacing:1.4px;text-transform:uppercase;font-size:11px;padding-top:3px}
.layers dd{color:var(--mut);line-height:1.6;border-bottom:1px solid var(--line);padding-bottom:11px}
.layers dd:last-child{border-bottom:0}
.dest.here .layers dt,.dest.here .layers dd{animation:up .5s var(--ease) both}
.dest.here .layers dd:nth-of-type(2),.dest.here .layers dt:nth-of-type(2){animation-delay:.07s}
.dest.here .layers dd:nth-of-type(3),.dest.here .layers dt:nth-of-type(3){animation-delay:.14s}
.dest.here .layers dd:nth-of-type(4),.dest.here .layers dt:nth-of-type(4){animation-delay:.21s}

/* ---------- Señal: Plutón, el cuerpo que solo conocimos por una transmisión ---------- */
#senal .orb-pluto{left:9%;top:16%;width:112px;height:112px;margin:-56px 0 0 -56px}
.rd-sig{left:50%;top:50%;transform:translate(-50%,-50%);width:min(1000px,94vw);max-width:none;
  text-align:center}
.rd-sig::before{width:130%;left:-15%}
.pts2{font-size:clamp(12px,1.5vh,15px);color:var(--mut);margin-top:.8vh}
.pts2 b{color:var(--amber);font-weight:600}
.tv{list-style:none;display:flex;gap:clamp(10px,2vw,22px);justify-content:center;flex-wrap:wrap;margin-top:2.4vh}
.tv a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--txt);
  transition:transform .3s var(--ease)}
.tv a:hover,.tv a:focus-visible{transform:translateY(-5px)}
.tv b{display:grid;place-items:center;width:clamp(48px,7vh,72px);height:clamp(48px,7vh,72px);border-radius:50%;
  font-family:var(--mono);font-size:clamp(13px,1.9vh,17px);color:var(--amber);
  border:1px solid rgba(249,106,23,.45);background:radial-gradient(circle at 34% 28%,rgba(249,106,23,.28),rgba(20,14,11,.8) 70%)}
.tv a:hover b,.tv a:focus-visible b{border-color:var(--orange);box-shadow:0 0 26px -6px var(--orange)}
.tv span{font-size:clamp(9.5px,1.2vh,11.5px);letter-spacing:1.2px;text-transform:uppercase;color:var(--mut)}
.socials{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px;font-size:13.5px}
.socials a{color:var(--txt);text-decoration:none;font-weight:700;
  border-bottom:1px solid rgba(249,106,23,.4);padding-bottom:2px}
.socials a:hover{color:var(--accent)}
.socials small{color:var(--mut);font-weight:400;margin-left:5px}

/* ---------- Estación ---------- */
#estacion .orb-station{left:78%;top:48%;width:280px;height:280px;margin:-140px 0 0 -140px}
.rd-station{left:6%;top:50%;transform:translateY(-50%);width:min(520px,48vw)}
.proto{list-style:none;margin-top:18px;display:grid;gap:9px}
.proto li{position:relative;padding-left:34px;font-size:13.5px;color:var(--mut);line-height:1.5}
.proto b{position:absolute;left:0;top:0;font-family:var(--mono);font-size:11px;color:var(--orange)}
.proto li::after{content:"";position:absolute;left:23px;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 10px var(--orange)}
.dest.here .proto li{animation:up .5s var(--ease) both}
.proto li:nth-child(2){animation-delay:.06s}.proto li:nth-child(3){animation-delay:.12s}
.proto li:nth-child(4){animation-delay:.18s}

/* ================================================================
   CARTA DE NAVEGACIÓN — siempre visible, nunca hay que buscarla
   ================================================================ */
.chart{position:relative;z-index:30;flex:none;display:flex;gap:5px;align-items:center;justify-content:center;
  flex-wrap:wrap;min-height:var(--bar);padding:9px 12px 12px;border-top:1px solid var(--line);
  background:linear-gradient(0deg,rgba(12,10,9,.94),rgba(12,10,9,.55));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.chart a{flex:none;position:relative;text-decoration:none;color:var(--mut);font-size:13px;
  font-weight:600;padding:8px 13px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent;transition:color .2s,background .2s,border-color .2s}
.chart a i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--accent);
  margin-left:5px;opacity:.85}
.chart a:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.chart a[aria-current]{color:#fff;background:rgba(234,85,54,.16);border-color:var(--line-hot)}
@media(max-width:820px){.chart{gap:3px;padding:5px 6px 7px;min-height:0}
  .chart a{font-size:10.5px;padding:5px 9px}}

/* pie: enlaces del sitio, siempre en el DOM */
.foot{position:relative;z-index:30;font-size:10.5px;color:var(--mut);text-align:center;
  padding:0 14px 8px;background:rgba(12,10,9,.94);line-height:1.5}
.foot a{color:var(--accent);text-decoration:none}
.foot a:hover{text-decoration:underline}
html.spatial .foot{flex:none}

/* ================================================================
   MÓVIL — el cuerpo arriba, la lectura debajo. Todo a golpe de dedo.
   ================================================================ */
@media(max-width:820px){
  :root{--bar:74px}
  .rd{max-width:none}
  #sistema .hero{position:absolute;left:0;right:0;top:14px;transform:none;width:auto;
    padding:0 20px;text-align:center}
  .halo{width:78px;height:78px;margin:0 auto 12px}
  h1{font-size:38px;letter-spacing:-1.6px}
  #sistema .cta{justify-content:center;margin-top:16px}
  #sistema .cta .btn{padding:11px 17px;font-size:14px}
  .tip{margin-top:14px;font-size:10px}
  /* la estrella queda detrás del avatar: el núcleo no se ve, solo su corona */
  #sistema .orb-sun{left:50%;top:52px;width:44px;height:44px;margin:-22px 0 0 -22px}
  .planet{left:var(--mx);top:var(--my);width:44px;height:44px;margin:-22px 0 0 -22px}
  .planet .lbl{width:112px;top:calc(100% + 7px)}
  .planet .lbl b{font-size:11px}
  .planet .lbl i{display:none}
  .caso .orb{left:50%;top:62px;width:104px;height:104px;margin:-52px 0 0 -52px}
  .caso .rd{left:18px;right:18px;top:122px;transform:none;width:auto}
  .caso .rd::after{display:none}
  .hop{gap:11px;font-size:11px;margin-top:1.5vh}
  .claim{font-size:16px;max-width:none}
  #nucleo .orb-earth{left:50%;top:66px;width:112px;height:112px;margin:-56px 0 0 -56px}
  #nucleo .orb-sun{left:88%;top:26px;width:32px;height:32px;margin:-16px 0 0 -16px}
  #senal .orb-pluto{left:50%;top:30px;width:52px;height:52px;margin:-26px 0 0 -26px}
  .rd-core{left:18px;right:18px;top:132px;transform:none;width:auto}
  .telem{gap:16px}
  .telem b{font-size:26px}
  .telem span{font-size:10.5px;max-width:92px}
  .rd-belt{left:18px;right:18px;top:6px;width:auto}
  .belt{top:150px}
  .belt li{left:var(--mx);top:var(--my)}
  .belt a{width:104px;margin-left:-52px}
  .moon{width:50px;height:50px;margin-bottom:6px}
  .moon img{padding:9px}
  .belt b{font-size:11.5px}
  .belt i{display:none}
  .rd-neb,.rd-sig{left:16px;right:16px;top:50%;transform:translateY(-50%);width:auto}
  .layers{grid-template-columns:1fr;gap:3px 0}
  .layers dd{margin-bottom:9px}
  #estacion .orb-station{left:50%;top:58px;width:104px;height:104px;margin:-52px 0 0 -52px}
  .rd-station{left:18px;right:18px;top:118px;transform:none;width:auto}
  .tv{gap:10px}
  html.spatial .foot{display:none}
}
@media(max-width:820px) and (max-height:700px){
  .halo{width:56px;height:56px}
  h1{font-size:30px}
}

/* ================================================================
   CAÍDA POR ESPACIO IMPOSIBLE (zoom 200%, apaisado, ventana diminuta)
   Cuando el contenido de verdad no cabe, el destino activo pasa a flujo y el
   escenario se hace desplazable. Es la excepción de la WCAG 1.4.4, no el diseño.
   ================================================================ */
/* La red de seguridad: se enciende cuando el contenido de verdad NO cabe
   (zoom 200%, teléfono apaisado, tipografía de sistema enorme). La clase la
   pone el JS midiendo la caja real, no un breakpoint que pueda saltar de más.
   A 100% en pantalla normal esto nunca se activa: cero scroll, punto. */
html.spatial.tight main{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html.spatial.tight .dest{position:relative;inset:auto;min-height:0;padding:16px 18px 24px}
html.spatial.tight .dest:not(.on){display:none}
html.spatial.tight .rd,html.spatial.tight .rd-core,html.spatial.tight .rd-belt,
html.spatial.tight .rd-neb,html.spatial.tight .rd-sig,html.spatial.tight .rd-station{position:static;transform:none;
  width:auto;max-width:none;left:auto;top:auto;right:auto;text-align:left}
html.spatial.tight .orb{position:relative;left:auto;top:auto;margin:0 auto 12px;
  width:88px;height:88px;display:block}
html.spatial.tight #sistema .hero{position:static;transform:none;width:auto;text-align:left;padding:0}
html.spatial.tight .halo{width:54px;height:54px;margin:0 0 10px}
html.spatial.tight .bodies{position:relative;inset:auto;height:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:14px 18px 0}
html.spatial.tight .planet{position:relative;left:auto;top:auto;margin:0;width:auto;height:auto;
  display:flex;align-items:center;gap:10px}
html.spatial.tight .planet .body{width:26px;height:26px;flex:none;opacity:1;
  background:radial-gradient(circle at 33% 28%,var(--pc),#1b0e08 74%)}
html.spatial.tight .planet::after{display:none}
html.spatial.tight .planet .lbl{position:static;transform:none;width:auto;text-align:left}
html.spatial.tight .planet .lbl i{display:none}
html.spatial.tight .belt{position:static;display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
html.spatial.tight .belt li{position:static}
html.spatial.tight .belt a{width:118px;margin:0}
html.spatial.tight .foot{display:none}
html.spatial.tight .caso .rd::after,html.spatial.tight .rd::before{display:none}
html.spatial.tight .claim{max-width:none}

/* ================================================================
   MODO LECTURA — sin JS, sin WebGL o con ?texto=1: documento normal
   ================================================================ */
html:not(.spatial) main{max-width:var(--col);margin:0 auto;padding:8px 22px 40px}
html:not(.spatial) .dest{position:relative;padding:34px 0;border-bottom:1px solid var(--line)}
html:not(.spatial) .rd{position:static;transform:none;max-width:720px;width:auto;max-height:none;
  overflow:visible;text-align:left}
html:not(.spatial) .rd::before,html:not(.spatial) .rd::after{display:none}
html:not(.spatial) #sistema .hero{position:static;transform:none;width:auto;text-align:center}
html:not(.spatial) .halo{margin:0 auto 22px;width:140px;height:140px}
html:not(.spatial) #sistema .cta{justify-content:center}
html:not(.spatial) .tip{display:none}
html:not(.spatial) .belt{position:static;display:flex;flex-wrap:wrap;gap:24px;margin-top:22px}
html:not(.spatial) .belt li{position:static}
html:not(.spatial) .belt a{width:150px;margin:0}
html:not(.spatial) .chart{position:sticky;top:0;height:auto;padding:10px 14px;
  border-top:0;border-bottom:1px solid var(--line);background:rgba(12,10,9,.94)}
html:not(.spatial) .foot{padding:22px 14px 40px;font-size:13px;white-space:normal}
html:not(.spatial) .topbar{position:sticky;top:0}

/* ================================================================
   ARTÍCULOS (casos / blog / consulta) — subpáginas
   ================================================================ */
.nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  background:linear-gradient(180deg,rgba(12,10,9,.88),rgba(12,10,9,.55));
  border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:8px;height:58px}
.nav .brand{margin-right:auto}
.nav a.lnk{color:var(--mut);text-decoration:none;font-size:14px;font-weight:600;
  padding:8px 11px;border-radius:9px;transition:color .2s,background .2s}
.nav a.lnk:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.nav .btn{padding:9px 16px;font-size:14px}
@media(max-width:720px){ .nav a.lnk{display:none} .nav .wrap{height:54px} }

.back{color:var(--mut);text-decoration:none;font-size:14px}
.back:hover{color:var(--accent)}
.art{padding:34px 0 20px}
.art>.back{display:inline-block;margin-bottom:12px}
.art>.tag{display:block}
.art>article{background:var(--glass);border:1px solid var(--line);border-radius:20px;
  padding:30px 30px 12px;margin-top:24px;box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}
.art>article>.skuld:last-child{margin-bottom:18px}
@media(max-width:640px){.art>article{padding:22px 20px 8px;border-radius:16px}}
.art h1{font-size:clamp(27px,4.6vw,44px);letter-spacing:-1.4px;line-height:1.1;margin:14px 0 10px;
  animation:none;background:none;color:var(--txt);-webkit-text-fill-color:currentColor}
.meta{color:var(--mut);font-size:14px}
.tag{display:inline-block;font-size:11.5px;color:var(--accent);font-weight:800;
  text-transform:uppercase;letter-spacing:1.4px}
.hero-img{width:100%;border-radius:16px;border:1px solid var(--line);margin:20px 0 4px;display:block;
  box-shadow:var(--shadow)}
article p{margin:0 0 16px;font-size:17px;color:#e7e3e0}
article h2{font-size:20px;font-weight:800;margin:28px 0 10px;color:#fff;text-align:left;
  letter-spacing:-.4px}
.conf{display:inline-block;background:rgba(234,85,54,.15);border:1px solid var(--orange);
  color:var(--accent);font-weight:700;font-size:12px;padding:5px 12px;border-radius:999px;letter-spacing:1px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px}
.chip{background:rgba(26,22,20,.7);border:1px solid rgba(255,255,255,.12);border-radius:999px;
  padding:6px 13px;font-size:13px;color:var(--mut)}
.role{color:var(--mut);font-size:15px;margin-top:10px}.role b{color:var(--txt)}
.repo{display:inline-block;margin-top:14px;color:var(--accent);text-decoration:none;
  font-weight:700;font-size:15px}
.repo:hover{text-decoration:underline}
.verdict{background:rgba(26,22,20,.7);border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:12px;padding:16px 18px;margin:22px 0;font-size:16px}
.verdict b{color:var(--accent)}
.skuld{background:linear-gradient(135deg,rgba(234,85,54,.16),rgba(249,106,23,.05));
  border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:22px;margin:30px 0;font-size:16px}
.skuld a{color:var(--accent);font-weight:700;text-decoration:none}
.skuld a:hover{text-decoration:underline}
.art footer{padding:30px 0 60px;color:var(--mut);font-size:14px;text-align:center}
.art footer a{color:var(--accent);text-decoration:none}

/* Índice del blog: una hilera de cuerpos menores, sin tarjetas */
.minors{list-style:none;display:flex;flex-wrap:wrap;gap:34px 26px;margin:26px auto 10px;
  justify-content:center;max-width:790px}
.minors li{flex:0 0 168px}
.minors a{display:block;text-decoration:none;color:var(--txt);text-align:center;
  transition:transform .3s var(--ease)}
.minors a:hover,.minors a:focus-visible{transform:translateY(-6px)}
.minors b{display:block;font-size:14.5px;font-weight:800;margin-top:2px}
.minors .tag{display:block;font-size:9.5px;letter-spacing:1.1px;margin-bottom:3px}
.minors i{display:block;font-style:normal;font-size:11.5px;color:var(--mut);line-height:1.4;margin-top:4px}

/* ---------- Formulario ---------- */
form{display:grid;gap:0}
label{display:block;font-weight:700;font-size:14px;margin:18px 0 6px}
label:first-of-type{margin-top:0}
input,select,textarea{width:100%;background:rgba(12,10,9,.8);border:1px solid rgba(255,255,255,.14);
  border-radius:11px;padding:13px 14px;color:var(--txt);font-family:inherit;font-size:15px;
  transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(234,85,54,.18)}
textarea{min-height:118px;resize:vertical}
.hp{display:none}
button[type=submit]{width:100%;margin-top:24px;padding:15px;border:0;border-radius:11px;
  background:linear-gradient(180deg,var(--accent),var(--orange));color:#fff;font-weight:800;
  font-size:16px;cursor:pointer;font-family:inherit;
  box-shadow:0 12px 30px -12px rgba(234,85,54,.85);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
button[type=submit]:hover{transform:translateY(-2px)}
.or{text-align:center;color:var(--mut);font-size:13px;margin:20px 0}
.trust{text-align:center;color:var(--mut);font-size:13px;margin-top:18px}

/* ---------- Accesibilidad ---------- */
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--orange);color:#fff;
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}
.skip2:focus{left:230px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  h1{background-position:0 center}
  html.spatial .dest{visibility:hidden}
  html.spatial .dest.on{visibility:visible}
}