@font-face{font-family:'Space Grotesk';font-weight:400;font-style:normal;font-display:block;src:url(../assets/fonts/space-grotesk-400-C_H9aji2.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:500;font-style:normal;font-display:block;src:url(../assets/fonts/space-grotesk-500-KYfcXlvK.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:600;font-style:normal;font-display:block;src:url(../assets/fonts/space-grotesk-600-0SbvWzVy.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:block;src:url(../assets/fonts/ibm-plex-mono-400-DMJ8VG8y.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:block;src:url(../assets/fonts/ibm-plex-mono-500-DSY6xOcd.woff2) format('woff2')}

:root{--bg:#030712;--bg2:#070d1c;--panel:rgba(10,17,33,.86);--line:rgba(148,163,184,.18);--line2:rgba(148,163,184,.32);--tx:#e6ebf5;--mut:#94a3b8;--cy:#22d3ee;--vi:#a78bfa;--sun:#f59e0b;--sg:'Space Grotesk',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sg);-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(1200px 600px at 80% -10%,rgba(167,139,250,.08),transparent 60%),radial-gradient(900px 500px at 0% 0%,rgba(34,211,238,.07),transparent 60%),var(--bg)}
#global-defs{position:absolute;width:0;height:0;overflow:hidden}
.top{display:flex;align-items:center;gap:22px;padding:14px 26px;border-bottom:1px solid var(--line);background:rgba(3,7,18,.75);backdrop-filter:blur(8px)}
.top .logo{height:30px;display:block}
.top .title{flex:1;min-width:0;border-left:1px solid var(--line);padding-left:22px}
.top h1{margin:0;font-size:20px;font-weight:600;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top p{margin:3px 0 0;font-size:12.5px;color:var(--mut)}
.top .site{font-family:var(--mono);font-size:12.5px;color:var(--cy);text-decoration:none;letter-spacing:.04em}
.tabs{display:flex;gap:4px;padding:8px 20px;border-bottom:1px solid var(--line);background:rgba(3,7,18,.6);overflow-x:auto}
.tabs button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:8px;font-size:13.5px;color:var(--mut);white-space:nowrap;border:1px solid transparent;transition:.15s}
.tabs button span{font-family:var(--mono);font-size:10.5px;color:rgba(148,163,184,.6)}
.tabs button:hover{color:var(--tx);background:rgba(148,163,184,.06)}
.tabs button.on{color:#fff;background:linear-gradient(180deg,rgba(34,211,238,.12),rgba(167,139,250,.08));border-color:rgba(34,211,238,.35);box-shadow:0 0 0 1px rgba(34,211,238,.08) inset,0 0 18px rgba(34,211,238,.08)}
.tabs button.on span{color:var(--cy)}
main{flex:1;position:relative}
.tab{display:none}
.tab.on{display:block}
.foot{padding:12px 26px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:rgba(148,163,184,.7)}

/* ---------- mapa ---------- */
.map-tab.on{display:block}
#map-wrap{position:relative;height:calc(100vh - 152px);min-height:560px;overflow:hidden;background:#02050d;border-bottom:1px solid var(--line)}
#map{width:100%;height:100%;display:block;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
#map.dragging{cursor:grabbing}
.lod1,.lod2,.lod3{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.z1 .lod1,.z2 .lod2,.z3 .lod3,.all .lod1,.all .lod2,.all .lod3{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.lod0fade{transition:opacity .35s ease}
.z1 .lod0fade{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.z2 .hide2,.z3 .hide3{opacity:0;visibility:hidden}
.all .lod0fade,.all .hide2{opacity:0;visibility:hidden}
.light{mix-blend-mode:screen;pointer-events:none}
.strip{pointer-events:none}
.spin{animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
svg text{font-family:var(--mono)}
.t-zone{font-family:var(--sg);font-weight:600;fill:rgba(230,235,245,.9);letter-spacing:.08em;pointer-events:none;paint-order:stroke;stroke:#030712;stroke-width:4px;stroke-linejoin:round}
.silhouette{pointer-events:none}
.silhouette *{fill:rgba(148,163,184,.09)!important;stroke:rgba(203,213,225,.38)!important;filter:none!important}
.silhouette image{opacity:.95}
.all .silhouette{display:none}
.fz .rolecard,.fz .nametag,#rec-plan .rolecard,#rec-plan .nametag{display:none}
.stack .panel{margin-bottom:18px}
.t-zone-sm{font-family:var(--mono);font-weight:500;font-size:8px;letter-spacing:.06em;pointer-events:none}
.t-small{font-family:var(--mono);font-size:6.4px;letter-spacing:.08em}
.t-micro{font-family:var(--mono);font-size:3.4px;fill:#dbe3ee;letter-spacing:.04em}
.t-ocean{font-family:var(--mono);font-weight:500;font-size:13px;fill:rgba(230,235,245,.7);letter-spacing:.3em}
.t-badge{font-family:var(--sg);font-weight:600;font-size:6.6px;fill:#030712}
.t-name{font-family:var(--sg);font-weight:600;font-size:7px;fill:#f1f5f9}
.t-card-n{font-family:var(--sg);font-weight:600;font-size:6.2px;fill:#fff}
.t-card-r{font-family:var(--mono);font-size:4.3px;fill:#cbd5e1}
.t-card-z{font-family:var(--mono);font-weight:500;font-size:3.4px;letter-spacing:.06em}
.agent{cursor:pointer;outline:none}
.agent .sel-ring{opacity:0;transform-box:fill-box;transform-origin:center;animation:spin 6s linear infinite}
.agent .hover-ring{opacity:0;transition:opacity .15s}
.agent:hover .hover-ring,.agent:focus-visible .hover-ring{opacity:1}
.agent.sel .sel-ring{opacity:1}
.agent .rolecard{pointer-events:none}
.agent.sel .rolecard{opacity:1;visibility:visible}
.agent.sel .nametag{opacity:1;visibility:visible}
.z2 .agent.sel .nametag{opacity:0;visibility:hidden}
.agent.dim{opacity:.55}

.hud{position:absolute;background:var(--panel);border:1px solid var(--line2);border-radius:12px;backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.hud::before{content:'';position:absolute;inset:-1px;border-radius:12px;pointer-events:none;background:linear-gradient(135deg,rgba(34,211,238,.35),transparent 30%,transparent 70%,rgba(167,139,250,.35)) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;border:1px solid transparent}
.lod-panel{left:16px;top:16px;padding:12px 14px;width:250px}
.hud-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--cy);text-transform:uppercase;margin-bottom:8px}
#lod-steps{list-style:none;margin:0;padding:0;display:grid;gap:5px}
#lod-steps li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(148,163,184,.75);transition:.2s}
#lod-steps li::before{content:'';width:22px;height:5px;border-radius:3px;background:rgba(148,163,184,.2);transition:.2s}
#lod-steps li.on{color:#fff}
#lod-steps li.on::before{background:linear-gradient(90deg,var(--cy),var(--vi));box-shadow:0 0 10px rgba(34,211,238,.6)}
.hint{margin-top:10px;font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--mut)}
.zoom-ctl{right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;padding:8px}
.zoom-ctl button{all:unset;cursor:pointer;width:38px;height:38px;display:grid;place-items:center;border-radius:8px;font-size:20px;color:#fff;background:rgba(148,163,184,.08);border:1px solid var(--line)}
.zoom-ctl button:hover{border-color:var(--cy);background:rgba(34,211,238,.12)}
#z-val{font-family:var(--mono);font-size:10.5px;text-align:center;color:var(--cy)}
.minimap{left:16px;bottom:16px;width:236px;height:176px;padding:6px;overflow:hidden}
#mini{width:100%;height:100%;display:block;cursor:crosshair}
.roster{left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:4px;padding:6px;max-width:calc(100% - 560px)}
.roster button{all:unset;cursor:pointer;width:46px;height:46px;border-radius:9px;display:grid;place-items:center;position:relative;border:1px solid var(--line);background:rgba(3,7,18,.6);transition:.15s}
.roster button:hover,.roster button.on{border-color:var(--c);box-shadow:0 0 14px color-mix(in srgb,var(--c) 45%,transparent)}
.roster button .portrait{width:40px;height:40px}
.roster button i{position:absolute;right:2px;bottom:1px;font-style:normal;font-family:var(--mono);font-size:9px;color:var(--c)}
.roster button .tip{position:absolute;bottom:54px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11.5px;background:#0b1220;border:1px solid var(--line2);padding:4px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:.15s}
.roster button:hover .tip{opacity:1}
.unit-card{right:76px;top:16px;width:330px;padding:16px 16px 14px}
.unit-card[hidden]{display:none}
.uc-x{all:unset;cursor:pointer;position:absolute;right:10px;top:6px;font-size:20px;color:var(--mut)}
.uc-top{display:flex;gap:12px;align-items:center;margin-bottom:10px}
#uc-portrait .portrait{width:72px;height:72px;display:block;border-radius:12px;background:rgba(3,7,18,.8);border:1px solid var(--line2)}
.uc-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--cy)}
.unit-card h2{margin:3px 0 0;font-size:19px;line-height:1.2;font-weight:600;padding-right:14px}
.unit-card dl{margin:0;display:grid;grid-template-columns:54px 1fr;gap:6px 10px;font-size:13px}
.unit-card dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--mut);text-transform:uppercase;padding-top:2px}
.unit-card dd{margin:0;color:#e2e8f0;line-height:1.4}
.chip{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:6px}
.uc-actions{display:flex;gap:6px;margin-top:12px}
.uc-actions button{all:unset;cursor:pointer;flex:1;text-align:center;font-size:12px;padding:7px 4px;border-radius:7px;border:1px solid var(--line2);color:#e2e8f0}
.uc-actions button:hover{border-color:var(--cy);color:#fff}

/* ---------- páginas ---------- */
.page{padding:26px 28px 40px;max-width:1640px;margin:0 auto}
.sec-head{margin-bottom:18px}
.sec-head h2{margin:0;font-size:26px;font-weight:600}
.sec-head p{margin:6px 0 0;color:var(--mut);font-size:14px;max-width:980px;line-height:1.5}
.panel{margin:0 0 18px;background:linear-gradient(180deg,rgba(15,23,42,.6),rgba(3,7,18,.6));border:1px solid var(--line);border-radius:14px;overflow:hidden}
figure.panel figcaption{display:flex;align-items:baseline;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
figure.panel figcaption b{font-weight:600;font-size:14.5px}
figure.panel figcaption span{color:var(--mut);font-size:12.5px}
.art svg{display:block;width:100%;height:auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.two .panel{margin-bottom:0}
.sub{font-size:18px;font-weight:600;margin:26px 0 12px}
.pano{margin-bottom:22px}

.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-bottom:18px}
.pal{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:rgba(3,7,18,.6)}
.pal .sw{height:54px}
.pal div{padding:7px 9px;font-size:12px}
.pal code{display:block;font-family:var(--mono);font-size:10.5px;color:var(--mut);margin-top:2px}
.matboard{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mat{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(3,7,18,.65);display:flex;flex-direction:column}
.mat svg{display:block;width:100%;height:118px}
.mat .mb{padding:10px 12px 12px}
.mat .mc{font-family:var(--mono);font-size:10.5px;color:var(--cy);letter-spacing:.1em}
.mat h4{margin:3px 0 2px;font-size:15px;font-weight:600}
.mat .mk{font-family:var(--mono);font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
.mat p{margin:7px 0 0;font-size:12.5px;line-height:1.45;color:#cbd5e1}
.lighting{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lz{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px;background:rgba(3,7,18,.6)}
.lz .bulb{flex:0 0 46px;height:46px;border-radius:50%}
.lz h4{margin:0;font-size:14px;font-weight:600}
.lz .tmp{font-family:var(--mono);font-size:10.5px;color:var(--sun);margin-top:2px}
.lz p{margin:5px 0 0;font-size:12.5px;line-height:1.45;color:#cbd5e1}

.furn{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fz{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(3,7,18,.65)}
.fz svg{display:block;width:100%;height:230px;background:#02050d}
.fz .fb{padding:11px 14px 14px}
.fz h4{margin:0 0 6px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.fz ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.55;color:#cbd5e1}

.logo-spec{padding:18px 20px}
.logo-spec h3{margin:0 0 10px;font-size:16px}
.logo-spec ol{margin:0 0 14px;padding-left:20px;font-size:13px;line-height:1.55;color:#cbd5e1}
.logo-spec .lg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.logo-spec .lg div{border-radius:10px;height:96px;display:grid;place-items:center;border:1px solid var(--line)}
.logo-spec .lg img{height:34px}
.logo-spec .lg span{display:block;font-family:var(--mono);font-size:10px;color:var(--mut);text-align:center;margin-top:-18px}

.avatar-style{display:grid;grid-template-columns:330px 1fr;gap:20px;padding:18px 20px;align-items:center}
.avatar-style svg{width:100%;height:auto;display:block}
.avatar-style h3{margin:0 0 8px;font-size:17px}
.avatar-style p{margin:0 0 10px;color:#cbd5e1;font-size:13.5px;line-height:1.55}
.avatar-style ul{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:#cbd5e1}
.agents{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ag{border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(3,7,18,.65);position:relative;overflow:hidden}
.ag::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.ag .portrait{width:84px;height:84px;display:block;margin:0 auto 6px}
.ag .num{font-family:var(--mono);font-size:10.5px;color:var(--c);letter-spacing:.14em}
.ag h4{margin:2px 0 6px;font-size:15px;line-height:1.25;font-weight:600;min-height:38px}
.ag p{margin:0 0 8px;font-size:12.5px;line-height:1.45;color:#cbd5e1;min-height:54px}
.ag .meta{font-family:var(--mono);font-size:10.5px;color:var(--mut);line-height:1.6}
.ag svg.loc{width:100%;height:auto;display:block;margin-top:8px;border-radius:6px;background:#02050d}

.checklist{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cg{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:rgba(3,7,18,.65)}
.cg h3{margin:0 0 8px;font-size:15px;font-weight:600;color:var(--cy);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ci{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px solid rgba(148,163,184,.1);cursor:pointer}
.ci:first-of-type{border-top:0}
.ci .no{flex:0 0 34px;height:26px;border-radius:7px;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:500;border:1px solid rgba(34,211,238,.4);color:var(--cy)}
.ci .tx{font-size:13.5px;line-height:1.5;color:#e2e8f0;flex:1}
.ci input{margin-top:5px;accent-color:#22d3ee;width:16px;height:16px}
.ci.ok .no{background:rgba(34,211,238,.15)}
.ci.ok .tx{color:#94a3b8}
@media (max-width:1100px){.two,.checklist{grid-template-columns:1fr}.matboard,.furn{grid-template-columns:1fr 1fr}.agents{grid-template-columns:repeat(2,1fr)}.palette{grid-template-columns:repeat(4,1fr)}.lighting{grid-template-columns:1fr}.roster{display:none}.lod-panel .hint{display:none}.top p{display:none}}