/* ==================================================
   THE GOOD ARCHITECTS
   SINGLE PROYECTO
   MOBILE FIRST
   ================================================== */


/* ==================================================
   NORMALIZACIÓN
   ================================================== */

.proyecto-single,
.proyecto-single * {
	box-sizing: border-box;
}


.proyecto-single {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}


/* ==================================================
   HERO
   ================================================== */

.proyecto-hero {
	width: 100%;
	margin: 0;
	padding: 0;
}


/* ==================================================
   PORTADA
   ================================================== */

.proyecto-hero__portada {
	width: 100%;
	height: 64vh;

	margin: 0;
	padding: 0;

	overflow: hidden;
	background: #f2f2f2;
}


.proyecto-hero__imagen {
	display: block;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	object-fit: cover;
	object-position: center;
}


/* ==================================================
   FICHA DEL PROYECTO

   MÓVIL:
   56 px = columna izquierda
   resto = información
   ================================================== */

.proyecto-hero__info {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;

	width: 100%;

	margin: 0;
	padding: 24px 16px 52px;
}


/* ==================================================
   COLUMNA IZQUIERDA
   ================================================== */

.proyecto-hero__icono {
	display: flex;
	flex: 0 0 56px;

	width: 56px;

	align-items: flex-start;
	justify-content: flex-start;

	margin: 0;
	padding: 2px 0 0;
}


/* ÍCONO */

.proyecto-hero__logo {
	display: block;

	width: 26px !important;
	height: 26px !important;

	min-width: 26px;
	max-width: 26px !important;

	min-height: 26px;
	max-height: 26px !important;

	margin: 0 !important;
	padding: 0;

	object-fit: contain;
}


/* ==================================================
   COLUMNA DERECHA
   ================================================== */

.proyecto-hero__contenido {
	display: block;

	flex: 1 1 auto;

	width: auto;
	min-width: 0;

	margin: 0;
	padding: 0;
}


/* ==================================================
   TÍTULO
   ================================================== */

.proyecto-hero__titulo {
	display: block;

	width: 100%;

	margin: 0 0 30px;
	padding: 0;

	font-size: 32px;
	font-weight: 400;
	line-height: 0.95;

	letter-spacing: -0.04em;

	word-break: normal;
	overflow-wrap: break-word;
}


/* ==================================================
   DATOS TÉCNICOS
   ================================================== */

.proyecto-hero__datos {
	display: flex;
	flex-direction: column;

	width: 100%;

	margin: 0;
	padding: 0;

	gap: 20px;
}


/* BLOQUE INDIVIDUAL */

.proyecto-dato {
	display: flex;
	flex-direction: column;

	width: 100%;

	margin: 0;
	padding: 0;

	gap: 5px;
}


/* ETIQUETA */

.proyecto-dato__label {
	display: block;

	width: 100%;

	margin: 0;
	padding: 0;

	font-size: 10px;
	font-weight: 400;
	line-height: 1.2;

	letter-spacing: 0.08em;
	text-transform: uppercase;

	opacity: 0.5;
}


/* VALOR */

.proyecto-dato__valor {
	display: block;

	width: 100%;

	margin: 0;
	padding: 0;

	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
}


/* ==================================================
   SECCIONES
   ================================================== */

.proyecto-seccion {
	width: 100%;

	margin: 0;
	padding: 48px 18px;
}


/* TÍTULO DE SECCIÓN */

.proyecto-seccion__titulo {
	margin: 0 0 20px;
	padding: 0;

	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
}


/* ==================================================
   GALERÍAS
   ================================================== */

.proyecto-galeria {
	display: flex;
	flex-direction: column;

	width: 100%;

	margin: 0;
	padding: 0;

	gap: 8px;
}


.proyecto-galeria__item {
	display: block;

	width: 100%;

	margin: 0;
	padding: 0;
}


.proyecto-galeria__imagen {
	display: block;

	width: 100%;
	max-width: 100%;
	height: auto;

	margin: 0;
	padding: 0;
}


/* ==================================================
   CONCEPTO
   ================================================== */

.proyecto-concepto__texto {
	width: 100%;
	max-width: 700px;

	margin: 0;
	padding: 0;

	font-size: 14px;
	line-height: 1.55;
}


/* ==================================================
   CRÉDITOS
   ================================================== */

.proyecto-creditos__contenido {
	display: flex;
	flex-direction: column;

	width: 100%;

	margin: 0;
	padding: 0;

	gap: 22px;
}


.proyecto-credito {
	display: flex;
	flex-direction: column;

	margin: 0;
	padding: 0;

	gap: 5px;
}


.proyecto-credito__label {
	display: block;

	font-size: 10px;
	line-height: 1.2;

	letter-spacing: 0.08em;
	text-transform: uppercase;

	opacity: 0.5;
}


.proyecto-credito__valor {
	display: block;

	font-size: 14px;
	line-height: 1.45;
}


/* ==================================================
   TABLET Y DESKTOP
   ================================================== */

@media (min-width: 768px) {

	.proyecto-hero__portada {
		height: 70vh;
	}


	.proyecto-hero__info {
		padding: 28px 24px 64px;
	}


	.proyecto-hero__icono {
		flex-basis: 110px;
		width: 110px;
	}


	.proyecto-hero__logo {
		width: 32px !important;
		height: 32px !important;

		min-width: 32px;
		max-width: 32px !important;

		min-height: 32px;
		max-height: 32px !important;
	}


	.proyecto-hero__titulo {
		font-size: 48px;
		margin-bottom: 36px;
	}


	.proyecto-seccion {
		padding: 64px 24px;
	}
/* ==================================================
   CORRECCIÓN MÓVIL
   ================================================== */

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

	body .proyecto-single .proyecto-hero__info {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
	}

	body .proyecto-single .proyecto-hero__icono {
		flex: 0 0 56px !important;
		width: 56px !important;
		max-width: 56px !important;
	}

	body .proyecto-single .proyecto-hero__contenido {
		flex: 1 1 0 !important;
		width: calc(100% - 56px) !important;
		max-width: calc(100% - 56px) !important;
		min-width: 0 !important;
	}

	body .proyecto-single .proyecto-hero__datos {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		grid-template-columns: none !important;

		width: 100% !important;
		gap: 20px !important;
	}

	body .proyecto-single .proyecto-dato {
		display: flex !important;
		flex-direction: column !important;

		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	body .proyecto-single .proyecto-dato__label,
	body .proyecto-single .proyecto-dato__valor {
		display: block !important;

		width: 100% !important;
		max-width: 100% !important;

		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}