/* ==========================================================================
   NEXUS SYSTEMS DOMINICANA - SISTEMA DE DISEÑO & ANIMACIONES DE ÚLTIMA GENERACIÓN
   Paleta extraída fielmente del isotipo y logotipo oficial:
   - Azul noche profundo: #0A1229
   - Azul zafiro:          #1E346D
   - Azul escudo base:     #4E90D2
   - Azul cielo de luz:    #72B6F4
   - Blanco puro:          #FFFFFF
   - Verde de seguridad:   #25D366
   ========================================================================== */

:root {
  --color-fondo-noche: #0A1229;
  --color-fondo-zafiro: #1E346D;
  --color-azul-escudo: #4E90D2;
  --color-azul-luz: #72B6F4;
  --color-blanco: #FFFFFF;
  --color-esmeralda: #25D366;
  --color-card-bg: rgba(14, 26, 58, 0.65);
  --color-card-border: rgba(114, 182, 244, 0.22);
}

/* ==========================================================================
   FONDO BASE Y CAPAS AMBIENTALES
   ========================================================================== */
body.bg-nexus-theme {
  background-color: var(--color-fondo-noche);
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(30, 52, 109, 0.55) 0%, rgba(10, 18, 41, 0.98) 75%),
    radial-gradient(circle at 90% 40%, rgba(78, 144, 210, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 10% 70%, rgba(30, 52, 109, 0.22) 0%, transparent 60%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Patrón reticular tecnológico sutil */
.tech-grid-dots {
  background-image: 
    radial-gradient(rgba(114, 182, 244, 0.12) 1.2px, transparent 1.2px),
    linear-gradient(to right, rgba(30, 52, 109, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 52, 109, 0.05) 1px, transparent 1px);
  background-size: 32px 32px, 64px 64px, 64px 64px;
}

/* Orbes ambientales de luz fluida en movimiento */
.ambient-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(130px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
  will-change: transform;
}

.ambient-orb-1 {
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, #1E346D 0%, transparent 70%);
  top: -150px;
  left: 15%;
  animation: orbDrift1 20s ease-in-out infinite alternate;
}

.ambient-orb-2 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, #4E90D2 0%, transparent 70%);
  top: 45%;
  right: -120px;
  animation: orbDrift2 24s ease-in-out infinite alternate;
}

.ambient-orb-3 {
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, #153b80 0%, transparent 70%);
  bottom: -150px;
  left: -80px;
  animation: orbDrift3 22s ease-in-out infinite alternate;
}

@keyframes orbDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(60px, 80px) scale(1.12); }
  100% { transform: translate(-40px, 40px) scale(0.95); }
}

@keyframes orbDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-70px, -60px) scale(1.18); }
  100% { transform: translate(-30px, 50px) scale(0.92); }
}

@keyframes orbDrift3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(80px, -70px) scale(1.1); }
  100% { transform: translate(40px, 30px) scale(1.05); }
}

/* ==========================================================================
   BARRA DE PROGRESO DE LECTURA SUPERIOR
   ========================================================================== */
#scroll-progress-bar {
  box-shadow: 0 0 12px rgba(114, 182, 244, 0.8), 0 0 20px rgba(37, 211, 102, 0.5);
}

/* ==========================================================================
   NAVBAR DINÁMICO & SCROLLSPY
   ========================================================================== */
.glass-nav {
  background: rgba(10, 18, 41, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(114, 182, 244, 0.15);
  transition: all 0.35s ease;
}

.glass-nav.nav-scrolled {
  background: rgba(8, 14, 32, 0.94);
  border-bottom: 1px solid rgba(114, 182, 244, 0.35);
  box-shadow: 0 10px 30px -5px rgba(5, 9, 20, 0.8), 0 0 20px rgba(114, 182, 244, 0.1);
}

.nav-active-link {
  color: #72B6F4 !important;
  position: relative;
}

.nav-active-link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #4E90D2, #72B6F4);
  border-radius: 2px;
  box-shadow: 0 0 8px #72B6F4;
}

/* ==========================================================================
   TARJETAS GLASSMORPHISM CON SPOTLIGHT INTERACTIVO
   ========================================================================== */
.glass-card {
  position: relative;
  background: var(--color-card-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 12px 30px -10px rgba(10, 18, 41, 0.65);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.35s ease, 
              border-color 0.35s ease;
  overflow: hidden;
}

/* Spotlight radial que sigue las coordenadas del puntero */
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    380px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), 
    rgba(114, 182, 244, 0.18), 
    transparent 65%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.glass-card:hover::before {
  opacity: 1;
}

.glass-card:hover {
  border-color: rgba(114, 182, 244, 0.55);
  box-shadow: 0 20px 40px -10px rgba(30, 52, 109, 0.55), 
              0 0 25px rgba(114, 182, 244, 0.18);
  transform: translateY(-5px);
}

/* Micro-animación en íconos dentro de las tarjetas */
.glass-card:hover .service-icon-box {
  transform: scale(1.12) rotate(4deg);
  border-color: #72B6F4;
  box-shadow: 0 0 20px rgba(114, 182, 244, 0.45);
}

.service-icon-box {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), 
              border-color 0.35s ease, 
              box-shadow 0.35s ease;
}

/* ==========================================================================
   EXHIBICIÓN 3D DEL LOGO OFICIAL CON BORDE NEÓN ROTATIVO Y HOLOGRAMA
   ========================================================================== */
.logo-3d-wrapper {
  perspective: 1200px;
}

.logo-3d-card {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Borde neón animado con gradiente fluido */
.neon-rotating-border {
  position: relative;
  border-radius: 1.75rem;
  padding: 3px;
  background: linear-gradient(135deg, #1E346D, #4E90D2, #72B6F4, #25D366, #4E90D2, #1E346D);
  background-size: 300% 300%;
  animation: neonBorderFlow 9s linear infinite;
  box-shadow: 0 0 35px rgba(78, 144, 210, 0.45), 
              0 0 70px rgba(114, 182, 244, 0.22);
}

@keyframes neonBorderFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Destello especular dinámico que sigue el ángulo 3D */
.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: 1.55rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 10;
  mix-blend-mode: screen;
}

/* Líneas de barrido cibernético estilo escáner */
.scanline-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg, 
    transparent 0%, 
    rgba(114, 182, 244, 0.12) 48%, 
    rgba(255, 255, 255, 0.2) 50%, 
    rgba(114, 182, 244, 0.12) 52%, 
    transparent 100%
  );
  background-size: 100% 120px;
  animation: scanlineSweep 4.5s linear infinite;
  mix-blend-mode: overlay;
  z-index: 5;
}

@keyframes scanlineSweep {
  0%   { background-position: 0 -120px; }
  100% { background-position: 0 100%; }
}

/* Destello holográfico diagonal */
.holographic-sheen {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg, 
    transparent 42%, 
    rgba(255, 255, 255, 0.28) 47%, 
    rgba(114, 182, 244, 0.35) 50%, 
    transparent 55%
  );
  transform: rotate(25deg);
  pointer-events: none;
  animation: holoSheen 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 6;
}

@keyframes holoSheen {
  0%, 100% { transform: translateY(-120%) rotate(25deg); }
  50%      { transform: translateY(120%) rotate(25deg); }
}

/* Anillos de radar concéntricos detrás del escudo */
.radar-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(114, 182, 244, 0.4);
  pointer-events: none;
  animation: radarExpand 4s cubic-bezier(0.1, 0.6, 0.3, 1) infinite;
}

.radar-ring-2 {
  animation-delay: 2s;
}

@keyframes radarExpand {
  0% {
    width: 150px;
    height: 150px;
    opacity: 0.8;
  }
  100% {
    width: 650px;
    height: 650px;
    opacity: 0;
  }
}

/* ==========================================================================
   BADGES FLOTANTES HUD ALREDEDOR DEL HERO
   ========================================================================== */
.floating-hud-badge {
  position: absolute;
  background: rgba(10, 18, 41, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(114, 182, 244, 0.35);
  box-shadow: 0 12px 30px -5px rgba(5, 9, 20, 0.85), 
              0 0 22px rgba(114, 182, 244, 0.2);
  z-index: 20;
}

.badge-float-1 {
  animation: floatBob 5.5s ease-in-out infinite;
}

.badge-float-2 {
  animation: floatBobReverse 6.5s ease-in-out infinite 0.7s;
}

@keyframes floatBob {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}

@keyframes floatBobReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%      { transform: translateY(12px) rotate(-1deg); }
}

/* ==========================================================================
   TEXTO CON SHIMMER DE LUZ Y TIPOGRAFÍA
   ========================================================================== */
.shimmer-text {
  background: linear-gradient(
    90deg, 
    #FFFFFF 0%, 
    #72B6F4 25%, 
    #FFFFFF 50%, 
    #72B6F4 75%, 
    #FFFFFF 100%
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: textShine 5s linear infinite;
}

@keyframes textShine {
  to {
    background-position: 200% center;
  }
}

/* ==========================================================================
   BOTONES NEXUS Y BOTONES MAGNÉTICOS
   ========================================================================== */
.btn-nexus-primary {
  position: relative;
  background: linear-gradient(135deg, #1E346D 0%, #4E90D2 100%);
  border: 1px solid #72B6F4;
  box-shadow: 0 4px 20px rgba(78, 144, 210, 0.4), 
              0 0 12px rgba(114, 182, 244, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.btn-nexus-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn-nexus-primary:hover::after {
  left: 100%;
}

.btn-nexus-primary:hover {
  background: linear-gradient(135deg, #26438a 0%, #5ba3ec 100%);
  box-shadow: 0 8px 30px rgba(114, 182, 244, 0.6), 
              0 0 25px rgba(114, 182, 244, 0.4);
  transform: translateY(-2px);
}

.magnetic-btn {
  will-change: transform;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ==========================================================================
   WHATSAPP PULSE MULTINIVEL
   ========================================================================== */
.btn-whatsapp-pulse {
  background: #25D366;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  animation: pulse-green-radar 2.4s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes pulse-green-radar {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.8), 0 0 0 0 rgba(114, 182, 244, 0.6);
  }
  60% {
    box-shadow: 0 0 0 18px rgba(37, 211, 102, 0), 0 0 0 28px rgba(114, 182, 244, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 0 0 0 rgba(114, 182, 244, 0);
  }
}

/* ==========================================================================
   REVELADO POR SCROLL (INTERSECTION OBSERVER)
   ========================================================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Escalonamiento manual para listas y grids */
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }
.reveal-delay-500 { transition-delay: 500ms; }

/* ==========================================================================
   BOTÓN VOLVER ARRIBA
   ========================================================================== */
#backToTopBtn {
  box-shadow: 0 10px 25px -5px rgba(5, 9, 20, 0.8), 
              0 0 20px rgba(114, 182, 244, 0.35);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#backToTopBtn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 14px 30px -5px rgba(30, 52, 109, 0.9), 
              0 0 30px rgba(114, 182, 244, 0.6);
}

/* ==========================================================================
   SCROLLBAR PERSONALIZADO CIBERNÉTICO
   ========================================================================== */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #0A1229;
}
::-webkit-scrollbar-thumb {
  background: #1E346D;
  border-radius: 6px;
  border: 1px solid rgba(114, 182, 244, 0.3);
}
::-webkit-scrollbar-thumb:hover {
  background: #4E90D2;
  box-shadow: 0 0 10px rgba(114, 182, 244, 0.5);
}

html {
  scroll-behavior: smooth;
}