:root {
  --radius: .625rem;
  --espresso: oklch(0.16 0.035 48); --chocolate: oklch(0.205 0.034 46); --cacao: oklch(0.31 0.055 52); --caramel: oklch(0.62 0.09 67);
  --gold: oklch(0.69 0.105 77); --gold-light: oklch(0.83 0.075 82); --cream: oklch(0.95 0.032 79); --paper: oklch(0.975 0.023 83); --sand: oklch(0.91 0.042 79);
  --muted: oklch(0.38 0.035 48); --border: oklch(0.75 0.07 77);
  --cta: oklch(0.61 0.18 145); --cta-hover: oklch(0.53 0.17 145);
  --green: oklch(0.8 0.2 148); --red: oklch(0.7 0.21 25);
  --font-sans: "Montserrat", system-ui, sans-serif; --font-display: "Playfair Display", Georgia, serif; --font-accent: "Cormorant Garamond", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--chocolate); font-family: var(--font-sans); line-height: 1.5; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin-inline: 0; margin-bottom: 0; }
a, button { -webkit-tap-highlight-color: transparent; }
s { text-decoration-thickness: 2px; }

.icon { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.shell { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.narrow { max-width: 52rem; }
section { padding-block: 4rem; }
.section-dark { background: var(--espresso); color: var(--cream); }
.section-paper { background: var(--paper); color: var(--chocolate); }
.section-cream { background: var(--cream); color: var(--chocolate); }
.center { text-align: center; }

/* Tipografia de seção */
.eyebrow { display: flex; align-items: center; justify-content: center; gap: .8rem; color: var(--gold); font-size: .7rem; line-height: 1.3; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.eyebrow span { width: 2rem; height: 1px; background: currentColor; flex: 0 0 auto; }
.section-heading { margin: 0 auto 2.5rem; text-align: center; }
.section-heading h2, .final-band h2 { margin: .9rem auto 0; max-width: 24ch; font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.12; }
.section-heading h2 em, .final-band h2 em { color: var(--gold); font-family: var(--font-accent); font-weight: 700; }
.section-heading-dark h2 { color: var(--cream); }
.lead { max-width: 62ch; margin: 0 auto 2.25rem; text-align: center; font-size: 1.05rem; line-height: 1.75; color: var(--muted); }
.light-text { color: color-mix(in oklab, var(--cream) 82%, transparent); }
.closing { max-width: 58ch; margin: 2rem auto 0; text-align: center; font-weight: 600; line-height: 1.65; }

/* Botão CTA (o verde é exclusivo dele) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.5rem; padding: .6rem 1.5rem; border-radius: 10px; background: var(--cta); color: #fff; font: 700 .875rem/1.25 var(--font-sans); text-transform: uppercase; text-align: center; text-decoration: none; transition: background-color .2s; }
.btn:hover { background: var(--cta-hover); }
.btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.btn .icon { width: 1rem; height: 1rem; }
.cta-button { margin-top: 1.5rem; width: 100%; max-width: 27rem; }
.cta-note { margin: .8rem 0 0; color: color-mix(in oklab, var(--cream) 72%, transparent); font-size: .78rem; line-height: 1.5; }

/* 1. Hero (centralizado: logo, título, subtítulo, mockup, botão) */
.hero { padding-top: 1.75rem; padding-bottom: 2.5rem; overflow-x: clip; text-align: center; }
.hero-logo { width: min(84%, 21rem); margin: 0 auto 1.6rem; }
.hero-logo img { width: 100%; height: auto; }
.hero h1 { margin: 0 auto .9rem; max-width: 21ch; font-family: var(--font-display); font-size: clamp(1.85rem, 6.4vw, 3.5rem); line-height: 1.1; background: linear-gradient(100deg, var(--gold-light), var(--gold), var(--caramel)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-subtitle { max-width: 44rem; margin: 0 auto; color: color-mix(in oklab, var(--cream) 86%, transparent); font-size: 1rem; line-height: 1.6; }
.hero-media { position: relative; isolation: isolate; width: min(92%, 46rem); margin: 1.1rem auto 0; }
.hero-media::before { content: ""; position: absolute; z-index: -1; inset: -10% -14%; background: radial-gradient(closest-side, oklch(0.34 0.07 58 / .8), oklch(0.16 0.035 48 / 0)); }
.hero-media::after { content: ""; position: absolute; z-index: -1; inset: 4% 8%; border: 1px solid color-mix(in oklab, var(--gold) 38%, transparent); border-radius: 50%; }
/* no celular o mockup encolhe conforme a altura da tela, para o botão sempre caber na primeira tela */
.hero-media img { display: block; width: auto; max-width: 100%; height: auto; max-height: clamp(7.5rem, calc(100svh - 28rem), 13.2rem); margin: 0 auto; }
.hero .cta-button { margin-top: 1.1rem; }

/* 2. O que é */

/* 2. O que é (ícones) */
.what-lead { max-width: 46rem; margin: 0 auto 2rem; text-align: center; font-size: 1.1rem; line-height: 1.75; color: var(--muted); }
.what-list { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; }
.what-list li { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent); background: color-mix(in oklab, var(--sand) 40%, transparent); line-height: 1.55; font-weight: 500; }
.what .center { margin-top: .5rem; }

/* 3. O que inclui */
.includes-intro { display: grid; gap: 2rem; align-items: center; max-width: 52rem; margin: 0 auto 3rem; }
.cover-frame { width: min(70%, 17rem); margin-inline: auto; }
.cover-frame img { width: 100%; height: auto; border: 2px solid var(--gold); border-radius: 4px; }
.includes-intro > div > p { margin-bottom: 1.25rem; line-height: 1.75; }
.subtitle-accent { margin: 3rem 0 1.5rem; text-align: center; font: italic 700 2rem/1.15 var(--font-accent); color: var(--gold-light); }
.check-list { display: grid; gap: .85rem; }
.check-list li { display: flex; align-items: flex-start; gap: .7rem; line-height: 1.55; }
.check-list .icon { width: 1.2rem; height: 1.2rem; margin-top: .15rem; color: var(--gold); stroke-width: 1.9; }
.check-list .icon-green { color: var(--green); }
.check-list-small { gap: .6rem; font-size: .9rem; }
.gallery-controls { display: flex; justify-content: center; gap: .75rem; margin-top: .75rem; }
.gallery-controls button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--gold); border-radius: 50%; background: transparent; color: var(--gold-light); cursor: pointer; }
.gallery-controls button:disabled { opacity: .3; cursor: default; }
.gallery-controls .icon { width: 1.1rem; height: 1.1rem; }
.rail { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .15rem .1rem 1rem; scrollbar-width: thin; }
.rail > * { scroll-snap-align: center; }
.inside-image { flex: 0 0 72%; width: 72%; height: auto; border: 2px solid var(--gold); border-radius: 4px; }
.learning-grid { display: grid; gap: 1.5rem; }
.learning-card { border-top: 1px solid var(--gold); }
.learning-card img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border: 2px solid var(--gold); border-radius: 4px; }
.learning-card > div { padding: 1.25rem .25rem .75rem; }
.learning-card h3 { margin-bottom: .55rem; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.25; color: var(--gold-light); }
.learning-card .transform { margin-bottom: 1rem; color: var(--cream); line-height: 1.6; font-size: .95rem; }
.learning-card .check-list { color: color-mix(in oklab, var(--cream) 82%, transparent); }
.advantages { margin-top: 3rem; padding: 1.75rem 1.4rem; border: 1px solid color-mix(in oklab, var(--gold) 65%, transparent); }
.advantages h3 { margin-bottom: 1.25rem; text-align: center; font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-light); }
.advantages h3 em { font-family: var(--font-accent); font-weight: 700; }
.advantages .check-list { gap: 1rem; }

/* Receitas em destaque */
.featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.featured-grid img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border: 2px solid var(--gold); border-radius: 4px; }
.featured-grid figcaption { padding: .7rem .1rem .5rem; font: 600 1rem/1.3 var(--font-display); }

/* Para quem é */
.who-grid { display: grid; gap: 1.75rem; }
.who-card { border-top: 1px solid var(--gold); padding-top: 1.25rem; }
.who-photo { margin-bottom: 2.5rem; }
.who-photo img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border: 2px solid var(--gold); border-radius: 4px; }
.who-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.who-icon { display: grid; place-items: center; flex: 0 0 auto; width: 3rem; height: 3rem; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); }
.who-icon .icon { width: 1.4rem; height: 1.4rem; stroke-width: 1.5; }
.who-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; }
.who-card p { margin: 0; color: var(--muted); line-height: 1.6; }

/* Bônus */
.bonus-title { margin: 0 auto 1.25rem; max-width: 20ch; text-align: center; font: 700 clamp(2rem, 7vw, 3.4rem)/1.1 var(--font-display); text-transform: uppercase; background: linear-gradient(100deg, var(--gold-light), var(--gold), var(--caramel)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bonus-grid { display: grid; gap: 1.5rem; }
.bonus-card { border: 1px solid color-mix(in oklab, var(--gold) 65%, transparent); background: var(--chocolate); }
.bonus-cover { position: relative; display: grid; place-items: center; min-height: 22rem; padding: 1.5rem; background: var(--cacao); }
.bonus-tag { position: absolute; z-index: 1; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; background: var(--gold); color: var(--espresso); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.bonus-tag .icon { width: 1.1rem; height: 1.1rem; }
.bonus-cover img { width: min(100%, 15rem); height: 19rem; object-fit: contain; border-radius: 4px; }
.bonus-content { padding: 1.5rem; }
.bonus-content h3 { margin-bottom: .7rem; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.25; color: var(--gold-light); }
.bonus-price { margin: 0 0 1.1rem; font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; }
.bonus-price .de { color: var(--red); }
.bonus-price .por { margin-left: .4rem; color: var(--green); }
.bonus-content .check-list { color: color-mix(in oklab, var(--cream) 85%, transparent); }
.bonus-close { max-width: 46rem; margin: 2.5rem auto 0; padding: 1.75rem 1.25rem; border-block: 1px solid var(--gold); text-align: center; }
.bonus-close .big { margin-bottom: .5rem; font: 700 clamp(1.6rem, 6.4vw, 2.6rem)/1.25 var(--font-display); color: var(--cream); }
.bonus-close .big s, .bonus-close .big strong { color: var(--gold-light); }
.bonus-close .free { margin-bottom: 1.1rem; font: 800 clamp(1.2rem, 4.6vw, 1.7rem)/1.35 var(--font-sans); color: var(--green); }
.bonus-close .push { margin: 0; color: var(--cream); font-weight: 700; font-size: 1.05rem; line-height: 1.6; }

/* Depoimentos */
.testimonial-rail .testimonial { flex: 0 0 82%; width: 82%; height: auto; border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent); border-radius: 4px; }
.disclaimer { margin-top: 1rem; color: var(--muted); text-align: center; font-size: .75rem; }

/* Oferta */
.offer-grid { display: grid; gap: 2.5rem; align-items: center; }
.offer-media img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border: 2px solid var(--gold); border-radius: 4px; }
.offer .section-heading { text-align: left; margin-bottom: 1.75rem; }
.offer .section-heading h2 { margin-left: 0; }
.section-heading h2 em.price-green { color: var(--green); font-family: var(--font-display); font-style: normal; font-weight: 700; }
.offer-list li .icon { width: 1.25rem; height: 1.25rem; }
.price-wrap { margin: 2rem 0 1rem; }
.price { margin: 0; color: var(--green); font: 700 clamp(2.8rem, 10vw, 4.5rem)/1 var(--font-display); }
.price-wrap p:last-child { margin: .5rem 0 0; color: var(--cream); font-size: .78rem; }
.offer-small { max-width: 52ch; margin-bottom: 0; color: color-mix(in oklab, var(--cream) 74%, transparent); font-size: .82rem; line-height: 1.6; }

/* Benefícios do acesso, garantia, FAQ */
.access-grid { display: grid; gap: 2rem; }
.guarantee { display: grid; justify-items: center; gap: 1.25rem; text-align: center; }
.guarantee > .icon { width: 4.5rem; height: 4.5rem; color: var(--gold); stroke-width: 1.2; }
.guarantee .lead { margin-bottom: 0; }
.accordion { border-top: 1px solid var(--gold); }
.accordion-item { border-bottom: 1px solid var(--gold); }
.accordion-trigger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 4.5rem; padding: 1rem 0; border: 0; background: transparent; color: var(--chocolate); font: 600 .95rem/1.4 var(--font-sans); text-align: left; cursor: pointer; }
.accordion-trigger .icon { color: var(--gold); transition: transform .2s; }
.accordion-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.accordion-item > p { margin: 0; padding: 0 2.5rem 1.25rem 0; color: var(--muted); line-height: 1.65; }
.faq { padding-bottom: 0; }
.final-band { margin-top: 4rem; padding: 4rem 1rem; background: var(--espresso); color: var(--cream); text-align: center; }
.final-band .shell { display: grid; justify-items: center; }
.final-band p { margin: 1rem 0 0; color: var(--gold-light); }


/* Fade-in ao rolar (só com JavaScript ativo) */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (min-width: 640px) {
  .btn { min-height: 4rem; padding-inline: 2.5rem; }
  .who-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  section { padding-block: 5.5rem; }
  .hero { padding-top: 3rem; padding-bottom: 4.5rem; }
  .hero-logo { width: 26rem; margin-bottom: 2rem; }
  .hero-media { margin-top: 1.75rem; }
  .hero-media img { width: 100%; max-height: none; }
  .hero .cta-button { margin-top: 1.75rem; }
  .cta-button { width: auto; min-width: 22rem; }
  .what-list { grid-template-columns: repeat(2, 1fr); }
  .includes-intro { grid-template-columns: 17rem 1fr; gap: 3rem; }
  .cover-frame { width: 100%; }
  .inside-image { flex-basis: 27%; width: 27%; }
  .learning-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .advantages { padding: 2.25rem 2.5rem; }
  .advantages .check-list { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 2.5rem; }
  .featured-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .bonus-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-rail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; overflow: visible; }
  .testimonial-rail .testimonial { width: 100%; }
  .testimonial-controls { display: none; }
  .offer-grid { grid-template-columns: .9fr 1.1fr; gap: 3rem; }
  .access-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .who-grid { grid-template-columns: repeat(4, 1fr); }
  .bonus-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } }
@media (prefers-reduced-motion: no-preference) { .cta-button { animation: cta-pulse 2.5s ease-in-out infinite; } }
@keyframes cta-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }