/* Seção "Pedido na mesa" da página Delivery: restaurante visto de cima, em 4 passos (chega e escaneia, pede no app, cozinha, garçom serve). Prefixo mz-. */
.mz-sec{position:relative;background:radial-gradient(700px 360px at 85% 30%,#ff6a1318,transparent 70%),radial-gradient(600px 340px at 10% 70%,#9184d922,transparent 70%)}
.mz-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:center;margin-top:8px}
.mz-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px}
.mz-list li{display:flex;gap:14px;align-items:flex-start;color:#cfd3e5;font-size:16px;line-height:1.45}
.mz-list li i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#9184d933;color:var(--gold2);font:800 15px Inter;font-style:normal}
.mz-list b{display:block;color:var(--ink);font-weight:700}
.mz-note{color:var(--mu);font-size:13.5px;margin:16px 0 0}
.mz-list li span,.mz-list li b,.mz-note,.mz-info{text-align:left!important}
.mz-info .row{justify-content:flex-start}
.mz-scene{position:relative;border-radius:26px;border:1px solid #9184d955;background:linear-gradient(180deg,#171526,#0e0c18);box-shadow:0 40px 90px #000a,0 0 80px #9184d91f;padding:16px 16px 18px;overflow:hidden}
.mz-steps{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.mz-steps button{flex:1;min-width:0;border:1px solid var(--ln);background:#ffffff08;color:var(--mu);border-radius:12px;padding:8px 10px;font:600 12.5px Inter;display:flex;gap:8px;align-items:center;justify-content:center;transition:.25s}
.mz-steps button b{width:20px;height:20px;border-radius:50%;background:#ffffff14;display:grid;place-items:center;font-size:11px;flex:none}
.mz-steps button.on{color:#fff;border-color:#ffb020;background:#ff6a1318}.mz-steps button.on b{background:linear-gradient(135deg,#ff6a13,#ffb020);color:#1a0d03}
.mz-steps button.done{color:var(--gold2)}
.mz-box{position:relative;width:100%;overflow:hidden;border-radius:18px}
.mz-stage{position:absolute;left:0;top:0;width:640px;height:520px;transform-origin:0 0;transition:transform .9s cubic-bezier(.4,0,.2,1);border-radius:18px;overflow:hidden;background:#15121f}
.mz-cap{margin:12px 4px 0;min-height:48px;color:#e3e0f5;font-size:15px;line-height:1.45;text-align:center}
.mz-cap b{color:#ffb020}
.mz-hid{position:absolute;width:0;height:0}

/* planta do restaurante (vista de cima) */
.mz-floor{position:absolute;left:192px;top:150px;right:0;bottom:0;background:repeating-linear-gradient(90deg,#3b2a1d 0 58px,#34251a 58px 60px),#3b2a1d;box-shadow:inset 0 14px 26px #0007}
.mz-floor::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 40% 70%,#ffb0200d,transparent 70%)}
.mz-kroom{position:absolute;left:192px;top:0;right:0;height:150px;background:repeating-conic-gradient(#d9dbe6 0 25%,#c7c9d6 0 50%) 0 0/26px 26px}
.mz-kroom::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0003,#000a)}
.mz-wall{position:absolute;left:192px;top:146px;right:0;height:8px;background:#6a6f86;z-index:3;box-shadow:0 4px 8px #0008}
.mz-wall i{position:absolute;left:203px;width:90px;top:-2px;height:12px;background:#3b2a1d}
.mz-stove{position:absolute;left:486px;top:10px;width:138px;height:52px;border-radius:8px;background:linear-gradient(180deg,#2a2b33,#15161b);box-shadow:0 8px 14px #000a,inset 0 0 0 2px #444653;z-index:2}
.mz-pan{position:absolute;top:6px;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#6a6a72,#1d1d23);box-shadow:0 4px 8px #000b,inset 0 0 0 3px #0008}
.mz-pan::before{content:"";position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#c97a2e,#6a3a12)}
.mz-pan::after{content:"";position:absolute;left:100%;top:50%;width:20px;height:6px;background:#222;border-radius:4px;translate:0 -50%}
.mz-ctr{position:absolute;left:470px;top:104px;width:154px;height:30px;border-radius:8px;background:linear-gradient(180deg,#e8eaf2,#aab0c4);z-index:2;box-shadow:0 8px 14px #0008}
.mz-door{position:absolute;left:230px;bottom:0;width:80px;height:10px;background:#9184d9;border-radius:4px 4px 0 0;z-index:3}
.mz-door::before{content:"ENTRADA";position:absolute;left:50%;top:-18px;translate:-50% 0;font:700 9px Inter;letter-spacing:.14em;color:#d2cefd}
.mz-rug{position:absolute;left:258px;top:350px;width:144px;height:150px;border-radius:18px;background:repeating-linear-gradient(45deg,#6a2f36 0 8px,#5a2630 8px 16px);border:3px solid #8a5a44;opacity:.55;box-shadow:inset 0 0 22px #0008}
.mz-spot{position:absolute;left:222px;top:340px;width:216px;height:176px;border-radius:50%;background:radial-gradient(closest-side,#ffb02055,#ffb02000);animation:mzSpot 2s ease-in-out infinite}
@keyframes mzSpot{50%{opacity:.45;transform:scale(1.06)}}
.mz-tbl{position:absolute;background:radial-gradient(circle at 32% 28%,#dcbb92,#a0713f 70%,#8a5e33);border:3px solid #5a3a1c;box-shadow:0 14px 18px #0009,inset 0 0 0 3px #ffffff14}
.mz-tbl.rd{border-radius:50%}.mz-tbl.rc{border-radius:12px}
.mz-tbl::after{content:"";position:absolute;inset:6px;border-radius:inherit;border:1px solid #5a3a1c44}
.mz-tbl .nb{position:absolute;left:50%;top:50%;translate:-50% -50%;font:800 10px Inter;color:#4a2f14;opacity:.55}
.mz-tbl.foco{border-color:#ffb020;box-shadow:0 14px 22px #000a,0 0 0 3px #ffb02066,0 0 26px #ffb02088}
.mz-ch{position:absolute;width:30px;height:24px;border-radius:10px 10px 7px 7px;background:linear-gradient(180deg,#4a3328,#33231b);border:2px solid #20140e;box-shadow:0 4px 6px #0008}
.mz-pt{position:absolute;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff,#dcd7cf);box-shadow:0 3px 5px #0008}
.mz-pt::after{content:"";position:absolute;left:6px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--f,#c94b2c);box-shadow:3px 2px 0 -2px #ffffff55}
.mz-cup{position:absolute;width:9px;height:9px;border-radius:50%;background:#e9e2d4;border:2px solid #b9ad94;box-shadow:0 2px 3px #0008}
.mz-vaso{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#6a4a32,#3a281a);box-shadow:0 6px 8px #000a;z-index:2}
.mz-vaso::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#79c24a,#2f7a2a 70%);clip-path:polygon(50% 0,62% 28%,100% 20%,72% 46%,100% 70%,64% 62%,50% 100%,36% 62%,0 70%,28% 46%,0 20%,38% 28%)}

/* pessoas vistas de cima (rosto virado para baixo; o giro vem do rotate) */
.mz-pp{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;will-change:transform}
.mz-pp i{position:absolute;display:block}
.mz-pp .lh,.mz-pp .cq{background:var(--hair);opacity:0}
.mz-pp .lh{left:7px;top:5px;width:20px;height:24px;border-radius:50% 50% 45% 45%}
.mz-pp .cq{left:12px;top:1px;width:10px;height:10px;border-radius:50%;box-shadow:0 2px 3px #0006}
.mz-pp.longo .lh,.mz-pp.coque .cq{opacity:1}
.mz-pp .sh{left:1px;top:13px;width:32px;height:19px;border-radius:15px 15px 9px 9px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 72%,#fff),var(--c) 70%);box-shadow:0 5px 8px #000a,inset 0 -3px 0 #0003}
.mz-pp .sh::after{content:"";position:absolute;left:11px;top:11px;width:10px;height:7px;border-radius:0 0 50% 50%;background:#0003}
.mz-pp .ar{top:19px;width:7px;height:14px;border-radius:5px;background:var(--c);filter:brightness(.86);box-shadow:0 2px 3px #0006}
.mz-pp .ar.l{left:0}.mz-pp .ar.r{right:0}
.mz-pp .hn{top:30px;width:6px;height:6px;border-radius:50%;background:var(--h);z-index:2;box-shadow:0 1px 2px #0006}
.mz-pp .hn.l{left:1px}.mz-pp .hn.r{right:1px}
.mz-pp .ea{top:13px;width:4px;height:6px;border-radius:50%;background:var(--h);filter:brightness(.92);z-index:1}
.mz-pp .ea.l{left:6px}.mz-pp .ea.r{left:24px}
.mz-pp .hd{left:9px;top:8px;width:16px;height:16px;border-radius:50%;background:var(--h);z-index:2;box-shadow:inset 0 -2px 0 #0002,0 2px 4px #0006}
.mz-pp .hd::before{content:"";position:absolute;left:-1px;top:-2px;width:18px;height:11px;border-radius:50% 50% 32% 32%;background:var(--hair)}
.mz-pp .hd::after{content:"";position:absolute;left:6px;top:11px;width:4px;height:3px;border-radius:50%;background:#0003}
.mz-pp.eat .hn.r{animation:mzHand 1.6s ease-in-out infinite}
.mz-pp.eat .hn.l{animation:mzHandL 1.6s ease-in-out infinite .5s}
.mz-pp.eat .hd{animation:mzEat 1.6s ease-in-out infinite}
@keyframes mzHand{0%,100%{transform:translate(0,0)}40%,60%{transform:translate(-10px,-8px)}}
@keyframes mzHandL{0%,100%{transform:translate(0,0)}40%,60%{transform:translate(6px,-3px)}}
@keyframes mzEat{40%,60%{transform:translateY(2px)}}
.mz-pp.wt{--c:#f3f3f6}.mz-pp.wt .sh::after{background:#1b1b22;width:6px;left:13px;top:8px;height:10px;border-radius:2px}
.mz-pp.chef{--c:#f6f6f8}
.mz-pp .hat{display:none}
.mz-pp.chef .hat{display:block;left:6px;top:3px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#e1e1e8);box-shadow:0 4px 7px #000a,inset 0 0 0 2px #d4d4dc;z-index:4}
.mz-pp.chef .hat::before{content:"";position:absolute;left:-3px;top:6px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:19px 0 0 #fff,9px -4px 0 #fff}
.mz-pp.chef .hd::before{display:none}
.mz-pp.chef .ea{z-index:3}
.on2 .mz-pp.chef .hn.r,.on3 .mz-pp.chef .hn.r{animation:mzStir .9s linear infinite}
.on2 .mz-pp.chef .hn.l,.on3 .mz-pp.chef .hn.l{animation:mzStir .9s linear infinite reverse}
@keyframes mzStir{0%{transform:translate(0,-2px)}25%{transform:translate(4px,-6px)}50%{transform:translate(0,-10px)}75%{transform:translate(-4px,-6px)}100%{transform:translate(0,-2px)}}
.mz-tray{position:absolute;left:50%;top:33px;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#e8eaf2,#9aa0b6);box-shadow:0 6px 8px #0009;opacity:0;z-index:3}
.mz-tray svg{position:absolute;left:6px;top:4px;width:22px;height:24px}

/* cliente e garçom animados (posições em px do palco) */
.mz-cu{transform:translate(268px,540px) rotate(180deg);opacity:0;--c:#e8683c;--h:#d9a37a;--hair:#2c1b10}
.on0 .mz-cu{animation:mzEnter 2.6s both ease-in-out}
@keyframes mzEnter{0%{opacity:0;transform:translate(266px,540px) rotate(212deg)}10%{opacity:1}76%{opacity:1;transform:translate(322px,476px) rotate(212deg)}100%{opacity:1;transform:translate(330px,466px) rotate(180deg)}}
.mz-wp{transform:translate(415px,160px) rotate(0deg);opacity:0}
.on3 .mz-wp{animation:mzServe 3.4s both ease-in-out}
@keyframes mzServe{0%{opacity:0;transform:translate(415px,160px) rotate(0)}8%{opacity:1}46%{transform:translate(415px,402px) rotate(0)}54%{transform:translate(415px,402px) rotate(90deg)}66%{transform:translate(398px,402px) rotate(90deg)}78%{opacity:1;transform:translate(398px,402px) rotate(90deg)}88%{opacity:1;transform:translate(415px,402px) rotate(180deg)}100%{opacity:0;transform:translate(415px,170px) rotate(180deg)}}
.on3 .mz-wp .mz-tray{animation:mzTray 3.4s both}
@keyframes mzTray{0%,8%{opacity:0}12%,66%{opacity:1}72%,100%{opacity:0}}
.mz-food{position:absolute;left:316px;top:402px;width:28px;height:30px;opacity:0;z-index:4}
.mz-food .pt{position:absolute;left:0;right:0;bottom:0;height:26px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff,#d8d4cc);box-shadow:0 5px 8px #0009}
.mz-food svg{position:absolute;left:3px;top:0;width:22px;height:20px;overflow:visible}
.on3 .mz-food{animation:mzDrop .5s 2.2s both cubic-bezier(.3,1.4,.5,1)}
@keyframes mzDrop{from{opacity:0;transform:translateY(-16px) scale(.8)}to{opacity:1;transform:none}}
.mz-stand{position:absolute;left:319px;top:380px;width:22px;height:26px;border-radius:4px;background:#fff;transform:rotate(-8deg);box-shadow:0 3px 6px #0009;padding:2px;z-index:4}
.mz-stand svg{width:18px;height:18px;display:block}
.mz-stand::after{content:"";position:absolute;left:3px;right:3px;bottom:2px;height:3px;border-radius:2px;background:#ffb020}
.on0 .mz-stand{animation:mzGlow 1.3s ease-in-out infinite}.on1 .mz-stand{animation:none}
@keyframes mzGlow{50%{box-shadow:0 0 0 5px #ffb02077,0 3px 6px #0009}}
.mz-ok{position:absolute;left:330px;top:490px;translate:-50% 0;background:#4be39a;color:#06281a;font:800 13px Inter;border-radius:99px;padding:6px 16px;white-space:nowrap;opacity:0;box-shadow:0 10px 24px #0008;z-index:6}
.on3 .mz-ok{animation:mzPop .5s 2.7s both cubic-bezier(.3,1.5,.5,1)}
@keyframes mzPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.mz-lbl{position:absolute;font:700 10px Inter;letter-spacing:.16em;text-transform:uppercase;color:#1a0d03;background:linear-gradient(135deg,#ff6a13,#ffb020);border-radius:99px;padding:3px 10px;z-index:5;box-shadow:0 4px 10px #0008}

/* celular (alto, à esquerda; o menu rola, ele escolhe mais um item e finaliza) */
.mz-phone{position:absolute;left:6px;top:24px;width:230px;height:560px;border-radius:38px;background:#07060b;border:8px solid #2c2e42;box-shadow:0 30px 60px #000c,0 0 40px #9184d922;overflow:hidden;transform:scale(.8);transform-origin:0 0;z-index:7}
.mz-phone::before{content:"";position:absolute;left:50%;top:6px;width:64px;height:16px;border-radius:99px;background:#000;translate:-50% 0;z-index:9}
.mz-cam,.mz-menu{position:absolute;inset:0;transition:opacity .45s;overflow:hidden}
.mz-menu{opacity:0;background:#120e0c;color:#f7efe6;font-family:'Bebas Neue',Impact,sans-serif}
.on1 .mz-cam{opacity:0}.on1 .mz-menu{opacity:1}
.mz-cam{background:radial-gradient(120% 80% at 50% 70%,#3a2a1e,#120b07)}
.mz-cam::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#fff,#fff0 60%);opacity:0;z-index:6}
.on0 .mz-cam::after{animation:mzShot .5s 3.5s both}
@keyframes mzShot{0%{opacity:0}25%{opacity:.85}100%{opacity:0}}
.mz-vf{position:absolute;left:50%;top:50%;width:140px;height:140px;translate:-50% -52%;z-index:2;background:linear-gradient(#ffb020,#ffb020) 0 0/28px 4px no-repeat,linear-gradient(#ffb020,#ffb020) 0 0/4px 28px no-repeat,linear-gradient(#ffb020,#ffb020) 100% 0/28px 4px no-repeat,linear-gradient(#ffb020,#ffb020) 100% 0/4px 28px no-repeat,linear-gradient(#ffb020,#ffb020) 0 100%/28px 4px no-repeat,linear-gradient(#ffb020,#ffb020) 0 100%/4px 28px no-repeat,linear-gradient(#ffb020,#ffb020) 100% 100%/28px 4px no-repeat,linear-gradient(#ffb020,#ffb020) 100% 100%/4px 28px no-repeat}
.mz-vf svg{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);border-radius:8px;background:#fff;padding:5px}
.mz-scan{position:absolute;left:6px;right:6px;top:8px;height:3px;border-radius:3px;background:#ffb020;box-shadow:0 0 14px 3px #ffb020aa;z-index:3;animation:mzScan 1.3s ease-in-out infinite alternate}
@keyframes mzScan{to{top:calc(100% - 11px)}}
.on1 .mz-scan{animation:none;opacity:0}
.mz-hit{position:absolute;left:50%;bottom:110px;translate:-50% 0;background:#4be39a;color:#06281a;font:800 14px Inter;border-radius:99px;padding:8px 16px;z-index:7;white-space:nowrap;animation:mzPop .5s 4s both cubic-bezier(.3,1.5,.5,1)}
.mz-camt{position:absolute;left:0;right:0;top:46px;text-align:center;color:#ffffffb0;font:600 12px Inter;z-index:2}
.mz-mh{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:30px 14px 8px;font-size:21px;letter-spacing:.07em;background:#120e0c;box-shadow:0 6px 10px #120e0cdd}
.mz-mh i{font-style:normal;background:linear-gradient(135deg,#ff6a13,#ffb020);color:#1a0d03;border-radius:99px;padding:3px 10px;font-size:16px}
.mz-sc{position:absolute;left:0;right:0;top:0;height:700px}
.on1 .mz-sc{animation:mzScroll 8.2s both cubic-bezier(.4,0,.2,1)}
@keyframes mzScroll{0%,37%{transform:none}50%,100%{transform:translateY(-270px)}}
.mz-art{position:absolute;left:8px;right:8px;top:62px;height:160px;border-radius:16px;background:radial-gradient(70% 80% at 50% 65%,#ff6a1340,#1b1512 75%)}
.mz-art svg{position:absolute;inset:6px 18px 0;width:calc(100% - 36px);height:calc(100% - 6px);overflow:visible}
.mz-nm{position:absolute;left:14px;top:232px;font-size:30px;line-height:1;letter-spacing:.03em}
.mz-ds{position:absolute;left:14px;right:70px;top:266px;font:400 11px/1.3 Inter;color:#a8998b;letter-spacing:0}
.mz-pr{position:absolute;left:14px;top:300px;font-size:30px;color:#ffb020;letter-spacing:.03em}
.mz-add{position:absolute;right:14px;top:296px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#ff6a13,#ffb020);color:#1a0d03;display:grid;place-items:center;font:700 28px Inter;box-shadow:0 8px 20px #000a}
.on1 .mz-add{animation:mzPulse .5s 2.3s}
@keyframes mzPulse{40%{transform:scale(.82)}70%{transform:scale(1.15)}}
.mz-sec2{position:absolute;left:14px;top:362px;font-size:19px;letter-spacing:.14em;color:#ffb020}
.mz-row{position:absolute;left:8px;right:8px;height:76px;border-radius:14px;background:#1b1512;display:flex;align-items:center;gap:10px;padding:0 12px 0 10px}
.mz-row .th{flex:none;width:52px;height:52px;border-radius:12px;background:radial-gradient(circle at 40% 35%,#3a2a1e,#1e1612);display:grid;place-items:center;font-size:28px}
.mz-row .tx{flex:1;min-width:0;line-height:1}.mz-row .tx b{display:block;font-size:22px;letter-spacing:.03em;font-weight:400}.mz-row .tx span{font-size:21px;color:#ffb020}
.mz-row .ad2{flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#ff6a13,#ffb020);color:#1a0d03;display:grid;place-items:center;font:700 24px Inter;box-shadow:0 6px 14px #000a}
.mz-row.r2 .ad2{animation:mzPulse .5s 5.2s}
.mz-row.r2{animation:mzRow .6s 5.2s both}
@keyframes mzRow{to{box-shadow:inset 0 0 0 2px #ffb020}}
.mz-bag{position:absolute;left:12px;right:12px;bottom:14px;height:46px;border-radius:14px;background:linear-gradient(135deg,#ff6a13,#ffb020);color:#1a0d03;font-size:19px;letter-spacing:.05em;opacity:0;z-index:6;overflow:hidden}
.mz-bag>span{position:absolute;top:0;bottom:0;display:flex;align-items:center}
.mz-bag .l{left:14px}.mz-bag .r{right:14px}
.mz-bag b{font:800 13px Inter;background:#1a0d03;color:#ffb020;border-radius:50%;width:22px;height:22px;display:inline-grid;place-items:center;margin-right:8px}
.mz-bag .b2,.mz-bag .p2{opacity:0}
.on1 .mz-bag{animation:mzUp .45s 2.5s both cubic-bezier(.3,1.3,.5,1)}
.on1 .mz-bag .b1,.on1 .mz-bag .p1{animation:mzOff .25s 5.35s both}
.on1 .mz-bag .b2,.on1 .mz-bag .p2{animation:mzOn .25s 5.35s both}
@keyframes mzOff{to{opacity:0;transform:translateY(-12px)}}
@keyframes mzOn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes mzUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.mz-sent{position:absolute;inset:0;background:#120e0ce8;display:grid;place-content:center;text-align:center;gap:6px;opacity:0;z-index:8}
.mz-sent b{font-size:27px;white-space:nowrap;color:#4be39a;letter-spacing:.04em}.mz-sent small{font:500 13px Inter;color:#cfc3b6}
.on1 .mz-sent{animation:mzPop .5s 6.9s both cubic-bezier(.3,1.5,.5,1)}
.mz-ly{animation:mzCai .7s cubic-bezier(.34,1.5,.55,1) both;animation-delay:calc(var(--i)*.17s + .3s);animation-play-state:paused}
.on1 .mz-ly{animation-play-state:running}
@keyframes mzCai{0%{opacity:0;transform:translateY(-130px)}25%{opacity:1}100%{opacity:1;transform:none}}
.mz-finger{position:absolute;left:0;top:0;font-size:34px;opacity:0;z-index:9;filter:drop-shadow(0 6px 8px #0008);pointer-events:none}
.on1 .mz-finger{animation:mzFing 8.4s both}
@keyframes mzFing{0%,22%{opacity:0;transform:translate(137px,340px)}
 26%{opacity:1;transform:translate(137px,284px)}29%{transform:translate(137px,290px) scale(.88)}32%{transform:translate(137px,284px)}
 37%{opacity:1;transform:translate(81px,350px)}40%{transform:translate(81px,350px)}50%{opacity:1;transform:translate(81px,190px)}
 56%{transform:translate(137px,150px)}60%{transform:translate(137px,156px) scale(.88)}63%{transform:translate(137px,150px)}
 71%{opacity:1;transform:translate(81px,436px)}76%{transform:translate(81px,442px) scale(.88)}79%{opacity:1;transform:translate(81px,436px)}
 86%,100%{opacity:0;transform:translate(81px,456px)}}

/* cliente tira foto do QR com o celular */
.mz-pp .ph{left:12px;top:37px;width:10px;height:17px;border-radius:3px;background:#0b0b10;box-shadow:0 0 0 1px #9a9aa8,0 0 10px 2px #ffb020aa;opacity:0;z-index:5}
.mz-pp .ph::after{content:"";position:absolute;left:1px;top:2px;right:1px;bottom:2px;border-radius:2px;background:linear-gradient(180deg,#ffd27a,#ff8a3d)}
.on0 .mz-cu .ph{animation:mzPh .5s 2.7s both}
.on2 .mz-cu .ph{animation:none;opacity:0}
@keyframes mzPh{from{opacity:0;transform:translateY(-10px) scale(.7)}to{opacity:1;transform:none}}
.on0 .mz-cu .hn{animation:mzRaise .5s 2.7s both}
.on2 .mz-cu .hn{animation:none}
@keyframes mzRaise{to{transform:translate(0,9px)}}
.on3 .mz-cu .hn.r{animation:mzHand 1.6s 3.2s ease-in-out infinite}
.on3 .mz-cu .hd{animation:mzEat 1.6s 3.2s ease-in-out infinite}
.mz-flash{position:absolute;left:319px;top:380px;width:22px;height:26px;border-radius:50%;background:radial-gradient(circle,#fff,#fff0 70%);opacity:0;z-index:6;pointer-events:none}
.on0 .mz-flash{animation:mzFl .5s 3.5s both}
@keyframes mzFl{0%{opacity:0;transform:scale(1)}30%{opacity:1;transform:scale(3.6)}100%{opacity:0;transform:scale(5)}}

/* cozinha */
.mz-kit{position:absolute;left:204px;top:10px;width:262px;height:132px;border-radius:14px;border:5px solid #2c2e42;background:#14111f;box-shadow:0 18px 34px #000c;overflow:hidden;z-index:4}
.mz-kh{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:#1d1a30;color:var(--gold2);font:700 11px Inter;letter-spacing:.16em;text-transform:uppercase}
.mz-kh i{font-style:normal;color:#4be39a;font-size:10px}
.mz-tk{position:absolute;left:10px;right:10px;top:36px;border-radius:12px;background:#201c36;border:1px solid #ffb02088;padding:9px 12px 10px;opacity:0}
.on2 .mz-tk{animation:mzIn .5s .9s both cubic-bezier(.3,1.3,.5,1)}
@keyframes mzIn{from{opacity:0;transform:translateY(-22px) scale(.96)}to{opacity:1;transform:none}}
.mz-tk b{display:block;color:#fff;font:800 17px/1.2 Inter}.mz-tk small{display:block;color:#a9a6c4;font:500 11.5px/1.3 Inter}
.mz-pls{display:flex;gap:4px;margin-top:8px;flex-wrap:nowrap}
.mz-pls span{font:700 9.5px/1 Inter;border-radius:99px;padding:4px 7px;background:#ffffff12;color:#8c89a8;white-space:nowrap}
.on2 .mz-pls span:nth-child(1){animation:mzAct .3s 1.1s both}
.on2 .mz-pls span:nth-child(2){animation:mzAct .3s 2.1s both}
.on2 .mz-pls span:nth-child(3){animation:mzAct .3s 3.1s both}
.on3 .mz-pls span:nth-child(4){animation:mzAct .3s 2.2s both}
@keyframes mzAct{to{background:linear-gradient(135deg,#ff6a13,#ffb020);color:#1a0d03}}
.mz-pk{position:absolute;left:160px;top:270px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd27a,#ff6a13);box-shadow:0 0 18px 6px #ff6a1388;opacity:0;z-index:8}
.on2 .mz-pk{animation:mzFly .9s both ease-in-out}
@keyframes mzFly{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(120px,-200px) scale(.5)}}
.mz-ping{position:absolute;left:260px;top:48px;font:800 11px Inter;color:#ffb020;opacity:0;z-index:6;white-space:nowrap}

/* pular direto para o fim do passo (clique nos botões) e acessibilidade */
.mz-skip *{animation-duration:0s!important;animation-delay:0s!important}
@media(max-width:900px){.mz-grid{grid-template-columns:1fr;gap:28px}.mz-steps button{font-size:11.5px;padding:7px 6px}.mz-steps button span{display:none}.mz-steps button.on span{display:inline}}
@media(prefers-reduced-motion:reduce){.mz-scene *{animation:none!important;transition:none!important}}
/* sem animação: mostra o resultado final */
.mz-static .mz-tk,.mz-static .mz-food,.mz-static .mz-ok,.mz-static .mz-bag,.mz-static .mz-bag .b2,.mz-static .mz-bag .p2{opacity:1}
.mz-static .mz-bag .b1,.mz-static .mz-bag .p1{opacity:0}
.mz-static .mz-cu{opacity:1;transform:translate(330px,466px) rotate(180deg)}
.mz-static .mz-pls span{background:linear-gradient(135deg,#ff6a13,#ffb020);color:#1a0d03}
.mz-static .mz-wp,.mz-static .mz-hit{display:none}