/* ============================================================
   FUNIL CONSULTORIA (Alcance a Meta) — estilos
   Marca: preto #0B0B0C, dourado #C9A24B, branco #FFFFFF.
   Mobile-first, leve, sem dependencia externa.
   ============================================================ */
:root{
  --preto:#0B0B0C;
  --dourado:#C9A24B;
  --dourado-fraco:#8a6f34;
  --branco:#FFFFFF;
  --cinza:#b8b4ad;
  --card:#141416;
  --borda:#2a2a2d;
  --erro:#e06a5a;
  --wa:#25D366;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--preto);
  color:var(--branco);
  font-family:Georgia,'Times New Roman',serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:104px; /* espaco pra nav fixa */
  min-height:100vh;
}
.wrap{max-width:620px;margin:0 auto;padding:0 20px;}

/* Barra de progresso */
.progress{
  position:sticky;top:0;z-index:20;
  background:rgba(11,11,12,0.96);
  backdrop-filter:blur(6px);
  padding:14px 20px 11px;
  border-bottom:1px solid var(--borda);
}
.progress[hidden]{display:none;}
.progress-bar{height:6px;background:#232326;border-radius:99px;overflow:hidden;max-width:620px;margin:0 auto;}
.progress-fill{height:100%;width:0;background:var(--dourado);transition:width .35s ease;border-radius:99px;}
.progress-label{
  font-size:13px;color:var(--cinza);margin:8px auto 0;max-width:620px;
  display:flex;justify-content:space-between;letter-spacing:.02em;
}

/* Telas */
.screen{display:none;padding:34px 0 10px;animation:fade .35s ease;}
.screen.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* Abertura */
.intro-inner{text-align:center;padding:24px 0 10px;}
.logo{width:150px;height:auto;margin:0 auto 26px;display:block;}

/* Cabecalho tipografico SEB (sem logo proprio) */
.brand-seb{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 auto 30px;}
.brand-seb-sigla{
  font-size:52px;letter-spacing:.14em;color:var(--dourado);font-weight:normal;
  line-height:1;padding-left:.14em;
}
.brand-seb-sub{
  font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza);
  border-top:1px solid var(--borda);padding-top:10px;
}
.res-brand-seb{margin-bottom:24px;}
.res-brand-seb .brand-seb-sigla{font-size:40px;}
.eyebrow{
  color:var(--dourado);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  margin:0 0 16px;
}
h1{font-size:30px;line-height:1.22;font-weight:normal;margin:0 0 18px;color:var(--branco);}
.lead{color:var(--cinza);font-size:16.5px;max-width:52ch;margin:0 auto 30px;}
.micro{color:#7d7a72;font-size:13px;margin-top:16px;}

/* Cabecalho de pergunta */
.q-kicker{color:var(--dourado);font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;}
.q-title{font-size:24px;line-height:1.3;font-weight:normal;margin:0 0 8px;}
.q-sub{color:var(--cinza);font-size:15.5px;margin:0 0 22px;}

/* Opcoes (cards clicaveis) */
.opts{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.opt{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  padding:16px 16px;border:1.5px solid var(--borda);border-radius:12px;
  background:#191919;transition:.15s;font-size:16px;line-height:1.35;
}
.opt:hover{border-color:var(--dourado-fraco);}
.opt input{position:absolute;opacity:0;width:0;height:0;}
.opt .box{
  flex:0 0 22px;height:22px;border-radius:50%;border:1.5px solid #4a4a4d;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.opt input:checked ~ .box{background:var(--dourado);border-color:var(--dourado);}
.opt input:checked ~ .box::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--preto);}
.opt input:checked ~ .txt{color:var(--branco);}
.opt input:checked{}
.opt.sel{border-color:var(--dourado);background:#20201b;}
.opt .txt{color:var(--cinza);}
.opt input:focus-visible ~ .box{outline:2px solid var(--dourado);outline-offset:2px;}

/* Campos de contato */
.field{margin:0 0 16px;}
.field-label{display:block;font-size:15.5px;margin:0 0 8px;}
input[type=text],input[type=tel]{
  width:100%;background:#191919;border:1.5px solid var(--borda);border-radius:11px;
  color:var(--branco);font-family:inherit;font-size:16px;padding:14px 15px;
}
input:focus{outline:none;border-color:var(--dourado);}
input::placeholder{color:#6a675f;}
.field-erro{color:var(--erro);font-size:13px;margin-top:7px;display:none;}
.field-erro.show{display:block;}

/* Botoes gerais */
.btn{
  font-family:inherit;font-size:17px;border-radius:11px;padding:16px 26px;
  cursor:pointer;border:1.5px solid var(--dourado);transition:.15s;
}
.btn-gold{background:var(--dourado);color:var(--preto);font-weight:bold;}
.btn-gold:hover{filter:brightness(1.06);}
.btn-full{width:100%;margin-top:6px;}

/* Navegacao fixa */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(11,11,12,0.97);border-top:1px solid var(--borda);
  padding:12px 20px;padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
.nav[hidden]{display:none;}
.nav-inner{max-width:620px;margin:0 auto;display:flex;gap:12px;}
.nav-inner button{
  font-family:inherit;font-size:16px;border-radius:11px;padding:15px 18px;
  cursor:pointer;border:1.5px solid var(--dourado);transition:.15s;flex:1;
}
.btn-voltar{background:transparent;color:var(--dourado);}
.btn-voltar:hover{background:rgba(201,162,75,0.1);}
.btn-voltar[hidden]{display:none;}
.btn-avancar{background:var(--dourado);color:var(--preto);font-weight:bold;flex:2;}
.btn-avancar:hover{filter:brightness(1.06);}
.btn-avancar:disabled{opacity:.4;cursor:not-allowed;}

/* Resultado / diagnostico */
.res-inner{padding:8px 0 20px;}
.res-logo{width:120px;height:auto;display:block;margin:0 auto 26px;}
.res-kicker{color:var(--dourado);font-size:13px;letter-spacing:.2em;text-transform:uppercase;text-align:center;margin-bottom:12px;}
.res-arqui{font-size:27px;line-height:1.25;font-weight:normal;text-align:center;margin:0 0 6px;}
.res-arqui b{color:var(--dourado);font-weight:normal;}
.res-hi{color:var(--dourado);}
.res-bloco{
  background:var(--card);border:1px solid var(--borda);border-radius:14px;
  padding:20px 20px;margin:18px 0;
}
.res-bloco h3{color:var(--dourado);font-size:18px;font-weight:normal;margin:0 0 10px;}
.res-bloco p{color:#d8d4cc;font-size:16px;margin:0 0 12px;}
.res-bloco p:last-child{margin-bottom:0;}
.res-ponte{
  text-align:center;font-size:18px;color:var(--branco);font-style:italic;
  margin:26px auto;max-width:44ch;
}
/* Grafico de maturidade — onde voce esta x onde da pra chegar */
.mat-bloco .mat-indice{text-align:center;margin:2px 0 24px;}
.mat-indice-num{
  display:block;font-size:46px;line-height:1;color:var(--dourado);
  letter-spacing:.01em;
}
.mat-indice-lbl{
  display:block;font-size:13.5px;color:var(--cinza);margin-top:8px;
  letter-spacing:.04em;
}
.mat-bars{display:flex;flex-direction:column;gap:18px;}
.mat-row{}
.mat-frente{font-size:15px;color:#e6e2da;margin:0 0 9px;}
.mat-line{display:flex;align-items:center;gap:9px;margin:0 0 6px;}
.mat-line:last-child{margin-bottom:0;}
.mat-tag{
  flex:0 0 64px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
}
.mat-tag-hoje{color:#8f8b82;}
.mat-tag-meta{color:var(--dourado);}
.mat-track{
  flex:1;height:12px;background:#232326;border-radius:99px;overflow:hidden;
}
.mat-fill{
  height:100%;width:0;border-radius:99px;
  transition:width 1.1s cubic-bezier(.22,1,.36,1);
}
.mat-hoje{background:#5a5750;}
.mat-meta{background:linear-gradient(90deg,var(--dourado-fraco),var(--dourado));}
.mat-val{flex:0 0 30px;text-align:right;font-size:13px;}
.mat-val-hoje{color:#9a968d;}
.mat-val-meta{color:var(--dourado);}
.mat-nota{
  font-size:13px;color:#8f8b82;font-style:italic;line-height:1.55;
  margin:18px 0 0;
}
.mat-nota b{color:#b8b092;font-style:normal;font-weight:normal;}

.oferta{
  border:1.5px solid var(--dourado);border-radius:16px;
  background:linear-gradient(180deg,#17140d 0%,#141416 100%);
  padding:26px 22px;margin-top:8px;text-align:center;
}
.oferta h2{font-size:22px;font-weight:normal;margin:0 0 14px;line-height:1.3;}
.oferta p{color:#d8d4cc;font-size:16px;margin:0 0 22px;}
.btn-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;background:var(--wa);color:#0a2a15;border:none;border-radius:12px;
  font-family:inherit;font-weight:bold;font-size:17.5px;padding:17px 22px;
  cursor:pointer;text-decoration:none;transition:.15s;
}
.btn-wa:hover{filter:brightness(1.05);}
.btn-wa svg{width:22px;height:22px;flex:0 0 22px;}
.oferta .micro{margin-top:14px;}

@media(max-width:480px){
  body{font-size:16px;}
  h1{font-size:26px;}
  .q-title{font-size:22px;}
  .res-arqui{font-size:24px;}
  .logo{width:130px;}
}