/* food: bloco cartao0807 */
.grade.mcgrade{grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:var(--e4);grid-auto-rows:minmax(236px,auto)}
@media(max-width:560px){.grade.mcgrade{grid-template-columns:1fr;gap:12px}}
@media(min-width:561px) and (max-width:760px){.grade.mcgrade{grid-template-columns:1fr 1fr}}
/* FOOD0812 - CAUSA MEDIDA DA SOBREPOSICAO: com aspect-ratio E min-height juntos, a ALTURA
   passa a mandar na LARGURA (236 x 8/5 = 377,6px) e o card estoura a coluna do grid (331,5px),
   invadindo o vizinho em 32px. width:100% trava o card na coluna; a altura vira piso, nao proporcao. */
.mcgrade .mc{width:100%;max-width:100%;min-height:236px;display:flex;flex-direction:column;background-image:none;border:1px solid rgba(168,99,5,.28);isolation:isolate;border-radius:var(--raio-g)}
.mcgrade .mc::before{content:"";position:absolute;inset:0;z-index:-1;background-image:url('/assets/img/fundo-card.jpg');background-size:cover;background-position:88% center;transform:scale(1.001);transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.mcgrade .mc.has-photo::before{background-image:var(--PHOTO)}
.mcgrade .mc:hover::before,.mcgrade .mc:focus-visible::before{transform:scale(1.08)}
.mcgrade .mc:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(27,27,31,.30),0 0 0 1px rgba(233,169,48,.35)}
.mcgrade .mc .bot{min-height:100%;flex:1;padding:13px}
.mcgrade .mc .t{font-size:19px;margin-top:.55em}
.mcgrade .mc .su{font-size:12.5px;opacity:.96}
.mcgrade .mc .tags .tag.tdemo{background:rgba(255,255,255,.10);border-style:dashed}
@supports not (aspect-ratio:1){.mcgrade .mc{min-height:236px}}
html.dark .mcgrade .mc,body.dark .mcgrade .mc{border-color:rgba(233,169,48,.26)}
/* revelacao em cascata: entra com leve zoom; o JS tira a classe .rev ao terminar para devolver o hover ao .mc */
.js-anim .mcgrade .rev{opacity:0;transform:translateY(18px) scale(.955)}
.js-anim .mcgrade .rev.on{opacity:1;transform:none;transition:opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.16,.84,.32,1) var(--d,0ms)}
@media(prefers-reduced-motion:reduce){.js-anim .mcgrade .rev{opacity:1;transform:none;transition:none}.mcgrade .mc::before{transition:none}.mcgrade .mc:hover::before,.mcgrade .mc:focus-visible::before{transform:none}}
/* food: bloco liquid0807z */
/* ==== consolidado de liquid0807 ==== */

.g19-segue a{color:#8A5E04}
body.dark .g19-segue a{color:#E9A930}

/* ==== consolidado de liquid0807b ==== */

.loja{
  background:rgba(255,255,255,.55);
  
  border-color:rgba(168,99,5,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 22px -12px rgba(62,48,10,.22);
}
.loja:hover{border-color:rgba(168,99,5,.55)}
.fmodal-box{-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%)}
html.dark .loja,body.dark .loja{background:rgba(27,27,32,.55);border-color:rgba(233,169,48,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 28px rgba(0,0,0,.55)}
@media (prefers-reduced-transparency:reduce){
  .loja,.fmodal-box{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .loja{background:#FFFFFF!important}
  html.dark .loja,body.dark .loja{background:#17181C!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .loja{background:rgba(255,255,255,.94)}
  html.dark .loja,body.dark .loja{background:rgba(24,24,28,.94)}
}

/* ==== consolidado de liquid0807d ==== */

.navtop a,.s19-cta{
  background:var(--app019-gold-gradient,linear-gradient(135deg,#F3C651 0%,#E9A930 35%,#D49813 68%,#B88008 100%));
  color:#FFFFFF;text-shadow:0 1px 3px rgba(60,35,0,.4);
}
body{--ouro-txt:#A86305}
.g19-segue a{color:var(--app019-gold-text,#8A5E04)}

/* ==== consolidado de liquid0807e ==== */
/* LIQUID0807e v1.0 07/08/2026 — C1 votado: mesma cara do logo com o texto na zona ambar + sombra reforcada. */
.navtop a,.s19-cta,.cta{background:var(--app019-gold-gradient,linear-gradient(135deg,#F3C651 0%,#E9A930 35%,#D49813 68%,#B88008 100%));text-shadow:0 1px 4px rgba(50,30,0,.6),0 0 2px rgba(50,30,0,.4)}
body{--grad-btn:var(--app019-gold-gradient,linear-gradient(135deg,#F3C651 0%,#E9A930 35%,#D49813 68%,#B88008 100%))}

/* p-novos: D6 */
/* p-novos: D6 selo CNPJ */
.zcnpj{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.78rem;color:#5C5648;padding:14px var(--gut) 4px;text-align:center;max-width:var(--eixo);margin:0 auto}
.zcnpj svg{width:14px;height:14px;stroke:#1F7A43;stroke-width:2.2;fill:none;flex:0 0 14px}
body.dark .zcnpj{color:#8A8F98}

/* n-novos: N4 migalha */
.migalha019{font-size:.84rem;color:#8A8F98;padding:12px var(--gut) 0;max-width:var(--eixo);margin:0 auto}
.migalha019 a{color:var(--app019-gold-text,#8A5E04);text-decoration:none}
.migalha019 a:hover{text-decoration:underline}
.migalha019 b{color:#15151A;font-weight:600}
body.dark .migalha019 b,html.dark .migalha019 b{color:#EDEFF3}
body.dark .migalha019 a,html.dark .migalha019 a{color:#E9A930}

/* f-novos: F1 busca de comida */
.zbusca{margin:0 0 14px}
.zbusca input{width:100%;min-height:50px;border:1px solid rgba(168,99,5,.35);border-radius:13px;padding:0 16px;font:inherit;font-size:.95rem;background:rgba(255,255,255,.7);color:#1B1B1F;-webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%)}
.zbusca input:focus-visible{outline:2.5px solid #C0790F;outline-offset:2px}
.zbuscazero{font-size:.88rem;color:#5C5648;padding:10px 4px 0}
.vh3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html.dark .zbusca input,body.dark .zbusca input{background:rgba(27,27,31,.65);color:#EDEFF3;border-color:rgba(233,169,48,.3)}
html.dark .zbuscazero,body.dark .zbuscazero{color:#B9BEC7}
@media (prefers-reduced-transparency:reduce){.zbusca input{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#FFFFFF!important}html.dark .zbusca input,body.dark .zbusca input{background:#1B1B1F!important}}
/* f-novos: F3 link da ponte */
.zpontelink{color:var(--app019-gold-text,#8A5E04);font-weight:800;text-decoration:underline}
html.dark .zpontelink,body.dark .zpontelink{color:#E9A930}
/* f-novos: F4 moldura de luz na foto do topo */
/* FOOD0812: a moldura de luz saiu da FOTO e passou para o BLOCO da hero (bloco food0812).
   Ela desenhava borda+sombra retangulares por cima de uma imagem mascarada em degrade -
   era exatamente o que fazia a foto parecer uma caixa separada do texto. */

/* x-novos: X1 navegação de família */
.zfamilia{display:flex;flex-wrap:wrap;gap:var(--e1);justify-content:center;padding:var(--e6) var(--gut) var(--e2);max-width:var(--eixo);margin:0 auto}
.zfamilia a{font-size:.8rem;font-weight:700;color:var(--app019-gold-text,#8A5E04);border:1px solid rgba(168,99,5,.3);border-radius:999px;padding:8px 14px;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);text-decoration:none;transition:border-color .18s ease}
.zfamilia a:hover{border-color:rgba(168,99,5,.55)}
.zfamilia a:focus-visible{outline:3px solid rgba(138,94,4,.55);outline-offset:2px}
.zfamilia a.zfon{background:var(--app019-gold-gradient,linear-gradient(135deg,#F3C651 0%,#E9A930 35%,#D49813 68%,#B88008 100%));color:#FFFFFF;border-color:transparent;text-shadow:0 1px 2px rgba(60,35,0,.4)}
html.dark .zfamilia a,body.dark .zfamilia a{background:rgba(27,27,31,.6);color:#E9A930;border-color:rgba(233,169,48,.3)}
html.dark .zfamilia a.zfon,body.dark .zfamilia a.zfon{color:#FFFFFF}
@media (prefers-reduced-transparency:reduce){.zfamilia a{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#FFFFFF!important}html.dark .zfamilia a,body.dark .zfamilia a{background:#1B1B1F!important}}
/* food: bloco inapp019css */
html.in-app019 .soc-g,html.in-app019 .soc-a{display:none!important}html.in-app019 #r019,html.in-app019 #r19{display:none!important}html.in-app019 #a19gveu{display:none!important}
/* food: bloco fotoveu0807 */
.mc.has-photo .bot{background:linear-gradient(180deg,rgba(8,6,4,.58) 0%,rgba(8,6,4,.70) 45%,rgba(8,6,4,.82) 100%)}
.mc.has-photo .bot .t,.mc.has-photo .bot .su,.mc.has-photo .bot .catchip{text-shadow:0 1px 2px rgba(0,0,0,.55)}
.mc.has-photo .bot .catchip{background:rgba(0,0,0,.34)}
@media (prefers-reduced-transparency:reduce){.mc.has-photo .bot{background:rgba(8,6,4,.88)}}
/* food: bloco fh0807food */
/* AJUSTE FRONT 07/08 front-home-019food-0807 (v2: botao vidro AA-safe) */
.s19-faixa a.s19-cta{ background:var(--app019-gold-gradient,linear-gradient(135deg,#F3C651 0%,#E9A930 35%,#D49813 68%,#B88008 100%)); border:1px solid rgba(255,255,255,.5); box-shadow:0 6px 16px rgba(138,94,4,.38), inset 0 1px 0 rgba(255,255,255,.72), inset 0 -7px 14px rgba(0,0,0,.14); -webkit-backdrop-filter:blur(6px) saturate(1.2); backdrop-filter:blur(6px) saturate(1.2); color:#FFFFFF; -webkit-text-fill-color:#FFFFFF; }
body.dark .s19-faixa a.s19-cta{ border-color:rgba(233,169,48,.55); }
#comida{ padding-left:16px; padding-right:16px; }
/* food: bloco df0810v2 */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html:not(.dark) body:not(.dark){background:#FBFAF7}
.zfamilia a{box-shadow:0 1px 2px rgba(27,27,31,.06),0 6px 14px -8px rgba(110,65,2,.25);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.zfamilia a:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(27,27,31,.06),0 10px 20px -10px rgba(110,65,2,.35)}
html.dark .zfamilia a,body.dark .zfamilia a{box-shadow:none}
/* food: bloco toque44-0812 */
.g19-rodape .g19-linhas a{display:inline-block;padding:14px 4px;line-height:1.15}.g19-rodape .g19-linhas{gap:0 14px}
/* food: bloco food0812 */
/* ---- 2. HARDENING contra rolagem lateral (nada aumenta a largura do documento) ---- */
html{overflow-x:clip}
img,svg,video,iframe{max-width:100%}
main,section,.wrap,.mi,.grade,.fileiras{min-width:0}

/* ---- 3. RITMO VERTICAL: hero > categorias > lojas > filtros > resultados > CTA ---- */
main#a19main{padding-bottom:var(--e6)}
.filtros{padding:var(--e7) 0 0}
#lojasfood{margin-top:var(--e6)}
#anuncios{margin-top:var(--e7)}
.sec-titulo{margin:0 0 var(--e4);align-items:flex-end}
.sec-titulo h2{font-size:clamp(19px,1.45vw,23px);letter-spacing:-.3px}
section.mi{padding:0}


.hx{max-width:var(--eixo);width:calc(100% - var(--gut)*2);margin:var(--e4) auto 0;padding:0;min-height:0;
  border:1px solid rgba(233,169,48,.34);border-radius:var(--raio-g);overflow:hidden;
  background:radial-gradient(120% 100% at 78% 62%,rgba(233,169,48,.10),transparent 58%),linear-gradient(122deg,#0A0806 0%,#120E08 54%,#0A0806 100%);
  box-shadow:var(--sombra-c),inset 0 1px 0 rgba(255,255,255,.06);isolation:isolate}
html.dark .hx,body.dark .hx{border-color:rgba(233,169,48,.4)}
.hx .wrap{position:relative;z-index:2;max-width:none;padding:var(--e6) var(--e5)}
.hx-tx{width:min(540px,54%)}
/* a foto encosta no topo, na base e na direita do cartao: sem folga, sem faixa, sem buraco */
.hx-img{top:0;right:0;bottom:0;left:auto;width:58%;height:100%;margin:0;z-index:0}
.hx-i{width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  border-radius:0;box-shadow:none;-webkit-mask-image:none;mask-image:none}
/* gradiente progressivo sobre a foto: opaco na borda esquerda dela -> foto limpa na direita */
.hx-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#0A0806 0%,rgba(10,8,6,.94) 10%,rgba(10,8,6,.72) 30%,rgba(10,8,6,.44) 50%,rgba(10,8,6,.2) 70%,rgba(10,8,6,.06) 88%,rgba(10,8,6,0) 100%)}
/* profundidade: veu vertical discreto no topo e na base do cartao inteiro */
.hx::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,6,.4) 0%,rgba(10,8,6,0) 26%,rgba(10,8,6,0) 64%,rgba(10,8,6,.46) 100%)}
/* tipografia: branco no principal, ouro da marca no destaque */
.hx-t{font-size:clamp(30px,3.1vw,46px);line-height:1.05;letter-spacing:-1.1px}
.hx .hx-t{color:#FFFFFF;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.hx .hx-t b{font-style:italic;background:linear-gradient(102deg,#C0790F 0%,#E9A930 38%,#F3BC5A 50%,#E9A930 62%,#C0790F 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hx-s{font-size:clamp(15px,1.1vw,17px);margin:var(--e2) 0 var(--e4);max-width:40ch}
.hx .hx-s{color:rgba(255,255,255,.84);text-shadow:0 1px 6px rgba(0,0,0,.5)}
.hx-k{font-size:12.5px;letter-spacing:.16em;margin-bottom:var(--e1)}
.hx .hx-k{background:linear-gradient(90deg,#E9A930 0%,#EFAF3F 34%,#F3BC5A 50%,#EFAF3F 66%,#E9A930 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* busca DENTRO da hero — vidro escuro discreto. Mesmo form, mesma logica real. */
.hx .busca{background:rgba(16,13,9,.58);border:1px solid rgba(233,169,48,.32);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 14px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.hx .busca svg{stroke:rgba(255,255,255,.74)}
.hx .busca input{color:#FFFFFF}
.hx .busca input::placeholder{color:rgba(255,255,255,.66)}
.hx .busca:focus-within{border-color:rgba(233,169,48,.72);box-shadow:0 14px 32px rgba(0,0,0,.42),0 0 0 3px rgba(233,169,48,.45)}
.hx .busca button{background:var(--app019-gold-gradient,linear-gradient(135deg,#F3C651 0%,#E9A930 35%,#D49813 68%,#B88008 100%));color:#FFFFFF;box-shadow:0 4px 14px rgba(138,94,4,.4),inset 0 1px 0 rgba(255,255,255,.36)}
.hx .busca button:hover{filter:brightness(1.06);box-shadow:0 8px 20px rgba(138,94,4,.5),inset 0 1px 0 rgba(255,255,255,.36)}
/* CTAs reais: secundario vidro escuro com fio dourado, principal ouro (texto BRANCO) */
.hx-links{margin-top:var(--e4);gap:var(--e2)}
/* o secundario e vidro ESCURO, nao branco translucido: no celular ele passa POR CIMA da
   comida iluminada, e um veu claro com texto branco perderia contraste exatamente ali. */
.hx .hx-links .lk-claro{background:rgba(14,11,8,.55);border:1px solid rgba(233,169,48,.42);color:#FFFFFF;
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  box-shadow:0 8px 22px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1)}
.hx .hx-links .lk-claro:hover{background:rgba(22,17,12,.72);border-color:rgba(233,169,48,.7);color:#FFFFFF;box-shadow:0 12px 26px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.12)}
.hx .hx-links .lk-ouro{background:var(--app019-gold-gradient,linear-gradient(135deg,#F3C651 0%,#E9A930 35%,#D49813 68%,#B88008 100%));color:#FFFFFF;box-shadow:0 6px 18px rgba(138,94,4,.4),inset 0 1px 0 rgba(255,255,255,.36)}
.hx .hx-links .lk-ouro:hover{color:#FFFFFF;box-shadow:0 10px 24px rgba(138,94,4,.5),inset 0 1px 0 rgba(255,255,255,.36)}
.hx a:focus-visible,.hx button:focus-visible,.hx input:focus-visible{outline:3px solid #E9A930;outline-offset:3px}
@media (prefers-reduced-transparency:reduce){
  .hx .busca{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(16,13,9,.94)!important}
  .hx .hx-links .lk-claro{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(30,25,17,.94)!important}
}
@media(min-width:900px){.hx{min-height:clamp(360px,32vw,440px)}}
/* <=899px: CONTINUA UMA HERO SO. O corte segue sendo 900px (decisao medida do FOOD0812),
   mas em vez de EMPILHAR a foto acima do texto ela passa a ser o FUNDO do cartao inteiro
   e o conteudo fica por cima. Nunca mais dois blocos, nunca mais faixa entre eles. */
@media(max-width:899px){
  .hx{flex-direction:column;align-items:stretch;margin-left:var(--gut);margin-right:var(--gut);width:auto;
    min-height:clamp(400px,58vh,470px)}
  .hx .wrap{padding:var(--e5) var(--e4)}
  .hx-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;inset:0}
  
  .hx-i{object-position:12% 54%}
  .hx-tx{width:min(460px,72%)}
  /* paisagem estreita (tablet/celular deitado): degrade ainda horizontal, foto na direita */
  .hx-img::after{background:linear-gradient(90deg,#0A0806 0%,rgba(10,8,6,.92) 16%,rgba(10,8,6,.7) 38%,rgba(10,8,6,.42) 58%,rgba(10,8,6,.16) 78%,rgba(10,8,6,0) 100%),linear-gradient(180deg,rgba(10,8,6,.3) 0%,rgba(10,8,6,0) 34%,rgba(10,8,6,.24) 100%)}
}

@media(max-width:760px){
  .hx{min-height:clamp(390px,50vh,460px);margin-top:var(--e3)}
  .hx .wrap{padding:var(--e3) var(--e3) var(--e4)}
  .hx-tx{width:100%}
  .hx .hx-t{font-size:clamp(27px,7.4vw,34px);letter-spacing:-1.2px}
  .hx .hx-s{font-size:14px;line-height:1.4;max-width:30ch;margin:var(--e2) 0 var(--e3);color:rgba(255,255,255,.8)}
  .hx .busca{max-width:none;padding:6px 6px 6px 16px;background:rgba(16,13,9,.66)}
  .hx .busca button{padding:0 16px;font-size:14px}
  .hx .hx-links{margin-top:var(--e3);gap:var(--e1);flex-direction:column}
  .hx .hx-links a{width:100%;justify-content:center;text-align:center;min-height:46px;padding:10px 12px;font-size:13.5px}
  /* retrato: a comida fica na metade de baixo; o crop e por ALTURA, so o X importa */
  .hx-i{object-position:46% 56%}
  /* retrato: o escuro vem de cima (onde esta o texto) e a comida aparece na parte de baixo */
  .hx-img::after{background:linear-gradient(180deg,rgba(10,8,6,.95) 0%,rgba(10,8,6,.9) 26%,rgba(10,8,6,.76) 44%,rgba(10,8,6,.56) 62%,rgba(10,8,6,.48) 80%,rgba(10,8,6,.6) 100%),linear-gradient(90deg,rgba(10,8,6,.5) 0%,rgba(10,8,6,.12) 62%,rgba(10,8,6,0) 100%)}
  .hx::after{background:linear-gradient(180deg,rgba(10,8,6,.2) 0%,rgba(10,8,6,0) 24%,rgba(10,8,6,0) 78%,rgba(10,8,6,.28) 100%)}
}
@media(max-width:380px){
  .hx{min-height:clamp(370px,50vh,440px)}
  .hx .wrap{padding:var(--e3) var(--e2) var(--e3)}
  .hx .hx-t{font-size:clamp(25px,7.8vw,30px)}
  .hx .hx-s{max-width:28ch}
}
/* HEROFOOD0813 — 44px devolvidos a 1a dobra, logo acima da hero: o #btTema tem o atributo
   hidden (foi desligado de proposito na v4.4, junto do aria-hidden e do tabindex -1), mas
   a regra .bt-tema{display:inline-flex} vencia o atributo e ele seguia ocupando um circulo
   vazio de 44px. Aqui o atributo volta a valer. Nada muda em pagina onde o botao esta ligado
   (la ele nao tem o atributo). */
.bt-tema[hidden]{display:none}

/* ---- 5. CATEGORIAS: estado ativo no ouro da marca ---- */
.fchip img{transition:transform .18s ease,box-shadow .18s ease,outline-color .18s ease}
.fchip[aria-pressed="true"] img{outline:2.5px solid var(--ouro);
  box-shadow:0 0 0 4px rgba(233,169,48,.16),var(--sombra-c-h)}
.fchip[aria-pressed="true"] span{color:var(--ouro-txt);font-weight:800}
.fchip:hover img{transform:translateY(-3px) scale(1.03)}

/* ---- 6. LOJAS: vitrine premium ---- */
.carrossel{gap:var(--e2);padding-left:0}
.loja{width:126px;height:146px;border-radius:var(--raio-c);
  box-shadow:var(--vidro-in),var(--sombra-c)}
.loja .lfoto{height:80px;flex:0 0 80px;padding:8px}
.loja b{font-size:11px;margin-top:7px}
.loja span{font-size:10px}
.loja:hover{transform:translateY(-3px);box-shadow:var(--vidro-in),var(--sombra-c-h)}
@media(min-width:1200px){.loja{width:132px;height:152px}.loja .lfoto{height:84px;flex:0 0 84px}}

/* ---- 7. BARRA DE CONTROLES: localizacao | ordenacao | busca, numa peca so ---- */
.ctrlbar{display:grid;gap:var(--e2);margin:0 0 var(--e4);padding:var(--e2);
  border-radius:var(--raio-c);background:var(--vidro);border:1px solid var(--vidro-bd);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--vidro-in),var(--sombra-c)}
@media(min-width:900px){.ctrlbar{grid-template-columns:auto auto minmax(240px,1fr);align-items:center}}
.ctrlbar .cidrow,.ctrlbar .ferram,.ctrlbar .zbusca{margin:0}
.ctrlbar .ferram{flex-wrap:nowrap}
.ctrlbar #selCidade,.ctrlbar .ftog,.ctrlbar .zbusca input{
  min-height:44px;border-radius:12px;background:var(--card-bg);border:1px solid var(--separa);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.ctrlbar #selCidade{max-width:none;width:100%}
.ctrlbar .cidrow{gap:var(--e1)}
.ctrlbar .zbusca input:focus-visible{outline:3px solid var(--ouro);outline-offset:1px}
.ctrlbar .ftog[aria-pressed="true"]{border-color:var(--ouro);background:rgba(233,169,48,.12);
  color:var(--ouro-txt);font-weight:700}

/* ---- 8. CARDS: profundidade suave, paleta neutra, hover sem pulo de grade ---- */
.mcgrade .mc{box-shadow:var(--sombra-c)}
.mcgrade .mc:hover,.mcgrade .mc:focus-visible{transform:translateY(-4px);
  box-shadow:var(--sombra-c-h),0 0 0 1px var(--borda-ouro)}
/* a lavagem vermelha da categoria saiu: a interface fica neutra, a cor vem da comida */
.mc .catgrad{background:linear-gradient(to top,rgba(8,10,16,.58) 0%,rgba(8,10,16,.22) 55%,transparent 100%)}
.mc .ov{background:linear-gradient(100deg,rgba(8,10,16,.90) 0%,rgba(8,10,16,.74) 44%,rgba(8,10,16,.20) 72%,transparent 94%)}
/* blur removido dos botoes do card: eram ~4 por card x 12+ cards = dezenas de camadas caras */
.mc .bc,.mc .bg,.mc .bs,.mc .catchip{-webkit-backdrop-filter:none;backdrop-filter:none}
.mc .bc,.mc .bg,.mc .bs{background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.42);
  border-radius:12px;transition:background .18s ease,border-color .18s ease}
.mc:hover .bc{background:rgba(255,255,255,.30)}
.mc .bg:hover,.mc .bs:hover{background:rgba(255,255,255,.30);border-color:rgba(255,255,255,.7)}
.mc .catchip{background:rgba(0,0,0,.38);border-color:rgba(255,255,255,.30)}
.mc .tags .tag.main{background:var(--app019-gold-gradient,linear-gradient(135deg,#F3C651 0%,#E9A930 35%,#D49813 68%,#B88008 100%));border-color:rgba(255,255,255,.45)}
.mcgrade .mc .t{font-size:15.5px;line-height:1.22;letter-spacing:-.2px}
.mcgrade .mc .su{font-size:12px}
.mc .bc.bc-wa{background:#1FA855;border-color:rgba(255,255,255,.5)}
.mc .topseal{background:linear-gradient(135deg,#F8C64D,#C8880E);color:#3A2500}

/* ---- 9. FILEIRAS (itens sem foto) no mesmo sistema ---- */
.fileiras{gap:var(--e2)}
.frow{border-radius:var(--raio-c);padding:var(--e2) var(--e3);box-shadow:var(--sombra-c)}
.frow:hover{box-shadow:var(--sombra-c-h)}
@media(min-width:1200px){.fileiras{gap:var(--e2) var(--e4)}}

/* ---- 10. ESTADO VAZIO ELEGANTE ---- */
.zvazio{margin:0 0 var(--e4);padding:var(--e6) var(--e4);text-align:center;
  border-radius:var(--raio-g);background:var(--vidro);border:1px solid var(--vidro-bd);
  box-shadow:var(--vidro-in),var(--sombra-c);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.zvazio svg{width:40px;height:40px;stroke:var(--ouro-txt);fill:none;stroke-width:1.8;
  stroke-linecap:round;display:block;margin:0 auto var(--e2);opacity:.9}
.zvazio b{display:block;font-size:16px;color:var(--ink);margin-bottom:6px}
.zvazio p{color:var(--ink2);font-size:14px;max-width:46ch;margin:0 auto}
.zvazio-acoes{display:flex;gap:var(--e2);justify-content:center;flex-wrap:wrap;margin-top:var(--e4)}
.zvazio-acoes .bt{min-height:44px;padding:10px 20px;font-size:14px}

/* ---- 11. BOTOES: vidro + hover + pressed + carregando + desabilitado ---- */
.maisrow{margin:var(--e5) 0 0}
.bt-claro{background:var(--vidro);border-color:var(--vidro-bd);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:var(--vidro-in),var(--sombra-c)}
.bt-claro:hover{border-color:var(--borda-ouro);box-shadow:var(--vidro-in),var(--sombra-c-h)}
.bt:active{transform:translateY(0) scale(.985)}
.bt[disabled],.bt.is-loading{pointer-events:none;opacity:.6}
.bt.is-loading{position:relative;color:transparent!important}
.bt.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;
  margin:-9px 0 0 -9px;border-radius:50%;border:2.5px solid var(--ouro-txt);
  border-top-color:transparent;animation:food-spin .7s linear infinite}
@keyframes food-spin{to{transform:rotate(360deg)}}

/* ---- 12. MODAL -> painel lateral no desktop (nada de janela pesada no centro) ---- */
.fmodal-ov{background:rgba(11,11,13,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fmodal-box{-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}
@media(min-width:900px){
  .fmodal{align-items:stretch;justify-content:flex-end}
  .fmodal-box{width:440px;max-width:440px;max-height:none;height:100%;
    border:1px solid var(--vidro-bd);border-right:0;border-radius:var(--raio-g) 0 0 var(--raio-g);
    box-shadow:var(--vidro-in),-24px 0 70px rgba(20,14,0,.30);
    animation:food-side .3s cubic-bezier(.2,.8,.2,1)}}
@keyframes food-side{from{transform:translateX(44px);opacity:.3}to{transform:none;opacity:1}}
.fm-hd{padding:var(--e4)}
.fm-bd{padding:var(--e3) var(--e4) var(--e5)}
.fm-cta,.fm-act,.fm-gate{border-radius:12px}
.fm-close{background:var(--vidro);border:1px solid var(--vidro-bd)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .fmodal-box,.ctrlbar,.zvazio,.estado,.bt-claro{background:var(--card-bg)}}

/* ---- 13. CTA final e rodape: transicao sem quebra de largura ---- */
.anunciar{margin:var(--e7) 0 0}
.anun-c{border-radius:var(--raio-g);padding:var(--e6) var(--e5)}
footer.g19-rodape{margin-top:var(--e6)}

/* ---- 14. TEMA ESCURO: vidro escuro, borda dourada, zero card branco ---- */
/* HEROFOOD0813: a hero e escura nos DOIS temas; a borda dela ja e definida no bloco 4. */
html.dark .ctrlbar,body.dark .ctrlbar,html.dark .zvazio,body.dark .zvazio,
html.dark .estado,body.dark .estado,html.dark .bt-claro,body.dark .bt-claro{
  border-color:var(--vidro-bd)}
html.dark .ctrlbar #selCidade,body.dark .ctrlbar #selCidade,
html.dark .ctrlbar .ftog,body.dark .ctrlbar .ftog,
html.dark .ctrlbar .zbusca input,body.dark .ctrlbar .zbusca input{
  background:var(--card-bg);border-color:var(--separa);color:var(--ink)}
html.dark .zvazio p,body.dark .zvazio p{color:var(--ink2)}

/* ---- 15. MOVIMENTO: discreto, e desligavel ---- */
@media(prefers-reduced-motion:reduce){
  .bt.is-loading::after{animation:none}
  .mcgrade .mc:hover,.loja:hover,.fchip:hover img{transform:none}}
@media(prefers-reduced-transparency:reduce){
  .ctrlbar,.zvazio,.estado,.bt-claro,.fmodal-box{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    background:var(--card-bg)!important}}
/* food: bloco shell0916 */
/* SHELL0916 v2 16/09 (user-c2, ordem do Rafael: o site pisca e deforma ao carregar): casca critica do APP019 ANTES do 1.o desenho - as familias antigas de cabecalho nunca aparecem, o lugar do cabecalho universal fica reservado (o topo019 troca a reserva pelo cabecalho no mesmo passo) e o rodape institucional nao sai duplicado. Rollback: apagar este bloco, a div data-shell0916 e a tag do topo019 data-shell0916. */.a19hdbar,#a19mnu,div[style*="#150f08"],div[style*="rgb(21, 15, 8)"],header.h019,header.a19top,header.htopo,header.g19-header,header.goldbar,header.uni-hdr,header.m019,header.hd019,header.a19lc-hd,.a19lc-hd,header.gb,header.t19-aposentado,.drawer#drawer,#ovl.ovl:empty{display:none!important}:root{--a19-top-safe:env(safe-area-inset-top,0px);--a19-top-min:0px;--a19-top:max(var(--a19-top-safe),var(--a19-top-min))}@media (max-width:899px),(hover:none),(pointer:coarse){:root{--a19-top-min:6px}}html.in-app019{--a19-top-min:24px}html.a19-no-topsafe{--a19-top:0px}.t19-reserva{display:block;height:calc(129px + var(--a19-top));background:#fff}@media (min-width:900px){.t19-reserva{height:calc(103px + var(--a19-top))}}html.a19-no-topo019 .t19-reserva,html.app019-native-nav .t19-reserva{display:none}body:has(footer.g19-rodape) #c3info0829{display:none!important}
/* food: bloco soclaro0902css */
/* SOCLARO0902 - 02/09/2026 - ordem do Rafael: "NADA ESCURO MAIS" / "usar so claro !".
   O botao de alternar tema (sol/lua) deixa de ter funcao quando o site e so claro.
   Deixa-lo visivel seria um controlo MORTO: a pessoa carrega e nada acontece.
   REVERTER = apagar este bloco (o botao volta a aparecer e volta a funcionar). */
button[data-g19tema],[data-g19tema].g19-toggle{display:none!important}