/**
 * Layout
 *
 * Cabeçalho, rodapé, largura de página e as grades. É o esqueleto que
 * recebe a direção visual — sem opinião gráfica própria além de ritmo.
 */

:root {
	--altura-cabecalho: 72px;
}

/* ---------------------------------------------------------------------
 * Faixa de página
 * ------------------------------------------------------------------ */

.cabecalho__interno,
.conteudo > *,
.rodape__interno,
.rodape__base {
	width: 100%;
	max-width: var(--largura-maxima);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------------
 * Cabeçalho
 * ------------------------------------------------------------------ */

.cabecalho {
	position: sticky;
	top: 0;
	z-index: var(--z-cabecalho);
	background: color-mix(in srgb, var(--fundo) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: var(--borda-fina) solid var(--linha-divisoria);
}

.cabecalho__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-5);
	min-height: var(--altura-cabecalho);
}

/*
 * O logotipo agora é vetor, não palavra.
 *
 * A tipografia e a cor ficam em componentes.css, junto do SVG. Aqui sobra
 * só o que é de layout. Esta regra existia antes com color: var(--texto) e
 * estava vencendo a de componentes.css na cascata — layout.css carrega
 * depois —, o que deixava o logotipo preto no modo claro em vez de
 * vermelho. Mantida vazia de cor de propósito.
 */
.marca {
	flex: none;
}

.custom-logo-link img,
.cabecalho__marca img {
	max-height: 40px;
	width: auto;
}

/* Botão do menu — só no celular. */
.cabecalho__botao {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-2) var(--e-3);
	background: none;
	border: var(--borda-fina) solid var(--linha-divisoria-forte);
	border-radius: var(--raio-2);
	font-size: var(--t-sm);
	cursor: pointer;
}

.cabecalho__botao-barras,
.cabecalho__botao-barras::before,
.cabecalho__botao-barras::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	content: '';
	transition: transform var(--transicao);
}

.cabecalho__botao-barras {
	position: relative;
}

.cabecalho__botao-barras::before { position: absolute; top: -6px; }
.cabecalho__botao-barras::after  { position: absolute; top: 6px; }

.navegacao__lista {
	display: flex;
	flex-direction: column;
	gap: var(--e-4);
	margin: 0;
	font-size: var(--t-sm);
	font-weight: var(--peso-medio);
}

.navegacao__lista a {
	text-decoration: none;
}

.navegacao__lista .current-menu-item > a,
.navegacao__lista .current_page_item > a {
	color: var(--acento-texto);
}

/* Até 900px o menu abre e fecha. */
@media (max-width: 899px) {
	.navegacao {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		padding: var(--e-5) var(--gutter) var(--e-6);
		background: var(--fundo);
		border-bottom: var(--borda-fina) solid var(--linha-divisoria);
		box-shadow: var(--sombra-2);
	}

	.navegacao.esta-aberto {
		display: block;
	}
}

@media (min-width: 900px) {
	.cabecalho__botao {
		display: none;
	}

	.navegacao__lista {
		flex-direction: row;
		align-items: center;
		gap: var(--e-6);
	}
}

/* ---------------------------------------------------------------------
 * Conteúdo
 * ------------------------------------------------------------------ */

.conteudo > * {
	padding-block: var(--secao-y);
}

.pagina__topo {
	max-width: 68ch;
	margin-bottom: var(--bloco-y);
}

.pagina__titulo {
	font-size: var(--t-2xl);
}

.pagina__chamada {
	margin-top: var(--e-4);
	font-size: var(--t-md);
	color: var(--texto-2);
}

.pagina__imagem {
	margin-bottom: var(--bloco-y);
}

.pagina__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-4);
	margin-top: var(--e-7);
}

/* ---------------------------------------------------------------------
 * Grades
 *
 * Mínimo de 260px por cartão: abaixo disso o nome da solução quebra em
 * três linhas e a leitura some.
 * ------------------------------------------------------------------ */

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

.grade--cases {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.grupo-dor + .grupo-dor {
	margin-top: var(--secao-y);
}

.grupo-dor__topo {
	max-width: 62ch;
	margin-bottom: var(--e-6);
	padding-bottom: var(--e-4);
	border-bottom: var(--borda-fina) solid var(--linha-divisoria);
}

.grupo-dor__titulo {
	font-size: var(--t-xl);
}

.grupo-dor__texto {
	margin-top: var(--e-3);
	color: var(--texto-2);
}

/* ---------------------------------------------------------------------
 * Rodapé
 * ------------------------------------------------------------------ */

.rodape {
	margin-top: var(--secao-y);
	padding-block: var(--e-9) 0;
	background: var(--vlm-grafite);
	color: color-mix(in srgb, var(--texto-inverso) 78%, transparent);
	font-size: var(--t-sm);
}

.rodape__interno {
	display: grid;
	gap: var(--e-7);
	padding-bottom: var(--e-8);
}

@media (min-width: 760px) {
	.rodape__interno {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
	}
}

/* O rodapé é grafite nos dois temas, então o logotipo vai claro nele. */
.marca--rodape {
	color: var(--texto-inverso);
}

.rodape__descricao {
	margin-top: var(--e-3);
	max-width: 46ch;
}

.rodape__lista,
.rodape__legal-lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-4) var(--e-6);
	margin: 0;
}

.rodape a {
	text-decoration: none;
}

.rodape a:hover {
	color: var(--texto-inverso);
}

.rodape__base {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3) var(--e-6);
	justify-content: space-between;
	padding-block: var(--e-5);
	border-top: var(--borda-fina) solid color-mix(in srgb, var(--texto-inverso) 14%, transparent);
	font-size: var(--t-xs);
}

/* ---------------------------------------------------------------------
 * Paginação
 * ------------------------------------------------------------------ */

.paginacao {
	margin-top: var(--bloco-y);
}

.paginacao .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	align-items: center;
}

.paginacao .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding-inline: var(--e-3);
	border: var(--borda-fina) solid var(--linha-divisoria);
	border-radius: var(--raio-2);
	text-decoration: none;
	font-size: var(--t-sm);
}

.paginacao .page-numbers.current {
	background: var(--acento);
	border-color: var(--acento);
	color: var(--texto-inverso);
	font-weight: var(--peso-forte);
}

/* ---------------------------------------------------------------------
 * Serviço no cabeçalho
 *
 * Hoje só o botão de tema. Quando o seletor de idioma entrar, é aqui que
 * ele mora — por isso o contêiner já existe com gap definido.
 * ------------------------------------------------------------------ */

.cabecalho__servico {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	flex: none;
}

/* Até 900px o botão de menu e o de tema dividem o canto direito. */
@media (max-width: 899px) {
	.cabecalho__servico {
		order: 2;
	}
}