/* Saciela — funil quiz (mobile-first). Paleta: sálvia + creme + terracota. */
:root{
  --sage:#5C7958; --sage-d:#46603F; --sage-l:#E7EEE3;
  --cream:#F7F2E8; --cream-d:#EFE7D6;
  --terra:#C57B57; --terra-d:#A8623F;
  --ink:#2C3328; --muted:#6B7264; --white:#fff;
  --radius:16px; --shadow:0 6px 24px rgba(44,51,40,.10);
  --serif:"Georgia","Times New Roman",serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--cream)}

/* topo / progresso */
.top{padding:14px 20px 0;display:flex;align-items:center;gap:10px}
.brand{font-family:var(--serif);font-weight:700;color:var(--sage-d);font-size:20px;letter-spacing:.3px}
.brand small{display:block;font-family:var(--sans);font-weight:400;font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.progress{display:flex;gap:6px;padding:14px 20px}
.progress .seg{flex:1;height:6px;border-radius:99px;background:var(--cream-d);overflow:hidden}
.progress .seg i{display:block;height:100%;width:0;background:var(--sage);transition:width .4s ease}

/* corpo do step */
.step{flex:1;display:flex;flex-direction:column;padding:8px 20px 24px;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{color:var(--terra-d);font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}
h1.q{font-family:var(--serif);font-size:25px;line-height:1.25;margin-bottom:8px;color:var(--ink)}
.sub{color:var(--muted);font-size:15px;margin-bottom:18px}

/* opções */
.opts{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.opt{display:flex;align-items:center;gap:12px;background:var(--white);border:2px solid var(--cream-d);border-radius:var(--radius);padding:15px 16px;font-size:16px;cursor:pointer;transition:.15s;text-align:left}
.opt:hover{border-color:var(--sage-l)}
.opt.sel{border-color:var(--sage);background:var(--sage-l)}
.opt .ck{width:22px;height:22px;border-radius:50%;border:2px solid var(--cream-d);flex:0 0 auto;display:grid;place-items:center}
.opt.sel .ck{background:var(--sage);border-color:var(--sage)}
.opt.sel .ck::after{content:"✓";color:#fff;font-size:13px}

/* slider / input */
.range{width:100%;margin:24px 0}
input[type=range]{width:100%;accent-color:var(--sage)}
.rangeval{text-align:center;font-family:var(--serif);font-size:34px;color:var(--sage-d)}
.field{width:100%;background:#fff;border:2px solid var(--cream-d);border-radius:var(--radius);padding:15px 16px;font-size:16px;margin-bottom:10px}
.field:focus{outline:none;border-color:var(--sage)}

/* CTA */
.spacer{flex:1}
.btn{width:100%;background:var(--sage);color:#fff;border:none;border-radius:99px;padding:17px;font-size:17px;font-weight:700;cursor:pointer;transition:.15s;box-shadow:var(--shadow)}
.btn:hover{background:var(--sage-d)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.terra{background:var(--terra)}.btn.terra:hover{background:var(--terra-d)}
.note{text-align:center;font-size:11px;color:var(--muted);margin-top:12px;line-height:1.4}

/* loading */
.loadwrap{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:18px}
.ring{width:64px;height:64px;border-radius:50%;border:5px solid var(--cream-d);border-top-color:var(--sage);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loadlist{margin-top:14px;text-align:left;font-size:14px;color:var(--muted)}
.loadlist li{opacity:.3;margin:8px 0;transition:.3s;list-style:none}
.loadlist li.on{opacity:1;color:var(--ink)}.loadlist li.on::before{content:"✓ ";color:var(--sage)}

/* social / reveal */
.card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin:10px 0}
.testi{font-style:italic;color:var(--ink)}.testi b{display:block;font-style:normal;color:var(--muted);font-size:13px;margin-top:8px}
.bars{display:flex;align-items:flex-end;gap:8px;height:120px;margin:18px 0}
.bars div{flex:1;background:var(--sage-l);border-radius:8px 8px 0 0;position:relative}
.bars div.now{background:var(--cream-d)}.bars div.goal{background:var(--sage)}
.bars span{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:11px;color:var(--muted)}

/* paywall planos */
.plan{display:flex;align-items:center;justify-content:space-between;border:2px solid var(--cream-d);border-radius:var(--radius);padding:14px 16px;background:#fff;cursor:pointer;margin-bottom:10px;position:relative}
.plan.sel{border-color:var(--sage);background:var(--sage-l)}
.plan .pl{font-weight:700}.plan .pr{text-align:right}
.plan .pr b{font-size:18px}.plan .pr small{display:block;color:var(--muted);font-size:12px}
.badge{position:absolute;top:-10px;right:14px;background:var(--terra);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;letter-spacing:.5px}
.bump{display:flex;gap:10px;align-items:flex-start;background:var(--white);border:2px dashed var(--terra);border-radius:var(--radius);padding:14px;margin:14px 0}
.timer{text-align:center;color:var(--terra-d);font-weight:700;margin:10px 0}
.lang{margin-left:auto;font-size:12px;color:var(--muted);background:none;border:1px solid var(--cream-d);border-radius:99px;padding:4px 10px;cursor:pointer}
.disc{font-size:10px;color:var(--muted);text-align:center;padding:16px 20px;line-height:1.5}