/* A JANELA DE CONECTAR O WHATSAPP: os passos de um lado, o codigo do outro, a situacao embaixo. */
.janela-de-parear { width: min(640px, calc(100vw - 32px)); max-width: 640px; padding: 24px; }
.janela-de-parear h2 { margin: 0 0 16px; font-size: 20px; font-weight: 600; }
.parear-frase { margin: 0 0 16px; }
.parear-corpo { display: flex; align-items: center; gap: 24px; }
.parear-passos { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.parear-passos li { position: relative; margin: 0 0 16px; padding-left: 36px; font-size: 14px; line-height: 1.4; counter-increment: passo; }
.parear-passos li:last-child { margin-bottom: 0; }
.parear-passos li::before {
  content: counter(passo);
  position: absolute; top: -2px; left: 0;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #e2f8f7; color: #06647a;
  font-size: 12px; font-weight: 600;
}
.parear-codigo { flex: none; padding: 12px; border: 1px solid rgba(20, 31, 33, .1); border-radius: 12px; background: #fff; line-height: 0; }
.parear-codigo img { display: block; width: 240px; height: 240px; }
.parear-situacao { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 13px; color: #5c6b6d; }
.parear-situacao i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f5b400; animation: parear-pulso 1.4s ease-in-out infinite; }
.parear-situacao.conectado { color: #06647a; font-weight: 600; }
.parear-situacao.conectado i { background: #25d366; animation: none; }
.janela-de-parear .acoes { margin-top: 16px; }
@keyframes parear-pulso { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .parear-situacao i { animation: none; } }
@media (max-width: 560px) {
  .parear-corpo { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
  .parear-codigo { align-self: center; }
  .parear-codigo img { width: 200px; height: 200px; }
}