/* ==========================================================================
   PORTADA · video real del arma recorrido con el scroll
   Capa 1: video (arma.mp4) que avanza con el scroll.
   Capa 2: HUD vectorial (SVG) con el despiece, cotas y líneas guía.
   Capa 3: título que se desvanece con paralaje y desenfoque; tarjeta del capítulo.
   Todo ocupa 100vw reales: el hub se sale del contenedor de 780 px.
   ========================================================================== */
body[data-vista="hub"]{background:#05070a;overflow-x:clip}
body[data-vista="hub"] .wrap{max-width:none;padding-inline:0;padding-block:0}
#hub{padding:0;margin:0;width:100%;--bg:#05070a}
#hub>*:not(.hero){margin-left:auto;margin-right:auto}

.hero{position:relative;height:calc(100svh * 8.6);background:#05070a;color:#ecebe6}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;width:100%;overflow:hidden;contain:layout paint;isolation:isolate}
.hero-video{position:absolute;top:0;left:50%;width:max(100%,177.78svh);height:auto;aspect-ratio:16/9;background:#05070a;transform:translateX(-50%) scale(1.02) translate3d(calc(var(--px,0)*-6px),calc(var(--py,0)*-4px),0);will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,#000 var(--m1,66%),transparent var(--m2,74%));mask-image:linear-gradient(180deg,#000 var(--m1,66%),transparent var(--m2,74%))}
@media (max-aspect-ratio:1/1){.hero-video{top:76px;width:100%;transform:translateX(-50%) scale(1.6);transform-origin:50% 28%}}
.hero-frames{position:absolute;inset:0;opacity:0}
.hero-frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.hero-frames img.on{opacity:.9}
.hero.sin-video .hero-frames{opacity:1}.hero.sin-video .hero-video{opacity:0}
.hero-vel{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 90% at 55% 40%,transparent 45%,rgba(5,7,10,.7) 100%),
  linear-gradient(180deg,rgba(5,7,10,.55) 0%,rgba(5,7,10,0) 24%,rgba(5,7,10,0) 50%,rgba(5,7,10,.88) 100%);
  opacity:var(--vel,.55)}
.hero-dark{position:absolute;inset:0;background:#05070a;opacity:var(--dark,0);pointer-events:none}

/* ---------- HUD ---------- */
.hud{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;font-family:var(--font-mono,"IBM Plex Mono",monospace)}
.hud text{font-family:var(--font-mono,"IBM Plex Mono",monospace);fill:#d4af37;letter-spacing:.08em}
.hud .dim{fill:rgba(236,235,230,.55)}
.hud .hf{fill:none;stroke:#d4af37;stroke-width:1.6;stroke-linecap:square;opacity:.75}
.hud .tick{fill:#d4af37;opacity:.5}
.hud .tick.l{opacity:.9}
.hud .scan{fill:url(#g-scan)}
#sch{transition:opacity .5s var(--ease-out,ease)}
.part{transition:opacity .5s var(--ease-out,ease),filter .5s}
.part.dim{opacity:.28}
.part.on{filter:drop-shadow(0 0 16px rgba(212,175,55,.5))}
.part path,.part rect,.part polygon,.part ellipse,.part circle{stroke:rgba(255,255,255,.08);stroke-width:1.2;vector-effect:non-scaling-stroke}
.part .k0{fill:#06080b;stroke:none}
.f1{fill:#12171d}.f2{fill:#1c232b}.f3{fill:#2b333e}.fs{fill:#8793a2}.fs2{fill:#626c79}.fsh{fill:#b4bdc8}.fb{fill:#c9a24a}.fbn{fill:#a2793a}.fw{fill:#e8e6df}
.cota path,.cota rect,.cota polygon{fill:#d4af37;stroke:none}
.cota text{font-size:15px;fill:#d4af37}
.guia{stroke:#d4af37;stroke-width:1.4;stroke-dasharray:3 7;fill:none;vector-effect:non-scaling-stroke}
.lbl line,.lbl polyline{fill:none;stroke:#d4af37;stroke-width:1.6;vector-effect:non-scaling-stroke}
.lbl .ret{fill:rgba(212,175,55,.14);stroke:#d4af37;stroke-width:1.6}
.lbl text.n{font-size:17px;font-weight:700;fill:#f1efe9;letter-spacing:.12em}
.lbl text.d{font-size:11.5px;fill:rgba(236,235,230,.7);letter-spacing:.04em}

/* ---------- título ---------- */
.hero-title{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(20px,6vw,96px) max(11vh,64px);max-width:min(100%,980px);will-change:transform,opacity,filter}
.hero-k{font:600 11px/1 var(--font-mono,monospace);letter-spacing:.26em;text-transform:uppercase;color:#d4af37;margin:0 0 16px}
.hero-title h1{font:600 clamp(40px,10vw,96px)/1.02 var(--font-display,serif);letter-spacing:-.03em;margin:0 0 14px;color:#f5f3ef;text-wrap:balance}
.hero-title h1 em{font-style:italic;font-weight:400;color:#d4af37}
.hero-s{margin:0;max-width:44ch;font-size:clamp(15px,2.4vw,19px);line-height:1.5;color:#b4b7bb}
.hero-play{margin-top:22px;appearance:none;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid rgba(212,175,55,.6);border-radius:999px;background:rgba(5,7,10,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#d4af37;font:600 14px/1 var(--font-ui);cursor:pointer;transition:background .2s,color .2s}
@media (hover:hover) and (pointer:fine){.hero-play:hover{background:#d4af37;color:#05070a}}
.hero-play:focus-visible{background:#d4af37;color:#05070a}
.hero-scroll{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);font:600 10.5px/1 var(--font-mono,monospace);letter-spacing:.3em;text-transform:uppercase;color:rgba(236,235,230,.6);display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .3s}
.hero-scroll::after{content:"";width:2px;height:30px;border-radius:2px;background:linear-gradient(#d4af37,transparent);transform-origin:top;animation:hero-linea 1.8s var(--ease-io,ease-in-out) infinite}
.hero-scroll.fuera{opacity:0}
@keyframes hero-linea{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- tarjeta del capítulo ---------- */
.hero-cards{position:absolute;left:0;right:0;bottom:0;pointer-events:none;padding:0 clamp(16px,4vw,64px) max(5.5vh,28px)}
.hc{position:absolute;left:clamp(16px,4vw,64px);right:clamp(16px,4vw,64px);bottom:max(9vh,60px);max-width:540px;padding:22px 22px 20px;border:1px solid rgba(212,175,55,.34);border-radius:14px;
  background:rgba(8,11,15,.72);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 70px -30px #000;
  opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),visibility 0s linear .7s}
.hc.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:.18s,.18s,0s}
.hc .k{display:block;font:600 11px/1 var(--font-mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:#d4af37;margin-bottom:12px}
.hc h2{margin:0 0 8px;font:600 clamp(26px,5.4vw,42px)/1.06 var(--font-display,serif);letter-spacing:-.025em;color:#f5f3ef;text-wrap:balance;display:block}
.hc h2::before{display:none}
.hc h2 em{font-style:italic;font-weight:400;color:#d4af37}
.hc p{margin:0 0 16px;font-size:15px;line-height:1.55;color:#b4b7bb}
.hc .row{display:flex;gap:8px;flex-wrap:wrap}
@media (min-width:900px){.hc{max-width:360px}.hc h2{font-size:clamp(24px,2.6vw,34px)}}
@media (max-width:640px){.hc{padding:18px 18px 16px;border-radius:20px;max-width:none}.hc p{font-size:14px;margin-bottom:12px}}

/* ---------- carril de capítulos y telemetría ---------- */
.hero-rail{position:absolute;right:max(12px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);z-index:4;list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hero-rail button{appearance:none;border:0;background:none;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;padding:0}
.hero-rail button::before{content:"";width:9px;height:9px;border-radius:50%;border:1.6px solid #d4af37;transition:transform .3s var(--ease-out,ease),background .3s}
.hero-rail button.on::before{background:#d4af37;transform:scale(1.55)}
@media (hover:hover) and (pointer:fine){.hero-rail button:hover::before{transform:scale(1.4)}}

/* ---------- sin movimiento: la vista técnica queda quieta y los capítulos se apilan ---------- */
.hero.estatico{height:auto}
.hero.estatico .hero-pin{position:relative;height:auto;min-height:100svh;overflow:visible;contain:none;display:flex;flex-direction:column}
.hero.estatico .hud{position:relative;height:56vh;min-height:360px}
.hero.estatico .hero-title{position:relative;padding-top:max(14vh,90px);opacity:1!important;filter:none!important;transform:none!important}
.hero.estatico .hero-cards{position:relative;display:grid;gap:12px;padding:0 clamp(16px,4vw,64px) 40px}
.hero.estatico .hc{position:relative;left:auto;right:auto;bottom:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;max-width:none}
.hero.estatico .hero-rail,.hero.estatico .hero-scroll,.hero.estatico .hero-play{display:none}
.hero.estatico .hero-video{opacity:.5}

/* ---------- sistemas: el arma, repartida ---------- */
.sistemas{padding:clamp(72px,14vh,160px) clamp(16px,4vw,64px) 24px;max-width:1280px}
.sistemas>h2{font:600 clamp(32px,6vw,68px)/1.04 var(--font-display,serif);letter-spacing:-.03em;color:#f5f3ef;margin:0 0 14px;max-width:18ch;text-wrap:balance;display:block}
.sistemas>h2::before{display:none}
.sistemas>h2 em{font-style:italic;font-weight:400;color:#d4af37}
.sistemas>p{margin:0 0 34px;max-width:56ch;font-size:clamp(15px,2.2vw,18px);line-height:1.55;color:#a6a9ad}
.sys-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:700px){.sys-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.sys-grid{grid-template-columns:repeat(12,1fr)}.sys.g1{grid-column:span 7}.sys.g2{grid-column:span 5}.sys.g3{grid-column:span 5}.sys.g4{grid-column:span 7}.sys.g5{grid-column:span 4}}
.sys{appearance:none;text-align:left;position:relative;display:flex;flex-direction:column;gap:10px;min-height:210px;padding:24px 24px 56px;border:1px solid rgba(212,175,55,.2);border-radius:14px;
  background:linear-gradient(160deg,rgba(18,24,31,.78),rgba(8,11,15,.74));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#ecebe6;font:inherit;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 28px 60px -34px #000;transition:border-color .25s,transform .2s var(--ease-out,ease)}
.sys .pieza{width:34px;height:34px;margin:0 0 6px;color:#d4af37;stroke-width:1.5;opacity:1}
.sys b{font:600 clamp(24px,3.4vw,34px)/1.05 var(--font-display,serif);letter-spacing:-.02em;color:#f5f3ef}
.sys small{font:600 10.5px/1 var(--font-mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:#d4af37}
.sys span{font-size:15px;line-height:1.5;color:#a6a9ad;max-width:46ch}
.sys i{position:absolute;right:22px;bottom:18px;font-style:normal;font-size:22px;color:#d4af37;transition:transform .25s var(--ease-out,ease)}
@media (hover:hover) and (pointer:fine){.sys:hover{border-color:rgba(212,175,55,.6)}.sys:hover i{transform:translateX(5px)}}
.sys:focus-visible{outline:2px solid #d4af37;outline-offset:3px}
.sys-mas{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:14px}
.sys-mas .hub-card{min-height:96px;padding:16px 16px 16px}
.sys-mas .hub-card i{display:none}

@media (prefers-reduced-motion:reduce){.hero-scroll::after{animation:none}}

/* el hub ocupa todo el ancho (anula el contenedor de 1120 px de la hoja anterior) */
#hub>.hero{width:100%;max-width:none;margin:0}
#hub>.sistemas{width:min(1280px,100%);margin-left:auto;margin-right:auto}
#hub>.sesion,#hub>.carta,#hub>.share-row{width:min(1120px,calc(100% - 32px))}
@media (min-width:1024px){#hub{width:100%;margin:0}}