/* ══════════════════════════════════════════════════════════════
   FONDO — las auroras de arriba de la página. COMPARTIDO con el panel
   (ver README de la carpeta). El fondo liso es --bg-page, de cada tema.
   ══════════════════════════════════════════════════════════════ */

/* Las auroras de arriba (diseño «B · Luz», user 2026-10-01): tres manchas
   difuminadas —verde, azul y amarillo de la IA— detrás del header, que se ven
   a través de su cristal y se pierden al bajar. Las pone BaseLayout en todas
   las páginas, y el hero de la portada lleva otras dentro de su tarjeta. */
.aurora { position: absolute; top: 0; left: 0; right: 0; height: 720px; z-index: -1; pointer-events: none; overflow: hidden; filter: blur(70px); opacity: .45; }
.aurora i { position: absolute; border-radius: 50%; animation: aurora-float 14s ease-in-out infinite; }
.aurora i:nth-child(1) { width: 520px; height: 360px; left: 8%; top: -160px; background: var(--byme-green); opacity: .55; }
.aurora i:nth-child(2) { width: 460px; height: 320px; left: 42%; top: -200px; background: var(--byme-ai-1); opacity: .35; animation-delay: -4s; }
.aurora i:nth-child(3) { width: 380px; height: 300px; right: 4%; top: -120px; background: var(--byme-ai-3); opacity: .35; animation-delay: -8s; }
@keyframes aurora-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -20px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }