/* ===== Checkout — Projeto Decolagem Digital (tema claro) ===== */
:root{
  --bg:#F0EEE6;
  --card:#FFFFFF; --soft:#FCFBF7; --soft2:#FAF9F3; --soft3:#F4F2EA; --soft4:#F7F5EE;
  --accent:#D97757; --accent-hover:#C9663F; --accent-ink:#C05E3D; --accent-wash:#FBF1EC; --accent-border:#EBD3C7;
  --ink:#23201C; --ink2:#33302A; --ink3:#3A352E;
  --tx2:#575147; --tx2b:#5F5A50; --tx3:#6E6759; --tx4:#8A8375; --tx5:#97907F; --placeholder:#ABA49A;
  --bd-input:#E0DACB; --bd-card:#E4DECE; --divider:#EBE6D8; --divider2:#EFEBDE; --dashed:#D9D2C1;
  --ok:#4E9364; --ok-tx:#5C7E52; --ok-dot:#7A9E6E; --ok-wash:#EDF4EA; --ok-bd:#D6E4CF; --ok-field:#F6F8F3; --ok-field-bd:#DCE5D4;
  --warn-dot:#D9A24A; --warn-tx:#99742C; --warn-wash:#FDF8EE; --warn-bd:#EFE2C7;
  --err:#C0503A;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0; overscroll-behavior:none}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding:26px 16px 34px; display:flex; justify-content:center;
}
.pagina{width:100%; max-width:430px; display:flex; flex-direction:column; align-items:center}
/* Logo do designer na versão para fundo claro (arte escura, fundo transparente). */
.logo{width:214px; max-width:66%; height:auto; margin-bottom:26px}

.card{
  width:100%; background:var(--card); border:1px solid var(--bd-card); border-radius:22px;
  padding:26px 22px 22px; box-shadow:0 2px 3px rgba(60,50,35,.04);
}

.pill{
  display:block; width:max-content; margin:0 auto;
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em;
  color:var(--accent-ink); background:var(--accent-wash); border:1px solid var(--accent-border);
  border-radius:999px; padding:7px 14px;
}
.produto{text-align:center; font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin:18px 0 0}
.preco-linha{display:flex; justify-content:center; align-items:baseline; gap:8px; margin-top:6px}
.preco{font-size:46px; font-weight:800; letter-spacing:-.03em; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1}
.preco small{font-size:13px; font-weight:600; color:var(--tx4); letter-spacing:normal}
.preco-parcela{text-align:center; font-size:13.5px; color:var(--tx3); margin:8px 0 0}
.preco-parcela b{color:var(--ink3); font-weight:700}

.segmented{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  background:var(--soft3); border:1px solid var(--bd-card); border-radius:15px; padding:5px; margin:22px 0 20px;
}
.aba{
  border:0; background:transparent; cursor:pointer; padding:12px 0; border-radius:11px;
  font-family:var(--font); font-size:14.5px; font-weight:600; color:var(--tx3);
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.aba:hover{background:rgba(0,0,0,.03)}
.aba.ativa{background:var(--accent); color:#fff; font-weight:700; box-shadow:0 6px 14px -6px rgba(217,119,87,.65)}
.aba.ativa:hover{background:var(--accent)}

.painel{display:none}
.painel.ativo{display:block}

.campos{display:flex; flex-direction:column; gap:16px}
.campo{display:flex; flex-direction:column; gap:7px}
.rotulo{font-size:12.5px; font-weight:700; color:var(--tx2); letter-spacing:.01em}

input,.select{
  width:100%; height:52px; padding:0 15px; background:var(--soft); border:1px solid var(--bd-input);
  border-radius:13px; font-size:16px; color:var(--ink2); font-family:var(--font); outline:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
input::placeholder{color:var(--placeholder)}
input.mono{font-family:var(--mono); font-size:16px; letter-spacing:.02em}
input:focus,.select:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,119,87,.18)}

/* Campos seguros do Mercado Pago (número, validade e CVV): são janelas do MP
   encaixadas aqui, então o cartão nunca passa pelo código deste site. Ficam com
   a mesma aparência dos demais campos; o miolo é um iframe que ocupa a altura. */
.campo-seguro{
  width:100%; height:52px; padding:0 13px; background:var(--soft); border:1px solid var(--bd-input);
  border-radius:13px; box-sizing:border-box; display:flex; align-items:center;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.campo-seguro iframe{width:100%; height:34px; border:0; display:block}
.campo-seguro.focado{border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,119,87,.18)}
.campo-seguro.invalido{border-color:#C0553D}

.campo-com-icone{position:relative; display:block}
.campo-com-icone input, .campo-com-icone .campo-seguro{padding-right:46px}
.bandeira-slot{
  position:absolute; right:15px; top:50%; transform:translateY(-50%);
  width:24px; height:16px; border-radius:3px; background:#E7E3D7; border:1px solid var(--dashed);
}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}

.select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px; color:var(--ink2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238A8375' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 15px center;
}

.divisor{height:1px; background:var(--divider2); margin:20px 0}

.cta{
  width:100%; height:56px; margin-top:22px; background:var(--accent); border:0; border-radius:14px;
  color:#fff; font-size:16px; font-weight:700; letter-spacing:.01em; cursor:pointer; font-family:var(--font);
  box-shadow:0 12px 24px -12px rgba(217,119,87,.8); transition:background .16s ease;
}
.cta:hover{background:var(--accent-hover)}
.cta:disabled{opacity:.7; cursor:not-allowed}
.hint{text-align:center; font-size:12.5px; color:var(--tx4); margin:12px 0 0}

.cta-secundario{
  width:100%; height:54px; margin-top:14px; background:#fff; border:1.5px solid var(--accent); border-radius:14px;
  color:var(--accent-ink); font-size:15.5px; font-weight:700; cursor:pointer; font-family:var(--font);
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.cta-secundario:hover{background:var(--accent-wash)}
.cta-secundario.copiado{border-color:var(--ok); color:var(--ok)}

.aviso{display:none}
.aviso.mostrar{
  display:block; margin:16px 0 0; padding:12px 14px; border-radius:12px;
  background:#FBEDE9; border:1px solid var(--err); color:var(--err); font-size:13px; font-weight:600;
}

/* ---- Pix gerado ---- */
.pagando-como{
  display:flex; align-items:center; justify-content:space-between; gap:10px; height:52px; padding:0 15px;
  background:var(--ok-field); border:1px solid var(--ok-field-bd); border-radius:13px;
}
.pagando-email{font-size:15px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.selo-confirmado{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ok-tx); flex-shrink:0}
.qr-plate{
  margin-top:22px; padding:14px; background:#fff; border:1px solid var(--bd-card); border-radius:20px;
  box-shadow:0 10px 26px -16px rgba(60,50,35,.4); text-align:center;
}
.qr-img{width:212px; height:212px; max-width:100%; border-radius:6px; display:block; margin:0 auto}
.qr-instrucao{text-align:center; font-size:12.5px; color:var(--tx3); margin:12px 0 0}
.pix-codigo{
  margin-top:20px; padding:14px; background:var(--soft4); border:1px dashed var(--dashed); border-radius:13px;
  font-family:var(--mono); font-size:11.5px; line-height:1.75; color:#7C7566; word-break:break-all;
}
.status-espera{
  display:flex; align-items:flex-start; gap:9px; margin-top:20px; padding:12px;
  background:var(--warn-wash); border:1px solid var(--warn-bd); border-radius:12px;
}
.dot-espera{
  width:8px; height:8px; border-radius:999px; background:var(--warn-dot); flex-shrink:0; margin-top:4px;
  animation:pulseDot 1.6s ease-in-out infinite;
}
.status-titulo{font-size:13.5px; font-weight:700; color:var(--warn-tx)}
.status-sub{font-size:12.5px; color:var(--tx4); margin-top:3px}
@keyframes pulseDot{50%{opacity:.35; transform:scale(.82)}}

/* ---- Rodapé de confiança ---- */
.confianca{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.seguro{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--tx2b)}
.dot-seguro{width:6px; height:6px; border-radius:999px; background:var(--ok-dot)}
.politica{font-size:12px; line-height:1.6; color:var(--tx4); max-width:300px; margin:0}
/* Selo "Processado por Mercado Pago" — reforça a confiança de quem reconhece a marca */
.selo-mp{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:11px}
.selo-mp span{font-size:11.5px; color:var(--tx4); letter-spacing:.01em}
.selo-mp img{height:19px; width:auto; display:block}

.bandeiras{display:flex; flex-wrap:wrap; justify-content:center; gap:6px}
.chip{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--tx4);
  border:1px solid var(--bd-card); border-radius:6px; padding:5px 8px;
}
.link{color:var(--accent-ink); text-decoration:none}
.link:hover{text-decoration:underline}
.rodape{font-size:11.5px; line-height:1.7; color:var(--tx5); text-align:center; margin:22px 0 0}

/* ---- Tela de aprovado ---- */
.card-sucesso{padding:40px 24px 30px; display:flex; flex-direction:column; align-items:center; text-align:center}
.selo-anel{
  width:104px; height:104px; border-radius:999px; background:var(--ok-wash); border:1px solid var(--ok-bd);
  display:flex; align-items:center; justify-content:center; animation:ringIn .5s ease-out;
}
.selo-circulo{
  width:72px; height:72px; border-radius:999px; background:var(--ok);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:36px; font-weight:700; line-height:1;
  box-shadow:0 10px 22px -10px rgba(78,147,100,.9);
}
@keyframes ringIn{from{opacity:0; transform:scale(.9)} to{opacity:1; transform:scale(1)}}
.kicker{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--ok-tx); margin-top:22px}
.titulo-sucesso{font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin:10px 0 0}
.sub-sucesso{font-size:15px; line-height:1.6; color:var(--tx3); max-width:320px; margin:12px 0 0}
.sub-sucesso strong{color:var(--ink2)}
.bloco-email{
  width:100%; margin-top:24px; padding:16px; background:var(--soft2); border:1px solid #E9E4D6; border-radius:14px; text-align:center;
}
.bloco-email .lbl{font-size:12.5px; color:var(--tx4)}
.bloco-email .val{font-size:15px; font-weight:700; color:var(--ink2); margin-top:4px; word-break:break-all}

@media (max-width:430px){ .preco{font-size:38px} .titulo-sucesso{font-size:26px}
  .logo{width:186px; margin-bottom:22px} }
@media (prefers-reduced-motion:reduce){ .dot-espera{animation:none} .selo-anel{animation:none} }

/* ===== Login / Verificação (telas 05–06) ===== */
.titulo-membros{text-align:center; font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin:0}
.sub-membros{text-align:center; font-size:14px; line-height:1.55; color:var(--tx3); margin:8px 0 0}
.aviso-ok{display:none}
.aviso-ok.mostrar{
  display:block; margin:16px 0 0; padding:12px 14px; border-radius:12px;
  background:var(--ok-wash); border:1px solid var(--ok-bd); color:var(--ok-tx); font-size:13px; font-weight:600; text-align:center;
}
.conversao{text-align:center; font-size:13px; color:var(--tx4); margin:16px 0 0}
.conversao a{color:var(--accent-ink); text-decoration:none; border-bottom:1px solid rgba(192,94,61,.35)}
.conversao a:hover{border-bottom-color:var(--accent-ink)}

.codigo-inputs{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:24px}
.codigo-inputs input{
  height:62px; padding:0; text-align:center; background:var(--soft); border:1px solid var(--bd-input); border-radius:13px;
  font-family:var(--mono); font-size:26px; font-weight:500; color:var(--ink); appearance:none; -moz-appearance:textfield;
}
.codigo-inputs input:focus{background:#fff; border:1.5px solid var(--accent); box-shadow:0 0 0 3px rgba(217,119,87,.18); outline:none}
.codigo-inputs.erro input{border-color:var(--err)}
.codigo-erro{color:var(--err); font-size:12px; margin:10px 0 0; text-align:center; display:none}
.codigo-erro.mostrar{display:block}
.btn-reenviar{
  width:100%; height:52px; margin-top:12px; background:#fff; border:1px solid var(--bd-input); border-radius:14px;
  color:var(--tx2); font-size:15px; font-weight:700; cursor:pointer; font-family:var(--font); transition:background .16s ease;
}
.btn-reenviar:hover{background:var(--soft2)}
.btn-reenviar:disabled{opacity:.7; cursor:not-allowed}
.aviso-info{
  margin-top:16px; padding:12px 14px; background:var(--soft2); border:1px solid #E9E4D6; border-radius:12px;
  font-size:12.5px; line-height:1.6; color:var(--tx3); text-align:center;
}
.aviso-info b{color:var(--ink2)}
.usar-outro{text-align:center; font-size:13px; margin:16px 0 0}

/* ===== Área de membros (07) ===== */
body.tela-membros{display:block; padding:0}
.membros-topbar{
  display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
  background:#F6F4EC; border-bottom:1px solid var(--bd-card);
}
.topbar-marca{display:flex; align-items:center; gap:11px}
.topbar-emblema{height:34px; width:auto}
.topbar-wordmark{font-size:14px; font-weight:800; letter-spacing:.02em; color:var(--ink)}
.topbar-wordmark b{color:var(--accent); font-weight:800}
.btn-sair{
  padding:9px 14px; background:#fff; border:1px solid var(--bd-input); border-radius:10px;
  font-size:13px; font-weight:700; color:var(--tx2); cursor:pointer; font-family:var(--font); transition:background .16s ease;
}
.btn-sair:hover{background:var(--soft2)}
.membros-conteudo{max-width:430px; margin:0 auto; padding:28px 20px 30px}
.membros-conteudo .kicker{margin-top:0}
.titulo-boas{font-size:27px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin:8px 0 0}
.sub-boas{font-size:14.5px; line-height:1.6; color:var(--tx3); margin:8px 0 0}
.sub-boas b{color:var(--ink2); word-break:break-all}
.card-progresso{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; padding:14px 16px;
  background:#fff; border:1px solid var(--bd-card); border-radius:14px;
}
.card-progresso .lbl{font-size:12.5px; color:var(--tx4)}
.card-progresso .val{font-size:14px; font-weight:700; color:var(--ink2); margin-top:2px}
.trilha{width:120px; height:8px; background:var(--bg); border-radius:999px; overflow:hidden; flex:none}
.trilha-fill{height:100%; background:var(--accent); border-radius:999px; width:0}
.modulos{display:flex; flex-direction:column; gap:14px; margin-top:20px}
.modulo-card{background:#fff; border:1px solid var(--bd-card); border-radius:18px; padding:14px; box-shadow:0 2px 3px rgba(60,50,35,.04)}
.modulo-capa{
  height:132px; border-radius:12px; border:1px dashed var(--dashed);
  background:repeating-linear-gradient(135deg,#FAF9F3 0 10px,#F3F1E9 10px 20px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:#9A9384;
}
.modulo-info{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:14px}
.modulo-titulo{font-size:16px; font-weight:700; color:var(--ink)}
.modulo-desc{font-size:13px; color:var(--tx4); margin-top:2px}
.pill-embreve{
  flex:none; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--warn-tx);
  background:var(--warn-wash); border:1px solid var(--warn-bd); border-radius:999px; padding:6px 10px; white-space:nowrap;
}
.nota-final{
  font-size:12px; line-height:1.6; color:var(--tx5); text-align:center; margin-top:24px; padding-top:18px; border-top:1px solid var(--divider);
}

/* ===== Política de Privacidade (tela 08) ===== */
.legal-data{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:#9A9384; margin:10px 0 0; text-transform:uppercase}
.legal-intro{font-size:14.5px; line-height:1.65; color:#5A554C; margin:18px 0 0}
.legal-intro b{color:var(--ink)}
.legal-secoes{display:flex; flex-direction:column; gap:26px}
.secao{break-inside:avoid}
.secao-cab{display:flex; align-items:baseline; gap:10px}
.secao-num{font-family:var(--mono); font-size:12px; color:var(--accent); flex:none}
.secao-titulo{font-size:16.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin:0}
.secao-corpo{font-size:14.5px; line-height:1.65; color:#5A554C; margin:10px 0 0}
.secao-corpo b{color:var(--ink)}
.secao-corpo a, .legal-intro a{color:var(--accent-ink); text-decoration:none; border-bottom:1px solid rgba(192,94,61,.35)}
.secao-corpo a:hover{border-bottom-color:var(--accent-ink)}
.lista{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.lista li{display:flex; gap:10px; font-size:14.5px; line-height:1.6; color:#5A554C}
.lista li b{color:var(--ink)}
.lista li::before{content:""; width:5px; height:5px; border-radius:999px; background:var(--accent); flex:none; margin-top:9px}
.callout{margin-top:14px; padding:14px 16px; background:var(--soft2); border:1px solid #E9E4D6; border-radius:13px; font-size:14px; line-height:1.6; color:#5A554C}
.btn-voltar{
  display:flex; align-items:center; justify-content:center; width:100%; height:52px;
  background:#fff; border:1px solid var(--bd-input); border-radius:14px; color:var(--tx2); font-size:14.5px; font-weight:700;
  text-decoration:none; font-family:var(--font); transition:background .16s ease;
}
.btn-voltar:hover{background:var(--soft2)}
@media print{ body{background:#fff} .card{box-shadow:none; border:none} .logo,.rodape{display:none} }