/* Página de vendas — direção aprovada: V1 "A conta inteira" (ver ../direction-approved.md)
 * A cara do próprio app. Nenhuma cor ou fonte fora destes tokens.
 */
:root{
  --bg:#121110;--sup:#1C1B19;--sup2:#242320;--linha:#2E2C29;--linha2:#3D3A36;
  --ink:#F3F0EA;--ink2:#ABA59B;--ink3:#77716A;
  --ambar:#F0B23A;--ambar-tinta:#1A1406;--verde:#2FBF8F;--vermelho:#F0553C;
  --txt:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --largura:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--txt);-webkit-font-smoothing:antialiased}
a{color:inherit}
.limite{max-width:var(--largura);margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:10px;
  background:var(--ambar);color:var(--ambar-tinta);font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;font-family:inherit}
.btn.grande{min-height:56px;padding:0 26px;font-size:17px;border-radius:12px}
.rot{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}

/* ── S0 · topo ── */
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;max-width:var(--largura);margin:0 auto}
.marca{font-weight:900;font-size:17px;letter-spacing:-.02em;text-decoration:none}
.marca b{color:var(--ambar)}
.topo nav{display:flex;align-items:center;gap:14px}
.entrar{font-size:14px;font-weight:600;color:var(--ink2);text-decoration:none;white-space:nowrap}
.entrar:hover{color:var(--ink)}

/* ── S1 · abertura ── */
.abre{max-width:var(--largura);margin:0 auto;padding:28px 20px 56px;display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
@media(min-width:900px){.abre{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;padding-top:56px}}
h1{font-size:clamp(36px,8.6vw,64px);line-height:1;letter-spacing:-.035em;font-weight:900;overflow-wrap:anywhere}
.apoio{margin-top:18px;font-size:clamp(17px,2.3vw,20px);line-height:1.5;color:var(--ink2);max-width:40ch}
.apoio b{color:var(--ink);font-weight:700}
.acao{margin-top:26px}
.acao .btn{width:100%}
@media(min-width:520px){.acao .btn{width:auto}}
.garantia{margin-top:10px;font-size:13px;color:var(--ink3)}
.quem{margin-top:24px;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink2)}
.quem .ponto{width:8px;height:8px;border-radius:50%;background:var(--verde);flex-shrink:0}
.quem a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.peca{background:var(--sup);border:1px solid var(--linha);border-radius:18px;padding:20px}
.dois{margin-top:12px;display:grid;gap:14px}
.n{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.n .q{font-size:14px;color:var(--ink2);line-height:1.3}
.n .v{font-family:var(--mono);font-weight:700;white-space:nowrap}
.n.ganho .v{font-size:clamp(26px,6vw,34px);color:var(--ink3)}
.n.fica{border-top:1px solid var(--linha);padding-top:14px}
.n.fica .q{color:var(--ink);font-weight:700}
.n.fica .v{font-size:clamp(40px,10vw,56px);color:var(--vermelho);letter-spacing:-.02em}
.n.fica .v.bom{color:var(--verde)}
.conta{margin-top:10px;font-family:var(--mono);font-size:12.5px;color:var(--ink3);line-height:1.8}
.conta > span{display:flex;justify-content:space-between;gap:10px}
.conta b{font-weight:500;white-space:nowrap}
.print{margin-top:18px;border-top:1px solid var(--linha);padding-top:16px}
.print img{display:block;width:100%;height:auto;border:1px solid var(--linha);border-radius:10px}
.print figcaption{margin-top:8px;font-size:12px;color:var(--ink3)}

/* ── seções do corpo ── */
.secao{border-top:1px solid var(--linha);padding:56px 0}
.secao h2{font-size:clamp(28px,5.4vw,42px);line-height:1.05;letter-spacing:-.03em;font-weight:900;max-width:20ch;overflow-wrap:anywhere}
.secao .lead{margin-top:14px;font-size:clamp(16px,2.1vw,18px);line-height:1.55;color:var(--ink2);max-width:52ch}
.secao .lead b{color:var(--ink);font-weight:700}

/* ── S2 · o diagnóstico ── */
.diag{margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media(min-width:900px){.diag{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}

.controles{background:var(--sup);border:1px solid var(--linha);border-radius:18px;padding:18px 18px 8px}
.ctl{padding:12px 0 16px;border-bottom:1px solid var(--linha)}
.ctl:last-child{border-bottom:0}
.ctl .topo-ctl{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ctl label{font-size:14px;font-weight:600;color:var(--ink)}
.ctl .dica{display:block;font-size:12px;font-weight:400;color:var(--ink3);margin-top:2px}
.ctl output{font-family:var(--mono);font-weight:700;font-size:18px;color:var(--ambar);white-space:nowrap}
.ctl input[type=range]{width:100%;margin-top:12px;accent-color:var(--ambar);height:28px;cursor:pointer}
.folgas{display:flex;gap:8px;margin-top:10px}
.folgas button{flex:1;min-height:44px;border-radius:10px;border:1px solid var(--linha2);background:transparent;color:var(--ink2);font-family:inherit;font-weight:700;font-size:14px;cursor:pointer}
.folgas button[aria-pressed=true]{background:var(--ambar);border-color:var(--ambar);color:var(--ambar-tinta)}

.resultado{background:var(--sup);border:1px solid var(--linha);border-radius:18px;padding:18px}
.veredito{font-size:clamp(20px,3.4vw,26px);font-weight:900;letter-spacing:-.02em;line-height:1.15}
.veredito.ruim{color:var(--vermelho)}
.veredito.bom{color:var(--verde)}
.veredito-sub{margin-top:6px;font-size:14px;color:var(--ink2);line-height:1.5}
.grafico{margin-top:14px}
.grafico svg{display:block;width:100%;height:auto;overflow:visible}
.comparacao{margin-top:12px;border-top:1px solid var(--linha);padding-top:12px;display:grid;gap:10px}
.meta-precisa{margin-top:14px;background:var(--sup2);border:1px solid var(--linha2);border-radius:12px;padding:14px}
.meta-precisa .q{font-size:13px;color:var(--ink2)}
.meta-precisa .v{font-family:var(--mono);font-weight:700;font-size:28px;color:var(--ambar);margin-top:2px}
.meta-precisa .v small{font-size:13px;color:var(--ink3);font-weight:500}
.meta-precisa .p{font-size:12.5px;color:var(--ink3);margin-top:6px;line-height:1.45}
.honesto{margin-top:12px;font-size:12px;color:var(--ink3);line-height:1.5}
.resultado .btn{margin-top:16px;width:100%;white-space:normal;text-align:center}
/* o botão fixo não pode cobrir o fim da página no celular */
@media(max-width:899px){body{padding-bottom:76px}}
.seguir{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13.5px}
.seguir a{color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.seguir a:hover{color:var(--ink)}

/* ── botão fixo no celular (a partir da S2) ── */
.fixo{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(18,17,16,.94);backdrop-filter:blur(8px);border-top:1px solid var(--linha);
  transform:translateY(110%);transition:transform .22s ease}
.fixo.visivel{transform:none}
.fixo .btn{width:100%;min-height:50px;font-size:16px}
@media(min-width:900px){.fixo{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ── S3 · as três armadilhas ──────────────────────────────────────────────
   Três formas diferentes de propósito: calendário · placar · fatura empilhada.
   Três cartões iguais em fila foi o que deixou a primeira tentativa genérica. */
.armadilhas{margin-top:34px;display:grid;gap:22px}
.arm{background:var(--sup);border:1px solid var(--linha);border-radius:18px;padding:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media(min-width:900px){.arm{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;padding:26px}}
.arm .numero{font-family:var(--mono);font-size:12px;color:var(--ambar);letter-spacing:.1em}
.arm h3{font-size:clamp(22px,3.8vw,28px);font-weight:900;letter-spacing:-.025em;line-height:1.12;margin-top:6px}
.arm .resposta{margin-top:12px;font-size:16px;line-height:1.5;color:var(--ink2)}
.arm .resposta b{color:var(--ink)}
.arm .faz{margin-top:14px;padding-top:14px;border-top:1px solid var(--linha);font-size:14px;color:var(--ink2);line-height:1.5}
.arm .faz b{color:var(--ambar);font-weight:700}
.arm .links{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 18px}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:32px}
.arm .links a{font-size:14px;color:var(--ink2);text-underline-offset:3px;min-height:32px;display:inline-flex;align-items:center}
.palco{background:var(--bg);border:1px solid var(--linha);border-radius:14px;padding:16px}
.alternar{display:flex;gap:6px;background:var(--sup2);border-radius:10px;padding:4px;margin-bottom:14px}
.alternar button{flex:1;min-height:40px;border:0;border-radius:8px;background:transparent;color:var(--ink2);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.alternar button[aria-pressed=true]{background:var(--ink);color:var(--bg)}

/* 1 · calendário */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .ds{font-family:var(--mono);font-size:10px;color:var(--ink3);text-align:center;padding-bottom:2px}
.cal .d{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:6px;font-family:var(--mono);font-size:11px;background:var(--sup2);color:var(--ink2)}
.cal .d.vazio{background:transparent}
.cal .d.folga{background:transparent;border:1px dashed var(--linha2);color:var(--ink3)}
.cal.conta-certa .d.roda{background:rgba(240,178,58,.16);color:var(--ambar)}
.placa-num{margin-top:14px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.placa-num .q{font-size:13.5px;color:var(--ink2)}
.placa-num .v{font-family:var(--mono);font-weight:700;font-size:30px;white-space:nowrap}
.falta{margin-top:8px;font-size:13.5px;color:var(--ink2);min-height:1.5em}
.falta b{color:var(--vermelho)}

/* 2 · placar */
.placar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.semana{border:1px solid var(--linha2);border-radius:12px;padding:12px}
.semana .rot{margin-bottom:6px}
.semana .km{font-family:var(--mono);font-weight:700;font-size:22px}
.semana .pkm{font-size:12.5px;color:var(--ink2);margin-top:2px}
.semana .linhas{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--ink3);line-height:1.75}
.semana .linhas span{display:flex;justify-content:space-between;gap:6px}
.semana .res{margin-top:8px;padding-top:8px;border-top:1px solid var(--linha);display:flex;flex-direction:column;gap:2px}
.semana .res .rot{margin:0}
.semana .linhas span span:last-child{white-space:nowrap}
.semana .res .v{font-family:var(--mono);font-weight:700;font-size:20px}
.semana.ruim{border-color:rgba(240,85,60,.55)}
.semana.ruim .res .v{color:var(--vermelho)}
.semana.boa{border-color:rgba(47,191,143,.55)}
.semana.boa .res .v{color:var(--verde)}
.porkm{margin-top:12px;font-size:13px;color:var(--ink2);line-height:1.5}
.porkm b{color:var(--ink)}

/* 3 · fatura empilhada */
.fatura .topo-fat{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fatura .separou{font-size:13px;color:var(--ink2)}
.fatura .veio{font-family:var(--mono);font-weight:700;font-size:28px;color:var(--vermelho);white-space:nowrap}
.pilha{margin-top:12px;display:flex;height:44px;border-radius:8px;overflow:hidden}
.pilha span{display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:12px;font-weight:700;white-space:nowrap}
.pilha .mes{background:var(--linha2);color:var(--ink);flex:780}
.pilha .antigas{background:var(--vermelho);color:#1A0805;flex:400}
.legenda-pilha{margin-top:8px;display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink3)}
.abrir-fatura{margin-top:14px}
.parcelas{margin-top:12px;display:grid;gap:8px}
.parcelas[hidden]{display:none}
.parc{display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-top:1px solid var(--linha);padding-top:8px;font-size:13.5px}
.parc .q b{display:block;color:var(--ink)}
.parc .q span{font-size:12px;color:var(--ink3)}
.parc .v{font-family:var(--mono);font-weight:700;white-space:nowrap}
.parc .fim{font-size:12px;color:var(--verde);display:block;text-align:right}
.parc .fim.nao{color:var(--ink3)}

/* ── modal (vale pra página inteira) ── */
.cortina{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.66);display:flex;align-items:flex-end;justify-content:center}
.cortina[hidden]{display:none}
@media(min-width:640px){.cortina{align-items:center;padding:24px}}
.folha{background:var(--bg);border:1px solid var(--linha);width:100%;max-width:520px;max-height:88vh;overflow-y:auto;border-radius:18px 18px 0 0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
@media(min-width:640px){.folha{border-radius:18px}}
.folha-cab{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 10px;position:sticky;top:0;background:var(--bg)}
.folha-cab h3{font-size:21px;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.folha-cab .rot{margin-bottom:4px;color:var(--ambar)}
.fechar{margin-left:auto;flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1px solid var(--linha2);background:transparent;color:var(--ink2);font-size:16px;cursor:pointer}
.folha-corpo{padding:4px 18px 18px;color:var(--ink2);font-size:15px;line-height:1.6}
.folha-corpo p + p,.folha-corpo .contas + p,.folha-corpo .contas + .contas{margin-top:12px}
.folha-corpo b{color:var(--ink)}
.folha-corpo .contas{margin-top:14px;background:var(--sup);border:1px solid var(--linha);border-radius:12px;padding:12px 14px;font-family:var(--mono);font-size:13px;line-height:1.85}
.folha-corpo .contas span{display:flex;justify-content:space-between;gap:12px}
.folha-corpo .contas .t{border-top:1px solid var(--linha2);margin-top:4px;padding-top:4px;color:var(--ink);font-weight:700}
.folha-pe{padding:0 18px 18px}
.folha-pe .btn{width:100%}