/* ==========================================================================
           1. ESTILOS BASE Y CONTENEDOR (FONDO GRIS MEDIO)
           ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap");

/* Contenedor de pantalla completa con un Gris Medio Premium en degradado radial */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #9b9ced 0%, #696cff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.6s;
  padding: 20px;
}

/* Desvanecimiento fluido */
.loader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Contenedor SVG totalmente fluido y adaptativo (proporciones ajustadas para albergar el carrito con aire) */
.svg-container {
  width: 100%;
  max-width: 600px;
  height: auto;
  aspect-ratio: 15 / 8;
}

.pcd-svg-text {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 150px; /* Tamaño optimizado dentro del lienzo vectorial */
  letter-spacing: 4px;
  user-select: none;
}

/* Contorno oscuro/apagado de fondo que sirve como guía */
.border-base {
  fill: none;
  stroke: rgba(15, 23, 42, 0.15); /* Sombra suave para dar relieve */
  stroke-width: 15px;
  stroke-linejoin: round;
}

/* El haz de luz brillante que recorre constantemente las letras */
.border-light-beam {
  fill: none;
  stroke: #4648bb; /* Color de la luz original */
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* Filtro de brillo láser aplicado desde el SVG */
  filter: url(#laser-glow);

  /* 
              MATEMÁTICA DEL FLUJO CONTINUO:
              - Usamos un haz de luz de 110px.
              - Ponemos un espacio (gap) de solo 150px antes del siguiente haz.
            */
  stroke-dasharray: 110 150;
  stroke-dashoffset: 0;

  /* Animación lineal infinita y constante */
  animation: runLight 2.2s linear infinite;
}

/* Estilos del Carrito de Compras (Guía y Haz de luz sincronizado) */
.cart-base {
  fill: none;
  stroke: rgba(15, 23, 42, 0.15);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.cart-light-beam {
  fill: none;
  stroke: #4648bb;
  stroke-width: 1px;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: url(#laser-glow);

  /* Sincronización del dasharray para el tamaño del carrito a escala */
  stroke-dasharray: 10 20;
  stroke-dashoffset: 0;
  animation: runLight 2.2s linear infinite;
}

/* Desplazamiento perfecto y continuo del trazo */
@keyframes runLight {
  to {
    /* Desplazamos exactamente un múltiplo de la suma de dash + gap para bucle infinito sin saltos */
    stroke-dashoffset: -520;
  }
}

/* .loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #9b9ced; 
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.6s;
}
.loader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.pcd-text {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 1;
  text-align: center;
  user-select: none;
  font-size: clamp(4.5rem, 18vw, 12rem);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
  background-image: linear-gradient(
    90deg,
    #374151 0%,
    #374151 25%,
    #ffffff 50%,
    #374151 75%,
    #374151 100%
  );
  background-size: 200% auto;
  animation: lightSweep 2.2s linear infinite;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
}
@keyframes lightSweep {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
} */