/* ═══════════════════════════════════════════════════════════
   EAT HOME — "Mise en Place"
   Menu tipográfico espanhol × ficha técnica de cozinha.
   Paleta amostrada das fotos do próprio cliente.
   ═══════════════════════════════════════════════════════════ */

/* ── FONTES ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Kalnia';
  src: url('assets/fonts/Kalnia-var.ttf') format('truetype-variations');
  font-weight: 100 700;
  font-stretch: 100% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Host Grotesk';
  src: url('assets/fonts/HostGrotesk-var.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Host Grotesk';
  src: url('assets/fonts/HostGrotesk-Italic-var.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Superfícies — amostradas da porcelana branca das fotos deles */
  --bone:     #f4f1ea;
  --linen:    #e9e4d9;
  --rule:     #cfc9bc;

  /* Tipos */
  --ink:      #24231f;
  --slate:    #57544e;
  --graphite: #929091;   /* amostrado do logo original: bateu igual em dois arquivos */

  /* Escuros */
  --void:     #171613;
  --void-2:   #201e1a;

  /* Acento único — tirado do arroz de frutos do mar deles */
  --saffron:  #b5722c;

  /* Tipografia */
  --serif: 'Kalnia', Georgia, 'Times New Roman', serif;
  --sans:  'Host Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Ritmo — apertado de propósito. Cliente pediu "tudo coladinho,
     nada sobrando", então o respiro entre seções é curto e o peso
     visual vem da régua hairline, não do vazio. */
  --pad:      clamp(18px, 3.4vw, 58px);
  --gap-sec:  clamp(38px, 4.4vw, 64px);
  --max:      1560px;

  /* Motion */
  --ease: cubic-bezier(.25,.46,.45,.94);
  --dur:  .4s;
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--saffron); color: var(--bone); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--bone); padding: 12px 20px;
  font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
}
.skip:focus { left: 0; }

/* ── DISPLAY (Kalnia, peso sussurro) ────────────────────── */
.display {
  font-family: var(--serif);
  font-weight: 200;
  font-variation-settings: 'wght' 200, 'wdth' 100;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* Era 152px. Três linhas a 152 com line-height .82 davam 371px só de
   título e o hero passava de 770px de conteúdo — sobrava pra baixo em
   tela de notebook. 106px encurta o bloco e, de tabela, deixa a coluna
   da foto quase quadrada, que é o que para de cortar os chefs. */
.display--hero {
  font-size: clamp(42px, 7.4vw, 106px);
  line-height: .84;
  letter-spacing: -.04em;
  font-variation-settings: 'wght' 200, 'wdth' 100;
}
.display--md {
  font-size: clamp(34px, 5.6vw, 78px);
  line-height: .88;
  letter-spacing: -.038em;
}
.display--sm {
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: .92;
  letter-spacing: -.03em;
}

/* Linhas do hero entram uma a uma */
.display--hero .line { display: block; }
.line--in { padding-left: .09em; }

/* ── LABELS (micro-caps) ────────────────────────────────
   Desvio consciente do DESIGN.md: tracking POSITIVO em caixa
   alta de 11-12px. Tracking negativo nesse tamanho colapsa
   a legibilidade das versais.                              */
.label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .155em;
  color: var(--graphite);
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.label__n { color: var(--saffron); font-variant-numeric: tabular-nums; }
.label--light { color: rgba(244,241,234,.62); }

/* ── BOTÕES (ghost / texto / sólido) ────────────────────── */
.btn {
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--btn-fg);
  padding: 17px 26px;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  cursor: pointer;
}
.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--ghost:hover { background: var(--ink); color: var(--bone); }

.btn--solid { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn--solid:hover { background: transparent; color: var(--ink); }

.btn--light { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn--light:hover { background: transparent; color: var(--bone); }

.btn--lg { padding: 21px 34px; font-size: 14px; }

.btn--text {
  padding: 17px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}
.btn--text:hover { border-bottom-color: currentColor; }

/* ── LOCKUP E|AT — reconstrução do logo real ────────────── */
/* Reconstrução do mark real: E + caixa sólida com AT vazado + HOME.
   Cores explícitas, NÃO currentColor: `background: currentColor` resolveria
   contra a cor do próprio elemento e caixa + letra vazada colapsariam na
   mesma cor. --box/--knock trocam por contexto mais abaixo. */
.lockup {
  --box:   var(--ink);
  --knock: var(--bone);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;          /* zero no container: tracking global era o que
                                 empurrava o E pra longe da caixa */
  text-transform: uppercase;
  display: inline-flex;
  align-items: stretch;
  color: inherit;
  white-space: nowrap;
}
.lockup__e {
  padding: .3em .1em .3em 0;  /* respiro mínimo antes da caixa */
}
.lockup__at {
  background: var(--box);
  color: var(--knock);
  /* tracking .18em joga .18em fantasma DEPOIS do T. Padding-right .02em
     compensa: direita = .02 + .18 = .20em = esquerda. Caixa fica simétrica. */
  padding: .3em .02em .3em .2em;
  letter-spacing: .18em;
}
.lockup__home {
  margin-left: .38em;
  padding-block: .3em;
  letter-spacing: .18em;
  color: var(--graphite);
}
.lockup--xl { font-size: clamp(30px, 6.2vw, 70px); }

/* O trilho vertical fixo saiu: servia pra segurar uma página vazia.
   Com a diagramação apertada ele virava ruído cruzando as fotos.
   O wildcard do sistema agora são os numerais fora de escala. */

/* ═══ NAV ═══════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 56px);
  padding: 13px var(--pad);
  background: var(--bone);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.nav__mark { display: inline-flex; align-items: center; }

.nav__links {
  display: flex;
  gap: clamp(14px, 2.2vw, 30px);
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.nav__links a { padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.nav__links a:hover { border-bottom-color: currentColor; }
.nav__cta { padding: 11px 18px; font-size: 11px; }

@media (max-width: 1080px) { .nav__links { display: none; } .nav__cta { margin-left: auto; } }
@media (max-width: 560px)  { .nav__cta { display: none; } }

/* ═══ 01 · HERO — split, sem overlay ════════════════════
   A foto dos chefs é high-key em P&B. Escurecer pra jogar texto
   branco por cima mataria a imagem, então o tipo mora ao lado,
   no osso, e a foto sangra na direita.                        */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 940px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    /* Teto de 740px: sem ele o hero esticava até 100svh, a coluna da
       foto virava retrato alto e o cover comia as laterais — que é
       onde os dois chefs estão. Em 740 o box fica ~0.9 de proporção,
       quase quadrado como a foto original. */
    min-height: min(calc(100svh - 56px), 740px);
  }
}

.hero__type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(30px, 4.4vw, 62px) clamp(26px, 3.4vw, 54px) clamp(30px, 4.4vw, 62px) var(--pad);
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--graphite);
}
.hero__meta .dot { color: var(--saffron); }

.hero__deck {
  font-size: clamp(15px, 1.05vw, 16.5px);
  color: var(--slate);
  max-width: 44ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 4px;
}

.hero__shot {
  position: relative;
  background: var(--linen);
  /* aspect-ratio em vez de min-height: no celular a altura passa a
     ser previsivel e o recorte vertical fica menos agressivo */
  aspect-ratio: 4 / 3.4;
}
.hero__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 34% subia demais a janela de recorte e cortava o alto da cabeça.
     22% mantém os dois inteiros; horizontal centralizado. */
  object-position: 50% 22%;
  filter: grayscale(1) contrast(1.04);
}
.hero__shot figcaption {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--bone);
  padding: 8px 14px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--graphite);
}
@media (min-width: 940px) { .hero__shot { aspect-ratio: auto; min-height: 0; } }

/* ═══ SEÇÕES · base ═════════════════════════════════════ */
.manifesto, .formatos, .cardapio, .ocasioes, .processo {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--gap-sec) var(--pad);
}
.sec-head { margin-bottom: clamp(20px, 2.4vw, 34px); }
.sec-head .display { margin-top: 12px; }
.sec-head__note {
  margin-top: 14px;
  max-width: 48ch;
  color: var(--slate);
}
.sec-head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

/* ═══ 03 · MANIFESTO ════════════════════════════════════ */
.manifesto__grid {
  margin-top: clamp(18px, 2.2vw, 30px);
  display: grid;
  gap: clamp(24px, 2.8vw, 44px);
  grid-template-columns: 1fr;
}
/* Duas colunas, não três. Com três, o título ficava numa coluna só e a
   foto embaixo dele sobrava órfã: as outras duas colunas terminavam
   muito acima e abria um vazio enorme ao lado. Agora título e texto
   correm juntos numa coluna e as duas fotos empilham na outra, o que
   equilibra as alturas sem esticar imagem nenhuma. */
@media (min-width: 1000px) {
  .manifesto__grid {
    grid-template-columns: 1.3fr .82fr;
    align-items: start;
  }
}
.manifesto__read h2 { margin-bottom: clamp(16px, 2vw, 26px); }
.manifesto__pics {
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
  grid-template-columns: 1fr;
}
.manifesto__read p + p { margin-top: 16px; }
.manifesto__read p { color: var(--slate); max-width: 44ch; }
.lede {
  font-size: clamp(18px, 1.6vw, 23px) !important;
  line-height: 1.35;
  letter-spacing: -.018em;
  color: var(--ink) !important;
  text-wrap: balance;
}

.facts {
  margin-top: 20px;
  border-top: 1px solid var(--rule);
}
.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.facts dt {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--graphite);
}
.facts dd { margin: 0; font-size: 14px; font-weight: 500; }

/* Pessoas em P&B, comida em cor — regra da direção de arte.
   O grayscale também disfarça o grão da foto dos chefs, que veio
   em baixa resolução do Instagram.
   A fonte é 345×330 (quase quadrada). Proporção 1/1 respeita isso e
   praticamente não recorta; qualquer box mais alto decapitava um deles. */
.manifesto__aside img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 24%;
  filter: grayscale(1) contrast(1.06);
}
.manifesto__aside figcaption {
  margin-top: 10px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--graphite);
}

/* ═══ 04 · FORMATOS (numerais fora de escala) ═══════════ */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px clamp(20px, 3.5vw, 56px);
  align-items: start;
  padding: clamp(16px, 2vw, 28px) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .row { grid-template-columns: auto minmax(0,1fr) clamp(220px, 24vw, 360px); align-items: center; }
}
.row__n {
  font-family: var(--serif);
  font-weight: 100;
  font-variation-settings: 'wght' 100, 'wdth' 100;
  font-size: clamp(52px, 8vw, 128px);
  line-height: .74;
  color: var(--rule);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
  user-select: none;
}
.row:hover .row__n { color: var(--saffron); }
.row__txt h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(23px, 2.6vw, 38px);
  text-transform: uppercase;
  letter-spacing: -.028em;
  line-height: 1;
}
.row__txt p {
  margin-top: 14px;
  color: var(--slate);
  max-width: 52ch;
}
.row__img { overflow: hidden; }
.row__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .55s var(--ease), filter .55s var(--ease);
  filter: saturate(.94);
}
.row:hover .row__img img { transform: scale(1.045); filter: saturate(1.06); }
@media (max-width: 899px) {
  .row__img { grid-column: 1 / -1; margin-top: 20px; }
  .row__img img { aspect-ratio: 16 / 9; }
}

/* ═══ 05 · CARDÁPIO — strip lateral ════════════════════ */
.cardapio { padding-right: 0; }
.drag {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--graphite);
  padding-right: var(--pad);
}
.strip {
  display: flex;
  gap: clamp(14px, 1.6vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-right: var(--pad);
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  cursor: grab;
}
.strip.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
.strip::-webkit-scrollbar { height: 2px; }
.strip::-webkit-scrollbar-track { background: var(--rule); }
.strip::-webkit-scrollbar-thumb { background: var(--ink); }

.plate {
  flex: 0 0 clamp(250px, 29vw, 430px);
  scroll-snap-align: start;
}
.plate img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(.94);
  transition: filter .55s var(--ease);
}
.plate:hover img { filter: saturate(1.08); }
.plate figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--rule);
}
.plate figcaption b {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: -.022em;
}
.plate figcaption span {
  font-size: 12px;
  color: var(--graphite);
}

/* ═══ QUAD — grade de quatro (sobremesas e vídeos) ══ */
.doces, .filmes {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--gap-sec) var(--pad);
}
.quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 24px);
}
.quad__item { margin: 0; overflow: hidden; line-height: 0; }
.quad__item img,
.quad__item video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--linen);
  filter: saturate(.94);
  transition: filter .55s var(--ease);
}
.quad__item:hover img,
.quad__item:hover video { filter: saturate(1.08); }
/* a fileira de video tem cinco pecas; as sobremesas, quatro */
@media (min-width: 900px) { .quad--5 { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 899px) { .quad { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .quad { grid-template-columns: 1fr; } }


/* ═══ BAND — faixa P&B de respiro entre seções ════════ */
.band { position: relative; margin: 0 0 clamp(18px, 2vw, 30px); display: block; }
.band img {
  width: 100%;
  height: clamp(200px, 34vw, 420px);
  object-fit: cover;
  object-position: 50% 38%;
  filter: grayscale(1) contrast(1.04);
}
.band figcaption {
  position: absolute;
  left: var(--pad); bottom: 0;
  background: var(--bone);
  padding: 9px 15px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(14px, 1.5vw, 21px);
  text-transform: uppercase;
  letter-spacing: -.022em;
}

/* Segunda foto da coluna: mãos finalizando. 4/3 respeita a fonte
   quadrada sem recorte agressivo. */
.manifesto__fill img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 52%;
  filter: saturate(.96);
}
.manifesto__fill figcaption,
.manifesto__aside figcaption {
  margin-top: 9px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--graphite);
}

/* ── Ficha técnica como faixa: é ela que fecha a seção ───
   Saiu de dentro da coluna de texto e virou régua full-width.
   Assim o rodapé das três colunas se resolve por estrutura e
   nenhuma foto precisa esticar pra igualar altura. */
.facts--strip {
  margin-top: clamp(22px, 2.6vw, 40px);
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 680px)  { .facts--strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .facts--strip { grid-template-columns: repeat(4, 1fr); } }
.facts--strip > div {
  display: block;
  padding: clamp(14px, 1.7vw, 22px) clamp(14px, 1.6vw, 22px) clamp(14px, 1.7vw, 22px) 0;
  border-bottom: 0;
  border-right: 1px solid var(--rule);
}
.facts--strip > div:last-child { border-right: 0; }
@media (min-width: 1000px) { .facts--strip > div + div { padding-left: clamp(14px, 1.6vw, 22px); } }
@media (max-width: 679px) {
  .facts--strip > div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .facts--strip > div:last-child { border-bottom: 0; }
}
.facts--strip dd {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(17px, 1.7vw, 25px);
  text-transform: uppercase;
  letter-spacing: -.026em;
  line-height: 1.02;
}


.step__img { margin-top: clamp(14px, 1.6vw, 22px); }
.step__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(.96);
  transition: filter var(--dur) var(--ease);
}
.step:hover .step__img img { filter: saturate(1.08); }


/* ═══ 06 · OCASIÕES ════════════════════════════════════ */
.tags {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.tags li {
  flex: 1 1 clamp(165px, 17.5%, 265px);
  padding: clamp(14px, 1.5vw, 21px) clamp(13px, 1.4vw, 19px);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 1.6vw, 23px);
  text-transform: uppercase;
  letter-spacing: -.024em;
  line-height: 1.02;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tags li:hover { background: var(--ink); color: var(--bone); }

/* ═══ 07 · PROCESSO ════════════════════════════════════ */
.steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
  .step + .step { border-left: 1px solid var(--rule); }
}
@media (min-width: 700px) and (max-width: 1059px) {
  .steps { border-left: 0; }
  .step:nth-child(2n) { border-left: 1px solid var(--rule); }
}
.step {
  padding: clamp(18px, 2.2vw, 30px) clamp(0px, 2vw, 32px) clamp(18px, 2.2vw, 30px) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 860px) {
  .step { border-bottom: 0; padding-left: clamp(0px, 2.6vw, 40px); }
  .step:first-child { padding-left: 0; }
}
.step__n {
  display: block;
  font-family: var(--serif);
  font-weight: 100;
  font-variation-settings: 'wght' 100, 'wdth' 100;
  font-size: clamp(44px, 5.2vw, 82px);
  line-height: .8;
  color: var(--saffron);
  font-variant-numeric: tabular-nums;
}
.step h3 {
  margin-top: 22px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(21px, 2.1vw, 31px);
  text-transform: uppercase;
  letter-spacing: -.028em;
  line-height: 1;
}
.step p { margin-top: 13px; color: var(--slate); max-width: 40ch; }

/* ═══ 09 · CTA FINAL ═══════════════════════════════════ */
.close {
  position: relative;
  isolation: isolate;
  padding: clamp(44px, 5.2vw, 78px) var(--pad);
  color: var(--bone);
  background: var(--void);
}
.close__media { position: absolute; inset: 0; z-index: -1; }
.close__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.close__media::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(23,22,19,.82);
}
.close__body { max-width: var(--max); margin-inline: auto; }
.close__body .display { margin-top: 14px; }
.close__deck {
  margin-top: 18px;
  max-width: 44ch;
  font-size: clamp(15px, 1.1vw, 17px);
  color: rgba(244,241,234,.84);
}
.close__body .btn { margin-top: 22px; }
.close__alt {
  margin-top: 22px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(244,241,234,.6);
}
.close__alt a { border-bottom: 1px solid rgba(244,241,234,.4); padding-bottom: 2px; }
.close__alt a:hover { border-bottom-color: var(--bone); color: var(--bone); }

/* ═══ FOOTER ═══════════════════════════════════════════ */
.foot {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(32px, 4vw, 56px) var(--pad) clamp(20px, 2.4vw, 34px);
}
.foot__mark {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.5vw, 22px);
  padding-bottom: clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid var(--rule);
}
.foot__cols {
  display: grid;
  gap: clamp(26px, 4vw, 56px);
  grid-template-columns: 1fr;
  padding-block: clamp(20px, 2.4vw, 34px);
}
@media (min-width: 720px) { .foot__cols { grid-template-columns: repeat(3, 1fr); } }
.foot__cols .label { margin-bottom: 14px; }
.foot__cols a, .foot__cols p { display: block; font-size: 14px; color: var(--slate); }
.foot__cols a { border-bottom: 1px solid transparent; width: fit-content; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.foot__cols a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.foot__cols a + a { margin-top: 6px; }

.foot__fine {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--rule);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--graphite);
}

/* ═══ REVEAL ═══════════════════════════════════════════
   Visível por padrão. Só esconde quando o JS confirma que
   está vivo (html.js). Sem isso, JS quebrado ou render
   headless entregava a página inteira em branco.        */
.reveal { opacity: 1; }

html.js .reveal {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(13px);
  transition: opacity .8s var(--ease), filter .8s var(--ease), transform .8s var(--ease);
}
html.js .reveal.is-in { opacity: 1; filter: blur(0); transform: none; }

/* Imagem não entra igual a texto: ela assenta de uma escala
   levemente maior, como foto caindo no lugar na diagramação. */
html.js .reveal img { transform: scale(1.045); transition: transform 1.1s var(--ease); }
html.js .reveal.is-in img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal.is-in,
  html.js .reveal img,
  html.js .reveal.is-in img {
    opacity: 1; filter: none; transform: none; transition: none;
  }
  .btn, .row__img img, .plate img, .tags li { transition: none; }
}


/* ═══════════════════════════════════════════════════════
   CAMADA DE ACABAMENTO
   Nada aqui muda tipografia, cor ou estrutura. Só densidade
   de craft: atmosfera, entrada orquestrada e micro-detalhe.
   ═══════════════════════════════════════════════════════ */

/* ── Grão de impressão ──────────────────────────────────
   O sistema proíbe sombra e gradiente decorativo, então a
   profundidade vem de textura. Grão fino por cima de tudo,
   como papel de menu impresso. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::after { opacity: .03; } }

/* ── Refinamento tipográfico ────────────────────────────── */
body {
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}
.display { font-feature-settings: 'kern' 1, 'liga' 1; }
p { text-wrap: pretty; }

/* Kalnia tem eixo de largura. Abrir a última linha do hero
   um passo cria hierarquia dentro do próprio bloco de título
   — desenho, não acidente. */
.display--hero .line--in { font-variation-settings: 'wght' 180, 'wdth' 112; }

/* ── Entrada orquestrada do hero ────────────────────────
   Uma carga bem coreografada vale mais que micro-interação
   espalhada. CSS puro: não depende de JS pra ficar visível. */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none;             clip-path: inset(0 0 -30% 0); }
}
@keyframes settleIn {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: none; }
}

/* Só animam sob html.anim, classe que o JS adiciona apenas quando a
   página está de fato visível. Sem isso o `from { opacity: 0 }` com
   fill-mode both congela no primeiro quadro em aba de segundo plano
   ou renderizador headless, e o hero é entregue invisível.
   Estado padrão = visível. A animação é enriquecimento, não requisito. */
html.anim .hero__meta    { animation: riseIn .9s var(--ease) both .05s; }
html.anim .display--hero .line:nth-child(1) { animation: riseIn 1s var(--ease) both .12s; }
html.anim .display--hero .line:nth-child(2) { animation: riseIn 1s var(--ease) both .20s; }
html.anim .display--hero .line:nth-child(3) { animation: riseIn 1s var(--ease) both .28s; }
html.anim .hero__deck    { animation: riseIn .9s var(--ease) both .40s; }
html.anim .hero__actions { animation: riseIn .9s var(--ease) both .48s; }

/* A escala entra na IMAGEM, não na figure. Na figure o scale(1.05)
   vazava 34px para fora da coluna do grid e empurrava a página em
   17px de overflow horizontal. Na imagem, o overflow:hidden corta. */
.hero__shot { overflow: hidden; }
html.anim .hero__shot img { animation: settleIn 1.3s var(--ease) both .1s; }


/* ── Botão: varredura em vez de troca seca de cor ──────── */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: currentColor;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s var(--ease);
}
.btn:hover::before { transform: scaleY(1); }
.btn--solid::before, .btn--light::before { display: none; }
@media (prefers-reduced-motion: reduce) { .btn::before { transition: none; } }

/* ── Links da nav: sublinhado que desenha da esquerda ──── */
.nav__links a {
  position: relative;
  border-bottom: 0;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .nav__links a::after { transition: none; } }

/* ── Fotos: vinheta interna no lugar de sombra ─────────── */
.row__img, .plate, .manifesto__aside, .hero__shot,
.step__img { position: relative; }
.row__img::after, .plate::after, .hero__shot::after,
.step__img::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(36,35,31,.07);
}

/* ── Formatos: a imagem revela junto com a linha ───────── */
.row__img img { clip-path: inset(0 0 0 0); }
.row:hover .row__img img { clip-path: inset(0 0 0 0); }

/* ── Numeral do formato ganha peso no hover ────────────── */
.row__n { transition: color var(--dur) var(--ease), font-variation-settings .5s var(--ease); }
.row:hover .row__n { font-variation-settings: 'wght' 200, 'wdth' 112; }

/* ── Legenda do prato: régua que cresce ────────────────── */
.plate figcaption { position: relative; }
.plate figcaption::before {
  content: '';
  position: absolute; top: -1px; left: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.plate:hover figcaption::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .plate figcaption::before { transition: none; } }

/* ── Barra de rolagem alinhada ao sistema ──────────────── */
html { scrollbar-color: var(--graphite) var(--linen); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--linen); }
::-webkit-scrollbar-thumb { background: var(--graphite); border: 3px solid var(--linen); }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }

/* ═══════════════════════════════════════════════════════
   CABER NA TELA
   Requisito do cliente: cada seção precisa caber em uma tela
   de desktop, sem corte. Alvo ~820px úteis (1080p menos a
   barra do navegador e a nav fixa). As duas seções que não
   cabiam empilhadas foram reestruturadas em grade.
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1000px) {

  /* FORMATOS: eram 6 linhas empilhadas, ~2100px. Viram grade
     3x2 com a imagem no topo e o numeral na mesma linha do
     título, o que economiza uma linha por item.            */
  .formatos .sec-head { margin-bottom: clamp(16px, 1.8vw, 26px); }
  .formatos .sec-head__note { margin-top: 10px; font-size: 13.5px; max-width: 62ch; }

  .rows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(16px, 1.8vw, 30px);
    row-gap: clamp(26px, 2.6vw, 40px);
    border-top: 0;
  }
  .row {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-bottom: 0;
    gap: 0;
  }
  .row__img { order: 1; margin-top: 0; }
  /* Fotos de celular sao verticais. O slot deitado jogava fora ate 68%
     do quadro. Em 3/4 a foto aparece quase inteira; em troca a secao
     passa de uma tela — duas fileiras de foto em pe nao cabem em 844px.
     Escolha do cliente: foto grande e legivel acima de caber na tela. */
  .row__img img { aspect-ratio: 3 / 4; }
  .row__n {
    order: 2;
    font-size: clamp(22px, 1.9vw, 30px);
    line-height: 1;
    margin-top: 12px;
    color: var(--saffron);
  }
  .row:hover .row__n { font-variation-settings: 'wght' 100, 'wdth' 100; }
  .row__txt { order: 3; margin-top: 2px; }
  .row__txt h3 { font-size: clamp(19px, 1.6vw, 26px); line-height: 1.1; }
  .row__txt p { margin-top: 8px; font-size: 14px; line-height: 1.5; max-width: 42ch; }


  /* STRIP: prato um pouco menor para a seção fechar na tela */
  .plate { flex: 0 0 clamp(220px, 23vw, 330px); }
  .plate img { aspect-ratio: 4 / 5; }

  /* PASSOS e demais: aperta o cabeçalho das seções */
  .sec-head { margin-bottom: clamp(16px, 1.8vw, 28px); }
}

/* âncora não pode ficar embaixo da nav fixa */
section[id] { scroll-margin-top: 56px; }

/* ═══════════════════════════════════════════════════════
   MOBILE: FOTO INTEIRA, SEM RECORTE
   Proporção fixa + object-fit:cover é o que cortava cabeça
   e prato no celular. No desktop funciona porque a coluna
   tem largura previsível; no mobile a coluna é única e cada
   foto tem enquadramento próprio — um object-position só
   nunca serve para todas. Aqui a altura passa a ser a
   natural da imagem, então não existe recorte para errar.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 939px) {
  .hero__shot {
    aspect-ratio: auto;
    min-height: 0;
    background: none;
  }
  .hero__shot img {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 999px) {
  .row__img img,
  .step__img img,
  .manifesto__aside img {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
  }
  /* a vinheta acompanha a altura real da foto */
  .row__img, .step__img { line-height: 0; }
}