/* ══════════════════════════════════════════════════════════════════════════
   OS DOIS TEMAS — identidade Black Hawk Group

   Antes eram três temas de humor (sóbrio, vivo, animado). A marca da Black
   Hawk não tem humor: tem aço. Então são DOIS, e a diferença é a luz —
   1 ESCURO (o padrão, a capa do material deles) e 2 CLARO (prata escovada).

   Duas portas para a mesma definição: as telas com JavaScript marcam
   `data-tema` no <html>; o painel da empresa não tem JavaScript e usa radios.
   `:has()` traduz um no outro, para existir UMA definição de cada tema.

   O escuro também é declarado por atributo (e não no `:root` puro) porque
   cada tela define as próprias variáveis no seu <style>, que vem DEPOIS
   desta folha — sem a especificidade do atributo, a tela venceria o tema.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · ESCURO ─────────────────────────────────────────────────────────────
   Aço escovado, não breu. A primeira versão era quase toda preta: carta em
   #17181C sobre fundo #0A0A0C dá ΔL 5 — a diferença existia no código e não
   na tela, e a informação sumia num bloco só de preto.

   Agora é uma ESCADA medida. Cada degrau tem distância de luminância (L* do
   CIELAB) suficiente para o olho separar:

       fundo    L*  8   #171818   a chapa preta ao fundo
       carta    L* 30   #464748   a placa de aço onde o dado mora   (ΔL 22)
       campo    L* 34   #505153   o que se preenche
       realce   L* 48   #74757A   o que está escolhido              (ΔL 18)
       fio      L* 54   #808184   o traço que separa                (ΔL 24)
       tinta3   L* 70   #A9ABAF   texto de apoio                    (ΔL 40)
       tinta    L* 96   #F1F3F9   texto principal                   (ΔL 66)

   Nenhum desses números foi escolhido no olho: saíram de um cálculo de ΔL e
   estão conferidos por auditoria no DOM, elemento por elemento. */
:root[data-tema="1"], html:has(#tema-1:checked){
  /* 14/10/2026 — a escada foi recalculada para valer DUAS regras ao mesmo
     tempo: ΔL ≥ 22 entre carta e chapa (o olho do Gustavo) e contraste WCAG
     AA (≥ 4,5:1) em TODO texto sobre a carta. A carta #464748 era um cinza
     médio onde só o branco passava: o texto de apoio dava 4,05:1 e o fraco
     2,73:1. Grafite mais fundo sobre chapa quase preta resolve as duas:
         chapa  #0A0A0B L* 3 · carta #3C3C3E L* 25 (ΔL 22,6)
         tinta 10,1:1 · tinta2 7,6:1 · tinta3 6,7:1 · tinta4 5,8:1 · fio 3,0:1
     (tinta3 e tinta4 passam ≥ 4,5 também sobre o campo, onde o apoio mora) */
  --neve:#3C3C3E;--linho:#4A4A4C;--nevoa:#525254;--bruma:#5B5B5D;
  --porcelana:#3C3C3E;--marfim:#3C3C3E;--gesso:#4A4A4C;--areia:#4F4A40;
  --carta:#3C3C3E;--carta-topo:#434345;--papel:#0A0A0B;--papel-2:#4A4A4C;
  --fio:#868688;--fio-forte:#A3A3A5;--linha:#68686B;--linha-forte:#868688;
  --tinta:#F5F5F7;--tinta2:#DCDCDF;--tinta3:#CACACC;--tinta4:#BCBCBE;
  --acao:#F5F5F7;--acao-fraca:#525254;
  --menu:#141415;--menu-on:#5B5B5D;--menu-hover:#232325;
  --sombra-1:0 1px 2px rgba(0,0,0,.55);
  --sombra-2:0 2px 8px rgba(0,0,0,.6),0 20px 44px -18px rgba(0,0,0,.85);
  --sombra-pop:0 44px 96px -22px rgba(0,0,0,.9);
  --luz:inset 0 1px 0 rgba(255,255,255,.07);
  --menu-on-tinta:#FFFFFF;   /* a aba escolhida é grafite claro: letra branca, 6,8:1 */
  /* 76% de vidro custava 5,5 pontos de ΔL entre a carta e a chapa — a
     separação caía para 18,5 e o Gustavo precisa de 15 no mínimo, 22 no ideal.
     A 88% o falcão ainda atravessa e a distância volta para 21,4. */
  --vidro:88%;
  /* As cinco casas do grupo. A cor é a da marca, mas a LUMINÂNCIA é a do tema:
     o ciano da imcorptec sobre chapa preta e a mesma marca sobre prata não
     podem ser o mesmo valor, senão uma das duas some. Mesma matiz, claridade
     ajustada — é o que um manual de marca chama de versão para fundo escuro. */
  /* monocromático, como o deck do grupo: logo colorido sobre grafite era o
     único ponto da tela que gritava */
  --m-airbpo:#CACACC;--m-aircount:#CACACC;--m-heynow:#CACACC;
  --m-heyrh:#CACACC;--m-imcorptec:#CACACC;
  /* a plaqueta da marca no cabeçalho: aço claro sobre chapa preta */
  --mc-1:#FFFFFF;--mc-2:#CACED5;--mc-3:#868B94;
  --mc-chapa-a:rgba(255,255,255,.055);--mc-chapa-b:rgba(255,255,255,.012);
  --mc-fio:rgba(255,255,255,.11);--mc-sombra:rgba(0,0,0,.55);
  --alerta-tinta:#F3D9A6;
  /* a série do cliente é a mais importante do gráfico: no aço ela vira prata */
  /* três séries em três luzes do mesmo metal: o cliente é o mais claro */
  --serie-cliente:#F5F5F7;--serie-media:#8E8E92;--serie-melhor:#5B5B5D;
  --trilha:#525254;          /* a pista dos gráficos: acima da carta, abaixo do dado */
  /* A ESCADA DE NÍVEIS lida sozinha: quente (ruim) → PRATA (meio) → frio (bom).
     Antes era laranja, amarelo, azul-claro, VERDE, azul — o verde no 4º e o
     azul no 5º não se liam como subida. Todo nível ≥ 4,8:1 na carta, vizinhos
     a ≥ 21 ΔE; quente×frio sobrevive a daltonismo. */
  --n1:#FF8E6E;--n2:#F2C14E;--n3:#D3D5DA;--n4:#8DCDF5;--n5:#78B4FF;--n-na:#7C7C80;
  --selo-ok:#B6F0D8;--selo-meio:#F7DFAE;   /* estado sobre o tom escuro do selo */
  --na:#9A9A9E;   /* travessão grande sem nota: 3,4:1 na carta */
  color-scheme:dark;
}

/* ── 2 · CLARO ──────────────────────────────────────────────────────────────
   O escuro ganhou uma escada medida e o claro tinha ficado no rascunho: carta
   branca sobre papel #E7E9EC dá ΔL 7,7 — abaixo do que o Gustavo enxerga, e por
   isso os cartões sumiam no fundo.

   A correção é a que o material da Black Hawk já sugeria: o papel deles não é
   branco, é PRATA ESCOVADA. Então o fundo desce para L* 84 e a carta fica
   branca de verdade. Vira "placa branca sobre aço polido" — ΔL 16, com a mesma
   lógica do tema escuro, só que ao contrário.

       papel   L* 84   #CFD1D5   a chapa de prata
       carta   L* 100  #FFFFFF   a placa onde o dado mora       (ΔL 16)
       campo   L* 92   #E6E8EC
       fio     L* 70   #A9ABAE                                  (ΔL 30)
       tinta3  L* 44   #67686A   texto de apoio                 (ΔL 56)
       tinta   L* 12   #1F1F20   texto principal                (ΔL 88) */
:root[data-tema="2"], html:has(#tema-2:checked){
  /* 14/10/2026 — chapa #BFBFC2 (L* 77): a carta branca fica ΔL 22,6 acima
     (eram 18, e os cartões sumiam). A chapa escura de propósito cobra um
     preço: o texto de apoio também é escrito DIRETO nela (rodapé, legendas),
     então ele precisa passar ali — 4,8:1 na chapa, 8,8:1 na carta. No claro
     tinta3 e tinta4 são a mesma: a hierarquia vem de corpo e peso, não de
     um cinza que some. */
  --neve:#FFFFFF;--linho:#EDEDEF;--nevoa:#E2E2E5;--bruma:#D9D9DB;
  --porcelana:#FFFFFF;--marfim:#FFFFFF;--gesso:#EDEDEF;--areia:#F1EEE6;
  --carta:#FFFFFF;--carta-topo:#FFFFFF;--papel:#BFBFC2;--papel-2:#EDEDEF;
  --fio:#949496;--fio-forte:#747476;--linha:#C4C4C7;--linha-forte:#949496;
  --tinta:#1D1D1F;--tinta2:#38383A;--tinta3:#4A4A4C;--tinta4:#4A4A4C;
  /* no claro a carta é quase opaca: branco a 76% sobre a prata cai para L* 96 e
     a separação some. A 90% ela fica em 98 e o falcão ainda atravessa de leve */
  --vidro:90%;
  --m-airbpo:#48484A;--m-aircount:#48484A;--m-heynow:#48484A;
  --m-heyrh:#48484A;--m-imcorptec:#48484A;
  /* na prata a plaqueta inverte: metal escuro polido sobre chapa clara */
  --mc-1:#6E747D;--mc-2:#24282E;--mc-3:#64686F;
  --mc-chapa-a:rgba(255,255,255,.78);--mc-chapa-b:rgba(255,255,255,.30);
  --mc-fio:rgba(8,8,10,.11);--mc-sombra:rgba(255,255,255,.75);
  --acao:#1D1D1F;--acao-fraca:#E2E2E5;
  --menu:#FFFFFF;--menu-on:#D9D9DB;--menu-hover:#EDEDEF;
  --sombra-1:0 1px 2px rgba(8,8,10,.09);
  --sombra-2:0 2px 6px rgba(8,8,10,.10),0 18px 38px -14px rgba(8,8,10,.26);
  --sombra-pop:0 44px 96px -22px rgba(8,8,10,.45);
  --luz:inset 0 1px 0 rgba(255,255,255,.9);
  --menu-on-tinta:#0C0D10;--alerta-tinta:#8A5A11;
  --serie-cliente:#1D1D1F;--serie-media:#8E8E92;--serie-melhor:#C7C7CC;
  --selo-ok:#0B6B52;--selo-meio:#865710;
  --n1:#C2410C;--n2:#946200;--n3:#585B62;--n4:#1F77B4;--n5:#1652A8;--n-na:#8A8A8E;
  /* O travessão da empresa sem nota nascia num cinza claro CRAVADO (#D5D9E0):
     contra a chapa preta funcionava, contra a carta branca sobrava 11,7 de
     separação — abaixo dos 15 que o olho do Gustavo distingue. Um travessão
     que ninguém vê é pior do que travessão nenhum: a pessoa não sabe se a
     empresa não tem nota ou se a tela não carregou. */
  --na:#76767A;   /* travessão grande sem nota: 4,5:1 na carta e > 3:1 no vidro do pop-up */
  --trilha:#E2E2E5;
  color-scheme:light;
}

/* ── as RESPOSTAS falam a mesma escada dos níveis ──────────────────────────
   Sistema vale 10 e pinta como o topo da escada; necessário vale 2,5 e pinta
   como a base. Uma régua de cor só no produto inteiro: questionário, rosca do
   painel e carteira. A letra da opção marcada é escura no tema escuro (fundo
   claro) e clara no tema claro (fundo escuro) — branco sobre azul-claro dava
   menos de 2:1. */
:root[data-tema="1"],html:has(#tema-1:checked),:root[data-tema="2"],html:has(#tema-2:checked){
  --sistema:var(--n5);--planilha:var(--n4);--documento:var(--n2);
  --necessario:var(--n1);--anula:var(--n-na)}
:root[data-tema="1"],html:has(#tema-1:checked){--op-tinta:#0A0A0B;--acao-tinta:#0A0A0B}
:root[data-tema="2"],html:has(#tema-2:checked){--op-tinta:#FFFFFF;--acao-tinta:#FFFFFF}

/* ── os tons semânticos (bom / atenção / informação) entram na paleta ─────
   A marca é monocromática, mas "bom" e "atenção" carregam significado: apagar
   a diferença apagaria a informação. Então eles ficam — desbotados até quase
   cinza, com só um fio de cor para o olho separar. */
:root[data-tema="1"],html:has(#tema-1:checked){
  /* sobre a placa de aço, os tons semânticos precisam ficar ACIMA dela, não
     abaixo — antes eram quase pretos e viravam buracos dentro da carta */
  /* na MESMA luz da carta (ΔL ≤ 2), só com o matiz: mais claros, eles
     derrubavam o texto de apoio para 3,4:1. O estado nunca depende só deste
     tom — o Gustavo não vê ΔL abaixo de 15 —, ele vem junto de filete ou ícone. */
  --salvia:#38403F;--areia:#463F35;--ceu:#383E48;--rosa:#463A3C}
:root[data-tema="2"],html:has(#tema-2:checked){
  --salvia:#ECF1EE;--areia:#F2EFE8;--ceu:#EDEFF3;--rosa:#F4EEEE}

/* ══════════════════════════════════════════════════════════════════════════
   TIPOGRAFIA — uma escala, não uma coleção de números soltos

   Estava assim: 16,5 no corpo, 30 no h1, 19,5 no h2, 14,5 aqui, 13,5 ali —
   valores escolhidos um a um, cada um numa hora. O olho percebe isso como
   desalinho mesmo sem saber o porquê, porque os tamanhos não guardam relação
   entre si.

   Agora é uma ESCALA de razão 1,25 ancorada no corpo de 16px:

       micro    11,5   etiqueta em caixa alta (SEÇÃO, ESTADO)
       miúdo    13     apoio, legenda, data
       apoio    14,5   subtítulo, dica
       corpo    16     leitura
       médio    20     título de carta
       grande   25     título de seção
       maior    32     título de tela
       número   44+    o dado, quando ele é o assunto

   Três regras de ofício junto com a escala:

   · ENTRELINHA por função: 1,55 no que se lê em parágrafo, 1,2 no que é
     título. Título com entrelinha de parágrafo parece frouxo.
   · ESPACEJAMENTO ótico: quanto maior a letra, mais apertada ela precisa ser
     (-0,03em nos títulos); caixa alta pequena precisa do contrário (+0,12em),
     senão as maiúsculas se colam.
   · ALGARISMO TABULAR em todo número que se compara. Sem isso o "1" é mais
     estreito que o "8" e uma coluna de notas fica serrilhada.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --t-micro:11.5px;--t-miudo:13px;--t-apoio:14.5px;--t-corpo:16px;
  --t-medio:20px;--t-grande:25px;--t-maior:32px;
  --t-leitura:1.55;--t-titulo:1.2;
}

body{font-size:var(--t-corpo);line-height:var(--t-leitura);letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

h1,.topo h1,.cabeca-hub h1{font-size:var(--t-maior);line-height:var(--t-titulo);
  letter-spacing:-.03em;font-weight:680}
h2,.carta h2,.pop h2{font-size:var(--t-medio);line-height:1.28;letter-spacing:-.02em;
  font-weight:660}
.sub,.dentro small,.carta p,.dica,.pan-frase{font-size:var(--t-apoio);line-height:1.5}
.pan-frase{font-size:17.5px;line-height:1.5}

/* caixa alta pequena: o espacejamento é o que a torna legível */
.seg-cab h2,.pan-tela h3,.pan-lado h3,.passo,.selo,.menu .grupo,
.marca small,.bhg-marca b{font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;line-height:1.3}
.marca b{font-size:16px;letter-spacing:.2em;font-weight:640}

.menu label{font-size:var(--t-apoio);padding:10px 13px}
.pilulas span,.pil,.tag{font-size:var(--t-miudo);line-height:1.4}
.pe,.and-dias,.reg-marcas,.bs-linha small{font-size:var(--t-miudo)}
button,input,select,textarea,label{font-size:15.5px;line-height:1.4}
table{font-size:15px}

/* ── algarismo tabular onde o número se compara ─────────────────────────── */
.num,.nota,.kpi b,.nota-g,.pan-kpi b,.rq li b,.bs-linha b,.and-linha b,
.dc-linha b,.numeros b,.seg-num b,table td,.mix-leg b,.aut-leg b{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* e o número grande pede aperto ótico */
.nota,.kpi b,.nota-g,.pan-kpi b{letter-spacing:-.04em;font-weight:700}

@media print{body{font-size:12px}h1{font-size:22px}h2{font-size:15px}}

/* ══ O QUESTIONÁRIO: texto e alvo de clique maiores ══════════════════════
   É a tela onde se passa mais tempo, uma pergunta atrás da outra. Letra
   pequena aqui cansa, e alvo pequeno erra o clique. */
.q .txt p{font-size:17px;line-height:1.45}
.q .n{font-size:13.5px;min-width:24px}
.q .txt small{font-size:13px}
.ops > *{font-size:14.5px;min-height:46px}
.ops label,.ops button{padding:11px 9px}
.lapis{font-size:19px}
.balao svg{width:21px;height:21px}
.pular{font-size:19px}
.opcao-diag b{font-size:16.5px}
.opcao-diag small{font-size:13.5px}
.bloco-cab .passo{font-size:12.5px}
.tempo,.salvo,.voltar,.topo .quem,.rapidas span{font-size:14px}
.rapidas button{font-size:13.5px;padding:8px 14px}
label.campo{font-size:13.5px}
/* ícone dentro de botão acompanha a letra, em vez de encolher sozinho */
button svg,a.btn svg,.chip svg{width:1.2em;height:1.2em}
/* a bolinha que marca a área: maior, dá para ver a cor */
.menu label i,.legenda-inline i{width:11px;height:11px}

/* ══ A MARCA: o falcão no lugar do olho ════════════════════════════════════
   Nenhuma tela mudou de HTML. O `.olho` continua lá — aqui ele perde o
   contorno redondo e vira a silhueta do falcão, pintada por máscara. */
.marca .olho,.olho{
  border:0 !important;border-radius:0 !important;background:var(--acao);
  -webkit-mask-image:url(/falcao.png);mask-image:url(/falcao.png);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  width:38px;height:37px;flex:none}
.marca .olho i,.olho i,.olho::after{display:none !important}

/* ══ A PLAQUETA DA MARCA, no cabeçalho do hub ══════════════════════════════
   O falcão estava solto ao lado do nome, chapado numa cor só. Aqui ele vira
   PEÇA: uma chapinha com fio de contorno e luz no topo, o falcão pintado com
   degradê de metal (claro no alto, escuro embaixo — é a luz de cima que faz
   uma superfície parecer sólida) e um fio separando o símbolo do nome, que é
   como um manual de marca separa as duas partes de um logotipo.

   O mesmo desenho serve nos dois temas trocando cinco variáveis: na chapa
   preta o metal é claro, na prata ele inverte e fica escuro polido. */
/* Sem fio de luz no topo: a plaqueta mora DENTRO de outra chapa (o cabeçalho),
   e relevo em cima de relevo vira risco branco atravessado, não profundidade.
   O contorno e o degradê já dão a peça. */
.topo .marca{padding:7px 15px 7px 8px;border-radius:15px;gap:11px;
  background:linear-gradient(180deg,var(--mc-chapa-a),var(--mc-chapa-b));
  border:1px solid var(--mc-fio)}
.topo .marca .olho{width:34px;height:33px;
  background:linear-gradient(155deg,var(--mc-1),var(--mc-2) 62%,var(--mc-3));
  filter:drop-shadow(0 1px 0 var(--mc-sombra))}
.topo .marca > span:last-child{padding-left:12px;border-left:1px solid var(--mc-fio)}
.topo .marca b{color:var(--tinta);letter-spacing:.19em}
.topo .marca small{color:var(--tinta3);letter-spacing:.14em}
.entrada .olho,main.caixa .olho{width:52px;height:50px}

/* ══ OS POPUPS: vidro fosco, e só quando se acessa ═════════════════════════
   O véu desfoca o que está atrás em vez de escurecer — a carteira continua
   visível, fora de foco, e a atenção vai para a empresa aberta. */
.fundo{background:rgba(8,8,10,.62) !important;
  /* VIDRO FOSCO DE VERDADE: 44px de desfoque é maior que a altura de qualquer
     letra da tela, então o que está atrás deixa de ser legível — não fica
     "meio borrado", fica ilegível. Serve ao desenho e à LGPD na mesma medida:
     com uma empresa aberta, o resto da carteira não se lê por cima do ombro.
     !important porque o <style> de cada tela vem depois desta folha. */
  -webkit-backdrop-filter:blur(44px) saturate(125%) brightness(.82) !important;
  backdrop-filter:blur(44px) saturate(125%) brightness(.82) !important;
  animation:bh-vela .26s ease both}
.pop{border:1px solid var(--linha);
  animation:bh-sobe .34s cubic-bezier(.22,1,.36,1) both}
@keyframes bh-vela{from{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}
@keyframes bh-sobe{from{transform:translateY(18px) scale(.97)}}

/* ══ SUPERFÍCIES: no escuro quem separa é a linha, não a sombra ════════════ */
:root[data-tema="1"] .carta,:root[data-tema="1"] .emp,:root[data-tema="1"] .caixa,
:root[data-tema="1"] .topo,:root[data-tema="1"] .pop,:root[data-tema="1"] .area,
html:has(#tema-1:checked) .carta,html:has(#tema-1:checked) .menu,
html:has(#tema-1:checked) .topo{
  border:1px solid var(--linha);background-color:var(--neve)}
:root[data-tema="1"] .topo,html:has(#tema-1:checked) .topo,
html:has(#tema-1:checked) .menu{background-color:rgba(60,61,63,.78);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
:root[data-tema="1"] input,:root[data-tema="1"] select,:root[data-tema="1"] textarea{
  background:var(--linho);color:var(--tinta);border-color:var(--fio)}
:root[data-tema="1"] input::placeholder,:root[data-tema="1"] textarea::placeholder{color:var(--tinta4)}
/* botão de ação: branco com texto preto, como o material impresso deles */
:root[data-tema="1"] .primario,:root[data-tema="1"] .btn-primario,
:root[data-tema="1"] button[type=submit]{background:var(--acao);color:#0A0A0C;font-weight:700}
:root[data-tema="2"] .primario,:root[data-tema="2"] .btn-primario,
:root[data-tema="2"] button[type=submit]{background:var(--acao);color:#FFFFFF;font-weight:700}
/* no claro a moldura do cabeçalho continua translúcida */
:root[data-tema="2"] .topo,html:has(#tema-2:checked) .topo{
  background-color:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}

/* ══ CARTEIRA SEM NOME (LGPD) ════════════════════════════════════════════
   O rótulo — "Indústria 02" — é informação e aparece nítido: é por ele que se
   acha a empresa na tela e é assim que se fala dela. Não há plaquinha de vidro
   nem selo de "identidade guardada": com a carteira SEMPRE sem nome, um aviso
   repetido em cada cartão vira ruído, e o que protege não é o desenho — é o
   nome que não foi enviado. */
/* O SELO do cartão: o número, grande, na cor do segmento. É a forma que o olho
   pega de longe, antes de ler. Fica na aresta esquerda do cabeçalho, alinhado
   com a faixa colorida — mesma cor, mesma coluna. Dígito pede corpo maior que
   letra para pesar igual, e numeral tabular para as colunas baterem. */
.emp .ident{display:flex;align-items:center;gap:11px;min-width:0}
.emp .mono{flex:none;width:38px;height:38px;border-radius:12px;display:grid;
  place-items:center;font-size:16.5px;font-weight:700;letter-spacing:.01em;
  font-style:normal;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--tinta2);   /* o número é texto: tinta, não o metal do segmento (3,7:1) */
  background:color-mix(in oklab,var(--seg,var(--fio)) 16%,transparent);
  border:1px solid color-mix(in oklab,var(--seg,var(--fio)) 42%,transparent)}
.emp:hover .mono{background:color-mix(in oklab,var(--seg,var(--fio)) 26%,transparent)}
/* As cores de segmento nasceram para a chapa preta: são claras de propósito.
   Sobre a prata elas viram pastel e a letra do monograma some. Mesma matiz,
   graúda de preto — a identidade do segmento fica, a leitura volta. */
:root[data-tema="2"] .emp .mono,html:has(#tema-2:checked) .emp .mono{
  color:var(--tinta2);
  background:color-mix(in oklab,var(--seg,var(--fio)) 28%,transparent);
  border-color:color-mix(in oklab,var(--seg,var(--fio)) 60%,transparent)}
.emp .ident > span{min-width:0}

/* o aviso de perfil incompleto: uma linha, discreta, acima da carteira */
.aviso-perfil{margin:0 0 16px;padding:10px 14px;border-radius:var(--r-p);
  font-size:var(--t-miudo);line-height:1.5;color:var(--tinta2);
  border:1px solid color-mix(in oklab,var(--n2) 40%,transparent);
  background:color-mix(in oklab,var(--n2) 10%,transparent)}
.aviso-perfil b{color:var(--tinta)}

/* a carteira de uma área, aberta pelo clique no ranking */
.rq li[data-area]{cursor:pointer}
.rq li[data-area]:hover{background:var(--papel-2)}
.rq li[data-area]:focus-visible{outline:2px solid var(--acao);outline-offset:-2px}
.rq-abre{list-style:none;margin:2px 0 10px;padding:12px 14px;border-radius:var(--r-m);
  background:var(--papel-2);border:1px solid var(--linha);cursor:default}
.rq-cab{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:var(--t-micro);
  color:var(--tinta3);margin-bottom:10px;line-height:1.5}
.rq-cab b{color:var(--tinta)}
.rq-x{margin-left:auto;border:0;background:transparent;color:var(--tinta4);cursor:pointer;
  font-size:14px;line-height:1;padding:2px 6px}
.rq-x:hover{color:var(--tinta)}
.rq-lista{display:grid;gap:5px}
.rq-emp{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:1px solid var(--linha);background:var(--carta);border-radius:var(--r-p);
  padding:8px 11px;cursor:pointer;font-size:var(--t-miudo)}
.rq-emp:hover{border-color:var(--fio-forte);transform:translateX(2px)}
.rq-emp-nome{flex:1;color:var(--tinta);font-weight:560}
.rq-emp b{font-size:var(--t-apoio);font-variant-numeric:tabular-nums}
.rq-dif{color:var(--tinta4);min-width:44px;text-align:right;font-variant-numeric:tabular-nums}

/* o cartão do motor de padrões, no panorama */
.padroes{border:1px dashed var(--linha-forte);border-radius:var(--r-m);
  padding:14px 16px;margin:0 0 16px;background:color-mix(in oklab,var(--papel-2) 60%,transparent)}
.padroes.ligado{border-style:solid;border-color:var(--fio-forte);background:var(--linho)}
.padroes h3{margin:0 0 6px;display:flex;align-items:center;gap:9px}
.padroes .dica{margin:6px 0 0}

/* a carteira em blocos por segmento */
.seg{margin-bottom:26px}
.seg-cab{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--linha)}
.seg-cab h2{margin:0;font-size:17px;letter-spacing:-.015em}
.seg-num{font-size:13px;color:var(--tinta3);white-space:nowrap}
.seg-num b{color:var(--tinta)}

/* ══ RODAPÉ DO GRUPO ══════════════════════════════════════════════════════ */
.rodape-bhg{max-width:1180px;margin:44px auto 34px;padding:26px 26px 22px;
  border-top:1px solid var(--linha);color:var(--tinta3);font-size:13px}
.bhg-topo{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bhg-marca{display:flex;align-items:center;gap:12px}
.bhg-marca .olho{width:34px;height:33px;flex:none;background:var(--tinta2);
  -webkit-mask:url(/falcao.png) center/contain no-repeat;mask:url(/falcao.png) center/contain no-repeat}
.bhg-marca b{display:block;font-size:13.5px;letter-spacing:.17em;color:var(--tinta);font-weight:700}
.bhg-marca small{font-size:11.5px;letter-spacing:.06em}
.bhg-num{display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px}
.bhg-num b{color:var(--tinta);font-weight:700;font-size:14.5px;margin-right:4px}
/* As cinco casas do grupo, com o logo de cada uma. O desenho é pintado por
   MÁSCARA: um só arquivo por marca, e a cor vem do tema — assim o mesmo logo
   serve na chapa preta e na prata sem dois jogos de arquivo, e nenhum deles
   chega com um retângulo branco em volta. */
/* Só as marcas, alinhadas pela base e separadas por ar. Sem moldura: plaquinha
   em volta de logo é moldura em cima de marca, e o rodapé de um grupo mostra
   as casas, não caixinhas. O espaço faz o trabalho que a borda fazia. */
.bhg-marcas{display:flex;gap:clamp(34px,5vw,72px);flex-wrap:wrap;margin:30px 0 26px;
  align-items:center}
/* Cada marca abre o site da casa, em outra aba — daqui ninguém quer perder a
   carteira de vista. O alvo de clique é a âncora e vai um pouco além do
   desenho: mira-se o logo, não o pixel. `rel` fecha a janela que `target`
   abriria para a página de destino. */
.bhg-marcas a{display:block;line-height:0;padding:6px;margin:-6px;border-radius:12px;
  transition:transform .16s ease,filter .16s ease}
.bhg-marcas a:hover{transform:translateY(-2px);filter:brightness(1.18)}
.bhg-marcas a:active{transform:translateY(0)}
.bhg-marcas a:focus-visible{outline:2px solid var(--m,var(--tinta2));outline-offset:2px}
.bhg-marcas .logo-m{display:block;flex:none;width:var(--lw);height:var(--lh);
  background:var(--m,var(--tinta2));
  -webkit-mask:var(--src) left center/contain no-repeat;
  mask:var(--src) left center/contain no-repeat}
.bhg-pe{margin:0;font-size:var(--t-apoio);line-height:1.6}
.bhg-pe b{color:var(--tinta);font-weight:600;letter-spacing:-.01em}

@media print{.rodape-bhg{display:none}}

/* ══ O SELETOR: duas bolinhas, dentro do cabeçalho ════════════════════════
   O flutuante POUSA sobre a moldura e quem recua é o conteúdo (padding).
   Encolher a moldura cortava o cabeçalho em dois — já foi tentado. */
.temas{position:fixed;top:var(--temas-y,16px);right:var(--temas-x,16px);z-index:60;display:flex;gap:10px;
  align-items:center;padding:8px 12px;border-radius:999px;background:var(--neve);
  border:1px solid var(--linha);box-shadow:var(--sombra-1)}
.topo .dentro,.topo .linha1{position:relative}
.topo .temas{position:absolute;top:50%;right:var(--temas-dentro,20px);left:auto;bottom:auto;
  transform:translateY(-50%);z-index:6}
:root{--reserva-temas:86px;--temas-dentro:20px}

.temas label,.temas button{width:15px;height:15px;min-width:0;padding:0;border-radius:50%;
  cursor:pointer;border:1px solid var(--fio-forte);box-shadow:none;
  transition:transform .22s cubic-bezier(.22,1,.36,1)}
.temas label:hover,.temas button:hover{transform:scale(1.2)}
.temas .t1{background:linear-gradient(135deg,#3A3C42,#08080A)}
.temas .t2{background:linear-gradient(135deg,#FFFFFF,#C6C9CF)}
.temas .t3{display:none}
.temas .on,
html:has(#tema-1:checked) .temas .t1,
html:has(#tema-2:checked) .temas .t2{transform:scale(1.14);
  box-shadow:0 0 0 3px var(--neve),0 0 0 4.5px var(--fio-forte)}

@media (prefers-reduced-motion:reduce){:root[data-tema] *{animation:none !important}}
@media (max-width:720px){
  .topo .dentro,.topo .linha1{flex-wrap:wrap}
  .topo .temas{top:12px;right:10px;transform:none}
}
/* CELULAR, carteira (auditoria 14/10/2026): o cabeçalho ocupava 68% da tela
   e o primeiro cartão nascia a 555px. Nome e cargo saem (o "sair" fica), a
   busca desce para a linha inteira de baixo, e o aperto é o de app. */
@media (max-width:720px){
  .topo{margin:10px}
  .topo .dentro{padding:0 14px}
  .topo .linha1{gap:10px;padding:12px 0}
  .topo .quem .pess{display:none}
  .topo .busca{order:9;flex:1 1 100%;max-width:none;margin:0}
  .aviso-perfil{font-size:12px;padding:8px 12px}
}
@media print{.temas{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   REPAGINADA — o que fazia parecer "software antigo"

   Diagnóstico, item por item, e o que mudou:

   · borda de 1px sólida em tudo   → fio de sombra (hairline) + elevação real
   · cantos pequenos e desiguais    → um raio só, generoso, em toda superfície
   · aperto: tudo colado            → respiro; o vazio é parte do desenho
   · tipos quase do mesmo tamanho   → hierarquia forte: a nota manda, o resto apoia
   · superfície chapada             → luz no topo da placa, como aço de verdade
   · movimento seco                 → uma curva só, elevação que responde ao gesto

   Nada disso troca conteúdo de lugar: é a mesma tela, com o desenho refeito.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --r-card:20px;--r-chip:12px;
  --fio-luz:0 0 0 1px rgba(255,255,255,.07);
  --elev-1:0 1px 2px rgba(0,0,0,.28),0 8px 24px -12px rgba(0,0,0,.55);
  --elev-2:0 2px 6px rgba(0,0,0,.34),0 24px 54px -18px rgba(0,0,0,.7);
  --curva:cubic-bezier(.22,1,.36,1);
}
:root[data-tema="2"],html:has(#tema-2:checked){
  --fio-luz:0 0 0 1px rgba(12,13,16,.10);
  --elev-1:0 1px 2px rgba(12,13,16,.07),0 10px 26px -12px rgba(12,13,16,.22);
  --elev-2:0 2px 8px rgba(12,13,16,.09),0 28px 60px -20px rgba(12,13,16,.32);
}

/* ── superfícies: fio de sombra no lugar da borda ────────────────────────── */
/* Translúcidas: a chapa de aço deixa o falcão do fundo aparecer por trás.
   78% de opacidade com desfoque é o ponto onde a marca se vê e o texto ainda
   tem o mesmo contraste — medido, não achado. */
.carta,.emp,.pop,.caixa,.topo,.area,.caixa-grupo,.resumo-emp,.menu{
  border:0 !important;border-radius:var(--r-card);
  /* !important porque o <style> de cada tela vem depois desta folha e fixa
     background:var(--neve) — sem isto a carta continua opaca */
  background-color:color-mix(in oklab,var(--neve) var(--vidro,76%),transparent) !important;
  -webkit-backdrop-filter:blur(22px) saturate(125%);backdrop-filter:blur(22px) saturate(125%);
  box-shadow:var(--fio-luz),var(--elev-1),inset 0 1px 0 rgba(255,255,255,.055)}
/* as pílulas menores ficam mais leves ainda */
.numeros span,.pilulas span,.pil,.selo,.chip,.seg-num,.pan-kpi,.pilseg{
  background-color:color-mix(in oklab,var(--linho) 58%,transparent) !important}
.carta{padding:22px 24px}
/* `align-content:start` porque a grade estica o cartão até a altura do vizinho
   mais alto, e um grid com linhas automáticas REPARTE essa sobra entre as
   linhas: o medidor de 6px virava uma barra de 120px e parecia um erro. A sobra
   agora fica embaixo, onde ninguém a lê como conteúdo. */
.emp{padding:14px 17px !important;gap:9px !important;align-content:start;
  transition:transform .28s var(--curva),box-shadow .28s var(--curva)}
.emp:hover{transform:translateY(-4px);
  box-shadow:var(--fio-luz),var(--elev-2),inset 0 1px 0 rgba(255,255,255,.08)}
.emp:active{transform:translateY(-1px)}

/* ── hierarquia: a nota manda na leitura do cartão ───────────────────────── */
.emp b{font-size:17px !important;font-weight:600 !important;letter-spacing:-.012em}
.emp .nota{font-size:38px !important;letter-spacing:-.045em !important;font-weight:700}
.emp small{font-size:12.5px !important}
/* com o apelido em pílula, o segmento escorregava para o lado dele; ele é
   informação de apoio e pertence à linha de baixo */
.emp .cab small{display:block;margin-top:7px;line-height:1.35}
.emp .pe{font-size:12.5px !important;padding-top:2px}
.emp .trilha{height:6px !important;background:var(--papel-2)}
/* A grade do HUB — e SÓ a dele. O painel usa a mesma classe com um modificador
   (.g2, .g3) para dividir em duas ou três colunas fixas; um `.grade` com
   !important atropelava esse layout e espremia o medidor em 308px dentro de uma
   fileira de 1610px. Era isso que estava "desentralizado". */
.grade:not(.g2):not(.g3):not(.g4):not(.g2-teia){
  grid-template-columns:repeat(auto-fill,minmax(304px,1fr));gap:18px}

/* ── fita de segmentos: a navegação da carteira ───────────────────────────── */
.fita-seg{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;margin:18px 0 6px;
  scrollbar-width:thin;scroll-snap-type:x proximate}
.fita-seg::-webkit-scrollbar{height:6px}
.fita-seg::-webkit-scrollbar-thumb{background:var(--linha);border-radius:99px}
.pilseg{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;flex:none;
  padding:11px 18px;border-radius:999px;background:var(--linho);box-shadow:var(--fio-luz);
  color:var(--tinta2);font-size:14.5px;font-weight:600;cursor:pointer;scroll-snap-align:start;
  transition:transform .2s var(--curva),box-shadow .2s var(--curva)}
.pilseg b{font-size:13px;font-weight:700;color:var(--tinta3);
  background:var(--papel-2);border-radius:99px;padding:2px 9px}
.pilseg:hover{transform:translateY(-2px)}
.pilseg.on{color:var(--tinta);background:var(--nevoa);
  box-shadow:0 0 0 1.5px var(--seg,var(--fio-forte)),var(--elev-1)}
.pilseg.on b{color:var(--tinta);background:color-mix(in oklab,var(--seg,var(--fio)) 30%,transparent)}
/* A média do setor, ao lado da contagem. São duas perguntas diferentes e por
   isso duas formas diferentes: a contagem mora numa chapinha (é um tamanho), a
   média vem solta depois de um traço (é uma nota). Se as duas fossem iguais
   ninguém saberia qual é qual. */
.pilseg em{font-style:normal;font-size:var(--t-miudo);font-weight:700;color:var(--tinta2);
  font-variant-numeric:tabular-nums;padding-left:9px;margin-left:2px;
  border-left:1px solid var(--linha)}
.pilseg.on em{color:var(--tinta)}

/* ── régua da carteira: uma bolinha por empresa ───────────────────────────── */
.reg-cart{margin:6px 0 2px}
.reg-pista{position:relative;height:16px;border-radius:99px;background:var(--papel-2);
  box-shadow:var(--fio-luz)}
.reg-pista i{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:50%;box-shadow:0 0 0 2px var(--neve)}
.reg-pista u{position:absolute;top:-5px;bottom:-5px;width:2.5px;margin-left:-1.25px;
  background:var(--tinta);border-radius:2px}
.reg-marcas{display:flex;justify-content:space-between;font-size:12px;color:var(--tinta4);
  margin-top:7px}

/* ── a carteira na escada ─────────────────────────────────────────────────── */
.deg-cart{display:grid;gap:9px}
.dc-linha{display:grid;grid-template-columns:104px minmax(0,1fr) 28px;align-items:center;gap:12px}
.dc-rot{font-size:13.5px;color:var(--tinta3);white-space:nowrap}
.dc-trilha{height:10px;border-radius:99px;background:var(--papel-2);overflow:hidden;display:block}
.dc-trilha i{display:block;height:100%;border-radius:99px}
.dc-linha b{font-size:15px;text-align:right}

/* ── rosca da automação da carteira ──────────────────────────────────────── */
.mix-cx{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mix-cx svg{flex:none}
.mix-leg{list-style:none;margin:0;padding:0;display:grid;gap:8px;flex:1;min-width:150px}
.mix-leg li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--tinta2)}
.mix-leg i{width:11px;height:11px;border-radius:3px;flex:none}
.mix-leg span{flex:1}
.mix-leg b{color:var(--tinta);font-size:15px}

/* ── halteres: a folga entre a média e a melhor, vista em vez de lida ─────── */
.halt{display:grid;gap:12px}
.ht-linha{display:grid;grid-template-columns:132px minmax(0,1fr) 48px;align-items:center;gap:12px}
.ht-rot{font-size:13.5px;color:var(--tinta2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.ht-pista{position:relative;height:14px;border-radius:99px;background:var(--papel-2);display:block}
.ht-barra{position:absolute;top:50%;height:5px;margin-top:-2.5px;border-radius:99px;
  background:linear-gradient(90deg,var(--tinta4),var(--acao))}
.ht-p{position:absolute;top:50%;border-radius:50%}
.ht-media{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--tinta4);
  box-shadow:0 0 0 2px var(--neve)}
.ht-melhor{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;background:var(--acao);
  box-shadow:0 0 0 2px var(--neve)}
.ht-linha b{font-size:14.5px;text-align:right;color:var(--acao)}
@media (max-width:640px){.ht-linha{grid-template-columns:100px minmax(0,1fr) 42px}}

/* ── PANORAMA: tela própria ────────────────────────────────────────────────
   O Landim pediu para não deixar tudo numa tela só, e ele estava certo: a
   carteira e a análise respondem perguntas de momentos diferentes. Separadas,
   cada uma fica do tamanho que precisa e nenhuma disputa espaço com a outra.
   A identidade é a mesma — mesma chapa de aço, mesmo falcão atrás, mesmas
   pílulas de tema. Muda o conteúdo, não a casa. */
.pan-tela{max-width:1560px;margin:0 auto;padding:26px}
.pan-tela .cabeca-hub{align-items:flex-start;gap:30px;margin-bottom:20px}
.pan-frase{margin:8px 0 0;font-size:17.5px;line-height:1.5;color:var(--tinta2);max-width:46ch}
.pan-frase b{color:var(--tinta);font-weight:700}
.pan-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-width:520px}
.pan-kpi{display:flex;flex-direction:column;gap:1px;padding:15px 18px;border-radius:16px;
  box-shadow:var(--fio-luz)}
.pan-kpi b{font-size:28px;font-weight:700;letter-spacing:-.04em;line-height:1.1;color:var(--tinta)}
.pan-kpi span{font-size:12.5px;color:var(--tinta3);line-height:1.3}
.pan-kpi:first-child b{color:var(--acao)}

.pan-par{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:18px;
  margin-bottom:18px;align-items:start}
.pan-par-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pan-tela .carta{margin:0}
.pan-tela h3{margin:0 0 4px;font-size:14px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta3)}
.pan-tela .dica{margin:0 0 16px;font-size:13.5px;line-height:1.5}
.pan-leg{list-style:none;margin:14px 0 0;padding:0;display:flex;gap:22px;flex-wrap:wrap;
  justify-content:center;font-size:13.5px;color:var(--tinta3)}
.pan-leg li{display:flex;align-items:center;gap:8px}
.pan-leg i{width:20px;height:3px;border-radius:2px;flex:none}
.pan-leg .l-media{background:var(--acao);height:4px}
.pan-leg .l-melhor{background:repeating-linear-gradient(90deg,var(--tinta4) 0 5px,transparent 5px 9px)}
.pan-leg .l-seg{background:repeating-linear-gradient(90deg,var(--seg) 0 3px,transparent 3px 6px)}
.pan-nota{margin:16px 0 0;font-size:14px;color:var(--tinta2)}
.pan-nota b{color:var(--tinta)}

/* as duas abas do cabeçalho */
.abas-hub{display:flex;gap:4px;padding:4px;border-radius:999px;
  background:color-mix(in oklab,var(--linho) 58%,transparent);box-shadow:var(--fio-luz)}
.aba-hub{border:0;background:transparent;color:var(--tinta3);font-size:14px;font-weight:600;
  padding:8px 18px;border-radius:999px;cursor:pointer;white-space:nowrap}
.aba-hub.on{background:var(--nevoa);color:var(--tinta);box-shadow:var(--fio-luz)}

@media (max-width:1200px){
  .pan-par,.pan-par-2{grid-template-columns:1fr}
  .pan-kpis{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── automação da carteira ────────────────────────────────────────────────── */
.aut-barra{display:flex;height:18px;border-radius:99px;overflow:hidden;box-shadow:var(--fio-luz)}
.aut-barra i{display:block;height:100%}
.aut-leg{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 20px;
  font-size:13.5px;color:var(--tinta3)}
.aut-leg li{display:flex;align-items:center;gap:8px}
.aut-leg i{width:11px;height:11px;border-radius:3px;flex:none}
.aut-leg b{color:var(--tinta)}

/* ── em andamento ─────────────────────────────────────────────────────────── */
.and{display:grid;gap:10px}
.and-linha{display:grid;grid-template-columns:minmax(0,1fr) 44px 68px;align-items:center;gap:12px}
.and-trilha{height:10px;border-radius:99px;background:var(--papel-2);overflow:hidden;display:block}
.and-trilha i{display:block;height:100%;border-radius:99px;background:var(--tinta4)}
.and-linha b{font-size:14px;text-align:right;color:var(--tinta2)}
.and-dias{font-size:13px;color:var(--tinta4);text-align:right;white-space:nowrap}
.and-linha.morno .and-trilha i{background:var(--n2)}
.and-linha.morno .and-dias{color:var(--n2)}
.and-linha.quente .and-trilha i{background:var(--n1)}
.and-linha.quente .and-dias{color:var(--n1);font-weight:700}

/* ── ranking das áreas: o que o radar não sabe fazer ─────────────────────── */
/* duas colunas: dezenove linhas numa só faziam o painel crescer 180px e a
   carteira sumia abaixo da dobra */
.rq{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.rq li{display:grid;grid-template-columns:132px minmax(0,1fr) 44px 20px;align-items:center;
  gap:8px;padding:1px 5px;border-radius:7px;cursor:default;
  transition:background .15s ease}
.rq li:hover{background:color-mix(in oklab,var(--nevoa) 70%,transparent)}
.rq-nome{font-size:13.5px;color:var(--tinta2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.rq-pista{position:relative;height:9px;border-radius:99px;background:var(--papel-2);display:block}
.rq-media{position:absolute;left:0;top:0;height:100%;border-radius:99px}
.rq-pista u{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;
  background:var(--tinta3);border-radius:2px}
.rq li b{font-size:14px;text-align:right}
.rq-ab{font-size:11px;font-weight:700;color:var(--n1);text-align:right}
/* o ponto do radar acende quando o olho passa pela área na lista */
.pt-eixo{transition:r .15s ease,fill .15s ease}
.eixo-on{r:7;fill:var(--n1)}

/* ── a divisão por tipo de empresa, agora com cor ────────────────────────── */
/* a aresta do cartão diz o TIPO; o número diz a NOTA. Dois códigos, dois lugares */
.emp .faixa{background:var(--seg,var(--c)) !important;width:5px !important;
  border-radius:0 3px 3px 0}
.emp{position:relative}
/* um sopro da cor do segmento no canto, para o bloco ler como família */
.emp::before{content:"";position:absolute;left:0;top:0;width:190px;height:100%;
  background:linear-gradient(90deg,color-mix(in oklab,var(--seg,transparent) 13%,transparent),transparent);
  pointer-events:none;border-radius:var(--r-card) 0 0 var(--r-card)}
.pt-seg{display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--seg,var(--tinta3));margin-right:9px;vertical-align:middle;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--seg,transparent) 22%,transparent)}
.seg-cab h2{display:flex;align-items:center}

.seg{margin-bottom:34px}
.seg-cab{align-items:center;border:0;padding:0;margin:0 0 14px;gap:16px}
.seg-cab h2{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta3);white-space:nowrap}
/* a linha vive ENTRE o rótulo e a contagem, não embaixo de tudo */
.seg-cab::after{content:"";flex:1;height:1px;background:var(--linha);opacity:.5;order:1}
.seg-cab .seg-num{order:2;font-size:12.5px;background:var(--linho);box-shadow:var(--fio-luz);
  border-radius:999px;padding:6px 14px}

/* ── etiquetas e campos no mesmo vocabulário ─────────────────────────────── */
.numeros span,.pilulas span,.pil,.selo,.chip,.seg-num{border:0 !important;
  border-radius:999px;box-shadow:var(--fio-luz)}
input,select,textarea{border:0 !important;border-radius:var(--r-chip);
  box-shadow:var(--fio-luz);background:var(--linho)}
input:focus,select:focus,textarea:focus{outline:none;
  box-shadow:0 0 0 1px var(--acao),0 0 0 4px color-mix(in oklab,var(--acao) 22%,transparent)}
button{border-radius:var(--r-chip)}

/* a legenda da rosca é metade da informação daquela carta: merece o mesmo
   corpo do resto, não letra de rodapé */
.legenda{font-size:15px}
.legenda b,.legenda .num{font-size:16px}
.legenda-inline{font-size:13.5px}

/* ── o popup: mais ar, mesmo vocabulário ─────────────────────────────────── */
.pop{padding:30px 32px 26px !important;border-radius:26px !important;
  box-shadow:var(--fio-luz),var(--sombra-pop),inset 0 1px 0 rgba(255,255,255,.07) !important}
.pop h2{font-size:23px !important;letter-spacing:-.022em}
.pop .nota-g{font-size:50px !important;letter-spacing:-.05em !important}

/* ── cabeçalho: menos moldura, mais presença ─────────────────────────────── */
.topo{border-radius:22px}
.cabeca-hub h1{font-size:34px;letter-spacing:-.03em}

@media (prefers-reduced-motion:reduce){.emp,.emp:hover{transition:none;transform:none}}