/* ═══════════════════════════════════════════════════════════════════════════
   tAILly — SISTEMA DE DESIGN
   Especificação completa: docs/04-DESIGN.md · espécime vivo: /estilo

   Toda cor desta folha saiu do validador do método dataviz
   (scripts/validate_palette.js, OKLab ΔE ×100, simulação Machado-Oliveira-
   Fernandes 2009 severidade 1.0). Nenhum valor foi escolhido no olho.
   Os números medidos estão em docs/04-DESIGN.md §2 e na página /estilo.

   CSS variables + BEM. Tailwind é vetado. propshaft + importmap, zero bundler.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. TOKENS — MODO ESCURO (padrão: o mapa 3D mora numa sala escura)
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* 1.1 Planos ---------------------------------------------------------- */
  --plano-pagina:   #0A1013;  /* fundo da página e da cena 3D  */
  --plano-carta:    #111A1F;  /* superfície de gráfico e cartão (validada) */
  --plano-elevado:  #16232A;  /* painel sobreposto, dica, menu */
  --plano-afundado: #070C0E;  /* poço, trilho do scrubber */
  --linha-grade:    #1E2C33;  /* hairline recessiva  */
  --linha-eixo:     #2B3C44;  /* eixo/baseline, divisórias */
  --linha-forte:    #3A4E58;  /* borda de foco, contorno de seleção */

  /* 1.2 Tinta ----------------------------------------------------------- */
  /* Aferido contra os TRÊS planos que recebem texto (página · carta · elevado),
     nunca contra um só. Portão: `node scripts/validate_palette.js`. */
  --tinta:          #E6EEF1;  /* 16,29:1 pág · 14,99:1 carta · 13,66:1 elev */
  --tinta-2:        #9BAAB2;  /*  8,01:1 pág ·  7,38:1 carta ·  6,72:1 elev */
  --tinta-3:        #7B8F98;  /*  5,68:1 pág ·  5,22:1 carta ·  4,76:1 elev */
  --marca:          #3FBFB4;  /*  8,50:1 pág ·  7,83:1 carta ·  7,13:1 elev */
  --tinta-invertida:#0A1013;  /* texto dentro de preenchimento claro */

  /* 1.3 Categórica — identidade de série. Ordem FIXA, nunca ciclada.
         Slots 1–4 são matizes politicamente NEUTRAS no Brasil;
         verde/azul/vermelho ficam no fim da fila de propósito (§2.3). */
  --serie-1: #1da195;  /* turquesa */
  --serie-2: #c26215;  /* laranja  */
  --serie-3: #8a66d9;  /* violeta  */
  --serie-4: #b98918;  /* âmbar    */
  --serie-5: #c34e97;  /* magenta  */
  --serie-6: #1d9330;  /* verde    */
  --serie-7: #167edd;  /* azul     */
  --serie-8: #d24d45;  /* vermelho */
  --serie-outros: #6F8189;  /* o 9º em diante: "Outros", cinza, nunca gerado — 4,72:1 pág */
  --serie-sem-cor: #5C6F77; /* entidade sem slot atribuído (§2.3, regra 6) — 3,64:1 pág.
                               Era #4A5C65 (2,75:1): a coluna "sem registro no TSE"
                               sumia no fundo, e a ausência tem de ser VISÍVEL. */

  /* 1.4 Sequencial — INTENSIDADE (uma matiz, âncora invertida no escuro:
         perto de zero = perto da superfície). Turquesa. */
  --seq-100: #042b27;
  --seq-200: #09413c;
  --seq-300: #115952;  /* ← início seguro para rampa ORDINAL (2,16:1) */
  --seq-400: #187269;
  --seq-500: #208c82;
  --seq-600: #2aab9e;
  --seq-700: #33cabb;

  /* 1.4b Sequencial secundária (quando há DOIS contextos sequenciais). Laranja. */
  --seq2-100: #3b1a03;
  --seq2-200: #572a07;
  --seq2-300: #763a0d;
  --seq2-400: #964c14;
  --seq2-500: #b85f1b;
  --seq2-600: #df7423;
  --seq2-700: #f99350;

  /* 1.5 Divergente — SWING (mudança entre eleições).
         violeta ↔ âmbar: eixo azul-amarelo, o único que a dicromacia preserva.
         NÃO é vermelho↔azul nem vermelho↔verde — os dois seriam lidos como
         placar partidário brasileiro. Meio CINZA = "sem mudança". */
  --div-n4: #b198f9;
  --div-n3: #9b79ee;
  --div-n2: #8460d2;
  --div-n1: #6d47b8;
  --div-0:  #2A363C;
  --div-p1: #7e5d14;
  --div-p2: #9b731b;
  --div-p3: #b88923;
  --div-p4: #d7a12a;

  /* 1.6 Status — reservado. NUNCA vira "série 4". Sempre com ícone + rótulo. */
  --status-bom:     #4FC98A;
  --status-atencao: #E4B93A;
  --status-critico: #F2736B;
  --status-neutro:  #8FA2AA;  /* 5,04:1 dentro do selo (lavagem sobre --plano-elevado) */
  --lavagem-bom:     rgba(79, 201, 138, 0.14);
  --lavagem-atencao: rgba(228, 185, 58, 0.14);
  --lavagem-critico: rgba(242, 115, 107, 0.14);
  --lavagem-neutra:  rgba(123, 143, 152, 0.13);
  --lavagem-marca:   rgba(63, 191, 180, 0.13);

  /* 1.8 CENA 3D — as ÚNICAS cores que o WebGL deve ler do CSS.
         Contrato com app/javascript/mapa3d/nucleo.js: ler no boot E no evento
         de troca de tema (o alternador escreve [data-tema] no <html>), e
         reconstruir os materiais. Halo de rótulo é o plano da página — nunca
         branco fixo, que no tema claro vira branco-sobre-branco. */
  --cena-malha:         #556C76;  /* fronteira das UFs — 3,46:1 sobre a página.
                                     Era #2B3C44 = 1,67:1: a malha sumia, e o
                                     nucleo.js ainda lia --linha-eixo (1,67:1
                                     escuro / 1,57:1 claro). MEDIDO, não olhado. */
  --cena-halo:          #0A1013;  /* contorno do rótulo de UF */
  --cena-sem-registro:  #5C6F77;  /* coluna sem registro no TSE (3,64:1) */
  --cena-municipio:     #3A4E58;  /* os 5.571 pontos de município */

  /* 1.7 Ausência de dado — nunca é zero, nunca é cor. É hachura. (§4) */
  --hachura: repeating-linear-gradient(
    135deg,
    rgba(155, 170, 178, 0.20) 0 2px,
    transparent 2px 6px
  );
}

/* ───────────────────────────────────────────────────────────────────────────
   2. TOKENS — MODO CLARO (paleta SELECIONADA, não um flip automático)
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:where(:not([data-tema="escuro"])) {
    color-scheme: light;

    --plano-pagina:   #E9EEF0;
    --plano-carta:    #F2F5F6;
    --plano-elevado:  #FFFFFF;
    --plano-afundado: #DDE4E7;
    --linha-grade:    #D6DDE0;
    --linha-eixo:     #B6C1C6;
    --linha-forte:    #93A2A9;

    /* Contraste aferido contra os TRÊS planos que recebem texto — página,
       carta e elevado —, não contra um só. O #5E7178 anterior dava 4,37:1
       sobre --plano-pagina (reprovado em 71 elementos medidos em produção
       em 27/07/2026) porque o 4,66:1 do comentário era do --plano-carta.
       Portão: scripts/validate_palette.js. */
    --tinta:          #0E1719;  /* 15,54:1 pág · 16,59:1 carta · 18,18:1 elev */
    --tinta-2:        #40535B;  /*  6,89:1 pág ·  7,35:1 carta ·  8,06:1 elev */
    --tinta-3:        #596C73;  /*  4,70:1 pág ·  5,02:1 carta ·  5,50:1 elev */
    /* #12766D passava nos três planos SÓLIDOS (4,68 · 4,99 · 5,47) e reprovava
       no plano COMPOSTO onde ele mais aparece: o estado ativo pinta a lavagem
       de 10% dele mesmo, e sobre esse fundo o texto caía para 4,11:1 (medido
       em 6 elementos, /mapa e /estilo, 28/07/2026). #10665F passa nos seis:
       sólidos e compostos. Portão: scripts/validate_palette.js. */
    --marca:          #10665F;  /*  5,81:1 pág ·  6,21:1 carta ·  6,80:1 elev
                                     5,11:1 · 5,43:1 · 5,92:1 sobre a lavagem */
    --tinta-invertida:#FFFFFF;

    --serie-1: #1b9a8e;
    --serie-2: #ad5611;
    --serie-3: #7b57c8;
    --serie-4: #aa7e17;
    --serie-5: #b23e88;
    --serie-6: #148227;
    --serie-7: #1270c4;
    --serie-8: #c13c36;
    --serie-outros: #748790;   /* 3,20:1 pág (era #7F9199, 2,80:1) */
    --serie-sem-cor: #788991;  /* 3,10:1 pág (era #AFBDC3, 1,65:1 — fantasma) */

    --seq-100: #bcfef4;
    --seq-200: #40f6e4;
    --seq-300: #37d8c9;
    --seq-400: #2eb8ab;   /* ← início seguro para rampa ORDINAL (2,24:1) */
    --seq-500: #249a8e;
    --seq-600: #1b7c72;
    --seq-700: #135f58;

    --seq2-100: #feeadf;
    --seq2-200: #fcccb0;
    --seq2-300: #faa774;
    --seq2-400: #f17e27;
    --seq2-500: #c9681f;
    --seq2-600: #a35317;
    --seq2-700: #7e3f0f;

    --div-n4: #5d34a4;
    --div-n3: #7b57c8;
    --div-n2: #9875ea;
    --div-n1: #b49cf9;
    --div-0:  #DBE1E3;
    --div-p1: #daa42b;
    --div-p2: #b48722;
    --div-p3: #906b19;
    --div-p4: #694d0f;

    --status-bom:     #0F6B3A;
    --status-atencao: #8A6206;
    --status-critico: #A3211B;
    --status-neutro:  #596C73;
    --lavagem-bom:     rgba(15, 107, 58, 0.11);
    --lavagem-atencao: rgba(138, 98, 6, 0.11);
    --lavagem-critico: rgba(163, 33, 27, 0.10);
    --lavagem-neutra:  rgba(94, 113, 120, 0.10);
    --lavagem-marca:   rgba(18, 118, 109, 0.10);

    --cena-malha:         #6B7F88;  /* 3,58:1 (era #7C8D95 = 2,94:1) */
    --cena-halo:          #E9EEF0;
    --cena-sem-registro:  #788991;
    --cena-municipio:     #8DA0A8;

    --hachura: repeating-linear-gradient(
      135deg,
      rgba(64, 83, 91, 0.22) 0 2px,
      transparent 2px 6px
    );
  }
}

/* O botão de tema tem de vencer o sistema operacional nos DOIS sentidos. */
:root[data-tema="claro"] {
  color-scheme: light;
  --plano-pagina: #E9EEF0; --plano-carta: #F2F5F6; --plano-elevado: #FFFFFF;
  --plano-afundado: #DDE4E7; --linha-grade: #D6DDE0; --linha-eixo: #B6C1C6;
  --linha-forte: #93A2A9;
  --tinta: #0E1719; --tinta-2: #40535B; --tinta-3: #596C73; --marca: #10665F;
  --tinta-invertida: #FFFFFF;
  --serie-1: #1b9a8e; --serie-2: #ad5611; --serie-3: #7b57c8; --serie-4: #aa7e17;
  --serie-5: #b23e88; --serie-6: #148227; --serie-7: #1270c4; --serie-8: #c13c36;
  --serie-outros: #748790; --serie-sem-cor: #788991;
  --seq-100: #bcfef4; --seq-200: #40f6e4; --seq-300: #37d8c9; --seq-400: #2eb8ab;
  --seq-500: #249a8e; --seq-600: #1b7c72; --seq-700: #135f58;
  --seq2-100: #feeadf; --seq2-200: #fcccb0; --seq2-300: #faa774; --seq2-400: #f17e27;
  --seq2-500: #c9681f; --seq2-600: #a35317; --seq2-700: #7e3f0f;
  --div-n4: #5d34a4; --div-n3: #7b57c8; --div-n2: #9875ea; --div-n1: #b49cf9;
  --div-0: #DBE1E3;
  --div-p1: #daa42b; --div-p2: #b48722; --div-p3: #906b19; --div-p4: #694d0f;
  --status-bom: #0F6B3A; --status-atencao: #8A6206; --status-critico: #A3211B;
  --status-neutro: #596C73;
  --lavagem-bom: rgba(15,107,58,0.11); --lavagem-atencao: rgba(138,98,6,0.11);
  --lavagem-critico: rgba(163,33,27,0.10); --lavagem-neutra: rgba(94,113,120,0.10);
  --lavagem-marca: rgba(18,118,109,0.10);
  --hachura: repeating-linear-gradient(135deg, rgba(64,83,91,0.22) 0 2px, transparent 2px 6px);
  --cena-malha: #6B7F88; --cena-halo: #E9EEF0; --cena-sem-registro: #788991;
  --cena-municipio: #8DA0A8;
}

/* ───────────────────────────────────────────────────────────────────────────
   3. TOKENS INVARIANTES — tipografia, espaço, forma, movimento, camada
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* 3.1 Famílias. Serifada SÓ em prosa editorial e títulos.
         TODO NÚMERO é sans ou mono — nunca serifada (regra do método). */
  --fonte-titulo: Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --fonte:        system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  --fonte-mono:   ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* 3.2 Escala tipográfica (base 16px, razão ~1,22 com degraus arredondados) */
  --t-micro: 0.6875rem; /* 11px — rótulo de eixo, crédito */
  --t-mini:  0.75rem;   /* 12px — legenda, meta */
  --t-menor: 0.8125rem; /* 13px — UI densa, tabela */
  --t-base:  0.9375rem; /* 15px — corpo de UI */
  --t-corpo: 1.0625rem; /* 17px — prosa */
  --t-md:    1.3125rem; /* 21px — título de cartão */
  --t-lg:    1.625rem;  /* 26px — título de seção */
  --t-xl:    2.125rem;  /* 34px — título de página */
  --t-2xl:   3rem;      /* 48px — figura-herói (piso do método) */
  --t-3xl:   4rem;      /* 64px — figura-herói de tela cheia */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --entrelinha-densa: 1.25;
  --entrelinha: 1.55;
  --tracking-rotulo: 0.07em;

  /* 3.3 Espaço — base 4px */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --e-9: 6rem;
  --gap: var(--e-4);
  --respiro-carta: var(--e-5);

  /* 3.4 Forma */
  --raio-1: 4px;    /* topo de barra/coluna — a especificação do método */
  --raio-2: 8px;
  --raio-3: 12px;   /* cartão */
  --raio-4: 18px;   /* painel */
  --raio-pilula: 999px;
  --fio: 1px;
  --marca-grossura: 2px;  /* linha de série, anel de superfície, vão de pilha */
  --barra-max: 24px;      /* espessura máxima de barra/coluna */

  /* 3.5 Elevação — sombra discreta; no escuro quem eleva é a superfície */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.18);
  --sombra-2: 0 6px 20px -6px rgba(0, 0, 0, 0.38);
  --sombra-3: 0 18px 48px -12px rgba(0, 0, 0, 0.48);

  /* 3.6 MOVIMENTO — durações */
  --dur-toque:  90ms;   /* resposta tátil: hover, press, foco */
  --dur-rapido: 160ms;  /* troca de estado local: chip, selo, aba */
  --dur-medio:  240ms;  /* entrada/saída de painel, dica, popover */
  --dur-lento:  420ms;  /* transição de camada, abertura de comparador */
  --dur-cena:   700ms;  /* voo de câmera do mapa 3D */
  --dur-passo-tempo: 1100ms; /* 1 pleito por passo no play da linha do tempo */

  /* 3.7 MOVIMENTO — curvas.
     --ease-dado é a curva do VALOR: monotônica, sem overshoot. Uma barra que
     ultrapassa e volta exibe, por alguns frames, um número que não existe.
     Overshoot (--ease-mola) é permitido só em cromo, nunca em marca de dado. */
  --ease-dado:    cubic-bezier(0.33, 0, 0.15, 1);
  --ease-padrao:  cubic-bezier(0.40, 0, 0.20, 1);
  --ease-saida:   cubic-bezier(0.16, 1, 0.30, 1);
  --ease-entrada: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-mola:    cubic-bezier(0.34, 1.40, 0.64, 1);

  /* 3.8 Camadas */
  --z-mapa: 0;
  --z-cromo: 10;
  --z-painel: 20;
  --z-scrubber: 30;
  --z-dica: 40;
  --z-modal: 50;

  /* 3.9 Aliases de compatibilidade — o painel de fundação (home) e os artefatos
     3D já escritos falam esses nomes. Mantidos para não quebrar nada. */
  --bg: var(--plano-pagina);
  --panel: var(--plano-carta);
  --edge: var(--linha-eixo);
  --ink: var(--tinta);
  --ink-dim: var(--tinta-2);
  --accent: var(--marca);
  --warn: var(--status-atencao);
  --bad: var(--status-critico);
  --good: var(--status-bom);
  --serif: var(--fonte-titulo);
  --sans: var(--fonte);
  --mono: var(--fonte-mono);
  --radius: var(--raio-3);
}

/* ───────────────────────────────────────────────────────────────────────────
   4. BASE
   ─────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* [hidden] tem de vencer qualquer display de componente. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--plano-pagina);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: var(--entrelinha);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-medio) var(--ease-padrao),
              color var(--dur-medio) var(--ease-padrao);
}

a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: var(--raio-1);
}

code, kbd, samp { font-family: var(--fonte-mono); font-size: 0.92em; }

hr { border: 0; border-top: var(--fio) solid var(--linha-grade); margin: var(--e-6) 0; }

::selection { background: var(--lavagem-marca); }

.layout { max-width: 1080px; margin: 0 auto; padding: var(--e-6) var(--e-5) var(--e-8); }
.layout--largo { max-width: 1320px; }

/* Só para leitor de tela */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   5. TIPOGRAFIA APLICADA
   ─────────────────────────────────────────────────────────────────────────── */
.titulo-pagina {
  font-family: var(--fonte-titulo);
  font-size: var(--t-xl);
  line-height: var(--entrelinha-densa);
  letter-spacing: -0.02em;
  margin: 0;
}
.titulo-secao {
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 var(--e-3);
}
.titulo-cartao {
  font-size: var(--t-md);
  font-weight: var(--peso-forte);
  line-height: 1.3;
  margin: 0 0 var(--e-2);
}
.rotulo {
  font-size: var(--t-mini);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  color: var(--tinta-3);
  margin: 0;
}
.prosa { font-size: var(--t-corpo); max-width: 68ch; color: var(--tinta-2); }
.prosa strong { color: var(--tinta); font-weight: var(--peso-forte); }
.legendinha { font-size: var(--t-mini); color: var(--tinta-3); margin: var(--e-2) 0 0; }
.num { font-variant-numeric: tabular-nums; }  /* SÓ em coluna que alinha */

/* ───────────────────────────────────────────────────────────────────────────
   6. SUPERFÍCIES
   ─────────────────────────────────────────────────────────────────────────── */
.cartao {
  background: var(--plano-carta);
  border: var(--fio) solid var(--linha-grade);
  border-radius: var(--raio-3);
  padding: var(--respiro-carta);
  transition: border-color var(--dur-rapido) var(--ease-padrao),
              transform var(--dur-rapido) var(--ease-saida);
}
.cartao--clicavel { cursor: pointer; }
.cartao--clicavel:hover { border-color: var(--linha-forte); transform: translateY(-1px); }

.grade {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grade--larga { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ───────────────────────────────────────────────────────────────────────────
   7. FIGURAS — herói e placa de estatística
   ─────────────────────────────────────────────────────────────────────────── */
.heroi {
  font-family: var(--fonte);       /* NUNCA serifada */
  font-size: var(--t-2xl);
  font-weight: var(--peso-forte);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: var(--e-2) 0 var(--e-1);
  font-variant-numeric: proportional-nums;  /* tabular deixa nº grande frouxo */
}
.heroi__unidade { font-size: 0.42em; font-weight: var(--peso-medio); color: var(--tinta-2); letter-spacing: 0; }

.placa { display: flex; flex-direction: column; gap: var(--e-1); }
.placa__valor {
  font-size: var(--t-lg);
  font-weight: var(--peso-forte);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: proportional-nums;
}
.placa__delta {
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-mini); font-weight: var(--peso-medio);
}
.placa__delta--sobe { color: var(--status-bom); }
.placa__delta--desce { color: var(--status-critico); }
.placa__delta--neutro { color: var(--tinta-3); }
.placa__base { font-size: var(--t-mini); color: var(--tinta-3); }

/* ───────────────────────────────────────────────────────────────────────────
   8. MARCAS DE DADO — barras, colunas, faixas
   Especificação do método: barra ≤ 24px, topo 4px arredondado e quadrado na
   linha de base, vão de 2px na cor da superfície entre marcas que se tocam.
   ─────────────────────────────────────────────────────────────────────────── */
.barras { display: flex; flex-direction: column; gap: var(--e-3); }
.barras__linha { display: grid; grid-template-columns: 12ch 1fr auto; gap: var(--e-3); align-items: center; }
.barras__rotulo { font-size: var(--t-menor); color: var(--tinta-2); }
.barras__trilho { position: relative; height: var(--barra-max); border-radius: var(--raio-1); }
.barra {
  height: 100%;
  border-radius: 0 var(--raio-1) var(--raio-1) 0;  /* quadrado na base */
  background: var(--serie-1);
  transform-origin: left center;
  transition: width var(--dur-lento) var(--ease-dado);
}
.barras__valor { font-size: var(--t-menor); color: var(--tinta); font-variant-numeric: tabular-nums; }

/* Colunas (o eco 2D da coluna do mapa 3D) */
.colunas { display: flex; align-items: flex-end; gap: var(--marca-grossura); height: 148px; }
.coluna {
  flex: 1;
  min-width: 0;
  max-width: var(--barra-max);
  background: var(--serie-1);
  border-radius: var(--raio-1) var(--raio-1) 0 0;   /* quadrado na base */
  position: relative;
  transition: height var(--dur-lento) var(--ease-dado),
              filter var(--dur-toque) var(--ease-padrao);
}
.coluna:hover, .coluna:focus-visible { filter: brightness(1.18); }
.coluna--sem-dado {
  background: transparent;
  background-image: var(--hachura);
  border: var(--fio) dashed var(--linha-eixo);
  border-bottom: 0;
}

/* Pilha: o vão de 2px é a cor da SUPERFÍCIE, nunca uma borda */
.pilha { display: flex; height: var(--barra-max); border-radius: var(--raio-1); overflow: hidden; gap: var(--marca-grossura); background: var(--plano-carta); }
.pilha__parte { min-width: 2px; transition: flex-basis var(--dur-lento) var(--ease-dado); }

/* Marcador com anel na cor da superfície */
.ponto {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--serie-1);
  box-shadow: 0 0 0 var(--marca-grossura) var(--plano-carta);
}

/* Grade e eixo: hairline SÓLIDA (nunca tracejada), recessiva */
.eixo { border-top: var(--fio) solid var(--linha-eixo); margin-top: var(--e-2); padding-top: var(--e-2); display: flex; justify-content: space-between; }
.eixo__marca { font-size: var(--t-micro); color: var(--tinta-3); font-variant-numeric: tabular-nums; }

/* ───────────────────────────────────────────────────────────────────────────
   9. LEGENDA — sempre presente com 2+ séries; identidade nunca é só cor
   ─────────────────────────────────────────────────────────────────────────── */
.legenda { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); align-items: center; }
.legenda__item { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-mini); color: var(--tinta-2); }
.legenda__chave { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legenda__chave--linha { width: 16px; height: var(--marca-grossura); border-radius: var(--raio-pilula); }
.legenda__chave--sem-dado { background-image: var(--hachura); border: var(--fio) dashed var(--linha-eixo); }

/* Escala contínua (sequencial e divergente) */
.escala { display: flex; flex-direction: column; gap: var(--e-1); min-width: 220px; }
.escala__faixa { display: flex; height: 12px; border-radius: var(--raio-1); overflow: hidden; }
.escala__degrau { flex: 1; }
.escala__eixo { display: flex; justify-content: space-between; font-size: var(--t-micro); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.escala__meio { text-align: center; }

/* ───────────────────────────────────────────────────────────────────────────
   10. SELO / STATUS — cor NUNCA sozinha: ícone + rótulo
   ─────────────────────────────────────────────────────────────────────────── */
/* O selo carrega o PRÓPRIO plano de base (--plano-elevado) debaixo da lavagem.
   Sem isso o fundo real do texto dependia de onde o selo caísse: a mesma
   lavagem sobre --plano-pagina dava 4,11:1 e sobre --plano-elevado 4,77:1.
   Com a base declarada, o contraste do selo é o MESMO em qualquer superfície —
   e é esse número que scripts/validate_palette.js afere. */
.selo {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 2px var(--e-2);
  border-radius: var(--raio-pilula);
  font-size: var(--t-mini);
  font-weight: var(--peso-medio);
  line-height: 1.5;
  white-space: nowrap;
  background: var(--plano-elevado);
}
.selo__icone { font-size: 0.9em; line-height: 1; }
.selo--ok,       .selo--bom     { background: linear-gradient(var(--lavagem-bom), var(--lavagem-bom)) var(--plano-elevado);     color: var(--status-bom); }
.selo--pendente, .selo--atencao { background: linear-gradient(var(--lavagem-atencao), var(--lavagem-atencao)) var(--plano-elevado); color: var(--status-atencao); }
.selo--erro,     .selo--critico { background: linear-gradient(var(--lavagem-critico), var(--lavagem-critico)) var(--plano-elevado); color: var(--status-critico); }
.selo--vazio,    .selo--neutro  { background: linear-gradient(var(--lavagem-neutra), var(--lavagem-neutra)) var(--plano-elevado);  color: var(--status-neutro); }
.selo--marca                    { background: linear-gradient(var(--lavagem-marca), var(--lavagem-marca)) var(--plano-elevado);   color: var(--marca); }

/* ───────────────────────────────────────────────────────────────────────────
   11. MAPA — o produto
   ─────────────────────────────────────────────────────────────────────────── */
.mapa {
  position: relative;
  background: var(--plano-pagina);
  border: var(--fio) solid var(--linha-grade);
  border-radius: var(--raio-4);
  overflow: hidden;
  min-height: 320px;
  isolation: isolate;
}
.mapa__cena { position: absolute; inset: 0; z-index: var(--z-mapa); }
.mapa__cromo {
  position: absolute; inset: 0; z-index: var(--z-cromo);
  padding: var(--e-4);
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}
/* O cromo NÃO pode roubar o ponteiro da cena: só as folhas interativas
   recebem pointer-events. Uma fila de layout com `pointer-events: auto`
   cobre a largura inteira e mata o hover das colunas embaixo dela. */
.mapa__cromo .vidro,
.mapa__cromo button,
.mapa__cromo a,
.mapa__cromo input,
.mapa__cromo select { pointer-events: auto; }
.mapa__titulo { font-family: var(--fonte-titulo); font-size: var(--t-md); margin: 0; }
.mapa__fonte { font-size: var(--t-micro); color: var(--tinta-3); }

/* Camada de vidro: painel/legenda flutuando sobre a cena */
.vidro {
  background: color-mix(in srgb, var(--plano-elevado) 88%, transparent);
  border: var(--fio) solid var(--linha-grade);
  border-radius: var(--raio-3);
  padding: var(--e-3) var(--e-4);
  box-shadow: var(--sombra-2);
  backdrop-filter: blur(10px) saturate(1.1);
}

/* ───────────────────────────────────────────────────────────────────────────
   12. SCRUBBER DE TEMPO — o segundo produto
   ─────────────────────────────────────────────────────────────────────────── */
.scrubber { display: flex; align-items: center; gap: var(--e-3); }
.scrubber__play {
  flex: none;
  width: 44px; height: 44px;   /* piso de alvo; media 40x40 ate 28/07 */
  border-radius: 50%;
  border: var(--fio) solid var(--linha-eixo);
  background: var(--plano-elevado);
  color: var(--tinta);
  font-size: var(--t-base);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform var(--dur-toque) var(--ease-mola),
              border-color var(--dur-toque) var(--ease-padrao),
              background-color var(--dur-toque) var(--ease-padrao);
}
.scrubber__play:hover { border-color: var(--marca); transform: scale(1.06); }
.scrubber__play:active { transform: scale(0.94); }
.scrubber__play[data-tocando="1"] { background: var(--marca); color: var(--tinta-invertida); border-color: var(--marca); }

.scrubber__corpo { flex: 1; min-width: 0; }
.scrubber__trilho {
  position: relative;
  /* o fio desenhado continua com 3 px (::before); o ALVO é que precisa de 44 */
  height: 44px;
  cursor: pointer;
  touch-action: none;
}
.scrubber__trilho::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 3px; margin-top: -1.5px;
  border-radius: var(--raio-pilula);
  background: var(--plano-afundado);
}
.scrubber__preenchido {
  position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px;
  border-radius: var(--raio-pilula);
  background: linear-gradient(90deg, var(--seq-400), var(--marca));
  transition: width var(--dur-rapido) var(--ease-dado);
}
/* Marco = pleito real. Só existe onde há eleição — o vazio entre eles é dado. */
.scrubber__marco {
  position: absolute; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--linha-forte);
  box-shadow: 0 0 0 var(--marca-grossura) var(--plano-pagina);
  transition: background-color var(--dur-rapido) var(--ease-padrao),
              transform var(--dur-rapido) var(--ease-mola);
}
.scrubber__marco[data-passado="1"] { background: var(--marca); }
.scrubber__marco:hover { transform: scale(1.35); }
.scrubber__marco--sem-secao { background: transparent; border: var(--fio) dashed var(--linha-forte); }
.scrubber__polegar {
  position: absolute; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--marca);
  box-shadow: 0 0 0 3px var(--plano-pagina), var(--sombra-1);
  transition: transform var(--dur-toque) var(--ease-mola);
}
.scrubber__trilho:hover .scrubber__polegar { transform: scale(1.12); }
.scrubber__trilho:active .scrubber__polegar { transform: scale(0.96); }
.scrubber__anos { display: flex; justify-content: space-between; font-size: var(--t-micro); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.scrubber__agora {
  flex: none; min-width: 6.5ch; text-align: right;
  font-size: var(--t-md); font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ───────────────────────────────────────────────────────────────────────────
   13. PAINEL LATERAL
   ─────────────────────────────────────────────────────────────────────────── */
.painel {
  background: var(--plano-carta);
  border: var(--fio) solid var(--linha-grade);
  border-radius: var(--raio-4);
  padding: var(--e-5);
  display: flex; flex-direction: column; gap: var(--e-5);
}
.painel__secao { display: flex; flex-direction: column; gap: var(--e-3); }
.painel__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.painel__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.painel__lista li {
  display: grid; grid-template-columns: 12px 1fr auto;
  gap: var(--e-2); align-items: center;
  padding: var(--e-2) 0;
  border-bottom: var(--fio) solid var(--linha-grade);
  font-size: var(--t-menor);
}
.painel__lista li:last-child { border-bottom: 0; }
.painel__valor { font-variant-numeric: tabular-nums; color: var(--tinta); }

/* Procedência: todo número traz de onde veio (princípio de UX #3) */
.procedencia {
  font-size: var(--t-micro);
  color: var(--tinta-3);
  font-family: var(--fonte-mono);
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3);
}

/* ───────────────────────────────────────────────────────────────────────────
   14. DICA (tooltip) — enriquece, NUNCA é o único caminho para o valor
   ─────────────────────────────────────────────────────────────────────────── */
.dica {
  position: absolute;
  z-index: var(--z-dica);
  min-width: 176px;
  background: var(--plano-elevado);
  border: var(--fio) solid var(--linha-eixo);
  border-radius: var(--raio-2);
  box-shadow: var(--sombra-3);
  padding: var(--e-3);
  font-size: var(--t-menor);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.985);
  transition: opacity var(--dur-rapido) var(--ease-saida),
              transform var(--dur-rapido) var(--ease-saida);
}
.dica[data-aberta="1"] { opacity: 1; transform: translateY(0) scale(1); }
.dica__titulo { font-weight: var(--peso-forte); margin: 0 0 var(--e-2); font-size: var(--t-menor); }
.dica__linha { display: grid; grid-template-columns: 16px 1fr auto; gap: var(--e-2); align-items: center; padding: 1px 0; }
.dica__chave { height: var(--marca-grossura); border-radius: var(--raio-pilula); }
.dica__serie { color: var(--tinta-2); }
.dica__valor { font-weight: var(--peso-forte); color: var(--tinta); font-variant-numeric: tabular-nums; }
.dica__rodape { margin-top: var(--e-2); padding-top: var(--e-2); border-top: var(--fio) solid var(--linha-grade); font-size: var(--t-micro); color: var(--tinta-3); }

/* Fio da cruz do gráfico de linha */
.cruz { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--linha-forte); pointer-events: none; }

/* ───────────────────────────────────────────────────────────────────────────
   15. COMPARADOR — duas eleições no mesmo mapa, com cortina arrastável
   ─────────────────────────────────────────────────────────────────────────── */
.comparador { position: relative; overflow: hidden; border-radius: var(--raio-3); user-select: none; }
.comparador__lado { position: absolute; inset: 0; }
.comparador__lado--b { clip-path: inset(0 0 0 var(--corte, 50%)); }
.comparador__cortina {
  position: absolute; top: 0; bottom: 0; left: var(--corte, 50%);
  width: 2px; margin-left: -1px;
  background: var(--tinta);
  opacity: 0.55;
  cursor: col-resize;
}
.comparador__pega {
  position: absolute; top: 50%; left: 50%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--plano-elevado);
  border: var(--fio) solid var(--linha-forte);
  display: grid; place-items: center;
  font-size: var(--t-mini); color: var(--tinta-2);
  box-shadow: var(--sombra-1);
  transition: transform var(--dur-toque) var(--ease-mola);
}
.comparador__cortina:hover .comparador__pega { transform: scale(1.1); }
.comparador__etiqueta {
  position: absolute; top: var(--e-3);
  font-size: var(--t-mini); font-weight: var(--peso-medio);
  background: color-mix(in srgb, var(--plano-elevado) 86%, transparent);
  border: var(--fio) solid var(--linha-grade);
  border-radius: var(--raio-pilula);
  padding: 2px var(--e-3);
  backdrop-filter: blur(6px);
}
.comparador__etiqueta--a { left: var(--e-3); }
.comparador__etiqueta--b { right: var(--e-3); }

/* ───────────────────────────────────────────────────────────────────────────
   16. CONTROLES — filtros numa fila só, acima do que eles recortam
   ─────────────────────────────────────────────────────────────────────────── */
.controles { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin-bottom: var(--e-4); }
.botao {
  font: inherit; font-size: var(--t-menor);
  color: var(--tinta-2);
  background: var(--plano-carta);
  border: var(--fio) solid var(--linha-grade);
  border-radius: var(--raio-2);
  padding: var(--e-2) var(--e-3);
  cursor: pointer;
  /* piso de alvo (UX_PRINCIPLES §"alvo de toque"): 44 px em QUALQUER rota,
     não só no /mapa. Medido antes: 36,1 px no segmentado e 38,1 px no botão
     solto de /estilo. `min-height` + `justify-content` para o rótulo não
     descolar do centro quando a caixa cresce. */
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  transition: color var(--dur-toque) var(--ease-padrao),
              border-color var(--dur-toque) var(--ease-padrao),
              background-color var(--dur-toque) var(--ease-padrao),
              transform var(--dur-toque) var(--ease-saida);
}
.botao:hover { color: var(--tinta); border-color: var(--linha-forte); }
.botao:active { transform: translateY(1px); }
.botao[aria-pressed="true"], .botao--ativo {
  color: var(--marca); border-color: var(--marca); background: var(--lavagem-marca);
}
.botao--fantasma { background: transparent; border-color: transparent; }
.botao--principal { background: var(--marca); color: var(--tinta-invertida); border-color: var(--marca); font-weight: var(--peso-medio); }

.grupo { display: inline-flex; border: var(--fio) solid var(--linha-grade); border-radius: var(--raio-2); overflow: hidden; }
.grupo .botao { border: 0; border-radius: 0; border-right: var(--fio) solid var(--linha-grade); }
.grupo .botao:last-child { border-right: 0; }

/* ───────────────────────────────────────────────────────────────────────────
   17. TABELA — a gêmea acessível de todo gráfico
   ─────────────────────────────────────────────────────────────────────────── */
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-menor); }
.tabela th, .tabela td { text-align: left; padding: var(--e-2) var(--e-3); border-bottom: var(--fio) solid var(--linha-grade); }
.tabela th { color: var(--tinta-3); font-weight: var(--peso-medio); font-size: var(--t-mini); text-transform: uppercase; letter-spacing: var(--tracking-rotulo); }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tbody tr { transition: background-color var(--dur-toque) var(--ease-padrao); }
.tabela tbody tr:hover { background: var(--lavagem-neutra); }
.rolagem-x { overflow-x: auto; }

/* ───────────────────────────────────────────────────────────────────────────
   18. ESTADOS — carregando, vazio, erro, sem dado
   ─────────────────────────────────────────────────────────────────────────── */
/* Recarregar mantém o quadro: segura o render anterior mais apagado.
   Sem esqueleto, sem pulo de layout. */
.recarregando { opacity: 0.45; transition: opacity var(--dur-medio) var(--ease-padrao); pointer-events: none; }

/* Esqueleto só na PRIMEIRA carga, quando não há render anterior nenhum. */
.esqueleto {
  border-radius: var(--raio-1);
  background: linear-gradient(90deg, var(--linha-grade) 0%, var(--linha-eixo) 50%, var(--linha-grade) 100%);
  background-size: 200% 100%;
  animation: esqueleto-varre 1.4s var(--ease-padrao) infinite;
}
@keyframes esqueleto-varre { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.vazio, .erro {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
  text-align: center;
  padding: var(--e-7) var(--e-5);
  border: var(--fio) dashed var(--linha-eixo);
  border-radius: var(--raio-3);
  color: var(--tinta-2);
}
.vazio__icone, .erro__icone { font-size: var(--t-lg); opacity: 0.8; }
.vazio__titulo, .erro__titulo { font-weight: var(--peso-forte); color: var(--tinta); }
/* A lavagem PRECISA declarar a superfície de baixo, como o `.selo` faz. Sem a
   base, a caixa herdava o plano da página e o fundo composto virava
   rgb(226,218,219): `--tinta-3` da `.legendinha` de dentro caía para 3,99:1
   (medido em /estilo, tema claro, 28/07/2026). Com `--plano-elevado`
   declarado o fundo é rgb(246,233,232) e a mesma tinta dá 4,64:1. */
.erro {
  border-color: var(--status-critico); border-style: solid;
  background: linear-gradient(var(--lavagem-critico), var(--lavagem-critico)) var(--plano-elevado);
}
/* E a base declarada não basta: sobre a lavagem crítica do tema ESCURO a mesma
   `--tinta-3` dá 3,91:1 (medido). Texto miúdo dentro de caixa lavada sobe para
   `--tinta-2` — 6,80:1 no claro, 5,58:1 no escuro. */
.erro .legendinha { color: var(--tinta-2); }

/* Ausência de dado é BURACO, nunca zero (princípio de UX #2) */
.sem-dado {
  background-image: var(--hachura);
  border: var(--fio) dashed var(--linha-eixo);
  border-radius: var(--raio-1);
  color: var(--tinta-3);
}

/* Barra de progresso determinada (ingestão, drill-down) */
.progresso { height: 3px; border-radius: var(--raio-pilula); background: var(--plano-afundado); overflow: hidden; }
.progresso__preenchido { height: 100%; background: var(--marca); transition: width var(--dur-medio) var(--ease-dado); }
.progresso--indeterminado .progresso__preenchido { width: 32%; animation: progresso-vaivem 1.5s var(--ease-padrao) infinite; }
@keyframes progresso-vaivem { 0% { margin-left: -32%; } 100% { margin-left: 100%; } }

/* ───────────────────────────────────────────────────────────────────────────
   19. RODAPÉ DE FONTE — obrigatório em toda tela (regra 10 do CLAUDE.md)
   ─────────────────────────────────────────────────────────────────────────── */
.fonte {
  border-top: var(--fio) solid var(--linha-grade);
  margin-top: var(--e-7);
  padding-top: var(--e-4);
  font-size: var(--t-mini);
  color: var(--tinta-3);
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
}

/* ───────────────────────────────────────────────────────────────────────────
   20. ENTRADA DE CENA — revelação escalonada, curta e uma vez só
   ─────────────────────────────────────────────────────────────────────────── */
.revela { animation: revela var(--dur-lento) var(--ease-saida) both; }
.revela:nth-child(2) { animation-delay: 40ms; }
.revela:nth-child(3) { animation-delay: 80ms; }
.revela:nth-child(4) { animation-delay: 120ms; }
.revela:nth-child(5) { animation-delay: 160ms; }
.revela:nth-child(n+6) { animation-delay: 200ms; }
@keyframes revela { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ───────────────────────────────────────────────────────────────────────────
   21. ACESSIBILIDADE — movimento reduzido, contraste forçado, textura
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Canal reserva: com textura ligada (a11y, impressão, forced-colors) a
   identidade deixa de depender da matiz. 45° e o espelho 135°, só. */
@media (forced-colors: active) {
  .cartao, .painel, .mapa, .dica { border: 1px solid CanvasText; }
  .barra, .coluna, .pilha__parte { forced-color-adjust: none; }
}
[data-textura="1"] .serie-1, [data-textura="1"] .legenda__chave[data-slot="1"] { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.30) 0 2px, transparent 2px 5px); }
[data-textura="1"] .serie-2, [data-textura="1"] .legenda__chave[data-slot="2"] { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.30) 0 2px, transparent 2px 5px); }
[data-textura="1"] .serie-3, [data-textura="1"] .legenda__chave[data-slot="3"] { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.30) 0 3px, transparent 3px 8px); }
[data-textura="1"] .serie-4, [data-textura="1"] .legenda__chave[data-slot="4"] { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.30) 0 3px, transparent 3px 8px); }

@media print {
  body { background: #fff; color: #000; }
  .mapa, .cartao, .painel { box-shadow: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   22. UTILITÁRIOS DE COR DE SÉRIE (usados por marca de dado, nunca por texto)
   ─────────────────────────────────────────────────────────────────────────── */
.serie-1 { background-color: var(--serie-1); }
.serie-2 { background-color: var(--serie-2); }
.serie-3 { background-color: var(--serie-3); }
.serie-4 { background-color: var(--serie-4); }
.serie-5 { background-color: var(--serie-5); }
.serie-6 { background-color: var(--serie-6); }
.serie-7 { background-color: var(--serie-7); }
.serie-8 { background-color: var(--serie-8); }
.serie-outros { background-color: var(--serie-outros); }
.serie-sem-cor { background-color: var(--serie-sem-cor); }

/* ───────────────────────────────────────────────────────────────────────────
   23. CABEÇALHO GLOBAL
   ─────────────────────────────────────────────────────────────────────────── */
/* A BARRA FINA E PERMANENTE. A tela mais compartilhável do produto é /mapa;
   sem isto quem recebe o link nunca descobre que o produto se chama tAILly e
   não tem como chegar ao resto. Mora em TODA página, é sticky, e leva o
   alternador de tema — o que aposenta o botão flutuante que pairava sobre o
   conteúdo. Altura declarada em --topo-alt porque o palco sticky do celular
   se pendura nela. */
:root { --topo-alt: 56px; }

.topo-fino {
  position: sticky; top: 0; z-index: var(--z-modal);
  display: flex; align-items: center; gap: var(--e-4);
  min-height: var(--topo-alt);
  padding: var(--e-2) var(--e-5);
  /* VÉU OPACO, não 88%. Com alfa, o texto da barra pousava sobre o texto que
     rolava embaixo — medido em 390×844: `tAIlly` × `GO` = 56×44 px, `2026` ×
     `gasto declarado` = 42×33 px. Camada de cromo que cobre conteúdo tem de
     COBRIR: `backdrop-filter` embaixo de um fundo sem alfa não pinta nada,
     então some junto. */
  background: var(--plano-pagina);
  border-bottom: var(--fio) solid var(--linha-grade);
}
.topo-fino__marca {
  font-family: var(--fonte-titulo); font-size: var(--t-md);
  letter-spacing: -0.02em; color: var(--tinta); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; padding-right: var(--e-2);
  flex: 0 0 auto;
}
.topo-fino__marca em { color: var(--marca); font-style: normal; }
.topo-fino__marca:hover { text-decoration: none; color: var(--marca); }
.topo-fino__centro {
  flex: 1 1 auto; display: flex; justify-content: center; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.topo-fino__centro::-webkit-scrollbar { display: none; }
.topo-fino__fim { flex: 0 0 auto; display: flex; align-items: center; gap: var(--e-2); }

/* Seletor de ano/onda: hoje só 2026 existe. O que ainda não existe aparece
   DECLARADO como ainda-não — nunca como opção morta sem explicação. */
.anos { display: flex; align-items: center; gap: var(--e-1); flex-wrap: nowrap; justify-content: center; }
.anos__item {
  display: inline-flex; align-items: center; gap: var(--e-1);
  min-height: 44px; padding: 0 var(--e-3);
  border-radius: var(--raio-pilula);
  font-size: var(--t-menor); font-variant-numeric: tabular-nums;
  color: var(--tinta-3); white-space: nowrap;
}
/* Base declarada (mesma regra do selo): o contraste do estado ativo não pode
   depender da superfície onde a barra estiver pousada. */
.anos__item--atual {
  color: var(--marca); font-weight: var(--peso-medio);
  background: linear-gradient(var(--lavagem-marca), var(--lavagem-marca)) var(--plano-elevado);
}
.anos__item--futuro small { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--tracking-rotulo); }

/* ── O seletor de ano em tela estreita ────────────────────────────────────
   MEDIDO em 390×844: o contêiner do centro tem 210 px de largura útil e a
   fila dos anos pede 345. O corte caía no meio de `1933–2022` e a tela
   imprimia `193` — um ano que NÃO EXISTE, o que quebra a regra dura #1 do
   projeto. Rolagem horizontal não resolve: o rótulo continua cortado no meio
   de um número. Então em ≤ 420 px as ondas futuras saem da fila e vão para um
   popover nativo (sem JS, sem CSP), onde cabem por extenso. */
.anos__mais { display: none; }
.anos__mais {
  appearance: none; border: var(--fio) solid var(--linha-grade);
  background: var(--plano-elevado); cursor: pointer;
  min-width: 44px;
}
.anos__mais:hover { border-color: var(--marca); color: var(--tinta-2); }

.anos__pop {
  display: none;
  position: fixed; inset: auto;
  top: calc(var(--topo-alt) + var(--e-2)); left: var(--e-4); right: var(--e-4);
  width: auto; max-width: 340px; margin: 0 0 0 auto;
  padding: var(--e-4);
  background: var(--plano-elevado); color: var(--tinta);
  border: var(--fio) solid var(--linha-grade); border-radius: var(--raio-3);
  box-shadow: var(--sombra-2);
}
.anos__pop:popover-open { display: block; }
.anos__pop::backdrop { background: rgba(0, 0, 0, 0.4); }
.anos__pop h2 { font-size: var(--t-mini); text-transform: uppercase; letter-spacing: var(--tracking-rotulo); color: var(--tinta-3); margin: 0 0 var(--e-2); }
.anos__pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.anos__pop li { display: flex; align-items: baseline; gap: var(--e-2); min-height: 24px; color: var(--tinta-2); font-size: var(--t-menor); }
.anos__pop li b { font-variant-numeric: tabular-nums; font-weight: var(--peso-medio); color: var(--tinta); }
.anos__pop small { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--tracking-rotulo); color: var(--tinta-3); }
.anos__fecha {
  appearance: none; border: 0; background: transparent; color: var(--marca);
  cursor: pointer; font: inherit; font-size: var(--t-menor);
  margin-top: var(--e-3); min-height: 44px; padding: 0;
}

@media (max-width: 420px) {
  .anos__item--largo { display: none; }
  .anos__mais { display: inline-flex; }
}

.topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding-bottom: var(--e-4);
  border-bottom: var(--fio) solid var(--linha-grade);
  margin-bottom: var(--e-6);
}
.topo__marca { font-family: var(--fonte-titulo); font-size: var(--t-xl); margin: 0; letter-spacing: -0.02em; }
.topo__marca em { color: var(--marca); font-style: normal; }
.topo__acoes { display: flex; gap: var(--e-2); align-items: center; }

/* Alternador de tema */
.tema {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--plano-carta);
  border: var(--fio) solid var(--linha-grade);
  color: var(--tinta-2);
  cursor: pointer;
  transition: transform var(--dur-medio) var(--ease-mola), color var(--dur-toque) var(--ease-padrao), border-color var(--dur-toque) var(--ease-padrao);
}
.tema:hover { color: var(--marca); border-color: var(--marca); }
.tema:active { transform: rotate(-25deg) scale(0.92); }
.tema--flutuante {
  position: fixed; right: var(--e-4); bottom: var(--e-4);
  z-index: var(--z-cromo);
  box-shadow: var(--sombra-2);
  background: var(--plano-elevado);
}

/* ───────────────────────────────────────────────────────────────────────────
   24. COMPATIBILIDADE — classes do painel de fundação já em produção
   ─────────────────────────────────────────────────────────────────────────── */
.cabecalho { border-bottom: var(--fio) solid var(--linha-grade); padding-bottom: var(--e-5); margin-bottom: var(--e-6); }
.cabecalho__marca { font-family: var(--fonte-titulo); font-size: var(--t-xl); margin: 0; letter-spacing: -0.02em; }
.cabecalho__marca em { color: var(--marca); font-style: normal; }
.cabecalho__linha { color: var(--tinta-2); margin: var(--e-1) 0 0; }
/* A porta de entrada do produto: o mapa 3D. Sem isto a home é um relatório
   sobre um mapa que ninguém acha. */
.cabecalho__cta {
  /* alvo de 44 px: media 599,7x28,3 ate 28/07. Não é link inline dentro de
     frase — é a porta de entrada do produto, então cumpre o piso. */
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: var(--e-2);
  color: var(--marca); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.cabecalho__cta:hover { filter: brightness(1.12); }
.secao { margin-bottom: var(--e-7); }
.secao__titulo { font-family: var(--fonte-titulo); font-size: var(--t-lg); margin: 0 0 var(--e-3); }
.cartao__rotulo { color: var(--tinta-3); font-size: var(--t-mini); text-transform: uppercase; letter-spacing: var(--tracking-rotulo); margin: 0; }
.cartao__numero { font-family: var(--fonte); font-size: var(--t-lg); font-weight: var(--peso-forte); letter-spacing: -0.02em; margin: var(--e-1) 0 0; }
.cartao__meta { color: var(--tinta-3); font-size: var(--t-mini); margin: var(--e-1) 0 0; display: flex; align-items: center; gap: var(--e-2); font-variant-numeric: tabular-nums; }
.lista-ondas { list-style: none; padding: 0; margin: 0; }
.lista-ondas li { border-bottom: var(--fio) solid var(--linha-grade); padding: var(--e-2) 0; display: flex; gap: var(--e-3); align-items: baseline; }
.lista-ondas li:last-child { border-bottom: 0; }
.lista-ondas__onda { font-family: var(--fonte-mono); color: var(--tinta-3); min-width: 3.2rem; font-size: var(--t-mini); }
.rodape { border-top: var(--fio) solid var(--linha-grade); margin-top: var(--e-7); padding-top: var(--e-4); color: var(--tinta-3); font-size: var(--t-mini); }

/* ───────────────────────────────────────────────────────────────────────────
   25. HOME — o herói é o que o produto SABE, não o que ele ainda não tem
   Regra dura nº 2 do projeto: ausência de dado é dado. Cartão sem registro
   NÃO imprime "0" em 34px: imprime a hachura e escreve o que falta.
   ─────────────────────────────────────────────────────────────────────────── */
.capa { display: grid; gap: var(--e-5); margin-bottom: var(--e-7); }
.capa__linha { color: var(--tinta-2); font-size: var(--t-corpo); max-width: 60ch; margin: 0; }
.capa__numeros { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

.figura {
  background: var(--plano-carta);
  border: var(--fio) solid var(--linha-grade);
  border-radius: var(--raio-3);
  padding: var(--respiro-carta);
  display: grid; gap: var(--e-1);
}
.figura__valor {
  font-family: var(--fonte);            /* NUNCA serifada */
  font-size: var(--t-2xl); font-weight: var(--peso-forte);
  line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: proportional-nums;
  margin: 0;
}
.figura__rotulo { margin: 0; font-size: var(--t-base); color: var(--tinta); font-weight: var(--peso-medio); }
.figura__base { margin: 0; font-size: var(--t-mini); color: var(--tinta-3); }
.figura__base a { color: var(--marca); text-decoration: underline; text-underline-offset: 2px; }

/* Cartão SEM DADO: hachura no lugar do número. Nunca zero. */
.cartao--sem-dado { background-image: var(--hachura); border-style: dashed; }
.cartao--sem-dado .cartao__numero,
.figura--sem-dado .figura__valor { display: none; }
.cartao__ausencia {
  margin: var(--e-2) 0 0;
  display: grid; gap: 2px;
  font-size: var(--t-menor); font-style: italic; color: var(--tinta-3);
}
.cartao__ausencia b { font-style: normal; font-weight: var(--peso-medio); color: var(--tinta-2); }
.cartao__quando { font-style: normal; font-size: var(--t-mini); }

/* Grade de números: duas colunas já em 390 px (era uma só, 2.477 px de rolagem). */
.grade--numeros { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }

/* Linha do tempo de cobertura: o roadmap na língua de quem lê, não do repo. */
.cobertura { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.cobertura li {
  display: flex; align-items: baseline; gap: var(--e-3);
  padding: var(--e-2) 0; border-bottom: var(--fio) solid var(--linha-grade);
}
.cobertura li:last-child { border-bottom: 0; }
.cobertura__quando { font-family: var(--fonte-mono); font-size: var(--t-menor); color: var(--tinta-3); min-width: 6.5rem; }
.cobertura__o-que { color: var(--tinta-2); }
.cobertura__o-que b { color: var(--tinta); font-weight: var(--peso-medio); }

/* Título de seção não pode deixar dígito órfão em linha própria. */
.secao__titulo, .titulo-secao, .titulo-pagina, .capa__titulo { text-wrap: balance; }
.capa__titulo { font-family: var(--fonte-titulo); font-size: var(--t-xl); margin: 0; letter-spacing: -0.02em; line-height: 1.15; }

/* Link dentro de bloco de texto não se distingue só pela cor (WCAG 1.4.1). */
.rodape a, .mapa-rodape a, .prosa a, .cobertura a, .capa__linha a { text-decoration: underline; text-underline-offset: 2px; }