/* USONOI · capa espacial (fondo, escena del sistema, nave) */

.space{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#030303}
.space-deep{position:absolute;inset:-6% -2%;
  background-image:url("../assets/space/cielo-1280.webp");
  background-size:cover;background-position:50% 40%;opacity:.95;
  transform:translate3d(0,var(--par,0px),0);will-change:transform}
@media (min-width:900px){.space-deep{background-image:image-set(url("../assets/space/cielo-2560.webp") 1x)}}
.space-sky{position:absolute;inset:0;width:100%;height:100%}
.space::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55))}

/* ---------- escena del sistema ---------- */
.system{position:relative;border-top:1px solid var(--line)}
.system-scene{position:relative;width:100%;aspect-ratio:16/10;max-height:92svh;margin-inline:auto;overflow:hidden}
.scene-imgs,.scene-gl,.scene-svg{position:absolute;inset:0;width:100%;height:100%}
.scene-imgs img{position:absolute;transform-origin:50% 50%;will-change:transform}
/* disposición estática (sin JS): vista general */
.scene-imgs [data-obj="station"]{left:37%;top:10%;width:26%}
.scene-imgs [data-obj="rec"]{left:-2%;top:30%;width:40%}
.scene-imgs [data-obj="tec"]{left:38%;top:52%;width:22%}
.scene-imgs [data-obj="web"]{left:72%;top:32%;width:22%}
.system .scene-gl{opacity:0;transition:opacity .8s ease}
.system.gl-ready .scene-gl{opacity:1}
.system.gl-ready .scene-imgs{opacity:0;transition:opacity .8s ease}
.scene-svg{overflow:visible}
.scene-svg .route{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:2 6}
.scene-svg .link{fill:none;stroke:var(--web);stroke-width:1.2;stroke-dasharray:6 10;opacity:0;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-32}}
.scene-svg .label{font-family:var(--mono);font-size:11px;letter-spacing:.24em;fill:rgba(255,255,255,.75);text-transform:uppercase}
.scene-svg .label-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;fill:rgba(255,255,255,.45)}
.scene-svg .trail{fill:none;stroke-width:1.5;stroke-linecap:round}
.ship{color:#fff}
.ship .glow{fill:var(--world)}
.system-scene .readout{opacity:0;transition:opacity .4s}
.system-scene .readout.on{opacity:1}

.system-steps{position:relative;z-index:3}
.step{padding-block:3rem}
.step-box{max-width:31rem;display:grid;gap:1rem}
.step-box h3{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:clamp(1.4rem,3vw,2.3rem);line-height:1.08}
.step-box h3 small{display:block;font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.3em;color:var(--world);margin-bottom:.8rem}
.step-box p{color:var(--ink-2)}
.step-box .chips{margin-top:.2rem}

/* modo en vivo (JS): escena fija y textos que la recorren */
.system.live .system-scene{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));aspect-ratio:auto;max-height:none}
.system.live .system-steps{margin-top:calc(-1 * (100svh - var(--nav-h)))}
.system.live .step{min-height:115svh;display:flex;align-items:center;padding-block:0}
.system.live .step:first-child{min-height:125svh}
.system.live .step:last-child{min-height:120svh}
.system.live .step-box{padding:1.8rem;background:linear-gradient(90deg,rgba(3,3,3,.82),rgba(3,3,3,.55) 70%,transparent);
  border-left:1px solid color-mix(in srgb,var(--world) 55%,transparent);opacity:.25;transition:opacity .5s ease}
.system.live .step.active .step-box{opacity:1}
@media (max-width:899px){
  .system.live .step{align-items:flex-end;padding-bottom:9svh}
  .system.live .step-box{background:linear-gradient(0deg,rgba(3,3,3,.92),rgba(3,3,3,.78) 75%,rgba(3,3,3,.2));border-left:0;border-top:1px solid color-mix(in srgb,var(--world) 55%,transparent);padding:1.4rem 1.2rem}
  .system-scene{aspect-ratio:4/5}
  .scene-imgs [data-obj="station"]{left:30%;top:4%;width:40%}
  .scene-imgs [data-obj="rec"]{left:-14%;top:30%;width:66%}
  .scene-imgs [data-obj="tec"]{left:30%;top:62%;width:38%}
  .scene-imgs [data-obj="web"]{left:58%;top:34%;width:38%}
}
.system-progress{position:absolute;z-index:4;right:var(--gutter);top:50%;transform:translateY(-50%);display:grid;gap:.9rem;list-style:none}
.system-progress li{width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.4);transition:all .3s}
.system-progress li.on{background:#fff;box-shadow:0 0 10px #fff}
@media (max-width:899px){.system-progress{top:.8rem;transform:none;display:flex}.system-scene .readout{display:none}}

.nave-inline{width:34px;height:34px;color:#fff;flex:none}