main::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        /* ---- AURAS DIFUSAS (la mancha de tinta) ---- */
        radial-gradient(circle 400px at 6% 6%,   rgba(24, 156, 216, 0.13), transparent 70%),
        radial-gradient(circle 350px at 94% 16%, rgba(227, 4, 125, 0.11), transparent 70%),
        radial-gradient(circle 320px at 10% 38%, rgba(253, 234, 24, 0.07), transparent 70%),
        radial-gradient(circle 380px at 92% 55%, rgba(24, 156, 216, 0.10), transparent 70%),
        radial-gradient(circle 340px at 8% 72%,  rgba(227, 4, 125, 0.09), transparent 70%),
        radial-gradient(circle 380px at 90% 92%, rgba(24, 156, 216, 0.09), transparent 70%),

        /* ---- GOTAS NÍTIDAS (salpicadura fina) ---- */
        /* cluster cyan, arriba izquierda */
        radial-gradient(circle 6px at 12% 9%,  rgba(24, 156, 216, 0.35), transparent 100%),
        radial-gradient(circle 4px at 15% 7%,  rgba(24, 156, 216, 0.28), transparent 100%),
        radial-gradient(circle 8px at 9% 11%,  rgba(24, 156, 216, 0.30), transparent 100%),
        /* cluster magenta, derecha */
        radial-gradient(circle 5px at 89% 19%, rgba(227, 4, 125, 0.35), transparent 100%),
        radial-gradient(circle 7px at 92% 13%, rgba(227, 4, 125, 0.30), transparent 100%),
        radial-gradient(circle 4px at 86% 17%, rgba(227, 4, 125, 0.28), transparent 100%),
        /* cluster amarillo, mitad izquierda */
        radial-gradient(circle 6px at 13% 40%, rgba(253, 234, 24, 0.25), transparent 100%),
        radial-gradient(circle 4px at 8% 36%,  rgba(253, 234, 24, 0.22), transparent 100%),
        /* cluster cyan, mitad derecha */
        radial-gradient(circle 7px at 94% 58%, rgba(24, 156, 216, 0.30), transparent 100%),
        radial-gradient(circle 4px at 89% 53%, rgba(24, 156, 216, 0.25), transparent 100%),
        /* cluster magenta, abajo izquierda */
        radial-gradient(circle 5px at 11% 75%, rgba(227, 4, 125, 0.30), transparent 100%),
        radial-gradient(circle 7px at 6% 70%,  rgba(227, 4, 125, 0.25), transparent 100%),
        /* cluster cyan, abajo derecha */
        radial-gradient(circle 6px at 93% 89%, rgba(24, 156, 216, 0.30), transparent 100%),
        radial-gradient(circle 4px at 87% 94%, rgba(24, 156, 216, 0.25), transparent 100%);
}

@media (max-width: 768px) {
    main::before {
        background:
            radial-gradient(circle 220px at 0% 5%,    rgba(24, 156, 216, 0.12), transparent 70%),
            radial-gradient(circle 200px at 100% 25%, rgba(227, 4, 125, 0.10), transparent 70%),
            radial-gradient(circle 200px at 0% 60%,   rgba(253, 234, 24, 0.06), transparent 70%),
            radial-gradient(circle 220px at 100% 92%, rgba(24, 156, 216, 0.09), transparent 70%);
    }
}