@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

:root{
  --primary-color: #ff4500;
  --accent-color: #ffb000;
  --text-color: #f1f1f1;
  --background-color: #111;
  --glass: rgba(10,10,10,.55);
  --glass-border: rgba(255,255,255,.18);
  --shadow: 0 16px 40px rgba(0,0,0,.55);
  --font-family: 'Comfortaa', cursive;
}

.bannerHead{
  background: 
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url("/images/bg001.webp") no-repeat center/cover;
  min-height: 80vh;
  margin-top: 3em;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  width: 100%;
  filter: saturate(1.1) contrast(1.05) ;
  height: 100%;
  border-bottom: 1px solid #999;
  box-shadow: 0 0 8px rgba(0,0,0,.5);
}

.bannerHead h1{
  font-size: clamp(2rem, 5vw, 3rem);
  color: #fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.65);
  letter-spacing: .5px;
}

.bannerHead .textIntro{
  font-size: clamp(.8rem, 2vw, 1.2rem);
  color: rgba(255,255,255,.92);
  padding: .75rem 1rem;
  background: linear-gradient(135deg, rgba(255,69,0,.22), rgba(255,176,0,.14));
  border-radius: .85rem;
  border: 1px solid rgba(255,176,0,.35);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.bannerHead .headingStateCont{
  background: var(--glass);
  backdrop-filter: blur(14px);
  border-radius: 1.2rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  display: flex;
  width: 100%;
}

.bannerHead .headingStateCont .headingCont{
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    row-gap: .6rem;
}
.bannerHead .headingStateCont .headingCont .textHeading{
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 600;
}
.bannerHead .headingStateCont .headingCont .textCuerpo{
    font-size: clamp(.75rem, 2vw, 1.1rem);
    color: rgba(255,255,255,.85);
}

.bannerHead .btnsMenusCont{
  padding: 1rem 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.bannerHead .btnsMenusCont a{
  color: #fff;
  font-size: clamp(.85rem, 2vw, 1.1rem);
  padding: .65rem 1.15rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,69,0,.85), rgba(255,176,0,.65));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 25px rgba(255,69,0,.25);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.bannerHead .btnsMenusCont a:hover{
  transform: translateY(-2px);
  filter: brightness(1.05) saturate(1.05);
  box-shadow: 0 16px 35px rgba(255,69,0,.35);
}

.bannerHead .SocialsRRSS{
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.bannerHead .SocialsRRSS a{
    color: #c0c0c0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.bannerHead .SocialsRRSS a:hover{
    color: #fff;
    text-shadow: 0 0 8px rgba(255,255,255,.75);
}
.bannerHead .SocialsRRSS a:nth-child(1){
    margin-left: auto;
}



/*Secciónes Menús*/
.menuSections{
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  width: 100%;
  margin-bottom: 3rem;
  border-bottom: 1px solid #555;
  padding: 2rem 3%;
  position: relative;
}


/*Targets*/
 .menuLargo,
 .menuSorpresa{
  color: #fff;
  position: absolute;
  z-index: -500;
  top:-3.6rem;
  left: 0;
  visibility: hidden;
}
/*Targets*/



.menuSections .stateLongMenuCont,
.menuSections .stateSorpresaMenuCont{
  background: linear-gradient(0, #222, #333);
  backdrop-filter: blur(14px);
  border-radius: 1.2rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid #555;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  row-gap: .5rem;
  width: 100%; 
  border-bottom: 1px solid #999;
  margin-bottom: 2rem;
}
  .menuSections .stateLongMenuCont .thisText,
  .menuSections .stateSorpresaMenuCont .thisText{
    display: flex;
  }
  .menuSections .stateLongMenuCont .thisText,
  .menuSections .stateSorpresaMenuCont .thisText{
    font-size: clamp(1rem, 2vw, 2rem);
    font-weight: 300;
    color: #ddd;
    border: 1px solid #444;
    width: max-content;
    padding: .3rem .5rem;
    background: #111;
    border-left: 1px solid #333;
    border-radius: .5rem;
  }
.menuSections .stateLongMenuCont .thisText span,
.menuSections .stateSorpresaMenuCont .thisText span{
  font-weight: 700;
  color: #ffffff;
  margin-left: .5rem;
  font-size: clamp(1.7rem, 3vw, 3rem);
} 
.menuSections .stateLongMenuCont .thisText strong,
.menuSections .stateSorpresaMenuCont .thisText strong{
  color: #666;
  font-size: 1.5rem;
}
.menuSections .stateLongMenuCont .aboutLong,
.menuSections .stateSorpresaMenuCont .aboutSorpresa{
  color: #fff;
  font-weight: 200;
  font-size: clamp(.9rem, 2vw, 1.3rem);
}

.textMenuLong,
.textMenuSorpresa{
  color:#eee;
  font-weight: 700;
  margin-block: 1rem;
  font-size: clamp(1.3rem, 3vw, 3.5rem);
}


.showLongMenu,
.showSorpresaMenu{
  background: #222;
  padding: .5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  border-radius: .5rem;
  width: 100%;
}
.showLongMenu li,
.showSorpresaMenu li{
  background: #000;
  border-radius: .5rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: .5rem;
  row-gap: .5rem;
}
.showLongMenu li .namePlatilloLongShow,
.showSorpresaMenu li .namePlatilloSorpresaShow{
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  padding: .2rem .5rem;
  background: linear-gradient(45deg, #1c1c1d, #2f2f30, #2c2c2c);
  border-radius: .7rem;
  border: 1px solid #444;
}

.callers{
  display: none;
}
.showLongMenu li .descLongShow,
.showSorpresaMenu li .descSorpresaShow{
  margin-bottom: auto;
  color: #eee;
  font-size: .8rem;
  font-style: oblique;
}
.showLongMenu li .ingreLongShow,
.showSorpresaMenu li .ingreSorpresaShow{
  padding: .2rem;
  border-radius: .5rem;
  border: 1px solid #222;
  font-size: .7rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem;
}
.showLongMenu li .ingreLongShow span,
.showSorpresaMenu li .ingreSorpresaShow span{
  background: #333;
  padding: .2rem .5rem;
  border-radius: 1.5rem;
  color: #ffff;

}
.showLongMenu li .alergenosShow,
.showSorpresaMenu li .alergenosSorpresaShow{
  padding: .2rem .3rem;
  border: 1px solid #333;
  border-radius: 1rem;
  display: flex;
  gap: .2rem;
  width: 100%;
  flex-wrap: wrap;
}
.showLongMenu li .alergenosShow span,
.showSorpresaMenu li .alergenosSorpresaShow span{
  color:#eee;
  background:#222;
  font-size: .8rem;
  padding: .3rem;
  border-radius: 1rem;

}