/**
 * BAMZE Proyectos: listado y ficha.
 *
 * DIRECCION DE DISENO - "registro territorial".
 * El portafolio de BAMZE no son hospitales monumentales: son puestos de salud en
 * comunidades alejadas de Cajamarca, Cusco y Amazonas. Por eso la seccion no imita
 * el folleto corporativo, sino un expediente de campo: laminas numeradas, rotulos
 * en versalitas, cifras en cuerpo grande y una trama de curvas de nivel sobre las
 * bandas oscuras. El acento ocre no es decorativo: es el amarillo con el que estan
 * pintados los propios establecimientos que BAMZE equipa (Udima, Tungasuca,
 * Lonya Grande), asi que el color sale del material fotografico, no de una paleta.
 *
 * Tipografia: Barlow y Open Sans, que el tema ya carga. Ninguna fuente externa.
 *
 * Los selectores se anteponen con el contenedor propio porque theme.css de Porto
 * carga despues y ganaria los empates de especificidad.
 */

.bc-proy,
.bc-proy-ficha {
	--bc-tinta: var(--porto-primary-color, #01116e);
	--bc-tinta-2: var(--porto-secondary-color, #091f7c);
	--bc-ocre: #e0922f;
	--bc-papel: #f4f2ed;
	--bc-titulo: var(--porto-heading-color, #222529);
	--bc-texto: #5d6070;
	--bc-linea: rgba(1, 17, 110, .14);
	--bc-display: "Barlow", "Open Sans", sans-serif;

	/* Margen para lo que queda fijo al bajar. Medido el 31-ago-2026 sobre el
	   sitio real: la cabecera de Porto (.header-main) se queda fija y mide 111 px;
	   la barra de administrador de WordPress anade otros 32 y solo la ve el
	   personal, por eso va aparte. Sin esta cuenta, el rotulo de la trayectoria y
	   el titulo del panel de la ficha se meten debajo de la cabecera. */
	--bc-fijo: 125px;

	/* Curvas de nivel: dos tramas cruzadas muy tenues, sin imagenes. */
	/* Una sola direccion y paso amplio: cruzadas y apretadas se leian como ruido
	   de compresion, no como trama. */
	--bc-trama: repeating-linear-gradient(58deg,
		rgba(255, 255, 255, .055) 0 1px,
		transparent 1px 26px);
}

body.admin-bar .bc-proy,
body.admin-bar .bc-proy-ficha {
	--bc-fijo: 157px;
}

.bc-proy {
	margin: 0 0 8px;
	color: var(--bc-texto);
}

/* ============ 1. Entradilla ============ */

/*
 * Sin caja y sin casillas de dato: encima ya hay una franja oscura del tema, y
 * dos bloques oscuros seguidos parten la pagina. Los numeros van dentro de la
 * frase, con el peso tipografico como unico realce.
 *
 * COMPOSICION (31-ago-2026). Antes el bloque media 704 px dentro de un
 * contenedor de 1140 y dejaba medio ancho vacio a la derecha, que se leia como
 * un agujero. Ahora ocupa el ancho entero SIN anadir una palabra:
 *  - Una regla fina que arranca del epigrafe y llega al borde derecho. Es lo
 *    que hace que el bloque reclame el ancho; el espacio en blanco deja de
 *    parecer un descuido y pasa a ser parte del renglon.
 *  - El cuerpo en dos columnas: el titular a la izquierda y el parrafo, que
 *    antes iba debajo, a la derecha. Mismo texto, repartido.
 * El filo ocre de la izquierda se queda: es la firma que comparte con el cierre
 * de la seccion.
 */
.bc-proy-entrada {
	padding: 4px 0 0 22px;
	border-left: 3px solid var(--bc-ocre);
	/*
	 * Aire por debajo. Medido el 31-ago-2026 sobre el sitio: encima del bloque hay
	 * 68 px (el relleno superior que el tema pone al contenido) y debajo solo
	 * habia 26, los de la barra de control. Con esa diferencia la entradilla se
	 * leia pegada a los filtros. Con 42 px propios, debajo quedan 68 y el bloque
	 * respira igual por los dos lados.
	 *
	 * Medida FIJA, no elastica: el relleno de arriba lo pone el tema y vale 68 px
	 * en cualquier pantalla, asi que encogerlo en el movil devolvia la asimetria
	 * que se venia a corregir (quedaba en 68 arriba y 54 abajo).
	 */
	margin: 0 0 42px;
}

.bc-proy-entrada__cab {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 18px;
}

.bc-proy-entrada__epigrafe {
	flex: 0 0 auto;
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--bc-texto);
}

/* La regla se come el ancho sobrante: no hay hueco, hay renglon. */
.bc-proy-entrada__regla {
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg,
		var(--bc-linea) 0,
		var(--bc-linea) 82%,
		transparent 100%);
}

.bc-proy-entrada__cuerpo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.bc-proy .bc-proy-entrada__titular {
	margin: 0;
	color: var(--bc-titulo);
	font-family: var(--bc-display);
	font-size: clamp(26px, 3.6vw, 40px);
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -.015em;
	text-wrap: balance;
}

/* El numero no se encierra: solo cambia de peso y de color dentro de la frase. */
.bc-proy-entrada__n {
	color: var(--bc-tinta);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.bc-proy .bc-proy-entrada__texto {
	margin: 0;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.8;
	color: var(--bc-texto);
}

@media (min-width: 992px) {
	/* Reparto 1,45 : 1. El titular manda y el parrafo lo acompana; a partes
	   iguales los dos competian y ninguno se leia primero. */
	.bc-proy-entrada__cuerpo {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		gap: 52px;
	}

	/* Un pelo de aire arriba para que la primera linea del parrafo caiga a la
	   altura optica de la primera del titular, que es mucho mas alta. */
	.bc-proy .bc-proy-entrada__texto {
		padding-top: 6px;
	}
}

/* ============ 2. Linea de tiempo ============ */

/*
 * VERTICAL, con el eje a la izquierda y los anos en orden ascendente.
 *
 * Por que dejo de ser horizontal: en pantalla de movil cada hito ocupaba 82 px y
 * habia 335 px disponibles, o sea que cabian exactamente CUATRO anos. Con el
 * quinto habia que arrastrar de lado, y el arrastre horizontal es el gesto que
 * menos gente descubre. En vertical se baja, que es lo que ya se esta haciendo.
 *
 * Sigue siendo un control, no un adorno: la fila entera es el enlace que filtra,
 * con 52 px de alto para que sea comodo de pulsar con el dedo.
 *
 * La columna se corta en 330 px a proposito. Con el ancho del contenedor (1140)
 * el ano quedaba a la izquierda y el conteo a 400 px de distancia, y la vista no
 * relacionaba los dos: se leia como dos listas sueltas. A 330 px la fila se lee
 * como una linea de indice. La entradilla que va justo encima tampoco ocupa todo
 * el ancho (704 px), asi que la pagina ya trabaja con columnas mas estrechas que
 * el contenedor.
 */

.bc-proy-tiempo {
	padding: 0 0 4px;
}

.bc-proy-tiempo__cab,
.bc-proy-tiempo__eje {
	max-width: 330px;
}

.bc-proy-tiempo__cab {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 18px;
}

.bc-proy-tiempo__rotulo {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--bc-texto);
}

.bc-proy .bc-proy-tiempo__reset {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bc-tinta);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

.bc-proy .bc-proy-tiempo__reset::before {
	content: "";
	width: 16px;
	height: 2px;
	background: var(--bc-ocre);
}

/*
 * El eje va POR TRAMOS, no en linea continua: los propios tramos hacen de
 * graduacion (antes eso lo ponia una segunda trama superpuesta, que sobre una
 * linea partida solo habria sido ruido) y la trayectoria se lee como una serie
 * de etapas y no como una raya con puntos encima.
 *
 * Las filas van pegadas y todas miden lo mismo, asi que el eje empieza y termina
 * en el centro del primer y del ultimo rombo. Las tres medidas viven aqui con
 * nombre y no repartidas por el archivo, porque las tres salen de la MISMA
 * geometria de fila y si se cambia una hay que rehacer las otras:
 *
 *   --bc-fila     alto de una fila de hito (relleno + bloque del ano + barra)
 *   --bc-eje-ini  del tope de la fila al centro del rombo
 *   --bc-eje-fin  del centro del rombo al pie de la fila
 *
 * No son iguales entre si porque la fila tiene dos pisos y el rombo vive en el
 * de arriba. En movil cambian las tres a la vez, al final del bloque.
 */

.bc-proy-tiempo__eje {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	--bc-fila: 51px;
	--bc-eje-ini: 20px;
	--bc-eje-fin: 31px;
}

.bc-proy-tiempo__eje li {
	list-style: none;
	margin: 0;
}

.bc-proy-tiempo__eje::before,
.bc-proy-tiempo__eje::after {
	content: "";
	position: absolute;
	top: var(--bc-eje-ini);
	left: 6px;
	width: 1px;
	pointer-events: none;
}

/* Eje completo, en gris. Tramo largo y con cuerpo: con pocos anos apenas quedan
   tres o cuatro tramos a la vista, y a menos contraste el eje desaparecia. */
.bc-proy-tiempo__eje::before {
	bottom: var(--bc-eje-fin);
	background-image: repeating-linear-gradient(180deg,
		rgba(1, 17, 110, .38) 0 6px,
		transparent 6px 10px);
}

/*
 * TRAMO RECORRIDO: de arriba hasta el ano filtrado, en ocre. Se lee como un
 * trayecto y no como hitos sueltos.
 *
 * La altura sale de multiplicar el alto de fila por --bc-recorrido, que es la
 * posicion del ano activo contando desde arriba (0 = el primero). Lo pone el
 * servidor en el atributo y lo reescribe el JS al filtrar sin recargar. Sin
 * ano puesto la variable no existe, el valor de reserva es 0 y no se pinta nada.
 *
 * Los tramos coinciden con los del eje gris porque ambos arrancan en el mismo
 * punto y llevan el mismo paso: el ocre tapa al gris sin desfase.
 */
.bc-proy-tiempo__eje::after {
	height: calc(var(--bc-recorrido, 0) * var(--bc-fila));
	background-image: repeating-linear-gradient(180deg,
		var(--bc-ocre) 0 6px,
		transparent 6px 10px);
}

.bc-proy .bc-proy-hito {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	padding: 9px 0;
	color: var(--bc-texto);
	text-decoration: none;
}

/* El punto se alinea con el ano, no con el centro de la fila: la fila tiene dos
   pisos (ano y barra) y un punto centrado quedaria a la altura de la barra. */
/*
 * Nodo en rombo: un cuadrado girado, marca de plano tecnico, que separa esta
 * trayectoria del punto redondo de cualquier linea de tiempo.
 *
 * box-sizing en border-box a proposito: asi el nodo sigue ocupando 13x13 con su
 * borde incluido y su centro se queda en 6,5 px, que es donde pasa el eje. El
 * giro no cambia la caja de maquetacion, solo lo que se ve.
 *
 * OJO al tocar los estados: transform lleva el giro, asi que cualquier escala
 * tiene que escribirse DESPUES del rotate o el rombo vuelve a ser cuadrado.
 */
.bc-proy-hito__punto {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 13px;
	height: 13px;
	margin-top: 5px;
	border: 2px solid #c8cddf;
	background: #fff;
	transform: rotate(45deg);
	transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.bc-proy-hito__datos {
	flex: 1;
	min-width: 0;
	margin-left: 13px;
}

/*
 * Alto FIJO, reservado para el ano activo (32 px) aunque el inactivo mida 26.
 * Sin esto la fila crece al activarse, todas las de abajo se desplazan y el eje
 * deja de terminar en el centro del ultimo punto.
 */
.bc-proy-hito__cab {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	height: 22px;
}

.bc-proy-hito__anio {
	font-family: var(--bc-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.01em;
	color: #6b6e7d;
	font-variant-numeric: tabular-nums;
	transition: color .2s ease, font-size .2s ease;
}

.bc-proy-hito__n {
	color: #8b8e9c;
	font-family: var(--bc-display);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: color .2s ease;
}

/*
 * La barra de actividad. Es lo que separa esta columna de una lista de fechas:
 * su largo sale del numero de proyectos de ese ano respecto al ano de mas
 * trabajo, asi que la forma la dicta el dato. El ancho lo pone la plantilla en
 * el atributo, porque cada ano tiene el suyo.
 */
.bc-proy-hito__pista {
	display: block;
	height: 6px;
	margin-top: 5px;
	background: rgba(1, 17, 110, .07);
}

.bc-proy-hito__barra {
	display: block;
	height: 6px;
	background: #b9bdcc;
	transition: background-color .2s ease;
}

.bc-proy .bc-proy-hito:hover .bc-proy-hito__punto {
	border-color: var(--bc-ocre);
	transform: rotate(45deg) scale(1.15);
	box-shadow: 0 0 0 3px #fff;
}

.bc-proy .bc-proy-hito:hover .bc-proy-hito__anio {
	color: var(--bc-tinta);
}

.bc-proy .bc-proy-hito:hover .bc-proy-hito__barra {
	background: #8f94a8;
}

.bc-proy .bc-proy-hito--activo .bc-proy-hito__punto {
	border-color: var(--bc-ocre);
	background: var(--bc-ocre);
	transform: rotate(45deg) scale(1.25);
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(224, 146, 47, .2);
}

.bc-proy .bc-proy-hito--activo .bc-proy-hito__anio {
	color: var(--bc-tinta);
	font-size: 21px;
	font-weight: 800;
}

.bc-proy .bc-proy-hito--activo .bc-proy-hito__n {
	color: var(--bc-ocre);
}

.bc-proy .bc-proy-hito--activo .bc-proy-hito__barra {
	background: var(--bc-ocre);
}

@media (prefers-reduced-motion: reduce) {
	.bc-proy-hito__punto,
	.bc-proy-hito__anio,
	.bc-proy-hito__barra {
		transition: none;
	}
}

@media (max-width: 699px) {
	.bc-proy .bc-proy-hito {
		padding: 8px 0;
	}

	.bc-proy-hito__punto {
		margin-top: 4px;
	}

	.bc-proy-hito__cab {
		height: 21px;
	}

	.bc-proy-hito__anio {
		font-size: 17px;
	}

	.bc-proy .bc-proy-hito--activo .bc-proy-hito__anio {
		font-size: 19px;
	}

	/* Filas de 48 px: el rombo queda a 18,5 del tope y a 29,5 del pie. */
	.bc-proy-tiempo__eje {
		--bc-fila: 48px;
		--bc-eje-ini: 18px;
		--bc-eje-fin: 29px;
	}
}

/* ============ 3. Barra de control ============ */

.bc-proy-control {
	padding: 26px 0 30px;
	border-bottom: 1px solid var(--bc-linea);
}

.bc-proy-control__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.bc-proy-pestanas {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
}

.bc-proy .bc-proy-pestana {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--bc-texto);
	font-family: var(--bc-display);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: color .18s ease;
}

.bc-proy .bc-proy-pestana::after {
	content: "";
	position: absolute;
	bottom: 6px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--bc-ocre);
	transition: width .22s ease;
}

.bc-proy .bc-proy-pestana:hover {
	color: var(--bc-tinta);
}

.bc-proy .bc-proy-pestana--activa {
	color: var(--bc-tinta);
	font-weight: 800;
}

.bc-proy .bc-proy-pestana--activa::after,
.bc-proy .bc-proy-pestana:hover::after {
	width: 100%;
}

/* Buscador. Es lo primero que busca quien llega sabiendo el nombre del
   establecimiento, asi que abre la fila de selectores en vez de esconderse. */

.bc-proy-busca {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 240px;
}

.bc-proy-busca__lupa {
	position: absolute;
	left: 14px;
	width: 13px;
	height: 13px;
	border: 2px solid var(--bc-texto);
	border-radius: 50%;
	pointer-events: none;
}

.bc-proy-busca__lupa::after {
	content: "";
	position: absolute;
	top: 11px;
	left: 10px;
	width: 6px;
	height: 2px;
	background: var(--bc-texto);
	transform: rotate(45deg);
}

/* Porto estiliza los campos con la misma especificidad y carga despues: se
   antepone el contenedor en vez de recurrir a !important. */
.bc-proy .bc-proy-busca__campo {
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 38px 0 38px;
	background: #fff;
	border: 1px solid var(--bc-linea);
	border-radius: 0;
	box-shadow: none;
	color: var(--bc-titulo);
	font-family: var(--bc-display);
	/* 16 px o menos: por debajo, Safari de iOS hace zoom al enfocar. */
	font-size: 16px;
	font-weight: 600;
}

.bc-proy .bc-proy-busca__campo::placeholder {
	color: var(--bc-texto);
	font-weight: 400;
}

.bc-proy .bc-proy-busca__campo:focus {
	outline: none;
	border-color: var(--bc-tinta);
	box-shadow: inset 0 -2px 0 var(--bc-ocre);
}

.bc-proy-busca__campo::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.bc-proy-busca__x {
	position: absolute;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.bc-proy-busca__x::before,
.bc-proy-busca__x::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 1px;
	background: var(--bc-texto);
}

.bc-proy-busca__x::before { transform: rotate(45deg); }
.bc-proy-busca__x::after  { transform: rotate(-45deg); }

.bc-proy-busca__x:hover::before,
.bc-proy-busca__x:hover::after {
	background: var(--bc-tinta);
}

/* El boton de enviar solo existe para quien no tiene JavaScript: con JS el
   filtrado ocurre al teclear y un boton mas seria ruido. */
.bc-proy-busca__enviar {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}

.bc-proy-selectores {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bc-proy-menu {
	position: relative;
}

.bc-proy-menu__boton {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-height: 52px;
	padding: 7px 38px 7px 15px;
	background: #fff;
	border: 1px solid var(--bc-linea);
	color: var(--bc-titulo);
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease;
}

.bc-proy-menu__boton:hover,
.bc-proy-menu__boton[aria-expanded="true"] {
	border-color: var(--bc-tinta);
}

.bc-proy-menu__boton--activo {
	border-color: var(--bc-ocre);
	box-shadow: inset 3px 0 0 var(--bc-ocre);
}

.bc-proy-menu__etq {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bc-texto);
}

.bc-proy-menu__val {
	font-family: var(--bc-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--bc-tinta);
}

.bc-proy-menu__flecha {
	position: absolute;
	top: 50%;
	right: 15px;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 2px solid var(--bc-tinta);
	border-bottom: 2px solid var(--bc-tinta);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.bc-proy-menu__boton[aria-expanded="true"] .bc-proy-menu__flecha {
	margin-top: -1px;
	transform: rotate(-135deg);
}

.bc-proy-menu__lista {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	min-width: 252px;
	max-height: 330px;
	margin: 0;
	padding: 4px 0;
	overflow-y: auto;
	list-style: none;
	background: #fff;
	border: 1px solid var(--bc-linea);
	box-shadow: 0 18px 40px rgba(5, 11, 46, .16);
}

.bc-proy-menu__lista li {
	margin: 0;
	list-style: none;
}

.bc-proy .bc-proy-menu__lista a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 44px;
	padding: 0 15px;
	border-left: 3px solid transparent;
	color: var(--bc-titulo);
	font-size: 14px;
	text-decoration: none;
}

.bc-proy .bc-proy-menu__lista a:hover {
	background: var(--bc-papel);
	border-left-color: var(--bc-ocre);
	color: var(--bc-tinta);
}

.bc-proy .bc-proy-menu__activo {
	border-left-color: var(--bc-ocre);
	color: var(--bc-tinta);
	font-weight: 700;
}

.bc-proy-menu__n {
	font-family: var(--bc-display);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--bc-texto);
}

/* Resultado y filtros activos */

.bc-proy .bc-proy-limpiar {
	margin-left: auto;
	color: var(--bc-texto);
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bc-proy .bc-proy-limpiar:hover {
	color: var(--bc-tinta);
}

/* Sin ningun filtro puesto no hay nada que quitar. */
.bc-proy-control__resultado:not(.bc-proy-control__resultado--oculto) .bc-proy-limpiar {
	display: inline;
}

.bc-proy-control__resultado {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 22px;
}

.bc-proy .bc-proy-cuenta {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: 0;
}

.bc-proy-cuenta__n {
	font-family: var(--bc-display);
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--bc-tinta);
}

.bc-proy-cuenta__etq {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bc-texto);
}

.bc-proy-activos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bc-proy-activos li {
	margin: 0;
	list-style: none;
}

.bc-proy .bc-proy-activos a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	padding: 0 12px;
	background: rgba(224, 146, 47, .12);
	border: 1px solid rgba(224, 146, 47, .45);
	color: var(--bc-titulo);
	font-size: 13px;
	text-decoration: none;
	transition: background-color .18s ease;
}

.bc-proy .bc-proy-activos a:hover {
	background: rgba(224, 146, 47, .26);
}

/* La cruz se dibuja: nada de tipografia decorativa. */
.bc-proy-activos__x {
	position: relative;
	width: 9px;
	height: 9px;
}

.bc-proy-activos__x::before,
.bc-proy-activos__x::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 9px;
	height: 2px;
	background: var(--bc-titulo);
}

.bc-proy-activos__x::before {
	transform: rotate(45deg);
}

.bc-proy-activos__x::after {
	transform: rotate(-45deg);
}

/* ============ 4. Reticula de laminas ============ */

/*
 * Las lineas de la reticula las ponen las propias tarjetas con su borde, no el
 * fondo del contenedor: asi una fila incompleta termina en blanco en vez de
 * dejar un bloque gris donde faltan tarjetas.
 */
/* ============ Cuerpo: trayectoria + fichas ============ */

/*
 * Dos columnas: la trayectoria a la izquierda y las fichas a la derecha.
 *
 * Antes la trayectoria iba encima de la reticula. Con cuatro anos se aguantaba,
 * pero cada ano nuevo empujaba los proyectos hacia abajo: con doce habria que
 * bajar setecientos pixeles de anos antes de ver el primer establecimiento. De
 * lado, la columna crece sin mover nada de sitio.
 *
 * En pantalla ancha la columna ademas queda fija mientras se recorren las
 * tarjetas, asi que el filtro por ano esta siempre a la vista. Por debajo de
 * 992 px las dos columnas se apilan y la trayectoria vuelve a ir arriba, que en
 * un telefono es lo unico que cabe.
 */

.bc-proy-cuerpo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	/* Sin esto la columna izquierda se estira a la altura de la reticula y la
	   posicion fija no tiene contra que trabajar. */
	align-items: start;
}

.bc-proy-resultados {
	min-width: 0;
}

/*
 * Grupos por ano. Cada ano es su propia reticula con su encabezado, de modo que
 * el registro se recorre por campanas y no como una lista plana.
 *
 * El encabezado repite el recurso de la entradilla -rotulo, regla hasta el borde
 * y cifra al final- para que la pagina hable un solo idioma.
 */

.bc-proy-grupo + .bc-proy-grupo {
	margin-top: 38px;
}

.bc-proy-grupo__cab {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 14px;
}

.bc-proy .bc-proy-grupo__anio {
	margin: 0;
	color: var(--bc-titulo);
	font-family: var(--bc-display);
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}

.bc-proy-grupo__regla {
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg,
		var(--bc-linea) 0,
		var(--bc-linea) 88%,
		transparent 100%);
}

.bc-proy .bc-proy-grupo__n {
	flex: 0 0 auto;
	margin: 0;
	color: var(--bc-texto);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.bc-proy-grupo__n-etq {
	font-weight: 600;
}

.bc-proy-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--bc-linea);
	border-left: 1px solid var(--bc-linea);
}

.bc-proy-tarjeta {
	position: relative;
	background: #fff;
	border-right: 1px solid var(--bc-linea);
	border-bottom: 1px solid var(--bc-linea);
	opacity: 0;
	animation: bc-proy-entra .5s ease forwards;
	transition: box-shadow .25s ease;
}

/* El realce no desplaza la tarjeta: con bordes compartidos, moverla abriria
   huecos en la reticula. Filo ocre arriba y sombra. */
.bc-proy-tarjeta:hover {
	z-index: 2;
	box-shadow: inset 0 3px 0 var(--bc-ocre), 0 14px 30px rgba(5, 11, 46, .13);
}

@keyframes bc-proy-entra {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* Al filtrar sin recargar no hay parpadeo de pagina que avise de que algo
   cambio: este pulso de la reticula hace ese trabajo. */
.bc-proy-grid--entra {
	animation: bc-proy-refresco .34s ease;
}

@keyframes bc-proy-refresco {
	from { opacity: .25; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bc-proy-grid--entra {
		animation: none;
	}
}

/* Entrada escalonada sin estilo en linea ni JS. */
.bc-proy-tarjeta:nth-child(1)  { animation-delay: 0s; }
.bc-proy-tarjeta:nth-child(2)  { animation-delay: .05s; }
.bc-proy-tarjeta:nth-child(3)  { animation-delay: .1s; }
.bc-proy-tarjeta:nth-child(4)  { animation-delay: .15s; }
.bc-proy-tarjeta:nth-child(5)  { animation-delay: .2s; }
.bc-proy-tarjeta:nth-child(6)  { animation-delay: .25s; }
.bc-proy-tarjeta:nth-child(7)  { animation-delay: .3s; }
.bc-proy-tarjeta:nth-child(8)  { animation-delay: .35s; }
.bc-proy-tarjeta:nth-child(9)  { animation-delay: .4s; }
.bc-proy-tarjeta:nth-child(10) { animation-delay: .45s; }
.bc-proy-tarjeta:nth-child(11) { animation-delay: .5s; }
.bc-proy-tarjeta:nth-child(n+12) { animation-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
	.bc-proy-tarjeta {
		opacity: 1;
		animation: none;
	}
}

.bc-proy .bc-proy-tarjeta__enlace {
	display: block;
	color: inherit;
	text-decoration: none;
}

.bc-proy-tarjeta__lamina {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--bc-tinta);
	background-image: var(--bc-trama);
}

.bc-proy-tarjeta__lamina img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.bc-proy-tarjeta:hover .bc-proy-tarjeta__lamina img {
	transform: scale(1.06);
}

/* Numero de registro sobre la lamina. */
.bc-proy-tarjeta__registro {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 7px 12px;
	background: rgba(1, 17, 110, .86);
	color: #fff;
	font-family: var(--bc-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	font-variant-numeric: tabular-nums;
}

/* Sin foto el numero manda: la lamina se lee como placa a la espera de imagen. */
.bc-proy-tarjeta--sinfoto .bc-proy-tarjeta__registro {
	top: 50%;
	left: 50%;
	padding: 0;
	background: none;
	color: rgba(255, 255, 255, .17);
	font-size: 78px;
	line-height: 1;
	letter-spacing: -.04em;
	transform: translate(-50%, -50%);
	transition: color .3s ease;
}

.bc-proy-tarjeta--sinfoto:hover .bc-proy-tarjeta__registro {
	color: rgba(224, 146, 47, .5);
}

/*
 * Nivel de atencion. Estaba en una etiqueta ocre pegada sobre la fotografia:
 * tapaba una esquina y competia con la imagen justo donde la imagen es lo que
 * vende. Ahora es el rotulo que abre el cuerpo, encima del nombre.
 *
 * El alto minimo reserva su linea aunque el proyecto no tenga nivel puesto, para
 * que los titulos de una misma fila arranquen a la misma altura.
 */
.bc-proy .bc-proy-tarjeta__nivel {
	margin: 0 0 9px;
	min-height: 13px;
	color: var(--bc-ocre);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.bc-proy-tarjeta__cuerpo {
	padding: 22px 22px 26px;
}

.bc-proy .bc-proy-tarjeta__titulo {
	margin: 0 0 12px;
	color: var(--bc-titulo);
	font-family: var(--bc-display);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	/* Porto impone nowrap y elipsis en los titulos de tarjeta: se anula aqui. */
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.bc-proy-tarjeta__regla {
	display: block;
	width: 26px;
	height: 2px;
	margin: 0 0 12px;
	background: var(--bc-ocre);
	transition: width .35s cubic-bezier(.2, .7, .3, 1);
}

.bc-proy-tarjeta:hover .bc-proy-tarjeta__regla {
	width: 72px;
}

.bc-proy .bc-proy-tarjeta__meta {
	margin: 0 0 16px;
	min-height: 20px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bc-texto);
}

.bc-proy-tarjeta__ver {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--bc-tinta);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.bc-proy-tarjeta__ver::after {
	content: "";
	width: 18px;
	height: 1px;
	background: var(--bc-tinta);
	transition: width .3s ease;
}

.bc-proy-tarjeta:hover .bc-proy-tarjeta__ver::after {
	width: 34px;
}

/* ============ Lotes, vacio, botones ============ */

.bc-proy-mas {
	display: flex;
	justify-content: center;
	margin: 30px 0 0;
}

.bc-proy .bc-proy-boton--linea {
	background: #fff;
	border: 1px solid var(--bc-tinta);
	color: var(--bc-tinta);
}

.bc-proy .bc-proy-boton--linea:hover {
	background: var(--bc-tinta);
	color: #fff;
}

.bc-proy-mas__n {
	margin-left: 10px;
	opacity: .7;
	font-variant-numeric: tabular-nums;
}

.bc-proy-vacio {
	padding: 60px 0;
	text-align: center;
}

.bc-proy .bc-proy-vacio__titulo {
	margin: 0 0 8px;
	color: var(--bc-titulo);
	font-family: var(--bc-display);
	font-size: 22px;
	font-weight: 600;
}

.bc-proy .bc-proy-vacio__texto {
	margin: 0 0 22px;
	font-size: 15px;
}

.bc-proy .bc-proy-boton,
.bc-proy-ficha .bc-proy-boton {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 26px;
	background: var(--bc-tinta);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .18s ease;
}

.bc-proy .bc-proy-boton:hover,
.bc-proy-ficha .bc-proy-boton:hover {
	background: var(--bc-tinta-2);
	color: #fff;
}

/* ============ 5. Cierre ============ */

/*
 * Mismo lenguaje que la entradilla que abre la seccion: filo ocre a la IZQUIERDA,
 * sin caja oscura y sin trama. Dos motivos:
 *  - Coherencia: todo lo que hay entre la franja del tema y el pie es claro; una
 *    caja azul al final rompia el sistema.
 *  - Debajo empieza el pie de Porto, que ya es azul marino. Una banda oscura
 *    pegada a el dejaba dos bloques oscuros seguidos, el mismo defecto que se
 *    corrigio arriba con la banda de cifras.
 * El fondo papel basta para marcar que aqui termina el listado y empieza la
 * invitacion, sin subir la voz.
 */
.bc-proy-cierre {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: start;
	margin: 52px 0 0;
	padding: 36px 0 36px 22px;
	border-left: 3px solid var(--bc-ocre);
	background: var(--bc-papel);
}

.bc-proy .bc-proy-cierre__titulo {
	margin: 0 0 14px;
	max-width: 22ch;
	color: var(--bc-titulo);
	font-family: var(--bc-display);
	font-size: clamp(23px, 2.8vw, 31px);
	font-weight: 500;
	line-height: 1.24;
	letter-spacing: -.015em;
}

.bc-proy .bc-proy-cierre__parrafo {
	margin: 0;
	max-width: 60ch;
	color: var(--bc-texto);
	font-size: 15px;
	line-height: 1.8;
}

.bc-proy-cierre__acciones {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.bc-proy .bc-proy-cierre__acciones .bc-proy-boton {
	justify-content: space-between;
	min-height: 56px;
	padding: 0 22px;
}

/* Punta de flecha dibujada: marca que el boton lleva a otra parte del sitio y no
   abre un correo. Una raya suelta se leia como guion perdido. */
.bc-proy .bc-proy-cierre .bc-proy-boton::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: 18px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .25s ease;
}

.bc-proy .bc-proy-cierre .bc-proy-boton:hover::after {
	transform: rotate(45deg) translate(3px, -3px);
}

.bc-proy .bc-proy-cierre__alterna {
	margin: 18px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--bc-linea);
	max-width: 34ch;
	color: var(--bc-texto);
	font-size: 13px;
	line-height: 1.6;
}

.bc-proy .bc-proy-cierre__alterna a {
	color: var(--bc-tinta);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bc-proy .bc-proy-cierre__alterna a:hover {
	color: var(--bc-titulo);
}

/* ============ Ficha ============ */

.bc-proy-ficha {
	padding: 0 0 8px;
	color: var(--bc-texto);

	/* Aire entre bloques de la ficha, en un solo sitio. Estaba repartido a mano
	   y habia derivado: 44, 40, 44, 8, 40, 40, 32. El 8 dejaba la banda de cifras
	   pegada al contacto, el mismo defecto que se corrigio en la entradilla del
	   listado. Con un valor con nombre, anadir un bloque nuevo no obliga a
	   adivinar cual de los numeros era el bueno. */
	--bc-seccion: 44px;
}

/*
 * La portada sale del contenedor del tema y ocupa el ancho de la ventana. La
 * tecnica son margenes negativos de medio viewport; como 50vw incluye la barra
 * de desplazamiento, el sobrante se absorbe con overflow-x en el body, acotado
 * a las fichas de proyecto para no tocar el resto del sitio.
 */
body.single-bc_proyecto {
	overflow-x: hidden;
}

/* El nombre del establecimiento manda. La ubicacion y el anio bajaron a la
   columna de datos para no decirlos dos veces. */
/*
 * Porto reserva 65 px de relleno encima del contenido. En la ficha esa franja
 * blanca cae justo sobre la cabecera azul y se lee como un error de montaje, asi
 * que en las paginas de proyecto se anula. Se quita el relleno del tema en vez de
 * subir la cabecera con un margen negativo: si manana Porto cambia ese numero, la
 * cabecera sigue pegada sola.
 */
body.single-bc_proyecto .main-content {
	padding-top: 0;
}

/*
 * La portada va sobre papel, no sobre azul. El listado de la seccion es claro y
 * la franja azul de la ficha era la pieza que desentonaba; ademas los ocres y
 * naranjas de las fachadas resaltan mas contra un tono calido que contra el azul.
 * El azul de la marca se queda donde rinde: en el nombre y en los datos.
 */
.bc-proy-portada {
	position: relative;
	margin: 0 calc(50% - 50vw) var(--bc-seccion);
	padding: 26px 0 34px;
	overflow: hidden;
	background-color: var(--bc-papel);
}

.bc-proy-portada__interior {
	/* El ancho lo manda la foto: el nombre y los datos se alinean con sus bordes,
	   no con los del contenedor. Si no, la foto queda flotando mas estrecha que la
	   fila de abajo y la composicion se lee descuadrada. */
	width: min(100%, calc(70vh * (var(--bc-portada, 16 / 9))));
	/*
	 * 1400 y no 1170: la portada SALE del contenedor del tema y se lee como
	 * apertura, no como una imagen mas del articulo. El tope no es capricho: los
	 * bucles estan codificados a 1280 px y el de altura (70vh) hace que en una
	 * pantalla normal el video se pinte a unos 1320, o sea un 3 por ciento por
	 * encima de su tamano real. De borde a borde en un monitor de 1920 seria un
	 * 50 por ciento de agrandamiento, y ahi los carteles de los videos empiezan a
	 * verse blandos.
	 */
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 15px;
}

/*
 * El marco toma la proporcion exacta de la foto, asi que se ve ENTERA, sin un
 * solo recorte. El ancho es el menor entre el del contenedor y el que permite el
 * tope de altura, para que una foto casi cuadrada no se coma la pantalla.
 */
.bc-proy-portada__marco {
	position: relative;
	width: 100%;
	aspect-ratio: var(--bc-portada, 16 / 9);
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(1, 17, 110, .16);
}

/*
 * Nombre a la izquierda, datos a la derecha, alineados por la base. Es una fila
 * flexible y NO una rejilla de dos columnas: con nombres largos o con los tres
 * datos puestos, las columnas fijas se estrechaban y el nombre acababa impreso
 * encima de la ubicacion. Asi, cuando no caben, los datos bajan a la linea
 * siguiente y no se pisa nada.
 */
.bc-proy-portada__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 40px;
	padding-top: 26px;
}

.bc-proy-portada__texto {
	flex: 1 1 240px;
	min-width: 0;
}

.bc-proy-portada__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	margin: 0;
}

.bc-proy-portada__dato dt {
	margin: 0 0 4px;
	color: var(--bc-texto);
	font-family: var(--bc-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.bc-proy-portada__dato dd {
	margin: 0;
	max-width: 220px;
	color: var(--bc-tinta);
	font-size: 15px;
	line-height: 1.45;
}

.bc-proy-portada__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * PORTADA CON VIDEO. La imagen de respaldo es lo que se ve siempre: se pinta al
 * instante, es lo que el navegador mide como elemento mas grande de la pagina y
 * es lo unico que carga quien entra desde el celular. El bucle mudo se monta
 * encima solo en pantallas grandes, y el video entero no pesa un byte hasta que
 * alguien pulsa.
 */
.bc-proy-portada__bucle,
.bc-proy-portada__completo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	object-fit: cover;
}

.bc-proy-portada__bucle {
	opacity: 0;
	transition: opacity .8s ease;
}

.bc-proy-portada__bucle.es-visible {
	opacity: 1;
}

.bc-proy-portada__play {
	text-decoration: none;
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	justify-items: center;
	gap: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
	cursor: pointer;
	transform: translate(-50%, -50%);
}

.bc-proy-portada__play-icono {
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background-color: rgba(1, 17, 110, .82);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .38);
	transition: transform .25s ease, background-color .25s ease;
}

.bc-proy-portada__play-icono svg {
	/* El triangulo pesa a la izquierda: se corre para que quede centrado. */
	width: 30px;
	height: 30px;
	margin-left: 4px;
}

.bc-proy-portada__play:hover .bc-proy-portada__play-icono,
.bc-proy-portada__play:focus-visible .bc-proy-portada__play-icono {
	background-color: var(--bc-tinta);
	transform: scale(1.07);
}

.bc-proy-portada__play-texto {
	font-family: var(--bc-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/*
 * Boton de sonido. Mientras el bucle corre no hay boton grande en medio: un
 * triangulo de reproducir encima de una imagen que ya se mueve se lee como
 * averia. En su lugar aparece este control al acercar el raton, que es cuando el
 * visitante esta mirando la portada y puede querer oirla. Donde no hay raton
 * (tactil) se queda visible siempre, o seria un boton imposible de descubrir.
 */
/*
 * Los controles viven juntos abajo a la derecha y se descubren con el raton
 * sobre la portada. Se revelan los dos a la vez: separarlos obligaria a cazar
 * cada uno por su cuenta.
 */
.bc-proy-portada__controles {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .3s ease, transform .3s ease;
}

.bc-proy-portada__marco--video:hover .bc-proy-portada__controles,
.bc-proy-portada__controles:focus-within {
	opacity: 1;
	transform: translateY(0);
}

@media (hover: none) {
	.bc-proy-portada__controles {
		opacity: 1;
		transform: none;
	}
}

.bc-proy-portada__sonido {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 15px 9px 11px;
	border: 0;
	border-radius: 999px;
	background-color: rgba(9, 12, 30, .62);
	color: #fff;
	font-family: var(--bc-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .25s ease;
}

.bc-proy-portada__sonido:hover {
	background-color: var(--bc-tinta);
	color: #fff;
}

.bc-proy-portada__sonido svg {
	width: 19px;
	height: 19px;
	flex: none;
}

.bc-proy-portada--sinfoto {
	padding-top: 40px;
}

.bc-proy-portada__etiquetas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
}

/* Obra abierta: se dice con un contorno, no con otro bloque de color, para que
   no compita con la etiqueta de nivel. */
.bc-proy-portada__estado {
	display: inline-block;
	margin: 0;
	padding: 5px 10px;
	border: 1px solid var(--bc-tinta);
	color: var(--bc-tinta);
	font-family: var(--bc-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.bc-proy-portada__nivel {
	display: inline-block;
	margin: 0;
	padding: 6px 11px;
	background: var(--bc-ocre);
	color: #17130a;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.bc-proy-ficha .bc-proy-portada__nombre {
	margin: 0;
	color: var(--bc-tinta);
	font-family: var(--bc-display);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.02em;
}

/* Dos columnas: relato y ficha de datos. */

.bc-proy-columnas {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	align-items: start;
	margin: 0 0 var(--bc-seccion);
}

.bc-proy-relato {
	font-size: 16px;
	line-height: 1.85;
}

.bc-proy-relato > p:first-child {
	margin-top: 0;
	font-size: 18px;
	line-height: 1.7;
	color: var(--bc-titulo);
}

/* Columna de datos */

/* La caja acompana la lectura en pantallas anchas (regla sticky mas abajo): el
   boton de cotizar deja de perderse arriba en cuanto el relato crece. */
.bc-proy-datos__caja {
	padding: 24px 22px;
	border-left: 3px solid var(--bc-ocre);
	background: var(--bc-papel);
}

.bc-proy-ficha .bc-proy-datos__titulo {
	margin: 0 0 16px;
	color: var(--bc-titulo);
	font-family: var(--bc-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.bc-proy-datos__lista {
	margin: 0 0 24px;
}

.bc-proy-dato {
	padding: 12px 0;
	border-top: 1px solid var(--bc-linea);
}

.bc-proy-dato:first-child {
	border-top: none;
	padding-top: 0;
}

.bc-proy-dato dt {
	margin: 0 0 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bc-texto);
}

.bc-proy-dato dd {
	margin: 0;
	color: var(--bc-titulo);
	font-family: var(--bc-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

/* Bloque de cotizacion dentro de la columna de datos. */

.bc-proy-consulta {
	padding-top: 22px;
	border-top: 1px solid var(--bc-linea);
}

.bc-proy-ficha .bc-proy-consulta__texto {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.65;
}

.bc-proy-ficha .bc-proy-consulta .bc-proy-boton {
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 0 18px;
	text-align: center;
}

/* Banda de cifras: un numero grande merece una franja propia, no una fila de
   tabla en el panel lateral. */

.bc-proy-resumen {
	margin: 0 0 var(--bc-seccion);
	padding: 34px 0 30px;
	border-top: 1px solid var(--bc-linea);
}

.bc-proy-ficha .bc-proy-resumen__titulo {
	margin: 0 0 6px;
	color: var(--bc-titulo);
	font-family: var(--bc-display);
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.bc-proy-ficha .bc-proy-resumen__sub {
	margin: 0 0 26px;
	color: var(--bc-tinta);
	font-size: 14px;
}

.bc-proy-resumen__cifras {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 64px;
}

.bc-proy-cifra {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.bc-proy-cifra__n {
	font-family: var(--bc-display);
	font-size: clamp(32px, 3.6vw, 42px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--bc-tinta);
}

.bc-proy-cifra__etq {
	font-size: 14px;
	color: var(--bc-texto);
}

/* Contacto */

.bc-proy-contacto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 48px;
	margin: 0 0 var(--bc-seccion);
	padding: 26px 0;
	border-top: 1px solid var(--bc-linea);
	border-bottom: 1px solid var(--bc-linea);
}

.bc-proy-ficha .bc-proy-contacto__rotulo {
	margin: 0;
	min-width: 150px;
	color: var(--bc-titulo);
	font-family: var(--bc-display);
	font-size: 15px;
	font-weight: 700;
}

.bc-proy-contacto__items {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 52px;
}

.bc-proy-contacto__item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.bc-proy-contacto__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--bc-papel);
	color: var(--bc-tinta);
}

.bc-proy-contacto__icono svg {
	width: 19px;
	height: 19px;
}

.bc-proy-contacto__texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bc-proy-contacto__etq {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bc-texto);
}

.bc-proy-ficha .bc-proy-contacto__val {
	color: var(--bc-titulo);
	font-family: var(--bc-display);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	word-break: break-word;
}

.bc-proy-ficha .bc-proy-contacto__val:hover {
	color: var(--bc-tinta);
}

/* Encabezados de bloque de la ficha */

.bc-proy-ficha .bc-proy-h2 {
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bc-linea);
	color: var(--bc-titulo);
	font-family: var(--bc-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* ============ Tira de proceso ============ */

/*
 * Sustituye a la fila de etiquetas sueltas. Una etiqueta suelta dice "Instalacion"
 * y ahi se acaba; la tira dice el orden y, al pulsar, que es cada paso. La linea
 * que une los pasos es la misma idea que el riel de la trayectoria del listado:
 * lo que se cuenta es una secuencia, no un inventario.
 */

.bc-proy-proceso {
	/* Vive dentro de la columna del relato, detras del texto y de la galeria:
	   mismo aire por arriba que la galeria, y sin margen inferior propio porque
	   es el ultimo bloque de la columna. */
	margin: 36px 0 0;
}

.bc-proy-pasos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bc-proy-pasos li {
	list-style: none;
}

/*
 * Cada paso lleva su descripcion debajo, siempre visible. Con dos o tres pasos
 * caben en fila; con mas, la rejilla los reparte sola.
 */
.bc-proy-paso {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	grid-template-areas:
		"icono numero"
		"icono etiqueta"
		"texto texto";
	align-items: center;
	gap: 2px 14px;
}

.bc-proy-paso__icono {
	grid-area: icono;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var(--bc-tinta);
	border: 1px solid var(--bc-tinta);
	border-radius: 50%;
	color: #fff;
}

.bc-proy-paso__icono svg {
	width: 22px;
	height: 22px;
}

.bc-proy-paso__n {
	grid-area: numero;
	align-self: end;
	font-family: var(--bc-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--bc-ocre);
}

.bc-proy-paso__etq {
	grid-area: etiqueta;
	align-self: start;
	font-family: var(--bc-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bc-tinta);
}

.bc-proy-ficha .bc-proy-paso__texto {
	grid-area: texto;
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--bc-texto);
}

/* Galeria */

.bc-proy-galeria {
	margin: 36px 0 0;
}

.bc-proy-galeria__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

/*
 * Aviso de cuantas fotos quedan detras de la ultima que se ve. Va sobre la
 * miniatura, no debajo: es la pieza que dice "aqui hay mas" en el sitio al que
 * el ojo ya esta mirando.
 */
.bc-proy-galeria__mas {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: 2px;
	background-color: rgba(1, 17, 110, .62);
	color: #fff;
	font-family: var(--bc-display);
	text-align: center;
	transition: background-color .25s ease;
}

.bc-proy-galeria__item:hover .bc-proy-galeria__mas {
	background-color: rgba(1, 17, 110, .74);
}

.bc-proy-galeria__mas-n {
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 700;
	line-height: 1;
}

.bc-proy-galeria__mas-etq {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .82;
}

.bc-proy-galeria__ver {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 13px 18px;
	border: 1px solid var(--bc-linea);
	background: none;
	color: var(--bc-tinta);
	font-family: var(--bc-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.bc-proy-galeria__ver:hover {
	background-color: var(--bc-tinta);
	color: #fff;
}

.bc-proy-galeria__item {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bc-papel);
}

.bc-proy-galeria__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.bc-proy-galeria__item:hover img {
	transform: scale(1.05);
}

/* Sin esta senal, una miniatura parece una foto y ya: nadie descubre que se
   amplia. La lupa aparece al pasar por encima y esta siempre en el movil. */
.bc-proy-galeria__lupa {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: rgba(1, 17, 110, .82);
	border-radius: 50%;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease;
}

.bc-proy-galeria__lupa::before,
.bc-proy-galeria__lupa::after {
	content: "";
	position: absolute;
	background: #fff;
}

.bc-proy-galeria__lupa::before {
	width: 12px;
	height: 1px;
}

.bc-proy-galeria__lupa::after {
	width: 1px;
	height: 12px;
}

.bc-proy-galeria__item {
	position: relative;
}

.bc-proy-galeria__item:hover .bc-proy-galeria__lupa,
.bc-proy-galeria__item:focus-visible .bc-proy-galeria__lupa {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.bc-proy-galeria__lupa {
		opacity: 1;
		transform: none;
	}
}

/* Videos */

.bc-proy-videos {
	margin: 36px 0 0;
}

.bc-proy-video-enlace {
	display: flex;
	align-items: center;
	gap: 16px;
	/* Minimo tactil del proyecto. */
	min-height: 44px;
	padding: 16px 20px;
	background: var(--bc-papel);
	border-left: 3px solid var(--bc-ocre);
	color: var(--bc-tinta);
	text-decoration: none;
	transition: background-color .18s ease;
}

.bc-proy-video-enlace + .bc-proy-video-enlace {
	margin-top: 10px;
}

.bc-proy-video-enlace:hover,
.bc-proy-video-enlace:focus-visible {
	background: #ecebe4;
	color: var(--bc-tinta);
}

.bc-proy-video-enlace__icono {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: var(--bc-tinta);
}

.bc-proy-video-enlace__icono svg {
	width: 34px;
	height: 34px;
}

.bc-proy-video-enlace__texto {
	display: block;
}

.bc-proy-video-enlace__titulo {
	display: block;
	font-family: var(--bc-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.bc-proy-video-enlace__pie {
	display: block;
	margin-top: 3px;
	color: var(--bc-texto);
	font-size: 13px;
}

.bc-proy-video-archivo {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

/* Visor de galeria */

.bc-proy-sin-scroll,
.bc-proy-sin-scroll body {
	overflow: hidden;
}

.bc-proy-visor {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 64px;
	opacity: 0;
	transition: opacity .2s ease;
}

.bc-proy-visor--abierto {
	opacity: 1;
}

.bc-proy-visor__fondo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(1, 17, 110, .94);
	cursor: zoom-out;
}

.bc-proy-visor__marco {
	position: relative;
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	transform: scale(.97);
	transition: transform .25s ease;
}

.bc-proy-visor--abierto .bc-proy-visor__marco {
	transform: none;
}

.bc-proy-visor__img {
	max-width: 100%;
	max-height: 78vh;
	object-fit: contain;
	transition: opacity .18s ease;
}

/* Mientras la foto viaja: la anterior se atenua y aparece el giro de espera.
   Sin esto la anterior se queda igual de nitida y el visitante cree que la
   flecha no funciono. */
.bc-proy-visor--cargando .bc-proy-visor__img {
	opacity: .3;
}

.bc-proy-visor__espera {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 2px solid rgba(255, 255, 255, .28);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease;
}

.bc-proy-visor--cargando .bc-proy-visor__espera {
	opacity: 1;
	animation: bc-proy-girar .7s linear infinite;
}

@keyframes bc-proy-girar {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.bc-proy-visor--cargando .bc-proy-visor__espera {
		animation: none;
	}
}

.bc-proy-visor__pie {
	color: rgba(255, 255, 255, .7);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.bc-proy-visor__cerrar,
.bc-proy-visor__nav {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: rgba(255, 255, 255, .12);
	border: none;
	color: #fff;
	cursor: pointer;
	transition: background-color .18s ease;
}

.bc-proy-visor__cerrar:hover,
.bc-proy-visor__nav:hover {
	background: var(--bc-ocre);
	color: #17130a;
}

.bc-proy-visor__cerrar {
	top: 20px;
	right: 20px;
}

/* Aspa y flechas dibujadas: sin tipografia de iconos ni archivos. */
.bc-proy-visor__cerrar::before,
.bc-proy-visor__cerrar::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.bc-proy-visor__cerrar::before {
	transform: rotate(45deg);
}

.bc-proy-visor__cerrar::after {
	transform: rotate(-45deg);
}

.bc-proy-visor__nav::before {
	content: "";
	width: 12px;
	height: 12px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.bc-proy-visor__nav--prev {
	left: 20px;
}

.bc-proy-visor__nav--prev::before {
	transform: rotate(-135deg) translate(-3px, -3px);
}

.bc-proy-visor__nav--next {
	right: 20px;
}

.bc-proy-visor__nav--next::before {
	transform: rotate(45deg) translate(-3px, 3px);
}

.bc-proy-galeria__item {
	cursor: zoom-in;
}

/* Revelado al entrar en pantalla */

.bc-por-revelar {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}

.bc-por-revelar.bc-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.bc-por-revelar {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Acuse de recibo del boton de cotizacion */

.bc-proy-ficha .bc-proy-boton--esperando {
	opacity: .75;
	pointer-events: none;
}

.bc-proy-ficha .bc-proy-boton--esperando::after {
	content: "";
	width: 14px;
	height: 14px;
	margin-left: 12px;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: bc-proy-gira .7s linear infinite;
}

@keyframes bc-proy-gira {
	to { transform: rotate(360deg); }
}

/* Relacionados y vuelta al listado */

.bc-proy-relacionados {
	margin: 0 0 var(--bc-seccion);
}

.bc-proy-relacionados .bc-proy-grid {
	margin-top: 0;
}

/* La reticula de relacionados no vive en el cuerpo de dos columnas: ahi caben
   tres tarjetas desde 992 px, que es justo cuantas hay. */

/* ============ Compartir y copiar ============ */

.bc-proy-compartir {
	margin: 22px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--bc-linea);
}

.bc-proy-ficha .bc-proy-compartir__rotulo {
	margin: 0 0 10px;
	color: var(--bc-texto);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.bc-proy-compartir__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bc-proy-ficha .bc-proy-compartir__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--bc-linea);
	color: var(--bc-titulo);
	cursor: pointer;
	font-family: var(--bc-display);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease;
}

.bc-proy-ficha .bc-proy-compartir__btn:hover {
	border-color: var(--bc-tinta);
	color: var(--bc-tinta);
}

.bc-proy-compartir__icono svg {
	display: block;
	width: 17px;
	height: 17px;
}

.bc-proy-ficha .bc-proy-compartir__btn.bc-proy-copiado {
	border-color: var(--bc-ocre);
	color: var(--bc-ocre);
}

/* Boton de copiar de la ficha de contacto. */

.bc-proy-copiar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-left: auto;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	color: var(--bc-texto);
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

.bc-proy-copiar svg {
	width: 16px;
	height: 16px;
}

.bc-proy-copiar:hover {
	border-color: var(--bc-linea);
	color: var(--bc-tinta);
}

.bc-proy-copiar.bc-proy-copiado {
	border-color: var(--bc-ocre);
	color: var(--bc-ocre);
}

/* ============ Paso al proyecto anterior y siguiente ============ */

/*
 * Una ficha sin salida hacia adelante obliga a volver al listado en cada paso.
 * Aqui el registro se hojea: anterior, indice, siguiente.
 */

.bc-proy-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--bc-seccion);
	padding: 18px 0;
	border-top: 1px solid var(--bc-linea);
	border-bottom: 1px solid var(--bc-linea);
}

.bc-proy-ficha .bc-proy-nav__paso {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	color: var(--bc-titulo);
	text-decoration: none;
}

.bc-proy-nav__paso--next {
	grid-column: 3;
	justify-content: flex-end;
	text-align: right;
}

.bc-proy-nav__etq {
	display: block;
	color: var(--bc-texto);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.bc-proy-nav__nombre {
	display: block;
	font-family: var(--bc-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.bc-proy-ficha .bc-proy-nav__paso:hover .bc-proy-nav__nombre {
	color: var(--bc-tinta);
}

.bc-proy-nav__flecha {
	position: relative;
	flex: 0 0 auto;
	width: 28px;
	height: 10px;
}

.bc-proy-nav__flecha::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--bc-ocre);
	transition: width .22s ease;
}

.bc-proy-nav__flecha::after {
	content: "";
	position: absolute;
	top: 1px;
	width: 7px;
	height: 7px;
	border-top: 1px solid var(--bc-ocre);
	border-right: 1px solid var(--bc-ocre);
}

.bc-proy-nav__paso--prev .bc-proy-nav__flecha::after {
	left: 0;
	transform: rotate(-135deg);
}

.bc-proy-nav__paso--next .bc-proy-nav__flecha::after {
	right: 0;
	transform: rotate(45deg);
}

.bc-proy-ficha .bc-proy-nav__paso:hover .bc-proy-nav__flecha::before {
	width: 130%;
}

.bc-proy-nav__indice {
	grid-column: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--bc-linea);
}

.bc-proy-nav__indice:hover {
	border-color: var(--bc-tinta);
}

/* Rejilla de nueve puntos dibujada con dos sombras: sin iconos externos. */
.bc-proy-nav__rejilla {
	position: relative;
	width: 3px;
	height: 3px;
	background: var(--bc-tinta);
	box-shadow:
		-6px -6px 0 0 var(--bc-tinta), 0 -6px 0 0 var(--bc-tinta), 6px -6px 0 0 var(--bc-tinta),
		-6px 0 0 0 var(--bc-tinta), 6px 0 0 0 var(--bc-tinta),
		-6px 6px 0 0 var(--bc-tinta), 0 6px 0 0 var(--bc-tinta), 6px 6px 0 0 var(--bc-tinta);
}

/* ============ Adaptable ============ */

@media (min-width: 700px) {
	.bc-proy-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* La linea que une los pasos solo se dibuja cuando estan en fila: apilados
	   no hay secuencia horizontal que marcar. */
	.bc-proy-pasos:not([data-bc-pasos="1"])::before {
		content: "";
		position: absolute;
		top: 42px;
		left: 10%;
		right: 10%;
		height: 1px;
		background: var(--bc-linea);
	}

	.bc-proy-galeria__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/*
	 * Los pasos en fila, con su descripcion debajo de cada uno. El numero de
	 * columnas es el numero de pasos, no un auto-fit: con auto-fit, un proyecto
	 * de un solo paso dejaba dos tercios de la fila en blanco, y eso se lee como
	 * un bloque a medio hacer. Trece de los veintiun proyectos tienen un paso.
	 */
	.bc-proy-pasos {
		gap: 26px 24px;
	}

	.bc-proy-pasos[data-bc-pasos="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bc-proy-pasos[data-bc-pasos="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bc-proy-pasos[data-bc-pasos="4"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.bc-proy-pasos[data-bc-pasos="5"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bc-proy-pasos:not([data-bc-pasos="1"]) .bc-proy-paso {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"icono"
			"numero"
			"etiqueta"
			"texto";
		align-items: start;
		/*
		 * Sin esto las filas se reparten el alto sobrante y el paso cuyo texto es
		 * mas corto baja su icono y su rotulo unos pixeles: en una fila de tres,
		 * el tercero quedaba desalineado con los otros dos. El sobrante tiene que
		 * ir al pie, no repartirse.
		 */
		align-content: start;
		gap: 0;
	}

	/* Con un solo paso se queda el icono al lado del texto: ocupa el ancho
	   entero y no hay hueco que explicar. */
	.bc-proy-pasos[data-bc-pasos="1"] .bc-proy-paso__texto {
		max-width: 60ch;
	}

	.bc-proy-pasos:not([data-bc-pasos="1"]) .bc-proy-paso__n {
		margin-top: 12px;
	}

	.bc-proy-pasos:not([data-bc-pasos="1"]) .bc-proy-paso__etq {
		margin-top: 3px;
	}

	/*
	 * Banda de cifras con UNA sola cifra: el titulo a la izquierda y el numero a
	 * la derecha, en vez de dejar medio ancho vacio debajo del titulo. Con dos o
	 * mas cifras se queda como estaba, en fila bajo el titulo.
	 */
	.bc-proy-resumen--una {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 18px 40px;
	}

	.bc-proy-resumen--una .bc-proy-resumen__texto {
		flex: 1 1 320px;
	}

	.bc-proy-cierre {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
		gap: 56px;
		padding: 44px 40px 44px 30px;
	}
}

@media (min-width: 992px) {
	.bc-proy-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.bc-proy-cuerpo {
		grid-template-columns: 230px minmax(0, 1fr);
		gap: 36px;
	}

	.bc-proy-cuerpo .bc-proy-tiempo {
		position: sticky;
		top: var(--bc-fijo);
	}

	/* En este tramo el contenedor del tema ronda los 940 px: quitando la columna
	   de la izquierda quedan unos 670 para las fichas, y tres no entran sin
	   estrangularlas. */
	.bc-proy-resultados .bc-proy-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bc-proy-galeria__grid {
		grid-template-columns: repeat(4, 1fr);
	}


	.bc-proy-portada {
		padding: 30px 0 40px;
	}

	.bc-proy-portada__pie {
		gap: 24px 48px;
		padding-top: 30px;
	}

	.bc-proy-portada__datos {
		justify-content: flex-end;
		padding-bottom: 6px;
	}

	.bc-proy-columnas {
		grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
		gap: 52px;
	}

	/* El panel acompana la lectura, por debajo de la cabecera fija del tema. */
	.bc-proy-datos {
		position: sticky;
		top: var(--bc-fijo);
	}
}

@media (min-width: 1200px) {
	.bc-proy-cuerpo {
		grid-template-columns: 250px minmax(0, 1fr);
		gap: 44px;
	}

	.bc-proy-resultados .bc-proy-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 699px) {
	.bc-proy-visor {
		padding: 64px 16px;
	}

	.bc-proy-nav {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.bc-proy-nav__paso--next {
		grid-column: 1;
		justify-content: flex-start;
		text-align: left;
		flex-direction: row-reverse;
	}

	.bc-proy-nav__indice {
		display: none;
	}

	.bc-proy-visor__nav {
		top: auto;
		bottom: 16px;
	}

	.bc-proy-cierre {
		padding: 30px 20px 30px 16px;
	}

	.bc-proy-entrada {
		padding-left: 16px;
	}

	.bc-proy-control__fila {
		flex-direction: column;
		align-items: stretch;
	}

	.bc-proy-selectores {
		flex-direction: column;
	}

	.bc-proy-menu__boton {
		width: 100%;
	}

	.bc-proy-menu__lista {
		position: static;
		width: 100%;
		min-width: 0;
		border-top: none;
		box-shadow: none;
	}

	.bc-proy-portada__play-icono {
		width: 58px;
		height: 58px;
	}

	.bc-proy-portada__play-icono svg {
		width: 24px;
		height: 24px;
	}

	.bc-proy-portada__play-texto {
		font-size: 13px;
	}

	.bc-proy-portada {
		padding: 18px 0 26px;
		margin-bottom: 32px;
	}

	.bc-proy-portada__interior {
		width: min(100%, calc(52vh * (var(--bc-portada, 16 / 9))));
	}

	.bc-proy-portada__datos {
		gap: 12px 26px;
	}

	.bc-proy-cifras {
		gap: 26px;
		padding: 22px;
	}

	.bc-proy-cifra__n {
		font-size: 34px;
	}
}

/* ============ Lo que se oculta ============ */

/*
 * TODAS las reglas de ocultar viven aqui y al final del archivo a proposito.
 *
 * El atributo hidden del HTML solo aporta display:none desde la hoja del
 * navegador, asi que CUALQUIER regla de autor que fije display lo pisa. Paso ya
 * dos veces en esta seccion: el visor de galeria (que con display:flex cubrio la
 * ficha entera y se trago todos los clics) y el enlace de quitar el ano (que se
 * veia sin filtro puesto). Lo mismo con las clases --oculto/--fuera, que empataban
 * en especificidad con su regla base y perdian por ir antes.
 *
 * Al final del archivo, ganan los empates. Si manana se anade un elemento que
 * nazca oculto, su regla va aqui y no al lado de su bloque.
 */

.bc-proy [hidden],
.bc-proy-ficha [hidden],
.bc-proy-visor[hidden] {
	display: none;
}

/* Ficha fuera del filtro, o todavia fuera del lote mostrado: se retira de la
   reticula porque, con bordes compartidos, ocupando sitio abriria huecos. */
.bc-proy .bc-proy-tarjeta--fuera {
	display: none;
}

/* Ano sin ninguna ficha que pase el filtro: se va el grupo entero, encabezado
   incluido. Un titulo de ano presidiendo una reticula vacia se lee como error. */
.bc-proy .bc-proy-grupo--fuera {
	display: none;
}

.bc-proy .bc-proy-control__resultado--oculto {
	display: none;
}

.bc-proy .bc-proy-vacio--oculto {
	display: none;
}

/* Fotos de la galeria fuera del recorte inicial. Siguen en la pagina para que el
   visor las alcance con las flechas; solo dejan de ocupar sitio.

   OJO con el ancestro: las demas reglas de este bloque cuelgan de .bc-proy, que
   es el envoltorio del LISTADO. La ficha se llama .bc-proy-ficha, asi que con
   .bc-proy delante esta regla no llegaba a coincidir nunca y las fotos de mas se
   quedaban a la vista, con el aviso de "+2" encima de una fila que si se veia.
   Se cuelga de la reticula, que es la que existe en las dos pantallas. */
.bc-proy-galeria__grid .bc-proy-galeria__item--fuera {
	display: none;
}