/* ====================================
   FONDO ESTRELLADO COMPARTIDO
   Mismo cielo de la pantalla principal.
   Lo usan index.html y todas las secciones.

   Uso en cada página:
     <link rel="stylesheet" href="fondo-estrellado.css">
     <div class="estrellas" aria-hidden="true"></div>
     <div class="estrellas estrellas2" aria-hidden="true"></div>
==================================== */

body {
    background: radial-gradient(
        ellipse at bottom,
        #172554 0%,
        #080d20 65%,
        #02040d 100%
    );

    /* El cielo ocupa siempre la ventana, aunque la página sea larga */
    background-attachment: fixed;
    background-color: #02040d;
}

.estrellas {
    position: fixed;
    inset: 0;
    pointer-events: none;

    background-image:
        radial-gradient(2px 2px at 10% 20%, white, transparent),
        radial-gradient(2px 2px at 30% 70%, white, transparent),
        radial-gradient(2px 2px at 50% 40%, white, transparent),
        radial-gradient(2px 2px at 70% 15%, white, transparent),
        radial-gradient(2px 2px at 90% 80%, white, transparent),
        radial-gradient(2px 2px at 20% 90%, white, transparent),
        radial-gradient(2px 2px at 80% 55%, white, transparent);

    background-size: 250px 250px;

    animation: brillar 4s ease-in-out infinite alternate;
}

.estrellas2 {
    background-size: 170px 170px;
    opacity: 0.5;
    animation-delay: 2s;
}

@keyframes brillar {
    from { opacity: 0.3; }
    to   { opacity: 1; }
}

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

/* Barras de desplazamiento invisibles: la página se sigue moviendo con la rueda, el trackpad, el dedo o las teclas */
* {
    scrollbar-width: none;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
    background: transparent;
}