.tela-carregamento {
  display: grid;
  min-height: min(70vh, 680px);
  padding: 2rem;
  place-content: center;
  justify-items: center;
  color: #062856;
  background:
    radial-gradient(circle at 50% 42%, rgb(137 198 137 / 23%), transparent 31%),
    #f7f8f3;
  font: 400 1rem/1.5 "Atkinson Hyperlegible", Arial, sans-serif;
}

.tela-carregamento__marca {
  display: flex;
  gap: 0.2rem;
  align-items: baseline;
  font: 900 clamp(4.5rem, 20vw, 8rem)/0.8 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: -0.08em;
}

.tela-carregamento__marca span:nth-child(1) { color: #075486; }
.tela-carregamento__marca span:nth-child(2) { color: #89c689; animation-delay: 90ms; }
.tela-carregamento__marca span:nth-child(3) { color: #f68b24; animation-delay: 180ms; }

.tela-carregamento__marca span {
  animation: numero-pira 900ms ease-in-out infinite alternate;
}

.tela-carregamento strong {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}

.tela-carregamento__progresso {
  width: min(65vw, 220px);
  height: 4px;
  margin-top: 1rem;
  overflow: hidden;
  background: #d9e3e7;
  border-radius: 999px;
}

.tela-carregamento__progresso::after {
  display: block;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, #075486, #89c689, #f68b24);
  border-radius: inherit;
  content: "";
  animation: progresso-pira 1.05s ease-in-out infinite alternate;
}

@keyframes numero-pira {
  from { transform: translateY(0); }
  to { transform: translateY(-0.12em); }
}

@keyframes progresso-pira {
  from { transform: translateX(-20%); }
  to { transform: translateX(142%); }
}

@media (prefers-reduced-motion: reduce) {
  .tela-carregamento__marca span,
  .tela-carregamento__progresso::after { animation: none; }
}