/* ===== GATA Pessoal — marca herdada do B2B (CLAUDE.md §4) =====
   Flat, limpo, "gemba". Sem gradiente, 3D ou sombra na marca.
   Âmbar é o acento ÚNICO, ≤10% da tela. Texto sobre âmbar = sempre #402A00.
   Mobile-first: tudo é pensado para o polegar primeiro. */

:root{
  --verde:#1B3D34; --verde-2:#2F5C4F;
  --ambar:#F0A202; --ambar-ink:#402A00; --ambar-soft:#FBF0D6;
  --ground:#ECEAE4; --surface:#FFFFFF; --surface-2:#F3F1EC; --soft:#F6F4EF;
  --ink:#1B3D34; --ink-2:#5C6B65; --muted:#8A9691;
  --line:#DCD8CF; --line-soft:#EBE8E1; --concreto:#C7C3BA;
  --good:#2F6B4F; --warn:#C98A00; --bad:#8C3A4A;
  --good-soft:#E6F0EA; --bad-soft:#F6E7E9; --cinza:#E7E4DD;
  --chrome:#1B3D34; --chrome-ink:#ECEAE4; --chrome-ink-2:#9FB0A8;
  --shadow:0 2px 6px rgba(27,61,52,.06), 0 18px 40px -24px rgba(27,61,52,.28);
  --r:14px;

  /* ---------- MEDIDAS DO APARELHO (o app se ajusta, não o usuário) ----------
     Lições trazidas do FocoFy, que já passou por essa correção. iPhone com notch/ilha e
     barra de gestos "come" as bordas quando o app roda em tela cheia (viewport-fit=cover,
     obrigatório no PWA instalado). Estas variáveis são a ÚNICA fonte dessas medidas: toda
     barra fixa e todo espaçamento se referem a elas. Em aparelho sem recorte valem zero e
     nada muda. */
  --safe-topo:env(safe-area-inset-top, 0px);
  --safe-baixo:env(safe-area-inset-bottom, 0px);
  --safe-esq:env(safe-area-inset-left, 0px);
  --safe-dir:env(safe-area-inset-right, 0px);
  --barra-baixo:calc(62px + var(--safe-baixo));   /* abas + recorte */
  --coluna:520px;                                  /* largura da coluna do app */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0E1C18; --surface:#17322A; --surface-2:#1E3B32; --soft:#14291F;
  --ink:#ECEAE4; --ink-2:#B7C2BC; --muted:#7E8F88;
  --line:#2A473E; --line-soft:#223A33; --concreto:#2A473E;
  --ambar-soft:#3A2E12; --ambar-ink:#2A1C00;
  --good:#4E9E78; --warn:#E0A93C; --bad:#C25E6E;
  --good-soft:#1C3A2C; --bad-soft:#3A2028; --cinza:#223A33;
  --chrome:#0B1613;
  --shadow:0 2px 6px rgba(0,0,0,.3), 0 18px 40px -24px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --ground:#0E1C18; --surface:#17322A; --surface-2:#1E3B32; --soft:#14291F;
  --ink:#ECEAE4; --ink-2:#B7C2BC; --muted:#7E8F88;
  --line:#2A473E; --line-soft:#223A33; --concreto:#2A473E;
  --ambar-soft:#3A2E12; --ambar-ink:#2A1C00;
  --good:#4E9E78; --warn:#E0A93C; --bad:#C25E6E;
  --good-soft:#1C3A2C; --bad-soft:#3A2028; --cinza:#223A33;
  --chrome:#0B1613;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* Toque responde NA HORA: sem os 300ms de atraso e com resposta visual imediata. */
button,a,label,[role="button"],.item,.menu-item{touch-action:manipulation}
button:not(:disabled):active,a:active,label:active{filter:brightness(.94);transform:scale(.985);
  transition:filter .05s, transform .05s}

/* Rolagem horizontal NUNCA: conteúdo largo (tabela, gráfico) não pode deslocar as barras
   fixas. `clip` preserva o sticky nos navegadores modernos; `hidden` é o retorno seguro. */
html,body{margin:0;padding:0;width:100%;overflow-x:hidden;overflow-x:clip}
html{
  /* O Safari infla o texto sozinho ao girar o aparelho, e isso estraga qualquer layout
     calculado. Aqui o tamanho é sempre o que a gente definiu. */
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  min-height:100%;
}
body{
  background:var(--ground); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
  /* 100dvh acompanha a barra do navegador aparecendo/sumindo no celular; o 100vh acima
     fica como retorno para quem não suporta. */
  min-height:100vh; min-height:100dvh;
}
a{color:inherit}
h1{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
h2{font-size:19px;font-weight:800;line-height:1.2}
h3{font-size:15px;font-weight:800}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dica{font-size:13px;color:var(--muted)}
.centro{text-align:center}

/* ---- a marca: o G-ignição. A ABERTURA é a marca — nunca fechar o anel ---- */
.marca{width:46px;height:46px;flex:none}
.marca circle{stroke:var(--verde);fill:none;stroke-width:9;stroke-linecap:round}
.marca line{stroke:var(--ambar);stroke-width:9;stroke-linecap:round}
:root[data-theme="dark"] .marca circle{stroke:var(--chrome-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .marca circle{stroke:var(--chrome-ink)}}

/* ---- layout ---- */
.tela{max-width:var(--coluna);margin:0 auto;
  padding:calc(20px + var(--safe-topo)) calc(16px + var(--safe-dir))
          calc(var(--barra-baixo) + 30px) calc(16px + var(--safe-esq))}
.tela-cheia{max-width:420px;margin:0 auto;
  padding:calc(32px + var(--safe-topo)) calc(20px + var(--safe-dir))
          calc(32px + var(--safe-baixo)) calc(20px + var(--safe-esq));
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;gap:18px;
  /* `safe center` centraliza quando cabe e ALINHA AO TOPO quando não cabe. Com `center`
     puro, numa tela baixa (iPhone SE com o teclado aberto) o começo do formulário sai para
     cima da viewport e fica inalcançável — a rolagem não volta lá. */
  justify-content:center;justify-content:safe center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card+.card{margin-top:10px}
.linha{display:flex;align-items:center;gap:10px}
.entre{display:flex;align-items:center;justify-content:space-between;gap:10px}
.col{display:flex;flex-direction:column;gap:10px}
.mt{margin-top:16px}

/* ---- formulários: alvo de dedo, nunca menor que 46px ---- */
label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:5px}
input,textarea,select{
  width:100%;padding:13px 14px;font-size:16px; /* 16px evita o zoom automático do iOS */
  font-family:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--concreto);border-radius:11px;
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ambar);outline-offset:1px;border-color:var(--ambar)}
textarea{min-height:84px;resize:vertical}
.campo{margin-bottom:13px}
.check{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;font-size:14px;color:var(--ink-2);line-height:1.45}
.check input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--ambar)}

.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:15px 18px;font-size:15px;font-weight:800;font-family:inherit;
  background:var(--verde);color:#ECEAE4;border:0;border-radius:12px;cursor:pointer;
}
.btn:active{background:var(--verde-2)}
.btn.ambar{background:var(--ambar);color:var(--ambar-ink)}
.btn.fantasma{background:transparent;color:var(--ink);border:1px solid var(--concreto)}
.btn.pequeno{width:auto;padding:9px 14px;font-size:13px;border-radius:9px}
.btn:disabled{opacity:.55}
.link{background:none;border:0;color:var(--ink-2);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:8px}

.aviso{padding:12px 14px;border-radius:11px;font-size:14px;line-height:1.45;margin-bottom:12px}
.aviso.erro{background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad)}
.aviso.ok{background:var(--good-soft);color:var(--good);border:1px solid var(--good)}
.aviso.info{background:var(--ambar-soft);color:var(--ink);border:1px solid var(--ambar)}

/* ---- farol ---- */
.dot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.f-verde{background:var(--good)} .f-amarelo{background:var(--warn)}
.f-vermelho{background:var(--bad)} .f-cinza{background:var(--cinza)}
.tag{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  padding:3px 8px;border-radius:20px;white-space:nowrap}

/* ---- barra de abas ---- */
/* A barra é fixa, mas acompanha a COLUNA do conteúdo (520px) — não a largura da janela.
   Sem o max-width + margin auto, no notebook os botões se espalham por 1900px enquanto o
   conteúdo fica no meio. No celular as duas larguras coincidem e o defeito não aparece. */
.abas{
  position:fixed;left:0;right:0;bottom:0;height:var(--barra-baixo);display:flex;
  max-width:var(--coluna);margin:0 auto;
  background:var(--surface);border-top:1px solid var(--line);z-index:20;
  padding-bottom:var(--safe-baixo);
}
@media (min-width:560px){
  .abas{border-left:1px solid var(--line);border-right:1px solid var(--line);
        border-radius:16px 16px 0 0}
}
.aba{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);font-size:10px;font-weight:800;background:none;border:0;cursor:pointer;font-family:inherit}
.aba svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aba.on{color:var(--ambar)}

/* ---- anel do dia ---- */
.anel{--p:0;width:62px;height:62px;border-radius:50%;flex:none;
  background:conic-gradient(var(--ambar) calc(var(--p)*1%), var(--line) 0);
  display:flex;align-items:center;justify-content:center;position:relative}
.anel::after{content:"";width:47px;height:47px;border-radius:50%;background:var(--surface-2)}
.anel b{position:absolute;font-size:13px;font-weight:800}

/* ---- itens marcáveis ---- */
.item{display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:15px;
  cursor:pointer;user-select:none}
.item+.item{margin-top:7px}
.chk{width:24px;height:24px;border-radius:50%;border:2px solid var(--muted);flex:none;position:relative}
.item.feito{color:var(--muted)}
.item.feito .chk{background:var(--good);border-color:var(--good)}
.item.feito .chk::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:14px;font-weight:800}
.item.feito .txt{text-decoration:line-through}
.item .txt{flex:1}

/* ---- empurrão da mentora ---- */
.empurrao{background:var(--ambar-soft);border:1px solid var(--ambar);border-radius:var(--r);
  padding:13px 14px;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45}
.empurrao .ic{width:24px;height:24px;border-radius:50%;background:var(--ambar);color:var(--ambar-ink);
  flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}

/* ---- índice ---- */
.indice{text-align:center;padding:10px 0}
.indice .n{font-size:52px;font-weight:800;line-height:1;letter-spacing:-.03em}
.indice .l{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800}
.indice .base{font-size:13px;color:var(--good);margin-top:6px}
.barra{height:7px;border-radius:5px;background:var(--line);overflow:hidden;flex:1}
.barra i{display:block;height:100%;border-radius:5px}
.area-linha{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line-soft)}
.area-linha:last-child{border:0}
.area-linha .nm{font-size:14px;font-weight:600;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.area-linha .pc{font-size:12px;color:var(--muted);width:34px;text-align:right;font-variant-numeric:tabular-nums}
/* A letra do pilar (G·A·T·A) — o acrônimo é o próprio nome do método, então ele aparece */
.letra{width:26px;height:26px;border-radius:7px;flex:none;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:13px;
  background:var(--verde);color:var(--chrome-ink)}

/* ---- chat da mentora ---- */
.chat{display:flex;flex-direction:column;gap:9px;padding-bottom:8px}
.msg{max-width:86%;padding:11px 13px;border-radius:16px;font-size:15px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.msg.ia{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.eu{align-self:flex-end;background:var(--chrome);color:var(--chrome-ink);border-bottom-right-radius:5px}
.msg.crise{align-self:stretch;max-width:100%;background:var(--bad-soft);border:1px solid var(--bad)}
.msg b{font-weight:800}

/* ---- conteúdo rico dentro da bolha ----
   A conversa é a superfície que a pessoa lê todo dia. Markdown cru na tela ("**assim**")
   é desleixo, e desleixo aqui contamina a percepção do produto inteiro. */
.msg.rico{white-space:normal}
.msg.rico > *:first-child{margin-top:0}
.msg.rico > *:last-child{margin-bottom:0}
.msg.rico p{margin:0 0 9px}
.msg.rico h4{font-size:14.5px;font-weight:800;margin:14px 0 7px;letter-spacing:-.01em}
.msg.rico ul,.msg.rico ol{margin:0 0 10px;padding-left:20px}
.msg.rico li{margin-bottom:5px;line-height:1.5}
.msg.rico li::marker{color:var(--ambar);font-weight:800}
.msg.rico code{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;
  padding:1px 5px;font-size:13px;font-family:ui-monospace,Menlo,Consolas,monospace}
.msg.rico pre{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;overflow-x:auto;font-size:12.5px;margin:0 0 10px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.msg.rico blockquote{border-left:3px solid var(--ambar);padding:2px 0 2px 12px;margin:0 0 10px;
  color:var(--ink-2);font-style:italic}
.msg.rico a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* tabela: rola sozinha em vez de estourar a bolha no celular */
.tab-rolar{overflow-x:auto;margin:0 0 10px;border:1px solid var(--line);border-radius:10px}
.msg.rico table{border-collapse:collapse;width:100%;font-size:13.5px}
.msg.rico thead th{background:var(--surface-2);text-align:left;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:9px 11px;white-space:nowrap}
.msg.rico td{padding:9px 11px;border-top:1px solid var(--line-soft);vertical-align:top}
.msg.rico tbody tr:nth-child(even){background:color-mix(in srgb, var(--surface-2) 55%, transparent)}
.msg.rico td:not(:first-child){font-variant-numeric:tabular-nums}

/* gráfico inline — sem biblioteca, na paleta da marca */
.grafico{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:12px 12px 8px;margin:0 0 10px}
.grafico svg{width:100%;height:auto;display:block}
.g-tit{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.g-leg{font-size:11.5px;color:var(--muted);margin-top:7px}
/* CUIDADO: text-anchor no CSS VENCE o atributo do SVG. Definir "middle" aqui e tentar
   corrigir com text-anchor="start" no elemento não funciona — foi assim que os rótulos das
   barras nasceram centrados em x=0 e metade do texto saiu da tela. Cada uso tem sua classe. */
.grafico .g-rot{font-size:9.5px;fill:var(--ink-2);font-weight:700;text-anchor:middle}
.grafico .g-rot-esq{font-size:10px;fill:var(--ink-2);font-weight:700;text-anchor:start}
.grafico .g-rot-dir{font-size:9.5px;fill:var(--ink-2);font-weight:700;text-anchor:end}
.grafico .g-val{font-size:10px;fill:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;
  text-anchor:start}
/* ---- A barra de composição — desenho do assistente do FocoFy ----
   Fica ACIMA da barra de abas (que cresce com a safe area no iPhone). Três decisões
   que vieram de lá e resolvem problema real de celular:
   • os ícones ficam DENTRO da pílula e só o botão redondo fica fora — a área de toque
     do enviar/falar nunca briga com o texto;
   • `min-width:0` na pílula e no textarea é o que deixa a barra ENCOLHER num iPhone
     deitado (320px); sem isso o botão redondo sai do alinhamento da tela;
   • gradiente em vez de borda: o texto que rola por baixo some suave. */
.dock{position:fixed;left:0;right:0;bottom:var(--barra-baixo);
  max-width:var(--coluna);margin:0 auto;z-index:19;
  padding:6px calc(16px + var(--safe-dir)) 10px calc(16px + var(--safe-esq));
  background:linear-gradient(transparent, var(--ground) 26%);
  display:flex;flex-direction:column;gap:6px}
.dock .linha-envio{display:flex;gap:8px;align-items:flex-end}

.pilula{flex:1 1 0;min-width:0;display:flex;align-items:flex-end;gap:4px;
  background:var(--surface);border:1px solid var(--concreto);border-radius:22px;
  padding:6px 8px 6px 14px}
.pilula textarea{flex:1 1 0;min-width:0;border:0;outline:0;resize:none;font:inherit;
  font-size:16px;line-height:20px;max-height:130px;padding:6px 0;background:transparent;
  color:var(--ink);min-height:0}
.pilula textarea::placeholder{color:var(--muted)}

.ico{width:34px;height:34px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;flex:none}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ico:disabled{opacity:.4}

.fab{width:46px;height:46px;border-radius:50%;border:0;background:var(--ambar);
  color:var(--ambar-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.fab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.fab:disabled{opacity:.5}
.fab.gravando{background:var(--bad);color:#fff;animation:pulsa 1s infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.55}}

/* Gravando: a lixeira CANCELA (apaga o áudio) e o ✓ envia. Padrão WhatsApp — é o que
   evita mandar sem querer um áudio do qual a pessoa se arrependeu no meio. */
.gravando-faixa{flex:1 1 0;min-width:0;display:flex;align-items:center;
  background:var(--surface);border:1px solid var(--concreto);border-radius:22px;padding:6px 8px 6px 6px}
.gravando-faixa span{flex:1;color:var(--bad);font-weight:700;font-size:14px;padding:12px 4px}

.anexos-fila{display:flex;gap:6px;flex-wrap:wrap}
.anexo-chip{font-size:12px;font-weight:700;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:5px 10px;display:flex;gap:7px;align-items:center;max-width:100%}
.anexo-chip i{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anexo-chip b{cursor:pointer;color:var(--bad);flex:none}

/* ---- micro-resposta: some sozinha, não exige toque ---- */
.toque{position:fixed;left:50%;bottom:82px;transform:translateX(-50%) translateY(10px);
  z-index:50;background:var(--chrome);color:var(--chrome-ink);padding:11px 18px;
  border-radius:22px;font-size:14px;font-weight:700;box-shadow:var(--shadow);
  max-width:88vw;text-align:center;opacity:0;transition:opacity .18s, transform .18s;
  pointer-events:none}
.toque.ver{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- desafio de 7 dias: a primeira vitória ---- */
.desafio{background:var(--surface);border:2px solid var(--ambar);border-radius:var(--r);padding:15px}
.desafio .selo{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ambar-ink);background:var(--ambar);padding:3px 9px;border-radius:20px}
.pontos{display:flex;gap:6px;margin-top:11px}
.pontos i{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
  color:var(--muted);font-style:normal}
.pontos i.ok{background:var(--ambar);border-color:var(--ambar);color:var(--ambar-ink)}

/* ---- semana (streak que perdoa) ---- */
.semana{display:flex;gap:5px;align-items:center}
.semana i{width:9px;height:9px;border-radius:2px;background:var(--line);font-style:normal}
.semana i.ok{background:var(--good)}

/* ---- espera: a marca girando ----
   O anel de ignição girando é a única animação do produto. Enquanto a mentora pensa, a tela
   trava de propósito: sem isso a pessoa toca duas vezes e pede duas vezes. */
.espera{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  background:color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter:blur(2px)}
.espera svg{width:64px;height:64px;animation:girar 1.1s linear infinite}
.espera svg circle{stroke:var(--verde);fill:none;stroke-width:9;stroke-linecap:round}
.espera svg line{stroke:var(--ambar);stroke-width:9;stroke-linecap:round}
:root[data-theme="dark"] .espera svg circle{stroke:var(--chrome-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .espera svg circle{stroke:var(--chrome-ink)}}
.espera p{font-size:14px;font-weight:700;color:var(--ink-2)}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.espera svg{animation-duration:3s}}

/* ---- escolha múltipla nas sugestões ---- */
.escolha{display:flex;gap:11px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:7px;
  cursor:pointer;user-select:none;font-size:14.5px;line-height:1.45}
.escolha input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--ambar)}
.escolha.marcada{border-color:var(--ambar);background:var(--ambar-soft)}
.escolha .p{font-size:12.5px;color:var(--muted);display:block;margin-top:3px}

/* ---- FOTO E LINHA DO TEMPO ----
   A foto é MARCO, não medida: nada aqui analisa rosto. Ela existe para a pessoa olhar, seis
   meses depois, de onde veio — e quem interpreta a própria cara é ela. */
.retrato{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--ambar);background:var(--surface-2);display:block}
.retrato-g{width:104px;height:104px;border-radius:50%;object-fit:cover;
  border:3px solid var(--ambar);background:var(--surface-2)}

.tl{position:relative;padding-left:26px;margin-top:6px}
/* O fio que liga os marcos: a continuidade é o próprio argumento da tela. */
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;margin-bottom:16px}
.tl-item::before{content:"";position:absolute;left:-23px;top:5px;width:12px;height:12px;
  border-radius:50%;background:var(--ambar);border:2px solid var(--ground)}
.tl-item.foto::before{background:var(--verde)}
.tl-item .q{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tl-item b{display:block;font-size:14.5px;margin-top:2px}
.tl-item p{font-size:13px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.tl-item img{margin-top:8px;width:100%;max-width:180px;border-radius:12px;display:block;
  border:1px solid var(--line)}

.antes-depois{display:flex;gap:14px;align-items:center;justify-content:center;text-align:center}
.antes-depois .seta{color:var(--ambar);font-size:22px;font-weight:800}
.antes-depois figure{flex:1;min-width:0}
.antes-depois figcaption{font-size:11.5px;color:var(--muted);margin-top:6px}
.antes-depois img{width:100%;max-width:126px;aspect-ratio:1;object-fit:cover;border-radius:14px;
  border:2px solid var(--line)}

/* ---- MENU ANCORADO NA MARCA (padrão do FocoFy) ----
   Tocar no G abre um MENU, não uma tela com tudo dentro: a pessoa escolhe o assunto e só
   então a tela abre. Menu maior que o aparelho rola por dentro em vez de cortar itens. */
.menu-fundo{position:fixed;inset:0;background:rgba(11,22,19,.35);border:0;z-index:39;cursor:default}
.menu-topo{
  position:fixed;z-index:40;
  top:calc(10px + var(--safe-topo));
  right:calc(12px + var(--safe-dir));
  /* Nunca mais largo que a tela (aparelho de 320px) nem mais alto que ela. */
  width:min(268px, calc(100vw - 24px - var(--safe-esq) - var(--safe-dir)));
  max-height:calc(100dvh - 20px - var(--safe-topo) - var(--safe-baixo));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:7px;
  animation:sobe .14s ease}
@keyframes sobe{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.menu-topo .cabeca{padding:9px 11px 11px;border-bottom:1px solid var(--line-soft);margin-bottom:5px}
.menu-topo .cabeca b{display:block;font-size:14.5px}
.menu-topo .cabeca span{display:block;font-size:12px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-topo .opc{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:none;border:0;padding:11px;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink)}
.menu-topo .opc:active{background:var(--surface-2)}
.menu-topo .opc svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--verde)}
.menu-topo .opc small{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:1px}
.menu-topo .opc.perigo,.menu-topo .opc.perigo svg{color:var(--bad)}
.menu-topo .risco{height:1px;background:var(--line-soft);margin:5px 0}
:root[data-theme="dark"] .menu-topo .opc svg{color:var(--ambar)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .menu-topo .opc svg{color:var(--ambar)}}

/* ---- menu de ajustes (padrão de app: lista → subtela) ----
   Empilhar tudo numa tela só obriga a pessoa a caçar. Lista com assunto por linha, cada uma
   abrindo a sua própria tela, é o padrão que todo mundo já sabe usar sem aprender. */
.menu-lista{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.menu-item{display:flex;align-items:center;gap:13px;background:var(--surface);
  border:0;width:100%;text-align:left;padding:15px 14px;cursor:pointer;font-family:inherit;color:var(--ink)}
.menu-item:active{background:var(--surface-2)}
/* Ícone monolinear, padrão da marca (CLAUDE.md §4): traço 2px, currentColor.
   Emoji quebra a identidade — cada sistema desenha do seu jeito e vira colagem. */
.menu-item .mi{width:36px;height:36px;border-radius:10px;flex:none;display:flex;
  align-items:center;justify-content:center;background:var(--surface-2);color:var(--verde)}
.menu-item .mi svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="dark"] .menu-item .mi{color:var(--ambar)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .menu-item .mi{color:var(--ambar)}}
.menu-item.perigo .mi{color:var(--bad)}
.menu-item .mt{flex:1;min-width:0}
.menu-item .mt b{display:block;font-size:15px;font-weight:700}
.menu-item .mt span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-item .mc{color:var(--muted);font-size:18px;flex:none}
.menu-item.perigo .mt b{color:var(--bad)}
.menu-item.perigo .mi{background:var(--bad-soft)}
/* O item inteiro é o alvo de toque — ícone, texto e seta. Nada de "só o texto clica". */
.menu-item *{pointer-events:none}

.secao-topo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.voltar{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font-size:18px;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center}
.secao-topo h2{flex:1;min-width:0}

.grupo{margin-top:18px}
.grupo > .eyebrow{margin-bottom:7px;display:block}

/* ---- modal ---- */
.fundo{position:fixed;inset:0;background:rgba(11,22,19,.55);z-index:40;display:flex;
  align-items:flex-end;justify-content:center}
.folha{background:var(--surface);width:100%;max-width:var(--coluna);border-radius:20px 20px 0 0;
  padding:20px calc(16px + var(--safe-dir)) calc(20px + var(--safe-baixo)) calc(16px + var(--safe-esq));
  max-height:88dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.folha .puxador{width:38px;height:4px;border-radius:3px;background:var(--concreto);margin:0 auto 14px}
.oculto{display:none!important}

/* ===== O ENDEREÇO E A ÁRVORE (founder, 2026-08-18) =========================
   Num celular não cabe desenhar o organograma do PACE. Cabe carimbar o endereço:
   quem lê "1.2.3" sabe que aquilo serve à meta 1.2, da área 1. O número é a árvore
   comprimida — e é o que faz o plano parecer interligado em vez de uma pilha de caixas.

   A cor NÃO identifica a área. Seis cores quebrariam a marca (§4: âmbar é o acento
   único, ≤10% da tela). Cor aqui só significa FAROL. A área se identifica pelo número
   e pelo ícone monolinear — que é o que o B2B já faz. */

/* O chip: tabular-nums para 1.2 e 1.10 alinharem na coluna. */
.end{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  font-size:11px;font-weight:800;letter-spacing:.02em;
  color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line);border-radius:6px;
  padding:2px 6px;flex:none;line-height:1.35;white-space:nowrap;
}
.end.n1{font-size:13px;padding:3px 9px;color:var(--ink);border-color:var(--concreto)}
.end.vazio{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)}
button.end,.end[role=button]{cursor:pointer;font-family:inherit}

/* A trilha: o filho pendura no pai. Cada nível custa recuo, e no terceiro nível o texto
   é o que paga a conta — medido num iPhone SE (320px), 10px de padding deixa a linha do
   neto com ~175px, que é o mínimo para não virar uma palavra por linha. */
.ramo{margin-left:1px;padding-left:10px;border-left:2px solid var(--line-soft)}
.ramo>.no+.no{margin-top:9px}
.no{display:flex;align-items:flex-start;gap:6px}
.no>.corpo{flex:1;min-width:0}
.no .tit{font-size:14px;font-weight:700;line-height:1.35;word-break:break-word}
.no .tit.morta{text-decoration:line-through;color:var(--muted)}
.no .sub{font-size:12px;color:var(--muted);margin-top:2px}

/* ===== O MAPA — o plano inteiro numa tela =====
   A resposta para "onde estou": seis linhas, uma por área, cada meta virando um ponto
   de farol. É o sumário do livro do próprio ano. */
.mapa{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.mapa .l{display:flex;align-items:center;gap:9px;padding:11px 12px;background:var(--surface);
  border:0;width:100%;text-align:left;font-family:inherit;cursor:pointer;color:var(--ink)}
.mapa .l[aria-expanded=true]{background:var(--soft)}
.mapa .l:disabled{cursor:default;opacity:.55}
.mapa .l .nm{flex:1;min-width:0;font-size:13.5px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapa .pontos{display:flex;gap:3px;flex:none}
.mapa .pontos .dot{width:8px;height:8px}
.mapa .vazio{font-size:11px;color:var(--muted);font-weight:700}

/* Selo do que a coisa É — a segunda pergunta ("o que é isso?"). */
.selo{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 5px;
  flex:none;line-height:1.5}
.selo.dia{color:var(--ambar-ink);background:var(--ambar-soft);border-color:var(--ambar)}

/* Onde estou, quando a tela é uma folha (modal) e a árvore ficou para trás. */
.trilha{font-size:11.5px;color:var(--muted);margin-bottom:10px;line-height:1.5;
  word-break:break-word}
.trilha b{color:var(--ink-2);font-weight:700}

/* O hábito sem meta. Mostrar o problema é o ponto: "o que não pode é ter algo solto". */
.solto{border:1px dashed var(--bad);background:var(--bad-soft);border-radius:10px;padding:10px 11px}

/* ===== RAMPA DE PROPORÇÃO (rosca e barra empilhada) ======================
   Uma matiz só, luminância crescente — conferida monotônica. A cor diz ORDEM DE
   GRANDEZA (maior fatia = mais escura), NUNCA identidade: identidade é do rótulo.
   Isso não é preferência. Medi com o validador de paleta: fatias vizinhas precisam
   de ΔE ≥ 15 para alguém de visão normal separar. O verde-máquina é de baixa croma
   de propósito (§4), e sustenta 3 fatias (ΔE 24,7) — na quarta cai para 13,0.
   Por isso toda fatia leva separador, contorno e rótulo direto com o percentual.
   Seis matizes resolveriam a separação e quebrariam a marca; e sob daltonismo
   matiz gerada colide de qualquer jeito. */
:root{
  --g1:#1B3D34; --g2:#2F6B57; --g3:#46937A; --g4:#6FB39B; --g5:#A0CDBD; --g6:#CFE4DA;
}
/* O escuro tem passos PRÓPRIOS, não o claro invertido: sobre o card escuro (#17322A)
   o passo mais escuro sumiria no fundo. A rampa sobe a partir do fundo, e o último passo
   foi levantado depois de medir: com #28604E o contraste contra o card era 1,88 (a fatia
   quase desaparecia); com #2E7360 fica 2,45, e o contorno de 1px fecha o resto. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --g1:#E4F0EA; --g2:#B6D9C9; --g3:#86C0A9; --g4:#5AA48B; --g5:#3E8A71; --g6:#2E7360;
}}
:root[data-theme="dark"]{
  --g1:#E4F0EA; --g2:#B6D9C9; --g3:#86C0A9; --g4:#5AA48B; --g5:#3E8A71; --g6:#2E7360;
}
.g-centro{text-anchor:middle;font-size:17px;font-weight:800;fill:var(--ink)}
.g-centro-sub{text-anchor:middle;font-size:8.5px;font-weight:700;fill:var(--muted);
  letter-spacing:.08em;text-transform:uppercase}
.g-val-forte{font-weight:800;fill:var(--ink)}


/* ===== O BLOCO DE MARCA — ONE / by GATA (founder, 2026-08-30) ==============
   Duas linhas, e a ordem importa: o nome é ONE; "by GATA" é ASSINATURA, não sobrenome.
   Por isso ela vem embaixo, menor, em itálico e na cor secundária — quem lê vê "ONE" e
   entende de quem é, sem que a casa dispute atenção com o produto.
   Entre as duas, espaçamento negativo: elas são um bloco só, não dois parágrafos. */
.lockup{display:flex;flex-direction:column;align-items:center;gap:0;line-height:1}
.lockup .nome{font-size:38px;font-weight:800;letter-spacing:.02em;color:var(--ink);margin:0}
.lockup .assina{font-size:14px;font-style:italic;font-weight:600;color:var(--ink-2);
  margin:2px 0 0;letter-spacing:.04em}
.lockup .promessa{font-size:13.5px;color:var(--muted);margin:10px 0 0;text-align:center;
  max-width:26ch;line-height:1.45}
/* Na barra do topo do app, o mesmo bloco em miniatura. */
.lockup.mini .nome{font-size:19px}
.lockup.mini .assina{font-size:10px;margin-top:1px}