:root {
  --gold: #d9c46a;
  --gold-strong: #e8d489;
  --gold-dim: rgba(217, 196, 106, 0.55);
  --ink: #f3ead8;
  --bg: #0b0906;
  --bg-2: #14100a;
  --caramel: #b98d5f;
  --serif: "Playfair Display", "Cormorant Garamond", serif;
  --sans: "Jost", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
}

em { font-style: italic; color: var(--gold); }

/* ---------- Barra fixa ---------- */
.hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(11, 9, 6, 0.85), transparent);
}
.hud-brand { display: flex; align-items: center; }
.hud-brand img {
  height: 44px;
  display: block;
}
.hud-mid { color: var(--gold-dim); font-weight: 400; }
.hud-right { display: inline-flex; align-items: center; gap: 20px; }
.hud-right a { color: var(--gold); text-decoration: none; font-weight: 500; }
.hud-right a:hover { color: var(--gold-strong); }
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  padding: 2px;
  transition: color 0.3s;
}
.cart-btn:hover { color: var(--gold-strong); }
.cart-btn svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute;
  top: -7px; right: -9px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--gold);
  color: #14100a;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
}
.cart-count[hidden] { display: none; }

/* ---------- Carrinho (drawer) ---------- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(400px, 90vw);
  z-index: 100;
  background: #14100a;
  border-left: 1px solid rgba(217, 196, 106, 0.28);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cart-drawer.open { transform: translateX(0); }
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 20px;
  border-bottom: 1px solid rgba(217, 196, 106, 0.16);
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gold-strong);
}
.cart-close {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.cart-items { list-style: none; margin: 0; padding: 8px 24px; flex: 1; overflow-y: auto; }
.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-nome { font-family: var(--serif); font-size: 1.05rem; color: var(--gold-strong); }
.cart-item-sub { font-size: 11px; letter-spacing: 0.12em; color: rgba(243, 234, 216, 0.5); margin-top: 2px; }
.cart-qty { display: flex; align-items: center; gap: 10px; }
.cart-qty button {
  width: 27px; height: 27px;
  border: 1px solid rgba(217, 196, 106, 0.4);
  background: transparent;
  color: var(--gold);
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.cart-qty button:hover { background: rgba(217, 196, 106, 0.14); }
.cart-qty span { min-width: 16px; text-align: center; }
.cart-item-preco { min-width: 74px; text-align: right; color: var(--ink); font-size: 0.95rem; }
.cart-empty { padding: 48px 24px; text-align: center; color: rgba(243, 234, 216, 0.5); line-height: 1.9; }
.cart-empty span { font-size: 12px; color: rgba(243, 234, 216, 0.35); }
.cart-foot { padding: 20px 24px 26px; border-top: 1px solid rgba(217, 196, 106, 0.16); }
.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: rgba(243, 234, 216, 0.8);
}
.cart-total strong { font-family: var(--serif); font-size: 1.4rem; color: var(--gold); }
.cart-checkout {
  display: block;
  text-align: center;
  padding: 16px;
  background: var(--gold);
  color: #14100a;
  text-decoration: none;
  letter-spacing: 0.24em;
  font-size: 13px;
  font-weight: 600;
  transition: filter 0.3s ease;
}
.cart-checkout:hover { filter: brightness(1.08); }
.cart-checkout.disabled { opacity: 0.35; pointer-events: none; }
.cart-note { margin-top: 12px; text-align: center; font-size: 11px; color: rgba(243, 234, 216, 0.4); }

/* ---------- Seções cinemáticas (scrub) ---------- */
.cinematic { position: relative; height: 480vh; }
.cinematic .sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #0b0906;
}
.cinematic canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(5, 3, 1, 0.72) 100%),
    linear-gradient(180deg, rgba(5, 3, 1, 0.55) 0%, transparent 26%, transparent 68%, rgba(5, 3, 1, 0.8) 100%);
}
/* hero desenha o frame com zoom 0.5 — vinheta forte esconde a borda do vídeo */
#hero .vignette {
  background:
    radial-gradient(95% 78% at 50% 60%, transparent 26%, rgba(18, 12, 6, 0.55) 48%, rgba(18, 12, 6, 0.92) 68%, #120c06 84%),
    linear-gradient(180deg, rgba(5, 3, 1, 0.5) 0%, transparent 30%, transparent 72%, rgba(5, 3, 1, 0.7) 100%);
}

/* ---------- Overlay ---------- */
.overlay { position: absolute; inset: 0; z-index: 10; text-align: center; }
.reveal-line {
  /* o engine anima style.transform (translateY), então a centralização
     não pode depender de transform — usamos grid no container cheio.
     O texto fica no terço superior, acima do produto. */
  position: absolute;
  inset: 0;
  display: grid;
  place-content: start center;
  padding: 11vh 4vw 0;
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
}
.reveal-line h1 { max-width: 92vw; margin: 0 auto; }
/* Na garfada o texto fica abaixo do tomate, no vão entre o tomate e o pote */
#garfada .reveal-line { place-content: start center; padding: 55vh 4vw 0; }
#garfada .reveal-line h1 { font-size: clamp(1.68rem, 5.25vw, 4.48rem); }
.reveal-line h1 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.68rem, 5.25vw, 4.48rem);
  line-height: 1.04;
  color: var(--ink);
  text-shadow: 0 4px 60px rgba(0, 0, 0, 0.85);
}
.reveal-line .tagline {
  margin-top: 14px;
  font-size: clamp(0.8rem, 1.6vw, 1.05rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}

.scroll-hint {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  font-size: 11px;
  letter-spacing: 0.42em;
  color: var(--gold-dim);
  animation: bob 2s ease-in-out infinite;
  transition: opacity 0.4s;
}
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}

/* ---------- Blocos de conteúdo ---------- */
.kicker {
  font-size: 12px;
  letter-spacing: 0.5em;
  color: var(--caramel);
  margin-bottom: 22px;
}
h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.5vw, 2.8rem);
  line-height: 1.1;
}

.manifesto {
  padding: 130px 24px;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(217, 196, 106, 0.07), transparent 65%),
    var(--bg);
}
.manifesto-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.manifesto-img {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(217, 196, 106, 0.25);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.manifesto-img img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 1s ease;
}
.manifesto-img:hover img { transform: scale(1.04); }
.manifesto-txt { text-align: left; }
.manifesto-h { margin-bottom: 6px; }   /* "Quem somos" — título grande */
.manifesto-tagline {
  text-align: center;
  max-width: 900px;
  margin: 74px auto 0;
  line-height: 1.12;
}
/* selos artesanais no lugar dos números — altura uniforme + zoom no hover */
.selos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(44px, 7.5vw, 104px);
  margin-top: 66px;
  flex-wrap: wrap;
}
.selos img {
  height: clamp(156px, 20.4vw, 198px);   /* mesma ALTURA para todos (+20% do original) */
  width: auto;
  display: block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.4s ease;
  transform-origin: center;
  will-change: transform;
}
.selos img:hover {
  transform: scale(1.75);              /* amplia ao passar o mouse (p/ ler) */
  z-index: 5;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.6));
}
.manifesto .lead {
  max-width: 520px;
  margin: 26px 0 0;
  font-size: 1.15rem;
  line-height: 1.85;
  color: rgba(243, 234, 216, 0.82);
}
.stats {
  display: flex;
  justify-content: center;
  gap: clamp(36px, 8vw, 90px);
  margin: 80px auto 0;
  flex-wrap: wrap;
}
.stat { display: grid; gap: 6px; }
.stat-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.54rem, 3.5vw, 2.52rem);
  color: var(--gold);
}
.stat-label {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(243, 234, 216, 0.55);
}

/* ---------- Produtos ---------- */
.produtos {
  padding: 140px 24px 160px;
  text-align: center;
  background: var(--bg-2);
}
/* divisor do título com a silhueta da onça */
.title-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
}
.tdiv-line {
  width: var(--tdiv-w, 60px);   /* estende conforme o scroll (via JS) */
  max-width: 44vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 196, 106, 0.65), transparent);
  will-change: width;
}
.tdiv-onca { height: 22px; width: auto; opacity: 0.9; flex: none; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 460px));
  justify-content: center;
  gap: 42px;
  margin-top: 70px;
}
.card {
  background: #0d0a07;
  border: 1px solid rgba(217, 196, 106, 0.22);
  padding: 30px 26px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.68), 0 6px 18px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.card:hover {
  transform: translateY(-8px);
  border-color: rgba(217, 196, 106, 0.55);
  box-shadow: 0 46px 96px rgba(0, 0, 0, 0.78), 0 10px 26px rgba(0, 0, 0, 0.6);
}

/* Fundo da "janela" por produto — cor + textura de couro (ruído SVG em soft-light) */
.card:nth-child(1) {
  background-color: #35171a;                         /* bordô / vinho */
  background-image:
    radial-gradient(115% 118% at 50% 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.62) 100%),
    radial-gradient(135% 100% at 50% 12%, rgba(158, 58, 58, 0.34), rgba(0,0,0,0) 55%),
    radial-gradient(120% 120% at 50% 112%, rgba(0,0,0,0.6), rgba(0,0,0,0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-blend-mode: normal, normal, normal, soft-light;
}
.card:nth-child(2) {
  background-color: #2c2043;                          /* lilás / roxo */
  background-image:
    radial-gradient(115% 118% at 50% 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.6) 100%),
    radial-gradient(135% 100% at 50% 12%, rgba(158, 118, 196, 0.32), rgba(0,0,0,0) 55%),
    radial-gradient(120% 120% at 50% 112%, rgba(0,0,0,0.58), rgba(0,0,0,0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-blend-mode: normal, normal, normal, soft-light;
}

/* Faixa superior: título + ingredientes principais */
.card-head { min-height: 98px; }
.card h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.1;
  color: var(--gold-strong);
  transform: scale(1.32);            /* maior no estado inicial */
  transform-origin: 50% 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.card:hover h3 { transform: scale(1); }   /* reduz, abrindo espaço p/ a descrição */
.card-sub {
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--caramel);
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.55s ease 0.05s;
}
.card:hover .card-sub { opacity: 1; }

/* Faixa central: pote reduzido + ingredientes flutuantes */
.card-stage {
  position: relative;
  height: 250px;
  margin: 12px 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.stage-jar {
  position: relative;
  z-index: 2;
  height: 220px;
  width: auto;
  max-width: 92%;
  object-fit: contain;
  transform: translateY(4px) scale(1.2);   /* grande no estado inicial, mas sem invadir o rodapé */
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.55));
  transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.5, 1);
}
/* Tamanho POR CARD no estado inicial: os PNGs têm padding diferente (o pote do
   tomate ocupa 92% da imagem, o da caponata 96%), então o tomate renderizava menor.
   Escalas ajustadas p/ igualar o pote visível dos dois (~279px de altura, já com
   +10%) e alinhá-los pela base (~14px de folga acima do rodapé). Vêm ANTES da regra
   de :hover para que o hover vença por ordem de origem (mesma especificidade). */
.card:nth-child(1) .stage-jar { transform: translateY(0px)  scale(1.375); }   /* Tomate Seco */
.card:nth-child(2) .stage-jar { transform: translateY(-2px) scale(1.322); }   /* Caponata */
.card:hover .stage-jar { transform: translateY(0) scale(1); }   /* reduz e sobe ao passar o mouse */

.float-item {
  position: absolute;
  z-index: 1; /* atrás do pote (z-index 2) — emergem de trás dele */
  height: auto;
  opacity: 0;
  transform: translate(var(--ex, 0), var(--ey, 0)) scale(0.4);
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
}
/* posição FINAL + deslocamento inicial (--ex/--ey = de trás do pote) + tamanho (+50%) */
/* Cada ingrediente entra ~20% atrás do pote (80% à mostra), z-index 1 = atrás do frasco.
   Posições por card porque os potes têm larguras diferentes (Tomate ~145px, Caponata ~185px). */
.float-item { width: 116px; }
/* Posições relativas ao CENTRO do palco (calc 50% ± px) — robustas à largura do card,
   então os ingredientes ficam SEMPRE parcialmente atrás do pote. Pote (hover): meia-largura
   ~72px (Tomate) / ~92px (Caponata). Valores negativos = à esquerda do centro. */
/* ---- Tomate Seco (1º card): ~30px atrás do pote ---- */
.card:nth-child(1) .fi-1    { top: 8%;     left: calc(50% - 156px); --ex: 95px;   --ey: 55px;  }
.card:nth-child(1) .fi-3    { bottom: 8%;  left: calc(50% - 156px); --ex: 95px;   --ey: -50px; }
.card:nth-child(1) .fi-over { bottom: 10%; left: calc(50% + 40px);  z-index: 1; --ex: -80px; --ey: -45px; }
/* ---- Caponata (2º card): ingredientes mais para o centro (~44px atrás) ---- */
.card:nth-child(2) .fi-1 { top: 8%;    left: calc(50% - 164px); --ex: 100px;  --ey: 58px;  }
.card:nth-child(2) .fi-2 { top: 40%;   left: calc(50% + 48px);  --ex: -100px; --ey: -10px; }
.card:nth-child(2) .fi-3 { bottom: 6%; left: calc(50% - 164px); --ex: 100px;  --ey: -50px; }
.card:hover .fi-1    { animation: emerge 0.6s cubic-bezier(0.34,1.56,0.64,1) both, float-bob 4.4s ease-in-out 0.6s infinite; }
.card:hover .fi-2    { animation: emerge 0.6s cubic-bezier(0.34,1.56,0.64,1) both, float-bob 5.0s ease-in-out 0.7s infinite; }
.card:hover .fi-3    { animation: emerge 0.6s cubic-bezier(0.34,1.56,0.64,1) both, float-bob 4.7s ease-in-out 0.65s infinite; }
.card:hover .fi-over { animation: emerge 0.55s cubic-bezier(0.34,1.56,0.64,1) both, float-bob 4.5s ease-in-out 0.55s infinite; }

/* emerge: sai de trás do pote (centro) para a posição final, crescendo */
@keyframes emerge {
  0%   { opacity: 0; transform: translate(var(--ex,0), var(--ey,0)) scale(0.4); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
/* float-bob: flutuação suave na posição final (renomeado p/ não colidir com o bob do scroll-hint) */
@keyframes float-bob {
  0%, 100% { transform: translate(0, 0) rotate(-3deg) scale(1); }
  50%      { transform: translate(0, -12px) rotate(3deg) scale(1); }
}
/* TOUCH (celular/tablet): não existe :hover.
   Estado inicial = título/pote grandes e ingredientes escondidos (igual ao desktop parado);
   o rodapé (preço + botão) fica 100% VISÍVEL e com um leve pulso, sinalizando que é clicável.
   Ao TOCAR no card, revela os ingredientes flutuando (igual ao hover do desktop). */
@media (hover: none) {
  .card-foot { opacity: 1; }
  .foot-cart { animation: soft-pulse 2.6s ease-in-out infinite; }
  .card.revealed h3 { transform: scale(1); }
  .card.revealed .card-sub { opacity: 1; }
  .card.revealed .stage-jar { transform: translateY(0) scale(1); }
  .card.revealed .float-item { opacity: 1; }
  .card.revealed .fi-1    { animation: emerge 0.6s cubic-bezier(0.34,1.56,0.64,1) both, float-bob 4.4s ease-in-out 0.6s infinite; }
  .card.revealed .fi-2    { animation: emerge 0.6s cubic-bezier(0.34,1.56,0.64,1) both, float-bob 5.0s ease-in-out 0.7s infinite; }
  .card.revealed .fi-3    { animation: emerge 0.6s cubic-bezier(0.34,1.56,0.64,1) both, float-bob 4.7s ease-in-out 0.65s infinite; }
  .card.revealed .fi-over { animation: emerge 0.55s cubic-bezier(0.34,1.56,0.64,1) both, float-bob 4.5s ease-in-out 0.55s infinite; }
}
@keyframes soft-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 196, 106, 0); }
  50%      { box-shadow: 0 0 16px 0 rgba(217, 196, 106, 0.32); }
}
/* Acessibilidade: quem prefere movimento reduzido não vê animação — os ingredientes
   já ficam na posição final e o pulso do botão é desligado. Precisa vir DEPOIS do
   bloco (hover:none) p/ vencer o soft-pulse por ordem de origem (mesma especificidade). */
@media (prefers-reduced-motion: reduce) {
  .card:hover .float-item,
  .card.revealed .float-item { animation: none; opacity: 1; transform: translate(0, 0) scale(1); }
  .foot-cart { animation: none; }
}

/* Faixa inferior: peso + adicionar ao carrinho */
.card-foot {
  margin-top: auto;
  display: flex;
  gap: 12px;
  align-items: stretch;
  position: relative;   /* fica ACIMA do frasco (z-index 2) p/ a sombra do pote não sujar o botão */
  z-index: 2;
  transition: opacity 0.55s ease 0.05s;
}
/* Desktop (mouse): prévia SUAVE/transparente do rodapé (peso + botão comprar) já em
   repouso — o cliente vê que o botão existe e é clicável sem precisar passar o mouse;
   ao passar o mouse, revela por completo. Em telas de toque o rodapé fica 100% visível
   (bloco @media (hover: none) acima). Os dois modos são exclusivos → sem depender de ordem. */
@media (hover: hover) {
  .card-foot { opacity: 0.4; }
  .card:hover .card-foot { opacity: 1; }
}
.foot-peso {
  border: 1px solid rgba(217, 196, 106, 0.4);
  background: #1c130a;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
}
.foot-peso span { font-size: 9px; letter-spacing: 0.2em; color: var(--gold-dim); }
.foot-peso strong { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--gold); }
.foot-cart {
  flex: 1;
  border: 1px solid rgba(217, 196, 106, 0.5);
  background: #1c130a;
  color: var(--gold-strong);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  font-family: var(--sans);
  text-decoration: none;
  transition: background 0.35s ease, color 0.35s ease;
}
.foot-cart:hover { background: var(--gold); color: #14100a; }
.cart-txt { font-size: 10px; letter-spacing: 0.16em; }
.cart-price { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; }

/* ---------- Editorial: a garfada ---------- */
.editorial {
  padding: 140px 24px;
  background:
    radial-gradient(70% 60% at 78% 40%, rgba(185, 141, 95, 0.14), transparent 60%),
    var(--bg);
}
.editorial-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 70px;
  align-items: center;
}
.editorial-img {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(217, 196, 106, 0.28);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.editorial-img img {
  width: 100%;
  display: block;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform 1s ease;
}
.editorial-img:hover img { transform: scale(1.04); }
.editorial-txt h2 { margin-bottom: 10px; }
.editorial-txt p:not(.kicker) {
  margin-top: 24px;
  line-height: 1.85;
  color: rgba(243, 234, 216, 0.82);
  font-size: 1.1rem;
}
.editorial-note {
  color: var(--gold) !important;
  font-size: 0.98rem !important;
  letter-spacing: 0.02em;
}

/* ---------- À mesa: foto lifestyle ---------- */
.lifestyle {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: end;
  justify-items: center;
  text-align: center;
  overflow: hidden;
  background: #0b0906 url("assets/lifestyle-mesa.jpg") center / cover no-repeat;
}
.lifestyle-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,9,6,0.32) 0%, transparent 26%, rgba(11,9,6,0.28) 52%, rgba(11,9,6,0.9) 100%);
}
.lifestyle-txt {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 24px 64px;
}
.lifestyle-txt h2 {
  margin-bottom: 20px;
  font-size: clamp(1.4rem, 3.5vw, 2.8rem);
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.7);
}
.lifestyle-sub {
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.12rem;
  line-height: 1.8;
  color: rgba(243, 234, 216, 0.9);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}

/* ---------- História ---------- */
.historia { padding: 140px 24px; background: var(--bg); }
.historia-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.historia-img img { width: 100%; display: block; border: 1px solid rgba(217, 196, 106, 0.25); }
.historia-txt p:not(.kicker) {
  margin-top: 24px;
  line-height: 1.85;
  color: rgba(243, 234, 216, 0.8);
}
.historia-txt ul { margin-top: 26px; list-style: none; display: grid; gap: 12px; }
.historia-txt li {
  padding-left: 26px;
  position: relative;
  color: rgba(243, 234, 216, 0.85);
}
.historia-txt li::before {
  content: "◆";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.7em;
  top: 0.45em;
}

/* ---------- Outro / CTA ---------- */
/* ---------- Seção final mesclada: leve p/ a sua mesa + clássicos + CTA ---------- */
.final-produtos {
  padding: 140px 24px 110px;
  background:
    radial-gradient(80% 55% at 50% 100%, rgba(185, 141, 95, 0.12), transparent 62%),
    var(--bg-2);
}
.merge-lead {
  font-size: clamp(1.8rem, 4.8vw, 3.4rem);   /* abertura, maior que "Os clássicos" */
  margin-bottom: clamp(72px, 9vw, 120px);
}
.outro-note {
  margin-top: 88px;
  color: rgba(243, 234, 216, 0.72);
  font-size: 1.1rem;
}
.cta {
  display: inline-block;
  margin-top: 24px;
  padding: 18px 44px;
  border: 1px solid var(--gold);
  color: var(--gold-strong);
  text-decoration: none;
  letter-spacing: 0.3em;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.4s, color 0.4s;
}
.cta:hover { background: var(--gold); color: #14100a; }
.final-footer {
  display: block;
  margin-top: 78px;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: rgba(217, 196, 106, 0.7);
}
/* Foco de teclado visível (acessibilidade) */
.cta:focus-visible,
.hud-right a:focus-visible,
.hud-brand:focus-visible,
.foot-cart:focus-visible {
  outline: 2px solid var(--gold-strong);
  outline-offset: 3px;
}

/* ---------- Reveals ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .hud { padding: 16px 18px; font-size: 10px; letter-spacing: 0.2em; }
  .hud-mid { display: none; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 40px; }
  .manifesto-txt { text-align: center; }
  .manifesto .lead { margin-left: auto; margin-right: auto; }
  .historia-grid { grid-template-columns: 1fr; gap: 42px; }
  .editorial-grid { grid-template-columns: 1fr; gap: 36px; }
  .editorial-img { max-width: 440px; margin: 0 auto; }
  .cinematic { height: 420vh; }
  .lifestyle { background-position: 62% center; }
}