/* ══════════════════════════════════════
   Redes.css — Redes & Infraestructura
══════════════════════════════════════ */

/* ── HERO ── */
.redes-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(13,202,240,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 70%, rgba(66,133,244,0.06) 0%, transparent 50%);
}

.redes-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 52px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 120px 48px 80px;
}

.redes-hero-copy { flex: 1.2; }

.redes-hero-h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.12;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.redes-accent {
  color: #0dcaf0;
  text-shadow: 0 0 32px rgba(13,202,240,0.45);
}

.redes-hero-p {
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  color: rgba(245,245,245,0.65);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 500px;
}

.redes-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.redes-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.redes-hero-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: rgba(245,245,245,0.5);
}
.redes-hero-tags span i { color: #0dcaf0; }

.redes-hero-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── SECCIÓN TOPOLOGÍA ── */
.redes-topo-section {
  padding: 100px 32px;
  position: relative;
}

.redes-topo-section::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(13,202,240,0.2), transparent);
}

.redes-topo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.redes-topo-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: #f5f5f5;
  letter-spacing: 1px;
  line-height: 1.2;
  margin-bottom: 18px;
}

.redes-topo-desc {
  font-size: 0.92rem;
  color: rgba(245,245,245,0.6);
  line-height: 1.75;
  margin-bottom: 28px;
}

.redes-topo-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.redes-feat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.redes-feat > i {
  font-size: 1.3rem;
  color: #0dcaf0;
  flex-shrink: 0;
  margin-top: 1px;
  filter: drop-shadow(0 0 6px rgba(13,202,240,0.5));
}
.redes-feat strong { display: block; font-size: 0.88rem; color: #f5f5f5; margin-bottom: 2px; }
.redes-feat p { font-size: 0.8rem; color: rgba(245,245,245,0.52); margin: 0; line-height: 1.5; }

/* ── DIAGRAMA SVG ── */
.redes-topo-diagram {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.redes-svg {
  width: 100%;
  max-width: 380px;
  filter: drop-shadow(0 0 24px rgba(13,202,240,0.1));
}

/* nodos */
.rn-node { stroke-width: 1.5; }
.rn-internet { fill: rgba(66,133,244,0.15); stroke: rgba(66,133,244,0.7); animation: rnPulse 2s ease-in-out infinite; }
.rn-router   { fill: rgba(13,202,240,0.1);  stroke: rgba(13,202,240,0.6);  }
.rn-firewall { fill: rgba(139,92,246,0.12); stroke: rgba(139,92,246,0.65); }
.rn-switch   { fill: rgba(13,202,240,0.08); stroke: rgba(13,202,240,0.5);  }
.rn-ap       { fill: rgba(34,197,94,0.12);  stroke: rgba(34,197,94,0.65);  animation: rnPulse 1.8s ease-in-out infinite 0.3s; }
.rn-server   { fill: rgba(249,115,22,0.1);  stroke: rgba(249,115,22,0.6);  }
.rn-client   { fill: rgba(251,188,4,0.1);   stroke: rgba(251,188,4,0.6);   animation: rnPulse 2.2s ease-in-out infinite 0.6s; }

@keyframes rnPulse {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1; }
}

/* líneas */
.rn-line { stroke: rgba(13,202,240,0.25); stroke-width: 1.5; stroke-dasharray: 4 3; animation: rnLineDash 1.5s linear infinite; animation-delay: var(--rd, 0s); }
.rn-line--main { stroke: rgba(13,202,240,0.4); stroke-dasharray: none; }

@keyframes rnLineDash { to { stroke-dashoffset: -14; } }

/* labels */
.rn-label { font-family: 'Orbitron', monospace; font-size: 9px; fill: rgba(245,245,245,0.8); text-anchor: middle; dominant-baseline: middle; }
.rn-label--center { text-anchor: middle; }

/* pulso que baja por la red */
.rn-pulse {
  fill: #0dcaf0;
  filter: blur(1px) drop-shadow(0 0 4px rgba(13,202,240,0.9));
}
.rn-hidden-path { display: none; }

/* badges flotantes */
.rn-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Orbitron', monospace;
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  padding: 5px 12px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  white-space: nowrap;
}
.rn-badge--1 { top: 52%; left: 2%;  background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.35); color: #8b5cf6; }
.rn-badge--2 { bottom: 28%; left: 0%; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.3); color: #22c55e; }
.rn-badge--3 { bottom: 20%; right: 2%; background: rgba(249,115,22,0.08); border: 1px solid rgba(249,115,22,0.3); color: #f97316; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .redes-hero-inner  { flex-direction: column; padding: 120px 24px 60px; }
  .redes-hero-right  { width: 100%; }
  .redes-topo-inner  { grid-template-columns: 1fr; }
  .redes-topo-diagram { max-width: 320px; margin: 0 auto; }
}

/* ── LIGHT THEME ── */
[data-theme="light"] .redes-hero-h1  { color: #081b3b; }
[data-theme="light"] .redes-hero-p   { color: rgba(8,27,59,0.65); }
[data-theme="light"] .redes-hero-tags span { color: rgba(8,27,59,0.55); }
[data-theme="light"] .redes-topo-title { color: #081b3b; }
[data-theme="light"] .redes-topo-desc  { color: rgba(8,27,59,0.62); }
[data-theme="light"] .redes-feat strong { color: #081b3b; }
[data-theme="light"] .redes-feat p      { color: rgba(8,27,59,0.55); }