/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 17 2026 | 00:45:18 */
/**
 * [EDUCA-MED][ACTUALIDAD] Hoja del shortcode [educa_actualidad] v1.0.0
 *
 * Hoja deliberadamente sin identidad: aporta estructura, proporciones y
 * espaciado, y deja que cada sitio ponga la tipografía y el color.
 *
 * Cómo lo consigue:
 *
 *   - Ni una tipografía declarada. Los titulares son h2 y h3 limpios y los
 *     estiliza el tema de cada web.
 *   - Ni un color literal salvo como reserva. Todo sale de currentColor, que
 *     es el color de texto que ya tenga la sección donde se inserte.
 *   - Ni ancho máximo ni sangrado lateral. El contenedor de GenerateBlocks
 *     donde se inserta el shortcode es quien manda.
 *   - Ni una consulta de medios. La rejilla se recoloca sola con auto-fit.
 *
 * Las cinco variables del bloque de apertura son el único punto de ajuste.
 * Al final del archivo hay un ejemplo comentado para teñir el componente con
 * los tokens de Astra de cada sitio, cuando decidas los índices correctos.
 *
 * Se carga desde Simple Custom CSS and JS, tipo CSS, en la parte pública y
 * marcada como archivo externo.
 *
 * !important: ninguno. Si Astra pisara alguna regla, se documenta aquí.
 *
 * Versión: 1.2.0
 *
 * Changelog
 * 1.2.0 - Se retira el degradado al pasar por encima de la tarjeta y con él
 *         la capa ::before que lo fundía. Vuelve el fondo plano, ahora en
 *         una variable propia, --educa-actualidad-hover, separada de la
 *         superficie del hueco de imagen para poder ajustarlas por separado.
 *         Con fondo claro el problema de contraste desaparece: el titular
 *         mantiene su ratio sobre blanco.
 * 1.1.0 - El filete superior pasa a transparent por defecto: en la home de
 *         educa-med sobraba, porque el contenedor ya trae su propia cabecera.
 *         Se reactiva por sitio con una línea.
 *       - El titular de la introducción en negrita.
 *       - Fondo en degradado al pasar por encima (retirado en 1.2.0).
 * 1.0.0 - Versión inicial. Estructura portada de fidys-actualidad, sin
 *         paleta ni tipografía propias y sin consultas de medios.
 */

/* -------------------------------------------------------------------------
   1. Sección
   ---------------------------------------------------------------------- */

.educa-actualidad {

	/* Separación entre la introducción y las tarjetas. */
	--educa-actualidad-hueco: 1.25rem;

	/* Borde de las tarjetas. La reserva actúa si no hay color-mix. */
	--educa-actualidad-borde: rgba(0, 0, 0, 0.14);
	--educa-actualidad-borde: color-mix(in srgb, currentColor 14%, transparent);

	/* Filete superior de la sección. Desactivado por defecto: se activa
	   apuntándolo a --educa-actualidad-borde en el ajuste por sitio. */
	--educa-actualidad-filete: transparent;

	/* Hueco de la imagen cuando la entrada no tiene destacada. */
	--educa-actualidad-superficie: rgba(0, 0, 0, 0.04);
	--educa-actualidad-superficie: color-mix(in srgb, currentColor 5%, transparent);

	/* Fondo de la tarjeta al pasar por encima. Única declaración de color
	   literal de la hoja, aislada aquí para poder cambiarla por sitio. */
	--educa-actualidad-hover: #f5f8ff;

	/* Color de señalización: antetítulo, categoría y flechas. */
	--educa-actualidad-acento: currentColor;

	--educa-actualidad-radio: 10px;
	--educa-actualidad-proporcion: 16 / 9;

	width: 100%;
	padding-top: 2rem;
	border-top: 1px solid var(--educa-actualidad-filete);
}

.educa-actualidad__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--educa-actualidad-hueco);
	align-items: stretch;
}

/* -------------------------------------------------------------------------
   2. Introducción
   ---------------------------------------------------------------------- */

.educa-actualidad__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

/* En disposición superior la introducción ocupa la fila completa y las
   tarjetas quedan alineadas debajo. */
.educa-actualidad--superior .educa-actualidad__intro {
	grid-column: 1 / -1;
}

.educa-actualidad__antetitulo {
	margin: 0;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--educa-actualidad-acento);
	opacity: 0.85;
}

.educa-actualidad__titulo {
	margin: 0.35em 0 0.5em;
	font-weight: 700;
}

.educa-actualidad__texto {
	margin: 0 0 1em;
	opacity: 0.85;
}

.educa-actualidad__enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 700;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   3. Tarjeta de noticia
   ---------------------------------------------------------------------- */

.educa-noticia {
	display: flex;
	flex-direction: column;
	padding: 0.85rem;
	border: 1px solid var(--educa-actualidad-borde);
	border-radius: var(--educa-actualidad-radio);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.educa-noticia:hover,
.educa-noticia:focus-visible {
	background-color: var(--educa-actualidad-hover);
	color: inherit;
}

.educa-noticia__visual {
	display: block;
	overflow: hidden;
	margin-bottom: 0.85rem;
	border-radius: calc(var(--educa-actualidad-radio) - 3px);
	background-color: var(--educa-actualidad-superficie);
	aspect-ratio: var(--educa-actualidad-proporcion);
}

/* La imagen llena el hueco pase lo que pase con sus atributos width y
   height, incluidos los SVG, que WordPress emite con dimensiones a cero. */
.educa-noticia__imagen {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.educa-noticia__categoria {
	display: block;
	margin-bottom: 0.4em;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--educa-actualidad-acento);
	opacity: 0.75;
}

/* Tamaño relativo al cuerpo de cada sitio, no absoluto: sube y baja con la
   escala tipográfica del tema. Quitando esta línea manda el h3 de Astra. */
.educa-noticia__titulo {
	flex: 1 0 auto;
	margin: 0 0 0.8em;
	font-size: 1.05em;
	line-height: 1.4;
}

.educa-noticia__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: auto;
	font-size: 0.9em;
	font-weight: 700;
	color: var(--educa-actualidad-acento);
}

/* -------------------------------------------------------------------------
   4. Flecha
   ---------------------------------------------------------------------- */

.educa-actualidad__flecha {
	flex: 0 0 auto;
	transition: transform 0.25s ease;
}

.educa-actualidad__enlace:hover .educa-actualidad__flecha,
.educa-actualidad__enlace:focus-visible .educa-actualidad__flecha,
.educa-noticia:hover .educa-actualidad__flecha,
.educa-noticia:focus-visible .educa-actualidad__flecha {
	transform: translateX(4px);
}

/* -------------------------------------------------------------------------
   5. Foco visible
   ---------------------------------------------------------------------- */

.educa-actualidad__enlace:focus-visible,
.educa-noticia:focus-visible {
	outline: 2px solid var(--educa-actualidad-acento);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   6. Diagnóstico
   ---------------------------------------------------------------------- */

.educa-actualidad__diagnostico {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.8em;
	opacity: 0.7;
}

/* -------------------------------------------------------------------------
   7. Movimiento reducido
   ---------------------------------------------------------------------- */

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

	.educa-actualidad__flecha,
	.educa-noticia {
		transition: none;
	}

	.educa-actualidad__enlace:hover .educa-actualidad__flecha,
	.educa-noticia:hover .educa-actualidad__flecha {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   8. Ajuste por sitio · plantillas comentadas
   ---------------------------------------------------------------------- */

/*
   A · Color. Cuando tengas claro qué índice de la paleta de Astra corresponde
   en cada web, se descomenta y se ajustan los números. Ninguna regla de arriba
   lleva color literal salvo el fondo del hover, que también sale de aquí.

.educa-actualidad {
	--educa-actualidad-borde: var(--ast-global-color-8);
	--educa-actualidad-acento: var(--ast-global-color-2);
	--educa-actualidad-hover: #f5f8ff;
}
*/

/*
   B · Filete superior. Devuelve la línea divisoria sobre la sección, útil
   cuando el bloque no va precedido de una cabecera propia. Probablemente
   haga falta en el Aula, donde no hay un titular encima como en educa-med.

.educa-actualidad {
	--educa-actualidad-filete: var(--educa-actualidad-borde);
}
*/