/* ══════════════════════════════════════════════════════════════════
   RAFAELA DUARTE · QUIZ POR ETAPAS (visual do InLead)
   Usado so pelo etapas.php (.env FLUXO=4), por cima do base.css:
   o base.css traz os componentes do Pix, do formulario e do upsell;
   aqui ficam os tokens (cores e fonte do InLead) e as telas por etapa.
   Medidas copiadas do funil rafaeladuarte.com (InLead).
   ══════════════════════════════════════════════════════════════════ */

:root {
  --background: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F7F7F8;
  --surface-3: #EFEFF1;
  --text: #030712;
  --text-2: #374151;
  --text-muted: #6B7280;
  --border: #E5E7EB;
  --border-strong: #DBDBDB;
  --primary: #030712;
  --secondary: #030712;
  --grad: #17A34A;
  --success: #16A34A;
  --danger: #DC2626;
  --focus: rgba(3,7,18,.35);
  --confete: #16A34A,#2563EB,#DC2626,#FACC15,#030712,#F97316;
  --font: Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display: var(--font);
  --radius: 16px;
  --radius-lg: 16px;
  --btn-bg: #17A34A;
  --btn-radius: 16px;
  --btn-h: 56px;
  --btn-weight: 700;
  --btn-tt: none;
  --btn-ls: 0;
  --shadow-cta: none;
  --card-bg: #FFFFFF;
  --t-body: 16px;
  /* InLead */
  --il-preto: #030712;
  --il-texto: #6B7280;
  --il-vermelho: #DC2626;
  --il-verde: #16A34A;
  --il-col: 28rem;
}

/* o topo (seta + barra) fica fixo: o que a pagina rola ate aparecer logo abaixo dele */
html {
  scroll-padding-top: 64px;
}

body.il {
  background: #FFFFFF;
  color: var(--il-texto);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
}

/* ── topo: seta de voltar + barra de progresso ─────────────────── */
.il-topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #FFFFFF;
  padding: 12px 12px 4px;
}

.il-topo-in {
  max-width: var(--il-col);
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.il-voltar {
  justify-self: start;
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 4px 0 0;
  color: var(--il-preto);
}

.il-voltar svg {
  width: 14px;
  height: 14px;
}

.il-voltar[hidden] {
  display: none;
}

.il-barra {
  position: relative;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb,var(--il-preto) 10%,transparent);
}

.il-barra i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--il-preto);
  border-radius: 999px;
  transition: width .7s ease;
}

/* ── uma etapa por vez ─────────────────────────────────────────── */
.il-main {
  max-width: var(--il-col);
  margin: 0 auto;
  padding: 12px 12px 40px;
  overflow-x: hidden;
}

.il-passo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: calc(100svh - 72px);
}

.il-passo[hidden] {
  display: none;
}

/* troca de etapa: entra pela direita (avancar) ou pela esquerda (voltar) */
.il-passo.entra {
  animation: ilEntra .38s cubic-bezier(.22,1,.36,1) both;
}

.il-passo.entra.volta {
  animation-name: ilVolta;
}

@keyframes ilEntra {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ilVolta {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .il-passo.entra {
    animation: none;
  }
}

.il-esp {
  height: 1rem;
}

/* ── imagens ───────────────────────────────────────────────────── */
.il-img {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
}

.il-img > img, .il-img > video {
  width: 100%;
  height: auto;
  display: block;
}

.il-img.m {
  width: 100%;
}

.il-img.p {
  width: 78%;
  margin: 0 auto;
}

/* ── textos (como o editor do InLead: h1 32px, h2 25.6px, h3 20.8px, p 16px) ── */
.il-tx {
  padding: 4px 0;
  text-align: center;
  word-break: break-word;
}

.il-tx h1, .il-tx h2, .il-tx h3 {
  margin: 0;
  color: var(--il-preto);
  font-weight: 900;
  text-wrap: balance;
}

.il-tx h1 {
  font-size: 32px;
  line-height: 1.1;
}

.il-tx h2 {
  font-size: 25.6px;
  line-height: 1.1;
}

.il-tx h3 {
  font-size: 20.8px;
  line-height: 1.1;
}

.il-tx p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--il-texto);
}

.il-tx > :first-child {
  margin-top: 0;
}

.il-tx p:empty {
  min-height: 1.1em;
  margin: 0;
}

.il-tx strong {
  font-weight: 700;
}

.il-tx h1 strong, .il-tx h2 strong, .il-tx h3 strong {
  font-weight: 900;
}

.il-tx .xl {
  font-size: 1.5em;
  line-height: 1.1;
}

.il-tx p .xl {
  font-size: 24px;
}

.il-tx .pq, .il-tx p.pq {
  font-size: 12px;
}

.il-tx h3 .pq {
  font-size: 15.6px;
}

.il-tx .k {
  color: #09090B;
}

.il-tx .r {
  color: var(--il-vermelho);
}

.il-tx .g {
  color: var(--il-verde);
}

.il-tx .vm {
  color: #F60000;
}

.il-tx .grt {
  background: #069601;
  color: #FDF3F3;
}

.il-tx .todos {
  background: #16A34A;
  color: #09090B;
}

.il-tx .il-dest {
  background: #16A34A;
  color: #FFFFFF;
  padding: 0 .25em;
}

.il-tx .fx {
  color: #FFFFFF;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.il-tx .fx-azul {
  background: #007BF8;
}

.il-tx .fx-verde {
  background: #289712;
}

.il-tx .nome-caso {
  font-size: 12px;
  color: #030712;
}

.il-tx .nome-caso strong {
  color: #030712;
}

.il-tx em {
  font-style: italic;
}

.il-tx .seta-c {
  color: #474747;
  font-weight: 400;
}

/* ── opcoes de resposta ─────────────────────────────────────────── */
.il-ops {
  display: grid;
  gap: 12px;
  padding: 4px 0;
}

.il-op {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 64px;
  text-align: left;
  background: #FFFFFF;
  color: #030712;
  border: 1px solid #DBDBDB;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  overflow: hidden;
  transition: border-color .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .12s ease;
}

@media (hover:hover) {
  .il-op:hover {
    border-color: #030712;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  }
}

.il-op:active {
  transform: scale(.99);
}

.il-op-ico {
  flex: 0 0 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  padding: 8px;
}

.il-op-ico img.emj {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin: 0;
}

.il-op-txt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.il-op-seta {
  flex: 0 0 auto;
  align-self: center;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0 12px;
  border: 1px solid #DBDBDB;
  border-radius: 50%;
  background: #FFFFFF;
  color: #030712;
  transition: inherit;
}

.il-op-seta svg {
  width: 14px;
  height: 14px;
}

/* resposta escolhida: fica preta, como no InLead */
.il-op.ativa {
  background: #030712;
  border-color: #030712;
  color: #FFFFFF;
}

.il-op.ativa .il-op-seta {
  background: #030712;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* ── botoes verdes (Continuar, Quero descobrir, Vou aproveitar) ─── */
.il-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin: 10px 0 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 16px;
  background: #17A34A;
  color: #FFFFFF;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  animation: ilPulo 1s ease infinite;
  transition: background-color .2s ease;
}

@media (hover:hover) {
  .il-btn:hover {
    background: #2EAC5C;
  }
}

.il-btn:active {
  transform: scale(.99);
}

.il-btn.il-cta {
  background: #058A36;
}

/* o pulo do botao do InLead (bounceBtn) */
@keyframes ilPulo {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion:reduce) {
  .il-btn {
    animation: none;
  }
}

/* ── video e cronometro ─────────────────────────────────────────── */
.il-vsl {
  border-radius: 16px;
  margin: 4px 0;
}

.il-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  color: #030712;
}

.il-cx {
  text-align: center;
  padding: 28px 32px;
  border-radius: 16px;
  background: #000000;
  color: #FFFFFF;
  border: 1px solid #000000;
}

.il-cx b {
  display: flex;
  justify-content: center;
  width: 2rem;
  font-size: 24px;
  line-height: 1.33;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.il-cx span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  opacity: .5;
  line-height: 1.33;
}

.il-dp {
  font-size: 24px;
  padding: 0 2px;
}

/* ── oferta (aparece quando o cronometro zera) ───────────────────── */
.il-oferta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.il-oferta[hidden] {
  display: none;
}

.il-oferta.revela {
  animation: ilSurge .6s ease both;
}

@keyframes ilSurge {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.il-oferta .il-img.m {
  width: 86%;
  margin: 0 auto;
}

/* o que a pessoa recebe: o cartao da lp (base.css .pacote) no verde do InLead,
   com os 3 bonus em destaque (foto, valor riscado e GRATIS) */
.il-pacote {
  --success: #16A34A;
  --success-line: #BBF7D0;
  --success-bg: #F0FDF4;
  margin: 4px 0;
  border: 2px solid #16A34A;
  border-radius: 16px;
  box-shadow: 0 18px 40px -24px rgba(22,163,74,.55);
  text-align: left;
}

.il-pacote .pacote-cab {
  background: #16A34A;
  padding: 18px 16px 22px;
  text-align: center;
}

.il-pacote .pacote-cab h3 {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  color: #FFFFFF;
}

.il-pacote .pacote-cab img.emj {
  width: 1.1em;
  height: 1.1em;
}

.il-pacote .quadro-rot {
  margin: 26px 16px 0;
  font-size: 12px;
}

.il-pacote .itens {
  padding: 8px 16px 12px;
}

.il-pacote .itens li {
  font-size: 15px;
  color: #374151;
}

.il-pacote .itens i {
  color: #6B7280;
  font-style: normal;
  font-size: 13.5px;
}

.il-pacote .quadro-rot.bx {
  margin-top: 4px;
  color: #16A34A;
  font-weight: 900;
}

.il-bx {
  margin: 0 12px;
  display: grid;
  gap: 10px;
}

.il-bx li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  background: #F0FDF4;
  border: 1.5px dashed #16A34A;
}

.il-bx img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
}

.il-bx span {
  flex: 1;
  display: grid;
  color: #030712;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.2;
}

.il-bx span b {
  color: #16A34A;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.il-bx s {
  color: #9CA3AF;
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

.il-bx i {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  color: #FFFFFF;
  background: #16A34A;
  border-radius: 999px;
  padding: 5px 10px;
  letter-spacing: .04em;
}

.il-bx-total {
  margin: 12px 12px 16px;
  padding: 10px;
  border-radius: 12px;
  background: #030712;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

.il-bx-total b {
  color: #4ADE80;
  font-weight: 900;
}

/* ── checkout (no lugar da Lastlink) ─────────────────────────────── */
#e20 {
  gap: 16px;
}

/* banner do topo do checkout (garantia, acesso no WhatsApp/e-mail e bonus), igual ao InLead */
.ck-banner {
  margin: 0;
}

.ck-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.ck-prod {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  background: #FFFFFF;
}

.ck-prod > img {
  flex: 0 0 96px;
  width: 96px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
}

.ck-prod p {
  margin: 0;
  line-height: 1.25;
}

.ck-nome {
  color: #030712;
  font-weight: 800;
  font-size: 16px;
}

.ck-mais {
  color: var(--il-verde);
  font-weight: 700;
  font-size: 14px;
  margin-top: 2px!important;
}

.ck-preco {
  color: #030712;
  font-weight: 900;
  font-size: 22px;
  margin-top: 4px!important;
}

.ck-unico {
  color: #6B7280;
  font-size: 12.5px;
}

/* pago: so a confirmacao e o upsell/downsell ficam na tela */
#e20.pago > :not(.pos) {
  display: none;
}

/* o cartao do pagamento sem a moldura colorida da lp: limpo, como o InLead */
#e20 .pag {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.ck-form {
  padding: 0!important;
}

.ck-tit {
  color: #030712;
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 4px;
}

#e20 .campo span {
  color: #374151;
}

#e20 .campo input {
  border-radius: 12px;
}

/* respiro entre o CPF (ultimo campo) e o primeiro order bump */
.ck-bumps {
  display: grid;
  gap: 12px;
  margin-top: 28px!important;
}

.ck-bumps[hidden], .ck-bump[hidden] {
  display: none;
}

.ck-bump {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 2px dashed #16A34A;
  border-radius: 16px;
  background: #F0FDF4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease,border-color .2s ease;
}

.ck-bump input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ck-bump-cab {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ck-bump-cab > img {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
}

.ck-bump-cab > span {
  display: grid;
  gap: 4px;
}

.ck-bump-tit {
  color: #030712;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
}

.ck-bump-txt {
  color: #4B5563;
  font-size: 13px;
  line-height: 1.35;
}

.ck-bump-valor {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.ck-bump-preco {
  color: #030712;
  font-size: 20px;
  font-weight: 900;
}

.ck-bump-valor s {
  color: #9CA3AF;
  font-size: 14px;
}

.ck-bump-valor i {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: #FFFFFF;
  background: #DC2626;
  border-radius: 999px;
  padding: 2px 8px;
}

.ck-bump-sim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border-radius: 12px;
  background: #16A34A;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 15px;
}

.ck-caixa {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #FFFFFF;
  background: transparent;
}

.ck-caixa svg {
  width: 14px;
  height: 14px;
  opacity: 0;
}

.ck-bump.marcado {
  border-style: solid;
  background: #DCFCE7;
}

.ck-bump.marcado .ck-bump-sim {
  background: #030712;
}

.ck-bump.marcado .ck-caixa {
  background: #FFFFFF;
  color: #030712;
}

.ck-bump.marcado .ck-caixa svg {
  opacity: 1;
}

.ck-bump:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.ck-resumo {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #F7F7F8;
  display: grid;
  gap: 6px;
}

.ck-resumo p, #rsBumps p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: #374151;
  font-size: 14px;
}

#rsBumps {
  display: grid;
  gap: 6px;
}

.ck-resumo b {
  color: #030712;
  white-space: nowrap;
}

.ck-total {
  padding-top: 8px;
  border-top: 1px solid #E5E7EB;
}

.ck-total span, .ck-total b {
  font-size: 17px!important;
  font-weight: 900;
  color: #030712!important;
}

.ck-total b.pulsa-valor {
  animation: pulsaValor .5s ease;
}

@keyframes pulsaValor {
  50% {
    transform: scale(1.08);
    color: #16A34A;
  }
}

#e20 .il-btn.gerar {
  margin-top: 6px;
  font-weight: 800;
  font-size: 17px;
  animation: none;
}

#e20 .il-btn.gerar.ocupado {
  opacity: .6;
  pointer-events: none;
}

/* os botoes do Pix (copiar, tentar de novo, upsell) no verde do InLead */
#e20 .btn {
  --btn-bg: #17A34A;
  margin-top: 12px!important;
}

.ck-depo {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.ck-depo figure {
  margin: 0;
  padding: 14px;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  background: #FFFFFF;
}

.ck-est {
  margin: 0 0 6px;
  font-size: 14px;
}

.ck-depo blockquote {
  margin: 0;
  color: #374151;
  font-size: 14px;
  line-height: 1.45;
}

/* nome em cima das estrelas */
.ck-depo figcaption {
  margin-bottom: 2px;
  color: #030712;
  font-weight: 800;
  font-size: 14px;
}

#confete {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
}