/* ============================================================================
   Simulador de Crédito PJ — visual
   Paleta: azul-marinho bancário (confiança, instituição) · verde de aprovação
   (ação, dinheiro liberado) · âmbar para "travado" (atenção, não pânico).
   Mesma família do funil original, refinada: menos emoji, ícones em linha,
   cartões com borda fina, números tabulares, hierarquia mais calma.
   ========================================================================== */
@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url('../fontes/poppins-400.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url('../fontes/poppins-500.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url('../fontes/poppins-600.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url('../fontes/poppins-700.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 800; font-display: swap; src: url('../fontes/poppins-800.woff2') format('woff2'); }

:root {
  --navy-900: #061626;
  --navy-800: #0A2238;
  --navy-700: #0D2B45;
  --navy-600: #164A73;
  --navy-100: #E7EEF5;
  --navy-050: #F3F7FA;
  --verde: #00A868;
  --verde-escuro: #008A55;
  --verde-claro: #E3F6EE;
  --ambar: #E8A33A;
  --ambar-claro: #FFF5E3;
  --vermelho: #D93D42;
  --vermelho-claro: #FDEDEE;
  --texto: #0B1B28;
  --texto-2: #3F5262;
  --texto-3: #7A8B99;
  --borda: #DFE7EE;
  --fundo: #FFFFFF;
  --fundo-2: #F6F9FB;
  --raio: 14px;
  --raio-p: 10px;
  --sombra: 0 1px 2px rgba(6, 22, 38, .05), 0 6px 20px -8px rgba(6, 22, 38, .14);
  --sombra-btn: 0 8px 22px -10px rgba(0, 138, 85, .65);
  --larg: 560px;
  --fonte: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--fonte); color: var(--texto); background: var(--fundo-2);
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--navy-600); }
code { font-size: .85em; background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(22, 74, 115, .45); outline-offset: 2px; }
h1:focus, h2:focus { outline: none; }

/* ------------------------------------------------------------------ topo */
.topo { background: var(--navy-800); color: #fff; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; }
.topo-in { max-width: 1120px; margin: 0 auto; padding: 11px 16px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.marca { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.marca-simbolo { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--verde), #22C58B); position: relative; }
.marca-simbolo::after { content: ''; position: absolute; inset: 6px 5px 6px 6px; border: 2.2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -2px); width: 9px; height: 5px; }
.topo-seguro { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #A9C0D3; font-weight: 500; }

/* ------------------------------------------------------------------ tela */
.app { min-height: 100vh; }
.tela { max-width: var(--larg); margin: 0 auto; padding: 22px 16px 48px; }
.tela.entra { animation: entra .38s cubic-bezier(.2, .7, .2, 1); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tela.entra, .entra { animation: none !important; } }

.h1 { font-size: 23px; line-height: 1.28; font-weight: 700; letter-spacing: -.02em; margin: 14px 0 12px; text-wrap: balance; }
.h1-hero { font-size: 28px; line-height: 1.18; margin-top: 12px; }
.h2 { font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; margin: 12px 0 10px; }
.h3-secao { font-size: 17px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; }
.sub { color: var(--texto-2); margin: 0 0 10px; font-size: 15.5px; }
.sub-forte { color: var(--texto); font-weight: 600; font-size: 16.5px; }
.corpo { color: var(--texto-2); margin: 0 0 12px; }
.corpo strong, .sub strong { color: var(--texto); }

.etiqueta { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--borda); font-size: 12.5px; font-weight: 600; color: var(--navy-700); box-shadow: var(--sombra); }
.etiqueta-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(0, 168, 104, .16); animation: pulsa 1.8s infinite; flex: none; }
.etiqueta-ok { background: var(--verde-claro); border-color: #BFE8D6; color: var(--verde-escuro); }
@keyframes pulsa { 50% { box-shadow: 0 0 0 7px rgba(0, 168, 104, 0); } }

.lista-check { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 9px; }
.lista-check li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; color: var(--texto-2); font-size: 15px; }
.lista-check li svg { margin-top: 3px; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--verde-claro); color: var(--verde-escuro); }
.lista-check-mini li { font-size: 14px; }
.lista-check strong { color: var(--texto); }

/* ------------------------------------------------------------------ botões */
.btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 12px; padding: 16px 20px; min-height: 56px;
  background: var(--navy-700); color: #fff; font-weight: 700; font-size: 15.5px; letter-spacing: .01em;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease; margin-top: 16px; text-align: center;
}
.btn:hover { background: var(--navy-600); }
.btn:active { transform: translateY(1px) scale(.995); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sucesso { background: linear-gradient(180deg, #08B672, var(--verde-escuro)); box-shadow: var(--sombra-btn); }
.btn-sucesso:hover { background: linear-gradient(180deg, #0BC27B, #007E4D); }
.btn-grande { font-size: 16px; min-height: 60px; }
.btn-seta { display: inline-flex; transition: transform .2s; }
.btn:hover .btn-seta { transform: translateX(3px); }
.btn-texto { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--texto-3); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 8px; }
.btn-voltar { background: none; border: 0; color: var(--texto-3); font-size: 13.5px; padding: 6px 0; margin: 4px 0 -2px; font-weight: 500; }
.btn-voltar:hover { color: var(--navy-700); }
.cta-abaixo { text-align: center; font-size: 13px; color: var(--texto-3); margin-top: 10px; display: flex; gap: 6px; align-items: center; justify-content: center; }

.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2.2px solid var(--navy-100); border-top-color: var(--navy-600); animation: gira .8s linear infinite; display: inline-block; flex: none; }
.spinner-claro { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ landing */
.hero-imagem { margin: 8px 0 12px; }
.hero-imagem img { width: 100%; height: auto; mix-blend-mode: multiply; }
.hero-mobile img { max-height: 46vh; width: auto; margin: 0 auto; object-fit: contain; }
.hero-desktop, .landing-visual { display: none; }
.credencial { display: grid; grid-template-columns: 56px 1fr; gap: 14px; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; margin: 16px 0 4px; box-shadow: var(--sombra); }
.credencial-foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center; background: var(--navy-100); }
.credencial-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--texto-3); }
.credencial-nome { font-weight: 700; font-size: 16px; line-height: 1.3; }
.credencial-cargo { font-size: 13px; color: var(--texto-2); }
.credencial .lista-check { margin: 10px 0 0; gap: 6px; }

.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0 4px; }
.numero { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 14px 8px; text-align: center; }
.numero-valor { font-weight: 800; font-size: 19px; color: var(--navy-700); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numero-rotulo { font-size: 11.5px; color: var(--texto-3); line-height: 1.3; margin-top: 2px; }
.instituicoes { max-width: var(--larg); margin: 6px auto 0; padding: 0 16px; text-align: center; }
.instituicoes-rotulo { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; margin-bottom: 8px; }
.instituicoes-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.instituicoes-lista span { font-weight: 700; font-size: 13px; color: var(--navy-600); background: #fff; border: 1px solid var(--borda); padding: 6px 12px; border-radius: 8px; }
.etapa-landing .tela { padding-bottom: 8px; }

@media (min-width: 960px) {
  .etapa-landing .tela { max-width: 1120px; padding: 40px 24px 16px; }
  .landing { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
  .h1-hero { font-size: 40px; }
  .hero-mobile, .so-mobile { display: none; }
  .landing-visual, .hero-desktop { display: block; }
  .landing-visual { position: relative; }
  .landing-visual::before { content: ''; position: absolute; inset: 8% 4% 18% 10%; background: radial-gradient(60% 60% at 50% 45%, rgba(22, 74, 115, .16), transparent 70%); z-index: -1; }
  .landing-texto .btn { max-width: 440px; }
  .landing-texto .cta-abaixo { justify-content: flex-start; max-width: 440px; }
  .instituicoes, .rodape { max-width: 1120px; }
}

/* ------------------------------------------------------------------ painel */
.painel {
  position: relative; overflow: hidden; border-radius: 16px; padding: 16px 18px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #1D5A8A 0%, var(--navy-700) 46%, var(--navy-900) 100%);
  box-shadow: 0 14px 30px -18px rgba(6, 22, 38, .7);
}
.painel::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 0 0 26px rgba(255,255,255,.03); }
.painel-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; position: relative; z-index: 1; }
.painel-rotulo { text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: #9FC3E0; }
.painel-dica { color: #8FA9BF; }
.painel-valor { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.painel-aguardando { font-size: 20px; font-weight: 600; color: #9FC3E0; }
.painel-barra { height: 8px; border-radius: 99px; background: rgba(232, 163, 58, .45); margin-top: 12px; overflow: hidden; position: relative; z-index: 1; }
.painel-barra-liberado { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #22C58B, var(--verde)); transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.painel-split { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 9px; font-size: 13px; color: #CFE0EE; position: relative; z-index: 1; }
.painel-split i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.painel-ok i { background: #22C58B; }
.painel-trava i { background: var(--ambar); }
.painel-split b { color: #fff; font-variant-numeric: tabular-nums; }
.impacto-slot { min-height: 0; }
.impacto { margin-top: 10px; border-radius: 10px; padding: 9px 12px; font-size: 13.5px; font-weight: 600; display: flex; gap: 8px; align-items: center; animation: entra .3s ease; }
.impacto-trava { background: var(--ambar-claro); color: #8A5A0E; border: 1px solid #F3D7A6; }
.impacto-ok { background: var(--verde-claro); color: var(--verde-escuro); border: 1px solid #BFE8D6; }

/* ------------------------------------------------------------------ progresso */
.progresso-bloco { margin: 16px 0 4px; }
.progresso-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-3); font-weight: 600; margin-bottom: 7px; }
.progresso-topo span:first-child { display: inline-flex; gap: 6px; align-items: center; }
.progresso { height: 6px; background: var(--navy-100); border-radius: 99px; overflow: hidden; }
.progresso-fill { height: 100%; background: var(--navy-600); border-radius: 99px; transition: width .5s ease; }
.progresso-final .progresso-fill { background: var(--verde); }
.progresso-final + * { margin-top: 0; }

/* ------------------------------------------------------------------ opções */
.opcoes { display: grid; gap: 10px; margin: 16px 0 6px; }
.opcao {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: #fff;
  border: 1.5px solid var(--borda); border-radius: 12px; padding: 15px 16px; min-height: 58px;
  font-size: 15.5px; font-weight: 500; transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.opcao:hover { border-color: #A9C1D6; box-shadow: var(--sombra); }
.opcao:active { transform: scale(.99); }
.opcao-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #B8C8D6; flex: none; display: grid; place-items: center; color: transparent; transition: all .15s; }
.opcao-radio svg { width: 13px; height: 13px; }
.opcao.selecionada { border-color: var(--verde); background: #F4FBF8; box-shadow: 0 0 0 3px rgba(0, 168, 104, .12); }
.opcao.selecionada .opcao-radio { background: var(--verde); border-color: var(--verde); color: #fff; }

.micro { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--texto-2); background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.micro-icone { color: var(--navy-600); padding-top: 1px; }
.micro-aviso { background: var(--ambar-claro); border-color: #F3D7A6; color: #6E4A10; }
.micro-aviso .micro-icone { color: #B7791F; }

/* ------------------------------------------------------------------ valor parcial */
.valor-grande { margin: 16px 0 6px; text-align: center; padding: 22px 16px; border-radius: 16px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #1D5A8A 0%, var(--navy-700) 46%, var(--navy-900) 100%); }
.valor-grande-rotulo { text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; font-weight: 700; color: #9FC3E0; }
.valor-grande-numero { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: #FFD27A; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 4px; }
.aviso-faixa { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; background: var(--ambar-claro); border: 1px solid #F3D7A6; color: #6E4A10; border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; margin-top: 14px; }
.aviso-faixa svg { color: #B7791F; margin-top: 2px; }

/* ------------------------------------------------------------------ método */
.metodo { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; margin: 18px 0; box-shadow: var(--sombra); }
.metodo-selo { display: inline-block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--verde-escuro); background: var(--verde-claro); padding: 4px 10px; border-radius: 6px; }
.metodo-titulo { font-size: 17px; margin: 10px 0 6px; letter-spacing: -.01em; }
.metodo-resumo { font-size: 14px; color: var(--texto-2); margin: 0 0 12px; }
.camadas { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; position: relative; }
.camada { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 10px 0; position: relative; }
.camada:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 38px; bottom: -6px; width: 2px; background: var(--navy-100); }
.camada-num { width: 30px; height: 30px; border-radius: 50%; background: var(--navy-700); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; position: relative; z-index: 1; }
.camada-nome { font-weight: 700; font-size: 15px; padding-top: 4px; }
.camada-nome span { font-weight: 500; color: var(--texto-2); }
.camada-desc { font-size: 13.5px; color: var(--texto-2); margin-top: 2px; }
.metodo-ordem { margin-top: 12px; background: var(--navy-050); border-left: 3px solid var(--ambar); border-radius: 8px; padding: 12px 14px; }
.metodo-ordem-titulo { font-weight: 700; font-size: 14.5px; }
.metodo-ordem p { margin: 4px 0 0; font-size: 14px; color: var(--texto-2); }

/* ------------------------------------------------------------------ campos */
.campo { margin-top: 12px; }
.input-wrap { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--borda); border-radius: 12px; padding: 0 14px; transition: border-color .15s, box-shadow .15s; }
.input-wrap:focus-within { border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(22, 74, 115, .14); }
.input-wrap.erro { border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(217, 61, 66, .1); }
.prefixo { color: var(--texto-3); display: flex; align-items: center; flex: none; }
.ddi { font-weight: 600; font-size: 14.5px; color: var(--texto-2); padding-right: 4px; border-right: 1px solid var(--borda); margin-right: 2px; }
.input-wrap input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; padding: 16px 0; color: var(--texto); }
.input-wrap input::placeholder { color: #A3B1BD; }
.msg-erro { color: var(--vermelho); font-size: 13px; margin-top: 5px; min-height: 0; }
.msg-erro:empty { display: none; }
.nota-seguranca { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; font-size: 12.5px; color: var(--texto-3); margin-top: 14px; }
.nota-seguranca svg { margin-top: 2px; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consentimento { display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin-top: 16px; font-size: 13px; color: var(--texto-2); cursor: pointer; align-items: start; }
.consentimento input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consentimento-caixa { width: 22px; height: 22px; border: 2px solid #B8C8D6; border-radius: 6px; display: grid; place-items: center; color: transparent; background: #fff; transition: all .15s; }
.consentimento input:checked + .consentimento-caixa { background: var(--verde); border-color: var(--verde); color: #fff; }
.consentimento input:focus-visible + .consentimento-caixa { outline: 3px solid rgba(22, 74, 115, .45); outline-offset: 2px; }
.consentimento.erro .consentimento-caixa { border-color: var(--vermelho); }
.envio-erro { display: grid; grid-template-columns: 22px 1fr; gap: 10px; background: var(--vermelho-claro); border: 1px solid #F6C9CB; color: #8C2227; border-radius: 10px; padding: 12px; font-size: 13.5px; margin-top: 12px; }
.envio-erro-icone { width: 22px; height: 22px; border-radius: 50%; background: var(--vermelho); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }

/* ------------------------------------------------------------------ consulta CNPJ */
.consulta { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--texto-2); background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.consulta-falhou { align-items: flex-start; }
.consulta-falhou svg { color: var(--navy-600); margin-top: 3px; flex: none; }
.consulta-detalhe { font-size: 13px; color: var(--texto-3); margin-top: 2px; }
.empresa-card { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; margin-top: 12px; box-shadow: var(--sombra); animation: entra .3s ease; }
.empresa-selo { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; color: var(--verde-escuro); background: var(--verde-claro); padding: 4px 10px; border-radius: 99px; }
.empresa-selo.alerta { color: #8C2227; background: var(--vermelho-claro); }
.empresa-nome { font-weight: 700; font-size: 16.5px; margin-top: 10px; line-height: 1.3; }
.empresa-fantasia { font-size: 13.5px; color: var(--texto-2); }
.empresa-pergunta { font-size: 13px; color: var(--texto-3); margin: 6px 0 0; }
.empresa-dados { margin: 12px 0 0; display: grid; gap: 0; }
.empresa-dados div { display: grid; grid-template-columns: 128px 1fr; gap: 10px; font-size: 13.5px; padding: 7px 0; border-top: 1px solid var(--fundo-2); }
.empresa-dados dt { color: var(--texto-3); }
.empresa-dados dd { margin: 0; font-weight: 600; }
.linha-alerta dd { color: var(--vermelho); }
.empresa-tempo { color: var(--texto-3); font-weight: 500; }
.empresa-fonte { font-size: 11.5px; color: var(--texto-3); margin-top: 8px; }
.cruz { border-radius: 12px; padding: 12px 14px; margin-top: 10px; font-size: 13.5px; }
.cruz-trava { background: var(--vermelho-claro); border: 1px solid #F6C9CB; }
.cruz-ajuste { background: var(--navy-050); border: 1px solid var(--navy-100); }
.cruz-titulo { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; color: var(--texto-2); }
.cruz-item { display: grid; gap: 2px; margin-top: 6px; }
.cruz-item span { color: var(--texto-2); }

/* ------------------------------------------------------------------ carregando */
.loading { text-align: center; padding-top: 24px; }
.loading-anel { position: relative; width: 120px; height: 120px; margin: 0 auto 10px; }
.loading-anel svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.anel-fundo { fill: none; stroke: var(--navy-100); stroke-width: 8; }
.anel-fill { fill: none; stroke: var(--verde); stroke-width: 8; stroke-linecap: round; }
.loading-anel span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 24px; color: var(--navy-700); font-variant-numeric: tabular-nums; }
.loading-etapas { display: grid; gap: 8px; margin: 20px auto 0; max-width: 380px; text-align: left; }
.loading-etapa { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; font-size: 14px; color: var(--texto-3); background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; transition: all .25s; }
.le-ico { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C9D6E1; }
.loading-etapa.ativa { color: var(--texto); border-color: #A9C1D6; }
.loading-etapa.ativa .le-ico { border-color: var(--navy-100); border-top-color: var(--navy-600); animation: gira .8s linear infinite; }
.loading-etapa.feita { color: var(--texto-2); }
.loading-etapa.feita .le-ico { background: var(--verde); border-color: var(--verde); position: relative; }
.loading-etapa.feita .le-ico::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ------------------------------------------------------------------ resultado */
.empresa-linha { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--texto-2); margin-bottom: 4px; }
.empresa-linha svg { color: var(--navy-600); flex: none; }
.comparativo { background: #fff; border: 1px solid var(--borda); border-radius: 16px; padding: 18px; margin: 14px 0; box-shadow: var(--sombra); }
.comparativo-linha { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.comparativo-item { display: grid; gap: 2px; }
.comparativo-item:last-child { text-align: right; }
.comparativo-rotulo { font-size: 11px; white-space: nowrap; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); font-weight: 700; }
.comparativo-valor { font-size: clamp(20px, 6.2vw, 26px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.comparativo-valor.potencial { color: var(--navy-700); }
.comparativo-valor.liberado { color: var(--verde-escuro); }
.comparativo-seta { color: var(--texto-3); font-size: 20px; }
.comparativo-barra { height: 26px; background: var(--ambar-claro); border: 1px solid #F3D7A6; border-radius: 8px; margin-top: 14px; overflow: hidden; }
.comparativo-barra-liberado { height: 100%; background: linear-gradient(90deg, #22C58B, var(--verde)); display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; min-width: 44px; animation: cresce 1.2s cubic-bezier(.2, .7, .2, 1); }
.comparativo-barra-liberado span { color: #fff; font-weight: 700; font-size: 12.5px; }
@keyframes cresce { from { width: 0 !important; } }
.comparativo-gap { display: flex; gap: 8px; align-items: baseline; margin-top: 10px; font-size: 13.5px; color: #8A5A0E; flex-wrap: wrap; }
.gap-valor { font-weight: 800; font-size: 17px; color: #B7791F; font-variant-numeric: tabular-nums; }
.gap-bloco { margin: 18px 0 8px; }
.gap-titulo { font-size: 19px; margin: 0 0 8px; letter-spacing: -.015em; }
.camadas-status { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; margin: 14px 0; }
.camadas-status-titulo { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; flex-wrap: wrap; }
.camadas-status-titulo span { font-size: 11px; font-weight: 700; color: var(--verde-escuro); background: var(--verde-claro); padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .06em; }
.camadas-status ul { list-style: none; padding: 0; margin: 0; }
.camadas-status li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--fundo-2); font-size: 14px; }
.cs-num { width: 26px; height: 26px; border-radius: 50%; background: var(--navy-100); color: var(--navy-700); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.cs-nome { font-weight: 600; }
.cs-status { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 99px; }
.st-ok .cs-status { background: var(--verde-claro); color: var(--verde-escuro); }
.st-atencao .cs-status { background: var(--ambar-claro); color: #8A5A0E; }
.st-critico .cs-status { background: var(--vermelho-claro); color: #A3262B; }
.st-desconhecido .cs-status { background: var(--fundo-2); color: var(--texto-2); border: 1px dashed #C3D0DB; }
.pendencias { background: var(--ambar-claro); border: 1px solid #F3D7A6; border-radius: var(--raio); padding: 14px 16px; margin: 14px 0; }
.pendencias-titulo { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14.5px; color: #6E4A10; }
.pendencias ul { margin: 8px 0 0; padding-left: 20px; color: #6E4A10; font-size: 14px; display: grid; gap: 4px; }
.bloco-entrega { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borda); }
.destaque { text-align: center; font-weight: 700; font-size: 16px; color: var(--navy-700); margin: 14px 0 0; }

/* ------------------------------------------------------------------ oferta */
.gerente { background: var(--navy-050); border: 1px solid var(--navy-100); border-radius: var(--raio); padding: 16px; margin: 14px 0; }
.gerente-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--texto-3); }
.gerente-topo { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.gerente-icone { width: 38px; height: 38px; border-radius: 50%; background: var(--navy-700); color: #fff; display: grid; place-items: center; flex: none; }
.gerente-titulo { font-weight: 700; font-size: 16px; }
.gerente-desc { font-size: 14px; color: var(--texto-2); margin: 10px 0 0; }
.bloco-oferta { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; margin: 12px 0; box-shadow: var(--sombra); }
.bloco-cab { display: flex; align-items: center; gap: 10px; }
.bloco-num { width: 28px; height: 28px; border-radius: 8px; background: var(--verde); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; }
.bloco-cab h3 { margin: 0; font-size: 13.5px; letter-spacing: .06em; color: var(--navy-700); }
.bloco-oferta .lista-check { margin-bottom: 0; }
.alerta-bloco { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 22px 18px; text-align: center; box-shadow: var(--sombra); margin-top: 8px; }
.alerta-icone { width: 48px; height: 48px; border-radius: 50%; background: var(--ambar-claro); color: #B7791F; display: grid; place-items: center; margin: 0 auto 6px; }
.alerta-icone svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------------ vendas */
.video-wrap { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--navy-900); box-shadow: 0 18px 40px -22px rgba(6, 22, 38, .8); margin-top: 6px; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder { display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; color: #fff; padding: 20px; background: radial-gradient(120% 140% at 100% 0%, #1D5A8A 0%, var(--navy-700) 46%, var(--navy-900) 100%); }
.vp-play { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); }
.video-placeholder strong { font-size: 15px; max-width: 320px; }
.vp-nota { font-size: 12px; color: #9FC3E0; }
.vp-nota code { background: rgba(255,255,255,.12); }
.video-legenda { text-align: center; font-size: 13px; color: var(--texto-3); margin-top: 8px; }
.cta-vsl { margin-top: 6px; }
.cta-vsl.entra { animation: entra .4s ease; }
.cta-vsl-etiqueta { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--verde-escuro); margin-top: 14px; margin-bottom: -6px; }
.expert-card { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; margin: 16px 0; box-shadow: var(--sombra); }
.expert-card-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--texto-3); }
.expert-topo { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.expert-topo img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; object-position: center; background: var(--navy-100); flex: none; }
.expert-nome { font-weight: 700; font-size: 17px; }
.expert-cargo { font-size: 13.5px; color: var(--texto-2); }
.expert-bio { font-size: 14.5px; color: var(--texto-2); font-style: italic; margin: 12px 0 6px; border-left: 3px solid var(--navy-100); padding-left: 12px; }
.expert-assinatura { font-weight: 600; font-size: 14px; margin: 0; }
.depos { margin: 6px 0 16px; }
.depos-sub { font-size: 13px; color: var(--texto-3); margin: -8px 0 12px; }
.depos-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.depo { margin: 0; scroll-snap-align: start; }
.depo-tela { aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: var(--navy-900); position: relative; }
.depo-tela video, .depo-capa img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.depo-capa { border: 0; padding: 0; width: 100%; height: 100%; position: relative; background: none; }
.depo-capa::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to top, rgba(6,22,38,.55), transparent); pointer-events: none; }
.depo-play { position: absolute; left: 12px; bottom: 12px; z-index: 1; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--navy-700); display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(6,22,38,.6); transition: transform .15s; }
.depo-play svg { width: 22px; height: 22px; margin-left: 2px; }
.depo-capa:hover .depo-play { transform: scale(1.06); }
.depo figcaption { display: grid; font-size: 13px; margin-top: 6px; }
.depo figcaption span, .depo figcaption em { color: var(--texto-3); }
.stack { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; margin: 18px 0; box-shadow: var(--sombra); }
.stack ul { list-style: none; padding: 0; margin: 0; }
.stack li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--borda); font-size: 14px; color: var(--texto-2); }
.stack-valor { color: var(--texto-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stack-total { display: flex; justify-content: space-between; padding: 12px 0 4px; font-size: 14px; color: var(--texto-2); }
.stack-total s { color: var(--texto-3); }
.stack-preco { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.stack-preco strong { font-size: 26px; color: var(--verde-escuro); letter-spacing: -.02em; }
.stack-fechamento { font-size: 13px; color: var(--texto-3); margin: 8px 0 0; }
.garantia { background: linear-gradient(180deg, #F4FBF8, #fff); border: 1px solid #BFE8D6; border-radius: var(--raio); padding: 18px; margin: 18px 0; }
.garantia-selo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--verde-escuro); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; margin-bottom: 6px; }
.garantia p { font-size: 14.5px; color: var(--texto-2); margin: 8px 0 0; }
.garantia strong { color: var(--texto); }
.card-preco { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: #fff; border: 2px solid var(--verde); border-radius: 16px; padding: 16px; margin-top: 18px; box-shadow: 0 10px 28px -16px rgba(0, 138, 85, .5); }
.cp-info { display: flex; gap: 10px; align-items: flex-start; }
.cp-check { width: 24px; height: 24px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; flex: none; margin-top: 2px; }
.cp-nome { font-weight: 700; font-size: 15px; line-height: 1.3; }
.cp-desc { font-size: 12.5px; color: var(--texto-3); }
.cp-valor { text-align: right; flex: none; }
.cp-label { font-size: 11.5px; color: var(--texto-3); }
.cp-numero { font-size: 24px; font-weight: 800; color: var(--navy-700); letter-spacing: -.02em; line-height: 1.1; }
.cp-parcelas { font-size: 12px; color: var(--texto-3); }
.escassez { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; background: var(--navy-050); border: 1px solid var(--navy-100); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--texto-2); margin-top: 12px; }
.escassez svg { color: var(--navy-600); margin-top: 2px; }
.selos-compra { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-3); margin-top: 10px; }
.selos-compra span { display: inline-flex; gap: 6px; align-items: center; }
.selos-compra svg { width: 15px; height: 15px; }
.faq { margin: 28px 0 10px; }
.faq-item { background: #fff; border: 1px solid var(--borda); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.faq-pergunta { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 16px; background: none; border: 0; text-align: left; font-weight: 600; font-size: 14.5px; }
.faq-sinal { width: 20px; height: 20px; flex: none; position: relative; }
.faq-sinal::before, .faq-sinal::after { content: ''; position: absolute; left: 4px; right: 4px; top: 9px; height: 2px; background: var(--navy-600); border-radius: 2px; transition: transform .2s; }
.faq-sinal::after { transform: rotate(90deg); }
.faq-item.aberto .faq-sinal::after { transform: rotate(0); }
.faq-resposta p { margin: 0; padding: 0 16px 16px; font-size: 14px; color: var(--texto-2); }

.cta-fixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--borda); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; justify-content: center; animation: sobe .3s ease; }
.cta-fixo .btn { margin: 0; min-height: 50px; padding: 12px 16px; font-size: 14.5px; max-width: 420px; }
.cta-fixo-preco { display: grid; font-size: 11.5px; color: var(--texto-3); line-height: 1.25; flex: none; }
.cta-fixo-preco strong { font-size: 17px; color: var(--navy-700); }
@keyframes sobe { from { transform: translateY(100%); } }
.etapa-vendas .tela, .etapa-landing .tela { padding-bottom: 96px; }
@media (min-width: 960px) { .cta-fixo-landing { display: none !important; } .etapa-landing .tela { padding-bottom: 16px; } }

.modal-fundo { position: fixed; inset: 0; background: rgba(6, 22, 38, .55); z-index: 60; display: grid; place-items: center; padding: 16px; animation: entra .2s ease; }
.modal { background: #fff; border-radius: 16px; padding: 24px 20px 14px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 30px 60px -20px rgba(6, 22, 38, .5); }
.modal h3 { margin: 6px 0; font-size: 19px; }
.modal p { font-size: 14.5px; color: var(--texto-2); margin: 0; }

/* ------------------------------------------------------------------ rodapé */
.rodape { max-width: var(--larg); margin: 26px auto 0; padding: 18px 16px 30px; border-top: 1px solid var(--borda); text-align: center; font-size: 12px; color: var(--texto-3); }
.tela .rodape { padding-left: 0; padding-right: 0; }
.rodape-legal { margin: 0 0 10px; line-height: 1.5; }
.rodape-links { display: flex; justify-content: center; gap: 16px; margin-bottom: 8px; }
.rodape-links a { color: var(--texto-2); }
.rodape-empresa { line-height: 1.6; }
.rodape-empresa a { color: var(--texto-2); }
.rodape-pendente { background: var(--vermelho-claro); color: #A3262B; border: 2px dashed var(--vermelho); border-radius: 10px; padding: 10px 12px; font-weight: 600; font-size: 12.5px; }

@media (min-width: 600px) {
  .tela { padding-top: 30px; }
  .h1 { font-size: 26px; }
  .depos-trilho { grid-auto-columns: 30%; }
}