/* Animação do celular (filme do pedido) e comanda: peças compartilhadas pela proposta C. Extraído do site.css. */
/* comanda (ticket) */
.ticket { width: 270px; background: var(--receipt); color: #1d1b16; padding: 16px 16px 20px; font: 13px/1.45 var(--mono); border-radius: 3px 3px 0 0; position: relative; box-shadow: 0 10px 28px rgba(20,16,10,.18);
  --edge: radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px); }
.ticket::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: var(--receipt);
  -webkit-mask: conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) 50% / 12px 100%; mask: conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) 50% / 12px 100%; }
.ticket p { margin: 0; }
.ticket hr { border: 0; border-top: 1px dashed #8f8a7c; margin: 7px 0; }
.ticket .t-head { text-align: center; font-weight: 700; letter-spacing: .02em; }
.ticket .t-paid { text-align: center; margin: 6px 0; padding: 3px 0; background: var(--verde-bg); color: #0c5c37; font-weight: 700; }
.ticket.due .t-paid { background: #fde8b0; color: #6b4a00; }
.ticket .t-line, .ticket .t-total { display: flex; justify-content: space-between; gap: 10px; }
.ticket .t-total { font-weight: 700; font-size: 15px; }
.ticket .t-sub { color: #5b574c; padding-left: 8px; }
.ticket .t-end { text-align: center; color: #6f6a5c; margin-top: 8px; }

/* celular */
.phone { color: #1a1713; width: 300px; background: #0f0e0c; border-radius: 40px; padding: 10px; box-shadow: 0 30px 60px rgba(20,16,10,.28), inset 0 0 0 1.5px #3b372f; flex: none; }
.phone .screen { background: var(--white); border-radius: 31px; overflow: hidden; height: 560px; position: relative; display: flex; flex-direction: column; }
.phone.small .screen { height: 540px; }
.app, .scr { display: flex; flex-direction: column; height: 100%; font-size: 13px; line-height: 1.35; }
.scr[hidden] { display: none; }
.app-head { display: flex; align-items: center; gap: 10px; padding: 16px 14px 12px; background: var(--brand, #c8102e); color: #fff; transition: background-color .4s; }
.app-head .logo { width: 38px; height: 38px; border-radius: 50%; background: var(--accent, #f5a400); color: #5a0610; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.app-head b { display: block; font-size: 15px; font-stretch: 90%; }
.app-head small { opacity: .9; font-size: 11.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span, .app-chips span { padding: 6px 11px; border-radius: 99px; background: #f1ece2; font-weight: 600; font-size: 12px; white-space: nowrap; }
.chips span.on, .app-chips span.on { background: var(--brand, #c8102e); color: #fff; }
.app-chips { display: flex; gap: 6px; padding: 10px 12px; overflow: hidden; border-bottom: 1px solid #eee; }
.app-list { flex: 1; overflow: auto; padding: 4px 12px; scrollbar-width: none; }
.app-list::-webkit-scrollbar { display: none; }
.app-list li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0ece3; position: relative; }
.app-list img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.app-list b { font-size: 14px; display: block; padding-right: 66px; }
.app-list small { display: block; color: #6b665c; font-size: 11.5px; line-height: 1.3; margin: 1px 0 3px; }
.app-list em { font-style: normal; font-weight: 700; color: var(--brand, #c8102e); font-size: 12.5px; }
.badge { position: absolute; right: 0; top: 10px; background: var(--accent, var(--mostarda)); color: #4a3500; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; }
.badge.new { background: #d6efe0; color: #0c5c37; }
.app-bar { display: flex; justify-content: space-between; align-items: center; margin: 10px 12px 14px; padding: 13px 16px; background: var(--brand, #c8102e); color: #fff; border-radius: 12px; font-weight: 700; font-size: 14px; }

/* builder (passo 1) */
.builder { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.half { position: relative; width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.2); flex: none; }
.half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.half .l { clip-path: inset(0 50% 0 0); }
.half .r { clip-path: inset(0 0 0 50%); }
.half::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: #fff; }
.half.lg { width: min(260px, 70vw); height: min(260px, 70vw); }
.b-flav { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 12px; text-align: center; }
.b-flav span { flex: 1; }
.b-row small { display: block; color: #6b665c; margin-bottom: 4px; font-weight: 600; }

/* pagamento (passo 2) */
.pay { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.p-sum { background: #f7f4ed; border-radius: 10px; padding: 10px 12px; }
.p-sum p { display: flex; justify-content: space-between; margin: 2px 0; }
.p-sum .cp { color: var(--verde); font-weight: 600; }
.p-sum .tot { border-top: 1px dashed #bbb5a6; margin-top: 5px; padding-top: 5px; font-weight: 800; font-size: 15px; }
.qr { width: 150px; height: 150px; margin: 2px auto; background: #fff; padding: 6px; border: 1px solid #e3ded2; border-radius: 8px; }
.p-note { text-align: center; color: #6b665c; font-size: 11.5px; }

/* tela bloqueada (passo 3) */
.lock { flex: 1; background: linear-gradient(180deg, #2b2620, #15120f); color: #fff; padding: 38px 14px; display: flex; flex-direction: column; gap: 10px; }
.clock { text-align: center; font-size: 54px; font-weight: 300; font-stretch: 85%; line-height: 1; margin-bottom: 22px; }
.notif { background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border-radius: 14px; padding: 10px 12px; }
.notif small { display: block; opacity: .75; font-size: 11px; }
.notif b { display: block; font-size: 14px; margin: 2px 0; }
.notif span { font-size: 12px; opacity: .92; }
.notif.dim { opacity: .75; }

/* ================= O FILME (hero animado) ================= */
.phone.big { width: 312px; }
.phone.big .screen { height: 590px; }
.film { position: absolute; inset: 0; overflow: hidden; background: #fff; font-size: 13px; line-height: 1.35; }
.sc { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(26px) scale(.985); pointer-events: none; transition: opacity .4s ease, transform .45s cubic-bezier(.2,.8,.2,1); background: #fff; }
.film[data-scene="0"] .sc-menu, .film[data-scene="1"] .sc-item, .film[data-scene="2"] .sc-pay, .film[data-scene="3"] .sc-pix, .film[data-scene="4"] .sc-owner { opacity: 1; transform: none; }
.film .app-list { flex: 1; overflow: hidden; padding: 0 12px; }
.film .app-list ul { transition: transform 1.5s cubic-bezier(.45,.05,.2,1); }
.film.s-scrolled .app-list ul { transform: translateY(-62px); }
.film [data-pick].hot { background: #fdf0e9; box-shadow: -12px 0 0 #fdf0e9, 12px 0 0 #fdf0e9; }

/* dedo (toque) */
.finger { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(26,23,19,.28); border: 2px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.3); opacity: 0; transform: translate(var(--fx, 240px), var(--fy, 520px)); transition: transform .75s cubic-bezier(.45,.05,.2,1), opacity .3s, scale .12s; z-index: 5; pointer-events: none; }
.film.f-on .finger { opacity: 1; }
.finger.tap { scale: .72; background: rgba(232,67,31,.45); }
.finger::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--brasa); opacity: 0; }
.finger.tap::after { animation: ripple .55s ease-out; }
@keyframes ripple { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(2.4); } }

/* cena 1: item */
.it-photo { position: relative; height: 190px; flex: none; overflow: hidden; background: #ddd; }
.it-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.it-photo .b { clip-path: inset(0 0 0 100%); transition: clip-path .7s cubic-bezier(.5,0,.2,1); }
.film.s-half .it-photo .b { clip-path: inset(0 0 0 50%); }
.it-photo .cut { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; transform: scaleY(0); transform-origin: top; transition: transform .5s .25s; }
.film.s-half .it-photo .cut { transform: none; }
.it-body { padding: 12px 14px 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.it-title { margin: 0; font-size: 16px; font-stretch: 85%; font-weight: 800; position: relative; height: 38px; }
.it-title span { position: absolute; left: 0; top: 0; transition: opacity .3s, transform .3s; }
.it-title .t2 { opacity: 0; transform: translateY(8px); }
.film.s-half .it-title .t1 { opacity: 0; transform: translateY(-8px); }
.film.s-half .it-title .t2 { opacity: 1; transform: none; }
.it-row small { display: block; color: #6b665c; margin-bottom: 4px; font-weight: 600; }
.film .chips span { transition: background-color .2s, color .2s, transform .2s; }
.film .chips span.on { background: var(--brand, #c8102e); color: #fff; transform: scale(1.04); }
.film .app-bar { transition: transform .12s; }
.film .app-bar.press { transform: scale(.97); }
.film .app-bar b { font-variant-numeric: tabular-nums; }

/* cena 2: sacola */
.sc-pay .pay { padding: 14px; flex: 1; }
.sc-pay .p-sum p { transition: opacity .35s, transform .35s; }
.sc-pay .pl, .sc-pay .tot { opacity: 0; transform: translateY(8px); }
.film[data-scene="2"] .sc-pay .pl, .film[data-scene="2"] .sc-pay .tot { opacity: 1; transform: none; transition-delay: calc(.2s + var(--k, 0) * .28s); }
.sc-pay .cp { opacity: 0; }
.film:not(.s-cupom) .sc-pay .cp { opacity: 0 !important; height: 0; margin: 0; overflow: hidden; }
.sc-pay .cp span:last-child { font-weight: 800; }
.sc-pay [data-type] { text-decoration: none; border-bottom: 1px dashed currentColor; font-weight: 700; }
.pay-m { margin-top: 12px; }
.pay-m span.on { background: var(--brand, #c8102e); color: #fff; }

/* cena 3: pix */
.pix-body { flex: 1; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }
.qrbox { position: relative; width: 190px; height: 190px; border: 1px solid #e3ded2; border-radius: 12px; padding: 8px; transition: opacity .35s, transform .4s; }
.qrbox .qr { width: 100%; height: 100%; padding: 0; border: 0; margin: 0; }
.scan { position: absolute; left: 8px; right: 8px; top: 8px; height: 3px; background: var(--brasa); box-shadow: 0 0 14px 3px rgba(232,67,31,.55); border-radius: 3px; opacity: 0; }
.film[data-scene="3"]:not(.s-paid) .scan { opacity: 1; animation: scan 1.1s ease-in-out infinite alternate; }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(172px); } }
.film.s-paid .qrbox, .film.s-paid .pix-body > .p-note { opacity: 0; transform: scale(.9); position: absolute; }
.okbox { position: absolute; inset: 40px 14px auto; display: grid; justify-items: center; gap: 8px; text-align: center; opacity: 0; transform: scale(.85); transition: opacity .35s .1s, transform .45s .1s cubic-bezier(.2,1.4,.4,1); }
.film.s-paid .okbox { opacity: 1; transform: none; }
.okbox svg { width: 96px; height: 96px; fill: none; stroke: var(--verde); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.okbox circle { fill: var(--verde-bg); stroke-dasharray: 152; stroke-dashoffset: 152; }
.okbox path { stroke-dasharray: 34; stroke-dashoffset: 34; }
.film.s-paid .okbox circle { animation: draw .6s .1s forwards; }
.film.s-paid .okbox path { animation: draw .4s .55s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.okbox b { font-size: 17px; font-stretch: 85%; }
.okbox span { color: #6b665c; font-size: 12px; }

/* cena 4: cozinha */
.sc-owner { background: #15120f; }
.sc-owner .lock { position: relative; }
.sc-owner .notif { opacity: 0; transform: translateY(-26px) scale(.96); transition: opacity .35s, transform .5s cubic-bezier(.2,1.5,.4,1); }
.film[data-scene="4"] .n1 { opacity: 1; transform: none; transition-delay: .15s; }
.film[data-scene="4"] .n2 { opacity: .85; transform: none; transition-delay: 1.1s; }
.film[data-scene="4"] .n3 { opacity: .85; transform: none; transition-delay: 2s; }
.wave { display: flex; gap: 5px; justify-content: center; align-items: center; height: 40px; margin-top: auto; }
.wave i { width: 6px; height: 12px; border-radius: 3px; background: var(--mostarda); }
.film[data-scene="4"] .wave i { animation: bar .7s ease-in-out infinite alternate; }
.wave i:nth-child(2) { animation-delay: .1s !important; } .wave i:nth-child(3) { animation-delay: .2s !important; } .wave i:nth-child(4) { animation-delay: .3s !important; } .wave i:nth-child(5) { animation-delay: .4s !important; }
@keyframes bar { to { height: 34px; } }
.film[data-scene="4"] .notif.n1 { animation: ring 1.6s 1s ease-in-out 2; }
@keyframes ring { 0%, 100% { rotate: 0deg; } 10%, 30%, 50% { rotate: -2deg; } 20%, 40%, 60% { rotate: 2deg; } 70% { rotate: 0deg; } }

/* comanda lateral imprimindo (desktop) */
@media (min-width: 980px) {
  .hero-visual .ticket.float { opacity: 0; clip-path: inset(0 0 100% 0); transform: rotate(-3deg) translateY(-18px); transition: opacity .2s; bottom: 78px; left: -60px; }
  .hero-visual[data-scene="4"] .ticket.float { opacity: 1; animation: print2 1.6s .6s steps(22, end) both; }
}
@keyframes print2 { from { clip-path: inset(0 0 100% 0); transform: rotate(-3deg) translateY(-18px); } to { clip-path: inset(0 0 0 0); transform: rotate(-3deg); } }

/* controle das etapas */
.film-ctl { position: absolute; left: 50%; bottom: -54px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 99px; padding: 5px; box-shadow: 0 6px 20px rgba(20,16,10,.1); white-space: nowrap; }
.film-ctl button { border: 0; background: transparent; padding: 7px 11px; border-radius: 99px; font-weight: 700; font-size: .82rem; cursor: pointer; position: relative; overflow: hidden; color: var(--muted); }
.film-ctl button i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--brasa); }
.film-ctl button.on { color: var(--ink); background: #f4efe5; }
.film-ctl button.on i { animation: fill var(--dur, 3s) linear forwards; }
.film-ctl button.done { color: var(--verde); }
.film-ctl .pp { min-width: 44px; padding: 7px 10px; font-size: .7rem; border-left: 1px solid var(--line); border-radius: 0 99px 99px 0; }
@keyframes fill { to { width: 100%; } }
@media (max-width: 420px) { .film-ctl button { padding: 7px 7px; font-size: .74rem; } }
/* seletor de ramo acima do celular */
.film-flows { position: absolute; top: -52px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 99px; padding: 5px; box-shadow: 0 6px 20px rgba(20,16,10,.1); white-space: nowrap; }
.film-flows button { border: 0; background: transparent; padding: 7px 13px; border-radius: 99px; font-weight: 700; font-size: .85rem; cursor: pointer; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.film-flows button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.film-flows button.on { background: var(--ink); color: #fff; }
.hero-visual { margin-top: 34px; }
.phone.big { transition: box-shadow .4s; }
.film .it-photo .b { display: block; }
.film .it-photo.solo .b, .film .it-photo.solo .cut { display: none; }
.film .app-list .hot { border-radius: 6px; }
.photos { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.dish { width: 150px; text-align: center; font-weight: 700; font-size: .88rem; line-height: 1.25; }
.dish img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.dish span { display: block; font-weight: 400; color: #5d5850; margin-top: 2px; }

.who { color: var(--ink); font-weight: 600; font-size: .98rem; padding-top: 4px; border-top: 1px dashed var(--line); }
.half.lg2 { position: relative; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; margin: 0 auto 8px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.half.lg2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.half.lg2 .l { clip-path: inset(0 50% 0 0); } .half.lg2 .r { clip-path: inset(0 0 0 50%); }
.half.lg2::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: #fff; }
.cg.big .photos { justify-self: center; }

/* avisos pipocando ao lado do celular quando o pedido chega */
.pops { display: none; color: var(--ink); }
@media (min-width: 1080px) {
  .pops { display: grid; gap: 10px; position: absolute; right: -78px; top: 190px; z-index: 4; width: 200px; }
  .pop { margin: 0; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 14px; padding: 9px 13px; box-shadow: 4px 4px 0 var(--ink); opacity: 0; transform: translateX(-24px) scale(.9); transition: opacity .3s, transform .5s cubic-bezier(.2,1.5,.4,1); line-height: 1.25; }
  .pop b { display: block; font-size: .95rem; }
  .pop span { font-size: .82rem; color: var(--muted); }
  .hero-visual[data-scene="4"] .pop { opacity: 1; transform: none; }
  .hero-visual[data-scene="4"] .pop:nth-child(1) { transition-delay: .3s; }
  .hero-visual[data-scene="4"] .pop:nth-child(2) { transition-delay: 1.1s; }
  .hero-visual[data-scene="4"] .pop:nth-child(3) { transition-delay: 2.1s; }
}
@media (min-width: 1080px) and (max-width: 1260px) { .pops { right: -40px; width: 176px; } .pop b { font-size: .86rem; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; }
.film-ctl button, .film-flows button { min-height: 40px; }