/* ======================================================================
   PANTANAL HOTBURGER — tema "Noite de Onça" (03/10/2026)

   Tese: o cardápio impresso da casa é preto com laranja; a logo é uma
   onça segurando o lanche, com a fita vermelha "PANTANAL" e o
   "HOTBURGER" dourado. Então:
     - chão de carvão quente (o preto do impresso), com couro de pintas
       só no topo;
     - a onça da logo, recortada, sai de cima da faixa das categorias;
     - a FITA VERMELHA da logo vira a placa de cada categoria;
     - nome do lanche na serifa gorda pêssego do impresso;
     - preço no dourado do "HOTBURGER";
     - laranja da logo = ação (botões, barra do pedido), sempre com
       letra ESCURA por cima (letra branca no laranja reprova contraste).

   Contrastes conferidos (fundo café #2A211C, 03/10):
     creme #F8ECDD 13,5 · creme-2 #D3C1AD 9,0 · creme-3 #B9A592 6,6
     pêssego #F8A866 8,1 · ouro #FFC845 10,2 · laranja #F47A1F 5,7 · verde 9,3
   Na janela (#352A24) tudo acima de 5,1; no hover (#44362E) creme-3 4,9.
   Café #2A211C sobre o laranja #F47A1F: 5,7
   ====================================================================== */

:root {
  /* chão */
  /* 03/10: o carvão #15100D virou café escuro suave (pedido do cliente:
     "um marrom mais fraquinho"). */
  --noite:   #2A211C;
  --noite-2: #352A24;   /* superfície: janela, campos */
  --noite-3: #44362E;   /* hover */

  /* tinta */
  --creme:   #F8ECDD;
  --creme-2: #D3C1AD;
  --creme-3: #B9A592;

  /* marca (tiradas da logo e do impresso) */
  --laranja:   #F47A1F;
  --laranja-2: #FF9442;
  --pessego:   #F8A866;
  --ouro:      #FFC845;
  --fita:      #CF2A2E;
  --fita-2:    #9E1C21;
  --verde:     #7DDB95;
  --zap:       #25D366;

  --linha:   rgba(248, 236, 221, .11);
  --linha-2: rgba(248, 236, 221, .26);

  /* apelidos que cardapio.css e base.css usam */
  --carvao: var(--noite); --carvao-2: var(--noite-2); --carvao-3: var(--noite-3);
  --preto:  var(--noite); --preto-2:  var(--noite-2); --preto-3:  var(--noite-3);
  --pink: var(--laranja); --pink-2: var(--ouro); --turq: var(--laranja);
  --vinho: var(--fita); --vinho-2: var(--fita-2);
  --vermelho: var(--fita); --vermelho-2: var(--fita-2);
  --tinta: var(--creme); --tinta-2: var(--creme-2); --tinta-3: var(--creme-3);
  --choco: var(--noite);

  /* Letra de pincel: Just Another Hand (Google Fonts, licença OFL — uso
     comercial livre). Escolhida por ser a gratuita mais parecida com a
     Hastagirl que o cliente queria (alta, estreita, em pé, traço de
     pincel); a Hastagirl só é grátis para uso pessoal e a licença não foi
     comprada. É uma fonte "magra": os tamanhos abaixo são ~30% maiores
     do que seriam com uma letra comum. */
  --f-placa:   'Just Another Hand', 'Arial Narrow', cursive;
  --f-nome:    'Just Another Hand', 'Arial Narrow', cursive;
  --f-display: var(--f-placa);
  --f-titulo:  'Figtree', system-ui, sans-serif;
  --f-texto:   'Figtree', system-ui, -apple-system, sans-serif;

  --larg: 1120px;
  --lado: clamp(16px, 4.5vw, 40px);
  --abas: 54px;
}

html { touch-action: auto; }
body { background: var(--noite); color: var(--creme); overflow-x: clip; font-size: 1rem; }
::selection { background: var(--laranja); color: var(--noite); }
a:focus-visible, button:focus-visible, .campo:focus-visible,
.pi__obs textarea:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* tira a caixa alta com letra espaçada herdada da estrutura: aqui quem
   grita é a placa vermelha, o resto fala normal */
.painel h2, .painel h3, .painel h4, .contas div.total, .painel .btn, .barra-pedido,
.pg__regra, .pi__obs label, .linha-pedido__nome, .linha-pedido__tirar, .fs__titulo,
.fs__campos label span, .escolha, .aviso-pe, .fechado-faixa, .pgto-marca,
.pgto-duas__rotulo, .opcao__preco--acabou, .categorias button, .item__nome,
.item__monta, .item__preco--fora, .item__mais, .cardapio-topo__status, h1, h2, h3, h4 {
  text-transform: none; letter-spacing: 0;
}

/* ======================================================================
   TOPO — a onça sai de cima da faixa
   ====================================================================== */
.cardapio-topo {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--noite); border: 0;
}
/* couro: pintas em laranja a 9%, apagando para baixo (o texto fica
   sobre a parte mais calma) */
.topo__pintas {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/pintas.svg") 0 0 / 300px repeat;
  opacity: .09;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
.cardapio-topo__miolo {
  max-width: var(--larg); margin-inline: auto;
  padding: 22px var(--lado) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 40vw, 280px);
  align-items: end; gap: 4px 12px;
}
.topo__texto { padding-bottom: 22px; align-self: center; }
.topo__lugar {
  font-family: var(--f-texto); font-weight: 700; font-size: .75rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--laranja);
  margin-bottom: 10px;
}
.topo__titulo {
  font-family: var(--f-placa); font-weight: 400;
  font-size: clamp(3rem, 1.9rem + 5vw, 5.6rem); line-height: .95;
  color: var(--creme); max-width: 10ch;
}
.topo__e { color: var(--ouro); }

.cardapio-topo__status {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  background: rgba(248, 236, 221, .06); box-shadow: inset 0 0 0 1px var(--linha-2);
  font-family: var(--f-texto); font-weight: 700; font-size: .8125rem;
  color: var(--creme-2); justify-self: start;
}
.cardapio-topo__status .ponto { width: 8px; height: 8px; }
.cardapio-topo__status[data-aberto="sim"] { color: var(--verde); }
.cardapio-topo__status[data-aberto="sim"] .ponto { background: var(--verde); box-shadow: 0 0 0 3px rgba(125, 219, 149, .18); }
.cardapio-topo__status[data-aberto="nao"] { color: var(--creme-2); }
.cardapio-topo__status[data-aberto="nao"] .ponto { background: var(--fita); }
.status-extra { font-weight: 500; color: var(--creme-2); }
.topo__como { margin-top: 12px; font-size: .875rem; line-height: 1.45; color: var(--creme-3); max-width: 30ch; }

/* a logo do pão (a que a casa mais usa): no centro da altura, ao lado
   do texto. Sem disco atrás — o pão já é laranja. */
.topo__logo { align-self: center; padding-block: 16px 20px; }
.topo__logo img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35));
}

/* ======================================================================
   ABAS — faixa presa no topo
   ====================================================================== */
.categorias {
  position: sticky; top: 0; z-index: 60;
  max-width: none; margin: 0; gap: 6px;
  padding: 8px var(--lado);
  background: var(--noite);
  border-top: 3px solid var(--laranja);
  /* o encaixe da rolagem respeita a margem: senão a 1ª aba cola na borda */
  scroll-padding-inline: var(--lado);
  box-shadow: 0 1px 0 var(--linha), 0 12px 24px -18px rgba(0, 0, 0, .9);
}
.categorias button {
  min-height: 38px; padding: 8px 16px; border: 0; border-radius: 999px;
  font-family: var(--f-texto); font-weight: 700; font-size: .9375rem;
  color: var(--creme-2); white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.categorias button:hover { color: var(--creme); background: var(--noite-3); }
.categorias button[aria-current="true"] { background: var(--laranja); color: var(--noite); }
.categorias button:focus-visible { outline-offset: -2px; }

/* ======================================================================
   LISTA
   ====================================================================== */
.cardapio-layout { display: block; }
.cardapio { max-width: var(--larg); margin-inline: auto; padding: 0 var(--lado); }
.cardapio__carregando { color: var(--creme-3); }
.grupo-cat { padding-top: 40px; scroll-margin-top: calc(var(--abas) + 16px); }
.grupo-cat + .grupo-cat { padding-top: 56px; }

/* Título da categoria: letra de pincel grande em creme e um traço
   laranja curto embaixo. (A placa vermelha torta saiu a pedido: não
   combinou.) */
.cat-capa { display: grid; justify-items: start; gap: 8px; margin-bottom: 10px; }
.cat-capa__nome {
  font-family: var(--f-placa); font-weight: 400;
  font-size: clamp(3.2rem, 2.7rem + 2vw, 4.2rem); line-height: .95;
  color: var(--creme);
}
.cat-capa__nome::after {
  content: ""; display: block; width: 56px; height: 4px; margin-top: 10px;
  border-radius: 2px; background: var(--laranja);
}
.cat-capa__conta { font-size: .8125rem; color: var(--creme-3); line-height: 1.5; }
.cat-capa__conta > * + *::before { opacity: .6; }
.cat-capa__frase { font-size: .9375rem; font-weight: 600; color: var(--creme-2); }
.cat-capa__monta { display: block; margin-top: 2px; font-weight: 700; color: var(--laranja); }
.cat-capa__monta::before { content: none !important; }
.cat-capa__monta::after { content: " · escolha os adicionais no +"; font-weight: 500; color: var(--creme-3); }

/* O ITEM
   Linha 1: nome (serifa pêssego) ........ preço (dourado)
   Linha 2: ingredientes ................. botão "+" laranja
   O texto e o valor viram "contents" para os quatro pedaços caírem
   direto na grade do item. */
.itens { grid-template-columns: minmax(0, 1fr); gap: 0; }
.item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nome preco" "desc mais" "foto foto";
  align-items: start; gap: 6px 18px;
  padding: 18px 0 16px; border-bottom: 1px solid var(--linha);
  scroll-margin-block: 90px 140px;
}
.item__texto, .item__valor { display: contents; }
.item__nome {
  grid-area: nome; align-self: baseline;
  font-family: var(--f-nome); font-weight: 400;
  font-size: clamp(2rem, 1.8rem + .6vw, 2.3rem); line-height: 1; letter-spacing: .01em;
  color: var(--pessego); transition: color .2s;
}
.item__desc {
  grid-area: desc; margin: 0; max-width: 54ch;
  font-size: .9rem; line-height: 1.5; color: var(--creme-2);
}
.item__monta { grid-area: desc; align-self: end; font-size: .75rem; color: var(--laranja); }
.item__preco {
  grid-area: preco; align-self: baseline; justify-self: end; text-align: right;
  font-family: var(--f-texto); font-weight: 800; font-size: 1.125rem;
  color: var(--ouro); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.item__apartir { display: block; font-size: .6875rem; font-weight: 500; color: var(--creme-3); }
/* "Escolher +" vira um botão redondo: a palavra continua lá para o
   leitor de tela, só some da vista */
.item__escolher {
  grid-area: mais; align-self: end; justify-self: end;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--laranja); color: var(--noite);
  font-size: 0; transition: background-color .2s, transform .2s;
}
.item__escolher > span { font-family: var(--f-texto); font-size: 26px; font-weight: 600; line-height: 1; margin-top: -2px; }
.item:not(:disabled):hover .item__nome { color: var(--ouro); }
.item:not(:disabled):hover .item__escolher { background: var(--laranja-2); transform: scale(1.06); }
.item:not(:disabled):active .item__escolher { transform: scale(.94); }
.item:focus-visible { outline-offset: 4px; border-radius: 4px; }
.item__foto { display: none; }
.item--sem-foto .item__foto { display: none; }
/* sem ingredientes (porção de fritas): nome, preço e + numa linha só */
.item:not(:has(.item__desc)) {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "nome preco mais"; align-items: center;
}
.item:not(:has(.item__desc)) .item__nome,
.item:not(:has(.item__desc)) .item__preco { align-self: center; }
.item:disabled { cursor: default; }
.item:disabled .item__nome, .item:disabled .item__preco { color: var(--creme-3); }
.item--esgotado { opacity: 1; }
.item__preco--fora { font-size: .8125rem; font-weight: 700; color: var(--creme-3); }

/* ---------- Rodapé ---------- */
.cardapio-rodape {
  max-width: var(--larg); margin: 64px auto 0; padding: 28px var(--lado) 32px;
  border-top: 1px solid var(--linha);
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: center;
  color: var(--creme-3); font-size: .875rem; line-height: 1.6;
}
.rodape__logo { width: 72px; height: auto; }
.rodape__nome { font-family: var(--f-placa); font-size: 2.1rem; color: var(--creme); line-height: 1.2; }
/* ícones de contato: uma cor só (creme), círculo com contorno — viram
   laranja ao passar o dedo/mouse. 44px = alvo de toque confortável. */
.rodape__icones { display: flex; gap: 10px; margin-top: 10px; }
.cardapio-rodape .rodape__icone {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: var(--creme); box-shadow: inset 0 0 0 1.5px var(--linha-2);
  transition: color .2s, box-shadow .2s, background-color .2s;
}
.rodape__icone svg { width: 21px; height: 21px; fill: currentColor; }
.cardapio-rodape .rodape__icone:hover { color: var(--noite); background: var(--laranja); box-shadow: none; }
.rodape__icone:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

/* ======================================================================
   BARRA DO PEDIDO
   ====================================================================== */
.pagina-cardapio { padding-bottom: 24px; }
.pagina-cardapio.tem-pedido { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
html:has(.tem-pedido) { scroll-padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.barra-pedido {
  bottom: calc(14px + env(safe-area-inset-bottom));
  padding: 14px 18px; gap: 12px; border-radius: 16px;
  background: var(--laranja); color: var(--noite);
  font-family: var(--f-texto); font-weight: 800;
  box-shadow: 0 0 0 2px var(--noite), 0 18px 34px -12px rgba(0, 0, 0, .85);
}
.barra-pedido:hover { background: var(--laranja-2); }
.barra-pedido__qtd { min-width: 28px; height: 28px; border-radius: 999px; background: var(--noite); color: var(--ouro); font-size: .875rem; }
.barra-pedido__texto, .barra-pedido__total { font-size: 1rem; }
.barra-pedido__total { font-variant-numeric: tabular-nums; }
.barra-pedido:focus-visible { outline-color: var(--creme); }

/* ======================================================================
   JANELA (produto / pedido / finalizar)
   ====================================================================== */
.painel-fundo { background: rgba(5, 3, 2, .7); }
.painel, .painel__topo, .painel__pe { background: var(--noite-2); }
.painel { height: 92dvh; max-height: 92dvh; border-radius: 18px 18px 0 0; border: 0; }
.painel__topo { border-color: var(--linha); }
.painel__titulo { font-family: var(--f-texto); font-weight: 800; font-size: 1.0625rem; line-height: 1.2; color: var(--creme); overflow-wrap: anywhere; }
.painel__voltar, .painel__fechar { color: var(--creme-2); border-radius: 50%; }
.painel__voltar:hover, .painel__fechar:hover { color: var(--creme); background: var(--noite-3); }
.painel__corpo { min-height: 0; }
.painel__pe { border-color: var(--linha); padding-top: 12px; }

.pi__cabeca { padding-block: 20px 16px; border-color: var(--linha); }
.pi__nome { font-family: var(--f-nome); font-weight: 400; font-size: 2.9rem; line-height: 1; color: var(--pessego); }
.pi__desc { font-size: .9375rem; color: var(--creme-2); }
.pi__preco { font-family: var(--f-texto); font-weight: 800; font-size: 1.25rem; color: var(--ouro); font-variant-numeric: tabular-nums; }
.pi__foto { display: none; }

.pg { border-color: var(--linha); }
.pg__cabeca { gap: 6px 12px; padding-block: 18px 10px; }
.pg__titulo { font-family: var(--f-placa); font-weight: 400; font-size: 2.25rem; color: var(--creme); }
.pg__regra { font-family: var(--f-texto); font-weight: 700; font-size: .75rem; border: 0; padding: 3px 8px; border-radius: 999px; background: var(--noite-3); color: var(--creme-2); }
.pg__regra--obrig { background: var(--fita); color: #fff; }
.pg__regra--cheio { background: rgba(125, 219, 149, .14); color: var(--verde); }

.opcao { border-top-color: var(--linha); }
.opcao:hover { background: var(--noite-3); }
.opcao__nome { font-size: .9375rem; color: var(--creme); }
.opcao__marca { border-color: var(--linha-2); border-radius: 6px; color: var(--noite); }
.opcao--radio .opcao__marca { border-radius: 50%; }
.opcao input:checked + .opcao__marca { background: var(--laranja); border-color: var(--laranja); }
.opcao__preco { font-family: var(--f-texto); font-weight: 700; color: var(--ouro); }
.opcao__cada { color: var(--creme-3); }
.opcao--tem .opcao__marca--num { background: var(--laranja); border-color: var(--laranja); color: var(--noite); }
.opcao__add { border-radius: 50%; border-color: var(--laranja); color: var(--laranja); font-family: var(--f-texto); }
.opcao__add:hover { background: var(--laranja); border-color: var(--laranja); color: var(--noite); }
.opcao__add, .qtd--mini button { width: 44px; height: 44px; }
.qtd { border-radius: 999px; border-color: var(--linha-2); }
.qtd button { color: var(--creme); font-family: var(--f-texto); border-radius: 999px; }
.qtd button:hover { background: var(--noite-3); }
.qtd span { font-family: var(--f-texto); font-weight: 800; color: var(--creme); }
.opcao--travada, .opcao__add:disabled, .qtd button:disabled, .btn:disabled { opacity: .4; }
/* Adicional com contador (não tem quadradinho): nome em cima, preço
   embaixo, − 1 + na direita — em qualquer largura de tela. */
.opcao--conta {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome conta" "preco conta";
  gap: 2px 12px;
}
.opcao--conta .opcao__conta { display: contents; }
.opcao--conta .opcao__nome { grid-area: nome; }
.opcao--conta .opcao__preco { grid-area: preco; justify-self: start; font-size: .875rem; }
.opcao--conta .qtd, .opcao--conta .opcao__add { grid-area: conta; align-self: center; }

.pi__obs label { font-family: var(--f-texto); font-weight: 700; font-size: .9375rem; color: var(--creme); }
.campo, .pi__obs textarea {
  background: var(--noite); color: var(--creme);
  border: 1px solid var(--linha-2); border-radius: 10px;
}
.campo:focus, .pi__obs textarea:focus { border-color: var(--laranja); }
.campo::placeholder, .pi__obs textarea::placeholder { color: var(--creme-3); opacity: 1; }
.pi__obs small { color: var(--creme-3); }

.btn { font-family: var(--f-texto); font-weight: 800; letter-spacing: 0; text-transform: none; border-radius: 12px; }
.painel .btn { min-height: 52px; font-size: 1rem; white-space: normal; padding: 12px 16px; }
.painel .btn:hover { transform: none; }
.btn--pink, .btn--turq, .btn--claro { background: var(--laranja); color: var(--noite); }
.btn--pink:hover, .btn--turq:hover, .btn--claro:hover { background: var(--laranja-2); }
.btn--zap { background: var(--zap); color: #062B16; }
.btn--zap:hover { background: #3BE07B; }
.btn--linha { border-color: var(--linha-2); color: var(--creme); }
.btn--linha:hover { background: var(--noite-3); border-color: var(--creme-2); }
.pe-linha { flex-wrap: wrap; gap: 12px; }
.aviso-pe { font-family: var(--f-texto); font-size: .875rem; color: var(--ouro); }

.pedido-vazio { color: var(--creme-3); }
.pedido-vazio h3 { font-family: var(--f-placa); font-weight: 400; font-size: 2.25rem; color: var(--creme); }
.linha-pedido { border-color: var(--linha); grid-template-columns: minmax(0, 1fr) auto; }
.linha-pedido__nome { font-family: var(--f-nome); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--pessego); overflow-wrap: anywhere; }
.linha-pedido__opcoes, .linha-pedido__obs { color: var(--creme-2); }
/* a quantidade em letra comum: na letra de pincel o "1" parecia um "l" */
.linha-pedido__qtd { font-family: var(--f-texto); font-weight: 800; font-size: 1rem; color: var(--ouro); vertical-align: .2em; margin-right: .15em; }
.linha-pedido__preco { font-family: var(--f-texto); font-weight: 800; color: var(--ouro); font-variant-numeric: tabular-nums; }
.linha-pedido__pe { flex-wrap: wrap; }
.linha-pedido__tirar { font-family: var(--f-texto); font-size: .875rem; min-height: 44px; color: var(--creme-3); border-color: var(--linha-2); }
.linha-pedido__tirar:hover { color: var(--laranja); border-color: var(--laranja); }
.contas div { color: var(--creme-2); }
.contas div.total { font-family: var(--f-texto); font-weight: 800; font-size: 1.25rem; color: var(--creme); border-color: var(--linha); }
.contas div.total span:last-child { color: var(--ouro); }

.fs { border-color: var(--linha); }
.fs__titulo { font-family: var(--f-placa); font-weight: 400; font-size: 2.25rem; color: var(--creme); }
.fs__campos label span { font-family: var(--f-texto); font-weight: 700; font-size: .8125rem; color: var(--creme-2); }
.erro-campo { color: #FF8A80; }
.campo--erro { border-color: #FF8A80; }
.escolha { font-family: var(--f-texto); font-weight: 700; font-size: .9375rem; border-radius: 999px; border-color: var(--linha-2); color: var(--creme-2); }
.escolha:hover { border-color: var(--creme-2); color: var(--creme); }
.escolha--on, .escolha:has(input:checked) { background: var(--laranja); border-color: var(--laranja); color: var(--noite); }
.pgto-marca { font-family: var(--f-texto); font-size: .9375rem; border-radius: 12px; color: var(--creme-2); }
.pgto-marca--on, .pgto-marca:has(input:checked) { border-color: var(--laranja); background: rgba(244, 122, 31, .1); color: var(--creme); }
.pgto-marca input { accent-color: var(--laranja); }
.pgto-duas { border-left-color: var(--laranja); }
.pgto-duas__rotulo { font-family: var(--f-texto); color: var(--creme-3); }
.fechado-faixa { background: var(--fita); color: #fff; font-family: var(--f-texto); font-size: .875rem; }

/* ======================================================================
   TELAS
   ====================================================================== */
@media (max-width: 640px) {
  .cardapio-topo__miolo { padding-top: 18px; gap: 0 6px; }
  .topo__texto { padding-bottom: 18px; }
  .topo__lugar { font-size: .6875rem; letter-spacing: .1em; white-space: nowrap; margin-bottom: 8px; }
  .cardapio-topo__status { font-size: .75rem; margin-top: 12px; }
  .cardapio-topo__status .status-extra { display: inline; }
  .topo__como { font-size: .8125rem; }
  .grupo-cat { padding-top: 32px; }
  .grupo-cat + .grupo-cat { padding-top: 44px; }
  .item { gap: 4px 14px; padding: 16px 0 14px; }
  .item__desc { font-size: .875rem; }
}
@media (max-width: 370px) {
  .cardapio-topo__miolo { grid-template-columns: minmax(0, 1fr) 118px; }
  .topo__titulo { font-size: 2.7rem; }
  .topo__como { display: none; }
}
@media (min-width: 641px) {
  .cardapio-topo__miolo { padding-top: 40px; gap: 4px 32px; }
  .topo__texto { padding-bottom: 40px; }
  .topo__lugar { font-size: .8125rem; }
  .cardapio-topo__status { font-size: .875rem; }
  .topo__como { font-size: .9375rem; }
  .categorias { justify-content: center; }
}
@media (min-width: 900px) {
  /* duas colunas, como o cardápio impresso */
  .itens { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
  .cardapio-topo__miolo { grid-template-columns: minmax(0, 1fr) 300px; }
  .topo__titulo { max-width: 13ch; font-size: clamp(4.3rem, 2rem + 4.8vw, 6.6rem); }
  .painel { height: 100dvh; max-height: 100dvh; border-radius: 0; }
}
@media (min-width: 1100px) {
  .cardapio-topo__miolo { grid-template-columns: minmax(0, 1fr) 320px; padding-top: 48px; }
  .topo__texto { padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .item__escolher, .item:not(:disabled):hover .item__escolher { transition: none; transform: none; }
}