/* ============================================================
   CIBERPRO — fx-v20.css · Fondo unificado (cpro-*)
   Cargar DESPUÉS de app-v18.css y v19-system.css.
   Sustituye visualmente los 4 sistemas de fondo antiguos.
   Inyección: app-v20.js (.cpro-fx por sección).
   ============================================================ */

/* Neutraliza capas de fondo legacy por si quedaran inyectadas
   (no las crea app-v20.js; esto es solo una red de seguridad
   ante caché del app-v18.js antiguo). NO afecta a .hero-particles. */
.tech-field,.tech-stars,.motion-orb,.motion-beam:not(.b-a):not(.b-b):not(.b-c),
.hud-field,.hud-ring,.v14-field{display:none!important}

/* Atenúa el halo de color del legacy en secciones claras
   (el diseño aprobado las quiere sin halo de color). */
.section-light:after{opacity:.10!important}

/* ---- Contenedor de fondo por sección ---- */
.cpro-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}

/* ---- Focos (solo secciones oscuras / hero) ---- */
.cpro-beam{position:absolute;pointer-events:none;filter:blur(22px);mix-blend-mode:screen}
.cpro-beam.b-a{top:-6%;left:10%;width:210px;height:92%;transform-origin:top center;border-radius:110px 110px 0 0;background:linear-gradient(to bottom,rgba(87,201,255,.55),rgba(87,201,255,.20) 40%,rgba(87,201,255,.05) 70%,transparent);animation:cproSwingTop 7s ease-in-out infinite}
.cpro-beam.b-b{right:-4%;top:15%;width:90%;height:200px;transform-origin:right center;border-radius:0 110px 110px 0;background:linear-gradient(to left,rgba(207,87,255,.50),rgba(207,87,255,.18) 40%,transparent 74%);animation:cproSwingRight 9s ease-in-out infinite}
.cpro-beam.b-c{bottom:-8%;left:43%;width:60px;height:122%;transform-origin:bottom center;border-radius:0 0 60px 60px;background:linear-gradient(to top,rgba(255,138,34,.48),rgba(255,138,34,.14) 46%,transparent 84%);animation:cproSwingBottom 11s ease-in-out infinite}
@keyframes cproSwingTop{0%,100%{transform:rotate(-24deg);opacity:.40}50%{transform:rotate(22deg);opacity:.80}}
@keyframes cproSwingRight{0%,100%{transform:rotate(20deg);opacity:.30}50%{transform:rotate(-18deg);opacity:.72}}
@keyframes cproSwingBottom{0%,100%{transform:rotate(-18deg);opacity:.28}50%{transform:rotate(18deg);opacity:.60}}

/* ---- Abanico cónico (solo hero) ---- */
.cpro-fan{position:absolute;left:-90%;bottom:-70%;width:280%;height:280%;pointer-events:none;filter:blur(6px);opacity:.55;animation:cproFan 26s linear infinite;
  background:conic-gradient(from 0deg at 50% 82%,transparent 0deg 72deg,rgba(87,201,255,.38) 73deg 76deg,rgba(87,201,255,.10) 76deg 82deg,transparent 82deg 158deg,rgba(207,87,255,.30) 159deg 162deg,rgba(207,87,255,.08) 162deg 168deg,transparent 168deg 246deg,rgba(255,138,34,.28) 247deg 250deg,rgba(255,138,34,.08) 250deg 256deg,transparent 256deg 360deg)}
@keyframes cproFan{to{transform:rotate(360deg)}}

/* ---- PCB (trazos de circuito SVG) ---- */
.cpro-pcb{position:absolute;inset:0;width:100%;height:100%}
.cpro-pcb path{fill:none;vector-effect:non-scaling-stroke}
.cpro-pcb-base path{stroke:rgba(87,201,255,.15);stroke-width:1.2}
.cpro-pcb-flow path{stroke-width:1.5;opacity:.28;stroke-dasharray:46 2200;stroke-dashoffset:2246;filter:drop-shadow(0 0 3px currentColor);animation:cproPcb 20s linear infinite}
.cpro-pcb-flow path:nth-child(1){color:#57c9ff;stroke:#57c9ff}
.cpro-pcb-flow path:nth-child(2){color:#cf57ff;stroke:#cf57ff;animation-duration:24s;animation-delay:-4s}
.cpro-pcb-flow path:nth-child(3){color:#ff8a22;stroke:#ff8a22;animation-duration:27s;animation-delay:-9s}
.cpro-pcb-flow path:nth-child(4){color:#57c9ff;stroke:#57c9ff;animation-duration:22s;animation-delay:-13s}
.cpro-pcb-flow path:nth-child(5){color:#cf57ff;stroke:#cf57ff;animation-duration:29s;animation-delay:-2s}
@keyframes cproPcb{from{stroke-dashoffset:2246}to{stroke-dashoffset:0}}
/* En claro, PCB un poco más tenue y en azul corporativo */
.is-light .cpro-pcb-base path{stroke:rgba(13,90,160,.16)}
.is-light .cpro-pcb-flow path{opacity:.20}

/* ---- Circuitos (estilo v14: líneas a sangre completa + cometa) ---- */
.cpro-circuit{position:absolute;overflow:hidden;opacity:.5;pointer-events:none}
.cpro-circuit.cc-c{--col:#57c9ff;--colr:87,201,255}
.cpro-circuit.cc-m{--col:#cf57ff;--colr:207,87,255}
.cpro-circuit.cc-o{--col:#ff8a22;--colr:255,138,34}
.cpro-circuit.cc-h{left:-10%;width:120%;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--colr),.14),transparent)}
.cpro-circuit.cc-v{top:-10%;height:120%;width:1px;background:linear-gradient(180deg,transparent,rgba(var(--colr),.14),transparent)}
.cpro-circuit:before{content:"";position:absolute;border-radius:50%;background:var(--col);box-shadow:0 0 12px rgba(var(--colr),1),0 0 24px rgba(var(--colr),.6)}
.cpro-circuit.cc-h:before{top:50%;width:var(--len,160px);height:2px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,var(--col),transparent);animation:cproCircuitH var(--cd,7s) linear infinite}
.cpro-circuit.cc-v:before{left:50%;height:var(--len,140px);width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,var(--col),transparent);animation:cproCircuitV var(--cd,7s) linear infinite}
@keyframes cproCircuitH{0%{left:-30%;opacity:0}12%{opacity:.9}88%{opacity:.9}100%{left:110%;opacity:0}}
@keyframes cproCircuitV{0%{top:-30%;opacity:0}12%{opacity:.9}88%{opacity:.9}100%{top:110%;opacity:0}}
/* En claro, líneas algo más marcadas sobre fondo #f4f8fc */
.is-light .cpro-circuit.cc-h{background:linear-gradient(90deg,transparent,rgba(var(--colr),.30),transparent)}
.is-light .cpro-circuit.cc-v{background:linear-gradient(180deg,transparent,rgba(var(--colr),.30),transparent)}

/* ---- Constelación (canvas, solo secciones claras) ---- */
.cpro-net{position:absolute;inset:0;width:100%;height:100%}

/* ---- Accesibilidad: sin animación si el usuario lo pide ---- */
@media (prefers-reduced-motion: reduce){
  .cpro-beam,.cpro-fan,.cpro-pcb-flow path,.cpro-circuit:before{animation:none!important}
}