/* =============================================================
   DOPE BAKED — dope bkd.
   style.css
   -------------------------------------------------------------
   Índice
   00 · Fontes
   01 · Tokens (:root)
   02 · Reset e base
   03 · Tipografia
   04 · Utilitários e layout
   05 · Grão, progresso, cursor
   06 · Preloader
   07 · Navegação + menu mobile
   08 · Botões e links
   09 · Hero
   10 · Marquee / manifesto
   11 · Missão
   12 · Pilares
   13 · História
   14 · Cardápio
   15 · A casa
   16 · Delivery
   17 · CTA — dois caminhos
   18 · Rodapé
   19 · Barra mobile
   20 · Estados de animação (reveal)
   21 · Responsivo
   22 · Acessibilidade / reduced motion / print
   ============================================================= */


/* =============================================================
   00 · FONTES
   Coloque os .woff2 em ./assets/fonts/.
   Enquanto não existirem, o fallback assume (font-display: swap).
   ============================================================= */
@font-face {
  font-family: 'Lufga';
  src: url('./assets/fonts/Lufga-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lufga';
  src: url('./assets/fonts/Lufga-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =============================================================
   01 · TOKENS
   ============================================================= */
:root {
  /* Cor */
  --dope-branco: #FFFFFF;
  --dope-azul:   #1C49A4;
  /* O azul da marca sobre o preto do rodapé dá ~1.8:1 — ilegível. Esta
     variante clara mantém a família da marca e passa em AA sobre #272727. */
  --dope-azul-claro: #6B93E0;
  --dope-cinza:  #CFCFCF;
  --dope-preto:  #272727;
  --dope-off:    #FAFAFA;

  --azul-escuro: #143a86;          /* hover do azul, mantém contraste AA */
  --cinza-texto: #6B6B6B;          /* cinza legível — o #CFCFCF nunca é texto */
  --hairline:    rgba(39,39,39,.14);
  --hairline-branca: rgba(255,255,255,.28);

  /* Escala tipográfica */
  --fs-display: clamp(3.5rem, 14vw, 16rem);
  /* O H1 do hero tem a linha mais longa do site ("DIAS ESPECIAIS.").
     A 14vw ela estoura o container e o título quebra em 4 linhas em vez
     das 3 da direção de arte — medido com a LUFGA instalada: precisa de
     1571px numa caixa de 1310px em viewport de 1440.
     Máximo real com LUFGA: ~12.77vw. Os 12.2vw abaixo deixam ~59px de
     folga a 1440px. NÃO suba para 14vw: a LUFGA é mais LARGA que a fonte
     de fallback, não mais estreita.
     O piso de 2.4rem existe para telas de 360px e menos: ali 12.2vw dá
     ~44px e um piso maior forçaria a quarta linha. */
  --fs-hero: clamp(2.4rem, 12.2vw, 13rem);
  --fs-h2:      clamp(2.5rem, 7vw, 7rem);
  --fs-h3:      clamp(1.5rem, 3vw, 2.5rem);
  --fs-body:    clamp(1rem, 1.15vw, 1.25rem);
  --fs-eyebrow: .75rem;

  --ls-display: -.045em;
  --ls-h2:      -.03em;
  --lh-display: .85;

  /* Espaço */
  --gut:      clamp(1.25rem, 4vw, 4rem);
  --sec-pad:  clamp(6rem, 14vh, 12rem);
  --maxw:     1680px;
  --measure:  62ch;

  /* Easing */
  --expo:  cubic-bezier(.19, 1, .22, 1);
  --smooth: cubic-bezier(.4, 0, .2, 1);

  /* Duração */
  --d-fast: .28s;
  --d-mid:  .5s;
  --d-slow: 1.05s;

  /* Chrome */
  --nav-h: 72px;
  --z-grain: 9999;
  --z-cursor: 9998;
  --z-pre: 10000;
  --z-nav: 900;
}


/* =============================================================
   02 · RESET E BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;              /* o smooth é do Lenis */
}

body {
  margin: 0;
  background: var(--dope-branco);
  color: var(--dope-preto);
  font-family: 'Lufga', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* Bloqueio de scroll durante preloader e menu mobile */
body.is-locked { overflow: hidden; height: 100%; }

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
figure, blockquote, p, h1, h2, h3, h4, address { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--dope-azul); color: #fff; }

:focus-visible {
  outline: 2px solid var(--dope-azul);
  outline-offset: 3px;
  border-radius: 2px;
}
.delivery :focus-visible,
.footer :focus-visible,
.path:focus-visible { outline-color: #fff; }


/* =============================================================
   03 · TIPOGRAFIA
   ============================================================= */
.h-display {
  font-weight: 700;
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-transform: uppercase;
  margin: 0;
}

.h2 {
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  line-height: .92;
  text-transform: uppercase;
  margin: 0;
}

.h3 {
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -.02em;
  line-height: 1.05;
  text-transform: uppercase;
}

.body {
  font-size: var(--fs-body);
  line-height: 1.6;
  max-width: var(--measure);
  color: var(--dope-preto);
}
.body--invert { color: rgba(255,255,255,.92); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.eyebrow--blue  { color: var(--dope-azul); }

/* Nome da marca no corpo do texto, sempre em azul */
.brand { color: var(--dope-azul); }
/* Sobre fundo escuro (rodapé) o azul chapado não tem contraste */
.footer .brand { color: var(--dope-azul-claro); }
.eyebrow--white { color: rgba(255,255,255,.75); }
.eyebrow--grey  { color: var(--cinza-texto); }

.num, .tabular { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Palavra em destaque (kinetic) */
.accent { color: var(--dope-azul); }


/* =============================================================
   04 · UTILITÁRIOS E LAYOUT
   ============================================================= */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--sec-pad); position: relative; }

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

/* As colunas-guia (.rule-grid e .hero__grid) foram removidas: liam como
   guias de diagramação esquecidas, não como elemento gráfico. */


/* =============================================================
   05 · GRÃO, PROGRESSO, CURSOR
   ============================================================= */
.grain {
  position: fixed; inset: -60%;
  width: 220%; height: 220%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1.2s steps(6) infinite;
  will-change: transform;
}
@keyframes grainShift {
  0%   { transform: translate3d(0,0,0); }
  16%  { transform: translate3d(-2%,-3%,0); }
  33%  { transform: translate3d(3%,-1%,0); }
  50%  { transform: translate3d(-1%,2%,0); }
  66%  { transform: translate3d(2%,3%,0); }
  83%  { transform: translate3d(-3%,1%,0); }
  100% { transform: translate3d(0,0,0); }
}

.read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 950; pointer-events: none; background: transparent;
}
.read-progress__bar {
  display: block; height: 100%; width: 0%;
  background: var(--dope-azul);
  transform-origin: left center;
}

.cursor {
  position: fixed; top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--dope-azul);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate3d(-100px, -100px, 0);
  display: none;
  place-items: center;
  transition: width .45s var(--expo), height .45s var(--expo), background .3s ease;
  will-change: transform;
}
html.has-cursor .cursor { display: grid; }
.cursor__label {
  font-size: .6rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #fff;
  opacity: 0; transform: scale(.7);
  transition: opacity .3s ease, transform .45s var(--expo);
  white-space: nowrap;
}
.cursor.is-big { width: 68px; height: 68px; }
.cursor.is-big .cursor__label { opacity: 1; transform: scale(1); }
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor [data-cursor] { cursor: none; }


/* =============================================================
   06 · PRELOADER
   ============================================================= */
.preloader {
  position: fixed; inset: 0;
  z-index: var(--z-pre);
  background: var(--dope-branco);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.preloader.is-done { pointer-events: none; }

.preloader__rule {
  position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--gut) + 4.5rem);
  height: 1px; background: rgba(39,39,39,.12);
}
.preloader__rule-fill {
  display: block; height: 100%; width: 0%;
  background: var(--dope-azul);
}

.preloader__brand {
  font-weight: 700;
  font-size: clamp(2.5rem, 11vw, 9rem);
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--dope-preto);
  display: flex;
}
.pl-letter {
  display: inline-block;
  clip-path: inset(100% 0 0 0);
  transform: translateY(12%);
}
.pl-space { width: .28em; }

.preloader__count {
  position: absolute; right: var(--gut); bottom: var(--gut);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--dope-azul);
}

.preloader__curtain {
  position: absolute; inset: 0;
  background: var(--dope-branco);
  transform: translateY(0);
}


/* =============================================================
   07 · NAVEGAÇÃO
   ============================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  transition: transform .55s var(--expo), background-color .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
  transform: translateY(0);
}
.nav.is-hidden { transform: translateY(-101%); }
.nav.is-solid {
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--hairline);
}

.nav__inner {
  height: 100%;
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gut);
  display: flex; align-items: center; gap: 1.5rem;
}

.nav__logo {
  font-weight: 700; font-size: 1.15rem; letter-spacing: -.03em;
  color: var(--dope-azul);
  margin-right: auto;
}
.nav__logo:hover { color: var(--dope-preto); }

.nav__links { display: flex; align-items: center; gap: .85rem; }
.nav__sep { color: var(--dope-cinza); }
.nav__link {
  position: relative;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding-block: .35rem;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--dope-azul);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--expo);
}
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); }

.nav__cta { margin-left: 1rem; }

.nav__burger {
  display: none;
  width: 48px; height: 48px;
  margin-right: -12px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
}
.nav__burger span {
  display: block; width: 24px; height: 2px; background: var(--dope-preto);
  transition: transform .4s var(--expo), opacity .25s ease;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* Menu mobile */
.mmenu {
  position: fixed; inset: 0; z-index: 890;
  background: var(--dope-branco);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--nav-h) var(--gut) var(--gut);
  clip-path: inset(0 0 100% 0);
}
.mmenu[hidden] { display: none; }
.mmenu__inner { display: flex; flex-direction: column; }
.mmenu__link {
  font-weight: 700;
  font-size: clamp(2.5rem, 12vw, 4.5rem);
  letter-spacing: -.04em;
  line-height: 1;
  text-transform: uppercase;
  padding-block: .5em;
  border-bottom: 1px solid var(--dope-cinza);
  overflow: hidden;
}
.mmenu__link:first-child { border-top: 1px solid var(--dope-cinza); }
.mmenu__link span { display: block; transform: translateY(110%); }
.mmenu__link:active { color: var(--dope-azul); }
.mmenu__foot { padding-top: 2rem; }


/* =============================================================
   08 · BOTÕES E LINKS
   ============================================================= */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .7rem;
  min-height: 56px;
  padding: 0 1.6rem;
  border-radius: 2px;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color .4s var(--expo), border-color .4s var(--expo);
}
.btn--sm { min-height: 42px; padding: 0 1.1rem; font-size: .7rem; }

.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .55s var(--expo);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }

.btn__arrow {
  display: inline-block;
  transition: transform .45s var(--expo);
}
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(8px); }

/* Sólido azul */
.btn--solid { background: var(--dope-azul); color: #fff; }
.btn--solid::before { background: var(--dope-preto); }

/* Outline azul */
.btn--outline {
  background: transparent; color: var(--dope-azul);
  border: 1px solid var(--dope-azul);
}
.btn--outline::before { background: var(--dope-azul); }
.btn--outline:hover, .btn--outline:focus-visible { color: #fff; }

/* Link de texto com hairline */
.ulink { position: relative; display: inline-block; padding-bottom: 2px; }
.ulink::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--expo);
}
.ulink:hover::after, .ulink:focus-visible::after { transform: scaleX(1); }


/* =============================================================
   09 · HERO
   ============================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + 3rem) 0 clamp(2rem, 6vh, 5rem);
  overflow: hidden;
  background: var(--dope-branco);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__video--mobile { display: none; }
/* Estado: sem vídeo disponível → poster segura a cena */
html.no-video .hero__video { object-fit: cover; }

.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 38%, rgba(255,255,255,.18) 70%, rgba(255,255,255,.35) 100%);
}

/* IMPORTANTE: .hero__content não pode criar stacking context
   (z-index ≠ auto), senão o mix-blend-mode do H1 fica isolado e para de
   enxergar o vídeo como backdrop. A ordem de pintura é garantida pela
   ordem no DOM: media → content. */
.hero__content {
  position: relative;
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gut);
}
.hero__eyebrow { margin-bottom: clamp(1rem, 3vh, 2rem); }

.hero__title {
  font-size: var(--fs-hero);
  color: var(--dope-preto);
  mix-blend-mode: difference;
  filter: invert(1);            /* difference + invert = texto legível sobre branco e vídeo */
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
}
html.no-blend .hero__title { mix-blend-mode: normal; filter: none; color: var(--dope-preto); }

.hero__sub {
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
  max-width: 44ch;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero__scroll {
  position: absolute; right: var(--gut); bottom: clamp(2rem, 6vh, 5rem);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.hero__scroll-line {
  position: relative; display: block; width: 1px; height: 60px;
  background: rgba(28,73,164,.25); overflow: hidden;
}
.hero__scroll-line i {
  position: absolute; left: 0; top: 0; width: 1px; height: 18px;
  background: var(--dope-azul);
  animation: scrollDot 1.9s var(--smooth) infinite;
}
@keyframes scrollDot {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(333%); }
  100% { transform: translateY(333%); }
}
.hero__scroll-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; color: var(--dope-azul);
  writing-mode: vertical-rl;
}


/* =============================================================
   10 · MARQUEE / MANIFESTO
   ============================================================= */
.manifesto { position: relative; z-index: 2; background: var(--dope-branco); }

.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding-block: clamp(.6rem, 1.6vh, 1.1rem);
  user-select: none;
}
.marquee__track { display: inline-flex; will-change: transform; }
.marquee__group {
  display: inline-block;
  padding-right: 1.2em;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 4.5rem);
  letter-spacing: -.02em;
  line-height: 1.1;
  text-transform: uppercase;
}
.marquee__group i { font-style: normal; opacity: .5; padding-inline: .18em; }

.marquee--blue  { background: var(--dope-azul); color: #fff; }
.marquee--white {
  background: var(--dope-branco); color: var(--dope-azul);
  border-bottom: 1px solid var(--hairline);
}
.marquee--white .marquee__group { font-size: clamp(1.4rem, 3.2vw, 2.8rem); letter-spacing: .01em; }


/* =============================================================
   11 · MISSÃO
   ============================================================= */
.mission { background: var(--dope-branco); overflow: hidden; }
/* Respiro antes dos pilares. Sem isso a base da missão cruza o topo da tela
   no mesmo pixel em que o pin dos pilares assume — os dois textos passavam
   juntos e não sobrava scroll para ler o último parágrafo. */
.mission { padding-bottom: calc(var(--sec-pad) + 70vh); }
.mission__inner { position: relative; z-index: 1; }

.mission__title {
  margin: clamp(1.5rem, 4vh, 3rem) 0 clamp(2.5rem, 6vh, 5rem);
  /* 17ch mantém a composição de 3 linhas: DEMOCRATIZAR / ALIMENTAÇÃO /
     DE QUALIDADE. — largo o bastante para "DE QUALIDADE." e estreito o
     bastante para não juntar as duas primeiras. */
  max-width: 17ch;
}
.mission__lead { font-weight: 700; color: var(--dope-preto); }

/* Palavra-chave com wipe azul sobreposto (kinetic typography).
   O modificador .split-line--w vive na seção 20, junto de .split-line —
   precisa vir DEPOIS dela para vencer o `display: block`. */
.split-line__in.kw { position: relative; }
.kw__blue {
  position: absolute; left: 0; top: 0;
  color: var(--dope-azul);
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  user-select: none;            /* a camada é duplicata: não entra na cópia */
  -webkit-user-select: none;
}

.mission__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3.5rem);
  margin-left: auto;
  max-width: 78ch;
}
.mission__body p:first-child { grid-column: 1 / -1; font-size: clamp(1.1rem, 1.6vw, 1.5rem); max-width: 60ch; }


/* =============================================================
   12 · PILARES
   ============================================================= */
.pillars { position: relative; background: var(--dope-off); }
.pillars__viewport { overflow: hidden; }
.pillars__track { display: flex; will-change: transform; }

.pillar {
  position: relative;
  flex: 0 0 100vw;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding: calc(var(--nav-h) + 4rem) var(--gut) 4rem;
  border-right: 1px solid var(--hairline);
  overflow: hidden;
}

.pillar__num {
  position: absolute;
  left: -.06em; bottom: -.22em;
  font-weight: 700;
  font-size: 20vw;
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--dope-cinza);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
  font-variant-numeric: tabular-nums;
}

.pillar__content { position: relative; z-index: 1; max-width: 46ch; }
.pillar__title { margin: 1rem 0 1.4rem; color: var(--dope-preto); }
.pillar__content .body { color: var(--dope-preto); }

.pillar__figure {
  position: relative; z-index: 1;
  aspect-ratio: 3 / 4;
  max-height: 62vh;
  margin-left: auto;
  overflow: hidden;
  border-radius: 2px;
  background: var(--dope-branco);
  border: 1px solid var(--hairline);
}
.pillar__figure img { width: 100%; height: 100%; object-fit: cover; }


/* =============================================================
   13 · HISTÓRIA
   ============================================================= */
.story { background: var(--dope-off); }
.story__head { margin-bottom: clamp(3rem, 8vh, 6rem); }
.story__title { margin-top: clamp(1rem, 3vh, 2rem); max-width: 12ch; }

.story__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(4rem, 10vh, 8rem);
}
.story__col { max-width: 40ch; }
.story__col:nth-child(2) { padding-top: clamp(2rem, 6vh, 5rem); }
.story__col:nth-child(3) { padding-top: clamp(4rem, 12vh, 9rem); }

/* Retrato dos três sócios, entre os textos e os cards de papel */
.story__photo {
  margin: 0 auto clamp(3.5rem, 9vh, 7rem);
  max-width: min(100%, 660px);
}
.story__photo img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
}
.story__cap {
  margin-top: .9rem;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cinza-texto);
  text-align: center;
}

.story__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}
.scard {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: clamp(220px, 34vh, 340px);
  padding: 1.4rem;
  background: var(--dope-branco);
  border: 1px solid var(--dope-cinza);
  border-radius: 2px;
  transition: transform .6s var(--expo), border-color .4s ease, background-color .4s ease;
}
.scard:hover, .scard:active {
  transform: scale(1.02);
  border-color: var(--dope-azul);
}
.scard__idx {
  font-size: .7rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dope-azul);
}
.scard__label {
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  letter-spacing: -.02em; line-height: 1;
  text-transform: uppercase;
  margin-top: auto;
}
.scard__who {
  font-size: .75rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cinza-texto);
  margin-top: .6rem;
}


/* =============================================================
   14 · CARDÁPIO
   ============================================================= */
.menu { background: var(--dope-branco); }
.menu__head { margin-bottom: clamp(3rem, 8vh, 6rem); }
.menu__head .h2 { margin: clamp(1rem, 3vh, 2rem) 0 1.5rem; }
.menu__intro { color: var(--dope-preto); }

.menu__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

.pcard {
  position: relative;
  display: flex; flex-direction: column;
  padding-bottom: 1.25rem;
  transition: opacity .5s var(--smooth), filter .5s var(--smooth), transform .5s var(--expo);
  will-change: transform, opacity;
}
.pcard__fig {
  /* 1:1 porque as fotos de produto são quadradas. Num quadro 3/4 o
     object-fit: cover abaixo comeria 25% da largura de cada uma. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--dope-off);
  border-radius: 2px;
  margin-bottom: 1.1rem;
}
.pcard__fig img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--expo);
}
.pcard__name {
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  letter-spacing: -.02em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: .6rem;
}
.pcard__desc { font-size: .95rem; line-height: 1.55; color: var(--dope-preto); }

.pcard__rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--dope-cinza);
}
.pcard__rule::after {
  content: ''; position: absolute; inset: 0;
  background: var(--dope-azul);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--expo);
}

/* Foco/hover: os demais recuam */
.menu__grid:hover .pcard,
.menu__grid:focus-within .pcard { opacity: .35; filter: grayscale(1); }
.menu__grid .pcard:hover,
.menu__grid .pcard:focus-within {
  opacity: 1; filter: grayscale(0); transform: scale(1.02);
}
.menu__grid .pcard:hover .pcard__rule::after,
.menu__grid .pcard:focus-within .pcard__rule::after { transform: scaleX(1); }
.menu__grid .pcard:hover .pcard__fig img { transform: scale(1.04); }

.menu__foot { margin-top: clamp(2.5rem, 6vh, 4rem); }


/* =============================================================
   15 · A CASA
   ============================================================= */
.house {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-block: clamp(4rem, 12vh, 9rem);
  overflow: hidden;
  background: var(--dope-off);
}
.house__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.house__img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.15);
  transform-origin: center;
  will-change: transform;
}
.house__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(255,255,255,.95) 8%, rgba(255,255,255,.6) 45%, rgba(255,255,255,.15) 100%);
}
.house__content { position: relative; z-index: 1; }
.house__title { margin: clamp(1rem, 3vh, 2rem) 0 1.75rem; max-width: 11ch; }

.tags {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
.tag {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--dope-azul);
  border-radius: 2px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--dope-azul);
  background: rgba(255,255,255,.6);
}


/* =============================================================
   16 · DELIVERY
   ============================================================= */
.delivery {
  position: relative;
  background: var(--dope-azul);
  color: #fff;
  min-height: 100svh;
  display: grid; align-items: center;
  padding-block: var(--sec-pad);
  clip-path: inset(0 0 0 0);
  overflow: hidden;
}
.delivery__inner { position: relative; z-index: 1; }
.delivery__title {
  color: #fff;
  margin: clamp(1.25rem, 4vh, 2.5rem) 0 clamp(1.5rem, 4vh, 2.5rem);
  max-width: 12ch;
}
.delivery__title .accent { color: rgba(255,255,255,.45); }
.delivery .body { max-width: 52ch; }

/* Sacola de entrega: flutua à direita no desktop, empilha no mobile */
.delivery__photo { margin: 0; }
.delivery__photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
@media (min-width: 861px) {
  .delivery__inner { padding-right: min(40vw, 500px); }
  .delivery__photo {
    position: absolute;
    right: clamp(1.5rem, 5vw, 6rem);
    top: 50%;
    transform: translateY(-50%);
    width: min(32vw, 400px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    z-index: 1;
  }
}
@media (max-width: 860px) {
  .delivery__photo {
    margin: clamp(2rem, 5vh, 3rem) auto 0;
    width: min(100% - 2 * var(--gutter), 420px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
}


/* =============================================================
   17 · CTA — DOIS CAMINHOS
   ============================================================= */
.cta { background: var(--dope-branco); padding-bottom: 0; }
.cta__head { margin-bottom: clamp(3rem, 8vh, 6rem); }
.cta__title { max-width: 10ch; }
.cta__sub {
  margin-top: clamp(1.25rem, 3vh, 2rem);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  color: var(--cinza-texto);
}

.paths {
  display: flex;
  border-top: 1px solid var(--dope-cinza);
  border-bottom: 1px solid var(--dope-cinza);
}
.path {
  position: relative;
  flex: 1 1 50%;
  display: flex; flex-direction: column;
  gap: .9rem;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  min-height: clamp(340px, 48vh, 520px);
  background: var(--dope-branco);
  transition:
    flex-basis .6s cubic-bezier(.19,1,.22,1),
    flex-grow .6s cubic-bezier(.19,1,.22,1),
    background-color .6s var(--expo),
    color .5s var(--expo);
}
.path + .path { border-left: 1px solid var(--dope-cinza); }

.path__num {
  font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: .8rem; letter-spacing: .2em;
  color: var(--dope-azul);
  transition: color .5s var(--expo);
}
.path__title {
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 3.25rem);
  letter-spacing: -.03em; line-height: 1;
  text-transform: uppercase;
}
.path__desc { max-width: 34ch; color: var(--dope-preto); transition: color .5s var(--expo); }

.path__btn {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .7rem;
  align-self: flex-start;
  min-height: 52px; padding: 0 1.5rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dope-azul);
  transition: color .5s var(--expo), border-color .5s var(--expo);
}
.path__btn .btn__arrow { transition: transform .45s var(--expo); }

/* Estado ativo (desktop) */
@media (hover: hover) and (min-width: 861px) {
  .paths:hover .path { flex: 1 1 40%; }
  .paths .path:hover { flex: 1 1 60%; background: var(--dope-azul); color: #fff; }
  .path:hover .path__num,
  .path:hover .path__desc,
  .path:hover .path__btn { color: #fff; }
  .path:hover .path__btn .btn__arrow { transform: translateX(8px); }
}
.path:focus-visible { background: var(--dope-azul); color: #fff; }
.path:focus-visible .path__num,
.path:focus-visible .path__desc,
.path:focus-visible .path__btn { color: #fff; }


/* =============================================================
   18 · RODAPÉ
   ============================================================= */
.footer {
  position: relative;
  background: var(--dope-preto);
  color: #fff;
  padding-top: clamp(4rem, 10vh, 8rem);
  overflow: hidden;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
}
.footer__logo {
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -.045em; line-height: 1;
  align-self: start;
  color: var(--dope-azul-claro);
}
.footer__logo:hover { color: #fff; }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.fcol p, .fcol address, .fcol li { font-size: .9rem; line-height: 1.65; }
.fcol .eyebrow { margin-bottom: .9rem; color: var(--dope-cinza); }
.fcol__mute { color: var(--dope-cinza); }
.flist li + li { margin-top: .35rem; }

.footer__legal {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dope-cinza);
}

/* Nome gigante cortado pela borda inferior */
.footer__giant {
  position: relative;
  height: clamp(70px, 11vw, 190px);
  overflow: hidden;
  pointer-events: none;
}
.footer__giant span {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  display: block;
  font-weight: 700;
  font-size: clamp(4.5rem, 21vw, 22rem);
  line-height: .78;
  letter-spacing: -.055em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.28);
  will-change: transform;
}


/* =============================================================
   19 · BARRA MOBILE
   ============================================================= */
.mbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 880;
  padding: .6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
  transform: translateY(110%);
  transition: transform .55s var(--expo);
  display: none;
}
.mbar.is-visible { transform: translateY(0); }
.mbar__btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px;
  background: var(--dope-azul); color: #fff;
  border-radius: 2px;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}


/* =============================================================
   20 · ESTADOS DE ANIMAÇÃO
   ============================================================= */
/* Wrapper de máscara criado pelo splitter.
   O padding + margem negativa dão folga para acentos (Ã, Ó) e para o
   cedilha do Ç em títulos com line-height baixo, sem alterar o layout:
   sem isso o overflow:hidden corta a diacrítica. */
.split-line {
  display: block;
  overflow: hidden;
  padding-top: .14em; margin-top: -.14em;
  padding-bottom: .1em; margin-bottom: -.1em;
}
/* Modo palavra (kinetic): cada palavra é sua própria máscara, mas precisa
   continuar fluindo na linha. Declarado DEPOIS de .split-line de propósito —
   mesma especificidade, então a ordem é o que decide. */
.split-line--w { display: inline-block; vertical-align: top; }
/* Quebra de linha forçada no modo palavra */
.wbrk { display: block; width: 100%; height: 0; }

.split-line__in { display: block; will-change: transform; }
.split-word { display: inline-block; }

/* Estado inicial antes do JS assumir (evita flash de conteúdo) */
html.js [data-split] .split-line__in,
html.js [data-reveal],
html.js [data-stagger] > * { opacity: 0; }
html.js [data-split].is-in .split-line__in,
html.js [data-reveal].is-in,
html.js [data-stagger].is-in > * { opacity: 1; }

/* Fallback sem JS: tudo visível */
html:not(.js) [data-split] .split-line__in,
html:not(.js) [data-reveal],
html:not(.js) [data-stagger] > * { opacity: 1; }

html:not(.js) .preloader { display: none; }


/* =============================================================
   21 · RESPONSIVO
   ============================================================= */
@media (max-width: 1440px) {
  .menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
}

@media (max-width: 1200px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

@media (max-width: 1024px) {
  :root { --nav-h: 64px; }

  .cursor { display: none !important; }

  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }

  .pillar {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 2rem;
    min-height: auto;
    padding-block: clamp(4rem, 10vh, 7rem);
  }
  .pillar__figure { max-height: none; width: 100%; margin-left: 0; }
  .pillar__num { font-size: 34vw; opacity: .38; }

  .story__cols { grid-template-columns: 1fr; gap: 2rem; }
  .story__col:nth-child(2),
  .story__col:nth-child(3) { padding-top: 0; }
  .story__cards { grid-template-columns: 1fr; }
  .scard { min-height: 180px; }

  .mission__body { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --fs-display: clamp(3rem, 15vw, 6rem); }

  .hero { align-items: flex-end; }
  .hero__title { max-width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: space-between; }
  .hero__scroll { display: none; }

  /* No celular vale o recorte vertical — o scrub é o mesmo do desktop */
  .hero__video { display: none; }
  .hero__video--mobile { display: block; }

  /* Pilares empilham */
  .pillars__viewport { overflow: visible; }
  .pillars__track { display: block; }
  .pillar { flex: none; width: 100%; border-right: 0; border-bottom: 1px solid var(--hairline); }

  .menu__grid { grid-template-columns: 1fr; }
  .menu__grid:hover .pcard,
  .menu__grid:focus-within .pcard { opacity: 1; filter: none; }
  .pcard { transform: none !important; }

  /* Dois caminhos empilham; iFood já em azul */
  .paths { flex-direction: column; }
  .path { min-height: auto; flex: none; }
  .path + .path { border-left: 0; border-top: 1px solid var(--dope-cinza); }
  .path--ifood { background: var(--dope-azul); color: #fff; }
  .path--ifood .path__num,
  .path--ifood .path__desc,
  .path--ifood .path__btn { color: #fff; }
  .path:active { background: var(--dope-azul); color: #fff; }
  .path:active .path__num,
  .path:active .path__desc,
  .path:active .path__btn { color: #fff; }

  .mbar { display: block; }
  body { padding-bottom: 0; }

  .footer__giant { height: clamp(56px, 16vw, 110px); }

  /* Alvos de toque ≥ 48px.
     Os links do rodapé têm ~26px de altura de texto. Em vez de inflar a
     caixa (o que afastaria a hairline do sublinhado), espaçamos a lista e
     ampliamos a área tocável com um pseudo-elemento centrado no texto. */
  .flist li + li { margin-top: 1.6rem; }
  .flist .ulink::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    height: 48px;
  }
  .nav__logo,
  .footer__logo { display: inline-flex; align-items: center; min-height: 48px; }
}

@media (max-width: 480px) {
  :root { --gut: 1.25rem; }
  .footer__cols { grid-template-columns: 1fr; }
  .footer__legal { flex-direction: column; gap: .5rem; }
  .marquee--white .marquee__group { font-size: 1.25rem; }
}


/* =============================================================
   22 · ACESSIBILIDADE / MOTION / PRINT
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .2s !important;
    scroll-behavior: auto !important;
  }
  .grain { animation: none; }
  .hero__scroll-line i { animation: none; }
  .house__img { transform: none; }
  html.js [data-split] .split-line__in,
  html.js [data-reveal],
  html.js [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .pillars__track { transform: none !important; }
  .cursor { display: none !important; }
}

@media (prefers-contrast: more) {
  :root { --hairline: rgba(39,39,39,.45); --cinza-texto: #4A4A4A; }
}

@media print {
  .grain, .cursor, .preloader, .nav, .mbar, .marquee, .hero__media { display: none !important; }
  body { color: #000; }
  .delivery { background: #fff; color: #000; }
}