/* ============================================================
   NEGÓCIOS & IA · Diagnóstico de IA
   Herda os tokens de styles.css (--roxo, --lime, --ink, --error, Satoshi).
   Reaproveita .btn, .field, .arr. Só o que é novo mora aqui.
   Roxo = acentos informativos (progresso, opções); lima = prova e nota
   (eco da IA, medidor), como manda a paleta 2op.
   ============================================================ */

.dg{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line-dark);
  border-radius:0;
  padding:clamp(26px,3.5vw,44px);
  position:relative;
}

/* ---------- progresso ---------- */
.dg-bar{
  height:4px;background:rgba(255,255,255,.12);margin-bottom:26px;overflow:hidden;
  border-radius:0;
}
.dg-bar-fill{
  height:100%;width:100%;background:var(--roxo);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.dg-count{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  color:rgba(242,242,238,.5);margin-bottom:18px;
}
.dg-count b{color:var(--roxo);font-weight:900;}

/* ---------- telas ---------- */
.dg-step{display:none;}
.dg-step.is-on{display:block;animation:dg-in .38s var(--ease-out) both;}
@keyframes dg-in{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

.dg-q{
  font-size:clamp(1.25rem,2.1vw,1.6rem);font-weight:900;line-height:1.2;
  color:#fff;margin-bottom:22px;letter-spacing:-.01em;
}

/* ---------- opções ---------- */
.dg-opts{display:flex;flex-direction:column;gap:10px;}
.dg-opt{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:rgba(14,14,12,.45);
  border:1px solid rgba(255,255,255,.18);
  border-radius:0;
  color:var(--text-dark);
  padding:15px 18px;font:inherit;font-size:15px;line-height:1.35;
  transition:border-color .18s,background .18s,color .18s,transform .16s var(--ease-out);
}
.dg-opt:hover{border-color:var(--roxo);background:rgba(140,99,250,.1);}
.dg-opt:active{transform:scale(.985);}
.dg-opt::before{
  content:'';flex:none;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  transition:background .18s,border-color .18s,box-shadow .18s;
}
.dg-opt:hover::before{border-color:var(--roxo);}
.dg-opt.is-picked{border-color:var(--roxo);background:rgba(140,99,250,.16);color:#fff;}
.dg-opt.is-picked::before{background:var(--roxo);border-color:var(--roxo);}

/* ---------- texto aberto ---------- */
.dg-hint{
  font-size:13px;line-height:1.6;color:rgba(242,242,238,.55);margin-bottom:16px;
}
.dg-count-chars{
  font-size:12px;color:rgba(242,242,238,.4);text-align:right;margin-top:8px;
  font-variant-numeric:tabular-nums;
}
.dg-count-chars.is-near{color:#FFC46B;}

/* ---------- IA pensando ---------- */
.dg-think{
  display:flex;align-items:center;gap:12px;
  font-size:15px;color:rgba(242,242,238,.62);
  padding:20px 0;
}
.dg-dots{display:inline-flex;gap:5px;flex:none;}
.dg-dots i{
  width:6px;height:6px;background:var(--roxo);display:block;border-radius:50%;
  animation:dg-pulse 1.15s var(--ease-out) infinite;
}
.dg-dots i:nth-child(2){animation-delay:.16s;}
.dg-dots i:nth-child(3){animation-delay:.32s;}
@keyframes dg-pulse{
  0%,100%{opacity:.25;transform:translateY(0);}
  40%{opacity:1;transform:translateY(-4px);}
}

/* A resposta da IA. É a prova do produto — merece destaque. */
.dg-echo{
  position:relative;overflow:hidden;
  background:rgba(226,255,0,.05);
  border:1px solid rgba(226,255,0,.14);
  border-radius:0;
  padding:21px 20px 18px 23px;margin-bottom:24px;
  font-size:15px;line-height:1.65;color:#fff;
}
.dg-echo::before{
  content:'';position:absolute;left:23px;right:20px;top:0;height:3px;
  background:var(--lime);
}
.dg-echo-tag{
  display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--lime);margin-bottom:8px;
}

/* ---------- diagnóstico ---------- */
.dg-perfil{
  font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:900;line-height:1.15;
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:26px;
}
.dg-rows{border-top:1px solid var(--line-dark);margin-bottom:26px;}
.dg-row{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:8px 18px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line-dark);
}
.dg-row dt{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(242,242,238,.5);white-space:nowrap;
}
.dg-row dd{font-size:15px;line-height:1.5;color:#fff;}

/* medidor de maturidade 1..5 */
.dg-meter{display:flex;gap:5px;align-items:center;}
.dg-meter i{
  width:26px;height:7px;background:rgba(255,255,255,.16);display:block;border-radius:0;
}
.dg-meter i.is-lit{background:var(--lime);}
/* preenchimento segmento a segmento na entrada do resultado:
   nasce em scaleX(0) e o JS solta .dg-meter--fill um frame depois do paint;
   --n vem inline de cada segmento para escalonar os delays */
.dg-meter i.is-lit{
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease-out);
  transition-delay:calc(var(--n,0)*70ms);
}
.dg-meter.dg-meter--fill i.is-lit{transform:scaleX(1);}
.dg-meter b{
  font-size:13px;font-weight:700;color:rgba(242,242,238,.62);margin-left:8px;
  font-variant-numeric:tabular-nums;
}

/* ---------- consentimento (LGPD) ---------- */
.dg-consent{
  display:flex;gap:10px;align-items:flex-start;
  font-size:12px;line-height:1.55;color:rgba(242,242,238,.62);
  margin:2px 0 18px;cursor:pointer;user-select:none;
}
.dg-consent input{
  flex:none;width:16px;height:16px;margin-top:2px;
  accent-color:var(--roxo);cursor:pointer;
}
.dg-consent.error span{color:var(--error);}
.dg-consent a{color:var(--roxo);text-decoration:underline;text-underline-offset:2px;}

/* ---------- erros ---------- */
.dg-err{
  font-size:13px;color:var(--error);margin-top:10px;
}
.dg-err a{color:var(--roxo);font-weight:700;text-decoration:underline;text-underline-offset:3px;}

/* ---------- envio do cadastro ---------- */
#dg-enviar[disabled]{opacity:.55;cursor:wait;}

/* ---------- rodapé de navegação ---------- */
.dg-nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:22px;
}
.dg-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(242,242,238,.45);background:none;border:0;padding:6px 0;
  transition:color .18s;
}
.dg-back .arr svg{width:14px;height:14px;}
.dg-back:hover{color:var(--roxo);}
.dg-back[hidden]{display:none;}

/* ---------- sucesso ---------- */
.dg-done h3{
  font-size:clamp(1.5rem,3vw,2rem);font-weight:900;text-transform:uppercase;
  margin-bottom:14px;line-height:1.1;
}
.dg-done p{font-size:15px;line-height:1.7;color:var(--text-dark-muted);}
/* entrada escalonada da celebração: título → texto → botão de WhatsApp
   (fadeUp vem de styles.css); o olho termina no CTA de lead quente */
.dg-done>*{opacity:0;animation:fadeUp .5s var(--ease-out) forwards;}
.dg-done>:nth-child(1){animation-delay:.05s;}
.dg-done>:nth-child(2){animation-delay:.15s;}
.dg-done>:nth-child(3){animation-delay:.25s;}

/* Botão de WhatsApp: verde do próprio app (cor funcional, fora da paleta,
   para reconhecimento imediato). Só aparece no fim, sem disputar ação. */
.dg-zap{
  margin-top:24px;
  background:#25D366;border-color:#25D366;color:var(--dark-ground);
}
.dg-zap:hover{background:var(--lime);border-color:var(--lime);color:var(--dark-ground);}

@media (prefers-reduced-motion:reduce){
  .dg-step.is-on{animation:none;}
  .dg-dots i{animation:none;opacity:.7;}
  .dg-bar-fill{transition:none;}
  .dg-meter i.is-lit{transition:none;transform:scaleX(1);}
  .dg-done>*{opacity:1;animation:none;}
}

@media (max-width:860px){
  .dg-row{grid-template-columns:1fr;gap:5px;}
}