/* FoodClone — base.css · reset, tipografia, grid editorial, reduced-motion */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { overflow-x: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--font-body-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 1.1s var(--ease-meditative);
}

/* Papel vivo — noise determinístico sobre toda a página */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: .028;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body.is-night::after { opacity: .045; mix-blend-mode: screen; }

img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; }

::selection { background: color-mix(in oklch, var(--color-tomato) 24%, transparent); }

/* ---------- Contêineres ---------- */
.container        { width: min(var(--container-default), 100% - 3rem); margin-inline: auto; }
.container-narrow { width: min(var(--container-narrow), 100% - 3rem); margin-inline: auto; }
.container-wide   { width: min(var(--container-wide), 100% - 3rem); margin-inline: auto; }

/* ---------- Tipos ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-tomato);
}
.eyebrow.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  text-transform: none;
  letter-spacing: .02em;
  font-size: 1.15rem;
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  font-weight: 800;
  text-wrap: balance;
}
h2 { font-size: var(--font-display-xl); font-weight: 800; }
h3 { font-size: var(--font-display-lg); font-weight: 700; letter-spacing: var(--tracking-tight); }

.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 320;
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'SOFT' 60, 'WONK' 0;
}

.lead {
  font-size: var(--font-body-xl);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  text-wrap: pretty;
  max-width: 36em;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.microcopy {
  font-size: var(--font-body-sm);
  color: var(--text-tertiary);
}

/* ---------- Headline mascarado por linhas ---------- */
.masked-lines .line {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.masked-lines .line > span {
  display: block;
  transform: translateY(110%);
}
html.no-motion .masked-lines .line > span,
html.no-js .masked-lines .line > span { transform: none; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  will-change: transform;
}
.btn-primary {
  background: linear-gradient(160deg,
    color-mix(in oklch, var(--color-tomato) 88%, var(--color-mango)) 0%,
    var(--color-tomato) 45%,
    color-mix(in oklch, var(--color-tomato) 86%, var(--color-espresso)) 100%);
  color: var(--color-cream-light);
  padding: 1.05rem 2.4rem;
  font-size: 1.06rem;
  box-shadow: var(--highlight-top), var(--shadow-tomato-soft);
}
.btn-primary:hover { box-shadow: var(--highlight-top), var(--shadow-tomato-deep); }
.btn-primary:active { transform: scale(.98); }
.btn-secondary {
  padding: 1rem 2.1rem;
  font-size: 1.02rem;
  border: 2px solid var(--border-default);
  color: var(--text-primary);
  background: transparent;
}
.btn-secondary:hover { border-color: var(--color-espresso); background: color-mix(in oklch, var(--color-espresso) 4%, transparent); }
.btn-dark {
  background: linear-gradient(165deg,
    color-mix(in oklch, var(--color-espresso) 86%, var(--color-cream)) 0%,
    var(--color-espresso) 55%,
    color-mix(in oklch, var(--color-espresso) 92%, black) 100%);
  color: var(--color-cream-light);
  padding: .75rem 1.7rem;
  font-size: .98rem;
  box-shadow: var(--highlight-top), var(--shadow-raised);
}
.btn-dark:hover { box-shadow: var(--highlight-top), var(--shadow-floating); }
.btn-dark:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--color-tomato); outline-offset: 3px; }
/* iOS: toque/segurar dava anel (foco de UA) — anel é só pra teclado */
.btn:focus:not(:focus-visible) { outline: none; }
.btn { -webkit-tap-highlight-color: transparent; }

/* ---------- Seções ---------- */
.section { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); position: relative; }
.section-head { max-width: 52rem; }
.section-head .eyebrow { margin-bottom: var(--space-5); display: block; }
.section-head h2 { margin-bottom: var(--space-6); }

/* ---------- Reveals (estado inicial via CSS; animação via JS/GSAP) ---------- */
.reveal { --reveal-y: 28px; }
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(var(--reveal-y)); }
  html.js .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- Selo Taste Match (componente fiel ao produto) ---------- */
.tm-badge {
  display: inline-flex;
  align-items: baseline;
  gap: .55em;
  padding: .42em 1em;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-sage-deep) 13%, transparent);
  border: 1.5px solid color-mix(in oklch, var(--color-sage-deep) 55%, transparent);
  color: var(--color-sage-deep);
  white-space: nowrap;
}
.tm-badge .tm-label {
  font-family: var(--font-body);
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tm-badge .tm-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.06em;
  line-height: 1;
}

/* ---------- Acessibilidade ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

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