/**
 * EDUCA FIDYS · Bloque "Portada de iniciativa"
 *
 * Depende de educa-fidys-base.css (tokens y utilidades).
 * Versión: 1.11.0
 *
 * 1.11.0 - Estado del panel enlazable: flecha de los botones, píldora que se
 *          invierte al pasar el ratón o con el foco, y contorno de foco
 *          visible. Las variantes SEMERGEN y dorada invierten a su color.
 *          Los estados sin enlace no cambian.
 *
 * 1.10.0 - Corrección: la regla de "destacado" que se insertó en 1.4.0 se
 *          escribió con un reemplazo sobre ".fidys-portada__sello-pildora {"
 *          que casó con las tres apariciones del selector en el archivo, no
 *          solo con la base. En la variante SEMERGEN el comentario y la regla
 *          quedaron incrustados en mitad del selector, que se partió en
 *          ".fidys-portada--semergen" y ".fidys-portada__sello-pildora": esta
 *          última, sin variante y declarada después de la base, teñía de
 *          naranja las píldoras de TODAS las portadas. Dentro de la consulta
 *          de 650 px la copia era inocua, porque repetía los valores base,
 *          pero rompía la indentación. Se retiran ambas copias y se
 *          restauran los dos selectores. La variante dorada no estaba
 *          afectada: su regla gana por especificidad.
 *
 * 1.9.0 - Sello enlazable: el ancla envuelve la imagen y, en el estilo Marca,
 *         su superficie activa se extiende al disco entero, el mismo
 *         planteamiento de la tarjeta enlazable de la rejilla. El foco se
 *         dibuja sobre el sello, no sobre la imagen, porque el sello es el
 *         objeto que el visitante percibe. Los sellos sin enlace no cambian.
 *
 * 1.8.0 - Lateral en panel de datos con imagen, para las portadas de
 *         encuentro. Énfasis del titular en segunda línea y texto
 *         secundario bajo la entrada.
 *
 * 1.7.0 - El fondo de disco de las variantes de co-branding se limita al
 *         estilo Escudo, que es el único que lleva disco. En Medalla y en
 *         Esfera reaparecía por encima del "background: none" del estilo,
 *         al empatar en especificidad y declararse después: en la variante
 *         dorada dejaba la estrella dorada sobre disco dorado, invisible.
 *
 * 1.6.0 - Fondo del disco seleccionable en el estilo Marca.
 *
 * 1.5.0 - Estilo de sello "marca": disco blanco con órbitas y una imagen en
 *         lugar de icono, para las identidades propias.
 *
 * 1.4.0 - Estilo de sello "medalla" (doble aro dorado, degradado cálido e
 *         icono sin disco), variante de co-branding dorada y línea de sello
 *         con énfasis "destacado".
 *
 * 1.3.0 - El botón primario adopta el verde en la variante SEMERGEN. Antes
 *         quedaba en azul corporativo junto a un sello verde y naranja.
 *
 * 1.2.0 - Dos estilos de sello: "escudo" (denominación apilada sobre disco
 *         blanco, en mayúsculas) y "esfera" (icono, mensaje y píldora sobre
 *         degradado, sin órbitas propias). Las mayúsculas pasan a ser
 *         propias del escudo: en la esfera el mensaje es una frase.
 *
 * 1.1.0 - Órbitas en azul corporativo, líneas fuertes del sello en
 *         mayúsculas y color de énfasis del titular declarado en el bloque.
 * 1.0.0 - Versión inicial.
 */

.fidys-portada {
	position: relative;
	padding: 55px var(--fidys-bleed) 75px;
	overflow: hidden;
	background: linear-gradient(120deg, var(--fidys-color-white), var(--fidys-color-surface));
	color: var(--fidys-color-primary);
	font-family: var(--fidys-font);
}

/* Órbitas decorativas. Sustituyen a las del diseño original, que se apoyaban
   en cuatro box-shadow concéntricos sobre un único pseudoelemento. */
.fidys-portada::after {
	content: "";
	position: absolute;
	right: -80px;
	bottom: -150px;
	width: 620px;
	height: 620px;
	border: 1px dashed rgba(71, 121, 158, 0.35);
	border-radius: 50%;
	box-shadow:
		0 0 0 46px rgba(255, 255, 255, 0.55),
		0 0 0 47px rgba(0, 59, 92, 0.14),
		0 0 0 102px rgba(255, 255, 255, 0.55),
		0 0 0 103px rgba(71, 121, 158, 0.16);
	pointer-events: none;
}

.fidys-portada__interior {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 0.9fr;
	gap: 70px;
	align-items: center;
	max-width: var(--fidys-max);
	min-height: 540px;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   1. Migas de pan
   ---------------------------------------------------------------------- */

.fidys-portada__migas {
	margin-bottom: 30px;
}

.fidys-portada__migas-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: var(--fidys-color-secondary);
}

.fidys-portada__miga:not(:last-child)::after {
	content: "·";
	margin-left: 8px;
	color: var(--fidys-color-accent);
}

.fidys-portada__miga-enlace {
	color: var(--fidys-color-secondary);
}

.fidys-portada__miga-enlace:hover,
.fidys-portada__miga-enlace:focus-visible {
	color: var(--fidys-color-primary);
	text-decoration: underline;
}

.fidys-portada__miga-actual {
	font-weight: 700;
	color: var(--fidys-color-primary);
}

/* -------------------------------------------------------------------------
   2. Texto
   ---------------------------------------------------------------------- */

.fidys-portada__titulo {
	margin: 20px 0;
	font-size: clamp(42px, 5vw, 74px);
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: -3px;
	color: var(--fidys-color-primary);
}

/* El énfasis se declara aquí además de en la hoja base, para poder ajustar
   el tono de la portada sin afectar al resto de titulares del sitio. */
.fidys-portada__titulo em {
	font-style: normal;
	color: var(--fidys-color-accent);
}

/* En el texto de entrada, <strong> marca el nombre de una marca propia. */
.fidys-portada__lead strong {
	font-weight: 700;
	color: var(--fidys-color-primary);
}

.fidys-portada__lead {
	max-width: 650px;
	margin: 0;
	font-size: 17px;
	line-height: 1.75;
	color: var(--fidys-color-secondary);
}

/* Segundo párrafo de la entrada, para el matiz que no cabe en el primero. */
.fidys-portada__secundario {
	max-width: 650px;
	margin: 18px 0 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--fidys-color-secondary);
}

/* Énfasis en segunda línea: el titular se parte en nombre y subtítulo, que
   es como se presentan los retos y los encuentros. */
.fidys-portada__titulo--bloque em {
	display: block;
	margin-top: 12px;
	font-size: 0.55em;
	letter-spacing: -1.5px;
}

.fidys-portada__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

/* -------------------------------------------------------------------------
   3. Sello circular
   ---------------------------------------------------------------------- */

.fidys-portada__sello {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	justify-self: end;
	width: min(460px, 42vw);
	aspect-ratio: 1;
	padding: 60px;
	border-radius: 50%;
	background: var(--fidys-color-white);
	box-shadow: 0 25px 80px rgba(0, 59, 92, 0.14);
	line-height: 1;
	text-align: center;
}

.fidys-portada__sello::before,
.fidys-portada__sello::after {
	content: "";
	position: absolute;
	inset: -35px;
	border: 1px dashed rgba(71, 121, 158, 0.45);
	border-radius: 50%;
	pointer-events: none;
}

.fidys-portada__sello::after {
	inset: -75px;
	border-color: rgba(0, 59, 92, 0.22);
}

.fidys-portada__sello-icono {
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	margin-bottom: 24px;
	border-radius: 50%;
	background: var(--fidys-color-primary);
	color: var(--fidys-color-white);
}

.fidys-portada__sello-fuerte {
	font-size: clamp(22px, 2.4vw, 31px);
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--fidys-color-primary);
}

.fidys-portada__sello-sutil {
	margin: 11px 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--fidys-color-secondary);
}

.fidys-portada__sello-pie {
	margin-top: 24px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--fidys-color-accent);
}

/* -------------------------------------------------------------------------
   3 bis. Lateral en panel
   ---------------------------------------------------------------------- */

/* Alternativa al sello para las portadas de encuentro: una tarjeta con la
   imagen del reto arriba y los datos debajo. Así la imagen entra sin
   desplazar la información que el visitante viene a buscar. */
.fidys-portada__panel {
	position: relative;
	z-index: 1;
	justify-self: end;
	width: 100%;
	max-width: 520px;
	border: 1px solid var(--fidys-color-line);
	border-top: 6px solid var(--fidys-color-accent);
	background: var(--fidys-color-white);
	box-shadow: 0 24px 70px rgba(0, 59, 92, 0.11);
}

.fidys-portada__panel-imagen {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.fidys-portada__panel-cuerpo {
	padding: 34px;
}

.fidys-portada__panel-etiqueta {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--fidys-color-accent);
}

.fidys-portada__panel-titulo {
	margin: 14px 0 26px;
	font-size: clamp(26px, 2.6vw, 33px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -1.2px;
	color: var(--fidys-color-primary);
}

.fidys-portada__datos {
	display: grid;
	gap: 14px;
	margin: 0;
}

.fidys-portada__dato {
	display: grid;
	grid-template-columns: 95px 1fr;
	gap: 15px;
	padding-top: 13px;
	border-top: 1px solid var(--fidys-color-line);
	font-size: 13px;
	line-height: 1.55;
}

.fidys-portada__dato-clave {
	font-weight: 700;
	color: var(--fidys-color-accent);
}

.fidys-portada__dato-valor {
	margin: 0;
	color: var(--fidys-color-secondary);
}

.fidys-portada__panel-estado {
	display: inline-flex;
	margin-top: 24px;
	padding: 10px 15px;
	border-radius: 30px;
	background: var(--fidys-color-surface);
	color: var(--fidys-color-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

/*
 * Estado enlazado. Conserva la píldora y añade la flecha de los botones como
 * señal de que se puede pulsar. Al pasar el ratón o con el foco la píldora
 * se invierte: el color del texto pasa al fondo. No se usa subrayado porque
 * el reset de la base lo anula en los enlaces con clase.
 *
 * Tres clases: vence a las reglas de variante (dos clases) sin !important.
 */
.fidys-portada__panel-estado--enlace {
	align-items: center;
	gap: 8px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.fidys-portada__panel-estado--enlace .colorable-icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	transition: transform 0.25s ease;
}

.fidys-portada .fidys-portada__panel-estado--enlace:hover,
.fidys-portada .fidys-portada__panel-estado--enlace:focus-visible {
	background: var(--fidys-color-accent);
	color: var(--fidys-color-white);
}

.fidys-portada .fidys-portada__panel-estado--enlace:focus-visible {
	outline: 2px solid var(--fidys-color-primary);
	outline-offset: 3px;
}

.fidys-portada__panel-estado--enlace:hover .colorable-icon,
.fidys-portada__panel-estado--enlace:focus-visible .colorable-icon {
	transform: translateX(3px);
}

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

	.fidys-portada__panel-estado--enlace,
	.fidys-portada__panel-estado--enlace .colorable-icon {
		transition: none;
	}

	.fidys-portada__panel-estado--enlace:hover .colorable-icon,
	.fidys-portada__panel-estado--enlace:focus-visible .colorable-icon {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   4. Estilos de sello
   ---------------------------------------------------------------------- */

/* Escudo: denominación apilada. Las mayúsculas son de este estilo, no del
   bloque: en la esfera el texto fuerte es una frase y no debe forzarse. */
.fidys-portada__sello--escudo .fidys-portada__sello-fuerte,
.fidys-portada__sello--medalla .fidys-portada__sello-fuerte {
	text-transform: uppercase;
}

/* Esfera: mensaje sobre degradado. Sustituye al disco blanco con órbitas. */
.fidys-portada__sello--esfera {
	/* El extremo del degradado es el accent aclarado al 45 % con blanco. */
	background: radial-gradient(circle at 35% 30%, var(--fidys-color-white) 0 10%, var(--fidys-color-tint) 40%, #9ab6ca);
	box-shadow: 0 25px 70px rgba(0, 59, 92, 0.14);
}

/* La esfera no lleva órbitas propias: ya las aporta el fondo de la portada. */
.fidys-portada__sello--esfera::before,
.fidys-portada__sello--esfera::after {
	display: none;
}

/* Sin disco de fondo: el icono se apoya directamente en el degradado. */
.fidys-portada__sello--esfera .fidys-portada__sello-icono {
	width: auto;
	height: auto;
	margin-bottom: 28px;
	background: none;
	color: var(--fidys-color-primary);
}

.fidys-portada__sello--esfera .fidys-portada__sello-icono .colorable-icon {
	width: 62px;
	height: 62px;
}

.fidys-portada__sello--esfera .fidys-portada__sello-fuerte {
	font-size: clamp(19px, 2vw, 25px);
	line-height: 1.25;
	letter-spacing: -0.3px;
}

/* Jerarquía superior a "fuerte": la cifra o palabra que remata el sello. */
.fidys-portada__sello-destacado {
	font-size: clamp(38px, 4vw, 54px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -1.5px;
	color: var(--fidys-color-primary);
}

.fidys-portada__sello-pildora {
	margin-top: 28px;
	padding: 11px 17px;
	border-radius: 22px;
	background: var(--fidys-color-primary);
	color: var(--fidys-color-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Medalla: doble aro dorado y degradado cálido. Los aros van en box-shadow
   y no en pseudoelementos, para que acompañen al borde sin separarse. */
.fidys-portada__sello--medalla {
	border: 2px solid var(--fidys-line-oro);
	background: radial-gradient(circle at 35% 25%, var(--fidys-color-white), #efe1cc);
	box-shadow:
		0 28px 75px rgba(81, 57, 23, 0.17),
		0 0 0 22px rgba(255, 255, 255, 0.5),
		0 0 0 23px var(--fidys-line-oro);
}

.fidys-portada__sello--medalla::before,
.fidys-portada__sello--medalla::after {
	display: none;
}

.fidys-portada__sello--medalla .fidys-portada__sello-icono {
	width: auto;
	height: auto;
	margin-bottom: 22px;
	background: none;
	color: var(--fidys-color-oro);
}

.fidys-portada__sello--medalla .fidys-portada__sello-icono .colorable-icon {
	width: 58px;
	height: 58px;
}

.fidys-portada__sello--medalla .fidys-portada__sello-fuerte {
	font-size: clamp(19px, 2vw, 26px);
	letter-spacing: 1px;
}

.fidys-portada__sello--medalla .fidys-portada__sello-sutil {
	font-size: 13px;
	letter-spacing: 1.5px;
	color: var(--fidys-color-primary);
}

/* Marca: el sello no es una superficie sino un encuadre. El disco blanco y
   el aro van en los pseudoelementos y la imagen flota encima. */
.fidys-portada__sello--marca {
	padding: 0;
	background: none;
	box-shadow: none;
}

.fidys-portada__sello--marca::before {
	inset: 8%;
	border: 0;
	background: var(--fidys-color-white);
	box-shadow: 0 30px 80px rgba(0, 59, 92, 0.12);
}

.fidys-portada__sello--marca::after {
	inset: 0;
	border: 1px solid rgba(71, 121, 158, 0.35);
	border-style: solid;
}

/* Disco en color. La imagen tiene que subirse ya en su versión clara: no se
   aclara con filtros, que sobre un isotipo de varias formas iguala todas y
   hace desaparecer la marca contra su propio fondo. */
.fidys-portada__sello--marca.fidys-portada__sello--disco-azul::before {
	background: var(--fidys-color-primary);
}

.fidys-portada__sello--marca.fidys-portada__sello--disco-azul::after {
	border-color: rgba(0, 59, 92, 0.25);
}

.fidys-portada__sello-imagen {
	position: relative;
	display: block;
	width: 72%;
	height: auto;
	filter: drop-shadow(0 20px 25px rgba(0, 59, 92, 0.15));
}

/* -------------------------------------------------------------------------
   4 bis. Sello enlazado
   ---------------------------------------------------------------------- */

/* El ancla envuelve la imagen, que es la que aporta el nombre accesible con
   su texto alternativo. El ancho pasa del img al ancla para que el 72% se
   siga midiendo contra el sello. */
.fidys-portada__sello-enlace {
	display: block;
	width: 72%;
	border-radius: 10px;
	line-height: 0;
	color: inherit;
}

/* position: static es deliberado: el ::after de más abajo tiene que
   posicionarse contra el sello, no contra el ancla. */
.fidys-portada__sello--enlazado .fidys-portada__sello-enlace {
	position: static;
}

.fidys-portada__sello-enlace .fidys-portada__sello-imagen {
	width: 100%;
	transition: transform 0.25s ease, filter 0.25s ease;
}

/* La superficie activa se extiende al disco entero solo en Marca, donde el
   sello es la imagen y nada más. En los estilos con líneas de texto el enlace
   se queda en la imagen: extenderlo capturaría el texto e impediría
   seleccionarlo. Los pseudoelementos decorativos del sello llevan
   pointer-events: none, así que no interceptan la pulsación. */
.fidys-portada__sello--marca .fidys-portada__sello-enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 50%;
}

.fidys-portada__sello-enlace:hover .fidys-portada__sello-imagen,
.fidys-portada__sello--enlazado:focus-within .fidys-portada__sello-imagen {
	transform: translateY(-6px) scale(1.02);
	filter: drop-shadow(0 28px 34px rgba(0, 59, 92, 0.22));
}

/* El foco llega al ancla interior, así que se dibuja sobre el sello. */
.fidys-portada__sello--enlazado:focus-within {
	outline: 2px solid var(--fidys-color-accent);
	outline-offset: 6px;
}

.fidys-portada__sello-enlace:focus-visible {
	outline: none;
}

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

	.fidys-portada__sello-enlace .fidys-portada__sello-imagen {
		transition: none;
	}

	.fidys-portada__sello-enlace:hover .fidys-portada__sello-imagen,
	.fidys-portada__sello--enlazado:focus-within .fidys-portada__sello-imagen {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   5. Variantes de co-branding
   ---------------------------------------------------------------------- */

.fidys-portada--semergen {
	background: linear-gradient(120deg, var(--fidys-color-white), var(--fidys-surface-semergen));
}

.fidys-portada--semergen .fidys-portada__sello {
	box-shadow:
		0 0 0 4px rgba(255, 118, 0, 0.14),
		0 25px 80px rgba(0, 59, 92, 0.14);
}

/* El disco de color solo existe en el estilo Escudo. En los demás el icono
   se apoya en el propio sello, así que aquí solo se le da color. */
.fidys-portada--semergen .fidys-portada__panel {
	border-top-color: var(--fidys-color-semergen);
}

.fidys-portada--semergen .fidys-portada__panel-etiqueta,
.fidys-portada--semergen .fidys-portada__dato-clave,
.fidys-portada--semergen .fidys-portada__panel-estado {
	color: var(--fidys-color-semergen);
}

.fidys-portada--semergen .fidys-portada__panel-estado {
	background: var(--fidys-surface-semergen);
}

.fidys-portada--semergen .fidys-portada__panel-estado--enlace:hover,
.fidys-portada--semergen .fidys-portada__panel-estado--enlace:focus-visible {
	background: var(--fidys-color-semergen);
	color: var(--fidys-color-white);
}

.fidys-portada--semergen .fidys-portada__sello--escudo .fidys-portada__sello-icono {
	background: var(--fidys-color-semergen);
}

.fidys-portada--semergen .fidys-portada__sello--medalla .fidys-portada__sello-icono {
	color: var(--fidys-color-semergen);
}

.fidys-portada--semergen .fidys-portada__sello--esfera {
	background: radial-gradient(circle at 35% 30%, var(--fidys-color-white) 0 10%, var(--fidys-surface-semergen) 40%, #9cc4b7);
}

.fidys-portada--semergen .fidys-portada__sello--esfera .fidys-portada__sello-icono {
	color: var(--fidys-color-semergen);
}

.fidys-portada--semergen .fidys-portada__sello-pildora {
	background: var(--fidys-color-naranja);
}

/* El botón primario acompaña la identidad de la alianza. El secundario se
   queda con contorno azul: hace de anclaje corporativo. */
.fidys-portada--semergen .fidys-portada__acciones .fidys-boton:not(.fidys-boton--contorno) {
	background: var(--fidys-gradient-semergen);
}

.fidys-portada--semergen .fidys-portada__acciones .fidys-boton:not(.fidys-boton--contorno):hover,
.fidys-portada--semergen .fidys-portada__acciones .fidys-boton:not(.fidys-boton--contorno):focus-visible {
	background-image: none;
	background-color: var(--fidys-color-semergen-oscuro);
}

.fidys-portada--semergen .fidys-portada__sello-pie,
.fidys-portada--semergen .fidys-kicker {
	color: var(--fidys-color-semergen);
}

.fidys-portada--semergen .fidys-portada__titulo em {
	color: var(--fidys-color-semergen);
}

/* Dorada: reservada a Reconocimientos. Los botones se quedan corporativos a
   propósito: el dorado es distintivo, no color de acción. */
.fidys-portada--oro {
	background: linear-gradient(120deg, var(--fidys-color-white) 15%, var(--fidys-surface-oro));
}

.fidys-portada--oro::after {
	border-color: var(--fidys-line-oro);
	box-shadow:
		0 0 0 46px rgba(255, 255, 255, 0.55),
		0 0 0 47px rgba(177, 132, 66, 0.16),
		0 0 0 102px rgba(255, 255, 255, 0.55),
		0 0 0 103px rgba(177, 132, 66, 0.12);
}

.fidys-portada--oro .fidys-kicker {
	color: var(--fidys-color-oro-oscuro);
}

.fidys-portada--oro .fidys-portada__titulo em {
	color: var(--fidys-color-oro);
}

.fidys-portada--oro .fidys-portada__panel {
	border-top-color: var(--fidys-color-oro);
}

.fidys-portada--oro .fidys-portada__panel-etiqueta,
.fidys-portada--oro .fidys-portada__dato-clave,
.fidys-portada--oro .fidys-portada__panel-estado {
	color: var(--fidys-color-oro-oscuro);
}

.fidys-portada--oro .fidys-portada__panel-estado {
	background: var(--fidys-surface-oro);
}

.fidys-portada--oro .fidys-portada__panel-estado--enlace:hover,
.fidys-portada--oro .fidys-portada__panel-estado--enlace:focus-visible {
	background: var(--fidys-color-oro-oscuro);
	color: var(--fidys-color-white);
}

.fidys-portada--oro .fidys-portada__sello--escudo .fidys-portada__sello-icono {
	background: var(--fidys-color-oro);
}

.fidys-portada--oro .fidys-portada__sello--esfera .fidys-portada__sello-icono {
	color: var(--fidys-color-oro);
}

.fidys-portada--oro .fidys-portada__sello-pildora {
	background: var(--fidys-color-oro-oscuro);
}

/* -------------------------------------------------------------------------
   6. Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 1000px) {

	.fidys-portada__interior {
		grid-template-columns: 1fr;
		gap: 45px;
		min-height: 0;
	}

	.fidys-portada__panel {
		justify-self: stretch;
		max-width: none;
	}

	.fidys-portada__sello {
		justify-self: center;
		width: 400px;
		max-width: 78vw;
		padding: 45px;
	}

	.fidys-portada::after {
		display: none;
	}
}

@media (max-width: 650px) {

	.fidys-portada {
		padding: 40px 20px 60px;
	}

	.fidys-portada__titulo {
		letter-spacing: -1.8px;
	}

	/* Los saltos de línea del titular se pensaron para escritorio: en móvil
	   estorban y dejan líneas huérfanas. */
	.fidys-portada__titulo br {
		display: none;
	}

	.fidys-portada__lead {
		font-size: 15px;
	}

	/* Segundo párrafo de la entrada, para el matiz que no cabe en el primero. */
.fidys-portada__secundario {
	max-width: 650px;
	margin: 18px 0 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--fidys-color-secondary);
}

/* Énfasis en segunda línea: el titular se parte en nombre y subtítulo, que
   es como se presentan los retos y los encuentros. */
.fidys-portada__titulo--bloque em {
	display: block;
	margin-top: 12px;
	font-size: 0.55em;
	letter-spacing: -1.5px;
}

.fidys-portada__acciones {
		flex-direction: column;
		align-items: stretch;
	}

	.fidys-portada__panel-cuerpo {
		padding: 24px;
	}

	.fidys-portada__dato {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.fidys-portada__sello {
		width: 300px;
		max-width: 84vw;
		padding: 34px;
	}

	.fidys-portada__sello::after {
		inset: -35px;
	}

	.fidys-portada__sello-icono {
		width: 66px;
		height: 66px;
		margin-bottom: 16px;
	}

	.fidys-portada__sello-icono .colorable-icon {
		width: 32px;
		height: 32px;
	}

	.fidys-portada__sello-sutil,
	.fidys-portada__sello-pie {
		font-size: 10px;
	}

	.fidys-portada__sello--esfera .fidys-portada__sello-icono .colorable-icon {
		width: 44px;
		height: 44px;
	}

	.fidys-portada__sello--esfera .fidys-portada__sello-icono {
		margin-bottom: 18px;
	}

	.fidys-portada__sello-pildora {
		margin-top: 18px;
		padding: 9px 13px;
		font-size: 10px;
	}

	.fidys-portada__sello-pie {
		margin-top: 16px;
	}
}