/* 🔮 Contenedor del loader, centrado y sin fondo */
#loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: none !important; /* 🌌 Fondo completamente limpio */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* 🌀 SVG con tamaño mayor y sin fondo */
.loader {
  width: 40em; /* ✨ Dos pasos más de ancho */
  height: auto;
  fill: none;
  stroke-linecap: round;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  transition: transform 1s ease, opacity 1s ease;
  animation: cosmicPulse 3s ease-in-out infinite; /* 💓 Pulso cósmico integrado */
}

/* 🌌 Trazo infinito, brillante y limpio */
.loader use {
  stroke-width: 40px;
  stroke-dasharray: 1570 1000;
  stroke-dashoffset: 2570;
  animation: dashMove 2s linear infinite, colorCycle 2s linear infinite;
  background: none !important;
}

/* 🚀 Efecto de salida cósmica */
.loader.vanish {
  transform: scale(3);
  opacity: 0;
}

/* 🔁 Animación del trazo */
@keyframes dashMove {
  to { stroke-dashoffset: 0; }
}

/* 🌈 Ciclo de colores vibrantes */
@keyframes colorCycle {
  0%   { stroke: #3498db; }
  25%  { stroke: #e74c3c; }
  50%  { stroke: #f1c40f; }
  75%  { stroke: #2ecc71; }
  100% { stroke: #3498db; }
}

/* 💓 Pulso de respiración cósmica */
@keyframes cosmicPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

/* 📱 Responsive cósmico */
@media (max-width: 480px) {
  .loader {
    width: 30em; /* 🚀 Ampliado para que mantenga presencia */
  }

  .loader use {
    stroke-width: 18px; /* 🌌 Más grueso para visual dominante */
  }
}