/* Quiz do Bumbum Sexy — visual copiado do funil de referencia (inlead).
   Medidas tiradas do computed style do original, no viewport de 375px:
     corpo        #f4f4f5, texto #1e293b, Inter 16px/24px
     headline     32px / 700 / #be123c / centralizado
     apoio        16px / 400 / #1e293b / centralizado
     opcao        bg #f4f4f5, borda 1px #dadada, raio 16px, texto #be123c,
                  emoji 32px numa coluna de 60px, bolinha de radio 26px
     botao        bg #ec4899, branco, raio 16px, peso 500
     barra        altura 12px, raio 12px, preenchimento #ec4899
   Nao usa nenhum token do quiz2.css: este funil e um teste de formato, entao
   ele tem que parecer o original, nao a nossa marca. */

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1e293b;
  background: #f4f4f5;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 0 96px;
}

/* --- Cabecalho: seta de voltar + logo + barra de progresso ---------------- */
.qb-top {
  max-width: 28rem;
  margin: 0 auto;
  padding: 14px 12px 0;
}
.qb-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
}
.qb-back {
  position: absolute;
  left: 0;
  top: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #be123c;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.qb-logo { width: 96px; height: auto; display: block; }

.qb-progress {
  height: 12px;
  border-radius: 12px;
  background: #fbcfe8;
  overflow: hidden;
  margin-top: 12px;
}
.qb-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 12px;
  background: #ec4899;
  transition: width 300ms linear;
}

/* --- Area do passo -------------------------------------------------------- */
.quiz-app {
  max-width: 28rem;
  margin: 0 auto;
  padding: 28px 12px 0;
}

.step-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: #be123c;
  text-align: center;
  margin-bottom: 12px;
}
.step-title b, .step-title strong { color: #be123c; }

.step-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #1e293b;
  text-align: center;
  white-space: pre-line;
  margin-bottom: 20px;
}
.step-body b, .step-body strong { font-weight: 700; color: #1e293b; }
.step-body img { max-width: 100%; height: auto; border-radius: 0; }
/* O marca-texto do nosso typebot nao existe no original: vira so negrito. */
.step-body .hl, .step-body .hl-pink, .step-body .hl-danger,
.step-title .hl, .step-title .hl-pink, .step-title .hl-danger {
  background: none;
  color: inherit;
  padding: 0;
}

/* --- Opcoes --------------------------------------------------------------- */
.options { display: flex; flex-direction: column; gap: 12px; }

.option {
  width: 100%;
  min-height: 66px;
  display: flex;
  align-items: stretch;
  padding: 0;
  background: #f4f4f5;
  border: 1px solid #dadada;
  border-radius: 16px;
  color: #be123c;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background 160ms ease, border-color 160ms ease;
}
.option:hover, .option:focus { background: #eeeef0; outline: none; }
/* Selecionada: o original preenche a bolinha e escurece um tom. */
.option.selected { background: #fce7f3; border-color: #ec4899; }
.option.selected .option-radio { border-color: #ec4899; background: #ec4899; }
.option.selected .option-radio::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  margin: 7px auto;
  border-radius: 999px;
  background: #ffffff;
}

.option-emoji {
  width: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
}
.option-image {
  width: 60px;
  height: 64px;
  flex-shrink: 0;
  object-fit: cover;
}
.option-row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 0;
}
.option-radio {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 1px solid #dadada;
  border-radius: 999px;
  background: #f4f4f5;
}
.option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option-sub { font-size: 14px; color: #64748b; }

/* Botao negativo (tipo decision) — o clone nao usa, mas o motor e o mesmo. */
.option-negative {
  min-height: auto;
  border-color: rgba(220, 38, 38, 0.4);
  color: #dc2626;
}
.negative-message {
  margin-top: 10px;
  font-size: 15px;
  color: #dc2626;
  text-align: center;
}

/* --- Botao principal (dock no rodape) ------------------------------------- */
.cta-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  background: linear-gradient(180deg, rgba(244, 244, 245, 0) 0%, #f4f4f5 38%);
}
.cta-dock:empty { display: none; }
.cta {
  display: block;
  width: 100%;
  max-width: calc(28rem - 24px);
  margin: 0 auto;
  padding: 14px 16px;
  background: #ec4899;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 16px;
  cursor: pointer;
}
.cta:disabled { opacity: 0.45; cursor: default; }
.cta-gold { background: #ec4899; }

/* --- Campo de texto ------------------------------------------------------- */
.name-input {
  width: 100%;
  padding: 16px;
  font-family: inherit;
  font-size: 18px;
  color: #1e293b;
  text-align: center;
  background: #ffffff;
  border: 1px solid #dadada;
  border-radius: 16px;
}
.name-input:focus { outline: none; border-color: #ec4899; }

/* --- Tela de processamento ------------------------------------------------ */
.proc-track {
  height: 12px;
  border-radius: 12px;
  background: #fbcfe8;
  overflow: hidden;
}
.proc-fill { width: 0; height: 100%; border-radius: 12px; background: #ec4899; }
.proc-pct {
  margin-top: 8px;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: #ec4899;
  font-variant-numeric: tabular-nums;
}
.proc-msgs { position: relative; min-height: 52px; margin-top: 12px; }
.proc-msg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms ease;
  font-size: 15px;
  line-height: 1.5;
  color: #1e293b;
  text-align: center;
}
.proc-msg.on { opacity: 1; }
.proc-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.proc-pics img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #dadada;
}

/* --- Barras de resultado -------------------------------------------------- */
.bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bar-col {
  background: #ffffff;
  border: 1px solid #dadada;
  border-radius: 16px;
  padding: 14px 8px 12px;
  text-align: center;
}
.bar-pct { font-size: 18px; font-weight: 700; color: #ec4899; }
.bar-track {
  height: 96px;
  width: 34px;
  margin: 8px auto;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.bar-fill {
  width: 100%;
  border-radius: 8px;
  background: #ec4899;
  animation: qbBar 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes qbBar { from { height: 0 !important; } }
.bar-label { font-size: 13px; font-weight: 700; color: #1e293b; }
.bar-caption { font-size: 12px; line-height: 1.3; color: #64748b; margin-top: 4px; }

/* --- Grafico -------------------------------------------------------------- */
.chart-wrap {
  background: #ffffff;
  border: 1px solid #dadada;
  border-radius: 16px;
  padding: 12px 8px 6px;
}
.chart { width: 100%; height: auto; display: block; }
.ch-grid { stroke: #e2e8f0; stroke-width: 1; }
.ch-ytick, .ch-xtick { fill: #94a3b8; font-size: 9px; }
.ch-ytick { text-anchor: end; }
.ch-xtick { text-anchor: middle; }
.ch-area { fill: rgba(236, 72, 153, 0.14); }
.ch-line { fill: none; stroke: #ec4899; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ch-dot { fill: #ffffff; stroke: #ec4899; stroke-width: 2.5; }
.ch-mark { fill: #1e293b; font-size: 9.5px; font-weight: 700; }

/* --- Pitch ---------------------------------------------------------------- */
.pitch-h3 {
  font-size: 18.72px;
  font-weight: 700;
  color: #be123c;
  text-align: center;
  margin: 26px 0 12px;
}
.pitch-reframe { font-size: 16px; line-height: 1.55; color: #1e293b; text-align: center; }
.pitch-reframe b { font-weight: 700; }

.testi-card {
  display: flex;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #dadada;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
}
.testi-photo { width: 84px; height: 84px; flex-shrink: 0; object-fit: cover; border-radius: 12px; }
.testi-name { font-size: 15px; font-weight: 700; color: #be123c; }
.testi-text { font-size: 14px; line-height: 1.45; color: #1e293b; margin-top: 4px; }

.pitch-benefits ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pitch-benefits li { font-size: 15px; line-height: 1.5; color: #1e293b; }

.pitch-bullets { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pitch-bullets li { font-size: 15px; line-height: 1.5; color: #1e293b; }

.bonus-card {
  background: #ffffff;
  border: 1px solid #dadada;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
}
.bonus-name { font-size: 16px; font-weight: 700; color: #be123c; }
.bonus-desc { font-size: 14px; line-height: 1.5; color: #1e293b; margin-top: 6px; }
.bonus-price { font-size: 15px; margin-top: 10px; color: #64748b; }
.bonus-price s { color: #94a3b8; }
.bonus-price b { color: #16a34a; font-weight: 700; }

.pitch-scarcity {
  margin-top: 18px;
  padding: 12px;
  border-radius: 16px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.pitch-price-box {
  margin-top: 18px;
  padding: 20px 16px;
  background: #ffffff;
  border: 2px dashed #ec4899;
  border-radius: 16px;
  text-align: center;
}
.pitch-price { font-size: 20px; line-height: 1.4; color: #1e293b; }
.pitch-price s { color: #dc2626; }
.pitch-price b { display: block; margin-top: 6px; font-size: 32px; font-weight: 700; color: #16a34a; }
.pitch-price-sub { font-size: 14px; color: #64748b; margin-top: 8px; }

.pitch-timer { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.timer-box {
  min-width: 48px;
  padding: 6px 10px;
  border-radius: 12px;
  background: #1e293b;
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.timer-sep { font-size: 22px; font-weight: 700; }
.timer-note { flex-basis: 100%; text-align: center; margin-top: 8px; font-size: 14px; font-weight: 700; color: #b91c1c; }

.pitch-seals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.seal { background: #ffffff; border: 1px solid #dadada; border-radius: 16px; padding: 12px; text-align: center; }
.seal-title { font-size: 14px; font-weight: 700; color: #1e293b; }
.seal-sub { font-size: 12.5px; color: #64748b; margin-top: 2px; line-height: 1.35; }

.pitch-guarantee {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: #dcfce7;
  font-size: 15px;
  line-height: 1.5;
  color: #14532d;
  text-align: center;
}
.pitch-guarantee b { font-weight: 700; }

.pitch-post-guarantee { margin-top: 14px; }
.pitch-post-guarantee img { width: 100%; border-radius: 16px; }

.pitch-before-after { margin-top: 22px; }
.ba-title { font-size: 18.72px; font-weight: 700; color: #be123c; text-align: center; }
.ba-subtitle { font-size: 15px; color: #64748b; text-align: center; margin-top: 4px; margin-bottom: 12px; }
/* 4 fotos em coluna viram um scroll enorme; em grade de 2 elas cabem. */
.ba-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba-card img { width: 100%; border-radius: 16px; border: 1px solid #dadada; display: block; }
.ba-caption { font-size: 13px; color: #64748b; text-align: center; margin-top: 6px; }

.pitch-whofor { display: grid; gap: 12px; margin-top: 18px; }
.whofor-block { background: #ffffff; border: 1px solid #dadada; border-radius: 16px; padding: 14px; }
.whofor-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.whofor-title.for { color: #16a34a; }
.whofor-title.not { color: #dc2626; }
.whofor-block ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.whofor-block li { font-size: 14px; line-height: 1.45; color: #1e293b; }

/* Rodape igual ao do original */
.qb-foot {
  max-width: 28rem;
  margin: 26px auto 0;
  padding: 0 12px;
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
}

/* Segundo titulo na mesma tela (a referencia usa dois H1 na tela de abertura
   das perguntas) e a nota que aparece embaixo de toda pergunta. */
.step-title2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: #be123c;
  text-align: center;
  margin-top: 14px;
}
.step-note {
  font-size: 16px;
  color: #1e293b;
  text-align: center;
  margin-bottom: 18px;
}
.step-body + .step-note { margin-top: -6px; }
/* Na referencia o negrito dentro da headline continua rosa, nao escurece. */
.step-title2 b, .step-title2 strong { color: #be123c; }
/* Logo da marca (deitado) — precisa de mais largura que a foto quadrada. */
.qb-logo-wide { width: 186px; }

/* Marca-texto do original: linha em caixa alta com fundo rosa e texto branco,
   logo abaixo da headline da abertura. */
.step-mark {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 16px;
  background: #ec4899;
  color: #ffffff;
  font-size: 18.72px;
  font-weight: 700;
  line-height: 1.3;
  padding: 5px 8px;
}

/* ==========================================================================
   VARIACOES DE ESTILO POR TELA — a referencia nao usa um estilo unico de
   opcao: ela alterna entre cinza, rosa claro e rosa solido conforme a tela.
   O passo declara qual usar em optionSkin.
   ========================================================================== */

/* Cinza (o padrao ja definido acima em .option) — telas de satisfacao e objetivo */

/* Rosa claro: fundo 10% do rosa, texto rose-700 */
.options-rosaclara .option {
  background: rgba(236, 72, 153, 0.1);
  border-color: rgba(236, 72, 153, 0.28);
  color: #be123c;
}
.options-rosaclara .option:hover,
.options-rosaclara .option:focus { background: rgba(236, 72, 153, 0.18); }
.options-rosaclara .option-radio { background: rgba(255, 255, 255, 0.7); }

/* Rosa solido: fundo cheio, texto branco */
.options-rosa .option {
  background: #ec4899;
  border-color: #ec4899;
  color: #ffffff;
}
.options-rosa .option:hover,
.options-rosa .option:focus { background: #db2777; border-color: #db2777; }
.options-rosa .option-sub { color: rgba(255, 255, 255, 0.85); }
.options-rosa .option-radio { border-color: rgba(255, 255, 255, 0.75); background: transparent; }
.options-rosa .option.selected { background: #db2777; border-color: #9d174d; }
.options-rosa .option.selected .option-radio { background: #ffffff; border-color: #ffffff; }
.options-rosa .option.selected .option-radio::after { background: #db2777; }

/* Subtitulo em H3 (18.72px) — a referencia usa esse tamanho abaixo de alguns
   titulos, e tambem na headline da tela de abertura. */
.step-sub {
  font-size: 18.72px;
  font-weight: 700;
  line-height: 1.2;
  color: #be123c;
  text-align: center;
  margin-top: 10px;
}
/* Abertura: a headline dela e H3 e o texto e quase preto — so as partes em
   negrito ficam rosa, exatamente como na referencia. */
.step-abertura .step-title {
  font-size: 18.72px;
  line-height: 1.2;
  color: #09090b;
}
.step-abertura .step-title b,
.step-abertura .step-title strong { color: #ec4899; }
/* A referencia usa H2 de 24px nessa tela, nao o H1 de 32px. */
.step-prontidao .step-title { font-size: 24px; }

/* --- Gift em video no pitch ---------------------------------------------- */
.pitch-gift { margin: 18px 0; }
.pitch-gift-video {
  /* O video e vertical (384x848). Em largura cheia ele dava 775px de altura num
     celular de 812 — sozinho tomava a tela inteira e empurrava o preco e o
     botao pra fora do campo de visao. Com a altura limitada ele continua grande
     o suficiente pra ser visto e ainda cabe junto do resto da oferta. */
  max-height: 56vh;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 16px;
  background: #000;
  display: block;
}
.pitch-gift-note {
  font-size: 14px;
  color: #64748b;
  text-align: center;
  margin-top: 8px;
}