/*==================================================
  neXsv | Módulo de Acceso
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Montserrat',sans-serif;
    background:#ffffff;
    color:#1D2A3A;
}

.access-page{

    max-width:1200px;
    margin:auto;
    padding:60px 25px;

    display:flex;
    flex-direction:column;
    align-items:center;

}

/*==================================================
LOGO
==================================================*/

.logo{

    width:180px;
    height:auto;

    margin-bottom:35px;

}

/*==================================================
HERO
==================================================*/

.hero{

    text-align:center;
    max-width:760px;

    margin-bottom:60px;

}

.hero h1{

    font-size:3.2rem;
    font-weight:800;

    color:#3155B6;

    margin-bottom:18px;

    letter-spacing:-1px;

}

.hero p{

    font-size:1.25rem;

    line-height:1.7;

    color:#667085;

    margin-bottom:22px;

}

.hero span{

    display:inline-block;

    padding:10px 24px;

    border-radius:40px;

    background:#EEF6FB;

    color:#3155B6;

    font-weight:600;

    font-size:.95rem;

}

/*==================================================
CARDS
==================================================*/

.cards{

    width:100%;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

    margin-bottom:45px;

}

.card{

    background:#ffffff;

    border:1px solid #EEF2F7;

    border-radius:24px;

    padding:45px;

    text-decoration:none;

    transition:.35s;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

    text-align:center;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 45px rgba(0,0,0,.08);

}

.icon{

    width:95px;
    height:95px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,#3155B6,#67C2D2);

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:38px;

    margin-bottom:25px;

}

.card h2{

    color:#3155B6;

    font-size:2rem;

    margin-bottom:18px;

}

.card p{

    color:#667085;

    line-height:1.7;

    margin-bottom:35px;

    min-height:70px;

}

.button{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    background:#F5C542;

    color:#1D2A3A;

    padding:16px;

    border-radius:14px;

    font-weight:700;

    transition:.30s;

}

.card:hover .button{

    background:#F0B90B;

}

/*==================================================
CTA
==================================================*/

.cta{

    width:100%;

    background:linear-gradient(90deg,#3155B6,#67C2D2);

    border-radius:24px;

    padding:35px 45px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:55px;

}

.cta h3{

    color:white;

    font-size:1.7rem;

    margin-bottom:8px;

}

.cta p{

    color:white;

    opacity:.95;

}

.cta a{

    text-decoration:none;

    background:#F5C542;

    color:#1D2A3A;

    padding:16px 30px;

    border-radius:14px;

    font-weight:700;

    transition:.3s;

}

.cta a:hover{

    transform:translateY(-2px);

}

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

footer{

    text-align:center;

    color:#8A94A6;

    font-size:.9rem;

    line-height:1.6;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:900px){

.cards{

    grid-template-columns:1fr;

}

.cta{

    flex-direction:column;

    gap:25px;

    text-align:center;

}

.hero h1{

    font-size:2.4rem;

}

.hero p{

    font-size:1.05rem;

}

.logo{

    width:150px;

}

}

@media(max-width:600px){

.access-page{

    padding:40px 18px;

}

.card{

    padding:35px 25px;

}

.icon{

    width:80px;
    height:80px;

    font-size:30px;

}

.card h2{

    font-size:1.6rem;

}

.button{

    font-size:.95rem;

}

.cta{

    padding:28px;

}

.cta h3{

    font-size:1.35rem;

}

}
/* ========================================
RECUPERAR CONTRASEÑA
======================================== */

.recover-link{

    margin:40px 0 10px;

    text-align:center;

}

.recover-link p{

    color:#6b7280;

    font-size:15px;

    line-height:1.8;

}

.recover-link a{

    color:var(--primary);

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.recover-link a:hover{

    opacity:.8;

    text-decoration:underline;

}

/*========================================
FOOTER TARJETA NEGOCIO
========================================*/

.card-footer{

    margin-top:22px;

    padding-top:18px;

    border-top:1px solid rgba(0,0,0,.08);

    font-size:14px;

    line-height:1.6;

    color:#6B7280;

}

.card-footer a{

    display:block;

    margin-top:8px;

    color:var(--primary);

    font-weight:700;

    text-decoration:none;

    transition:.25s;

}

.card-footer a:hover{

    text-decoration:underline;

}