*{
        margin:0;          /* Remove margens */
        padding:0;         /* Remove espaçamentos internos */
        box-sizing:border-box;
        /* Faz width e height considerarem padding e border */
        
        font-family: Arial, Helvetica, sans-serif;
        /* Fonte padrão */
    }

    /* BODY Área visível da página*/
    body{

        background:#f3f4f6;
        /* Cor de fundo cinza clara */

        min-height:100vh;
        /* Ocupa toda altura da tela */

        display:flex;
        /* Ativa Flexbox */

        justify-content:center;
        /* Centraliza horizontalmente */

        align-items:center;
        /* Centraliza verticalmente */

        padding:20px;
        /* Espaço nas bordas da tela */
    }

    /* CARD DE LOGIN */
    .login-card{

        width:100%;
        /* Ocupa toda largura disponível */

        max-width:420px;
        /* Largura máxima */

        background:#fff;
        /* Fundo branco */

        border-radius:15px;
        /* Cantos arredondados */

        padding:40px;
        /* Espaçamento interno */

        box-shadow:0 4px 15px rgba(0,0,0,0.08);
        /* Sombra suave */
    }

    /* TÍTULO*/
    .title{
        text-align:center;
        /* Centraliza texto */

        color:#222;
        /* Cor escura */

        margin-bottom:10px;
    }

    /* SUBTÍTULO */
    .subtitle{

        text-align:center;

        color:#777;
        /* Cinza */

        font-size:14px;

        margin-bottom:30px;
    }

    /* GRUPO DE CAMPOS*/
    .form-group{
        margin-bottom:20px;
        /* Espaço entre campos */
    }

    /* LABEL */
    .form-group label{

        display:block;
        /* Faz ocupar linha inteira */

        margin-bottom:8px;

        font-size:14px;

        font-weight:bold;

        color:#444;
    }

    /* INPUTS */
    .form-control{

        width:100%;
        /* Campo ocupa toda largura */

        padding:14px;
        /* Espaço interno */

        border:1px solid #d1d5db;
        /* Borda cinza */

        border-radius:8px;
        /* Cantos arredondados */

        outline:none;
        /* Remove borda azul padrão */

        font-size:14px;

        transition:0.3s;
        /* Animação suave */
    }

    /* Quando clicar no input */
    .form-control:focus{

        border-color:#120fbd;
        /* Borda laranja */

        box-shadow:0 0 0 3px rgba(245,158,11,0.15);
        /* Brilho ao redor */
    }

    /*OPÇÕES Checkbox + Esqueceu senha */
    .options{

        display:flex;

        justify-content:space-between;
        /* Um item em cada lado */

        align-items:center;

        margin-bottom:25px;

        font-size:14px;
    }

    /* Link */
    .options a{

        text-decoration:none;
        /* Remove sublinhado */

        color: rgb(52, 52, 255);

        font-weight:bold;
    }

    /* Passar mouse */
    .options a:hover{
        text-decoration:underline;
    }

    /* BOTÃO*/
    .btn-login{

        width:100%;

        background:#012fc9;

        color:white;

        border:none;

        padding:14px;

        border-radius:8px;

        font-size:15px;

        font-weight:bold;

        cursor:pointer;
        /* Mostra mãozinha */

        transition:0.3s;
    }

    /* Hover = passar mouse */
    .btn-login:hover{
        background:#5e5b86;
    }


    /* CADASTRO */
    .register{

        text-align:center;

        color:#666;

        font-size:14px;
    }

    .register a{

        color: rgb(52, 52, 255);

        text-decoration:none;

        font-weight:bold;
    }

    /* RESPONSIVIDADE */
    @media(max-width:480px){

        .login-card{

            padding:30px 20px;
            /* Menor espaçamento em celulares */
        }

    }