/* Contenedor principal de la barra */
.auto-banner-bar {
    background: #e9c47a;
    color: black;
    font-family: inherit;
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 5px;
}

/* Alineación interna */
.auto-banner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 15px;
}

/* Asegurar que los enlaces mantengan el estilo del banner */
.auto-banner-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.auto-banner-link:hover p {
    text-decoration: underline; /* Opcional: subraya el texto al pasar el cursor */
}

/* Máscara del texto animado */
.auto-banner-marquee {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

/* La pista que se mueve */
.marquee-track {
    display: inline-flex;
    width: max-content;
}

/* Grupos de texto */
.marquee-content {
    display: inline-flex;
    align-items: center;
}

/* Cada ítem de texto */
.auto-banner-item {
    display: inline-flex;
    align-items: center;
    padding: 0 30px; /* Separación entre frases */
    position: relative;
}

/* Punto separador entre frases (opcional, como un listado) */
.auto-banner-item::after {
    content: "•";
    position: absolute;
    right: 0;
    font-size: 1.2em;
    opacity: 0.5;
}
.auto-banner-item:last-child::after {
    display: none; /* Oculta el punto del último elemento en el grupo */
}

.auto-banner-item p {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Animación hacia la IZQUIERDA */
.marquee-scroll-left {
    animation: scrollLeft 20s linear infinite;
}

/* Animación hacia la DERECHA */
.marquee-scroll-right {
    animation: scrollRight 20s linear infinite;
}

/* Animación suave al pasar el mouse por si quieren leer */
.marquee-track:hover {
    animation-play-state: paused;
}

/* Botón de cerrar */
.auto-banner-close {
    background: transparent;
    border: none;
    color: currentColor;
    cursor: pointer;
    padding: 5px;
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.auto-banner-close:hover {
    opacity: 1;
}

/* --- KEYFRAMES --- */
@keyframes scrollLeft {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}