.contenedoracceso{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:calc(100vh - 240px);
    padding:26px 0 22px
}

.tarjetaacceso{
    width:min(470px,100%);
    background:#ffffff;
    border:1px solid #e7eaf0;
    border-radius:16px;
    padding:34px 34px 30px;
    box-shadow:0 18px 42px rgba(11,29,74,.10);
    position:relative;
    overflow:hidden
}

.tarjetaacceso::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:8px;
    background:#771239
}

.tarjetaaccesoinstitucional::before{
    background:#771239
}

.cabeceraacceso{
    margin-bottom:24px;
    text-align:center
}

.insigniaacceso{
    display:inline-flex;
    padding:10px 16px;
    border-radius:999px;
    background:#eef3ff;
    color:#18316f;
    font-size:13px;
    font-weight:700;
    margin-bottom:14px
}

.cabeceraacceso h2{
    margin:0 0 8px;
    color:#0b1d4a;
    font-size:24px;
    line-height:1.1
}

.cabeceraacceso p{
    margin:0;
    color:#5b6577;
    line-height:1.5;
    font-size:15px
}

.formularioacceso{
    display:grid;
    gap:18px
}

.botonbloque{
    width:100%;
    justify-content:center
}

.botonacceder{
    min-height:50px;
    background:#771239;
    border-radius:999px;
    font-size:17px
}

.botonacceder:hover{
    background:#63102f
}

.botongoogle{
    background:#ffffff;
    color:#3f3f46;
    border:1px solid #d7dce5;
    box-shadow:none;
    min-height:54px;
    border-radius:8px;
    gap:14px;
    font-size:17px
}

.botongoogle:hover{
    background:#f7f9fd;
    color:#771239;
    border-color:#cfd6e2
}

.googlemarca{
    color:#4285f4;
    font-weight:800;
    font-size:22px;
    line-height:1
}

.accesoayuda,
.accesodominio{
    margin:18px 0 0;
    text-align:center;
    color:#6b7280;
    font-size:15px;
    line-height:1.45
}

.accesoayuda a,
.accesodominio strong{
    color:#771239;
    font-weight:800
}

.tarjetaaccesoinstitucional .cabeceraacceso h2{
    color:#771239
}

.tarjetaaccesoinstitucional .accesodominio strong{
    color:#6b6b6b
}

.alertacorrecta{
    margin-bottom:18px;
    padding:14px 16px;
    border-radius:8px;
    background:#ecfdf3;
    color:#166534;
    font-size:14px;
    font-weight:600
}

.alertaerror{
    margin-bottom:18px;
    padding:14px 16px;
    border-radius:8px;
    background:#fff1f2;
    color:#9f1239;
    font-size:14px;
    font-weight:600
}

@media (max-width:640px){
    .contenedoracceso{
        min-height:auto;
        padding:18px 0 12px
    }

    .tarjetaacceso{
        padding:30px 22px 24px
    }

    .cabeceraacceso h2{
        font-size:23px
    }

    .cabeceraacceso p{
        font-size:15px
    }
}