/*======================================================
                    COMPROMISO
======================================================*/

.compromiso{

    background:#0B0B0B;

    padding:70px 0 80px;

    position:relative;

}

/*======================
        TÍTULO
=======================*/

.dark h2{

    color:#FFF;

}

.compromiso .section-header{

    margin-bottom:60px;

}

/*======================
        GRID
=======================*/

.compromiso-grid{

    display:grid;

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

    gap:15px;

    align-items:start;

}

/*======================
        ITEM
=======================*/

.compromiso-item{

    position:relative;

    text-align:center;

    padding:25px 20px;

    transition:all .35s ease;

}

/*======================
    CÍRCULO DECORATIVO
=======================*/

.compromiso-item::before{

    content:"";

    position:absolute;

    width:90px;

    height:90px;

    border-radius:50%;

    background:rgba(255,255,255,.03);

    left:50%;

    top:0;

    transform:translateX(-50%);

    transition:.35s ease;

}

/*======================
    LÍNEAS DIVISORIAS
=======================*/

.compromiso-item:not(:last-child)::after{

    content:"";

    position:absolute;

    right:-8px;

    top:25%;

    width:1px;

    height:50%;

    background:rgba(200,164,77,.20);

}

/*======================
        ICONO
=======================*/

.compromiso-item i{

    position:relative;

    z-index:2;

    font-size:3.5rem;

    color:var(--color-dorado);

    margin-bottom:28px;

    transition:.35s ease;

}

/*======================
        TÍTULO
=======================*/

.compromiso-item h3{

    position:relative;

    z-index:2;

    font-family:var(--fuente-titulo);

    color:#FFF;

    font-size:1.45rem;

    font-weight:600;

    line-height:1.45;

    max-width:220px;

    margin:0 auto;

}

/*======================
        HOVER
=======================*/

.compromiso-item:hover{

    transform:translateY(-8px);

}

.compromiso-item:hover::before{

    transform:translateX(-50%) scale(1.10);

    background:rgba(200,164,77,.08);

}

.compromiso-item:hover i{

    color:var(--color-dorado-claro);

    transform:scale(1.08);

    text-shadow:0 0 18px rgba(200,164,77,.30);

}

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

@media(max-width:992px){

    .compromiso-grid{

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

        gap:50px;

    }

    .compromiso-item:nth-child(2)::after{

        display:none;

    }

}

@media(max-width:768px){

    .compromiso{

        padding:60px 0;

    }

    .compromiso-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .compromiso-item::after{

        display:none;

    }

    .compromiso-item h3{

        max-width:100%;

    }

}