/* estilos_comunes.css */
/* reglas generales para todas las paginas del sitio */
 
/* estandares del cliente */
/* colores primarios: #562912 = rgb(86, 41, 18), #744A27 = rgb(116, 74, 39) */
/* colores secundarios: #D3D3D3 = rgb(211, 211, 211) */

/* tipografia pirmaria y secundaria: DM sans, helvetica world */

:root {
	--primary-color1: #562912;
	--primary-color2: #744A27;
	--bg-color1: #F4F4F4;
	--bg-color2: #D3D3D3;
	--bg-color3: #DDDDDD;
	--bg-hover1: #EFEFEF;
	--bg-hover2: #C7C7C7;
	--icon-bg-color1: #FCFCFC;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: verdana, arial, helvetica, sans-serif;
	padding: 0;
	background-color: #F4F4F4;
	color: #616161;
}

 header {
	font-family: helvetica, arial, sans-serif;
	background-color: var(--primary-color1);
	color: white;
}

main a {
	color: var(--primary-color1);
}

main a:hover {
	text-decoration: none;
}

/* MENU: seccion para el menu de navegacion */
/* comunes a todas las paginas del sitio */

/* div con boton de desplegar menu en celulares 
	oculta por defecto en pantallas mas grandes*/
.toggle-container {
	position: relative;
	margin: auto;
}

#btn-toggle {
	display: none;
}

/* ul contenedor */
.navigation-menu {
	list-style-type: none;
	margin: 0 auto;
	display: flex;
}

.navigation-menu li {
	background-color: #F4F4F4;
}

/* redondeo bordes del primer y ultimo elemento visible de la lista PRINCIPAL igual a los bordes de la lista en si
	para que al pasar el mouse y el color de fondo cambie no se vea cuadrado de nuevo */
.navigation-menu > li:first-child {
	border-radius: .5rem 0 0 .5rem;
}

.navigation-menu > li:last-child {
	border-radius: 0 .5rem .5rem 0;
}

.navigation-menu li a {
	display: block;
	color: var(--primary-color2);
	text-decoration: none;
	padding: 1rem 1.5rem;
	font-weight: bold;
}

.navigation-menu li:hover {
	background-color: #E4E4E4;
}

/* menu secundario (li dropdown) */
.submenu {
	position: relative;
}

/* ul del submenu */
.submenu-content {
	list-style-type: none;
	position: absolute;
	display: none;
	z-index: 3;
}

.submenu-content li {
	background-color: #F4F4F4;
	white-space: nowrap;
}

.submenu-content li:last-child {
	border-radius: 0 0 .5rem .5rem;
}

.submenu:hover .submenu-content {
	display: flex;
	flex-direction: column;
}

[hidden] {
	display: none !important;
}

/* fin de seccion: MENU */

/* MAIN: seccion para elementos del cuerpo de pagina */

/* estilo general button links */
/* comunes a todas las paginas del sitio */
.a-buttons {
	display: inline-block;
	padding: 1.3rem 2rem;
	background-color: var(--primary-color2);
	color: white;
	text-decoration: none;
	border-radius: .8em;
	box-shadow: .15rem .35rem .35rem .15rem rgba(86, 41, 18, .4);
	transition: all .2s ease-in;
}

.a-buttons:hover, .a-buttons:focus {
	background-color: var(--primary-color1);
	box-shadow: .12rem .25rem .25rem .1rem rgba(86, 41, 18, .4);
}

.a-buttons:active {
	transform: translate(0.1rem, 0.1rem);
	box-shadow: .1rem .2rem .2rem .08rem rgba(86, 41, 18, .6);
}

/* overlay para evitar interaccion directa del usuario
	con las imagenes en todas las paginas del sitio */

.overlay-wrapper {
	position: relative;
}

.overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: url("../imgs/aery-logo.png");
	background-position: center;
	background-size: 24rem;
	opacity: .1;
	user-select: none;
	pointer-events: auto;
}

/* estilos de elemnetos de formulario */
input[type=text],
input[type=number],
input[type=tel],
input[type=password],
input[type=date],
input[type=time],
input[type=email],
input[type=search],
input[type=button],
textarea,
button {
	border: 1px solid var(--primary-color2);
	border-radius: .3rem;
	color: var(--primary-color2);
	font-family: inherit;
	font-size: 1.1rem;
	margin: .5rem 0;
	padding: .5rem 1rem;
	outline: none;
	user-select: none;
}

button {
	margin: .4rem 0;
	background-color: var(--bg-color2);
	color: var(--primary-color1);
	padding: 1rem;
	font-weight: bold;
	border: 1px solid var(--primary-color1);
}

input[type=text]:hover,
input[type=number]:hover,
input[type=tel]:hover,
input[type=password]:hover,
input[type=date]:hover,
input[type=time]:hover,
input[type=email]:hover,
input[type=search]:hover,
input[type=button]:hover,
textarea:hover,
button:hover {
	box-shadow: inset -1px -1px 3px var(--primary-color2);
}

input[type=button]:hover,
button:hover {
	box-shadow: inset -1px -1px 3px var(--primary-color2);
 	background-color: #B1B1B1;
}

input[type=text]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=password]:focus,
input[type=date]:focus,
input[type=time]:focus,
input[type=email]:focus,
input[type=search]:focus,
input[type=button]:focus,
textarea:focus,
button:focus {
	box-shadow: inset -1px -1px 1.5px var(--primary-color2);
}

input[type=button]:hover,
button:active {
	background-color: #A0A0A0;
	box-shadow: none;
}

input[type=text]::placeholder,
input[type=number]::placeholder,
input[type=tel]::placeholder,
input[type=password]::placeholder,
input[type=email]::placeholder,
input[type=search]::placeholder,
textarea::placeholder {
	color: var(--primary-color2);
}

/* fin de seccion: MAIN */

/* FOOTER: estilos del pie de pagina */

footer {
	background-color: var(--primary-color1);
	opacity: .89;
	padding: 1.5rem 1.5rem 0.5rem 1.5rem;
}

footer, footer a {
	color: white;
}

footer a:hover {
	text-decoration: none;
}

footer address {
	padding: .5em;
	font-size: 1.1rem;
	text-align: center;
}

.iconos {
	font-size: 1.8rem;
	margin: .5rem;
}

/* fin de seccion: FOOTER */

/* MEDIA QUERIES: reglas para vista en dispositivos moviles */

/* celulares y tablets estandar */
@media only screen and (max-width: 772px) { /* debe coincidir con effects.js */
	/* vista de menu en vertical */
	.navigation-menu, .submenu-content {
		flex-direction: column;
		margin: 0;
	}

	/* en celulares se ve mejor sin bordes redondeados */
	.navigation-menu li:first-child,
	.navigation-menu li:last-child,
	.submenu-content:last-child {
		border-radius: 0;
	}

	.navigation-menu {
		position: absolute;
		top: 3rem;
		z-index: 3;
		width: 100%;
	}

	.navigation-menu li {
		display: none;
		background-color: #E4E4E4;
	}

	.navigation-menu li:hover {
		background-color: var(--bg-color2);
	}

	.submenu-content {
		display: block;
		position: relative;
		text-indent: 5vw;
	}

	.submenu-content li i {
		text-indent: 0;
	}

	.toggle-container {
		display: inline-block;
		margin: 0;
	}

	#btn-toggle {
		display: inline-block;
		background-color: #E4E4E4;
		color: black;
		padding: 1rem;
	}
}

/* tablets mas grandes */
@media only screen and (min-width: 773px) and (max-width: 1024px) and (orientation: portrait) {
	/* vista de menu en vertical */
	.navigation-menu, .submenu-content {
		flex-direction: column;
		margin: 0;
	}

	/* en celulares se ve mejor sin bordes redondeados */
	.navigation-menu li:first-child,
	.navigation-menu li:last-child,
	.submenu-content:last-child {
		border-radius: 0;
	}

	.navigation-menu {
		position: absolute;
		top: 3rem;
		z-index: 3;
		width: 30vw;
	}

	.navigation-menu li {
		display: none;
		background-color: #E4E4E4;
	}

	.navigation-menu li:hover {
		background-color: var(--bg-color2);
	}

	.submenu-content {
		display: block;
		position: relative;
		text-indent: 3vw;
	}

	.toggle-container {
		display: inline-block;
		margin: 0;
	}

	#btn-toggle {
		display: inline-block;
		background-color: #E4E4E4;
		color: black;
		padding: 1rem;
	}
}

/* fin de seccion: MEDIA QUERIES */