@import url("https://fonts.googleapis.com/css2?family=Rajdhani&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Days+One&family=Figtree:ital,wght@0,800;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

* { font-family: 'Rajdhani', sans-serif; margin: 0; }

.key { width: 100%; position: absolute; z-index: -1; filter: opacity(0.001);}

.subir {
	position: fixed;
	right: 0px;
	top: 80px;
	width: 50px;
	height: 50px;
	background-color: #eb812b;
	color: white;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
	cursor: pointer;	
	border-radius:  10px 0 0 10px;	
	z-index: 999999;
}

.logotipo { width: 100%; height: 150px; display: grid; place-items: center; }
.logotipo figure { width: 100%; height: 150px; }
.logotipo img { width: 100%; height: 120px; }


/*--contacto--*/
.wt {
	position: fixed;
	bottom: 20px;
	right: 50px;
	width: 222px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	place-content: center;
	gap: 10px;
	z-index: 999;
}
.wt div {
	width: 74px;
	height: 74px;
	padding: 12px 12px;
	box-sizing: border-box;
	border-radius: 50%;
	box-shadow: 0 0 5px 3px rgba(0,0,0,0.15);
}
.wt_telefono { background: #bf360c;  background: linear-gradient(20deg, #bf360c  45%, #ff6f00 100%); }
.wt_mail { background: rgb(255,165,0); background: linear-gradient(45deg, rgba(158,112,64) 45%, rgba(255,165,0) 100%); cursor: pointer; }
.wt_whatsapp { background: rgb(9,121,44); background: linear-gradient(340deg, rgba(9,121,44) 45%, rgba(0,182,54,1) 100%); }

@media (max-width:420px) { 
	.wt {right: 25px;}
}

.contacto { width: 100%; /* background-color: lightgray; */ margin-top: 80px !important;}
/* .contacto .colum_02 div:nth-child(2) figure { width: 100%; height: 100%;}
.contacto .colum_02 div:nth-child(2) figure img { width: 100%; height: 100%;} */

.contacto h1 {
	width: 90%;
	margin: 30px auto 0 auto;
	font-family: "Days One", sans-serif !important;
	text-align: center;
	font-size: 2em;
	font-weight: 100;
}
.contacto h2 {
	width: 90%;
	margin: auto;
	text-align: center;
	font-weight: 100;
}
.contacto form { width: 90%; margin: 15px auto;}
.contacto input {
	width: 99%;
	margin: auto;
	padding: 10px;
	box-sizing: border-box;
}
.contacto textarea {
	width: 99%;
	height: 300px;
	margin: 1px auto;
	margin-bottom: 15px;
	padding: 10px;
	box-sizing: border-box;
}
.contacto button {width: 100%; padding: 5px; box-sizing: border-box;}
@media (max-width:1200px) {	
	.contacto form {width: 80%;}
}
/*--contacto--*/


/* contenido */

.intro { width: 90%; max-width: 1024px; margin: 0 auto 80px auto;}
.intro h1 { text-align: center; font-size: 2.5em; }
.intro p { text-align: center;}
.intro b { font-size: 1.5em;}

/* .enlaces__secc { margin: 20px auto 120px auto !important;}
.enlaces__secc a { 
	font-family: "Anton", sans-serif !important;
	font-size: 2em;
	text-decoration: none;
	padding-left: 10px;
	box-sizing: border-box;
	color: gray;
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;
	cursor: pointer;
	transition: 0.3s;
}
.enlaces__secc a:hover { color:  #ed822e; box-shadow: -3px 3px 5px lightgray;} */

.enlaces__secc00 { margin: 20px auto 80px auto !important;}
.enlaces__secc00 a { 
	/* font-family: "Anton", sans-serif !important; */
	font-size: 1.5em;
	text-decoration: none;
	padding-left: 10px;
	box-sizing: border-box;
	color: gray;
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;
	cursor: pointer;
	transition: 0.3s;
}
.enlaces__secc00 a:hover { color:  #ed822e; box-shadow: -3px 3px 5px lightgray;}

.colum_00 { width: 90%; max-width: 1024px; margin: auto; display: grid; grid-template-columns: 1fr 2fr; gap: 20px;}
.colum_01 { width: 90%; max-width: 1024px; margin: auto; display: grid; grid-template-columns: 1fr; gap: 20px;}
.colum_02 { width: 90%; max-width: 1024px; margin: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.colum_03 { width: 90%; max-width: 1024px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}

.art__01 { width: 100%; height: 450px; position: relative;}
.art__01 span { width: 100%; height: 380px; position: absolute; top: 0; background: linear-gradient( #fff, #fff, #e6e6e6); z-index: -1;}

.art__01 .descripcion01 .piezas { position: relative; text-align: left !important; }
.art__01 .descripcion01 .piezas .piezas__a1 { position: absolute; top: 10px; left: 10px;}
.art__01 .descripcion01 .piezas .piezas__b1 { position: absolute; top: 300px; right: 70px;}
.art__01 .descripcion01 .piezas .piezas__a2 { position: absolute; top: 0px; right: 90px;}
.art__01 .descripcion01 .piezas .piezas__b2 { position: absolute; top: 325px; left: 20px;}
.art__01 .descripcion01 .piezas .piezas__a3 { position: absolute; top: 35px; right: 150px;}
.art__01 .descripcion01 .piezas .piezas__b3 { position: absolute; top: 265px; left: 25px;}

.art__01 .nom_pieza { font-family: "Days One", sans-serif !important; font-size: 1.2em; color: #003254;}
.art__01 .geometria { font-weight: 700; font-size: 1em;}

.art__01 figure { width: 100%; height: 100%; display: grid; place-items: center;}
.art__01 .descripcion01 h3 { width: 100%; font-size: 1.2em; font-weight: 700; color: #003254; font-family: "Days One", sans-serif !important;}
.art__01 .descripcion01 img { height: 450px;}
.art__01 .descripcion01 h1 { font-family: "Days One", sans-serif !important; text-align: right; width: 100%; font-size: 2em; font-weight: 800; color: #003254; margin-top: 50px; }
.art__01 .descripcion01 h2 { font-family: "Figtree", sans-serif !important; text-align: right; width: 100%; font-size: 1.5em; font-weight: 700; margin-top: -5px; }
.art__01 .descripcion01 u { font-family: "Figtree", sans-serif !important; color: #EB812B; font-weight: 700 !important; text-decoration: none;}
.art__01 .descripcion01 p { width: 100%; text-align: justify; padding: 10px 0; box-sizing: border-box;}
.art__01 .descripcion01 a { background-color: #EB812B; color: white; text-decoration: none; padding: 10px 15px; box-sizing: border-box; border-radius: 10px;}


.infografia { width: 80%; max-width: 1024px; margin: 40px auto; display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid gray; }
.infografia article { position: relative;}
.infografia hgroup { margin: 40px 0 20px 0;}
.infografia h1 { font-family: "Days One", sans-serif !important; font-size: 2em; color: #003254;}
.infografia h2 { font-size: 1.2em; color: gray;}

.infografia .info__num { margin: 0 0 20px 30px; display: grid; gap: 5px;}
.infografia .fr { display: flex;}
.infografia .fr__a { font-size:1.5em ;}
.infografia .fr__b { 
	width: 100%; 
	height: 40px; 
	display: grid; 
	align-items: center;
	font-size: 1.4em;
	padding-left: 15px;
	box-sizing: border-box;
}

.infografia figure { width: 100%; height: 100%;}
.infografia img { width: 100%; height: auto;}

.num { 
	display: grid; 
	place-items: center; 
	width: 40px; 
	height: 40px; 
	font-family: "Days One", sans-serif !important; 
	font-size: 2em; 
	border-radius: 5px;
}

.infografia a { 
	position: absolute;
	width: 150px;
	height: 40px;
	text-align: center;
	text-decoration: none;
	background-color: #EB812B; 
	color: white; 
	padding: 10px 15px; 
	box-sizing: border-box; 
	border-radius: 10px;
}

.azul { background-color: #29ABE2; color: white;}
.amarillo { background-color: #FBB03B; color: white;}
.verde { background-color: #39B54A; color: white;}
.morado { background-color: #662D91; color: white;}
.naranja { background-color: #F15A24; color: white;}

.nbp1 { position: absolute; top: 85px; right: 150px;}
.nbp2 { position: absolute; top: 210px; right: 90px;}
.nbp3 { position: absolute; top: 360px; right: 380px;}
.nbp4 { position: absolute; top: 380px; right: 200px;}
.nbp5 { position: absolute; top: 530px; right: 450px;}

.tbp1 { position: absolute; top: 65px; right: 100px;}
.tbp2 { position: absolute; top: 230px; right: 40px;}
.tbp3 { position: absolute; top: 330px; right: 360px;}
.tbp4 { position: absolute; top: 380px; right: 180px;}
.tbp5 { position: absolute; top: 500px; right: 450px;}

.mulp1 { position: absolute; top: 55px; right: 100px;}
.mulp2 { position: absolute; top: 200px; right: 40px;}
.mulp3 { position: absolute; top: 270px; right: 350px;}
.mulp4 { position: absolute; top: 300px; right: 150px;}
.mulp5 { position: absolute; top: 480px; right: 450px;}

.descrip { background-color: #e6e6e6; padding: 30px 15px; box-sizing: border-box; text-align: justify;}
.descrip h1 { font-size: 2em; text-align: left; padding: 30px 0 5px 0; box-sizing: border-box;}
.descrip p { padding: 0 0 15px 0; box-sizing: border-box;}
.descrip figure { width: 100%; height: 100%; overflow: hidden;}
.descrip img { width: 100%;}

@media (max-width:1024px) {
	.colum_02 { width: 96%;}
	.colum_03 { width: 96%;} 

	.art__01 .descripcion01 .piezas .piezas__a1 { position: absolute; top: 10px; left: 20px;}
	.art__01 .descripcion01 .piezas .piezas__b1 { position: absolute; top: 350px; right: 70px;}
	.art__01 .descripcion01 .piezas .piezas__a2 { position: absolute; top: 0px; right: 30px;}
	.art__01 .descripcion01 .piezas .piezas__b2 { position: absolute; top: 335px; left: 20px;}
	.art__01 .descripcion01 .piezas .piezas__a3 { position: absolute; top: 35px; right: 130px;}
	.art__01 .descripcion01 .piezas .piezas__b3 { position: absolute; top: 265px; left: 25px;}

	.art__01 { height: auto;}
	.art__01 figure { width: 100%; height: 100%; display: grid; place-items: center;}
	.art__01 figcaption { position: absolute; top: 0px; }
	.art__01 .descripcion01 img { width: 100%; height: auto;}
	.art__01 .descripcion01 h1 { font-size: 2em;}

	.infografia .fr__b { font-size: 1.2em;}

	.nbp1 { position: absolute; top: 55px; right: 120px;}
	.nbp2 { position: absolute; top: 180px; right: 70px;}
	.nbp3 { position: absolute; top: 280px; right: 320px;}
	.nbp4 { position: absolute; top: 290px; right: 150px;}
	.nbp5 { position: absolute; top: 410px; right: 370px;}

	.tbp1 { position: absolute; top: 40px; right: 75px;}
	.tbp2 { position: absolute; top: 180px; right: 40px;}
	.tbp3 { position: absolute; top: 260px; right: 300px;}
	.tbp4 { position: absolute; top: 300px; right: 130px;}
	.tbp5 { position: absolute; top: 390px; right: 360px;}

	.mulp1 { position: absolute; top: 45px; right: 65px;}
	.mulp2 { position: absolute; top: 180px; right: 35px;}
	.mulp3 { position: absolute; top: 210px; right: 290px;}
	.mulp4 { position: absolute; top: 250px; right: 120px;}
	.mulp5 { position: absolute; top: 355px; right: 370px;}
	
 }
 @media (max-width:920px) {

	.art__01 .descripcion01 h1 { font-size: 1.8em;}

	.art__01 .descripcion01 .piezas .piezas__a1 { position: absolute; top: 10px; left: 20px;}
	.art__01 .descripcion01 .piezas .piezas__b1 { position: absolute; top: 330px; right: 70px;}
	.art__01 .descripcion01 .piezas .piezas__a2 { position: absolute; top: 0px; right: 20px;}
	.art__01 .descripcion01 .piezas .piezas__b2 { position: absolute; top: 315px; left: 20px;}
	.art__01 .descripcion01 .piezas .piezas__a3 { position: absolute; top: 35px; right: 130px;}
	.art__01 .descripcion01 .piezas .piezas__b3 { position: absolute; top: 265px; left: 25px;}

	.nbp1 { position: absolute; top: 45px; right: 100px;}
	.nbp2 { position: absolute; top: 150px; right: 50px;}
	.nbp3 { position: absolute; top: 260px; right: 280px;}
	.nbp4 { position: absolute; top: 280px; right: 150px;}
	.nbp5 { position: absolute; top: 300px; right: 350px;}

	.tbp1 { position: absolute; top: 30px; right: 70px;}
	.tbp2 { position: absolute; top: 170px; right: 30px;}
	.tbp3 { position: absolute; top: 240px; right: 270px;}
	.tbp4 { position: absolute; top: 260px; right: 100px;}
	.tbp5 { position: absolute; top: 280px; right: 340px;}

	.mulp1 { position: absolute; top: 35px; right: 55px;}
	.mulp2 { position: absolute; top: 140px; right: 20px;}
	.mulp3 { position: absolute; top: 190px; right: 260px;}
	.mulp4 { position: absolute; top: 220px; right: 100px;}
	.mulp5 { position: absolute; top: 240px; right: 350px;}

	.infografia h1 { font-size: 1.7em;}
 }
 @media (max-width:820px) {
	#logo {height: 200px;}

	.art__01 .descripcion01 h1 { font-size: 1.7em; margin-top: 15px;}	
	.art__01 .descripcion01 h3 { font-size: 1.1em;}

	.art__01 .descripcion01 .piezas .piezas__a1 { position: absolute; top: 0px; left: 20px;}
	.art__01 .descripcion01 .piezas .piezas__b1 { position: absolute; top: 300px; right: 70px;}
	.art__01 .descripcion01 .piezas .piezas__a2 { position: absolute; top: 0px; right: 0px;}
	.art__01 .descripcion01 .piezas .piezas__b2 { position: absolute; top: 280px; left: 20px;}
	.art__01 .descripcion01 .piezas .piezas__a3 { position: absolute; top: 15px; right: 60px;}
	.art__01 .descripcion01 .piezas .piezas__b3 { position: absolute; top: 235px; left: 45px;}

	.infografia .fr__b { font-size: 0.9em;}
	.infografia h1 { font-size: 1.6em;}
	.infografia h2 { font-size: 1em;}

	.nbp1 { position: absolute; top: 35px; right: 95px;}
	.nbp2 { position: absolute; top: 150px; right: 50px;}
	.nbp3 { position: absolute; top: 220px; right: 250px;}
	.nbp4 { position: absolute; top: 240px; right: 120px;}
	.nbp5 { position: absolute; top: 330px; right: 290px;}

	.tbp1 { position: absolute; top: 20px; right: 60px;}
	.tbp2 { position: absolute; top: 150px; right: 20px;}
	.tbp3 { position: absolute; top: 210px; right: 240px;}
	.tbp4 { position: absolute; top: 240px; right: 100px;}
	.tbp5 { position: absolute; top: 320px; right: 280px;}

	.mulp1 { position: absolute; top: 25px; right: 55px;}
	.mulp2 { position: absolute; top: 140px; right: 15px;}
	.mulp3 { position: absolute; top: 170px; right: 230px;}
	.mulp4 { position: absolute; top: 210px; right: 100px;}
	.mulp5 { position: absolute; top: 280px; right: 290px;}

	.descrip figure { width: 100%; height: 100%; overflow: hidden;}
	.descrip img { height: 100%; object-fit: cover;}
 }

 @media (max-width:460px) {
	.logotipo { height: 120px;}
	.logotipo figure { height: 120px;}
	.logotipo img { height: 100px;}

	.contenedor { width: 100%; }

	.colum_02 { width: 90%; grid-template-columns: 1fr; }
	.colum_03 { grid-template-columns: 1fr; width: 90%; gap: 10px; }
	.enlaces__secc { font-size: 0.45em;}

	.art__01 { width: 100%; margin-bottom: 50px; }
	.art__01 span { height: 280px;}

	.art__01 .descripcion01 .piezas .piezas__a3 { position: absolute; top: 45px; right: 70px;}
	.art__01 .descripcion01 .piezas .piezas__b3 { position: absolute; top: 265px; left: 35px;}

	.art__01 .descripcion01 h1 { width: 90%; margin: auto; font-size: 1.4em; text-align: left;}
	.art__01 .descripcion01 h2 { width: 90%; margin: auto; font-size: 1.3em; text-align: left;}
	.art__01 .descripcion01 h3 { width: 90%; margin: auto; font-size: 1em;}
	.art__01 .descripcion01 p { width: 90%; margin: auto; text-align: justify; padding-top: 10px; box-sizing: border-box; }
	.art__01 .descripcion01 a { position: absolute; right: 10%;}

	.infografia { grid-template-columns: 1fr;}
	.infografia h1 { font-size: 1.4em;}

	.nbp1 { position: absolute; top: 35px; right: 100px;}
	.nbp2 { position: absolute; top: 150px; right: 50px;}
	.nbp3 { position: absolute; top: 245px; right: 270px;}
	.nbp4 { position: absolute; top: 250px; right: 120px;}
	.nbp5 { position: absolute; top: 360px; right: 290px;}

	.tbp1 { position: absolute; top: 20px; right: 60px;}
	.tbp2 { position: absolute; top: 150px; right: 20px;}
	.tbp3 { position: absolute; top: 225px; right: 260px;}
	.tbp4 { position: absolute; top: 260px; right: 110px;}
	.tbp5 { position: absolute; top: 350px; right: 300px;}

	.mulp1 { position: absolute; top: 25px; right: 55px;}
	.mulp2 { position: absolute; top: 140px; right: 15px;}
	.mulp3 { position: absolute; top: 180px; right: 260px;}
	.mulp4 { position: absolute; top: 220px; right: 100px;}
	.mulp5 { position: absolute; top: 350px; right: 290px;}

 }


/* contenido */


/* footer */
footer { 
	width: 100%; 
	padding: 30px 0 80px 0;
	box-sizing: border-box;
	background-color: black;
	color: white;
	display: grid;
	grid-template-columns: 2fr 5fr;
	place-content: center;
	gap: 20px;
}
footer div {text-align: center;}
footer figcaption {padding: 15px 20px; box-sizing: border-box; font-size: 0.9em; text-align: justify;}
footer p { 
	width: 35%; 
	margin: auto; 
	padding: 10px; 
	box-sizing: border-box; 
	border: 1px solid white;
	border-radius: 10px;
	background-color: #555;
}
footer img {width: 60%; border-radius: 10px;}
footer a {color: white; text-decoration: none;}
footer a:hover { color: yellow;}
footer .fooprod { width: 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;}
footer .fooprod h2 { text-align: left; padding: 10px 0 10px 10px; box-sizing: border-box; font-size: 1.2em; font-weight: 100;}
footer ul {text-align: left; font-size: 0.9em;}
footer li {margin-left: -15px;}

@media (max-width:820px) {
	footer {grid-template-columns: 1fr; padding: 30px 0 120px 0;}
	footer img { width: 40%;}
	footer figcaption {width: 70%; margin: auto;}
	footer p { margin-bottom: 30px;}
	footer .fooprod { width: 80%; margin: auto; grid-template-columns: repeat(3, 1fr);}
}

@media (max-width:420px) {
	footer .fooprod { grid-template-columns: 1fr 1fr;}
}
/* footer */