/* Layout: uma coluna de celular, centrada, perguntas uma por tela */
:root{
  --bg:#F5F2EA; --card:#FFFFFF; --fg:#1B2524; --muted:#3F4B49; --soft:#4A5654;
  --line:#CFCABD; --track:#E2DED3;
  --accent:#1D6B4E; --accent-ink:#FFFFFF; --accent-soft:#E3EFE8; --accent-deep:#134A36;
  --warm:#FFF3DC; --warm-ink:#5C3A0E; --warm-icon:#B5651D;
  --neutral:#E8E5DC; --disabled:#8FA79C;
  --font:'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121816; --card:#1C2421; --fg:#EEF2EE; --muted:#C2CCC7; --soft:#A9B5AF;
    --line:#3A4742; --track:#2C3733;
    --accent:#5FBF94; --accent-ink:#0D1F17; --accent-soft:#1E3A2E; --accent-deep:#9FE0C0;
    --warm:#3A2E18; --warm-ink:#F5D9A8; --warm-icon:#E8A35A;
    --neutral:#2C3733; --disabled:#3F5A4E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121816; --card:#1C2421; --fg:#EEF2EE; --muted:#C2CCC7; --soft:#A9B5AF;
  --line:#3A4742; --track:#2C3733;
  --accent:#5FBF94; --accent-ink:#0D1F17; --accent-soft:#1E3A2E; --accent-deep:#9FE0C0;
  --warm:#3A2E18; --warm-ink:#F5D9A8; --warm-icon:#E8A35A;
  --neutral:#2C3733; --disabled:#3F5A4E;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:0}
.wrap{max-width:480px;margin:0 auto;padding-block:16px 32px;display:flex;flex-direction:column;gap:16px;min-height:100vh}
button,input{font-family:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--warm-icon);outline-offset:2px}
h1,h2{margin:0;line-height:1.2;text-wrap:balance}
p{margin:0}
svg{flex-shrink:0}
.teste{background:var(--warm);color:var(--warm-ink);border-radius:12px;padding:8px 12px;font-size:14px;font-weight:700;text-align:center}
.top{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:var(--accent-ink)}
.marca{font-size:18px;font-weight:700}
.card{background:var(--card);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:12px}
.ico{width:64px;height:64px;border-radius:16px;background:var(--warm);color:var(--warm-icon);display:flex;align-items:center;justify-content:center}
.h1{font-size:28px}
.h2{font-size:25px}
.lead{font-size:18px;color:var(--muted)}
.ajuda{color:var(--muted)}
.checks{display:flex;flex-direction:column;gap:10px;font-size:16px;color:var(--muted)}
.check{display:flex;gap:10px;align-items:center}
.check svg{color:var(--accent)}
.grow{flex-grow:1}
.btn{min-height:60px;border:none;border-radius:16px;background:var(--accent);color:var(--accent-ink);font-size:20px;font-weight:700;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}
.btn[aria-disabled="true"]{background:var(--disabled);cursor:not-allowed}
.link{min-height:48px;border:none;background:transparent;color:var(--accent);font-size:17px;font-weight:700;width:100%}
.prog{display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--soft)}
.bar{height:10px;border-radius:6px;background:var(--track)}
.bar div{height:10px;border-radius:6px;background:var(--accent)}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{min-height:62px;border:2px solid var(--line);border-radius:16px;background:var(--card);font-size:18px;font-weight:700;text-align:left;padding:12px 16px;display:flex;align-items:center;gap:14px;width:100%}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.box{width:28px;height:28px;border-radius:8px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent-ink)}
.opt[aria-pressed="true"] .box{background:var(--accent);border-color:var(--accent)}
.opt[aria-pressed="false"] .box svg{visibility:hidden}
.grupo{background:var(--card);border-radius:16px;padding:10px 12px 10px 16px;display:flex;align-items:center;gap:10px}
.grupo .lbl{flex-grow:1;font-size:17px;font-weight:700;line-height:1.3;min-width:0}
.step{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;border:2px solid var(--line);background:var(--card)}
.step.mais{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.num{width:30px;text-align:center;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.total{font-weight:700;color:var(--accent-deep)}
.campo{display:flex;align-items:center;gap:10px;background:var(--card);border:2px solid var(--accent);border-radius:16px;padding:0 18px}
.campo span{font-size:26px;font-weight:700;color:var(--soft)}
.campo input{flex-grow:1;min-width:0;height:68px;border:none;background:transparent;font-size:30px;font-weight:700;outline:none}
.rotulo{font-size:16px;font-weight:700;color:var(--muted)}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--soft)}
.dinheiro{background:var(--accent-soft);color:var(--accent-deep);border-radius:14px;padding:14px 16px}
.dinheiro b{display:block;font-size:30px;font-variant-numeric:tabular-nums}
.dinheiro small{font-size:14px}
.ouvir{min-height:52px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--accent-deep);font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px}
.comece{background:var(--accent);color:var(--accent-ink);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:8px}
.comece .eyebrow{color:inherit;opacity:.85}
.comece b{font-size:22px;line-height:1.3}
.nota{background:var(--accent-soft);color:var(--accent-deep);border-radius:20px;padding:16px 20px;font-size:16px}
.cat{display:flex;flex-direction:column;gap:10px}
.cat h3{margin:6px 4px 0;font-size:20px}
.dir{background:var(--card);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:8px}
.dir-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.dir-nome{font-size:19px;font-weight:700;line-height:1.3;min-width:0}
.chip{flex-shrink:0;border-radius:999px;padding:5px 10px;font-size:13px;font-weight:700}
.chip.prov{background:var(--accent);color:var(--accent-ink)}
.chip.perg{background:var(--warm);color:var(--warm-ink)}
.chip.pensar{background:var(--neutral);color:var(--muted)}
.valor{font-size:20px;font-weight:700;color:var(--accent-deep);line-height:1.3}
.dir p{font-size:16px;color:var(--muted)}
.lista{background:var(--bg);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.lista b{display:block;font-size:16px}
.lista span{font-size:15px;color:var(--muted)}
.onde{display:flex;gap:8px;align-items:flex-start;font-size:16px;font-weight:700;color:var(--accent-deep)}
.onde svg{margin-top:2px}
.docs{display:flex;flex-direction:column;gap:10px}
.doc{display:flex;gap:10px;align-items:flex-start}
.doc svg{color:var(--accent);margin-top:2px}
.rodape{font-size:14px;color:var(--soft);text-align:center}
@media (prefers-reduced-motion: no-preference){ .bar div{transition:width .25s ease} }
.h3{margin:0;font-size:19px}
.erro{background:var(--warm);color:var(--warm-ink);border-radius:16px;padding:16px 20px}
.rodape-links{display:flex;justify-content:center;padding-top:8px;border-top:1px solid var(--line)}
.link-sobre{min-height:48px;border:none;background:transparent;color:var(--accent);font-size:16px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sobre p{color:var(--muted)}
.sobre .lead{color:var(--muted)}
.sobre.aviso{background:var(--warm);color:var(--warm-ink)}
.sobre.aviso p{color:var(--warm-ink)}
.legenda{display:flex;flex-direction:column;gap:12px}
.leg{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.leg p{font-size:16px}
.feedback{align-items:center;text-align:center}
.fb-titulo{margin:0;font-size:22px;font-weight:700}
.fb-botoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
.fb{min-height:120px;border:2px solid var(--line);border-radius:18px;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:18px;font-weight:700;padding:12px}
.fb.sim svg{color:var(--accent)}
.fb.nao svg{color:var(--warm-icon)}
.fb.sim:active{background:var(--accent-soft)}
.fb.nao:active{background:var(--warm)}
.obrigado{background:var(--accent-soft)}
.obrigado .fb-titulo,.obrigado p{color:var(--accent-deep)}
