/* ==================================================================
 * Identidad del Centro de Investigaciones Agronomicas (CIA-UCR)
 *
 * Hoja propia del CIA, separada de las hojas originales de la
 * plantilla UCR3 para no alterar los archivos institucionales y
 * poder actualizarlos sin perder estos ajustes.
 *
 * Paleta del centro:
 *   verde claro   #00734B  ->  banda gruesa (barra superior)
 *   verde oscuro  #003521  ->  banda delgada (franja de menus)
 * ================================================================== */

/* ------------------------------------------------------------------
 * 1. Bandas de color
 * ---------------------------------------------------------------- */

/* Banda gruesa: sustituye el celeste institucional #41ADE7. */
#encabezado
{
	background: #00734B;
}

/* Banda delgada: sustituye el azul oscuro #204C6F.
   Se excluye #wpadminbar a proposito: la barra de administracion de
   WordPress comparte regla en comun.css y debe conservar su color. */
#centro-arriba,
#centro-arriba ul.menu
{
	background: #003521;
}

/* ------------------------------------------------------------------
 * 2. Firmas en blanco
 *
 * Los SVG "-reverso" que trae la plantilla no son totalmente blancos
 * (conservan decenas de trazos negros en el escudo), asi que se usan
 * los PNG blancos provistos por el centro.
 *
 * La plantilla dibuja la firma como imagen de fondo con
 * background-size:100% 100%, lo que deformaria el archivo al no
 * coincidir la proporcion. Se cambia a "contain" para que encaje
 * dentro del espacio reservado conservando sus proporciones.
 * ---------------------------------------------------------------- */

#encabezado .izquierda a,
#encabezado.desplazado .izquierda a,
#encabezado.no-escudo .izquierda a
{
	background-image: url(../imagenes/firma-ucr-blanco.png);
	background-size: contain;
	background-position: left center;
	background-repeat: no-repeat;
}

/* ------------------------------------------------------------------
 * 3. Logotipo del CIA, a la derecha de la banda gruesa
 *
 * La banda compacta mide 56 px con 4 px de relleno, es decir 48 px
 * utiles. El logo se deja en 44 px: el mayor tamano que entra limpio.
 * ---------------------------------------------------------------- */

#encabezado .derecha
{
	padding-right: 16px;
}

#encabezado .derecha .logo-unidad
{
	display: block;
	line-height: 0;
	background: none;
	border: none;
	text-decoration: none;
	padding: 2px 0;
}

#encabezado .derecha .logo-unidad img
{
	display: block;
	height: 44px;
	width: auto;
	max-width: 100%;
}

/* tableta: <= 1024 px, la barra pasa a alto fluido */
@media screen and (max-width: 1024px) {
	#encabezado .derecha                  { padding-right: 10px; }
	#encabezado .derecha .logo-unidad     { padding: 5px 0; }
	#encabezado .derecha .logo-unidad img { height: 40px; }
}

/* celular: <= 639 px */
@media screen and (max-width: 639px) {
	#encabezado .derecha                  { padding-right: 8px; }
	#encabezado .derecha .logo-unidad     { padding: 5px 0; }
	#encabezado .derecha .logo-unidad img { height: 28px; }
}

/* celular angosto: <= 392 px */
@media screen and (max-width: 392px) {
	#encabezado .derecha .logo-unidad     { padding: 4px 0; }
	#encabezado .derecha .logo-unidad img { height: 22px; }
}

/* ------------------------------------------------------------------
 * 4. Correccion del encabezado en celular (<= 639 px)
 *
 * cel-medium.css aplica margin-top:-50px a #marco-principal. En esa
 * franja el encabezado ya no es fijo (pasa a position:relative), asi
 * que ese margen no compensa nada: sube el contenido por encima de la
 * cabecera y recorta la firma de la UCR hasta dejar solo un borde.
 * ---------------------------------------------------------------- */
@media screen and (max-width: 639px) {
	#marco-principal,
	#marco-principal.portada,
	#marco-principal.ingles,
	#marco-principal.portada.desplazado,
	#marco-principal.desplazado,
	#marco-principal.ingles.desplazado
	{
		margin-top: 0;
	}

	#encabezado,
	#encabezado.desplazado
	{
		padding-bottom: 8px;
	}

	/* En esta franja la plantilla apila y centra los bloques. */
	#encabezado .derecha .logo-unidad
	{
		margin-left: auto;
		margin-right: auto;
	}
}

/* ------------------------------------------------------------------
 * 5. Correccion en pantallas angostas (<= 392 px)
 *
 * cel-medium.css fija min-width:392px en #marco-principal, lo que
 * obliga a desplazamiento horizontal en telefonos de 360 a 390 px.
 * ---------------------------------------------------------------- */
@media screen and (max-width: 392px) {
	#marco-principal,
	#marco-principal.portada,
	#marco-principal.ingles,
	#marco-principal.portada.desplazado,
	#marco-principal.desplazado,
	#marco-principal.ingles.desplazado
	{
		min-width: 0;
	}
}
/* ------------------------------------------------------------------
 * 6. Altura de la banda y tamano de la firma UCR
 *
 * La plantilla ancla tres medidas a los mismos 56 px de la banda
 * compacta: el alto del encabezado, el margen superior del contenido
 * y la posicion de la franja de menus. Cambiar una sola hace que el
 * contenido se solape con la cabecera, asi que se mueven las tres.
 *
 *   banda verde claro   56 -> 90 px  (relleno 4 px => 82 utiles)
 *   firma UCR           410x50 px, centrada en el alto de la banda
 *   logo CIA                 44 px, centrado con 19 px de relleno
 *
 * La firma se dibuja como imagen de fondo en una caja de 410x50 px.
 * Con background-size:contain el alto de la caja manda, asi que se
 * fija aqui de forma explicita en lugar de heredarlo.
 *
* El contenido se desplaza 118 px: los 90 de la banda verde mas los 28
 * de la franja de menus, que tambien es fija. El tema original solo
 * contaba la cabecera, y al poner el menu en la franja el titulo de
 * cada pagina quedaba tapado.
 *
 * Se limita a >= 640 px porque por debajo el encabezado deja de ser
 * fijo y usa el bloque apilado corregido mas arriba.
 * ---------------------------------------------------------------- */
@media screen and (min-width: 640px) {

	#encabezado.desplazado
	{
		height: 90px;
	}

	#marco-principal.desplazado,
	#marco-principal.ingles.desplazado
	{
		margin-top: 136px;
	}

	#marco-principal.portada.desplazado
	{
		margin-top: 207px;
	}

	#centro-arriba.desplazado,
	body.desplazado #wpadminbar
	{
		top: 90px !important;
	}

	/* La caja de la firma es absoluta y no llevaba "top", asi que se
	   apoyaba en el borde de arriba de una banda de 90 px: 7 px de aire
	   arriba y 33 abajo, 26 px descentrada.

	   Se corrige bajando la caja, no agrandandola. El PNG de la firma
	   (425x160) lleva margen transparente alrededor del dibujo, de modo
	   que al estirar la caja a los 90 px de la banda la firma crecia de
	   golpe y se salia por abajo. Manteniendo los 64 px el tamano es el
	   mismo de siempre y solo cambia la posicion:

	El 13 no sale de centrar la caja, sino el dibujo. El PNG lleva
	   margen transparente y no es simetrico: con la caja centrada a
	   13 px la firma quedaba con 17 px de aire arriba y 9 abajo,
	   rozando el borde de la banda. Restando esos 4 px de diferencia
	   la tinta queda a 13 px por arriba y por abajo. */
	#encabezado.desplazado .izquierda a
	{
		top: 9px;
		height: 64px;
	}

	#encabezado .derecha .logo-unidad
	{
		padding: 19px 0;
	}
}

/* ==================================================================
 * 7. Portada
 *
 * Reproduce la pagina principal del Drupal: carrusel a todo lo ancho
 * y debajo la seccion de avisos, con el mas reciente destacado a la
 * izquierda y los tres siguientes en tarjetas a la derecha.
 * ================================================================== */

.cia-carrusel
{
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #003521;
}

.cia-carrusel-pista
{
	position: relative;
	width: 100%;
	height: 440px;
}

.cia-slide
{
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity .6s ease;
}

.cia-slide.activa
{
	opacity: 1;
}

.cia-slide-texto
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 32px;
	background: linear-gradient(transparent, rgba(0, 53, 33, .85));
	color: #fff;
}

.cia-slide-texto p
{
	margin: 0 0 12px;
	font-size: 1.45em;
	line-height: 1.3;
	max-width: 44em;
}

.cia-boton
{
	display: inline-block;
	padding: 8px 18px;
	background: #00734B;
	color: #fff;
	border-radius: 3px;
	text-decoration: none;
}

.cia-boton:hover,
.cia-boton:focus
{
	background: #003521;
	color: #fff;
}

.cia-carrusel-nav
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: rgba(0, 53, 33, .45);
	color: #fff;
	font-size: 2em;
	line-height: 1;
	padding: 6px 14px;
	cursor: pointer;
}

.cia-carrusel-nav:hover { background: rgba(0, 53, 33, .8); }
.cia-carrusel-nav.anterior  { left: 0; }
.cia-carrusel-nav.siguiente { right: 0; }

.cia-carrusel-puntos
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	text-align: center;
}

.cia-carrusel-puntos button
{
	width: 26px;
	height: 4px;
	margin: 0 4px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
}

.cia-carrusel-puntos button.activo { background: #fff; }

/* --- Portada en pantallas pequenas --- */
@media screen and (max-width: 782px) {
	.cia-carrusel-pista { height: 260px; }
	.cia-slide-texto    { padding: 14px 16px; }
	.cia-slide-texto p  { font-size: 1.05em; }
}

/* ==================================================================
 * 8. Menu principal en la franja verde oscura
 *
 * El tema UCR3 dibuja el menu en una barra lateral. El sitio anterior
 * lo tenia en horizontal bajo la cabecera, que es la disposicion que
 * usa la UCR, asi que se recoloca ahi con sus desplegables.
 * ================================================================== */

#centro-arriba ul.cia-menu-principal
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

#centro-arriba ul.cia-menu-principal > li
{
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

#centro-arriba ul.cia-menu-principal > li > a
{
	display: block;
	padding: 7px 14px;
	color: #fff;
	font-size: .82em;
	font-weight: bold;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
}

#centro-arriba ul.cia-menu-principal > li > a:hover,
#centro-arriba ul.cia-menu-principal > li > a:focus,
#centro-arriba ul.cia-menu-principal > li.current-menu-item > a,
#centro-arriba ul.cia-menu-principal > li.current-menu-ancestor > a
{
	background: #00734B;
	color: #fff;
}

/* --- Submenus --- */

#centro-arriba ul.cia-menu-principal ul
{
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	display: none;
	min-width: 250px;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #003521;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}

#centro-arriba ul.cia-menu-principal li:hover > ul,
#centro-arriba ul.cia-menu-principal li:focus-within > ul
{
	display: block;
}

#centro-arriba ul.cia-menu-principal ul li
{
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	text-align: left;
}

#centro-arriba ul.cia-menu-principal ul li a
{
	display: block;
	padding: 8px 16px;
	color: #fff;
	font-size: .85em;
	text-decoration: none;
	line-height: 1.3;
}

#centro-arriba ul.cia-menu-principal ul li a:hover,
#centro-arriba ul.cia-menu-principal ul li a:focus
{
	background: #00734B;
}

/* --- Menu en pantallas pequenas: se apila --- */
@media screen and (max-width: 1024px) {
	#centro-arriba ul.cia-menu-principal > li > a { padding: 6px 10px; font-size: .78em; }
	#centro-arriba ul.cia-menu-principal ul       { position: static; display: block; box-shadow: none; min-width: 0; background: transparent; }
	#centro-arriba ul.cia-menu-principal ul li a  { padding: 5px 22px; font-size: .8em; opacity: .9; }
}

/* Tercer nivel del menu: el menu de Drupal llega a tres niveles
   (por ejemplo QUIENES SOMOS > Personal > cada area). Se despliega
   al costado del segundo. */
#centro-arriba ul.cia-menu-principal ul ul
{
	top: 0;
	left: 100%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}

#centro-arriba ul.cia-menu-principal ul li
{
	position: relative;
}

/* Marca los elementos que tienen submenu. */
#centro-arriba ul.cia-menu-principal ul li.menu-item-has-children > a::after
{
	content: "\203A";
	float: right;
	opacity: .7;
}

@media screen and (max-width: 1024px) {
	#centro-arriba ul.cia-menu-principal ul ul      { left: 0; }
	#centro-arriba ul.cia-menu-principal ul ul li a { padding-left: 34px; }
	#centro-arriba ul.cia-menu-principal ul li.menu-item-has-children > a::after { content: ""; }
}

/* ==================================================================
 * 10. Pie de pagina
 *
 * El tema maqueta el pie con display:table y pone las listas de la
 * derecha en linea separadas por barras. Para un pie con direccion,
 * horario y varias listas de enlaces eso no sirve, asi que se sustituye
 * por una rejilla flexible de cuatro columnas: marca, contacto y los
 * dos grupos de enlaces.
 *
 * El color tambien se fuerza: #pie-pagina solo declara color:white,
 * que las reglas de parrafo y enlace del tema pisan, y el texto salia
 * gris oscuro sobre verde oscuro, ilegible.
 *
 * El filete superior recoge los cinco colores de las areas de
 * investigacion, los mismos de las insignias del carrusel y de la
 * pagina de precios.
 * ================================================================== */

#pie-pagina
{
	display: block;
	font-size: 14px;
	background: #003521;
	background-image: linear-gradient(#00452b, #002d1c);
	color: #fff;
	padding: 0;
	margin-top: 44px;
	border-top: 4px solid transparent;
	border-image: linear-gradient(
		to right,
		#4a9b35 0 20%,
		#7a5c1e 20% 40%,
		#b5362a 40% 60%,
		#1c4f8c 60% 80%,
		#e0a020 80% 100%
	) 1;
}

#pie-pagina .contenido-interno
{
	display: block;
	padding-top: 40px;
	padding-bottom: 0;
}

#pie-pagina .cia-pie-rejilla
{
	display: flex;
	flex-wrap: wrap;
	gap: 34px 48px;
	align-items: flex-start;
}

#pie-pagina .cia-pie-marca
{
	flex: 1 1 230px;
	max-width: 330px;
}

#pie-pagina .izquierda
{
	display: block;
	flex: 1 1 250px;
	max-width: 330px;
	float: none;
	white-space: normal;
	vertical-align: top;
	position: static;
}

/* La rejilla va dentro del widget, no en la zona: la zona tiene un
   unico hijo -- el <div class="widget"> -- y los dos grupos van
   dentro de el, de modo que una rejilla aqui no los separaria. */
#pie-pagina .derecha
{
	flex: 2 1 400px;
	float: none;
	white-space: normal;
	vertical-align: top;
	position: static;
}

#pie-pagina .derecha
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
	gap: 26px 40px;
	align-items: start;
}

#pie-pagina .derecha .widget,
#pie-pagina .derecha .textwidget
{
	display: contents;
}

#pie-pagina .derecha .widget::before,
#pie-pagina .derecha .widget::after,
#pie-pagina .derecha .textwidget::before,
#pie-pagina .derecha .textwidget::after
{
	display: none;
}

/* Color: se aplica a los elementos concretos porque heredar no basta. */
#pie-pagina,
#pie-pagina p,
#pie-pagina li,
#pie-pagina span,
#pie-pagina strong,
#pie-pagina div,
#pie-pagina h2,
#pie-pagina h3
{
	color: #fff;
}

#pie-pagina p,
#pie-pagina li
{
	font-size: .88em;
	line-height: 1.6;
}

#pie-pagina p
{
	margin: 0 0 10px;
}

/* Enlaces sin subrayado permanente: eran catorce seguidos y el pie
   parecia una lista de resultados de busqueda. */
#pie-pagina a,
#pie-pagina .derecha li a
{
	color: #e9f3ee;
	font-size: inherit;
	text-decoration: none;
	white-space: normal;
	transition: color .15s ease;
}

#pie-pagina a:hover,
#pie-pagina a:focus,
#pie-pagina .derecha li a:hover,
#pie-pagina .derecha li a:focus
{
	color: #9fe0bf;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#pie-pagina .widget-title
{
	margin: 0 0 14px;
	padding: 0 0 8px;
	font-size: .8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: #8fd3b4;
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

#pie-pagina .widget
{
	margin: 0;
}

/* --- Columna de marca --- */

#pie-pagina .cia-pie-logo
{
	display: block;
	margin: 0 0 16px;
}

#pie-pagina .cia-pie-logo img
{
	display: block;
	width: 205px;
	max-width: 100%;
	height: auto;
}

#pie-pagina .cia-pie-lema
{
	margin: 0 0 18px;
	font-size: .84em;
	line-height: 1.65;
	color: rgba(255, 255, 255, .78);
}

/* --- Datos de contacto, con iconos --- */

#pie-pagina ul.cia-pie-contacto
{
	display: block;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

#pie-pagina ul.cia-pie-contacto li
{
	display: block;
	position: relative;
	margin: 0 0 12px;
	padding: 0 0 0 26px;
	border: 0;
	line-height: 1.55;
}

#pie-pagina ul.cia-pie-contacto li::before
{
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	opacity: .85;
}

#pie-pagina .cia-c-sitio::before
{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fd3b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

#pie-pagina .cia-c-hora::before
{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fd3b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}

#pie-pagina .cia-c-tel::before
{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fd3b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.9v2.6a1.6 1.6 0 0 1-1.8 1.6 16 16 0 0 1-6.9-2.5 15.6 15.6 0 0 1-4.8-4.8A16 16 0 0 1 5 6.8 1.6 1.6 0 0 1 6.6 5h2.6a1.6 1.6 0 0 1 1.6 1.4c.1.8.3 1.5.6 2.2a1.6 1.6 0 0 1-.4 1.7l-1.1 1.1a13 13 0 0 0 4.8 4.8l1.1-1.1a1.6 1.6 0 0 1 1.7-.4c.7.3 1.4.5 2.2.6a1.6 1.6 0 0 1 1.4 1.6z'/%3E%3C/svg%3E");
}

#pie-pagina .cia-c-correo::before
{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fd3b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6 8.5-6'/%3E%3C/svg%3E");
}

#pie-pagina ul.cia-pie-contacto .cia-c-rotulo
{
	display: block;
	font-size: .84em;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .55);
}

#pie-pagina ul.cia-pie-contacto .cia-c-detalle
{
	display: block;
	color: rgba(255, 255, 255, .72);
}

/* Enlace de accion: el unico del pie con aspecto de boton, porque lleva
   al mapa y al directorio, que es lo que mas se busca aqui. */
#pie-pagina .cia-pie-accion
{
	margin: 0;
}

#pie-pagina .cia-pie-accion a
{
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 3px;
	font-size: .84em;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
}

#pie-pagina .cia-pie-accion a:hover,
#pie-pagina .cia-pie-accion a:focus
{
	background: rgba(255, 255, 255, .1);
	border-color: #8fd3b4;
	color: #fff;
	text-decoration: none;
}

/* --- Listas de enlaces --- */

#pie-pagina .cia-pie-grupo
{
	min-width: 0;
}

#pie-pagina .derecha ul.cia-pie-enlaces,
#pie-pagina ul.cia-pie-enlaces
{
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

#pie-pagina .derecha ul.cia-pie-enlaces li,
#pie-pagina ul.cia-pie-enlaces li
{
	display: block;
	margin: 0 0 7px;
	padding: 0;
	border: 0;
}

/* --- Redes sociales --- */

#pie-pagina .derecha ul.cia-redes,
#pie-pagina ul.cia-redes
{
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#pie-pagina .derecha ul.cia-redes li,
#pie-pagina ul.cia-redes li
{
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

#pie-pagina ul.cia-redes a
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

#pie-pagina ul.cia-redes a:hover,
#pie-pagina ul.cia-redes a:focus
{
	background: rgba(255, 255, 255, .14);
	border-color: #8fd3b4;
	text-decoration: none;
}

#pie-pagina ul.cia-redes svg
{
	display: block;
	width: 19px;
	height: 19px;
	fill: currentColor;
}

/* --- Franja de cierre --- */

#pie-pagina .cia-pie-legal
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: 36px;
	padding: 18px 0 22px;
	border-top: 1px solid rgba(255, 255, 255, .15);
}

#pie-pagina .cia-pie-firma img
{
	display: block;
	width: 148px;
	max-width: 100%;
	height: auto;
}

#pie-pagina .cia-pie-legal p
{
	flex: 1 1 320px;
	margin: 0;
	font-size: .8em;
	line-height: 1.6;
	color: rgba(255, 255, 255, .62);
}

#pie-pagina .cia-pie-legal p span
{
	display: block;
	color: rgba(255, 255, 255, .62);
}

#pie-pagina .cia-pie-arriba
{
	margin-left: auto;
	padding: 7px 14px 7px 26px;
	position: relative;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 3px;
	font-size: .78em;
	text-transform: uppercase;
	letter-spacing: .07em;
	white-space: nowrap;
}

#pie-pagina .cia-pie-arriba::before
{
	content: "";
	position: absolute;
	left: 11px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -2px;
	border-left: 2px solid #8fd3b4;
	border-top: 2px solid #8fd3b4;
	transform: rotate(45deg);
}

#pie-pagina .cia-pie-arriba:hover,
#pie-pagina .cia-pie-arriba:focus
{
	background: rgba(255, 255, 255, .1);
	border-color: #8fd3b4;
	text-decoration: none;
}

@media screen and (max-width: 860px) {
	#pie-pagina .cia-pie-marca,
	#pie-pagina .izquierda      { max-width: none; }
	#pie-pagina .cia-pie-rejilla { gap: 28px 36px; }
}

@media screen and (max-width: 640px) {
	#pie-pagina                    { margin-top: 30px; }
	#pie-pagina .contenido-interno { padding-top: 26px; }
	#pie-pagina .cia-pie-rejilla   { gap: 26px; }
	#pie-pagina .cia-pie-logo img  { width: 175px; }
	#pie-pagina .cia-pie-legal     { margin-top: 24px; gap: 14px; }
	#pie-pagina .cia-pie-arriba    { margin-left: 0; }

	/* Se deshace la barra gris de menu de la plantilla. */
	#pie-pagina .derecha
	{
		position: static;
		bottom: auto;
		left: auto;
		width: auto;
		height: auto;
		background: none;
		padding-top: 0;
		grid-template-columns: 1fr;
		gap: 24px;
	}

	#pie-pagina .izquierda
	{
		text-align: left;
		font-size: inherit;
		padding-top: 0;
	}

	#pie-pagina .derecha ul.cia-pie-enlaces
	{
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
	}

	#pie-pagina .derecha ul.cia-pie-enlaces li
	{
		height: auto;
		line-height: 1.6;
		border-right: 0;
	}
}

/* ==================================================================
 * 12. Selector de idioma y buscador en la franja de menus
 * ================================================================== */

#centro-arriba #menus-principales .contenido-interno
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

#centro-arriba ul.cia-menu-principal
{
	flex: 1 1 auto;
}

.cia-herramientas
{
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

.cia-idiomas
{
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cia-idiomas li
{
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

.cia-idiomas a
{
	display: block;
	padding: 3px 7px;
	color: #fff;
	font-size: .78em;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2px;
}

.cia-idiomas .current-lang a,
.cia-idiomas a:hover,
.cia-idiomas a:focus
{
	background: #00734B;
}

.cia-buscador
{
	display: flex;
	align-items: center;
}

.cia-buscador input[type="search"]
{
	width: 150px;
	height: 26px;
	padding: 0 8px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-right: 0;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: .82em;
}

.cia-buscador input[type="search"]::placeholder
{
	color: rgba(255, 255, 255, .6);
}

.cia-buscador button
{
	height: 26px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, .35);
	background: #00734B;
	color: #fff;
	font-size: .95em;
	cursor: pointer;
	line-height: 1;
}

.cia-buscador button:hover,
.cia-buscador button:focus
{
	background: #fff;
	color: #003521;
}

/* Las herramientas solo bajan de linea por debajo de 640 px.
 *
 * Antes lo hacian por debajo de 1024, y eso chocaba con la seccion 13,
 * que fija la franja en 46 px de alto porque el margen del contenido
 * (136 px) se calcula sumando banda y franja. Resultado: entre 640 y
 * 1024 px el selector de idioma y el buscador se salian de la franja y
 * quedaban flotando sobre el carrusel, con el buscador practicamente
 * invisible sobre la foto.
 *
 * Tampoco hacia falta bajarlos: a 1000 px el menu ocupa unos 435 px y
 * las herramientas unos 180, de modo que caben de sobra en una linea.
 * Lo que los bajaba era la propia regla -- el width:100% --, no la
 * falta de sitio. */
@media screen and (max-width: 639px) {
	#centro-arriba #menus-principales .contenido-interno { flex-wrap: wrap; }
	.cia-herramientas                                    { width: 100%; justify-content: flex-end; padding: 4px 0 6px; }
	.cia-buscador input[type="search"]                   { width: 120px; }
}

/* ==================================================================
 * 13. Altura fija de la franja de menus
 *
 * El contenido se desplaza con un margen fijo porque la cabecera y la
 * franja son ambas position:fixed. Si el menu salta de linea la franja
 * crece y el margen deja de cuadrar, asi que se fija su altura y se
 * impide que los enlaces se partan.
 *
 *   banda verde claro  90 px
 *   franja de menus    46 px
 *   margen del contenido = 136 px
 * ================================================================== */

@media screen and (min-width: 640px) {

	#centro-arriba,
	#centro-arriba.desplazado
	{
		height: 46px;
		min-height: 46px;
	}

	#centro-arriba #menus-principales,
	#centro-arriba #menus-principales .contenido-interno
	{
		height: 46px;
	}

	#centro-arriba ul.cia-menu-principal > li > a
	{
		white-space: nowrap;
		padding: 6px 11px;
	}
}

/* Si la pantalla es justa, se reduce el texto antes que partirlo. */
@media screen and (min-width: 640px) and (max-width: 1250px) {
	#centro-arriba ul.cia-menu-principal > li > a { font-size: .74em; padding: 6px 8px; }
	.cia-buscador input[type="search"]          { width: 110px; }
}

/* ==================================================================
 * 14. Menu en celular
 *
 * La plantilla UCR3 oculta la franja de menus por debajo de 639 px y
 * tambien su propio boton desplegable, asi que el sitio se quedaba
 * sin navegacion en telefonos. Aqui se muestra un boton y el menu se
 * despliega en vertical.
 * ================================================================== */

.cia-menu-boton
{
	display: none;
}

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

	/* La franja vuelve a mostrarse, esta vez en el flujo. */
	#centro-arriba,
	#centro-arriba.desplazado
	{
		display: block;
		position: relative;
		top: 0;
		height: auto;
		min-height: 0;
		background: #003521;
		border-bottom: 0;
		padding: 0;
	}

	.cia-menu-boton
	{
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 10px 14px;
		border: 0;
		background: #003521;
		color: #fff;
		font-size: .9em;
		font-weight: bold;
		text-transform: uppercase;
		cursor: pointer;
	}

	.cia-menu-icono,
	.cia-menu-icono::before,
	.cia-menu-icono::after
	{
		display: block;
		width: 22px;
		height: 2px;
		background: #fff;
	}

	.cia-menu-icono
	{
		position: relative;
	}

	.cia-menu-icono::before,
	.cia-menu-icono::after
	{
		content: "";
		position: absolute;
		left: 0;
	}

	.cia-menu-icono::before { top: -7px; }
	.cia-menu-icono::after  { top:  7px; }

	/* Se oculta el menu, no el contenedor: el boton vive dentro de
	   #menus-principales, asi que ocultar ese bloque escondia tambien
	   el boton que debe abrirlo. */
	#centro-arriba #menus-principales
	{
		display: block;
		height: auto;
	}

	#centro-arriba ul.cia-menu-principal,
	#centro-arriba .cia-herramientas
	{
		display: none;
	}

	#centro-arriba.cia-abierto .cia-menu-principal
	{
		display: block;
	}

	#centro-arriba.cia-abierto .cia-herramientas
	{
		display: flex;
	}

	#centro-arriba #menus-principales .contenido-interno
	{
		display: block;
		height: auto;
		padding-bottom: 10px;
	}

	/* El apilado vertical lo hace la regla de .cia-abierto de mas
	   arriba; aqui solo el aspecto de cada enlace. */
	#centro-arriba ul.cia-menu-principal > li > a
	{
		padding: 9px 14px;
		border-top: 1px solid rgba(255, 255, 255, .12);
		white-space: normal;
	}

	.cia-herramientas
	{
		width: 100%;
		justify-content: flex-start;
		padding: 10px 14px 4px;
	}
}

/* ==================================================================
 * 15. Avisos de la portada
 *
 * Tarjetas en rejilla: el aviso mas reciente ocupa el ancho completo
 * con la imagen a un lado, y los tres siguientes van debajo en tres
 * columnas. Sustituye al bloque de recuadros grises heredado del
 * Drupal, que ademas repetia el titulo de cada aviso dos veces.
 * ================================================================== */

.cia-avisos
{
	margin: 34px 0 10px;
}

.cia-seccion-cabecera
{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 3px solid #00734B;
}

.cia-seccion-cabecera h2
{
	margin: 0;
	color: #003521;
	font-size: 1.55em;
	letter-spacing: -.01em;
}

.cia-seccion-mas
{
	color: #00734B;
	font-size: .9em;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
}

.cia-seccion-mas:hover,
.cia-seccion-mas:focus
{
	color: #003521;
	text-decoration: underline;
}

.cia-avisos-rejilla
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* --- Tarjeta --- */

.cia-tarjeta
{
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.cia-tarjeta:hover,
.cia-tarjeta:focus-within
{
	border-color: #00734B;
	box-shadow: 0 6px 18px rgba(0, 53, 33, .14);
	transform: translateY(-2px);
}

.cia-tarjeta-enlace
{
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.cia-tarjeta-imagen
{
	position: relative;
	overflow: hidden;
	background: #eef2ef;
	aspect-ratio: 16 / 10;
}

.cia-tarjeta-imagen img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.cia-tarjeta:hover .cia-tarjeta-imagen img
{
	transform: scale(1.04);
}

.cia-tarjeta-sinimagen
{
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #00734B, #003521);
}

.cia-tarjeta-cuerpo
{
	padding: 16px 18px 20px;
}

.cia-tarjeta-fecha
{
	display: block;
	margin-bottom: 6px;
	color: #00734B;
	font-size: .76em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.cia-tarjeta-titulo
{
	margin: 0 0 8px;
	color: #1d2a22;
	font-size: 1.02em;
	font-weight: bold;
	line-height: 1.32;
}

.cia-tarjeta:hover .cia-tarjeta-titulo,
.cia-tarjeta:focus-within .cia-tarjeta-titulo
{
	color: #00734B;
}

.cia-tarjeta-resumen
{
	margin: 0;
	color: #555;
	font-size: .88em;
	line-height: 1.5;
}

/* --- Tarjeta destacada: ocupa las tres columnas, imagen al lado --- */

.cia-tarjeta--grande
{
	grid-column: 1 / -1;
}

.cia-tarjeta--grande .cia-tarjeta-enlace
{
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: stretch;
}

.cia-tarjeta--grande .cia-tarjeta-imagen
{
	aspect-ratio: auto;
	min-height: 290px;
}

.cia-tarjeta--grande .cia-tarjeta-cuerpo
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px 32px;
}

.cia-tarjeta--grande .cia-tarjeta-titulo
{
	font-size: 1.5em;
	line-height: 1.24;
	margin-bottom: 12px;
}

.cia-tarjeta--grande .cia-tarjeta-resumen
{
	font-size: .95em;
}

.cia-tarjeta-mas
{
	display: inline-block;
	margin-top: 16px;
	color: #00734B;
	font-size: .88em;
	font-weight: bold;
}

.cia-tarjeta-mas::after
{
	content: " →";
}

/* --- Adaptacion a pantallas menores --- */

@media screen and (max-width: 1024px) {
	.cia-avisos-rejilla { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media screen and (max-width: 782px) {
	.cia-tarjeta--grande .cia-tarjeta-enlace { grid-template-columns: 1fr; }
	.cia-tarjeta--grande .cia-tarjeta-imagen { min-height: 0; aspect-ratio: 16 / 9; }
	.cia-tarjeta--grande .cia-tarjeta-cuerpo { padding: 18px 20px 22px; }
	.cia-tarjeta--grande .cia-tarjeta-titulo { font-size: 1.25em; }
}

@media screen and (max-width: 560px) {
	.cia-avisos-rejilla       { grid-template-columns: 1fr; }
	.cia-seccion-cabecera h2  { font-size: 1.3em; }
}

/* ==================================================================
 * 16. Correcciones de maquetacion en celular (<= 639 px)
 *
 * La plantilla UCR3 esta pensada para escritorio: deja anchos minimos
 * de 392 px en varios contenedores y mantiene la franja de menus
 * fuera del flujo. En un telefono eso produce desbordamiento
 * horizontal (el contenido se corta por la derecha) y la franja se
 * superpone al contenido.
 * ================================================================== */

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

	/* Nada puede ser mas ancho que la pantalla. */
	html,
	body
	{
		max-width: 100%;
		overflow-x: hidden;
	}

	#marco-principal,
	#marco-principal.portada,
	#marco-principal.ingles,
	#marco-principal.desplazado,
	#marco-principal.portada.desplazado,
	#marco-principal.ingles.desplazado,
	.contenido-interno,
	#encabezado .contenido-interno,
	#contenidos
	{
		min-width: 0;
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	/* El tema declara div.columna-principal como display:table-cell.
	   Una celda de tabla se estira al contenido e ignora max-width,
	   de modo que un titulo largo desbordaba la pantalla. */
	div.columna-principal,
	#columna-principal
	{
		display: block;
		width: auto;
		max-width: 100%;
		float: none;
		box-sizing: border-box;
	}

	#contenidos
	{
		display: block;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* La franja de menus vuelve al flujo, encima del contenido. */
	#centro-arriba,
	#centro-arriba.desplazado
	{
		position: static;
		top: auto;
		z-index: auto;
	}

	/* Imagenes y tablas nunca desbordan. */
	.columna-principal img,
	#pie-pagina img
	{
		max-width: 100%;
		height: auto;
	}

	.columna-principal table
	{
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	/* Titulos largos parten palabra antes que desbordar. */
	.cia-tarjeta-titulo,
	.cia-persona-nombre,
	.page-title
	{
		overflow-wrap: break-word;
	}
}

/* ==================================================================
 * 17. Ancho de los elementos del menu
 *
 * El tema reparte los enlaces con width:14% y overflow:hidden, pensado
 * para siete elementos de texto corto. Con los nombres reales del CIA
 * eso cortaba "PROYECTOS Y DOCENCIA" a media palabra.
 * ================================================================== */

#centro-arriba ul.cia-menu-principal > li
{
	width: auto;
	overflow: visible;
}

#centro-arriba ul.cia-menu-principal ul li
{
	width: 100%;
	overflow: visible;
}

/* ==================================================================
 * 18. Tipografia del contenido
 *
 * La plantilla UCR3 pinta los titulos en naranja (#FDB727), que es el
 * color de acento de la UCR pero choca con la paleta del centro. Se
 * pasa a los verdes del CIA y se limita el ancho de lectura: a todo
 * lo ancho de la pantalla las lineas resultaban larguisimas.
 * ================================================================== */

div.columna-principal h1,
div.columna-principal h1 a,
div.columna-principal .entry-title,
div.columna-principal .entry-title a
{
	color: #003521;
	font-family: inherit;
}

div.columna-principal h1 a:hover,
div.columna-principal .entry-title a:hover
{
	color: #00734B;
}

div.columna-principal h2,
div.columna-principal h3,
div.columna-principal h4
{
	color: #00563a;
}

div.columna-principal .entry-content a,
div.columna-principal .entry-summary a
{
	color: #00734B;
}

div.columna-principal .entry-content a:hover,
div.columna-principal .entry-summary a:hover
{
	color: #003521;
}

/* El boton lleva su propio color. La regla de enlaces de arriba se
   lo pisaba y en el texto de una pagina salia verde sobre verde,
   ilegible: el boton se veia como un rectangulo vacio. */
div.columna-principal .entry-content a.cia-boton,
div.columna-principal .entry-summary a.cia-boton,
div.columna-principal .entry-content a.cia-boton:hover,
div.columna-principal .entry-content a.cia-boton:focus
{
	color: #fff;
}

/* Ancho de lectura comodo: se limita el texto corrido, no el contenedor,
   para que las rejillas y las figuras puedan usar todo el ancho. Antes
   se limitaba .entry-content entero y las paginas institucionales
   quedaban encajonadas en media pantalla. */
.single .entry-content > p,
.single .entry-summary > p,
.page .entry-content > p,
.single .entry-content > ul,
.single .entry-content > ol,
.page .entry-content > ul,
.page .entry-content > ol,
.cia-entradilla,
.cia-cita
{
	max-width: 56em;
}

.single .entry-content p,
.page .entry-content p
{
	line-height: 1.62;
}

/* Imagenes del contenido: nunca desbordan y respiran. */
div.columna-principal .entry-content img,
div.columna-principal .entry-summary img
{
	max-width: 100%;
	height: auto;
}

div.columna-principal .entry-content figure,
div.columna-principal .entry-content .wp-caption
{
	max-width: 100%;
	margin: 18px 0;
}

/* Listas de descargas migradas desde los paragraphs de Drupal. */
.lista-cia
{
	margin: 14px 0 22px;
	padding: 0;
	list-style: none;
}

.lista-cia li
{
	padding: 9px 0 9px 24px;
	border-bottom: 1px solid #e8e8e8;
	position: relative;
}

.lista-cia li::before
{
	content: "↓";
	position: absolute;
	left: 0;
	top: 9px;
	color: #00734B;
	font-weight: bold;
}

.lista-cia li a
{
	color: #00563a;
	font-weight: bold;
	text-decoration: none;
}

.lista-cia li a:hover,
.lista-cia li a:focus
{
	color: #00734B;
	text-decoration: underline;
}

.descarga-info
{
	display: block;
	color: #666;
	font-size: .88em;
	font-weight: normal;
	margin-top: 2px;
}

/* Fecha del aviso, bajo el titular. */
.cia-entrada-fecha
{
	margin: 4px 0 18px;
	color: #00734B;
	font-size: .82em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* ==================================================================
 * 19. Paginas institucionales
 *
 * Bloques reutilizables para las paginas de contenido: entradilla,
 * cifras clave, cita destacada, rejilla de areas y fichas de datos.
 * Se usan primero en "Sobre el CIA" y sirven para el resto.
 * ================================================================== */

/* --- Entradilla --- */

.cia-entradilla
{
	font-size: 1.12em;
	line-height: 1.62;
	color: #2c3a33;
	border-left: 4px solid #00734B;
	padding-left: 18px;
	margin: 0 0 30px;
}

/* --- Cifras clave --- */

.cia-datos-clave
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: #dfe6e2;
	border: 1px solid #dfe6e2;
	margin: 0 0 34px;
}

.cia-datos-clave > div
{
	background: #f6f9f7;
	padding: 18px 16px;
	text-align: center;
}

.cia-datos-clave strong
{
	display: block;
	font-size: 1.9em;
	line-height: 1.1;
	color: #00734B;
}

.cia-datos-clave span
{
	display: block;
	margin-top: 4px;
	font-size: .82em;
	color: #5a6b62;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* --- Cita destacada --- */

.cia-cita
{
	margin: 0 0 22px;
	padding: 20px 24px;
	background: #f2f7f4;
	border-left: 4px solid #00734B;
}

.cia-cita p
{
	margin: 0;
	font-size: 1.05em;
	line-height: 1.6;
	font-style: italic;
	color: #23372e;
}

/* --- Rejilla de areas --- */

.cia-areas-rejilla
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0 0 34px;
}

/* Cada tarjeta es un <div>, no un <a>: WordPress envuelve en parrafos
   los elementos en linea sueltos y eso metia celdas vacias en la
   rejilla. El enlace del titulo se estira sobre toda la tarjeta. */
.cia-area-tarjeta
{
	position: relative;
	display: block;
	padding: 18px 18px 20px;
	background: #fff;
	border: 1px solid #e0e6e2;
	border-top: 3px solid #00734B;
	transition: box-shadow .18s ease, transform .18s ease;
}

.cia-area-tarjeta:hover,
.cia-area-tarjeta:focus-within
{
	box-shadow: 0 5px 16px rgba(0, 53, 33, .12);
	transform: translateY(-2px);
}

.cia-area-tarjeta h3
{
	margin: 0 0 7px;
	font-size: 1.02em;
	line-height: 1.3;
	color: #003521;
}

.cia-area-tarjeta h3 a
{
	color: #003521;
	text-decoration: none;
}

.cia-area-tarjeta h3 a::after
{
	content: "";
	position: absolute;
	inset: 0;
}

.cia-area-tarjeta:hover h3 a,
.cia-area-tarjeta:focus-within h3 a
{
	color: #00734B;
}

.cia-area-tarjeta p
{
	margin: 0;
	font-size: .88em;
	line-height: 1.5;
	color: #55635c;
}

/* --- Fichas de datos en dos columnas --- */

.cia-info-dos
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	margin: 0 0 34px;
	align-items: start;
}

.cia-ficha h3
{
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid #e0e6e2;
	font-size: 1.02em;
	color: #003521;
}

.cia-ficha dl
{
	margin: 0;
}

.cia-ficha dt
{
	margin-top: 12px;
	font-size: .76em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #00734B;
}

.cia-ficha dt:first-child
{
	margin-top: 0;
}

.cia-ficha dd
{
	margin: 2px 0 0;
	font-size: .94em;
	line-height: 1.5;
	color: #33403a;
}

.cia-mapa
{
	margin: 0;
}

.cia-mapa img
{
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #e0e6e2;
}

/* --- Foto a lo ancho --- */

.cia-foto-edificio
{
	margin: 0 0 10px;
}

.cia-foto-edificio img
{
	display: block;
	width: 100%;
	height: auto;
}

/* Foto dentro del texto de un area: al ancho de lectura, no de la
   columna entera, para que no pese mas que la cabecera. */
.cia-foto-media,
div.columna-principal .entry-content figure.cia-foto-media
{
	max-width: 760px;
	margin: 6px 0 24px;
}

.cia-foto-media img
{
	border-radius: 3px;
}

.cia-foto-edificio figcaption
{
	margin-top: 8px;
	font-size: .85em;
	color: #66736c;
}

/* --- Paginas institucionales en pantallas menores --- */

@media screen and (max-width: 900px) {
	.cia-areas-rejilla { grid-template-columns: repeat(2, 1fr); }
	.cia-info-dos      { grid-template-columns: 1fr; gap: 20px; }
}

@media screen and (max-width: 560px) {
	.cia-datos-clave   { grid-template-columns: 1fr; }
	.cia-areas-rejilla { grid-template-columns: 1fr; }
	.cia-entradilla    { font-size: 1.04em; padding-left: 14px; }
}

/* En celular el contenido arrancaba pegado a la franja de menus. */
@media screen and (max-width: 639px) {
	#contenidos
	{
		padding-top: 16px;
	}
}

/* ==================================================================
 * 20. Paneles enfrentados y ejes numerados
 *
 * Componentes de la pagina de proposito, aspiracion y ejes: dos
 * paneles contrapuestos y una rejilla de tarjetas numeradas.
 * ================================================================== */

.cia-par
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 0 0 36px;
	align-items: stretch;
}

/* El contenido se alinea arriba, no centrado: con textos de distinta
   longitud los dos titulos quedaban a distinta altura. */
.cia-panel
{
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.cia-panel h2
{
	margin: 0 0 12px;
	font-size: 1.15em;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.cia-panel p
{
	margin: 0;
	font-size: 1.02em;
	line-height: 1.6;
	max-width: none;
}

.cia-panel--claro
{
	background: #f2f7f4;
	border-top: 4px solid #00734B;
}

.cia-panel--claro h2
{
	color: #00734B;
}

.cia-panel--claro p
{
	color: #2c3a33;
}

.cia-panel--oscuro
{
	background: #003521;
	border-top: 4px solid #00734B;
}

/* Sobre el panel oscuro el color se fuerza: el tema tiñe los titulos
   de las paginas y aqui quedarian ilegibles. */
.cia-panel--oscuro h2,
div.columna-principal .cia-panel--oscuro h2
{
	color: #8fd3b4;
}

.cia-panel--oscuro p
{
	color: #eaf5ef;
}

/* --- Ejes estrategicos --- */

.cia-ejes
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 0 0 20px;
	counter-reset: eje;
}

.cia-eje
{
	position: relative;
	padding: 20px 20px 22px 20px;
	background: #fff;
	border: 1px solid #e0e6e2;
	border-left: 3px solid #00734B;
}

.cia-eje-num
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: #00734B;
	color: #fff;
	font-size: .9em;
	font-weight: bold;
	line-height: 1;
}

.cia-eje h3
{
	margin: 0 0 7px;
	font-size: 1em;
	line-height: 1.3;
	color: #003521;
}

.cia-eje p
{
	margin: 0;
	font-size: .89em;
	line-height: 1.55;
	color: #55635c;
	max-width: none;
}

@media screen and (max-width: 900px) {
	.cia-par  { grid-template-columns: 1fr; gap: 16px; }
	.cia-ejes { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 560px) {
	.cia-ejes  { grid-template-columns: 1fr; }
	.cia-panel { padding: 20px 20px; }
}

/* ==================================================================
 * 21. Navegacion entre entradas
 *
 * El tema la dejaba como dos enlaces sueltos, sin separacion ni
 * jerarquia, pegados al final del contenido.
 * ================================================================== */

/* La rejilla va en .nav-links, el contenedor directo de los dos
   enlaces. Ponerla en .post-navigation obligaba a usar
   display:contents en .nav-links y los enlaces acababan descolocados. */
.post-navigation
{
	margin: 36px 0 10px;
	padding-top: 22px;
	border-top: 1px solid #e0e6e2;
}

.post-navigation .nav-links
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: stretch;
}

.post-navigation .nav-previous,
.post-navigation .nav-next
{
	min-width: 0;
}

.post-navigation .nav-next
{
	text-align: right;
}

.post-navigation a
{
	display: block;
	padding: 14px 16px;
	background: #f6f9f7;
	border: 1px solid #e0e6e2;
	text-decoration: none;
	transition: border-color .18s ease, background .18s ease;
}

.post-navigation a:hover,
.post-navigation a:focus
{
	background: #fff;
	border-color: #00734B;
}

.post-navigation .meta-nav
{
	display: block;
	margin-bottom: 4px;
	color: #00734B;
	font-size: .74em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .07em;
}

.post-navigation .post-title
{
	display: block;
	color: #1d2a22;
	font-size: .95em;
	line-height: 1.35;
	overflow-wrap: break-word;
}

.post-navigation a:hover .post-title,
.post-navigation a:focus .post-title
{
	color: #00734B;
}

@media screen and (max-width: 640px) {
	.post-navigation .nav-links { grid-template-columns: 1fr; gap: 10px; }
	.post-navigation .nav-next  { text-align: left; }
}

/* the_post_navigation() emite un <h2 class="screen-reader-text"> antes
   de los enlaces. El tema lo oculta con clip pero lo deja en el flujo,
   de modo que ocupaba la primera celda de la rejilla y descolocaba
   "Anterior" y "Siguiente". Se saca del flujo conservandolo para los
   lectores de pantalla. */
.post-navigation > .screen-reader-text
{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* El tema aplica un clearfix a .nav-links:
     .nav-links:before, .nav-links:after { content:""; display:table; }
   Dentro de una rejilla CSS esos pseudoelementos cuentan como celdas,
   de modo que "Anterior" y "Siguiente" caian en la segunda y la tercera
   en lugar de una a cada lado. Se anulan. */
.post-navigation .nav-links::before,
.post-navigation .nav-links::after
{
	content: none;
	display: none;
}

/* ==================================================================
 * 22. Linea de tiempo, servicios y cifras
 *
 * Componentes de la resena historica: los hitos como linea de tiempo
 * vertical, los servicios en dos columnas y las cifras destacadas.
 * ================================================================== */

.cia-linea-tiempo
{
	list-style: none;
	margin: 0 0 34px;
	padding: 0 0 0 26px;
	border-left: 2px solid #cfe0d7;
	max-width: 60em;
}

.cia-hito
{
	position: relative;
	padding: 0 0 22px 0;
}

.cia-hito:last-child
{
	padding-bottom: 0;
}

.cia-hito::before
{
	content: "";
	position: absolute;
	left: -33px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #00734B;
	box-shadow: 0 0 0 3px #fff;
}

.cia-hito-ano
{
	display: block;
	font-size: 1.25em;
	font-weight: bold;
	line-height: 1.1;
	color: #00734B;
	letter-spacing: .01em;
}

.cia-hito p
{
	margin: 4px 0 0;
	line-height: 1.55;
	color: #3a4741;
	max-width: none;
}

/* --- Servicios --- */

.cia-servicios
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 26px;
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
	max-width: none;
}

.cia-servicios li
{
	position: relative;
	padding: 0 0 0 22px;
	font-size: .94em;
	line-height: 1.5;
	color: #3a4741;
}

.cia-servicios li::before
{
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #00734B;
}

/* --- Cifras --- */

.cia-cifras
{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: #dfe6e2;
	border: 1px solid #dfe6e2;
	margin: 0 0 10px;
}

.cia-cifras > div
{
	background: #f6f9f7;
	padding: 16px 12px;
	text-align: center;
}

.cia-cifras strong
{
	display: block;
	font-size: 1.7em;
	line-height: 1.1;
	color: #00734B;
}

.cia-cifras span
{
	display: block;
	margin-top: 4px;
	font-size: .78em;
	line-height: 1.35;
	color: #5a6b62;
}

.cia-nota
{
	font-size: .85em;
	color: #6b7973;
	font-style: italic;
}

@media screen and (max-width: 900px) {
	.cia-cifras    { grid-template-columns: repeat(3, 1fr); }
	.cia-servicios { grid-template-columns: 1fr; }
}

@media screen and (max-width: 560px) {
	.cia-cifras       { grid-template-columns: repeat(2, 1fr); }
	.cia-linea-tiempo { padding-left: 20px; }
	.cia-hito::before { left: -27px; }
}

/* ==================================================================
 * 23. Directorio de personal
 *
 * De las 41 personas publicadas, 26 no tienen biografia, pero todas
 * tienen foto y casi todas correo y telefono. Por eso la pagina se
 * trata como un directorio: la foto grande para reconocer a la
 * persona, el puesto claro y el contacto a un clic. El enlace al
 * perfil solo aparece cuando hay algo que leer.
 * ================================================================== */

.cia-listado-cabecera
{
	margin-bottom: 22px;
	padding-bottom: 12px;
	border-bottom: 3px solid #00734B;
}

.cia-listado-cabecera .page-title
{
	margin: 0;
	color: #003521;
}

.cia-listado-descripcion
{
	margin: 6px 0 0;
	color: #4a5a52;
}

.cia-listado-cuenta
{
	margin: 6px 0 0;
	color: #00734B;
	font-size: .82em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* --- Filtro en vivo --- */

.cia-filtro
{
	margin: 0 0 22px;
}

.cia-filtro input[type="search"]
{
	width: 100%;
	max-width: 24em;
	padding: 9px 12px;
	border: 1px solid #cfd8d3;
	border-radius: 3px;
	font-size: .95em;
}

.cia-filtro input[type="search"]:focus
{
	outline: 2px solid #00734B;
	outline-offset: 1px;
	border-color: #00734B;
}

.cia-filtro-vacio
{
	margin: 10px 0 0;
	color: #6b7973;
	font-style: italic;
}

/* --- Rejilla --- */

.cia-personal
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 18px;
}

.cia-persona
{
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 16px;
	background: #fff;
	border: 1px solid #e0e6e2;
	border-radius: 4px;
	transition: box-shadow .18s ease, border-color .18s ease;
}

.cia-persona:hover,
.cia-persona:focus-within
{
	border-color: #00734B;
	box-shadow: 0 4px 14px rgba(0, 53, 33, .1);
}

/* Quien encabeza el area ocupa la fila completa. */
.cia-persona--destacada
{
	grid-column: 1 / -1;
	background: #f4f8f6;
	border-left: 4px solid #00734B;
	padding: 20px;
}

.cia-persona-foto
{
	flex: 0 0 104px;
	line-height: 0;
}

.cia-persona--destacada .cia-persona-foto
{
	flex-basis: 128px;
}

.cia-persona-foto img,
.cia-persona-sinfoto
{
	display: block;
	width: 104px;
	height: 104px;
	object-fit: cover;
	object-position: center top;
	border-radius: 3px;
	background: #e8eeea;
}

.cia-persona--destacada .cia-persona-foto img,
.cia-persona--destacada .cia-persona-sinfoto
{
	width: 128px;
	height: 128px;
}

.cia-persona-datos
{
	flex: 1 1 auto;
	min-width: 0;
}

.cia-persona-nombre
{
	margin: 0 0 3px;
	font-size: 1.04em;
	line-height: 1.28;
	color: #003521;
	overflow-wrap: break-word;
}

.cia-persona--destacada .cia-persona-nombre
{
	font-size: 1.25em;
}

.cia-persona-nombre a
{
	color: #003521;
	text-decoration: none;
}

.cia-persona-nombre a:hover,
.cia-persona-nombre a:focus
{
	color: #00734B;
	text-decoration: underline;
}

.cia-persona-cargo
{
	margin: 0 0 8px;
	font-size: .86em;
	line-height: 1.4;
	color: #5a6b62;
}

.cia-persona-area
{
	margin: 0 0 8px;
	font-size: .84em;
}

.cia-persona-area a
{
	color: #00734B;
}

.cia-persona-contacto
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.cia-persona-contacto li
{
	margin: 0 0 3px;
	font-size: .84em;
	line-height: 1.4;
}

.cia-persona-contacto a
{
	color: #3a4741;
	text-decoration: none;
	overflow-wrap: break-word;
}

.cia-persona-contacto a:hover,
.cia-persona-contacto a:focus
{
	color: #00734B;
	text-decoration: underline;
}

.cia-ico
{
	display: inline-block;
	width: 1.25em;
	color: #00734B;
}

.cia-persona-mas
{
	margin: 10px 0 0;
	font-size: .84em;
}

.cia-persona-mas a
{
	color: #00734B;
	font-weight: bold;
	text-decoration: none;
}

.cia-persona-mas a:hover,
.cia-persona-mas a:focus
{
	text-decoration: underline;
}

/* Oculta las fichas que no casan con el filtro. */
.cia-persona[hidden]
{
	display: none;
}

@media screen and (max-width: 560px) {
	.cia-personal      { grid-template-columns: 1fr; gap: 12px; }
	.cia-persona       { gap: 12px; padding: 13px; }
	.cia-persona-foto  { flex-basis: 84px; }
	.cia-persona-foto img,
	.cia-persona-sinfoto { width: 84px; height: 84px; }
	.cia-persona--destacada .cia-persona-foto { flex-basis: 84px; }
	.cia-persona--destacada .cia-persona-foto img { width: 84px; height: 84px; }
}

/* ==================================================================
 * 24. Paginas de area de investigacion
 *
 * Banner, lineas de trabajo en tarjetas numeradas, galeria e
 * investigadores. Se estrena en Biotecnologia de Plantas y sirve para
 * las demas areas.
 * ================================================================== */

.cia-banner
{
	margin: 0 0 26px;
}

/* Los banners son muy apaisados (de 2,3:1 a 3:1). Ocupando todo el
   ancho de la columna dominaban la pantalla, asi que se limitan y se
   centran. */
.cia-banner img
{
	display: block;
	width: 100%;
	max-width: 1000px;
	height: auto;
	margin: 0 auto;
	border-radius: 3px;
}

/* --- Lineas de trabajo --- */

.cia-lineas
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin: 0 0 34px;
}

.cia-linea
{
	position: relative;
	padding: 20px 22px 22px;
	background: #fff;
	border: 1px solid #e0e6e2;
	border-top: 3px solid #00734B;
}

.cia-linea-num
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: #00734B;
	color: #fff;
	font-size: .85em;
	font-weight: bold;
	line-height: 1;
}

.cia-linea h3
{
	margin: 0 0 8px;
	font-size: 1.04em;
	line-height: 1.3;
	color: #003521;
}

.cia-linea p
{
	margin: 0;
	font-size: .9em;
	line-height: 1.58;
	color: #4a5a52;
	max-width: none;
}

/* --- Galeria de banners --- */

.cia-galeria
{
	display: grid;
	gap: 14px;
	margin: 0 0 34px;
}

.cia-galeria figure
{
	margin: 0;
}

.cia-galeria img
{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

/* --- Investigadores --- */

.cia-investigadores
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 0 0 34px;
}

.cia-investigador
{
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px;
	background: #f6f9f7;
	border: 1px solid #e0e6e2;
	border-radius: 4px;
}

.cia-investigador-foto
{
	flex: 0 0 76px;
	line-height: 0;
}

.cia-investigador-foto img
{
	display: block;
	width: 76px;
	height: 76px;
	object-fit: cover;
	object-position: center top;
	border-radius: 3px;
}

.cia-investigador-datos
{
	min-width: 0;
}

.cia-investigador h3
{
	margin: 0 0 3px;
	font-size: .98em;
	line-height: 1.28;
	color: #003521;
	overflow-wrap: break-word;
}

.cia-investigador h3 a
{
	color: #003521;
	text-decoration: none;
}

.cia-investigador h3 a:hover,
.cia-investigador h3 a:focus
{
	color: #00734B;
	text-decoration: underline;
}

.cia-investigador-cargo
{
	margin: 0 0 5px;
	font-size: .82em;
	color: #5a6b62;
}

.cia-investigador-correo
{
	margin: 0;
	font-size: .82em;
	overflow-wrap: break-word;
}

.cia-investigador-correo a
{
	color: #00734B;
	text-decoration: none;
}

.cia-investigador-correo a:hover
{
	text-decoration: underline;
}

.cia-ficha--lab
{
	max-width: 46em;
}

@media screen and (max-width: 900px) {
	.cia-lineas          { grid-template-columns: 1fr; }
	.cia-investigadores  { grid-template-columns: 1fr; }
}

/* Pies de foto de la galeria de area. */
.cia-galeria figcaption
{
	margin-top: 8px;
	font-size: .86em;
	line-height: 1.45;
	color: #5a6b62;
}

.cia-galeria figure
{
	margin: 0 0 6px;
}

/* ==================================================================
 * 25. Galeria de banners: tamano y pie de foto
 *
 * Se reduce el ancho de las imagenes y se hace legible el pie, que en
 * gris claro y pequeno apenas se distinguia del fondo.
 * ================================================================== */

.cia-galeria img
{
	max-width: 1000px;
	margin: 0 auto;
}

.cia-galeria figure
{
	margin: 0 0 26px;
	text-align: center;
}

.cia-galeria figcaption
{
	max-width: 1000px;
	margin: 10px auto 0;
	padding-top: 9px;
	border-top: 2px solid #cfe0d7;
	color: #33403a;
	font-size: .95em;
	line-height: 1.5;
	text-align: left;
}

@media screen and (max-width: 640px) {
	.cia-galeria figcaption { font-size: .9em; }
}

/* La regla general de la seccion 18 (div.columna-principal
   .entry-content img) tiene mas especificidad y devolvia las imagenes a
   todo el ancho. Se iguala el selector para que el limite se respete. */
div.columna-principal .entry-content .cia-banner img,
div.columna-principal .entry-content .cia-galeria img
{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

/* ==================================================================
 * 26. Equipamiento analitico y enlaces a documentos
 *
 * La galeria de la seccion 25 apila las imagenes a una columna, que es
 * lo correcto para banners anchos. Las fotos de equipo son casi
 * cuadradas y son seis, asi que se muestran en rejilla.
 *
 * El rotulo con el nombre del aparato viene impreso dentro de la propia
 * imagen, de modo que el pie de foto solo lo repite para quien use un
 * lector de pantalla o tenga las imagenes desactivadas.
 * ================================================================== */

.cia-galeria--equipos
{
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.cia-galeria--equipos figure
{
	margin: 0;
	border: 1px solid #dfe6e2;
	border-radius: 3px;
	overflow: hidden;
	background: #fff;
}

/* Una vez recortado el rotulo, las fotos quedan entre 0,94:1 y 2,2:1.
   Se encajan enteras en una caja 4:3 en vez de recortarlas: el fondo de
   las fotos ya es blanco, asi que el aire no se nota y ningun aparato
   sale partido. */
.cia-galeria--equipos img,
div.columna-principal .entry-content .cia-galeria--equipos img
{
	width: 100%;
	max-width: none;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: #fff;
	padding: 12px;
	box-sizing: border-box;
	border-radius: 0;
	margin: 0;
}

.cia-galeria--equipos figcaption
{
	max-width: none;
	margin: 0;
	padding: 14px 16px 16px;
	border-top: 1px solid #dfe6e2;
	background: #f6f9f7;
	color: #33403a;
	font-size: .86em;
	line-height: 1.45;
	text-align: left;
}

.cia-galeria--equipos figcaption strong
{
	display: block;
	margin-bottom: 6px;
	color: #00583a;
	font-size: 1.04em;
	line-height: 1.3;
}

.cia-galeria--equipos figcaption span
{
	display: block;
	color: #4a5a52;
	line-height: 1.55;
}

@media screen and (max-width: 760px) {
	.cia-galeria--equipos { grid-template-columns: 1fr; }
}

@media screen and (max-width: 520px) {
	.cia-galeria--equipos { grid-template-columns: 1fr; }
}

/* --- Enlaces a documentos y paginas relacionadas --- */

.cia-enlaces
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
	max-width: none;
}

.cia-enlaces li
{
	margin: 0;
}

.cia-enlaces a
{
	display: block;
	height: 100%;
	padding: 16px 18px;
	border: 1px solid #dfe6e2;
	border-left: 4px solid #00734B;
	border-radius: 3px;
	background: #fff;
	color: #1d2b24;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}

.cia-enlaces a:hover,
.cia-enlaces a:focus
{
	background: #f2f7f4;
	border-color: #00734B;
	text-decoration: none;
}

.cia-enlaces span
{
	display: block;
	margin-top: 5px;
	color: #5a6b62;
	font-size: .85em;
	font-weight: 400;
}

@media screen and (max-width: 860px) {
	.cia-enlaces { grid-template-columns: 1fr; }
}


/* ==================================================================
 * 27. Texto de bienvenida de la portada
 *
 * En Drupal esto era un bloque, no un nodo, de modo que la migracion de
 * nodos no lo trajo y la portada arrancaba directamente en los avisos.
 * En espanol pasaba desapercibido porque debajo habia cuatro tarjetas;
 * en ingles, donde no hay avisos, dejaba la pagina practicamente vacia.
 * ================================================================== */

.cia-bienvenida
{
	margin: 0 0 34px;
	padding: 0 0 26px;
	border-bottom: 1px solid #e3eae6;
}

.cia-bienvenida h2,
div.columna-principal .cia-bienvenida h2
{
	margin: 0 0 12px;
	color: #00583a;
	font-size: 1.5em;
	line-height: 1.25;
}

.cia-bienvenida p
{
	margin: 0;
	max-width: none;
	color: #3a4741;
	font-size: 1.02em;
	line-height: 1.65;
}

/* Nota que acompana a los avisos cuando se muestran en un idioma que no
   es el de la pagina.

   .cia-seccion-cabecera es un flex sin wrap, de modo que un tercer hijo
   se le colaba entre el titulo y el enlace "Ver todos". Se le permite
   envolver para que la nota caiga en su propia linea; con solo dos
   hijos, que es el caso en espanol, no cambia nada. */
.cia-seccion-cabecera
{
	flex-wrap: wrap;
}

.cia-seccion-nota
{
	flex-basis: 100%;
	margin: 6px 0 0;
	max-width: none;
	color: #5a6b62;
	font-size: .86em;
	font-style: italic;
}

@media screen and (max-width: 640px) {
	.cia-bienvenida h2,
	div.columna-principal .cia-bienvenida h2 { font-size: 1.3em; }
	.cia-bienvenida p                        { font-size: .98em; }
}


/* ==================================================================
 * 28. Fichas de grupos de microorganismos
 *
 * En el original las cuatro aplicaciones del laboratorio y sus generos
 * venian encadenadas dentro de un solo parrafo, con las listas metidas
 * entre parentesis. Puestas en fichas se leen de un vistazo y los
 * nombres cientificos quedan en cursiva, como corresponde.
 * ================================================================== */

.cia-grupos
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 0 0 34px;
}

.cia-grupo
{
	padding: 18px 20px;
	border: 1px solid #dfe6e2;
	border-top: 3px solid #00734B;
	border-radius: 3px;
	background: #f6f9f7;
}

.cia-grupo h3,
div.columna-principal .cia-grupo h3
{
	margin: 0 0 8px;
	color: #00583a;
	font-size: 1.06em;
	line-height: 1.3;
}

.cia-grupo p
{
	margin: 0;
	max-width: none;
	color: #4a5a52;
	font-size: .92em;
	line-height: 1.55;
}

@media screen and (max-width: 760px) {
	.cia-grupos { grid-template-columns: 1fr; }
}


/* ==================================================================
 * 29. Fichas de producto biologico
 *
 * Los ocho productos del laboratorio venian en la misma lista de
 * enlaces que los posteres de investigacion, sin distinguirse. En
 * fichas se ve de un vistazo que hace cada uno.
 *
 * Toda la ficha es el enlace, no solo el nombre: el area pulsable pasa
 * de una linea de texto a un rectangulo entero, que en pantalla tactil
 * se agradece.
 * ================================================================== */

.cia-productos
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 0 0 30px;
}

.cia-producto
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 16px 14px;
	border: 1px solid #dfe6e2;
	border-top: 3px solid #00734B;
	border-radius: 3px;
	background: #fff;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}

.cia-producto:hover,
.cia-producto:focus
{
	background: #f2f7f4;
	border-color: #00734B;
	border-top-color: #003521;
	text-decoration: none;
}

.cia-producto-nombre
{
	color: #00583a;
	font-size: 1.02em;
	font-weight: bold;
	letter-spacing: .02em;
	line-height: 1.2;
}

.cia-producto-cat
{
	flex: 1 0 auto;
	color: #3a4741;
	font-size: .86em;
	line-height: 1.45;
}

.cia-producto-pdf
{
	color: #5a6b62;
	font-size: .76em;
	letter-spacing: .02em;
	text-transform: uppercase;
}

@media screen and (max-width: 1000px) {
	.cia-productos { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 760px) {
	.cia-productos { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 440px) {
	.cia-productos { grid-template-columns: 1fr; }
}

/* Los posteres llevan una descripcion larga: a tres columnas quedaban
   como columnas de texto estrechas y altas, asi que van a dos. */
.cia-enlaces--ancho
{
	grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 760px) {
	.cia-enlaces--ancho { grid-template-columns: 1fr; }
}


/* ==================================================================
 * 30. Galeria de fotografias
 *
 * La galeria de la seccion 25 apila a una columna, que es lo que
 * conviene a los banners anchos. Esta variante es para fotografias
 * sueltas: van en rejilla y con el pie debajo de cada una.
 *
 * A diferencia de la rejilla de equipos (seccion 26), aqui se recorta
 * en vez de encajar: son fotografias de campo, sin fondo blanco, y el
 * aire alrededor quedaria como un marco sucio.
 * ================================================================== */

.cia-galeria--fotos
{
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.cia-galeria--fotos figure
{
	margin: 0;
	text-align: left;
}

.cia-galeria--fotos img,
div.columna-principal .entry-content .cia-galeria--fotos img
{
	width: 100%;
	max-width: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 3px;
	margin: 0;
}

.cia-galeria--fotos figcaption
{
	max-width: none;
	margin: 10px 0 0;
	padding-top: 9px;
	border-top: 2px solid #cfe0d7;
	color: #33403a;
	font-size: .86em;
	line-height: 1.5;
	text-align: left;
}

@media screen and (max-width: 860px) {
	.cia-galeria--fotos { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 520px) {
	.cia-galeria--fotos { grid-template-columns: 1fr; }
}


/* ==================================================================
 * 31. Mapa de suelos
 *
 * Ojo con el nombre: .cia-mapa ya esta cogido por el mapa de ubicacion
 * del pie de pagina (seccion 22), que lleva width:100% sin tope. Al
 * reutilizar esa clase aqui el mapa salia a todo el ancho de la
 * columna, que para una lamina casi cuadrada es demasiado.
 *
 * Va al 70 % del ancho disponible, centrado. Por debajo de 760 px se
 * deja al 100 %: alli el 70 % dejaria la leyenda ilegible.
 * ================================================================== */

.cia-mapa-suelos
{
	margin: 0 0 32px;
}

.cia-mapa-suelos img,
div.columna-principal .entry-content .cia-mapa-suelos img
{
	display: block;
	width: 70%;
	max-width: 900px;
	height: auto;
	margin: 0 auto;
	border: 1px solid #dfe6e2;
	border-radius: 3px;
}

.cia-mapa-suelos figcaption
{
	width: 70%;
	max-width: 900px;
	margin: 10px auto 0;
	padding-top: 9px;
	border-top: 2px solid #cfe0d7;
	color: #5a6b62;
	font-size: .84em;
	line-height: 1.5;
	text-align: left;
}

@media screen and (max-width: 760px) {
	.cia-mapa-suelos img,
	div.columna-principal .entry-content .cia-mapa-suelos img,
	.cia-mapa-suelos figcaption
	{
		width: 100%;
	}
}


/* ==================================================================
 * 32. Fichas de proyecto de investigacion
 *
 * Titulo, persona responsable y codigo de la Vicerrectoria. El codigo
 * va en monoespaciado: es una referencia que la gente copia para
 * buscarla en los sistemas de la UCR, y asi se distingue de un numero
 * cualquiera.
 * ================================================================== */

.cia-proyectos
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 0 0 34px;
}

.cia-proyecto
{
	display: flex;
	flex-direction: column;
	padding: 18px 20px;
	border: 1px solid #dfe6e2;
	border-left: 4px solid #00734B;
	border-radius: 3px;
	background: #fff;
}

.cia-proyecto h3,
div.columna-principal .cia-proyecto h3
{
	margin: 0 0 10px;
	color: #1d2b24;
	font-size: 1em;
	line-height: 1.4;
}

.cia-proyecto-invest
{
	flex: 1 0 auto;
	margin: 0 0 10px;
	max-width: none;
	color: #4a5a52;
	font-size: .88em;
	line-height: 1.45;
}

.cia-proyecto-invest span
{
	display: block;
	color: #5a6b62;
	font-size: .82em;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.cia-proyecto-codigo
{
	margin: 0;
	max-width: none;
	color: #00583a;
	font-family: Consolas, "DejaVu Sans Mono", Menlo, monospace;
	font-size: .84em;
	letter-spacing: .02em;
}

@media screen and (max-width: 760px) {
	.cia-proyectos { grid-template-columns: 1fr; }
}


/* ==================================================================
 * 33. Docentes y sus cursos
 *
 * Antes cada docente iba con su retrato. Ahora el nombre es un enlace a
 * su ficha de personal: el retrato ya esta alli, y de paso el nombre y
 * el cargo salen del directorio, de modo que no pueden quedar
 * desfasados respecto a el.
 *
 * El codigo del curso va en monoespaciado y alineado, que es como se
 * lee una lista de siglas de matricula.
 * ================================================================== */

.cia-docentes
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin: 0 0 34px;
}

.cia-docente
{
	padding: 18px 20px 20px;
	border: 1px solid #dfe6e2;
	border-top: 3px solid #00734B;
	border-radius: 3px;
	background: #fff;
}

.cia-docente h3,
div.columna-principal .cia-docente h3
{
	margin: 0 0 4px;
	font-size: 1.04em;
	line-height: 1.3;
}

.cia-docente h3 a
{
	color: #00583a;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.cia-docente h3 a:hover,
.cia-docente h3 a:focus
{
	border-bottom-color: #00734B;
	text-decoration: none;
}

.cia-docente-cargo
{
	margin: 0 0 14px;
	max-width: none;
	color: #5a6b62;
	font-size: .84em;
	line-height: 1.4;
}

.cia-docente-nota
{
	margin: 0;
	max-width: none;
	color: #7a8a82;
	font-size: .84em;
	font-style: italic;
}

.cia-docente h4,
div.columna-principal .cia-docente h4
{
	margin: 0 0 6px;
	color: #3a4741;
	font-size: .78em;
	font-weight: bold;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* El selector obvio seria h4 + ul + h4, pero entre medias va la lista
   con su propia clase y el margen inferior de ul; asi la regla es mas
   directa y no depende del orden exacto de los hermanos. */
.cia-docente ul.cia-cursos + h4
{
	margin-top: 16px;
}

ul.cia-cursos
{
	list-style: none;
	margin: 0 0 2px;
	padding: 0;
	max-width: none;
}

ul.cia-cursos li
{
	margin: 0 0 5px;
	padding: 0;
	color: #3a4741;
	font-size: .88em;
	line-height: 1.45;
}

.cia-curso-codigo
{
	display: inline-block;
	min-width: 76px;
	color: #00583a;
	font-family: Consolas, "DejaVu Sans Mono", Menlo, monospace;
	font-size: .92em;
}

@media screen and (max-width: 760px) {
	.cia-docentes { grid-template-columns: 1fr; }
	.cia-curso-codigo { min-width: 0; margin-right: 6px; }
}


/* ==================================================================
 * 34. Publicaciones recopiladas
 *
 * Citas bibliograficas numeradas. El numero va fuera, en su propia
 * columna, y el texto sangrado en bloque.
 *
 * Probe primero con sangria francesa (text-indent negativo) y hubo que
 * quitarla: a partir de la publicacion numero diez el numero de dos
 * cifras se metia encima de la primera palabra de la cita.
 * ================================================================== */

ol.cia-publicaciones
{
	list-style: none;
	counter-reset: pub;
	margin: 0 0 30px;
	padding: 0;
	max-width: none;
}

ol.cia-publicaciones li
{
	position: relative;
	margin: 0 0 12px;
	padding: 0 0 0 40px;
	color: #33403a;
	font-size: .92em;
	line-height: 1.55;
}

ol.cia-publicaciones li::before
{
	counter-increment: pub;
	content: counter(pub) ".";
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	color: #7a8a82;
	font-size: .92em;
	text-align: right;
	text-indent: 0;
}

ol.cia-publicaciones li a
{
	color: #00734B;
	word-break: break-word;
}

ol.cia-publicaciones li i,
ol.cia-publicaciones li em
{
	color: #1d2b24;
}

.cia-pub-cargo
{
	margin: -14px 0 14px;
	max-width: none;
	color: #5a6b62;
	font-size: .86em;
}

/* El bloque propio de la pagina (hoy, el catalogo) va arriba, antes
   del listado: debajo hay 260 referencias y alli no lo veria nadie. */
.cia-pub-nota
{
	margin: 0 0 34px;
}

@media screen and (max-width: 640px) {
	ol.cia-publicaciones li { padding-left: 30px; }
	ol.cia-publicaciones li::before { width: 22px; }
}


/* ==================================================================
 * 35. Galeria de videos
 *
 * Fichas con miniatura. Toda la ficha es el enlace, no solo el titulo.
 *
 * Las miniaturas de YouTube vienen en 4:3 con dos franjas negras arriba
 * y abajo, porque el video es 16:9. Se recortan a 16:9 para que no se
 * vean esas franjas.
 * ================================================================== */

.cia-videos
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 0 0 34px;
}

a.cia-video
{
	display: flex;
	flex-direction: column;
	border: 1px solid #dfe6e2;
	border-radius: 3px;
	background: #fff;
	color: #1d2b24;
	text-decoration: none;
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}

a.cia-video:hover,
a.cia-video:focus
{
	border-color: #00734B;
	box-shadow: 0 2px 10px rgba(0, 53, 33, .12);
	text-decoration: none;
}

.cia-video-mini
{
	display: block;
	line-height: 0;
	background: #003521;
}

.cia-video-mini img,
div.columna-principal .entry-content .cia-video-mini img
{
	display: block;
	width: 100%;
	max-width: none;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}

.cia-video-datos
{
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	padding: 13px 15px 14px;
}

.cia-video-titulo
{
	display: block;
	margin-bottom: 6px;
	color: #00583a;
	font-size: .94em;
	font-weight: bold;
	line-height: 1.35;
}

.cia-video-desc
{
	display: block;
	flex: 1 0 auto;
	margin-bottom: 10px;
	color: #5a6b62;
	font-size: .82em;
	line-height: 1.45;
}

.cia-video-ver
{
	display: block;
	margin-top: auto;
	color: #00734B;
	font-size: .76em;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.cia-video-ver::after
{
	content: " \2192";
}

@media screen and (max-width: 900px) {
	.cia-videos { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 560px) {
	.cia-videos { grid-template-columns: 1fr; }
}


/* ==================================================================
 * 36. Video institucional de la portada
 *
 * Se muestra la caratula con un boton de reproducir encima. El
 * reproductor de YouTube no aparece hasta que alguien pulsa, asi que la
 * portada no carga nada de Google mientras nadie quiera ver el video.
 * ================================================================== */

.cia-video-portada
{
	margin: 0 0 34px;
}

a.cia-video-lanzar
{
	position: relative;
	display: block;
	max-width: 620px;
	border-radius: 3px;
	overflow: hidden;
	background: #003521;
	text-decoration: none;
}

a.cia-video-lanzar img,
div.columna-principal a.cia-video-lanzar img
{
	display: block;
	width: 100%;
	max-width: none;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
	transition: opacity .15s;
}

a.cia-video-lanzar:hover img,
a.cia-video-lanzar:focus img
{
	opacity: .82;
}

/* Triangulo de reproducir, dibujado con bordes: no hace falta imagen. */
.cia-video-play
{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 68px;
	margin: -34px 0 0 -34px;
	border-radius: 50%;
	background: rgba(0, 53, 33, .82);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
	transition: background .15s;
}

.cia-video-play::after
{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -12px 0 0 -7px;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
}

a.cia-video-lanzar:hover .cia-video-play,
a.cia-video-lanzar:focus .cia-video-play
{
	background: #00734B;
}

.cia-video-rotulo
{
	display: block;
	padding: 11px 16px 13px;
	background: #00583a;
	color: #fff;
	font-size: .9em;
	font-weight: bold;
	letter-spacing: .01em;
}

/* Ya pulsado: el hueco lo ocupa el reproductor. */
.cia-video-abierto iframe
{
	display: block;
	width: 100%;
	max-width: 620px;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 3px;
}

/* ==================================================================
 * 37. Enlaces institucionales de la portada
 * ================================================================== */

.cia-instituciones
{
	margin: 34px 0 10px;
	padding-top: 26px;
	border-top: 1px solid #e3eae6;
}

.cia-instituciones h2,
div.columna-principal .cia-instituciones h2
{
	margin: 0 0 18px;
	color: #00583a;
	font-size: 1.24em;
}

.cia-instituciones-rejilla
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

a.cia-institucion
{
	display: flex;
	flex-direction: column;
	border: 1px solid #dfe6e2;
	border-radius: 3px;
	background: #fff;
	text-decoration: none;
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}

a.cia-institucion:hover,
a.cia-institucion:focus
{
	border-color: #00734B;
	box-shadow: 0 2px 10px rgba(0, 53, 33, .1);
	text-decoration: none;
}

/* Los dos logotipos tienen proporciones muy distintas -- uno es una
   cabecera apaisada y el otro una firma estrecha -- asi que se encajan
   enteros en una caja comun en vez de recortarlos. */
.cia-institucion-logo
{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96px;
	padding: 12px 16px;
	background: #f6f9f7;
	border-bottom: 1px solid #dfe6e2;
}

.cia-institucion-logo img,
div.columna-principal .cia-institucion-logo img
{
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 72px;
	margin: 0;
	border-radius: 0;
}

.cia-institucion-datos
{
	padding: 13px 16px 15px;
}

.cia-institucion-titulo
{
	display: block;
	margin-bottom: 4px;
	color: #00583a;
	font-size: .96em;
	font-weight: bold;
	line-height: 1.3;
}

.cia-institucion-pie
{
	display: block;
	color: #5a6b62;
	font-size: .84em;
	line-height: 1.45;
}

@media screen and (max-width: 640px) {
	.cia-instituciones-rejilla { grid-template-columns: 1fr; }
	.cia-video-play { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
	.cia-video-play::after { margin: -10px 0 0 -6px; border-width: 10px 0 10px 16px; }
}


/* ==================================================================
 * 38. Catalogo de publicaciones
 *
 * Portada del catalogo junto al texto. En pantalla estrecha la portada
 * pasa arriba y se centra.
 * ================================================================== */

.cia-catalogo
{
	display: flex;
	gap: 24px;
	align-items: flex-start;
	margin: 0 0 20px;
	padding: 22px 24px;
	border: 1px solid #dfe6e2;
	border-left: 4px solid #00734B;
	border-radius: 3px;
	background: #f6f9f7;
}

.cia-catalogo-portada
{
	flex: 0 0 168px;
	line-height: 0;
}

.cia-catalogo-portada img,
div.columna-principal .entry-content .cia-catalogo-portada img
{
	display: block;
	width: 168px;
	max-width: 100%;
	height: auto;
	margin: 0;
	border: 1px solid #dfe6e2;
	border-radius: 2px;
}

.cia-catalogo-texto
{
	min-width: 0;
}

.cia-catalogo-texto p
{
	margin: 0 0 14px;
	max-width: none;
	color: #3a4741;
	font-size: .94em;
	line-height: 1.6;
}

.cia-catalogo-texto p:last-child
{
	margin-bottom: 0;
}

@media screen and (max-width: 640px) {
	.cia-catalogo { flex-direction: column; align-items: center; text-align: center; }
	.cia-catalogo-portada { flex-basis: auto; }
}


/* ==================================================================
 * 39. Manuales con portada
 *
 * Fichas con la portada del documento, rasterizada de la primera pagina
 * del PDF con Ghostscript.
 *
 * La portada va pequena y al lado del texto, no encima y a todo el
 * ancho: a 288 px dominaba la ficha y la pagina parecia un escaparate.
 * A 120 px sigue reconociendose -- el color, la foto y el bloque del
 * titulo -- pero manda el texto, que es lo que se viene a leer.
 *
 * La portada guarda la proporcion de la pagina (0,77:1) en vez de
 * recortarse: recortada pierde justo lo que la hace reconocible.
 * ================================================================== */

.cia-manuales
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0 0 34px;
	max-width: 56em;
}

a.cia-manual
{
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 14px 16px;
	border: 1px solid #dfe6e2;
	border-left: 4px solid #00734B;
	border-radius: 3px;
	background: #fff;
	color: #1d2b24;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}

a.cia-manual:hover,
a.cia-manual:focus
{
	background: #f6f9f7;
	border-color: #00734B;
	text-decoration: none;
}

.cia-manual-portada
{
	flex: 0 0 80px;
	line-height: 0;
}

.cia-manual-portada img,
div.columna-principal .entry-content .cia-manual-portada img
{
	display: block;
	width: 80px;
	max-width: 100%;
	height: auto;
	margin: 0;
	border: 1px solid #dfe6e2;
	border-radius: 2px;
}

.cia-manual-datos
{
	flex: 1 1 auto;
	min-width: 0;
}

.cia-manual-titulo
{
	display: block;
	margin-bottom: 6px;
	color: #00583a;
	font-size: .98em;
	font-weight: bold;
	line-height: 1.35;
}

.cia-manual-desc
{
	display: block;
	margin-bottom: 8px;
	color: #5a6b62;
	font-size: .85em;
	line-height: 1.5;
}

.cia-manual-peso
{
	display: block;
	color: #00734B;
	font-size: .76em;
	letter-spacing: .03em;
	text-transform: uppercase;
}

@media screen and (max-width: 520px) {
	.cia-manual-portada { flex-basis: 62px; }
	.cia-manual-portada img,
	div.columna-principal .entry-content .cia-manual-portada img { width: 62px; }
}


/* --- Variante con insignia de area en vez de portada ---
 *
 * Misma ficha que la de los manuales, pero la imagen es el distintivo
 * circular del area. Al ser un circulo sobre fondo transparente no
 * lleva borde ni marco: un recuadro alrededor de un circulo se ve
 * siempre desalineado.
 */

.cia-manual--logo .cia-manual-portada
{
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
}

.cia-manual--logo .cia-manual-portada img,
div.columna-principal .entry-content .cia-manual--logo .cia-manual-portada img
{
	width: 72px;
	height: 72px;
	border: 0;
	border-radius: 50%;
}

@media screen and (max-width: 520px) {
	.cia-manual--logo .cia-manual-portada img,
	div.columna-principal .entry-content .cia-manual--logo .cia-manual-portada img { width: 56px; height: 56px; }
}

/* ==================================================================
 * 41. Ficha de una persona
 *
 * Complementa el listado del personal (seccion 25). La foto mide 108
 * px, cuatro mas que en el listado: aqui se sabe a quien se esta
 * viendo, y una foto de retrato ampliada a 215 px, como salia antes,
 * se comia la mitad de la pantalla sin anadir nada.
 *
 * Los apartados cortos -- idiomas, grados academicos -- van de dos en
 * dos, y las publicaciones al final, numeradas y con sangria francesa,
 * que es como se leen las citas.
 * ================================================================== */

.cia-perfil-volver
{
	margin: 0 0 16px;
	font-size: .9em;
}

.cia-perfil-volver a
{
	color: #00734B;
	text-decoration: none;
}

.cia-perfil-volver a:hover,
.cia-perfil-volver a:focus
{
	text-decoration: underline;
}

/* --- Tarjeta de cabecera --- */

.cia-perfil-cabecera
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px 22px;
	margin: 0 0 26px;
	padding: 20px 22px;
	background: #f4f8f6;
	border-left: 4px solid #00734B;
	border-radius: 0 4px 4px 0;
}

.cia-perfil-foto
{
	flex: 0 0 108px;
	line-height: 0;
}

.cia-perfil-foto img,
.cia-perfil-sinfoto
{
	display: block;
	width: 108px;
	height: 108px;
	object-fit: cover;
	object-position: center top;
	border-radius: 3px;
	background: #e8eeea;
}

.cia-perfil-identidad
{
	flex: 1 1 260px;
	min-width: 0;
}

h1.cia-perfil-nombre,
.cia-perfil-nombre
{
	margin: 0 0 4px;
	font-size: 1.5em;
	line-height: 1.2;
	color: #003521;
	overflow-wrap: break-word;
}

.cia-perfil-cargo
{
	margin: 0 0 6px;
	font-weight: 700;
	color: #00563a;
}

.cia-perfil-areas
{
	margin: 0 0 10px;
	font-size: .9em;
	color: #6b7973;
}

.cia-perfil-areas a
{
	color: #00734B;
	text-decoration: none;
}

.cia-perfil-areas a:hover,
.cia-perfil-areas a:focus
{
	text-decoration: underline;
}

.cia-perfil-contacto
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cia-perfil-contacto li
{
	position: relative;
	margin: 0;
	padding: 0 0 0 22px;
	font-size: .92em;
	line-height: 1.5;
}

.cia-perfil-contacto li::before
{
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 15px;
	height: 15px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px 15px;
	opacity: .9;
}

.cia-perfil-correo::before
{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300734B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6 8.5-6'/%3E%3C/svg%3E");
}

.cia-perfil-telefono::before
{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300734B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.9v2.6a1.6 1.6 0 0 1-1.8 1.6 16 16 0 0 1-6.9-2.5 15.6 15.6 0 0 1-4.8-4.8A16 16 0 0 1 5 6.8 1.6 1.6 0 0 1 6.6 5h2.6a1.6 1.6 0 0 1 1.6 1.4c.1.8.3 1.5.6 2.2a1.6 1.6 0 0 1-.4 1.7l-1.1 1.1a13 13 0 0 0 4.8 4.8l1.1-1.1a1.6 1.6 0 0 1 1.7-.4c.7.3 1.4.5 2.2.6a1.6 1.6 0 0 1 1.4 1.6z'/%3E%3C/svg%3E");
}

.cia-perfil-contacto a
{
	color: #24402f;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.cia-perfil-contacto a:hover,
.cia-perfil-contacto a:focus
{
	color: #00734B;
	text-decoration: underline;
}

/* Datos sueltos que traia la ficha: puesto, especialidad, area. */
.cia-perfil-datos
{
	flex: 1 1 100%;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 14px;
	margin: 2px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid #dce5e0;
	font-size: .92em;
}

.cia-perfil-datos dt
{
	margin: 0;
	font-weight: 700;
	color: #4a5a52;
	white-space: nowrap;
}

.cia-perfil-datos dd
{
	margin: 0;
	color: #24402f;
}

/* --- Indice de la ficha --- */

.cia-perfil-indice
{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
	margin: 0 0 24px;
}

.cia-perfil-indice-rotulo
{
	font-size: .78em;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #6b7973;
}

.cia-perfil-indice ul
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cia-perfil-indice li
{
	margin: 0;
	padding: 0;
}

.cia-perfil-indice a
{
	display: block;
	padding: 4px 11px;
	border: 1px solid #d5e0da;
	border-radius: 999px;
	background: #fff;
	font-size: .84em;
	color: #00563a;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.cia-perfil-indice a:hover,
.cia-perfil-indice a:focus
{
	background: #eef5f1;
	border-color: #00734B;
	text-decoration: none;
}

/* --- Apartados --- */

.cia-perfil-bloque
{
	margin: 0 0 26px;
}

.cia-perfil-rejilla
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 0 30px;
	align-items: start;
}

h2.cia-perfil-titulo,
.cia-perfil-titulo
{
	margin: 0 0 12px;
	padding: 0 0 7px;
	font-size: 1.08em;
	line-height: 1.3;
	color: #003521;
	border-bottom: 2px solid #e0e6e2;
}

.cia-perfil-cuenta
{
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: #eef5f1;
	font-size: .72em;
	font-weight: 700;
	color: #00563a;
	vertical-align: middle;
}

h3.cia-perfil-sub,
.cia-perfil-sub
{
	margin: 16px 0 8px;
	font-size: .95em;
	color: #00563a;
}

.cia-perfil-texto p
{
	margin: 0 0 10px;
}

.cia-perfil-texto ul,
.cia-perfil-texto ol
{
	margin: 0 0 10px;
	padding: 0 0 0 2px;
	list-style: none;
}

/* Vinetas propias: las del tema son un punto pegado al texto. */
.cia-perfil-texto ul > li
{
	position: relative;
	margin: 0 0 7px;
	padding: 0 0 0 16px;
	line-height: 1.55;
}

.cia-perfil-texto ul > li::before
{
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #8ab5a0;
}

.cia-perfil-texto ol
{
	counter-reset: cia-perfil-num;
}

.cia-perfil-texto ol > li
{
	position: relative;
	counter-increment: cia-perfil-num;
	margin: 0 0 7px;
	padding: 0 0 0 28px;
	line-height: 1.55;
}

.cia-perfil-texto ol > li::before
{
	content: counter(cia-perfil-num) ".";
	position: absolute;
	left: 0;
	top: 0;
	width: 22px;
	text-align: right;
	color: #6b7973;
	font-size: .9em;
}

.cia-perfil-texto a
{
	color: #00734B;
	overflow-wrap: anywhere;
}

/* --- Publicaciones --- */

.cia-perfil-bloque--pubs
{
	margin-top: 4px;
}

.cia-perfil-bloque--pubs .cia-perfil-texto ul,
.cia-perfil-bloque--pubs .cia-perfil-texto ol
{
	font-size: .93em;
	color: #2c3b33;
}

.cia-perfil-bloque--pubs .cia-perfil-texto ul > li,
.cia-perfil-bloque--pubs .cia-perfil-texto ol > li
{
	margin: 0 0 11px;
	padding-bottom: 11px;
	border-bottom: 1px solid #edf1ef;
}

.cia-perfil-bloque--pubs .cia-perfil-texto ul > li:last-child,
.cia-perfil-bloque--pubs .cia-perfil-texto ol > li:last-child
{
	border-bottom: 0;
}

.cia-perfil-bloque--pubs .cia-perfil-texto ul
{
	counter-reset: cia-perfil-num;
}

.cia-perfil-bloque--pubs .cia-perfil-texto ul > li
{
	counter-increment: cia-perfil-num;
	padding-left: 30px;
}

.cia-perfil-bloque--pubs .cia-perfil-texto ul > li::before
{
	content: counter(cia-perfil-num) ".";
	top: 0;
	width: 22px;
	height: auto;
	background: none;
	border-radius: 0;
	text-align: right;
	color: #6b7973;
	font-size: .9em;
}

.cia-perfil-aviso
{
	margin: 0;
	padding: 14px 16px;
	background: #f6f8f7;
	border-left: 3px solid #cdd8d2;
	color: #4a5a52;
}

/* --- Pie de la ficha --- */

.cia-perfil-pie
{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 30px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid #e0e6e2;
	font-size: .9em;
}

.cia-perfil-pie a
{
	color: #00734B;
	text-decoration: none;
}

.cia-perfil-pie a:hover,
.cia-perfil-pie a:focus
{
	text-decoration: underline;
}

@media screen and (max-width: 640px) {
	.cia-perfil-cabecera   { gap: 14px 16px; padding: 16px; }
	.cia-perfil-foto       { flex-basis: 84px; }
	.cia-perfil-foto img,
	.cia-perfil-sinfoto    { width: 84px; height: 84px; }
	h1.cia-perfil-nombre,
	.cia-perfil-nombre     { font-size: 1.25em; }
	.cia-perfil-datos      { grid-template-columns: 1fr; gap: 2px; }
	.cia-perfil-datos dd   { margin-bottom: 8px; }
	.cia-perfil-rejilla    { gap: 0; }
}

/* ==================================================================
 * 42. Citas en APA
 *
 * Sangria francesa, que es lo que distingue de un vistazo una lista
 * de referencias: la primera linea al margen y las demas metidas, de
 * modo que los apellidos queden alineados y la lista se recorra por
 * el autor.
 *
 * Sin vinetas ni numeros: APA no los lleva.
 * ================================================================== */

.cia-perfil-texto ul.cia-citas
{
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.cia-perfil-texto ul.cia-citas > li
{
	position: static;
	margin: 0 0 15px;
	padding: 0 0 0 2.2em;
	border: 0;
	text-indent: -2.2em;
	line-height: 1.62;
	text-align: left;
}

.cia-perfil-texto ul.cia-citas > li::before
{
	content: none;
}

.cia-perfil-texto ul.cia-citas > li:last-child
{
	margin-bottom: 0;
}

.cia-perfil-texto ul.cia-citas em
{
	font-style: italic;
}

.cia-perfil-texto ul.cia-citas a
{
	text-indent: 0;
}

@media screen and (max-width: 640px) {
	.cia-perfil-texto ul.cia-citas > li
	{
		padding-left: 1.5em;
		text-indent: -1.5em;
	}
}

/* ==================================================================
 * 43. Listado general de publicaciones
 *
 * La misma lista de citas que en la ficha de cada persona -- clase
 * .cia-citas, seccion 42 --, aqui agrupada por investigador. Cada
 * grupo se encabeza con la misma tarjeta que el directorio de
 * personal: retrato pequeno, nombre y puesto, para que las tres
 * paginas se reconozcan como una sola cosa.
 * ================================================================== */

.cia-pubs
{
	margin: 26px 0 0;
}

.cia-pub-persona
{
	margin: 0 0 34px;
	padding: 0 0 30px;
	border-bottom: 1px solid #e6ebe8;
}

.cia-pub-persona:last-child
{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.cia-pub-persona-cab
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 0 0 16px;
	padding: 11px 14px;
	background: #f4f8f6;
	border-left: 4px solid #00734B;
	border-radius: 0 3px 3px 0;
}

.cia-pub-persona-foto
{
	flex: 0 0 auto;
	line-height: 0;
}

.cia-pub-persona-foto img
{
	display: block;
	width: 52px;
	height: 52px;
	object-fit: cover;
	object-position: center top;
	border-radius: 50%;
	background: #e8eeea;
}

.cia-pub-persona-datos
{
	flex: 1 1 200px;
	min-width: 0;
}

.cia-pub-persona-cab h2,
div.columna-principal .entry-content .cia-pub-persona-cab h2
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.08em;
	line-height: 1.3;
	color: #003521;
}

.cia-pub-persona-cab h2 a
{
	color: #003521;
	text-decoration: none;
}

.cia-pub-persona-cab h2 a:hover,
.cia-pub-persona-cab h2 a:focus
{
	color: #00734B;
	text-decoration: underline;
}

.cia-pub-cargo
{
	margin: 2px 0 0;
	font-size: .88em;
	color: #6b7973;
}

.cia-pub-persona-cab .cia-perfil-cuenta
{
	margin-left: auto;
	white-space: nowrap;
}

/* El apartado propio de la pagina -- hoy el catalogo en PDF. */
.cia-pub-nota
{
	margin: 0 0 26px;
}

.cia-pub-persona[hidden],
.cia-citas li[hidden]
{
	display: none !important;
}

@media screen and (max-width: 640px) {
	.cia-pub-persona          { margin-bottom: 26px; padding-bottom: 22px; }
	.cia-pub-persona-cab      { padding: 10px 12px; gap: 6px 12px; }
	.cia-pub-persona-foto img { width: 44px; height: 44px; }
	.cia-pub-persona-cab .cia-perfil-cuenta { margin-left: 0; }
}

/* Aviso de peso junto al boton del catalogo, en Publicaciones. */
.cia-catalogo-peso
{
	display: inline-block;
	margin-left: 10px;
	font-size: .85em;
	color: #6b7973;
}


/* ==================================================================
 * 44. Rejilla de fotografias verticales
 *
 * Las fotos de campo del Laboratorio de Recursos Naturales vienen de
 * telefono en vertical, algunas de 1:2. En la rejilla normal (seccion
 * 30) se recortan a 4:3 y de un perfil de suelo solo queda una franja,
 * asi que estas se encajan en 3:4.
 *
 * Las columnas se acomodan solas segun quepan, y cada figura tiene un
 * ancho maximo para que una sola foto no ocupe toda la columna.
 * ================================================================== */

.cia-galeria--altas
{
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
}

.cia-galeria--altas figure
{
	margin: 0;
	max-width: 340px;
	text-align: left;
}

.cia-galeria--altas img,
div.columna-principal .entry-content .cia-galeria--altas img
{
	width: 100%;
	max-width: none;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 3px;
	margin: 0;
}

.cia-galeria--altas figcaption
{
	max-width: none;
	margin: 10px 0 0;
	padding-top: 9px;
	border-top: 2px solid #cfe0d7;
	color: #33403a;
	font-size: .86em;
	line-height: 1.5;
	text-align: left;
}

@media screen and (max-width: 520px) {
	.cia-galeria--altas        { grid-template-columns: 1fr; }
	.cia-galeria--altas figure { max-width: none; }
}