/* ==========================================================
   Kit Devolutiva aos Pais sem Travar — página de vendas
   Sistema visual: Assistente IA (design-system/). Não criar token novo.
   ========================================================== */

:root {
  --surface: #ffffff;  --surface-raised: #fdfdfd;  --surface-tint: #f3edf4;
  --brand: #7c76e7;    --on-brand: #ffffff;        --violet: #7a4c9a;
  --ink: #000000;      --on-dark: #ffffff;         --success: #00b60e;
  --hairline: #c6c6c6;

  --display: 'Instrument Serif', 'Playfair Display', Georgia, serif;
  --sans: 'Quicksand', system-ui, sans-serif;   /* lido do CSS de assistenteia.letrar.com.br */
  --botao: 'Poppins', system-ui, sans-serif;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --radius-none: 0; --radius-md: 12px; --radius-botao: 20px; --radius-pill: 999px; --radius-full: 50%;
  /* Seção de oferta — lidos de assistenteia.letrar.com.br */
  --surface-oferta: #f3e6ff;
  --surface-vidro: rgba(255,255,255,.6);
  --hairline-brand: rgba(124,118,231,.3);
  --radius-lg: 30px;
  --shadow-card: 0 2px 10px rgba(0,0,0,.16);
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: -0.05em;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  body { font-size: 18px; line-height: 21.6px; }
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
strong { font-weight: 700; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ---------- Tipografia ----------
   Valores lidos do CSS de assistenteia.letrar.com.br (set/2026).
   Celular até 767px; computador a partir de 768px. */

.display-1,
.display-2,
.rotulo-cartao {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.05em;
}

.display-1 { font-size: 51px; line-height: 41.8px; }
.display-2 { font-size: 40px; line-height: 38px; }
.rotulo-cartao { font-size: 20px; line-height: 26px; }

/* Parágrafo de apoio logo abaixo do título */
.apoio { font-size: 15px; line-height: 16.5px; }

.body-strong { font-weight: 700; }
.sem-quebra { white-space: nowrap; }

@media (min-width: 768px) {
  .display-1 { font-size: 80px; line-height: 66px; }
  .display-2 { font-size: 60px; line-height: 56px; }
  .apoio { font-size: 18px; line-height: 19.8px; }
}

/* ---------- Componentes ---------- */

/* FaixaDestaque */
.faixa {
  display: inline-block;
  padding: 1px 3px;
  border-radius: var(--radius-none);
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--display);
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .faixa { font-size: 25px; line-height: 31px; }
}

/* Telas muito estreitas: a faixa nunca quebra em duas linhas */
@media (max-width: 359px) {
  .faixa { font-size: 18px; line-height: 22px; }
}

/* BotaoPrimario */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 40px;
  border-radius: var(--radius-botao);
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--botao);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-align: center;
}

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

@media (min-width: 768px) {
  .botao { min-height: 46px; }
}

/* ItemVerificado */
.lista-verificada { display: grid; gap: var(--space-5); }

.item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
}

.item svg { flex: none; width: 20px; height: 22px; }

/* CartaoPerfil */
.cartao {
  position: relative;
  width: 208px;
  min-height: 137px;
  padding: 22px var(--space-4) var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.cartao::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 3px;
  transform: translateX(-50%);
  background: var(--violet);
}

.cartao .circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 47px;
  margin: 0 auto;
  border-radius: var(--radius-full);
  background: var(--surface-tint);
}

.cartao .divisor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: var(--space-3) 0 var(--space-2);
}

.cartao .divisor i {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--violet);
  opacity: .45;
}

.cartao .divisor b {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--violet);
}

/* Moldura de imagem */
.moldura {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

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

/* ---------- Estrutura de seção ---------- */

.secao { padding: var(--space-9) 0 0; }
.secao:first-of-type { padding-top: var(--space-7); }

.cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cabecalho .faixa { margin-bottom: var(--space-5); }

.cabecalho h1,
.cabecalho h2 { max-width: 900px; text-wrap: balance; }

.apoio {
  max-width: 38em;
  margin-top: var(--space-3);
}

.acao {
  margin-top: var(--space-6);
  text-align: center;
}

/* ---------- 4.1 Hero ---------- */

/* Vídeo vertical (9:16): estreito para caber na tela com a linha de preço logo abaixo */
.hero .video {
  max-width: 320px;
  margin: var(--space-4) auto 0;
}

@media (min-width: 768px) {
  .hero .video { max-width: 360px; }
}

.video { position: relative; }

.video video {
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: cover;
  background: var(--surface-tint);
}


.preco {
  margin-top: var(--space-4);
  text-align: center;
}

.preco + .preco { margin-top: 0; }

/* ---------- 4.2 O que tem no material ---------- */

.material {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-7);
  align-items: center;
}

.paginas {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 460 / 470;
}

.paginas .moldura {
  position: absolute;
  width: 58%;
}

.paginas .p1 { left: 0;    top: 6%;  z-index: 1; }
.paginas .p2 { left: 21%;  top: 0;   z-index: 2; }
.paginas .p3 { right: 0;   top: 12%; z-index: 3; }

.material .texto .acao { text-align: left; }

@media (max-width: 899px) {
  .material .texto .acao { text-align: center; }
}

@media (min-width: 900px) {
  .material { grid-template-columns: 1fr 1fr; }
}

/* ---------- 4.3 Para quem é ---------- */

.perfis {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 340px;
  margin: var(--space-7) auto 0;
}

.perfis .cartao:nth-child(1) { align-self: flex-start; }
.perfis .cartao:nth-child(2) { align-self: center; }
.perfis .cartao:nth-child(3) { align-self: flex-end; }

@media (min-width: 768px) {
  .perfis {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    max-width: none;
  }
  .perfis .cartao:nth-child(n) { align-self: flex-start; }
  .perfis .cartao:nth-child(2) { margin-top: var(--space-7); }
  .perfis .cartao:nth-child(3) { margin-top: var(--space-9); }
}

/* ---------- 4.4 Antes x depois ---------- */

.comparacao {
  display: grid;
  gap: var(--space-7);
  max-width: 900px;
  margin: var(--space-7) auto 0;
}

.comparacao h3 { margin-bottom: var(--space-4); }

.comparacao ul { display: grid; gap: var(--space-4); }

.comparacao .coluna + .coluna {
  padding-top: var(--space-7);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 768px) {
  .comparacao { grid-template-columns: 1fr 1fr; }
  .comparacao .coluna + .coluna {
    padding-top: 0;
    padding-left: var(--space-7);
    border-top: 0;
    border-left: 1px solid var(--hairline);
  }
}

/* ---------- 4.5 Provas sociais ---------- */

.profissional {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: var(--space-6) auto 0;
}

@media (min-width: 768px) {
  .profissional { max-width: 380px; }
}

.provas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
  align-items: start;
}

.provas:empty { display: none; }

@media (min-width: 768px) {
  .provas { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 4.6 Oferta ---------- */

/* Faixa de fundo lilás de ponta a ponta: a única seção colorida da página */
.oferta {
  margin-top: var(--space-9);
  padding: var(--space-9) 0;
  background: var(--surface-oferta);
}

.cartao-oferta {
  max-width: 560px;
  margin: var(--space-7) auto 0;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--hairline-brand);
  border-radius: var(--radius-lg);
  background: var(--surface-vidro);
  text-align: center;
}

@media (min-width: 768px) {
  .cartao-oferta { padding: var(--space-7) var(--space-7) var(--space-6); }
}

/* Capa do kit na frente, duas páginas abertas em leque atrás */
.capas {
  position: relative;
  width: 220px;
  height: 230px;
  margin: 0 auto var(--space-5);
}

.capas img {
  position: absolute;
  bottom: 0;
  width: 140px;
  height: auto;
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}

.capas .capa-frente { left: 40px; z-index: 2; width: 150px; left: 35px; }
.capas .capa-esq { left: 0;  transform: rotate(-8deg); transform-origin: bottom right; }
.capas .capa-dir { right: 0; transform: rotate(8deg);  transform-origin: bottom left; }

.ancora { margin-top: var(--space-4); }
.ancora s { text-decoration-thickness: 2px; }

.cartao-oferta .preco-oferta { margin-top: var(--space-1); }
.cartao-oferta .body-strong { margin-top: var(--space-2); }

/* Selo de formato: deixa claro que o kit é digital (o vídeo mostra a versão impressa) */
.formato {
  display: inline-block;
  max-width: 360px;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-tint);
  font-size: 15px;
  line-height: 18px;
}

.recebe {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline-brand);
  font-weight: 700;
}

.cartao-oferta .lista-verificada {
  gap: var(--space-3);
  max-width: 420px;
  margin: var(--space-4) auto 0;
}

/* Botão da oferta: verde e na largura do cartão, como na oferta da Assistente IA */
.botao-oferta {
  width: 100%;
  margin-top: var(--space-6);
  background: var(--success);
  font-size: 17px;
}

@media (min-width: 768px) {
  .botao-oferta { min-height: 54px; }
}

.cartao-oferta .nota { margin-top: var(--space-3); }

.preco-oferta {
  font-family: var(--botao);
  font-weight: 700;
  font-size: 31px;
  line-height: 34.1px;
  letter-spacing: -0.05em;
}

.preco-oferta span { color: var(--brand); }

@media (min-width: 768px) {
  .preco-oferta { font-size: 65px; line-height: 71.5px; }
}





/* ---------- 4.7 FAQ ---------- */

.faq {
  max-width: 760px;
  margin: var(--space-7) auto 0;
}

.faq details + details { border-top: 1px solid var(--hairline); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

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

.faq summary svg { flex: none; }
.faq details[open] summary svg { transform: rotate(180deg); }

.faq summary:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.faq details p { padding: 0 0 var(--space-5); }

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

.rodape {
  padding: var(--space-9) 0 var(--space-7);
  text-align: center;
}

.rodape .marca {
  font-family: var(--display);
  font-size: 34px;
  line-height: 36px;
  color: var(--ink);
}

.rodape .cnpj { margin-top: var(--space-4); }