/*
 * ZeryuGames — capa de diseño
 * ---------------------------------------------------------------------------
 * Se carga después del CSS de ColorMag desde el mu-plugin, así que no hace
 * falta tocar el tema ni perderlo en una actualización.
 *
 * Idea: el mueble de una recreativa. Cromo negro (navegación, marquesina, pie)
 * envolviendo una pantalla blanca donde se lee. El rojo de la marca es masa,
 * no adorno, y aparece a dos temperaturas: #E30204 para el cuerpo y #FF1E1E
 * solo en el filo, donde hace de luz.
 *
 * El motivo repetido es el SESGO: el logotipo ya es oblicuo, así que ese mismo
 * corte de 10° vuelve en etiquetas, títulos de sección y botones. Siempre se
 * sesga el fondo, nunca el texto.
 *
 * Jerarquía tipográfica por ANCHURA, no por familia: Archivo es variable y su
 * eje wdth hace el trabajo que normalmente piden dos tipografías distintas.
 * Una sola petición de fuente.
 */

:root {
	--zg-ink:      #000000;   /* negro de mueble apagado */
	--zg-volt:     #E30204;   /* rojo de marca */
	--zg-arc:      #FF1E1E;   /* rojo caliente, solo filo y resplandor */
	--zg-screen:   #FFFFFF;   /* superficie de lectura */
	--zg-haze:     #F0F0F1;   /* fondo de página */
	--zg-line:     #E2E2E5;   /* hilo de separación */
	--zg-body:     #26262B;   /* texto largo: negro puro cansa a 17px */
	--zg-dim:      #6E6E73;   /* metadatos */

	--zg-shear:    -10deg;
	--zg-ease:     cubic-bezier(.2, .7, .2, 1);
	--zg-quick:    .22s var(--zg-ease);
	--zg-slow:     .5s var(--zg-ease);

	--zg-wide:     'wdth' 118;
	--zg-normal:   'wdth' 100;
	--zg-narrow:   'wdth' 84;
}

/* ─────────────────────────────────────────────── Base tipográfica */

body,
.cm-content,
button,
input,
select,
textarea {
	font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-variation-settings: var(--zg-normal);
	font-optical-sizing: auto;
}

body {
	background: var(--zg-haze);
	color: var(--zg-body);
	-webkit-font-smoothing: antialiased;
}

.cm-content {
	background: transparent;
}

/* Los titulares van anchos y apretados: ancho de marquesina. */
h1, h2, h3, h4,
.cm-entry-title,
.cm-widget-title,
.cm-site-title {
	font-family: 'Archivo', system-ui, sans-serif;
	font-variation-settings: var(--zg-wide);
	font-weight: 800;
	letter-spacing: -.022em;
	color: var(--zg-ink);
	text-wrap: balance;
}

/* Los metadatos van condensados: ocupan poco y se leen como rotulación. */
.cm-post-date,
.cm-author,
.cm-below-entry-meta,
.cm-post-categories,
.cm-entry-button,
.cm-primary-nav,
.zeryu-lista-secciones {
	font-variation-settings: var(--zg-narrow);
}

/* ─────────────────────────────────────────────── Cabecera */

/*
 * La cabecera se queda clara a propósito: el logotipo lleva "GAMES.COM" en
 * tinta oscura y sobre negro se perdería media marca.
 */
.cm-header-builder .cm-header-main-row {
	background: var(--zg-screen);
	border-bottom: 1px solid var(--zg-line);
}

/* El logotipo ya dice el nombre y el lema: sobran repetidos en texto. */
.cm-site-title,
.cm-site-description {
	display: none !important;
}

.custom-logo-link img {
	max-height: 72px;
	width: auto;
}

@media (max-width: 768px) {
	.custom-logo-link img {
		max-height: 52px;
	}
}

.cm-header-builder .cm-header-main-row .cm-container {
	padding-top: 1.12rem;
	padding-bottom: 1.12rem;
}

.cm-site-branding img,
.custom-logo {
	transition: filter var(--zg-quick);
}

/* ─────────────────────────────────────────────── Navegación */

/*
 * El tema pinta esta franja con .cm-header-builder.cm-full-width, así que hace
 * falta igualar su especificidad para que el negro gane sin pelear a golpe de
 * !important en todo.
 */
.cm-header-builder.cm-full-width .cm-header-bottom-row,
.cm-header-builder .cm-header-bottom-row,
.cm-header-builder .cm-primary-nav,
.cm-header-bottom-row {
	background: var(--zg-ink);
}

/* Un hilo caliente separa el cromo del contenido. */
.cm-header-builder .cm-header-bottom-row {
	border-bottom: 2px solid var(--zg-volt);
}

/* Repartido a lo ancho el menú saltaba de línea; apretado cabe entero. */
.cm-primary-menu {
	justify-content: flex-start !important;
}

.cm-primary-nav ul li a,
.cm-primary-menu ul li a {
	color: #fff;
	font-variation-settings: var(--zg-narrow);
	font-weight: 600;
	font-size: 1.408rem;
	text-transform: uppercase;
	letter-spacing: .015em;
	position: relative;
	padding: 1.6rem 1.312rem;
	transition: color var(--zg-quick);
}

.cm-primary-nav > ul > li > a::after {
	content: '';
	position: absolute;
	left: 1.312rem;
	right: 1.312rem;
	bottom: 0.96rem;
	height: 3px;
	background: var(--zg-arc);
	transform: skewX(var(--zg-shear)) scaleX(0);
	transform-origin: left center;
	transition: transform var(--zg-quick);
}

.cm-primary-nav > ul > li > a:hover::after,
.cm-primary-nav > ul > li > a:focus-visible::after,
.cm-primary-nav > ul > li.current-menu-item > a::after,
.cm-primary-nav > ul > li.current-category-ancestor > a::after {
	transform: skewX(var(--zg-shear)) scaleX(1);
}

.cm-primary-nav ul li a:hover,
.cm-primary-nav ul li.current-menu-item > a {
	color: #fff;
	background: transparent;
}

/* Submenús: caja negra con filo rojo, nada de gris corporativo. */
.cm-primary-nav .sub-menu,
.cm-primary-nav .children {
	background: #0A0A0A;
	border-top: 2px solid var(--zg-volt);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.cm-primary-nav .sub-menu li a {
	padding: 1.152rem 1.68rem;
	font-size: 1.376rem;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.cm-primary-nav .sub-menu li a:hover {
	background: var(--zg-volt);
}

.cm-primary-nav .sub-menu > li > a::after {
	display: none;
}

/* ─────────────────────────────────────────────── Marquesina de portada */

/*
 * La franja superior de la portada es el frontal del mueble: negra, con el
 * rayado tenue de un tubo y un hilo rojo arriba que se enciende al cargar.
 */
.cm-front-page-top-section {
	position: relative;
	background: var(--zg-ink);
	padding: 3.52rem 0 4.8rem;
	margin-bottom: 4.16rem;
	isolation: isolate;

	/* Alto del carrusel. bxSlider lo fija a la altura de la primera imagen y
	   dejaba medio metro de negro bajo ella; aquí se le da una altura propia y
	   las imágenes se recortan para llenarla. */
	--zg-slider-h: clamp(300px, 46vw, 620px);
}

/*
 * El tema pone esta franja en columna y solo la pasa a fila a partir de 62em.
 * En columna, alinear al inicio encogería las dos partes a lo ancho, así que
 * esto vive únicamente en escritorio.
 */
@media screen and (min-width: 62em) {
	/* Sin esto las dos columnas se estiran a la más alta y la corta queda hueca. */
	.cm-front-page-top-section {
		align-items: flex-start;
	}

	.cm-front-page-top-section .cm-slider-area {
		align-self: flex-start;
	}
}

/* El tema separa el contenido de la cabecera; la marquesina tiene que pegarse. */
.home #cm-content,
.home .cm-content {
	padding-top: 0 !important;
}

.cm-front-page-top-section .bx-viewport {
	height: var(--zg-slider-h) !important;
}

.cm-front-page-top-section .cm-single-slide img {
	height: var(--zg-slider-h);
	width: 100%;
	object-fit: cover;
	display: block;
}

/* La diapositiva contigua asomaba por el canto contra el negro. */
.cm-front-page-top-section .cm-slider-area {
	overflow: hidden;
}

/* Sangrado completo aunque el tema lo meta en un contenedor. */
.cm-front-page-top-section::after {
	content: '';
	position: absolute;
	inset: 0 -100vw;
	z-index: -2;
	background:
		repeating-linear-gradient(
			to bottom,
			rgba(255, 255, 255, .035) 0 1px,
			transparent 1px 3px
		),
		var(--zg-ink);
}

/* El encendido: un solo momento, no una entrada por sección. */
.cm-front-page-top-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100vw;
	right: -100vw;
	height: 3px;
	z-index: 1;
	background: linear-gradient(90deg, var(--zg-volt), var(--zg-arc) 55%, var(--zg-volt));
	transform: scaleX(0);
	transform-origin: center;
	animation: zg-encendido .55s var(--zg-ease) forwards;
}

@keyframes zg-encendido {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.cm-front-page-top-section .cm-slider-area,
.cm-front-page-top-section .cm-beside-slider-widget {
	animation: zg-asoma .5s var(--zg-ease) .3s backwards;
}

@keyframes zg-asoma {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Dentro de la marquesina todo va en claro. */
.cm-front-page-top-section .cm-entry-title a,
.cm-front-page-top-section .cm-entry-title,
.cm-front-page-top-section .cm-widget-title,
.cm-front-page-top-section .cm-widget-title span {
	color: #fff;
}

/*
 * Dentro de la marquesina no puede quedar ninguna caja clara: el tema reparte
 * fondos blancos por varias clases distintas según el estilo del widget, y una
 * sola de ellas rompe la franja negra.
 */
.cm-front-page-top-section .widget,
.cm-front-page-top-section .cm-post,
.cm-front-page-top-section .cm-posts,
.cm-front-page-top-section article,
.cm-front-page-top-section .post-small,
.cm-front-page-top-section .cm-first-post,
.cm-front-page-top-section [class*="cm-featured-posts"] {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border-color: rgba(255, 255, 255, .14);
}

/*
 * Sobre el negro estas piezas no deben leerse como fichas sueltas sino como una
 * lista: fuera el recuadro del tema, solo un hilo que las separa.
 */
.cm-front-page-top-section .cm-post {
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 0 !important;
	padding-bottom: 1.52rem;
	margin-bottom: 1.52rem;
}

.cm-front-page-top-section .cm-post:last-child {
	border-bottom: 0 !important;
	padding-bottom: 0;
	margin-bottom: 0;
}

.cm-front-page-top-section .cm-post .cm-post-content {
	padding: 0.16rem 0 0;
}

.cm-front-page-top-section .cm-post-date,
.cm-front-page-top-section .cm-author,
.cm-front-page-top-section .cm-entry-summary,
.cm-front-page-top-section .cm-below-entry-meta,
.cm-front-page-top-section .cm-below-entry-meta a {
	color: rgba(255, 255, 255, .62);
}

.cm-front-page-top-section .cm-entry-title a:hover {
	color: var(--zg-arc);
}

/* El titular del carrusel es la pieza grande de la página. */
.cm-featured-category-slider .cm-slide-content .cm-entry-title {
	font-size: clamp(2.4rem, 3.3vw, 4rem);
	line-height: 1.04;
	font-variation-settings: 'wdth' 112;
	letter-spacing: -.03em;
}

.cm-featured-category-slider .cm-slide-content {
	background: linear-gradient(to top, rgba(0, 0, 0, .92) 12%, rgba(0, 0, 0, .55) 55%, transparent);
	padding: 3.84rem 2.56rem 2.4rem;
}

/* ─────────────────────────────────────────────── Títulos de sección */

/*
 * ColorMag pinta un bloque de color con borde inferior. Se sustituye por una
 * barra de energía: cuña roja sesgada, título, y un hilo que arranca negro y
 * se apaga hacia la derecha.
 */
.cm-widget-title {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	border: 0 !important;
	margin: 0 0 1.84rem;
	font-size: 1.792rem;
	text-transform: uppercase;
	letter-spacing: .01em;
	font-variation-settings: 'wdth' 106;
}

/*
 * ColorMag colorea este span según la categoría del bloque, en varias reglas y
 * desde dentro del área del slider. Se neutraliza de una vez: el color ya lo
 * lleva la cuña sesgada de al lado.
 */
.cm-widget-title span,
.cm-slider-area .cm-widget-title span,
.cm-beside-slider-widget .cm-widget-title span {
	background: none !important;
	background-color: transparent !important;
	color: inherit !important;
	padding: 0 !important;
	border: 0 !important;
	display: inline-block;
	white-space: nowrap;
}

.cm-widget-title::before {
	content: '';
	flex: 0 0 auto;
	width: 0.8rem;
	height: 1.05em;
	background: var(--zg-volt);
	transform: skewX(var(--zg-shear));
}

.cm-widget-title::after {
	content: '';
	flex: 1 1 auto;
	height: 2px;
	min-width: 2.4rem;
	background: linear-gradient(90deg, var(--zg-ink) 0 4rem, var(--zg-line) 9.6rem);
}

.cm-front-page-top-section .cm-widget-title::after {
	background: linear-gradient(90deg, #fff 0 4rem, rgba(255, 255, 255, .18) 9.6rem);
}

.cm-widget-title.screen-reader-text {
	display: none;
}

/* ─────────────────────────────────────────────── Tarjetas */

.cm-posts .cm-post,
.cm-secondary .cm-post {
	background: var(--zg-screen);
	border: 1px solid var(--zg-line);
	border-radius: 2px;
	box-shadow: none !important;
	overflow: hidden;
	transition: border-color var(--zg-quick), transform var(--zg-quick);
}

.cm-posts .cm-post:hover {
	border-color: rgba(227, 2, 4, .45);
}

.cm-post .cm-post-content {
	padding: 1.76rem 1.84rem 2rem;
}

.cm-post .post-image,
.cm-post .cm-featured-image,
.cm-post .post-thumbnail {
	overflow: hidden;
	display: block;
	background: var(--zg-ink);
}

.cm-post .post-image img,
.cm-post .cm-featured-image img,
.cm-post .post-thumbnail img {
	display: block;
	width: 100%;
	transition: transform var(--zg-slow);
	will-change: transform;
}

.cm-post:hover .post-image img,
.cm-post:hover .cm-featured-image img,
.cm-post:hover .post-thumbnail img {
	transform: scale(1.045);
}

.cm-entry-title {
	line-height: 1.14;
	font-size: 1.84rem;
}

.cm-entry-title a {
	color: inherit;
	transition: color var(--zg-quick);
}

.cm-entry-title a:hover,
.cm-entry-title a:focus-visible {
	color: var(--zg-volt);
}

.cm-entry-summary,
.cm-entry-summary p {
	color: var(--zg-dim);
	font-size: 1.504rem;
	line-height: 1.55;
}

/* ─────────────────────────────────────────────── Etiquetas de categoría */

/*
 * Rótulo de recreativa: el fondo va sesgado, el texto recto. El pseudoelemento
 * se queda dentro porque el enlace crea su propio contexto de apilado.
 */
.cm-post-categories a,
.cm-entry-header-meta .cm-post-categories a {
	position: relative;
	isolation: isolate;
	display: inline-block;
	margin: 0 0.72rem 0.56rem 0;
	padding: .3em .72em;
	background: none;
	color: #fff;
	font-size: 1.088rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1.45;
	transition: color var(--zg-quick);
}

.cm-post-categories a::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--zg-volt);
	transform: skewX(var(--zg-shear));
	transition: background var(--zg-quick);
}

.cm-post-categories a:hover::before,
.cm-post-categories a:focus-visible::before {
	background: var(--zg-ink);
}

/* ─────────────────────────────────────────────── Metadatos */

.cm-below-entry-meta,
.cm-post-date,
.cm-author,
.cm-below-entry-meta a {
	color: var(--zg-dim);
	font-size: 1.248rem;
	font-weight: 500;
	letter-spacing: .01em;
}

.cm-below-entry-meta a:hover {
	color: var(--zg-volt);
}

.cm-icon {
	opacity: .55;
}

/* ─────────────────────────────────────────────── Botón */

a.cm-entry-button,
.cm-entry-button a,
.cm-entry-button span,
.colormag-button,
.wp-block-button__link {
	position: relative;
	isolation: isolate;
	display: inline-block;
	padding: .55em 1.15em;
	/* El tema lo pinta de rojo macizo; aquí es un contorno que se rellena. */
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	color: var(--zg-ink);
	font-size: 1.248rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	border-radius: 0;
	transition: color var(--zg-quick);
}

a.cm-entry-button::before,
.cm-entry-button a::before,
.colormag-button::before,
.wp-block-button__link::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 2px solid var(--zg-ink);
	background: var(--zg-volt);
	transform: skewX(var(--zg-shear)) scaleX(0);
	transform-origin: left center;
	transition: transform var(--zg-quick);
}

a.cm-entry-button::after,
.cm-entry-button a::after,
.colormag-button::after,
.wp-block-button__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	border: 2px solid var(--zg-ink);
	transform: skewX(var(--zg-shear));
}

a.cm-entry-button:hover,
a.cm-entry-button:focus-visible,
.cm-entry-button a:hover,
.cm-entry-button a:focus-visible,
.colormag-button:hover,
.wp-block-button__link:hover {
	color: #fff;
}

a.cm-entry-button:hover::before,
a.cm-entry-button:focus-visible::before,
.cm-entry-button a:hover::before,
.cm-entry-button a:focus-visible::before,
.colormag-button:hover::before,
.wp-block-button__link:hover::before {
	transform: skewX(var(--zg-shear)) scaleX(1);
}

/* ─────────────────────────────────────────────── Artículo */

.single .cm-primary {
	background: var(--zg-screen);
	border: 1px solid var(--zg-line);
	border-radius: 2px;
	padding: 3.52rem clamp(1.76rem, 3vw, 4.16rem) 3.84rem;
}

.single .cm-entry-title,
.page .cm-entry-title {
	font-size: clamp(3.04rem, 4.4vw, 4.96rem);
	line-height: 1.03;
	letter-spacing: -.028em;
	font-variation-settings: 'wdth' 114;
	margin: 0.56rem 0 1.28rem;
}

.single .cm-entry-header {
	border-bottom: 2px solid var(--zg-ink);
	padding-bottom: 1.76rem;
	margin-bottom: 2.24rem;
}

.single .cm-post-content > p,
.single .cm-entry-content p,
.page .cm-entry-content p {
	font-size: 1.696rem;
	line-height: 1.72;
	color: var(--zg-body);
	max-width: 68ch;
}

.single .cm-entry-content h2,
.single .cm-post-content h2,
.page .cm-entry-content h2 {
	font-size: clamp(2.16rem, 2.6vw, 2.88rem);
	margin: 3.52rem 0 1.12rem;
	padding-left: 1.36rem;
	border-left: 0.512rem solid var(--zg-volt);
	line-height: 1.15;
}

.single .cm-entry-content h3,
.single .cm-post-content h3 {
	font-size: 1.92rem;
	margin: 2.72rem 0 0.8rem;
	font-variation-settings: 'wdth' 106;
}

/*
 * El subrayado pertenece al texto corrido; en titulares y navegación estorba.
 * Además el color de enlace del tema es ahora el rojo de marca, así que hay que
 * devolver los títulos al negro a mano.
 */
a {
	text-decoration: none;
}

.cm-secondary .cm-entry-title a,
.cm-posts .cm-entry-title a,
.cm-first-post .cm-entry-title a {
	color: var(--zg-ink);
	text-decoration: none;
}

/*
 * Pero sobre negro esa misma regla dejaba los titulares invisibles. Las dos
 * zonas oscuras la vuelven a ganar con un selector más específico.
 */
.cm-front-page-top-section .cm-entry-title a,
.cm-front-page-top-section .cm-posts .cm-entry-title a,
.cm-front-page-top-section .cm-first-post .cm-entry-title a,
.cm-footer .cm-entry-title a,
.cm-footer .cm-posts .cm-entry-title a {
	color: #fff;
}

.cm-front-page-top-section .cm-entry-title a:hover,
.cm-front-page-top-section .cm-posts .cm-entry-title a:hover,
.cm-footer .cm-entry-title a:hover {
	color: var(--zg-arc);
}

.single .cm-post-content > p a,
.single .cm-post-content > ul a,
.single .cm-post-content > ol a,
.single .cm-entry-content p a,
.single .cm-entry-content li a,
.page .cm-entry-content p a {
	color: var(--zg-volt);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color var(--zg-quick);
}

.single .cm-post-content > p a:hover,
.single .cm-entry-content p a:hover {
	color: var(--zg-ink);
}

/*
 * OJO: en la ficha del artículo, .cm-entry-summary no es el extracto sino el
 * contenedor del cuerpo entero. Aquí van los estilos de lectura de verdad.
 */
.single .cm-entry-summary p,
.page .cm-entry-summary p {
	font-size: 1.7rem;
	line-height: 1.72;
	font-weight: 400;
	font-variation-settings: var(--zg-normal);
	color: var(--zg-body);
	max-width: 68ch;
	margin: 0 0 1.5rem;
}

/*
 * El contenido heredado de 2017-2022 usa H1 para sus epígrafes internos. No se
 * toca el HTML de 266 entradas: se le baja el rango visual para que no compita
 * con el titular de la pieza.
 */
.single .cm-entry-summary h1,
.single .cm-entry-summary h2,
.page .cm-entry-summary h2 {
	font-size: clamp(2.2rem, 2.8vw, 2.9rem);
	line-height: 1.16;
	margin: 3.4rem 0 1.1rem;
	padding-left: 1.35rem;
	border-left: .5rem solid var(--zg-volt);
}

.single .cm-entry-summary h3 {
	font-size: 1.95rem;
	line-height: 1.25;
	margin: 2.6rem 0 .8rem;
	font-variation-settings: 'wdth' 106;
}

.single .cm-entry-summary a {
	color: var(--zg-volt);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color var(--zg-quick);
}

.single .cm-entry-summary a:hover {
	color: var(--zg-ink);
}

.single .cm-entry-summary img {
	max-width: 100%;
	height: auto;
	border-radius: 2px;
}

.single .cm-entry-summary ul,
.single .cm-entry-summary ol {
	font-size: 1.7rem;
	line-height: 1.68;
	color: var(--zg-body);
	max-width: 66ch;
}

/*
 * La barra lateral mide 321 px y la miniatura se comía 130, dejando el título
 * en una columna de 113 px que lo partía en cinco líneas.
 */
.cm-secondary .cm-post > :first-child {
	width: 88px !important;
	flex: 0 0 88px;
}

/* Sin esto la miniatura se deforma para llenar su hueco. */
.cm-secondary .cm-post > :first-child img,
.cm-footer .cm-post > :first-child img {
	height: 62px;
	object-fit: cover;
}

.cm-secondary .cm-post .cm-entry-title {
	font-size: 1.5rem;
	line-height: 1.26;
}

.single blockquote,
.cm-entry-content blockquote {
	position: relative;
	margin: 2.88rem 0;
	padding: 0.32rem 0 0.32rem 2.24rem;
	border: 0;
	font-size: 1.84rem;
	line-height: 1.5;
	font-variation-settings: 'wdth' 104;
	font-weight: 500;
	color: var(--zg-ink);
}

.cm-entry-content blockquote::before {
	content: '';
	position: absolute;
	left: 0;
	top: .15em;
	bottom: .15em;
	width: 0.544rem;
	background: var(--zg-volt);
	transform: skewX(var(--zg-shear));
}

.single .post-thumbnail img,
.single .cm-featured-image img {
	border-radius: 2px;
}

/* Nota de vídeo retirado: convención propia, se respeta y se le da forma. */
.zeryu-video-no-disponible {
	margin: 2.24rem 0;
	padding: 1.28rem 1.6rem;
	background: var(--zg-haze);
	border-left: 0.448rem solid var(--zg-dim);
	color: var(--zg-dim);
	font-size: 1.472rem;
}

.zeryu-video-no-disponible em {
	font-style: normal;
}

iframe[src*="youtube-nocookie"] {
	max-width: 100%;
	border-radius: 2px;
}

/* ─────────────────────────────────────────────── Barra lateral */

.cm-secondary .widget {
	background: var(--zg-screen);
	border: 1px solid var(--zg-line);
	border-radius: 2px;
	padding: 1.84rem 1.84rem 2.08rem;
	margin-bottom: 2.08rem;
	box-shadow: none;
}

.zeryu-lista-secciones {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.64rem;
}

.zeryu-lista-secciones li {
	margin: 0;
}

.zeryu-lista-secciones a {
	position: relative;
	isolation: isolate;
	display: inline-block;
	padding: .34em .78em;
	color: var(--zg-ink);
	font-size: 1.248rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .015em;
	transition: color var(--zg-quick);
}

.zeryu-lista-secciones a::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 1px solid var(--zg-line);
	background: var(--zg-volt);
	transform: skewX(var(--zg-shear)) scaleX(0);
	transform-origin: left center;
	transition: transform var(--zg-quick), border-color var(--zg-quick);
}

.zeryu-lista-secciones a:hover,
.zeryu-lista-secciones a:focus-visible {
	color: #fff;
}

.zeryu-lista-secciones a:hover::before,
.zeryu-lista-secciones a:focus-visible::before {
	border-color: var(--zg-volt);
	transform: skewX(var(--zg-shear)) scaleX(1);
}

.cm-secondary .wp-block-search__input {
	border: 1px solid var(--zg-line);
	border-radius: 2px;
	padding: 0.96rem 1.12rem;
	font-size: 1.472rem;
}

.cm-secondary .wp-block-search__input:focus {
	outline: 2px solid var(--zg-volt);
	outline-offset: 1px;
}

/* ─────────────────────────────────────────────── Pie */

.cm-footer,
.cm-footer-builder {
	background: var(--zg-ink);
	color: rgba(255, 255, 255, .72);
	border-top: 3px solid var(--zg-volt);
}

.cm-footer .widget,
.cm-footer-builder .widget {
	background: transparent;
	border: 0;
	padding: 0;
}

.cm-footer h2,
.cm-footer .cm-widget-title,
.cm-footer .cm-widget-title span {
	color: #fff;
	font-size: 1.6rem;
}

.cm-footer .cm-widget-title::after {
	background: linear-gradient(90deg, #fff 0 3.2rem, rgba(255, 255, 255, .15) 8rem);
}

.cm-footer p,
.cm-footer .cm-entry-summary {
	color: rgba(255, 255, 255, .66);
	font-size: 1.44rem;
	line-height: 1.6;
	max-width: 42ch;
}

.cm-footer a {
	color: #fff;
}

.cm-footer a:hover {
	color: var(--zg-arc);
}

.cm-footer .zeryu-lista-secciones a {
	color: rgba(255, 255, 255, .85);
}

.cm-footer .zeryu-lista-secciones a::before {
	border-color: rgba(255, 255, 255, .18);
}

.cm-footer .cm-post {
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.cm-footer .cm-entry-title a {
	color: #fff;
	font-size: 1.52rem;
}

.cm-footer .cm-post-date,
.cm-footer .cm-below-entry-meta,
.cm-footer .cm-below-entry-meta a {
	color: rgba(255, 255, 255, .5);
}

.cm-footer-bar-area,
.cm-footer-bottom-row {
	background: #000;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-variation-settings: var(--zg-narrow);
	font-size: 1.312rem;
}

.cm-footer-bar-area a,
.cm-footer-bottom-row a {
	color: rgba(255, 255, 255, .8) !important;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-weight: 600;
	transition: color var(--zg-quick);
}

.cm-footer-bar-area a:hover,
.cm-footer-bottom-row a:hover {
	color: var(--zg-arc) !important;
}

/* ─────────────────────────────────────────────── Archivos y paginación */

.archive .cm-page-header,
.cm-page-header {
	background: var(--zg-screen);
	border: 1px solid var(--zg-line);
	border-left: 0.64rem solid var(--zg-volt);
	border-radius: 2px;
	padding: 2.08rem 2.24rem;
	margin-bottom: 2.56rem;
}

.cm-page-title,
.cm-archive-title {
	font-size: clamp(2.4rem, 3.4vw, 3.52rem);
	margin: 0 0 0.56rem;
	text-transform: uppercase;
	letter-spacing: -.015em;
}

/* Mismo recuadro de color que en los títulos de sección, misma cura. */
.cm-page-title span,
.cm-archive-title span,
.page-title span {
	background: none !important;
	background-color: transparent !important;
	color: var(--zg-ink) !important;
	padding: 0 !important;
}

/*
 * El ítem activo del menú llevaba un rectángulo rojo. El color lo pone el <li>,
 * no el enlace. La barra roja inferior ya dice dónde estás, así que la
 * navegación se queda limpia.
 */
.cm-primary-nav ul li.current-menu-item,
.cm-primary-nav ul li.current-menu-parent,
.cm-primary-nav ul li.current-menu-ancestor,
.cm-primary-nav ul li.current-category-ancestor,
.cm-primary-nav ul li.current_page_item,
.cm-primary-menu > li.current-menu-item,
.cm-primary-menu > li:hover,
.cm-primary-nav ul li.current-menu-item > a,
.cm-primary-nav ul li.current-menu-parent > a,
.cm-primary-nav ul li.current-category-ancestor > a,
.cm-primary-menu > li.current-menu-item > a,
.cm-primary-menu > li.current_page_item > a,
.cm-primary-menu > li:hover > a {
	background: transparent !important;
	background-color: transparent !important;
	color: #fff !important;
}

/* En el desplegable sí conviene que el elemento bajo el cursor se encienda. */
.cm-primary-nav .sub-menu li:hover,
.cm-primary-nav .sub-menu li:hover > a {
	background: var(--zg-volt) !important;
}

.cm-archive-description,
.taxonomy-description {
	color: var(--zg-dim);
	font-size: 1.568rem;
	line-height: 1.55;
	max-width: 62ch;
	margin: 0;
}

.cm-pagination .page-numbers,
.nav-links .page-numbers {
	border: 1px solid var(--zg-line);
	border-radius: 2px;
	color: var(--zg-ink);
	font-weight: 700;
	font-variation-settings: var(--zg-narrow);
	transition: background var(--zg-quick), color var(--zg-quick), border-color var(--zg-quick);
}

.cm-pagination .page-numbers:hover,
.cm-pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: var(--zg-volt);
	border-color: var(--zg-volt);
	color: #fff;
}

/* ─────────────────────────────────────────────── Comentarios */

.comment-list .comment-body {
	background: var(--zg-screen);
	border: 1px solid var(--zg-line);
	border-radius: 2px;
	padding: 1.76rem 1.92rem;
}

.comment-author .fn,
.comment-author a {
	color: var(--zg-ink);
	font-weight: 700;
	font-variation-settings: var(--zg-narrow);
}

#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
	border: 1px solid var(--zg-line);
	border-radius: 2px;
	padding: 1.04rem 1.2rem;
	font-family: inherit;
}

#respond input:focus,
#respond textarea:focus {
	outline: 2px solid var(--zg-volt);
	outline-offset: 1px;
	border-color: transparent;
}

/* ─────────────────────────────────────────────── Accesibilidad */

a:focus-visible,
button:focus-visible,
input:focus-visible,
.cm-entry-title a:focus-visible {
	outline: 3px solid var(--zg-arc);
	outline-offset: 2px;
}

::selection {
	background: var(--zg-volt);
	color: #fff;
}

/* La imagen de respaldo con la marca no debe pedir protagonismo. */
.zeryu-destacada-generica {
	object-fit: cover;
}

/* ─────────────────────────────────────────────── Móvil */

@media (max-width: 991px) {
	.cm-front-page-top-section {
		padding: 2.24rem 0 2.56rem;
		margin-bottom: 2.88rem;
	}

	.cm-primary-nav ul li a {
		padding: 1.44rem 1.6rem;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}

	.cm-primary-nav > ul > li > a::after {
		display: none;
	}

	.single .cm-primary {
		padding: 2.24rem 1.76rem 2.56rem;
	}

	.cm-widget-title {
		font-size: 1.6rem;
	}
}

@media (max-width: 600px) {
	.single .cm-entry-title,
	.page .cm-entry-title {
		font-variation-settings: 'wdth' 104;
		letter-spacing: -.02em;
	}

	.zeryu-lista-secciones {
		gap: 0.48rem;
	}
}

/* ─────────────────────────────────────────────── Movimiento reducido */

@media (prefers-reduced-motion: reduce) {
	.cm-front-page-top-section::before,
	.cm-front-page-top-section .cm-slider-area,
	.cm-front-page-top-section .cm-beside-slider-widget {
		animation: none;
		transform: none;
		opacity: 1;
	}

	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ─────────────────────────────────────────────── Cabecera móvil */

/*
 * De fábrica, ColorMag pone el logotipo en la columna CENTRAL de una fila y el
 * botón de menú en OTRA fila distinta: una barra oscura entera dedicada a un
 * solo icono. Se convierte la fila móvil en un flex para traer el botón a la
 * misma línea, a la izquierda del logotipo, y la barra desaparece.
 */
@media screen and (max-width: 768px) {
	.cm-header-builder .cm-mobile-row {
		display: flex !important;
		align-items: center;
		/* Ancla del panel desplegable, que se abre con top: 100%. */
		position: relative;
	}

	.cm-header-builder .cm-mobile-row .cm-header-bottom-row {
		order: -1;
		flex: 0 0 auto;
		width: auto;
		background: transparent !important;
		border-top: 0 !important;
		box-shadow: none !important;
	}

	.cm-header-builder .cm-mobile-row .cm-header-bottom-row .cm-container {
		width: auto;
		max-width: none;
		padding: 0 0 0 14px;
	}

	.cm-header-builder .cm-mobile-row .cm-header-main-row {
		flex: 1 1 auto;
		min-width: 0;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.cm-header-builder .cm-mobile-row .cm-header-main-row .cm-container {
		padding-left: 12px;
	}

	/* El logotipo deja de ir centrado y se pega al botón. */
	.cm-header-builder .cm-mobile-row .cm-main-row {
		justify-content: flex-start;
	}

	.cm-header-builder .cm-mobile-row .cm-header-center-col {
		flex: 0 1 auto;
		justify-content: flex-start;
		margin: 0;
	}

	/* El icono venía en blanco porque contaba con la barra oscura detrás. */
	.cm-header-builder .cm-mobile-row .cm-menu-toggle {
		display: flex;
		align-items: center;
		padding: 6px !important;
	}

	.cm-header-builder .cm-mobile-row .cm-menu-toggle svg {
		fill: var(--zg-ink) !important;
		width: 28px;
		height: 28px;
	}

	/*
	 * El panel se anclaba a .cm-bottom-row, que ahora mide lo que el botón, así
	 * que saldría de ese ancho. Se pasa el ancla a la fila entera.
	 */
	.cm-header-builder .cm-mobile-row .cm-bottom-row,
	.cm-header-builder .cm-mobile-row .cm-mobile-nav-container {
		position: static;
	}

	.cm-header-builder .cm-mobile-row .cm-mobile-nav {
		width: 100%;
		left: 0;
		right: 0;
	}

	/* El desplegable, con el mismo negro y filo rojo que la navegación grande. */
	.cm-header-builder .cm-mobile-row .cm-mobile-open-container,
	.cm-header-builder .cm-mobile-row .cm-mobile-menu {
		background: var(--zg-ink) !important;
		border-top: 2px solid var(--zg-volt);
	}

	.cm-header-builder .cm-mobile-row .cm-mobile-menu li a {
		color: #fff;
		padding: 1.4rem 1.6rem;
		font-size: 1.5rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .015em;
		font-variation-settings: var(--zg-narrow);
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}

	.cm-header-builder .cm-mobile-row .cm-mobile-menu li a:hover,
	.cm-header-builder .cm-mobile-row .cm-mobile-menu li a:focus-visible {
		background: var(--zg-volt);
	}

	.cm-header-builder .cm-mobile-row .cm-mobile-menu .sub-menu li a {
		padding-left: 3.2rem;
		font-size: 1.4rem;
		color: rgba(255, 255, 255, .78);
	}

	.cm-header-builder .cm-mobile-row .cm-submenu-toggle svg {
		fill: #fff;
	}
}

/* ─────────────────────────────────────────────── Cabecera fija */

/*
 * Al pasar de largo la cabecera, vuelve deslizándose desde arriba y se queda.
 * El hueco que deja al salir del flujo lo rellena un separador que pone el
 * script, para que la página no pegue un salto.
 */
#cm-masthead.zg-cabecera-fija {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	transform: translateY(-100%);
	transition: transform .34s var(--zg-ease);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
}

#cm-masthead.zg-cabecera-fija.zg-visible {
	transform: translateY(0);
}

/* Encogida: en modo fijo manda la navegación, no la marca. */
#cm-masthead.zg-cabecera-fija .custom-logo-link img {
	max-height: 42px;
}

#cm-masthead.zg-cabecera-fija .cm-header-main-row {
	padding-top: 6px;
	padding-bottom: 6px;
}

#cm-masthead.zg-cabecera-fija .cm-primary-nav ul li a {
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
}

#cm-masthead.zg-cabecera-fija .cm-primary-nav > ul > li > a::after {
	bottom: .6rem;
}

@media screen and (max-width: 768px) {
	#cm-masthead.zg-cabecera-fija .cm-mobile-row .cm-header-main-row {
		padding-top: 5px;
		padding-bottom: 5px;
	}

	#cm-masthead.zg-cabecera-fija .custom-logo-link img {
		max-height: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#cm-masthead.zg-cabecera-fija {
		transition: none;
		transform: translateY(0);
	}
}

/* ─────────────────────────────────────────────── Títulos de bloque propio */

/*
 * Las listas de Secciones y Plataformas son bloques de HTML propio, así que su
 * <h2> no lleva la clase del tema y se quedaba con el rectángulo rojo de serie.
 * Se le da el mismo trato que a los títulos de sección: cuña y barra.
 */
.cm-secondary .widget_block > h2,
.cm-secondary .widget_block .wp-block-heading,
.cm-footer .widget_block > h2,
.cm-footer .widget_block .wp-block-heading {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	border: 0 !important;
	background: none !important;
	background-color: transparent !important;
	padding: 0 !important;
	margin: 0 0 1.84rem;
	font-size: 1.792rem;
	text-transform: uppercase;
	letter-spacing: .01em;
	font-variation-settings: 'wdth' 106;
	color: var(--zg-ink);
}

.cm-footer .widget_block > h2,
.cm-footer .widget_block .wp-block-heading {
	color: #fff;
}

.cm-secondary .widget_block > h2::before,
.cm-secondary .widget_block .wp-block-heading::before,
.cm-footer .widget_block > h2::before,
.cm-footer .widget_block .wp-block-heading::before {
	content: '';
	flex: 0 0 auto;
	width: .8rem;
	height: 1.05em;
	background: var(--zg-volt);
	transform: skewX(var(--zg-shear));
}

.cm-secondary .widget_block > h2::after,
.cm-secondary .widget_block .wp-block-heading::after {
	content: '';
	flex: 1 1 auto;
	height: 2px;
	min-width: 2.4rem;
	background: linear-gradient(90deg, var(--zg-ink) 0 4rem, var(--zg-line) 9.6rem);
}

.cm-footer .widget_block > h2::after,
.cm-footer .widget_block .wp-block-heading::after {
	content: '';
	flex: 1 1 auto;
	height: 2px;
	min-width: 2.4rem;
	background: linear-gradient(90deg, #fff 0 3.2rem, rgba(255, 255, 255, .15) 8rem);
}

/*
 * Con la cabecera fija, saltar a un ancla dejaría el destino escondido detrás.
 * Este margen de frenado lo compensa.
 */
html {
	scroll-padding-top: 110px;
}

@media screen and (max-width: 768px) {
	html {
		scroll-padding-top: 70px;
	}
}