*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		outline: none;
		font-family: "arial", serif;
}

:root{
		--ColorGrisClaro: #ccc;
		--ColorGris3: #c5c5c5;
		--ColorGris2: #d9d9d9;
		--ColorGris1: #ececec;
		--ColorGris: #f4f4f4;
		--ColorGris-1: #f9f9f9;
		--ColorAzul2: #4077ff;
		--ColorAzul1: #2b96ff;
		--ColorAzul: #55acff;
		--ColorAzul-1: #bfd5ff;
}

body{
		background-color: var(--ColorGrisClaro);
}

a{
		text-decoration: none;
		color: blue;
}a:hover{text-decoration: underline;}

input[type="text"], input[type="number"]{
		display: block;
		width: 100%;
		padding: 10px;
		margin-bottom: 10px;
		border: 1px solid var(--ColorGris1);
		border-radius: 3px;
		font-size: 15px;
		transition: 500ms ease all;
}input[type="text"]:hover, input[type="number"]:hover{
		border-color: var(--ColorAzul);
		box-shadow: 3px 3px 6px var(--ColorAzul-1);
}

.Error{
		border-color: red;
		box-shadow: 0px 1px 6px red;
}

.Header{
		background-color: var(--ColorAzul);
		overflow: hidden;
}

		.Menu a, .AcercaDe a{
				display: block;
				text-decoration: none;
				color: #fff;
				font-weight: bold;
				padding: 20px;
				transition: 500ms ease all;
		}
		
		.Menu a:hover, .AcercaDe a:hover{color: var(--ColorAzul2); text-decoration: underline;}
		
		.Menu{float: left; margin-left: 10%;}
		.AcercaDe{float: right; margin-right: 10%;}
		
.SecBlanco{
		padding: 30px;
		background-image: linear-gradient(
				var(--ColorAzul) 16%,
				#fff 80%
		);
}

		.ContTexto{
				width: 80%;
				margin: 0 auto;
				text-align: center;
		}

.Contenedor-Completo{
		padding: 30px;
		background-color: var(--ColorGris-1);
}

		.Seccion{
				width: 80%;
				margin: 0 auto;
				overflow: hidden;
		}
		
				.Seccion article{
						width: 33.3333333%;
						float: left;
						padding: 20px;
						text-align: center;
				}#idWidth100{
					display: block;
					width: 100%;
					float: none;
					clear: both;
				}#IdBtn3{
					display: block;
					width: 100%;
				}
				
						.Btn{
								display: block;
								width: 60%;
								margin: 0 auto;
								background-color: var(--ColorAzul);
								padding: 10px;
								border-radius: 3px;
								box-shadow: 0px 3px 6px var(--ColorAzul2);
								font-weight: bold;
								cursor: pointer;
						}
						
						.Btn:hover{
								background-color: var(--ColorAzul1);
								box-shadow: 0px 3px 6px var(--ColorAzul2);
						}
						
				.Botones{
						margin-bottom: 30px;
						background-color: var(--ColorGris1);
						padding: 10px;
						border-radius: 3px;
						overflow: hidden;
				}
				
				.ContVentanas{
						overflow: hidden;
				}
				
				.Ventana, .Ventana1{
						display: block;
						width: 90%;
						margin: 30px auto;
						border: 3px solid var(--ColorGris1);
						border-radius: 3px;
						padding: 20px;
				}.Ventana1{
						margin: 30px auto;
						background-color: var(--ColorGris1);
						max-height: 500px;
						overflow: auto;
				}
				
						.Producto{
								display: inline-block;
								width: 100%;
								background-color: var(--ColorGris);
								padding: 10px;
								border-radius: 3px;
								margin: 10px;
								overflow: hidden;
						}
				
.SubFooter{
		background-color: var(--ColorGris);
		text-align: center;
		padding: 10px;
		border-top: 1px solid var(--ColorGris1);
}

		.Pd{
			padding: 5px 10px;
			text-overflow: ellipsis;
			white-space: normal;
		}
		
		.Hr{
				border-bottom: 1px solid var(--ColorGris2);
				font-weight: bold;
				color: var(--ColorGris3);
		}.Hr1{
				border-bottom: 1px solid var(--ColorGris1);
		}.Principal{text-align: center; font-weight: bold;}
				
.Footer{
		background-color: var(--ColorGris1);
		padding: 26px;
		border-top: 1px solid var(--ColorGris2);
		text-align: center;
}

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

		.Contenedor-Completo{
				padding: 0;
		}

				.Seccion, ContTexto, .Contenedor-Completo{
						width: 100%;
						margin: 0;
						padding: 0;
				}
				
						.Ventana, .Ventana1{
								width: 80%;
								float: none;
						}.Ventana1{margin: 10px auto;}
						
						.Btn{
								width: 100%;
						}
}