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

html{
	font-size: 62.5%;
}

body{
	font-size: 1.6rem;
	background-color: #ccc;
}

.caja{
	border: 1px solid #888;
	border-radius: 0.6rem;
	margin-top: 1rem;
	transition: 500ms all ease;
	text-align: center;
	font-size: 1.6rem;
	padding: 0.6rem;
}

.caja:hover{
	border-color: #ff9d00;
}

.caja:focus{
	border: 2px solid #ff9d00;
}

.btn{
	border: 1px solid #6f4400;
	background-color: #ffc880;
	border-radius: 0.6rem;
	margin: 1rem auto;
	transition: 500ms all ease;
	color: #6f4400;
	font-size: 1.6rem;
	box-shadow: 0 0.1rem 0.6rem #6f4400;
	padding: 0.6rem;
}

.btn:hover{
	background-color: #ffb355;
}

.btn:active{
	border: 2px solid #6f4400;
}

.main{
	background-color: #ddd;
	width: 60%;
	margin: 10rem auto 0 auto;
	padding-bottom: 1rem;
	border-radius: 0.3rem;
	border: 0.2rem solid #684000;
}

	.title-main{
		padding: 1rem;
		text-align: center;
		background-color: #fff;
	}
	
	.productos{
		background-image: linear-gradient(
			orange 20%,
			#ddd 60%
		);
		display: flex;
		flex-direction: row;
		border-top: 2px solid #604300;
	}
	
		.productos > article{
			width: 50%;
		}
		
			.article-productos, .ventana-productos{
				padding: 2rem;
			}
			
				.article-productos input{
					width: 100%;
					padding: 0.9rem;
				}
				
				.intentos{
					text-align: center;
				}
				
		.ventana-productos{
			text-align: center;
		}
		
			.texto-ventana{
				width: 30%;
				margin: 0 auto;
				margin-top: 2rem;
				background-color: #fff;
				padding: 1rem;
				border-radius: 0.3rem;
				border: 2px solid #604300;
			}
			
	.mensaje-info{
		width: 80%;
		margin: 1rem auto;		
		border-radius: 0.6rem;
		background-color: #ff9f80;
		padding: 1rem;
		opacity: 0;
		transition: 500ms all ease;
		
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}.mensaje-info.correcto{
		background-color: #caffaa;
	}
	
		.icono-mensaje-info{
			padding: 1rem 2rem;
			background-color: #ff7455;
			border-radius: 0.6rem;
			font-weight: bold;
			color: #9a0600;
			margin-left: 1rem;
		}.icono-mensaje-info.correcto{
			background-color: #afff6a;
			color: #327e00;
		}
		
		.parrafo-mensaje-info{
			font-size: 1.8rem;
			font-weight: bold;
			color: #9a0600;
		}.parrafo-mensaje-info.correcto{
			color: #327e00;
		}
		
@media screen and (max-width: 60rem){
	.main{
		width: 100%;
	}

	.productos{
		flex-direction: column;
	}
	
	.productos{
		width: 100%;
	}
	
		.productos > article{
			width: 100%;;
		}
	
	.article-productos{
		order: 2;
	}
	
	.ventana-productos{
		order: 1;
	}
}