* {

    box-sizing: border-box;

}



html,

body {

    margin: 0;

    width: 100%;

    min-height: 100%;

    font-family: "Segoe UI", Arial, sans-serif;

}



body {

    background:

        linear-gradient(

            rgba(5, 35, 70, 0.20),

            rgba(5, 35, 70, 0.48)

        ),

        url("/static/img/fondo.jpg") center center / cover fixed no-repeat;

    color: #12365d;

}



.page {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}



.top {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    padding: 28px 5%;

}



.logo-adieeds {

    width: 285px;

    max-width: 32vw;

    height: auto;

    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35));

}



.versiculo {

    display: flex;

    align-items: flex-start;

    max-width: 510px;

    color: white;

    margin-top: 12px;

}



.versiculo .line {

    width: 3px;

    min-height: 125px;

    background: #0b73c9;

    margin-right: 20px;

}



.versiculo p {

    margin: 0 0 10px;

    font-size: 19px;

    line-height: 1.45;

    font-style: italic;

    text-shadow: 0 2px 5px rgba(0,0,0,0.5);

}



.versiculo strong {

    display: block;

    text-align: right;

    font-size: 17px;

}



main {

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

}



.login-card {

    width: min(720px, 94vw);

    padding: 42px 55px;

    border-radius: 24px;

    background: rgba(255,255,255,0.95);

    box-shadow:

        0 25px 60px rgba(0,0,0,0.30),

        0 4px 15px rgba(0,0,0,0.12);

    text-align: center;

    backdrop-filter: blur(8px);

}



.welcome {

    letter-spacing: 5px;

    font-size: 14px;

    font-weight: 700;

    color: #60758d;

    margin-bottom: 10px;

}



h1 {

    margin: 0;

    color: #123b69;

    font-size: clamp(38px, 5vw, 54px);

}



.subtitle {

    margin-top: 7px;

    font-size: 23px;

    color: #506a84;

}



.description {

    max-width: 580px;

    margin: 22px auto 30px;

    color: #52677d;

    font-size: 17px;

    line-height: 1.55;

}



.microsoft-button {

    width: 100%;

    min-height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 17px;

    border-radius: 10px;

    background: #0874d9;

    color: white;

    text-decoration: none;

    font-size: 19px;

    font-weight: 600;

    box-shadow: 0 8px 20px rgba(0,70,150,0.28);

    transition: 0.2s ease;

}



.microsoft-button:hover {

    background: #075fb2;

    transform: translateY(-2px);

}



.ms-icon {

    width: 22px;

    height: 22px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: 1fr 1fr;

    gap: 2px;

}



.ms-icon span:nth-child(1) { background: #f25022; }

.ms-icon span:nth-child(2) { background: #7fba00; }

.ms-icon span:nth-child(3) { background: #00a4ef; }

.ms-icon span:nth-child(4) { background: #ffb900; }



.arrow {

    font-size: 27px;

    margin-left: 5px;

}



.benefits {

    margin-top: 32px;

    padding-top: 25px;

    border-top: 1px solid #d7dfe7;

    display: flex;

    justify-content: space-around;

}



.benefit {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: #425a73;

    font-size: 15px;

}



.benefit + .benefit {

    border-left: 1px solid #d7dfe7;

}



.icon {

    font-size: 23px;

}



footer {

    text-align: center;

    color: white;

    padding: 12px 20px 24px;

    text-shadow: 0 2px 4px rgba(0,0,0,0.6);

}



footer div {

    width: 420px;

    max-width: 80%;

    height: 1px;

    margin: 0 auto 13px;

    background: rgba(255,255,255,0.55);

}



footer p {

    margin: 4px;

    font-size: 14px;

}



@media (max-width: 800px) {



    .top {

        flex-direction: column;

        align-items: center;

        gap: 18px;

    }



    .logo-adieeds {

        width: 230px;

        max-width: 70vw;

    }



    .versiculo {

        max-width: 92vw;

    }



    .versiculo p {

        font-size: 16px;

    }



    .versiculo .line {

        min-height: 90px;

    }



    .login-card {

        padding: 35px 24px;

    }



    .benefits {

        flex-direction: column;

        gap: 18px;

    }



    .benefit + .benefit {

        border-left: 0;

        border-top: 1px solid #d7dfe7;

        padding-top: 18px;

    }



    .microsoft-button {

        font-size: 16px;

    }

}