:root{
    --black:#1f1f1f;
    --white:#fff;
    --softWhite:#eee;
    --midWhite:#cacaca;
    --red:#ff4500;
    --orange:#ff6200;
    --text:#626262;
    --title:#363636;
    --font-Oswald:"Oswald", serif;
    --mintBlue:linear-gradient(45deg, #00D494, #00BCFF);
    --orangeFlama:#f3bd07;
    --laFlamaColor: #cd9462;
}



@media(max-width:1200px){

    .gridDrink{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)) !important;
    }
}


/* Sección Slider Empieza*/

.wrapperSlide{
    box-shadow:inset 0px 0px 0px  rgb(53, 53, 53);
    width: 100%;
    max-width: 1536px;
    margin-inline: auto;
    position: relative;
    height: 150px;
    margin-top: 5rem;
    overflow: hidden;
    mask-image: linear-gradient(to right,
        rgba( 0,0,0,0),
        rgba(0,0,0,1) 20%, 
        rgba(0,0,0,1) 80%,
        rgba(0,0,0,0)
        );
}

@keyframes scrollLeft{
   
    to {
        left: -200px;
    }
}

.item{
    width: 100px;
    height: 150px;
     border-radius: 6px;
     position: absolute;
     left: max(calc(100px * 8), 100%) ;
     animation-name: scrollLeft;
     animation-duration: 60s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
     opacity: 1;
     color: var(--laFlamaColor);
     font-size: clamp(2rem, 6vw, 7rem);
     border-radius: 3px;
}

.vacio{
    border: none;
    box-shadow: none;
}


.item1{
  animation-delay: calc(40s / 8 * (8 - 1) * -1) ;
}

.item2{
    animation-delay:calc(40s / 8 * (8 - 2) * -1) ;
}
  
.item3{
    animation-delay:calc(40s / 8 * (8 - 3) * -1) ;
}

.item4{
    animation-delay:calc(40s / 8 * (8 - 4) * -1) ;
}

.item5{
    animation-delay:calc(40s / 8 * (8 - 5) * -1) ;
  }
  
.item6{
    animation-delay:calc(40s / 8 * (8 - 6) * -1) ;
}
    
.item7{
    animation-delay:calc(40s / 8 * (8 - 7) * -1) ;
}

.item8{
    animation-delay:calc(30s / 8 * (8 - 8) * -1) ;
}
/* Sección Slider Termina*/



.infoA .container .list .itemIn{
    width: 100%;
    display: flex;
    align-items: center;
    height: 2rem;
    gap: 9px;
}

.infoA .container .list .itemIn img{
    height: 100%;
}