/* =====================================================
   BENEFICIOS PRODUCTO
===================================================== */

.product-benefits{
    background:#f7f7f7;
    border-radius:12px;
    padding:18px;
    margin:15px 0;
}

/* =====================================================
   DESKTOP
===================================================== */

.benefits-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.benefit-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    position:relative;

    min-height:130px;
    padding-top:4px;
}

/* Separadores */

.benefit-item:not(:last-child)::after{
    content:'';
    position:absolute;
    right:-8px;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:55px;
    background:#e5e5e5;
}

/* =====================================================
   ICONOS
===================================================== */

.foot-icons-ico{
    width:46px;
    height:46px;
    display:block;
    flex-shrink:0;

    margin-bottom:12px;

    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
}

.ico-atencion-cliente{
    background-image:url('/img/ate_clientes.png');
}

.ico-pago-online{
    background-image:url('/img/pago_online.png');
}

.ico-devolucion{
    background-image:url('/img/dev_garantizada.png');
}

.ico-envio{
    background-image:url('/img/envio_24.png');
}

/* =====================================================
   TEXTOS
===================================================== */

.benefit-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    width:100%;
}

.benefit-title{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:32px;

    font-size:12px;
    font-weight:700;
    color:#444;
    line-height:1.2;
    letter-spacing:.3px;

    margin-bottom:6px;
}

.benefit-text{
    min-height:14px;

    font-size:11px;
    color:#777;
    line-height:1.2;
    text-decoration:none;
}

.benefit-text:hover{
    color:#555;
    text-decoration:none;
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width:991px){

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

    .benefit-item{
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;
        text-align:left;

        background:#fff;
        border:1px solid #ececec;
        border-radius:8px;
        padding:12px;

        min-height:auto;
    }

    .benefit-item::after{
        display:none;
    }

    .foot-icons-ico{
        width:40px;
        height:40px;
        margin-bottom:0;
        margin-right:10px;
    }

    .benefit-content{
        align-items:flex-start;
    }

    .benefit-title{
        min-height:auto;
        margin-bottom:2px;
        justify-content:flex-start;
        font-size:12px;
    }

    .benefit-text{
        min-height:auto;
        font-size:11px;
    }

}

/* =====================================================
   MOVIL
===================================================== */

@media (max-width:576px){

    .product-benefits{
        padding:12px;
    }

    .benefits-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .benefit-item{
        padding:10px 12px;
    }

    .foot-icons-ico{
        width:38px;
        height:38px;
    }

    .benefit-title{
        font-size:12px;
    }

    .benefit-text{
        font-size:11px;
    }

}