/* Archivo: style.css */

/* --- BANNER PROMOCIONAL (SOLUCIÓN PROFESIONAL) --- */

.top-promo-banner {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--banner-color);
    color: var(--dark-bg);
    padding: 0.3rem 0;
    z-index: 1001;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    overflow: hidden; /* Oculta el contenido que se desborda */
    display: flex;
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
}

.marquee-content-wrapper {
    /* Usamos flexbox para alinear los spans */
    display: flex;
    /* Evitamos que el contenido se encoja */
    flex-shrink: 0;
    /* Aplicamos la animación */
    animation: marqueeAnimation 40s linear infinite; /* Aumentamos la duración para una velocidad más lenta */
}

.promo-text-segment {
    /* Evita que el texto se parta en varias líneas */
    white-space: nowrap;
    /* Espacio entre cada repetición del mensaje */
    padding-right: 40px;
    /* Centrado vertical del texto */
    display: flex;
    align-items: center;
}

@keyframes marqueeAnimation {
    0% {
        transform: translateX(0);
    }
    100% {
        /*
         * Desplazamos el contenido exactamente la mitad de su anchura total.
         * Dado que el HTML ahora contiene dos bloques idénticos de texto,
         * esto mueve el primer bloque completamente fuera de la vista
         * mientras el segundo toma su lugar, creando un bucle infinito y sin saltos.
        */
        transform: translateX(-50%);
    }
}

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

body.header-is-scrolled .top-promo-banner {
    /* El banner sube junto con la cabecera a su nueva altura reducida */
    opacity: 0;
    visibility: hidden;
    /* Opcional: Evita que se pueda interactuar con el banner mientras está oculto */
    pointer-events: none;
    transform: translateY(-100%);
}