/* =============================================================
   Faixa — título das listagens, da página e do 404, sobre o
   quadriculado técnico em verde profundo.
   ============================================================= */

.faixa {
	position: relative;
	overflow: hidden;
	background: var(--grade-tecnica), var(--c-acao-escura);
	color: #fff;
}

/* Brilho suave no canto, para a grade não ficar chapada. */
.faixa::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto auto;
	width: 60%;
	aspect-ratio: 1;
	background: radial-gradient(closest-side, rgb(var(--c-acao-rgb) / 90%), transparent);
	pointer-events: none;
}

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

.faixa__rotulo {
	display: inline-block;
	margin-bottom: var(--e-3);
	padding: 0.2em 0.7em;
	border: 1px solid rgb(255 255 255 / 30%);
	border-radius: 999px;
	color: rgb(255 255 255 / 85%);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.faixa__titulo {
	max-width: 24ch;
	font-family: var(--fonte-titulo);
	font-size: var(--t-2xl);
	font-weight: 600;
	line-height: 1.12;
	text-wrap: balance;
}

.faixa__texto {
	max-width: 62ch;
	margin-top: var(--e-4);
	color: rgb(255 255 255 / 84%);
	font-size: var(--t-md);
}

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

.faixa__texto a {
	color: #fff;
}

.faixa__busca {
	max-width: 34rem;
	margin-top: var(--e-5);
}

.faixa__busca .busca {
	border-color: transparent;
	box-shadow: var(--sombra-lg);
}

.faixa__busca .busca__campo {
	padding-block: 0.8em;
	font-size: var(--t-base);
}

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