/*======================================================
                    BENEFICIOS
======================================================*/

.beneficios{

    background:#F8F5F0;

    padding:110px 0;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-family:var(--fuente-titulo);

    font-size:3.2rem;

    color:#222;

    font-weight:600;

}

.divider{

    width:120px;

    height:2px;

    background:var(--color-dorado);

    margin:22px auto 0;

    position:relative;

}

.divider::before{

    content:"";

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--color-dorado);

    top:-5px;

    left:50%;

    transform:translateX(-50%);

}

.beneficios-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.beneficio{

    position:relative;

    background:#FFF;

    padding:55px 35px;

    text-align:center;

    overflow:hidden;

    transition:all .35s ease;

    border-radius:6px;

    border-bottom:4px solid transparent;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.beneficio:hover{

    transform:translateY(-10px);

    border-bottom:4px solid var(--color-dorado);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.beneficio i{

    position:relative;

    z-index:2;

    font-size:2.9rem;

    color:var(--color-dorado);

    margin-bottom:28px;

    transition:.35s;

}

.beneficio:hover i{

    transform:scale(1.15);

}

.beneficio h3{

    font-family:var(--fuente-titulo);

    font-size:1.8rem;

    color:#222;

    margin-bottom:18px;

}

.beneficio p{

    color:#666;

    line-height:1.8;

    font-size:.95rem;

}
/*=============================================
        CÍRCULO DECORATIVO
=============================================*/

.beneficio::before{

    content:"";

    position:absolute;

    width:95px;

    height:95px;

    border-radius:50%;

    background:rgba(200,164,77,.08);

    left:50%;

    top:35px;

    transform:translateX(-50%);

    transition:.35s;

}

.beneficio:hover::before{

    transform:translateX(-50%) scale(1.18);

}
