/* MyShapeWay · /interativo10 V2 — animações Q10A (quiz10-anim.js)
   Regra do plano: nas transições, só transform e opacity. */

/* ---------- moldura do celular + legenda ---------- */
.qa-phone{position:relative;width:100%;max-width:300px;height:min(52vh,420px);margin:4px auto 0;background:#0A0E18;
  border:1px solid rgba(255,255,255,.09);border-radius:26px;padding:7px;box-shadow:0 18px 44px rgba(0,0,0,.4);display:flex;box-sizing:border-box}
.qa-scr{position:relative;flex:1;min-width:0;border-radius:20px;overflow:hidden;background:#F4F2EE}
.qa-cap{position:absolute;left:0;right:0;bottom:0;z-index:6;margin:0;padding:10px 12px 12px;text-align:center;
  background:rgba(16,16,24,.94);color:#fff;font-family:'Inter',sans-serif;font-size:15px;font-weight:700;line-height:1.3;
  opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.qa-cap.on{opacity:1;transform:none}
.qa-cap b{color:#F0C24B;font-weight:800}
.qa-support{margin:8px 0 0;text-align:center;font-size:.86rem;color:var(--ink2,#5A5468);line-height:1.35}
.qa-replay{background:none;border:0;padding:0 0 0 4px;color:var(--ink3,#8D879A);text-decoration:underline;font-size:.82rem;cursor:pointer}
.qa-replay[hidden]{display:none}

/* ---------- HeroDemo · herói escuro (13/10) ---------- */
.hd{position:absolute;inset:0;color:var(--ink,#DFE3EC);font-family:'Inter',sans-serif}
.hd-in{position:absolute;inset:0;transition:opacity .3s ease}
.hd-in.out{opacity:0}
.hd-top{position:absolute;left:0;right:0;top:0;bottom:176px}
.hd-chips{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;transition:opacity .25s ease,transform .25s ease}
.hd.s2 .hd-chips{opacity:0;transform:translateY(-8px)}
.hd-chip{position:relative;display:inline-flex;align-items:center;padding:9px 12px;border-radius:99px;border:1.5px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);font-weight:700;font-size:13px;white-space:nowrap}
.hd-chip>span{position:relative;z-index:1}
.hd-sel{position:absolute;inset:-1.5px;border-radius:inherit;background:#7C3FE5;opacity:0;transition:opacity .2s ease}
.hd-chip.on .hd-sel{opacity:1}
.hd-tap{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:rgba(255,255,255,.6);
  opacity:0;transform:scale(.3);pointer-events:none;z-index:2}
.hd-chip.tap .hd-tap{animation:hdTap .55s ease-out}
@keyframes hdTap{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.9)}}
.hd-meal{position:absolute;inset:0 0 14px;display:flex;align-items:center;justify-content:center;gap:5%}
.hd-it{position:relative;margin:0;height:var(--h);opacity:0;transform:scale(.85);transition:opacity .4s ease,transform .45s cubic-bezier(.3,1.4,.5,1)}
.hd-it img{display:block;height:100%;width:auto;max-width:none}
.hd-salad{--h:62%}
.hd-burger{--h:86%}
.hd-soda{--h:58%}
.hd-it.on{opacity:1;transform:none}
.hd-tag{position:absolute;left:50%;bottom:-12px;white-space:nowrap;background:#1E2638;border:1px solid rgba(255,255,255,.18);color:var(--ink,#DFE3EC);
  font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;opacity:0;transform:translate(-50%,6px);transition:opacity .3s ease .25s,transform .3s ease .25s}
.hd-it.on .hd-tag{opacity:1;transform:translate(-50%,0)}
.hd-bot{position:absolute;left:0;right:0;bottom:0;height:166px;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease}
.hd.s3 .hd-bot{opacity:1;transform:none}
.hd-cal{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px 12px}
.hd-cal-t{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13.5px;font-weight:700;margin-bottom:8px}
.hd-cal-t b{font-weight:800;font-variant-numeric:tabular-nums}
.hd-bar{height:10px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.hd-fill{display:block;height:100%;width:100%;border-radius:99px;background:#51BD89;transform:scaleX(0);transform-origin:left center}
.hd.s3 .hd-fill{transform:scaleX(1);transition:transform 1.2s cubic-bezier(.3,.7,.3,1)}
.hd-ck{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#51BD89;color:#101624;
  font-style:normal;font-weight:900;font-size:12px;line-height:1;opacity:0;transform:scale(.4)}
.hd-ck.on{opacity:1;transform:none;transition:opacity .2s ease,transform .3s cubic-bezier(.3,1.6,.5,1)}
/* selo "Burn Mode ✓" junto da barra de calorias (13/10): entra com o check */
.hd-cal-r{display:inline-flex;align-items:center;gap:6px}
.hd-bm{display:inline-block;padding:3px 9px;border-radius:99px;background:rgba(81,189,137,.16);border:1px solid rgba(81,189,137,.45);
  color:#7DD3A8;font-size:11.5px;font-weight:800;white-space:nowrap;opacity:0;transform:scale(.6)}
.hd-bm.on{opacity:1;transform:none;transition:opacity .2s ease,transform .3s cubic-bezier(.3,1.6,.5,1)}
.hd-mac{display:flex;align-items:center;justify-content:center;gap:18px}
.hd-ring{position:relative;width:96px;height:96px;flex:0 0 96px}
.hd-ring svg{display:block;width:100%;height:100%}
.hd-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:12}
.hd-arc{fill:none;stroke-width:12}
.hd-arc.p{stroke:#7C3FE5}.hd-arc.c{stroke:#EBA134}.hd-arc.f{stroke:#F7793E}
.hd-arc.on{stroke-dashoffset:0;transition:stroke-dashoffset .6s ease}
.hd-ck-c{position:absolute;left:50%;top:50%;margin:-11px 0 0 -11px}
.hd-leg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.hd-leg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
.hd-leg .p{background:#7C3FE5}.hd-leg .c{background:#EBA134}.hd-leg .f{background:#F7793E}
.hd-still .hd-tap{display:none}

/* ---------- A2 · você fala, eu monto ---------- */
.qa-tabs{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:3px;padding:4px;
  border-radius:99px;background:rgba(16,16,24,.82);white-space:nowrap}
.qa-tabs span{padding:3px 7px;border-radius:99px;font-size:10.5px;font-weight:700;color:#9C98A8}
.qa-tabs span.on{color:#fff;background:#7C3FE5}
.qa-layer{position:absolute;inset:0;opacity:0;transition:opacity .2s ease;pointer-events:none}
.qa-layer.on{opacity:1}
.qa-say{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:44px 16px 64px}
.qa-mic{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#7C3FE5;background:#EFE7FD;border-radius:99px;padding:7px 12px}
.qa-wave{display:inline-flex;align-items:center;gap:2.5px;height:14px}
.qa-wave i{display:block;width:3px;height:13px;border-radius:2px;background:#7C3FE5;transform:scaleY(.35);animation:qaWave 1s ease-in-out infinite}
.qa-wave i:nth-child(2){animation-delay:.15s}.qa-wave i:nth-child(3){animation-delay:.3s}
.qa-wave i:nth-child(4){animation-delay:.45s}.qa-wave i:nth-child(5){animation-delay:.6s}
@keyframes qaWave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.qa-bubble{background:#fff;border-radius:16px 16px 16px 4px;padding:12px 14px;font-weight:700;font-size:16px;line-height:1.35;
  color:#1E1A2B;box-shadow:0 8px 22px rgba(43,39,51,.12);max-width:100%;min-height:1.35em}
.qa-w{display:inline-block;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}
.qa-w.in{opacity:1;transform:none}

.qa-calc{display:flex;align-items:center;justify-content:center;padding:44px 14px 64px}

.qa-plate-l{padding:38px 8px 60px;background:#F4F2EE}
/* almoço de 650 cal (14/10): o app monta as porções e a pessoa ajusta; cores = corNoPrato do app */
.qa-bd{background:#fff;border-radius:16px;padding:8px 10px;box-shadow:0 8px 22px rgba(43,39,51,.10);display:flex;flex-direction:column;gap:5px}
.qa-bd-h{display:flex;justify-content:space-between;align-items:center;line-height:1.2}
.qa-bd-h b{font-size:14px;font-weight:800;color:#111827}
.qa-bd-h span{font-size:11px;font-weight:800;color:#7C3FE5;background:#EFE7FD;border-radius:99px;padding:2px 8px}
.qa-bd-tot{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;color:#4B5563;line-height:1.2}
.qa-bd-tot b{font-size:15px;font-weight:800;color:#06B6D4;font-variant-numeric:tabular-nums;transition:color .2s ease}
.qa-bd-tot em{font-style:normal}
.qa-bd-tot i{font-style:normal;margin-left:4px;opacity:0;transition:opacity .25s ease}
.qa-bd.vd .qa-bd-tot b{color:#10B981}
.qa-bd.am .qa-bd-tot b{color:#F59E0B}
.qa-bd.ok .qa-bd-tot i{opacity:1}
.qa-bd-bar{height:5px;border-radius:99px;background:#EEE9F6;overflow:hidden}
.qa-bd-bar i{display:block;height:100%;border-radius:99px;background:#06B6D4;transform:scaleX(0);transform-origin:left center;transition:background-color .2s ease}
.qa-bd.vd .qa-bd-bar i{background:#10B981}
.qa-bd.am .qa-bd-bar i{background:#F59E0B}
.qa-bd-it{position:relative;background:#FBFAFC;border:1px solid #EFEDF3;border-radius:11px;padding:5px 9px 6px}
.qa-bd-it.tap{z-index:2}
.qa-bd-r{display:flex;justify-content:space-between;align-items:center;gap:8px}
.qa-bd-r b{display:block;font-size:12.5px;font-weight:800;color:#111827;line-height:1.2}
.qa-bd-r small{display:block;font-size:10.5px;line-height:1.3;color:#8B90A0;margin-top:1px;font-variant-numeric:tabular-nums;white-space:nowrap}
.qa-bd-r em{font-style:normal;font-size:12.5px;font-weight:800;color:#374151;white-space:nowrap;font-variant-numeric:tabular-nums}
.qa-bd-free{background:#FBFAFC;border:1px solid #EFEDF3;border-radius:11px;padding:5px 9px}
.qa-bd-free em{font-size:11px;color:#11643C;background:#E6F7EE;border-radius:99px;padding:2px 9px}
.qa-bd-sl{position:relative;height:4px;margin:7px 7px 2px;border-radius:99px;background:#E7E3EF}
.qa-bd-sl .f{position:absolute;inset:0;border-radius:99px;background:#7C3FE5;transform:scaleX(0);transform-origin:left center}
.qa-bd-sl .thw{position:absolute;inset:0}
.qa-bd-sl .th{position:absolute;left:0;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;
  border:2px solid #7C3FE5;box-shadow:0 1px 4px rgba(0,0,0,.25);box-sizing:border-box}
.qa-bd-sl .tap{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(124,63,229,.28);opacity:0}
.qa-bd-it.tap .tap{animation:qaToque 1s ease-out infinite}
@keyframes qaToque{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.3)}}
/* a mão (14/10): a ponta do dedo no controle; anda junto com ele enquanto a pessoa arrasta */
.qa-bd-sl .hand{position:absolute;left:50%;top:50%;margin:-1px 0 0 -9px;font-size:22px;font-style:normal;line-height:1;
  opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.qa-bd-it.tap .hand{opacity:1;transform:none}

/* ---------- A3 · o doce entra como extra snack; as refeições não registradas se ajustam ---------- */
.qa-tr{position:absolute;inset:0;padding:11px 11px 64px;display:flex;flex-direction:column;gap:5px}
.qa-tr-badge{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7C3FE5;
  background:#EFE7FD;border-radius:99px;padding:5px 10px}
.qa-tr-meals{position:relative;background:#ECE9E4;border-radius:14px;padding:4px 12px}
.qa-tr-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0;font-weight:700;font-size:13.5px;
  line-height:1.2;color:#3D3848;white-space:nowrap}
.qa-tr-row+.qa-tr-row{border-top:1px solid rgba(61,56,72,.1)}
.qa-tr-row b{font-weight:800}
.qa-tr-row em{font-style:normal;font-variant-numeric:tabular-nums}
.qa-tr-ring{position:absolute;inset:-2px;border:2px solid #7C3FE5;border-radius:16px;opacity:0;transition:opacity .3s ease;pointer-events:none}
.qa-tr-item{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #F3D9B1;border-radius:14px;padding:8px 11px;
  box-shadow:0 8px 20px rgba(43,39,51,.10);opacity:0;transform:translateY(-20px);transition:opacity .3s ease,transform .3s ease}
.qa-tr-em{font-size:26px;line-height:1}
.qa-tr-n{flex:1;min-width:0;display:flex;flex-direction:column}
.qa-tr-n b{font-size:13.5px;color:#1E1A2B;line-height:1.2}
.qa-tr-n small{font-size:11px;color:#8B90A0}
.qa-tr-k{font-weight:800;color:#E08A1E;font-size:14px;white-space:nowrap}
.qa-tr-arrow{display:flex;align-items:center;gap:10px;padding-left:24px;min-height:24px}
.qa-tr-arrow i{position:relative;display:block;width:3px;height:17px;background:#7C3FE5;border-radius:2px;transform:scaleY(0);transform-origin:top center;transition:transform .4s ease}
.qa-tr-arrow i::after{content:'';position:absolute;left:50%;bottom:-6px;margin-left:-6px;border-top:7px solid #7C3FE5;border-left:6px solid transparent;border-right:6px solid transparent}
.qa-tr-arrow span{font-size:11.5px;font-weight:700;line-height:1.2;color:#7C3FE5;opacity:0;transition:opacity .3s ease .2s}
.qa-tr-total{background:#E6F7EE;color:#11643C;border-radius:12px;padding:8px 12px;font-weight:800;font-size:13px;text-align:center;
  opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.s1 .qa-tr-item{opacity:1;transform:none}
.s2 .qa-tr-arrow i{transform:none}
.s2 .qa-tr-arrow span{opacity:1}
.s3 .qa-tr-ring{opacity:1}
.s4 .qa-tr-total{opacity:1;transform:none}

/* ---------- A6 · "See it working" ---------- */
.qa-working{margin:8px -18px 0}
.qa-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 18px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.qa-strip::-webkit-scrollbar{display:none}
.qa-mini{flex:0 0 240px;scroll-snap-align:center}
.qa-mini-t{margin:0 0 6px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem;text-align:center;color:var(--ink,#1E1A2B)}
.qa-phone-mini{max-width:none;height:300px;margin:0}
.qa-mini .qa-cap{font-size:14px;padding:9px 10px 10px}
.qa-foto{position:absolute;inset:0;background:#000}
.qa-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.c1 .qa-foto img{transform:scale(1.08)}
.c2 .qa-foto img{transform:none}
.qa-cam{position:absolute;left:16px;right:16px;top:18px;bottom:76px;z-index:2;opacity:0;transition:opacity .25s ease}
.qa-cam i{position:absolute;width:22px;height:22px;border:0 solid #fff}
.qa-cam .tl{left:0;top:0;border-width:3px 0 0 3px;border-top-left-radius:6px}
.qa-cam .tr{right:0;top:0;border-width:3px 3px 0 0;border-top-right-radius:6px}
.qa-cam .bl{left:0;bottom:0;border-width:0 0 3px 3px;border-bottom-left-radius:6px}
.qa-cam .br{right:0;bottom:0;border-width:0 3px 3px 0;border-bottom-right-radius:6px}
.c1 .qa-cam{opacity:1}
.c2 .qa-cam{opacity:0}
.qa-shot{position:absolute;left:50%;bottom:16px;z-index:3;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.45),0 4px 12px rgba(0,0,0,.4);opacity:0;transition:opacity .25s ease}
.c1 .qa-shot{opacity:1}
.c2 .qa-shot{animation:qaPress .35s ease}
.s1 .qa-shot{opacity:0}
@keyframes qaPress{50%{transform:scale(.8)}}
.qa-flash{position:absolute;inset:0;z-index:4;background:#fff;opacity:0;pointer-events:none}
.c2 .qa-flash{animation:qaFlash .5s ease-out}
@keyframes qaFlash{0%{opacity:.95}100%{opacity:0}}
.qa-scan{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#fff,transparent);
  box-shadow:0 0 12px rgba(255,255,255,.9);opacity:0}
.s1 .qa-scan{animation:qaScan .8s ease-in-out forwards}
@keyframes qaScan{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(230px)}}
.qa-chips{position:absolute;left:8px;right:8px;top:12px;display:flex;flex-wrap:wrap;gap:4px}
.qa-chips span{font-size:11px;font-weight:600;color:#fff;background:rgba(16,16,24,.62);border:1px solid rgba(255,255,255,.3);
  padding:3px 8px;border-radius:99px;opacity:0;transform:scale(.8);transition:opacity .2s ease,transform .2s ease}
.qa-chips span.in{opacity:1;transform:none}
.qa-foto-tot{position:absolute;left:8px;right:8px;bottom:52px;background:rgba(255,255,255,.95);border-radius:12px;padding:8px 10px;
  font-weight:800;font-size:13px;color:#1E1A2B;text-align:center;opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform .3s ease}
.s2 .qa-foto-tot{opacity:1;transform:none}
/* código de barras ou rótulo (15/10): a mesma câmera; no código, um laser vermelho; no rótulo, a linha de leitura
   marcando calorias e macros. As duas fotos ficam empilhadas e trocam pela classe "lab" do card */
.qa-sc img{position:absolute;inset:0;transition:transform .35s ease,opacity .3s ease}
.qa-sc .qa-sc-lab{opacity:0}
.qa-m-scan.lab .qa-sc-lab{opacity:1}
.qa-m-scan.lab .qa-sc-bar{opacity:0}
.qa-sc-modo{position:absolute;left:50%;top:10px;z-index:3;display:flex;gap:2px;padding:3px;border-radius:99px;
  background:rgba(16,16,24,.62);transform:translateX(-50%);transition:opacity .25s ease}
.qa-sc-modo span{padding:3px 10px;border-radius:99px;font-size:10.5px;font-weight:700;color:rgba(255,255,255,.75);white-space:nowrap}
.qa-m-scan:not(.lab) .qa-sc-modo .b,.qa-m-scan.lab .qa-sc-modo .l{background:#fff;color:#1E1A2B}
/* com o resultado, o seletor sai e o nome do produto fica no lugar dele, como os chips da foto do almoço */
.qa-m-scan.s2 .qa-sc-modo{opacity:0}
.qa-sc .qa-chips{justify-content:center}
.qa-sc-laser{position:absolute;left:8%;right:8%;top:41%;z-index:2;height:2px;border-radius:2px;background:#FF3B30;
  box-shadow:0 0 8px 2px rgba(255,59,48,.65);opacity:0}
.qa-m-scan.s1:not(.lab) .qa-sc-laser{animation:qaLaser .9s ease-in-out}
@keyframes qaLaser{0%{opacity:0;transform:translateY(-34px)}15%{opacity:1}55%{transform:translateY(34px)}85%{opacity:1}100%{opacity:0;transform:translateY(0)}}
.qa-m-scan:not(.lab) .qa-scan{display:none}
.qa-sc-hl{position:absolute;left:23%;right:23%;height:3.8%;z-index:1;border-radius:3px;background:rgba(255,214,10,.5);mix-blend-mode:multiply;
  opacity:0;transform:translateY(-50%) scaleX(.2);transform-origin:left center;transition:opacity .2s ease,transform .3s ease}
.qa-sc-hl.in{opacity:1;transform:translateY(-50%)}
.qa-tr-mini{padding:10px 10px 54px;gap:5px}
.qa-tr-mini .qa-tr-badge{font-size:10px;padding:4px 9px}
.qa-tr-mini .qa-tr-item{padding:6px 10px}
.qa-tr-mini .qa-tr-arrow{padding-left:20px;min-height:20px}
.qa-tr-mini .qa-tr-arrow span{font-size:10.5px}
.qa-tr-mini .qa-tr-meals{padding:3px 10px}
.qa-tr-mini .qa-tr-row{padding:3px 0;font-size:12.5px}
.qa-tr-mini .qa-tr-total{padding:6px 10px;font-size:12.5px}
.qa-tw{position:absolute;inset:0;background:#0A0E18}
.qa-tw-ex{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}
.qa-tw-ex.on{opacity:1}
.qa-tw-ex img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qa-tw-ex img.b{opacity:0}
.qa-tw-ex.b img.b{opacity:1}

@media (prefers-reduced-motion:reduce){
  .qa-wave i{animation:none;transform:scaleY(.6)}
}

/* ===== A6 · carrossel "See it working" (13/10): 9 cards, 4 s cada, botões e arrasto ===== */
.qa-car{position:relative}
.qa-working .qa-strip{padding:4px calc(50% - 120px) 10px}      /* o 1º e o último card também centralizam */
/* z-index 10 (15/10): acima de tudo dentro dos cards; o brilho do card da água tapava o "‹" no card seguinte */
.qa-car-btn{position:absolute;top:50%;z-index:10;width:46px;height:46px;margin-top:-18px;border-radius:50%;border:0;background:#fff;color:#1E1A2B;
  font:700 30px/1 'Inter',system-ui,sans-serif;display:flex;align-items:center;justify-content:center;padding:0 0 3px;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.4)}
.qa-car-btn.prev{left:8px}
.qa-car-btn.next{right:8px}
.qa-car-btn:active{transform:scale(.92)}
.qa-car-dots{display:flex;justify-content:center;gap:7px;margin:0 0 4px}
.qa-car-dots i{width:7px;height:7px;border-radius:50%;background:var(--line,#2A3452);transition:transform .2s ease}
.qa-car-dots i.on{background:var(--brand,#7C3FE5);transform:scale(1.3)}
/* miolo dos cards novos (tela clara do app; o caption fica embaixo) */
.qa-in{position:absolute;inset:0;padding:12px 11px 58px;display:flex;flex-direction:column;gap:7px;color:#1E1A2B;font-family:'Inter',system-ui,sans-serif;box-sizing:border-box}
.qa-row{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;border:1px solid #ECE9F1;border-radius:11px;padding:7px 9px}
.qa-row b{display:block;font-size:12.5px;font-weight:700;color:#1E1A2B}
.qa-row small{display:block;font-size:10.5px;color:#7A748A;margin-top:1px}
.qa-row em{font-style:normal;font-weight:800;font-size:12px;color:#1E1A2B;white-space:nowrap}
.qa-row em.qa-free{font-size:10.5px;color:#0E9B6C;background:#E7F6EF;padding:3px 8px;border-radius:99px}
/* voz */
.qa-vz-mic{position:relative;width:46px;height:46px;flex:none;margin:2px auto 0;border-radius:50%;background:#7C3FE5;display:flex;align-items:center;justify-content:center;font-size:20px}
.qa-vz-mic i{position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(124,63,229,.35);opacity:0}
.s1 .qa-vz-mic i{animation:qaPulse 1s ease-out infinite}
@keyframes qaPulse{from{transform:scale(.85);opacity:1}to{transform:scale(1.35);opacity:0}}
.qa-vz-rec{margin:0;text-align:center;font-size:11px;font-weight:700;color:#C0392B}
.qa-m-voz.s2 .qa-vz-mic,.qa-m-voz.s2 .qa-vz-rec,.qa-m-voz.s3 .qa-vz-mic,.qa-m-voz.s3 .qa-vz-rec{display:none}
.qa-vz-txt{margin:0;background:#fff;border-radius:12px;padding:8px 10px;font-size:12.5px;line-height:1.35;font-weight:600;min-height:44px;box-sizing:border-box}
.qa-vz-txt span{opacity:0;transition:opacity .2s ease}
.qa-vz-txt span.in{opacity:1}
.qa-vz-out{display:none;flex-direction:column;gap:6px}
.s3 .qa-vz-out{display:flex;animation:qaIn .4s ease both}
@keyframes qaIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* cálculo (voz e montar), macros em gramas e a conta no dia */
.qa-calc{display:none;margin:4px 0 0;text-align:center;font-size:11.5px;font-weight:700;color:#7C3FE5}
.qa-calc i{display:inline-block;width:9px;height:9px;margin-right:6px;border:2px solid #7C3FE5;border-right-color:transparent;border-radius:50%;animation:qaSpin .7s linear infinite;vertical-align:-1px}
.qa-m-voz.s2 .qa-calc{display:block;animation:qaIn .25s ease both}
.qa-mac{display:flex;gap:5px}
.qa-mac span{flex:1;text-align:center;font-size:11px;font-weight:800;color:#fff;border-radius:8px;padding:5px 0}
.qa-mac .mp{background:#7C3FE5}.qa-mac .mc{background:#22B573}.qa-mac .mg{background:#F0A13D}
@keyframes qaSpin{to{transform:rotate(360deg)}}
/* voz + você escolhe/eu monto (14/10): a porção sai pra meta dela. No resultado (15/10) a fala vira uma linha
   ("You said"), a meta aparece com a fatia do dia e a faixa verde mostra que bateu a meta exata */
.qa-m-voz .qa-mini-t{font-size:.84rem}
.qa-m-voz.s3 .qa-vz-txt{display:none}
.qa-m-voz .qa-vz-out{gap:4px}
/* 15/10: o selo Burn Mode entrou embaixo; o card apertou um pouco pra ele caber acima da legenda */
.qa-m-voz .qa-in{padding-top:8px}
.qa-m-voz .qa-mac span{padding:4px 0}
.qa-m-voz .qa-bmm{padding:3px 9px}
.qa-m-voz .qa-vz-ok{padding:3px 8px}
.qa-vz-list{background:#fff;border:1px solid #ECE9F1;border-radius:11px;padding:0 9px}
.qa-vz-it{padding:2px 0;line-height:1.2}
.qa-vz-it + .qa-vz-it{border-top:1px solid #F0EDF5}
.qa-vz-it b{display:block;font-size:12px;font-weight:700;color:#1E1A2B}
.qa-vz-it small{display:block;font-size:10.5px;color:#7A748A;white-space:nowrap}
.qa-vz-it.livre{display:flex;justify-content:space-between;align-items:center;gap:8px}
.qa-vz-it .qa-free{font-style:normal;font-size:10.5px;font-weight:800;color:#0E9B6C;background:#E7F6EF;padding:2px 8px;border-radius:99px}
.qa-vz-said{margin:0;font-size:11px;line-height:1.35;font-style:italic;color:#6E6878}
.qa-vz-goal{text-align:center;line-height:1.25}
.qa-vz-goal p{margin:0;font-size:12px;font-weight:600;color:#4B4560}
.qa-vz-goal b{color:#1E1A2B}
.qa-vz-goal small{display:block;font-size:10.5px;color:#8B90A0}
.qa-vz-ok{margin:0;text-align:center;font-size:12px;font-weight:600;color:#0E9B6C;background:#E7F6EF;border-radius:10px;padding:4px 8px;
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.qa-vz-ok b{font-weight:800}
.s4 .qa-vz-ok{opacity:1;transform:none}
/* selo Burn Mode (15/10): o mesmo na demo do almoço e nos cards "You pick, I build" e "Burn Mode".
   Desmarcado fica cinza; marcado fica verde e o ✓ entra (só opacity/transform na transição) */
.qa-bmm{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1px solid #ECE9F1;border-radius:10px;
  padding:4px 9px;line-height:1.2;white-space:nowrap}
.qa-bmm b{font-size:11px;font-weight:800;color:#7C3FE5}
.qa-bmm span{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:#A6A1B2}
.qa-bmm span.on{color:#0E9B6C}
.qa-bmm i{font-style:normal;font-weight:800;opacity:0;transform:scale(.3);transition:opacity .2s ease,transform .3s cubic-bezier(.3,1.6,.5,1)}
.qa-bmm span.on i{opacity:1;transform:none}
/* na demo ele entra no fim; no card de voz, junto com a faixa verde */
.qa-plate .qa-bmm{margin-top:8px;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
/* a moldura da demo cresce um pouco nas telas baixas (360x640) pro selo não ficar atrás da legenda; o teto segue 420 px */
.qa-plate .qa-phone{height:min(56vh,420px)}
.qa-plate .qa-bmm.on{opacity:1;transform:none}
.qa-m-voz .qa-bmm{opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.qa-m-voz.s4 .qa-bmm{opacity:1;transform:none}
/* Burn Mode (14/10; 15/10: o selo no lugar das barras de exemplo) */
.qa-bm{justify-content:center;gap:6px}
.qa-bm-t{margin:0;text-align:center;font-weight:800;font-size:15px}
.qa-bm-txt{margin:0;text-align:center;font-size:12px;line-height:1.35;font-weight:600;color:#4B4560}
.qa-bm-txt b{color:#1E1A2B}
.qa-bm-lead{font-size:13px}
/* as comidas dela (até 3) -> um prato em Burn Mode (15/10) */
.qa-bm-row{display:flex;align-items:center;justify-content:center;gap:5px}
.qa-bm-f{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid #ECE9F1;
  font-size:15px;line-height:1;opacity:0;transform:scale(.6);transition:opacity .25s ease,transform .3s cubic-bezier(.3,1.4,.5,1)}
.qa-bm-f.in{opacity:1;transform:none}
.qa-bm-seta{font-style:normal;font-size:14px;font-weight:800;color:#7C3FE5;opacity:0;transition:opacity .25s ease}
.s1 .qa-bm-seta{opacity:1}
.qa-bm-prato{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:#E7F6EF;border:2px solid #33C06F;box-sizing:border-box;font-size:17px;line-height:1;
  opacity:0;transform:scale(.6);transition:opacity .25s ease,transform .3s cubic-bezier(.3,1.4,.5,1)}
.qa-bm-prato i{position:absolute;right:-5px;bottom:-4px;display:flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;background:#0E9B6C;color:#fff;font-size:9px;font-style:normal;font-weight:800}
.s2 .qa-bm-prato{opacity:1;transform:none}
/* água: escuro, como o card do app (barra, botões, onda e modo ouro com o mascote) */
.qa-ag{background:#0f1a2e;color:#e2ecf8;justify-content:center;gap:10px;overflow:hidden}
.qa-ag-h{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800}
.qa-ag-h b{font-size:12px;color:#7dd3fc;font-weight:700}
.qa-ag-h em{font-style:normal;font-variant-numeric:tabular-nums}
.qa-ag-bar{position:relative;z-index:2;height:28px;border-radius:14px;background:#16233d;overflow:hidden}
.qa-ag-bar i{position:absolute;inset:0;background:#0284c7;transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.qa-ag-btns{position:relative;z-index:2;display:flex;gap:5px}
.qa-ag-btns span{flex:1;text-align:center;font-size:11px;font-weight:700;color:#7dd3fc;background:#16233d;border-radius:8px;padding:7px 0}
.qa-ag-btns span.tap{animation:qaTap .3s ease}
@keyframes qaTap{50%{transform:scale(.88)}}
.qa-ag-flood{position:absolute;left:0;right:0;bottom:0;height:100%;background:rgba(2,132,199,.96);transform:translateY(100%);transition:transform .85s cubic-bezier(.22,1,.36,1);z-index:3}
.s3 .qa-ag-flood{transform:none}
.qa-ag-rays{position:absolute;left:50%;top:40%;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;
  background:repeating-conic-gradient(rgba(251,191,36,.25) 0 12deg,transparent 12deg 24deg);opacity:0;z-index:4;transition:opacity .4s ease}
.s4 .qa-ag-rays{opacity:1;animation:qaRays 6s linear infinite}
@keyframes qaRays{to{transform:rotate(360deg)}}
.qa-ag-masco{position:absolute;left:50%;top:24%;z-index:5;opacity:0;transform:translateX(-50%) scale(.2);transition:opacity .3s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.s4 .qa-ag-masco{opacity:1;transform:translateX(-50%) scale(1)}
.qa-ag-msg{position:absolute;left:0;right:0;top:52%;z-index:5;margin:0;text-align:center;font-size:11.5px;color:#fde68a;opacity:0;transform:scale(.6);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.qa-ag-msg b{display:block;font-size:19px;font-weight:800;color:#fff}
.s4 .qa-ag-msg{opacity:1;transform:none}
/* tabela de substituição (14/10): busca digitada e opções em ranking, como a tela do app */
.qa-sw{gap:6px}
.qa-sw .qa-row{padding:6px 9px}
.qa-sw .qa-row b{font-size:12px}
.qa-sw-q{display:flex;align-items:center;gap:7px;min-height:32px;box-sizing:border-box;background:#fff;border:1.5px solid #DDD7EA;
  border-radius:10px;padding:6px 10px;font-size:12.5px;transition:border-color .2s ease}
.qa-sw-q>span{font-size:12px}
.qa-sw-tx{font-weight:700;color:#1E1A2B}
.qa-sw-tx:empty::before{content:'Search foods…';font-weight:500;color:#9C98A8}
.qa-sw-q i{width:1.5px;height:14px;margin-left:-5px;background:#7C3FE5;opacity:0}
.s0 .qa-sw-q{border-color:#7C3FE5}
.s0 .qa-sw-q i{animation:qaCursor 1s steps(1) infinite}
@keyframes qaCursor{0%{opacity:1}50%{opacity:0}}
.qa-sw-base,.qa-sw-h,.qa-sw-list{opacity:0;transition:opacity .3s ease}
.s1 .qa-sw-base,.s1 .qa-sw-h,.s1 .qa-sw-list{opacity:1}
.s1 .qa-sw-base{border-color:#7C3FE5;box-shadow:0 0 0 2px rgba(124,63,229,.15)}
.qa-sw-list{background:#fff;border:1px solid #ECE9F1;border-radius:11px;padding:1px 5px}
/* 5 opções do app numa linha cada: número, nome e "cal · %" */
.qa-sw-list .qa-sw-r{display:flex;align-items:center;gap:4px;padding:3px 0}
.qa-sw-list .qa-sw-r + .qa-sw-r{border-top:1px solid #F0EDF5}
.qa-sw-r b{flex:1;min-width:0;font-size:11.5px;font-weight:700;color:#1E1A2B;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qa-sw-r em{flex:none;font-style:normal;font-size:10.5px;font-weight:700;color:#4B4560;white-space:nowrap;font-variant-numeric:tabular-nums}
.qa-sw-r em i{font-style:normal;font-weight:800;color:#0E9B6C}
.qa-sw-rk{flex:none;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  background:#EFE7FD;color:#7C3FE5;font-size:10px;font-style:normal;font-weight:800}
.qa-sw-h{margin:2px 0 0;font-size:10px;font-weight:700;color:#7A748A;text-transform:uppercase;letter-spacing:.05em}
.qa-sw-r{opacity:0;transform:translateX(14px);transition:opacity .3s ease,transform .3s ease}
.qa-sw-r.in{opacity:1;transform:none}