/* Passo Problema: sinais, serviços (que se reordenam) e o teste das dez empresas */
.sinais { display: grid; gap: var(--e2); }
.servicos { display: grid; gap: var(--e3); }
.servicos-dica { max-width: 36rem; }

.servico-cabeca { display: grid; justify-items: start; gap: .3125rem; }
.servico-nome { font-size: 1.0625rem; }
.servico-compra {
  padding: .0625rem .625rem;
  border-radius: var(--r-pilula);
  background: var(--creme);
  color: var(--grafite);
  font-size: var(--t-apoio);
  font-weight: 600;
  white-space: nowrap;
}
.servico-indicado {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .375rem;
  color: var(--laranja-txt);
  font-size: var(--t-apoio);
  font-weight: 700;
}
.servico-indicado-ponto { width: .5rem; height: .5rem; border-radius: 50%; background: var(--terracota); }
.servico-indicado:not([hidden]) { animation: surge 420ms var(--ease) both; }

/* O teste das dez empresas */
.teste-corpo {
  display: grid;
  gap: var(--e4);
  padding: var(--e5) var(--e4);
  background: var(--papel);
  border: 1px solid var(--fio);
  border-radius: var(--r-m);
}
.teste-texto { max-width: 38rem; }
.teste-linhas { display: grid; gap: var(--e4); }
.teste-linha { display: grid; gap: var(--e2); padding-top: var(--e4); border-top: 1px solid var(--fio); }
.teste-linha:first-child { padding-top: 0; border-top: 0; }
.teste-resultado {
  padding: var(--e4);
  border-radius: var(--r-p);
  background: var(--folha);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
}
.teste-resultado.vazio { padding-inline: 0; background: transparent; color: var(--grafite-claro); font-weight: 400; }

@media (min-width: 48em) {
  .teste-corpo { padding: var(--e6); }
}