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

* {
   padding: 0;
   font-family: 'Abel', sans-serif;
}

html {
   margin: 1%;
   scroll-behavior: smooth;
   background: #221e20;
}

.container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1em;
   row-gap: 1em;
   /* grid-template-rows: repeat(1, auto); */

   /* grid-template-areas:
      "header header"
      "logo contactMapa"
      "menu menu"
      "hamburguesas hotdogsEnsaladas"
      "empanadas alitasSalsas"
      "acompaniamientos postres"
      "bebidas nada"
      "footer horario"; */
   /* grid-auto-rows: minmax(100px, auto); */
   /* align-items: stretch; */
}

/* * HEADER */
.header {
   grid-column: 1/-1;
   justify-self: center;
   /* grid-area: header; */
   /* background: #a81313; */
   /* margin-left: auto;  */
   /* margin-right: auto; */
   /* text-align: center; */
   /* align-items: center; */
}

h2 {
   color: #ffffff;
   font-weight: 900;
   display: inline;
}

/* * Menu */
.menu {
   display: grid;
   justify-items: center;
   background: #f9d93c;
   /* gap: 1em; */
}

.imagesMenu {
   width: 80%;
   margin-top: 1em;
   margin-bottom: 1em;
   /* object-fit: fill;  */
   /* margin-top: 1em;  */
   /* margin-bottom: 1em;  */
   /* object-fit: contain;  */
}

/* * Titulo y articulos */
.tituloMenu {
   display: grid;
   background: #f9d93c;
   /* padding-top: 1em; */
   height: 6.5em;
   justify-self: center;
}

.tituloMenu>div {
   /* border: 1px solid blueviolet; */
   display: flex;
   justify-content: center;
   align-items: center;
   gap: clamp(0.1em, 6vw, 2em);
}

h1 {
   text-align: center;
   font-size: clamp(3em, 6vw, 3.5em);
   font-weight: 900;
   background: #f9d93c;
   margin: 0;
}

.tituloMenu img {
   height: clamp(3em, 6vw, 4em);
}


.first {
   float: left;
   margin-right: 1em;
   margin-left: 1em;
   color: #ffffff;
   font-size: x-large;
   font-weight: 900;
}

.price {
   float: right;
   font-size: x-large;
   margin-left: 1em;
   margin-right: 1em;
   text-align: right;
   color: #ffffff;
   font-weight: 900;
}

.list::after {
   content: '';
   border-bottom: 0.4em solid #f9d93c;
   display: block;
   overflow: hidden;
   height: 0.8em;
}

.descripcion {
   color: #ffffff;
   font-size: x-large;
   margin-left: 1em;
   margin-top: 0;
}

.descripcionSalsas {
   color: #dcd11c;
   font-size: x-large;
   margin-left: 1.5em;
   margin-top: 0;
}

.subMenu {
   border: 0.2em solid #f9d93c;
   /* background: #221e20; */
   /* display: flexbox; */
}

.preciosSeparacion {
   margin-top: 4em;
}

.separacion {
   border-top: 0.1em solid #f9d93c;
}

.firstAlt {
   float: left;
   margin-right: 1em;
   margin-left: 1em;
   font-size: large;
}

.priceAlt {
   float: right;
   font-size: large;
   margin-left: 1em;
   margin-right: 1em;
   text-align: right;
   /* color: #ffffff; */
}

.listAlt::after {
   content: '';
   border-bottom: 0.2em solid #ffffff;
   display: block;
   overflow: hidden;
   height: 0.8em;
}

.firstAltColor {
   color: #dddf69;
   font-weight: 900;
}

.secondAltColor {
   color: #dcd11c;
   font-weight: 900;
}

.infoPequeno>h1 {
   font-size: clamp(2.3em, 4vw, 5em);
}

.infoPequeno>img {
   height: clamp(2.3em, 4vw, 5em);
}

.empanadas {
   display: grid;
   grid-template-columns: repeat(17, 1fr);
}

.tipoEmpanadas {
   grid-column: 1/13;
   margin-left: clamp(1em, 4vw, 2.5em);
   ;
   /* list-style-type: none;
   font-size: clamp(2em, 1vw, 4em); */
   /* align-items: center; */
   /* text-align: center; */

}

/* .saboresEmpandas::before {
   content: '-';
   font-size: 3em;
   /* margin-right: 10px; */
/* height: 3px; */
/* border-top: 6px solid; */
/* border-bottom: 0.1em solid #ffffff; */

/* display: block; */
/* overflow: hidden; */
/* height: 0.8em; */


.tipo {
   list-style-type: none;
   font-size: clamp(2em, 1vw, 4em);
}

.tipo>div {
   display: flex;
   align-items: center;
}

.tipo>div:nth-of-type(odd) {
   color: white;
}

.tipo>div:nth-of-type(even) {
   color: #dddf69;
}

.tipo>div:nth-of-type(odd)>span {
   border: 3px solid white;
   width: 20px;
   display: block;
}

.tipo>div:nth-of-type(even)>span {
   border: 3px solid #dddf69;
   width: 20px;
   display: block;
}

/* .tipoEmpanadas>div>span{
   border: 3px solid white;
   width: 10px;
   display: block;
} */

.sabores {
   padding-left: 0.4rem;
}

.salsasEmpanadas {
   grid-column: 13/18;
}

.salsasEmpanadas {
   border-left: 0.1em solid #f9d93c;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   /* margin: 0.1em; */
}

.salsasEmpanadas>div {
   text-align: center;
   /* border: 0.2em solid white; */
   color: #dddf69;
   font-size: clamp(1.2em, 2.5vw, 4em);
   font-weight: 950;
}

.salsasEmpanadas>div:nth-child(2) {
   color: white;
   font-size: clamp(1.5em, 3vw, 4em);
   margin-top: 0.5em;
}



.salsas>ul>div {
   /* border: 0.1em solid blueviolet; */
   margin-left: 10%;
}

.postres {
   margin-top: 1em;
}

.postres>h2 {
   color: #dddf69;
   margin-left: 1.5em;
   font-size: clamp(2em, 3vw, 4em);
}

.postres>ul {
   margin-left: 1.5em;
   margin-top: 0;
}

.cervezas>div>h2 {
   color: #dcd11c;
   margin-left: 1em;
   font-size: 1.5em;
}

.tipoCerveza {
   margin-left: 1em;
   /* font-size: clamp(2em, 1vw, 4em); */
}

.tipoCerveza>p:nth-child(n+3):nth-child(-n+6)>i {
   color: #dddf69;
}

.textoSecundario {
   color: #ffffff;
   font-size: x-large;
   font-weight: 900;
   margin-left: 1.7em;
   margin-top: 0;
}

.bebidasCalientes {
   display: grid;
   grid-template-columns: 1fr 1fr 1.5fr;
   /* justify-items: center; */
   /* align-content: center; */
   /* row-gap: 1em; */
}

.bebidasCalientes>div {
   margin-top: 0.6em;
   margin-bottom: 0.6em;
   margin-left: 1.5em;
   color: white;
   font-weight: 950;
   font-size: clamp(1.5em, 3vw, 2em);
   ;
}

.bebidasCalientes>div:nth-of-type(6n-3),
.bebidasCalientes>div:nth-of-type(6n-4),
.bebidasCalientes>div:nth-of-type(6n-5) {
   color: #dddf69;
}

.diclaimers {
   grid-column: 1/-1;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 1em;
}

.diclaimers>div {
   background-color: #f9d93c;
}

.diclaimers>div>p {
   margin-left: 1.5em;
   margin-right: 1.5em;
   font-size: clamp(1.2em, 1vw, 1.5em);
   font-weight: 950;
}

.contacto {
   /* border: 1px solid blueviolet; */
   grid-column: 1/-1;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1em;
}

.telefono {
   background-color: #f9d93c;
   font-weight: 950;
   text-align: center;
}

.contacto a {
   color: inherit;
   text-decoration: none;
}

.tel1 {
   margin-top: 0.5em;
   margin-bottom: 0;
   font-size: clamp(2em, 4vw, 4em);
}

.tel2 {
   margin-top: 0;
   margin-bottom: 0.3em;
   font-size: clamp(3.5em, 7vw, 5em);
}

.redesSociales {
   display: grid;
   grid-template-columns: 1fr 1fr;
   border: 1px solid #f9d93c;
}

.redesSociales img {
   margin-top: 0.5em;
   width: 40%;
}

.redesSociales a {
   color: white;
   font-size: large;
   font-weight: 950;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
}

.redesSociales>div>a {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

}

/* ! Ya no se usa V */



/* .titulo{
   display: grid;
   align-self: center;
} */


.header a {
   text-decoration: none;
   color: #ffffff;
}

/* TODO checar que sirva */
a+a {
   margin-left: 30px;
}

/* .container .logo {
   grid-area: logo;
   background: #f9d93c;
} */

.logo img {
   width: 80%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.container .contactMapa {
   grid-area: contactMapa;
   background: #f9d93c;
   display: grid;
   grid-template-rows: repeat(2, 1fr);
}

.container .contact a {
   text-decoration: none;
}

/* .container .menu {
   grid-area: menu;
}


.container .menu h1 {
   text-align: center;
} */






.container .precio {
   display: flex;
   justify-content: space-between;
}

.container .hotdogsEnsaladas {
   grid-area: hotdogsEnsaladas;
   /* display: grid;
   grid-template-rows: 1fr 1fr; */

}

.container .hotdogsEnsaladas .hotdogs {
   grid-row: auto;
   background: #f5c2c4;
}

.container .hotdogsEnsaladas .ensaladas {
   grid-row: auto;
}

.container .ensaladas {
   grid-area: ensaladas;
   background: #c2e0c4;
}

/* .container .empanadas {
   grid-area: empanadas;
   background: rgb(245, 242, 149);
} */

.container .alitasSalsas {
   grid-area: alitasSalsas;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
}

.container .alitasSalsas .alitas {
   grid-column: 1/3;
   background: #f4c39f;
}

.container .alitasSalsas .salsas {
   background: rgb(244, 200, 202);
}

.container .alitasSalsas .aderezos {
   background: rgb(249, 216, 182);
}

/* .container .acompaniamientos {
   grid-area: acompaniamientos;
   background: rgb(245, 242, 149);
} */

/* .container .postres {
   grid-area: postres;
   background: rgb(171, 218, 229);
} */

.container .bebidas {
   grid-area: bebidas;
   background: rgb(253, 228, 202);
}

.container .footer {
   grid-area: footer;
}

.footer img {
   width: 50%;
   height: auto;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.container .horario {
   grid-area: horario;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, auto);
}

@media screen and (max-width: 768px) {
   .container {
      grid-template-columns: repeat(1, 1fr);
      /* grid-template-areas:
         "header"
         "logo"
         "contactMapa"
         "menu"
         "hamburguesas"
         "hotdogsEnsaladas"
         "empanadas"
         "alitasSalsas"
         "acompaniamientos"
         "postres"
         "bebidas"
         "footer"
         "horario";*/
   }

   .diclaimers {
      grid-template-columns: 1fr;
   }

   .contacto {
      grid-template-columns: 1fr;
   }
}