/*
  Animación decorativa "circuito eléctrico" del hero: trazas tipo esquemático PCB con
  pulsos de corriente recorriéndolas. Puramente CSS (stroke-dashoffset), sin JS ni canvas.
  Respeta prefers-reduced-motion vía la regla global de base.css.
*/
.hero-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.circuit-trace {
  fill: none;
  stroke: var(--color-blue-500);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.32;
}

.circuit-node {
  fill: var(--color-blue-500);
  opacity: 0.45;
}

.circuit-pulse {
  fill: none;
  stroke: var(--color-amber-500);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22 340;
  filter: drop-shadow(0 0 4px rgba(218, 168, 21, 0.85));
  animation: circuit-flow linear infinite;
}

.circuit-pulse.p1 { animation-duration: 4.5s; animation-delay: 0s; }
.circuit-pulse.p2 { animation-duration: 5.5s; animation-delay: -1.4s; }
.circuit-pulse.p3 { animation-duration: 3.8s; animation-delay: -2.6s; }
.circuit-pulse.p4 { animation-duration: 6.2s; animation-delay: -0.6s; }

@keyframes circuit-flow {
  to { stroke-dashoffset: -1200; }
}

.circuit-bolt {
  fill: none;
  stroke: var(--color-amber-500);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  animation: bolt-glow 3.2s ease-in-out infinite;
}

@keyframes bolt-glow {
  0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 2px rgba(218, 168, 21, 0.4)); }
  50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(218, 168, 21, 0.75)); }
}

@media (max-width: 768px) {
  .hero-circuit { opacity: 0.7; }
}

/* Logo animado de la sección "Empresa" — integrado en una tarjeta clara,
   coherente con el resto de la sección (no una caja oscura aislada). */
.about-logo-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-white) 0%, var(--color-blue-100) 150%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-2xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}
.about-logo-card .mini-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
}
.about-logo-card img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  border-radius: 0;
  box-shadow: none;
  animation: logo-bolt-glow 3.2s ease-in-out infinite;
}
.about-logo-caption {
  position: relative;
  z-index: 1;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

@keyframes logo-bolt-glow {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(218, 168, 21, 0.1)); }
  50% { filter: drop-shadow(0 0 14px rgba(218, 168, 21, 0.45)); }
}