/*
 * FOFOCA GEEK — visual do portal
 *
 * Tipos: Anybody (títulos grandes, estreita e pesada) e Schibsted Grotesk
 * (texto, listas e interface). As duas ficam em assets/fonts, com licença OFL.
 * Cores: preto e laranja da marca. O cabeçalho e o rodapé são pretos nos dois
 * temas; no tema claro só o miolo da página fica branco.
 */

@font-face {
	font-family: "Anybody";
	src: url("../fonts/anybody.woff2") format("woff2");
	font-weight: 500 900;
	font-stretch: 50% 100%;
	font-display: swap;
}
@font-face {
	font-family: "Schibsted Grotesk";
	src: url("../fonts/schibsted-grotesk.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Schibsted Grotesk";
	src: url("../fonts/schibsted-grotesk-italic.woff2") format("woff2");
	font-weight: 400 900;
	font-style: italic;
	font-display: swap;
}

:root {
	--laranja: #fc4e1d;
	--fundo: #000;
	--texto: #f2f0eb;
	--apoio: #a29e97;
	--linha: #2d2b29;
	--destaque: #ff6a3c;
	--sem-foto: #1b1a19;

	--topo-fundo: #000;
	--topo-texto: #f2f0eb;
	--topo-apoio: #a29e97;
	--topo-linha: #2d2b29;
	--topo-hover: #1f1e1d;

	--titulo: "Anybody", "Arial Narrow", sans-serif;
	--texto-fonte: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--largura: 1240px;
	--margem: 16px;
	color-scheme: dark;
}

html[data-fg-site-theme="light"] {
	--fundo: #fff;
	--texto: #141414;
	--apoio: #5e5a54;
	--linha: #e3e0da;
	--destaque: #c9360f;
	--sem-foto: #efede9;
	color-scheme: light;
}

@media (min-width: 768px) {
	:root { --margem: 24px; }
}

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

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

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

/* Página curta (home sem matérias, 404): o rodapé fica no fim da tela, não no meio. */
body.fg-portal {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	margin: 0;
	background: var(--fundo);
	color: var(--texto);
	font-family: var(--texto-fonte);
	font-size: 1.0625rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* :where() deixa estas regras sem peso, para qualquer componente abaixo vencer. */
:where(.fg-portal) img { display: block; max-width: 100%; height: auto; }
:where(.fg-portal) a { color: inherit; text-decoration: none; }
:where(.fg-portal) :is(h1, h2, h3, p, ul, ol) { margin: 0; }
:where(.fg-portal) :is(ul, ol) { padding: 0; list-style: none; }
:where(.fg-portal) button { font: inherit; color: inherit; }
:where(.fg-portal) :focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; border-radius: 2px; }

.fg-caixa {
	width: 100%;
	max-width: calc(var(--largura) + var(--margem) * 2);
	margin-inline: auto;
	padding-inline: var(--margem);
}

.fg-pular {
	position: absolute;
	left: var(--margem);
	top: -60px;
	z-index: 50;
	padding: 10px 14px;
	background: var(--laranja);
	color: #000;
	font-weight: 700;
}
.fg-pular:focus { top: 8px; }

/* Títulos ganham sublinhado ao passar o mouse, como link de jornal. */
.fg-portal h2 a:hover,
.fg-portal h3 a:hover,
.fg-mais-lidas a:hover,
.fg-bloco li a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .14em;
}

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

.fg-topo {
	background: var(--topo-fundo);
	color: var(--topo-texto);
	border-bottom: 1px solid var(--topo-linha);
}

.fg-topo__faixa {
	border-bottom: 1px solid var(--topo-linha);
	color: var(--topo-apoio);
	font-size: .875rem;
}
.fg-topo__faixa .fg-caixa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 38px;
}
.fg-topo__faixa nav { display: flex; gap: 22px; }

/* Data do dia: dia da semana em destaque, data em peso médio, relógio depois
   de um fio (o mesmo separador da assinatura das matérias). */
.fg-topo__hoje { display: flex; align-items: center; margin: 0; }
.fg-topo__data { font-weight: 500; }
.fg-topo__data b { color: var(--topo-texto); font-weight: 700; }
/* Relógio: os seis dígitos com o mesmo desenho e a mesma cor dos números da
   data. Cada dígito ocupa uma casa da mesma largura, para a hora não tremer
   quando um número troca; só os dois-pontos, em laranja, piscam. */
.fg-relogio {
	min-width: 8ch;
	margin-left: 14px;
	padding-left: 14px;
	border-left: 1px solid var(--topo-linha);
	color: var(--topo-texto);
	font-weight: 700;
	white-space: nowrap;
}
.fg-relogio span { display: inline-block; width: 1ch; text-align: center; }
.fg-relogio i { margin-inline: .04em; color: var(--laranja); font-style: normal; animation: fg-pisca 1s steps(1) infinite; }
@keyframes fg-pisca { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
	.fg-relogio i { animation: none; }
}
.fg-topo__faixa a:hover { color: var(--topo-texto); }

.fg-topo__linha {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 36px;
}

.fg-marca { margin: 0; line-height: 0; }
.fg-marca img { width: auto; height: 34px; }

.fg-editorias ul { display: flex; gap: 26px; }
.fg-editorias a {
	display: block;
	padding: 25px 0 21px;
	border-bottom: 3px solid transparent;
	font-size: .9375rem;
	font-weight: 600;
	white-space: nowrap;
}
.fg-editorias a:hover { color: var(--laranja); }
.fg-editorias a[aria-current="page"] { border-bottom-color: var(--laranja); }

.fg-topo__acoes { display: flex; gap: 2px; margin-right: -8px; }

.fg-botao-icone {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.fg-botao-icone:hover { background: var(--topo-hover); }
.fg-icone { display: block; }

/* O botão de tema mostra o tema para onde vai: sol no escuro, lua no claro. */
.fg-icone--lua { display: none; }
html[data-fg-site-theme="light"] .fg-icone--sol { display: none; }
html[data-fg-site-theme="light"] .fg-icone--lua { display: block; }

@media (max-width: 1099px) {
	.fg-topo__faixa { display: none; }
	.fg-topo__linha {
		grid-template-columns: minmax(0, 1fr) auto;
		min-height: 58px;
	}
	.fg-marca img { height: 28px; }
	.fg-editorias {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-inline: calc(var(--margem) * -1);
		border-top: 1px solid var(--topo-linha);
		overflow-x: auto;
		scrollbar-width: none;
	}
	.fg-editorias::-webkit-scrollbar { display: none; }
	.fg-editorias ul {
		width: max-content;
		gap: 22px;
		padding-inline: var(--margem);
	}
	.fg-editorias a { padding: 12px 0 9px; }
}

/* Busca e menu (os dois são <dialog>) ------------------------------ */

:where(.fg-portal) dialog {
	padding: 0;
	border: 0;
	color: var(--topo-texto);
	background: var(--topo-fundo);
}
:where(.fg-portal) dialog::backdrop { background: rgb(0 0 0 / .6); }

.fg-busca {
	width: 100%;
	max-width: none;
	margin: 0;
	border-bottom: 1px solid var(--topo-linha);
}
.fg-busca form {
	position: relative;
	padding-block: 28px 32px;
}
.fg-busca label {
	display: block;
	margin-bottom: 12px;
	font-family: var(--titulo);
	font-size: 1.75rem;
	font-weight: 800;
	font-stretch: 75%;
	line-height: 1;
}
.fg-busca__campo { display: flex; gap: 8px; max-width: 760px; }
.fg-busca input {
	flex: 1;
	min-width: 0;
	height: 52px;
	padding: 0 16px;
	border: 1px solid #4a4744;
	border-radius: 6px;
	background: #111;
	color: var(--topo-texto);
	font: inherit;
	font-size: 1.125rem;
}
.fg-busca input:focus { outline: 2px solid var(--laranja); outline-offset: 0; border-color: transparent; }
.fg-busca button[type="submit"] {
	height: 52px;
	padding: 0 22px;
	border: 0;
	border-radius: 6px;
	background: var(--laranja);
	color: #000;
	font-weight: 700;
	cursor: pointer;
}
.fg-busca__fechar { position: absolute; top: 18px; right: calc(var(--margem) - 8px); }

.fg-menu {
	width: min(420px, 100vw);
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0 0 0 auto;
	padding: 0 24px 40px;
	overflow-y: auto;
}
.fg-menu__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--topo-linha);
	font-weight: 700;
}
.fg-menu__topo .fg-botao-icone { margin-right: -10px; }
.fg-menu nav { padding-block: 18px; border-bottom: 1px solid var(--topo-linha); }
.fg-menu nav:last-child { border-bottom: 0; }
.fg-menu h2 {
	margin-bottom: 10px;
	color: var(--topo-apoio);
	font-size: .875rem;
	font-weight: 600;
}
.fg-menu li a { display: block; padding-block: 7px; font-weight: 600; }
.fg-menu li a:hover { color: var(--laranja); }
.fg-menu__editorias { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.fg-menu__editorias a { font-family: var(--titulo); font-size: 1.375rem; font-weight: 800; font-stretch: 75%; line-height: 1.1; }

@media (prefers-reduced-motion: no-preference) {
	.fg-menu[open] { animation: fg-menu-entra .22s ease-out; }
	@keyframes fg-menu-entra { from { transform: translateX(32px); opacity: 0; } }
}

/* Aviso da prévia da redação --------------------------------------- */

.fg-previa {
	padding: 10px var(--margem);
	background: var(--laranja);
	color: #000;
	font-size: .9375rem;
	text-align: center;
}
.fg-previa a { font-weight: 700; text-decoration: underline !important; }
.fg-rascunho {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border: 1px solid currentColor;
	border-radius: 4px;
	color: var(--apoio);
	font-size: .75rem;
	font-weight: 600;
	vertical-align: 2px;
}

/* Peças comuns ----------------------------------------------------- */

.fg-chapeu {
	display: inline-block;
	margin-bottom: 6px;
	color: var(--destaque);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.2;
}
a.fg-chapeu:hover { text-decoration: underline; }

/* A bolha de fala do logo, usada só no chapéu da manchete. */
.fg-bolha {
	position: relative;
	display: inline-block;
	margin-bottom: 22px;
	padding: 6px 12px 7px;
	border-radius: 10px;
	background: var(--laranja);
	color: #000;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
}
.fg-bolha::after {
	content: "";
	position: absolute;
	left: 14px;
	bottom: -9px;
	border-style: solid;
	border-width: 10px 12px 0 0;
	border-color: var(--laranja) transparent transparent transparent;
}
a.fg-bolha:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.fg-portal time { color: var(--apoio); font-size: .875rem; }

.fg-assinatura { color: var(--apoio); font-size: .9375rem; }
.fg-assinatura b { color: var(--texto); font-weight: 600; }

.fg-linha-fina { color: var(--apoio); font-size: 1.1875rem; line-height: 1.45; }

/* Fotos: mesma proporção em toda a página, cantos levemente arredondados. */
.fg-manchete__foto,
.fg-destaque__foto,
.fg-linha__foto,
.fg-bloco__foto {
	display: block;
	overflow: hidden;
	border-radius: 6px;
	background: var(--sem-foto);
}
.fg-manchete__foto img,
.fg-destaque__foto img,
.fg-linha__foto img,
.fg-bloco__foto img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.fg-sem-foto {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
}
.fg-sem-foto img { width: 22% !important; max-width: 64px; aspect-ratio: 1 !important; opacity: .55; }

.fg-secao__topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-top: 12px;
	border-top: 4px solid var(--texto);
}
.fg-secao__topo h2 {
	font-family: var(--titulo);
	font-size: 2rem;
	font-weight: 800;
	font-stretch: 72%;
	line-height: 1;
	letter-spacing: -.005em;
}

/* Manchete --------------------------------------------------------- */

.fg-abertura { padding-block: 32px 8px; }

.fg-manchete {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
	gap: 40px;
}
.fg-manchete__titulo {
	margin-bottom: 18px;
	font-family: var(--titulo);
	font-size: clamp(2.5rem, 1.3rem + 2.4vw, 4rem);
	font-weight: 800;
	font-stretch: 70%;
	line-height: .98;
	letter-spacing: -.01em;
	text-wrap: balance;
}
.fg-manchete .fg-linha-fina { margin-bottom: 16px; max-width: 34em; }

/* Destaques: três matérias abaixo da manchete */
.fg-destaques {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--linha);
}
.fg-destaque__foto { margin-bottom: 14px; }
.fg-destaque h3 {
	margin-bottom: 8px;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.005em;
	text-wrap: pretty;
}

/* Últimas + Mais lidas --------------------------------------------- */

.fg-colunas {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	align-items: start;
	gap: 56px;
	padding-block: 48px 8px;
}
.fg-colunas > .fg-lista:only-child { grid-column: 1 / -1; max-width: 860px; }

.fg-linha {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) 216px;
	gap: 24px;
	padding-block: 22px;
	border-bottom: 1px solid var(--linha);
}
.fg-linha > time { padding-top: 1px; font-variant-numeric: tabular-nums; }
.fg-linha h3 {
	margin-bottom: 6px;
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.005em;
	text-wrap: pretty;
}
.fg-linha p { color: var(--apoio); font-size: 1rem; line-height: 1.45; }
.fg-linha__foto { align-self: start; }

.fg-mais-lidas { position: sticky; top: 24px; }
.fg-mais-lidas li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 12px;
	padding-block: 16px;
	border-bottom: 1px solid var(--linha);
}
.fg-mais-lidas__n {
	color: var(--destaque);
	font-family: var(--titulo);
	font-size: 2.75rem;
	font-weight: 850;
	font-stretch: 60%;
	line-height: .85;
}
.fg-mais-lidas a { font-size: 1.0625rem; font-weight: 700; line-height: 1.28; }

/* Blocos de editoria ----------------------------------------------- */

.fg-blocos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px 32px;
	padding-block: 56px 8px;
}
.fg-blocos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Em duas colunas a foto ficaria enorme: ela vai para o lado do título. */
.fg-blocos--2 .fg-bloco__principal {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 20px;
}
.fg-blocos--2 .fg-bloco__foto { margin-bottom: 0; }
.fg-bloco .fg-secao__topo { margin-bottom: 18px; }
.fg-bloco .fg-secao__topo h2 { font-size: 1.75rem; }
.fg-bloco .fg-secao__topo a:hover { color: var(--destaque); text-decoration: none; }
.fg-bloco__foto { margin-bottom: 14px; }
.fg-bloco__principal h3 {
	margin-bottom: 4px;
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.22;
	text-wrap: pretty;
}
.fg-bloco ul { margin-top: 14px; }
.fg-bloco li { padding-block: 12px; border-top: 1px solid var(--linha); }
.fg-bloco li a { font-weight: 600; line-height: 1.32; }
.fg-bloco__mais {
	display: inline-block;
	margin-top: 8px;
	color: var(--destaque);
	font-size: .9375rem;
	font-weight: 700;
}
.fg-bloco__mais:hover { text-decoration: underline; }

/* Topo das páginas de lista (editoria, assunto, autor, data) ------- */

.fg-arquivo-topo { padding-block: 44px 28px; border-bottom: 1px solid var(--linha); }
.fg-arquivo-topo h1 {
	margin-bottom: 14px;
	font-family: var(--titulo);
	font-size: clamp(3.5rem, 2rem + 5vw, 6.75rem);
	font-weight: 850;
	font-stretch: 66%;
	line-height: .9;
	letter-spacing: -.01em;
}
.fg-arquivo-topo__rotulo {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--destaque);
	font-weight: 700;
}
a.fg-arquivo-topo__rotulo:hover { text-decoration: underline; }
.fg-arquivo-topo__frase { max-width: 40em; color: var(--apoio); font-size: 1.25rem; line-height: 1.4; }
.fg-arquivo-topo__autor img { width: 80px; height: 80px; margin-bottom: 16px; border-radius: 50%; }

.fg-assuntos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-top: 22px; }
.fg-assuntos > span { color: var(--apoio); font-size: .9375rem; }
.fg-assuntos ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fg-assuntos a { font-weight: 700; }
.fg-assuntos a:hover { color: var(--destaque); }

.fg-abertura--arquivo .fg-manchete__titulo { font-size: clamp(2.25rem, 1.4rem + 1.8vw, 3.25rem); }

.fg-paginas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 32px; }
.fg-paginas a,
.fg-paginas span {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 14px;
	border: 1px solid var(--linha);
	border-radius: 6px;
	font-weight: 600;
}
.fg-paginas a:hover { border-color: var(--texto); }
.fg-paginas .current { background: var(--texto); border-color: var(--texto); color: var(--fundo); }
.fg-paginas .dots { border: 0; }

/* Página sem matérias ------------------------------------------------ */

.fg-vazio { padding-block: 64px 24px; }
.fg-vazio h2 {
	margin-bottom: 10px;
	font-family: var(--titulo);
	font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
	font-weight: 800;
	font-stretch: 72%;
	line-height: 1;
}
.fg-vazio > p { color: var(--apoio); font-size: 1.125rem; }
.fg-vazio .fg-lista { max-width: 860px; margin-top: 24px; border-top: 4px solid var(--texto); }

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

.fg-rodape {
	margin-top: 80px;
	padding-bottom: 64px; /* espaço para o botão "Privacidade", fixo no canto */
	border-top: 4px solid var(--laranja);
	background: var(--topo-fundo);
	color: var(--topo-texto);
	font-size: .9375rem;
}
.fg-rodape__grade {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 40px;
	padding-block: 48px 40px;
}
.fg-rodape__marca img { width: auto; height: 32px; margin-bottom: 16px; }
.fg-rodape__marca p { max-width: 30em; color: var(--topo-apoio); line-height: 1.5; text-wrap: pretty; }
.fg-rodape h2 { margin-bottom: 12px; font-size: .9375rem; font-weight: 700; }
.fg-rodape li a { display: inline-block; padding-block: 4px; color: var(--topo-apoio); }
.fg-rodape li a:hover { color: var(--topo-texto); text-decoration: underline; }
.fg-rodape__editorias ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
body.fg-portal > main { flex: 1 0 auto; }

.fg-rodape__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 24px;
}
.fg-rodape__base::before {
	content: "";
	flex-basis: 100%;
	height: 1px;
	margin-bottom: 14px;
	background: var(--topo-linha);
}
.fg-rodape__base p { color: var(--topo-apoio); font-size: .8125rem; }

/* Busca e 404 ------------------------------------------------------ */

.fg-so-leitor {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.fg-busca-grande { display: flex; gap: 8px; max-width: 760px; margin-top: 20px; }
.fg-busca-grande input {
	flex: 1;
	min-width: 0;
	height: 56px;
	padding: 0 18px;
	border: 1px solid var(--linha);
	border-radius: 6px;
	background: transparent;
	color: var(--texto);
	font: inherit;
	font-size: 1.1875rem;
}
.fg-busca-grande input:focus { outline: 2px solid var(--laranja); outline-offset: 0; border-color: transparent; }
.fg-busca-grande button {
	height: 56px;
	padding: 0 24px;
	border: 0;
	border-radius: 6px;
	background: var(--laranja);
	color: #000;
	font-weight: 700;
	cursor: pointer;
}

.fg-filtros { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 24px; }
.fg-filtros a {
	padding: 6px 0;
	border-bottom: 3px solid transparent;
	font-weight: 600;
}
.fg-filtros a span { color: var(--apoio); font-weight: 400; }
.fg-filtros a:hover { color: var(--destaque); }
.fg-filtros a[aria-current="page"] { border-bottom-color: var(--laranja); }

.fg-linha .fg-rascunho { margin: 0 0 6px; }

/* Selo de apuração e fonte ---------------------------------------- */

.fg-selo {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 8px 2px;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.3;
	vertical-align: 1px;
	white-space: nowrap;
}
/* Oficial: borda cheia. Rumor e vazamento: tracejada, porque ainda não é fato. */
.fg-selo--oficial { color: var(--texto); }
.fg-selo--oficial::before { content: "✓ "; }
.fg-selo--rumor { border-style: dashed; color: var(--destaque); }
.fg-selo--tipo { padding-inline: 0; border-color: transparent; color: var(--apoio); }
.fg-bolha + .fg-selo { margin-left: 10px; vertical-align: 6px; }

.fg-fonte {
	margin-top: 28px;
	color: var(--apoio);
	font-size: 1rem;
}
.fg-fonte a { color: var(--texto); font-weight: 600; text-decoration: underline; text-underline-offset: .16em; }
.fg-fonte a:hover { color: var(--destaque); }

/* Universos -------------------------------------------------------- */

.fg-universos { display: flex; flex-wrap: wrap; gap: 10px; }
.fg-universos a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--linha);
	border-radius: 999px;
	font-family: var(--titulo);
	font-size: 1.125rem;
	font-weight: 800;
	font-stretch: 78%;
	line-height: 1.1;
}
.fg-universos a:hover,
.fg-universos a[aria-current="page"] { border-color: var(--laranja); color: var(--destaque); }
.fg-universos-home,
.fg-outros-universos { padding-top: 56px; }
.fg-universos-home .fg-secao__topo,
.fg-outros-universos .fg-secao__topo { margin-bottom: 18px; }
.fg-menu .fg-universos { gap: 8px; }
.fg-menu .fg-universos a { padding: 6px 12px; border-color: var(--topo-linha); font-size: 1rem; }

/* Página da matéria ------------------------------------------------- */

.fg-materia__topo {
	display: grid;
	grid-template-columns: minmax(0, 880px) auto;
	align-items: start;
	gap: 32px;
	padding-block: 40px 28px;
}
.fg-materia__chapeu { min-height: 1.2em; }
.fg-materia h1 {
	margin: 4px 0 18px;
	font-family: var(--titulo);
	font-size: clamp(2.5rem, 1.4rem + 2.7vw, 4.25rem);
	font-weight: 800;
	font-stretch: 72%;
	line-height: .98;
	letter-spacing: -.01em;
	text-wrap: balance;
}
.fg-materia .fg-linha-fina { max-width: 40em; margin-bottom: 26px; font-size: 1.3125rem; }

.fg-materia__assinatura { display: flex; align-items: center; gap: 14px; color: var(--apoio); font-size: .9375rem; }
.fg-materia__assinatura p { display: flex; flex-wrap: wrap; row-gap: 2px; }
.fg-materia__assinatura p > span + span { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--linha); }
.fg-materia__assinatura b { color: var(--texto); font-weight: 600; }
.fg-materia__assinatura a:hover { text-decoration: underline; }
.fg-avatar { flex: none; border-radius: 50%; background: #000; object-fit: cover; }

/* Nota do review: o mesmo laranja da bolha da manchete. */
.fg-nota {
	display: grid;
	place-items: center;
	align-content: center;
	width: 104px;
	height: 104px;
	border-radius: 12px;
	background: var(--laranja);
	color: #000;
}
.fg-nota span { font-size: .875rem; font-weight: 700; }
.fg-nota strong { font-family: var(--titulo); font-size: 3rem; font-weight: 850; font-stretch: 70%; line-height: .9; }
.fg-nota-curta {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--laranja);
	color: #000;
	font-size: .8125rem;
	font-weight: 800;
	vertical-align: 1px;
}

.fg-materia__foto { margin-top: 0; margin-bottom: 0; }
.fg-materia__foto img { width: 100%; max-height: 760px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--sem-foto); }
.fg-materia__foto figcaption { margin-top: 10px; color: var(--apoio); font-size: .875rem; line-height: 1.4; }
.fg-materia__foto figcaption span { margin-left: 6px; }

.fg-materia__grade {
	display: grid;
	grid-template-columns: 200px minmax(0, 720px);
	gap: 48px;
	padding-top: 40px;
}
.fg-materia__lado { position: sticky; top: 24px; align-self: start; }

@media (min-width: 1100px) {
	/* Título e assinatura começam na mesma linha do texto. */
	.fg-materia__topo { padding-left: calc(var(--margem) + 248px); }
}

.fg-compartilhar { display: grid; gap: 8px; }
.fg-compartilhar h2,
.fg-indice h2 { margin-bottom: 4px; color: var(--apoio); font-size: .875rem; font-weight: 600; }
.fg-compartilhar a,
.fg-compartilhar button {
	display: block;
	padding: 9px 14px;
	border: 1px solid var(--linha);
	border-radius: 6px;
	background: transparent;
	font-size: .9375rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}
.fg-compartilhar a:hover,
.fg-compartilhar button:hover { border-color: var(--texto); }

.fg-indice { margin-top: 32px; }
.fg-indice a {
	display: block;
	padding: 6px 0 6px 12px;
	border-left: 2px solid var(--linha);
	font-size: .9375rem;
	line-height: 1.3;
}
.fg-indice a:hover { border-left-color: var(--laranja); }

/* Texto da matéria */
.fg-texto { font-size: 1.1875rem; line-height: 1.65; overflow-wrap: break-word; }
.fg-texto > * + * { margin-top: 1.1em; }
.fg-texto h2 {
	margin-top: 1.8em;
	font-family: var(--titulo);
	font-size: 2rem;
	font-weight: 800;
	font-stretch: 74%;
	line-height: 1.05;
	scroll-margin-top: 24px;
}
.fg-texto h3 { margin-top: 1.6em; font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.fg-texto h2 + *,
.fg-texto h3 + * { margin-top: .6em; }
.fg-texto a { color: var(--destaque); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.fg-texto a:hover { text-decoration-thickness: 2px; }
.fg-texto strong,
.fg-texto b { font-weight: 700; }
.fg-texto ul,
.fg-texto ol { padding-left: 1.3em; list-style: revert; }
.fg-texto li + li { margin-top: .4em; }
.fg-texto li::marker { color: var(--destaque); }
.fg-texto blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 4px solid var(--laranja); font-size: 1.3125rem; line-height: 1.45; }
.fg-texto blockquote p + p { margin-top: .6em; }
.fg-texto blockquote cite { display: block; margin-top: 8px; color: var(--apoio); font-size: .9375rem; font-style: normal; }
.fg-texto figure { margin: 1.8em 0; }
.fg-texto img { border-radius: 6px; }
.fg-texto figcaption,
.fg-texto .wp-element-caption { margin-top: 8px; color: var(--apoio); font-size: .875rem; line-height: 1.4; }
.fg-texto iframe,
.fg-texto video { max-width: 100%; }
.fg-texto .wp-block-embed__wrapper { position: relative; }
.fg-texto .wp-has-aspect-ratio .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.fg-texto .wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.fg-texto hr { margin: 2em 0; border: 0; border-top: 1px solid var(--linha); }
.fg-texto table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.fg-texto th,
.fg-texto td { padding: 10px 8px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.fg-texto th { font-weight: 700; }
.fg-texto code,
.fg-texto pre { padding: .1em .35em; border-radius: 4px; background: var(--sem-foto); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; }
.fg-texto pre { padding: 14px; overflow-x: auto; }
.fg-texto .wp-block-pullquote { padding: 20px 0; border-top: 4px solid var(--texto); border-bottom: 1px solid var(--linha); text-align: left; }
.fg-texto .wp-block-pullquote blockquote { padding: 0; border: 0; font-family: var(--titulo); font-size: 1.875rem; font-weight: 800; font-stretch: 74%; line-height: 1.1; }
.fg-texto .post-password-form input[type="password"] { height: 46px; margin-top: 6px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 6px; background: transparent; color: inherit; font: inherit; }
.fg-texto .post-password-form input[type="submit"] { height: 46px; padding: 0 18px; border: 0; border-radius: 6px; background: var(--laranja); color: #000; font: inherit; font-weight: 700; cursor: pointer; }

/* Caixas que os plugins colocam no texto: aviso de patrocínio, "Em resumo",
   resumo da Rápida e fonte. Mesmo desenho para todas. */
.fg-texto .framexp-sponsored-disclosure,
.fg-texto .fgnx-geo-public,
.fg-texto .fgnx-quick-public,
.fg-texto .fgnx-source-public {
	margin: 0 0 1.4em;
	padding: 16px 18px;
	border: 0;
	border-left: 4px solid var(--laranja);
	border-radius: 0;
	background: var(--sem-foto);
	font-size: 1.0625rem;
	line-height: 1.5;
}
.fg-texto .fgnx-source-public { margin: 1.6em 0 0; }
.fg-texto .framexp-sponsored-disclosure strong { color: var(--destaque); }
.fg-texto .fgnx-public-kicker {
	display: block;
	margin-bottom: 6px;
	color: var(--destaque);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: lowercase;
}
.fg-texto .fgnx-public-kicker::first-letter { text-transform: uppercase; }
.fg-texto .fgnx-public-fact { margin: 0 0 6px; font-size: 1.1875rem; font-weight: 700; }
.fg-texto .fgnx-geo-public ul { margin: 8px 0 0; padding-left: 1.2em; }

.fg-materia__assuntos { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--linha); }
.fg-materia__assuntos h2 { margin-bottom: 12px; color: var(--apoio); font-size: .9375rem; font-weight: 600; }
.fg-materia__assuntos ul { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-materia__assuntos a {
	display: inline-block;
	padding: 6px 13px;
	border: 1px solid var(--linha);
	border-radius: 999px;
	font-size: .9375rem;
	font-weight: 600;
}
.fg-materia__assuntos a:hover { border-color: var(--laranja); color: var(--destaque); }

.fg-autor { display: flex; align-items: flex-start; gap: 16px; margin-top: 32px; padding-block: 22px; border-block: 1px solid var(--linha); }
.fg-autor h2 { margin-bottom: 4px; font-size: 1.125rem; font-weight: 700; }
.fg-autor h2 a:hover { text-decoration: underline; }
.fg-autor p { color: var(--apoio); font-size: .9375rem; }

.fg-relacionadas { padding-top: 64px; }
.fg-relacionadas .fg-secao__topo { margin-bottom: 20px; }
.fg-relacionadas__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.fg-relacionadas .fg-destaque h3 { font-size: 1.125rem; }

@media (max-width: 1099px) {
	.fg-materia__grade { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 760px; }
	.fg-materia__lado { position: static; order: 2; margin-top: 36px; }
	.fg-compartilhar { grid-template-columns: repeat(4, auto); justify-content: start; }
	.fg-compartilhar h2 { grid-column: 1 / -1; }
	.fg-indice { display: none; }
	.fg-relacionadas__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.fg-materia__topo { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 24px 20px; }
	.fg-nota { grid-row: 1; width: auto; height: auto; padding: 6px 12px; grid-auto-flow: column; justify-content: start; gap: 8px; }
	.fg-nota strong { font-size: 1.75rem; }
	.fg-materia h1 { font-size: clamp(2.125rem, 1.2rem + 4.6vw, 2.75rem); }
	.fg-materia .fg-linha-fina { font-size: 1.125rem; }
	.fg-materia__assinatura { align-items: flex-start; }
	.fg-materia__assinatura p { flex-direction: column; }
	.fg-materia__assinatura p > span + span { margin-left: 0; padding-left: 0; border-left: 0; }
	.fg-materia__foto { padding-inline: 0; }
	.fg-materia__foto img { border-radius: 0; }
	.fg-materia__foto figcaption { padding-inline: var(--margem); }
	.fg-materia__grade { padding-top: 28px; }
	.fg-texto { font-size: 1.125rem; }
	.fg-texto h2 { font-size: 1.75rem; }
	.fg-compartilhar { grid-template-columns: 1fr 1fr; }
	.fg-relacionadas { padding-top: 48px; }
	.fg-relacionadas__grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Páginas institucionais e políticas ------------------------------ */

.fg-texto__abertura { font-size: 1.3125rem; line-height: 1.5; }
.fg-aviso { padding: 14px 18px; border-left: 4px solid var(--laranja); background: var(--sem-foto); font-size: 1rem; line-height: 1.5; }
.fg-politica { padding-top: 32px; }

.fg-institucional { max-width: 1000px; padding-top: 32px; }
.fg-institucional__abertura { max-width: 34em; font-size: 1.375rem; line-height: 1.45; }
.fg-institucional__secao { margin-top: 56px; }
.fg-institucional__secao .fg-secao__topo { margin-bottom: 20px; }

.fg-itens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.fg-item h3,
.fg-etapas h3 { margin-bottom: 6px; font-size: 1.1875rem; font-weight: 700; }
.fg-item p,
.fg-etapas p { color: var(--apoio); font-size: 1rem; }

/* Etapas são uma sequência de verdade, então levam número. */
.fg-etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: etapa; }
.fg-etapas li { counter-increment: etapa; }
.fg-etapas li::before {
	content: counter(etapa);
	display: block;
	margin-bottom: 8px;
	color: var(--destaque);
	font-family: var(--titulo);
	font-size: 2.5rem;
	font-weight: 850;
	font-stretch: 60%;
	line-height: 1;
}

.fg-canais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 32px; }
.fg-canal { padding-block: 22px; border-top: 1px solid var(--linha); }
.fg-canal h2 { margin-bottom: 4px; font-size: 1.25rem; font-weight: 700; }
.fg-canal p { margin-bottom: 10px; color: var(--apoio); }
.fg-canal a { color: var(--destaque); font-weight: 700; text-decoration: underline; text-underline-offset: .16em; }

.fg-institucional__fim { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 48px; }
.fg-institucional__fim .fg-aviso { flex: 1 1 360px; }
.fg-botao {
	display: inline-block;
	padding: 14px 22px;
	border-radius: 6px;
	background: var(--laranja);
	color: #000;
	font-weight: 700;
}
.fg-botao:hover { text-decoration: underline; }

.fg-veja { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fg-veja a { display: block; padding-top: 14px; border-top: 1px solid var(--linha); }
.fg-veja strong { display: block; margin-bottom: 4px; font-size: 1.125rem; }
.fg-veja span { color: var(--apoio); font-size: .9375rem; }
.fg-veja a:hover strong { color: var(--destaque); }

.fg-mapa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 8px; }
.fg-mapa h2 { margin-bottom: 10px; padding-top: 10px; border-top: 4px solid var(--texto); font-family: var(--titulo); font-size: 1.5rem; font-weight: 800; font-stretch: 74%; }
.fg-mapa li a { display: inline-block; padding-block: 5px; font-weight: 600; }
.fg-mapa li a:hover { color: var(--destaque); }

.fg-pagina-comum { padding-top: 32px; }
.fg-pagina-comum .fg-texto { max-width: 720px; }

/* Formulários colocados nas páginas (contato, anuncie, parcerias). */
.fg-anexos form { display: grid; gap: 14px; max-width: 640px; }
.fg-anexos input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.fg-anexos select,
.fg-anexos textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--linha);
	border-radius: 6px;
	background: transparent;
	color: var(--texto);
	font: inherit;
	font-size: 1rem;
}
.fg-anexos textarea { min-height: 140px; }
.fg-anexos input[type="submit"],
.fg-anexos button[type="submit"] {
	justify-self: start;
	padding: 12px 22px;
	border: 0;
	border-radius: 6px;
	background: var(--laranja);
	color: #000;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

@media (max-width: 1099px) {
	.fg-itens,
	.fg-veja,
	.fg-mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fg-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.fg-itens,
	.fg-veja,
	.fg-mapa,
	.fg-canais,
	.fg-etapas { grid-template-columns: minmax(0, 1fr); }
	.fg-institucional__abertura { font-size: 1.1875rem; }
}

/* Privacidade --------------------------------------------------------
 * O botão e o painel vêm do framexp-core. Aqui eles ganham as cores da
 * marca: preto nos dois temas, como o cabeçalho, e laranja nas ações.
 */

.fg-portal .fg-privacy__dock {
	left: 12px;
	bottom: 12px;
	min-height: 30px;
	padding: 5px 11px;
	border: 1px solid var(--topo-linha);
	background: #000;
	color: var(--topo-apoio);
	font-family: var(--texto-fonte);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: 0;
	box-shadow: none;
	backdrop-filter: none;
}
.fg-portal .fg-privacy__dock:hover,
.fg-portal .fg-privacy__dock:focus-visible { border-color: var(--laranja); color: var(--topo-texto); }
.fg-portal .fg-privacy__banner,
.fg-portal .fg-privacy__modal {
	border-color: var(--topo-linha);
	border-radius: 10px;
	background: #000;
	color: var(--topo-texto);
	font-family: var(--texto-fonte);
	box-shadow: none;
	backdrop-filter: none;
}
.fg-portal .fg-privacy__banner-copy p { font-size: .875rem; }
.fg-portal .fg-privacy__button {
	border-radius: 6px;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}
.fg-portal .fg-privacy__button--primary { background: var(--laranja); color: #000; }
.fg-portal .fg-privacy__button--secondary,
.fg-portal .fg-privacy__button--ghost,
.fg-portal .fg-privacy__close { border: 1px solid var(--topo-linha); background: transparent; color: var(--topo-texto); }
.fg-portal .fg-privacy__eyebrow,
.fg-portal .fg-privacy__status { color: var(--laranja); letter-spacing: 0; text-transform: none; font-size: .8125rem; }
.fg-portal .fg-privacy__switch input:checked + span[aria-hidden="true"] { background: var(--laranja); }
.fg-portal .fg-privacy__switch input:focus-visible + span[aria-hidden="true"] { outline-color: var(--laranja); }

/* Tablet ------------------------------------------------------------ */

@media (max-width: 1099px) {
	.fg-colunas { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.fg-mais-lidas { position: static; }
	.fg-blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fg-rodape__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fg-rodape__marca { grid-column: 1 / -1; }
}

/* Celular ----------------------------------------------------------- */

@media (max-width: 767px) {
	body.fg-portal { font-size: 1rem; }

	.fg-abertura { padding-top: 16px; }
	.fg-manchete { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.fg-manchete__foto { margin-inline: calc(var(--margem) * -1); border-radius: 0; }
	.fg-manchete__titulo { margin-bottom: 14px; font-size: clamp(2.25rem, 1.2rem + 5vw, 2.75rem); }
	.fg-bolha { margin-bottom: 18px; }
	.fg-linha-fina { font-size: 1.0625rem; }

	/* Destaques e lista viram linhas com a foto pequena à direita. */
	.fg-destaques { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 24px; padding-top: 0; }
	.fg-destaque,
	.fg-linha {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 112px;
		grid-template-areas: "texto foto" "quando foto";
		align-items: start;
		gap: 4px 14px;
		padding-block: 16px;
		border-bottom: 1px solid var(--linha);
	}
	.fg-destaque__foto,
	.fg-linha__foto { grid-area: foto; margin: 0; }
	.fg-destaque__foto img,
	.fg-linha__foto img { aspect-ratio: 1; }
	.fg-destaque__texto,
	.fg-linha__texto { grid-area: texto; }
	.fg-destaque h3,
	.fg-linha h3 { margin-bottom: 4px; font-size: 1.125rem; line-height: 1.25; }
	.fg-linha p { display: none; }
	.fg-linha > time { grid-area: quando; padding: 0; }
	.fg-chapeu { margin-bottom: 4px; font-size: .875rem; }

	.fg-colunas { padding-top: 40px; gap: 40px; }
	.fg-secao__topo h2 { font-size: 1.75rem; }

	.fg-blocos { grid-template-columns: minmax(0, 1fr) !important; gap: 40px; padding-top: 40px; }

	.fg-arquivo-topo { padding-block: 28px 20px; }
	.fg-arquivo-topo__frase { font-size: 1.0625rem; }

	.fg-rodape { margin-top: 56px; padding-bottom: 88px; }
	.fg-rodape__grade { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-top: 36px; }
	.fg-rodape__editorias { grid-column: 1 / -1; }
}