/* =========================================================================
   Terê Gastrobar · Rua Almirante Barroso, 97 · Rio Vermelho, Salvador

   DISCIPLINA DE COR
   A referência aprovada pelo cliente (massae.com.br) usa três coisas e nada
   mais: um neutro quente de fundo (#EBE4E2), UMA cor profunda que serve ao
   mesmo tempo de fundo de seção e de cor de título (#701B45), e um grafite
   quente no corpo (#2D2A29). É isso que faz aquele site parecer profissional:
   não é a cor escolhida, é a quantidade de cores.

   A versão anterior desta folha tinha cinco cores disputando a página, e um
   campo azul-céu chapado atrás do hero. Foi reduzida ao mesmo esqueleto:

     areia   o neutro quente     <- a praia ao lado e a peça da própria casa
     mar     a cor profunda      <- o azul da logo, aprofundado
     coral   um acento só        <- a madeira das cadeiras e a bromélia

   Céu, manga e bromélia continuam existindo no site, mas por FOTOGRAFIA, que
   é onde eles são verdadeiros, e não como superfície de interface.

   REGRA DE IMAGEM DESTA FOLHA
   Recorte de produto usa object-fit contain em caixa de altura fixa. Foto de
   ambiente usa a proporção da própria fonte. Nada é esticado.
   ========================================================================= */

:root {
  /* --- o neutro quente ---------------------------------------------- */
  --areia:       oklch(93.8% 0.014 78);   /* areia seca da Paciência, e o fundo
                                             da peça de pet friendly da casa,
                                             dessaturado até o calmo da referência */
  --areia-funda: oklch(89.5% 0.017 78);   /* superfície recuada, um degrau abaixo */
  --areia-alta:  oklch(97.2% 0.008 78);   /* cal das ripas do pergolado sob sol */

  /* --- a cor profunda, que é fundo de seção E cor de título ---------- */
  --mar:         oklch(29.5% 0.072 258);  /* azul da logo, aprofundado */
  --mar-fundo:   oklch(21.5% 0.052 258);  /* a seção da noite */

  /* --- o grafite quente do corpo ------------------------------------ */
  --tinta:       oklch(30.0% 0.020 70);   /* madeira molhada das mesas */

  /* --- um acento só -------------------------------------------------- */
  --coral:       oklch(60.0% 0.135 45);   /* cadeira dobrável de madeira e a
                                             bromélia do canteiro. Preenchimento */
  --coral-tinta: oklch(47.5% 0.130 42);   /* o mesmo, escurecido até passar AA */
  --coral-claro: oklch(76.0% 0.125 52);   /* o mesmo, sobre a seção escura */

  /* fios por color-mix, nunca por opacidade no elemento */
  --fio:        color-mix(in oklch, var(--mar) 18%, transparent);
  --fio-forte:  color-mix(in oklch, var(--mar) 40%, transparent);
  --fio-claro:  color-mix(in oklch, var(--areia) 24%, transparent);

  --display: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --corpo:   "Familjen Grotesk", system-ui, -apple-system, sans-serif;

  /* Ritmo. Passos desiguais de propósito, e mais apertados que antes:
     o que fazia a página parecer solta era vão de 9rem entre seções. */
  --e1: 0.5rem;
  --e2: 0.875rem;
  --e3: 1.5rem;
  --e4: 2.25rem;
  --e5: clamp(2.75rem, 5vw, 4.5rem);
  --e6: clamp(3.75rem, 7.5vw, 6.5rem);

  --margem: clamp(1.25rem, 5vw, 4.5rem);
  --largura: 78rem;
  --medida: 58ch;

  --saida: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =====================================================================
   BASE
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Altura real da barra fixa, medida em JS e usada só por .secao (ver
     abaixo). Valor de partida para antes do primeiro cálculo. */
  --nav-alt: 3.4rem;
}

body {
  margin: 0;
  background: var(--areia);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--coral-tinta);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--mar); color: var(--areia); }

.so-leitor {
  position: absolute;
  left: var(--margem);
  top: -4rem;
  z-index: 60;
  padding: var(--e2) var(--e3);
  background: var(--mar);
  color: var(--areia);
  text-decoration: none;
  transition: top 180ms var(--saida);
}
.so-leitor:focus { top: var(--e2); }

/* =====================================================================
   TIPOGRAFIA
   Uma família só no display e nos rótulos, em dois pontos opostos do eixo
   de largura. Anybody vai de wdth 50 a 150, e foi escolhida olhando a logo,
   que é larga e arredondada.
   ===================================================================== */

.titulo, .subtitulo, .rotulo, .menu__titulo, .drink__nome,
.evento__titulo, .estado, .item__preco, .evento__preco, .atalhos__lista,
.botao {
  font-family: var(--display);
}

.titulo {
  font-stretch: 138%;
  font-weight: 800;
  font-size: clamp(1.9rem, 1.15rem + 3.4vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.014em;
  color: var(--mar);
  margin: 0 0 var(--e2);
  text-wrap: balance;
}
.titulo--medio { font-size: clamp(1.55rem, 1.1rem + 2vw, 2.4rem); }
.titulo--claro { color: var(--areia-alta); }

/* margem de cima, exceto quando é o primeiro elemento do bloco: em "Onde é" o
   segundo subtítulo ("Fale com a casa") vinha colado na lista de pagamento
   acima dele, porque .lista-simples não tem margem embaixo. */
.subtitulo {
  font-stretch: 124%;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--mar);
  margin: var(--e4) 0 var(--e2);
}
.subtitulo:first-child { margin-top: 0; }

/* O rótulo é o extremo oposto do eixo: estreito, tracking aberto. Rima com o
   "gastrobar" da logo, que é uma linha de apoio espaçada sob a palavra larga. */
.rotulo {
  font-stretch: 86%;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral-tinta);
  margin: 0 0 var(--e2);
}
.rotulo--claro { color: var(--coral-claro); }

.prosa {
  max-width: var(--medida);
  margin: 0 0 var(--e3);
  color: color-mix(in oklch, var(--tinta) 84%, var(--areia));
}
.prosa:last-child { margin-bottom: 0; }
.prosa--curta { max-width: 38ch; }
.prosa--clara { color: color-mix(in oklch, var(--areia) 80%, var(--mar-fundo)); }

.nota {
  font-size: 0.85rem;
  line-height: 1.5;
  color: color-mix(in oklch, var(--tinta) 68%, var(--areia));
  max-width: 44ch;
  margin: var(--e3) 0 0;
}

.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: 0.1rem 0; }
.lista-simples a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;   /* alvo de toque */
}

/* WhatsApp, Instagram, Pix, cartão: ícone desenhado na casa, não pacote
   genérico. O ícone só reforça, o texto ao lado é que identifica. */
.lista-simples--icone li { display: flex; align-items: center; gap: 0.65rem; }
.lista-simples--icone a { gap: 0.65rem; }
.lista-simples--icone svg { flex: none; color: var(--coral-tinta); }

/* =====================================================================
   LAYOUT
   ===================================================================== */

.faixa {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

/* Um offset só, medido, não dois somados. Antes havia scroll-padding-top no
   html (4.5rem) SOMADO a scroll-margin-top aqui (4rem): a página reservava
   quase 8.5rem acima de cada seção, mais que a barra em si, e um clique num
   atalho pousava ainda dentro da seção anterior. Lia como "clicou errado". */
.secao {
  padding-block: var(--e6);
  scroll-margin-top: var(--nav-alt);
}

/* cabeça de seção: rótulo, título e prosa num bloco apertado, sempre no
   mesmo eixo à esquerda */
.cabeca { max-width: 46rem; margin-bottom: var(--e5); }

/* Divisor de onda. É o motivo condutor e é estrutural, não textura: mesmo
   traço da logo e mesmo desenho das tiras de tecido do pergolado. */
.divisor { color: var(--fio-forte); line-height: 0; }
.divisor svg { width: 100%; height: clamp(1.75rem, 3.2vw, 3rem); }

/* =====================================================================
   HERO
   Reduzido a propósito, a pedido do cliente: só a marca, o drink e duas
   ações. Endereço, horário e faixa de preço migraram para dentro do site
   (Cardápio e Onde é), em vez de somem: só saíram da primeira dobra.
   ===================================================================== */

.hero {
  position: relative;
  padding: var(--e4) var(--margem) var(--e5);
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(70% 55% at 72% 34%,
      color-mix(in oklch, var(--coral) 13%, transparent), transparent 68%),
    var(--areia);
}

.hero__grade {
  position: relative;
  display: grid;
  gap: var(--e4);
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
}

/* --- vitrine de drinks ---------------------------------------------------
   Os recortes vieram com alfa de verdade, então o copo fica na frente do anel
   sem carregar retângulo. A caixa tem altura própria e as peças são absolutas
   dentro dela: assim uma peça mais alta não empurra o hero para fora da dobra,
   e contain garante que cada uma apareça inteira, na proporção dela.

   Nenhuma peça leva nome ao lado, e isso é decisão de honestidade: são imagens
   geradas, não são fotos dos drinks da casa. Legendar com um nome do cardápio
   seria publicar foto falsa de produto real. A barra embaixo carrega o preço,
   que é verdade e é o que a pessoa quer saber.                              */

.vitrine { position: relative; display: grid; place-items: center; z-index: 2; }

.vitrine__pecas {
  position: relative;
  z-index: 2;
  width: 100%;
  height: min(42svh, 20rem);
}
@media (min-width: 62rem) { .vitrine__pecas { height: min(62svh, 30rem); } }

.vitrine__peca {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  scale: 0.94;
  translate: 0 0.9rem;   /* entra subindo, sai afundando: não é só crossfade */
  filter: drop-shadow(0 1.6rem 2.4rem color-mix(in oklch, var(--mar) 30%, transparent));
  transition: opacity 0.8s var(--saida), scale 1.4s var(--saida), translate 1s var(--saida);
}
.vitrine__peca.esta-ativa { opacity: 1; scale: 1; translate: 0 0; }

/* Só os pontos, sem legenda. O cliente pediu o hero mais clean, e o preço
   do drink já aparece perto do cardápio, não precisa duplicar aqui. */
.vitrine__barra {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--e2);
}

.vitrine__pontos { display: flex; gap: 0.4rem; }
.vitrine__ponto {
  position: relative;
  width: 1.75rem;
  height: 2px;
  padding: 0;
  border: 0;
  background: var(--fio-forte);
  cursor: pointer;
  transition: background 0.4s var(--saida);
}
.vitrine__ponto::before {
  /* área de toque de 44px sem engordar o traço */
  content: "";
  position: absolute;
  inset: -1.25rem -0.2rem;
}
.vitrine__ponto:hover { background: var(--mar); }
.vitrine__ponto[aria-selected="true"] { background: var(--coral); }

/* --- texto do hero ------------------------------------------------------
   Só a marca e as duas ações. No celular, centralizado: nada preso a canto
   de tela. No desktop, à esquerda do drink, como o resto do site. */

.hero__texto { position: relative; z-index: 1; align-self: center; }

@media (max-width: 61.99rem) {
  .hero__texto { display: flex; flex-direction: column; align-items: center; }
  .acoes { justify-content: center; }
}

.hero__marca { margin: 0 0 var(--e4); }
.hero__logo { width: clamp(13rem, 52vw, 23rem); height: auto; }

/* Estado ao vivo. Mora perto dos Horários agora, não mais no hero: ver
   #onde. A regra continua a mesma — o JS nunca escreve que a casa está
   fechada, porque o dono não confirmou que ela fecha segunda a quarta. */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--e2);
  font-stretch: 104%;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mar);
}
.estado::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--fio-forte);
}
.estado[data-estado="aberto"]::before { background: var(--coral); }

/* Faixa de preço: mora na cabeça do Cardápio agora, ver #cardapio. */
.faixa-preco {
  margin: var(--e2) 0 0;
  font-size: 0.95rem;
  color: color-mix(in oklch, var(--tinta) 74%, var(--areia));
}

.acoes { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0 var(--e3);
  border: 1px solid var(--fio-forte);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mar);
  transition: background-color 0.3s var(--saida), color 0.3s var(--saida);
}
.botao:hover { background: color-mix(in oklch, var(--mar) 8%, transparent); }
.botao--principal {
  background: var(--mar);
  border-color: var(--mar);
  color: var(--areia-alta);
}
.botao--principal:hover { background: var(--mar-fundo); }
.botao--fantasma { border-color: transparent; padding-inline: 0.25rem; }
.botao--fantasma:hover { background: none; color: var(--coral-tinta); }

@media (min-width: 62rem) {
  .hero__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    align-items: center;
    gap: var(--e5);
  }
  /* a ordem do DOM é a do celular, drink primeiro, como o cliente pediu.
     Aqui o grid recompõe para marca à esquerda e drink à direita. */
  .hero__texto { grid-column: 1; grid-row: 1; }
  .vitrine     { grid-column: 2; grid-row: 1; }
}

/* =====================================================================
   ATALHOS
   Fora do .hero de propósito: sticky não gruda dentro de pai com overflow
   clip, e no projeto anterior a barra nunca colou por isso.
   ===================================================================== */

.atalhos {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklch, var(--areia-alta) 94%, var(--mar));
  border-block: 1px solid var(--fio);
  backdrop-filter: blur(8px);
  isolation: isolate;
}
/* no celular cabem quatro dos seis itens: este véu é a pista de que há mais */
.atalhos::after {
  content: "";
  position: absolute;
  inset-block: 0;
  right: 0;
  width: var(--margem);
  pointer-events: none;
  background: linear-gradient(to right, transparent,
    color-mix(in oklch, var(--areia-alta) 94%, var(--mar)));
}
@media (min-width: 52rem) { .atalhos::after { content: none; } }

.atalhos__lista {
  display: flex;
  gap: var(--e3);
  margin: 0;
  padding: 0 var(--margem);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--margem);
}
.atalhos__lista::-webkit-scrollbar { display: none; }
.atalhos__lista li { scroll-snap-align: start; }
.atalhos__lista a {
  display: block;
  padding: var(--e2) 0;
  font-stretch: 90%;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--mar);
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s var(--saida);
}
.atalhos__lista a:hover { border-bottom-color: var(--fio-forte); }
/* estado real de navegação, posto pelo scrollspy: sem isto a barra seria
   índice decorativo, que é antipadrão declarado */
.atalhos__lista a[aria-current] {
  border-bottom-color: var(--coral);
  color: var(--coral-tinta);
}

/* =====================================================================
   O ESPAÇO
   Vitrine de destaque: um canto da casa por vez, grande, com legenda. Sem
   JS os quatro ficam empilhados, cada um com sua foto e seu texto — um
   fallback funcional, não um carrossel quebrado. Com JS (módulo 6b de
   site.js) viram slides de verdade, um visível por vez, com setas e pontos.
   ===================================================================== */

/* Módulo grande e centrado, separado do bloco de texto acima (que continua
   à esquerda, no eixo do resto do site) — o mesmo tratamento do cardápio: um
   cartão central chamativo, não mais um item preso à margem esquerda. */
.vitrine-espaco {
  position: relative;
  max-width: 30rem;
  margin-inline: auto;
}

.vitrine-espaco__palco {
  display: flex;
  flex-direction: column;
  gap: var(--e6);
}

.vitrine-espaco__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  text-align: center;
}

/* Grande de propósito: é o chamariz da página. */
.vitrine-espaco__slide .clipe__quadro { width: 100%; max-width: 24rem; }

.vitrine-espaco__legenda { max-width: 32ch; }
.vitrine-espaco__legenda h3 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-stretch: 122%;
  font-weight: 800;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.006em;
  color: var(--mar);
}
.vitrine-espaco__legenda p {
  margin: 0 auto;
  color: color-mix(in oklch, var(--tinta) 84%, var(--areia));
}

/* controles só existem quando o JS liga o carrossel: sem JS eles não fariam
   nada, e botão morto é pior que botão ausente */
.vitrine-espaco__controles { display: none; }

/* --- modo carrossel, ligado pelo JS ---------------------------------- */

.vitrine-espaco.carrossel-ativo .vitrine-espaco__palco {
  position: relative;
  display: block;
  /* reserva a altura do maior slide, pra troca não pular o layout: vídeo
     grande (24rem / proporção 440:782) mais legenda de até três linhas */
  min-height: 48rem;
}

.vitrine-espaco.carrossel-ativo .vitrine-espaco__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--saida);
}
.vitrine-espaco.carrossel-ativo .vitrine-espaco__slide.esta-ativa {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.vitrine-espaco.carrossel-ativo .vitrine-espaco__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  margin-top: var(--e4);
}
.vitrine-espaco__seta {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--fio-forte);
  background: none;
  color: var(--mar);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s var(--saida);
}
.vitrine-espaco__seta:hover { background: color-mix(in oklch, var(--mar) 8%, transparent); }

.vitrine-espaco__pontos { display: flex; gap: 0.4rem; }
.vitrine-espaco__ponto {
  position: relative;
  width: 1.75rem;
  height: 2px;
  padding: 0;
  border: 0;
  background: var(--fio-forte);
  cursor: pointer;
  transition: background 0.4s var(--saida);
}
.vitrine-espaco__ponto::before {
  content: "";           /* área de toque de 44px sem engordar o traço */
  position: absolute;
  inset: -1.25rem -0.2rem;
}
.vitrine-espaco__ponto:hover { background: var(--mar); }
.vitrine-espaco__ponto[aria-selected="true"] { background: var(--coral); }

/* Sem barra de controle nativa. O clipe toca sozinho quando entra na tela
   (ver módulo do carrossel em site.js); a capa cobre o vídeo até ele estar
   de fato tocando, pra nunca mostrar um quadro em branco. */
.clipe__quadro {
  position: relative;
  width: 100%;
  aspect-ratio: 440 / 782;   /* proporção da fonte, sem corte */
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--areia-funda);
  display: block;
}
.clipe__video,
.clipe__capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.clipe__video { opacity: 0; transition: opacity 0.5s var(--saida); }
.clipe__quadro.esta-tocando .clipe__video { opacity: 1; }
.clipe__quadro.esta-tocando .clipe__capa { opacity: 0; }
.clipe__capa { transition: opacity 0.5s var(--saida); }

/* =====================================================================
   DRINKS COM NOME DO BAIRRO
   ===================================================================== */

.bairro { position: relative; }

.bairro__lista {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--fio);
}
.drink { padding-block: var(--e3); border-bottom: 1px solid var(--fio); }
.drink__nome {
  margin: 0 0 0.15rem;
  font-stretch: 128%;
  font-weight: 800;
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.7rem);
  line-height: 1.05;
  letter-spacing: -0.008em;
  color: var(--mar);
}
.drink__receita { margin: 0 0 0.15rem; }
.drink__ref { margin: 0; max-width: 40ch; color: var(--coral-tinta); font-size: 0.9rem; }

@media (min-width: 52rem) {
  .bairro__lista { grid-template-columns: 1fr 1fr; column-gap: var(--e5); }
}

/* =====================================================================
   CARDÁPIO
   Cada seção do cardápio da casa (Entradas, Pizzas, Bebidas...) vira um
   cartão independente, destacável — a ideia de um cardápio de mesa de
   verdade, um bloco por vez, não um texto corrido. A faixa do cabeçalho
   troca de cor entre comida e bebida, só essas duas: reabrir uma cor por
   categoria era voltar à paleta de cinco cores que a crítica já reprovou.
   ===================================================================== */

/* Navegação de categoria. Sem JS é uma lista de âncoras simples, rolando até
   o cartão empilhado (fallback funcional). Com JS (módulo 6 de site.js) vira
   aba de verdade: clicar mostra só aquela categoria, o resto some. */
.cardapio__abas {
  margin: 0 0 var(--e4);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.cardapio__abas::-webkit-scrollbar { display: none; }
.cardapio__abas ul {
  display: flex;
  /* "safe center": centraliza quando cabe, mas sem o efeito colateral clássico
     de "justify-content: center" dentro de container com scroll — sem o
     "safe", a sobra que ultrapassa de um lado fica fora do alcance do
     scroll, e a pessoa nunca chega nas primeiras abas. Com overflow, cai
     pra start e tudo continua alcançável. */
  justify-content: safe center;
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 100%;
}
.cardapio__abas li { flex: 0 0 auto; scroll-snap-align: start; }
.cardapio__abas a {
  display: block;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--fio-forte);
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mar);
  white-space: nowrap;
  transition: background-color 0.25s var(--saida), color 0.25s var(--saida);
}
.cardapio__abas a:hover { background: color-mix(in oklch, var(--mar) 8%, transparent); }
.cardapio__abas a[aria-selected="true"] {
  background: var(--mar);
  border-color: var(--mar);
  color: var(--areia-alta);
}

.cardapio__corpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e4);
  align-items: start;
}
@media (min-width: 40rem) {
  .cardapio__corpo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
  .cardapio__corpo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Modo aba, ligado pelo JS (.abas-ativas). Uma categoria por vez, num
   cartão central, mais simples de navegar que a grade inteira à vista. */
.cardapio__corpo.abas-ativas {
  display: block;
  max-width: 38rem;
  margin-inline: auto;   /* centralizado na faixa, não preso à esquerda */
}
.cardapio__corpo.abas-ativas .menu { margin: 0; }
.cardapio__corpo.abas-ativas .menu[hidden] { display: none; }

.menu {
  display: flex;
  flex-direction: column;
  background: var(--areia-alta);
  border: 1px solid var(--fio);
  box-shadow: 0 0.5rem 1.25rem color-mix(in oklch, var(--mar) 8%, transparent);
}

.menu__faixa { padding: var(--e2) var(--e3); background: var(--mar); }
.menu--bebida .menu__faixa { background: var(--coral-tinta); }

.menu__titulo {
  margin: 0;
  font-stretch: 116%;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--areia-alta);
}

.menu__corpo { padding: var(--e3); flex: 1; }
.menu__nota {
  margin: 0 0 var(--e2);
  font-size: 0.84rem;
  font-style: italic;
  color: color-mix(in oklch, var(--tinta) 68%, var(--areia));
}
.menu__lista { margin: 0; padding: 0; list-style: none; }

.item { padding-block: var(--e2); border-bottom: 1px solid var(--fio); }
.item:last-child { border-bottom: 0; padding-bottom: 0; }
.item:first-child { padding-top: 0; }
.item__linha {
  display: flex;
  gap: var(--e2);
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
}
.item__nome { font-weight: 600; color: var(--mar); }
.item__preco {
  flex: 0 0 auto;
  font-stretch: 92%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mar);
}
.item__desc {
  margin: 0.1rem 0 0;
  max-width: 52ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: color-mix(in oklch, var(--tinta) 74%, var(--areia));
}

/* =====================================================================
   A SEMANA
   Escura de propósito, e é a mesma cor profunda da marca, não um preto
   qualquer. Metade do acervo é fotografia noturna de verdade, e foto
   noturna solta em fundo areia abre buraco no meio da página.
   ===================================================================== */

.semana { background: var(--mar-fundo); color: var(--areia); }

.semana__lista { display: grid; gap: var(--e4); margin: 0; padding: 0; list-style: none; }

.evento { padding-top: var(--e3); border-top: 1px solid var(--fio-claro); }
.evento__quando {
  margin: 0 0 var(--e1);
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral-claro);
}
.evento__titulo {
  margin: 0 0 0.2rem;
  font-stretch: 126%;
  font-weight: 800;
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.8rem);
  line-height: 1.05;
  color: var(--areia-alta);
}
.evento__chamada { margin: 0; color: color-mix(in oklch, var(--areia) 84%, var(--mar-fundo)); }
.evento__preco {
  display: flex;
  align-items: baseline;
  gap: var(--e1);
  margin: var(--e2) 0 0.2rem;
  font-stretch: 114%;
  font-weight: 800;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1;
  color: var(--coral-claro);
}
.evento__sufixo {
  font-family: var(--corpo);
  font-size: 0.85rem;
  font-weight: 400;
  color: color-mix(in oklch, var(--areia) 70%, var(--mar-fundo));
}
.evento__detalhe {
  margin: 0;
  font-size: 0.9rem;
  color: color-mix(in oklch, var(--areia) 72%, var(--mar-fundo));
}
.evento__foto { margin: var(--e3) 0 0; }
.evento__foto img { width: 100%; height: auto; }

@media (min-width: 52rem) {
  .semana__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); }
  /* A GastroQuinta tem foto e preço e ocupa a linha inteira: quebra a
     monotonia de quatro blocos iguais.
     A foto fica ABSOLUTA e não em coluna de grid. Atravessando linhas, a
     altura natural da imagem era distribuída pelas linhas e abria 140px de
     vão entre o título e a chamada. overflow hidden não resolve, porque o
     que estica a linha é a contribuição de min-content da imagem. */
  .evento--gastroquinta {
    grid-column: 1 / -1;
    position: relative;
    padding-right: calc(38% + var(--e5));
    min-height: 17rem;
  }
  .evento--gastroquinta .evento__foto {
    position: absolute;
    right: 0;
    top: var(--e3);
    bottom: 0;
    width: 38%;
    margin: 0;
    overflow: hidden;
  }
  .evento--gastroquinta .evento__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
  }
}

/* =====================================================================
   PET FRIENDLY
   ===================================================================== */

.pet__grade { display: grid; gap: var(--e4); align-items: center; }
.pet__foto { margin: 0; }
.pet__foto img { width: 100%; max-width: 26rem; height: auto; }

@media (min-width: 52rem) {
  .pet__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr); gap: var(--e5); }
  .pet__foto { justify-self: end; }
}

/* =====================================================================
   ONDE É
   ===================================================================== */

.onde__grade { display: grid; gap: var(--e5); }
.onde .titulo--medio { font-size: clamp(1.45rem, 1.15rem + 0.95vw, 1.95rem); }

.horarios { margin: 0; }
.horarios__par {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--fio);
}
.horarios dt { font-weight: 600; color: var(--mar); }
.horarios dd { margin: 0; font-variant-numeric: tabular-nums; }

@media (min-width: 52rem) {
  .onde__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); }
}

/* =====================================================================
   RODAPÉ
   ===================================================================== */

.rodape {
  background: var(--mar);
  color: var(--areia);
  padding-block: var(--e5);
}
/* logo real da casa, não texto imitando a logo. Versão branca sobre
   transparente, luminância convertida em alfa, aparada da mesma tarja
   que a versão marinho do hero. */
.rodape__logo { width: clamp(9rem, 26vw, 12rem); height: auto; margin-bottom: var(--e3); }
.rodape__linha { margin: 0 0 var(--e2); }
.rodape__nota {
  margin: 0;
  max-width: 44ch;
  font-size: 0.82rem;
  color: color-mix(in oklch, var(--areia) 70%, var(--mar));
}

/* espaço para o botão fixo não cobrir o fim da página. Condicional porque
   sem número de WhatsApp confirmado o build não gera o botão. */
body:has(.zap-fixo) .rodape { padding-bottom: calc(var(--e5) + 4.5rem); }
@media (min-width: 52rem) { body:has(.zap-fixo) .rodape { padding-bottom: var(--e5); } }

/* =====================================================================
   BOTÃO FIXO DE WHATSAPP
   Some enquanto o cardápio está na tela, onde correria por cima da faixa de
   preço, que é justamente o que a pessoa foi ler.
   ===================================================================== */

.zap-fixo {
  position: fixed;
  right: var(--e3);
  bottom: var(--e3);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 var(--e3);
  background: var(--mar);
  color: var(--areia-alta);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0.6rem 1.6rem color-mix(in oklch, var(--mar) 32%, transparent);
  transition: transform 260ms var(--saida), opacity 200ms var(--saida);
}
.zap-fixo--oculto { transform: translateY(150%); opacity: 0; }

/* =====================================================================
   MOVIMENTO
   ===================================================================== */

/* .revela nasce VISÍVEL. Só esconde sob html.anima, que o site.js liga depois
   de montar o observador. O contrário disso era um P0: bastava o script não
   carregar, por rede, bloqueador ou CSP, e cardápio, drinks e horários ficavam
   em opacity 0 para sempre. Nenhum print pega isso, porque print roda com JS. */
.revela { transition: opacity 620ms var(--saida), transform 620ms var(--saida); }
.anima .revela { opacity: 0; transform: translateY(1rem); }
.anima .revela.foi-revelado { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .anima .revela { opacity: 1; transform: none; }
  /* .zap-fixo--oculto continua escondendo o botão sobre o cardápio: a regra
     genérica de transition-duration 0.01ms logo acima já torna a troca
     instantânea, sem deslizar. "Menos movimento" não é "nunca esconder". */
}