/* =========================
   LOGIN
========================= */

.alpaca-login-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:80px 20px;
}

.alpaca-login-card{
    background:#fff;
    width:100%;
    max-width:700px;
    border:1px solid #e6e6e6;
    padding:70px;
    text-align:center;
}

.alpaca-login-label{
    color:#9CA3AF;
    font-size:14px;
    letter-spacing:3px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:30px;
}

.alpaca-login-title{
    font-size:58px;
    font-weight:800;
    margin:0 0 25px;
    color:#06393C;
    text-transform:uppercase;
    line-height:1;
}

.alpaca-login-text{
    max-width:500px;
    margin:0 auto 40px;
    color:#6B7280;
    font-size:22px;
    line-height:1.7;
}

.alpaca-google-button{
    max-width:520px !important;
    margin:0 auto !important;
    display:flex !important;
    justify-content:center !important;
}

.alpaca-google-button .nsl-container{
    width:100% !important;
    text-align:center !important;
}

.alpaca-google-button .nsl-container-buttons{
    display:flex !important;
    justify-content:center !important;
}

.alpaca-google-button .nsl-container-buttons a{
    width:100% !important;
    max-width:520px !important;
}

.alpaca-google-button .nsl-button{
    width:100% !important;
}

.alpaca-login-footer{
    margin-top:35px;
    color:#9CA3AF;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.alpaca-login-footer a{
    color:#9CA3AF;
    text-decoration:underline;
}

.alpaca-google-button .button,
.alpaca-google-button button,
.alpaca-google-button a{

    width:100%;
    min-height:74px;

    display:flex;
    justify-content:center;
    align-items:center;

    gap:14px;

    border:2px solid #06393C;
    background:#fff;

    color:#06393C !important;

    font-size:20px;
    font-weight:700;

    text-transform:uppercase;

    transition:.25s ease;
}

.alpaca-google-button .button:hover,
.alpaca-google-button button:hover,
.alpaca-google-button a:hover{

    transform:translateY(-2px);
}

/* =========================
   RESPONSIVE TABLET
========================= */

@media (max-width: 992px){

    .alpaca-login-card{

        max-width:600px;

        padding:50px 40px;
    }

    .alpaca-login-title{

        font-size:52px;
    }

    .alpaca-login-text{

        font-size:20px;
    }
}

/* =========================
   RESPONSIVE MÓVIL
========================= */

@media (max-width: 767px){

    .alpaca-login-wrapper{

        padding:30px 15px;
    }

    .alpaca-login-card{

        padding:40px 25px;

        max-width:100%;
    }

    .alpaca-login-label{

        font-size:12px;

        letter-spacing:4px;

        line-height:1.8;

        margin-bottom:20px;
    }

    .alpaca-login-title{

        font-size:clamp(42px, 12vw, 64px);

        line-height:.95;

        margin-bottom:20px;

        word-break:normal;

        overflow-wrap:normal;
    }

    .alpaca-login-text{

        font-size:18px;

        line-height:1.7;

        margin-bottom:30px;

        max-width:100%;
    }

    .alpaca-google-button{

        max-width:100% !important;
    }

    .alpaca-google-button .nsl-container{

        width:100% !important;
    }

    .alpaca-google-button .nsl-container-buttons{

        width:100% !important;
    }

    .alpaca-google-button .nsl-container-buttons a{

        width:100% !important;

        max-width:100% !important;
    }

    .alpaca-google-button .button,
    .alpaca-google-button button,
    .alpaca-google-button a{

        width:100% !important;

        min-height:64px;

        font-size:16px;

        padding:0 15px;

        gap:10px;
    }

    .alpaca-login-footer{

        font-size:11px;

        line-height:1.8;

        letter-spacing:.5px;

        margin-top:25px;
    }

    .alpaca-back-home{

        margin-top:20px;
    }
}

/* =========================
   MÓVILES PEQUEÑOS
========================= */

@media (max-width: 480px){

    .alpaca-login-card{

        padding:35px 20px;
    }

    .alpaca-login-title{

        font-size:clamp(38px, 11vw, 52px);
    }

    .alpaca-login-text{

        font-size:16px;
    }

    .alpaca-google-button .button,
    .alpaca-google-button button,
    .alpaca-google-button a{

        font-size:15px;
    }
}

/* PAGE LOGIN WORDPRESS */

body.login{
    background:#bddad5 !important;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
}

body.login #loginform,
body.login #nav,
body.login #backtoblog,
body.login .language-switcher,
body.login .login h1 {
    display:none !important;
}

body.login #login {
    width:100% !important;
    max-width:700px !important;
    padding:0 !important;
    margin:auto !important;
}

.alpaca-back-home{
    text-align:center;
    margin-top:30px !important;
}

.alpaca-back-home a{
    color:#000 !important;
    text-decoration:none;
    font-size:18px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
    transition:.25s ease;
}

.alpaca-back-home a:hover{
    opacity:.7;
    text-decoration:none;
}
