@charset 'utf-8';
/*=============================================
ESCRITORIO (XL revisamos en 1366px en adelante)
=============================================*/
/*font import*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');


*{ padding: 0;margin: 0;
	font-family: 'Open Sans', sans-serif;
	box-sizing: border-box;
	word-break: break-word;
	/*font-family: 'Montserrat', sans-serif;*/
	font:normal normal 700 15px/20px 'Montserrat', sans-serif;
	/*font-family: 'Chewy', cursive;*/
}

*:after, *:before{padding: 0;margin: 0;box-sizing: inherit;
}

ul, ol{
	list-style:none;
}

a:visited, a:link, a:focus, a:hover, a:active{
	list-style:none;
	text-decoration: none;
}

img{
	max-width: 100%;
}

/*=============================================
HEADER
=============================================*/

header{
	position:fixed;
	top:0;
	left:0;
	z-index:2;
	background: rgba(0,0,0,.5);
}

header .logotipo{
	width:45%;
}

.redes ul li i{
	width:35px;
	line-height: 35px;
	text-align:center;
	cursor:pointer;

}

i.fa-bars{
	font-size:35px;
}

.fa-search, .fa-bars{
	color:white;
}

.redesMovil{
	position:fixed;
	bottom:-10px;
	left:50%;
	z-index:10;
	transform: translate(-50%, 0%);
}

/*=============================================
MENÚ
=============================================*/

.menu{
	position:fixed;
	top:0;
	left:0;
	z-index:100;
	width:100%;
	height:100%;
	background: rgba(0,0,0,.8);
	overflow-x:hidden;
	font-weight:300;
	display:none;
	line-height:70px;
}

.menu li{
   margin-top:22.5px;
}

.menu li a{
  font-size:30px;

}

.btnClose{
	position:absolute;
	top:100px;
	right:25%;
	color:white;
	font-weight: 800;
	cursor: pointer;
}

.menu .nav{
	margin-top:10%;
}



/*=============================================
GRIDFOOTER CATEGORIAS
=============================================*/
footer{
	background:black;
	color:white;
}

footer .grid_categorias_footer{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap:.5rem;
}

footer .grid_categorias_footer a{
color:white;
}

/*footer .grid_categorias_footer h3:first-child{
  grid-column: span 3/span 4;
  font-size:20px;
}*/

footer .grid_categorias_footer div h2{
   font-size:25px;
   text-align: center;
   margin-bottom: 15px;
}

footer .grid_categorias_footer div ul.categoria_destacada li{
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
  width: 95%;
  margin-left: 2.5%;
  margin-right: 2.5%;
}

footer .grid_categorias_footer div ul.categoria_destacada li a p{
display: inline-block;
font-size:16px;
font-weight: 350;
word-spacing: 5px;
text-align: center;
margin:2px auto;
}


/*=============================================
SCROLL UP
=============================================*/

#scrollUp{
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	background: url(../img/flecha.jpg);
}

/*=============================================
TABLET HORIZONTAL (LG revisamos en 1024px)
=============================================*/

@media (max-width:1199px) and (min-width:992px){

	.menu .nav{
		margin-top:15%;
	}
    
}

/*=============================================
TABLET VERTICAL (MD revisamos en 768px)
=============================================*/

@media (max-width:991px) and (min-width:768px){

	header .logotipo{
		width:55%;
	}

	.btnClose{
		right:15%;
		top:70px;
	}

	.menu .nav{
		margin-top:20%;
	}

	.gridFooter figure{
		border-top:2px solid white;
		border-bottom:2px solid white;
		border-left:2px solid white;
		border-right:2px solid white;
	}

	.gridFooter figure p{
		font-size:12px;
	}
    
}

/*=============================================
MÓVIL HORIZONTAL (SM revisamos en 576px)
=============================================*/

@media (max-width:767px) and (min-width:576px){

	header .logotipo{
		width:65%;
	}

	.btnClose{
		left:15%;
		top:50px;
	}

	.menu .nav{
		margin-top:25%;
	}

	footer .grid_categorias_footer{
        grid-template-columns:1fr; 
        grid-row-gap: 1rem;
        grid-column-gap: 0;
	}

	footer .grid_categorias_footer div h2{
       font-size: 20px;
	}

	footer .grid_categorias_footer div ul.categoria_destacada li a p{
       font-size:15px;
	}
    	
}

/*=============================================
MOVIL VERTICAL (revisamos en 320px)
=============================================*/

@media (max-width:575px){

	header .logotipo{
		min-width:85%;
		height: 60px;
	}

	.redesMovil li{
       width: 15%;
	}

	.redesMovil li i{
      font-size: 18px;
	}
    

	.btnClose{
		left:5%;
		top:10px;
	}

	.menu .nav{
		margin-top:25%;
		font-size:20px;
		line-height:40px;
	}
    
    .menu li{
    	margin-top: 10px;
    }

	.menu li a{
      font-size:20px;
     
    }

	#scrollUp{
        bottom: 50px;
	}

	footer .grid_categorias_footer{
        grid-template-columns:1fr; 
        grid-row-gap: 1rem;
        grid-column-gap: 0;
	}

}

@media (max-width: 320px){
   
   header .logotipo{
   	width: 100%;
   }

   header i.fa-bars{
      font-size: 30px;
      margin-top: 5px;

	}

  .menu li{
    font-size: 5px;
  } 



}