/*
 * Portal institucional municipal — Guapé/MG.
 *
 * Base: Design System gov.br. A aderência não é gosto: o cidadão brasileiro já
 * reconhece esses padrões e a comissão de licitação cobra a referência. O DS
 * inteiro não é importado — traria peso e dependência de CDN sem ganho neste
 * porte —, mas os tokens, a tipografia e os componentes seguem o dele.
 *
 * A identidade de Guapé entra em três lugares controlados, e só neles:
 *   1. a cor de superfície, medida do brasão e da bandeira oficiais
 *   2. a assinatura — a linha d'água com folhas de aguapé
 *   3. a marca do cabeçalho
 *
 * Ver docs/plano-de-design.md para a origem de cada decisão.
 *
 * Contraste: toda combinação de texto e fundo aqui foi medida, não estimada.
 * A linha de base a não regredir está no commit 2c20920.
 */

/* ------------------------------------------------------------------ fontes -- */
/* Hospedadas neste servidor. Sem CDN: o portal não depende de terceiro para
   renderizar texto, e nenhum dado de visitante vaza para fora. Proveniência e
   licença em static/fontes/PROVENIENCIA.md.
   font-display:swap para o texto aparecer na fonte de sistema enquanto a nossa
   carrega — texto invisível é falha de acessibilidade, não detalhe de estilo. */

@font-face {
  font-family: "Rawline";
  src: url("../fontes/rawline-600.41c13ac72cb6.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rawline";
  src: url("../fontes/rawline-700.564a4af3594a.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rawline";
  src: url("../fontes/rawline-800.ac23d710828e.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fontes/raleway-400.cce0438632b1.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fontes/raleway-500.ead0aacbe6c1.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fontes/raleway-700.c90714a7f433.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ cores -- */

:root {
  /* --- herdadas do Design System gov.br -------------------------------- */
  --azul-escuro: #071D41;
  --azul: #1351B4;
  --azul-claro: #C5D4EB;
  --amarelo: #FFCD07;
  --verde: #168821;
  --vermelho: #E52207;
  --laranja: #C45300;

  /* --- de Guapé: medidas do brasão e da bandeira oficiais --------------
     #70C0E8 é 77% da bandeira e o campo do escudo. Dá 2,02:1 contra branco:
     é chão, nunca texto nem link. As demais derivam dela. */
  --agua: #70C0E8;
  --agua-funda: #0B4E70;   /* chão do herói — branco por cima dá 8,98:1 */
  --agua-media: #DCEDF8;   /* blocos de identidade — texto escuro explícito */
  --agua-rasa: #F5FAFD;    /* superfície alternada de seção */
  /* Água clareada até virar cor de TEXTO sobre a água funda: 5,68:1, contra os
     4,45:1 que a --agua pura dava. A auditoria reprovou o lema do herói com a
     --agua, e estava certa — a regra deste sistema é que a água é chão, nunca
     tinta. Quando a identidade precisa aparecer em texto, é este token. */
  --agua-tinta: #C9EAF8;
  --listel: #9E1A0D;       /* vermelho dos listéis, escurecido — 8,05:1 */

  /* A água-rasa foi calibrada em #F5FAFD e não num azul mais saturado porque
     o pior caso do portal é o link da migalha (--azul sobre esta superfície).
     Em #F8F8F8 dava 6,90:1; aqui dá 6,98:1. A superfície nova melhora o pior
     caso em vez de piorá-lo. Não escurecer sem refazer a medição. */

  /* --- neutros com viés de água, não cinzas puros ---------------------- */
  --texto: #0F1D2B;        /* 17,06:1 no branco */
  --texto-suave: #3E5163;  /* 8,20:1 no branco, 7,80:1 na água-rasa */
  --borda: #CCCCCC;        /* separador decorativo: 1.4.11 não se aplica */
  --borda-campo: #767676;  /* limite de componente: exige 3:1, dá 4,54:1 */
  --fundo: #FFFFFF;
  --fundo-alt: var(--agua-rasa);
  --azul-fundo: var(--agua-rasa);

  --escala: 1;
  --base: calc(16px * var(--escala));

  /* --- tipografia ------------------------------------------------------ */
  --titulo: "Rawline", "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;
  --corpo: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala de terça maior (1,250). A anterior era frouxa demais: h3 a
     1,0625rem quase não se distinguia do corpo, e título que não se distingue
     do texto não estrutura página nenhuma. */
  --t-xs:  0.8rem;
  --t-sm:  0.875rem;
  --t-md:  1.25rem;
  --t-lg:  1.563rem;
  --t-xl:  1.953rem;
  --t-2xl: 2.441rem;

  --raio: 4px;
  --largura-max: 1200px;
}

/* Alto contraste: preto e amarelo, o par de maior separação luminosa e o mais
   consistente com o que usuários de baixa visão esperam em portal público.
   A identidade de Guapé colapsa aqui — a estética cede ao critério. */
html[data-contraste="alto"] {
  --azul-escuro: #000000;
  --azul: #000000;
  --azul-claro: #FFFFFF;
  --amarelo: #FFFF00;
  --verde: #00FF00;
  --vermelho: #FF6666;
  --laranja: #FFAA00;

  --agua: #FFFF00;
  --agua-funda: #000000;
  --agua-media: #000000;
  --agua-rasa: #000000;
  --agua-tinta: #FFFF00;
  --listel: #FFFF00;

  --texto: #FFFF00;
  --texto-suave: #FFFF00;
  --borda: #FFFF00;
  --borda-campo: #FFFF00;
  --fundo: #000000;
}

html[data-fonte="1"] { --escala: 1.125; }
html[data-fonte="2"] { --escala: 1.25; }
html[data-fonte="3"] { --escala: 1.5; }
html[data-fonte="-1"] { --escala: 0.9; }

* { box-sizing: border-box; }

html { font-size: var(--base); }

body {
  margin: 0;
  font-family: var(--corpo);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 1rem;
}

/* --------------------------------------------------------------- foco ----- */
/* Nunca remover o indicador de foco: WCAG 2.4.7. Um anel de cor única não
   serve: o amarelo dava 11,09:1 sobre a barra escura e 1,5:1 sobre o branco do
   conteúdo, deixando um terço dos focáveis sem indicador legível. Daí o anel de
   dois tons — o amarelo encosta no elemento e vence sobre fundo escuro, o
   azul-escuro fica por fora e vence sobre fundo claro. Qualquer que seja o
   fundo, um dos tons alcança os 3:1 de 1.4.11.
   Ao medir foco, medir os DOIS tons: instrumento que lê só o outline reprova
   este anel por engano (CLAUDE.md, seção 8). */
:focus-visible {
  outline: 3px solid var(--azul-escuro);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--amarelo);
}
html[data-contraste="alto"] :focus-visible {
  outline: 3px solid #FFFFFF;
  box-shadow: 0 0 0 2px #000000;
}

/* Conteúdo visível só para leitor de tela. */
.apenas-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------- skip links ---- */
.pular-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--amarelo);
  color: #000;
  padding: 0.75rem 1.25rem;
  font-family: var(--titulo);
  font-weight: 700;
  text-decoration: none;
}
.pular-link:focus { left: 0; }
/* A regra genérica 'html[data-contraste="alto"] a' pintava este texto de
   amarelo sobre o fundo amarelo do próprio link — 1:1, invisível justamente
   para quem usa teclado e alto contraste ao mesmo tempo. Especificidade
   (0,2,1) vence a regra de link (0,1,2). */
html[data-contraste="alto"] .pular-link {
  background: var(--amarelo);
  color: #000;
}

/* -------------------------------------------- barra de acessibilidade ----- */
.barra-acessibilidade {
  background: var(--azul-escuro);
  color: #fff;
  font-size: var(--t-sm);
}
.barra-acessibilidade__interna {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.barra-acessibilidade__grupo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.barra-acessibilidade a { color: #fff; }
.barra-acessibilidade kbd {
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
  padding: 0 0.25rem;
  font-size: var(--t-xs);
}
html[data-contraste="alto"] .barra-acessibilidade,
html[data-contraste="alto"] .barra-acessibilidade a { color: var(--amarelo); }

.botao-acessibilidade {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  border-radius: var(--raio);
  /* 44x44 é o alvo mínimo confortável de toque (WCAG 2.5.5, nível AAA, mas
     barato de atender e decisivo em celular). */
  min-width: 2.75rem;
  min-height: 2.75rem;
  cursor: pointer;
  font-family: var(--titulo);
  font-size: var(--t-sm);
  font-weight: 700;
}
.botao-acessibilidade:hover { background: rgba(255,255,255,0.15); }
.botao-acessibilidade[aria-pressed="true"] {
  background: var(--amarelo);
  color: #000;
  border-color: var(--amarelo);
}
html[data-contraste="alto"] .botao-acessibilidade {
  color: var(--amarelo);
  border-color: var(--amarelo);
}

/* ------------------------------------------------ aviso de demonstração --- */
.aviso-demonstracao {
  background: var(--amarelo);
  color: #000;
  padding: 0.5rem 0;
  font-size: var(--t-sm);
  border-bottom: 2px solid #000;
}
html[data-contraste="alto"] .aviso-demonstracao {
  background: #000;
  color: var(--amarelo);
  border-bottom-color: var(--amarelo);
}

/* ------------------------------------------------------------ cabeçalho --- */
.cabecalho { background: var(--fundo); }
.cabecalho__interno {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.cabecalho__marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--azul-escuro);
}
.cabecalho__marca:hover .cabecalho__nomes strong { text-decoration: underline; }

/* A marca é um selo desenhado, não o brasão oficial: o portal declara em toda
   página que não é o site oficial do município, e estampar o símbolo oficial
   contradiria essa declaração. Trocar pelo brasão é editar
   core/inclusoes/marca.html e mais nada. */
.marca-selo { flex: none; display: block; }
.marca-selo__campo  { fill: var(--azul-escuro); }
.marca-selo__agua   { fill: var(--agua); }
.marca-selo__linha  { fill: #FFFFFF; }
.marca-selo__folha  { fill: #FFFFFF; }
.marca-selo__borda  { fill: none; stroke: rgba(255,255,255,0.25); stroke-width: 1.5; }
/* No rodapé, que já é azul-escuro, o selo precisa de contorno claro para não
   sumir no fundo. */
.rodape .marca-selo__borda { stroke: rgba(255,255,255,0.55); }
html[data-contraste="alto"] .marca-selo__campo { fill: #000000; }
html[data-contraste="alto"] .marca-selo__agua,
html[data-contraste="alto"] .marca-selo__linha,
html[data-contraste="alto"] .marca-selo__folha { fill: var(--amarelo); }
html[data-contraste="alto"] .marca-selo__borda { stroke: var(--amarelo); stroke-width: 2; }

.cabecalho__nomes { display: flex; flex-direction: column; line-height: 1.2; }
.cabecalho__nomes strong {
  font-family: var(--titulo);
  font-weight: 800;
  font-size: var(--t-md);
  letter-spacing: -0.015em;
}
.cabecalho__nomes span {
  font-size: var(--t-xs);
  color: var(--texto-suave);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

.busca { display: flex; gap: 0.375rem; }
.busca input {
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio);
  padding: 0.625rem 0.75rem;
  font-family: var(--corpo);
  font-size: 0.9375rem;
  min-width: 14rem;
  background: var(--fundo);
  color: var(--texto);
}
.busca button {
  background: var(--azul);
  color: #fff;
  border: 1px solid var(--azul);
  border-radius: var(--raio);
  padding: 0.625rem 1rem;
  font-family: var(--titulo);
  font-weight: 700;
  cursor: pointer;
  min-height: 2.75rem;
}
.busca button:hover { background: var(--azul-escuro); }
html[data-contraste="alto"] .busca button {
  background: var(--amarelo); color: #000; border-color: var(--amarelo);
}

/* ------------------------------------------------------------------ menu -- */
.menu { background: var(--azul); }
html[data-contraste="alto"] .menu { border-top: 2px solid var(--amarelo); }

.menu__alternador {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.6);
  color: #fff;
  padding: 0.625rem 1rem;
  margin: 0.5rem 0;
  border-radius: var(--raio);
  font-family: var(--titulo);
  font-weight: 700;
  cursor: pointer;
  min-height: 2.75rem;
}
.menu__lista {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu__lista a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 0.875rem 1rem;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 0.9375rem;
}
.menu__lista a:hover { background: var(--azul-escuro); text-decoration: underline; }
.menu__lista a[aria-current="page"] {
  background: var(--azul-escuro);
  box-shadow: inset 0 -4px 0 var(--amarelo);
}
html[data-contraste="alto"] .menu__lista a { color: var(--amarelo); }

/* -------------------------------------------------------------- migalhas -- */
.migalhas { background: var(--agua-rasa); border-bottom: 1px solid var(--borda); }
.migalhas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0.625rem 0;
  font-size: var(--t-sm);
}
.migalhas li + li::before { content: "›"; margin-right: 0.5rem; color: var(--texto-suave); }

/* ================================================== A ASSINATURA ==========
   A linha d'água.

   A bandeira de Guapé é uma linha d'água horizontal: água em cima, branco
   embaixo. Em 1963 as comportas de Furnas fecharam e uma linha d'água real
   cortou a cidade, que foi transferida para terreno mais alto. O nome do
   município vem do aguapé, a planta que flutua exatamente sobre essa linha.

   Por isso a assinatura é a linha, e não uma onda: onda qualquer portal
   desenha. O que é de Guapé são as folhas de aguapé pousadas nela.

   Aparece duas vezes e só: grande fechando o herói, e comprimida como régua no
   topo do conteúdo das páginas internas. Não entre seções — divisor de onda a
   cada seção é o padrão genérico que este projeto recusa.
   ========================================================================= */

.linha-dagua { display: block; width: 100%; height: 56px; }
.linha-dagua__acima  { fill: var(--agua-funda); }
.linha-dagua__linha  { fill: var(--agua); }
.linha-dagua__folhas { fill: var(--agua); }

.regua-dagua { line-height: 0; }
.regua-dagua .linha-dagua { height: 12px; }

/* Em alto contraste o desenho some contra o preto; a régua sólida garante que a
   divisão continue perceptível. */
html[data-contraste="alto"] .linha-dagua { display: none; }
html[data-contraste="alto"] .heroi { border-bottom: 3px solid var(--amarelo); }
html[data-contraste="alto"] .regua-dagua { border-top: 3px solid var(--amarelo); }

/* --------------------------------------------------------------- ligações -- */
a { color: var(--azul); }
a:hover { color: var(--azul-escuro); }
html[data-contraste="alto"] a { color: var(--amarelo); }

/* ------------------------------------------------------------- tipografia -- */
h1, h2, h3, h4 {
  font-family: var(--titulo);
  color: var(--azul-escuro);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 2rem 0 0.75rem;
  text-wrap: balance;
}
h1 { font-size: clamp(1.953rem, 1.4rem + 2.4vw, 2.441rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 1.2rem + 1.1vw, 1.953rem); font-weight: 700; }
h3 { font-size: var(--t-md); font-weight: 700; }
h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; }
html[data-contraste="alto"] h1,
html[data-contraste="alto"] h2,
html[data-contraste="alto"] h3,
html[data-contraste="alto"] h4 { color: var(--amarelo); }

/* Sobrescrito: o rótulo pequeno que nomeia a natureza do bloco. Rawline em
   caixa alta com tracking largo — é o terceiro papel tipográfico do sistema. */
.sobrescrito {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 0.375rem;
}

/* Texto corrido de leitura fica na medida confortável. */
.medida { max-width: 68ch; }

main { padding: 0 0 4rem; }
main > .container > :first-child { margin-top: 2rem; }

/* Algarismo de dado: alinhado e tabular, para data e valor formarem coluna. */
time, .numero, .cartao__data {
  font-family: var(--titulo);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- seções --- */
.secao { margin-bottom: 3.5rem; }
.secao:last-child { margin-bottom: 0; }
.secao__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.25rem;
}
.secao__topo h2 { margin: 0; }
.secao__link {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* Faixa de superfície: separa seções por chão de cor, não por borda em tudo. */
.faixa { background: var(--agua-rasa); padding: 3rem 0; }
.faixa > .container > :first-child { margin-top: 0; }

/* ----------------------------------------------------------------- herói --- */
.heroi {
  background: var(--agua-funda);
  color: #fff;
  padding: 3.5rem 0 0;
}
.heroi__interno {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  align-items: start;
}
.heroi__principal { display: grid; gap: 1.5rem; align-content: start; }

/* A ficha de atendimento fica sobre um azul um passo mais claro que o chão do
   herói, para se destacar sem virar caixa branca. Branco sobre #0E5A80 dá
   7,52:1; por isso rótulo e valor são ambos brancos, diferenciados por corpo e
   peso, e não por cor — água #70C0E8 aqui daria só 3,72:1. */
.heroi__ficha {
  background: #0E5A80;
  border-radius: var(--raio);
  padding: 1.5rem 1.5rem 1.75rem;
}
.heroi__ficha h2 {
  color: #fff;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.heroi__ficha dl { margin: 0; display: grid; gap: 0.875rem; }
.heroi__ficha dt {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
}
.heroi__ficha dd { margin: 0.125rem 0 0; font-size: 0.9375rem; line-height: 1.45; }
.heroi__ficha a { color: #fff; }
/* Qualificado por .heroi__ficha de propósito: .botao é declarado depois neste
   arquivo e, com a mesma especificidade, vencia — o botão saía azul sobre azul,
   com limite de 1,03:1. Colisão de cascata, não erro de cor. */
.heroi__ficha .heroi__ficha-acao {
  margin-top: 1.25rem;
  background: #fff;
  color: var(--agua-funda);
  border-color: #fff;
}
.heroi__ficha .heroi__ficha-acao:hover {
  background: var(--agua); color: var(--azul-escuro); border-color: var(--agua);
}
html[data-contraste="alto"] .heroi__ficha {
  background: #000;
  border: 1px solid var(--amarelo);
}
html[data-contraste="alto"] .heroi__ficha h2,
html[data-contraste="alto"] .heroi__ficha dt,
html[data-contraste="alto"] .heroi__ficha dd,
html[data-contraste="alto"] .heroi__ficha a { color: var(--amarelo); opacity: 1; }
html[data-contraste="alto"] .heroi__ficha .heroi__ficha-acao {
  background: var(--amarelo); color: #000; border-color: var(--amarelo);
}
.heroi h1 { color: #fff; margin: 0; max-width: 18ch; }
.heroi__lema {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--agua-tinta);
  margin: 0 0 0.75rem;
}
.heroi__texto {
  font-size: var(--t-md);
  line-height: 1.5;
  max-width: 46ch;
  margin: 0;
  color: #fff;
}
.heroi__busca { display: flex; gap: 0.5rem; max-width: 34rem; }
.heroi__busca input {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #fff;
  border-radius: var(--raio);
  padding: 0.875rem 1rem;
  font-family: var(--corpo);
  font-size: 1rem;
  background: var(--fundo);
  color: var(--texto);
  min-height: 3rem;
}
.heroi__busca button {
  background: var(--amarelo);
  color: #000;
  border: 1px solid var(--amarelo);
  border-radius: var(--raio);
  padding: 0.875rem 1.5rem;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  min-height: 3rem;
}
.heroi__busca button:hover { background: #fff; border-color: #fff; }
.heroi__rodape { padding-bottom: 2.5rem; }
html[data-contraste="alto"] .heroi { border-top: 3px solid var(--amarelo); }
html[data-contraste="alto"] .heroi h1,
html[data-contraste="alto"] .heroi__texto,
html[data-contraste="alto"] .heroi__lema { color: var(--amarelo); }

/* ------------------------------------------------------- cartão de serviço -- */
/* Serviço é ação. Ícone de traço, verbo no rótulo, chão de água. Deixa de
   compartilhar o retângulo genérico com notícia e com documento. */
.servicos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.servico {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  padding: 1.125rem;
  background: var(--agua-media);
  border-radius: var(--raio);
  border-bottom: 3px solid transparent;
  text-decoration: none;
  color: var(--azul-escuro);
}
.servico:hover {
  background: var(--agua);
  border-bottom-color: var(--azul-escuro);
  color: var(--azul-escuro);
}
.servico__icone {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--azul);
}
.servico__icone svg { display: block; width: 100%; height: 100%; }
.servico__texto { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.servico strong {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
}
.servico span { font-size: var(--t-sm); color: var(--texto); line-height: 1.4; }
html[data-contraste="alto"] .servico {
  color: var(--amarelo);
  border: 1px solid var(--amarelo);
}
html[data-contraste="alto"] .servico span,
html[data-contraste="alto"] .servico__icone { color: var(--amarelo); }

/* ------------------------------------------------------- cartão de notícia -- */
/* Notícia é conteúdo datado: imagem, categoria e data fazem parte do objeto. */
.noticias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.75rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.noticia {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
}
.noticia__figura {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--agua-media);
}
.noticia__figura img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Notícia sem imagem recebe substituto desenhado, nunca um vazio que pareça
   erro: bloco de água com a folha de aguapé e a categoria em corpo grande. */
.noticia__substituto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 0.875rem 1rem;
  background: var(--agua-media);
  overflow: hidden;
}
.noticia__substituto svg {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 62%;
  height: auto;
  color: var(--agua);
}
.noticia__substituto span {
  position: relative;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.15;
  color: var(--azul-escuro);
  letter-spacing: -0.01em;
}
.noticia__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--t-xs);
  color: var(--texto-suave);
}
.noticia__categoria {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--agua-media);
  color: var(--azul-escuro);
  font-family: var(--titulo);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.03em;
}
.noticia h3, .noticia h2 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}
.noticia h3 a, .noticia h2 a { text-decoration: none; color: var(--azul-escuro); }
.noticia h3 a:hover, .noticia h2 a:hover { text-decoration: underline; }
.noticia p { margin: 0; font-size: 0.9375rem; color: var(--texto-suave); }

/* A primeira notícia da home ocupa duas colunas e ganha corpo maior. Prioridade
   editorial precisa aparecer no desenho, não só na ordem da lista. */
.noticias--destaque > li:first-child { grid-column: span 2; }
.noticias--destaque > li:first-child h3 { font-size: var(--t-lg); }
.noticias--destaque > li:first-child p { font-size: 1rem; color: var(--texto); }
@media (max-width: 46rem) {
  .noticias--destaque > li:first-child { grid-column: auto; }
}

html[data-contraste="alto"] .noticia h2 a,
html[data-contraste="alto"] .noticia h3 a,
html[data-contraste="alto"] .noticia__categoria,
html[data-contraste="alto"] .noticia__substituto span { color: var(--amarelo); }
html[data-contraste="alto"] .noticia__categoria { border: 1px solid var(--amarelo); }
html[data-contraste="alto"] .noticia p { color: var(--amarelo); }
html[data-contraste="alto"] .noticia__figura { border: 1px solid var(--amarelo); }

/* ---------------------------------------------- grupo de transparência ----- */
/* Item de transparência é documento: ícone, agrupamento por seção e contagem.
   A página que o auditor abre precisa parecer organizada, não índice de PDF. */
.grupo-doc { margin-bottom: 2.5rem; }
.grupo-doc:last-child { margin-bottom: 0; }
.grupo-doc__topo {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  border-bottom: 2px solid var(--agua);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.grupo-doc__topo h2 { margin: 0; font-size: var(--t-md); }
.grupo-doc__conta {
  font-family: var(--titulo);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texto-suave);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.documentos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.documento {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  padding: 0.875rem 1rem;
  border-radius: var(--raio);
  text-decoration: none;
  color: var(--texto);
  background: var(--agua-rasa);
}
.documento:hover { background: var(--agua-media); color: var(--texto); }
/* Dentro da faixa clara o cartão precisa de superfície própria, senão o fundo
   é o mesmo da seção e o documento deixa de parecer um alvo clicável. */
.faixa .documento { background: var(--fundo); }
.faixa .documento:hover { background: var(--agua-media); }
html[data-contraste="alto"] .faixa .documento { background: #000; }
.documento__icone {
  flex: none;
  width: 1.25rem; height: 1.25rem;
  color: var(--azul);
  margin-top: 0.2rem;
}
.documento__icone svg { display: block; width: 100%; height: 100%; }
.documento strong {
  display: block;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 1rem;
  color: var(--azul-escuro);
  line-height: 1.3;
}
.documento span { display: block; font-size: var(--t-sm); color: var(--texto-suave); }
html[data-contraste="alto"] .documento {
  border: 1px solid var(--amarelo);
  color: var(--amarelo);
}
html[data-contraste="alto"] .documento strong,
html[data-contraste="alto"] .documento span,
html[data-contraste="alto"] .documento__icone { color: var(--amarelo); }
html[data-contraste="alto"] .grupo-doc__topo { border-bottom-color: var(--amarelo); }

/* ------------------------------------------------------- cartão genérico --- */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cartao {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.125rem;
  background: var(--fundo);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.cartao h3 { margin: 0; font-size: 1.0625rem; }
.cartao p { margin: 0; color: var(--texto-suave); font-size: 0.9375rem; }
html[data-contraste="alto"] .cartao p { color: var(--amarelo); }
.cartao__meta { font-size: var(--t-xs); color: var(--texto-suave); }

/* --------------------------------------------------------------- tabelas --- */
.tabela-envolvente { overflow-x: auto; }
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
}
caption {
  text-align: left;
  font-family: var(--titulo);
  font-weight: 700;
  padding-bottom: 0.5rem;
  color: var(--azul-escuro);
}
html[data-contraste="alto"] caption { color: var(--amarelo); }
th, td {
  border: 1px solid var(--borda);
  padding: 0.625rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
thead th {
  background: var(--agua-media);
  color: var(--azul-escuro);
  font-family: var(--titulo);
  font-weight: 700;
}
html[data-contraste="alto"] thead th { background: #000; color: var(--amarelo); }
tbody tr:nth-child(even) { background: var(--agua-rasa); }
html[data-contraste="alto"] tbody tr:nth-child(even) { background: #000; }

/* --------------------------------------------------------------- avisos ---- */
.aviso {
  border-left: 4px solid var(--azul);
  background: var(--agua-rasa);
  padding: 1rem 1.25rem;
  border-radius: var(--raio);
  margin: 1.5rem 0;
}
.aviso--atencao { border-left-color: var(--laranja); background: #FDF0E3; }
.aviso--sucesso { border-left-color: var(--verde); background: #E3F5E1; }
.aviso h3 { margin-top: 0; }
html[data-contraste="alto"] .aviso,
html[data-contraste="alto"] .aviso--atencao,
html[data-contraste="alto"] .aviso--sucesso {
  background: #000; border-left-color: var(--amarelo);
}

/* ------------------------------------------------------------ formulários -- */
.formulario { max-width: 44rem; }
.campo { margin-bottom: 1.25rem; }
.campo label {
  display: block;
  font-family: var(--titulo);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.campo input, .campo textarea, .campo select {
  width: 100%;
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio);
  padding: 0.625rem 0.75rem;
  font-size: 1rem;
  font-family: var(--corpo);
  background: var(--fundo);
  color: var(--texto);
  min-height: 2.75rem;
}
.campo__ajuda { font-size: var(--t-sm); color: var(--texto-suave); margin: 0.25rem 0 0; }
.campo__erro { color: var(--vermelho); font-weight: 600; font-size: 0.9375rem; margin: 0.25rem 0 0; }
html[data-contraste="alto"] .campo__ajuda,
html[data-contraste="alto"] .campo__erro { color: var(--amarelo); }
.campo--obrigatorio label::after { content: " *"; color: var(--vermelho); }
html[data-contraste="alto"] .campo--obrigatorio label::after { color: var(--amarelo); }

.botao {
  display: inline-block;
  background: var(--azul);
  color: #fff;
  border: 1px solid var(--azul);
  border-radius: var(--raio);
  padding: 0.75rem 1.5rem;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  min-height: 2.75rem;
}
.botao:hover { background: var(--azul-escuro); color: #fff; }
.botao--vazado {
  background: transparent;
  color: var(--azul);
  border-color: var(--azul);
}
.botao--vazado:hover { background: var(--agua-media); color: var(--azul-escuro); }
html[data-contraste="alto"] .botao {
  background: var(--amarelo); color: #000; border-color: var(--amarelo);
}
html[data-contraste="alto"] .botao--vazado { background: #000; color: var(--amarelo); }

/* ---------------------------------------------------------------- filtros -- */
.filtros {
  background: var(--agua-rasa);
  border-radius: var(--raio);
  padding: 1rem 1.125rem;
  margin-bottom: 1.5rem;
}
.filtros__linha { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.filtros__campo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 12rem; }
.filtros__campo label {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: var(--t-sm);
}
.filtros select, .filtros input {
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio);
  padding: 0.5rem;
  font-family: var(--corpo);
  font-size: 0.9375rem;
  background: var(--fundo);
  color: var(--texto);
  min-height: 2.75rem;
}
html[data-contraste="alto"] .filtros { border: 1px solid var(--amarelo); }

/* --------------------------------------------------------- estado vazio ---- */
/* Estado vazio é convite, não desculpa. */
.vazio {
  background: var(--agua-rasa);
  border-radius: var(--raio);
  padding: 2rem 1.5rem;
  text-align: center;
}
.vazio p { margin: 0 0 1rem; font-size: var(--t-md); color: var(--azul-escuro); }
.vazio p:last-child { margin-bottom: 0; }
html[data-contraste="alto"] .vazio { border: 1px solid var(--amarelo); }
html[data-contraste="alto"] .vazio p { color: var(--amarelo); }

/* ---------------------------------------------------------------- rótulos -- */
.rotulo {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-family: var(--titulo);
  font-size: var(--t-xs);
  font-weight: 700;
  border: 1px solid;
}
.rotulo--aberta { color: #0A5C12; border-color: #0A5C12; background: #E3F5E1; }
.rotulo--em_andamento { color: #7A4100; border-color: #7A4100; background: #FDF0E3; }
.rotulo--homologada { color: #0B3B8C; border-color: #0B3B8C; background: #E8EEF7; }
.rotulo--deserta, .rotulo--fracassada,
.rotulo--revogada, .rotulo--anulada { color: #8C1200; border-color: #8C1200; background: #FBE3E0; }
html[data-contraste="alto"] .rotulo {
  color: var(--amarelo) !important;
  border-color: var(--amarelo) !important;
  background: #000 !important;
}

/* -------------------------------------------------------------- paginação -- */
.paginacao ol {
  display: flex; flex-wrap: wrap; gap: 0.375rem;
  list-style: none; padding: 0; margin: 2rem 0 0;
}
.paginacao a, .paginacao span {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  min-width: 2.75rem;
  min-height: 2.75rem;
  text-align: center;
}
.paginacao [aria-current="page"] {
  background: var(--azul); color: #fff; border-color: var(--azul); font-weight: 700;
}
html[data-contraste="alto"] .paginacao [aria-current="page"] {
  background: var(--amarelo); color: #000; border-color: var(--amarelo);
}

/* ----------------------------------------------------------------- rodapé -- */
/* Rodapé pobre denuncia portal improvisado: endereço, telefone, horário,
   atalhos, selos de conformidade e a marca. */
.rodape {
  background: var(--azul-escuro);
  color: #fff;
  padding: 3rem 0 1.5rem;
}
.rodape__interno {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem 2.5rem;
}
.rodape h2 {
  color: #fff;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 0.875rem;
}
.rodape a { color: #fff; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.rodape address { font-style: normal; line-height: 1.7; }
.rodape__marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.rodape__marca strong {
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.2;
}
.rodape__lema {
  font-family: var(--titulo);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--agua-tinta);
  margin: 0.25rem 0 0;
}
.rodape .rodape__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rodape .rodape__selos li {
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: var(--raio);
  padding: 0.25rem 0.625rem;
  font-family: var(--titulo);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.rodape__base {
  border-top: 1px solid rgba(255,255,255,0.25);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--t-sm);
}
.rodape__nota { color: var(--azul-claro); margin: 0; }
html[data-contraste="alto"] .rodape { border-top: 2px solid var(--amarelo); }
html[data-contraste="alto"] .rodape,
html[data-contraste="alto"] .rodape h2,
html[data-contraste="alto"] .rodape a,
html[data-contraste="alto"] .rodape strong,
html[data-contraste="alto"] .rodape__lema,
html[data-contraste="alto"] .rodape__nota { color: var(--amarelo); }
html[data-contraste="alto"] .rodape__selos li { border-color: var(--amarelo); }

/* ------------------------------------------------------------------ mídia -- */
img { max-width: 100%; height: auto; }
figure { margin: 1.5rem 0; }
figcaption { font-size: var(--t-sm); color: var(--texto-suave); padding-top: 0.375rem; }
html[data-contraste="alto"] figcaption { color: var(--amarelo); }

/* ------------------------------------------------------------------ mobile - */
@media (max-width: 48rem) {
  .menu__alternador { display: block; }
  .menu__lista { display: none; flex-direction: column; }
  .menu__lista--aberto { display: flex; }
  /* Filho de coluna flex herda min-width:auto e não encolhe abaixo do
     conteúdo mínimo. Sem soltar os três pontos abaixo, .busca trava em 352px
     dentro de uma caixa de 288px e o documento inteiro passa a exigir rolagem
     horizontal a 320px, reprovando o critério de refluxo. */
  .cabecalho__interno > * { min-width: 0; }
  .busca { min-width: 0; }
  .busca input { min-width: 0; width: 100%; flex: 1 1 0; }
  .cabecalho__interno { flex-direction: column; align-items: stretch; }
  .heroi { padding-top: 2.5rem; }
  .heroi__interno { grid-template-columns: 1fr; }
  .linha-dagua { height: 36px; }
  .heroi__busca { flex-wrap: wrap; }
  .heroi__busca input,
  .heroi__busca button { flex: 1 1 100%; }
  .faixa { padding: 2.5rem 0; }
  .rodape__base { flex-direction: column; }
}

@media (max-width: 62rem) {
  .heroi__interno { grid-template-columns: 1fr; }
  .heroi__ficha { max-width: 34rem; }
}

/* Respeita quem pediu menos movimento no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .barra-acessibilidade, .menu, .busca, .pular-para, .linha-dagua, [vw] { display: none !important; }
  body { color: #000; background: #fff; }
  .heroi { background: #fff; color: #000; }
  .heroi h1, .heroi__texto, .heroi__lema { color: #000; }
}