/*
 * Styles for the Promo Top Bar Shortcode
 * (Con Animación Marquee)
 */

.promo-bar-wrapper {
    background-color: #000;
    color: #fff;
    padding: 8px 0; /* Ajustamos padding (quitamos izq/der) */
    text-align: left; /* Quitamos el centrado */
    overflow: hidden; /* ¡CLAVE! Oculta el texto que está fuera de la barra */
}

.promo-bar-text {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;

    /* --- Inicio de la Animación Marquee --- */
    
    /* 1. Fuerza el texto a estar en una sola línea */
    white-space: nowrap; 
    
    /* 2. Hace que el bloque sea solo tan ancho como el texto */
    display: inline-block; 
    
    /* 3. Aplica la animación: (nombre, duración, velocidad, repetición) */
    animation: marquee-scroll 6s linear infinite;
}

/* 4. Define la animación (de dónde a dónde va) */
@keyframes marquee-scroll {
    0% {
        /* Empieza justo fuera del borde derecho de la pantalla */
        transform: translateX(100vw); 
    }
    100% {
        /* Termina cuando el texto desaparece por el borde izquierdo */
        transform: translateX(-100%); 
    }
}