/* Hallmark · shape: Telhado (a faixa de foto abre entre as duas linhas do título; cardápio e bar com lista e foto fixa) · genre: editorial · theme: custom · job: book · idea: "O Cabruca tem duas luzes, almoço de linho e jantar cor de vinho, e a página muda com elas" · vibe: "vermelho da fachada, madeira, linho, latão"
 * paper: oklch(96.5% 0.013 72) almoço, oklch(22% 0.06 24) jantar · accent: oklch(42% 0.15 25) vermelho Cabruca (fachada; brand spec Dengo #ca0000 fechado) · display: Gambetta 300/400 · body: Hanken Grotesk 400/600 · hero: o título em duas linhas com a foto no vão, que se abre como teto · nav: logo à mão, quatro links, a chave almoço/jantar, reservar · footer: faixa curta, logo e links da casa · imagery: photographs, the client's own (cardápio Get In e fotos da casa) · signature: a chave almoço/jantar, que troca o cardápio e baixa o vinho sobre a página inteira
 * axes: light/roman-serif/warm (jantar: dark/roman-serif/warm) · posture: committed (vermelho e vinho em títulos e faixas, latão como sinal à noite) · brand: Dengo (spec 2026-11-05) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V5 · weakest: E, o cardápio é longo e quase todo em linhas; respondi com a foto fixa ao lado, descrições que só abrem quando pedidas e peso leve no serifado */
/* Hallmark · dismissed 58 · o cardápio é a lista real de pratos com preços, nomes curtos de duas palavras contados linha a linha */
/* Hallmark · dismissed 25 · os avisos são display, não prosa: o nome do prato no painel e a citação da chef */
/* Hallmark · waive 59 · a abertura termina no fundo escuro e a seção do nome começa com a foto da mata de ponta a ponta · as duas fotos de tela cheia se encostam de propósito, como um corte de cena */
/* Hallmark · dismissed F8 · a cliente pediu mais animação: a mata que assenta e a frase que se limpa no nome, os frutos que sobem ao sair da abertura e o trilho do cacau que anda de lado são as rolagens da página; topo é o cabeçalho fixo com o logo se escrevendo */
/* Hallmark · dismissed 23 · o vermelho que corre dentro do botão no hover fica só dentro do botão */
/* Hallmark · dismissed F4 · o botão cheio é um só; o quieto e o do topo são contornos que se preenchem só no hover */
/* Hallmark · waive 47c · as nervuras do fundo vermelho repetem o metal vertical da fachada da Fábrica de Dengo · o prédio é o assunto e a fachada é a marca mais reconhecível da casa */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- base da casa ---------- */
html { scroll-padding-top: calc(var(--topo-h) + var(--space-lg)); }
body { font-size: var(--text-md); transition: background-color var(--dur-long) var(--ease-out), color var(--dur-long) var(--ease-out); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; letter-spacing: var(--tracking-display); color: var(--color-titulo); }
h2 { font-size: var(--text-section); line-height: 1.02; max-width: 16ch; }
h3, h4 { margin: 0; }
.num { font-variant-numeric: tabular-nums lining-nums; }
a { text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
a:hover { text-decoration-color: currentColor; }
::selection { background: var(--color-latao); color: var(--color-latao-ink); }

html[data-luz="almoco"] .so-jantar,
html[data-luz="jantar"] .so-almoco { display: none; }

.pular { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-card); }
.pular:focus-visible { top: var(--space-md); }

/* ---------- botões: pílulas, com o preenchimento correndo da esquerda ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 54px; padding: 0 var(--space-xl); border: 1px solid var(--color-accent); border-radius: var(--radius-btn); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-sm)/1 var(--font-body); letter-spacing: 0.01em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: border-color var(--dur-long) var(--ease-out), color var(--dur-long) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--color-accent-2); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease-out); }
.btn:hover::before { transform: scaleX(1); }
.btn:hover { border-color: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 4px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--quieto { background: transparent; color: var(--color-ink); border-color: var(--color-rule-forte); }
.btn--quieto::before { background: var(--color-ink); }
.btn--quieto:hover { color: var(--color-paper); border-color: var(--color-ink); }
.btn--topo { min-height: 42px; padding: 0 var(--space-lg); background: transparent; color: var(--color-titulo); border-color: var(--color-titulo); }
.btn--topo::before { background: var(--color-titulo); }
.btn--topo:hover { color: var(--color-paper); border-color: var(--color-titulo); }

/* as molduras das fotos: retângulos limpos */
.vagem { position: relative; display: block; margin: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); }
.vagem > img { width: 100%; height: 100%; object-fit: cover; }

/* o traço à mão, na linha do logo, que se desenha sob os títulos */
.traco { display: block; width: min(15rem, 70%); height: 16px; margin-top: var(--space-md); overflow: visible; color: var(--color-latao); }
.traco path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--ease-out) 200ms; }
.traco.is-in path { stroke-dashoffset: 0; }

/* a cortina: a foto sobe de baixo e assenta */
.js [data-cortina] { clip-path: inset(100% 0 0 0); transition: clip-path 1300ms var(--ease-out); }
.js [data-cortina] img { transform: scale(1.16); transition: transform 1900ms var(--ease-out); }
.js [data-cortina].is-in { clip-path: inset(0 0 0 0); }
.js [data-cortina].is-in img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-cortina] { clip-path: none; transition: none; }
  .js [data-cortina] img { transform: none; transition: none; }
  .traco path { stroke-dashoffset: 0; transition: none; }
}

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid transparent; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-long) var(--ease-out); }
.topo.is-rolado { border-bottom-color: var(--color-rule); }
.topo[data-tom="fundo"], .topo[data-tom="campo"] { border-bottom-color: transparent;
  --color-titulo: var(--color-fundo-ink); --color-ink: var(--color-fundo-ink); --color-ink-2: var(--color-fundo-2); --color-muted: color-mix(in oklab, var(--color-fundo-ink) 62%, transparent);
  --color-rule-forte: color-mix(in oklab, var(--color-fundo-ink) 40%, transparent); --color-focus: var(--color-latao); }
.topo[data-tom="fundo"] { background: var(--color-fundo); --color-paper: var(--color-fundo); --color-paper-2: color-mix(in oklab, var(--color-fundo-ink) 10%, var(--color-fundo)); }
.topo[data-tom="campo"] { background: var(--color-campo); --color-paper: var(--color-campo); --color-paper-2: color-mix(in oklab, var(--color-campo-ink) 10%, var(--color-campo)); }
.topo[data-tom="papel-2"] { background: var(--color-paper-2); border-bottom-color: transparent; }
.topo[data-tom="linho"] { background: var(--color-linho); border-bottom-color: transparent; --color-paper: var(--color-linho); --color-paper-2: var(--color-linho-2); --color-titulo: var(--color-linho-titulo); --color-ink: var(--color-linho-ink); --color-ink-2: var(--color-linho-texto); --color-muted: var(--color-linho-texto); --color-rule-forte: color-mix(in oklab, var(--color-linho-ink) 30%, transparent); --color-focus: var(--color-linho-titulo); }
.topo, .topo .marca, .topo__nav a, .luz__op, .btn--topo { transition: background-color 520ms var(--ease-out), border-color 520ms var(--ease-out), color 520ms var(--ease-out); }
.topo__in { display: flex; align-items: center; gap: var(--space-xl); min-height: var(--topo-h); }
.marca { display: grid; justify-items: start; text-decoration: none; color: var(--color-titulo); margin-right: auto; line-height: 1; }
/* o logo desenhado à mão, como máscara: pega a cor do título no almoço e no jantar */
.marca__logo { display: block; width: 132px; aspect-ratio: 529 / 146; background-color: currentColor; -webkit-mask: url("../img/marca/cabruca.svg") center / contain no-repeat; mask: url("../img/marca/cabruca.svg") center / contain no-repeat; }
.marca__onde { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.marca:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 6px; border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .topo .marca__logo { animation: escreve 1100ms var(--ease-out) 200ms both; }
}
@keyframes escreve { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (forced-colors: active) { .marca__logo { background-color: CanvasText; } }

.topo__nav ul { display: flex; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.topo__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; }
.topo__nav a:hover { color: var(--color-titulo); }
.topo__nav a:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.topo__abre { display: none; }

/* a chave da luz: duas palavras, a escolhida sublinhada */
.luz { display: inline-flex; align-items: center; gap: var(--space-md); }
.luz__op { position: relative; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--color-muted); font-size: var(--text-sm); cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.luz__op::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-long) var(--ease-out); }
.luz__op + .luz__op::before { content: ""; position: absolute; left: calc(-1 * var(--space-md) / 2); top: 50%; width: 1px; height: 14px; transform: translateY(-50%); background: var(--color-rule-forte); }
.luz__op:hover { color: var(--color-ink); }
.luz__op[aria-pressed="true"] { color: var(--color-titulo); }
.luz__op[aria-pressed="true"]::after { transform: scaleX(1); }
.luz__op:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 4px; }
.luz__op:active { transform: translateY(1px); }
html:not(.js) .luz { display: none; }

/* ---------- 1 · abertura: o lugar e a comida em tela cheia ---------- */
.abre { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-rows: 1fr auto; min-height: calc(100svh - var(--topo-h)); background: var(--color-fundo); color: var(--color-fundo-ink);
  --color-ink: var(--color-fundo-ink); --color-ink-2: var(--color-fundo-2); --color-paper: var(--color-fundo);
  --color-rule-forte: color-mix(in oklab, var(--color-fundo-ink) 55%, transparent);
  --color-accent: var(--color-fundo-ink); --color-accent-2: var(--color-latao); --color-accent-ink: var(--color-fundo); --color-focus: var(--color-latao); }
.abre__fotos { position: absolute; inset: 0; z-index: -1; }
.abre__fotos::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, color-mix(in oklab, var(--color-fundo) 92%, transparent) 0%, color-mix(in oklab, var(--color-fundo) 55%, transparent) 38%, color-mix(in oklab, var(--color-fundo) 0%, transparent) 70%),
              linear-gradient(to right, color-mix(in oklab, var(--color-fundo) 55%, transparent) 0%, color-mix(in oklab, var(--color-fundo) 0%, transparent) 55%); }
.abre__slide { position: absolute; inset: 0; margin: 0; }
html:not(.js) .abre__slide:not(:first-child) { display: none; }
.js .abre__slide { opacity: 0; transition: opacity 1600ms var(--ease-in-out); }
.js .abre__slide.is-on { opacity: 1; z-index: 1; }
.abre__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abre__conteudo { position: relative; z-index: 2; align-self: end; display: grid; gap: var(--space-lg); padding-bottom: var(--space-xl); }
.abre__titulo { max-width: none; margin: 0; }
.abre__logo { display: block; width: min(58vw, 820px); aspect-ratio: 529 / 146; background-color: var(--color-fundo-ink); -webkit-mask: url("../img/marca/cabruca.svg") left center / contain no-repeat; mask: url("../img/marca/cabruca.svg") left center / contain no-repeat; }
.abre__frase { max-width: 32ch; font: 300 var(--text-2xl)/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--color-fundo-ink); }
.abre__acoes { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.abre__rodape { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-lg); padding-block: var(--space-md) var(--space-xl); border-top: 1px solid color-mix(in oklab, var(--color-fundo-ink) 22%, transparent); }
.abre__legenda { margin-right: auto; font-size: var(--text-sm); color: var(--color-fundo-2); transition: opacity var(--dur-long) var(--ease-out); }
.abre__legenda.is-trocando { opacity: 0; }
.abre__pontos { display: flex; gap: var(--space-xs); }
.abre__ponto { width: 24px; height: 1px; background: color-mix(in oklab, var(--color-fundo-ink) 35%, transparent); transform-origin: left; }
.abre__ponto.is-on { background: var(--color-latao); }
.abre__pausa { min-height: 44px; padding: 0 var(--space-md); border: 1px solid color-mix(in oklab, var(--color-fundo-ink) 40%, transparent); border-radius: var(--radius-pill); background: transparent; color: var(--color-fundo-ink); font-size: var(--text-xs); white-space: nowrap; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
.abre__pausa:hover { border-color: var(--color-fundo-ink); }
.abre__pausa:focus-visible { outline: 1px solid var(--color-latao); outline-offset: 3px; }
.abre__pausa:active { transform: translateY(1px); }
html:not(.js) .abre__pausa, html:not(.js) .abre__pontos { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .abre__slide.is-on img { animation: aproxima 9000ms linear both; }
  .abre__logo { animation: escreve 1700ms cubic-bezier(0.6, 0.05, 0.25, 1) 300ms both; }
  .abre__frase { animation: aparece 900ms var(--ease-out) 1200ms both; }
  .abre__acoes { animation: aparece 900ms var(--ease-out) 1350ms both; }
  .abre__fotos .abre__slide:first-child img { animation: aproxima 9000ms linear both, revela 1400ms var(--ease-out) both; }
}
@keyframes aproxima { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes revela { from { opacity: 0; } to { opacity: 1; } }
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
[data-show].is-parado .abre__slide img { animation-play-state: paused; }

/* ---------- 2 · o nome: a mata como palco ---------- */
.nome { position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-gap); background: var(--color-fundo); color: var(--color-fundo-ink); }
.nome__mata { position: absolute; inset: 0; z-index: -1; }
.nome__mata img { width: 100%; height: 100%; object-fit: cover; }
.nome__mata::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in oklab, var(--color-fundo) 94%, transparent) 0%, color-mix(in oklab, var(--color-fundo) 78%, transparent) 48%, color-mix(in oklab, var(--color-fundo) 40%, transparent) 100%); }
.nome__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-3xl); align-items: end; }
.nome__frase { grid-column: 1 / span 7; grid-row: 1; max-width: 22ch; font-size: var(--text-statement); line-height: 1.08; letter-spacing: -0.02em; color: var(--color-fundo-ink); }
.nome__fruto { grid-column: 9 / -1; grid-row: 1 / 3; align-self: center; aspect-ratio: 4 / 5; }
.nome__fatos { grid-column: 1 / span 8; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.nome__fatos > div { display: flex; flex-direction: column-reverse; justify-content: start; gap: var(--space-md); padding: var(--space-lg) var(--space-xl) 0 var(--space-lg); border-left: 1px solid color-mix(in oklab, var(--color-latao) 45%, transparent); }
.nome__fatos > div:first-child { padding-left: 0; border-left: 0; }
.nome__fatos dt { max-width: 26ch; font-size: var(--text-sm); line-height: 1.5; color: var(--color-fundo-2); }
.nome__fatos dd { margin: 0; font: 300 var(--text-figure)/0.9 var(--font-display); letter-spacing: -0.03em; color: var(--color-latao); }
.nome__fonte { grid-column: 1 / -1; grid-row: 3; font-size: var(--text-xs); color: var(--color-fundo-2); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .nome__frase { animation: frase-limpa linear both; animation-timeline: view(); animation-range: entry 15% cover 42%; }
    @keyframes frase-limpa { from { clip-path: inset(0 100% 0 0); transform: translateX(-0.2em); } to { clip-path: inset(0 0 0 0); transform: none; } }
    .nome__mata img { animation: mata-chega linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes mata-chega { from { transform: scale(1.18); } to { transform: scale(1); } }
  }
}

/* ---------- 3 · cardápio ---------- */
.cardapio { padding-block: var(--section-gap-s) var(--section-gap); }
.cardapio__topo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-3xl); }
.cardapio__topo h2 { max-width: 13ch; }

.abas { display: inline-flex; gap: var(--space-xl); }
.abas [role="tab"] { position: relative; min-height: 48px; padding: 0; border: 0; background: transparent; color: var(--color-muted); font: 300 var(--text-2xl)/1 var(--font-display); letter-spacing: -0.01em; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.abas [role="tab"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-long) var(--ease-out); }
.abas [role="tab"]:hover { color: var(--color-ink); }
.abas [role="tab"][aria-selected="true"] { color: var(--color-titulo); }
.abas [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
.abas [role="tab"]:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 4px; }
.abas [role="tab"]:active { transform: translateY(1px); }
html:not(.js) .abas { display: none; }

.cardapio__corpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-3xl); align-items: start; }
.painel { position: sticky; top: calc(var(--topo-h) + var(--space-xl)); z-index: var(--z-raised); }
html:not(.js) .painel { display: none; }
html:not(.js) .cardapio__corpo { grid-template-columns: minmax(0, 1fr); }
.painel__foto { position: relative; margin: 0; aspect-ratio: 1 / 1; max-height: calc(100svh - var(--topo-h) - 270px); width: 100%; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); }
.painel__camada { position: absolute; inset: 0; opacity: 0; transition: opacity 480ms var(--ease-out); }
.painel__camada.is-on { opacity: 1; }
.painel__camada img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.painel__camada--texto { display: grid; place-items: end start; padding: var(--space-xl); background: var(--color-campo); color: var(--color-campo-ink); }
.painel__camada--texto p { max-width: 14ch; font: 300 var(--text-3xl)/1.05 var(--font-display); letter-spacing: -0.015em; }
.painel__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-lg); margin-top: var(--space-lg); min-height: 7.5rem; }
.painel__nome { font: 400 var(--text-xl)/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--color-titulo); }
.painel__preco { grid-column: 2; grid-row: 1; font-size: var(--text-lg); white-space: nowrap; }
.painel__desc { grid-column: 1 / -1; margin-top: var(--space-xs); max-width: 52ch; color: var(--color-ink-2); }

.menu__titulo { margin-bottom: var(--space-xl); font-size: var(--text-3xl); }
.js .menu__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.menu + .menu { margin-top: var(--space-3xl); }
.cat { margin-top: var(--space-2xl); }
.executivo + .cat, .menu__titulo + .cat { margin-top: 0; }
.executivo { margin-bottom: var(--space-2xl); padding: var(--space-sm) var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-card); }
.cat__nome { margin-bottom: var(--space-sm); font-size: var(--text-2xl); }
.cat__lista { margin: 0; padding: 0; list-style: none; }

.prato { position: relative; }
.prato__det > summary { list-style: none; }
.prato__det > summary::-webkit-details-marker { display: none; }
.prato__linha { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); cursor: pointer; }
.executivo .prato__linha { border-top: 0; }
.prato__linha:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.prato__nome { position: relative; font: 400 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.005em; color: var(--color-ink); transition: transform var(--dur-long) var(--ease-out), color var(--dur-short) var(--ease-out); }
.prato__nome::before { content: ""; position: absolute; left: calc(-1 * var(--space-lg)); top: 0.62em; width: var(--space-md); height: 1px; background: var(--color-titulo); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-long) var(--ease-out); }
.prato__preco { color: var(--color-ink-2); white-space: nowrap; }
.prato__corpo { padding: 0 0 var(--space-md); }
.prato__det:not([open]) > .prato__corpo { display: none; }
.prato__desc { max-width: 56ch; color: var(--color-ink-2); }
.prato__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: var(--space-md); border-radius: var(--radius-card); }
.prato__linha:hover .prato__nome { color: var(--color-titulo); }
.prato.is-ativo .prato__nome, .executivo.is-ativo .prato__nome { transform: translateX(var(--space-lg)); color: var(--color-titulo); }
.prato.is-ativo .prato__nome::before, .executivo.is-ativo .prato__nome::before { transform: scaleX(1); }
.prato:target .prato__linha { background: color-mix(in oklab, var(--color-latao) 22%, transparent); }
.cardapio__nota { margin-top: var(--space-2xl); font-size: var(--text-xs); color: var(--color-muted); }

/* no computador, com script, a foto mora no painel e a lista só abre a descrição */
@media (min-width: 60rem) {
  .js .prato__corpo .prato__foto { display: none; }
}

/* ---------- 4 · cacau: o trilho de frutos ---------- */
.cacau { --vagem-h: min(48svh, 440px); position: relative; background: var(--color-linho); color: var(--color-linho-ink); }
.cacau h2 { color: var(--color-linho-titulo); max-width: 14ch; }
.cacau__palco { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2xl); padding-block: var(--section-gap-s); overflow: hidden; }
.cacau.is-preso .cacau__palco { position: sticky; top: var(--topo-h); height: calc(100svh - var(--topo-h)); padding-block: var(--space-lg); gap: var(--space-xl); }
.cacau__cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.cacau__cabeca h2 { grid-column: 1 / span 6; }
.cacau__lead { grid-column: 8 / -1; max-width: 40ch; font-size: var(--text-lead); line-height: 1.5; color: var(--color-linho-texto); }
.cacau__trilho { --borda: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  display: flex; gap: var(--space-2xl); width: max-content; margin: 0; padding: var(--space-md) var(--borda) var(--space-xl); list-style: none; }
.cacau:not(.is-preso) .cacau__trilho { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--borda); overscroll-behavior-x: contain; scrollbar-width: thin; }
.fruto { flex: 0 0 auto; width: calc(var(--vagem-h) * 0.8); scroll-snap-align: start; }
.fruto__link { display: grid; gap: var(--space-md); color: var(--color-linho-ink); text-decoration: none; border-radius: 2px; }
.fruto__forma { order: 2; font: 300 var(--text-xl)/1.15 var(--font-display); letter-spacing: -0.015em; transition: color var(--dur-short) var(--ease-out); }
.fruto__foto { height: var(--vagem-h); background: var(--color-linho-2); }
.fruto__foto img { transition: transform 900ms var(--ease-out); }
.fruto__prato { order: 3; margin-top: calc(-1 * var(--space-xs)); font-size: var(--text-sm); color: var(--color-linho-texto); }
.fruto__foto { order: 1; }
.fruto__link:hover .fruto__forma { color: var(--color-linho-titulo); }
.fruto__link:hover .fruto__forma { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.fruto__link:focus-visible { outline: 1px solid var(--color-linho-titulo); outline-offset: 8px; }
.fruto__link:active .fruto__forma { color: var(--color-linho-texto); }

/* ---------- 5 · bar ---------- */
.bar { padding-block: var(--section-gap) var(--section-gap-s); }
.bar__topo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.bar__texto { grid-column: 8 / -1; grid-row: 1; }
.bar__lead { margin-top: var(--space-lg); max-width: 38ch; font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }
.bar__foto { grid-column: 1 / span 6; grid-row: 1; margin: 0; }
.bar__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-card); }
.bar__foto figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
/* a carta do bar espelha o cardápio: lista à esquerda, foto alta à direita */
.bar__corpo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); align-items: start; margin-top: var(--space-4xl); padding-top: var(--space-3xl); border-top: 1px solid var(--color-rule); }
.bar__lista { margin: 0; padding: 0; list-style: none; }
.prato--drink .prato__nome { font-size: var(--text-xl); }
.prato--drink .prato__linha { padding-block: var(--space-md); }
.prato--drink .prato__foto { aspect-ratio: 4 / 5; }
.painel--bar .painel__foto { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--topo-h) - 240px); }
html:not(.js) .bar__corpo { grid-template-columns: minmax(0, 1fr); }

.bar__mais { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3xl); margin-top: var(--space-3xl); }
.sem-alcool .lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3xl); }
.bar__mais h3, .vinhos__titulo { font-size: var(--text-2xl); }
.lista { margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); }
.lista__nome { font: 400 var(--text-lg)/1.3 var(--font-display); }
.lista__preco { grid-column: 2; grid-row: 1; color: var(--color-ink-2); white-space: nowrap; }
.lista__desc { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }
.lista__desc:empty { display: none; }
.vinhos > summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-sm); list-style: none; cursor: pointer; border-bottom: 1px solid var(--color-rule-forte); }
.vinhos > summary::-webkit-details-marker { display: none; }
.vinhos > summary:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 4px; border-radius: 2px; }
.vinhos__conta { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink-2); }
.vinhos__conta::after { content: ""; width: 9px; height: 9px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-short) var(--ease-out); }
.vinhos[open] .vinhos__conta::after { transform: translateY(2px) rotate(-135deg); }
.vinhos > summary:hover .vinhos__titulo { color: var(--color-ink); }
.vinhos:not([open]) > .vinhos__corpo { display: none; }
.vinhos__corpo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: var(--space-xl) var(--space-3xl); padding-top: var(--space-lg); }
.vinhos__grupo h4 { font-size: var(--text-xl); }
.lista--curta li { padding: var(--space-xs) 0; }
.lista--curta .lista__nome { font-size: var(--text-md); }

/* ---------- 6 · a chef: frase, nome, bio e citação; retrato grande e um prato dela ---------- */
.chef { padding-block: var(--section-gap); background: var(--color-paper-2); }
.chef__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gap-columns); }
.chef__texto { grid-column: 1 / span 5; grid-row: 1; }
.chef__texto h2 { max-width: 11ch; }
.chef__nome { margin-top: var(--space-xl); font: 400 var(--text-xl)/1.15 var(--font-display); color: var(--color-ink); }
.chef__bio { margin-top: var(--space-sm); max-width: 42ch; color: var(--color-ink-2); }
.chef__citacao { margin: var(--space-2xl) 0 0; padding-left: var(--space-lg); border-left: 1px solid var(--color-latao); }
.chef__citacao blockquote { margin: 0; }
.chef__citacao blockquote p { max-width: 30ch; font: 300 var(--text-xl)/1.35 var(--font-display); color: var(--color-ink); }
.chef__citacao figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.chef__retrato { grid-column: 7 / -1; grid-row: 1 / span 2; margin: 0; }
.chef__retrato-foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); }
.chef__retrato-foto > img { object-position: 50% 30%; }
.chef__prato { grid-column: 2 / span 3; grid-row: 2; align-self: end; margin: var(--space-3xl) 0 0; }
.chef__prato-foto { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); }
.chef__prato-foto img { width: 100%; height: 100%; object-fit: cover; }
.chef__prato figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-2); }
.chef__prato-rotulo { display: block; margin-bottom: var(--space-3xs); font: 400 var(--text-md)/1.3 var(--font-display); color: var(--color-ink); }

/* ---------- 7 · a casa: galeria encaixada ---------- */
.casa { padding-block: var(--section-gap); }
.casa__cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-3xl); }
.casa__cabeca h2 { grid-column: 1 / span 7; }
.casa__lead { grid-column: 8 / -1; max-width: 40ch; font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }
.galeria { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--space-md); height: min(82svh, 780px); }
.galeria__f { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); }
.galeria__f > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.galeria__f--salao { grid-row: 1 / 3; }
.galeria__f figcaption { position: absolute; left: var(--space-md); bottom: var(--space-md); z-index: 2; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-fundo) 72%, transparent); color: var(--color-fundo-ink); font-size: var(--text-xs); }
.galeria__f--noite[data-cortina] { transition-delay: 140ms; }
.galeria__f--fabrica[data-cortina] { transition-delay: 280ms; }
.casa__eventos { margin-top: var(--space-2xl); max-width: 44ch; font: 300 var(--text-xl)/1.35 var(--font-display); color: var(--color-ink); }
.casa__eventos a { color: var(--color-titulo); }

/* ---------- 8 · visite ---------- */
.visite { --color-accent: var(--color-latao); --color-accent-2: var(--color-latao-2); --color-accent-ink: var(--color-latao-ink); padding-block: var(--section-gap); background: var(--color-fundo); color: var(--color-fundo-ink); }
.visite h2 { color: var(--color-fundo-ink); }
.visite__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.visite__grid { grid-template-rows: auto auto auto auto 1fr; }
.visite__end { grid-column: 1 / span 5; max-width: 12ch; font-size: var(--text-section); line-height: 1.04; }
.visite__bairro { grid-column: 1 / span 5; margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-fundo-2); }
.visite__horas { grid-column: 1 / span 5; display: grid; grid-template-columns: minmax(0, 1fr); margin: var(--space-2xl) 0 0; }
.visite__horas > div { padding: var(--space-md) 0; border-top: 1px solid color-mix(in oklab, var(--color-latao) 40%, transparent); }
.visite__fachada { grid-column: 6 / -1; grid-row: 1 / 6; align-self: center; margin: 0 0 0 var(--space-xl); }
.visite__fachada img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 42% 50%; border-radius: var(--radius-card); }
.visite__fachada figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-fundo-2); }
.visite__horas dt { font-size: var(--text-sm); color: var(--color-latao); }
.visite__horas dd { margin: var(--space-xs) 0 0; max-width: 28ch; font: 300 var(--text-xl)/1.3 var(--font-display); }
.visite__horas a { color: inherit; }
.visite__acoes { grid-column: 1 / span 5; display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-2xl); }
.visite .btn--quieto { background: transparent; color: var(--color-fundo-ink); border-color: color-mix(in oklab, var(--color-fundo-ink) 40%, transparent); }
.visite .btn--quieto:hover { background: transparent; border-color: var(--color-fundo-ink); }
.visite .btn:focus-visible, .visite a:focus-visible { outline-color: var(--color-latao); }

/* ---------- rodapé ---------- */
.rodape { padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.rodape__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: baseline; }
.rodape__marca { grid-column: 1 / span 3; margin: 0; color: var(--color-titulo); }
.marca__logo--rodape { width: min(220px, 100%); }
.rodape__sobre { grid-column: 4 / span 4; color: var(--color-ink-2); }
.rodape__links { grid-column: 8 / -1; display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-xs) var(--space-xl); margin: 0; padding: 0; list-style: none; }
.rodape__links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--color-ink); }
.rodape__links a:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.rodape__credito { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- a única revelação ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- a troca de luz: o vinho desce (jantar) ou o linho se abre (almoço) ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-new(root) { z-index: 2; }
  html[data-vt="jantar"]::view-transition-new(root) { animation: teto-fecha var(--dur-luz) var(--ease-in-out) both; }
  html[data-vt="almoco"]::view-transition-new(root) { animation: teto-recolhe var(--dur-luz) var(--ease-in-out) both; }
}
@keyframes teto-fecha { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes teto-recolhe { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }

/* ---------- telas médias e pequenas ---------- */
@media (max-width: 75rem) {
  .topo__in { gap: var(--space-lg); }
  .topo__nav ul { gap: var(--space-lg); }
  .cardapio__corpo { column-gap: var(--space-2xl); }
}
@media (max-width: 60rem) {
  :root { --topo-h: 64px; }
  .topo__in { gap: var(--space-sm); }
  .topo__nav { position: absolute; top: 100%; left: 0; right: 0; padding: var(--space-md) var(--gutter) var(--space-lg); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
  .js .topo__nav:not(.is-aberto) { display: none; }
  .topo__nav ul { flex-direction: column; gap: 0; }
  .topo__nav a { min-height: 48px; font: 300 var(--text-xl)/1 var(--font-display); color: var(--color-ink); }
  .topo__abre { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-forte); border-radius: var(--radius-btn); background: transparent; color: var(--color-ink); font-size: var(--text-sm); cursor: pointer; }
  .topo__abre:hover { border-color: var(--color-ink); }
  .topo__abre:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 2px; }
  .topo__abre:active { transform: translateY(1px); }
  html:not(.js) .topo__abre { display: none; }
  .marca__logo { width: 112px; }

  .abre { min-height: calc(92svh - var(--topo-h)); }
  .abre__logo { width: min(82vw, 520px); }
  .abre__pontos { display: none; }
  .nome__frase, .nome__fatos, .nome__fruto { grid-column: 1 / -1; grid-row: auto; }
  .nome__fruto { width: min(24rem, 100%); }
  .nome__fatos { grid-template-columns: minmax(0, 1fr); }
  .nome__fatos > div { padding: var(--space-lg) 0; border-left: 0; border-top: 1px solid color-mix(in oklab, var(--color-latao) 45%, transparent); }
  .nome__fonte { grid-row: auto; }
  .visite__horas > div { border-top-color: color-mix(in oklab, var(--color-latao) 40%, transparent); }
  .cardapio__corpo { grid-template-columns: minmax(0, 1fr); }
  .painel { display: none; }
  .prato.is-ativo .prato__nome, .executivo.is-ativo .prato__nome { transform: none; }
  .prato__nome::before { display: none; }
  .cacau__cabeca h2, .cacau__lead { grid-column: 1 / -1; }
  .cacau__lead { margin-top: var(--space-lg); }
  .bar__texto, .bar__foto { grid-column: 1 / -1; grid-row: auto; }
  .bar__texto { margin-top: var(--space-xl); }
  .bar__corpo { margin-top: var(--space-2xl); padding-top: var(--space-2xl); }
  .casa__cabeca, .casa__eventos { grid-column: 1 / -1; }
  .bar__corpo { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-2xl); }
  .bar__mais { row-gap: var(--space-2xl); }
  .sem-alcool .lista { grid-template-columns: minmax(0, 1fr); }
  .chef__grid { grid-template-rows: none; }
  .chef__texto, .chef__retrato { grid-column: 1 / -1; grid-row: auto; }
  .chef__retrato { margin-top: var(--space-2xl); }
  .chef__prato { grid-column: 1 / span 9; grid-row: auto; margin-top: var(--space-xl); }
  .casa__cabeca h2, .casa__lead { grid-column: 1 / -1; }
  .casa__lead { margin-top: var(--space-lg); }
  .galeria { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; height: auto; gap: var(--space-sm); }
  .galeria__f--salao { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .galeria__f--noite, .galeria__f--fabrica { aspect-ratio: 4 / 5; }

  .visite__end, .visite__bairro, .visite__horas, .visite__acoes, .visite__fachada { grid-column: 1 / -1; grid-row: auto; }
  .visite__fachada { margin: var(--space-2xl) 0 0; }
  .rodape__marca, .rodape__sobre, .rodape__links { grid-column: 1 / -1; }
  .rodape__links { justify-content: start; }
}
@media (max-width: 40rem) {
  .abre { padding-top: var(--space-xl); }
  .abre__frase { font-size: var(--text-xl); }
  .abre__rodape { padding-bottom: var(--space-lg); }
  .abre__acoes .btn { flex: 1 1 auto; }
  .topo .luz { display: none; }
  .marca__onde { display: none; }
  .abas { gap: var(--space-lg); }
  .cacau { --vagem-h: min(56svh, 420px); }
  .chef__citacao blockquote p { text-indent: 0; font-size: var(--text-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .luz__op, .abas [role="tab"], body, .topo { transition: background-color var(--dur-short) linear, color var(--dur-short) linear; }
  .btn::before { transition: none; }
  .prato__nome, .prato__nome::before, .painel__camada, .vinhos__conta::after, .luz__op::after, .abas [role="tab"]::after, .fruto__foto, .fruto__forma { transition: none; }
}