/* ===== Câmara Municipal de Iraí — design system =====
   Identidade derivada do brasão do município: água azul das termas
   (interação), ondas brancas (assinatura) e fio amarelo heráldico usado com
   parcimônia. Fontes auto-hospedadas (LGPD).
   Contrastes validados em tools/validate-contrast.php.

   O campo verde do brasão saiu das superfícies em 2026-08-14 a pedido do
   cliente ("tá muito forte, achei muito agressivo"). Em vez de um neutro,
   adotamos o azul-marinho do site antigo (irai.rs.leg.br, #071c33), que é a
   cor que a Câmara já reconhece como sua. O verde não sobrou em lugar nenhum
   da interface — só no brasão, que é imagem, e lá é heráldica, não tema. */

/* Corpo/UI: Inter (auto-hospedada) */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter/Inter-Bold.woff2') format('woff2');
}
/* Títulos-declaração: Fraunces (serifada, voz de documento público) — variável */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/fraunces/fraunces-variable.woff2') format('woff2');
}

:root {
  /* --- Superfícies institucionais (azul-marinho do site antigo) ---
     Fonte da verdade das superfícies escuras. Os nomes `--cm-green-*` logo
     abaixo continuam existindo como apelido porque ~200 usos pelo arquivo os
     citam; trocar o valor aqui repinta o site inteiro sem tocar em nenhum
     componente. */
  --cm-navy-deep:  #071c33;  /* marinho do irai.rs.leg.br: topo, rodapé, hero, títulos */
  --cm-navy-mid:   #24486e;  /* marinho médio: kicker, ícones de serviço */
  --cm-navy-glow:  rgba(41,129,224,.32);  /* azul claro do site antigo (#2981e0): brilho do hero */

  /* --- Paleta do brasão --- */
  --cm-green-deep: var(--cm-navy-deep);  /* apelido histórico (era o verde institucional) */
  --cm-green:      var(--cm-navy-mid);   /* apelido histórico */
  --cm-water:      #12658f;  /* azul-água (termas): interação, botões (texto branco AA) */
  --cm-water-text: #0f5f8c;  /* azul-água p/ texto de link sobre claro (AA) */
  --cm-water-soft: #8fd3ea;  /* água clara: acento sobre superfície escura */
  --cm-heraldic:   #f2c500;  /* amarelo do brasão: fio heráldico (decorativo/raro) */
  --cm-flag:       #d8322a;  /* vermelho da fita: só urgência/"ao vivo" */

  /* Aliases semânticos (mantêm o vocabulário usado pelos componentes) */
  --cm-navy:       var(--cm-navy-deep);  /* superfícies escuras + títulos (agora o nome bate) */
  --cm-blue:       var(--cm-water);      /* ação/interação */

  /* Preenchimento de botão primário. Separado de --cm-water de propósito: água
     continua sendo a cor de TEXTO de link e do filete de ondas, enquanto o
     botão sólido acompanha o marinho institucional. Um só par aqui mantém
     botão, baixar e paginação atual no mesmo azul. */
  --cm-primary:       var(--cm-navy-mid);
  --cm-primary-hover: var(--cm-navy-deep);
  --cm-blue-text:  var(--cm-water-text); /* texto de link */
  --cm-teal:       var(--cm-water-soft);
  --cm-gold:       var(--cm-heraldic);   /* fio heráldico */
  --cm-danger:     var(--cm-flag);

  /* Neutros. Antes tinham viés verde de propósito, para casar com o campo do
     brasão; agora o viés é frio, acompanhando o marinho. Metade do "mais
     clean" do pedido mora aqui, não só nas superfícies escuras. */
  --cm-text:       #16191d;
  --cm-muted:      #58606b;
  --cm-surface:    #eef1f5;  /* faixa alternada */
  --cm-paper:      #fbfcfd;  /* fundo da página */
  --cm-white:      #ffffff;
  --cm-border:     #dfe4ea;

  /* Texto sobre superfície escura (hero, topbar, rodapé). Vira token para que
     o tema de alto contraste alcance — antes eram rgba fixos, e por isso o
     botão de contraste não mexia em três de quatro pares medidos (spec §1.2).
     Nascem com o valor idêntico ao que substituem: o modo normal não muda um
     pixel, e isso é condição de aceite, não intenção (spec D4). As três
     opacidades diferem de propósito — .85, .86 e .8 são os valores que já
     estavam lá, e unificá-los mudaria o modo normal. */
  --cm-on-dark:      rgba(255,255,255,.85);
  --cm-on-dark-soft: rgba(255,255,255,.86);
  --cm-on-dark-dim:  rgba(255,255,255,.8);

  /* Bordas (raio sutil, institucional) */
  --cm-radius-sm: 4px;
  --cm-radius:    8px;
  --cm-radius-lg: 14px;

  /* Sombras (tom marinho, acompanhando as superfícies) */
  /* Véu sobre a foto de fundo do hero: mais fechado à esquerda, onde ficam o
     título e o subtítulo, e mais aberto à direita, deixando a foto aparecer. */
  --cm-hero-veil:   linear-gradient(100deg, rgba(7,28,51,.92) 0%, rgba(7,28,51,.82) 45%, rgba(7,28,51,.62) 100%);
  --cm-pulse-bg-foto:       rgba(7,28,51,.72);
  --cm-pulse-bg-foto-hover: rgba(7,28,51,.85);
  --cm-shadow:      0 1px 3px rgba(7,28,51,.08), 0 1px 2px rgba(7,28,51,.06);
  --cm-shadow-card: 0 4px 16px rgba(7,28,51,.11);
  --cm-shadow-pop:  0 12px 30px rgba(7,28,51,.20);

  /* Espaçamento (escala) */
  --cm-sp-1: 4px;  --cm-sp-2: 8px;  --cm-sp-3: 12px; --cm-sp-4: 16px;
  --cm-sp-5: 24px; --cm-sp-6: 32px; --cm-sp-7: 48px; --cm-sp-8: 72px;

  /* Tipografia */
  --cm-font:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cm-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --cm-fs-sm:   0.875rem;
  --cm-fs-base: 1rem;
  --cm-fs-lg:   1.25rem;
  --cm-fs-h3:   1.5rem;
  --cm-fs-h2:   2.15rem;
  --cm-fs-h1:   3.1rem;
  --cm-lh:      1.65;

  /* Assinatura: filete de ondas (águas termais do brasão) */
  --cm-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Crect width='120' height='14' fill='%2312658f'/%3E%3Cpath d='M0 5 Q15 1 30 5 T60 5 T90 5 T120 5' fill='none' stroke='%23ffffff' stroke-width='1.6' opacity='.92'/%3E%3Cpath d='M0 10 Q15 6 30 10 T60 10 T90 10 T120 10' fill='none' stroke='%23ffffff' stroke-width='1.6' opacity='.5'/%3E%3C/svg%3E");

  --cm-header-h:  76px;
  --cm-util-h:    40px;
  --cm-maxw:      1160px;
}

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

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

body {
  margin: 0;
  font-family: var(--cm-font);
  font-size: var(--cm-fs-base);
  line-height: var(--cm-lh);
  color: var(--cm-text);
  background: var(--cm-paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* Títulos-declaração em Fraunces */
.cm-hero-title, .cm-section-title, .cm-tab-title {
  font-family: var(--cm-display);
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
}

/* Escala de fonte do usuário (controle de acessibilidade).
   Ancora no `html` e não no `body`: todos os tokens de tamanho são `rem`, e
   `rem` resolve contra a raiz. Escrevendo no body, o body crescia sozinho e
   nada mais — seis dos oito elementos medidos ficavam idênticos entre o nível
   normal e o máximo (spec §1.1). Percentual e não px de propósito: quem já
   aumentou a fonte padrão do navegador tem esse ajuste multiplicado em vez de
   sobrescrito. */
html[data-cm-fs="lg"] { font-size: 112.5%; }  /* 18px sobre padrão de 16 */
html[data-cm-fs="xl"] { font-size: 125%; }    /* 20px sobre padrão de 16 */

/* O que NÃO vira rem, e por quê (spec D2):
   fios de 1–3px, ícones (13/20/21/42/44/64px), caixas de mídia (180–420px) e
   o glifo de 28px do botão do lightbox. Um ícone crescendo 25% não ajuda
   ninguém e desalinha o que está ao lado; o glifo do lightbox mora num botão
   circular de 44px fixo e sairia do círculo se crescesse sozinho. */

/* Modo alto contraste — tema escuro de verdade (spec D3).
   Antes isto redefinia seis tokens e três de quatro pares medidos ficavam
   idênticos: as superfícies escuras pintavam texto com rgba fixo, fora do
   alcance dos tokens. O usuário clicava e não via nada acontecer.
   Fundo preto, texto branco, link e foco em amarelo, borda sólida no lugar de
   sombra — é o padrão que quem usa o recurso reconhece dos sites do gov.br.
   A identidade do brasão permanece intacta no modo normal: isto é estado
   alternativo, não revisão de paleta. Tudo vive dentro do seletor, que é o que
   garante os 28 [IGUAL] do tools/compara-estilos.php (spec D4). */
html[data-cm-contrast="1"] {
  --cm-text:        #ffffff;
  --cm-muted:       #f0f0f0;
  --cm-border:      #ffffff;
  --cm-surface:     #000000;
  --cm-paper:       #000000;
  --cm-white:       #000000;
  --cm-navy-deep:   #000000;
  --cm-navy-mid:    #000000;
  --cm-navy-glow:   transparent;  /* sem brilho no hero: fundo preto chapado */
  --cm-hero-veil:   #000000;      /* idem para o véu: a foto some, sobra preto */
  --cm-pulse-bg-foto:       #000000;
  --cm-pulse-bg-foto-hover: #000000;
  --cm-green-deep:  #000000;   /* o apelido também, para quem cita o nome antigo */
  --cm-green:       #000000;
  --cm-water:       #ffff00;
  --cm-water-text:  #ffff00;
  --cm-water-soft:  #ffff00;
  --cm-heraldic:    #ffff00;
  --cm-on-dark:      #ffffff;
  --cm-on-dark-soft: #ffffff;
  --cm-on-dark-dim:  #ffffff;
  --cm-shadow:      none;
  --cm-shadow-card: none;
  --cm-shadow-pop:  0 0 0 2px #ffffff;
}
/* Remapear os tokens não basta, e isto foi MEDIDO: --cm-green-deep pinta fundo
   no topo/hero/rodapé e TEXTO no link do menu e no título de seção. Mandando o
   token para preto, o menu ficou preto sobre preto — razão 1,00 na primeira
   versão deste tema. Um tema de alto contraste precisa vencer a cascata
   inteira, e é por isso que aqui tem `!important`: ele está preso dentro do
   seletor de atributo e não tem como alcançar o modo normal. */
html[data-cm-contrast="1"] *,
html[data-cm-contrast="1"] *::before,
html[data-cm-contrast="1"] *::after { color: #ffffff !important; }
/* Links em amarelo E sublinhados: no tema de contraste a cor sozinha não basta. */
html[data-cm-contrast="1"] a { color: #ffff00 !important; text-decoration: underline; }
/* Campos de formulário: sem isto o input da busca fica branco sobre branco,
   porque só a cor do texto vinha do token e o fundo era o padrão do navegador. */
html[data-cm-contrast="1"] input,
html[data-cm-contrast="1"] textarea,
html[data-cm-contrast="1"] select { background: #000000 !important; border: 1px solid #ffffff !important; }
html[data-cm-contrast="1"] ::placeholder { color: #ffffff !important; opacity: 1; }
/* Bordas sólidas onde o tema normal usa sombra ou fundo de superfície. */
html[data-cm-contrast="1"] .cm-card,
html[data-cm-contrast="1"] .cm-quick-card,
html[data-cm-contrast="1"] .cm-pulse-card,
html[data-cm-contrast="1"] .cm-service-card,
html[data-cm-contrast="1"] .cm-submenu { border: 1px solid #ffffff; background: #000000; }
/* Foco em amarelo, destacado do fundo preto. */
html[data-cm-contrast="1"] :focus-visible { outline: 3px solid #ffff00; outline-offset: 2px; }
/* O botão ligado inverte, senão some no próprio tema. Especificidade maior que
   a do bloco `a` acima, e !important para competir com ele. */
html[data-cm-contrast="1"] .cm-a11y-btn[aria-pressed="true"] { background: #ffff00 !important; color: #000000 !important; }

/* Link de corpo. Até aqui o arquivo nunca teve uma regra `a`: todo link que
   escapava de um componente caía no #0000EE sublinhado do navegador — medidos
   12 dos 12 links da hospedagem e 11 dos 12 dos áudios. A afordância agora é
   o filete d'água, não a cor: o texto fica na cor do texto ao redor, então
   nada depende de enxergar cor (WCAG 1.4.1) e nada berra azul de navegador.

   O :where() zera a especificidade de propósito. Toda regra de componente já
   escrita — .cm-footer a, .cm-nav-item > a, .cm-btn, os cards — vence esta
   sem precisar de override, inclusive as que só declaram `color`. Pinta os
   links órfãos e não encosta em mais nada. */
:where(a) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--cm-water);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
:where(a:hover) {
  color: var(--cm-green-deep);
  text-decoration-color: var(--cm-green-deep);
  text-decoration-thickness: 2px;
}
/* Sem medida máxima: o texto ocupa a largura inteira do container. Houve aqui
   um `max-width: 70ch` centralizado — a medida de leitura confortável — mas a
   escolha do projeto é preencher a largura, e quem limita passa a ser só o
   .cm-container. */
.cm-prose h2, .cm-prose h3 { color: var(--cm-green-deep); font-family: var(--cm-display); }

/* Foco visível global (WCAG 2.4.11). */
:focus-visible { outline: 3px solid var(--cm-water); outline-offset: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Skip link */
.cm-skip {
  position: absolute; left: -999px; top: 0;
  background: var(--cm-green-deep); color: var(--cm-white);
  padding: var(--cm-sp-3) var(--cm-sp-4); z-index: 1000;
}
.cm-skip:focus { left: 0; }

/* ===== Faixa utilitária (topbar) ===== */
.cm-topbar { background: var(--cm-green-deep); color: var(--cm-white); }
.cm-topbar-inner { max-width: var(--cm-maxw); margin: 0 auto; min-height: var(--cm-util-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--cm-sp-4);
  padding: 0 var(--cm-sp-5); flex-wrap: wrap; }
.cm-a11y { display: flex; align-items: center; gap: var(--cm-sp-1); flex-wrap: wrap; }
.cm-a11y-btn { appearance: none; border: 0; background: transparent; color: var(--cm-white);
  font: inherit; font-size: var(--cm-fs-sm); padding: var(--cm-sp-1) var(--cm-sp-2);
  border-radius: var(--cm-radius-sm); cursor: pointer; text-decoration: none; }
.cm-a11y-btn:hover { background: rgba(255,255,255,.14); }
.cm-a11y-btn[aria-pressed="true"] { background: var(--cm-heraldic); color: var(--cm-green-deep); font-weight: 700; }
.cm-search { display: flex; gap: var(--cm-sp-1); }
.cm-search-input { border: 0; border-radius: var(--cm-radius-sm); padding: var(--cm-sp-1) var(--cm-sp-3);
  font: inherit; font-size: var(--cm-fs-sm); min-width: 10.625rem; color: var(--cm-text); }
.cm-search-btn { appearance: none; border: 1px solid rgba(255,255,255,.45); background: transparent;
  color: var(--cm-white); font: inherit; font-size: var(--cm-fs-sm); padding: var(--cm-sp-1) var(--cm-sp-3);
  border-radius: var(--cm-radius-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; }
.cm-search-btn:hover { background: rgba(255,255,255,.14); }

/* ===== Header principal (faixa 2) ===== */
.cm-header { background: var(--cm-white); position: sticky; top: 0; z-index: 200; }
.cm-header::after { /* assinatura: linha d'água sob o cabeçalho */
  content: ""; display: block; height: 8px; background-image: var(--cm-wave);
  background-repeat: repeat-x; background-size: 120px 8px; }
.cm-header-inner { max-width: var(--cm-maxw); margin: 0 auto; min-height: var(--cm-header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--cm-sp-4);
  padding: 0 var(--cm-sp-5); }
.cm-brand { display: flex; align-items: center; gap: var(--cm-sp-3); text-decoration: none; flex-shrink: 0; }
.cm-brand img { display: block; }
.cm-brand-text { max-width: 13.125rem; }
.cm-brand-text strong { display: block; color: var(--cm-green-deep); font-family: var(--cm-display);
  font-weight: 600; font-size: 1.1rem; line-height: 1.12; letter-spacing: -0.01em; }
.cm-brand-text span { display: block; color: var(--cm-muted); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }

.cm-nav-list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.cm-nav-item { position: relative; }
.cm-nav-item > a { color: var(--cm-green-deep); text-decoration: none; font-weight: 600;
  padding: var(--cm-sp-3) 10px; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; border-bottom: 3px solid transparent; }
.cm-nav-item > a[aria-haspopup="true"]::after { content: "\25BE"; font-size: .7em; color: var(--cm-water); }
.cm-nav-item > a:hover, .cm-nav-item:focus-within > a { color: var(--cm-water-text); border-bottom-color: var(--cm-heraldic); }

/* Painel de submenu em colunas (máx. 6 itens por coluna → listas longas ficam curtas e largas) */
.cm-submenu { position: absolute; top: 100%; left: 0; background: var(--cm-white);
  border: 1px solid var(--cm-border); border-top: 3px solid var(--cm-water);
  border-radius: 0 0 var(--cm-radius-lg) var(--cm-radius-lg); box-shadow: var(--cm-shadow-pop);
  list-style: none; margin: 0; padding: var(--cm-sp-3); z-index: 100;
  display: none; grid-auto-flow: column; grid-template-rows: repeat(6, auto);
  gap: 2px var(--cm-sp-2); max-width: min(94vw, 43.75rem); }
.cm-nav-item:nth-last-child(-n+3) .cm-submenu { left: auto; right: 0; } /* itens da direita abrem p/ dentro */
.cm-nav-item:hover .cm-submenu, .cm-nav-item:focus-within .cm-submenu, .cm-nav-item.is-open .cm-submenu { display: grid; }
/* Escape fecha o submenu mas devolve o foco ao item pai, que é o comportamento
   esperado — e isso mantém o foco DENTRO do <li>, com o :focus-within acima
   ainda casando. Sem esta regra o submenu seguia aberto na tela anunciando
   aria-expanded="false" (medido). Especificidade acima da regra anterior, e o
   JS tira a classe no próximo foco ou hover. */
.cm-nav-item.is-esc:focus-within .cm-submenu, .cm-nav-item.is-esc .cm-submenu { display: none; }
.cm-submenu a { display: block; width: 13.625rem; padding: var(--cm-sp-2) var(--cm-sp-3); color: var(--cm-text);
  text-decoration: none; border-radius: var(--cm-radius-sm); border-left: 2px solid transparent;
  line-height: 1.3; font-size: var(--cm-fs-sm); }
.cm-submenu a:hover { background: var(--cm-surface); color: var(--cm-water-text); border-left-color: var(--cm-water); }

/* Comissões penduradas no item "Comissões", geradas da tabela `comissoes` e não
   de `telamenusite` — a Câmara cadastra a comissão e ela aparece aqui sozinha.
   O <ul> mora DENTRO do <li> da mãe: como o painel acima é `grid-auto-flow:
   column`, isso faz do grupo inteiro uma célula só, e ele não se parte entre
   colunas por mais comissões que entrem. `width: auto` é obrigatório: o
   `.cm-submenu a` acima fixa 13.625rem e, com o recuo, estouraria a coluna. */
.cm-submenu-filhos { list-style: none; margin: 2px 0 var(--cm-sp-1) var(--cm-sp-4);
  padding: 0 0 0 var(--cm-sp-2); border-left: 1px solid var(--cm-border); }
.cm-submenu-filhos a { width: auto; padding-top: 5px; padding-bottom: 5px;
  color: var(--cm-muted); font-size: 0.8rem; }

/* O menu não cabe ao lado da marca em NENHUMA largura de desktop: a lista das
   7 seções mede 938px e sobram 822px no container de 1160px. Acima de ~1300px
   o excesso escorria para as margens laterais e não se via; abaixo disso virava
   barra de rolagem horizontal na página inteira (24px em 1280).

   A saída é o menu em linha própria, e não fonte menor: encolher tipografia
   brigaria com o A+ da barra de acessibilidade, que aumenta o rem do site
   inteiro e devolveria o estouro na primeira ampliação. O flex-wrap também
   deixa a lista quebrar em duas linhas sozinha se a Câmara cadastrar uma
   seção nova no menu. */
@media (min-width: 1081px) {
  .cm-header-inner { flex-wrap: wrap; row-gap: 0; }
  .cm-brand { min-height: var(--cm-header-h); }
  .cm-nav { flex: 1 0 100%; border-top: 1px solid var(--cm-border); }
  .cm-nav-list { flex-wrap: wrap; }
}

/* Botão hambúrguer (escondido no desktop) */
.cm-menu-toggle { display: none; appearance: none; border: 1px solid var(--cm-border);
  background: var(--cm-white); border-radius: var(--cm-radius); width: 44px; height: 44px; cursor: pointer; }
.cm-menu-bars, .cm-menu-bars::before, .cm-menu-bars::after {
  display: block; width: 20px; height: 2px; background: var(--cm-green-deep); margin: 0 auto; position: relative; }
.cm-menu-bars::before, .cm-menu-bars::after { content: ""; position: absolute; left: 0; }
.cm-menu-bars::before { top: -6px; } .cm-menu-bars::after { top: 6px; }

@media (max-width: 1080px) {
  .cm-menu-toggle { display: block; }
  .cm-nav { position: fixed; inset: 0 0 0 auto; width: min(20rem, 85vw); background: var(--cm-white);
    box-shadow: var(--cm-shadow-pop); transform: translateX(100%); transition: transform .2s ease;
    padding: var(--cm-sp-6) var(--cm-sp-4); overflow-y: auto; z-index: 300; }
  .cm-nav.is-open { transform: translateX(0); }
  .cm-nav-list { flex-direction: column; gap: 0; }
  .cm-nav-item > a { display: block; border-bottom: 1px solid var(--cm-border); }
  .cm-submenu { position: static; box-shadow: none; border: 0; border-radius: 0; padding-left: var(--cm-sp-4);
    display: none; grid-auto-flow: row; grid-template-rows: none; }
  .cm-nav-item:nth-last-child(-n+3) .cm-submenu { left: auto; right: auto; }
  .cm-nav-item.is-open .cm-submenu { display: block; }
  .cm-submenu a { width: auto; }
}

/* ===== Rodapé ===== */
.cm-footer { background: var(--cm-green-deep); color: var(--cm-white); margin-top: var(--cm-sp-8);
  padding: var(--cm-sp-7) var(--cm-sp-5) var(--cm-sp-6); position: relative; }
.cm-footer::before { /* linha d'água no topo do rodapé (bookend da assinatura) */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background-image: var(--cm-wave); background-repeat: repeat-x; background-size: 120px 8px; }
.cm-footer-inner { display: flex; gap: var(--cm-sp-7); flex-wrap: wrap; max-width: var(--cm-maxw); margin: 0 auto; }

/* Faixa "Desenvolvido por", trazida do site da Galeria Capra com as medidas
   dela intactas: 18px/24px de respiro, 12px de gap, rótulo em 12px com 0.08em
   de entreletra, logo de 30px de altura, opacidade .85 que fecha em 1 no hover.
   O que mudou foi só o fundo. A faixa usa o MESMO marinho do rodapé, sem fio
   de separação, para os dois lerem como uma superfície só.

   E é fundo pintado, não `transparent`: no HTML a faixa é irmã do rodapé e
   filha direta do <body>, então transparente mostraria o --cm-paper claro e
   devolveria uma tarja branca embaixo do rodapé marinho — o contrário do que
   se quer. Enquanto o elemento morar fora do .cm-footer, esta cor tem de
   acompanhar --cm-navy-deep à mão.

   Sem variante de alto contraste de propósito: naquele tema o token já vira
   preto, e a faixa acompanha junto com o rodapé. */
.cm-credito { background: var(--cm-navy-deep);
  padding: 18px 24px; display: flex; align-items: center; justify-content: center;
  gap: 12px; text-decoration: none; }
/* A opacidade fica no CONTEÚDO, não na faixa. No original ela está no elemento
   inteiro, e lá isso não aparece porque o body atrás já é quase preto; aqui o
   body é papel claro (--cm-paper), e um opacity:.85 na faixa compõe o preto
   contra o papel e devolve uma tarja cinza, não preta.
   O efeito pretendido — conteúdo discreto que acende no hover — é preservado. */
.cm-credito-rotulo { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.62); transition: color .2s ease; }
.cm-credito:hover .cm-credito-rotulo { color: rgba(255,255,255,.88); }
.cm-credito-logo { display: inline-flex; align-items: center;
  opacity: .85; transition: opacity .2s ease; }
.cm-credito:hover .cm-credito-logo { opacity: 1; }
.cm-credito-logo img { height: 30px; width: auto; }
.cm-footer-col { min-width: 12.5rem; }
.cm-footer-col > strong { display: block; margin-bottom: var(--cm-sp-3); color: var(--cm-white);
  font-size: var(--cm-fs-sm); text-transform: uppercase; letter-spacing: .08em; }
.cm-footer a { color: var(--cm-on-dark); display: block; margin-bottom: var(--cm-sp-2); text-decoration: none; }
.cm-footer a:hover { color: var(--cm-white); text-decoration: underline; }
.cm-footer-brand { display: flex; gap: var(--cm-sp-4); align-items: flex-start; }
.cm-footer-brand strong { font-family: var(--cm-display); font-weight: 600; }
.cm-footer-brand p { margin: var(--cm-sp-1) 0 0; color: var(--cm-on-dark); font-size: var(--cm-fs-sm); }

/* ===== Blocos de conteúdo ===== */
.cm-container { max-width: var(--cm-maxw); margin: 0 auto; padding: var(--cm-sp-7) var(--cm-sp-5); }
/* O bloco em superfície sangra até a borda da tela, mas o conteúdo dentro dele
   precisa alinhar com o das seções normais. Isso era tentado com margin:auto
   nos filhos e não funcionava: .cm-section-title declara `margin: 0 0 X`, que
   zera as laterais e vence por vir depois na folha com a mesma
   especificidade — o título saía 53px à esquerda dos demais.
   Alinhar pelo padding do próprio bloco não depende do que o filho declara. */
.cm-surface-block { background: var(--cm-surface); max-width: none;
  padding-left:  max(var(--cm-sp-5), calc((100% - var(--cm-maxw)) / 2 + var(--cm-sp-5)));
  padding-right: max(var(--cm-sp-5), calc((100% - var(--cm-maxw)) / 2 + var(--cm-sp-5))); }

.cm-section-title {
  color: var(--cm-green-deep); font-size: var(--cm-fs-h2); font-weight: 600; margin: 0 0 var(--cm-sp-6);
  padding-bottom: var(--cm-sp-3); position: relative; line-height: 1.15;
}
.cm-section-title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 44px; height: 3px; background: var(--cm-heraldic); border-radius: 2px;
}

/* ===== Faixa de seção (topo das telas internas) ===== */
.cm-pagehead { background: var(--cm-surface); border-bottom: 1px solid var(--cm-border); }
.cm-pagehead-inner { max-width: var(--cm-maxw); margin: 0 auto; padding: var(--cm-sp-6) var(--cm-sp-5); }
.cm-pagehead-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: var(--cm-fs-sm);
  font-weight: 700; color: var(--cm-green); margin: 0; }
.cm-pagehead-title { font-family: var(--cm-display); font-optical-sizing: auto; font-weight: 600;
  color: var(--cm-green-deep); font-size: var(--cm-fs-h2); line-height: 1.12; letter-spacing: -0.01em;
  margin: var(--cm-sp-1) 0 0; }
.cm-pagehead-sub { margin: var(--cm-sp-2) 0 0; color: var(--cm-muted); max-width: 70ch; }

/* ===== Hero (pulso legislativo) ===== */
.cm-hero { background: var(--cm-green-deep); color: var(--cm-white);
  background-image: radial-gradient(120% 140% at 85% -20%, var(--cm-navy-glow), transparent 60%); }
.cm-hero-inner { max-width: var(--cm-maxw); margin: 0 auto; padding: var(--cm-sp-8) var(--cm-sp-5);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--cm-sp-7); align-items: center;
  position: relative; z-index: 1; }

/* Hero com foto de fundo (Configurações do Site). Sem foto cadastrada a classe
   não é emitida e tudo abaixo fica inerte — o fundo chapado segue o padrão. */
.cm-hero--foto { position: relative; isolation: isolate; }
.cm-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; }
/* Véu: a foto é escolhida pela Câmara e pode ser clara, então o texto branco
   precisa de um piso de contraste que não dependa da imagem. Vem de token para
   acompanhar a paleta — gradiente escrito na mão aqui escaparia da troca de cor. */
.cm-hero--foto::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--cm-hero-veil); }
/* Alto contraste exige fundo preto chapado: a foto sai de cena inteira. */
html[data-cm-contrast="1"] .cm-hero-bg { display: none; }
.cm-hero-title { color: var(--cm-white); font-size: var(--cm-fs-h1); font-weight: 500;
  line-height: 1.04; margin: var(--cm-sp-3) 0 0; }
.cm-hero-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: var(--cm-fs-sm);
  font-weight: 700; color: var(--cm-heraldic); margin: 0; }
.cm-hero-sub { color: var(--cm-on-dark-soft); font-size: var(--cm-fs-lg); margin: var(--cm-sp-4) 0 0; max-width: 46ch; }

/* Cartões de pulso (próxima sessão, transparência) sobre o hero */
.cm-pulse { display: grid; gap: var(--cm-sp-4); }
.cm-pulse-card { display: block; text-decoration: none; color: var(--cm-white);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-left: 3px solid var(--cm-water-soft); border-radius: var(--cm-radius);
  padding: var(--cm-sp-4) var(--cm-sp-5); transition: background .15s ease, transform .15s ease; }
.cm-pulse-card:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
/* Sobre foto, o branco translúcido dos cartões some no claro da imagem: aqui o
   fundo passa a ser escuro, para o contraste não depender do que a Câmara subiu. */
.cm-hero--foto .cm-pulse-card { background: var(--cm-pulse-bg-foto);
  border-color: rgba(255,255,255,.28); }
.cm-hero--foto .cm-pulse-card:hover { background: var(--cm-pulse-bg-foto-hover); }
.cm-pulse-label { display: flex; align-items: center; gap: var(--cm-sp-2); text-transform: uppercase;
  letter-spacing: .1em; font-size: 0.75rem; font-weight: 700; color: var(--cm-water-soft); }
.cm-pulse-date { display: flex; align-items: baseline; gap: var(--cm-sp-2);
  margin: var(--cm-sp-2) 0 0; font-variant-numeric: tabular-nums; }
.cm-pulse-date strong { font-family: var(--cm-display); font-weight: 600; font-size: 2.6rem; line-height: 1; }
.cm-pulse-date span { text-transform: uppercase; letter-spacing: .06em; font-size: var(--cm-fs-sm); color: var(--cm-on-dark-dim); }
.cm-pulse-name { display: block; margin-top: var(--cm-sp-2); font-weight: 600; }
.cm-pulse-plain { display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--cm-sp-1); font-weight: 600; font-size: var(--cm-fs-lg); }

/* ===== Ícones (Lucide inline; herdam a cor do texto) ===== */
.cm-ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

/* ===== Acesso rápido (cartões com legenda, não caixas ocas) ===== */
.cm-quick { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-sp-4); }
@media (max-width: 820px) { .cm-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cm-quick { grid-template-columns: 1fr; } }
.cm-quick-card { display: grid; grid-template-columns: auto 1fr; column-gap: var(--cm-sp-4);
  text-decoration: none; background: var(--cm-white);
  border: 1px solid var(--cm-border); border-left: 3px solid var(--cm-water);
  border-radius: var(--cm-radius); padding: var(--cm-sp-4) var(--cm-sp-5);
  box-shadow: var(--cm-shadow); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.cm-quick-card:hover { box-shadow: var(--cm-shadow-card); transform: translateY(-2px); border-left-color: var(--cm-heraldic); }
.cm-quick-ico { grid-row: 1 / span 2; align-self: start; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 11px; background: rgba(18,101,143,.09);
  color: var(--cm-water); transition: background .15s ease, color .15s ease; }
.cm-quick-ico .cm-ico { width: 21px; height: 21px; vertical-align: 0; }
.cm-quick-card:hover .cm-quick-ico { background: var(--cm-water); color: var(--cm-white); }
.cm-quick-label { display: flex; align-items: center; justify-content: space-between; gap: var(--cm-sp-2);
  color: var(--cm-green-deep); font-weight: 700; font-size: var(--cm-fs-lg); }
.cm-quick-label::after { content: "\2192"; color: var(--cm-water); font-weight: 400; }
.cm-quick-desc { margin: var(--cm-sp-1) 0 0; color: var(--cm-muted); font-size: var(--cm-fs-sm); line-height: 1.4; }

/* ===== Cartões (notícias) ===== */
.cm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--cm-sp-5); }
.cm-card { background: var(--cm-white); border: 1px solid var(--cm-border); border-radius: var(--cm-radius);
  overflow: hidden; box-shadow: var(--cm-shadow); transition: box-shadow .15s ease, transform .15s ease; }
.cm-card:hover { box-shadow: var(--cm-shadow-card); transform: translateY(-2px); }
.cm-card-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--cm-surface); }
.cm-card-body { padding: var(--cm-sp-4); }
.cm-card-date { color: var(--cm-muted); font-size: var(--cm-fs-sm); font-variant-numeric: tabular-nums; }
.cm-card-title { font-size: var(--cm-fs-lg); margin: var(--cm-sp-2) 0 0; line-height: 1.25; }
.cm-card-title a { color: var(--cm-green-deep); text-decoration: none; }
.cm-card-title a:hover { color: var(--cm-water-text); }

/* ===== Agenda (prévia na home) ===== */
.cm-agenda { list-style: none; margin: 0; padding: 0; }
.cm-agenda-item { display: flex; gap: var(--cm-sp-4); padding: var(--cm-sp-3) 0; border-bottom: 1px solid var(--cm-border); }
.cm-agenda-data { color: var(--cm-water-text); font-weight: 700; min-width: 7.5rem; font-variant-numeric: tabular-nums; }
.cm-chip { align-self: center; flex: none; font-size: .75rem; font-weight: 600; padding: .1em .5em;
  border-radius: var(--cm-radius); background: var(--cm-surface); color: var(--cm-navy); }
.cm-muted { color: var(--cm-muted); }

/* ===== Serviços e transparência ===== */
.cm-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--cm-sp-4); }
.cm-service-card { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--cm-sp-2); text-align: center; min-height: 6rem; color: var(--cm-navy); text-decoration: none;
  padding: var(--cm-sp-4); background: var(--cm-white); border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); transition: box-shadow .15s ease; }
.cm-service-card:hover { box-shadow: var(--cm-shadow-card); }
/* Ícone no verde institucional; o modo alto contraste o força a branco pela
   regra global `* { color:#fff !important }`, então nada de override aqui. */
.cm-service-ico { width: 32px; height: 32px; color: var(--cm-green); }
.cm-service-label { font-weight: 600; line-height: 1.2; }

/* Botão */
.cm-btn {
  display: inline-flex; align-items: center; gap: var(--cm-sp-2);
  background: var(--cm-primary); color: var(--cm-white);
  padding: var(--cm-sp-3) var(--cm-sp-5); border-radius: var(--cm-radius);
  text-decoration: none; font-weight: 600; border: 0; cursor: pointer;
  font-family: var(--cm-font); font-size: var(--cm-fs-base); transition: background .15s ease;
}
.cm-btn:hover { background: var(--cm-primary-hover); }
.cm-btn-sm { padding: var(--cm-sp-1) var(--cm-sp-3); font-size: var(--cm-fs-sm); }

/* Formulário */
.cm-form { display: flex; gap: var(--cm-sp-3); flex-wrap: wrap; margin-bottom: var(--cm-sp-5); }
.cm-label { width: 100%; font-weight: 600; color: var(--cm-green-deep); }
.cm-input {
  flex: 1; min-width: 13.75rem; padding: var(--cm-sp-3) var(--cm-sp-4);
  border: 1px solid var(--cm-border); border-radius: var(--cm-radius);
  font-size: var(--cm-fs-base); font-family: var(--cm-font); color: var(--cm-text);
}
.cm-input:focus-visible { border-color: var(--cm-water); }

/* ===== Lista de documentos (Lei Orgânica, Regimento, Downloads, Pub. Legais) ===== */
.cm-doclist { list-style:none; margin:0; padding:0; }
.cm-doc { border-bottom:1px solid var(--cm-border); }
.cm-doc-link { display:flex; align-items:center; justify-content:space-between; gap:var(--cm-sp-4);
  padding:var(--cm-sp-4) 0; text-decoration:none; color:var(--cm-green-deep); }
.cm-doc-nome { font-weight:600; }
.cm-doc-baixar { flex:none; background:var(--cm-primary); color:var(--cm-white);
  padding:var(--cm-sp-2) var(--cm-sp-4); border-radius:var(--cm-radius); font-size:var(--cm-fs-sm); font-weight:600;
  display:inline-flex; align-items:center; gap:6px; }
.cm-doc-link:hover .cm-doc-baixar { background:var(--cm-primary-hover); }

/* ===== Tabela institucional base ===== */
.cm-tabela { width:100%; border-collapse:collapse; }
.cm-tabela th, .cm-tabela td { text-align:left; padding:var(--cm-sp-3) var(--cm-sp-4);
  border-bottom:1px solid var(--cm-border); }
.cm-tabela thead th { background:var(--cm-surface); color:var(--cm-green-deep); font-weight:600; }
.cm-tabela tbody tr:hover { background:var(--cm-surface); }

/* ===== Downloads: head + paginação ===== */
.cm-doc-head { display:flex; align-items:center; justify-content:flex-end; gap:var(--cm-sp-5); flex-wrap:wrap; margin-bottom:var(--cm-sp-5); }
.cm-doc-head .cm-form { margin-bottom:0; }
.cm-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.cm-paginacao { margin-top:var(--cm-sp-5); }
.cm-pages { display:flex; gap:var(--cm-sp-2); list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.cm-pages li a, .cm-pages li span { display:inline-block; padding:var(--cm-sp-2) var(--cm-sp-3);
  border:1px solid var(--cm-border); border-radius:var(--cm-radius-sm); text-decoration:none; color:var(--cm-water-text); }
.cm-pages li.is-current span { background:var(--cm-primary); color:var(--cm-white); border-color:var(--cm-primary); }

/* ===== Detalhe de registro ===== */
.cm-deflist { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--cm-sp-4); margin:0 0 var(--cm-sp-5); }
.cm-def dt { color:var(--cm-muted); font-size:var(--cm-fs-sm); }
.cm-def dd { margin:0; color:var(--cm-green-deep); font-weight:600; }

/* ===== cm-table (controles de ordenar/filtrar/paginar) ===== */
.cm-table-controls { margin-bottom:var(--cm-sp-4); }
.cm-table-filter { max-width:20rem; }
.cm-sortable { cursor:pointer; user-select:none; }
.cm-sortable:hover { color:var(--cm-water-text); }
.cm-table-pager { display:flex; gap:var(--cm-sp-2); flex-wrap:wrap; margin-top:var(--cm-sp-4); }
.cm-table-page { padding:var(--cm-sp-2) var(--cm-sp-3); border:1px solid var(--cm-border);
  border-radius:var(--cm-radius-sm); background:var(--cm-white); color:var(--cm-water-text); cursor:pointer; font:inherit; }
.cm-table-page.is-current { background:var(--cm-primary); color:var(--cm-white); border-color:var(--cm-primary); }
.cm-table-page[disabled] { opacity:.45; cursor:default; }
.cm-table-gap { padding:var(--cm-sp-2) 0; color:var(--cm-muted); align-self:center; }

/* ===== cm-cards: link e meta (listas em cartão: sessões etc.) ===== */
.cm-card-link { display:block; padding:var(--cm-sp-4); color:inherit; text-decoration:none; }
.cm-card-link:hover { background:var(--cm-surface); }
.cm-card-meta { margin:var(--cm-sp-2) 0 0; display:flex; gap:var(--cm-sp-4); flex-wrap:wrap; color:var(--cm-muted); font-size:var(--cm-fs-sm); }

/* ===== detalhe de sessão (painéis; abas) ===== */
.cm-tabpanel { padding-block:var(--cm-sp-4); border-top:1px solid var(--cm-border); }
.cm-tab-title { font-size:var(--cm-fs-h3); color:var(--cm-green-deep); margin:0 0 var(--cm-sp-3); }
.cm-grid-vereadores { list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:var(--cm-sp-4); }
.cm-vereador-card { text-align:center; }
.cm-vereador-foto { width:100%; height:auto; border-radius:var(--cm-radius-sm); background:var(--cm-surface); }
.cm-vereador-nome { font-size:var(--cm-fs-base); margin:var(--cm-sp-2) 0 0; }
.cm-vereador-partido { color:var(--cm-muted); font-weight:700; margin:0; }
.cm-audio { margin-bottom:var(--cm-sp-4); }
.cm-audio audio { width:100%; margin-top:var(--cm-sp-2); }
.cm-video { position:relative; padding-top:56.25%; }
.cm-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ===== cm-tabs (abas; progressive enhancement) ===== */
.cm-tablist { display:flex; flex-wrap:wrap; gap:var(--cm-sp-1); border-bottom:2px solid var(--cm-border); margin-bottom:var(--cm-sp-4); }
.cm-tab { appearance:none; border:0; background:transparent; font:inherit; cursor:pointer;
  padding:var(--cm-sp-2) var(--cm-sp-4); color:var(--cm-water-text); border-bottom:2px solid transparent; margin-bottom:-2px; }
.cm-tab:hover { color:var(--cm-water); }
.cm-tab[aria-selected="true"] { color:var(--cm-green-deep); border-bottom-color:var(--cm-heraldic); font-weight:700; }
.cm-tab:focus-visible { outline:2px solid var(--cm-water); outline-offset:2px; }
.cm-tabs.is-enhanced .cm-tabpanel { border-top:0; }
.cm-tabs.is-enhanced .cm-tab-title { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ===== detalhe de matéria ===== */
.cm-materia-meta { display:flex; gap:var(--cm-sp-4); flex-wrap:wrap; color:var(--cm-muted); margin:0 0 var(--cm-sp-4); }
.cm-lista { margin:0 0 var(--cm-sp-4); padding-left:var(--cm-sp-5); }
.cm-lista li { margin-bottom:var(--cm-sp-1); }

/* ===== agenda (página dedicada): dia/mês em caixa; reusa .cm-agenda ===== */
.cm-agenda-page .cm-agenda-item { align-items:center; }
.cm-agenda-page .cm-agenda-data { text-align:center; }
.cm-agenda-data strong { display:block; font-family:var(--cm-display); font-size:var(--cm-fs-h2); line-height:1; }
.cm-agenda-data span { text-transform:uppercase; font-size:var(--cm-fs-sm); }
.cm-agenda-corpo { flex:1; }
.cm-agenda-titulo { margin:0; font-size:var(--cm-fs-lg); }
.cm-agenda-hora { margin:var(--cm-sp-1) 0 0; color:var(--cm-muted); }
/* O ano só aparece na página da agenda, onde convivem eventos de anos
   diferentes. No card do hero da home ele é redundante: ali só entra evento
   de hoje em diante. */
.cm-agenda-ano { display:block; color:var(--cm-muted); font-weight:600; }
.cm-agenda-passada .cm-agenda-data { color:var(--cm-muted); }

/* ===== responsivo ===== */
@media (max-width: 820px) {
  :root { --cm-fs-h1: 2.35rem; --cm-fs-h2: 1.8rem; }
  .cm-hero-inner { grid-template-columns: 1fr; gap: var(--cm-sp-6); }
}

/* ---------- Notícias ---------- */

.cm-noticias-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--cm-sp-6);
  align-items: start;
}

.cm-noticia-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--cm-sp-4);
  padding: var(--cm-sp-4);
  background: var(--cm-white);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, border-color .15s;
}
.cm-noticia-card + .cm-noticia-card { margin-top: var(--cm-sp-4); }
.cm-noticia-card:hover,
.cm-noticia-card:focus-visible {
  border-color: var(--cm-water);
  box-shadow: var(--cm-shadow-pop);
}

.cm-noticia-capa {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--cm-radius);
  background: var(--cm-surface);
}

.cm-noticia-corpo { display: flex; flex-direction: column; gap: var(--cm-sp-2); }

.cm-noticia-titulo {
  font-family: var(--cm-display);
  font-weight: 600;
  font-size: var(--cm-fs-lg);
  line-height: 1.2;
  color: var(--cm-green-deep);
  margin: 0;
}
.cm-noticia-card:hover .cm-noticia-titulo { color: var(--cm-water-text); }

.cm-noticia-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cm-sp-1) var(--cm-sp-4);
  margin: 0;
  color: var(--cm-muted);
  font-size: var(--cm-fs-sm);
}
.cm-noticia-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* trilho de categorias */
.cm-categorias {
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-lg);
  padding: var(--cm-sp-4);
}
.cm-categorias h2 {
  font-size: var(--cm-fs-sm);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cm-green);
  margin: 0 0 var(--cm-sp-3);
}
.cm-categorias-lista { list-style: none; margin: 0; padding: 0; }
.cm-categorias-lista li + li { margin-top: 2px; }
.cm-categorias-lista a {
  display: block;
  padding: var(--cm-sp-2) var(--cm-sp-3);
  border-radius: var(--cm-radius);
  border-left: 2px solid transparent;
  text-decoration: none;
  color: var(--cm-text);
}
.cm-categorias-lista a:hover {
  background: var(--cm-white);
  color: var(--cm-water-text);
  border-left-color: var(--cm-water);
}
.cm-categorias-lista a[aria-current="true"] {
  background: var(--cm-white);
  color: var(--cm-water-text);
  border-left-color: var(--cm-water);
  font-weight: 600;
}

/* detalhe */
.cm-noticia-detalhe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--cm-sp-6);
  align-items: start;
}
.cm-noticia-figura { margin: 0 0 var(--cm-sp-5); }
.cm-noticia-figura img {
  width: 100%;
  border-radius: var(--cm-radius-lg);
  background: var(--cm-surface);
}
.cm-noticia-texto { line-height: 1.7; }
.cm-noticia-texto img { max-width: 100%; height: auto; }

.cm-noticia-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cm-sp-2) var(--cm-sp-5);
  margin-top: var(--cm-sp-5);
  padding-top: var(--cm-sp-4);
  border-top: 1px solid var(--cm-border);
  color: var(--cm-muted);
  font-size: var(--cm-fs-sm);
}
.cm-noticia-ficha span { display: inline-flex; align-items: center; gap: 6px; }
.cm-noticia-ficha strong { color: var(--cm-text); font-weight: 600; }

/* veja também */
.cm-veja-tambem {
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-lg);
  padding: var(--cm-sp-4);
}
.cm-veja-tambem h2 {
  font-size: var(--cm-fs-sm);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cm-green);
  margin: 0 0 var(--cm-sp-3);
}
.cm-veja-tambem ul { list-style: none; margin: 0; padding: 0; }
.cm-veja-tambem li + li {
  margin-top: var(--cm-sp-3);
  padding-top: var(--cm-sp-3);
  border-top: 1px solid var(--cm-border);
}
.cm-veja-tambem a { color: var(--cm-text); text-decoration: none; font-weight: 500; }
.cm-veja-tambem a:hover { color: var(--cm-water-text); text-decoration: underline; }
.cm-veja-tambem time { display: block; color: var(--cm-muted); font-size: var(--cm-fs-sm); margin-top: 2px; }

@media (max-width: 900px) {
  .cm-noticias-layout,
  .cm-noticia-detalhe { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cm-noticia-card { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Estrutura Administrativa ---------- */

.cm-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
              gap: var(--cm-sp-5); list-style: none; margin: 0; padding: 0; }
/* height:100% faz o cartão preencher a célula do grid: sem isso, um nome que
   quebra em duas linhas deixa o cartão vizinho mais baixo e o rodapé dos
   cartões da mesma fila desalinhado. */
.cm-pessoa { background: var(--cm-white); border: 1px solid var(--cm-border);
             border-radius: var(--cm-radius); overflow: hidden; display: block;
             height: 100%; color: inherit; text-decoration: none; }
a.cm-pessoa:hover { box-shadow: var(--cm-shadow-card); }
.cm-pessoa-foto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
                  background: var(--cm-surface); }
.cm-pessoa-corpo { padding: var(--cm-sp-3) var(--cm-sp-4) var(--cm-sp-4); }
.cm-pessoa-nome { font-weight: 600; color: var(--cm-green-deep); line-height: 1.3; margin: 0; }
.cm-pessoa-cargo { margin: var(--cm-sp-1) 0 0; color: var(--cm-muted);
                   font-size: var(--cm-fs-sm); }
/* Só os cartões com histórico viram link; a chamada avisa o visitante disso,
   já que a foto sozinha não parece clicável. */
.cm-pessoa-mais { margin: var(--cm-sp-2) 0 0; color: var(--cm-water);
                  font-size: var(--cm-fs-sm); font-weight: 600; }
a.cm-pessoa:hover .cm-pessoa-mais { text-decoration: underline; }

.cm-decada { font-family: var(--cm-display); font-optical-sizing: auto;
             color: var(--cm-green-deep); font-size: var(--cm-fs-h3);
             margin: var(--cm-sp-7) 0 var(--cm-sp-4); }
.cm-decada:first-of-type { margin-top: 0; }

.cm-ficha-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--cm-sp-6);
                   align-items: start; }
.cm-ficha { list-style: none; margin: 0; padding: 0; }
.cm-ficha-item { display: flex; gap: var(--cm-sp-3); align-items: baseline;
                 padding: var(--cm-sp-3) 0; border-bottom: 1px solid var(--cm-border); }
.cm-ficha-item:last-child { border-bottom: 0; }
.cm-ficha-rotulo { color: var(--cm-muted); min-width: 8.125rem; flex: none;
                   display: flex; align-items: center; gap: var(--cm-sp-2); }
.cm-ficha-valor { font-weight: 600; }
.cm-bio { margin-top: var(--cm-sp-6); }
.cm-bio h2 { font-family: var(--cm-display); color: var(--cm-green-deep);
             font-size: var(--cm-fs-h3); margin: 0 0 var(--cm-sp-3); }

/* scroll-margin-top porque o .cm-header é sticky: sem isso a âncora das
   comissões (menu → /comissao#slug) para o bloco ATRÁS do cabeçalho e o título
   fica escondido. --cm-ancora-topo é a altura medida pelo cm.js, porque o
   cabeçalho não escala junto com a fonte: no A+ duplo o menu quebra numa linha
   a mais e ele pula de 136px para 202px, enquanto um valor em rem subiria só
   25%. O 9.5rem de reserva cobre o caso comum quando o JS não roda.
   É variável distinta de --cm-header-h de propósito: aquela é entrada de
   layout (min-height do .cm-header-inner) e escrever nela realimenta. */
.cm-grupo { margin-bottom: var(--cm-sp-7);
            scroll-margin-top: calc(var(--cm-ancora-topo, 9.5rem) + 1rem); }
.cm-grupo-titulo { font-family: var(--cm-display); font-optical-sizing: auto;
                   color: var(--cm-green-deep); font-size: var(--cm-fs-h3);
                   margin: 0 0 var(--cm-sp-4); }

@media (max-width: 900px) {
  .cm-ficha-layout { grid-template-columns: 1fr; }
  .cm-pessoas { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--cm-sp-4); }
}
@media (max-width: 560px) {
  .cm-pessoas { grid-template-columns: repeat(2, 1fr); }
  .cm-ficha-item { flex-direction: column; gap: var(--cm-sp-1); }
  .cm-ficha-rotulo { min-width: 0; }
}

/* ---------- Documento ausente (spec D5) ---------- */
/* O item continua na lista, mas sem virar link: some o verde de "clique aqui"
   e o botão vira um rótulo neutro. Um link morto seria pior que a ausência. */
.cm-doc-link.is-indisponivel { color: var(--cm-muted); cursor: default; }
.cm-doc-ausente { flex: none; font-size: var(--cm-fs-sm); color: var(--cm-muted);
  border: 1px dashed var(--cm-border); border-radius: var(--cm-radius);
  padding: var(--cm-sp-2) var(--cm-sp-4); }

/* ---------- Fale Conosco (sub-projeto 5) ---------- */
.cm-contato { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cm-sp-6); align-items: start; }
@media (max-width: 860px) { .cm-contato { grid-template-columns: 1fr; } }

.cm-form-vertical { display: flex; flex-direction: column; gap: var(--cm-sp-4); }
.cm-campo { display: flex; flex-direction: column; gap: var(--cm-sp-1); }
.cm-campo label { font-weight: 600; font-size: var(--cm-fs-sm); }
.cm-campo .cm-input { width: 100%; }
.cm-campo textarea.cm-input { resize: vertical; min-height: 8rem; font: inherit; }
.cm-campo-erro { margin: 0; color: #a1231f; font-size: var(--cm-fs-sm); }
.cm-campo-acoes { display: flex; gap: var(--cm-sp-3); }

/* Honeypot: fora da tela, fora da ordem de tabulação e fora da árvore de
   acessibilidade. display:none seria mais simples e é justamente o que os bots
   testam primeiro. */
.cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cm-aviso { padding: var(--cm-sp-3) var(--cm-sp-4); border-radius: var(--cm-radius);
  border: 1px solid var(--cm-border); margin: 0 0 var(--cm-sp-4); }
.cm-aviso-ok   { border-color: var(--cm-water); background: var(--cm-surface); }
.cm-aviso-erro { border-color: #a1231f; color: #a1231f; }

/* O iframe do CONF_MAPA vem com width="600" fixo no HTML do banco. Sem esta
   regra ele estoura a coluna e empurra a largura da página inteira. */
.cm-contato-mapa iframe { width: 100%; max-width: 100%; height: 360px; border: 0; display: block; }

/* Localização, horários e telefone — os três blocos que o rodapé do site
   antigo carregava e que agora vivem no Fale Conosco. Grade que cede para uma
   coluna quando não cabem três de 260px, sem media query. */
.cm-info-lista { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--cm-sp-5); }
.cm-info { display: grid; grid-template-columns: auto 1fr; gap: var(--cm-sp-4);
  align-items: start; padding: var(--cm-sp-5); background: var(--cm-white);
  border: 1px solid var(--cm-border); border-left: 3px solid var(--cm-water);
  border-radius: var(--cm-radius); }
.cm-info-ico { display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 11px; background: rgba(18,101,143,.09); color: var(--cm-water); }
.cm-info-titulo { margin: 0 0 var(--cm-sp-2); font-size: var(--cm-fs-lg);
  color: var(--cm-green-deep); line-height: 1.2; }
.cm-info p { margin: 0; line-height: 1.6; }

/* ---------- Galeria de imagens (sub-projeto 6) ---------- */
/* align-items: start porque num álbum a legenda é opcional — no álbum 1, 48 de
   83 fotos têm legenda. Sem isto os itens de uma mesma linha esticam até a
   altura do maior, e a foto sem legenda ganha um vão embaixo. */
.cm-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--cm-sp-5); list-style: none; margin: var(--cm-sp-5) 0 0; padding: 0;
  align-items: start; }
.cm-galeria-item { margin: 0; }
/* O `none` é explícito de propósito: hoje o link só embrulha a <img> e o
   sublinhado do :where(a) não teria o que pintar, mas basta alguém pôr a
   legenda para dentro do <a> e ela nasce sublinhada. */
.cm-galeria-link { display: block; border-radius: var(--cm-radius); overflow: hidden;
  border: 1px solid var(--cm-border); background: var(--cm-surface);
  text-decoration: none; color: inherit; }
/* aspect-ratio + object-fit no lugar do height:280px do site antigo, que
   esticava a foto e distorcia rosto e paisagem. */
.cm-galeria-img { display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; }
.cm-galeria-legenda { margin: var(--cm-sp-2) 0 0; font-size: var(--cm-fs-sm);
  color: var(--cm-muted); }
@media (max-width: 560px) {
  .cm-galeria { grid-template-columns: repeat(2, 1fr); gap: var(--cm-sp-4); }
}

/* ---------- Lightbox (sub-projeto 6) ---------- */
.cm-lb { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center; gap: var(--cm-sp-3);
  padding: var(--cm-sp-5); }
.cm-lb[hidden] { display: none; }
body.cm-lb-aberto { overflow: hidden; }
.cm-lb-fig { margin: 0; max-width: 90vw; max-height: 85vh;
  display: flex; flex-direction: column; gap: var(--cm-sp-3); }
.cm-lb-img { max-width: 100%; max-height: 75vh; object-fit: contain;
  background: #000; border-radius: var(--cm-radius); }
.cm-lb-cap { color: var(--cm-white); font-size: var(--cm-fs-sm); text-align: center; }
.cm-lb-cap[hidden] { display: none; }
.cm-lb-fechar, .cm-lb-nav { background: rgba(255,255,255,.15); color: var(--cm-white);
  border: 0; border-radius: 50%; width: 44px; height: 44px; font-size: 28px;
  line-height: 1; cursor: pointer; flex: none; }
.cm-lb-fechar { position: absolute; top: var(--cm-sp-4); right: var(--cm-sp-4); }
.cm-lb-fechar:hover, .cm-lb-nav:hover { background: rgba(255,255,255,.3); }
.cm-lb-nav[hidden] { display: none; }
/* 44px é o alvo mínimo de toque recomendado — abaixo disso a seta vira
   armadilha no celular. */

/* ---------- Telas de turismo (sub-projeto 6) ---------- */
/* Altura pela proporção da foto, não recortada. O max-height:420px com
   object-fit:cover que estava aqui comia 321px de uma capa 1500x1000 — 43%
   da imagem, sempre pelas bordas de cima e de baixo. Capa é conteúdo
   editorial escolhido no admin: quem publica decide o enquadramento. */
.cm-turismo-capa { display: block; width: 100%; height: auto;
  border-radius: var(--cm-radius); margin-bottom: var(--cm-sp-5); }

/* ---------- Grade de pontos turísticos (sub-projeto 6) ---------- */
.cm-pontos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--cm-sp-5); list-style: none; margin: 0; padding: 0; }
.cm-ponto { display: block; position: relative; border-radius: var(--cm-radius);
  overflow: hidden; border: 1px solid var(--cm-border); text-decoration: none; height: 100%; }
.cm-ponto-foto { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* O nome vai sobre a foto, com faixa escura por trás: sem ela o texto branco
   some em foto clara, e o contraste depende da imagem que o admin subiu.
   O gradiente escurece já aos 30% porque há nomes de TRÊS linhas ("Centro de
   Informações Turísticas Tito Antonio Gimelli"): com a rampa começando só no
   fim, a primeira linha caía sobre céu claro quase sem faixa atrás. */
.cm-ponto-nome { position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6) 30%, rgba(0,0,0,.85));
  color: var(--cm-white); font-weight: 600; padding: var(--cm-sp-5) var(--cm-sp-4) var(--cm-sp-3); }
@media (max-width: 560px) { .cm-pontos { grid-template-columns: 1fr; } }

/* ---------- Hospedagem (sub-projeto 6) ----------
   Linha editorial, não cartão: a caixa branca com borda e sombra desenhava um
   retângulo cheio de vazio à direita, porque os dados de um hotel ocupavam
   ~40% da largura e a borda prometia o resto. Um filete entre as linhas separa
   com menos tinta e sem prometer largura nenhuma. */
.cm-hosp-lista { list-style: none; margin: 0; padding: 0; }
.cm-hosp { display: grid; grid-template-columns: 200px 1fr; gap: var(--cm-sp-5);
  align-items: start; padding: var(--cm-sp-6) 0;
  border-bottom: 1px solid var(--cm-border); }
.cm-hosp:first-child { padding-top: 0; }
/* O último filete encostaria no rodapé sem nada para separar. */
.cm-hosp:last-child { border-bottom: 0; }
.cm-hosp-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--cm-radius-sm); }
.cm-hosp-nome { font-family: var(--cm-display); font-size: var(--cm-fs-h3);
  color: var(--cm-green-deep); margin: 0 0 var(--cm-sp-2); line-height: 1.2; }
.cm-hosp-end { margin: 0 0 var(--cm-sp-3); color: var(--cm-muted); }
/* Telefone e e-mail dividem uma linha só: são o mesmo tipo de dado e antes
   ocupavam dois parágrafos, esticando o bloco à toa. */
.cm-hosp-contato { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--cm-sp-3); margin: 0 0 var(--cm-sp-3); }
.cm-hosp-item { display: inline-flex; align-items: center; gap: 6px; }
.cm-hosp-item + .cm-hosp-item::before { content: "\00B7"; color: var(--cm-muted);
  opacity: .55; margin-right: var(--cm-sp-3); }
/* Sem o "·" que separa os contatos: aqui o pseudo teria de morar dentro do
   <a>, onde herda o sublinhado do link e ainda entra na área de clique. Os
   dois links já se separam pelo filete de cada um; basta o espaço. */
.cm-hosp-links { display: flex; flex-wrap: wrap; gap: var(--cm-sp-5); margin: 0; }
@media (max-width: 700px) {
  .cm-hosp { grid-template-columns: 1fr; gap: var(--cm-sp-4); padding: var(--cm-sp-5) 0; }
  .cm-hosp-foto { aspect-ratio: 16 / 9; }
}

/* ===== Mídia: grade de álbuns (sub-projeto 7) ============================== */
.cm-midia-albuns { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--cm-sp-5); align-items: start; }
.cm-midia-album { display: block; color: inherit; text-decoration: none;
  border-radius: var(--cm-radius); overflow: hidden; background: var(--cm-white);
  border: 1px solid var(--cm-border); box-shadow: var(--cm-shadow);
  transition: transform .15s ease, box-shadow .15s ease; }
.cm-midia-album:hover, .cm-midia-album:focus-visible { transform: translateY(-2px);
  box-shadow: var(--cm-shadow-card); }
.cm-midia-album-capa { display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; background: var(--cm-surface); }
.cm-midia-album-info { display: block; padding: var(--cm-sp-3) var(--cm-sp-4) var(--cm-sp-4); }
.cm-midia-album-titulo { display: block; font-size: var(--cm-fs-base); line-height: 1.3; }
.cm-midia-album-meta { display: block; margin-top: var(--cm-sp-1);
  font-size: var(--cm-fs-sm); color: var(--cm-muted); }
.cm-voltar { margin: 0 0 var(--cm-sp-4); font-size: var(--cm-fs-sm); }
@media (max-width: 560px) {
  .cm-midia-albuns { grid-template-columns: repeat(2, 1fr); gap: var(--cm-sp-4); }
}

/* ===== Mídia: vídeos (sub-projeto 7) ====================================== */
.cm-midia-videos { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--cm-sp-5); align-items: start; }
/* Mesmo motivo do .cm-galeria-link: o card embrulha só a capa e o play. */
.cm-midia-video { position: relative; display: block; border-radius: var(--cm-radius);
  overflow: hidden; background: var(--cm-surface);
  text-decoration: none; color: inherit; }
.cm-midia-video-capa { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cm-midia-video-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px;
  border-radius: 50%; background: rgba(0,0,0,.6); }
.cm-midia-video-play::after { content: ''; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%); border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff; }
.cm-midia-video:hover .cm-midia-video-play { background: rgba(0,0,0,.8); }
.cm-midia-video.is-sem-player { cursor: default; }
.cm-midia-video-nome { margin: var(--cm-sp-3) 0 0; font-weight: 600; }
.cm-midia-video-data { margin: var(--cm-sp-1) 0 0; font-size: var(--cm-fs-sm); color: var(--cm-muted); }
.cm-lb-frame { width: min(90vw, 1100px); aspect-ratio: 16 / 9; max-height: 75vh; border: 0; }
.cm-lb-frame[hidden] { display: none; }

/* ===== Mídia: áudios (sub-projeto 7) ====================================== */
.cm-midia-audios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cm-sp-5); }
.cm-midia-audio { padding: var(--cm-sp-4); border-radius: var(--cm-radius);
  background: var(--cm-white); border: 1px solid var(--cm-border);
  box-shadow: var(--cm-shadow); }
.cm-midia-audio-nome { margin: 0 0 var(--cm-sp-3); font-size: var(--cm-fs-lg); }
.cm-midia-audio-player { width: 100%; }
.cm-midia-audio-sessao { margin: var(--cm-sp-3) 0 0; font-size: var(--cm-fs-sm); }

/* Par de logos (brasão do município + logo da Câmara) no cabeçalho e no rodapé.
   Encolhe no celular porque dois logos de 52px roubariam a linha inteira. */
.cm-brand-logos {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.cm-brand-logos img {
  display: block;
  height: auto;
  max-height: 52px;
  width: auto;
}
.cm-footer-brand .cm-brand-logos img { max-height: 56px; }
@media (max-width: 640px) {
  .cm-brand-logos img,
  .cm-footer-brand .cm-brand-logos img { max-height: 40px; }
}