/* ============================================================
   PortalDeLicitaciones — SCROLLY+ (extra tab only)
   1) IA section as a sticky scrollytelling scene (dark)
   2) Organism network map that draws on scroll
   Degrades safely: base state visible if JS never runs.
   ============================================================ */

/* ===== IA STICKY (dark) ===== */
.ssx-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:60px; align-items:start; margin-top:46px; }
.ssx-steps{ display:flex; flex-direction:column; }
.ssx-step{ min-height:74vh; display:flex; flex-direction:column; justify-content:center; transition:opacity .5s ease; }
.ssx-steps.ss-ready .ssx-step{ opacity:.28; }
.ssx-steps.ss-ready .ssx-step.active{ opacity:1; }
.ssx-num{ font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.1em; color:#3ad6c5; }
.ssx-step h3{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.2vw,38px); letter-spacing:-0.01em; color:#fff; margin-top:14px; }
.ssx-step p{ color:#aebfdb; font-size:16.5px; margin-top:14px; max-width:430px; line-height:1.6; }

.ssx-stickycol{ position:sticky; top:90px; align-self:start; }
.ssx-stage{ background:#0b1726; border:1px solid #20344f; border-radius:18px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.7); }
.ssx-head{ display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid #20344f; }
.ssx-head .doc{ width:32px; height:32px; border-radius:8px; background:rgba(37,99,235,.18); color:#6ea0ff; display:grid; place-items:center; flex:none; }
.ssx-head .ti{ font-size:13.5px; font-weight:600; color:#fff; }
.ssx-head .su{ font-family:var(--mono); font-size:11px; color:#8497b6; margin-top:2px; }
.ssx-head .live{ margin-left:auto; font-family:var(--mono); font-size:11px; color:#3ad6c5; display:flex; align-items:center; gap:6px; }
.ssx-head .live i{ width:7px; height:7px; border-radius:50%; background:#3ad6c5; animation:pulse 2.2s infinite; }

.ssx-body{ position:relative; min-height:330px; padding:24px; }
.ssx-panel{ position:absolute; inset:24px; opacity:0; transform:translateY(16px) scale(.99); filter:blur(7px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s, filter .6s; pointer-events:none; }
.ssx-panel.active{ opacity:1; transform:none; filter:none; pointer-events:auto; }

/* panel: lectura (scan) */
.ssx-doc{ border:1px solid #20344f; border-radius:12px; padding:20px; position:relative; overflow:hidden; }
.ssx-doc .dl{ height:9px; border-radius:5px; background:#22384f; margin-bottom:11px; }
.ssx-doc .dl.w95{width:95%}.ssx-doc .dl.w80{width:80%}.ssx-doc .dl.w88{width:88%}.ssx-doc .dl.w65{width:65%}.ssx-doc .dl.w72{width:72%}
.ssx-scan{ position:absolute; left:0; right:0; height:54px; top:-54px; background:linear-gradient(180deg, rgba(45,212,191,0), rgba(45,212,191,.16), rgba(45,212,191,0)); border-top:1px solid rgba(45,212,191,.4); border-bottom:1px solid rgba(45,212,191,.4); }
.ssx-panel.active .ssx-scan{ animation:scanmove 2.6s ease-in-out infinite; }
@keyframes scanmove{ 0%{ top:-54px } 100%{ top:100% } }
.ssx-chip{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-family:var(--mono); font-size:11px; color:#3ad6c5; background:rgba(45,212,191,.12); border:1px solid rgba(45,212,191,.3); border-radius:100px; padding:5px 12px; }

/* panel: score */
.ssx-scorewrap{ display:grid; place-items:center; height:100%; }
.ssx-ring{ position:relative; width:200px; height:200px; }
.ssx-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ssx-ring .mid{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.ssx-ring .n{ font-family:var(--display); font-weight:600; font-size:64px; color:#fff; line-height:1; letter-spacing:-0.03em; }
.ssx-ring .l{ font-family:var(--mono); font-size:11px; color:#8aa0c2; text-transform:uppercase; letter-spacing:.1em; margin-top:4px; }
.ssx-pill{ margin-top:18px; text-align:center; font-size:12px; font-weight:600; color:#3ddc84; background:rgba(22,163,74,.16); border-radius:100px; padding:5px 14px; display:inline-block; }

/* panel: requisitos */
.ssx-reqs{ display:grid; gap:2px; }
.ssx-req{ display:grid; grid-template-columns:22px 1fr auto; gap:11px; align-items:center; padding:12px 0; border-bottom:1px solid #16263d; font-size:13.5px; }
.ssx-req:last-child{ border-bottom:0; }
.ssx-req .ic{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; }
.ssx-req .ic.ok{ background:rgba(52,211,153,.18); color:#3ddc84; }
.ssx-req .ic.warn{ background:rgba(244,183,64,.18); color:#f3b13e; }
.ssx-req .ic.no{ background:rgba(251,122,99,.18); color:#fb8a5c; }
.ssx-req .rt{ color:#d4deee; }
.ssx-req .rs{ font-family:var(--mono); font-size:10.5px; }
.ssx-req .rs.ok{ color:#3ddc84 } .ssx-req .rs.warn{ color:#f3b13e } .ssx-req .rs.no{ color:#fb8a5c }

/* panel: acciones */
.ssx-acts{ display:grid; gap:11px; }
.ssx-act{ display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid #20344f; border-radius:12px; color:#d4deee; font-size:14px; }
.ssx-act .ai{ width:30px; height:30px; border-radius:8px; background:rgba(37,99,235,.18); color:#6ea0ff; display:grid; place-items:center; flex:none; }
.ssx-act .meta{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:#7e93b4; }

.ssx-dotnav{ display:flex; gap:8px; justify-content:center; margin-top:18px; }
.ssx-dotnav span{ width:7px; height:7px; border-radius:50%; background:#2a3f5e; transition:all .3s; }
.ssx-dotnav span.on{ background:#3ad6c5; width:22px; border-radius:100px; }

/* ===== ORGANISM NETWORK MAP ===== */
.scene-map{ background:#0a1626; color:#e7eefb; padding:108px 0; position:relative; overflow:hidden; }
.scene-map .sec-head h2{ color:#fff; }
.scene-map .sec-head p{ color:#aebfdb; }
.orgmap{ position:relative; height:520px; margin-top:50px; border:1px solid #1c2f49; border-radius:22px; overflow:hidden;
  background:
    radial-gradient(680px 360px at 50% 36%, rgba(20,184,166,.10), transparent 70%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px), #0a1626;
  background-size:auto, 46px 46px, 46px 46px, auto;
}
.orgmap svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.oml{ fill:none; stroke:url(#omg); stroke-width:1.6; stroke-linecap:round; }
.omn{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  opacity:1; scale:1; transition:opacity .5s ease, scale .5s cubic-bezier(.2,1.4,.4,1); }
.anim .orgmap .omn{ opacity:0; scale:.6; }
.anim .orgmap.in .omn{ opacity:1; scale:1; }
.omn .pin{ width:13px; height:13px; border-radius:50%; background:#14B8A6; box-shadow:0 0 0 4px rgba(20,184,166,.16), 0 0 16px 2px rgba(20,184,166,.5); }
.omn .code{ font-family:var(--mono); font-size:11px; color:#fff; font-weight:600; }
.omn .reg{ font-family:var(--mono); font-size:9.5px; color:#7e93b4; }
.omn.b .pin{ background:#4A86FF; box-shadow:0 0 0 4px rgba(74,134,255,.16), 0 0 16px 2px rgba(74,134,255,.5); }
.omhub{ position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:6px; z-index:2; }
.omhub .core{ width:60px; height:60px; border-radius:16px; background:linear-gradient(140deg,#4A86FF,#14B8A6); display:grid; place-items:center; box-shadow:0 0 30px -4px rgba(20,184,166,.7); position:relative; }
.omhub .core::before{ content:""; width:22px; height:22px; border:3px solid #fff; border-radius:50%; }
.omhub .core::after{ content:""; position:absolute; inset:-8px; border:1px solid rgba(20,184,166,.4); border-radius:20px; animation:hubpulse 2.6s infinite; }
@keyframes hubpulse{ 0%{ transform:scale(.9); opacity:.7 } 100%{ transform:scale(1.4); opacity:0 } }
.omhub .lbl{ font-family:var(--display); font-weight:600; font-size:15px; color:#fff; }
.omflow{ position:absolute; width:7px; height:7px; border-radius:50%; background:#3ad6c5; box-shadow:0 0 10px 2px rgba(45,212,191,.7); opacity:0; }
.orgmap.in .omflow{ opacity:1; }
.orgmap-foot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:22px; font-family:var(--mono); font-size:12px; color:#7e93b4; }
.orgmap-foot b{ color:#3ad6c5; }

@media (max-width:1024px){
  .ssx-grid{ grid-template-columns:1fr; gap:28px; }
  .ssx-stickycol{ position:relative; top:0; }
  .ssx-step{ min-height:auto; opacity:1; padding:16px 0; }
  .orgmap{ height:600px; }
}
@media (prefers-reduced-motion: reduce){
  .ssx-panel{ position:relative; inset:auto; opacity:1; transform:none; filter:none; margin-bottom:12px; }
  .ssx-step{ opacity:1; }
  .omn{ opacity:1; scale:1; }
  .ssx-panel.active .ssx-scan{ animation:none; }
}