/* ============================================================
   OLC · Objetos interactivos de servicio + Banner
   Extiende signal.css (Signal Intelligence ADN). Autocontenido.
   6 micro-UI (una por servicio) + 1 banner premium.
   Vanilla, sin librerías. Respeta prefers-reduced-motion.
   ============================================================ */

/* ---------- Tarjeta de servicio con objeto interactivo ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc{position:relative;display:flex;flex-direction:column;text-decoration:none;
  background:linear-gradient(180deg,#0B1524,#080F1C);border:1px solid var(--sig-line,rgba(16,172,222,.16));
  border-radius:12px;overflow:hidden;transition:border-color .28s,transform .28s,box-shadow .28s}
.svc:hover{border-color:rgba(16,172,222,.42);transform:translateY(-4px);
  box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 0 1px rgba(16,172,222,.08)}
.svc-obj{position:relative;height:150px;border-bottom:1px solid var(--sig-line,rgba(16,172,222,.14));
  background:
    radial-gradient(90% 80% at 60% 20%,rgba(16,172,222,.07),transparent 60%),
    linear-gradient(180deg,#0A1626,#070E1B);overflow:hidden}
.svc-obj svg{width:100%;height:100%;display:block}
.svc-obj::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(16,172,222,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(16,172,222,.05) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 100% at 60% 20%,#000 40%,transparent 90%);mask-image:radial-gradient(120% 100% at 60% 20%,#000 40%,transparent 90%)}
.svc-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.svc-ic{font-family:var(--mono,monospace);font-size:11px;letter-spacing:1.4px;color:var(--sig-cyan,#10ACDE);margin-bottom:8px}
.svc h3{font-size:16px;color:#fff;margin:0 0 7px;font-weight:600;line-height:1.3}
.svc p{font-size:13.5px;color:#AFC0D9;line-height:1.55;margin:0;flex:1}
.svc .more{margin-top:14px;font-family:var(--mono,monospace);font-size:11.5px;letter-spacing:.5px;color:var(--sig-cyan,#10ACDE);
  display:inline-flex;align-items:center;gap:6px;transition:gap .2s,color .2s}
.svc:hover .more{gap:11px;color:#fff}

/* Elementos comunes de los objetos */
.so-node{fill:#12233A;stroke:rgba(16,172,222,.35);stroke-width:1.1;transition:fill .3s,stroke .3s}
.so-line{stroke:rgba(16,172,222,.28);stroke-width:1.1;fill:none;transition:stroke .3s,stroke-dashoffset .6s}
.so-cyan{stroke:var(--sig-cyan,#10ACDE)}.so-fillcyan{fill:var(--sig-cyan,#10ACDE)}
.so-lime{stroke:var(--sig-lime,#ABE200)}.so-filllime{fill:var(--sig-lime,#ABE200)}
.so-scan{stroke:var(--sig-cyan,#10ACDE);stroke-width:1.6;opacity:.6;filter:drop-shadow(0 0 4px var(--sig-cyan,#10ACDE));
  transition:transform .1s linear}
.so-sig{fill:var(--sig-lime,#ABE200);opacity:0;transform-box:fill-box;transform-origin:center}
.so-txt{fill:#7E94B3;font-family:var(--mono,monospace);font-size:8px;letter-spacing:1px}
.so-txt.lime{fill:var(--sig-lime,#ABE200)}.so-txt.cyan{fill:var(--sig-cyan,#10ACDE)}
.so-bar{fill:rgba(16,172,222,.25);transition:height .5s,y .5s,fill .3s}
.so-bar.op{fill:rgba(171,226,0,.5)}

/* Estado hover: activa la firma en cada objeto */
.svc:hover .so-scan{animation:so-sweep 2.2s ease-in-out infinite}
.svc:hover .so-sig{animation:so-ping 1.8s ease-out infinite}
.svc:hover .so-line.draw{animation:so-draw 1.2s ease forwards}
.svc:hover .so-node.act{fill:rgba(16,172,222,.14);stroke:var(--sig-cyan,#10ACDE)}
.svc:hover .so-node.actl{fill:rgba(171,226,0,.16);stroke:var(--sig-lime,#ABE200)}
.svc:hover .so-pulse{animation:so-pulse 1.6s ease-in-out infinite}

@keyframes so-sweep{0%{transform:translateX(0)}100%{transform:translateX(200px)}}
@keyframes so-ping{0%{opacity:1}70%{opacity:.4}100%{opacity:0}}
@keyframes so-draw{to{stroke-dashoffset:0}}
@keyframes so-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ---------- Banner tecnológico premium ---------- */
.techbanner{position:relative;border-radius:16px;overflow:hidden;margin:0;
  background:radial-gradient(120% 130% at 50% 0%,#0C1B30,#070D18 70%);
  border:1px solid var(--sig-line,rgba(16,172,222,.16))}
.techbanner .tb-grid{position:absolute;inset:0;opacity:.6;pointer-events:none;
  background-image:linear-gradient(rgba(16,172,222,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(16,172,222,.06) 1px,transparent 1px);
  background-size:40px 40px;-webkit-mask-image:radial-gradient(100% 120% at 50% 0%,#000 40%,transparent 85%);mask-image:radial-gradient(100% 120% at 50% 0%,#000 40%,transparent 85%)}
.techbanner .tb-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:44px 48px}
.techbanner h2{font-size:26px;color:#fff;line-height:1.2;margin:0 0 12px;letter-spacing:-.4px}
.techbanner h2 em{font-style:normal;color:var(--sig-lime,#ABE200)}
.techbanner p{font-size:15px;color:#AFC0D9;margin:0 0 22px;max-width:440px}
.techbanner .tb-clouds{display:flex;gap:10px;flex-wrap:wrap}
.techbanner .tb-chip{font-family:var(--mono,monospace);font-size:11px;letter-spacing:1px;color:#AFC0D9;
  border:1px solid var(--sig-line,rgba(16,172,222,.2));border-radius:20px;padding:6px 14px;background:rgba(16,172,222,.04)}
.techbanner .tb-viz{position:relative;height:200px}
.techbanner .tb-viz svg{width:100%;height:100%}

@media (prefers-reduced-motion:reduce){
  .svc:hover .so-scan,.svc:hover .so-sig,.svc:hover .so-line.draw,.svc:hover .so-pulse,.so-sig{animation:none!important}
  .svc:hover .so-line.draw{stroke-dashoffset:0!important}
  .so-sig{opacity:1!important}
}

@media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}.techbanner .tb-inner{grid-template-columns:1fr;gap:24px;padding:32px 28px}.techbanner .tb-viz{height:150px}}
@media(max-width:600px){.svc-grid{grid-template-columns:1fr}}