.mqb {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 90px;
	overflow: hidden;
	box-sizing: border-box;
}

.mqb__track {
	display: flex;
	flex: none;
	align-items: center;
	width: max-content;
	height: 100%;
	animation: mqb-scroll var(--mqb-dur, 30s) linear infinite;
	will-change: transform;
}

.mqb--right .mqb__track { animation-direction: reverse; }
.mqb--pause:hover .mqb__track { animation-play-state: paused; }

.mqb__group {
	display: flex;
	flex: none;
	align-items: center;
	white-space: nowrap;
}

.mqb__item {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 16px;
	margin-right: 40px;
}

a.mqb__item { text-decoration: none; color: inherit; cursor: pointer; }
a.mqb__item .mqb__text { transition: color .2s ease; }
a.mqb__item:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

.mqb__text {
	line-height: 1.1;
	white-space: nowrap;
}

.mqb__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex: none;
}
.mqb__icon i { line-height: 1; }
.mqb__icon svg { display: block; width: 1em; height: 1em; }

.mqb--spin .mqb__icon { animation: mqb-icon-spin 8s linear infinite; }

/* difuminado lateral opcional */
.mqb--fade {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--mqb-fade, 8%), #000 calc(100% - var(--mqb-fade, 8%)), transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 var(--mqb-fade, 8%), #000 calc(100% - var(--mqb-fade, 8%)), transparent 100%);
}

@keyframes mqb-scroll { to { transform: translate3d(-50%, 0, 0); } }
@keyframes mqb-icon-spin { to { transform: rotate(360deg); } }

/* Si el usuario pide menos movimiento: sin animación, scroll horizontal manual */
@media (prefers-reduced-motion: reduce) {
	.mqb { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.mqb__track { animation: none; }
	.mqb__group[aria-hidden="true"] { display: none; }
	.mqb--spin .mqb__icon { animation: none; }
}