/* =========================================================
   card-glow.css
   Efecto de MOVIMIENTO "Dark Glassmorphism" (estilo Apple/macOS):
   una luz ambiental suave que se desplaza lentamente DETRÁS del
   cristal, iluminando el borde especular al pasar — como en el video.

   Se carga DESPUÉS de glass.css. Modular y reversible: borra el
   <link> y las tarjetas vuelven al cristal estático.

   Ámbito EXACTO (solo las tarjetas señaladas por el usuario):
     · #servicio .card            → tarjetas de "El servicio"
     · #beneficios .card--benefit → tarjetas de "08 · Resultados"
     · .form                      → formulario de contacto
   No toca el carrusel (.transform) ni el acordeón de testimonios.
   Se mantienen paleta (cian/azul de marca), tipografía y estructura.
   ========================================================= */

/* Contenedor de cristal: recorta la luz al radio y la sitúa DETRÁS
   del contenido (z-index negativo) pero por encima del fondo oscuro. */
#servicio .card,
#beneficios .card--benefit,
.form {
  position: relative;
  isolation: isolate;      /* contexto de apilado propio: la luz no se escapa */
  overflow: hidden;        /* la luz difusa se recorta a las esquinas de 24px */
}

/* La luz: un blob radial muy difuso que deriva lentamente.
   opacity moderada para que el texto siga perfectamente legible. */
#servicio .card::after,
#beneficios .card--benefit::after,
.form::after {
  content: "";
  position: absolute;
  z-index: -1;                       /* entre el fondo del cristal y el contenido */
  top: -55%;
  left: -45%;
  width: 190%;
  height: 190%;
  background:
    radial-gradient(closest-side,
      rgba(25, 212, 255, 0.16) 0%,   /* cian de marca */
      rgba(27, 63, 224, 0.10) 42%,   /* azul de marca */
      transparent 72%);
  filter: blur(26px);
  pointer-events: none;
  will-change: transform;
  animation: card-glow-drift 17s ease-in-out infinite;
}

/* Deriva orgánica de la luz (sin colores nuevos, solo posición) */
@keyframes card-glow-drift {
  0%   { transform: translate(0%, 0%); }
  22%  { transform: translate(30%, 16%); }
  44%  { transform: translate(12%, 36%); }
  66%  { transform: translate(-24%, 22%); }
  88%  { transform: translate(-10%, -8%); }
  100% { transform: translate(0%, 0%); }
}

/* Desfase por tarjeta: la luz de cada una se mueve "a su aire",
   nunca todas a la vez (sensación viva y natural). */
#servicio .card:nth-child(1)::after,
#beneficios .card--benefit:nth-child(1)::after { animation-delay: -1s;  animation-duration: 18s; }
#servicio .card:nth-child(2)::after,
#beneficios .card--benefit:nth-child(2)::after { animation-delay: -6s;  animation-duration: 16s; }
#servicio .card:nth-child(3)::after,
#beneficios .card--benefit:nth-child(3)::after { animation-delay: -11s; animation-duration: 19s; }
#servicio .card:nth-child(4)::after,
#beneficios .card--benefit:nth-child(4)::after { animation-delay: -3s;  animation-duration: 17s; }
#beneficios .card--benefit:nth-child(5)::after { animation-delay: -9s;  animation-duration: 20s; }
#beneficios .card--benefit:nth-child(6)::after { animation-delay: -14s; animation-duration: 15s; }

/* Al pasar el cursor, la luz se intensifica un poco (el cristal "despierta"). */
#servicio .card:hover::after,
#beneficios .card--benefit:hover::after,
.form:hover::after {
  background:
    radial-gradient(closest-side,
      rgba(25, 212, 255, 0.24) 0%,
      rgba(27, 63, 224, 0.14) 42%,
      transparent 72%);
}

/* ---- Movimiento reducido: la luz NO se mueve (queda estática y suave),
   el contenido sigue 100% visible. ---- */
@media (prefers-reduced-motion: reduce) {
  #servicio .card::after,
  #beneficios .card--benefit::after,
  .form::after {
    animation: none;
    transform: translate(6%, -10%);  /* posición estática agradable, arriba */
  }
}