.kpis {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 0 32px 0;
}

.kpis-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr); 
    gap:24px;
    width: 100%;
}

.tarjeta-kpi {
    display:flex;
    align-items:center;
    gap:16px;
    min-width:0;
    padding:16px;
    border-radius:16px;
    border:1px solid #ddd6fe;
    background:#f5f3ff;
}

.icono-kpi {
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    flex-shrink:0;
    background:#d6cefa;
    color:#535353;
}

.icono-kpi i{
    font-size:1.8rem;
}

.info-kpi {
    display:flex;
    flex-direction:column;
}

.numero-kpi{
    font-size:2rem;
    font-weight:700;
    line-height:1;
    color: var(--color-azul-f-1);
}

.etiqueta-kpi{
    font-size:.90rem;
    color:var(--color-gris-2);
}

.tarjeta-kpi:first-child{
    background:#eff6ff;
    border-color:#bfdbfe;
}

.tarjeta-kpi:first-child .icono-kpi {
    background:#c1d8f7;
    color:#2563eb;
}

.tarjeta-kpi{
    transition:.25s ease;
}

.tarjeta-kpi:hover{
    transform:translateY(-3px);
}

@media ((min-width:769px) and (max-width: 999px)) {

    .kpis-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

@media (max-width:768px) {
    
    .kpis {
        margin: 0 0 24px 0;
    }

    .kpis-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .tarjeta-kpi{
        display:flex;
        flex-direction: column;
        align-items:center;
        justify-content: start;
        gap:10px;
        padding:10px;
    }

    .numero-kpi{
        font-size:1.9rem;
        text-align: center;
    }

    .etiqueta-kpi{
        font-size:.80rem;
        text-align: center;
    }

}