/* 
    DERECHOS RESERVADOS: LUMIERES ADS.

    DESARROLLADORES:
        - FULL-STACK: ING. GABRIEL ALEGRÍA.
        - FRONT-END: MTS. ING. RAÚL PORTILLO.

    RECURSO: CONFIGURACIÓN TOPBAR, ESTILOS (PUBLICIDAD TOPBAR).

    PROHÍBIDO LA DISTRIBUCIÓN DE ESTE APLICATIVO O SOLUCIONES CÓDIFICADAS.
*/

.top-bar {
    background: #C43C75;
    background: linear-gradient(90deg, rgba(196, 60, 117, 1) 0%, rgba(26, 63, 122, 1) 54%);
    color: white;
    text-align: center;
    padding: 20px 0;
    font-size: 1.3em;
    font-weight: bold;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;

    /* Estilos del contenedor */
    white-space: nowrap; 
    overflow: hidden;   
    display: flex; /* Usamos flexbox para que los spans se alineen */
}

/* Contenedor de la animación */
.marquee-content {
    display: flex; /* Importante para que los spans se alineen horizontalmente */
    animation: scroll-text 15s linear infinite; /* Aplica la animación al contenedor */
}

.marquee-content span {
    display: inline-block;
    padding: 0 1em; /* Espacio entre cada frase */
}

/* Definición de la animación de desplazamiento */
@keyframes scroll-text {
    from {
        transform: translateX(0%);
    }
    to {
        /* Desplaza el texto exactamente la mitad de su longitud total */
        transform: translateX(-50%);
    }
}

/* Pausa la animación al pasar el ratón */
.top-bar:hover .marquee-content {
    animation-play-state: paused;
}

/* Smartphones (e.g., up to 767px) */
@media (max-width: 767px) {
    .top-bar {
        font-size: 0.8em;
        padding: 15px 0;
    }
}