/* Artículo de Actualidad: traslado del artboard «Noticia» del kit.
 *
 * QUÉ HAY AQUÍ
 *
 * La portada del artículo con su icono decorativo, la imagen a sangre con el
 * cuadrado de la esquina, y el cuerpo a dos columnas —datos y compartir a la
 * izquierda, texto a la derecha con ancho de lectura—.
 *
 * Solo presets y custom de theme.json: ni un literal de color, ni un px de
 * tipografía de contenido.
 *
 * @package zaguan
 */

.vis-noticia__portada,
.vis-noticia__cuerpo,
.vis-relacionadas {
	/* Ancho completo con el contenido centrado: el icono decorativo tiene que
	   poder asomar por el borde de la PANTALLA, y con max-width + margin auto
	   se anclaba al del contenedor y caía dentro. */
	padding-inline: max(var(--vis-gutter), (100% - var(--wp--style--global--wide-size)) / 2);
}

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

/* El icono de marca que asoma por el borde derecho. Decorativo: va de fondo y
   no ocupa marcado ni lo lee un lector de pantalla. */
.vis-noticia__portada::after {
	content: "";
	position: absolute;
	inset-block-start: 20px;
	inset-inline-end: -140px;
	width: min(520px, 40vw);
	aspect-ratio: 1;
	background: url("../img/icono-02-amarillo-torre.svg") right top / contain no-repeat;
	pointer-events: none;
	z-index: 0;
}

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

/* Las migas, en versalitas con tracking abierto. */
.vis-noticia__portada .zgn-migas,
.vis-noticia__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-noticia__portada nav a {
	color: var(--wp--preset--color--vis-vsc-amarillo);
	text-decoration: none;
}

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

.vis-noticia__titulo {
	margin: 0;
	max-width: min(24ch, 62%);
	font-size: clamp(2.125rem, 4.4vw, 4rem);
	line-height: 1;
	letter-spacing: -0.04em;
	font-weight: 300;
	text-wrap: pretty;
}

.vis-noticia__meta {
	gap: var(--wp--custom--space-5);
	margin-block-start: var(--wp--custom--space-6);
	color: var(--wp--preset--color--vis-kit-texto-piedra);
}

.vis-noticia__fecha {
	font-variant-numeric: tabular-nums;
}

/* Los filetes que separan los datos de la fila. Mismo recurso y misma medida
   que en la barra institucional de la cabecera: ::after del propio elemento,
   1 px por 12, en gris nube. El separador es decoración, no contenido, así que
   el lector de pantalla no lee nada entre un dato y el siguiente. El último no
   lo lleva, que cerraría la fila contra el aire. */
.vis-noticia__meta > * {
	position: relative;
}

.vis-noticia__meta > *:not(:last-child)::after {
	content: "";
	position: absolute;
	/* Cae en la mitad del hueco del flex, no pegado al texto. */
	inset-inline-end: calc(var(--wp--custom--space-5) / -2);
	inset-block-start: 50%;
	translate: 0 -50%;
	width: 1px;
	height: 12px;
	background-color: var(--wp--preset--color--vis-kit-gris-nube);
}

/* La ubicación es el único dato con peso de la fila: en negrita y sin subrayar.
   Ahora que la categoría no está en el hero —vive en la columna lateral y en la
   nube del cierre—, es la isla la que sitúa la nota de un vistazo. */
.vis-noticia__isla {
	font-weight: var(--wp--custom--fw-bold);
	color: var(--wp--preset--color--vis-color-texto);
}

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

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

/* El tiempo de lectura, que vive en esta fila y no en la columna lateral. */
.vis-noticia__lectura {
	font-variant-numeric: tabular-nums;
}

/* --- Categorías y etiquetas al cierre del artículo ------------------------
   Nube de términos bajo el cuerpo: píldoras enlazadas a los archivos de cada
   taxonomía. Esquinas rectas y superficie de marca, como el resto. */

.vis-noticia__terminos {
	margin-block-start: var(--wp--custom--space-7);
	padding-block-start: var(--wp--custom--space-6);
	border-block-start: 1px solid var(--wp--preset--color--vis-kit-gris-frio);
}

.vis-noticia__nube {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vis-noticia__pildora {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--wp--custom--space-4);
	font-size: var(--wp--preset--font-size--vis-mini);
	font-weight: 500;
	text-decoration: none;
	color: var(--wp--preset--color--vis-color-texto);
	background-color: var(--wp--preset--color--vis-color-fondo-alt);
	transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms;
}

.vis-noticia__pildora:hover,
.vis-noticia__pildora:focus-visible {
	background-color: var(--wp--preset--color--vis-kit-tinta-calida);
	color: var(--wp--preset--color--vis-color-texto-inv);
}

/* La categoría es el término rector de la nota: se distingue del resto. */
.vis-noticia__pildora--category {
	color: var(--wp--preset--color--vis-kit-oro-foco);
	font-weight: var(--wp--custom--fw-semibold);
}

/* Imagen destacada a sangre, con el cuadrado amarillo del artboard. */
.vis-noticia__imagen {
	position: relative;
	margin: 0;
}

.vis-noticia__imagen img {
	width: 100%;
	height: clamp(320px, 46vw, 620px);
	object-position: center 48%;
	display: block;
}

.vis-noticia__imagen::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	width: 80px;
	height: 80px;
	background-color: var(--wp--preset--color--vis-vsc-amarillo);
	pointer-events: none;
}

/* Cuerpo a dos columnas: datos a la izquierda, lectura a la derecha. */
.vis-noticia__cuerpo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--space-7) var(--wp--custom--space-8);
	align-items: flex-start;
}

.vis-noticia__aside {
	flex: 0 1 15rem;
	min-width: 12rem;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space-6);
}

.vis-noticia__dato {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space-2);
}

.vis-noticia__rotulo {
	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);
	margin: 0;
}

.vis-noticia__valor {
	font-weight: 500;
	color: var(--wp--preset--color--vis-kit-oro-foco);
	margin: 0;
}

.vis-noticia__compartir {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space-3);
}

.vis-noticia__red {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background-color: var(--wp--preset--color--vis-color-accion);
	color: var(--wp--preset--color--vis-vsc-blanco);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vis-noticia__red:hover,
.vis-noticia__red:focus-visible {
	opacity: 0.75;
}

/* Columna de lectura a 45rem (720 px, ~80 caracteres a 18 px). El grupo y el
   post-content son layout constrained, que capa cada hijo a contentSize
   (34rem): la columna salía a 544 px dentro de un hueco de ~900. Se redefine la
   variable aquí. El artboard pide 68ch, pero en Plus Jakarta el ch es ancho y
   68ch daba ~100 caracteres por línea. */
.vis-noticia__texto {
	--wp--style--global--content-size: 45rem;
	--wp--style--global--wide-size: 45rem;

	flex: 1 1 26rem;
	min-width: 0;
	max-width: 56rem;
}

/* La entradilla: el extracto del post, más grande, como en el artboard. */
.vis-noticia__entradilla,
.vis-noticia__entradilla p {
	font-size: clamp(1.25rem, 2vw, 1.5625rem);
	line-height: 1.45;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

.vis-noticia__entradilla {
	margin-block: 0 var(--wp--custom--space-6);
}

.vis-noticia__texto p {
	line-height: 1.68;
	text-wrap: pretty;
}

@media (max-width: 781px) {
	.vis-noticia__titulo {
		max-width: none;
	}

	.vis-noticia__portada::after {
		inset-inline-end: -40%;
		opacity: 0.5;
	}

	/* En móvil el lateral (compartir y datos de la nota) va DESPUÉS del texto:
	   delante empujaba la lectura una pantalla hacia abajo (30-sep-2026). */
	.vis-noticia__aside {
		order: 2;
	}

	/* Con el lateral debajo, las etiquetas del final del texto (categoría e
	   isla) salían repetidas justo encima de la «Categoría» del lateral: en
	   móvil se quedan las del lateral. La isla ya va en la cabecera, junto a
	   la fecha. */
	.vis-noticia__terminos {
		display: none;
	}

	/* La columna de lectura, al gutter general. Es layout constrained y WP le
	   añade el padding raíz (`has-global-padding`, 16 px) sobre el del cuerpo:
	   el texto quedaba a 40 px del borde y el titular, la cabecera y el pie a
	   24. */
	.vis-noticia__texto.has-global-padding {
		padding-inline: 0;
	}
}

/* --- Otras noticias ------------------------------------------------------- */

.vis-relacionadas {
	/* Fondo azul para cortar la sucesión de blancos al pie del artículo. El
	   profundo y no el de marca: con blanco da 6,4:1 y el de marca 3,1:1, que
	   no basta para el enlace en mayúsculas pequeñas. Las tarjetas siguen
	   blancas, así que su texto no cambia. */
	color: var(--wp--preset--color--vis-color-texto-inv);
	background-color: var(--wp--preset--color--vis-kit-azul-profundo);
}

.vis-relacionadas__cabecera {
	gap: var(--wp--custom--space-7);
	padding-block-end: var(--wp--custom--space-6);
	border-block-end: 1px solid rgb(255 255 255 / 0.3);
}

.vis-relacionadas__titulo {
	font-size: var(--vis-titular-seccion);
	line-height: 1.04;
	letter-spacing: -0.035em;
	font-weight: 300;
}

.vis-relacionadas__enlace a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-weight: var(--wp--custom--fw-semibold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vis-color-texto-inv);
	text-decoration: none;
}

.vis-relacionadas__enlace a:hover,
.vis-relacionadas__enlace a:focus-visible {
	color: var(--wp--preset--color--vis-vsc-amarillo);
}

.vis-relacionadas__rejilla.vis-actualidad__rejilla {
	/* Las tarjetas son las de la sala de prensa (actualidad.css, también
	   encolada en la nota); aquí solo cambia la rejilla: tres notas en tres
	   columnas hasta el móvil, en vez de las cuatro del listado. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

/* La sección va en azul con el texto en blanco: la tarjeta recupera la tinta
   del texto, que en la sala de prensa hereda del fondo claro. */
.vis-relacionadas .vis-actualidad__tarjeta {
	color: var(--wp--preset--color--vis-color-texto);
}

/* ─────────────────────────────────────────────────────────────────────────
   NOTAS CON VÍDEO

   El campo lo pone ACF (grupo «Noticias», campo `video`) y lo lee
   inc/video.php. Los estilos viven aquí, y no en inicio.css o actualidad.css,
   porque noticia.css se encola en la portada, la sala de prensa, los archivos
   y el single: las tres marcas comparten una sola definición.

   LA MARCA. Un cuadrado amarillo con el icono de reproducción recortado
   encima. Son dos pseudoelementos de la misma caja de imagen: ::before pinta
   el cuadrado y ::after el icono, en ese orden, porque ::after se pinta por
   encima. El icono va como máscara y no como imagen de fondo, así que hereda
   el color y no obliga a un SVG por cada tinta.
   ───────────────────────────────────────────────────────────────────────── */

.vis-noticia__imagen,
.vis-portada-nota__media--video,
.vis-actualidad__tarjeta-media--video,
.vis-actualidad__nota-media--video {
	--vis-marca-video-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

/* En el single, la nota con vídeo no lleva el cuadrado amarillo decorativo de
   la esquina: su sitio lo ocupa el botón de vídeo (sección «Reproductor de la
   nota», al final de esta hoja). */
body.vis-nota-con-video .vis-noticia__imagen::after {
	content: none;
}

/* La misma marca en las dos rejillas, a escala de tarjeta y en la esquina
   superior izquierda. Aquí no se carga el MP4: la tarjeta solo avisa de que la
   nota trae vídeo. */
.vis-portada-nota__media--video.vis-portada-nota__media--video::before,
.vis-portada-nota__media--video.vis-portada-nota__media--video::after,
.vis-actualidad__tarjeta-media--video.vis-actualidad__tarjeta-media--video::before,
.vis-actualidad__tarjeta-media--video.vis-actualidad__tarjeta-media--video::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset-block-start: var(--wp--custom--space-3);
	inset-inline-start: var(--wp--custom--space-3);
	width: clamp(40px, 4.5vw, 56px);
	height: clamp(40px, 4.5vw, 56px);
	pointer-events: none;
}

/* Doble clase para pasar por delante de la regla del marcador de las notas
   sin foto (.vis-actualidad__tarjeta-media--vacia::after, en actualidad.css):
   esa hoja se encola después y su `background` en forma corta borraba el color
   del cuadrado. Especificidad, nunca !important. */
.vis-portada-nota__media--video.vis-portada-nota__media--video::before,
.vis-actualidad__tarjeta-media--video.vis-actualidad__tarjeta-media--video::before {
	background: var(--wp--preset--color--vis-vsc-amarillo);
}

.vis-portada-nota__media--video.vis-portada-nota__media--video::after,
.vis-actualidad__tarjeta-media--video.vis-actualidad__tarjeta-media--video::after {
	background: var(--wp--preset--color--vis-vsc-pizarra);
	-webkit-mask: var(--vis-marca-video-glifo) center / 40% no-repeat;
	mask: var(--vis-marca-video-glifo) center / 40% no-repeat;
}

/* En el listado de /actualidad/ la marca va un 20 % más pequeña que en la pista
   de la portada: la tarjeta es menor y ahí pesaba de más. */
.vis-actualidad__tarjeta-media--video.vis-actualidad__tarjeta-media--video::before,
.vis-actualidad__tarjeta-media--video.vis-actualidad__tarjeta-media--video::after {
	width: clamp(32px, 3.6vw, 45px);
	height: clamp(32px, 3.6vw, 45px);
}

/* La nota destacada de /actualidad/ lleva la marca al tamaño de la pista de
   portada: la pieza es grande y aquí no procede el recorte del listado. La caja
   necesita `position` porque, a diferencia de su variante sin foto, no la traía
   de serie. */
.vis-actualidad__nota-media--video {
	position: relative;
}

.vis-actualidad__nota-media--video.vis-actualidad__nota-media--video::before,
.vis-actualidad__nota-media--video.vis-actualidad__nota-media--video::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset-block-start: var(--wp--custom--space-3);
	inset-inline-start: var(--wp--custom--space-3);
	width: clamp(40px, 4.5vw, 56px);
	height: clamp(40px, 4.5vw, 56px);
	pointer-events: none;
}

.vis-actualidad__nota-media--video.vis-actualidad__nota-media--video::before {
	background: var(--wp--preset--color--vis-vsc-amarillo);
}

.vis-actualidad__nota-media--video.vis-actualidad__nota-media--video::after {
	background: var(--wp--preset--color--vis-vsc-pizarra);
	-webkit-mask: var(--vis-marca-video-glifo) center / 40% no-repeat;
	mask: var(--vis-marca-video-glifo) center / 40% no-repeat;
}

/* --- Reproductor de la nota ----------------------------------------------

   El vídeo se reproduce ENCIMA de la imagen destacada (30-sep-2026): al pulsar
   el cuadrado amarillo, un velo oscurece la imagen y el vídeo queda centrado en
   16:9 sobre ella. Antes iba debajo de la entradilla.

   El cuadrado está arriba a la izquierda de la imagen, a la misma vertical que
   las migas y el titular: la imagen va a sangre y el texto no, así que la
   sangría se calcula igual que la de .vis-noticia__portada. Al reproducir sigue
   solo en reposo: con el vídeo abierto se retira (30-sep-2026) y la pausa es
   el clic en el vídeo, cuya capa es un botón enfocable que recibe el foco al
   abrir. Un clic en el velo, o Esc, cierra y vuelve la imagen y el cuadrado.
   ------------------------------------------------------------------------- */

.vis-noticia__media {
	--vis-marca-video-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
	--vis-video-boton: clamp(88px, 9vw, 128px);

	position: relative;
}

.vis-noticia__media > * {
	margin-block: 0;
}

/* En reposo la imagen entera reproduce (video-nota.js). */
.vis-noticia__media:has(.vis-video-play):not(.esta-abierto) {
	cursor: pointer;
}

.vis-noticia__media .vis-noticia__video-mandos {
	position: absolute;
	z-index: 4;
	inset-block-start: 0;
	inset-inline-start: max(var(--vis-gutter), (100% - var(--wp--style--global--wide-size)) / 2);
	gap: 0;
	margin: 0;
}

.vis-noticia__media .vis-video-play .wp-block-button__link {
	position: relative;
	display: block;
	width: var(--vis-video-boton);
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--vis-vsc-amarillo);
	overflow: hidden;
	white-space: nowrap;
	text-indent: -200vw;
	transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vis-noticia__media .vis-video-play .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	text-indent: 0;
	background-color: var(--wp--preset--color--vis-vsc-pizarra);
	-webkit-mask: var(--vis-marca-video-glifo) center / 42% no-repeat;
	mask: var(--vis-marca-video-glifo) center / 42% no-repeat;
	transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vis-noticia__media .vis-video-play .wp-block-button__link:hover::after,
.vis-noticia__media .vis-video-play .wp-block-button__link:focus-visible::after {
	transform: scale(1.12);
}

.vis-noticia__media.esta-abierto .vis-noticia__video-mandos {
	display: none;
}

/* El velo cubre la imagen entera; el clic en él cierra el vídeo. */
.vis-noticia__velo {
	position: absolute;
	z-index: 2;
	inset: 0;
	width: 100%;
	padding: 0;
	border: 0;
	background-color: rgb(0 0 0 / 0.78);
	cursor: zoom-out;
	animation: vis-velo-entra 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vis-velo-entra {
	from {
		opacity: 0;
	}
}

/* El vídeo, centrado y en 16:9 dentro de la imagen, con un margen arriba y
   abajo. `inset: 0` + `margin: auto` + alto y proporción lo centran solos. Va
   con el grupo delante: `.vis-noticia__media > *` anula los márgenes y el
   vídeo se quedaba pegado abajo. */
.vis-noticia__media > .vis-noticia__reproductor {
	position: absolute;
	z-index: 3;
	inset: 0;
	height: calc(100% - 2 * var(--wp--custom--space-6));
	max-width: calc(100% - 2 * var(--vis-gutter));
	aspect-ratio: 16 / 9;
	margin: auto;
	background-color: #000;
}

.vis-noticia__reproductor video,
.vis-noticia__reproductor iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
}

/* Sobre el vídeo, una capa transparente recoge el clic para pausar. Con
   YouTube sin mandos, el clic en el iframe no pausa. */
.vis-noticia__reproductor-capa {
	position: absolute;
	inset: 0;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.vis-noticia__reproductor-capa:focus-visible {
	outline: 3px solid var(--wp--preset--color--vis-vsc-amarillo);
	outline-offset: -3px;
}

/* En móvil y tableta el vídeo SUSTITUYE a la imagen (13-oct-2026): la caja
   toma la proporción del vídeo, la foto y el velo se retiran y el vídeo la
   llena a sangre, sin hueco arriba ni a los lados. Antes iba pegado abajo
   sobre la foto de 320 px y dejaba una franja oscura encima; en tableta,
   más alto que la caja, se montaba sobre la fecha. La caja conserva su
   tamaño cuando el vídeo pasa a la esquina, así que la página no salta. */
@media (max-width: 781px) {
	.vis-noticia__media.esta-abierto {
		aspect-ratio: 16 / 9;
		background-color: #000;
	}

	.vis-noticia__media.esta-abierto > .vis-noticia__imagen,
	.vis-noticia__media.esta-abierto > .vis-noticia__velo {
		display: none;
	}

	.vis-noticia__media > .vis-noticia__reproductor {
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		margin: 0;
	}
}

/* --- Vídeo fijo en la esquina (13-oct-2026) --------------------------------
   Con el vídeo abierto y la imagen ya atrás, video-nota.js pone
   `esta-flotante` en la caja: el reproductor pasa a la esquina inferior
   derecha, en pequeño y por encima del contenido (la cabecera sticky va a
   z-index 40). El nodo no se mueve, así que el vídeo no se corta. Aparece el
   botón de cerrar; el clic en el vídeo sigue pausando. */

.vis-noticia__media.esta-flotante > .vis-noticia__reproductor {
	position: fixed;
	z-index: 45;
	inset: auto var(--wp--custom--space-5) var(--wp--custom--space-5) auto;
	width: clamp(240px, 26vw, 400px);
	height: auto;
	max-width: none;
	margin: 0;
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
	animation: vis-video-flota 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vis-noticia__reproductor-cerrar {
	position: absolute;
	z-index: 1;
	inset-block-start: 0;
	inset-inline-end: 0;
	display: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--vis-vsc-amarillo);
	cursor: pointer;
}

/* El botón de cerrar sale con el vídeo en la esquina y, en móvil y tableta,
   también en su sitio: allí no hay velo que pulsar para volver a la foto. */
.vis-noticia__media.esta-flotante .vis-noticia__reproductor-cerrar {
	display: block;
}

@media (max-width: 781px) {
	.vis-noticia__media.esta-abierto .vis-noticia__reproductor-cerrar {
		display: block;
	}
}

.vis-noticia__reproductor-cerrar::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--vis-vsc-pizarra);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 50% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 50% no-repeat;
}

.vis-noticia__reproductor-cerrar:hover,
.vis-noticia__reproductor-cerrar:focus-visible {
	background-color: var(--wp--preset--color--vis-vsc-blanco);
}

.vis-noticia__reproductor-cerrar:focus-visible {
	outline: 3px solid var(--wp--preset--color--vis-vsc-amarillo);
	outline-offset: 2px;
}

@keyframes vis-video-flota {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

@media (max-width: 781px) {
	.vis-noticia__media.esta-flotante > .vis-noticia__reproductor {
		inset: auto var(--wp--custom--space-3) var(--wp--custom--space-3) auto;
		width: min(62vw, 300px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vis-noticia__velo,
	.vis-noticia__media.esta-flotante > .vis-noticia__reproductor {
		animation: none;
	}

	.vis-noticia__media .vis-video-play .wp-block-button__link,
	.vis-noticia__media .vis-video-play .wp-block-button__link::after {
		transition: none;
	}
}

/* --- 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. */
.vis-noticia__cuerpo,
.vis-relacionadas {
	padding-block: 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.
   «Otras noticias» lleva un filete bajo la cabecera: el token
   va entre el filete y las tarjetas. */
.vis-relacionadas__rejilla.vis-actualidad__rejilla {
	padding-block-start: var(--vis-espacio-titular);
}