/**
 * EDUCA FIDYS · Bloque "Ecosistemas"
 *
 * Depende de educa-fidys-base.css (tokens, botones e icono circular).
 * Versión: 2.0.3
 *
 * 2.0.3 - Títulos de las bandas alineados arriba en lugar de centrados.
 *
 * 2.0.2 - Fila superior en rejilla con subgrid: las bandas azules de Futuro y
 *         de las iniciativas miden lo mismo aunque alguna no lleve
 *         subtítulo. Márgenes de título y subtítulo blindados frente a
 *         Astra. En la fila inferior, las características de Pulso Médico y
 *         de Educa-med se apoyan en el pie de su tarjeta y quedan alineadas.
 *
 * 2.0.1 - Subrayado al pasar por los títulos enlazados (el reset base lo
 *         anulaba). El icono de transferencia respeta «fondo sólido» y la
 *         variante SEMERGEN.
 *
 * 2.0.0 - Diseño en dos filas. Fila superior: Sanidad en Clave de Futuro e
 *         iniciativas con banda de cabecera (.fidys-pilar). Separador con
 *         flecha descendente y texto puente. Fila inferior: transferencia
 *         en formato apaisado (.fidys-transferencia, ahora una tarjeta por
 *         elemento) y Educa-med. Características con icono a la izquierda.
 *
 * 1.2.1 - El botón de Educa-med no parte en dos líneas.
 * 1.2.0 - Tarjetas de transferencia como enlace completo con variantes de
 *         color en hover (corporativo y SEMERGEN).
 * 1.1.0 - V2: logotipos en transferencia, título de Futuro enlazable y
 *         botón interior en la tarjeta de Educa-med.
 * 1.0.5 - Se restituye el margen superior de las características.
 * 1.0.4 - Estilos de la ilustración SVG de Educa-med.
 * 1.0.3 - Hover de fondo en las tarjetas de Jornadas y Retos.
 * 1.0.2 - Sin subrayado heredado de Astra; trazo del glifo de Educa-med.
 * 1.0.1 - Estados hover y focus en Educa-med.
 */

/* -------------------------------------------------------------------------
   1. Contenedor, titular y panel
   ---------------------------------------------------------------------- */

.fidys-ecosistemas {
	padding-bottom: 36px;
	padding-inline: var(--fidys-bleed);
	color: var(--fidys-color-primary);
	font-family: var(--fidys-font);
}

.fidys-ecosistemas__titular {
	max-width: var(--fidys-max);
	margin: 18px auto 14px;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

.fidys-ecosistemas__titular-destacado {
	color: var(--fidys-color-accent);
}

/* Astra subraya los enlaces del contenido; se neutraliza con especificidad
   suficiente para no recurrir a !important. */
.fidys-ecosistemas a[class],
.fidys-ecosistemas a[class]:hover,
.fidys-ecosistemas a[class]:focus,
.fidys-ecosistemas a[class]:focus-visible {
	text-decoration: none;
}

.fidys-ecosistemas__panel {
	max-width: var(--fidys-max);
	margin-inline: auto;
	padding: 18px;
	border: 1px solid var(--fidys-color-line-soft);
	border-radius: var(--fidys-radius-l);
	background: var(--fidys-color-white);
	box-shadow: var(--fidys-shadow-card);
}

/* Filas: el primer elemento de la superior (Futuro) es algo más ancho;
   el resto reparte el espacio a partes iguales sea cual sea su número. */
.fidys-ecosistemas__fila {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: 16px;
}

/* Fila superior: rejilla de columnas finas en la que cada tarjeta ocupa un
   número de ellas según lo que necesita (Futuro 6, iniciativa con botones 5,
   iniciativa sin botones 4), como en el diseño. Cada tarjeta ocupa dos
   filas, banda y cuerpo, y las comparte con sus vecinas mediante subgrid:
   así todas las bandas miden lo que mida la más alta. */
.fidys-ecosistemas__fila--superior {
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 16px;
	row-gap: 0;
}

/* Selector con la clase de la tarjeta para pesar más que la regla base de
   .fidys-futuro y .fidys-pilar (display: flex), que va después. */
.fidys-ecosistemas__fila--superior > .fidys-futuro,
.fidys-ecosistemas__fila--superior > .fidys-pilar {
	display: grid;
	grid-column: span 4;
	grid-row: span 2;
	grid-template-rows: subgrid;
	row-gap: 0;
	min-width: 0;
}

.fidys-ecosistemas__fila--superior > .fidys-futuro {
	grid-column: span 6;
}

.fidys-ecosistemas__fila--superior > .fidys-pilar--con-botones {
	grid-column: span 5;
}

/* -------------------------------------------------------------------------
   2. Separador entre filas
   ---------------------------------------------------------------------- */

.fidys-ecosistemas__separador {
	display: grid;
	justify-items: center;
	margin: 14px 0 16px;
}

.fidys-ecosistemas__flecha {
	display: grid;
	place-items: center;
	margin-bottom: 4px;
	color: var(--fidys-color-primary);
}

.fidys-ecosistemas__flecha .colorable-icon {
	transform: rotate(90deg);
}

.fidys-ecosistemas__puente {
	justify-self: stretch;
	margin: 0;
	padding-top: 8px;
	border-top: 1px solid var(--fidys-color-line-soft);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

/* -------------------------------------------------------------------------
   3. Fila superior · Cabecera compartida (Futuro e iniciativas)
   ---------------------------------------------------------------------- */

.fidys-futuro,
.fidys-pilar {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--fidys-color-line);
	border-radius: 13px;
	background: var(--fidys-color-white);
}

.fidys-futuro__cabecera,
.fidys-pilar__cabecera {
	display: grid;
	/* Títulos arriba: con las bandas igualadas, centrar dejaría cada título
	   a una altura distinta según lleve subtítulo o no. */
	align-content: start;
	min-height: 92px;
	padding: 16px 15px;
	background: var(--fidys-gradient-primary);
	color: var(--fidys-color-white);
	text-align: center;
}

.fidys-ecosistemas .fidys-futuro__titulo,
.fidys-ecosistemas .fidys-pilar__titulo {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--fidys-color-white);
}

.fidys-futuro__enlace,
.fidys-pilar__enlace {
	color: inherit;
}

/* a.clase sube la especificidad por encima del reset de subrayado de la
   hoja base ([class*="fidys-"] a[class]:hover). */
.fidys-ecosistemas a.fidys-futuro__enlace:hover,
.fidys-ecosistemas a.fidys-futuro__enlace:focus-visible,
.fidys-ecosistemas a.fidys-pilar__enlace:hover,
.fidys-ecosistemas a.fidys-pilar__enlace:focus-visible {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 5px;
}

.fidys-ecosistemas .fidys-futuro__subtitulo,
.fidys-ecosistemas .fidys-pilar__subtitulo {
	margin: 5px 0 0;
	font-size: 13px;
	color: var(--fidys-color-tint);
}

/* -------------------------------------------------------------------------
   4. Sanidad en Clave de Futuro
   ---------------------------------------------------------------------- */

.fidys-futuro__cuerpo {
	flex: 1 1 auto;
}

.fidys-futuro__texto {
	margin: 0;
	padding: 18px 30px 6px;
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
}

.fidys-futuro__tarjetas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 12px;
}

.fidys-tarjeta {
	display: flex;
	gap: 14px;
	padding: 14px;
	border: 1px solid var(--fidys-color-line);
	border-radius: var(--fidys-radius-m);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

a.fidys-tarjeta:hover,
a.fidys-tarjeta:focus-visible {
	background: var(--fidys-color-surface);
	color: inherit;
}

.fidys-tarjeta__contenido {
	display: grid;
	align-content: start;
	gap: 4px;
}

.fidys-tarjeta__titulo {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: uppercase;
}

.fidys-tarjeta__texto {
	font-size: 12px;
	line-height: 1.55;
	color: var(--fidys-color-secondary);
}

/* -------------------------------------------------------------------------
   5. Iniciativas (Alianza, Aula…)
   ---------------------------------------------------------------------- */

.fidys-pilar__cuerpo {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	padding: 22px 26px 26px;
	text-align: center;
}

.fidys-pilar__logo {
	display: block;
	width: 112px;
	height: 112px;
	object-fit: contain;
}

.fidys-pilar__logo--redondo {
	border-radius: 50%;
}

.fidys-pilar__texto {
	max-width: 460px;
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--fidys-color-secondary);
}

.fidys-pilar__botones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* -------------------------------------------------------------------------
   6. Botón compacto con contorno (iniciativas y transferencia)
   ---------------------------------------------------------------------- */

.fidys-ecosistemas .fidys-pilar__boton,
.fidys-ecosistemas .fidys-transferencia__boton {
	justify-content: center;
	gap: 12px;
	min-width: 0;
	padding: 11px 22px;
	border-width: 1.5px;
	font-size: 12px;
	font-weight: 700;
}

.fidys-ecosistemas .fidys-pilar__boton .colorable-icon,
.fidys-ecosistemas .fidys-transferencia__boton .colorable-icon {
	width: 16px;
	height: 16px;
}

/* -------------------------------------------------------------------------
   7. Fila inferior · Transferencia (Pulso Médico)
   ---------------------------------------------------------------------- */

.fidys-transferencia {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	grid-template-areas:
		"marca contenido"
		"rasgos rasgos";
	align-content: start;
	column-gap: 0;
	padding: 24px 26px 18px;
	border: 1px solid var(--fidys-color-line);
	border-radius: 12px;
	background: var(--fidys-color-surface);
}

.fidys-transferencia--semergen {
	border-color: var(--fidys-line-semergen);
	background: var(--fidys-surface-semergen);
}

.fidys-transferencia__marca {
	grid-area: marca;
	display: grid;
	place-items: center;
	padding-right: 24px;
}

.fidys-transferencia__logo {
	display: block;
	width: 120px;
	height: 120px;
	object-fit: contain;
}

.fidys-transferencia__logo--redondo {
	border-radius: 50%;
}

.fidys-transferencia .fidys-transferencia__icono {
	width: 120px;
	height: 120px;
	background: var(--fidys-color-white);
}

.fidys-transferencia .fidys-transferencia__icono.fidys-icono-circular--solido {
	border-color: transparent;
	background: var(--fidys-color-primary);
	color: var(--fidys-color-white);
}

.fidys-transferencia--semergen .fidys-transferencia__icono {
	color: var(--fidys-color-semergen);
}

.fidys-transferencia--semergen .fidys-transferencia__icono.fidys-icono-circular--solido {
	background: var(--fidys-color-semergen);
	color: var(--fidys-color-white);
}

.fidys-transferencia .fidys-transferencia__icono .colorable-icon {
	width: 40px;
	height: 40px;
}

.fidys-transferencia__contenido {
	grid-area: contenido;
	padding-left: 26px;
	border-left: 1px solid var(--fidys-color-line);
}

.fidys-transferencia__titulo {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--fidys-color-primary);
}

.fidys-transferencia__subtitulo {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.fidys-transferencia__texto {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--fidys-color-secondary);
}

.fidys-ecosistemas .fidys-transferencia__boton {
	margin-top: 16px;
}

.fidys-transferencia--semergen .fidys-transferencia__boton {
	border-color: var(--fidys-color-semergen);
	color: var(--fidys-color-semergen);
}

.fidys-transferencia__caracteristicas {
	grid-area: rasgos;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	padding: 0;
	list-style: none;
}

/* Prevalece sobre el reset de listas de la hoja base. */
.fidys-ecosistemas ul.fidys-transferencia__caracteristicas {
	margin: 20px 0 0;
}

/* -------------------------------------------------------------------------
   8. Educa-med
   ---------------------------------------------------------------------- */

.fidys-educamed {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-content: start;
	gap: 10px 20px;
	padding: 24px 26px 18px;
	border-radius: 12px;
	background: var(--fidys-gradient-primary);
	color: var(--fidys-color-white);
}

.fidys-educamed__titulo {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--fidys-color-white);
}

.fidys-educamed__texto {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--fidys-color-tint);
}

.fidys-educamed__enlace {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	white-space: nowrap;
	padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 5px;
	color: var(--fidys-color-white);
	font-size: 12px;
	font-weight: 700;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.fidys-ecosistemas .fidys-educamed__enlace:hover,
.fidys-ecosistemas .fidys-educamed__enlace:focus-visible {
	background: var(--fidys-color-white);
	color: var(--fidys-color-primary);
}

.fidys-educamed__enlace .colorable-icon {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.fidys-educamed__enlace:hover .colorable-icon {
	transform: translateX(4px);
}

.fidys-educamed__visual {
	display: grid;
	place-items: center;
	min-height: 120px;
}

.fidys-educamed__ilustracion {
	width: 100%;
	max-width: 210px;
	height: auto;
}

.fidys-educamed__imagen {
	width: 100%;
	max-width: 210px;
	height: auto;
	border-radius: var(--fidys-radius-s);
}

/* Partes de la ilustración. Los colores viven aquí, no en el marcado. */
.fidys-ilustracion__marco {
	fill: rgba(255, 255, 255, 0.12);
	stroke: rgba(255, 255, 255, 0.55);
	stroke-width: 2;
}

.fidys-ilustracion__base {
	fill: rgba(255, 255, 255, 0.3);
}

.fidys-ilustracion__altavoz {
	fill: rgba(255, 255, 255, 0.55);
}

.fidys-ilustracion__pantalla {
	fill: var(--fidys-color-white);
}

.fidys-ilustracion__acento {
	fill: var(--fidys-color-primary);
}

.fidys-ilustracion__linea {
	fill: var(--fidys-color-line);
}

.fidys-ilustracion__tarjeta {
	fill: none;
	stroke: var(--fidys-color-line);
	stroke-width: 1.5;
}

.fidys-educamed__caracteristicas {
	grid-column: 1 / -1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	padding: 0;
	list-style: none;
}

/* Prevalece sobre el reset de listas de la hoja base. */
.fidys-ecosistemas ul.fidys-educamed__caracteristicas {
	margin: 10px 0 0;
}

/* -------------------------------------------------------------------------
   9. Características (compartido)
   ---------------------------------------------------------------------- */

.fidys-transferencia__caracteristica,
.fidys-educamed__caracteristica {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 6px 10px;
	font-size: 12px;
	line-height: 1.35;
}

.fidys-transferencia__caracteristica {
	border-right: 1px solid var(--fidys-color-line);
	color: var(--fidys-color-secondary);
}

.fidys-educamed__caracteristica {
	border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.fidys-transferencia__caracteristica:last-child,
.fidys-educamed__caracteristica:last-child {
	border-right: 0;
}

.fidys-transferencia__caracteristica .colorable-icon,
.fidys-educamed__caracteristica .colorable-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}

.fidys-transferencia__caracteristica .colorable-icon {
	color: var(--fidys-color-primary);
}

/* -------------------------------------------------------------------------
   10. Responsive
   ---------------------------------------------------------------------- */

/* Portátil: Futuro ocupa la fila superior completa y las iniciativas se
   reparten debajo; la fila inferior pasa a una columna. */
@media (max-width: 1200px) {

	/* Futuro ocupa su propia fila y las iniciativas se reparten debajo, de
	   dos en dos, con las bandas igualadas entre ellas. */
	.fidys-ecosistemas__fila--superior {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
	}

	.fidys-ecosistemas__fila--superior > .fidys-pilar,
	.fidys-ecosistemas__fila--superior > .fidys-pilar--con-botones {
		grid-column: auto;
	}

	/* La separación entre filas de tarjetas va en margen y no en row-gap,
	   que también separaría la banda del cuerpo de cada tarjeta. */
	.fidys-ecosistemas__fila--superior > .fidys-futuro,
	.fidys-ecosistemas__fila--superior > .fidys-pilar:not(:nth-last-child(-n + 2)) {
		margin-bottom: 16px;
	}

	.fidys-ecosistemas__fila--superior > .fidys-futuro {
		grid-column: 1 / -1;
	}

	.fidys-ecosistemas__fila--inferior {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px) {

	.fidys-ecosistemas__panel {
		padding: 12px;
	}

	/* En una columna no hay bandas vecinas que igualar. */
	.fidys-ecosistemas__fila--superior {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.fidys-ecosistemas__fila--superior > .fidys-futuro,
	.fidys-ecosistemas__fila--superior > .fidys-pilar {
		display: flex;
		flex-direction: column;
		margin-bottom: 0;
	}

	.fidys-futuro__texto {
		padding-inline: 18px;
	}

	.fidys-futuro__tarjetas,
	.fidys-educamed {
		grid-template-columns: minmax(0, 1fr);
	}

	.fidys-futuro__titulo,
	.fidys-pilar__titulo {
		font-size: 19px;
	}

	.fidys-transferencia {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"marca"
			"contenido"
			"rasgos";
		padding: 22px 20px 16px;
		text-align: center;
	}

	.fidys-transferencia__marca {
		padding: 0 0 18px;
	}

	.fidys-transferencia__logo,
	.fidys-transferencia .fidys-transferencia__icono {
		width: 96px;
		height: 96px;
	}

	.fidys-transferencia__contenido {
		padding: 18px 0 0;
		border-top: 1px solid var(--fidys-color-line);
		border-left: 0;
	}

	.fidys-educamed {
		padding: 22px 20px 16px;
	}

	.fidys-educamed__visual {
		min-height: 0;
	}

	/* Las características pasan a rejilla de dos columnas sin separadores. */
	.fidys-transferencia__caracteristicas,
	.fidys-educamed__caracteristicas {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.fidys-transferencia__caracteristica,
	.fidys-educamed__caracteristica {
		justify-content: flex-start;
		border-right: 0;
		text-align: left;
	}
}

/* -------------------------------------------------------------------------
   11. Características al pie (2.0.2)
   ---------------------------------------------------------------------- */

/* Con Pulso Médico y Educa-med lado a lado, las dos tarjetas miden lo mismo:
   la franja de características se lleva al pie de cada una para que queden
   a la misma altura. */
@media (min-width: 1201px) {

	.fidys-transferencia,
	.fidys-educamed {
		grid-template-rows: 1fr auto;
		align-content: stretch;
	}
}