@charset "UTF-8";

/* Quando a tela diminui → imagem sobe para cima (troca de lado) */
@media (max-width: 768px) {
  #login {
    flex-direction: column;
    width: 92%;
    max-width: 420px;
    height: auto;
    position: static;
    transform: none;
    margin: 20px auto;
  }

  #imagem {
    min-width: 100%;
    height: 180px;
    order: 1;           /* Imagem fica em cima */
  }

  #formulario {
    order: 2;           /* Formulário fica embaixo */
    padding: 40px 30px;
    min-width: auto;
  }

  #formulario h1 {
    font-size: 1.8rem;
  }
}

/* Telas muito pequenas */
@media (max-width: 480px) {
  #login {
    width: 95%;
  }
  
  #formulario {
    padding: 35px 25px;
  }
}