.gsap-marquee-bands-wrap {
	position: relative;
	overflow: hidden;
	padding: 40px 0;
}

.gsap-marquee-band {
	position: relative;
	width: 130%;
	left: -15%;
	height: var( --gsap-mq-height, 140px );
	margin-top: var( --gsap-mq-overlap, 24px );
	transform: rotate( var( --gsap-mq-rotation, -4deg ) );
	overflow: hidden;
	display: flex;
	align-items: center;
}

.gsap-marquee-band:first-child {
	margin-top: 0;
}

.gsap-marquee-track {
	display: flex;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
}

.gsap-marquee-group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/*
 * Tipografía base del texto.
 * El Group_Control_Typography de Elementor genera reglas con mayor especificidad
 * usando el selector "{{WRAPPER}} .gsap-marquee-text", por lo que siempre
 * sobreescribe este fallback en cuanto el usuario elige una fuente en el editor.
 */
.gsap-marquee-text {
	display: inline-block;
	font-weight: 700;
	text-transform: uppercase;
	/* clamp responsive: usa las variables del widget o valores por defecto */
	font-size: clamp(
		var( --gsap-mq-fs-min, 2.2rem ),
		6vw,
		var( --gsap-mq-fs-max, 6rem )
	);
	line-height: 1;
	white-space: nowrap;
	padding-right: var( --gsap-mq-gap, 60px );
}

.gsap-marquee-bands-wrap.gsap-mq-no-uppercase .gsap-marquee-text {
	text-transform: none;
}

.gsap-marquee-icon {
	height: var( --gsap-mq-icon-size, 60px );
	width: auto;
	flex-shrink: 0;
	margin-right: var( --gsap-mq-gap, 60px );
}