:root{
  --ink:#0A0E1A;--surface:#F6F7FB;--paper:#FFFFFF;--line:#DCE6F2;--line-2:#EDF1F8;
  --slate:#31405E;--muted:#5A6478;--muted-d:#98A3B8;--fog:#E8ECF4;
  --panel-d:#141A2B;--line-d:#243049;
  --mint:#3DDC97;--mint-h:#2FCB88;--mint-ink:#0E7A52;--mint-tint:#E9FBF2;
  --blue:#4D8DFF;--link:#2C6FE0;--loss:#FF6B4A;--amber:#FFC24B;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Satoshi','Archivo',ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--surface);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .5s}
body[data-theme=dark]{background:var(--ink);color:var(--fog)}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--mint);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}

.mono{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
body[data-theme=dark] .mono{color:var(--muted-d)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mint-ink);margin:0 0 14px}
body[data-theme=dark] .eyebrow{color:var(--mint)}
h1,h2,h3{margin:0;letter-spacing:-.03em;font-weight:700;line-height:1.02}
.lead{font-size:clamp(15px,1.4vw,18px);line-height:1.55;color:var(--slate);margin:16px 0 0;max-width:46ch}
body[data-theme=dark] .lead{color:var(--muted-d)}
.h2{font-size:clamp(30px,4.2vw,52px)}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:6px;padding:12px 18px;font-weight:700;font-size:13.5px;white-space:nowrap;text-decoration:none;transition:background .2s,opacity .2s}
.btn.primary{background:var(--mint);color:var(--ink)}
.btn.primary:hover{background:var(--mint-h)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:inherit;border:1px solid var(--line)}
body[data-theme=dark] .btn.ghost{border-color:var(--line-d)}
.btn.ghost:hover{opacity:.75}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(20px,4vw,48px);pointer-events:none}
header>*{pointer-events:auto}
body[data-theme=light] header{background:linear-gradient(var(--surface) 60%,rgba(246,247,251,0))}
.logo{display:flex;flex-direction:column;gap:3px;color:inherit;text-decoration:none}
.logo b{font-weight:900;font-size:24px;letter-spacing:-.02em;line-height:.9}
.logo span{font-family:var(--mono);font-size:8px;letter-spacing:.22em;color:var(--muted);white-space:nowrap}
.back-site{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none}
body[data-theme=dark] .back-site{color:var(--muted-d)}
.back-site:hover{color:var(--mint-ink)}
body[data-theme=dark] .back-site:hover{color:var(--mint)}

.screen{min-height:100vh;min-height:100dvh}
.wrap{max-width:1180px;margin:0 auto;padding:120px clamp(20px,4vw,48px) 80px}
.steps{display:flex;gap:6px;margin-bottom:44px;flex-wrap:wrap}
.steps span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d);padding:6px 0;border-top:2px solid var(--line);min-width:120px;flex:1}
.steps span.on{color:var(--ink);border-color:var(--mint)}
.steps span.done{color:var(--muted);border-color:var(--ink)}

/* resume banner */
.resume{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--mint-tint);border:1px solid #BFF5DE;border-radius:10px;padding:14px 16px;margin-bottom:28px;font-size:14px}
.resume div{display:flex;gap:8px}
body[data-theme=dark] .resume{background:rgba(61,220,151,.08);border-color:rgba(61,220,151,.3);color:var(--fog)}

/* ---------- INTRO ---------- */
#s-intro{position:relative;overflow:hidden;background:var(--ink)}
#intro-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro-copy{position:absolute;z-index:2;left:clamp(20px,5vw,72px);top:50%;transform:translateY(-50%);width:min(440px,34vw)}
.intro-copy h1{font-size:clamp(32px,3.6vw,52px);color:#fff}
.intro-copy .txt{transition:opacity .45s ease,transform .45s ease}
.intro-copy .txt.out{opacity:0;transform:translateY(8px)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;animation:rise .6s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.skip{position:absolute;z-index:3;right:clamp(20px,4vw,48px);bottom:28px;background:rgba(20,26,43,.7);border:1px solid var(--line-d);color:var(--fog);border-radius:999px;padding:10px 16px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.skip:hover{border-color:var(--mint);color:var(--mint)}
.intro-progress{position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;background:rgba(232,236,244,.06)}
.intro-progress i{display:block;height:100%;width:0;background:var(--mint);box-shadow:0 0 12px rgba(61,220,151,.6)}
@media (max-width:1099px){
  .intro-copy{top:auto;bottom:84px;transform:none;width:auto;right:clamp(20px,5vw,72px)}
  .intro-copy h1{font-size:clamp(26px,6vw,40px)}
  .intro-copy .lead{font-size:14.5px}
  .skip{bottom:20px}
}

/* ---------- CADASTRO ---------- */
.two{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.gets{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:14px}
.gets li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--slate)}
.gets li i{flex:none;width:8px;height:8px;margin-top:7px;border-radius:2px;background:var(--mint);box-shadow:0 0 0 4px rgba(61,220,151,.16)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,32px);box-shadow:0 14px 30px rgba(20,26,43,.06)}
.field{position:relative;margin-bottom:14px}
.field input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:22px 14px 8px;transition:border-color .2s,box-shadow .2s}
.field label{position:absolute;left:15px;top:15px;font-size:15px;color:var(--muted);pointer-events:none;transition:all .18s}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(77,141,255,.12)}
.field input:focus+label,.field input:not(:placeholder-shown)+label{top:7px;font-size:10px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase}
.field.err input{border-color:var(--loss)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid2 .field{margin-bottom:0}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--muted);margin:18px 0 22px}
.consent input{accent-color:var(--ink);margin-top:3px}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- ESCOLHA ---------- */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px;margin-top:40px}
.choice{position:relative;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:28px;transition:transform .25s,box-shadow .25s,border-color .25s;display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start}
@media (hover:hover){.choice:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,26,43,.08)}}
.choice[aria-checked=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 14px 30px rgba(20,26,43,.08)}
.choice .tick{position:absolute;top:18px;right:18px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:13px;color:transparent}
.choice[aria-checked=true] .tick{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.choice h3{font-size:24px;margin-bottom:8px}
.choice p{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--slate)}
.choice ol{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:5px}
.choice ol li{font-size:12.5px;color:var(--muted);display:flex;gap:8px}
.choice ol li b{font-family:var(--mono);color:var(--ink);font-weight:700;width:12px}
.meta{display:flex;gap:16px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line-2)}
.loading{padding:40px;text-align:center;color:var(--muted)}

/* ---------- NÍVEL (interstício) ---------- */
.lvl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;min-height:calc(100vh - 200px)}
@media (max-width:900px){.lvl{grid-template-columns:1fr;min-height:0}}
.lvl .big{font-family:var(--mono);font-weight:700;font-size:clamp(64px,9vw,120px);line-height:.9;color:var(--mint-ink);letter-spacing:-.04em;display:block;margin-bottom:18px}

/* ---------- PERGUNTA ---------- */
.q-layout{display:grid;grid-template-columns:260px 1fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.q-layout{grid-template-columns:1fr}.q-aside{display:none}}
.q-aside{position:sticky;top:110px}
.q-aside svg rect[data-k]{cursor:pointer}
.q-aside .levels{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px}
.q-aside .levels li{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted)}
.q-aside .levels li.on{color:var(--ink);font-weight:700}
.q-aside .levels li b{font-family:var(--mono);margin-right:8px}
.bar{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin:14px 0 28px}
.bar i{display:block;height:100%;background:var(--mint);transition:width .4s}
.q-title{font-size:clamp(30px,3.6vw,46px)}
.q-intro{color:var(--slate);font-size:16px;line-height:1.5;margin:12px 0 30px;max-width:56ch}
.q{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px 22px 20px;margin-bottom:14px;transition:border-color .2s}
.q.answered{border-color:#C9D6E8}
.q-head{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.q-head p{margin:0;font-size:16.5px;line-height:1.45;font-weight:500}
.q-head .n{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.14em;display:block;margin-bottom:6px}
.help{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:14px;color:var(--slate);transition:all .2s}
.help[aria-expanded=true]{background:var(--ink);color:var(--mint);border-color:var(--ink)}
@media (hover:hover){.help:hover{background:var(--ink);color:var(--mint);border-color:var(--ink)}}
.scale{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
@media (max-width:640px){.scale{grid-template-columns:1fr 1fr}}
.opt{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:10px 12px;text-align:left;display:flex;flex-direction:column;gap:8px;transition:all .18s}
@media (hover:hover){.opt:hover{border-color:var(--slate)}}
.opt .lbl{font-size:13px;font-weight:500;line-height:1.25}
.m{display:flex;gap:3px}
.m i{width:14px;height:4px;border-radius:2px;background:var(--line)}
.m i.f{background:var(--slate)}
.opt[aria-checked=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.opt[aria-checked=true] .m i{background:#2A3550}
.opt[aria-checked=true] .m i.f{background:var(--mint)}
.comment-btn{margin-top:4px;background:none;border:0;padding:0;font-size:13px;color:var(--link)}
.comment{width:100%;margin-top:10px;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:8px;padding:12px;min-height:84px;resize:vertical;background:var(--paper)}
.q-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;flex-wrap:wrap}
.erro{background:#FFF1EE;border:1px solid #FFD0C4;color:#8A2A12;border-radius:8px;padding:12px 14px;margin-top:16px;font-size:14px}

/* drawer */
.scrim{position:fixed;inset:0;z-index:70;background:rgba(10,14,26,.35);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;z-index:71;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--ink);color:var(--fog);padding:28px 30px 40px;overflow:auto;transform:translateX(102%);visibility:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s .4s;border-left:1px solid var(--line-d)}
.drawer.on{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.drawer .x{position:absolute;top:18px;right:18px;background:none;border:1px solid var(--line-d);border-radius:6px;width:32px;height:32px;color:var(--muted-d)}
.drawer h3{font-size:24px;color:#fff;margin:6px 40px 18px 0;line-height:1.15}
.drawer p{font-size:14.5px;line-height:1.6;color:var(--muted-d);margin:0 0 20px}
.drawer .mono{color:var(--mint);margin-bottom:8px;display:block}
.dims{display:grid;gap:10px;margin:0 0 22px}
.dim{border:1px solid var(--line-d);border-radius:8px;padding:12px 14px;background:var(--panel-d)}
.dim strong{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#fff;margin-bottom:4px}
.dim .m i{width:12px;background:#2A3550}
.dim .m i.f{background:var(--mint)}
.dim span{font-size:13px;line-height:1.5;color:var(--muted-d)}
.tip{border-left:2px solid var(--mint);padding:4px 0 4px 14px;font-size:13.5px!important;color:var(--fog)!important}
@media (max-width:640px){.drawer{top:auto;height:82vh;width:100vw;border-left:0;border-top:1px solid var(--line-d);border-radius:16px 16px 0 0;transform:translateY(102%)}}

/* ---------- FINAL ---------- */
#s-fim{background:var(--ink)}
.res{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,80px);align-items:center;min-height:calc(100vh - 200px)}
@media (max-width:980px){.res{grid-template-columns:1fr;min-height:0}}
.res h2{color:#fff}
.res svg{width:100%;height:auto;overflow:visible}
.sent{display:flex;gap:10px;align-items:center;margin-top:18px;font-size:13px;color:var(--muted-d)}
.sent i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(61,220,151,.16)}
.res-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.brick-in{animation:brickIn .55s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes brickIn{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.brick-in,.cta-row{animation:none}*{scroll-behavior:auto!important}}

/* ---------- CELULAR ----------
   Referência: iPhone SE/12–15 (375–393px) e Galaxy S20–S23 (360–412px).
   Texto mínimo de 11px nos rótulos, 16px nos campos (evita o zoom do iOS) e alvos de toque de 44px+. */
@media (max-width:640px){
  .mono{font-size:11px;letter-spacing:.14em}
  .eyebrow{font-size:12px;letter-spacing:.18em;margin-bottom:12px}
  .lead{font-size:16.5px}
  .h2{font-size:clamp(30px,8.6vw,36px);line-height:1.08}
  .btn{font-size:15.5px;padding:14px 20px;min-height:50px;justify-content:center}

  header{padding:12px 20px}
  .logo b{font-size:26px}
  .logo span{font-size:9px;letter-spacing:.16em}
  .back-site{font-size:11.5px;letter-spacing:.14em;padding:10px 0 10px 12px}
  .back-site span{display:none}

  .wrap{padding:96px 20px 48px}

  /* passos: só o atual tem rótulo */
  .steps{margin-bottom:30px;flex-wrap:nowrap}
  .steps span{min-width:0;font-size:0;border-top-width:3px;padding:0}
  .steps span.on{flex:2.6;font-size:11px;letter-spacing:.14em;padding-top:9px;white-space:nowrap}

  /* apresentação */
  .intro-copy{left:20px;right:20px;bottom:86px}
  .intro-copy h1{font-size:clamp(28px,8.2vw,34px);line-height:1.08}
  .intro-copy .lead{font-size:16px}
  .cta-row{margin-top:22px}
  .cta-row .btn.primary{flex:1}
  .skip{right:20px;bottom:calc(18px + env(safe-area-inset-bottom));font-size:11px;padding:12px 18px}

  /* cadastro */
  .gets{margin-top:24px}
  .gets li{font-size:16px}
  .card{padding:20px 18px;border-radius:12px}
  .field input{font-size:16px;padding:24px 14px 9px}
  .field label{font-size:16px;top:17px}
  .field input:focus+label,.field input:not(:placeholder-shown)+label{font-size:10.5px}
  .consent{font-size:14.5px;gap:12px}
  .consent input{width:22px;height:22px;flex:none;margin-top:0}
  .form-foot .btn.primary{flex:1}
  .form-foot>.mono{width:100%;order:2;text-align:center}
  .resume{font-size:15px}
  .resume div{width:100%}
  .resume .btn{flex:1}

  /* escolha */
  .choices{margin-top:26px;gap:16px}
  .choice{grid-template-columns:1fr;gap:18px;padding:22px 20px}
  .choice svg{width:100%;max-width:280px;height:auto;margin:6px auto 0;display:block}
  .choice .tick{width:28px;height:28px;font-size:15px}
  .choice h3{font-size:27px}
  .choice p{font-size:15.5px}
  .choice ol{gap:8px}
  .choice ol li{font-size:15px;gap:10px}
  .choice ol li b{width:14px}
  .meta{gap:6px 16px}

  /* abertura do nível: pirâmide no topo */
  .lvl{gap:22px}
  #lv-pyr{order:-1;max-width:330px;width:100%;margin:0 auto}
  #lv-pyr svg{width:100%;height:auto}
  .lvl .big{font-size:56px;margin-bottom:12px}
  #lv-como p{font-size:16px!important}

  /* pergunta: pirâmide compacta no lugar da lateral */
  .q-aside{display:grid!important;position:static;grid-template-columns:132px 1fr;gap:4px 16px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:22px}
  .q-aside>.mono{grid-column:2;grid-row:1;align-self:end}
  #q-pyr{grid-column:1;grid-row:1/3;margin:0!important}
  #q-pyr svg{width:100%;height:auto;display:block}
  .q-aside .levels{grid-column:2;grid-row:2;margin:0;align-self:start}
  .q-aside .levels li{display:none;font-size:15px;flex-direction:column;gap:2px}
  .q-aside .levels li.on{display:flex}
  .q-layout{gap:0}
  #q-crumb .so-desk{display:none}
  .bar{height:4px;margin:10px 0 22px}
  .q-title{font-size:clamp(28px,8vw,34px);line-height:1.08}
  .q-intro{font-size:16.5px;margin-bottom:22px}
  .q{padding:18px 16px 16px;border-radius:12px}
  .q-head{gap:12px}
  .q-head p{font-size:17.5px;line-height:1.42}
  .q-head .n{font-size:11px;margin-bottom:8px}
  .help{width:42px;height:42px;font-size:17px;margin:-4px -4px 0 0}
  .scale{gap:8px;margin-top:16px}
  .opt{min-height:64px;padding:12px;gap:10px;border-radius:10px}
  .opt .lbl{font-size:15.5px;line-height:1.2}
  .m{gap:4px}
  .m i{width:18px;height:5px}
  .comment-btn{font-size:15.5px;padding:12px 0;text-align:left}
  .comment{font-size:16px}
  /* navegação sempre à mão */
  .q-foot{position:sticky;bottom:0;z-index:5;flex-wrap:nowrap;margin:18px -20px 0;padding:14px 20px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(rgba(246,247,251,0),var(--surface) 26%)}
  .q-foot .autosave{display:none}
  .q-foot #q-next{flex:1}
  .erro{font-size:15px}

  /* saber mais */
  .drawer{height:88vh;height:88dvh;padding:26px 22px calc(36px + env(safe-area-inset-bottom))}
  .drawer::before{content:"";position:absolute;top:9px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line-d)}
  .drawer .x{width:44px;height:44px;top:14px;right:14px;font-size:16px}
  .drawer h3{font-size:26px;margin-right:52px}
  .drawer p{font-size:16px}
  .dim strong{font-size:16px}
  .dim span{font-size:15px}
  .tip{font-size:15px!important}

  /* conclusão */
  .res{gap:28px}
  .res>div:last-child{order:-1;max-width:320px;width:100%;margin:0 auto}
  .sent{font-size:15px}
  .res-actions .btn{flex:1}
}