/* ⚠️ @import TEM que ser a primeira regra do arquivo — depois de qualquer outra o navegador
   ignora em silêncio e a fonte simplesmente não carrega (erro nenhum no console).
   Outfit = display/geométrica (títulos, nav, números). Inter = texto corrido.
   Puxa da CDN do Google; pro CRM em produção (PWA offline) o certo é hospedar os .woff2. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   tema.css — SISTEMA DE DESIGN DO GENOS  ·  v4 (2026-08-10)
   ═══════════════════════════════════════════════════════════════════════════════════════════════

   PALETA: ouro + roxo índigo sobre preto. Sem verde. (Definida pelo Rich.)

   ┌───────────────────────────────────────────────────────────────────────────────────────────┐
   │  ARQUITETURA EM 3 CAMADAS — é o que torna isto escalável em vez de uma lista de cores.    │
   │                                                                                           │
   │    3. COMPONENTE   --btn-alt, --card-pad        muda um componente só                     │
   │    2. SEMÂNTICA    --acao, --superficie         muda o SIGNIFICADO (troca de tema)        │
   │    1. PRIMITIVO    --ouro-500, --esp-4          valores crus, quase nunca mudam           │
   │                                                                                           │
   │  REGRA DE OURO: componente NUNCA usa primitivo direto. Sempre passa pela semântica.       │
   │  Por quê: quando você quiser um tema claro, ou trocar o ouro por outra cor de marca,      │
   │  você mexe em ~20 linhas da camada 2 — e não caça hex em 40 lugares. Foi exatamente essa  │
   │  caçada que deixou o CRM com 2 verdes diferentes e 11 raios de borda.                     │
   └───────────────────────────────────────────────────────────────────────────────────────────┘

   AUDITORIA DE CONTRASTE (medida, não estimada — 2026-08-10). Corrigido nesta versão:
     · texto sutil sobre campo dava 2,94:1 (mínimo 3) → clareado pra 3,4:1
     · bordas davam 1,2:1 — você não via onde o campo começava → borda de campo agora 3,1:1
     · roxo puro (#6D4AFF) como TEXTO dá 3,71:1: reprovado. Ele é cor de BORDA e BRILHO;
       pra texto existe --roxo-300. Está anotado aqui pra não voltar por engano.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║  CAMADA 1 — PRIMITIVOS  ·  valores crus, sem significado. Ninguém usa direto.           ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝ */
:root {
  /* ouro */
  --ouro-200: #FFE79A;
  --ouro-300: #FFD75E;
  --ouro-400: #FFB020;
  --ouro-500: #F5B81C;
  --ouro-600: #C98A05;
  --ouro-900: #17120A;

  /* roxo índigo (puxado pro azul) */
  --roxo-300: #9C86FF;
  --roxo-400: #8B6BFF;
  --roxo-500: #6D4AFF;
  --roxo-700: #3A1F9E;

  /* tinta. ⚫ --tinta-0 é PRETO PURO: é o fundo que fica atrás de TUDO (pedido do Rich).
     Os cards ficam acima dele com violeta na mistura — é o salto do preto absoluto pro card
     violáceo que cria a separação, no lugar de sombra (que no escuro praticamente some). */
  --tinta-0:   #000000;
  --tinta-50:  #0E0B18;   /* card */
  --tinta-100: #151122;   /* campo / superfície interna */
  --tinta-200: #1D1830;   /* hover */
  /* borda de card. Contra preto puro fica em ~1,7:1 — e isso está CERTO: o mínimo de 3:1
     (WCAG 1.4.11) vale pra controle e gráfico com significado, não pra aresta decorativa de
     container, que já é identificado pelo próprio preenchimento. Empurrar até 3:1 deixaria
     todo card contornado feito wireframe, o oposto da referência. Campo é outra história e
     tem token próprio (--borda-campo), esse sim medido em 3:1. */
  --tinta-300: #332B52;
  --tinta-400: #3E3560;
  --tinta-500: #6E6390;   /* menor valor que passa 3:1 contra card E campo (medido) */
  --tinta-600: #7B7389;
  --tinta-700: #A49CAF;
  --tinta-900: #F2F0F7;

  --vermelho-500: #FF4D5E;

  /* escala de espaço, base 4 */
  --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:24px; --esp-6:32px; --esp-7:48px; --esp-8:64px;

  /* escala tipográfica */
  --tam-1:11px; --tam-2:12px; --tam-3:13.5px; --tam-4:15px; --tam-5:19px; --tam-6:25px; --tam-7:34px;
  --peso-normal:400; --peso-medio:600; --peso-forte:700; --peso-max:800;

  /* raio */
  --raio-1:10px; --raio-2:14px; --raio-3:20px; --raio-total:999px;

  /* duração — 150-300ms é a faixa em que micro-interação lê como resposta, não como
     mágica (abaixo parece corte seco, acima parece lerdeza). */
  --dur-1:160ms; --dur-2:240ms; --dur-3:520ms;
  --curva: cubic-bezier(.4,0,.2,1);
  --curva-saida: cubic-bezier(.16,1,.3,1);

  /* tipo — DUAS famílias com trabalhos diferentes:
     Outfit  = título, nav, número, wordmark. É o desenho geométrico e redondo da referência.
     Inter   = texto corrido e rótulo miúdo, onde Outfit começa a perder legibilidade.
     Antes era só system-ui, e fonte de sistema é um dos maiores denunciadores de "genérico". */
  --pilha-display: 'Outfit','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  --pilha-fonte:   'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
}

/* ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║  CAMADA 2 — SEMÂNTICA  ·  o que a cor SIGNIFICA. É aqui que se troca de tema.           ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝ */
:root {
  /* superfícies */
  --fundo:         var(--tinta-0);
  --superficie:    var(--tinta-50);
  --superficie-2:  var(--tinta-100);
  --superficie-3:  var(--tinta-200);
  --borda:         var(--tinta-300);
  --borda-forte:   var(--tinta-400);
  /* Borda de CAMPO tem regra própria (WCAG 1.4.11): num formulário ela é o que diz "aqui você
     digita", então precisa de 3:1 — e contra as DUAS vizinhas, o card atrás e o preenchimento
     dentro. Na v2 dava 1,2:1 e o campo literalmente sumia. #6E6390 é o valor mais escuro que
     passa nos dois lados (3,51 e 3,33), calculado, não chutado. Parece claro fora de contexto;
     na tela é exatamente o que faz o campo existir.
     A --borda comum fica escura de propósito: divisória decorativa não tem esse requisito, e
     clarear todas deixaria a tela riscada. */
  --borda-campo:   var(--tinta-500);

  /* conteúdo */
  --conteudo:       var(--tinta-900);
  --conteudo-mudo:  var(--tinta-700);
  --conteudo-sutil: var(--tinta-600);

  /* ação (a marca) */
  --acao:        var(--ouro-500);
  --acao-clara:  var(--ouro-300);
  --acao-escura: var(--ouro-600);
  --acao-texto:  var(--ouro-900);        /* texto EM CIMA de ouro — nunca branco (daria 1,5:1) */
  --acao-veu:    rgba(245,184,28,.12);
  --acao-borda:  rgba(245,184,28,.32);

  /* foco e realce (roxo) */
  --foco:        var(--roxo-500);
  --realce-txt:  var(--roxo-300);        /* roxo LEGÍVEL. --roxo-500 em texto reprova (3,71:1). */
  --realce-veu:  rgba(109,74,255,.14);
  --realce-borda: rgba(109,74,255,.34);

  /* estados — todos saem da paleta, exceto "parado" (ver nota) */
  --estado-ok:       var(--ouro-500);
  --estado-curso:    var(--roxo-500);
  --estado-atencao:  var(--ouro-400);
  /* ⚠️ ÚNICA cor fora da paleta ouro+roxo. Existe só pra destruir: "apagar pedido" não pode
     parecer igual a "aprovar". Não é decoração, é freio. Aparece pouco, de propósito. */
  --estado-parado:   var(--vermelho-500);
  --parado-veu:      rgba(255,77,94,.12);
  --atencao-veu:     rgba(255,176,32,.13);

  /* metal e luz — o que separa "ouro" de "amarelo de marca-texto" */
  --metal:      linear-gradient(145deg, var(--ouro-200) 0%, var(--ouro-500) 42%, var(--ouro-600) 100%);
  --metal-txt:  linear-gradient(100deg, var(--ouro-200) 0%, var(--ouro-500) 55%, #E0A312 100%);
  --metal-roxo: linear-gradient(145deg, var(--roxo-400) 0%, var(--roxo-500) 50%, #4526C4 100%);
  --luz-acao:   0 0 0 1px rgba(245,184,28,.35), 0 10px 34px -8px rgba(245,184,28,.45);
  --luz-foco:   0 0 0 3px rgba(109,74,255,.45);

  /* 🌌 CARD — três coisas empilhadas, e é a soma que dá a profundidade da referência:
       1. inclinação: topo mais claro que a base, como se a luz viesse de cima;
       2. brilho violeta NASCENDO de dentro do card (radial no canto), não do fundo da página
          — o fundo agora é preto puro, então a luz tem que morar dentro do objeto;
       3. a cor base violácea, que contra o preto absoluto já separa sozinha.
     Na v3 a luz vivia no fundo da página e os cards eram cinza chapado: parecia adesivo. */
  --inclinacao:   linear-gradient(168deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 42%);
  --inclinacao-2: linear-gradient(168deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 46%);
  --brilho-card:  radial-gradient(120% 100% at 92% 0%, rgba(109,74,255,.14), transparent 58%);
  --brilho-card-2: radial-gradient(120% 100% at 88% 0%, rgba(109,74,255,.10), transparent 60%);

  /* profundidade: sombra + um fio de luz interno na aresta de cima */
  --sombra-m: 0 6px 22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  --sombra-g: 0 28px 80px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
  --sombra-card: 0 2px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.045);

  /* tipografia semântica */
  --fonte: var(--pilha-fonte);
  --t-micro: var(--tam-1); --t-peq: var(--tam-2); --t-base: var(--tam-3);
  --t-med: var(--tam-4);   --t-tit: var(--tam-5); --t-hero: var(--tam-7);

  /* espaço/raio semânticos (aliases usados pelo HTML — mantidos por compatibilidade) */
  --e1:var(--esp-1); --e2:var(--esp-2); --e3:var(--esp-3); --e4:var(--esp-4);
  --e5:var(--esp-5); --e6:var(--esp-6); --e7:var(--esp-7); --e8:var(--esp-8);
  --r-p:var(--raio-1); --r-m:var(--raio-2); --r-g:var(--raio-3); --r-t:var(--raio-total);
  --rapido: var(--dur-1) var(--curva);
  --normal: var(--dur-2) var(--curva);
  --suave:  var(--dur-3) var(--curva-saida);
}

/* ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║  CAMADA 3 — COMPONENTE  ·  ajuste de um componente sem mexer no resto.                  ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝ */
:root {
  /* 🖐️ ALVO MÍNIMO DE TOQUE: 44px. Não é preciosismo — dedo não acerta 30px, e metade
     da operação do Rich acontece no celular. Botão pequeno mantém a APARÊNCIA compacta e
     estica a área clicável por fora (::after invisível), então nada muda visualmente. */
  --alvo-min: 44px;

  --btn-alt: 42px;   --btn-pad-x: var(--esp-4);
  --btn-alt-p: 32px; --btn-pad-x-p: var(--esp-3);
  --btn-alt-g: 52px; --btn-pad-x-g: var(--esp-5);

  --campo-alt: 46px; --campo-pad-x: 15px;

  --card-pad: var(--esp-5);
  --card-pad-2: var(--esp-4);

  /* ícone: 3 tamanhos e ponto. Misturar 20/21/25 aleatoriamente é o que tira o ritmo. */
  --icone-p: 14px; --icone-m: 18px; --icone-g: 24px;
  --icone-traco: 1.6;

  --sidebar: 248px;
  --topo-alt: 64px;
  --leitura-max: 68ch;   /* medida de leitura confortável */
}

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

/* ═══════════ BASE ═══════════ */
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--conteudo); font: var(--t-base)/1.55 var(--fonte);
  -webkit-font-smoothing: antialiased; background: var(--fundo);
}
/* ⚫ O FUNDO É PRETO PURO E FICA PRETO. Na v3 havia dois halos coloridos aqui atrás; o Rich
   pediu preto absoluto, e a referência dele confirma: fora dos cards não tem cor nenhuma.
   A luz mudou de lugar — saiu do fundo da página e foi pra DENTRO dos cards (--brilho-card).
   Sobrou só o granulado, que não colore nada: ele existe pra matar o "banding" (as faixas que
   aparecem em degradê escuro em tela de 8 bits) e tirar o aspecto de vetor liso. */
body::after {
  content:''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}
::selection { background: rgba(245,184,28,.26); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--superficie-3); border-radius: var(--r-t); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--borda-forte); background-clip: content-box; }

.num { font-family: var(--pilha-display); font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.medida { max-width: var(--leitura-max); }

/* ═══════════ ÍCONES ═══════════ */
/* um só tamanho por nível de hierarquia — mistura de 20/21/25 é o que tira o ritmo */
svg { flex-shrink: 0; }
.ic-p { width: var(--icone-p); height: var(--icone-p); }
.ic-m { width: var(--icone-m); height: var(--icone-m); }
.ic-g { width: var(--icone-g); height: var(--icone-g); }

/* ═══════════ TIPOGRAFIA ═══════════ */
/* Outfit (display) em tudo que é estrutura visível: rótulo de seção, título, número, marca.
   Inter fica no texto corrido. É a divisão que a referência do Rich usa. */
.eyebrow, .eyebrow-mut { font: var(--peso-forte) var(--t-micro)/1.2 var(--pilha-display); letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { color: var(--acao); }
.eyebrow-mut { color: var(--conteudo-mudo); }
.hero { font: var(--peso-max) var(--t-hero)/1.1 var(--pilha-display); letter-spacing: -.03em; margin: 0; }
.titulo { font: var(--peso-forte) var(--t-tit)/1.3 var(--pilha-display); letter-spacing: -.015em; margin: 0; }
.apoio { font-size: var(--t-peq); color: var(--conteudo-mudo); }
.ouro { background: var(--metal-txt); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wordmark { font: 900 var(--tam-6)/1 var(--pilha-display); letter-spacing: .22em; text-transform: uppercase;
  background: var(--metal-txt); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .22em; }
.wordmark-peq { font-size: 17px; letter-spacing: .2em; }

/* ═══════════ ARO DE LUZ ═══════════ */
/* degradê de 1px que acende no topo e apaga na base, no lugar de `border: 1px solid cinza` */
.aro { position: relative; }
.aro::before {
  content:''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.02) 38%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.aro-ouro::before { background: linear-gradient(160deg, rgba(245,184,28,.6), rgba(245,184,28,.12) 40%, transparent 72%); }
.aro-roxo::before { background: linear-gradient(160deg, rgba(109,74,255,.6), rgba(109,74,255,.14) 40%, transparent 72%); }

/* ═══════════ BOTÕES ═══════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--btn-alt); padding: 0 var(--btn-pad-x);
  border: 1px solid transparent; border-radius: var(--r-p);
  font: var(--peso-medio) var(--t-base)/1 var(--pilha-display);
  cursor: pointer; white-space: nowrap; text-decoration: none; position: relative;
  transition: transform var(--rapido), box-shadow var(--normal), background var(--rapido), border-color var(--rapido), color var(--rapido);
}
.btn > svg { width: var(--icone-m); height: var(--icone-m); }
/* ↓ estica a área clicável até 44px SEM mudar a aparência (o pseudo é invisível) */
.btn::before { content:''; position: absolute; left:0; right:0; top:50%; transform: translateY(-50%);
  min-height: var(--alvo-min); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--luz-foco); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-1 { background: var(--metal); color: var(--acao-texto); font-weight: 750; box-shadow: var(--luz-acao); }
.btn-1:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(245,184,28,.5), 0 12px 34px -6px rgba(245,184,28,.5); filter: brightness(1.06); }
.btn-2 { background: var(--superficie-2); color: var(--conteudo); border-color: var(--borda-forte); }
.btn-2:hover:not(:disabled) { background: var(--superficie-3); border-color: var(--realce-borda); box-shadow: 0 0 0 1px rgba(109,74,255,.2); }
.btn-3 { background: transparent; color: var(--conteudo-mudo); }
.btn-3:hover:not(:disabled) { background: var(--superficie-2); color: var(--conteudo); }
.btn-roxo { background: var(--realce-veu); color: var(--realce-txt); border-color: var(--realce-borda); }
.btn-roxo:hover:not(:disabled) { background: rgba(109,74,255,.24); box-shadow: 0 6px 22px -8px rgba(109,74,255,.6); }
/* destrutivo: cinza em repouso, vermelho só no hover — a tela fica aberta o dia inteiro */
.btn-perigo { background: transparent; color: var(--conteudo-mudo); border-color: var(--borda); }
.btn-perigo:hover:not(:disabled) { background: var(--parado-veu); color: var(--estado-parado); border-color: rgba(255,77,94,.38); }

.btn-peq { min-height: var(--btn-alt-p); padding: 0 var(--btn-pad-x-p); font-size: var(--t-peq); }
.btn-peq > svg { width: var(--icone-p); height: var(--icone-p); }
.btn-g { min-height: var(--btn-alt-g); padding: 0 var(--btn-pad-x-g); font-size: var(--t-med); border-radius: var(--r-m); }
.btn-bloco { width: 100%; }

/* ═══════════ CARDS ═══════════ */
/* Borda AGORA É BORDA de verdade (1px sólida e visível), não só o degradê do .aro. Na
   referência do Rich cada card tem um contorno violeta nítido — é ele que delimita o objeto
   contra o preto puro. O .aro continua por cima, acendendo a aresta de cima. */
.card { background: var(--brilho-card), var(--inclinacao), var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--r-g); padding: var(--card-pad);
  box-shadow: var(--sombra-card); position: relative; }
.card > * { position: relative; }
.card-2 { background: var(--brilho-card-2), var(--inclinacao-2), var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--r-m); padding: var(--card-pad-2);
  box-shadow: var(--sombra-card); position: relative; }
.card-click { cursor: pointer; transition: transform var(--normal), box-shadow var(--normal), border-color var(--normal); }
.card-click:hover { transform: translateY(-2px); border-color: var(--acao-borda);
  box-shadow: var(--sombra-m), 0 0 34px -14px rgba(245,184,28,.55); }
.card-click:hover::before { background: linear-gradient(160deg, rgba(245,184,28,.5), rgba(245,184,28,.1) 40%, transparent 72%); }
.card-alerta::after, .card-perigo::after, .card-curso::after {
  content:''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; }
.card-alerta::after { background: var(--estado-atencao); box-shadow: 0 0 16px rgba(255,176,32,.6); }
.card-perigo::after { background: var(--estado-parado);  box-shadow: 0 0 16px rgba(255,77,94,.55); }
.card-curso::after  { background: var(--estado-curso);   box-shadow: 0 0 16px rgba(109,74,255,.6); }
.card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-4); }

/* ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║  ORNAMENTO — o que preenche o vazio de um card sem virar ilustração.                    ║
   ║                                                                                         ║
   ║  Regras que valem pra TODOS (é o que separa ornamento de poluição):                     ║
   ║   1. Fica ATRÁS do conteúdo e não intercepta clique (pointer-events: none).             ║
   ║   2. Tem MÁSCARA que apaga o ornamento do lado onde mora o texto — ele nunca            ║
   ║      atravessa por baixo de uma palavra e nunca derruba contraste de leitura.           ║
   ║   3. Opacidade baixíssima (5-8%). Se você reparar nele de primeira, está forte demais.  ║
   ║   4. Zero imagem e zero JS: é degradê e SVG inline, então escala e não pesa.            ║
   ║                                                                                         ║
   ║  Uso: <div class="card"><div class="deco deco-topo"></div> …conteúdo… </div>            ║
   ║  Combináveis: deco-topo + deco-const, por exemplo.                                      ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝ */
/* ⚠️ CADA ORNAMENTO É UM ELEMENTO PRÓPRIO, não um ::before por classe. A primeira versão
   disto punha todos no mesmo ::before — combinar `deco-topo deco-arcos` fazia um sobrescrever
   o outro e só o último do arquivo aparecia, calado. Com um <i> por camada elas empilham. */
.deco, .card > .deco { position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  pointer-events: none; z-index: 0; }
.deco > i { position: absolute; inset: -25%; display: block;
  /* máscara padrão: apaga o ornamento à esquerda, onde mora o texto — ele nunca atravessa
     por baixo de uma palavra nem derruba contraste de leitura */
  -webkit-mask-image: linear-gradient(100deg, transparent 0 26%, #000 78%);
  mask-image: linear-gradient(100deg, transparent 0 26%, #000 78%); }
/* variante pra card sem texto à esquerda: ornamento no meio, apagando nas bordas */
.deco-centro > i {
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%); }

/* 🗺️ TOPOGRÁFICO — duas famílias de anéis concêntricos de centros diferentes. A sobreposição
   é o que lê como curva de nível, e é o padrão que aparece nos cards da referência. */
.o-topo {
  background:
    repeating-radial-gradient(ellipse 52% 68% at 64% 34%, transparent 0 21px, rgba(245,184,28,.06) 21px 22.2px),
    repeating-radial-gradient(ellipse 66% 48% at 86% 76%, transparent 0 25px, rgba(109,74,255,.075) 25px 26.4px);
  animation: deriva-deco 52s ease-in-out infinite alternate;
}
@keyframes deriva-deco { to { transform: translate3d(-1.6%, 1.2%, 0) scale(1.04); } }

/* ◎ ARCOS — círculos grandes cortados pela borda do card, com fio de ouro e um halo atrás
   (sem o halo eles parecem risco de caneta). Sugere que existe algo maior fora do card. */
.o-arcos {
  background:
    radial-gradient(46% 62% at 82% 30%, rgba(245,184,28,.10), transparent 62%),
    radial-gradient(circle at 82% 30%, transparent 0 118px, rgba(245,184,28,.16) 118px 119.4px, transparent 120px),
    radial-gradient(circle at 82% 30%, transparent 0 172px, rgba(245,184,28,.09) 172px 173.2px, transparent 174px),
    radial-gradient(circle at 82% 30%, transparent 0 236px, rgba(109,74,255,.14) 236px 237.4px, transparent 238px);
}

/* ▦ MALHA — grade de pontos. O mais discreto: só tira o "chapado" da superfície. */
.o-malha { background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; }

/* ／ RAIOS — riscos diagonais de luz atravessando. Bom em faixa e card de destaque. */
.o-raios { background: repeating-linear-gradient(112deg, transparent 0 54px, rgba(245,184,28,.055) 54px 60px, transparent 60px 118px); }

/* ✦ CONSTELAÇÃO — pontinhos em dois tamanhos. Entra JUNTO com outro ornamento, nunca
   sozinho: sozinho parece sujeira na tela. */
.o-const {
  background-image:
    radial-gradient(circle at 68% 22%, rgba(245,184,28,.5) 1.6px, transparent 2px),
    radial-gradient(circle at 88% 42%, rgba(156,134,255,.55) 1.4px, transparent 2px),
    radial-gradient(circle at 74% 66%, rgba(245,184,28,.35) 1.2px, transparent 2px),
    radial-gradient(circle at 94% 18%, rgba(245,184,28,.3) 1px, transparent 1.6px),
    radial-gradient(circle at 58% 78%, rgba(156,134,255,.35) 1px, transparent 1.6px),
    radial-gradient(circle at 82% 88%, rgba(245,184,28,.28) 1.2px, transparent 1.8px);
}

/* 🔆 CANTO — brilho no canto superior direito. O mais barato e o que mais rende: sugere
   uma fonte de luz fora do card. */
.o-canto { background: radial-gradient(58% 76% at 96% 4%, rgba(245,184,28,.14), transparent 62%); }

.secao-cab { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-4); }
.secao-cab .marca-ic { width: 34px; height: 34px; border-radius: var(--r-p); display: grid; place-items: center; background: var(--acao-veu); color: var(--acao); flex-shrink: 0; }
.secao-cab .marca-ic svg { width: var(--icone-m); height: var(--icone-m); }

/* ═══════════ SELOS ═══════════ */
.selo { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-t);
  font: var(--peso-forte) var(--t-micro)/1 var(--pilha-display); border: 1px solid transparent; white-space: nowrap; }
.selo > svg { width: var(--icone-p); height: var(--icone-p); }
.selo-ouro   { background: var(--acao-veu);     color: var(--acao);         border-color: var(--acao-borda); }
.selo-roxo   { background: var(--realce-veu);   color: var(--realce-txt);   border-color: var(--realce-borda); }
.selo-alerta { background: var(--atencao-veu);  color: var(--estado-atencao); border-color: rgba(255,176,32,.3); }
.selo-perigo { background: var(--parado-veu);   color: var(--estado-parado);  border-color: rgba(255,77,94,.3); }
.selo-neutro { background: var(--superficie-2); color: var(--conteudo-mudo);  border-color: var(--borda); }
.selo-vivo::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: pulso 1.9s ease-in-out infinite; }
@keyframes pulso { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.82)} }

.delta { display: inline-flex; align-items: center; gap: 3px; font: 800 var(--t-micro)/1 var(--pilha-display); color: var(--acao); }
.delta > svg { width: var(--icone-p); height: var(--icone-p); }
.delta.desce { color: var(--conteudo-mudo); }

/* ═══════════ CAMPOS ═══════════ */
.campo-grupo { display: flex; flex-direction: column; gap: 7px; }
.campo-grupo > label { font: var(--peso-forte) var(--t-micro)/1.2 var(--pilha-display); letter-spacing: .1em; text-transform: uppercase; color: var(--acao); }
.campo-caixa { position: relative; display: flex; align-items: center; }
.campo-caixa > svg { position: absolute; left: 14px; width: var(--icone-m); height: var(--icone-m); color: var(--conteudo-sutil); pointer-events: none; transition: color var(--rapido); }
.campo-caixa:focus-within > svg { color: var(--realce-txt); }
.campo {
  width: 100%; min-height: var(--campo-alt);
  background: var(--superficie-2); color: var(--conteudo);
  border: 1px solid var(--borda-campo); border-radius: var(--r-m);
  padding: 0 var(--campo-pad-x); font: var(--t-base)/1.4 var(--fonte);
  transition: border-color var(--rapido), box-shadow var(--normal), background var(--rapido);
}
.campo-caixa > .campo { padding-left: 43px; }
.campo::placeholder { color: var(--conteudo-sutil); }
.campo:hover { border-color: var(--conteudo-sutil); }
.campo:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px rgba(109,74,255,.2), 0 0 22px -6px rgba(109,74,255,.55); background: var(--superficie-3); }
.campo-erro { border-color: var(--estado-parado); }
.campo-erro:focus { box-shadow: 0 0 0 3px rgba(255,77,94,.2); }
textarea.campo { resize: vertical; min-height: 82px; padding: var(--esp-3) var(--campo-pad-x); line-height: 1.55; }
.campo-dica { font-size: var(--t-peq); color: var(--conteudo-sutil); }
.campo-msg-erro { font-size: var(--t-peq); color: var(--estado-parado); }
.campo-moeda > span { position: absolute; left: 15px; font-size: var(--t-peq); color: var(--conteudo-sutil); pointer-events: none; }
.campo-moeda > .campo { padding-left: 38px; text-align: right; }
.olho { position: absolute; right: 6px; width: var(--alvo-min); height: var(--alvo-min);
  background: none; border: 0; color: var(--conteudo-sutil); cursor: pointer; display: grid; place-items: center; border-radius: var(--r-p); }
.olho:hover { color: var(--conteudo); }
.olho:focus-visible { outline: none; box-shadow: var(--luz-foco); }
.olho svg { width: var(--icone-m); height: var(--icone-m); }

/* ═══════════ ABAS ═══════════ */
.abas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.aba { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: var(--r-t);
  cursor: pointer; white-space: nowrap; background: transparent; color: var(--conteudo-mudo);
  border: 1px solid transparent; font: var(--peso-medio) var(--t-base)/1 var(--pilha-display); transition: all var(--rapido); }
.aba:hover { background: var(--superficie-2); color: var(--conteudo); }
.aba.on { background: var(--acao-veu); color: var(--acao); border-color: var(--acao-borda); }
.aba:focus-visible { outline: none; box-shadow: var(--luz-foco); }

/* ═══════════ SIDEBAR ═══════════ */
.side { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 30;
  background: linear-gradient(180deg, rgba(14,11,24,.9), #000 82%);
  border-right: 1px solid var(--borda); backdrop-filter: blur(12px);
  display: flex; flex-direction: column; padding: var(--esp-4) var(--esp-3); }
.side-logo { display: flex; align-items: center; gap: 11px; padding: var(--esp-2) var(--esp-2) var(--esp-5); }
.side-nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; flex: 1; }
.side-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  min-height: var(--alvo-min); padding: 0 13px; border-radius: var(--r-m); cursor: pointer;
  color: var(--conteudo-mudo); font: var(--peso-medio) var(--t-base)/1 var(--pilha-display);
  background: transparent; border: 1px solid transparent; transition: all var(--rapido); }
.side-item > svg { width: var(--icone-m); height: var(--icone-m); }
.side-item .seta { margin-left: auto; width: var(--icone-p); height: var(--icone-p); opacity: .45; }
.side-item:hover { background: var(--superficie-2); color: var(--conteudo); }
.side-item.on { color: var(--acao); background: linear-gradient(100deg, rgba(245,184,28,.14), rgba(245,184,28,.04));
  border-color: var(--acao-borda); box-shadow: 0 0 22px -8px rgba(245,184,28,.5); }
.side-item:focus-visible { outline: none; box-shadow: var(--luz-foco); }
.side-secao { font-size: 10px; font-weight: var(--peso-forte); letter-spacing: .16em; text-transform: uppercase; color: var(--conteudo-sutil); padding: var(--esp-4) 13px var(--esp-2); }
.side-rodape { padding-top: var(--esp-3); }

.conteudo { margin-left: var(--sidebar); min-height: 100vh; }
.barra-topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--esp-4);
  min-height: var(--topo-alt); padding: var(--esp-2) var(--esp-5); border-bottom: 1px solid var(--borda);
  background: rgba(0,0,0,.72); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); }
.corpo { padding: var(--esp-5); max-width: 1420px; }

/* ═══════════ BUSCA DA BARRA DE TOPO ═══════════ */
.busca { position: relative; display: flex; align-items: center; flex: 1; max-width: 420px; }
.busca > svg:first-child { position: absolute; left: 15px; width: var(--icone-m); height: var(--icone-m);
  color: var(--conteudo-sutil); pointer-events: none; transition: color var(--rapido); }
.busca:focus-within > svg:first-child { color: var(--acao); }
.busca .campo { padding-left: 44px; padding-right: 62px; min-height: 42px; border-radius: var(--r-t); }
/* o atalho fica DENTRO do campo, à direita — ensina o comando sem ocupar linha própria */
.busca kbd { position: absolute; right: 8px; padding: 3px 8px; border-radius: 7px;
  background: var(--superficie-3); border: 1px solid var(--borda);
  font: 700 10px/1.5 var(--pilha-display); color: var(--conteudo-sutil); letter-spacing: .04em; pointer-events: none; }
@media (max-width: 900px) { .busca { display: none; } }

/* flex-shrink:0 é obrigatório aqui: dentro da barra de topo (que é flex) o botão de 44px era
   espremido pra 32 no celular — a medida existia no CSS e não existia na tela. */
.ic-btn { width: var(--alvo-min); height: var(--alvo-min); flex-shrink: 0; border-radius: var(--r-m);
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; color: var(--conteudo-mudo); cursor: pointer;
  transition: all var(--rapido); position: relative; }
.ic-btn:hover { background: var(--superficie-2); color: var(--acao); border-color: var(--acao-borda);
  box-shadow: 0 0 20px -8px rgba(245,184,28,.6); }
.ic-btn:focus-visible { outline: none; box-shadow: var(--luz-foco); }
.ic-btn > svg { width: var(--icone-m); height: var(--icone-m); }
/* botão de ícone com contorno (o formato do sino/engrenagem/presente da referência) */
.ic-btn-caixa { background: var(--superficie-2); border-color: var(--borda); box-shadow: var(--sombra-card); }
/* contador em cima do sino — número, não bolinha */
.ic-btn .conta { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--r-t); background: var(--metal); color: var(--acao-texto);
  font: 800 10px/18px var(--pilha-display); text-align: center;
  border: 2px solid var(--fundo); box-shadow: 0 0 12px -2px rgba(245,184,28,.8); }
.ic-btn .bolha { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--acao); box-shadow: 0 0 8px var(--acao); }

/* ═══════════ CHIP DE USUÁRIO (canto superior direito) ═══════════ */
/* Formato da referência: retrato redondo com anel de ouro, nome em cima, cargo embaixo,
   seta à direita. Antes era um quadradinho com a inicial — o retrato redondo com anel é o
   que faz a área de conta parecer "conta" e não mais um botão. */
.chip-user { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 5px 14px 5px 5px;
  border-radius: var(--r-t); background: var(--brilho-card-2), var(--superficie-2);
  border: 1px solid var(--borda); box-shadow: var(--sombra-card);
  cursor: pointer; transition: border-color var(--rapido), box-shadow var(--normal); position: relative; }
.chip-user:hover { border-color: var(--acao-borda); box-shadow: var(--sombra-card), 0 0 26px -10px rgba(245,184,28,.55); }
.chip-user > svg:last-child { width: var(--icone-p); height: var(--icone-p); color: var(--conteudo-sutil); }

/* retrato: círculo + anel de ouro com brilho. Aceita <img> ou a inicial. */
.avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; position: relative;
  display: grid; place-items: center; overflow: hidden;
  background: var(--metal); color: var(--acao-texto);
  font: 800 var(--t-med)/1 var(--pilha-display);
  box-shadow: 0 0 0 2px var(--fundo), 0 0 0 3.5px var(--ouro-500), 0 0 18px -4px rgba(245,184,28,.75); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar .online { position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--roxo-300); border: 2px solid var(--superficie-2); box-shadow: 0 0 8px var(--roxo-500); }

.chip-user .quem { line-height: 1.3; text-align: left; }
.chip-user .quem b { display: block; font: var(--peso-forte) var(--t-base)/1.25 var(--pilha-display); letter-spacing: -.01em; }
.chip-user .quem small { display: block; font-size: 11px; color: var(--conteudo-mudo); }

@media (max-width: 700px) { .chip-user .quem { display: none; } .chip-user { padding: 5px; gap: 0; } .chip-user > svg:last-child { display: none; } }

/* ═══════════ MÉTRICAS ═══════════ */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: var(--esp-3); }
.metrica { background: var(--brilho-card-2), var(--inclinacao-2), var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--r-m); padding: var(--esp-3) var(--esp-4);
  box-shadow: var(--sombra-card); position: relative; }
.metrica .rot { font-size: 10px; font-weight: var(--peso-forte); letter-spacing: .13em; text-transform: uppercase; color: var(--conteudo-mudo); }
.metrica .val { font: var(--peso-max) var(--tam-6)/1.15 var(--pilha-display); letter-spacing: -.03em; margin-top: 4px; display: flex; align-items: baseline; gap: var(--esp-2); }

/* ═══════════ ATALHOS ═══════════ */
.ladrilhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: var(--esp-3); }
.ladrilho { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 96px; padding: var(--esp-4) var(--esp-2); border-radius: var(--r-m);
  background: var(--brilho-card-2), var(--inclinacao-2), var(--superficie-2);
  border: 1px solid var(--borda); box-shadow: var(--sombra-card);
  cursor: pointer; color: var(--conteudo); font-size: var(--t-peq); font-weight: var(--peso-medio);
  transition: transform var(--normal), box-shadow var(--normal), border-color var(--normal); position: relative; }
.ladrilho > svg { width: var(--icone-g); height: var(--icone-g); color: var(--acao); transition: transform var(--normal); }
.ladrilho:hover { transform: translateY(-3px); border-color: var(--acao-borda);
  box-shadow: 0 14px 34px -12px rgba(109,74,255,.6), 0 0 26px -12px rgba(245,184,28,.5); }
.ladrilho:hover::before { background: linear-gradient(160deg, rgba(109,74,255,.55), rgba(109,74,255,.1) 42%, transparent 72%); }
.ladrilho:hover > svg { transform: scale(1.08); }
.ladrilho:focus-visible { outline: none; box-shadow: var(--luz-foco); }

/* ═══════════ FAIXA PROMOCIONAL ═══════════ */
.faixa-promo { position: relative; overflow: hidden; border-radius: var(--r-g); padding: var(--esp-6);
  background: linear-gradient(100deg, #14101F 0%, #1B1330 46%, #2A1656 100%); }
.faixa-promo::after { content:''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(112deg, transparent 0 60px, rgba(245,184,28,.05) 60px 66px, transparent 66px 132px),
    radial-gradient(34vmax 24vmax at 96% 8%, rgba(109,74,255,.5), transparent 60%),
    radial-gradient(24vmax 18vmax at 4% 96%, rgba(245,184,28,.16), transparent 62%); }
/* :not(.deco) é essencial: sem isso a camada de ornamento herdaria position:relative daqui
   (mesma especificidade, e esta regra vem depois) e entraria no fluxo em vez de ficar atrás. */
.faixa-promo > :not(.deco) { position: relative; z-index: 1; }
.promo-titulo { font: var(--peso-max) 33px/1.08 var(--pilha-display); font-style: italic; letter-spacing: -.03em; line-height: 1.08; margin: 6px 0 10px; }

/* ═══════════ TABELA ═══════════ */
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.tabela th { text-align: left; font-size: 10px; font-weight: var(--peso-forte); letter-spacing: .13em; text-transform: uppercase;
  color: var(--conteudo-mudo); padding: var(--esp-2) var(--esp-3); border-bottom: 1px solid var(--borda); }
.tabela td { padding: 13px var(--esp-3); border-bottom: 1px solid var(--borda); }
.tabela tbody tr { transition: background var(--rapido); }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela .direita { text-align: right; }

/* ═══════════ ATIVIDADE ═══════════ */
.ativ { display: flex; align-items: center; gap: var(--esp-3); padding: 11px 0; border-bottom: 1px solid var(--borda); }
.ativ:last-child { border-bottom: 0; }
.ativ .ic { width: 34px; height: 34px; border-radius: var(--r-p); display: grid; place-items: center; flex-shrink: 0;
  background: var(--realce-veu); color: var(--realce-txt); }
.ativ .ic svg { width: var(--icone-m); height: var(--icone-m); }
.ativ .quando { margin-left: auto; font-size: var(--t-peq); color: var(--conteudo-sutil); white-space: nowrap; }

/* ═══════════ MODAL ═══════════ */
.veu { position: fixed; inset: 0; background: rgba(4,3,8,.78); backdrop-filter: blur(5px); z-index: 100;
  display: grid; place-items: center; padding: var(--esp-4); animation: aparecer var(--normal) both; }
.modal { background: var(--inclinacao), var(--superficie); border-radius: var(--r-g); box-shadow: var(--sombra-g);
  width: min(580px,100%); max-height: 86vh; overflow: auto; position: relative; animation: subir var(--suave) both; }
.modal-topo { padding: var(--esp-5) var(--esp-5) var(--esp-3); }
.modal-corpo { padding: 0 var(--esp-5); }
.modal-pe { padding: var(--esp-4) var(--esp-5) var(--esp-5); display: flex; gap: var(--esp-2); justify-content: flex-end; }
@keyframes aparecer { from{opacity:0} to{opacity:1} }
@keyframes subir { from{opacity:0;transform:translateY(16px) scale(.985)} to{opacity:1;transform:none} }

/* ═══════════ VAZIO E CARREGANDO ═══════════ */
.vazio { text-align: center; padding: var(--esp-7) var(--esp-5); color: var(--conteudo-mudo); }
.vazio > svg { width: 42px; height: 42px; color: var(--conteudo-sutil); margin-bottom: var(--esp-3); }
.esqueleto { background: linear-gradient(90deg, var(--superficie-2) 25%, var(--superficie-3) 50%, var(--superficie-2) 75%);
  background-size: 200% 100%; animation: varre 1.6s linear infinite; border-radius: var(--r-p); }
@keyframes varre { from{background-position:200% 0} to{background-position:-200% 0} }

/* ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║  ALVO DE TOQUE — o tamanho mínimo depende do PONTEIRO, não da tela.                     ║
   ║                                                                                         ║
   ║  Auditoria (2026-08-10) achou aba em 38px, link "Ver tudo" em 19px e botão só-ícone     ║
   ║  em 40px de largura. Mas 44×44 é a regra de DEDO. No desktop com mouse o mínimo é       ║
   ║  24×24 (WCAG 2.5.8 AA) — forçar 44 lá deixaria a interface inchada sem ganho nenhum.    ║
   ║  Então: 24 é o piso em todo lugar, e 44 entra quando o ponteiro é grosso (`coarse` =    ║
   ║  dedo). O mesmo CSS serve o notebook e o celular sem duas versões de tela.              ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝ */
.aba, .ver-tudo, .esqueci, .ativ a, .tabela a { min-height: 24px; display: inline-flex; align-items: center; }
.btn-peq { min-width: 24px; }

@media (pointer: coarse) {
  .aba, .ver-tudo, .esqueci, .ativ a, .tabela a, .side-item, .chip-user, .ic-btn, .olho, .ladrilho {
    min-height: var(--alvo-min);
  }
  .btn, .btn-peq { min-height: var(--alvo-min); min-width: var(--alvo-min); }
  /* links de texto no meio de frase não podem virar bloco de 44px — em vez de esticar o
     elemento, esticamos só a área clicável por fora, com um pseudo invisível. */
  .ver-tudo, .esqueci { position: relative; }
  .ver-tudo::after, .esqueci::after { content:''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%,-50%); width: 100%; height: var(--alvo-min); min-width: var(--alvo-min); }
}

/* ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║  RESPONSIVO — 4 pontos, não 1. A v2 só tinha 900px, então tudo entre 900 e 1440         ║
   ║  recebia o layout de celular esticado.                                                  ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝ */

/* ≥1440 — telas grandes: mais respiro, sidebar maior, texto não colado na borda */
@media (min-width: 1440px) {
  :root { --sidebar: 268px; }
  .corpo { padding: var(--esp-6) var(--esp-7); }
}

/* 1024–1439 — notebook: já cabe sidebar, mas o hero empilha as métricas */
@media (max-width: 1200px) {
  .corpo { padding: var(--esp-5) var(--esp-4); }
}

/* ≤1024 — tablet paisagem: sidebar encolhe pra só ícone (o rótulo some, o alvo continua 44px) */
@media (max-width: 1024px) and (min-width: 901px) {
  :root { --sidebar: 72px; }
  .side { padding: var(--esp-4) var(--esp-2); align-items: center; }
  .side-item { justify-content: center; padding: 0; font-size: 0; gap: 0; }
  .side-item .seta { display: none; }
  .side-logo { justify-content: center; }
  .side-logo .wordmark { display: none; }
  .side-secao { font-size: 0; padding: var(--esp-3) 0; }
  .side-secao::after { content:'···'; font-size: 11px; letter-spacing: .1em; }
}

/* ≤900 — celular e tablet retrato: sidebar vira barra de baixo */
@media (max-width: 900px) {
  .side { inset: auto 0 0 0; width: auto; flex-direction: row; border-right: 0; border-top: 1px solid var(--borda);
    padding: 6px max(6px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)); overflow-x: auto; }
  .side-logo, .side-secao, .side-rodape { display: none; }
  .side-nav { flex-direction: row; gap: 3px; }
  .side-item { flex-direction: column; gap: 4px; min-width: 68px; padding: 6px 10px; font-size: 10px; }
  .side-item .seta { display: none; }
  .conteudo { margin-left: 0; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .corpo { padding: var(--esp-4); }
  .barra-topo { padding: var(--esp-2) var(--esp-4); }
  .hero { font-size: var(--tam-6); }
  .promo-titulo { font-size: 23px; }
  .faixa-promo { padding: var(--esp-5) var(--esp-4); }
}

/* ≤480 — celular pequeno (o 375px do iPhone SE cai aqui). Botão vira bloco: lado a lado
   em 375px eles ficariam com 40px de largura útil e ninguém acerta. */
@media (max-width: 480px) {
  :root { --card-pad: var(--esp-4); --t-hero: 23px; }
  .corpo { padding: var(--esp-3); }
  .hero { font-size: 23px; }
  .promo-titulo { font-size: 20px; }
  .metricas { grid-template-columns: 1fr 1fr; }
  .ladrilhos { grid-template-columns: repeat(3, 1fr); }
  .card-topo { flex-direction: column; align-items: flex-start; gap: var(--esp-2); }
}