.login-tela {
  min-height: 100vh;
  display: flex;
}

.login-form-coluna {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-form {
  width: 100%;
  max-width: 340px;
}

.login-form .logo {
  height: 32px;
  margin-bottom: 40px;
  display: block;
}

.login-form button {
  width: 100%;
  margin-top: 24px;
}

.login-painel {
  flex: 1;
  background: var(--marinho);
  position: relative;
  overflow: hidden;
  display: none;
}

.login-blocos {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
}

.login-blocos .bloco {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  opacity: 0;
  animation: bloco-cair 600ms cubic-bezier(.22, 1, .36, 1) forwards;
}

.login-blocos .bloco-1 { background: #FFFFFF; animation-delay: 0ms; }
.login-blocos .bloco-2 { background: var(--azul); animation-delay: 100ms; }
.login-blocos .bloco-3 { background: var(--azul); animation-delay: 200ms; border-bottom: 3px solid var(--laranja); }
.login-blocos .bloco-4 { background: #FFFFFF; animation-delay: 300ms; }

@keyframes bloco-cair {
  0% { transform: translateY(-160px) rotate(-8deg); opacity: 0; }
  55% { opacity: 1; }
  75% { transform: translateY(8px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .login-blocos .bloco {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 860px) {
  .login-painel {
    display: block;
  }
}