:root {
  /* O claro da paleta dela (02/10), com a saturação baixada de 100% pra
     75% em 05/10. A cor antiga tinha R255 G254 B217: um amarelo PURO, que
     só parecia claro por estar com 93% de luz. Saturação máxima é justo o
     que tela de celular amplifica — ela viu a página virar "amarelo
     manteiga" no telefone e normal no notebook.

     Mesmo matiz (58°) e mesma luz (93%): muda só a saturação, e a
     diferença entre os canais cai de 38 pra 28. Continua o creme quente da
     casa; abaixo de 55% viraria um off-white qualquer.

     Custo medido: o texto mais fraco sobre ele vai de 5,91 pra 5,69 de
     contraste. O mínimo é 4,5. */
  --papel:         #faf9de;
  --marrom:        #4f2612;  /* o marrom da paleta dela (02/10) */
  --marrom-forte:  #391b0d;  /* títulos e o que precisa pesar */
  --marrom-fraco:  #7b5c44;  /* apoio, rótulo, o que vem em segundo */
  --marrom-leve:   #f1edc9;  /* linha, campo, fundo de bloco */
  --creme-fraco:   #cec2a1;  /* o apoio DENTRO do marrom */
  --alerta:        #b2301f;  /* lotado — convive com o marrom sem brigar */
  --respiro:       clamp(1.25rem, 4vw, 3rem);
  --margem:        clamp(1rem, 5vw, 5.5rem);
  --curva:         14px;
}

* { box-sizing: border-box; }

/* O !important aqui não é preguiça, é a correção de um bug real.
   `[hidden] { display: none }` mora na folha do NAVEGADOR, e qualquer
   regra de autor ganha dela — não por especificidade, por origem. Então
   `.reservas-form { display: grid }` fazia o formulário continuar na tela
   depois de `form.hidden = true`.

   Na prática: o cliente mandava a reserva, dava certo, e a confirmação
   aparecia EMBAIXO do formulário ainda aberto. Conferido no navegador —
   743px de formulário visível com o hidden marcado.

   Escondido é escondido; nenhum display de autor deve furar isso. Vale
   pro #vagas e #form-erro também, que hoje escapam por
   sorte (não têm regra de display) e quebrariam no dia em que ganharem
   uma. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

:root {
  --fonte-titulo: 'Anton', 'Arial Narrow', 'Haettenschweiler', sans-serif;
  --peso-titulo: 400;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--marrom);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { 
  max-width: 100%; display: block; 
}

:focus-visible {
  outline: 3px solid var(--marrom);
  outline-offset: 3px;
  border-radius: 4px;
}

.titulo-display {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: clamp(2.3rem, 6.2vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--marrom-forte);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.titulo-display em {
  font-style: normal;
  color: var(--marrom);
}

.sobrancelha {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marrom-fraco);
  margin-bottom: 1rem;
}

.apoio {
  margin: 0 0 1.75rem;
  max-width: 46ch;
  color: var(--marrom);
}
.apoio strong { 
  font-weight: 800; color: var(--marrom-forte); 
}

.apoio-menor { 
  font-size: 0.95rem; color: var(--marrom-fraco); 
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  border: 2px solid var(--marrom);
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-primario { 
  background: var(--marrom); color: var(--papel); 
}

.btn-primario:hover { 
  background: var(--marrom-forte); border-color: var(--marrom-forte); 
}

.btn-contorno { 
  background: transparent; color: var(--marrom); 
}

.btn-contorno:hover { 
  background: var(--marrom-leve); 
}

.btn:active { 
  transform: translateY(1px); 
}

.btn[disabled] { 
  opacity: .45; cursor: not-allowed; transform: none; 
}

.btn-largo { 
  width: 100%; padding: 1.1rem; font-size: 1.05rem; 
}

.btn-topo { 
  padding: 0.6rem 1.35rem; font-size: 0.92rem; 
}

/* ---------- topo ---------- */
/* FIXO e não sticky. Sendo sticky ele ficava NO FLUXO, e o espaço que
   ocupava virava uma faixa clara entre ele e o hero — a página começava
   com uma tira de papel em cima da foto da fachada. Fora do fluxo, o hero
   começa em y=0 e o topo flutua por cima dele.
   O respiro que o texto do hero precisa pra não nascer embaixo do topo já
   existe: é o --topo-hero, 200px no desktop e 112px no celular. */
.topo {
  position: fixed;
  top: clamp(8px, 1.4vw, 16px);
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: min(100% - 2 * var(--margem), 72rem);
  margin: 0 auto;
  padding: 0.45rem 0.45rem 0.45rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--marrom) 14%, transparent);
  border-radius: 999px;
  background: var(--papel);
  box-shadow: 0 6px 26px rgba(79, 38, 18, .12);
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  margin-right: auto;
}
.marca-desenho { 
  height: 27px; width: auto; 
}

.marca-escrita { 
  height: 19px; width: auto; 
}

/* O "art." em Poppins só entra quando o recorte da logo não carregou. A
   escrita deles é desenho, não fonte — então ela só serve de rede. */
.marca-nome {
  font-weight: 900;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: var(--marrom);
}
.marca-escrita + .marca-nome { 
  display: none; 
}

.topo-menu { 
  display: flex; gap: 1.5rem; font-size: 0.95rem; 
}

.topo-menu a {
  color: var(--marrom);
  text-decoration: none;
  font-weight: 500;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
}
.topo-menu a:hover { 
  border-bottom-color: var(--marrom); 
}

main section[id] { 
  scroll-margin-top: 5rem; 
}

/* ---------- a abertura: hero + faixa ---------- */

/* Os dois ocupam uma tela e a faixa fecha embaixo. O hero estica (flex:1)
   e a faixa fica do tamanho dela — assim o ponto onde a faixa aparece não
   depende de quanto texto o hero tem nem do tamanho da tela.

   O vh fica de rede pra navegador que não conhece svh; a linha de baixo
   sobrescreve onde svh existe. */
.abertura {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.abertura > .hero { flex: 1 1 auto; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: clamp(7rem, 17vw, 12.5rem) var(--margem) clamp(3rem, 5.5vw, 4.25rem);
  background: var(--marrom);
  color: var(--papel);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('imgs/fachada.jpg') center 10% / cover no-repeat;
  opacity: .92;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(79, 38, 18, .09) 0%,
    rgba(79, 38, 18, .15) 18%,
    rgba(79, 38, 18, .68) 31%,
    rgba(79, 38, 18, .68) 80%,
    rgba(79, 38, 18, .63) 100%);
  pointer-events: none;
}

.hero .sobrancelha { 
  margin-bottom: 0.5rem; color: var(--papel); 
}

.hero .apoio { 
  margin: 0 0 1.75rem; max-width: 46ch; color: var(--creme-fraco); 
}

.hero-botoes { 
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; 
} 

.hero .btn-primario {
  background: var(--papel);
  border-color: var(--papel);
  color: var(--marrom-forte);
}
.hero .btn-primario:hover {
  background: var(--marrom-leve);
  border-color: var(--marrom-leve);
}
.hero .btn-contorno { 
  color: var(--papel); border-color: var(--papel); 
}

.hero .btn-contorno:hover { 
  background: rgba(250, 249, 222, .14); 
}

.hero :focus-visible { 
  outline-color: var(--papel); 
}

.hero-palco {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 62rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.titulo-hero {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: clamp(2.35rem, 6vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  /* Frase longa quebrada pelo navegador deixa a última linha com uma
     palavra solta. `balance` reparte as linhas por igual. */
  text-wrap: balance;
  color: var(--papel);
}

@keyframes sobe-e-aparece {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.titulo-hero   { 
  animation: sobe-e-aparece .55s ease-out backwards; 
}

.hero .apoio { 
  animation: sobe-e-aparece .5s ease-out .54s backwards; 
}
.hero-botoes { 
  animation: sobe-e-aparece .5s ease-out .64s backwards; 
}

/* ---------- a faixa rolante ---------- */

/* Logo abaixo do hero: a foto escura termina, a faixa chapada de marrom
   segura o escuro por um instante, e "A casa" abre no claro. É um degrau,
   não um corte. */
.faixa {
  overflow: hidden;
  padding: 0.7rem 0;
  background: var(--marrom);
  color: var(--papel);
  border-block: 1px solid color-mix(in srgb, var(--papel) 18%, transparent);
}
/* `max-content` é o que faz a conta fechar: o trilho fica do tamanho das
   DUAS fitas somadas, então -50% é exatamente uma fita. Com largura em
   porcentagem isso não fecharia e o recomeço daria salto. */
.faixa-trilho {
  display: flex;
  width: max-content;
  animation: fita-anda 32s linear infinite;
}
/* Parar no hover é o que torna a faixa legível: texto em movimento
   constante não se lê, ele se reconhece. Quem quiser ler, para. */
.faixa:hover .faixa-trilho,
.faixa:focus-within .faixa-trilho { animation-play-state: paused; }

.faixa-fita {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.faixa-fita li {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 3vw, 2.2rem);
  padding-left: clamp(1.1rem, 3vw, 2.2rem);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: clamp(0.92rem, 1.7vw, 1.3rem);
  line-height: 1;
  letter-spacing: 0.015em;
  white-space: nowrap;
}
/* A maçã dela no lugar da estrelinha da referência. A marca é desenho
   dela: entra como está, só na versão creme, que é a que existe pra fundo
   escuro. */
.faixa-fita li::after {
  content: '';
  flex: none;
  width: 1.15em;
  height: 1.1em;
  background: url('imgs/artesanos-marca-creme.png') center / contain no-repeat;
  opacity: .9;
}

/* O passo é a largura de UMA fita, medida e escrita pelo JS. Em
   porcentagem só funcionaria com exatamente duas fitas; como o JS clona
   quantas forem precisas pra cobrir telas largas, a conta tem que ser em
   px. O -50% fica de rede pra se o JS não rodar. */
@keyframes fita-anda {
  to { transform: translateX(calc(var(--passo, 50%) * -1)); }
}

/* ---------- a casa ---------- */

.casa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(3.5rem, 7vw, 6rem) var(--margem);
  border-top: 1px solid var(--marrom-leve);
}

.casa::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: url('imgs/papel-ladrilho.png') repeat;
  background-size: 430px auto;
  transform: rotate(-4deg);
  opacity: .1;
  pointer-events: none;
}

.casa-texto { 
  min-width: 0; 
}

.casa .apoio { 
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem); 
}

/* A pílula. A borda era --marrom-leve (#f1edc9) sobre um fundo de papel a
   85%: praticamente a mesma cor, então o contorno não existia. Agora é
   marrom de verdade, fraco, que desenha a forma sem pesar.

   Saiu o backdrop-filter. Ele borrava os 15% de ladrilho que passam por
   baixo — efeito que ninguém enxerga — e em troca custava duas coisas
   reais: vidro fosco, que ela já recusou uma vez no topo, e captura de
   tela voltando em branco, que já me enganou num diagnóstico hoje. */
.numeros {
  display: inline-flex;
  /* `nowrap` e não `wrap`. Com wrap, entre ~900 e ~1150px de janela as
     duas metades caíam uma embaixo da outra DENTRO da pílula — e com raio
     de 999px numa caixa de 220px de altura aquilo virava um borrão oval.
     Só não aparecia porque eu media em 1180 e em 375, e o defeito mora
     entre os dois. As metades encolhem no lugar de quebrar. */
  flex-wrap: nowrap;
  align-items: stretch;
  border: 2px solid color-mix(in srgb, var(--marrom) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  overflow: hidden;
}
/* `align-content: center` é o que ela pediu: os dois rótulos têm alturas
   diferentes ("de smash em cada clássico" cabe em duas linhas, "pessoas
   acompanham a gente" ia pra três), e sem isso o conteúdo encostava no
   topo e a metade mais curta ficava boiando.

   O respiro lateral subiu junto: com raio de 999px as pontas são curvas, e
   o texto chegava perto demais da curva. */
.numero {
  display: grid;
  min-width: 0;
  align-content: center;
  justify-items: center;
  gap: 0.3rem;
  /* O respiro lateral abre e fecha com a janela: entre 900 e 1000px as
     metades apertam e, com 3vw, sobrava pouco pro rótulo — o mais longo
     ia pra três linhas enquanto o outro ficava em duas. Com 2.2vw os dois
     ficam em duas nessa faixa também. */
  padding: 1.1rem clamp(1rem, 2.2vw, 2.25rem);
  text-align: center;
}
.numero + .numero { 
  border-left: 1px solid color-mix(in srgb, var(--marrom) 18%, transparent); 
}
.numero strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 3.3vw, 2.5rem);
  font-weight: var(--peso-titulo);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--marrom-forte);
}
/* 19ch e não 16: a 16 o rótulo mais longo quebrava em TRÊS linhas e o
   outro em duas, e era isso que deixava a pílula torta. Com 19 os dois
   ficam em duas. O margin-top saiu porque o gap do grid já separa. */
.numero span {
  display: block;
  max-width: 19ch;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--marrom-fraco);
}

.casa-fotos {
  position: relative;
  padding: 0 0 clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 3.5rem);
}
.casa-foto {
  margin: 0;
  overflow: hidden;
  border-radius: var(--curva);
  background: var(--marrom-forte);
}
.casa-foto img { 
  width: 100%; height: 100%; object-fit: cover; display: block; 
}
.casa-foto-grande { 
  aspect-ratio: 1 / 1; 
}
.casa-foto-grande img { 
  object-position: center 42%; 
}
.casa-foto-pequena {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1 / 1;
  border: 6px solid var(--papel);
  border-radius: calc(var(--curva) + 4px);
}

.casa-foto.sem-foto { 
  position: relative; background: var(--marrom-leve); 
}
.casa-foto.sem-foto img { 
  display: none; 
}
.casa-foto.sem-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('imgs/artesanos-ladrilho.png') repeat;
  background-size: 150px auto;
  opacity: .3;
}
.casa-foto-pequena.sem-foto { 
  position: absolute; 
}

/* ---------- o mascote ---------- */

/* Dois lugares só, e os dois com espaço pra ele aparecer GRANDE. O piso
   de 150px não é gosto: a arte veio de uma foto de impresso, e abaixo de
   ~140px a cara empasta e o boneco vira bolha. Por isso ele não entra na
   faixa rolante nem como ícone — ali teria 16px. */
.mascote {
  display: block;
  height: auto;
}

/* Centralizado e um pouco torto, como carimbo batido à mão. O painel de
   "deu certo" é o único momento da página que comemora. */
/* A linha de cima do painel: o que foi dito à esquerda, o mascote à
   direita. `align-items: center` e não `end` porque o boneco tem pernas —
   alinhar pela base deixaria os pés na linha do texto e a cabeça boiando
   acima do título. */
.ok-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 3vw, 1.5rem);
  margin-bottom: 1.25rem;
}
/* O título perde a margem de baixo: quem separa a linha do resto agora é
   o .ok-topo, e as duas somadas abririam um buraco. */
.ok-topo .titulo-display { margin-bottom: 0; }
.ok-dito { min-width: 0; }
.mascote-ok {
  flex: none;
  width: clamp(104px, 26vw, 150px);
  margin: 0;
  transform: rotate(-4deg);
}

/* ---------- o cardápio ---------- */

/* A segunda faixa marrom da página. Comida pede fundo escuro: o cheddar,
   o bacon e a batata saltam contra o marrom e somem contra o papel. É
   também o que impede a página de virar quatro seções claras seguidas. */
.cardapio {
  padding: clamp(3.5rem, 8vw, 6rem) var(--margem);
  background: var(--marrom);
  color: var(--papel);
}
.cardapio .titulo-display { color: var(--papel); }
.cardapio .titulo-display em { color: var(--creme-fraco); }
.cardapio .sobrancelha { color: var(--creme-fraco); }
.cardapio .apoio { color: var(--creme-fraco); }
.cardapio-chamada { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
/* Um pouco torto pro mesmo lado do hambúrguer do painel de sucesso: os
   dois são carimbo, e carimbo batido à mão não sai reto. */

.pratos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--respiro);
}
/* Cartões de verdade aqui, e não linhas como no resto da página: são
   objetos discretos com nome, descrição e PREÇO, que é o caso em que o
   cartão carrega informação em vez de enfeitar. */
.prato {
  display: grid;
  /* O 1fr antes da última linha empurra o preço pra base, mesmo com
     descrições de tamanhos diferentes — senão os três preços ficam em
     alturas diferentes e o pé dos cartões vira serrilha. */
  align-content: start;
  /* Cinco linhas FIXAS, com os filhos postos à mão. A primeira é a do
     selo e existe mesmo em cartão sem selo: só dois dos três têm (são os
     que a casa marca como mais pedidos), e sem reservar a linha o nome do
     terceiro subia e os três títulos ficavam em alturas diferentes.
     O 1fr na terceira empurra o preço pra base, pra o pé dos cartões não
     virar serrilha quando as descrições têm tamanhos diferentes. */
  grid-template-rows: auto 1.75rem auto 1fr auto;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--papel) 22%, transparent);
  border-radius: var(--curva);
  background: var(--marrom-forte);
}
.prato-foto {
  grid-row: 1;
  margin: 0 0 1rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--curva) - 5px);
  background: color-mix(in srgb, var(--papel) 8%, transparent);
}
.prato-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.selo {
  grid-row: 2;
  justify-self: start;
  align-self: start;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--papel);
  color: var(--marrom-forte);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.prato h3 {
  grid-row: 3;
  margin: 0 0 0.45rem;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.1;
  color: var(--papel);
}
.prato p {
  grid-row: 4;
  margin: 0 0 1.1rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--creme-fraco);
}
/* O preço cheio e o de antes na mesma linha. O <s> vem do cardápio da
   casa, que anuncia o combo com o desconto — não é enfeite nosso. */
.preco {
  grid-row: 5;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  font-weight: 800;
  color: var(--papel);
  font-variant-numeric: tabular-nums;
}
.preco s {
  font-size: 0.78em;
  font-weight: 600;
  color: var(--creme-fraco);
  text-decoration-thickness: 1px;
}

/* No desktop não existe carrossel, então a seta não existe. */
.pratos-seta { display: none; }

.cardapio-nota {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  font-size: 0.88rem;
  color: var(--creme-fraco);
}
.cardapio-nota a { color: var(--papel); text-underline-offset: 3px; }

/* ---------- informações ---------- */

.informacoes {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--respiro);
  /* O respiro de cima é a faixa onde a foto aparece sem texto por cima.
     Vira VARIÁVEL porque o degradê usa o mesmo número — amarrar os dois é
     o que impede o véu de abrir onde o texto já começou. */
  --topo-info: clamp(7rem, 16vw, 11rem);
  padding: var(--topo-info) var(--margem) clamp(3rem, 6vw, 4.5rem);
  background: var(--marrom);
  color: var(--papel);
}
/* A foto, por cima do marrom. */
/* A foto das embalagens, que ela mandou. Mesmo par de camadas que a
   fachada tinha: a foto por cima do marrom e um véu de marrom por cima
   dela.

   ATENÇÃO AO TAMANHO: o arquivo tem 465px de largura e a seção abre com
   1165 no desktop, então ela entra a 2,5x de ampliação. Num hero isso
   seria inaceitável e eu já recusei antes; aqui passa porque a foto vive
   sob um véu de 72% e nunca é o assunto — é textura de fundo atrás de
   endereço e horário. No celular ela REDUZ (0,8x), que é onde a maioria
   vê. Se aparecer o arquivo original do Instagram, é esta linha que
   melhora. */
.informacoes::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  /* 50%: é onde o "art." da sacola cai na faixa de cima, que é a parte
     clara do véu. Varri 0,20 a 0,80 — todas passavam no contraste (5,35 a
     5,50), então a escolha foi de composição, não de legibilidade: a 68%
     entram as embalagens e as caixas, mas o logo some. */
  background: url('imgs/embalagens.jpg') center 50% / cover no-repeat;
  opacity: .72;
}
/* O véu. Claro em cima, onde não tem texto, e fechado de onde o texto
   começa pra baixo. */
.informacoes::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Os pontos do meio em PX, amarrados ao respiro. Em porcentagem eu
     errei duas vezes aqui: a media query do celular troca o respiro, a
     porcentagem não acompanha, e o véu abria bem onde o texto começa —
     deu 2,0 de contraste em cima da sacola clara. */
  background: linear-gradient(
    to bottom,
    rgba(79, 38, 18, .30) 0,
    rgba(79, 38, 18, .36) calc(var(--topo-info) - 52px),
    rgba(79, 38, 18, .94) calc(var(--topo-info) - 8px),
    rgba(79, 38, 18, .96) 100%);
}

.informacoes .sobrancelha { 
  color: var(--creme-fraco); 
}
.info-card p { 
  margin: 0; font-weight: 500; 
}
.info-card a {
  color: var(--papel);
  text-decoration: none;
  border-bottom: 1px solid var(--creme-fraco);
}
.info-card a:hover { 
  border-bottom-color: var(--papel); 
}

/* ---------- prova ---------- */

.prova {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 7vw, 5rem) var(--margem);
  /* Tom fechado em vez de ladrilho. A seção encosta direto em Reservas,
     que já tem o ladrilho do milkshake, e dois padrões colados brigam —
     foi ela quem notou. O --marrom-leve já está na paleta e resolve com
     uma cor só: vira painel distinto sem pôr mais nada na tela.

     De brinde, cria o degrau que faltava entre as duas: antes eram duas
     faixas no mesmo papel, uma com ladrilho e outra sem, e a emenda não
     se lia. */
  background: var(--marrom-leve);
}

.prova-nota { 
  text-align: center; 
}
.prova-nota .sobrancelha { 
  margin-bottom: 0.4rem; 
}

.prova-numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: clamp(3.5rem, 9vw, 6rem);
  line-height: 0.9;
  color: var(--marrom);
}
.prova-base {
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--marrom-fraco);
}
.prova-base strong { 
  color: var(--marrom); font-weight: 700; 
}
/* Sublinhado de verdade, não só cor: link que se distingue só pela cor
   some pra quem não enxerga bem a diferença entre os dois marrons. */
.prova-link {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--marrom);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prova-link:hover { text-decoration-thickness: 2px; }

.prova-frases {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.35rem);
}
.prova-frases li {
  padding-left: clamp(1rem, 2.2vw, 1.5rem);
  border-left: 2px solid color-mix(in srgb, var(--marrom) 20%, transparent);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.5;
  color: var(--marrom-forte);
}

/* ---------- reservas ---------- */

.reservas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--respiro);
  align-items: start;
  padding: clamp(3rem, 7vw, 5.5rem) var(--margem) clamp(4rem, 8vw, 6rem);
}

.reservas::before {
  content: '';
  position: absolute;
  inset: -25%;
  z-index: -1;
  /* O ladrilho daqui é o do MILKSHAKE, não o da marca (pedido dela). Ele
     é um desenho maior e mais detalhado que o "art.", então pede ladrilho
     maior: 300px no lugar de 265. A 13% ninguém lê o desenho — é textura,
     e empastar nesse tamanho não faz diferença. */
  background: url('imgs/shake-ladrilho.png') repeat;
  background-size: 300px auto;
  transform: rotate(-6deg);
  opacity: .13;
  pointer-events: none;
}

.reservas-chamada {
  position: sticky;
  top: 5.5rem;
}
.reservas-chamada .apoio { margin-bottom: 1rem; }
.reservas-chamada .apoio { 
  margin-bottom: 1rem; 
}

.reservas-form { 
  display: grid; gap: 1.1rem; 
}

.campo { 
  display: grid; gap: 0.4rem; min-width: 0; align-content: start; 
}
.campo label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marrom-fraco);
}
.campo .opcional { 
  font-weight: 500; letter-spacing: 0; text-transform: none; 
}

.campo input {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 2px solid var(--marrom-leve);
  border-radius: 10px;
  background: var(--papel);
  font: inherit;
  color: var(--marrom-forte);
  transition: border-color .15s ease;
}
.campo input::placeholder { color: var(--marrom-fraco); }
.campo input:hover { border-color: var(--marrom-fraco); }
.campo input:focus { border-color: var(--marrom); outline: none; }
.campo input:focus-visible { outline: none; }

.campo-dica { font-size: 0.8rem; color: var(--marrom-fraco); }

.campo-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* O medidor do dia — o que esta página faz que um site de restaurante
   não faz. A barra é a ocupação real do turno, não enfeite. */
.vagas {
  padding: 1.1rem 1.25rem;
  border: 2px solid var(--marrom-leve);
  border-radius: var(--curva);
  background: var(--marrom-leve);
}
.vagas-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.7rem;
}
.vagas-rotulo { font-weight: 800; color: var(--marrom-forte); }
.vagas-conta {
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--marrom-fraco);
  white-space: nowrap;
}
.vagas-trilho {
  height: 10px;
  border-radius: 999px;
  background: var(--papel);
  overflow: hidden;
}
.vagas-ocupado {
  height: 100%;
  width: 0;
  background: var(--marrom);
  border-radius: 999px;
  transition: width .35s ease;
}
.vagas-recado {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  color: var(--marrom-fraco);
}
/* Lotado não é erro de preenchimento: é informação, e a cor diz isso
   sem gritar. */
.vagas.vagas-lotado { border-color: var(--alerta); }
.vagas.vagas-lotado .vagas-rotulo,
.vagas.vagas-lotado .vagas-recado { color: var(--alerta); }
.vagas.vagas-lotado .vagas-ocupado { background: var(--alerta); }
.vagas.vagas-carregando { opacity: .6; }

.form-erro {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--alerta);
  color: var(--papel);
  font-weight: 700;
  font-size: 0.95rem;
}
.form-nota { margin: 0; font-size: 0.85rem; color: var(--marrom-fraco); text-align: center; }

.reservas-ok .form-nota { text-align: left; }

/* As pílulas da ocasião. O radio de verdade continua lá, só invisível:
   é ele que dá navegação por teclado e agrupamento por `name` de graça —
   coisas que uma div com clique teria que reinventar pior. */
.ocasioes {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ocasioes input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.ocasioes label {
  padding: 0.6rem 1.15rem;
  border: 2px solid var(--marrom-leve);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--marrom);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ocasioes label:hover { border-color: var(--marrom-fraco); }
.ocasioes input:checked + label {
  background: var(--marrom);
  border-color: var(--marrom);
  color: var(--papel);
}
.ocasioes input:focus-visible + label {
  outline: 3px solid var(--marrom);
  outline-offset: 3px;
}

/* O rótulo do grupo não é <label>: ele não aponta pra um campo só. */
.campo-rotulo {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marrom-fraco);
}
.campo-rotulo .opcional { font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ---------- o cartão do formulário ---------- */

/* O formulário é uma ilha escura na página clara. As cores são as que ela
   especificou, e ficam PRESAS a este bloco: lá dentro claro e escuro
   trocam de lado, e espalhar esses valores pelo arquivo faria o resto da
   página herdar uma paleta que não é dela. */
.reservas-form,
.reservas-ok {
  --cartao:        var(--marrom);        /* o mesmo do hero e de Informações */
  --cartao-campo:  var(--marrom-forte);  /* o fundo fundo, pros campos */
  --cartao-borda:  color-mix(in srgb, var(--papel) 22%, var(--marrom));
  --cartao-texto:  var(--papel);
  --cartao-apoio:  var(--creme-fraco);
  --cartao-destaque: #e0a996;            /* o terracota da especificação dela */
  /* O vermelho da página dá menos de 3:1 em cima do marrom. O alerta aqui
     precisa CLAREAR pra ser visto. */
  --cartao-alerta: #ef8a74;

  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--cartao-borda);
  border-radius: 26px;
  background: var(--cartao);
  color: var(--cartao-texto);
  /* Sem isto, o calendário e o relógio nativos do campo de data saem
     escuros em cima de escuro — some o ícone e some o seletor inteiro
     quando abre. É a única forma de avisar o navegador. */
  color-scheme: dark;
}

.reservas-form .campo label,
.reservas-form .campo-rotulo,
.reservas-form .campo-dica,
.reservas-form .form-nota { color: var(--cartao-apoio); }

.reservas-form .campo input {
  border: 1px solid var(--cartao-borda);
  border-radius: 12px;
  background: var(--cartao-campo);
  color: var(--cartao-texto);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.reservas-form .campo input::placeholder { color: var(--cartao-apoio); opacity: .7; }
.reservas-form .campo input:hover { border-color: var(--cartao-apoio); }
/* O anel é o que faz o foco aparecer sem engrossar a borda e empurrar o
   campo meio pixel. */
.reservas-form .campo input:focus {
  border-color: var(--cartao-destaque);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cartao-destaque) 28%, transparent);
  outline: none;
}
.reservas-form :focus-visible { outline-color: var(--cartao-destaque); }

.reservas-form .ocasioes label {
  border-color: var(--cartao-borda);
  color: var(--cartao-apoio);
}
.reservas-form .ocasioes label:hover { border-color: var(--cartao-apoio); }
.reservas-form .ocasioes input:checked + label {
  background: var(--cartao-destaque);
  border-color: var(--cartao-destaque);
  color: var(--cartao);
}
.reservas-form .ocasioes input:focus-visible + label { outline-color: var(--cartao-destaque); }
.reservas-form .vagas {
  border-color: var(--cartao-borda);
  background: var(--cartao-campo);
}
.reservas-form .vagas-rotulo { color: var(--cartao-texto); }
.reservas-form .vagas-conta,
.reservas-form .vagas-recado { color: var(--cartao-apoio); }
.reservas-form .vagas-trilho { background: var(--cartao); }
.reservas-form .vagas-ocupado { background: var(--cartao-destaque); }
.reservas-form .vagas.vagas-lotado { border-color: var(--cartao-alerta); }
.reservas-form .vagas.vagas-lotado .vagas-rotulo,
.reservas-form .vagas.vagas-lotado .vagas-recado { color: var(--cartao-alerta); }
.reservas-form .vagas.vagas-lotado .vagas-ocupado { background: var(--cartao-alerta); }

.reservas-form .form-erro {
  background: var(--cartao-alerta);
  color: var(--cartao-campo);
}

/* O botão de enviar: largura cheia, terracota, texto escuro. */
.reservas-form .btn-primario {
  background: var(--cartao-destaque);
  border-color: var(--cartao-destaque);
  color: var(--cartao-campo);
}
.reservas-form .btn-primario:hover {
  background: var(--cartao-texto);
  border-color: var(--cartao-texto);
  color: var(--cartao-campo);
}

/* O painel de "deu certo" é o mesmo cartão, então herda tudo. */
.reservas-ok { align-self: start; }
/* Mesmo respiro que as seções têm: sem ele, o card confirmado encosta
   na ilha do menu, que é fixa e passa por cima. */
.reservas-ok { scroll-margin-top: 5rem; }

/* Com a reserva feita, os dois parágrafos de cima viram ruído: eles
   explicam como PREENCHER o formulário, que já foi preenchido. Tirar
   eles é o que faz o título e a confirmação caberem juntos na tela do
   celular — sem isso o card nasce 34px abaixo da dobra. */
.reservas.confirmada .reservas-chamada .apoio { display: none; }
.reservas-ok .titulo-display { color: var(--cartao-apoio); }
.reservas-ok .titulo-display em { color: var(--cartao-texto); }
.reservas-ok .sobrancelha,
.reservas-ok .apoio,
.reservas-ok .form-nota { color: var(--cartao-apoio); }

/* ---------- rodapé ---------- */

.rodape {
  display: grid;
  grid-template-columns: minmax(14rem, 1.4fr) 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--margem) 2rem;
  /* Marrom, a pedido dela. Sem borda em cima: a troca de cor já separa, e
     linha clara em cima do marrom é sujeira — mesma regra de Informações.
     Aqui dentro o claro e o escuro trocam de lado, então tudo que tem cor
     precisa do par do MARROM, não o da página. */
  background: var(--marrom);
  font-size: 0.9rem;
  color: var(--creme-fraco);
}
.rodape strong {
  font-weight: 900; color: var(--papel); letter-spacing: -0.01em;
}
.rodape .sobrancelha { color: var(--creme-fraco); }
.rodape :focus-visible { outline-color: var(--papel); }
.rodape-marca p { 
  margin: 0.9rem 0 0; line-height: 1.6;
}
.rodape-marca .marca-desenho { 
  height: 24px; }
.rodape-marca .marca-escrita { 
  height: 17px;
}
/* A rede do "art." em Poppins, pra quando os recortes não carregarem: no
   rodapé marrom ele precisa do claro, senão nasce marrom em marrom. */
.rodape-marca .marca-nome { color: var(--papel); }

.rodape-links { display: grid; align-content: start; gap: 0.45rem; }
.rodape-links .sobrancelha { margin-bottom: 0.35rem; }
.rodape-links a {
  color: var(--papel);
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid transparent;
}
.rodape-links a:hover { border-bottom-color: var(--papel); }

/* A assinatura atravessa as três colunas e fecha a página. */
.assinatura { grid-column: 1 / -1; }
/* Como eles assinam tudo no Instagram. Fica por último, que é o lugar de
   assinatura. */
.assinatura {
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--creme-fraco);
}

/* ---------- telas estreitas ---------- */

@media (max-width: 900px) {
  .casa, .reservas { grid-template-columns: 1fr; }

  /* As fotos sobem pra CIMA da pílula (pedido dela). A pílula é filha de
     .casa-texto e as fotos são irmãs dela, então `order` sozinho não
     alcança as duas: `display: contents` dissolve a .casa-texto e seus
     filhos viram itens do grid direto, aí dá.

     O gap da seção vira 0 junto. Com os filhos soltos ele passaria a
     separar CADA parágrafo com o respiro da seção inteira, e o texto
     explodia. O espaço entre eles já vem da margem que cada um tem. */
  .casa { gap: 0; }
  .casa-texto { display: contents; }
  .casa-fotos {
    order: 2;
    padding-left: clamp(1.5rem, 8vw, 3rem);
  }
  .numeros { order: 3; margin-top: clamp(1.5rem, 5vw, 2.25rem); }
  .numeros { display: flex; width: 100%; }
  .numero { flex: 1; }
  /* Em coluna única só o respiro muda; o degradê acompanha sozinho porque
     está amarrado nele. Menor que no desktop, mas não os 48px que eu tinha
     posto: com tão pouco espaço a foto não aparecia. */
  .informacoes {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    --topo-info: clamp(6rem, 22vw, 9rem);
  }

  .reservas-chamada { position: static; }
  
  
  
  
  
  
  /* Lado a lado numa tela estreita, o 4,7 espreme as frases contra a
     borda. Empilhado, o número vira cabeçalho das frases. */
  .prova { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.5rem); }
  .prova-nota { text-align: left; }
  
  /* O cardápio vira carrossel no celular (pedido dela — eu tinha
     empilhado, achando que esconder dois itens atrás de um gesto era
     pior). As margens negativas tiram o respiro da LISTA e devolvem como
     padding: sem isso o primeiro cartão não alinha com o texto da seção,
     e o último não encosta na borda no fim da rolagem. */
  .pratos {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* min() e não minmax(): com overflow-x não sobra espaço livre, então
       minmax() encolhe a faixa pro MÍNIMO e o cartão saía com 224px num
       celular de 375. Assim ele fica em 80% da tela, que é o tanto que
       deixa o próximo espiando — e é a espiada que avisa que desliza. */
    grid-auto-columns: min(80%, 22rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--margem) * -1);
    padding-inline: var(--margem);
    /* O snap alinha o cartão com a borda do CONTÊINER, não com o fim do
       padding — sem esta linha ele grudava 19px à esquerda do texto da
       seção, encostado na borda marrom. */
    scroll-padding-inline: var(--margem);
    scrollbar-width: none;
  }
  .pratos::-webkit-scrollbar { display: none; }
  .prato { scroll-snap-align: start; }

  /* A seta. Fica à direita, logo abaixo dos cartões: é onde o dedo já
     está depois de ler o primeiro, e é o lado pra onde a lista anda. */
  .pratos-seta {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 1rem 0 0 auto;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--papel) 38%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--papel);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
  }
  .pratos-seta:hover { background: color-mix(in srgb, var(--papel) 12%, transparent); }
  .pratos-seta:focus-visible { outline-color: var(--papel); }
  .rodape { grid-template-columns: 1fr 1fr; }
  .rodape-marca { grid-column: 1 / -1; }
  .topo-menu { display: none; }
}

@media (max-width: 480px) {
  .reservas::before { background-size: 185px auto; }
  .casa::before { background-size: 300px auto; }
  .campo-dupla { grid-template-columns: 1fr; }
  /* Lado a lado também aqui: empilhada, a pílula virava um bloco alto com
     dois fatos curtos e muito vazio em volta. Em duas colunas ela cai pra
     metade da altura e usa a largura que já estava sobrando — e dois
     números leem melhor como par do que como lista. */
  .numero { padding: 0.9rem 0.75rem; }
  .numero span { max-width: none; font-size: 0.75rem; }
  /* Largura cheia fica, altura não: com o padding do desktop os dois
     botões viravam duas barras altas e comiam o hero no celular. */
  .hero-botoes .btn { width: 100%; padding: 0.72rem 1.4rem; font-size: 0.95rem; }
}