/* FoodClone — hero.css · o re-empratar + shader de calor */
/* Topo sempre visível — padrão ARCA (arca.ag, validado no iPhone do
   founder): position fixed + classe .is-scrolled ligando vidro com blur.
   O assassino do vidro aqui era o grain de papel (body::after, z-80,
   mix-blend-mode) POR CIMA do header z-60 — a camada de blend acima
   quebrava a composição do backdrop-filter no WebKit. Header agora em
   z-100, ACIMA do grain, como a Arca (nav z-100, nada por cima). */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding-block: .5rem;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.site-header.is-scrolled {
  background-color: color-mix(in oklch, var(--color-cream) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid color-mix(in oklch, var(--color-espresso) 10%, transparent);
  box-shadow: 0 12px 38px color-mix(in oklch, var(--color-espresso) 10%, transparent);
}
/* a faixa acompanha a noite: vidro escuro, logo vira marca branca */
body.is-night .site-header.is-scrolled {
  background-color: color-mix(in oklch, var(--color-bruise) 60%, transparent);
  border-bottom-color: color-mix(in oklch, var(--color-cream) 12%, transparent);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .35);
}
body.is-night .site-header .brand img { filter: brightness(0) invert(1); }
/* engines sem backdrop-filter: fundo quase sólido */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled { background-color: color-mix(in oklch, var(--color-cream) 96%, transparent); }
  body.is-night .site-header.is-scrolled { background-color: color-mix(in oklch, var(--color-bruise) 94%, transparent); }
}
.site-header .container-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
/* LOGO GRANDE, faixa fina: a altura da faixa é o logo + respiro mínimo */
.site-header .brand img { height: 80px; width: auto; transition: filter .4s ease; }
/* Assinar — espresso QUENTE lapidado (founder 2026-06-12) */
.site-header .btn-dark {
  padding: .75rem 1.7rem;
  font-size: .95rem;
  background: linear-gradient(172deg,
    color-mix(in oklch, var(--color-espresso) 78%, var(--color-tomato)) 0%,
    color-mix(in oklch, var(--color-espresso) 90%, var(--color-tomato)) 48%,
    var(--color-espresso) 100%);
  color: var(--color-cream);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--color-cream) 28%, transparent),
    0 2px 10px color-mix(in oklch, var(--color-espresso) 28%, transparent);
  transition: box-shadow .25s var(--ease-standard), transform .25s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.site-header .btn-dark:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--color-cream) 34%, transparent),
    0 6px 18px color-mix(in oklch, var(--color-tomato) 30%, transparent);
}
/* Ações do header: Entrar (login, discreto) + Assinar (CTA). */
.site-header .site-actions { display: flex; align-items: center; gap: clamp(.85rem, 2vw, 1.5rem); }
.site-header .nav-login {
  font-family: var(--font-display, inherit);
  font-weight: 600;
  font-size: .95rem;
  color: var(--color-espresso);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.site-header .nav-login:hover { color: var(--color-tomato); }
body.is-night .site-header .nav-login { color: var(--color-cream); }
/* resposta tátil: afunda macio, sombra comprime, brasa acende — SEM anel */
.site-header .btn-dark:active {
  transform: translateY(1px) scale(.965);
  transition-duration: .09s;
  outline: none;
  background: linear-gradient(172deg,
    color-mix(in oklch, var(--color-espresso) 68%, var(--color-tomato)) 0%,
    color-mix(in oklch, var(--color-espresso) 86%, var(--color-tomato)) 55%,
    var(--color-espresso) 100%);
  box-shadow:
    inset 0 2px 8px color-mix(in oklch, black 38%, transparent),
    0 1px 4px color-mix(in oklch, var(--color-espresso) 30%, transparent);
}

.hero {
  position: relative;
  /* cap: cheio numa tela normal, mas SEM inflar com vazio em monitores altos */
  min-height: min(100svh, 52rem);
  display: flex;
  align-items: center;
  overflow: clip;
  padding-block: clamp(4.5rem, 9vh, 6rem) clamp(2.75rem, 5vh, 4rem);
}

/* Fundo: shader WebGL com fallback estático multicamada */
.heat-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(110% 90% at 82% 8%,  color-mix(in oklch, var(--color-mango) 14%, transparent) 0%, transparent 55%),
    radial-gradient(90% 80% at 12% 88%,  color-mix(in oklch, var(--color-tomato) 9%, transparent) 0%, transparent 52%),
    radial-gradient(120% 100% at 30% 20%, color-mix(in oklch, var(--color-cream) 94%, white) 0%, var(--color-cream) 70%);
}
.heat-field canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2.4s var(--ease-meditative);
}
.heat-field.is-live canvas { opacity: 1; }
/* Véu de legibilidade sobre o calor */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--color-cream) 30%, transparent) 0%,
    transparent 30%,
    transparent 62%,
    color-mix(in oklch, var(--color-cream) 55%, transparent) 100%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}

.hero-copy .eyebrow.serif { display: block; margin-bottom: var(--space-5); color: var(--color-espresso-mid); }

.hero-h1 {
  font-size: var(--font-display-2xl);
  margin-bottom: var(--space-8);
}
.hero-h1 .line-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 310;
  font-variation-settings: 'SOFT' 70, 'WONK' 1;
  letter-spacing: -0.015em;
  color: var(--color-tomato);
  font-size: .94em;
}

.hero-sub { margin-bottom: var(--space-10); }
.hero-sub strong { color: var(--text-primary); font-weight: 600; }

.hero-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
}
.hero-cta-block { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.hero-cta-block .microcopy { letter-spacing: .01em; }

/* ---------- O prato tipográfico ---------- */
.replate {
  position: relative;
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 28% 16%,
      color-mix(in oklch, var(--color-cream-light) 92%, white) 0%,
      var(--color-cream-light) 58%,
      color-mix(in oklch, var(--color-cream-light) 95%, var(--color-espresso)) 100%);
  box-shadow: var(--highlight-top), var(--shadow-lifted);
  padding: clamp(1.8rem, 2.6vw, 2.8rem);
  max-width: 36rem;
  justify-self: end;
  width: 100%;
}
.replate::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--color-espresso) 14%, transparent),
    transparent 45%,
    color-mix(in oklch, var(--color-espresso) 8%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* O pedido — mini réplica da tela de clonar do app */
.replate-ask {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(circle at 30% 12%,
      color-mix(in oklch, var(--color-cream) 94%, white) 0%,
      var(--color-cream) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-resting);
  padding: .9rem 1rem 1rem;
  display: grid;
  gap: .7rem;
}
.ask-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border-subtle);
}
.ask-logo { height: 22px; width: auto; }
.ask-top-right { display: inline-flex; align-items: center; gap: .45rem; }
.ask-pill {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .08em;
  padding: .32em .85em;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-mango) 22%, var(--color-cream-deep));
  color: var(--color-espresso-mid);
}
.ask-avatar {
  width: 1.45rem; height: 1.45rem;
  border-radius: 50%;
  background: #F2C9B8;
  color: var(--color-tomato);
  font-weight: 700;
  font-size: .72rem;
  display: grid;
  place-items: center;
}
.ask-greet {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: 1.12rem;
  color: var(--color-espresso);
}
.ask-field {
  background: color-mix(in oklch, var(--color-cream-light) 88%, white);
  border: 1px solid var(--border-subtle);
  border-radius: .85rem;
  padding: .75rem .9rem 1.6rem;
  font-size: .95rem;
  color: var(--text-primary);
  box-shadow: inset 0 1px 2px rgba(26,22,18,.04);
}
.ask-field .req-text::after {
  content: '';
  display: inline-block;
  width: 1px; height: 1em;
  background: var(--color-tomato);
  margin-left: 2px;
  vertical-align: -0.15em;
  animation: caret-blink 1.1s steps(1) infinite;
}
.replate-ask.done .req-text::after { display: none; }
@keyframes caret-blink { 50% { opacity: 0; } }
.ask-btn {
  display: block;
  text-align: center;
  padding: .66rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(165deg, #E2603B 0%, var(--color-tomato) 50%, #C2401E 100%);
  color: var(--color-cream-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  box-shadow: inset 0 1px 0 rgba(255,251,244,.35), 0 .3em .6em rgba(217,79,42,.28);
}
.ask-after {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .02em;
  color: var(--text-tertiary);
  margin-block: var(--space-4) var(--space-5);
}

.replate-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1.08;
  padding-bottom: .06em;
  font-size: clamp(2.5rem, 3.6vw, 3.6rem);
  margin-bottom: var(--space-2);
  background: linear-gradient(118deg,
    var(--color-tomato-deep) 0%,
    var(--color-tomato) 38%,
    var(--color-mango-deep) 72%,
    var(--color-tomato) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
  filter: drop-shadow(0 1px 0 rgba(255,251,244,.55));
}
.replate-title .title-word { display: inline-block; }
.replate-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 330;
  font-size: 1.06rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-7, 1.75rem);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

/* Substituições se reescrevendo */
.replate-swaps {
  display: grid;
  gap: .55rem;
  margin-block: var(--space-5) var(--space-6);
}
.swap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25em .6em;
  font-size: .95rem;
}
.swap .swap-old { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--color-tomato) 55%, transparent); text-decoration-thickness: 1.5px; }
.swap .swap-arrow { color: var(--color-tomato); font-family: var(--font-mono); font-size: .85em; }
.swap .swap-new { color: var(--text-primary); font-weight: 600; }

/* Macros rolando + barras com física de mola */
.replate-macros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-cream-deep) 55%, transparent);
  padding: var(--space-5) var(--space-2);
}
.macro {
  text-align: center;
  position: relative;
  padding-inline: var(--space-2);
}
.macro + .macro::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 1px;
  background: var(--border-subtle);
}
.macro .macro-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.macro .macro-unit { font-family: var(--font-mono); font-size: .62em; font-weight: 400; color: var(--text-tertiary); margin-left: 1px; }
.macro .macro-label {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: .3rem;
}
.macro .macro-bar {
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--border-subtle);
  margin-top: .55rem;
  overflow: hidden;
}
.macro .macro-bar i {
  display: block;
  height: 100%;
  width: var(--bar, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-tomato), var(--color-mango));
}

/* O selo assentando como carimbo */
.replate-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.replate-seal { font-size: 1.25rem; position: relative; }
.replate-seal .tm-badge { box-shadow: var(--shadow-resting); background: color-mix(in oklch, var(--color-sage-deep) 15%, var(--color-cream-light)); }
.replate-foot .microcopy { font-size: .78rem; max-width: 15rem; text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  html.js .replate-seal { opacity: 0; }
  html.js .replate-seal.stamped { opacity: 1; }
}

/* (scrollcue removido na v2) */

@media (max-width: 980px) {
  .hero { padding-top: 7.5rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .replate { justify-self: stretch; max-width: none; }
  .site-header { padding-block: .4rem; }
  .site-header .brand img { height: 64px; }
}
@media (max-width: 480px) {
  .replate-macros { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) 0; }
  .macro:nth-child(3)::before { display: none; }
}