/* Sua Merenda — loja
   Layout: topo fixo · abertura em duas colunas · faixa roxa "como funciona" ·
   vitrine com a sacola 3D fixa ao lado do cardápio · infos · rodapé · barra da sacola embaixo */
.loja { padding-bottom: 0; }
.gutter, .topo-in, .abertura-in, .como-in, .vitrine-in, .infos-in, .rodape-in, .barra-in {
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  max-width: 1240px; margin-inline: auto;
}

/* aviso no topo */
.faixa-aviso { background: var(--roxo); color: #fff; text-align: center; font-weight: 700; font-size: 14px; padding: 8px 16px; }
.faixa-aviso.fechada { background: var(--erro); }

/* topo */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 41; background: rgba(251, 243, 230, .96); }
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: rgba(251, 243, 230, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.topo.rolou { border-bottom-color: var(--linha); box-shadow: 0 6px 20px rgba(95, 52, 128, .06); }
.topo-in { display: flex; align-items: center; gap: 20px; padding-block: 10px; }
.marca img { height: 38px; width: auto; }
.nav { display: flex; gap: 22px; margin-left: auto; font-weight: 800; font-size: 15px; }
.nav a, .nav .link { color: var(--tinta); text-decoration: none; cursor: pointer; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav .link:hover { border-bottom-color: var(--laranja); }
.btn-sacola { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--branco); border-radius: 999px; padding: 9px 16px 9px 12px; box-shadow: inset 0 0 0 2px var(--linha); font-weight: 800; }
.btn-sacola svg { width: 22px; height: 22px; fill: none; stroke: var(--roxo); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bolha { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; border-radius: 999px; background: var(--rosa); color: #fff; font-size: 12px; font-weight: 900; display: grid; place-items: center; padding: 0 6px; font-variant-numeric: tabular-nums; }
.bolha.pula { animation: pula .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pula { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* abertura */
.abertura { position: relative; overflow: hidden; }
.abertura-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; padding-block: 48px 56px; }
.selo-cidade { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px; background: var(--branco); font-weight: 800; font-size: 13px; color: var(--roxo-esc); box-shadow: inset 0 0 0 2px var(--roxo-cla); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px var(--verde-cla); }
.abertura h1 { font-size: clamp(34px, 5.2vw, 60px); color: var(--tinta); max-width: 14ch; }
.abertura-lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--tinta-2); max-width: 46ch; margin: 18px 0 22px; }
.proxima { display: inline-flex; align-items: center; gap: 10px; background: var(--laranja-cla); color: #7A3305; border-radius: 14px; padding: 10px 16px; font-weight: 700; }
.proxima svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.abertura-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.abertura-arte { display: grid; place-items: center; }
.selo { position: relative; width: min(100%, 420px); aspect-ratio: 1; border-radius: 40px; background: var(--branco); overflow: hidden; display: grid; place-items: center; box-shadow: var(--sombra); }
.selo img { width: 70%; animation: flutua 5s ease-in-out infinite; }
@keyframes flutua { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
.q { position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; }
.q1 { background: var(--roxo); top: -17%; left: -17%; }
.q2 { background: var(--rosa); top: -17%; right: -17%; }
.q3 { background: var(--verde); bottom: -17%; left: -17%; }
.q4 { background: var(--laranja); bottom: -17%; right: -17%; }

/* como funciona */
.como { background: var(--roxo); color: #fff; }
.como-in { padding-block: 44px; }
.como h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 26px; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: p; }
.passos li { counter-increment: p; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 4px; align-items: start; }
.passo-ico { grid-row: span 2; width: 64px; height: 64px; border-radius: 20px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; position: relative; }
.passo-ico::after { content: counter(p); position: absolute; top: -8px; left: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--laranja); color: #fff; font-weight: 900; font-size: 14px; display: grid; place-items: center; }
.passo-ico svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.passos h3 { font-size: 18px; font-weight: 900; }
.passos p { margin: 0; color: #E9DDF2; font-size: 15px; }

/* vitrine */
.vitrine { scroll-margin-top: 64px; }
.vitrine-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: start; padding-block: 40px 56px; }
.palco-col { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); }
.palco {
  position: relative; height: min(calc(100vh - 110px), 660px); min-height: 440px; border-radius: 30px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 38%, #FFF1E2 0%, #FFE0C2 55%, #FBCB9C 100%);
}
.palco .q { width: 150px; z-index: -1; }
.palco .q1, .palco .q2 { top: -75px; } .palco .q3, .palco .q4 { bottom: -75px; }
.palco .q1, .palco .q3 { left: -75px; } .palco .q2, .palco .q4 { right: -75px; }
.palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.palco canvas:active { cursor: grabbing; }
.palco-topo { position: absolute; top: 16px; left: 90px; right: 90px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; pointer-events: none; }
.palco-eyebrow { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #6B3A10; }
.palco-conta { margin: 0; font-family: var(--f-titulo); font-weight: 700; color: #3B2410; line-height: 1.1; font-size: 16px; }
.palco-conta b { font-size: 40px; }
.palco-sub { margin: 0; font-size: 13px; font-weight: 800; color: #6B3A10; min-height: 18px; }
.vagas { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 2px; }
.vaga { width: 20px; height: 13px; border-radius: 5px 5px 7px 7px; border: 2px solid rgba(59, 36, 16, .3); transition: background .3s, border-color .3s, transform .3s; }
.vaga.cheia { background: var(--laranja); border-color: var(--laranja-esc); transform: translateY(-2px); }
.palco-vazio { position: absolute; left: 24px; right: 24px; bottom: 54px; margin: 0; text-align: center; font-weight: 700; color: #6B3A10; pointer-events: none; }
.palco-dica { position: absolute; bottom: 16px; left: 0; right: 0; margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: #6B3A10; pointer-events: none; }
.palco-escolha {
  position: absolute; left: 16px; right: 16px; bottom: 46px; margin-inline: auto; max-width: 360px; background: var(--branco);
  border-radius: 20px; padding: 14px 16px; box-shadow: var(--sombra-forte); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center;
  animation: aparece .35s cubic-bezier(.2, 1.4, .4, 1);
}
.palco-escolha .mini { grid-row: span 2; }
.palco-escolha h3 { font-size: 15px; }
.palco-escolha p { margin: 0; font-size: 13px; color: var(--tinta-2); }
.palco-escolha .acoes { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 10px; }
@keyframes aparece { from { transform: translateY(12px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.palco-2d { position: absolute; inset: 120px 20px 40px; display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: 8px; }
.palco-recolher { display: none; }

/* cardápio */
.menu { min-width: 0; }
.menu-cab h2 { font-size: clamp(28px, 3.4vw, 38px); }
.menu-lead { margin: 6px 0 18px; color: var(--tinta-2); }
.combos { background: var(--branco); border-radius: var(--raio); padding: 16px; margin-bottom: 18px; box-shadow: inset 0 0 0 2px var(--roxo-cla); display: grid; gap: 12px; }
.combos-cab { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.combos-cab h3 { font-size: 16px; font-weight: 900; color: var(--roxo-esc); }
.combos-cab span { font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.combo-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.combo { border-radius: 14px; padding: 10px 12px; background: var(--creme); display: grid; gap: 2px; position: relative; }
.combo b { font-size: 15px; }
.combo span { font-size: 13px; color: var(--tinta-2); }
.combo.feito { background: var(--verde-cla); }
.combo.feito::after { content: "✓"; position: absolute; top: 8px; right: 12px; font-weight: 900; color: var(--verde-esc); }
.combo-barra { height: 8px; background: var(--creme-2); border-radius: 999px; overflow: hidden; }
.combo-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--laranja), var(--rosa)); border-radius: 999px; transition: width .5s cubic-bezier(.2, 1, .3, 1); }

.abas { position: sticky; top: calc(62px + env(safe-area-inset-top, 0px)); z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; margin-bottom: 6px; background: var(--creme); scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.aba { flex: none; border: 0; background: var(--branco); border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 14px; box-shadow: inset 0 0 0 2px var(--linha); }
.aba[aria-current="true"] { background: var(--laranja); color: #fff; box-shadow: none; }

.categorias { display: grid; gap: 30px; }
.categoria { scroll-margin-top: 130px; }
.categoria h3 { font-family: var(--f-titulo); font-size: 22px; font-weight: 700; }
.categoria > p { margin: 4px 0 12px; color: var(--tinta-2); font-size: 14px; }
.pratos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.prato {
  background: var(--branco); border-radius: var(--raio); padding: 12px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px;
  box-shadow: inset 0 0 0 1px var(--linha); transition: box-shadow .2s, transform .2s;
}
.prato:hover { box-shadow: inset 0 0 0 1px var(--linha), var(--sombra); transform: translateY(-1px); }
.prato.na-sacola { box-shadow: inset 0 0 0 2px var(--laranja); }
.prato-foto { position: relative; width: 112px; height: 112px; border-radius: 14px; overflow: hidden; background: var(--creme); }
.prato-foto img { width: 100%; height: 100%; object-fit: cover; }
.prato-foto .qtd { position: absolute; top: 6px; left: 6px; background: var(--laranja); color: #fff; font-weight: 900; font-size: 13px; border-radius: 999px; padding: 2px 9px; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.prato-txt { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.prato h4 { margin: 0; font-size: 16px; font-weight: 900; line-height: 1.25; }
.prato p { margin: 0; font-size: 14px; color: var(--tinta-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prato-pe { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.tamanhos { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--creme); border-radius: 14px; padding: 3px; }
.tamanhos button { border: 0; background: transparent; padding: 5px 10px; border-radius: 11px; font-size: 13px; font-weight: 800; color: var(--tinta-2); }
.tamanhos button[aria-pressed="true"] { background: var(--roxo); color: #fff; }
.preco-add { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.preco { font-weight: 900; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.add { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--laranja); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 0 var(--laranja-esc); transition: transform .12s; flex: none; }
.add:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--laranja-esc); }
.add svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.carregando { padding: 40px 0; text-align: center; color: var(--tinta-2); font-weight: 700; }

/* ilustrações dos pratos sem foto */
.ilus { position: absolute; inset: 0; display: grid; place-items: center; }
.ilus-marmita { width: 86%; height: 66%; border-radius: 14px 14px 18px 18px; background: #F2EBDD; box-shadow: inset 0 0 0 4px #E6DCCB, 0 4px 0 #DCCDB6; position: relative; overflow: hidden; }
.ilus-marmita i { position: absolute; top: 8%; bottom: 8%; width: 40%; border-radius: 8px; }
.ilus-marmita i:nth-child(1) { left: 6%; } .ilus-marmita i:nth-child(2) { right: 6%; }
.ilus-marmita b { position: absolute; left: 50%; top: 0; bottom: 0; width: 26%; transform: translateX(-50%); background: var(--roxo); display: grid; place-items: center; }
.ilus-marmita b::before { content: ""; width: 14px; height: 12px; background: var(--rosa); clip-path: path("M7 12 C1 8 0 4 2.2 2 C4 0.5 6 1.5 7 3 C8 1.5 10 0.5 11.8 2 C14 4 13 8 7 12 Z"); }
.ilus-travessa { width: 86%; height: 66%; border-radius: 10px; background: linear-gradient(145deg, #EEF1F4, #B9C1CA); padding: 7%; }
.ilus-travessa i { display: block; width: 100%; height: 100%; border-radius: 6px; }
.ilus-caixa { width: 66%; height: 66%; border-radius: 8px; background: #C08A52; position: relative; box-shadow: 0 4px 0 #9C6C3A; }
.ilus-caixa::before, .ilus-caixa::after { content: ""; position: absolute; background: var(--rosa); }
.ilus-caixa::before { left: 0; right: 0; top: 44%; height: 12%; }
.ilus-caixa::after { top: 0; bottom: 0; left: 44%; width: 12%; }
.ilus-caixa i { position: absolute; right: 10%; bottom: 10%; width: 30%; aspect-ratio: 1; border-radius: 50%; z-index: 1; box-shadow: 0 0 0 3px var(--creme); }
.ilus-pote { width: 64%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 7px rgba(255, 255, 255, .45), 0 4px 0 rgba(0, 0, 0, .12); }
.mini { width: 54px; height: 54px; border-radius: 12px; position: relative; overflow: hidden; background: var(--creme); flex: none; }
.mini img { width: 100%; height: 100%; object-fit: cover; }

/* infos */
.infos { background: var(--branco); scroll-margin-top: 64px; }
.infos-in { padding-block: 48px; }
.infos h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 22px; }
.info-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.info { background: var(--creme); border-radius: var(--raio); padding: 18px; position: relative; overflow: hidden; }
.info::after { content: ""; position: absolute; width: 64px; height: 64px; border-radius: 50%; right: -32px; top: -32px; background: var(--laranja); }
.info:nth-child(2)::after { background: var(--rosa); } .info:nth-child(3)::after { background: var(--verde); } .info:nth-child(4)::after { background: var(--roxo); }
.info h3 { font-size: 16px; font-weight: 900; margin-bottom: 8px; padding-right: 28px; }
.info p { margin: 0 0 8px; font-size: 14px; color: var(--tinta-2); }
.info-nota { font-size: 13px; }
.lista-limpa { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.lista-limpa b { font-weight: 800; }
.lista-taxas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.lista-taxas li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--linha); padding-bottom: 6px; }
.lista-taxas span:last-child { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* rodapé (no estilo do rodapé antigo, com as cores da marca) */
.rodape { background: var(--laranja); color: #fff; }
.rodape-in { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1.2fr; gap: 32px; padding-block: 48px 36px; }
.rodape h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: rgba(255, 255, 255, .78); margin: 0 0 14px; font-family: var(--f-texto); }
.rodape h3.sep { margin-top: 26px; }
.rodape-marca { display: flex; flex-direction: column; align-items: flex-start; }
.rodape-logo { width: 98px; height: 98px; border-radius: 14px; background: #fff; display: grid; place-items: center; padding: 12px; margin-bottom: 24px; box-shadow: 0 8px 20px rgba(120, 45, 0, .18); }
.rodape-logo img { width: 100%; height: auto; }
.rede { width: 50px; height: 50px; border-radius: 50%; background: #fff; display: grid; place-items: center; transition: transform .2s; }
.rede:hover { transform: scale(1.07); }
.rede svg { width: 24px; height: 24px; fill: none; stroke: var(--tinta); stroke-width: 2; }
.rede svg .cheio { fill: var(--tinta); stroke: none; }
.rodape-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.rodape-col a, .rodape-col .link, .rodape-col p { color: #fff; text-decoration: none; font-size: 16px; margin: 0; cursor: pointer; font-weight: 400; overflow-wrap: anywhere; }
.rodape-col a:hover, .rodape-col .link:hover { text-decoration: underline; text-underline-offset: 3px; }
.com-ico { display: inline-flex; align-items: center; gap: 10px; }
.com-ico svg { width: 18px; height: 18px; fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 2; stroke-linejoin: round; flex: none; }
.pilula-verde { display: inline-flex; align-items: center; gap: 8px; background: var(--verde-esc); color: #fff; font-weight: 800; font-size: 14px; border-radius: 999px; padding: 6px 14px; }
.pilula-verde i { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.linha-pontos { display: flex; align-items: center; gap: 10px; width: 100%; }
.linha-pontos i { flex: 1; border-top: 1px dotted rgba(255, 255, 255, .5); }
.turno-linha { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 15px; }
.turno-linha i { flex: 1; border-top: 1px dotted rgba(255, 255, 255, .45); }
#rodapeTurnos { display: grid; gap: 6px; width: 100%; }
.pagtos { display: flex; flex-wrap: wrap; gap: 8px; }
.pagto { background: #fff; color: var(--tinta); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 900; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 6px; }
.pagto svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.pagto.pix { color: #2B9C8F; }
.rodape-base { border-top: 1px solid rgba(255, 255, 255, .28); }
.rodape-base-in { max-width: 1240px; margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(92px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); font-size: 15px; color: rgba(255, 255, 255, .92); }
body.tem-barra .rodape-base-in { padding-bottom: calc(166px + env(safe-area-inset-bottom, 0px)); }
.orgulho { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bt-card { background: #0B2A63; border-radius: 999px; padding: 5px 16px 5px 5px; display: inline-grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; box-shadow: 0 6px 16px rgba(120, 45, 0, .22); color: #fff; line-height: 1; }
.bt-card img { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; }
.bt-card b { font-size: 16px; font-weight: 900; letter-spacing: .02em; color: #fff; }
.bt-card small { font-size: 10px; font-weight: 800; letter-spacing: .28em; color: #F7D300; text-transform: uppercase; margin-top: 3px; }

/* assinatura BeeTech: a abelhinha */
.abelha { position: fixed; z-index: 31; left: max(18px, env(safe-area-inset-left, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transition: bottom .3s; }
body.tem-barra .abelha { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
.abelha-btn { width: 58px; height: 58px; border-radius: 50%; border: 0; padding: 0; background: #0B2A63; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(7, 40, 110, .35), 0 0 0 3px rgba(255, 255, 255, .9); animation: abelhaChega 2.4s cubic-bezier(.3, .7, .3, 1) both; }
.abelha-btn img { width: 100%; height: 100%; border-radius: 50%; animation: zumbido 7s ease-in-out 2.6s infinite; transform-origin: 50% 60%; }
.abelha-btn:hover img { animation: zumbidoRapido .5s ease-in-out infinite; }
@keyframes abelhaChega {
  0% { transform: translate(78vw, -72vh) rotate(-25deg) scale(.6); opacity: 0; }
  15% { opacity: 1; }
  35% { transform: translate(52vw, -40vh) rotate(18deg) scale(.85); }
  55% { transform: translate(30vw, -58vh) rotate(-14deg) scale(.95); }
  75% { transform: translate(10vw, -18vh) rotate(12deg) scale(1.05); }
  90% { transform: translate(0, -10px) rotate(-6deg) scale(1.08); }
  100% { transform: none; opacity: 1; }
}
@keyframes zumbido {
  0%, 82%, 100% { transform: none; }
  84% { transform: translateY(-3px) rotate(-9deg); } 86% { transform: translateY(-5px) rotate(9deg); }
  88% { transform: translateY(-3px) rotate(-8deg); } 90% { transform: translateY(-4px) rotate(7deg); }
  92% { transform: translateY(-1px) rotate(-3deg); }
}
@keyframes zumbidoRapido { 0%, 100% { transform: rotate(-6deg) translateY(-1px); } 50% { transform: rotate(6deg) translateY(-3px); } }
.abelha-balao { position: absolute; left: 0; bottom: 68px; width: max-content; max-width: calc(100vw - 32px); background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: var(--sombra-forte);
  display: grid; gap: 8px; justify-items: start; animation: aparece .3s cubic-bezier(.2, 1.4, .4, 1); }
.abelha-balao::after { content: ""; position: absolute; left: 22px; bottom: -7px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.abelha-balao { grid-template-columns: auto auto; align-items: center; gap: 12px; }
.abelha-balao img { width: 72px; height: 72px; border-radius: 50%; }
.abelha-balao span { font-size: 13px; font-weight: 700; color: var(--tinta-2); line-height: 1.35; }
.abelha-balao span b { font-size: 16px; font-weight: 900; color: #0B2A63; }

/* barra da sacola */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--branco); border-top: 1px solid var(--linha); box-shadow: 0 -10px 30px rgba(60, 25, 10, .08); padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); animation: barraSobe .35s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes barraSobe { from { transform: translateY(100%); } to { transform: none; } }
.barra-in { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.barra-info { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; min-width: 0; }
.barra-qtd { font-size: 13px; font-weight: 800; color: var(--tinta-2); }
.barra-info strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.barra-dica { font-size: 13px; font-weight: 700; color: var(--laranja-esc); }
.whats-flutuante { position: fixed; z-index: 31; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); transition: bottom .3s, transform .2s; }
.whats-flutuante:hover { transform: scale(1.06); }
.whats-flutuante svg { width: 32px; height: 32px; fill: #fff; }
body.tem-barra .whats-flutuante { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

/* gavetas */
.gaveta { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.gaveta-fundo { position: absolute; inset: 0; background: rgba(43, 31, 53, .45); animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.gaveta-painel { position: relative; width: min(480px, 100%); height: 100%; background: var(--creme); display: flex; flex-direction: column; box-shadow: var(--sombra-forte); animation: entraLado .35s cubic-bezier(.2, 1, .3, 1); padding-top: env(safe-area-inset-top, 0px); }
@keyframes entraLado { from { transform: translateX(100%); } }
.gaveta-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 8px; }
.gaveta-cab h2 { font-size: 24px; }
.fechar { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--branco); display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--linha); flex: none; }
.fechar svg { width: 20px; height: 20px; fill: none; stroke: var(--tinta); stroke-width: 2.4; stroke-linecap: round; }
.etapas { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0 20px 12px; }
.etapas li { flex: 1; font-size: 12px; font-weight: 800; color: var(--tinta-2); text-align: center; padding-top: 8px; border-top: 4px solid var(--linha); }
.etapas li.feita, .etapas li.atual { border-top-color: var(--laranja); color: var(--tinta); }
.gaveta-corpo { flex: 1; overflow-y: auto; padding: 4px 20px 20px; overscroll-behavior: contain; }
.gaveta-pe { border-top: 1px solid var(--linha); background: var(--branco); padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; }
.gaveta-totais { display: grid; gap: 2px; font-size: 14px; }
.gaveta-totais div { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.gaveta-totais .total { font-size: 18px; font-weight: 900; }
.gaveta-totais .desc { color: var(--verde-esc); font-weight: 800; }
.gaveta-acoes { display: flex; gap: 10px; }
.gaveta-acoes .btn { flex: 1; }

.itens-sacola { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.item-sacola { background: var(--branco); border-radius: 16px; padding: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.item-sacola h3 { font-size: 15px; font-weight: 800; line-height: 1.25; }
.item-sacola p { margin: 2px 0 0; font-size: 13px; color: var(--tinta-2); }
.qtd-ctrl { display: flex; align-items: center; gap: 6px; background: var(--creme); border-radius: 999px; padding: 3px; }
.qtd-ctrl button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--branco); font-weight: 900; font-size: 18px; line-height: 1; display: grid; place-items: center; }
.qtd-ctrl span { min-width: 20px; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; }
.aviso-combo { margin-top: 12px; border-radius: 14px; padding: 12px 14px; background: var(--laranja-cla); color: #7A3305; font-weight: 700; font-size: 14px; }
.aviso-combo.ok { background: var(--verde-cla); color: var(--verde-esc); }
.vazio { text-align: center; padding: 30px 10px; color: var(--tinta-2); }
.vazio b { display: block; font-family: var(--f-titulo); font-size: 20px; color: var(--tinta); margin-bottom: 6px; }

.pagamentos { display: grid; gap: 10px; }
.pagamento { border: 2px solid var(--linha); background: var(--branco); border-radius: 16px; padding: 14px; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; }
.pagamento[aria-pressed="true"] { border-color: var(--roxo); background: var(--roxo-cla); }
.pagamento .pg-ico { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--creme); }
.pagamento .pg-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--roxo-esc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pagamento b { font-size: 15px; }
.pagamento span { font-size: 13px; color: var(--tinta-2); }
.resumo { background: var(--branco); border-radius: 16px; padding: 14px; font-size: 14px; display: grid; gap: 4px; }
.resumo h3 { font-size: 14px; font-weight: 900; margin-bottom: 4px; }
.resumo p { margin: 0; color: var(--tinta-2); }

/* pedido feito */
.pronto { display: grid; gap: 16px; text-align: center; padding-top: 6px; }
.pronto-marmita { width: 120px; margin: 0 auto; animation: pulaMarmita 1s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pulaMarmita { 0% { transform: translateY(30px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pronto h3 { font-family: var(--f-titulo); font-size: 24px; }
.pronto .codigo { display: inline-block; background: var(--roxo); color: #fff; font-weight: 900; letter-spacing: .08em; padding: 6px 14px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.pix-caixa { background: var(--branco); border-radius: 20px; padding: 16px; display: grid; gap: 12px; justify-items: center; }
.pix-qr { width: min(240px, 100%); border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--linha); position: relative; }
.pix-qr svg { display: block; width: 100%; height: auto; }
.pix-demo { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .7); color: var(--erro); font-weight: 900; font-size: 14px; text-align: center; padding: 12px; }
.pix-valor { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.copia { width: 100%; display: grid; gap: 8px; }
.copia textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; height: 76px; resize: none; word-break: break-all; }
.passos-pix { text-align: left; margin: 0; padding-left: 20px; font-size: 14px; color: var(--tinta-2); display: grid; gap: 2px; }

/* meus pedidos */
.ped { background: var(--branco); border-radius: 16px; padding: 14px; display: grid; gap: 8px; margin-bottom: 10px; }
.ped-cab { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.ped-cab b { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ped p { margin: 0; font-size: 14px; color: var(--tinta-2); }
.status { font-size: 12px; font-weight: 900; border-radius: 999px; padding: 4px 10px; background: var(--creme); }
.st-novo { background: var(--laranja-cla); color: #7A3305; } .st-confirmado, .st-producao { background: var(--roxo-cla); color: var(--roxo-esc); }
.st-saiu { background: #FFF2C2; color: #6E5200; } .st-entregue { background: var(--verde-cla); color: var(--verde-esc); } .st-cancelado { background: var(--erro-cla); color: var(--erro); }

/* telas menores */
@media (max-width: 1080px) { .info-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rodape-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .nav { display: none; }
  .btn-sacola { margin-left: auto; }
  .abertura-in { grid-template-columns: 1fr; padding-block: 28px 36px; gap: 26px; }
  .abertura-arte { order: -1; }
  .selo { width: min(70vw, 280px); border-radius: 30px; }
  .passos { grid-template-columns: 1fr; gap: 20px; }
  .vitrine-in { grid-template-columns: 1fr; gap: 18px; padding-block: 0 40px; }
  .palco-col { position: sticky; top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 6; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); }
  .palco { height: 230px; min-height: 0; border-radius: 0 0 26px 26px; transition: height .3s; }
  .palco .q { width: 96px; } .palco .q1, .palco .q2 { top: -48px; } .palco .q3, .palco .q4 { bottom: -48px; } .palco .q1, .palco .q3 { left: -48px; } .palco .q2, .palco .q4 { right: -48px; }
  .palco-topo { top: 10px; left: 56px; right: 56px; gap: 2px; }
  .palco-conta b { font-size: 28px; }
  .palco-vazio { bottom: 34px; font-size: 14px; }
  .palco-dica { display: none; }
  .palco-escolha { bottom: 10px; padding: 10px 12px; }
  .palco-2d { inset: 92px 16px 16px; }
  .palco-recolher { display: block; position: absolute; right: 10px; bottom: 8px; border: 0; background: rgba(255, 255, 255, .8); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 800; color: #6B3A10; }
  .palco.recolhido { height: 74px; }
  .palco.recolhido canvas, .palco.recolhido .vagas, .palco.recolhido .palco-vazio, .palco.recolhido .palco-escolha, .palco.recolhido .palco-2d { display: none !important; }
  .palco.recolhido .palco-eyebrow { display: none; }
  .abas { top: calc(58px + 230px + env(safe-area-inset-top, 0px)); }
  body.palco-recolhido .abas { top: calc(58px + 74px + env(safe-area-inset-top, 0px)); }
  .categoria { scroll-margin-top: 340px; }
  .rodape-in { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .rodape-base-in { justify-content: center; text-align: center; }
  .marca img { height: 32px; }
}
@media (max-width: 560px) {
  .btn-sacola-txt { display: none; }
  .btn-sacola { padding: 9px 12px; }
  .info-grade { grid-template-columns: 1fr; }
  .prato { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .prato-foto { width: 92px; height: 92px; }
  .campo-duplo { grid-template-columns: 1fr; }
  .barra-dica { display: none; }
  .gaveta-painel { width: 100%; }
  .abertura-acoes .btn { flex: 1 1 auto; }
  .rodape-in { grid-template-columns: 1fr; }
  .rodape-marca { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 16px; }
  .rodape-marca h3 { display: none; }
  .rodape-logo { margin-bottom: 0; width: 84px; height: 84px; }
  .abelha-btn { width: 52px; height: 52px; }
  .abelha-balao { bottom: 64px; }
}