/* ==========================================================================
   PALETA AZUL GALÁCTICO (COSMIC GALACTIC BLUE & ELECTRIC CYAN)
   CONECTIVIDAD Y REDES URIBE E.I.R.L. - routing.cl
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700;800&display=swap');

:root {
  --galactic-blue: #2563eb;
  --galactic-blue-light: #3b82f6;
  --galactic-cyan: #00e5ff;
  --galactic-cyan-glow: #38bdf8;
  --galactic-indigo: #6366f1;
  --dark-cosmos: #030712;
  --dark-nebula: #070e24;
  --dark-card: #0c1838;
  --dark-card-border: rgba(59, 130, 246, 0.25);
  --cyan-glow-rgba: rgba(0, 229, 255, 0.45);
  --blue-glow-rgba: rgba(37, 99, 235, 0.55);
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--dark-cosmos);
  color: #f8fafc;
  font-weight: 500;
  overflow-x: hidden;
}

.font-mono-code {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

/* Background Galactic Cosmic Grid & Nebula Radial Glow */
.bg-tech-grid {
  background-image: 
    linear-gradient(to right, rgba(56, 189, 248, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99, 102, 241, 0.06) 1px, transparent 1px);
  background-size: 36px 36px;
}

.bg-radial-gradient {
  background: 
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.25) 0%, rgba(0, 229, 255, 0.12) 35%, transparent 70%),
    radial-gradient(circle at 85% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 50%);
}

/* Galactic Glow & Flare Utilities */
.glow-galactic-blue {
  box-shadow: 0 0 35px -5px rgba(37, 99, 235, 0.65), 0 0 15px rgba(0, 229, 255, 0.4);
}

.glow-galactic-cyan {
  box-shadow: 0 0 35px -5px rgba(0, 229, 255, 0.6), 0 0 20px rgba(56, 189, 248, 0.4);
}

.glow-text-blue {
  text-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 45px rgba(37, 99, 235, 0.5);
}

.glow-text-cyan {
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.9), 0 0 40px rgba(56, 189, 248, 0.6);
}

/* Feature Cards with Galactic Blue Laser Line */
.feature-card {
  background: linear-gradient(145deg, rgba(12, 24, 56, 0.96), rgba(7, 14, 36, 0.94));
  border: 1.5px solid rgba(59, 130, 246, 0.25);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #38bdf8, #2563eb, #6366f1, transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.feature-card:hover {
  transform: translateY(-7px);
  border-color: rgba(0, 229, 255, 0.7);
  box-shadow: 0 22px 45px -12px rgba(37, 99, 235, 0.35), 0 0 25px -5px rgba(0, 229, 255, 0.4);
}

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

/* Matching Highlighted Featured Cards (Video Vigilancia & Seguridad Activa) */
.featured-highlight-card {
  background: linear-gradient(145deg, rgba(18, 36, 80, 0.98), rgba(10, 20, 48, 0.96));
  border: 2px solid rgba(0, 229, 255, 0.6);
  box-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.4), 0 0 20px -5px rgba(0, 229, 255, 0.3);
  position: relative;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.featured-highlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px !important;
  background: linear-gradient(90deg, #00e5ff, #3b82f6, #6366f1, #00e5ff);
  background-size: 200% 200%;
  animation: galacticShimmer 4s ease infinite;
  opacity: 1 !important;
}

.featured-highlight-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 229, 255, 0.95);
  box-shadow: 0 25px 55px -10px rgba(37, 99, 235, 0.6), 0 0 35px rgba(0, 229, 255, 0.55);
}

/* Galactic Nebula Animations */
@keyframes galacticShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-galactic-pulse {
  background: linear-gradient(270deg, #2563eb, #00e5ff, #6366f1, #38bdf8, #2563eb);
  background-size: 400% 400%;
  animation: galacticShimmer 5s ease infinite;
}

@keyframes blueCosmicBeacon {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 12px rgba(0, 229, 255, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
  }
}

.live-indicator {
  animation: blueCosmicBeacon 2s infinite;
}

/* Scroll reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Custom Galactic Range Slider */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: #0f1c3d;
  border-radius: 9999px;
  height: 10px;
  outline: none;
  border: 1.5px solid rgba(0, 229, 255, 0.4);
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #00e5ff;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.95), 0 0 35px rgba(37, 99, 235, 0.7);
  border: 2.5px solid #ffffff;
  transition: transform 0.15s ease-in-out;
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.3);
  box-shadow: 0 0 25px rgba(0, 229, 255, 1), 0 0 50px rgba(37, 99, 235, 0.9);
}

input[type=range]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #00e5ff;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.95);
  border: 2.5px solid #ffffff;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #030712;
}

::-webkit-scrollbar-thumb {
  background: #152752;
  border-radius: 5px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
}