/* Contenedor principal del marquee */
.km-marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background: transparent !important;
    margin: 0;
    padding: 4px 0; /* margen mínimo arriba y abajo */
}

/* Contenedor que se anima */
.km-marquee-inner {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    animation-name: km-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--km-duration, 30s);
}

/* Cada bloque repetido de textos */
.km-marquee-track {
    display: flex;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Cada mensaje individual */
.km-item {
    display: inline-block;
    margin-right: 40px; /* espacio entre mensajes */
    text-decoration: none;
    font-weight: 600;
    color: inherit;
}

/*
   Animación:
   - 0%: los dos bloques (repeticiones) están completos.
   - 100%: se desplaza el ancho de la mitad (50%), es decir, un bloque completo.
   Al reiniciar la animación se nota un pequeño "salto", pero no queda texto estático.
*/
@keyframes km-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}