/* ==========================================================================
   A4 · Contas
   Criada não quer dizer pronta. A prontidão responde uma pergunta só: se
   chegar mensagem agora, ela tem para onde ir?
   ========================================================================== */

.a4-rolagem { min-width: 1064rem; }
.mobile .a4-rolagem { min-width: 0; }

.a4__linha,
.a4__cabeca { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92rem 70rem 64rem 104rem 150rem; }
.a4__linha { position: relative; }

.a4__endereco {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a4__endereco:hover { text-decoration: none; }
.a4__endereco::after { content: ''; position: absolute; inset: 0; }
.a4__destino,
.a4__celula {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12rem;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a4__acao { position: relative; z-index: 1; }

/* --- cartões de conta, no celular ---------------------------------------- */
.a4__cartoes { display: flex; flex-direction: column; gap: 8rem; }
.a4__cartao {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border: 1rem solid var(--line);
  background: var(--bg-2);
  padding: 12rem 14rem;
}
.a4__cartao:hover { border-color: var(--line-2); }
.a4__cartao-topo {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a4__cartao-topo::after { content: ''; position: absolute; inset: 0; }
.a4__cartao-destino {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12rem;
  margin-top: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a4__cartao-meta { font-family: var(--font-mono); font-size: 11rem; color: var(--ink-3); margin-top: 6rem; }
.a4__cartao .btn { position: relative; z-index: 1; width: 100%; height: 44rem; margin-top: 10rem; }

/* --- esqueleto de carregamento ------------------------------------------- */
.a4__esqueleto div { animation: jaoPulsa 1.1s ease-in-out infinite; }
.a4__esqueleto-barra { height: 11rem; background: var(--panel-2); }
.a4__esqueleto-fraca { height: 11rem; background: var(--panel); }
.a4__lendo {
  display: flex;
  align-items: center;
  gap: 9rem;
  margin-top: 14rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11rem;
  color: var(--ink-3);
}
.a4__lendo i { width: 9rem; height: 9rem; background: var(--warn); animation: jaoPulsa 1.1s ease-in-out infinite; }