/* ============================================================
   SALADAS NO POTE — Landing Page
   Reaproveita o design system do app (entregável):
   sage / cream / action-green · Fraunces + Inter
   ============================================================ */

:root {
  --sage: #6e7a45;
  --sage-dark: #3d4327;
  --sage-soft: #8b975f;
  --cream: #f7f3e8;
  --cream-deep: #efe9da;
  --surface: #ffffff;
  --action: #4ca155;
  --action-dark: #3f8a49;
  --ink: #2e2e2e;
  --secondary: #ede7d6;
  --badge: #f1eede;
  --border: #e7e0cf;
  --danger: #c0492f;

  --radius: 20px;
  --shadow-sm: 0 2px 10px rgba(61, 67, 39, 0.06);
  --shadow-md: 0 12px 30px -12px rgba(61, 67, 39, 0.22);
  --shadow-lg: 0 30px 60px -24px rgba(61, 67, 39, 0.35);
  --maxw: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .font-display {
  font-family: "Fraunces", Georgia, serif;
  color: var(--sage-dark);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; }

section { position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Inter", sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage); background: var(--badge);
  padding: 7px 14px; border-radius: 999px;
}

.section-title {
  font-size: clamp(28px, 5vw, 44px);
  margin: 16px 0 14px;
  font-weight: 600;
}
.section-sub { color: #6b6657; max-width: 600px; margin: 0 auto; }
.text-center { text-align: center; }

/* ---------- Botões ---------- */
.btn {
  --b: var(--action);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: "Inter", sans-serif; font-weight: 700; font-size: 17px;
  color: #fff; background: var(--b);
  border: none; border-radius: 14px; cursor: pointer;
  padding: 17px 30px; text-decoration: none;
  box-shadow: 0 14px 26px -12px rgba(76, 161, 85, 0.7);
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  position: relative; overflow: hidden;
}
.btn:hover { background: var(--action-dark); transform: translateY(-2px); box-shadow: 0 20px 34px -14px rgba(76, 161, 85, 0.75); }
.btn:active { transform: translateY(0); }
.btn--sage { --b: var(--sage); box-shadow: 0 14px 26px -12px rgba(110,122,69,.6); }
.btn--sage:hover { background: var(--sage-dark); }
.btn--block { width: 100%; }
.btn--lg { padding: 20px 34px; font-size: 19px; }
.btn .shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: shine 3.6s ease-in-out infinite;
}
@keyframes shine { 0%,100% { transform: translateX(-120%);} 18%,40% { transform: translateX(120%);} }

.btn-note { font-size: 13px; color: #8a8576; margin-top: 10px; text-align: center; }

/* ---------- Selos da promessa ---------- */
.selos { display: flex; flex-wrap: wrap; gap: 10px; }
.selo {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--badge); color: var(--sage-dark);
  border: 1px solid var(--border);
  font-size: 13.5px; font-weight: 600;
  padding: 8px 13px; border-radius: 999px;
}
.selo svg { width: 16px; height: 16px; }

/* ============================================================
   TOPBAR + COUNTDOWN
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--sage-dark); color: #fff;
  text-align: center; font-size: 13.5px; font-weight: 600;
  padding: 9px 16px;
}
.topbar b { color: #ffd98a; }
.count { display: inline-flex; gap: 4px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.count span {
  background: rgba(255,255,255,.14); border-radius: 6px;
  padding: 1px 7px; font-weight: 700; letter-spacing: .04em;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background:
    radial-gradient(1100px 520px at 80% -10%, #e7ecd5 0%, transparent 60%),
    radial-gradient(900px 480px at -10% 20%, #eef2e0 0%, transparent 55%),
    var(--cream);
  padding: 36px 0 70px;
  overflow: hidden;
  text-align: center;
}
.hero-stack {
  display: flex; flex-direction: column; align-items: center;
  max-width: 720px;
}
.brandmark { margin: 0 0 22px; text-align: center; }
.brandmark .l1 {
  font-family: "Fraunces", serif; font-style: italic; font-weight: 600;
  font-size: clamp(54px, 9vw, 92px); color: var(--sage);
  line-height: .85; letter-spacing: -0.02em;
}
.brandmark .l2 {
  display: inline-flex; align-items: baseline; gap: 10px; margin-top: 4px;
  justify-content: center;
}
.brandmark .l2 b {
  background: var(--sage-dark); color: var(--cream);
  font-family: "Fraunces", serif; font-weight: 600;
  font-size: clamp(30px, 5.2vw, 46px);
  padding: 2px 16px; border-radius: 8px; letter-spacing: -0.01em;
}
.brandmark .l2 em {
  font-family: "Fraunces", serif; font-style: italic; color: var(--sage);
  font-size: clamp(20px, 3.4vw, 30px); font-weight: 500;
}

/* ---------- Hero photo (real image) ---------- */
.hero-photo {
  position: relative; width: 100%; max-width: 460px;
  margin: 8px 0 32px;
  filter: drop-shadow(0 36px 50px rgba(61,67,39,.28));
}
.hero-photo img {
  width: 100%; height: auto; display: block;
  border-radius: 22px;
  box-shadow: 0 10px 30px -10px rgba(61,67,39,.25);
}
.float-badge {
  position: absolute; background: #fff; border-radius: 14px;
  box-shadow: var(--shadow-md); padding: 10px 14px;
  display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700;
  color: var(--sage-dark); z-index: 6; text-align: left;
}
.float-badge .ic { width: 30px; height: 30px; border-radius: 9px; background: var(--badge); display: grid; place-items: center; color: var(--sage); flex: none; }
.float-badge .ic svg { width: 17px; height: 17px; }
.fb-1 { top: 8%; left: -6%; animation: floaty 4s ease-in-out infinite; }
.fb-2 { top: 38%; right: -8%; animation: floaty 4.6s ease-in-out .4s infinite; }
.fb-3 { bottom: 10%; left: -6%; animation: floaty 5s ease-in-out .8s infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-9px);} }

.hero h1 {
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 600; margin: 0 0 16px;
}
.hero h1 .hl { color: var(--sage); position: relative; white-space: nowrap; }
.hero h1 .hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4%;
  height: 28%; background: rgba(110,122,69,.16); border-radius: 4px; z-index: -1;
}
.hero p.lead { font-size: 18px; color: #5f5a4c; margin: 0 0 24px; max-width: 560px; }
.hero-cta { margin: 8px 0 4px; width: 100%; max-width: 460px; }
.hero .selos { margin-top: 22px; justify-content: center; }

.rating { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 14px; color: #6b6657; justify-content: center; flex-wrap: wrap; }
.stars { color: #e8a72e; letter-spacing: 2px; font-size: 16px; }
.avatars { display: flex; }
.avatars span, .avatars img {
  width: 30px; height: 30px; border-radius: 50%; margin-left: -8px;
  border: 2px solid var(--cream); background-size: cover; object-fit: cover;
  display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700;
}
.avatars img:first-child { margin-left: 0; }

/* ============================================================
   DIFERENCIAL — não é PDF, é um app
   ============================================================ */
.diff { background: var(--sage-dark); color: #eef0e4; padding: 60px 0; }
.diff .eyebrow { background: rgba(255,255,255,.12); color: #d7e0b4; }
.diff h2 { color: #fff; }
.diff h2 .y { color: #cfe08a; }
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 38px; }
.diff-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 26px 22px;
}
.diff-card .ic { width: 50px; height: 50px; border-radius: 14px; background: rgba(207,224,138,.16); display: grid; place-items: center; margin-bottom: 16px; color: #cfe08a; }
.diff-card .ic svg { width: 26px; height: 26px; }
.diff-card h3 { color: #fff; font-size: 20px; margin: 0 0 8px; }
.diff-card p { color: #c4cab2; font-size: 15px; margin: 0; }
.vs-row { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; margin-top: 40px; }
.vs-item { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.vs-item.no { color: #b7a8a2; text-decoration: line-through; opacity: .8; }
.vs-item.yes { color: #fff; font-weight: 600; }
.vs-item svg { width: 18px; height: 18px; }
.vs-item.no svg { color: var(--danger); }
.vs-item.yes svg { color: #8fd06a; }

/* ============================================================
   ENCONTRAR — checklist
   ============================================================ */
.find { padding: 78px 0; }
.find-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.find-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 18px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.find-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.find-item .ic { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--badge); color: var(--sage); display: grid; place-items: center; }
.find-item .ic svg { width: 22px; height: 22px; }
.find-item h4 { margin: 2px 0 3px; font-family: "Inter"; font-size: 16px; color: var(--sage-dark); font-weight: 700; }
.find-item p { margin: 0; font-size: 14px; color: #726c5d; line-height: 1.45; }

/* ============================================================
   APP SHOWCASE — phone mockups
   ============================================================ */
.showcase { padding: 78px 0; background: linear-gradient(var(--cream), var(--cream-deep)); }
.feat-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
  margin-top: 56px;
}
.feat-row.rev .feat-text { order: 2; }
.feat-text .eyebrow { margin-bottom: 14px; }
.feat-text h3 { font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 14px; font-weight: 600; }
.feat-text p { color: #5f5a4c; margin: 0 0 18px; }
.feat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.feat-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--ink); }
.feat-list li svg { flex: none; width: 22px; height: 22px; color: var(--action); margin-top: 1px; }

/* phone frame */
.phone-wrap { display: grid; place-items: center; }
.phone {
  position: relative; width: 300px; aspect-ratio: 300 / 620;
  background: #1d1f17; border-radius: 42px; padding: 11px;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.06);
}
.phone::before { /* notch */
  content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 26px; background: #1d1f17; border-radius: 0 0 16px 16px; z-index: 5;
}
.phone-screen {
  width: 100%; height: 100%; border-radius: 32px; overflow: hidden;
  background: var(--cream); position: relative;
  display: flex; flex-direction: column;
}
.scr-head { padding: 30px 16px 12px; }
.scr-greet { font-size: 12px; color: #8a8576; }
.scr-title { font-family: "Fraunces", serif; font-size: 21px; color: var(--sage-dark); font-weight: 600; line-height: 1.1; }
.scr-body { flex: 1; overflow: hidden; padding: 4px 14px 14px; }

/* mock bottom-nav */
.scr-nav {
  position: absolute; bottom: 0; left: 0; right: 0; height: 58px;
  background: #fff; border-top: 1px solid var(--border);
  display: flex; justify-content: space-around; align-items: center; padding-bottom: 4px;
}
.scr-nav i { width: 22px; height: 22px; color: #b6b0a0; display: grid; place-items: center; }
.scr-nav i svg { width: 22px; height: 22px; }
.scr-nav i.on { color: var(--sage); }

/* planner grid mock */
.plan-week { display: grid; gap: 7px; }
.plan-day { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; }
.plan-day b { font-size: 11px; color: var(--sage); width: 28px; text-transform: uppercase; }
.plan-day .meal { font-size: 12px; color: var(--ink); flex: 1; }
.plan-day .dot { width: 26px; height: 26px; border-radius: 8px; flex: none; }
.plan-day.empty .meal { color: #b6b0a0; }
.plan-day.empty .dot { background: var(--cream-deep); border: 1px dashed var(--border); }

/* shopping list mock */
.shop-sec { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); margin: 10px 0 6px; }
.shop-item { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; margin-bottom: 6px; font-size: 12.5px; }
.shop-item .ck { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--border); flex: none; display: grid; place-items: center; }
.shop-item.done .ck { background: var(--action); border-color: var(--action); color: #fff; }
.shop-item.done span { color: #b6b0a0; text-decoration: line-through; }
.shop-item .qt { margin-left: auto; font-size: 11px; color: #8a8576; }

/* layers mock */
.layers-mock { display: grid; gap: 8px; margin-top: 6px; }
.lrow { display: flex; align-items: center; gap: 11px; }
.lrow .num { width: 26px; height: 26px; border-radius: 50%; background: var(--sage); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.lrow .bar { height: 26px; border-radius: 8px; flex: 1; }
.lrow small { font-size: 11px; color: #726c5d; }

/* recipe detail / portions mock */
.cook-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.portion { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.portion .stepper { display: flex; align-items: center; gap: 12px; }
.portion .stepper button { width: 28px; height: 28px; border-radius: 8px; border: none; background: var(--badge); color: var(--sage-dark); font-size: 16px; font-weight: 700; cursor: pointer; }
.portion .stepper b { font-size: 16px; min-width: 18px; text-align: center; }
.timer-mock { text-align: center; background: var(--sage-dark); color: #fff; border-radius: 14px; padding: 16px; }
.timer-mock .t { font-family: "Fraunces", serif; font-size: 34px; font-variant-numeric: tabular-nums; }
.timer-mock small { color: #cfe08a; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.cook-mode { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--action-dark); font-weight: 700; margin-top: 8px; }

/* segredo bloqueado (conteúdo borrado dentro do celular) */
.secret-locked { position: relative; }
.secret-blur { filter: blur(7px); user-select: none; pointer-events: none; opacity: .85; }
.secret-blur .sb-intro { font-size: 12px; color: #5f5a4c; margin: 0 0 12px; line-height: 1.5; }
.secret-blur .sb-step { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 11px; }
.secret-blur .sb-step .n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--sage); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.secret-blur .sb-step b { display: block; font-size: 13px; color: var(--sage-dark); }
.secret-blur .sb-step small { font-size: 11px; color: #726c5d; }
.secret-overlay {
  position: absolute; inset: -4px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 7px;
  padding: 0 22px;
  background: radial-gradient(circle at 50% 45%, rgba(247,243,232,.55), rgba(247,243,232,.82));
}
.secret-overlay .lockic { width: 48px; height: 48px; border-radius: 16px; background: var(--sage-dark); color: #cfe08a; display: grid; place-items: center; box-shadow: var(--shadow-md); }
.secret-overlay .lockic svg { width: 24px; height: 24px; }
.secret-overlay b { font-family: "Fraunces", serif; font-size: 18px; color: var(--sage-dark); }
.secret-overlay .ov-sub { font-size: 12px; color: #6b6657; line-height: 1.45; max-width: 220px; }

/* ============================================================
   RECEITAS — grid de cards
   ============================================================ */
.recipes { padding: 78px 0; }
.rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; }
.rec-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.rec-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.rec-thumb {
  position: relative; aspect-ratio: 4 / 5;
  display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(120% 80% at 70% 0%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(155deg, #7a8650 0%, #6e7a45 45%, #545e32 100%);
}
.rec-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.rec-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.92); color: var(--sage-dark); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.rec-badge svg { width: 13px; height: 13px; }
.rec-info { padding: 16px 16px 18px; }
.rec-info h4 { font-family: "Fraunces", serif; font-size: 18px; color: var(--sage-dark); margin: 0 0 10px; font-weight: 600; }
.rec-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-selos .s { display: inline-flex; align-items: center; gap: 5px; background: var(--badge); color: var(--sage-dark); font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.rec-selos .s svg { width: 13px; height: 13px; }

/* ============================================================
   BÔNUS
   ============================================================ */
.bonus { padding: 78px 0; }
.bonus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; }
.bonus-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 26px 22px; box-shadow: var(--shadow-sm); text-align: center;
}
.bonus-card .ribbon { position: absolute; top: 16px; right: -6px; background: var(--action); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 14px; border-radius: 8px 0 0 8px; box-shadow: var(--shadow-sm); }
.bonus-card .ribbon::after { content: ""; position: absolute; right: 0; bottom: -6px; border-width: 6px 6px 0 0; border-style: solid; border-color: var(--action-dark) transparent transparent transparent; }
.bonus-emoji { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; background: var(--badge); display: grid; place-items: center; color: var(--sage); }
.bonus-emoji svg { width: 32px; height: 32px; }
.bonus-card h4 { font-family: "Fraunces", serif; font-size: 20px; color: var(--sage-dark); margin: 0 0 6px; }
.bonus-card .qty { font-size: 13px; color: var(--sage); font-weight: 700; }
.bonus-card .price { margin-top: 12px; font-size: 14px; }
.bonus-card .price s { color: #b6b0a0; }
.bonus-card .price b { color: var(--action-dark); }

/* ============================================================
   DOR — isso acontece com você?
   ============================================================ */
.pain { padding: 78px 0; background: var(--cream-deep); }
.pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; margin-top: 34px; max-width: 820px; margin-left: auto; margin-right: auto; }
.pain-item { display: flex; gap: 13px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 15px 17px; }
.pain-item .x { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #f6e2dc; color: var(--danger); display: grid; place-items: center; }
.pain-item .x svg { width: 16px; height: 16px; }
.pain-item p { margin: 0; font-size: 15px; color: var(--ink); }
.pain-cta { text-align: center; margin-top: 34px; font-family: "Fraunces", serif; font-size: 22px; color: var(--sage-dark); }

/* ============================================================
   OFERTA
   ============================================================ */
.offer { padding: 80px 0; }
.offer-box {
  max-width: 640px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 28px; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.offer-top { background: var(--sage-dark); color: #fff; text-align: center; padding: 26px 24px; }
.offer-top h3 { color: #fff; font-size: 26px; margin: 0; font-weight: 600; }
.offer-top p { margin: 6px 0 0; color: #cfe08a; font-size: 14px; }
.offer-body { padding: 30px 28px 34px; }
.stack { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 11px; }
.stack li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; padding-bottom: 11px; border-bottom: 1px dashed var(--border); }
.stack li:last-child { border-bottom: none; padding-bottom: 0; }
.stack li svg { flex: none; width: 20px; height: 20px; color: var(--action); }
.stack li .v { margin-left: auto; color: #8a8576; font-size: 13px; flex: none; white-space: nowrap; }
.price-block { text-align: center; padding: 18px 0 6px; }
.price-block .from { color: #8a8576; font-size: 15px; }
.price-block .from s { color: var(--danger); }
.price-block .big { font-family: "Fraunces", serif; color: var(--sage-dark); font-size: 17px; margin: 6px 0 0; }
.price-block .big b { font-size: 50px; display: block; line-height: 1; color: var(--action-dark); }
.price-block .cash { color: #6b6657; font-size: 14px; margin-top: 8px; }
.guarantee { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 22px; padding: 16px; background: var(--badge); border-radius: 16px; }
.guarantee svg { width: 40px; height: 40px; color: var(--sage); flex: none; }
.guarantee p { margin: 0; font-size: 13.5px; color: #6b6657; }
.guarantee b { color: var(--sage-dark); }
.pay-row { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 18px; color: #9a9484; font-size: 12px; }
.pay-row svg { width: 16px; height: 16px; }

/* ============================================================
   NUTRI + DEPOIMENTOS
   ============================================================ */
.about { padding: 78px 0; background: var(--secondary); }
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; align-items: center; }
.nutri-photo {
  width: 100%; max-width: 260px; aspect-ratio: 4 / 5; border-radius: 24px;
  background: radial-gradient(circle at 50% 30%, #cdd9a8, #97a86d);
  display: grid; place-items: center; box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.nutri-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.nutri-photo .tag { position: absolute; bottom: 16px; left: 16px; right: 16px; background: rgba(255,255,255,.92); border-radius: 14px; padding: 10px 14px; text-align: left; }
.nutri-photo .tag b { color: var(--sage-dark); font-family: "Inter"; display: block; font-size: 15px; }
.nutri-photo .tag span { color: var(--sage); font-size: 12px; }
.about-text h2 { margin: 14px 0; }
.about-text p { color: #5f5a4c; }

.tst-track { display: flex; gap: 16px; overflow-x: auto; padding: 28px 0 8px; scroll-snap-type: x mandatory; }
.tst-track::-webkit-scrollbar { height: 6px; }
.tst-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.tst {
  flex: 0 0 300px; scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 20px; box-shadow: var(--shadow-sm);
}
.tst .stars { font-size: 14px; margin-bottom: 8px; }
.tst p { font-size: 14.5px; color: var(--ink); margin: 0 0 14px; }
.tst .who { display: flex; align-items: center; gap: 10px; }
.tst .who .av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; background: var(--sage); }
.tst .who b { font-size: 14px; color: var(--sage-dark); display: block; }
.tst .who span { font-size: 12px; color: #8a8576; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding: 78px 0; }
.faq-list { max-width: 760px; margin: 40px auto 0; display: grid; gap: 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: box-shadow .2s ease; }
.faq-item.open { box-shadow: var(--shadow-md); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 19px 22px; font-family: "Inter"; font-size: 16.5px; font-weight: 600; color: var(--sage-dark); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-q .chev { flex: none; width: 22px; height: 22px; color: var(--sage); transition: transform .25s ease; }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a div { padding: 0 22px 20px; color: #6b6657; font-size: 15px; }

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.final { padding: 80px 0; text-align: center; background: linear-gradient(160deg, var(--sage) 0%, var(--sage-dark) 100%); color: #fff; }
.final h2 { color: #fff; font-size: clamp(28px, 5vw, 46px); }
.final p { color: #e3e8cf; max-width: 540px; margin: 14px auto 30px; }
.final .selos { justify-content: center; margin-top: 26px; }
.final .selo { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); }

footer { background: var(--sage-dark); color: #b8bda3; padding: 40px 0; text-align: center; font-size: 13px; }
footer .fbrand { font-family: "Fraunces", serif; font-style: italic; color: #fff; font-size: 24px; margin-bottom: 10px; }
footer a { color: #cfe08a; text-decoration: none; }
footer .disc { margin-top: 16px; font-size: 11.5px; color: #8a8f74; max-width: 620px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border); padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 12px;
  transform: translateY(120%); transition: transform .3s ease;
  box-shadow: 0 -8px 24px rgba(61,67,39,.12);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .sc-price { line-height: 1.1; }
.sticky-cta .sc-price s { font-size: 11px; color: #b6b0a0; }
.sticky-cta .sc-price b { display: block; font-size: 17px; color: var(--sage-dark); font-family: "Fraunces", serif; }
.sticky-cta .btn { flex: 1; padding: 14px 18px; font-size: 16px; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  .hero-photo { max-width: 360px; }
  .fb-1 { top: 6%; left: -2%; }
  .fb-2 { top: 42%; right: -3%; }
  .fb-3 { bottom: 8%; left: -2%; }
  .diff-grid { grid-template-columns: 1fr; }
  .find-grid { grid-template-columns: 1fr 1fr; }
  .feat-row, .feat-row.rev { grid-template-columns: 1fr; gap: 30px; }
  .feat-row.rev .feat-text { order: 0; }
  .feat-text { text-align: center; }
  .feat-text .selos, .feat-list { text-align: left; }
  .rec-grid, .bonus-grid { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .nutri-photo { margin: 0 auto; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .find-grid, .pain-grid, .rec-grid, .bonus-grid { grid-template-columns: 1fr; }
  .sticky-cta { display: flex; }
  .hero { padding-top: 26px; }
  .wrap { padding: 0 18px; }
  .feat-list { display: inline-grid; text-align: left; }
  .vs-row { justify-content: flex-start; }

  /* Aproxima os blocos: reduz o respiro vertical das seções no mobile */
  .diff, .find, .showcase, .recipes, .bonus, .pain, .offer, .about, .faq, .final { padding-top: 46px; padding-bottom: 46px; }
  .diff-grid, .find-grid, .bonus-grid, .pain-grid { margin-top: 26px; }
  .rec-grid { margin-top: 28px; }
  .tst-track { padding-top: 20px; }
  .pain-cta { margin-top: 24px; }
}