/* ==========================================================================
   Teto Justo — estilos do site (dev). Parte 1: tokens do manual de marca v1.0
   (brand/tokens/tokens.css, só modo claro: o site não tem modo escuro).
   Parte 2: componentes do site, segundo brand/tokens/componentes.css e as
   pré-visualizações do manual. Todas as cores e tipos de letra vêm dos tokens.
   ========================================================================== */
/* ---------- Tipo de letra (SIL OFL 1.1). Um só ficheiro variável: peso 100–900, largura 62–125 % ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fontes/Archivo-Variable-latin.woff2") format("woff2-variations"),
       url("../fontes/Archivo-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
/* Fallback métrico: reduz o salto de layout (CLS) enquanto a Archivo carrega */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 98.5%;
  ascent-override: 89%;
  descent-override: 21.3%;
  line-gap-override: 0%;
}

:root {
  /* ---------- 1. Cores de marca ---------- */
  --tj-azul: #1E45D2;
  --tj-laranja: #FF6A2B;
  --tj-tinta: #0C1631;
  --tj-gelo: #EDF1F8;
  --tj-branco: #FFFFFF;

  /* Escala azul (50 = mais claro · 900 = mais escuro)  · 600 = Azul Cívico */
  --tj-azul-50: #F4F6FD;  /* 1.08:1 sobre branco */
  --tj-azul-100: #E6EBFA;  /* 1.19:1 sobre branco */
  --tj-azul-200: #CBD4F5;  /* 1.47:1 sobre branco */
  --tj-azul-300: #A0B1EC;  /* 2.10:1 sobre branco */
  --tj-azul-400: #6F88E2;  /* 3.34:1 sobre branco */
  --tj-azul-500: #4263D9;  /* 5.23:1 sobre branco */
  --tj-azul-600: #1E45D2;  /* 7.40:1 sobre branco */
  --tj-azul-700: #1536B5;  /* 9.43:1 sobre branco */
  --tj-azul-800: #0C2590;  /* 12.48:1 sobre branco */
  --tj-azul-900: #051669;  /* 15.85:1 sobre branco */

  /* Escala laranja (50 = mais claro · 900 = mais escuro)  · 500 = Laranja Sinal (só gráfico) · 700 = laranja para texto */
  --tj-laranja-50: #FFF1E9;  /* 1.10:1 sobre branco */
  --tj-laranja-100: #FFE4D6;  /* 1.21:1 sobre branco */
  --tj-laranja-200: #FFCBB2;  /* 1.45:1 sobre branco */
  --tj-laranja-300: #FFAB84;  /* 1.84:1 sobre branco */
  --tj-laranja-400: #FF8854;  /* 2.36:1 sobre branco */
  --tj-laranja-500: #FF6A2B;  /* 2.86:1 sobre branco */
  --tj-laranja-600: #E35409;  /* 3.79:1 sobre branco */
  --tj-laranja-700: #C44000;  /* 5.15:1 sobre branco */
  --tj-laranja-800: #9E2F00;  /* 7.34:1 sobre branco */
  --tj-laranja-900: #742300;  /* 10.59:1 sobre branco */

  /* Escala neutro (50 = mais claro · 900 = mais escuro)  · 100 = Gelo · 900 = Tinta */
  --tj-neutro-50: #F8FAFF;  /* 1.04:1 sobre branco */
  --tj-neutro-100: #EDF1F8;  /* 1.13:1 sobre branco */
  --tj-neutro-200: #E2E6EF;  /* 1.25:1 sobre branco */
  --tj-neutro-300: #CED3DC;  /* 1.50:1 sobre branco */
  --tj-neutro-400: #A0A5AF;  /* 2.47:1 sobre branco */
  --tj-neutro-500: #6F7480;  /* 4.68:1 sobre branco */
  --tj-neutro-600: #5B606D;  /* 6.29:1 sobre branco */
  --tj-neutro-700: #404859;  /* 9.17:1 sobre branco */
  --tj-neutro-800: #263047;  /* 13.16:1 sobre branco */
  --tj-neutro-900: #0C1631;  /* 17.88:1 sobre branco */

  /* ---------- 2. Tokens semânticos ---------- */
  --cor-primaria: #1E45D2;
  --cor-primaria-hover: #1536B5;
  --cor-primaria-ativa: #0C2590;
  --cor-primaria-suave: #F4F6FD;
  --cor-primaria-suave-2: #E6EBFA;
  --cor-acento: #FF6A2B;  /* NUNCA para texto sobre branco (2,86:1). Só formas, ícones grandes, sublinhados. */
  --cor-acento-hover: #E35409;
  --cor-acento-texto: #C44000;  /* Laranja para texto e ícones pequenos: 5,15:1 sobre branco. */
  --cor-acento-suave: #FFF1E9;
  --cor-texto: #0C1631;
  --cor-texto-2: #5B606D;
  --cor-texto-3: #6F7480;  /* Mínimo para texto (4,68:1). Placeholders e metadados. */
  --cor-texto-inverso: #FFFFFF;
  --cor-link: #1E45D2;
  --cor-link-hover: #0C2590;
  --cor-fundo: #FFFFFF;
  --cor-superficie: #FFFFFF;
  --cor-superficie-2: #EDF1F8;
  --cor-superficie-3: #E2E6EF;
  --cor-superficie-inversa: #0C1631;
  --cor-sobreposicao: rgba(12, 22, 49, 0.56);
  --cor-borda: #E2E6EF;  /* Divisórias decorativas (não usar como única pista de um controlo). */
  --cor-borda-2: #CED3DC;
  --cor-borda-campo: #8F939D;  /* Bordas de campos e controlos: 3.08:1 (WCAG 1.4.11). */
  --cor-borda-forte: #0C1631;
  --cor-sucesso: #13795B;
  --cor-sucesso-fundo: #E6F4EE;
  --cor-sucesso-borda: #9ED3BE;
  --cor-aviso: #8A5300;
  --cor-aviso-grafico: #F2B01E;
  --cor-aviso-fundo: #FFF6DD;
  --cor-aviso-borda: #F3D37A;
  --cor-erro: #C42B2B;
  --cor-erro-fundo: #FCEBEB;
  --cor-erro-borda: #F0A9A9;
  --cor-info: #1E45D2;
  --cor-info-fundo: #F4F6FD;
  --cor-info-borda: #CBD4F5;
  --cor-foco: #1E45D2;  /* Anel de foco: ver --anel-foco. */
  --cor-hover-fundo: #EDF1F8;
  --cor-ativo-fundo: #E2E6EF;
  --cor-desativado-fundo: #E2E6EF;
  --cor-desativado-texto: #6F7480;
  --cor-desativado-borda: #CED3DC;
  --anel-foco: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--cor-foco);  /* 2 px de branco + 2 px de azul: visível sobre qualquer superfície */

  /* ---------- 3. Dados: posição face à mediana (nunca usar só a cor: juntar ▼ ● ▲ e texto) ---------- */
  --dados-abaixo: #1F6FB2;
  --dados-abaixo-fundo: #E5F0FA;
  --dados-mediana: #6B7488;
  --dados-mediana-fundo: #EEF0F4;
  --dados-acima: #C2410C;
  --dados-acima-fundo: #FDEDE4;
  --dados-abaixo-simbolo: "▼";  --dados-mediana-simbolo: "●";  --dados-acima-simbolo: "▲";

  /* Paleta de gráficos: categórica (usar por esta ordem), sequencial (mapas) e divergente (mediana) */
  --graf-1: #1E45D2;  /* Azul */
  --graf-2: #FF6A2B;  /* Laranja */
  --graf-3: #12948F;  /* Turquesa */
  --graf-4: #E8A317;  /* Amarelo */
  --graf-5: #7B52D6;  /* Violeta */
  --graf-6: #5B6478;  /* Ardósia */
  --graf-seq-1: #E6EBFA;
  --graf-seq-2: #CBD4F5;
  --graf-seq-3: #A0B1EC;
  --graf-seq-4: #6F88E2;
  --graf-seq-5: #4263D9;
  --graf-seq-6: #1E45D2;
  --graf-seq-7: #0C2590;
  --graf-div-1: #1F6FB2;
  --graf-div-2: #6FA3D2;
  --graf-div-3: #C4D6EA;
  --graf-div-4: #EEF0F4;
  --graf-div-5: #F6C9B0;
  --graf-div-6: #E8834F;
  --graf-div-7: #C2410C;

  /* ---------- 4. Tipografia ---------- */
  --fonte-base: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulos: var(--fonte-base);
  --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* só para código; não usar na interface */
  --numeros: tabular-nums lining-nums;  /* font-variant-numeric para valores, tabelas e gráficos */
  --peso-normal: 400;  --peso-medio: 500;  --peso-semi: 600;  --peso-negrito: 700;  --peso-extra: 800;
  --largura-normal: 100%;  --largura-titulos: 108%;  /* font-stretch; o logótipo usa 108 % */
  --texto-display: 3.5rem;  --altura-display: 1.05;  --peso-display: 800;  --espaco-display: -0.025em;  --largura-display: 110%;  /* 56 px */
  --texto-h1: 2.75rem;  --altura-h1: 1.1;  --peso-h1: 800;  --espaco-h1: -0.02em;  --largura-h1: 108%;  /* 44 px */
  --texto-h2: 2.0rem;  --altura-h2: 1.15;  --peso-h2: 700;  --espaco-h2: -0.015em;  --largura-h2: 108%;  /* 32 px */
  --texto-h3: 1.5rem;  --altura-h3: 1.25;  --peso-h3: 700;  --espaco-h3: -0.01em;  --largura-h3: 104%;  /* 24 px */
  --texto-h4: 1.25rem;  --altura-h4: 1.3;  --peso-h4: 700;  --espaco-h4: -0.005em;  --largura-h4: 100%;  /* 20 px */
  --texto-corpo-g: 1.125rem;  --altura-corpo-g: 1.55;  --peso-corpo-g: 400;  --espaco-corpo-g: 0em;  --largura-corpo-g: 100%;  /* 18 px */
  --texto-corpo: 1.0rem;  --altura-corpo: 1.55;  --peso-corpo: 400;  --espaco-corpo: 0em;  --largura-corpo: 100%;  /* 16 px */
  --texto-pequeno: 0.875rem;  --altura-pequeno: 1.5;  --peso-pequeno: 400;  --espaco-pequeno: 0em;  --largura-pequeno: 100%;  /* 14 px */
  --texto-legenda: 0.75rem;  --altura-legenda: 1.4;  --peso-legenda: 600;  --espaco-legenda: 0.08em;  --largura-legenda: 100%;  /* 12 px */
  --texto-numero-xl: 3.0rem;  --altura-numero-xl: 1.0;  --peso-numero-xl: 800;  --espaco-numero-xl: -0.02em;  --largura-numero-xl: 104%;  /* 48 px */
  --texto-numero-l: 2.0rem;  --altura-numero-l: 1.1;  --peso-numero-l: 700;  --espaco-numero-l: -0.01em;  --largura-numero-l: 100%;  /* 32 px */
  /* Escala fluida para títulos: mínimo (mobile 360 px) → máximo (desktop 1280 px) */
  --texto-display-fluido: clamp(2.5rem, 2.1087rem + 1.7391vw, 3.5rem);
  --texto-h1-fluido: clamp(2.0rem, 1.7065rem + 1.3043vw, 2.75rem);
  --texto-h2-fluido: clamp(1.625rem, 1.4783rem + 0.6522vw, 2.0rem);
  --texto-h3-fluido: clamp(1.3125rem, 1.2391rem + 0.3261vw, 1.5rem);
  --texto-h4-fluido: clamp(1.125rem, 1.0761rem + 0.2174vw, 1.25rem);
  --texto-numero-xl-fluido: clamp(2.5rem, 2.3043rem + 0.8696vw, 3.0rem);

  /* ---------- 5. Espaçamento (base 4 px) ---------- */
  --esp-0: 0rem;  /* 0 px */
  --esp-1: 0.25rem;  /* 4 px */
  --esp-2: 0.5rem;  /* 8 px */
  --esp-3: 0.75rem;  /* 12 px */
  --esp-4: 1rem;  /* 16 px */
  --esp-5: 1.25rem;  /* 20 px */
  --esp-6: 1.5rem;  /* 24 px */
  --esp-8: 2rem;  /* 32 px */
  --esp-10: 2.5rem;  /* 40 px */
  --esp-12: 3rem;  /* 48 px */
  --esp-16: 4rem;  /* 64 px */
  --esp-20: 5rem;  /* 80 px */
  --esp-24: 6rem;  /* 96 px */
  --esp-32: 8rem;  /* 128 px */

  /* ---------- 6. Raios ---------- */
  --raio-0: 0px;
  --raio-xs: 4px;
  --raio-s: 6px;
  --raio-m: 10px;
  --raio-l: 16px;
  --raio-xl: 24px;
  --raio-pilula: 999px;
  /* botões e campos: --raio-s · cartões: --raio-m · painéis e modais: --raio-l · etiquetas: --raio-pilula */

  /* ---------- 7. Sombras / elevação (cor da sombra = Tinta) ---------- */
  --sombra-0: none;
  --sombra-1: 0 1px 2px rgba(12, 22, 49, 0.06), 0 1px 1px rgba(12, 22, 49, 0.04);
  --sombra-2: 0 2px 4px rgba(12, 22, 49, 0.05), 0 6px 16px -4px rgba(12, 22, 49, 0.10);
  --sombra-3: 0 4px 8px rgba(12, 22, 49, 0.06), 0 16px 32px -8px rgba(12, 22, 49, 0.16);
  --sombra-4: 0 8px 16px rgba(12, 22, 49, 0.08), 0 32px 64px -16px rgba(12, 22, 49, 0.24);
  /* 1: cartões em repouso · 2: hover, menus · 3: pop-overs, barra fixa · 4: modais */

  /* ---------- 8. Layout ---------- */
  --contentor-max: 1200px;  --contentor-texto: 68ch;
  /* bp-xs: ≥ 0 px · 4 colunas · medianiz 16 px · margem 20 px */
  /* bp-s: ≥ 600 px · 8 colunas · medianiz 20 px · margem 32 px */
  /* bp-m: ≥ 1024 px · 12 colunas · medianiz 24 px · margem 40 px */
  /* bp-l: ≥ 1280 px · 12 colunas · medianiz 32 px · margem 48 px */
  --colunas: 4;  --medianiz: 16px;  --margem: 20px;
  --altura-cabecalho: 64px;  --alvo-toque: 44px;  /* alvo mínimo para toque (WCAG 2.5.8 pede 24 px; usamos 44 px) */

  /* ---------- 9. Movimento ---------- */
  --dur-rapida: 120ms;  --dur-base: 200ms;  --dur-lenta: 320ms;
  --curva-base: cubic-bezier(0.2, 0, 0, 1);
  --z-cabecalho: 100;  --z-popover: 200;  --z-modal: 300;  --z-toast: 400;
}

/* Breakpoints (os media queries não aceitam variáveis):
   @media (min-width: 600px)  { ... }   → s: 8 colunas
   @media (min-width: 1024px) { ... }   → m: 12 colunas
   @media (min-width: 1280px) { ... }   → l: 12 colunas, contentor 1200 px */
@media (min-width: 600px)  { :root { --colunas: 8;  --medianiz: 20px; --margem: 32px; } }
@media (min-width: 1024px) { :root { --colunas: 12; --medianiz: 24px; --margem: 40px; --altura-cabecalho: 72px; } }
@media (min-width: 1280px) { :root { --medianiz: 32px; --margem: 48px; } }

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) { :root { --dur-rapida: 0ms; --dur-base: 0ms; --dur-lenta: 0ms; } }


/* Nomes antigos usados no JavaScript → tokens da marca */
:root { --cor-texto-suave: var(--cor-texto-2); --cor-ok: var(--cor-sucesso); --cor-ok-claro: var(--cor-sucesso-fundo); --cor-aviso-claro: var(--cor-aviso-fundo); --cor-erro-claro: var(--cor-erro-fundo); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--fonte-base); color: var(--cor-texto); background: var(--cor-fundo); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-size: var(--texto-corpo); line-height: var(--altura-corpo); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: none; box-shadow: var(--anel-foco); border-radius: 2px; }
img, svg { max-width: 100%; }
a { color: var(--cor-link); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--cor-link-hover); text-decoration-thickness: 2.5px; }
p, li { max-width: var(--contentor-texto); }
.contentor { max-width: var(--contentor-max); margin: 0 auto; padding: 0 var(--margem); }
.tj-ic { flex: none; display: inline-block; vertical-align: middle; }
/* Algarismos tabulares em todos os valores, tabelas e resultados */
.tj-num, table, output, data, .num b, .resultado b, .tj-pontos dd, .valor-grande { font-variant-numeric: var(--numeros); }
.saltar { position: absolute; left: -9999px; top: 0; background: var(--cor-primaria); color: var(--cor-texto-inverso); padding: var(--esp-3) var(--esp-4); z-index: var(--z-modal); font-weight: 600; }
.saltar:focus { left: var(--esp-2); top: var(--esp-2); color: var(--cor-texto-inverso); }
.sr-only, .oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pequeno { font-size: var(--texto-pequeno); }
.mt0 { margin-top: 0; }

/* ---------- Títulos ---------- */
h1, h2, h3, h4 { font-family: var(--fonte-titulos); color: var(--cor-texto); }
h1 { font-size: var(--texto-h1-fluido); line-height: var(--altura-h1); font-weight: var(--peso-h1); letter-spacing: var(--espaco-h1); font-stretch: var(--largura-h1); margin: var(--esp-2) 0 var(--esp-3); }
h2 { font-size: var(--texto-h3-fluido); line-height: var(--altura-h3); font-weight: var(--peso-h2); letter-spacing: var(--espaco-h3); font-stretch: var(--largura-h3); margin: var(--esp-10) 0 var(--esp-3); }
h3 { font-size: var(--texto-h4-fluido); line-height: var(--altura-h4); font-weight: var(--peso-h4); margin: var(--esp-6) 0 var(--esp-2); }
.entrada { font-size: var(--texto-corpo-g); line-height: var(--altura-corpo-g); color: var(--cor-texto-2); max-width: 46rem; margin: 0 0 var(--esp-6); }
.kicker { display: block; font-size: var(--texto-legenda); line-height: var(--altura-legenda); font-weight: 700; letter-spacing: var(--espaco-legenda); text-transform: uppercase; color: var(--cor-primaria); margin: 0 0 var(--esp-1); }

/* ---------- Cabeçalho ---------- */
.faixa-civica { height: 4px; background: linear-gradient(90deg, var(--cor-primaria) 0 82%, var(--cor-acento) 82% 100%); }
header.topo { background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); position: relative; z-index: var(--z-cabecalho); }
header.topo .contentor { display: flex; align-items: center; gap: var(--esp-6); min-height: var(--altura-cabecalho); }
.marca { display: flex; flex: none; padding: var(--esp-2) 0; }
.marca img { height: 30px; width: auto; display: block; }
nav.principal { margin-left: auto; }
nav.principal ul { list-style: none; display: flex; align-items: center; gap: var(--esp-1); margin: 0; padding: 0; }
nav.principal li { max-width: none; }
nav.principal a { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 40px; padding: 0 var(--esp-3); border-radius: var(--raio-s); text-decoration: none; color: var(--cor-texto-2); font-weight: 600; font-size: var(--texto-pequeno); white-space: nowrap; }
nav.principal a:hover { background: var(--cor-hover-fundo); color: var(--cor-texto); }
nav.principal a[aria-current="page"] { color: var(--cor-primaria); background: var(--cor-primaria-suave-2); }
nav.principal a.cta { border: 1.5px solid var(--cor-primaria); color: var(--cor-primaria); margin-left: var(--esp-3); }
nav.principal a.cta:hover { background: var(--cor-primaria-suave); }
/* Menu móvel sem JavaScript */
.menu-m { display: none; margin-left: auto; position: static; }
.menu-m summary { list-style: none; display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo-toque); padding: 0 var(--esp-3); border: 1.5px solid var(--cor-borda-2); border-radius: var(--raio-s); font-weight: 600; font-size: var(--texto-pequeno); cursor: pointer; color: var(--cor-texto); }
.menu-m summary::-webkit-details-marker { display: none; }
.menu-m[open] summary { background: var(--cor-primaria-suave-2); border-color: var(--cor-primaria); color: var(--cor-primaria); }
.menu-m ul { list-style: none; margin: 0; padding: var(--esp-2) var(--margem) var(--esp-4); position: absolute; left: 0; right: 0; top: 100%; background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); box-shadow: var(--sombra-3); display: grid; gap: 2px; }
.menu-m li { max-width: none; }
.menu-m a { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--alvo-toque); padding: 0 var(--esp-3); border-radius: var(--raio-s); text-decoration: none; color: var(--cor-texto); font-weight: 600; }
.menu-m a:hover { background: var(--cor-hover-fundo); }
.menu-m a[aria-current="page"] { color: var(--cor-primaria); background: var(--cor-primaria-suave-2); }
@media (max-width: 1099px) { nav.principal { display: none; } .menu-m { display: block; } }

/* ---------- Conteúdo ---------- */
main { padding: var(--esp-6) 0 var(--esp-16); }
main:focus { outline: none; }
.migalhas { font-size: var(--texto-pequeno); color: var(--cor-texto-2); margin-bottom: var(--esp-2); }
.migalhas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.migalhas li { max-width: none; }
.migalhas li + li::before { content: "/"; margin-right: var(--esp-2); color: var(--cor-borda-campo); }
.migalhas a { color: var(--cor-texto-2); text-decoration-color: var(--cor-borda-campo); text-decoration-thickness: 1px; }
.migalhas [aria-current] { color: var(--cor-texto); font-weight: 600; }

/* Herói da página inicial (fundo Gelo, largura total) */
.heroi { background: var(--tj-gelo); margin: calc(-1 * var(--esp-6)) calc(50% - 50vw) var(--esp-10); padding: var(--esp-12) calc(50vw - 50%) var(--esp-12); }
.heroi-grelha { display: grid; gap: var(--esp-8); align-items: center; }
@media (min-width: 1024px) { .heroi-grelha { grid-template-columns: 1.1fr 1fr; gap: var(--esp-12); } }
.heroi h1 { font-size: var(--texto-display-fluido); line-height: var(--altura-display); letter-spacing: var(--espaco-display); font-stretch: var(--largura-display); margin: var(--esp-4) 0; }
.heroi .entrada { margin-bottom: var(--esp-6); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.selo { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-pequeno); font-weight: 600; padding: var(--esp-1) var(--esp-3); border: 1px solid var(--cor-borda-2); border-radius: var(--raio-pilula); background: var(--cor-superficie); }
.selo .tj-ic { color: var(--cor-sucesso); }

/* ---------- Cartões ---------- */
.cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-m); padding: var(--esp-6); }
.cartao-elevado { border-color: transparent; box-shadow: var(--sombra-2); }
.cartao-cinza { background: var(--cor-superficie-2); border: 1px solid transparent; border-radius: var(--raio-m); padding: var(--esp-5) var(--esp-6); }
.grelha { display: grid; gap: var(--medianiz); grid-template-columns: 1fr; }
@media (min-width: 680px) { .grelha-2, .grelha-4, .grelha-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grelha-4 { grid-template-columns: repeat(4, 1fr); } .grelha-3 { grid-template-columns: repeat(3, 1fr); } }
.cartao-ferramenta { display: flex; flex-direction: column; gap: var(--esp-2); text-decoration: none; color: inherit; transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida); }
.cartao-ferramenta:hover { border-color: var(--cor-primaria); box-shadow: var(--sombra-2); color: inherit; }
.cartao-ferramenta h2, .cartao-ferramenta h3 { margin: var(--esp-2) 0 0; font-size: var(--texto-h4); line-height: var(--altura-h4); letter-spacing: 0; font-stretch: 100%; }
.cartao-ferramenta p { margin: 0; color: var(--cor-texto-2); font-size: var(--texto-pequeno); flex: 1; }
.cartao-ferramenta .abrir { display: inline-flex; align-items: center; gap: var(--esp-1); color: var(--cor-primaria); font-weight: 600; font-size: var(--texto-pequeno); margin-top: var(--esp-2); }
.icone-chip { width: 40px; height: 40px; border-radius: var(--raio-s); background: var(--cor-primaria-suave-2); color: var(--cor-primaria); display: grid; place-items: center; }
.etiqueta { display: inline-flex; align-self: flex-start; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--raio-pilula); font-size: var(--texto-legenda); font-weight: 700; letter-spacing: .02em; background: var(--cor-primaria-suave-2); color: var(--cor-primaria-ativa); }
.confianca { display: grid; gap: var(--esp-6); border-top: 1px solid var(--cor-borda); margin-top: var(--esp-10); padding-top: var(--esp-8); }
@media (min-width: 900px) { .confianca { grid-template-columns: repeat(3, 1fr); } }
.confianca > div { display: grid; grid-template-columns: auto 1fr; gap: var(--esp-3); align-items: start; }
.confianca .tj-ic { color: var(--cor-primaria); margin-top: 2px; }
.confianca b { display: block; }
.confianca p { margin: 0; font-size: var(--texto-pequeno); color: var(--cor-texto-2); }

/* ---------- Formulários ---------- */
.ferramenta-layout { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; margin-top: var(--esp-6); }
@media (min-width: 1024px) { .ferramenta-layout { grid-template-columns: 380px 1fr; align-items: start; } }
form.formulario { display: grid; gap: var(--esp-5); }
.campo { display: grid; gap: var(--esp-2); min-width: 0; }
.campo label, .campo legend { font-weight: 600; font-size: var(--texto-pequeno); line-height: 1.3; color: var(--cor-texto); }
.campo .ajuda, .ajuda { font-size: var(--texto-pequeno); color: var(--cor-texto-2); line-height: 1.4; margin: 0; }
input[type="number"], input[type="text"], input[type="search"], select { font: inherit; font-size: var(--texto-corpo); width: 100%; min-height: 48px; padding: 0 var(--esp-4); border: 1.5px solid var(--cor-borda-campo); border-radius: var(--raio-s); background: var(--cor-superficie); color: var(--cor-texto); font-variant-numeric: var(--numeros); transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida); }
select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230C1631' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
input:hover, select:hover { border-color: var(--cor-texto-2); }
input:focus, select:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px var(--cor-primaria-suave-2); }
input[aria-invalid="true"] { border-color: var(--cor-erro); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--cor-primaria); width: 20px; height: 20px; margin: 0; }
fieldset { border: 1px solid var(--cor-borda); border-radius: var(--raio-m); padding: var(--esp-3) var(--esp-4) var(--esp-4); margin: 0; min-width: 0; }
fieldset legend { padding: 0 var(--esp-1); }
.opcoes { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-4); }
.opcoes label { font-weight: 400; display: inline-flex; gap: var(--esp-2); align-items: center; min-height: var(--alvo-toque); }
details { border: 1px solid var(--cor-borda); border-radius: var(--raio-m); padding: var(--esp-3) var(--esp-4); background: var(--cor-superficie); }
details summary { cursor: pointer; font-weight: 600; min-height: 28px; }
details[open] summary { margin-bottom: var(--esp-2); }

/* ---------- Botões (laranja nunca como texto; botões laranja levariam texto escuro) ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: var(--alvo-toque); padding: 0 var(--esp-5); font: inherit; font-size: var(--texto-corpo); font-weight: 600; line-height: 1.2; color: var(--cor-texto-inverso); background: var(--cor-primaria); border: 1.5px solid transparent; border-radius: var(--raio-s); cursor: pointer; text-decoration: none; transition: background var(--dur-rapida) var(--curva-base); }
.botao:hover { background: var(--cor-primaria-hover); color: var(--cor-texto-inverso); text-decoration: none; }
.botao:active { background: var(--cor-primaria-ativa); }
.botao-sec { background: var(--cor-superficie); color: var(--cor-primaria); border-color: var(--cor-primaria); }
.botao-sec:hover { background: var(--cor-primaria-suave); color: var(--cor-primaria-hover); }
.botao-acento { background: var(--cor-acento); color: var(--tj-tinta); }
.botao-acento:hover { background: var(--cor-acento-hover); color: var(--tj-tinta); }

/* ---------- Resultados ---------- */
.resultado { min-height: 120px; }
.resultado > :first-child { margin-top: 0; }
.resumo-num { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: var(--esp-4) 0; }
.num { background: var(--cor-superficie-2); border-radius: var(--raio-m); padding: var(--esp-4); }
.num b { display: block; font-size: var(--texto-h3); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.num span { display: block; margin-top: var(--esp-1); font-size: var(--texto-pequeno); color: var(--cor-texto-2); line-height: 1.4; }
.titulo-resultado { font-size: var(--texto-h3); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; font-stretch: 104%; margin: var(--esp-3) 0; }
.valor-grande { font-size: var(--texto-numero-xl-fluido); font-weight: 800; letter-spacing: -.02em; line-height: 1; font-stretch: 104%; }
.cartao-resultado { padding: 0; overflow: hidden; }
.cartao-resultado .corpo { padding: var(--esp-6); }
.cartao-resultado .cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--esp-3); }
.cartao-resultado .sub { font-size: var(--texto-pequeno); color: var(--cor-texto-2); margin: 0; }
.veredicto { display: grid; gap: var(--esp-6); align-items: center; margin-top: var(--esp-4); }
@media (min-width: 720px) { .veredicto { grid-template-columns: minmax(220px, 300px) 1fr; } }
.mostrador { display: flex; flex-direction: column; align-items: center; }
.tj-gauge { width: 100%; max-width: 300px; display: block; }
.mostrador .legenda { display: flex; justify-content: space-between; width: 100%; max-width: 300px; margin-top: -4px; font-size: var(--texto-pequeno); color: var(--cor-texto-2); font-variant-numeric: var(--numeros); }
.mostrador .legenda b { color: var(--cor-texto); }
.tj-pontos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--esp-4); border-top: 1px solid var(--cor-borda); padding-top: var(--esp-4); margin: var(--esp-4) 0 0; }
.tj-pontos dt { font-size: var(--texto-pequeno); color: var(--cor-texto-2); }
.tj-pontos dd { margin: 2px 0 0; font-weight: 700; font-size: var(--texto-corpo-g); white-space: nowrap; }
.tj-fonte { display: flex; gap: var(--esp-3); align-items: flex-start; padding: var(--esp-3) var(--esp-6); border-top: 1px solid var(--cor-borda); background: var(--cor-superficie); font-size: var(--texto-pequeno); line-height: 1.5; color: var(--cor-texto-2); }
.tj-fonte .tj-ic { color: var(--cor-texto-2); margin-top: 2px; }
.tj-fonte p { margin: 0; }

/* Posição face à mediana: símbolo + texto + cor (nunca só a cor). Manual: abaixo < 95% ≤ na mediana ≤ 105% < acima */
.tj-pos { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--texto-pequeno); line-height: 1.1; padding: 6px 10px; border-radius: var(--raio-pilula); white-space: nowrap; }
.tj-pos svg { flex: none; }
.tj-pos--abaixo { color: var(--dados-abaixo); background: var(--dados-abaixo-fundo); }
.tj-pos--mediana { color: #4F586B; background: var(--dados-mediana-fundo); } /* #4F586B: variante AA do cinzento da mediana sobre o fundo (manual, contraste) */
.tj-pos--acima { color: var(--dados-acima); background: var(--dados-acima-fundo); }
.legenda-mediana { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-3) 0; padding: 0; list-style: none; }
.legenda-mediana li { max-width: none; }

/* Estados genéricos (etiquetas) */
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: var(--texto-legenda); font-weight: 700; letter-spacing: .02em; min-height: 26px; padding: 2px 10px; border-radius: var(--raio-pilula); background: var(--cor-superficie-2); color: var(--cor-texto); }
.estado-ok { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.estado-aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
.estado-erro { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.estado-neutro { background: var(--cor-superficie-2); color: var(--cor-texto-2); }

/* ---------- Tabelas ---------- */
table { border-collapse: collapse; width: 100%; font-size: var(--texto-pequeno); }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--cor-borda); vertical-align: top; }
thead th, th[scope="col"] { background: var(--cor-superficie-2); font-weight: 700; color: var(--cor-texto); }
tbody tr:hover { background: var(--cor-primaria-suave); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
td.n, th.n { text-align: right; white-space: nowrap; }
.tabela-rolar { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--cor-borda); border-radius: var(--raio-m); margin: var(--esp-4) 0; }
.tabela-rolar table { min-width: 560px; }
caption { text-align: left; padding: var(--esp-3) var(--esp-4); font-weight: 600; }

/* ---------- Alertas ---------- */
.aviso, .info { display: block; padding: var(--esp-4) var(--esp-5); border: 1px solid var(--cor-aviso-borda); border-left: 4px solid var(--cor-aviso); background: var(--cor-aviso-fundo); border-radius: var(--raio-s); font-size: var(--texto-pequeno); line-height: 1.5; color: var(--cor-texto); margin: var(--esp-4) 0; }
.info { border-color: var(--cor-info-borda); border-left-color: var(--cor-info); background: var(--cor-info-fundo); }
.aviso > :first-child, .info > :first-child { margin-top: 0; } .aviso > :last-child, .info > :last-child { margin-bottom: 0; }
.fonte { font-size: var(--texto-pequeno); color: var(--cor-texto-2); }
.fonte a { color: var(--cor-texto-2); }

/* ---------- Esforço (onde viver) ---------- */
.barra-esforco { height: 10px; background: var(--cor-superficie-2); border-radius: 5px; overflow: hidden; min-width: 80px; }
.barra-esforco i { display: block; height: 100%; border-radius: 5px; }

/* ---------- Listas, FAQ, relacionadas ---------- */
.lista-concelhos { columns: 2 12rem; padding-left: 1.1rem; }
.faq h3 { margin-bottom: var(--esp-1); }
.faq p { margin-top: var(--esp-1); }
.relacionadas ul { list-style: none; padding: 0; display: grid; gap: var(--esp-2); }

/* ---------- Rodapé (Tinta) ---------- */
footer.rodape { background: var(--cor-superficie-inversa); color: #C9D0DD; font-size: var(--texto-pequeno); }
footer.rodape a { color: #C9D0DD; text-decoration: none; }
footer.rodape a:hover { color: #FFFFFF; text-decoration: underline; }
.rodape-in { display: grid; gap: var(--esp-8); grid-template-columns: 1fr 1fr; padding-top: var(--esp-12); padding-bottom: var(--esp-8); }
.rodape-in > div:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .rodape-in { grid-template-columns: 1.4fr repeat(3, 1fr); } .rodape-in > div:first-child { grid-column: auto; } }
.rodape-marca img { display: block; height: 28px; width: auto; margin-bottom: var(--esp-4); }
footer.rodape h2 { color: #FFFFFF; font-size: var(--texto-pequeno); font-stretch: 100%; letter-spacing: 0; margin: 0 0 var(--esp-3); font-weight: 700; }
footer.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
footer.rodape p { margin: 0 0 var(--esp-3); }
.rodape-base { border-top: 1px solid #25314F; }
.rodape-base .contentor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-2) var(--esp-6); padding-top: var(--esp-5); padding-bottom: var(--esp-6); color: #9AA3B5; font-size: var(--texto-legenda); }
.rodape-base p { margin: 0; max-width: none; }

@media print { header.topo, footer.rodape, nav, .faixa-civica { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Tabela compacta (cartão do herói) e linha de posição nas páginas de concelho */
.tabela-mini { margin-top: var(--esp-4); font-size: var(--texto-pequeno); }
.tabela-mini th, .tabela-mini td { padding: 10px 8px; vertical-align: middle; }
.tabela-mini thead th { background: transparent; color: var(--cor-texto-2); font-weight: 600; border-bottom: 1px solid var(--cor-borda-2); }
.tabela-mini tbody th { font-weight: 600; }
.tabela-mini tbody th a { color: var(--cor-texto); }
.posicao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); font-size: var(--texto-pequeno); color: var(--cor-texto-2); }
td .tj-pos { font-size: var(--texto-legenda); padding: 4px 9px; }
.menu-m { border: 0; padding: 0; background: transparent; border-radius: 0; }
.menu-m[open] summary { margin-bottom: 0; }
.tabela-mini { table-layout: auto; }
.tabela-mini .tj-pos { white-space: normal; }
@media (max-width: 479px) { .tabela-mini th, .tabela-mini td { padding: 8px 4px; } .tabela-mini td .tj-pos { padding: 4px 7px; } }

/* ---------- Pesquisa com sugestões (combobox) — campo segundo .tj-entrada do manual ---------- */
.combo { position: relative; }
.combo-campo { position: relative; display: flex; align-items: center; min-height: 48px; background: var(--cor-superficie); border: 1.5px solid var(--cor-borda-campo); border-radius: var(--raio-s); transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida); }
.combo-campo:hover { border-color: var(--cor-texto-2); }
.combo-campo:focus-within { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px var(--cor-primaria-suave-2); }
.combo-campo::before { content: ""; flex: none; width: 18px; height: 18px; margin-left: var(--esp-3); background: var(--cor-texto-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 L20 20'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 L20 20'/%3E%3C/svg%3E") center / contain no-repeat; }
.combo input.combo-entrada { flex: 1; min-width: 0; min-height: 45px; border: 0; box-shadow: none; background: transparent; padding: 0 var(--esp-2) 0 var(--esp-3); font-size: max(16px, var(--texto-corpo)); }
.combo input.combo-entrada:focus { box-shadow: none; outline: none; }
.combo-botao { flex: none; width: 44px; height: 45px; display: grid; place-items: center; border: 0; background: transparent; color: var(--cor-texto); cursor: pointer; border-radius: 0 var(--raio-s) var(--raio-s) 0; }
.combo-botao:hover { background: var(--cor-hover-fundo); }
.combo.aberta .combo-botao svg { transform: rotate(180deg); }
.combo-lista { position: absolute; z-index: var(--z-popover); left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: var(--esp-1) 0; list-style: none; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-m); box-shadow: var(--sombra-3); max-height: min(340px, 55vh); overflow-y: auto; overscroll-behavior: contain; }
.combo-opcao { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--esp-3); min-height: 48px; padding: var(--esp-2) var(--esp-4); cursor: pointer; border-left: 3px solid transparent; max-width: none; line-height: 1.3; }
.combo-opcao + .combo-opcao { border-top: 1px solid var(--cor-borda); }
.combo-nome { font-weight: 600; color: var(--cor-texto); align-self: center; }
.combo-sub { font-size: var(--texto-pequeno); color: var(--cor-texto-2); align-self: center; }
.combo-opcao:hover { background: var(--cor-hover-fundo); }
.combo-opcao.ativa { background: var(--cor-primaria-suave-2); border-left-color: var(--cor-primaria); }
.combo-opcao[aria-selected="true"] .combo-nome { color: var(--cor-primaria); }
.combo-opcao[aria-selected="true"] .combo-nome::after { content: " ✓"; }
.combo mark { background: var(--tj-azul-100); color: inherit; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; border-radius: 2px; padding: 0 1px; }
.combo-opcao.ativa mark { background: var(--cor-superficie); }
.combo-vazio { position: absolute; z-index: var(--z-popover); left: 0; right: 0; top: calc(100% + 6px); padding: var(--esp-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-aviso); border-radius: var(--raio-m); box-shadow: var(--sombra-3); font-size: var(--texto-pequeno); color: var(--cor-texto); }
.combo-vazio b { display: block; font-size: var(--texto-corpo); margin-bottom: 2px; }
.busca-concelhos { max-width: 32rem; margin: var(--esp-6) 0 var(--esp-2); }
#b-contagem { min-height: 1.5em; margin: var(--esp-2) 0 0; color: var(--cor-texto-2); }
@media (max-width: 599px) { .combo-lista { max-height: min(300px, 50vh); } .combo-opcao { flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; } .combo-nome, .combo-sub { align-self: flex-start; } }

/* Aviso de cookies: cartão fixo em baixo, não bloqueia a página nem desloca o conteúdo */
.aviso-cookies { position: fixed; z-index: var(--z-toast); left: var(--esp-2); right: var(--esp-2); bottom: var(--esp-2); max-width: 30rem; margin: 0; padding: var(--esp-4); background: var(--cor-superficie); color: var(--cor-texto); border: 1px solid var(--cor-borda-campo); border-top: 3px solid var(--cor-primaria); border-radius: var(--raio-m); box-shadow: var(--sombra-3); font-size: var(--texto-pequeno); line-height: 1.5; }
.aviso-cookies[hidden] { display: none; }
.aviso-cookies:focus { outline: none; }
.aviso-cookies p { margin: 0; max-width: none; }
.aviso-cookies-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); margin: var(--esp-3) 0; }
.aviso-cookies-botoes .botao { width: 100%; padding: 0 var(--esp-3); }
.aviso-cookies-nota { color: var(--cor-texto-suave, var(--cor-texto)); }
@media (min-width: 640px) { .aviso-cookies { left: var(--esp-6); right: auto; bottom: var(--esp-6); padding: var(--esp-5); } }
@media print { .aviso-cookies { display: none !important; } }
.ligacao-botao { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
footer.rodape .ligacao-botao { color: #C9D0DD; }
footer.rodape .ligacao-botao:hover { color: #FFFFFF; text-decoration: underline; }
.ligacao-texto { color: var(--cor-link); text-decoration: underline; }
.ligacao-texto:hover { color: var(--cor-link-hover); }