/* =========================================================
   Les Charcutiers
   Azul da fachada no topo, azul-marinho do logo no texto,
   branco e mármore das fotos do catálogo.
   ========================================================= */

@property --h {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --azul: #022866;          /* azul-marinho do logo */
  --fachada: #1b56b0;       /* azul da fachada e das sacolas */
  --fachada-escuro: #15468f;
  --aqua: #c0e3e7;          /* fundo azul-claro das fotos de produto */
  --aqua-claro: #e4f0f2;
  --marmore: #eeede8;       /* fundo de mármore das fotos */
  --foto-fundo: #e2e1dc;
  --branco: #ffffff;
  --tinta: #0b1d42;
  --tinta-suave: #3f4b66;
  --linha: rgba(2, 40, 102, 0.14);
  --linha-forte: rgba(2, 40, 102, 0.32);

  --display: "Bebas Neue", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --texto: "EB Garamond", Garamond, "Times New Roman", serif;

  --largura: 1240px;
  --margem: clamp(16px, 4vw, 48px);
  --recuo: max(var(--margem), calc((100vw - var(--largura)) / 2));
  --topo-altura: 64px;
  --suave: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-altura) + 16px);
  -webkit-text-size-adjust: 100%;
}

/* Lenis (rolagem suave) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.1875rem;
  line-height: 1.55;
  font-feature-settings: "kern", "liga", "onum";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; max-width: 60ch; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.01em;
}

h2 {
  font-size: clamp(2.8rem, 5.6vw, 4.75rem);
  line-height: 0.92;
  color: var(--azul);
  margin-bottom: 0.45em;
}

.lead {
  font-size: clamp(1.3rem, 2vw, 1.5rem);
  line-height: 1.38;
  max-width: 34ch;
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  background: var(--branco);
  color: var(--azul);
  padding: 0.6em 1em;
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}
.pular:focus { top: 12px; }

.largura {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}

.secao { padding-block: clamp(4.5rem, 9vw, 8rem); }

/* Palavras dos títulos (animadas) */
.palavra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* folga para os acentos (Â, Ô, É) não serem cortados */
  padding: 0.16em 0.03em 0.06em;
  margin: -0.16em -0.03em -0.06em;
}
.palavra > span { display: inline-block; will-change: transform; }

/* Estados iniciais só quando a animação vai rodar */
.anim [data-palavras] { visibility: hidden; }
.anim [data-revelar]:not([data-revelar="foto"]),
.anim [data-abertura-item],
.anim .produto,
.anim .cat-bloco { opacity: 0; }
.anim [data-revelar="foto"] { clip-path: inset(100% 0 0 0); }

.foto-moldura { overflow: hidden; }
.foto-moldura img { will-change: transform; }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.66em 1.15em 0.54em;
  border: 2px solid transparent;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--suave), border-color 0.35s var(--suave);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s var(--suave);
}
.btn:hover::before { transform: scaleY(1); }

.btn-claro { background: var(--branco); color: var(--azul); }
.btn-claro::before { background: var(--aqua); }
.btn-contorno-claro { border-color: var(--branco); color: var(--branco); }
.btn-contorno-claro::before { background: var(--branco); }
.btn-contorno-claro:hover { color: var(--azul); }
.btn-azul { background: var(--fachada); color: var(--branco); }
.btn-azul::before { background: var(--azul); }
.btn-largo { width: 100%; }

.icone-wa { width: 1.05em; height: 1.05em; flex: none; margin-top: -0.12em; }

/* ---------- Topo (a placa da loja) ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fachada);
  color: var(--branco);
}

.topo-faixa {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
  height: var(--topo-altura);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex: none;
}
.marca img { width: 40px; height: 40px; object-fit: contain; transition: transform 0.6s var(--suave); }
.marca:hover img { transform: rotate(-12deg); }
.marca-nome {
  font-family: var(--display);
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  line-height: 1;
  padding-top: 0.12em;
}

.menu {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}
.menu a {
  position: relative;
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding-block: 0.4em 0.25em;
  white-space: nowrap;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--suave);
}
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }

.topo-acoes { display: flex; align-items: center; gap: 0.75rem; }

.btn-lista {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  background: var(--branco);
  color: var(--azul);
  border: 0;
  border-radius: 3px;
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.5em 0.6em 0.5em 0.85em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s;
}
.btn-lista:hover { background: var(--aqua); }
.ic-lista { display: none; width: 22px; height: 22px; flex: none; }

.contador {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0.12em 0.35em 0;
  border-radius: 999px;
  background: var(--azul);
  color: var(--branco);
  font-size: 0.85em;
}
.contador[data-zero] { background: var(--linha-forte); }
.contador.pulo { animation: pulo 0.45s var(--suave); }
@keyframes pulo { 40% { transform: scale(1.45); } }

.btn-menu {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  place-items: center;
}
.btn-menu-icone,
.btn-menu-icone::before,
.btn-menu-icone::after {
  display: block;
  width: 24px; height: 2px;
  background: var(--branco);
  position: relative;
  transition: transform 0.3s var(--suave), background-color 0.2s;
}
.btn-menu-icone::before,
.btn-menu-icone::after { content: ""; position: absolute; left: 0; }
.btn-menu-icone::before { top: -7px; }
.btn-menu-icone::after { top: 7px; }
.btn-menu[aria-expanded="true"] .btn-menu-icone { background: transparent; }
.btn-menu[aria-expanded="true"] .btn-menu-icone::before { transform: translateY(7px) rotate(45deg); }
.btn-menu[aria-expanded="true"] .btn-menu-icone::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Abertura ---------- */

.abertura {
  position: relative;
  height: calc(100svh - var(--topo-altura));
  min-height: 600px;
  background: var(--azul) url("../video/preparo-poster.jpg") center / cover no-repeat;
  color: var(--branco);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.abertura-midia {
  position: absolute;
  left: 0; right: 0;
  top: -8%;
  height: 116%;
}
.abertura-video {
  width: 100%; height: 100%;
  object-fit: cover;
}

.abertura-veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(2, 18, 52, 0.92) 0%, rgba(2, 18, 52, 0.5) 40%, rgba(2, 18, 52, 0.1) 75%),
    linear-gradient(to right, rgba(2, 18, 52, 0.5) 0%, rgba(2, 18, 52, 0) 62%);
}

.abertura-conteudo {
  position: relative;
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin-inline: auto;
  padding: 0 var(--margem) clamp(2rem, 5vh, 3.5rem);
}

.abertura-titulo {
  font-size: clamp(3.4rem, 8.4vw, 8.5rem);
  line-height: 0.88;
  max-width: 13ch;
  margin-bottom: 0.3em;
}

.abertura-texto {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.42;
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.6rem;
}

.abertura-botoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.selo-giratorio {
  position: absolute;
  right: var(--recuo);
  bottom: calc(5.5rem + clamp(2rem, 5vh, 3.5rem));
  width: clamp(130px, 12vw, 176px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.selo-texto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  animation: girar 24s linear infinite;
}
.selo-texto text {
  font-family: var(--display);
  font-size: 16.4px;
  letter-spacing: 2.1px;
  fill: var(--branco);
}
.selo-giratorio img { width: 40%; height: auto; }
@keyframes girar { to { transform: rotate(360deg); } }

.abertura-rodape {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(2, 18, 52, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.abertura-rodape-faixa {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin-inline: auto;
  padding: 0.9rem var(--margem);
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.82);
}
.abertura-rodape p { margin: 0; white-space: nowrap; }
.abertura-rodape p span {
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: var(--branco);
  margin-right: 0.3em;
}

.rolar {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--branco);
}
.rolar-linha {
  position: relative;
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.rolar-linha::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 45%;
  background: var(--branco);
  animation: descer 1.8s var(--suave) infinite;
}
@keyframes descer { from { transform: translateY(-100%); } to { transform: translateY(230%); } }

.video-controle {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  color: var(--branco);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
}
.video-controle:hover { background: rgba(255, 255, 255, 0.15); }
.video-controle svg { width: 16px; height: 16px; fill: currentColor; grid-area: 1 / 1; }
.video-controle .ic-play { display: none; }
.video-controle[aria-pressed="true"] .ic-pausa { display: none; }
.video-controle[aria-pressed="true"] .ic-play { display: block; }

/* ---------- Letreiro (faixa que corre) ---------- */

.letreiro {
  background: var(--azul);
  color: var(--branco);
  overflow: hidden;
  padding-block: clamp(1rem, 2vw, 1.5rem);
}
.letreiro-trilho {
  display: flex;
  width: max-content;
  animation: correr 46s linear infinite;
}
.letreiro-trilho.com-gsap { animation: none; }
.letreiro-grupo {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  padding-right: clamp(1.25rem, 2.4vw, 2.25rem);
  flex: none;
}
.letreiro span {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 1;
  padding-top: 0.1em;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.letreiro span:nth-of-type(even) {
  color: transparent;
  -webkit-text-stroke: 1.3px rgba(255, 255, 255, 0.9);
}
.letreiro img { width: clamp(30px, 3vw, 44px); height: auto; flex: none; }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- Pâté croûte ---------- */

.croute { background: var(--aqua-claro); }

.croute-grade {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.croute-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.cortes {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.cortes a { display: block; text-decoration: none; color: var(--azul); }
.cortes-foto { display: block; overflow: hidden; background: var(--foto-fundo); }
.cortes img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  transition: transform 0.8s var(--suave);
}
.cortes a:hover img { transform: scale(1.08) rotate(-1.5deg); }
.cortes-nome {
  display: block;
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
  line-height: 1;
}

/* ---------- Produtos ---------- */

.produtos-cabeca {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: 2.5rem;
}
.produtos-cabeca h2 { margin-bottom: 0; }
.aviso { font-style: italic; color: var(--tinta-suave); margin-bottom: 0.4em; }
.produtos-como { margin-bottom: 0; }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-block: 1.1rem;
  border-block: 1px solid var(--linha);
  position: sticky;
  top: var(--topo-altura);
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.filtros button {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.55em 0.85em 0.42em;
  border: 1.5px solid var(--linha-forte);
  border-radius: 3px;
  background: var(--branco);
  color: var(--azul);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.filtros button:hover { border-color: var(--azul); }
.filtros button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--branco); }

.grupo { padding-top: clamp(2.5rem, 4.5vw, 3.75rem); }
.grupo[hidden] { display: none; }

/* Grade: 4 colunas no computador, 3 no tablet, 2 no celular.
   O bloco de abertura de cada categoria ocupa as casas que sobrariam,
   então nenhuma linha fica com um produto sozinho. */
.grade-produtos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.75rem 1.5rem;
}
.cat-bloco[data-s4="1"] { grid-column: span 1; }
.cat-bloco[data-s4="2"] { grid-column: span 2; }
.cat-bloco[data-s4="3"] { grid-column: span 3; }
.cat-bloco[data-s4="cheio"] { grid-column: 1 / -1; min-height: clamp(220px, 22vw, 300px); }

/* Bloco em largura total: foto só na metade direita, texto sobre o azul */
.cat-bloco[data-s4="cheio"] .cat-bloco-foto { left: 42%; }
.cat-bloco[data-s4="cheio"] .cat-bloco-foto::after {
  background: linear-gradient(to right, var(--azul) 0%, rgba(2, 40, 102, 0.6) 22%, rgba(2, 40, 102, 0) 60%);
}
.cat-bloco[data-s4="cheio"] .cat-bloco-texto { max-width: 40%; }

.cat-bloco {
  position: relative;
  overflow: hidden;
  background: var(--azul);
  color: var(--branco);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.1rem, 2vw, 1.75rem);
  min-height: 100%;
  isolation: isolate;
}
.cat-bloco-foto {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.cat-bloco-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--suave);
}
.cat-bloco:hover .cat-bloco-foto img { transform: scale(1.05); }
.cat-bloco-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 18, 52, 0.94) 0%, rgba(2, 18, 52, 0.55) 45%, rgba(2, 18, 52, 0.05) 100%);
}
.cat-bloco.sem-foto::before {
  content: "";
  position: absolute;
  right: -12%;
  top: -10%;
  width: 70%;
  aspect-ratio: 1;
  background: url("../img/marca/selo-branco.png") center / contain no-repeat;
  opacity: 0.08;
  z-index: -1;
}
.cat-bloco h3 {
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 0.95;
}
.cat-bloco p {
  font-size: 1.05rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  max-width: 36ch;
  margin: 0.6rem 0 0;
}
.cat-conta {
  display: block;
  margin-top: 0.9rem;
  font-style: italic;
  font-size: 1rem;
  color: var(--aqua);
}

.produto {
  display: flex;
  flex-direction: column;
  height: 100%;
  scroll-margin-top: calc(var(--topo-altura) + 110px);
}

.produto-foto {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--foto-fundo);
}
.produto-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--suave);
}
.produto:hover .produto-foto img { transform: scale(1.06); }

.produto h4 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--azul);
  margin: 0.9rem 0 0.35rem;
}

.produto-desc {
  font-size: 1.03rem;
  line-height: 1.42;
  color: var(--tinta-suave);
  margin: 0;
  flex: 1;
}

.produto-preco { font-weight: 600; font-size: 1.05rem; margin: 0.5rem 0 0; }

.produto-acao { margin-top: 1rem; }

.btn-add {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.62em 0.8em 0.5em;
  border: 1.5px solid var(--azul);
  border-radius: 3px;
  background: transparent;
  color: var(--azul);
  cursor: pointer;
  min-height: 44px;
  transition: color 0.35s var(--suave);
}
.btn-add::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--suave);
}
.btn-add:hover { color: var(--branco); }
.btn-add:hover::before { transform: scaleX(1); }

.passo {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 44px;
  border-radius: 3px;
  background: var(--azul);
  color: var(--branco);
  animation: entrar-passo 0.35s var(--suave);
}
@keyframes entrar-passo { from { transform: scale(0.94); opacity: 0.4; } }
.passo button {
  height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.passo button:hover { background: rgba(255, 255, 255, 0.14); }
.passo output { text-align: center; font-size: 1rem; }

.produto:target .produto-foto { outline: 3px solid var(--fachada); outline-offset: 4px; }

/* ---------- Tempo ---------- */

.tempo { background: var(--azul); color: var(--branco); }
.tempo h2 { color: var(--branco); }
.tempo .lead { color: rgba(255, 255, 255, 0.9); }

.tempo-grade {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.tempo-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.tempos { margin: 2rem 0 0; }
.tempos > div {
  --l: 1;
  position: relative;
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1.5rem;
  padding-block: 1.35rem;
}
.tempos > div::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
  transform: scaleX(var(--l));
  transform-origin: left;
}
.anim .tempos > div { --l: 0; }
.tempos dt {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--aqua);
}
.tempo-num {
  display: block;
  font-size: 4.4rem;
  line-height: 0.82;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
}
.tempos dd { margin: 0; font-size: 1.12rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); max-width: 46ch; }
.tempos strong { color: var(--branco); font-weight: 600; }

/* ---------- História ---------- */

.historia-grade {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2.5rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linha);
}
.numeros dt {
  display: flex;
  align-items: baseline;
  font-family: var(--display);
  font-size: clamp(3.2rem, 5.6vw, 5.25rem);
  line-height: 0.85;
  color: var(--fachada);
  font-variant-numeric: tabular-nums;
}
.numeros small { font-size: 0.42em; margin-left: 0.12em; color: var(--azul); letter-spacing: 0.03em; }
.numeros dd { margin: 0.6rem 0 0; font-size: 1.02rem; line-height: 1.38; color: var(--tinta-suave); max-width: 20ch; }

.historia-fotos { position: relative; padding-bottom: 16%; }
.historia-foto { width: 82%; margin-left: auto; }
.historia-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.historia-foto-2 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56%;
  border: 8px solid var(--branco);
  box-shadow: 0 18px 40px rgba(2, 18, 52, 0.18);
}
.historia-foto-2 img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.linha-tempo {
  --progresso: 1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: clamp(4rem, 8vw, 6.5rem) 0 0;
  padding: 2.4rem 0 0;
  position: relative;
}
.anim .linha-tempo { --progresso: 0; }
.linha-tempo::before,
.linha-tempo::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.linha-tempo::before { background: var(--linha); }
.linha-tempo::after {
  background: var(--fachada);
  transform: scaleX(var(--progresso));
  transform-origin: left;
}
.linha-tempo li { position: relative; }
.linha-tempo li::before {
  content: "";
  position: absolute;
  top: calc(-2.4rem - 7px);
  left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--branco);
  border: 3px solid var(--fachada);
  z-index: 1;
}
.linha-tempo-ano {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  line-height: 0.9;
  color: var(--azul);
  margin-bottom: 0.5rem;
}
.linha-tempo p { margin: 0; font-size: 1.08rem; color: var(--tinta-suave); max-width: 30ch; }

/* ---------- Na mesa ---------- */

.mesa { background: var(--marmore); padding-block: clamp(4.5rem, 9vw, 8rem); }
.mesa-cabeca .lead { margin-bottom: 2.25rem; }
.mesa-janela { max-width: calc(var(--largura) + 2 * var(--margem)); margin-inline: auto; padding-inline: var(--margem); }
.mesa-trilho {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.25rem;
}
.mesa-foto { display: block; overflow: hidden; }
.mesa-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1s var(--suave); }
.mesa-trilho figure:hover .mesa-foto img { transform: scale(1.05); }
.mesa-trilho figcaption { font-style: italic; font-size: 1.05rem; color: var(--tinta-suave); margin-top: 0.6rem; }
.mesa-progresso { display: none; }

/* Versão animada: a seção trava e as fotos andam para o lado */
.mesa.mesa-ativa { padding-block: 0; }
.mesa-ativa .mesa-palco {
  height: 100svh;
  padding-top: var(--topo-altura);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.mesa-ativa .mesa-cabeca { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.mesa-ativa .mesa-cabeca h2 { margin-bottom: 0.2em; }
.mesa-ativa .mesa-cabeca .lead { margin-bottom: 1.6rem; text-align: right; }
.mesa-ativa .mesa-janela { max-width: none; padding: 0; }
.mesa-ativa .mesa-trilho {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: max-content;
  padding-inline: var(--recuo);
  will-change: transform;
}
.mesa-ativa .mesa-trilho figure {
  flex: none;
  width: min(24vw, calc((100svh - var(--topo-altura) - 330px) * 0.8), 340px);
  min-width: 200px;
}
.mesa-ativa .mesa-trilho figure:nth-child(even) { transform: translateY(2.25rem); }
.mesa-ativa .mesa-progresso {
  display: block;
  margin-top: 3.25rem;
}
.mesa-ativa .mesa-progresso span {
  display: block;
  height: 2px;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 0 0 transparent;
  position: relative;
}
.mesa-ativa .mesa-progresso::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--linha);
  margin-bottom: -2px;
}

/* ---------- Restaurantes ---------- */

.restaurantes { background: var(--fachada); color: var(--branco); overflow: hidden; }
.restaurantes h2 { color: var(--branco); }
.restaurantes p { color: rgba(255, 255, 255, 0.92); }

.restaurantes-grade {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.etapas { list-style: none; padding: 0; margin: 2.25rem 0 0; }
.etapas li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  padding-block: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}
.etapas li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.24); }
.etapa-num {
  font-family: var(--display);
  font-size: 3rem;
  line-height: 0.85;
  color: var(--aqua);
}
.etapas h3 { font-size: 1.6rem; letter-spacing: 0.03em; line-height: 1; margin: 0.1rem 0 0.3rem; }
.etapas p { margin: 0; font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); }

.restaurantes-botoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.leque {
  --abrir: 1;
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  transition: --h 0.6s var(--suave);
}
.anim .leque { --abrir: 0; }
.leque:hover,
.leque:focus-visible { --h: 1; }
.leque-pagina {
  position: absolute;
  width: 80%;
  left: 10%;
  top: 14%;
  border-radius: 3px;
  box-shadow: 0 22px 50px rgba(2, 18, 52, 0.4);
  transform-origin: 50% 100%;
}
.leque-1 { transform: translateY(calc(-3% * var(--h))); }
.leque-2 {
  transform:
    translate(calc(-9% * var(--abrir) - 7% * var(--h)), calc(-6% * var(--abrir) - 3% * var(--h)))
    rotate(calc(-7deg * var(--abrir) - 4deg * var(--h)));
}
.leque-3 {
  transform:
    translate(calc(10% * var(--abrir) + 7% * var(--h)), calc(-3% * var(--abrir) - 3% * var(--h)))
    rotate(calc(8deg * var(--abrir) + 4deg * var(--h)));
}

.linha-completa {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}
.linha-completa-total {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0 0 1rem;
  color: var(--branco);
  max-width: none;
}
.linha-completa-total span {
  font-size: 3.6rem;
  line-height: 0.8;
  margin-right: 0.2em;
  vertical-align: -0.12em;
  font-variant-numeric: tabular-nums;
}
.linha-completa-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}
.linha-completa-lista li {
  break-inside: avoid;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
  font-size: 1.05rem;
}
.linha-completa-lista b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--aqua);
}

/* ---------- Visite ---------- */

.visite-grade {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.visite h2 { max-width: 12ch; margin-bottom: 0.15em; }
.visite-bonjour { font-style: italic; font-size: 1.4rem; color: var(--tinta-suave); margin-bottom: 2rem; }

.dados { margin: 0 0 2rem; }
.dados > div { padding-block: 0.85rem; border-top: 1px solid var(--linha); }
.dados > div:last-child { border-bottom: 1px solid var(--linha); }
.dados dt {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--fachada);
  margin-bottom: 0.3rem;
}
.dados dd { margin: 0; line-height: 1.45; }
.dados a { text-underline-offset: 0.18em; }

.visite-midia { display: grid; gap: 1rem; }
.visite-fachada img { width: 100%; aspect-ratio: 689 / 479; object-fit: cover; }
.mapa iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; background: var(--marmore); }

/* ---------- Rodapé ---------- */

.rodape { background: var(--azul); color: var(--branco); padding-top: 4.5rem; overflow: hidden; }
.rodape-grade {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem 4rem;
  align-items: center;
}
.rodape-logo { width: 180px; height: auto; }
.rodape-info p { margin: 0 0 0.35rem; }
.rodape-info a { text-underline-offset: 0.18em; }
.rodape-nota { font-style: italic; color: rgba(255, 255, 255, 0.72); font-size: 1rem; }
.rodape-menu { display: flex; flex-direction: column; gap: 0.35rem; }
.rodape-menu a {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  line-height: 1.1;
}
.rodape-menu a:hover { color: var(--aqua); }

.rodape-assinatura {
  overflow: hidden;
  margin-top: 3rem;
  line-height: 0.8;
}
.rodape-assinatura span {
  display: block;
  font-family: var(--display);
  font-size: 16.2vw;
  line-height: 0.8;
  padding-top: 0.08em;
  text-align: center;
  white-space: nowrap;
  color: var(--fachada);
}

.rodape-fim {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.72);
}
.rodape-fim::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--margem);
  right: var(--margem);
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}
.rodape-fim p { margin: 0; }
.rodape-fim a { text-underline-offset: 0.18em; }

/* ---------- Lista de pedido ---------- */

.lista-flutuante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 0.55em;
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.75em 0.8em 0.7em 1.1em;
  border: 0;
  border-radius: 3px;
  background: var(--fachada);
  color: var(--branco);
  box-shadow: 0 6px 18px rgba(2, 18, 52, 0.28);
  cursor: pointer;
}
.lista-flutuante .contador { background: var(--branco); color: var(--azul); }

.aviso-rapido {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  transform: translate(-50%, calc(100% + 40px));
  visibility: hidden;
  background: var(--azul);
  color: var(--branco);
  padding: 0.7rem 1.1rem 0.7rem 0.8rem;
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(2, 18, 52, 0.3);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.02rem;
  max-width: calc(100vw - 32px);
  transition: transform 0.45s var(--suave), visibility 0s linear 0.45s;
  pointer-events: none;
}
.aviso-rapido.visivel { transform: translate(-50%, 0); visibility: visible; transition: transform 0.45s var(--suave), visibility 0s; }
.aviso-rapido img { width: 40px; height: 48px; object-fit: cover; flex: none; }
.aviso-rapido b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; letter-spacing: 0.03em; }

.lista {
  margin: 0 0 0 auto;
  width: min(440px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: var(--branco);
  color: var(--tinta);
}
.lista::backdrop { background: rgba(2, 18, 52, 0.55); }
.lista[open] { animation: entrar 0.35s var(--suave); }
@keyframes entrar { from { transform: translateX(60px); opacity: 0; } }

.lista-corpo { display: flex; flex-direction: column; min-height: 100%; padding: 0 1.5rem 1.5rem; }

.lista-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--linha);
  position: sticky;
  top: 0;
  background: var(--branco);
  z-index: 1;
}
.lista-cabeca h2 { font-size: 2.2rem; margin: 0; padding-top: 0.1em; }
.lista-fechar {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--azul);
  transition: transform 0.3s var(--suave);
}
.lista-fechar:hover { transform: rotate(90deg); }
.lista-fechar svg { width: 22px; height: 22px; }

.lista-vazia { color: var(--tinta-suave); font-style: italic; padding-top: 1.5rem; }

.lista-itens { list-style: none; margin: 0; padding: 0; }
.lista-itens li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.9rem;
  align-items: center;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--linha);
}
.lista-itens img { width: 64px; height: 80px; object-fit: cover; background: var(--foto-fundo); }
.lista-item-nome {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--azul);
  margin: 0 0 0.45rem;
}
.lista-itens .passo { max-width: 180px; animation: none; }

.lista-extra { margin-top: 1.5rem; display: grid; gap: 1.1rem; }
.lista-entrega { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.lista-entrega legend {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--azul);
  margin-bottom: 0.4rem;
  padding: 0;
}
.lista-entrega label { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; min-height: 32px; }
.lista-entrega input { accent-color: var(--fachada); width: 18px; height: 18px; margin: 0; }

.lista-obs span {
  display: block;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--azul);
  margin-bottom: 0.4rem;
}
.lista-obs textarea {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--linha-forte);
  border-radius: 3px;
  resize: vertical;
  color: var(--tinta);
}
.lista-obs textarea:focus-visible { outline-color: var(--fachada); border-color: var(--fachada); }
.lista-ajuda { font-size: 1rem; font-style: italic; color: var(--tinta-suave); margin: 0; }
.lista-limpar {
  justify-self: center;
  background: none;
  border: 0;
  color: var(--tinta-suave);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem;
}

/* ---------- Telas médias ---------- */

@media (max-width: 1120px) {
  .menu {
    display: none;
    position: absolute;
    top: var(--topo-altura);
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--fachada);
    padding: 0.5rem var(--margem) 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .menu.aberto { display: flex; }
  .menu a { font-size: 1.6rem; padding-block: 0.6em 0.45em; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  .menu a::after { display: none; }
  .btn-menu { display: grid; }
  .topo-acoes { margin-left: auto; }

  .grade-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-bloco[data-s3="1"] { grid-column: span 1; min-height: 100%; }
  .cat-bloco[data-s3="2"] { grid-column: span 2; min-height: 100%; }
  .cat-bloco[data-s3="cheio"] { grid-column: 1 / -1; min-height: clamp(220px, 30vw, 300px); }
  /* reinicia o layout de largura total do computador */
  .cat-bloco[data-s4="cheio"] .cat-bloco-foto { left: 0; }
  .cat-bloco[data-s4="cheio"] .cat-bloco-foto::after {
    background: linear-gradient(to top, rgba(2, 18, 52, 0.94) 0%, rgba(2, 18, 52, 0.55) 45%, rgba(2, 18, 52, 0.05) 100%);
  }
  .cat-bloco[data-s4="cheio"] .cat-bloco-texto { max-width: none; }
  .cat-bloco[data-s3="cheio"] .cat-bloco-foto { left: 42%; }
  .cat-bloco[data-s3="cheio"] .cat-bloco-foto::after {
    background: linear-gradient(to right, var(--azul) 0%, rgba(2, 40, 102, 0.6) 22%, rgba(2, 40, 102, 0) 60%);
  }
  .cat-bloco[data-s3="cheio"] .cat-bloco-texto { max-width: 46%; }

  .abertura-endereco { display: none; }
}

@media (max-width: 960px) {
  .croute-grade,
  .tempo-grade,
  .historia-grade,
  .restaurantes-grade,
  .visite-grade { grid-template-columns: 1fr; }

  .croute-foto,
  .tempo-foto { max-width: 520px; }
  .historia-fotos { max-width: 560px; }
  .restaurantes-lado { max-width: 620px; }

  .produtos-cabeca { grid-template-columns: 1fr; }
  .produtos-cabeca h2 { margin-bottom: 0.4em; }

  .mesa-trilho { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .rodape-logo { grid-column: 1 / -1; }

  .lista-flutuante:not([hidden]) { display: inline-flex; }
}

/* ---------- Celular ---------- */

@media (max-width: 640px) {
  .marca-nome { font-size: 1.45rem; }
  .btn-lista-rotulo { display: none; }
  .ic-lista { display: block; }
  .btn-lista { padding: 0.45em 0.5em 0.45em 0.55em; gap: 0.35em; }

  .abertura { min-height: 560px; }
  .abertura-botoes .btn { flex: 1 1 auto; }
  .abertura-rodape p:not(:first-child) { display: none; }
  .rolar { display: none; }
  .video-controle { margin-left: auto; }
  .selo-giratorio {
    width: 104px;
    top: 18px;
    bottom: auto;
    right: var(--margem);
  }
  .selo-texto text { font-size: 16.4px; }

  .cortes { grid-template-columns: repeat(2, 1fr); }

  .filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--margem));
    padding-inline: var(--margem);
    scrollbar-width: none;
  }
  .filtros::-webkit-scrollbar { display: none; }

  .grade-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1rem; }
  .cat-bloco[data-s2="1"] { grid-column: span 1; min-height: 100%; }
  .cat-bloco[data-s2="cheio"] { grid-column: 1 / -1; min-height: 210px; }
  .cat-bloco[data-s3="cheio"] .cat-bloco-foto { left: 0; }
  .cat-bloco[data-s3="cheio"] .cat-bloco-foto::after {
    background: linear-gradient(to top, rgba(2, 18, 52, 0.94) 0%, rgba(2, 18, 52, 0.55) 45%, rgba(2, 18, 52, 0.05) 100%);
  }
  .cat-bloco[data-s3="cheio"] .cat-bloco-texto { max-width: none; }
  .cat-bloco[data-s2="1"] h3 { font-size: 1.7rem; }
  .cat-bloco[data-s2="1"] p { font-size: 0.95rem; }
  .produto h4 { font-size: 1.4rem; }
  .produto-desc { font-size: 0.98rem; }
  .btn-add { font-size: 1.05rem; padding-inline: 0.4em; }

  .tempos > div { grid-template-columns: 1fr; gap: 0.6rem; }

  .numeros { gap: 0.75rem; }
  .numeros dd { font-size: 0.92rem; }

  .historia-foto { width: 86%; }
  .historia-foto-2 { width: 62%; border-width: 5px; }

  .linha-tempo {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 0 0 2rem;
  }
  .linha-tempo::before,
  .linha-tempo::after { top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .linha-tempo::after { transform: scaleY(var(--progresso)); transform-origin: top; }
  .linha-tempo li::before { top: 0.4rem; left: calc(-2rem - 1px); }

  .mesa-ativa .mesa-cabeca { display: block; }
  .mesa-ativa .mesa-cabeca .lead { text-align: left; margin-bottom: 1.25rem; }
  .mesa-ativa .mesa-trilho figure {
    width: min(68vw, calc((100svh - var(--topo-altura) - 300px) * 0.8));
  }
  .mesa-ativa .mesa-trilho figure:nth-child(even) { transform: translateY(1.25rem); }
  .mesa-ativa .mesa-progresso { margin-top: 2.25rem; }

  .linha-completa-lista { columns: 1; }

  .restaurantes-botoes .btn { width: 100%; }
  .visite .btn { width: 100%; }

  .rodape-grade { grid-template-columns: 1fr; }
  .rodape-menu { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

  .lista-corpo { padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lista[open],
  .passo,
  .contador.pulo { animation: none; }
  .letreiro-trilho,
  .selo-texto,
  .rolar-linha::after { animation: none; }
  .btn, .btn::before, .btn-add, .btn-add::before, .filtros button,
  .produto-foto img, .cat-bloco-foto img, .cortes img, .mesa-foto img { transition: none; }
}