/* Slider Inicio */
.sliderCont{
    width: 100%;
    height: auto;
    overflow: hidden;
}
.slider {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.contenedor__sliders {
    width: 100%;
    height: auto;
    display: flex;
}
.content_slider {
    width: 100%;
    height: 40em;
    display: block;
    position: relative;
    flex-shrink: 0;
}
.textSlider1{
    width: 10em;
    height: 10em;
    position: absolute;
    bottom: 8em;
    left: calc((100vw / 2) - 5em);
}
.contTextSlider{
    width: 100%;
    height: 100%;
    position: relative;
}
.contTextSlider p {
    font-family: LaPropia;
    color: var(--color1);
    position: absolute;
}
#textSlider1_1{
    font-size: 7rem;
    transform: rotate(350deg);
    top: 0em;
    left: -0.5em;
    z-index: 5;
    text-shadow: 4px 1px 10px var(--color2);
}
#textSlider1_2{
    font-size: 2.5rem;
    transform: rotate(350deg);
    top: 2em;
    left: 1em;
    z-index: 5;
    text-shadow: 4px 1px 10px var(--color2);
}
#textSlider1_3{
    font-size: 6rem;
    transform: rotate(350deg);
    top: 1.1em;
    left: 0em;
    z-index: 5;
    text-shadow: 4px 1px 10px var(--color2);
}
#slider1 {
    width: 100%;
    height: 100%;
    background-image: url(../img/cultiyuca.webp);
    background-position: 0 0;
    background-size: cover;
    background-repeat: no-repeat;
}
.pedidosCont{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: Regular-Roboto;
}
.pedidosCont img{
    width: 2em;
    height: auto;
}
.pedidosCont p{
    width: 9em;
    font-size: 1.5rem;
    color: var(--color2);
    margin: auto;
}
.portaPedido{
    width: 100%;
    height: 13em;
    background: var(--color4);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
.portaPedido picture, .portaPedido2 picture{
    display: flex;
    align-items: end;
    justify-content: center;
}
.portaPedido2{
    width: 100%;
    height: 13em;
    background: var(--color1);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
.portaPedido a, .portaPedido2 a{
    text-decoration: none;
}
.btnPedido{
    width: 8em;
    height: 2em;
    border-radius: 1.5em;
    border: 2px solid var(--color5);
    font-weight: 700;
    color: var(--color5);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btnPedido:hover{
    background: var(--color5);
    color: var(--color1);
}
/* Slider Fin */
/* Main Inicio */
main{
    width: 100%;
    height: auto;
}
.lineProduct{
    width: 100%;
    height: 46em;
    background: var(--color4);
}
.contProducts{
    width: 100%;
    height: 27em;
    background: var(--color3);
    position: relative;
}
.contProducts h1{
    width: 80%;
    height: auto;
    font-size: 2.5rem;
    font-weight: 100;
    font-family: LaPropia2;
    color: var(--color1);
    text-align: center;
    margin: auto;
    padding: 1em 0;
}
.contProducts > p{
    width: 80%;
    max-width: 500px;
    height: auto;
    font-size: 1.2rem;
    font-family: Regular-Roboto;
    color: var(--color6);
    text-align: center;
    margin: auto;
}
.sliderProducts{
    width: 100dvw;
    height: auto;
    position: absolute;
    top: 15.4em;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory ;
    scroll-behavior: smooth;
}
.cardProduct{
    width: 17em;
    max-width: 17em;
    height: 24em;
    background: var(--color1);
    border-radius: 1em;
    margin: 0 0 0 2em;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    position: relative;
    flex: 1 0 17em;
    scroll-snap-align: start;
}
.imgCard{
    width: 100%;
    height: 11.6em;
    overflow: hidden;
}
.sliderImgCard1{
    width: 100%;
    height: 100%;
    background: var(--color4);
    border-radius: 1em 1em 0 0;
}
.sliderImgCard2{
    width: 100%;
    height: 100%;
    background: var(--color9);
    border-radius: 1em 1em 0 0;
}
.sliderImgCard3{
    width: 100%;
    height: 100%;
    background: var(--color5);
    border-radius: 1em 1em 0 0;
}
.sliderImgCard4{
    width: 100%;
    height: 100%;
    background: var(--color6);
    border-radius: 1em 1em 0 0;
}
.sliderImgCard5{
    width: 100%;
    height: 100%;
    background: var(--color7);
    border-radius: 1em 1em 0 0;
}
.imgCard picture{
    width: 100%;
    height: auto;
    position: absolute;
    top: 1.5em;
    margin: auto;
    z-index: 5;
    text-align: center;
}
.imgCard img{
    width: 11em;
    height: auto;
}
.infoCard{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.titleCard{
    width: 100%;
    height: auto;
    text-align: center;
}
.titleCard h2{
    width: 80%;
    height: auto;
    font-family: Black-Roboto;
    font-size: 1.5rem;
    color: var(--color2);
    margin: auto;
}
.titleCard > p{
    width: 100%;
    height: auto;
    font-family: Regular-Roboto;
    font-size: .8rem;
    color: var(--color5);
    margin: 1em 0;
}
.cantCard{
    display: none;
}
.priceCard{
    width: 90%;
    height: auto;
    display: flex;
    margin: auto;
}
.price{
    width: 40%;
    height: auto;
    text-align: center;
}
.price p{
    width: 100%;
    height: auto;
    font-family: Regular-Roboto;
    font-size: 2rem;
    color: var(--color2);
}
.price p > span{
    width: 100%;
    height: auto;
    font-family: Regular-Roboto;
    font-size: 1.5rem;
    color: var(--color2);
}
.price > span{
    width: 100%;
    height: auto;
    font-family: Regular-Roboto;
    font-size: .8rem;
    color: var(--color5);
}
.contBTNprice{
    width: 60%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contBTNprice a{
    width: 100%;
    height: auto;
    text-decoration: none;
}
.btnPrice {
    width: 100%;
    height: 2em;
    background: var(--gradient2);
    border-radius: 1em;
    font-family: Black-Roboto;
    color: var(--color2);
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.btnPrice:hover{
    background: var(--gradient3);
}
/* Main Fin */
@media only screen and (min-width:481px) and (max-width:768px){
    /* Slider Inicio */
    .content_slider {
        height: 24em;
    }
    .textSlider1 {
        bottom: 5em;
    }
    .pedidosCont {
        flex-direction: initial;
    }
    /* Slider Fin */
    /* Main Inicio */
    .contProducts {
        height: 25em;
    }
    .sliderProducts {
        top: 13.4em;
    }
    /* Main Fin */
}
@media only screen and (min-width: 769px) and (max-width: 1279px) and (orientation: portrait){
    /* Slider Inicio */
    .content_slider {
        height: 44em;
    }
    .textSlider1 {
        bottom: 18em;
    }
    .pedidosCont {
        flex-direction: initial;
    }
    /* Slider Fin */
}
@media only screen and (min-width: 769px) and (max-width: 1279px) and (orientation: landscape){
    /* Slider Inicio */
    .content_slider {
        height: 44em;
    }
    .textSlider1 {
        bottom: 18em;
    }
    .pedidosCont {
        flex-direction: initial;
    }
    /* Slider Fin */
}
@media only screen and (min-width:1280px){
    /* Slider Inicio */
    .content_slider {
        height: 80dvh;
    }
    .textSlider1 {
        width: 14em;
        height: 14em;
        bottom: 14em;
    }
    #textSlider1_1 {
        font-size: 8rem;
    }
    #textSlider1_2 {
        font-size: 3.5rem;
        top: 1.7em;
    }
    #textSlider1_3 {
        font-size: 6rem;
        top: 1.5em;
    }
    .pedidosCont {
        flex-direction: initial;
    }
    /* Slider Fin */
    /* Main Inicio */
    .sliderProducts {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        justify-items: center;
        overflow-x: initial;
        scroll-snap-type: initial;
        scroll-behavior: initial;
    }
    .cardProduct {
        width: auto;
        margin: 0;
    }
    /* Main Fin */
}