/* bfood — telas de verdade (nasceram do protótipo aprovado de 25/10). Mesmo mundo do bplayer celular (grafite, creme, laranja #FE5411, Sora, entrada estilo Crunchyroll).
   Só transform/opacity em movimento. Sem dvh obrigatório (iPhone antigo / WebView 80): alturas por position:fixed + inset. */
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --grafite: #101112;
  --fundo-entrada: #111213;
  --sup: #1A1B1F;
  --sup-2: #24252A;
  --sup-3: #2E2F35;
  --linha: #26272C;
  --barra: #17181B;
  --texto: #FFFFFF;
  --creme: #F3EADC;
  --suave: #A9ABB2;
  --apagado: #80838B;
  --laranja: #FE5411;
  --laranja-escuro: #C93F09;
  --laranja-rgb: 254, 84, 17;
  --sobre-laranja: #101112;
  --aviso: #FFB020;
  --perigo: #FF6B5E;
  --curva: cubic-bezier(.16, 1, .3, 1);
  --curva-sai: cubic-bezier(.4, 0, 1, 1);
  --topo-h: 56px;
  --barra-h: 56px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --z-barra: 20;
  --z-folha: 60;
  --z-alarme: 70;
  --z-aviso: 80;
  --z-abertura: 90;
  --lateral-w: 240px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--grafite); color: var(--texto); }
body {
  font: 400 16px/1.45 "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
}
input, textarea { -webkit-user-select: text; user-select: text; }
::selection { background: rgba(var(--laranja-rgb), .4); color: #fff; }
input, textarea { caret-color: var(--laranja); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; margin: 0; -webkit-appearance: none; appearance: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-p { width: 18px; height: 18px; }
.ic-g { width: 32px; height: 32px; }

/* barras de rolagem no tema */
.rola { scrollbar-width: thin; scrollbar-color: #3A3B41 transparent; }
.rola::-webkit-scrollbar { width: 8px; height: 8px; }
.rola::-webkit-scrollbar-thumb { background: #3A3B41; border-radius: 8px; border: 2px solid var(--grafite); }
.rola::-webkit-scrollbar-track { background: transparent; }

/* foco por teclado: anel creme instantâneo; toque não mostra anel */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--creme); outline-offset: 2px; }
/* navegador sem :focus-visible (Safari 13, Chrome/WebView 80): o nucleo.js põe .sem-fv no <html> e .teclado
   enquanto se usa teclado ou controle (sai no toque). Campo de linha segue só com a linha laranja. */
html.sem-fv.teclado :focus:not(input):not(textarea):not(select) { outline: 2px solid var(--creme); outline-offset: 2px; }

/* ---------- casca ---------- */
.app { position: fixed; left: 0; right: 0; bottom: 0; top: 0; display: flex; flex-direction: column; }
:root { --topo-seguro: var(--safe-t); }

.palco { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.tela { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; background: var(--grafite); }
.tela.entra { animation: tela-entra 240ms var(--curva) both; }
.tela.volta { animation: tela-volta 160ms linear both; }
@keyframes tela-entra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes tela-volta { from { opacity: .4; } to { opacity: 1; } }

.rola { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; position: relative; }
.rola-pad { padding-bottom: 32px; }

/* topo */
.topo {
  flex: none; position: relative; z-index: 5; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center;
  min-height: calc(var(--topo-h) + var(--topo-seguro)); padding: var(--topo-seguro) var(--safe-r) 0 var(--safe-l); background: var(--grafite);
}
.topo h1 { grid-column: 2; text-align: center; font-size: 17px; font-weight: 800; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .topo-esq { grid-column: 1; justify-self: start; }
.topo .topo-dir { grid-column: 3; justify-self: end; display: flex; }
.topo-largo { grid-template-columns: 1fr auto; padding-left: calc(16px + var(--safe-l)); padding-right: calc(4px + var(--safe-r)); }
.topo-largo h1 { grid-column: 1; text-align: left; font-size: 22px; }
.topo-largo .topo-dir { grid-column: 2; }
.icone-btn { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; transition: transform 120ms var(--curva), opacity 120ms; }
.icone-btn:active { transform: scale(.92); opacity: .7; }
/* topo transparente por cima da capa; fica sólido depois de rolar */
.topo-sobre { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
.topo-sobre::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: var(--grafite); opacity: 0; transition: opacity 200ms linear; }
.topo-sobre h1 { opacity: 0; transition: opacity 200ms linear; }
.topo-sobre.solido::before, .topo-sobre.solido h1 { opacity: 1; }
.topo-sobre:not(.solido) .icone-btn { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)); }

/* entregar em (home) */
.onde { display: flex; flex-direction: column; align-items: flex-start; min-height: 48px; justify-content: center; padding: 0 4px; text-align: left; }
.onde small { font-size: 12px; color: var(--suave); line-height: 1.2; }
.onde span { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; font-weight: 800; line-height: 1.3; }
.onde .ic { width: 18px; height: 18px; color: var(--laranja); }

/* barra de abas (celular) */
.abas {
  flex: none; position: relative; z-index: var(--z-barra); display: flex; background: var(--barra);
  padding: 0 var(--safe-r) var(--safe-b) var(--safe-l);
}
.aba { flex: 1; min-width: 0; height: var(--barra-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #C9CBD1; font-size: 11px; font-weight: 600; letter-spacing: .01em; position: relative; }
.aba .ic { width: 24px; height: 24px; }
.aba[aria-current="page"] { color: var(--laranja); font-weight: 800; }
.aba[aria-current="page"] .ic { stroke-width: 2.3; }
.aba:active .ic { transform: scale(.9); }
.aba .ic { transition: transform 120ms var(--curva); }
.aba-conta { position: absolute; top: 6px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--laranja); color: var(--sobre-laranja); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.lateral { display: none; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  font-size: 16px; font-weight: 800; letter-spacing: .005em; white-space: nowrap; border: 1px solid transparent;
  transition: transform 120ms var(--curva), opacity 120ms linear, background-color 160ms linear, color 160ms linear, border-color 160ms linear;
}
.btn:active { transform: scale(.98); }
.btn[disabled], .btn.apagado { opacity: .45; pointer-events: none; }
.btn-p { background: var(--laranja); color: var(--sobre-laranja); }
.btn-c { border-color: #4A4C53; color: #fff; }
.btn-creme { background: var(--creme); color: var(--sobre-laranja); }
.btn-perigo { border-color: rgba(255, 107, 94, .55); color: var(--perigo); }
.btn-largo { width: 100%; }
.btn-p .num, .btn-creme .num { font-weight: 800; }
.btn-peq { min-height: 44px; padding: 0 14px; font-size: 14px; }
.link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; color: var(--laranja); font-size: 14px; font-weight: 700; }
.link-branco { color: #fff; }

/* passo-a-passo de quantidade */
.passo { display: inline-flex; align-items: center; background: var(--sup-2); height: 40px; }
.passo button { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; }
.passo button:active { opacity: .6; }
.passo .ic { width: 20px; height: 20px; }
.passo output { min-width: 24px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.passo-so-mais { background: transparent; }

/* interruptor */
.inter { position: relative; flex: none; width: 50px; height: 30px; border-radius: 15px; background: #3A3B41; transition: background-color 160ms linear; }
.inter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 200ms var(--curva); }
[aria-checked="true"] > .inter, .inter[aria-checked="true"] { background: var(--laranja); }
[aria-checked="true"] > .inter::after, .inter[aria-checked="true"]::after { transform: translateX(20px); }

/* ---------- textos e blocos ---------- */
.sec { padding: 24px 16px 0; }
.sec-tit { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.sec-tit small { font-size: 14px; font-weight: 600; color: var(--suave); }
.sub { color: var(--suave); font-size: 14px; line-height: 1.5; }
.nota { color: var(--suave); font-size: 13px; line-height: 1.5; }
.creme { color: var(--creme); }
.laranja { color: var(--laranja); }
.aviso-t { color: var(--aviso); }
.perigo-t { color: var(--perigo); }
.sep { height: 8px; background: #0A0A0B; margin: 24px 0 0; }

/* linha de lista (largura toda, com setinha) */
.linha { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; position: relative; width: 100%; text-align: left; }
.linha + .linha::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--linha); }
.linha:active { background: var(--sup); }
.linha-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-txt strong { font-size: 16px; font-weight: 600; }
.linha-txt span { font-size: 14px; color: var(--suave); }
.linha-dir { flex: none; display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 15px; }
.linha .ic-seta { color: var(--apagado); width: 20px; height: 20px; }

/* ---------- abertura ---------- */
.abertura { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-abertura); display: grid; place-items: center; background: #101113; transition: opacity 260ms linear; }
.abertura.sai { opacity: 0; pointer-events: none; }
.abertura svg { width: min(72vw, 360px); height: auto; overflow: visible; }
.abertura .ab-pular { position: absolute; bottom: calc(24px + var(--safe-b)); left: 0; right: 0; text-align: center; font-size: 12px; color: #6E7179; }
.ab-tampa, .ab-prato, .ab-b, .ab-disco, .ab-letra { transform-box: fill-box; }
.ab-disco { transform-origin: 50% 50%; animation: ab-disco 520ms var(--curva) 260ms both; }
.ab-b { animation: ab-b 520ms var(--curva) 380ms both; transform-origin: 50% 100%; }
.ab-tampa { transform-origin: 50% 100%; animation: ab-tampa 1000ms var(--curva) 0ms both; }
.ab-prato { transform-origin: 50% 50%; animation: ab-prato 380ms var(--curva) 0ms both; }
.ab-letra { animation: ab-letra 420ms var(--curva) both; }
@keyframes ab-disco { from { transform: scale(0); } to { transform: none; } }
@keyframes ab-b { from { opacity: 0; transform: translateY(18%) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ab-prato { from { opacity: 0; transform: scaleX(.3); } to { opacity: 1; transform: none; } }
@keyframes ab-tampa {
  0% { opacity: 0; transform: translateY(40%); }
  22% { opacity: 1; transform: none; }
  42% { transform: translateY(-120%) rotate(-16deg); }
  58% { transform: translateY(-120%) rotate(-16deg); }
  86% { transform: translateY(4%) rotate(0); }
  100% { transform: none; }
}
@keyframes ab-letra { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

/* ---------- entrada (cópia da entrada do bplayer) ---------- */
.entrada { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; background: var(--fundo-entrada);
  padding: calc(var(--topo-seguro) + 14px) calc(20px + var(--safe-r)) calc(16px + var(--safe-b)) calc(20px + var(--safe-l)); overflow-y: auto; }
.entrada-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; }
.entrada-topo img { height: 30px; width: auto; }
.entrada-corpo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; max-width: 30rem; margin: 0 auto; padding: 8px 0; }
.entrada-arte { position: relative; width: min(84vw, 22rem, 40vh); height: min(84vw, 22rem, 40vh); margin: 0 auto 4px; display: grid; place-items: center; }
.entrada-arte::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(closest-side, rgba(var(--laranja-rgb), .26), rgba(var(--laranja-rgb), .08) 55%, rgba(var(--laranja-rgb), 0) 100%); }
.entrada-arte img { position: relative; width: 50%; height: auto; }
.entrada-selo { margin: 4px 0 12px; font-size: 15px; font-weight: 600; color: #fff; }
.entrada h1 { margin: 0 0 8px; font-size: clamp(26px, 7.4vw, 34px); line-height: 1.18; font-weight: 800; letter-spacing: -.015em; max-width: 13em; text-wrap: balance; }
.entrada-sub { margin: 0 0 24px; color: #D0D1D5; font-size: 16px; line-height: 1.5; max-width: 22em; }
.pilula { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 700; white-space: nowrap;
  transition: transform 120ms var(--curva), background-color 180ms linear, color 180ms linear, border-color 180ms linear; }
.pilula:active { transform: scale(.98); }
.pilula-contorno { border-color: rgba(255, 255, 255, .85); color: #fff; min-height: 38px; padding: 0 18px; font-size: 14px; font-weight: 600; }
.pilula-cheia { width: 100%; max-width: 26rem; min-height: 50px; background: var(--laranja); color: var(--sobre-laranja); font-weight: 800; font-size: 16px; }
.entrada-rodape { flex: none; display: flex; justify-content: space-between; gap: 12px; color: #7C7F87; font-size: 12px; margin-top: 12px; }
@media (orientation: landscape) and (min-width: 700px), (min-width: 1000px) and (min-height: 560px) {
  .entrada-corpo { flex-direction: row; max-width: 60rem; gap: clamp(24px, 5vw, 64px); text-align: left; }
  .entrada-arte { width: min(56vh, 24rem); height: min(56vh, 24rem); flex: none; margin: 0; }
  .entrada-texto { display: flex; flex-direction: column; align-items: flex-start; }
}
.entrada-texto { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* folha preta que sobe (entrar / código) */
.folha-cheia { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-folha); display: flex; flex-direction: column; background: #000; animation: folha-sobe 320ms var(--curva) both; }
.folha-cheia.sai { animation: folha-desce 220ms var(--curva-sai) both; pointer-events: none; }
.folha-cheia.pronta:not(.sai) { animation: none; }
@keyframes folha-sobe { from { transform: translateY(100%); } to { transform: none; } }
@keyframes folha-desce { from { transform: none; } to { transform: translateY(100%); } }
.folha-topo { position: relative; flex: none; display: flex; align-items: center; justify-content: center; min-height: calc(52px + var(--safe-t)); padding: calc(var(--safe-t) + 4px) 56px 4px; background: #0B0B0C; }
.folha-topo img { height: 24px; width: auto; }
.folha-topo .icone-btn { position: absolute; left: calc(4px + var(--safe-l)); bottom: 2px; }
.folha-form { width: 100%; max-width: 26rem; margin: 0 auto; padding: 28px 20px calc(28px + var(--safe-b)); display: flex; flex-direction: column; }
.folha-form h2 { text-align: center; font-size: 21px; font-weight: 700; margin: 0 0 8px; }
.folha-form .folha-sub { text-align: center; color: #A0A0A6; font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.folha-form .folha-sub b { color: #fff; font-weight: 600; }

/* campo de linha com rótulo que sobe */
.lc { position: relative; display: block; margin: 0 0 18px; padding-top: 17px; }
.lc input, .lc textarea { display: block; width: 100%; height: 42px; padding: 0; border: 0; border-bottom: 1px solid #5A5C62; border-radius: 0; background: transparent; color: #fff; font-size: 16px; font-weight: 400; outline: none; transition: border-color 180ms linear, box-shadow 180ms linear; }
.lc-rot { position: absolute; left: 0; top: 17px; height: 42px; display: flex; align-items: center; color: #A0A0A6; font-size: 16px; pointer-events: none; transform-origin: 0 0; transition: transform 180ms var(--curva), color 180ms linear; }
.lc input:focus + .lc-rot, .lc input:not(:placeholder-shown) + .lc-rot { transform: translateY(-23px) scale(.75); }
.lc input:focus + .lc-rot { color: #D0D1D5; }
.lc input:focus { border-bottom-color: var(--laranja); box-shadow: 0 1px 0 var(--laranja); }
.lc input::placeholder { color: transparent; }
.lc-dica { display: block; margin-top: 6px; font-size: 12px; color: #8A8C93; }
.btn-acende { width: 100%; min-height: 48px; margin-top: 8px; border-radius: 999px; border: 1px solid #3A3B40; color: #6B6D72; font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.btn-acende.aceso { background: var(--laranja); border-color: var(--laranja); color: var(--sobre-laranja); }
.folha-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 16px; }
.folha-links .link { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.folha-links .link.desligado { color: #6B6D72; pointer-events: none; }

/* código de 6 números */
.codigo { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 8px 0 20px; }
.codigo input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; color: transparent; caret-color: transparent; }
.codigo span { height: 56px; display: grid; place-items: center; border-bottom: 2px solid #3A3B40; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; transition: border-color 160ms linear; }
.codigo span.cheio { border-bottom-color: #8A8C93; }
.codigo span.atual { border-bottom-color: var(--laranja); }
.codigo-ok span { border-bottom-color: var(--creme); color: var(--creme); }
.carregando-fio { height: 2px; background: #1E1F23; overflow: hidden; margin: -10px 0 18px; }
.carregando-fio i { display: block; width: 40%; height: 100%; background: var(--laranja); animation: fio 900ms cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes fio { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------- cliente: home ---------- */
.destaques { position: relative; }
.destaques-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.destaques-trilho::-webkit-scrollbar { display: none; }
.destaque { position: relative; flex: 0 0 100%; scroll-snap-align: start; height: clamp(300px, 58vh, 520px); overflow: hidden; background: var(--sup); }
.destaque img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.destaque::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(16, 17, 18, .55) 0%, rgba(16, 17, 18, 0) 26%, rgba(16, 17, 18, 0) 42%, rgba(16, 17, 18, .78) 70%, var(--grafite) 100%); }
.destaque-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 16px 28px; }
.destaque-info small { display: block; font-size: 13px; font-weight: 600; color: var(--creme); margin-bottom: 4px; }
.destaque-info h2 { font-size: 30px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.destaque-info p { margin: 6px 0 14px; font-size: 14px; color: #E2E3E6; }
.destaque-info .btn { min-width: 168px; }
.pontos { position: absolute; left: 16px; bottom: 12px; z-index: 2; display: flex; gap: 6px; }
.pontos i { width: 22px; height: 3px; background: rgba(255, 255, 255, .3); transition: background-color 200ms linear; }
.pontos i.on { background: #fff; }

.cats { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 20px 12px 4px; -webkit-overflow-scrolling: touch; }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; }
.cat-foto { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--sup-2); display: grid; place-items: center; transition: transform 120ms var(--curva), opacity 160ms linear; }
.cat-foto img { width: 100%; height: 100%; object-fit: cover; }
.cat:active .cat-foto { transform: scale(.94); }
.cat[aria-pressed="true"] { color: var(--laranja); font-weight: 800; }
.cats.filtrando .cat[aria-pressed="false"] .cat-foto { opacity: .45; }

.lojas { display: flex; flex-direction: column; }
.loja-linha { display: flex; gap: 14px; align-items: center; padding: 12px 16px; position: relative; transition: background-color 120ms linear; }
.loja-linha:active { background: var(--sup); }
.loja-linha + .loja-linha::before { content: ""; position: absolute; top: 0; left: 118px; right: 0; height: 1px; background: var(--linha); }
.loja-foto { position: relative; flex: none; width: 88px; height: 88px; overflow: hidden; background: var(--sup-2); }
.loja-foto img { width: 100%; height: 100%; object-fit: cover; }
.loja-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.loja-info strong { font-size: 17px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loja-info .cat-l { font-size: 14px; color: var(--suave); }
.loja-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 14px; color: #E2E3E6; font-variant-numeric: tabular-nums; }
.loja-meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.loja-meta .ic { width: 16px; height: 16px; color: var(--suave); }
.loja-linha.fechada .loja-foto img { filter: grayscale(1); opacity: .45; }
.loja-linha.fechada strong { color: var(--suave); }
.estado-fechada { font-size: 13px; color: var(--aviso); }
.vazio { padding: 40px 24px; text-align: center; color: var(--suave); font-size: 15px; }
.vazio strong { display: block; color: #fff; font-size: 17px; margin-bottom: 6px; }

/* ---------- cliente: loja / cardápio ---------- */
.capa { position: relative; width: 100%; height: 56.25vw; max-height: 46vh; overflow: hidden; background: var(--sup); }
.capa img { width: 100%; height: 100%; object-fit: cover; }
.capa::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(16, 17, 18, .55) 0%, rgba(16, 17, 18, 0) 34%, rgba(16, 17, 18, 0) 60%, var(--grafite) 100%); }
.loja-cab { padding: 0 16px; margin-top: -28px; position: relative; z-index: 1; }
.loja-cab h2 { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.loja-cab .sub { margin-top: 4px; }
.loja-fatos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-size: 14px; color: #E2E3E6; font-variant-numeric: tabular-nums; }
.loja-fatos span { display: inline-flex; align-items: center; gap: 6px; }
.loja-fatos .ic { width: 17px; height: 17px; color: var(--suave); }
.loja-pix { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; background: var(--sup); font-size: 13px; line-height: 1.45; color: #D9DADF; }
.loja-pix .ic { width: 20px; height: 20px; color: var(--laranja); margin-top: 1px; }
.fechada-aviso { margin-top: 12px; font-size: 14px; color: var(--aviso); font-weight: 600; }

.secoes-tabs { position: -webkit-sticky; position: sticky; top: 0; z-index: 4; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; padding: 0 16px; background: var(--grafite); margin-top: 20px; border-bottom: 1px solid var(--linha); }
.secoes-tabs::-webkit-scrollbar { display: none; }
.secoes-tabs button { flex: none; min-height: 48px; font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; }
.secoes-tabs button[aria-current="true"] { color: var(--laranja); font-weight: 800; }
.secao-cardapio { padding: 20px 0 0; }
.secao-cardapio h3 { padding: 0 16px 6px; font-size: 19px; font-weight: 800; }
.item { display: flex; gap: 14px; padding: 14px 16px; width: 100%; text-align: left; position: relative; transition: background-color 120ms linear; }
.item:active { background: var(--sup); }
.item + .item::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--linha); }
.item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.item-txt strong { font-size: 16px; font-weight: 700; line-height: 1.3; }
.item-txt p { font-size: 14px; color: var(--suave); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-preco { margin-top: 2px; font-size: 16px; font-weight: 700; color: var(--creme); font-variant-numeric: tabular-nums; }
.item-foto { flex: none; width: 96px; height: 96px; overflow: hidden; background: var(--sup-2); align-self: center; }
.item-foto img { width: 100%; height: 100%; object-fit: cover; }
.item.esgotado .item-txt strong, .item.esgotado .item-preco { color: var(--apagado); }
.item.esgotado .item-foto img { filter: grayscale(1); opacity: .4; }
.item-tag { font-size: 12px; font-weight: 700; color: var(--aviso); }
.item-na-sacola { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: 13px; font-weight: 800; color: var(--laranja); }
.item-na-sacola .ic { width: 15px; height: 15px; stroke-width: 2.4; }

/* barra "ver sacola" */
.barra-sacola { flex: none; position: relative; z-index: 6; padding: 8px calc(12px + var(--safe-r)) 8px calc(12px + var(--safe-l)); background: var(--grafite); animation: sacola-entra 240ms var(--curva) both; }
.barra-sacola .btn { width: 100%; justify-content: space-between; padding: 0 16px; }
.barra-sacola .qtd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; background: rgba(16, 17, 18, .18); font-size: 14px; }
@keyframes sacola-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.acao-fixa { flex: none; padding: 12px calc(16px + var(--safe-r)) calc(12px + var(--safe-b)) calc(16px + var(--safe-l)); background: var(--grafite); box-shadow: 0 -1px 0 var(--linha); }
.acao-fixa.com-abas { padding-bottom: 12px; }
.acao-fixa .resumo-linha { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; color: var(--suave); }

/* ---------- folha de baixo (item, bairro, cobrança) ---------- */
.veu { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-folha); background: rgba(0, 0, 0, .62); animation: veu-entra 200ms linear both; }
.veu.sai { animation: veu-sai 200ms linear both; }
@keyframes veu-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes veu-sai { from { opacity: 1; } to { opacity: 0; } }
.folha { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-folha) + 1); max-height: calc(100% - 24px - var(--safe-t)); display: flex; flex-direction: column; background: var(--sup); animation: folha-sobe 320ms var(--curva) both; }
.folha.sai { animation: folha-desce 220ms var(--curva-sai) both; }
.folha.pronta:not(.sai) { animation: none; }
.folha-alca { flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 4px 4px 4px 16px; }
.folha-alca h2 { font-size: 18px; font-weight: 800; }
.folha-corpo { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.folha-pe { flex: none; display: flex; gap: 12px; align-items: center; padding: 12px calc(16px + var(--safe-r)) calc(12px + var(--safe-b)) calc(16px + var(--safe-l)); background: var(--sup); box-shadow: 0 -1px 0 var(--sup-3); }
.folha-pe .btn-p { flex: 1; justify-content: space-between; padding: 0 18px; }
.folha-pe .btn-p.btn-largo { justify-content: center; }
.folha-item .folha-foto { position: relative; height: min(56.25vw, 34vh); width: 100%; overflow: hidden; background: var(--sup-2); flex: none; }
.folha-item .folha-foto img { width: 100%; height: 100%; object-fit: cover; }
.folha-item .icone-fecha-foto { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; background: rgba(16, 17, 18, .72); display: grid; place-items: center; color: #fff; }
.folha-item .icone-fecha-sem-foto { position: absolute; top: 4px; right: 4px; }
.item-cab { padding: 18px 16px 4px; position: relative; }
.item-cab h2 { font-size: 22px; font-weight: 800; line-height: 1.2; padding-right: 40px; }
.item-cab p { margin-top: 6px; color: var(--suave); font-size: 14px; line-height: 1.5; }
.item-cab .item-preco { margin-top: 8px; font-size: 18px; }
.grupo { margin-top: 18px; }
.grupo-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--sup-2); }
.grupo-cab strong { font-size: 15px; font-weight: 800; }
.grupo-cab span { font-size: 12px; color: var(--suave); }
.grupo-cab .obrig { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--sobre-laranja); background: var(--creme); padding: 3px 7px; }
.grupo-cab .obrig.ok { background: transparent; color: var(--creme); padding: 3px 0; }
.opcao { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 16px; text-align: left; position: relative; }
.opcao + .opcao::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--sup-3); }
.opcao-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.opcao-txt b { font-size: 15px; font-weight: 600; transition: color 120ms linear; }
.opcao-txt small { font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; }
.opcao-marca { flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: var(--apagado); }
.opcao[aria-checked="true"] .opcao-txt b { color: var(--laranja); font-weight: 700; }
.opcao[aria-checked="true"] .opcao-marca { color: var(--laranja); }
.opcao.cheia:not([aria-checked="true"]) { opacity: .45; }
.obs { padding: 18px 16px 24px; }
.obs label { display: block; font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.obs textarea { width: 100%; min-height: 72px; resize: none; padding: 12px; background: var(--grafite); border: 1px solid var(--sup-3); border-radius: 0; color: #fff; font-size: 16px; line-height: 1.4; outline: none; }
.obs textarea:focus { border-color: var(--laranja); }
.obs textarea::placeholder { color: #7C7F87; }

/* ---------- sacola, pagamento, pix ---------- */
.sacola-loja { display: flex; align-items: center; gap: 12px; padding: 16px; }
.sacola-loja .mini { width: 48px; height: 48px; overflow: hidden; flex: none; background: var(--sup-2); }
.sacola-loja .mini img { width: 100%; height: 100%; object-fit: cover; }
.sacola-loja div { flex: 1; min-width: 0; }
.sacola-loja strong { display: block; font-size: 16px; font-weight: 800; }
.sacola-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; position: relative; }
.sacola-item + .sacola-item::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--linha); }
.sacola-item .si-txt { flex: 1; min-width: 0; }
.sacola-item strong { display: block; font-size: 15px; font-weight: 700; }
.sacola-item small { display: block; margin-top: 2px; font-size: 13px; color: var(--suave); line-height: 1.45; }
.sacola-item .si-preco { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--creme); font-variant-numeric: tabular-nums; }
.bloco { padding: 0 16px; }
.campos { padding: 4px 16px 0; }
.resumo { padding: 16px; display: flex; flex-direction: column; gap: 8px; font-variant-numeric: tabular-nums; }
.resumo div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: #D9DADF; }
.resumo .total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--linha); font-size: 20px; font-weight: 800; color: #fff; }
.resumo .total span:last-child { color: var(--laranja); }
.linha-bairro { background: var(--sup); }
.linha-bairro.falta strong { color: var(--laranja); }

.pag-op { display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 16px; text-align: left; position: relative; }
.pag-op + .pag-op::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--linha); }
.pag-op .ic-op { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--sup-2); color: #fff; }
.pag-op-txt { flex: 1; min-width: 0; }
.pag-op-txt strong { display: block; font-size: 16px; font-weight: 700; transition: color 120ms linear; }
.pag-op-txt span { display: block; margin-top: 3px; font-size: 14px; color: var(--suave); line-height: 1.45; }
.pag-op .opcao-marca { margin-top: 6px; }
.pag-op[aria-checked="true"] strong { color: var(--laranja); }
.pag-op[aria-checked="true"] .ic-op { background: rgba(var(--laranja-rgb), .16); color: var(--laranja); }
.pag-op[aria-checked="true"] .opcao-marca { color: var(--laranja); }
.pag-extra { padding: 0 16px 8px 70px; }
.texto-tabs { display: flex; gap: 22px; margin: 4px 0 10px; }
.texto-tabs button { min-height: 40px; font-size: 15px; font-weight: 600; color: #fff; }
.texto-tabs button[aria-pressed="true"] { color: var(--laranja); font-weight: 800; }
.garantia { display: flex; gap: 10px; align-items: flex-start; margin: 8px 16px 0; padding: 14px; background: var(--sup); font-size: 14px; line-height: 1.5; color: #D9DADF; }
.garantia .ic { color: var(--creme); width: 20px; height: 20px; margin-top: 1px; }

.pix-cab { padding: 24px 16px 0; text-align: center; }
.pix-cab small { display: block; font-size: 14px; color: var(--suave); }
.pix-cab strong { display: block; margin-top: 4px; font-size: 40px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pix-cab span { display: block; margin-top: 2px; font-size: 15px; color: #E2E3E6; }
.qr { width: 228px; height: 228px; margin: 20px auto 0; background: #fff; padding: 0; }
.qr svg { display: block; width: 100%; height: 100%; }
.copia { margin: 20px 16px 0; }
.copia-caixa { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; background: var(--sup); }
.copia-caixa code { flex: 1; min-width: 0; font: 400 13px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: #C9CBD1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recebedor { margin: 16px 16px 0; padding: 14px; border: 1px solid var(--sup-3); }
.recebedor small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.recebedor strong { display: block; margin-top: 6px; font-size: 16px; font-weight: 800; }
.recebedor span { display: block; margin-top: 2px; font-size: 14px; color: #D9DADF; font-variant-numeric: tabular-nums; }
.recebedor p { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--creme); }

/* acompanhar */
.acomp-cab { padding: 24px 16px 4px; }
.acomp-cab small { display: block; font-size: 14px; color: var(--suave); }
.acomp-cab h2 { margin-top: 4px; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.acomp-cab p { margin-top: 6px; font-size: 16px; color: var(--creme); font-variant-numeric: tabular-nums; }
.linha-tempo { padding: 20px 16px 4px; }
.etapa { position: relative; display: flex; gap: 14px; padding-bottom: 22px; }
.etapa:last-child { padding-bottom: 0; }
.etapa::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--sup-3); }
.etapa:last-child::before { display: none; }
.etapa.feita::before { background: var(--creme); opacity: .5; }
.etapa-marca { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--sup-3); display: grid; place-items: center; color: var(--sobre-laranja); }
.etapa.feita .etapa-marca { background: var(--creme); }
.etapa.feita .etapa-marca .ic { width: 15px; height: 15px; stroke-width: 3; }
.etapa.atual .etapa-marca { background: var(--laranja); }
.etapa.atual .etapa-marca::after { content: ""; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; border-radius: 50%; background: var(--laranja); opacity: .3; animation: pulso 1600ms var(--curva) infinite; }
@keyframes pulso { from { transform: scale(.6); opacity: .45; } to { transform: scale(1.25); opacity: 0; } }
.etapa-txt strong { display: block; font-size: 16px; font-weight: 700; color: var(--apagado); }
.etapa-txt span { display: block; font-size: 14px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.etapa.feita .etapa-txt strong { color: #fff; font-weight: 600; }
.etapa.feita .etapa-txt span { color: var(--suave); }
.etapa.atual .etapa-txt strong { color: var(--laranja); font-weight: 800; }
.etapa.atual .etapa-txt span { color: #E2E3E6; }
.cartao-motoboy { display: flex; align-items: center; gap: 12px; margin: 20px 16px 0; padding: 14px; background: var(--sup); }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 800; color: #fff; background: #5B4636; }
.cartao-motoboy div { flex: 1; min-width: 0; }
.cartao-motoboy div strong { display: block; font-size: 16px; font-weight: 700; }
.cartao-motoboy div span { display: block; font-size: 13px; color: var(--suave); }
.pag-status { display: flex; align-items: center; gap: 10px; margin: 12px 16px 0; padding: 12px 14px; background: var(--sup); font-size: 14px; line-height: 1.45; }
.pag-status .ic { width: 20px; height: 20px; }

/* pedidos / conta */
.pedido-linha { display: flex; gap: 14px; align-items: center; padding: 14px 16px; position: relative; }
.pedido-linha + .pedido-linha::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--linha); }
.pedido-linha .loja-foto { width: 56px; height: 56px; }
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo-laranja { color: var(--laranja); }
.selo-creme { color: var(--creme); }
.selo-aviso { color: var(--aviso); }
.selo-apagado { color: var(--apagado); }
.conta-cab { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 16px 24px; background: radial-gradient(120% 90% at 50% 0%, #3A1A0C 0%, #1A1210 50%, var(--grafite) 100%); }
.conta-cab .avatar { width: 88px; height: 88px; font-size: 36px; background: var(--laranja); color: var(--sobre-laranja); }
.conta-cab strong { font-size: 20px; font-weight: 800; }
.conta-cab span { font-size: 14px; color: var(--suave); }

.busca-campo { display: flex; align-items: center; gap: 10px; margin: 8px 16px 0; padding: 0 12px; height: 44px; background: var(--sup); }
.busca-campo .ic { color: var(--suave); width: 20px; height: 20px; }
.busca-campo input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: #fff; font-size: 16px; outline: none; }
.busca-campo input::placeholder { color: #8A8C93; }

/* ---------- loja (balcão) ---------- */
.estado-loja { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px 0 8px; font-size: 14px; font-weight: 700; }
.estado-loja .on { color: var(--creme); }
.estado-loja .off { color: var(--aviso); }
.quadro { display: flex; flex-direction: column; }
.colunas-tabs { display: flex; gap: 18px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linha); position: -webkit-sticky; position: sticky; top: 0; background: var(--grafite); z-index: 3; }
.colunas-tabs::-webkit-scrollbar { display: none; }
.colunas-tabs button { flex: none; min-height: 48px; font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.colunas-tabs button b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--sup-2); font-size: 12px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.colunas-tabs button[aria-current="true"] { color: var(--laranja); font-weight: 800; }
.colunas-tabs button.tem-novo b { background: var(--laranja); color: var(--sobre-laranja); }
.coluna { display: none; padding: 12px 12px 24px; flex-direction: column; gap: 12px; }
.coluna.ativa { display: flex; }
.coluna-tit { display: none; }
.ped { background: var(--sup); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ped-novo-tag { align-self: flex-start; padding: 3px 8px; background: var(--laranja); color: var(--sobre-laranja); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ped-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ped-cab strong { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ped-cab span { font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ped-cliente { font-size: 14px; color: #E2E3E6; }
.ped-cliente b { font-weight: 700; color: #fff; }
.ped-itens { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ped-itens li { display: flex; gap: 8px; }
.ped-itens li > b { flex: none; min-width: 22px; font-weight: 800; color: var(--creme); font-variant-numeric: tabular-nums; }
.ped-itens small { display: block; color: var(--suave); font-size: 13px; }
.ped-itens .obs-t { color: var(--aviso); }
.ped-total { display: flex; justify-content: space-between; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; padding-top: 10px; border-top: 1px solid var(--sup-3); }
.ped-pag { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; line-height: 1.4; }
.ped-pag > span { display: inline-flex; align-items: center; gap: 8px; }
.ped-pag .ic { width: 18px; height: 18px; }
.ped-acoes { display: flex; gap: 10px; }
.ped-acoes .btn { flex: 1; }
.ped-motoboy { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #E2E3E6; }
.ped-motoboy .ic { color: var(--suave); width: 18px; height: 18px; }

/* alarme de pedido novo */
.alarme { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-alarme); display: flex; flex-direction: column; background: var(--grafite); animation: veu-entra 160ms linear both; }
.alarme.sai { animation: veu-sai 180ms linear both; pointer-events: none; }
.alarme-topo { position: relative; flex: none; padding: calc(var(--safe-t) + 20px) calc(20px + var(--safe-r)) 24px calc(20px + var(--safe-l)); background: var(--laranja); color: var(--sobre-laranja); overflow: hidden; }
.alarme-topo::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #FF8A4C; animation: alarme-pisca 900ms ease-in-out infinite alternate; }
@keyframes alarme-pisca { from { opacity: 0; } to { opacity: .55; } }
.alarme-topo > * { position: relative; }
.alarme-linha1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alarme-sino { width: 56px; height: 56px; border-radius: 50%; background: var(--sobre-laranja); color: var(--laranja); display: grid; place-items: center; }
.alarme-sino .ic { width: 30px; height: 30px; stroke-width: 2; animation: sino 900ms ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes sino { 0%, 50%, 100% { transform: rotate(0); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-14deg); } 30% { transform: rotate(10deg); } 40% { transform: rotate(-6deg); } }
.alarme-som { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; background: rgba(16, 17, 18, .14); font-size: 13px; font-weight: 800; color: var(--sobre-laranja); }
.alarme-som .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.alarme-topo h2 { margin-top: 16px; font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.alarme-topo p { margin-top: 6px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.alarme-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 18px calc(20px + var(--safe-r)) 18px calc(20px + var(--safe-l)); }
.alarme-corpo .ped-itens { font-size: 16px; gap: 8px; }
.alarme-corpo .ped-itens small { font-size: 14px; }
.alarme-pe { flex: none; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px calc(20px + var(--safe-r)) calc(16px + var(--safe-b)) calc(20px + var(--safe-l)); box-shadow: 0 -1px 0 var(--linha); }
.alarme-pe .btn { min-height: 56px; font-size: 17px; }

/* retirada: pagar o motoboy */
.retirada-valor { padding: 8px 16px 0; }
.retirada-valor small { display: block; font-size: 15px; color: #E2E3E6; }
.retirada-valor strong { display: block; margin-top: 4px; font-size: 48px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: var(--laranja); font-variant-numeric: tabular-nums; }
.retirada-valor p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: #D9DADF; }

/* resumo (loja hoje / motoboy ganhos / dono) */
.contas { display: flex; flex-direction: column; }
.conta-l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; position: relative; font-variant-numeric: tabular-nums; }
.conta-l + .conta-l::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--linha); }
.conta-l span { font-size: 15px; color: #D9DADF; }
.conta-l span small { display: block; font-size: 13px; color: var(--suave); margin-top: 2px; }
.conta-l b { font-size: 18px; font-weight: 800; white-space: nowrap; }
.grande { padding: 20px 16px 8px; }
.grande small { display: block; font-size: 14px; color: var(--suave); }
.grande strong { display: block; margin-top: 2px; font-size: 44px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.grande p { margin-top: 8px; font-size: 14px; color: #D9DADF; line-height: 1.5; }

/* cardápio da loja: liga/desliga */
.cardapio-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 10px 16px; text-align: left; position: relative; }
.cardapio-item + .cardapio-item::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--linha); }
.cardapio-item .item-foto { width: 52px; height: 52px; display: grid; place-items: center; color: #4A4C53; }
.cardapio-item .ci-txt { flex: 1; min-width: 0; }
.cardapio-item strong { display: block; font-size: 15px; font-weight: 700; }
.cardapio-item small { display: block; font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; }
.cardapio-item[aria-checked="false"] strong { color: var(--apagado); }
.cardapio-item[aria-checked="false"] small { color: var(--aviso); }
.cardapio-item[aria-checked="false"] .item-foto img { filter: grayscale(1); opacity: .45; }

/* ---------- motoboy ---------- */
.disp { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px 0 8px; font-size: 14px; font-weight: 700; }
.entrega { background: var(--sup); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.entrega-rota { display: grid; grid-template-columns: 20px 1fr; gap: 4px 10px; font-size: 15px; }
.entrega-rota i { width: 10px; height: 10px; border-radius: 50%; margin: 6px 0 0 5px; background: var(--creme); }
.entrega-rota i.fim { background: var(--laranja); }
.entrega-rota b { font-weight: 700; }
.entrega-rota span { font-size: 13px; color: var(--suave); display: block; }
.entrega-ganho { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.entrega-ganho strong { font-size: 26px; font-weight: 800; color: var(--laranja); font-variant-numeric: tabular-nums; }
.entrega-ganho span { font-size: 13px; color: var(--suave); }
.cobrar { display: flex; gap: 10px; align-items: flex-start; padding: 12px; background: var(--sup-2); font-size: 14px; line-height: 1.45; }
.cobrar .ic { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.cobrar b { font-weight: 800; }
.lista-cartoes { display: flex; flex-direction: column; gap: 12px; padding: 0 12px; }
.pix-moto { margin-top: 4px; }
.pix-moto .pix-cab { padding-top: 20px; }
.pix-moto .saldo-aviso { margin-top: 12px; }
.pix-moto-nota { margin-top: 10px; }
.passo-entrega { padding: 20px 16px 0; }
.passo-entrega small { display: block; font-size: 13px; font-weight: 700; color: var(--laranja); letter-spacing: .02em; }
.passo-entrega h2 { margin-top: 4px; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; }
.passo-entrega p { margin-top: 6px; font-size: 15px; color: #D9DADF; line-height: 1.5; }
.endereco-grande { margin: 16px 16px 0; padding: 16px; background: var(--sup); }
.endereco-grande strong { display: block; font-size: 20px; font-weight: 800; line-height: 1.25; }
.endereco-grande span { display: block; margin-top: 4px; font-size: 15px; color: #D9DADF; }
.endereco-grande .acoes-linha { display: flex; gap: 10px; margin-top: 14px; }
.endereco-grande .acoes-linha { flex-wrap: wrap; }
.endereco-grande .acoes-linha .btn { flex: 1 1 0; min-width: 0; }
.endereco-grande .acoes-linha .btn:first-child:not(:only-child) { flex-basis: 100%; }

/* ---------- dono ---------- */
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); padding: 10px 12px; border-bottom: 1px solid var(--linha); }
.tabela td { padding: 12px; border-bottom: 1px solid var(--linha); font-size: 15px; vertical-align: middle; }
.tabela .dir { text-align: right; }
.tabela tfoot td { font-weight: 800; border-bottom: 0; }
.cobr-linha { display: flex; align-items: center; gap: 12px; padding: 14px 16px; position: relative; }
.cobr-linha + .cobr-linha::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--linha); }
.cobr-linha .ct { flex: 1; min-width: 0; }
.cobr-linha .ct strong { display: block; font-size: 16px; font-weight: 700; }
.cobr-linha .ct span { display: block; font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; }
.cobr-linha .cv { text-align: right; font-variant-numeric: tabular-nums; }
.cobr-linha .cv b { display: block; font-size: 17px; font-weight: 800; }
.so-pc { display: none; }
.pendente { margin: 12px 12px 0; padding: 16px; background: var(--sup-2); }
.pendente small { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--laranja); }
.pendente strong { display: block; margin-top: 6px; font-size: 18px; font-weight: 800; }
.pendente p { margin-top: 4px; font-size: 14px; color: #D9DADF; line-height: 1.5; }
.pendente .ped-acoes { margin-top: 14px; }
/* alertas do dono: mesmo cartão do pedido; o título diz o tipo, a mensagem do servidor vai inteira */
.alerta { background: var(--sup); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.alerta-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.alerta-cab strong { font-size: 16px; font-weight: 800; color: var(--aviso); }
.alerta-cab span { font-size: 13px; color: var(--suave); white-space: nowrap; }
.alerta-loja { font-size: 14px; font-weight: 700; }
.alerta-msg { font-size: 14px; line-height: 1.5; color: var(--texto); }
.alerta-nota { margin-top: 2px; }
.lista-alertas { display: flex; flex-direction: column; gap: 12px; padding: 0 12px; }
.alerta .ped-acoes { margin-top: 4px; flex-wrap: wrap; }
.alerta .ped-acoes .btn { flex: 1 1 auto; }
.alerta-pe { display: flex; justify-content: flex-end; margin: -4px -2px -8px; }
.bairro-l { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 16px; position: relative; }
.bairro-l + .bairro-l::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--linha); }
.bairro-l strong { flex: 1; font-size: 16px; font-weight: 600; }
.bairro-l .passo output { min-width: 76px; }

/* ---------- entrega por distância (25/10, pedido do lojista) ---------- */
.onde span b { font-weight: 800; max-width: calc(100vw - 120px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loja-linha.longe .loja-foto img { opacity: .5; }
.loja-linha.longe strong { color: var(--suave); }
.loja-meta.loja-longe { color: var(--suave); }
.loja-meta.loja-longe .ic { color: var(--apagado); }
.linha-bairro.longe strong { color: var(--aviso); }
.folha-sec { padding: 18px 16px 2px; font-size: 15px; font-weight: 800; }
.apagado-t { color: var(--apagado); }

/* topo com ação de texto à direita (Entrega › Mapa) */
.topo-acao { grid-template-columns: 96px 1fr 96px; }
.topo-txt { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px 0 8px; font-size: 15px; font-weight: 700; color: #fff; transition: opacity 120ms linear; }
.topo-txt:active { opacity: .6; }
.topo-txt .ic { width: 20px; height: 20px; }

/* tabela editável: até (km) · tempo · taxa */
.fx-intro { padding: 12px 16px 4px; }
.fx-intro b { color: #fff; font-weight: 700; }
.faixas { padding: 4px 16px 0; }
.faixa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 40px; gap: 8px; align-items: center; padding: 4px 0; }
.faixa-cab { padding: 6px 0 2px; }
.faixa-cab span { padding-left: 2px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.fx-campo { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px; background: var(--sup); box-shadow: inset 0 -1px 0 transparent; transition: box-shadow 160ms linear; cursor: text; }
.fx-campo:focus-within { box-shadow: inset 0 -2px 0 var(--laranja); }
.fx-campo input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; outline: none; }
.fx-campo input:focus { outline: none; }
.fx-campo span { flex: none; font-size: 13px; color: var(--suave); }
.fx-tira { width: 40px; height: 44px; display: grid; place-items: center; color: var(--apagado); transition: opacity 120ms linear; }
.fx-tira:active { opacity: .5; }
.fx-tira .ic { width: 18px; height: 18px; }
.fx-tira[disabled] { opacity: .25; pointer-events: none; }
.fx-erro { margin: 8px 16px 0; color: var(--perigo); font-size: 14px; font-weight: 600; line-height: 1.45; }
.fx-erro:empty { display: none; }
.fx-pe { padding: 4px 16px 0; }
.acao-fixa[hidden] { display: none; }
.fx-salvar-in { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }

/* mapa esquemático da entrega */
.entrega-mapa { display: none; }
.entrega-mapa.na-folha { display: block; }
.mapa-caixa { display: flex; justify-content: center; padding: 4px 16px 0; }
.mapa-svg { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.mapa-svg text { font-family: "Sora", system-ui, sans-serif; font-size: 11.5px; font-weight: 600; fill: #E2E3E6; paint-order: stroke; stroke: rgba(16, 17, 18, .9); stroke-width: 3px; stroke-linejoin: round; }
.mapa-b circle { fill: var(--creme); stroke: var(--grafite); stroke-width: 1.5; }
.mapa-b.fora circle { fill: var(--grafite); stroke: #7C7F87; stroke-width: 1.5; }
.mapa-b.fora text { fill: #8A8C93; }
.mapa-loja { fill: var(--laranja); stroke: #fff; stroke-width: 2; }
.mapa-svg .mapa-loja-t { font-weight: 800; fill: #fff; }
.mapa-svg .mapa-km { fill: var(--suave); font-size: 10.5px; }
.mapa-leg { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 14px 16px 0; font-size: 14px; }
.mapa-leg li { display: flex; align-items: center; gap: 10px; }
.mapa-leg i { flex: none; width: 14px; height: 14px; }
.mapa-leg span { flex: 1; min-width: 0; color: #D9DADF; }
.mapa-leg b { font-weight: 800; font-variant-numeric: tabular-nums; }
.mapa-nota { padding: 10px 16px 0; }
.mapa-tit { margin-top: 12px; }

/* ---------- saldo pré-pago do bfood (25/10) ---------- */
.extrato-dia { display: flex; justify-content: space-between; gap: 12px; padding: 18px 16px 8px; font-size: 13px; font-weight: 700; color: var(--suave); border-bottom: 1px solid var(--linha); }
.conta-link { color: inherit; transition: background-color 120ms linear; }
.conta-link:active { background: var(--sup); }
.conta-link b { display: inline-flex; align-items: center; gap: 4px; }
.conta-link .ic-seta { width: 18px; height: 18px; color: var(--apagado); }
.saldo-aviso { display: flex; align-items: center; gap: 10px; margin: 8px 16px 0; padding: 12px 14px; background: var(--sup); font-size: 14px; line-height: 1.45; color: #E2E3E6; }
.saldo-aviso > .ic { flex: none; width: 20px; height: 20px; color: var(--aviso); }
.saldo-aviso b { font-weight: 800; }
.saldo-aviso-forte b { color: var(--aviso); }
.saldo-faixa { margin: 10px 12px 4px; transition: background-color 120ms linear; }
.saldo-faixa:active { background: var(--sup-2); }
.saldo-faixa > span:nth-child(2) { flex: 1; min-width: 0; }
.saldo-faixa b { color: var(--aviso); }
.saldo-faixa-acao { flex: none; display: inline-flex; align-items: center; gap: 2px; font-weight: 800; color: #fff; white-space: nowrap; }
.recarga-ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 16px; }
.recarga-op { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 76px; background: var(--sup-2); transition: transform 120ms var(--curva), background-color 160ms linear; }
.recarga-op:active { transform: scale(.97); background: var(--sup-3); }
.recarga-op strong { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.recarga-op span { font-size: 12px; color: var(--suave); }
.cobr-linha .cv small { display: block; font-size: 12px; font-weight: 700; }
.so-pc-b { display: none; }

@media (min-width: 1000px) {
  .entrega-pc { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 40px; padding: 8px 32px 0; align-items: start; }
  .entrega-pc .fx-intro, .entrega-pc .faixas, .entrega-pc .fx-pe { padding-left: 0; padding-right: 0; }
  .entrega-pc .fx-erro { margin-left: 0; margin-right: 0; }
  .entrega-mapa { display: block; position: -webkit-sticky; position: sticky; top: 16px; padding: 16px 0 20px; background: var(--sup); }
  .entrega-mapa .extrato-dia { border-bottom-color: var(--sup-3); }
  .entrega-mapa .conta-l + .conta-l::before { background: var(--sup-3); }
  .mapa-leg { grid-template-columns: 1fr 1fr; gap: 6px 24px; }
  .so-cel-f { display: none; }
  .so-pc-b { display: block; }
  .tabela-caixa { padding: 0 32px; }
  .saldo-faixa { margin: 12px 24px 4px; }
  .recarga-op:hover { background: var(--sup-3); }
}

/* ---------- como a loja recebe: Pix direto × automático (25/10) ---------- */
.pago-tag { flex: none; display: inline-flex; align-items: center; padding: 3px 8px; background: var(--creme); color: var(--sobre-laranja); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.cobrar-pago { align-items: center; }
.cartao-salvo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--sup); }
.cartao-salvo b { display: block; font-size: 15px; font-weight: 700; }
.cartao-salvo small { display: block; font-size: 12px; color: var(--suave); }
.espera-pag { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 0 2px; font-size: 15px; font-weight: 600; color: #E2E3E6; }
.espera-pag .carregando-fio { width: 100%; margin: 0; }
.modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px 16px 0; }
.modo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 172px; padding: 14px; background: var(--sup); text-align: left; transition: background-color 160ms linear, transform 120ms var(--curva); }
.modo:active { transform: scale(.98); }
.modo-cab { display: flex; justify-content: space-between; width: 100%; margin-bottom: 4px; }
.modo-cab .ic { width: 26px; height: 26px; color: #fff; }
.modo-cab .modo-check { color: var(--laranja); stroke-width: 2.4; }
.modo strong { font-size: 17px; font-weight: 800; line-height: 1.25; transition: color 120ms linear; }
.modo > span:not(.modo-cab) { font-size: 14px; line-height: 1.4; color: #D9DADF; }
.modo small { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--creme); }
.modo[aria-checked="true"] { background: var(--sup-2); }
.modo[aria-checked="true"] strong { color: var(--laranja); }
.conectado { display: flex; align-items: center; gap: 12px; margin: 16px 16px 0; padding: 14px; background: var(--sup); }
.conectado .conectado-ic { width: 28px; height: 28px; color: var(--creme); stroke-width: 2.4; }
.conectado > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conectado strong { font-size: 16px; font-weight: 800; }
.conectado b { font-size: 14px; font-weight: 800; color: var(--creme); }
.conectado small { font-size: 12px; color: var(--suave); }
.conectar { display: grid; gap: 10px; padding: 0 16px; }
.btn-alto { min-height: 56px; }
.modo-t { font-weight: 700; color: #fff; }
.cobr-linha .cv small:not(.aviso-t) { color: var(--suave); font-weight: 600; }
/* tela do banco (imitação, clara de propósito: é "outro lugar") */
.folha-cheia.banco { background: #F5F5F7; color: #111; }
.banco-barra { flex: none; display: flex; align-items: center; min-height: calc(52px + var(--safe-t)); padding: var(--safe-t) 52px 0 4px; background: #fff; box-shadow: 0 1px 0 #E3E3E6; }
.banco-barra .icone-btn { color: #111; }
.banco-barra span { flex: 1; text-align: center; font-size: 14px; color: #555; }
.banco-corpo { max-width: 26rem; margin: 0 auto; padding: 32px 20px calc(24px + var(--safe-b)); }
.banco-marca { margin-bottom: 20px; font-size: 22px; font-weight: 800; color: #111; }
.banco-corpo h2 { margin-bottom: 12px; font-size: 22px; line-height: 1.25; font-weight: 800; color: #111; }
.banco-conta { font-size: 15px; color: #333; }
.banco-conta b { color: #111; }
.banco-lista { display: grid; gap: 8px; margin: 16px 0; }
.banco-lista li { position: relative; padding-left: 18px; font-size: 15px; color: #222; }
.banco-lista li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: #111; }
.banco-nota { margin-bottom: 24px; font-size: 14px; color: #555; }
.banco-btn { min-height: 50px; border-radius: 999px; background: #111; color: #fff; }
.banco-btn-2 { min-height: 50px; margin-top: 8px; border-radius: 999px; color: #111; }
.banco-exemplo { margin-top: 16px; text-align: center; font-size: 12px; color: #6B6B70; }
@media (min-width: 1000px) {
  .modos { padding: 24px 16px 0; gap: 16px; }
  .modo:hover { background: var(--sup-2); }
}

/* aviso curto (só pra efeito que não se vê, ex.: copiado) */
.aviso { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); z-index: var(--z-aviso); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 12px 18px; background: var(--creme); color: var(--sobre-laranja); font-size: 14px; font-weight: 700; white-space: nowrap; transition: opacity 160ms linear, transform 220ms var(--curva); }
.aviso.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- PC (menu lateral) ---------- */
@media (min-width: 1000px) {
  .app { flex-direction: row; }
  .abas { display: none; }
  .lateral { display: flex; flex-direction: column; flex: none; width: var(--lateral-w); padding: 24px 12px 20px; background: #0B0B0C; }
  .lateral-logo { height: 34px; width: auto; align-self: flex-start; margin: 0 8px 28px; }
  .lateral a { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 12px; font-size: 15px; font-weight: 600; color: #C9CBD1; position: relative; }
  .lateral a:hover { color: #fff; }
  .lateral a[aria-current="page"] { color: var(--laranja); font-weight: 800; }
  .lateral a[aria-current="page"] .ic { stroke-width: 2.3; }
  .lateral .aba-conta { position: static; margin-left: auto; }
  .lateral-pe { margin-top: auto; padding: 12px; font-size: 13px; color: var(--suave); line-height: 1.5; }
  .lateral-pe strong { display: block; color: #fff; font-size: 14px; }
  .palco { flex: 1; }
  .rola > .larg, .larg { max-width: 1120px; margin-left: auto; margin-right: auto; width: 100%; }
  .topo { grid-template-columns: 64px 1fr 64px; }
  .topo-largo { padding-left: 32px; padding-right: 20px; grid-template-columns: 1fr auto; }
  .topo-largo h1 { font-size: 26px; }
  .sec { padding-left: 32px; padding-right: 32px; }

  .destaque { height: clamp(320px, 52vh, 460px); }
  .destaque-info { padding: 0 max(32px, calc((100% - 1120px) / 2 + 32px)) 40px; }
  .destaque-info > * { max-width: 620px; }
  .destaque-info h2 { font-size: 40px; }
  .pontos { left: 32px; bottom: 18px; }
  .cats { padding: 24px 24px 4px; gap: 12px; }
  .cat { width: 88px; }
  .cat-foto { width: 72px; height: 72px; }
  .lojas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; padding: 0 16px; }
  .loja-linha + .loja-linha::before { display: none; }
  .loja-linha { border-bottom: 1px solid var(--linha); }

  .capa { max-height: 360px; height: 360px; }
  .loja-cab, .secao-cardapio h3 { padding-left: 32px; padding-right: 32px; }
  .loja-cab { max-width: 1120px; margin-left: auto; margin-right: auto; }
  .secoes-tabs { padding: 0 32px; }
  .itens-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; padding: 0 16px; }
  .itens-grade .item + .item::before { display: none; }
  .itens-grade .item { border-bottom: 1px solid var(--linha); }
  .barra-sacola { padding: 12px 32px; }
  .barra-sacola .btn { display: flex; max-width: 480px; margin-left: auto; }

  .folha { left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, calc(100% - 64px)); max-height: min(88%, 820px); transform: translate(-50%, -50%); animation: folha-pc 240ms var(--curva) both; }
  .folha.sai { animation: folha-pc-sai 160ms linear both; }
  .folha.pronta:not(.sai) { animation: none; }
  @keyframes folha-pc { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
  @keyframes folha-pc-sai { from { opacity: 1; } to { opacity: 0; } }

  .estreito { max-width: 640px; margin-left: auto; margin-right: auto; width: 100%; }

  /* quadro de pedidos da loja: 4 colunas */
  .colunas-tabs { display: none; }
  .quadro { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 8px 20px 32px; align-items: start; }
  .coluna { display: flex; padding: 0; }
  .coluna-tit { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; font-size: 15px; font-weight: 800; }
  .coluna-tit b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; background: var(--sup-2); font-size: 12px; }
  .coluna-tit.tem-novo b { background: var(--laranja); color: var(--sobre-laranja); }
  .lista-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 32px; gap: 16px; }
  .so-pc { display: table; }
  .so-cel { display: none; }
  .pendente { margin: 16px 32px 0; }
  .alarme { left: 50%; top: 50%; right: auto; bottom: auto; width: min(560px, calc(100% - 64px)); height: min(760px, calc(100% - 48px)); transform: translate(-50%, -50%); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .7); }
  .alarme-topo { padding-top: 24px; }
  .aviso { bottom: 40px; }
}

/* deitado no celular: hero mais baixo, nada some */
@media (orientation: landscape) and (max-height: 500px) {
  .destaque { height: 78vh; }
  .destaque-info h2 { font-size: 24px; }
  .destaque-info p { margin-bottom: 10px; }
  .capa { max-height: 60vh; }
  .alarme-topo { padding-top: calc(var(--safe-t) + 12px); padding-bottom: 14px; }
  .alarme-topo h2 { margin-top: 8px; font-size: 26px; }
  .alarme-sino { width: 44px; height: 44px; }
  .entrada-arte { width: min(46vh, 16rem); height: min(46vh, 16rem); }
  .qr { width: 180px; height: 180px; }
}

/* telas muito estreitas (320) */
@media (max-width: 359px) {
  .loja-foto { width: 72px; height: 72px; }
  .loja-linha + .loja-linha::before { left: 102px; }
  .item-foto { width: 80px; height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .tela.entra, .tela.volta, .folha, .folha-cheia, .veu { animation: veu-entra 150ms linear both !important; }
  .etapa.atual .etapa-marca::after, .alarme-topo::before, .alarme-sino .ic { animation: none !important; }
}

/* =====================================================================================
   Telas de verdade (25/10): estados de carregando/erro, mapa com pino, endereço, alarme com "Vi",
   quadro com "Pix a conferir", editor do cardápio, conexão caída. Mesmo mundo do protótipo.
   ===================================================================================== */
.centro { display: flex; justify-content: center; padding: 0 16px; }
.riscado { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); }
.erro-t { color: var(--perigo); }

/* carregando: esqueleto que respira (só opacidade) */
.esqueleto { padding: 8px 0; }
.esq-linha { display: flex; gap: 14px; align-items: center; padding: 12px 16px; }
.esq-foto { flex: none; width: 72px; height: 72px; background: var(--sup); }
.esq-linha span { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.esq-linha span i { display: block; height: 12px; background: var(--sup); }
.esq-linha span i:nth-child(1) { width: 62%; height: 15px; }
.esq-linha span i:nth-child(2) { width: 44%; }
.esq-linha span i:nth-child(3) { width: 30%; }
.esqueleto i { animation: respira 1200ms ease-in-out infinite alternate; }
@keyframes respira { from { opacity: .55; } to { opacity: 1; } }
.vazio-erro { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vazio-erro strong { margin: 0; color: #fff; }
.vazio-col { padding: 24px 8px; }
.espera-tela { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background: var(--grafite); }
.espera-tela .carregando-fio { width: 120px; margin: 0; }
.espera-tela .vazio { padding: 0; }

/* botão esperando o servidor: o texto some e entra um anel girando (transform) */
.btn.carregando, .link.carregando { position: relative; color: transparent !important; pointer-events: none; }
.btn.carregando .ic, .link.carregando .ic { opacity: 0; }
.btn.carregando::after, .link.carregando::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid currentColor; border-color: rgba(255, 255, 255, .25); border-top-color: #fff; animation: gira 700ms linear infinite; }
.btn-p.carregando::after, .btn-creme.carregando::after { border-color: rgba(16, 17, 18, .25); border-top-color: var(--sobre-laranja); }
@keyframes gira { to { transform: rotate(360deg); } }
.btn.armado { border-color: var(--perigo); color: var(--perigo); background: rgba(255, 107, 94, .1); }
.btn-p.armado, .btn-creme.armado { background: var(--perigo); color: var(--sobre-laranja); }

/* aviso de erro: vermelho, fica mais tempo, pode quebrar linha */
.aviso { max-width: calc(100vw - 32px); }
.aviso.erro { background: var(--perigo); color: var(--sobre-laranja); white-space: normal; text-align: center; line-height: 1.4; }
.lc-erro { min-height: 0; margin: -8px 0 12px; color: var(--perigo); font-size: 14px; font-weight: 600; line-height: 1.45; }
.lc-erro:empty { display: none; }
.lc-erro-centro { text-align: center; margin: -4px 0 8px; }
.pag-erro { margin: 4px 16px 0; }
.pix-erro { margin: 10px 16px 0; }
.cancelar-nota { padding: 12px 16px 0; text-align: center; }
.nota-aviso { margin: 0 16px 16px; color: var(--aviso); }

/* sem foto: iniciais em creme sobre a superfície (nada de foto inventada) */
.sem-foto { display: grid; place-items: center; background: var(--sup-2); }
.sem-foto b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--creme); }
.pedido-linha .sem-foto b, .mini.sem-foto b { font-size: 17px; }
.cat-foto b { font-size: 20px; font-weight: 800; color: var(--creme); }
.avatar-q { border-radius: 0; background: var(--sup-2); }
.avatar-q b { font-size: 15px; }

/* conexão caída e som travado (avisos que não tampam nada: ficam no fluxo da página) */
.conexao { display: flex; align-items: center; gap: 10px; margin: 8px 16px 0; padding: 12px 14px; background: rgba(255, 107, 94, .12); color: #FFD3CE; font-size: 14px; font-weight: 600; line-height: 1.45; }
.conexao .ic { flex: none; width: 20px; height: 20px; color: var(--perigo); }
.som-trava { display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); margin: 8px 16px 0; padding: 12px 14px; background: rgba(var(--laranja-rgb), .14); color: #FFE3D6; font-size: 14px; line-height: 1.45; text-align: left; }
.som-trava .ic { flex: none; width: 22px; height: 22px; color: var(--laranja); }
.som-trava b { color: #fff; }
html.som-livre .som-trava, html.som-livre .alarme-trava { display: none; }

/* cliente: pedir endereço, barra do pedido em andamento */
.pede-end { display: flex; align-items: center; gap: 12px; margin: 12px 16px 4px; padding: 14px; background: var(--sup); }
.pede-end > .ic { flex: none; color: var(--laranja); }
.pede-end span { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; color: #D9DADF; }
.pede-end strong { display: block; font-size: 16px; color: #fff; }
.pede-end .btn { flex: none; }
.barra-pedido { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; background: var(--sup-2); }
.barra-pedido .bp-loja { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-pedido .bp-ver { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 800; color: var(--laranja); }
.barra-pedido .selo { flex: none; }
.loja-cab.sem-capa { margin-top: 0; padding-top: 12px; }
.link-inline { min-height: 0; padding: 0; display: inline-flex; }
.link-apagado { color: var(--suave); font-weight: 600; font-size: 13px; min-height: 36px; align-self: flex-start; }
.linha-fixa { margin-top: 8px; }
.linha-fixa > .ic { color: var(--suave); }
.end-extra { padding: 6px 16px 0 54px; }
.sacola-item.acabou strong { color: var(--apagado); }

/* folha do endereço: GPS, busca, mapa com pino e os campos */
.folha-end { height: calc(100% - 24px - var(--safe-t)); }
.end-acoes { padding: 0 16px; }
.end-acoes .btn { min-height: 48px; }
.end-busca { display: flex; gap: 8px; align-items: center; padding: 10px 16px 0; }
.end-busca .busca-campo { flex: 1; margin: 0; }
.end-busca .btn { flex: none; }
.end-msg { min-height: 0; padding: 8px 16px 0; font-size: 14px; line-height: 1.45; color: var(--creme); }
.end-msg:empty { display: none; }
.mapa-caixa-end { padding: 12px 16px 0; }
.mapa-area { height: 220px; }
.mapa-alto { height: min(56vh, 420px); }
.end-dica { padding: 8px 16px 0; }
.campos-end { padding-top: 12px; }
.lc-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; }

/* mapa: quadradinhos andam (transform), pino fica parado no meio */
.mapa { position: relative; overflow: hidden; background-color: var(--sup); touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.mapa.arrastando { cursor: grabbing; }
.mapa-camada { position: absolute; top: 0; left: 0; will-change: transform; }
.mapa-camada img { position: absolute; top: 0; left: 0; width: 256px; height: 256px; max-width: none; opacity: 0; transition: opacity 200ms linear; filter: grayscale(.35) brightness(.86) contrast(1.05); pointer-events: none; }
.mapa-camada img.ok { opacity: 1; }
.mapa-pino { position: absolute; left: 50%; top: 50%; width: 36px; height: 47px; margin: -47px 0 0 -18px; pointer-events: none; transition: transform 160ms var(--curva); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
.mapa-pino path { fill: var(--laranja); stroke: #fff; stroke-width: 2.4; }
.mapa-pino circle { fill: #fff; }
.mapa.arrastando .mapa-pino { transform: translateY(-10px); }
.mapa-sombra { position: absolute; left: 50%; top: 50%; width: 12px; height: 5px; margin: -2px 0 0 -6px; border-radius: 50%; background: rgba(0, 0, 0, .5); pointer-events: none; transition: transform 160ms var(--curva), opacity 160ms linear; }
.mapa.arrastando .mapa-sombra { transform: scale(.7); opacity: .6; }
.mapa-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; background: rgba(16, 17, 18, .86); }
.mapa-zoom button { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; }
.mapa-zoom button + button { box-shadow: inset 0 1px 0 var(--sup-3); }
.mapa-zoom button:active { opacity: .6; }
.mapa-credito { position: absolute; right: 0; bottom: 0; padding: 2px 6px; background: rgba(16, 17, 18, .78); color: #B7B9BF; font-size: 10px; pointer-events: none; }

/* formulários: rótulo de grupo, chips de escolha, área de texto */
.lc-tit { margin: 4px 0 8px; font-size: 13px; font-weight: 700; color: var(--suave); }
.chips { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0 0 -8px; }
.chip { min-height: 40px; font-size: 15px; font-weight: 600; color: #fff; }
.chip[aria-pressed="true"] { color: var(--laranja); font-weight: 800; }
.texto-tabs-pad { padding: 0 16px; flex-wrap: wrap; gap: 4px 20px; }
.lc-area { padding-top: 20px; }
.lc-area textarea { height: auto; min-height: 48px; padding: 8px 0; resize: none; line-height: 1.45; }
.lc-area .lc-rot { top: 20px; height: 40px; }
.lc textarea:focus + .lc-rot, .lc textarea:not(:placeholder-shown) + .lc-rot { transform: translateY(-23px) scale(.75); }
.lc textarea:focus { border-bottom-color: var(--laranja); box-shadow: 0 1px 0 var(--laranja); }
.lc textarea::placeholder { color: transparent; }
.grande-m { font-size: 30px !important; letter-spacing: -.015em; }
.linha-modo > .ic { color: var(--suave); }
.linha-modo[aria-current="true"] strong { color: var(--laranja); font-weight: 800; }
.linha-modo[aria-current="true"] > .ic:first-child { color: var(--laranja); }
.ic.laranja { color: var(--laranja) !important; }
.conta-cab { padding-top: calc(28px + var(--topo-seguro)); }

/* QR do Pix vindo do servidor (imagem) */
.qr img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.qr-falta { display: grid; place-items: center; padding: 20px; background: var(--sup); color: var(--suave); text-align: center; font-size: 14px; }
.qr-carregando { background: var(--sup); animation: respira 1000ms ease-in-out infinite alternate; }

/* loja: quadro de pedidos */
.ped-tag { align-self: flex-start; padding: 3px 8px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.tag-laranja { background: var(--laranja); color: var(--sobre-laranja); }
.tag-creme { background: var(--creme); color: var(--sobre-laranja); }
.tag-aviso { background: rgba(255, 176, 32, .16); color: var(--aviso); }
.tag-apagado { background: var(--sup-3); color: var(--suave); }
.ped-destaque { background: var(--sup-2); }
.ped-apagado .ped-cab strong, .ped-apagado .ped-total { color: var(--suave); }
.ped-ref { margin-top: -6px; font-size: 13px; color: var(--suave); }
.ped-contato { display: flex; gap: 18px; margin-top: -4px; }
.ped-contato .link { font-size: 14px; min-height: 32px; }
.ped-dica { margin-top: -2px; }
.ped-acoes-pix .btn-perigo { flex: 0 1 auto; }
.ped-acoes-pix .btn-creme { flex: 1; }
.ped-acoes-rua .btn { flex: 1 1 auto; }
.ped-obs { margin-top: 4px; }
.ped-cliente.grande { font-size: 16px; }
.saldo-zero b { color: var(--perigo); }
.saldo-zero > .ic { color: var(--perigo); }

/* alarme de pedido novo: toca até alguém tocar "Vi" */
.alarme-corpo { list-style: none; margin: 0; }
.alarme-ped { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; }
.alarme-ped + .alarme-ped { border-top: 1px solid var(--linha); }
.alarme-ped .ped-cab strong { font-size: 20px; }
.alarme-tipo { font-size: 15px; font-weight: 800; }
.alarme-pag { font-size: 14px; color: #D9DADF; }
.alarme-trava { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; background: rgba(var(--laranja-rgb), .14); color: #FFE3D6; font-size: 14px; font-weight: 700; }
.alarme-trava .ic { color: var(--laranja); }
.btn-vi { min-height: 64px !important; font-size: 22px !important; letter-spacing: .02em; }
.alarme.sai { animation: veu-sai 180ms linear both; }
.folha .espera-pag { padding: 16px 16px 0; }

/* cardápio da loja: atalhos, item com interruptor separado do toque pra editar */
.cardapio-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 16px 0; }
.sec-cardapio .sec-tit .link { font-size: 14px; }
.cardapio-item { padding-right: 8px; }
.cardapio-item .ci-abre { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 56px; }
.inter-btn { flex: none; display: grid; place-items: center; width: 64px; height: 56px; }
.cardapio-item[aria-checked="false"] .item-foto img { filter: grayscale(1); opacity: .45; }

@media (min-width: 1000px) {
  .pede-end { margin: 20px 32px 4px; }
  .conexao, .som-trava { margin-left: 24px; margin-right: 24px; width: auto; }
  .som-trava { width: calc(100% - 48px); }
  .folha-end { height: auto; max-height: min(92%, 860px); }
  .mapa-area { height: 260px; }
  .cardapio-acoes { padding: 20px 16px 0; }
  .alarme-corpo { max-height: none; }
  .ped { padding: 12px; }
  .ped-cab { flex-wrap: wrap; gap: 0 10px; }
  .ped-cab span { white-space: normal; }
  .ped-acoes-pix { flex-direction: column; }
  .ped-acoes-pix .btn { width: 100%; }
  .ped-acoes-rua { flex-direction: column; }
  .ped-acoes-rua .btn { width: 100%; }
  .barra-pedido { max-width: 480px; margin-left: auto; }
  .rola > .larg.estreito, .larg.estreito { max-width: 680px; }
  .estreito .sec { padding-left: 16px; padding-right: 16px; }
  .entrega-mapa .mapa-leg { grid-template-columns: 1fr; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .mapa-area { height: 46vh; }
  .btn-vi { min-height: 52px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .esqueleto i, .qr-carregando { animation: none !important; }
}