/* ============================================================
   vsl.css — blocos exclusivos do funil Quiz → VSL Efeito Nostalgia
   (arm B: a tela de vendas é a página de vendas do curso, com a VSL no topo)
   ============================================================ */

/* ---------- Cabeçalho da VSL ---------- */
.vsl-head { text-align: center; margin: 4px 0 14px; }
.vsl-kicker {
  display: inline-block;
  background: #2e7d32; color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 10px;
}
.vsl-title {
  font-size: 21px; line-height: 1.28; font-weight: 800;
  margin: 0 0 8px; color: var(--ink, #16181d);
}
.vsl-title em { display: block; font-style: normal; color: #b3261e; }
.vsl-sub { font-size: 14px; line-height: 1.5; color: var(--ink-mute, #5b616e); margin: 0; }

/* ---------- Player ---------- */
.vsl-wrap {
  width: 100%;
  margin: 0 auto 10px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  min-height: 200px;
}
.vsl-wrap vturb-smartplayer { display: block; width: 100%; }
.vsl-note {
  text-align: center; font-size: 13px; font-weight: 600;
  color: var(--ink-mute, #5b616e); margin: 0 0 14px;
}

/* Aviso de player bloqueado / não carregado (QA) */
.vsl-fallback {
  background: #fff3cd; border: 1px solid #e6a817; border-radius: 10px;
  padding: 16px; text-align: center; font-size: 14px; line-height: 1.5;
}

/* ---------- 3 Fases ---------- */
.fases-grid { display: grid; gap: 12px; margin: 12px 0 4px; }
.fase-card {
  background: #fff; border: 1px solid #e6e8ee; border-radius: 12px;
  padding: 18px 16px; text-align: center;
  box-shadow: 0 1px 3px rgba(16, 20, 30, .05);
}
.fase-icon { width: 48px; height: auto; margin: 0 auto 10px; display: block; }
.fase-title {
  font-size: 15px; font-weight: 800; letter-spacing: .06em;
  margin: 0 0 8px; color: #b3261e;
}
.fase-desc { font-size: 14px; line-height: 1.55; color: var(--ink, #16181d); margin: 0; text-align: left; }
@media (min-width: 720px) { .fases-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 8px; margin: 12px 0; }
.faq-item { border: 1px solid #e6e8ee; border-radius: 10px; overflow: hidden; background: #fff; }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: none; border: 0; padding: 14px 16px; cursor: pointer;
  font-size: 14px; font-weight: 700; text-align: left; color: var(--ink, #16181d);
  font-family: inherit;
}
.faq-ic { font-size: 11px; color: var(--ink-mute, #5b616e); transition: transform .15s ease; }
.faq-item.open .faq-ic { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 16px 14px; font-size: 14px; line-height: 1.55; color: var(--ink-mute, #5b616e); }
.faq-item.open .faq-a { display: block; }
.faq-a p { margin: 0; }

/* ---------- Ícones de pagamento ---------- */
.pay-icons { margin-top: 10px; }
.pay-icons img { max-width: 260px; width: 100%; height: auto; }

/* ---------- Handoff (arm A: prelander → VSL) ---------- */
.handoff-box {
  background: #0f1115; color: #fff; border-radius: 14px;
  padding: 20px 18px; margin: 16px 0; text-align: center;
}
.handoff-box .handoff-kicker {
  display: inline-block; background: #b3261e; color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  padding: 5px 11px; border-radius: 999px; margin-bottom: 10px;
}
.handoff-box h3 { font-size: 19px; line-height: 1.3; margin: 0 0 10px; font-weight: 800; }
.handoff-box p { font-size: 14px; line-height: 1.55; margin: 0 0 6px; color: #cfd3dc; }
.handoff-box strong { color: #fff; }