/*
 * Archivo CSS personalizado
 * Aquí pondremos estilos que son difíciles
 * de hacer solo con Tailwind, como el slider infinito.
 */

/* Contenedor del Marquee (Slider) */
.marquee {
    overflow: hidden; /* Oculta el texto que se sale */
    white-space: nowrap; /* Evita que el texto salte de línea */
    box-sizing: border-box;
}

/* Contenido que se anima */
.marquee-content {
    display: inline-block;
    padding-left: 100%; /* Inicia fuera de la pantalla */
    
    /* Define la animación */
    animation: marquee 20s linear infinite;
}

/* Animación de Keyframes */
@keyframes marquee {
    /* Mueve el texto de 0% (fuera, a la derecha) a -100% (fuera, a la izquierda) */
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}