.background-granulado {
    position: relative;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05), transparent 45%),
        linear-gradient(145deg, #050505, #0b0b0b, #020202);
    overflow: hidden;
}
.background-granulado::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-radial-gradient(
        circle,
        rgba(255,255,255,0.015) 0px,
        rgba(255,255,255,0.015) 1px,
        transparent 2px
    );
    opacity: 0.6;
    pointer-events: none;
}









.background-granulado::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 2px);
    background-size: 180px 180px, 260px 260px, 340px 340px;
    background-position: 0 0, 40px 60px, 120px 200px;
    opacity: 0.35;
    pointer-events: none;
}



.background-granulado::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 2px);

    background-size:
        180px 180px,
        260px 260px,
        340px 340px;

    background-position:
        0 0,
        40px 60px,
        120px 200px;

    opacity: 0.35;
    pointer-events: none;

    animation:
        firefly-drift 30s linear infinite,
        firefly-flicker 6s ease-in-out infinite;
}
@keyframes firefly-drift {
    0% {
        background-position:
            0 0,
            40px 60px,
            120px 200px;
    }
    50% {
        background-position:
            60px 40px,
            120px 160px,
            260px 300px;
    }
    100% {
        background-position:
            0 0,
            40px 60px,
            120px 200px;
    }
}
@keyframes firefly-flicker {
    0%   { opacity: 0.15; }
    20%  { opacity: 0.35; }
    40%  { opacity: 0.18; }
    60%  { opacity: 0.45; }
    80%  { opacity: 0.25; }
    100% { opacity: 0.15; }
}
@media (max-width: 768px) {
    .background-granulado::after {
        opacity: 0.25;
        animation-duration: 40s, 8s;
    }
}





.background-granulado {
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.06),
        inset 0 -2px 4px rgba(0,0,0,0.9);
}