body.inicio-fondo-espacial,
body.login-fondo-espacial {
    isolation: isolate;
}

#fondoEspacialInicio,
#fondoEspacialLogin {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.animacion-espacial span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 2px;
    height: 2px;
    background: #b9f6ff;
    box-shadow: 0 0 6px #9beaf2;
    opacity: 0;
    animation: polvo-fondo-espacial var(--duracion) var(--demora) linear infinite;
    will-change: transform, opacity;
}

.animacion-espacial span:nth-child(3n) {
    background: #ffc6e9;
    box-shadow: 0 0 7px #ff9edb;
}

.animacion-espacial span:nth-child(4n) {
    background: #fff3bf;
    width: 3px;
    height: 3px;
}

.animacion-espacial span.estrella-fugaz {
    width: 90px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #85eaff 75%, #fff);
    box-shadow: none;
    transform-origin: right center;
    animation-name: fugaz-fondo-espacial;
}

.animacion-espacial span.estrella-fugaz:nth-child(3n) {
    background: linear-gradient(90deg, transparent, #ffafd8 75%, #fff);
}

.animacion-espacial-pausada span {
    animation-play-state: paused;
}

@keyframes polvo-fondo-espacial {
    0% { transform: translate3d(-30px, 70px, 0); opacity: 0; }
    20% { opacity: 0.9; }
    65% { opacity: 0.6; }
    100% { transform: translate3d(35px, -85px, 0); opacity: 0; }
}

@keyframes fugaz-fondo-espacial {
    0% { transform: translate3d(-180px, -100px, 0) rotate(28deg); opacity: 0; }
    12% { opacity: 0.85; }
    45% { transform: translate3d(170px, 85px, 0) rotate(28deg); opacity: 0; }
    100% { transform: translate3d(170px, 85px, 0) rotate(28deg); opacity: 0; }
}

@media (max-width: 600px) {
    .animacion-espacial span:nth-child(n + 33) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .animacion-espacial span {
        animation: none;
        opacity: 0.35;
        will-change: auto;
    }
    .animacion-espacial span.estrella-fugaz { display: none; }
}