.valores{
    position:relative;
    padding:120px 8%;
    background:linear-gradient(
    180deg,
    #FFFFFF,
    #F4F7FA,
    #FFFFFF);
    overflow:hidden;
}

.valores::before{
    content:"06";
    position:absolute;
    right:4%;
    top:20px;
    font-size:260px;
    font-weight:900;
    color:rgba(47,69,155,.05);
}

.contenedor-valores{
    position:relative;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
}

.valor{
    background:#FFF;
    border-radius:20px;
    padding:35px 20px;
    text-align:center;
    box-shadow:var(--shadow1);
    transition:.45s;
    position:relative;
    overflow:hidden;
}

.valor:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow2);
}

.valor-imagen{
    width:90px;
    height:90px;
    margin:0 auto 20px;
    border-radius:50%;
    background:var(--gris);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    transition:.5s;
}

.valor:hover .valor-imagen{
    transform:scale(1.08);
    background:#EAF0FB;
}

.valor-imagen img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.valor-imagen i{
    font-size:32px;
    color:var(--azul);
}

.valor h3{
    color:var(--titulo);
    font-size:1.15rem;
    text-transform:capitalize;
}

.valor p{
    color:var(--texto);
    font-size:.85rem;
    margin-top:8px;
    line-height:1.5;
}

.valor-especial{
    background:linear-gradient(
    135deg,
    var(--azul),
    var(--azul-claro));
}

.valor-especial .valor-imagen{
    background:rgba(255,255,255,.15);
}

.valor-especial .valor-imagen i{
    color:#FFF;
}

.valor-especial h3,
.valor-especial p{
    color:#FFF;
}

.subtexto{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-align:center;
    color:var(--texto);
    margin-top:50px;
    padding-top:30px;
    border-top:1px solid var(--borde);
    line-height:1.6;
}

.subtexto i{
    color:var(--amarillo);
    font-size:20px;
    flex-shrink:0;
}

@media (max-width:576px){
    .valores::before{
        font-size:140px;
    }
    .contenedor-valores{
        grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
        gap:20px;
    }
    .valor{
        padding:25px 15px;
    }
    .subtexto{
        flex-direction:column;
        gap:8px;
    }
}