/* Portal: estilo do site inteiro. Celular primeiro; a partir de 768px e 1024px a grade abre. */

/* Libre Franklin: herdeira da Franklin Gothic, a letra clássica de manchete. Uma família só no site inteiro. */
@font-face { font-family: "Franklin"; src: url("fontes/franklin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Franklin"; src: url("fontes/franklin-italico.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
	/* asfalto com a faixa amarela: o amarelo nunca é cor de texto sobre branco, só faixa, marca e destaque */
	--asfalto: #16181B;
	--asfalto-2: #26292E;
	--amarelo: #FFC72C;
	--amarelo-forte: #E9AE00;
	--urucum: #D2401E;
	--papel: #F5F4F0;
	--branco: #fff;
	--texto: #16181B;
	--cinza: #5E6369;
	--linha: #E1DED6;
	--f-titulo: "Franklin", "Libre Franklin", "Franklin Gothic Medium", Arial, sans-serif;
	--f-ui: var(--f-titulo);
	--f-texto: var(--f-titulo);
	--largura: 1200px;
	--raio: 12px;   /* canto das fotos, igual ao g1 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--branco); color: var(--texto); font: 16px/1.5 var(--f-ui); text-rendering: optimizeLegibility; }
body.travado { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--urucum); outline-offset: 2px; }

.caixa { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: 16px; }
.so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--asfalto); color: #fff; padding: 10px 14px; border-radius: 4px; }
.pular:focus { top: 8px; }
.icone { flex: none; }

/* ---------- faixa de cima ---------- */
.faixa { background: var(--asfalto); color: #fff; font-size: 13px; }
.faixa__linha { display: flex; align-items: center; gap: 16px; min-height: 34px; }
.faixa__data { display: inline-block; }
.faixa__data::first-letter { text-transform: uppercase; }
.faixa__lema { display: none; opacity: .75; }
.faixa__cidade { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.faixa__cidade .icone { width: 16px; height: 16px; }
.faixa__cidade select { background: transparent; border: 0; color: #fff; font-size: 13px; font-weight: 700; padding: 4px 2px; cursor: pointer; }
.faixa__cidade select option { color: var(--texto); }

/* ---------- topo ---------- */
.topo { background: var(--asfalto); color: #fff; position: relative; }
.topo__linha { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 60px; }
.topo__botao { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: #fff; padding: 8px 0; cursor: pointer; font-weight: 700; font-size: 14px; justify-self: start; }
.topo__botao span { display: none; }
.topo__botao--busca { justify-self: end; }
.marca { font-family: var(--f-titulo); font-weight: 800; font-size: 25px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; text-decoration: none; color: #fff; white-space: nowrap; padding-top: 4px; }
.marca b { font-weight: 900; }
.busca-topo { background: var(--branco); border-bottom: 1px solid var(--linha); }
.busca-topo__linha, .busca-pagina { display: flex; gap: 8px; padding-block: 12px; }
.busca-topo input, .busca-pagina input { flex: 1; min-width: 0; border: 2px solid var(--linha); border-radius: 6px; padding: 10px 14px; font-size: 17px; background: #fff; color: var(--texto); }   /* a busca mora dentro do topo escuro: sem isto a letra herdava o branco */
.busca-topo input::placeholder, .busca-pagina input::placeholder { color: var(--cinza); opacity: 1; }
.busca-topo input:focus, .busca-pagina input:focus { border-color: var(--asfalto); outline: none; }
.busca-topo button, .busca-pagina button { border: 0; border-radius: 6px; background: var(--asfalto); color: #fff; font-weight: 700; padding: 0 18px; cursor: pointer; }

.editorias { background: var(--branco); border-bottom: 1px solid var(--linha); }
.editorias__lista { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.editorias__lista::-webkit-scrollbar { display: none; }
.editorias__lista a { display: block; padding: 12px 0 10px; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--asfalto); border-bottom: 3px solid transparent; }
.editorias__lista a:hover, .editorias__lista .current-menu-item a, .editorias__lista .current-cat a { color: var(--asfalto); border-bottom-color: var(--asfalto); }

/* ---------- gaveta (menu lateral) ---------- */
.gaveta { position: fixed; inset: 0; z-index: 50; background: rgba(22, 24, 27, 0); transition: background-color .28s ease; }   /* só o fundo escurece; o painel entra sólido */
.gaveta__painel { position: absolute; inset: 0 auto 0 0; width: min(320px, 86vw); background: var(--branco); overflow-y: auto; padding: 16px 20px 32px; transform: translateX(-100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); box-shadow: 4px 0 24px rgba(0, 0, 0, .18); }
.gaveta.aberta { background: rgba(22, 24, 27, .55); }
.gaveta.aberta .gaveta__painel { transform: none; }   /* entra deslizando da esquerda, como o menu do g1 */
.gaveta__fechar { background: none; border: 0; padding: 6px; margin: -6px 0 8px -6px; cursor: pointer; color: var(--asfalto); }
.gaveta__titulo { font-family: var(--f-titulo); font-weight: 900; text-transform: uppercase; color: var(--asfalto); font-size: 14px; letter-spacing: .04em; margin: 18px 0 6px; }
.gaveta__lista a { display: block; padding: 9px 0; text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--linha); }
.gaveta__lista--cidades { columns: 2; column-gap: 16px; }
.gaveta__lista--cidades a { font-weight: 400; }

/* ---------- anúncio: o espaço é reservado antes da imagem chegar ---------- */
.espaco-topo { padding-block: 12px; }
.anuncio { margin: 24px auto; text-align: center; }
.espaco-topo .anuncio { margin: 0; }
.anuncio__rotulo { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); margin-bottom: 4px; }
.anuncio__link, .anuncio__vago { display: block; width: 100%; max-width: var(--cel-l); aspect-ratio: var(--cel); margin-inline: auto; overflow: hidden; border-radius: 8px; }
.anuncio__link img { width: 100%; height: 100%; object-fit: cover; }
.anuncio__vago { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 16px; background: var(--papel); border: 2px dashed var(--linha); text-decoration: none; color: var(--cinza); font-size: 13px; line-height: 1.3; }
.anuncio__vago strong { font-family: var(--f-titulo); font-weight: 900; font-size: 18px; color: var(--asfalto); text-transform: uppercase; }
.anuncio__vago:hover { border-color: var(--asfalto); }

/* ---------- peças comuns ---------- */
.chapeu { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--asfalto); margin-bottom: 6px; }
.secao-titulo { font-family: var(--f-titulo); font-weight: 900; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; color: var(--asfalto); border-top: 4px solid var(--asfalto); padding-top: 10px; margin-bottom: 8px; }
.secao-titulo a { text-decoration: none; }
.vazio { padding: 32px 0; color: var(--cinza); }

/* ---------- cartões de matéria ---------- */
.cartao__foto { display: block; overflow: hidden; border-radius: var(--raio); background: var(--papel); aspect-ratio: 16 / 9; }
.cartao__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.cartao:hover .cartao__foto img { transform: scale(1.03); }
.cartao__titulo { font-family: var(--f-titulo); font-weight: 800; line-height: 1.15; color: var(--asfalto); }
.cartao__titulo a { text-decoration: none; }
.cartao__titulo a:hover { color: var(--asfalto); }
.cartao__titulo a::after { content: ""; position: absolute; inset: 0; }   /* o cartão inteiro vira clicável */
.cartao { position: relative; }
.cartao__meta { position: relative; z-index: 1; font-size: 13px; color: var(--cinza); margin-top: 6px; }
.cartao__meta a { text-decoration: none; font-weight: 700; color: var(--asfalto); }
.cartao__meta span { margin-inline: 3px; }
.cartao__fina { font-family: var(--f-texto); font-size: 16px; line-height: 1.5; color: #3A4540; margin-top: 8px; }

.cartao--manchete .cartao__texto { padding-top: 12px; }
.cartao--manchete .cartao__titulo { font-size: 28px; font-weight: 900; line-height: 1.08; letter-spacing: -.005em; }
.cartao--destaque .cartao__texto { padding-top: 10px; }
.cartao--destaque .cartao__titulo { font-size: 20px; }
.cartao--compacto .cartao__texto { padding-top: 8px; }
.cartao--compacto .cartao__titulo { font-size: 17px; }
.cartao--compacto .chapeu { font-size: 11.5px; margin-bottom: 4px; }

.cartao--lista { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--linha); }   /* foto à esquerda: é ela que chama o olho primeiro */
.cartao--lista .cartao__foto { align-self: start; }
.cartao--lista .cartao__titulo { font-size: 17px; }
.cartao--lista .cartao__fina { display: none; }
.cartao--lista:not(:has(.cartao__foto)) { grid-template-columns: 1fr; }

/* só título e horário, para a lateral */
.cartao--numero { padding-block: 12px; border-bottom: 1px solid var(--linha); }
.cartao--numero .cartao__titulo { font-size: 16px; font-weight: 600; line-height: 1.25; }
.cartao--numero .chapeu { font-size: 11px; margin-bottom: 4px; }

/* texto por cima da foto (abertura da home). A foto escurece de baixo para cima e a letra ganha sombra:
   o título fica legível em foto clara ou escura. Sem foto, o fundo é o asfalto. */
.cartao--sobre { display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; border-radius: var(--raio); background: var(--asfalto); color: #fff; }
.cartao--sobre .cartao__foto { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; border-radius: 0; }
.cartao--sobre .cartao__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,13,15,.94) 0%, rgba(12,13,15,.78) 30%, rgba(12,13,15,.25) 62%, rgba(12,13,15,0) 82%); }
.cartao--sobre .cartao__texto { width: 100%; padding: 18px 18px 16px; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.cartao--sobre .cartao__titulo, .cartao--sobre .cartao__titulo a, .cartao--sobre .cartao__titulo a:hover { color: #fff; }
.cartao--sobre .chapeu { background: var(--amarelo); box-shadow: none; color: var(--asfalto); padding: 3px 7px 2px; border-radius: 2px; text-shadow: none; }
.cartao--sobre .cartao__fina { color: rgba(255,255,255,.92); }
.cartao--sobre .cartao__meta { color: rgba(255,255,255,.85); }
.cartao--sobre .cartao__meta a { color: #fff; }
/* link extra: outra matéria do mesmo assunto, por cima do clique do cartão inteiro */
.cartao__extra { position: relative; z-index: 1; margin-top: 8px; font-family: var(--f-ui); font-size: 15px; line-height: 1.35; }
.cartao__extra a { display: inline-flex; gap: 8px; color: #fff; text-decoration: none; }
.cartao__extra a::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .5em; border-radius: 50%; background: var(--amarelo); }
.cartao__extra a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- página inicial ---------- */
.abertura { display: grid; gap: 12px; padding-block: 16px 8px; }
.abertura__lado { display: grid; gap: 12px; }
.abertura .cartao--manchete { aspect-ratio: 1 / 1; }
.abertura .cartao--destaque { aspect-ratio: 16 / 10; }
.abertura .cartao--manchete .cartao__titulo { font-size: 27px; }
.abertura .cartao--manchete .cartao__fina, .abertura .cartao--destaque .cartao__fina { display: none; }
.abertura .cartao--destaque .cartao__titulo { font-size: 19px; }
/* notícia grande: 1 fixada toma o topo inteiro, 2 fixadas dividem o topo (ver front-page.php) */
.abertura--1 .cartao--manchete .cartao__fina { display: block; }
.abertura--2 .cartao--manchete { aspect-ratio: 4 / 3; }
.abertura--2 .cartao--manchete .cartao__titulo { font-size: 23px; }

.duas-colunas { display: grid; gap: 32px; margin-top: 24px; }
.abertura + .duas-colunas { margin-top: 4px; }   /* na home, a lista começa logo abaixo dos destaques, sem título */
.principal { min-width: 0; }
.lateral { display: flex; flex-direction: column; gap: 28px; }
.lateral .anuncio { margin: 0; }
.lateral__fixo { flex: 1; }   /* o último anúncio ocupa o resto da coluna e acompanha a rolagem até o fim */
.lateral__fixo .anuncio, .trilho .anuncio { position: sticky; top: 16px; }
.trilho { min-height: var(--trilho, 680px); }   /* altura do anúncio + 430px (portal_trilho): ele fica parado uns 400px de rolagem e segue */

/* quadros de serviço */
.lado-carregando { color: var(--cinza); font-size: 14px; padding-block: 12px; }
.lado-fonte { font-size: 12px; color: var(--cinza); margin-top: 10px; }
.lado-tempo, .lado-economia { min-height: 260px; }   /* reserva a altura antes dos números chegarem */
.quadro-lista { padding-block: 24px 8px; border-bottom: 1px solid var(--linha); }   /* tempo e economia no meio da lista, no celular */

/* celular: os três destaques do topo com o mesmo peso, foto mais baixa e o texto embaixo dela, como no g1.
   No computador e no tablet continua o texto por cima da foto. */
@media (max-width: 767px) {
	.abertura { gap: 22px; }
	.abertura .cartao.cartao--sobre { display: block; aspect-ratio: auto; background: none; color: var(--asfalto); overflow: visible; border-radius: 0; isolation: auto; }
	.abertura .cartao--sobre .cartao__foto { position: relative; inset: auto; z-index: auto; display: block; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; }
	.abertura .cartao--sobre .cartao__foto::after { display: none; }
	.abertura .cartao--sobre .cartao__texto { padding: 10px 0 0; text-shadow: none; }
	.abertura .cartao--sobre .cartao__titulo, .abertura .cartao--sobre .cartao__titulo a, .abertura .cartao--sobre .cartao__titulo a:hover { color: var(--asfalto); font-size: 22px; line-height: 1.2; }
	.abertura .cartao--sobre .chapeu { background: none; padding: 0; border-radius: 0; box-shadow: inset 0 -.42em 0 var(--amarelo); }
	.abertura .cartao--sobre .cartao__fina { display: none; }
	.abertura .cartao--sobre .cartao__meta { color: var(--cinza); }
	.abertura .cartao--sobre .cartao__meta a, .abertura .cartao--sobre .cartao__extra a { color: var(--asfalto); }
}
.lado-tempo__cidade select { width: 100%; border: 1px solid var(--linha); border-radius: 6px; padding: 7px 8px; font-size: 15px; font-weight: 700; background: #fff; color: var(--asfalto); margin-top: 2px; }
.tempo-hoje { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 12px; padding-top: 8px; }
.tempo-hoje .icone-tempo { color: var(--amarelo-forte); }
.tempo-hoje__graus { display: grid; line-height: 1; }
.tempo-hoje__graus strong { font-family: var(--f-titulo); font-weight: 800; font-size: 34px; color: var(--asfalto); }
.tempo-hoje__graus span { font-size: 16px; color: var(--cinza); margin-top: 4px; }
.tempo-hoje__resumo { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--asfalto); }
.tempo-hoje__resumo small { display: block; font-weight: 400; color: var(--cinza); font-size: 12.5px; margin-top: 3px; }
.tempo-dias { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; border-top: 1px solid var(--linha); }
.tempo-dias li { display: grid; justify-items: center; gap: 4px; padding-top: 10px; font-size: 13px; color: var(--cinza); }
.tempo-dias li + li { border-left: 1px solid var(--linha); }
.tempo-dias b { color: var(--asfalto); }
.tempo-dias .icone-tempo { color: var(--asfalto); }
.tempo-dias strong { color: var(--asfalto); }

.eco-moedas li { display: grid; grid-template-columns: 1fr auto 64px; align-items: baseline; gap: 8px; padding-block: 9px; border-bottom: 1px solid var(--linha); font-size: 15px; }
.eco-moedas strong, .eco-bolsa strong { font-family: var(--f-titulo); font-weight: 700; color: var(--asfalto); }
.lado-economia em { font-style: normal; font-weight: 700; font-size: 13px; text-align: right; }
.lado-economia em.sobe { color: #0B7A3E; }
.lado-economia em.cai { color: var(--urucum); }
.eco-bolsa { padding-top: 10px; }
.eco-bolsa p { display: grid; grid-template-columns: 1fr auto 64px; align-items: baseline; gap: 8px; font-size: 15px; }
.eco-bolsa svg { display: block; width: 100%; height: 48px; margin-top: 8px; }
.eco-bolsa polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.eco-bolsa polyline.sobe { stroke: #0B7A3E; }
.eco-bolsa polyline.cai { stroke: var(--urucum); }

/* recomendadas: foto pequena à esquerda */
.cartao--mini { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--linha); }
.cartao--mini:not(:has(.cartao__foto)) { grid-template-columns: 1fr; }
.cartao--mini .cartao__foto { align-self: start; border-radius: 8px; }   /* foto pequena: canto menor, senão vira pílula */
.cartao--mini .cartao__titulo { font-size: 15px; font-weight: 700; line-height: 1.25; }
.cartao--mini .chapeu { font-size: 10.5px; margin-bottom: 3px; }
.cartao--mini .cartao__meta { font-size: 12px; margin-top: 4px; }
.so-pc { display: none; }

.lado-cidades ul { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.lado-cidades a { display: block; padding: 6px 11px; border: 1px solid var(--linha); border-radius: 20px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--asfalto); }
.lado-cidades a:hover { background: var(--amarelo); border-color: var(--amarelo); }
.ultimas .cartao--lista:last-of-type { border-bottom: 0; }

.mais-lidas ol { counter-reset: lida; }
.mais-lidas li { counter-increment: lida; display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding-block: 12px; border-bottom: 1px solid var(--linha); }
.mais-lidas li::before { content: counter(lida); font-family: var(--f-titulo); font-weight: 900; font-size: 30px; line-height: 1; color: var(--asfalto); }
.mais-lidas a { font-family: var(--f-titulo); font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; color: var(--asfalto); }
.mais-lidas a:hover { color: var(--asfalto); }

.bloco { margin-top: 36px; }
.bloco__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; padding-top: 8px; }
.bloco__grade .cartao--destaque { grid-column: 1 / -1; }

/* ---------- listas (editoria, cidade, busca) ---------- */
.lista-cabeca { padding-block: 24px 4px; border-bottom: 1px solid var(--linha); }
.lista-cabeca__titulo { font-family: var(--f-titulo); font-weight: 900; font-size: 32px; line-height: 1.1; color: var(--asfalto); }
.lista-cabeca__desc { color: var(--cinza); margin: 6px 0 12px; }
.lista-cabeca .busca-pagina { max-width: 640px; }
.ultimas > .cartao--destaque { padding-bottom: 16px; border-bottom: 1px solid var(--linha); }
.pagination { margin: 24px 0; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.page-numbers { display: inline-block; min-width: 40px; padding: 8px 12px; text-align: center; border: 1px solid var(--linha); border-radius: 6px; text-decoration: none; font-weight: 700; }
.page-numbers.current { background: var(--asfalto); border-color: var(--asfalto); color: #fff; }

/* ---------- matéria ---------- */
.materia__cabeca { max-width: 880px; padding-top: 28px; }
.materia__titulo { font-family: var(--f-titulo); font-weight: 900; font-size: 30px; line-height: 1.08; letter-spacing: -.01em; color: var(--asfalto); }
.materia__fina { font-family: var(--f-texto); font-size: 19px; line-height: 1.45; color: #3A4540; margin-top: 12px; }
.materia__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--cinza); margin-top: 18px; padding-block: 12px; border-block: 1px solid var(--linha); }
.materia__meta strong { color: var(--texto); }
.materia__meta a { color: var(--asfalto); font-weight: 700; text-decoration: none; }
.compartilhar { display: flex; gap: 8px; }
.compartilhar a, .compartilhar button { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 8px 14px; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.compartilhar .icone { width: 18px; height: 18px; }
.compartilhar__whats { background: var(--asfalto); color: #fff !important; }
.compartilhar__face, .compartilhar__mais { background: none; border: 1px solid var(--linha); color: var(--asfalto) !important; }
.compartilhar__face:hover, .compartilhar__mais:hover { border-color: var(--asfalto); }
.compartilhar .compartilhar__mais { position: relative; padding: 8px; }
/* "Link copiado" aparece num balão em cima do botão, sem mexer no resto da linha */
.compartilhar__aviso { position: absolute; bottom: calc(100% + 6px); right: 0; padding: 4px 8px; border-radius: 6px; background: var(--asfalto); color: #fff; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.compartilhar__mais.copiado .compartilhar__aviso { opacity: 1; }
.materia__foto { max-width: 1000px; margin-top: 20px; }
.materia__foto img { width: 100%; border-radius: var(--raio); aspect-ratio: 16 / 9; object-fit: cover; }
.materia__foto figcaption { font-size: 13px; color: var(--cinza); margin-top: 6px; }
.materia__corpo { max-width: 752px; padding-block: 8px 24px; }
.materia__fonte, .materia__erro { font-size: 14px; color: var(--cinza); margin-top: 16px; }
.materia__fonte a, .materia__erro a { color: var(--asfalto); font-weight: 700; }
.materia__erro { padding-top: 12px; border-top: 1px solid var(--linha); }
.materia--pagina .materia__cabeca { padding-bottom: 8px; }

/* o texto da matéria: letra de livro, linha confortável */
.sem-quebra { white-space: nowrap; }
.texto { font-family: var(--f-texto); font-size: 18px; line-height: 1.7; color: var(--texto); }
.texto > * + * { margin-top: 1.1em; }
.texto h2 { font-family: var(--f-titulo); font-weight: 800; font-size: 24px; line-height: 1.2; color: var(--asfalto); margin-top: 1.6em; }
.texto h3 { font-family: var(--f-titulo); font-weight: 800; font-size: 20px; line-height: 1.25; color: var(--asfalto); margin-top: 1.4em; }
.texto a { color: var(--asfalto); text-underline-offset: 3px; }
.texto strong { font-weight: 700; }
.texto ul, .texto ol { padding-left: 1.3em; }
.texto ul { list-style: disc; }
.texto ol { list-style: decimal; }
.texto li + li { margin-top: .4em; }
.texto blockquote { margin-inline: 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--asfalto); font-size: 1.1em; color: var(--asfalto); }
.texto blockquote cite { display: block; font: 700 14px var(--f-ui); color: var(--cinza); margin-top: 8px; font-style: normal; }
.texto figure img { border-radius: var(--raio); }
.texto figcaption { font: 13px/1.4 var(--f-ui); color: var(--cinza); margin-top: 6px; }
.texto table { width: 100%; border-collapse: collapse; font: 15px var(--f-ui); }
.texto th, .texto td { border-bottom: 1px solid var(--linha); padding: 8px; text-align: left; }
.texto hr { border: 0; border-top: 1px solid var(--linha); }
.texto iframe { width: 100%; border: 0; }
.wp-block-embed__wrapper iframe { aspect-ratio: 16 / 9; height: auto; }

.video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--raio); overflow: hidden; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.video__play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--urucum); cursor: pointer; }
.video__play::before { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }

.leia { padding-bottom: 32px; }
.leia__grade { display: grid; gap: 20px; padding-top: 8px; }
@media (max-width: 767px) {   /* no celular o "Leia também" vira lista, como as últimas */
	.leia__grade { gap: 0; }
	.leia__grade .cartao--compacto { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 14px; padding-block: 14px; border-bottom: 1px solid var(--linha); }
	.leia__grade .cartao--compacto .cartao__foto { align-self: start; }
	.leia__grade .cartao--compacto .cartao__texto { padding-top: 0; }
}

/* ---------- rodapé ---------- */

/* ---------- a partir do tablet ---------- */
@media (min-width: 768px) {
	.faixa__lema { display: inline; }
	.topo__linha { min-height: 72px; }
	.topo__botao span { display: inline; }
	.marca { font-size: 34px; }
	.anuncio__link, .anuncio__vago { max-width: var(--pc-l); aspect-ratio: var(--pc); }
	.cartao--manchete .cartao__titulo { font-size: 36px; }
	.cartao--lista { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; padding-block: 20px; }
	.cartao--lista .cartao__titulo { font-size: 21px; }
	.cartao--lista .cartao__fina { display: block; font-size: 15.5px; margin-top: 6px; }
	.abertura { grid-template-columns: 1fr 1fr; }
	.abertura__manchete { grid-column: 1 / -1; }
	.abertura__lado { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
	.abertura .cartao--manchete { aspect-ratio: 16 / 9; }
	.abertura .cartao--manchete .cartao__titulo { font-size: 34px; }
	.abertura .cartao--manchete .cartao__fina { display: block; }
	.abertura .cartao--destaque { aspect-ratio: 4 / 3; }
	.abertura--2 .abertura__manchete { grid-column: auto; }
	.abertura--2 .cartao--manchete .cartao__titulo { font-size: 26px; }
	.cartao--sobre .cartao__texto { padding: 24px 24px 20px; }
	.bloco__grade { grid-template-columns: repeat(4, 1fr); }
	.bloco__grade .cartao--destaque { grid-column: 1 / 3; grid-row: 1 / 3; }
	.leia__grade { grid-template-columns: repeat(3, 1fr); }
	.materia__titulo { font-size: 42px; }
	.materia__fina { font-size: 21px; }
	.texto { font-size: 19px; }
}

/* ---------- computador ---------- */
@media (min-width: 1024px) {
	/* bloco fechado: a manchete e as duas secundárias terminam na mesma linha. Proporção do g1 (5 para 4):
	   as secundárias ficam largas o bastante para o título respirar */
	.abertura { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 14px; padding-top: 24px; height: 520px; }
	.abertura__manchete, .abertura__lado { grid-column: auto; height: 100%; min-height: 0; }
	.abertura__lado { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
	.abertura .cartao--manchete, .abertura .cartao--destaque { aspect-ratio: auto; height: 100%; }
	.abertura .cartao--manchete .cartao__titulo { font-size: 38px; }
	.abertura .cartao--manchete .cartao__texto { padding: 28px 30px 26px; }
	.abertura .cartao--destaque .cartao__titulo { font-size: 25px; }
	.abertura .cartao--destaque .cartao__texto { padding: 22px 24px 20px; }
	.abertura--1 { grid-template-columns: minmax(0, 1fr); height: 540px; }
	.abertura--1 .cartao--manchete .cartao__titulo { font-size: 52px; max-width: 920px; }
	.abertura--1 .cartao--manchete .cartao__fina { font-size: 20px; max-width: 760px; }
	.abertura--1 .cartao--manchete .cartao__texto { padding: 36px 40px 32px; }
	.abertura--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 470px; }
	.abertura--2 .cartao--manchete { aspect-ratio: auto; }
	.abertura--2 .cartao--manchete .cartao__titulo { font-size: 32px; }
	.cartao--manchete .cartao__titulo { font-size: 40px; }
	.duas-colunas { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
	/* lista: foto maior, como no g1 (perto de metade da coluna) */
	.cartao--lista { grid-template-columns: 380px minmax(0, 1fr); gap: 26px; }
	.cartao--lista .cartao__titulo { font-size: 23px; }
	.lateral.so-pc { display: flex; }
	.so-celular { display: none; }
	.materia__titulo { font-size: 46px; }
}


/* ---------- asfalto e faixa amarela ---------- */
.editorias { border-top: 5px solid var(--amarelo); }   /* a faixa amarela entre a pista escura e o menu */
.topo :focus-visible { outline-color: var(--amarelo); }
.marca { font-weight: 800; letter-spacing: -.01em; }
.marca b { font-weight: 800; color: var(--amarelo); }
.editorias__lista a:hover, .editorias__lista .current-menu-item a, .editorias__lista .current-cat a { color: var(--asfalto); border-bottom-color: var(--amarelo); }
/* celular: a barra de editorias só cabia arrastando para o lado; as editorias ficam no menu. Fica só a faixa amarela */
@media (max-width: 767px) {
	.editorias { border-bottom: 0; }
	.editorias .caixa { display: none; }
}
.chapeu { display: inline-block; color: var(--asfalto); box-shadow: inset 0 -.42em 0 var(--amarelo); line-height: 1.25; }
.secao-titulo { color: var(--asfalto); border-top: 5px solid var(--amarelo); letter-spacing: 0; }
.cartao__titulo { font-weight: 700; letter-spacing: -.01em; }
.cartao__titulo a:hover { color: inherit; text-decoration: underline; text-decoration-color: var(--amarelo-forte); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.cartao--manchete .cartao__titulo, .materia__titulo, .lista-cabeca__titulo { font-weight: 800; letter-spacing: -.02em; }
.cartao__fina, .materia__fina { color: #3C4046; }
.mais-lidas li::before { color: var(--asfalto); box-shadow: inset 0 -.3em 0 var(--amarelo); height: fit-content; }
.mais-lidas a { font-weight: 600; }
.texto { line-height: 1.68; }
.texto a { color: var(--asfalto); text-decoration-color: var(--amarelo-forte); text-decoration-thickness: 2px; }
.texto a:hover { background: var(--amarelo); }
.texto blockquote { border-left-color: var(--amarelo); }
.page-numbers.current { background: var(--amarelo); border-color: var(--amarelo); color: var(--asfalto); }
.anuncio__vago strong { color: var(--asfalto); }
.anuncio__vago:hover { border-color: var(--amarelo-forte); }
.video__play { background: var(--amarelo); }
.video__play::before { border-color: transparent transparent transparent var(--asfalto); }
.faixa { background: #000; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ---------- blocos que quebram a lista da home (inc/blocos.php) ---------- */
.quebra { margin: 24px 0; padding: 18px 16px; border-radius: var(--raio); }
.quebra__cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.quebra__titulo { display: flex; align-items: center; gap: 8px; font-family: var(--f-titulo); font-weight: 900; font-size: 24px; line-height: 1.1; color: var(--asfalto); }
.quebra__titulo small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.quebra__mais { flex: none; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--asfalto); border-bottom: 3px solid var(--amarelo); }
.quebra__mais::after { content: " ›"; }
.cartao__foto { position: relative; }
.cartao__play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--amarelo); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.cartao__play::before { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent var(--asfalto); }
.cartao--mini .cartao__play { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.cartao--mini .cartao__play::before { left: 12px; top: 9px; border-width: 6px 0 6px 9px; }

/* editoria: fundo de papel, destaque grande e três menores */
.quebra--editoria { background: var(--papel); }
.quebra-editoria__grade { display: grid; gap: 4px 20px; }
.quebra-editoria__grade > .cartao--destaque .cartao__titulo { font-size: 21px; }
.quebra-editoria__lado .cartao--mini:last-child { border-bottom: 0; }

/* cidade: faixa amarela, cartões em pé com o texto sobre a foto; no celular, desliza para o lado */
.quebra--cidade { background: var(--amarelo); }
.quebra--cidade .quebra__titulo .icone { width: 28px; height: 28px; }
.quebra--cidade .quebra__mais { border-bottom-color: var(--asfalto); }
.quebra-cidade__trilho { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: thin; }
.quebra-cidade__trilho .cartao--sobre { aspect-ratio: 3 / 4; scroll-snap-align: start; }
.quebra-cidade__trilho .cartao__titulo { font-size: 17px; line-height: 1.2; }
.quebra-cidade__trilho .cartao__texto { padding: 14px 14px 12px; }

/* vídeos: faixa de asfalto */
.quebra--videos { background: var(--asfalto); color: #fff; }
.quebra--videos .quebra__titulo, .quebra--videos .cartao__titulo a, .quebra--videos .cartao__titulo a:hover { color: #fff; }
.quebra--videos .chapeu { background: var(--amarelo); box-shadow: none; padding: 2px 6px; border-radius: 2px; }
.quebra--videos .cartao__fina, .quebra--videos .cartao__meta, .quebra--videos .cartao__meta a { color: rgba(255,255,255,.8); }
.quebra--videos .cartao--mini { border-bottom-color: rgba(255,255,255,.15); }

@media (min-width: 768px) {
	.quebra { padding: 22px 24px; }
	.quebra-editoria__grade { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
	.quebra-editoria__lado .cartao--mini:first-child { padding-top: 0; }
	.quebra-cidade__trilho { grid-auto-columns: minmax(0, 1fr); overflow: visible; }
}

/* ---------- mostrar mais notícias ---------- */
.mais { text-align: center; padding: 24px 0 8px; }
.mais__botao { width: 100%; max-width: 420px; border: 2px solid var(--asfalto); border-radius: 99px; background: #fff; color: var(--asfalto); font-size: 16px; font-weight: 800; padding: 14px 20px; cursor: pointer; }
.mais__botao:hover { background: var(--amarelo); border-color: var(--amarelo); }
.mais__botao:disabled { opacity: .6; cursor: wait; }
.mais__aviso { color: var(--cinza); font-size: 14px; margin-top: 8px; }
.mais__aviso:empty { display: none; }

/* ---------- logo em vetor (assets/marca) ---------- */
.marca--logo { display: block; padding: 0; line-height: 0; }
.marca--logo img { display: block; height: 18px; width: auto; }   /* o SVG do site é justo, sem margem: altura = altura das letras */
@media (min-width: 768px) {
	.marca--logo img { height: 25px; }
}

/* ---------- rodapé: enxuto, marca de um lado e páginas do portal do outro ---------- */
.rodape { background: var(--asfalto); color: #fff; margin-top: 48px; font-size: 15px; border-top: 5px solid var(--amarelo); }
.rodape__topo { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: 32px 24px; text-align: center; }
.rodape__lema { font-family: var(--f-titulo); font-weight: 700; color: var(--amarelo); font-size: 14px; margin-top: 8px; }
.rodape__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.rodape__lista a { color: #fff; text-decoration: none; opacity: .85; }
.rodape__lista a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--amarelo); text-underline-offset: 3px; }
.rodape__fim { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; padding-block: 16px 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: rgba(255, 255, 255, .7); }
.rodape__redes { display: flex; gap: 8px; }
.rodape__redes a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; }
.rodape__redes a:hover { background: var(--amarelo); color: var(--asfalto); }
.gaveta .rodape__redes { margin-top: 10px; }
.gaveta .rodape__redes a { background: var(--papel); color: var(--asfalto); }
/* convite para seguir, no fim da matéria */
.siga { display: flex; align-items: center; gap: 14px; margin: 28px 0 8px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: var(--raio); text-decoration: none; color: var(--asfalto); font-family: var(--f-ui); }
.siga > .icone { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--asfalto); color: #fff; }
.siga__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.siga__texto strong { font-size: 16px; }
.siga__texto span { font-size: 14px; color: var(--cinza); }
.siga__botao { flex: none; padding: 8px 16px; border-radius: 99px; background: var(--amarelo); font-weight: 800; font-size: 14px; }
.siga:hover { border-color: var(--asfalto); }
.rodape__subir { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-weight: 700; }
.rodape__subir .icone { width: 16px; height: 16px; }
.rodape__subir:hover { color: var(--amarelo); }
.marca--rodape.marca--logo img { height: 20px; margin-inline: auto; }
@media (min-width: 768px) {
	.rodape__topo { flex-direction: row; justify-content: space-between; text-align: left; padding-block: 36px 28px; }
	.rodape__lista { justify-content: flex-end; }
	.rodape__fim { justify-content: space-between; }
	.marca--rodape.marca--logo img { height: 23px; margin-inline: 0; }
}
.materia__foto figcaption a { color: inherit; text-decoration-color: var(--linha); text-underline-offset: 2px; }

/* ---------- página não encontrada (404.php) ---------- */
.erro { background: var(--asfalto); color: #fff; text-align: center; }
.erro__caixa { display: flex; flex-direction: column; align-items: center; padding-block: 44px 36px; }
.erro__numero svg { display: block; width: min(420px, 78vw); height: auto; }
.erro__titulo { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(28px, 6vw, 42px); line-height: 1.1; letter-spacing: -.02em; margin-top: 28px; max-width: 18em; }
.erro__texto { color: rgba(255, 255, 255, .8); font-size: 17px; line-height: 1.55; margin-top: 12px; max-width: 40em; text-wrap: balance; }
.erro__busca { width: 100%; max-width: 520px; margin-top: 24px; }
.erro__busca input { border-color: transparent; }
.erro__busca button { background: var(--amarelo); color: var(--asfalto); }
.erro__voltar { margin-top: 16px; color: #fff; font-weight: 700; text-decoration-color: var(--amarelo); text-underline-offset: 4px; }
.erro__pista { height: 34px; background: #24272C; position: relative; overflow: hidden; }
.erro__pista::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 5px; margin-top: -2.5px;
	background: repeating-linear-gradient(90deg, var(--amarelo) 0 40px, transparent 40px 80px); animation: erro-pista 1.6s linear infinite; }
@keyframes erro-pista { from { background-position: 0 0; } to { background-position: -80px 0; } }
.erro + .caixa .ultimas { margin-top: 32px; }

/* espaço vago mostra a própria medida: no computador a do computador, no celular a do celular */
.anuncio__vago small { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .04em; color: var(--cinza); }
.anuncio__vago .medida-pc { display: none; }
@media (min-width: 768px) {
	.anuncio__vago .medida-pc { display: block; }
	.anuncio__vago .medida-cel { display: none; }
}

/* rodízio de anunciantes no mesmo espaço: empilhados, só o da vez aparece (troca em site.js) */
.anuncio__rodizio { display: grid; }
.anuncio__rodizio > .anuncio__link { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.anuncio__rodizio > .anuncio__link.ativo { opacity: 1; visibility: visible; transition: opacity .6s ease; }

/* ---------- gráfico de barras dentro da matéria (montado pelo plugin de pauta) ---------- */
.texto .grafico { margin: 28px 0; padding: 18px 18px 14px; background: var(--papel); border-radius: var(--raio); font-family: var(--f-ui); }
.texto .grafico__titulo { font-family: var(--f-titulo); font-weight: 800; font-size: 18px; line-height: 1.25; color: var(--asfalto); }
.texto .grafico__sub { font-size: 14px; color: var(--cinza); margin-top: 4px; }
.texto .grafico__itens { list-style: none; margin: 14px 0 0; padding: 0; }
.texto .grafico__itens > li + li { margin-top: 0; }
.texto .grafico__item { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.texto .grafico__foto { width: 40px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; background: #fff; }
.texto .grafico__corpo { flex: 1; min-width: 0; }
.texto .grafico__linha { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 15px; line-height: 1.3; }
.texto .grafico__rotulo { font-weight: 600; color: var(--asfalto); }
.texto .grafico__rotulo small { font-weight: 400; color: var(--cinza); font-size: 13px; }
.texto .grafico__valor { font-weight: 800; color: var(--asfalto); white-space: nowrap; font-variant-numeric: tabular-nums; }
.texto .grafico__barra { display: block; height: 10px; margin-top: 5px; background: #fff; border-radius: 5px; overflow: hidden; }
.texto .grafico__barra i { display: block; height: 100%; background: #9AA0A6; border-radius: 5px; }
.texto .grafico__item--destaque .grafico__barra i { background: var(--amarelo-forte); }
.texto .grafico__barra i.grafico__partes { display: flex; width: 100%; background: none; border-radius: 5px; overflow: hidden; }
.texto .grafico__partes s { display: block; height: 100%; text-decoration: none; }
.texto .grafico__legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 14px; color: var(--asfalto); }
.texto .grafico__legenda span { display: inline-flex; align-items: center; gap: 6px; }
.texto .grafico__legenda b { width: 14px; height: 10px; border-radius: 3px; }
/* linha e mapa (gerados em outputs/graficos/graficos.py): SVG que acompanha a largura da coluna */
.texto .grafico__svg { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.texto .grafico--linha .grafico__grade { stroke: #fff; stroke-width: 1.5; }
.texto .grafico--linha .grafico__eixo { font: 600 13px var(--f-ui); fill: var(--cinza); }
.texto .grafico--linha .grafico__serie { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.texto .grafico--linha .grafico__fim { font: 800 17px var(--f-ui); }
.texto .grafico--linha .grafico__fim-nome { font: 600 12px var(--f-ui); fill: var(--cinza); }
.texto .grafico--mapa .grafico__cid { stroke: #fff; stroke-width: 2; stroke-linejoin: round; }   /* divisa branca: aparece entre duas cidades escuras */
.texto .grafico--mapa .grafico__nome { font: 800 23px var(--f-ui); fill: var(--asfalto); text-anchor: middle; }
.texto .grafico--mapa .grafico__nome--claro { fill: #fff; }
.texto .grafico--mapa .grafico__nome--fora { text-anchor: start; }
.texto .grafico--mapa .grafico__fio { stroke: var(--asfalto); stroke-width: 2; }
.texto .grafico--mapa .grafico__fio-halo { stroke: #fff; stroke-width: 6; }   /* o fio aparece até sobre cidade escura */
.texto .grafico--mapa .grafico__fio-ponto { fill: var(--asfalto); stroke: #fff; stroke-width: 2; }
.texto .grafico--mapa .grafico__legenda b { width: 22px; height: 14px; border: 1px solid rgba(0, 0, 0, .15); }
/* animação: a linha se desenha da esquerda para a direita; as cidades aparecem da maior para a menor */
.grafico--espera .grafico__serie { stroke-dasharray: 1; stroke-dashoffset: 1; }
.grafico--cheio .grafico__serie { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1); }
.grafico--espera .grafico__ponto, .grafico--espera .grafico__fim, .grafico--espera .grafico__fim-nome { opacity: 0; }
.grafico--cheio .grafico__ponto, .grafico--cheio .grafico__fim, .grafico--cheio .grafico__fim-nome { opacity: 1; transition: opacity .4s 1.5s; }
.grafico--espera .grafico__cid { opacity: 0; }
.grafico--cheio .grafico__cid { opacity: 1; transition: opacity .5s calc(var(--ordem, 0) * 60ms); }
/* animação (site.js): as barras esperam vazias e crescem quando o gráfico entra na tela, uma depois da outra */
.grafico--espera .grafico__barra i { transform: scaleX(0); transform-origin: left; }
.grafico--cheio .grafico__barra i { transform: scaleX(1); transition: transform .9s cubic-bezier(.22, .61, .36, 1) calc(var(--ordem, 0) * 90ms); }
.texto .grafico__rodape { font-size: 12.5px; color: var(--cinza); margin-top: 10px; }