/* ============================================================
   MyShapeWay — /interativo3 (tema "nutricionista no bolso", bege quente)
   Vanilla CSS, mobile-first. Fluxo: home → medidas → meta+refeições+vendas.
   ============================================================ */

:root{
  /* tokens do v3 */
  --surface:#FFFFFF;
  --ink-soft:#6E6878;
  --brand:#7C3FE5;
  --brand-deep:#5E2BB8;
  --good:#2E9E6B;
  --warn:#E8A13D;
  --macro-p:#7C3FE5;
  --macro-c:#E8A13D;
  --macro-g:#4E7CD1;
  /* aliases: nomes antigos apontando pra nova paleta (não reescrever o CSS todo) */
  --bg:#FAF7F2;
  --card:#FFFFFF;
  --ink:#2B2733;
  --muted:#6E6878;
  --soft:#9A94A6;
  --line:#ECE7DF;
  --roxo:#7C3FE5;
  --roxo-2:#9a63ff;
  --verde:#2E9E6B;
  --laranja:#E8A13D;
  --sombra-card:0 10px 30px rgba(43,39,51,.08);
  --mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{font-family:var(--sans)}
button{font-family:inherit;cursor:pointer}
img,video,svg{display:block;max-width:100%}
/* títulos e números em Plus Jakarta Sans */
.title,.q-label,.meals-head,.hero-kcal,.macro-body .macro-g,.pbig,.scan-kcal,
.pname,.ph-title,.numchip,.rl-num{font-family:var(--display)}
.hero-kcal,.macro-body .macro-g,.pbig,.scan-kcal,.rl-num{font-variant-numeric:tabular-nums}

/* telas trocam com fade suave */
.screen{width:100%;animation:screenIn .45s cubic-bezier(.2,.8,.2,1) both}
.screen.out{animation:screenOut .3s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes screenOut{to{opacity:0;transform:translateY(-10px)}}
.fade-line{opacity:0;animation:fadeLine .5s ease forwards}
@keyframes fadeLine{to{opacity:1}}

.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--roxo);margin:0 0 14px}
.support{font-size:.98rem;color:var(--muted);margin:0 0 20px;line-height:1.5}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
[hidden]{display:none!important}

/* ---------- botão primário ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:420px;padding:16px 22px;border:none;border-radius:14px;
  font-size:1.04rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--roxo),var(--roxo-2));
  box-shadow:0 10px 26px rgba(124,63,229,.3);
  position:relative;overflow:hidden;transition:transform .12s ease,opacity .2s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.35;pointer-events:none}
.btn .sheen{position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);animation:sheen 3.4s ease-in-out infinite}
@keyframes sheen{0%,60%{left:-60%}100%{left:130%}}
.btn.ghost{background:#fff;color:var(--muted);border:1.5px solid var(--line);box-shadow:none;font-weight:600}
.btn.pulse{animation:btnPulse 2.2s ease-in-out infinite}
@keyframes btnPulse{0%,100%{box-shadow:0 10px 26px rgba(124,63,229,.28)}50%{box-shadow:0 10px 38px rgba(124,63,229,.5)}}

/* ---------- medidas (tela 2) ---------- */
.formcard{width:100%;max-width:420px;margin:0 auto;background:var(--card);border:1.5px solid var(--line);
  border-radius:18px;padding:22px 18px;text-align:left;box-shadow:0 8px 26px rgba(28,34,51,.06)}
.field{margin-bottom:14px}
.field label{display:block;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:6px;
  letter-spacing:.02em;text-transform:uppercase}
.field input,.field select{width:100%;padding:14px 14px;border-radius:12px;border:1.5px solid var(--line);
  background:#FBFBFE;color:var(--ink);font-size:1.05rem;font-family:inherit;font-weight:600;outline:none;
  appearance:none;-webkit-appearance:none}
.field input:focus,.field select:focus{border-color:var(--roxo);box-shadow:0 0 0 3px rgba(124,63,229,.12)}
.field input::placeholder{color:#B5BCCB;font-weight:500}
.field .err{display:none;font-size:.8rem;color:#D64545;margin-top:5px}
.field.bad input{border-color:#D64545}
.field.bad .err{display:block}
.selwrap{position:relative}
.selwrap::after{content:"▾";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--roxo);font-size:1rem;pointer-events:none}
.sexrow{display:flex;gap:10px}
.sexbtn{flex:1;padding:14px;border-radius:12px;border:1.5px solid var(--line);background:#FBFBFE;
  color:var(--ink);font-size:1rem;font-weight:700;transition:all .15s}
.sexbtn.sel{border-color:var(--roxo);background:rgba(124,63,229,.08);color:var(--roxo);
  box-shadow:0 0 0 3px rgba(124,63,229,.12)}

/* ---------- página 3 (meta + refeições + vendas, rola pra baixo) ---------- */
#page3{padding-bottom:40px}
.blk{width:100%;max-width:460px;margin:0 auto 22px;animation:screenIn .5s ease both}

/* loading ritual */
.ring-loader{position:relative;width:110px;height:110px;margin:6px auto 18px}
.ring-loader svg{width:100%;height:100%}
.rl-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.check-list{max-width:340px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:11px}
.check-list .ck{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--soft);
  opacity:.45;transition:all .3s}
.check-list .ck.on{opacity:1;color:var(--muted)}
.check-list .ck.done{opacity:1;color:var(--verde)}
.ck-dot{width:18px;height:18px;border-radius:50%;flex:0 0 18px;border:1.5px solid #CDD3E0;
  position:relative;transition:all .3s}
.ck.on .ck-dot{border-color:var(--roxo-2)}
.ck.done .ck-dot{background:var(--verde);border-color:var(--verde)}
.ck.done .ck-dot::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:.65rem;color:#fff;font-weight:800}

/* meta (kcal herói) */
.hero-kcal{font-size:clamp(3rem,15vw,4.6rem);font-weight:900;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;background:linear-gradient(135deg,var(--ink),var(--roxo));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-kcal-unit{font-size:1.05rem;color:var(--muted);font-weight:600;margin-top:2px}
.meta-caption{font-size:.95rem;color:var(--muted);margin:12px auto 0;line-height:1.5;max-width:380px}

/* macros */
.macro-block{width:100%;max-width:420px;margin:0 auto;display:flex;gap:16px;align-items:center;text-align:left;
  padding:12px 14px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;
  box-shadow:0 6px 18px rgba(28,34,51,.05);animation:screenIn .5s ease both;margin-bottom:10px}
.macro-ring{width:64px;height:64px;flex:0 0 64px}
.macro-body .macro-name{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);font-family:var(--mono)}
.macro-body .macro-g{font-size:1.45rem;font-weight:800;font-variant-numeric:tabular-nums}
.macro-body .macro-desc{font-size:.84rem;color:var(--muted);line-height:1.45;margin-top:3px}

/* pergunta refeições */
.q-label{font-size:1.25rem;font-weight:800;letter-spacing:-.01em;margin:0 0 14px}
.chiprow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.numchip{width:56px;height:56px;border-radius:16px;border:1.5px solid var(--line);background:var(--card);
  font-size:1.3rem;font-weight:800;color:var(--ink);transition:all .15s;
  box-shadow:0 4px 14px rgba(28,34,51,.05)}
.numchip.sel{border-color:var(--roxo);background:rgba(124,63,229,.08);color:var(--roxo);
  box-shadow:0 0 0 3px rgba(124,63,229,.14)}

/* barra de proporção P/C/G — mesma leitura do "Modo Queima" do app */
.mqbar-wrap{max-width:420px;margin:16px auto 0}
.mqbar-title{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);margin-bottom:6px}
.mqbar{display:flex;height:26px;border-radius:9px;overflow:hidden;background:#EDEFF5}
.mqbar .seg{display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden}
.mqbar .seg.p{background:var(--macro-p)}
.mqbar .seg.c{background:var(--macro-c)}
.mqbar .seg.g{background:var(--macro-g)}

/* cards de refeição */
.meals-head{font-size:1.2rem;font-weight:800;letter-spacing:-.01em;margin:4px 0 4px}
.meals-sub{font-size:.9rem;color:var(--muted);margin:0 0 14px}
/* compacto: menos altura, nome + kcal na mesma linha, macros por extenso embaixo */
.meal-card{background:var(--card);border:1.5px solid transparent;border-radius:14px;padding:10px 12px;
  margin-bottom:9px;text-align:left;animation:screenIn .4s ease both;
  background-image:linear-gradient(var(--card),var(--card)),linear-gradient(135deg,rgba(124,63,229,.45),rgba(31,167,106,.35));
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 6px 18px rgba(124,63,229,.08)}
.meal-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.meal-ico{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;background:rgba(124,63,229,.08)}
.meal-info{flex:1;min-width:0}
.mline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.meal-info .mname{font-size:.98rem;font-weight:800;line-height:1.2}
.meal-info .mkcal{font-size:.86rem;font-weight:800;color:var(--roxo);font-variant-numeric:tabular-nums}
/* largura total do card + fonte fluida = uma linha só, do iPhone SE ao desktop */
.mmacros{font-size:clamp(.6rem,2.6vw,.76rem);color:var(--muted);margin-top:6px;line-height:1.3;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.mplan-btn{flex:0 0 auto;padding:9px 12px;border-radius:10px;border:none;color:#fff;font-size:.8rem;font-weight:700;
  white-space:nowrap;
  background:linear-gradient(135deg,var(--roxo),var(--roxo-2));box-shadow:0 5px 14px rgba(124,63,229,.26);
  transition:transform .12s}
.mplan-btn:active{transform:scale(.96)}
/* mesma pulsação do botão de foto: sinaliza que é PRA CLICAR.
   Só no botão ativo — travado (🔒) e montado (✓) não pulsam. */
.mplan-btn:not(.locked):not(.done){animation:mplanPulse 1.5s ease-in-out infinite}
@keyframes mplanPulse{
  0%,100%{box-shadow:0 5px 14px rgba(124,63,229,.26),0 0 0 0 rgba(124,63,229,.45)}
  50%    {box-shadow:0 5px 14px rgba(124,63,229,.26),0 0 0 8px rgba(124,63,229,0)}
}
.mplan-btn.locked{background:#EDEFF5;color:var(--muted);box-shadow:none;border:1.5px solid var(--line)}
.mplan-btn.done{background:rgba(31,167,106,.12);color:var(--verde);box-shadow:none;border:1.5px solid rgba(31,167,106,.4)}

/* painel de montagem (dentro do card) */
.plan-panel{margin-top:12px;border-top:1.5px dashed var(--line);padding-top:12px}
.pp-hint{font-size:.88rem;color:var(--muted);margin:0 0 10px}
.pp-row{display:flex;gap:10px}
.pp-opt{flex:1;padding:12px;border-radius:12px;border:1.5px solid var(--line);background:#FBFBFE;
  font-size:.92rem;font-weight:700;color:var(--ink)}
.pp-opt:active{transform:scale(.97)}
/* gravando: o MESMO botão muda de cor (sem botão "parar") */
.pp-opt.rec{background:#FDEBEB;border-color:#D64545;color:#C03030;animation:recPulse 1.1s ease-in-out infinite}
@keyframes recPulse{50%{box-shadow:0 0 0 6px rgba(214,69,69,.15)}}
.pp-input{width:100%;margin-top:10px;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);
  background:#FBFBFE;color:var(--ink);font-size:.98rem;font-family:inherit;outline:none}
.pp-input:focus{border-color:var(--roxo)}
.rec-live{display:flex;align-items:center;gap:10px;margin-top:10px;justify-content:center}
.rec-dot{width:12px;height:12px;border-radius:50%;background:#D64545;animation:recBlink 1s steps(1) infinite}
@keyframes recBlink{50%{opacity:.25}}
.rec-timer{font-family:var(--mono);font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}
.proc-bar{height:6px;border-radius:6px;background:#EDEFF5;overflow:hidden;margin-top:12px}
.proc-fill{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--roxo),var(--roxo-2));
  transition:width .5s cubic-bezier(.4,0,.2,1)}
.proc-label{font-family:var(--mono);font-size:.8rem;color:var(--muted);margin-top:8px;min-height:1.2em}

/* resultado do prato (compacto) */
.food-list{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.food-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;
  border-radius:11px;background:#F9FAFD;border:1px solid var(--line)}
.food-row .fname{font-size:.92rem;font-weight:700}
.food-row .fgram{font-size:.78rem;color:var(--soft)}
.food-row .fport{font-size:.9rem;font-weight:800;color:var(--roxo);text-align:right}
.meal-selo{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(31,167,106,.08);
  border:1px solid rgba(31,167,106,.35);font-size:.88rem;color:var(--verde);font-weight:700}
/* linha "modo queima × armazenar" (mesma leitura do app) */
.queima-line{margin-top:12px}
.ql-bar{position:relative;height:8px;border-radius:8px;
  background:linear-gradient(90deg,#F0A868 0%,#F3D27A 50%,#1FA76A 100%)}
.ql-mark{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;
  border:3px solid var(--ink);transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(28,34,51,.25)}
.ql-legend{display:flex;justify-content:space-between;margin-top:5px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.ql-badge{display:inline-block;margin-top:9px;padding:6px 12px;border-radius:999px;
  font-size:.82rem;font-weight:800}
.ql-badge.queima{color:var(--verde);background:rgba(31,167,106,.12);border:1px solid rgba(31,167,106,.45)}
.ql-badge.no_caminho{color:#B4560F;background:rgba(237,137,54,.12);border:1px solid rgba(237,137,54,.45)}
/* "armazenar" NÃO usa vermelho (reservado a erro de sistema) — vai de âmbar */
.ql-badge.armazenar{color:#B4560F;background:rgba(232,161,61,.14);border:1px solid rgba(232,161,61,.5)}
.ql-tip{margin:8px 0 0;font-size:.86rem;line-height:1.45;color:var(--muted)}
.pp-err{margin-top:10px;font-size:.9rem;color:var(--muted)}

/* card "Liberar todas as refeições" (aparece só depois da 1ª montada) */
.unlock-card{max-width:440px;margin:6px auto 0;padding:22px 18px;border-radius:18px;text-align:center;
  background:linear-gradient(160deg,rgba(124,63,229,.07),rgba(31,167,106,.06));
  border:1.5px solid rgba(124,63,229,.35);box-shadow:0 12px 32px rgba(124,63,229,.12)}
.ul-price{margin-bottom:12px}
.ul-from{display:block;font-size:.66rem;color:var(--soft);letter-spacing:.06em}
.ul-price b{font-size:2.4rem;font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.ul-feats{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:7px;text-align:left;
  max-width:320px;margin-left:auto;margin-right:auto;margin-bottom:16px}
.ul-feats li{font-size:.9rem;color:var(--muted);padding-left:24px;position:relative}
.ul-feats li::before{content:"✓";position:absolute;left:0;color:var(--verde);font-weight:800}
.plan-cta.small{padding:11px;font-size:.9rem;margin-top:12px}

/* ---------- seção de vendas (tema claro) ---------- */
.sales-sec{border-top:1.5px solid var(--line);margin-top:8px;padding-top:24px}

/* rodapé fixo com o CTA — só existe na tela de vendas (body.has-fab) */
.unlock-fab{position:fixed;left:0;right:0;bottom:0;z-index:60;
  max-width:560px;margin:0 auto;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));
  display:flex;justify-content:center;pointer-events:none;
  background:linear-gradient(180deg,rgba(246,247,251,0),rgba(246,247,251,.97) 42%);
  transition:opacity .25s ease,transform .25s ease}
.unlock-fab .btn{margin:0;pointer-events:auto;padding:14px 20px;font-size:1rem}
.unlock-fab.off{opacity:0;transform:translateY(115%);pointer-events:none}
body.has-fab #stage{padding-bottom:104px}
.have-card{max-width:460px;margin:0 auto 18px;padding:18px;border-radius:16px;text-align:left;
  background:linear-gradient(160deg,rgba(31,167,106,.07),rgba(124,63,229,.06));
  border:1.5px solid rgba(31,167,106,.35)}
.have-card .win-title{font-size:1.02rem;font-weight:800;margin-bottom:10px}
.have-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.have-card li{font-size:.92rem;line-height:1.45;color:var(--muted);padding-left:24px;position:relative}
.have-card li::before{content:"✓";position:absolute;left:0;top:0;color:var(--verde);font-weight:800}
.have-card li b{color:var(--ink)}
.have-note{color:var(--soft);font-size:.84rem}
.win-sub{margin-top:12px;font-size:.92rem;font-weight:700;color:var(--verde)}
.promo-tag{display:inline-block;margin:0 auto 16px;padding:9px 16px;border-radius:999px;
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#B4560F;
  background:rgba(237,137,54,.1);border:1.5px dashed rgba(237,137,54,.6)}
/* cards de plano: compactos, preto e branco. Nome/de-por na esquerda,
   preço grande na direita, botão largo embaixo. */
.plans{display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px;margin:0 auto 14px}
.plan{position:relative;padding:13px 14px 12px;border-radius:14px;text-align:left;background:var(--card);
  border:1.5px solid var(--line);box-shadow:0 4px 14px rgba(28,34,51,.05)}
.plan.best{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 8px 22px rgba(28,34,51,.12)}
.plan .tag{position:absolute;top:-9px;left:13px;font-size:.6rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 10px;border-radius:999px;background:var(--ink);color:#fff}
.plan-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plan-left{min-width:0}
.plan-right{flex:0 0 auto;text-align:right}
.plan .pname{font-size:.98rem;font-weight:800;color:var(--ink);line-height:1.2}
.pbadge{display:inline-block;margin-top:3px;font-size:.66rem;font-weight:800;color:var(--ink);
  background:#F1F3F8;border:1px solid var(--line);padding:2px 8px;border-radius:999px}
.plan .pold{color:#E03131;font-size:.82rem;display:block;margin-top:3px;text-decoration:line-through;text-decoration-color:#E03131;text-decoration-thickness:2px}
.plan .pbig{font-size:1.55rem;font-weight:900;letter-spacing:-.02em;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.plan .pbig small{font-size:.8rem;font-weight:700;color:var(--muted)}
.plan .psub{font-size:.76rem;color:var(--soft);margin-top:3px}
/* !important: o hotmart-fb.min.css (widget) carrega depois e pinta o botão de verde */
.plan-cta{display:flex;align-items:center;justify-content:center;margin-top:11px;padding:11px;border-radius:10px;
  border:none!important;color:#fff!important;font-size:.92rem;font-weight:800;text-decoration:none;
  background:var(--ink)!important;box-shadow:0 5px 14px rgba(28,34,51,.2);
  position:relative;overflow:hidden}
.plan.trimestral .plan-cta{background:#fff!important;color:var(--ink)!important;
  border:1.5px solid var(--ink)!important;box-shadow:none}
.btn.hotmart-fb{background:linear-gradient(135deg,var(--roxo),var(--roxo-2))!important;color:#fff!important;border:none!important}
.guarantee-box{display:flex;gap:12px;align-items:flex-start;text-align:left;max-width:440px;margin:0 auto 14px;
  padding:14px 16px;border-radius:14px;background:var(--card);border:1.5px solid var(--line)}
.gbico{font-size:1.4rem}
.gbtitle{font-size:.98rem;font-weight:800}
.gbsub{font-size:.86rem;color:var(--muted);line-height:1.5;margin-top:2px}
.anchor-line{font-size:.9rem;color:var(--muted);margin:10px auto;max-width:420px;line-height:1.5}
.paynote{font-size:.8rem;color:var(--soft);margin:10px 0 0}
.vstack-light{max-width:440px;margin:18px auto;padding:18px;border-radius:16px;text-align:left;
  background:var(--card);border:1.5px solid var(--line);box-shadow:0 8px 24px rgba(28,34,51,.06)}
.vs-title{font-size:1.05rem;font-weight:800;margin-bottom:12px}
.vstack-light ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.vstack-light li{font-size:.92rem;line-height:1.45;color:var(--muted);padding-left:26px;position:relative}
.vstack-light li::before{content:"✓";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;
  background:rgba(31,167,106,.12);color:var(--verde);font-weight:800;font-size:.72rem;
  display:flex;align-items:center;justify-content:center}
.vstack-light li b{color:var(--ink)}
.vs-bonus{border-radius:13px;padding:14px;color:#fff;
  background:linear-gradient(130deg,#B8860B,#DAA520 55%,#F0C34E);box-shadow:0 8px 20px rgba(184,134,11,.3)}
.vs-bonus-tag{display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#8A6608;background:#fff;padding:3px 9px;border-radius:999px;margin-bottom:8px}
.vs-bonus-title{font-size:1rem;font-weight:800;line-height:1.2;margin-bottom:3px}
.vs-bonus-desc{font-size:.84rem;line-height:1.4;opacity:.97}
.faq-light{max-width:440px;margin:20px auto 0;display:flex;flex-direction:column;gap:8px;text-align:left}
.faq-light details{background:var(--card);border:1.5px solid var(--line);border-radius:13px;overflow:hidden}
.faq-light summary{padding:14px 16px;font-size:.95rem;font-weight:700;cursor:pointer;list-style:none}
.faq-light summary::-webkit-details-marker{display:none}
.faq-light summary::after{content:"+";float:right;color:var(--roxo);font-weight:800}
.faq-light details[open] summary::after{content:"−"}
.faq-light p{margin:0;padding:0 16px 14px;font-size:.88rem;color:var(--muted);line-height:1.55}

/* confete */
.confetti{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:0;animation:cfFall 1.8s ease-in forwards}
@keyframes cfFall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(105vh) rotate(540deg)}}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============================================================
   v2 — telas de transição, teste de foto, esteira e comparativo
   ============================================================ */

/* texto digitado + botão de setinha */
.type-line{text-align:center}
.type-cursor{display:inline-block;width:3px;height:1em;background:var(--roxo);
  margin-left:3px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.arrow-btn{max-width:220px;font-size:1.2rem;letter-spacing:.04em}

/* prova por perfil (antes/depois + depoimento) */
.combo-copy{font-size:1.02rem;line-height:1.55;color:var(--ink);max-width:440px;margin:0 auto 4px}
.combo-copy b{color:var(--roxo)}
.ba-photo{max-width:340px;margin:14px auto 0;border-radius:16px;overflow:hidden;
  border:1.5px solid var(--line);box-shadow:0 8px 24px rgba(28,34,51,.08)}
.ba-photo img{width:100%;height:auto;display:block}
.quote-card{max-width:440px;margin:12px auto 0;padding:14px 16px;border-radius:14px;text-align:left;
  background:var(--card);border:1.5px solid var(--line);font-size:.94rem;line-height:1.5;color:var(--muted)}

/* teste da foto */
/* moldura 9:16 — o clipe novo é 1080x1920 e a foto do prato é 788x1400:
   as duas mídias entram sem corte e sem tarja nessa proporção. */
.cam-wrap{width:min(290px, 33vh);margin:0 auto}
.cam-view{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#0b0d13}
.cam-photo{position:absolute;inset:0}
.cam-photo img{width:100%;height:100%;object-fit:cover}
/* mesma proporção da moldura → preenche exatamente, sem corte e sem tarja */
.cam-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0b0d13;
  opacity:0;transition:opacity .35s}
.cam-video.show{opacity:1}
.cam-corner{position:absolute;width:30px;height:30px;border:2.5px solid rgba(255,255,255,.9);z-index:3}
.cam-corner.tl{top:12%;left:9%;border-right:none;border-bottom:none;border-radius:6px 0 0 0}
.cam-corner.tr{top:12%;right:9%;border-left:none;border-bottom:none;border-radius:0 6px 0 0}
.cam-corner.bl{bottom:12%;left:9%;border-right:none;border-top:none;border-radius:0 0 0 6px}
.cam-corner.br{bottom:12%;right:9%;border-left:none;border-top:none;border-radius:0 0 6px 0}
.cam-view.playing .cam-corner{opacity:0;transition:opacity .3s}
.cam-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4}
.cam-flash.go{animation:camFlash .5s ease}
@keyframes camFlash{0%{opacity:0}18%{opacity:.95}100%{opacity:0}}
.cam-shutter{width:64px;height:64px;border-radius:50%;margin:14px auto 0;display:block;
  background:#fff;border:5px solid rgba(28,34,51,.14);background-clip:padding-box;
  box-shadow:0 4px 14px rgba(28,34,51,.18);
  transition:transform .1s ease,opacity .3s}
.cam-shutter.attn{animation:shutterPulse 1.5s ease-in-out infinite}
@keyframes shutterPulse{0%,100%{box-shadow:0 0 0 0 rgba(124,63,229,.45)}50%{box-shadow:0 0 0 14px rgba(124,63,229,0)}}
.cam-shutter:active{transform:scale(.92)}
.cam-shutter.off{opacity:.25;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:14px 0 0}
.chip{font-size:.82rem;font-weight:700;padding:6px 11px;border-radius:999px;
  background:rgba(31,167,106,.1);border:1px solid rgba(31,167,106,.4);color:var(--verde);
  animation:screenIn .3s ease both}
.scan-card{max-width:340px;margin:14px auto 0;padding:16px;border-radius:16px;
  background:var(--card);border:1.5px solid var(--line);box-shadow:0 8px 24px rgba(28,34,51,.06)}
.scan-kcal{font-size:1.7rem;font-weight:900;font-variant-numeric:tabular-nums;color:var(--ink)}
.scan-macros{font-size:.88rem;color:var(--muted);margin-top:4px}
.scan-macros b{color:var(--ink)}
.scan-fit{margin-top:10px;padding:10px 12px;border-radius:11px;font-size:.86rem;font-weight:600;line-height:1.45;
  background:rgba(31,167,106,.08);border:1px solid rgba(31,167,106,.35);color:var(--verde);text-align:left}
.scan-fit.warn{background:rgba(237,137,54,.1);border-color:rgba(237,137,54,.45);color:#B4560F}
.scan-fit.low{background:rgba(124,63,229,.08);border-color:rgba(124,63,229,.4);color:#5B2FB0}

/* esteira de antes/depois (velocidade constante) */
.mq-head{font-size:1.05rem;font-weight:800;margin:0 0 12px}
.mq-wrap{overflow:hidden;margin:0 -18px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;gap:12px;width:max-content;animation:mqRun calc(var(--n,8) * 3.4s) linear infinite}
.mq-wrap:hover .mq-track{animation-play-state:paused}
@keyframes mqRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-card{flex:0 0 150px;border-radius:14px;overflow:hidden;background:var(--card);
  border:1.5px solid var(--line);text-align:left}
.mq-card img{width:100%;height:150px;object-fit:cover;display:block}
.mq-meta{padding:8px 10px}
.mq-name{font-size:.82rem;font-weight:700;line-height:1.2}
.mq-cap{font-size:.78rem;font-weight:800;color:var(--roxo);margin-top:1px}

/* comparativo sem/com + como alcançar */
.cmp-box,.goal-box{max-width:440px;margin:0 auto 18px;padding:18px;border-radius:18px;background:#EFF1F7}
.cmp-title{font-size:1.15rem;font-weight:800;margin:0 0 14px}
.cmp-card{background:var(--card);border-radius:14px;padding:14px 16px;margin-bottom:12px;text-align:left}
.cmp-card.good{border:1.5px solid var(--roxo)}
.cmp-h{font-size:.98rem;font-weight:800;margin-bottom:10px}
.cmp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cmp-list li{position:relative;padding-left:32px;font-size:.92rem;line-height:1.4;color:var(--muted)}
.cmp-list li::before{position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800}
.cmp-list.bad li::before{content:"✕";background:rgba(214,69,69,.1);color:#D64545}
.cmp-list.ok li::before{content:"✓";background:rgba(31,167,106,.12);color:var(--verde)}
.goal-item{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;
  padding:13px 15px;margin-bottom:10px;text-align:left;font-size:.94rem;font-weight:700;line-height:1.35}
.gi-ico{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:#EFF1F7;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem}

/* cabeçalho do checkout + riscado maior */
.promo-head{max-width:440px;margin:0 auto 16px;padding:14px 16px;border-radius:14px;text-align:center;
  background:linear-gradient(135deg,rgba(237,137,54,.14),rgba(124,63,229,.12));
  border:1.5px dashed rgba(237,137,54,.6)}
.ph-title{font-size:1.02rem;font-weight:800;color:#B4560F}
.ph-sub{font-size:.88rem;color:var(--muted);margin-top:3px;line-height:1.4}
.plan .pold.big{font-size:1.12rem;font-weight:700}
.recap-meta{max-width:440px;margin:0 auto;padding:12px 16px;border-radius:14px;text-align:center;
  background:var(--card);border:1.5px solid var(--line);box-shadow:0 6px 18px rgba(28,34,51,.05)}
.recap-meta b{display:block;font-size:1.25rem;font-weight:900;color:var(--roxo);font-variant-numeric:tabular-nums}
.recap-meta span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}

/* nota abaixo do cabeçalho de preço */
.ph-nota{max-width:440px;margin:0 auto 16px;font-size:.95rem;font-weight:700;font-style:italic;color:var(--ink);line-height:1.45;text-align:center}

/* oferta de saída (última chance) */
.saida-wrap{position:fixed;inset:0;z-index:90;background:rgba(28,34,51,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeLine .25s ease both}
.saida-card{position:relative;width:100%;max-width:380px;background:var(--card);border-radius:20px;
  padding:26px 22px 22px;text-align:center;box-shadow:0 24px 60px rgba(28,34,51,.3);
  animation:screenIn .35s cubic-bezier(.2,.8,.2,1) both}
.saida-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border:none;background:transparent;
  color:var(--soft);font-size:1.6rem;line-height:1}
.saida-title{font-size:1.2rem;font-weight:800;line-height:1.3;margin:4px 0 10px;color:var(--ink)}
.saida-title b{color:var(--ink)}
.saida-precos{display:flex;align-items:baseline;justify-content:center;gap:10px}
.saida-precos s{font-size:1.05rem;color:#E03131;text-decoration-color:#E03131;text-decoration-thickness:2px}
.saida-precos b{font-size:2.1rem;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.saida-precos b small{font-size:.9rem;font-weight:700;color:var(--ink)}
.saida-sub{font-size:.94rem;font-weight:700;color:var(--ink);margin:12px 0 14px}
/* é <a>: sem sublinhado. E preto, igual aos cards de plano. */
.saida-card .btn{text-decoration:none;background:var(--ink)!important;
  box-shadow:0 6px 18px rgba(28,34,51,.24)}

/* checkout em modal nosso: barra de fechar SEMPRE visível acima do iframe.
   Sem ela, no celular o único X à vista é o do webview do Instagram. */
.co-wrap{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:var(--ink)}
.co-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;background:var(--ink)}
.co-x{border:none;background:#fff;color:var(--ink);font-size:.92rem;font-weight:800;
  padding:9px 18px;border-radius:999px;box-shadow:0 3px 12px rgba(0,0,0,.3)}
.co-x:active{transform:scale(.96)}
.co-safe{font-size:.74rem;font-weight:700;color:rgba(255,255,255,.85)}
.co-body{flex:1;min-height:0;background:#fff}
.co-body iframe{width:100%;height:100%;border:0;display:block}
body.co-open{overflow:hidden}

/* ---------- oferta de lançamento do anual (tela de planos) ---------- */
.of-abrir{display:block;width:100%;padding:18px 16px 16px;border-radius:14px;text-align:center;cursor:pointer;
  border:none;background:linear-gradient(135deg,var(--roxo),var(--roxo-2));color:#fff;font-family:inherit;
  position:relative;overflow:hidden;animation:btnPulse 2.2s ease-in-out infinite}
.of-abrir:active{transform:scale(.99)}
.of-abrir .of-gift{display:block;font-size:1.9rem;line-height:1;margin-bottom:6px;animation:ofGift 1.6s ease-in-out infinite}
@keyframes ofGift{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-4px) rotate(4deg)}}
.of-abrir .of-txt{display:block;font-size:1rem;font-weight:800;line-height:1.3}
.of-abrir .of-sub{display:block;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.85);margin-top:2px}
.of-abrir .of-cta{display:inline-block;margin-top:10px;padding:9px 18px;border-radius:999px;background:#fff;
  color:var(--roxo);font-size:.85rem;font-weight:800}
.of-timer{margin-top:10px;padding:8px 10px;border-radius:10px;background:rgba(224,49,49,.07);
  font-size:.8rem;font-weight:700;color:#B02525;text-align:center}
.of-timer b{font-variant-numeric:tabular-nums}
.of-expirou{margin-top:8px;font-size:.74rem;color:var(--soft);text-align:center}
.plan .pyear{font-size:.74rem;color:var(--soft);margin-top:3px}

/* transições em bolha de chat — o app "fala" (com indicador digitando…) */
.chat-sec{width:100%;max-width:440px;margin:0 auto}
.chat-row{display:flex;align-items:flex-end;gap:10px;margin-bottom:22px}
.chat-avatar{flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;
  box-shadow:0 6px 16px rgba(124,63,229,.28)}
.chat-bubble{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:20px 20px 20px 6px;padding:16px 18px;box-shadow:var(--sombra-card);
  min-height:24px;max-width:340px;animation:bubbleIn .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes bubbleIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.chat-msg{margin:0;font-size:1.04rem;line-height:1.55;color:var(--ink);text-align:left;
  animation:fadeLine .35s ease both}
.chat-msg b{color:var(--ink);font-weight:700}
.typing{display:inline-flex;gap:5px;align-items:center;height:18px}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--soft);
  animation:typingDot 1.1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes typingDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* ---------- microcopy do v3 (pontes e carimbos que o app "fala") ---------- */
.bridge-line{max-width:420px;margin:0 auto 14px;padding:12px 14px;border-radius:12px;
  background:rgba(124,63,229,.06);border:1px solid rgba(124,63,229,.16);
  font-size:.92rem;line-height:1.5;color:var(--ink);font-weight:500;text-align:center}
.q-sub{max-width:420px;margin:-6px auto 14px;font-size:.86rem;line-height:1.45;
  color:var(--ink-soft);text-align:center}
.scan-stamp{max-width:420px;margin:12px auto 0;font-size:.86rem;line-height:1.45;
  color:var(--ink-soft);font-style:italic;text-align:center}

/* ---------- card mensal único do v3 + desconto animado ---------- */
.plan.solo{position:relative;overflow:hidden;border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand),0 12px 30px rgba(124,63,229,.16)}
.plan.solo .save-badge{display:block;transform:translateY(-140%);opacity:0;
  margin:-2px -2px 10px;padding:9px 12px;border-radius:10px;text-align:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;
  font-size:.82rem;font-weight:700;letter-spacing:.01em;
  transition:transform .5s cubic-bezier(.2,.9,.2,1),opacity .4s ease}
.plan.solo .save-badge b{font-weight:800}
.plan.solo .save-badge.on{transform:translateY(0);opacity:1}
.plan.solo .pold{color:#B02525;font-size:.9rem;display:inline-block;position:relative;
  text-decoration:none;margin-bottom:2px}
.plan.solo .pold.struck::after{content:"";position:absolute;left:0;top:50%;height:2px;
  width:100%;background:#B02525;transform:scaleX(0);transform-origin:left;
  animation:strikeIn .45s ease forwards}
@keyframes strikeIn{to{transform:scaleX(1)}}
.plan.solo .pbig #molPrice{display:inline-block;transition:opacity .2s ease,transform .2s ease}
.plan.solo .pbig #molPrice.swap{opacity:0;transform:translateY(-6px)}
.plan.solo .pbig #molPrice.swap-in{animation:priceIn .3s cubic-bezier(.2,.9,.2,1) both}
@keyframes priceIn{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}

/* botão "voltar para minhas refeições" no topo da tela de planos */
.voltar-ref{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:9px 14px;
  border:1.5px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink-soft);font-family:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  box-shadow:0 4px 12px rgba(43,39,51,.05)}
.voltar-ref:active{transform:scale(.98)}

/* prova social rotativa na tela de preço (1 depoimento por vez, 6s cada) */
.rot-slot{display:flex;justify-content:center;margin:0 0 24px;min-height:264px}
.rot-item{flex:0 0 210px;animation:rotShow 6s ease both}
.rot-item img{height:210px}
@keyframes rotShow{0%{opacity:0;transform:translateY(8px) scale(.97)}10%{opacity:1;transform:none}86%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.rot-item{animation:none}}

/* balão flutuante de depoimento na tela de preço */
.dep-balao{position:fixed;left:14px;bottom:16px;z-index:60;max-width:272px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 16px 4px;
  padding:10px 14px;box-shadow:0 12px 32px rgba(43,39,51,.18);text-align:left;
  opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease;
  pointer-events:none}
.dep-balao.on{opacity:1;transform:none}
.dep-balao-stars{color:#F5A623;font-size:.7rem;letter-spacing:2px}
.dep-balao-text{margin:3px 0 4px;font-size:.82rem;line-height:1.42;color:var(--ink)}
.dep-balao-name{font-size:.72rem;font-weight:700;color:var(--ink-soft)}
@media (prefers-reduced-motion: reduce){.dep-balao{transition:opacity .35s ease;transform:none}}