/* =============================================================
   Rodapé
   ============================================================= */

.rodape {
	margin-block-start: var(--e-9);
	background: var(--c-fundo-escuro);
	color: var(--c-texto-inverso);
}

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

@media (min-width: 48em) {
	.rodape__interno {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--e-8);
	}
}

.rodape__marca img {
	width: min(100%, 24rem);
	/* A logomarca é preta sobre transparente; no fundo escuro ela
	   precisa ser invertida para continuar legível. */
	filter: invert(1) grayscale(1) brightness(1.9);
}

.rodape__descricao {
	max-width: 46ch;
	margin-block-start: var(--e-4);
	font-size: var(--t-sm);
	color: var(--cte-ink-faint);
}

.rodape__titulo {
	margin-block-end: var(--e-3);
	font-size: var(--t-sm);
	font-weight: var(--peso-medio);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cte-ink-faint);
}

.menu-rodape {
	display: grid;
	gap: var(--e-2);
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.menu-rodape a {
	display: inline-block;
	padding-block: var(--e-1);
	font-size: var(--t-sm);
	color: var(--c-texto-inverso);
	text-decoration: none;
}

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

.rodape__creditos {
	padding-block: var(--e-4);
	border-block-start: 1px solid rgb(var(--c-texto-inverso-rgb) / 12%);
	font-size: var(--t-xs);
	color: var(--cte-ink-faint);
	text-align: center;
}

.rodape__creditos a {
	color: var(--c-texto-inverso);
	text-decoration: underline;
}

.rodape__creditos a:hover {
	color: var(--c-acao-media);
}