/* Bloco 02 — Por que + 3 de 172 + Quatro vagas (Figma: 15081:5922) */
.reasons {
	display: flex; flex-direction: column; align-items: center; gap: 120px;
	padding: 120px; background: var(--color-amarelo-claro);
}
.reasons > * { width: 100%; max-width: 1320px; }

/* — Cartões — */
.reasons__cards { display: flex; flex-direction: column; gap: 56px; }
.reasons__title { width: 984px; max-width: 100%; font: 400 48px/58.8px var(--font-title); color: var(--color-roxo-escuro); }
.reasons__cols { display: flex; align-items: flex-start; gap: 24px; }

.card {
	--card-bg: var(--color-amarelo); --card-fg: var(--color-roxo-escuro);
	flex: none; width: 424px; overflow: hidden;
	border: 3px solid var(--color-roxo-escuro); border-radius: 28px;
	box-shadow: 8px 8px 0 var(--color-roxo-escuro);
	background: var(--card-bg); color: var(--card-fg);
	transition: background-color .2s ease, color .2s ease;
}
.card--c2 { --card-bg: var(--color-roxo-claro); --card-fg: var(--color-branco); }
.card--c3 { --card-bg: var(--color-laranja);    --card-fg: var(--color-branco); }

.card__heading { margin: 0; font: inherit; }
.card__toggle {
	display: flex; flex-direction: column; gap: 32px; width: 100%; padding: 32px;
	border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.card__toggle:focus-visible { outline-offset: -6px; }
.card__top { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 74px; }
.card__icon { display: block; flex: none; }
.card__icon-hover { display: none; align-items: center; justify-content: center; }
.card__icon-hover img { transform: rotate(-5.6deg); }
.card--c1 .card__icon-hover { width: 84.966px; height: 72.399px; }
.card--c2 .card__icon-hover { width: 89.942px; height: 72.887px; }
.card--c3 .card__icon-hover { width: 80.985px; height: 72.008px; }

.card__row { display: flex; align-items: flex-end; gap: 4px; width: 100%; }
.card__title { display: block; flex: none; width: 314px; font: 700 24px/32px var(--font-body); }
.card__plus { display: flex; flex: none; }
.card__plus img { width: 32px; height: 32px; }
.card__plus-hover { display: none; }
.card__plus-hover.is-always { display: block; }

/* Hover / foco por teclado (somente fechado) */
.card:not(.is-open):hover,
.card:not(.is-open):has(.card__toggle:focus-visible) { background: var(--color-roxo-escuro); color: var(--color-branco); }
.card:not(.is-open):hover .card__icon--closed,
.card:not(.is-open):has(.card__toggle:focus-visible) .card__icon--closed { display: none; }
.card:not(.is-open):hover .card__icon-hover,
.card:not(.is-open):has(.card__toggle:focus-visible) .card__icon-hover { display: flex; }
.card:not(.is-open):hover .card__plus-normal,
.card:not(.is-open):has(.card__toggle:focus-visible) .card__plus-normal { display: none; }
.card:not(.is-open):hover .card__plus-hover,
.card:not(.is-open):has(.card__toggle:focus-visible) .card__plus-hover { display: block; }

/* Aberto */
.card__panel { display: flex; flex-direction: column; gap: 24px; padding: 32px; }
.card__panel[hidden] { display: none; }
.card__panel-head { display: flex; flex-direction: column; gap: 32px; }
.card__panel-top { display: flex; align-items: flex-start; justify-content: space-between; }
.card__close { display: block; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.card__close img { width: 32px; height: 32px; }
.card__panel-title { width: 314px; max-width: 100%; margin: 0; font: 700 24px/32px var(--font-body); }
.card__text { font-size: 17px; line-height: 27.2px; }

/* — 3 de 172 — */
.stat { display: flex; align-items: flex-start; justify-content: space-between; }
.stat__lead { display: flex; flex-direction: column; justify-content: center; gap: 16px; flex: none; width: 536px; height: 380px; }
.stat__big { position: relative; width: 100%; height: 176px; font-family: var(--font-title); }
.stat__big-num {
	position: absolute; left: 0; top: 88px; transform: translateY(-50%);
	font-size: 220px; line-height: 176px; letter-spacing: -8.8px; color: var(--color-laranja); white-space: nowrap;
}
.stat__big-of {
	position: absolute; left: 117.48px; top: 143.5px; transform: translateY(-50%);
	font-size: 61.6px; line-height: 49.28px; color: var(--color-roxo-escuro); white-space: nowrap;
}
.stat__text { font-size: 18px; line-height: 28.8px; color: var(--color-roxo-escuro); }
.stat__text strong { font-weight: 700; color: var(--color-laranja); }

.stat__chart { position: relative; flex: none; width: 760px; height: 381px; }
.stat__chart-inner { position: absolute; top: 0; left: 84px; display: flex; flex-direction: column; gap: 22px; width: 592px; }
.stat__dots { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); grid-auto-rows: 25.11px; gap: 9px; height: 332.09px; }
.dot { align-self: start; aspect-ratio: 1; border-radius: 50%; background: rgba(79, 15, 127, 0.18); }
.dot--women { background: var(--color-laranja); }
.stat__legend { display: flex; flex-wrap: wrap; gap: 22px; height: 26.59px; }
.legend__item { display: flex; align-items: center; gap: 8px; padding-bottom: 0.59px; font: 700 16px/25.6px var(--font-body); color: var(--color-roxo-escuro); white-space: nowrap; }
.legend__dot { display: block; width: 14px; height: 14px; border-radius: 7px; }
.legend__dot--men { background: rgba(79, 15, 127, 0.35); }
.legend__dot--women { background: var(--color-laranja); }
.legend__dot--black { border: 2px solid var(--color-laranja); }

/* — Quatro vagas — */
.vagas { position: relative; overflow: hidden; padding: 56px 120px; border-radius: 32px; background: var(--color-roxo-escuro); }
.vagas__wrap { display: flex; align-items: center; justify-content: space-between; }
.vagas__lead { display: flex; flex-direction: column; gap: 28px; flex: none; width: 532px; }
.vagas__title { position: relative; height: 151.17px; max-width: 672px; font: 400 48px/56px var(--font-title); color: var(--color-branco); white-space: nowrap; display: flex; align-items: center; }
.vagas__title-lines { display: block; }
.vagas__star {
	position: absolute; left: 438px; top: 124.09px; width: 24px; height: 24px;
	background: var(--color-amarelo);
	-webkit-mask: url('../img/b02-star.svg') center / 24px 24px no-repeat; mask: url('../img/b02-star.svg') center / 24px 24px no-repeat;
}
.vagas__text { font-size: 14px; line-height: 21px; color: var(--color-branco); }
.vagas__text p + p { margin-top: 21px; }

.vagas__track {
	position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 24px;
	margin: 0; padding: 34px 0 0 48px; list-style: none;
}
.vagas__track::before {
	content: ''; position: absolute; left: 10px; top: 46.29px; bottom: 2.71px; width: 2px;
	border-radius: 2px; background: var(--color-roxo-claro);
}
.seat { position: relative; display: flex; flex-direction: column; gap: 8px; width: 392px; }
.seat__year { font: 700 32px/30px var(--font-body); color: var(--color-amarelo); }
.seat--open .seat__year { color: var(--color-amarelo-claro); }
.seat__info { display: flex; flex-direction: column; color: var(--color-branco); }
.seat__name { font: 700 16px/21px var(--font-body); }
.seat__note { font: 400 12px/21px var(--font-body); }
.seat::before {
	content: ''; position: absolute; left: -45px; top: 5.29px; width: 16px; height: 16px;
	border: 3px solid var(--color-roxo-escuro); border-radius: 10px; background: var(--color-amarelo);
}
.seat--open::before { animation: seat-pulse 0.8s linear infinite; }
@keyframes seat-pulse {
	0%       { transform: scale(1);        animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
	74.875%  { transform: scale(1.238278); }
	100%     { transform: scale(1.238278); }
}
.seat__badge { position: absolute; left: -7px; top: -36px; display: flex; align-items: center; justify-content: center; width: 131.13px; height: 31.77px; }
.seat__badge > span {
	display: block; transform: rotate(-3deg); padding: 4px 12px;
	border: 1px solid var(--color-roxo-escuro); border-radius: 4px;
	background: var(--color-amarelo); color: var(--color-roxo-escuro);
	font: 700 13px/normal var(--font-body); white-space: nowrap;
}
.vagas__deco { position: absolute; top: 334.88px; right: 1px; width: 252.62px; max-width: none; height: 203px; }

@media (prefers-reduced-motion: reduce) {
	.seat--open::before { animation: none; }
	.card { transition: none; }
}