/* Sala de prensa: traslado del artboard «Actualidad» del kit.
 *
 * QUÉ HAY AQUÍ
 *
 * La portada del archivo —migas, titular a dos pesos y entradilla, con el icono
 * de la torre asomando por el borde—, la nota destacada a dos columnas y la
 * rejilla de cuatro tarjetas con su paginación. Sirve a la página de entradas
 * (index) y a los archivos de categoría (archive): las dos plantillas montan
 * los mismos patterns.
 *
 * VARIANTE DEL ARTBOARD
 *
 * El kit trae nueve portadas alternativas tras sus `sc-if`; la activa es la
 * primera (es1a), la clara con el icono amarillo. Las otras ocho no se vuelcan.
 *
 * SIN IMAGEN DESTACADA
 *
 * Ninguna de las notas importadas tiene imagen destacada, así que las tarjetas
 * caen a un marcador de marca —superficie clara con el isotipo— en vez de dejar
 * el hueco vacío y descuadrar la rejilla. En cuanto una nota tenga imagen, se
 * pinta la imagen. Nada de fotos de relleno.
 *
 * Solo presets y custom de theme.json: ni un literal de color.
 *
 * @package zaguan
 */

.vis-actualidad__portada,
.vis-actualidad__destacada,
.vis-actualidad__listado {
	/* Mismo criterio que la noticia y Contacto: ancho completo con el contenido
	   centrado, para que el icono decorativo asome por el borde de la PANTALLA. */
	padding-inline: max(var(--vis-gutter), (100% - var(--wp--style--global--wide-size)) / 2);
}

/* --------------------------------------------------------------- portada */

/* La portada es la MISMA pieza que abre Contacto, Servicios y Conócenos: mismo
   ritmo de migas, mismo cuerpo de titular, mismo ancho de entradilla y el icono
   de marca asomando por el borde derecho. Lo único propio de esta sección es el
   acento, que en el artboard «Actualidad» es el amarillo. Si se cambia algo de
   aquí, se cambia también en las otras tres hojas: son la misma portada. */

.vis-actualidad__portada {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--custom--space-7) var(--wp--custom--space-8);
}

.vis-actualidad__portada::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: -110px;
	width: min(420px, 32vw);
	/* El SVG es cuadrado (viewBox 142,238 x 142,238), al contrario que los
	   iconos verticales de las otras portadas. */
	aspect-ratio: 1;
	background: url("../img/icono-02-amarillo-torre.svg") right bottom / contain no-repeat;
	pointer-events: none;
	z-index: 0;
}

.vis-actualidad__portada > * {
	position: relative;
	z-index: 1;
}

.vis-actualidad__portada .zgn-migas,
.vis-actualidad__portada nav[aria-label] {
	font-size: var(--wp--preset--font-size--vis-xs);
	font-weight: var(--wp--custom--fw-semibold);
	letter-spacing: var(--wp--custom--tracking-etiqueta);
	text-transform: uppercase;
	color: var(--wp--preset--color--vis-kit-texto-piedra);
	padding-block-end: var(--wp--custom--space-7);
}

.vis-actualidad__portada nav a {
	color: var(--wp--preset--color--vis-vsc-amarillo);
	text-decoration: none;
}

.vis-actualidad__portada nav a:hover,
.vis-actualidad__portada nav a:focus-visible {
	color: var(--wp--preset--color--vis-kit-tinta-calida);
}

.vis-actualidad__titulo {
	margin: 0;
	max-width: min(16ch, 62%);
	font-size: clamp(2.875rem, 7vw, 7rem);
	line-height: 0.9;
	letter-spacing: -0.045em;
	font-weight: 300;
	text-wrap: pretty;
}

/* La última palabra del titular, al peso y al color de la sección. En línea y
   no en bloque: el salto lo decide el ancho, igual que en las otras portadas. */
.vis-actualidad__titulo strong {
	font-weight: 500;
	color: var(--wp--preset--color--vis-vsc-amarillo);
}

.vis-actualidad__entradilla {
	margin: 0;
	max-width: 52ch;
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	line-height: 1.5;
	text-wrap: pretty;
}

/* WordPress inyecta márgenes de flujo en todo wp:group. Se aplanan y el aire de
   la entradilla se repone justo después, con el mismo valor que en las otras
   portadas. */
.vis-actualidad__cabecera > * {
	margin-block: 0;
}

.vis-actualidad__cabecera > .vis-actualidad__entradilla {
	margin-block-start: var(--wp--custom--space-7);
}

.vis-actualidad__cabecera-media img {
	width: 100%;
	height: clamp(240px, 32vw, 440px);
	object-fit: cover;
	object-position: center 48%;
	display: block;
}

.vis-actualidad__cabecera-media {
	position: relative;
	line-height: 0;
	margin: 0;
}

/* El cuadrado de acento: antes un <span> dentro de un core/html; ahora un
   pseudo-elemento del core/image. */
.vis-actualidad__cabecera-media::after {
	content: "";
	line-height: normal;
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	width: 80px;
	height: 80px;
	/* El ámbar exacto del icono (icono-02-amarillo-torre.svg, #F9AC1B), como en
	   las demás portadas. Con vis-vsc-amarillo se leían dos amarillos. */
	background-color: var(--wp--preset--color--vis-kit-ambar);
	pointer-events: none;
}

@media (max-width: 781px) {
	.vis-actualidad__cabecera-media::after {
		width: 48px;
		height: 48px;
	}
}
/* ------------------------------------------------------------- destacada */

.vis-actualidad__rotulo {
	margin: 0 0 var(--wp--custom--space-6) 0;
	font-size: var(--wp--preset--font-size--vis-xs);
	font-weight: var(--wp--custom--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vis-vsc-amarillo);
}

.vis-actualidad__nota {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: stretch;
	background-color: var(--wp--preset--color--vis-color-fondo);
}

.vis-actualidad__nota > *,
.vis-actualidad__nota-cuerpo > *,
.vis-actualidad__nota-intro > * {
	margin-block: 0;
}

.vis-actualidad__nota-media {
	min-height: 420px;
	overflow: hidden;
}

.vis-actualidad__nota-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
	display: block;
}

/* La foto es un core/image: el figure llena la caja y la regla de la imagen
   sube un escalón para ganar a `.wp-block-image img { height: auto }` de core. */
.vis-actualidad__nota-media > .wp-block-image.wp-block-image {
	height: 100%;
	margin: 0;
}

.vis-actualidad__nota-media .wp-block-image img {
	height: 100%;
}

.vis-actualidad__nota-cuerpo {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--custom--space-7);
	padding: var(--wp--custom--space-7);
	background-color: var(--wp--preset--color--vis-color-fondo-alt);
}

.vis-actualidad__nota-intro {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space-5);
}

.vis-actualidad__nota-titular {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	font-weight: 300;
	text-wrap: pretty;
}

.vis-actualidad__nota-titular a {
	color: inherit;
	text-decoration: none;
}

.vis-actualidad__nota-titular a:hover,
.vis-actualidad__nota-titular a:focus-visible {
	color: var(--wp--preset--color--vis-kit-oro-foco);
}

/* El extracto de la destacada: medida corta y tinta suave, para que no compita
   con el titular, que es lo que manda en la pieza. */
.vis-actualidad__nota-extracto {
	margin: 0;
	max-width: 52ch;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.6;
	color: var(--wp--preset--color--vis-color-texto-suave);
	text-wrap: pretty;
}

.vis-actualidad__nota-pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--custom--space-5);
	padding-block-start: var(--wp--custom--space-5);
	border-block-start: 1px solid var(--wp--preset--color--vis-kit-gris-frio);
}

/* Fecha y enlace son dos core/paragraph: sin el margen del layout de bloques,
   que llega después de esta hoja (de ahí la clase doble). */
.vis-actualidad__nota-pie.vis-actualidad__nota-pie > * {
	margin-block: 0;
}

.vis-actualidad__nota-fecha {
	font-size: var(--wp--preset--font-size--vis-mini);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--vis-kit-texto-piedra);
}

.vis-actualidad__nota-enlace {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space-2);
	min-height: 44px;
	font-size: var(--wp--preset--font-size--vis-mini);
	font-weight: var(--wp--custom--fw-semibold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vis-kit-oro-foco);
	text-decoration: none;
}

.vis-actualidad__nota-enlace:hover,
.vis-actualidad__nota-enlace:focus-visible {
	color: var(--wp--preset--color--vis-kit-tinta-calida);
}

/* --------------------------------------------------------------- listado */

.vis-actualidad__listado-cabecera {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--wp--custom--space-7);
	flex-wrap: wrap;
}

.vis-actualidad__listado-titulo {
	margin: 0;
	font-size: var(--vis-titular-seccion);
	line-height: 1.02;
	letter-spacing: -0.035em;
	font-weight: 300;
}

/* Dos líneas siempre (28-sep-2026): el salto antes de la negrita lo pone la
   hoja, como en el resto de titulares; en el contenido es una sola frase. */
.vis-actualidad__listado-titulo strong {
	display: block;
	font-weight: 500;
	color: var(--wp--preset--color--vis-vsc-amarillo);
}

.vis-actualidad__cuenta {
	margin: 0;
	font-size: var(--wp--preset--font-size--vis-mini);
	color: var(--wp--preset--color--vis-kit-texto-piedra);
	font-variant-numeric: tabular-nums;
}

.vis-actualidad__rejilla {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--custom--space-6);
	padding-block-start: var(--wp--custom--space-7);
}

.vis-actualidad__tarjeta {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--vis-color-fondo);
}

.vis-actualidad__tarjeta-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.vis-actualidad__tarjeta-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* El marcador de las notas sin imagen destacada. Superficie de marca con el
   isotipo recortado por el borde: llena la caja sin fingir una fotografía. */
.vis-actualidad__tarjeta-media--vacia,
.vis-actualidad__nota-media--vacia {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--vis-color-fondo-alt);
}

.vis-actualidad__tarjeta-media--vacia::after,
.vis-actualidad__nota-media--vacia::after {
	content: "";
	position: absolute;
	inset-block-end: -6%;
	inset-inline-end: -6%;
	width: 44%;
	aspect-ratio: 171 / 288;
	background: url("../img/icono-03-azul.svg") right bottom / contain no-repeat;
	opacity: 0.28;
	pointer-events: none;
}

.vis-actualidad__tarjeta-cuerpo {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space-3);
	padding: var(--wp--custom--space-5) var(--wp--custom--space-5) var(--wp--custom--space-6);
}

.vis-actualidad__tarjeta-cuerpo > *,
.vis-actualidad__rejilla > * {
	margin-block: 0;
}

.vis-actualidad__meta {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space-3);
	font-size: var(--wp--preset--font-size--vis-xs);
	font-weight: var(--wp--custom--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vis-kit-oro-foco);
}

/* En la tarjeta del listado: categoría a la izquierda, fecha a la derecha,
   como la pista de la portada. */
.vis-actualidad__tarjeta .vis-actualidad__meta {
	justify-content: space-between;
}

/* La categoría, en el amarillo de la sección. */
.vis-actualidad__tarjeta .vis-actualidad__meta-tipo {
	color: var(--wp--preset--color--vis-vsc-amarillo);
}

.vis-actualidad__meta a {
	color: inherit;
	text-decoration: none;
}

.vis-actualidad__meta a:hover,
.vis-actualidad__meta a:focus-visible {
	color: var(--wp--preset--color--vis-kit-tinta-calida);
}

/* El filete corto que separa la isla del tipo de nota en el artboard. */
.vis-actualidad__meta-filete {
	display: block;
	width: 14px;
	height: 1px;
	flex: none;
	background-color: var(--wp--preset--color--vis-kit-gris-medio);
}

.vis-actualidad__tarjeta-titular {
	margin: 0;
	font-size: var(--wp--preset--font-size--vis-lg);
	line-height: 1.22;
	letter-spacing: -0.02em;
	font-weight: 500;
	text-wrap: pretty;
}

.vis-actualidad__tarjeta-titular a {
	color: inherit;
	text-decoration: none;
}

/* Hover de la tarjeta entera (28-sep-2026): el titular pasa al amarillo
   Visocan —el de la paleta, no el oro oscuro de los enlaces— y la foto se
   funde un punto. Se engancha a la tarjeta y no al enlace, para que responda
   en toda la superficie; el foco de teclado hace lo mismo. */
.vis-actualidad__tarjeta-titular a {
	transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vis-actualidad__tarjeta:hover .vis-actualidad__tarjeta-titular a,
.vis-actualidad__tarjeta:focus-within .vis-actualidad__tarjeta-titular a {
	color: var(--wp--preset--color--vis-vsc-amarillo);
}

.vis-actualidad__tarjeta-media img {
	transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vis-actualidad__tarjeta:hover .vis-actualidad__tarjeta-media img,
.vis-actualidad__tarjeta:focus-within .vis-actualidad__tarjeta-media img {
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.vis-actualidad__tarjeta-titular a,
	.vis-actualidad__tarjeta-media img {
		transition: none;
	}
}

.vis-actualidad__tarjeta-fecha {
	flex: none;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--vis-kit-texto-piedra);
}

.vis-actualidad__vacio {
	margin: var(--wp--custom--space-7) 0 0 0;
	color: var(--wp--preset--color--vis-kit-texto-piedra);
}

/* ------------------------------------------------------------ paginación */

.vis-actualidad__paginacion {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--space-2);
	flex-wrap: wrap;
	padding-block-start: var(--wp--custom--space-8);
}

.vis-actualidad__paginacion .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--space-2);
	flex-wrap: wrap;
}

.vis-actualidad__paginacion .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--wp--custom--space-3);
	font-size: var(--wp--preset--font-size--vis-mini);
	font-weight: var(--wp--custom--fw-semibold);
	color: var(--wp--preset--color--vis-color-texto);
	text-decoration: none;
	transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms;
}

.vis-actualidad__paginacion .page-numbers:hover,
.vis-actualidad__paginacion .page-numbers:focus-visible {
	background-color: var(--wp--preset--color--vis-color-fondo-alt);
}

.vis-actualidad__paginacion .page-numbers.current {
	background-color: var(--wp--preset--color--vis-kit-tinta-calida);
	color: var(--wp--preset--color--vis-color-texto-inv);
}

.vis-actualidad__paginacion .page-numbers.dots {
	min-width: 0;
	padding: 0;
	color: var(--wp--preset--color--vis-kit-texto-piedra);
}

/* El rótulo «Paginación de la sala de prensa» es para el lector de pantalla:
   visible rompería el centrado de la fila de números. */
.vis-actualidad__paginacion .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------- respuesta */

@media (max-width: 1279px) {
	.vis-actualidad__rejilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.vis-actualidad__nota {
		grid-template-columns: 1fr;
	}

	.vis-actualidad__nota-media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.vis-actualidad__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.vis-actualidad__portada::after {
		inset-inline-end: -22%;
		opacity: 0.5;
	}

	.vis-actualidad__rejilla {
		grid-template-columns: 1fr;
	}

	.vis-actualidad__nota-cuerpo {
		padding: var(--wp--custom--space-6) var(--wp--custom--space-5);
	}

	/* 28-sep-2026: en móvil el titular de la destacada más grande para que
	   mande sobre las tarjetas (28 → 37 px: el 50 % y luego 5 px menos); y el
	   pie apilado, fecha y «Más información» cada uno en su línea, que en fila
	   se desbordaban. El titular de las tarjetas, 3 px más. */
	.vis-actualidad__nota-titular {
		font-size: calc(1.75rem * 1.5 - 5px);
	}

	.vis-actualidad__tarjeta-titular {
		font-size: calc(var(--wp--preset--font-size--vis-lg) + 3px);
	}

	.vis-actualidad__nota-pie {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--custom--space-2);
	}
}

.vis-actualidad__nota-media--vacia::after {
	width: 26%;
	opacity: 0.22;
}

/* ---------------------------------------------------------------- filtros */

/* Filtros de la sala de prensa (inc/notas.php): dos filas de pastillas bajo
   «Todas las noticias», con el aspecto de las del artboard «Actualidad»: 44 px
   de alto, la activa en tinta cálida. Son enlaces: sin JavaScript filtran
   recargando; con él, assets/js/notas.js cambia los resultados en su sitio. */
.vis-actualidad__listado > *,
.vis-actualidad__listado-cabecera > * {
	margin-block: 0;
}

/* El desplegable de filtro (`.vis-filtros`) vive en componentes.css: lo
   comparten la sala de prensa y Promociones (26-oct-2026). */

/* Resultados: la cuenta encabeza la rejilla y se atenúa mientras llega la
   respuesta, sin mover nada de sitio. */
.vis-notas {
	transition: opacity 160ms;
}

.vis-notas[aria-busy="true"] {
	opacity: 0.45;
	pointer-events: none;
}

.vis-notas > .vis-actualidad__cuenta {
	padding-block-start: var(--wp--custom--space-5);
}

.vis-notas > .vis-actualidad__cuenta:focus {
	outline: none;
}

.vis-notas .vis-actualidad__rejilla {
	padding-block-start: var(--wp--custom--space-5);
}

.vis-actualidad__meta-tipo {
	color: var(--wp--preset--color--vis-kit-texto-piedra);
}

/* --- Aire vertical de sección con el token común (13-oct-2026) --------------
   `--vis-espacio-seccion` (componentes.css): 64 px en móvil y 96 desde 1200,
   arriba y abajo, en lugar de la medida propia de cada sección. Va al final
   para ganar a las reglas y media queries anteriores de esta hoja.
   El listado arranca a 0: lo separa el aire inferior de la destacada. */
.vis-actualidad__destacada {
	padding-block: var(--vis-espacio-seccion);
}

.vis-actualidad__listado {
	padding-block-end: var(--vis-espacio-seccion);
}

/* --- Titular → contenido con el token común (13-oct-2026) -------------------
   `--vis-espacio-titular` (componentes.css): 32 px en móvil, 48 desde 1200,
   entre la cabecera de cada sección (titular y su entradilla o enlace) y el
   contenido que va debajo.
   El token va bajo «Todas las noticias»; la barra de filtros
   deja de sumar su relleno superior. */
.vis-actualidad__listado-cabecera {
	padding-block-end: var(--vis-espacio-titular);
}

.vis-actualidad__listado .vis-filtros {
	padding-block-start: 0;
}