main {
	padding: 70px 0 0;
}

/* TÍTULO DEL PROYECTO */
.cabezoteProyecto {
	margin: 0;
	padding: 2rem 1rem 0;
	
}
.tituloProyecto {
	margin: 0;
	font-size: 2rem;
	line-height: 3rem;
	font-family: var(--subTitulos);
	text-wrap: balance;
}
.categoriaProyecto {
	font-size: 0.8rem;
}

/* CONTENIDO DEL PROYECTO */
.contenidoProyecto {
	padding: 0 0rem;
}
iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 0 2rem;
}
.contenidoProyecto h2 {
	padding: 0 1rem;
	margin: 2rem auto 3rem;

	text-align: center;
	font-family: var(--titulos);
	font-size: 1.2rem;
	line-height: 1.6;
}
.contenidoProyecto p {
	margin: 1rem auto 2rem;
	padding: 0 2rem;
	max-width: 45ch;
}
.contenidoProyecto img {
	width: 100%;
	max-width: 1200px;
}

/* INFORMACIÓN DEL PROYECTO */
.infoProyecto {
	padding: 1rem 1rem 0;
	max-width: 55ch;
	margin: 0 auto;
}
.infoProyecto h2 {
	margin: 0 0 2rem;
}
.infoProyecto p {
	position: relative;
	margin: 0 1rem 1.6rem 3rem;
}
.infoProyecto::before {
	display: block;
	content: "";
	width: 100%;
	height: 50px;
	margin: 1rem 0 1.6rem;
	background-image: url(../img/proyecto_Separador-1.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}

/* FICHA TÉCNICA DEL PROYECTO */
.fichaTecnica {
	position: relative;
	margin: calc(100px + 2rem) 0 2rem;
	padding: 1rem;
}
.fichaTecnica::before {
	display: block;
	position: absolute;
	content: "";
	top: -100px;
	right: 0;
	width: 100%;
	height: 100px;
	background-image: url(../img/proyecto_Separador-2.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}
.fichaTecnica h2 {
	font-size: 1.6rem;
	font-family: var(--titulos);
	margin: 0 0 1rem;
}
.fichaTecnica p {
	margin: 0 0 0 3rem;
	font-weight: 400;
}
.enlacesProyecto {
	margin: 2rem 3rem 0;
	padding: 0.5rem 0 0;
	border-top:solid 1px var(--menta);
}
.enlacesProyecto p {
	margin: 0;
}

@media (min-width: 600px) {
	.tituloProyecto {
		font-size: 2.4rem;
		line-height: 3rem;
	}

	.contenidoProyecto h2 {
		margin: 2rem auto;
		font-size: 1.6rem;
		line-height: 2rem;
		max-width: 23ch;
	}
	.contenidoProyecto p {
		margin: 4rem auto;
	}

	.fichaTecnica {
		min-width: 310px;
		max-width: 400px;
		margin: 6rem auto 2rem;
	}

	.fichaTecnica::before {
		top: -50px;
		height: 100px;
		background-position: right center;
	}
}

@media (min-width: 820px) {
	main {
		padding: 100px rem 0;
	}

	.cabezoteProyecto {
		margin: 2rem 1rem 0;
	}
	.tituloProyecto {
		font-size: 3.2rem;
		line-height: 3.8rem;
	}
	
	.contenidoProyecto h2 {
		padding: 0 1rem;
		margin: 4rem auto;
		font-size: 1.8rem;
		line-height: 2.2rem;
		
	}
}

@media (min-width: 1000px) {
	main {
		display: grid;
		grid-column-gap: 2rem;
		grid-template-columns: 5fr 3fr;
		grid-template-rows: repeat(4, auto);
		
	}
	.cabezoteProyecto {
		grid-column: 1;
		margin: 2rem 2rem;

	}
	.categoriaProyecto{
		font-size: 1.2rem;
	}

	.contenidoProyecto {
		grid-row: 2 / -1;
	}
	.contenidoProyecto p {
		margin: 4rem auto;
	}

	.infoProyecto {
		grid-row: 2;
	}
	.infoProyecto::before {
		display: block;
		content: "";
		width: 100%;
		height: 70px;
		margin: -1rem 0 0;
		background-image: url(../img/proyecto_Separador-3.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: left center;
	}
	.infoProyecto::after {
		display: block;
		content: "";
		width: 100%;
		height: 40px;
		margin: 0 0 1.6rem;
		background-image: url(../img/proyecto_Separador-1.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: left center;
	}

	.fichaTecnica {
		grid-row: 3;
		position: sticky;
		top: 170px;
		margin: 5rem 0 0;
	}
	.fichaTecnica::before {
		top: -80px;
		height: 100px;
		background-position: right center;
	}
}

@media (min-width: 1400px) {
	main {
		max-width: 1500px;
		margin: 0 auto 0;

		grid-template-columns: 2fr 1fr;
	}
	.cabezoteProyecto {
		margin: 4rem 2rem 4rem;
	}
	.tituloProyecto {
		font-size: 4rem;
		line-height: 4.5rem;
	}

	.contenidoProyecto p,
	.infoProyecto p{
		font-size: 1.2rem;
		line-height: 2rem;
	}
	.fichaTecnica::before {
		top: -50px;
		height: 100px;
		background-position: right center;
	}
	
}


/* PROYECTOS RELACIONADOS */
#relacionados {
	padding: 1rem;
	margin: 0 auto;
	max-width: 920px;
}

.h3_relacion {
	margin: 0 0 1rem;
	text-align: center;
}
.h3_relacion::before {
	display: block;
	height: 100px;
	margin: 3rem 0 0;
	width: 100%;
	content: "";
	background-image: url(../img/proyecto_Separador-4.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	}

/* CONTENEDOR DE PROYECTOS RELACIONADOS */
.proyectosRelacionados {
	padding: 1rem 2rem;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	grid-gap: 2rem;
}

/* PROYECTOS */
.proyecto {
	position: relative;
	padding: 0;
	aspect-ratio: 4/5;

	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
}
.proyecto img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.proyecto .lnk_img {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(33, 33, 33, 0.15);
	transition: background-color .2s ease-out;
}
p.enlace {
	color: var(--morado);
	text-decoration: underline;
}
.proyecto:hover > .proyecto_info {
	background-color: rgba(33, 33, 33, 1);
	transition: background-color .2s ease-out;
}
.proyecto:hover > .lnk_img {
	background-color: rgba(33, 33, 33, 0);
	transition: background-color .2s ease-out;
}
.proyecto:hover > .proyecto_info p.enlace {
	color: var(--menta);
}

/* información del proyecto */
.proyecto_info {
	position: absolute;
	padding: 1rem 2rem;
	width: calc(100% - 4rem);
	background-color: rgba(33, 33, 33, 0.7);
	-webkit-backdrop-filter: blur(5px);
			backdrop-filter: blur(5px);
	color: var(--menta);

	transition: background-color .2s ease-out;
}
.proyecto_info p {
	margin: 0;
}
.proyecto_info a {
	margin: 0 auto;
	text-align: right;
}
.volver {
	margin: 2rem auto;
	font-family: var(--destacados);
	font-size: 1.4rem;
	text-align: center;
}

@media (min-width: 1000px) {
	#relacionados {
		padding: 0 2rem;
		max-width: 1160px;
		margin: 4rem auto 6rem;
	}
}