/* =========================================================
   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;
  --noite: #2B1721;
  --papel: #FFF7FA;
  --aurora: #FFD3B8;
  --fonte-display: "Fraunces", Georgia, "Times New Roman", serif;

  --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%;
  max-width: 400px;
  margin-inline: auto;
}

/* Reserva a caixa 9:16 antes do player montar, para a página não pular. */
.vturb-player-placeholder {
  position: relative;
  z-index: 0;
  width: 100%;
  padding-top: 177.7778%;
  background-color: #000;
}

.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 ---------- */
/* Estrutura modelada na referência: headline, barra de 3 passos, vídeo, par de
   CTAs, tudo numa dobra só e centralizado. A paleta foi traduzida do neon
   escuro do original para a da bebêZen, e o vídeo aqui é vertical (400px),
   não 16:9, então a coluna afunila: título 720 → passos 560 → vídeo 400. */
.pagina-upsell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 14%, rgba(241, 137, 156, 0.30), transparent 46%),
    var(--rosa-fundo);
}

.upsell-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 52px;
  text-align: center;
}

.upsell-hero__titulo {
  max-width: 620px;
  font-size: clamp(22px, 2.3vw, 29px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--ameixa);
}

/* Marca-texto: o gradiente só pinta a metade de baixo da linha, que é o que
   imita caneta em vez de virar um retângulo de fundo. O box-decoration-break
   mantém o traço correto quando o trecho quebra em duas linhas. */
.marca-texto {
  padding: 0 0.1em;
  background-image: linear-gradient(180deg, transparent 52%, rgba(241, 137, 156, 0.62) 52%);
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.upsell-hero__sub {
  max-width: 620px;
  margin-top: 12px;
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ameixa);
  opacity: 0.85;
}

/* Barra de 3 passos: grid de 3 colunas iguais que NUNCA empilha.
   No mobile a fonte encolhe em vez de quebrar a linha, com piso de 10px
   porque a copy dos passos aqui é mais longa que a da referência. */
.passos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 560px);
  margin: 28px auto 0;
}

.passo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 92px;
  padding: 12px 10px;
  border: 1px solid rgba(63, 35, 47, 0.15);
  border-radius: 8px;
  background-color: var(--ameixa);
  color: var(--branco);
  font-size: clamp(10px, 2.6vw, 12px);
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
}

/* O espaço da marca existe nos três passos. Só o passo 1 vem preenchido; os
   outros ficam como círculo vazio, que é o que dá a ideia de continuidade. */
.passo__marca {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0.38;
}

.passo--feito .passo__marca {
  opacity: 1;
  border-color: var(--branco);
  background-color: var(--branco);
}

.passo--feito .passo__marca svg {
  width: 11px;
  height: 11px;
  fill: var(--ameixa);
}

.passo--ativo {
  border-color: rgba(201, 62, 93, 0.55);
  background: linear-gradient(180deg, #F1899C 0%, #DC5C79 55%, #C93E5D 100%);
  color: var(--branco);
  box-shadow:
    0 12px 30px rgba(201, 62, 93, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.upsell-video {
  width: min(100%, 400px);
  margin: 30px auto 0;
  overflow: hidden;
  border-radius: 10px;
  background-color: #000;
  box-shadow: 0 0 60px rgba(201, 62, 93, 0.16);
  /* força camada própria para o player não piscar sobre o fundo */
  isolation: isolate;
}

.upsell-video vturb-smartplayer { max-width: 100%; }

.acoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(100%, 400px);
  margin: 26px auto 0;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  padding: 15px 22px;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              border-color 0.18s ease, background 0.18s ease;
}

.botao--principal {
  border: 1px solid rgba(201, 62, 93, 0.55);
  background: linear-gradient(180deg, #F1899C 0%, #DC5C79 52%, #C93E5D 100%);
  color: var(--branco);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  box-shadow:
    0 14px 32px rgba(201, 62, 93, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.botao--principal:hover,
.botao--principal:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 18px 42px rgba(201, 62, 93, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* A recusa é fantasma e em caixa mista de propósito. A referência usa o mesmo
   peso nos dois botões, mas lá a recusa tem 6 palavras; aqui tem 14, e em
   caixa alta 900 viraria um paredão competindo com o CTA. */
/* Precisa ter cara de botão sólido, mas sem gradiente e sem glow: a hierarquia
   vem da ausência de brilho, não de apagar o elemento. */
.botao--recusa {
  border: 1.5px solid rgba(63, 35, 47, 0.38);
  background-color: var(--branco);
  color: var(--ameixa);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 3px 10px rgba(63, 35, 47, 0.10);
}

.botao--recusa:hover,
.botao--recusa:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(63, 35, 47, 0.6);
  box-shadow: 0 6px 16px rgba(63, 35, 47, 0.16);
}

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

@media (max-width: 767px) {
  .upsell-hero { padding: 36px 16px 40px; }
  .upsell-hero__titulo { letter-spacing: -0.6px; }
  .passos { gap: 6px; margin-top: 22px; }
  .passo { gap: 6px; min-height: 78px; padding: 10px 5px; }
  .passo__marca { width: 17px; height: 17px; }
  .passo--feito .passo__marca svg { width: 9px; height: 9px; }
  .upsell-video { margin-top: 24px; }
  .acoes { margin-top: 22px; gap: 12px; }
  .botao--principal { font-size: 15px; }
}

/* 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 ---------- */
/* Direção: a página fala com uma mãe às 3 da manhã que acabou de recusar.
   Tudo fica claro e quieto, e a ousadia é gasta num lugar só: o bloco de preço
   invertido no fim, em cor de primeira luz. Noite virando amanhecer é
   literalmente o que a oferta promete. */

.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;
  color: var(--amarelo-downsell);
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.cartao {
  display: flex;
  flex-direction: column;
  margin: 20px auto 0;
  padding: 20px 40px 40px;
  background-color: var(--papel);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(63, 35, 47, 0.10);
}

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

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

.titulo-oferta {
  max-width: 22ch;
  margin: 0 auto 28px;
  font-family: var(--fonte-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.4px;
  color: var(--noite);
  text-align: center;
}

.titulo-oferta u {
  text-decoration-color: var(--rosa);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* O ponto que mais estragava a leitura: a prosa corria a mais de 1000px de
   largura, dando ~130 caracteres por linha. Travar em 62ch e alinhar à
   esquerda é a maior parte do ganho desta página. */
.prosa {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 19px;
  line-height: 1.62;
  color: var(--ameixa);
  text-align: left;
}

.prosa p { margin-bottom: 17px; }
.prosa p:last-child { margin-bottom: 0; }
.prosa b { color: var(--noite); }

/* "O que eu mantive": bloco à parte, com barra rosa à esquerda, porque é uma
   lista de concessões e não continuação da prosa. */
.mantido {
  max-width: 62ch;
  margin: 30px auto 0;
  padding: 22px 26px;
  border-left: 3px solid var(--rosa);
  border-radius: 0 10px 10px 0;
  background-color: rgba(241, 137, 156, 0.09);
}

.checklist {
  font-size: 17px;
  line-height: 1.45;
  color: var(--ameixa);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

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

.checklist svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  fill: var(--rosa-forte, #C93E5D);
}

.checklist b { color: var(--noite); }

.subtitulo-oferta {
  max-width: 24ch;
  margin: 52px auto 26px;
  font-family: var(--fonte-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--noite);
  text-align: center;
}

/* Três entregas em grade e a garantia numa faixa separada. Não numerei de 01 a
   04 porque seria mentira: as três primeiras são uma linha do tempo (72h ->
   12 semanas -> contínuo) e a quarta é uma promessa, não um passo. O marcador
   de tempo é a informação verdadeira. */
.entregas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 940px;
  margin: 0 auto;
}

.entrega {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 22px 20px;
  border: 1px solid rgba(63, 35, 47, 0.10);
  border-radius: 12px;
  background-color: var(--branco);
}

.entrega__quando {
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  background-color: rgba(241, 137, 156, 0.20);
  color: #A8324D;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.entrega__nome {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--noite);
}

.entrega__texto {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ameixa);
}

.garantia {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 940px;
  margin: 16px auto 0;
  padding: 20px 24px;
  border: 1px dashed rgba(168, 50, 77, 0.35);
  border-radius: 12px;
  background-color: rgba(255, 211, 184, 0.22);
}

.garantia__selo {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 2px solid var(--rosa-forte, #C93E5D);
  border-radius: 50%;
  color: var(--rosa-forte, #C93E5D);
  font-family: var(--fonte-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
}

.garantia__selo span {
  margin-top: 2px;
  font-family: var(--fonte-titulo);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.garantia__texto {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ameixa);
}

.garantia__texto b { color: var(--noite); }

/* A assinatura da página: o único bloco invertido, onde o preço e os botões
   moram. Tudo antes é claro e quieto para este momento pesar. */
.fechamento {
  max-width: 620px;
  margin: 44px auto 0;
  padding: 34px 30px 30px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 211, 184, 0.20), transparent 62%),
    var(--noite);
  text-align: center;
}

.fechamento__de {
  font-size: 15px;
  color: rgba(255, 247, 250, 0.62);
}

.fechamento__de del { text-decoration-color: var(--rosa); }

.fechamento__preco {
  margin-top: 6px;
  font-family: var(--fonte-display);
  font-size: clamp(34px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--aurora);
}

.fechamento__vista {
  margin-top: 8px;
  font-size: 16px;
  color: var(--papel);
}

.fechamento__nota {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background-color: rgba(255, 211, 184, 0.16);
  color: var(--aurora);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.fechamento .acoes { margin-top: 26px; }

/* A recusa vive sobre fundo escuro aqui, então o fantasma inverte. */
.botao--recusa-escuro {
  border: 1.5px solid rgba(255, 247, 250, 0.30);
  background-color: rgba(255, 247, 250, 0.06);
  color: rgba(255, 247, 250, 0.88);
  box-shadow: none;
}

.botao--recusa-escuro:hover,
.botao--recusa-escuro:focus-visible {
  border-color: rgba(255, 247, 250, 0.55);
  background-color: rgba(255, 247, 250, 0.12);
  box-shadow: none;
}

@media (max-width: 1024px) {
  .faixa-downsell__texto { font-size: 18px; }
}

@media (max-width: 767px) {
  .faixa-downsell .container { padding: 0; }

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

  .cartao { margin-top: 34px; padding: 18px 18px 32px; border-radius: 12px; }
  .cartao__seta { margin-bottom: 16px; }
  .cartao__seta svg { height: 38px; }
  .titulo-oferta { margin-bottom: 22px; }
  .prosa { font-size: 16.5px; line-height: 1.6; }
  .mantido { margin-top: 24px; padding: 18px 18px 18px 20px; }
  .checklist { font-size: 15.5px; }
  .subtitulo-oferta { margin: 40px auto 20px; }
  .entregas { grid-template-columns: 1fr; gap: 12px; }
  .entrega { padding: 18px 18px; }
  .garantia { flex-direction: column; text-align: center; gap: 12px; }
  .fechamento { margin-top: 34px; padding: 28px 20px 24px; }
}

/* ---------- 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; }
}

/* ---------- 10. Página 404 ---------- */
.pagina-404 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.erro-404 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 60px 20px;
  text-align: center;
}

.erro-404__logo { width: 160px; }

.erro-404__titulo {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1px;
  color: var(--ameixa);
}

.erro-404__texto {
  max-width: 34rem;
  font-size: 18px;
  line-height: 1.5;
  color: var(--preto);
}

.erro-404__botao {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background-color: var(--rosa);
  color: var(--branco);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.2s;
}

.erro-404__botao:hover,
.erro-404__botao:focus-visible { filter: brightness(0.92); }

@media (max-width: 767px) {
  .erro-404 { gap: 20px; padding: 40px 16px; }
  .erro-404__logo { width: 120px; }
  .erro-404__titulo { font-size: 26px; }
  .erro-404__texto { font-size: 16px; }
}