/* =========================================================
   3 Dias — Landing page de venda (referência estática)
   Mobile-first. Único breakpoint real: 900px (hero em 2 colunas).
   ========================================================= */

:root {
  /* Cores — paleta tirada da capa do e-book */
  --navy:        #17457E; /* títulos, CTA do hero, fundo da oferta final */
  --navy-dark:   #10345F; /* hover do CTA do hero */
  --blue:        #1B85C8; /* destaque do H1, preço, bullets */
  --text:        #2C4E75; /* cor de texto padrão do body */
  --text-body:   #3B5C82; /* parágrafos secundários, respostas do FAQ */
  --text-muted:  #6E8FB4; /* eyebrows / legenda do mockup */
  --text-soft:   #8AA3BE; /* selo "Pagamento seguro" */
  --text-faint:  #9DB3CB; /* preço riscado */
  --text-onnavy: #AFC7E0; /* texto pequeno sobre navy */
  --cream:       #FCF8F0; /* fundo da página (dobras 1 e 3) */
  --mint-100:    #EAF6F3; /* círculos decorativos em fundo branco */
  --mint-200:    #DCEEEA; /* círculo do hero, borda da caixa de preço, pill Parte 1 */
  --mint-300:    #A9DAD3; /* barra lateral dos cards de dor */
  --teal:        #7FC8C0; /* traços decorativos */
  --gold:        #F5B831; /* traços decorativos, CTA final */
  --gold-hover:  #FFC94D; /* hover do CTA final */
  --gold-100:    #FDF3DC; /* círculo decorativo */
  --gold-200:    #FCE3A8; /* highlight, box de fechamento, pill Parte 2, preço final */
  --gold-text:   #8A5B0A; /* texto da pill Parte 2 (contraste sobre --gold-200) */
  --gray-50:     #F7FAFB; /* cards de dor, itens do FAQ */
  --white:       #FFFFFF;

  /* Tipografia */
  --font-display: 'Baloo 2', system-ui, sans-serif; /* títulos, preço, CTA, pills */
  --font-body:    'Nunito', system-ui, sans-serif;  /* corpo */

  /* Raios */
  --r-card: 20px;
  --r-box:  16px;
  --r-item: 12px;
  --r-pill: 999px;

  /* Sombras */
  --shadow-price:  0 14px 30px -18px rgba(23, 69, 126, .32);
  --shadow-card:   0 16px 34px -22px rgba(23, 69, 126, .38);
  --shadow-cta:    0 16px 34px -10px rgba(0, 0, 0, .45);
  --drop-book:     drop-shadow(0 26px 40px rgba(23, 69, 126, .30));
  --drop-book-sm:  drop-shadow(0 22px 36px rgba(0, 0, 0, .42));
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--blue); }

img { max-width: 100%; }

/* ---------- Seções ---------- */
/* Toda seção é relative + overflow:hidden para conter a decoração absoluta. */
.section {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 6vw, 84px) clamp(20px, 4vw, 40px);
}
.section--white { background: var(--white); }
.section__inner { position: relative; z-index: 1; margin: 0 auto; }
.section__inner--900 { max-width: 900px; }
.section__inner--980 { max-width: 980px; }

/* ---------- Decoração ----------
   Dois elementos só, sem SVG e sem imagem:
   .blob  = círculo grande e suave (menta, creme ou branco translúcido)
   .dash  = tracinho arredondado inclinado (amarelo/menta), o "brilho" da capa
   Ambos: z-index 0, pointer-events none, aria-hidden.
   Nenhum offset negativo dentro do HERO (o círculo precisa ficar inteiro);
   nas outras seções os blobs sangram de propósito pelas bordas. */
.blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  width: var(--size);
  aspect-ratio: 1;
  background: var(--blob-color, var(--mint-100));
  opacity: var(--op, 1);
}
.blob--mint200  { --blob-color: var(--mint-200); }
.blob--mint100  { --blob-color: var(--mint-100); }
.blob--gold100  { --blob-color: var(--gold-100); }
.blob--white    { --blob-color: var(--white); }

.dash {
  position: absolute;
  z-index: 0;
  width: 26px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--gold);
  transform: rotate(var(--rot, -30deg));
  opacity: var(--op, .85);
  pointer-events: none;
}
.dash--teal { background: var(--teal); width: 22px; }

/* =========================================================
   DOBRA 1 — Hero
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 72px) clamp(20px, 4vw, 40px) clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 1fr; }
}

.hero__media {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hero__book {
  width: 100%;
  max-width: 470px;
  height: auto;
  display: block;
  filter: var(--drop-book);
}
.hero__caption {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.08;
  color: var(--navy);
  text-wrap: pretty;
}
.hero__h1 em { color: var(--blue); font-style: normal; }

.hero__h2 {
  margin: 0;
  max-width: 34em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--text-body);
  text-wrap: pretty;
}
.mark {
  font-weight: 700;
  color: var(--navy);
  background: var(--gold-200);
  padding: 0 6px;
  border-radius: 6px;
}

/* Bullets ✅ — grid 26px + 1fr, gap 12px */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 16.5px;
  line-height: 1.45;
}
.checklist li::before { content: "✅"; font-size: 17px; }

/* Caixa de preço + CTA */
.pricebox {
  background: var(--white);
  border: 2px solid var(--mint-200);
  border-radius: var(--r-card);
  padding: clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-price);
}
.pricebox__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.price-old { font-size: 16px; color: var(--text-faint); text-decoration: line-through; }
.price-new {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 40px);
  line-height: 1;
  color: var(--blue);
}
.price-note { font-size: 15px; font-weight: 700; color: var(--text-body); }
.pricebox__seal { text-align: center; font-size: 13.5px; color: var(--text-soft); }

.btn {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: var(--r-pill);
  transition: background .18s ease;
}

.btn--hero {
  background: var(--navy);
  color: var(--white);
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: .01em;
  padding: 18px 22px;
  animation: pulseCta 2.6s ease-in-out infinite;
}
.btn--hero:hover { background: var(--navy-dark); color: var(--white); }
@keyframes pulseCta {
  0%, 100% { box-shadow: 0 10px 24px rgba(23, 69, 126, .30); }
  50%      { box-shadow: 0 14px 34px rgba(23, 69, 126, .48); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--hero { animation: none; box-shadow: 0 10px 24px rgba(23, 69, 126, .30); }
}

/* =========================================================
   Títulos de seção
   ========================================================= */
.h2 {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.15;
  color: var(--navy);
  text-wrap: pretty;
}
.h2--tight { margin-bottom: 20px; }
.h2--md    { margin-bottom: 24px; }

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lede {
  margin: 0 0 18px;
  max-width: 44em;
  font-size: clamp(16.5px, 1.7vw, 18.5px);
  line-height: 1.65;
  color: var(--text-body);
  text-wrap: pretty;
}
.lede--last { margin-bottom: 40px; }
.lede strong { color: var(--navy); }

/* =========================================================
   DOBRA 2 — Dor
   ========================================================= */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
}
.pain {
  margin: 0;
  background: var(--gray-50);
  border-left: 4px solid var(--mint-300);
  border-radius: var(--r-item);
  padding: 18px 20px;
  font-size: 16.5px;
  line-height: 1.5;
}
.closer {
  margin: 32px 0 0;
  background: var(--gold-200);
  border-radius: var(--r-box);
  padding: clamp(20px, 2.6vw, 28px);
  font-size: clamp(16.5px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--navy);
  text-wrap: pretty;
}

/* =========================================================
   DOBRA 3 — Mecanismo / o que tem dentro
   ========================================================= */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.card {
  background: var(--white);
  border-radius: var(--r-card);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: var(--shadow-card);
}
.pill {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pill--1 { color: var(--navy);      background: var(--mint-200); }
.pill--2 { color: var(--gold-text); background: var(--gold-200); }
.card__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.2vw, 26px);
  color: var(--navy);
}
.dotlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dotlist li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  font-size: 16px;
  line-height: 1.45;
}
.dotlist li::before { content: "·"; color: var(--blue); font-weight: 700; }

/* =========================================================
   DOBRA 4 — FAQ
   ========================================================= */
.faq { display: grid; gap: 14px; }
.faq__item { background: var(--gray-50); border-radius: var(--r-box); padding: 22px 24px; }
.faq__q {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18.5px;
  color: var(--navy);
}
.faq__a { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--text-body); }

/* =========================================================
   DOBRA 5 — Oferta final
   ========================================================= */
.final {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding: clamp(52px, 7vw, 100px) clamp(20px, 4vw, 40px);
}
.final__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.final__book {
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: var(--drop-book-sm);
}
.final__h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.15;
  color: var(--white);
  text-wrap: pretty;
}
.final__price {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--gold-200);
}
.btn--final {
  width: 100%;
  max-width: 520px;
  background: var(--gold);
  color: var(--navy);
  font-size: clamp(18px, 2.2vw, 23px);
  padding: 20px 24px;
  box-shadow: var(--shadow-cta);
}
.btn--final:hover { background: var(--gold-hover); color: var(--navy); }
.final__seal { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-onnavy); }

/* =========================================================
   Acessibilidade — anel de foco visível nos CTAs
   (o reference/ não define :focus-visible; adicionado aqui
   conforme o handoff. Não altera o design em repouso.)
   ========================================================= */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
/* Sobre o navy da dobra 5 o azul some — anel branco garante contraste. */
.btn--final:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 4px;
}

/* =========================================================
   <picture> como wrapper do mockup (WebP + fallback PNG).
   display:contents mantém o <img> como filho direto do flex,
   preservando exatamente o layout original.
   ========================================================= */
.hero__media picture,
.final__inner picture { display: contents; }
/* com display:contents o <source> vira item de flex e cria um gap extra */
picture > source { display: none; }