/*
  Escena de la red de MotoRed (D124, D249): sierra, torres, radioenlaces, casas
  con fibra y antena, y los pulsos de luz lentos. La usan la portada del sitio
  y la pantalla de entrada al panel. Con «reducir movimiento», los pulsos se apagan.
*/
/* ---------- Escena de la red en la portada (D124): línea fina, sin degradados ni manchas ---------- */
.escena { display: block; }
.escena--completa { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; }
.escena--celular { display: none; }
/* D321: en celular y tableta, la misma escena completa recortada (escena--celular), a todo lo ancho debajo del
   texto. Su alto sigue al ancho hasta un tope; en la tableta el dibujo queda a la derecha y el haz y la sierra
   llenan la izquierda, como en la computadora. */
@media (max-width: 48rem) {
  .escena--completa { display: none; }
  .escena--celular {
    display: block; max-width: none;
    width: calc(100% + 2 * var(--hueco-inicio, 1rem)); height: clamp(12rem, 61vw, 19rem);
    margin: 1.75rem calc(-1 * var(--hueco-inicio, 1rem)) 0;
  }
}
.escena path, .escena rect { vector-effect: non-scaling-stroke; }
.escena__sierra { stroke: none; }
.escena__sierra.escena__sierra--lejos { fill: #0a1c2e; }
.escena__sierra.escena__sierra--media { fill: #0b2033; }
.escena__sierra.escena__sierra--cerca { fill: #0c2439; }
.escena__cresta { fill: none; stroke-width: 1; stroke-linejoin: round; }
.escena__cresta.escena__sierra--lejos { stroke: rgba(45, 185, 233, .16); }
.escena__cresta.escena__sierra--media { stroke: rgba(45, 185, 233, .22); }
.escena__cresta.escena__sierra--cerca { stroke: rgba(159, 211, 236, .28); }
/* D131: torres y casas en segundo plano, más tenues que las fibras */
.torre__montante { fill: none; stroke: #9fd3ec; stroke-opacity: .6; stroke-width: 1; stroke-linecap: round; }
.torre__celosia { fill: none; stroke: #9fd3ec; stroke-width: .6; stroke-opacity: .38; }
.torre__tirante { fill: none; stroke: #9fd3ec; stroke-width: .6; stroke-opacity: .3; }
.torre__antenas rect { fill: #081a2b; stroke: #9fd3ec; stroke-opacity: .6; stroke-width: .8; }
.escena__enlace { fill: none; stroke: #2db9e9; stroke-width: 1; stroke-opacity: .6; stroke-dasharray: 2 5; }
.escena__enlace-luz { fill: none; stroke: #cff4ff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 3 97; stroke-dashoffset: 100; opacity: 0; animation: enlace 9s ease-in-out infinite; }
.escena__enlace-luz--2 { animation-duration: 11s; animation-delay: 3.5s; }
@keyframes enlace {
  0% { stroke-dashoffset: 100; opacity: 0; }
  5% { opacity: 1; }
  45% { opacity: 1; }
  50% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.escena__fibra { fill: none; stroke-width: .9; stroke-linecap: round; }
.escena__fibra--0 { stroke: #2db9e9; stroke-opacity: .65; }
.escena__fibra--1 { stroke: #219ad6; stroke-opacity: .55; }
.escena__fibra--2 { stroke: #cff4ff; stroke-opacity: .4; }
.escena__acometida { fill: none; stroke: #2db9e9; stroke-width: 1; stroke-opacity: .7; stroke-linecap: round; }
/* El haz de fibra: delgado, luminoso y con un brillo suave alrededor (D131) */
.escena__haz path { fill: none; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(45, 185, 233, .9)); }
.escena__halo { fill-opacity: .28; }
/* D137: cajita de acometida en la pared de la casa y en la base de las torres */
.escena__caja { fill: #0b2235; stroke: #9fdcf5; stroke-width: 1; }
.escena__haz .escena__resplandor { stroke-width: 7; stroke-opacity: .16; filter: none; }
.escena__punta { fill: #eafaff; filter: drop-shadow(0 0 3px #2db9e9); }
.escena__pulso { fill: none; stroke: #ffffff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 4px #2db9e9) drop-shadow(0 0 8px rgba(45, 185, 233, .6)); animation: acometida 10s ease-in infinite; }
.escena__pulso--libre1 { animation-duration: 9s; animation-delay: 1.8s; }
.escena__pulso--libre2 { animation-duration: 11s; animation-delay: 5.5s; }
@keyframes acometida {
  0% { stroke-dashoffset: 100; opacity: 0; }
  4% { opacity: 1; }
  32% { opacity: 1; }
  36% { stroke-dashoffset: -6; opacity: 0; }
  100% { stroke-dashoffset: -6; opacity: 0; }
}
.escena__senal { fill: none; stroke: #2db9e9; stroke-width: 1.3; stroke-linecap: round; stroke-opacity: .14; animation: senal 10s ease-in-out infinite; }
@keyframes senal {
  0%, 100% { stroke-opacity: .14; }
  9% { stroke-opacity: .85; }
  20% { stroke-opacity: .14; }
}
.casa__muro { fill: #0b2033; stroke: rgba(159, 211, 236, .45); stroke-width: 1; }
.casa__techo { fill: #0d2740; stroke: rgba(159, 211, 236, .5); stroke-width: 1; stroke-linejoin: round; }
.casa__puerta { fill: #071624; stroke: rgba(159, 211, 236, .4); stroke-width: .8; }
.casa__linea { stroke: rgba(159, 211, 236, .3); stroke-width: .8; }
.casa__antena { fill: none; stroke: #9fd3ec; stroke-opacity: .7; stroke-width: 1; stroke-linecap: round; }
.casa__ventanas rect { fill: #cff4ff; fill-opacity: .1; stroke: rgba(207, 244, 255, .6); stroke-width: .7; animation: ventana 10s ease-in-out infinite; }
@keyframes ventana {
  0%, 34% { fill-opacity: .1; }
  42%, 58% { fill-opacity: .8; }
  74%, 100% { fill-opacity: .1; }
}
/* Cada casa a destiempo: el pulso o la señal y sus ventanas comparten duración y retraso */
.escena__pulso--c1, .casa__ventanas--c1 rect, .escena__senal--c1 { animation-duration: 10s; animation-delay: 0s; }
.escena__pulso--c2, .casa__ventanas--c2 rect, .escena__senal--c2 { animation-duration: 11s; animation-delay: 3.2s; }
.escena__pulso--c3, .casa__ventanas--c3 rect, .escena__senal--c3 { animation-duration: 11.5s; animation-delay: 1.4s; }
.escena__pulso--c4, .casa__ventanas--c4 rect, .escena__senal--c4 { animation-duration: 12s; animation-delay: 5.1s; }
.escena__pulso--c5, .casa__ventanas--c5 rect, .escena__senal--c5 { animation-duration: 10.5s; animation-delay: 2.3s; }
.escena__pulso--c6, .casa__ventanas--c6 rect, .escena__senal--c6 { animation-duration: 12.5s; animation-delay: 6.4s; }
.escena__pulso--c7, .casa__ventanas--c7 rect, .escena__senal--c7 { animation-duration: 13s; animation-delay: 4.2s; }
/* Los arcos de señal se iluminan uno tras otro, de la torre a la casa (casas con antena: c3 en celular, c5 y c7) */
.escena__senal--c3.escena__senal--2 { animation-delay: 2.1s; } .escena__senal--c3.escena__senal--3 { animation-delay: 2.8s; }
.escena__senal--c5.escena__senal--2 { animation-delay: 3s; } .escena__senal--c5.escena__senal--3 { animation-delay: 3.7s; }
.escena__senal--c7.escena__senal--2 { animation-delay: 4.9s; } .escena__senal--c7.escena__senal--3 { animation-delay: 5.6s; }

/* D254: panorama de la pantalla de entrada (mismo trazo que la portada). */
.escena--panorama { display: block; width: 100%; height: 100%; }
.escena__nodo { fill: #cff4ff; opacity: .35; animation: nodo 3.2s ease-in-out infinite; }
.escena__nodo--b { animation-delay: 1.6s; }
.escena__nodo--2 { animation-duration: 3.8s; } .escena__nodo--3 { animation-duration: 3.5s; animation-delay: .8s; } .escena__nodo--4 { animation-duration: 4.1s; }
@keyframes nodo { 0%, 100% { opacity: .3; } 50% { opacity: .95; } }

/* D321: en la portada del sitio nada parpadea: las ventanas quedan encendidas y los arcos de señal fijos.
   Solo viajan, lentos, los pulsos por la fibra y por los radioenlaces. */
.portada .escena__senal, .portada .casa__ventanas rect { animation: none; }
.portada .escena__senal { stroke-opacity: .45; }
.portada .casa__ventanas rect { fill-opacity: .35; }

@media (prefers-reduced-motion: reduce) {
  .escena__nodo { animation: none; opacity: .6; }
  .escena__pulso, .escena__enlace-luz { display: none; animation: none; }
  .escena__senal, .casa__ventanas rect { animation: none; }
  .casa__ventanas rect { fill-opacity: .35; }
}