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

.servicios{

    background:#FFF;

}

.servicios__contenido{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

/*======================================
=             LISTA
======================================*/

.servicios__lista{

    display:flex;

    flex-direction:column;

    gap:25px;

}

/*======================================
=             TARJETA
======================================*/

.servicio{

    display:flex;

    gap:20px;

    padding:25px;

    background:var(--color-fondo-suave);

    border-radius:18px;

    border-left:5px solid var(--color-secundario);

    transition:.3s;

}

.servicio:hover{

    transform:translateX(8px);

    box-shadow:var(--sombra-suave);

}

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

.servicio__icono{

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    background:#FFF;

    border-radius:50%;

}

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

.servicio__texto h3{

    color:var(--color-primario);

    margin-bottom:10px;

}

.servicio__texto p{

    color:var(--color-texto-secundario);

    margin:0;

}

/*======================================
=             IMAGEN
======================================*/

.servicios__imagen img{

    width:100%;

    border-radius:20px;

    box-shadow:var(--sombra-suave);

}






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

/*======================================
TABLETS
======================================*/

@media (max-width:1024px){

    .servicios__contenido{

        gap:45px;

    }

    .servicios__imagen img{

        width:100%;

    }

}


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

@media (max-width:768px){

    .servicios__contenido{

        grid-template-columns:1fr;
        gap:50px;

    }
	.servicio__texto p{text-align:left;}
	.servicio__texto li{text-align:left;}

    .servicios__lista{

        order:2;

    }

    .servicios__imagen{

        order:1;
        text-align:center;

    }

    .servicios__imagen img{

        max-width:500px;
        margin:auto;

    }

    .servicio{

        padding:22px;

    }

}


/*======================================
CELULARES PEQUEÑOS
======================================*/

@media (max-width:480px){

    .servicios__contenido{

        gap:40px;

    }

    .servicio{

        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:15px;

    }

    .servicio__icono{

        width:55px;
        height:55px;
        font-size:1.8rem;

    }

    .servicio__texto h3{

        font-size:1.2rem;

    }

}