/* =====================================================================
   HITO SIGNAL — la red
   Torres de alta tensión que se tienden al hacer scroll, rayos, la red de
   fuentes conectadas. Va con js/grid.js.
   ===================================================================== */
:root{--con:#F2C14E;--zap:#6EF0A2}

/* ---------- rayos (comunes) ---------- */
.zap path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.zap .z-halo{stroke:var(--zap);stroke-width:9;opacity:.14}
.zap .z-glow{stroke:var(--zap);stroke-width:3.4;opacity:.55}
.zap .z-core{stroke:#fff;stroke-width:1.3}
.zap .z-br{stroke-width:.9;opacity:.85}
.zap.amber{--zap:var(--con)}
.zap.ink{--zap:var(--live)}
.zap.ink .z-core{stroke:#E9FFF2}
#zl{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:70;overflow:visible}

/* ---------- línea de alta tensión (banda) ---------- */
.hv{position:relative;height:210px;overflow:hidden;--hv-st:#93A99D;--hv-c:#7E968A;--hv-ins:#A9BBAF;--hv-live:var(--live);--zap:var(--live)}
.hv[data-tone="light"]{background:linear-gradient(var(--plot),var(--plot))}
.hv[data-tone="dark"]{--hv-st:#2C5A46;--hv-c:#3C705A;--hv-ins:#4B7F68;--hv-live:var(--glow);--zap:var(--glow)}
.hv-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hv-ground{stroke:var(--hv-st);stroke-width:1;opacity:.6;stroke-dasharray:2 6}
.hv-st{fill:none;stroke:var(--hv-st);stroke-width:1.15;stroke-linejoin:round}
.hv-st.thin{stroke-width:.7;opacity:.8}
.hv-ins{stroke:var(--hv-ins);stroke-width:2.2;stroke-linecap:round;transition:stroke .6s,filter .6s}
.hv-c{fill:none;stroke:var(--hv-c);stroke-width:1.1;transition:stroke 1.2s var(--ease),stroke-width 1.2s}
.hv-c.earth{stroke-width:.7;opacity:.7}
.hv-p,.hv-pg{fill:none;stroke:var(--hv-live);stroke-linecap:round;opacity:0;stroke-dasharray:16 1000}
.hv-p{stroke-width:2.2}
.hv-pg{stroke-width:7;stroke-dasharray:22 994}
.hv-led{fill:var(--hv-st);transition:fill .4s}
.hv.live .hv-c{stroke:var(--hv-live);stroke-width:1.25}
.hv.live .hv-c.earth{stroke:var(--hv-c)}
.hv.live .hv-ins{stroke:var(--hv-live)}
.hv.live .hv-led{fill:var(--open);animation:hvled 2.6s steps(1) infinite}
.hv.live .hv-p{opacity:1;animation:hvflow var(--d,3.2s) linear infinite;animation-delay:var(--dl,0s)}
.hv.live .hv-pg{opacity:.22;animation:hvflow var(--d,3.2s) linear infinite;animation-delay:var(--dl,0s)}
.hv.paused .hv-p,.hv.paused .hv-pg,.hv.paused .hv-led{animation-play-state:paused}
@keyframes hvflow{from{stroke-dashoffset:0}to{stroke-dashoffset:-1016}}
@keyframes hvled{0%,70%{opacity:1}71%,100%{opacity:.15}}
.hv::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(40% 90% at var(--fx,50%) 0%,rgba(110,240,162,.28),transparent 70%)}
.hv[data-tone="light"]::after{background:radial-gradient(40% 90% at var(--fx,50%) 0%,rgba(15,157,88,.16),transparent 70%)}
.hv.flash::after{animation:hvflash .5s ease-out}
@keyframes hvflash{0%{opacity:0}12%{opacity:1}30%{opacity:.3}45%{opacity:.85}100%{opacity:0}}
.hv-tag{position:absolute;right:32px;bottom:14px;font:500 11.5px var(--code);letter-spacing:.06em;text-transform:uppercase;color:var(--hv-st);display:flex;gap:8px;align-items:center;opacity:0;transition:opacity .8s}
.hv-tag i{width:6px;height:6px;border-radius:50%;background:var(--hv-live);box-shadow:0 0 8px var(--hv-live)}
.hv.live .hv-tag{opacity:1}
.hv[data-tone="dark"] .hv-tag{color:var(--muted-d)}


/* ---------- separador pequeño (entre todas las secciones) ---------- */
.hv.sm{height:84px}
.hv[data-tone="light"]{background:var(--plot)}
.hv[data-tone="dark"]{background:var(--night)}
.hv.sm .hv-tag{display:none}
.hv.sm .hv-st.thin{opacity:.55}
.hv.sm .hv-ground{opacity:.35}
.hv.sm + section{padding-top:clamp(64px,7vw,96px)}
.hv.sm + .faq-s{padding-top:40px}
.hv.sm + .story{padding-top:72px}

/* =====================================================================
   FUENTES: esquema unifilar (fondo claro)
   ===================================================================== */
:root{--con-ink:#B8790A}
.sources{background:var(--plot)}
.src-head{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:end}
.src-head h2.display{font-size:clamp(32px,3.6vw,54px);max-width:16ch}
.src-head .lede{margin:0}
.src-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:40px;padding-bottom:24px;border-bottom:1.5px solid var(--ink)}
.src-stats{display:flex;gap:44px}
.src-stats div{display:flex;flex-direction:column-reverse;gap:8px}
.src-stats dd{font-size:52px;font-weight:750;font-stretch:125%;line-height:.9;color:var(--ink);letter-spacing:-.03em}
.src-stats dt{font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px;font-weight:550}
.src-stats i{width:9px;height:9px;border-radius:50%;flex:none}
.i-live{background:var(--live);box-shadow:0 0 10px rgba(15,157,88,.6)}
.i-con{background:var(--con);box-shadow:0 0 10px rgba(242,193,78,.9)}
.i-plan{border:1.5px solid var(--ink-3)}
.src-filter{display:flex;gap:8px;flex-wrap:wrap}
.src-filter button{font:600 14px var(--f);font-stretch:105%;color:var(--ink-2);background:var(--sheet);border:1.5px solid var(--rule-2);border-radius:999px;padding:8px 15px;cursor:pointer;transition:all .25s var(--ease)}
.src-filter button:hover{border-color:var(--ink-2);color:var(--ink)}
.src-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#F2F8F4}

/* la barra general: el motor */
.sld{position:relative;margin-top:40px}
.sld .wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.bus{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:20px;height:46px;padding:0 18px;border-radius:8px;background:var(--night);color:#F2F8F4;overflow:hidden;box-shadow:0 18px 40px -24px rgba(11,36,26,.7)}
.bus::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(90deg,var(--glow) 0 26px,rgba(110,240,162,.15) 26px 52px);animation:busflow 1.4s linear infinite}
@keyframes busflow{to{background-position:52px 0}}
.bus b{font-size:15px;font-weight:750;font-stretch:125%;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.bus b i{width:8px;height:8px;border-radius:50%;background:var(--glow);box-shadow:0 0 12px var(--glow);animation:conblink 1.8s steps(1) infinite}
.bus span{font:500 12px var(--code);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-d)}
.bus span em{font-style:normal;color:var(--glow)}

.feeders{position:relative;z-index:1;padding-left:34px}
.grp-t{font:500 12px var(--code);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:34px 0 0}
.fd-row{list-style:none;display:grid;gap:30px 12px;margin-top:22px}
.fd-row.nat{grid-template-columns:repeat(6,minmax(0,1fr))}
.fd-row.reg{grid-template-columns:repeat(6,minmax(0,1fr))}
.fd{position:relative;padding-top:42px;transition:opacity .35s}
/* interruptor de cada línea */
.brk{position:absolute;left:50%;top:0;width:26px;height:42px;margin-left:-13px;overflow:visible}
.brk line,.brk circle{stroke:var(--ink-3);stroke-width:1.6;fill:var(--plot);stroke-linecap:round}
.brk .blade{transform-origin:13px 30px;transition:transform .6s var(--ease)}
.fd[data-s="plan"] .blade,.fd[data-s="next"] .blade{transform:rotate(-38deg)}
.fd[data-s="live"] .brk line,.fd[data-s="live"] .brk circle{stroke:var(--live)}
.fd[data-s="live"] .brk circle{fill:var(--live)}
.fd[data-s="con"] .brk line,.fd[data-s="con"] .brk circle{stroke:var(--con-ink)}
.fd[data-s="con"] .blade{animation:bladetry 2.4s var(--ease) infinite}
@keyframes bladetry{0%,100%{transform:rotate(-38deg)}45%,60%{transform:rotate(-4deg)}}
.fd-c{position:relative;height:100%;border-radius:10px;background:var(--sheet);border:1px solid var(--rule);padding:12px 14px;transition:border-color .3s,box-shadow .3s,transform .35s var(--ease)}
.fd-c .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fd-c code{font:600 11.5px var(--code);color:var(--ink-2);letter-spacing:.02em}
.fd-c b{display:block;margin-top:6px;font-size:15px;font-weight:650;font-stretch:106%;line-height:1.25;color:var(--ink)}
.fd-c p{margin-top:6px;font-size:13px;line-height:1.4;color:var(--ink-3)}
.fd-row.reg .fd-c{padding:10px 12px}
.fd-row.reg .fd-c b{margin-top:4px;font-size:14.5px}
.fd .st{font-size:11px;font-weight:650;font-stretch:110%;padding:2px 8px;border-radius:999px;border:1px solid var(--rule-2);color:var(--ink-3);white-space:nowrap;justify-self:auto}
.fd[data-s="live"] .st{background:var(--live);border-color:var(--live);color:#fff}
.fd[data-s="con"] .st{border-color:var(--con-ink);color:var(--con-ink);animation:conblink 1.6s steps(1) infinite}
.fd[data-s="next"] .st{border-color:var(--live);color:var(--live-2)}
@keyframes conblink{0%,60%{opacity:1}61%,100%{opacity:.45}}
.fd[data-s="live"] .fd-c{border-color:rgba(15,157,88,.55);box-shadow:0 0 0 3px rgba(15,157,88,.08),0 18px 36px -26px rgba(11,122,68,.6)}
.fd[data-s="con"] .fd-c{border-color:rgba(184,121,10,.5)}
.fd[data-s="plan"] .fd-c b{color:var(--ink-2);font-weight:600}
.fd.hot .fd-c{border-color:var(--ink);transform:translateY(-2px)}

/* cableado del esquema */
.w{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .35s,stroke .3s}
.w-frame{stroke:var(--rule-2);stroke-width:1.4}
.w-stub{stroke:var(--rule-2);stroke-width:1.2}
.w-live{stroke:var(--live);stroke-width:2}
.w-flow{stroke:var(--glow);stroke-width:2.4;stroke-dasharray:10 18;animation:wflow .9s linear infinite}
@keyframes wflow{to{stroke-dashoffset:-28}}
.w-con{stroke:var(--con-ink);stroke-width:1.6;stroke-dasharray:5 6;animation:wflow 1.4s linear infinite}
.w.hot{stroke:var(--ink);stroke-width:2.4}
.ssp{fill:#fff;stroke:var(--live);stroke-width:1.6}
.ssg{fill:var(--live);opacity:.22}
.zap.ink .z-core{stroke:#fff}
.zap.amber-ink{--zap:var(--con-ink)}
.sld[data-f="live"] .fd:not([data-s="live"]),.sld[data-f="con"] .fd:not([data-s="con"]),.sld[data-f="plan"] .fd:not([data-s="plan"]):not([data-s="next"]){opacity:.25}
.sld[data-f="con"] .w-live,.sld[data-f="con"] .w-flow,.sld[data-f="con"] .sp,.sld[data-f="plan"] .w-live,.sld[data-f="plan"] .w-flow,.sld[data-f="plan"] .sp,.sld[data-f="plan"] .w-con,.sld[data-f="live"] .w-con{opacity:.12}
.src-note{margin-top:30px;font-size:14px;color:var(--ink-2);display:flex;gap:10px;align-items:center}
.src-note i{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live);animation:conblink 2s steps(1) infinite}

/* =====================================================================
   PLATAFORMA: conjuntos de señales como pestañas sobre el diagrama
   ===================================================================== */
@media (min-width:1081px){
  .platform .pl-grid{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:52px}
  .platform .pl-side{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:20px}
  .platform .pl-side .vh{font-size:18px}
  .platform .vhint{margin:0 0 3px}
  .platform .sets{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;border:0;margin-top:16px}
  .platform .sets li{border:1px solid var(--line-d);border-radius:12px;background:#0D2C20;overflow:hidden;transition:border-color .3s,background .3s,transform .35s var(--ease)}
  .platform .sets li::before{left:0;right:0;top:auto;bottom:0;width:auto;height:3px;transform:scaleX(0);transform-origin:left}
  .platform .sets li[aria-selected="true"]{border-color:rgba(110,240,162,.6);background:#10372A;transform:translateY(-3px)}
  .platform .sets li[aria-selected="true"]::before{transform:scaleX(1)}
  .platform .srow{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 16px 18px}
  .platform .srow h4{font-size:16px}
  .platform .smore{display:none}
  .platform .pl-side .vnote{grid-column:1/-1;margin-top:12px}
  .platform .vdetail{margin-top:10px;text-align:center}
  .platform .vdetail .m{display:inline}
  .platform .pl-grid .engine-fig{margin-top:0}
}

@media (max-width:1080px){
  .src-head{grid-template-columns:1fr;gap:20px}
  .fd-row.nat,.fd-row.reg{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .hv{height:150px}
  .hv.sm{height:64px}
  .hv-tag{right:16px}
  .src-stats{gap:28px}
  .src-stats dd{font-size:40px}
  .feeders{padding-left:22px}
  .fd-row.nat,.fd-row.reg{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 10px}
  .fd-c p{display:none}
  .bus span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .w-flow,.w-con,.bus::before,.bus b i,.fd[data-s="con"] .st,.fd[data-s="con"] .blade,.src-note i{animation:none!important}
  .hv.live .hv-p,.hv.live .hv-pg{animation:none;opacity:0}
  .hv.live .hv-led{animation:none}
}