/* Passo Clientes: contador, formulário, lista de nomes, cartão de prova e as mensagens em bolhas */
.clientes-lista { display: grid; gap: var(--e5); max-width: 40rem; }
.clientes-form { display: grid; gap: var(--e5); }

.contador { display: grid; gap: var(--e3); }
.contador-numero { font-family: var(--f-display); font-size: 2.75rem; line-height: 1; letter-spacing: -.015em; }
.bolinhas { display: flex; gap: .5rem; }
.bolinha {
  width: .875rem;
  height: .875rem;
  border: 1.5px solid var(--fio-campo);
  border-radius: 50%;
  background: transparent;
  transition: background-color 260ms var(--ease-suave), border-color 260ms var(--ease-suave), transform 420ms var(--mola);
}
.bolinha.cheia { background: var(--grafite); border-color: var(--grafite); transform: scale(1.12); }
.contador.cheio .bolinha.cheia { background: var(--certo); border-color: var(--certo); }
.contador.cheio .bolinha { transition-delay: calc(var(--i, 0) * 40ms); }

.completo { display: flex; align-items: flex-start; gap: .625rem; color: var(--certo-txt); font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.completo .frase-icone { color: var(--certo); }

.atalho-simples { padding-left: var(--e4); }

.nomes { display: grid; }
.nomes:empty { display: none; }
.nome-item { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e2) 0 var(--e2) 0; border-top: 1px solid var(--fio); }
.nome-item:last-child { border-bottom: 1px solid var(--fio); }
.nome-texto { display: grid; min-width: 0; }
.nome-nome { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.nome-detalhe { font-size: var(--t-apoio); color: var(--grafite-claro); overflow-wrap: anywhere; }

.privacidade { max-width: 36rem; }

.cartao-prova {
  display: grid;
  gap: var(--e3);
  max-width: 40rem;
  padding: var(--e5);
  background: var(--folha);
  border: 1px solid var(--fio);
  border-radius: var(--r-m);
}
.cartao-prova p { line-height: 1.6; }

.mensagens { display: grid; gap: var(--e6); max-width: 40rem; }
.mensagem { display: grid; gap: var(--e3); }
.bolhas { display: grid; gap: .25rem; justify-items: start; padding: var(--e4); background: var(--papel); border: 1px solid var(--fio); border-radius: var(--r-m); }
.bolha {
  max-width: 92%;
  padding: .5rem .875rem;
  border-radius: 1.125rem;
  background: var(--creme);
  font-size: var(--t-ui);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.bolha:first-child { border-top-left-radius: .375rem; }
.bolha:last-child { border-bottom-left-radius: .375rem; }
.marca-nome { padding: 0 .25rem; border-radius: .1875rem; background: rgba(240, 124, 52, .26); }
.mensagem-acoes { display: flex; }