/* =========================================================================
   GRUPO UNEED — layout
   ====================================================================== */

.container {
	width: min(var(--container), 100% - (var(--gutter) * 2));
	margin-inline: auto;
}

.container--wide { width: min(1400px, 100% - (var(--gutter) * 2)); }
.container--narrow { width: min(var(--container-texto), 100% - (var(--gutter) * 2)); }

.section { padding-block: var(--sp-section); }
.section--tight { padding-block: calc(var(--sp-section) * .5); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
/* --- Fundo uniforme -----------------------------------------------------
   A classe .section--surface pintava faixas alternadas para separar
   blocos. O fundo agora é único em todo o site: a separação vem do vazio
   entre as seções, que é como o padrão do grupo resolve — faixa de cor
   competia com os cards e fatiava a página em listras.

   A classe permanece nos templates, sem efeito de cor, por dois motivos:
   evita reescrever quatro partials, e mantém o gancho pronto caso alguma
   marca do grupo queira reintroduzir a alternância. */
.section--surface { background: transparent; }

/* --- Cabeçalho de seção ------------------------------------------------
   Centralizado por padrão: é assim que o padrão do grupo abre um bloco. */

.bloco-head {
	/*
	 * Medida generosa de propósito. A versão anterior usava 22ch e o
	 * resultado foi título de 3 palavras quebrando em 3 linhas — uma
	 * coluna estreita no meio de uma tela larga. Em título de display a
	 * medida ótima é bem maior que em texto corrido: o corpo grande já
	 * limita quantas palavras cabem por linha.
	 */
	max-width: var(--medida-titulo);
	margin-inline: auto;
	margin-bottom: var(--sp-12);
	text-align: center;
}

.bloco-head--largo { max-width: var(--medida-titulo-largo); }
.bloco-head--esq { margin-inline: 0; text-align: left; }

@media (max-width: 600px) {
	/* Menos respiro abaixo do cabeçalho: em tela curta, o vazio entre o
	   título e o conteúdo consumia uma tela inteira de rolagem. */
	.bloco-head { margin-bottom: var(--sp-8); }
}

.bloco-head__apoio {
	color: var(--text-muted);
	margin-top: var(--sp-5);
	font-size: var(--fs-sm);
	max-width: var(--medida-apoio);
	margin-inline: auto;
}

.bloco-head--esq .bloco-head__apoio { margin-inline: 0; }

/* --- Eyebrow ------------------------------------------------------------
   Versalete espaçado, sem ornamento. Rótulo de seção, não decoração. */

.eyebrow {
	display: block;
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-subtle);
	margin-bottom: var(--sp-5);
}

.grid { display: grid; gap: var(--sp-6); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

.cluster {
	display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
}

.cluster--centro { justify-content: center; }

.stack > * + * { margin-top: var(--sp-4); }

.site-main { min-height: 60vh; }