@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

.montserrat-<uniquifier> {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}



*{ box-sizing: border-box; }




/* portadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */

#puertas-portada{ width: 100%;background: url(img/accesorios/portada-accesorios.jpg);
			     background-size: cover;
				 background-position: center center;
	             position: relative;}


.puertas-portada-titulo{ width: 100%;
						height: 600px;
						position: relative;}


.puertas-portada-titulo-contenido{ width: 100%;					
								  position: absolute;
								  top: 75%;
								  left: 50%;
								  transform:translateX(-50%) translateY(-75%);
								  text-align: center;}

.puertas-portada-titulo-contenido h1{ font-family: "renogare";
									 font-size: 60px;
									 color:#111;
									 margin: 0;
									 line-height: 60px;
									 position: relative;letter-spacing: -1px;
									 width:290px;
									 margin: 0 auto;
									 z-index: 2}

.puertas-portada-titulo-contenido h1 img{ width: 100%;
										 max-width: 90px;
										 position: absolute;
										 top: -70px;
										 right: -25px;
										 z-index: -1 }



.puertas-portada-titulo-contenido h2{ font-family: "ebrima",sans-serif;
									 font-size: 45px;
									 color:#111;
									 margin: 0;
									 position: relative;
									 letter-spacing: -1px;
									 line-height: 40px;
									 z-index: 2 }












/*guiaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa */
#puertas-guia{ width: 100%;
			  margin: 0px 0px 20px 0px;
			  padding: 0px 15px 0px 15px;}

.puertas-guia{ width: 100%;
			  padding: 10px 0px 10px 0px;
			  position: relative;}

.puertas-guia ul{ padding: 0;
				 margin: 0;
				 display: flex;}

.puertas-guia ul li{ list-style: none; }

.puertas-guia ul li a{text-decoration: none;
					 padding: 0px 5px 0px 5px;
					 display: block;
					 font-family: "Montserrat";
					 color: #444;
					 font-size: 13px}
					    

.resaltar{ color: #222;font-weight: 600 }					    

.puertas-guia ul li a:hover{ color: #ff0000 }



/*btnn griddddddddddd*/
.suministros-grid{  width: 60px;
					height: 30px;
					background-color: #efefef;
					border-radius: 10px;
					position: absolute;
					top: 0;
					right: 0;
					cursor: pointer;
					z-index: 6}

/*iconoo grid*/
.suministros-grid-icono{ width: 30px;
						 float: left;
						 height: 30px;
						 text-align: center;}

.suministros-grid-icono span{ line-height: 30px;
							  color: #222}					 

/*iconoo numeroo*/
.suministros-grid-texto{ width: 30px;
						 float: left;
						 height: 30px;
						 text-align: center;
						 position: relative;
						}

.suministros-grid-texto li{ position: absolute;
	                        width: 30px;
	                        height: 30px;
	                        font-family: "Montserrat";
							font-size: 12px;
						    color: #222;
						    list-style: none;
						    background-color:#efefef;
						    padding: 7px 0px 0px 0px;
						    text-align: center;}

.suministros-grid-texto li span{ font-size: 10px;}

/*menuu gridd*/
.suministros-grid-menu{ width: 60px;
						height: 60px;
						background-color: #222;
						position: absolute;
						top: 35px;
						left: 0}

.suministros-grid-menu-btn{ width: 100%;
							height: 30px;
							text-align: center;
						    border-bottom: 1px solid#ddd;
						    color: #fff;
						    cursor: pointer;}

.suministros-grid-menu-btn:nth-child(2){border-bottom: 0px solid#ddd}

.suministros-grid-menu-btn:hover{ background-color: #ff0000;
								  color: #fff }
						    
.suministros-grid-menu-btn p{ font-family: "Montserrat";
							  font-size: 12px;
							  margin: 0;
							  line-height:30px }


/*griddd22222*/
#grid2{ display: none; }







/* accesorioooooooooooooooooooooooooooooooooooooooooooooossssssssssssssssssssssssssssssssssssssssssssss */

#puertas{ width: 100%;
		 padding:0px 20px 100px 20px;}


/* contenidoooooooooooooooooooooooooooooooooooooooooo */


/* sector111111111111111111111111 contenido de buscador y menu verticall */
.puertas-sector1{ width: 30%;
				 float: left;
				 padding: 20px;
				 background-color: #efefef}


/* buscadorrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr*/
.puertas-sector1-buscador{ width: 100%;
	                      position: relative;
	                      height: 60px;}



/* menuuu verticallllllllllllllllllllllllllll */	
.puertas-sector1-menu { width: 100% ;
	                    float: left;}

.puertas-sector1-menu-titulo{ width: 100%;
							 background-color: #ff0000;
							 padding: 10px 0px 10px 10px;
							 margin: 0px 0px 5px 0px}
/* tituloooo */
.puertas-sector1-menu-titulo h1{ font-family: "Montserrat";
								font-size: 16px;
								color: #fff;
								margin: 0;
								font-weight: 600}
/* icono chevron*/
.puertas-sector1-menu-titulo h1 span{ color: #fff;font-size: 17px;
	                                 margin: 0px 0px 0px 10px }													   

/* listaaaaaaaaa de botoness ul */
.puertas-sector1-menu-lista { margin: 0;
							 padding: 0; }

.puertas-sector1-menu-lista h1{ font-size: 13px;
								font-family: Montserrat;
								color: #000;
								padding: 8px 0px 8px 15px;
								margin: 2px 0px 2px 0px;}

.puertas-sector1-menu-lista li { list-style: none; }

.puertas-sector1-menu-lista li a{ display: block;
								 width: 100%;
								 padding: 8px 0px 8px 12px;
								 font-family: "Montserrat";
								 font-size: 14px;
								 text-decoration: none;
								 background-color:#fff;
								 color: #222;
								 border: 1px solid#efefef;
								 letter-spacing: -0.2px}

.puertas-sector1-menu-lista li a span{ background: #ff0000;
									  padding: 3px;
									  font-family: sans-serif;
									  color: #fff}


.puertas-sector1-menu-lista li a:hover{ border:1px solid#ff0000; }








/* sectorrrrr 222222222222222222222222222222222222222222222222222222222 */
.puertas-sector2{ width: 70%;
				 float: left;
				 padding: 0px 0px 20px 20px;}

/*titulooooooooooooooo*/
.puertas-sector2-titulo{ width: 100%;
						padding:10px 0px 10px 0px;
						border-bottom: 2px solid#ddd;
						margin: 50px 0px 20px 0px}

.puertas-sector2-titulo:nth-child(1){margin: 0px 0px 20px 0px}						

.puertas-sector2-titulo h1{  font-family: "Montserrat";
							font-size: 15px;
							color: #ff0000;
							margin: 0; }

/*wrappp gridddddddddd*/
.puertas-sector2-grid{ display: grid;
					  grid-gap: 15px;
					  grid-template-columns: repeat(3,1fr);
					  background: #efefef;
					  padding: 15px}


.puertas-sector2-grid a{ display: block;
						text-decoration: none;
						text-align: center;
						background-color: #FFF;
					    padding: 14px 14px 14px 14px;
					    transition: 0.3s}

.puertas-sector2-grid a img{ width: 100%;
							max-width: 300px;
						    transition: 0.3s}

.puertas-sector2-grid a h1{  font-family: "Montserrat";
							font-size: 12px;
							color: #222;
							margin: 0;
							padding: 10px 0px 0px 0px}

.puertas-sector2-grid a h2{  font-family: "Montserrat";
							font-size: 13px;
							color: #555;
							margin: 0;
							padding: 0px 0px 10px 0px}

.puertas-sector2-grid a:hover img{transform:scale(1.03);filter: saturate(2);}