/* =========================================================
   BebêZen · Funil Combo ABT
   CSS único para as 4 páginas (VSL, upsell, downsell, obrigado)
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --preto: #000000;
  --branco: #ffffff;
  --rosa-fundo: #FBEBF3;
  --rosa: #F1899C;
  --ameixa: #3F232F;
  --vsl-fundo: #FFFCFD;
  --amarelo-upsell: #FFFB3F;
  --amarelo-downsell: #E4EF2E;
  --verde: #2CB81B;

  --fonte-titulo: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fonte-legal: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fonte-vsl: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --largura: 1140px;
  --largura-larga: 1280px;
  --gutter: 10px;
}

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

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

body {
  margin: 0;
  font-family: var(--fonte-titulo);
  color: var(--ameixa);
  background-color: var(--rosa-fundo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, p, ul, figure { margin: 0; }

ul { padding: 0; list-style: none; }

del { text-decoration: line-through; }

svg { display: block; }

/* ---------- 3. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding: var(--gutter);
}

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

.secao--preta { background-color: var(--preto); }
.secao--rosa  { background-color: var(--rosa-fundo); }

/* ---------- 4. Página VSL (frontend) ---------- */
.pagina-vsl { background-color: var(--vsl-fundo); }

.barra-urgencia__texto {
  margin: 0;
  line-height: 1.35;
  padding: 5px 10px;
  font-family: var(--fonte-vsl);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--branco);
  text-align: center;
}

.player { width: 100%; }
.player vturb-smartplayer { display: block; width: 100%; margin-inline: auto; }

.rodape-vsl { margin-top: 80px; }

.rodape-vsl__texto {
  margin-bottom: 16px;
  font-family: var(--fonte-vsl);
  font-weight: 600;
  font-size: 16px;
  color: var(--branco);
  text-align: center;
}

@media (max-width: 767px) {
  .rodape-vsl__texto { font-size: 13px; margin: 5px; }
}

/* ---------- 5. Página upsell ---------- */
.barra-aviso__texto {
  margin: 10px 0 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--amarelo-upsell);
  text-align: center;
}

@media (max-width: 767px) {
  .barra-aviso__texto { font-size: 17px; }
}

/* Checkout escondido até o pitch.
   O VTurb revela com style="display:block !important" inline, que vence esta regra. */
.esconder { display: none; }

/* ---------- 6. Página downsell ---------- */
.faixa-downsell__texto {
  margin: 0 50px;
  padding: 10px 0 10px 5px;
  border-radius: 5px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-style: italic;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--amarelo-downsell);
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.cartao {
  display: flex;          /* evita colapso de margem, como o layout flex do original */
  flex-direction: column;
  margin-top: 20px;
  padding: 20px 30px;
  background-color: var(--branco);
  border-radius: 4px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.24);
}

.cartao__seta {
  margin: -40px 0 20px;
  color: var(--rosa);
  text-align: center;
}

.cartao__seta svg {
  width: auto;
  height: 50px;
  margin-inline: auto;
  fill: currentColor;
}

.titulo-oferta {
  margin: 40px 0 20px;
  font-size: 33px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.5px;
  color: var(--ameixa);
  text-align: center;
}

.texto-oferta {
  font-size: 20px;
  line-height: 26px;
  font-weight: 400;
  color: var(--preto);
}

.texto-oferta { margin-bottom: 20px; }
.texto-oferta p { margin-bottom: 16px; }

.texto-oferta--lista ul {
  margin-bottom: 16px;
  padding-left: 40px;
  list-style: disc;
}

.texto-oferta--lista li { margin-bottom: 10px; }

.checklist {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 400;
  color: var(--preto);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 6.25px;
  padding-bottom: 3px;
}

.checklist li + li { margin-top: 3px; }

.checklist svg {
  flex: 0 0 auto;
  width: 21.9px;
  height: 25px;
  fill: var(--rosa);
}

.subtitulo-oferta {
  margin: 10px 0 35px;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ameixa);
  text-align: center;
}

.subtitulo-oferta b { font-weight: 700; }

.preco { margin: 10px 0 35px; }

/* ---------- 7. Rodapé institucional (downsell + obrigado) ---------- */
.rodape {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rodape__logo { flex: 0 0 14.298%; }

.rodape__legal {
  flex: 1 1 auto;
  font-family: var(--fonte-legal);
  font-weight: 600;
  font-size: 14px;
  color: var(--preto);
  text-align: center;
}

@media (max-width: 1024px) {
  .rodape__legal { text-align: justify; }
}

@media (max-width: 767px) {
  .rodape { flex-direction: column; }
  .rodape__logo { flex: 0 0 auto; width: 36%; }
  .rodape__legal { font-size: 12px; text-align: center; }
}

/* ---------- 8. Página de obrigado ---------- */
.hero-obrigado { padding: 100px 0; }
.hero-obrigado .container { padding: 0; }

.hero-obrigado__grid {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hero-obrigado__texto {
  display: flex;          /* evita colapso de margem, como o layout flex do original */
  flex-direction: column;
  flex: 0 0 42.891%;
  padding-left: 80px;
}
.hero-obrigado__arte  { flex: 1 1 57.109%; padding: 10px; }

.hero-obrigado__arte img,
.hero-obrigado__mobile img {
  width: 83%;
  max-width: 59%;
  margin-inline: auto;
}

.hero-obrigado__mobile { display: none; }

.titulo-obrigado {
  margin-bottom: 20px;
  font-size: 45px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 1.5px;
  color: var(--ameixa);
}

.barra-progresso {
  margin: 0 20px 20px;
  background-color: var(--branco);
  border-radius: 13px;
  overflow: hidden;
}

.barra-progresso__preenchimento {
  display: flex;
  align-items: center;
  height: 40px;
  width: 0;
  background-color: var(--verde);
  border-radius: 13px;
  animation: preencher 1s ease-out forwards;
}

.barra-progresso__texto {
  padding-left: 15px;
  font-size: 14px;
  font-weight: 500;
  color: var(--branco);
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

@keyframes preencher { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .barra-progresso__preenchimento { animation: none; width: 100%; }
}

.aviso-acesso {
  margin-top: 10px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ameixa);
}

/* ---------- 9. Breakpoints ---------- */
@media (max-width: 1024px) {
  .faixa-downsell__texto { font-size: 18px; }
  .titulo-oferta { font-size: 30px; }
  .subtitulo-oferta { font-size: 18px; }
  .titulo-obrigado { font-size: 35px; }
  .aviso-acesso { font-size: 18px; }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .hero-obrigado__texto { flex-basis: 55%; }
  .hero-obrigado__arte { flex-basis: 45%; }
}

@media (max-width: 767px) {
  /* no mobile o container da faixa perde o padding lateral (igual ao original) */
  .faixa-downsell .container { padding: 0; }

  .faixa-downsell__texto {
    margin: 20px 0;
    padding: 12px;
    border-radius: 0;
    font-size: 20px;
  }

  .cartao { margin-top: 40px; padding: 30px 15px; }
  .titulo-oferta { font-size: 25px; }
  .texto-oferta, .checklist { font-size: 16px; }
  .checklist li { padding-bottom: 2px; }
  .checklist li + li { margin-top: 2px; }
  .subtitulo-oferta { font-size: 19px; }

  .hero-obrigado { padding: 0 0 40px; }
  .hero-obrigado__grid { flex-direction: column; }
  .hero-obrigado__texto { flex: 1 1 auto; padding: 0 10px; }
  .hero-obrigado__arte { display: none; }

  .hero-obrigado__mobile { display: block; margin-bottom: 20px; }
  .hero-obrigado__mobile img { margin-inline: auto; }

  /* o título sobe 80px sobre a foto; a barra fica logo abaixo dele */
  .titulo-obrigado {
    margin: -80px 20px 0;
    font-size: 30px;
    text-align: center;
  }

  .barra-progresso { margin: 16px 20px 20px; }
  .aviso-acesso { font-size: 16px; text-align: center; }
}