/* ==========================================================================
   Barra de anúncio — Figma 3392:8007 (desktop) / 3456:3106 (mobile)
   ========================================================================== */

.vp-announcement {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 24px;
	background: var(--vp-gold);
	overflow: hidden;
}

/* Desktop: as três frases cabem e ficam paradas, centralizadas. */
.vp-announcement__marquee {
	overflow: visible;
}

.vp-announcement__track {
	display: flex;
	align-items: center;
	gap: 12px;
	animation: none;
}

.vp-announcement__track .is-clone {
	display: none;
}

.vp-announcement__item {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.vp-announcement__item:first-child .vp-announcement__dot {
	display: none;
}

.vp-announcement__dot {
	flex: none;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--vp-bronze);
}

.vp-announcement__text {
	position: relative;
	/* O Figma centra a caixa aparada (altura das maiúsculas) na barra; o
	   Chrome centra a linha de 19.6px e o texto sobe 1px. Medido @2x. */
	top: 1px;
	color: var(--vp-white);
	font-size: 14px;
	line-height: 19.6px;
	font-weight: 600;
	white-space: nowrap;
}

/* Tablet e mobile: letreiro rolando (LP Vitruvian mobile, #845D32 com
   texto #F8F4EC e pontos #D4B48A). */
@media (max-width: 1023px) {
	.vp-announcement {
		justify-content: flex-start;
		padding: 0;
		background: var(--vp-bronze);
	}

	.vp-announcement__marquee {
		overflow: hidden;
		width: 100%;
	}

	.vp-announcement__track {
		animation: vp-marquee-x var(--vp-marquee-duration, 30s) linear infinite;
	}

	/* O ponto separa também a última frase da cópia seguinte. */
	.vp-announcement__track .is-clone {
		display: flex;
	}

	.vp-announcement__dot {
		background: var(--vp-gold-soft);
	}

	.vp-announcement__text {
		color: var(--vp-cream-2);
	}
}