/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* FONT SIZING */
*{
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

:root{
  --primaryColor: rgb(255, 141, 19);
  --secondaryColor: rgb(188, 15, 0);
  --terciaryColor: rgb(115, 151, 27);
  --logoOrange: #de7607ff;
  --logoRed: #670d05ff;
  --logoGreen: #495d18ff;
  --ncolorWhite: #f6f6f6ff;
  --ncolorGrey: #edededff;
  --ncolorBlack: #090909ff;
}
html{
  font-size: 14px;  
  font-family: 'Poppins', sans-serif;
  -webkit-box-sizing: border-boxb;
          box-sizing: border-box;
  letter-spacing: 0.13em;
  line-height: 1.5em;
  scroll-behavior:smooth ;
  color:#090909ff;
}

body{
  padding: 1rem;
  background-color:var(--ncolorWhite);
  position: relative;
  max-width: 500px;
  /* border:solid red 2px; */
  margin: 0 auto;
  min-width: 320px;
 background-color: white;
}
button{
  border: 0;
  background: none;
  letter-spacing: 0.1em;

}
  p{
    line-height: 1.5em;
  }
  .bold{
    font-weight: bold;
  }
  .title-display{
     font-size: 6rem;
     font-family: 'Fredoka One', cursive;
   
  }

  .title-h1{
    font-family: 'Secular One', sans-serif;
    font-size: 2.369rem;
    line-height: 1.5em;
    /* font-weight: bold; */
  }

  .title-h2{
    font-size: 1.777rem;
    line-height: 1.5em;
    font-weight:bold;
  }

.title-h3{
    font-size: 1.333rem;
    line-height: 1.5em;
   
  }


  .title-h4{
    font-size: 0.75rem;
    line-height: 1.5em;
  }


#header{
  /* border:solid red 2px; */
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}


.logo-container{
  /* border:blue solid 2px; */
}
.logo{
  width: auto;
  height: 20vh;
}

.main-section{
  margin-bottom: 10rem;
  
}

/* LANDING SECTION */

.container{
  /* border:solid green 2px; */
}

#order-btn{
  text-decoration: none;
  position: fixed;
  right:8vw;
  bottom: 10vh;
  z-index: 2;
  background-color: var(--terciaryColor);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  padding: 1rem;
  -webkit-box-shadow: 0px 0px 10px 5px rgba(22,22,22,0.25); 
box-shadow: 0px 0px 10px 5px rgba(22,22,22,0.25);
  color:white;
  display: -ms-grid;
  display: grid;
  place-content: center;
}

#order-btn:active{
  background-color: var(--logoGreen) ;
}

#landing-section{
    
    position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* display: none; */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100vw;
  height:100vh;
  top: 0;
  left: 0;
  z-index: 3 ;
  background-color: white;
  padding: 1rem;
  /* border:solid blue 2px; */
}

.movetoLeft{
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
#landing-section .logo{
  width: auto;
  height: 15vh;
}

#landing__img{
  width: 20rem;
}

.grid-center{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
        flex-flow: column wrap;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
  
}
.landing__title{
  text-align: center;
}

#landing__button{
  display: block;
 background-color: var(--terciaryColor);
 font-weight: bold;
  border-radius: 2rem;
  padding: 0.8rem;
  width: 80%;
  margin:0 auto;
  color:var(--ncolorWhite);
  -webkit-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
   z-index: 2;
}

#landing__button:hover{
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
  background-color: var(--logoGreen);
}

#modal-acercaDe{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 2rem;
  padding: 1.5rem;
  background-color: var(--logoOrange);
  -webkit-filter: drop-shadow(rgba(0,0,0,1));
          filter: drop-shadow(rgba(0,0,0,1));
  color:rgba(255, 255, 255, 0.806);
  -webkit-animation: acercade-animation 0.35s ease-in-out;
          animation: acercade-animation 0.35s ease-in-out;
    }

 #acercade{
  color:var(--primaryColor);
  font-size: 1rem;
 }

@-webkit-keyframes acercade-animation {
  0%{-webkit-transform: scale(0);transform: scale(0);}
  100%{-webkit-transform: scale(1);transform: scale(1);}
}

@keyframes acercade-animation {
  0%{-webkit-transform: scale(0);transform: scale(0);}
  100%{-webkit-transform: scale(1);transform: scale(1);}
}

.modal-acercaDe--closed{
  -webkit-animation: acercade-animation 0.35s ease-in-out;
          animation: acercade-animation 0.35s ease-in-out;
}
@-webkit-keyframes cerrar-acercade {
  0%{-webkit-transform: scale(1);transform: scale(1);}
  100%{-webkit-transform: scale(0);transform: scale(0);}
}
@keyframes cerrar-acercade {
  0%{-webkit-transform: scale(1);transform: scale(1);}
  100%{-webkit-transform: scale(0);transform: scale(0);}
}

#close-modal-acercaDe{
  -ms-flex-item-align: end;
      align-self: flex-end;
  /* border: solid 2px var(--terciaryColor); */

  width: 44px;
  height: 44px;
  background-color:none;
  color:var(--ncolorWhite);
  
}

.background-blur{
  display: none;
  place-content: center;
 background-color: rgba(0, 0, 0, 0.5);
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 padding: 1rem;
 -webkit-transition: 0.5s ease;
 -o-transition: 0.5s ease;
 transition: 0.5s ease;
 z-index: 3;
}
#close-modal-acerdaDe:active{
  background-color: var(--logoGreen);
  color:white;
}
/* HOW TO ORDER SECTION */

#howto-section{
  /* border:solid red 2px; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  /* gap:2rem; */
}

#howto-section h2:first-child{
 margin-bottom: 2rem;
}

.howto__step-container{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  /* gap:1rem; */
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center      ;
  /* border:solid blue 2px; */
 
}
.howto__img{
  width:80%;
  /* border:solid green 2px; */
}

/* MENU SECTION */

.menu-section{
  /* border:solid blue 2px; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-flow: column nowrap;
           flex-flow: column nowrap;
    gap:1.5rem;
}
.menu__card{
  position: relative;
  width: 100%;
  height:70vw;
  max-height: 300px;
  border-radius: 2rem;
  background-color: var(--logoOrange);
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: 70%;
  overflow: hidden;
  color:white;
  -webkit-box-shadow: 0px 0px 10px 5px rgba(22,22,22,0.25); 
  box-shadow: 0px 0px 10px 5px rgba(22,22,22,0.25);
}

#burritos-container{
  background-image: url("../resources/img/burrito.jfif");
    background-position-y: 50%;
}

#burger-container{
  background-image: url("../resources/img/hamburguer.jpg");
    background-position-y: -20%;
}
#chilli-container{
  background-image: url("../resources/img/Jalapeños-con-bacon.jpg");
  background-position-y: -20%;
}

#fries-container{
  background-image: url("../resources/img/carne_asada_fries_with_salsas.jpg");
    background-position-y: 50%;
}
#hotdog-container{
  background-image: url("../resources/img/hotdog2.webp");
    background-position-y: 50%;
}

#tacosDorados-container{
  background-image: url("../resources/img/tacos dorados.png");
  background-position-x:50%;
}

#quesadillas-container{
  background-image: url("../resources/img/quesadilla.jpg");
  background-position-x:50%;
}
#sopes-container{
  background-image: url("../resources/img/sopes.jpg");
  background-position-x:50%;
}
#enmoladas-container{
  background-image: url("../resources/img/enmoladas2.jpg");
  background-position-x:50%;
  background-position-y:50%;
}
#enchiladas-container{
  background-image: url("../resources/img/enchiladasvedes.jpg");
  background-position-x:50%;
  background-position-y:50%;
}
#mollepizza-container{
  background-image: url("../resources/img/pizalletes-2-scaled.jpg");
  background-position-x:50%;
}

#aguafresca-container{
  background-image: url("../resources/img/aguafresca.webp");
  background-position-x:50%;
}

.menu-section .gradient{
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap:0.5rem;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(9%, rgba(0, 0, 0, 0.783)), color-stop(53%, rgba(0,0,0,0.6979166666666667)), to(rgba(185,185,185,0)));
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.783) 9%, rgba(0,0,0,0.6979166666666667) 53%, rgba(185,185,185,0) 100%);
  background: linear-gradient(360deg, rgba(0, 0, 0, 0.783) 9%, rgba(0,0,0,0.6979166666666667) 53%, rgba(185,185,185,0) 100%);
  padding:1rem;

}

.gradient h3{
  font-weight: bold;
}

.menu__txt{

}

.menu__list-container{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  gap: 1.5rem;
  position: fixed;
  bottom: 0;
  left: 0;
   z-index: 2;
  width: 100vw;
  max-width: 500px;
  padding: 0;
  height: 0;
  /* border: solid red 2px; */
  background-color: rgba(9, 9, 9, 0.90);
  -webkit-backdrop-filter: blur(14.3px);
  backdrop-filter: blur(14.3px);
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}


.list-container--open{
  height: 0;
   padding: 1rem;
   margin: 0 auto;
   right: 25vw;
}
/* #hotdog-container .menu__list-container{
  display: none;
}
#burritos-container .menu__list-container{
  display: none;
}
#burger-container .menu__list-container{
  display: none;
}

#fries-container .menu__list-container{
  display: none;
} */
.back-button{
  text-decoration: underline;
  color: white;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: bold;
  font-size: 1rem;

}
.back-button:active{
 color:rgba(245, 245, 245, 0.5)
}
.list__item{
  /* border:solid blue 2px; */
  border-radius: 1.4rem;
  padding: 0.75rem;
  /* display: flex; */
  color:rgba(0, 0, 0, 0.983);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color:rgb(245, 245, 245);
}

.list__grid-container{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* border:solid red 2px; */
  width: 100%;
}

.titlePrice-container{
  text-align: right;
}

.price-txt{
  color:var(--logoGreen);
}

.scroll-y-container{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  overflow-y: scroll;
}
.list__img{
  display: -ms-grid;
  display: grid;
  place-content: center;
  width: 64px;
  height:  64px;
  color:rgba(255, 255, 255, 0.792);
  background-color: rgb(217, 217, 217);
  /* border:solid green 2px; */
  border-radius: 0.7rem;
 }

 .list__img img{
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: auto;
 }


.add-item-container{
  display: none;
  /* border: yellow 2px solid; */
  }

.minus-button{
  width: 20px;
  height: 20px;
   border: red 2px solid;
}

.plus-button{
  width: 20px;
  height: 20px;
  border: purple 2px solid;
}

#footer{
  position:absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--logoRed);
  color:rgba(255, 255, 255, 0.728);
  padding: 1rem;
}
#horario{
  margin-left: 1.5rem;
}
.flex-row{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
gap:0.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#ordena-txt{
  display: inline;
}

#page-out{
  display: none;
}

#landing__button{
  width: 90%;
  position: absolute;
  bottom: 10vh;
  z-index: 2;

}
@media screen and (max-width:480px) {
  
  .main-section{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    gap: 2rem;
  }

  .menu-section{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    gap:1.5rem;
  }

  #footer{
    margin-top: 2rem;
  }


}


@media screen and (min-width:900px){
  body{
    width: 80%;
    margin: 0 auto;
    background-color: rgb(255, 255, 255);
    
  }
  #main-section{
    display: none;
  }
  #footer{
    display: none;
  }
#order-btn{
  display: block;
  position: inherit;
  margin: 3rem auto;

}
#page-out{
  display: block;
}
}