/* ==== BASE STYLES ==== */
.body-login {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden scroll;
}
.body-login::before {
    content: "";
    position: absolute;
    top: 80%;
    right: -150px;
    transform: translateY(-50%);
    width: 600px;
    height: 600px;
    background: url('../images/logo_solo.svg') center/contain no-repeat;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}

.fondo-logo-login {
    position: absolute;
    pointer-events: none;
    width: 100%;
    max-width: 70rem;
    top: 0;
    left: 0;
    z-index: 2;
}
.logo-login {
    position: absolute;
    pointer-events: none;
    width: 100%;
    max-width: 20rem;
    top: 8rem;
    left: 15rem;
    z-index: 2;
}

#section1-login {
    position: relative;
    z-index: 1;
    height: 86.5vh;
}

/* CARD */
.card-formulario1{
    border-radius: 1rem;
    max-width: 400px;
    width: 100%;
    padding: 2rem;
    border-color: #024522;
    background-color: transparent;
}
.card_registro {
    position: relative;
    max-width: 800px;
    width: 34rem;
    padding: 2rem;
    top: 0.5rem;
    left: -0.5rem;
    margin-bottom: 6rem; 
}
.btn-custom {
    background-color: #024522;
    color: white;
}
.btn-custom:hover {
    background-color: #01361a;
}
.leaf {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50px;
}
.pie-login {
    margin-top: 6rem;
}

/* ==== RESPONSIVE STYLES ==== */
@media (max-width: 767px) {
    .body-login {
        overflow: hidden scroll;
    }
    .fondo-logo-login {
        max-width: 35rem;
        z-index: -1;
    }
    .logo-login {
        max-width: 5rem;
        top: 1rem;
        left: 3rem;
        z-index: -1;
    }
    .card-formulario1{
        max-width: none;
        width: auto;
        padding: 4rem;
        top: 6rem;
    }
    .card_registro {
        max-width: none;
        width: auto;
        padding: 4rem;
        top: 6rem;
        left: auto;
        margin-bottom: 8rem; 
    }
    #container-nav {
        left: 9.5rem;
    }
    @media (min-width: 540px) {
        .logo-login {
            max-width: 7.5rem;
        }
        .card-formulario1{
            position: relative;
            top: 9rem;
            margin-bottom: 12rem; 
        }
        #container-nav {
            left: 14rem;
        }
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .body-login {
        overflow: hidden scroll;
    }
    .fondo-logo-login {
        max-width: 35rem;
    }
    .logo-login {
        max-width: 10rem;
        top: 4rem;
        left: 10rem;
    }
    .card-formulario1{
        max-width: 800px;
        width: 40rem;
        padding: 2rem;
        top: 15rem;
        left: -25rem;
    }
    .card_registro {
        max-width: 800px;
        width: 40rem;
        padding: 2rem;
        top: 15rem;
        left: -25rem;
        margin-bottom: 20rem; 
    }
    @media (min-width: 1024px) {
        .body-login {
            overflow: hidden scroll;
        }
        .card-formulario1{
            max-width: none;
            width: 35rem;
            padding: 4rem;
            top: 2rem;
            left: -12rem;
        }
        .card_registro {
            max-width: none;
            width: 35rem;
            padding: 4rem;
            top: 2rem;
            left: -12rem;
            margin-bottom: 20rem; 
        }
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .fondo-logo-login {
        max-width: 60rem;
    }
    .logo-login {
        top: 7rem;
        left: 10rem;
    }
    .card_registro {
        top: 2rem;
        left: -4rem;
    }
}