/* =========================================================================
   Shield Academy — Diagnóstico de perfil (Funil D)
   Só o que este funil tem a mais que o style.css compartilhado: a pergunta
   aberta, os próximos passos e o eco das respostas. Todo o resto (cores,
   tipografia, botões, telas, opções, formulário) vem do style.css do quiz da
   imersão, de propósito: é a mesma marca falando com a mesma pessoa.
   ========================================================================= */

/* ---------------- pergunta aberta ----------------
   Existe por pedido do Alisson: ele quer o nome das marcas que a pessoa usa,
   e isso nenhuma lista de opções entrega. */
.campo-aberto{display:grid;gap:12px;justify-items:stretch}
.campo-txt{
  width:100%;background:#EDEDED;color:#111;border:2px solid transparent;
  border-radius:var(--radius-sm);padding:16px 16px;font-size:16px;
}
.campo-txt::placeholder{color:#777}
.campo-txt:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(239,68,68,.18)}
.btn-pular{
  background:none;border:0;color:var(--grey-d);font-size:13.5px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px;
}
.btn-pular:hover{color:var(--grey)}

/* ---------------- próximos passos ---------------- */
.passos-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;margin:26px auto 0;max-width:var(--texto);text-align:left;
}
.passos{list-style:none;counter-reset:passo;margin:0;padding:0;display:grid;gap:14px}
.passos li{
  counter-increment:passo;display:grid;grid-template-columns:auto 1fr;gap:12px;
  align-items:start;font-size:14.5px;color:#D6D6D6;line-height:1.5;
}
.passos li::before{
  content:counter(passo);
  width:24px;height:24px;border-radius:50%;background:var(--grad-red);color:#fff;
  font-size:12px;font-weight:800;display:grid;place-items:center;flex:none;
}

/* ---------------- eco das respostas ----------------
   Mostrar de volta o que a pessoa respondeu é o que separa "análise" de
   "resultado genérico": ela confere que a leitura saiu do que ela disse. */
.eco-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;margin:26px auto 0;max-width:var(--texto);text-align:left;
}
.eco{list-style:none;margin:0;padding:0;display:grid;gap:0}
.eco li{
  display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--line);
}
.eco li:last-child{border-bottom:0;padding-bottom:0}
.eco-p{font-size:12.5px;color:var(--grey-d);line-height:1.4}
.eco-r{font-size:14.5px;color:#EDEDED;font-weight:600;line-height:1.4}

/* ---------------- link do perfil ---------------- */
.ig-bloco{margin:26px 0 0;font-size:14px}
.ig-bloco a{color:var(--red-lt);text-decoration:underline;text-underline-offset:3px}