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


/* ==================================================
   BASE
   ================================================== */

.proyectos-archivo,
.proyectos-archivo * {
	box-sizing: border-box;
}

.proyectos-archivo {
	width: 100%;
	min-height: 100svh;

	margin: 0;
	padding: 0;

	background: #306bb2;
	color: #ffffff;
}


/* ==================================================
   FILTROS
   STICKY
   ================================================== */

.proyectos-filtros {
	position: sticky;
	top: 0;

	z-index: 100;

	display: grid;
	grid-template-columns: 1fr;

	width: 100%;

	margin: 0;
	padding: 14px 16px 12px;

	gap: 8px;

	background: #306bb2;

	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}


/* ==================================================
   CAMPOS
   ================================================== */

.proyectos-filtros__campo,
.proyectos-filtros__busqueda {
	width: 100%;

	margin: 0;
	padding: 0;
}


/* ==================================================
   SELECTS
   ================================================== */

.proyectos-filtros__select {
	display: block;

	width: 100%;
	height: 44px;

	margin: 0;
	padding: 0 42px 0 14px;

	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 0;

	background: #306bb2;

	color: #ffffff;

	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;

	appearance: auto;

	outline: none;
}

/* ==================================================
   DROPDOWNS PERSONALIZADOS
   ================================================== */

.proyectos-dropdown {
	position: relative;

	width: 100%;

	margin: 0;
	padding: 0;
}


/* ==================================================
   BOTÓN PRINCIPAL
   ================================================== */

.proyectos-dropdown__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;
	height: 44px;

	margin: 0;
	padding: 0 14px;

	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 0;

	background: rgba(10, 43, 82, 0.72);

	color: #ffffff;

	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;

	text-align: left;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;
}


/* TEXTO */

.proyectos-dropdown__texto {
	display: block;

	min-width: 0;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* FLECHA */

.proyectos-dropdown__flecha {
	display: block;

	margin-left: 16px;

	font-size: 17px;
	line-height: 1;

	transition: transform 0.25s ease;
}


/* GIRAR FLECHA AL ABRIR */

.proyectos-dropdown__trigger[aria-expanded="true"]
.proyectos-dropdown__flecha {
	transform: rotate(180deg);
}


/* ==================================================
   MENÚ DESPLEGADO
   ================================================== */

.proyectos-dropdown__menu {
	display: flex;
	flex-direction: column;

	width: 100%;

	margin: 8px 0 0;
	padding: 0;

	gap: 6px;

	background: transparent;
}


/* ==================================================
   CADA OPCIÓN
   ================================================== */

.proyectos-dropdown__opcion {
	display: flex;
	align-items: center;

	width: 100%;
	min-height: 42px;

	margin: 0;
	padding: 10px 14px;

	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 0;

	background: rgba(10, 43, 82, 0.68);

	color: #ffffff;

	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;

	text-align: left;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;

	transition:
		background 0.2s ease,
		border-color 0.2s ease;
}


/* TOQUE / HOVER */

.proyectos-dropdown__opcion:hover,
.proyectos-dropdown__opcion:focus-visible {
	background: rgba(10, 43, 82, 0.92);

	border-color: rgba(255, 255, 255, 0.6);

	outline: none;
}


/* ==================================================
   SEGUNDO DROPDOWN
   ================================================== */

.proyectos-filtros__campo--categoria {
	margin-top: 2px;
}

/* ==================================================
   BUSCADOR
   ================================================== */

.proyectos-filtros__input {
	display: block;

	width: 100%;
	height: 40px;

	margin: 0;
	padding: 0 14px;

	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 0;

	background: transparent;

	color: #ffffff;

	font-family: inherit;
	font-size: 14px;
	font-weight: 400;

	outline: none;
}

.proyectos-filtros__input::placeholder {
	color: rgba(255, 255, 255, 0.72);
}


/* ==================================================
   LISTADO
   ================================================== */

.proyectos-listado {
	display: flex;
	flex-direction: column;

	width: 100%;

	margin: 0;
	padding: 0;
}


/* ==================================================
   TARJETA
   ================================================== */

.proyecto-card {
	position: relative;

	width: 100%;
	height: clamp(165px, 23svh, 205px);

	margin: 0;
	padding: 0;

	border-bottom: 1px solid rgba(255, 255, 255, 0.18);

	overflow: hidden;
}


/* ==================================================
   LINK COMPLETO
   ================================================== */

.proyecto-card__link {
	display: grid;
	grid-template-columns: 46% 54%;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	color: #ffffff;

	text-decoration: none;
}


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

.proyecto-card__media {
	position: relative;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 10px 0 10px 10px;

	overflow: hidden;
}

.proyecto-card__imagen {
	display: block;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

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


/* ==================================================
   INFORMACIÓN
   ================================================== */

.proyecto-card__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 14px 16px 16px 18px;

	min-width: 0;
}


/* ==================================================
   LOGO
   ================================================== */

.proyecto-card__logo-contenedor {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;

	width: 100%;
	height: 34px;

	margin: 0 0 auto;
	padding: 0;
}

.proyecto-card__logo {
	display: block;

	width: auto;
	height: 34px;

	max-width: 70px;

	margin: 0;
	padding: 0;

	object-fit: contain;
	object-position: left center;
}


/* ==================================================
   NOMBRE
   ================================================== */

.proyecto-card__titulo {
	width: 100%;

	margin: 0 0 10px;
	padding: 0;

	font-size: clamp(19px, 5.5vw, 27px);
	font-weight: 400;
	line-height: 0.98;

	letter-spacing: -0.035em;

	color: #ffffff !important;

	overflow-wrap: break-word;
}


/* ==================================================
   DATOS
   ================================================== */

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

	width: 100%;

	margin: 0;
	padding: 0;

	gap: 3px;
}

.proyecto-card__anio,
.proyecto-card__ubicacion {
	display: block;

	width: 100%;

	margin: 0;
	padding: 0;

	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;

	color: rgba(255, 255, 255, 0.9);
}


/* ==================================================
   INTERACCIÓN
   ================================================== */

.proyecto-card__link:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -2px;
}


/* ==================================================
   SIN RESULTADOS
   ================================================== */

.proyectos-vacio,
.proyectos-sin-resultados {
	width: 100%;

	margin: 0;
	padding: 40px 20px;

	color: #ffffff;
}

.proyectos-vacio p,
.proyectos-sin-resultados p {
	margin: 0;
	padding: 0;

	font-size: 15px;
	line-height: 1.4;
}


/* ==================================================
   UTILIDAD
   ================================================== */

.proyectos-archivo [hidden] {
	display: none !important;
}

/* ==================================================
   ANIMACIÓN DE ENTRADA — PROYECTOS
   ================================================== */


/* ==================================================
   IMAGEN
   ================================================== */

.proyectos-js .proyecto-card .proyecto-card__imagen {
	opacity: 0;

	transform: scale(1.03);

	transition:
		opacity 0.8s ease-out,
		transform 1s ease-out;
}


/* ==================================================
   LOGO
   ================================================== */

.proyectos-js .proyecto-card .proyecto-card__logo-contenedor {
	opacity: 0;

	transform: translateY(12px);

	transition:
		opacity 0.65s ease-out,
		transform 0.65s ease-out;
}


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

.proyectos-js .proyecto-card .proyecto-card__titulo {
	opacity: 0;

	transform: translateY(12px);

	transition:
		opacity 0.65s ease-out 0.08s,
		transform 0.65s ease-out 0.08s;
}


/* ==================================================
   DATOS
   ================================================== */

.proyectos-js .proyecto-card .proyecto-card__datos {
	opacity: 0;

	transform: translateY(12px);

	transition:
		opacity 0.65s ease-out 0.16s,
		transform 0.65s ease-out 0.16s;
}


/* ==================================================
   PROYECTO VISIBLE
   ================================================== */

.proyectos-js .proyecto-card.is-visible .proyecto-card__imagen {
	opacity: 1;

	transform: scale(1);
}

.proyectos-js .proyecto-card.is-visible .proyecto-card__logo-contenedor,
.proyectos-js .proyecto-card.is-visible .proyecto-card__titulo,
.proyectos-js .proyecto-card.is-visible .proyecto-card__datos {
	opacity: 1;

	transform: translateY(0);
}


/* ==================================================
   ACCESIBILIDAD — REDUCIR MOVIMIENTO
   ================================================== */

@media (prefers-reduced-motion: reduce) {

	.proyectos-js .proyecto-card .proyecto-card__imagen,
	.proyectos-js .proyecto-card .proyecto-card__logo-contenedor,
	.proyectos-js .proyecto-card .proyecto-card__titulo,
	.proyectos-js .proyecto-card .proyecto-card__datos {
		opacity: 1;

		transform: none;

		transition: none;
	}

}

/* ==================================================
   FILTRO PRINCIPAL SIEMPRE VISIBLE
   COMERCIO | LANDSCAPE | RESIDENCIAL | VERTICAL
   ================================================== */


/* OCULTAR "ENCUENTRA PROYECTOS" */

[data-dropdown-grupo-trigger] {
	display: none;
}


/* ==================================================
   CONTENEDOR DE LOS 4 GRUPOS
   ================================================== */

[data-dropdown-grupo-menu] {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	width: 100%;

	margin: 0;
	padding: 0;

	gap: 6px;

	background: transparent;
}


/* ==================================================
   CADA GRUPO PRINCIPAL
   ================================================== */

[data-dropdown-grupo-menu]
.proyectos-dropdown__opcion {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 40px;

	margin: 0;
	padding: 8px 5px;

	border: 1px solid rgba(255, 255, 255, 0.24);

	background: rgba(10, 43, 82, 0.70);

	color: #ffffff;

	font-family: inherit;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.1;

	text-align: center;

	white-space: nowrap;
}


/* TOQUE */

[data-dropdown-grupo-menu]
.proyectos-dropdown__opcion:active {
	background: rgba(10, 43, 82, 0.95);
}


/* ==================================================
   SEGUNDO NIVEL
   MANTENER COMO DROPDOWN
   ================================================== */

[data-dropdown-categoria] {
	margin-top: 2px;
}

[data-dropdown-categoria-trigger] {
	background: rgba(10, 43, 82, 0.70);
}

/* ==================================================
   TARJETAS — AJUSTES MÓVIL
   ================================================== */

@media (max-width: 767px) {


	/* ==================================================
	   TARJETA
	   PUEDE CRECER SI EL TÍTULO HACE WRAP
	   ================================================== */

	.proyecto-card {
		height: auto;
		min-height: 185px;
	}


	.proyecto-card__link {
		min-height: 185px;
		height: auto;

		align-items: stretch;
	}


	/* ==================================================
	   INFORMACIÓN
	   ================================================== */

	.proyecto-card__info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		min-height: 185px;

		padding: 14px 16px 16px 18px;
	}


	/* ==================================================
	   LOGO
	   ================================================== */

	.proyecto-card__logo-contenedor {
		flex: 0 0 auto;

		height: 32px;

		margin: 0 0 auto;
		padding: 0;
	}


	/* ==================================================
	   NOMBRE
	   ================================================== */

	.proyecto-card__titulo {
		flex: 0 0 auto;

		width: 100%;

		margin: 14px 0 10px;
		padding: 0;

		font-size: clamp(18px, 5vw, 25px);
		line-height: 1.05;

		overflow: visible;
	}


	/* ==================================================
	   AÑO + UBICACIÓN
	   NUNCA SE OCULTAN
	   ================================================== */

	.proyecto-card__datos {
		flex: 0 0 auto;

		width: 100%;

		margin: 0;
		padding: 0;
	}


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

	.proyecto-card__media {
		position: relative;

		min-height: 185px;
	}


	/* ==================================================
	   OVERLAY — MISMO LENGUAJE DEL SINGLE
	   ================================================== */

	.proyecto-card__media::after {
		content: "";

		position: absolute;

		top: 10px;
		right: 0;
		bottom: 10px;
		left: 10px;

		z-index: 2;

		pointer-events: none;

		background: linear-gradient(
			90deg,
			rgba(10, 43, 82, 0.98) 0%,
			rgba(30, 92, 165, 0.82) 38%,
			rgba(48, 107, 178, 0.45) 70%,
			rgba(48, 107, 178, 0.12) 100%
		);

		mix-blend-mode: multiply;
	}


	.proyecto-card__imagen {
		position: relative;

		z-index: 1;

		min-height: 185px;

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

}

/* ==================================================
   CATÁLOGO — COMPUTADORA
   GRID CUADRADO
   ================================================== */

@media (min-width: 1024px) {


	/* ==================================================
	   LISTADO
	   4 COLUMNAS
	   ================================================== */

	.proyectos-listado {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));

		width: 100%;

		margin: 0;
		padding: 14px 20px 32px;

		gap: 10px;
	}


	/* ==================================================
	   PROYECTO
	   CUADRADO
	   ================================================== */

	.proyecto-card {
		position: relative;

		width: 100%;
		height: auto;

		aspect-ratio: 1 / 1;

		min-height: 0;

		margin: 0;
		padding: 0;

		border: 0;

		overflow: hidden;
	}


	/* ==================================================
	   LINK
	   ================================================== */

	.proyecto-card__link {
		position: relative;

		display: block;

		width: 100%;
		height: 100%;

		margin: 0;
		padding: 0;

		color: #ffffff;

		text-decoration: none;

		overflow: hidden;
	}


	/* ==================================================
	   PORTADA
	   OCUPA TODO EL CUADRADO
	   ================================================== */

	.proyecto-card__media {
		position: absolute;

		inset: 0;

		width: 100%;
		height: 100%;

		margin: 0;
		padding: 0;

		overflow: hidden;
	}


	.proyecto-card__imagen {
		display: block;

		width: 100%;
		height: 100%;

		min-height: 0;

		margin: 0;
		padding: 0;

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


	/* ==================================================
	   DEGRADADO
	   ================================================== */

	.proyecto-card__media::after {
		content: "";

		position: absolute;

		inset: 0;

		z-index: 2;

		pointer-events: none;

		background: linear-gradient(
			90deg,
			rgba(7, 28, 55, 0.96) 0%,
			rgba(10, 43, 82, 0.88) 28%,
			rgba(48, 107, 178, 0.55) 68%,
			rgba(48, 107, 178, 0.16) 100%
		);

		mix-blend-mode: multiply;
	}


	/* ==================================================
	   INFORMACIÓN SOBRE LA IMAGEN
	   ================================================== */

	.proyecto-card__info {
		position: absolute;

		inset: 0;

		z-index: 3;

		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;

		width: 100%;
		height: 100%;

		min-width: 0;

		margin: 0;
		padding: 18px;

		color: #ffffff;

		pointer-events: none;
	}


	/* ==================================================
	   LOGO ARRIBA
	   ================================================== */

	.proyecto-card__logo-contenedor {
		position: absolute;

		top: 18px;
		left: 18px;

		display: flex;
		align-items: flex-start;

		width: auto;
		height: 38px;

		margin: 0;
		padding: 0;
	}


	.proyecto-card__logo {
		display: block;

		width: auto;
		height: 38px;

		max-width: 86px;

		margin: 0;
		padding: 0;

		object-fit: contain;
		object-position: left center;
	}


	/* ==================================================
	   NOMBRE
	   ================================================== */

	.proyecto-card__titulo {
		width: 100%;

		margin: 0 0 8px;
		padding: 0;

		font-size: clamp(20px, 1.65vw, 30px);
		font-weight: 400;
		line-height: 1;

		letter-spacing: -0.035em;

		color: #ffffff !important;

		overflow-wrap: break-word;
	}


	/* ==================================================
	   AÑO + UBICACIÓN
	   ================================================== */

	.proyecto-card__datos {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		width: 100%;

		margin: 0;
		padding: 0;

		gap: 4px 10px;
	}


	.proyecto-card__anio,
	.proyecto-card__ubicacion {
		width: auto;

		font-size: 12px;
		line-height: 1.3;

		color: rgba(255, 255, 255, 0.92);
	}

}