/* El aviso de «Cargando…»: la barra que se desliza arriba y los puntitos
   que van creciendo. Va en su propio fichero para que el navegador lo
   guarde una vez y no se repita en cada página. */
@keyframes barra {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

@keyframes puntitos {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

#cargando .barra {
    animation: barra 1.1s ease-in-out infinite;
}

.puntitos::after {
    content: '...';
    animation: puntitos 1.2s steps(1, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
    #cargando .barra, .puntitos::after { animation: none; }
}