/* ===== Tokens (sobrescritos via JS a partir de config.theme) ===== */
/* Cores resolvidas em estático (sem color-mix) p/ compatibilidade total:
   Safari<16.2, WebView in-app de Instagram/Facebook, Android antigo, etc. */
:root{
  --brand:#22C55E; --brand2:#16A34A;
  --grad:linear-gradient(135deg, rgba(34,197,94,.25), rgba(34,197,94,.5));   /* degradê verde (spec do cliente) */
  --title:#FAFAFA; --content:#FAFAFA; --muted:#6B7280;
  --bg:#0A0A0A; --card:#151515; --line:#262626;
  --radius:18px; --maxw:540px;
  --title-font:'Montserrat',sans-serif; --body-font:'Inter',sans-serif;
  --ok:#22C55E; --bad:#ef4444; --warn:#f59e0b; --star:#fbbf24;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--body-font);
  color:var(--content);
  background:var(--bg);
  line-height:1.5;
  font-size:16px;
  overscroll-behavior:none;
}

/* ===== Layout shell ===== */
.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center}
.topbar{
  position:sticky;top:0;z-index:10;width:100%;
  background:rgba(10,10,10,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(34,197,94,.16);
}
.topbar-inner{max-width:var(--maxw);margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:12px}
.logo{font-family:var(--title-font);font-weight:800;color:var(--brand);font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.back{border:0;background:none;color:var(--content);font-size:22px;cursor:pointer;opacity:.5;padding:0 4px;line-height:1}
.back:disabled{opacity:0;pointer-events:none}
.progress{flex:1;height:8px;border-radius:99px;background:#1b2f22;overflow:hidden}
.progress > i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width .45s cubic-bezier(.4,0,.2,1)}
.progress.hidden{visibility:hidden}

.stage{width:100%;max-width:var(--maxw);padding:20px 18px 64px;flex:1}
.step{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===== Texto ===== */
.layer{margin:0 0 14px}
.layer h2{font-family:var(--title-font);color:var(--title);font-size:23px;font-weight:800;line-height:1.25;letter-spacing:-.02em;text-align:center}
.layer h3{font-family:var(--title-font);color:var(--title);font-size:19px;font-weight:700;line-height:1.3;text-align:center}
.layer p{color:var(--content);font-size:16px;text-align:center;margin-top:8px}
.layer .accent{color:var(--brand)}
.layer .small{font-size:14px}
.layer .muted{color:var(--muted)}
.layer .center{text-align:center}
b,strong{color:var(--title);font-weight:700}

/* ===== Opções (radio / checkbox) ===== */
.options{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px}
.opt{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:15px 16px;border:1.5px solid var(--line);
  background:var(--card);border-radius:var(--radius);cursor:pointer;
  font-size:16px;color:var(--title);text-align:left;font-weight:600;
  transition:transform .12s,border-color .15s,box-shadow .15s,background .15s;
}
.opt:hover{border-color:#247642}
.opt:active{transform:scale(.985)}
.opt .emoji{font-size:22px;line-height:1;flex:none}
.opt .lbl{flex:1;min-width:0}
.opt .box{flex:none;width:22px;height:22px;border-radius:7px;border:2px solid #316b47;display:grid;place-items:center;transition:.15s}
.opt.radio .box{border-radius:99px}
.opt.sel{border-color:var(--brand);background:#172a1e;box-shadow:0 0 0 1px var(--brand),0 8px 24px -10px var(--brand)}
.opt.sel .box{background:var(--brand);border-color:var(--brand)}
.opt.sel .box::after{content:"✓";color:#0A0A0A;font-size:13px;font-weight:900}
/* opção com imagem (ex.: tipo de corpo) — radio à esquerda, foto encostada à direita */
.opt.has-img{align-items:stretch;padding:0 0 0 16px;gap:0;overflow:hidden;min-height:128px}
.opt.has-img .box{align-self:center;margin-right:12px}
.opt.has-img .lbl{align-self:center;padding:14px 0}
.opt.has-img .thumb{width:120px;height:auto;object-fit:cover;object-position:center top;align-self:stretch;flex:none}

/* ===== Botões ===== */
.btn{
  display:block;width:100%;border:0;cursor:pointer;margin-top:14px;
  padding:16px 20px;border-radius:var(--radius);
  font-family:var(--title-font);font-weight:800;font-size:17px;color:#0A0A0A;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 10px 28px -10px var(--brand);
  transition:transform .12s,filter .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.4;filter:grayscale(.4);cursor:not-allowed}
.btn.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 10px 28px -10px var(--brand)}50%{box-shadow:0 10px 36px -4px var(--brand)}}

/* ===== Alertas ===== */
.alert{padding:14px 16px;border-radius:14px;font-size:15px;text-align:center;border:1px solid;margin:4px 0 14px}
.alert.success{background:rgba(34,197,94,.12);color:#4ade80;border-color:rgba(34,197,94,.35)}
.alert.success b{color:#86efac}
.alert.danger{background:rgba(239,68,68,.12);color:#f87171;border-color:rgba(239,68,68,.4);font-weight:800;letter-spacing:.04em}
.alert.warning{background:rgba(245,158,11,.12);color:#fbbf24;border-color:rgba(245,158,11,.35)}
.alert.warning b{color:#fcd34d}
.alert.light{background:#1a1a1a;color:#d1d5db;border-color:#2a2a2a}

/* ===== Bullets pró/contra ===== */
.bullets{list-style:none;display:flex;flex-direction:column;gap:8px;margin:4px 0 14px}
.bullets li{display:flex;align-items:flex-start;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:15px;color:var(--title);font-weight:600}
.bullets li::before{flex:none;font-weight:900;font-size:14px;line-height:1.4}
.bullets.good li{border-color:rgba(34,197,94,.3);background:#16231b}
.bullets.good li::before{content:"✓";color:var(--ok)}
.bullets.bad li{border-color:rgba(239,68,68,.3);background:#262019}
.bullets.bad li::before{content:"✕";color:var(--bad)}

/* ===== Metric bar (animada) ===== */
.metric{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin:4px 0 14px}
.metric .mtitle{font-weight:700;color:var(--title);font-size:14px;margin-bottom:10px;text-align:center}
.metric .track{position:relative;height:14px;border-radius:99px;background:#262626;overflow:hidden}
.metric .fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--warn),var(--bad));transition:width 1.2s cubic-bezier(.4,0,.2,1)}
.metric .legs{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.metric .tip{position:absolute;top:-30px;transform:translateX(-50%);background:var(--brand);color:#0A0A0A;font-size:11px;font-weight:800;padding:3px 8px;border-radius:7px;opacity:0;transition:opacity .4s .9s,left 1.2s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.metric .tip::after{content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--brand)}
.metric.run .tip{opacity:1}

/* ===== Chart (linhas SVG) ===== */
.chart{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 14px 10px;margin:4px 0 14px}
.chart .ctitle{font-weight:700;color:var(--title);font-size:14px;text-align:center;margin-bottom:6px}
.chart svg{width:100%;height:auto;display:block}
.chart .legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--content)}
.chart .legend span{display:inline-flex;align-items:center;gap:6px}
.chart .legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.chart path.line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.4s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chart text{font-size:10px;fill:var(--muted);font-family:var(--body-font)}

/* ===== Slider (peso/altura) ===== */
.slider{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 18px;margin:4px 0 14px;text-align:center}
.slider .val{font-family:var(--title-font);font-size:42px;font-weight:800;color:var(--brand);line-height:1}
.slider .val small{font-size:18px;color:var(--content);font-weight:600;margin-left:4px}
.slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;margin-top:20px;background:linear-gradient(90deg,var(--brand) var(--pct,40%),#262626 var(--pct,40%))}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:99px;background:#fff;border:4px solid var(--brand);box-shadow:0 4px 12px -2px var(--brand);cursor:pointer}
.slider input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:99px;background:#fff;border:4px solid var(--brand);cursor:pointer}
.slider .ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:8px}

/* ===== Loading (analisando) ===== */
.loading{text-align:center;padding:48px 12px}
.loading .ring{width:70px;height:70px;margin:0 auto 22px;border-radius:99px;border:6px solid #262626;border-top-color:var(--brand);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading h3{font-family:var(--title-font);color:var(--title);font-size:20px;font-weight:800}
.loading p{margin-top:6px;color:var(--muted)}
.loading .lbar{height:8px;border-radius:99px;background:#262626;overflow:hidden;margin:22px auto 0;max-width:280px}
.loading .lbar > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width .2s linear}
.loading .pct{font-size:13px;color:var(--brand);font-weight:700;margin-top:8px}

/* ===== Quotes (depoimentos) ===== */
.quotes{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
.quote{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.quote .av{flex:none;width:42px;height:42px;border-radius:99px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#0A0A0A;display:grid;place-items:center;font-weight:800;font-family:var(--title-font)}
.quote .qhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.quote .qname{font-weight:700;color:var(--title);font-size:14px}
.quote .qact{font-size:12px;color:var(--muted)}
.quote .stars{color:var(--star);font-size:13px}
.quote .qtext{font-size:14px;margin-top:3px;text-align:left;color:var(--content)}

/* ===== Preço ===== */
.price{background:var(--grad),var(--card);border:2px solid var(--brand);border-radius:18px;padding:18px;text-align:center;margin:8px 0 6px;position:relative;overflow:hidden}
.price .badge{display:inline-block;background:var(--brand);color:#0A0A0A;font-size:12px;font-weight:800;padding:5px 12px;border-radius:99px;margin-bottom:10px;letter-spacing:.03em}
.price .from{color:var(--muted);text-decoration:line-through;font-size:15px}
.price .now{font-family:var(--title-font);font-size:40px;font-weight:800;color:#FAFAFA;line-height:1.05}
.price .note{font-size:13px;color:var(--content);margin-top:4px}

/* ===== Vídeo / VSL ===== */
.video{aspect-ratio:9/16;max-width:330px;margin:0 auto 14px;border-radius:16px;overflow:hidden;background:#000;border:1.5px dashed #2c6d44;display:grid;place-items:center;color:#FAFAFA;text-align:center}
.video .ph{font-family:var(--title-font);font-weight:800;font-size:20px;letter-spacing:.08em;color:var(--muted)}
.video iframe,.video > div{width:100%;height:100%}

/* ===== FAQ ===== */
.faq{margin:8px 0 14px;display:flex;flex-direction:column;gap:8px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 14px}
.faq summary{list-style:none;cursor:pointer;padding:14px 0;font-weight:700;color:var(--title);font-size:15px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-size:22px;font-weight:700;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 14px;font-size:14px;color:var(--muted)}

/* spacer */
.clear{height:12px}

/* aviso sem JS */
.nojs{padding:40px 22px;text-align:center;color:#FAFAFA}

@media(min-width:600px){
  .layer h2{font-size:26px}
}