/* ══════════════════════════════════════════════════════════════════════════
   THE EYE — SISTEMA VISUAL v3 "OBSIDIANA" (29/10/2026)

   Carregado POR ÚLTIMO em toda tela (e embutido no painel): é a única camada
   que decide aparência. As telas guardam só o próprio layout.

   O que estava errado e o que este arquivo muda:
   · Tudo era o mesmo cinza médio (#3C3C3E): cabeçalho, cartão, botão e campo
     com o mesmo peso — o olho não tinha onde pousar. Agora a profundidade vem
     da LUZ: fundo quase preto liso, superfícies escuras e um FIO de luz na
     borda. O fio fica ≥ 22 de ΔL contra o fundo (o Gustavo enxerga o cartão
     pelo contorno), e o recheio pode ser discreto, como em produto premium.
   · Falcão e listras atrás dos números: a marca mora na entrada, não na mesa
     de trabalho. Nas telas de trabalho o fundo é liso.
   · Letra miúda e caixa alta espaçada por toda parte: escala firme, nada
     abaixo de 12px, caixa alta só em micro-rótulo.
   · Caixa dentro de caixa: superfícies internas viram fios, não blocos.
   Uma cor de AÇÃO (o branco, no escuro); cor viva só no DADO (os 5 níveis).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── tokens: ESCURO (padrão) ────────────────────────────────────────────── */
:root[data-tema="1"], html:has(#tema-1:checked), :root:not([data-tema]){
  /* superfícies — L*: fundo 3,5 · cartão 6,5 · campo 10 · seleção 15 */
  --app:#0B0B0D; --sup:#141416; --sup-2:#1C1C1F; --sup-3:#26262A;
  /* o fio que desenha cada superfície: ΔL 22,3 contra o fundo */
  --fio-v3:#3D3D42; --fio-interno:#2A2A2E;
  --tx:#F5F5F7; --tx-2:#D1D1D6; --tx-3:#A1A1A6; --tx-4:#8E8E93;
  --acao-v3:#F5F5F7; --acao-v3-tinta:#0B0B0D;
  --brilho:inset 0 1px 0 rgba(255,255,255,.045);
  --elev:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
  --elev-pop:0 40px 120px -20px rgba(0,0,0,.85);
  --veu:rgba(0,0,0,.62);
  /* os nomes antigos que as telas usam passam a apontar para o sistema */
  --papel:var(--app); --carta:var(--sup); --neve:var(--sup); --porcelana:var(--sup);
  --marfim:var(--sup); --carta-topo:var(--sup-2); --linho:var(--sup-2); --gesso:var(--sup-2);
  --papel-2:var(--sup-2); --nevoa:var(--sup-3); --bruma:var(--sup-3);
  --fio:var(--fio-v3); --linha:var(--fio-interno); --linha-forte:var(--fio-v3); --fio-forte:#55555B;
  --tinta:var(--tx); --tinta2:var(--tx-2); --tinta3:var(--tx-3); --tinta4:var(--tx-4);
  --acao:var(--acao-v3); --acao-tinta:var(--acao-v3-tinta); --acao-fraca:var(--sup-3);
  --menu:var(--sup); --menu-on:var(--sup-3); --menu-hover:var(--sup-2); --menu-on-tinta:var(--tx);
  --trilha:#2C2C30; --sombra-1:none; --sombra-2:var(--elev); --sombra-pop:var(--elev-pop);
  --luz:var(--brilho); --vidro:100%;
  --salvia:var(--sup-2); --areia:#2A2620; --ceu:var(--sup-2); --rosa:#2A2022;
  --serie-cliente:#F5F5F7; --serie-media:#8E8E93; --serie-melhor:#55555B;
  --m-airbpo:var(--tx-3); --m-aircount:var(--tx-3); --m-heynow:var(--tx-3);
  --m-heyrh:var(--tx-3); --m-imcorptec:var(--tx-3);
  color-scheme:dark;
}
/* ── tokens: CLARO ──────────────────────────────────────────────────────── */
:root[data-tema="2"], html:has(#tema-2:checked){
  --app:#F2F2F4; --sup:#FFFFFF; --sup-2:#F5F5F7; --sup-3:#E8E8ED;
  --fio-v3:#B3B3B9; --fio-interno:#E2E2E7;           /* fio: ΔL 22,2 contra o fundo */
  --tx:#1D1D1F; --tx-2:#3A3A3C; --tx-3:#5A5A5F; --tx-4:#6E6E73;
  --acao-v3:#1D1D1F; --acao-v3-tinta:#FFFFFF;
  --brilho:inset 0 1px 0 rgba(255,255,255,.9);
  --elev:0 1px 2px rgba(0,0,0,.05), 0 12px 32px -18px rgba(0,0,0,.18);
  --elev-pop:0 40px 120px -20px rgba(0,0,0,.35);
  --veu:rgba(20,20,24,.35);
  --papel:var(--app); --carta:var(--sup); --neve:var(--sup); --porcelana:var(--sup);
  --marfim:var(--sup); --carta-topo:var(--sup); --linho:var(--sup-2); --gesso:var(--sup-2);
  --papel-2:var(--sup-2); --nevoa:var(--sup-3); --bruma:var(--sup-3);
  --fio:var(--fio-v3); --linha:var(--fio-interno); --linha-forte:var(--fio-v3); --fio-forte:#8E8E93;
  --tinta:var(--tx); --tinta2:var(--tx-2); --tinta3:var(--tx-3); --tinta4:var(--tx-4);
  --acao:var(--acao-v3); --acao-tinta:var(--acao-v3-tinta); --acao-fraca:var(--sup-3);
  --menu:var(--sup); --menu-on:var(--sup-3); --menu-hover:var(--sup-2); --menu-on-tinta:var(--tx);
  --trilha:#E5E5EA; --sombra-1:none; --sombra-2:var(--elev); --sombra-pop:var(--elev-pop);
  --luz:var(--brilho); --vidro:100%;
  --salvia:var(--sup-2); --areia:#F6F1E7; --ceu:var(--sup-2); --rosa:#F8EEEE;
  --serie-cliente:#1D1D1F; --serie-media:#8E8E93; --serie-melhor:#C7C7CC;
  --m-airbpo:var(--tx-3); --m-aircount:var(--tx-3); --m-heynow:var(--tx-3);
  --m-heyrh:var(--tx-3); --m-imcorptec:var(--tx-3);
  color-scheme:light;
}

/* ── escala e tipografia ────────────────────────────────────────────────── */
:root{
  --fonte:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --fonte-titulo:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  /* 7 tamanhos, nada abaixo de 12 */
  --t-12:12px; --t-13:13px; --t-15:15px; --t-17:17px; --t-22:22px; --t-30:30px; --t-48:48px;
  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:22px;
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px;
  --largura:1200px;
  --mola:cubic-bezier(.22,1,.36,1);
}
html{background:var(--app) !important}
body{font-family:var(--fonte);color:var(--tx);background:transparent;
  font-size:var(--t-15);line-height:1.5;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--fonte-titulo);color:var(--tx);letter-spacing:-.022em}
h1{font-size:var(--t-30);font-weight:650;line-height:1.15}
h2{font-size:var(--t-17);font-weight:600;line-height:1.3}
h3{font-size:var(--t-15);font-weight:600}
.num,b.num,.nota,.kpi .v,.nota-g{font-variant-numeric:tabular-nums}
small,.dica,.sub{color:var(--tx-3)}
a{color:inherit}
::selection{background:color-mix(in oklab,var(--tx) 22%,transparent)}
:focus-visible{outline:2px solid color-mix(in oklab,var(--tx) 70%,transparent);outline-offset:2px}

/* ── a marca d'água sai das telas de trabalho (fica só na entrada) ───────── */
/* FUNDO (29/10/2026): o falcão do Black Hawk volta, mas como ASSINATURA —
   grande, no canto de baixo, cortado pela borda, em degradê de metal que some
   para dentro. Os cartões são opacos: o dado nunca fica em cima dele. A luz
   do canto oposto dá profundidade sem mais nenhum enfeite. */
html:not(.pg-entrar){background:
  radial-gradient(1100px 640px at 8% -10%, var(--halo-1), transparent 70%),
  radial-gradient(900px 760px at 100% 112%, var(--halo-2), transparent 72%),
  var(--app) !important;background-attachment:fixed !important}
html:not(.pg-entrar)::after{display:none !important}
html:not(.pg-entrar)::before{display:block !important;content:"";position:fixed;z-index:-1;pointer-events:none;
  inset:auto !important;left:50% !important;top:54% !important;translate:-50% -50%;
  width:min(84vh,900px);height:min(84vh,900px);
  -webkit-mask:url(/falcao.png) center/contain no-repeat !important;mask:url(/falcao.png) center/contain no-repeat !important;
  /* duas camadas: o reflexo de metal (passa uma vez ao abrir) e o degradê do falcão */
  background:linear-gradient(105deg, transparent 42%, var(--reflexo) 50%, transparent 58%) 140% 0/300% 100% no-repeat,
    linear-gradient(150deg, var(--falcao-a) 10%, var(--falcao-b) 75%) !important;
  opacity:1 !important;animation:paira 1.8s var(--mola) both, reflexo 2.6s .9s ease-in-out both}
@keyframes reflexo{to{background-position:-40% 0, 0 0}}
@keyframes paira{from{opacity:0;transform:translateY(28px) scale(.985)}}
:root[data-tema="1"], html:has(#tema-1:checked), :root:not([data-tema]){
  --halo-1:rgba(255,255,255,.055);--halo-2:rgba(255,255,255,.03);
  --falcao-a:rgba(255,255,255,.15);--falcao-b:rgba(255,255,255,.03);--reflexo:rgba(255,255,255,.10);
  /* o grupo em cores: cada marca com a sua (lá embaixo, no rodapé) */
  --m-airbpo:#F062B8;--m-aircount:#8AA8FF;--m-heynow:#F7C948;--m-heyrh:#6ADA78;--m-imcorptec:#4BE3F2}
:root[data-tema="2"], html:has(#tema-2:checked){
  --halo-1:rgba(255,255,255,.85);--halo-2:rgba(0,0,0,.035);
  --falcao-a:rgba(0,0,0,.09);--falcao-b:rgba(0,0,0,.02);--reflexo:rgba(255,255,255,.55);
  --m-airbpo:#B80B72;--m-aircount:#1B3FBE;--m-heynow:#9A6600;--m-heyrh:#0C6F1F;--m-imcorptec:#07768A}

/* ── superfícies: recheio discreto, FIO de luz, nada de vidro ──────────── */
.carta, .emp, .pop, .seg-cab .seg-num, .area, .caixa, .q, .bloco-area,
.pan-kpi, .peso, .gaveta, .lead{
  background:var(--sup) !important;
  border:1px solid var(--fio-v3) !important;
  box-shadow:var(--brilho), var(--elev) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.carta, .emp, .pop, .pan-kpi, .lead, .area{border-radius:var(--r-3) !important}

/* ── botões: um primário (luz), o resto é fio ───────────────────────────── */
button, .botao, a.botao{font-family:var(--fonte);font-size:var(--t-13);font-weight:550;
  border-radius:var(--r-2);transition:background .15s, border-color .15s, transform .15s var(--mola)}
.primario, button.primario, a.primario, button[type=submit]{
  background:var(--acao-v3) !important;color:var(--acao-v3-tinta) !important;
  border:1px solid var(--acao-v3) !important;box-shadow:none !important;font-weight:600}
.primario:hover, button[type=submit]:hover{filter:brightness(.92)}
button:not(.primario):not([type=submit]):not(.op):not(.aba-hub):not(.emp):not(.pilseg):not(.lapis):not(.pular):not(.balao):not(.fechar),
a.botao:not(.primario){
  background:transparent;border:1px solid var(--fio-v3);color:var(--tx-2);box-shadow:none}
button:not(.primario):not([type=submit]):not(.op):not(.aba-hub):not(.emp):not(.pilseg):hover,
a.botao:not(.primario):hover{background:var(--sup-2);color:var(--tx)}

/* ── campos ─────────────────────────────────────────────────────────────── */
input, select, textarea{font-family:var(--fonte);font-size:var(--t-15);color:var(--tx);
  background:var(--sup-2) !important;border:1px solid var(--fio-v3) !important;
  border-radius:var(--r-2) !important;box-shadow:none !important}
input::placeholder, textarea::placeholder{color:var(--tx-4)}
input:focus, select:focus, textarea:focus{border-color:var(--tx-3) !important;
  outline:3px solid color-mix(in oklab,var(--tx) 14%,transparent);outline-offset:0}

/* ── pílulas, selos, micro-rótulos ──────────────────────────────────────── */
.selo{font-size:var(--t-12) !important;letter-spacing:.02em !important;text-transform:none !important;
  font-weight:550 !important;padding:2px 8px;border-radius:999px;
  background:var(--sup-3) !important;color:var(--tx-2) !important;border:0 !important}
.selo.ok{color:var(--n5) !important;background:color-mix(in oklab,var(--n5) 14%,transparent) !important}
.selo.meio{color:var(--n2) !important;background:color-mix(in oklab,var(--n2) 14%,transparent) !important}

/* ── pop-up: véu escuro, sem desfoque pesado ───────────────────────────── */
.fundo{background:var(--veu) !important;-webkit-backdrop-filter:blur(6px) !important;
  backdrop-filter:blur(6px) !important}
.pop{box-shadow:var(--brilho), var(--elev-pop) !important}

/* ── seletor de tema: discreto ──────────────────────────────────────────── */
.temas{background:transparent !important;border:1px solid var(--fio-interno) !important;
  box-shadow:none !important}

/* ══ CARTEIRA ═════════════════════════════════════════════════════════════
   Cabeçalho = barra fina de uma linha, com o MESMO alinhamento do conteúdo
   (antes: caixote de 98 px com 7 coisas em estilos diferentes). */
.topo.v3{position:sticky;top:0;z-index:20;margin:0 !important;border-radius:0 !important;
  background:color-mix(in oklab,var(--app) 82%,transparent) !important;
  -webkit-backdrop-filter:saturate(160%) blur(18px) !important;backdrop-filter:saturate(160%) blur(18px) !important;
  border:0 !important;border-bottom:1px solid var(--fio-interno) !important;box-shadow:none !important}
.topo.v3 .dentro, body > main, main.pan-tela, main.leads-tela{max-width:var(--largura);margin:0 auto;
  padding-left:var(--e-6);padding-right:var(--e-6)}
.topo.v3 .linha1{display:flex;align-items:center;gap:var(--e-5);height:60px;padding:0 !important}
.marca-v3{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tx);flex:none}
.marca-v3 .falcao{width:26px;height:26px;background:var(--tx);
  -webkit-mask:url(/falcao.png) center/contain no-repeat;mask:url(/falcao.png) center/contain no-repeat}
.marca-v3 b{display:block;font-size:var(--t-15);font-weight:650;letter-spacing:-.01em;line-height:1.1}
.marca-v3 small{display:block;font-size:var(--t-12);color:var(--tx-3);line-height:1.2}
.topo.v3 .abas-hub{display:flex;gap:2px;padding:3px;border-radius:var(--r-2);background:var(--sup-2) !important;
  border:1px solid var(--fio-interno);box-shadow:none !important}
.topo.v3 .aba-hub{border:0;background:transparent;color:var(--tx-3);font-size:var(--t-13);font-weight:550;
  padding:6px 14px;border-radius:9px;cursor:pointer}
.topo.v3 .aba-hub:hover{color:var(--tx)}
.topo.v3 .aba-hub.on{background:var(--sup-3) !important;color:var(--tx);box-shadow:var(--brilho) !important}
.acoes-topo{margin-left:auto;display:flex;align-items:center;gap:var(--e-3)}
.acoes-topo .busca{margin:0;max-width:none}
.acoes-topo .busca input{width:220px;height:34px;padding:0 12px;font-size:var(--t-13)}
.acoes-topo .novo-cliente{height:34px;padding:0 14px}
.topo.v3 .quem{display:flex;align-items:center;gap:var(--e-2);margin:0}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:var(--t-12);
  font-weight:650;color:var(--tx);background:var(--sup-3);border:1px solid var(--fio-v3);cursor:default}
.topo.v3 .sair{height:32px;padding:0 10px;border:0 !important;color:var(--tx-3) !important;background:transparent !important}
.topo.v3 .sair:hover{color:var(--tx) !important}
.acoes-topo .temas{position:static !important;transform:none !important;order:-1;padding:4px 6px}

/* filtros de segmento: chips discretos, não pílulas gordas */
.fita-seg{display:flex;flex-wrap:wrap;gap:8px;margin:var(--e-6) 0 var(--e-4) !important}
.pilseg{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px !important;border-radius:999px !important;
  background:transparent !important;border:1px solid var(--fio-interno) !important;box-shadow:none !important;
  color:var(--tx-3) !important;font-size:var(--t-13) !important;font-weight:550}
.pilseg:hover{color:var(--tx) !important;border-color:var(--fio-v3) !important}
.pilseg.on{background:var(--tx) !important;color:var(--app) !important;border-color:var(--tx) !important}
.pilseg b{font-size:var(--t-12) !important;background:transparent !important;color:inherit !important;opacity:.7;padding:0 !important}
.pilseg .md{font-style:normal;font-size:var(--t-12);opacity:.7}
.pilseg .pt-seg{display:none}
.pilseg.on b, .pilseg.on em{color:inherit !important;border-color:color-mix(in oklab,var(--app) 30%,transparent) !important}

/* o aviso de perfil vira uma linha discreta, não uma faixa de alarme */
.aviso-perfil{background:transparent !important;border:0 !important;padding:0 !important;margin:0 0 var(--e-5) !important;
  color:var(--tx-3) !important;font-size:var(--t-13) !important}
.aviso-perfil b{color:var(--tx-2) !important}

/* seção por segmento: título limpo + número à direita, fio fino */
.seg{margin-bottom:var(--e-7) !important}
.seg-cab{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 var(--e-4) !important;
  padding-bottom:var(--e-3);border-bottom:1px solid var(--fio-interno)}
.seg-cab::after{display:none !important}
.seg-cab h2{font-size:var(--t-17) !important;letter-spacing:-.015em !important;text-transform:none !important;
  font-weight:600 !important;color:var(--tx) !important;display:flex;align-items:center;gap:0}
.seg-cab h2 .pt-seg{display:none}
.seg-cab .seg-num{background:transparent !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;color:var(--tx-3) !important;font-size:var(--t-13) !important}
.seg-cab .seg-num b{color:var(--tx-2)}

/* a grade ocupa a largura: cartões de verdade, não colunas finas */
/* SÓ a grade da carteira: o painel usa .grade.g2/.g3 e não pode ser atropelado */
#raiz .grade{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(270px,1fr)) !important;gap:var(--e-4) !important}

/* o CARTÃO */
.emp{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:var(--e-3);text-align:left;
  padding:var(--e-5) !important;min-height:0 !important;cursor:pointer;color:var(--tx);
  transition:border-color .2s, transform .25s var(--mola), background .2s !important}
.emp:hover{border-color:var(--fio-forte) !important;transform:translateY(-2px)}
.emp::before, .emp::after{display:none !important}
.emp .faixa{display:none !important}
.emp-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-3)}
.emp-nome{min-width:0}
.emp-nome b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:var(--t-17);font-weight:600;letter-spacing:-.015em;line-height:1.25;white-space:normal}
.emp-nome small{display:block;font-size:var(--t-13);color:var(--tx-3);margin-top:2px}
.emp-num{display:flex;align-items:baseline;gap:10px;margin-top:var(--e-2)}
.emp-num .nota{font-family:var(--fonte-titulo);font-size:var(--t-48) !important;font-weight:650 !important;
  letter-spacing:-.04em !important;line-height:1;color:var(--c,var(--tx)) !important}
.emp-num .nota.emp-sem{color:var(--tx-2) !important;font-size:var(--t-30) !important}
.emp-nivel{font-size:var(--t-15);font-weight:550;color:var(--tx-2)}
.emp .medidor::after{display:none !important}
.emp .medidor{display:block;width:100% !important;align-self:stretch;height:4px !important;min-height:4px !important;max-height:4px !important;border-radius:99px;background:var(--trilha) !important;overflow:hidden;
  margin:var(--e-1) 0 0 !important;box-shadow:none !important}
.emp .medidor i{display:block;height:100%;border-radius:99px;background:var(--c,var(--tx-3)) !important}
.emp .medidor.parcial i{background:var(--tx-4) !important}
.emp-pe{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--t-12);color:var(--tx-4);margin-top:auto}
.emp-pe > *{white-space:nowrap}
/* cor só na NOTA: o selo de estado fica em tons de cinza, para não disputar o olho */
.emp-pe .selo{background:transparent !important;border:1px solid var(--fio-interno) !important;
  color:var(--tx-3) !important;font-weight:550;box-shadow:none !important}
.emp-pe .selo.meio{color:var(--tx-2) !important;border-color:var(--fio-v3) !important}
#raiz .grade{align-items:stretch !important}
.emp.novo{align-items:center;justify-content:center;min-height:180px !important;color:var(--tx-3);
  border-style:dashed !important;background:transparent !important;box-shadow:none !important}

/* ══ FICHA (pop-up da empresa) ═════════════════════════════════════════════
   Áreas frágeis: lista ordenada com barra fina, não azulejos dourados —
   o olho compara comprimentos melhor que caixas cheias de cor. */
.pop-sub{display:block;font-size:var(--t-13);color:var(--tx-3);margin-top:4px}
.pop-rot{font-size:var(--t-12) !important;font-weight:600 !important;letter-spacing:.06em !important;
  text-transform:uppercase;color:var(--tx-4) !important;margin:var(--e-5) 0 var(--e-2) !important}
.frageis{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.frageis li{display:grid;grid-template-columns:minmax(0,1fr) 120px 44px;align-items:center;gap:var(--e-3);
  padding:8px 0;border-bottom:1px solid var(--fio-interno);font-size:var(--t-13);color:var(--tx-2)}
.frageis li:last-child{border-bottom:0}
.frageis li > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frageis .medidor{height:4px !important;min-height:4px !important;max-height:4px !important;border-radius:99px;
  background:var(--trilha) !important;overflow:hidden;box-shadow:none !important}
.frageis .medidor::after{display:none !important}
.frageis .medidor i{display:block;height:100%;background:var(--c) !important}
.frageis b{text-align:right;font-size:var(--t-15);font-weight:650;color:var(--c)}
.pop .acoes{margin-top:var(--e-5) !important}
.pop-pe{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-3);
  margin-top:var(--e-5);padding-top:var(--e-4);border-top:1px solid var(--fio-interno)}
.pop-pe:empty{display:none}
.pop-pe .acesso{flex:1;min-width:0;margin:0 !important;border:0 !important;padding:0 !important}
.pop-pe .fantasma{flex:none;height:30px;padding:0 10px;border:0 !important;background:transparent !important;
  color:var(--tx-4) !important;font-size:var(--t-13)}
.pop-pe .fantasma:hover{color:var(--tx) !important}
@media (max-width:480px){.frageis li{grid-template-columns:minmax(0,1fr) 64px 40px}}
.pop .linhas{gap:0 !important;margin:var(--e-5) 0 0 !important}
.pop .linhas .item{padding:10px 0 !important;background:transparent !important;border-radius:0 !important;
  border:0 !important;border-bottom:1px solid var(--fio-interno) !important;font-size:var(--t-13)}
.pop .linhas .item > span{color:var(--tx-3)}
.pop .linhas .item b{color:var(--tx);font-weight:600}

/* ══ PANORAMA ═════════════════════════════════════════════════════════════
   Os 4 números viram uma faixa de largura total (antes: 4 caixinhas
   espremidas na metade da tela); as duas fileiras de cartas usam as MESMAS
   colunas, para as bordas se alinharem. */
.pan-tela{padding-top:var(--e-7) !important;padding-bottom:var(--e-7) !important}
.pan-tela .cabeca-hub{display:block !important;margin-bottom:var(--e-6) !important}
.pan-tela h1{font-size:var(--t-30) !important;letter-spacing:-.025em !important;font-weight:650 !important}
.pan-frase{font-size:var(--t-15) !important;color:var(--tx-3) !important;max-width:62ch;margin-top:var(--e-2) !important}
.pan-frase b{color:var(--tx) !important}
.pan-kpis{min-width:0 !important;display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:0 !important;
  margin-top:var(--e-6);border:1px solid var(--fio-v3);border-radius:var(--r-3);background:var(--sup);overflow:hidden}
.pan-kpi{border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;
  padding:var(--e-5) var(--e-5) !important;border-left:1px solid var(--fio-interno) !important}
.pan-kpi:first-child{border-left:0 !important}
.pan-kpi b{font-size:var(--t-30) !important;font-weight:650 !important;color:var(--tx) !important}
.pan-kpi span{font-size:var(--t-13) !important;color:var(--tx-3) !important;margin-top:4px}
.pan-par, .pan-par-2{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) !important;gap:var(--e-4) !important;
  margin-top:var(--e-4) !important;align-items:start}
.pan-tela .carta{padding:var(--e-6) !important}
.pan-tela .carta h3{font-size:var(--t-15) !important;font-weight:600 !important;letter-spacing:-.01em !important;
  text-transform:none !important;color:var(--tx) !important;margin:0 0 4px !important}
.pan-tela .carta .dica{font-size:var(--t-13) !important;color:var(--tx-3) !important}
.padroes{border:0 !important;background:transparent !important;padding:0 0 var(--e-5) !important;
  margin:0 0 var(--e-5) !important;border-bottom:1px solid var(--fio-interno) !important;border-radius:0 !important}
.and-linha{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 40px 60px !important}
.pan-tela .carta svg{overflow:visible}
.and-nome{font-size:var(--t-13);color:var(--tx-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){.pan-par, .pan-par-2{grid-template-columns:1fr !important}
  .pan-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .pan-kpi:nth-child(3){border-left:0 !important}
  .pan-kpi:nth-child(n+3){border-top:1px solid var(--fio-interno) !important}}

/* ══ LEADS ════════════════════════════════════════════════════════════════ */
.leads-tela{padding-top:var(--e-7) !important;padding-bottom:var(--e-7) !important}
.leads-tela h1{font-size:var(--t-30) !important;letter-spacing:-.025em !important;font-weight:650 !important}
.leads-tela .cabeca-hub{margin-bottom:var(--e-6) !important}
.leads-alerta{display:flex;gap:10px;align-items:baseline;background:transparent !important;
  border:1px solid var(--fio-v3) !important;border-left:3px solid var(--n1) !important;
  border-radius:var(--r-2) !important;color:var(--tx-2) !important;font-size:var(--t-13) !important;
  padding:12px 16px !important;margin:0 0 var(--e-5) !important;display:block}
.leads-alerta b{color:var(--tx) !important}
.leads-alerta code{font-size:var(--t-12);background:var(--sup-2);padding:1px 6px;border-radius:6px;color:var(--tx-2)}
.leads{gap:var(--e-4) !important}
/* KANBAN de leads (30/10/2026) — feijão com arroz: colunas, cartões, um ponto de cor por etapa */
.leads-tela{max-width:min(1440px, 100%) !important}
.kb{display:grid;grid-template-columns:repeat(6, minmax(190px, 1fr));gap:var(--e-3);align-items:start;
  overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:var(--e-3)}
.kb-col{scroll-snap-align:start;background:color-mix(in oklab, var(--sup-2) 55%, transparent);border:1px solid var(--fio-v3);
  border-radius:var(--r-3);padding:12px;min-height:180px;transition:background .25s var(--mola), border-color .25s var(--mola), transform .25s var(--mola)}
.kb-col.alvo{border-color:var(--c);background:color-mix(in oklab, var(--c) 12%, var(--sup-2));transform:translateY(-2px)}
.kb-col > header{display:flex;align-items:center;gap:8px;padding:2px 4px 12px;font-size:var(--t-13)}
.kb-col > header i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.kb-col > header b{font-weight:650;color:var(--tx)}
.kb-n{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--tx-2);font-weight:600;display:inline-block}
.kb-lista{display:grid;gap:10px}
.kb-vazio{border:1px dashed var(--fio-v3);border-radius:12px;padding:18px 0;text-align:center;color:var(--tx-3);font-size:var(--t-12);margin:0}
.kb-card{background:var(--sup);border:1px solid var(--fio-v3);border-radius:14px;padding:12px 12px 10px;
  cursor:grab;transition:border-color .2s, box-shadow .25s var(--mola), opacity .2s;will-change:transform}
.kb-card:hover{border-color:var(--tx-3);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.kb-card.pegando{opacity:.35;cursor:grabbing}
.kb-entra .kb-card{animation:chega .5s var(--mola) both;animation-delay:calc(var(--i) * 45ms + 80ms)}
.kb-abre{all:unset;display:grid !important;gap:2px;cursor:pointer;width:100%;border:0 !important;background:none !important;padding:0 !important;height:auto !important;min-height:0 !important;box-shadow:none !important;text-align:left}
.kb-abre b{font-size:var(--t-15);font-weight:650;color:var(--tx);line-height:1.25}
.kb-abre small{font-size:var(--t-12);color:var(--tx-2)}
.kb-abre:focus-visible{outline:2px solid var(--tx);outline-offset:4px;border-radius:6px}
.kb-tags{margin:8px 0 0;font-size:var(--t-12);color:var(--tx-2)}
.kb-mais{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--mola), opacity .3s;opacity:0}
.kb-mais > div{overflow:hidden;min-height:0}
.kb-card.aberto .kb-mais{grid-template-rows:1fr;opacity:1}
.kb-mais p{margin:8px 0 0;font-size:var(--t-13);color:var(--tx)}
.kb-mais p span{display:block;font-size:var(--t-11, 11px);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.kb-mais .acoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kb-card footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.kb-idade{font-size:var(--t-12);color:var(--tx-3);font-variant-numeric:tabular-nums}
.kb-idade.parado{color:var(--n1);font-weight:600}
.kb-mover{font:inherit;font-size:var(--t-12);color:var(--tx-2);background:transparent;border:1px solid var(--fio-v3);
  border-radius:999px;padding:3px 8px;cursor:pointer;max-width:58%}
.kb-erro{color:var(--n1);font-size:var(--t-13);min-height:1em;margin:0 0 var(--e-2)}
@media (max-width: 760px){.kb{grid-template-columns:repeat(6, 82vw)}}
@media (prefers-reduced-motion: reduce){.kb-entra .kb-card{animation:none}.kb-mais{transition:none}}
.lead{padding:var(--e-5) !important;font-size:var(--t-13);color:var(--tx-2)}
.lead header b{font-size:var(--t-17);font-weight:600;letter-spacing:-.015em;color:var(--tx)}
.lead header small{font-size:var(--t-13) !important;color:var(--tx-3) !important}
.lead-msg{color:var(--tx-3);font-style:italic}
.lead .acoes{margin-top:var(--e-4) !important;gap:8px}
.lead .acoes > *{height:34px;padding:0 14px;font-size:var(--t-13);display:inline-flex;align-items:center}

/* novo cliente: rótulos legíveis */
.pop label, .pop .campo{font-size:var(--t-13) !important;color:var(--tx-2) !important}
.pop summary{font-size:var(--t-13);color:var(--tx-3);cursor:pointer}
.pop h2{font-size:var(--t-22) !important;letter-spacing:-.02em !important;font-weight:650 !important}

/* ══ ENTRADA ══════════════════════════════════════════════════════════════
   Um falcão só, calmo, e o cartão. Saíram a trama diagonal do canto e os
   arcos concêntricos: três camadas de fundo disputando com um formulário de
   dois campos. Nada abaixo de 12 px; o ponto verde (fora da paleta) virou prata. */
.pg-entrar::after{display:none !important}
.pg-entrar::before{opacity:.30 !important}
.pg-entrar .marca-fundo{display:none !important}
.pg-entrar .caixa{background:var(--sup) !important;border:1px solid var(--fio-v3) !important;
  border-radius:var(--r-3) !important;padding:var(--e-7) var(--e-6) var(--e-5) !important;
  box-shadow:var(--brilho), 0 40px 90px -30px rgba(0,0,0,.6) !important}
.pg-entrar .marca{margin-bottom:var(--e-6) !important}
.pg-entrar .marca small{font-size:var(--t-12) !important;letter-spacing:.08em !important;color:var(--tx-4) !important}
.pg-entrar h1{font-size:var(--t-30) !important;letter-spacing:-.025em !important;font-weight:650 !important;
  line-height:1.15 !important;color:var(--tx) !important}
.pg-entrar .sub{font-size:var(--t-15) !important;color:var(--tx-3) !important;line-height:1.5 !important}
.pg-entrar label{font-size:var(--t-13) !important;color:var(--tx-2) !important;font-weight:550 !important}
.pg-entrar input{height:44px !important;font-size:var(--t-15) !important}
.pg-entrar button[type=submit]{height:44px !important;font-size:var(--t-15) !important;font-weight:600 !important}
.pg-entrar .explica-conv, .pg-entrar .ajuda{font-size:var(--t-13) !important;color:var(--tx-3) !important}
.pg-entrar .rodape .selo{font-size:var(--t-12) !important;background:transparent !important;border:0 !important;padding:0 !important;color:var(--tx-4) !important}
.pg-entrar .rodape .selo i{background:var(--tx-4) !important}
.pg-entrar .versao{font-size:var(--t-12) !important;color:var(--tx-4) !important}

/* ══ QUESTIONÁRIO ═════════════════════════════════════════════════════════
   40 minutos nesta tela. Antes: uma caixa por pergunta e a resposta marcada
   como bloco de cor chapada — depois de 20 respostas a área virava uma colcha
   de azul e amarelo. Agora: UMA superfície por área, perguntas separadas por
   fio; a resposta marcada acende com tinta leve + borda + ponto na cor dela.
   A cor continua dizendo o que é (Sistema, Planilha…), só não grita. */
.perguntas{gap:0 !important;background:var(--sup);border:1px solid var(--fio-v3);border-radius:var(--r-3);
  box-shadow:var(--brilho), var(--elev);overflow:hidden}
.perguntas .q{background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
  border-bottom:1px solid var(--fio-interno) !important;padding:var(--e-5) var(--e-5) var(--e-5) var(--e-6) !important}
.perguntas .q:last-child{border-bottom:0 !important}
.perguntas .q:hover{background:color-mix(in oklab,var(--sup-2) 60%,transparent) !important}
.perguntas .q:focus{background:var(--sup-2) !important;box-shadow:none !important}
.perguntas .q::before{left:0 !important;top:0 !important;bottom:0 !important;width:3px !important;border-radius:0 !important}
.perguntas .q.feita{background:transparent !important}
.q .n{font-size:var(--t-12) !important;color:var(--tx-4) !important}
.q .txt p{font-size:var(--t-15) !important;line-height:1.45 !important;color:var(--tx) !important}
.q .txt small{font-size:var(--t-12) !important;color:var(--tx-4) !important}
.q .txt{margin-bottom:var(--e-3) !important}
.op{background:transparent !important;border:1px solid var(--fio-interno) !important;box-shadow:none !important;
  color:var(--tx-2) !important;padding:8px 6px !important;transition:border-color .15s, background .15s !important}
.op b{font-size:var(--t-13) !important;font-weight:600 !important}
.op small{font-size:var(--t-12) !important;color:var(--tx-4) !important}
.op:hover{border-color:var(--c) !important;background:color-mix(in oklab,var(--c) 8%,transparent) !important}
.op.on{background:color-mix(in oklab,var(--c) 18%,var(--sup)) !important;border-color:var(--c) !important;
  color:var(--tx) !important;box-shadow:inset 0 0 0 1px var(--c) !important}
.op.on b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c);
  margin-right:6px;vertical-align:1px}
.op.on small{color:var(--tx-2) !important}
.lapis, .pular, .balao{border:1px solid transparent !important;background:transparent !important;color:var(--tx-4) !important}
.lapis:hover, .pular:hover, .balao:hover{border-color:var(--fio-v3) !important;color:var(--tx) !important}
.balao.tem, .pular.on{border-color:var(--fio-v3) !important;color:var(--tx) !important;background:var(--sup-2) !important}
.q.pulada::after{font-size:var(--t-12) !important;background:var(--sup-2) !important;border-color:var(--fio-v3) !important;color:var(--tx-2) !important}
.bloco-cab h2, .bloco-cab h3{font-size:var(--t-22) !important;letter-spacing:-.02em !important;font-weight:650 !important}
.rapidas span{font-size:var(--t-12) !important;color:var(--tx-3) !important}
.rapidas button{font-size:var(--t-12) !important;height:30px;padding:0 10px !important}
.obs-lida{font-size:var(--t-13) !important;background:var(--sup-2) !important;border-left-color:var(--tx-3) !important}
.obs-pe .conta{font-size:var(--t-12) !important}

/* ══ CABEÇALHO DAS OUTRAS TELAS (questionário, estúdio, painel) ════════════
   A mesma barra fina da carteira: rente ao topo, sem cápsula flutuando com
   margem — a cápsula desalinhava a borda do cabeçalho da borda do conteúdo. */
.topo:not(.v3){margin:0 !important;border-radius:0 !important;border:0 !important;
  border-bottom:1px solid var(--fio-interno) !important;box-shadow:none !important;top:0 !important;
  background:color-mix(in oklab,var(--app) 84%,transparent) !important}
.topo:not(.v3) h1{font-size:var(--t-17) !important;font-weight:650 !important;letter-spacing:-.015em !important}
.topo:not(.v3) small{font-size:var(--t-12) !important;color:var(--tx-4) !important}

/* ══ ESTÚDIO ══════════════════════════════════════════════════════════════
   Lista de áreas = linhas com fio, não 19 caixas empilhadas dentro de outra. */
.carta .area{background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
  border-bottom:1px solid var(--fio-interno) !important;margin:0 !important}
.carta .area:last-of-type{border-bottom:0 !important}
.area>summary{background:transparent !important;padding:14px 4px !important}
.area>summary:hover{background:var(--sup-2) !important}
.area>summary b{font-size:var(--t-15) !important;font-weight:600 !important}
.area>summary .conta{font-size:var(--t-13) !important;color:var(--tx-4) !important}
.area[open]{background:var(--sup-2) !important;border-radius:var(--r-2) !important}
.peso{background:transparent !important;box-shadow:none !important;border-color:var(--fio-interno) !important}
.peso b{font-size:var(--t-15) !important}
.peso small{font-size:var(--t-12) !important;color:var(--tx-3) !important}
.achados{font-size:var(--t-13) !important}

/* ══ ESCALA ÚNICA (medição 29/10) ═════════════════════════════════════════
   A carteira tinha 11 tamanhos de letra; a escala do sistema tem 7
   (12/13/15/17/22/30/48). Os que sobravam vinham de regras antigas. */
.emp .emp-nome small{font-size:var(--t-13) !important}
.topo.v3 .sair{font-size:var(--t-13) !important}
.emp.novo{font-size:var(--t-15) !important}
.emp.novo .mais{font-size:var(--t-17) !important}
.bhg-marca b{font-size:var(--t-13) !important}
.bhg-marca small{font-size:var(--t-12) !important}
.bhg-num{font-size:var(--t-13) !important}
.bhg-num b{font-size:var(--t-15) !important}
.bhg-pe, .bhg-pe b{font-size:var(--t-15) !important}
.pilseg b, .pilseg .md{opacity:1 !important;color:var(--tx-3) !important}
.pilseg.on b, .pilseg.on .md{color:var(--app) !important}
.rq-ab{font-size:var(--t-12) !important}
.rq-nome, .pan-leg li{font-size:var(--t-13) !important}
.rq li b.num, .rq b.num{font-size:var(--t-15) !important}
.pan-nota{font-size:var(--t-13) !important;color:var(--tx-3) !important}
.pan-nota b{color:var(--tx) !important}
.lead p{font-size:var(--t-13) !important}
.pop .nota-g{font-size:var(--t-48) !important}
.pop .linhas small{font-size:var(--t-12) !important}
.and-linha b{font-size:var(--t-13) !important}
.aut-leg li, .aut-leg b{font-size:var(--t-13) !important}
.pop input, .pop select, .pop textarea{font-size:var(--t-15) !important}
.pop .fechar{font-size:var(--t-15) !important}

/* questionário: cabeçalho e rodapé na escala */
.topo:not(.v3) .quem, .voltar, .topo:not(.v3) .linha1 .num{font-size:var(--t-13) !important}
.passo{font-size:var(--t-12) !important;letter-spacing:.06em !important}
.tempo, .atalho, .legenda-ops, .legenda-ops summary{font-size:var(--t-12) !important}
.atalho kbd{font-size:var(--t-12) !important;background:var(--sup-2) !important;border-color:var(--fio-interno) !important}
.lapis{font-size:var(--t-13) !important;color:var(--tx-3) !important;opacity:1 !important}
/* estúdio */
.carta > h2{font-size:var(--t-17) !important;font-weight:600 !important;letter-spacing:-.015em !important}
.carta .sub{font-size:var(--t-13) !important;color:var(--tx-3) !important}
.cab h3{font-size:var(--t-15) !important}
.topo:not(.v3) .dentro{padding-top:10px !important;padding-bottom:10px !important}

/* ══ PAINEL (relatório) — mesma escala de 7 tamanhos ═════════════════════
   Medido: 13 tamanhos e 61 textos abaixo de 12 px (o menor, 9 px). */
.menu .nota-menu, .menu .sep, .rodape-menu, .rodape-menu span, .menu .marca small{font-size:var(--t-12) !important}
.app .dica, .app p.dica{font-size:var(--t-13) !important;color:var(--tx-3) !important}
.app .dica b{font-size:inherit !important}
.legenda-inline span{font-size:var(--t-12) !important}
.carta.kpi .v{font-size:var(--t-30) !important}
.carta.kpi small, .carta.kpi .rot{font-size:var(--t-12) !important}
.lin em{font-size:var(--t-12) !important}
.lin span{font-size:var(--t-13) !important}
.legenda li span, .legenda li b{font-size:var(--t-13) !important}
.legenda li small{font-size:var(--t-12) !important}
.nota-rodape, .nota-rodape b{font-size:var(--t-13) !important}
.empresa-pill b{font-size:var(--t-17) !important}
.metodo div > b{font-size:var(--t-17) !important}
.metodo small{font-size:var(--t-12) !important}
.metodo small b{font-size:inherit !important}
/* "você" na escada: pílula clara com letra clara (contraste 1,35) */
.escada .voce{background:var(--tx) !important;color:var(--app) !important}
.regua .marcas span, .projecao .rot, .escada .nv b, .projecao .flecha b{font-size:var(--t-12) !important}
.pilulas b, .pilulas span{font-size:var(--t-13) !important}
.leitura p, .leitura p b{font-size:var(--t-15) !important}
/* no claro, a cor de nível em letra de 12 px não passa de 4,3:1. O número fica
   em tinta neutra; a cor do nível continua no ponto ao lado do nome da área. */
:root[data-tema="2"] .nota-menu, html:has(#tema-2:checked) .nota-menu{color:var(--tx) !important}
.escada .voce{font-size:var(--t-12) !important}

/* ══ CELULAR ══════════════════════════════════════════════════════════════
   Medido em 375 px: a barra de uma linha exigia 536 px e a página inteira
   encolhia. No celular ela vira duas fileiras: marca + ações; abas e busca
   em largura total. Margem lateral de 16 px em tudo. */
@media (max-width:720px){
  .topo.v3 .dentro, body > main, main.pan-tela, main.leads-tela{padding-left:var(--e-4) !important;padding-right:var(--e-4) !important}
  .topo.v3 .linha1{flex-wrap:wrap;height:auto !important;padding:10px 0 !important;gap:10px}
  .marca-v3 small{display:none}
  .acoes-topo{display:contents}
  .acoes-topo > *{order:1}
  .acoes-topo .temas{order:1 !important}
  .acoes-topo .novo-cliente{margin-left:auto;font-size:0 !important;width:34px;padding:0 !important;justify-content:center}
  .acoes-topo .novo-cliente::before{content:"+";font-size:var(--t-22);line-height:1;font-weight:500}
  .topo.v3 .abas-hub{order:3;flex:1 1 100%}
  .topo.v3 .aba-hub{flex:1}
  .acoes-topo .busca{order:4;flex:1 1 100%}
  .acoes-topo .busca input{width:100% !important}
  .pan-kpi{padding:var(--e-4) !important}
  .pan-kpi b{font-size:var(--t-22) !important}
  .pan-tela .carta, .pop{padding:var(--e-5) !important}
}

/* ══ PERSONALIDADE (29/10/2026) ═══════════════════════════════════════════
   Uma frase que diz para que o produto existe, em duas tintas: a primeira
   metade afirma, a segunda conclui. E movimento com um propósito só: mostrar
   de onde o número vem (sobe do zero, a barra cresce, o cartão chega). */
.saudacao{padding:var(--e-7) 0 var(--e-2);animation:chega .7s var(--mola) both}
.saudacao .oi{margin:0 0 var(--e-2);font-size:var(--t-15);color:var(--tx-3);font-weight:500}
.saudacao .frase{margin:0;font-size:var(--t-48) !important;line-height:1.05 !important;letter-spacing:-.035em !important;
  font-weight:650 !important;color:var(--tx) !important;max-width:16ch}
.saudacao .frase span{color:var(--tx-4);display:inline-block;animation:chega .9s .25s var(--mola) both}
.saudacao .estado{margin:var(--e-4) 0 0;font-size:var(--t-15);color:var(--tx-3)}
.saudacao .estado b{color:var(--tx);font-weight:650}
.saudacao::after{content:"";display:block;width:56px;height:2px;margin-top:var(--e-5);border-radius:2px;
  background:var(--tx);transform-origin:left;animation:risca 1s .45s var(--mola) both}
/* ENTRAR EM FOCO — o gesto do The Eye. Ele é um olho: nada desliza, tudo
   FOCA (do borrado para o nítido), como uma lente ajustando. Um gesto só,
   repetido em toda a casa: isso é personalidade, não enfeite. */
@keyframes chega{from{opacity:0;filter:blur(10px);transform:translateY(8px) scale(.99)}}
@keyframes risca{from{transform:scaleX(0)}}
@keyframes cresce{from{transform:scaleX(0)}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}}
@keyframes pulsa{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--n1) 60%,transparent)}
  70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* precisa de atenção: uma faixa só, com o pulso discreto no ponto */
.atencao{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3);margin:0 0 var(--e-5);
  padding:12px 16px;background:var(--sup);border:1px solid var(--fio-v3);border-left:3px solid var(--n1);
  border-radius:var(--r-2);animation:chega .6s .15s var(--mola) both}
.at-tit{display:flex;align-items:center;gap:8px;font-size:var(--t-13);font-weight:650;color:var(--tx);margin-right:var(--e-2)}
.at-ponto{width:8px;height:8px;border-radius:50%;background:var(--n1);animation:pulsa 2.2s infinite}
.at-item{display:inline-flex;align-items:baseline;gap:8px;height:auto !important;padding:6px 12px !important;
  border-radius:999px !important;background:var(--sup-2) !important;border:1px solid var(--fio-interno) !important;
  color:var(--tx) !important;cursor:pointer;transition:border-color .2s, transform .2s var(--mola) !important}
.at-item:hover{border-color:var(--fio-v3) !important;transform:translateY(-1px)}
.at-item b{font-size:var(--t-13);font-weight:600}
.at-item small{font-size:var(--t-12);color:var(--tx-3)}

/* movimento */
.emp{animation:chega .55s var(--mola) both}
.emp .medidor i, .frageis .medidor i, .and-trilha i, .rq-pista i{transform-origin:left;animation:cresce 1.1s .2s var(--mola) both}
.fundo .pop{animation:pop .38s var(--mola) both}
.pan-kpi, .pan-tela .carta, .lead{animation:chega .6s var(--mola) both}
.pan-kpi:nth-child(2), .pan-tela .pan-par .carta:nth-child(2){animation-delay:.06s}
.pan-kpi:nth-child(3){animation-delay:.12s} .pan-kpi:nth-child(4){animation-delay:.18s}
.topo.v3 .aba-hub{transition:background .25s var(--mola), color .2s}
.perguntas .q{animation:chega .45s var(--mola) both}
.op{transition:border-color .15s, background .2s, transform .15s var(--mola) !important}
.op:active{transform:scale(.97)}
.pg-entrar .caixa{animation:pop .6s var(--mola) both !important}
/* painel: as cartas chegam em cascata e as barras sobem do eixo */
.app .carta{animation:chega .6s var(--mola) both}
.app .grade > .carta:nth-child(2){animation-delay:.08s} .app .grade > .carta:nth-child(3){animation-delay:.16s}
.app svg rect[rx]{transform-box:fill-box;transform-origin:bottom;animation:sobe 1s .25s var(--mola) both}
@keyframes sobe{from{transform:scaleY(0)}}
.frase-heroi{margin:var(--e-4) 0 0;text-align:center;font-size:var(--t-17) !important;line-height:1.4;
  color:var(--tx-2) !important;max-width:34ch;align-self:center}
.frase-heroi b{color:var(--tx) !important}

/* questionário: cabeçalho mais baixo — é altura roubada da pergunta */
.topo:not(.v3) .linha1{padding-top:8px !important;padding-bottom:6px !important}
.linha2{padding-bottom:8px !important}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important;transition:none !important}
}
@media (max-width:720px){.saudacao .frase{font-size:var(--t-30) !important}.saudacao{padding-top:var(--e-5)}}

/* a marca do topo recebe o mesmo reflexo ao passar o mouse */
.marca-v3 .falcao{background:linear-gradient(105deg, var(--tx) 40%, var(--tx-4) 50%, var(--tx) 60%) 140% 0/300% 100% !important;
  transition:background-position .9s var(--mola)}
.marca-v3:hover .falcao{background-position:-40% 0 !important}
/* leitura do dia */
.leitura-dia{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:var(--e-4) 0 0;
  font-size:var(--t-15);color:var(--tx-2);animation:chega .7s .5s var(--mola) both}
.leitura-dia .ld-rot{font-size:var(--t-12);font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx);padding:3px 10px;border-radius:999px;border:1px solid var(--fio-v3)}
.leitura-dia b{color:var(--tx);font-weight:600}
/* o grupo, lá embaixo, com a cor de cada marca */
.bhg-marcas .logo-m{opacity:.92;transition:opacity .2s, transform .25s var(--mola)}
.bhg-marcas a:hover .logo-m{opacity:1;transform:translateY(-2px)}

/* ══ VIDRO, COR E MATÉRIA (29/10/2026) ════════════════════════════════════
   Personalidade = um ponto de vista que se repete: aqui, "o olho que vê
   através". Os cartões viram vidro fosco sobre o falcão; cada empresa acende
   um halo discreto na cor do SEU nível (a cor continua sendo do dado); o
   fundo ganha grão de papel fotográfico e vinheta, como uma lente. */
.emp, .carta, .pan-kpi, .lead, .atencao, .pop, .perguntas, .caixa{
  background-color:color-mix(in oklab,var(--sup) 74%,transparent) !important;
  -webkit-backdrop-filter:blur(22px) saturate(150%) !important;backdrop-filter:blur(22px) saturate(150%) !important}
.emp{background-image:radial-gradient(130% 90% at 0% 0%, color-mix(in oklab,var(--c,transparent) 16%,transparent), transparent 62%) !important}
.emp:hover{box-shadow:var(--brilho), 0 18px 50px -20px color-mix(in oklab,var(--c,#000) 45%,transparent) !important}
html:not(.pg-entrar)::after{display:block !important;content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--vinheta) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E") !important;
  opacity:var(--grao-op) !important;mix-blend-mode:normal}
:root[data-tema="1"], html:has(#tema-1:checked), :root:not([data-tema]){--vinheta:rgba(0,0,0,.55);--grao-op:.9}
:root[data-tema="2"], html:has(#tema-2:checked){--vinheta:rgba(0,0,0,.06);--grao-op:.5}

/* seletor de tema: uma bolinha PRETA e uma BRANCA, a escolhida com anel */
.temas{gap:6px !important;padding:4px !important;border-radius:999px !important}
.temas button, .temas label{width:16px !important;height:16px !important;border-radius:50% !important;padding:0 !important;
  min-width:0 !important;cursor:pointer;transition:transform .2s var(--mola), box-shadow .2s !important}
.temas .t1{background:#0B0B0D !important;border:1px solid #5A5A5F !important}
.temas .t2{background:#F5F5F7 !important;border:1px solid #B3B3B9 !important}
.temas .on, html:has(#tema-1:checked) .temas .t1, html:has(#tema-2:checked) .temas .t2{
  box-shadow:0 0 0 2px var(--app), 0 0 0 3.5px var(--tx) !important;transform:scale(1.08)}
.temas button:hover, .temas label:hover{transform:scale(1.15)}

/* a lente: luz que segue o ponteiro (some quando ele sai) */
.emp, .lead{position:relative;overflow:hidden}
.emp::after, .lead::after{content:"" !important;display:block !important;position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), var(--lente), transparent 65%)}
.emp:hover::after, .lead:hover::after{opacity:1}
:root[data-tema="1"], html:has(#tema-1:checked), :root:not([data-tema]){--lente:rgba(255,255,255,.035)}
:root[data-tema="2"], html:has(#tema-2:checked){--lente:rgba(0,0,0,.015)}
/* trocar de aba também foca: a tela inteira chega nítida */
#raiz > main, #raiz main.pan-tela, #raiz main.leads-tela{animation:chega .5s var(--mola) both}
/* o carregamento respira, como a íris abrindo */
.foco-load{animation:respira 1.4s ease-in-out infinite alternate}
@keyframes respira{from{filter:blur(3px);opacity:.5}to{filter:blur(0);opacity:1}}
/* a marca do topo faz a varredura uma vez, ao abrir */
.marca-v3 .falcao{animation:varre 1.6s .3s var(--mola) both}
@keyframes varre{from{background-position:140% 0}to{background-position:-40% 0}}

/* ══ GRÁFICOS QUE RESPONDEM (29/10/2026) ══════════════════════════════════
   Tocar ou passar o mouse em qualquer parte de um gráfico REALÇA aquela parte,
   apaga o resto e mostra o número que faltava. Tudo em CSS: o painel é um
   arquivo que o cliente recebe e abre offline, sem JavaScript. O tabindex faz
   o clique "fixar" o realce (foco) até tocar em outro lugar. */
.rosca .fatia, .grupo, .eixo, .barras .lin, .legenda li, .legenda-inline span{cursor:pointer;outline:none}
.rosca .fatia path, .grupo .b, .eixo text, .barras .lin, .legenda li, .legenda-inline span{
  transition:opacity .25s, transform .3s var(--mola), filter .25s}

/* rosca: a fatia sai um pouco para fora e o centro troca para o número dela */
.rosca .fatia path{transform-box:view-box;transform-origin:92px 92px}
.rosca .fatia .info{opacity:0;transition:opacity .2s;pointer-events:none}
.rosca .centro{transition:opacity .2s}
.rosca:has(.fatia:hover, .fatia:focus) .centro{opacity:0}
.rosca .fatia:hover .info, .rosca .fatia:focus .info{opacity:1}
.rosca:has(.fatia:hover, .fatia:focus) .fatia:not(:hover):not(:focus) path{opacity:.22}
.rosca .fatia:hover path, .rosca .fatia:focus path{transform:scale(1.045)}
/* a legenda ao lado conversa com a rosca: apontar "Planilha" acende a fatia */
.carta:has(.legenda li:hover, .legenda li:focus) .rosca .centro{opacity:0}
.legenda:has(li:hover, li:focus) li:not(:hover):not(:focus){opacity:.4}
.carta:has(.legenda .k-sistema:hover, .legenda .k-sistema:focus) .rosca .fatia:not(.k-sistema) path,
.carta:has(.legenda .k-planilha:hover, .legenda .k-planilha:focus) .rosca .fatia:not(.k-planilha) path,
.carta:has(.legenda .k-documento:hover, .legenda .k-documento:focus) .rosca .fatia:not(.k-documento) path,
.carta:has(.legenda .k-necessario:hover, .legenda .k-necessario:focus) .rosca .fatia:not(.k-necessario) path,
.carta:has(.legenda .k-nao_utilizo:hover, .legenda .k-nao_utilizo:focus) .rosca .fatia:not(.k-nao_utilizo) path{opacity:.22}
.carta:has(.legenda .k-sistema:hover, .legenda .k-sistema:focus) .rosca .k-sistema .info,
.carta:has(.legenda .k-planilha:hover, .legenda .k-planilha:focus) .rosca .k-planilha .info,
.carta:has(.legenda .k-documento:hover, .legenda .k-documento:focus) .rosca .k-documento .info,
.carta:has(.legenda .k-necessario:hover, .legenda .k-necessario:focus) .rosca .k-necessario .info,
.carta:has(.legenda .k-nao_utilizo:hover, .legenda .k-nao_utilizo:focus) .rosca .k-nao_utilizo .info{opacity:1}

/* barras por nível: o nível tocado fica, os outros apagam, e aparece a distância ao mercado */
.grupo .dif{opacity:0;transition:opacity .2s}
.grupo .dif.pos{fill:var(--n5)} .grupo .dif.neg{fill:var(--n1)}
.grupo:hover .dif, .grupo:focus .dif{opacity:1}
svg:has(.grupo:hover, .grupo:focus) .grupo:not(:hover):not(:focus) .b{opacity:.25}
/* a legenda isola uma série: apontar "Mediana do mercado" deixa só ela */
.carta:has(.legenda-inline .s-cliente:hover, .legenda-inline .s-cliente:focus) .b:not(.s-cliente),
.carta:has(.legenda-inline .s-media:hover, .legenda-inline .s-media:focus) .b:not(.s-media),
.carta:has(.legenda-inline .s-melhor:hover, .legenda-inline .s-melhor:focus) .b:not(.s-melhor){opacity:.15}
.legenda-inline:has(span:hover, span:focus) span:not(:hover):not(:focus){opacity:.45}

/* teia: o eixo tocado acende do centro até a ponta e mostra a conta contra o mercado */
.eixo .guia, .eixo .foco{opacity:0;transition:opacity .25s}
.eixo .det{opacity:0;transition:opacity .2s}
.eixo .det.pos{fill:var(--n5)} .eixo .det.neg{fill:var(--n1)}
.eixo:hover .guia, .eixo:focus .guia{opacity:.55}
.eixo:hover .foco, .eixo:focus .foco, .eixo:hover .det, .eixo:focus .det{opacity:1}
.eixos:has(.eixo:hover, .eixo:focus) .eixo:not(:hover):not(:focus) text{opacity:.3}

/* ranking: a linha tocada destaca e mostra mercado e diferença dentro da trilha */
.barras .lin{position:relative;border-radius:8px}
.barras .trilha{position:relative}
.barras .det{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:var(--t-12);
  color:var(--tx-2);background:var(--sup);padding:2px 8px;border-radius:999px;border:1px solid var(--fio-v3);
  white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;z-index:2}
.barras .det b.pos{color:var(--n5)} .barras .det b.neg{color:var(--n1)}
.barras .lin:hover .det, .barras .lin:focus .det{opacity:1}
.barras:has(.lin:hover, .lin:focus) .lin:not(:hover):not(:focus){opacity:.45}
.barras .lin:hover, .barras .lin:focus{background:color-mix(in oklab,var(--tx) 5%,transparent)}
@media (prefers-reduced-motion: reduce){.rosca .fatia:hover path, .rosca .fatia:focus path{transform:none}}

/* barras por nível: lista própria no celular */
.niveis-mob{display:none}
@media (max-width:640px){
  svg.niveis{display:none}
  .niveis-mob{display:grid;gap:var(--e-4)}
  .nm h4{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 6px;
    font-size:var(--t-15);font-weight:600;color:var(--tx)}
  .nm h4 small{font-size:var(--t-12);font-weight:650}
  .nm h4 small.pos{color:var(--n5)} .nm h4 small.neg{color:var(--n1)}
  .nm-s{display:grid;grid-template-columns:62px 1fr 40px;align-items:center;gap:8px;font-size:var(--t-12);color:var(--tx-3)}
  .nm-s i{display:block;height:6px;border-radius:99px;background:var(--trilha);overflow:hidden}
  .nm-s i b{display:block;height:100%;border-radius:99px;transform-origin:left;animation:cresce 1s var(--mola) both}
  .nm-s em{font-style:normal;text-align:right;color:var(--tx);font-weight:650;font-variant-numeric:tabular-nums}
}
/* Panorama: ranking mostra a melhor empresa e o espaço; teia já herda o .eixo */
.rq li{position:relative}
.rq-det{position:absolute;right:56px;top:50%;transform:translateY(-50%);font-size:var(--t-12);color:var(--tx-2);
  background:var(--sup);padding:2px 8px;border-radius:999px;border:1px solid var(--fio-v3);white-space:nowrap;
  opacity:0;transition:opacity .2s;pointer-events:none;z-index:2}
.rq li:hover .rq-det, .rq li:focus .rq-det{opacity:1}
.rq:has(li:hover, li:focus) li:not(:hover):not(:focus){opacity:.5}
.rq li{transition:opacity .25s}
.eixo .det:not(.pos):not(.neg){fill:var(--tx-2)}

/* TECLADO: tirei o contorno padrão dos gráficos tocáveis; quem navega com Tab
   precisa ver onde está — então ele volta, só para o teclado (:focus-visible). */
.rosca .fatia:focus-visible path{stroke:var(--tx);stroke-width:2}
.grupo:focus-visible .alvo, .eixo:focus-visible .alvo{fill:color-mix(in oklab,var(--tx) 6%,transparent);
  stroke:var(--tx-3);stroke-dasharray:4 4}
.barras .lin:focus-visible, .rq li:focus-visible, .legenda li:focus-visible, .legenda-inline span:focus-visible,
.emp:focus-visible, .at-item:focus-visible, .pilseg:focus-visible, .aba-hub:focus-visible{
  outline:2px solid var(--tx) !important;outline-offset:2px}

/* ══ CELULAR: QUESTIONÁRIO (29/10/2026) ═══════════════════════════════════
   Medido em 375 px: o cabeçalho comia 224 px (28% da tela) antes da 1ª
   pergunta; "marcar todas" ocupava duas linhas; os ícones da pergunta caíam
   soltos, cada um numa linha. Aqui o cabeçalho vira duas linhas finas + a
   fita de áreas, e a pergunta fica: texto, 4 opções em 2×2, "não utilizo"
   inteiro e os ícones numa fileira só — todo alvo de toque com ≥ 44 px. */
@media (max-width:640px){
  .topo:not(.v3) .linha1{flex-wrap:nowrap !important;gap:8px !important;padding:8px 16px 4px !important}
  .topo:not(.v3) .linha1 .num{display:none !important}            /* a regra dos 60% está no rodapé da área */
  .topo:not(.v3) .linha1 .quem{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topo:not(.v3) .linha1 .salvo{white-space:nowrap;font-size:var(--t-12) !important}
  .topo:not(.v3) .voltar{padding:0 10px !important;height:36px}
  .linha2{flex-wrap:wrap !important;gap:4px 10px !important;padding:0 16px 8px !important}
  .linha2 .barra{order:3;flex:1 1 100% !important}
  .linha2 .tempo{white-space:nowrap !important;margin-left:auto;text-align:right}
  .trilho{padding-left:16px !important;padding-right:16px !important}
  .trilho button{height:36px !important}
  .bloco-cab{gap:8px !important}
  .rapidas{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
    margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .rapidas::-webkit-scrollbar{display:none}
  .rapidas button{flex:none;height:36px !important;white-space:nowrap}
  .perguntas .q{padding:var(--e-4) var(--e-4) var(--e-4) var(--e-5) !important}
  .q .txt{gap:8px !important}
  .ops{grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:8px !important}
  .ops .op{grid-column:span 3;min-height:48px}
  .ops .op[data-o="nao_utilizo"]{grid-column:span 6}
  .ops .lapis, .ops .pular, .ops .balao{grid-column:span 2;height:44px !important;min-height:44px}
  .ops:not(:has(.lapis)) .pular, .ops:not(:has(.lapis)) .balao{grid-column:span 3}
  .temas{padding:6px !important} .temas button{width:22px !important;height:22px !important}
}
@media (max-width:640px){
  /* no questionário o seletor de tema sai do celular (a escolha já vem da carteira) e "tudo salvo" respira */
  .topo:not(.v3) .linha1 .temas{display:none !important}
  .rapidas span{white-space:nowrap}
  .passo{letter-spacing:.02em !important}
  .linha2 .tempo{font-size:var(--t-12) !important}
}
@media (max-width:640px){
  .linha2 .passo{flex:1 1 100%}
  .linha2 .barra{order:3;flex:1 1 auto !important;min-width:80px}
  .linha2 .tempo{order:4;margin-left:0}
}

/* ══ CELULAR: CARTEIRA, PANORAMA, FICHA, LEADS ═══════════════════════════
   Medido: alvos de toque com 25–34 px (o dedo pede ≥ 40–44) e um cabeçalho de
   151 px PRESO no topo, comendo 19% da tela durante toda a rolagem. */
@media (max-width:720px){
  .topo.v3{position:relative !important}                     /* rola junto: a tela é do conteúdo */
  .topo.v3 .aba-hub{height:40px;padding:0 10px}
  .acoes-topo .busca input{height:42px !important;font-size:16px !important}  /* 16 px: o iPhone não dá zoom ao focar */
  .acoes-topo .novo-cliente{height:40px !important;width:40px}
  .topo.v3 .sair{height:40px} .avatar{width:36px;height:36px}
  .marca-v3{min-height:40px}
  .temas button{width:26px !important;height:26px !important}
  .pilseg{height:40px !important}
  .at-item{min-height:40px}
  .rq li{min-height:44px;align-items:center}
  .pop summary{min-height:44px;display:flex;align-items:center}
  .pop .fantasma, .pop .acoes > *{min-height:42px}
  .lead .acoes > *{height:42px !important}
  .frageis li{padding:10px 0}
  .pop{width:calc(100vw - 24px) !important;max-height:calc(100dvh - 24px) !important}
  .pop .topo-pop{flex-direction:column;gap:var(--e-2) !important}
  .pop .topo-pop > div:last-child{text-align:left !important}
}
@media (max-width:720px){
  .fundo{padding:12px !important}
  .pop{width:100% !important}
  .frageis li{grid-template-columns:minmax(0,1fr) 56px 50px !important}
}

/* ══ CELULAR: PAINEL ══════════════════════════════════════════════════════
   Medido: cabeçalho de 284 px — a coluna do título ficava espremida em 225 px
   ao lado do seletor de tema e as 4 pílulas caíam uma por linha. Agora: a
   empresa em uma linha, o título, e as pílulas numa fita que rola de lado. */
@media (max-width:640px){
  .app .topo{display:flex !important;flex-wrap:wrap !important;gap:10px !important;position:relative}
  .app .topo > div:not(.temas):not(.empresa-pill){flex:1 1 100% !important;min-width:0}
  .app .topo .temas{position:absolute !important;top:10px;right:10px}
  .app .empresa-pill{order:-1;flex:1 1 100%;min-width:0;padding:8px 12px !important;margin-right:76px}
  .app .empresa-pill small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .app .topo .pilulas{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;
    margin:0 -16px !important;padding:0 16px 2px !important}
  .app .topo .pilulas::-webkit-scrollbar{display:none}
  .app .topo .pilulas span{flex:none;white-space:nowrap}
  .legenda li{min-height:36px;align-items:center}
  .legenda-inline span{min-height:36px;display:inline-flex;align-items:center}
  .menu label{min-height:40px}
  .temas label{width:24px !important;height:24px !important}
}
@media (max-width:640px){
  /* a fita de pílulas não quebra linha: sem min-width:0 ela esticava a coluna (e a página) para 738 px */
  .app > *, .app main, .app .topo, .app .topo > div{min-width:0 !important;max-width:100%}
}
@media (max-width:720px){
  /* iPhone dá zoom sozinho ao tocar em campo com letra < 16 px — e não desfaz.
     16 px em todo campo de digitação no celular, em todas as telas. */
  input:not([type=checkbox]):not([type=radio]), select, textarea{font-size:16px !important}
  /* estúdio: botões de edição com alvo de dedo */
  .area button, .area .pil, .gaveta button, .carta .pil{min-height:38px}
}

/* ══ CELULAR DE VERDADE (29/10/2026) ═════════════════════════════════════
   Testado no aparelho pelo Gustavo: "ainda não está no ponto". O que a
   emulação não mostrava: (1) ao abrir a carteira NENHUMA empresa aparecia —
   o 1º cartão começava em 939 px numa tela de 812; (2) cartões de 210 px,
   três por tela; (3) vidro fosco + grão em tela cheia custam caro na rolagem
   de celular; (4) no toque, o efeito de "passar o mouse" gruda. */

/* (3)+(4) onde não há mouse: superfície sólida, sem grão, sem lente, sem pulo */
@media (hover:none), (max-width:720px){
  .emp, .carta, .pan-kpi, .lead, .atencao, .pop, .perguntas, .caixa{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    background-color:var(--sup) !important}
  html:not(.pg-entrar)::after{display:none !important}
  .emp::after, .lead::after{display:none !important}
  .emp:hover{transform:none !important}
  .topo.v3{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:var(--app) !important}
}

/* (1)+(2) carteira no celular: chegar às empresas na primeira tela */
@media (max-width:720px){
  .saudacao{padding:var(--e-4) 0 0 !important}
  .saudacao::after{display:none}
  .saudacao .oi{font-size:var(--t-13);margin-bottom:4px}
  .saudacao .frase{font-size:var(--t-22) !important;max-width:none}
  .saudacao .estado{margin-top:var(--e-2);font-size:var(--t-13)}
  .leitura-dia{margin-top:var(--e-2);font-size:var(--t-13);gap:4px 8px}
  .leitura-dia .ld-rot{padding:2px 8px}
  .fita-seg{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;margin:var(--e-4) -16px var(--e-3) !important;
    padding:0 16px 2px}
  .fita-seg::-webkit-scrollbar{display:none}
  .pilseg{flex:none}
  .atencao{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:8px 12px;margin-bottom:var(--e-3)}
  .atencao::-webkit-scrollbar{display:none}
  .at-tit{flex:none} .at-item{flex:none}
  .aviso-perfil{display:none !important}            /* nota técnica: fica para a tela grande */
  .seg{margin-bottom:var(--e-5) !important}
  .seg-cab{margin-bottom:var(--e-2) !important;padding-bottom:var(--e-2)}
  #raiz .grade{grid-template-columns:1fr !important;gap:8px !important}
  /* o cartão vira LINHA: quem é à esquerda, a nota à direita, a barra embaixo */
  .emp{display:grid !important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cab num" "med med" "pe pe";
    gap:6px 12px !important;padding:12px 14px !important;align-items:center !important}
  .emp-cab{grid-area:cab;min-width:0}
  .emp-nome b{font-size:var(--t-15) !important;-webkit-line-clamp:1 !important}
  .emp-nome small{font-size:var(--t-12) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .emp-num{grid-area:num;flex-direction:column;align-items:flex-end;gap:0 !important;margin:0 !important}
  .emp-num .nota{font-size:var(--t-30) !important}
  .emp-num .nota.emp-sem{font-size:var(--t-22) !important}
  .emp-nivel{font-size:var(--t-12) !important;color:var(--tx-3) !important}
  .emp .medidor{grid-area:med;margin:0 !important}
  .emp-pe{grid-area:pe}
  .emp.novo{min-height:56px !important;grid-template-areas:none;display:flex !important;flex-direction:row;gap:10px}
}

/* questionário no aparelho: a pergunta é o protagonista */
@media (max-width:640px){
  .perguntas .q{padding:16px !important}
  .q .txt{flex-direction:column !important;gap:4px !important;margin-bottom:12px !important}
  .q .n{padding:0 !important;min-width:0 !important;font-size:var(--t-12) !important;letter-spacing:.04em}
  .q .txt p{font-size:17px !important;line-height:1.4 !important}
  .op{padding:10px 6px !important}
  .op b{font-size:var(--t-15) !important}
  .lapis, .pular, .balao{font-size:18px !important}
  .balao svg{width:20px !important;height:20px !important}
  /* rodapé no alcance do polegar: dois botões largos, "próximo" maior;
     respeita a barra do iPhone (safe-area) */
  .rodape .dentro{display:flex !important;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom)) !important}
  .rodape .dentro > button, .rodape .dentro > a{height:50px !important;font-size:var(--t-15) !important}
  .rodape .dentro > :first-child{flex:1}
  .rodape .dentro > .primario{flex:1.6}
  .rodape .atalho{display:none !important}
}

/* ══ PORTAL DO CLIENTE ═══════════════════════════════════════════════════
   Uma história de cima para baixo, uma coluna só, larga de leitura (760 px):
   onde você está → o que falta → por onde começar → forte/espaço → leitura
   → linha do tempo. O gesto continua o da casa: tudo chega em foco. */
.portal{max-width:760px !important;margin:0 auto;padding:var(--e-7) var(--e-6) var(--e-7) !important}
.portal > section{margin-bottom:var(--e-7);animation:chega .7s var(--mola) both}
.portal > section:nth-child(2){animation-delay:.12s} .portal > section:nth-child(3){animation-delay:.2s}
.p-heroi .oi{margin:0 0 6px;color:var(--tx-3);font-size:var(--t-15)}
.p-heroi h1{margin:0;font-size:var(--t-48) !important;line-height:1.02 !important;letter-spacing:-.035em !important;
  font-weight:650 !important;color:var(--tx) !important}
.p-nota{display:flex;align-items:center;gap:var(--e-5);margin:var(--e-6) 0 var(--e-5)}
.p-nota .nota{font-size:96px !important;font-weight:650;letter-spacing:-.05em;line-height:.9;color:var(--c) !important;
  font-variant-numeric:tabular-nums}
.p-nota b{display:block;font-size:var(--t-22);font-weight:650;color:var(--tx)}
.p-nota small{display:block;font-size:var(--t-13);color:var(--tx-3);margin-top:4px}
/* a escada: 5 degraus, os vencidos cheios na cor do nível, o atual pulsa */
  border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--app);animation:pulsa-c 2.4s infinite}
@keyframes pulsa-c{0%{box-shadow:0 0 0 3px var(--app),0 0 0 3px color-mix(in oklab,var(--c) 50%,transparent)}
  70%{box-shadow:0 0 0 3px var(--app),0 0 0 12px transparent}100%{box-shadow:0 0 0 3px var(--app),0 0 0 3px transparent}}
.p-falta{margin:var(--e-5) 0 0;font-size:var(--t-17) !important;line-height:1.45;color:var(--tx-2);max-width:46ch}
.p-falta b{color:var(--tx)}
.p-acoes{margin-top:var(--e-5)}
.p-acoes .botao{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:999px;font-weight:600;
  font-size:var(--t-15);text-decoration:none}
.p-continua{display:flex;align-items:center;gap:var(--e-4);margin-top:var(--e-5);padding:14px 16px;border-radius:var(--r-3);
  background:var(--sup);border:1px solid var(--fio-v3);color:var(--tx);text-decoration:none;transition:border-color .2s}
.p-continua:hover{border-color:var(--tx-3)}
.p-continua small{display:block;color:var(--tx-3);font-size:var(--t-13);margin-top:2px}
.p-continua i{margin-left:auto;font-style:normal;font-size:var(--t-22);color:var(--tx-3)}
.p-anel{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--tx) calc(var(--p)*1%), var(--trilha) 0)}
.p-anel b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--sup);font-size:var(--t-12)}
.p-bloco h2, .p-duas h3{font-size:var(--t-22) !important;font-weight:650 !important;letter-spacing:-.02em !important;margin:0 0 4px !important}
.p-duas h3{font-size:var(--t-17) !important}
.p-bloco .dica{color:var(--tx-3) !important;font-size:var(--t-13) !important;margin:0 0 var(--e-4)}
/* os 3 passos: número grande, a ação em negrito, a pergunta como contexto */
.p-passos{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.p-passos li{display:flex;gap:var(--e-4);align-items:flex-start;padding:var(--e-4) var(--e-5);border-radius:var(--r-3);
  background:var(--sup);border:1px solid var(--fio-v3);font-size:var(--t-15);line-height:1.45;color:var(--tx-2)}
.p-passos b{color:var(--tx)}
.p-passos small{display:block;margin-top:6px;font-size:var(--t-12);color:var(--tx-3)}
.p-n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--tx);color:var(--app);
  font-weight:700;font-size:var(--t-15)}
.p-duas{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4)}
.p-lista{list-style:none;margin:0;padding:0}
.p-lista li{display:grid;grid-template-columns:minmax(0,1fr) auto 56px;align-items:baseline;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--fio-interno);font-size:var(--t-15)}
.p-lista li:last-child{border-bottom:0}
.p-lista b{font-size:var(--t-17)} .p-lista small{text-align:right;font-size:var(--t-12);font-weight:650}
.p-lista small.pos{color:var(--n5)} .p-lista small.neg{color:var(--n1)}
.p-leitura p{margin:0 0 var(--e-3);font-size:var(--t-17);line-height:1.6;color:var(--tx-2)}
  box-shadow:0 0 0 3px var(--app)}
.portal-topo .acoes-topo{margin-left:auto}
@media (max-width:640px){
  .portal{padding:var(--e-5) var(--e-4) var(--e-6) !important}
  .p-heroi h1{font-size:var(--t-30) !important}
  .p-nota .nota{font-size:72px !important}
  .p-duas{grid-template-columns:1fr}
  .p-passos li{padding:14px}
  .p-acoes .botao{width:100%;justify-content:center}
}

/* ── acessos da empresa (ficha) ── */
.ac-lista{list-style:none;margin:0 0 var(--e-4);padding:0}
.ac-lista li{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--fio-interno)}
.ac-lista li span{flex:1;min-width:0}
.ac-lista li b{display:block;font-size:var(--t-15);color:var(--tx)}
.ac-lista li small{display:block;font-size:var(--t-12);color:var(--tx-3)}
.ac-lista li.inativo b{color:var(--tx-4);text-decoration:line-through}
.ac-lista button{height:34px;padding:0 12px;font-size:var(--t-13)}
.ac-novo{display:grid;gap:10px;padding:var(--e-4);border:1px solid var(--fio-v3);border-radius:var(--r-2);background:var(--sup-2)}
.ac-novo > b{font-size:var(--t-15)}
.ac-novo label{display:grid;gap:4px;font-size:var(--t-13);color:var(--tx-2)}
.ac-novo input{height:40px}
.ac-senha{display:flex;gap:6px} .ac-senha input{flex:1;min-width:0;letter-spacing:.04em}
.ac-senha button{width:40px;height:40px;padding:0;font-size:var(--t-17)}
.ac-novo .primario{height:42px}
.ac-erro{color:var(--n1);font-size:var(--t-13)}
.ac-pronto{margin-top:var(--e-4);padding:var(--e-4);border:1px solid var(--n5);border-radius:var(--r-2);
  background:color-mix(in oklab,var(--n5) 8%,var(--sup));display:grid;gap:10px;animation:pop .35s var(--mola) both}
.ac-pronto dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:var(--t-15)}
.ac-pronto dt{color:var(--tx-3)} .ac-pronto dd{margin:0;color:var(--tx);font-weight:600}
.ac-pronto textarea{width:100%;font-size:var(--t-13);color:var(--tx-2);background:var(--sup);border:1px solid var(--fio-interno);
  border-radius:10px;padding:10px;resize:none}
.ac-pronto .primario{height:42px}
.ac-link{margin-top:var(--e-3);font-size:var(--t-13) !important;color:var(--tx-3) !important;border:0 !important;
  background:transparent !important;padding:0 !important;text-decoration:underline}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}
.fundo{z-index:100 !important}

/* ══ PORTAL v2 — a conversa ═══════════════════════════════════════════════ */
.p-sentido{margin:var(--e-3) 0 0;font-size:var(--t-17);line-height:1.5;color:var(--tx-2);max-width:52ch}
.p-sentido b{color:var(--tx)}
/* trilha contínua: cada degrau na largura real da sua faixa de nota */
.p-trilha{position:relative;margin:var(--e-7) 0 var(--e-2);padding-top:30px}
.pt-barra{display:flex;gap:4px}
.pt-t{display:grid;gap:10px;min-width:0}
.pt-t i{display:block;height:10px;border-radius:99px;background:var(--trilha)}
.pt-t.feito i{background:var(--c)}
.pt-t.aqui i{background:linear-gradient(90deg,var(--c) 0 calc(var(--andou,100%)),var(--trilha) 0)}
.pt-t em{font-style:normal;font-size:var(--t-12);color:var(--tx-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-t.aqui em{color:var(--tx);font-weight:650} .pt-t.feito em{color:var(--tx-3)}
.pt-t i{transform-origin:left;animation:cresce .9s var(--mola) both}
.pt-voce{position:absolute;top:0;left:var(--nota);transform:translateX(-50%);display:grid;justify-items:center;
  animation:chega .8s .5s var(--mola) both}
.pt-voce b{font-size:var(--t-12);font-weight:650;color:var(--app);background:var(--tx);padding:3px 9px;border-radius:999px;
  white-space:nowrap}
.pt-voce::after{content:"";width:16px;height:16px;margin-top:4px;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 3px var(--app);animation:pulsa-c 2.4s 1.3s infinite}
.pt-alvo{position:absolute;top:26px;left:0;transform:translateX(-1px);height:18px;border-left:2px dashed var(--tx-3)}
.pt-alvo b{position:absolute;top:-32px;left:-1px;transform:translateX(-50%);font-size:var(--t-12);color:var(--tx-3);
  font-weight:600;white-space:nowrap;border:1px dashed var(--fio-v3);padding:2px 8px;border-radius:999px;background:var(--app)}
.p-falta{margin-top:var(--e-6) !important}
/* o que já funciona: um anel e a lista dos fortes */
.p-ja{display:grid;grid-template-columns:auto 1fr;gap:var(--e-6);align-items:center;padding:var(--e-5);
  background:var(--sup);border:1px solid var(--fio-v3);border-radius:var(--r-3)}
.p-ja-num{display:flex;align-items:center;gap:var(--e-4)}
.p-ja-num b{flex:none;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:var(--t-22);
  background:radial-gradient(closest-side,var(--sup) 78%,transparent 79% 100%),
    conic-gradient(var(--n5) calc(var(--p)*1%), var(--trilha) 0)}
.p-ja-num span{font-size:var(--t-15);color:var(--tx-2);line-height:1.35;max-width:14ch}
.p-ja-num small{display:block;font-size:var(--t-12);color:var(--tx-4);margin-top:4px}
.p-ja .p-lista li{grid-template-columns:minmax(0,1fr) auto auto}
/* os passos: a AÇÃO é a manchete, o processo é o contexto, o porquê convence */
.p-passos li{animation:chega .6s calc(.15s + var(--i)*.1s) var(--mola) both;padding:var(--e-5) !important;gap:var(--e-4)}
.p-acao{display:inline-block;font-size:var(--t-12);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;border:1px solid var(--fio-v3);color:var(--tx)}
.p-acao.e-baixo{border-color:var(--n5);color:var(--n5)}
.p-acao.e-médio, .p-acao.e-medio{border-color:var(--n3,var(--tx-3));color:var(--tx-2)}
.p-proc{margin:8px 0 0;font-size:var(--t-17);line-height:1.45;color:var(--tx)}
.p-porque{margin:6px 0 0;font-size:var(--t-13);line-height:1.5;color:var(--tx-3)}
.p-passos small{margin-top:10px !important}
.p-proj{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;margin-top:var(--e-4);padding:var(--e-4) var(--e-5);
  border-radius:var(--r-3);border:1px dashed var(--fio-v3);color:var(--tx-2);font-size:var(--t-15)}
.p-proj b{font-size:var(--t-30);font-weight:650;color:var(--tx)} .p-proj i{font-style:normal;color:var(--tx-3);font-size:var(--t-22)}
/* o fecho: uma voz, não um rodapé */
.p-fecho{padding:var(--e-6) 0 var(--e-2);border-top:1px solid var(--fio-interno)}
.p-fecho p{margin:0;font-size:var(--t-17);line-height:1.6;color:var(--tx-2);max-width:56ch}
.p-fecho b{color:var(--tx)}
.p-assina{margin-top:var(--e-4) !important;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-style:italic;font-size:var(--t-22) !important;color:var(--tx) !important}
.p-assina small{display:block;font-family:var(--fonte);font-style:normal;font-size:var(--t-12);color:var(--tx-4);margin-top:2px}
@media (max-width:640px){
  .pt-t:not(.aqui) em{visibility:hidden}
  .p-ja{grid-template-columns:1fr;gap:var(--e-4)}
  .p-proj b{font-size:var(--t-22)}
  .p-sentido, .p-fecho p{font-size:var(--t-15)}
}
.pt-t.aqui em{overflow:visible;text-overflow:clip}

/* ══ SELO GIRATÓRIO ══════════════════════════════════════════════════════ */
.p-nota{position:relative}
.selo-gira{margin-left:auto;flex:none;width:148px;height:148px;color:var(--c,var(--tx-3));
  animation:chega .9s .6s var(--mola) both}
.selo-gira svg{width:100%;height:100%;overflow:visible}
.sg-borda{fill:none;stroke:currentColor;stroke-width:1.6;opacity:.75}
.sg-tracejo{fill:none;stroke:currentColor;stroke-width:1.2;stroke-dasharray:3 5;opacity:.6}
.sg-anel{transform-origin:100px 100px;animation:gira 48s linear infinite}
.sg-anel text{font-size:13px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;fill:currentColor;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.sg-num{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-weight:700;
  font-size:40px;fill:currentColor}
.sg-rot{font-size:11px;letter-spacing:.24em;text-transform:uppercase;fill:currentColor;font-weight:600}
.selo-gira:hover .sg-anel{animation-duration:12s}
@keyframes gira{to{transform:rotate(360deg)}}

/* ══ EVOLUÇÃO ════════════════════════════════════════════════════════════ */
.ev-cab{display:flex;align-items:center;gap:var(--e-5);margin:var(--e-3) 0 var(--e-4)}
.ev-cab p{margin:0;font-size:var(--t-15);line-height:1.5;color:var(--tx-2);max-width:48ch}
.ev-cab p b{color:var(--tx)}
.ev-delta{flex:none;display:grid;justify-items:start;padding:10px 16px;border-radius:var(--r-3);
  border:1px solid currentColor;animation:pop .6s .3s var(--mola) both}
.ev-delta b{font-size:var(--t-30);font-weight:650;letter-spacing:-.03em;line-height:1}
.ev-delta small{font-size:var(--t-12);color:var(--tx-3);margin-top:4px}
.ev-delta.pos{color:var(--n5)} .ev-delta.neg{color:var(--n1)}
.ev-sel{flex:none;font-size:var(--t-12);font-weight:650;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;
  border-radius:999px;border:1px solid var(--fio-v3);color:var(--tx)}
.ev-graf{display:block;width:100%;height:auto;padding:var(--e-4);background:var(--sup);border:1px solid var(--fio-v3);
  border-radius:var(--r-3);box-sizing:border-box;overflow:visible}
.ev-faixa{font-size:11px;fill:var(--tx-4);font-weight:600;letter-spacing:.04em}
.ev-linha{fill:none;stroke:var(--tx);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:desenha 1.4s .3s var(--mola) forwards}
@keyframes desenha{to{stroke-dashoffset:0}}
.ev-futuro{stroke:var(--tx-4);stroke-width:2;stroke-dasharray:4 6}
.ev-fantasma{fill:var(--app);stroke:var(--tx-3);stroke-width:2;stroke-dasharray:3 3}
.ev-ponto{animation:chega .5s calc(.4s + var(--i) * .25s) var(--mola) both}
.ev-ponto circle{stroke:var(--app);stroke-width:3}
.ev-ultimo{animation:pulsa-svg 2.4s 2s infinite}
@keyframes pulsa-svg{0%,100%{stroke-width:3}50%{stroke-width:7}}
.ev-nota{font-size:15px;font-weight:700;fill:var(--tx);font-variant-numeric:tabular-nums}
.ev-data{font-size:12px;fill:var(--tx-3)}
.ev-sub{font-size:var(--t-15) !important;font-weight:600 !important;margin:var(--e-5) 0 var(--e-2) !important}
.ev-areas{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ev-areas li{display:grid;grid-template-columns:minmax(0,1fr) 1fr 56px;align-items:center;gap:var(--e-3);padding:8px 0;
  border-bottom:1px solid var(--fio-interno);font-size:var(--t-15);color:var(--tx-2)}
.ev-areas i{display:block;height:6px;width:var(--w);border-radius:99px;transform-origin:left;animation:cresce 1s .6s var(--mola) both}
.ev-areas i.pos{background:var(--n5)} .ev-areas i.neg{background:var(--n1)}
.ev-areas b{text-align:right;font-variant-numeric:tabular-nums} .ev-areas b.pos{color:var(--n5)} .ev-areas b.neg{color:var(--n1)}
@media (max-width:640px){
  .p-nota{flex-wrap:wrap}
  .selo-gira{width:112px;height:112px;margin-left:0}
  .ev-cab{flex-direction:column;align-items:flex-start;gap:var(--e-3)}
  .ev-graf{padding:8px}
  .ev-areas li{grid-template-columns:minmax(0,1fr) 70px 48px}
}
@media (prefers-reduced-motion: reduce){.ev-linha{stroke-dashoffset:0}}

/* A COREOGRAFIA (30/10/2026) — o Groq dirige, a página se move. A leitura do
   sistema só se escreve quando a pessoa CHEGA nela, no ritmo de quem escreve
   (--d vem do JS). Escrita, o marca-texto corre sob o trecho que o Groq
   escolheu; as áreas citadas ficam pontilhadas e acendem a linha delas; o
   anel do olhar percorre a página na ordem que importa; e o tom vira um gesto. */
.p-leitura{--tom:var(--n4)}
.p-leitura.viva .w{display:inline-block}
.p-leitura.viva:not(.vai) .w{opacity:0}
.p-leitura.viva.vai .w{animation:ia-palavra .75s var(--d) var(--mola) both}
@keyframes ia-palavra{from{opacity:0;filter:blur(5px);transform:translateY(2px)}}
.p-marca{color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 2px;border-radius:3px;
  background:linear-gradient(color-mix(in oklab, var(--tom) 42%, transparent), color-mix(in oklab, var(--tom) 42%, transparent))
    no-repeat 0 88% / 0% 42%;transition:background-size 1.2s var(--mola)}
.p-leitura.escrito .p-marca{background-size:100% 42%}
.p-elo{border-bottom:1.5px dotted color-mix(in oklab, var(--tx) 55%, transparent);cursor:pointer;
  transition:color .25s, border-color .25s}
.p-elo.ativo, .p-elo:hover, .p-elo:focus-visible{color:var(--tom);border-bottom-color:var(--tom);outline:none}
.p-lista li{transition:background .35s var(--mola), box-shadow .35s var(--mola)}
.p-lista li.p-acende{background:color-mix(in oklab, var(--tx) 7%, transparent);
  box-shadow:-3px 0 0 var(--tx) inset;border-radius:8px}
.p-lista li.p-pulsa{animation:p-pulsa 1.1s var(--mola) 1}
@keyframes p-pulsa{30%{background:color-mix(in oklab, var(--tx) 14%, transparent)}}
.olho-anel{position:fixed;z-index:60;pointer-events:none;border-radius:20px;opacity:0;
  border:1.5px solid color-mix(in oklab, var(--tom) 75%, transparent);
  box-shadow:0 0 0 6px color-mix(in oklab, var(--tom) 9%, transparent), 0 0 44px color-mix(in oklab, var(--tom) 26%, transparent)}
.olho-anel.aponta{pointer-events:auto;cursor:pointer;border-radius:999px;display:grid;place-items:center;
  background:color-mix(in oklab, var(--tom) 14%, var(--app));animation:aponta 1.6s var(--mola) .2s infinite}
.olho-anel.aponta::after{content:"";width:9px;height:9px;margin-top:-5px;border-right:2px solid var(--tom);
  border-bottom:2px solid var(--tom);transform:rotate(45deg)}
@keyframes aponta{50%{translate:0 6px}}
.acorda{animation:acorda 1.6s var(--mola) 1}
.acorda-forte{animation:acorda-forte 2s var(--mola) 1}
@keyframes acorda{35%{box-shadow:0 0 0 1.5px color-mix(in oklab, var(--tom) 60%, transparent), 0 0 30px color-mix(in oklab, var(--tom) 18%, transparent)}}
@keyframes acorda-forte{30%{box-shadow:0 0 0 2px var(--tom), 0 0 48px color-mix(in oklab, var(--tom) 32%, transparent);transform:translateY(-2px)}}
.selo-gira.g-celebra svg{animation:g-celebra 1.6s var(--mola) 1}
@keyframes g-celebra{from{transform:rotate(-360deg) scale(.92)}}
.p-nota.g-celebra .nota{animation:g-brilho 1.6s ease-out 1}
@keyframes g-brilho{35%{text-shadow:0 0 28px var(--c)}}
.pt-voce.g-encoraja{animation:g-passo 1.8s var(--mola) 1}
@keyframes g-passo{25%,55%{transform:translateX(calc(-50% + 16px))}40%{transform:translateX(calc(-50% + 6px))}}
.p-espaco .carta.g-alerta{animation:g-alerta 1.4s ease-out 1}
@keyframes g-alerta{30%{box-shadow:0 0 0 2px var(--n1), 0 0 32px color-mix(in oklab, var(--n1) 35%, transparent)}}
@media (prefers-reduced-motion: reduce){
  .p-leitura.viva .w{opacity:1} .p-leitura.viva.vai .w{animation:none}
  .p-marca{transition:none}
  .selo-gira.g-celebra svg, .p-nota.g-celebra .nota, .pt-voce.g-encoraja, .p-espaco .carta.g-alerta,
  .p-lista li.p-pulsa, .acorda, .acorda-forte, .olho-anel.aponta{animation:none}}
.p-ia-nota{margin-top:var(--e-4) !important;font-size:var(--t-12) !important;color:var(--tx-4) !important;
  animation:chega .8s 1.4s var(--mola) both}
.p-acoes{display:flex;flex-wrap:wrap;gap:10px}
.p-pdf{display:inline-flex;align-items:center;height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--fio-v3);
  color:var(--tx);text-decoration:none;font-weight:600;font-size:var(--t-15)}
.p-pdf:hover{border-color:var(--tx-3)}
/* Baixar PDF: enquanto o servidor imprime, um anel gira ao lado do texto e o botão trava */
a.baixando{cursor:progress;opacity:.75;pointer-events:none}
a.baixando::before{content:"";width:13px;height:13px;margin-right:9px;border-radius:50%;flex:none;display:inline-block;
  vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;animation:gira .8s linear infinite}
a.baixou{border-color:var(--tx-3)}
@media (prefers-reduced-motion: reduce){a.baixando::before{animation-duration:2.4s}}