/* Conectores de circuito: inspirados en las pistas y nodos del logo MarckBusiness. */

/* 1. Divisores entre secciones: la pista se dibuja al entrar y un pulso de luz la recorre */
.circuito { position: relative; width: min(1100px, 92vw); height: 60px; margin: 0 auto; pointer-events: none; }
.circuito svg { width: 100%; height: 100%; overflow: visible; }
.circuito path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.circuito .base { stroke: rgba(47,107,255,.18); stroke-width: 1.5; }
.circuito .traza {
  stroke: var(--logo-azul); stroke-width: 1.5; stroke-dasharray: 1400; stroke-dashoffset: 1400; opacity: .9;
}
.circuito .pulso {
  stroke: var(--logo-naranja); stroke-width: 2.4; stroke-dasharray: 60 1400; stroke-dashoffset: 0; opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255,138,31,.8));
}
.circuito .nodo { fill: #05070d; stroke: var(--logo-naranja); stroke-width: 1.5; opacity: 0; }
.circuito.visible .traza { animation: trazar 2.2s var(--ease) forwards; }
.circuito.visible .pulso { opacity: 1; animation: pulsar 4.5s linear 2.2s infinite; }
.circuito.visible .nodo { animation: aparecer .5s ease forwards; }
.circuito.visible .nodo:nth-of-type(2) { animation-delay: .6s; }
.circuito.visible .nodo:nth-of-type(3) { animation-delay: 1.1s; }
.circuito.visible .nodo:nth-of-type(4) { animation-delay: 1.6s; }
.circuito.visible .nodo:nth-of-type(5) { animation-delay: 2s; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes pulsar { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1460; } }
@keyframes aparecer { to { opacity: 1; } }

/* 2. Diagrama de empresa matriz: las ramas pulsan hacia cada sistema */
.matriz-ramas span::before {
  background: linear-gradient(180deg, rgba(255,138,31,.15), var(--logo-naranja), rgba(255,138,31,.15));
  background-size: 100% 200%;
  animation: pulso-rama 2.4s linear infinite;
}
.matriz-ramas span::after {
  content: ""; position: absolute; left: 50%; top: -26px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--logo-naranja); box-shadow: 0 0 12px var(--logo-naranja);
}
.matriz-ramas span:hover { border-color: rgba(47,107,255,.6); box-shadow: 0 0 24px -6px rgba(47,107,255,.6); }
.matriz-ramas span:hover::after { background: var(--logo-azul); box-shadow: 0 0 14px var(--logo-azul); }
@keyframes pulso-rama { from { background-position: 0 100%; } to { background-position: 0 0; } }

/* 3. Fondo del inicio: red de pistas que se desplaza y sigue suavemente al cursor */
.hero::after {
  content: ""; position: absolute; inset: -40px; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='none' stroke='%232f6bff' stroke-opacity='.45' stroke-width='1'%3E%3Cpath d='M0 60H120l20-20h60'/%3E%3Cpath d='M180 320V200l30-30h110'/%3E%3Cpath d='M320 120H220l-20 20H120'/%3E%3Cpath d='M40 320V260l25-25h55'/%3E%3C/g%3E%3Cg fill='%23ff8a1f'%3E%3Ccircle cx='120' cy='60' r='3.5'/%3E%3Ccircle cx='220' cy='180' r='3.5'/%3E%3Ccircle cx='220' cy='120' r='3'/%3E%3Ccircle cx='120' cy='280' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px; opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%);
          mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%);
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform .8s var(--ease);
  animation: deriva 60s linear infinite;
}
@keyframes deriva { to { background-position: 320px 320px; } }
.hero > .contenedor { position: relative; z-index: 2; }

/* 4. Tarjetas de sistemas: la pista se ilumina bajo el logo al pasar el cursor */
.sistema-logo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--logo-naranja), var(--logo-azul), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease);
}
.sistema:hover .sistema-logo::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .circuito .traza, .circuito .nodo { opacity: 1; stroke-dashoffset: 0; animation: none !important; }
  .circuito .pulso, .hero::after, .matriz-ramas span::before { animation: none !important; }
}