/* ============================================================
   MyShapeWay — /interativo3 (tema "você escolhe, eu calculo", 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;
  /* paleta P/C/G ÚNICA do funil = a do app real (réplicas/afinar):
     P roxo · C verde · G laranja. Antes a barra da meta usava G azul e os
     anéis usavam P verde — três códigos de cor pra mesma coisa. */
  --macro-p:#7C3FE5;
  --macro-c:#22b573;
  --macro-g:#f0a13d;
  /* 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}
/* o brilho anima TRANSFORM (GPU), não `left` — animar left repinta a cada frame
   e, somado às outras animações infinitas da tela, travava o Safari. */
.btn .sheen{position:absolute;top:0;left:0;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-150%) skewX(-20deg);
  animation:sheen 3.4s ease-in-out infinite;will-change:transform}
@keyframes sheen{
  0%,60%{transform:translateX(-150%) skewX(-20deg)}
  100%  {transform:translateX(325%) skewX(-20deg)}
}
.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 */
/* card escuro do ritual de cálculo — mesma família do painel réplica do app:
   o momento "máquina calculando" pede cara de tecnologia */
.ritual-dark{background:#0b0d13;border-radius:20px;padding:24px 18px 20px;max-width:400px;
  margin:0 auto;box-shadow:0 14px 34px rgba(11,13,19,.28)}
.ritual-dark .rl-num{color:#fff}
.ritual-dark .check-list .ck{color:#8E93A3}
.ritual-dark .check-list .ck.on{color:#EDEAF2}
.ritual-dark .check-list .ck.done{color:#4CC58F}
.ritual-dark .ck-dot{border-color:#3A3F4E}
.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}
/* prova social girando durante o cálculo (depoimento ↔ antes/depois) —
   os estilos só existiam no CSS do funil antigo; aqui renderizava sem card */
.proof-mini{max-width:380px;margin:22px auto 0;padding:14px 16px;border-radius:14px;text-align:left;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sombra-card)}
.proof-mini-stars{color:var(--laranja);font-size:.85rem;letter-spacing:2px}
.proof-mini-text{font-size:.92rem;color:var(--ink);line-height:1.5;margin:8px 0 6px}
.proof-mini-name{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
/* card SEPARADO do antes/depois (foto inteira, sem corte, assinada) */
.proof-ba{max-width:380px;margin:10px auto 0;padding:10px 10px 12px;border-radius:14px;text-align:left;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sombra-card)}
.proof-ba img{width:100%;height:auto;border-radius:10px;display:block}
.proof-ba-name{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--soft);margin:0 0 8px}
.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;position:relative;
  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.

   ⚠️ NÃO animar box-shadow aqui: são 4 a 6 botões pulsando ao mesmo tempo, e
   box-shadow força repintura a cada frame (não vai pra GPU). No Safari desktop
   isso saturava o compositor e a tela PARAVA de pintar — parecia travada, mas o
   DOM estava vivo (rolar a página "descongelava"). O anel abaixo anima só
   transform+opacity num pseudo-elemento: mesmo efeito, custo de GPU. */
.mplan-btn:not(.locked):not(.done)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 2px rgba(124,63,229,.45);
  animation:mplanRing 1.5s ease-out infinite;will-change:transform,opacity}
@keyframes mplanRing{
  0%  {opacity:.55;transform:scale(1)}
  70% {opacity:0;  transform:scale(1.16)}
  100%{opacity:0;  transform:scale(1.16)}
}
.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}
/* a foto INTEIRA dispara a câmera, não só o botão — cursor de mão anuncia isso
   no desktop; depois do disparo (.playing) não há mais o que tocar */
.cam-view{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#0b0d13;
  cursor:pointer}
.cam-view.playing{cursor:default}
.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}
/* dica NA foto: quem não percebia que a tela esperava uma ação parava aqui.
   pointer-events:none pro toque atravessar e cair no .cam-view, que dispara.
   Pulso de 1.5s = o mesmo do .cam-shutter.attn, então os dois batem juntos. */
.cam-hint{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:7px;white-space:nowrap;pointer-events:none;
  background:rgba(255,255,255,.96);color:#2B2733;font-size:.88rem;font-weight:700;
  padding:9px 15px;border-radius:99px;box-shadow:0 6px 20px rgba(0,0,0,.4);
  animation:camHint 1.5s ease-in-out infinite;transition:opacity .3s}
.cam-hint i{font-style:normal;font-size:1.05rem;line-height:1}
@keyframes camHint{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
.cam-hint.off{opacity:0;animation:none}
.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)}
.nb{white-space:nowrap}
.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}
/* "abaixo da meta" é informação, não marca: azul-info (o roxo fica só pra ação) */
.scan-fit.low{background:rgba(78,124,209,.09);border-color:rgba(78,124,209,.4);color:#33589E}

/* 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}
/* ── telas PIX por cima do iframe — CAMUFLADAS no visual do checkout Hotmart
   (branco, título serifado escuro, botão verde, bordas neutras): a troca de
   tela não pode parecer mudança de site, senão gera desconfiança na hora H.
   Nada de roxo da marca aqui dentro. ── */
.pix-pane{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;
  display:flex;flex-direction:column;align-items:center;text-align:center;color:#191C1F;
  padding:26px 20px calc(26px + env(safe-area-inset-bottom,0px));animation:screenIn .4s ease}
/* título no serifado do checkout ("Dados pessoais") — Georgia aproxima bem */
.pix-hm-tit,.pix-ok{font-family:Georgia,'Times New Roman',serif;font-weight:700;
  font-size:1.35rem;color:#191C1F;letter-spacing:0}
.pix-hm-sub{margin:8px 0 0;font-size:.95rem;color:#5F5F5F}
.pix-wait{display:flex;align-items:center;gap:8px;margin:8px 0 16px;color:#8A6D3B;
  font-size:.92rem;font-weight:700}
.pix-wait i{width:10px;height:10px;border-radius:50%;background:#8A6D3B;
  animation:pixPulse 1.2s ease-in-out infinite}
@keyframes pixPulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.pix-qr{width:190px;height:190px;object-fit:contain;border:1px solid #D9D9D9;
  border-radius:8px;padding:8px;margin-bottom:14px;background:#fff}
.pix-code{width:100%;max-width:420px;background:#F7F7F5;border:1px dashed #C7C7C7;border-radius:8px;
  padding:12px 14px;font-family:var(--mono);font-size:.72rem;line-height:1.5;color:#3F3F3F;
  word-break:break-all;text-align:left;max-height:96px;overflow:hidden}
/* botão no VERDE do "Comprar agora" — sobrepõe o .btn roxo do funil */
.pix-pane .btn{background:#0C9C4A;box-shadow:0 2px 8px rgba(12,156,74,.25);border-radius:8px;
  font-family:inherit;font-weight:700}
.pix-pane .btn .sheen{display:none}
.pix-copy{max-width:420px;margin-top:12px}
.pix-timer{margin-top:12px;font-size:.92rem;font-weight:800;color:#191C1F;
  font-variant-numeric:tabular-nums}
.pix-timer.off{color:#c0392b}
.pix-nota{max-width:380px;margin:14px 0 0;font-size:.9rem;line-height:1.5;color:#5F5F5F}
.pix-passos{max-width:380px;margin:14px 0 0;padding:0 0 0 20px;text-align:left;
  font-size:.9rem;line-height:1.5;color:#5F5F5F}
.pix-passos li{margin:0 0 6px}
.pix-passos b{color:#1A1A1A}
.pix-zap{margin-top:14px;font-size:.9rem;color:#1B8755;text-decoration:none}
.pix-zap b{text-decoration:underline}
.pix-volta{margin-top:18px;border:none;background:none;color:#5F5F5F;font-size:.86rem;
  font-weight:600;cursor:pointer;text-decoration:underline;font-family:inherit}
.pix-pane--pago{justify-content:center}
.pix-pane--pago .pix-pago-ico{font-size:3rem;margin-bottom:8px}
.pix-pane--pago .pix-copy{text-decoration:none;display:block;width:100%}
/* faixa-aviso fixa no topo do modal — âmbar CHAMATIVO (a pedido do produtor:
   o creme sumia na paisagem). No estado "busca" ganha o mini-spinner verde. */
.pix-strip{background:#FFE566;color:#191C1F;border-bottom:2px solid #E8C93E;
  padding:10px 14px;font-size:.88rem;font-weight:700;line-height:1.4;text-align:center;
  animation:fadeLine .3s ease}
/* estado "busca": a ÚNICA mudança é a bolinha girando — cor e frase ficam */
.pix-minispin{display:inline-block;width:13px;height:13px;border:2px solid #E8C93E;
  border-top-color:#191C1F;border-radius:50%;margin:0 7px -2px 0;vertical-align:baseline;
  animation:pixSpin .9s linear infinite}
@keyframes pixSpin{to{transform:rotate(360deg)}}

/* ---------- 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") ---------- */
/* caixa de fala em NEUTRO quente — o roxo saturado é exclusivo dos CTAs */
.bridge-line{max-width:420px;margin:0 auto 14px;padding:12px 14px;border-radius:12px;
  background:#F4F0E9;border:1px solid var(--line);
  font-size:.92rem;line-height:1.5;color:var(--ink);font-weight:500;text-align:center}
/* a proporção apontando pro sonho: peso-alvo + data logo após a revelação */
.meta-destino{max-width:420px;margin:0 auto 12px;font-size:.98rem;line-height:1.5;
  color:var(--ink);text-align:center}
.meta-destino b{color:var(--brand)}
.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}
/* risco do preço-âncora: estático (a animação de "desconto ao vivo" saiu) */
.plan.solo .pold.struck::after{content:"";position:absolute;left:0;top:50%;height:2px;
  width:100%;background:#B02525}
/* economia embaixo do preço: por dia + total no ano */
.plan-econ{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);
  font-size:.8rem;line-height:1.4;color:var(--muted);text-align:center}
.plan-econ b{color:var(--ink);font-weight:800}

/* 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 na tela de preço: UMA, parada, logo abaixo do valor */
#provaSocial{margin-top:26px}
.prova-uma{display:flex;justify-content:center;margin:0 0 24px}
.prova-uma .mq-card{flex:0 0 210px}
.prova-uma .mq-card img{height:210px}

/* resumo do plano montado, no topo da tela de preço */
.plano-prato{max-width:440px;margin:0 auto 16px;padding:14px 16px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);text-align:left;
  box-shadow:0 6px 18px rgba(43,39,51,.06)}
.pp-cap{font-size:.8rem;font-weight:700;color:var(--soft)}
.plano-prato .food-list{margin-top:8px}

/* prova de variedade: a mesma meta com três comidas opostas */
.var-box{max-width:440px;margin:0 auto 16px;padding:16px;border-radius:16px;
  background:#EFF1F7;border:1px solid var(--line);text-align:center}
.var-head{font-size:.92rem;line-height:1.45;color:var(--muted)}
.var-head b{color:var(--ink);font-weight:800}
.var-row{display:flex;gap:8px;margin:12px 0 10px}
.var-card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 6px;border-radius:12px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 4px 12px rgba(43,39,51,.05)}
.var-ico{font-size:1.5rem;line-height:1}
.var-nome{font-size:.78rem;font-weight:700;color:var(--ink);line-height:1.25}
.var-foot{font-size:.86rem;font-weight:700;color:var(--roxo)}

/* custo de adiar: uma linha, logo abaixo do card de preço */
.adiar-line{max-width:440px;margin:12px auto 0;font-size:.9rem;line-height:1.45;
  color:var(--muted);text-align:center}
.adiar-line b{color:var(--ink);font-weight:800}

/* garantia: saiu da linha cinza e virou bloco com peso próprio */
/* garantia: é o antídoto do risco na hora da decisão — precisa SALTAR aos olhos */
.garantia-box{max-width:440px;margin:18px auto 0;padding:20px 18px;border-radius:18px;
  display:flex;align-items:center;gap:14px;text-align:left;
  background:linear-gradient(180deg,rgba(46,158,107,.14),rgba(46,158,107,.06));
  border:2px solid rgba(46,158,107,.45);box-shadow:0 8px 24px rgba(46,158,107,.14);
  font-size:1.02rem;line-height:1.5;color:var(--ink)}
.garantia-box b{color:var(--verde);font-weight:800;font-size:1.14rem;
  display:block;margin-bottom:2px;font-family:var(--display)}
.gb-ico{font-size:2.1rem;line-height:1;flex:0 0 auto}

/* folha de saída: sobe de baixo quando a pessoa recua do checkout.
   Prefixo `desp-` de propósito: o bloco `.saida-*` acima é da oferta de saída
   antiga (código legado do v2) e as duas colidiam. */
/* SEGURANÇA: enquanto não estiver aberta (.on), a folha NÃO captura clique.
   Sem isto, se o .on falhar a tela inteira fica coberta por uma camada
   transparente e a página trava — nenhum botão responde (já aconteceu). */
.desp-wrap{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;
  justify-content:center;background:rgba(28,24,36,0);transition:background .3s ease;
  pointer-events:none}
.desp-wrap.on{background:rgba(28,24,36,.45);pointer-events:auto}
.desp-sheet{width:100%;max-width:480px;padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  border-radius:22px 22px 0 0;background:var(--bg);text-align:left;
  box-shadow:0 -14px 40px rgba(43,39,51,.22);
  transform:translateY(100%);transition:transform .34s cubic-bezier(.2,.9,.2,1)}
.desp-wrap.on .desp-sheet{transform:none}
.desp-title{font-family:var(--display);font-size:1.2rem;font-weight:800;
  letter-spacing:-.01em;margin-bottom:12px;color:var(--ink)}
.desp-msg{margin:0 0 10px;font-size:.95rem;line-height:1.5;color:var(--muted)}
/* ── pop do bônus (Substituição de Alimentos) na chegada à página de vendas ── */
.bonus-wrap{position:fixed;inset:0;z-index:70;background:rgba(23,20,31,.5);display:flex;
  align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .3s ease}
.bonus-wrap.on{opacity:1}
.bonus-sheet{width:100%;max-width:380px;max-height:86vh;overflow-y:auto;background:var(--card);
  border-radius:20px;padding:22px 18px;box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:center}
.bonus-msg{font-size:.98rem;line-height:1.55;color:var(--ink);margin:0 0 14px}
.bonus-msg b{color:var(--brand)}
/* passo único: o print é o argumento, o texto só legenda — por isso menor */
.bonus-msg.mini{font-size:.88rem;line-height:1.5;margin:0 0 16px}
.btn.bonus-mini{width:auto;padding:11px 26px;font-size:.92rem}
.bonus-img{width:100%;height:auto;border-radius:12px;margin:0 0 14px;display:block;
  border:1px solid var(--line)}
/* passo único: o print é alto (captura de tela inteira) e empurrava o botão
   pra fora do cartão — quem não rolasse não via o "Adicionar bônus". Teto de
   altura + topo ancorado: aparece a parte que explica a função, botão à vista. */
.bonus-sheet .bonus-img{max-height:46vh;object-fit:cover;object-position:top}
.bonus-check{width:76px;height:76px;margin:8px auto 12px;border-radius:50%;background:#10b981;
  display:flex;align-items:center;justify-content:center;
  animation:bonusPop .45s cubic-bezier(.2,1.4,.4,1)}
.bonus-check i{font-style:normal;color:#fff;font-size:2.2rem;font-weight:800}
.bonus-ok{font-family:var(--display);font-size:1.12rem;font-weight:800;color:var(--ink);margin:0}
@keyframes bonusPop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
.desp-msg b{color:var(--ink);font-weight:700}
.desp-sheet .btn{margin-top:8px}
.desp-x{display:block;position:static;width:100%;height:auto;margin-top:12px;padding:8px;
  border:none;background:none;color:var(--soft);font-family:inherit;font-size:.88rem;
  line-height:1.3;text-decoration:underline}
body.desp-open{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  .desp-sheet{transition:none;transform:none}
  .desp-wrap{transition:none}
}

/* textos de objeção: saíram de ANTES do preço e viraram blocos no fim da tela */
.obj-stack{max-width:440px;margin:26px auto 0;display:flex;flex-direction:column;gap:14px}
.obj-msg{margin:0;padding:16px 18px;border-radius:16px 16px 16px 4px;text-align:left;
  background:var(--surface);border:1px solid var(--line);
  font-size:.98rem;line-height:1.55;color:var(--ink);
  box-shadow:0 6px 18px rgba(43,39,51,.06)}

/* ---------- dica flutuante "escolha uma refeição" (some sozinha) ---------- */
.dica-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);z-index:70;
  width:calc(100% - 32px);max-width:380px;display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-radius:16px;text-align:left;pointer-events:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;
  box-shadow:0 14px 34px rgba(124,63,229,.34);
  font-size:.92rem;line-height:1.4;opacity:0;transition:opacity .35s ease,transform .35s ease}
.dica-toast.on{opacity:1;transform:translate(-50%,0)}
.dica-toast b{font-weight:800}
.dt-ico{font-size:1.3rem;line-height:1;flex:0 0 auto}

/* ---------- antes+depois rotativo (troca a cada 6s) ---------- */
.rot-item{animation:rotShow 6s ease both}
@keyframes rotShow{0%{opacity:0;transform:translateY(8px) scale(.97)}8%{opacity:1;transform:none}
  90%{opacity:1}100%{opacity:.35}}

/* ---------- fechamento: 2º card de preço no fim da página ---------- */
.fecha-oferta{margin-top:30px;padding-top:24px;border-top:1.5px dashed var(--line)}
.fo-title{font-family:var(--display);font-size:1.2rem;font-weight:700;text-align:center;
  margin-bottom:12px;color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  .dica-toast{transition:opacity .3s ease;transform:none}
  .dica-toast.on{transform:none}
  .rot-item{animation:none}
}

/* ---------- seletor de planos (banner de garantia + 3 rádios + CTA único) ---------- */
.selwrap-planos{max-width:440px;margin:6px auto 0}
.gar-banner{display:flex;gap:12px;align-items:flex-start;text-align:left;
  background:rgba(46,158,107,.10);border:1.5px solid rgba(46,158,107,.35);
  border-radius:16px;padding:14px 16px}
.gar-ico{font-size:1.5rem;line-height:1;margin-top:2px}
.gar-txt{font-size:.92rem;line-height:1.45;color:var(--good)}
.gar-txt b{display:block;font-family:var(--display);font-size:1.02rem;margin-bottom:2px}
.gar-sub{margin:10px 0 12px;font-size:.85rem;color:var(--ink-soft);text-align:center}
/* topo pessoal da tela de preço */
.plano-pronto{width:100%;max-width:420px;margin:0 auto 16px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:15px 17px;text-align:left;
  box-shadow:var(--sombra-card)}
.pl-tit{font-family:var(--display);font-size:1.05rem;font-weight:700;margin-bottom:8px}
.pl-linha{font-size:.9rem;line-height:1.5;color:var(--ink);margin:4px 0}
.pl-linha b{font-variant-numeric:tabular-nums}
/* selo / custo-dia dos planos */
.sc-flag{position:absolute;top:-9px;right:14px;background:var(--brand);color:#fff;
  font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px}
.sel-dia{margin:10px 0 0;font-size:.88rem;color:var(--muted);text-align:center}
.sel-dia b{color:var(--ink)}
.selcard{position:relative}
.selcards{display:flex;flex-direction:column;gap:10px}
.selcard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:16px;
  padding:14px 14px;font-family:inherit;box-shadow:var(--sombra-card);
  transition:border-color .15s,box-shadow .15s}
.selcard:active{transform:scale(.99)}
.selcard .sc-radio{flex:0 0 22px;width:22px;height:22px;border-radius:50%;
  border:2px solid #C9C4CF;background:#fff;transition:all .15s;position:relative}
.selcard.sel{border-color:var(--brand);box-shadow:0 0 0 1.5px var(--brand),var(--sombra-card)}
.selcard.sel .sc-radio{border-color:var(--brand);background:var(--brand)}
.selcard.sel .sc-radio::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.sc-main{flex:1;min-width:0}
.sc-rotulo{display:block;font-size:.86rem;color:var(--ink-soft);font-weight:600}
.sc-preco{display:block;font-family:var(--display);font-weight:700;font-size:1.5rem;
  color:var(--ink);line-height:1.2;font-variant-numeric:tabular-nums}
.sc-preco small{font-size:.85rem;font-weight:600;color:var(--ink-soft)}
/* âncora riscada (preço cheio) em linha própria acima do preço com desconto —
   inline empurrava o preço grande pra duas linhas */
.sc-de{display:block;font-size:.85rem;font-weight:600;color:var(--soft);
  text-decoration:line-through;line-height:1.1;margin-bottom:1px}
/* equivalente mensal do 6/12 meses — mesmo tamanho e peso do preço riscado.
   nowrap porque em tela de 320 px a caixa tem 92 px e o texto pede 101: sem ele
   partia em "(R$" / "19,93/mês)". Os 9 px de sobra caem na folga antes do selo. */
.sc-total{display:block;font-size:.85rem;font-weight:600;color:var(--soft);line-height:1.2;margin-top:1px;
  white-space:nowrap}
.sc-badge{flex:0 0 auto;align-self:center;background:#1B2B55;color:#BBD3FF;
  font-size:.78rem;font-weight:700;padding:7px 12px;border-radius:999px;white-space:nowrap}
.selcta{margin-top:14px}
.sel-foot{margin:10px 0 0;font-size:.84rem;color:var(--ink-soft);text-align:center}

/* ---------- VSL + cronômetro de liberação ---------- */
.vsl-wrap{position:relative;max-width:330px;margin:0 auto 14px}
.vsl-video{width:100%;aspect-ratio:9/16;display:block;border-radius:18px;background:#000;
  box-shadow:0 14px 38px rgba(43,39,51,.22);object-fit:cover}
.vsl-unmute{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border:none;border-radius:999px;padding:14px 22px;cursor:pointer;
  background:rgba(20,16,26,.82);color:#fff;font-family:var(--display);
  font-size:1rem;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(2px)}
.vsl-unmute:active{transform:translate(-50%,-50%) scale(.96)}
.vsl-timer{max-width:330px;margin:0 auto 18px;padding:10px 14px;border-radius:12px;
  background:rgba(232,161,61,.12);border:1.5px solid rgba(232,161,61,.45);
  font-size:.92rem;font-weight:600;color:#8A5A13;text-align:center}
.vsl-timer b{font-family:var(--display);font-variant-numeric:tabular-nums}
.oferta-oculta{display:none}

/* ---------- E2a: peso-alvo + ritmo (gráfico das 3 curvas) ---------- */
.alvo-card{width:100%;max-width:420px;margin:0 auto 14px;background:var(--card);
  border:1.5px solid var(--line);border-radius:18px;padding:18px 16px;box-shadow:var(--sombra-card)}
.alvo-lbl{display:block;font-size:.8rem;font-weight:700;color:var(--muted);
  letter-spacing:.02em;text-transform:uppercase;margin-bottom:10px}
.alvo-row{display:flex;align-items:center;justify-content:center;gap:14px}
.alvo-pm{width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:1.5px solid var(--line);
  background:#FBFAF8;color:var(--roxo);font-size:1.5rem;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:transform .12s}
.alvo-pm:active{transform:scale(.94)}
.alvo-val{display:flex;align-items:baseline;gap:4px}
.alvo-val input{width:96px;border:none;background:none;outline:none;text-align:right;
  font-family:var(--display);font-size:2.3rem;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.alvo-val input::-webkit-outer-spin-button,.alvo-val input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.alvo-val span{font-size:1.05rem;font-weight:700;color:var(--ink-soft)}
.go-hint{margin:8px 0 0;font-size:.8rem;color:var(--soft);text-align:center}
.alvo-piso{margin-top:5px;font-size:.78rem;color:var(--soft)}
.alvo-piso b{color:var(--muted);font-weight:700}
.alvo-delta{margin-top:8px;font-size:.9rem;color:var(--ink-soft)}
.alvo-delta b{color:var(--ink)}
/* manchete do peso-alvo: a data de chegada como protagonista */
.alvo-chegada{font-family:var(--display);font-size:1.22rem;font-weight:700;color:var(--ink);
  margin:2px 0 8px;text-align:center;letter-spacing:-.01em}
.alvo-chegada b{color:var(--brand)}
.graf-wrap{width:100%;max-width:420px;margin:0 auto 12px}
.graf-wrap svg{width:100%;height:auto;display:block}
.ritmos{display:flex;flex-direction:column;gap:10px;width:100%;max-width:420px;margin:0 auto}
.ritmo{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px 13px;
  font-family:inherit;box-shadow:0 4px 14px rgba(43,39,51,.05);transition:border-color .15s,box-shadow .15s}
.ritmo:active{transform:scale(.99)}
.ritmo.sel{border-color:var(--brand);box-shadow:0 0 0 1.5px var(--brand),0 4px 14px rgba(124,63,229,.12)}
.ri-dot{flex:0 0 12px;width:12px;height:12px;border-radius:50%;opacity:.45}
.ritmo.sel .ri-dot{opacity:1;box-shadow:0 0 0 4px rgba(124,63,229,.14)}
.ri-main{flex:1;min-width:0}
.ri-nome{display:block;font-family:var(--display);font-size:1rem;font-weight:700;color:var(--ink)}
/* subtítulo em linha própria — quebrava no meio ("sem pressa, sem / sofrimento") */
.ri-nome small{display:block;font-weight:500;color:var(--ink-soft);font-size:.72rem;white-space:nowrap}
.ri-kg{display:block;font-size:.84rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
/* a DATA de chegada é o que vende a tela — hierarquia invertida: data grande */
.ri-data{flex:0 0 auto;text-align:right;font-size:.72rem;color:var(--soft);line-height:1.3}
.ri-data b{display:block;font-size:.98rem;color:var(--ink);font-weight:800;white-space:nowrap}
.ritmo.sel .ri-data b{color:var(--brand)}

/* ---------- demo em 3 etapas (funil v2) ---------- */
.demo-passo{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand);margin-bottom:10px}
.demo-titulo{font-size:1.15rem;line-height:1.32;max-width:420px;margin:0 auto 16px}
.demo-tela{width:100%;max-width:290px;margin:0 auto 20px;border-radius:22px;overflow:hidden;
  background:#0b0d13;box-shadow:0 14px 38px rgba(43,39,51,.22);border:1px solid var(--line)}
.demo-video{width:100%;height:auto;display:block}
.demo-cta{max-width:420px}
.demo-note{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted);margin:12px auto 0}

/* ---------- etapa 1 interativa: réplica do painel do webapp ----------
   Mesmas cores/raios dos cards reais do Dashboard (dash2-meal-card e
   dash2-mealp-b), pra pessoa reconhecer o app quando entrar de verdade. */
/* max-width em px COMPUTADOS: o zoom:.84 encolhe o render depois. Com 340 a
   réplica saía com 285 px numa faixa útil de 335 no celular — sobrava fundo dos
   dois lados. 400 × .84 = 336: ocupa a tela toda sem mudar escala nenhuma. */
.rep-panel{width:100%;max-width:400px;zoom:.84;margin:0 auto;background:#f3f4f6;border:1px solid var(--line);
  border-radius:22px;padding:12px 10px 4px;box-shadow:0 14px 38px rgba(43,39,51,.14);text-align:left}
.rep-top{font-size:.8rem;color:#6b7280;text-align:center;margin:2px 0 10px}
.rep-top b{color:#111827}
.rep-card{background:#fff;border-radius:14px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,.06);
  margin-bottom:10px;transition:opacity .4s,box-shadow .4s}
.rep-head{font-size:.95rem;font-weight:800;color:#111827;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-bottom:8px}
.rep-kcal{color:#6b7280;font-weight:700}
.rep-kcal b{font-variant-numeric:tabular-nums;font-weight:700}
.rep-row{display:flex;align-items:center;gap:8px}
.rep-icon{width:44px;height:44px;border-radius:14px;font-size:28px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0}
/* botões idênticos aos do app; inertes por padrão — só o .pulse recebe toque */
.rep-b{flex:1;border:none;font-weight:800;border-radius:10px;font-size:.8rem;padding:10px 0;text-align:center;
  white-space:nowrap;font-family:inherit;pointer-events:none;-webkit-tap-highlight-color:transparent}
.rep-b--pular{background:#fff7ed;color:#c2712c}
.rep-b--reg{background:#ecfdf5;color:#059669}
.rep-b--plan{background:#eff6ff;color:#2563eb}
.rep-b.pulse{pointer-events:auto;cursor:pointer;position:relative}
.rep-b.pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 2px rgba(194,113,44,.55);
  animation:mplanRing 1.5s ease-out infinite;will-change:transform,opacity}
.rep-skipped{opacity:.6}
.rep-skipped .rep-b--pular,.rep-b.off{background:#f3f4f6;color:#6b7280}
.rep-recebeu{box-shadow:0 0 0 1.5px #10b981,0 2px 8px rgba(0,0,0,.06)}
.rep-abateu{box-shadow:0 0 0 1.5px #c2712c,0 2px 8px rgba(0,0,0,.06)}
.rep-reg{background:#ecfdf5;box-shadow:inset 3px 0 0 #10b981,0 2px 8px rgba(0,0,0,.06)}
.rep-reg .rep-b--reg{background:#d1fae5}
.rep-plus,.rep-minus{display:none;margin-left:6px;font-size:.72rem;font-weight:800;
  border-radius:99px;padding:2px 8px;vertical-align:1px}
.rep-plus{background:#ecfdf5;color:#059669}
.rep-minus{background:#fff7ed;color:#c2712c}
.rep-plus.on,.rep-minus.on{display:inline-block;animation:repPlus .5s ease-out}
@keyframes repPlus{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:none}}
.rep-msg{font-size:.95rem;line-height:1.5;color:var(--ink);max-width:400px;margin:16px auto 14px}
/* pulso na cor do botão vivo: verde no "Registrar", azul no "Planejar" */
.rep-b--reg.pulse::after{box-shadow:0 0 0 2px rgba(5,150,105,.5)}
.rep-b--plan.pulse::after{box-shadow:0 0 0 2px rgba(37,99,235,.5)}
/* itens do prato planejado (etapa 3) */
.rep-itens{margin-top:8px;font-size:.76rem;font-weight:600;color:#059669;text-align:left}
/* legenda 🎙️ por cima do clipe do jantar: mostra o que o áudio está dizendo */
.jantar-tela{position:relative}
/* legenda do áudio: fica no meio-superior do vídeo, logo ACIMA do modal de
   gravação (que é centralizado ~44-66%), pra ficar perto do microfone sem
   sobrepor. Bonequinho falando + onda de som deixam claro que é áudio. */
.jantar-legenda{position:absolute;left:14px;right:14px;top:29%;display:flex;gap:9px;align-items:center;
  background:rgba(255,255,255,.97);color:#111827;border-radius:14px;padding:10px 12px;
  font-size:.82rem;line-height:1.4;text-align:left;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.jl-avatar{font-size:26px;flex-shrink:0;animation:jlFala .6s ease-in-out infinite alternate}
@keyframes jlFala{0%{transform:scale(1)}100%{transform:scale(1.12) rotate(-4deg)}}
.jl-body{flex:1;min-width:0}

/* ── TELA "AFINAR PRATO" — recriação da tela real do webapp, com dados do solver ── */
.ap-loading{text-align:center;color:var(--brand);font-weight:700;font-size:.95rem;padding:28px 15px;
  animation:apPulse 1.1s ease-in-out infinite}
@keyframes apPulse{0%,100%{opacity:.55}50%{opacity:1}}
/* mesma conta do .rep-panel: 400 computados × zoom .84 = 336 renderizados */
.ap-screen{width:100%;max-width:400px;zoom:.84;margin:8px auto 0;background:#fff;border-radius:20px;padding:16px 15px 14px;
  text-align:left;box-shadow:0 16px 44px rgba(43,39,51,.18);border:1px solid #ece7df;color:#111827;
  animation:apScreenIn .4s ease-out}
@keyframes apScreenIn{0%{opacity:0;transform:translateY(10px) scale(.98)}100%{opacity:1;transform:none}}
.ap-screen.ap-out{animation:apScreenOut .34s ease-in forwards}
@keyframes apScreenOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px) scale(.97)}}
.ap-head{display:flex;align-items:center;gap:6px}
.ap-title{font-weight:800;font-size:1.02rem;flex-shrink:0}
.ap-avail{flex:1;min-width:0;color:var(--brand);font-weight:700;font-size:.66rem;text-align:center;white-space:nowrap}
.ap-montar{border:1.5px solid var(--brand);color:var(--brand);border-radius:99px;font-size:.6rem;font-weight:800;
  letter-spacing:.05em;padding:4px 10px;flex-shrink:0}
/* cabeçalho modo REGISTRAR (brigadeiro): título+subtítulo à esquerda, REGISTRAR em cima e kcal grande à direita */
.ap-head.reg{align-items:flex-start;justify-content:space-between}
.ap-head-l{display:flex;flex-direction:column}
.ap-head-l .ap-title{font-size:1.08rem}
.ap-sub{color:#8b90a0;font-size:.78rem;margin-top:1px}
.ap-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ap-bigk{color:var(--brand);font-weight:800;font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums}
.ap-row{display:flex;align-items:center;gap:8px;margin-top:11px}
.ap-step{width:38px;height:36px;border-radius:11px;background:#f1f0f4;color:#374151;font-weight:800;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ap-total{width:76px;height:36px;border-radius:11px;border:1px solid #e5e2ea;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:1.02rem;font-variant-numeric:tabular-nums}
.ap-recalc{flex:1;height:36px;border-radius:11px;background:#f1f0f4;color:#374151;font-weight:700;font-size:.82rem;
  display:flex;align-items:center;justify-content:center;gap:5px}
.ap-noprato{color:#0e9b6c;font-weight:800;font-size:.86rem;margin:11px 0 2px}
.ap-queima-lbl{text-align:center;font-weight:800;font-size:.82rem;margin:9px 0 5px}
.ap-queima.queima .ap-queima-lbl{color:#0e9b6c}
.ap-queima.no_caminho .ap-queima-lbl{color:#C9701E}
.ap-queima.armazenar .ap-queima-lbl{color:#c0392b}
.ap-queima-bar{position:relative;height:9px;border-radius:99px;
  background:linear-gradient(90deg,#f0a13d 0%,#f5d84e 45%,#33c06f 100%)}
.ap-queima-knob{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:#fff;
  border:2px solid rgba(0,0,0,.1);box-shadow:0 2px 6px rgba(0,0,0,.28);transform:translate(-50%,-50%)}
.ap-tip{background:#f4f3f6;border-radius:12px;padding:11px 13px;color:#4b5563;font-size:.8rem;line-height:1.4;
  text-align:center;margin:9px 0 4px}
.ap-foods{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.ap-food{background:#fbfafc;border:1px solid #efedf3;border-left-width:4px;border-radius:14px;padding:9px 12px;
  animation:apFoodIn .42s ease-out backwards}
@keyframes apFoodIn{0%{opacity:0;transform:translateY(9px)}100%{opacity:1;transform:none}}
.ap-food.green{border-left-color:#25b06a}
.ap-food.amber{border-left-color:#f0a13d}
.ap-food-top{display:flex;align-items:flex-start;gap:8px}
.ap-food-id{flex:1;min-width:0}
.ap-food-name{font-weight:800;font-size:.96rem}
.ap-food-med{color:#8b90a0;font-size:.74rem;margin-top:1px;font-variant-numeric:tabular-nums}
.ap-food-kcal{font-weight:800;font-size:.9rem;color:#374151;white-space:nowrap;font-variant-numeric:tabular-nums}
.ap-food-x{color:#b6b2c0;font-size:1rem;padding-left:2px}
.ap-food-ctl{display:flex;align-items:center;gap:12px;margin-top:7px}
.ap-slider{position:relative;flex:1;height:6px;border-radius:99px;background:#e7e4ee}
.ap-slider-knob{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--brand);
  border:3px solid #fff;box-shadow:0 2px 7px rgba(124,63,229,.4);transform:translate(-50%,-50%)}
.ap-stepper{display:flex;align-items:center;flex-shrink:0}
.ap-stepper b{width:33px;height:33px;border-radius:10px;background:#f1f0f4;color:#374151;font-weight:800;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center}
.ap-stepper span{min-width:42px;height:33px;border:1px solid #e5e2ea;border-radius:9px;margin:0 5px;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-variant-numeric:tabular-nums}
.ap-macrobar{display:flex;height:19px;border-radius:99px;overflow:hidden;margin:15px 0 3px}
.ap-macrobar span{display:flex;align-items:center;justify-content:center;color:#fff;font-size:.62rem;font-weight:800;
  white-space:nowrap;overflow:hidden}
.ap-macrobar .mp{background:#7C3FE5}
.ap-macrobar .mc{background:#22b573}
.ap-macrobar .mg{background:#f0a13d}
.ap-btns2{display:flex;gap:9px;margin-top:11px}
.ap-btns2 span{flex:1;text-align:center;background:#f1f0f4;color:var(--brand);border-radius:12px;padding:11px 0;
  font-weight:700;font-size:.82rem}
.ap-btns2.ghost span{background:transparent;color:#6b7280;font-weight:600}
.ap-confirm{width:100%;margin-top:11px;border:none;background:linear-gradient(135deg,#7C3FE5,#5E2BB8);color:#fff;
  border-radius:13px;padding:14px;font-weight:800;font-size:1rem;cursor:pointer;box-shadow:0 10px 24px rgba(124,63,229,.3);
  animation:apConfirmPulse 1.4s ease-in-out infinite}
@keyframes apConfirmPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
/* almoço: a tela é só demonstração (não colapsa no toque) — botão não pisca */
.ap-estatico .ap-confirm{animation:none}
/* afinar VIVO (almoço): sliders arrastáveis sem rolar a página junto */
.ap-live .ap-slider{touch-action:none;cursor:pointer}
.ap-live .ap-stepper b{cursor:pointer}
.ap-live .ap-stepper b:active{transform:scale(.9)}
/* card compacto pós "Confirmar prato" da foto */
.ap-done{width:100%;max-width:336px;margin:0 auto 12px;background:#ecfdf5;
  border:1.5px solid #10b981;color:#065f46;border-radius:14px;padding:13px 14px;
  font-weight:700;font-size:.95rem;text-align:center}
.ap-done b{font-variant-numeric:tabular-nums}
/* toast de controle decorativo (tour) */
.decor-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;
  background:#2B2733;color:#fff;font-size:.86rem;line-height:1.45;padding:11px 16px;
  border-radius:12px;max-width:320px;text-align:center;box-shadow:0 10px 28px rgba(0,0,0,.25);
  opacity:0;transition:opacity .3s ease}
.decor-toast.on{opacity:1}

/* cabeçalho COMPLETO do app na réplica (espelha o Dashboard real) */
.rep-hdr{background:#0e1019;border-radius:14px;padding:12px 12px 14px;margin-bottom:10px;text-align:left}
.rep-hdr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1px}
.rep-hdr-brand{color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.02rem}
.rep-hdr-brand i{font-style:normal;font-size:.8rem;color:#9aa0b4;margin-left:2px}
.rep-hdr-sair{color:#e8e9f0;font-size:.68rem;font-weight:700;border:1px solid #3a3f52;border-radius:99px;padding:3px 11px}
.rep-hdr-date{color:#8b90a0;font-size:.72rem;margin-bottom:9px}
.rep-hdr-row{display:flex;justify-content:space-between;align-items:baseline}
.rep-hdr-lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#8b90a0;margin-bottom:2px}
.rep-hdr-pace{color:#eab308;font-size:.72rem;font-weight:800}
.rep-hdr-kcal{color:#fff;font-size:1.6rem;font-weight:800;line-height:1.1}
.rep-hdr-kcal b{font-variant-numeric:tabular-nums;font-weight:800}
.rep-hdr-bar{position:relative;height:26px;border-radius:9px;background:#262a3a;margin-top:9px;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;padding:0 9px}
.rep-hdr-fill{position:absolute;top:0;left:0;bottom:0;width:0;border-radius:9px;
  background:linear-gradient(90deg,#7C3FE5,#1fc8a9);transition:width 1.8s ease}
.rep-hdr-cons,.rep-hdr-meta{position:relative;z-index:1;color:#e8e9f0;font-size:.58rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;font-variant-numeric:tabular-nums}
/* barra de macros P/C/G com as setas de orientação (↑ proteína · ↓ gordura) */
.rep-macros{position:relative;margin-top:14px;padding-top:12px}
.rep-seta{position:absolute;top:-2px;transform:translateX(-50%);font-size:.7rem;font-weight:800}
.rep-seta.up{color:#a78bfa}
.rep-seta.down{color:#f59e0b}
.rep-macros-row{display:flex;align-items:center;gap:7px}
.rep-macros-hoje{color:#8b90a0;font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.rep-mbar{flex:1;display:flex;height:17px;border-radius:99px;overflow:hidden}
.rep-mbar span{display:flex;align-items:center;justify-content:center;color:#fff;font-size:.56rem;
  font-weight:800;white-space:nowrap;overflow:hidden}
.rep-mbar .mp{background:#7C3FE5}
.rep-mbar .mc{background:#10b981}
.rep-mbar .mg{background:#f59e0b}
.rep-hdr-dica{background:#1a1d2b;border-radius:10px;padding:9px 11px;color:#d8dae4;font-size:.72rem;
  line-height:1.45;margin-top:11px}
.rep-hdr-btns{display:flex;gap:8px;margin-top:9px}
.rep-hdr-btns span{flex:1;text-align:center;background:#e9f6ee;color:#166534;font-size:.7rem;font-weight:700;
  border-radius:10px;padding:9px 0}
.rep-sec{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:.95rem;color:#111827;
  text-align:left;margin:2px 2px 9px}
/* card registrado (verde, ✓, mini-barra de macros e ☰) */
.rep-done{background:#ecfdf5;box-shadow:inset 3px 0 0 #10b981,0 2px 8px rgba(0,0,0,.06)}
.rep-done-row{display:flex;align-items:center;gap:10px}
.rep-done-main{flex:1;min-width:0}
.rep-done-top{display:flex;align-items:center;gap:6px}
.rep-done-check{width:17px;height:17px;border-radius:50%;background:#10b981;color:#fff;font-size:.6rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rep-done-nome{font-size:.9rem;font-weight:800;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-done-kcal{margin-left:auto;font-size:.82rem;font-weight:800;color:#374151;white-space:nowrap}
.rep-done-kcal b{font-variant-numeric:tabular-nums}
.rep-done-lbl{color:#059669;font-size:.7rem;font-weight:800;margin:2px 0 5px}
.rep-done-mbar{display:flex;height:7px;border-radius:99px;overflow:hidden;background:#d1fae5}
.rep-done-mbar .mp{background:#7C3FE5}
.rep-done-mbar .mc{background:#10b981}
.rep-done-mbar .mg{background:#f59e0b}
.rep-done-menu{width:30px;height:30px;border-radius:8px;border:1px solid #d1fae5;background:#fff;color:#6b7280;
  font-size:.85rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* véu de foco: escurece o painel de leve; só o botão .pulse fica por cima */
.rep-panel{position:relative}
.rep-spot{position:absolute;inset:0;background:rgba(23,20,31,.32);border-radius:inherit;z-index:5;
  pointer-events:none;transition:opacity .35s ease}
.rep-b.pulse{z-index:6;animation:repBtnPulse 1.1s ease-in-out infinite}
.rep-b.pulse::after{animation-duration:1.1s}
@keyframes repBtnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
/* seta piscando apontando pro botão vivo — fica ABAIXO do botão (área vazia
   entre os cards); em cima ela caía sobre o título ("Lanche da t👇de") */
.rep-b.pulse::before{content:"👆";position:absolute;bottom:-32px;left:50%;font-size:24px;z-index:7;
  animation:repSeta .9s ease-in-out infinite;pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
@keyframes repSeta{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
/* balão de instrução ACIMA da tela do app (padrão, usado na etapa do "pular") */
.rep-instrucao{position:relative;width:100%;max-width:336px;margin:0 auto 10px;display:flex;gap:9px;
  align-items:flex-start;pointer-events:none;transition:opacity .35s ease;
  animation:sinteseIn2 .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes sinteseIn2{0%{opacity:0;transform:translateY(-14px)}100%{opacity:1;transform:none}}
/* petisco e jantar: o botão aceso é o ÚLTIMO card da lista, então cada pixel
   antes do painel empurra ele pra fora da primeira tela. Aqui o balão sai do
   fluxo e cobre o cabeçalho — que nesse instante já está sob o véu de foco e
   ainda não tem número animando. O toque roda apagaFoco() e devolve a vista. */
.rep-stack{position:relative}
.rep-instrucao.rin-sobre{position:absolute;top:10px;left:0;right:0;z-index:7;margin:0 auto}
.rin-avatar{width:36px;height:36px;background:#fff;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 4px 12px rgba(43,39,51,.16)}
.rin-bolha{background:#fff;border:1.5px solid rgba(124,63,229,.4);border-radius:4px 16px 16px 16px;
  padding:12px 14px;font-size:.98rem;line-height:1.45;color:var(--ink);text-align:left;
  box-shadow:0 6px 18px rgba(43,39,51,.14)}
/* onda de som da legenda do áudio (fala acontecendo) */
.rep-wave{display:inline-flex;align-items:center;gap:2.5px;margin-right:8px;height:14px}
.rep-wave i{width:3px;border-radius:2px;background:#7C3FE5;height:5px;animation:repWave 1s ease-in-out infinite}
.rep-wave i:nth-child(2){animation-delay:.15s}
.rep-wave i:nth-child(3){animation-delay:.3s}
.rep-wave i:nth-child(4){animation-delay:.45s}
.rep-wave i:nth-child(5){animation-delay:.6s}
@keyframes repWave{0%,100%{height:4px}50%{height:13px}}
/* palavras da fala surgindo uma a uma */
.jl-frase{display:inline}
.jl-w{display:inline-block;margin-right:4px;opacity:0;animation:jlw .38s ease-out forwards}
@keyframes jlw{0%{opacity:0;transform:translateY(6px) scale(.94)}100%{opacity:1;transform:none}}
/* balão-síntese flutuante no topo da tela */
.sintese-balao{position:fixed;top:12px;left:50%;transform:translateX(-50%);width:calc(100% - 28px);
  max-width:430px;z-index:960;background:#fff;border:1.5px solid rgba(124,63,229,.35);border-radius:16px;
  padding:13px 15px;font-size:.92rem;line-height:1.5;color:var(--ink);text-align:left;
  box-shadow:0 16px 40px rgba(43,39,51,.25);animation:sinteseIn .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes sinteseIn{0%{opacity:0;transform:translateX(-50%) translateY(-16px)}100%{opacity:1;transform:translateX(-50%)}}

/* ---------- redesign da tela de planos (25/08): pilha de valor + cards estreitos + FAQ ---------- */
.stackcard{background:var(--card);border:1.5px solid var(--line);border-radius:16px;
  box-shadow:var(--sombra-card);padding:14px 16px;margin:14px 0 0;text-align:left}
.stackcard h3{font-family:var(--display);font-size:.98rem;color:var(--ink);margin:0 0 10px}
.stackrow{display:flex;align-items:flex-start;gap:9px;font-size:.92rem;font-weight:600;
  color:var(--ink);margin:0 0 9px;line-height:1.4}
.stackrow:last-child{margin-bottom:0}
.stackrow .ck{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:#F1EAFE;
  color:var(--brand);font-size:.72rem;font-weight:800;display:flex;align-items:center;
  justify-content:center;margin-top:1px}
.stackrow small{display:block;font-weight:500;color:var(--muted);font-size:.8rem;margin-top:1px}
.leadin{margin:16px 0 10px;font-size:.98rem;color:var(--ink);text-align:center;
  font-weight:700;font-family:var(--display)}
/* card de plano estreito: nome+badge à esquerda, total e equivalente mensal à direita */
.selcard.slim{justify-content:space-between;gap:10px;padding:13px 14px;border-radius:14px}
.selcard.slim .sc-nm{font-weight:700;font-size:.95rem;color:var(--ink)}
.selcard.slim .sc-nm .sc-badge{font-size:.66rem;padding:3px 8px;margin-left:6px;vertical-align:1px}
.selcard.slim .sc-pr{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--ink);
  text-align:right;line-height:1.25;font-variant-numeric:tabular-nums;white-space:nowrap}
.selcard.slim .sc-pr small{display:block;color:var(--soft);font-weight:600;font-size:.76rem;font-family:var(--sans)}
.selcard.slim.sel{background:#FBF8FF}
.faq-box{margin:26px 0 0}
.faq-tit{font-family:var(--display);font-size:1rem;font-weight:700;color:var(--ink);margin:0 0 10px;text-align:center}
.faq-item{background:var(--card);border:1.5px solid var(--line);border-radius:12px;
  padding:12px 14px;margin:0 0 8px;font-size:.9rem;color:var(--ink);text-align:left}
.faq-item p{margin:7px 0 0;font-weight:500;color:var(--muted);font-size:.86rem;line-height:1.5}
.faq-item.faq-pix{border-color:var(--brand)}
.contador-pratos{margin:14px 0 0;text-align:center;font-size:.9rem;color:var(--ink-soft)}
.contador-pratos b{color:var(--ink)}

/* ---------- "pensamento" do bot no planejar do jantar (25/08) ---------- */
.think-card{background:var(--card);border:1.5px solid var(--line);border-radius:16px;
  box-shadow:var(--sombra-card);padding:16px;text-align:left;margin:10px 0}
.think-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.think-ava{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--roxo),var(--roxo-2));
  color:#fff;font-family:var(--display);font-weight:800;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.think-quem{font-weight:700;color:var(--ink);font-size:.92rem}
.think-quem small{display:block;font-weight:600;color:var(--soft);font-size:.74rem}
.th-msg{background:#F6F3FC;border-radius:12px;padding:11px 13px;margin:0 0 8px;font-size:.94rem;
  font-weight:600;color:var(--ink);line-height:1.5;display:none}
.th-msg.on{display:block;animation:fadeLine .3s ease}
.th-msg b{color:var(--brand)}
.th-kcal{font-family:var(--display);font-variant-numeric:tabular-nums}
.th-w{opacity:0;animation:fadeLine .25s ease forwards}
.th-dots{display:none;padding:11px 13px}
.th-dots.on{display:block}
.th-macros{display:none;gap:8px;margin:2px 0 10px}
.th-macros.on{display:flex}
.th-m{flex:1;text-align:center;font-size:.72rem;font-weight:700;color:var(--muted)}
.th-m .lb i{font-style:normal;opacity:0}
.th-m.done .lb i{opacity:1;color:#2E9E6B}
.th-m .bar{height:6px;border-radius:99px;background:#E9E4F2;overflow:hidden;margin-top:3px}
.th-m .bar i{display:block;height:100%;width:0;border-radius:99px;transition:width 1s ease}
.th-m.p .bar i{background:#2f7cff}.th-m.c .bar i{background:#19c37d}.th-m.g .bar i{background:#f59e0b}
.th-ok{align-items:center;gap:8px}
.th-ok.on{display:flex}
.th-ok .ck2{width:20px;height:20px;border-radius:50%;background:#E7F7EE;color:#2E9E6B;font-weight:800;
  font-size:.72rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* fecho por cima da tela do prato: "Perfeito! Mais um dia dentro da meta" + CTA */
.ap-screen{position:relative}
.ap-fim{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border-radius:20px;animation:fadeLine .45s ease;z-index:5}
.ap-fim-card{text-align:center;padding:18px 20px;max-width:280px}
.af-msg{font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1.35;color:var(--ink);
  margin-bottom:14px}
.af-msg b{color:var(--brand)}
.af-cta{width:100%}

/* ---------- folha de saída com cupom VOLTA15 (15% OFF, 5 min) ---------- */
.v15-box{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:2px dashed var(--brand);border-radius:12px;background:#F8F5FF;
  padding:12px 14px;margin:4px 0 12px}
.v15-cupom{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--brand);
  letter-spacing:.06em}
.v15-timer{font-family:var(--display);font-weight:800;font-size:1.05rem;color:#D64545;
  font-variant-numeric:tabular-nums}
.desp-title b{color:var(--brand)}
.v15-copy{border:1.5px solid var(--brand);background:#fff;color:var(--brand);font-family:inherit;
  font-weight:800;font-size:.78rem;border-radius:999px;padding:6px 12px;cursor:pointer;margin-left:auto;margin-right:10px}
.v15-copy:active{transform:scale(.96)}
.desp-sheet{position:relative}
.desp-x2{position:absolute;top:10px;right:12px;border:none;background:#F1EDE6;color:var(--muted);
  width:28px;height:28px;border-radius:50%;font-size:.8rem;font-weight:800;cursor:pointer;line-height:1}
.desp-x2:active{transform:scale(.94)}
.v15-conta{margin:2px 0 10px;text-align:left;font-size:.92rem;font-weight:700;color:var(--ink-soft)}
.v15-conta b{font-family:var(--display);color:#D64545;font-variant-numeric:tabular-nums}

/* ============================================================
   TELA DE PREÇO v3 (29/08/2026)
   Reconstrução sobre 5 regras medidas contra Spotify Premium e Netflix:
     1. escala de espaço com salto real (era 1,6x entre o maior e o menor vão)
     2. escala de fonte de 6 degraus (eram 17 tamanhos, 14 deles entre 13 e 20px)
     3. título em toda seção (era 1 título na tela inteira)
     4. um trilho de leitura só (40% do texto longo era centralizado)
     5. zero emoji estruturando conteúdo (eram 8)
   Os tokens abaixo SÃO a regra: nada de tamanho ou espaço fora deles.
   Escopo fechado em .v3preco — nenhuma outra tela do funil é afetada.
   ============================================================ */
.v3preco{
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:72px;
  --t1:44px;  /* preço herói        */
  --t2:28px;  /* preço do fecho     */
  --t3:20px;  /* título de seção    */
  --t4:17px;  /* destaque           */
  --t5:15px;  /* corpo              */
  --t6:13px;  /* micro / legal      */
  --escuro:#221B38; --escuro-2:#2E2450;
  --escuro-ink:#fff; --escuro-ink-2:#C9BEE8; --escuro-acc:#C6A6FF;
  --v3good:#1F7A52; --v3good-luz:#E4F1EA; --v3good-ink:#17603F;
  --v3line-forte:#C3B7A3;
  text-align:left;font-size:var(--t5)
}
.v3preco .nb{white-space:nowrap}

/* --- seções: é o vão de 72px que cria os capítulos --- */
.v3sec{margin:0 0 var(--s6)}
.v3sec-par{margin-bottom:var(--s5)}   /* "seu plano" + "escolha seu plano" = um par */
.v3tit{
  font-family:var(--display);font-size:var(--t3);font-weight:700;letter-spacing:-.015em;
  color:var(--ink);margin:0 0 var(--s3);text-wrap:balance
}
.v3voltar{
  display:block;margin:0 0 var(--s4);padding:0;border:none;background:none;
  font-size:var(--t5);font-weight:600;color:var(--muted);text-align:left
}

/* --- 1. seu plano: tabela de dados (substituiu 3 linhas com emoji) --- */
.v3dados{margin:0;padding:0}
.v3dados div{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:var(--s2) 0;border-bottom:1px solid var(--line)
}
.v3dados div:first-child{padding-top:0}
.v3dados div:last-child{border-bottom:0;padding-bottom:0}
.v3dados dt{font-size:var(--t5);color:var(--muted);margin:0}
.v3dados dd{
  margin:0;font-family:var(--display);font-size:var(--t4);font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap
}

/* --- 2. planos --- */
.v3planos{display:flex;flex-direction:column;gap:var(--s2)}
.v3plano{
  position:relative;display:block;width:100%;text-align:left;background:var(--surface);
  border:1.5px solid var(--line);border-radius:18px;padding:var(--s3);
  box-shadow:var(--sombra-card);transition:box-shadow .15s,border-color .15s
}
.v3plano[hidden]{display:none}
.v3plano:active{transform:scale(.995)}
.v3plano:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px}

/* card recomendado em painel escuro: o preço vira o ponto mais contrastado
   da tela (16,4:1). Antes o preço era 15,7px, MENOR que o texto da garantia. */
.v3hero{
  padding:var(--s4);margin-top:var(--s2);
  background:linear-gradient(160deg,var(--escuro-2),var(--escuro) 62%);
  border-color:transparent;box-shadow:0 14px 34px rgba(34,27,56,.30)
}
.v3hero.sel{box-shadow:0 0 0 2.5px var(--escuro-acc),0 14px 34px rgba(34,27,56,.30)}
.v3flag{
  position:absolute;top:-11px;left:var(--s3);background:var(--escuro-acc);color:var(--escuro);
  font-size:var(--t6);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:var(--s1) 10px;border-radius:99px
}
.v3topo{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  font-size:var(--t5);font-weight:600;color:var(--escuro-ink-2);margin-bottom:var(--s2)
}
.v3check{
  width:22px;height:22px;border-radius:50%;border:2px solid #6D6390;background:transparent;
  flex:none;position:relative;transition:all .15s
}
.v3hero.sel .v3check{border-color:var(--escuro-acc);background:var(--escuro-acc)}
.v3hero.sel .v3check::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--escuro)}
.v3dia{
  display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
  font-family:var(--display);font-weight:800;font-size:var(--t1);line-height:1;
  letter-spacing:-.035em;color:var(--escuro-ink);font-variant-numeric:tabular-nums
}
.v3dia b{font:inherit;color:inherit;white-space:nowrap}
.v3dia span{font-family:var(--sans);font-size:var(--t5);font-weight:600;letter-spacing:0;color:var(--escuro-ink-2)}
.v3total{margin:var(--s3) 0 0;font-size:var(--t5);line-height:1.5;color:var(--escuro-ink-2);text-wrap:pretty}
.v3total b{color:var(--escuro-ink);font-weight:700;font-variant-numeric:tabular-nums}
/* comparação honesta (12x o mensal), não âncora riscada */
.v3cmp{
  display:block;margin:var(--s2) 0 0;font-size:var(--t6);line-height:1.5;color:var(--escuro-ink-2);
  border-top:1px solid rgba(255,255,255,.16);padding-top:var(--s2)
}
.v3cmp b{color:var(--escuro-ink);font-weight:700;font-variant-numeric:tabular-nums}

.v3slim{display:flex;align-items:center;gap:var(--s3)}
.v3slim.sel{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand),var(--sombra-card)}
.v3slim .v3check{order:3;border-color:var(--v3line-forte);background:#fff}
.v3slim.sel .v3check{border-color:var(--brand);background:var(--brand)}
.v3slim.sel .v3check::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.v3nome{font-size:var(--t5);font-weight:700;color:var(--ink)}
.v3preco-slim{
  margin-left:auto;font-family:var(--display);font-weight:700;font-size:var(--t4);color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:right;line-height:1.3;white-space:nowrap
}
.v3preco-slim small{display:block;font-family:var(--sans);font-size:var(--t6);font-weight:500;color:var(--soft)}
.v3mais{
  display:block;margin:var(--s3) 0 0;padding:0;border:none;background:none;color:var(--muted);
  font-size:var(--t5);font-weight:600;text-decoration:underline;text-underline-offset:3px
}
.v3mais[hidden]{display:none}

.v3cta{margin-top:var(--s4)}
.v3cta .btn{max-width:none}
.v3cobra{
  margin:var(--s3) 0 0;font-size:var(--t5);line-height:1.5;color:var(--muted);
  font-variant-numeric:tabular-nums;text-wrap:pretty
}
.v3cobra b{color:var(--ink);font-weight:700}

/* --- selo de garantia: risco zero com peso de verdade ---
   Card BRANCO com borda verde. Um painel verde-claro sobre o bege daria
   1,06:1 e sumiria — é a borda e o selo que fazem ele existir. */
.v3gar{
  display:flex;gap:var(--s3);align-items:flex-start;
  margin:var(--s4) 0 0;padding:var(--s3);border-radius:16px;
  background:var(--card);border:2px solid var(--v3good);
  box-shadow:0 1px 2px rgba(31,122,82,.10),0 10px 26px rgba(31,122,82,.14)
}
.v3selo{flex:0 0 38px;width:38px;height:38px;display:block}
.v3gar-corpo{min-width:0}
.v3gar-tit{
  font-family:var(--display);font-size:var(--t4);font-weight:800;color:var(--v3good-ink);
  margin:0;line-height:1.25;letter-spacing:-.01em;text-wrap:balance
}
.v3gar-txt{margin:var(--s1) 0 0;font-size:var(--t5);line-height:1.5;color:var(--muted);text-wrap:pretty}
.v3gar-txt b{color:var(--ink);font-weight:700}
.v3gar-sep{height:1px;background:var(--line);border:0;margin:var(--s3) 0}
.v3gar-sub{font-family:var(--display);font-size:var(--t5);font-weight:800;color:var(--v3good-ink);margin:0;line-height:1.3}

/* --- 3. o que vem junto --- */
.v3inclui{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.v3inclui li{font-size:var(--t5);line-height:1.5;color:var(--ink);padding-left:28px;position:relative;text-wrap:pretty}
.v3inclui li::before{
  content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;
  background:var(--v3good-luz)
}
/* check em forma, não caractere: borda girada 45° */
.v3inclui li::after{
  content:"";position:absolute;left:7px;top:7px;width:4px;height:8px;
  border:solid var(--v3good);border-width:0 2px 2px 0;transform:rotate(45deg)
}
.v3inclui li b{font-weight:700;display:block}
.v3inclui li i{font-style:normal;color:var(--muted);font-size:var(--t6)}

.v3pratos{margin:var(--s3) 0 0;font-size:var(--t5);color:var(--muted);text-wrap:pretty}
.v3pratos b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.v3disc{margin:var(--s2) 0 0;font-size:var(--t6);color:var(--soft);line-height:1.45}

/* --- 5. antes do fecho --- */
.v3obj{font-size:var(--t4);line-height:1.6;color:var(--ink);margin:0;text-wrap:pretty}
.v3obj b{font-weight:700}
.v3adiar{
  margin:var(--s3) 0 0;padding:var(--s3);border-radius:12px;background:#FBF2E2;
  border:1.5px solid #E4D0AA;font-size:var(--t5);line-height:1.55;color:#5E4718;text-wrap:pretty
}
.v3adiar b{color:#3F2F0D;font-weight:700;font-variant-numeric:tabular-nums}

/* --- 6. dúvidas: acordeão fechado (era 4 itens abertos, 520px) --- */
.v3faq details{
  background:var(--card);border:1.5px solid var(--line);border-radius:12px;
  margin:0 0 var(--s2);overflow:hidden;box-shadow:0 1px 2px rgba(34,30,43,.05)
}
.v3faq details:last-child{margin-bottom:0}
.v3faq details[open]{border-color:var(--v3line-forte)}
.v3faq summary{
  list-style:none;cursor:pointer;padding:var(--s3);font-size:var(--t5);font-weight:600;
  color:var(--ink);display:flex;align-items:center;gap:var(--s3);line-height:1.45;text-wrap:pretty
}
.v3faq summary::-webkit-details-marker{display:none}
.v3faq summary::after{
  content:"+";margin-left:auto;flex:none;font-family:var(--display);font-weight:700;
  font-size:var(--t4);color:var(--soft)
}
.v3faq details[open] summary::after{content:"−"}
.v3faq summary:focus-visible{outline:3px solid var(--brand-deep);outline-offset:-3px;border-radius:12px}
.v3faq details p{margin:0;padding:0 var(--s3) var(--s3);font-size:var(--t5);line-height:1.6;color:var(--muted);text-wrap:pretty}

/* --- fecho compacto: preço + botão (era o bloco inteiro repetido, ~1.070px) --- */
.v3fecho{
  padding:var(--s4);border-radius:18px;background:var(--card);
  border:1.5px solid var(--v3line-forte);box-shadow:var(--sombra-card)
}
.v3fecho .btn{max-width:none}
.v3fecho-tit{font-family:var(--display);font-size:var(--t3);font-weight:700;margin:0;color:var(--ink)}
.v3fecho-preco{
  font-family:var(--display);font-weight:800;font-size:var(--t2);line-height:1.2;color:var(--ink);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin:var(--s2) 0 0;white-space:nowrap
}
.v3fecho-preco span{font-family:var(--sans);font-size:var(--t5);font-weight:600;color:var(--muted)}
.v3fecho-sub{font-size:var(--t5);color:var(--muted);margin:var(--s1) 0 var(--s3);font-variant-numeric:tabular-nums}
.v3fecho-seg{margin:var(--s3) 0 0;font-size:var(--t6);color:var(--muted);line-height:1.5}
.v3legal{margin:var(--s4) 0 0;font-size:var(--t6);line-height:1.55;color:var(--soft)}

/* --- barra fixa: a tela de preço não tinha nenhuma (eram ~1.000px sem botão) --- */
.v3fab{
  /* a barra é filha do BODY, fora do .v3preco — sem estes tokens locais o
     padding e o tamanho da fonte caíam para o valor inicial */
  --s2:8px; --t4:17px;
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  /* o .btn é inline-flex: margin:auto não centraliza inline-level, text-align sim */
  text-align:center;
  padding:var(--s2) 20px calc(var(--s2) + env(safe-area-inset-bottom));
  background:rgba(250,247,242,.94);backdrop-filter:blur(10px);
  border-top:1.5px solid var(--v3line-forte);
  transform:translateY(120%);transition:transform .28s cubic-bezier(.2,.8,.2,1)
}
.v3fab.on{transform:none}
.v3fab .btn{max-width:440px;margin:0 auto;padding:15px 20px;font-size:var(--t4)}
body.has-v3fab .v3preco{padding-bottom:96px}

@media (prefers-reduced-motion: reduce){
  .v3fab{transition:none}
}
/* nada por cima do pagamento: a barra some com o checkout aberto */
body.co-open .v3fab{display:none}

/* ============================================================
   LANDING v6 — página única de rolagem (29/08/2026)
   Sem questionário e sem meta calculada: a pessoa desce e vê o app
   trabalhando. Herda os tokens de espaço e tipo do .v3preco (a landing
   é montada dentro dele), então nada de tamanho ou vão fora da escala.
   ============================================================ */
.lp{width:100%}
.lp-sec{margin:0 0 var(--s6);text-align:left}
.lp-tag{
  display:inline-block;font-family:var(--mono);font-size:var(--t6);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand-deep);
  background:#F1E9FE;padding:var(--s1) 10px;border-radius:99px;margin-bottom:var(--s2)
}
.lp-tit{
  font-family:var(--display);font-size:var(--t2);font-weight:800;line-height:1.15;
  letter-spacing:-.025em;color:var(--ink);margin:0 0 var(--s2);text-wrap:balance
}
.lp-sub{font-size:var(--t5);line-height:1.55;color:var(--muted);margin:0 0 var(--s3);text-wrap:pretty}

/* janela do app: a moldura que enquadra todas as demos */
.lp-janela{
  margin:0 auto;
  background:#0D0A14;border-radius:22px;padding:var(--s2);
  box-shadow:0 18px 44px rgba(13,10,20,.34)
}
.lp-bar{display:flex;align-items:center;gap:5px;padding:2px 6px var(--s2)}
.lp-bar i{width:8px;height:8px;border-radius:50%;background:#2E3340}
.lp-bar span{margin-left:auto;font-size:var(--t6);font-weight:700;letter-spacing:.06em;color:#8E93A3}
.lp-tela{position:relative;border-radius:15px;overflow:hidden;background:#000}
/* toda janela tem a mesma forma, mesmo a que só tem clipe */
/* a da água fica de fora: a animação é de área pequena e não pede tela cheia */
.lp-tela:not(.lp-tela-fases):not(.lp-tela-painel):not(.lp-tela-agua){aspect-ratio:9/16}
.lp-tela > .lp-video{width:100%;height:100%;aspect-ratio:auto}
.lp-video{width:100%;display:block;aspect-ratio:9/16;object-fit:cover;background:#000}
.lp-tela-painel{padding:var(--s2);background:var(--bg)}

/* JANELA ÚNICA: a moldura tem a forma do vídeo (9:16) e NUNCA muda de altura —
   nem entre seções, nem entre fases. Antes ela encolhia 189px no meio do loop
   e empurrava a página inteira. As fases são absolutas: nenhuma dita a altura. */
.lp-tela-fases{position:relative;aspect-ratio:9/16;background:#000;overflow:hidden}
.lp-fase{
  position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .22s ease
}
.lp-fase.on{opacity:1;visibility:visible}
.lp-fase-video{background:#000}
.lp-fase-video .lp-video{width:100%;height:100%;aspect-ratio:auto}

/* a tela de afinar PREENCHE a janela, como no aparelho: cabeçalho e rodapé
   fixos, a lista de alimentos ocupa a sobra e rola se passar. Assim ela cabe
   com qualquer número de alimentos, sem esticar a moldura. */
.lp-fase-afinar{background:var(--bg);padding:var(--s2);display:flex}
/* A moldura fixa da tela do app (cabeçalho, barra do modo queima, coach e
   botões) come 463px. Numa janela 9:16 — mais baixa que um celular real — no
   tamanho natural sobrariam 83px pra lista. O zoom recupera ~18% de altura e
   devolve espaço pra ~3 alimentos, que é o que se vê no aparelho. */
.lp-fase-afinar .ap-screen{
  zoom:.82;width:100%;height:100%;max-width:none;margin:0;
  display:flex;flex-direction:column;min-height:0;
  box-shadow:none;animation:none;overflow:hidden
}
.lp-fase-afinar .ap-foods{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-right:2px;margin-bottom:2px
}
.lp-fase-afinar .ap-food{animation:none}
/* o painel de refeições aparece INTEIRO: a altura segue o conteúdo e só a
   página rola — a lista interna com rolagem escondia o jantar (o card que
   recebe as calorias) justamente na hora da cena */
.lp-tela-painel{position:relative;overflow:hidden;display:flex;padding:var(--s2)}
.lp-tela-painel .rep-panel{
  zoom:.82;width:100%;max-width:none;margin:0;
  display:flex;flex-direction:column
}
.lp-tela-painel .rep-cards{flex:none;overflow:visible}

/* legenda que troca junto com a fase */
.lp-legenda{
  margin:var(--s2) 0 0;font-size:var(--t6);line-height:1.5;color:var(--muted);
  min-height:2.6em;opacity:0;transition:opacity .3s ease;text-wrap:pretty
}
.lp-legenda.on{opacity:1}

/* resultado da foto: entra por cima do clipe quando ele termina */
.lp-result{
  position:absolute;inset:auto 0 0 0;padding:var(--s4) var(--s3) var(--s3);
  background:linear-gradient(transparent,rgba(11,8,18,.82) 34%,rgba(11,8,18,.96));
  opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease
}
.lp-result.on{opacity:1;transform:none}
.lp-chips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.lp-chip{
  font-size:var(--t6);font-weight:600;color:#fff;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);padding:3px 9px;border-radius:99px;
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease
}
.lp-result.on .lp-chip{opacity:1;transform:none}
.lp-kcal{
  font-family:var(--display);font-size:var(--t1);font-weight:800;color:#fff;
  line-height:1;letter-spacing:-.03em;margin-top:var(--s2);font-variant-numeric:tabular-nums
}
.lp-kcal b{font:inherit}
.lp-macros-mini{display:flex;gap:var(--s3);margin-top:var(--s2)}
.lp-macros-mini span{
  display:flex;align-items:center;gap:5px;font-size:var(--t6);font-weight:600;
  color:rgba(255,255,255,.9)
}
.lp-macros-mini b{width:8px;height:8px;border-radius:50%;display:block}
.dp{background:var(--macro-p)}.dc{background:var(--macro-c)}.dg{background:var(--macro-g)}

/* item que o loop está mexendo na tela de afinar */
.lp-mexeu{box-shadow:0 0 0 2px var(--brand)}
.lp-rep{margin:0}

/* --- meta: números fixos, com cálculo opcional --- */
.lp-meta{
  background:var(--card);border:1.5px solid var(--line);border-radius:18px;
  padding:var(--s3);box-shadow:var(--sombra-card);transition:border-color .3s
}
.lp-meta-sua{border-color:var(--brand);box-shadow:0 0 0 1.5px var(--brand),var(--sombra-card)}
.lp-meta-kcal{display:flex;align-items:baseline;gap:var(--s2)}
.lp-meta-kcal b{
  font-family:var(--display);font-size:var(--t1);font-weight:800;line-height:1;
  letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums
}
.lp-meta-kcal span{font-size:var(--t5);font-weight:600;color:var(--muted)}
.lp-meta-barra{display:flex;height:10px;border-radius:99px;overflow:hidden;margin:var(--s2) 0 var(--s3);background:var(--line)}
.lp-meta-barra i{display:block;height:100%}
.lp-meta-macros{display:flex;flex-direction:column;gap:var(--s2)}
.lp-meta-macros div{display:flex;align-items:center;gap:var(--s2);font-size:var(--t5)}
.lp-meta-macros b{width:9px;height:9px;border-radius:50%;display:block;flex:none}
.lp-meta-macros span{color:var(--muted)}
.lp-meta-macros em{
  margin-left:auto;font-style:normal;font-family:var(--display);font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums
}
.lp-btn-calc{margin-top:var(--s3);max-width:none}

/* --- virada da demo pra oferta --- */
.lp-vira{margin:0 0 var(--s6);padding-top:var(--s5);border-top:1.5px dashed var(--line-forte)}
.lp-vira-txt{
  font-family:var(--display);font-size:var(--t3);font-weight:700;color:var(--ink);
  margin:0;text-wrap:balance
}

/* --- janela de cálculo --- */
.lp-modal{
  position:fixed;inset:0;z-index:95;background:rgba(6,6,10,.72);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;padding:var(--s3);overflow-y:auto
}
@media (min-width:700px){
  /* no computador a janela centraliza; no celular segue folha subindo de baixo.
     O margin precisa da mesma especificidade da regra base (margin:auto 0 0). */
  .lp-modal{align-items:center}
  .lp-modal .lp-modal-card{margin:auto;animation-name:lpAparece}
}
@keyframes lpAparece{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
body.lp-modal-on{overflow:hidden}
.lp-modal-card{
  position:relative;width:100%;max-width:440px;background:var(--card);
  border-radius:22px;padding:var(--s4);box-shadow:0 -10px 50px rgba(0,0,0,.35);
  margin:auto 0 0;animation:lpSobe .3s cubic-bezier(.2,.8,.2,1) both
}
@keyframes lpSobe{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.lp-modal-x{
  position:absolute;top:10px;right:12px;width:34px;height:34px;border:none;
  background:transparent;font-size:1.1rem;color:var(--soft);cursor:pointer
}
.lp-modal-tit{font-family:var(--display);font-size:var(--t3);font-weight:700;margin:0;color:var(--ink)}
.lp-modal-sub{font-size:var(--t5);color:var(--muted);margin:var(--s1) 0 var(--s3)}
.lp-form{margin:0;border:0;box-shadow:none;padding:0;max-width:none;background:transparent}
.lp-form .btn{max-width:none}
.lp-form-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.lp-form-3 .field{margin:0}
.lp-form .sexbtn.on{border-color:var(--brand);background:#F6F1FF;color:var(--brand-deep);font-weight:700}

@media (prefers-reduced-motion: reduce){
  .lp-result,.lp-chip{transition:none}
  .lp-modal-card{animation:none}
}
/* a home estática vira a abertura da landing: sem centralização vertical e
   sem altura de tela cheia, senão ela empurraria as seções pra fora da dobra */
.lp-hero{width:100%;text-align:center;margin:0 0 var(--s6);animation:none}
.lp-hero .home-cliente{display:inline-block;margin-top:var(--s3)}
#stage:has(.lp){justify-content:flex-start}

/* ============================================================
   TEMA ESCURO v6 (31/08/2026)
   Preto com viés frio, um roxo só (o da marca) e as três cores de macro.
   Regra aprendida no tema claro, agora invertida: no preto as razões de
   contraste comprimem — a superfície mais clara testada (#22222E) dá só
   1,27:1 contra o canvas. Quem separa o card do fundo é a LINHA e um brilho
   de 1px no topo, nunca o preenchimento.
   As janelas do app ficam CLARAS de propósito: são a tela real do produto,
   e num fundo preto viram o único bloco claro — o olho vai direto nelas.
   ============================================================ */
html,body{background:#08080C}
.v3preco,.lp{
  --bg:#08080C;
  --surface:#1A1A24;
  --card:#1A1A24;
  --card-2:#22222E;
  --line:#383848;
  --line-forte:#4A4A5E;
  --v3line-forte:#4A4A5E;
  --ink:#F4F4F8;
  --ink-soft:#A8A6B8;
  --muted:#A8A6B8;
  --soft:#8A8899;
  --ink-2:#A8A6B8;
  --ink-3:#8A8899;
  --brand:#7C3FE5;          /* preenchimento: branco sobre ele dá 5,7:1 */
  --brand-2:#9a63ff;
  --brand-deep:#A97BFF;     /* texto: o roxo da marca daria 3,5:1 e reprova */
  --brand-txt:#A97BFF;
  --v3good:#4ADE9A;
  --v3good-luz:rgba(74,222,154,.14);
  --v3good-ink:#4ADE9A;
  --macro-p:#B490FF; --macro-c:#3FE39B; --macro-g:#FFBE63;
  --sombra-card:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 32px rgba(0,0,0,.5);
  color:var(--ink)
}
#stage{background:#08080C}

/* brilho ambiente: uma vez, atrás da abertura. Nada de neon nem grade. */
.lp-hero{position:relative}
.lp-hero::before{
  content:"";position:absolute;top:-140px;left:50%;transform:translateX(-50%);
  width:560px;height:420px;max-width:130%;
  background:radial-gradient(circle,rgba(124,63,229,.22),transparent 68%);
  pointer-events:none;z-index:-1
}
.lp-hero .home-typed{color:var(--ink)}
.lp-hero .logo{color:var(--ink)}
.lp-hero .home-cliente{color:var(--brand-deep)}

/* rótulo e número em mono: é o que faz o painel parecer instrumento */
.lp-tag{
  font-family:var(--mono);background:rgba(124,63,229,.16);
  border:1px solid rgba(124,63,229,.42);color:#C6A6FF
}
/* selo que marca QUAL dos 3 alicerces esta secao prova — o herói nomeia os
   três, e cada seção reencontra o seu ao longo da rolagem */
.lp-tag .alic-b{
  display:inline-block;background:#7C3FE5;color:#fff;border-radius:99px;
  padding:1px 7px;margin:0 6px 0 -3px;font-weight:700
}
.lp-tit{color:var(--ink)}
.lp-sub,.lp-legenda{color:var(--ink-2)}
.lp-janela{
  background:#101018;border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px rgba(0,0,0,.6)
}
.lp-bar span{color:#8A8899}
.lp-vira{border-top-color:var(--line)}
.lp-vira-txt{color:var(--ink)}

/* card da meta: números em mono, tabulares */
.lp-meta{
  background:var(--surface);border-color:var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 32px rgba(0,0,0,.5)
}
.lp-meta-sua{border-color:var(--brand-deep);box-shadow:0 0 0 1px var(--brand-deep), 0 12px 32px rgba(0,0,0,.5)}
.lp-meta-kcal b,.lp-meta-macros em{font-family:var(--mono);letter-spacing:-.02em}
.lp-meta-barra{background:#26262F}

/* --- oferta no escuro --- */
.v3tit,.v3fecho-tit{color:var(--ink)}
.v3dados div{border-bottom-color:var(--line)}
.v3dados dd{font-family:var(--mono);letter-spacing:-.02em}
/* o card do plano recomendado INVERTE: no preto ele vira o único bloco claro
   da página, e passa a saltar mais do que saltava no tema bege */
.v3hero{
  background:linear-gradient(160deg,#FFFFFF,#EFEBF7 68%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 22px 52px rgba(124,63,229,.28)
}
.v3hero.sel{box-shadow:0 0 0 2.5px var(--brand-deep), 0 22px 52px rgba(124,63,229,.32)}
.v3hero .v3topo{color:#5C5470}
.v3hero .v3dia{color:#1A1523}
.v3hero .v3dia span{color:#5C5470}
.v3hero .v3total{color:#5C5470}
.v3hero .v3total b{color:#1A1523}
.v3hero .v3cmp{color:#5C5470;border-top-color:rgba(26,21,35,.14)}
.v3hero .v3cmp b{color:#1A1523}
.v3hero .v3check{border-color:#B9B2C6;background:#fff}
.v3hero.sel .v3check{border-color:var(--brand);background:var(--brand)}
.v3hero.sel .v3check::after{background:#fff}
.v3flag{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(124,63,229,.5)}
.v3slim{background:var(--surface);border-color:var(--line)}
.v3slim .v3check{border-color:var(--line-forte);background:transparent}
.v3nome{color:var(--ink)}
.v3preco-slim{color:var(--ink);font-family:var(--mono);letter-spacing:-.02em}
.v3preco-slim small{color:var(--ink-3);font-family:var(--sans);letter-spacing:0}
.v3mais{color:var(--ink-2)}
.v3cobra{color:var(--ink-2)}
.v3cobra b{color:var(--ink)}

/* selo da garantia: no preto, contorno e selo verdes sobre superfície elevada */
.v3gar{
  background:var(--surface);border-color:var(--v3good);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 30px rgba(74,222,154,.12)
}
.v3gar-tit,.v3gar-sub{color:var(--v3good)}
.v3gar-txt{color:var(--ink-2)}
.v3gar-txt b{color:var(--ink)}
.v3gar-sep{background:var(--line)}

.v3inclui li{color:var(--ink)}
.v3inclui li i{color:var(--ink-2)}
.v3inclui li::before{background:rgba(74,222,154,.14)}
.v3inclui li::after{border-color:var(--v3good)}

.v3pratos{color:var(--ink-2)}
.v3pratos b{color:var(--ink);font-family:var(--mono)}
.v3disc{color:var(--ink-3)}
.v3obj{color:var(--ink)}
.v3adiar{background:rgba(255,190,99,.10);border-color:rgba(255,190,99,.34);color:#FFD9A3}
.v3adiar b{color:#FFE9C7}

.v3faq details{background:var(--surface);border-color:var(--line);box-shadow:none}
.v3faq details[open]{border-color:var(--line-forte)}
.v3faq summary{color:var(--ink)}
.v3faq summary::after{color:var(--ink-3)}
.v3faq details p{color:var(--ink-2)}

.v3fecho{background:var(--surface);border-color:var(--line-forte)}
.v3fecho-preco{color:var(--ink);font-family:var(--mono);letter-spacing:-.03em}
.v3fecho-preco span{color:var(--ink-2);font-family:var(--sans);letter-spacing:0}
.v3fecho-sub,.v3fecho-seg{color:var(--ink-2)}
.v3legal{color:var(--ink-3)}

/* barra fixa: vidro escuro */
.v3fab{
  background:rgba(10,10,16,.92);border-top-color:var(--line)
}
body.lp-modal-on{background:#08080C}

/* ---- janela de cálculo no escuro ----
   O modal é filho do BODY, fora do .lp/.v3preco — sem estes tokens locais ele
   herdava o :root claro: card branco e, pior, texto escuro (#2B2733) sobre
   campos escuros, ou seja, invisível. Mesmo erro da barra fixa. */
.lp-modal{
  --s1:4px; --s2:8px; --s3:16px; --s4:24px;
  --t3:20px; --t4:17px; --t5:15px; --t6:13px;
  --ink:#F4F4F8; --ink-2:#A8A6B8; --ink-3:#8A8899;
  --surface:#1A1A24; --card:#1A1A24; --line:#383848;
  --brand:#7C3FE5; --brand-deep:#A97BFF; --soft:#8A8899; --muted:#A8A6B8;
  color:var(--ink)
}
.lp-modal-card{
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 -20px 60px rgba(0,0,0,.6)
}
/* o título dividia a linha com o X e encostava nele */
.lp-modal-tit{color:var(--ink);padding-right:40px}
.lp-modal-sub{color:var(--ink-2);padding-right:40px}
.lp-modal-x{color:var(--ink-3);font-size:1.3rem;line-height:1}
.lp-modal-x:hover{color:var(--ink)}
.lp-form label{color:var(--ink-2);font-size:var(--t6);font-weight:600}
.lp-form input,.lp-form select{
  background:#101018;border:1.5px solid var(--line);color:var(--ink);
  font-size:var(--t5);border-radius:12px
}
.lp-form input:focus,.lp-form select:focus{border-color:var(--brand-deep);outline:none}
.lp-form input::placeholder{color:#6E6C7C}
.lp-form select option{background:#101018;color:var(--ink)}
.lp-form .selwrap::after{border-top-color:var(--ink-3)}
.lp-form .sexbtn{
  background:#101018;border:1.5px solid var(--line);color:var(--ink-2);
  font-size:var(--t5);border-radius:12px
}
.lp-form .sexbtn.on{background:rgba(124,63,229,.22);border-color:var(--brand-deep);color:#D9C4FF;font-weight:700}
.lp-form .btn:disabled{opacity:.4}



/* ============================================================
   DESKTOP — duas colunas
   A coluna de 560px era um celular esticado numa tela larga: a janela 9:16
   sobrava 186px de cada lado e o vídeo virava um monólito de 900px de altura.
   Acima de 900px a chamada vai PARA O LADO da janela, o lado alterna a cada
   seção, e a janela ganha um teto de altura pra caber na tela junto do texto.
   ============================================================ */
@media (min-width:900px){
  #stage:has(.lp){max-width:1120px;padding-left:40px;padding-right:40px}

  .lp-sec{
    display:grid;grid-template-columns:1fr 1fr;gap:0 56px;align-items:center;
    /* o gap era 56px também ENTRE AS LINHAS: como cada texto (tag/título/sub/
       legenda) é uma linha do grid, a coluna de texto se espalhava pela altura
       da janela e a seção parecia quebrada. Só a coluna leva gap; o texto fica
       agrupado e centrado como um bloco. */
    align-content:center
  }
  /* seção sem janela (a meta) não vira duas colunas — e CENTRA na página */
  .lp-sec:not(:has(.lp-janela)){display:block;max-width:560px;margin-left:auto;margin-right:auto}
  .lp-sec > .lp-tag,
  .lp-sec > .lp-tit,
  .lp-sec > .lp-sub,
  .lp-sec > .lp-legenda{grid-column:1}
  /* width:100% torna a largura definida, e é dela que o aspect-ratio deriva a
     altura. Sem isso a janela herdava a altura da linha do grid (que segue o
     texto) e cada seção saía de um tamanho — 162px onde a chamada é curta. */
  .lp-sec > .lp-janela{
    grid-column:2;grid-row:1 / -1;align-self:center;
    width:100%;height:auto;justify-self:center
  }
  /* o lado alterna: sem isso a rolagem fica com um ritmo só */
  .lp-sec:nth-of-type(even) > .lp-tag,
  .lp-sec:nth-of-type(even) > .lp-tit,
  .lp-sec:nth-of-type(even) > .lp-sub,
  .lp-sec:nth-of-type(even) > .lp-legenda{grid-column:2}
  .lp-sec:nth-of-type(even) > .lp-janela{grid-column:1}

  /* a janela cabe na tela junto com a chamada */
  .lp-janela{max-width:min(100%, calc((76vh - 46px) * 9 / 16))}

  .lp-tit{font-size:2.1rem}
  .lp-hero{max-width:560px;margin-left:auto;margin-right:auto}

  /* a oferta continua em coluna única e centrada: decisão não quer largura */
  .v3sec,.v3fecho,.v3legal,.lp-vira{max-width:560px;margin-left:auto;margin-right:auto}
  .lp-vira{text-align:center}
}

/* ---- narração das demos (31/08/2026) ---- */
/* legenda com mais presença: era 13px cinza e ninguém lia */
.lp-legenda{
  font-size:var(--t5);line-height:1.55;color:var(--ink-2);min-height:3.2em
}
.lp-legenda b{color:var(--ink);font-weight:700}

/* mão que toca o botão — sem emoji: forma em CSS, igual em todo aparelho */
/* a "mão" é um dedo de verdade (emoji): grande, legível e some no toque —
   o bloco branco anterior parecia uma bolinha solta em cima do botão */
.lp-mao{
  position:absolute;z-index:8;width:0;height:0;
  opacity:0;transform:translate(6px,26px) scale(.6);pointer-events:none;
  transition:opacity .25s ease,transform .4s cubic-bezier(.2,.8,.2,1)
}
.lp-mao::before{
  content:"👆";position:absolute;left:-12px;top:-6px;font-size:46px;line-height:1;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))
}
.lp-mao.on{opacity:1;transform:none}
.lp-mao.toca{transform:translateY(8px) scale(.82)}
.lp-mao.toca::after{
  content:"";position:absolute;left:0;top:0;width:64px;height:64px;
  margin:-32px 0 0 -32px;border-radius:50%;border:4px solid var(--brand-deep,#A97BFF);
  box-shadow:0 0 24px rgba(124,63,229,.8);
  animation:lpToque .5s ease-out
}
@keyframes lpToque{from{transform:scale(.25);opacity:1}to{transform:scale(1.9);opacity:0}}
/* clarão no painel no instante do toque — o olho vai direto pra cena */
.lp-flash{animation:lpFlash .5s ease-out}
@keyframes lpFlash{0%{filter:brightness(1)}25%{filter:brightness(1.35)}100%{filter:brightness(1)}}

/* o valor que sai de uma refeição e entra na outra */
.lp-voa{
  position:absolute;z-index:9;transform:translate(-50%,-50%) scale(.6);
  padding:9px 16px;border-radius:99px;pointer-events:none;
  font-family:var(--mono);font-size:1.05rem;font-weight:700;white-space:nowrap;
  background:var(--brand,#7C3FE5);color:#fff;
  box-shadow:0 10px 30px rgba(124,63,229,.75), 0 0 0 4px rgba(124,63,229,.25);
  opacity:0;transition:opacity .25s ease,left .8s cubic-bezier(.4,0,.2,1),top .8s cubic-bezier(.4,0,.2,1),transform .25s ease
}
.lp-voa.on{opacity:1;transform:translate(-50%,-50%) scale(1.25)}
.lp-voa.indo{opacity:1;transform:translate(-50%,-50%) scale(1.05)}

/* fala do jantar e raciocínio do bot dentro da janela */
.lp-fala{top:auto;bottom:18px}
/* o raciocínio cresce como conversa: ancorado no topo, não centrado —
   centrado ele nascia flutuando no meio de uma janela vazia */
.lp-fase-pensa{
  background:var(--bg);padding:var(--s3) var(--s2);overflow-y:auto;
  display:flex;align-items:flex-start;justify-content:center
}
.lp-fase-pensa .think-card{
  margin:0;width:100%;zoom:.86;background:#fff;border-color:#ece7df;color:#111827
}
.lp-fase-pensa .think-quem{color:#111827}
.lp-fase-pensa .th-msg{color:#374151}

@media (prefers-reduced-motion: reduce){
  .lp-mao,.lp-voa{transition:none}
  .lp-mao.toca::after{animation:none}
}

/* ---- VSL: player de verdade, não demo em loop ---- */
.lp-janela-vsl{box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 28px 70px rgba(124,63,229,.22)}
.lp-tela-vsl{position:relative;aspect-ratio:9/16;background:#000}
.lp-vsl-video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
/* convite pra ligar o som: autoplay com áudio é bloqueado em todo navegador,
   então o vídeo entra mudo e a pessoa decide */
/* o convite fica sobre o print do vídeo: círculo de play + uma linha curta */
.lp-vsl-som{
  position:absolute;inset:0;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);
  border:none;cursor:pointer;padding:var(--s4);
  font-family:var(--sans);color:#fff;text-align:center;
  /* leve: o vídeo roda MUDO atrás do convite — escurecer demais esconderia
     justamente o autoplay que prova que o vídeo está vivo */
  background:linear-gradient(180deg,rgba(8,6,14,.06) 30%,rgba(8,6,14,.5))
}
.lp-vsl-play{
  display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;
  background:rgba(124,63,229,.94);box-shadow:0 14px 40px rgba(124,63,229,.5);
  animation:lpSomPulsa 2.4s ease-in-out infinite
}
.lp-vsl-cta{font-size:var(--t4);font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.lp-vsl-dur{
  font-family:var(--mono);font-size:var(--t6);color:rgba(255,255,255,.8);
  text-shadow:0 2px 10px rgba(0,0,0,.6)
}
.lp-vsl-som[hidden]{display:none}
/* sem translate: o botão ocupa a tela toda (inset:0) — o translate(-50%,-50%)
   de uma versão antiga fazia ele PULAR pra fora do cursor no apertar, o
   mouseup caía no container e o navegador descartava o clique (só o clique
   duplo escapava). O feedback de aperto fica no círculo do play. */
.lp-vsl-som:active .lp-vsl-play{transform:scale(.9)}
.lp-vsl-ico{
  width:0;height:0;flex:none;margin-left:5px;
  border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent
}
@keyframes lpSomPulsa{
  0%,100%{box-shadow:0 14px 40px rgba(124,63,229,.5), 0 0 0 0 rgba(124,63,229,.55)}
  50%    {box-shadow:0 14px 40px rgba(124,63,229,.5), 0 0 0 20px rgba(124,63,229,0)}
}
@media (prefers-reduced-motion: reduce){.lp-vsl-som{animation:none}}

/* ---- água: réplica do WaterCard do webapp (cores e medidas do original) ---- */
/* o card sozinho no meio de uma janela 9:16 ficava solto: ganha um cabeçalho
   de painel e sobe pro terço superior, como no dashboard do app */
.lp-tela-agua{
  aspect-ratio:auto;background:#0a1120;display:flex;flex-direction:column;
  gap:var(--s3);padding:var(--s3);justify-content:flex-start
}
.ag-top{
  display:flex;align-items:baseline;justify-content:space-between;
  color:#e0f2fe;font-size:15px;font-weight:700;padding:0 2px
}
.ag-top span{color:#64809f;font-size:12px;font-weight:500}
/* perspective no pai: o card gira em rotateY na fase 2, como no app */
.lp-tela-agua{perspective:900px}
.ag-card{
  position:relative;width:100%;background:#0d1526;border-radius:16px;padding:18px;
  overflow:hidden;transform-style:preserve-3d;
  transition:background .5s ease
}
.ag-card.ouro{background:#2a1f05;box-shadow:0 0 0 1px #fbbf24, 0 16px 44px rgba(251,191,36,.28)}
.ag-topo{display:flex;justify-content:space-between;align-items:baseline}
.ag-tit{display:flex;align-items:center;gap:8px;color:#e0f2fe;font-size:16px;font-weight:700}
.ag-gota{width:17px;height:20px;flex:none;fill:#38bdf8;transition:fill .5s ease}
.ag-card.ouro .ag-gota{fill:#fbbf24}
.ag-card.ouro .ag-tit{color:#fde68a}
.ag-streak{color:#7dd3fc;font-size:12px;transition:color .5s ease}
.ag-card.ouro .ag-streak{color:#fbbf24;font-weight:700}
.ag-barra{
  position:relative;height:42px;border-radius:10px;background:#16233d;
  margin-top:10px;overflow:hidden
}
.ag-fill{
  position:absolute;inset:0;width:0;background:#0284c7;border-radius:10px 0 0 10px;
  transition:width .55s cubic-bezier(.22,1,.36,1),background .5s ease
}
.ag-card.ouro .ag-fill{background:linear-gradient(90deg,#b45309,#fbbf24)}
.ag-val{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;color:#bae6fd;font-variant-numeric:tabular-nums
}
.ag-card.ouro .ag-val{color:#fff8e1}
.ag-botoes{display:flex;gap:6px;margin-top:10px}
.ag-botoes b{
  flex:1;text-align:center;padding:10px 0;border-radius:10px;background:#16233d;
  color:#7dd3fc;font-size:13px;font-weight:600;transition:background .2s,transform .2s,color .2s
}
.ag-botoes b.on{background:#0284c7;color:#fff;transform:scale(.94)}
.ag-msg{margin:11px 0 0;color:#64809f;font-size:12px;line-height:1.4}
.ag-card.ouro .ag-msg{color:#d6bb7a}
/* celebração: mascote + "Meta batida!", como no app */
.ag-festa{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;background:rgba(42,31,5,.86);
  opacity:0;visibility:hidden;transition:opacity .45s ease
}
.ag-festa.on{opacity:1;visibility:visible}
.ag-mascote{width:56px;height:66px}
.ag-mascote .ag-gota{width:56px;height:66px;fill:#fbbf24}
.ag-festa.on .ag-mascote{animation:agPula .7s cubic-bezier(.22,1,.36,1)}
@keyframes agPula{0%{transform:translateY(22px) scale(.7);opacity:0}60%{transform:translateY(-6px) scale(1.06)}100%{transform:none;opacity:1}}
.ag-festa-tit{font-family:var(--display);font-size:21px;font-weight:800;color:#fff}
.ag-festa-sub{font-size:12px;color:#fde68a}
@media (prefers-reduced-motion: reduce){
  .ag-fill{transition:none}
  .ag-festa.on .ag-mascote{animation:none}
}

/* ---- depois do cálculo: a meta dela, comemorada ----
   Antes só trocava uma nota em cinza — não dava nenhuma recompensa a quem
   parou pra preencher cinco campos. */
.lp-meta-festa{display:none}
.lp-meta-pronta .lp-meta-festa{
  display:block;margin:var(--s3) 0 0;padding:var(--s3) 0 0;
  border-top:1px solid var(--line);animation:lpMetaEntra .5s cubic-bezier(.2,.8,.2,1) both
}
@keyframes lpMetaEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lp-meta-selo{
  display:inline-block;font-family:var(--mono);font-size:var(--t6);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#C6A6FF;
  background:rgba(124,63,229,.18);border:1px solid rgba(124,63,229,.45);
  padding:var(--s1) 10px;border-radius:99px
}
.lp-meta-frase{
  margin:var(--s2) 0 0;font-size:var(--t5);line-height:1.55;color:var(--ink-2);text-wrap:pretty
}
.lp-meta-frase b{color:var(--ink);font-weight:700;font-family:var(--mono);letter-spacing:-.02em}
.lp-meta-extra{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin:var(--s3) 0 0;padding:var(--s2) var(--s3);border-radius:12px;
  background:rgba(56,189,248,.10);border:1px solid rgba(56,189,248,.32)
}
.lp-meta-extra span{font-size:var(--t5);color:#9ED8F5}
.lp-meta-extra b{font-family:var(--mono);font-size:var(--t4);font-weight:700;color:#E0F2FE}
@media (prefers-reduced-motion: reduce){.lp-meta-pronta .lp-meta-festa{animation:none}}

/* ---- camadas da celebração da água (mesmas do WaterCard) ---- */
.ag-flood{
  position:absolute;left:0;right:0;bottom:0;height:0;z-index:4;
  background:linear-gradient(180deg,rgba(56,189,248,.55),rgba(2,132,199,.9));
  pointer-events:none
}
.ag-crest{
  position:absolute;left:0;bottom:0;width:744px;height:22px;z-index:5;display:none;
  pointer-events:none;fill:rgba(56,189,248,.75)
}
.ag-fx{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.ag-bolha{
  position:absolute;bottom:0;border-radius:50%;border:1.5px solid rgba(224,242,254,.8);
  display:block
}
.ag-raios{
  position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px 0 0 -130px;
  z-index:6;display:none;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(rgba(251,191,36,.30) 0deg 8deg, transparent 8deg 26deg);
  border-radius:50%;
  -webkit-mask-image:radial-gradient(circle,#000 34%,transparent 72%);
          mask-image:radial-gradient(circle,#000 34%,transparent 72%)
}

/* ---- pular: números com mais impacto ---- */
.lp-saiu{opacity:.5;animation:lpSai .55s cubic-bezier(.36,.07,.19,.97);transition:opacity .4s ease}
@keyframes lpSai{
  0%{transform:translateX(0)}20%{transform:translateX(-7px)}45%{transform:translateX(6px)}
  70%{transform:translateX(-4px)}100%{transform:translateX(0)}
}
.lp-bateu{animation:lpBate .8s cubic-bezier(.22,1,.36,1)}
@keyframes lpBate{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(124,63,229,0)}
  30%{transform:scale(1.12);box-shadow:0 0 0 6px rgba(124,63,229,.45), 0 0 40px rgba(124,63,229,.6)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(124,63,229,0)}
}
.lp-conta{
  display:inline-block;animation:lpConta .8s ease-out;
  color:var(--brand-deep,#A97BFF)
}
@keyframes lpConta{0%{transform:scale(1)}30%{transform:scale(1.9)}100%{transform:scale(1)}}
/* o número que voa cresce ao sair e ESTOURA ao chegar */
.lp-voa.chegou{
  opacity:0;transform:translate(-50%,-50%) scale(2.3);
  transition:opacity .4s ease,transform .4s ease
}
@media (prefers-reduced-motion: reduce){
  .lp-bateu,.lp-conta{animation:none}
}

/* ---- doce, fase 3: registro do Petisco Extra e o abate no jantar ----
   Grande e devagar de propósito: é a cena que mostra que comer um doce não
   quebra o dia. Cada peça entra em sequência, não tudo de uma vez. */
.lp-fase-abate{
  background:var(--bg);padding:var(--s4) var(--s3);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s3)
}
.ab-selo{
  align-self:flex-start;font-family:var(--mono);font-size:var(--t6);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#C6A6FF;
  background:rgba(124,63,229,.18);border:1px solid rgba(124,63,229,.45);
  padding:var(--s1) 10px;border-radius:99px;
  opacity:0;transition:opacity .4s ease
}
.lp-fase-abate.mostra .ab-selo{opacity:1}
.ab-item{
  display:flex;align-items:center;gap:var(--s3);
  background:var(--surface);border:1.5px solid var(--line);border-radius:16px;
  padding:var(--s3);opacity:0;transform:translateY(16px) scale(.94)
}
.ab-item.on{
  opacity:1;transform:none;
  animation:abEntra .6s cubic-bezier(.22,1,.36,1)
}
@keyframes abEntra{
  0%{opacity:0;transform:translateY(22px) scale(.9)}
  60%{transform:translateY(-4px) scale(1.03)}
  100%{opacity:1;transform:none}
}
.ab-emoji{font-size:30px;line-height:1;flex:none}
.ab-nome{flex:1;font-size:var(--t4);font-weight:700;color:var(--ink);line-height:1.2}
.ab-nome small{display:block;font-size:var(--t6);font-weight:500;color:var(--ink-3);margin-top:3px}
.ab-kcal{
  font-family:var(--mono);font-size:var(--t4);font-weight:700;color:#FFBE63;white-space:nowrap
}
/* a seta que liga o petisco ao jantar */
.ab-seta{
  display:flex;align-items:center;gap:var(--s2);align-self:center;
  font-size:var(--t6);color:var(--ink-2);opacity:0;transition:opacity .4s ease
}
.ab-seta.on{opacity:1}
.ab-seta i{
  width:0;height:0;display:block;
  border-top:11px solid var(--brand-deep,#A97BFF);
  border-left:8px solid transparent;border-right:8px solid transparent;
  animation:abDesce 1.2s ease-in-out infinite
}
@keyframes abDesce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.ab-jantar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:var(--surface);border:1.5px solid var(--line);border-radius:16px;
  padding:var(--s3);opacity:0;transform:translateY(12px);
  transition:opacity .45s ease,transform .45s ease,border-color .4s ease
}
.ab-jantar.on{opacity:1;transform:none;border-color:var(--brand-deep,#A97BFF)}
.ab-jantar-nome{font-size:var(--t4);font-weight:700;color:var(--ink)}
.ab-jantar-kcal{font-size:var(--t5);color:var(--ink-2)}
.ab-jantar-kcal b{
  font-family:var(--mono);font-size:var(--t2);font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;transition:color .3s ease
}
.ab-jantar-kcal b.abaixando{color:#FFBE63}
.ab-fecho{
  margin:0;text-align:center;font-size:var(--t5);color:var(--ink-2);
  opacity:0;transition:opacity .5s ease
}
.ab-fecho.on{opacity:1;color:var(--ink)}
@media (prefers-reduced-motion: reduce){
  .ab-item.on{animation:none}
  .ab-seta i{animation:none}
}

/* ---- rodapé institucional ----
   Mesmos dados do rodapé original (site/index_backup.html): razão social,
   CNPJ, contato e as quatro políticas. Exigido pelo CDC na venda online e
   pelas políticas de anúncio da Meta/TikTok. */
.lp-rodape{
  margin:var(--s6) 0 0;padding:var(--s5) 0 0;border-top:1px solid var(--line);
  text-align:left;color:var(--ink-3);font-size:var(--t6);line-height:1.6
}
.lp-rod-marca{font-family:var(--display);font-size:var(--t5);font-weight:700;color:var(--ink)}
.lp-rod-empresa{margin-top:var(--s1);color:var(--ink-2)}
.lp-rod-contato{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-top:var(--s2)}
.lp-rod-contato a{color:var(--brand-deep);text-decoration:none;font-weight:600}
.lp-rod-contato a:hover{text-decoration:underline}
.lp-rod-links{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);
  margin:var(--s3) 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--line)
}
.lp-rod-links a{color:var(--ink-2);text-decoration:none;font-weight:600}
.lp-rod-links a:hover{color:var(--ink);text-decoration:underline}
.lp-rod-links a:focus-visible,.lp-rod-contato a:focus-visible{outline:2px solid var(--brand-deep);outline-offset:3px;border-radius:4px}
.lp-rod-nota{margin:var(--s3) 0 0;color:var(--ink-3);text-wrap:pretty}
.lp-rod-nota b{color:var(--ink-2);font-weight:700}

/* CTA do herói: quem vem de anúncio precisa de uma saída imediata */
.lp-hero .lp-hero-cta{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:var(--s3);padding:15px 28px;border:none;border-radius:14px;cursor:pointer;
  font-family:var(--sans);font-size:var(--t4);font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 10px 30px rgba(124,63,229,.4)
}
.lp-hero .lp-hero-cta:active{transform:scale(.98)}
.lp-hero .lp-hero-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---- botão do WhatsApp ----
   Canto direito: o balão de depoimento ocupa o esquerdo. Some com o checkout
   aberto — nada por cima do pagamento. */
.lp-zap{
  position:fixed;right:16px;bottom:16px;z-index:50;
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 14px 34px rgba(37,211,102,.42), 0 2px 6px rgba(0,0,0,.3);
  transition:transform .15s ease,background .15s ease
}
.lp-zap svg{width:30px;height:30px;display:block}
.lp-zap:hover{background:#20ba5a;transform:scale(1.06)}
.lp-zap:active{transform:scale(.96)}
.lp-zap:focus-visible{outline:3px solid #fff;outline-offset:3px}
body.co-open .lp-zap,body.lp-modal-on .lp-zap{display:none}
/* sobe acima da barra fixa quando ela existe (tela de preço isolada) */
body.has-v3fab .lp-zap{bottom:84px}
@media (prefers-reduced-motion: reduce){.lp-zap{transition:none}}

/* ---- herói: a frase da função Planejar no lugar do botão de preço (31/08) ---- */
.lp-hero-planejar{
  display:block;max-width:420px;margin:0 auto 10px;padding:15px 20px;
  border-radius:16px;cursor:pointer;text-align:center;
  font-family:var(--display);font-size:1.06rem;font-weight:700;line-height:1.4;
  color:#fff;background:linear-gradient(135deg,rgba(124,63,229,.28),rgba(124,63,229,.10));
  border:1.5px solid rgba(169,123,255,.55);
  box-shadow:0 10px 34px rgba(124,63,229,.28);
  animation:lpHeroGlow 2.4s ease-in-out infinite
}
.lp-hero-planejar b{color:var(--brand-deep,#A97BFF)}
.lp-hero-planejar i{font-style:normal;display:inline-block;animation:repSeta .9s ease-in-out infinite}
@keyframes lpHeroGlow{
  0%,100%{box-shadow:0 10px 34px rgba(124,63,229,.28);border-color:rgba(169,123,255,.55)}
  50%{box-shadow:0 10px 44px rgba(124,63,229,.55);border-color:rgba(169,123,255,.95)}
}
.lp-hero-planejar:active{transform:scale(.98)}
.lp-hero-planejar:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---- chamada de impacto da função Planejar, antes do vídeo do jantar ---- */
.lp-nova{
  position:relative;max-width:560px;margin:0 auto var(--s5);padding:26px 22px 24px;
  border-radius:22px;text-align:center;overflow:hidden;
  background:linear-gradient(160deg,#1b1030,#0d0a18 70%);
  border:1.5px solid rgba(169,123,255,.5);
  box-shadow:0 18px 60px rgba(124,63,229,.35)
}
.lp-nova::before{
  content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.14),transparent);
  animation:lpNovaSheen 2.8s ease-in-out infinite
}
@keyframes lpNovaSheen{0%{left:-70%}55%,100%{left:130%}}
.lp-nova-tag{
  display:inline-block;padding:6px 14px;border-radius:99px;margin-bottom:10px;
  font-size:.74rem;font-weight:800;letter-spacing:.14em;
  color:#fff;background:linear-gradient(135deg,#7C3FE5,#5E2BB8);
  box-shadow:0 6px 20px rgba(124,63,229,.5);
  animation:lpNovaPulsa 1.6s ease-in-out infinite
}
@keyframes lpNovaPulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.lp-nova-tit{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2.2rem,9vw,3rem);line-height:1.05;margin:2px 0 8px;
  background:linear-gradient(90deg,#C9A8FF,#7C3FE5 55%,#C9A8FF);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.lp-nova-sub{font-size:1.02rem;line-height:1.5;color:var(--ink-2,#C9CDD8);margin:0 auto;max-width:400px}
@media (prefers-reduced-motion: reduce){
  .lp-hero-planejar,.lp-nova::before,.lp-nova-tag,.lp-hero-planejar i{animation:none}
}

/* o prato calculado do jantar aparece INTEIRO na janela: sem os botões
   fantasma da demo e um passo menor de zoom — nada de rolagem interna */
#lpJanAfinar .ap-screen{zoom:.7}
#lpJanAfinar .ap-btns2{display:none}
#lpJanAfinar .ap-foods{overflow:visible}

/* fecho de valorização do jantar planejado: entra por cima do ajuste fino */
.lp-jan-fecho{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:24px;gap:6px;background:rgba(10,8,16,.82);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:ljfIn .5s cubic-bezier(.2,.9,.3,1.15) both
}
@keyframes ljfIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.ljf-check{
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;font-weight:800;color:#fff;margin-bottom:8px;
  background:linear-gradient(135deg,#7C3FE5,#5E2BB8);
  box-shadow:0 12px 34px rgba(124,63,229,.6);
  animation:ljfCheck .55s cubic-bezier(.2,1.4,.4,1) both .15s
}
@keyframes ljfCheck{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.ljf-tit{
  font-family:var(--display);font-size:1.35rem;font-weight:800;line-height:1.25;
  color:#fff;margin:0
}
.ljf-sub{font-size:1rem;line-height:1.5;color:#C9CDD8;margin:0;max-width:300px}
@media (prefers-reduced-motion: reduce){.lp-jan-fecho,.ljf-check{animation:none}}

/* trilha dos 3 passos do Planejar: sempre visível no topo da janela */
.lp-passos{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;gap:5px;padding:5px 7px;border-radius:99px;white-space:nowrap;
  background:rgba(10,8,16,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(169,123,255,.28)
}
.lp-passos span{
  padding:4px 9px;border-radius:99px;font-size:.66rem;font-weight:700;
  letter-spacing:.02em;color:#8E93A3;transition:background .3s ease,color .3s ease
}
.lp-passos span.on{
  color:#fff;background:linear-gradient(135deg,#7C3FE5,#5E2BB8);
  box-shadow:0 4px 14px rgba(124,63,229,.55)
}

/* ---- trava do eixo horizontal (31/08) ----
   Elementos animados (esteira, sheen, números voando) somavam ~30px de
   overflow: a página inteira arrastava pro lado no celular e o navegador
   engolia toques como se fossem gesto de scroll — inclusive o play das VSLs.
   O X fica travado na raiz; só a página rola, e só na vertical. */
html,body{overflow-x:hidden;overflow-x:clip;max-width:100%}
#stage{overflow-x:clip}
/* toque responde na hora (sem espera de double-tap) nos controles das demos */
.lp-vsl-som,.btn,.selcard,.lp-hero-planejar{touch-action:manipulation}

/* ---- celular: as janelas de fases da foto e do jantar cabem INTEIRAS ----
   Em 9/16 na largura cheia elas passavam de 600px: o ajuste fino estourava a
   tela e a legenda ficava fora de vista. A janela encolhe pra caber em ~58vh
   (mantendo o 9/16) e centraliza — painel + legenda visíveis juntos. */
@media (max-width:480px){
  #lpFoto .lp-janela,
  #lpJantar .lp-janela{
    width:min(100%, calc(58vh * 0.5625 + 18px));
    margin-left:auto;margin-right:auto
  }
}
/* na janela estreita o selo MONTAR atropelava o texto de calorias */
@media (max-width:480px){
  .lp-fase-afinar .ap-montar{display:none}
}
/* trilha dos passos compacta na janela estreita do celular */
@media (max-width:480px){
  .lp-passos{gap:3px;padding:4px 5px;top:8px;max-width:calc(100% - 16px)}
  .lp-passos span{padding:3px 6px;font-size:.58rem}
}

/* ---- ajuste fino compacto no celular (só o ALMOÇO/foto) ----
   A janela encolhida (58vh) mostrava só 1 alimento: zoom um pouco menor
   (.82 -> .70) + espaços internos apertados + fora a linha fantasma
   Restaurar/Cancelar (enfeite) — os 4 alimentos aparecem inteiros com o
   rodapé. O jantar já estava bom e fica intocado. */
@media (max-width:480px){
  #lpFoto .lp-fase-afinar .ap-screen{zoom:.66;padding:12px 12px 10px}
  #lpFoto .lp-fase-afinar .ap-row{margin-top:7px}
  #lpFoto .lp-fase-afinar .ap-noprato{margin:7px 0 0}
  #lpFoto .lp-fase-afinar .ap-queima-lbl{margin:5px 0 4px}
  #lpFoto .lp-fase-afinar .ap-tip{padding:8px 11px}
  #lpFoto .lp-fase-afinar .ap-foods{gap:6px;margin-top:7px}
  #lpFoto .lp-fase-afinar .ap-food{padding:7px 10px}
  #lpFoto .lp-fase-afinar .ap-food-ctl{margin-top:4px}
  #lpFoto .lp-fase-afinar .ap-macrobar{margin:8px 0 2px;height:16px}
  #lpFoto .lp-fase-afinar .ap-btns2{margin-top:7px}
  #lpFoto .lp-fase-afinar .ap-btns2 span{padding:8px 0}
  #lpFoto .lp-fase-afinar .ap-btns2.ghost{display:none}
  #lpFoto .lp-fase-afinar .ap-confirm{margin-top:7px;padding:11px}
}

/* pular refeição compacto no celular: painel mais baixo sem perder card */
@media (max-width:480px){
  .lp-tela-painel .rep-panel{zoom:.72}
  .lp-tela-painel .rep-top{margin:0 0 7px}
  .lp-tela-painel .rep-card{padding:8px 10px;margin-bottom:7px}
  .lp-tela-painel .rep-head{margin-bottom:5px}
  .lp-tela-painel .rep-icon{width:36px;height:36px;font-size:22px;border-radius:11px}
  .lp-tela-painel .rep-b{padding:8px 0}
}

/* raciocínio do bot (jantar) na janela compacta: o card encolhe junto
   (zoom .74 -> mais largura útil pras bolhas) e ganha respiro entre as
   mensagens — antes o texto quebrava apertado e embolava */
@media (max-width:480px){
  #lpJantar .lp-fase-pensa{padding:46px 8px 10px}
  #lpJantar .lp-fase-pensa .think-card{zoom:.74;padding:13px}
  #lpJantar .lp-fase-pensa .think-head{margin-bottom:9px}
  #lpJantar .lp-fase-pensa .th-msg{padding:10px 12px;margin:0 0 9px;line-height:1.55}
  #lpJantar .lp-fase-pensa .th-macros{gap:10px;margin:4px 0 12px}
}

/* ============================================================
   Seção TREINOS PERSONALIZADOS (lançamento do módulo) — card escuro
   premium antes do card de planos; selo neon + bonecos 3D do app.
   ============================================================ */
.tp-sec{position:relative;background:#0b0d13;border-radius:22px;padding:24px 20px 20px;
  margin:0 0 var(--s6, 28px);color:#F4F6FB;overflow:hidden;
  box-shadow:0 16px 40px rgba(11,13,19,.35)}
.tp-glow{position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(124,63,229,.5), transparent);pointer-events:none}
.tp-selo{display:inline-flex;align-items:center;gap:6px;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.68rem;font-weight:800;letter-spacing:.09em;color:#052e11;background:#4ade80;
  padding:5px 10px;border-radius:99px;box-shadow:0 0 10px rgba(74,222,128,.85),0 0 24px rgba(74,222,128,.4)}
@media (prefers-reduced-motion: no-preference){
  .tp-selo{animation:tpSeloPulse 1.8s ease-in-out infinite}
  @keyframes tpSeloPulse{0%,100%{box-shadow:0 0 8px rgba(74,222,128,.7)}
    50%{box-shadow:0 0 16px rgba(74,222,128,1),0 0 30px rgba(74,222,128,.6)}}
}
.tp-tit{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.25rem,5.4vw,1.5rem);line-height:1.22;margin:12px 0 8px;color:#F4F6FB}
.tp-tit b{color:#B794F6}
.tp-sub{font-size:.94rem;line-height:1.55;color:#C9CDD8;margin:0 0 16px}
.tp-strip{display:flex;gap:8px;margin:0 0 16px}
/* cards 3D animados como no app: os 2 quadros (início/fim) em cross-fade,
   cada card com um pequeno atraso (--tpd) pra vitrine ganhar vida */
.tp-frame{position:relative;flex:1;min-width:0;aspect-ratio:2/3;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:#0a0e18}
.tp-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tp-frame .tp-b{opacity:0}
/* revezamento: cada card se mexe 3x (1º terço do ciclo de 10,8s) e para,
   passando a vez pro seguinte via animation-delay (--tpd = i × 3,6s) */
@media (prefers-reduced-motion: no-preference){
  .tp-frame .tp-b{animation:tpVez 10.8s ease-in-out infinite;animation-delay:var(--tpd,0s)}
  @keyframes tpVez{
    0%{opacity:0}5.5%{opacity:1}11.1%{opacity:0}
    16.6%{opacity:1}22.2%{opacity:0}27.7%{opacity:1}
    33.3%{opacity:0}100%{opacity:0}
  }
}
.tp-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.tp-list li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.45;color:#C9CDD8}
.tp-list li b{color:#fff}
.tp-check{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(124,63,229,.25);
  color:#B794F6;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;margin-top:1px}
.tp-oferta{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,rgba(124,63,229,.28),rgba(124,63,229,.12));
  border:1.5px solid rgba(183,148,246,.5);border-radius:14px;padding:12px 14px}
.tp-oferta strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:.93rem;line-height:1.4;color:#F4F6FB}
.tp-oferta strong em{font-style:normal;color:#4ade80}
.tp-gift{font-size:1.4rem}
.tp-nota{font-size:.74rem;color:#8E93A3;margin:8px 2px 0;line-height:1.4}

/* ============================================================
   V7 — seções novas (s1..s16) — 14/09/2026
   Reusa os tokens do tema escuro (.lp/.v3preco) e as peças do v6:
   lp-janela, ap-screen, chat-bubble, v3plano, v3fecho, v3inclui.
   ============================================================ */

/* --- s1 hero: balão + card estático do editor + linha de fecho --- */
.lp-hero .lp-janela{max-width:420px;margin:0 auto var(--s4);text-align:left}
.s1-tela{position:relative;border-radius:15px;overflow:hidden;background:#101018;
  padding:var(--s2) var(--s2) var(--s3)}
.s1-balao{display:inline-block;background:#fff;color:#2B2733;font-weight:700;
  font-size:.86rem;line-height:1.35;padding:8px 12px;border-radius:14px 14px 14px 4px;
  margin:2px 0 10px;max-width:88%;text-align:left}
.s1-tela .ap-screen{margin-top:0;animation:none}
.s1-pronto{margin:12px 2px 2px;font-size:.85rem;line-height:1.45;color:#D7DBE6;text-align:left}
.s1-pronto b{color:#4ADE9A}

/* --- rótulos/CTAs compartilhados --- */
.lp-btn-ghost{display:block;width:100%;max-width:420px;margin:var(--s3) auto 0;
  padding:14px 20px;border-radius:14px;background:transparent;color:var(--brand-deep);
  border:1.5px solid var(--brand);font-family:var(--display);font-size:var(--t4);
  font-weight:700;cursor:pointer}
.lp-btn-ghost:active{transform:scale(.99)}
.lp-link-refazer{display:block;margin:var(--s2) auto 0;background:none;border:none;
  color:var(--ink-2);font-size:var(--t6);text-decoration:underline;cursor:pointer}
.s6-pos{margin-top:var(--s2)}
.lp-meta-nota{margin:var(--s2) 0 0;font-size:var(--t6);line-height:1.5;color:var(--ink-2);
  text-wrap:pretty}

/* --- s2: demo animada (fala -> calcula -> prato) com legenda queimada --- */
.s2-fase-fala{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:16px;padding:15% 18px 18px;background:var(--bg)}
/* bonequinho falando: avatar com anéis de som pulsando */
.s2-fala-row{display:flex;align-items:flex-start;gap:12px;max-width:92%}
.s2-boneco{position:relative;flex:none;width:54px;height:54px;border-radius:50%;
  background:#fff;border:2px solid #7C3FE5;display:flex;align-items:center;
  justify-content:center;font-size:1.7rem;box-shadow:0 8px 22px rgba(124,63,229,.45)}
.s2-boneco span{transform:scaleX(-1)}
.s2-anel{position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(169,123,255,.65);
  animation:s2Anel 1.6s ease-out infinite}
.s2-anel2{animation-delay:.8s}
@keyframes s2Anel{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion: reduce){.s2-anel{animation:none;opacity:.4}}
.s2-mic{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;
  letter-spacing:.02em;color:#C6A6FF;background:rgba(124,63,229,.14);
  border:1px solid rgba(124,63,229,.4);border-radius:99px;padding:8px 14px}
.s2-balao{font-size:1.05rem;max-width:100%;min-height:1.4em}
.s2-fase-calc{display:flex;align-items:flex-start;justify-content:center;padding:14% 18px 18px;background:var(--bg)}
.s2-calc{width:100%;max-width:340px;background:#fff;color:#111827;border-radius:20px;
  padding:18px 16px;box-shadow:0 16px 44px rgba(0,0,0,.35);text-align:left}
.s2-calc-tit{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#6E6878;margin-bottom:10px}
.s2-kcal{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.s2-kcal b{font-family:var(--display);font-size:2.3rem;font-weight:800;line-height:1;
  color:#2B2733;font-variant-numeric:tabular-nums}
.s2-kcal span{font-size:.82rem;color:#6E6878}
.s2-bar{display:grid;grid-template-columns:86px 1fr 38px;align-items:center;gap:8px;margin:8px 0}
.s2-bar span{font-size:.74rem;font-weight:600;color:#4B4655}
.s2-bar i{display:block;height:12px;border-radius:99px;background:#EEE9F6;overflow:hidden}
.s2-bar b{display:block;height:100%;width:0;border-radius:99px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.s2-bar .mp{background:#7C3FE5}
.s2-bar .mc{background:#22b573}
.s2-bar .mg{background:#f0a13d}
.s2-bar em{font-style:normal;font-size:.74rem;font-weight:800;color:#2B2733;text-align:right;
  font-variant-numeric:tabular-nums}
.s2-status{margin-top:12px;font-size:.76rem;font-weight:700;color:#B45309;
  background:#FFF4E0;border-radius:10px;padding:8px 10px;text-align:center}
/* palco de altura variável: a moldura acompanha o conteúdo da etapa atual */
.s2-tela{position:relative;border-radius:15px;overflow:hidden;background:#000;
  aspect-ratio:auto;height:auto;padding-bottom:14px}
.s2-stage{position:relative;overflow:hidden;transition:height .4s ease;min-height:180px}
.s2-stage .lp-fase{position:absolute;top:0;left:0;right:0;bottom:auto;height:auto}
#s2F3.lp-fase-afinar{padding-top:48px;padding-bottom:6px}
#s2F3 .ap-screen{height:auto;overflow:visible}
#s2F3 .ap-foods{flex:none;overflow:visible;min-height:0}
/* legenda de marketing: grande, caixa alta, palavra-chave destacada — agora
   como bloco abaixo do palco, então a moldura nunca sobra em preto */
.s2-cap{
  display:block;width:calc(100% - 28px);margin:12px auto 0;padding:12px 14px;
  border-radius:16px;text-align:center;
  background:rgba(124,63,229,.12);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-family:var(--display);font-size:1.18rem;font-weight:800;line-height:1.28;
  letter-spacing:.01em;text-transform:uppercase;text-wrap:balance;white-space:normal;
  text-shadow:0 2px 10px rgba(0,0,0,.6);min-height:3.2em;
  opacity:0;transform:scale(.94);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none
}
.s2-cap.on{opacity:1;transform:none}
.s2-cap b{color:#FFD84D}
@media (prefers-reduced-motion: reduce){.s2-cap{transform:none}}

/* --- vídeo ausente: o poster fica, nada de retângulo preto --- */
.video-missing video{display:none}
.lp-poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lp-tela-vsl .lp-poster-img{position:static;aspect-ratio:9/16}
.video-missing .lp-vsl-dur{display:none}

/* --- s3/s14: blocos numerados --- */
.s3-grid{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s2);text-align:left}
.s3-blk{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:var(--s3);box-shadow:var(--sombra-card)}
.s3-num{display:block;font-family:var(--display);font-size:2rem;font-weight:800;
  line-height:1;color:var(--brand-deep);margin-bottom:var(--s1)}
.s3-blk-tit{margin:0 0 var(--s1);font-family:var(--display);font-size:var(--t4);
  font-weight:700;color:var(--ink)}
.s3-blk-txt{margin:0;font-size:var(--t5);line-height:1.55;color:var(--ink-2)}

/* --- s5: blocos empilhados com linha de abertura --- */
.lp-blk{margin-top:var(--s4);text-align:center}
.lp-blk:first-of-type{margin-top:var(--s2)}
.lp-blk-linha{margin:0 0 var(--s2);font-size:var(--t5);line-height:1.5;color:var(--ink)}
.lp-blk-linha b{font-weight:700}

/* --- s9: absolvição em bolhas --- */
.s9-sec{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:var(--s4) var(--s3);margin-left:auto;margin-right:auto}
.s9-bolhas{max-width:480px;margin:0 auto}
.s9-bolha{display:none}
.s9-bolha.on{display:flex;animation:s9In .32s cubic-bezier(.2,.8,.2,1)}
@keyframes s9In{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.s9-bolha .chat-bubble{background:var(--card-2);border-color:var(--line)}
.s9-btn{max-width:420px;margin:var(--s2) auto 0;opacity:0;transition:opacity .4s ease}
.s9-btn.on{opacity:1}
@media (prefers-reduced-motion: reduce){
  .s9-bolha.on{animation:none}
  .s9-btn{transition:none}
}

/* --- s10: lista institucional com check verde --- */
.s10-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:var(--s3);box-shadow:var(--sombra-card);text-align:left}
.s10-list{list-style:none;margin:0;padding:0}
.s10-list li{display:flex;gap:10px;align-items:flex-start;padding:var(--s1) 0;
  font-size:var(--t5);line-height:1.5;color:var(--ink)}
.s10-check{flex:none;width:20px;height:20px;border-radius:50%;background:var(--v3good-luz);
  color:var(--v3good);font-style:normal;font-weight:800;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.s10-list a{color:var(--brand-deep);text-decoration:none}

/* --- s12: cards de plano do v7 --- */
.s12-meta{margin:0 0 var(--s2);font-size:var(--t5);line-height:1.5;color:var(--ink-2)}
.s12-meta b{color:var(--ink);font-variant-numeric:tabular-nums}
.s12card{padding:var(--s4) var(--s3) var(--s3)}
.s12card .v3flag{background:var(--brand);color:#fff}
.s12-nome{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  font-family:var(--display);font-size:var(--t4);font-weight:700;color:var(--ink)}
.s12-preco{display:block;font-family:var(--display);font-size:2rem;font-weight:800;
  line-height:1.15;color:var(--ink);margin:var(--s1) 0;font-variant-numeric:tabular-nums}
.s12-linha{display:block;font-size:var(--t5);line-height:1.5;color:var(--ink-2)}
.s12-linha b{color:var(--ink)}
.s12-mini{display:block;margin-top:var(--s1);font-size:var(--t6);line-height:1.45;
  color:var(--soft)}
.s12card.sel{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand),var(--sombra-card)}

/* --- desktop --- */
@media (min-width:768px){
  .s12planos{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
}
@media (min-width:900px){
  /* s5 fica em sequência vertical mesmo no desktop (os mockups empilhados) */
  #s5DiaAjusta{display:block;max-width:560px;margin-left:auto;margin-right:auto}
  /* s3/s14: três colunas */
  #s3Mecanismo,#s14DepoisDoPagamento{display:block;max-width:none}
  #s3Mecanismo .s3-grid,#s14DepoisDoPagamento .s3-grid{grid-template-columns:repeat(3,1fr)}
  #s9Absolvicao{max-width:640px}
}

/* --- ajustes pós-teste 14/09 --- */
/* barra fixa e botão de pagamento SEMPRE em uma linha (até 360px) */
#s12Cta,.v3fab .btn{white-space:nowrap}
@media (max-width:400px){
  #s12Cta{font-size:.98rem;padding-left:12px;padding-right:12px}
  .v3fab .btn{font-size:.95rem;padding-left:12px;padding-right:12px}
}

/* hero: card estático sem controles (linhas compactas) */
.s1-prato .ap-food-top{align-items:center}
.s1-prato .ap-food{padding-bottom:10px}

/* s11: esteira de antes/depois (mesma do v6) + cards de depoimento */
.v3faixa{
  overflow:hidden;margin:0 -20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)
}
.v3esteira{
  display:flex;gap:0;width:max-content;
  animation:v3run calc(var(--n,10) * 7.6s) linear infinite
}
.v3esteira.parada{animation-play-state:paused}
@keyframes v3run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.v3esteira{animation:none}}
.v3res{position:relative;flex:0 0 190px;margin:0;background:var(--surface)}
.v3res img{width:190px;height:190px;object-fit:cover;display:block}
.v3res figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:var(--s4) var(--s2) var(--s2);
  background:linear-gradient(transparent,rgba(18,14,26,.55) 38%,rgba(18,14,26,.88));color:#fff
}
.v3res-kg{
  font-family:var(--display);font-size:var(--t4);font-weight:800;line-height:1.1;
  font-variant-numeric:tabular-nums;white-space:nowrap
}
.v3res-nome{
  font-size:var(--t6);line-height:1.3;margin-top:1px;color:rgba(255,255,255,.88);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.s11-aut{margin:var(--s3) 0 var(--s2);font-size:var(--t6);color:var(--soft);line-height:1.45}
.s11-deps{display:grid;gap:var(--s2);text-align:left}
.s11-dep{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:var(--s3);box-shadow:var(--sombra-card)}
.s11-dep blockquote{margin:0 0 var(--s1);font-size:var(--t5);line-height:1.55;color:var(--ink)}
.s11-dep figcaption{font-size:var(--t6);font-weight:700;color:var(--ink-2)}
@media (min-width:900px){
  .s11-deps{grid-template-columns:repeat(3,1fr)}
  #s11Prova{display:block;max-width:720px;margin-left:auto;margin-right:auto}
}

/* --- s11bTudoNoApp: três cards + treinos --- */
.s11b-grid{display:grid;grid-template-columns:1fr;gap:var(--s4);margin-top:var(--s2);text-align:center}
.s11b-card .lp-janela{max-width:420px;margin:0 auto}
.s11b-tit{margin:0 0 var(--s1);font-family:var(--display);font-size:var(--t4);
  font-weight:700;color:var(--ink)}
.s11b-txt{margin:0 0 var(--s2);font-size:var(--t5);line-height:1.55;color:var(--ink-2)}
.s11b-tela{position:relative;border-radius:15px;overflow:hidden;background:#0a1120;
  aspect-ratio:auto}
.s11b-tela-img{background:#F4F6FB;line-height:0}
.s11b-img{width:100%;display:block}
.pg-card{background:#fff;color:#111827;border-radius:16px;margin:var(--s2);
  padding:14px 14px 12px;text-align:left;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.pg-head{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#6E6878;margin-bottom:6px}
.pg-kg{font-family:var(--display);font-size:2rem;font-weight:800;line-height:1;
  color:#2B2733;font-variant-numeric:tabular-nums}
.pg-linha{font-size:.82rem;color:#6E6878;margin:4px 0 10px;font-variant-numeric:tabular-nums}
.pg-chart{width:100%;height:auto;display:block}
.pg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pg-chips span{font-size:.7rem;font-weight:700;color:#4B4655;background:#F1EEF8;
  border-radius:99px;padding:5px 10px;font-variant-numeric:tabular-nums}
.s11b-treinos{margin-top:var(--s4);text-align:left}
.s11b-treinos .tp-tit{font-size:var(--t3)}
#s11bTudoNoApp .lp-vira{margin-top:var(--s4)}
.v3inclui-linha li b{display:inline}
@media (min-width:900px){
  #s11bTudoNoApp{display:block;max-width:none}
  #s11bTudoNoApp > .lp-tag,#s11bTudoNoApp > .lp-tit,#s11bTudoNoApp > .lp-sub{max-width:640px;
    margin-left:auto;margin-right:auto}
  .s11b-grid{grid-template-columns:repeat(3,1fr);align-items:start}
  .s11b-treinos{max-width:720px;margin-left:auto;margin-right:auto}
}

/* legenda da fase de ajuste do brigadeiro: lockup com pesos diferentes */
.s5-cap{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:6;
  margin:0;padding:14px 22px;border-radius:18px;text-align:center;
  background:rgba(10,8,16,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.14);color:#fff;font-family:var(--display);
  text-transform:uppercase;line-height:1.04;letter-spacing:.01em;
  text-shadow:0 2px 10px rgba(0,0,0,.6);pointer-events:none;white-space:nowrap
}
.s5-cap span{display:block}
.s5-cap-1{font-size:1.05rem;font-weight:700}
.s5-cap-2{font-size:2.2rem;font-weight:800;color:#FFD84D;margin:2px 0}
.s5-cap-3{font-size:.92rem;font-weight:700;letter-spacing:.08em}