/* Fontes (self-hosted, subset latin) */
/* latin-ext */
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ShipporiMincho-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ShipporiMincho-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/ShipporiMincho-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/ShipporiMincho-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ZenKakuGothicNew-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ZenKakuGothicNew-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ZenKakuGothicNew-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ZenKakuGothicNew-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/ZenKakuGothicNew-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/ZenKakuGothicNew-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ──────────────────────────────────────────────
   GATAE — Restaurante Japonês
   Base estática primeiro; os efeitos de scroll
   (animation-timeline) entram no bloco final.
   ────────────────────────────────────────────── */

:root {
  --ink: #101122;
  --navy: #17182f;
  --paper: #f3ece0;
  --paper-2: #e8dfcf;
  --red: #d8312a;
  --red-deep: #b9171a;
  --red-text: #ff6f60;
  --on-dark: #efe8dc;
  --muted-dark: #aaa5b6;
  --muted-paper: #5f574d;

  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Noto Serif JP", Georgia, serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --max: 1360px;
  --head-h: 4.75rem;
  /* logo do cabeçalho: altura no topo e escala final (3.1rem ÷ altura) — muda em telas baixas */
  --logo-h: 7.4rem;
  --logo-end: .419;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* seigaiha — padrão de ondas que aparece nos cardápios da casa */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cdefs%3E%3Cg id='w'%3E%3Ccircle r='30'/%3E%3Ccircle r='23'/%3E%3Ccircle r='16'/%3E%3Ccircle r='9'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%2317182f' stroke='%23ffffff' stroke-opacity='.075'%3E%3Cuse href='%23w' x='30' y='-15'/%3E%3Cuse href='%23w' x='0' y='0'/%3E%3Cuse href='%23w' x='60' y='0'/%3E%3Cuse href='%23w' x='30' y='15'/%3E%3Cuse href='%23w' x='0' y='30'/%3E%3Cuse href='%23w' x='60' y='30'/%3E%3Cuse href='%23w' x='30' y='45'/%3E%3C/g%3E%3C/svg%3E");
  /* mesma onda em vinho: separa os sabores do cardápio Takumi (navy) */
  /* ponte (img/ponte.png) embutida: máscara de CSS por URL externa é bloqueada em file:// */
  --ponte: url("data:image/png;base64,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");
  --wine: #4a1a26;
  --wave-wine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cdefs%3E%3Cg id='w'%3E%3Ccircle r='30'/%3E%3Ccircle r='23'/%3E%3Ccircle r='16'/%3E%3Ccircle r='9'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%234a1a26' stroke='%23ffffff' stroke-opacity='.075'%3E%3Cuse href='%23w' x='30' y='-15'/%3E%3Cuse href='%23w' x='0' y='0'/%3E%3Cuse href='%23w' x='60' y='0'/%3E%3Cuse href='%23w' x='30' y='15'/%3E%3Cuse href='%23w' x='0' y='30'/%3E%3Cuse href='%23w' x='60' y='30'/%3E%3Cuse href='%23w' x='30' y='45'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Reset mínimo ── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-h) + 1rem);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; }
/* o vermelho claro do foco some sobre fundo claro: nessas áreas usa o vermelho escuro */
.manifesto :focus-visible, .menu--carte :focus-visible, .ambiente__grid :focus-visible, .feed :focus-visible,
.hero-light .hero :focus-visible, .hero-light .head:not(.is-solid) :focus-visible { outline-color: var(--red-deep); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; z-index: 100; left: 1rem; top: -4rem;
  padding: .7rem 1rem; background: var(--paper); color: var(--ink); font-weight: 700;
}
.skip:focus { top: 1rem; }

/* ── Tipografia ── */
.display {
  font: 700 clamp(2rem, min(4.6vw, 8.5svh), 4rem)/1.08 var(--serif);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.display--xl  { font-size: clamp(2.2rem, min(5.2vw, 9.5svh), 4.7rem); line-height: 1.04; }
.display--xxl { font-size: clamp(2.3rem, min(6.4vw, 14svh), 6.2rem); line-height: 1; letter-spacing: -.02em; }

.eyebrow {
  display: flex; align-items: center; gap: .8rem;
  font: 500 .8rem/1.2 var(--sans);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--red-text);
}
.eyebrow--deep { color: var(--red-deep); }

.lead { font: 500 clamp(1.2rem, 1.9vw, 1.6rem)/1.5 var(--serif); }

.muted { color: var(--muted-dark); }
.nw { white-space: nowrap; }
/* campanha de outubro: o <script> do <head> põe .daily (já abre todos os dias) e .aniv-over (campanha encerrada) no <html> */
html.daily .only-before, html:not(.daily) .only-daily { display: none; }
html.aniv-over .promo, html.aniv-over .aniv { display: none; }

/* ── Botões e links ── */
.btn {
  --bg: var(--red); --fg: #fff; --glow: rgb(216 49 42 / .75);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: baseline; gap: .6rem;
  min-height: 3.1rem; padding: .85rem 1.7rem;
  background: var(--bg); color: var(--fg);
  font: 700 .95rem/1.2 var(--sans); letter-spacing: .04em; text-decoration: none;
  border: 1px solid var(--bg); border-radius: .7rem;
  box-shadow: 0 .7rem 1.4rem -.9rem var(--glow, transparent);
  transition: color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fg);
  transform: translateY(101%);
  transition: transform .45s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--bg); transform: translateY(-2px); box-shadow: 0 .9rem 1.6rem -.8rem var(--glow, transparent); }
.btn:active { transform: translateY(0); }
.btn .ico { flex: none; width: 1.05em; height: 1.05em; fill: currentColor; align-self: center; }
.btn small { font: 400 .78rem/1 var(--sans); letter-spacing: .06em; opacity: .8; }
.btn--sm { min-height: 2.6rem; padding: .6rem 1.2rem; font-size: .85rem; }
.btn--lg { min-height: 3.6rem; padding: 1rem 2.2rem; font-size: 1.05rem; }
.btn--ghost {
  --bg: rgb(255 255 255 / .1); --fg: var(--on-dark); --glow: transparent;
  border-color: rgb(239 232 220 / .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink); border-color: var(--on-dark); }
.btn--ghost::before { background: var(--on-dark); }
.btn--paper { --bg: var(--paper); --fg: var(--ink); --glow: rgb(0 0 0 / .45); }
.btn--paper::before { background: var(--ink); }
.btn--paper:hover, .btn--paper:focus-visible { color: var(--paper); border-color: var(--ink); }
.btn--dark { --bg: var(--ink); --fg: var(--paper); --glow: rgb(16 17 34 / .6); }
.btn--dark::before { background: var(--red); }
.btn--dark:hover, .btn--dark:focus-visible { color: #fff; border-color: var(--red); }

.link {
  display: inline-block; padding-block: .35rem;
  font-weight: 700; letter-spacing: .03em; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .45s var(--ease), color .3s;
}
.link::after { content: " →"; display: inline-block; transition: transform .35s var(--ease); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; color: var(--red-text); }
.link:hover::after { transform: translateX(.3em); }

/* ── Cabeçalho ── */
.head { position: fixed; inset: 0 0 auto; z-index: 50; }
.head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(16 17 34 / .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgb(255 255 255 / .06);
  opacity: 0; transition: opacity .35s;
}
.head.is-solid::before { opacity: 1; }
.head__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  max-width: var(--max); margin-inline: auto; padding: .7rem var(--gutter);
  min-height: var(--head-h);
}
.head__logo { position: relative; display: block; flex: none; width: 6.32rem; height: 3.1rem; }
.head__logo-full--ink { display: none; }
.head__logo-full {
  position: absolute; left: 0; top: 0; max-width: none; height: var(--logo-h); width: auto;
  transform-origin: 0 0; transition: scale .7s var(--ease), opacity .5s var(--ease);
}
.head.is-solid .head__logo-full { scale: var(--logo-end); opacity: 0; }
/* wordmark "GATAE" (letras do logo, em branco): é o que fica no menu depois da rolagem */
.head__logo-word {
  position: absolute; left: 0; top: 50%; max-width: none; height: 1.5rem; width: auto;
  opacity: 0; translate: 0 calc(-50% + .3rem); transition: opacity .5s var(--ease) .15s, translate .5s var(--ease) .15s;
}
.head.is-solid .head__logo-word { opacity: 1; translate: 0 -50%; }

.nav { display: flex; align-items: center; gap: 2.2rem; }
.nav ul { display: flex; gap: 1.9rem; }
.nav li a {
  display: block; padding: .4rem 0;
  font-size: .92rem; font-weight: 500; letter-spacing: .05em; text-decoration: none;
  background: linear-gradient(var(--red-text), var(--red-text)) 0 100% / 0 1px no-repeat;
  transition: background-size .4s var(--ease);
}
.nav li a:hover, .nav li a:focus-visible { background-size: 100% 1px; }

.burger { display: none; }

/* seletor de idioma (HTML gerado por scripts/i18n.py): bandeira + código; herda a cor do cabeçalho */
.lang { display: flex; align-items: center; gap: .1rem; }
.lang__item {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 .45rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-decoration: none;
  text-underline-offset: .4em; text-decoration-thickness: 2px;
}
.lang__item img { width: 1.25rem; height: .875rem; border-radius: 2px; box-shadow: 0 0 0 1px rgb(128 128 128 / .45); }
.lang__item:hover, .lang__item:focus-visible { text-decoration-line: underline; }
.lang__item[aria-current="true"] { text-decoration-line: underline; }
.lang__item.is-pref:not(:hover) { text-decoration-line: underline; text-decoration-style: dotted; }
.progress {
  position: fixed; z-index: 60; inset: 0 0 auto; height: 3px;
  background: var(--red); transform-origin: 0 50%; transform: scaleX(0);
}

/* ── Hero ── */
.hero { position: relative; background: var(--ink); }
.hero__stage { position: relative; height: 100svh; min-height: min(36rem, 100svh); overflow: hidden; display: grid; align-content: end; }
.hero__slides, .hero__shade { position: absolute; inset: 0; }
.hero__slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: brightness(1.22) saturate(1.12) contrast(1.02);
}
.hero__slides .hero__sign { opacity: 1; --n: 0; } /* faixada: primeiro slide */
.hero__shade {
  background:
    linear-gradient(90deg, rgb(16 17 34 / .74) 0%, rgb(16 17 34 / .5) 42%, rgb(16 17 34 / 0) 100%),
    linear-gradient(0deg, rgb(16 17 34 / .62) 0%, transparent 34%),
    linear-gradient(180deg, rgb(16 17 34 / .5) 0%, transparent 24%);
}
.hero__copy {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: calc(var(--head-h) + 2rem) var(--gutter) clamp(6.5rem, 14vh, 9rem);
}
.hero__title {
  margin-block: clamp(.9rem, 2.6svh, 1.4rem) clamp(1.2rem, 4svh, 2.2rem);
  /* 5 linhas: cabe na altura da tela (cabeçalho + selo + título + botões + dados ≈ 24rem) */
  font: 700 clamp(1.6rem, min(4.9vw, calc((100svh - 24rem) / 5.4)), 4.6rem)/1.05 var(--serif);
  letter-spacing: -.02em;
  text-shadow: 0 .06em .7em rgb(16 17 34 / .5);
}
.hero__title span { display: block; }
.hero__title-em { color: var(--red-text); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero__facts {
  position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 1.6rem;
  display: flex; gap: 2.5rem; flex-wrap: wrap;
  max-width: calc(var(--max) - 2 * var(--gutter)); margin-inline: auto;
  padding-top: 1rem; border-top: 1px solid rgb(239 232 220 / .22);
  font-size: .85rem;
}
.hero__facts dt { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-dark); }
.hero__facts dd { color: var(--on-dark); }
.narrow-only { display: none; }
.hero__facts a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.hero__facts a:hover, .hero__facts a:focus-visible { background-size: 100% 1px; }
.hero__cue {
  position: absolute; z-index: 2; right: var(--gutter); bottom: 1.6rem;
  width: 1px; height: 3.2rem; background: rgb(239 232 220 / .3); overflow: hidden;
}
.hero__cue span { position: absolute; inset: 0; background: var(--on-dark); transform: translateY(-100%); }

/* ── Selo no hero + faixa "3 anos" (campanha de outubro) ── */
.promo {
  display: flex; width: fit-content; align-items: center; gap: .75rem; max-width: 100%;
  margin-bottom: clamp(.9rem, 2.4svh, 1.4rem); padding: .4rem 1rem .4rem .4rem;
  background: var(--wine); color: var(--on-dark); text-decoration: none;
  border: 1px solid rgb(239 232 220 / .25); border-radius: 99px;
  box-shadow: 0 .8rem 1.6rem -1rem rgb(16 17 34 / .7);
  transition: transform .35s var(--ease), background-color .35s var(--ease);
}
.promo:hover, .promo:focus-visible { transform: translateY(-2px); background: var(--red-deep); }
.promo__n {
  flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  background: var(--red); border-radius: 50%;
  color: #fff;
}
.promo__n svg { width: 1.55rem; height: 1.55rem; }
.promo__t { display: grid; font-size: .8rem; line-height: 1.3; letter-spacing: .02em; }
.promo__t b { font: 700 .95rem/1.25 var(--serif); letter-spacing: 0; }
.promo__go { flex: none; color: var(--red-text); transition: transform .35s var(--ease), color .35s; }
.promo:hover .promo__go, .promo:focus-visible .promo__go { transform: translateX(.25em); color: #fff; }
.hero-light .hero .promo:focus-visible { outline-color: var(--red-deep); }
@media (max-height: 620px) { .promo { display: none; } }

.aniv { position: relative; background: var(--ink) var(--wave); color: var(--on-dark); padding-block: clamp(4rem, 9vw, 7.5rem); overflow: hidden; overflow: clip; }
.aniv__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 6vw, 6rem); }
.aniv__n { display: grid; justify-items: center; line-height: .8; color: var(--red-text); }
.aniv__n span { font: 700 clamp(8rem, 24vw, 20rem)/.8 var(--serif); letter-spacing: -.04em; }
.aniv__n small { margin-top: .4em; font: 500 clamp(.8rem, 1.4vw, 1.1rem)/1 var(--sans); letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--on-dark); }
.aniv__text { display: grid; gap: 1.4rem; justify-items: start; }
.aniv__text .display { max-width: 18ch; }
.aniv__lead { max-width: 40ch; font: 500 clamp(1.15rem, 1.8vw, 1.5rem)/1.55 var(--serif); }
.aniv__lead strong { color: var(--red-text); font-weight: 700; }
.aniv__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }
@media (max-width: 700px) {
  .aniv__grid { grid-template-columns: 1fr; justify-items: start; gap: 1rem; }
  .aniv__n { grid-auto-flow: column; align-items: end; justify-items: start; gap: .8rem; padding-bottom: .6rem; }
  .aniv__n span { font-size: clamp(6rem, 34vw, 9rem); }
  .aniv__n small { margin: 0 0 .6em; padding: 0; }
}
/* celular deitado: o "3" volta para o lado do texto em vez de empilhar */
@media (max-height: 520px) {
  .aniv { padding-block: 4.5rem 2.5rem; }
  .aniv__grid { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2rem; }
  .aniv__n { grid-auto-flow: row; justify-items: center; padding-bottom: 0; }
  .aniv__n span { font-size: clamp(5rem, 38svh, 9rem); }
  .aniv__n small { margin: .4em 0 0; padding-left: .5em; }
  .aniv__text { gap: .9rem; }
  .aniv__text .display { font-size: clamp(1.5rem, 7svh, 2.2rem); }
  .aniv__lead { font-size: 1rem; }
}

/* ── Manifesto ── */
.manifesto { background: var(--paper); color: var(--ink); padding-block: clamp(5rem, 12vw, 10rem); position: relative; }
.manifesto__grid { display: grid; gap: 4rem; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.manifesto__text { display: grid; gap: 1.8rem; justify-items: start; }
.manifesto__text .display { max-width: 16ch; }
.manifesto__lead { font: 500 clamp(1.3rem, 2.15vw, 2rem)/1.5 var(--serif); max-width: 36ch; }
.manifesto__photos { position: relative; padding-bottom: 14%; }
.ph img { width: 100%; height: auto; border-radius: 2px; }
.ph--a { width: 82%; margin-left: auto; }
.ph--b { width: 56%; position: absolute; left: 0; bottom: 0; border: .7rem solid var(--paper); }

/* ── Sabores (fallback: rolagem horizontal nativa) ── */
/* o que aparece atrás dos cantos arredondados do Takumi é a cor dos sabores (não o hero que fica por trás) */
.stack { background: var(--wine) var(--wave-wine); }
.sabores { background: var(--wine) var(--wave-wine); padding-block: clamp(4rem, 9vw, 8rem); }
.sabores__track {
  display: flex; align-items: center; gap: clamp(2rem, 5vw, 5rem);
  overflow-x: auto; scroll-snap-type: x proximity; padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter); /* sem isso o snap cola o título na borda da tela */
  scrollbar-width: thin;
}
.sabores__intro { flex: 0 0 min(34rem, 80vw); display: grid; gap: 1.6rem; scroll-snap-align: start; }
.slide { flex: 0 0 min(40rem, 84vw); display: grid; grid-template-columns: 1fr; gap: 1.4rem; scroll-snap-align: center; }
.slide__img { overflow: hidden; overflow: clip; border-radius: 2px; aspect-ratio: 4 / 4.6; }
.slide__img img { width: 100%; height: 100%; object-fit: cover; }
.slide__body { display: grid; gap: .9rem; justify-items: start; align-content: start; }
.slide__tag { font: 700 clamp(1.7rem, 2.6vw, 2.5rem)/1.1 var(--serif); }
.slide__text { color: var(--on-dark); max-width: 30ch; }
.sabores__bar { display: none; }
/* ≥961px: introdução e os 3 cards cabem juntos na tela (sem trilho horizontal) */
@media (min-width: 961px) {
  .sabores { padding-block: clamp(2.5rem, min(6vw, 9svh), 5.5rem); }
  .sabores__track {
    display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr));
    align-items: end; gap: clamp(1rem, 2.4vw, 2.6rem);
    max-width: 1500px; margin-inline: auto; overflow: visible; scroll-snap-type: none;
  }
  .sabores__intro { align-self: center; padding-bottom: 1rem; gap: 1.2rem; }
  .sabores__intro .display { font-size: clamp(1.9rem, 3.1vw, 3.1rem); }
  .slide { gap: 1rem; }
  .slide__img { aspect-ratio: 4 / 5; max-height: 56svh; }
  .slide__tag { font-size: clamp(1.4rem, 2.1vw, 2rem); }
  .slide__text { font-size: .95rem; line-height: 1.5; max-width: 26ch; }
}

/* ── Cardápios (fallback: blocos em sequência) ── */
.menu {
  --fh: min(62svh, 36rem, 34vw);
  position: relative; padding-block: clamp(4rem, 8vw, 7rem);
  border-radius: 28px 28px 0 0; overflow: hidden; overflow: clip; /* clip: hidden viraria o "scroller" do view() do contador e do leque */
}
.menu__inner { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.menu__copy { display: grid; gap: clamp(.8rem, 2.4svh, 1.4rem); justify-items: start; max-width: 36rem; }
.menu__text { max-width: 44ch; }
.menu__cats { font-size: .92rem; line-height: 1.7; max-width: 46ch; opacity: .85; }
.menu__cats span {
  display: block; margin-bottom: .2rem;
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; opacity: .75;
}
.menu--takumi { background: var(--navy) var(--wave); }
.menu--hana { background: linear-gradient(160deg, #d8312a 0%, #a8201c 100%); color: #fff; }
.menu--hana .eyebrow { color: #fff; }
.menu--carte { background: var(--paper); color: var(--ink); }

.stat { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.stat__n { font: 700 clamp(3.4rem, min(7vw, 13svh), 6rem)/1 var(--serif); color: var(--red-text); font-variant-numeric: tabular-nums; }
.stat__n::after { content: "150+"; }
.stat__l { font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; }

.fan { position: relative; height: var(--fh); width: calc(var(--fh) * 1.18); margin-right: 1rem; }
.fan__p {
  position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: none;
  border-radius: 3px; box-shadow: 0 1.6rem 3rem rgb(0 0 0 / .38);
  transform-origin: 50% 100%;
}
.fan__p--1 { transform: rotate(-3deg) translateX(-4%); }
.fan__p--2 { transform: rotate(5deg) translateX(30%); }
.fan__p--3 { transform: rotate(11deg) translateX(62%); }

/* ── Ambiente ── */
.ambiente { background: var(--paper); color: var(--ink); }
.ambiente__pin { position: relative; height: 100svh; min-height: 34rem; overflow: hidden; display: grid; align-items: end; background: var(--ink); }
.ambiente__frame { position: absolute; inset: 0; }
.ambiente__addr { margin-top: clamp(.8rem, 2svh, 1.2rem); font-size: .95rem; color: rgb(239 232 220 / .85); }
.ambiente__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(1rem, 2.6svh, 1.6rem); }
.ambiente__frame img { width: 100%; height: 100%; object-fit: cover; }
.ambiente__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(16 17 34 / .82), rgb(16 17 34 / .1) 60%); }
.ambiente__title { position: relative; z-index: 2; color: var(--on-dark); padding: 0 var(--gutter) clamp(2rem, 7vh, 5rem); max-width: var(--max); margin-inline: auto; width: 100%; }

.ambiente__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; padding-block: clamp(4rem, 9vw, 8rem); }
.ambiente__team-img { overflow: hidden; overflow: clip; border-radius: 2px; }
.ambiente__team img { width: 100%; }
.ambiente__team figcaption { margin-top: .8rem; font-size: .85rem; color: var(--muted-paper); }
.ambiente__copy { display: grid; gap: 1.4rem; }
.ambiente__copy p:not(.lead) { color: var(--muted-paper); }
.ambiente__duo { display: grid; grid-template-columns: 1.5fr 1fr; gap: .8rem; align-items: end; margin-top: 1rem; }
.ambiente__duo img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.ambiente__duo img:first-child { aspect-ratio: 4 / 3; }
.ambiente__duo img:last-child { aspect-ratio: 3 / 4; }

/* ── Prova social (TripAdvisor) ── */
.proof { position: relative; background: var(--ink); color: var(--on-dark); padding-block: clamp(4rem, 8vw, 7rem) clamp(1rem, 3vw, 2rem); }
.proof .wrap { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); justify-items: start; }
.proof__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 4vw, 4rem); width: 100%; padding-top: clamp(1.4rem, 3vw, 2.4rem); border-top: 1px solid rgb(239 232 220 / .16); }
.proof__item dt { margin-bottom: .6rem; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-dark); }
.proof__item dd { display: grid; gap: .5rem; justify-items: start; }
.proof__n { font: 700 clamp(3.2rem, 7vw, 6rem)/1 var(--serif); color: var(--red-text); font-variant-numeric: tabular-nums; }
.proof__n sup { font-size: .42em; vertical-align: top; position: relative; top: .18em; margin-right: .08em; text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: .06em; }
.proof__stars { font-size: 1.15rem; letter-spacing: .3em; color: var(--red-text); }
.proof__l { max-width: 26ch; color: var(--on-dark); }
.proof__l--sub { margin-top: .2rem; font-size: .9rem; color: var(--muted-dark); }
.proof__scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.4rem); width: 100%; }
.proof__scores li { display: grid; grid-template-columns: 1fr auto; gap: .5rem .8rem; align-items: baseline; font-size: .95rem; }
.proof__scores b { font: 700 1.2rem/1 var(--serif); }
.proof__scores li::before { content: ""; grid-column: 1 / -1; grid-row: 2; height: 3px; border-radius: 2px; background: rgb(239 232 220 / .16); }
.proof__scores i { grid-column: 1 / -1; grid-row: 2; display: block; height: 3px; border-radius: 2px; background: var(--red-text); transform-origin: 0 50%; transform: scaleX(var(--v, 1)); }

/* ── Depoimentos ── */
.voices { position: relative; background: var(--ink); overflow: hidden; }
.voices__pin { position: relative; min-height: 100svh; display: grid; align-items: center; padding-block: 6rem; overflow: hidden; }
.voices__sun {
  position: absolute; left: 50%; bottom: 0; width: min(120vw, 95svh); aspect-ratio: 1;
  background: var(--red); border-radius: 50%; transform: translate(-50%, 58%);
}
.voices__inner { position: relative; z-index: 2; display: grid; gap: 2.4rem; justify-items: start; }
.voices__stage { display: grid; gap: 3rem; }
.q blockquote p { font: 500 clamp(1.15rem, min(3vw, 5.4svh), 2.8rem)/1.3 var(--serif); max-width: 32ch; text-wrap: pretty; }
.q figcaption { margin-top: 1rem; font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red-text); }
/* nota "Traduzido do português" (só nas páginas traduzidas): branco passa AA tanto no fundo escuro quanto sobre o sol vermelho que sobe atrás das frases */
.q__tr { display: block; margin-top: .35rem; font-size: .75rem; letter-spacing: .06em; text-transform: none; color: #fff; }
.voices__bar { display: none; }

/* ── Feed ── */
.feed { background: var(--paper); color: var(--ink); padding-block: clamp(4rem, 9vw, 8rem); overflow: hidden; overflow: clip; }
.feed__head { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.4rem; }
.feed .link:hover { color: var(--red-deep); }
.feed__rows { display: grid; gap: .8rem; overflow-x: auto; scrollbar-width: thin; }
@media (pointer: coarse) { .feed__rows { scrollbar-width: none; } .feed__rows::-webkit-scrollbar { display: none; } }
.feed__row { display: flex; gap: .8rem; width: max-content; padding-inline: var(--gutter); }
.feed__row img { height: clamp(14rem, 26vw, 24rem); width: auto; border-radius: 2px; }

/* ── Visite ── */
.visit { position: relative; overflow: hidden; overflow: clip; background: var(--red); color: #fff; padding-block: clamp(5rem, 10vw, 9rem); }
.visit__sun {
  position: absolute; right: -14vw; top: 50%; width: min(70vw, 62rem); aspect-ratio: 1;
  border-radius: 50%; background: var(--red-deep); transform: translateY(-50%);
}
.visit__sun::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 62%; aspect-ratio: 458 / 154;
  background: #fff; opacity: .1;
  -webkit-mask: var(--ponte) center / contain no-repeat; mask: var(--ponte) center / contain no-repeat;
}
.visit__grid { position: relative; z-index: 1; display: grid; gap: 4rem; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; }
.visit__lead { display: grid; gap: 2rem; justify-items: start; }
.visit__info { display: grid; gap: 2rem 2.4rem; grid-template-columns: 1fr 1fr; }
.visit__info dt { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; opacity: .85; margin-bottom: .5rem; }
.visit__info dd { font: 500 1.15rem/1.5 var(--serif); }
.visit__info a { display: inline-block; padding-block: .2rem; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .4s var(--ease); }
.visit__info a:hover { background-size: 0 1px; background-position: 100% 100%; }
.visit .muted { color: rgb(255 255 255 / .82); font: 400 .9rem/1.5 var(--sans); }

/* ── Rodapé ── */
.foot { background: var(--ink); padding-block: 3rem; border-top: 1px solid rgb(255 255 255 / .06); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem 3rem; }
.foot__logo { height: 3.4rem; width: auto; }
.foot__nav { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: .9rem; }
.foot__nav a { display: inline-block; padding-block: .3rem; text-decoration: none; color: var(--muted-dark); transition: color .3s; }
.foot__nav a:hover { color: var(--on-dark); }
.foot__copy { font-size: .8rem; color: var(--muted-dark); }
.foot__copy a { color: var(--on-dark); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgb(239 232 220 / .45); transition: text-decoration-color .3s, color .3s; }
.foot__copy a:hover, .foot__copy a:focus-visible { color: #fff; text-decoration-color: currentColor; }

/* ── Responsivo (estrutura) ── */
@media (max-width: 1080px) {
  .nav { gap: 1.4rem; }
  .nav ul { gap: 1.2rem; }
  .nav li a { font-size: .85rem; }
}
/* telas baixas: notebook Windows com escala de 125–150% enxerga ~1280×600 */
@media (max-height: 760px) {
  :root { --logo-h: 5.6rem; --logo-end: .5536; }
}
@media (max-height: 520px) {
  :root { --logo-h: 4.4rem; --logo-end: .7045; }
  .hero__stage { min-height: 0; }
  .hero__copy { padding: calc(var(--head-h) + .6rem) var(--gutter) 1.6rem; }
  .hero__facts { display: none; }
  /* as 5 linhas viram um parágrafo corrido; a tela deitada tem largura de sobra */
  .hero .hero__title { font-size: clamp(1.5rem, 5.2svh, 2.2rem); margin-block: .7rem 1.1rem; }
  .hero__title span { display: inline-block; }
}
@media (max-width: 960px) {
  .burger {
    position: relative; z-index: 3;
    display: inline-flex; align-items: center; gap: .8rem; min-height: 2.75rem; padding: 0 .2rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  }
  .burger__lines { display: grid; gap: 6px; width: 1.6rem; }
  .burger__lines i { display: block; height: 2px; background: currentColor; transition: transform .4s var(--ease); }
  .burger[aria-expanded="true"] .burger__lines i:first-child { transform: translateY(4px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__lines i:last-child { transform: translateY(-4px) rotate(-45deg); }

  .nav {
    position: fixed; inset: 0; z-index: 2;
    flex-direction: column; align-items: flex-start; gap: 2.4rem;
    padding: 6rem var(--gutter) 3rem;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--ink) var(--wave);
    clip-path: circle(0 at calc(100% - 3rem) 2.4rem);
    visibility: hidden;
    transition: clip-path .7s var(--ease), visibility 0s .7s;
  }
  .nav.is-open { clip-path: circle(150vmax at calc(100% - 3rem) 2.4rem); visibility: visible; transition: clip-path .7s var(--ease); }
  .nav ul { flex-direction: column; gap: .4rem; margin-top: auto; }
  .nav__cta { margin-bottom: auto; }
  .lang { gap: .5rem; }
  .lang__item { min-height: 2.75rem; padding: 0 1rem; border: 1px solid rgb(239 232 220 / .4); border-radius: 2rem; font-size: .85rem; text-decoration: none; }
  .lang__item[aria-current="true"] { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); text-decoration: none; }
  .lang__item.is-pref:not(:hover) { text-decoration: none; border-style: dashed; }
  .nav li a { font: 700 clamp(1.8rem, 8vw, 2.6rem)/1.25 var(--serif); letter-spacing: 0; }
  .head:has(.nav.is-open)::before { opacity: 0; }

  .manifesto__grid, .ambiente__grid, .visit__grid { grid-template-columns: 1fr; }
  .manifesto__photos { max-width: 30rem; }
  .menu__inner { grid-template-columns: 1fr; }
  .menu { --fh: min(52svh, 70vw); }
  .fan { margin-inline: 0; width: calc(var(--fh) * 1.22); }
  .visit__sun { width: 120vw; right: -50vw; top: 28%; }
}
/* Com o seletor de idioma a barra não cabe em uma linha abaixo de ~1180px (o logo grande ocupa ~300px à esquerda e o
   espanhol é o mais longo): nessa faixa vale o mesmo menu do celular. Só quando existe seletor, o português sozinho não muda. */
@media (min-width: 961px) and (max-width: 1180px) {
  .head:has(.lang) .burger {
    position: relative; z-index: 3;
    display: inline-flex; align-items: center; gap: .8rem; min-height: 2.75rem; padding: 0 .2rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  }
  .head:has(.lang) .burger__lines { display: grid; gap: 6px; width: 1.6rem; }
  .head:has(.lang) .burger__lines i { display: block; height: 2px; background: currentColor; transition: transform .4s var(--ease); }
  .head:has(.lang) .burger[aria-expanded="true"] .burger__lines i:first-child { transform: translateY(4px) rotate(45deg); }
  .head:has(.lang) .burger[aria-expanded="true"] .burger__lines i:last-child { transform: translateY(-4px) rotate(-45deg); }

  .head:has(.lang) .nav {
    position: fixed; inset: 0; z-index: 2;
    flex-direction: column; align-items: flex-start; gap: 2.4rem;
    padding: 6rem var(--gutter) 3rem;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--ink) var(--wave);
    clip-path: circle(0 at calc(100% - 3rem) 2.4rem);
    visibility: hidden;
    transition: clip-path .7s var(--ease), visibility 0s .7s;
  }
  .head:has(.lang) .nav.is-open { clip-path: circle(150vmax at calc(100% - 3rem) 2.4rem); visibility: visible; transition: clip-path .7s var(--ease); }
  .head:has(.lang) .nav ul { flex-direction: column; gap: .4rem; margin-top: auto; }
  .head:has(.lang) .nav__cta { margin-bottom: auto; }
  .head:has(.lang) .lang { gap: .5rem; }
  .head:has(.lang) .lang__item { min-height: 2.75rem; padding: 0 1rem; border: 1px solid rgb(239 232 220 / .4); border-radius: 2rem; font-size: .85rem; text-decoration: none; }
  .head:has(.lang) .lang__item[aria-current="true"] { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); text-decoration: none; }
  .head:has(.lang) .lang__item.is-pref:not(:hover) { text-decoration: none; border-style: dashed; }
  .head:has(.lang) .nav li a { font: 700 clamp(1.8rem, 8vw, 2.6rem)/1.25 var(--serif); letter-spacing: 0; }
  .head:has(.lang):has(.nav.is-open)::before { opacity: 0; }
}
@media (min-width: 961px) and (max-width: 1180px) and (max-height: 520px) {
  .head:has(.lang) .nav { padding: 4.4rem var(--gutter) 1.4rem; gap: 1.2rem; }
  .head:has(.lang) .nav ul { gap: 0; }
  .head:has(.lang) .nav li a { font-size: 1.45rem; }
}
@media (min-width: 961px) and (max-width: 1180px) and (max-height: 520px) {
  .head:has(.lang) .nav { display: grid; grid-template-columns: auto auto; justify-content: start; align-content: center; align-items: start; column-gap: 3rem; row-gap: 1.2rem; }
  .head:has(.lang) .nav ul { grid-row: 1 / 3; margin-top: 0; }
  .head:has(.lang) .nav__cta { margin-bottom: 0; align-self: end; justify-self: start; }
  .head:has(.lang) .lang { align-self: start; }
}
@media (min-width: 1181px) and (max-width: 1320px) {
  .head:has(.lang) .nav { gap: 1.2rem; }
  .head:has(.lang) .nav ul { gap: 1.1rem; }
  .head:has(.lang) .nav li a { font-size: .85rem; }
}
@media (max-width: 900px) {
  .hero__facts .fact--where { display: none; } /* 3 dados não cabem em uma linha (iPad em pé); o endereço está em "Visite" */
}
@media (max-width: 960px) and (max-height: 520px) {
  .nav { padding: 4.4rem var(--gutter) 1.4rem; gap: 1.2rem; }
  .nav ul { gap: 0; }
  .nav li a { font-size: 1.45rem; }
}
/* celular deitado: a lista fica à esquerda e o botão e o seletor de idioma à direita, para o seletor não ficar escondido embaixo */
@media (max-width: 960px) and (max-height: 520px) and (min-width: 600px) {
  .nav { display: grid; grid-template-columns: auto auto; justify-content: start; align-content: center; align-items: start; column-gap: 3rem; row-gap: 1.2rem; }
  .nav ul { grid-row: 1 / 3; margin-top: 0; }
  .nav__cta { margin-bottom: 0; align-self: end; justify-self: start; }
  .lang { align-self: start; }
}
@media (max-width: 700px) {
  .hero__title { font-size: clamp(1.55rem, 7vw, 2.4rem); }
  /* o texto fica por cima da foto (sem coluna lateral): véu sobe pelo fundo */
  .hero__shade {
    background:
      linear-gradient(0deg, rgb(16 17 34 / .82) 0%, rgb(16 17 34 / .55) 48%, rgb(16 17 34 / .08) 78%),
      linear-gradient(180deg, rgb(16 17 34 / .5) 0%, transparent 22%);
  }
}
/* celulares estreitos: eyebrow em uma linha e os dois botões lado a lado — o texto do hero
   ocupa menos altura e não sobe até a placa da foto */
/* celular baixo: sem a linha de endereço (os botões já levam até lá) para o título não subir sobre a placa da foto */
@media (max-height: 640px) {
  .ambiente__addr { display: none; }
}
@media (max-width: 400px) {
  .ambiente__title .display { font-size: clamp(1.9rem, 9.4vw, 2.3rem); }
  .ambiente__actions .btn { padding-inline: 1rem; }
  .hero .eyebrow { font-size: .72rem; letter-spacing: .13em; gap: .6rem; }
  .hero__actions { flex-wrap: nowrap; gap: .6rem; }
  .hero__actions .btn { flex: 1 1 0; justify-content: center; min-height: 2.9rem; padding-inline: .5rem; font-size: .85rem; letter-spacing: .02em; }
}
@media (max-width: 760px) {
  .proof__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .proof__item dd { grid-template-columns: auto 1fr; align-items: end; column-gap: 1rem; }
  .proof__n { grid-row: 1 / 3; font-size: clamp(3rem, 16vw, 4.4rem); }
  .proof__stars { align-self: end; font-size: 1rem; }
  .proof__scores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .proof__scores { grid-template-columns: 1fr; }
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  .visit__info { grid-template-columns: 1fr; }
  .hero__facts { gap: 1.2rem; }
  .hero__cue { display: none; }
  .hero__facts .fact--where { display: none; }
  :root { --logo-h: 5rem; --logo-end: .52; }
  .head__logo { width: 5.3rem; height: 2.6rem; }
  .head__logo-word { height: 1.25rem; }
}

/* Slide da faixada (o primeiro): a placa tem que ficar longe do título.
   A foto é a original + 450px de parede espelhada à esquerda (1600 → 2050px),
   o que dá folga para empurrar a placa sem expor a borda da imagem.
   Placa na foto: x 920–1540 de 2050. Com cover, escala k = max(W/2050, H/900),
   então 1540·k = max(75.12vw, 171.1svh) e o centro 1230·k = max(60vw, 136.7svh). */
/* telas deitadas (≥ 1.3:1): placa à direita, com a borda direita em ~97% da largura */
.hero__slides .hero__sign {
  object-position: calc(-1 * max(0px, max(75.12vw, 171.1svh) - 97vw)) 50%;
}
/* 4:3 e 3:2 deitados: o título ocupa mais da largura, a placa encosta na borda direita */
@media (max-aspect-ratio: 3/2) {
  .hero__slides .hero__sign { object-position: calc(-1 * max(0px, max(75.12vw, 171.1svh) - 101vw)) 50%; }
}
/* ultrawide (≥ 2.2:1): a foto já cobre a largura sem folga, então amplia a partir da
   borda esquerda — a placa vai para ~56–94% e o conteúdo (centrado em 1360px) fica livre */
@media (min-aspect-ratio: 22/10) {
  .hero__slides .hero__sign { object-position: 0 50%; transform-origin: 0 50%; scale: 1.25; }
}
/* em pé ou quase quadrada (celular, tablet em pé): usa a versão "alta" da foto (2050×1500,
   +600px de borda esmaecida embaixo), que leva a placa para o terço superior; o texto fica
   na metade de baixo. k = H/1500 (ou W/2050), placa centrada em 1230·k e sem passar de D−W. */
@media (max-aspect-ratio: 13/10) {
  .hero__slides .hero__sign {
    object-position: calc(-1 * min(max(0px, 82svh - 50vw), max(0px, 136.67svh - 100vw))) 50%;
  }
}

/* ═══ Hero claro (body.hero-light) ═══
   Véu quase branco em vez de navy; texto, logo e menu passam a ser escuros enquanto estão sobre o hero.
   Para voltar ao hero escuro, basta tirar a classe `hero-light` do <body>. */
.hero-light { --veil: 250 246 238; }
.hero-light .hero { background: var(--paper); }
.hero-light .hero__slides img { filter: saturate(1.06); }
.hero-light .hero__stage::after { background: var(--paper); } /* véu da rolagem: creme, funde com o manifesto */
.hero-light .hero__shade {
  background:
    linear-gradient(90deg, rgb(var(--veil) / .94) 0%, rgb(var(--veil) / .8) 36%, rgb(var(--veil) / 0) 78%),
    linear-gradient(0deg, rgb(var(--veil) / .92) 0%, rgb(var(--veil) / 0) 36%),
    linear-gradient(180deg, rgb(var(--veil) / .85) 0%, rgb(var(--veil) / 0) 26%);
}
.hero-light .hero__title { color: var(--ink); text-shadow: none; }
.hero-light .hero__title-em, .hero-light .hero .eyebrow { color: var(--red-deep); }
.hero-light .hero__facts { border-top-color: rgb(16 17 34 / .25); }
.hero-light .hero__facts dt { color: var(--muted-paper); }
.hero-light .hero__facts dd { color: var(--ink); }
.hero-light .hero__cue { background: rgb(16 17 34 / .25); }
.hero-light .hero__cue span { background: var(--ink); }
.hero-light .hero .btn--ghost { --bg: rgb(255 255 255 / .6); --fg: var(--ink); border-color: rgb(16 17 34 / .6); }
.hero-light .hero .btn--ghost::before { background: var(--ink); }
.hero-light .hero .btn--ghost:hover, .hero-light .hero .btn--ghost:focus-visible { color: var(--paper); border-color: var(--ink); }
/* cabeçalho: escuro sobre o hero, volta a claro quando a barra fica sólida */
.hero-light .head { color: var(--ink); transition: color .35s; }
.hero-light .head.is-solid { color: var(--on-dark); }
.hero-light .head:has(.nav.is-open) { color: var(--on-dark) !important; }
.hero-light .head__logo-full { display: none; }
.hero-light .head__logo-full--ink { display: block; }
@media (max-width: 700px) {
  .hero-light .hero__shade {
    background:
      linear-gradient(0deg, rgb(var(--veil) / .95) 0%, rgb(var(--veil) / .78) 46%, rgb(var(--veil) / .1) 80%),
      linear-gradient(180deg, rgb(var(--veil) / .85) 0%, rgb(var(--veil) / 0) 24%);
  }
}

/* ── Entrada do hero (CSS puro) ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } }
  .hero__title span, .hero__copy .eyebrow, .hero__copy .promo, .hero__actions, .hero__facts {
    opacity: 0; animation: rise 1s var(--ease) forwards; animation-delay: calc(.15s + var(--i, 0) * .09s);
  }
  .hero__copy .promo { --i: 0; }
  .hero__title span:nth-child(1) { --i: 1; }
  .hero__title span:nth-child(2) { --i: 2; }
  .hero__title span:nth-child(3) { --i: 3; }
  .hero__title span:nth-child(4) { --i: 4; }
  .hero__title span:nth-child(5) { --i: 5; }
  .hero__actions { --i: 7; }
  .hero__facts { --i: 9; }

  /* slideshow do hero: 4 fotos, 7s cada, 28s de ciclo */
  /* o slide só sai (30–35%) depois que o próximo já entrou por inteiro (0–5% dele):
     fade cruzado simétrico deixa ~25% de fundo aparecendo no meio da troca */
  @keyframes hero-slide {
    0%   { opacity: 0; transform: scale(1.0); }
    5%   { opacity: 1; }
    30%  { opacity: 1; }
    35%  { opacity: 0; }
    100% { opacity: 0; transform: scale(1.09); }
  }
  .hero__slides img { animation: hero-slide 28s linear infinite; animation-delay: calc(var(--n) * 7s - 1.4s); }
  .hero__slides > img:nth-child(1) { --n: 0; }
  .hero__slides > img:nth-child(2) { --n: 1; }
  .hero__slides > img:nth-child(3) { --n: 2; }
  .hero__slides > img:nth-child(4) { --n: 3; }

  @keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
  .hero__cue span { animation: cue 2.2s var(--ease) infinite; }
}

/* ── Fallback de revelação (navegador sem scroll-driven animations) ── */
.js.no-sda [data-reveal] { opacity: 0; transform: translateY(2rem); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js.no-sda [data-reveal].is-in { opacity: 1; transform: none; }
.js.no-sda [data-words] .w { opacity: .18; }
.js.no-sda [data-words].is-in .w { opacity: 1; transition-delay: calc(var(--i) * 14ms); }

/* ═══════════════════════════════════════════════
   SCROLL-DRIVEN ANIMATIONS
   Tudo abaixo só existe se o navegador suporta
   animation-timeline e o usuário não pediu menos movimento.
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {

  @property --n { syntax: "<integer>"; initial-value: 0; inherits: false; }

  /* barra de progresso + cabeçalho */
  .progress { animation: grow linear both; animation-timeline: scroll(root); }
  @keyframes grow { to { transform: scaleX(1); } }

  /* cabeçalho: logo grande no topo que encolhe suavemente (escala = compositor) */
  .head__logo-full { transition: none; animation: logo-shrink cubic-bezier(.25, .6, .3, 1) both; animation-timeline: scroll(root); animation-range: 0 320px; }
  @keyframes logo-shrink { from { scale: 1; opacity: 1; } 55% { opacity: 1; } to { scale: var(--logo-end); opacity: 0; } }
  .head__logo-word { transition: none; animation: logo-word linear both; animation-timeline: scroll(root); animation-range: 170px 320px; }
  @keyframes logo-word { from { opacity: 0; translate: 0 calc(-50% + .3rem); } to { opacity: 1; translate: 0 -50%; } }
  /* hero claro: o menu vai de texto escuro/transparente para barra escura/texto claro.
     No meio do caminho o contraste some (cinza sobre cinza), então a troca é curta (~100px de rolagem) */
  .hero-light .head { transition: none; animation: head-ink linear both; animation-timeline: scroll(root); animation-range: 60px 130px; }
  @keyframes head-ink { from { color: var(--ink); } to { color: var(--on-dark); } }
  .hero-light .head::before { animation-range: 30px 130px; }
  .hero-light .head__logo-full { animation-name: logo-shrink-light; animation-range: 0 150px; }
  @keyframes logo-shrink-light { from { scale: 1; opacity: 1; } to { scale: var(--logo-end); opacity: 0; } }
  .hero-light .head__logo-word { animation-range: 90px 160px; }
  .head::before { transition: none; animation: head-bg ease-out both; animation-timeline: scroll(root); animation-range: 40px 320px; }
  @keyframes head-bg { from { opacity: 0; } to { opacity: 1; } }

  /* reveal genérico */
  [data-reveal] {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 8% entry 60%;
  }
  @keyframes reveal { from { opacity: 0; transform: translateY(2.2rem); } to { opacity: 1; transform: none; } }

  /* ── Hero: fica atrás; o manifesto sobe por cima como uma cortina ── */
  .hero { position: sticky; top: 0; z-index: 0; }
  main > section:not(.hero), main > .stack { position: relative; z-index: 1; }
  .manifesto, .aniv { border-radius: 28px 28px 0 0; box-shadow: 0 -2rem 4rem rgb(0 0 0 / .4); }
  .hero__slides { animation: hero-zoom linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
  @keyframes hero-zoom { to { transform: scale(1.1); } }
  .hero__stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--ink); opacity: 0; animation: veil linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
  @keyframes veil { to { opacity: .6; } }
  .hero__copy { animation: hero-out cubic-bezier(.4, 0, .8, .6) both; animation-timeline: scroll(root); animation-range: 0 70svh; }
  @keyframes hero-out { to { opacity: 0; transform: translateY(-12svh); } }

  /* ── Manifesto ── */
  .manifesto__lead .w {
    opacity: .16;
    animation: word-in linear both;
    animation-timeline: view();
    animation-range: calc(8% + var(--k) * 44%) calc(8% + var(--k) * 44% + 7%);
  }
  @keyframes word-in { to { opacity: 1; } }
  .ph--a { animation: drift-a linear both; animation-timeline: view(); }
  .ph--b { animation: drift-b linear both; animation-timeline: view(); }
  @keyframes drift-a { from { transform: translateY(9svh); } to { transform: translateY(-9svh); } }
  @keyframes drift-b { from { transform: translateY(18svh); } to { transform: translateY(-12svh); } }
  .ph img { animation: img-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  @keyframes img-settle { from { scale: 1.18; } to { scale: 1; } }
  .ph { overflow: hidden; overflow: clip; }

  /* ── Sabores ── */
  /* ≤960px: trilho horizontal preso ao scroll vertical */
  @media (max-width: 960px) {
    .sabores { position: relative; padding-block: 0; height: calc(100svh + var(--dist, 220vw)); view-timeline: --sabores block; }
    .sabores__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-items: center; }
    .sabores__track {
      overflow: visible; width: max-content; scroll-snap-type: none;
      padding-inline: var(--gutter) calc(var(--gutter) * 2);
      animation: track-move linear both; animation-timeline: --sabores; animation-range: contain 0% contain 100%;
    }
    @keyframes track-move { to { transform: translateX(calc(var(--dist, 220vw) * -1)); } }
    .sabores__intro { flex-basis: min(36rem, 42vw); }
    .slide { flex: 0 0 auto; grid-template-columns: min(28vw, 70svh * .8) minmax(14rem, 19rem); align-items: end; gap: 1.8rem; }
    .slide__img { aspect-ratio: 4 / 5; max-height: 70svh; }
    .slide__img img { scale: 1.25; animation: slide-img linear both; animation-timeline: --sabores; animation-range: contain 0% contain 100%; }
    @keyframes slide-img { from { translate: 7% 0; } to { translate: -7% 0; } }
    .slide__tag { font-size: clamp(2.2rem, 3.4vw, 3.6rem); }
    .sabores__bar {
      display: block; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 2.2rem;
      height: 1px; background: rgb(239 232 220 / .2);
    }
    .sabores__bar i { display: block; height: 100%; background: var(--red-text); transform-origin: 0 50%; transform: scaleX(0); animation: grow linear both; animation-timeline: --sabores; animation-range: contain 0% contain 100%; }
  }
  /* ≥961px: cards ficam juntos; entram em sequência e a foto desliza dentro da moldura */
  @media (min-width: 961px) {
    .sabores__intro, .slide { animation: reveal linear both; animation-timeline: view(); animation-range: entry calc(4% + var(--i, 0) * 9%) entry calc(52% + var(--i, 0) * 9%); }
    .slide:nth-child(2) { --i: 1; } .slide:nth-child(3) { --i: 2; } .slide:nth-child(4) { --i: 3; }
    .slide__img img { scale: 1.12; animation: slide-img-v linear both; animation-timeline: view(); }
    @keyframes slide-img-v { from { translate: 0 4%; } to { translate: 0 -4%; } }
  }

  /* ── Cardápios: folhas que se empilham ── */
  .menus { view-timeline: --menus block; }
  .menu { position: sticky; top: 0; min-height: 100svh; padding-block: clamp(4.75rem, 12svh, 5.5rem) clamp(1.5rem, 4svh, 2.5rem); display: grid; align-items: center; box-shadow: 0 -1.5rem 3rem rgb(0 0 0 / .35); }
  .menu__inner { transform-origin: 50% 0; }
  .menu--takumi .menu__inner, .menu--hana .menu__inner {
    animation: sheet-sink linear both; animation-timeline: --menus;
  }
  .menu--takumi .menu__inner { animation-range: contain 0% contain 50%; }
  .menu--hana .menu__inner   { animation-range: contain 50% contain 100%; }
  @keyframes sheet-sink { to { transform: scale(.9) translateY(-3svh); opacity: .25; } }

  .fan__p { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: entry 15% entry 100%; }
  .fan__p--1 { animation-name: fan-1; }
  .fan__p--2 { animation-name: fan-2; }
  .fan__p--3 { animation-name: fan-3; }
  @keyframes fan-1 { from { transform: rotate(0) translateX(0); } to { transform: rotate(-3deg) translateX(-4%); } }
  @keyframes fan-2 { from { transform: rotate(0) translateX(0); } to { transform: rotate(5deg) translateX(30%); } }
  @keyframes fan-3 { from { transform: rotate(0) translateX(0); } to { transform: rotate(11deg) translateX(62%); } }

  @property --count { syntax: "<integer>"; initial-value: 0; inherits: false; }
  .count { counter-reset: n var(--count); animation: count-up linear both; animation-timeline: view(); animation-range: entry 30% cover 40%; }
  .count::after { content: counter(n) "+"; }
  @keyframes count-up { to { --count: 150; } }

  /* Takumi, Hana e À La Carte: o mesmo efeito de entrada. A folha sobe por cima da anterior,
     que afunda; o contador e o leque acompanham a subida (--sheet = a própria folha entrando).
     Os sabores também ficam presos e afundam sob o Takumi (--takumi, visível ao .stack). */
  @media (min-width: 961px) and (min-height: 621px) {
    .menu { view-timeline: --sheet block; }
    .menu--takumi { view-timeline: --sheet block, --takumi block; }
    .stack { timeline-scope: --takumi; }
    .sabores { position: sticky; top: 0; }
    .sabores__track { transform-origin: 50% 0; animation: sheet-sink linear both; animation-timeline: --takumi; animation-range: entry 18% entry 100%; }
    .fan__p { animation-timeline: --sheet; animation-range: entry 30% entry 100%; }
    .count { animation-timeline: --sheet; animation-range: entry 25% entry 100%; }
  }

  /* ── Ambiente: moldura que se abre ── */
  .ambiente__hero { height: 230svh; }
  .ambiente__hero { view-timeline: --amb block; }
  .ambiente__pin { position: sticky; top: 0; }
  .ambiente__frame {
    animation: frame-open linear both; animation-timeline: --amb; animation-range: contain 0% contain 55%;
  }
  .ambiente__frame img { animation: frame-zoom linear both; animation-timeline: --amb; animation-range: contain 0% contain 100%; }
  @keyframes frame-open { from { clip-path: inset(16% 12% 16% 12% round 28px); } to { clip-path: inset(0 0 0 0 round 0); } }
  @keyframes frame-zoom { from { scale: 1.3; } to { scale: 1; } }
  .ambiente__title { animation: title-in linear both; animation-timeline: --amb; animation-range: contain 30% contain 75%; }
  @keyframes title-in { from { opacity: 0; transform: translateY(5rem); } to { opacity: 1; transform: none; } }
  .ambiente__team img { animation: team-in linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; scale: 1.12; }
  @keyframes team-in { to { scale: 1; } }

  /* ── Depoimentos: três falas, um sol que nasce ── */
  .voices { height: 360svh; view-timeline: --voices block; overflow: clip; }
  .voices__pin { position: sticky; top: 0; height: 100svh; min-height: 0; padding-block: 5rem 3rem; }
  .voices__sun { animation: sun-rise linear both; animation-timeline: --voices; animation-range: contain 0% contain 100%; }
  @keyframes sun-rise { from { transform: translate(-50%, 78%); } to { transform: translate(-50%, 18%); } }
  .voices__stage { position: relative; display: block; width: 100%; min-height: clamp(17rem, 46svh, 26rem); }
  .q { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; animation-timeline: --voices; animation-fill-mode: both; animation-timing-function: linear; }
  .q--1 { animation-name: q-first; animation-range: contain 0% contain 38%; }
  .q--2 { animation-name: q-mid;   animation-range: contain 38% contain 70%; }
  .q--3 { animation-name: q-last;  animation-range: contain 70% contain 100%; }
  @keyframes q-first { 0%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-2rem); } }
  @keyframes q-mid   { 0% { opacity: 0; transform: translateY(2rem); } 25%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-2rem); } }
  @keyframes q-last  { 0% { opacity: 0; transform: translateY(2rem); } 30%, 100% { opacity: 1; transform: none; } }
  .voices__bar { display: block; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 2.2rem; height: 1px; background: rgb(239 232 220 / .25); z-index: 2; }
  .voices__bar i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); animation: grow linear both; animation-timeline: --voices; animation-range: contain 0% contain 100%; }

  /* ── Feed: duas fileiras que correm em sentidos opostos ── */
  .feed__rows { overflow: visible; }
  .feed__row--a { animation: row-left linear both; animation-timeline: view(); }
  .feed__row--b { animation: row-right linear both; animation-timeline: view(); }
  @keyframes row-left  { from { transform: translateX(6vw); } to { transform: translateX(calc(-100% + 100vw - 6vw)); } }
  @keyframes row-right { from { transform: translateX(calc(-100% + 100vw - 6vw)); } to { transform: translateX(6vw); } }

  /* ── Prova social: as barras crescem até a nota ── */
  .proof__scores i { animation: meter-in linear both; animation-timeline: view(); animation-range: entry 10% entry 85%; }
  @keyframes meter-in { from { transform: scaleX(0); } }

  /* ── Visite ── */
  .visit__sun { animation: visit-sun linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  @keyframes visit-sun { from { transform: translateY(-50%) scale(.55); } to { transform: translateY(-50%) scale(1); } }

  /* o cardápio empilhado só faz sentido com altura de sobra e duas colunas
     (em coluna única — tablet em pé — a folha passa da altura da tela e o fim some) */
  @media (max-width: 960px), (max-height: 620px) {
    .menu { position: relative; min-height: 0; box-shadow: none; padding-block: clamp(4rem, 8vw, 7rem); }
    .menu--takumi .menu__inner, .menu--hana .menu__inner { animation: none; }
  }
  @media (max-width: 760px) {
    .slide { grid-template-columns: 62vw; gap: 1rem; }
    .slide__img { max-height: 46svh; aspect-ratio: 4 / 4.4; }
    .sabores__intro { flex-basis: 78vw; }
  }
  @media (max-width: 760px), (max-height: 620px) {
    .voices { height: 320svh; }
    .ambiente__hero { height: 200svh; }
  }
  /* celular deitado: o conteúdo preso à tela precisa caber em ~360px de altura */
  @media (max-width: 960px) and (max-height: 520px) {
    .sabores__bar, .voices__bar { bottom: .8rem; }
    .slide__img { max-height: 30svh; }
    .slide__tag { font-size: 1.6rem; }
    .voices__pin { padding-block: 4.2rem 2.2rem; }
    .voices__inner { gap: 1rem; }
    .voices__stage { min-height: clamp(10.5rem, 48svh, 13rem); }
  }
}
}