/* 
 * Caramba Moreno Marquee - CSS
 * La animación @keyframes se genera dinámicamente en JavaScript
 * para calcular el porcentaje exacto de translateX
 */

.caramba-moreno--marquee {
    overflow: hidden;
    position: relative;
}

.caramba-moreno--marquee-gabeta {
    display: inline-block;
    white-space: nowrap;
    /* La animación se aplica via JavaScript */
}

/* Estilos para CUALQUIER elemento hijo directo de la gabeta */
.caramba-moreno--marquee-gabeta > * {
    display: inline-block !important;
    white-space: nowrap !important;
    margin: 0 1em 0 0 !important;
    vertical-align: middle;
}

/* Pausar al hover */
.caramba-moreno--marquee:hover .caramba-moreno--marquee-gabeta {
    animation-play-state: paused;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .caramba-moreno--marquee-gabeta {
        animation: none !important;
    }
}

/* Funcionalidad del espaciador (topbar sync) */
.caramba-moreno--synced-height {
    transition: height 0.3s ease;
}