/* ========================================= 1. CONTENEDOR MAESTRO (Bootstrap col-6) ========================================= */ .orbital-wrapper { width: 100%; aspect-ratio: 1 / 1; max-width: 450px; /* Tamaño optimizado para laptop */ position: relative; display: flex; justify-content: center; align-items: center; margin: 0 auto; } .background-network { position: absolute; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* ========================================= 2. LAS 9 ÓRBITAS RESTAURADAS ========================================= */ .orbit-line { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1.5px solid #00bfff; border-radius: 50%; opacity: 0.25; } .line-1 { width: 15%; height: 15%; } .line-2 { width: 28%; height: 28%; border-style: dashed; } .line-3 { width: 40%; height: 40%; border-style: dotted; } .line-4 { width: 52%; height: 52%; } .line-5 { width: 65%; height: 65%; border-style: dashed; } .line-6 { width: 75%; height: 75%; opacity: 0.15; } .line-12 { width: 80%; height: 80%; border-style: dashed; opacity: 0.2; } /* Rayitas */ /* Línea 7: Trayectoria principal de las imágenes */ .line-7 { width: 85%; height: 85%; border-width: 2.5px; opacity: 0.45; } .line-8 { width: 92%; height: 92%; border-style: dotted; opacity: 0.4; } .line-9 { width: 98%; height: 98%; opacity: 0.35; } .line-10 { width: 100%; height: 100%; border-style: dashed; opacity: 0.2; } /* Rayitas */ .line-11 { width: 99%; height: 99%; border-width: 0.8px; opacity: 0.15; } /* Delgada sólida */ /* ========================================= 3. PUNTOS DE RED (24 PUNTOS) ========================================= */ .dot { position: absolute; width: 1.8%; height: 1.8%; min-width: 5px; min-height: 5px; background: #00bfff; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 191, 255, 0.7); transform: translate(-50%, -50%); z-index: 2; } .dot-1 { top: 40%; left: 50%; } .dot-2 { top: 45%; left: 60%; } .dot-3 { top: 50%; left: 65%; } .dot-4 { top: 55%; left: 60%; } .dot-5 { top: 60%; left: 50%; } .dot-6 { top: 55%; left: 40%; } .dot-7 { top: 50%; left: 35%; } .dot-8 { top: 45%; left: 40%; } .dot-9 { top: 25%; left: 50%; } .dot-10 { top: 35%; left: 75%; } .dot-11 { top: 50%; left: 85%; } .dot-12 { top: 65%; left: 75%; } .dot-13 { top: 75%; left: 50%; } .dot-14 { top: 65%; left: 25%; } .dot-15 { top: 50%; left: 15%; } .dot-16 { top: 35%; left: 25%; } .dot-17 { top: 5%; left: 50%; } .dot-18 { top: 15%; left: 85%; } .dot-19 { top: 50%; left: 95%; } .dot-20 { top: 85%; left: 85%; } .dot-21 { top: 95%; left: 50%; } .dot-22 { top: 85%; left: 15%; } .dot-23 { top: 50%; left: 5%; } .dot-24 { top: 15%; left: 15%; } /* ========================================= 4. NODOS DE IMÁGENES (MÁS GRANDES) ========================================= */ .node { position: absolute; width: 18%; height: 18%; min-width: 65px; max-width: 95px; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; /* Shadow Border solicitado */ box-shadow: 0 0 10px 1px rgba(0, 191, 255, 1); /* box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.8), 0 6px 15px rgba(0, 191, 255, 0.3); z-index: 10; */ top: 50%; left: 50%; /* Mitad del ancho para centrado perfecto */ margin-top: -9%; margin-left: -9%; animation: ruta-maestra 36s linear infinite; } /* Rutas de tus imágenes */ .img-0 { background-image: url('../images/2026/personas/0.png'); animation-delay: 0s; } .img-1 { background-image: url('../images/2026/personas/1.png'); animation-delay: -4s; } .img-2 { background-image: url('../images/2026/personas/2.png'); animation-delay: -8s; } .img-3 { background-image: url('../images/2026/personas/3.png'); animation-delay: -12s; } .img-4 { background-image: url('../images/2026/personas/4.png'); animation-delay: -16s; } .img-5 { background-image: url('../images/2026/personas/5.png'); animation-delay: -20s; } .img-6 { background-image: url('../images/2026/personas/6.png'); animation-delay: -24s; } .img-7 { background-image: url('../images/2026/personas/7.png'); animation-delay: -28s; } .img-8 { background-image: url('../images/2026/personas/8.png'); animation-delay: -32s; } /* ========================================= 5. COREOGRAFÍA MAESTRA (GRANDE AL CENTRO) ========================================= */ @keyframes ruta-maestra { /* CENTRO: Imponente */ 0%, 11.1% { transform: rotate(0deg) translate(0) rotate(0deg) scale(2.4); z-index: 35; box-shadow: 0 0 50px rgba(0, 191, 255, 0.5); } 11.11% { transform: rotate(0deg) translate(0) rotate(0deg) scale(2.4); z-index: 5; } /* ÓRBITA: Alineada con Línea 7 */ 22.2% { transform: rotate(60deg) translate(235%) rotate(-60deg) scale(1.1); z-index: 15; } 22.21%, 88.8% { z-index: 1; } 55.5% { transform: rotate(180deg) translate(235%) rotate(-180deg) scale(0.85); } 88.8% { transform: rotate(300deg) translate(235%) rotate(-300deg) scale(1.1); } 88.81% { z-index: 35; } 100% { transform: rotate(360deg) translate(0) rotate(-360deg) scale(2.4); z-index: 35; } } /* ========================================= 6. RESPONSIVO MÓVIL ========================================= */ @media (max-width: 768px) { .orbital-wrapper { width: 85vw; } @keyframes ruta-maestra { 0%, 11.1% { transform: rotate(0deg) translate(0) rotate(0deg) scale(2.6); } 22.2% { transform: rotate(60deg) translate(230%) rotate(-60deg) scale(1); } 55.5% { transform: rotate(180deg) translate(230%) rotate(-180deg) scale(0.8); } 88.8% { transform: rotate(300deg) translate(230%) rotate(-300deg) scale(1); } 100% { transform: rotate(360deg) translate(0) rotate(-360deg) scale(2.6); } } }