/*Vista PC*/
@media (orientation: landscape) {
    body {
        background-color: white;
        font-family: "Antonio";
    }
    /*Tamaño de titulos funcional*/
    body h1 {
        font-size: clamp(2rem, 5vh, 5rem);
    }
    /*Tamaño de texto funcional y adaptable*/
    body p {
        font-size: clamp(1.2rem, 3vh, 2.4rem);
        font-family: "Lato";
    }

    body li {
    font-size: clamp(1.2rem, 3vh, 2.4rem);
    text-align: left;
    font-family: "Lato";
    }


    .parte-superior {
        padding-top: 4vh;
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2vh;
    }

    #separador-tarjetones {
    min-width: 5%;
    }

    .parte-inferior {
        padding-top: 6vh;
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2vh;
    }



    .tarjeton-informativo {
        width: 40%;
        height: auto;
        margin-bottom: 2vh;

    }

    .tarjeton-informativo .info {
        display: block;
        background-color: rgb(232, 232, 232);
        border-radius: 0.5vh;
        padding: 1%;
    }

    .tarjeton-informativo .contenedor-poster {
        width: 100%;
        height: auto;
    }

    .tarjeton-informativo .contenedor-poster .poster {
        width: 100%;
        height: auto;
    }

    .slider-poster {
        width: 100%;
        height: auto;
        margin: auto;
        overflow: hidden;
        margin-bottom: 2%;
        display: none;
    }

.slider-poster .slider-track-poster {
    display: flex;
    animation: scroll-poster 30s linear infinite;
    min-width: calc(100vw*8);
    -webkit-animation: scroll-poster 30s linear infinite;
    display: none;
}

.slider-poster .slide {
    width: 100vw;
    height: auto;
    display: none;
}

.slider-poster .slide img {
    width: 100%;
    height: auto;
    display: none;
}


    .slider {
        width: 100%;
        height: auto;
        margin: auto;
        overflow: hidden;
    }

.slider .slider-track {
    display: flex;
    animation: scroll 30s linear infinite;
    min-width: calc(25vw*14);
    -webkit-animation: scroll 30s linear infinite;
}

.slider .slide {
    width: 25vw;
    height: auto;
}

.slider .slide img {
    width: 90%;
    border-radius: 1vh;
    height: auto;
}
/*El motivo de usar -webkit es por que algunos navegadores pueden no tener las ultimas actualizaciones y funcionar mal*/
@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
    -webkit-transform: translateX(calc(-42.9%));
    transform: translateX(calc(-42.9%));
    }
}

.contenedor-escuelas {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    height: auto;
    justify-content: center;
    margin-top: 2vh;
}

.tarjeton-escuelas {
    width: 70%;
    height: auto;
    display: block;
    background-color: rgb(232, 232, 232);
    border-radius: 0.5vh;
    padding: 1%;
}

#separador-informacion {
    min-width: 4vw;
}

.contenedor-informacion {
    display: flex;
    justify-content: center;
}

}

/*Vista celulares*/
@media (orientation: portrait) {

    body {
        background-color: white;
        font-family: "Antonio";
    }
    /*Tamaño de titulos funcional*/
    body h1 {
        font-size: clamp(1rem, 3.5vh, 3rem);
    }
    /*Tamaño de texto funcional y adaptable*/
    body p {
        font-size: clamp(0.8rem, 2.7vh, 1.6rem);
        font-family: "Lato";
    }

    body li {
        font-family: "Lato";
    }

    .parte-superior {
        padding-top: 4vh;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;

        align-items: center;
    }

    #separador-tarjetones {
        min-width: 5%;
    }

    .parte-inferior {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 2vh;
        align-items: center;
    }


    .tarjeton-informativo {
        width: 95%;
        height: auto;
        margin-bottom: 2vh;
    }

    .tarjeton-informativo .info {
        display: block;
        background-color: rgb(232, 232, 232);
        border-radius: 0.5vh;
        padding: 1%;
    }

    .tarjeton-informativo .contenedor-poster {
        width: 100%;
        height: auto;
        visibility: hidden;
        display: none;
        
    }

    .tarjeton-informativo .contenedor-poster .poster {
        width: 100%;
        height: auto;
        visibility: hidden;
        display: none;
    }


    .slider-poster {
        width: 100%;
        height: auto;
        margin: auto;
        overflow: hidden;
        margin-bottom: 2%;
    }

.slider-poster .slider-track-poster {
    display: flex;
    animation: scroll-poster 30s linear infinite;
    min-width: calc(100vw*8);
    -webkit-animation: scroll-poster 30s linear infinite;
}

.slider-poster .slide {
    width: 100vw;
    height: auto;
}

.slider-poster .slide img {
    width: 100%;

    height: auto;
}

@keyframes scroll-poster {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
    -webkit-transform: translateX(calc(-50%));
    transform: translateX(calc(-50%));
    }
}


    .slider {
        width: 100%;
        height: auto;
        margin: auto;
        overflow: hidden;
    }

.slider .slider-track {
    display: flex;
    animation: scroll 30s linear infinite;
    min-width: calc(100vw*14);
    -webkit-animation: scroll 30s linear infinite;
}

.slider .slide {
    width: 100vw;
    height: auto;
}

.slider .slide img {
    width: 100%;

    height: auto;
}
/*El motivo de usar -webkit es por que algunos navegadores pueden no tener las ultimas actualizaciones y funcionar mal*/
@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
    -webkit-transform: translateX(calc(-42.9%));
    transform: translateX(calc(-42.9%));
    }
}

.contenedor-escuelas {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    justify-content: center;
    margin-top: 2vh;
}

.tarjeton-escuelas {
    width: 100%;
    height: auto;
    display: block;
    background-color: rgb(232, 232, 232);
    border-radius: 0.5vh;
    padding: 1%;
}

#separador-informacion {
    min-width: 4vw;
}

.contenedor-informacion li {
    text-align: center;
    list-style-position: inside;
}

.contenedor-informacion {
    display: flex;
    flex-direction: column;
    justify-content: center;
}






}