/*

En el siguiente CSS encontramos los estilos de los ficheros con piezas. 

*/



/*---------------------------CSS DEL CONTAINER DE LAS PIEZAS QUE GIRAN-----------------------------*/
.containerPiezas{
	padding-top: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.containerPiezas-marco{
	position: relative;
	width: 500px;
	height: 500px;
	overflow: hidden;
	border-radius: 10px;
	margin: 10px 0;
}

.containerPiezas-marco div{
	position: absolute;
	z-index: 1;
	top: 0;
	right: 10px;
	height: 100px;
	width: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.containerPiezas-marco div img{
	width: 90%;
}

.containerPiezas-marco div p{
	font-weight: 600;
}

.containerPiezas-marco img{
	width: 100%;
	position: relative;
	cursor: pointer;
}


/*---------------------------CSS DE LAS TABS CON INFORMACIÓN DE CADA PIEZA------------------------------*/


.info{

	margin: 20px auto;
	max-width: 900px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-bottom: 1px dashed var(--blue);
	padding: 40px 0;
}


.tabs{
	padding: 20px 0;
	width: 100%;
}

.tabs ul{
	display:flex;
	justify-content: space-evenly;
	list-style: none;
	width: 100%;
}

.tabs li{
	width: 70px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tabs button{
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	height: 100%;
	font-size:1.5em;
	border: 1px solid var(--blue);
	border-radius: 50%;
	display:block;
	padding: 15px;
	cursor: pointer;
}

.tabs button.activo{
	border: 1px solid var(--green);
	background-color: var(--green);
}

.tabs button img{

width: 100%;
}

.paneles{
	width: 100%;
	text-align: center;
}


.panel{
	padding: 20px 0;
	display: none;
}


.panel.activo{
	display:block;
	animation: fade 0.5s;
}


.panel h2{
	font-size: 2.2em;
}

.panel p{
	margin-top: 10px;
	font-size: 1.5em;
}


@keyframes fade{
	from{
		opacity: 0;
	}

	to{
		opacity: 1;
	}
}

/*-------------------------CSS de la sección donde esta la información de detalle--------------------------------*/


.cuerpoTexto  div:first-child img{
	width: 300px;
	margin: 15px auto;
	border-radius: 10px;
}

 /*Esta parte aplica para aquellos divs que tienen li en el texto*/

.cuerpoTexto  div:first-child li img{
	width: 200px;
	height: 200px;
	margin: 10px;
	border-radius: 50%;
}

.cuerpoTexto  div:first-child li{
	display: flex;
	align-items: center;
}

.cuerpoTexto div li img{
	width: 150px;
	margin: 0 10px;
}

.cuerpoTexto div:nth-child(2) ul{
	list-style: disc;
}

.cuerpoTexto div:nth-child(2) li{
	margin: 20px 0;
}

/*-----------------------CSS de los elementos para seguir navegando las piezas----------------------------------*/

.verMasElementos {
	margin: 0 auto 30px;
	max-width: 900px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.verMasElementos div{
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.verMasElementos div a{
	margin: 5px;
	border: 1px solid var(--blue);
	border-radius: 5px;
	display: flex;
	align-items: center;
	transition: top 200ms, border 200ms, background-color 200ms;
	position: relative;
	top: 0;
}

.verMasElementos div a:hover{
	top: -5px;
	border: 1px solid var(--green);
	background-color: var(--green);
}

.verMasElementos div img{
	width: 100px;
}


/*-------------------------MEDIA QUERIES -----------------------*/


@media screen and (max-width:500px){



	.containerPiezas-marco{
		width: 280px;
		height: 280px;
	}

	.cuerpoTexto  div:first-child img{
		width: 250px;
	}

	.cuerpoTexto div:last-child li{
		flex-direction: column;

	}

	.panel h2, .panel p{
		font-size: 1.2em;
	}

	.tabs li{
		box-sizing: border-box;
		width: calc(100%/6);
		height: calc(100% / 6);
		padding: 2px;
	}

	.tabs button{
		font-size: 1em;
		padding: 17px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.containerPiezas-marco div{
		height: 50px;
		width: 50px;
	}
	
	.containerPiezas-marco div img{
		width: 90%;
	}
	
	.containerPiezas-marco div p{
		font-size: 0.7em;
	}

}

@media screen and (max-width:800px){

	.cuerpoTexto  div:first-child li{
		flex-direction: column;
	}

	.verMasElementos div{
		margin: 20px auto;
		max-width: 400px;
	}

}