/*==========================================================
                ¿POR QUÉ ELEGIR ITEMCOL?
==========================================================*/

.porque{

    position:relative;

    padding:130px 8%;

    background:linear-gradient(
    180deg,
    #F4F7FA,
    #FFFFFF,
    #F4F7FA);

    overflow:hidden;

}

/*==================================
        NUMERO DE FONDO
==================================*/

.porque::before{

    content:"05";

    position:absolute;

    right:4%;

    top:20px;

    font-size:260px;

    font-weight:900;

    color:rgba(47,69,155,.05);

}

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

.porque-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

}

/*==================================
        TARJETAS
==================================*/

.razon{

    background:white;

    border-radius:20px;

    padding:40px;

    text-align:center;

    transition:.45s;

    box-shadow:var(--shadow1);

    position:relative;

    overflow:hidden;

}

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

.razon:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow2);

}

/*==================================
        LINEA SUPERIOR
==================================*/

.razon::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:6px;

    background:linear-gradient(
    90deg,
    var(--azul),
    var(--amarillo));

    transition:.5s;

}

.razon:hover::before{

    width:100%;

}

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

.razon i{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    background:linear-gradient(
    135deg,
    var(--azul),
    var(--azul-claro));

    color:white;

    font-size:38px;

    margin-bottom:30px;

    transition:.6s;

}

.razon:hover i{

    transform:rotate(360deg) scale(1.1);

    background:linear-gradient(
    135deg,
    var(--amarillo),
    var(--naranja));

}

/*==================================
        TITULO
==================================*/

.razon h3{

    color:var(--titulo);

    font-size:1.5rem;

    margin-bottom:20px;

}

/*==================================
        TEXTO
==================================*/

.razon p{

    color:var(--texto);

    line-height:1.9;

}

/*==================================
        EFECTO DE LUZ
==================================*/

.razon::after{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:radial-gradient(

    rgba(244,190,34,.18),

    transparent 70%

    );

    top:-150px;

    right:-150px;

    opacity:0;

    transition:.6s;

}

.razon:hover::after{

    opacity:1;

}

/*===============================
      CELULARES
===============================*/

@media (max-width:576px){

}