/* =========================================================
   Sozinha, não Perdida — Landing page de venda (referência estática)
   Mobile-first. Único breakpoint real: 900px (hero em 2 colunas).
   Estética editorial: serifada + creme + teal + dourado.
   ========================================================= */

:root {
  /* Cores — paleta tirada da capa do livro */
  --teal:        #0E5A5C; /* fundo das dobras 1 e 4, títulos, CTA da dobra 2 */
  --teal-dark:   #0B4547; /* hover do CTA teal, texto sobre dourado */
  --gold:        #D8B872; /* CTA principal, numerais, anéis decorativos */
  --gold-hover:  #EFCF8E; /* hover do CTA dourado */
  --gold-light:  #E8C880; /* acentos e textos pequenos sobre teal */
  --gold-deep:   #B9924A; /* eyebrows e grifos sobre fundo claro */
  --cream:       #FBF7F0; /* fundo da página, texto sobre teal */
  --cream-200:   #F2E9DA; /* texto do bloco de identificação */
  --cream-300:   #F2EADC; /* círculos decorativos, box de posicionamento */
  --line:        #E6DFD1; /* divisores do FAQ e da lista de dores */
  --line-soft:   #EFE8DA; /* divisores da lista numerada */
  --text:        #3A4A47; /* cor de texto padrão do body */
  --text-body:   #4A5A57; /* parágrafos e notas sobre creme */
  --text-onteal: #C9DEDB; /* corpo e notas sobre teal */
  --white:       #FFFFFF;

  /* Tipografia */
  --font-display: 'Cormorant Garamond', Georgia, serif; /* títulos, frases-âncora, numerais */
  --font-body:    'Karla', system-ui, sans-serif;        /* corpo, botões, eyebrows */

  /* Raios — a página é editorial: cantos quase retos, nunca pílula */
  --r-btn: 2px;
  --r-box: 4px;
}

*, *::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(--teal); text-decoration: none; }
a:hover { color: var(--gold-deep); }

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(48px, 6.5vw, 92px) clamp(20px, 4vw, 40px);
}
.section--teal  { background: var(--teal); }
.section--white { background: var(--white); }
.section__inner { position: relative; z-index: 1; margin: 0 auto; }
.section__inner--860 { max-width: 860px; }
.section__inner--900 { max-width: 900px; }
.section__inner--980 { max-width: 980px; }

/* ---------- Decoração ----------
   Dois tipos, CSS puro, sem SVG e sem imagem:
   .ring = círculo só com contorno dourado fino (sobre teal)
   .disc = círculo preenchido creme (sobre fundo claro) ou branco translúcido
   Ambos: z-index 0, pointer-events none, aria-hidden.
   Sobre teal os anéis ficam INTEIROS dentro da seção (ancoragem em %);
   sobre fundo claro os discos sangram de propósito (offsets negativos). */
.ring, .disc {
  position: absolute;
  z-index: 0;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--op, 1);
}
.ring { border: 1px solid var(--gold); }
.disc { background: var(--cream-300); }
.disc--white { background: var(--white); }

/* =========================================================
   DOBRA 1 — Hero de identificação (sobre teal)
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--teal);
  padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 40px) clamp(36px, 5vw, 64px);
}
.hero__grid {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1fr 1fr; }
}

.hero__media { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero__book {
  width: 100%;
  max-width: 430px;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 46px rgba(0, 0, 0, .42));
}
.hero__caption {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light); /* NÃO usar --gold aqui: 13px em --gold dá 4.18:1 */
}

.hero__copy { display: flex; flex-direction: column; gap: 26px; }

.hero__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(31px, 4.1vw, 50px);
  line-height: 1.14;
  color: var(--cream);
  text-wrap: pretty;
}
.hero__h1 em { font-style: italic; color: var(--gold-light); }

.hero__h2 {
  margin: 0;
  max-width: 36em;
  font-weight: 400;
  font-size: clamp(16.5px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--text-onteal);
  text-wrap: pretty;
}
.hero__h2 strong { font-weight: 600; color: var(--cream); }

/* Bloco de identificação: 4 frases serifadas atrás de uma régua dourada */
.identify {
  display: grid;
  gap: 14px;
  padding-left: clamp(16px, 2vw, 22px);
  border-left: 2px solid rgba(216, 184, 114, .45);
}
.identify p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.45;
  color: var(--cream-200);
}

.anchor-line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.35;
  color: var(--gold-light);
}

/* Grupo de CTA: botão sozinho na linha + dica abaixo ("↑ Clique no botão acima") */
.cta-group {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 12px;
}
.cta-hint {
  font-size: 14.5px;
  letter-spacing: .04em;
  color: var(--text-onteal);
}
.cta-hint--light { color: var(--text-body); } /* mesma dica sobre fundo creme */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: var(--r-btn);
  transition: background .18s ease;
}
.btn--gold {
  background: var(--gold);
  color: var(--teal-dark);
  font-size: clamp(14px, 1.5vw, 16px);
  padding: 18px 30px;
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .5);
}
.btn--gold:hover { background: var(--gold-hover); color: var(--teal-dark); }

.btn--teal {
  background: var(--teal);
  color: var(--cream);
  font-size: clamp(14px, 1.5vw, 16px);
  padding: 18px 30px;
  box-shadow: 0 14px 28px -14px rgba(14, 90, 92, .6);
}
.btn--teal:hover { background: var(--teal-dark); color: var(--cream); }

/* =========================================================
   Títulos de seção
   ========================================================= */
.h2 {
  margin: 0 0 34px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.2;
  color: var(--teal);
  text-wrap: pretty;
}
.h2 em { font-style: italic; color: var(--gold-deep); }
.h2--md    { margin-bottom: 26px; }
.h2--onteal { color: var(--cream); text-align: center; margin-bottom: 30px; }

.eyebrow {
  margin: 0 0 24px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

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

.lede--onteal { color: var(--text-onteal); max-width: none; }
.lede--onteal strong { font-weight: 600; color: var(--cream); }

/* Parágrafo serifado de fechamento de dobra */
.pull {
  margin: 34px 0 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.45;
  color: var(--teal);
  text-wrap: pretty;
}
.pull strong { font-weight: 700; }
.pull--gold { color: var(--gold-light); font-size: clamp(20px, 2.2vw, 26px); }

/* =========================================================
   DOBRA 2 — Agitação
   ========================================================= */
/* Lista de dores: cartões brancos separados por 1 hairline (gap sobre --line) */
.pain-list {
  display: grid;
  gap: 2px;
  background: var(--line);
  border-radius: var(--r-box);
  overflow: hidden;
}
.pain-list p {
  margin: 0;
  background: var(--white);
  padding: 20px clamp(20px, 2.4vw, 28px);
  font-size: 16.5px;
  line-height: 1.55;
}
.pain-list strong { font-weight: 700; color: var(--teal); }

/* =========================================================
   DOBRA 3 — O plano
   ========================================================= */
/* Lista numerada em 2 colunas quando cabe; numeral serifado dourado */
.plan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2px 28px;
}
.plan li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16.5px;
  line-height: 1.5;
}
.plan__num {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1;
  color: var(--gold);
}
.plan strong { font-weight: 700; color: var(--teal); }

/* Box de posicionamento ("não é anti-homem, é pró-você") */
.stance {
  margin: 44px 0 0;
  background: var(--cream-300);
  border-radius: var(--r-box);
  padding: clamp(24px, 3vw, 34px);
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.45;
  color: var(--teal);
  text-wrap: pretty;
}
.stance strong { font-weight: 700; }

/* =========================================================
   DOBRA 4 — Prova + Oferta final (mesma seção teal)
   ========================================================= */
.final {
  position: relative;
  overflow: hidden;
  background: var(--teal);
  padding: clamp(52px, 7vw, 100px) clamp(20px, 4vw, 40px);
}
/* A oferta é separada da prova por uma régua dourada, não por outra seção */
.offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
  padding-top: clamp(34px, 4.5vw, 48px);
  border-top: 1px solid rgba(216, 184, 114, .35);
}
.offer__book {
  width: 100%;
  max-width: 260px;
  height: auto;
  filter: drop-shadow(0 24px 38px rgba(0, 0, 0, .45));
}
.offer__price {
  margin: 0;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 27px);
  letter-spacing: .01em;
  color: var(--gold-light);
}
.btn--final {
  display: block;
  width: 100%;
  max-width: 540px;
  text-align: center;
  background: var(--gold);
  color: var(--teal-dark);
  font-size: clamp(15px, 1.7vw, 18px);
  padding: 21px 26px;
  box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .5);
}
.btn--final:hover { background: var(--gold-hover); color: var(--teal-dark); }
.offer__seal {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-onteal); /* NÃO usar um teal claro qualquer: precisa de ≥4.5:1 */
}
.offer__closer {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.45;
  color: var(--gold-light);
}

/* =========================================================
   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.)
   Cor do anel depende do fundo da seção, não do botão:
   dobras 1 e 4 são teal -> anel --gold-light; dobra 2 é
   creme -> anel --teal.
   ========================================================= */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.btn--teal:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.btn--gold:focus-visible,
.btn--final:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* =========================================================
   <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,
.offer picture { display: contents; }
/* com display:contents o <source> vira item de flex e cria um gap extra */
picture > source { display: none; }