/*
 * iGUi Portal
 * Referência: Figma "BLOG DA iGUI", Section 559:1054 (versão serifada).
 * Tokens vêm do theme.json (--wp--preset--*); aqui ganham nomes curtos.
 */

/* ---------- Tokens ---------- */

/*
 * Escala tipográfica (23/09), calibrada no NYT e no The Times e corrigida pelo olho do
 * Noto Serif, que no mesmo corpo parece uns 12% maior que o Cheltenham e o Times Modern.
 *
 *   xs 12        meta: data, tempo de leitura, crédito, rótulo em caixa alta
 *   sm 14        navegação, linha fina em lista, legenda, rodapé
 *   base 16      texto corrido fora da matéria, interface
 *   leitura 18   corpo da matéria                       (NYT 20 · Times 18)
 *   lg 20        título de matéria em lista e cartão     (NYT 23 · Times 19–20)
 *   xl 24        intertítulo da matéria, título de faixa (NYT 28)
 *   2xl 28       manchete de destaque                    (Times 32)
 *   3xl 36       título da matéria e da categoria        (NYT 44–47 · Times 44)
 *   display 56   abertura da home e citação do Sobre
 *
 * Fora da escala, de propósito: os números do Sobre (até 80) crescem com a grade, não com a tela.
 *
 * No celular os degraus de cima encolhem (theme.json, fluid): 2xl 23, 3xl 28, display 40.
 */

:root {
	--neutro-0: var(--wp--preset--color--neutro-0, #fcfbf9);
	--neutro-50: var(--wp--preset--color--neutro-50, #f7f5f1);
	--neutro-100: var(--wp--preset--color--neutro-100, #f1eee9);
	--neutro-200: var(--wp--preset--color--neutro-200, #e3ded5);
	--neutro-300: var(--wp--preset--color--neutro-300, #cbc5b9);
	--neutro-400: var(--wp--preset--color--neutro-400, #979184);
	--neutro-500: var(--wp--preset--color--neutro-500, #6a6459);
	--neutro-600: var(--wp--preset--color--neutro-600, #46413a);
	--neutro-800: var(--wp--preset--color--neutro-800, #24211c);
	--neutro-900: var(--wp--preset--color--neutro-900, #17140f);
	--azul-100: var(--wp--preset--color--azul-100, #c7ecfb);
	--azul-300: var(--wp--preset--color--azul-300, #4cc2ee);
	--azul-500: var(--wp--preset--color--azul-500, #009fe3);
	--azul-700: var(--wp--preset--color--azul-700, #006ea3);
	--azul-800: var(--wp--preset--color--azul-800, #005a85);
	--azul-900: var(--wp--preset--color--azul-900, #003f5e);

	--fs-xs: var(--wp--preset--font-size--xs, 0.75rem);
	--fs-sm: var(--wp--preset--font-size--sm, 0.875rem);
	--fs-base: var(--wp--preset--font-size--base, 1rem);
	--fs-leitura: var(--wp--preset--font-size--leitura, 1.125rem);
	--fs-lg: var(--wp--preset--font-size--lg, 1.25rem);
	--fs-xl: var(--wp--preset--font-size--xl, 1.5rem);
	--fs-2xl: var(--wp--preset--font-size--2-xl, 1.75rem);
	--fs-3xl: var(--wp--preset--font-size--3-xl, 2.25rem);
	--fs-display: var(--wp--preset--font-size--display, 3.5rem);

	--sans: Inter, ui-sans-serif, system-ui, sans-serif;
	--serif: "Noto Serif", ui-serif, Georgia, serif;

	--sombra-foto: var(--wp--preset--shadow--foto, 0 2px 6px 0 rgb(14 26 32 / 0.07), 0 16px 40px -12px rgb(14 26 32 / 0.1));
	--sombra-painel: var(--wp--preset--shadow--painel, 0 4px 14px 0 rgb(14 26 32 / 0.1), 0 32px 72px -20px rgb(14 26 32 / 0.14));

	/* Margem lateral: 24px em 390, 192px em 1920 (doc 10 §3.3). */
	--margem: clamp(1.5rem, 10.98vw - 1.176rem, 12rem);
	/* Padding de faixa: 56 no mobile, 112 no desktop. */
	--faixa: clamp(3.5rem, 2.068rem + 5.87vw, 7rem);
	--curva: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--neutro-0);
	color: var(--neutro-900);
	font-family: var(--sans);
	font-size: var(--fs-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
	margin: 0;
}

ul, ol {
	padding: 0;
	list-style: none;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

::selection {
	background: var(--azul-100);
	color: var(--neutro-900);
}

input,
textarea,
button,
select {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

input,
textarea {
	caret-color: var(--azul-700);
}

:focus-visible {
	outline: 2px solid var(--neutro-900);
	outline-offset: 2px;
	border-radius: 2px;
}

.visualmente-oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.pular-para-conteudo {
	position: absolute;
	left: var(--margem);
	top: -100px;
	z-index: 100;
	padding: 12px 16px;
	background: var(--neutro-900);
	color: var(--neutro-0);
	font-size: var(--fs-sm);
	font-weight: 600;
	border-radius: 8px;
}

.pular-para-conteudo:focus {
	top: 12px;
}

.largura {
	width: min(calc(100% - 2 * var(--margem)), 96rem);
	margin-inline: auto;
}

.coluna-post {
	width: min(calc(100% - 2 * var(--margem)), 62.5rem);
	margin-inline: auto;
}

.coluna-leitura {
	/* 640px (era 672): Guardian e BBC ficam em 616–620. */
	width: min(calc(100% - 2 * var(--margem)), 40rem);
	margin-inline: auto;
}

.faixa {
	border-top: 1px solid var(--neutro-200);
}

/* ---------- Peças compartilhadas ---------- */

/* Foto com contorno e elevação (elevação/foto). */
.foto-moldura {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: var(--sombra-foto);
	background: var(--neutro-100);
}

.foto-moldura::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid oklch(0 0 0 / 0.1);
	pointer-events: none;
}

.foto-moldura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.legenda {
	color: var(--neutro-500);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

/* Link de saída: "Ver tudo de …  →" */
.link-seta {
	display: inline-block;
	color: var(--azul-700);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.2;
	padding-block: 4px;
}

.link-seta span {
	display: inline-block;
	margin-left: 0.2em;
	transition: transform 160ms var(--curva);
}

.link-seta:hover {
	color: var(--azul-800);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.link-seta:hover span {
	transform: translateX(4px);
}

.link-seta--forte {
	font-size: var(--fs-base);
	font-weight: 600;
}

/* Rótulo de categoria em caixa alta (post e cartões). */
.rotulo-categoria {
	display: inline-block;
	color: var(--azul-700);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* A área de toque cresce para 44px sem mudar o desenho. */
a.rotulo-categoria {
	position: relative;
}

a.rotulo-categoria::after {
	content: "";
	position: absolute;
	inset: -13px -8px;
}

a.rotulo-categoria:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.secao-cabecalho {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 64px;
}

.secao-cabecalho__titulo {
	font-family: var(--serif);
	font-size: var(--fs-2xl);
	font-weight: 600;
	line-height: 1.21;
	text-wrap: balance;
}

.secao-cabecalho__olho {
	max-width: 74rem;
	color: var(--neutro-800);
	font-size: var(--fs-lg);
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

/* ---------- Topo · masthead de jornal ---------- */

.jornal {
	background: var(--neutro-0);
}

.jornal__masthead {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	height: 108px;
}

.jornal__marca {
	display: block;
	padding: 4px;
}

/* Linha do dia, como no The Times: data e hora embaixo da marca. */
.jornal__dia {
	align-self: center;
	color: var(--neutro-500);
	font-size: var(--fs-xs);
	line-height: 1.2;
	letter-spacing: 0.04em;
	white-space: nowrap;
	text-transform: lowercase;
	font-variant-numeric: tabular-nums;
}

.jornal__dia::first-letter {
	text-transform: uppercase;
}

.jornal__marca img {
	width: 96px;
	height: 65px;
}

.jornal__ponta {
	display: flex;
	align-items: center;
	gap: 28px;
	min-width: 0;
}

.jornal__institucional {
	display: flex;
	align-items: center;
	gap: 24px;
}

.jornal__ponta--fim {
	justify-content: flex-end;
}

.jornal__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--neutro-600);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.jornal__link:hover,
.jornal__link[aria-current="page"] {
	color: var(--neutro-900);
}

.jornal__link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.jornal__link--acao {
	color: var(--azul-700);
}

.jornal__link--acao:hover {
	color: var(--azul-800);
}

.jornal__busca-botao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--neutro-600);
	font: 500 var(--fs-sm) / 1.2 var(--sans);
	cursor: pointer;
	transition: color 160ms var(--curva), transform 120ms var(--curva);
}

.jornal__busca-botao:hover,
.jornal__busca-botao[aria-expanded="true"] {
	color: var(--neutro-900);
}

.jornal__busca-botao:active {
	transform: scale(0.96);
}

/* ---------- Editorias, entre fios ---------- */

.editorias {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--neutro-0);
	border-block: 1px solid var(--neutro-200);
	transition: box-shadow 200ms var(--curva);
}

.admin-bar .editorias {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.editorias--presa {
	box-shadow: 0 8px 24px -16px rgb(14 26 32 / 0.18);
}

.editorias__interno {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
}

/* A marca pequena só entra quando a faixa está presa no topo, como no NYT. */
.editorias__marca {
	position: absolute;
	left: 0;
	display: flex;
	align-items: center;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-6px);
	transition: opacity 200ms var(--curva), transform 200ms var(--curva), visibility 0s linear 200ms;
}

.editorias--presa .editorias__marca {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 200ms var(--curva), transform 200ms var(--curva), visibility 0s;
}

.editorias__marca img {
	width: 41px;
	height: 28px;
}

.editorias__lista {
	display: flex;
	align-items: stretch;
	gap: 30px;
	height: 100%;
}

.editorias__lista li {
	display: flex;
}

/* Serifa nas editorias: é o gesto de jornal que o resto do sistema já usa nos títulos. */
.editorias__link {
	position: relative;
	display: flex;
	align-items: center;
	color: var(--neutro-800);
	font-family: var(--serif);
	font-size: var(--fs-sm);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.editorias__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--azul-700);
	transform: scaleX(0);
	transition: transform 200ms var(--curva);
}

.editorias__link:hover {
	color: var(--neutro-900);
}

.editorias__link:hover::after {
	transform: scaleX(1);
	background: var(--neutro-300);
}

.editorias__link[aria-current="page"],
.editorias__link--atual {
	color: var(--neutro-900);
	font-weight: 600;
}

.editorias__link[aria-current="page"]::after,
.editorias__link--atual::after {
	transform: scaleX(1);
	background: var(--azul-700);
}

.editorias__separador {
	width: 1px;
	margin-block: 17px;
	background: var(--neutro-200);
}

/* ---------- Busca, na própria linha do masthead ---------- */

.busca {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	max-width: 19rem;
}

/* Com JS, o campo só aparece quando a lupa é acionada. */
.jornal--com-js .busca {
	display: none;
}

.jornal--buscando .busca {
	display: flex;
}

.jornal--buscando .jornal__busca-botao {
	display: none;
}

/*
 * Campo de busca: caixa com borda, lupa dentro (é o botão de enviar) e, no topo, o X que fecha.
 * O mesmo campo, maior, abre a página de resultados.
 */
.campo-busca {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	height: 38px;
	border: 1px solid var(--neutro-300);
	border-radius: 10px;
	background: var(--neutro-0);
	transition: border-color 160ms var(--curva), box-shadow 160ms var(--curva);
}

.campo-busca:hover {
	border-color: var(--neutro-400);
}

.campo-busca:focus-within {
	border-color: var(--neutro-800);
	box-shadow: 0 0 0 3px oklch(0 0 0 / 0.06);
}

.campo-busca__campo {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 8px 0 0;
	border: 0;
	background: none;
	color: var(--neutro-900);
	font: 400 var(--fs-sm) / 1 var(--sans);
	outline: none;
}

.campo-busca__campo::placeholder {
	color: var(--neutro-500);
}

/* O X nativo do type=search some: o X do topo já fecha, e na página o campo se limpa à mão. */
.campo-busca__campo::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.campo-busca__enviar,
.campo-busca__fechar {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--neutro-500);
	cursor: pointer;
	transition: color 160ms var(--curva);
}

.campo-busca__enviar:hover,
.campo-busca__fechar:hover {
	color: var(--neutro-900);
}

.campo-busca__enviar:focus-visible,
.campo-busca__fechar:focus-visible {
	outline: 2px solid var(--neutro-900);
	outline-offset: -4px;
	border-radius: 8px;
}

.campo-busca__fechar {
	width: 34px;
	border-left: 1px solid var(--neutro-200);
}

.campo-busca--grande {
	height: 52px;
	border-radius: 12px;
}

.campo-busca--grande .campo-busca__enviar {
	width: 50px;
}

.campo-busca--grande .campo-busca__campo {
	font-size: var(--fs-base);
}

@media (max-width: 900px) {
	/* Primeira linha: o fixo. Sem a data, que invadia a marca. */
	/* minmax(0, 1fr): sem isso a coluna da data, mesmo escondida, guarda a largura dela e espreme a marca. */
	.jornal__masthead {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		gap: 12px;
		height: 60px;
	}

	.jornal__dia {
		display: none;
	}

	/*
	 * Lupa na ponta esquerda, no lugar da data, e Sobre nós na direita: ícone de um lado,
	 * palavra do outro, marca no centro (como a ferramenta à esquerda nos apps do NYT e do Times).
	 * display: contents solta os filhos da ponta no grid do masthead.
	 */
	.jornal__ponta--fim {
		display: contents;
	}

	.jornal__marca {
		grid-column: 2;
		grid-row: 1;
	}

	.jornal__busca-botao {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		width: 44px;
		margin-left: -13px;
		justify-content: center;
	}

	.jornal__institucional {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}

	.jornal__marca img {
		width: 60px;
		height: 41px;
	}

	.jornal__ponta {
		gap: 18px;
	}

	/* Fica só a lupa. */
	.jornal__busca-rotulo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.jornal__link--acao {
		display: none;
	}

	/* Busca aberta: ocupa a linha toda; a marca e Sobre nós saem por um instante. */
	.jornal--buscando .jornal__masthead {
		grid-template-columns: 1fr;
	}

	.jornal--buscando .busca {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.jornal--buscando .jornal__dia,
	.jornal--buscando .jornal__marca,
	.jornal--buscando .jornal__institucional {
		display: none;
	}

	.busca {
		max-width: none;
	}

	/* Segunda linha: as editorias, que rolam e ficam presas no alto. */
	.editorias__interno {
		justify-content: flex-start;
		width: 100%;
		height: 46px;
	}

	.editorias__lista {
		gap: 22px;
		padding-inline: var(--margem);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
	}

	.editorias__lista::-webkit-scrollbar {
		display: none;
	}

	.editorias__marca {
		display: none;
	}
}

@media (max-width: 600px) {
	.admin-bar .editorias {
		top: 0;
	}

	.busca__form {
		padding-block: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.editorias__marca,
	.editorias__link::after,
	.jornal--com-js .busca,
	.jornal--com-js .busca__form {
		transition: none;
	}
}

/* ---------- Home · abertura · 539:2104 ---------- */

.home-abertura {
	padding-block: clamp(4rem, 1.4rem + 10.6vw, 9.5rem) clamp(3rem, 1.1rem + 7.8vw, 8rem);
	text-align: center;
}

.home-abertura__titulo {
	font-family: var(--serif);
	font-size: var(--fs-display);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-wrap: balance;
	/* O recorte do texto termina na caixa: o respiro evita cortar o "g". */
	padding-bottom: 0.12em;
	/* Sombreado leve da direita para a esquerda sobre neutro/400, como no Figma. */
	color: var(--neutro-400);
	background: linear-gradient(270deg, rgb(0 0 0 / 0.2) 0%, rgb(102 102 102 / 0) 100%), var(--neutro-400);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (forced-colors: active) {
	.home-abertura__titulo {
		background: none;
		color: CanvasText;
		-webkit-text-fill-color: CanvasText;
	}
}

/* ---------- Home · bloco editorial · 539:2107 ---------- */

.home-editorial {
	padding-block: clamp(3rem, 1.9rem + 4.4vw, 6rem) var(--faixa);
}

.home-editorial__colunas {
	display: grid;
	grid-template-columns: 760fr 440fr 336fr;
}

.coluna {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.coluna--destaque {
	padding-right: 40px;
}

.coluna--materias {
	padding-inline: 40px;
	border-left: 1px solid var(--neutro-200);
}

.coluna--ranking {
	gap: 0;
	padding-left: 40px;
	border-left: 1px solid var(--neutro-200);
	scroll-margin-top: 72px;
}

.coluna__rotulo,
.coluna__rotulo h2 {
	color: var(--neutro-500);
	font-family: var(--sans);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.5px;
}

.coluna__rotulo {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--neutro-200);
}

.coluna__rotulo--com-apoio {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.coluna__rotulo--com-apoio p {
	color: var(--neutro-500);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.coluna__saida {
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid var(--neutro-200);
}

/* Destaque */

.destaque {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.destaque__link {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.destaque__foto {
	position: relative;
	height: clamp(15rem, 10rem + 13vw, 25rem);
	overflow: hidden;
	border-radius: 12px;
	background: var(--neutro-100);
}

.destaque__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
	transition: transform 400ms var(--curva);
}

.destaque__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgb(0 23 36 / 0) 62%, rgb(0 23 36 / 0.34) 100%);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
}

.destaque__titulo {
	font-family: var(--serif);
	font-size: var(--fs-2xl);
	font-weight: 600;
	line-height: 1.21;
	text-wrap: balance;
}

.destaque__link:hover .destaque__titulo {
	color: var(--azul-700);
}

.destaque__link:hover .destaque__foto img {
	transform: scale(1.02);
}

.destaque__linha-fina {
	color: var(--neutro-500);
	font-size: var(--fs-base);
	line-height: 1.6;
	text-wrap: pretty;
}

/* LinhaManchete · 412:147 — a área clicável é a linha inteira (doc 10 §3.3b). */

.manchetes li {
	border-top: 1px solid var(--neutro-200);
}

.linha-manchete {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 13px;
	color: var(--neutro-900);
	font-size: var(--fs-lg);
	font-weight: 500;
	line-height: 1.3;
	transition: background-color 160ms var(--curva);
}

.linha-manchete__seta {
	flex-shrink: 0;
	color: var(--azul-700);
	transition: transform 160ms var(--curva);
}

.linha-manchete:hover {
	background: var(--neutro-50);
}

.linha-manchete:hover .linha-manchete__titulo {
	color: var(--azul-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.linha-manchete:hover .linha-manchete__seta {
	transform: translateX(4px);
}

.coluna--destaque .coluna__saida {
	margin-top: 0;
}

/* Matérias com foto */

.materia {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.materia + .materia {
	padding-top: 24px;
	border-top: 1px solid var(--neutro-200);
}

.materia__link {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.materia__foto {
	position: relative;
	height: 200px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--neutro-100);
}

.materia__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
	pointer-events: none;
}

.materia__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--curva);
}

.materia__titulo {
	font-family: var(--serif);
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.36;
	text-wrap: balance;
}

.materia__link:hover .materia__titulo {
	color: var(--azul-700);
}

.materia__link:hover .materia__foto img {
	transform: scale(1.02);
}

.materia__linha-fina {
	color: var(--neutro-500);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

/* LinhaRanking · 414:155 */

.ranking {
	display: flex;
	flex-direction: column;
}

.linha-ranking {
	display: flex;
	gap: 16px;
	padding: 19px 13px;
	border-radius: 12px;
	transition: background-color 160ms var(--curva);
}

.linha-ranking__numero {
	color: var(--neutro-500);
	font-size: var(--fs-base);
	font-weight: 500;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

.linha-ranking__texto {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.linha-manchete__titulo,
.linha-ranking__titulo {
	text-wrap: pretty;
}

.linha-ranking__titulo {
	color: var(--neutro-900);
	font-size: var(--fs-base);
	font-weight: 500;
	line-height: 1.3;
}

.linha-ranking__meta {
	color: var(--neutro-500);
	font-size: var(--fs-xs);
	line-height: 1.2;
}

.linha-ranking:hover {
	background: var(--neutro-50);
}

.linha-ranking:hover .linha-ranking__titulo {
	color: var(--azul-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.coluna--ranking .coluna__saida {
	margin-top: 0;
}

@media (max-width: 1199px) {
	.home-editorial__colunas {
		grid-template-columns: 1fr 1fr;
		row-gap: 56px;
	}

	.coluna--destaque {
		grid-column: 1 / -1;
		padding-right: 0;
	}

	.coluna--materias {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 767px) {
	.home-editorial__colunas {
		grid-template-columns: 1fr;
	}

	/* No celular o índice por leitura vem logo depois do destaque, não no fim. */
	.coluna--ranking {
		order: 1;
	}

	.coluna--materias {
		order: 2;
	}

	.coluna--materias {
		padding-right: 0;
	}

	.coluna--ranking {
		padding-left: 0;
		border-left: 0;
	}

	.linha-manchete {
		padding-inline: 0;
	}

	.linha-ranking {
		padding-inline: 0;
	}
}

/* ---------- Home · a Rede · 539:2144 ---------- */

.home-rede {
	padding-block: var(--faixa);
	border-top: 1px solid var(--neutro-200);
}

.home-rede__linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.home-rede__texto {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.home-rede__titulo {
	font-family: var(--serif);
	font-size: var(--fs-xl);
	font-weight: 600;
	line-height: 1.25;
}

.home-rede__texto p {
	color: var(--neutro-500);
	font-size: var(--fs-base);
	line-height: 1.6;
	text-wrap: pretty;
}

.home-rede .link-seta {
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.home-rede__linha {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
}

/* ---------- Post · 539:294 ---------- */

.post-cabecalho {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: clamp(3.5rem, 1.9rem + 6.3vw, 7.5rem) 64px;
}

.post-cabecalho__titulo {
	font-family: var(--serif);
	font-size: var(--fs-3xl);
	/* 500, não 600: Guardian e BBC usam peso médio no título (benchmark de 24/09). */
	font-weight: 500;
	line-height: 1.167;
	text-wrap: balance;
}

.post-cabecalho__linha-fina {
	color: var(--neutro-600);
	font-size: var(--fs-lg);
	line-height: 1.583;
	text-wrap: pretty;
}

/*
 * Crédito (24/09, arranjo 3): autor sozinho em cima; embaixo, uma régua de ponta a ponta com a
 * data na esquerda e o compartilhar na direita. A régua ocupa a largura toda, então o
 * compartilhar fecha o cabeçalho em vez de parecer deslocado.
 */
.credito {
	display: flex;
	flex-direction: column;
	gap: 18px;
	font-size: var(--fs-sm);
	line-height: 1.45;
}

.credito__autor {
	display: flex;
	align-items: center;
	gap: 14px;
}

.credito__avatar {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--neutro-200);
	/* Contorno sutil para a foto não se desfazer no fundo claro. */
	outline: 1px solid rgb(23 20 15 / 0.08);
	outline-offset: -1px;
}

.credito__quem {
	display: flex;
	flex-direction: column;
}

.credito__nome {
	color: var(--neutro-900);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1.35;
}

.credito__cargo {
	color: var(--neutro-600);
}

.credito__regua {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	flex-wrap: wrap;
	min-height: 52px;
	padding-block: 6px;
	border-block: 1px solid var(--neutro-200);
}

.credito__meta {
	color: var(--neutro-500);
	font-variant-numeric: tabular-nums;
}

.credito__meta span {
	margin-inline: 0.4em;
}

/* Compartilhar do topo: link com ícone, sem pílula, com área de toque de 40px. */
.compartilhar--topo {
	margin-right: -8px;
}

.compartilhar--topo .compartilhar__botao {
	min-height: 40px;
	padding: 0 8px;
	border: 0;
	border-radius: 8px;
	color: var(--azul-700);
	font-weight: 500;
}

.compartilhar--topo .compartilhar__botao:hover,
.compartilhar--topo[open] .compartilhar__botao {
	background: var(--neutro-100);
	color: var(--azul-800);
}

.compartilhar--topo .compartilhar__menu {
	top: calc(100% + 4px);
}

/* Em telas estreitas a data e o botão não cabem juntos na régua: fica só o ícone (o texto
   continua para leitores de tela), com área de toque de 40px. */
@media (max-width: 479px) {
	.credito__regua {
		flex-wrap: nowrap;
	}

	.compartilhar--topo .compartilhar__botao {
		width: 40px;
		padding: 0;
		justify-content: center;
	}

	.compartilhar--topo .compartilhar__botao span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.post-abertura {
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* Sai só um pouco da coluna do texto: 820px para 640, a mesma proporção da BBC (932 para 721). */
	width: min(calc(100% - 2 * var(--margem)), 51.25rem);
}

.post-abertura__foto {
	/* A foto principal é a única que sai da coluna do texto, em 16:9 (BBC). */
	aspect-ratio: 16 / 9;
}

/* A legenda volta para a coluna do texto, alinhada com todo o resto. */
.post-abertura .legenda {
	width: min(100%, 40rem);
	margin-inline: auto;
}

/* Corpo da matéria */

.post-corpo {
	display: flex;
	flex-direction: column;
	/* Mais compacto (24/09): Guardian e BBC ficam em 1,40–1,44. Em português e com a Inter,
	   que tem olho grande, 1,6 mantém o conforto sem soltar tanto o texto. */
	gap: 22px;
	padding-block: clamp(3.5rem, 2.6rem + 3.6vw, 5.5rem) 40px;
	color: var(--neutro-600);
	font-size: var(--fs-leitura);
	line-height: 1.6;
}

.post-corpo p,
.post-corpo li,
.legenda,
.marco__conteudo p,
.ladrilho__pe p {
	text-wrap: pretty;
}

.post-corpo > p:first-child {
	color: var(--neutro-800);
	font-size: var(--fs-lg);
	line-height: 1.55;
}

.post-corpo h2 {
	/*
	 * Intertítulo (24/09): maior e mais leve, como no Guardian (28 com título 34) e na BBC
	 * (32 com 38). Quem separa os assuntos é o tamanho e o espaço, sem grafismo. Texto curto
	 * e temático ("Manutenção", "O papel da TRATABEM").
	 */
	margin-top: 36px;
	color: var(--neutro-900);
	font-family: var(--serif);
	font-size: var(--fs-2xl);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.post-corpo h3 {
	margin-top: 16px;
	color: var(--neutro-900);
	font-family: var(--serif);
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.4;
}

.post-corpo a {
	color: var(--azul-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.post-corpo a:hover {
	color: var(--azul-800);
}

.post-corpo ul,
.post-corpo ol {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.post-corpo ul li {
	position: relative;
	padding-left: 1.4em;
}

.post-corpo ul li::before {
	content: "•";
	position: absolute;
	left: 0.2em;
}

.post-corpo ol {
	list-style: decimal;
	padding-left: 1.4em;
}

/* Citação com fonte · 539:318 */
.post-corpo blockquote,
.post-corpo .wp-block-quote {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 8px 0 8px 36px;
	border-left: 4px solid var(--azul-500);
}

.post-corpo blockquote p {
	color: var(--neutro-900);
	font-family: var(--serif);
	font-size: var(--fs-lg);
	line-height: 1.538;
}

.post-corpo blockquote cite {
	display: block;
	margin: 0;
	color: var(--neutro-500);
	font-size: var(--fs-sm);
	font-style: normal;
	line-height: 1.625;
}

/* Imagem dentro do corpo */
.post-corpo .wp-block-image {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.post-corpo .wp-block-image img {
	border-radius: 16px;
	box-shadow: var(--sombra-foto);
}

.post-corpo .wp-element-caption,
.post-corpo figcaption {
	color: var(--neutro-500);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

/*
 * Compartilhar (24/09, benchmark Guardian/BBC): pílula discreta ao lado da data e no fim.
 * <details> nativo; o menu abre embaixo, alinhado à direita no topo e à esquerda no fim.
 */
.compartilhar {
	position: relative;
}

.compartilhar__botao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--neutro-300);
	border-radius: 999px;
	color: var(--neutro-800);
	font-size: var(--fs-sm);
	font-weight: 500;
	list-style: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.compartilhar__botao::-webkit-details-marker {
	display: none;
}

.compartilhar__botao:hover,
.compartilhar[open] .compartilhar__botao {
	border-color: var(--neutro-500);
	background: var(--neutro-100);
}

.compartilhar__botao:focus-visible {
	outline: 2px solid var(--azul-700);
	outline-offset: 2px;
}

.compartilhar__menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 8px);
	right: 0;
	display: flex;
	flex-direction: column;
	min-width: 190px;
	padding: 6px;
	border: 1px solid var(--neutro-200);
	border-radius: 12px;
	background: var(--neutro-0);
	box-shadow: var(--sombra-painel);
	list-style: none;
}

.compartilhar--fim .compartilhar__menu {
	right: auto;
	left: 0;
}

.compartilhar__menu a,
.compartilhar__menu button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--neutro-800);
	font: inherit;
	font-size: var(--fs-sm);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.compartilhar__menu a:hover,
.compartilhar__menu button:hover,
.compartilhar__menu a:focus-visible,
.compartilhar__menu button:focus-visible {
	background: var(--neutro-100);
	outline: none;
}

.compartilhar svg {
	flex: none;
	width: 18px;
	height: 18px;
}

.compartilhar__menu svg {
	color: var(--neutro-500);
}

.post-fim {
	display: flex;
	padding-bottom: 48px;
}

/*
 * Intertítulos alternativos (24/09). Pedido do marketing: um intertítulo com elemento gráfico,
 * sem fio longo. São estilos do bloco Título (Numerado, Com marcador) e o padrão com chapéu.
 */
.post-corpo {
	counter-reset: intertitulo;
}

.post-corpo h2.is-style-igui-numerado {
	counter-increment: intertitulo;
	margin-top: 40px;
}

/* 01, 02, 03…: a numeração é automática, na ordem dos intertítulos numerados. */
.post-corpo h2.is-style-igui-numerado::before {
	content: counter(intertitulo, decimal-leading-zero);
	display: block;
	margin-bottom: 6px;
	color: var(--azul-500);
	font-size: var(--fs-2xl);
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
}

/* Marcador clássico de jornal: quadrado sólido, centrado na primeira linha (24/09, no lugar do oval). */
.post-corpo h2.is-style-igui-marcador {
	position: relative;
	padding-left: 22px;
}

.post-corpo h2.is-style-igui-marcador::before {
	content: "";
	position: absolute;
	top: calc(0.6em - 5px);
	left: 0;
	width: 10px;
	height: 10px;
	background: var(--azul-500);
}

/*
 * Intertítulo de assunto relacionado: o dobro do espaço acima de um H2 comum, porque o
 * assunto se afasta do principal. O gráfico é o quadrado clássico (■) antes do chapéu, sem fio.
 */
.post-corpo .igui-intertitulo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 64px;
}

.post-corpo .igui-intertitulo .igui-chapeu {
	display: flex;
	align-items: center;
	gap: 8px;
}

.post-corpo .igui-intertitulo .igui-chapeu::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	background: var(--azul-500);
}

/* O WordPress põe margem entre blocos de um grupo ou coluna; aqui quem manda é o gap. */
.post-corpo .igui-intertitulo > *,
.post-corpo .wp-block-column > * {
	margin-block: 0;
}

/* Chapéu em caixa baixa: o Elias não gosta de caixa alta acima do título (24/09). */
.post-corpo .igui-chapeu {
	color: var(--azul-700);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 20px;
}

/*
 * S300 e M300: apoio fino (Inter Light 300) em dois tamanhos. Com o peso fino, a cor sobe
 * um tom (neutro-600) para o contraste não cair.
 */
.post-corpo .is-style-igui-s300 {
	color: var(--neutro-600);
	font-size: var(--fs-base);
	font-weight: 300;
	line-height: 1.5;
}

.post-corpo .is-style-igui-m300 {
	color: var(--neutro-600);
	font-size: var(--fs-lg);
	font-weight: 300;
	line-height: 1.45;
}

/* Logo depois de um intertítulo, o apoio encosta nele (8px em vez dos 22px entre blocos). */
.post-corpo > h2 + .is-style-igui-s300,
.post-corpo > h2 + .is-style-igui-m300,
.post-corpo > h3 + .is-style-igui-s300,
.post-corpo > h3 + .is-style-igui-m300 {
	margin-top: -14px;
}

/*
 * Colunas (24/09): no máximo 3 por linha. Ficam na mesma coluna do texto (640px), como tudo
 * na matéria: título, foto, texto e colunas começam e terminam no mesmo lugar (Guardian).
 */
.post-corpo .wp-block-columns {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 32px;
	margin-block: 16px;
	/* Os números em destaque se medem por aqui (cqi). */
	container-type: inline-size;
}

/* Logo depois de um intertítulo, as colunas são o conteúdo dele: sem a margem extra. */
.post-corpo > h2 + .wp-block-columns,
.post-corpo > h3 + .wp-block-columns {
	margin-top: 0;
}

/* Uma 4ª coluna não cabe: a grade fixa em 3 e o resto desce para a linha de baixo. */
.post-corpo .wp-block-columns:has(> .wp-block-column:nth-child(4)) {
	grid-auto-flow: row;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.post-corpo .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.post-corpo .wp-block-column p {
	font-size: var(--fs-base);
	line-height: 1.6;
}

/* Passo a passo: "Passo 1", "Passo 2"… automáticos acima do título de cada coluna. */
.post-corpo .igui-passos {
	counter-reset: passo;
}

.post-corpo .igui-passos > .wp-block-column {
	counter-increment: passo;
}

.post-corpo .igui-passos > .wp-block-column::before {
	content: "Passo " counter(passo);
	color: var(--azul-700);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Números em destaque: a mesma voz dos números do Sobre nós, um degrau abaixo. */
.post-corpo .igui-numeros .wp-block-column {
	gap: 6px;
}

.post-corpo .igui-numeros .igui-numero {
	color: var(--neutro-900);
	font-family: var(--serif);
	/* Cresce com a grade: em 640px dá ~36px, o bastante para "R$ 12,5 mil" caber na coluna. */
	font-size: min(var(--fs-display), 5.6cqi);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: lining-nums;
}

.post-corpo .igui-numeros .igui-numero-rotulo {
	color: var(--neutro-600);
	font-size: var(--fs-base);
	line-height: 1.5;
}

@media (max-width: 767px) {
	.post-corpo .wp-block-columns,
	.post-corpo .wp-block-columns:has(> .wp-block-column:nth-child(4)) {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.post-corpo .igui-numeros .igui-numero {
		font-size: min(var(--fs-display), 12cqi);
	}
}

/* Fontes · 539:330 (padrão de bloco igui/fontes) */
.post-corpo .igui-fontes {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 48px;
	padding-bottom: 32px;
}

.post-corpo .igui-fontes__titulo {
	color: var(--neutro-500) !important;
	font-size: var(--fs-xs) !important;
	font-weight: 600;
	line-height: 18px !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.post-corpo .igui-fontes ul {
	gap: 20px;
}

.post-corpo .igui-fontes li {
	padding-left: 0;
	color: var(--neutro-600);
	font-size: var(--fs-sm);
	line-height: 1.75;
}

.post-corpo .igui-fontes li::before {
	content: none;
}

/* Continue lendo · 539:337 */

.continue-lendo {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-block: clamp(3.5rem, 2.6rem + 3.6vw, 5.5rem);
}

.continue-lendo__titulo {
	font-family: var(--serif);
	font-size: var(--fs-2xl);
	font-weight: 600;
	line-height: 1.182;
}

.grade-cartoes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 33px;
}

.cartao {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
}

.cartao__topo {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cartao__foto {
	height: 190px;
}

.cartao__foto img {
	transition: transform 400ms var(--curva);
}

.cartao__titulo {
	font-family: var(--serif);
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.38;
	text-wrap: balance;
}

/* O cartão inteiro é clicável pelo link do título. */
.cartao__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cartao:hover .cartao__titulo {
	color: var(--azul-700);
}

.cartao:hover .cartao__foto img {
	transform: scale(1.02);
}

.cartao:has(:focus-visible) {
	outline: 2px solid var(--neutro-900);
	outline-offset: 6px;
	border-radius: 16px;
}

.cartao__titulo a:focus-visible {
	outline: none;
}

.cartao__data {
	color: var(--neutro-500);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

@media (max-width: 899px) {
	.grade-cartoes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.grade-cartoes {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* Newsletter · 539:359 */

.newsletter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 32px;
	padding-block: 64px 96px;
}

.newsletter__texto {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 440px;
}

.newsletter__titulo {
	font-family: var(--serif);
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.308;
}

.newsletter__apoio {
	color: var(--neutro-500);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 25.25rem;
}

.campo {
	width: 280px;
	max-width: 100%;
	height: 48px;
	padding-inline: 16px;
	border: 1px solid var(--neutro-300);
	border-radius: 12px;
	background: var(--neutro-0);
	color: var(--neutro-900);
	font: 400 var(--fs-sm) / 1 var(--sans);
}

.campo::placeholder {
	color: var(--neutro-500);
}

.campo:focus-visible {
	border-color: var(--neutro-900);
	outline-offset: 1px;
}

.botao {
	height: 48px;
	min-width: 112px;
	padding-inline: 20px;
	border: 0;
	border-radius: 8px;
	background: var(--neutro-900);
	color: var(--neutro-0);
	font: 600 var(--fs-sm) / 24px var(--sans);
	cursor: pointer;
	transition: background-color 160ms var(--curva), transform 120ms var(--curva);
}

.botao:hover {
	background: var(--neutro-800);
}

.botao:active {
	transform: scale(0.96);
}

.campo:disabled {
	background: var(--neutro-50);
	border-color: var(--neutro-200);
	cursor: not-allowed;
}

.botao:disabled {
	background: var(--neutro-200);
	color: var(--neutro-600);
	cursor: not-allowed;
}

.botao:disabled:active {
	transform: none;
}

.newsletter__aviso {
	flex-basis: 100%;
	color: var(--neutro-600);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

@media (max-width: 599px) {
	.newsletter__form,
	.campo {
		width: 100%;
	}

	.botao {
		width: 100%;
	}
}

/* ---------- Sobre nós · 539:494 ---------- */

.sobre-abertura {
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding-block: clamp(4rem, 1.1rem + 11.8vw, 12rem) 96px;
}

.sobre-abertura__citacao {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sobre-abertura__citacao p {
	/* A aspa de abertura fica fora da margem, e a primeira letra alinha com o resto. */
	text-indent: -0.42em;
	/* Display, não 3xl: é a frase que abre a página e disputa espaço com a foto de 1448px.
	   Sem max-width: com 20em o balance fazia três linhas curtas presas à esquerda. */
	font-family: var(--serif);
	font-size: var(--fs-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* No celular o display dava 6 linhas e enchia a tela antes da foto: volta ao 3xl (28). */
@media (max-width: 599px) {
	.sobre-abertura__citacao p {
		font-size: var(--fs-3xl);
		line-height: 1.167;
	}
}

.sobre-abertura__citacao figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--neutro-500);
	font-size: var(--fs-base);
	line-height: 1.5;
}

.sobre-abertura__citacao figcaption strong {
	color: var(--neutro-900);
	font-size: var(--fs-leitura);
	font-weight: 600;
}

.sobre-abertura__foto {
	aspect-ratio: 1448 / 700;
	border-radius: 16px;
}


/* Números */

.sobre-numeros {
	padding-block: var(--faixa);
}

.sobre-numeros .largura {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(3.5rem, 1.1rem + 9.8vw, 7rem);
}

.sobre-numeros__titulo {
	font-family: var(--serif);
	font-size: var(--fs-3xl);
	font-weight: 600;
	line-height: 1.167;
	text-align: center;
	text-wrap: balance;
}

.sobre-numeros__grade {
	/* Cinco colunas iguais na largura toda, em vez de um bloco apertado no centro. */
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	width: 100%;
	/* Os números crescem com a grade: "1.220+" tem ~3,4em e ocupa no máximo ~88% da coluna. */
	container-type: inline-size;
}

.stat {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 8px;
	padding-block: 6px;
	text-align: center;
}

.stat + .stat {
	position: relative;
}

.stat + .stat::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: var(--neutro-300);
}

.stat dd {
	font-family: var(--serif);
	font-size: min(5rem, 5.2cqi);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: lining-nums;
}

.stat dt {
	font-size: var(--fs-leitura);
	font-weight: 500;
	line-height: 1.65;
}

@media (max-width: 1100px) {
	.sobre-numeros__grade {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 24px;
		width: 100%;
	}

	/* Duas colunas: o mesmo tamanho para todos, inclusive o último, que ocupa a linha sozinho. */
	.stat dd {
		font-size: min(5rem, 12cqi);
	}

	.stat + .stat::before {
		content: none;
	}

	.stat:last-child {
		grid-column: 1 / -1;
	}
}

/* História */

.sobre-historia {
	padding-block: 96px;
}

.linha-do-tempo {
	display: flex;
	flex-direction: column;
}

.marco {
	display: grid;
	grid-template-columns: 260fr 588fr 560fr;
	gap: 64px;
	padding-block: 48px;
	border-top: 1px solid var(--neutro-300);
}

.marco__ano {
	font-size: var(--fs-2xl);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.marco__conteudo {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.marco__titulo {
	font-family: var(--serif);
	font-size: var(--fs-xl);
	font-weight: 600;
	line-height: 1.375;
	text-wrap: balance;
}

.marco__conteudo p {
	color: var(--neutro-800);
	font-size: var(--fs-base);
	line-height: 1.65;
	text-wrap: pretty;
}

.marco__visual figure {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.marco__foto {
	aspect-ratio: 560 / 300;
}

.marco__marcas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.marco__marca {
	aspect-ratio: 179 / 119;
}


.marco__numero {
	font-family: var(--serif);
	font-size: var(--fs-3xl);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.015em;
}

.marco__numero-rotulo {
	margin-top: 4px;
	color: var(--neutro-500);
	font-size: var(--fs-base);
	line-height: 1.65;
}

@media (max-width: 1023px) {
	.marco {
		grid-template-columns: 1fr 1fr;
		gap: 24px 40px;
	}

	.marco__ano {
		grid-column: 1 / -1;
	}
}

@media (max-width: 699px) {
	.marco {
		grid-template-columns: 1fr;
		padding-block: 40px;
	}
}

/* Prêmios */

.sobre-premios {
	padding-block: 96px;
}

.sobre-premios .largura {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.campo-escuro {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: clamp(2.5rem, 1.5rem + 4.1vw, 4.5rem) clamp(1.5rem, -0.2rem + 7.1vw, 5rem);
	border-radius: 24px;
	background: var(--neutro-900);
	box-shadow: var(--sombra-painel);
	color: var(--neutro-0);
}

.campo-escuro :focus-visible {
	outline-color: var(--neutro-0);
}

.campo-escuro__manchete {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.campo-escuro__manchete h2 {
	font-family: var(--serif);
	font-size: var(--fs-3xl);
	font-weight: 600;
	line-height: 1.167;
	text-wrap: balance;
}

.campo-escuro__manchete p {
	color: var(--neutro-300);
	font-size: var(--fs-base);
	line-height: 1.65;
}

.instituicao {
	display: grid;
	grid-template-columns: 48px 708fr 540fr;
	gap: 40px;
	padding-block: 28px;
	border-top: 1px solid var(--neutro-600);
}

.instituicao__indice {
	color: var(--neutro-400);
	font-size: var(--fs-sm);
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.instituicao__nome-coluna {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.instituicao__nome {
	font-family: var(--serif);
	font-size: var(--fs-2xl);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.instituicao__nome sup {
	margin-left: 8px;
	color: var(--azul-100);
	font-family: var(--sans);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	vertical-align: 1.1em;
}

.instituicao__expansao {
	color: var(--neutro-400);
	font-size: var(--fs-sm);
	line-height: 1.3;
}

.distincoes {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: var(--fs-base);
	line-height: 1.65;
}

.distincoes li {
	display: flex;
	gap: 16px;
	color: var(--neutro-300);
}

.distincoes li span:first-child {
	flex: 1;
}

.distincoes__qtd {
	width: 44px;
	color: var(--neutro-0);
	font-weight: 600;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
	.instituicao {
		grid-template-columns: 32px 1fr;
		gap: 16px 24px;
	}

	.distincoes {
		grid-column: 2;
	}
}

@media (max-width: 599px) {
	.instituicao {
		gap: 16px 12px;
	}

	.distincoes {
		grid-column: 1 / -1;
	}
}

.ladrilhos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.ladrilho {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-height: 320px;
	padding: 36px 40px;
	border-radius: 24px;
	background: var(--neutro-0);
	box-shadow: 0 0 0 1px var(--neutro-200), var(--sombra-foto);
}

.ladrilho__instituicao {
	color: var(--neutro-500);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
}

.ladrilho__numero {
	color: var(--neutro-500);
	font-family: var(--serif);
	font-size: var(--fs-display);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
}

.ladrilho__pe {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--neutro-800);
	font-size: var(--fs-base);
	line-height: 1.65;
}

.ladrilho__anos {
	color: var(--neutro-500);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.5;
}

@media (max-width: 899px) {
	.ladrilhos {
		grid-template-columns: 1fr;
	}

	.ladrilho {
		min-height: 0;
		padding: 28px;
	}
}

/* Imprensa */

.sobre-imprensa {
	padding-block: 96px clamp(6rem, 3.1rem + 11.8vw, 12rem);
	scroll-margin-top: 72px;
}

.sobre-imprensa .secao-cabecalho__titulo {
	max-width: 820px;
}

.clippings {
	margin-bottom: 64px;
	border-bottom: 1px solid var(--neutro-100);
}

.clippings li {
	border-top: 1px solid var(--neutro-100);
}

.clipping {
	display: grid;
	grid-template-columns: 320px 1fr 170px 56px;
	align-items: start;
	padding-block: 32px;
}

.clipping__veiculo {
	color: var(--azul-700);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1.65;
}

.clipping__titulo {
	font-family: var(--serif);
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.4;
	text-wrap: balance;
}

.clipping__data,
.clipping__seta {
	color: var(--neutro-600);
	font-size: var(--fs-base);
	line-height: 1.65;
	text-align: right;
}

a.clipping:hover .clipping__titulo {
	color: var(--azul-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

div.clipping .clipping__seta {
	visibility: hidden;
}

@media (max-width: 1023px) {
	.clipping {
		grid-template-columns: 1fr auto;
		gap: 8px 24px;
	}

	.clipping__veiculo {
		grid-column: 1 / -1;
		font-size: var(--fs-sm);
	}

	.clipping__data {
		grid-column: 1;
		grid-row: 3;
		text-align: left;
		font-size: var(--fs-sm);
	}

	.clipping__seta {
		grid-column: 2;
		grid-row: 2;
	}
}

/* O nome · 539:735 */

.sobre-nome {
	padding-block: clamp(4.5rem, 2.9rem + 6.3vw, 8rem);
	background: var(--neutro-900);
	color: var(--neutro-0);
}

.sobre-nome .largura {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
}

.sobre-nome__titulo {
	font-family: var(--serif);
	font-size: var(--fs-3xl);
	font-weight: 600;
	line-height: 1.167;
	text-align: center;
}

.laminas {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(6px, 1vw, 16px);
	width: 100%;
}

.lamina {
	position: relative;
	flex: 0 1 152px;
	aspect-ratio: 152 / var(--altura);
	overflow: hidden;
	border: 1px solid oklch(1 0 0 / 0.1);
	border-radius: clamp(8px, 1vw, 16px);
}

/* Degradê da base de cada lâmina. */
.lamina::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(0 23 36 / 0) 62%, rgb(0 23 36 / 0.34) 100%);
}

.lamina--letras {
	border-color: oklch(1 0 0 / 0.14);
}

.lamina--letras::after {
	background: rgb(0 63 94 / 0.6);
}

.lamina__camada {
	position: absolute;
	max-width: none;
}

.lamina__camada--base,
.lamina__camada--cobre {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lamina__camada--base {
	object-position: bottom;
}

.lamina__letras {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--azul-100);
	font-family: var(--serif);
	font-size: clamp(1.25rem, 3.2vw, 2.875rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-align: center;
	text-shadow: 0 1px 5px rgb(0 10 15 / 0.1);
}

/* No celular as sete lâminas não cabem lado a lado: viram uma faixa que rola. */
@media (max-width: 699px) {
	.laminas {
		justify-content: flex-start;
		gap: 10px;
		width: calc(100% + 2 * var(--margem));
		margin-inline: calc(-1 * var(--margem));
		padding-inline: var(--margem);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--margem);
		scrollbar-width: none;
	}

	.laminas::-webkit-scrollbar {
		display: none;
	}

	.lamina {
		flex: 0 0 104px;
		scroll-snap-align: start;
		border-radius: 12px;
	}

	.lamina__letras {
		font-size: 2.5rem;
	}
}

.sobre-nome__texto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 880px;
	text-align: center;
}

.sobre-nome__grafias {
	color: var(--neutro-100);
	font-family: var(--serif);
	font-size: var(--fs-xl);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.sobre-nome__texto p:last-child {
	color: var(--neutro-300);
	font-size: var(--fs-lg);
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

/* Marcas da Rede · 539:753 */

.sobre-marcas {
	padding-block: var(--faixa);
}

.sobre-marcas__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.sobre-marcas__lista img {
	width: auto;
	max-height: 70px;
}

@media (max-width: 1100px) {
	.sobre-marcas__lista {
		justify-content: center;
		gap: 32px 40px;
	}

	.sobre-marcas__lista img {
		max-height: 52px;
	}
}

/* ---------- Arquivo · categoria, busca e todas as matérias ---------- */

.arquivo {
	padding-block: clamp(2rem, 1.45rem + 2.2vw, 3.5rem) var(--faixa);
}

.arquivo-cabecalho {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 1rem + 1vw, 2rem);
	margin-bottom: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);
}

/* Identidade: nome e o que a editoria cobre, juntos. */
.arquivo-cabecalho__identidade {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.arquivo-cabecalho__titulo {
	font-family: var(--serif);
	font-size: var(--fs-3xl);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.arquivo-cabecalho__titulo a:hover {
	color: var(--azul-700);
}

.arquivo-cabecalho__olho {
	max-width: 46rem;
	color: var(--neutro-600);
	font-size: var(--fs-base);
	line-height: 1.5;
	text-wrap: pretty;
}

.arquivo-cabecalho__busca {
	max-width: 36rem;
	margin-top: 10px;
}

/*
 * Navegação: uma faixa só entre fios, com os assuntos à esquerda e a contagem à direita,
 * como a faixa de subseções do NYT.
 */
.arquivo-cabecalho__faixa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 46px;
	border-top: 1px solid var(--neutro-900);
	border-bottom: 1px solid var(--neutro-200);
}

.subcategorias {
	min-width: 0;
}

.subcategorias__lista {
	display: flex;
	column-gap: 28px;
}

.subcategorias__link {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 45px;
	color: var(--neutro-600);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.subcategorias__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--neutro-300);
	transform: scaleX(0);
	transition: transform 200ms var(--curva);
}

.subcategorias__link:hover {
	color: var(--neutro-900);
}

.subcategorias__link:hover::after {
	transform: scaleX(1);
}

.subcategorias__link[aria-current="page"] {
	color: var(--neutro-900);
	font-weight: 600;
}

.subcategorias__link[aria-current="page"]::after {
	transform: scaleX(1);
	background: var(--azul-700);
}

.arquivo-cabecalho__meta {
	flex-shrink: 0;
	padding-block: 12px;
	color: var(--neutro-500);
	font-size: var(--fs-sm);
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Abertura: destaque e recentes, com o fio vertical da home. */

.arquivo-abertura {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	margin-bottom: clamp(3rem, 2.2rem + 3.2vw, 5rem);
}

.arquivo-abertura__destaque {
	gap: 16px;
	padding-right: 40px;
}

.arquivo-abertura__destaque .destaque__linha-fina {
	max-width: 40rem;
}

.arquivo-abertura__recentes {
	display: flex;
	flex-direction: column;
	padding-left: 40px;
	border-left: 1px solid var(--neutro-200);
}

/* Subcategoria com uma matéria só: sem coluna ao lado, o destaque ocupa a largura. */
.arquivo-abertura:not(:has(.arquivo-abertura__recentes)) {
	grid-template-columns: minmax(0, 1fr);
}

.arquivo-abertura:not(:has(.arquivo-abertura__recentes)) .arquivo-abertura__destaque {
	padding-right: 0;
}

.recente {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-block: 22px;
	border-bottom: 1px solid var(--neutro-200);
}

.recente:last-child {
	border-bottom: 0;
}

.recente__titulo {
	font-family: var(--serif);
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.36;
	text-wrap: pretty;
}

/* Lista */

.arquivo-lista .coluna__rotulo {
	margin-bottom: 8px;
}

.visualmente-oculto + .lista-materias > li:first-child .linha-materia {
	padding-top: 0;
}

.lista-materias > li + li {
	border-top: 1px solid var(--neutro-200);
}

.linha-materia {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(9rem, 4rem + 13vw, 18rem);
	gap: 40px;
	align-items: start;
	padding-block: 32px;
}

/* Sem foto, o texto não se estica para a coluna vazia: a medida de leitura continua a mesma. */
.linha-materia__texto {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 46rem;
}

.linha-materia--sem-foto .linha-materia__texto {
	grid-column: 1 / -1;
}

.linha-materia__titulo {
	font-family: var(--serif);
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}

.linha-materia__linha-fina {
	color: var(--neutro-600);
	font-size: var(--fs-sm);
	line-height: 1.55;
	text-wrap: pretty;
}

.linha-materia__meta {
	color: var(--neutro-500);
	font-size: var(--fs-sm);
	line-height: 1.4;
}

.linha-materia__linha-fina + .linha-materia__meta {
	margin-top: 4px;
}

.linha-materia__foto {
	position: relative;
	grid-column: 2;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 12px;
	background: var(--neutro-100);
}

.linha-materia__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
	pointer-events: none;
}

.linha-materia__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--curva);
}

/* A linha inteira é clicável pelo link do título, como no cartão. */
.linha-materia__titulo a::after,
.recente__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.linha-materia:hover .linha-materia__titulo,
.recente:hover .recente__titulo {
	color: var(--azul-700);
}

.linha-materia:hover .linha-materia__foto img {
	transform: scale(1.02);
}

.linha-materia:has(:focus-visible),
.recente:has(:focus-visible) {
	outline: 2px solid var(--neutro-900);
	outline-offset: 4px;
	border-radius: 4px;
}

.linha-materia__titulo a:focus-visible,
.recente__titulo a:focus-visible {
	outline: none;
}

.arquivo__vazio {
	color: var(--neutro-500);
	font-size: var(--fs-lg);
}

@media (max-width: 1023px) {
	.arquivo-abertura {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}

	.arquivo-abertura__destaque {
		padding-right: 0;
	}

	.arquivo-abertura__recentes {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 599px) {
	.linha-materia {
		grid-template-columns: minmax(0, 1fr) 6.5rem;
		gap: 16px;
		padding-block: 24px;
	}

	.linha-materia__linha-fina {
		display: none;
	}

	/* No celular a contagem sai da faixa, que vira uma linha de assuntos que rola. */
	.arquivo-cabecalho__faixa:has(.subcategorias) .arquivo-cabecalho__meta {
		display: none;
	}

	.subcategorias {
		margin-inline: calc(-1 * var(--margem));
		padding-inline: var(--margem);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.subcategorias__lista {
		column-gap: 22px;
	}

	.linha-materia__foto {
		aspect-ratio: 1;
		border-radius: 8px;
	}
}

.pagination {
	margin-top: 64px;
	padding-top: 24px;
	border-top: 1px solid var(--neutro-200);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: var(--fs-sm);
	font-weight: 500;
}

.pagination a {
	color: var(--azul-700);
}

.pagination .current {
	color: var(--neutro-900);
}

/* ---------- Rodapé · 204:87 ---------- */

.rodape {
	padding-block: 80px 48px;
	border-top: 1px solid var(--neutro-200);
	background: var(--neutro-0);
}

.rodape__interno {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.rodape__topo {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 48px;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--neutro-200);
}

.rodape__marca {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 340px;
}

.rodape__logo {
	display: block;
	width: max-content;
	padding: 2px;
}

.rodape__logo img {
	width: 84px;
	height: 57px;
}

.rodape__assinatura {
	color: var(--neutro-500);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.rodape__colunas {
	display: flex;
	gap: 88px;
}

.rodape__coluna ul {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 14px;
}

.rodape__titulo {
	color: var(--neutro-500);
	font-family: var(--sans);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.5;
}

.rodape__coluna li {
	max-width: 170px;
	color: var(--neutro-900);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.rodape__coluna--rede li {
	color: var(--azul-700);
}

.rodape__coluna a[aria-current="page"] {
	color: var(--azul-700);
	font-weight: 500;
}

/* No desktop, cada link ocupa a entrelinha inteira (37px) sem invadir o vizinho. */
.rodape__coluna a {
	position: relative;
}

.rodape__coluna a::after {
	content: "";
	position: absolute;
	inset: -7px -8px;
}

.rodape__coluna a:hover {
	color: var(--azul-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rodape__legal {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 32px;
	color: var(--neutro-500);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.rodape__legal a:hover {
	color: var(--neutro-900);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Em tela de toque, cada link ganha 44px de altura sem mudar o texto. */
@media (pointer: coarse) {
	.rodape__coluna ul {
		gap: 0;
		margin-top: 4px;
	}

	.rodape__coluna li > a,
	.rodape__coluna li > span {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.rodape__coluna a::after {
		inset: 0 -8px;
	}

	.link-seta {
		padding-block: 12px;
	}
}

@media (max-width: 599px) {
	.rodape {
		padding-top: 56px;
	}

	.rodape__colunas {
		gap: 48px;
	}
}

/* ---------- Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.link-seta:hover span,
	.linha-manchete:hover .linha-manchete__seta,
	.destaque__link:hover .destaque__foto img,
	.materia__link:hover .materia__foto img,
	.cartao:hover .cartao__foto img,
	.linha-materia:hover .linha-materia__foto img {
		transform: none;
	}
}