html {
  scroll-behavior: smooth;
}
body {
  margin:0px;
  padding:0px;
}
.contene{
	grid-template: 0.5fr 1fr 0.5fr/ 1fr;   
	grid-template-areas: "header header"    
						 "section section"
						 "footer footer";
	background-image : url("../Img/bg_gris.png");
	background-size: round;
}

header{
	display: grid;
	grid-area: header;
	text-align: center;
}

.front{
	display: grid;
	grid-row: 1/2;
	grid-column-template: repeat(3 1fr);
}
.front img{
	display: grid;
	grid-column: 2/3;
	width: 175px;
  height: auto;
  min-height: 110px;
	margin: 15px;
}

section{
	display: grid;
	grid-area: section;
	grid-template: 50px 1fr;
	align-content: center;
	justify-content: center;	
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}

.categorias{
	display: none;
	border-radius: 5px;
	margin: 0px 5px 5px 5px;
	height: auto;
	overflow: auto;
	min-height: 500px;
}

#btn1, #btn2, #btn3, #btn4, #btn5, #btn6, #btn7, #btn8, #btn9, #btn10, #btn11, #btn12, #btn13, #btn14{
 	display: none;
}

.tituloServicio{
	font-family: serif;
	display: grid;
	grid-row: 1/2;
	font-size: 22px;
	justify-content: center;
	align-content: center;
	color: #000;
	font-family: 'Lora', serif;
}

.tituloServicio h2 {
	grid-column: 2/3;
	margin: 15px;
	color: #101010;
}

.cardView{
	display: grid;
	grid-row: 2/3;
	grid-gap: 100px;
	margin-bottom: 30px;
	grid-template-rows: repeat(2, 1fr);
	grid-template-columns: 1fr 1fr;	
}
.cardView article {
	box-shadow: -10px 10px 15px rgb(0,0,0,0.23); 
	background-color: #fff;
	border-radius: 5px;
	width: 300px;
	height: 225px;
}

.cardView article .tituloCard{
	font-size: 50px;
}

.cardView a{
	font-size: 35px;
	text-shadow: 3px 3px 4px black;
	color: white;
	font-weight: 550;
	text-decoration: none;
}

.categorias ul li{
	max-width: 500px;
	height: auto;
	display: grid;
	grid-template-columns: 2fr 1fr;
	padding: 0px;
	box-shadow: 0px 2px 0px 0px #fff;
	font-size: 18px;
	font-weight: 550;
	margin: 5px;
}

.carta {
	display: none;
}

.carta button {
	font-size: 15px;
	margin: 10px;
  border: none; 
  color: black; 
  padding: 12px 16px; 
  cursor: pointer; 
  border-radius: 5px; 
  background-color: gainsboro; 
  border: 2px solid #cacaca;
}

.carta button a{
	font-weight: bold;
	text-decoration: none;
	margin-right:5px;
}

.carta button a i{
	width: 50px;
}

.categorias ul{
	padding-inline-start: 0px;
	margin: 10px;
	margin-top: 10px;
}

a{
	color: black;
	font-family: inherit;
}

.menuCategoria{
	background-size: cover;
	text-align: left;
	border-radius: 2px;
	text-transform: uppercase;
	padding-left: 5px;
	padding-top: 10px;
	color:#fff;
	font-size: 19px;
	text-shadow: 1px 1px 1px black;
	letter-spacing: 2px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
}

.producto{
	display: grid;
	grid-column: 1/2;
	grid-row: 1/2;
	width: 250px;
	text-align: left;
	padding-top: 10px;
	font-size: 18px;
	font-family: 'Lora', serif;
	font-weight: bold;
}

.precio{
	display: grid;
	grid-column: 2/3;
	grid-row: 1/2;
	text-align: right;
	padding-top: 10px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
}

.descripcion{
	display: grid;
	grid-column: 1/3;
	grid-row: 2/3;
	padding-top: 5px;
	text-align: left;
	padding-bottom: 10px;
	font-size: 13px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
}

.aclaracion{
	display: grid;
	grid-column: 1/3;
	grid-row: 1/3;
	padding-top: 5px;
	text-align: left;
	padding-left: 15px;
	padding-bottom: 10px;
	font-size: 16px;
	color:#f29120;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
}
section .contacto {
	margin-bottom : 10px;
	justify-content: center;
	align-content: center;
	display: flex;
	grid-gap: 30px;
}

section .contacto button{
	outline:none;
	cursor: pointer;
	border-radius:10px;
	width: 30px;
	height: 30px;
}

footer{
	display: grid;
	grid-area: footer;
	justify-content: center;
	align-content: center;
	padding: 10px;
	background-image : url("../Img/bg_grisOscuro.png");
	background-repeat: round;
	color: #fff;
	font-size: 15px;	
	text-align: center;
	font-weight: 550;
}

footer .frase1 a{
    color: white !important;
}


@media (max-width: 432px) {

	.categorias ul li{
		font-size: 15px;
	}

}

@media (max-width: 600px) {

	section .contacto {
		grid-gap: 50px;
	}

}

@media (max-width: 800px) { 

	.cardView{
		grid-template-rows: repeat(4, 1fr);
		grid-template-columns: 1fr;	
		display: grid;
		align-content: center;
		justify-content: center;
		grid-gap: 0px;
	}

	.cardView article {
		margin-top: 40px;
	}

	article{
		display: grid;
		align-content: center;
		justify-content: center;
	}

}

@media (min-width: 880px) and (max-width: 2048px)  {							

	.cardView{
		display: grid;
		grid-gap: 40px;
	}

	.cardView article .img{
		width: 100%;
	}

	.categorias ul li{
		max-width: 800px;
		
	}

	.producto{
		width: 500px;

	}

	#menu1, #menu2, #menu3, #menu4, #menu5, #menu6, #menu7, #menu8, #menu9, #menu10, #menu11, #menu12, #menu13, #menu14{
		height: 800px;
	 }

}