body {
    border-top: 1px solid rgba(0, 0, 0, 0);
    background-size: 100vw;
    background-image: url("../assets/background-2.png");
}
#header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    width: 100%;
    padding-top: calc(300 * var(--shrink40));
    
    overflow-x: clip;
    box-sizing: border-box;


}
#header .copy {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#header h1{
    width: 42vw;

    color: var(--secondary);
    font-size: calc(90 * var(--shrink40));
    font-family: 'Futura-Condensed-Bold', sans-serif;
    font-weight: 500;

    line-height: 85%;
    text-size-adjust: none;
    text-align: center;
}
#header p {
    width: 50vw;
    margin-top: calc(25 * var(--shrink40));
    
    text-indent: 0;
    text-align: center;
}


#header .wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    height: 33vw;
    margin: calc(100 * var(--shrink40)) auto;
    margin-bottom: 0;
}
#header .wrapper img {
    height: 100%;
    border-radius: 10px;
    box-shadow: 0px 0px 30px 1px rgba(0, 0, 0, 0.4);
}
#header .wrapper .container {
    position: absolute;
    bottom: 50%;
    translate: 0 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
}
#header .wrapper .container svg:nth-child(1) {
    translate: calc(-42 * var(--shrink40)) 0;
}
#header .wrapper .container svg:nth-child(2) {
    translate: calc(42 * var(--shrink40)) 0;
}


#benefits-0 {
    width: 100%;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
}
#benefits-0 .container-0 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    margin: calc(300 * var(--shrink40)) 0px;
    padding: 0 8vw;

    box-sizing: border-box;

}
#benefits-0 .container-0 .ilustration {
    width: 42vw;
    aspect-ratio: 800/533;
    
    border-radius: 10px;
    box-shadow: 0px 0px 30px 1px rgba(0, 0, 0, 0.3);
}
#benefits-0 .container-0 .copy {
    width: 33vw;
}
#benefits-0 .container-0 .copy p:nth-child(2){
    margin: calc(15 * var(--shrink40)) 0;
}
#benefits-0 .container-0 .copy .link-button {
    margin-top:  calc(50 * var(--shrink40));
}





#benefits-0 .container-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  margin: calc(300 * var(--shrink40)) 0px;
  padding: 0 8vw;

  box-sizing: border-box;

}
#benefits-0 .container-1 .ilustration {
  width: 42vw;
  aspect-ratio: 800/533;

  border-radius: 10px;
  box-shadow: 0px 0px 30px 1px rgba(0, 0, 0, 0.3);
}
#benefits-0 .container-1 .copy {
  width: 33vw;
}
#benefits-0 .container-1 .copy p:nth-child(2){
  margin: calc(15 * var(--shrink40)) 0;
}
#benefits-0 .container-1 .copy .link-button {
  margin-top:  calc(50 * var(--shrink40));
}
#benefits-0 .container-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  margin: calc(300 * var(--shrink40)) 0px;
  padding: 0 8vw;

  box-sizing: border-box;

}
#benefits-0 .container-2 .ilustration {
  width: 42vw;
  aspect-ratio: 800/533;

  border-radius: 10px;
  box-shadow: 0px 0px 30px 1px rgba(0, 0, 0, 0.3);
}
#benefits-0 .container-2 .copy {
  width: 33vw;
}
#benefits-0 .container-2 .copy p:nth-child(2){
  margin: calc(15 * var(--shrink40)) 0;
}
#benefits-0 .container-2 .copy .link-button {
  margin-top:  calc(50 * var(--shrink40));
}

#bar {
  display: flex;
  flex-direction: column;
  align-items: center;

}
#bar .copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  width: 42vw;
  margin-bottom: calc(50 * var(--shrink40));
}
#bar .copy p {
  text-indent: 0;
  text-align: center;
  margin-top: calc(15 * var(--shrink40));
}
#bar .container {
  display: flex;
  width: 100%;
}
#bar .container div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
}
#bar .container div span {
  transition: opacity 0.5s ease;
}
#bar .container div span:nth-child(2){
  font-weight: 600;
  margin-bottom: calc(20 * var(--shrink40));
}
#bar .classic {
  border-right: 2px solid var(--secondary);
}
#bar .premium {
  border-left: 2px solid var(--secondary);
}
#bar .copy .select-element {
  margin-top: calc(50 * var(--shrink40))
}



#tapas {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(150 * var(--shrink40));
}
#tapas .copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  width: 42vw;
  margin-bottom: calc(50 * var(--shrink40));
}
#tapas .copy p {
  text-indent: 0;
  text-align: center;
  margin-top: calc(15 * var(--shrink40));
}
#tapas .tapas-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
#tapas .tapas-list div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
}
#tapas .tapas-list div span {
  transition: opacity 0.5s ease;
}
#tapas .tapas-list span:nth-child(1){
  font-weight: 600;
  margin-bottom: calc(20 * var(--shrink40));
}
#tapas .tapas-list * {
  text-align: center;
}



#special-menu-0 header::before, 
#special-menu-1 header::before {
  content: '';
  background-image: url('../assets/reserve/leafes.svg');
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 366px;
  background-size: cover;
}
#special-menu-0 header::after, 
#special-menu-1 header::after {
  content: '';
  background-image: url('../assets/reserve/leafes.svg');
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 366px;
  rotate: 180deg;
  background-size: cover;
}
#special-menu-0 {
  position: relative;
  margin-top: calc(var(--shrink40) * 150);
  width: 100%;
}
#special-menu-0 header {
  position: relative;
  width: 100%;
  padding: calc(var(--shrink40) * 100) 0;
  overflow: clip;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-color: var(--secondary);
}
#special-menu-0 header * {
  color: var(--primary);
}
#special-menu-0 .dishes {
  position: relative;
  width: 900px;
  margin: 0 auto;

  display: flex;
}
#special-menu-0 .dishes .container-1 {
  border-left: 5px solid var(--secondary);
  padding-left: calc(var(--shrink40) * 50);
  box-sizing: border-box;
}
#special-menu-0 .dishes > div {
  margin-top: calc(var(--shrink40) * 150);
  width: 50%;
}
#special-menu-0 .dishes > div h2 {
  width: 50%;
}
#special-menu-0 .dishes > div > div {
  display: flex;
  flex-direction: column;
  gap: calc(var(--shrink40) * 40);
}
#special-menu-0 .desserts {
  margin-top: calc(var(--shrink40) * 100);
}
#special-menu-0 .dish * {
  color: var(--secondary);
}
#special-menu-1 {
  position: relative;
  margin-top: calc(var(--shrink40) * 300);
  width: 100%;
}
#special-menu-1 header {
  position: relative;
  width: 100%;
  overflow: clip;
  padding: calc(var(--shrink40) * 100) 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-color: var(--secondary);
}
#special-menu-1 header * {
  color: var(--primary);
}
#special-menu-1 .dishes {
  position: relative;
  width: 900px;
  margin: 0 auto;
  margin-top: calc(var(--shrink40) * 100);

  display: flex;
  gap: calc(var(--shrink40) * 50);
}
#special-menu-1 .dishes > div {
  width: 50%;
}
#special-menu-1 .dishes > div > div {
  padding: calc(var(--shrink40) * 15);
  margin: calc(var(--shrink40) * 20) 0;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
}
#special-menu-1 .dishes > div .dark {
  background-color: #DBD1BB;
}
.dashed {
  padding: calc(10 * var(--shrink40)) calc(20 * var(--shrink40));
  border-top: 2px dashed var(--secondary);
  border-bottom: 2px dashed var(--secondary);
  box-sizing: border-box;
}






#benefits-1 {
    width: 100%;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;


}
#benefits-1 .container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    margin: calc(300 * var(--shrink40)) 0px;
    padding: 0 8vw;

    box-sizing: border-box;

}
#benefits-1 .container .ilustration {
    width: 42vw;
    aspect-ratio: 800/667;
    
    border-radius: 10px;
    box-shadow: 0px 0px 30px 1px rgba(0, 0, 0, 0.3);
}
#benefits-1 .container .copy {
    width: 33vw;
}
#benefits-1 .container .copy p:nth-child(2){
    margin: calc(15 * var(--shrink40)) 0;
}
#benefits-1 .container .copy .link-button {
    margin-top:  calc(50 * var(--shrink40));
}





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

    

    #header h1 {
        width: 80vw;

        font-size: calc(80 * var(--shrink40));
    }

    #header .copy p {
        width: 75vw;
    }

    #header .wrapper {
        margin: calc(100 * var(--shrink40)) auto;
        height: 50vw;
        margin-bottom: 0;
    }

    #benefits-0 .container-0 {
        flex-direction: column;
        padding: 0px 8vw;
    }

    #benefits-0 .container-0 .ilustration {
        width: 84vw;
        margin-top: 100px;
    }
    
    #benefits-0 .container-0 .copy {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 84vw;
    }

    #benefits-0 .container-1 {
        flex-direction: column-reverse;
        padding: 0px 8vw;
    }

    #benefits-0 .container-1 .ilustration {
        width: 84vw;
        margin-top: 100px;
    }
    
    #benefits-0 .container-1 .copy {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 84vw;
    }

    #benefits-0 .container-2 {
      flex-direction: column;
      padding: 0px 8vw;
    }

    #benefits-0 .container-2 .ilustration {
        width: 84vw;
        margin-top: 100px;
    }
  
    #benefits-0 .container-2 .copy {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 84vw;
    }

    #bar .copy {
        width: 67vw;
    }

    #bar .container {
        flex-direction: column;
        align-items: center;
    }

    #bar .container > div {
        width: 50vw;
    }

    #bar .container .classic {
        border: none;
        border-bottom: 2px solid var(--secondary);
        padding: calc(100 * var(--shrink40)) calc(50 * var(--shrink40));
    }
    #bar .container .premium {
        border: none;
        border-top: 2px solid var(--secondary);
        padding: calc(100 * var(--shrink40)) calc(50 * var(--shrink40));
    }
    



    #benefits-1 .container {
        flex-direction: column;
        padding: 0px 8vw;
    }
    #benefits-1 .container .ilustration {
        width: 84vw;
        margin-top: 100px;
    }
    #benefits-1 .container .copy {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 84vw;
    }
    #benefits-1 .container {
        margin: calc(200 * var(--shrink40)) 0px;
    }

    #special-menu-0 .dishes > div h2 {
      width: auto;
    }
    #special-menu-0 .dishes, #special-menu-1 .dishes {
      width: auto;
    }
    #special-menu-0 .dishes {
      flex-direction: column;
      align-items: center;
    }
    #special-menu-0 .dishes * {
      text-align: center;
    }
    #special-menu-0 .dishes > div > div {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #special-menu-0 .dishes > div > div > div {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #special-menu-0 .dishes .container-1 {
      border: none;
      padding: 0;
      margin-top: calc(var(--shrink40) * 100);
    }

    #special-menu-1 .dishes {
      flex-direction: column;
      align-items: center;
      gap: 0px;
    }




    #special-menu-0 header::before, 
    #special-menu-1 header::before {
      display: none;
    }
    #special-menu-0 header::after, 
    #special-menu-1 header::after {
      width: auto;
      background-image: url('../assets/reserve/leafes-mobile.svg');
      aspect-ratio: 245/282;
      /* aspect-ratio: 282/245; */
      transform: rotate(180deg);
    }
}

@media screen and (max-width: 500px){
  #special-menu-0 header::after, 
  #special-menu-1 header::after {
    translate: 40% 0;
  }
}