/* O caminho do lead no post /blog/quiz-para-gerar-leads: três etapas em ordem (o quiz, o envio, o seu CRM), por isso
   numeradas. Usa só os tokens do blog.css e a .tela das telas ilustrativas; no celular as etapas ficam uma embaixo da outra. */

.caminho{width:min(100vw - 32px,56rem);margin:2em 0 2.4em 50%;translate:-50%} /* sai da coluna do texto, centrado nela */
.caminho ol{list-style:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;counter-reset:etapa}
@media (min-width:48em){.caminho ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
.corpo .caminho li{counter-increment:etapa;margin:0;display:flex;flex-direction:column;gap:10px}
.caminho .tela,.caminho .envio,.caminho .destino{flex:1;aspect-ratio:auto;min-height:15.5rem}

.caminho .tela .caixa{display:flex;gap:6px;align-items:flex-start;color:var(--quiz-mudo)}
.caminho .tela .caixa::before{content:"";flex:none;width:11px;height:11px;margin-top:1px;border-radius:3px;background:var(--quiz-primaria)}

/* o envio: o corpo do POST como ele chega (JSON em texto), por isso em fonte de código */
.caminho .envio{margin:0;padding:12px 14px;background:var(--superficie-2);color:var(--texto);border:1px solid var(--linha);border-radius:12px;font:400 .75rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;overflow-x:auto}
.caminho .envio i{font-style:normal;color:var(--acento-texto)}

/* o seu CRM: a ficha do contato com as respostas e a primeira mensagem montada a partir delas */
.caminho .destino{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--superficie);border:1px solid var(--linha);border-radius:12px;font-size:.8125rem;line-height:1.4}
.caminho .destino b{font-size:.9375rem;font-weight:600}
.caminho .destino .campo-crm{display:flex;justify-content:space-between;gap:8px;padding-bottom:6px;border-bottom:1px solid var(--linha);color:var(--texto-2)}
.caminho .destino .campo-crm em{font-style:normal;color:var(--texto);text-align:right}
.caminho .destino .msg{margin-top:auto;padding:8px 10px;background:var(--superficie-3);border-radius:10px 10px 10px 2px;color:var(--texto)}

.caminho .rotulo{font-size:.9375rem;line-height:1.4;color:var(--texto-2)}
.caminho .rotulo::before{content:counter(etapa);display:inline-grid;place-items:center;width:1.5em;height:1.5em;margin-right:8px;background:var(--superficie-2);border:1px solid var(--linha);border-radius:4px;color:var(--texto);font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.caminho .rotulo strong{color:var(--texto);font-weight:600}
.caminho figcaption{margin-top:14px;font-size:.9375rem;color:var(--texto-2)}