.services-bar{

    background:#07131d;

    border-top:1px solid rgba(255,255,255,.06);

    border-bottom:1px solid rgba(255,255,255,.06);

    padding:45px 0;

}

.services-container{

    width:min(1400px,92%);

    margin:auto;

    display:grid;

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

    gap:40px;

}

.service-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    transition:.35s;

}

.service-item:hover{

    transform:translateY(-6px);

}

.service-icon{

    font-size:38px;

    color:#2bd48f;

    min-width:45px;

    transition:.35s;

}

.service-item:hover .service-icon{

    transform:scale(1.15);

    color:#5bf2b0;

}

.service-text h3{

    margin:0 0 10px;

    color:#fff;

    font-size:20px;

    font-weight:700;

    letter-spacing:.5px;

}

.service-text p{

    margin:0;

    color:rgba(255,255,255,.72);

    font-size:15px;

    line-height:1.6;

}

@media(max-width:1200px){

.services-container{

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

}

}

@media(max-width:768px){

.services-container{

grid-template-columns:1fr;

gap:30px;

}

.service-item{

justify-content:center;

text-align:center;

flex-direction:column;

align-items:center;

}

}

/*==================================================
=              ROBOT IA ANIMADO                     =
==================================================*/

.robot-svg{

    width:69px;   /* 10% más grande */

    height:69px;

    overflow:visible;

    transition:.3s;

}

.service-item:hover .robot-svg{

    transform:scale(1.08);

}

/* Antena */

.antenna{

    transform-origin:60px 32px;

}

.service-item:hover .antenna{

    animation:antennaMove .20s infinite alternate;

}

/* Boca */

.mouth-group{

    transform-origin:60px 71px;

}

.service-item:hover .mouth-group{

    animation:robotTalk .24s infinite alternate;

}

/* Ojos */

.eye-left,
.eye-right{

    transform-origin:center;

}

.service-item:hover .eye-left,
.service-item:hover .eye-right{

    animation:robotBlink 2.5s infinite;

}

/*====================*/

@keyframes robotTalk{

    0%{

        transform:scaleY(.4);

    }

    50%{

        transform:scaleY(2.8);

    }

    100%{

        transform:scaleY(.7);

    }

}
@keyframes robotBlink{

    0%,45%,100%{

        transform:scaleY(1);

    }

    48%{

        transform:scaleY(.08);

    }

}

@keyframes antennaMove{

    from{

        transform:rotate(-6deg);

    }

    to{

        transform:rotate(6deg);

    }

}

.robot-svg{

    width:72px;
    height:72px;

    overflow:visible;

    transition:.3s;

    position:relative;
    top:-8px;

}

.robot-icon{

    margin-right:10px;

}

/*==================================================
                CART SVG
==================================================*/

.cart-svg{

    width:66px;

    height:66px;

    overflow:visible;

    position:relative;

    top:-4px;

    transition:.3s;

}

.service-item:hover .cart-svg{

    transform:scale(1.08);

}

/*==========================
      RUEDAS
==========================*/

.wheel-left{

    transform-origin:48px 86px;

}

.wheel-right{

    transform-origin:80px 86px;

}

.service-item:hover .wheel-left{

    animation:wheelSpin .8s linear infinite;

}

.service-item:hover .wheel-right{

    animation:wheelSpin .8s linear infinite;

}

/*==========================
      CAJAS
==========================*/

.box1{

    opacity:0;

}

.box2{

    opacity:0;

}

.service-item:hover .box1{

    animation:dropBox1 1s infinite;

}

.service-item:hover .box2{

    animation:dropBox2 1s infinite;

}

/*==========================*/

@keyframes wheelSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes dropBox1{

    0%{

        opacity:0;

        transform:translateY(-18px);

    }

    20%{

        opacity:1;

    }

    45%{

        transform:translateY(28px);

    }

    55%{

        transform:translateY(24px);

    }

    100%{

        opacity:0;

        transform:translateY(24px);

    }

}

@keyframes dropBox2{

    0%{

        opacity:0;

        transform:translateY(-18px);

    }

    20%{

        opacity:0;

    }

    35%{

        opacity:1;

    }

    60%{

        transform:translateY(34px);

    }

    70%{

        transform:translateY(28px);

    }

    100%{

        opacity:0;

        transform:translateY(28px);

    }

}