/*
 * ============================================================
 * styles.css — lp-marcapessoal-kitdeskillseprompts
 * ============================================================
 * Estilos da página de vendas do Kit de Skills e Prompts.
 *
 * REGRA CENTRAL:
 * Nenhuma cor, fonte, radius ou espaçamento é escrito à mão
 * aqui. Tudo vem de var(--token) definido em tokens.css. As
 * únicas exceções são valores estruturais (larguras de grid,
 * alturas de ícone) que não são decisões de marca.
 *
 * ESTRUTURA DO ARQUIVO:
 *   1. Imports
 *   2. Base
 *   3. Acessibilidade (skip link, foco)
 *   4. Container
 *   5. Animações e reveal
 *   6. Header
 *   7. Botões
 *   8. Blocos de seção (claro, alt, escuro)
 *   9. Tipografia de seção (eyebrow, título, prose)
 *  10. Hero
 *  11. De onde eu falo
 *  12. O problema
 *  13. A virada
 *  14. O que você recebe
 *  15. Prompt x Skill
 *  16. Como funciona
 *  17. Por que comigo
 *  18. FAQ
 *  19. A oferta
 *  20. CTA final
 *  21. Footer
 * ============================================================
 */

/* ── 1. IMPORTS ─────────────────────────────────────────────
 * Ordem obrigatória: reset zera os defaults do navegador,
 * tokens declara as variáveis, o resto do arquivo consome.
 */
@import './reset.css';
@import './tokens.css';


/* ── 2. BASE ────────────────────────────────────────────────── */
html {
  /* Sem scroll-behavior: smooth. A página não tem âncoras
   * internas, então não há para onde rolar suavemente. */
  overscroll-behavior: none;
  background: var(--color-bg);
  /* Impede o zoom automático de fonte no iOS ao girar a tela */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  overscroll-behavior: none;
  /* Suaviza a renderização da Sora em telas de alta densidade */
  -webkit-font-smoothing: antialiased;
}


/* ── 3. ACESSIBILIDADE ──────────────────────────────────────
 * O skip link fica fora da tela e só aparece ao receber foco
 * por teclado (Tab). Exigência de WCAG.
 */
.skip-link {
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 9999;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-md) 0;
  font-size: 0.875rem;
  font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/*
 * Foco visível em tudo que é interativo.
 * :focus-visible mostra o anel só na navegação por teclado,
 * sem poluir o clique de mouse. Requisito de WCAG AA.
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* Em fundo escuro o anel navy sumiria: usa o off-white */
.section--dark a:focus-visible,
.section--dark summary:focus-visible {
  outline-color: var(--color-text-inverse);
}


/* ── 4. CONTAINER ───────────────────────────────────────────
 * Centraliza e limita a largura do conteúdo. O padding lateral
 * cresce com a tela para o texto não colar nas bordas.
 */
.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 640px) {
  .container { padding-inline: var(--space-8); }
}
@media (min-width: 1024px) {
  .container { padding-inline: var(--space-10); }
}

/*
 * Variante estreita para seções de leitura corrida.
 * Linha longa demais cansa: 720px mantém a medida confortável.
 */
.container--narrow { max-width: 720px; }


/* ── 5. ANIMAÇÕES E REVEAL ──────────────────────────────────
 * Movimento discreto e curto. A entrada é de 12px, não de 40px:
 * o objetivo é sugerir que o conteúdo chegou, não encenar.
 */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/*
 * Respeita quem pediu menos movimento no sistema.
 * O JS já trata isso, mas o CSS garante mesmo se o script
 * falhar: o conteúdo nunca fica preso invisível.
 */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ── 6. HEADER ──────────────────────────────────────────────
 * Logo à esquerda, CTA à direita. Sem navegação, por decisão
 * de projeto: a página tem uma saída só.
 *
 * position: sticky mantém o CTA sempre alcançável durante a
 * leitura, sem tirar o header do fluxo do documento.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--color-border);
  background: rgba(244, 244, 249, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 60px;
}

/*
 * A logo é um retângulo navy recortado pelo PNG via mask.
 * Assim a cor vem do token e não do arquivo de imagem.
 */
.logo-mask {
  display: block;
  height: 26px;
  aspect-ratio: 1652 / 1063; /* proporção original do PNG */
  background-color: var(--color-primary);
  -webkit-mask-image: url(/assets/images/logo.png);
  mask-image: url(/assets/images/logo.png);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  flex-shrink: 0;
}


/* ── 7. BOTÕES ──────────────────────────────────────────────
 * Um só estilo de botão na página inteira, em dois tamanhos.
 * Consistência de rótulo e de forma reduz hesitação.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease),
              background 0.25s var(--ease);
}

.btn-primary {
  background: linear-gradient(135deg, var(--navy-base) 0%, var(--navy-lighter) 100%);
  color: var(--color-text-inverse);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--navy-lighter) 0%, var(--navy-base) 100%);
  box-shadow: 0 10px 28px -10px rgba(0, 0, 43, 0.55);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/*
 * Variante invertida: off-white com texto navy.
 * Usada no CTA final, onde o botão navy padrão ficava sobre a
 * seção navy e praticamente sumia. Aqui o contraste se inverte e
 * o botão vira o ponto mais claro da tela.
 */
.btn-inverse {
  background: var(--color-bg);
  color: var(--color-primary);
}
.btn-inverse:hover {
  background: var(--color-white);
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}
.btn-inverse:active { transform: translateY(0); }

/* Tamanho pequeno: header */
.btn-sm {
  padding: 9px 18px;
  font-size: 0.875rem;
}

/* Tamanho grande: os quatro CTAs do corpo da página */
.btn-lg {
  padding: 16px 32px;
  font-size: 1rem;
}
@media (min-width: 640px) {
  .btn-lg { padding: 18px 40px; font-size: 1.0625rem; }
}

/* Em mobile o CTA grande ocupa a largura toda: alvo de toque
 * maior e menos chance de erro no polegar. */
.cta-block .btn-lg,
.hero-cta-group .btn-lg {
  width: 100%;
}
@media (min-width: 480px) {
  .cta-block .btn-lg,
  .hero-cta-group .btn-lg { width: auto; }
}

/*
 * Bloco que envolve CTA + linha de apoio, sempre centralizado.
 */
.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
  text-align: center;
}

/* Linha de preço e garantia abaixo do botão. Fica fora do
 * botão de propósito: o rótulo do CTA comunica valor, o preço
 * informa sem competir. */
.cta-support {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.cta-support--on-dark { color: rgba(255, 255, 255, 0.6); }


/* ── 8. BLOCOS DE SEÇÃO ─────────────────────────────────────
 * Três fundos criam o ritmo da página: claro, alternado e
 * escuro. As seções escuras marcam as viradas.
 */
.section {
  padding-block: var(--space-16);
}
@media (min-width: 768px) {
  .section { padding-block: var(--space-20); }
}

/* Fundo alternado, um passo acima do fundo geral */
.section--alt {
  background: var(--color-surface-alt);
}

/* Quebra escura */
.section--dark {
  background: linear-gradient(180deg, var(--navy-dark) 0%, var(--navy-light) 100%);
  color: var(--color-text-inverse);
}

/* A última seção escura fecha a página escurecendo de volta */
.section--close {
  background: linear-gradient(180deg, var(--navy-light) 0%, var(--navy-dark) 100%);
  padding-block: var(--space-20);
}

/* Oferta e CTA final são contíguos: sem borda entre eles, o
 * bloco de fechamento lê como uma peça só. */
#a-oferta { padding-bottom: var(--space-12); }
#cta-final { padding-top: var(--space-12); }


/* ── 9. TIPOGRAFIA DE SEÇÃO ─────────────────────────────────── */

.section-head {
  margin-bottom: var(--space-10);
}
.section-head--center {
  text-align: center;
  margin-inline: auto;
  max-width: 720px;
}

/* Eyebrow: rótulo pequeno acima do título, em versalete */
.eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.eyebrow--on-dark { color: rgba(255, 255, 255, 0.55); }

.section-title {
  font-size: clamp(1.7rem, 7vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-wrap: balance; /* evita órfã na última linha do título */
}
.section-title--on-dark { color: var(--color-white); }

.section-sub {
  margin-top: var(--space-4);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* Texto corrido de leitura */
.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.prose--on-dark { color: rgba(255, 255, 255, 0.75); }
.prose--center  { text-align: center; }

/* Frase de virada dentro do texto corrido */
.prose-highlight {
  font-weight: 600;
  color: var(--color-text);
}


/* ── 10. HERO ───────────────────────────────────────────────
 * Não usa 100vh: em celular isso empurra o CTA para fora da
 * tela por causa da barra do navegador. O hero ocupa o que
 * precisa, e o botão fica visível sem rolar.
 */
#hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-16) var(--space-20);
  background: radial-gradient(ellipse at center,
              var(--color-white) 0%,
              hsl(220, 10%, 95%) 52%,
              hsl(220, 8%, 90%) 100%);
}
@media (min-width: 768px) {
  #hero { padding-block: var(--space-20); }
}

/* Manchas desfocadas ao fundo. Decoração sutil, sem peso. */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  background: hsla(240, 100%, 15%, 0.1);
}
.hero-blob--tl { width: 220px; height: 220px; top: -40px;    left: -60px; }
.hero-blob--br { width: 260px; height: 260px; bottom: -60px; right: -60px; }

.hero-inner {
  position: relative; /* acima dos blobs */
  max-width: 820px;
  text-align: center;
}

.hero-title {
  /* Reduzida em relação à escala de H1 do design system.
   * Nesta página a headline tem 9 palavras e ocupava altura demais,
   * empurrando o CTA para longe do topo. Menor, ela cabe em menos
   * linhas e o botão sobe. */
  font-size: clamp(1.75rem, 5.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-wrap: balance;
}

.hero-sub {
  margin-top: var(--space-5);
  margin-inline: auto;
  max-width: 620px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.hero-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero-credibility {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}


/* ── 11. DE ONDE EU FALO ────────────────────────────────────── */

.autoridade-grid {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 900px) {
  .autoridade-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-12); }
}

.autoridade-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/*
 * Lista de credenciais. O traço vertical à esquerda substitui
 * o marcador redondo: menos ruído, mais alinhado à marca.
 */
.autoridade-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.autoridade-list li {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text);
}


/* ── 12. O PROBLEMA ─────────────────────────────────────────── */

.custo-list {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-10);
}
@media (min-width: 768px) {
  .custo-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}

.custo-list li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.custo-list strong {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--color-text);
}


/* ── 13. A VIRADA ───────────────────────────────────────────── */

.virada-close {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-white);
  text-wrap: balance;
}


/* ── 14. O QUE VOCÊ RECEBE ──────────────────────────────────
 * A seção mais importante da página. Cada área é um card com
 * ícone, promessa curta e exemplos concretos.
 */
.areas-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .areas-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (min-width: 1100px) {
  .areas-grid { grid-template-columns: repeat(3, 1fr); }
}

.area-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 18px 40px -34px hsla(240, 100%, 8%, 0.6);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.area-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}

.area-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.area-icon svg { width: 20px; height: 20px; }

.area-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.area-lead {
  margin-top: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/*
 * Região rolável com os 10 itens da área.
 *
 * POR QUE ROLAR EM VEZ DE MOSTRAR TUDO:
 * São 60 ferramentas no total. Listadas por inteiro, a seção viraria
 * uma parede de texto de vários metros e empurraria o CTA para muito
 * longe. Com a rolagem, quem quer conferir o que vem confere, e quem
 * já se convenceu segue para o botão.
 *
 * A altura fixa também mantém os seis cards alinhados: sem ela, a área
 * com nomes mais longos esticaria e desalinharia a grade.
 */
.area-scroll {
  flex: 1;
  max-height: 300px;
  overflow-y: auto;
  padding-top: var(--space-5);
  padding-right: var(--space-2);
  border-top: 1px solid var(--color-border);
  /* Barra fina e discreta no Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
  /* Trava a rolagem no card: chegando ao fim, a página não "pula" junto */
  overscroll-behavior: contain;
}
@media (min-width: 768px) {
  .area-scroll { max-height: 340px; }
}

/* Barra de rolagem no Chrome, Safari e Edge */
.area-scroll::-webkit-scrollbar { width: 6px; }
.area-scroll::-webkit-scrollbar-track { background: transparent; }
.area-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
}
.area-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* A região rolável é focável por teclado: precisa mostrar o foco */
.area-scroll:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Rótulo "5 prompts" / "5 skills" que separa os dois grupos */
.area-group {
  margin-bottom: var(--space-3);
}
.area-group + .area-items { margin-bottom: var(--space-5); }
.area-items + .area-group { margin-top: var(--space-2); }

.area-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.area-items li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.area-items strong {
  font-weight: 600;
  color: var(--color-text);
}
.area-items span { color: var(--color-text-muted); }

/*
 * Etiqueta que diferencia prompt de skill dentro da lista.
 * A distinção é o conceito central do produto, então ela
 * precisa ser legível de relance.
 */
.tag {
  display: inline-block;
  vertical-align: middle;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Skill é o ativo de maior valor: recebe o navy cheio */
.tag--skill {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/*
 * Aviso do Jurídico, em faixa própria abaixo do grid.
 * Antes vivia dentro do card da área, o que o obrigava a ficar mais
 * alto que os outros cinco e quebrava o alinhamento da grade.
 * Transparência continua visível, agora sem custo de layout.
 */
.aviso-juridico {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.aviso-juridico strong { color: var(--color-text); }
.aviso-icon { flex-shrink: 0; color: var(--color-text); }
.aviso-icon svg { width: 22px; height: 22px; display: block; }

/* Bloco dos dois itens que vêm junto e não contam entre os 60 */
.inclusos {
  margin-top: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
@media (min-width: 768px) {
  .inclusos { padding: var(--space-8); }
}

.inclusos-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.inclusos-list {
  list-style: none;
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .inclusos-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
.inclusos-list li {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.inclusos-list strong { color: var(--color-text); }


/* ── 15. PROMPT X SKILL ─────────────────────────────────────── */

.comparativo-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .comparativo-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}

.comparativo-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
@media (min-width: 768px) {
  .comparativo-card { padding: var(--space-8); }
}

.comparativo-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.comparativo-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.comparativo-uso {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.comparativo-uso strong { color: var(--color-text); }

/* A regra prática que o produto ensina, em destaque */
.regra-bolso {
  margin-top: var(--space-8);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-wrap: balance;
}


/* ── 16. COMO FUNCIONA ──────────────────────────────────────── */

.passos-grid {
  list-style: none;
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .passos-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.passo-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.passo-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.passo-card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.passo-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.funciona-close {
  margin-top: var(--space-8);
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 620px;
  margin-inline: auto;
}


/* ── 17. POR QUE COMIGO ─────────────────────────────────────── */

.autor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
@media (min-width: 768px) {
  .autor-card {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-6);
    padding: var(--space-8);
  }
}

/*
 * O <picture> é o item flex, não o <img> dentro dele.
 * Sem flex-shrink aqui, o container encolhe no espaço apertado e
 * a foto era comprimida numa elipse. A regra precisa estar nos
 * dois: no picture, para não encolher; na img, por garantia.
 */
.autor-card picture {
  display: block;
  flex-shrink: 0;
  line-height: 0; /* remove o espaço fantasma abaixo da imagem */
}

.autor-avatar {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.autor-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}



/* ── 18. FAQ ────────────────────────────────────────────────
 * <details> nativo: acessível por teclado e funcional sem
 * JavaScript. Nenhum accordion custom aqui, de propósito.
 */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text);
  list-style: none; /* remove o triângulo padrão */
}
/* Remove o marcador nativo também no Safari */
.faq-item summary::-webkit-details-marker { display: none; }

/*
 * Sinal de abrir e fechar desenhado em CSS: um "+" que gira
 * 45 graus ao abrir, virando um "×". Evita carregar um ícone
 * só para isso.
 */
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-muted);
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 var(--space-5) var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}


/* ── 19. A OFERTA ───────────────────────────────────────────── */

/*
 * Card da oferta inteiro em off-white sobre a seção navy.
 * Lista do que está incluso, preço, ancoragem e CTA formam uma
 * peça só: é o momento da decisão e o bloco inteiro se destaca
 * do fundo escuro em vez de se dissolver nele.
 */
.oferta-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
@media (min-width: 640px) {
  .oferta-card { padding: var(--space-8); }
}

.oferta-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.oferta-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text);
}
/* Marcador de check desenhado em CSS, sem ícone extra */
.oferta-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
}

/*
 * Preço: separador dentro do card, não caixa própria.
 * O card inteiro já é claro, então uma caixa aqui dentro criaria
 * moldura sobre moldura. A linha basta para marcar a mudança de
 * assunto, do que vem para quanto custa.
 */
.oferta-preco {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-strong);
  text-align: center;
}
.preco-valor {
  font-size: clamp(2.75rem, 12vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-text);
}
.preco-nota {
  margin-top: var(--space-3);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.oferta-ancora {
  margin-top: var(--space-5);
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/*
 * Garantia: bloco off-white sobre a seção navy.
 *
 * É o único elemento claro dentro do bloco escuro de fechamento.
 * A inversão de contraste faz a reversão de risco saltar aos olhos
 * de quem está rolando a página com o dedo, que é exatamente o
 * momento em que a objeção "e se eu não gostar?" aparece.
 */
.garantia {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  /* Branco puro, um tom acima do off-white do card da oferta.
   * Os dois blocos são claros e ficam colados; a diferença sutil
   * evita que leiam como uma única mancha branca. */
  background: var(--color-surface);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.garantia-icon {
  flex-shrink: 0;
  color: var(--color-primary);
}
.garantia-icon svg { width: 28px; height: 28px; display: block; }
.garantia-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* Entrega em duas semanas, apresentada como método */
.entrega {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 640px) {
  .entrega { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
.entrega-item {
  padding-left: var(--space-4);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}
.entrega-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}


/* ── 20. CTA FINAL ──────────────────────────────────────────── */

.final-inner { text-align: center; }

.final-title {
  font-size: clamp(1.6rem, 6.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-white);
  text-wrap: balance;
}

.final-text {
  margin-top: var(--space-5);
  margin-inline: auto;
  max-width: 560px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
}


/* ── 21. FOOTER ─────────────────────────────────────────────── */

.site-footer {
  background: var(--navy-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--space-8);
  text-align: center;
}
.site-footer p {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}


/* ── 22. PÁGINA DE OBRIGADO ─────────────────────────────────
 * Estilos exclusivos de /comprou-kit-obrigado-pela-compra.
 *
 * A página reaproveita o CSS da landing de propósito: quem chega
 * lá acabou de vir daqui, então o arquivo já está no cache do
 * navegador e a página abre praticamente instantânea. O que segue
 * é só o que ela tem de diferente.
 */

/* Header sem CTA: quem está na página de obrigado já comprou.
 * Sem o botão à direita, o space-between deixaria a logo sozinha
 * no canto, o que está correto, mas a regra fica explícita. */
.header-inner--simple {
  justify-content: flex-start;
}

/* Bloco de confirmação, equivalente ao hero da landing */
.obrigado-hero {
  padding-block: var(--space-16) var(--space-12);
  text-align: center;
  background: radial-gradient(ellipse at center,
              var(--color-white) 0%,
              hsl(220, 10%, 95%) 52%,
              hsl(220, 8%, 90%) 100%);
}
@media (min-width: 768px) {
  .obrigado-hero { padding-block: var(--space-20) var(--space-16); }
}

/*
 * Marca de confirmação. Círculo navy com o check em off-white.
 * É o primeiro elemento que a pessoa vê e responde à única
 * pergunta que ela tem ao chegar: deu certo?
 */
.obrigado-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.obrigado-check svg { width: 30px; height: 30px; }

.obrigado-title {
  font-size: clamp(1.75rem, 5.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-wrap: balance;
}

.obrigado-sub {
  margin-top: var(--space-5);
  margin-inline: auto;
  max-width: 560px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/*
 * Os três passos empilham sempre, inclusive no desktop.
 * São instruções em ordem: lidos em coluna, a sequência fica
 * óbvia. Em três colunas lado a lado, ela se perde.
 */
.passos-grid--stack {
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .passos-grid--stack { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* Card de ajuda com o canal de contato */
.ajuda-card {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
}
.ajuda-card h2 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.ajuda-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
/* Botão do Instagram no card de ajuda */
.ajuda-btn {
  margin-top: var(--space-5);
  text-decoration: none;
}
.ajuda-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}