@charset "UTF-8";

/* =========================
   PAGE
========================= */

.login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
}

.login-bg{
    position:fixed;
    inset:0;
    z-index:-2;

    background:
        radial-gradient(circle at 20% 20%, rgba(56,189,248,.18), transparent 30%),
        radial-gradient(circle at 80% 15%, rgba(37,99,235,.22), transparent 35%),
        radial-gradient(circle at 50% 100%, rgba(56,189,248,.12), transparent 40%);
}

.login-bg::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);

    background-size:40px 40px;
}

/* =========================
   CONTAINER
========================= */

.login-container{
    width:100%;
    max-width:1200px;
    padding:40px 20px;
    display:flex;
    justify-content:center;
}

.login-box{
    width:100%;
    max-width:520px;

    padding:40px;

    border-radius:32px;

    background:
        radial-gradient(circle at top left,
        rgba(56,189,248,.12),
        transparent 30%),
        rgba(255,255,255,.035);

    border:1px solid rgba(56,189,248,.16);

    backdrop-filter:blur(20px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.4);
}

/* =========================
   TOP
========================= */

.login-top{
    margin-bottom:28px;
}

.login-logo{
    display:inline-block;

    color:white;

    font-size:18px;
    font-weight:900;
    letter-spacing:.08em;

    margin-bottom:24px;
}

.login-logo span{
    color:var(--blue);
    font-size:12px;
    letter-spacing:.18em;
}

.login-top h1{
    font-family:"Cormorant Garamond", serif;

    font-size:4rem;
    line-height:.9;

    letter-spacing:-.04em;

    color:white;

    margin-top:10px;
}

.login-desc{
    color:var(--muted);

    margin-top:16px;

    line-height:1.7;
}

/* =========================
   FORM
========================= */

.login-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.login-form .campo{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.login-form .campo label{
    color:var(--blue);

    font-size:12px;
    font-weight:900;

    letter-spacing:.12em;
    text-transform:uppercase;
}

.login-form input{
    width:100%;

    min-height:54px;

    padding:0 16px;

    border-radius:16px;

    border:1px solid rgba(148,163,184,.18);

    background:rgba(2,6,23,.7);

    color:white;

    outline:none;

    transition:.2s;
}

.login-form input::placeholder{
    color:rgba(148,163,184,.6);
}

.login-form input:focus{
    border-color:rgba(56,189,248,.6);

    box-shadow:
        0 0 0 4px rgba(56,189,248,.08);
}

.btn-login{
    width:100%;

    min-height:54px;

    border:none;

    border-radius:999px;

    margin-top:10px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            #60a5fa
        );

    color:#020617;

    font-weight:900;

    cursor:pointer;

    transition:.25s;
}

.btn-login:hover{
    transform:translateY(-2px);

    box-shadow:
        0 0 30px rgba(56,189,248,.25);
}

/* =========================
   FOOTER
========================= */

.login-footer{
    margin-top:24px;

    text-align:center;
}

.login-footer a{
    color:var(--muted);

    font-size:14px;

    transition:.2s;
}

.login-footer a:hover{
    color:white;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .login-box{
        padding:28px 22px;
    }

    .login-top h1{
        font-size:3rem;
    }

}

@media(max-width:480px){

    .login-container{
        padding:16px;
    }

    .login-box{
        border-radius:24px;
    }

    .login-top h1{
        font-size:2.6rem;
    }

}