/* ── v11.3 — Conexión animated section + hero diagonal wipe ── */

/* ── Connection section shell (kept for potential reuse; unused by default) */
.connect-section {
  position: relative; overflow: hidden;
  padding: clamp(4rem,8vw,7rem) 0;
  background: linear-gradient(155deg, var(--navy-800) 0%, #0b2040 100%);
}
.connect-section__bg {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(85,187,235,.1), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(1,117,201,.12), transparent 50%);
}
.connect-section__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: .95fr 1.15fr; gap: clamp(2rem,5vw,4rem); align-items: center;
}
@media(max-width: 880px) { .connect-section__grid { grid-template-columns: 1fr; } }

.connect-legend { display: flex; flex-direction: column; gap: .6rem; margin-top: 2rem; }
.connect-legend__item { display: flex; align-items: center; gap: .6rem; font-family: var(--f-d); font-size: .8rem; color: rgba(255,255,255,.5); }
.connect-legend .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); flex-shrink: 0; }
.connect-legend .dot--hub { background: var(--p1); box-shadow: 0 0 8px var(--p1); }

.connect-section__viz { position: relative; }
.connect-svg { width: 100%; height: auto; aspect-ratio: 100/72; overflow: visible; }

.connect-edge {
  stroke: rgba(85,187,235,.35); stroke-width: .35; fill: none;
}
.connect-node {
  fill: #0d2c4a; stroke: var(--p1); stroke-width: .6;
}
.connect-node--hub {
  fill: var(--p1); stroke: #fff; stroke-width: .5;
}
.connect-hub-glow { animation: hubBreathe 3.4s ease-in-out infinite; }
@keyframes hubBreathe { 0%,100%{ opacity:.55; transform:scale(1);} 50%{ opacity:.9; transform:scale(1.12);} }

.connect-node-pulse {
  fill: none; stroke: var(--p1); stroke-width: .5; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: nodePulse 2.6s ease-out infinite;
}
.connect-node-g:nth-child(2n) .connect-node-pulse { animation-delay: .6s; }
.connect-node-g:nth-child(3n) .connect-node-pulse { animation-delay: 1.2s; }
@keyframes nodePulse {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .connect-hub-glow, .connect-node-pulse { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   Hero carousel — diagonal wipe transition (luxe upgrade)
   ══════════════════════════════════════════════════════════ */
.c-slide {
  clip-path: polygon(-15% 0%, -5% 0%, -20% 100%, -30% 100%);
}
.c-slide.is-active {
  animation: cDiagWipe 1.15s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cDiagWipe {
  0%   { clip-path: polygon(-15% 0%, -5% 0%, -20% 100%, -30% 100%); }
  100% { clip-path: polygon(-15% 0%, 140% 0%, 140% 100%, -15% 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .c-slide.is-active { animation: none !important; clip-path: none !important; }
  .c-slide { clip-path: none !important; }
}

/* ══════════════════════════════════════════════════════════
   Network backdrop — ambient decoration for existing blocks
   ══════════════════════════════════════════════════════════ */
.net-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; opacity: .5; pointer-events: none;
}
.net-backdrop__edge { stroke: rgba(85,187,235,.28); stroke-width: .3; fill: none; }
.net-backdrop__node { fill: rgba(85,187,235,.55); }
.net-backdrop__node--hub { fill: var(--c1); filter: drop-shadow(0 0 4px rgba(255,193,7,.6)); }
.stats-bar { isolation: isolate; }