/* =============================================================
   Faixa — topo das páginas.

   Páginas internas: fundo claro com malha de pontos, trilha,
   título e resumo. Página inicial (--destaque): fundo escuro em
   gradiente, botões e os números contados no conteúdo.
   ============================================================= */

.faixa {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--c-borda);
	background:
		radial-gradient(60% 120% at 100% 0%, rgb(var(--c-ouro-rgb) / 12%), transparent 70%),
		linear-gradient(180deg, var(--c-acao-suave), var(--c-fundo));
}

/* Malha de pontos que some em direção ao texto. */
.faixa::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--pontos-escuros);
	-webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
	mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
	pointer-events: none;
}

.faixa__interno {
	position: relative;
	padding-block: clamp(2.25rem, 5vw, 4rem);
}

.faixa__principal {
	max-width: 50rem;
}

/* Trilha ------------------------------------------------------ */
.trilha ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-1) var(--e-2);
	margin: 0 0 var(--e-4);
	padding: 0;
	list-style: none;
	color: var(--c-texto-suave);
	font-size: var(--t-xs);
	font-weight: 600;
}

.trilha li + li::before {
	content: "/";
	margin-right: var(--e-2);
	color: var(--c-texto-fraco);
}

.trilha a {
	color: var(--c-texto-suave);
	text-decoration: none;
}

.trilha a:hover {
	color: var(--c-acao);
	text-decoration: underline;
}

.trilha [aria-current] {
	color: var(--c-acao-escura);
}

/* Texto ------------------------------------------------------- */
.faixa__rotulo {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	margin-bottom: var(--e-4);
	padding: 0.3em 0.85em;
	border: 1px solid rgb(var(--c-ouro-rgb) / 45%);
	border-radius: 999px;
	background: rgb(var(--c-ouro-rgb) / 10%);
	color: var(--c-ouro-texto);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.faixa__rotulo::before {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: var(--c-ouro);
}

.faixa__titulo {
	color: var(--c-acao-noite);
	font-size: var(--t-2xl);
	font-weight: var(--peso-titulo);
	letter-spacing: var(--track-titulo);
	line-height: 1.08;
	text-wrap: balance;
}

.faixa__texto {
	max-width: 60ch;
	margin-top: var(--e-4);
	color: var(--c-texto-medio);
	font-size: var(--t-md);
	line-height: 1.6;
}

.faixa__texto p + p {
	margin-top: var(--e-3);
}

.faixa__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
	margin-top: var(--e-6);
}

/* Página inicial ---------------------------------------------- */
.faixa--destaque {
	border-bottom: 0;
	background:
		radial-gradient(50% 80% at 90% 10%, rgb(var(--c-ouro-rgb) / 30%), transparent 70%),
		radial-gradient(60% 90% at 10% 110%, rgb(var(--c-acao-rgb) / 70%), transparent 70%),
		linear-gradient(150deg, var(--c-acao-noite) 20%, var(--c-acao-funda) 60%, var(--c-acao-escura));
	color: #fff;
}

.faixa--destaque::before {
	background: var(--pontos-claros);
	-webkit-mask-image: radial-gradient(70% 90% at 80% 40%, #000, transparent);
	mask-image: radial-gradient(70% 90% at 80% 40%, #000, transparent);
}

.faixa--destaque .faixa__interno {
	display: grid;
	align-items: center;
	gap: var(--e-7);
	padding-block: clamp(3.5rem, 9vw, 7rem);
}

@media (min-width: 64rem) {
	.faixa--destaque .faixa__interno {
		grid-template-columns: minmax(0, 1fr) 20rem;
	}
}

.faixa--destaque .faixa__rotulo {
	border-color: rgb(var(--c-ouro-rgb) / 60%);
	background: rgb(var(--c-ouro-rgb) / 16%);
	color: var(--c-ouro-media);
}

.faixa--destaque .faixa__titulo {
	color: #fff;
	font-size: var(--t-3xl);
	line-height: 1.02;
}

.faixa--destaque .faixa__texto {
	color: rgb(255 255 255 / 80%);
	font-size: clamp(1.1rem, 0.5vw + 1rem, 1.3rem);
}

.faixa--destaque a:not(.botao) {
	color: #fff;
}

.faixa--destaque :focus-visible {
	outline-color: #fff;
}

/* Números: cartões de vidro sobre o gradiente. */
.numeros {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--e-3);
}

.numero a {
	display: flex;
	flex-direction: column;
	gap: var(--e-1);
	height: 100%;
	padding: var(--e-4) var(--e-5);
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: var(--raio-lg);
	background: rgb(255 255 255 / 7%);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	text-decoration: none;
	transition: background-color var(--transicao), border-color var(--transicao), transform var(--transicao);
}

.numero a:hover {
	border-color: rgb(var(--c-ouro-rgb) / 70%);
	background: rgb(255 255 255 / 12%);
	transform: translateY(-2px);
}

.numero__total {
	color: #fff;
	font-size: clamp(2rem, 2vw + 1.4rem, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.numero__rotulo {
	color: rgb(255 255 255 / 75%);
	font-size: var(--t-sm);
	line-height: 1.35;
}

/* Celular e tablet: os números lado a lado, compactos. */
@media (max-width: 63.99rem) {
	.numeros {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: var(--e-2);
	}

	.numero a {
		padding: var(--e-3);
	}

	.numero__total {
		font-size: 1.75rem;
	}

	.numero__rotulo {
		font-size: var(--t-xs);
	}
}