/* ==========================================================================
   PATTERNS — motivos técnicos: grillas CAD, líneas de tubería, blueprint
   ========================================================================== */

.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}
.bg-grid--light {
  background-image:
    linear-gradient(rgba(6,9,13,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,9,13,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

.bg-blueprint {
  position: relative;
  background: radial-gradient(ellipse 120% 90% at 15% 0%, rgba(20,101,196,0.28), transparent 60%),
              var(--bg-dark);
}
.bg-blueprint::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0.2));
  pointer-events: none;
}

.pipe-lines {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1;
}
.pipe-lines svg { position: absolute; width: 140%; max-width: none; opacity: 0.35; }
.pipe-lines .pl-1 { top: 6%; left: -10%; animation: pipeDrift 46s linear infinite; }
.pipe-lines .pl-2 { bottom: -4%; right: -12%; animation: pipeDrift 60s linear infinite reverse; opacity: .22; }

@keyframes pipeDrift {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-2%) translateY(1%); }
  100% { transform: translateX(0) translateY(0); }
}

.node-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.node-particles span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--c-blue-400); opacity: 0.5;
  box-shadow: 0 0 8px 1px rgba(63,155,255,.6);
  animation: nodeFloat 9s ease-in-out infinite;
}
@keyframes nodeFloat {
  0%, 100% { transform: translateY(0); opacity: .25; }
  50% { transform: translateY(-14px); opacity: .7; }
}

.corner-frame { position: relative; }
.corner-frame::before, .corner-frame::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 2px solid rgba(63,155,255,.55);
}
.corner-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.corner-frame::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.tech-tag {
  position: absolute;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--c-blue-300);
  background: rgba(6,9,13,0.55);
  border: 1px solid rgba(63,155,255,.3);
  padding: 6px 10px; border-radius: 6px;
  backdrop-filter: blur(6px);
  display: flex; align-items: center; gap: 6px;
}
.tech-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-blue-400); box-shadow: 0 0 6px 1px rgba(63,155,255,.7); }

.diagonal-divider {
  position: absolute; left: 0; right: 0; height: 60px; pointer-events: none;
}
.diagonal-divider--top { top: -1px; }
.diagonal-divider--bottom { bottom: -1px; transform: scaleY(-1); }