@import url('reset.css');

/*--- Variables ---*/
:root {
	--azul:#0C3C60;
	--blancoclaro:#D7DFE5;
	--amarillo:#F8CE5B;
}

/*-------- ESTILOS GENERALES --------*/
body {
	background:#F1F0ED;
	font-family:Arial, Helvetica, Sans-serif;
}
a {text-decoration:none;color:#000;}

.contenedor {
	overflow:hidden;
	width:100%;
	display:grid;
	grid-gap:20px;
	justify-content: space-evenly;
	grid-template-columns:repeat(4, 1fr);
	grid-template-rows:repeat(6, auto);

	grid-template-areas:"header				header			header			header"
						"buscador 			buscador		buscador		buscador"
						"subtitulo 			subtitulo		subtitulo		subtitulo"
						"cont_neg_1 		cont_neg_2		cont_neg_3		cont_neg_4"
						"cont_neg_5         cont_neg_6      cont_neg_7      cont_neg_8"
						"footer 			footer			footer			footer";
}

/*--- Header ---*/
.contenedor .header{
	width:100%;
	grid-area:header;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #e4e0e0 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e4e0e0 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffffff 0%,#e4e0e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e4e0e0',GradientType=0 ); /* IE6-9 */
}

/*-------- Logo --------*/
.contenedor .header .logo {margin:35px 20px;position:absolute;}
.contenedor .header .logo a {
	font-size:25px;
	font-family:raleway-regular;
	color:#000;
}
.contenedor .header .logo a span{color:var(--amarillo);}

/*-------- Menú de navegación --------*/
.contenedor .header .nav{text-align:right;margin:20px;}

.contenedor .header .nav ul li{display:inline;}

.contenedor .header .nav ul li a {
	font-size:18px;
	margin: 10px;
	padding:10px;
	color:black;
	font-family:opensans-regular;
	border-radius:2px;
}

.contenedor .header .nav ul li a:hover {color:#000;background:var(--amarillo);}

/*--- Selector de modeda ---*/
.contenedor .header .nav ul li .moneda {display: inline;}

.contenedor .header .nav ul li .moneda select {
	padding:8px 0px;
	border-radius:2px;
	width:60px;
	margin:10px 10px 0px 40px;
	background:transparent;
	color:#000;
	border:none;
	font-family:raleway-regular;
	font-size: 18px;
}

.contenedor .header .nav ul li .moneda select:focus{outline:none;}

.contenedor .header .nav ul li .moneda select:hover{cursor: pointer;color:#000;background:var(--amarillo);}

/*-------- Carrito de compras --------*/
.contenedor .header .nav ul li .carrito {
	width:45px;
	height:45px;
	border:none;
	background:transparent;
	float:right;
}

.contenedor .header .nav ul li .carrito:focus{outline:none;}

.contenedor .header .nav ul li .carrito:hover{
	background:var(--amarillo);
	border-radius:2px;
	cursor:pointer;}

.contenedor .header .nav ul li .carrito img{
	width:30px;
	height:30px;
	margin-top:5px;
	margin-right:2px;
}

/*-------- Imagen fondo navegador --------*/
.contenedor .buscador {
	width:100%;
	height: 500px;
	background-image:url(../imagenes/fondo_3.jpg);
	grid-area:buscador;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/*-------- Texto del buscador --------*/
.contenedor .buscador form p {
	color:#000;
	font-size:47px;
	font-family:raleway-semibold;
	text-align:center;
}

/*--- Barra de búsqueda ---*/
.contenedor .buscador .barra {
	font-family:Raleway-regular;
	font-size: 14px;
	padding:2% 1% 2% 2%;
	width: 70%;
	border-radius:5px;
	border:1px solid #fff;
	margin:auto;
	margin-top:30px;
	display:block;
}

.contenedor .buscador .barra:focus{
	outline:none;
	border:1px solid #000;
	border-radius:5px;
	transition: border 0.3s;
}

/*-------- Subtitulo -------*/
.contenedor .subtitulo{
	font-size:34px;
	font-family:raleway-semibold;
	margin:20px;
	width:100%;
	grid-area:subtitulo;
}

/*-------- Negocios --------*/
.contenedor .cont_neg_1{grid-area:cont_neg_1;}
.contenedor .cont_neg_2{grid-area:cont_neg_2;}
.contenedor .cont_neg_3{grid-area:cont_neg_3;}
.contenedor .cont_neg_4{grid-area:cont_neg_4;}
.contenedor .cont_neg_5{grid-area:cont_neg_5;}
.contenedor .cont_neg_6{grid-area:cont_neg_6;}
.contenedor .cont_neg_7{grid-area:cont_neg_7;}
.contenedor .cont_neg_8{grid-area:cont_neg_8;}

.contenedor .cont_neg_1,
.contenedor .cont_neg_2,
.contenedor .cont_neg_3,
.contenedor .cont_neg_4,
.contenedor .cont_neg_5,
.contenedor .cont_neg_6,
.contenedor .cont_neg_7,
.contenedor .cont_neg_8{
	height: 200px;
	/*position:relative;*/
	justify-content: space-evenly;
}

.contenedor .cont_neg_1 img, 
.contenedor .cont_neg_2 img, 
.contenedor .cont_neg_3 img,
.contenedor .cont_neg_4 img,
.contenedor .cont_neg_5 img,
.contenedor .cont_neg_6 img,
.contenedor .cont_neg_7 img,
.contenedor .cont_neg_8 img{
	width:100%;
height: 80%;
	border-radius:11px;
}

.contenedor .fond_neg_1, 
.contenedor .fond_neg_2, 
.contenedor .fond_neg_3,
.contenedor .fond_neg_4,
.contenedor .fond_neg_5,
.contenedor .fond_neg_6,
.contenedor .fond_neg_7,
.contenedor .fond_neg_8{
	width:100%;
	/*position:absolute;*/
	top:70%;
	/*background:#fff;*/
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	font-size:20px;
	font-family:raleway-regular;
}

/*.contenedor .cont_neg_1 .text_neg_1, 
.contenedor .cont_neg_2 .text_neg_2, 
.contenedor .cont_neg_3 .text_neg_3,
.contenedor .cont_neg_4 .text_neg_4,
.contenedor .cont_neg_5 .text_neg_5,
.contenedor .cont_neg_6 .text_neg_6,
.contenedor .cont_neg_7 .text_neg_7,
.contenedor .cont_neg_8 .text_neg_8{padding:15px 0px 0px 17px;}*/

.contenedor .cont_neg_1 .text_neg_1:hover{text-decoration:underline;} 
.contenedor .cont_neg_2 .text_neg_2:hover{text-decoration:underline;} 
.contenedor .cont_neg_3 .text_neg_3:hover{text-decoration:underline;}
.contenedor .cont_neg_4 .text_neg_4:hover{text-decoration:underline;}
.contenedor .cont_neg_4 .text_neg_5:hover{text-decoration:underline;}
.contenedor .cont_neg_4 .text_neg_6:hover{text-decoration:underline;}
.contenedor .cont_neg_4 .text_neg_7:hover{text-decoration:underline;}
.contenedor .cont_neg_4 .text_neg_8:hover{text-decoration:underline;}

/*-------- Footer --------*/
.contenedor .footer {
	width:100%;
	height: 100px;
	background:#000000;
	font-family:raleway-regular;
	font-size:20px;
	color:#fff;
	text-align:center;
	grid-area:footer;
}
.contenedor .footer p{
	height: 200px;
}

/*--- Página responsive ---*/
@media screen and (max-width: 768px){
	.contenedor {
		grid-template-areas:"header				header"
							"buscador 			buscador"
							"subtitulo 			subtitulo"
							"conte_negocio_1 	conte_negocio_1"
							"conte_negocio_2 	conte_negocio_2"
							"conte_negocio_3 	conte_negocio_3"
							"conte_negocio_4 	conte_negocio_4"
							"footer 			footer";
	}
}