/* ==========================================================================
   Fábrica de Conteúdo com IA — landing page
   HTML + CSS puro, mobile-first, sem framework.

   Organização do arquivo:
     1. Tokens
     2. Reset e base
     3. Utilitários de layout
     4. Componentes (um bloco por seção, na ordem da página)

   Convenção de seletores: uma classe por regra, nomenclatura BEM
   (bloco__elemento--modificador). Sem seletores aninhados e sem seletores
   de elemento para espaçamento — evita que regras de seções diferentes se
   cancelem por especificidade.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Cor — extraída do design de referência */
  --c-white:        #FFFFFF;
  --c-ink:          #1A1A1A;   /* corpo sobre claro */
  --c-ink-soft:     #4A4A4F;   /* corpo secundário sobre claro */
  --c-ink-light:    #D4D4D8;   /* corpo sobre escuro */
  --c-black:        #0A0A0C;   /* fundo das seções escuras */
  --c-lavender:     #E4E7F5;   /* fundo da seção de entregáveis */
  --c-surface:      #F2F4F8;   /* cartões claros sobre branco, foto ou escuro */
  --c-grid:         rgba(255, 255, 255, 0.045); /* grade das seções escuras */
  --c-panel:        #0E111A;   /* card elevado sobre o preto */
  --c-muted:        #949CAD;   /* rótulos e apoio sobre escuro */
  --c-leader:       #C9CFDA;   /* pontilhado da lista de preços */
  --c-hairline:     rgba(255, 255, 255, 0.10); /* borda fina sobre escuro */

  --c-blue-action:  #1F5FE0;   /* ênfase, rótulos, checks e botão */
  --c-blue-deep:    #1B54B8;   /* fim do gradiente das faixas */
  --c-cyan:         #22C4D8;   /* início do gradiente, bordas dos cards */
  --c-cyan-soft:    #6FCEDF;   /* borda dos cards de benefício */
  --c-gold:         #EDB55B;   /* números de destaque */
  --c-green:        #22A94F;   /* check do badge */
  --c-red:          #C92A22;   /* linha de tensão */
  --c-violet:       #4A2FB0;   /* destaque no primeiro balão */

  --gradient-faixa: linear-gradient(
                      90deg,
                      var(--c-cyan) 0%,
                      #1C86C9 30%,
                      var(--c-blue-deep) 100%);

  /* Grade das seções escuras. Compartilhada pelas seções 4 e 6: quem usa
     define só background-color e, se precisar, camadas extras depois desta. */
  --bg-grade: linear-gradient(var(--c-grid) 1px, transparent 1px),
              linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);

  /* Círculo atrás do mockup do hero — mesma família da faixa, na diagonal */
  --gradient-circulo: linear-gradient(
                      118deg,
                      var(--c-cyan) 0%,
                      #2A7FD4 55%,
                      var(--c-blue-deep) 100%);

  /* Tipografia — Inter em toda a página, hierarquia por peso */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --w-regular:  400;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

  /* Escala tipográfica — fluida entre 360px e 1200px de viewport */
  --fs-banner:  clamp(1rem,    0.86rem + 0.62vw, 1.25rem);
  --fs-h2:      clamp(1.25rem, 1.05rem + 0.88vw, 1.75rem);
  --fs-lead:    clamp(1.02rem, 0.94rem + 0.36vw, 1.22rem);
  --fs-caption: clamp(0.86rem, 0.82rem + 0.18vw, 0.95rem);
  --fs-hero:    clamp(1.05rem, 0.92rem + 0.62vw, 1.38rem);
  --fs-badge:   clamp(0.88rem, 0.83rem + 0.24vw, 1.06rem);
  --fs-body:    clamp(0.95rem, 0.89rem + 0.27vw, 1.06rem);

  /* Espaçamento */
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-16: 4rem;

  /* Layout */
  --wrap:      1120px;
  --gutter:    clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --logo-w:    clamp(10.5rem, 7.5rem + 12vw, 15.5rem);
  --mockup-w:  clamp(17rem, 10rem + 30vw, 34rem);
}

/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

p {
  margin: 0;
}

/* Foco visível — piso de qualidade, nunca removido */
:focus-visible {
  outline: 3px solid var(--c-blue-action);
  outline-offset: 3px;
}

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

/* ==========================================================================
   3. UTILITÁRIOS DE LAYOUT
   ========================================================================== */

/* Sprite fora de fluxo: guarda os <symbol> sem ocupar espaço nem aparecer. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   4. COMPONENTES
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Topo — faixa branca, logo centralizado
   -------------------------------------------------------------------------- */

.site-header {
  display: flex;
  justify-content: center;
  padding-block: clamp(var(--sp-6), 3.5vw, var(--sp-8));
  padding-inline: var(--gutter);
  background: var(--c-white);
}

.site-header__logo {
  width: var(--logo-w);
  height: auto;
}

/* --------------------------------------------------------------------------
   2. Faixa gradiente ciano to azul. Duas instâncias: a pergunta de abertura
      (seção 2, um <p>) e o anúncio dos bônus (seção 9, o <h2> da seção 10).
   -------------------------------------------------------------------------- */

.banner {
  padding-block: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  padding-inline: var(--gutter);
  background: var(--gradient-faixa);
  text-align: center;
}

/* margin explícita porque este bloco calça tanto <p> quanto <h2>, e o
   heading traria a margem do user agent junto. */
.banner__lead {
  max-width: var(--wrap);
  margin: 0 auto;
  color: var(--c-white);
  font-size: var(--fs-banner);
  font-weight: var(--w-bold);
  line-height: 1.35;
  text-wrap: balance;
}

.banner__shout {
  display: block;
  text-transform: uppercase;
}

.banner__note {
  display: block;
}

/* --------------------------------------------------------------------------
   3. Hero — headline, badge de reforço e mockup sobre o círculo gradiente
   -------------------------------------------------------------------------- */

.hero {
  background: var(--c-white);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  padding-block: clamp(var(--sp-8), 4.5vw, var(--sp-10)) 0;
  text-align: center;
}

.hero__title {
  max-width: 62rem;
  margin: 0;
  color: var(--c-ink);
  font-size: var(--fs-hero);
  font-weight: var(--w-regular);
  line-height: 1.4;
  text-wrap: balance;
}

.hero__title strong {
  font-weight: var(--w-bold);
}

.hero__title-accent {
  color: var(--c-blue-action);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 2px solid var(--c-ink);
  border-radius: 999px;
  background: var(--c-white);
  font-size: var(--fs-badge);
  line-height: 1.3;
  text-align: left;
}

.hero__badge-check {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--c-green);
}

/* O mockup é PNG com fundo transparente: o círculo vive no CSS, atrás dele.
   O mockup é quadrado (1080x1080), então sua altura renderizada é igual a
   --mockup-w — o que permite ancorar, dimensionar e cortar tudo em calc()
   sobre essa única medida, em vez de porcentagens que mudariam de significado
   conforme a altura do stage.

   O stage é mais baixo que a imagem de propósito: na referência o hero não
   termina, ele é cortado pela seção escura. O overflow recorta o rodapé do
   celular e a base do círculo, e a seção 4 encosta direto nesse corte. */
.hero__stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: calc(var(--mockup-w) * 0.80);
  overflow: hidden;
}

.hero__stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--mockup-w) * 0.48);
  left: 50%;
  translate: -50% 0;
  width: calc(var(--mockup-w) * 0.80);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gradient-circulo);
}

/* O <picture> some do layout para o <img> continuar sendo o item flex. */
.hero__mockup-fonte {
  display: contents;
}

.hero__mockup {
  position: relative;
  z-index: 1;
  width: var(--mockup-w);
  height: auto;
}

/* --------------------------------------------------------------------------
   4. Prova social — três posts com as métricas do Instagram, sobre fundo
      preto com grade. Primeira das duas seções escuras da página.
   -------------------------------------------------------------------------- */

/* Camadas do fundo, de cima para baixo: as duas linhas da grade e o brilho
   azul no canto inferior esquerdo. A cor sólida fica em background-color. */
.proof {
  background-color: var(--c-black);
  background-image:
    var(--bg-grade),
    radial-gradient(58% 46% at 0% 100%, rgba(27, 84, 184, 0.38), transparent 72%);
  background-size: 48px 48px, 48px 48px, 100% 100%;
}

.proof__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--sp-6), 3.5vw, var(--sp-10));
  padding-block: clamp(var(--sp-10), 6vw, var(--sp-16));
  text-align: center;
}

/* Caixa alta aplicada no CSS: o HTML fica em caixa normal para o leitor de
   tela não soletrar as palavras letra a letra. */
.proof__title {
  max-width: 62rem;
  margin: 0;
  color: var(--c-white);
  font-size: var(--fs-h2);
  font-weight: var(--w-black);
  line-height: 1.25;
  text-transform: uppercase;
  text-wrap: balance;
}

.proof__title-accent {
  color: var(--c-gold);
}

.proof__subtitle {
  display: block;
  margin-top: var(--sp-2);
  font-size: 0.82em;
  font-weight: var(--w-regular);
  letter-spacing: 0.01em;
}

.proof__list {
  display: grid;
  gap: clamp(var(--sp-6), 3vw, var(--sp-8));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.proof__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

/* O rótulo é mais estreito que o print, como na referência. */
.proof__caption {
  width: 88%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0.5rem;
  background: var(--c-white);
  color: var(--c-ink);
  font-size: var(--fs-caption);
  line-height: 1.4;
  text-align: left;
}

.proof__caption strong {
  font-weight: var(--w-bold);
}

.proof__caption-accent {
  color: var(--c-blue-action);
}

.proof__shot {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.proof__closing {
  max-width: 52rem;
  color: var(--c-ink-light);
  font-size: var(--fs-lead);
  line-height: 1.5;
  /* pretty preenche a linha e so evita a orfa; balance distribuiria as duas
     linhas por igual, que nao e como a referencia quebra este paragrafo. */
  text-wrap: pretty;
}

.proof__closing strong {
  color: var(--c-white);
  font-weight: var(--w-bold);
}

@media (min-width: 54em) {
  .proof__list {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
  }

  /* Sem o subgrid, uma legenda que quebra em mais linhas empurra o print
     para baixo e as três colunas deixam de alinhar. */
  .proof__item {
    grid-row: span 2;
    display: grid;
    grid-template-rows: subgrid;
    /* Os tres prints tem alturas intrinsecas diferentes (1066/1078/1089).
       Sem isto eles esticam para a altura da linha e os topos se deslocam. */
    align-items: start;
    /* No grid quem centraliza no eixo horizontal e justify-items; o
       align-items herdado do flex do mobile so age no eixo vertical. */
    justify-items: center;
  }
}

/* --------------------------------------------------------------------------
   5. Fala a verdade — objeções em balões sobre a foto
   -------------------------------------------------------------------------- */

.truth {
  background: var(--c-white);
}

.truth__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding-block: clamp(var(--sp-10), 6vw, var(--sp-16));
  text-align: center;
}

/* Título da seção só no sentido semântico: na referência esta linha tem o
   mesmo peso e corpo do texto ao redor, então não recebe destaque visual. */
.truth__title {
  margin: 0;
  color: var(--c-ink);
  font-size: var(--fs-lead);
  font-weight: var(--w-regular);
  line-height: 1.5;
}

.truth__lead {
  max-width: 44rem;
  color: var(--c-ink);
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: balance;
}

.truth__cue {
  max-width: 44rem;
  margin-top: var(--sp-2);
  color: var(--c-red);
  font-size: var(--fs-lead);
  font-weight: var(--w-bold);
  line-height: 1.5;
  text-wrap: balance;
}

.truth__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: 30rem;
  margin-top: var(--sp-6);
}

.truth__photo {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.truth__thoughts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.truth__thought {
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0.6rem;
  background: var(--c-surface);
  box-shadow: 0 6px 18px rgba(10, 10, 12, 0.18);
  color: var(--c-ink);
  font-size: var(--fs-caption);
  font-weight: var(--w-bold);
  line-height: 1.4;
  text-align: left;
}

.truth__mark {
  color: var(--c-blue-action);
}

/* A partir daqui os balões deixam de ser empilhados e passam a cobrir a borda
   esquerda da foto, como na referência. Ambos ocupam a mesma célula do grid:
   a foto encosta à direita, os balões à esquerda, e a soma das larguras
   maior que 100% cria a sobreposição. */
@media (min-width: 54em) {
  .truth__scene {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 34rem;
  }

  .truth__photo {
    grid-area: 1 / 1;
    justify-self: end;
    width: 68%;
  }

  .truth__thoughts {
    grid-area: 1 / 1;
    z-index: 1;
    align-self: center;
    justify-self: start;
    width: 55%;
  }

  /* Recuo só no primeiro balão: com todas as caixas na mesma cor, é o
     escalonamento que mantém a leitura de "pensamentos soltos". */
  .truth__thought:first-child {
    margin-left: 6%;
  }
}

/* --------------------------------------------------------------------------
   6. Agitação — o custo de continuar travado. Segunda seção escura; usa a
      mesma grade da seção 4, sem o brilho azul.
   -------------------------------------------------------------------------- */

.stakes {
  background-color: var(--c-black);
  background-image: var(--bg-grade);
  background-size: 48px 48px;
}

.stakes__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--sp-6), 3.5vw, var(--sp-8));
  padding-block: clamp(var(--sp-10), 6vw, var(--sp-16));
  text-align: center;
}

.stakes__title {
  max-width: 34rem;
  margin: 0;
  color: var(--c-white);
  font-size: var(--fs-lead);
  font-weight: var(--w-bold);
  line-height: 1.45;
  text-wrap: balance;
}

/* Mobile empilha o sinal sobre o texto; de 40em o sinal vai para a coluna
   da esquerda, alinhado ao topo do parágrafo. */
.stakes__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: 44rem;
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border-radius: 0.6rem;
  background: var(--c-white);
}

.stakes__sign {
  flex: none;
  width: clamp(3rem, 9vw, 4.5rem);
  height: auto;
}

.stakes__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  color: var(--c-ink);
  font-size: var(--fs-caption);
  line-height: 1.5;
  text-align: left;
}

.stakes__turn {
  font-weight: var(--w-bold);
}

.stakes__ask {
  color: var(--c-blue-action);
  font-weight: var(--w-bold);
}

@media (min-width: 40em) {
  .stakes__card {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   7. Benefícios — seis cards com borda ciano
   -------------------------------------------------------------------------- */

.gains {
  background: var(--c-white);
}

.gains__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--sp-6), 3.5vw, var(--sp-8));
  padding-block: clamp(var(--sp-10), 6vw, var(--sp-16));
  text-align: center;
}

.gains__title {
  max-width: 40rem;
  margin: 0;
  color: var(--c-ink);
  font-size: var(--fs-h2);
  font-weight: var(--w-black);
  line-height: 1.3;
  text-transform: uppercase;
  text-wrap: balance;
}

.gains__list {
  display: grid;
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-6));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gains__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: clamp(var(--sp-4), 2.5vw, var(--sp-6));
  border: 2px solid var(--c-cyan-soft);
  border-radius: 0.6rem;
  background: var(--c-white);
}

.gains__icon {
  width: clamp(3.25rem, 8vw, 4.25rem);
  height: auto;
}

.gains__text {
  color: var(--c-ink);
  font-size: var(--fs-caption);
  line-height: 1.45;
  text-wrap: balance;
}

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

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

/* --------------------------------------------------------------------------
   8. Entregáveis — linhas alternando o lado da imagem, sobre lavanda.
      Os mesmos blocos servem à seção 10 (bônus), depois da faixa.
   -------------------------------------------------------------------------- */

.kit {
  background: var(--c-lavender);
}

.kit__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--sp-6), 3.5vw, var(--sp-8));
  padding-block: clamp(var(--sp-10), 6vw, var(--sp-16));
  text-align: center;
}

.kit__title {
  max-width: 40rem;
  margin: 0;
  color: var(--c-ink);
  font-size: var(--fs-h2);
  font-weight: var(--w-black);
  line-height: 1.3;
  text-transform: uppercase;
  text-wrap: balance;
}

.kit__title-accent {
  display: block;
  color: var(--c-blue-action);
}

.kit__list {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-6));
  width: 100%;
  max-width: 46rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kit__item {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-6));
  padding: clamp(var(--sp-4), 2.5vw, var(--sp-6));
  border-radius: 0.75rem;
  background: var(--c-white);
}

.kit__shot {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.kit__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: left;
}

.kit__name {
  margin: 0;
  color: var(--c-ink);
  font-size: var(--fs-lead);
  font-weight: var(--w-bold);
  line-height: 1.35;
}

.kit__label {
  color: var(--c-blue-action);
}

.kit__desc {
  color: var(--c-ink-soft);
  font-size: var(--fs-caption);
  line-height: 1.55;
}

/* A alternância é declarada por modificador, não por :nth-child: a sequência
   atravessa a faixa da seção 9 e recomeça noutra lista, onde a contagem por
   posição daria o lado errado. */
@media (min-width: 40em) {
  .kit__item {
    flex-direction: row;
    align-items: center;
  }

  .kit__item--invertido {
    flex-direction: row-reverse;
  }

  .kit__shot {
    flex: none;
    width: 44%;
  }
}

/* --------------------------------------------------------------------------
   11. É para você que — card único sobre o escuro
   -------------------------------------------------------------------------- */

.fit {
  background-color: var(--c-black);
  background-image: var(--bg-grade);
  background-size: 48px 48px;
}

.fit__inner {
  display: flex;
  justify-content: center;
  padding-block: clamp(var(--sp-10), 6vw, var(--sp-16));
}

.fit__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  width: 100%;
  max-width: 46rem;
  padding: clamp(var(--sp-6), 4vw, var(--sp-10));
  border: 1px solid var(--c-hairline);
  border-radius: 1.5rem;
  background: var(--c-panel);
}

.fit__title {
  margin: 0;
  color: var(--c-white);
  font-size: var(--fs-lead);
  font-weight: var(--w-bold);
  line-height: 1.4;
}

.fit__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fit__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  color: var(--c-white);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

/* O check é ícone, não texto: 3:1 basta, e o texto ao lado está a 18:1. */
.fit__check {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15em;
  color: var(--c-blue-action);
}

/* --------------------------------------------------------------------------
   12. Enfim — a virada. Sem card e sem borda, só texto sobre o fundo.
   -------------------------------------------------------------------------- */

.turn {
  background-color: var(--c-black);
  background-image: var(--bg-grade);
  background-size: 48px 48px;
}

.turn__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  padding-block: clamp(var(--sp-16), 9vw, 6rem);
  text-align: center;
}

.turn__pill {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-hairline);
  border-radius: 999px;
  color: var(--c-muted);
  font-size: var(--fs-caption);
  line-height: 1.2;
}

.turn__lead {
  max-width: 36rem;
  color: var(--c-white);
  font-size: var(--fs-lead);
  font-weight: var(--w-semibold);
  line-height: 1.5;
  text-wrap: balance;
}

.turn__title {
  max-width: 40rem;
  margin: 0;
  color: var(--c-white);
  font-size: var(--fs-h2);
  font-weight: var(--w-bold);
  line-height: 1.35;
  text-wrap: balance;
}

.turn__accent {
  color: var(--c-blue-action);
}

/* --------------------------------------------------------------------------
   13. Recapitulando — os oito itens com o preço cheio riscado
   -------------------------------------------------------------------------- */

.recap {
  background-color: var(--c-black);
  background-image: var(--bg-grade);
  background-size: 48px 48px;
}

.recap__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  padding-block: clamp(var(--sp-10), 6vw, var(--sp-16));
  text-align: center;
}

.recap__eyebrow {
  color: var(--c-muted);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.recap__title {
  max-width: 38rem;
  margin: 0;
  color: var(--c-white);
  font-size: var(--fs-h2);
  font-weight: var(--w-bold);
  line-height: 1.35;
  text-wrap: balance;
}

.recap__accent {
  color: var(--c-blue-action);
}

.recap__card {
  width: 100%;
  max-width: 40rem;
  padding: clamp(var(--sp-6), 4vw, var(--sp-8));
  border-radius: 1.5rem;
  background: var(--c-surface);
}

.recap__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mobile: nome em cima, preço embaixo à direita, sem pontilhado. */
.recap__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--sp-3);
  align-items: baseline;
  color: var(--c-ink);
  font-size: var(--fs-caption);
  text-align: left;
}

.recap__check {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--c-blue-action);
  translate: 0 0.15em;
}

.recap__leader {
  display: none;
}

.recap__price {
  grid-column: 2;
  color: var(--c-red);
  font-weight: var(--w-semibold);
  text-align: right;
}

.recap__total {
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--c-hairline);
  border-radius: 999px;
  color: var(--c-white);
  font-size: var(--fs-lead);
  font-weight: var(--w-bold);
}

.recap__total-price {
  color: var(--c-red);
}

@media (min-width: 34em) {
  /* A partir daqui nome e preço cabem na mesma linha, e o pontilhado
     aparece para ligar um ao outro. */
  .recap__row {
    grid-template-columns: auto auto 1fr auto;
    gap: var(--sp-3);
  }

  .recap__leader {
    display: block;
    border-bottom: 2px dotted var(--c-leader);
    translate: 0 -0.35em;
  }

  .recap__price {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------------
   14 + 15. Preço — a faixa azul emenda direto no card, sem espaço.
   -------------------------------------------------------------------------- */

.price {
  background: var(--c-surface);
}

.bridge {
  padding-block: clamp(var(--sp-4), 2.5vw, var(--sp-6));
  padding-inline: var(--gutter);
  background: var(--c-blue-action);
  text-align: center;
}

.bridge__text {
  max-width: 44rem;
  margin: 0 auto;
  color: var(--c-white);
  font-size: var(--fs-banner);
  font-weight: var(--w-bold);
  line-height: 1.4;
  text-wrap: balance;
}

.price__inner {
  display: flex;
  justify-content: center;
  padding-block: clamp(var(--sp-8), 5vw, var(--sp-16));
}

.price__card {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-6), 3vw, var(--sp-8));
  width: 100%;
  max-width: 52rem;
  padding: clamp(var(--sp-6), 4vw, var(--sp-8));
  border-radius: 1.5rem;
  background: var(--c-white);
}

.price__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.price__gallery img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.price__offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.price__logo {
  width: clamp(9rem, 24vw, 12rem);
  height: auto;
  margin-bottom: var(--sp-2);
}

.price__installment {
  color: var(--c-blue-action);
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem);
  font-weight: var(--w-black);
  line-height: 1.1;
}

.price__cash {
  color: var(--c-ink-soft);
  font-size: var(--fs-body);
}

/* O botão é o único elemento animado da página. O destaque tem duas
   camadas: um halo azul que respira devagar e um reflexo diagonal que
   atravessa a cada ciclo, com pausa longa entre passadas — a intenção é
   parecer luz varrendo uma superfície, não um CTA piscando.
   O reset global já zera as duas sob prefers-reduced-motion, e o halo
   permanece no estado de repouso, então o botão continua destacado. */
.price__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  min-height: 3.5rem;
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: 0.75rem;
  background: var(--c-blue-action);
  box-shadow: 0 8px 22px rgba(31, 95, 224, 0.30);
  color: var(--c-white);
  font-size: var(--fs-body);
  font-weight: var(--w-bold);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  animation: cta-halo 3.8s ease-in-out infinite;
  transition: background-color 160ms ease, transform 160ms ease,
              box-shadow 160ms ease;
}

/* O reflexo passa por cima do fundo, mas o texto sobe acima dele. */
.price__cta-texto {
  position: relative;
  z-index: 1;
}

.price__cta::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(
                105deg,
                transparent 42%,
                rgba(255, 255, 255, 0.38) 50%,
                transparent 58%);
  translate: -130% 0;
  animation: cta-reflexo 4.6s ease-in-out infinite;
}

.price__cta:hover,
.price__cta:focus-visible {
  background: #1748B4;
  box-shadow: 0 12px 30px rgba(31, 95, 224, 0.42);
  transform: translateY(-1px);
}

/* Parado sob o cursor: quem já encontrou o botão não precisa de chamariz.
   Precisa ser animation: none, não play-state: paused — uma animação
   infinita vence declarações normais na cascata, então com ela apenas
   pausada a box-shadow de hover nunca apareceria, e o reflexo congelaria
   no meio da passada em vez de sair de quadro. */
.price__cta:hover {
  animation: none;
}

.price__cta:hover::after {
  animation: none;
}

@keyframes cta-halo {
  0%, 100% { box-shadow: 0 8px 22px rgba(31, 95, 224, 0.30),
                         0 0 0 0 rgba(31, 95, 224, 0.38); }
  55%      { box-shadow: 0 10px 28px rgba(31, 95, 224, 0.38),
                         0 0 0 12px rgba(31, 95, 224, 0); }
}

@keyframes cta-reflexo {
  0%, 58% { translate: -130% 0; }
  100%    { translate: 130% 0; }
}

/* Selos de confiança — ícone e rótulo de duas linhas, como no modelo. */
.seals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4) clamp(var(--sp-4), 3vw, var(--sp-6));
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}

.seals__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.seals__icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--c-ink-soft);
}

.seals__label {
  color: var(--c-ink-soft);
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: left;
}

.seals__label strong {
  display: block;
  color: var(--c-ink);
  font-weight: var(--w-bold);
}

.price__note {
  color: var(--c-ink-soft);
  font-size: 0.8rem;
}

@media (min-width: 48em) {
  .price__card {
    flex-direction: row;
    align-items: center;
  }

  .price__gallery,
  .price__offer {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   16. Como você vai receber — três passos numerados
   -------------------------------------------------------------------------- */

.steps {
  background-color: var(--c-black);
  background-image: var(--bg-grade);
  background-size: 48px 48px;
}

.steps__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--sp-6), 3.5vw, var(--sp-10));
  padding-block: clamp(var(--sp-10), 6vw, var(--sp-16));
  text-align: center;
}

.steps__title {
  max-width: 34rem;
  margin: 0;
  color: var(--c-white);
  font-size: var(--fs-h2);
  font-weight: var(--w-bold);
  line-height: 1.35;
  text-wrap: balance;
}

.steps__list {
  display: grid;
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-6));
  width: 100%;
  max-width: 60rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid var(--c-hairline);
  border-radius: 1rem;
  background: var(--c-panel);
}

.steps__icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--c-blue-action);
}

.steps__name {
  margin: 0;
  color: var(--c-white);
  font-size: var(--fs-body);
  font-weight: var(--w-bold);
  line-height: 1.3;
}

/* O número é a ordem real dos passos, não decoração. */
.steps__num {
  color: var(--c-blue-action);
}

.steps__num::after {
  content: " ·";
}

.steps__desc {
  color: var(--c-ink-light);
  font-size: var(--fs-caption);
  line-height: 1.5;
  text-wrap: balance;
}

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

/* --------------------------------------------------------------------------
   17. Duas opções — o contraste entre continuar travado e destravar
   -------------------------------------------------------------------------- */

.choice {
  background-color: var(--c-black);
  background-image: var(--bg-grade);
  background-size: 48px 48px;
}

.choice__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  padding-block: clamp(var(--sp-10), 6vw, var(--sp-16));
  text-align: center;
}

.choice__title {
  margin: 0;
  color: var(--c-white);
  font-size: var(--fs-h2);
  font-weight: var(--w-bold);
  line-height: 1.35;
  text-wrap: balance;
}

.choice__list {
  display: grid;
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-6));
  width: 100%;
  max-width: 52rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choice__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid;
  border-radius: 1rem;
  text-align: left;
}

/* O acento distingue os dois caminhos: vermelho apagado para o que trava,
   azul de ação para o que resolve. */
.choice__card--nao {
  border-color: rgba(201, 42, 34, 0.38);
  background: rgba(201, 42, 34, 0.10);
}

.choice__card--sim {
  border-color: rgba(31, 95, 224, 0.42);
  background: rgba(31, 95, 224, 0.12);
}

.choice__name {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-white);
  font-size: var(--fs-body);
  font-weight: var(--w-bold);
  line-height: 1.3;
}

.choice__icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
}

.choice__card--nao .choice__icon {
  color: var(--c-red);
}

.choice__card--sim .choice__icon {
  color: var(--c-blue-action);
}

.choice__desc {
  color: var(--c-ink-light);
  font-size: var(--fs-caption);
  line-height: 1.55;
}

.choice__close {
  max-width: 36rem;
  color: var(--c-white);
  font-size: var(--fs-lead);
  font-weight: var(--w-bold);
  line-height: 1.45;
  text-wrap: balance;
}

.choice__cue {
  max-width: 36rem;
  color: var(--c-blue-action);
  font-size: var(--fs-body);
  font-weight: var(--w-semibold);
  line-height: 1.5;
  text-wrap: balance;
}

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

/* --------------------------------------------------------------------------
   18. Sobre o autor — marca da empresa ao lado do card
   -------------------------------------------------------------------------- */

.author {
  background-color: var(--c-black);
  background-image: var(--bg-grade);
  background-size: 48px 48px;
}

.author__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--sp-6), 4vw, var(--sp-10));
  padding-block: clamp(var(--sp-10), 6vw, var(--sp-16));
}

/* A marca é um glifo preto com alfa: só se enxerga sobre claro, então o
   disco branco não é decoração, é o que a torna visível no fundo escuro. */
.author__marca {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: clamp(6rem, 16vw, 9.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-white);
}

.author__marca-img {
  width: 58%;
  height: auto;
}

.author__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
  padding: clamp(var(--sp-6), 4vw, var(--sp-10));
  border: 1px solid var(--c-hairline);
  border-radius: 1.5rem;
  background: var(--c-panel);
}

.author__title {
  margin: 0;
  color: var(--c-white);
  font-size: var(--fs-h2);
  font-weight: var(--w-bold);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
}

.author__desc {
  color: var(--c-ink-light);
  font-size: var(--fs-caption);
  line-height: 1.65;
}

.author__desc strong {
  color: var(--c-white);
  font-weight: var(--w-bold);
}

@media (min-width: 48em) {
  .author__inner {
    flex-direction: row;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   20. FAQ — <details> nativo, todas fechadas por padrão
   -------------------------------------------------------------------------- */

.faq {
  background-color: var(--c-black);
  background-image: var(--bg-grade);
  background-size: 48px 48px;
}

.faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--sp-6), 3.5vw, var(--sp-8));
  padding-block: clamp(var(--sp-10), 6vw, var(--sp-16));
}

.faq__title {
  margin: 0;
  color: var(--c-white);
  font-size: var(--fs-h2);
  font-weight: var(--w-bold);
  line-height: 1.3;
  text-align: center;
}

.faq__list {
  width: 100%;
  max-width: 44rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* O marcador padrão do <summary> sai para o sinal de + entrar no lugar,
   girando 45 graus e virando × quando a resposta abre. */
.faq__q {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  color: var(--c-white);
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: var(--w-semibold);
  line-height: 1.4;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: "+";
  order: -1;
  flex: none;
  width: 1.5rem;
  color: var(--c-blue-action);
  font-size: 1.5rem;
  font-weight: var(--w-regular);
  line-height: 1;
  text-align: center;
  transition: rotate 180ms ease;
}

.faq__item[open] .faq__q::after {
  rotate: 45deg;
}

.faq__a {
  padding: 0 0 var(--sp-4) calc(1.5rem + var(--sp-4));
  color: var(--c-muted);
  font-size: var(--fs-caption);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--c-black);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  padding-block: clamp(var(--sp-8), 5vw, var(--sp-10));
  text-align: center;
}

.site-footer__marca {
  color: var(--c-white);
  font-size: var(--fs-caption);
  font-weight: var(--w-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer__aviso {
  max-width: 44rem;
  color: var(--c-muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.site-footer__copy {
  color: var(--c-muted);
  font-size: 0.78rem;
}