/* ===========================================================
   LUCES DE FONDO
   Tres focos azules que se desplazan muy despacio sobre el negro.
   Nada de partículas ni estrellas: solo iluminación de apoyo.
   =========================================================== */
.luces{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:var(--fondo);
}
.luz{
  position:absolute; display:block; border-radius:50%;
  will-change:transform, opacity;
}
.luz--1{
  width:70vmax; height:70vmax; top:-26vmax; left:-22vmax;
  background:radial-gradient(circle at 50% 50%, rgba(15,54,231,.24), transparent 62%);
  animation:luz-1 34s ease-in-out infinite alternate;
}
.luz--2{
  width:56vmax; height:56vmax; bottom:-24vmax; right:-18vmax;
  background:radial-gradient(circle at 50% 50%, rgba(66,214,255,.11), transparent 64%);
  animation:luz-2 42s ease-in-out infinite alternate;
}
.luz--3{
  width:48vmax; height:48vmax; top:38%; left:52%;
  background:radial-gradient(circle at 50% 50%, rgba(31,87,255,.13), transparent 66%);
  animation:luz-3 50s ease-in-out infinite alternate;
}

@keyframes luz-1{
  from{ transform:translate3d(0,0,0) scale(1);      opacity:.85 }
  to  { transform:translate3d(7vmax,5vmax,0) scale(1.14); opacity:1 }
}
@keyframes luz-2{
  from{ transform:translate3d(0,0,0) scale(1.08);   opacity:1 }
  to  { transform:translate3d(-6vmax,-4vmax,0) scale(1); opacity:.7 }
}
@keyframes luz-3{
  from{ transform:translate3d(-4vmax,2vmax,0) scale(.94); opacity:.6 }
  to  { transform:translate3d(5vmax,-6vmax,0) scale(1.1); opacity:.95 }
}

@media (prefers-reduced-motion:reduce){
  .luz{ animation:none }
}

/* En modo claro los resplandores ensucian el fondo: se apagan. */
html[data-tema="claro"] .luz{ display:none }