/* ============================================================
   LAVANSEC — Ficha do candidato a franqueado
   Complementa site.css. Pensada primeiro para o celular.
   ============================================================ */

.cand-body{background:var(--surface-2);min-height:100vh;display:flex;flex-direction:column}
.wrap--narrow{max-width:820px}

/* O atributo hidden precisa vencer o display dos botões e blocos */
[hidden]{display:none!important}

/* ---------- Topo ---------- */
.cand-top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.cand-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem}
.cand-top .brand{font-size:1.15rem}
.cand-top .brand-logo{height:36px}
.cand-top-tag{font-family:var(--display);font-weight:600;font-size:.8rem;color:var(--mint-deep);
  background:rgba(15,163,127,.10);padding:.4rem .8rem;border-radius:100px;white-space:nowrap}

.cand-main{flex:1;padding-block:clamp(28px,6vw,56px)}

/* ---------- Abertura ---------- */
.cand-intro{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.6rem,5vw,2.8rem);box-shadow:var(--shadow-sm)}
.cand-intro h1{font-size:clamp(1.9rem,6vw,2.8rem);font-weight:900;letter-spacing:-.03em;margin-bottom:.9rem}
.cand-intro .lead{margin-bottom:1.8rem}
.cand-facts{list-style:none;display:grid;gap:1.1rem;margin-bottom:2rem}
.cand-facts li{display:grid;grid-template-columns:44px 1fr;gap:1rem;align-items:start}
.cand-facts .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(15,163,127,.10);color:var(--mint)}
.cand-facts .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cand-facts b{display:block;font-family:var(--display);font-weight:700;color:var(--ink);font-size:1rem}
.cand-facts span{display:block;color:var(--fg-dim);font-size:.94rem;margin-top:.15rem}
.btn--lg{padding:1.1rem 2rem;font-size:1.08rem;width:100%}
.cand-alt{margin-top:1.1rem;text-align:center;font-size:.92rem;color:var(--fg-dim)}
.cand-alt a{color:var(--mint-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- Formulário ---------- */
.cand-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.4rem,5vw,2.6rem);box-shadow:var(--shadow-sm)}

/* Progresso */
.cand-progress{margin-bottom:2rem}
.cand-progress .bar{height:6px;border-radius:100px;background:var(--surface-2);overflow:hidden}
.cand-progress .bar span{display:block;height:100%;width:20%;border-radius:100px;background:var(--orange);
  transition:width .4s var(--ease)}
.cand-progress .steps{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:.8rem}
.cand-progress .steps .conta{font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.04em;color:var(--fg-mute);white-space:nowrap}
.cand-progress .steps .titulo{font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--orange);
  text-align:right}

/* Passo */
.cand-step h2{font-size:clamp(1.4rem,4.5vw,1.9rem);letter-spacing:-.02em;margin-bottom:.5rem}
.cand-step > .cand-hint{margin-bottom:1.8rem}
.cand-hint{color:var(--fg-dim);font-size:.92rem;line-height:1.5}

/* Campos */
.f{margin-bottom:1.5rem;border:0;padding:0;min-width:0}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.f label,.f legend{display:block;font-family:var(--display);font-weight:700;font-size:.95rem;
  color:var(--ink);margin-bottom:.5rem;padding:0}
.f label i,.f legend i{color:var(--orange);font-style:normal;margin-left:.15rem}
.f .cand-hint{margin:-.25rem 0 .7rem}
.f input[type=text],.f input[type=tel],.f input[type=email],.f input[type=date],.f select,.f textarea{
  width:100%;padding:.9rem 1.05rem;border:1px solid var(--line-strong);border-radius:13px;
  background:var(--bg);font:inherit;font-size:1rem;color:var(--ink);appearance:none;
  transition:border-color .2s,box-shadow .2s}
.f textarea{resize:vertical;line-height:1.5}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6B62' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;cursor:pointer}
.f input::placeholder,.f textarea::placeholder{color:var(--fg-mute)}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--mint);
  box-shadow:0 0 0 3px rgba(15,163,127,.15)}

/* Opções (radio e checkbox como cartões) */
.opts{display:grid;gap:.6rem}
.opts--grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.opts--stack{grid-template-columns:1fr}
.opt{position:relative;display:flex;align-items:flex-start;gap:.8rem;cursor:pointer;
  padding:.95rem 1.1rem;border:1px solid var(--line-strong);border-radius:13px;background:var(--bg);
  transition:border-color .2s,background .2s;
  font-family:var(--body);font-weight:400;margin-bottom:0}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt > span{flex:1;font-weight:400;font-size:.97rem;line-height:1.4;color:var(--fg);
  padding-left:2rem;position:relative;display:block}
.opt > span small{display:block;color:var(--fg-mute);font-size:.83rem;margin-top:.15rem}
.opt > span::before{content:"";position:absolute;left:0;top:.05rem;width:22px;height:22px;
  border:2px solid var(--line-strong);background:var(--surface);transition:border-color .2s,background .2s}
.opt input[type=radio] + span::before{border-radius:50%}
.opt input[type=checkbox] + span::before{border-radius:7px}
.opt > span::after{content:"";position:absolute;opacity:0;transition:opacity .18s}
.opt input[type=radio] + span::after{left:6px;top:calc(.05rem + 6px);width:10px;height:10px;
  border-radius:50%;background:var(--orange)}
.opt input[type=checkbox] + span::after{left:7px;top:calc(.05rem + 4px);width:7px;height:12px;
  border:solid var(--orange);border-width:0 3px 3px 0;transform:rotate(45deg)}
.opt:hover{border-color:var(--mint)}
.opt:has(input:checked){border-color:var(--orange);background:rgba(255,106,26,.06)}
.opt:has(input:checked) > span::before{border-color:var(--orange)}
.opt:has(input:checked) > span::after{opacity:1}
.opt:has(input:focus-visible){box-shadow:0 0 0 3px rgba(15,163,127,.2)}

/* Erro */
.f.err input,.f.err select,.f.err textarea{border-color:#D64545;box-shadow:0 0 0 3px rgba(214,69,69,.12)}
.f.err .opts .opt{border-color:#D64545}
.f-msg{display:block;color:#C23A3A;font-size:.87rem;margin-top:.5rem;font-weight:500}
.cand-error{background:rgba(214,69,69,.08);border:1px solid rgba(214,69,69,.3);color:#A82F2F;
  border-radius:12px;padding:.9rem 1.1rem;font-size:.94rem;margin-bottom:1.2rem}

/* Navegação */
.cand-nav{display:flex;gap:.8rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.cand-nav .btn{flex:1 1 auto;min-width:0;white-space:nowrap;padding-inline:1.1rem}
.cand-nav .btn--ghost{flex:0 1 auto}
.cand-nav .btn--lg{font-size:1rem;padding-block:1rem}
.cand-saved{margin-top:.9rem;text-align:center;font-size:.82rem;color:var(--fg-mute)}

/* Armadilha anti-robô */
.cand-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cand-legal{font-size:.84rem;line-height:1.6;color:var(--fg-mute);background:var(--surface-2);
  border-radius:12px;padding:1rem 1.15rem;margin-top:1.6rem}

/* ---------- Sucesso ---------- */
.cand-done{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.8rem,6vw,3rem);box-shadow:var(--shadow-sm);text-align:center}
.cand-done .check{width:76px;height:76px;border-radius:50%;margin:0 auto 1.4rem;display:grid;
  place-items:center;background:rgba(15,163,127,.12);color:var(--mint-deep)}
.cand-done .check svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}
.cand-done h2{font-size:clamp(1.6rem,5vw,2.3rem);letter-spacing:-.02em;margin-bottom:.7rem}
.cand-done .lead{margin:0 auto 2rem;max-width:44ch}
.cand-next{list-style:none;counter-reset:cn;display:grid;gap:1rem;text-align:left;margin-bottom:2rem}
.cand-next li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:1rem;align-items:start}
.cand-next li::before{counter-increment:cn;content:counter(cn);width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface-2);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:.95rem}
.cand-next b{display:block;font-family:var(--display);font-weight:700;color:var(--ink);font-size:1rem}
.cand-next span{display:block;color:var(--fg-dim);font-size:.93rem;margin-top:.1rem}
.cand-done .btn{width:100%}

/* ---------- Rodapé ---------- */
.cand-foot{background:var(--surface);border-top:1px solid var(--line);padding-block:1.6rem}
.cand-foot .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.84rem;color:var(--fg-mute)}

/* ---------- Celular ---------- */
@media(max-width:640px){
  .cand-top-tag{display:none}
  .f-row{grid-template-columns:1fr;gap:0}
  .opts--grid{grid-template-columns:1fr}
  .cand-nav{position:sticky;bottom:0;background:var(--surface);margin-inline:calc(clamp(1.4rem,5vw,2.6rem) * -1);
    padding:1rem clamp(1.4rem,5vw,2.6rem) calc(1rem + env(safe-area-inset-bottom));
    margin-bottom:calc(clamp(1.4rem,5vw,2.6rem) * -1);border-top:1px solid var(--line);
    box-shadow:0 -8px 24px -20px rgba(16,34,26,.5);z-index:10}
  .cand-saved{display:none}
}

/* Sem :has() (navegadores antigos): a classe .is-on faz o mesmo */
.opt.is-on{border-color:var(--orange);background:rgba(255,106,26,.06)}
.opt.is-on > span::before{border-color:var(--orange)}
.opt.is-on > span::after{opacity:1}