.tsg-palavras {
	padding: 26px 0;
	overflow: hidden;
	border-top: 1px solid var(--wp--custom--linha-clara);
	border-bottom: 1px solid var(--wp--custom--linha-clara);
	background: var(--wp--preset--color--fundo-escuro);
	color: var(--wp--preset--color--branco);
	white-space: nowrap;
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent,
		var(--wp--preset--color--texto) 12%,
		var(--wp--preset--color--texto) 88%,
		transparent
	);
	mask-image: linear-gradient(
		90deg,
		transparent,
		var(--wp--preset--color--texto) 12%,
		var(--wp--preset--color--texto) 88%,
		transparent
	);
}

.tsg-palavras__lista {
	display: inline-flex;
	width: max-content;
	margin: 0;
	animation: tsg-palavras-marquee 28s linear infinite;
}

.tsg-palavras__frase {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding-left: 38px;
	color: color-mix(in srgb, var(--wp--preset--color--branco) 42%, transparent);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: clamp(20px, 3vw, 34px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.tsg-palavras__frase::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--wp--custom--raio-pill);
	background: var(--wp--preset--color--marca);
}

@media (hover: hover) and (pointer: fine) {
	.tsg-palavras:hover .tsg-palavras__lista {
		animation-play-state: paused;
	}
}

@keyframes tsg-palavras-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsg-palavras__lista {
		animation: none;
	}
}