/* Inter auto-hospedada (sem CDN externo = mais rápido e não quebra no webview do Instagram) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
:root{
  --brand:#0891b2; --brand-600:#0e7490; --brand-050:#ecfeff;
  --cta:#16a34a; --cta-600:#15803d; --cta-active:#166534;
  --ink:#0f172a; --title:#030712; --body:#1f2937; --muted:#64748b;
  --card:#ffffff; --bg:#ffffff; --border:#e2e8f0; --border-strong:#cbd5e1;
  --radius:14px; --tap:46px; --maxw:440px;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.06);
  --shadow-active:0 2px 6px rgba(8,145,178,.25);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--body)}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;letter-spacing:-.005em}
img{max-width:100%;display:block;height:auto}
button{font-family:inherit;cursor:pointer;border:0;background:none}
/* foco visível p/ navegação por teclado (acessibilidade) — não aparece no toque */
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.opt:focus-visible,.chip:focus-visible,.cta:focus-visible,.ruler:focus-visible,
.unit-toggle button:focus-visible,.steppers button:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:12px}

/* ---------- Shell ---------- */
.app{max-width:var(--maxw);margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--bg);padding:0 18px calc(env(safe-area-inset-bottom,0) + 12px)}
.topbar{position:sticky;top:0;z-index:20;background:var(--bg);padding:6px 0 4px}
.topbar .logo{height:26px;margin:0 auto 4px;width:auto;object-fit:contain}
.progress{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);margin-top:2px}
.progress > i{display:block;height:100%;width:4%;background:linear-gradient(90deg,#1e40af 0%,#2563eb 100%);
  border-radius:99px;position:relative;overflow:hidden;
  transition:width .45s cubic-bezier(.34,1.2,.64,1), background .5s ease, box-shadow .5s ease}
.progress > i::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)}
.progress > i.loading::after{animation:shimmer .75s ease}
@keyframes shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.progress>i{transition:width .25s linear}.progress>i.loading::after{animation:none}}
.progress-meta{display:flex;justify-content:space-between;align-items:center;margin-top:3px;
  font-size:11px;font-weight:600;color:var(--muted)}

.stage{flex:1;display:flex;flex-direction:column;padding-top:2px}
.step{animation:fade .32s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.step{animation:none}.progress>i{transition:none}}

/* ---------- Typography ---------- */
.q-title{font-size:18.5px;line-height:1.24;font-weight:800;color:var(--title);margin:2px auto 5px;letter-spacing:-.01em;text-align:center;text-wrap:balance;max-width:26ch}
.hero .q-title{font-size:20.5px;max-width:22ch}
.q-sub{font-size:14px;color:#475569;margin:0 auto 4px;font-weight:500;text-align:center;max-width:36ch;line-height:1.35}
.q-hint{font-size:14px;color:var(--body);font-weight:700;margin:8px 0 2px;text-align:center}
.section-pad{padding-bottom:8px}

/* ---------- Option cards ---------- */
.opts{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.opt{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
  background:var(--card);border:1.5px solid var(--border);border-radius:12px;
  padding:8px 12px;text-align:left;color:var(--ink);box-shadow:var(--shadow);
  transition:transform .12s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease}
.opt:active{transform:scale(.98)}
.opt.tapped,.opt.selected{border-color:var(--brand);background:var(--brand-050);box-shadow:var(--shadow-active)}
.opt .thumb{width:42px;height:42px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:#f1f5f9}
.opt .emoji{font-size:20px;width:26px;text-align:center;flex:0 0 auto}
.opt .txt{flex:1;min-width:0}
.opt .lbl{font-size:14.5px;font-weight:600;line-height:1.24}
.opt .desc{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px;line-height:1.3}
.opt .check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border-strong);
  flex:0 0 auto;display:grid;place-items:center;color:#fff;transition:.15s}
.opt.selected .check{background:var(--brand);border-color:var(--brand)}
.opt .check svg{width:13px;height:13px;opacity:0;transition:.15s}
.opt.selected .check svg{opacity:1}
.opt .chev{color:var(--border-strong);flex:0 0 auto}
/* single-select: circle-arrow indicator (afinal não é seleção múltipla, é "toque para avançar") */
.opt .go{width:24px;height:24px;border-radius:50%;border:2px solid var(--border-strong);display:grid;place-items:center;color:var(--brand);flex:0 0 auto;transition:.15s}
.opt .go svg{width:13px;height:13px}
.opt:active .go,.opt.tapped .go{background:var(--brand);border-color:var(--brand);color:#fff}
/* opção sem imagem: conteúdo centralizado, indicador ancorado à direita */
.opt.center{justify-content:center;position:relative;padding-left:34px;padding-right:34px}
.opt.center .txt{flex:0 1 auto}
.opt.center .lbl{text-align:center}
.opt.center .emoji{width:auto}
.opt.center .go,.opt.center .check{position:absolute;right:10px;top:50%;transform:translateY(-50%);margin:0}
.theme-fiel .opt.center .go{color:inherit;border-color:currentColor;opacity:.7}

/* food grid (multi with many small chips) */
.food-group{margin-top:10px}
.food-group h4{font-size:14.5px;font-weight:700;color:var(--ink);margin:0 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:38px;padding:6px 12px;border-radius:99px;border:1.5px solid var(--border);
  background:#fff;font-size:14.5px;font-weight:600;color:var(--ink);box-shadow:var(--shadow);
  transition:transform .1s,border-color .15s,background .15s}
.chip:active{transform:scale(.96)}
.chip.selected{border-color:var(--brand);background:var(--brand-050);color:var(--brand-600)}

/* ---------- Info step ---------- */
.info-img{display:block;max-width:100%;max-height:150px;width:auto;margin:6px auto 6px;border-radius:var(--radius);object-fit:contain}
.info-body{font-size:14.5px;color:var(--body);font-weight:500;text-align:center;max-width:36ch;margin:0 auto;line-height:1.45}
/* gráfico animado (etapa vitalidade): duas curvas que se cruzam, desenhadas ao abrir */
.xchart{margin:8px 0 4px}
.xchart svg{width:100%;height:auto;display:block;overflow:visible}
.xchart .ln{stroke-dasharray:640;stroke-dashoffset:640;animation:xdraw 1.5s cubic-bezier(.3,.7,.3,1) forwards}
.xchart .ln.d2{animation-delay:.18s}
.xchart .lbl,.xchart .dot,.xchart .ax{opacity:0;animation:xfade .5s ease forwards;animation-delay:1.15s}
@keyframes xdraw{to{stroke-dashoffset:0}}
@keyframes xfade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.xchart .ln{animation:none;stroke-dashoffset:0}.xchart .lbl,.xchart .dot,.xchart .ax{animation:none;opacity:1}}

/* ---------- CTA ---------- */
.cta-wrap{position:sticky;bottom:0;padding:8px 0 max(8px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--bg) 26%)}
.cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;
  background:var(--cta);color:#fff;font-size:16.5px;font-weight:800;border-radius:12px;text-decoration:none;
  box-shadow:0 6px 18px rgba(22,163,74,.32);transition:transform .12s,background .15s;letter-spacing:.01em}
.cta:active{transform:scale(.98);background:var(--cta-active)}
.cta[disabled]{opacity:.45;box-shadow:none}
.cta.pulse{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 6px 18px rgba(22,163,74,.32)}50%{box-shadow:0 6px 26px rgba(22,163,74,.55)}}

/* ---------- Unit toggle / inputs ---------- */
.unit-toggle{display:inline-flex;background:#eef2f4;border-radius:99px;padding:3px;gap:3px;margin:8px auto 2px}
.unit-toggle button{min-width:58px;min-height:34px;border-radius:99px;font-weight:700;font-size:14px;color:var(--muted)}
.unit-toggle button.on{background:#fff;color:var(--brand-600);box-shadow:var(--shadow)}
.field{display:flex;align-items:flex-end;justify-content:center;gap:6px;margin:12px 0}
.field input{width:130px;font-size:36px;font-weight:800;text-align:center;color:var(--title);
  border:0;border-bottom:3px solid var(--brand);background:transparent;padding:2px 0;outline:none}
.field .unit{font-size:17px;font-weight:700;color:var(--muted);padding-bottom:6px}
.field.invalid input{border-bottom-color:#e11d48}
.field-msg{color:#e11d48;font-size:13.5px;font-weight:600;text-align:center;min-height:18px;margin-top:2px}
/* botões +/- para ajustar sem digitar */
.steppers{display:flex;gap:8px;justify-content:center;margin-top:2px;flex-wrap:wrap}
.steppers button{min-width:54px;min-height:42px;border-radius:12px;border:1.5px solid var(--border);background:#fff;font-weight:800;font-size:15px;color:var(--brand-600);box-shadow:var(--shadow);transition:transform .1s,background .15s}
.steppers button:active{transform:scale(.94);background:var(--brand-050)}

/* ---------- Weight ruler ---------- */
.readout{text-align:center;margin:10px 0 2px}
.readout .val{font-size:36px;font-weight:800;color:var(--title);line-height:1}
.readout .val small{font-size:18px;color:var(--brand-600);font-weight:700;margin-left:2px}
.ruler{position:relative;height:80px;margin:4px -16px 0;overflow:hidden;touch-action:pan-x;cursor:grab}
.ruler:active{cursor:grabbing}
.ruler .center-line{position:absolute;left:50%;top:6px;bottom:22px;width:3px;background:var(--brand);
  transform:translateX(-50%);border-radius:3px;z-index:3;pointer-events:none}
.ruler .center-line::after{content:'';position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--brand)}
.ruler .track{position:absolute;top:10px;height:54px;will-change:transform}
.tick{position:absolute;bottom:22px;width:2px;background:#cbd5e1}
.tick.major{height:28px;background:#94a3b8}
.tick.minor{height:14px}
.tick .num{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:12px;
  font-weight:600;color:var(--muted)}
.ruler-hint{text-align:center;font-size:13px;color:var(--muted);font-weight:600;margin-top:2px}
.imc-note{display:flex;gap:8px;background:#eff6ff;border:1px solid #dbeafe;border-radius:12px;
  padding:10px;margin-top:12px}
.imc-note .ico{font-size:18px;flex:0 0 auto}
.imc-note .t{font-weight:800;color:#1d4ed8;margin-bottom:2px;font-size:14.5px}
.imc-note .x{font-size:13.5px;color:#334155;font-weight:500}

/* ---------- Projection ---------- */
.proj-card{background:linear-gradient(180deg,#f0fbfd,#ffffff);border:1px solid #d7eef3;
  border-radius:20px;padding:18px 16px 12px;margin-top:12px;box-shadow:var(--shadow)}
.proj-head{font-size:19px;font-weight:800;color:var(--title);text-align:center;margin-bottom:14px}
.proj-head b{color:var(--brand-600)}
.chart{position:relative;height:170px;margin:10px 4px 0;border-bottom:2px solid #e2e8f0}
.chart svg{width:100%;height:100%;overflow:visible}
.chart .dot{filter:drop-shadow(0 2px 4px rgba(8,145,178,.4))}
.chart-x{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--muted);margin-top:8px}
.legend{display:flex;justify-content:center;gap:20px;margin-top:12px;font-size:14px;font-weight:600;color:var(--muted)}
/* gráfico de projeção de peso — animado ao abrir a etapa */
.pchart{margin:12px 0 2px}
.pchart svg{width:100%;height:auto;display:block;overflow:visible}
.pchart .pgrid{stroke:#e2e8f0;stroke-width:1;stroke-dasharray:3 6;opacity:0;animation:xfade .5s ease forwards .2s}
.pchart .pln{stroke-dasharray:720;stroke-dashoffset:720;animation:xdraw 1.5s cubic-bezier(.3,.7,.3,1) forwards}
.pchart .parea{opacity:0;animation:xfade .9s ease forwards 1s}
.pchart .pdot{opacity:0;transform-box:fill-box;transform-origin:center;animation:pop .45s ease forwards}
.pchart .plbl{opacity:0;animation:xfade .5s ease forwards 1.2s}
.pchart .pax{font-size:12.5px;font-weight:700;fill:#94a3b8;opacity:0;animation:xfade .5s ease forwards .4s}
@media (prefers-reduced-motion:reduce){.pchart .pln{animation:none;stroke-dashoffset:0}.pchart .parea,.pchart .pdot,.pchart .plbl,.pchart .pax,.pchart .pgrid{animation:none;opacity:1}}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* ---------- Testimonials carousel ---------- */
.tst-title{font-size:19px;font-weight:800;color:var(--title);text-align:center;margin:22px 0 12px}
.carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 -16px;padding:4px 16px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.tst{scroll-snap-align:center;flex:0 0 84%;background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.tst .who{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tst .who img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.tst .who .n{font-weight:800;color:var(--ink);font-size:16px}
.tst .who .a{font-size:14px;color:var(--muted);font-weight:600}
.tst .stars{color:#f59e0b;font-size:15px;letter-spacing:1px;margin-bottom:6px}
.tst .q{font-size:16px;color:var(--body);font-weight:500;line-height:1.5}
.dots{display:flex;justify-content:center;gap:6px;margin-top:4px}
.dots i{width:7px;height:7px;border-radius:50%;background:#cbd5e1;transition:.2s}
.dots i.on{background:var(--brand);width:20px;border-radius:99px}

/* ---------- Loader ---------- */
.loaderwrap{text-align:center;padding-top:16px}
.loader-ring{position:relative;width:158px;height:158px;margin:16px auto 4px}
.loader-ring svg{width:158px;height:158px;transform:rotate(-90deg)}
.loader-ring .rtrack{fill:none;stroke:#e6eef1;stroke-width:11}
.loader-ring .rbar{fill:none;stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.loader-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;font-weight:800;color:var(--brand-600);font-variant-numeric:tabular-nums}
.loader-sub{text-align:center;color:var(--muted);font-weight:600;font-size:16.5px;margin-top:6px}
.ltasks{display:flex;flex-direction:column;gap:11px;max-width:330px;margin:20px auto 0;text-align:left}
.ltask{display:flex;align-items:center;gap:12px;font-size:16.5px;font-weight:600;color:var(--muted);transition:color .3s,opacity .3s}
.ltask.pending{opacity:.45}
.ltask.done{color:var(--ink)}
.lt-ic{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;position:relative}
.lt-ic .spin{width:20px;height:20px;border-radius:50%;border:2.5px solid #d5dde3;border-top-color:var(--brand);animation:spin .7s linear infinite;display:none}
.ltask.active .spin{display:block}
.lt-ic .chk{width:26px;height:26px;color:#fff;background:var(--cta);border-radius:50%;padding:5px;display:none}
.ltask.done .chk{display:block;animation:pop .3s ease}
.ltask.pending .dotwait{width:9px;height:9px;border-radius:50%;background:#cbd5e1}
.ltask.active .dotwait,.ltask.done .dotwait{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ---------- Offer ---------- */
.offer h1{font-size:25px;font-weight:800;color:var(--title);text-align:center;margin:4px 0 14px;letter-spacing:-.01em}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.cmp .col{border-radius:16px;padding:14px;border:1px solid var(--border)}
.cmp .col.now{background:#fef2f2}
.cmp .col.fut{background:#f0fdf4}
.cmp .col h5{text-align:center;font-weight:800;font-size:15px;margin:0 0 10px}
.cmp .col.now h5{color:#dc2626}.cmp .col.fut h5{color:#16a34a}
.cmp .row{margin-bottom:12px}
.cmp .row .lab{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px}
.cmp .bars{display:flex;gap:3px;align-items:flex-end;height:26px}
.cmp .bars span{flex:1;border-radius:2px;background:#e5e7eb}
.cmp .now .bars span.on{background:#f87171}
.cmp .fut .bars span.on{background:#4ade80}
.cmp .row .v{font-size:13px;font-weight:700;margin-top:3px}
.cmp .now .v{color:#dc2626}.cmp .fut .v{color:#16a34a}

.blk-title{font-size:18.5px;font-weight:800;color:var(--title);margin:20px 0 8px;padding:0 4px;line-height:1.3}
.blk-p{font-size:15px;color:var(--body);font-weight:500;margin:0 0 12px;padding:0 4px;line-height:1.55}
.offer-top{width:100%;border-radius:16px;margin:4px 0 16px;display:block}
.mudancas{display:flex;flex-direction:column;gap:12px;margin:6px 0 4px}
.mudancas .mid-img{margin:0}
.incl{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.incl .it{display:flex;gap:12px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.incl .it .e{font-size:24px;flex:0 0 auto}
.incl .it .h{font-weight:800;color:var(--ink);font-size:17px;line-height:1.32}
.incl .it .d{font-size:15.5px;color:var(--muted);font-weight:500;margin-top:4px;line-height:1.52}

/* ---------- Box de Dor Profunda & Autoestima ---------- */
.pain-callout{
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 55%, #fecdd3 100%);
  border: 2px solid #fb7185;
  border-radius: 20px;
  padding: 20px 16px;
  margin: 24px 0 14px;
  box-shadow: 0 6px 24px rgba(244, 63, 94, 0.16);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pain-callout::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #be123c, #e11d48, #f43f5e);
}
.pain-callout .pain-tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #be123c;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.pain-callout .pain-headline{
  font-size: 19.5px;
  font-weight: 900;
  color: #881337;
  line-height: 1.28;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.pain-callout .pain-text{
  font-size: 15px;
  color: #4c0519;
  font-weight: 500;
  line-height: 1.58;
  margin: 0;
}
.pain-callout .pain-text strong{
  font-weight: 800;
  color: #9f1239;
}

.pricebox{border:2px solid var(--brand);border-radius:20px;padding:20px 16px;text-align:center;
  margin:22px 0;background:linear-gradient(180deg,#f0fbfd,#fff);box-shadow:var(--shadow)}
.pricebox .badge{display:inline-block;background:var(--brand);color:#fff;font-size:11.5px;font-weight:800;
  letter-spacing:.03em;padding:6px 12px;border-radius:99px;margin-bottom:12px}
.pricebox .pname{font-weight:700;color:var(--ink);font-size:17.5px;margin-bottom:8px}
.pricebox .pre{font-size:15.5px;color:var(--muted);font-weight:600}
.pricebox .val{font-size:44px;font-weight:800;color:var(--title);line-height:1.05}
.pricebox .val small{font-size:18px;color:var(--muted);font-weight:600}
.pricebox .inst{font-size:15.5px;color:var(--muted);font-weight:600;margin-top:2px}
.pricebox .urg{color:#dc2626;font-weight:700;font-size:16px;margin:12px 0 14px}
.mid-img{width:100%;border-radius:16px;margin:6px 0}
.guarantee{display:flex;gap:14px;align-items:center;background:#f8fafc;border:1px solid var(--border);
  border-radius:16px;padding:16px;margin-top:10px}
.guarantee img{width:72px;height:auto;flex:0 0 auto}
.guarantee > div{flex:1;min-width:0}
.guarantee .t{font-weight:800;color:var(--ink);margin-bottom:4px;font-size:16px}
.guarantee .x{font-size:15.5px;color:var(--muted);font-weight:500;line-height:1.58;overflow-wrap:break-word;word-break:break-word}
@media (max-width:360px){
  .guarantee{flex-direction:column;text-align:center}
  .guarantee > div{text-align:center}
}
/* Desktop: apenas centraliza a coluna estreita, com moldura sutil */
@media (min-width:640px){
  body{background:#eef2f6}
  .app{box-shadow:0 0 0 1px rgba(15,23,42,.05),0 10px 44px rgba(15,23,42,.09)}
  .topbar{border-radius:0}
}

.footer{text-align:center;color:#94a3b8;font-size:12px;padding:20px 0 8px;font-weight:500}

/* =====================================================================
   TEMA "fiel" — aproxima o visual do original (bordas finas, chevron,
   menos sombra/cor). Ativado por <html class="theme-fiel"> via config.
   ===================================================================== */
.theme-fiel{--radius:16px;--border:#dbdbdb;--cta:#0891b2;--cta-600:#0e7490;--cta-active:#0e7490}
.theme-fiel .opt{border-width:1px;box-shadow:none}
.theme-fiel .opt.tapped,.theme-fiel .opt.selected{background:#0891b2;border-color:#0891b2;color:#fff}
.theme-fiel .opt.selected .lbl,.theme-fiel .opt.tapped .lbl{color:#fff}
.theme-fiel .opt .desc{color:inherit;opacity:.85}
.theme-fiel .opt .check{display:none}
.theme-fiel .opt .chev{display:block}
.theme-fiel .q-title{font-weight:800}
.theme-fiel .cta{box-shadow:none;border-radius:14px}
.theme-fiel .chip.selected{background:#0891b2;color:#fff;border-color:#0891b2}
/* tema refinado esconde chevron (usa check) */
.theme-refinado .opt .chev{display:none}

/* ---------- 3 Portas da Sorte (Gamificação) ---------- */
.doors-wrap { text-align: center; }
.doors-tag { display: inline-block; background: #fef3c7; border: 1.5px solid #f59e0b; border-radius: 99px; padding: 5px 14px; margin-bottom: 12px; }
.doors-tag span { font-size: 13px; font-weight: 800; color: #b45309; text-transform: uppercase; letter-spacing: 0.03em; }
.doors-hint { font-size: 16px; font-weight: 700; color: #0891b2; margin: 18px 0 14px; }

.doors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 24px; perspective: 1000px; }
.door-card { position: relative; border-radius: 16px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; user-select: none; }
.door-card:not(.opened):hover { transform: translateY(-4px) scale(1.02); }
.door-card:not(.opened):active { transform: scale(0.96); }

.door-frame { background: linear-gradient(145deg, #ffffff, #f8fafc); border: 2.5px solid #cbd5e1; border-radius: 16px; padding: 14px 6px; min-height: 165px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); transition: all 0.35s cubic-bezier(0.34, 1.3, 0.64, 1); }
.door-card:not(.opened) .door-frame { border-color: #f59e0b; background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%); box-shadow: 0 6px 18px rgba(245, 158, 11, 0.22); animation: doorPulse 2.4s ease-in-out infinite alternate; }

@keyframes doorPulse {
  0% { transform: scale(1); border-color: #f59e0b; }
  100% { transform: scale(1.025); border-color: #d97706; box-shadow: 0 8px 24px rgba(217, 119, 6, 0.32); }
}

.door-num-badge { font-size: 11px; font-weight: 800; background: #f59e0b; color: #ffffff; padding: 3px 8px; border-radius: 8px; letter-spacing: 0.04em; margin-bottom: 8px; }
.door-icon { font-size: 42px; line-height: 1; margin: 6px 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12)); }
.door-action { font-size: 10.5px; font-weight: 800; color: #b45309; text-transform: uppercase; letter-spacing: 0.02em; }

/* Porta Vencedora (91% OFF) */
.door-card.winner .door-frame {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #047857;
  color: #ffffff;
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.45);
  animation: winnerGlow 1.2s ease infinite alternate;
}
@keyframes winnerGlow {
  0% { box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4); }
  100% { box-shadow: 0 12px 35px rgba(16, 185, 129, 0.7); }
}

.rev-sparkle { font-size: 20px; line-height: 1; }
.rev-discount { font-size: 28px; font-weight: 900; line-height: 1; color: #ffffff; margin: 2px 0; letter-spacing: -0.02em; text-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.rev-label { font-size: 13px; font-weight: 900; color: #fef08a; text-transform: uppercase; letter-spacing: 0.04em; }
.rev-tag { font-size: 9px; font-weight: 800; background: #ffffff; color: #047857; padding: 2px 6px; border-radius: 6px; margin-top: 6px; text-transform: uppercase; }

/* Outras Portas Reveladas (15%, 25%) */
.door-card.other-door .door-frame {
  background: #f1f5f9;
  border-color: #cbd5e1;
  opacity: 0.65;
  transform: scale(0.95);
  box-shadow: none;
}
.rev-other-disc { font-size: 22px; font-weight: 800; color: #64748b; }
.rev-other-label { font-size: 11px; font-weight: 600; color: #94a3b8; }

/* Caixa de Resultado / Vitória */
.doors-result { animation: popIn 0.45s cubic-bezier(0.34, 1.35, 0.64, 1) both; margin-top: 10px; }
@keyframes popIn {
  0% { opacity: 0; transform: translateY(18px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.doors-win-box { background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%); border: 2.5px solid #10b981; border-radius: 18px; padding: 18px 14px; text-align: center; box-shadow: 0 10px 28px rgba(16, 185, 129, 0.18); }
.doors-win-badge { font-size: 13.5px; font-weight: 800; color: #065f46; text-transform: uppercase; letter-spacing: 0.02em; }
.doors-win-percent { font-size: 34px; font-weight: 900; color: #059669; line-height: 1.1; margin: 4px 0; letter-spacing: -0.02em; text-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.doors-win-price { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 12px; font-size: 15px; }
.doors-win-price .old-p { text-decoration: line-through; color: #94a3b8; font-weight: 600; }
.doors-win-price .arr { color: #64748b; font-weight: 700; }
.doors-win-price .new-p { color: #0f172a; font-weight: 800; font-size: 17px; }
.doors-win-price .new-p b { color: #16a34a; font-size: 21px; }
.doors-win-timer { font-size: 12.5px; color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 7px 10px; font-weight: 600; margin-bottom: 14px; }
.doors-btn { width: 100%; font-size: 16px; padding: 16px 20px; }

/* Confetti */
.confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti-piece { position: absolute; top: -20px; opacity: 0.9; border-radius: 2px; animation: confettiFall linear forwards; }
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* Modal Pop-up Bônus */
.bonus-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.bonus-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.bonus-modal-card {
  background: #ffffff;
  border-radius: 24px;
  max-width: 420px;
  width: 100%;
  padding: 24px 20px 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  border: 2px solid #10b981;
  text-align: center;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.34, 1.35, 0.64, 1);
  max-height: 90vh;
  overflow-y: auto;
}
.bonus-modal-overlay.active .bonus-modal-card {
  transform: translateY(0) scale(1);
}
.bonus-badge-top {
  display: inline-block;
  background: #fef08a;
  color: #854d0e;
  font-weight: 900;
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  border: 1px solid #facc15;
}
.bonus-modal-header h3 {
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.modal-sub {
  font-size: 13px;
  color: #475569;
  line-height: 1.4;
  margin: 0 0 14px;
}
.bonus-list-modal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  margin-bottom: 16px;
}
.bonus-item-modal {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  padding: 10px 12px;
  border-radius: 14px;
}
.bonus-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.bonus-item-modal strong {
  display: block;
  font-size: 12.5px;
  color: #0f172a;
  line-height: 1.25;
}
.bonus-item-modal p {
  font-size: 11px;
  color: #64748b;
  margin: 2px 0 3px;
  line-height: 1.3;
}
.val-free {
  font-size: 11px;
  font-weight: 800;
  color: #16a34a;
}
.val-free del {
  color: #94a3b8;
  font-weight: 500;
  margin-right: 4px;
}
.bonus-modal-total {
  background: #ecfdf5;
  border: 1.5px dashed #10b981;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #065f46;
}
.total-agora {
  font-size: 15px;
  font-weight: 800;
  color: #047857;
  margin-top: 2px;
}
.modal-cta-btn {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #ffffff;
  font-weight: 900;
  font-size: 15px;
  padding: 16px;
  border-radius: 16px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 10px 25px rgba(22, 163, 74, 0.4);
  animation: modalPulse 1.8s infinite;
  letter-spacing: 0.01em;
}
@keyframes modalPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); box-shadow: 0 14px 30px rgba(22, 163, 74, 0.55); }
}
.modal-sec {
  font-size: 11px;
  color: #64748b;
  margin-top: 10px;
  font-weight: 600;
}