/* EPI SaaS - identidade A (azul claro), aprovada em 01/10/2026.
   Verde so para "feito", cinza com cadeado para "travado", vermelho para erro. */
:root{
  --ground:#F4F6F9;--surface:#FFFFFF;--surface-2:#EBEFF4;
  --ink:#121826;--ink-2:#465063;--ink-3:#66708A;
  --line:#DBE0E8;--line-2:#C3CAD6;
  --ok:#17794B;--risk:#B3321F;--warn:#8A5A00;
  --acc:#2457E6;--acc-b:#FFFFFF;
  --acc-text:color-mix(in srgb,var(--acc) 62%,var(--ink));
  --acc-soft:color-mix(in srgb,var(--acc) 11%,var(--surface));
  --acc-ring:color-mix(in srgb,var(--acc) 38%,transparent);
  --ok-soft:color-mix(in srgb,var(--ok) 12%,var(--surface));
  --risk-soft:color-mix(in srgb,var(--risk) 10%,var(--surface));
  --warn-soft:color-mix(in srgb,var(--warn) 12%,var(--surface));
  --f-disp:"Bricolage Grotesque","Trebuchet MS",Arial,sans-serif;
  --f-body:"Figtree","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{--ground:#0E1218;--surface:#161B24;--surface-2:#1E2430;--ink:#EDF0F5;--ink-2:#B4BCCB;
    --ink-3:#8F99AD;--line:#2A3241;--line-2:#3A4457;--ok:#4CC38A;--risk:#F08A78;--warn:#E2B04A;
    color-scheme:dark;}
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:16px;
  line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--f-disp);margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
a{color:var(--acc-text)}
:focus-visible{outline:3px solid var(--acc-ring);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}

.topb{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--f-disp);font-weight:800;font-size:19px;
  color:var(--ink);text-decoration:none}
.logo svg{width:30px;height:30px;color:var(--acc)}
.topr{font-size:14.5px;color:var(--ink-2);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.body{max-width:1120px;margin:0 auto;padding:32px 16px 60px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px}
.estreito{max-width:460px;margin:0 auto}
.medio{max-width:760px;margin:0 auto}
h1{font-size:30px;font-weight:800;line-height:1.1}
.lead{color:var(--ink-2);margin-top:8px}
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px}
.inp{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-2);
  border-radius:10px;padding:12px 14px;min-height:48px;width:100%}
.inp:focus{outline:3px solid var(--acc-ring);border-color:var(--acc)}
.inp.err{border-color:var(--risk);background:var(--risk-soft)}
.code{font-variant-numeric:tabular-nums;font-size:28px;font-weight:700;letter-spacing:.4em;text-align:center}
.hint{font-size:13.5px;color:var(--ink-2)}
.hint b{font-variant-numeric:tabular-nums}
.errt{color:var(--risk);font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:16px;
  line-height:1;padding:14px 22px;border-radius:12px;border:2px solid var(--acc);background:var(--acc);
  color:var(--acc-b);cursor:pointer;min-height:48px;text-decoration:none}
.btn:hover{filter:brightness(1.07)}
.btn.sec2{background:var(--surface);color:var(--acc-text)}
.btn:disabled{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-3);cursor:not-allowed;filter:none}
.btn.wide{width:100%}
.lk{background:none;border:0;padding:0;color:var(--acc-text);font-weight:600;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.why{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--ink-2);margin-top:10px}
.why b{font-variant-numeric:tabular-nums;color:var(--ink)}
.aviso{border-radius:12px;padding:12px 14px;font-size:15px}
.aviso.erro{background:var(--risk-soft);border:1.5px solid var(--risk)}
.aviso.ok{background:var(--ok-soft);border:1.5px solid var(--ok)}
.aviso.espera{background:var(--warn-soft);border:1.5px solid var(--warn)}
.dis{color:var(--ink-3);font-size:14.5px;display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center}
.dis em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:6px;padding:1px 7px}
.tagex{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--risk);border:1.5px solid var(--risk);border-radius:6px;padding:1px 8px;background:var(--risk-soft)}
.pill{display:inline-flex;font-size:13px;font-weight:600;border:1px solid var(--line-2);border-radius:999px;
  padding:3px 11px;color:var(--ink-2);background:var(--surface)}

/* balao explicativo e o "?" do celular */
.dica{position:relative;display:inline-flex;align-items:center;gap:6px}
.dica .t{border-bottom:1.5px dotted var(--ink-3);cursor:help}
.dica .bal{text-transform:none;letter-spacing:normal;font-family:var(--f-body);position:absolute;left:0;top:calc(100% + 8px);z-index:25;width:max-content;max-width:min(270px,72vw);
  background:var(--ink);color:var(--ground);font-size:13.5px;font-weight:500;line-height:1.45;padding:10px 13px;
  border-radius:10px;opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none}
.dica:hover .bal,.dica:focus-within .bal,.dica.aberto .bal{opacity:1;visibility:visible}
.q{display:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink-3);background:var(--surface);
  color:var(--ink-2);font-weight:800;font-size:13px;cursor:pointer;place-items:center;padding:0}
@media (hover:none){.q{display:inline-grid}.dica .t{border-bottom:0}
  .dica:hover .bal,.dica:focus-within .bal{opacity:0;visibility:hidden}.dica.aberto .bal{opacity:1;visibility:visible}}

/* cadastro: duas colunas */
.cad{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start}
.aside{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px}
.aside h2{font-size:26px;font-weight:800;line-height:1.12}
.aside ol{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.aside li{display:flex;gap:12px;color:var(--ink-2)}
.aside li i{flex:0 0 28px;height:28px;border-radius:50%;background:var(--acc);color:var(--acc-b);display:grid;
  place-items:center;font-style:normal;font-weight:800;font-size:13px}
.aside li b{color:var(--ink)}
.aside .foot{margin-top:20px;font-size:14px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:14px}

/* aceite */
.legal{border:1.5px solid var(--line-2);border-radius:14px;background:var(--surface);overflow:hidden}
.legalbanner{background:var(--risk-soft);border-bottom:1.5px solid var(--risk);padding:10px 16px;font-size:14px}
.legaltxt{padding:16px 18px;max-height:320px;overflow:auto;font-size:15px;color:var(--ink-2);white-space:pre-wrap}
.legalfoot{border-top:1.5px solid var(--risk);padding:8px 16px;font-size:13px;font-weight:700;color:var(--risk);
  background:var(--risk-soft)}
.chk{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.chk input{width:24px;height:24px;flex:0 0 24px;margin:1px 0 0;accent-color:var(--acc)}
.gravado{font-size:14px;color:var(--ink-2);background:var(--surface-2);border-radius:10px;padding:10px 14px}

/* trilha */
.trl{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:24px;align-items:start}
.navc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.navc .hd{font-family:var(--f-disp);font-size:18px;font-weight:700;padding:2px 6px 10px}
.navc ol{margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.st{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;list-style:none}
.st .mk{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  font-size:13px;margin-top:1px}
.st .mk svg{width:15px;height:15px}
.st b{display:block;font-size:15.5px;line-height:1.3}
.st small{display:block;font-size:13.5px;color:var(--ink-2);margin-top:2px;line-height:1.4}
.st small b{display:inline;font-size:inherit;font-variant-numeric:tabular-nums;color:var(--ink)}
.st.feito .mk{background:var(--ok-soft);color:var(--ok);border:1.5px solid var(--ok)}
.st.agora{background:var(--acc-soft);outline:2px solid var(--acc)}
.st.agora .mk{background:var(--acc);color:var(--acc-b)}
.st.travado .mk{background:var(--surface-2);color:var(--ink-3);border:1.5px solid var(--line-2)}
.st.travado b{color:var(--ink-3)}
.recom{display:inline-flex;align-items:center;gap:5px;background:var(--acc);color:var(--acc-b);font-size:11px;
  font-weight:800;letter-spacing:.08em;border-radius:999px;padding:2px 9px}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}

@media (max-width:760px){
  .cad,.trl{grid-template-columns:minmax(0,1fr)}
  .card,.aside{padding:20px}
  h1{font-size:25px}
  .topb{padding:12px 16px}
  .esconde-m{display:none}
  /* no celular o passo de agora vem antes da lista de passos */
  .trl .pnl{order:-1}
}