/* Bloco 03 — Não falta competência + faixa de nomes (Figma: 15081:6173) */
.heroes { display: flex; flex-direction: column; gap: 56px; padding-top: 120px; overflow: hidden; background: var(--color-roxo-escuro); }
.heroes__head { display: flex; justify-content: center; padding-inline: 120px; }
.heroes__head-text { display: flex; flex-direction: column; gap: 16px; width: 760px; max-width: 100%; text-align: center; }
.heroes__title { font: 400 56px/64px var(--font-title); color: var(--color-branco); }
.heroes__lead { font-size: 16px; line-height: 24px; color: var(--color-amarelo-claro); }

.heroes__marquee { display: flex; justify-content: flex-start; width: 100%; overflow: hidden; }
.heroes__track { display: flex; flex: none; width: max-content; animation: heroes-scroll 60s linear infinite; }
.heroes__marquee:hover .heroes__track { animation-play-state: paused; }
/* 4 cópias do conjunto: desloca exatamente 1 conjunto (25%) e reinicia, sem salto e sem fim, em qualquer largura de tela. */
@keyframes heroes-scroll { to { transform: translateX(-25%); } }

.heroes__set { display: flex; flex: none; gap: 12px; margin: 0; padding: 0 12px 0 0; list-style: none; }

.person {
	--bg: var(--color-laranja); --fg: var(--color-branco);
	position: relative; flex: none; width: 217px; height: 318px; overflow: hidden;
	border-radius: 20px 20px 0 0; background: var(--bg);
}
.person--arch { border-radius: 110px 110px 0 0; }
.person--orange { --bg: var(--color-laranja);      --fg: var(--color-branco); }
.person--yellow { --bg: var(--color-amarelo);      --fg: var(--color-roxo-escuro); }
.person--purple { --bg: var(--color-roxo-claro);   --fg: var(--color-branco); }
.person--cream  { --bg: var(--color-amarelo-claro); --fg: var(--color-roxo-claro); }

.person__pattern { position: absolute; display: block; }
.person__pattern img { display: block; width: 100%; height: 100%; max-width: none; }
.person--orange .person__pattern { left: -42px; top: 13px; width: 292px; height: 292px; }
.person--yellow .person__pattern { left: -26px; top: 24px; width: 266px; height: 266px; }
.person--purple .person__pattern { left: -64px; top: 14px; width: 358px; height: 358px; }
.person--cream  .person__pattern { left: -70px; top: 7px;  width: 358px; height: 313px; }

.person__photo {
	position: absolute; left: -13px; top: 96px; width: 243px; height: 224px; max-width: none;
	object-fit: fill; object-position: bottom; pointer-events: none;
}
.person__name {
	position: absolute; left: 50%; top: 58px; width: 165px; transform: translate(-50%, -50%);
	font: 400 24px/1 var(--font-title); color: var(--fg); text-align: center;
}
.person--fs28 .person__name { font-size: 28px; }
.person--orange.person--fs28 .person__name { top: 52px; }
.person--yellow.person--fs28 .person__name { top: 52px; }

@media (prefers-reduced-motion: reduce) {
	.heroes__track { animation: none; }
	.heroes__marquee { justify-content: center; }
	.heroes__set { padding-right: 0; }
	.heroes__set[aria-hidden="true"] { display: none; }
}