/* ═══════════════════════════════════════════════════════════════════════
   10 ANOS À MESA · sistema de marca do evento (Chef Felipe Caputo)
   Usado pela mini LP, pelo dossiê e pela equipe que replicar a página.

   Layout: uma mesa posta em faixas de luz. O panorama abre, o cardápio
   conduz, e a leitura corre em colunas de ~62 caracteres.
   Cores medidas direto da arte do grid (k-means sobre a peça aprovada).
   Mundo único e claro de propósito: é a luz da manhã da campanha, sem
   versão escura.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* cor */
  --luz: #FBF7F1;          /* fundo: a luz da janela */
  --creme: #F3E7DA;        /* faixas alternadas, papel do cardápio */
  --linho: #E4D2BF;        /* bordas e filetes sobre creme */
  --tinta: #2E1408;        /* títulos: o marrom do "10 anos" */
  --texto: #4A3022;        /* corpo de texto */
  --suave: #7A5E4C;        /* legendas e notas */
  --ouro: #A26B1C;         /* dourado antigo: itálicos grandes e filetes */
  --ouro-escuro: #80510D;  /* dourado legível em texto pequeno (AA) */
  --ouro-claro: #D9AE6A;   /* dourado sobre fundo tinta (8,4:1) */
  --carvalho: #8E5A35;     /* madeira da mesa */
  --brim: #56647A;         /* a dólmã de brim das lembranças */
  --branco: #FFFDFA;

  /* tipo */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-hero: clamp(3.4rem, 8.4vw + 0.5rem, 8.6rem);
  --t-h2: clamp(2.2rem, 4.2vw + 0.6rem, 4.2rem);
  --t-h3: clamp(1.3rem, 1.6vw + 0.8rem, 1.75rem);
  --t-lead: clamp(1.12rem, 0.6vw + 0.95rem, 1.38rem);
  --t-corpo: 1.0625rem;
  --t-rotulo: 0.76rem;

  /* espaço (grade de 8) */
  --e1: 0.5rem; --e2: 1rem; --e3: 1.5rem; --e4: 2rem; --e5: 3rem;
  --e6: 4.5rem; --e7: clamp(4.5rem, 8vw + 1rem, 8.5rem);
  --calha: clamp(1rem, 4vw, 3rem);
  --leitura: 62ch;
  --largo: 1240px;

  /* sombras em camadas (luz suave de janela, nunca um borrão cinza) */
  --sombra-1: 0 1px 1px rgba(46, 20, 8, .04), 0 2px 4px rgba(46, 20, 8, .05),
              0 8px 16px rgba(46, 20, 8, .05);
  --sombra-2: 0 2px 2px rgba(46, 20, 8, .04), 0 8px 16px rgba(46, 20, 8, .06),
              0 24px 48px rgba(46, 20, 8, .08);

  --raio: 14px;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
html:not(.lenis) { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--luz); color: var(--texto);
  font-family: var(--display); font-size: var(--t-corpo); line-height: 1.6;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 30, "WONK" 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { color: var(--tinta); font-family: var(--display); font-weight: 600;
  line-height: 1.04; margin: 0; text-wrap: balance; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }

.rotulo { font-family: var(--ui); font-size: var(--t-rotulo); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-escuro); }
.italico { font-style: italic; color: var(--ouro); font-weight: 500;
  font-variation-settings: "SOFT" 100, "WONK" 0; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* o filete da casa: linha fina com um losango no meio */
.filete { display: flex; align-items: center; gap: .7rem; color: var(--ouro);
  width: min(220px, 60%); margin-inline: auto; }
.filete::before, .filete::after { content: ""; flex: 1; height: 1px;
  background: currentColor; opacity: .7; }
.filete i { width: 6px; height: 6px; background: currentColor;
  transform: rotate(45deg); flex: none; }

/* botões */
.botao { display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem; min-height: 52px; padding: 0 1.6rem; border-radius: 999px;
  font-family: var(--ui); font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .4s var(--curva), box-shadow .4s var(--curva),
              background-color .3s; will-change: transform; }
.botao svg { width: 18px; height: 18px; flex: none; }
.botao-principal { background: var(--tinta); color: var(--branco);
  box-shadow: var(--sombra-1); position: relative; overflow: hidden; }
.botao-principal::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 200, .28) 50%,
              transparent 65%); transform: translateX(-120%);
  transition: transform .9s var(--curva); }
.botao-principal:hover::after { transform: translateX(120%); }
.botao-principal:hover { box-shadow: var(--sombra-2); }
.botao-linha { background: transparent; color: var(--tinta);
  border-color: color-mix(in srgb, var(--tinta) 30%, transparent); }
.botao-linha:hover { background: var(--branco); }

/* selo "nota 10 de 10" */
.selo { display: inline-grid; place-items: center; width: 108px; height: 108px;
  border-radius: 50%; border: 1px solid var(--ouro); color: var(--ouro-escuro);
  text-align: center; font-family: var(--ui); font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.25;
  position: relative; background: var(--branco); }
.selo::before { content: ""; position: absolute; inset: 5px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ouro) 45%, transparent); }
.selo b { display: block; font-family: var(--display); font-size: 1.3rem;
  font-weight: 700; letter-spacing: -0.02em; color: var(--tinta);
  text-transform: none; line-height: 1; margin: .15rem 0; white-space: nowrap; }
.selo > span { display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html:not(.lenis) { scroll-behavior: auto; }
}