.main-home {
    flex: 1;
    position: relative;
    padding: var(--spacing-lg);
    width: 100%;
    animation: fadeInUp 0.4s ease;
    background-image: url('img/fondo-llave.svg');
    background-size: cover;
    background-color: rgba(255, 255, 255, 0.6);
}

.fondo-llaveMX {
    position: relative;
    overflow: hidden;
}

.img-fondo-gen {
    position: absolute;
    z-index: 9;
    bottom: 0;
    background-image: url('img/gen.png');
    width: 496px;
    height: 329px;
    background-size: cover;
    background-position: right;
    left: 4%;
}

.container-llaveMX {
    display: flex;
    z-index: 10;
    flex-wrap: wrap;
    justify-content: center;
    font: bold noto-sans !important;
    max-width: 1170px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    margin: 80px auto 110px;
}

    .container-llaveMX .left-section {
        flex: 1;
        padding: 0px 30px 30px 0px;
        align-items: center;
    }



    .container-llaveMX .boxLogin {
        width: 554px;
    }

        .container-llaveMX .boxLogin h1 {
            color: #002F2A;
            font-family: "Noto Sans", sans-serif !important;
            font-optical-sizing: auto !important;
            font-weight: bold !important;
            font-style: normal !important;
            font-variation-settings: "wdth" 100 !important;
            margin-bottom: 40px;
            line-height: normal;
            font-size: 40px;
        }

    .container-llaveMX .left-section h1 {
        display: flex;
        font-size: 40px;
        color: #a57f2c;
        font-family: "Noto Sans", sans-serif !important;
        font-optical-sizing: auto !important;
        font-weight: bold !important;
        font-style: normal !important;
        font-variation-settings: "wdth" 100 !important;
        margin-bottom: 20px;
        line-height: normal;
    }

    .container-llaveMX .right-section {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex: 1;
        align-items: center;
        box-shadow: 0px 4px 4px 0px #00000040;
        -webkit-box-shadow: 0px 4px 4px 0px #00000040;
        -moz-box-shadow: 0px 4px 4px 0px #00000040;
        border-radius: 10px;
        background-color: #fff;
        padding: 32px;
    }

        .container-llaveMX .right-section img {
            height: 56px;
            /* min-width: 38px; */
            margin-top: 0px;
            margin-bottom: 24px;
        }

    .container-llaveMX .left-section img {
        height: 65px;
    }

    .container-llaveMX .login-button, .container-llaveMX .create-button {
        display: inherit;
        padding: 6px;
        margin: 0px 0;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        font-family: "Noto Sans", sans-serif !important;
        font-optical-sizing: auto !important;
        font-style: normal !important;
        font-variation-settings: "wdth" 100 !important;
        text-align: center;
        text-decoration: none;
    }

    .container-llaveMX .login-button {
        background-color: #002622;
        color: white;
        width: 100%;
    }

    .container-llaveMX .acciones {
        width: 100%;
        padding: 0px;
        margin: 0px;
        font-family: "Noto Sans", sans-serif !important;
    }

    .container-llaveMX .col-6 {
        width: 50%;
        float: left;
        position: relative;
        min-height: 1px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .container-llaveMX .create-button {
        background-color: white;
        color: #002622;
        border: 1px solid #002622 !important;
        border-radius: 5px;
        width: 100%;
        margin: 0px;
    }

@media (max-width: 1183px) {
    .img-fondo-gen {
        width: 387px;
        height: 257px;
    }
}

@media (max-width: 1040px) {
    .container-llaveMX {
        display: block;
        max-width: 643px;
        margin: 65px auto 85px;
    }

        .container-llaveMX .boxLogin {
            max-width: 554px;
            width: 100%;
            margin: 0 auto;
        }

            .container-llaveMX .boxLogin h1 {
                font-size: 30px;
            }

    .img-fondo-gen {
        display: none;
    }
}

@media (max-width: 640px) {
    body {
        padding: 0 !important;
    }

    .container-llaveMX {
        margin: 55px auto 55px;
    }

        .container-llaveMX .left-section h1 {
            font-size: 35px;
        }

        .container-llaveMX .col-6 {
            width: 100%;
            max-width: 100%;
            text-align: center;
        }

        .container-llaveMX .login-button {
            margin-bottom: 24px;
        }

        .container-llaveMX .login-button, .container-llaveMX .create-button {
            display: inline-block;
        }
}

@media (max-width: 480px) {
    .container-llaveMX {
        padding: 0;
    }

        .container-llaveMX .left-section h1 {
            font-size: 25px;
        }

        .container-llaveMX .login-button, .container-llaveMX .create-button {
            width: 100%;
        }
}