.servicios{
    position: relative;
    padding: 120px 8%;
    background:var(--fondo);
    overflow: hidden;
}

.servicios::before{
       content:"06";

    position:absolute;

    left:5%;

    top:20px;

    font-size:260px;

    font-weight:900;

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

    user-select:none;
}

.contenedor-servicios{
    display: grid;
   grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
    gap: 35px;
}

.servicio{

    position:relative;

    background:#FFFFFF;

    border-radius:20px;

    padding:45px 35px;

    box-shadow:var(--shadow1);

    overflow:hidden;

    transition:.45s;

    border-top:5px solid transparent;

}

.servicio:hover{
    transform: translateY(-12px);
    border-top: 5px solid var(--amarillo);
    box-shadow:var(--shadow2);
}

.servicio::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:6px;

    height:0;

    background:linear-gradient(

    var(--azul),

    var(--amarillo)

    );

    transition:.45s;

}

.servicio:hover::before{
    height: 100%;
}

.servicio i{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(
        135deg,
        var(--azul),
       var(--azul-claro)
    );
 color: white;
 font-size: 34px;
 margin-bottom: 30px;
 transition: .6s;
}

.servicio:hover i{
    transform: rotate(360deg) scale(1.1);
}

.servicio h3{
    color:var(--titulo);
    font-size: 1.4rem;
    margin-bottom: 18px;
}

.servicio p{
    color:var(--texto);
    line-height: 1.8;
}

.servicio a{
    display: inline-block;
    margin-top: 25px;
    color:var(--azul);
    font-weight: 600;
    transition: .3s;
}

.servicio a:hover{
    color:var(--naranja);
}


.servicio::after{

    content:"";

    position:absolute;

    width:200px;

    height:200px;

    background:

    radial-gradient(

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

    transparent 70%

    );

    top:-100px;

    right:-100px;

    opacity:0;

    transition:.6s;

}

.servicio:hover::after{

    opacity:1;

}

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

@media (max-width:576px){



/*=========================
        SERVICIOS
==========================*/

.servicios{

    padding:70px 5%;

}

.servicios::before{

    font-size:120px;

    top:20px;

}

.contenedor-servicios{

    display:grid;

    grid-template-columns:1fr;

    gap:20px;

}

.servicio{

    padding:30px 22px;

}

.servicio i{

    width:65px;

    height:65px;

    font-size:28px;

    margin-bottom:20px;

}

.servicio h3{

    font-size:1.2rem;

}

.servicio p{

    font-size:15px;

    line-height:1.7;

}

.servicio a{

    margin-top:18px;

    font-size:15px;

}

}