/* ==========================================================================
   PONTO CERTO v5 — páginas de cardápio
   O CONTEÚDO veio do v1 (118 itens conferidos com os PNGs repaginados).
   O DESIGN é todo daqui: tokens, Anton no display, Oswald nos títulos de
   grupo, Inter no corpo, mono nos rótulos. Nada de serifa antiga.
   ========================================================================== */

.pagina-cardapio { background: var(--b-fundo); }
/* --- a marca nas páginas internas -----------------------------------------
   No index a marca comeca gigante e ENCOLHE pro topo, animada pelo
   #hero-wrapper. Aqui nao existe hero, entao o ScrollTrigger nunca roda e ela
   ficava travada no estado inicial: um brasao gigante no meio da pagina, por
   cima do cardapio. Aqui ela ja nasce no tamanho final, encostada no topo.  */
.pagina-cardapio #marca-wrapper {
  height: auto;
  inset: 0 0 auto 0;
}
.pagina-cardapio #marca-crescedor { display: none; }
.pagina-cardapio #marca-container { width: 94px; }
.pagina-cardapio .marca-scrim { opacity: 1; }


/* ------------------------------------------------------------- topo da página */
.cardapio-topo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(6rem, 12vw, 10rem) clamp(2.5rem, 5vw, 4rem);
}
.cardapio-topo__fundo { position: absolute; inset: 0; z-index: -2; }
.cardapio-topo__fundo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.cardapio-topo::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(18, 13, 11, 0.86) 0%,
    rgba(18, 13, 11, 0.62) 42%,
    rgba(18, 13, 11, 0.92) 82%,
    var(--b-fundo) 100%);
}
.voltar {
  display: inline-block;
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
  color: var(--l2);
  text-decoration: none;
  transition: color var(--dur-media, 0.3s) ease;
}
.voltar:hover { color: var(--brasa-viva); }
.cardapio-topo__titulo {
  font-family: var(--f-display);
  font-size: var(--t-3xl);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--l1);
  margin: 0;
}
.cardapio-topo__meta { margin-top: 0.75rem; color: var(--l2); }

/* abas pras outras partes do cardápio */
.abas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.aba {
  font-family: var(--f-cond);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.55rem 1.05rem;
  color: var(--l1);
  text-decoration: none;
  border: 1px solid var(--line-forte);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.aba:hover { border-color: var(--brasa-viva); color: var(--brasa-viva); }

/* --------------------------------------------------------------- índice */
.indice {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.35rem;
  padding-block: clamp(1.5rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
.indice__link { color: var(--l2); text-decoration: none; transition: color 0.25s ease; }
.indice__link:hover { color: var(--brasa-viva); }

/* --------------------------------------------------------------- grupos */
.grupo { padding-block: clamp(2.4rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.grupo:last-of-type { border-bottom: 0; }
.grupo__cabeca {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem;
  margin-bottom: clamp(1.3rem, 2.6vw, 2rem);
}
.grupo__nome {
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--l1);
  margin: 0;
}
.grupo__sub { color: var(--brasa-viva); }
.grupo__obs {
  font-family: var(--f-corpo);
  font-size: var(--t-sm);
  color: var(--l2);
  margin: -0.6rem 0 1.4rem;
  max-width: 62ch;
}

/* ---------------------------------------------------------------- itens */
.itens { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.1rem, 2.2vw, 1.75rem); }
@media (min-width: 900px) {
  .itens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 2.4vw, 2.25rem) clamp(2rem, 4vw, 3.5rem); }
}
.item { padding-bottom: clamp(1rem, 2vw, 1.4rem); border-bottom: 1px solid var(--line); }
.item__topo {
  display: flex; align-items: baseline; gap: 0.75rem;
  /* a linha pontilhada entre nome e preço é o gesto clássico de cardápio;
     aqui ela é sutil pra não virar enfeite */
}
.item__nome {
  font-family: var(--f-cond);
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: 1.2;
  color: var(--l1);
  margin: 0;
  flex: 0 1 auto;
}
.item__topo::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-bottom: 0.28em;
  background: repeating-linear-gradient(90deg,
    var(--line-forte) 0 2px, transparent 2px 6px);
}
.item__preco {
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: var(--t-lg);
  color: var(--brasa-viva);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.item__preco::before { content: "R$ "; font-size: 0.72em; opacity: 0.72; }
.item__preco--pequeno { font-size: var(--t-base); }
.item__desc {
  font-family: var(--f-corpo);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--l2);
  margin: 0.5rem 0 0;
  max-width: 58ch;
  text-wrap: pretty;
}
.item__variantes { list-style: none; margin: 0.65rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.item__variantes li {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--f-corpo);
  font-size: var(--t-sm);
  color: var(--l2);
}
.item__variantes li > span:first-child { flex: 0 1 auto; }
.item__variantes li::after {
  content: "";
  order: 1;
  flex: 1 1 auto;
  height: 1px;
  margin-bottom: 0.28em;
  background: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 6px);
}
.item__variantes .item__preco { order: 2; }

/* ---------------------------------------------------------------- fecho */
.fecho {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  text-transform: uppercase;
  color: var(--brasa-viva);
  text-align: center;
  margin: clamp(3rem, 6vw, 5rem) 0 clamp(1.4rem, 3vw, 2.2rem);
}
.fecho__acao {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* ==========================================================================
   CARDÁPIO VISUAL (2026-08-26)
   Tratamento DIFERENTE por página, e isso é decisão, não limitação:
     Comidas  38 de 63 itens têm foto (60%) -> foto quadrada raio 3px;
              nos 25 sem foto o espaço vira bloco de inicial, e a grade
              não quebra. A ausência lê como estilo.
     Bebidas  0 de 51 têm foto (o impresso não fotografa bebida) -> a
              categoria se resolve por ícone Lucide, no universo do nicho.
     Caldos   só 4 itens -> a mesma mídia, em escala grande.
   O raio 3px é o mesmo dos botões do site: uma forma só.
   ========================================================================== */

.item--com-midia { display: block; }
.item__midia {
  position: relative;
  width: 132px;
  aspect-ratio: 1;
  margin-bottom: 0.9rem;
  border-radius: 3px;
  overflow: hidden;
  background: var(--b-elevado);
  flex: 0 0 auto;
}
.item__foto {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* o bloco de ausência: mesma caixa, mesma forma, inicial em Anton rebaixada.
   Não é placeholder, é o tratamento de quem não tem foto. */
.item__midia--vazia {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 141, 0, 0.07), transparent 62%),
    var(--b-elevado);
}
.item__inicial {
  font-family: var(--f-display);
  font-size: 3.1rem;
  line-height: 1;
  letter-spacing: var(--track-display);
  color: rgba(255, 141, 0, 0.3);
  user-select: none;
}

/* --- desktop: a mídia vai pro lado, o texto recupera a largura -------------
   No celular ela fica no TOPO de propósito: a foto ao lado espremeria a
   descrição pra ~38 caracteres por linha, metade do confortável. */
@media (min-width: 600px) {
  .item--com-midia { display: flex; align-items: flex-start; gap: clamp(0.9rem, 1.6vw, 1.25rem); }
  .item__midia { width: clamp(84px, 7vw, 104px); margin-bottom: 0; }
  .item__inicial { font-size: 2.3rem; }
  .item__corpo { flex: 1 1 auto; min-width: 0; }
}

/* --- caldos: UMA foto grande do festival, não foto por item ---------------
   Só 1 dos 4 caldos tem foto, e os sabores são rotativos por semana: caixa
   vazia por item leria como erro. A foto do festival cobre o grupo inteiro. */
.grupo__foto { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); border-radius: 3px; overflow: hidden; }
.grupo__foto img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 55%;
  display: block;
}
@media (max-width: 599px) { .grupo__foto img { aspect-ratio: 4 / 3; } }

/* --- bebidas: ícone Lucide de categoria ---------------------------------- */
.grupo__icone {
  display: grid;
  place-items: center;
  width: 2.6rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border: 1px solid var(--line-forte);
  border-radius: 3px;
  color: var(--brasa-viva);
  align-self: center;
}
.grupo__icone svg { width: 1.4rem; height: 1.4rem; }

/* --- o leader de pontos liga NOME -> PREÇO ---------------------------------
   Achado 5 do token sheet: no impresso os pontos são a assinatura e ligam o
   nome ao preço. O ::after é o último filho do flex por natureza, então os
   pontos caíam DEPOIS do preço e a ligação não existia. `order` recoloca. */
.item__topo > .item__nome { order: 0; }
.item__topo::after { order: 1; }
.item__topo > .item__preco { order: 2; }

/* o ícone de categoria acompanha a Anton do título, senão lê como tímido */
.grupo__icone { width: clamp(2.9rem, 3.4vw, 3.7rem); }
.grupo__icone svg { width: 55%; height: 55%; }

/* ==========================================================================
   TOPO DAS PÁGINAS DE CARDÁPIO NO CELULAR (2026-08-26)
   ⚠️ SÓ AQUI: tudo escopado em `.pagina-cardapio`, então a home não muda.

   O que estava errado, medido a 390x844: o brasão renderizava 117px e
   terminava em y=133, enquanto o "Voltar pro site" começava em y=101 — 32px
   de SOBREPOSIÇÃO — e o título "COMIDAS" nascia em y=136, encostado.

   POR QUE só aqui: o brasão do celular ganhou dois tamanhos na home (grande
   na hero, 62px depois), e quem faz a troca é a classe `fora-da-hero`, que um
   marcador invisível carimba quando o topo sai da tela. Esse marcador vive no
   `index.html`; estas páginas não têm hero e portanto NUNCA recebem a classe,
   então o brasão ficava travado no tamanho grande pra sempre. Em vez de
   espalhar o marcador por todas as páginas, aqui o tamanho é fixo: não existe
   hero pra crescer, então não existe estado, e o valor é direto.
   ========================================================================== */
@media (max-width: 767px) {
  /* ⚠️ ESPECIFICIDADE, medida e não suposta: a regra da home é
     `.tem-motion:not(.fora-da-hero) #marca-container`, e o `:not()` conta como
     CLASSE — ou seja (1,2,0). Um `.pagina-cardapio #marca-container` é (1,1,0)
     e PERDE, mesmo estando num arquivo carregado depois. E `.pagina-cardapio`
     mora no <body> enquanto `.tem-motion` mora no <html>, então grudar as duas
     no mesmo seletor nunca casa. O que funciona é encadear ancestral e
     descendente, chegando a (1,2,0) e vencendo pela ordem do arquivo. */
  .tem-motion .pagina-cardapio #marca-container,
  .pre-motion .pagina-cardapio #marca-container,
  .pagina-cardapio #marca-container {
    width: 72px;
  }
  /* o conteúdo do topo desce: o brasão agora acaba em ~80px, e o "Voltar"
     passa a nascer bem abaixo disso, com folga de sobra em vez de colisão */
  .pagina-cardapio .cardapio-topo {
    padding-top: 8.5rem;
  }
}

/* ==========================================================================
   ÍNDICE → SUMÁRIO (2026-08-26)
   Era uma fila de palavras soltas com `flex-wrap`, sem hierarquia e sem
   informação. Vira um sumário de verdade: número, nome, leader de pontos e a
   CONTAGEM DE ITENS da seção.

   POR QUE assim, e não o chip vazado que foi cogitado: as abas
   BEBIDAS/CALDOS, 40px acima, JÁ são retângulos com borda. Chip aqui deixaria
   duas funções diferentes (mudar de página x pular dentro da página) com a
   mesma forma, e o olho perde a distinção. O sumário resolve por hierarquia,
   não por moldura, e de quebra carrega informação: dá pra ver que Espetinhos
   tem 17 e Hambúrgueres tem 2 ANTES de rolar.

   O leader de pontos não é enfeite: a engenharia forense do cardápio impresso
   apontou os leaders como A ASSINATURA do documento (passo = 2x o diâmetro,
   desvio de 0,7px em 29 pontos). Aqui ele reaparece no mesmo papel de ligar
   um rótulo a um número, como já faz na linha de cada item.
   ⚠️ As contagens são LIDAS do próprio HTML por script, nunca digitadas: item
   novo no cardápio atualiza o sumário sozinho na próxima geração.
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.indice {
  display: grid;
  gap: 0;
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) {
  .indice { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); }
}

.indice__link {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding-block: 0.62rem;
  border-top: 1px solid var(--line);
  color: var(--l2);
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}
/* a primeira linha de CADA coluna não leva filete: senão o topo da grade
   ganha duas réguas soltas antes do conteúdo começar */
.indice__link:first-child { border-top: 0; }
@media (min-width: 760px) {
  .indice__link:nth-child(2) { border-top: 0; }
}

.indice__n {
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--l4);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  transition: color 0.25s ease;
}
.indice__nome {
  font-family: var(--f-cond);
  font-weight: 500;
  font-size: var(--t-base);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex: 0 1 auto;
}
/* o leader: mesma receita da linha do item, e por isso a peça fala uma língua só */
.indice__link::after {
  content: "";
  order: 1;
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 1px;
  margin-bottom: 0.3em;
  background: repeating-linear-gradient(90deg, var(--line-forte) 0 2px, transparent 2px 6px);
}
.indice__qtd {
  order: 2;
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--l3);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  transition: color 0.25s ease;
}

.indice__link:hover,
.indice__link:focus-visible { color: var(--l1); border-color: var(--brasa-viva); }
.indice__link:hover .indice__n,
.indice__link:hover .indice__qtd { color: var(--brasa-viva); }

/* --- a seção em que você ESTÁ acende -------------------------------------
   Quem carimba `esta-ativo` é o motor `data-anima` que já existe: cada
   `<section class="grupo">` aponta pro próprio link do sumário. Sem JS novo. */
.indice__link.esta-ativo { color: var(--l1); }
.indice__link.esta-ativo .indice__n,
.indice__link.esta-ativo .indice__qtd { color: var(--brasa-viva); }

/* --- o gesto de chegada -----------------------------------------------------
   Quando o clique no sumário termina a rolagem, um filete de brasa varre sob o
   título da seção de destino e some. Confirma o pouso sem piscar a tela e sem
   mover nada de lugar (é um `::after` de 2px, fora do fluxo).
   `clip-path` e não `scaleX`: a ponta do filete nasce reta em vez de esticada,
   que é o mesmo motivo pelo qual a chapa da assinatura usa clip.
   ⚠️ Respeita `prefers-reduced-motion`: quem pediu menos movimento recebe o
   filete parado, e não o filete varrendo. */
.grupo__cabeca { position: relative; }
.grupo__cabeca::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.55rem;
  height: 2px;
  width: min(220px, 42%);
  background: var(--brasa-viva);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
.grupo.acabou-de-chegar .grupo__cabeca::after {
  animation: chegada 1.5s var(--cubic-66) forwards;
}
@keyframes chegada {
  0%   { clip-path: inset(0 100% 0 0); opacity: 1; }
  38%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  100% { clip-path: inset(0 0 0 0);    opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .grupo.acabou-de-chegar .grupo__cabeca::after { animation: none; clip-path: inset(0 0 0 0); }
}