/* ============================================================================
   MESA FARTA — Landing Page
   Design system + componentes
   ----------------------------------------------------------------------------
   Para trocar a identidade visual, altere apenas os tokens em :root.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  /* Cores — paleta editorial quente, modo escuro.
     Os nomes seguem a metáfora tinta/papel: --ink continua sendo o texto e
     --paper o fundo. No escuro a tinta é clara e o papel é escuro. */
  --ink:          #f6f1e8;   /* títulos */
  --ink-2:        #d5cbbd;   /* texto corrido */
  --ink-3:        #ab9e91;   /* texto secundário */
  --paper:        #15120e;   /* fundo base — preto quente */
  --paper-2:      #1c1813;   /* seções alternadas */
  --paper-3:      #352d24;   /* bordas / divisores */
  --white:        #221c16;   /* superfícies elevadas (era o branco) */
  /* Texto que precisa ser claro sempre — sobre terracota, sobre foto, sobre
     verde. Antes isso usava --white, que agora é uma superfície escura. */
  --on-dark:      #fffdfa;

  --accent:       #c0562a;   /* terracota — mantido, para preenchimentos */
  /* No escuro o terracota puro mede só 4.1 de contraste como texto, abaixo do
     mínimo. Esta versão clara é para texto e ícones; a de cima segue sendo o
     preenchimento dos botões, onde o texto branco é que precisa contrastar. */
  --accent-text:  #e6844f;
  --accent-2:     #d76c3c;   /* hover — mais claro no escuro */
  --accent-soft:  #3a2117;   /* fundos suaves */
  --forest:       #16201a;   /* verde profundo — seções de contraste */
  --forest-2:     #101710;
  --gold:         #d3ab55;   /* estrelas, detalhes */

  /* Tipografia */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala fluida */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.85rem + 2.6vw, 4.4rem);

  /* Espaçamento / forma */
  --radius:    14px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 40px);

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(23, 19, 16, .06);
  --shadow:    0 14px 40px -12px rgba(23, 19, 16, .16);
  --shadow-lg: 0 34px 70px -22px rgba(23, 19, 16, .28);

  /* Vidro
     A saturação alta é o que faz parecer vidro de verdade e não névoa cinza:
     ela reforça a cor do que está atrás em vez de lavá-la.
     O `inset 0 1px 0` simula a luz batendo na quina superior da peça. */
  --glass-blur:         blur(20px) saturate(180%) brightness(1.3);
  --glass-blur-soft:    blur(14px) saturate(165%) brightness(1.25);
  --glass-bg:           rgba(255, 253, 250, .08);
  --glass-bg-strong:    rgba(255, 253, 250, .13);
  --glass-border:       rgba(255, 255, 255, .18);
  --glass-inset:        inset 0 1px 0 rgba(255, 255, 255, .3);
  /* Variante escura — para vidro sobre imagem/gradiente colorido.
     45% não é estética: abaixo disso o texto branco não alcança 4.5:1
     de contraste sobre o laranja do card de receita. */
  --glass-dark-bg:      rgba(23, 19, 16, .45);
  --glass-dark-border:  rgba(255, 255, 255, .3);
  --glass-dark-inset:   inset 0 1px 0 rgba(255, 255, 255, .22);

  /* Liquid Glass
     Diferença para o vidro simples acima: além do desfoque, tem `brightness`
     (a peça devolve luz, não só filtra) e um conjunto de três brilhos internos
     que simulam a espessura — luz na quina de cima, devolução embaixo e um
     especular difuso no meio. É isso que separa "vidro" de "vidro fosco". */
  /* No escuro o vidro é um véu de luz, não um véu branco: opacidade baixa e
     bordas claras. É onde o efeito mais aparece — sobre fundo escuro dá para
     enxergar de verdade o que passa por trás. */
  --lg-blur:        blur(26px) saturate(200%) brightness(1.35);
  --lg-blur-sm:     blur(18px) saturate(190%) brightness(1.28);
  --lg-bg:          rgba(255, 253, 250, .07);
  --lg-bg-strong:   rgba(255, 253, 250, .12);
  --lg-bg-dark:     rgba(255, 253, 250, .06);
  --lg-border:      rgba(255, 255, 255, .16);
  --lg-border-dark: rgba(255, 255, 255, .12);
  --lg-sheen:
    inset 0 1.5px 1px rgba(255, 255, 255, .34),
    inset 0 -1.5px 1px rgba(255, 255, 255, .09),
    inset 0 0 30px rgba(255, 255, 255, .06);
  --lg-sheen-dark:
    inset 0 1.5px 1px rgba(255, 255, 255, .22),
    inset 0 -1.5px 1px rgba(255, 255, 255, .06),
    inset 0 0 30px rgba(255, 255, 255, .04);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ----------------------------------------------------------------- BASE -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Textura de grão — dá profundidade e tira o aspecto "chapado" */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  background-image: 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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

::selection { background: var(--accent); color: var(--on-dark); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- VIDRO --
   Regra de uso: vidro só entra onde existe algo atrás para refratar
   (gradiente, ilustração, conteúdo rolando por baixo). Sobre fundo chapado
   ele vira uma caixa cinza — por isso os cards de seção seguem sólidos.
   ------------------------------------------------------------------------ */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow), var(--glass-inset);
}

.glass--dark {
  background: var(--glass-dark-bg);
  border-color: var(--glass-dark-border);
  box-shadow: var(--shadow), var(--glass-dark-inset);
  color: var(--on-dark);
}

/* Sem suporte a backdrop-filter (Firefox antigo, WebViews): volta ao sólido,
   senão o texto ficaria sobre um fundo semitransparente ilegível. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--white); }
  .glass--dark { background: rgba(23, 19, 16, .82); }
}

/* Quem pede menos transparência no sistema recebe as peças opacas. */
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass--dark { background: rgba(23, 19, 16, .88); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------------------------------------------------- LIQUID GLASS ------ */
.lg {
  background: var(--lg-bg);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-sheen), 0 18px 44px -16px rgba(23, 19, 16, .3);
}
.lg--strong { background: var(--lg-bg-strong); }

/* Sobre fundo escuro o vidro claro sumiria: aqui a peça é um véu de luz. */
.lg--dark {
  background: var(--lg-bg-dark);
  border-color: var(--lg-border-dark);
  box-shadow: var(--lg-sheen-dark), 0 18px 44px -16px rgba(0, 0, 0, .4);
}

/* Especular deslizante: a faixa de luz que corre na superfície ao passar o
   mouse. É o detalhe que faz a peça parecer molhada em vez de plana. */
.lg--sheen { position: relative; overflow: hidden; isolation: isolate; }
.lg--sheen::after {
  content: '';
  position: absolute;
  top: 0; left: -140%;
  width: 55%; height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, .34) 46%, transparent);
  transform: skewX(-20deg);
  transition: left .85s var(--ease);
}
.lg--sheen:hover::after { left: 160%; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg { background: var(--white); }
  .lg--dark { background: rgba(23, 19, 16, .82); }
}
@media (prefers-reduced-transparency: reduce) {
  .lg, .lg--strong {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .lg--dark {
    background: rgba(23, 19, 16, .88);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ------------------------------------------------- LUZ DE AMBIENTE ------
   Vidro sobre fundo chapado vira caixa cinza. Estes halos são a matéria que
   o vidro atravessa — sem eles não há efeito, só uma superfície leitosa.
   ------------------------------------------------------------------------ */
.amb {
  position: relative;
  overflow: hidden;
  overflow: clip;
}
.amb > * { position: relative; z-index: 1; }
.amb::before,
.amb::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  aspect-ratio: 1;
}
.amb::before {
  top: -6%; left: -10%;
  width: 44vw; max-width: 600px;
  background: radial-gradient(circle, rgba(216, 104, 56, .34), transparent 66%);
  animation: drift 28s ease-in-out infinite;
}
.amb::after {
  bottom: -12%; right: -10%;
  width: 48vw; max-width: 660px;
  background: radial-gradient(circle, rgba(122, 156, 96, .2), transparent 66%);
  animation: drift 34s ease-in-out -12s infinite reverse;
}
/* Variante para seções escuras: luz quente, mais forte, para atravessar. */
.amb--dark::before {
  background: radial-gradient(circle, rgba(224, 112, 62, .42), transparent 66%);
}
.amb--dark::after {
  background: radial-gradient(circle, rgba(211, 171, 85, .28), transparent 66%);
}

/* --------------------------------------------------------------- LAYOUT -- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(72px, 10vw, 130px); }
.section--paper2 { background: var(--paper-2); }
.section--tight { padding-block: clamp(56px, 7vw, 90px); }

.section-head {
  max-width: 660px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.section-head--left { margin-inline: 0; text-align: left; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.section-head:not(.section-head--left) .eyebrow::after {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.h-section { font-size: var(--step-3); }
.h-card { font-size: var(--step-1); }

.lede {
  margin-top: 20px;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-3);
  font-weight: 400;
}
.muted { color: var(--ink-3); }
.small { font-size: var(--step--1); }

/* --------------------------------------------------------------- BOTÕES -- */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn svg { flex: none; }

/* Varredura de luz: uma faixa clara atravessa a peça no hover, como um reflexo
   correndo sobre vidro. É o que dá materialidade sem tirar opacidade. */
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, .38) 45%, transparent);
  transform: skewX(-22deg);
  pointer-events: none;
  transition: left .75s var(--ease);
}
.btn:hover::after { left: 145%; }

/* Verniz superior: gradiente branco no topo simula a luz do ambiente batendo
   na curvatura da peça. */
.btn--primary::before,
.btn--light::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}

/* Vidro tingido. No escuro a lógica inverte: transparência sobre fundo escuro
   ESCURECE a cor, então a base precisa ser mais clara que o terracota da marca.
   Em 90% sobre o preto quente o resultado volta a rgb(184,82,40) — o mesmo tom
   de sempre, com 4.91 de contraste contra o texto branco. */
.btn--primary {
  background: rgba(202, 89, 43, .9);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, .32);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .5),
    inset 0 -1.5px 1px rgba(255, 255, 255, .16),
    inset 0 0 26px rgba(255, 255, 255, .12),
    0 14px 32px -10px rgba(192, 86, 42, .62);
}
.btn--primary:hover {
  background: rgba(228, 108, 58, .92);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .55),
    inset 0 -1.5px 1px rgba(255, 255, 255, .18),
    inset 0 0 26px rgba(255, 255, 255, .14),
    0 20px 40px -12px rgba(192, 86, 42, .7);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn--primary { background: var(--accent); }
  .btn--primary:hover { background: var(--accent-2); }
}
@media (prefers-reduced-transparency: reduce) {
  .btn--primary {
    background: var(--accent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .btn--primary:hover { background: var(--accent-2); }
}

/* Secundário: aqui sim vidro de verdade. Fica sobre os halos do hero e não
   disputa atenção com o CTA principal. */
.btn--ghost {
  background: var(--lg-bg);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  color: var(--ink);
  border-color: var(--lg-border);
  box-shadow: var(--lg-sheen), 0 10px 26px -12px rgba(23, 19, 16, .24);
}
.btn--ghost:hover {
  background: var(--lg-bg-strong);
  border-color: rgba(255, 255, 255, .8);
  transform: translateY(-2px);
  box-shadow: var(--lg-sheen), 0 16px 34px -12px rgba(23, 19, 16, .3);
}

/* CTA do fechamento: aqui a peça é clara de propósito. Num site escuro, um
   botão claro é o maior contraste possível — é o que mais puxa o olho. */
.btn--light {
  background: rgba(255, 253, 250, .9);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  color: var(--forest);
  border-color: var(--lg-border);
  box-shadow: var(--lg-sheen), 0 16px 38px -14px rgba(0, 0, 0, .4);
}
.btn--light:hover {
  background: var(--on-dark);
  transform: translateY(-2px);
  box-shadow: var(--lg-sheen), 0 24px 50px -16px rgba(0, 0, 0, .45);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn--ghost { background: var(--white); }
  .btn--light { background: var(--on-dark); }
}
@media (prefers-reduced-transparency: reduce) {
  .btn--ghost {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .btn--light {
    background: var(--on-dark);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.btn--lg { padding: 21px 44px; font-size: var(--step-1); }
.btn--block { display: flex; width: 100%; }

/* ------------------------------------------------------------- TOPO/NAV -- */
/* Barra de progresso de leitura — página longa, ajuda a dar noção de quanto
   falta. scaleX é animável na GPU, não força reflow a cada scroll. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  pointer-events: none;
  will-change: transform;
}

.announce {
  background: var(--forest);
  color: rgba(255, 253, 250, .92);
  font-size: var(--step--1);
  text-align: center;
  padding: 10px var(--gutter);
  letter-spacing: .01em;
}
.announce strong { color: var(--on-dark); font-weight: 600; }
.announce .dot { opacity: .4; margin-inline: 10px; }

.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(21, 18, 14, .62);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Ao descolar do topo o vidro fica mais denso e ganha os brilhos internos,
   que é o que dá a leitura de "placa flutuando sobre o conteúdo". */
.header.is-stuck {
  background: rgba(21, 18, 14, .78);
  border-bottom-color: rgba(255, 255, 255, .5);
  box-shadow: var(--lg-sheen), 0 12px 34px -22px rgba(23, 19, 16, .6);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header, .header.is-stuck { background: var(--paper); }
}
@media (prefers-reduced-transparency: reduce) {
  .header, .header.is-stuck {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap;
}
.brand__mark { width: 34px; height: 34px; flex: none; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav a {
  position: relative;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-2);
  transition: color .2s ease;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .32s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.header .btn { padding: 12px 24px; font-size: var(--step--1); }

.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  background: var(--lg-bg);
  -webkit-backdrop-filter: var(--lg-blur-sm);
  backdrop-filter: var(--lg-blur-sm);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-sheen), 0 6px 18px -8px rgba(23, 19, 16, .22);
  transition: background-color .25s ease, transform .25s var(--ease);
}
.burger:active { transform: scale(.94); }
.burger span {
  position: relative;
  width: 17px; height: 1.5px;
  background: var(--ink);
  transition: background .2s ease;
}
.burger span::before, .burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 17px; height: 1.5px;
  background: var(--ink);
  transition: transform .32s var(--ease);
}
.burger span::before { top: -5.5px; }
.burger span::after  { top: 5.5px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { transform: translateY(5.5px) rotate(45deg); }
.burger.is-open span::after  { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 0 var(--gutter);
  /* Vidro sobre a própria página: a pessoa continua vendo onde estava,
     o que deixa o menu com cara de camada e não de outra tela. */
  background: rgba(21, 18, 14, .84);
  -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(1.06);
  backdrop-filter: blur(30px) saturate(200%) brightness(1.06);
  box-shadow: var(--lg-sheen);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-nav { background: var(--paper); }
}
@media (prefers-reduced-transparency: reduce) {
  .mobile-nav {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
/* :not(.btn) para o CTA do menu não herdar a serifada nem a linha divisória */
.mobile-nav a:not(.btn) {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--ink);
  padding-block: 12px;
  border-bottom: 1px solid var(--paper-3);
}
.mobile-nav .btn { margin-top: 28px; }
.mobile-nav__close {
  position: absolute;
  top: 22px; right: var(--gutter);
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  background: var(--lg-bg);
  -webkit-backdrop-filter: var(--lg-blur-sm);
  backdrop-filter: var(--lg-blur-sm);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-sheen), 0 6px 18px -8px rgba(23, 19, 16, .22);
  transition: transform .25s var(--ease);
}
.mobile-nav__close:active { transform: scale(.94); }

/* ----------------------------------------------------------------- HERO -- */
.hero {
  position: relative;
  padding-block: clamp(52px, 7vw, 96px) clamp(64px, 8vw, 110px);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -20%; right: -12%;
  width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(216, 104, 56, .3), transparent 62%);
  pointer-events: none;
  animation: drift 28s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -18%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(122, 156, 96, .18), transparent 62%);
  pointer-events: none;
  animation: drift 34s ease-in-out -12s infinite reverse;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
}
.hero h1 {
  font-size: var(--step-4);
  letter-spacing: -.035em;
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-text);
}
.hero__text {
  margin-top: 24px;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 30ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 38px;
}
.hero__reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 24px;
  font-size: var(--step--1);
  color: var(--ink-3);
}
.hero__reassure li { display: flex; align-items: center; gap: 7px; }
.hero__reassure svg { color: var(--accent-text); flex: none; }

.proof {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--paper-3);
}
.avatars { display: flex; }
.avatars span {
  width: 40px; height: 40px;
  margin-right: -12px;
  border-radius: 50%;
  border: 2.5px solid var(--paper);
  display: grid;
  place-items: center;
  font-size: .82rem;
  font-weight: 600;
  color: var(--on-dark);
}
.avatars span:nth-child(1) { background: #8a5a3c; }
.avatars span:nth-child(2) { background: #5f6b52; }
.avatars span:nth-child(3) { background: #a8603a; }
.avatars span:nth-child(4) { background: #4a5240; }
.avatars span:last-child { margin-right: 0; }
.proof__stars { color: var(--gold); letter-spacing: 2px; font-size: .9rem; }
.proof__text { font-size: var(--step--1); color: var(--ink-3); line-height: 1.45; }
.proof__text strong { color: var(--ink); font-weight: 600; }

/* Visual do hero */
.hero__visual { position: relative; }
.hero__plate {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  filter: drop-shadow(0 40px 60px rgba(23, 19, 16, .22));
  animation: float 7s ease-in-out infinite;
}
/* --px/--py vêm do parallax de mouse (script.js). Entram dentro da keyframe
   porque animação e parallax disputariam a mesma propriedade `transform`. */
@keyframes float {
  0%, 100% { transform: translate(var(--px, 0px), var(--py, 0px)); }
  50%      { transform: translate(var(--px, 0px), calc(var(--py, 0px) - 14px)); }
}

.float-card {
  position: absolute;
  z-index: 2;
  /* Ficam por cima do prato e dos halos do hero — é o melhor lugar da página
     para vidro, porque há cor de verdade atrás para atravessar. */
  /* Vidro escuro aqui, e não o claro do resto: estes cards ficam por cima do
     prato, que é a peça mais clara da página. Com véu claro o texto sumia. */
  background: rgba(18, 15, 11, .58);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  backdrop-filter: blur(26px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
  box-shadow: var(--lg-sheen-dark), 0 16px 40px -14px rgba(0, 0, 0, .55);
  padding: 15px 19px;
  display: flex;
  align-items: center;
  gap: 13px;
}
.float-card__icon {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .float-card { background: var(--white); }
}
@media (prefers-reduced-transparency: reduce) {
  .float-card {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.float-card__num {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--accent-text);
  line-height: 1;
}
.float-card__label {
  font-size: .78rem;
  line-height: 1.3;
  color: var(--ink-3);
  max-width: 11ch;
}
.float-card--a { bottom: 12%; left: -4%; animation: float 7s ease-in-out .8s infinite; }
.float-card--b { top: 8%; right: -2%; animation: float 7s ease-in-out 1.6s infinite; }
/* Transição só no parallax; a flutuação segue pela animação. */
.float-card, .hero__plate { transition: --px .4s ease, --py .4s ease; }
.float-card--b .float-card__label { max-width: 13ch; }
.float-card__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(230, 132, 79, .18);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  flex: none;
}

/* ------------------------------------------------------------ FAIXA LOGO -- */
.strip {
  background: var(--forest);
  color: var(--on-dark);
  padding-block: clamp(38px, 5vw, 56px);
}
.strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  text-align: center;
}
/* Lâminas de vidro sobre o verde: o número deixa de flutuar solto e ganha
   uma peça própria, com a luz de ambiente atravessando por trás. */
.strip__grid > * {
  padding: clamp(18px, 2vw, 26px) 12px;
  border-radius: 18px;
  background: var(--lg-bg-dark);
  -webkit-backdrop-filter: var(--lg-blur-sm);
  backdrop-filter: var(--lg-blur-sm);
  border: 1px solid var(--lg-border-dark);
  box-shadow: var(--lg-sheen-dark);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .strip__grid > * { background: rgba(255, 253, 250, .08); }
}
@media (prefers-reduced-transparency: reduce) {
  .strip__grid > * {
    background: rgba(255, 253, 250, .1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.strip__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--on-dark);
  line-height: 1;
  /* Trava a largura durante a contagem: sem isso o rótulo abaixo dança
     enquanto o número cresce de 1 para 3 dígitos. */
  font-variant-numeric: tabular-nums;
}
.strip__unit { font-size: .55em; }
.strip__lbl {
  margin-top: 8px;
  font-size: var(--step--1);
  /* .72 e não .62: sobre a lâmina de vidro o valor anterior media 4.49 de
     contraste, um centésimo abaixo do mínimo AA. */
  color: rgba(255, 253, 250, .72);
  letter-spacing: .02em;
}

/* ----------------------------------------------------------- PROBLEMA --- */
.pains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.pain {
  position: relative;
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pain:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.pain__icon {
  width: 50px; height: 50px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.pain h3 { font-size: var(--step-1); margin-bottom: 9px; }
.pain p { font-size: var(--step--1); color: var(--ink-3); line-height: 1.6; }

/* ------------------------------------------------------- ANTES / DEPOIS -- */
.shift {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: stretch;
}
.shift__col {
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.4vw, 44px);
}
.shift__col--before {
  background: var(--paper-2);
  border: 1px solid var(--paper-3);
}
.shift__col--after {
  background: var(--forest);
  color: rgba(255, 253, 250, .82);
  box-shadow: var(--shadow-lg);
}
.shift__col--after h3 { color: var(--on-dark); }
.shift__tag {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.shift__col--before .shift__tag { color: var(--ink-3); }
.shift__col--after  .shift__tag { color: var(--gold); }
.shift h3 { font-size: var(--step-2); margin-bottom: 22px; }
.shift ul { display: grid; gap: 14px; }
.shift li {
  display: flex;
  gap: 12px;
  font-size: var(--step--1);
  line-height: 1.55;
}
.shift li svg { flex: none; margin-top: 3px; }
.shift__col--before li svg { color: #a8988a; }
.shift__col--after  li svg { color: var(--gold); }

.shift__arrow {
  display: grid;
  place-items: center;
  color: var(--paper-3);
}

/* ------------------------------------------------------------ CONTEÚDO -- */
.cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 20px;
}
.cat {
  position: relative;
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease;
}
.cat::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.cat:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.cat:hover::before { transform: scaleX(1); }
.cat__n {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--accent-text);
  margin-bottom: 16px;
  display: block;
}
.cat__icon { color: var(--forest); margin-bottom: 18px; }
.cat h3 { font-size: var(--step-1); margin-bottom: 9px; }
.cat p { font-size: var(--step--1); color: var(--ink-3); line-height: 1.6; }
.cat__count {
  display: inline-block;
  margin-top: 16px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   AMOSTRA DE RECEITAS — carrossel com Liquid Glass
   --------------------------------------------------------------------------
   O vidro precisa de algo colorido atrás para refratar. Como a seção tem
   fundo chapado, os halos de .showcase são o que dá matéria ao efeito —
   sem eles os cards viram caixas cinzas.
   ========================================================================== */

/* ---- Vidro líquido: receita base ----
   Três camadas fazem a leitura de "vidro" e não de "vidro fosco":
   1. backdrop-filter com saturação e brilho — reforça a cor de trás;
   2. luz na quina superior (inset claro no topo) e devolução embaixo;
   3. brilho especular interno, difuso, simulando a espessura da peça. */
.lglass {
  background: var(--lg-bg);
  -webkit-backdrop-filter: blur(26px) saturate(200%) brightness(1.07);
  backdrop-filter: blur(26px) saturate(200%) brightness(1.07);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .9),
    inset 0 -1.5px 1px rgba(255, 255, 255, .25),
    inset 0 0 30px rgba(255, 255, 255, .18),
    0 18px 44px -16px rgba(23, 19, 16, .3);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lglass { background: var(--white); }
}
@media (prefers-reduced-transparency: reduce) {
  .lglass {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------------------------------------------------------- VITRINE ----- */
.showcase {
  position: relative;
  /* Os halos passam das bordas de propósito, para o degradê não ter fim
     visível. Sem recorte eles alargavam a página em ~55px. `clip` em vez de
     `hidden` porque não cria um contêiner de rolagem. */
  overflow: hidden;
  overflow: clip;
}

/* Halos difusos: a fonte de cor que o vidro atravessa. */
.showcase::before,
.showcase::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
.showcase::before {
  top: 8%; left: -6%;
  width: 46vw; max-width: 620px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(220, 108, 58, .36), transparent 66%);
  animation: drift 26s ease-in-out infinite;
}
.showcase::after {
  bottom: 2%; right: -8%;
  width: 50vw; max-width: 680px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(122, 156, 96, .24), transparent 66%);
  animation: drift 32s ease-in-out -11s infinite reverse;
}

.showcase__head,
.showcase__foot,
.carousel { position: relative; z-index: 1; }

.showcase__line {
  font-size: clamp(2.2rem, 8vw, 6.2rem);
  line-height: .94;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink);
}
.showcase__line--top    { text-align: left; }
.showcase__line--bottom { text-align: right; color: var(--accent-text); }

/* --------------------------------------------------------- CARROSSEL --- */
.carousel {
  position: relative;
  margin-block: clamp(20px, 3vw, 40px);
  padding-inline: clamp(0px, 5vw, 84px);
}

.carousel__viewport { overflow: hidden; }

.carousel__track {
  display: flex;
  /* --n é o índice atual, escrito pelo script. */
  transform: translateX(calc(var(--n, 0) * -100%));
  transition: transform .62s var(--ease);
  will-change: transform;
}
.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  /* padding para a sombra do card não ser cortada pelo overflow do viewport */
  padding: 10px 12px 24px;
}

/* --------------------------------------------------------- SETAS ------- */
.carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  translate: 0 -50%;
  width: clamp(46px, 5vw, 58px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s ease;

  background: var(--lg-bg);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-sheen), 0 10px 26px -8px rgba(23, 19, 16, .28);
}
.carousel__nav:hover {
  background: var(--lg-bg-strong);
  transform: scale(1.07);
}
.carousel__nav:active { transform: scale(.96); }
.carousel__nav--prev { left: 0; }
.carousel__nav--next { right: 0; }
/* Escondida nas pontas — some de vez, não fica desabilitada. */
.carousel__nav[hidden] { display: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .carousel__nav { background: var(--white); }
}
@media (prefers-reduced-transparency: reduce) {
  .carousel__nav {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.carousel__counter {
  margin-top: 6px;
  text-align: center;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.carousel__counter span:first-child { color: var(--accent-text); }
.carousel__sep { margin-inline: 8px; opacity: .5; }

/* ------------------------------------------------------ CARD (rcard) --- */
.rcard {
  --rx: 0deg;
  --ry: 0deg;
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  border-radius: clamp(20px, 2.2vw, 30px);
  overflow: hidden;

  /* vidro líquido */
  background: var(--lg-bg);
  -webkit-backdrop-filter: blur(26px) saturate(200%) brightness(1.07);
  backdrop-filter: blur(26px) saturate(200%) brightness(1.07);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .9),
    inset 0 -1.5px 1px rgba(255, 255, 255, .25),
    inset 0 0 30px rgba(255, 255, 255, .18),
    0 22px 50px -18px rgba(23, 19, 16, .3);

  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--ease);
  will-change: transform;
}
.rcard:hover { transition: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rcard { background: var(--white); }
}
@media (prefers-reduced-transparency: reduce) {
  .rcard {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---- Foto ---- */
.rcard__media {
  position: relative;
  overflow: hidden;
  background: var(--forest-2);
  min-height: 240px;
}
.rcard__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 58%;
  animation: kenburns 26s ease-in-out infinite;
}
@keyframes kenburns {
  0%, 100% { transform: scale(1.05) translate(0, 0); }
  50%      { transform: scale(1.13) translate(-2%, -1.6%); }
}
/* Reflexo de luz atravessando a foto ao passar o mouse. */
.rcard__media::after {
  content: '';
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, .34) 46%, transparent);
  transform: skewX(-20deg);
  transition: left .95s var(--ease);
}
.rcard:hover .rcard__media::after { left: 160%; }

.rcard__badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: rgba(23, 19, 16, .45);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
  color: var(--on-dark);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
}

/* ---- Conteúdo ---- */
.rcard__body { padding: clamp(22px, 2.6vw, 34px); }

.rcard__body h3 {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.08;
  margin-bottom: 14px;
}

.rcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(23, 19, 16, .12);
  font-size: var(--step--1);
  color: var(--ink-3);
}
.rcard__meta li { display: flex; align-items: center; gap: 7px; }
.rcard__meta svg { color: var(--accent-text); flex: none; }

.rcard__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}

.rcard h4 {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 11px;
}

.rcard__ing { display: grid; gap: 8px; }
.rcard__ing li {
  display: flex;
  gap: 9px;
  font-size: var(--step--1);
  line-height: 1.45;
}
.rcard__ing li::before {
  content: '';
  width: 5px; height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.rcard__steps { display: grid; gap: 12px; counter-reset: s; }
.rcard__steps li {
  display: flex;
  gap: 11px;
  font-size: var(--step--1);
  line-height: 1.45;
  counter-increment: s;
}
.rcard__steps li::before {
  content: counter(s);
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--on-dark);
  font-size: .68rem;
  font-weight: 600;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

/* ---- Cascata na troca de card ----
   Animação (e não transição) para reiniciar toda vez que .is-active volta. */
.rcard__anim { opacity: 0; }
.carousel__slide.is-active .rcard__anim {
  animation: cascata .6s var(--ease) both;
  animation-delay: calc(.12s + var(--i, 0) * .09s);
}
@keyframes cascata {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- RESPONSIVO -- */
@media (max-width: 980px) {
  .rcard { grid-template-columns: 1fr; }
  .rcard__media { aspect-ratio: 16 / 10; min-height: 0; }
}

@media (max-width: 760px) {
  /* Empilhado o card fica alto e afastaria demais as duas linhas do título:
     aqui elas se juntam no topo e o carrossel desce. */
  .showcase { display: flex; flex-direction: column; }
  .showcase__head { order: 1; }
  .showcase__foot { order: 2; margin-top: -.12em; }
  .carousel      { order: 3; }
  .showcase__line--bottom { text-align: left; }

  .carousel { padding-inline: 0; }
  .carousel__slide { padding-inline: 4px; }
  /* Setas descem para baixo do card, senão cobririam o conteúdo. */
  .carousel__nav {
    top: auto;
    bottom: -6px;
    translate: 0 0;
  }
  .carousel__nav--prev { left: 12px; }
  .carousel__nav--next { right: 12px; }
  .carousel__counter { margin-top: 14px; }
}

@media (max-width: 560px) {
  .rcard__cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
  .rcard { transform: none; will-change: auto; }
  .rcard__photo { animation: none; }
  .rcard__anim { opacity: 1; }
  .carousel__slide.is-active .rcard__anim { animation: none; }
}
/* ------------------------------------------------------------- PASSOS --- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(26px, 3.5vw, 48px);
  counter-reset: step;
}
.step { position: relative; counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6vw, 5rem);
  font-weight: 600;
  line-height: .8;
  color: var(--paper-3);
  display: block;
  margin-bottom: 18px;
}
.step h3 { font-size: var(--step-1); margin-bottom: 10px; }
.step p { font-size: var(--step--1); color: var(--ink-3); line-height: 1.6; }

/* -------------------------------------------------------- DEPOIMENTOS --- */
.notice {
  display: flex;
  gap: 12px;
  max-width: 660px;
  margin: 0 auto clamp(34px, 4vw, 50px);
  padding: 15px 20px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-2);
}
.notice svg { flex: none; color: var(--accent-text); margin-top: 3px; }
.notice strong { color: var(--ink); }

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
  align-items: start;
}
.quote {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);

  background: var(--lg-bg-strong);
  -webkit-backdrop-filter: var(--lg-blur-sm);
  backdrop-filter: var(--lg-blur-sm);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-sheen), 0 14px 36px -16px rgba(23, 19, 16, .24);
}
.quote::after {
  content: '';
  position: absolute;
  top: 0; left: -140%;
  width: 55%; height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, .3) 46%, transparent);
  transform: skewX(-20deg);
  transition: left .85s var(--ease);
}
.quote:hover::after { left: 160%; }
.quote:hover {
  transform: translateY(-5px);
  box-shadow: var(--lg-sheen), 0 26px 54px -18px rgba(23, 19, 16, .3);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .quote { background: var(--white); }
}
@media (prefers-reduced-transparency: reduce) {
  .quote {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.quote__mark {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: .6;
  color: var(--accent-text);
  opacity: .22;
  display: block;
  margin-bottom: 6px;
}
.quote__stars { color: var(--gold); letter-spacing: 3px; font-size: .88rem; margin-bottom: 14px; }
.quote p {
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 24px;
}
.quote__who { display: flex; align-items: center; gap: 13px; }
.quote__av {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: .95rem;
  color: var(--on-dark);
  background: var(--forest);
  flex: none;
}
.quote__name { font-size: var(--step--1); font-weight: 600; color: var(--ink); line-height: 1.3; }
.quote__role { font-size: .78rem; color: var(--ink-3); }

/* ------------------------------------------------------------- OFERTA --- */
.offer {
  position: relative;
  overflow: hidden;
  background: var(--forest);
  color: rgba(255, 253, 250, .8);
}
/* Halos difusos atrás do card. Servem de "luz" para o vidro do card ter o que
   refratar nas bordas — sem eles o efeito não teria fonte de cor. */
.offer::before, .offer::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.offer::before {
  top: -14%; left: -8%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(224, 112, 62, .42), transparent 65%);
  animation: drift 24s ease-in-out infinite;
}
.offer::after {
  bottom: -22%; right: -10%;
  width: 580px; height: 580px;
  background: radial-gradient(circle, rgba(195, 154, 60, .22), transparent 65%);
  animation: drift 30s ease-in-out -10s infinite reverse;
}

/* Deriva lenta dos halos: a luz atrás do vidro nunca fica parada, é o que
   impede a seção de parecer uma imagem estática. */
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(38px, -26px) scale(1.07); }
  66%      { transform: translate(-26px, 30px) scale(.95); }
}
.offer > .wrap { position: relative; z-index: 1; }
/* Restrito ao cabeçalho: o card de preço tem fundo claro e mantém o texto escuro. */
.offer .section-head .h-section { color: var(--on-dark); }
.offer .eyebrow { color: var(--gold); }
.offer .lede { color: rgba(255, 253, 250, .66); }

/* O card fica opaco de propósito: é a peça de decisão da página e precisa de
   legibilidade máxima. O vidro aqui é só a moldura — borda de luz e halo. */
.pricing {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
  /* Vidro um pouco mais denso que o resto (.14 contra .07) e com anel dourado:
     é a peça de decisão da página e precisa saltar das demais. */
  background: rgba(255, 253, 250, .14);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  color: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--lg-sheen),
    0 30px 70px -24px rgba(0, 0, 0, .7),
    0 0 80px -18px rgba(211, 171, 85, .3);
  overflow: hidden;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pricing { background: var(--white); }
}
@media (prefers-reduced-transparency: reduce) {
  .pricing {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* Véu de luz em vez de fundo opaco: um bloco sólido aqui cortaria o vidro
   justamente no topo do card. */
.pricing__top {
  background: rgba(255, 253, 250, .06);
  padding: 30px 34px 26px;
  text-align: center;
  border-bottom: 1px dashed rgba(255, 255, 255, .16);
}
.pricing__label {
  display: inline-block;
  background: var(--accent);
  color: var(--on-dark);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 15px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.pricing__top h3 { font-size: var(--step-2); color: var(--ink); }
.pricing__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.pricing__old {
  font-size: var(--step-1);
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--accent-text);
}
.pricing__new {
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 6vw, 4.1rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.03em;
}
.pricing__new sup { font-size: .4em; top: -.62em; margin-right: 2px; }
/* Centavos menores: o olho lê "34" primeiro, que é o número que importa. */
.pricing__cents { font-size: .48em; letter-spacing: -.01em; }
.pricing__note { margin-top: 10px; font-size: var(--step--1); color: var(--ink-3); }

.pricing__body { padding: 32px 34px 36px; }
.pricing__list { display: grid; gap: 15px; margin-bottom: 30px; }
.pricing__list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: var(--step-0);
  line-height: 1.5;
}
.pricing__list svg { flex: none; color: var(--accent-text); margin-top: 4px; }
.pricing__list .val {
  margin-left: auto;
  padding-left: 12px;
  font-size: var(--step--1);
  color: var(--ink-3);
  white-space: nowrap;
}
.pricing__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-top: 20px;
  margin-bottom: 26px;
  border-top: 1px solid var(--paper-3);
  font-size: var(--step--1);
  color: var(--ink-3);
}
.pricing__total strong {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
}
.pricing__safe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 20px;
  font-size: .78rem;
  color: var(--ink-3);
}
.pricing__safe li { display: flex; align-items: center; gap: 6px; }
.pricing__safe svg { flex: none; }

/* ---------------------------------------------------------- GARANTIA ---- */
.guarantee {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  max-width: 860px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 48px);

  background: var(--lg-bg-strong);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-sheen), 0 20px 46px -18px rgba(23, 19, 16, .26);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .guarantee { background: var(--white); }
}
@media (prefers-reduced-transparency: reduce) {
  .guarantee {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.guarantee__seal { width: clamp(96px, 13vw, 132px); flex: none; }
.guarantee h3 { font-size: var(--step-2); margin-bottom: 14px; }
.guarantee p { font-size: var(--step-0); color: var(--ink-3); line-height: 1.65; }

/* --------------------------------------------------------------- FAQ ---- */
.faq { max-width: 780px; margin-inline: auto; }
/* Cada pergunta vira uma lâmina de vidro sobre a luz da seção, em vez de
   linhas soltas sobre o fundo chapado. */
.faq { display: grid; gap: 10px; }
.faq__item {
  border-radius: 16px;
  overflow: hidden;
  background: var(--lg-bg);
  -webkit-backdrop-filter: var(--lg-blur-sm);
  backdrop-filter: var(--lg-blur-sm);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-sheen), 0 8px 24px -14px rgba(23, 19, 16, .2);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.faq__item:hover,
.faq__item.is-open {
  background: var(--lg-bg-strong);
  box-shadow: var(--lg-sheen), 0 16px 38px -16px rgba(23, 19, 16, .26);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .faq__item { background: var(--white); }
}
@media (prefers-reduced-transparency: reduce) {
  .faq__item {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 4px;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: color .2s ease;
}
.faq__q:hover { color: var(--accent-text); }
.faq__sign {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
}
.faq__sign::before, .faq__sign::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform .35s var(--ease), opacity .3s ease;
}
.faq__sign::before { width: 15px; height: 1.6px; }
.faq__sign::after  { width: 1.6px; height: 15px; }
.faq__item.is-open .faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding: 0 4px 26px;
  font-size: var(--step-0);
  color: var(--ink-3);
  line-height: 1.7;
  max-width: 62ch;
}

/* ---------------------------------------------------------- CTA FINAL --- */
.final {
  position: relative;
  background: var(--forest);
  color: rgba(255, 253, 250, .78);
  text-align: center;
  overflow: hidden;
}
.final::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(192, 86, 42, .28), transparent 62%);
  pointer-events: none;
}
.final__inner { position: relative; max-width: 700px; margin-inline: auto; }
.final h2 { color: var(--on-dark); font-size: var(--step-3); }
.final p { margin-top: 20px; font-size: var(--step-1); color: rgba(255, 253, 250, .68); }
.final .btn { margin-top: 38px; }
.final__note { margin-top: 22px; font-size: var(--step--1); color: rgba(255, 253, 250, .5); }

/* -------------------------------------------------------------- RODAPÉ -- */
.footer {
  background: var(--forest-2);
  color: rgba(255, 253, 250, .5);
  padding-block: clamp(44px, 5vw, 64px);
  font-size: var(--step--1);
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255, 253, 250, .1);
}
.footer .brand { color: var(--on-dark); }
.footer__links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.footer__links a { transition: color .2s ease; }
.footer__links a:hover { color: var(--on-dark); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
  line-height: 1.7;
}
.footer__legal { max-width: 62ch; font-size: .78rem; color: rgba(255, 253, 250, .34); }

/* ------------------------------------------------------- BARRA STICKY --- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  /* O conteúdo passa por baixo o tempo todo — a barra ganha profundidade real. */
  background: rgba(21, 18, 14, .74);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border-top: 1px solid rgba(255, 255, 255, .6);
  box-shadow: var(--lg-sheen), 0 -12px 38px -14px rgba(23, 19, 16, .3);
  transform: translateY(110%);
  transition: transform .4s var(--ease);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sticky-cta { background: var(--paper); }
}
@media (prefers-reduced-transparency: reduce) {
  .sticky-cta {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__price { line-height: 1.2; }
.sticky-cta__price b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
}
.sticky-cta__price span { font-size: .72rem; color: var(--ink-3); }
.sticky-cta .btn { padding: 14px 26px; font-size: var(--step--1); }

/* ---------------------------------------------------------- ANIMAÇÕES --- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .4s; }

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

/* -------------------------------------------------------- RESPONSIVO ---- */
@media (max-width: 1024px) {
  /* O nav completo + CTA não cabem junto da marca abaixo desta largura:
     abaixo disso o menu vira hambúrguer e a barra fixa assume o CTA. */
  .nav, .header .btn { display: none; }
  .burger { display: flex; }
  .sticky-cta { display: flex; }
  body { padding-bottom: 76px; }

  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__text { max-width: 46ch; margin-inline: auto; }
  .hero__actions, .hero__reassure { justify-content: center; }
  .proof { justify-content: center; }
  .hero__visual { order: -1; max-width: 400px; margin-inline: auto; }
  .float-card--a { left: -8%; }
  .float-card--b { right: -6%; }
}

@media (max-width: 1024px) {
  .shift { grid-template-columns: 1fr; }
  .shift__arrow { transform: rotate(90deg); padding-block: 4px; }
}

@media (max-width: 900px) {
  .strip__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 80px; }
  .hero__actions .btn { width: 100%; }
  .float-card { padding: 12px 15px; }
  .float-card__num { font-size: 1.5rem; }
  .float-card--a { left: -2%; bottom: 6%; }
  .float-card--b { right: -2%; top: 4%; }
  .guarantee { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pricing__top, .pricing__body { padding-inline: 24px; }
  .pricing__list li { flex-wrap: wrap; }
  .pricing__list .val { margin-left: 36px; padding-left: 0; }
  .quote, .pain, .cat { padding: 28px 24px; }
  .footer__top { flex-direction: column; align-items: flex-start; }
}