/* ============================================================
   base.css — folha ÚNICA de componentes do MARÉ (v3.1.1, 07/09/2026)
   Regras da auditoria de consistência de 07/09/2026:
   · nenhuma página tem <style> próprio nem font-size / font-weight / line-height inline;
   · todo valor vem de assets/tokens.css (escala tipográfica de 8 degraus, escala de
     espaçamento de 9 degraus, grade, dimensões de figura);
   · elementos com a mesma função usam o mesmo componente desta folha;
   · figuras (mapa · gráfico · tabela · diagrama · barras) usam o componente .figura,
     numerado automaticamente a partir de 1 pelo contador CSS `figura`;
   · cartões de texto usam .cartao; painéis de seção usam .panel; legendas .map-legend;
     créditos .fonte-figura (formato único: "Fonte: … · Atualização: dd/mm/aaaa").
   Portões: verificar_estrutura.js · verificar_figuras.js · verificar_consistencia_visual.js.
   Ordem: 1 base · 2 grade · 3 tipografia · 4 masthead e navegação · 5 painel · 6 figura ·
   7 cartão · 8 tabela · 9 formulários e botões · 10 medidor e contador (inicial) ·
   11 estados e cartões da inicial · 12 prazos e barras · 13 situação e lacunas ·
   14 Proteja-se · 15 Pesquisadores · 16 rodapé · 17 utilitários · 18 responsivo · 19 impressão.
   ============================================================ */

/* ===== 1. Base ===== */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-corpo); font-size:var(--fs-body); line-height:var(--lh-body); font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;}
img, svg, canvas, video{max-width:100%; height:auto;}
figure{margin:0;}
/* Marca (23/09/2026): BIOLUZ, "o vivo", era token declarado e sem uso — metade da tensão
   bioluz × sintético que define a marca não aparecia em lugar nenhum. Entra aqui, e só aqui:
   a seleção de texto. É o detalhe que "acende" sem preencher área grande, e é interface pura —
   não carrega significado de dado, então não disputa com a codificação de cor do índice
   (chuva/seca/fogo, status), que é onde a cor tem sentido semântico e não pode ser decoração.
   O sintético segue sendo o acento de ação (--link). Um por vez, como a marca manda.
   Contraste do texto sobre a seleção: 10,5:1. */
::selection{background:var(--bioluz); color:var(--vazio);}
a{color:var(--link); text-decoration:underline; text-underline-offset:2px;}
a:hover{color:var(--ink);}
:focus-visible{outline:2px solid var(--link); outline-offset:2px; border-radius:3px;}
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--link); outline-offset:2px;}
.uf-path:focus-visible{stroke:var(--link); stroke-width:2; outline:none;}
details > summary{padding:var(--sp-2) 0; min-height:var(--sp-5); cursor:pointer; color:var(--link); font-weight:var(--peso-semibold);}
.skip{position:absolute; left:-9999px; top:var(--sp-2); background:var(--ink); color:var(--gauge-osso); padding:var(--sp-2) var(--sp-3); border-radius:var(--radius); z-index:300; font-family:var(--font-corpo);}
.skip:focus{left:var(--sp-2);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{transition:none !important; animation:none !important;} html{scroll-behavior:auto;} }

/* ===== 2. Grade =====
   Contêiner de 1180 px; grades de figuras/cartões com 2 colunas (≥1021 px) e 1 coluna abaixo; gap único. */
.wrap{max-width:var(--grade-max); margin:0 auto; padding:var(--sp-6) var(--grade-margem) var(--sp-8);}
main{display:block;}
.grade-figuras{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--esp-grade);}
.grade-figuras > *{min-width:0;}
.grade-figuras--1{grid-template-columns:minmax(0, 1fr);}
.grade-figuras--3{grid-template-columns:repeat(3, minmax(0, 1fr));}   /* 15/09/2026: mapas e gráficos lado a lado quando cabem três */
.grade-figuras--3 .figura-titulo{min-height:calc(3 * var(--fs-h4) * var(--lh-h4));}   /* a um terço da largura, títulos-fato ocupam até três linhas: reserva fixa para as três figuras alinharem */
.grade-figuras--3 .figura-sub{min-height:calc(3 * var(--fs-caption) * var(--lh-caption));}
/* 15/09/2026 (Para gestores): passos numerados do caminho até o plano publicado; checklist com caixa */
.passos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-3);}
.passos li{display:flex; gap:var(--sp-3); align-items:flex-start; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:var(--sp-3) var(--sp-4); font-size:var(--fs-small); line-height:var(--lh-small);}
.passos li b{flex:none; width:32px; height:32px; border-radius:50%; background:var(--musgo); color:var(--branco); font-family:var(--font-dado); font-weight:var(--peso-bold); display:flex; align-items:center; justify-content:center;}
.passos li strong{display:block; margin-bottom:2px;}
/* 25/10/2026: variante em linha (Para gestores): lista vertical ligada por fio; o bloco "tem" lista o que cada passo exige */
.passos--linha{display:block;}
.passos--linha li{position:relative; border:0; background:none; padding:0 0 var(--sp-5); font-size:var(--fs-body); line-height:var(--lh-body);}
.passos--linha li::before{content:""; position:absolute; left:15px; top:36px; bottom:4px; width:2px; background:var(--line);}
.passos--linha li:last-child::before{display:none;}
.passos--linha li b{background:var(--rust);}
.passos--linha li>span{flex:1; min-width:0;}
.passos--linha strong{font-family:var(--font-titulo); font-size:var(--fs-h4); font-weight:400; margin-bottom:var(--sp-1);}
.passos--linha .faz{margin:0 0 var(--sp-2); color:var(--muted);}
.passos--linha .tem p{margin:0 0 var(--sp-1); font-family:var(--font-dado); font-size:var(--fs-caption); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.passos--linha .tem .lei{margin:var(--sp-2) 0 0; font-family:inherit; letter-spacing:0; text-transform:none;}
.passos--linha .tem ul{margin:0; padding-left:var(--sp-4); columns:2; column-gap:var(--sp-5); font-size:var(--fs-small);}
.passos--linha .tem li{display:list-item; padding:0 0 var(--sp-1); font-size:var(--fs-small); break-inside:avoid;}
.passos--linha .tem li::before{display:none;}
.passos--linha .tem ul.curta{columns:1;}
.checklist{list-style:none; margin:0; padding:0; columns:1; font-size:var(--fs-small); line-height:var(--lh-small);}
.checklist li{position:relative; padding-left:var(--sp-5); margin:0 0 var(--sp-2);}
.checklist li::before{content:"☐"; position:absolute; left:0; top:0; color:var(--muted);}
.lista-definicao{margin:var(--sp-2) 0 0; font-size:var(--fs-small); line-height:var(--lh-small);}
.lista-definicao dt{font-weight:var(--peso-semibold); margin-top:var(--sp-2);}
.lista-definicao dd{margin:0; color:var(--muted);}
.grade-cartoes{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--esp-grade);}
.grade-cartoes > *{min-width:0;}
.grade-cartoes--1{grid-template-columns:minmax(0, 1fr);}   /* 15/09/2026: cartões empilhados em coluna única (FAQ da Imprensa) */
/* 15/09/2026: release em coluna única, sem caixa — texto corrido como o resto da página */
.release{columns:1; max-width:none;}
.release p:not(.note):not(.selo){columns:1; max-width:none; margin:0 0 var(--sp-3); font-size:var(--fs-body); line-height:var(--lh-body);}
.release .selo{margin-bottom:var(--sp-2);}
.release-titulo{font-family:var(--font-titulo); font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:var(--peso-display); margin:0 0 var(--sp-2);}
.release-sub{font-size:var(--fs-lead, 18px); line-height:1.5; color:var(--muted); margin:0 0 var(--sp-4) !important;}
.grade-figuras + .grade-figuras, .grade-cartoes + .grade-figuras, .grade-figuras + .grade-cartoes{margin-top:var(--esp-grade);}
.comoler-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:0 var(--sp-6);}
.comoler-grid p{margin:0 0 var(--sp-2);}

/* ===== 3. Tipografia =====
   Uma regra por degrau. Títulos em Fraunces peso regular (nunca bold); dado e versalete em Archivo Narrow. */
h1, h2, h3, h4{font-family:var(--font-titulo); font-weight:var(--peso-display); color:var(--ink); margin:0;}
h1{font-size:var(--fs-h1); line-height:var(--lh-h1); margin:0 0 var(--esp-titulo);}
h2{font-size:var(--fs-h2); line-height:var(--lh-h2); margin:0 0 var(--esp-titulo);}
/* Páginas de dados (body.pagina-dados): seções numeradas por assets/colunas.js (índice + 1 → "1 · ", "2 · "…), nunca à mão. */
.secao-num{font-variant-numeric:tabular-nums;}
small{font-size:var(--fs-caption); line-height:var(--lh-caption);}
h3{font-size:var(--fs-h3); line-height:var(--lh-h3); margin:0 0 var(--esp-titulo);}
h4{font-size:var(--fs-h4); line-height:var(--lh-h4); margin:0 0 var(--esp-titulo);}
main > h2, .panel > h2 + .grade-figuras, .panel > h2 + .grade-cartoes{margin-top:0;}
.panel h2 + .grade-figuras, .panel h2 + .grade-cartoes, .panel h2 + .tbl-wrap, .panel h2 + .prazos-barras{margin-top:var(--sp-4);}
p{margin:0 0 var(--sp-3);}
p:last-child{margin-bottom:0;}
ul, ol{margin:0 0 var(--sp-3); padding-left:var(--sp-5);}
li{margin:0 0 var(--sp-2);}
strong, b{font-weight:var(--peso-semibold);}
/* Marca: nunca bold no display — <strong> dentro de título não engrossa a Fraunces. */
h1 strong, h2 strong, h3 strong, h4 strong, h1 b, h2 b, h3 b, h4 b,
.site-title strong, .site-title b, .hero-lede strong, .hero-lede b{font-weight:var(--peso-display);}
em{font-style:italic;}
code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:var(--fs-small);}
.hint{font-size:var(--fs-body); line-height:var(--lh-body); color:var(--muted); margin:0 0 var(--sp-4);}
.note{font-size:var(--fs-small); line-height:var(--lh-small); color:var(--muted); margin:0 0 var(--sp-2);}
.sub{font-size:var(--fs-small); color:var(--muted); font-weight:var(--peso-regular);}
.selo, .mast-sub{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); font-weight:var(--peso-semibold); letter-spacing:var(--ls-caps-largo); text-transform:uppercase; margin:0 0 var(--sp-2);}
/* Marca (23/09/2026): o selo usava --teal (SINTÉTICO puro, #5E7C93), que sobre
   branco dá 4,39:1 — abaixo do AA de 4,5:1 que a própria marca exige. Passam a --link
   (#4F6B80, 5,60:1), que é o sintético escurecido já usado como cor de texto no site: mesma
   família, mesmo acento, sem hex novo. Defeito pré-existente, achado pela varredura de
   contraste da marca. */
.selo{color:var(--link);}
.mast-sub{color:var(--muted); margin:0 0 var(--sp-4);}
/* 22/09/2026 (§155): tag do card do município — 'prioritário' (aproximação do Cadastro Nacional). Mesma família tipográfica dos selos. */
.tag{display:inline-block; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:1.4; font-weight:var(--peso-semibold); letter-spacing:var(--ls-caps); text-transform:uppercase; padding:0 .45em; border-radius:3px; vertical-align:middle;}
.tag--prior{background:var(--teal); color:#fff;}
.rotulo{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--muted);}
.dado{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted);}
/* 15/09/2026 (pedido da editoria): textos explicativos ocupam a largura toda do painel — a medida de leitura (68ch) fica só para a citação e para o texto de prazos. */
.panel > p, .panel .hint, .hero-lede{max-width:none;}
.bloco-citacao p{max-width:var(--medida-leitura);}
.hero-lede{font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-h3); line-height:var(--lh-h3); margin:var(--sp-3) 0 var(--sp-3);}
.hero-scope{margin:var(--sp-4) 0 0; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--muted);}
.hero-links{margin:var(--sp-3) 0 0; font-size:var(--fs-body);}
.hero-links a{margin-right:var(--sp-4);}
.site-sub{color:var(--muted); font-size:var(--fs-body); max-width:none; margin:0;}
.fontes-list{font-size:var(--fs-small); line-height:var(--lh-body); margin:0; padding-left:var(--sp-4); color:var(--ink);}
.fontes-list li{margin:0 0 var(--sp-2);}
.lista-simples{list-style:none; padding:0; margin:0;}

/* ===== 4. Masthead e navegação ===== */
.grad-line{height:2px; border:none; margin:0; background:var(--green);}
header.masthead{display:block; margin-bottom:var(--sp-6);}
.mast-top{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4) var(--sp-5); flex-wrap:wrap; margin-bottom:var(--sp-5);}
.mast-logo{display:block; line-height:0; text-decoration:none;}
.logo-futura{height:26px; width:auto; display:block;}
.mainnav{display:flex; gap:var(--sp-1); flex-wrap:wrap; flex-basis:100%;}
.mainnav a, .mainnav span{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); font-weight:var(--peso-semibold); letter-spacing:var(--ls-nav); text-transform:uppercase; color:var(--muted); text-decoration:none; white-space:nowrap; padding:0 var(--sp-2); border:1px solid var(--line); border-radius:var(--radius); min-height:36px; display:inline-flex; align-items:center; transition:color .15s, border-color .15s, background .15s;}
/* 27/09/2026 (pedido da editoria): "os botões como uma peça única". O degradê vive na BARRA e
   atravessa todos eles; cada botão mostra a fatia que lhe cabe. Não há emenda porque não há dois
   pintados — há um só. Isso substitui as dez regras `:nth-child` de cor que existiam aqui, e com
   elas some a lista escrita à mão que envelhecia a cada item novo no menu.
   Os botões ESTICAM (`flex:1 1 auto`) para preencher a linha: com largura de conteúdo sobrava
   cor no fim da faixa. Como o `flex-wrap` distribui a folga por linha, a última também fecha. */
.mainnav{background-image:var(--degrade-menu); border-radius:var(--radius); padding:var(--sp-1); gap:var(--sp-1);}
.mainnav > :is(a, span){flex:1 1 auto; justify-content:center; text-align:center; background:none; color:var(--branco); border-color:rgba(255,255,255,.30);}
.mainnav > :is(a, span):hover{border-color:var(--branco); border-width:1.5px; text-decoration:none;}
.mainnav > :is(a, span).btn-nav{border-width:2px;}
/* A página corrente em branco: entre dez botões de cor, o único branco é o que se destaca, e não
   gasta mais uma cor. Texto --ink sobre branco mede 19,2:1. */
.mainnav > :is(a, span).ativa, .mainnav > :is(a, span).ativa:hover{background:var(--branco); color:var(--ink); border-color:var(--branco);}
.mainnav > :is(a, span).ativa.btn-nav{cursor:default;}
.mainnav .nav-sep{display:none;}
.site-title{font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--ls-titulo); color:var(--ink); margin:0 0 var(--sp-2);}
.site-title em{font-style:italic; font-weight:var(--peso-regular);}
/* 18/09/2026 (pedido da editoria): o logotipo do MARÉ substitui o texto "MARÉ" + subtítulo do
   masthead — o <h1>/<p> continua existindo por semântica e acessibilidade (texto em .sr-only), mas
   visualmente mostra o SVG do logotipo (fundo claro), embutido inline (não <img>) para herdar as
   fontes da página — um <img src="...svg"> não carrega fontes web referenciadas por @import. */
.site-title--logo{margin:0 0 var(--sp-4);}
/* 26/09/2026 (pedido da editoria): 320px → 420px. Junto, o descritor "· MONITOR DE ANTECIPAÇÃO
   E RESPOSTA AO EL NIÑO" saiu de dentro do SVG, onde era desenhado a 9,5px do viewBox e chegava
   à tela a 7,6px — abaixo do piso de 12px da própria escala do site, e ilegível. Ele agora é
   texto de verdade (.site-nome), no tamanho da escala, selecionável e pesquisável. */
.site-title--logo svg{display:block; width:420px; height:auto; max-width:100%;}
.site-nome{display:block; font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-titulo); color:var(--ink); margin:var(--sp-2) 0 0;}
/* 27/09/2026 (pedido da editoria, tomando o site da Futura como referência): o que fazia este
   topo parecer institucional não era cor nem moldura — era ESCALA e AR. A marca era um logotipo
   de canto ao lado de um título do mesmo tamanho, tudo apertado e separado por filete.
   Agora: a marca é o elemento dominante (620px), o nome é declaração em Fraunces no topo da escala,
   e a descrição ocupa coluna estreita — ela corria 1132px, cerca de 110 caracteres por linha,
   contra os 45 a 75 da medida confortável. A separação é por ESPAÇO, não por filete.
   Princípios da referência, não a composição dela: o `CLAUDE.md` diz que as duas marcas têm
   parentesco visual "sem ser gêmea" e proíbe copiar o leiaute de uma na outra. */
/* 30/09/2026 (item 2 da fila viva, opção B): o logo deixa de abrir a página sozinho e passa a ser
   o topo da coluna esquerda, com o título logo abaixo. O SVG não muda — nem viewBox, nem régua,
   nem onda, nem gradiente. Muda o contêiner. */
.masthead .site-title--logo{display:block; margin:0;}
.masthead .site-title--logo svg{width:min(620px, 80%); max-width:100%;}
/* Coluna esquerda com a largura que o bloco logo+título pede; o resto vai para a descrição, que
   fica centrada verticalmente em relação a ele (align-items:center). O column-gap é o mesmo
   token que a abertura já usava. */
.mast-abertura{display:grid; grid-template-columns:minmax(0,540px) minmax(0,1fr); column-gap:var(--sp-7); align-items:center; margin:0 0 var(--sp-6);}
.mast-marca{min-width:0;}
.site-nome-p{margin:0;}
.site-nome{display:block; font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--ls-titulo); color:var(--ink); max-width:none; margin:var(--sp-4) 0 0;}
/* 19/10/2026 (editoria): a abertura da inicial lê menor do tablet para cima. No celular fica em
   `--fs-body`: 14 px num parágrafo de quatro frases aperta demais em tela estreita. */
.site-intro{font-size:var(--fs-small); line-height:var(--lh-small); color:var(--muted); max-width:52ch; margin:0;}
.masthead--mini .site-title--logo{margin:0 0 var(--sp-1);}
.masthead--mini .site-title--logo svg{width:210px;}
.masthead--mini .site-nome{font-size:var(--fs-h4); line-height:var(--lh-h4); margin-top:var(--sp-1);}
.masthead--mini .site-title{font-size:var(--fs-h2); line-height:var(--lh-h2); margin-bottom:var(--sp-1);}
.masthead--mini .mast-sub{margin-bottom:var(--sp-3);}
/* 15/09/2026 (pedido da editoria): subtítulo em largura total; o bloco de metadados desce para a linha seguinte. */
.mast-body{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); margin-bottom:var(--sp-5);}
.mast-body > *{min-width:0;}
.mast-body .site-sub{flex:none; width:100%;}
.subnav{position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line); margin:0 0 var(--sp-5); padding:var(--sp-2) 0; display:flex; gap:var(--sp-2); flex-wrap:wrap;}
.subnav a{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); font-weight:var(--peso-semibold); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--ink); text-decoration:none; white-space:nowrap; flex:none; padding:0 var(--sp-3); min-height:36px; display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--surface);}
.subnav a:hover{border-color:var(--ink); text-decoration:none;}

/* ===== 5. Painel (seção) ===== */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--esp-painel); margin:0 0 var(--esp-secao); box-shadow:var(--sombra); max-width:100%; min-width:0;}
.panel > h2:first-child, .panel > .selo:first-child + h2{margin-top:0;}
.panel--acento-teal{border-top:3px solid var(--teal);}
.panel--acento-rust{border-top:3px solid var(--rust);}
.panel--acento-ink{border-top:3px solid var(--ink);}
.panel--acento-link{border-top:3px solid var(--link);}
.panel--acento-musgo{border-top:3px solid var(--musgo);}
.panel--destaque{border-left:4px solid var(--teal);}
.panel .panel{box-shadow:none;}
.hero{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--esp-painel); margin:0 0 var(--esp-secao); box-shadow:var(--sombra); position:relative; overflow:hidden;}
.hero h2{margin:0 0 var(--esp-titulo);}
details.acc{border-top:1px solid var(--line); margin:0;}
details.acc:last-of-type{border-bottom:1px solid var(--line);}
details.acc + h3{margin-top:var(--esp-secao);}   /* grupo seguinte de sanfonas: o título não cola na linha */
details.acc > .panel, details.acc > .cartao{border:none; border-radius:0; margin:0; padding:var(--sp-1) 0 var(--sp-5); box-shadow:none;}
details.acc .acc-summary{list-style:none; cursor:pointer; padding:var(--sp-4) 0; font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-h3); line-height:var(--lh-h3); color:var(--ink); display:flex; align-items:center; justify-content:space-between;}
details.acc .acc-summary::-webkit-details-marker{display:none;}
details.acc .acc-summary::after{content:"+"; font-family:var(--font-corpo); font-size:var(--fs-h3); color:var(--teal); margin-left:var(--sp-3);}
details.acc[open] .acc-summary::after{content:"–";}
details.acc .acc-summary:hover{color:var(--teal);}
details.acc > .panel > h2:first-of-type{display:none;}   /* já mostrado no <summary> */
/* 17/09/2026 (pedido da editoria): os três guias de cenário ("Como se proteger") ficavam idênticos aos
   demais acordeões do site (linha fina, "+", sem cor) no estado fechado — que é o que a maioria vê
   primeiro, antes de abrir. Reaproveita a mesma cor de risco que a ficha já usa quando aberta (não
   inventa paleta nova), com ícone, para o resumo já comunicar do que se trata antes do clique.
   Sobrescreve details.acc genérico (usado em "Ver em tabela", contatos etc.), que continua igual. */
details.acc.r-chuva, details.acc.r-seca, details.acc.r-fogo{border-top:none; margin:0 0 var(--sp-3);}
details.acc.r-chuva:last-of-type, details.acc.r-seca:last-of-type, details.acc.r-fogo:last-of-type{border-bottom:none;}
details.acc.r-chuva > .acc-summary, details.acc.r-seca > .acc-summary, details.acc.r-fogo > .acc-summary{gap:var(--sp-3); padding:var(--sp-4); background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--mineral); border-radius:var(--radius); box-shadow:var(--sombra); font-size:var(--fs-h4); line-height:var(--lh-h4);}
details.acc.r-chuva[open] > .acc-summary, details.acc.r-seca[open] > .acc-summary, details.acc.r-fogo[open] > .acc-summary{border-radius:var(--radius) var(--radius) 0 0; box-shadow:none; margin-bottom:0;}
details.acc.r-chuva > .acc-summary{border-left-color:var(--chuva);}
details.acc.r-seca > .acc-summary{border-left-color:var(--seca);}
details.acc.r-fogo > .acc-summary{border-left-color:var(--fogo);}
details.acc.r-chuva .ficha, details.acc.r-seca .ficha, details.acc.r-fogo .ficha{border-radius:0 0 var(--radius) var(--radius); border-top:none; margin-top:0;}
.acc-icone{flex:none; display:flex; color:inherit;}
.acc-titulo{display:flex; align-items:center; gap:var(--sp-3); text-align:left;}
details.acc.r-chuva .acc-icone{color:var(--chuva);}
details.acc.r-seca .acc-icone{color:var(--seca);}
details.acc.r-fogo .acc-icone{color:var(--fogo);}

/* ===== 6. Figura científica (componente único) =====
   Estrutura obrigatória, nesta ordem:
     <figure class="figura figura--mapa|--grafico|--tabela|--diagrama|--barras [figura--largo] map-box|chart-box" id="…">
       <p class="figura-cat">categoria (opcional)</p>
       <h3 class="figura-titulo">Título</h3>
       <p class="figura-sub">período · variável · unidade</p>
       <div class="figura-midia"> svg | .canvas-wrap>canvas | .tbl-wrap>table | .prazos-barras </div>
       <div class="map-legend">…</div>
       <p class="figura-leitura">leitura do dado (opcional)</p>
       <div class="fonte-figura">Fonte: … · Atualização: dd/mm/aaaa</div>   (o JS acrescenta via MonitorMapas.credito)
     </figure>
   O número ("Figura N") é gerado pelo contador CSS `figura`, reiniciado por página, a partir de 1.
   `map-box` / `chart-box` são apenas ganchos dos portões (tipo de mídia); não têm estilo próprio. */
.figura{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--esp-figura); margin:0; box-shadow:var(--sombra); display:flex; flex-direction:column; max-width:100%; min-width:0;}
.figura[hidden]{display:none;}   /* 13/09/2026: .figura força display:flex, que sobrepõe [hidden] da UA stylesheet — precisa da regra explícita (mesmo padrão de .detail[hidden] acima) */
.figura--largo{grid-column:1 / -1;}
.figura-cat{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--link); margin:0 0 var(--sp-1);}
.figura-titulo{font-family:var(--font-titulo); font-size:var(--fs-h4); line-height:var(--lh-h4); font-weight:var(--peso-display); color:var(--ink); margin:0 0 var(--sp-1); min-height:calc(2 * var(--fs-h4) * var(--lh-h4));}
/* §205: a legenda e a fonte eram tipograficamente IDÊNTICAS — mesma família, mesmo tamanho, mesma
   entrelinha, mesma cor. O §11 da governança editorial exige quatro funções separadas (título,
   legenda, nota, fonte) e proíbe comprimi-las; pela forma, o leitor não distinguia legenda de
   crédito. A diferença vem por PESO, como o §14 da direção de arte pede — hierarquia não é só
   tamanho —, o que preserva a escala fixa de oito degraus e não toca em contraste: mesma cor,
   mesmo tamanho, peso diferente. */
.figura-sub{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:var(--ls-caps); font-weight:var(--peso-medio); color:var(--muted); margin:0 0 var(--esp-figura-legenda); min-height:calc(2 * var(--fs-caption) * var(--lh-caption));}
/* 17/09/2026 (pedido da editoria): gráfico do ONI no padrão dos sites oficiais — fundo preto,
   vermelho acima da média, azul abaixo, com transparência. Escopado só a essa figura. */
.grafico-preto{background:#000; border-radius:var(--radius); padding:var(--sp-3);}
/* 30/09/2026 (F.1): os dois gráficos do Pacífico em fundo de OCEANO NOTURNO — mesma família de
   fundo escuro do mapa de fogo, não o preto puro de antes. Preto puro com barra vermelha é o
   padrão dos sites de agência; aqui o escuro pertence à mesma paleta do resto da página. */
.grafico-oceano{background:var(--grafico-oceano); border-radius:var(--radius); padding:var(--sp-2);}
.figura-midia{width:100%; min-width:0; position:relative;}
.figura--mapa .figura-midia{aspect-ratio:var(--mapa-proporcao);}
.figura--mapa .figura-midia > svg{width:100%; height:100%; display:block;}
/* 15/09/2026: figura dupla (mapa + gráfico no mesmo quadro, uma legenda) — duas colunas a partir do tablet, uma no celular */
.figura--dupla .figura-midia{aspect-ratio:auto; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--esp-grade); align-items:center;}
/* Mapa mais largo que os dados ao lado (24/10/2026, listas federais): os pontos crescem com o mapa. */
.figura--dupla-larga .figura-midia{grid-template-columns:minmax(0, 3fr) minmax(0, 2fr);}
.figura--dupla .midia-mapa{aspect-ratio:var(--mapa-proporcao); min-width:0;}
.figura--dupla .midia-mapa > svg{width:100%; height:100%; display:block;}
.figura--dupla .canvas-wrap{height:var(--grafico-altura); min-width:0;}
.figura--grafico .figura-midia, .figura--grafico .canvas-wrap{height:var(--grafico-altura);}
.figura--grafico.figura--largo .figura-midia, .figura--grafico.figura--largo .canvas-wrap{height:var(--grafico-altura-largo);}
.figura--grafico .figura-midia > canvas, .canvas-wrap > canvas{max-width:100% !important;}
.figura--diagrama .figura-midia > svg{width:100%; height:auto; display:block;}
.figura--tabela .figura-midia .tbl-wrap{max-height:var(--tabela-altura-max);}
/* Quadro de mortalidade da Saúde (01/11/2026): uma linha por mês, quatro colunas; em 375 px cada mês vira um bloco com o rótulo acima do valor. */
.mort-l{display:grid; grid-template-columns:80px repeat(4, minmax(0, 1fr)); gap:var(--sp-4); align-items:start; padding:var(--sp-4) 0; border-top:1px solid var(--line);}
.mort-h{border-top:0; padding-top:0;}
.mort-h > div{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); text-transform:uppercase; letter-spacing:1px; color:var(--muted);}
.mort-h b{display:block; font-family:var(--font-corpo); font-size:var(--fs-small); line-height:var(--lh-small); text-transform:none; letter-spacing:0; color:var(--ink); font-weight:600;}
.mort-mes{font-weight:600;}
.mort-v{font-size:var(--fs-h4); line-height:var(--lh-h4); font-weight:600; font-variant-numeric:tabular-nums;}
.mort-s{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); font-variant-numeric:tabular-nums;}
.mort-l > div[data-rot]::before{content:attr(data-rot); display:none; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); text-transform:uppercase; letter-spacing:1px; color:var(--muted);}
.mort .trilho{position:relative; height:var(--sp-4); background:var(--surface-2); margin:0 var(--sp-2) var(--sp-2);}
.mort .faixa{position:absolute; top:var(--sp-1); height:var(--sp-2); background:var(--faixa-3);}
.mort .pt{position:absolute; top:0; width:var(--sp-4); height:var(--sp-4); margin-left:calc(var(--sp-2) * -1); border-radius:50%; box-sizing:border-box; background:var(--link);}
.mort .pt.parcial{background:var(--surface); border:2px solid var(--link);}
.lacuna.lacuna--linha{min-height:0; height:auto; padding:var(--sp-2);}
@media (max-width:1020px){.mort-h{display:none;} .mort-l{grid-template-columns:1fr; gap:var(--sp-2);} .mort-l > div[data-rot]::before{display:block;}}
.figura--barras .figura-midia{min-height:var(--grafico-altura);}
.diagrama-mps{width:100%; min-height:var(--diagrama-altura);}
.figura--indicador .figura-midia{min-height:0;}
.canvas-wrap{position:relative; width:100%; max-width:100%; min-width:0;}
.map-legend{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); margin:var(--esp-figura-legenda) 0 0; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted);}
.map-legend:empty{display:none;}
.map-legend span{display:flex; align-items:center; gap:var(--sp-2);}
.map-legend i{width:10px; height:10px; border-radius:2px; display:inline-block; flex:none;}
.map-legend .escala{flex-basis:100%; max-width:360px; display:block;}
.map-legend .escala i{display:block; width:100%; height:12px; border-radius:var(--radius); border:1px solid var(--gauge-borda);}
.map-legend .escala em{display:flex; justify-content:space-between; font-style:normal; margin-top:var(--sp-1);}
.figura-leitura{font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink); margin:var(--esp-figura-legenda) 0 0;}
/* pé da figura/cartão: crédito + número. É o último bloco; fica ancorado embaixo quando a grade estica o cartão. */
.figura-pe{margin-top:auto; padding-top:var(--esp-figura-legenda); display:flex; flex-direction:column; gap:var(--sp-1);}
.fonte-figura{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); margin:0;}
.fonte-figura .fonte-k{text-transform:uppercase; letter-spacing:var(--ls-caps);}
.figura-num{display:block; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--muted); margin:0;}
.figura-dados{margin:var(--esp-figura-legenda) 0 0;}
.figura-dados .tbl-wrap{margin-top:var(--sp-2);}
/* 19/10/2026 (editoria, item 9): o contorno de UF quase sumia nos mapas de qualidade do ar e de
   temperatura. A espessura é UMA, para todos os mapas — o contraste de cada um vem da atmosfera,
   em `mapas.js`. Nada de ajuste por mapa. */
.uf-path{stroke:var(--mineral); stroke-width:1.25; cursor:default; transition:opacity .12s;}
.uf-path:hover{opacity:.8;}
.map-tooltip{position:fixed; pointer-events:none; background:var(--tooltip-bg); border:1px solid var(--muted); border-radius:var(--radius); padding:var(--sp-2) var(--sp-3); font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--tooltip-ink); z-index:200; display:none; max-width:80vw;}
.map-tooltip--clicavel{pointer-events:auto;}
.map-tooltip--clicavel a{color:inherit; text-decoration:underline;}
.lacuna{display:flex; align-items:center; justify-content:center; min-height:150px; height:100%; border:1px dashed var(--line); border-radius:var(--radius); padding:var(--sp-4); text-align:center; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--muted); background:var(--surface-2);}
.fonte-espera{color:var(--muted);}
.rota-mp-rotulo{font-family:var(--font-dado); font-size:var(--fs-caption); fill:var(--ink);}
.rota-mp-valor{font-family:var(--font-dado); font-size:var(--fs-caption); fill:var(--muted);}

/* ===== 7. Cartão de texto (componente único para cartões sem mídia) =====
   .cartao — texto, indicador, documento, rota, contato. Variantes: --destaque (borda esquerda de link),
   --kpi (número grande + rótulo), --indicador (valor em Fraunces). Cor de acento por modificador. */
.cartao{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--esp-figura); margin:0; box-shadow:var(--sombra); max-width:100%; min-width:0; display:flex; flex-direction:column;}
.panel > .cartao + .cartao, details.acc > .cartao + .cartao{margin-top:var(--esp-grade);}
.cartao > h3, .cartao > .figura-titulo{margin:0 0 var(--sp-1);}
.cartao--destaque{border-left:4px solid var(--link); background:var(--surface-2); box-shadow:none;}
.cartao--acento-argila{border-left:4px solid var(--argila);}
.cartao--acento-neutro{border-left:4px solid var(--neutro);}
.cartao--acento-musgo{border-left:4px solid var(--musgo);}
.cartao--acento-chuva{border-top:3px solid var(--chuva);}
.cartao--acento-seca{border-top:3px solid var(--seca);}
.cartao--acento-fogo{border-top:3px solid var(--fogo);}
.cartao--acento-neutro-topo{border-top:3px solid var(--muted);}
/* 22/09/2026 (Blog): mesma borda superior em todos os quadros de situação, cor por eixo — musgo (antecipação), sintético (saúde), argila (resposta), seca (sinais físicos) */
.cartao--acento-musgo-topo{border-top:3px solid var(--musgo);}
.cartao--acento-sintetico-topo{border-top:3px solid var(--sintetico);}
.cartao--acento-argila-topo{border-top:3px solid var(--argila);}
/* 15/09/2026 (Financiamento): chip da chave de acesso, na paleta das chaves (MonitorMapas.PALETA.chaves) */
.chip-chave{display:inline-block; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); font-weight:var(--peso-semibold); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--branco); border-radius:var(--radius); padding:2px var(--sp-2); margin-right:var(--sp-1); vertical-align:middle;}
.chave-regra{background:var(--sintetico);} .chave-decreto{background:var(--argila);} .chave-discricionaria{background:var(--ambar); color:var(--abissal);} .chave-direta{background:var(--mineral); color:var(--abissal);} .chave-estadual{background:var(--musgo);} .chave-fogo{background:var(--fogo);}
.cartao--kpi{display:block; color:inherit; text-decoration:none; transition:outline .15s;}
a.cartao--kpi:hover{outline:1.5px solid var(--link); outline-offset:2px; color:inherit;}
.cartao--kpi .n{font-family:var(--font-titulo); font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:var(--peso-display);}
.cartao--kpi .l{font-size:var(--fs-small); line-height:var(--lh-small); color:var(--muted); margin-top:var(--sp-1);}
.cartao--kpi .n.argila{color:var(--argila);}
.cartao--kpi .n.neutro{color:var(--neutro);}
.cartao b.cartao-t{display:block; font-size:var(--fs-body); margin:0 0 var(--sp-1);}
.cartao .cartao-s{font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); display:block; margin:0 0 var(--sp-2);}
.cartao .cartao-a{font-size:var(--fs-small); font-weight:var(--peso-semibold);}
/* 22/09/2026 (Blog do MARÉ): quadro de situação — número grande (mesmo .gauge-head/.gnum da inicial), lista
   rótulo/valor e crédito com a data da própria fonte; quatro por linha no desktop, dois no tablet, um no celular. */
.grade-cartoes--4{grid-template-columns:repeat(4, minmax(0, 1fr));}
.cartao--status .gauge-head{margin:0 0 var(--sp-1);}
.cartao--status .cartao-s{margin:0 0 var(--sp-3);}
.status-dl{margin:0; padding:0; font-size:var(--fs-small); line-height:var(--lh-small);}
.status-dl > div{padding:var(--sp-2) 0; border-top:1px solid var(--line);}
.status-dl dt{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--muted); margin:0 0 var(--sp-1);}
.status-dl dd{margin:0; font-weight:var(--peso-semibold); color:var(--ink);}
.cartao--status .cartao-a{margin-top:var(--sp-3);}
.cartao--status .figura-pe{padding-top:var(--sp-3);}
/* lista de textos do blog e página do texto */
.blog-lista{list-style:none; margin:0; padding:0;}
.blog-item{padding:var(--sp-4) 0; border-top:1px solid var(--line);}
.blog-item:first-child{border-top:none; padding-top:0;}
.blog-item .selo{margin-bottom:var(--sp-1);}
.blog-titulo{display:block; font-family:var(--font-titulo); font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:var(--peso-display); text-decoration:none; margin:0 0 var(--sp-1);}
.blog-titulo:hover{text-decoration:underline;}
.blog-resumo{margin:0; color:var(--muted);}
.blog-vazio{color:var(--muted);}
.post .post-corpo > p, .post .post-corpo > ul, .post .post-corpo > ol{margin:0 0 var(--sp-4);}
.post .post-corpo > h2{margin:var(--sp-6) 0 var(--sp-3);}
.post .post-volta{margin:var(--sp-6) 0 0; font-size:var(--fs-small); line-height:var(--lh-small);}
.bloco-citacao{background:var(--surface-2); border-left:4px solid var(--teal); border-radius:var(--radius); padding:var(--sp-3) var(--sp-4); font-size:var(--fs-body); line-height:var(--lh-body);}
/* variante de bloco com fio superior e título de tema (a cor do tema vem em --tema) */
.bloco--tema{border-top:2px solid var(--tema, var(--teal)); padding-top:var(--sp-3); margin:var(--esp-secao) 0; font-size:var(--fs-body); line-height:var(--lh-body);}
.bloco--tema h3{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--tema, var(--teal)); font-weight:var(--peso-semibold); margin:0 0 var(--sp-3);}
/* régua de faixas: quatro faixas (25/25/20/30) com marcador por CSS (--pos) e rótulos alinhados */
.regua-faixas{position:relative; display:grid; grid-template-columns:25fr 25fr 20fr 30fr; height:10px; border-radius:5px; overflow:hidden; margin:var(--sp-3) 0 var(--sp-1);}
.regua-faixas span:nth-child(1){background:var(--faixa-1);} .regua-faixas span:nth-child(2){background:var(--faixa-2);}
.regua-faixas span:nth-child(3){background:var(--faixa-3);} .regua-faixas span:nth-child(4){background:var(--faixa-4);}
.regua-faixas-marca{position:relative; height:0;}
.regua-faixas-marca i{position:absolute; left:var(--pos, 0%); top:-16px; width:2px; height:18px; background:var(--rust);}
.regua-faixas-rotulos{display:grid; grid-template-columns:25fr 25fr 20fr 30fr; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); margin-bottom:var(--sp-3);}

/* ===== 8. Tabelas ===== */
table{border-collapse:collapse; width:100%;}
.tbl-wrap{overflow:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius); max-width:100%; max-height:var(--tabela-altura-max);}
.tbl-wrap--livre{max-height:none;}
.tbl-wrap table{min-width:0;}
.mun-table{width:100%; border-collapse:collapse; font-size:var(--fs-small); line-height:var(--lh-small);}
.mun-table th, .mun-table td{text-align:left; padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--line); vertical-align:top;}
table th, .mun-table thead th{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--muted); font-weight:var(--peso-semibold);}
.mun-table thead th{position:sticky; top:0; background:var(--surface);}
.mun-table td.dado, .mun-table td .dado{font-family:var(--font-dado); font-size:var(--fs-caption); color:var(--muted);}
.mun-table td.nowrap{white-space:nowrap;}
.mun-table tr.destaque td{background:var(--osso);}
circle.destaque{stroke:var(--ink); stroke-width:2; fill-opacity:1;}
.mun-table .grupo td{padding-top:var(--sp-4); font-family:var(--font-dado); font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--ink); border-bottom-width:3px;}
.cat-pill{display:inline-block; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); padding:2px var(--sp-2); border-radius:var(--radius-pill); color:var(--branco); font-weight:var(--peso-semibold); white-space:nowrap;}
.pill-nivel{display:inline-block; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); font-weight:var(--peso-semibold); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--branco); background:var(--neutro); border-radius:var(--radius-pill); padding:2px var(--sp-2); margin-right:var(--sp-2);}
.badge{display:inline-block; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); padding:var(--sp-1) var(--sp-2); border-radius:var(--radius-pill); font-weight:var(--peso-semibold); margin-bottom:var(--sp-3);}
.st-NOVO{background:var(--musgo); color:var(--branco);}
.st-READ{background:var(--sintetico); color:var(--branco);}
.st-ELAB, .st-VIG{background:var(--ambar); color:var(--abissal);}
.st-LAC{background:var(--argila); color:var(--branco);}

/* ===== 9. Formulários e botões ===== */
.tbl-controls{display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-4);}
.tbl-controls input, .tbl-controls select{background:var(--campo); border:1px solid var(--campo-borda); border-radius:var(--radius); color:var(--ink); padding:var(--sp-2) var(--sp-3); font-family:var(--font-corpo); font-size:var(--fs-small); min-height:var(--alvo-toque);}
.tbl-controls input{flex:1; min-width:180px;}
/* 26/09/2026 (pedido da editoria: o formulário "está muito corporativo"). A grade 1fr 1fr punha
   estado e município lado a lado e depois quebrava para largura inteira sem razão — era daí que
   vinha o ar de formulário genérico. Coluna única com medida de leitura, três etapas nomeadas, e o
   destino do envio dito ANTES do botão. Nenhum campo entrou, saiu ou mudou de nome: o que o
   Monitor coleta é decisão da editoria (governança §29); ordem e agrupamento, não. */
/* 30/09/2026 (§311, design C da editoria): formulário mínimo. Sem numeração de etapas, sem borda de
   fieldset, sem coluna lateral fixa — e COMPACTO: o painel usa o mesmo espaçamento dos outros
   `.panel` da página, não mais. Os campos opcionais vivem atrás de um `<details>` fechado, porque o
   que é opcional não deve disputar atenção com o que é obrigatório. */
.contrib-campos{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:var(--sp-4); max-width:660px;}
.contrib-campos .fld{margin:0;}
.contrib-campos .fld:nth-child(4), .contrib-campos .fld:last-child{grid-column:1 / -1;}
#formContrib{display:block;}
#formContrib .note{max-width:660px;}
#formContrib button[type="submit"]{margin-top:var(--sp-4);}

/* 30/09/2026 (rodada 2, item 1): aparência do design C, ESCOPADA em `#formContrib`. A `.fld`
   global continua como está — o pedido anterior ("usar os tokens do site") foi lido como "manter o
   estilo dos campos", e não era. Aqui o campo deixa de ser caixa e vira linha: fundo transparente,
   só o filete de baixo, cantos retos, e o que a pessoa digita na fonte de título, em peso leve.
   Nenhum token novo e nenhum hex solto; espaçamento do sistema, não o do mockup — o painel não
   pode ficar mais alto do que está. */
#formContrib .fld input, #formContrib .fld select, #formContrib .fld textarea{
  background:transparent; border:none; border-bottom:1px solid var(--campo-borda); border-radius:0;
  padding:var(--sp-1) 0; font-family:var(--font-titulo); font-weight:var(--peso-display);
  font-size:var(--fs-h4);}
#formContrib .fld textarea{line-height:var(--lh-h4);}
/* Acessibilidade: o foco de teclado não pode depender só de cor. O filete engrossa E muda de cor,
   e o contorno do sistema continua valendo. */
#formContrib .fld input:focus, #formContrib .fld select:focus, #formContrib .fld textarea:focus{
  border-bottom:2px solid var(--green); padding-bottom:calc(var(--sp-1) - 1px);}
#formContrib .fld input:disabled{opacity:.55;}
/* Pílula de tinta: mesma altura de alvo de toque e mesma cor de ação do sistema, só o raio muda. */
#formContrib button[type="submit"]{border-radius:999px; padding:0 var(--sp-5);}
.fld{display:flex; flex-direction:column; gap:var(--sp-1); font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--muted);}
.fld input, .fld select, .fld textarea{font-family:var(--font-corpo); font-size:var(--fs-body); color:var(--ink); background:var(--campo); border:1px solid var(--campo-borda); border-radius:var(--radius); padding:var(--sp-2) var(--sp-3); text-transform:none; letter-spacing:0; width:100%; min-width:0; max-width:100%; min-height:var(--alvo-toque);}
.fld-full{grid-column:1 / -1;}
button, input[type=submit]{min-height:var(--alvo-toque);}
.btn, .btn-pdf{display:inline-block; padding:0 var(--sp-4); min-height:var(--alvo-toque); line-height:var(--alvo-toque); font-family:var(--font-corpo); font-size:var(--fs-small); font-weight:var(--peso-semibold); background:var(--green); color:var(--branco); border:none; border-radius:var(--radius); cursor:pointer; text-decoration:none; margin-top:var(--sp-3);}
.btn:hover, .btn-pdf:hover{background:var(--ink); color:var(--branco);}
/* 17/09/2026 (pedido da editoria, "isso é fundamental"): o botão de baixar o PDF era um link-botão
   discreto entre parágrafos — a ação mais importante da seção precisava de mais peso que isso. Ícone,
   corpo maior, sombra própria e elevação no hover.
   17/09/2026 (segundo pedido): a seção "Leve estas informações com você" e o título "Como se proteger
   em cada cenário" viram um bloco só, chamado Proteja-se, formatado como o cabeçalho da própria
   página (selo + título grande + texto, sem caixa com borda) — não mais um painel com moldura, texto e
   botão lado a lado. Botão centralizado abaixo do texto, único e em destaque.  */
.proteja-cta{text-align:center; margin:0 0 var(--esp-secao); padding:var(--sp-4) 0 var(--sp-5);}
.proteja-cta-titulo{font-size:var(--fs-h1); line-height:var(--lh-h1); margin:0 0 var(--esp-titulo);}
.proteja-cta .hint{max-width:640px; margin:0 auto var(--sp-4);}
.btn-pdf{display:inline-flex; align-items:center; gap:var(--sp-2); flex:none; margin-top:0; padding:0 var(--sp-5); min-height:56px; line-height:normal; font-size:var(--fs-body); border-radius:calc(var(--radius) * 1.4); box-shadow:0 4px 14px rgba(46,61,48,.28); transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
.btn-pdf:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(14,15,13,.3);}
.btn-pdf svg{flex:none;}
/* 18/09/2026 (pedido da editoria): segundo botão, para a imagem de compartilhar — mesma forma do
   botão de PDF, mas contorno em vez de preenchido, para o PDF continuar lendo como a ação principal. */
.proteja-cta-botoes{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3); margin-top:var(--sp-4);}
.proteja-cta-botoes .btn-pdf{margin-top:0;}
.btn-pdf--secundario{background:var(--surface); color:var(--musgo); border:1.5px solid var(--musgo); box-shadow:none;}
.btn-pdf--secundario:hover{background:var(--musgo); color:var(--branco); box-shadow:0 4px 14px rgba(46,61,48,.2);}
select.seletor{margin:0 0 var(--sp-2); font-family:var(--font-corpo); font-size:var(--fs-small); min-height:var(--alvo-toque); border:1px solid var(--campo-borda); border-radius:var(--radius); background:var(--campo); color:var(--ink); padding:0 var(--sp-2);}
.pedido-texto{width:100%; min-width:0; font-family:var(--font-corpo); font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink); background:var(--campo); border:1px solid var(--campo-borda); border-radius:var(--radius); padding:var(--sp-2) var(--sp-3); margin:0 0 var(--sp-2); resize:vertical;}

/* ===== 10. Medidor — UMA arte para toda barra do site (15/09/2026, pedido da editoria) =====
   Antecipação (índice), Resposta (índice ponderado por população), MARÉ · Saúde e as micro-barras dos
   estados usam o mesmo trilho, o mesmo preenchimento em degradê, a mesma corrente animada e a mesma
   crista (E14). Só a tinta muda: antecipação/saúde = Argila → Âmbar → Mineral → Musgo (0 → 100);
   resposta = Mineral → Argila (frio → quente), decisão de 06/09 mantida. Variante: .gauge-fill--resposta. */
.mare-metade{display:block;}
.mare-metade + .mare-metade{border-top:1px solid var(--line); margin-top:var(--sp-4);}
.gauge-zone, .contador-zone{display:flex; flex-direction:column; gap:var(--sp-2);}
.gauge-head{display:flex; align-items:baseline; gap:var(--sp-2); margin-bottom:0; flex-wrap:wrap;}
.gauge-head .gnum{font-family:var(--font-titulo); font-size:var(--fs-display); line-height:1; font-weight:var(--peso-display); color:var(--ink);}
.gauge-head .gden{font-size:var(--fs-h4); color:var(--muted);}
.gauge-head .glabel{margin-left:auto; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--muted); text-align:right;}
.gauge-track{position:relative; height:26px; background:var(--gauge-trilho); border:1px solid var(--gauge-borda); border-radius:13px; overflow:hidden;}
.gauge-fill{position:relative; height:100%; width:0; background:var(--degrade-indice); background-size:calc(10000%/var(--galvo,1)) 100%; background-repeat:no-repeat; border-radius:13px 0 0 13px; transition:width 1.4s cubic-bezier(.2,.7,.3,1); box-shadow:0 0 16px rgba(166,95,63,.30), 0 0 34px rgba(198,155,114,.16);}
.gauge-fill--resposta{background:var(--degrade-resposta); background-size:calc(10000%/var(--galvo,1)) 100%; background-repeat:no-repeat;}
.gauge-fill::after{content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(72px 2.5px at 36px 26%, rgba(255,255,255,.17) 55%, transparent 62%) repeat-x, radial-gradient(98px 3px at 60px 52%, rgba(21,32,26,.09) 55%, transparent 62%) repeat-x, radial-gradient(58px 2px at 20px 76%, rgba(255,255,255,.12) 55%, transparent 62%) repeat-x, linear-gradient(180deg, transparent 30%, rgba(255,255,255,.06) 31%, rgba(255,255,255,.06) 32%, transparent 33%, transparent 62%, rgba(255,255,255,.05) 63%, rgba(255,255,255,.05) 64%, transparent 65%); background-size:156px 100%, 214px 100%, 132px 100%, 100% 100%; animation:correnteQuente 7.5s linear infinite;}
@keyframes correnteQuente{to{background-position:156px 0, 214px 0, 132px 0, 0 0;}}
.gauge-fill::before{content:''; position:absolute; top:0; bottom:0; right:0; width:26px; border-radius:inherit; background:radial-gradient(ellipse at right, rgba(255,255,255,.85), transparent 70%); animation:cristaQuente 3.6s ease-in-out infinite;}
@keyframes cristaQuente{0%,100%{transform:translateY(0); opacity:.85;} 50%{transform:translateY(1px); opacity:1;}}
@media (prefers-reduced-motion: reduce){ .gauge-fill::after, .gauge-fill::before{animation:none;} }
.gtick{position:absolute; top:0; bottom:0; width:1px; background:rgba(21,32,26,.22);}
.gauge-tick-labels{position:relative; height:var(--sp-6); margin-top:var(--sp-1);}
.gauge-tick-labels span{position:absolute; top:0; transform:translateX(-50%); font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); text-align:center; white-space:nowrap;}
.gauge-tick-labels span b{display:block; font-weight:var(--peso-regular);}
.gauge-ends{display:flex; justify-content:space-between; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); margin-top:var(--sp-1); position:relative;}
.gauge-ends > span{max-width:100%;}
.gfaixa-badge{display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted);}
.gfaixa-pill{font-family:var(--font-corpo); font-size:var(--fs-caption); line-height:var(--lh-caption); font-weight:var(--peso-semibold); color:var(--gauge-osso); padding:var(--sp-1) var(--sp-3); border-radius:var(--radius-pill); white-space:nowrap;}
.gauge-zone--resposta .gnum{color:var(--rust);}
.gauge-zone--resposta .gfaixa-badge .gfaixa-pill{background:var(--rust);}
/* 10/11/2026: pílula longa não vaza da tela no celular — quebra a linha em vez de cortar. */
@media (max-width:640px){ .gfaixa-pill{white-space:normal;} }
/* 16/09/2026 (handover de identidade, §4.4): variante compacta do medidor "Depois" — mesma
   família visual e largura do medidor "Antes", corpo tipográfico menor, menos destaque de leitura. */
.gauge-zone--compacta{gap:var(--sp-1);}
.gauge-zone--compacta .gauge-head .gnum{font-size:var(--fs-h4);}
.gauge-zone--compacta .gauge-head .gden{font-size:var(--fs-small);}
.gauge-zone--compacta .gauge-track{height:18px; border-radius:9px;}
.gauge-zone--compacta .gauge-tick-labels{display:none;}
.gauge-mini{margin:var(--sp-2) 0 var(--sp-4);}
.gauge-mini .gauge-head .gnum{font-size:var(--fs-h2); line-height:var(--lh-h2);}
.gauge-mini .gauge-track{height:18px;}
.strip-wrap{margin-top:var(--sp-5);}
.strip-title{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--muted); margin:0 0 var(--sp-2);}
.strip{position:relative; height:34px;}
.strip-line{position:absolute; left:0; right:0; top:16px; height:2px; background:var(--line);}
.strip-tick{position:absolute; top:8px; width:2.5px; height:18px; background:var(--musgo); border-radius:2px; cursor:default;}
.strip-tick.boletim{background:var(--musgo); width:4px; top:5px; height:24px;}
.strip-tick:hover, .strip-tick:focus-visible{background:var(--argila); outline:none;}
.strip-ends{display:flex; justify-content:space-between; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); margin-top:var(--sp-1);}
.kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:var(--sp-3); min-width:0;}

/* ===== 11. Estados (mosaico por região) e cartões de estado/cidade — página inicial ===== */
/* 26/09/2026 (pedido da editoria: "grande e pesada e com uma estética sem harmonia, porque muitas
   regiões têm muitos estados e outras têm poucos").
   A causa era geométrica: uma COLUNA por região, com 9 ladrilhos no Nordeste contra 3 no Sul, numa
   grade de 1365px — medidos — em que toda coluna herda a altura da mais longa, sobrando um
   quadrante vazio embaixo à direita. Enquanto a contagem por região definir a geometria, nenhum
   ajuste de espaçamento resolve.
   Primeiro tentei trocar o cartão por linha alinhada. Consertava a geometria e custava caro: virava
   tabela institucional, que a direção de arte §1 proíbe. A editoria recusou, com razão.
   O arranjo agora é GEOGRÁFICO: cada estado ocupa a posição aproximada dele no país. A contagem
   desigual deixa de existir como problema, o cartão volta, e a página ganha o panorama nacional que
   não tinha — a inicial não exibia mapa nenhum dos 27 estados (governança §26). Cada célula tem o
   mesmo peso visual, do Amazonas ao DF, o que um mapa de área fiel não dá: medido na geometria do
   próprio site, o AM tem 271x a área do DF, e o cartão não caberia em 16 das 27 formas reais.
   A grade é a `br_states_grid1` do geofacet, publicada; as posições vivem em assets/js/index.js. */
/* 30/09/2026 (pedido da editoria): os cartões estavam grandes demais — grade mais compacta
   (gap e padding menores, max-width reduzido) e sem a linha de risco (que saiu para a ficha). */
.regions{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:var(--sp-2); max-width:720px; margin:var(--esp-secao) auto 0;}
.regions > *{min-width:0;}
.tile{display:block; text-align:center; border-radius:var(--radius); padding:var(--sp-1) var(--sp-2); cursor:pointer;
  font-family:var(--font-dado); font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--peso-medio);
  border:1px solid var(--line); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  /* 02/10/2026 (itens 3.1 e 3.2): a cor do TEXTO vem do componente, e nao de estilo inline da
     pagina. Antes era `color:var(--branco)` sobre fundo branco, corrigido inline em index.js:
     a pagina que esquecesse publicava texto invisivel, e o portao de layout agora reprova. */
  position:relative; color:var(--tinta); background:var(--branco);}
.tile:hover{transform:translateY(-2px); box-shadow:0 4px 14px rgba(21,32,26,.14); border-color:var(--teal);}
.tile:focus-visible{transform:translateY(-2px); box-shadow:0 4px 14px rgba(21,32,26,.14); outline:2px solid var(--link); outline-offset:2px;}
.tile.active{outline:2px solid var(--ink); outline-offset:2px;}
.tile .tile-uf{display:block; font-weight:var(--peso-bold);}
/* Cada fileira da grade se ajusta à sua célula mais alta, então o alinhamento se mantém
   sozinho se um nome longo ("Rio Grande do Norte") quebrar em mais de uma linha. */
.tile .tile-nome{display:block; font-family:var(--font-dado); font-weight:var(--peso-regular); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); margin-top:1px; hyphens:none; white-space:normal;}
.tile .tile-score{display:block; font-size:var(--fs-caption); line-height:var(--lh-caption); font-weight:var(--peso-semibold); opacity:.85; margin-top:2px; font-family:var(--font-dado); font-variant-numeric:tabular-nums;}
.tile .tile-bar{height:6px; background:var(--sem-dado); border-radius:3px; overflow:hidden; margin-top:var(--sp-1);}
.tile .tile-fill{height:100%; width:0; background:var(--degrade-indice); background-size:calc(10000%/var(--galvo,1)) 100%; background-repeat:no-repeat; border-radius:3px; transition:width 1.2s cubic-bezier(.2,.7,.3,1);}
.tile .tile-bar--resposta{margin-top:3px;}
.tile .tile-fill--resposta{background:var(--degrade-resposta); background-size:calc(10000%/var(--galvo,1)) 100%; background-repeat:no-repeat;}
/* Os três campos de texto não cabem numa célula de 140px junto com sigla, nome, nota e as duas
   barras. Eles vivem na janela de detalhe — inclusive "Diários municipais consultados", que ANTES
   desta mudança não existia lá e teria sumido da interface (ver assets/js/index.js). */
.tile .tile-face{display:none;}
/* 13/09/2026: regra global — qualquer componente com display: explícito (flex/block/grid) sobrepõe
   [hidden] da UA stylesheet à mesma especificidade; !important garante que 'hidden' sempre esconda,
   sem precisar de uma regra [seletor][hidden] nova a cada componente novo (ver .detail[hidden] e
   .figura[hidden], mantidas como estavam). */
[hidden]{display:none !important;}
/* 13/09/2026 (pedido de Patricia: quadro dos estados ocupa a página inteira, detalhe vira janela
   popup): .detail era .panel lado a lado com a grade (.layout, removida); agora é <dialog>, sem a
   classe .panel (regras próprias abaixo, mesma linguagem visual: fundo, borda, raio, sombra). */
.detail{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--esp-painel); box-shadow:0 12px 36px rgba(0,0,0,.22); max-width:min(560px, 92vw); max-height:85vh; overflow:auto; margin:auto;}
.detail::backdrop{background:rgba(20,20,18,.5);}
.detail-fechar{position:sticky; top:0; float:right; margin:calc(var(--esp-painel) * -1) calc(var(--esp-painel) * -1) 0 0; width:var(--alvo-toque); height:var(--alvo-toque); border:0; border-radius:0 var(--radius) 0 var(--radius); background:var(--surface); color:var(--muted); font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-h3); line-height:1; cursor:pointer;}
.detail-fechar:hover, .detail-fechar:focus-visible{color:var(--ink); background:var(--osso-claro);}
.placeholder{color:var(--muted); font-size:var(--fs-body);}
.detail .uf-name{font-family:var(--font-titulo); font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:var(--peso-display); clear:both;}
.detail .uf-name .sub{font-size:var(--fs-body);}
.detail .uf-region{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); text-transform:uppercase; letter-spacing:var(--ls-caps); margin-bottom:var(--sp-4);}
.field{margin-bottom:var(--sp-3);}
.field .k, .fk{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); text-transform:uppercase; letter-spacing:var(--ls-caps); margin:var(--sp-2) 0 2px;}
.field .v, .fv{font-size:var(--fs-small); line-height:var(--lh-small); margin:0 0 var(--sp-1);}
/* 30/09/2026 (rodada 2, item 2): a ficha do estado fica toda branca. O cinza que separava os
   blocos some; quem separa passa a ser o espaço e, no máximo, uma linha fina. Os selos de
   status (.badge, .pill-nivel) NÃO mudam — eles são o destaque que já funcionava. */
.capital-box{background:var(--branco); border-radius:var(--radius); padding:var(--sp-3) var(--sp-4); margin-top:var(--sp-2); border:1px solid var(--line);}
.capital-box .k{color:var(--rust);}
/* 30/09/2026 (pedido da editoria): o risco projetado saiu da frente do cartão de estado e
   passou a viver só na ficha (janela de detalhe), destacado — mesma família visual das fichas
   de risco de proteja-se.html, acento por família (chuva/seca/fogo) na borda esquerda. */
/* Sem fundo cinza, o risco precisava de outro jeito de ser o primeiro bloco que o olho encontra
   depois do selo: o filete da família engrossa (4 → 6 px) e o rótulo assume a cor da família.
   O componente é o mesmo do cartão do município, de propósito — a mudança vale nos dois. */
.risco-box{background:var(--branco); border-radius:var(--radius); padding:var(--sp-3) var(--sp-4); margin:var(--sp-3) 0; border:1px solid var(--line); border-left:6px solid var(--rust);}
.risco-box.r-chuva{border-left-color:var(--chuva);}
.risco-box.r-seca{border-left-color:var(--seca);}
.risco-box.r-fogo{border-left-color:var(--fogo);}
.risco-box.r-chuva .k{color:var(--chuva);}
.risco-box.r-seca .k{color:var(--seca);}
.risco-box.r-fogo .k{color:var(--fogo);}
.risco-box .k{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); text-transform:uppercase; letter-spacing:var(--ls-caps); margin:0 0 var(--sp-1);}
.risco-box .v{font-size:var(--fs-body); line-height:var(--lh-body); margin:0 0 var(--sp-2);}
.chips{display:flex; flex-wrap:wrap; gap:var(--sp-1);}
.chip-risco{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); font-weight:var(--peso-semibold); padding:2px var(--sp-2); border-radius:999px; background:var(--branco); border:1px solid currentColor;}
/* 25/10/2026 (Saúde v0.7): a sigla do estado como botão (seletor acessível do mapa de planos) e as três posições na faixa habitual, sempre com a palavra escrita ao lado da cor. A cor marca a posição numa escala (quente acima, frio abaixo); não julga. */
button.chip-risco{min-width:var(--alvo-toque); min-height:var(--alvo-toque); color:inherit; cursor:pointer;}
button.chip-risco[aria-pressed="true"]{background:var(--ink); color:var(--branco);}
.posicao--acima{color:var(--rust);}
.posicao--dentro{color:var(--muted);}
.posicao--abaixo{color:var(--link);}
.risco-box .fonte{font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); margin:var(--sp-2) 0 0;}
.meu-card{background:var(--branco); border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-4) var(--sp-5); margin-top:var(--sp-3); box-shadow:var(--sombra);}
.meu-card ul{margin:var(--sp-2) 0 0; padding-left:var(--sp-4);}
.meu-num{font-family:var(--font-titulo); font-size:var(--fs-h1); line-height:1; font-weight:var(--peso-display);}
#meuCard h4, #detail h4{margin:var(--sp-4) 0 var(--sp-2);}
#meuCard ul, #detail ul{margin:var(--sp-1) 0 var(--sp-3); padding-left:var(--sp-5);}
#meuCard hr, .card-sep{border:none; border-top:1px solid var(--line); margin:var(--sp-4) 0;}
.card-kicker{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--muted); margin:0 0 var(--sp-1);}
.card-title{font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-h4); line-height:var(--lh-h4); margin:0 0 var(--sp-1);}
.card-title .sub{color:var(--muted); font-weight:var(--peso-regular); font-size:var(--fs-small);}
.card-body{font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink); margin:0 0 var(--sp-1);}
.card-src{font-size:var(--fs-small); color:var(--muted); margin:0;}
.card-link{margin-top:var(--sp-2); font-size:var(--fs-small); font-weight:var(--peso-semibold);}
.card-note{margin-top:var(--sp-2); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted);}
.aviso-direito{margin:var(--sp-2) 0 0; background:var(--surface-2); border-left:4px solid var(--musgo); border-radius:var(--radius); padding:var(--sp-2) var(--sp-3);}

/* ===== 12. Prazos (relógios) e barras por UF ===== */
/* 26/09/2026 (pedido da editoria): o calendário deixa de ser tabela e vira linha do tempo.
   A tabela não transmitia tempo — "em 15 dias" era texto no meio de uma frase, e a janela de seis
   meses do El Niño era só dois números separados por travessão. Agora há um eixo único,
   compartilhado por todas as faixas, e uma linha de HOJE que as atravessa na mesma posição. */
.calendario{display:block;}
.calendario .cal-eixo, .calendario .cal-linha{display:grid; grid-template-columns:minmax(150px,1.6fr) minmax(0,3fr) minmax(0,1.3fr); gap:0 var(--sp-4); align-items:center; min-width:0;}
.calendario .cal-eixo{align-items:end; padding:0 0 var(--sp-1); border-bottom:1px solid var(--ink); font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--muted);}
.calendario .cal-eixo .cal-regua{position:relative; height:1.6em;}
.calendario .cal-eixo .cal-regua span{position:absolute; bottom:0; white-space:nowrap;}
.calendario .cal-eixo .cal-regua .meio{transform:translateX(-50%);}
/* O rótulo da ponta direita invadia a coluna da fonte; ancorado pela direita, ele para na borda. */
.calendario .cal-eixo .cal-regua .fim{left:auto; right:0;}
/* A linha de hoje precisa de nome: sem rótulo ela é só um risco. */
.calendario .cal-eixo .cal-regua .hoje{transform:translateX(-50%); color:var(--ink); font-weight:var(--peso-semibold);}
.calendario .cal-eixo .cal-regua .hoje::after{content:""; position:absolute; left:50%; top:100%; height:var(--sp-1); width:1px; background:var(--ink); opacity:.55;}
.calendario .cal-linha{padding:var(--sp-2) 0; border-bottom:1px solid var(--line);}
.calendario .cal-linha > span{min-width:0; font-size:var(--fs-small); line-height:var(--lh-small);}
.calendario .cal-texto .cal-data{display:block; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums;}
.calendario .cal-texto .cal-marco{display:block;}
.calendario .cal-fonte{font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted);}
.calendario .cal-faixa{position:relative; height:22px;}
.calendario .cal-faixa::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line);}
.calendario .cal-faixa::after{content:""; position:absolute; top:-10px; bottom:-10px; width:1px; left:var(--hoje); background:var(--ink); opacity:.55;}
/* Barra lisa, em mineral e sintético: o degradê do índice significa "valor de 0 a 100" e
   reaproveitá-lo para tempo criaria ambiguidade entre duas grandezas diferentes. */
.calendario .cal-barra{position:absolute; top:50%; transform:translateY(-50%); height:9px; border-radius:5px; left:var(--x0); width:var(--w); min-width:4px; overflow:hidden; background:var(--sem-dado); box-shadow:inset 0 0 0 1px var(--linha);}
.calendario .cal-barra i{position:absolute; inset:0 auto 0 0; width:var(--decorrido); background:var(--mineral);}
.calendario .cal-linha.prazo .cal-barra i{background:var(--sintetico);}
.calendario .cal-linha.vencido .cal-barra i{background:var(--cinza-quente); opacity:.5;}
.calendario .cal-ponto{position:absolute; top:50%; left:var(--x0); transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%; background:var(--argila);}
.calendario .cal-linha.futuro .cal-ponto{background:var(--branco); border:2px solid var(--argila);}
.calendario .cal-linha.prazo .cal-texto .cal-data{color:var(--rust);}
.calendario .cal-linha.vencido > span{color:var(--muted);}
.prazos-grade{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--sp-4); margin:0;}
.prazo-rel{display:grid; grid-template-columns:64px 1fr; gap:var(--sp-2) var(--sp-3); align-items:start; padding:var(--sp-3); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--sombra); min-width:0;}
.prazo-rel .relogio{display:block; width:64px; height:64px;}
.prazo-rel .prazo-titulo{font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-h4); line-height:var(--lh-h4); color:var(--ink);}
.prazo-rel .prazo-meta{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--muted); margin-top:2px; white-space:normal; min-width:0;}
.prazo-rel .prazo-meta strong{color:var(--ink);}
.prazo-rel .prazo-espera{font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink); margin-top:var(--sp-2); max-width:var(--medida-leitura);}
.prazo-rel .prazo-espera .k{font-family:var(--font-dado); font-size:var(--fs-caption); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--link);}
.prazo-rel .prazo-espera summary{cursor:pointer; list-style:none;}
.prazo-rel .prazo-espera summary::-webkit-details-marker{display:none;}
.prazo-rel .prazo-espera summary::after{content:' →'; color:var(--teal);}
.prazo-rel .prazo-espera[open] summary::after{content:' ↑';}
.prazo-rel .prazo-espera[open] summary{margin-bottom:var(--sp-1);}
.prazo-rel.vencido .prazo-titulo{color:var(--muted);}
.msb{display:grid; grid-template-columns:44px 1fr auto; gap:0 var(--sp-2); align-items:center;}
.msb b{font-family:var(--font-dado); font-weight:var(--peso-semibold); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--ink);}
.msb .trilho{height:10px; background:var(--gauge-trilho); border:1px solid var(--gauge-borda); border-radius:var(--radius-pill); overflow:hidden;}
.msb .barra{height:100%; border-radius:var(--radius-pill); background:var(--degrade-indice); background-size:calc(10000%/var(--galvo,1)) 100%; background-repeat:no-repeat;}   /* 15/09/2026: mesma arte das demais barras */
.msb span{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); text-align:right; white-space:nowrap; min-width:56px;}
.figura--barras .prazos-barras{gap:var(--sp-2);}

/* ===== 13. Situação atual (indicadores em linha) ===== */
.situacao{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:var(--sp-3) var(--sp-4); margin:var(--sp-2) 0 var(--sp-3);}
.situacao .k{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--muted);}
.situacao .v{font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-h3); line-height:var(--lh-h3); color:var(--ink);}
.situacao .v small{font-family:var(--font-corpo); color:var(--muted); display:block;}

/* ===== 14. Proteja-se ===== */
.emerg-bar{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-5); display:flex; flex-direction:column; align-items:center; text-align:center; margin:0 0 var(--esp-secao); scroll-margin-top:var(--sp-7); box-shadow:var(--sombra);}
.emerg-nums{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--sp-3); width:100%; margin:0 0 var(--sp-4);}
/* 17/09/2026 (pedido da editoria): cartões "sem vida" — fundo branco de verdade (era o cinza claro de
   trilho de tabela), borda superior grossa e colorida por número (mesmo sistema de acento que o site já
   usa em painel--acento-* e cartao--acento-*, uma cor por natureza do número), sombra própria para
   destacar do fundo já sombreado da barra, e elevação ao passar o mouse — um cartão por número de
   emergência, não uma lista discreta. */
.emerg-num{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; background:var(--surface); border:1px solid var(--line); border-top:5px solid var(--mineral); border-radius:var(--radius); padding:var(--sp-4) var(--sp-3); min-width:0; text-decoration:none; color:inherit; text-align:center; box-shadow:var(--sombra); transition:transform .15s ease, box-shadow .15s ease;}
.emerg-num small{display:block; font-family:var(--font-corpo); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); margin-top:var(--sp-2); text-transform:none; letter-spacing:0;}
.emerg-num:hover{text-decoration:none; transform:translateY(-2px); box-shadow:0 6px 16px rgba(14,15,13,.14);}
.emerg-num b{font-family:var(--font-titulo); font-size:var(--fs-display); font-weight:var(--peso-display); color:var(--ink); line-height:1; display:block;}
.emerg-num--sms b{font-size:var(--fs-h1); line-height:var(--lh-h1);}
.emerg-num span{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); font-weight:var(--peso-semibold); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--ink); margin-top:var(--sp-2); display:block; white-space:nowrap;}
.emerg-num--fogo{border-top-color:var(--rust);}
.emerg-num--saude{border-top-color:var(--ambar);}
.emerg-num--defesa{border-top-color:var(--teal);}
.emerg-num--seguranca{border-top-color:var(--ink);}
.emerg-num--sms{border-top-color:var(--musgo);}
.emerg-alertas{font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink); margin:0; max-width:520px; padding-top:var(--sp-4); border-top:1px solid var(--line);}
.emerg-alertas strong{color:var(--link);}
/* 17/09/2026 (pedido da editoria): fichas "sem vida" — fundo cinza uniforme (mesmo tom de trilho de
   tabela), sem hierarquia. Mesmo tratamento dos cartões de emergência: fundo branco de verdade, borda
   superior grossa na cor do risco (reaproveita --chuva/--seca/--fogo, já usadas no selo e no h2 da
   própria ficha — não é cor nova), sombra própria para separar do fundo da página. */
.ficha{border:1px solid var(--line); border-top:5px solid var(--mineral); border-radius:var(--radius); padding:var(--esp-painel); margin:0 0 var(--esp-secao); scroll-margin-top:var(--sp-7); background:var(--surface); box-shadow:var(--sombra);}
.ficha.r-chuva{border-top-color:var(--chuva);}
.ficha.r-seca{border-top-color:var(--seca);}
.ficha.r-fogo{border-top-color:var(--fogo);}
.ficha:target{border-color:var(--ink); box-shadow:0 0 0 3px rgba(21,32,26,.07);}
.ficha-head{display:flex; align-items:center; gap:var(--sp-3); margin:0 0 var(--sp-1);}
.ficha-selo{flex:none; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface-2);}
.ficha.r-chuva .ficha-selo{color:var(--chuva);}
.ficha.r-seca .ficha-selo{color:var(--seca);}
.ficha.r-fogo .ficha-selo{color:var(--fogo);}
.ficha h2{margin:0;}
.ficha.r-chuva h2{color:var(--chuva);}
.ficha.r-seca h2{color:var(--seca);}
.ficha.r-fogo h2{color:var(--fogo);}
.ficha-cols{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-5); margin:var(--sp-4) 0 var(--sp-1);}
/* 03/10/2026: estes h3 são RÓTULO de coluna ("Antes", "Durante", "Depois"), e não título:
   eles ganharam a classe `.ficha-rotulo` para dizê-lo, e é por ela que o portão de conformidade
   sabe que ali a família é a de DADO, e não a de display. */
.ficha-col h3, .ficha-rotulo{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--muted); margin:0 0 var(--sp-2); padding-bottom:var(--sp-2); border-bottom:1px solid var(--line);}
/* 19/10/2026 (pedido da B2, guia do Proteja-se): sai o glifo de caixa (☐). Ele prometia marcar item
   cumprido, interação que a lista não tem, e a página não dá instrução de uso. Volta a lista padrão. */
.ficha-col ul{margin:0; padding-left:var(--sp-5);}
.ficha-col li{margin:0 0 var(--sp-2); font-size:var(--fs-small); line-height:var(--lh-small);}
/* .ficha-alerta era branco dentro de um card que também era branco (cinza antes) — sem contraste próprio
   para um aviso que precisa se destacar. Vira caixa com fundo neutro e borda esquerda na cor do risco. */
.ficha-alerta{background:var(--surface-2); border-left:4px solid var(--mineral); border-radius:var(--radius); padding:var(--sp-3) var(--sp-4); margin:var(--sp-3) 0 0; font-size:var(--fs-small); line-height:var(--lh-small);}
.ficha.r-chuva .ficha-alerta{border-left-color:var(--chuva);}
.ficha.r-seca .ficha-alerta{border-left-color:var(--seca);}
.ficha.r-fogo .ficha-alerta{border-left-color:var(--fogo);}
.ficha-alerta b{display:block; font-family:var(--font-dado); text-transform:uppercase; font-size:var(--fs-caption); letter-spacing:var(--ls-caps); margin:0 0 var(--sp-1); color:var(--ink);}
.ficha-fonte{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); margin:var(--sp-3) 0 0; padding-top:var(--sp-3); border-top:1px solid var(--line);}
.separador-onda{width:100%; height:12px; margin:0 0 var(--esp-secao); color:var(--line); display:block;}
/* 15/09/2026: "Quem chamar" — cartão por estado (sem cor por região; a única cor da página é a família de risco) */
.contato-destaque{margin:var(--sp-3) 0 var(--sp-4);}
/* 18/09/2026 (pedido da editoria): a ficha do estado escolhido aparece ao lado do seletor, não abaixo
   — melhor uso do espaço horizontal do painel que a grade dos 27 estados (agora fechada por padrão,
   ver accTodosContatos no HTML) deixava de sobra. */
.contato-selecao{display:grid; grid-template-columns:minmax(220px, 300px) minmax(0, 1fr); gap:var(--sp-4); align-items:start; margin:var(--sp-3) 0 var(--sp-4);}
.contato-selecao .contato-destaque{margin:0;}
.contato-vazio{grid-column:2; margin:0; padding:var(--sp-4); border:1px dashed var(--line); border-radius:var(--radius); color:var(--muted); display:flex; align-items:center; min-height:120px;}
.contato-grade{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--sp-3); margin-top:var(--sp-3);}
/* 17/09/2026 (pedido da editoria): cartões de contato eram brancos mas sem elevação nem identidade —
   mesmo tratamento das fichas e dos números de emergência: borda superior colorida (musgo, a mesma cor
   já usada no selo da UF em cada cartão) e sombra própria. */
.contato{border:1px solid var(--line); border-top:4px solid var(--musgo); border-radius:var(--radius); background:var(--surface); padding:var(--sp-4); min-width:0; break-inside:avoid; box-shadow:var(--sombra);}
.contato--grande{border-color:var(--musgo); border-top-width:5px; box-shadow:0 0 0 3px rgba(46,61,48,.08), var(--sombra);}
.contato-topo{display:flex; align-items:baseline; gap:var(--sp-2); margin:0 0 var(--sp-1);}
.contato-uf{font-family:var(--font-dado); font-weight:var(--peso-bold); font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:var(--ls-caps); color:var(--branco); background:var(--musgo); border-radius:var(--radius); padding:2px var(--sp-2);}
.contato-nome{font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-h4); line-height:var(--lh-h4); color:var(--ink);}
.contato--grande .contato-nome{font-size:var(--fs-h3); line-height:var(--lh-h3);}
.contato-orgao{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--muted); margin:0 0 var(--sp-2);}
.contato-lista{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:var(--sp-1) var(--sp-3); margin:0; font-size:var(--fs-small); line-height:var(--lh-small);}
.contato-lista dt{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-small); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--muted);}
.contato-lista dd{margin:0; overflow-wrap:anywhere;}
/* A4-26 (12/10/2026): telefone, e-mail e portal tinham alvo de toque de 17 px (altura da linha). */
.contato-lista a{color:var(--ink); font-weight:var(--peso-medio); display:inline-flex; align-items:center; min-height:var(--alvo-toque);}
.contato-lista dt{align-self:center;}
.contato-lista a[href^="tel:"]{white-space:nowrap;}

/* ===== 15. Pesquisadores e Enviar dados ===== */
.check{list-style:none; padding:0; margin:var(--sp-3) 0 0;}
.check li{position:relative; padding:var(--sp-2) 0 var(--sp-2) var(--sp-6); border-top:1px solid var(--line); font-size:var(--fs-body); line-height:var(--lh-body); margin:0;}
.check li:first-child{border-top:0;}
.check li::before{content:""; position:absolute; left:2px; top:13px; width:18px; height:18px; border:2px solid var(--link); border-radius:var(--radius); background:var(--surface);}
.check li b{display:block; font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-h4); line-height:var(--lh-h4);}
.grade-fontes{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:var(--sp-5);}
.grade-fontes h3{font-size:var(--fs-h4); line-height:var(--lh-h4); margin:0 0 var(--sp-2);}
.lista-inline{line-height:2.1; font-size:var(--fs-body); margin:0;}

/* ===== 16. Rodapé ===== */
footer.site-footer{margin-top:var(--sp-7); padding:0 0 var(--sp-2); text-align:center; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--muted);}
footer.site-footer .grad-line{margin:0 0 var(--sp-5);}
footer.site-footer .logo-futura{height:20px; margin:0 auto var(--sp-2);}
footer.site-footer .mast-logo{display:block; text-decoration:none;}
footer.site-footer .rodape-logos{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:var(--sp-5) var(--sp-8); margin:0 0 var(--sp-3);}
footer.site-footer .rodape-logo{display:flex; flex-direction:column; align-items:center; gap:var(--sp-1);}
footer.site-footer .rodape-logo-rotulo{font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
footer.site-footer .rodape-logos .logo-futura{margin:0; width:auto;}
footer.site-footer .rodape-logos .mast-logo{display:flex; align-items:center; min-height:36px;}
footer.site-footer .logo-parceiro{display:block; height:28px; width:auto;}
footer.site-footer .rodape-linha{display:block;}
footer.site-footer .rodape-autoria{display:flex; flex-direction:column; align-items:center; font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted);}
footer.site-footer .rodape-assinatura{display:block;}
footer.site-footer .rodape-redes{display:flex; justify-content:center; gap:var(--sp-3); list-style:none; margin:0; padding:0;}
footer.site-footer .rodape-redes a{display:flex; align-items:center; justify-content:center; min-height:24px; color:var(--muted); text-decoration:none;}
footer.site-footer .rodape-redes img{height:16px; width:auto; opacity:.6;}
footer.site-footer .rodape-redes span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
footer.site-footer .rodape-legal{display:block; margin-top:var(--sp-1); font-size:var(--fs-caption); line-height:var(--lh-caption);}

/* ===== 17. Utilitários (só tokens) ===== */
.u-mt-0{margin-top:0 !important;} .u-mb-0{margin-bottom:0 !important;} .u-m-0{margin:0 !important;}
.u-mb-2{margin-bottom:var(--sp-2) !important;} .u-mb-4{margin-bottom:var(--sp-4) !important;} .u-mb-5{margin-bottom:var(--sp-5) !important;}
.u-mt-2{margin-top:var(--sp-2) !important;} .u-mt-3{margin-top:var(--sp-3) !important;} .u-mt-4{margin-top:var(--sp-4) !important;}
.u-muted{color:var(--muted);} .u-argila{color:var(--argila);} .u-neutro{color:var(--neutro);} .u-rust{color:var(--rust);}
.u-nowrap{white-space:nowrap;} .u-bloco{display:block;} .u-largura-total{grid-column:1 / -1;}
.erro-carga{background:var(--argila); color:var(--branco); padding:var(--sp-3) var(--sp-5); font-family:var(--font-corpo); font-size:var(--fs-small);}

/* ===== 18. Responsivo — dois pontos de quebra canônicos: 1020 px (tablet) e 640 px (celular) ===== */
@media (max-width:1020px){
  /* §24: recompor. A marca encolhe, o nome desce um degrau da escala, e a abertura empilha. */
  .masthead .site-title--logo svg{width:min(460px, 92%);}
  /* Telas estreitas: as duas colunas empilham — logo+título acima, descrição abaixo. */
  .mast-abertura{grid-template-columns:1fr; row-gap:var(--sp-5); align-items:start;}
  .site-nome{font-size:var(--fs-h1); line-height:var(--lh-h1); max-width:none;}
  .site-intro{max-width:none;}
  /* A barra quebra em várias linhas e o degradê horizontal se repetia em cada uma — várias
     viagens em vez de uma. Virando o eixo, o bloco volta a ser UMA peça. */
  .mainnav{background-image:var(--degrade-menu-vertical);}
  /* Abaixo de 1020px não há espaço para o aviso ao lado: ele volta ao fluxo, antes do botão. */
  #formContrib{display:block;}
  /* §24: a faixa de tempo desce para baixo do texto, em largura inteira, e a régua sai — ela
     precisa das três colunas para apontar para o lugar certo. */
  .calendario .cal-eixo{display:none;}
  .calendario .cal-linha{grid-template-columns:1fr; gap:var(--sp-1) 0;}
  .calendario .cal-faixa{height:20px;}
  /* 26/09/2026, medido em 375px: numa grade geográfica de seis colunas a célula fica com 54px,
     nove nomes quebram e "Pernambuco" é cortado. A direção de arte §24 manda recompor, não
     comprimir: abaixo de 1020px a grade geográfica sai e as células voltam a colunas simples, na
     ordem norte→sul da própria grade, que é onde o nome inteiro cabe. */
  .regions{grid-template-columns:repeat(3, minmax(0,1fr)); max-width:none;}
  .regions .tile{grid-row:auto !important; grid-column:auto !important;}
  .wrap{padding:var(--sp-5) var(--grade-margem) var(--sp-7);}
  .grade-figuras, .grade-figuras--3{grid-template-columns:minmax(0, 1fr);}
  .grade-cartoes--4{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .passos{grid-template-columns:minmax(0, 1fr);}
  .passos--linha .tem ul{columns:1;}
  .figura--largo{grid-column:auto;}
  .comoler-grid{grid-template-columns:1fr;}
  .mast-top{gap:var(--sp-3) var(--sp-4);}
}
@media (max-width:640px){
  .site-intro{font-size:var(--fs-body); line-height:var(--lh-body);}
  .contrib-campos{grid-template-columns:1fr;}
  .regions{grid-template-columns:repeat(2, minmax(0,1fr));}
  .emerg-nums{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .emerg-num--sms{grid-column:1 / -1;}
  .figura--dupla .figura-midia{grid-template-columns:minmax(0, 1fr);}
  .grade-cartoes--4{grid-template-columns:minmax(0, 1fr);}
  .wrap{padding:var(--sp-4) var(--grade-margem-celular) var(--sp-7);}
  h1, .site-title{font-size:var(--fs-h2); line-height:var(--lh-h2);}
  h2{font-size:var(--fs-h3); line-height:var(--lh-h3);}
  .hero-lede{font-size:var(--fs-h4); line-height:var(--lh-h4);}
  .gauge-head .gnum, .emerg-num b{font-size:var(--fs-h1);}
  .mainnav{gap:var(--sp-2);}
  .mainnav a, .mainnav span{min-height:var(--alvo-toque);}
  .mainnav .btn-nav{margin-left:0;}
  .panel, .hero, .ficha, .emerg-bar, .detail{padding:var(--sp-4);}
  .figura, .cartao{padding:var(--sp-3);}
  .contato-selecao{grid-template-columns:minmax(0, 1fr);}
  .contato-vazio{grid-column:1;}
  .figura-titulo, .figura-sub{min-height:0;}
  .mun-table th, .mun-table td{font-size:var(--fs-caption); padding:var(--sp-2);}
  .tile .tile-face span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .gauge-head .glabel{flex-basis:100%; margin-left:0; text-align:left; margin-top:var(--sp-1);}
  .strip-tick span{display:none;}
  .ficha-cols{grid-template-columns:1fr;}
  .calendario{grid-template-columns:minmax(110px, auto) minmax(0, 1fr);}
  .calendario .cal-cabecalho .cal-fonte, .calendario .cal-cabecalho > span:nth-child(3){display:none;}
  .calendario .cal-fonte{grid-column:1 / -1; border-top:0; padding-top:0;}
  .prazo-rel{grid-template-columns:56px 1fr;}
  .prazo-rel .relogio{width:56px; height:56px;}
  .mast-body{margin-bottom:var(--sp-3);}
}

/* ===== 19. Impressão ===== */
@media print{
  .mainnav, .btn-pdf, .btn, .skip, .map-tooltip, .subnav, footer.site-footer .grad-line, header .mast-top{display:none !important;}
  body{background:var(--branco); color:var(--preto);}
  .panel, .figura, .cartao, .ficha, .emerg-bar, .contato{border-color:var(--mineral); break-inside:avoid; box-shadow:none;}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:var(--fs-caption); color:var(--muted);}
}

/* 01/10/2026 (seção F): os cartões de família numa linha têm de ter a MESMA ALTURA. O portão de
   consistência visual cobra isso, e com razão: figuras lado a lado em alturas diferentes leem-se
   como figuras de pesos diferentes, quando o que muda é só o conteúdo interno (uma tem "ver em
   lista", outra não).

   A igualdade vem do layout, não de conteúdo inventado para encher: cada bloco é uma coluna que
   ocupa a altura da linha, e a figura dentro dele também. O que sobra de espaço fica no fim do
   cartão, depois da fonte — nunca espremendo o mapa. */
.blocos-familia{align-items:stretch;}
.blocos-familia > .bloco-familia{display:flex; flex-direction:column;}
.blocos-familia > .bloco-familia > .figura{flex:1 1 auto; display:flex; flex-direction:column;}
.blocos-familia > .bloco-familia > .figura > .figura-fonte,
.blocos-familia > .bloco-familia > .figura > .fonte-figura{margin-top:auto;}
/* ===================== Proteja-se — desenho de 30/09/2026 (itens 9 e 10) =====================
   Princípio da editoria: mais minimalista e mais curta, fundo branco em toda a página, sem caixas
   cinza. O que separa os blocos é espaço e, no máximo, uma linha fina. */

/* Telefones: quatro cartões, faixa de 4 px na cor da família no topo. O NÚMERO é a informação —
   é ele que ocupa o tamanho, em Fraunces leve, como os números do resto do site. */
.emerg{margin:var(--sp-5) 0;}
.emerg-cartoes{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-3); margin:var(--sp-3) 0;}
/* 02/10/2026: cinco cartoes na barra — os quatro telefones e o SMS 40199, que voltou (item 7 do
   handover da Defesa civil). O do SMS leva uma linha de instrucao, porque cadastrar-se exige
   saber o que enviar; os de telefone nao levam, porque discar nao exige instrucao. */
.emerg-cartoes--cinco{grid-template-columns:repeat(5, minmax(0,1fr));}
.emerg-cartao--sms{border-top-color:var(--musgo);}
.emerg-cartao--sms .emerg-numero{font-size:var(--fs-h3); line-height:var(--lh-h3);}
.emerg-cartao small{font-family:var(--font-corpo); font-size:var(--fs-caption);
  line-height:var(--lh-caption); color:var(--muted);}
.emerg-cartao{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-1);
  padding:var(--sp-2) var(--sp-4); border:1px solid var(--line); border-radius:12px;
  border-top:4px solid var(--line); text-decoration:none; color:var(--ink); background:var(--branco);}
.emerg-cartao:hover, .emerg-cartao:focus-visible{border-color:var(--ink);}
.emerg-cartao--defesa{border-top-color:var(--chuva);}
.emerg-cartao--fogo{border-top-color:var(--fogo);}
.emerg-cartao--samu{border-top-color:var(--rust);}
.emerg-cartao--policia{border-top-color:var(--ink);}
.emerg-icone{color:var(--muted);}
.emerg-numero{font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-h1); line-height:var(--lh-h1);}
.emerg-rotulo{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--muted);}

/* "Leve com você": cartão de borda fina e dois botões de verdade. */
.levar{border:1px solid var(--line); border-radius:14px; padding:var(--sp-4) var(--sp-5); margin:var(--sp-5) 0;}
.levar-botoes{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-3);}
.btn-pilula{display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--alvo-toque);
  padding:0 var(--sp-5); border-radius:999px; font-family:var(--font-corpo); font-size:var(--fs-small);
  font-weight:var(--peso-semibold); cursor:pointer; border:1px solid var(--ink);}
.btn-pilula--primario{background:var(--ink); color:var(--branco);}
.btn-pilula--primario:hover{background:var(--green);}
.btn-pilula--contorno{background:transparent; color:var(--ink);}
.btn-pilula--contorno:hover{background:var(--osso-claro);}

/* Escolha do risco: pílulas com selo colorido; a aberta ganha a cor da família. */
.risco-escolha{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-5) 0 var(--sp-4);}
.risco-pilula{display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--alvo-toque);
  padding:0 var(--sp-4); border-radius:999px; border:1px solid var(--line); background:var(--branco);
  color:var(--ink); font-family:var(--font-corpo); font-size:var(--fs-small); cursor:pointer;}
.risco-pilula .risco-selo{display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--osso-claro); color:var(--ink);}
.risco-pilula.r-chuva .risco-selo{color:var(--chuva);}
.risco-pilula.r-fogo .risco-selo{color:var(--fogo);}
.risco-pilula.r-seca .risco-selo{color:var(--seca);}
.risco-pilula.r-calor .risco-selo{color:var(--calor);}
.risco-pilula[aria-selected="true"]{border-color:var(--ink); font-weight:var(--peso-semibold);}
.risco-pilula[aria-selected="true"].r-chuva{border-color:var(--chuva);}
.risco-pilula[aria-selected="true"].r-fogo{border-color:var(--fogo);}
.risco-pilula[aria-selected="true"].r-seca{border-color:var(--seca);}
.risco-pilula[aria-selected="true"].r-calor{border-color:var(--calor);}

/* A ficha aberta: sem caixa, só a linha de 3 px da família em cima. */
.ficha{background:var(--branco); border:none; border-top:3px solid var(--line); border-radius:0;
  padding:var(--sp-4) 0 var(--sp-5); margin:0 0 var(--sp-4);}
.ficha.r-chuva{border-top-color:var(--chuva);}
.ficha.r-fogo{border-top-color:var(--fogo);}
.ficha.r-seca{border-top-color:var(--seca);}
.ficha.r-calor{border-top-color:var(--calor);}
.ficha .ficha-alerta{background:transparent; border-left:3px solid var(--rust); border-radius:0;}

/* O site tem dois pontos de quebra, 640 e 1020, e o portão de estrutura cobra isso: ponto de
   quebra avulso faz uma página responder em largura que nenhuma outra responde. */
@media (max-width: 640px){
  .emerg-cartoes{grid-template-columns:repeat(2, minmax(0,1fr));}
  .emerg-cartoes--cinco{grid-template-columns:repeat(2, minmax(0,1fr));}
  .emerg-cartao--sms{grid-column:1 / -1;}
  .levar-botoes .btn-pilula{width:100%; justify-content:center;}
}

/* ============ Cartão de mapa: UM componente, seis vezes (01/10/2026, pedido da editoria) ========
   O que estava errado: o nome da família e a linha do boletim viviam FORA do cartão, com alturas
   diferentes, e as molduras desalinhavam; um dos mapas ocupava a largura toda e os outros cinco
   ficavam pequenos embaixo; dois cartões tinham seletor dentro e os outros não.

   A ordem interna é fixa nos seis — faixa de família, sobretítulo, linha do boletim, título,
   subtítulo, mapa, legenda, recolhidos, fonte — porque seis cartões com a mesma ordem se comparam
   e seis com ordens diferentes se leem um a um. As alturas das partes de texto são RESERVADAS: sem
   isso, uma linha de boletim mais curta sobe o mapa daquele cartão e a grade perde o alinhamento,
   que é exatamente o defeito que este componente existe para corrigir. */
.grade-mapas{align-items:stretch;}
/* O cartão ocupa a altura inteira da célula da grade: sem isto ele cresce só até o seu
   conteúdo, e um cartão com legenda de sete itens fica mais alto que o de quatro. A legenda
   tem altura reservada para DUAS linhas e o resto da folga vai para o pé, depois da fonte. */
.grade-mapas > .cartao-mapa{height:100%;}
.cartao-mapa .map-legend{align-content:flex-start;}
/* O cartão NÃO redefine caixa: ele é uma `.figura` com filete de família em cima. Padding,
   fundo, raio e sombra vêm do componente de figura — inclusive o padding menor que a media query
   aplica no celular, que uma regra própria aqui venceria por especificidade e quebraria. O portão
   de consistência visual cobrou isso quatro vezes seguidas, e das quatro estava certo: cada
   propriedade que eu redefinia criava um segundo estilo para a mesma família. */
.cartao-mapa{border-top:4px solid var(--line);}
.cartao-mapa.r-previsto{border-top-color:var(--ink);}
.cartao-mapa.r-seca{border-top-color:var(--seca);}
.cartao-mapa.r-fogo{border-top-color:var(--fogo);}
.cartao-mapa.r-calor{border-top-color:var(--calor);}
.cartao-mapa.r-chuva{border-top-color:var(--chuva);}
.cartao-mapa-boletim{font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted);
  margin:0 0 var(--sp-2); min-height:calc(2 * var(--fs-caption) * var(--lh-caption));}
.cartao-mapa .figura-titulo{min-height:calc(2 * var(--fs-h4) * var(--lh-h4));}
.cartao-mapa .figura-sub{min-height:calc(3 * var(--fs-caption) * var(--lh-caption));}
.cartao-mapa .map-legend{min-height:calc(2 * var(--fs-caption) * var(--lh-caption));}
.cartao-mapa .figura-midia{margin-bottom:0;}
/* O gráfico dentro da grade de mapas tem a proporção do mapa (480×460 do viewBox): sem isto, o
   cartão do gráfico ficava 260 px mais baixo que o do mapa ao lado, medido no navegador. */
/* Dentro do cartão de mapa, o gráfico segue a proporção do MAPA (480×460 do viewBox), para os
   três cartões da linha terminarem juntos. A altura fixa de `.figura--grafico` vence `aspect-ratio`
   por ser altura explícita, e por isso ela é desligada aqui — só aqui, dentro do cartão de mapa:
   nas outras páginas o gráfico continua com a altura padrão. */
.cartao-mapa.figura--grafico .figura-midia, .cartao-mapa.figura--grafico .canvas-wrap{height:auto;}
/* 01/10/2026 (Financiamento): dentro do cartão de mapa, QUALQUER mídia toma a proporção do mapa —
   gráfico, diagrama de rede e série temporal inclusive. Sem isto, os nove cartões da página mediam
   de 65 px a 821 px de altura e a grade de três virava uma escada, medido no navegador. O SVG
   acompanha porque tem `viewBox`; o canvas precisa do contêiner, e é por isso que a altura fixa de
   `.figura--grafico` é desligada aqui. */
.cartao-mapa .figura-midia{aspect-ratio:480 / 460; position:relative; overflow:hidden;}
.cartao-mapa .figura-midia > svg, .cartao-mapa .figura-midia > .canvas-wrap{width:100%; height:100%;}
.cartao-mapa .figura-midia > .canvas-wrap{position:absolute; inset:0;}
/* Na figura dupla, as duas mídias dividem a linha: a tela do gráfico volta ao fluxo, senão ela
   é tirada da grade e desenha por cima do mapa. */
.cartao-mapa.figura--dupla .figura-midia > .canvas-wrap{position:relative; inset:auto;}
.canvas-wrap--mapa{aspect-ratio:480 / 460; position:relative;}
.canvas-wrap--mapa > canvas{position:absolute; inset:0;}
.cartao-mapa-rodape{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-2);}
/* Item de flex não encolhe abaixo do seu conteúdo sem `min-width:0`, e a tabela de "Ver em lista"
   tem largura de conteúdo bem maior que o cartão: a 390 px isso empurrava a página inteira
   (scrollWidth 419 > 390, medido). A rolagem da tabela é do `.tbl-wrap`, que já a tem — o que
   faltava era deixar o contêiner encolher para que ela acontecesse lá dentro. */
.cartao-mapa-rodape > details{min-width:0; max-width:100%;}
.cartao-mapa-rodape .tbl-wrap{max-width:100%;}
.cartao-mapa-rodape > details > summary{font-size:var(--fs-caption); line-height:var(--lh-caption);
  color:var(--link); cursor:pointer;}
.cartao-mapa-rodape > details[open]{flex:1 1 100%;}
.cartao-mapa-rodape .figura-leitura{font-size:var(--fs-caption); line-height:var(--lh-caption);
  margin:var(--sp-2) 0 0;}
/* A fonte fica colada no pé do cartão, para os seis terminarem na mesma linha. */
.cartao-mapa > .fonte-figura{margin-top:auto; padding-top:var(--sp-3);}
/* 19/10/2026 (editoria, item 13): as tabelas dentro de cartão de mapa ficam compactas — o que
   encolhe é o respiro da célula, não a letra: a escala tipográfica não muda. */
.cartao-mapa .mun-table th, .cartao-mapa .mun-table td{padding-top:var(--sp-1); padding-bottom:var(--sp-1);}
/* "FIGURA n" sai destes cartões: seis numerações numa grade viram ruído, e a figura já se nomeia
   pelo título. A numeração automática continua nas outras páginas. */
.cartao-mapa{counter-increment:none;}
.cartao-mapa .figura-numero, .cartao-mapa::before{content:none; display:none;}

/* ===== Gráficos do Pacífico (07/10/2026, maquete rev. 2) =================================
   Os dois gráficos do RONI são SVG desenhado na LARGURA REAL do contêiner, e não um canvas
   escalado. A razão é de leitura, e está no pedido: 12 px de letra também no celular. Um viewBox
   de 560 unidades esticado para 343 px de tela reduz toda a tipografia a 7 px — é a mesma figura
   do desktop vista de longe, não uma figura para celular. Aqui o JS mede o contêiner, desenha
   naquela largura e redesenha quando ela muda; o SVG não escala nada.

   Por isso a proporção fixa 480/460 que o cartão de mapa impõe é desligada nestes dois: eles não
   são mapas, e a altura deles é escolhida pela largura. */
/* Os dois títulos do Pacífico reservam TRÊS linhas, e não as duas do cartão de mapa: numa coluna
   da grade de dois eles são mais longos que o rótulo de um mapa, e a reserva é o que faz as duas
   figuras começarem o subtítulo e a mídia na mesma altura. Medido: sem isto, 70 px de diferença. */
.grade-figuras--2 > .cartao-mapa .figura-titulo{min-height:calc(3 * var(--fs-h4) * var(--lh-h4));}
/* E a nota reserva duas linhas, pelo mesmo motivo: é ela que separa o subtítulo da mídia, e uma
   nota de uma linha ao lado de outra de duas sobe o gráfico daquele cartão. */
.grade-figuras--2 > .cartao-mapa .figura-nota{min-height:calc(2 * var(--fs-caption) * var(--lh-caption));}
.cartao-mapa .figura-midia.grafico-pacifico{aspect-ratio:auto; height:auto; overflow:visible;}
.cartao-mapa .figura-midia.grafico-pacifico > svg{width:100%; height:auto;}
.grafico-pacifico-eixo{font-family:var(--font-dado); font-size:var(--fs-caption);
  line-height:var(--lh-caption); color:var(--muted); margin:0 0 var(--sp-1);}
/* A NOTA METODOLÓGICA da figura (governança §11: título · legenda · nota · fonte são quatro
   funções separadas, e nunca se fundem). Ela não existia como componente, e por isso a definição
   do índice vinha empurrada para dentro da legenda — que tem teto de 180 caracteres justamente
   para não virar isto. Registro técnico: menor que a legenda e sem o espaçamento de versalete. */
.figura-nota{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption);
  color:var(--muted); margin:0 0 var(--esp-figura-legenda);}
/* Depois da mídia ou da legenda (que só têm margem em cima), a nota encostava nelas: o ritmo é o mesmo
   de mídia → legenda. */
:is(.figura-midia, .map-legend) + .figura-nota{margin-top:var(--esp-figura-legenda);}
/* Hexadecimal nenhum: toda cor destes gráficos é token de `assets/tokens.css`. */
.g-pac .tk{fill:var(--pacifico-tinta); font-family:var(--font-dado); font-size:var(--fs-caption);}
.g-pac .tk2{fill:var(--pacifico-tinta-fraca); font-family:var(--font-dado); font-size:var(--fs-caption);
  letter-spacing:.06em;}
.g-pac .tkl{stroke:var(--pacifico-grade);}
.g-pac .zero{stroke:var(--pacifico-zero); stroke-width:1;}
.g-pac .lim{stroke:var(--pacifico-grade); stroke-width:1; stroke-dasharray:3 4;}
/* Na coluna estreita o rótulo do limiar cai dentro do desenho, por vezes em cima da série: o mesmo
   contorno na cor do fundo que a anotação usa é o que o mantém legível, nos dois gráficos. */
.g-pac .limt{fill:var(--pacifico-tinta); font-family:var(--font-dado); font-size:var(--fs-caption);
  paint-order:stroke; stroke:var(--grafico-oceano); stroke-width:4px; stroke-linejoin:round;}
.g-pac .div{stroke:var(--pacifico-divisoria); stroke-width:1;}
/* A anotação é escrita SOBRE o gráfico: o contorno na cor do fundo é o que a mantém legível
   quando ela cai em cima de uma barra. */
.g-pac .ann{paint-order:stroke; stroke:var(--grafico-oceano); stroke-width:4px; stroke-linejoin:round;
  fill:var(--osso); font-family:var(--font-dado); font-size:var(--fs-caption);}
.g-pac .ann-agora{fill:var(--pacifico-agora); font-weight:500;}
.g-pac .ann-b{fill:var(--pacifico-serie-b);}
.g-pac .agora{fill:var(--pacifico-agora); stroke:var(--grafico-oceano); stroke-width:2;}
/* Quatro linhas distintas por TRAÇO, não só por cor: cheia grossa, cheia fina, tracejada e
   pontilhada. É a regra de que cor nunca é o único portador da informação. */
.g-pac .l-agora{fill:none; stroke:var(--pacifico-agora); stroke-width:3; stroke-linejoin:round;
  stroke-linecap:round;}
/* 07/10/2026: com a série desde 1950 o critério da NOAA/CPC encontra 22 episódios, e quatro
   traços distintos deixaram de servir — 22 linhas nomeadas numa legenda não se leem, e escolher
   quais mostrar seria recorte nosso. Todas passam a ser UMA família de contexto, no mesmo traço
   fino e no mesmo tom: a nuvem dos episódios anteriores, dentro da qual o ciclo em curso se vê.
   Nenhuma é destacada sobre as outras, porque o dado não sustenta destaque entre elas. */
.g-pac .l-contexto{fill:none; stroke:var(--pacifico-serie-b); stroke-width:1.2; opacity:.5;}
.g-pac .hit{fill:transparent; cursor:default;}
/* A legenda do gráfico 2 mostra o TRAÇO de cada linha, não um quadrado de cor — por isso ela não
   é a `.map-legend` canônica, que é de amostra de cor e serve aos mapas. */
.leg-pacifico{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3);
  margin:var(--esp-figura-legenda) 0 0; font-family:var(--font-dado); font-size:var(--fs-caption);
  line-height:var(--lh-caption); color:var(--muted);}
.leg-pacifico span{display:flex; align-items:center; gap:var(--sp-2);}
/* A amostra é uma pastilha do fundo do gráfico, com o traço dentro: o osso da linha de
   referência mede 1,2:1 sobre branco — invisível —, e é legível sobre o oceano noturno, que é
   onde a linha existe. Mostrar a amostra fora do fundo dela mostraria outra coisa. */
.leg-pacifico i{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:28px; height:14px; background:var(--grafico-oceano); border-radius:2px;}
.leg-pacifico i::before{content:""; display:block; width:20px; height:0;
  border-top-width:3px; border-top-style:solid;}
.leg-pacifico .t-agora::before{border-top-color:var(--pacifico-agora);}
.leg-pacifico .t-contexto::before{border-top-color:var(--pacifico-serie-b); border-top-width:1.2px;
  opacity:.5;}

/* ===== Defesa civil (01/10/2026): alertas e emergências, fundo branco ======================
   A página era uma pilha de `.panel` cinza com mapas de preparação e material de auditoria. Agora
   são quatro seções sem moldura, no mesmo desenho do Proteja-se e do Monitor de riscos: o que
   separa seção é espaço e título.

   Nada aqui redefine caixa de componente existente. Os contadores reusam `.cartao-numero` e
   `.grade-numeros` da Imprensa, e o que se acrescenta é uma VARIANTE de três colunas e o rótulo do
   período — não um segundo estilo para a mesma família, que é o defeito que o portão de
   consistência visual cobrou quatro vezes no cartão de mapa. */
.dc-topo{margin:var(--sp-5) 0 var(--sp-6);}
.dc-topo-periodo{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption);
  text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--muted); margin:0;}
/* 24/10/2026 (editoria, correção 20:15): só o topo da Defesa civil usa a escala menor do cartão de
   número; os demais cartões ficam como estão. Variante por contêiner, sem classe nova. */
.dc-topo .cartao-numero{border-top-width:2px; padding:var(--sp-2) var(--sp-3); gap:var(--sp-1); border-radius:var(--radius);}
.dc-topo .cartao-numero-valor{font-size:var(--fs-h2); line-height:var(--lh-h2);}
/* Busca por município dentro do "Ver em lista": o mapa responde "onde", o campo responde "e a
   minha cidade?". O rótulo é visível de propósito — quem abriu a lista precisa saber o que o campo
   faz, e um campo de busca sem rótulo visível obriga a adivinhar pelo placeholder, que desaparece
   ao digitar. */
.busca-mun{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-2); margin:var(--sp-3) 0;}
.busca-mun label{font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted);}
/* O `select` entra na MESMA regra do `input`, e não por simetria: sem ela ele herda o tamanho
   padrão do navegador — 13,3333 px, medido —, que está fora da escala tipográfica fixa do projeto
   (12 · 14 · 16 · 18 · 22 · 28 · 36 · 48). O portão de consistência visual reprovou nas três
   larguras, e estava certo: dois campos lado a lado com tamanhos diferentes são duas famílias. */
.busca-mun input, .busca-mun select{flex:1 1 180px; min-width:0; max-width:100%; font:inherit; min-height:var(--alvo-toque);
  font-size:var(--fs-small); padding:var(--sp-2); border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); color:var(--ink);}
.busca-mun-conta{flex:1 1 100%; font-family:var(--font-dado); font-size:var(--fs-caption);
  line-height:var(--lh-caption); color:var(--muted); margin:0;}

/* ===== Imprensa (01/10/2026): fundo branco, sem caixas, coluna de leitura ==================
   A página era uma pilha de `.panel` cinza; o pedido é a mesma linguagem do Proteja-se e do
   Monitor de riscos — o que separa seções é espaço e título, não moldura. */
#conteudo > section{margin:var(--sp-6) 0;}
.imprensa-topo{margin:var(--sp-5) 0 var(--sp-6);}
.imprensa-manchete{font-family:var(--font-titulo); font-weight:var(--peso-display);
  font-size:var(--fs-h2); line-height:var(--lh-h2); margin:0;}
/* 01/10/2026: os quatro contadores do topo saíram da página (handover da imprensa dinâmica), e
   com eles as regras `.imprensa-contadores`/`.imprensa-contador`. No lugar entram o sobretítulo de
   cada grupo e a variação ao lado do número — sem cor de bom/ruim, por decisão editorial: a página
   não diz ao leitor se subir é bom. */
.imprensa-grupo{margin:var(--sp-5) 0;}
.imprensa-grupo > .selo{margin-bottom:var(--sp-3);}
.cartao-numero-variacao{display:block; font-family:var(--font-spec); font-size:var(--fs-small);
  line-height:var(--lh-small); letter-spacing:.06em; color:var(--muted);
  font-variant-numeric:tabular-nums; margin:0 0 var(--sp-1);}

/* Cartões da semana: desenho do Proteja-se — borda fina, sem bloco escuro, o número em destaque
   e UMA linha de fonte. O botão é link pequeno, não botão cheio. */
.grade-numeros{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-3);
  margin:var(--sp-4) 0;}
/* Variante de TRÊS por linha (Defesa civil, 01/10/2026). Ela vive aqui, junto da regra base, e não
   no bloco da própria página: mesma especificidade, e quem vem depois no arquivo vence — a primeira
   versão ficava antes da base e era vencida por ela, medido no navegador (4 colunas em vez de 3).
   No celular são 2×2, como a editoria pediu, e não uma coluna. */
.grade-numeros--3{grid-template-columns:repeat(3, minmax(0,1fr));}
/* Variante de DOIS por linha (Para gestores, Financiamento); uma coluna no celular (a regra de 640 px abaixo). */
.grade-numeros--2{grid-template-columns:repeat(2, minmax(0,1fr));}
/* 01/10/2026 (correção de desenho na Defesa civil): o cartão de número ganha a MESMA anatomia do
   cartão de destaque do Proteja-se — borda fina, faixa superior de 4 px na cor da família e o
   número no tamanho de display, em Fraunces leve. Não é componente novo: é a mesma família de
   "número grande com rótulo" ganhando um só estilo, que é exatamente o que o portão de
   consistência visual cobra. O rótulo passa a versalete espaçado, como o `.emerg-rotulo`. */
.cartao-numero{display:flex; flex-direction:column; gap:var(--sp-1);
  border:1px solid var(--line); border-radius:12px; padding:var(--sp-3) var(--sp-4);
  border-top:4px solid var(--line); background:var(--branco);}
.cartao-numero--chuva{border-top-color:var(--chuva);}
/* Cartão que é alvo de escolha (seção de desfechos da Saúde): o ponteiro diz que ele responde,
   e o escolhido fica com a borda em musgo — a faixa do topo continua sendo a da família. A cor
   não vai sozinha: `aria-pressed` leva o estado a quem usa leitor de tela, e o título do detalhe
   abaixo da grade nomeia o desfecho escolhido. */
.cartao-numero[role="button"]{cursor:pointer;}
.cartao-numero[aria-pressed="true"]{border-left-color:var(--green); border-right-color:var(--green); border-bottom-color:var(--green);}
/* 02/10/2026 (redesenho da Imprensa): faixa superior de cor por GRUPO de cartao. A cor nomeia o
   grupo — preparacao, emergencias, risco agora, dinheiro, saude —, e nao julga o numero: nenhuma
   delas e verde de bom nem vermelha de ruim, e a variacao ao lado do numero continua sem cor. */
.cartao-numero--preparacao{border-top-color:var(--green);}
.cartao-numero--emergencias{border-top-color:var(--rust);}
.cartao-numero--risco_agora{border-top-color:var(--chuva);}
.cartao-numero--dinheiro{border-top-color:var(--amber);}
.cartao-numero--saude{border-top-color:var(--slate);}
.cartao-numero--resposta{border-top-color:var(--rust);}
/* 19/10/2026 (editoria, com captura): os cartões do topo ficavam alongados e com vão branco — o
   mais alto definia a altura da grade. O que fecha o vão é o rodapé preso na base
   (`margin:auto 0 0` de `.cartao-numero-fonte`) somado ao teto de seis por linha abaixo.
   DIVERGÊNCIA do pedido: o teto de 2 linhas no rótulo e 3 no apoio NÃO entra. Medido no
   navegador, ele cortava com reticências cinco dos sete rótulos aprovados hoje — e rótulo cortado
   esconde dado, que é pior do que o vão que o pedido queria resolver. */
.cartao-numero-rotulo{font-family:var(--font-dado); font-size:var(--fs-caption);
  line-height:var(--lh-caption); text-transform:uppercase; letter-spacing:var(--ls-caps);
  color:var(--muted); margin:0;}
.cartao-numero-valor{font-family:var(--font-titulo); font-weight:var(--peso-display);
  font-size:var(--fs-display); line-height:var(--lh-display); margin:0;}
.cartao-numero-fonte{font-family:var(--font-dado); font-size:var(--fs-caption);
  line-height:var(--lh-caption); color:var(--muted); margin:auto 0 0;}
/* Lista de definição dentro do cartão de número (25/10/2026): o rótulo no estilo do rótulo do cartão,
   o texto em --fs-small, a fonte empurrada para o pé pelo `margin:auto` dela. */
.cartao-numero-itens{margin:var(--sp-2) 0; padding-top:var(--sp-2); border-top:1px solid var(--line);}
.cartao-numero-itens dt{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption);
  text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--muted); margin:var(--sp-2) 0 0;}
.cartao-numero-itens dd{margin:0; font-size:var(--fs-small); line-height:var(--lh-small);}
.link-pequeno{background:none; border:0; padding:0; color:var(--link); cursor:pointer;
  /* 03/10/2026: alvo de toque de 44 px (portão de conformidade). O desenho continua o de LINK —
     sem fundo e sem borda —, e o que cresce é a área sensível, não a tipografia. */
  display:inline-flex; align-items:center; min-height:var(--alvo-toque);
  font-size:var(--fs-caption); line-height:var(--lh-caption); text-align:left;}
.link-pequeno:hover{text-decoration:underline;}

@media (max-width: 1020px){ .grade-numeros, .grade-numeros--3{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width: 640px){
  .grade-numeros{grid-template-columns:1fr;}
  .grade-numeros--3{grid-template-columns:repeat(2, minmax(0,1fr));}
  /* A 390 px, em duas colunas, o número de 48 px não cabe: "21.211.617" media 201 px numa coluna
     de 139 px e empurrava a página (scrollWidth 419 > 390). Desce um degrau da escala, como o
     `.emerg-numero` já faz no celular — a escala tipográfica é fixa, então é degrau, não `clamp`. */
  .cartao-numero-valor{font-size:var(--fs-h2);}
}

/* Diagrama dos caminhos do dinheiro (Financiamento, 02/10/2026). Tipografia da escala e
   cor pelos tokens: o desenho nao traz cor propria. */
.diag-grupo{font-family:var(--font-dado); font-size:var(--fs-caption);
  letter-spacing:.12em; text-transform:uppercase; fill:var(--muted);}
.diag-via{font-family:var(--font-texto); font-size:var(--fs-small); fill:var(--tinta);}

/* 03/10/2026 (conformidade): o resumo que abre a lista do cartão é o alvo de toque mais usado
   da página no celular — é por ele que se chega à busca por município. */
.cartao-mapa-dados > summary, .figura-dados > summary{min-height:var(--alvo-toque);
  display:flex; align-items:center;}

/* 03/10/2026 (portão de conformidade, primeiro passe): três alvos de toque abaixo dos 44 px, e os
   três são alvo de verdade — não link em meio a frase. O resumo que abre um bloco recolhido, o link
   de ação do cartão e o link da portaria na lista de atos: em todos, o dedo acerta ou não acerta.
   O desenho não muda; cresce a área sensível. */
main details > summary{min-height:var(--alvo-toque); display:flex; align-items:center;}
.cartao .cartao-a{display:inline-flex; align-items:center; min-height:var(--alvo-toque);}
.cartao-mapa dl dt a, .figura dl dt a{display:inline-flex; align-items:center;
  min-height:var(--alvo-toque);}

/* 03/10/2026 · mudancas.html — o registro técnico cita caminhos, rotas e trechos de comando, que
   são palavras únicas de 80 a 160 caracteres. Sem quebra dentro da palavra, uma só delas empurrava
   a página a 546 px de largura em tela de 390 px (portão MÓVEL). A quebra é aqui, na lista, e não
   no corpo do site: em texto corrido quebrar dentro da palavra piora a leitura. */
.mudancas-lista { overflow-wrap: anywhere; }
.mudancas-lista dt { font-family: var(--font-spec); text-transform: uppercase; letter-spacing: .12em; font-variant-numeric: tabular-nums; font-size: var(--fs-small); margin-top: var(--sp-5); }
.mudancas-lista dd { margin: var(--sp-2) 0 0; }

/* 04/10/2026 · item 7 do handover dos temporizadores — A FIGURA LARGA.
   Variante registrada em layout/regras.json: UMA por página, só para diagrama. Ela existe porque
   um diagrama de 960 de largura num cartão de 1/3 da coluna não é um diagrama menor, é um diagrama
   ilegível — a figura dos caminhos passou três dias assim. */
.cartao-mapa--largo{grid-column:1 / -1; width:100%;}
/* A4-24 (12/10/2026): a proporção de mapa (480/460) do `.figura-midia` deixava 570 px de vazio sob
   o diagrama (1052 px de caixa para 483 de desenho). O diagrama largo mede o que o desenho mede. */
.cartao-mapa--largo .figura-midia{width:100%; aspect-ratio:auto; min-height:0;}
.cartao-mapa--largo .figura-midia svg{width:100%; height:auto;}
.diag-caixa{font-family:var(--font-texto); font-size:var(--fs-small); font-weight:600; fill:var(--bg);}
.diag-caixa-sub{font-family:var(--font-dado); font-size:var(--fs-caption); fill:var(--bg);}

/* A lista vertical do celular: a mesma figura, em outra forma. Ela só aparece onde o desenho não
   cabe, e o desenho só aparece onde ele se lê. */
.caminhos-lista{display:none; list-style:none; margin:var(--sp-3) 0 0; padding:0;}
.caminhos-lista li{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0;
  border-bottom:1px solid var(--linha); font-size:var(--fs-small);}
.caminhos-lista li:last-child{border-bottom:0;}
.caminhos-traco{flex:0 0 40px; width:40px; height:10px;}
/* 640 é o breakpoint canônico do projeto (o portão de estrutura só aceita 640 e 1020): o handover
   falava de "≤ 600 px", e 640 é o degrau que existe — a diferença não muda o que o leitor vê, e
   inventar um terceiro breakpoint quebraria a régua de todas as páginas. */
@media (max-width: 640px){
  .cartao-mapa--largo .figura-midia{display:none;}
  .caminhos-lista{display:block;}
}
/* ===== Defesa civil, ajuste 10 (09/10/2026) ============================================== */
/* Topo compacto: a mesma anatomia do cartão de número, um degrau menor. Desde 17/10/2026 (central,
   HANDOVER_NINO34_SEMANAL_E_CARTOES_COMPACTOS §3) é a variante dos números de topo de toda página:
   até seis cartões numa linha no desktop, três no tablet, dois no celular; número em 28 px, rótulo
   em 14 px. Fica depois da regra base e da de três colunas, e por isso vence as duas. */
/* 19/10/2026, três voltas. A primeira trocou `grid-auto-flow:column` por `auto-fit` com mínimo
   de trilha, porque com SETE cartões (o Monitor de riscos ganhou o do IQAr) o fluxo em coluna punha
   os sete na mesma linha e cortava o rótulo. Mas `auto-fit` decide o número de colunas por
   aritmética: 12rem de mínimo em 1.132 px de grade dá 5,9 colunas, e o SEXTO cartão descia
   sozinho, 34 px mais baixo (medido na Defesa civil e na Imprensa), enquanto a fileira de cinco
   da Saúde quebrava em 4 + 1 a 1021 px, contra o `linhas: 1` do contrato dela.
   O #896 baixou o mínimo para 11rem, o que faz caber seis a 1280 px mas não a 1021, onde a grade
   tem 973 px e 11rem de mínimo ainda dá cinco colunas — medido. Daí esta terceira volta.
   Agora a CSS diz o que a variante declara, sem contar pixels: no desktop os cartões vão todos
   numa linha (fluxo em coluna, trilhas iguais), e o limite de seis é a única exceção — com sete
   ou mais a fileira passa a quatro colunas e vira duas linhas cheias (4 + 3), em vez de deixar o
   sétimo órfão. Abaixo de 1021 px valem as duas regras de empilhamento, logo adiante. */
@media (min-width: 1021px){
  .grade-numeros--compacta{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);}
  .grade-numeros--compacta:has(> :nth-child(7)){grid-auto-flow:row; grid-template-columns:repeat(4, minmax(0,1fr));}
}
.grade-numeros--compacta .cartao-numero{padding:var(--sp-2) var(--sp-3);}
.grade-numeros--compacta .cartao-numero-valor{font-size:var(--fs-h2); line-height:var(--lh-h2);}
.grade-numeros--compacta .cartao-numero-rotulo{font-size:var(--fs-small); line-height:var(--lh-small);}
/* A série recente dentro do cartão de número (seção de desfechos da Saúde): altura fixa, sem eixo. */
.cartao-numero-serie{display:block; width:100%; height:48px; margin:var(--sp-1) 0 0;}
@media (max-width: 1020px){ .grade-numeros--compacta{grid-auto-flow:row; grid-template-columns:repeat(3, minmax(0,1fr));} }
@media (max-width: 640px){ .grade-numeros--compacta{grid-template-columns:repeat(2, minmax(0,1fr));} }
/* 28/10/2026 (PARA A B1): grupo de 1 ou 2 cartões não deixa trilha vazia entre 641 e 1020 px; contagem ímpar no celular não deixa cartão órfão. */
@media (max-width: 1020px){ .grade-numeros--compacta:not(:has(> :nth-child(3))){grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width: 640px){ .grade-numeros--compacta > :last-child:nth-child(odd){grid-column:1 / -1;} }
/* Barras em HTML: rótulo inteiro, valor na ponta, painel por órgão. */
.figura-midia--barras, .figura-midia--texto{overflow:visible;}
/* A mídia de texto ou de barras nunca reserva a proporção do mapa: sem par de mesma proporção, a reserva vira vão no topo. */
.cartao-mapa .figura-midia--barras, .cartao-mapa .figura-midia--texto{aspect-ratio:auto; height:auto;}
.barras-painel{display:grid; grid-template-columns:fit-content(42%) minmax(0, 1fr); column-gap:var(--sp-2); margin:0 0 var(--sp-3);}
.barras-titulo{font-weight:400; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted); margin:0 0 var(--sp-1);}
.barra-linha{display:grid; grid-template-columns:subgrid; grid-column:1 / -1; align-items:center; margin:0 0 var(--sp-1);}
.barra-linha--total{border-top:1px solid var(--line); padding-top:var(--sp-1);}
.barra-rotulo{font-size:var(--fs-caption); line-height:var(--lh-caption); overflow-wrap:anywhere;}
.barra-trilho{display:flex; align-items:center; gap:var(--sp-1); min-width:0;}
.barra{display:block; height:12px; border-radius:2px; flex:none; min-width:var(--sp-1); max-width:calc(100% - 4em);}
.barra-valor{font-family:var(--font-dado); font-size:var(--fs-caption); font-variant-numeric:tabular-nums; white-space:nowrap;}
.cemaden-resumo{font-size:var(--fs-body); margin:0 0 var(--sp-2);}
.cemaden-lista{font-size:var(--fs-caption); line-height:var(--lh-caption); padding-left:var(--sp-4); margin:0;}
/* ===== Proteja-se, ajustes de 09/10/2026 (editoria) ======================================== */
/* Socorro em três números: variante da barra de telefones do topo, não bloco novo. */
.emerg-cartoes--tres{grid-template-columns:repeat(3, minmax(0,1fr));}
.contato-frase{column-count:auto; max-width:none; margin:var(--sp-3) 0;}
/* Um controle só: as 27 siglas em grade, ordem alfabética; o cartão do estado abre logo abaixo. */
.contato-siglas{display:grid; grid-template-columns:repeat(auto-fill, minmax(56px, 1fr)); gap:var(--sp-2); margin:var(--sp-3) 0;}
.contato-siglas button{min-height:var(--alvo-toque); font-family:var(--font-dado); font-size:var(--fs-small);
  font-weight:var(--peso-semibold); letter-spacing:var(--ls-caps); background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius); cursor:pointer;}
.contato-siglas button[aria-pressed="true"]{background:var(--ink); color:var(--branco); border-color:var(--ink);}
/* Recado com os destinos dos alertas, no componente de cartão. */
.recado-destinos{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-3); margin:0 0 var(--esp-secao);}
.recado-destino{text-decoration:none; color:inherit;}
@media (max-width: 640px){ .recado-destinos, .emerg-cartoes--tres{grid-template-columns:minmax(0,1fr);} }
.selo-plantao{margin-left:auto; font-family:var(--font-dado); font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--musgo);}

/* ===== Monitor de riscos, ajustes de 09/10/2026 (editoria) ====================================
   Variantes de componente existente — nenhum bloco novo. */
/* Seção sem moldura: título e abertura como cabeçalho, e os cartões sobre o fundo da página. */
.secao-aberta{margin:0 0 var(--esp-secao); max-width:100%; min-width:0;}
.secao-aberta > h2:first-child{margin-top:0;}
/* A grade de números mantém a altura igual na linha, e a fonte vai ao pé do cartão. */
.grade-numeros{align-items:stretch;}
/* Três por linha no desktop e UM por linha no celular, na mesma ordem (ajuste 3). */
@media (max-width: 640px){ .grade-numeros--empilha{grid-template-columns:1fr;} }
/* Cartão de número com três valores de mesma hierarquia: mesmo corpo, mesmo peso, lado a lado,
   cada um com a legenda curta embaixo. Nenhum em destaque sobre os outros. */
.cartao-numero-trio{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-2);
  font-size:inherit; line-height:inherit;}
.cartao-numero-trio .trio-item{display:flex; flex-direction:column; gap:var(--sp-1); margin:0;}
.cartao-numero-trio .trio-numero{font-family:var(--font-titulo); font-weight:var(--peso-display);
  font-size:var(--fs-h2); line-height:var(--lh-h2); font-variant-numeric:tabular-nums; white-space:nowrap;}
.cartao-numero-trio .trio-legenda{font-family:var(--font-dado); font-size:var(--fs-caption);
  line-height:var(--lh-caption); color:var(--muted);}
/* Figura sozinha na fila não tem vizinha com quem alinhar: sem altura reservada no cabeçalho. */
.grade-figuras--1 > .cartao-mapa .figura-titulo, .grade-figuras--1 > .cartao-mapa .figura-sub,
.grade-figuras--1 > .cartao-mapa .figura-nota{min-height:0;}
/* Episódios: ao passar o mouse, tocar ou focar uma linha, ela acende e as outras esmaecem. */
.g-pac .hit-linha{fill:none; stroke:transparent; stroke-width:10; pointer-events:stroke;}
.g-pac .ep{outline:none;}
.g-pac.foco .ep .l-contexto{opacity:.15;}
.g-pac.foco .ep.acesa .l-contexto{opacity:1; stroke-width:2.4;}
.g-pac .ep:focus-visible .l-contexto, .g-pac .ep:focus-visible .l-agora{stroke-width:3.4;}
.g-pac .ann-ep{fill:var(--pacifico-serie-b); font-family:var(--font-dado); font-size:var(--fs-caption);}
/* 16/10/2026 (Monitor de riscos): selo de bloco de família, com "Boletim prevê para" ao lado. */
.faixa-selo{margin:var(--sp-5) 0 var(--sp-3);}
.faixa-selo--familia{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-2) var(--sp-4);
  padding-bottom:var(--sp-2); border-bottom:1px solid var(--linha);}
.faixa-selo--familia .selo{margin:0;}
.boletim-preve{margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-2);
  font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted);}
/* Risco previsto em faixa: uma linha por família, siglas como etiquetas. */
.faixa-previsto{margin:var(--sp-2) 0 0; display:grid; gap:var(--sp-2);}
.faixa-previsto > div{display:grid; grid-template-columns:minmax(0, 15rem) minmax(0, 1fr); gap:var(--sp-3); align-items:baseline;
  padding-bottom:var(--sp-2); border-bottom:1px solid var(--line);}
.faixa-previsto dt{font-family:var(--font-dado); font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--peso-semibold);}
.faixa-previsto dd{margin:0;}
.marca-risco{display:inline-block; width:var(--sp-3); height:var(--sp-3); margin-right:var(--sp-1); vertical-align:baseline; background:var(--seca);}
.marca-risco--chuva{background:var(--chuva);} .marca-risco--fogo{background:var(--fogo);}
.marca-risco--vazia{background:transparent; border:1px solid var(--muted);}
.faixa-previsto__n{font-weight:var(--peso-regular); color:var(--muted);}
@media (max-width: 640px){ .faixa-previsto > div{grid-template-columns:minmax(0, 1fr); gap:var(--sp-1);} }
/* Cartão de mapa com dados ao lado (fogo) e cartão de tabela: a mídia não tem a proporção do mapa. */
.cartao-mapa.figura--dupla .figura-midia, .cartao-mapa.figura--tabela .figura-midia{aspect-ratio:auto; overflow:visible; align-items:start;}
/* 19/10/2026 (editoria, item 12): a coluna do mapa era mais baixa que a dos números e sobrava
   uma faixa branca sob ele. A coluna passa a ocupar a altura inteira e o mapa se centra nela:
   as duas colunas terminam juntas, sem esticar o desenho do mapa. */
.cartao-mapa.figura--dupla .figura-midia{align-items:stretch;}
/* Figura dupla com duas legendas: cada metade é mídia + legenda, a legenda logo abaixo da sua mídia
   (gráfico → legenda da série; mapa → legenda das classes); empilhada, a ordem do documento. */
.cartao-mapa.figura--dupla .figura-midia:has(> .map-legend){grid-auto-flow:column; grid-template-rows:auto auto; align-items:start; row-gap:0;}
@media (max-width: 640px){ .cartao-mapa.figura--dupla .figura-midia:has(> .map-legend){grid-auto-flow:row; grid-template-rows:none;} }
/* 10/11/2026: o mapa fica centrado na sua coluna e a legenda dele, alinhada à esquerda da coluna, lia-se
   como continuação da legenda do gráfico. Centrada, ela fica sob o desenho que descreve. */
.cartao-mapa.figura--dupla .mapa-dupla{justify-content:center;}
.cartao-mapa.figura--dupla .mapa-dupla + .map-legend{display:grid; grid-template-columns:minmax(0, max-content); justify-content:center;}
@media (max-width: 640px){ .cartao-mapa.figura--dupla .mapa-dupla + .map-legend{display:flex; justify-content:flex-start;} }
.mapa-dupla{display:flex; align-items:center; min-width:0;}
.mapa-dupla > svg{width:100%; height:auto; display:block;}
.map-legend i.leg-losango{width:8px; height:8px; transform:rotate(45deg); border:1px solid var(--muted); background:none;}
.map-legend i.leg-vazado{border-radius:50%; border:2px solid currentColor; background:none;}
.map-legend i.leg-tamanho{box-sizing:border-box; border-radius:50%; border:1px solid var(--muted); background:none;}
.lado-dados{display:grid; gap:var(--sp-3); align-content:start;}
.lado-numeros{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-3); margin:0;}
.lado-numeros dt, .lado-rotulo{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--muted); margin:0;}
.lado-numeros dd{margin:0; font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-h3); line-height:var(--lh-h3);
  font-variant-numeric:tabular-nums;}
.lado-numeros dd.lado-var{font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted);}
.lado-serie svg{width:100%; height:auto; display:block;}
.lado-serie .serie-linha{fill:none; stroke:var(--fogo); stroke-width:1.5;}
.lado-serie .serie-alvo{fill:transparent;}
.lado-serie .tk{font-family:var(--font-dado); font-size:var(--fs-caption); fill:var(--muted);}
/* 19/10/2026 (item 11): grade discreta atrás da série, no mesmo filete dos outros gráficos. */
.lado-serie .grade{stroke:var(--line); stroke-width:.5;}
.dica-fonte{color:var(--muted); font-size:var(--fs-caption);}
.lista-estados{margin:var(--sp-2) 0 0; padding-left:var(--sp-4); font-size:var(--fs-caption);
  line-height:var(--lh-caption); color:var(--ink);}
/* Escada de gravidade do cartão de avisos: filete na cor do grau, nome, contagem e barra proporcional. */
.escada{list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3);}
.escada li{display:grid; grid-template-columns:1fr auto; gap:0 var(--sp-3); padding-left:var(--sp-3); border-left:4px solid var(--cor);}
.escada-grau{font-weight:600; font-size:var(--fs-small);}
.escada-n{font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-h3); line-height:var(--lh-h3); text-align:right;}
.escada-barra{grid-column:1 / -1; height:6px; background:var(--gauge-trilho); border-radius:var(--radius);}
.escada-barra i{display:block; height:100%; background:var(--cor); border-radius:var(--radius);}
.escada-fen{grid-column:1 / -1; font-family:var(--font-dado); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--muted);}

/* Imprensa (26/10/2026): título de bloco com o token de display; atalhos e busca do glossário no alvo de toque. */
main h3.titulo-bloco{font-family:var(--font-titulo); font-weight:var(--peso-display); font-size:var(--fs-h3); line-height:var(--lh-h3); color:var(--ink); margin:var(--sp-4) 0 var(--sp-2);}
.atalhos{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-2); font-family:var(--font-dado); font-size:var(--fs-small); line-height:var(--lh-small);}
.atalhos a{display:inline-flex; align-items:center; min-height:var(--alvo-toque); padding:0 var(--sp-1);}
input.busca{display:block; box-sizing:border-box; width:100%; max-width:100%; min-height:var(--alvo-toque); font:inherit; font-size:var(--fs-small);
  padding:var(--sp-2); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); margin:0 0 var(--sp-4);}
/* Imprensa (09/11/2026): listas dentro de cartão (Como ler, Onde está cada dado, Glossário). O título do cartão
   abre colado ao topo; cada pergunta ou termo é uma linha, separada por fio; o texto aberto fica no corpo pequeno. */
.cartao-mapa > h3.titulo-bloco:first-child{margin-top:0;}
.cartao-mapa > details{border-top:1px solid var(--line);}
.cartao-mapa > details > summary{font-size:var(--fs-small); line-height:var(--lh-small);}
.cartao-mapa > details > p{font-size:var(--fs-small); line-height:var(--lh-small); margin:0 0 var(--sp-3);}
.cartao-mapa > h3.titulo-bloco > a{display:inline-flex; align-items:center; min-height:var(--alvo-toque); color:inherit; text-decoration-thickness:1px; text-underline-offset:3px;}