/* Bloco 04 — Vozes por um STF com a cara do povo (Figma: 15081:6282) */
.voices { position: relative; display: flex; align-items: center; gap: 40px; padding: 120px 0 120px 120px; background: var(--color-amarelo-claro); }

.voices__lead { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 504px; }
.voices__title { position: relative; width: 397px; height: 230.71px; /* inclui o balão, como no Figma */ font: 400 56px/64px var(--font-title); color: var(--color-roxo-escuro); white-space: nowrap; }
.voices__bubble { position: absolute; left: 76px; top: 124.71px; width: 151px; height: 106px; }
.voices__bubble-shape { position: absolute; top: 0.15%; right: -11.92%; bottom: -0.15%; left: 0; width: auto; height: auto; max-width: none; transform: scaleX(-1); }
.voices__bubble-text {
	position: absolute; inset: 16.98% 3.31% 39.62% 15.89%;
	display: flex; flex-direction: column; justify-content: flex-end;
	font: 400 56px/63px var(--font-title); color: var(--color-amarelo-claro);
}

.voices__scroller {
	flex: 1 1 0; min-width: 0; height: 467px; margin: 0; padding: 0; list-style: none;
	display: flex; align-items: flex-start; gap: 24px;
	overflow-x: auto; overflow-y: clip; scrollbar-width: none; scroll-snap-type: x proximity;
}
.voices__scroller::-webkit-scrollbar { display: none; }
.voices__item { flex: none; scroll-snap-align: start; }

.tile {
	--c: var(--color-laranja);
	position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
	width: 306px; height: 457px; padding: 29px; overflow: hidden; /* 29 + borda de 3 = 32, como no Figma */
	border: 3px solid var(--c); border-radius: 28px; box-shadow: 8px 8px 0 var(--c);
	background: var(--c); color: #f2f2f2; font: inherit; text-align: left; cursor: pointer;
}
.tile--yellow { --c: var(--color-amarelo); }
.tile--purple { --c: var(--color-roxo-claro); }
.tile__photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: 28px; object-fit: cover; pointer-events: none; }
.tile__shade { position: absolute; inset: 0; border-radius: 28px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.09) 51.641%, rgba(0, 0, 0, 0.9)); pointer-events: none; }
.tile__body { position: relative; display: flex; flex-direction: column; gap: 16px; width: 100%; }
.tile__play { display: block; width: 42.888px; height: 42.888px; max-width: none; }
.tile__text { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tile__name { font: 700 18px/26px var(--font-body); }
.tile__info { font: 400 14px/20px var(--font-body); }

.voices__next {
	position: absolute; top: calc(50% + 0.51px); right: 0; transform: translateY(-50%);
	display: flex; align-items: center; justify-content: center; width: 120px; height: 420px; padding: 40px 0;
	border: 0; background: none; cursor: pointer;
}
.voices__next img { width: 32px; height: 32px; }
.voices__next[hidden] { display: none; }