:root {
	--naranjo: #FF5733;
	--blanco: #FFFFFF;
	--gris: #757575;
	--negro: #000;
	--azul: #172975;
	--amarillo: #E3BD11;
	--gris2: #E8E8E8;
}

/**globales**/

html{
	
	box-sizing: border-box;
	font-size: 62.5%;
}

ul{
	list-style: none;
}

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

body{
	font-size: 1.6rem;
	line-height: 1.5;
}

p{
	font-size: 1.8rem;
	color: var(--negro);
	font-family: arial;
}

li{
	font-size: 1.8rem;
	color: var(--negro);
	font-family: arial;
}


a{
	text-decoration: none;
}

img{
	width: 30rem;
	height: 30rem;
}

.contenedor{
	max-width: 120rem;
	margin: 0 auto;
}

h1, h2, h3{
	text-align: center;
	color: var(--negro);
	font-family: 'Bebas Neue', cursive;
}

h1{
	font-size: 4rem;
}
h2{
	font-size: 3rem;
}

h3{
	font-size: 2rem;
}

/**navegacion**/

.navegacion{
	display: flex;
  justify-content: center;
	background-color: var(--azul);
	gap: 5rem;
	
}

.navegacion__enlace{
color: var(--blanco);
font-family: 'Bebas Neue', cursive;
font-size: 3rem;
padding: 3rem 0;

}

.navegacion__enlace-logo{
  display: flex;
  justify-content: center;
}
.navegacion__enlace-logoimg{
	width: 50rem;
	height: 20rem;
	margin: 1rem 0;
}

.navegacion__enlace:hover{
	color: var(--amarillo);
}

/** Footer **/

.footer{
  background-color: var(--azul);
  padding: 1rem 0;
  margin-top: 2rem;
}

.footer__texto{
text-align: center;
font-family: 'Bebas Neue', cursive;
color: var(--blanco);

}

.footer__texto2{
	color: var(--blanco);
	font-family: 'Bebas Neue', cursive;
	font-size: 2rem;
	margin-left: 1rem;
}

.mapa{
	text-align: center;
}

/** Productos **/

.grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 3rem;
	row-gap: 2rem;
}

@media (max-width:  768px){

	.navegacion{
		display: flex;
		flex-direction: column;

	}

	.navegacion__enlace{
		text-align: center;
	}
	.grid{
		grid-template-columns: repeat(2, 1fr)
}
.navegacion__enlace-logo{
	margin: 0 auto;
}

}

.producto{

padding: 1rem;
}

.producto__img{
width: 100%;

}

.producto__info{
}

.producto__nombre{

	font-size: 3rem;
	font-family: 'Bebas Neue', cursive;
  margin: .5rem 0;
	text-align: center;
	line-height: 1;

}

.producto__descripcion{
font-size: 1.5rem;
margin: .5rem 0;
line-height: 1;
text-align: center;
}

/** Cotiza **/
.sombra{
	 -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.5);
     -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.5);
     box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.5);
     background-color: var(--color6);
     padding: 2rem;
     border-radius: 2rem;
     margin-top: 2rem;
}

.formulario{
	background-color: var(--color5);
	width: min(60rem, 100%);
	margin: 0 auto;
	padding: 2rem;
	border-radius: 2rem;
}

.formulario fieldset{
	border: none ;
}

.formulario legend{
	color: var(--color2);
	font-weight: bold;
	text-align: center;
	font-size: 3rem;
	text-transform: uppercase;
	margin-bottom: 2rem;
	font-family: 'Bebas Neue', cursive;
}

.campos{
margin-bottom: 1rem;
}

.campos label{
color: var(--negro);
font-weight: bold;
margin-bottom: .5rem;
display: block;
font-family: 'Bebas Neue', cursive;
font-size: 2rem;
}

.input-text{
	width: 100%;
	padding: 1rem;
	border-radius: 1rem;
	border: none;
}

.campos textarea{
	height: 20rem;
	width: 100%;
}

.boton{
	background-color: var(--azul);
	color: var(--blanco);
	padding: 1rem 3rem;
	margin: 0 auto;
	font-size: 3rem;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	border-radius: .5rem;
	border: none;
	font-family: 'Bebas Neue', cursive;
}

.boton:hover{
	background-color: var(--amarillo);
	color: var(--negro);
}

/** Index **/

.imagen__principal{
	background-image: url(../img/materiales.jpg);
	height: 60rem;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.metalconimg{
	background-image: url(../img/metalcon.jpg);
	height: 60rem;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.yesoimg{
	background-image: url(../img/yesocarton.jpg);
	height: 60rem;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.fibroimg{
	background-image: url(../img/fibro.jpg);
	height: 70rem;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

.osbimg{
	background-image: url(../img/osbbanner.jpg);
	height: 60rem;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.lanaimg{
	background-image: url(../img/lanadevidrio.jpg);
	height: 60rem;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.duoimg{
	background-image: url(../img/duoterm.jpg);
	height: 60rem;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center left;
}
.terciadoimg{
	background-image: url(../img/terciado.jpg);
	height: 60rem;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}
.zincimg{
	background-image: url(../img/zinc.jpg);
	height: 60rem;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.fielimg{
		background-image: url(../img/fielbanner.jpg);
	height: 60rem;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.tornilloimg{
			background-image: url(../img/tornillobanner.jpg);
	height: 60rem;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.pro{
		display: grid;
		grid-template-columns: 1fr 2fr;
		column-gap: 2rem;
		border-bottom: 1px solid var(--gris2);
	}

	.pro__imagen{
		width: 100%;
		margin-top: 2rem;
	}

	.pro:last-of-type{
		border: none;
	}

	.iconos{
		height: 15rem;
		width: 15rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.servicios__img{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

.picono{

	font-size: 1.5rem;
	color: var(--negro);
	font-family: arial;
	text-align: center;

}

.zoom{
	transition: transform .5s;
}
.zoom:hover{
	transform: scale(1.2);
}

@media (min-width:  768px){
	.servicios{
display: grid;
grid-template-columns: repeat(3, 1fr);
	}
}