.carrusel{
    width: 100%;
    height: 550px;
    margin: 0px auto 0;
    overflow: hidden;
}

.carrusel ul {
    display: flex;
    width: 1000%;
    height: auto;
    animation: cambio 35s infinite alternate ease-in-out;
}

.carrusel li {
    list-style: none;
    width: 10%;
}

.carrusel img {
    width: 100%;
    height: auto ;
}

@keyframes cambio {

    0% { margin-left: 0%; }
    5% { margin-left: 0%; }

    10% { margin-left: -100%; }
    15% { margin-left: -100%; }

    20% { margin-left: -200%; }
    25% { margin-left: -200%; }

    30% { margin-left: -300%; }
    35% { margin-left: -300%; }

    40% { margin-left: -400%; }
    45% { margin-left: -400%; }

    50% { margin-left: -500%; }
    55% { margin-left: -500%; }

    60% { margin-left: -600%; }
    65% { margin-left: -600%; }

    70% { margin-left: -700%; }
    75% { margin-left: -700%; }

    80% { margin-left: -800%; }
    85% { margin-left: -800%; }

    90% { margin-left: -900%; }
    100% { margin-left: -900%; }
}

/*Celular*/


/*Computadora*/
@media screen and (max-width: 1920px){
    .carrusel{
        width: 100%;
        height: 700px;
        margin: 0px auto 0;
        overflow: hidden;
    }
    .arti{
        max-width:1500px;
        margin: 20px auto;
        padding: 20px;
        background: #fff;
    }
}
@media screen and (max-width: 1500px){
    .carrusel{
        width: 100%;
        height: 510px;
        margin: 0px auto 0;
        overflow: hidden;
    }
    .arti{
        max-width:1200px;
        margin: 20px auto;
        padding: 20px;
        background: #fff;
    }
}

@media screen and (max-width: 720px){
    .carrusel{
        width: 100%;
        height: 205px;
        margin: 0px auto 0;
        overflow: hidden;
    }
}

@media screen and (max-width: 414px){

    .carrusel{
        width: 100%;
        height: 140px;
        margin: 0px auto 0;
        overflow: hidden;
    }
    .carrusel-con-texto .texto-encima {
        width: 100%;
        position: absolute; /* Posición absoluta en relación con el elemento padre */
        top: 50%; /* Centra verticalmente el texto */
        left: 50%; /* Centra horizontalmente el texto */
        transform: translate(-50%, -50%); /* Centra el texto en el centro de la imagen */
        background-color: rgba(146, 146, 146, 0.164); /* Fondo semitransparente para hacer el texto legible */
        color: #fff; /* Color del texto */
        padding: 10px; /* Espacio alrededor del texto */
        font-size: 10px; /* Tamaño de fuente del texto */
        text-align: center; /* Alinea el texto en el centro */
        z-index: 1; /* Coloca el texto encima de la imagen */
    }
}