@charset "UTF-8";
/* ==========================================================================
   CriticaBits — capa de mejoras visuales sobre CB01
   --------------------------------------------------------------------------
   Se carga después de style.css y gutenberg.css, y ANTES del CSS del
   Personalizador, de modo que cualquier ajuste manual que ya exista sigue
   teniendo la última palabra.

   ÍNDICE
     1. Tokens propios
     2. Correcciones y accesibilidad
     3. Tipografía y ritmo de lectura
     4. Animaciones base y revelado al hacer scroll
     5. Cabecera, logotipo y navegación
     6. Tarjetas de entrada y portada
     7. Contenido: enlaces, imágenes, citas, tablas
     8. Estilos de bloque de CriticaBits
     8 bis. Infografías de artículo
     8 ter. Tratamiento CRT
     8 quater. Cierre de artículo
     9. Barra de progreso de lectura y volver arriba
    10. Formularios, paginación y pie
    11. Movimiento reducido e impresión
   ========================================================================== */

/* ==========================================================================
   1. Tokens propios
   ========================================================================== */

:root {
	/* Neones de la marca, tomados del CSS que ya usaba el sitio. */
	--cb-neon-pink: #ff005e;
	--cb-neon-rose: #f45791;
	--cb-neon-cyan: #00d4ff;
	--cb-neon-aqua: #00ffff;
	--cb-neon-violet: #7a5cff;
	--cb-neon-amber: #ffb14f;

	/* Superficies translúcidas para tarjetas y paneles. */
	--cb-surface: rgba(34, 41, 57, 0.72);
	--cb-surface-strong: rgba(22, 27, 40, 0.92);
	--cb-hairline: rgba(255, 255, 255, 0.09);
	--cb-hairline-strong: rgba(255, 255, 255, 0.16);

	/* Sombras en tres alturas. */
	--cb-shadow-1: 0 1px 2px rgba(0, 0, 0, .28);
	--cb-shadow-2: 0 8px 24px rgba(0, 0, 0, .38);
	--cb-shadow-3: 0 18px 48px rgba(0, 0, 0, .52);

	/* Curvas y duraciones: una sola escala para todo el tema. */
	--cb-ease: cubic-bezier(.2, .7, .3, 1);
	--cb-ease-out: cubic-bezier(.16, 1, .3, 1);
	--cb-fast: 140ms;
	--cb-base: 260ms;
	--cb-slow: 520ms;

	/*
	 * Margen lateral del contenido.
	 *
	 * Defecto observado: el borde izquierdo del sitio daba tres saltos
	 * en la misma pantalla. A 1440 px el logotipo empezaba en 60, el
	 * titular del hero en 64 y la primera tarjeta en 70; a 1600 px la
	 * distancia entre el hero (100) y las tarjetas (150) era de 50 px, y
	 * el escalón se veía a simple vista al bajar del hero al listado.
	 *
	 * El contenedor del tema es de anchos escalonados (900 / 1140 /
	 * 960 / 1140 / 1300 px con 30 px de aire mínimo). Aquí se reproduce ese cálculo
	 * en un solo token para que la cabecera y el hero —que no usan el
	 * contenedor del tema— caigan sobre la misma vertical. Se usa 100%
	 * y no 100vw a propósito: vw incluye la barra de scroll y volvería a
	 * desalinear todo unos píxeles.
	 */
	--cb-edge: 30px;
}

@media (min-width: 992px) {
	:root { --cb-edge: max(30px, calc((100% - 900px) / 2)); }
}

@media (min-width: 1080px) {
	:root { --cb-edge: max(30px, calc((100% - 960px) / 2)); }
}

@media (min-width: 1200px) {
	:root { --cb-edge: max(30px, calc((100% - 1140px) / 2)); }
}

@media (min-width: 1364px) {
	:root { --cb-edge: max(30px, calc((100% - 1300px) / 2)); }
}

/*
 * Estas cuatro variables vivían en css/gutenberg.css, que son 50 KB. En la
 * portada y en los archivos era lo ÚNICO que llegaba a aplicarse de esa hoja
 * —209 bytes de 50.195, el 0,4 %—, porque ahí no se pinta ni un bloque de
 * Gutenberg. Traídas aquí, la hoja grande puede quedarse sólo para las
 * entradas y las páginas, que es donde hay bloques de verdad.
 */
:root {
	--block-widget-font-size: 1rem;
	--block-widget-title-font-size: 1.25rem;
	--block-widget-link-color: var(--widget-link-color);
	--block-widget-link-font-weight: var(--widget-link-font-weight);
}

/* ==========================================================================
   2. Correcciones y accesibilidad
   ========================================================================== */

/* Foco visible en todo el sitio. El tema no definía ninguno, así que
   navegar con teclado era literalmente a ciegas. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--cb-neon-cyan);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Enlace «saltar al contenido»: oculto hasta recibir el foco. */
.cb-skip-link {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 100000;
	transform: translate(-50%, -120%);
	padding: .85rem 1.5rem;
	background: var(--cb-neon-pink);
	color: #fff;
	font-family: var(--body-font);
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	border-radius: 0 0 8px 8px;
	box-shadow: var(--cb-shadow-2);
	transition: transform var(--cb-base) var(--cb-ease-out);
}

.cb-skip-link:focus {
	transform: translate(-50%, 0);
	outline: none;
}

/* El área principal recibe el foco tras usar el enlace de salto. */
#main:focus {
	outline: none;
}

/* ==========================================================================
   3. Tipografía y ritmo de lectura
   ========================================================================== */

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Evita que una palabra suelta quede colgando al final de un titular. */
.entry-title,
.archive-title,
.cb01-post-block-header .title {
	text-wrap: balance;
}

/* Los párrafos largos leen mejor con la última línea equilibrada. */
.entry-content > p {
	text-wrap: pretty;
}

.entry-content > p:not(:last-child) {
	margin-bottom: 1.35em;
}

/* Guiones y viudas en pantallas estrechas. */
@media (max-width: 640px) {

	.entry-content > p {
		hyphens: auto;
		-webkit-hyphens: auto;
	}
}

/* Los títulos de sección del artículo respiran más por arriba. */
.entry-content h2,
.entry-content h3 {
	margin-top: 2.2em;
	scroll-margin-top: 6rem;
}

/* Ancla de destino para los enlaces del índice de contenidos. */
.entry-content :target {
	scroll-margin-top: 6rem;
}

/* ==========================================================================
   4. Animaciones base y revelado al hacer scroll
   ========================================================================== */

@keyframes cb-fade-up {
	from { opacity: 0; transform: translate3d(0, 18px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes cb-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes cb-sheen {
	from { transform: translateX(-120%) skewX(-18deg); }
	to   { transform: translateX(220%) skewX(-18deg); }
}

@keyframes cb-scanline {
	from { background-position: 0 0; }
	to   { background-position: 0 100%; }
}

/*
 * Revelado al entrar en pantalla.
 *
 * El estado inicial sólo se aplica cuando hay JavaScript (.cb-js) y el
 * elemento ha sido registrado por el observador (data-cb-reveal). Así, si
 * el JS falla o está desactivado, el contenido nunca queda invisible.
 */
/*
 * Sólo opacidad, sin desplazamiento.
 *
 * Antes cada elemento entraba subiendo 20 px en 520 ms, escalonado de 60 en
 * 60. En la portada eso son veinte cosas moviéndose mientras bajas, y da la
 * sensación de que la página no acaba de asentarse nunca. Ahora aparecen
 * fundiendo en 220 ms y sin moverse ni un píxel: se nota que llegan, pero
 * nada cambia de sitio.
 */
.cb-js [data-cb-reveal] {
	opacity: 0;
	transition: opacity 220ms var(--cb-ease-out);
	transition-delay: var(--cb-reveal-delay, 0ms);
	will-change: opacity;
}

.cb-js [data-cb-reveal].is-revealed {
	opacity: 1;
	will-change: auto;
}

/* ==========================================================================
   5. Cabecera
   --------------------------------------------------------------------------
   Vive entera en assets/css/criticabits-header.css. Lo que había aquí
   apuntaba a .site-header y .primary-menu, clases de la cabecera del
   tema que ya no se imprime.
   ========================================================================== */

/* ==========================================================================
   6. Tarjetas de entrada y portada
   ========================================================================== */

.post-grid .article {
	transition: transform var(--cb-base) var(--cb-ease-out);
}

.post-grid .article:hover {
	transform: translateY(-4px);
}

/* La miniatura hace un zoom contenido y recorta el desbordamiento. */
.post-thumbnail {
	overflow: hidden;
	border-radius: var(--post-thumbnail-border-radius, 5px);
	position: relative;
}

.post-thumbnail img {
	transition: transform var(--cb-slow) var(--cb-ease-out), filter var(--cb-base) var(--cb-ease);
	backface-visibility: hidden;
}

/*
 * El acercamiento es de las tarjetas del listado. La portada del artículo
 * también lleva la clase .article, así que pasar el ratón por cualquier
 * punto del hero —incluido el titular— le daba un zoom que nadie había
 * pedido. .thumbnail-hero sólo la lleva la portada del artículo.
 */
.article:hover:not(.thumbnail-hero) .post-thumbnail img {
	transform: scale(1.045);
}

/*
 * Destello diagonal al pasar el ratón sobre la miniatura.
 *
 * Se usa ::before y no ::after porque el tema ya ocupa ::after en las
 * tarjetas «cover» para el degradado que oscurece la foto bajo el
 * titular. Se excluyen además esas tarjetas: ahí el brillo competiría
 * con el texto superpuesto.
 */
.post-grid .article:not(.cover) .post-thumbnail::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 45%;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, .16) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	opacity: 0;
	transform: translateX(-120%) skewX(-18deg);
}

.post-grid .article:not(.cover):hover .post-thumbnail::before {
	opacity: 1;
	animation: cb-sheen 900ms var(--cb-ease-out);
}

/* Título de la tarjeta: subrayado que crece desde la izquierda. */
.post-grid .entry-title a {
	background-image: linear-gradient(90deg, var(--cb-neon-rose), var(--cb-neon-cyan));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	transition: background-size var(--cb-base) var(--cb-ease-out);
}

.post-grid .article:hover .entry-title a,
.post-grid .entry-title a:focus-visible {
	background-size: 100% 2px;
}

/* Etiquetas de categoría con aspecto de píldora. */
.category-meta a,
.entry-categories a {
	transition:
		color var(--cb-fast) var(--cb-ease),
		background-color var(--cb-fast) var(--cb-ease),
		transform var(--cb-fast) var(--cb-ease);
}

.category-meta a:hover,
.entry-categories a:hover {
	transform: translateY(-1px);
}

/*
 * Pie de tarjeta a una misma línea.
 *
 * Defecto observado: en la rejilla de portada los titulares ocupan dos o
 * tres líneas según su longitud, y los metadatos venían justo detrás. En
 * la fila de cuatro tarjetas de «Lo Nuevo» los «0 Comentarios · 4 Min de
 * lectura» quedaban a y=1432 en las dos primeras y a y=1404 en las dos
 * siguientes: 28 px de desnivel en un borde que el ojo lee como línea.
 * La tarjeta ya se estira a la altura de la fila, así que basta con
 * empujar el bloque de metadatos al fondo.
 */
.post-grid .article:not(.cover) .post-inner {
	height: 100%;
}

.post-grid .article:not(.cover) .post-inner > .entry-meta.after-title {
	margin-top: auto;
}

/*
 * Velo de las tarjetas «cover».
 *
 * Defecto observado: el titular va en blanco sobre la foto y el degradado
 * del tema (negro abajo, transparente arriba) sólo aportaba un 25-37 %
 * de opacidad a la altura del texto. Medido sobre el píxel más claro que
 * queda bajo cada titular: «Commander Keen» 2,14:1, «Golpe en la Pequeña
 * China» 2,75:1, «ZX Spectrum» 2,88:1 — por debajo del 3:1 que pide el
 * texto grande. Se refuerza el tramo medio del degradado, que es donde
 * cae el texto, y se deja el borde superior casi limpio para no apagar
 * la imagen entera.
 *
 * Los selectores llevan .cb-header-active (clase del <body>) porque el
 * CSS en línea del Personalizador repite la regla del tema con la misma
 * especificidad y se imprime después: sin ese peso extra el degradado
 * nuevo no llegaba a aplicarse.
 */
/*
 * Igual que arriba: este velo es para las miniaturas del listado. En la
 * portada del artículo pisaba el barrido del tubo, que vive en ese mismo
 * pseudoelemento y tiene menos especificidad.
 */
.cb-header-active .post-grid .cover.has-post-media:not(.thumbnail-uncropped) .post-thumbnail::after,
.cb-header-active .cover.has-post-media:not(.thumbnail-uncropped):not(.thumbnail-hero) .cover-wrapper .post-thumbnail::after {
	background-image: linear-gradient(
		to top,
		rgba(4, 3, 10, .95) 0%,
		rgba(4, 3, 10, .86) 35%,
		rgba(4, 3, 10, .70) 62%,
		rgba(4, 3, 10, .52) 78%,
		rgba(4, 3, 10, .26) 90%,
		rgba(4, 3, 10, .08) 100%
	);
}

/*
 * Numeración de las tarjetas.
 *
 * Defecto observado: la chapa del número usaba un negro al 30 %. Sobre
 * una miniatura clara —el logotipo blanco de EA en la tarjeta 03— el
 * blanco del dígito se quedaba en 2,10:1 y el número desaparecía. Se
 * sube la opacidad del fondo y se desatura lo que hay detrás.
 */
.cb01-post-block .has-post-count .thumbnail-wrapper a::before,
.cb01-post-block .has-post-count .cb01-featured-media::before {
	background-color: rgba(4, 3, 10, .66);
	backdrop-filter: blur(6px) saturate(60%);
	-webkit-backdrop-filter: blur(6px) saturate(60%);
	border: 1px solid var(--cb-hairline-strong);
}

/* ==========================================================================
   7. Contenido: enlaces, imágenes, citas, tablas
   ========================================================================== */

/*
 * El sitio ya animaba el subrayado de los enlaces de párrafo. Se extiende
 * el mismo gesto a listas y pies de foto para que el contenido sea
 * coherente, y se acorta la transición: 0,6 s se percibía como retardo.
 */
.entry-content li a,
.entry-content figcaption a {
	position: relative;
	text-decoration: none;
	color: var(--cb-neon-rose);
}

.entry-content li a::after,
.entry-content figcaption a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--cb-base) var(--cb-ease-out);
}

.entry-content li a:hover::after,
.entry-content li a:focus-visible::after,
.entry-content figcaption a:hover::after {
	transform: scaleX(1);
}

/* Imágenes del artículo: elevación al pasar el ratón. */
.entry-content .wp-block-image img {
	transition: transform var(--cb-base) var(--cb-ease-out), box-shadow var(--cb-base) var(--cb-ease-out);
}

.entry-content .wp-block-image:hover img {
	transform: translateY(-3px);
	box-shadow: var(--cb-shadow-3);
}

/* Las tablas largas se desplazan dentro de su caja, no rompen la página. */
.entry-content .wp-block-table,
.entry-content table {
	max-width: 100%;
}

.entry-content .wp-block-table,
.cb-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cb-table-scroll:focus-visible {
	outline: 2px solid var(--cb-neon-cyan);
	outline-offset: 2px;
}

/* Letra capital: blanca, para que no compita con el texto. */
.entry-content p.has-drop-cap::first-letter {
	color: #fff;
	line-height: .8;
}

/* Separador con degradado en lugar de la línea plana. */
.entry-content hr.wp-block-separator:not(.is-style-dots) {
	height: 2px;
	border: 0;
	background: linear-gradient(
		90deg,
		transparent,
		var(--cb-neon-violet),
		var(--cb-neon-cyan),
		transparent
	);
	opacity: .8;
}

/* ==========================================================================
   8. Estilos de bloque de CriticaBits
   --------------------------------------------------------------------------
   El sitio ya construía estos componentes a mano, escribiendo clases
   sueltas en el editor de código. Aquí quedan registrados como estilos y
   patrones de bloque (ver inc/criticabits/blocks.php), de modo que se
   apliquen con un clic y sean consistentes en todos los artículos.
   ========================================================================== */

/* --- Aviso «Guru Meditation» (pantalla de error de Amiga) --------------- */

.is-style-cb-guru,
.wp-block-verse.guru-meditation {
	position: relative;
	background: #000;
	color: #f42;
	font-family: "Press Start 2P", "Courier New", monospace;
	font-size: clamp(.8rem, 2.4vw, 1.35rem);
	line-height: 1.8;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 2.25rem 1.25rem;
	border: 4px solid #f42;
	border-radius: 2px;
	box-shadow: 0 0 24px rgba(255, 68, 34, .45), inset 0 0 40px rgba(255, 68, 34, .1);
	overflow: hidden;
}

/* Líneas de barrido del monitor CRT. */
.is-style-cb-guru::after,
.wp-block-verse.guru-meditation::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0 2px,
		rgba(0, 0, 0, .28) 2px 4px
	);
	animation: cb-scanline 8s linear infinite;
	background-size: 100% 200%;
}

/* --- Rúbrica de análisis ------------------------------------------------ */

.is-style-cb-rubric,
.wp-block-verse.rubrica-final {
	position: relative;
	background:
		repeating-linear-gradient(45deg, #111 0 4px, #151515 4px 8px);
	border: 3px solid var(--cb-neon-aqua);
	border-radius: 4px;
	color: var(--cb-neon-aqua);
	font-family: "Press Start 2P", "Courier New", monospace;
	font-size: .85rem;
	line-height: 1.6;
	letter-spacing: .07em;
	text-align: center;
	text-transform: uppercase;
	padding: 5rem 1rem 2rem;
	margin-top: 3rem;
	box-shadow: 0 0 20px rgba(0, 255, 255, .55);
}

.is-style-cb-rubric::before,
.wp-block-verse.rubrica-final::before {
	content: "★ RÚBRICA DEL AUTOR ★";
	position: absolute;
	top: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1rem;
	color: var(--cb-neon-aqua);
	white-space: nowrap;
}

/* --- Panel translúcido «fondito» --------------------------------------- */

/* El panel se declara junto al resto de componentes, más abajo. */

/* --- Chip de puntuación final ------------------------------------------ */

.puntuacion-final,
.cb-score-chip {
	display: inline-block;
	font-family: "Press Start 2P", monospace;
	font-size: 1.1rem;
	line-height: 1;
	padding: .75rem 1rem .6rem;
	color: #04121a;
	background: var(--cb-neon-aqua);
	border-radius: 4px;
	box-shadow: 0 0 18px rgba(0, 255, 255, .5);
}

/* --- Reglas comunes a todos los componentes -------------------------------
   Un componente no participa del ritmo del artículo: por dentro manda él.

   Defecto que arregla esto: `.entry-content [class*="wp-block"]` y
   `.wp-block-group__inner-container [class*="wp-block"]` (style.css) le
   ponen 32 px de margen arriba y abajo a cualquier bloque anidado. Medido
   antes: cada fila de la ficha técnica ocupaba 116 px en vez de 45, y la
   clave y el valor no compartían línea de base porque llevaban márgenes
   distintos.

   El reinicio apunta SÓLO a los elementos que llevan una clase «wp-block»,
   que son exactamente los que aquella regla alcanza. Un primer intento usó
   el comodín `*` y salió peor el remedio: barría también el espaciado
   propio de las listas —la línea de tiempo se quedó con 0 px entre hitos,
   las fichas sin aire entre dato y dato, la escalera con los escalones
   pegados—, porque tres clases ganan a dos clases más un elemento.
   -------------------------------------------------------------------------- */

.cb-article .entry-content .cb-spec-sheet [class*="wp-block"],
.cb-article .entry-content .is-style-cb-panel [class*="wp-block"],
.cb-article .entry-content .cb-verdict [class*="wp-block"],
.cb-article .entry-content .cb-versus [class*="wp-block"],
.cb-article .entry-content .is-style-cb-terminal [class*="wp-block"] {
	margin-block: 0;
}

/* Entre hermanos sí hace falta aire, pero el suyo, no el del artículo. */
.cb-article .entry-content .is-style-cb-panel .wp-block-group__inner-container > * + *,
.cb-article .entry-content .cb-verdict > * > * + *,
.cb-article .entry-content .cb-versus > * > * + *,
.cb-article .entry-content .is-style-cb-terminal > * + * {
	margin-block-start: .85rem;
}

/* --- Ficha técnica ------------------------------------------------------ */

.cb-spec-sheet {
	border: 1px solid var(--cb-hairline-strong);
	border-radius: 8px;
	overflow: hidden;
	background: var(--cb-surface);
}

.cb-article .entry-content .cb-spec-sheet .cb-spec-row {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.25rem;
	align-items: baseline;
	justify-content: space-between;
	padding: .78rem 1.1rem;
	border-bottom: 1px solid var(--cb-hairline);
	font-size: .95rem;
	line-height: 1.45;
}

.cb-spec-sheet .cb-spec-row:last-child { border-bottom: 0; }

.cb-spec-sheet .cb-spec-row:nth-child(odd) {
	background: rgba(255, 255, 255, .025);
}

/*
 * La etiqueta iba en Major Mono Display, que no tiene mayúsculas de verdad
 * y a este cuerpo convertía «PLATAFORMAS ORIGINALES» en un jeroglífico.
 * Ahora es la fuente del cuerpo en versalitas, que es lo que se pretendía.
 */
.cb-spec-sheet .cb-spec-key {
	flex: 0 1 auto;
	font-family: var(--body-font);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.cb-spec-sheet .cb-spec-value {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	text-align: right;
	color: rgba(255, 255, 255, .92);
}

/* --- Panel ---------------------------------------------------------------
   Se le añade un filo de neón a la izquierda y un rótulo opcional: sin
   ellos era una caja gris con texto dentro, indistinguible de una cita. */

.is-style-cb-panel {
	position: relative;
	border-radius: 8px;
	padding: 1.4rem 1.6rem;
	color: rgba(255, 255, 255, .84);
	background-image: linear-gradient(135deg, rgba(34, 41, 57, .9), rgba(20, 24, 34, .92));
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .05), var(--cb-shadow-2);
	border: 1px solid var(--cb-hairline);
	border-left: 3px solid var(--cb-neon-cyan);
}

.cb-article .entry-content .is-style-cb-panel strong:first-child {
	color: var(--cb-neon-cyan);
}

/* --- Pros y contras -------------------------------------------------------
   Los puntos de lista estaban prohibidos aquí desde hace varias rondas y
   habían vuelto. La marca la pone ahora un ::before propio: un ✓ verde a
   la izquierda y un ✗ rosa a la derecha, que dicen de un vistazo en qué
   columna estás sin tener que leer el titular.

   Las dos columnas se estiran a la misma altura aunque una tenga un punto
   más que la otra, que era lo que dejaba el bloque descuadrado.
   -------------------------------------------------------------------------- */

.cb-verdict {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	align-items: stretch;
}

.cb-verdict > * {
	border-radius: 8px;
	padding: 1.35rem 1.5rem 1.5rem;
	background: var(--cb-surface);
	border: 1px solid var(--cb-hairline);
}

.cb-verdict .cb-pros { border-left: 3px solid #2ee6a8; }
.cb-verdict .cb-cons { border-left: 3px solid var(--cb-neon-pink); }

.cb-article .entry-content .cb-verdict h3 {
	margin: 0 0 .9rem;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.cb-verdict .cb-pros h3 { color: #2ee6a8; }
.cb-verdict .cb-cons h3 { color: var(--cb-neon-rose); }

.cb-article .entry-content .cb-verdict ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cb-article .entry-content .cb-verdict li {
	position: relative;
	margin: 0 0 .7rem;
	padding-left: 1.6rem;
	font-size: .95rem;
	line-height: 1.6;
	list-style: none;
}

.cb-article .entry-content .cb-verdict li:last-child { margin-bottom: 0; }

.cb-verdict li::marker { content: ""; }

.cb-verdict li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 800;
	line-height: 1.6;
}

.cb-verdict .cb-pros li::before { content: "✓"; color: #2ee6a8; }
.cb-verdict .cb-cons li::before { content: "✗"; color: var(--cb-neon-rose); }

/* --- Cita con aspecto de terminal -----------------------------------------
   Defecto grave: el cuerpo iba en «Major Mono Display», que es una fuente
   de rótulo sin mayúsculas reales. Un párrafo de sesenta palabras se leía
   «nay 387,44» donde ponía «Hay 387,44» y «narlan ellison» donde ponía
   «Harlan Ellison», porque su glifo de la H tiene forma de n. Ahora el
   cuerpo va en monoespaciada de sistema, que es lo que de verdad imita a
   una consola, y la fuente de rótulo se queda para el pie de la cita, que
   son tres palabras.

   Encima lleva sus líneas de barrido, las mismas del hero: 2 px de nada y
   2 px al 16 % de negro, para que la caja se lea como una pantalla.
   -------------------------------------------------------------------------- */

.wp-block-quote.is-style-cb-terminal {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #06090f;
	border: 1px solid rgba(0, 255, 255, .3);
	border-left: 3px solid var(--cb-neon-aqua);
	border-radius: 6px;
	padding: 2.9rem 1.75rem 1.6rem;
	color: #d6faff;
	font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Fira Code", Consolas, "Liberation Mono", monospace;
	font-size: .94rem;
	line-height: 1.72;
	box-shadow: inset 0 0 60px rgba(0, 255, 255, .06);
}

/* La barra de la ventana: tres puntos y un filo. */
.wp-block-quote.is-style-cb-terminal::before {
	content: "● ● ●";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: .55rem 1.25rem;
	border-bottom: 1px solid rgba(0, 255, 255, .18);
	background: rgba(0, 255, 255, .05);
	font-size: .62rem;
	letter-spacing: .3em;
	color: rgba(0, 255, 255, .5);
}

/* Las líneas de barrido. Sin eventos de ratón: no estorban a la selección. */
.wp-block-quote.is-style-cb-terminal::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0 2px,
		rgba(0, 0, 0, .16) 2px 4px
	);
	opacity: .5;
}

.cb-article .entry-content .wp-block-quote.is-style-cb-terminal p {
	position: relative;
	z-index: 2;
	font-size: inherit;
	line-height: inherit;
}

.wp-block-quote.is-style-cb-terminal cite {
	position: relative;
	z-index: 2;
	display: block;
	margin-top: 1.1rem;
	font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
	font-size: .8rem;
	font-style: normal;
	letter-spacing: .08em;
	color: var(--cb-neon-aqua);
	opacity: .9;
}

.wp-block-quote.is-style-cb-terminal cite::before { content: "> "; }

/* --- Tabla de especificaciones ------------------------------------------ */

.wp-block-table.is-style-cb-specs table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

.wp-block-table.is-style-cb-specs td,
.wp-block-table.is-style-cb-specs th {
	padding: .7rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--cb-hairline);
}

.wp-block-table.is-style-cb-specs tr:last-child td {
	border-bottom: 0;
}

.wp-block-table.is-style-cb-specs tr:nth-child(odd) td {
	background: rgba(255, 255, 255, .025);
}

/* Misma razón que en los pies de cita: aquí van nombres de plataformas y
   de estudios, no adornos. */
.wp-block-table.is-style-cb-specs td:first-child {
	font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
	text-transform: lowercase;
	color: rgba(255, 255, 255, .66);
}

.wp-block-table.is-style-cb-specs td:last-child,
.wp-block-table.is-style-cb-specs td.score {
	text-align: right;
	font-weight: 700;
	color: var(--cb-neon-amber);
	font-variant-numeric: tabular-nums;
}

/* --- Separador de barrido ----------------------------------------------- */

.wp-block-separator.is-style-cb-scanline {
	height: 6px;
	border: 0;
	opacity: 1;
	background: repeating-linear-gradient(
		to bottom,
		var(--cb-neon-aqua) 0 1px,
		transparent 1px 3px
	);
	mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

/* --- Botón neón ---------------------------------------------------------- */

.wp-block-button.is-style-cb-neon .wp-block-button__link {
	position: relative;
	background: linear-gradient(90deg, var(--cb-neon-pink), var(--cb-neon-violet));
	border: 0;
	color: #fff;
	font-weight: 700;
	letter-spacing: .01em;
	box-shadow: 0 0 18px rgba(255, 0, 94, .35);
	overflow: hidden;
}

.wp-block-button.is-style-cb-neon .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
	transform: translateX(-140%) skewX(-18deg);
}

.wp-block-button.is-style-cb-neon .wp-block-button__link:hover::after,
.wp-block-button.is-style-cb-neon .wp-block-button__link:focus-visible::after {
	animation: cb-sheen 800ms var(--cb-ease-out);
}

.wp-block-button.is-style-cb-neon .wp-block-button__link:hover {
	box-shadow: 0 0 26px rgba(122, 92, 255, .55);
}

/* --- Lista de verificación ---------------------------------------------- */

.wp-block-list.is-style-cb-checklist {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.wp-block-list.is-style-cb-checklist li {
	position: relative;
	padding-left: 1.9rem;
	line-height: 1.75;
}

.wp-block-list.is-style-cb-checklist li::before {
	content: "▸";
	position: absolute;
	left: .25rem;
	top: 0;
	color: var(--cb-neon-aqua);
	font-weight: 700;
}

/* --- Llamada a la acción y comparativa ---------------------------------- */

.cb-cta {
	text-align: center;
	padding-block: 2.5rem;
}

.cb-versus > .wp-block-column {
	padding: 1.5rem;
}


/* ==========================================================================
   8 bis. Infografías de artículo
   --------------------------------------------------------------------------
   Cuatro componentes reutilizables, pensados para escribirse a mano en un
   bloque HTML del editor. Todos se apoyan en los mismos tokens que el resto
   del sitio, apilan a una columna por debajo de 700 px y no dependen de
   JavaScript: si algo falla, quedan como listas y párrafos legibles.

   .cb-stats     — cifras grandes con su pie
   .cb-timeline  — línea de tiempo vertical
   .cb-dossier   — fichas de personaje o de producto
   .cb-ladder    — escalera de resultados ordenados de peor a mejor
   ========================================================================== */

/* ==========================================================================
   8 ter. Tratamiento CRT
   --------------------------------------------------------------------------
   Cuatro estilos de bloque que comparten el mismo lenguaje que la portada
   del artículo y el hero de la home: líneas de barrido, filo de fósforo y
   un punto de aberración cromática. Todos:

   - Pintan en pseudoelementos sin eventos de ratón, así que no estorban a
     la selección de texto ni a los enlaces de debajo.
   - Se apagan enteros con `prefers-reduced-motion` cuando llevan
     movimiento; los que son estáticos se quedan.
   - No dependen de JavaScript.
   ========================================================================== */

/* --- Marco de pantalla, para imágenes, portadas y vídeos ------------------- */

.wp-block-image.is-style-cb-crt,
.wp-block-cover.is-style-cb-crt,
.wp-block-embed.is-style-cb-crt {
	position: relative;
	isolation: isolate;
	border-radius: 12px / 16px;
	overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(0, 212, 255, .22),
		0 0 34px -10px rgba(0, 212, 255, .38),
		inset 0 0 60px rgba(0, 0, 0, .55);
}

.wp-block-image.is-style-cb-crt img,
.wp-block-cover.is-style-cb-crt img,
.wp-block-embed.is-style-cb-crt iframe {
	display: block;
	border-radius: inherit;
}

/* Capa 1: barrido horizontal. */
.wp-block-image.is-style-cb-crt::after,
.wp-block-cover.is-style-cb-crt::after,
.wp-block-embed.is-style-cb-crt::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	border-radius: inherit;
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0 2px,
		rgba(0, 0, 0, .16) 2px 4px
	);
}

/* Capa 2: viñeta y resplandor frío del tubo encendido. */
.wp-block-image.is-style-cb-crt::before,
.wp-block-cover.is-style-cb-crt::before,
.wp-block-embed.is-style-cb-crt::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
	background: radial-gradient(120% 130% at 50% 45%, transparent 52%, rgba(0, 0, 0, .5) 100%);
	box-shadow: inset 0 0 70px rgba(0, 212, 255, .1);
}

/*
 * El vídeo incrustado llega dentro de un envoltorio con proporción propia,
 * así que el marco tiene que ir sobre ese envoltorio y no sobre la figura,
 * o las capas se salen por abajo.
 */
.wp-block-embed.is-style-cb-crt .wp-block-embed__wrapper { border-radius: inherit; }

/* --- Titular con interferencia --------------------------------------------
   Dos copias desplazadas en cian y rosa por detrás del texto. Sólo se
   mueven al pasar el ratón: una interferencia permanente en un titular de
   artículo cansa a los diez segundos. */

.wp-block-heading.is-style-cb-glitch {
	position: relative;
	display: block;
	text-shadow: none;
}

.wp-block-heading.is-style-cb-glitch::before,
.wp-block-heading.is-style-cb-glitch::after {
	content: attr(data-texto);
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--cb-fast) var(--cb-ease);
}

.wp-block-heading.is-style-cb-glitch::before { color: var(--cb-neon-cyan); transform: translate(-2px, 1px); }
.wp-block-heading.is-style-cb-glitch::after  { color: var(--cb-neon-pink); transform: translate(2px, -1px); }

.wp-block-heading.is-style-cb-glitch:hover::before,
.wp-block-heading.is-style-cb-glitch:hover::after { opacity: .55; }

/*
 * Sin JavaScript no hay `data-texto`, y entonces los pseudoelementos se
 * quedan vacíos y no pasa nada: el titular se ve tal cual. El realce es un
 * extra, nunca un requisito para leer.
 */

/* --- Titular de consola ---------------------------------------------------- */

.wp-block-heading.is-style-cb-prompt::before {
	content: "> ";
	color: var(--cb-neon-aqua);
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	opacity: .8;
}

.wp-block-heading.is-style-cb-prompt::after {
	content: "";
	display: inline-block;
	width: .5em;
	height: .95em;
	margin-left: .28em;
	vertical-align: -.08em;
	background: var(--cb-neon-aqua);
	animation: cb-prompt-parpadeo 1.1s steps(1) infinite;
}

@keyframes cb-prompt-parpadeo {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* --- Chapa ----------------------------------------------------------------- */

.cb-article .entry-content p.is-style-cb-badge {
	display: inline-block;
	margin: 0;
	padding: .3rem .75rem;
	border: 1px solid rgba(0, 212, 255, .35);
	border-radius: 999px;
	background: rgba(0, 212, 255, .1);
	font-family: var(--body-font);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: #bff2ff;
}

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

	.wp-block-heading.is-style-cb-prompt::after { animation: none; opacity: 1; }

	.wp-block-heading.is-style-cb-glitch:hover::before,
	.wp-block-heading.is-style-cb-glitch:hover::after { opacity: 0; }
}

/* --- Cifras ---------------------------------------------------------------- */

.entry-content .cb-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: 1px;
	margin: 2.5rem 0;
	padding: 0;
	list-style: none;
	background: rgba(122, 92, 255, .22);
	border: 1px solid rgba(122, 92, 255, .22);
	border-radius: 10px;
	overflow: hidden;
}

/*
 * `display: flex` en vez de heredar `list-item`: sin él, la celda cuyo pie
 * ocupaba dos líneas —«AÑOS DE TORTURA»— crecía 8 px más que las otras tres
 * y la rejilla quedaba con un escalón. Ahora todas se estiran igual y el
 * contenido se centra dentro, ocupe una línea o dos.
 */
.entry-content .cb-stats > li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 1.35rem 1.1rem;
	line-height: 1.3;
	text-align: center;
	list-style: none;
	background: linear-gradient(165deg, rgba(24, 29, 46, .92), rgba(12, 15, 26, .96));
}

.entry-content .cb-stats > li::marker { content: ""; }

/*
 * Hay una regla del tipo `li + li { margin-top }` que gana a la de arriba y
 * empujaba 8 px hacia abajo a la segunda celda y siguientes, pero no a la
 * primera. En una rejilla de una sola fila eso deja la primera celda a toda
 * altura y las otras tres 8 px más cortas y desplazadas, con el violeta del
 * contenedor asomando por encima de ellas en forma de ele. Medido: fila de
 * 112,47 px; celda 1 con top 1193 y alto 112, celdas 2-4 con top 1201 y alto
 * 104. Hacen falta tres clases y dos elementos para ganar.
 */
.cb-article .entry-content .cb-stats > li,
.cb-article .entry-content .cb-stats > li + li,
.cb-article .entry-content .cb-timeline > li + li,
.cb-article .entry-content .cb-dossier > li + li {
	margin-top: 0;
}

.cb-stats__num {
	display: block;
	font-family: "Press Start 2P", ui-monospace, monospace;
	font-size: clamp(1.05rem, 2.6vw, 1.5rem);
	line-height: 1.15;
	color: var(--cb-neon-cyan);
	font-variant-numeric: tabular-nums;
}

.cb-stats__label {
	display: block;
	margin-top: .7rem;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
}

/* --- Línea de tiempo ------------------------------------------------------- */

.entry-content .cb-timeline {
	position: relative;
	margin: 2.5rem 0;
	padding: 0 0 0 1.9rem;
	list-style: none;
}

/* El raíl. Se detiene en el último punto en lugar de llegar al borde: una
   línea que sigue más allá del último hito sugiere que falta algo. */
.entry-content .cb-timeline::before {
	content: "";
	position: absolute;
	top: .55rem;
	bottom: .55rem;
	left: 5px;
	width: 2px;
	background: linear-gradient(180deg,
		var(--cb-neon-cyan),
		var(--cb-neon-violet) 55%,
		rgba(122, 92, 255, .12));
}

.entry-content .cb-timeline > li {
	position: relative;
	margin: 0 0 1.6rem;
	padding: 0;
}

.entry-content .cb-timeline > li:last-child { margin-bottom: 0; }

.entry-content .cb-timeline > li::before {
	content: "";
	position: absolute;
	top: .5rem;
	left: calc(-1.9rem + 1px);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #0c0f1a;
	border: 2px solid var(--cb-neon-cyan);
	box-shadow: 0 0 0 4px rgba(0, 212, 255, .12);
}

.cb-timeline__year {
	display: block;
	font-family: "Press Start 2P", ui-monospace, monospace;
	font-size: .78rem;
	letter-spacing: .02em;
	color: var(--cb-neon-amber);
	font-variant-numeric: tabular-nums;
}

.cb-timeline__what {
	display: block;
	margin-top: .5rem;
	font-size: .95rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .78);
}

/* --- Fichas ---------------------------------------------------------------- */

.entry-content .cb-dossier {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: 1rem;
	margin: 2.5rem 0;
	padding: 0;
	list-style: none;
}

.entry-content .cb-dossier > li {
	margin: 0;
	padding: 1.25rem 1.15rem 1.35rem;
	border: 1px solid rgba(122, 92, 255, .26);
	border-radius: 10px;
	background: linear-gradient(165deg, rgba(24, 29, 46, .9), rgba(12, 15, 26, .96));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.cb-dossier__name {
	display: block;
	font-family: "Press Start 2P", ui-monospace, monospace;
	font-size: .82rem;
	line-height: 1.35;
	color: var(--cb-neon-aqua);
}

.cb-dossier__tag {
	display: inline-block;
	margin-top: .8rem;
	padding: .18rem .5rem;
	border-radius: 3px;
	background: rgba(255, 0, 94, .16);
	border: 1px solid rgba(255, 0, 94, .3);
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #ff9cbb;
}

.cb-dossier dl {
	margin: .9rem 0 0;
	font-size: .88rem;
	line-height: 1.5;
}

.cb-dossier dt {
	margin-top: .7rem;
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .42);
}

.cb-dossier dd {
	margin: .2rem 0 0;
	color: rgba(255, 255, 255, .82);
}

/* --- Escalera de resultados ------------------------------------------------ */

.entry-content .cb-ladder {
	margin: 2.5rem 0;
	padding: 0;
	list-style: none;
	counter-reset: cb-ladder;
}

.entry-content .cb-ladder > li {
	position: relative;
	margin: 0 0 .5rem;
	padding: .85rem 1rem .85rem 3.2rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .08);
	font-size: .92rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .8);
	counter-increment: cb-ladder;
	/* El fondo va de rojo a verde con el índice, pero el dato lo pone el
	   propio texto: el color acompaña, no informa por su cuenta. */
	background: linear-gradient(90deg, rgba(255, 0, 94, .12), transparent 70%);
}

.entry-content .cb-ladder > li::before {
	content: counter(cb-ladder, decimal-leading-zero);
	position: absolute;
	top: .85rem;
	left: 1rem;
	font-family: "Press Start 2P", ui-monospace, monospace;
	font-size: .72rem;
	color: rgba(255, 255, 255, .34);
}

.entry-content .cb-ladder > li:last-child {
	background: linear-gradient(90deg, rgba(0, 255, 255, .14), transparent 70%);
	border-color: rgba(0, 212, 255, .32);
	color: #fff;
}

.entry-content .cb-ladder > li:last-child::before { color: var(--cb-neon-cyan); }

.cb-ladder__what { font-weight: 700; color: #fff; }

@media (max-width: 700px) {

	.entry-content .cb-stats { grid-template-columns: repeat(2, 1fr); }
	.entry-content .cb-dossier { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8 quater. Cierre de artículo: sigue leyendo + boletín
   --------------------------------------------------------------------------
   Estas reglas vivían como estilo en línea dentro de
   inc/criticabits/cb-retencion-final.php: se repetían dentro del HTML de
   cada entrada, sin poder cachearse aparte del resto.

   El bloque es lo último que ve alguien que ha terminado de leer, así que
   se trata como lo que es: la pantalla de «continuar» de la máquina. Va
   dentro de un marco de tubo, con su barra de estado arriba, sus líneas de
   barrido y una numeración que continúa la del índice de lectura.

   Se alinea con la columna de texto —680 px, unos 71 caracteres por
   línea— y no con el contenedor de 900 del tema: si fuese más ancho, la
   vista saltaría de columna justo al terminar de leer.
   ========================================================================== */

.cb-cierre.cb-cierre {
	max-width: 680px;
	width: 100%;
	margin: 0 auto;
	padding: 0 0 8px;
}

/* --- El marco -------------------------------------------------------------- */

.cb-seguir,
.cb-boletin {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	padding: 3rem 1.6rem 1.75rem;
	border: 1px solid rgba(0, 212, 255, .26);
	border-radius: 10px;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(0, 212, 255, .09), transparent 60%),
		linear-gradient(168deg, rgba(24, 29, 46, .94), rgba(9, 11, 20, .97));
	box-shadow:
		0 0 34px -14px rgba(0, 212, 255, .4),
		inset 0 0 70px rgba(0, 0, 0, .5);
}

/* La barra de estado: el rótulo va en el propio pseudoelemento para que no
   ocupe un nodo en el HTML ni lo lea dos veces un lector de pantalla. */
.cb-seguir::before,
.cb-boletin::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: .5rem 1.1rem;
	border-bottom: 1px solid rgba(0, 212, 255, .18);
	background: rgba(0, 212, 255, .06);
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: .62rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(0, 212, 255, .72);
}

.cb-seguir::before  { content: "> cb01 --afinidad --limite 3"; }
.cb-boletin::before { content: "> cb01 --suscribir"; }

/* Las líneas de barrido, las mismas del hero y del bloque terminal. */
.cb-seguir::after,
.cb-boletin::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0 2px,
		rgba(0, 0, 0, .14) 2px 4px
	);
	opacity: .45;
}

.cb-seguir > *,
.cb-boletin > * { position: relative; z-index: 2; }

/* --- Encabezado ------------------------------------------------------------ */

.cb-seguir__titulo,
.cb-boletin__titulo {
	margin: 0 0 .35rem;
	font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.015em;
	color: #fff;
}

.cb-seguir__entradilla,
.cb-boletin__pitch {
	margin: 0 0 1.4rem;
	font-size: .9375rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .66);
}

/* --- Las tres fichas ------------------------------------------------------- */

.cb-seguir__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .7rem;
	counter-reset: cb-seguir;
}

.cb-seguir__ficha {
	position: relative;
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 1rem;
	align-items: center;
	margin: 0;
	padding: .7rem .9rem .7rem .7rem;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 8px;
	background: rgba(255, 255, 255, .022);
	counter-increment: cb-seguir;
	transition:
		border-color var(--cb-fast) var(--cb-ease),
		background-color var(--cb-fast) var(--cb-ease),
		transform var(--cb-fast) var(--cb-ease-out);
}

.cb-seguir__ficha:hover,
.cb-seguir__ficha:focus-within {
	border-color: rgba(0, 212, 255, .42);
	background: rgba(0, 212, 255, .06);
	transform: translateX(3px);
}

/* La numeración continúa la del índice de lectura: 01, 02, 03. */
.cb-seguir__ficha::before {
	content: counter(cb-seguir, decimal-leading-zero);
	position: absolute;
	top: .5rem;
	left: .55rem;
	z-index: 3;
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: .58rem;
	font-weight: 700;
	color: rgba(255, 255, 255, .5);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

.cb-seguir__imagen {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	aspect-ratio: 16 / 10;
	background: #0a0d16;
}

.cb-seguir__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(1.05) brightness(.86);
	transition: filter var(--cb-base) var(--cb-ease), transform var(--cb-base) var(--cb-ease-out);
}

.cb-seguir__ficha:hover .cb-seguir__imagen img { filter: saturate(1.15) brightness(1); }

/* Marco de tubo también en la miniatura, para que la ficha se lea como una
   pantalla pequeña y no como una tarjeta de blog cualquiera. */
.cb-seguir__imagen::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0 2px,
		rgba(0, 0, 0, .2) 2px 4px
	);
	box-shadow: inset 0 0 22px rgba(0, 0, 0, .6);
}

.cb-seguir__cuerpo { min-width: 0; }

.cb-seguir__seccion {
	display: inline-block;
	margin: 0 0 .3rem;
	font-family: var(--body-font);
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cb-neon-cyan);
}

.cb-seguir__titular {
	margin: 0 0 .25rem;
	font-size: .98rem;
	font-weight: 700;
	line-height: 1.3;
}

.cb-seguir__titular a {
	color: #fff;
	text-decoration: none;
	background-image: none;
}

/* El área pulsable cubre la ficha entera, no sólo el titular: 96 px de
   miniatura y una línea de texto son un objetivo pequeño en un móvil. */
.cb-seguir__titular a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
}

.cb-seguir__porque {
	margin: 0;
	font-size: .78rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, .56);
}

.cb-seguir__salida {
	margin: 1.2rem 0 0;
	text-align: right;
}

.cb-seguir__salida a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .9rem;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 4px;
	font-family: var(--body-font);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255, 255, 255, .82);
	background-image: none;
	transition: border-color var(--cb-fast) var(--cb-ease),
		background-color var(--cb-fast) var(--cb-ease),
		gap var(--cb-fast) var(--cb-ease-out);
}

.cb-seguir__salida a::after { content: "→"; }

.cb-seguir__salida a:hover,
.cb-seguir__salida a:focus-visible {
	border-color: var(--cb-neon-cyan);
	background: rgba(0, 212, 255, .1);
	color: #fff;
	gap: .75rem;
}

/* --- Boletín ---------------------------------------------------------------- */

.cb-boletin { border-color: rgba(255, 0, 94, .26); }

.cb-boletin::before {
	border-bottom-color: rgba(255, 0, 94, .18);
	background: rgba(255, 0, 94, .06);
	color: rgba(255, 120, 160, .82);
}

.cb-boletin {
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(255, 0, 94, .08), transparent 60%),
		linear-gradient(168deg, rgba(30, 22, 40, .94), rgba(11, 9, 20, .97));
	box-shadow:
		0 0 34px -14px rgba(255, 0, 94, .38),
		inset 0 0 70px rgba(0, 0, 0, .5);
}

/* Un cursor que parpadea al final de la entradilla: dice «te toca a ti». */
.cb-boletin__pitch::after {
	content: "";
	display: inline-block;
	width: .5em;
	height: 1em;
	margin-left: .3em;
	vertical-align: -.12em;
	background: var(--cb-neon-rose);
	animation: cb-prompt-parpadeo 1.1s steps(1) infinite;
}

.cb-boletin__form form {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0;
}

.cb-boletin__form p { margin: 0; flex: 1 1 220px; }

.cb-boletin__form input[type="email"] {
	width: 100%;
	padding: .8rem 1rem;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 6px;
	background: rgba(0, 0, 0, .35);
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: 1rem;
	color: #fff;
	transition: border-color var(--cb-fast) var(--cb-ease), box-shadow var(--cb-fast) var(--cb-ease);
}

.cb-boletin__form input[type="email"]::placeholder { color: rgba(255, 255, 255, .34); }

.cb-boletin__form input[type="email"]:focus {
	outline: none;
	border-color: var(--cb-neon-rose);
	box-shadow: 0 0 0 3px rgba(255, 0, 94, .18);
}

.cb-boletin__form input[type="submit"] {
	flex: 0 0 auto;
	padding: .8rem 1.5rem;
	border: 0;
	border-radius: 6px;
	background: linear-gradient(120deg, var(--cb-neon-pink), var(--cb-neon-violet));
	font-family: var(--body-font);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: transform var(--cb-fast) var(--cb-ease-out), box-shadow var(--cb-fast) var(--cb-ease);
}

.cb-boletin__form input[type="submit"]:hover,
.cb-boletin__form input[type="submit"]:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px -8px rgba(255, 0, 94, .7);
}

.cb-boletin__fine,
.cb-boletin__enlace {
	margin: .9rem 0 0;
	font-size: .74rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, .5);
}

@media (max-width: 560px) {

	.cb-seguir,
	.cb-boletin { padding: 2.8rem 1.1rem 1.4rem; }

	/* A 390 px, 96 px de miniatura dejan 190 para el titular: se irían a
	   cinco líneas. Debajo se lee mejor y la miniatura gana tamaño. */
	.cb-seguir__ficha { grid-template-columns: 1fr; gap: .7rem; }
	.cb-seguir__imagen { aspect-ratio: 16 / 7; }
	.cb-seguir__salida { text-align: left; }
	.cb-seguir__salida a { width: 100%; justify-content: center; }
}

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

	.cb-boletin__pitch::after { animation: none; opacity: 1; }
	.cb-seguir__ficha:hover { transform: none; }
}

/* ==========================================================================
   9. Barra de progreso de lectura y volver arriba
   ========================================================================== */

/*
 * El progreso de lectura ya no dibuja una barra propia: rellena el
 * haz inferior de la cabecera (ver criticabits-header.css). Un solo
 * elemento en pantalla en lugar de dos.
 */

/* El botón de volver arriba entra y sale, no parpadea. */
.goto-top {
	opacity: 0;
	transform: translateY(12px) scale(.9);
	pointer-events: none;
	transition:
		opacity var(--cb-base) var(--cb-ease-out),
		transform var(--cb-base) var(--cb-ease-out);
}

.goto-top.visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.goto-top:hover {
	transform: translateY(-3px);
}

/* ==========================================================================
   10. Formularios, paginación y pie
   ========================================================================== */

/*
 * Marcador de posición legible.
 *
 * Defecto observado: ni el formulario de contacto ni el boletín tocaban
 * el ::placeholder, así que salía el gris #757575 que pone el navegador.
 * Medido sobre el fondo real de los campos —blanco al 10 % sobre el
 * violeta oscuro de la página— da 3,1:1 en el boletín y 3,4:1 en el
 * área de mensaje del formulario. En el boletín ese texto es la única
 * indicación de qué hay que escribir.
 */
.entry-content input::placeholder,
.entry-content textarea::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder,
.mc4wp-form input::placeholder,
.site-footer input::placeholder,
.widget input::placeholder,
.search-field::placeholder {
	color: rgba(255, 255, 255, .55);
	opacity: 1;
}

/* Campos de formulario coherentes en modo oscuro. */
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="url"],
.entry-content input[type="search"],
.entry-content textarea,
.search-field {
	transition:
		border-color var(--cb-fast) var(--cb-ease),
		box-shadow var(--cb-fast) var(--cb-ease),
		background-color var(--cb-fast) var(--cb-ease);
}

.entry-content input:focus,
.entry-content textarea:focus,
.search-field:focus {
	border-color: var(--cb-neon-cyan);
	box-shadow: 0 0 0 3px rgba(0, 212, 255, .18);
}

/* Botones: elevación y brillo contenidos. */
.wp-block-button__link,
button.search-submit,
input[type="submit"],
.read-more a,
.link-more a {
	transition:
		transform var(--cb-fast) var(--cb-ease-out),
		box-shadow var(--cb-fast) var(--cb-ease-out),
		filter var(--cb-fast) var(--cb-ease);
}

.wp-block-button__link:hover,
button.search-submit:hover,
input[type="submit"]:hover,
.read-more a:hover,
.link-more a:hover {
	transform: translateY(-2px);
	box-shadow: var(--cb-shadow-2);
	filter: saturate(115%);
}

.wp-block-button__link:active,
input[type="submit"]:active {
	transform: translateY(0);
}

/* Paginación: el número activo se distingue de verdad. */
.pagination .page-numbers,
.comments-pagination .page-numbers {
	transition:
		background-color var(--cb-fast) var(--cb-ease),
		color var(--cb-fast) var(--cb-ease),
		transform var(--cb-fast) var(--cb-ease);
}

.pagination .page-numbers:hover {
	transform: translateY(-2px);
}

/*
 * Defecto observado: la página actual salía como un círculo gris al 10 %
 * de blanco y la siguiente como un número pelado con un borde
 * rgba(25,9,44,.65) que sobre el fondo oscuro es invisible. Resultado:
 * el número activo pesaba MENOS que el inactivo y ninguno parecía
 * pulsable. Además medían 30 px de alto frente a los 40 del botón «Más
 * antiguos» que va en la misma línea.
 *
 * La regla anterior ya intentaba el degradado, pero el CSS en línea del
 * Personalizador declara el mismo selector con más peso y se imprime
 * después: hace falta la clase del <body> para ganarle.
 */
.cb-header-active .pagination .page-numbers:not(.next):not(.prev) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	border: 1px solid var(--cb-hairline-strong);
	border-radius: 100px;
	background: transparent;
	color: rgba(255, 255, 255, .82);
}

.cb-header-active .pagination .page-numbers:not(.next):not(.prev):hover {
	border-color: var(--cb-neon-cyan);
	color: #fff;
}

.cb-header-active .pagination .page-numbers.current:not(.next):not(.prev) {
	background: linear-gradient(90deg, var(--cb-neon-pink), var(--cb-neon-violet));
	color: #fff;
	border-color: transparent;
}

/* Las flechas «Más antiguos / Más recientes» se dejan como están: ya
   son píldoras con el degradado de la marca. */

/* Iconos sociales del pie. */
.social-icons a,
.footer-social a {
	transition: transform var(--cb-fast) var(--cb-ease-out), color var(--cb-fast) var(--cb-ease);
}

.social-icons a:hover,
.footer-social a:hover {
	transform: translateY(-3px) scale(1.08);
	color: var(--cb-neon-cyan);
}

/* --- Formulario de contacto ----------------------------------------------
   Defecto observado: los cinco controles del formulario venían de sitios
   distintos y se notaba. Medido en /contacto/: los campos de texto con
   radio 5 px, el área de mensaje con radio 0, el desplegable con radio
   4 px, otro color de borde y otro fondo (12 % frente al 10 %), y el
   botón de enviar 7 px más bajo que los campos. El desplegable, además,
   no tenía ninguna flecha: era indistinguible de un campo de texto.
   -------------------------------------------------------------------------- */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	padding: .8rem 1rem;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--cb-hairline-strong);
	border-radius: 6px;
	color: #fff;
	font-family: var(--body-font, inherit);
	font-size: .95rem;
	line-height: 1.4;
	transition:
		border-color var(--cb-fast) var(--cb-ease),
		background-color var(--cb-fast) var(--cb-ease),
		box-shadow var(--cb-fast) var(--cb-ease);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select {
	height: 48px;
}

.wpcf7-form textarea {
	min-height: 11rem;
	resize: vertical;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	outline: none;
	border-color: var(--cb-neon-cyan);
	background: rgba(255, 255, 255, .08);
	box-shadow: 0 0 0 3px rgba(0, 212, 255, .18);
}

/* El desplegable recupera su flecha; el triángulo va en el fondo porque
   el control no admite pseudoelementos. El selector lleva la clase del
   <body> porque el CSS del Personalizador redeclara `background` en
   abreviado y borraba la imagen. */
.cb-header-active .wpcf7 .wpcf7-form select.wpcf7-form-control.wpcf7-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.75rem;
	background-color: rgba(255, 255, 255, .06);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' fill-opacity='.65' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 8px;
	border: 1px solid var(--cb-hairline-strong);
	border-radius: 6px;
}

.wpcf7-form select option {
	background: #12111f;
	color: #fff;
}

/* La casilla de aceptación salía como un cuadro blanco de navegador en
   mitad de una interfaz oscura. El tema ya le había quitado la
   apariencia nativa, así que `accent-color` no pintaba nada y hay que
   dibujarla entera. */
.cb-header-active .wpcf7-form input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin-right: .2rem;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--cb-hairline-strong);
	border-radius: 4px;
	vertical-align: -.2em;
	cursor: pointer;
	transition: background-color var(--cb-fast) var(--cb-ease), border-color var(--cb-fast) var(--cb-ease);
}

.cb-header-active .wpcf7-form input[type="checkbox"]:checked {
	background-color: var(--cb-neon-pink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.3 5 8.8l4.5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80%;
	border-color: var(--cb-neon-pink);
}

.cb-header-active .wpcf7-form input[type="checkbox"]:hover {
	border-color: var(--cb-neon-cyan);
}

/* El botón de enviar medía 42 px frente a los 48 de los campos. El radio
   se queda como está: el CSS del Personalizador lo fija con !important y
   no compensa pelearlo por dos píxeles. */
.cb-header-active .wpcf7-form input[type="submit"] {
	min-height: 48px;
}

/* Los avisos de error del formulario llevaban el rojo por defecto del
   plugin, que sobre fondo oscuro se lee mal y no es de la paleta. */
.wpcf7 form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: .85rem 1.1rem;
	border: 1px solid var(--cb-hairline-strong);
	border-left: 3px solid var(--cb-neon-amber);
	border-radius: 6px;
	background: rgba(255, 177, 79, .08);
	color: rgba(255, 255, 255, .9);
	font-size: .9rem;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-left-color: var(--cb-neon-cyan);
	background: rgba(0, 212, 255, .08);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-left-color: var(--cb-neon-pink);
	background: rgba(255, 0, 94, .1);
}

.wpcf7-not-valid-tip {
	margin-top: .4rem;
	color: #ff86ac;
	font-size: .82rem;
}

.wpcf7-form .wpcf7-not-valid {
	border-color: rgba(255, 0, 94, .6);
}

/* --- Migas de pan -------------------------------------------------------- */

.cb-breadcrumbs {
	margin: 0 0 1.75rem;
	font-size: .85rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .55);
	letter-spacing: .01em;
}

.cb-breadcrumbs a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--cb-fast) var(--cb-ease), border-color var(--cb-fast) var(--cb-ease);
}

.cb-breadcrumbs a:hover,
.cb-breadcrumbs a:focus-visible {
	color: var(--cb-neon-cyan);
	border-bottom-color: currentColor;
}

.cb-breadcrumbs__sep {
	margin: 0 .5rem;
	opacity: .4;
}

.cb-breadcrumbs [aria-current="page"] {
	color: rgba(255, 255, 255, .85);
}

/* --- Página 404 ---------------------------------------------------------- */

/*
 * Defecto observado: el «404» es un <h1> que vive fuera del bloque
 * .cb-404 y conservaba la alineación a la izquierda del tema, mientras
 * el mensaje, el buscador y el botón de debajo van centrados. El
 * numeral quedaba descolgado en el margen izquierdo, sin relación con
 * nada. Se centra con el resto y se le pone el rosa de la marca para
 * que se lea como código de error y no compita con el titular.
 */
.error404 .page-header {
	text-align: center;
}

.error404 .page-title.title-404 {
	color: var(--cb-neon-pink);
	letter-spacing: -.04em;
	opacity: .85;
}

.cb-404 {
	text-align: center;
}

.cb-404__search {
	max-width: 520px;
	margin: 1.75rem auto;
}

.cb-404-helpers {
	margin-top: 3rem;
	text-align: left;
}

.cb-404-helpers__title {
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--cb-neon-cyan);
	margin-bottom: .9rem;
}

.cb-404-helpers__cats,
.cb-404-helpers__posts {
	list-style: none;
	margin: 0 0 2.25rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.cb-404-helpers__posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: .75rem;
}

.cb-404-helpers__cats a {
	display: inline-block;
	padding: .45rem .9rem;
	border-radius: 100px;
	background: var(--cb-surface);
	border: 1px solid var(--cb-hairline);
	text-decoration: none;
	font-size: .9rem;
	transition:
		border-color var(--cb-fast) var(--cb-ease),
		transform var(--cb-fast) var(--cb-ease-out);
}

.cb-404-helpers__cats a:hover {
	border-color: var(--cb-neon-cyan);
	transform: translateY(-2px);
}

/* El recuento de la píldora («12 artículos») venía al 46 % de blanco:
   4,26:1 sobre el fondo de la píldora para un texto de 11,5 px. */
.cb-404-helpers__cats .cb01-count {
	color: rgba(255, 255, 255, .62);
}

.cb-404-helpers__posts li {
	background: var(--cb-surface);
	border: 1px solid var(--cb-hairline);
	border-radius: 6px;
	padding: .9rem 1.1rem;
	line-height: 1.5;
	transition: border-color var(--cb-fast) var(--cb-ease), transform var(--cb-fast) var(--cb-ease-out);
}

.cb-404-helpers__posts li:hover {
	border-color: var(--cb-neon-rose);
	transform: translateY(-2px);
}

.cb-404-helpers__posts a {
	text-decoration: none;
}

/* ==========================================================================
   11. Movimiento reducido e impresión
   ========================================================================== */

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

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.cb-js [data-cb-reveal] {
		opacity: 1;
		transform: none;
	}

	.cb-reading-progress {
		display: none;
	}

	/* El brillo pulsante del logotipo y de la rúbrica marean a quien pide
	   menos movimiento; se dejan fijos en su estado más legible. */
	.logo-i,
	.is-style-cb-rubric,
	.wp-block-verse.rubrica-final,
	.is-style-cb-guru,
	.wp-block-verse.guru-meditation {
		animation: none !important;
	}
}

@media print {

	.cb-header,
	.site-footer,
	.cb-skip-link,
	.goto-top,
	.toggle,
	.sidebar,
	.comments-area {
		display: none !important;
	}

	.entry-content > p,
	.entry-content > ul,
	.entry-content > ol {
		max-width: none;
	}

	/* Los enlaces impresos muestran su destino. */
	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: .8em;
		word-break: break-all;
	}
}

/* El resaltador de Gutenberg venía sin estilo: cualquiera que use <mark>
   en una entrada obtiene amarillo puro sobre negro —medido
   rgb(255,255,0)—, el elemento más luminoso del sitio y fuera de paleta.
   Se le da el ámbar de la casa. */
.entry-content mark,
.entry-content .has-inline-color mark {
	padding: .1em .3em;
	border-radius: 3px;
	background: rgba(255, 177, 79, .18);
	color: inherit;
}

/* ==========================================================================
   Bordes
   --------------------------------------------------------------------------
   El sitio pintaba todos sus filetes con `--default-border-color`, que en
   modo oscuro valía `#19092ca6`: un morado casi negro, MÁS oscuro que el
   propio fondo. O sea, filetes que no se veían, y donde se veían parecían
   una grieta. Se cambia por un hilo de violeta con luz propia.

   El valor lo fija un <style> en línea que el tema genera a partir del
   Personalizador, así que hace falta un selector con más peso —de ahí el
   `html` delante— para deshacerlo sin recurrir a `!important`.
   ========================================================================== */

html body.cb01-dark-mode,
html body[data-color-mode="dark"]:not(.cb01-light-mode),
html body.custom-background.cb01-dark-mode {
	--default-border-color: rgba(122, 92, 255, .3);
}

:root {
	/* Un filete con degradado, para las separaciones que sí se miran. */
	--cb-rule: linear-gradient(
		90deg,
		transparent,
		rgba(255, 0, 94, .5) 12%,
		rgba(122, 92, 255, .55) 42%,
		rgba(0, 212, 255, .5) 72%,
		transparent
	);
}

/*
 * Las separaciones grandes del final del artículo dejan de ser una línea
 * de 1 px y pasan a ser un filete encendido. Se dibujan con un
 * pseudoelemento porque un degradado no se puede poner en `border-color`.
 */
.single .after-content > div,
.single div.post-navigation,
.single .comments-wrapper {
	position: relative;
	border-top-color: transparent !important;
}

.single .after-content > div::before,
.single div.post-navigation::before,
.single .comments-wrapper::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--cb-rule);
	pointer-events: none;
}

/* Las tablas del artículo: el filete de la cabecera, encendido. */
.entry-content table thead th,
.entry-content table thead td {
	border-bottom: 2px solid transparent;
	border-image: var(--cb-rule) 1;
}

/* ==========================================================================
   Aviso de cookies
   --------------------------------------------------------------------------
   Es lo primero que ve cualquier visitante y venía con el azul por
   defecto del plugin: fuera del sistema de color y, en el botón
   secundario, con texto azul sobre panel oscuro a un contraste
   insuficiente. Se alinea con la paleta del sitio.
   ========================================================================== */

.css-consent-banner {
	background: rgba(10, 8, 22, .97);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-top: 1px solid var(--cb-hairline);
	box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
	color: rgba(255, 255, 255, .82);
}

.css-banner__text {
	color: rgba(255, 255, 255, .78);
	font-size: .92rem;
	line-height: 1.55;
}

.css-consent-banner .css-btn,
.css-prefs__dialog .css-btn {
	appearance: none;
	-webkit-appearance: none;
	border-radius: 100px;
	padding: .65rem 1.35rem;
	font-family: var(--body-font);
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .02em;
	cursor: pointer;
	transition:
		transform var(--cb-fast) var(--cb-ease-out),
		background-color var(--cb-fast) var(--cb-ease),
		border-color var(--cb-fast) var(--cb-ease),
		color var(--cb-fast) var(--cb-ease);
}

.css-consent-banner .css-btn:hover,
.css-prefs__dialog .css-btn:hover {
	transform: translateY(-2px);
}

/* Aceptar: el único botón sólido. */
.css-btn--primary {
	background: linear-gradient(90deg, var(--cb-neon-pink), var(--cb-neon-violet));
	border: 1px solid transparent;
	color: #fff;
	box-shadow: 0 0 18px rgba(255, 0, 94, .3);
}

.css-btn--primary:hover {
	box-shadow: 0 0 26px rgba(122, 92, 255, .45);
}

/* Rechazar y gestionar: fantasma, con texto blanco legible. */
.css-btn--secondary,
.css-btn--outline {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .28);
	color: rgba(255, 255, 255, .92);
}

.css-btn--secondary:hover,
.css-btn--outline:hover {
	border-color: var(--cb-neon-cyan);
	background: rgba(0, 212, 255, .1);
	color: #fff;
}

/* Panel de preferencias */
.css-prefs__dialog {
	background: linear-gradient(180deg, rgba(16, 14, 36, .99), rgba(9, 8, 22, .99));
	border: 1px solid var(--cb-hairline);
	border-radius: 8px;
	color: rgba(255, 255, 255, .85);
}

.css-prefs__header,
.css-prefs__footer {
	border-color: var(--cb-hairline);
}

.css-pref-category__label { color: #fff; font-weight: 600; }
.css-pref-category__desc  { color: rgba(255, 255, 255, .6); font-size: .88rem; }

.css-prefs__overlay { background: rgba(4, 3, 10, .8); }

.css-prefs__close {
	color: rgba(255, 255, 255, .7);
	background: none;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 6px;
}

.css-prefs__close:hover {
	color: #fff;
	border-color: var(--cb-neon-pink);
}

.css-toggle__slider { background: rgba(255, 255, 255, .18); }

.css-toggle input:checked + .css-toggle__slider,
.css-toggle-wrap input:checked + .css-toggle__slider {
	background: var(--cb-neon-cyan);
}

/* En móvil el aviso ocupaba media pantalla. */
@media (max-width: 640px) {

	.css-banner__inner {
		padding: 1rem 1.1rem 1.15rem;
		gap: .75rem;
	}

	.css-banner__text {
		font-size: .84rem;
		line-height: 1.45;
		text-align: left;
	}

	.css-banner__actions {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
	}

	.css-consent-banner .css-btn {
		flex: 1 1 auto;
		padding: .6rem 1rem;
		font-size: .8rem;
	}
}

/* Un <section class="widget"> que se queda sin contenido no debe dejar
   hueco ni borde en la barra lateral. */
.widget:empty { display: none; }

/* El hero del artículo en móvil necesita algo más de aire: con el alto
   anterior la imagen y el titular se peleaban por el mismo espacio. */
@media (max-width: 767px) {

	body .single-hero.cover .cover-wrapper {
		min-height: clamp(20rem, 46vh, 25rem);
	}
}

/* --- Retoques de la página 404 --------------------------------------------
   El contador de la categoría salía pegado al nombre («Videojuegos12
   artículos») porque el tema envuelve el número sin separador, y el
   botón de buscar quedaba suelto debajo del campo en vez de dentro.
   -------------------------------------------------------------------------- */

.cb-404-helpers__cats .cb01-count {
	margin-left: .45rem;
	/* `--cb-ink-4` no está declarado en ningún sitio, así que aquí mandaba
	   el respaldo: blanco al 46 % sobre la ficha, medido 4,49:1 para un
	   texto de 11,5 px que necesita 4,5. Fallaba por una centésima, pero
	   fallaba. Al 60 % son 5,6:1. */
	color: rgba(255, 255, 255, .6);
	font-size: .8em;
}

.cb-404 .page-title.title-404 {
	text-align: center;
}

.cb-404__search .search-form {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 0;
}

.cb-404__search .search-field {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 100px 0 0 100px;
}

.cb-404__search .search-submit {
	flex: none;
	width: 3.25rem;
	margin: 0;
	border-radius: 0 100px 100px 0;
	background: linear-gradient(90deg, var(--cb-neon-pink), var(--cb-neon-violet));
	color: #fff;
	border: 0;
	cursor: pointer;
}

.cb-404__search .search-submit:hover {
	filter: saturate(120%);
}

/* ==========================================================================
   Correcciones de alcance general detectadas al rehacer las páginas
   ========================================================================== */

/* --- El bloque «Columnas» no se apilaba en móvil ----------------------------
   `css/gutenberg.css` copió de WordPress las reglas que AÑADEN margen a las
   columnas ya apiladas (líneas 340 y 1579) pero no las que las apilan.
   Medido con un `wp:columns` a 390 px: bloque de 730 px de ancho y 340 px de
   desplazamiento horizontal. Afecta a cualquier página o entrada que use el
   bloque.
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {

	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:only-child) {
		flex-basis: 100% !important;
		flex-grow: 0;
	}
}

/* --- El estilo «contorno» de los botones no existía -------------------------
   El sitio no carga `wp-block-library` entera, así que `is-style-outline` se
   quedaba sin reglas y el botón heredaba relleno oscuro con tinta oscura:
   1,7:1 medido. Se define aquí para todo el sitio.
   -------------------------------------------------------------------------- */

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > a[href] {
	border: 1px solid currentColor;
	background: transparent;
	color: #fff;
	transition:
		background-color var(--cb-fast) var(--cb-ease),
		border-color var(--cb-fast) var(--cb-ease),
		color var(--cb-fast) var(--cb-ease);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > a[href]:hover {
	border-color: var(--cb-neon-cyan);
	background: rgba(0, 212, 255, .12);
	color: #fff;
}

/* --- Agrupación invertida en los formularios --------------------------------
   El tema pone un margen vertical uniforme a los campos: de la etiqueta a SU
   campo había 54 px y del campo a la etiqueta SIGUIENTE, 32. El hueco interno
   era mayor que el separador, así que cada etiqueta parecía pertenecer al
   campo de arriba. Se invierte la proporción: 8 px dentro, 32 entre.
   -------------------------------------------------------------------------- */

.wpcf7-form label,
.comment-form label {
	margin-bottom: .5rem;
}

.wpcf7-form label > .wpcf7-form-control-wrap,
.wpcf7-form label > input,
.wpcf7-form label > textarea,
.wpcf7-form label > select {
	margin-top: .5rem;
}

.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form textarea,
.wpcf7-form select {
	margin-block: 0 var(--cb-s5, 2rem);
}

/* ==========================================================================
   Repaso de móvil
   --------------------------------------------------------------------------
   Recorrido a 360, 390, 414 y 768 px sobre portada, categorías, búsqueda y
   404. Salvo el contraste del enlace de salto —que sería peor arreglar sólo
   en una mitad del sitio—, todo va dentro de consultas `max-width` y el
   escritorio queda intacto.
   ========================================================================== */

/*
 * Defecto medido: el enlace «Saltar al contenido principal» va en blanco
 * sobre el rosa de marca puro: 3,88:1 a 14,4 px, cuando el mínimo para
 * texto normal es 4,5:1. Es literalmente el primer elemento que recibe el
 * foco en todo el sitio. La tinta oscura sobre el mismo rosa da 5,03:1 y de
 * paso se parece más a un rótulo de recreativa que a un botón cualquiera.
 */
.cb-skip-link {
	color: #0b0918;
}

@media (max-width: 1023px) {

	/* --- Separación entre tarjetas del listado -----------------------------
	 * Defecto medido en /category/videojuegos/ a 390 px: las tarjetas de
	 * archivo miden 487 px y empiezan cada 507, o sea 20 px de aire entre
	 * el pie de una (avatar, autor, fecha, iconos de compartir) y la
	 * miniatura de la siguiente. Sin fondo, sin borde y sin sombra, nada
	 * dice dónde acaba una entrada: al bajar, la fila de autor se lee como
	 * si perteneciera a la foto de abajo. Se separan y se marca el corte
	 * con la línea de pelo del tema, centrada en el hueco (24 px arriba,
	 * 24 abajo) para que no parezca el subrayado de la tarjeta anterior.
	 * ---------------------------------------------------------------------- */
	.content-area.post-grid.list {
		gap: 1.5rem;
	}

	.content-area.post-grid.list > .article {
		padding-bottom: 1.5rem;
		border-bottom: 1px solid var(--cb-hairline);
	}

	.content-area.post-grid.list > .article:last-of-type {
		padding-bottom: 0;
		border-bottom: 0;
	}

	/* --- Etiqueta de categoría de la tarjeta -------------------------------
	 * Defecto medido: 84x18 px de zona pulsable y 10 px de cuerpo. Se sube
	 * a 11 px y 26 de alto, y la zona se completa hasta 44 con un
	 * pseudoelemento de 9 px por arriba y por abajo: el hueco de la
	 * tarjeta es de 11,25 px, así que no pisa ni la miniatura ni el
	 * titular.
	 * ---------------------------------------------------------------------- */
	.post-grid .entry-meta.category-meta a {
		position: relative;
		display: inline-flex;
		align-items: center;
		min-height: 26px;
		padding: .3rem .55rem;
		font-size: .69rem;
	}

	.post-grid .entry-meta.category-meta a::after {
		content: "";
		position: absolute;
		top: -9px;
		right: 0;
		bottom: -9px;
		left: 0;
	}

	/* --- Pie de la tarjeta: autor y compartir ------------------------------
	 * Defecto medido: el avatar daba 35x35 px y cada icono de compartir,
	 * 18x18 —el objetivo más pequeño de todo el sitio—. Además el pie iba
	 * en `nowrap`, así que a 330 px de ancho los 260 del bloque de autor y
	 * los iconos se peleaban por la misma línea. Se deja que caigan a dos
	 * filas y se llevan los dos objetivos a 44.
	 * ---------------------------------------------------------------------- */
	/*
	 * El pie sigue en una sola línea: con las chapas a 34 px quedan
	 * 192 px para el bloque de autor a 390 y el nombre más largo del
	 * sitio («Thalvas Von Wierhem», 120 px) más el avatar (50) suman 170.
	 * Sólo hay que dejarle un poco de aire lateral.
	 */
	.post-grid .hentry-footer {
		gap: .75rem 1rem;
	}

	/* El tema declara `--avatar-width: 35px` en :root y de ahí salen tanto
	   el `max-width` del avatar como el desplazamiento del nombre que va
	   al lado; se sube el token en la propia fila para que las dos cosas
	   se muevan a la vez. */
	.post-grid .hentry-footer .entry-meta.author {
		--avatar-width: 40px;
		--mobile-avatar-width: 40px;
	}

	.post-grid .entry-meta-avatar a {
		position: relative;
		display: inline-block;
		line-height: 0;
	}

	.post-grid .entry-meta-avatar a::after {
		content: "";
		position: absolute;
		top: -2px;
		right: -2px;
		bottom: -2px;
		left: -2px;
	}

	.post-grid .hentry-footer .cb01-social-icons {
		gap: 10px;
	}

	/* css/cb01.css fija estas chapas en 18x18 con cinco clases de peso
	   (`.post-grid .hentry-footer .cb01-social-icons.icon-background
	   li.cb01-social-icon a`), así que hace falta la clase del <body> para
	   ganarle sin recurrir a !important. */
	.cb-header-active .post-grid .hentry-footer .cb01-social-icons.icon-background li.cb01-social-icon > a,
	.cb-header-active .post-grid .hentry-footer .cb01-social-icons.icon-border li.cb01-social-icon > a,
	.cb-header-active .post-grid .hentry-footer .cb01-social-icons.icon li.cb01-social-icon > a {
		position: relative;
		width: 34px;
		height: 34px;
		font-size: .78rem;
	}

	/* Con 10 px de separación entre chapas, cinco por cada lado dejan
	   cuadrados de 44 que se tocan pero no se solapan. */
	.post-grid .hentry-footer .cb01-social-icon > a::after {
		content: "";
		position: absolute;
		top: -5px;
		right: -5px;
		bottom: -5px;
		left: -5px;
	}
}

/*
 * Por debajo de 768 px las rejillas de la portada se apilan en una sola
 * columna con 20 px de hueco y el mismo problema que el archivo: la fila de
 * metadatos de una tarjeta queda pegada a la foto de la siguiente. Se aplica
 * el mismo corte. A partir de 768 vuelven a ser dos o más columnas y la
 * línea sobraría, así que se corta aquí.
 */
@media (max-width: 767px) {

	.post-grid.cb01-post-block.grid > .article:not(:last-child),
	.cb01-post-block-offset-wrapper.post-grid > .article:not(:last-child) {
		padding-bottom: 1.5rem;
		border-bottom: 1px solid var(--cb-hairline);
	}
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

@media (max-width: 599px) {

	/*
	 * Defecto medido a 390 px: `.cb-404-helpers__cats` es un flex con
	 * envoltura y fichas de ancho variable (185 px «Componentes de PC»,
	 * 123 px «Software»). En 330 px de columna no entran dos, salvo el par
	 * más corto: salían seis filas de una ficha y una última de dos, con
	 * un borde derecho completamente dentado que se lee como error de
	 * maquetación. Se pasa a una columna limpia con el recuento alineado a
	 * la derecha, que además convierte cada ficha en una fila de 44 px.
	 */
	.cb-404-helpers__cats {
		flex-direction: column;
		align-items: stretch;
		gap: .5rem;
	}

	.cb-404-helpers__cats li {
		width: 100%;
	}

	.cb-404-helpers__cats a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		min-height: 44px;
	}

	.cb-404-helpers__cats .cb01-count {
		margin-left: 0;
	}

	/*
	 * El texto de ayuda del buscador («Introduce tu búsqueda y aprieta
	 * enter») pide 280 px a 16 px de cuerpo y el campo útil son 246: se
	 * cortaba a media palabra. Un punto menos de escala lo mete entero.
	 */
	.cb-404__search .search-field {
		font-size: .9rem;
		text-overflow: ellipsis;
	}
}

/* --------------------------------------------------------------------------
   Paginación del archivo
   --------------------------------------------------------------------------
   Defecto medido al pie de /category/videojuegos/ a 390 px: los números de
   página dan 36x36 px y el botón «Más antiguos», 144x40. Es el único camino
   a la segunda página desde un teléfono y son dos objetivos pequeños y
   pegados el uno al otro.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {

	.pagination .nav-links {
		gap: .5rem;
		flex-wrap: wrap;
	}

	/* Esta misma hoja fijaba antes 36 px con `.cb-header-active .pagination
	   .page-numbers:not(.next):not(.prev)`; hay que igualar ese peso. */
	.cb-header-active .pagination .page-numbers,
	.cb-header-active .pagination .page-numbers:not(.next):not(.prev) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}

/*
 * Defecto medido a 360 y 390 px: los botones de bloque de las llamadas a la
 * acción («Contacta con nosotros») daban 193x42 px. Dos píxeles, pero son
 * dos píxeles en el único botón de un bloque promocional.
 */
@media (max-width: 1023px) {

	.wp-block-button__link,
	.wp-block-button > a[href],
	a.button,
	button.button,
	/* La llamada a la acción de los bloques promocionales («Contacta con
	   nosotros») es un <button> pelado, sin ninguna clase, y medía
	   193x42. Todos los mandos reales del sitio llevan clase, así que
	   `:not([class])` sólo alcanza a los botones escritos a mano en el
	   contenido. */
	button:not([class]) {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/*
 * Defecto medido a 360 px: con las chapas de compartir a 34 px el pie de la
 * tarjeta deja 162 px para el bloque de autor, y el nombre —que el tema
 * coloca en absoluto a 50 px del borde— necesita hasta 170 («Thalvas Von
 * Wierhem»): se montaba sobre los iconos. Por debajo de 381 px los iconos
 * bajan a su propia fila, que es lo único que cabe sin romper nada.
 */
@media (max-width: 380px) {

	.post-grid .hentry-footer {
		flex-wrap: wrap;
	}

	.post-grid .hentry-footer .cb01-share-wrapper {
		margin-left: auto;
	}
}

/* El botón «volver arriba» es fijo y va a 25 px del borde derecho: a 360
   px se planta sobre los últimos 45 px de la columna de lectura y tapa el
   final de cada renglón. Se arrima al canto y se atenúa. */
@media (max-width: 767px) {

	.goto-top.backtotop {
		right: 10px;
		opacity: .82;
	}

	.goto-top.backtotop:hover,
	.goto-top.backtotop:focus-visible {
		opacity: 1;
	}
}