/* Indicador de carregamento: três reticências saltitantes (azul do site, #1a1a2e). Uso:
   <div class="pontos" role="status" aria-label="Carregando"><span></span><span></span><span></span></div>
   Versão pequena, na linha do texto: <span class="pontos pontos--pequeno" aria-hidden="true"><span></span><span></span><span></span></span> */
.pontos { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; --salto: -12px; }
.pontos > span { display: block; width: 12px; height: 12px; border-radius: 50%; background: #1a1a2e; animation: pontos-saltar 1s ease-in-out infinite; }
.pontos > span:nth-child(2) { animation-delay: .15s; }
.pontos > span:nth-child(3) { animation-delay: .3s; }
.pontos--pequeno { gap: 3px; height: 14px; vertical-align: middle; --salto: -4px; }
.pontos--pequeno > span { width: 5px; height: 5px; }

@keyframes pontos-saltar {
  0%, 60%, 100% { transform: translateY(0); opacity: .55; }
  30% { transform: translateY(var(--salto)); opacity: 1; }
}

/* Quem pediu menos movimento no sistema vê os pontos parados (sem saltar). */
@media (prefers-reduced-motion: reduce) {
  .pontos > span { animation: none; opacity: 1; }
}

/* Carregamento sobre a página (js/carregando.js): o mesmo véu branco do resto do site; fica acima dos modais (z-index 300). */
.carregando-tela { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.6); align-items: center; justify-content: center; z-index: 400; }
.carregando-tela.visivel { display: flex; }

/* Dentro de um botão (só onde há data-carregando="botao"): mesma cor do texto do botão, para aparecer em fundo claro ou escuro. */
.pontos--botao { gap: 4px; height: 16px; vertical-align: middle; --salto: -4px; }
.pontos--botao > span { width: 6px; height: 6px; background: currentColor; }
.btn-carregando { cursor: progress; }
.btn-carregando:disabled { opacity: .9; }