/* ============================================================
   My Marketing App · Sistema visual GH/ACT
   Manual da Marca v1.0 — Grafite, Areia e um único acento Lima.
   Princípios: o fundo é quente · um acento, e só · o espaço é o
   argumento · o tipo carrega tudo · a afirmação é simples.
   ============================================================ */

/* ---- Tipografia da marca: três fontes, três funções ---- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/BricolageGrotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Paleta oficial GH/ACT */
  --grafite: #101213;
  --areia: #F0EDE6;
  --areia-sombreada: #E6E2D9;
  --lima: #D6FF47;
  --neutro-60: #5E5D59;
  --neutro-45: #87867F;
  --fio: #D1CFC5;
  --fio-claro: #DEDBD2;
  --terracota: #B4483A;

  /* Papéis na interface */
  --bg: var(--areia);
  --surface: #FBFAF7;
  --surface-2: var(--areia-sombreada);
  --border: var(--fio);
  --border-soft: var(--fio-claro);
  --text: var(--grafite);
  --muted: var(--neutro-60);
  --muted-2: var(--neutro-45);

  --acento: var(--lima);
  --acento-texto: var(--grafite);
  --atencao: var(--terracota);
  --atencao-suave: #F5E4E1;
  --positivo-suave: #EDF7CE;

  /* Fontes */
  --font-display: 'Bricolage Grotesque', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 4px;
  --radius-lg: 6px;
}

/* Acessibilidade: atalho para leitores de tela e navegação por teclado */
.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--grafite); color: var(--areia);
  padding: 12px 20px; border-radius: 0 0 var(--radius) 0;
  font-size: .88rem; text-decoration: none;
}
.pular-para-conteudo:focus { left: 0; }

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* O tipo carrega tudo: display em Bricolage, sempre apertado */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 .5em;
}
h1 { font-size: 2.1rem; }
h2 { font-size: 1.4rem; line-height: 1.2; }
h3 { font-size: 1.08rem; line-height: 1.2; }
h4 { font-size: .98rem; line-height: 1.25; }
/* Título de item dentro de um cartão. Semanticamente é h3 — o cartão já tem o
   h2, e pular para h4 fazia o leitor de tela anunciar um nível que não existe.
   A classe devolve o tamanho visual que esses títulos sempre tiveram. */
.titulo-item { font-size: .98rem; line-height: 1.25; }
p { margin: 0 0 .85em; }
a { color: var(--text); text-decoration-color: var(--fio); text-underline-offset: 3px; }
b, strong { font-weight: 500; }
small { color: var(--muted); font-size: .82rem; line-height: 1.45; }
code { font-family: var(--font-mono); font-size: .82em; }

/* Rótulo: Geist Mono, caixa-alta, tracking largo */
.rotulo, nav.menu .group-label, th, .kpi .lbl {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  font-size: .68rem;
}

/* ============================================================
   Layout — MOBILE FIRST
   A base é o celular; o desktop entra a partir de 900px.
   ============================================================ */
/* `hidden` tem que ganhar de qualquer display declarado numa classe. Sem isto,
   `<div class="app" hidden>` continuava desenhado: o seletor de classe vence o
   estilo padrão do navegador para [hidden]. O app inteiro ficava montado atrás
   do onboarding, invisível só porque a área de conteúdo ainda estava vazia — e
   aparecia no primeiro render, por cima de quem estava respondendo. */
[hidden] { display: none !important; }

/* Aviso de navegador antigo. Estilo simples de propósito: ele precisa ficar
   legível num navegador que talvez não entenda metade do resto deste arquivo. */
#navegador-antigo {
  max-width: 40rem; margin: 8vh auto; padding: 0 6vw;
  font-family: system-ui, -apple-system, sans-serif; line-height: 1.65; color: #101213;
}
#navegador-antigo h1 { font-size: 1.6rem; letter-spacing: -.03em; margin-bottom: 18px; }
#navegador-antigo p { margin: 0 0 14px; font-size: 1rem; }
#navegador-antigo p + p { padding-top: 14px; border-top: 1px solid #dcd8cf; }

/* Android: sem `touch-action: manipulation` o navegador segura o toque por
   ~300ms esperando um segundo toque para dar zoom. Nesse intervalo o dedo sai,
   vira rolagem, e o clique não acontece — o que a pessoa descreve como "o
   botão não funciona". `tap-highlight` transparente porque a resposta visual
   vem do :active do próprio elemento, e o retângulo azul do sistema por cima
   dela parece defeito. */
button, [role="button"], a, label, summary, select, input[type="checkbox"], input[type="radio"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Rolagem que chega ao fim não deve arrastar a página atrás dela nem disparar
   o "puxar para atualizar" do Android no meio de um formulário. */
html, body { overscroll-behavior-y: contain; }
.onb-opcoes.rolagem, .onb-palco { overscroll-behavior: contain; }

.app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* Barra superior: só existe no celular */
.barra-mobile {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--grafite); color: var(--areia);
  border-bottom: 1px solid rgba(240, 237, 230, .1);
}
.barra-mobile .brand-mark { width: 16px; height: 28px; }
/* O nome tem três palavras: na barra do celular precisa caber numa linha */
.barra-mobile .brand-name { font-size: .88rem; white-space: nowrap; }
.barra-mobile .brand-sub { display: none; }
.barra-mobile .brand { padding: 0; gap: 8px; }

.hamburguer {
  width: 44px; height: 44px; flex: none; /* alvo de toque confortável */
  display: grid; place-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.hamburguer span {
  display: block; width: 20px; height: 2px; background: var(--areia);
  transition: transform .2s, opacity .2s;
}
.hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#idioma-mobile { margin-left: auto; }
#idioma-mobile .seletor-idioma { margin: 0; }

.fundo-menu {
  position: fixed; inset: 0; z-index: 44;
  background: rgba(16, 18, 19, .5); backdrop-filter: blur(2px);
}

/* Gaveta de navegação no celular */
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 45;
  width: min(84vw, 320px);
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  background: var(--grafite); color: var(--areia);
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 18px;
  overflow-y: auto; overscroll-behavior: contain;
}
.sidebar.aberta { transform: translateX(0); }

.brand { display: flex; align-items: center; gap: 9px; padding: 0 6px; }
.brand-mark { width: 26px; height: 46px; flex: none; }
.brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--areia);
}
/* Entrelinha apertada para o bloco de texto ficar opticamente centrado na barra */
.brand-sub {
  font-family: var(--font-mono); font-size: .58rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--neutro-45);
  line-height: 1.2; margin-top: 3px;
}

nav.menu { display: flex; flex-direction: column; gap: 1px; }
nav.menu .group-label { color: var(--neutro-45); padding: 16px 10px 6px; }
nav.menu button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; border-left: 2px solid transparent;
  text-align: left; cursor: pointer;
  padding: 12px 10px; min-height: 44px; /* alvo de toque */
  font-family: var(--font-body); font-size: .92rem; font-weight: 400;
  color: var(--fio); transition: color .15s, background .15s;
}
nav.menu button:hover { color: var(--areia); background: rgba(240, 237, 230, .05); }
nav.menu button.active {
  color: var(--areia); border-left-color: var(--areia);
  background: rgba(240, 237, 230, .10); font-weight: 500;
}
nav.menu button .ico { flex: none; opacity: .7; }
nav.menu button.active .ico { opacity: 1; }
nav.menu button .rotulo-item { flex: 1; }

.sidebar-footer { margin-top: auto; display: grid; gap: 8px; padding: 14px 6px 0; }

main {
  padding: 24px 18px calc(64px + env(safe-area-inset-bottom));
  width: 100%; max-width: 100%;
}
.page-head { margin-bottom: 24px; max-width: 68ch; }
.page-head h1 { margin-bottom: .35em; }
.page-head p { color: var(--muted); margin: 0; font-size: .96rem; line-height: 1.55; }

/* ---- Tablet ---- */
@media (min-width: 640px) {
  main { padding: 32px 28px 80px; }
  .page-head p { font-size: 1rem; }
}

/* ---- Desktop: a gaveta vira barra fixa ---- */
@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 264px 1fr; }
  .barra-mobile, .fundo-menu { display: none !important; }
  .sidebar {
    position: sticky; top: 0; left: auto; z-index: 1;
    height: 100vh; width: auto; transform: none;
    padding: 26px 18px 20px; gap: 22px;
  }
  /* min-width: 0 porque a coluna '1fr' tem mínimo implícito 'auto': sem isso,
     um conteúdo largo empurra a coluna além da tela e a página inteira passa a
     rolar na horizontal. Aparecia entre ~1264px e ~1384px — 1280x800 e 1366x768. */
  main { padding: 44px 46px 90px; max-width: 1120px; min-width: 0; }
  .page-head { margin-bottom: 30px; }
  .page-head p { font-size: 1.02rem; }
}

@media (min-width: 1280px) {
  main { padding: 52px 56px 100px; }
}

/* ---- Régua lima: elemento gráfico da marca ---- */
.regua-lima { height: 3px; background: var(--lima); width: 56px; margin-bottom: 20px; }

/* ---------------- Cartões ---------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 18px;
}
.card.tight { padding: 18px 20px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.card-head h2, .card-head h3 { margin: 0; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------- Formulários ---------------- */
label.field { display: block; margin-bottom: 16px; }
label.field > span {
  display: block; font-family: var(--font-mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 500;
  color: var(--muted); margin-bottom: 7px;
}
/* Alinhamento dos campos dentro de uma grade.
   Rótulo de uma linha ("Ticket médio") e de duas ("Meta de faturamento por
   mês") na mesma faixa faziam as caixas começarem em alturas diferentes, e a
   dica embaixo de um campo desalinhava só aquele. A grade estica os itens à
   mesma altura, mas nada dentro do campo garantia que a caixa começasse no
   mesmo ponto.
   O rótulo reserva a altura de duas linhas: com isso a caixa começa sempre no
   mesmo lugar, tenha o rótulo uma linha ou duas, e a dica fica pendurada
   abaixo sem empurrar ninguém. */
.grid > label.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;              /* o gap da grade já separa as linhas */
}
/* line-height explícito para a conta fechar: sem ele o rótulo herda a altura de
   linha do corpo, duas linhas reais passam do mínimo reservado, e a caixa desce.
   Com 1.5, duas linhas são exatamente 3em. */
.grid > label.field > span:first-child {
  line-height: 1.5;
  min-height: 3em;
}
/* A dica ocupa o espaço que sobra, sem esticar a caixa acima dela */
.grid > label.field > .hint { margin-top: 5px; }

label.field .hint {
  display: block; font-family: var(--font-body); font-size: .78rem;
  text-transform: none; letter-spacing: 0; color: var(--muted-2);
  margin-top: 5px; font-weight: 300;
}
input[type=text], input[type=number], input[type=month], input[type=email], input[type=tel], select, textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: .94rem; font-weight: 400;
  background: #fff; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--grafite);
  box-shadow: 0 0 0 3px rgba(214, 255, 71, .45);
}

/* Foco por teclado, com o mesmo anel dos campos. O padrão do navegador é de 1px
   e some contra o grafite da barra lateral. :focus-visible não marca clique de
   mouse, então o anel só aparece para quem navega pelo teclado. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: 2px;
  border-radius: 4px;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

.checks { display: flex; flex-wrap: wrap; gap: 7px; }
.checks label {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  font-size: .84rem; background: #fff; transition: all .15s;
}
.checks label:hover { border-color: var(--muted); }
.checks label:has(input:checked), .checks label.marcada {
  background: var(--grafite); border-color: var(--grafite); color: var(--areia); font-weight: 400;
}
.checks input { accent-color: var(--grafite); }

/* ---------------- Botões ---------------- */
button.btn {
  font-family: var(--font-body); font-size: .88rem; font-weight: 400;
  cursor: pointer; padding: 11px 22px; border-radius: var(--radius);
  border: 1px solid var(--grafite); background: var(--grafite); color: var(--areia);
  transition: all .15s;
}
button.btn:hover { background: #000; }
button.btn.acento { background: var(--lima); border-color: var(--lima); color: var(--grafite); font-weight: 500; }
button.btn.acento:hover { background: #C8F52E; border-color: #C8F52E; }
button.btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
button.btn.ghost:hover { background: var(--surface-2); border-color: var(--muted); }
button.btn.sm { padding: 7px 14px; font-size: .8rem; }
button.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------------- Diagnóstico ---------------- */
.q { padding: 18px 0; border-bottom: 1px solid var(--border-soft); }
.q:last-child { border-bottom: 0; }
.q-text { font-weight: 400; margin-bottom: 4px; font-size: .96rem; line-height: 1.45; }
.q-help { color: var(--muted); font-size: .82rem; margin-bottom: 11px; line-height: 1.5; }
.scale { display: flex; flex-wrap: wrap; gap: 6px; }
.scale label {
  flex: 1 1 130px; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 11px; font-size: .8rem; cursor: pointer; background: #fff;
  text-align: center; line-height: 1.35; transition: all .15s;
}
.scale label:hover { border-color: var(--muted); }
.scale label:has(input:checked), .scale label.marcada {
  background: var(--grafite); color: var(--areia); border-color: var(--grafite); font-weight: 400;
}
.scale input { position: absolute; opacity: 0; width: 0; height: 0; }

/* ---------------- Score ---------------- */
.score-hero { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
/* O tamanho vem do JS como `--anel-pedido`, e não como width inline: estilo
   inline vence media query, e era por isso que no celular a moldura continuava
   com 128px enquanto o desenho encolhia para 104. O número ficava centralizado
   na moldura e não no anel — o "de 100" descia para fora do círculo. */
.score-ring {
  position: relative; flex: none;
  --anel: var(--anel-pedido, 128px);
  width: var(--anel); height: var(--anel);
}
.score-ring svg { display: block; width: 100%; height: 100%; }
.score-ring .val { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.score-ring .val b {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 700;
  letter-spacing: -0.03em; display: block; line-height: 1;
}
.score-ring .val span {
  font-family: var(--font-mono); font-size: .58rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted);
}
.bar { background: var(--areia-sombreada); border-radius: 999px; height: 6px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--grafite); }
.pillar { padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.pillar:last-child { border-bottom: 0; }

/* ---------------- Etiquetas ---------------- */
.tag, .pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 9px; border-radius: 3px; white-space: nowrap;
}
.tag.ok { background: transparent; color: var(--grafite); box-shadow: inset 0 0 0 1px var(--grafite); }
.tag.warn { background: var(--atencao-suave); color: var(--atencao); }
.tag.bad { background: var(--atencao); color: #fff; }
.tag.info { background: var(--grafite); color: var(--areia); }
.tag.neutral { background: var(--areia-sombreada); color: var(--muted); }
.pill { background: var(--areia-sombreada); color: var(--muted); border: 0; }
.pill.on { background: var(--grafite); color: var(--areia); }

/* ---------------- Ações / plano ---------------- */
.action {
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 20px; background: #fff; margin-bottom: 12px;
}
.action.done { background: var(--areia-sombreada); border-color: transparent; opacity: .82; }
.action-head { display: flex; gap: 13px; align-items: flex-start; }
.action-head input[type=checkbox] {
  margin-top: 4px; width: 17px; height: 17px; accent-color: var(--grafite); flex: none; cursor: pointer;
}
.action .titulo-item { margin: 0 0 5px; }
.action .meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.action .why { color: var(--muted); font-size: .85rem; margin: 0 0 7px; line-height: 1.6; }
.action ol, .action ul { margin: 10px 0 0; padding-left: 20px; font-size: .86rem; line-height: 1.65; }
.action li { margin-bottom: 5px; }
.action .metric {
  font-size: .8rem; color: var(--muted); margin-top: 11px;
  border-top: 1px solid var(--border-soft); padding-top: 10px; line-height: 1.6;
}
.sprint-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 34px 0 14px; }
.sprint-head h3 { margin: 0; }

/* ---------------- KPI ---------------- */
.kpi { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 16px 18px; }
.kpi .lbl { color: var(--muted-2); display: block; }
.kpi .num {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.1; margin-top: 6px;
}
.kpi .sub { font-size: .76rem; color: var(--muted); line-height: 1.4; }

/* ---------------- Tabelas ---------------- */
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border-soft); }
th { color: var(--muted-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }

.empty { text-align: center; padding: 48px 24px; color: var(--muted); }
.empty h3 { color: var(--text); }

.output {
  white-space: pre-wrap; background: var(--areia-sombreada);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 18px; font-size: .86rem; line-height: 1.7; margin-top: 14px;
}

/* Cantoneira: a marca usa o traço lima como marcação lateral */
.callout {
  border-left: 3px solid var(--grafite); background: var(--surface);
  padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .87rem; line-height: 1.65; margin-bottom: 16px;
}
.callout.warn { border-left-color: var(--atencao); background: var(--atencao-suave); }
.callout.ok { border-left-color: var(--grafite); background: var(--areia-sombreada); }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--grafite); color: var(--areia); padding: 12px 22px; border-radius: var(--radius);
  font-size: .85rem; opacity: 0; pointer-events: none; transition: all .22s ease; z-index: 90;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.spinner {
  width: 14px; height: 14px; border: 2px solid rgba(240, 237, 230, .3);
  border-top-color: var(--areia); border-radius: 50%;
  display: inline-block; animation: spin .8s linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   ONBOARDING — uma pergunta por vez, tela cheia
   ============================================================ */
.onb {
  position: fixed; inset: 0; z-index: 100;
  /* No Android a barra de endereços entra e sai, e um fixo com `inset: 0`
     acaba mais alto que a área realmente visível: o rodapé some por baixo do
     navegador. `dvh` acompanha a barra. */
  height: 100dvh;
  background: var(--areia); display: flex; flex-direction: column;
}
.onb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 34px; gap: 20px; flex: none;
}
.onb-top .brand-name { color: var(--grafite); }
.onb-progress { flex: 1; max-width: 340px; height: 2px; background: var(--fio); position: relative; }
.onb-progress > i { position: absolute; inset: 0 auto 0 0; background: var(--grafite); transition: width .35s cubic-bezier(.4,0,.2,1); }
.onb-passo { font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }

.onb-palco {
  flex: 1; display: flex; justify-content: center;
  /* "safe center" evita cortar o topo quando a pergunta é mais alta que a tela */
  align-items: safe center;
  padding: 20px 34px 48px; overflow-y: auto;
}
.onb-slide { width: 100%; max-width: 720px; animation: onb-entra .45s cubic-bezier(.2,.8,.2,1); }
@keyframes onb-entra {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
.onb-slide.saindo { animation: onb-sai .22s ease forwards; }
@keyframes onb-sai {
  to { opacity: 0; transform: translateY(-18px); }
}

.onb-num {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); margin-bottom: 16px;
}
.onb-num b {
  background: var(--grafite); color: var(--areia); width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 3px; font-size: .68rem; font-weight: 500;
}
.onb-slide h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: .35em; max-width: 20ch;
}
.onb-slide h2 em { font-style: normal; box-shadow: inset 0 -.32em 0 var(--areia-sombreada); }

/* `balance` distribui as linhas da manchete em vez de encher a primeira e
   deixar sobra na última — é o que evita palavra sozinha sem ninguém precisar
   escolher onde quebrar. Onde não houver suporte, a quebra é a natural, que já
   é melhor que a imposta. */
.onb-slide h2 { text-wrap: balance; }
.onb-sub { color: var(--muted); font-size: 1rem; margin-bottom: 30px; max-width: 58ch; line-height: 1.6; }

.onb-campo input[type=text], .onb-campo input[type=email], .onb-campo input[type=tel], .onb-campo textarea {
  border: 0; border-bottom: 2px solid var(--fio); border-radius: 0;
  background: transparent; padding: 10px 2px; font-size: 1.15rem; font-weight: 300;
}
.onb-campo input:focus, .onb-campo textarea:focus {
  box-shadow: none; border-bottom-color: var(--grafite);
}
.onb-campo textarea { min-height: 84px; font-size: 1.1rem; line-height: 1.55; }
.onb-dica { font-size: .82rem; color: var(--muted-2); margin-top: 10px; }

.onb-opcoes { display: flex; flex-direction: column; gap: 9px; max-width: 520px; }

/* A lista de categorias tem altura limitada, e num contêiner flex de coluna o
   item encolhe antes de o contêiner rolar. O texto continua do tamanho que é e
   vaza para fora da borda — foi o que apareceu na tela do iPhone, com título
   por cima da moldura e exemplo cortado ao meio. `flex: none` faz o item manter
   a altura do próprio conteúdo e a rolagem acontecer onde deveria. */
.onb-opcoes.rolagem { max-height: 320px; overflow-y: auto; max-width: 560px; padding-right: 4px; }
.onb-opcao {
  display: block; padding: 13px 16px; flex: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; cursor: pointer; font-size: .95rem; text-align: left;
  font-family: var(--font-body); font-weight: 300; color: var(--text); transition: all .12s;
}

/* O alinhamento acontece num span por dentro, não no próprio <button>.
   Botão como contêiner flex é onde os navegadores mais divergem: o Safari
   calcula a altura do conteúdo de forma diferente e o texto sai por fora da
   borda — foi o que apareceu no iPhone e voltou a aparecer no Android. Com um
   elemento comum por dentro, todos concordam. */
.onb-opcao-corpo { display: flex; align-items: center; gap: 13px; }
/* Sem isto o texto não quebra: item de flex não encolhe abaixo do conteúdo. */
.onb-opcao-texto { min-width: 0; flex: 1; }
.onb-opcao:hover { border-color: var(--grafite); }
.onb-opcao.sel { background: var(--grafite); border-color: var(--grafite); color: var(--areia); font-weight: 400; }
.onb-opcao .letra {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  width: 22px; height: 22px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--border); border-radius: 3px; background: var(--areia);
}
.onb-opcao.sel .letra { background: var(--areia); color: var(--grafite); border-color: var(--areia); }

/* Tirar da lista o que não se aplica: o × fica discreto até a linha receber
   foco ou o ponteiro, para não competir com as setas de ordenar. */
.publico-tirar {
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  border-radius: 4px; width: 30px; height: 30px; flex: none; cursor: pointer;
  font-size: 1rem; line-height: 1; opacity: .55; transition: all .12s;
}
.ordena-item:hover .publico-tirar, .publico-tirar:focus-visible { opacity: 1; border-color: var(--grafite); }
.publicos-fora { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.publicos-fora .rotulo { width: 100%; margin-bottom: 2px; }

@media (max-width: 640px) {
  /* No celular não existe ponteiro: o botão precisa estar sempre visível. */
  .publico-tirar { opacity: 1; width: 40px; height: 40px; }
}

.onb-rodape { margin-top: 32px; }

.onb-acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.onb-enter kbd {
  font-family: var(--font-mono); font-size: .66rem; border: 1px solid var(--fio);
  border-bottom-width: 2px; border-radius: 3px; padding: 2px 6px; background: #fff;
}
.onb-erro { color: var(--atencao); font-size: .82rem; }
/* Só ocupa espaço quando tem o que dizer, para não abrir um vão permanente */
.onb-erro:not(:empty) { margin-bottom: 10px; }

/* ---- Régua Branding × Performance ---- */
.regua-wrap { margin: 34px 0 10px; }
.regua-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; }
.regua-polo { max-width: 30ch; }
.regua-polo.dir { text-align: right; }
.regua-polo h3 { margin: 0 0 5px; font-size: 1.15rem; }
.regua-polo p { font-size: .82rem; color: var(--muted); margin: 0; line-height: 1.5; }

.regua-valores {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
  font-size: 2.4rem; line-height: 1; margin-bottom: 18px;
}
.regua-valores span { transition: color .2s; }
.regua-valores .fraco { color: var(--fio); }

.regua-trilho { position: relative; padding: 16px 0 6px; }
.regua-marcas { display: flex; justify-content: space-between; margin-bottom: 9px; }
.regua-marcas i { width: 1px; height: 7px; background: var(--fio); display: block; }
.regua-marcas i.meio { height: 12px; background: var(--muted-2); }

input[type=range].regua {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 5px; border-radius: 999px; background: var(--areia-sombreada);
  outline: none; margin: 0; padding: 0; cursor: grab;
}
input[type=range].regua:active { cursor: grabbing; }
input[type=range].regua::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--lima); border: 3px solid var(--grafite);
  cursor: grab; transition: transform .12s;
}
input[type=range].regua::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type=range].regua::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--lima); border: 3px solid var(--grafite); cursor: grab;
}
input[type=range].regua:focus-visible { box-shadow: 0 0 0 4px rgba(214, 255, 71, .5); }

.regua-leitura {
  margin-top: 26px; border-left: 3px solid var(--grafite);
  padding: 12px 18px; background: var(--surface); font-size: .88rem; line-height: 1.6;
}

/* ---------------- Responsivo ---------------- */
@media print {
  .sidebar, .btn-row, button, .onb { display: none !important; }
  body { background: #fff; }
  .app { grid-template-columns: 1fr; }
  .card { break-inside: avoid; border-color: #ddd; }
}

/* ============================================================
   9 · Barra de rolagem discreta
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--fio) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fio); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--neutro-45); }
.sidebar { scrollbar-color: #2A2D2E transparent; }
.sidebar::-webkit-scrollbar-thumb { background: #2A2D2E; }

/* ============================================================
   7 · Selo de recurso Pro — diamante vazado no verde da marca
   ============================================================ */
.selo-pro {
  position: relative; display: inline-flex; align-items: center;
  color: var(--lima); vertical-align: middle; margin-left: 7px;
  cursor: help; outline: none;
}
.sidebar .selo-pro { margin-left: auto; }
.selo-pro svg { display: block; }
.selo-pro-balao {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--grafite); color: var(--areia); padding: 7px 11px; border-radius: var(--radius);
  font-family: var(--font-body); font-size: .72rem; font-weight: 400; line-height: 1.4;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: all .16s; z-index: 60;
}
.selo-pro-balao::after {
  content: ''; position: absolute; top: 100%; left: 50%; margin-left: -4px;
  border: 4px solid transparent; border-top-color: var(--grafite);
}
.selo-pro:hover .selo-pro-balao, .selo-pro:focus .selo-pro-balao { opacity: 1; transform: translateX(-50%) translateY(0); }

.bloqueio-pro {
  border: 1px dashed var(--fio); border-radius: var(--radius-lg);
  padding: 34px 30px; text-align: center; background: var(--surface);
}
.bloqueio-pro .diamante { color: var(--lima); margin-bottom: 14px; display: inline-block; }
.bloqueio-pro h3 { margin-bottom: .4em; }
.bloqueio-pro p { color: var(--muted); max-width: 52ch; margin: 0 auto 20px; font-size: .92rem; }

/* ============================================================
   11 · Pendências: o que falta preencher, sinalizado sem susto
   ============================================================ */
.pendencia {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--fio); border-left: 3px solid var(--grafite);
  background: var(--surface); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 16px 20px; margin-bottom: 16px;
}
.pendencia .ico-wrap { color: var(--grafite); flex: none; margin-top: 2px; }
.pendencia h4 { margin: 0 0 4px; font-size: .95rem; }
.pendencia p { margin: 0 0 10px; font-size: .85rem; color: var(--muted); line-height: 1.55; }
.pendencia .btn { margin-top: 2px; }

.medidor { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.medidor .barra-wrap { flex: 1; min-width: 180px; }
.medidor .pct {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -.03em; line-height: 1;
}

.passo-fluxo {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.passo-fluxo:last-child { border-bottom: 0; }
.passo-fluxo .num {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--fio); color: var(--muted);
}
.passo-fluxo.feito .num { background: var(--grafite); color: var(--areia); border-color: var(--grafite); }
.passo-fluxo.atual .num { border-color: var(--grafite); color: var(--grafite); border-width: 2px; }
.passo-fluxo h4 { margin: 0 0 3px; font-size: .95rem; }
.passo-fluxo p { margin: 0; font-size: .84rem; color: var(--muted); line-height: 1.55; }

/* ============================================================
   2 · Resposta por áudio
   ============================================================ */
.audio-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.audio-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  border-radius: 999px; padding: 9px 16px; cursor: pointer;
  font-family: var(--font-body); font-size: .84rem; transition: all .15s;
}
.audio-btn:hover { border-color: var(--grafite); }
.audio-btn.gravando { background: var(--atencao); border-color: var(--atencao); color: #fff; }
.audio-btn.gravando .ponto {
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  animation: pulsa 1s ease-in-out infinite;
}
@keyframes pulsa { 50% { opacity: .25; } }
.audio-tempo { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.audio-aviso { font-size: .78rem; color: var(--muted-2); }
.audio-box audio { height: 34px; max-width: 260px; }

/* ============================================================
   2 · Ilustração de contexto ao lado da pergunta
   ============================================================ */
.onb-slide.com-arte { display: grid; grid-template-columns: 1fr 250px; gap: 44px; align-items: center; max-width: 900px; }
.onb-arte { align-self: center; }
.onb-arte svg { width: 100%; height: auto; display: block; }
.onb-arte figcaption {
  font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted-2); margin-top: 14px; line-height: 1.6;
}

/* ============================================================
   4 · Ordenar prioridades arrastando
   ============================================================ */
.ordena { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.ordena-item {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: var(--radius); background: #fff;
  cursor: grab; transition: border-color .12s, background .12s, transform .12s;
}
.ordena-item:hover { border-color: var(--grafite); }
.ordena-item.arrastando { opacity: .35; cursor: grabbing; }
.ordena-item.alvo { border-color: var(--grafite); border-style: dashed; }
.ordena-item .pos {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  letter-spacing: -.03em; width: 22px; flex: none; color: var(--muted);
}
.ordena-item:first-child .pos { color: var(--grafite); }
.ordena-item .alca { color: var(--muted-2); flex: none; margin-left: auto; }
.ordena-item .rotulo-obj { flex: 1; font-size: .92rem; }
.ordena-item:first-child { border-left: 3px solid var(--grafite); }
.ordena-setas { display: flex; flex-direction: column; gap: 2px; }
.ordena-setas button {
  border: 0; background: none; cursor: pointer; color: var(--muted-2);
  padding: 1px 4px; line-height: 1; font-size: .7rem;
}
.ordena-setas button:hover { color: var(--grafite); }

/* ============================================================
   5 · Consentimento e páginas legais
   ============================================================ */
.consentimento {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--radius); background: #fff; margin-top: 8px;
}
.consentimento input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--grafite); flex: none; margin-top: 2px; cursor: pointer; }

@media (max-width: 899px) {
  /* Este é o controle que decide se a pessoa termina o onboarding, e tinha
     18px — menos da metade do alvo mínimo de toque. No Android as pessoas
     miram na caixa, não no texto. A caixa cresce e ganha área ao redor. */
  .consentimento { align-items: center; gap: 14px; padding: 6px 0; }
  .consentimento input[type=checkbox] { width: 26px; height: 26px; margin: 0; }
  .consentimento label { font-size: .88rem; }
}
.consentimento label { font-size: .85rem; line-height: 1.6; cursor: pointer; }
.consentimento a { text-decoration: underline; text-underline-offset: 2px; }

.doc-legal { max-width: 74ch; }
.doc-legal h2 { margin-top: 34px; }
.doc-legal h3 { margin-top: 24px; font-size: 1rem; }
.doc-legal ul { padding-left: 20px; }
.doc-legal li { margin-bottom: 7px; }
.doc-legal .atualizado {
  font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted-2);
}
.link-legal {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--fio);
  font-family: var(--font-body); font-size: .7rem; text-decoration: underline;
  text-underline-offset: 2px;
}
.link-legal:hover { color: var(--areia); }

/* Contato no rodapé — entre o seletor de idioma e os links legais */
.rodape-contato { margin-bottom: 8px; line-height: 1.6; }
.rodape-contato span { display: block; color: var(--neutro-45); }
.rodape-contato a {
  color: var(--fio); text-decoration: underline; text-underline-offset: 2px;
  word-break: break-all;
}
.rodape-contato a:hover { color: var(--areia); }

/* ============================================================
   Proteção de conteúdo (versão Pro)
   ============================================================ */
body.protegido .protegivel { user-select: none; -webkit-user-select: none; }
@media print {
  body.protegido .protegivel { visibility: hidden; }
  body.protegido .aviso-impressao { display: block !important; }
}
.aviso-impressao { display: none; padding: 40px; text-align: center; font-family: var(--font-display); }

@media (max-width: 900px) {
  .onb-slide.com-arte { grid-template-columns: 1fr; gap: 24px; }
  .onb-arte { max-width: 190px; }
}

/* Ponto que indica seção com algo a preencher */
.ponto-pendencia {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lima);
  flex: none; margin-left: auto;
}
nav.menu button .selo-pro + .ponto-pendencia { margin-left: 6px; }
.sidebar-footer .pill { font-size: .58rem; padding: 3px 7px; }
#rodape-legal { font-size: .68rem; color: var(--neutro-45); line-height: 1.8; }
#status-salvo { display: flex; gap: 6px; flex-wrap: wrap; }
#status-salvo .pill { background: rgba(240,237,230,.08); color: var(--fio); }
#status-salvo .pill.on { background: var(--lima); color: var(--grafite); }
#status-ia .pill { background: rgba(240,237,230,.08); color: var(--fio); }
#status-ia .pill.on { background: rgba(214,255,71,.16); color: var(--lima); }

/* ---------------- Seletor de idioma ---------------- */
.seletor-idioma { display: flex; gap: 4px; margin-bottom: 8px; }
.seletor-idioma button {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .1em; padding: 5px 9px; cursor: pointer;
  border: 1px solid rgba(240, 237, 230, .18); border-radius: 3px;
  background: transparent; color: var(--neutro-45); transition: all .14s;
  min-height: 30px; min-width: 34px;
}
.seletor-idioma button:hover { color: var(--areia); border-color: rgba(240, 237, 230, .4); }
.seletor-idioma button.ativo { background: var(--areia); color: var(--grafite); border-color: var(--areia); }

/* ============================================================
   Ajustes finos para telas pequenas
   ============================================================ */

/* Evita o zoom automático do iOS: campos precisam de 16px */
@media (max-width: 899px) {
  input[type=text], input[type=number], input[type=month], input[type=email],
  input[type=tel], select, textarea { font-size: 16px; }

  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.22rem; }

  .card { padding: 18px 16px; border-radius: var(--radius); }
  .card.tight { padding: 14px 16px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }

  /* Alvos de toque: mínimo de 44px recomendado para o dedo */
  button.btn { min-height: 44px; padding: 12px 20px; }
  button.btn.sm { min-height: 44px; padding: 11px 16px; }
  .checks label { min-height: 44px; padding: 11px 16px; }
  .seletor-idioma button { min-height: 40px; min-width: 44px; }
  .link-legal { display: inline-block; padding: 10px 2px; min-height: 40px; }
  .rodape-contato a { display: inline-block; padding: 10px 2px; min-height: 40px; }
  /* E-mail dentro do texto legal: cresce a área do dedo sem empurrar a linha */
  main a[href^="mailto"] { position: relative; }
  main a[href^="mailto"]::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
  }
  .audio-btn, .ordena-setas button { min-height: 44px; }
  .ordena-setas button { min-width: 34px; }
  td .btn.sm, th .btn.sm { min-height: 40px; }
  .scale label { min-height: 46px; display: flex; align-items: center; justify-content: center; }
  .action-head input[type=checkbox] { width: 22px; height: 22px; }
  .audio-btn { min-height: 44px; }
  .ordena-item { padding: 14px; }
  .ordena-setas button { padding: 6px 8px; font-size: .8rem; }

  /* Cabeçalhos de cartão empilham em vez de espremer */
  .card-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sprint-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .medidor { gap: 10px; }
  .btn-row { gap: 8px; }

  /* Tabelas rolam sem quebrar o layout da página */
  table { font-size: .8rem; }
  th, td { padding: 9px 8px; }

  .score-hero { gap: 18px; }
  .score-ring { --anel: min(var(--anel-pedido, 128px), 104px); }

  /* Lista com rolagem própria dentro de uma página que já rola: o dedo nunca
     sabe qual das duas vai responder, e metade das opções fica escondida atrás
     de um corte que não parece corte. Na tela pequena a lista flui inteira. */
  .onb-opcoes.rolagem { max-height: none; overflow-y: visible; padding-right: 0; }

  /* A tela de categorias tem pergunta curta e lista longa. Três tentativas
     ensinaram o que não funciona: caixa de 320px dentro de página que rola dá
     duas rolagens disputando o dedo; lista solta empurra a pergunta para fora;
     título grudento passa por cima das opções.
     
     O que funciona é dividir a altura: cabeçalho e rodapé fixos, e a lista
     ocupando exatamente o que sobra, como único lugar que rola na tela. */
  .onb-palco.palco-lista { overflow: hidden; padding-bottom: 12px; align-items: stretch; }
  .onb-slide.slide-lista { display: flex; flex-direction: column; height: 100%; min-height: 0; }

  /* A altura precisa atravessar o invólucro do corpo até a lista. Ele não
     tinha nome, e a corrente parava nele: a lista recebia `flex: 1` de um pai
     que não estava limitado, e voltava a crescer 1867px numa tela de 812. */
  .onb-slide.slide-lista > .onb-corpo {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  .onb-slide.slide-lista .onb-corpo > :not(.area-rolante) { flex: none; }

  /* A ilustração é bem-vinda numa pergunta curta e é altura roubada da lista
     numa pergunta de dezenove opções. */
  .onb-slide.slide-lista .onb-arte { display: none; }

  /* `area-rolante` é a marca única de "este é o pedaço que rola". Antes a regra
     mencionava só a lista de categorias, e nas telas de ordenar e de público o
     palco ficava com overflow: hidden sem nenhum filho rolando — o conteúdo era
     cortado e o botão de continuar ficava inalcançável. */
  .onb-slide.slide-lista .area-rolante {
    flex: 1 1 auto; min-height: 0; max-height: none;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 4px; margin-bottom: 4px;
  }
  .onb-slide.slide-lista .onb-rodape { position: static; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .onb-slide.slide-lista h2 { font-size: 1.35rem; margin-bottom: 6px; }
  .onb-slide.slide-lista .onb-sub { margin-bottom: 12px; font-size: .9rem; }

  .toast { left: 16px; right: 16px; transform: translateY(20px); max-width: none; }
  .toast.show { transform: translateY(0); }

  .passo-fluxo { flex-wrap: wrap; }
  .passo-fluxo .btn { margin-top: 6px; margin-left: 38px; }

  .pendencia { padding: 14px 16px; }
  .selo-pro-balao { white-space: normal; width: max-content; max-width: 62vw; }
}

/* Onboarding em telas pequenas */
@media (max-width: 899px) {
  .onb-top { padding: 14px 18px; padding-top: calc(14px + env(safe-area-inset-top)); gap: 12px; }
  .onb-progress { max-width: none; }
  .onb-palco { padding: 16px 18px calc(40px + env(safe-area-inset-bottom)); }
  .onb-slide.com-arte { grid-template-columns: 1fr; gap: 22px; }
  .onb-arte { max-width: 170px; order: -1; }
  .onb-slide h2 { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  .onb-sub { font-size: .95rem; margin-bottom: 22px; }
  .onb-campo textarea { font-size: 16px; }
  .onb-opcao { min-height: 52px; }
  .onb-rodape { position: sticky; bottom: 0; background: var(--areia);
    padding: 14px 0 calc(6px + env(safe-area-inset-bottom)); margin-top: 24px; }

  .regua-topo { flex-direction: column; gap: 14px; }
  .regua-polo.dir { text-align: left; }
  .regua-valores { font-size: 1.7rem; }
  /* Polegar maior para arrastar com o dedo */
  input[type=range].regua { height: 8px; }
  input[type=range].regua::-webkit-slider-thumb { width: 36px; height: 36px; }
  input[type=range].regua::-moz-range-thumb { width: 32px; height: 32px; }
  .regua-trilho { padding: 20px 0 10px; }
}

@media (max-width: 420px) {
  main { padding-left: 14px; padding-right: 14px; }
  .card { padding: 16px 14px; }
  h1 { font-size: 1.5rem; }
  .kpi .num { font-size: 1.4rem; }
  .medidor .pct { font-size: 1.3rem; }
}

/* Quem prefere menos animação não recebe animação */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Funil de marketing
   Escala tonal em vez de cor: o verde continua reservado ao CTA.
   ============================================================ */
.bloco { margin: 32px 0; }
.bloco > h2 { font-size: 1.05rem; margin: 0 0 4px; }
.bloco > .sub { margin: 0 0 16px; color: var(--muted); font-size: .85rem; line-height: 1.6; }

.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.celula-nota { font-size: .74rem; color: var(--muted-2); margin-top: 3px; line-height: 1.45; }

/* ---- Diagrama ---- */
.funil-diagrama { display: flex; flex-direction: column; align-items: stretch; }
.funil-etapa { display: flex; flex-direction: column; gap: 6px; }
.funil-caixa {
  border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px;
  background: var(--surface); display: flex; flex-direction: column; gap: 3px;
}
.funil-caixa b { font-size: .92rem; }
.funil-caixa span { font-size: .78rem; color: var(--muted); }
.funil-lado { font-size: .72rem; color: var(--muted-2); padding-left: 2px; }

/* Profundidade no funil = peso do traço, não cor */
.fase-tofu  .funil-caixa { border-color: var(--border-soft); }
.fase-mofu  .funil-caixa { border-color: var(--border); }
.fase-bofu  .funil-caixa { border-color: var(--muted-2); }
.fase-pos   .funil-caixa { border-color: var(--grafite); background: var(--surface-2); }

/* O funil precisa parecer um funil: cada etapa mais estreita que a anterior.
   A conta é feita com margem simétrica, e não com largura, para a caixa
   continuar acompanhando a coluna em qualquer tela. O passo é discreto de
   propósito — afunilar demais espremeria o texto de quem lê no celular. */
.fase-tofu .funil-caixa { margin-inline: 0; }
.fase-mofu .funil-caixa { margin-inline: 4%; }
.fase-bofu .funil-caixa { margin-inline: 8%; }
.fase-pos  .funil-caixa { margin-inline: 12%; }


.funil-seta { height: 22px; position: relative; }
.funil-seta::before {
  content: ''; position: absolute; left: 22px; top: 0; bottom: 6px;
  width: 1px; background: var(--border);
}
.funil-seta::after {
  content: ''; position: absolute; left: 19px; bottom: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 5px solid var(--muted-2);
}

/* A seta acompanha o estreitamento das caixas: presa à esquerda, ficaria
   descolada do desenho assim que as etapas passaram a afunilar. */
.funil-seta::before { left: 50%; }
.funil-seta::after { left: calc(50% - 3px); }
.funil-retorno {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 16px;
  padding: 12px 14px; border: 1px dashed var(--border); border-radius: 8px;
  font-size: .78rem; color: var(--muted); line-height: 1.55;
}
.funil-retorno svg { flex-shrink: 0; margin-top: 1px; }

/* ---- Camadas e automações ---- */
.camada-grid { display: grid; gap: 14px; }
.camada-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.camada-topo h3 { margin: 0; font-size: .95rem; }
.camada-papel { margin: 2px 0 0; font-size: .78rem; color: var(--muted-2); }
.camada-itens { margin: 12px 0; padding-left: 18px; font-size: .82rem; line-height: 1.75; color: var(--muted); }
.camada-pratica { margin: 12px 0 0; font-size: .8rem; line-height: 1.6; }
.camada-aviso {
  margin: 10px 0 0; font-size: .74rem; color: var(--muted-2);
  line-height: 1.55; padding-top: 10px; border-top: 1px solid var(--border-soft);
}
.camada-depois { opacity: .72; }
.automacao-gatilho { margin: 10px 0 0; font-size: .8rem; }
.automacao-gatilho span { color: var(--muted-2); }
.automacao-passos { margin: 12px 0 0; padding-left: 20px; font-size: .82rem; line-height: 1.8; }

/* ---- Estágios ---- */
.estagio-lista { display: grid; gap: 10px; }
.estagio {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; background: var(--surface);
  border: 1px solid var(--border-soft); border-left-width: 3px; border-radius: 8px;
}
.estagio-num {
  font-family: var(--font-mono); font-size: .72rem; color: var(--muted-2);
  min-width: 18px; padding-top: 2px;
}
.estagio b { font-size: .88rem; }
.estagio p { margin: 5px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.55; }
.estagio-sinal { margin-left: 8px; vertical-align: middle; }
.fase-borda-tofu { border-left-color: var(--border); }
.fase-borda-mofu { border-left-color: var(--muted-2); }
.fase-borda-bofu { border-left-color: var(--muted); }
.fase-borda-pos  { border-left-color: var(--grafite); }

/* ---- Nível de intenção: peso crescente, sem cor ---- */
.nivel-intencao {
  font-size: .72rem; white-space: nowrap;
  padding: 3px 8px; border-radius: 3px; display: inline-block;
}
.nivel-intencao.n1 { color: var(--muted-2); box-shadow: inset 0 0 0 1px var(--border-soft); }
.nivel-intencao.n2 { color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.nivel-intencao.n3 { color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.nivel-intencao.n4 { color: var(--text); box-shadow: inset 0 0 0 1px var(--muted-2); font-weight: 500; }
.nivel-intencao.n5 { background: var(--grafite); color: var(--areia); font-weight: 500; }
.fase-tag { font-size: .68rem; white-space: nowrap; }

/* ---- Pontuação ---- */
.pontua-grid { display: grid; gap: 20px; margin-top: 16px; }
.pontua-titulo {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px;
}
.pontua-saida:empty { display: none; }
.pontua-resultado {
  display: flex; gap: 16px; align-items: flex-start; margin-top: 18px;
  padding: 16px; border-radius: 8px; background: var(--surface-2);
  border-left: 3px solid var(--muted-2);
}
.pontua-num { text-align: center; min-width: 62px; }
.pontua-num .lbl {
  display: block; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2);
}
.pontua-num b { font-size: 1.7rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pontua-faixa { font-size: .92rem; }
.pontua-resultado p { margin: 5px 0 0; font-size: .82rem; line-height: 1.6; color: var(--muted); }
.faixa-falar { border-left-color: var(--grafite); }
.faixa-observar { border-left-color: var(--border); }

/* ---- Iscas ---- */
.isca-grid { display: grid; gap: 12px; margin-top: 16px; }
.isca { padding: 14px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--bg); }
.isca-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.isca-topo b { font-size: .88rem; }
.isca-exemplo { margin: 8px 0 0; font-size: .8rem; font-style: italic; color: var(--muted); }
.isca-porque { margin: 8px 0 0; font-size: .78rem; line-height: 1.6; color: var(--muted-2); }

/* ---- Implantação ---- */
.implanta-lista { display: grid; gap: 12px; }
.implanta {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 8px;
}
.implanta-num {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2); white-space: nowrap; padding-top: 2px;
}
.implanta b { font-size: .9rem; }
.implanta ul { margin: 8px 0 0; padding-left: 18px; font-size: .8rem; line-height: 1.75; color: var(--muted); }

.destaque-fechamento { border-left: 3px solid var(--grafite); }
.destaque-fechamento p { font-size: .86rem; line-height: 1.7; margin: 10px 0 0; }

/* ---- Desktop ---- */
@media (min-width: 900px) {
  .funil-diagrama { max-width: 720px; }
  .funil-etapa { flex-direction: row; align-items: center; gap: 18px; }
  .funil-caixa { flex: 1; padding: 16px 20px; }
  .funil-lado { flex-shrink: 0; width: 130px; padding-left: 0; }
  .camada-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pontua-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .isca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloco > h2 { font-size: 1.15rem; }
}

/* ---- Toque confortável no celular ---- */
@media (max-width: 899px) {
  .pontua-grid .checks label { min-height: 44px; }
  .funil-caixa { padding: 13px 14px; }
}

/* ---- Marcadores de etapa do funil (plano, canais, conteúdo) ---- */
.etapas-funil {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 12px 0; padding-top: 12px; border-top: 1px solid var(--border-soft);
}
.etapas-rotulo, .etapas-sugerido {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2);
}
.etapas-sugerido { opacity: .75; margin-right: 2px; }
.etapas-sugerido[hidden] { display: none; }
.etapa-bt {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .07em;
  padding: 6px 10px; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--muted-2);
  transition: all .14s; min-height: 30px;
}
.etapa-bt:hover { border-color: var(--muted-2); color: var(--text); }
.etapa-bt.on { background: var(--grafite); border-color: var(--grafite); color: var(--areia); }

/* Pilares de conteúdo com marcador */
.pilar-funil { display: grid; gap: 4px; margin-top: 14px; }
.pilar-linha { padding: 4px 0; }
.pilar-linha b { font-size: .88rem; }
.pilar-linha p { margin: 3px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.pilar-linha .etapas-funil { margin: 8px 0 0; }

/* ---- Cobertura por etapa, dentro do funil ---- */
.cobertura { display: grid; gap: 12px; }
.cob-etapa {
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border-soft); border-left-width: 3px; border-radius: 8px;
}
.cob-vazia { background: transparent; border-style: dashed; }
.cob-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cob-topo b { font-size: .9rem; }
.cob-contas { display: flex; gap: 10px; flex-wrap: wrap; }
.cob-contas span {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em;
  color: var(--muted-2); text-transform: uppercase;
}
.cob-lista { margin: 10px 0 0; padding-left: 18px; font-size: .8rem; line-height: 1.65; color: var(--muted); }
.cob-lista + .cob-lista { margin-top: 4px; }
.cob-canais li { color: var(--text); }
.cob-transversal { margin-top: 14px; }
.cob-transversal h4 { margin: 0; font-size: .9rem; }
.cob-transversal .sub { margin: 4px 0 0; font-size: .78rem; color: var(--muted-2); }

@media (min-width: 900px) {
  .cobertura { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilar-linha { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
  .pilar-linha > div { flex: 1; }
  .pilar-linha .etapas-funil { margin: 0; border-top: 0; padding-top: 0; flex: none; }
}

@media (max-width: 899px) {
  .etapa-bt { min-height: 40px; padding: 9px 13px; }
}

/* ---- Tabela ordenável ---- */
th .ord {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--muted-2); display: inline-flex; align-items: center; gap: 5px;
  text-align: left;
}
th.num .ord { flex-direction: row-reverse; }
th .ord:hover { color: var(--text); }
th .ord.ativa { color: var(--text); font-weight: 600; }
.ord-seta { width: 7px; height: 7px; flex: none; opacity: 0; transition: opacity .14s; }
.ord:hover .ord-seta { opacity: .4; }
.ord.ativa .ord-seta { opacity: 1; }
.ord-seta::before {
  content: ''; display: block; width: 0; height: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-bottom: 5px solid currentColor;
}
.ord[data-dir="desc"] .ord-seta::before {
  border-bottom: 0; border-top: 5px solid currentColor;
}

/* ---- "Já uso" ---- */
.marcar-uso {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 3px; cursor: pointer;
  border: 1px dashed var(--border); background: transparent; color: var(--muted-2);
  transition: all .14s; min-height: 28px; white-space: nowrap;
}
.marcar-uso:hover { border-style: solid; border-color: var(--muted-2); color: var(--text); }
.marcar-uso.on {
  border-style: solid; border-color: var(--grafite);
  background: var(--grafite); color: var(--areia);
}
.col-uso { text-align: center; }

/* ---- Explicação do critério ---- */
.explica-nota { margin: -8px 0 20px; }
.explica-nota summary {
  cursor: pointer; font-size: .8rem; color: var(--muted);
  padding: 6px 0; list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.explica-nota summary::-webkit-details-marker { display: none; }
.explica-nota summary::before {
  content: '+'; font-family: var(--font-mono); color: var(--muted-2);
}
.explica-nota[open] summary::before { content: '−'; }
.explica-nota summary:hover { color: var(--text); }
.explica-nota p {
  margin: 4px 0 0; font-size: .82rem; line-height: 1.65; color: var(--muted);
  padding-left: 16px; border-left: 2px solid var(--border-soft);
}

@media (max-width: 899px) {
  .marcar-uso { min-height: 40px; padding: 10px 14px; }
  th .ord { min-height: 40px; }
}

/* ---- Canais recomendados dentro de "Meu negócio" ---- */
.checks label.canal-indicado { border-color: var(--muted-2); }
.selo-indicado {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2); margin-left: 7px;
  border: 1px solid var(--border); border-radius: 3px; padding: 2px 5px;
  white-space: nowrap;
}
.dica-canais {
  margin: 4px 0 0; font-size: .8rem; line-height: 1.6; color: var(--muted);
  padding-top: 12px; border-top: 1px solid var(--border-soft);
}

/* ---- Aviso de versão nova ---- */
.aviso-versao {
  position: fixed; z-index: 60;
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--grafite); color: var(--areia);
  box-shadow: 0 6px 28px rgba(16, 18, 19, .28);
  font-size: .85rem;
}
.aviso-versao span { flex: 1; }
.aviso-versao .btn { flex: none; }
.fechar-aviso {
  background: none; border: 0; color: var(--fio); cursor: pointer;
  font-size: 1.25rem; line-height: 1; padding: 4px 8px; flex: none;
}
.fechar-aviso:hover { color: var(--areia); }
.dica-instalar { margin: 12px 0 0; font-size: .82rem; line-height: 1.6; color: var(--muted); }

@media (min-width: 900px) {
  .aviso-versao { left: auto; right: 20px; bottom: 20px; max-width: 420px; }
}
@media (max-width: 899px) {
  .fechar-aviso { min-height: 40px; min-width: 40px; }
}

/* ---- Sincronização entre aparelhos ---- */
.sinc-codigo {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  margin-top: 16px; padding: 14px 16px;
  background: var(--surface-2); border-radius: 8px;
}
.sinc-codigo code {
  font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: .12em;
  color: var(--text); display: block; margin-top: 4px; word-break: break-all;
}
#entrar-codigo {
  font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.conflito-sinc { flex-direction: column; align-items: stretch; gap: 12px; }
.conflito-texto b { display: block; margin-bottom: 4px; }
.conflito-texto p { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--fio); }
.conflito-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.conflito-botoes .btn { flex: 1; min-width: 150px; }
.conflito-botoes .btn.ghost { border-color: var(--fio); color: var(--areia); }

@media (max-width: 899px) {
  .sinc-codigo { flex-direction: column; align-items: flex-start; }
  .sinc-codigo .btn { align-self: stretch; }
}

/* ---- Idioma na tela de abertura ---- */
.onb-idioma { margin: 0 0 26px; }
.onb-idioma > span {
  display: block; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
}
.onb-idioma .seletor-idioma { margin-bottom: 0; }
.onb-idioma .seletor-idioma button {
  border-color: var(--border); color: var(--muted);
  font-family: var(--font-body); font-size: .8rem; letter-spacing: 0;
  text-transform: none; padding: 8px 14px; min-height: 38px;
}
.onb-idioma .seletor-idioma button:hover { border-color: var(--muted-2); color: var(--text); }
.onb-idioma .seletor-idioma button:active { transform: scale(.97); border-color: var(--grafite); }
/* Enquanto o catálogo do idioma é buscado. Sem sinal nenhum, uma troca lenta é
   indistinguível de um botão quebrado. */
.onb-idioma .seletor-idioma button[data-carregando] {
  opacity: .55; border-style: dashed; pointer-events: none;
}
.onb-idioma .seletor-idioma button.ativo {
  background: var(--grafite); border-color: var(--grafite); color: var(--areia);
}
@media (max-width: 899px) {
  .onb-idioma .seletor-idioma button { min-height: 44px; }
}

/* ---- Regimes de proteção de dados ---- */
.regime { border-top: 1px solid var(--border-soft); }
.regime:first-of-type { border-top: 0; }
.regime summary {
  cursor: pointer; padding: 14px 0; list-style: none;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.regime summary::-webkit-details-marker { display: none; }
.regime summary::before {
  content: '+'; font-family: var(--font-mono); color: var(--muted-2); flex: none;
}
.regime[open] summary::before { content: '−'; }
.regime summary b { font-size: .95rem; }
.regime summary > span { font-size: .8rem; color: var(--muted); }
.regime-corpo { padding: 0 0 18px 18px; }
.regime-lei { margin: 0 0 12px; font-size: .8rem; color: var(--muted-2); font-style: italic; }
.regime-corpo ul { margin: 0; padding-left: 18px; font-size: .87rem; line-height: 1.75; }
.regime-corpo ul li { margin-bottom: 6px; }
.regime-meta { margin: 12px 0 0; font-size: .82rem; line-height: 1.6; color: var(--muted); }
.regime-meta b { color: var(--text); }

/* ---- Convite para instalar (tela de Início) ---- */
.convite-instalar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 20px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.convite-texto { flex: 1; }
.convite-texto b { font-size: .9rem; display: block; }
.convite-texto p { margin: 3px 0 0; font-size: .82rem; line-height: 1.55; color: var(--muted); }
.convite-instalar .btn { flex: none; }
.convite-instalar .fechar-aviso { color: var(--muted-2); }
.convite-instalar .fechar-aviso:hover { color: var(--text); }

@media (max-width: 899px) {
  .convite-instalar { flex-wrap: wrap; }
  .convite-texto { flex-basis: calc(100% - 54px); }
  .convite-instalar .btn { flex-basis: 100%; }
}

/* ---- Rodapé do menu: IA e plano na mesma linha ---- */
#status-linha { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
#status-linha .pill { background: rgba(240,237,230,.08); color: var(--fio); }
#status-linha .pill.on { background: var(--lima); color: var(--grafite); }
.rodape-avalie { margin-bottom: 8px; }

/* ---- Janela modal ---- */
.modal-fundo {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: safe center; justify-content: center;
  padding: 20px; overflow-y: auto;
  background: rgba(16, 18, 19, .55);
}
.modal {
  position: relative; width: 100%; max-width: 520px;
  background: var(--surface); border-radius: 12px; padding: 28px 26px;
  box-shadow: 0 18px 60px rgba(16, 18, 19, .3);
}
.modal h2 { margin: 0 28px 0 0; font-size: 1.1rem; line-height: 1.35; }
.modal-sub { margin: 8px 0 0; font-size: .85rem; line-height: 1.6; color: var(--muted); }
.modal-fechar {
  position: absolute; top: 14px; right: 14px;
  background: none; border: 0; cursor: pointer; color: var(--muted-2);
  font-size: 1.4rem; line-height: 1; padding: 6px 10px;
}
.modal-fechar:hover { color: var(--text); }

/* ---- Escala do NPS ---- */
.nps-escala { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; margin-top: 22px; }
.nps-nota {
  font-family: var(--font-mono); font-size: .78rem; padding: 10px 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: var(--muted); transition: all .12s;
  min-height: 42px;
}
.nps-nota:hover { border-color: var(--muted-2); color: var(--text); }
.nps-nota.ativa { background: var(--grafite); border-color: var(--grafite); color: var(--areia); font-weight: 600; }
.nps-pontas {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: .7rem; color: var(--muted-2);
}
.modal textarea { width: 100%; }

@media (max-width: 899px) {
  .modal { padding: 24px 18px; }
  /* Onze botões não cabem em 375px: duas fileiras leem melhor que apertar */
  .nps-escala { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .nps-nota { min-height: 46px; font-size: .85rem; }
  .nps-pontas { margin-top: 10px; }
}

/* ---- Stack de ferramentas ---- */
.stack-grid { display: grid; gap: 4px; margin-top: 18px; }
.stack-campo { margin-bottom: 4px; }
.stack-essencial {
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); font-style: normal;
  border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; margin-left: 6px;
}
.stack-falta input { border-color: var(--border); background: var(--surface-2); }

/* Ferramentas dentro das camadas do funil */
.camada-ferramentas {
  margin: 10px 0 0; font-size: .8rem; line-height: 1.55;
  padding: 8px 10px; border-radius: 6px; background: var(--surface-2);
}
.camada-ferramentas span {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2); margin-right: 4px;
}
.camada-ferramentas.vazia { background: transparent; border: 1px dashed var(--border); color: var(--muted); }
.camada-ferramentas .link-legal { font-size: .78rem; margin-left: 6px; }

@media (min-width: 900px) {
  .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
}

/* ============================================================
   Monitor
   ============================================================ */
.monitor-bloco { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.monitor-bloco:first-of-type { margin-top: 22px; }
.monitor-bloco h3 {
  margin: 0 0 4px; font-size: .95rem;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.monitor-ajuda { margin: 0 0 16px; font-size: .82rem; line-height: 1.6; color: var(--muted); }
.monitor-vazio { margin: 0; font-size: .85rem; color: var(--muted-2); font-style: italic; }
.monitor-quando {
  margin: 12px 0 0; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2);
}

/* ---- Notas ---- */
.desempenho-grid { display: grid; gap: 20px; }
.desempenho-cab {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px;
}
.notas-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.nota-anel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 74px; padding: 12px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
}
.nota-anel b { font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.nota-anel span { font-size: .66rem; color: var(--muted-2); margin-top: 5px; text-align: center; }
.nota-anel.boa  { border-color: var(--grafite); }
.nota-anel.media { border-color: var(--muted-2); }
.nota-anel.ruim { border-color: var(--atencao); }
.nota-anel.ruim b { color: var(--atencao); }

.metricas-linha { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.metrica-chip {
  font-size: .72rem; padding: 4px 8px; border-radius: 4px;
  background: var(--surface-2); color: var(--muted);
}
.metrica-chip i {
  font-family: var(--font-mono); font-size: .6rem; font-style: normal;
  letter-spacing: .08em; color: var(--muted-2); margin-right: 4px;
}
.metrica-chip.ruim { background: var(--atencao-suave); color: var(--atencao); }
.problemas { margin: 8px 0 0; padding-left: 18px; font-size: .82rem; line-height: 1.7; color: var(--muted); }

/* ---- GEO ---- */
.geo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.geo-lista li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: .85rem;
}
.geo-lista li:last-child { border-bottom: 0; }
.geo-marca { font-family: var(--font-mono); width: 16px; flex: none; text-align: center; }
.geo-lista li.ok .geo-marca { color: var(--grafite); }
.geo-lista li.falha .geo-marca { color: var(--atencao); }
.geo-lista li.falha .geo-nome { color: var(--text); }
.geo-nome { flex: 1; color: var(--muted); }
.geo-valor {
  font-family: var(--font-mono); font-size: .7rem; color: var(--muted-2);
  max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fonte b { font-size: .86rem; }

/* ---- Parecer ---- */
.parecer { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: p; }
.parecer li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border-soft); border-left-width: 3px;
}
.parecer li.grav-alta { border-left-color: var(--atencao); }
.parecer li.grav-media { border-left-color: var(--muted-2); }
.parecer li.grav-baixa { border-left-color: var(--border); }
.parecer-sel {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2); flex: none; width: 82px; padding-top: 3px;
}
.parecer li b { font-size: .88rem; }
.parecer li p { margin: 5px 0 0; font-size: .82rem; line-height: 1.6; color: var(--muted); }

@media (min-width: 900px) {
  .desempenho-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .geo-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
}
@media (max-width: 899px) {
  .parecer li { flex-direction: column; gap: 6px; }
  .parecer-sel { width: auto; }
  .nota-anel { min-width: 68px; }
}

/* "Outra" fecha a lista e ocupa a linha inteira */
.stack-outra { border-top: 1px solid var(--border-soft); padding-top: 14px; margin-top: 8px; }
@media (min-width: 900px) { .stack-outra { grid-column: 1 / -1; } }

/* ---- Evolução das medições ---- */
.evolucao-grid { display: grid; gap: 18px; }
.evolucao { padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface); }
.evolucao-cab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.evolucao-cab span {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2); flex: 1;
}
.evolucao-cab b { font-size: 1.3rem; font-variant-numeric: tabular-nums; line-height: 1; }
.evolucao-cab i {
  font-style: normal; font-family: var(--font-mono); font-size: .7rem;
  color: var(--muted-2); font-variant-numeric: tabular-nums;
}
.evolucao-cab i.sobe { color: var(--grafite); }
.evolucao-cab i.desce { color: var(--atencao); }
.evolucao-pe {
  margin-top: 6px; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2);
}
@media (min-width: 900px) { .evolucao-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Números das redes ---- */
.redes-form { margin-top: 18px; }
.rede-linha { padding: 14px 0; border-top: 1px solid var(--border-soft); }
.rede-linha:first-child { border-top: 0; padding-top: 0; }
.rede-nome {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px;
}
.rede-campos { display: grid; gap: 4px 14px; }
.rede-campo { margin-bottom: 0; }
.rede-campo span:first-child { font-size: .74rem; }
.rede-campo .hint { font-size: .66rem; }

@media (min-width: 700px) {
  .rede-campos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Número da pergunta: continua a contagem das 7 da conversa inicial */
.q-num {
  font-family: var(--font-mono); font-size: .7rem; color: var(--muted-2);
  margin-right: 8px; font-weight: 400;
}

/* ---- Conferência de coerência ---- */
.coerencia-lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.coerencia-lista li {
  padding: 13px 16px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border-soft); border-left-width: 3px;
}
.coerencia-lista li.grav-alta { border-left-color: var(--atencao); }
.coerencia-lista li.grav-media { border-left-color: var(--muted-2); }
.coerencia-lista li b { font-size: .88rem; display: block; }
.coerencia-lista li p { margin: 6px 0 0; font-size: .83rem; line-height: 1.6; color: var(--muted); }


/* ---------------- Ajuda ao lado de um termo técnico ---------------- */
/* Aparece no hover do mouse e no foco do botão — que é o que o toque e o
   teclado disparam. Depender de `title` não funcionaria no celular. */
.com-dica { position: relative; display: inline-flex; vertical-align: middle; margin-left: 5px; }
.dica-marca {
  width: 15px; height: 15px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-family: var(--font-body); font-size: 10px;
  font-weight: 600; line-height: 1; cursor: help; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.dica-marca:hover, .dica-marca:focus-visible { border-color: var(--grafite); color: var(--grafite); }
.dica-balao {
  /* Ancora a partir do marcador e cresce para a direita. Centralizar jogaria o
     balão para fora quando o marcador estivesse num bloco estreito, como o
     rótulo de um indicador. */
  position: absolute; left: 0; top: calc(100% + 7px);
  z-index: 30; width: max-content; max-width: 260px;
  background: var(--grafite); color: var(--areia);
  padding: 9px 11px; border-radius: 6px;
  font-family: var(--font-body); font-size: .78rem; font-weight: 400;
  line-height: 1.5; letter-spacing: 0; text-transform: none;
  white-space: normal; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity .12s;
  box-shadow: 0 6px 20px rgba(16, 18, 19, .18);
}
.com-dica:hover .dica-balao, .com-dica:focus-within .dica-balao { opacity: 1; visibility: visible; }
/* No fim de uma linha, cresce para a esquerda para não sair pela direita */
.com-dica.dica-fim .dica-balao { left: auto; right: 0; }
@media (prefers-reduced-motion: reduce) { .dica-balao { transition: none; } }
@media (max-width: 899px) { .dica-balao { max-width: min(260px, 76vw); } }


/* ============================================================
   TELA BAIXA — celular deitado
   ============================================================
   Precisa vir depois de todas as regras de largura: as media queries de
   largura definem o rodapé grudado, e na cascata a última declaração vence.
   Colocado antes, este bloco era simplesmente ignorado — foi o que aconteceu
   na primeira tentativa desta correção.

   Com 393px de altura o rodapé grudado se prende ao fim da área visível
   enquanto seu lugar real fica fora da tela, e desenha o botão por cima do
   título e do subtítulo. Sticky serve para tela alta com formulário longo;
   aqui ele come a altura que já falta. */
@media (max-height: 540px) {
  .onb-rodape,
  .onb-slide.slide-lista .onb-rodape {
    position: static; margin-top: 20px;
    padding: 12px 0 calc(6px + env(safe-area-inset-bottom));
  }
  .onb-top { padding: 12px 24px; }
  .onb-palco { padding: 12px 24px 20px; align-items: safe start; }
  .onb-slide h2 { font-size: clamp(1.2rem, 3.2vw, 1.55rem); margin-bottom: 8px; }
  .onb-sub { font-size: .88rem; margin-bottom: 14px; line-height: 1.5; }
  .onb-idioma { margin-bottom: 14px; }
  .onb-num { margin-bottom: 8px; }
  .onb-campo textarea { min-height: 56px; }

  /* A divisão de altura das telas de lista pressupõe que sobre altura para
     dividir. Deitado, o que sobra para a lista é uma faixa de 16px e o botão
     cai fora do palco, que tem overflow: hidden — inalcançável. Medido.
     Aqui a tela volta a ser uma rolagem só, como todas as outras. */
  .onb-palco.palco-lista { overflow-y: auto; padding-bottom: 20px; }
  .onb-slide.slide-lista { display: block; height: auto; }
  .onb-slide.slide-lista > .onb-corpo { display: block; }
  .onb-slide.slide-lista .area-rolante {
    flex: none; max-height: none; overflow: visible; padding-right: 0;
  }
  /* A ilustração custa 199px dos 393 de um celular deitado — mais de metade da
     tela, para decoração, empurrando a pergunta e o botão para fora. Ela é
     bem-vinda onde há altura sobrando; aqui não há. */
  .onb-arte { display: none; }
  .onb-slide.com-arte { grid-template-columns: 1fr; gap: 0; }
}