body { overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; font-size: clamp(16px, 2.2vmin, 26px); }
.tela { position: fixed; inset: 0; display: none; flex-direction: column; background: var(--fundo); }
.tela.ativa { display: flex; animation: entra .25s ease; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }

.btn.grande { font-size: 1.25em; padding: .9em 1.6em; }

/* idle */
#tela-idle { background: #000; }
#tela-idle .ads { flex: 1; }
#tela-idle .ad-qr { bottom: auto; top: 3%; }
.cta-idle {
  position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%);
  background: var(--cor); color: #fff; font-weight: 800; font-size: clamp(22px, 4vmin, 48px);
  padding: .7em 1.4em; border-radius: 999px; display: flex; gap: .5em; align-items: center; white-space: nowrap;
  box-shadow: 0 10px 40px rgba(0,0,0,.4); animation: pulsa 1.6s ease-in-out infinite;
}
@keyframes pulsa { 50% { transform: translateX(-50%) scale(1.06); } }
.dedo { animation: dedo 1.6s ease-in-out infinite; display: inline-block; }
@keyframes dedo { 50% { transform: translateY(-8px); } }

/* marca */
.marca { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8vh; }
.marca .logo { max-height: 18vh; max-width: 60vw; object-fit: contain; }
.marca h1 { margin: 0; font-size: 2.2em; }
.marca.pequena { flex-direction: row; margin: 0; }
.marca.pequena .logo { max-height: 56px; }
.titulo-grande { text-align: center; font-size: 2.2em; margin: 6vh 20px 4vh; }

/* comer aqui / levar */
.escolha-local { display: flex; gap: 4vmin; justify-content: center; padding: 0 5vw; }
.escolha-local button, .pagamentos button {
  flex: 1; max-width: 420px; background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 6vmin 2vmin; display: flex; flex-direction: column; align-items: center; gap: 12px; border: 3px solid transparent; transition: .15s;
}
.escolha-local button span { font-size: 4em; }
.escolha-local button b { font-size: 1.5em; }
.escolha-local button:active, .pagamentos button:active { transform: scale(.97); }
.voltar { margin: auto auto 6vh; }

/* topo */
.topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--cartao); box-shadow: 0 1px 0 var(--borda); gap: 12px; }
.topo h2 { margin: 0; font-size: 1.6em; }

/* categorias */
.categorias { display: flex; gap: 10px; overflow-x: auto; padding: 14px 20px; background: var(--cartao); scrollbar-width: none; flex-shrink: 0; }
.categorias::-webkit-scrollbar { display: none; }
.categorias button { padding: .65em 1.2em; border-radius: 999px; background: var(--fundo); font-weight: 700; white-space: nowrap; font-size: 1.05em; }
.categorias button.ativa { background: var(--cor); color: #fff; }

/* produtos */
.produtos { flex: 1; overflow-y: auto; padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 28vw, 320px), 1fr)); gap: 18px; align-content: start; }
.produto { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; text-align: left; display: flex; flex-direction: column; position: relative; }
.produto .foto { aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--cor) 12%, #fff); display: flex; align-items: center; justify-content: center; font-size: 4em; overflow: hidden; }
.produto .foto img { width: 100%; height: 100%; object-fit: cover; }
.produto .info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.produto h3 { margin: 0; font-size: 1.1em; }
.produto p { margin: 0; color: var(--suave); font-size: .85em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.produto .preco { margin-top: auto; padding-top: 6px; font-weight: 800; font-size: 1.2em; color: var(--cor); }
.produto .selo { position: absolute; top: 10px; left: 10px; background: #fbbf24; color: #1c1917; font-weight: 800; font-size: .75em; padding: 4px 10px; border-radius: 999px; }
.produto.esgotado { opacity: .5; pointer-events: none; }
.produto.esgotado .selo { background: #44403c; color: #fff; }
.produto .na-sacola { position: absolute; top: 10px; right: 10px; background: var(--cor); color: #fff; font-weight: 800; min-width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.produto:active { transform: scale(.98); }

/* barra da sacola */
.barra-sacola { padding: 14px 20px 20px; background: var(--cartao); box-shadow: 0 -1px 0 var(--borda); }
.barra-sacola .btn { width: 100%; justify-content: space-between; }
.bolha { background: #fff; color: var(--cor); border-radius: 999px; padding: 0 .55em; margin-left: .3em; font-size: .85em; }
.pulo { animation: pulo .35s; }
@keyframes pulo { 40% { transform: scale(1.05); } }

/* sacola */
.itens-sacola { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.item { background: var(--cartao); border-radius: var(--raio); padding: 14px; display: flex; gap: 14px; align-items: center; box-shadow: var(--sombra); }
.item .mini { width: 72px; height: 72px; border-radius: 12px; background: color-mix(in srgb, var(--cor) 12%, #fff); display: flex; align-items: center; justify-content: center; font-size: 2em; overflow: hidden; flex-shrink: 0; }
.item .mini img { width: 100%; height: 100%; object-fit: cover; }
.item .dados { flex: 1; min-width: 0; }
.item .dados b { display: block; }
.item .dados small { color: var(--suave); display: block; }
.qtd { display: flex; align-items: center; gap: 4px; background: var(--fundo); border-radius: 999px; padding: 4px; }
.qtd button { width: 2.2em; height: 2.2em; border-radius: 999px; background: var(--cartao); font-size: 1.2em; font-weight: 800; }
.qtd b { min-width: 1.8em; text-align: center; font-size: 1.2em; }
.vazio { text-align: center; color: var(--suave); margin-top: 10vh; font-size: 1.2em; }

.sugestoes { padding: 0 20px 10px; }
.sugestoes h3 { margin: 6px 0 10px; }
.sugestoes .lista { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.sug { flex: 0 0 auto; width: clamp(210px, 38vw, 300px); background: var(--cartao); border-radius: var(--raio); padding: 12px; display: flex; gap: 10px; align-items: center; box-shadow: var(--sombra); text-align: left; }
.sug .mini { width: 52px; height: 52px; font-size: 1.6em; border-radius: 10px; background: color-mix(in srgb, var(--cor) 12%, #fff); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.sug .mini img { width: 100%; height: 100%; object-fit: cover; }
.sug small { display: block; color: var(--cor); font-weight: 800; }
.sug .mais { margin-left: auto; background: var(--cor); color: #fff; border-radius: 999px; width: 1.8em; height: 1.8em; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }

.rodape-acao { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px 22px; background: var(--cartao); box-shadow: 0 -1px 0 var(--borda); margin-top: auto; }
.total span { display: block; color: var(--suave); }
.total b { font-size: 1.8em; }

/* dados */
#tela-dados { overflow-y: auto; }
.campos { padding: 16px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.campo { background: var(--cartao); border-radius: 14px; padding: 12px 16px; text-align: left; border: 3px solid var(--borda); }
.campo.ativo { border-color: var(--cor); }
.campo small { display: block; color: var(--suave); }
.campo .valor { display: block; font-size: 1.5em; font-weight: 700; min-height: 1.4em; }
.campo.ativo .valor::after { content: ''; display: inline-block; width: 3px; height: 1em; background: var(--cor); margin-left: 2px; vertical-align: -2px; animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.sub { margin: 18px 20px 10px; }
.pagamentos { display: flex; gap: 14px; padding: 0 20px; }
.pagamentos button { padding: 18px 10px; gap: 4px; max-width: none; }
.pagamentos button span { font-size: 2em; }
.pagamentos small { color: var(--suave); }
.pagamentos button.ativo { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 8%, #fff); }

.teclado { padding: 12px 14px 0; display: flex; flex-direction: column; gap: 8px; }
.teclado .linha { display: flex; gap: 6px; justify-content: center; }
.teclado button { flex: 1; max-width: 92px; height: clamp(48px, 6.5vmin, 76px); background: var(--cartao); border-radius: 12px; font-size: 1.3em; font-weight: 700; box-shadow: 0 2px 0 var(--borda); }
.teclado button.largo { flex: 4; max-width: 420px; font-size: 1em; }
.teclado button.ok { flex: 1.5; background: var(--cor); color: #fff; }
.teclado.numeros button { max-width: 160px; }
.teclado button.apertado { background: var(--borda); transform: translateY(2px); box-shadow: none; }

/* pix */
#tela-pix { align-items: center; justify-content: center; text-align: center; padding: 20px; }
#tela-pix .titulo-grande { margin: 0 0 10px; }
.sub-centro { color: var(--suave); font-size: 1.15em; margin: 6px 0; }
.qr-pix { background: #fff; padding: 20px; border-radius: 24px; box-shadow: var(--sombra); margin: 16px 0; }
.qr-pix img { width: min(60vmin, 520px); height: auto; }
.valor-pix { font-size: 2.6em; font-weight: 900; }
.botoes-pix { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; align-items: center; }

/* fim */
#tela-fim { background: var(--cor); color: #fff; }
.fim-topo { text-align: center; padding: 5vh 20px 3vh; display: flex; flex-direction: column; align-items: center; }
.fim-topo p { margin: 6px 0; font-size: 1.3em; }
.check { width: 80px; height: 80px; border-radius: 999px; background: #fff; color: var(--cor); font-size: 48px; font-weight: 900; display: flex; align-items: center; justify-content: center; animation: pop .4s; }
@keyframes pop { from { transform: scale(0); } 70% { transform: scale(1.15); } }
.senha-rotulo { margin-top: 2vh; letter-spacing: .2em; font-weight: 700; opacity: .85; }
.senha { font-size: clamp(90px, 22vmin, 260px); font-weight: 900; line-height: 1; }
.fim-msg { max-width: 640px; opacity: .95; }
.fim-topo .btn { margin-top: 10px; }
.ads.espera { flex: 1; margin: 0 20px 20px; border-radius: var(--raio); }

/* modais */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: flex-end; justify-content: center; z-index: 50; }
.modal.on { display: flex; animation: fundo .2s; }
@keyframes fundo { from { background: transparent; } }
.modal .caixa { background: var(--cartao); width: 100%; max-width: 900px; border-radius: 28px 28px 0 0; overflow: hidden; max-height: 94vh; display: flex; flex-direction: column; animation: sobe .25s ease; position: relative; }
@keyframes sobe { from { transform: translateY(40px); opacity: 0; } }
.modal .caixa.pequena { align-self: center; border-radius: 28px; padding: 30px; text-align: center; max-width: 520px; margin: 20px; }
.foto-grande { aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--cor) 12%, #fff); display: flex; align-items: center; justify-content: center; font-size: 7em; overflow: hidden; flex-shrink: 1; min-height: 120px; }
.foto-grande img { width: 100%; height: 100%; object-fit: cover; }
.mp-corpo { padding: 20px 24px 26px; overflow-y: auto; }
.mp-corpo h2 { margin: 0 0 6px; font-size: 1.7em; }
.mp-corpo p { margin: 0 0 14px; color: var(--suave); }
.obs-btn { width: 100%; text-align: left; padding: 14px 16px; border-radius: 14px; border: 2px dashed var(--borda); color: var(--suave); }
.obs-btn.preenchido { border-style: solid; border-color: var(--cor); color: var(--texto); }
#mp-teclado { padding: 10px 0 0; }
.mp-linha { display: flex; gap: 16px; align-items: center; margin-top: 18px; }
.mp-linha .btn { flex: 1; justify-content: space-between; }
.fechar { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 999px; background: rgba(255,255,255,.95); font-size: 22px; box-shadow: var(--sombra); }
.modal .caixa > .fechar { z-index: 2; }

/* paisagem (totem deitado ou monitor) */
@media (orientation: landscape) {
  .produtos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  #tela-fim { flex-direction: row; }
  .fim-topo { flex: 0 0 42%; justify-content: center; }
  .ads.espera { margin: 20px 20px 20px 0; }
  .modal .caixa { flex-direction: row; max-width: 1100px; align-self: center; border-radius: 28px; margin: 20px; }
  .foto-grande { aspect-ratio: auto; flex: 0 0 40%; }
}

/* ---------- visual premium ---------- */
.cta-idle { overflow: hidden; }
.cta-idle::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); animation: varre 2.8s ease-in-out infinite; }
@keyframes varre { 60%, 100% { transform: translateX(120%); } }

.topo { background: linear-gradient(180deg, #fff, #fff8f9); }
.categorias button { transition: transform .15s, background .2s; }
.categorias button.ativa { background: linear-gradient(135deg, var(--cor), color-mix(in srgb, var(--cor) 70%, #f97316)); box-shadow: 0 6px 18px color-mix(in srgb, var(--cor) 35%, transparent); }

.produto { border: 1px solid rgba(0,0,0,.04); transition: transform .25s cubic-bezier(.2,.8,.2,1.2), box-shadow .25s; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.produto .foto { background: radial-gradient(circle at 50% 38%, #fff 0%, color-mix(in srgb, var(--cor) 14%, #fff) 70%); position: relative; overflow: visible; }
.produto .foto img { object-fit: contain; transform: scale(1.18); transition: transform .35s cubic-bezier(.2,.8,.2,1.3); filter: drop-shadow(0 10px 12px rgba(0,0,0,.18)); }
.produto:active .foto img, .produto.toque .foto img { transform: scale(1.3) translateY(-6px); }
.produto:active { transform: perspective(700px) scale(.97); }
.produto .preco { display: flex; align-items: center; justify-content: space-between; }
.produto .preco::after { content: '＋'; width: 1.7em; height: 1.7em; border-radius: 999px; background: var(--cor); color: #fff; display: grid; place-items: center; font-size: .85em; box-shadow: 0 4px 12px color-mix(in srgb, var(--cor) 45%, transparent); }
.produto.esgotado .preco::after { display: none; }
.foto-grande { background: radial-gradient(circle at 50% 40%, #fff, color-mix(in srgb, var(--cor) 18%, #fff)); }
.foto-grande img { object-fit: contain; animation: gira-leve 6s ease-in-out infinite; filter: drop-shadow(0 18px 20px rgba(0,0,0,.2)); }
@keyframes gira-leve { 50% { transform: translateY(-8px) rotate(-2deg) scale(1.03); } }
.item .mini img, .sug .mini img { object-fit: contain; }
.item .mini, .sug .mini { background: radial-gradient(circle, #fff, color-mix(in srgb, var(--cor) 14%, #fff)); }

/* item voando pra sacola */
.voando { position: fixed; z-index: 90; pointer-events: none; border-radius: 16px; transition: transform .7s cubic-bezier(.5,-0.3,.7,.4), opacity .7s; }
.voando img { width: 100%; height: 100%; object-fit: contain; }

/* senha em 3D + confete */
#tela-fim { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--cor) 75%, #fff), var(--cor) 45%, color-mix(in srgb, var(--cor) 55%, #000)); overflow: hidden; }
.senha { color: #fff; text-shadow: 0 1px 0 #f3f3f3, 0 2px 0 #e5e5e5, 0 3px 0 #d9d9d9, 0 4px 0 #cfcfcf, 0 5px 0 #c4c4c4, 0 6px 0 #b8b8b8, 0 8px 10px rgba(0,0,0,.25), 0 18px 30px rgba(0,0,0,.25);
  animation: senha-entra .9s cubic-bezier(.2,1.4,.3,1) both; display: inline-block; }
@keyframes senha-entra { from { transform: perspective(600px) rotateX(80deg) scale(.4); opacity: 0; } }
#confete { position: absolute; inset: 0; pointer-events: none; z-index: 5; width: 100%; height: 100%; }
.fim-topo { position: relative; z-index: 6; }