/* =========================================================================
   Mercenários Gastrobar
   Sistema visual derivado do próprio salão: vigas pretas, pele de carneiro,
   lâmpada de filamento, mata na janela, luz de palco.

   REGRA DE IMAGEM DESTA FOLHA
   Nenhuma foto é esticada nem cortada a ponto de perder o assunto. Recorte de
   produto usa object-fit: contain em caixa fixa. Foto de ambiente usa a
   proporção da própria fonte: salão é 4:3, show é 3:2, cartaz é 1:1.
   ========================================================================= */

:root {
  /* Cor. Cada valor tem origem numa fotografia da casa. */
  --breu:        oklch(15.5% 0.008 65);   /* viga de aço preta */
  --breu-alto:   oklch(11%   0.006 65);   /* sombra sob o teto */
  --carvao:      oklch(22%   0.009 60);   /* superfície elevada */
  --osso:        oklch(93%   0.020 84);   /* pele de carneiro */
  --cinza:       oklch(60%   0.012 70);   /* pilar de concreto */
  --cinza-fundo: oklch(38%   0.010 70);
  --tungstenio:  oklch(76%   0.145 68);   /* lâmpada de filamento */
  --mata:        oklch(36%   0.058 150);  /* verde da janela */
  --brasa:       oklch(54%   0.205 28);   /* luz de palco */

  --fio:       color-mix(in oklch, var(--osso) 15%, transparent);
  --fio-forte: color-mix(in oklch, var(--osso) 32%, transparent);

  /* Tipografia. Uma família variável no display, com dois pontos do eixo
     de largura, e uma grotesca neutra no corpo. */
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --corpo:   "Instrument Sans", system-ui, -apple-system, sans-serif;

  /* Ritmo espacial. Passos desiguais de propósito. */
  --e1: 0.5rem;
  --e2: 0.875rem;
  --e3: 1.5rem;
  --e4: 2.5rem;
  --e5: clamp(3rem, 6vw, 5.5rem);
  --e6: clamp(5rem, 11vw, 10rem);

  --margem: clamp(1.25rem, 5vw, 5rem);
  --medida: 62ch;

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

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

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

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

::selection { background: var(--tungstenio); color: var(--breu); }

/* ------------------------------------------------------------------ tipos */

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 74%;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

/* Rótulo técnico: mesmo tipo do display, no extremo expandido do eixo. */
.rotulo {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--cinza);
  margin: 0;
}

.rotulo--claro  { color: var(--osso); }
.rotulo--acento { color: var(--tungstenio); }

p { margin: 0 0 var(--e3); max-width: var(--medida); }
p:last-child { margin-bottom: 0; }

.prosa { color: color-mix(in oklch, var(--osso) 82%, var(--cinza)); }

.destaque-texto {
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 92%;
  font-size: clamp(1.375rem, 1.05rem + 1.6vw, 2.125rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--osso);
  max-width: 23ch;
}

/* -------------------------------------------------------------- estrutura */

.envolucro { padding-inline: var(--margem); }

.secao {
  position: relative;
  padding-block: var(--e6);
  border-top: 1px solid var(--fio);
}

.secao--curta { padding-block: clamp(3.5rem, 7vw, 6rem); }

.secao__cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e3);
  margin-bottom: var(--e5);
}

@media (min-width: 62rem) {
  .secao__cabeca {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--e4);
    align-items: start;
  }
}

.secao__titulo {
  font-size: clamp(2.25rem, 1.2rem + 5vw, 5rem);
  font-stretch: 70%;
  font-weight: 900;
}

.secao__indice {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-top: 0.65rem;
}

.secao__indice::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--fio);
}

/* ----------------------------------------------------------------- botões */

.botao {
  --bg: var(--osso);
  --fg: var(--breu);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 0.8125rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--bg);
  transition: background 0.35s var(--saida), color 0.35s var(--saida),
              border-color 0.35s var(--saida), transform 0.35s var(--saida);
}

.botao:hover { transform: translateY(-2px); }

.botao--fantasma {
  --bg: transparent;
  --fg: var(--osso);
  border-color: var(--fio-forte);
}

.botao--fantasma:hover { border-color: var(--osso); }

.botao__seta { transition: transform 0.4s var(--saida); }
.botao:hover .botao__seta { transform: translateX(4px); }

/* ================================================================== HERO == */
/* Ordem no HTML é a ordem do celular: marca, vitrine, texto. No desktop o
   grid recoloca a vitrine à direita, por cima da cauda do nome. */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: var(--e3);
  padding: var(--e3) var(--margem) var(--e5);
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(90% 60% at 70% 30%,
      color-mix(in oklch, var(--tungstenio) 9%, transparent), transparent 70%),
    var(--breu);
}

.hero__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}

/* A marca entra como placa rebitada na parede, não como logo flutuando. */
.marca {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1rem;
  border: 1px solid var(--fio-forte);
  text-decoration: none;
}

.marca img { width: clamp(3.75rem, 9vw, 6.75rem); height: auto; }

.hero__contato {
  display: none;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 108%;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--osso);
  border-bottom: 1px solid var(--fio-forte);
  padding-bottom: 0.25rem;
  transition: border-color 0.3s var(--saida);
}

.hero__contato:hover { border-color: var(--tungstenio); }

@media (min-width: 48rem) { .hero__contato { display: inline-block; } }

/* --- vitrine -------------------------------------------------------------
   Os PNG foram recortados com alfa de verdade, então o prato e o drink ficam
   na frente do anel âmbar sem carregar retângulo preto. As quatro peças têm
   proporções bem diferentes (0.36 a 1.52), por isso a caixa é fixa e o
   object-fit é contain: cada uma aparece inteira, na proporção dela.        */

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

/* A caixa tem altura própria e as peças são absolutas dentro dela: assim uma
   imagem alta não empurra o hero para fora da dobra, e object-fit contain
   garante que cada uma apareça inteira, na proporção dela. */
.vitrine__pecas {
  position: relative;
  z-index: 2;
  width: 100%;
  height: min(46svh, 24rem);
}

@media (min-width: 62rem) {
  .vitrine__pecas { height: min(66svh, 34rem); }
}

.vitrine__peca {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  scale: 0.94;
  filter: drop-shadow(0 2rem 3rem oklch(0% 0 0 / 0.55));
  transition: opacity 0.8s var(--saida), scale 1.4s var(--saida);
}

.vitrine__peca.esta-ativa { opacity: 1; scale: 1; }

/* o "algo atrás": brilho de lâmpada mais um anel fino */
.vitrine__halo,
.vitrine__anel {
  position: absolute;
  top: 46%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
}

.vitrine__halo {
  z-index: 0;
  width: min(80%, 30rem);
  aspect-ratio: 1;
  background: radial-gradient(circle,
    color-mix(in oklch, var(--tungstenio) 30%, transparent) 0%,
    color-mix(in oklch, var(--tungstenio) 9%, transparent) 46%,
    transparent 72%);
}

.vitrine__anel {
  z-index: 1;
  width: min(60%, 22rem);
  aspect-ratio: 1;
  border: 1px solid color-mix(in oklch, var(--tungstenio) 32%, transparent);
}

.vitrine__barra {
  position: relative;
  z-index: 3;
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  width: 100%;
  max-width: 30rem;
  margin-top: var(--e2);
  padding-top: var(--e2);
  border-top: 1px solid var(--fio);
}

@media (min-width: 62rem) { .vitrine__barra { max-width: 26rem; } }

.vitrine__nome {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 96%;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--osso);
  margin: 0;
}

.vitrine__pontos { display: flex; gap: 0.4rem; flex: none; }

.vitrine__ponto {
  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 { position: relative; }
.vitrine__ponto:hover { background: var(--osso); }
.vitrine__ponto[aria-selected="true"] { background: var(--tungstenio); }

/* --- texto do hero -------------------------------------------------------
   MERCENÁRIOS condensado e pesado, GASTROBAR no extremo oposto do eixo de
   largura com o tracking fechando na mesma medida. Uma família, dois pontos
   do eixo.                                                                  */

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

.wordmark {
  font-size: clamp(3.25rem, 16vw, 13rem);
  font-stretch: 62%;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.022em;
  margin: 0 0 0.1em;
  color: var(--osso);
}

.gastrobar {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-stretch: 125%;
  font-size: clamp(0.75rem, 2.35vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.325em;
  text-indent: 0.325em;
  color: var(--osso);
  white-space: nowrap;
}

.hero__linha-fina {
  margin-top: var(--e3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1rem;
}

.hero__linha-fina .rotulo {
  color: color-mix(in oklch, var(--osso) 70%, transparent);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
}

@media (min-width: 34rem) {
  .hero__linha-fina .rotulo { font-size: 0.6875rem; letter-spacing: 0.19em; }
}

.ponto-sep { width: 3px; height: 3px; background: var(--tungstenio); flex: none; }

/* --- estado da noite -----------------------------------------------------
   A informação que uma casa aberta dois dias por semana precisa dar antes
   de qualquer outra coisa.                                                 */

.estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.25rem;
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--fio);
}

.estado__farol {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 0.8125rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.estado__bolha {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cinza-fundo);
  flex: none;
}

.estado[data-aberto="sim"] .estado__bolha {
  background: var(--tungstenio);
  animation: pulso 2.8s var(--saida) infinite;
}

.estado[data-aberto="sim"] .estado__farol { color: var(--tungstenio); }

@keyframes pulso {
  0%   { box-shadow: 0 0 0 0      color-mix(in oklch, var(--tungstenio) 55%, transparent); }
  70%  { box-shadow: 0 0 0 0.7rem color-mix(in oklch, var(--tungstenio) 0%, transparent); }
  100% { box-shadow: 0 0 0 0      color-mix(in oklch, var(--tungstenio) 0%, transparent); }
}

.estado__detalhe { font-size: 0.875rem; color: var(--cinza); margin: 0; }
.estado__detalhe b { color: var(--osso); font-weight: 500; }

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e3);
}

/* --- composição do hero no desktop ---------------------------------------
   O nome sangra para dentro da coluna da vitrine. Como o recorte tem alfa,
   a palavra aparece ATRAVÉS do vidro em vez de ser tapada por um retângulo. */

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    grid-template-rows: auto 1fr;
    align-content: stretch;
    column-gap: var(--e4);
    padding-bottom: var(--e4);
  }
  .hero__topo   { grid-column: 1 / -1; grid-row: 1; }
  .hero__texto  { grid-column: 1; grid-row: 2; }
  .vitrine      { grid-column: 2; grid-row: 2; }
  /* a palavra sangra para dentro da coluna da vitrine, mas só até onde ainda
     dá para ler: a última sílaba passa pela borda translúcida do vidro, não
     pelo meio dele */
  .wordmark     { white-space: nowrap; font-size: clamp(4.5rem, 13.2vw, 11rem); }
}

/* -------------------------------------------------------- índice / atalhos */

.indice {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklch, var(--breu) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}

.indice__trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--margem);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.indice__trilho::-webkit-scrollbar { display: none; }

.indice__link {
  flex: none;
  scroll-snap-align: start;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 1.05rem clamp(0.9rem, 2.4vw, 1.6rem);
  text-decoration: none;
  border-right: 1px solid var(--fio);
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 106%;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
  white-space: nowrap;
  transition: color 0.3s var(--saida), background 0.3s var(--saida);
}

.indice__link:first-child { padding-left: var(--margem); }
.indice__link:last-child  { border-right: 0; padding-right: var(--margem); }

.indice__link:hover { color: var(--osso); background: color-mix(in oklch, var(--osso) 5%, transparent); }

.indice__num {
  font-size: 0.625rem;
  font-stretch: 118%;
  color: color-mix(in oklch, var(--tungstenio) 78%, transparent);
  font-variant-numeric: tabular-nums;
}

.indice__link[aria-current="true"] { color: var(--osso); }
.indice__link[aria-current="true"] .indice__num { color: var(--tungstenio); }

/* ================================================= VITRINE DE VÍDEO (topo) */

.cozinha {
  background: var(--breu-alto);
  border-top: 1px solid var(--fio);
  padding-block: var(--e5);
  overflow: clip;
}

.cozinha__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2) var(--e3);
  margin-bottom: var(--e4);
}

.cozinha__titulo {
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  font-stretch: 72%;
  font-weight: 900;
}

.cozinha__cabeca .prosa { font-size: 0.9375rem; margin: 0; }

.trilho-video {
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--margem);
  /* sem isto o snap encosta o primeiro clipe na borda da tela */
  scroll-padding-inline: var(--margem);
  padding-bottom: var(--e2);
  scrollbar-width: thin;
  scrollbar-color: var(--cinza-fundo) transparent;
}

.clipe {
  flex: none;
  width: min(14rem, 58vw);
  scroll-snap-align: start;
  margin: 0;
}

.clipe__quadro {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--carvao);
  border: 1px solid var(--fio);
}

.clipe__quadro video { width: 100%; height: 100%; object-fit: cover; }

.clipe figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  padding-top: 0.7rem;
}

.clipe__nome {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 92%;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.clipe__tipo {
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 118%;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tungstenio);
  flex: none;
}

/* ============================================================ MENU DA CASA */
/* Navegação de verdade, com cara de menu: linha larga, número, nome grande,
   miniatura e seta. Não é índice decorativo. */

.cardapio-nav {
  padding-block: var(--e5);
  border-top: 1px solid var(--fio);
}

.cardapio-nav__rotulo { margin-bottom: var(--e3); }

.cardapio-nav__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--fio);
}

.cardapio-nav__lista li { border-bottom: 1px solid var(--fio); }

.cardapio-nav__lista a {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.4vw, 2rem);
  padding: clamp(0.9rem, 2.2vw, 1.6rem) 0;
  text-decoration: none;
  transition: padding-inline 0.5s var(--saida), color 0.3s var(--saida);
}

.cardapio-nav__lista a:hover { padding-inline: 0.9rem; }

.cardapio-nav__num {
  flex: none;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 118%;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: color-mix(in oklch, var(--tungstenio) 80%, transparent);
  font-variant-numeric: tabular-nums;
}

.cardapio-nav__nome {
  flex: none;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 72%;
  font-size: clamp(1.75rem, 1.1rem + 3vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--osso);
}

.cardapio-nav__nota {
  display: none;
  flex: 1;
  font-size: 0.875rem;
  color: var(--cinza);
  line-height: 1.4;
}

/* Os nomes têm larguras bem diferentes. A largura mínima alinha as notas numa
   coluna, senão elas ficam com a margem esquerda serrilhada. */
@media (min-width: 52rem) {
  .cardapio-nav__nota { display: block; }
  .cardapio-nav__nome { min-width: min(34%, 20rem); }
}

.cardapio-nav__miniatura {
  flex: none;
  margin-left: auto;
  width: clamp(3.75rem, 12vw, 10rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--carvao);
  border: 1px solid var(--fio);
}

@media (min-width: 52rem) { .cardapio-nav__miniatura { margin-left: 0; } }

.cardapio-nav__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.6) brightness(0.75);
  transition: filter 0.6s var(--saida), transform 0.8s var(--saida);
}

.cardapio-nav__lista a:hover .cardapio-nav__miniatura img {
  filter: none;
  transform: scale(1.05);
}

.cardapio-nav__seta {
  display: none;
  flex: none;
  font-size: 1.25rem;
  color: var(--cinza);
  transition: transform 0.5s var(--saida), color 0.3s var(--saida);
}

@media (min-width: 52rem) { .cardapio-nav__seta { display: block; } }

.cardapio-nav__lista a:hover .cardapio-nav__seta {
  transform: translateX(6px);
  color: var(--tungstenio);
}

/* =========================================================== faixa de fatos */

.fatos {
  border-top: 1px solid var(--fio);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 56rem) { .fatos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.fato {
  padding: var(--e4) var(--margem);
  border-right: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}

.fato:nth-child(2n) { border-right: 0; }

@media (min-width: 56rem) {
  .fato { border-bottom: 0; padding-inline: clamp(1.25rem, 2.6vw, 2.25rem); }
  .fato:nth-child(2n) { border-right: 1px solid var(--fio); }
  .fato:last-child { border-right: 0; padding-right: var(--margem); }
  .fato:first-child { padding-left: var(--margem); }
}

.fato__valor {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 0.45rem;
  letter-spacing: -0.01em;
}

.fato__nota { font-size: 0.8125rem; color: var(--cinza); margin: 0; }

/* ==================================================================== A CASA */

.casa__conteudo { display: grid; gap: var(--e5); }

@media (min-width: 62rem) {
  .casa__conteudo { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--e4); }
}

.casa__texto > * + * { margin-top: var(--e3); }

/* A coluna vazia da esquerda alinha o texto com o título só no desktop.
   Abaixo de 62rem ela viraria uma linha de grid vazia. */
.casa__conteudo > .secao__indice { display: none; }
.casa__conteudo > .secao__indice::after { display: none; }

@media (min-width: 62rem) { .casa__conteudo > .secao__indice { display: block; } }

/* Todas as fotos do salão são 4:3. As peças do mosaico usam 4:3 e 3:2, então
   o corte máximo é suave e nenhuma vira textura irreconhecível. */
.mosaico {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.5rem, 1.4vw, 1rem);
  margin-top: var(--e5);
}

.mosaico figure { margin: 0; position: relative; overflow: hidden; background: var(--carvao); }

.mosaico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--saida);
}

.mosaico figure:hover img { transform: scale(1.035); }

.mosaico__a { grid-column: 1 / 5; aspect-ratio: 4 / 3; }
.mosaico__b { grid-column: 5 / 7; aspect-ratio: 4 / 3; align-self: end; }
.mosaico__c { grid-column: 1 / 3; aspect-ratio: 4 / 3; }
.mosaico__d { grid-column: 3 / 7; aspect-ratio: 3 / 2; }

@media (max-width: 46rem) {
  .mosaico { grid-template-columns: repeat(2, 1fr); }
  .mosaico__a { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .mosaico__b { grid-column: 1 / 2; aspect-ratio: 4 / 3; }
  .mosaico__c { grid-column: 2 / 3; aspect-ratio: 4 / 3; }
  .mosaico__d { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}

.legenda-foto {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.55rem 0.8rem;
  background: color-mix(in oklch, var(--breu) 86%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 110%;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--osso);
}

/* ================================================================= CARDÁPIO */

.cardapio__grade { display: grid; gap: var(--e5) clamp(2rem, 6vw, 5rem); }

@media (min-width: 54rem) {
  .cardapio__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* No celular a linha de apoio vai para baixo do título, alinhada à esquerda:
   à direita ela deixava palavra órfã na segunda linha. */
.grupo__cabeca {
  display: grid;
  gap: 0.35rem;
  padding-bottom: 0.7rem;
  margin-bottom: var(--e3);
  border-bottom: 1px solid var(--fio-forte);
}

@media (min-width: 34rem) {
  .grupo__cabeca { display: flex; align-items: baseline; gap: 0.75rem; }
}

.grupo__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--osso);
  margin: 0;
  flex: none;
}

.grupo__apoio {
  font-size: 0.75rem;
  color: var(--cinza);
  margin: 0;
  line-height: 1.4;
  text-wrap: pretty;
}

@media (min-width: 34rem) { .grupo__apoio { text-align: right; flex: 1; } }

.item { margin-bottom: var(--e3); }

/* No celular a coluna é estreita: o pontilhado sobraria com 20px e leria como
   sujeira, então o nome vai para um lado e o preço para o outro. */
.item__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.item__nome {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 96%;
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--osso);
  min-width: 0;
}

.item__conduz { display: none; }

@media (min-width: 34rem) {
  .item__linha { justify-content: flex-start; gap: 0.5rem; }
  .item__nome { flex: none; max-width: 70%; }
  .item__conduz {
    display: block;
    flex: 1;
    height: 0.55em;
    border-bottom: 1px dotted color-mix(in oklch, var(--osso) 30%, transparent);
    min-width: 2.5rem;
  }
}

.item__preco {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--osso);
  flex: none;
}

.item__preco::before {
  content: "R$ ";
  font-size: 0.6875rem;
  color: var(--cinza);
  letter-spacing: 0.06em;
}

.item__desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cinza);
  margin: 0.25rem 0 0;
  max-width: 46ch;
}

.cardapio__rodape {
  margin-top: var(--e5);
  padding-top: var(--e3);
  border-top: 1px solid var(--fio);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}

/* ==================================================================== PALCO */
/* As duas fotos de show são 3:2 e aparecem inteiras, na proporção delas. A luz
   vermelha da casa vira fundo da seção e um véu leve sobre as fotos, em vez de
   uma foto esticada na largura da tela onde não se enxerga a banda. */

.palco {
  background:
    linear-gradient(165deg,
      var(--breu) 0%,
      color-mix(in oklch, var(--brasa) 11%, var(--breu)) 65%,
      color-mix(in oklch, var(--brasa) 6%, var(--breu)) 100%);
}

.palco__grade { display: grid; gap: var(--e5); align-items: start; }

@media (min-width: 62rem) {
  .palco__grade {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.palco__texto > * + * { margin-top: var(--e3); }

.palco__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid color-mix(in oklch, var(--osso) 22%, transparent);
  max-width: 34rem;
}

.palco__lista li {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  padding: 0.9rem 0;
  border-bottom: 1px solid color-mix(in oklch, var(--osso) 14%, transparent);
  font-size: 0.9375rem;
}

.palco__lista .rotulo {
  color: color-mix(in oklch, var(--brasa) 72%, var(--osso));
  flex: none;
  width: 5.5rem;
}

.palco__lista--agenda { margin-top: var(--e2); }
.palco__lista--agenda .rotulo { width: 9rem; }
.palco__lista--agenda b { font-weight: 500; color: var(--osso); }

.palco__fotos { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); }

.palco__foto {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--carvao);
  border: 1px solid var(--fio);
}

/* sem aspect-ratio nem cover: a foto entra na proporção original */
.palco__foto img { width: 100%; height: auto; }

.palco__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top,
      color-mix(in oklch, var(--breu) 45%, transparent) 0%, transparent 45%),
    color-mix(in oklch, var(--brasa) 7%, transparent);
}

.palco__foto--pequena { width: 74%; margin-left: auto; }

/* ================================================================== EVENTOS */

.evento { display: grid; gap: var(--e5); align-items: start; }

@media (min-width: 48rem) {
  .evento {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
  }
}

/* O banner é tratado como cartaz na parede, não como card. */
.cartaz {
  position: relative;
  margin: 0;
  max-width: 26rem;
  background: var(--carvao);
  padding: clamp(0.6rem, 1.4vw, 1rem);
  border: 1px solid var(--fio);
  transform: rotate(-1.1deg);
  box-shadow: 0 2.5rem 5rem -2rem oklch(0% 0 0 / 0.9);
  transition: transform 0.7s var(--saida);
}

@media (min-width: 48rem) { .cartaz { max-width: none; } }

.cartaz:hover { transform: rotate(0deg); }
.cartaz img { width: 100%; }

.cartaz__pino {
  position: absolute;
  top: -0.45rem;
  left: 50%;
  translate: -50% 0;
  width: 3.5rem;
  height: 0.9rem;
  background: color-mix(in oklch, var(--osso) 20%, transparent);
  border: 1px solid var(--fio-forte);
  rotate: -2deg;
}

.evento__dados > * + * { margin-top: var(--e3); }

.evento__data {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 68%;
  font-size: clamp(3rem, 1.5rem + 7vw, 6.5rem);
  line-height: 0.84;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--osso);
}

.evento__data small {
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 115%;
  letter-spacing: 0.19em;
  color: var(--tungstenio);
}

.ficha { border-top: 1px solid var(--fio); display: grid; }

.ficha div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--e3);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--fio);
  align-items: baseline;
}

.ficha dt { margin: 0; }
.ficha dd { margin: 0; font-size: 0.9375rem; }

/* Contagem como linha de texto. Minuto num evento a quatro semanas é ruído,
   e bloco de número gigante é widget de landing page. */
.falta {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 108%;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tungstenio);
  margin: 0;
}

/* =============================================================== AVALIAÇÕES */

.vozes { background: var(--breu-alto); }

.vozes__topo { display: grid; gap: var(--e4); align-items: center; }

@media (min-width: 52rem) {
  .vozes__topo {
    grid-template-columns: auto minmax(9rem, 15rem) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.nota-geral { display: flex; align-items: baseline; gap: var(--e2); }

.nota-geral b {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 78%;
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

/* Histograma real da ficha do Google. Não é enfeite: mostra que a nota
   não vem de meia dúzia de avaliações escolhidas a dedo. */
.histograma { display: grid; gap: 0.4rem; }

.barra {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: 0.6rem;
}

.barra__n,
.barra__conta {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 112%;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--cinza);
  font-variant-numeric: tabular-nums;
}

.barra__conta { text-align: right; }

.barra__trilho {
  height: 3px;
  background: color-mix(in oklch, var(--osso) 12%, transparent);
  overflow: hidden;
}

.barra__cheia { display: block; height: 100%; width: var(--p); background: var(--tungstenio); }

.barra:nth-child(n + 3) .barra__cheia {
  background: color-mix(in oklch, var(--tungstenio) 45%, var(--cinza-fundo));
}

/* ============================================================== COMO CHEGAR */

.chegar__grade { display: grid; gap: var(--e5); align-items: start; }

@media (min-width: 58rem) {
  .chegar__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 6vw, 4.5rem);
  }
}

.mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--fio-forte);
  background: var(--carvao);
  overflow: hidden;
}

.mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(0.92) contrast(0.86);
}

@media (min-width: 58rem) { .mapa { aspect-ratio: 3 / 3.4; } }

.dados { display: grid; }

.dados > div {
  display: grid;
  gap: 0.35rem;
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--fio);
}

.dados > div:first-child { border-top: 1px solid var(--fio); }

.dados a { text-decoration: none; border-bottom: 1px solid var(--fio-forte); }
.dados a:hover { border-color: var(--tungstenio); color: var(--tungstenio); }

.dados__valor {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 92%;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  text-transform: uppercase;
  color: var(--osso);
  margin: 0;
}

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

.rodape { border-top: 1px solid var(--fio); padding-block: var(--e5) var(--e4); }

/* Espaço para o WhatsApp fixo não cobrir o fim da página no celular. */
@media (max-width: 61.99rem) { .rodape { padding-bottom: 5.5rem; } }

.rodape__topo { display: grid; gap: var(--e4); align-items: end; padding-bottom: var(--e5); }

@media (min-width: 54rem) {
  .rodape__topo { grid-template-columns: auto minmax(0, 1fr) auto; }
}

.rodape img { width: clamp(6rem, 12vw, 9rem); }

.rodape__links { display: flex; flex-wrap: wrap; gap: var(--e3); }
.rodape__links a { text-decoration: none; }
.rodape__links a:hover { color: var(--tungstenio); }

.rodape__pe {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e2);
  padding-top: var(--e3);
  border-top: 1px solid var(--fio);
}

/* Ação de WhatsApp fixa no celular, onde a pessoa realmente está. */
.zap-flutua {
  position: fixed;
  right: var(--e3);
  bottom: var(--e3);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: var(--osso);
  color: var(--breu);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 1rem 2.5rem -0.5rem oklch(0% 0 0 / 0.7);
  translate: 0 5rem;
  opacity: 0;
  transition: translate 0.6s var(--saida), opacity 0.4s var(--saida);
}

.zap-flutua.esta-visivel { translate: 0 0; opacity: 1; }

@media (min-width: 62rem) { .zap-flutua { display: none; } }

/* ================================================================== entrada */

.revela { opacity: 0; translate: 0 1.75rem; }

.revela.foi-revelado {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.9s var(--saida), translate 1s var(--saida);
}

.revela.foi-revelado[data-atraso="1"] { transition-delay: 0.08s; }
.revela.foi-revelado[data-atraso="2"] { transition-delay: 0.16s; }
.revela.foi-revelado[data-atraso="3"] { transition-delay: 0.24s; }

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .revela { opacity: 1; translate: none; }
  .zap-flutua { translate: 0 0; opacity: 1; }
}