/* ══════════════════════════════════════════════════════════════════════
   lp.salvemeucasamento.com — base e tokens

   A identidade não foi inventada aqui: os valores abaixo foram lidos direto
   do site salvemeucasamento.com.br/curso-21-dias, para que as duas páginas
   sejam reconhecidamente a mesma marca. Ao mexer em cor, raio ou peso,
   conferir lá antes.

   Premium, acolhedor e maduro. Escuro e quente, luz âmbar cinematográfica,
   dourado com moderação, muito espaço negativo. Nada de rosa, vermelho vivo,
   coração, neon ou dourado metálico.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Fundo ───────────────────────────────────────────────────────────
     Nenhum é preto puro — o calor mora no próprio fundo.                 */
  --bg:    #080604;   /* preto quente */
  --bg2:   #120c08;   /* faixa alternada */
  --card:  #18110c;   /* card padrão */
  --card2: #24170f;   /* card em destaque */

  /* ── Destaque ────────────────────────────────────────────────────────
     Dourado é o recurso mais caro da página. Em tudo, vira infoproduto
     genérico; fica restrito a label, palavra estratégica e CTA.          */
  --gold:  #f2b95f;   /* âmbar — destaque principal */
  --gold2: #ffd98a;   /* champagne — topo do gradiente do CTA */

  /* Terracota, só como luz de fundo. Nunca como cor de texto ou de botão:
     é o que aquece o canto esquerdo do hero sem virar "vermelho de oferta". */
  --red:   #b13c28;
  --green: #35d07f;   /* confirmação, checks */

  /* ── Texto ───────────────────────────────────────────────────────────
     Branco puro nunca. Sobre fundo quente ele vibra e endurece a página. */
  --text:  #fff8ed;   /* off-white creme */
  --muted: #d9c7ad;   /* bege quente */
  --escuro:#251108;   /* texto sobre o dourado */

  /* Borda com tinta dourada, não cinza: separa o card do fundo por
     temperatura. Se der para "ver a linha", está forte demais.           */
  --line: rgb(255 217 138 / 0.18);

  /* ── Tipografia ─────────────────────────────────────────────────────── */
  --fonte: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --t-xs:   0.75rem;
  --t-sm:   0.9375rem;
  --t-md:   clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --t-lg:   clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);
  --t-xl:   clamp(1.375rem, 1.2rem  + 0.9vw,  1.875rem);
  --t-2xl:  clamp(2rem,     1.5rem  + 2.4vw,  3rem);
  --t-3xl:  clamp(2.5rem,   1.7rem  + 3.9vw,  4.375rem);

  /* ── Espaço ─────────────────────────────────────────────────────────── */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4.5rem;
  --e-secao: clamp(4rem, 2.5rem + 5vw, 7rem);

  --max:       1160px;
  --max-texto: 40rem;

  --raio:   28px;
  --raio2:  18px;
  --pill:   999px;

  --sombra:      0 30px 90px rgb(0 0 0 / 0.45);
  --sombra-gold: 0 18px 50px rgb(242 185 95 / 0.28);
}

/* ── Reset enxuto ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* A luz da marca. Dois halos difusos — âmbar à direita, terracota à
   esquerda — sobre um gradiente vertical que escurece no rodapé. As
   camadas são amplas e de opacidade baixa de propósito: o que se vê é o
   fundo ficando mais quente, não um brilho com contorno. É essa difusão
   que separa luz cinematográfica de glow tecnológico.

   Sem `background-attachment: fixed`, de propósito. Os halos são círculos
   dimensionados pela caixa do elemento: preso à janela, o halo encolhe para
   a altura da tela e vira uma mancha localizada. Rolando com o documento —
   que é como o site da marca faz — ele cresce junto com a página e banha o
   terço superior inteiro. É essa diferença que separa "fundo quente" de
   "brilho no canto".                                                      */
body {
  margin: 0;
  min-height: 100svh;
  background:
    radial-gradient(circle at 70% 5%,  rgb(242 185 95 / 0.18), transparent 34%),
    radial-gradient(circle at 10% 18%, rgb(177 60 40 / 0.20),  transparent 26%),
    linear-gradient(#080604, #0d0906 52%, #050403);
  color: var(--text);
  font-family: var(--fonte);
  font-size: var(--t-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grade de 1px fixa, quase invisível, que some antes da metade da tela.
   Lida do site da marca (54px, opacidade ~0.025). De perto ninguém percebe
   uma grade: percebe que o fundo não é chapado. É o que dá a textura de
   estúdio por baixo da luz âmbar.                                        */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.027) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.024) 1px, transparent 1px);
  background-size: 54px 54px, 54px 54px;
  -webkit-mask-image: linear-gradient(#000, transparent 70%);
          mask-image: linear-gradient(#000, transparent 70%);
}

::selection { background: var(--gold); color: var(--escuro); }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

/* Entrelinha curta e tracking bem fechado: é o que dá o bloco tipográfico
   compacto e encorpado da marca. Sem isso, Inter grande fica solta e a
   página perde o ar editorial.                                           */
h1, h2, h3 {
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.045em;
  text-wrap: balance;
  margin: 0 0 var(--e-3);
}

h1 { font-size: var(--t-3xl); letter-spacing: -0.06em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); letter-spacing: -0.03em; line-height: 1.15; }

p { margin: 0 0 var(--e-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold); }

strong { font-weight: 600; color: var(--text); }

/* Palavra estratégica dentro do título. Nunca a frase inteira. */
.dourado { color: var(--gold); }

/* ── Label editorial ──────────────────────────────────────────────────── */
/* "PARA QUEM É", "COMO FUNCIONA" — caixa alta, tracking aberto, dourado.  */
.label {
  display: block;
  margin-bottom: var(--e-2);
  font-size: var(--t-xs);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── Estrutura ────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--e-3);
}

.container--texto { max-width: var(--max-texto); }

.secao { padding-block: var(--e-secao); }

/* ── Card ─────────────────────────────────────────────────────────────── */
.card {
  padding: var(--e-3);
  border: 1px solid var(--line);
  border-radius: var(--raio2);
  background: var(--card);
}

/* ── Botões ───────────────────────────────────────────────────────────── */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: 3.25rem;
  /* 16px 22px — a medida do botão no site da marca. Com 2rem de lateral os
     dois CTAs do hero não cabem lado a lado na coluna e quebram. */
  padding: var(--e-2) 1.375rem;
  border: 0;
  border-radius: var(--pill);
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  color: var(--escuro);
  font-family: inherit;
  font-size: var(--t-md);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sombra-gold);
  transition: filter 0.18s ease, transform 0.18s ease;
}

.botao:hover { filter: brightness(1.06); }
.botao:active { transform: translateY(1px); }

/* CTA secundário: quase transparente, borda dourada discreta. */
.botao--vazado {
  background: rgb(255 255 255 / 0.07);
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: none;
}

.botao--vazado:hover { border-color: var(--gold); filter: none; }

.botao--largo { width: 100%; max-width: 24rem; }

.botao:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── Utilitários ──────────────────────────────────────────────────────── */
.centro { text-align: center; }

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   SEÇÕES
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero ──────────────────────────────────────────────────────────── */
/* Quatro elementos, centralizados e empilhados nesta ordem:
     logo → promessa de transformação → para quem é → foto antes/depois

   Não há botão de compra aqui. Nesta página o preço só aparece depois do
   argumento inteiro, e a foto de antes/depois é que fecha a seção — ela
   sozinha já empurra a leitura para baixo, sem precisar de seta.

   Não há cabeçalho separado: o logo centralizado É a marca da dobra. Um
   cabeçalho por cima duplicaria a assinatura no mesmo campo de visão.     */
.hero {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) clamp(3.5rem, 2.5rem + 5vw, 6rem);
  text-align: center;
}

/* ── Logo ─────────────────────────────────────────────────────────────── */
.hero__logo {
  margin-bottom: var(--e-5);
}

/* Largura fluida em vez de altura fixa: a proporção do arquivo é conhecida
   (440x181), então travar a largura mantém a marca no mesmo tamanho ótico
   em qualquer tela sem depender de object-fit.                            */
.hero__logo img {
  width: clamp(11rem, 8.5rem + 7vw, 14rem);
  height: auto;
  margin-inline: auto;
}

/* ── Promessa ─────────────────────────────────────────────────────────── */
.hero__titulo {
  max-width: 21ch;   /* bloco compacto: poucas palavras por linha */
  margin-inline: auto;
  /* Sem linha de apoio entre o título e os tópicos, o respiro que era do
     parágrafo passa a ser do próprio título. */
  margin-bottom: var(--e-5);
}

/* ── Para quem é ──────────────────────────────────────────────────────── */
/* Em linha e centralizado, não em lista vertical: ocupa menos altura e
   deixa a foto de antes/depois mais perto da primeira tela.              */
.hero__paraquem-titulo {
  margin-bottom: var(--e-3);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text);
}

/* Grade de verdade, não flex com quebra livre: com quatro itens de larguras
   diferentes, o flex-wrap produz 3+1 desalinhado no desktop e linhas
   centralizadas esfarrapadas no celular. Duas colunas fixas dão 2×2 limpo,
   e o texto alinhado à esquerda dentro de um bloco centralizado lê melhor
   que quatro linhas centradas uma a uma.                                  */
.hero__paraquem {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-2) var(--e-4);
  max-width: 32rem;
  margin: 0 auto var(--e-5);
  padding: 0;
  font-size: var(--t-sm);
  color: var(--muted);
  text-align: left;
}

@media (min-width: 40em) {
  .hero__paraquem {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 44rem;
  }
}

.hero__paraquem li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.hero__paraquem li::before {
  content: "✓";
  flex-shrink: 0;
  color: var(--gold);
  font-weight: 900;
  line-height: 1.5;
}

/* ── Antes e depois ───────────────────────────────────────────────────── */
/* Sem moldura de gradiente aqui, de propósito: a arte já traz os cartões
   inclinados, os rótulos e os cantos arredondados. Emoldurar de novo seria
   moldura sobre moldura.                                                  */
.hero__antesdepois {
  max-width: 46rem;
  margin: 0 auto;
}

.hero__antesdepois img {
  width: 100%;
  height: auto;
}

/* ── 2. Reconhecimento da dor ─────────────────────────────────────────── */
/* A seção tem duas cores com significado: terracota é o problema (as
   ruminações), dourado é a saída (o box de transição). Nada mais na seção
   usa cor, para que essas duas leiam como sinal e não como decoração.    */
.dor {
  text-align: center;
}

.dor__eusei {
  margin-bottom: var(--e-2);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gold);
}

.dor__abertura,
.dor__narracao,
.dor__virada,
.dor__fecho {
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: var(--e-3);
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--muted);
}

.dor__abertura strong,
.dor__narracao strong,
.dor__virada strong,
.dor__fecho strong { color: var(--text); font-weight: 700; }

.dor__certo {
  margin-block: var(--e-4) var(--e-4);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ── O quadro: ruminações em volta da persona ─────────────────────────── */
.dor__quadro {
  display: grid;
  gap: var(--e-3);
  margin-block: var(--e-4) var(--e-5);
}

@media (min-width: 62em) {
  .dor__quadro {
    grid-template-columns: 1fr minmax(0, 26rem) 1fr;
    align-items: center;
    /* gap zero de propósito: o encaixe entre cards e imagem é feito pela
       margem negativa abaixo, e um gap aqui brigaria com ela. */
    gap: 0;
    max-width: 70rem;
    margin-inline: auto;
  }
}

.dor__ruminacoes {
  display: grid;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  align-content: center;
}

/* Sem isto os cards esticam até a borda da coluna e ficam longe da persona,
   o que desfaz a leitura de "pensamentos em volta dela". Encostá-los no lado
   de dentro os aproxima da imagem.                                        */
/* Os cards avançam sobre a imagem em vez de ficarem ao lado dela. É o que
   a referência pede, e tem uma vantagem prática: a imagem pode crescer sem
   empurrar os cards para fora do container, porque eles passam a dividir o
   mesmo espaço horizontal.

   z-index sobe junto — sem ele o card fica atrás da imagem, já que os dois
   são irmãos e a imagem vem depois na ordem do HTML.                      */
@media (min-width: 62em) {
  /* 1.5rem: o bastante para os cards encostarem na foto e lerem como
     sobrepostos, sem avançar sobre o casal — que é o assunto da imagem e
     fica bem no meio dela. Com 3.5rem os dois sumiam atrás do texto. */
  .dor__ruminacoes--esquerda { justify-items: end;   margin-right: -1.5rem; }
  .dor__ruminacoes--direita  { justify-items: start; margin-left:  -1.5rem; }

  .dor__ruminacoes { position: relative; z-index: 1; }
  .dor__ruminacao { max-width: 19rem; }
}

/* Card escuro com um fio de terracota. A cor entra na borda e num véu de
   fundo, nunca cheia — fundo vermelho puxaria a página para o visual de
   oferta que a identidade evita.                                          */
.dor__ruminacao {
  list-style: none;
  padding: 0.75rem var(--e-2);
  border: 1px solid rgb(177 60 40 / 0.5);
  border-radius: var(--raio2);
  /* Opaco, não translúcido: sobre a foto, um fundo com alfa deixaria a cama
     aparecer atrás do texto e o card perderia legibilidade. A cor é a mesma
     mistura de antes, já resolvida contra o fundo da página. */
  background: linear-gradient(180deg, #2a1511, #1d0f0c);
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.55);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  text-align: left;
}

@media (min-width: 62em) {
  .dor__ruminacoes--direita .dor__ruminacao { text-align: right; }
}

.dor__persona {
  margin: 0;
  border-radius: var(--raio);
  overflow: hidden;
}

.dor__persona img { width: 100%; height: auto; }

/* Abaixo de 62em a persona sai da coluna do meio e passa a ocupar a largura
   do container — que num tablet chega perto de 900px. Sem o teto, a imagem
   vira um pôster no meio da leitura.                                      */
@media (max-width: 61.999em) {
  .dor__persona { width: 100%; max-width: 22rem; margin-inline: auto; }
}

/* No celular a persona sobe para o topo do quadro. Na ordem do HTML ela fica
   no meio — que é o certo no desktop, com quatro cards de cada lado —, mas
   empilhado isso a deixa ensanduichada entre pensamentos, e quem lê encontra
   as frases antes de saber de quem são.                                   */
@media (max-width: 61.999em) {
  .dor__quadro { display: flex; flex-direction: column; }
  .dor__persona { order: -1; }
}

/* ── A caixa da virada ────────────────────────────────────────────────── */
/* Único bloco dourado da seção: é onde ela deixa de descrever o problema e
   abre a saída. As ruminações acima ficaram no terracota — a cor sinaliza a
   mudança de assunto antes de o texto ser lido.                          */
.dor__virada-caixa {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  max-width: 44rem;
  margin: var(--e-4) auto;
  padding: var(--e-4);
  border: 1px solid rgb(242 185 95 / 0.35);
  border-radius: var(--raio);
  background: linear-gradient(160deg, rgb(242 185 95 / 0.14), rgb(242 185 95 / 0.04));
  text-align: left;
}

.dor__virada-icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  color: var(--escuro);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}

.dor__virada-titulo {
  margin-bottom: var(--e-2);
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--gold);
}

.dor__virada-caixa p:last-child {
  margin: 0;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--muted);
}

.dor__virada-caixa p:last-child strong { color: var(--text); font-weight: 700; }

/* No celular o ícone sai da linha do texto e vira um selo acima: com 375px
   de largura, tirar 3rem da coluna de texto custa uma linha a mais em cada
   parágrafo.                                                              */
@media (max-width: 34em) {
  .dor__virada-caixa {
    flex-direction: column;
    gap: var(--e-2);
    padding: var(--e-3);
  }
}

.dor__fecho {
  margin-top: var(--e-4);
  margin-bottom: 0;
}

/* ── Filete ───────────────────────────────────────────────────────────── */
/* Abre seção sem precisar de título sobrando. Decorativo — fica fora do
   fluxo de leitura por aria-hidden no HTML.                               */
.filete {
  display: block;
  width: 5rem;
  height: 5px;
  margin: 0 auto var(--e-4);
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--gold2), var(--gold));
}

/* ── 3. Como funciona — os 3 passos ───────────────────────────────────── */
.passos {
  text-align: center;
}

.passos__titulo {
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: var(--e-6);
}

.passos__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

/* A seta precisa de espaço para caber entre os cards. No desktop ela mora no
   gap; por isso o gap aqui é maior que o de uma grade comum.              */
@media (min-width: 56em) {
  .passos__lista {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-6);
    align-items: stretch;
  }
}

.passo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-5) var(--e-3) var(--e-4);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  background: var(--card);
}

/* O selo monta na borda de cima, metade dentro e metade fora, como no
   modelo. O padding-top maior do card é o que abre o lugar para ele.      */
.passo__selo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.375rem 0.875rem;
  border: 1px solid rgb(242 185 95 / 0.35);
  border-radius: var(--pill);
  /* Opaco: ele cavalga a borda do card, e com fundo translúcido a linha da
     borda apareceria atravessando o texto. */
  background: #1d1409;
  font-size: var(--t-xs);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

.passo__icone {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgb(242 185 95 / 0.18), rgb(242 185 95 / 0.05));
  color: var(--gold);
}

.passo__icone svg { width: 2.25rem; height: 2.25rem; }

.passo__texto {
  margin: 0;
  max-width: 18ch;
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ── As setas entre os passos ─────────────────────────────────────────── */
/* Feitas com ::after do próprio card. No desktop apontam para a direita, no
   celular para baixo — o mesmo elemento, girado, seguindo a direção em que
   a lista realmente corre em cada largura.                                */
.passo:not(:last-child)::after {
  content: "→";
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  color: var(--escuro);
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.45);
}

@media (max-width: 55.999em) {
  .passo:not(:last-child)::after {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%) rotate(90deg);
  }
}

@media (min-width: 56em) {
  .passo:not(:last-child)::after {
    top: 50%;
    right: 0;
    /* 2.25rem = metade do gap de 4.5rem entre os cards. Com right:0 o centro
       da seta cai na borda do card menos metade dela; somar meia largura
       (50%) mais meio vão põe o centro exatamente no meio do vão. */
    transform: translate(calc(50% + 2.25rem), -50%);
  }
}

/* ── 4. Benefícios ────────────────────────────────────────────────────── */
.beneficios {
  text-align: center;
}

.beneficios__titulo {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: var(--e-5);
}

/* Uma coluna no celular, duas no tablet, três no desktop — com seis cards,
   qualquer uma das três dá linhas cheias, sem card órfão na última fila.  */
.beneficios__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .beneficios__lista { grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
}

@media (min-width: 62em) {
  .beneficios__lista { grid-template-columns: repeat(3, 1fr); }
}

.beneficio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-3);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  background: var(--card);
}

.beneficio__icone {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgb(242 185 95 / 0.18), rgb(242 185 95 / 0.05));
  color: var(--gold);
}

.beneficio__icone svg { width: 2.25rem; height: 2.25rem; }

.beneficio__texto {
  margin: 0;
  max-width: 22ch;
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ── 5. O que você recebe ─────────────────────────────────────────────── */
.entregas {
  text-align: center;
}

.entregas__titulo {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: var(--e-5);
}

.entregas__lista {
  display: grid;
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.entrega {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-3);
  align-items: center;
  padding: var(--e-3);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  background: var(--card);
  text-align: left;
}

@media (min-width: 52em) {
  .entrega {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-4);
    padding: var(--e-4);
  }

  /* O zigue-zague. Trocar a ordem no CSS, e não no HTML, mantém a leitura
     título→descrição→imagem para quem usa leitor de tela, independente do
     lado em que a imagem aparece na tela.                                 */
  .entrega:nth-child(even) .entrega__texto  { order: 2; }
  .entrega:nth-child(even) .entrega__mockup { order: 1; }
}

/* No celular o mockup vem antes do texto: a imagem diz "aqui começa outro
   item" mais rápido do que o título.                                      */
@media (max-width: 51.999em) {
  .entrega__mockup { order: -1; }
}

.entrega__texto {
  padding-inline: var(--e-1);
}

.entrega__titulo {
  margin-bottom: var(--e-2);
  color: var(--gold);
}

.entrega__texto p {
  margin: 0;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--muted);
}

/* Os mockups vêm com fundo transparente e já têm sombra própria desenhada.
   Nada de moldura ou card em volta: seria moldura sobre moldura, e o fundo
   escuro da página já dá o contraste de que eles precisam.                */
.entrega__mockup {
  margin: 0;
}

.entrega__mockup img {
  width: 100%;
  height: auto;
}

/* ── 6. Bônus ─────────────────────────────────────────────────────────── */
/* Os mockups desta seção são quase quadrados (900x945), enquanto os da
   seção anterior são deitados (940x627). Ocupando a mesma largura de
   coluna, os quadrados ficam ~50% mais altos e o bloco inteiro cresce
   junto — as duas seções deixam de parecer a mesma coisa.

   Travar a altura, e não a largura, é o que iguala: a imagem encolhe até
   caber na mesma faixa vertical dos mockups deitados e se centraliza no
   espaço que sobra.                                                      */
.bonus .entrega__mockup img {
  /* 21.25rem = 340px, que é exatamente a altura em que os mockups deitados
     da seção anterior renderizam na mesma coluna. Com isso os blocos das
     duas seções ficam com a mesma altura. */
  max-height: 21.25rem;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

/* Só o cabeçalho é próprio; os blocos reusam .entrega da seção anterior. */
.bonus__chamada {
  margin-bottom: var(--e-2);
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--gold);
}

/* ── 7. Para quem é ───────────────────────────────────────────────────── */
.para-quem {
  text-align: center;
}

.para-quem__titulo {
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: var(--e-5);
}

.para-quem__quadro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
  align-items: center;
  padding: var(--e-3);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  background: var(--card);
}

@media (min-width: 56em) {
  .para-quem__quadro {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--e-5);
    padding: var(--e-4);
  }
}

.para-quem__foto {
  margin: 0;
  border-radius: var(--raio2);
  overflow: hidden;
}

.para-quem__foto img { width: 100%; height: auto; }

.para-quem__lista {
  display: grid;
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

/* O check é desenhado no ::before, não é emoji: emoji traz a própria cor
   (verde), e aqui ele precisa ser dourado como o resto da página.        */
.para-quem__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--muted);
}

.para-quem__lista li::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15em;
  border-radius: 50%;
  background:
    /* o "tique", desenhado em gradiente para não precisar de mais um SVG */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23251108' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 0.9rem no-repeat,
    linear-gradient(135deg, var(--gold2), var(--gold));
}

.para-quem__enfim {
  margin: var(--e-5) 0 var(--e-3);
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--gold);
}

.para-quem__fecho {
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: var(--e-3);
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--muted);
}

.para-quem__fecho strong { color: var(--text); font-weight: 700; }

/* A última linha é a conclusão da seção — sobe de tamanho e de peso para
   fechar, em vez de terminar no mesmo tom do parágrafo anterior.         */
.para-quem__fecho--forte {
  max-width: 26ch;
  margin-bottom: 0;
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ── 8. Recapitulando ─────────────────────────────────────────────────── */
.recap {
  text-align: center;
}

.recap__chamada {
  margin-bottom: var(--e-2);
  font-size: var(--t-xs);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.recap__titulo {
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: var(--e-4);
}

.recap__quadro {
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  background: var(--card);
}

@media (min-width: 40em) {
  .recap__quadro { padding: var(--e-3) var(--e-4); }
}

.recap__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Linha tracejada entre os itens, como no modelo: separa sem pesar. A
   última não tem, para a lista não terminar em traço solto.              */
.recap__lista li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  padding-block: 0.875rem;
  border-bottom: 1px dashed var(--line);
  text-align: left;
}

.recap__lista li:last-child { border-bottom: 0; }

/* O check é desenhado, não emoji — emoji ✅ traz o próprio verde. */
.recap__lista li::before {
  content: "";
  align-self: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23251108' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 0.8rem no-repeat,
    linear-gradient(135deg, var(--gold2), var(--gold));
}

.recap__item {
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--text);
}

/* Riscado e em terracota claro: sinaliza "este é o valor que você NÃO vai
   pagar". O --red da paleta é escuro demais para texto pequeno aqui.     */
.recap__preco {
  font-size: var(--t-sm);
  font-weight: 700;
  white-space: nowrap;
  color: #e08163;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.recap__soma {
  max-width: 34rem;
  margin: var(--e-4) auto var(--e-3);
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--muted);
}

.recap__soma strong {
  color: #e08163;
  font-weight: 800;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.recap__fecho {
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: var(--e-2);
  font-size: var(--t-lg);
  color: var(--muted);
}

.recap__fecho--forte {
  max-width: 30ch;
  margin-top: var(--e-3);
  margin-bottom: 0;
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ── 9. Oferta ────────────────────────────────────────────────────────── */
/* O bloco mais importante da página. Ele é o único com fundo mais claro que
   o resto e com um halo dourado por trás — depois de nove seções escuras, é
   isso que faz o olho parar aqui.                                         */
.oferta__quadro {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
  align-items: center;
  max-width: 62rem;
  margin-inline: auto;
  padding: var(--e-4) var(--e-3);
  border: 1px solid rgb(242 185 95 / 0.3);
  border-radius: var(--raio);
  background:
    radial-gradient(80% 60% at 50% 0%, rgb(242 185 95 / 0.10), transparent 70%),
    var(--card2);
  box-shadow: var(--sombra);
}

@media (min-width: 56em) {
  .oferta__quadro {
    grid-template-columns: 1fr 0.9fr;
    gap: var(--e-5);
    padding: var(--e-5);
  }
}

.oferta__pack {
  margin: 0;
}

.oferta__pack img { width: 100%; height: auto; }

.oferta__caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  text-align: center;
}

.oferta__logo {
  width: clamp(10rem, 8rem + 6vw, 13rem);
  height: auto;
  margin-bottom: var(--e-1);
}

.oferta__rotulo {
  margin: 0;
  font-size: var(--t-md);
  color: var(--muted);
}

/* O preço é o maior número da página inteira. Nada perto dele pode competir
   em tamanho, ou ele deixa de ser a resposta à pergunta que a pessoa está
   fazendo neste ponto.                                                    */
.oferta__parcela {
  margin: 0;
  font-size: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--text);
}

.oferta__parcela strong { color: var(--gold); font-weight: 800; }

.oferta__avista {
  margin: 0 0 var(--e-2);
  font-size: var(--t-lg);
  color: var(--muted);
}

.oferta__avista strong { color: var(--text); font-weight: 700; }

/* ── Selos de confiança ───────────────────────────────────────────────── */
.oferta__selos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2) var(--e-3);
  width: 100%;
  margin: var(--e-2) 0 0;
  padding-top: var(--e-3);
  border-top: 1px dashed var(--line);
  list-style: none;
}

.oferta__selos li {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--t-xs);
  line-height: 1.2;
  color: var(--muted);
}

.oferta__selos strong { display: block; color: var(--text); font-weight: 700; }

.oferta__selos svg {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  color: var(--gold);
}

.oferta__selos span { text-align: left; }

/* ── 10. Como você recebe ─────────────────────────────────────────────── */
.acessos {
  text-align: center;
}

.acessos__titulo {
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: var(--e-5);
}

.acessos__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .acessos__lista { grid-template-columns: repeat(3, 1fr); gap: var(--e-3); }
}

.acesso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-3);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  background: var(--card);
}

/* Sem o círculo de fundo dos outros ícones da página: aqui eles são três em
   sequência e o traço sozinho, maior, lê mais rápido — é instrução, não
   ornamento.                                                              */
.acesso__icone {
  color: var(--gold);
}

.acesso__icone svg { width: 2.75rem; height: 2.75rem; }

.acesso__titulo {
  margin: 0;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
  color: var(--text);
}

.acesso p {
  margin: 0;
  max-width: 26ch;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
}

/* ── 11. Quem são os criadores ────────────────────────────────────────── */
.criadores__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
  align-items: center;
}

@media (min-width: 56em) {
  .criadores__grade {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--e-6);
  }

  /* A foto está depois do texto no HTML, para o leitor de tela ouvir
     primeiro quem são eles. No desktop ela volta para a esquerda, que é
     onde a referência a coloca.                                          */
  .criadores__foto  { order: 1; }
  .criadores__texto { order: 2; }
}

/* No celular a foto sobe para o topo. Empilhada na ordem do HTML, ela caía
   depois de cinco parágrafos — numa seção que existe para gerar confiança,
   o rosto precisa chegar antes do currículo.                             */
@media (max-width: 55.999em) {
  .criadores__foto { order: -1; }
  .criadores__grade { display: flex; flex-direction: column; }
}

.criadores__titulo {
  margin-bottom: var(--e-3);
  font-size: var(--t-2xl);
}

.criadores__texto p {
  margin-bottom: var(--e-2);
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--muted);
}

.criadores__texto p:last-child { margin-bottom: 0; }

.criadores__texto strong { color: var(--text); font-weight: 600; }

/* O halo âmbar por trás da foto — mesmo recurso de luz do hero. É o único
   lugar da página onde se vê o rosto de quem está por trás do produto, e a
   luz é o que separa a foto do fundo sem precisar de moldura.            */
.criadores__foto {
  position: relative;
  isolation: isolate;
  margin: 0;
  max-width: 26rem;
  margin-inline: auto;
}

.criadores__foto::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgb(242 185 95 / 0.22), transparent 68%);
}

.criadores__foto img {
  width: 100%;
  height: auto;
  border-radius: var(--raio);
}

/* ── 12. As duas opções ───────────────────────────────────────────────── */
.decisao {
  text-align: center;
}

.decisao__titulo {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: var(--e-5);
}

.decisao__opcoes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-3);
  max-width: 58rem;
  margin: 0 auto var(--e-5);
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .decisao__opcoes { grid-template-columns: repeat(2, 1fr); }
}

.opcao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-3) var(--e-3);
  border-radius: var(--raio);
  text-align: left;
}

/* As duas cores da página inteira, repetidas aqui com o mesmo significado
   que tiveram na seção da dor: terracota é o que dói, dourado é a saída. */
.opcao--ruim {
  border: 1px solid rgb(177 60 40 / 0.45);
  background: linear-gradient(180deg, rgb(177 60 40 / 0.13), rgb(177 60 40 / 0.04));
}

.opcao--boa {
  border: 1px solid rgb(242 185 95 / 0.4);
  background: linear-gradient(180deg, rgb(242 185 95 / 0.13), rgb(242 185 95 / 0.04));
}

.opcao__selo {
  padding: 0.3125rem 0.75rem;
  border-radius: var(--pill);
  font-size: var(--t-xs);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.opcao--ruim .opcao__selo { background: rgb(177 60 40 / 0.9); color: #fff2ee; }
.opcao--boa  .opcao__selo { background: linear-gradient(135deg, var(--gold2), var(--gold)); color: var(--escuro); }

.opcao__icone {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.opcao__icone svg { width: 1.375rem; height: 1.375rem; }

.opcao--ruim .opcao__icone { background: rgb(177 60 40 / 0.22); color: #e08163; }
.opcao--boa  .opcao__icone { background: rgb(242 185 95 / 0.18); color: var(--gold); }

.opcao__titulo {
  margin: 0;
  font-size: var(--t-lg);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
}

.opcao p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
}

.decisao__fecho {
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: var(--e-3);
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--muted);
}

.decisao__fecho strong { color: var(--text); font-weight: 700; }

.decisao__fecho--forte {
  max-width: 26ch;
  margin-top: var(--e-4);
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
}

.decisao__acao {
  display: flex;
  justify-content: center;
  margin-top: var(--e-4);
}

/* ── 13. Perguntas frequentes ─────────────────────────────────────────── */
.faq {
  text-align: center;
}

.faq__titulo {
  margin-bottom: var(--e-4);
}

.faq__lista {
  display: grid;
  gap: var(--e-2);
  max-width: 48rem;
  margin-inline: auto;
  text-align: left;
}

.pergunta {
  border: 1px solid var(--line);
  border-radius: var(--raio2);
  background: var(--card);
}

/* Aberta, ganha um fio dourado — quem rolou de volta reencontra na hora a
   pergunta que estava lendo.                                             */
.pergunta[open] { border-color: rgb(242 185 95 / 0.35); }

.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-3);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  /* Some o triângulo padrão: o Safari usa ::-webkit-details-marker e o
     resto usa o list-style do summary. Precisa dos dois. */
  list-style: none;
}

.pergunta summary::-webkit-details-marker { display: none; }

.pergunta summary:hover { color: var(--gold); }

.pergunta summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-radius: var(--raio2);
}

.pergunta__seta {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgb(242 185 95 / 0.12);
  color: var(--gold);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 0.3s ease;
}

.pergunta__seta svg { width: 1rem; height: 1rem; }

.pergunta[open] .pergunta__seta {
  transform: rotate(180deg);
  background: rgb(242 185 95 / 0.22);
}

.pergunta__resposta {
  padding: 0 var(--e-3) var(--e-3);
  /* Reserva: onde a altura não pode ser animada (regra abaixo), o texto
     entra deslizando. Sozinho não é a gaveta abrindo — é o conteúdo
     aparecendo dentro de uma caixa que já saltou de tamanho. */
  animation: abrirResposta 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes abrirResposta {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to   { opacity: 1; transform: none; }
}

/* ── A gaveta abrindo de verdade ──────────────────────────────────────── */
/* Animar a altura de um <details> foi impossível por anos: o conteúdo é
   display:none quando fechado, e transição nenhuma roda a partir daí. O
   ::details-content resolveu isso — ele é a caixa que embrulha o conteúdo,
   e o par interpolate-size + allow-discrete permite ir de 0 até "auto".

   Fica dentro do @supports porque é novo (Chrome 131, Safari 18.4). Onde
   não existe, a animação de cima continua valendo e nada quebra.        */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }

  .pergunta::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
      content-visibility 0.4s allow-discrete;
  }

  .pergunta[open]::details-content { block-size: auto; }

  /* Com a altura animando, o deslize do texto vira movimento em cima de
     movimento. Sobra só o fade, que acompanha a abertura. */
  .pergunta__resposta {
    animation: none;
    opacity: 0;
    transition: opacity 0.3s ease 0.12s;
  }

  .pergunta[open] .pergunta__resposta { opacity: 1; }
}

.pergunta__resposta p {
  margin-bottom: var(--e-2);
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--muted);
}

.pergunta__resposta p:last-child { margin-bottom: 0; }

.pergunta__resposta strong { color: var(--text); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   REVELAÇÃO AO ROLAR
   Tudo aqui depende da classe .revelar no <html>, posta pelo script no
   <head> apenas quando há IntersectionObserver e a pessoa não pediu menos
   movimento. Sem ela, nenhuma destas regras vale e a página aparece
   inteira — que é o comportamento correto quando o JavaScript falha.
   ══════════════════════════════════════════════════════════════════════ */

.revelar [data-revelar] {
  opacity: 0;
  transform: translateY(1.75rem);
}

.revelar [data-revelar].revelado {
  opacity: 1;
  transform: none;
  /* O atraso vem do JS, em cascata dentro de cada grupo de cards. */
  transition:
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--atraso, 0s),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--atraso, 0s);
}

/* O hero fica de fora: está na primeira tela, e esconder para revelar em
   seguida só atrasaria o que a pessoa veio ver. */