/* Contenedor visible: define el tamaño y oculta el desbordamiento */
.suha-banner-container {
    width: 100%;
    height: 35px; /* Altura ajustada a tu imagen */
    overflow: hidden; /* Oculta el contenido que se sale de este div */
    position: relative;
    background-color: #552899; /* Color de fondo de tu imagen */
    font-family: Arial, sans-serif; /* Fuente similar a la de tu imagen */
    font-size: 14px; /* Tamaño de fuente ajustado */
    line-height: 35px; /* Centrado vertical del texto */
    color: #ffffff; /* Color del texto (blanco) */
    white-space: nowrap; /* Asegura que el contenido interior esté en una sola línea */
}

/* Contenido que se desplaza: necesita ser muy ancho y sus hijos deben estar alineados */
.scrolling-content {
    display: inline-block;
    position: absolute;
    left: 0;
    /* No estableceremos el ancho aquí, jQuery lo hará dinámicamente */
    /* El ancho total será la suma de los anchos de los .banner-item */
}

/* Estilo para cada ítem dentro del banner */
.banner-item {
    display: inline-block;
    padding: 0 15px; /* Espacio entre los bloques de texto */
    vertical-align: top; /* Asegura que los ítems se alineen correctamente */
}