/* ==========================================================================
   Churrascaria Silvestre
   Ardosia grafite, ambar saturado, branco carimbado e folhas desfocadas.
   Cores, tipografia e medidas ficam nas variaveis de :root.
   ========================================================================== */

@font-face {
  font-family: "League Spartan";
  src: url("../fonts/league-spartan.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/libre-franklin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/libre-franklin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --pedra: #1f1e1c;
  --pedra-clara: #2d2b28;
  --ambar: #ffa400;
  --ambar-forte: #ffb52e;
  --tinta: #191714;
  --tinta-suave: #3a2c10;
  --branco: #ffffff;
  --osso: #d8d3c9;

  --display: "League Spartan", "Arial Narrow", sans-serif;
  --texto: "Libre Franklin", "Trebuchet MS", sans-serif;

  --raio: 5px;
  --margem: clamp(20px, 5vw, 72px);
  --secao: clamp(76px, 10vw, 148px);
  --saida: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--ambar) var(--pedra);
}

body {
  margin: 0;
  background: var(--pedra) url("../img/ardosia.webp") 0 0 / 512px;
  color: var(--branco);
  font-family: var(--texto);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../img/ardosia-nuvem.webp") center / cover no-repeat;
  pointer-events: none;
}

img { display: block; max-width: 100%; height: auto; }
figure, blockquote, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
p { margin: 0; }
address { font-style: normal; }
a { color: inherit; text-underline-offset: .22em; }
::selection { background: var(--ambar); color: var(--tinta); }

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

.moldura {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--margem);
}

.secao { position: relative; padding-block: var(--secao); }
.secao--sem-topo { padding-top: 0; }

.pular {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--ambar);
  color: var(--tinta);
  font-weight: 700;
  border-radius: var(--raio);
}
.pular:focus { top: 12px; }

.icone { width: 1.25em; height: 1.25em; flex: none; }
.icone--estrela { width: 1.05em; height: 1.05em; color: var(--ambar); }
.ambar { color: var(--ambar); }
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Titulos carimbados ---------- */
.titulo,
.carimbo,
.dia__titulo {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: balance;
}

.titulo {
  margin: 0;
  font-size: clamp(2.3rem, 1.5rem + 3.3vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -.012em;
}
.titulo .ambar { display: block; }
.carimbo,
.luiza .titulo,
.fecho .titulo {
  padding-top: .2em;
  margin-top: -.2em;
  -webkit-mask: url("../img/carimbo.webp") 0 0 / 420px;
  mask: url("../img/carimbo.webp") 0 0 / 420px;
}
.titulo--tinta { color: var(--tinta); }

/* ---------- Botoes ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 54px;
  padding: .85em 1.5em .75em;
  background: var(--ambar);
  color: var(--tinta);
  border: 2px solid var(--ambar);
  border-radius: var(--raio);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7);
  transition: background-color .25s var(--saida), border-color .25s var(--saida), transform .25s var(--saida), box-shadow .25s var(--saida);
}
.botao .icone { margin-top: -.14em; }
.botao:hover { background: var(--ambar-forte); border-color: var(--ambar-forte); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(0, 0, 0, .8); }
.botao:active { transform: translateY(0); }
.botao--grande { min-height: 62px; padding-inline: 2em; font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem); }
.botao--tinta { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }
.botao--tinta:hover { background: #000; border-color: #000; }
.botao--tinta:focus-visible { outline-color: var(--tinta); }
.botao--contorno { background: transparent; color: var(--branco); border-color: var(--osso); box-shadow: none; }
.botao--contorno:hover { background: transparent; border-color: var(--ambar); color: var(--ambar); box-shadow: none; }

.link-zap {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding-block: .4em;
  color: var(--ambar);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.link-zap .icone { transition: transform .3s var(--saida); }
.link-zap:hover .icone { transform: translateX(5px); }

/* ---------- Placa ambar atras das fotos ---------- */
.placa {
  position: absolute;
  background: var(--ambar);
  border-radius: var(--raio);
}

.js .placa { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--saida); }
.js .placa.ver { clip-path: inset(0); }
.js .dia--entra .placa { animation: placa-entra .9s var(--saida) both; }
@keyframes placa-entra { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

/* ---------- Folhas ---------- */
.folhas {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.folhas--heroi {
  z-index: 2;
  top: -4%;
  left: -5%;
  width: min(54vw, 900px);
  transform-origin: 10% 10%;
  animation: balanco 16s ease-in-out infinite alternate;
}
.folhas--canto {
  right: -3%;
  top: -40px;
  width: min(52vw, 760px);
}
@keyframes balanco {
  from { transform: rotate(-.9deg) translate3d(0, 0, 0); }
  to { transform: rotate(1.4deg) translate3d(10px, 6px, 0); }
}

/* ---------- Topo ---------- */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px var(--margem);
  transition: background-color .35s var(--saida), padding .35s var(--saida), box-shadow .35s var(--saida);
}
.topo--solido {
  padding-block: 10px;
  background: var(--tinta);
  box-shadow: 0 10px 28px -18px rgba(0, 0, 0, .9);
}
.topo__logo {
  flex: none;
  border-radius: 50%;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .7);
}
.topo__logo img {
  width: clamp(62px, 6vw, 88px);
  height: auto;
  border-radius: 50%;
  transition: width .35s var(--saida);
}
.topo--solido .topo__logo img { width: 54px; }

.topo__nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  margin-left: auto;
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.topo__nav a:not(.topo__nav-zap) {
  text-decoration: none;
  padding-block: .4em;
  background: linear-gradient(var(--ambar), var(--ambar)) 0 100% / 0 2px no-repeat;
  transition: background-size .3s var(--saida), color .2s;
}
.topo__nav a:not(.topo__nav-zap):hover { background-size: 100% 2px; color: var(--ambar); }
.topo__nav-zap { display: none; }

.topo__zap {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 46px;
  padding: .55em 1em .45em;
  background: var(--ambar);
  color: var(--tinta);
  border-radius: var(--raio);
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .25s var(--saida);
}
.topo__zap:hover { background: var(--ambar-forte); }
.topo__zap .icone { margin-top: -.14em; }

.topo__botao-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 9px;
  background: rgba(25, 23, 20, .72);
  border: 0;
  border-radius: var(--raio);
  cursor: pointer;
}
.topo__botao-menu span {
  display: block;
  height: 4px;
  background: var(--ambar);
  transition: transform .3s var(--saida), opacity .2s;
}
.topo__botao-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.topo__botao-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topo__botao-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---------- Primeira dobra ---------- */
.heroi {
  position: relative;
  display: grid;
  grid-template-columns: 46% 54%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  border-bottom: 6px solid var(--ambar);
}
.heroi__foto { position: relative; min-height: 100%; background: var(--tinta); }
.heroi__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.heroi__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 78%, rgba(31, 30, 28, .8) 100%),
    linear-gradient(180deg, rgba(20, 19, 17, .55) 0%, transparent 26%);
}

.heroi__texto {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.2vh, 26px);
  padding: clamp(100px, 12vh, 124px) clamp(24px, 5vw, 80px) clamp(196px, 25vh, 236px);
  text-align: center;
}
.heroi__titulo { margin: 0; font: inherit; }
.carimbo {
  display: block;
  font-size: clamp(3.3rem, 1.2rem + 5.6vw, 7.5rem);
  line-height: .96;
  letter-spacing: -.012em;
}
.carimbo--ambar { color: var(--ambar); }

.heroi__apoio { max-width: 34em; }
.nota-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  color: var(--osso);
  font-size: .95rem;
}
.nota-google strong { color: var(--branco); }

.heroi__hoje {
  position: absolute;
  z-index: 3;
  bottom: 0;
  right: 27%;
  width: min(47%, 680px);
  transform: translateX(50%);
  padding: 20px 28px 16px;
  background: var(--ambar);
  color: var(--tinta);
  border-radius: var(--raio) var(--raio) 0 0;
  text-align: center;
  box-shadow: 0 -14px 34px -22px rgba(0, 0, 0, .9);
}
.heroi__hoje-dia {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.heroi__hoje-pratos { margin-top: .25em; font-size: clamp(1.02rem, .96rem + .2vw, 1.15rem); font-weight: 500; line-height: 1.35; }
.heroi__hoje-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 22px;
  margin-top: .25em;
}
.heroi__hoje-zap,
.heroi__hoje-link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 44px;
  font-size: .95rem;
  font-weight: 700;
}
.heroi__hoje-zap .icone { width: 1.2em; height: 1.2em; }
.heroi__hoje-zap:focus-visible { outline-color: var(--tinta); }
.heroi__hoje-link { font-weight: 600; }
.heroi__hoje-link .icone { transform: rotate(90deg); transition: transform .3s var(--saida); width: 1.05em; height: 1.05em; }
.heroi__hoje-link:hover .icone { transform: rotate(90deg) translateX(4px); }
.heroi__hoje-link:focus-visible { outline-color: var(--tinta); }

/* ---------- Cardapio ---------- */
.cardapio { overflow: hidden; }
.cardapio .moldura { position: relative; }
.cardapio__topo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 24px 64px;
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.cardapio__intro { max-width: 34em; color: var(--osso); }

.abas {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.aba {
  position: relative;
  min-height: 62px;
  padding: 12px 2px 6px;
  background: var(--pedra-clara);
  color: var(--branco);
  border: 0;
  border-radius: var(--raio);
  font-family: var(--display);
  font-size: clamp(.95rem, .8rem + .75vw, 1.45rem);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--saida), color .25s var(--saida);
}
.aba:hover { background: #3b3834; }
.aba[aria-selected="true"] { background: var(--ambar); color: var(--tinta); }
.aba small {
  display: block;
  margin-top: 5px;
  font-family: var(--texto);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}

.dia {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.js .dia[hidden] { display: none; }
.dia:not(:first-of-type) { margin-top: 48px; }
.js .dia { margin-top: 0; }
.dia__foto { position: relative; padding-block: 28px; }
.dia__foto .placa { inset: 0 13%; }
.dia__foto img {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: var(--raio);
}
.dia__titulo {
  margin: 0 0 .35em;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.008em;
}
.dia__destaque {
  max-width: 34em;
  color: var(--ambar);
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.4;
}
.dia__extra { margin-top: 1em; max-width: 34em; color: var(--osso); }
.dia__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 36px;
  margin: clamp(18px, 2.4vw, 28px) 0 clamp(22px, 2.8vw, 32px);
  color: var(--osso);
  font-size: .98em;
}
.dia__lista li {
  padding: .42em 0 .36em;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  line-height: 1.32;
}
.dia__extra + .botao { margin-top: 1.6em; }
.js .dia--entra .dia__foto img { animation: revela .8s var(--saida) both; }
.js .dia--entra .dia__texto { animation: sobe .7s var(--saida) both; }
@keyframes revela { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes sobe { from { opacity: .3; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.cardapio__aviso { margin-top: clamp(28px, 4vw, 44px); color: var(--osso); font-size: .92em; }

/* ---------- A brasa ---------- */
.fila__grade {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 7vw, 112px);
  align-items: center;
}
.fila__foto { position: relative; padding-block: 32px; }
.fila__foto .placa { inset: 0 13%; }
.fila__foto img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--raio);
}
.fila__texto p { max-width: 30em; margin-block: 1.3em 1.1em; color: var(--osso); font-size: 1.1em; }
.fila__corte {
  width: 100%;
  margin-top: clamp(24px, 3vw, 40px);
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: var(--raio);
}
.cardapio { padding-bottom: calc(var(--secao) * .55); }
.fila { padding-top: calc(var(--secao) * .45); }

/* ---------- O buffet ---------- */
.buffet__grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
}
.buffet__texto { grid-column: 1 / span 6; align-self: center; padding-right: clamp(0px, 5vw, 80px); }
.buffet__texto p { max-width: 32em; margin-top: 1.1em; color: var(--osso); }
.buffet__texto .titulo + p { margin-top: 1.3em; }
.buffet__texto .buffet__pedidos { color: var(--ambar); font-weight: 600; }
.buffet__foto { position: relative; overflow: hidden; border-radius: var(--raio); }
.buffet__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--saida); }
.buffet__foto:hover img { transform: scale(1.035); }
.buffet__foto figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .55em .85em .42em;
  background: var(--ambar);
  color: var(--tinta);
  border-radius: 0 var(--raio) 0 0;
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.15;
  text-transform: uppercase;
}
.buffet__foto--a { grid-column: 7 / span 6; aspect-ratio: 1 / 1; }
.buffet__foto--b { grid-column: 1 / span 5; aspect-ratio: 5 / 4; }
.buffet__foto--c { grid-column: 6 / span 7; aspect-ratio: 7 / 4; }
.buffet__foto--b img { object-position: 50% 45%; }
.buffet__foto--c img { object-position: 50% 58%; }

/* ---------- Dona Luiza (faixa ambar) ---------- */
.luiza {
  position: relative;
  padding: clamp(64px, 8vw, 112px) var(--margem);
  background: var(--ambar);
  color: var(--tinta);
  overflow: hidden;
}
.luiza > .moldura,
.fecho > .moldura {
  max-width: calc(1320px - 2 * var(--margem));
  padding-inline: 0;
}
.luiza__grade {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.luiza .titulo { font-size: clamp(2.5rem, 1.4rem + 4.5vw, 5.4rem); }
.luiza__lead { max-width: 28em; margin-top: 1.1em; font-size: 1.22em; font-weight: 500; line-height: 1.42; }
.luiza__falas { margin-block: clamp(24px, 3vw, 36px); }
.luiza__falas li { padding-block: 1em .85em; border-top: 2px solid var(--tinta); max-width: 38em; }
.luiza__falas blockquote { font-style: italic; }
.luiza__falas cite {
  display: block;
  margin-top: .3em;
  color: var(--tinta-suave);
  font-size: .9em;
  font-style: normal;
  font-weight: 600;
}
.luiza__foto { position: relative; }
.luiza__foto img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; border-radius: var(--raio); }

/* ---------- Avaliacoes ---------- */
.avaliacoes__nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3em .55em;
  margin-top: 1.1em;
  color: var(--osso);
}
.avaliacoes__nota strong { color: var(--branco); }
.avaliacoes__grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 88px);
  margin-block: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 44px);
}
.fala blockquote { line-height: 1.5; }
.fala figcaption {
  margin-top: .55em;
  color: var(--ambar);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.fala--grande blockquote {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.05rem);
  font-weight: 500;
  line-height: 1.3;
}
.fala--grande figcaption { margin-top: .9em; font-size: 1.1rem; }
.avaliacoes__colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 52px);
  align-content: start;
}
.avaliacoes__colunas .fala { padding-top: 1em; border-top: 1px solid rgba(255, 255, 255, .17); color: var(--osso); }

/* ---------- Perguntas ---------- */
.perguntas__grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: start;
}
.perguntas__topo { position: sticky; top: 110px; }
.perguntas__topo p { max-width: 26em; margin-top: 1.1em; color: var(--osso); }
.perguntas__lista li + li { margin-top: 4px; }
.perguntas__lista a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
  padding: 1em 1.2em .9em;
  background: var(--pedra-clara);
  border-radius: var(--raio);
  font-family: var(--display);
  font-size: clamp(1.1rem, .92rem + .8vw, 1.6rem);
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color .3s var(--saida);
}
.perguntas__lista a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ambar);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s var(--saida);
}
.perguntas__lista a:hover,
.perguntas__lista a:focus-visible { color: var(--tinta); }
.perguntas__lista a:hover::before,
.perguntas__lista a:focus-visible::before { transform: scaleX(1); }
.perguntas__lista .icone { color: var(--ambar); margin-top: -.1em; transition: color .3s var(--saida); }
.perguntas__lista a:hover .icone,
.perguntas__lista a:focus-visible .icone { color: var(--tinta); }

/* ---------- Onde estamos ---------- */
.onde { overflow: hidden; }
.onde__grade {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.onde address { margin-top: 1.3em; font-size: 1.14em; line-height: 1.45; }
.onde__rotulo {
  margin: 1.8em 0 .3em;
  color: var(--ambar);
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.horarios { max-width: 34em; font-variant-numeric: tabular-nums; }
.horarios div {
  display: flex;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  padding: .6em 0 .5em;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.horarios dd { font-weight: 600; }
.horarios dd a { color: var(--ambar); }
.onde__extras { max-width: 34em; margin-top: 1.1em; color: var(--osso); font-size: .96em; }
.onde__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }
.onde__foto { position: relative; padding-block: 28px; }
.onde__foto .placa { inset: 0 13%; }
.onde__recorte { position: relative; overflow: hidden; border-radius: var(--raio); }
.onde__recorte img { width: 100%; aspect-ratio: 9 / 11; object-fit: cover; }

/* ---------- Fechamento ---------- */
.fecho {
  padding: clamp(56px, 7vw, 100px) var(--margem);
  background: var(--ambar);
  color: var(--tinta);
}
.fecho__grade {
  display: grid;
  grid-template-columns: minmax(0, 8fr) auto;
  gap: 28px 64px;
  align-items: center;
}
.fecho .titulo { font-size: clamp(2.3rem, 1.3rem + 4vw, 5rem); }
.fecho__acao { text-align: center; }
.fecho__acao p {
  margin-top: .6em;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Rodape ---------- */
.rodape { padding-block: 28px; background: var(--tinta); color: var(--osso); font-size: .92rem; }
.rodape__grade { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.rodape__grade img { width: 52px; border-radius: 50%; }
.rodape__grade a { margin-left: auto; padding-block: .5em; color: var(--ambar); }

/* ---------- Barra fixa do celular ---------- */
.barra-zap {
  position: fixed;
  inset: auto 0 0;
  z-index: 45;
  display: none;
  padding: 10px var(--margem) calc(10px + env(safe-area-inset-bottom));
  background: var(--tinta);
  box-shadow: 0 -10px 26px -18px #000;
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .4s var(--saida), visibility .4s;
}
.barra-zap .botao { width: 100%; }
.barra-zap--ver { transform: none; visibility: visible; }

/* ==========================================================================
   Telas ate 1100px
   ========================================================================== */
@media (max-width: 1100px) {
  .topo__nav a:not(.topo__nav-zap) { letter-spacing: .06em; }
  .heroi__hoje { width: min(50%, 520px); }
}

/* ==========================================================================
   Tablet e celular
   ========================================================================== */
@media (max-width: 900px) {
  html { scroll-padding-top: 78px; }

  .topo { padding-block: 12px; justify-content: space-between; }
  .topo__zap { display: none; }
  .topo__botao-menu { display: flex; margin-left: auto; }

  .topo__nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 104px var(--margem) 32px;
    background: var(--tinta);
    font-size: 1.5rem;
    letter-spacing: .02em;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s var(--saida), visibility .25s;
  }
  .topo__nav--aberto { visibility: visible; opacity: 1; }
  .topo__nav a:not(.topo__nav-zap) { width: 100%; padding-block: .55em; border-bottom: 1px solid rgba(255, 255, 255, .14); background: none; }
  .topo__nav-zap {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    margin-top: 18px;
    padding: .7em 1.2em .6em;
    background: var(--ambar);
    color: var(--tinta);
    border-radius: var(--raio);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
  }

  .heroi { display: block; min-height: 0; border-bottom: 0; }
  .heroi__foto { height: clamp(240px, 36svh, 440px); min-height: 0; }
  .heroi__foto::after { background: linear-gradient(180deg, rgba(20, 19, 17, .55) 0%, transparent 34%); }
  .folhas--heroi { top: -24px; left: -70px; width: clamp(320px, 52vw, 560px); }
  .topo--solido { padding-block: 7px; }
  .topo--solido .topo__logo img { width: 48px; }
  .heroi__texto { padding: 26px var(--margem) 30px; gap: 14px; }
  .carimbo { font-size: clamp(3.1rem, 2rem + 6.8vw, 5.4rem); }
  .heroi__apoio { max-width: 30em; }
  .botao--grande { width: 100%; max-width: 480px; }
  .heroi__hoje {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    padding: 20px var(--margem) 18px;
    border-radius: 0;
    box-shadow: none;
  }

  .cardapio__topo { grid-template-columns: 1fr; }
  .folhas--canto { top: -40px; width: 520px; right: -160px; }
  .avaliacoes__grade, .perguntas__grade { grid-template-columns: 1fr; }
  .dia__lista { grid-template-columns: 1fr; }
  .dia, .fila__grade, .luiza__grade, .onde__grade { gap: 36px; }

  .buffet__texto { grid-column: 1 / -1; padding-right: 0; margin-bottom: 20px; }
  .buffet__foto--a { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .buffet__foto--b, .buffet__foto--c { grid-column: span 6; aspect-ratio: 1 / 1; }
  .buffet__foto figcaption { font-size: .8rem; }

  .perguntas__topo { position: static; }
  .perguntas__lista a { min-height: 64px; }

  .fecho__grade { grid-template-columns: 1fr; }
  .fecho__acao { text-align: left; }
  .rodape { padding-bottom: 96px; }

  .barra-zap { display: block; }
}

/* Tablet: foto ao lado do titulo do dia, com a lista inteira embaixo */
@media (min-width: 701px) and (max-width: 900px) {
  .dia {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "foto titulo"
      "foto destaque"
      "lista lista"
      "botao botao";
    gap: 0 36px;
  }
  .dia__foto { grid-area: foto; }
  .dia__texto { display: contents; }
  .dia__titulo { grid-area: titulo; align-self: end; }
  .dia__destaque { grid-area: destaque; align-self: start; }
  .dia__lista, .dia__extra { grid-area: lista; }
  .dia__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: 24px; }
  .dia__extra { margin-top: 24px; max-width: none; }
  .dia .botao { grid-area: botao; justify-self: start; margin-top: 20px; }
}

/* Celular: uma coluna, com as fotos ocupando toda a largura */
@media (max-width: 700px) {
  .dia, .fila__grade, .luiza__grade, .onde__grade { grid-template-columns: 1fr; }
  .dia__foto img { aspect-ratio: 5 / 4; }
  .dia__titulo { margin-top: .1em; }
  .fila__foto img { aspect-ratio: 1 / 1; object-position: 50% 72%; }
  .luiza__foto { order: -1; }
  .luiza__foto img { aspect-ratio: 1 / 1; object-position: 50% 8%; }
  .onde__foto { order: -1; }
  .onde__recorte img { aspect-ratio: 5 / 4; object-position: 50% 62%; }
}

@media (max-width: 560px) {
  .aba { min-height: 56px; }
  .aba small { font-size: .72rem; }
  .avaliacoes__colunas { grid-template-columns: 1fr; }
  .onde__acoes .botao { width: 100%; }
  .rodape__grade a { margin-left: 0; }
}

@media (min-width: 901px) and (max-height: 760px) {
  .carimbo { font-size: clamp(3.3rem, 11vh, 5.2rem); }
  .heroi__texto { gap: 12px; padding-bottom: 190px; }
  .heroi__hoje { padding-block: 12px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .placa { clip-path: none; }
}