/* Demonstração MG Web · restaurante (marca fictícia "Casa Jambo")
   Mobile first. Tokens no :root; depois base, peças comuns, as seções da
   página inicial na ordem em que aparecem e, no fim, a carta (menu/).

   A identidade sai da casa: o verde-turquesa das paredes e das grades, o
   roxo do jambo, o vinho, o creme da luz, a lajota do piso, o amarelo das
   lâmpadas. Tipo: Young Serif nos títulos (quente, peso
   único, sem itálico: o destaque é cor) e Instrument Sans no resto.
   Composição de revista: grade de 12 colunas, com peças que escapam dela. */

/* ---------- Tokens ---------- */
:root {
  --creme: #f2e9da;        /* fundo: creme quente */
  --papel: #f8f2e7;        /* a carta e a matéria da chef */
  --areia: #e7dac5;
  --tinta: #2a1f33;        /* texto: quase preto, puxado para o roxo */
  --tinta-2: #54485c;
  --tinta-3: #6b6171;      /* legendas: 4,7:1 sobre o creme */
  --linha: rgba(42, 31, 51, .16);

  --mata: #0f4a44;         /* verde-turquesa profundo: seções escuras */
  --mata-escura: #0b3934;
  --turquesa: #1b6f62;     /* acento em texto sobre claro: 5,1:1 */
  --menta: #a3dcc9;        /* acento sobre escuro */
  --roxo: #3c2a60;         /* o roxo do jambo */
  --roxo-escuro: #2b1e47;
  --vinho: #6e2a44;
  --lajota: #b4552f;
  --luz: #e7b44a;          /* pontos de luz: nunca texto sobre claro */
  --creme-80: rgba(242, 233, 218, .82);
  --creme-60: rgba(242, 233, 218, .64);
  --creme-linha: rgba(242, 233, 218, .2);

  --titulo: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --texto: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --margem: clamp(1.25rem, .55rem + 3.4vw, 4.5rem);
  --gap: clamp(1rem, .5rem + 1.8vw, 2.25rem);
  --secao: clamp(4.5rem, 3rem + 6vw, 9.5rem);
  --topo: 3.75rem;
  --ease: cubic-bezier(.22, .61, .21, 1);

  /* A assinatura da casa: a treliça das grades verdes da fachada.
     --friso: a faixa de losangos (o trilho da grade), sob títulos de categoria.
     --no: um losango com anel, o cruzamento da grade, no meio de um fio. */
  --friso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cg fill='none' stroke='%231b6f62' stroke-width='1'%3E%3Cpath d='M0 0L12 12M12 0L0 12'/%3E%3Ccircle cx='6' cy='6' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
  --no: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' stroke='%231b6f62' stroke-width='1.2'%3E%3Cpath d='M8 1.2L14.8 8L8 14.8L1.2 8Z'/%3E%3Ccircle cx='8' cy='8' r='2.1'/%3E%3C/g%3E%3C/svg%3E");

  /* Grão de papel, bem leve: o creme deixa de ser uma cor chapada. */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .12 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (min-width: 1024px) {
  :root { --topo: 4.25rem; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topo) + 1rem);
}
html.movimento { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--creme) var(--grao);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: clamp(1rem, .97rem + .16vw, 1.125rem);
  line-height: 1.6;
  word-spacing: .04em;     /* o espaço da Instrument Sans é estreito: "Bairro · cidade" respira */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, h4, p, dl, dd, ol, ul, figure, blockquote, address { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: normal; }
b { font-weight: 600; }
::selection { background: var(--mata); color: var(--creme); }

:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 3px; }
.previa :focus-visible, .visite :focus-visible, .rodape :focus-visible { outline-color: var(--menta); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: fixed; top: .75rem; left: .75rem; z-index: 200;
  padding: .75rem 1rem; background: var(--tinta); color: var(--creme);
  font-size: .875rem; transform: translateY(-200%);
}
.pular:focus { transform: none; }

/* ---------- Peças comuns ---------- */
.numeros { font-family: var(--texto); font-variant-numeric: lining-nums tabular-nums; }

.titulo {
  font-family: var(--titulo); font-weight: 400;
  font-size: clamp(2rem, 1.35rem + 2.5vw, 3.5rem);
  line-height: 1.06; letter-spacing: -.012em;
  text-wrap: balance;
}
.titulo--grande { font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); line-height: 1.02; }
.titulo em { color: var(--turquesa); }

/* Rótulo de seção: pequeno, em caixa normal, na cor da grade. */
.rotulo { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; font-weight: 500; color: var(--turquesa); margin-bottom: 1rem; }
.rotulo::before {
  content: ''; width: 2.25rem; height: 12px; flex: none; background: currentColor;
  -webkit-mask: var(--friso) 0 0 / 12px 12px repeat-x; mask: var(--friso) 0 0 / 12px 12px repeat-x;
}
.previa .rotulo, .visite .rotulo { color: var(--menta); }

.link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color .3s, color .3s;
}
.link::after { content: '→'; text-decoration: none; transition: transform .4s var(--ease); }
.link:hover { text-decoration-color: currentColor; }
.link:hover::after { transform: translateX(.2rem); }

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .7rem 1.35rem;
  background: var(--mata); color: var(--creme);
  border: 1px solid var(--mata);
  font-family: var(--texto); font-size: .9375rem; font-weight: 500; line-height: 1.2;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.botao:hover { background: var(--mata-escura); border-color: var(--mata-escura); }
.botao--claro { background: var(--creme); color: var(--tinta); border-color: var(--creme); }
.botao--claro:hover { background: var(--menta); border-color: var(--menta); }
.botao--contorno { background: transparent; color: inherit; border-color: currentColor; }
.botao--contorno:hover { background: var(--creme); color: var(--tinta); border-color: var(--creme); }

/* Linha de carta: nome, pontilhado, preço. */
.linha { display: flex; align-items: baseline; gap: .5rem; }
.linha__fio { flex: 1; min-width: 1rem; border-bottom: 1px dotted currentColor; opacity: .4; transform: translateY(-.28em); }
.linha__preco { white-space: nowrap; }

/* Fotos: recorte por proporção (inline em --proporcao), foco por --foco. */
.foto { position: relative; display: block; overflow: hidden; aspect-ratio: var(--proporcao, 4/5); width: 100%; background: var(--areia); }
.foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%);
  translate: 0 var(--py, 0px); scale: var(--escala, 1);
  transition: scale 1s var(--ease), opacity .5s var(--ease);
}
[data-paralaxe] .foto { --escala: 1.08; }
.foto--vazia { background: var(--roxo); }
.foto__pauta {
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
  padding: .5rem .7rem; background: rgba(42, 31, 51, .8); color: var(--creme);
  font-size: .75rem; line-height: 1.45;
}
.foto__pauta b { display: block; color: var(--menta); }
html:not([data-rascunho]) .foto__pauta { display: none; }

figcaption { font-size: .8125rem; line-height: 1.45; color: var(--tinta-3); margin-top: .6rem; }

/* "Aberto agora": um ponto de luz e o texto. */
.agora { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--texto); font-size: .8125rem; font-weight: 500; }
.agora::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--lajota); flex: none; }
.agora[data-estado="aberto"]::before { background: var(--turquesa); box-shadow: 0 0 0 3px rgba(27, 111, 98, .18); }

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.25rem;
  height: var(--topo); padding-inline: var(--margem);
  background: rgba(242, 233, 218, .96);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease);
}
.topo--solido { border-bottom-color: var(--linha); }
.topo__marca { margin-right: auto; padding-block: .4rem; }
/* Logo em texto (marca fictícia): o nome na Young Serif, "Jambo" no roxo. */
.logo { display: block; width: auto; height: 2.1rem; }
.logo--texto { display: inline-flex; flex-direction: column; justify-content: center; height: auto; color: var(--tinta); white-space: nowrap; }
.logo__nome { font-family: var(--titulo); font-size: 1.55rem; line-height: 1; letter-spacing: -.01em; }
.logo__nome em { font-style: normal; color: var(--roxo); }
.logo__linha { margin-top: .35rem; font-size: .7rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--turquesa); }
.logo--claro { color: var(--creme); }
.logo--claro .logo__nome em { color: var(--menta); }
.logo--claro .logo__linha { color: var(--creme-60); }
.topo__nav { display: none; }
.topo__nav ul { display: flex; gap: clamp(1.5rem, 2.6vw, 2.75rem); }
.topo__nav a { position: relative; padding-block: .5rem; font-size: .9375rem; font-weight: 500; }
.topo__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .15rem; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease);
}
.topo__nav a:hover::after, .topo__nav a[aria-current="true"]::after { transform: scaleX(1); }
.topo__cardapio { font-size: .9375rem; font-weight: 500; padding: .5rem 0; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.topo__abrir, .gaveta__fechar {
  display: grid; place-content: center; gap: .4rem;
  width: 2.75rem; height: 2.75rem; margin-right: -.6rem;
}
.topo__traco { display: block; width: 1.5rem; height: 1.5px; background: currentColor; }
.gaveta__fechar .topo__traco { grid-area: 1 / 1; }
.gaveta__fechar .topo__traco:first-of-type { transform: rotate(45deg); }
.gaveta__fechar .topo__traco:last-of-type { transform: rotate(-45deg); }
@media (min-width: 1024px) {
  .logo { height: 2.5rem; }
  .topo__nav { display: block; }
  .topo__cardapio, .topo__abrir { display: none; }
}

/* Menu do celular: o creme inteiro, links grandes em Young Serif. */
.gaveta {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0 var(--margem) max(1.5rem, env(safe-area-inset-bottom)); border: 0;
  background: var(--creme) var(--grao); color: var(--tinta); overflow-y: auto;
}
.gaveta[open] { display: flex; flex-direction: column; }
.gaveta::backdrop { background: transparent; }
.gaveta__topo { display: flex; align-items: center; height: var(--topo); flex: none; }
.gaveta__topo .topo__marca { margin-right: auto; }
.gaveta__nav { flex: 1; display: flex; align-items: center; padding-block: 2rem; }
.gaveta__nav ul { display: grid; gap: .5rem; }
.gaveta__nav a { font-family: var(--titulo); font-size: clamp(2.25rem, 1.5rem + 5vw, 3.25rem); line-height: 1.15; }
.gaveta__nav a:hover { color: var(--turquesa); }
.gaveta__pe { display: grid; gap: .9rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); font-size: .9375rem; color: var(--tinta-2); }
.gaveta__pe a { text-decoration: underline; text-underline-offset: .25em; }
.movimento .gaveta[open] { animation: aparece .35s var(--ease) both; }
.movimento .gaveta[open] .gaveta__nav li { animation: sobe .6s var(--ease) both; }
.movimento .gaveta[open] .gaveta__nav li:nth-child(2) { animation-delay: .04s; }
.movimento .gaveta[open] .gaveta__nav li:nth-child(3) { animation-delay: .08s; }
.movimento .gaveta[open] .gaveta__nav li:nth-child(4) { animation-delay: .12s; }
.movimento .gaveta[open] .gaveta__nav li:nth-child(5) { animation-delay: .16s; }
.movimento .gaveta.fechando { animation: some .3s var(--ease) both; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes some { from { opacity: 1; } to { opacity: 0; } }
@keyframes sobe { from { opacity: 0; transform: translateY(.9rem); } to { opacity: 1; transform: none; } }

/* ---------- Abertura ----------
   Celular: a fachada no alto da tela, com o nome escrito nela; embaixo, no
   creme, a frase e o serviço. Desktop: a fachada na metade direita, até a
   borda; o texto à esquerda; uma foto de prato atravessando a divisa. */
.abertura { position: relative; display: grid; }
.abertura__foto { position: relative; height: 62svh; min-height: 22rem; max-height: 44rem; overflow: hidden; background: var(--roxo-escuro); }
.abertura__imagem { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.abertura__foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 14, 30, .6), rgba(20, 14, 30, .25) 38%, rgba(20, 14, 30, 0) 60%);
}
.abertura__nome {
  position: absolute; z-index: 1; left: var(--margem); top: 1.1rem;
  font-family: var(--titulo); font-weight: 400;
  font-size: clamp(3.4rem, 1.6rem + 8vw, 9.5rem); line-height: .9; letter-spacing: -.02em;
  color: var(--creme);
}
.abertura__nome span { display: block; }
.abertura__texto { padding: 1.75rem var(--margem) 2.25rem; }
.abertura__lugar { font-size: .9375rem; font-weight: 500; color: var(--turquesa); }
.abertura__frase {
  margin-top: .6rem;
  font-family: var(--titulo); font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.012em;
  max-width: 13ch; text-wrap: balance;
}
.abertura__frase em { color: var(--turquesa); }
.abertura__sub { margin-top: 1rem; max-width: 30ch; color: var(--tinta-2); }
.abertura__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.5rem; }
.abertura__info {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem;
  margin: 0 var(--margem) 2.5rem; padding-top: 1.1rem; border-top: 1px solid var(--linha);
  font-size: .9375rem; line-height: 1.45;
}
.abertura__info div:last-child { grid-column: 1 / -1; }
.abertura__info dt { font-weight: 600; }
.abertura__info dd { color: var(--tinta-2); }
.abertura__info .numeros { color: var(--tinta); font-weight: 500; }
.abertura__info .agora { margin-top: .35rem; }
.abertura__detalhe { display: none; }

@media (min-width: 1024px) {
  .abertura {
    grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr auto; column-gap: var(--gap);
    min-height: calc(100svh - var(--topo)); padding-left: var(--margem);
  }
  .abertura__foto { grid-column: 6 / 13; grid-row: 1 / 3; height: auto; max-height: none; min-height: 34rem; }
  .abertura__nome { left: clamp(1.5rem, 3vw, 3rem); top: clamp(1.25rem, 3vh, 2.5rem); }
  .abertura__texto { grid-column: 1 / 6; grid-row: 1; align-self: center; padding: 3rem 0 2rem; }
  .abertura__info { grid-column: 1 / 5; grid-row: 2; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 2rem; margin: 0 0 2.5rem; }
  .abertura__info div:last-child { grid-column: auto; }
  .abertura__detalhe {
    display: block; grid-column: 6 / 8; grid-row: 1 / 3; align-self: end; justify-self: start; z-index: 2;
    width: 100%; margin: 0 0 2.5rem -30%; box-shadow: 0 0 0 .5rem var(--creme);
  }
  .abertura__detalhe .foto { aspect-ratio: 4/5; }
}

/* Entrada: uma vez só, só com movimento liberado. */
.movimento .abertura__foto .foto img { animation: assenta 1.8s var(--ease) both; }
.movimento .abertura__nome, .movimento .abertura__texto > *, .movimento .abertura__info, .movimento .abertura__detalhe { animation: sobe 1s var(--ease) both; }
.movimento .abertura__nome { animation-delay: .25s; }
.movimento .abertura__frase { animation-delay: .08s; }
.movimento .abertura__sub { animation-delay: .16s; }
.movimento .abertura__acoes { animation-delay: .24s; }
.movimento .abertura__info { animation-delay: .34s; }
.movimento .abertura__detalhe { animation-delay: .5s; }
@keyframes assenta { from { opacity: 0; scale: 1.05; } to { opacity: 1; } }

/* ---------- A casa ---------- */
.casa { padding: var(--secao) var(--margem); }
.casa__frase {
  font-family: var(--titulo); font-size: clamp(2.1rem, 1.1rem + 4.2vw, 5.4rem); line-height: 1.05; letter-spacing: -.015em;
  max-width: 18ch; text-wrap: balance;
}
.casa__frase span { color: var(--turquesa); }
.casa__corpo { display: grid; gap: 2.5rem; margin-top: clamp(3rem, 2rem + 4vw, 6.5rem); }
.casa__foto { margin-inline: calc(-1 * var(--margem)); }
.casa__foto figcaption { padding-inline: var(--margem); }
.casa__texto { display: grid; gap: 1.1rem; justify-items: start; color: var(--tinta-2); }
.casa__texto .titulo { color: var(--tinta); margin-bottom: .25rem; }
.casa__datas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); }
.casa__datas dt { font-family: var(--titulo); font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); line-height: 1; color: var(--vinho); }
.casa__datas dd { margin-top: .4rem; font-size: .875rem; color: var(--tinta-3); max-width: 18ch; }
@media (min-width: 1024px) {
  .casa__frase { margin-left: calc(100% / 12); }
  .casa__corpo { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 3rem; align-items: start; }
  .casa__foto { grid-column: 1 / 8; grid-row: 1 / 3; margin-right: 0; }
  .casa__foto .foto { aspect-ratio: 6/5; }
  .casa__foto figcaption { padding-inline: var(--margem) 0; }
  .casa__texto { grid-column: 9 / 13; grid-row: 1; padding-top: 2rem; }
  .casa__datas { grid-column: 9 / 13; grid-row: 2; align-self: end; }
}

/* ---------- Prévia do cardápio ----------
   Fundo verde da casa. Colagem de quatro pratos em tamanhos diferentes e,
   ao lado, os pratos como numa carta. Passar o mouse num nome acende a foto
   dele e apaga as outras. */
.previa {
  display: grid; gap: 3rem;
  padding: var(--secao) var(--margem);
  background: var(--mata); color: var(--creme);
}
.previa__colagem {
  --u: 4.6vw;
  display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(20, var(--u)); gap: .5rem;
  margin-inline: calc(-1 * var(--margem));
}
.previa__foto { position: relative; display: block; overflow: hidden; }
.previa__foto .foto { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; background: var(--mata-escura); }
.previa__foto--2 { grid-column: 1 / 9; grid-row: 1 / 15; }          /* Paella: a grande */
.previa__foto--1 { grid-column: 9 / 13; grid-row: 2 / 8; }          /* Éramos quatro */
.previa__foto--3 { grid-column: 9 / 13; grid-row: 9 / 17; }         /* arroz de polvo */
.previa__foto--4 { grid-column: 3 / 9; grid-row: 13 / 21; z-index: 1; box-shadow: 0 0 0 .5rem var(--mata); }  /* Pudim */
.previa__foto img { transition: opacity .5s var(--ease), scale 1s var(--ease); }
.previa__foto:hover img { scale: 1.04; }
.previa:has(.previa__item--1 a:is(:hover, :focus-visible)) .previa__foto:not(.previa__foto--1) img,
.previa:has(.previa__item--2 a:is(:hover, :focus-visible)) .previa__foto:not(.previa__foto--2) img,
.previa:has(.previa__item--3 a:is(:hover, :focus-visible)) .previa__foto:not(.previa__foto--3) img,
.previa:has(.previa__item--4 a:is(:hover, :focus-visible)) .previa__foto:not(.previa__foto--4) img { opacity: .3; }

.previa__texto { display: grid; gap: 1.5rem; align-content: start; }
.previa__intro { color: var(--creme-80); max-width: 36ch; }
.previa__lista { border-top: 1px solid var(--creme-linha); }
.previa__item a { display: grid; gap: .1rem; padding: 1rem 0; border-bottom: 1px solid var(--creme-linha); }
.previa__cat { font-size: .8125rem; color: var(--menta); }
.previa__item .linha__nome { font-family: var(--titulo); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); line-height: 1.15; transition: color .3s; }
.previa__item .linha__preco { font-size: .9375rem; font-weight: 500; }
.previa__item a:hover .linha__nome { color: var(--menta); }
.previa__cats { font-size: .875rem; color: var(--creme-60); line-height: 1.8; }
.previa__cats a { color: var(--creme-80); text-decoration: underline; text-decoration-color: var(--creme-linha); text-underline-offset: .25em; }
.previa__cats a:hover { color: var(--creme); text-decoration-color: currentColor; }

@media (min-width: 1024px) {
  .previa { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: center; }
  .previa__colagem { --u: 2.35vw; grid-column: 1 / 8; margin-right: 0; }
  .previa__texto { grid-column: 8 / 13; padding-left: clamp(0rem, 2vw, 2rem); }
}

/* ---------- Nossa história ----------
   Matéria de revista: título, lide, o trajeto de onze paradas preso ao topo
   e o texto em três partes, com as frases da casa em destaque. */
.relato { padding: var(--secao) var(--margem); background: var(--papel) var(--grao); }
.relato__cabeca .titulo { max-width: 16ch; }
.relato__lide { margin-top: 1.5rem; max-width: 38ch; font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem); line-height: 1.5; color: var(--tinta-2); }

.trajeto {
  position: sticky; top: var(--topo); z-index: 5;
  margin: clamp(2.5rem, 2rem + 3vw, 4.5rem) calc(-1 * var(--margem)) 0;
  background: var(--papel);
  border-block: 1px solid var(--linha);
}
.trajeto ol {
  position: relative; display: flex; overflow-x: auto; scroll-snap-type: x proximity;
  padding-inline: var(--margem); scroll-padding-inline: var(--margem); scrollbar-width: none;
}
.trajeto ol::-webkit-scrollbar { display: none; }
.trajeto li { flex: none; width: 7.5rem; scroll-snap-align: start; }
.trajeto a {
  position: relative; display: block; padding: 1.35rem .75rem .8rem 0;
  font-size: .8125rem; line-height: 1.3; color: var(--tinta-3); transition: color .3s;
}
.trajeto a::before { content: ''; position: absolute; left: 0; right: 0; top: .9rem; height: 1px; background: var(--linha); }
.trajeto__ponto {
  position: absolute; left: 0; top: calc(.9rem - 4px); width: 9px; height: 9px; border-radius: 50%;
  background: var(--papel); border: 1px solid var(--tinta-3); transition: background-color .3s, border-color .3s;
}
.trajeto a.passou .trajeto__ponto { background: var(--menta); border-color: var(--turquesa); }
.trajeto a.ativo { color: var(--tinta); font-weight: 600; }
.trajeto a.ativo .trajeto__ponto { background: var(--turquesa); border-color: var(--turquesa); }
.trajeto a:hover { color: var(--tinta); }

.relato__corpo { display: grid; gap: 2.5rem; margin-top: clamp(2.5rem, 2rem + 3vw, 5rem); }
.relato__parte { display: grid; gap: 1.1em; max-width: 36rem; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.65; }
.relato__passo { scroll-margin-top: calc(var(--topo) + 5.5rem); }
.relato__passo b { font-family: var(--titulo); font-weight: 400; color: var(--roxo); }
.relato__ano { display: block; font-family: var(--titulo); font-size: clamp(3rem, 2.2rem + 3vw, 5rem); line-height: 1; color: var(--turquesa); margin-bottom: .35rem; font-variant-numeric: normal; }
.relato__frase { padding-block: 1.5rem; border-block: 1px solid var(--linha); }
.relato__frase blockquote p {
  font-family: var(--titulo); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); line-height: 1.15; letter-spacing: -.01em;
  color: var(--vinho); text-wrap: balance;
}
.relato__frase figcaption { margin-top: 1rem; }
.relato__retrato { max-width: 26rem; }
.relato__fecho p {
  font-family: var(--titulo); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.2;
  color: var(--roxo); max-width: 22ch;
}
@media (min-width: 1024px) {
  .trajeto ol { justify-content: space-between; overflow: visible; }
  .trajeto li { flex: 1 1 0; width: auto; min-width: 0; }
  .relato__corpo { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: clamp(3rem, 5vw, 5.5rem); align-items: start; }
  .relato__parte--1 { grid-column: 1 / 7; }
  .relato__frase { grid-column: 8 / 13; align-self: center; }
  .relato__retrato { grid-column: 8 / 12; }
  .relato__parte--2 { grid-column: 4 / 10; }
  .relato__parte--3 { grid-column: 1 / 13; grid-template-columns: 1fr 1fr; column-gap: var(--gap); max-width: none; }
  .relato__parte--3 .relato__passo { max-width: 32rem; }
  .relato__fecho { grid-column: 6 / 13; }
}

/* ---------- Passeio pela casa ---------- */
.passeio {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 2.5rem;
  padding: var(--secao) var(--margem);
}
.passeio__abre { grid-column: 1 / -1; }
.passeio__texto { margin-top: 1.25rem; max-width: 34ch; color: var(--tinta-2); }
.passeio__foto--quintal { grid-column: 3 / 13; margin-right: calc(-1 * var(--margem)); }
.passeio__foto--quintal .foto { aspect-ratio: 4/3; }
.passeio__foto--panorama { grid-column: 1 / -1; margin-inline: calc(-1 * var(--margem)); }
.passeio__foto--panorama .foto { aspect-ratio: 4/3; }
.passeio__foto--panorama figcaption { padding-inline: var(--margem); }
.passeio__foto--especial { grid-column: 1 / 9; }
.passeio__foto--plantas { grid-column: 6 / 13; margin-top: -30%; z-index: 1; }
.passeio__foto--plantas .foto { box-shadow: 0 0 0 .4rem var(--creme); }
@media (min-width: 768px) {
  .passeio__foto--panorama .foto { aspect-ratio: 21/9; max-height: 82vh; }
}
@media (min-width: 1024px) {
  .passeio { row-gap: clamp(3rem, 6vw, 7rem); align-items: end; }
  .passeio__abre { grid-column: 1 / 7; grid-row: 1; align-self: center; }
  .passeio__foto--quintal { grid-column: 8 / 13; grid-row: 1; }
  .passeio__foto--quintal .foto { aspect-ratio: 1; }
  .passeio__foto--especial { grid-column: 2 / 7; grid-row: 3; }
  .passeio__foto--plantas { grid-column: 8 / 12; grid-row: 3; margin-top: 0; margin-bottom: -5rem; }
}

/* ---------- Visite-nos ----------
   O endereço é o título. Fundo roxo da casa. */
.visite {
  display: grid; gap: 2.5rem;
  padding: var(--secao) var(--margem);
  background: var(--roxo); color: var(--creme);
}
.visite__titulo { font-family: var(--titulo); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1.1; }
.visite__titulo em { color: var(--menta); }
.visite__endereco { display: grid; gap: 1rem; }
.visite__rua { font-family: var(--titulo); font-size: clamp(2.9rem, 1.4rem + 6vw, 7.5rem); line-height: .95; letter-spacing: -.02em; }
.visite__rua .numeros { font-family: var(--titulo); color: var(--menta); font-variant-numeric: normal; }
.visite__cidade { font-size: clamp(1rem, .95rem + .3vw, 1.25rem); color: var(--creme-80); }
.visite__sub { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .9375rem; font-weight: 600; margin-bottom: .75rem; }
.visite__sub .agora { font-weight: 500; color: var(--creme-80); }
.visite .agora[data-estado="aberto"]::before { background: var(--menta); box-shadow: 0 0 0 3px rgba(163, 220, 201, .2); }
.visite .agora:not([data-estado="aberto"])::before { background: var(--luz); }
.horarios { border-top: 1px solid var(--creme-linha); }
.horarios__linha { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--creme-linha); }
.horarios dt { font-family: var(--titulo); font-size: 1.375rem; }
.horarios dd { display: grid; gap: .1rem; }
.horarios__dias { font-size: .9375rem; color: var(--creme-80); }
.horarios__hora { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.875rem); font-weight: 500; letter-spacing: -.01em; }
.visite__nota { margin-top: .75rem; font-size: .875rem; color: var(--creme-60); }
.visite__acoes { display: grid; gap: 1.25rem; justify-items: start; }
.visite__reserva { max-width: 36ch; color: var(--creme-80); }
.visite__botoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.visite__contatos { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9375rem; }
.visite__contatos a { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--creme-linha); }
.visite__contatos a:hover { text-decoration-color: currentColor; }

.mapa { position: relative; overflow: hidden; min-height: 15rem; background: var(--roxo-escuro); }
.mapa::before {
  content: ''; position: absolute; inset: 0; background: var(--menta); opacity: .09;
  -webkit-mask: url(../img/trelica.svg) 0 0 / 72px 72px repeat; mask: url(../img/trelica.svg) 0 0 / 72px 72px repeat;
}
.mapa__capa {
  position: relative; height: 100%; min-height: inherit;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .9rem;
  padding: 1.5rem;
}
.mapa__capa > p:first-child { font-family: var(--titulo); font-size: 1.25rem; }
.mapa__aviso { font-size: .8125rem; color: var(--creme-60); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.25); }
.mapa--carregado .mapa__capa { display: none; }
@media (min-width: 1024px) {
  .visite { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 3.5rem; }
  .visite__abre { grid-column: 1 / 8; grid-row: 1; }
  .visite__endereco { grid-column: 1 / 9; grid-row: 2; }
  .visite__horarios { grid-column: 9 / 13; grid-row: 1 / 3; align-self: end; }
  .visite__acoes { grid-column: 1 / 7; grid-row: 3; align-self: end; }
  .mapa { grid-column: 8 / 13; grid-row: 3; }
}

/* ---------- Instagram ---------- */
.feed {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 1.25rem;
  padding: var(--secao) var(--margem);
}
.feed__texto { grid-column: 1 / -1; display: grid; gap: .9rem; justify-items: start; margin-bottom: 1rem; }
.feed__titulo { font-family: var(--titulo); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1.1; }
.feed__arroba { font-family: var(--titulo); font-size: clamp(1.35rem, .9rem + 1.9vw, 2.6rem); line-height: 1.05; color: var(--turquesa); overflow-wrap: anywhere; }
.feed__arroba:hover { color: var(--roxo); }
.feed__foto { display: block; }
.feed__foto:hover img { scale: 1.04; }
.feed__foto--1 { grid-column: 1 / 8; }
.feed__foto--2 { grid-column: 8 / 13; align-self: end; margin-right: calc(-1 * var(--margem)); }
.feed__foto--2 .foto { aspect-ratio: 1; }
.feed__foto--3 { grid-column: 3 / 9; }
.feed__foto--3 .foto { aspect-ratio: 3/2; }
@media (min-width: 1024px) {
  .feed { align-items: start; }
  .feed__texto { grid-column: 1 / 6; grid-row: 1; margin: 0; padding-top: 2rem; }
  .feed__foto--1 { grid-column: 6 / 10; grid-row: 1 / 3; }
  .feed__foto--2 { grid-column: 10 / 13; grid-row: 1; margin-top: 5rem; }
  .feed__foto--3 { grid-column: 2 / 6; grid-row: 2; align-self: end; }
}

/* ---------- Rodapé ---------- */
.rodape {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem var(--gap);
  padding: clamp(3rem, 2.5rem + 3vw, 5rem) var(--margem) max(1.5rem, env(safe-area-inset-bottom));
  background: var(--mata) var(--grao); color: var(--creme-80);
  font-size: .9375rem; line-height: 1.6;
}
.rodape__marca { grid-column: 1 / -1; }
.rodape .logo { height: auto; width: auto; }
.rodape .logo__nome { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); }
.rodape a:hover { color: var(--creme); }
.rodape__bloco a { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--creme-linha); }
.rodape nav a { text-decoration: none; }
.rodape nav ul { display: grid; gap: .2rem; }
.rodape__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-top: 1.25rem; border-top: 1px solid var(--creme-linha); font-size: .8125rem; color: var(--creme-60); }
@media (min-width: 1024px) {
  .rodape { grid-template-columns: 2fr 1.2fr 1.2fr 1fr; align-items: start; }
  .rodape__marca { grid-column: auto; }
}
@media (max-width: 1023px) {
  .rodape { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* ---------- Barra do celular ---------- */
.barra {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(242, 233, 218, .97); border-top: 1px solid var(--linha);
  transform: translateY(100%); visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s .45s;
}
.barra--visivel { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
.barra a { display: grid; place-items: center; min-height: 3.25rem; padding-inline: .5rem; font-size: .9375rem; font-weight: 500; text-align: center; }
.barra a + a { border-left: 1px solid var(--linha); }
.barra a:first-child { background: var(--mata); color: var(--creme); }
@media (min-width: 1024px) { .barra { display: none; } }
html:not(.js) .barra { display: none; }

/* ---------- Revelação ao rolar ---------- */
.movimento .revela {
  opacity: 0; transform: translateY(1rem);
  transition: opacity .9s var(--ease), transform 1s var(--ease);
  transition-delay: var(--atraso, 0s);
}
.movimento .revela.visto { opacity: 1; transform: none; }


/* ==========================================================================
   A carta (menu/)
   O que o QR code da mesa abre. Leitura rápida no celular: faixa de
   categorias presa ao topo com a busca ao lado, preço sempre à vista.
   ========================================================================== */
.pagina-mesa { background: var(--papel) var(--grao); }
.carta-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 72rem; margin-inline: auto; padding: .9rem var(--margem);
  font-size: .9375rem;
}
.carta-topo .logo { height: 2rem; }
.carta { max-width: 72rem; margin-inline: auto; padding: 0 var(--margem) max(2rem, env(safe-area-inset-bottom)); }
.carta__abre { padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) 0 1.75rem; }
.carta__titulo { font-family: var(--titulo); font-weight: 400; font-size: clamp(3rem, 2rem + 5vw, 6rem); line-height: .95; letter-spacing: -.02em; color: var(--roxo); }
.carta__lugar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; margin-top: .9rem; font-weight: 500; color: var(--turquesa); }
.carta__lugar .agora { color: var(--tinta-2); }
.carta__nota { margin-top: .6rem; max-width: 42ch; color: var(--tinta-2); }

/* Navegação das categorias.
   Celular: faixa presa ao topo, nomes inteiros com área de toque de 52 px,
   rolagem lateral quando não cabe (as bordas esmaecem de onde há mais). Um
   fio verde desliza para baixo da categoria atual, com o nó da grade no
   meio; a faixa rola sozinha para manter a atual à vista. A lupa troca a
   faixa pelo campo de busca.
   Desktop: sumário à esquerda, preso enquanto se lê, como o índice de uma
   carta — nome e quantidade de itens sobre um fio vertical, onde o nó marca
   a categoria atual. */
.carta-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: stretch;
  margin-inline: calc(-1 * var(--margem)); padding-left: calc(var(--margem) - .75rem);
  background: rgba(248, 242, 231, .97);
  border-block: 1px solid var(--linha);
}
.carta-nav__buscar { flex: none; display: grid; place-items: center; width: 2.75rem; min-height: 3.25rem; color: var(--tinta-2); }
.carta-nav__buscar svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.carta-nav__trilho {
  position: relative; flex: 1; min-width: 0;
  /* Sem encaixe (scroll-snap): com encaixe no centro, a última categoria
     tentava ir para um centro que não existe e a faixa "continuava" e
     quicava no fim. Sem quique elástico nas pontas. */
  overflow-x: auto; overscroll-behavior-x: none; scrollbar-width: none;
  --antes: #000; --depois: transparent;
  -webkit-mask: linear-gradient(to right, var(--antes), #000 1.5rem, #000 calc(100% - 2rem), var(--depois));
  mask: linear-gradient(to right, var(--antes), #000 1.5rem, #000 calc(100% - 2rem), var(--depois));
}
.carta-nav__trilho::-webkit-scrollbar { display: none; }
.carta-nav__trilho[data-antes] { --antes: transparent; }
.carta-nav__trilho[data-fim] { --depois: #000; }
.carta-nav__lista { display: flex; width: max-content; padding-right: 1.25rem; }
.carta-nav__lista li { flex: none; }
.carta-nav__lista li[hidden] { display: none; }
.carta-nav__lista a {
  display: flex; align-items: center; min-height: 3.25rem; padding: 0 .75rem;
  white-space: nowrap; font-size: .9375rem; font-weight: 500; color: var(--tinta-3);
  transition: color .3s var(--ease);
}
.carta-nav__lista a:hover, .carta-nav__lista a[aria-current] { color: var(--tinta); }
.carta-nav__lista a:focus-visible { outline-offset: -4px; }
.carta-nav__qtd { display: none; }
/* O fio que marca a categoria atual; o JS dá a posição (--x) e a largura (--w). */
.carta-nav__marca {
  position: absolute; left: 0; bottom: 0; height: 2px; width: var(--w, 0px);
  background: var(--turquesa); transform: translateX(var(--x, 0px));
  transition: transform .45s var(--ease), width .45s var(--ease);
  pointer-events: none;
}
.carta-nav__marca::after {
  content: ''; position: absolute; left: 50%; top: -3px; width: 8px; height: 8px; margin-left: -4px;
  background: var(--papel); border: 1.5px solid var(--turquesa); transform: rotate(45deg);
}
html:not(.js) .carta-nav__marca { display: none; }
html:not(.js) .carta-nav__trilho { -webkit-mask: none; mask: none; }

.carta-busca { display: none; flex: 1; align-items: center; gap: .25rem; padding-right: calc(var(--margem) - .75rem); }
.carta-busca__campo {
  flex: 1; min-width: 0; height: 3.25rem; padding: 0 .25rem;
  font: inherit; font-size: 1rem; color: var(--tinta);
  background: transparent; border: 0; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.carta-busca__campo::placeholder { color: var(--tinta-3); }
.carta-busca__campo:focus { outline: none; }
.carta-busca__campo::-webkit-search-cancel-button { display: none; }
.carta-busca__fechar { display: grid; place-items: center; width: 2.75rem; height: 3.25rem; font-size: 1.5rem; line-height: 1; color: var(--tinta-2); }
.carta-nav--busca .carta-nav__trilho { display: none; }
.carta-nav--busca .carta-busca { display: flex; }
.carta-nav--busca .carta-nav__buscar { color: var(--turquesa); }
.carta-nav:has(.carta-busca__campo:focus-visible) { box-shadow: inset 0 -2px 0 var(--turquesa); }
html:not(.js) .carta-nav__buscar, html:not(.js) .carta-busca { display: none; }

@media (min-width: 1024px) {
  .carta { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem); max-width: 82rem; }
  .carta-topo { max-width: 82rem; }
  .carta__abre { grid-column: 1 / -1; }
  .carta__lista, .carta__pe { grid-column: 2; }
  .carta-nav {
    grid-column: 1; grid-row: 2 / 4; align-self: start;
    top: 1.5rem; display: flex; flex-direction: column; margin: 0; padding: 2.75rem 0 0;
    background: none; border: 0;
  }
  .carta-nav__buscar, .carta-busca__fechar { display: none; }
  .carta-busca { display: flex; order: -1; padding: 0; margin-bottom: 1.75rem; border-bottom: 1px solid var(--tinta); }
  .carta-busca__campo { height: 2.75rem; font-size: .9375rem; }
  .carta-nav:has(.carta-busca__campo:focus-visible) { box-shadow: none; }
  .carta-busca:has(.carta-busca__campo:focus-visible) { border-bottom-color: var(--turquesa); box-shadow: inset 0 -1px 0 var(--turquesa); }
  .carta-nav--busca .carta-nav__trilho { display: block; }
  .carta-nav__trilho { overflow: visible; -webkit-mask: none; mask: none; }
  .carta-nav__trilho::before { content: ''; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 1px; background: var(--linha); }
  .carta-nav__lista { display: grid; width: auto; padding: 0; }
  .carta-nav__lista a {
    justify-content: space-between; gap: 1rem; min-height: 0; padding: .55rem 0 .55rem 1.25rem;
    white-space: normal; line-height: 1.3;
  }
  .carta-nav__qtd { display: inline; font-size: .75rem; color: var(--turquesa); }
  /* No desktop o nó corre pelo fio vertical (--y e --h do JS). */
  .carta-nav__marca {
    bottom: auto; top: 0; width: 1px; height: var(--h, 0px);
    transform: translateY(var(--y, 0px));
    transition: transform .45s var(--ease), height .45s var(--ease);
  }
  .carta-nav__marca::after { top: 50%; left: 0; margin: -4px 0 0 -4px; }
  .carta-cat:first-child { padding-top: 2.75rem; }
}

/* Categorias e grupos.
   Categoria: título grande e, embaixo, o friso da grade atravessando a
   coluna. Grupo (Especial do fim de semana, Apenas para dois, Outros…):
   título em vinho sobre um fio. */
.carta-cat { padding-top: clamp(3rem, 2rem + 3.5vw, 5.5rem); scroll-margin-top: 3.25rem; }
.carta-cat__titulo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem;
  font-family: var(--titulo); font-weight: 400; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); line-height: 1.02; letter-spacing: -.015em;
  padding-bottom: 1.1rem; margin-bottom: .5rem;
  background: var(--friso) 0 100% / 12px 12px repeat-x;
}
.carta-cat__titulo .numeros { font-size: .875rem; font-weight: 500; color: var(--turquesa); }
.grupo + .grupo { margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); }
.grupo__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 0 .5rem; border-bottom: 1px solid var(--tinta); }
.grupo__titulo { font-family: var(--titulo); font-weight: 400; font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem); line-height: 1.15; color: var(--vinho); }
.grupo__colunas { display: flex; margin-left: auto; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.grupo__colunas span { width: 5.25rem; text-align: right; }
.grupo__confirmar { margin-top: .75rem; padding: .5rem .75rem; font-size: .75rem; line-height: 1.5; color: var(--tinta-2); background: rgba(180, 85, 47, .07); border-left: 2px solid var(--lajota); }
.grupo__confirmar b { display: block; color: var(--lajota); }
.grupo--lista .grupo__lista { border-top: 1px solid var(--tinta); }
.grupo__cabeca ~ .grupo__lista { border-top: 0; }

/* Prato com foto: uma composição, não um cartão. Sem caixa, sem sombra, sem
   canto arredondado. Todas as fotos em 5:4, recorte pelo centro. Entre um
   prato e outro, um fio com o nó da grade no meio.
   Celular: foto, nome e preço na mesma linha, descrição.
   Desktop: foto de um lado e texto do outro, alternando a cada prato. */
.prato--foto { display: grid; gap: 1.1rem; padding: 2.25rem 0 2.5rem; }
.grupo__lista > .prato--foto:first-child { padding-top: 1.5rem; }
.prato--foto + .prato--foto, .prato--texto + .prato--foto, .prato--foto + .prato--texto {
  background:
    var(--no) 50% 0 / 16px 16px no-repeat,
    linear-gradient(var(--linha), var(--linha)) 0 7.5px / calc(50% - 1.25rem) 1px no-repeat,
    linear-gradient(var(--linha), var(--linha)) 100% 7.5px / calc(50% - 1.25rem) 1px no-repeat;
}
.prato__foto { background: var(--areia); }
.prato__foto img { transition: scale 1.2s var(--ease); }
.prato--foto:hover .prato__foto img { scale: 1.03; }

/* Nome e preço: o nome é título; o preço fica na mesma linha, alinhado à
   direita, sem caixa. */
.prato__cabeca { display: grid; grid-template-columns: 1fr auto; column-gap: 1.25rem; align-items: baseline; }
.prato__nome {
  font-family: var(--titulo); font-weight: 400;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.35rem); line-height: 1.06; letter-spacing: -.012em;
  text-wrap: pretty;
}
.prato__preco { font-size: 1.125rem; font-weight: 600; white-space: nowrap; }
.prato__desc { margin-top: .6rem; font-size: 1rem; line-height: 1.55; color: var(--tinta-2); max-width: 40ch; }

/* Dois preços: cada um com o rótulo por extenso. INDIVIDUAL — R$ 55,90 */
.precos { display: grid; gap: .2rem; margin-top: .7rem; }
.precos div { display: flex; align-items: baseline; gap: .45rem; }
.precos dt { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.precos dt::after { content: ' —'; letter-spacing: 0; }
.precos dd { font-size: 1.125rem; font-weight: 600; }

@media (min-width: 900px) {
  .prato--foto {
    grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: center;
    padding: clamp(3rem, 2rem + 2.5vw, 4.5rem) 0;
  }
  .grupo__lista > .prato--foto:first-child { padding-top: 2.5rem; }
  .prato--esq .prato__foto { grid-column: 1 / 7; }
  .prato--esq .prato__texto { grid-column: 7 / 13; padding-left: clamp(.5rem, 2vw, 2rem); }
  .prato--dir .prato__foto { grid-column: 7 / 13; grid-row: 1; }
  .prato--dir .prato__texto { grid-column: 1 / 7; grid-row: 1; padding-right: clamp(.5rem, 2vw, 2rem); }
  .prato__cabeca { column-gap: 1.5rem; }
  .prato__desc { margin-top: .9rem; font-size: 1.0625rem; }
}

/* Prato sem foto num grupo de pratos: só tipo, mesma hierarquia. */
.prato--texto { padding: 2.25rem 0 2.5rem; }
.prato--texto .prato__cabeca, .prato--texto .prato__desc { max-width: 36rem; }
@media (min-width: 900px) {
  .prato--texto { padding-block: clamp(3rem, 2rem + 2.5vw, 4.5rem); }
  .prato--texto > * { margin-left: calc(50% + var(--gap) / 2 + clamp(.5rem, 2vw, 2rem)); }
}

/* Linha de carta (bebidas, vinhos, porções, pets e pratos sem foto). */
.prato--linha { padding: .7rem 0; border-bottom: 1px solid var(--linha); }
.prato--linha .linha__nome { font-weight: 500; }
.prato--linha .linha__preco { font-weight: 500; }
.prato--linha .prato__desc { margin-top: .15rem; font-size: .875rem; color: var(--tinta-3); }
.grupo--tabela .linha__preco { width: 5.25rem; text-align: right; }

/* Linha com miniatura: bebidas e vinhos, com a foto real (bebidas da casa)
   ou a ilustração do produto (img/arte/). */
.prato--mini { display: grid; grid-template-columns: 3.5rem 1fr; column-gap: .9rem; align-items: center; min-height: 4.5rem; }
.prato__mini { width: 3.5rem; aspect-ratio: 1; }
/* Celular: nos vinhos, miniatura, nome e duas colunas de preço dividem a
   linha; as colunas estreitam e o pontilhado sai (a coluna já alinha). */
@media (max-width: 479px) {
  .grupo--tabela .linha__fio { display: none; }
  .grupo--tabela .linha__nome { flex: 1; }
  .grupo--tabela .linha__preco, .grupo--tabela .grupo__colunas span { width: 4.4rem; }
  .grupo--tabela .linha__preco { font-size: .9375rem; }
  .grupo--tabela.grupo--mini .prato--mini { grid-template-columns: 2.75rem 1fr; column-gap: .7rem; }
  .grupo--tabela .prato__mini { width: 2.75rem; }
}
@media (min-width: 900px) {
  /* Colunas de texto, como carta impressa: os grupos se encaixam sem buraco. */
  .carta-cat--compacta { columns: 2; column-gap: clamp(2rem, 5vw, 4rem); }
  .carta-cat--compacta > .carta-cat__titulo { column-span: all; }
  .carta-cat--compacta > .grupo { break-inside: avoid; margin-bottom: 2.5rem; }
  .carta-cat--compacta > .grupo + .grupo { margin-top: 0; }
}

/* Chegando por um link (menu/#prato-…): o prato acende um instante. */
.prato { scroll-margin-top: 4.5rem; }
.movimento .prato:target { animation: alvo 2.4s var(--ease) both; }
@keyframes alvo { 0%, 35% { background: rgba(163, 220, 201, .35); } 100% { background: transparent; } }

.carta [hidden] { display: none !important; }
.carta__vazio { padding: 3rem 0; font-family: var(--titulo); font-size: 1.25rem; color: var(--tinta-3); }
.carta__pe { display: grid; gap: .6rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--tinta); font-size: .875rem; color: var(--tinta-3); }
.carta__pe a:not(.link) { text-decoration: underline; text-underline-offset: .2em; }
.carta__pe a:hover { color: var(--tinta); }
.carta__pe .link { margin-top: .5rem; color: var(--tinta); font-size: .9375rem; }
.carta__creditos { margin-top: 1.25rem; font-size: .75rem; line-height: 1.5; }
.carta__creditos summary { cursor: pointer; width: max-content; color: var(--tinta-2); text-decoration: underline; text-underline-offset: .2em; }
.carta__creditos p, .carta__creditos ul { margin-top: .6rem; }
.carta__creditos ul { display: grid; gap: .25rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}