@charset "UTF-8";

/* CELULAR */
@media screen and (max-width: 767px) {
    body {
        background-image: linear-gradient(135deg, #FF4D6D, #C9184A, #8B0000);
    }

    section#login {
        display: flex;
        flex-direction: column;
        width: 90vw;
        margin: 0 auto;
        gap: 20px;
    }

    #imagem {
        width: 100%;
        height: 200px;
    }

    #formulario {
        width: 100%;
        padding: 20px;
    }
}

/* TABLET */
@media screen and (min-width: 768px) and (max-width: 991px) {
    body {
        background-image: linear-gradient(135deg, #FF4D6D, #C9184A, #8B0000);
        
    }

    section#login {
        display: flex;
        height: 350px;
        flex-direction: row;
        width: 90vw;
        margin: 0 auto;
        gap: 20px;
    }

    #imagem {
        width: 30%;
        min-height: 350px;
        order: 0; /* mantém a imagem à esquerda */
    }

    #formulario {
        width: 70%;
        padding: 30px;
        order: 1;
    }
}

/* DESKTOP */
@media screen and (min-width: 992px) {
    body {
        background-image: linear-gradient(135deg, #FF4D6D, #C9184A, #8B0000);
        margin: 0;      /* REMOVE ESPAÇO EM BAIXO */
        min-height: 100vh; /* GARANTE QUE OCUPA TODA A TELA */

    }

    section#login {
        display: flex;
        flex-direction: row;
        width: 950px;
        height: 400px;
        margin:  auto;
        gap: 20px;
        align-items: stretch; /* força imagem e formulário a ter mesma altura */
    }

    #imagem {
        width: 50%;
        min-height: 400px;
        order: 1;
        display: block; /* evita espaço extra abaixo da imagem */
        object-fit: cover; /* garante que preencha o container */
    }

    #formulario {
        width: 50%;
        padding: 40px;
        order: 0;
    }
}