/* Press DSC LAB, folha de estilo v10 (21/10/2026), fase P1: lista de fontes, busca, filtros, ficha e a página Notícias.
   v10: capa editorial da página Notícias (seção «capa» no fim do arquivo): abas Capa e Todas as notícias, manchete, cobertura, últimas, destaques, em alta, blocos por
   editoria e pelo Brasil, tudo em superfície plana com os tokens e as extensões já aprovados (nenhuma cor nova); filtros da lista em quatro colunas.
   v9 (20/10/2026): página Notícias em forma de lista.
   v9: página Notícias (seção «portal» no fim do arquivo): filtros, aviso de atualização, dias, cartões de notícia, «Carregar mais» e «Como ler»,
   só com os tokens e as extensões já aprovados (nenhuma cor nova). O resto é o da v8, sem mudança.
   v8: feeds da ficha em lista de blocos, no lugar da tabela de quatro colunas. v7 não foi publicada.
   v7: seção de feeds da ficha (tabela de feeds, lista dos últimos itens, subtítulos), sem cor nova.
   v6: tabela de canais da ficha com colunas fixas e links curtos. v5 a v2 não foram publicadas.
   v5: menu Compartilhar à direita. v4 a v2 não foram publicadas.
   v4: faceta em grade de três colunas (UF) e ausência de dado em texto secundário. v3 e v2 não foram publicadas.
   v3: marca de grupo aberto ou fechado, ordenação por lista só em telefone, ajustes de menu. v2 não foi publicada.
   Design System Brasileira Press e News: superfície plana, cantos retos, sem sombra nem degradê, tracking 0, nenhuma cor nova.
   Extensões aprovadas em 14/10/2026 (plano v2, seção 2): foco, hover e selecionado, botões, campos, status sem cor semântica,
   escala sequencial de petróleo, espaçamento de 4 px, seis ícones de traço reto, grade 1200 e 768.
   Pares de cor usados: preto/branco 21:1, petróleo/branco 13,59:1, texto-autoria/branco 6,10:1, texto-autoria/cinza-barra 5,00:1,
   petróleo/ciano 5,00:1, branco/petróleo 13,59:1. Ciano nunca é texto nem fio sobre branco. */

@font-face { font-family: "DIN 2014"; src: url("fontes/DIN-2014_Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DIN 2014"; src: url("fontes/DIN-2014_Demi.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DIN 2014"; src: url("fontes/DIN-2014_Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DIN 2014"; src: url("fontes/DIN-2014_Extra-Bold.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "DIN 2014"; src: url("fontes/DIN-2014_Extra-Bold-Italic.otf") format("opentype"); font-weight: 800; font-style: italic; font-display: swap; }

:root {
  /* tokens do sistema */
  --ciano-brasileira: #00A9DD;
  --petroleo-brasileira: #00333F;
  --branco: #FFFFFF;
  --preto: #000000;
  --on-ciano: var(--petroleo-brasileira);
  --on-petroleo: var(--branco);
  --cinza-barra: #E8E8ED;
  --texto-autoria: #626262;
  --fio-horizontal: #E9E9E9;
  --divisoria-vertical: #EBEBEB;
  --radius-zero: 0;
  /* extensões aprovadas */
  --borda-controle: #626262;
  --petroleo-20: #CCD6D9; --petroleo-40: #99ADB2; --petroleo-60: #66858C; --petroleo-80: #335C65;
  --espaco-1: 4px; --espaco-2: 8px; --espaco-3: 12px; --espaco-4: 16px; --espaco-6: 24px; --espaco-8: 32px; --espaco-12: 48px;
  --alvo: 40px;
  --fonte: "DIN 2014", "Barlow", "Arial Narrow", system-ui, sans-serif;
  --largura-max: 1440px;
  color-scheme: light;
}

* { box-sizing: border-box; border-radius: var(--radius-zero); }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; display: flex; flex-direction: column;
  background: var(--branco); color: var(--preto);
  font-family: var(--fonte); font-weight: 400; font-size: 16px; line-height: 1.4; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
a { color: var(--petroleo-brasileira); text-decoration: underline; }
button { font-family: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--petroleo-brasileira); outline-offset: 2px; }
.sobre-escuro :focus-visible { outline-color: var(--branco); }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.so-leitor:focus { position: static; width: auto; height: auto; margin: 0; clip: auto; padding: var(--espaco-2) var(--espaco-4); background: var(--branco); }
.miolo { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--espaco-4); }
.icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; }

/* barra utilitária */
.barra-util { background: var(--cinza-barra); color: var(--texto-autoria); font-size: 14px; }
.barra-util .miolo { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4); min-height: 48px; flex-wrap: wrap; padding-block: var(--espaco-2); }
.barra-util .sessao { display: flex; align-items: center; gap: var(--espaco-3); flex-wrap: wrap; }
.barra-util .sessao strong { color: var(--preto); font-weight: 600; }

/* cabeçalho: marca reduzida sobre branco */
.cabecalho { background: var(--branco); }
.cabecalho .miolo { display: flex; align-items: center; gap: var(--espaco-4); padding-block: var(--espaco-3); }
.cabecalho .marca { display: block; height: 64px; width: auto; }

/* navegação: faixa petróleo, caixa-alta, branca */
.navegacao { background: var(--petroleo-brasileira); color: var(--on-petroleo); }
.navegacao .miolo { display: flex; gap: 0; overflow-x: auto; padding-block: 0; }
.navegacao a, .navegacao span {
  color: var(--on-petroleo); text-decoration: none; text-transform: uppercase; font-weight: 700; font-size: 15px;
  padding: var(--espaco-3) var(--espaco-4); white-space: nowrap; display: inline-block;
}
.navegacao a[aria-current="page"] { background: var(--ciano-brasileira); color: var(--on-ciano); }
.navegacao span[aria-disabled="true"] { color: #99ADB2; }

/* conteúdo */
main { flex: 1 0 auto; padding-block: var(--espaco-6) var(--espaco-8); }
h1 { font-weight: 800; font-size: 28px; line-height: 1.15; text-transform: uppercase; margin: 0 0 var(--espaco-2); }
h2 { font-weight: 700; font-size: 20px; line-height: 1.2; margin: var(--espaco-6) 0 var(--espaco-3); }
h3 { font-weight: 700; font-size: 16px; line-height: 1.2; margin: 0 0 var(--espaco-2); text-transform: uppercase; }
.lede { max-width: 72ch; color: var(--texto-autoria); margin: 0 0 var(--espaco-4); }

/* botões e campos */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2);
  background: var(--petroleo-brasileira); color: var(--on-petroleo); font: 700 15px/1 var(--fonte); text-transform: uppercase;
  padding: 0 var(--espaco-4); min-height: var(--alvo); text-decoration: none; border: 2px solid var(--petroleo-brasileira); cursor: pointer;
}
.botao:hover { background: var(--preto); border-color: var(--preto); }
.botao.secundario { background: var(--ciano-brasileira); border-color: var(--ciano-brasileira); color: var(--on-ciano); }
.botao.secundario:hover { background: var(--petroleo-brasileira); border-color: var(--petroleo-brasileira); color: var(--on-petroleo); }
.botao.contorno { background: var(--branco); color: var(--petroleo-brasileira); border-color: var(--petroleo-brasileira); }
.botao.contorno:hover { background: var(--cinza-barra); color: var(--preto); }
.botao[disabled] { background: var(--cinza-barra); border-color: var(--cinza-barra); color: var(--texto-autoria); cursor: default; }
.acao { background: none; border: 0; padding: var(--espaco-2) 0; min-height: var(--alvo); color: var(--petroleo-brasileira); text-decoration: underline; font: 600 15px/1.2 var(--fonte); cursor: pointer; text-align: left; }
.acao:hover { color: var(--preto); }
.campo label { display: block; font-weight: 600; font-size: 14px; margin-bottom: var(--espaco-1); }
input[type="text"], input[type="search"], input[type="password"], select {
  font: 400 16px/1.2 var(--fonte); color: var(--preto); background: var(--branco); border: 1px solid var(--borda-controle);
  min-height: var(--alvo); padding: 0 var(--espaco-3); width: 100%;
}
input[type="search"]::-webkit-search-cancel-button { display: none; }
input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus, select:focus { border-color: var(--petroleo-brasileira); outline: 3px solid var(--petroleo-brasileira); outline-offset: 0; }
input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--petroleo-brasileira); }

/* porta de entrada */
.portao { background: var(--cinza-barra); padding: var(--espaco-6); max-width: 520px; }
.portao h2 { margin-top: 0; }
.form-login { display: grid; gap: var(--espaco-4); margin-top: var(--espaco-4); }
.erro { margin: 0; padding: var(--espaco-3); border: 2px solid var(--preto); background: var(--branco); font-weight: 600; }

/* ferramentas da lista */
.ferramentas { display: grid; gap: var(--espaco-3); margin-bottom: var(--espaco-4); }
.busca { position: relative; max-width: 720px; }
.busca .icone { position: absolute; left: var(--espaco-3); top: 50%; transform: translateY(-50%); color: var(--texto-autoria); pointer-events: none; }
.busca input { padding-left: calc(var(--espaco-3) + 28px); }
.linha-acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }
.linha-acoes .espaco { flex: 1 1 auto; }
.contagem { font-weight: 700; font-size: 18px; margin: 0; }
.estado-copia { font-size: 14px; color: var(--texto-autoria); min-height: 1.4em; margin: 0; }

/* menus (visões prontas, colunas) */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--cinza-barra); color: var(--preto); border-color: var(--petroleo-brasileira); }
.menu .painel-menu {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 320px; max-width: min(92vw, 460px); max-height: 70vh; overflow-y: auto;
  background: var(--branco); border: 2px solid var(--petroleo-brasileira); padding: var(--espaco-2);
}
.menu .painel-menu.direita { left: auto; right: 0; }
.menu .item-menu {
  display: flex; justify-content: space-between; gap: var(--espaco-3); width: 100%; background: none; border: 0; text-align: left;
  min-height: var(--alvo); padding: var(--espaco-2) var(--espaco-3); font: 400 15px/1.25 var(--fonte); color: var(--preto); cursor: pointer; align-items: center;
}
.menu .item-menu:hover { background: var(--cinza-barra); }
.menu .item-menu[aria-pressed="true"] { background: var(--ciano-brasileira); color: var(--on-ciano); font-weight: 700; }
.menu .item-menu .qtd { font-weight: 700; flex: none; }
.menu label.item-menu { cursor: pointer; }
.menu .item-menu:focus-visible { outline-offset: -3px; }

/* chips de filtros ativos */
.chips { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: var(--espaco-2); background: var(--ciano-brasileira); color: var(--on-ciano);
  border: 0; min-height: 36px; padding: 0 var(--espaco-3); font: 600 14px/1.2 var(--fonte); cursor: pointer; text-align: left;
}
.chip:hover { background: var(--petroleo-brasileira); color: var(--on-petroleo); }
.chip .icone { width: 16px; height: 16px; }

/* grade: filtros à esquerda e resultados */
.area { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--espaco-6); align-items: start; }
.filtros { border-top: 3px solid var(--petroleo-brasileira); }
.filtros-topo { display: none; }
.filtros .rodape-filtros { display: none; }
.grupo { border-bottom: 1px solid var(--borda-controle); }
.grupo > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-2);
  min-height: 48px; padding: var(--espaco-2) var(--espaco-1); font-weight: 700; font-size: 18px; text-transform: uppercase;
}
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary .marca-aberto { font-weight: 400; font-size: 20px; width: 20px; text-align: center; flex: none; }
.grupo > summary .marca-aberto::after { content: "+"; }
.grupo[open] > summary .marca-aberto::after { content: "\2212"; }
.grupo > summary .ativos { background: var(--ciano-brasileira); color: var(--on-ciano); font-size: 13px; font-weight: 700; padding: 0 var(--espaco-2); min-width: 24px; text-align: center; margin-left: auto; }
.grupo .corpo { padding: 0 var(--espaco-1) var(--espaco-4); display: grid; gap: var(--espaco-4); }
.faceta { border: 0; margin: 0; padding: 0; min-width: 0; }
.faceta legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: var(--espaco-1); }
.faceta ul { list-style: none; margin: 0; padding: 0; }
.faceta .opcao { display: flex; align-items: center; gap: var(--espaco-2); min-height: var(--alvo); cursor: pointer; padding: 0 var(--espaco-1); }
.faceta .opcao:hover { background: var(--cinza-barra); }
.faceta .opcao .rot { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.faceta .opcao .qtd { flex: none; color: var(--texto-autoria); font-size: 14px; }
.faceta .opcao.zero { cursor: default; }
.faceta .opcao.zero .rot, .faceta .opcao.zero .qtd { color: var(--texto-autoria); }
.faceta .opcao.marcada .rot { font-weight: 700; }
.faceta.horizontal ul { display: flex; flex-wrap: wrap; gap: 0 var(--espaco-4); }
.faceta.grade ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--espaco-1); }
.faceta.grade .opcao { padding: 0 var(--espaco-1); gap: var(--espaco-1); }
.faceta.grade .opcao .qtd { font-size: 12px; }
.vazia { color: var(--texto-autoria); font-size: 14px; }
table.fontes tbody tr.aberta .vazia { color: var(--on-ciano); }
.faceta .mais { margin-top: var(--espaco-1); }
.faceta .busca-faceta { margin: var(--espaco-1) 0 var(--espaco-2); }
.faceta.equipe legend::after { content: " (equipe)"; font-weight: 400; color: var(--texto-autoria); }

/* resultados */
.resultados { min-width: 0; }
.cabeca-resultados { display: grid; gap: var(--espaco-3); margin-bottom: var(--espaco-3); }
.tabela-wrap { overflow-x: auto; border-top: 3px solid var(--petroleo-brasileira); }
table.fontes { border-collapse: collapse; width: 100%; font-size: 15px; }
table.fontes th {
  background: var(--cinza-barra); text-align: left; font-weight: 600; white-space: nowrap; padding: 0; position: sticky; top: 0;
  border-bottom: 1px solid var(--borda-controle);
}
table.fontes th .ordenar {
  display: flex; align-items: center; gap: var(--espaco-1); width: 100%; min-height: 48px; padding: 0 var(--espaco-3);
  background: none; border: 0; font: 600 14px/1.2 var(--fonte); color: var(--preto); cursor: pointer; text-align: left; text-transform: uppercase;
}
table.fontes th .ordenar:hover { background: var(--petroleo-20); }
table.fontes th .ordenar .seta { font-weight: 800; width: 14px; text-align: center; }
table.fontes th.sem-ordem { padding: 0 var(--espaco-3); min-height: 48px; font-size: 14px; text-transform: uppercase; }
table.fontes td { padding: var(--espaco-2) var(--espaco-3); border-bottom: 1px solid var(--fio-horizontal); vertical-align: top; min-height: 44px; }
table.fontes tbody tr:hover { background: var(--cinza-barra); }
table.fontes tbody tr.aberta { background: var(--ciano-brasileira); color: var(--on-ciano); }
table.fontes tbody tr.aberta .selo.ciano { background: var(--branco); border: 2px solid var(--petroleo-brasileira); }
table.fontes td.nome { min-width: 220px; max-width: 360px; }
table.fontes td.nome a { font-weight: 700; overflow-wrap: anywhere; }
table.fontes td .sec { display: block; font-size: 13px; color: var(--texto-autoria); margin-top: 2px; overflow-wrap: anywhere; }
table.fontes tbody tr.aberta td .sec { color: var(--on-ciano); }
.vazio { padding: var(--espaco-6); background: var(--cinza-barra); }
.vazio p { margin: 0 0 var(--espaco-3); }
.vazio ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--espaco-1); }

/* selos: status sem cor semântica (cheio = no ar, ciano = intermediário, contorno preto = problema, cinza = sem dado) */
.selo { display: inline-block; padding: 1px var(--espaco-2); font-weight: 700; font-size: 12px; line-height: 1.5; text-transform: uppercase; white-space: nowrap; }
.selo.cheio { background: var(--petroleo-brasileira); color: var(--on-petroleo); }
.selo.ciano { background: var(--ciano-brasileira); color: var(--on-ciano); }
.selo.contorno { border: 2px solid var(--preto); color: var(--preto); background: var(--branco); padding-block: 0; }
.selo.contorno-petroleo { border: 2px solid var(--petroleo-brasileira); color: var(--petroleo-brasileira); background: var(--branco); padding-block: 0; }
.selo.cinza { background: var(--cinza-barra); color: var(--texto-autoria); }
.tags { display: flex; flex-wrap: wrap; gap: var(--espaco-1); }
.tag { display: inline-block; border: 1px solid var(--petroleo-brasileira); color: var(--petroleo-brasileira); background: var(--branco); font-size: 12px; font-weight: 600; padding: 0 var(--espaco-2); line-height: 1.6; }

/* paginação */
.paginacao { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; justify-content: space-between; margin-top: var(--espaco-4); }
.paginacao .paginas { display: flex; flex-wrap: wrap; gap: var(--espaco-1); align-items: center; }
.paginacao .pg {
  min-width: var(--alvo); min-height: var(--alvo); padding: 0 var(--espaco-2); background: var(--branco); color: var(--petroleo-brasileira);
  border: 1px solid var(--borda-controle); font: 600 15px/1 var(--fonte); cursor: pointer;
}
.paginacao .pg:hover { background: var(--cinza-barra); }
.paginacao .pg[aria-current="page"] { background: var(--ciano-brasileira); border-color: var(--ciano-brasileira); color: var(--on-ciano); font-weight: 800; }
.paginacao .pg[disabled] { color: var(--texto-autoria); cursor: default; background: var(--cinza-barra); border-color: var(--cinza-barra); }
.paginacao .reticencias { padding: 0 var(--espaco-1); color: var(--texto-autoria); }
.paginacao .tamanho { display: flex; align-items: center; gap: var(--espaco-2); font-size: 14px; }
.paginacao .tamanho select { width: auto; }

/* ficha da fonte */
.ficha {
  position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--branco); overflow-y: auto;
  border-left: 3px solid var(--petroleo-brasileira); display: flex; flex-direction: column;
}
.ficha-topo { background: var(--petroleo-brasileira); color: var(--on-petroleo); padding: var(--espaco-4); position: sticky; top: 0; z-index: 2; }
.ficha-topo .linha { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--espaco-3); }
.ficha-topo .rotulo-ficha { font-weight: 700; font-size: 13px; text-transform: uppercase; }
.ficha-topo h2 { margin: var(--espaco-1) 0 var(--espaco-2); font-size: 22px; font-weight: 800; text-transform: uppercase; overflow-wrap: anywhere; }
.ficha-topo p { margin: 0; font-size: 14px; }
.ficha-topo .botao { background: var(--branco); color: var(--petroleo-brasileira); border-color: var(--branco); min-width: var(--alvo); padding: 0 var(--espaco-3); }
.ficha-topo .botao:hover { background: var(--ciano-brasileira); border-color: var(--ciano-brasileira); color: var(--on-ciano); }
.ficha-corpo { padding: var(--espaco-4); display: grid; gap: var(--espaco-6); }
.ficha-secao { border-top: 1px solid var(--borda-controle); padding-top: var(--espaco-3); }
.ficha-secao dl { margin: 0; display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: var(--espaco-1) var(--espaco-3); font-size: 15px; }
.ficha-secao dt { color: var(--texto-autoria); font-size: 14px; }
.ficha-secao dd { margin: 0; overflow-wrap: anywhere; }
.ficha-secao table { border-collapse: collapse; width: 100%; font-size: 14px; }
.ficha-secao th { text-align: left; font-weight: 600; background: var(--cinza-barra); padding: var(--espaco-1) var(--espaco-2); }
.ficha-secao td { padding: var(--espaco-1) var(--espaco-2); border-bottom: 1px solid var(--fio-horizontal); vertical-align: top; overflow-wrap: anywhere; }
.ficha-secao .nota { font-size: 13px; color: var(--texto-autoria); margin: var(--espaco-2) 0 0; }
.ficha-carregando { color: var(--texto-autoria); font-size: 14px; }
.contato-linha { display: flex; flex-wrap: wrap; gap: var(--espaco-1) var(--espaco-3); align-items: baseline; margin-bottom: var(--espaco-1); }
.contato-texto { font-weight: 600; }
.acao-contato { font-size: 14px; font-weight: 600; }
.lista-links { display: grid; gap: var(--espaco-1); }
#ficha-canais table { table-layout: fixed; }
#ficha-canais th:first-child, #ficha-canais td:first-child { width: 24%; }
#ficha-canais td a { overflow-wrap: anywhere; }
.ficha-secao .sub { margin: var(--espaco-4) 0 var(--espaco-2); font-size: 13px; font-weight: 700; text-transform: uppercase; }
#ficha-feeds .sec { color: var(--texto-autoria); font-size: 13px; }
.feed-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-3); }
.feed-lista li { display: grid; gap: 2px; padding-bottom: var(--espaco-2); border-bottom: 1px solid var(--fio-horizontal); font-size: 14px; }
.feed-tipo { font-weight: 600; }
.feed-endereco { overflow-wrap: anywhere; }
.feed-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-2); }
.feed-itens li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--espaco-2); font-size: 14px; }
.feed-data { color: var(--texto-autoria); font-variant-numeric: tabular-nums; }
.feed-titulo { overflow-wrap: anywhere; }
.barras { display: block; width: 100%; height: auto; max-height: 120px; }
.barras rect { fill: var(--petroleo-brasileira); }
.barras line { stroke: var(--borda-controle); stroke-width: 1; }
.barras text { fill: var(--texto-autoria); font: 400 11px var(--fonte); }
.fundo-ficha { position: fixed; inset: 0; z-index: 40; background: var(--petroleo-brasileira); opacity: .55; }

/* rodapé: DSC LAB só aqui */
.rodape { background: var(--petroleo-brasileira); color: var(--on-petroleo); font-size: 14px; }
.rodape .miolo { padding-block: var(--espaco-6); display: grid; gap: var(--espaco-2); }
.rodape a { color: var(--on-petroleo); }
.rodape .nome { font-weight: 800; text-transform: uppercase; font-size: 16px; }

/* ordenação por lista: só onde a tabela vira cartões */
#campo-ordenar { display: none; }

/* gaveta de filtros: de 768 a 1199 e em telefone */
.so-estreito { display: none; }
@media (max-width: 1199px) {
  .so-estreito { display: inline-flex; }
  .area { grid-template-columns: minmax(0, 1fr); }
  .filtros {
    position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(420px, 100vw); background: var(--branco); overflow-y: auto; display: none;
    border-top: 0; border-right: 3px solid var(--petroleo-brasileira); padding: 0 var(--espaco-4) 88px;
  }
  .filtros.aberto { display: block; }
  .filtros-topo {
    display: flex; justify-content: space-between; align-items: center; background: var(--petroleo-brasileira); color: var(--on-petroleo);
    margin: 0 calc(-1 * var(--espaco-4)) var(--espaco-2); padding: var(--espaco-2) var(--espaco-4); position: sticky; top: 0; z-index: 2;
  }
  .filtros-topo h2 { margin: 0; font-size: 18px; text-transform: uppercase; }
  .filtros-topo .botao { background: var(--branco); color: var(--petroleo-brasileira); border-color: var(--branco); }
  .filtros .rodape-filtros {
    display: flex; gap: var(--espaco-2); position: fixed; z-index: 61; bottom: 0; left: 0; width: min(420px, 100vw);
    padding: var(--espaco-3) var(--espaco-4); background: var(--branco); border-top: 1px solid var(--borda-controle);
  }
  .filtros .rodape-filtros .botao { flex: 1 1 auto; }
}

/* telefone e tablet estreito: cartões no lugar da tabela */
@media (max-width: 767px) {
  #campo-ordenar { display: block; min-width: 200px; }
  h1 { font-size: 24px; }
  .cabecalho .marca { height: 52px; }
  .barra-util .miolo { min-height: 40px; }
  .ficha { width: 100vw; border-left: 0; }
  .tabela-wrap { border-top: 0; overflow: visible; }
  table.fontes, table.fontes tbody, table.fontes tr, table.fontes td { display: block; width: 100%; }
  table.fontes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.fontes tr { border: 1px solid var(--borda-controle); border-top: 3px solid var(--petroleo-brasileira); margin-bottom: var(--espaco-3); padding: var(--espaco-2) 0; }
  table.fontes td { border: 0; padding: var(--espaco-1) var(--espaco-3); }
  table.fontes td::before { content: attr(data-rotulo); display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--texto-autoria); }
  table.fontes tbody tr.aberta td::before { color: var(--on-ciano); }
  table.fontes td.nome { max-width: none; }
  table.fontes td.nome::before { display: none; }
  .menu .painel-menu { position: fixed; left: var(--espaco-4); right: var(--espaco-4); top: auto; bottom: var(--espaco-4); max-width: none; min-width: 0; }
  .faceta.horizontal ul { display: block; }
  .ficha-secao dl { grid-template-columns: minmax(0, 1fr); }
  .feed-itens li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* página Notícias: filtros, aviso de atualização, dias e cartões. Status sem cor semântica: o aviso de leitura velha usa fio preto grosso e rótulo em negrito. */
select:disabled { background: var(--cinza-barra); color: var(--texto-autoria); cursor: default; }
.portal .lede { margin-bottom: var(--espaco-6); }
.filtros-noticias { display: grid; gap: var(--espaco-3); margin-bottom: var(--espaco-4); }
.filtros-noticias .busca { max-width: 720px; }
.selecoes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--espaco-3); }
.aviso-dados { margin: 0 0 var(--espaco-4); padding: var(--espaco-3) var(--espaco-4); background: var(--cinza-barra); border-left: 4px solid var(--petroleo-brasileira); font-size: 14px; }
.aviso-dados.atrasado { border-left: 8px solid var(--preto); }
.portal .cabeca-resultados { display: grid; gap: var(--espaco-2); margin-bottom: var(--espaco-4); }
.dia { margin-bottom: var(--espaco-8); }
.titulo-dia { margin: 0 0 var(--espaco-4); padding-top: var(--espaco-2); border-top: 3px solid var(--petroleo-brasileira); font-size: 20px; font-weight: 800; text-transform: uppercase; }
.cartoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-6); }
.noticia article { height: 100%; display: flex; flex-direction: column; gap: var(--espaco-2); padding-top: var(--espaco-3); border-top: 1px solid var(--borda-controle); }
.noticia .kicker { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--texto-autoria); overflow-wrap: anywhere; }
.noticia .kicker a { color: var(--texto-autoria); }
.noticia .kicker a:hover { color: var(--preto); }
.noticia .kicker .lugar { font-weight: 400; }
.noticia .manchete { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 700; text-transform: none; overflow-wrap: anywhere; }
.noticia .manchete a { color: var(--preto); text-decoration: none; }
.noticia .manchete a:hover { color: var(--petroleo-brasileira); text-decoration: underline; }
.noticia .meta { margin: auto 0 0; padding-top: var(--espaco-1); display: flex; flex-wrap: wrap; gap: var(--espaco-1) var(--espaco-2); align-items: center; font-size: 13px; color: var(--texto-autoria); }
.noticia .meta time { font-weight: 700; color: var(--preto); }
.mais-noticias { display: grid; justify-items: start; gap: var(--espaco-3); margin: var(--espaco-6) 0; }
.nota-final { margin: 0; font-size: 14px; color: var(--texto-autoria); }
.vazio .linha-acoes { margin-top: var(--espaco-2); }
.como-ler { margin-top: var(--espaco-8); border-top: 1px solid var(--borda-controle); }
.como-ler > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 700; font-size: 18px; text-transform: uppercase; }
.como-ler ul { margin: 0 0 var(--espaco-4); padding-left: var(--espaco-6); display: grid; gap: var(--espaco-2); max-width: 80ch; font-size: 15px; }
@media (max-width: 1199px) {
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selecoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cartoes { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-4); }
  .selecoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .titulo-dia { font-size: 18px; }
  .noticia .manchete { font-size: 19px; }
}
/* capa editorial: abas, manchete, cobertura, últimas, destaques, em alta, editorias e pelo Brasil. Hierarquia só por tamanho, peso e fio: sem cor nova, sem sombra. */
.selecoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.abas { display: flex; flex-wrap: wrap; gap: var(--espaco-1); border-bottom: 3px solid var(--petroleo-brasileira); margin: 0 0 var(--espaco-4); }
.aba {
  background: var(--branco); color: var(--petroleo-brasileira); border: 2px solid var(--petroleo-brasileira); border-bottom: 0; min-height: var(--alvo);
  padding: 0 var(--espaco-6); font: 700 15px/1 var(--fonte); text-transform: uppercase; cursor: pointer;
}
.aba:hover { background: var(--cinza-barra); color: var(--preto); }
.aba[aria-selected="true"] { background: var(--petroleo-brasileira); color: var(--on-petroleo); }
.aba[aria-selected="true"]:hover { background: var(--preto); }
.filtros-capa { display: flex; flex-wrap: wrap; gap: var(--espaco-3); margin-bottom: var(--espaco-2); }
.filtros-capa .campo { min-width: 240px; }
.capa-estado { margin: 0 0 var(--espaco-4); font-size: 13px; color: var(--texto-autoria); min-height: 1.4em; }
.capa { display: grid; gap: var(--espaco-8); }
.capa-topo { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--espaco-8); align-items: start; }
.manchete-principal { border-top: 4px solid var(--petroleo-brasileira); padding-top: var(--espaco-4); display: grid; gap: var(--espaco-3); }
.kicker-editoria { margin: 0; display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-3); align-items: center; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--texto-autoria); }
.kicker-editoria:empty { display: none; }
.selo-editoria { display: inline-block; background: var(--ciano-brasileira); color: var(--on-ciano); font-weight: 800; font-size: 12px; line-height: 1.6; padding: 0 var(--espaco-2); }
.manchete-titulo { margin: 0; font-size: 44px; line-height: 1.05; font-weight: 800; text-transform: none; overflow-wrap: anywhere; }
.manchete-titulo a, .destaque-titulo a, .bloco-lead h3 a, .titulo-curto a, .ultima-titulo a { color: var(--preto); text-decoration: none; }
.manchete-titulo a:hover, .destaque-titulo a:hover, .bloco-lead h3 a:hover, .titulo-curto a:hover, .ultima-titulo a:hover { color: var(--petroleo-brasileira); text-decoration: underline; }
.meta-historia { margin: 0; font-size: 14px; color: var(--texto-autoria); overflow-wrap: anywhere; }
.cobertura { border-top: 1px solid var(--borda-controle); padding-top: var(--espaco-1); }
.cobertura > summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; font-weight: 700; font-size: 13px; text-transform: uppercase; }
.cobertura-lista { list-style: none; margin: var(--espaco-1) 0 0; padding: 0; display: grid; gap: var(--espaco-2); font-size: 14px; }
.cobertura-lista li { display: grid; gap: 2px; padding-bottom: var(--espaco-2); border-bottom: 1px solid var(--fio-horizontal); overflow-wrap: anywhere; }
.fonte-nome { font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--texto-autoria); }
.fonte-nome .lugar { font-weight: 400; }
.cobertura-lista .mais-fontes { font-size: 13px; color: var(--texto-autoria); border-bottom: 0; }
.variante-titulo { margin: 0; font-weight: 600; line-height: 1.25; }
.variante-qtd { display: inline-block; margin-right: var(--espaco-2); font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--texto-autoria); }
.variante-fontes { margin: 0; font-size: 13px; color: var(--texto-autoria); line-height: 1.5; }
.variante-fontes a { color: var(--petroleo-brasileira); }
.edicao { margin: 0; padding: var(--espaco-2) 0; border-bottom: 1px solid var(--borda-controle); font-size: 14px; color: var(--texto-autoria); }
.edicao strong { color: var(--preto); }
.atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); }
.atalhos-rotulo { font-weight: 800; font-size: 14px; text-transform: uppercase; margin-right: var(--espaco-2); }
.atalho { min-height: 36px; padding: 0 var(--espaco-3); background: var(--cinza-barra); color: var(--preto); border: 0; font: 600 14px/1.2 var(--fonte); cursor: pointer; }
.atalho:hover { background: var(--petroleo-brasileira); color: var(--on-petroleo); }
.secao-titulo { margin: 0 0 var(--espaco-3); font-size: 20px; font-weight: 800; text-transform: uppercase; }
.ultimas { border-top: 4px solid var(--petroleo-brasileira); padding-top: var(--espaco-4); }
.ultimas-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.ultimas-lista li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--espaco-3); padding: var(--espaco-2) 0; border-top: 1px solid var(--fio-horizontal); }
.ultimas-lista time { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.ultima-corpo { display: grid; gap: 2px; min-width: 0; }
.ultima-titulo { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.ultima-fonte { font-size: 13px; color: var(--texto-autoria); overflow-wrap: anywhere; }
.capa-principal { display: grid; gap: var(--espaco-6); min-width: 0; }
.destaques-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-6); }
.destaque article { border-top: 3px solid var(--petroleo-brasileira); padding-top: var(--espaco-3); display: grid; gap: var(--espaco-2); align-content: start; height: 100%; }
.destaque-titulo { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 800; text-transform: none; overflow-wrap: anywhere; }
.em-alta { border-top: 1px solid var(--borda-controle); border-bottom: 1px solid var(--borda-controle); padding: var(--espaco-3) 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-3); }
.em-alta .secao-titulo { margin: 0; font-size: 16px; }
.em-alta-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.em-alta-lista a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--espaco-3); background: var(--branco); color: var(--petroleo-brasileira); border: 2px solid var(--petroleo-brasileira); font-weight: 700; text-decoration: none; }
.em-alta-lista a:hover { background: var(--petroleo-brasileira); color: var(--on-petroleo); }
.blocos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-8) var(--espaco-6); }
.bloco-editoria { display: grid; gap: var(--espaco-3); align-content: start; }
.bloco-titulo { margin: 0; padding-top: var(--espaco-2); border-top: 4px solid var(--petroleo-brasileira); font-size: 20px; font-weight: 800; text-transform: uppercase; }
.bloco-lead h3 { margin: 0 0 var(--espaco-1); font-size: 22px; line-height: 1.15; font-weight: 800; text-transform: none; overflow-wrap: anywhere; }
.lista-curta { list-style: none; margin: 0; padding: 0; display: grid; }
.lista-curta li { display: grid; gap: 2px; padding: var(--espaco-2) 0; border-top: 1px solid var(--fio-horizontal); }
.titulo-curto { font-weight: 600; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.ver-todas { font-weight: 700; font-size: 14px; text-transform: uppercase; }
.regioes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--espaco-4); }
.regiao h3 { margin: 0 0 var(--espaco-2); padding-top: var(--espaco-2); border-top: 3px solid var(--petroleo-brasileira); font-size: 16px; text-transform: uppercase; }
.regiao h3 a { color: var(--preto); text-decoration: none; }
.regiao h3 a:hover { color: var(--petroleo-brasileira); text-decoration: underline; }
.sem-regiao { margin: 0; font-size: 13px; color: var(--texto-autoria); }
.ver-lista { margin: 0; }
@media (max-width: 1199px) {
  .selecoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capa-topo { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-6); }
  .blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regioes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .selecoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aba { flex: 1 1 0; padding: 0 var(--espaco-2); }
  .filtros-capa .campo { min-width: 0; flex: 1 1 140px; }
  .manchete-titulo { font-size: 32px; }
  .destaque-titulo, .bloco-lead h3 { font-size: 21px; }
  .destaques-lista, .blocos, .regioes { grid-template-columns: minmax(0, 1fr); }
  .capa { gap: var(--espaco-6); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }