/*
 * Logos de colaboradores: franja bajo el hero de las páginas de sede.
 *
 * Cada logo se ajusta a la misma caja (ancho y alto máximos) sin deformarse.
 * Las medidas salen de los ajustes del bloque; aquí solo están los valores de partida.
 */

.cel,
.cel * {
	box-sizing: border-box;
}

.cel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 32px 72px;
	background-color: #FFFFFF;
}

.cel .cel-texto {
	margin: 0;
	text-align: center;
	font-family: "RM Neue", sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #0F2145;
}

.cel .cel-fila {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--cel-gap, 64px);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cel .cel-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cel-ancho, 200px);
	max-width: 100%;
	height: var(--cel-alto, 64px);
	margin: 0;
	padding: 0;
}

/* El logo ocupa la caja sin deformarse: el apaisado llena el ancho y el alto llena el alto */
.cel .cel-logo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

/* En móvil, los logos se reparten a partes iguales en cada fila */
@media only screen and (max-width: 767px) {
	.cel .cel-logo {
		width: calc((100% - (var(--cel-columnas, 2) - 1) * var(--cel-gap, 16px)) / var(--cel-columnas, 2));
	}
}

/* Aviso que solo se ve en el editor mientras no hay logos */
.cel-aviso {
	padding: 24px;
	border: 1px dashed #0F2145;
	background: #EEF2FD;
	color: #0F2145;
	font-family: "RM Neue", sans-serif;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}