@charset "UTF-8";
/* ==========================================================================
   CriticaBits — cabecera
   --------------------------------------------------------------------------
   El panel frontal de una máquina:

     raíl   piloto + lema ······································ enlaces
     barra  ☰  CRÍTICA B¡TS   secciones ····················· buscar
     haz    línea de neón que en los artículos marca la lectura

   Nada aquí usa las clases del tema (.site-header, .site-header-inner,
   .mobile-header), así que la cabecera antigua y sus reglas quedan
   completamente fuera de juego y esto no hereda nada que corregir.
   ========================================================================== */

/*
 * style.css declara `body { overflow-x: hidden }`. Según la
 * especificación ese valor se propaga al viewport y el body vuelve a
 * ser `visible`, así que sticky funciona… salvo que algo rompa esa
 * propagación, en cuyo caso el body pasa a ser contenedor de scroll y
 * la cabecera deja de pegarse sin previo aviso.
 *
 * `clip` recorta igual pero nunca crea un contenedor de scroll, de modo
 * que sticky no depende de ese matiz. Los navegadores que no lo
 * entiendan se quedan con el `hidden` anterior.
 */
.cb-header-active {
	overflow-x: clip;
}

/* Los saltos de ancla —índice de contenidos, #comentarios— se detienen
   por debajo de la cabecera, no ocultos tras ella. */
html {
	scroll-padding-top: 5rem;
}

/*
 * En móvil el tema deja la cabecera en `position: static`, y un elemento
 * estático IGNORA su z-index: los 300 que lleva declarados no servían de
 * nada. Como el tema sube el hero 30 px para cerrar la costura, el hero
 * —migas incluidas— acababa pintándose POR ENCIMA de la cabecera.
 * Comprobado con elementFromPoint a 390 px: en el punto medio de la barra
 * respondía `span.last`, o sea una miga del hero.
 *
 * `sticky`, no `relative`.
 *
 * Con `relative` el apilamiento se arreglaba, sí, pero de paso se cancelaba
 * el `position: sticky` de la regla general de más abajo y la cabecera dejaba
 * de quedarse arriba por debajo de 1060 px. Medido: a 390 px, tras bajar
 * 2000 px, la cabecera estaba en top = −1994, o sea fuera de la pantalla.
 * `sticky` crea contexto de apilamiento igual que `relative` y además
 * conserva el comportamiento que se quería.
 */
@media (max-width: 1060px) {

	/* `#site-header { position: static }` del tema pesa (1,0,0) y ganaba
	   a `.cb-header`; hace falta el propio identificador para deshacerlo. */
	#site-header.cb-header {
		position: sticky;
		top: 0;
		z-index: 300;
	}
}

.cb-header {
	--cbh-rail-h: 34px;
	--cbh-bar-h: 78px;
	--cbh-bar-h-stuck: 58px;
	/*
	 * Defecto observado: la cabecera tenía su propio contenedor de
	 * 1400 px con un aire lateral distinto al del contenido. A 1440 px
	 * el logotipo caía en x=60 y la primera tarjeta del listado en
	 * x=70; a 1600 px la diferencia con el hero llegaba a 40 px. Ahora
	 * la cabecera usa el mismo margen que el resto del sitio
	 * (--cb-edge) y el contenedor propio desaparece.
	 */
	--cbh-gutter: var(--cb-edge, 30px);
	--cbh-max: none;

	--cbh-ink: rgba(255, 255, 255, .84);
	--cbh-ink-dim: rgba(255, 255, 255, .52);
	--cbh-line: rgba(255, 255, 255, .09);

	position: sticky;
	top: 0;
	z-index: 300;
	isolation: isolate;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
}

/* El centinela va justo antes de la cabecera: cuando sale de pantalla,
   el JS sabe que la cabecera está pegada arriba. Sin manejadores de
   scroll ni medidas del DOM. */
.cb-header-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Raíl superior
   -------------------------------------------------------------------------- */

.cb-rail {
	height: var(--cbh-rail-h);
	overflow: hidden;
	background: #060510;
	border-bottom: 1px solid var(--cbh-line);
	transition:
		height var(--cb-base, 260ms) var(--cb-ease-out, ease),
		border-bottom-width var(--cb-base, 260ms) var(--cb-ease-out, ease),
		opacity var(--cb-base, 260ms) ease;
}

/*
 * Al pegarse arriba, el raíl se plegaba con height:0 + opacity:0 pero
 * conservaba su borde inferior de 1px: solo se le quitaba el color. Ese
 * píxel seguía ocupando sitio y, con opacity:0, se volvía transparente,
 * así que la cabecera empezaba en y=1 y por esa franja se veía correr la
 * página. Medido: .cb-bar arrancaba en top=1 y elementFromPoint(10, 0)
 * devolvía .cb-rail__inner. Hay que plegar también el ancho del borde.
 */
.cb-header.is-stuck .cb-rail {
	height: 0;
	opacity: 0;
	border-bottom-width: 0;
}

.cb-rail__inner {
	max-width: var(--cbh-max);
	margin: 0 auto;
	padding: 0 var(--cbh-gutter);
	height: var(--cbh-rail-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.cb-rail__status {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	min-width: 0;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .78rem;
	letter-spacing: .01em;
	color: var(--cbh-ink-dim);
}

.cb-rail__tagline {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Piloto de encendido. Late despacio: es un detalle, no una alarma. */
.cb-led {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cb-neon-cyan, #00d4ff);
	box-shadow: 0 0 6px var(--cb-neon-cyan, #00d4ff);
	animation: cb-led-pulse 3.2s ease-in-out infinite;
}

@keyframes cb-led-pulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--cb-neon-cyan, #00d4ff); }
	50%      { opacity: .45; box-shadow: 0 0 2px var(--cb-neon-cyan, #00d4ff); }
}

.cb-rail__links {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex: none;
}

.cb-rail__links a {
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .78rem;
	letter-spacing: .01em;
	color: var(--cbh-ink-dim);
	text-decoration: none;
	transition: color var(--cb-fast, 140ms) ease;
}

.cb-rail__links a:hover,
.cb-rail__links a:focus-visible {
	color: var(--cb-neon-cyan, #00d4ff);
}

@media (max-width: 860px) {
	.cb-rail { display: none; }
}

/* --------------------------------------------------------------------------
   Barra principal
   -------------------------------------------------------------------------- */

/*
 * Opaca, sin cristal esmerilado. La barra iba a 0,90 y 0,94 de opacidad
 * sobre un desenfoque de fondo, así que al desplazarse se veía la página
 * ATRAVESANDO la cabecera; y en la línea del haz —dos píxeles de blanco
 * al 9 %— el efecto se leía como una rendija abierta justo debajo. Un
 * fondo sólido lo cierra, y el desenfoque sobra: ya no hay nada detrás
 * que desenfocar.
 */
/*
 * La barra: traslúcida, desenfocada y con grano.
 *
 * Era opaca desde que se persiguió la franja de 1px al hacer scroll; la
 * causa real resultó ser el borde inferior del raíl, que se plegaba a
 * height:0 pero conservaba su píxel, así que la opacidad ya no hace falta
 * para nada y la barra puede volver a dejar ver lo que pasa por debajo.
 *
 * El grano es el mismo noise-grey.png que lleva el fondo del sitio, al 3,5%
 * y en `overlay`: a más opacidad se come el filo del texto a cuerpos
 * pequeños. Va en background-image junto al degradado, no en un
 * pseudoelemento, porque ::before y ::after de .cb-bar ya están ocupados.
 *
 * `backdrop-filter` sólo se aplica si el navegador lo soporta: sin él, un
 * fondo al 82% deja leer el texto de la página a través de la barra. En la
 * consulta @supports la barra baja al 96%, casi opaca.
 */
.cb-bar {
	position: relative;
	background-color: rgba(13, 11, 32, .96);
	background-image:
		url("../img/noise-grey.png"),
		linear-gradient(180deg, rgba(20, 17, 46, .96), rgba(11, 9, 26, .98));
	background-blend-mode: overlay, normal;
	background-size: 160px 160px, auto;
	transition: box-shadow var(--cb-base, 260ms) ease;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

	.cb-bar {
		background-color: rgba(13, 11, 32, .62);
		background-image:
			url("../img/noise-grey.png"),
			linear-gradient(180deg, rgba(20, 17, 46, .66), rgba(11, 9, 26, .74));
		/*
		 * brightness() en el filtro de fondo, no más alfa en la barra: así se
		 * sigue viendo pasar el contenido por detrás —que es lo que se pide—
		 * pero llega oscurecido, y el texto del menú no pierde contraste
		 * cuando lo que cruza es una portada clara. Medido sobre la portada
		 * naranja del Atari: sin esto, los enlaces bajaban de 2,12 a 1,95.
		 */
		-webkit-backdrop-filter: blur(18px) saturate(135%) brightness(.5);
		backdrop-filter: blur(18px) saturate(135%) brightness(.5);
	}
}

.cb-header.is-stuck .cb-bar {
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.cb-bar__inner {
	/* Ancla del indicador deslizante. El panel, en cambio, se ancla a
	   .cb-bar para poder ir a sangre de lado a lado. */
	position: relative;
	max-width: var(--cbh-max);
	margin: 0 auto;
	padding: 0 var(--cbh-gutter);
	height: var(--cbh-bar-h);
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	transition: height var(--cb-base, 260ms) var(--cb-ease-out, ease);
}

.cb-header.is-stuck .cb-bar__inner {
	height: var(--cbh-bar-h-stuck);
}

.cb-bar__start {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex: none;
	min-width: 0;
}

/* La navegación y las acciones forman un solo grupo pegado a la derecha,
   con el wordmark solo a la izquierda. */
.cb-nav { margin-left: auto; }

.cb-bar__end {
	display: flex;
	align-items: center;
	gap: .4rem;
	flex: none;
}

/* Sin navegación (móvil) el grupo de acciones toma el relevo. */
@media (max-width: 1023px) {
	.cb-bar__end { margin-left: auto; }
}

/* --- Interruptores (menú y buscador) ------------------------------------ */

.cb-header .toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 1px solid var(--cbh-line);
	border-radius: 6px;
	color: var(--cbh-ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition:
		border-color var(--cb-fast, 140ms) ease,
		color var(--cb-fast, 140ms) ease,
		background-color var(--cb-fast, 140ms) ease;
}

/* Anula el .hidden y los márgenes que el tema aplicaba a los toggles. */
.cb-header .toggle.hidden { display: none; }
.cb-header .toggle span { display: inline-flex; }

/* El menú lateral sólo aparece donde no cabe la navegación completa. */
@media (min-width: 1024px) {
	.cb-header .toggle-menu { display: none; }
}

.cb-header .toggle:hover {
	color: var(--cb-neon-cyan, #00d4ff);
	border-color: rgba(0, 212, 255, .45);
	background: rgba(0, 212, 255, .07);
}

.cb-header .toggle:focus-visible {
	outline: 2px solid var(--cb-neon-cyan, #00d4ff);
	outline-offset: 2px;
}

/* --- Wordmark ------------------------------------------------------------
   El centrado vertical se resuelve con flex en los tres niveles
   (contenedor, encabezado y enlace) en lugar de fiarlo a la línea base:
   el <h1>/<p> traía line-height e interlineado del tema y el glifo
   quedaba visiblemente alto dentro de la barra.

   Los selectores llevan .cb-bar__start delante a propósito: el CSS del
   Personalizador declara `.site-title.faux-heading a { font-size:
   1.75rem }`, que se imprime después y, sin esa clase extra, ganaba en
   las páginas que no son la portada — el logotipo cambiaba de tamaño
   según dónde estuvieras.
   ------------------------------------------------------------------------ */

.cb-header .cb-bar__start .site-title {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	line-height: 1;
	white-space: nowrap;
}

.cb-header .cb-bar__start .site-title a {
	display: flex;
	align-items: center;
	font-family: var(--title-font, "Plus Jakarta Sans", sans-serif);
	font-size: clamp(1.7rem, 3.2vw, 2.45rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.035em;
	color: #fff;
	text-decoration: none;
	transition:
		font-size var(--cb-base, 260ms) var(--cb-ease-out, ease),
		transform var(--cb-base, 260ms) var(--cb-ease-out, ease);
}

.cb-header.is-stuck .cb-bar__start .site-title a {
	font-size: clamp(1.4rem, 2.4vw, 1.85rem);
}

.cb-header .cb-bar__start .site-title a:hover {
	transform: translateY(-1px);
}

/* El «¡» es un glifo alto: se le baja un pelo para que su punto quede a
   la altura de las mayúsculas. */
.cb-header .site-title .logo-i {
	display: inline-block;
	transform: translateY(.06em);
}

/* --------------------------------------------------------------------------
   Navegación
   -------------------------------------------------------------------------- */

/* Estático a propósito: así el panel de sección se ancla a .cb-bar y
   puede ocupar todo el ancho de la ventana, no sólo el del menú. */
.cb-nav {
	position: static;
	align-self: stretch;
	display: flex;
	align-items: center;
	min-width: 0;
}

.cb-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(.35rem, 1.6vw, 1.35rem);
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

.cb-nav__item {
	display: flex;
	align-items: center;
	height: 100%;
	margin: 0;
}

.cb-nav__link {
	display: inline-flex;
	align-items: center;
	height: 100%;
	padding: 0 .35rem;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .085em;
	text-transform: uppercase;
	color: var(--cbh-ink-dim);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--cb-fast, 140ms) ease;
}

.cb-nav__link:hover,
.cb-nav__link:focus-visible,
.cb-nav__item.is-current .cb-nav__link,
.cb-nav__item.is-open .cb-nav__link {
	color: #fff;
}

.cb-nav__link:focus-visible {
	outline: 2px solid var(--cb-neon-cyan, #00d4ff);
	outline-offset: -4px;
	border-radius: 3px;
}

/*
 * Indicador deslizante. Es un único elemento que viaja entre secciones
 * en lugar de un subrayado por enlace: el movimiento hace de hilo
 * conductor y deja claro de dónde vienes y adónde vas.
 */
.cb-nav__indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	/*
	 * Medía 2 px, el mismo grosor y el mismo degradado que el haz que
	 * cruza toda la cabecera justo debajo: sobre el haz encendido no se
	 * distinguía cuál era cuál. Se le da un píxel más y se sube el
	 * resplandor para que gane la partida.
	 */
	height: 3px;
	width: 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--cb-neon-pink, #ff005e), var(--cb-neon-cyan, #00d4ff));
	box-shadow: 0 0 14px rgba(255, 0, 94, .7), 0 0 4px rgba(0, 212, 255, .5);
	opacity: 0;
	transform: translateX(0);
	transition:
		transform var(--cb-base, 260ms) var(--cb-ease-out, ease),
		width var(--cb-base, 260ms) var(--cb-ease-out, ease),
		opacity var(--cb-fast, 140ms) ease;
	pointer-events: none;
}

.cb-nav.has-indicator .cb-nav__indicator {
	opacity: 1;
	/*
	 * Defecto observado: en la portada no hay sección activa, así que el
	 * indicador espera con width:0 pegado al borde izquierdo de la
	 * barra. Al pasar por la primera sección el JS le da su sitio y su
	 * opacidad a la vez, y lo que se veía era un rayo de neón cruzando
	 * 620 px por debajo del logotipo antes de pararse bajo la palabra.
	 * Retrasando sólo la aparición (la tercera transición de la lista)
	 * el viaje se hace invisible y el indicador se enciende ya colocado.
	 * Entre secciones, con la clase ya puesta, la opacidad no cambia y
	 * el deslizamiento sigue viéndose como antes.
	 */
	transition-delay: 0s, 0s, 190ms;
}

/* Entre 1024 y 1200 px las cinco secciones van justas: se aprieta el
   espaciado antes que dejar que el menú empuje al buscador. */
@media (min-width: 1024px) and (max-width: 1200px) {

	.cb-nav__link {
		font-size: .74rem;
		letter-spacing: .05em;
	}
}

@media (max-width: 1023px) {
	.cb-nav { display: none; }
}

/* --------------------------------------------------------------------------
   Panel de sección
   --------------------------------------------------------------------------
   Al pasar por una sección baja un panel a sangre con sus tres últimos
   artículos. A la izquierda, el nombre de la sección en grande hace de
   ancla visual; a la derecha, las tarjetas entran escalonadas.
   -------------------------------------------------------------------------- */

.cb-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	overflow: hidden;
	border-top: 1px solid rgba(122, 92, 255, .3);
	border-bottom: 1px solid rgba(122, 92, 255, .22);
	background:
		/* Rejilla de puntos, muy tenue: da textura sin ruido. */
		radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 22px 22px,
		radial-gradient(120% 140% at 12% 0%, rgba(122, 92, 255, .2), transparent 62%),
		linear-gradient(180deg, #14112e, #0b0917);
	box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .85);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition:
		opacity var(--cb-base, 260ms) var(--cb-ease, ease),
		transform var(--cb-base, 260ms) var(--cb-ease-out, ease),
		visibility 0s linear var(--cb-base, 260ms);
}

/* El filo encendido del borde superior. */
.cb-panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--cb-neon-pink) 18%, var(--cb-neon-violet) 50%, var(--cb-neon-cyan) 82%, transparent);
	opacity: .8;
}

.cb-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/*
 * Dos columnas: a la izquierda la identidad de la sección —de qué va,
 * cuánto hay, y la puerta de entrada—; a la derecha lo último publicado.
 * Es la recomendación de manual para un mega menú: priorizar lo
 * importante arriba y a la vista, sin desplazamiento, y organizar con
 * jerarquía visual en vez de con una lista larga.
 */
.cb-panel__inner {
	display: grid;
	grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr);
	gap: 2.5rem;
	max-width: var(--cbh-max, none);
	margin: 0 auto;
	padding: 2.25rem var(--cbh-gutter) 1.25rem;
}

/* --- Columna de la sección ------------------------------------------------ */

.cb-panel__aside {
	position: relative;
	padding-right: 2.25rem;
	border-right: 1px solid rgba(255, 255, 255, .08);
}

.cb-panel__eyebrow {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .5rem;
	font-family: var(--body-font);
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cb-neon-cyan);
}

.cb-panel__section {
	margin: 0 0 .35rem;
	font-family: var(--body-font);
	font-size: clamp(1.5rem, 1.7vw, 1.95rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: #fff;
}

.cb-panel__count {
	margin: 0 0 1.4rem;
	font-size: .82rem;
	color: rgba(255, 255, 255, .5);
}

.cb-panel__count b {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--cb-neon-cyan);
}

/* --- La banda de debajo de las tarjetas ------------------------------------
   Bajo las tres portadas quedaba un hueco muerto de unos 150 px. Ahora lo
   ocupan dos cosas que sirven para algo: la entrada más leída de la sección
   —con su recuento real, de Post Views Counter— y las etiquetas más usadas
   dentro de esa misma sección, que son el atajo que le falta al menú.

   Las dos partes se pintan sólo si hay dato. Sin el plugin de visitas, o en
   una sección sin etiquetas, la banda entera desaparece y el panel vuelve a
   quedarse como estaba.
   -------------------------------------------------------------------------- */

.cb-panel__extra {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1rem;
	margin-top: 1.6rem;
	padding-top: 1.4rem;
	border-top: 1px dashed rgba(255, 255, 255, .1);
}

/* --- Lo más leído --- */

.cb-panel__top {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .35rem;
	padding: .9rem 1.1rem;
	border: 1px solid rgba(0, 212, 255, .28);
	border-radius: 6px;
	background: linear-gradient(120deg, rgba(0, 212, 255, .1), rgba(0, 212, 255, 0) 62%);
	text-decoration: none;
	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-panel__top:hover,
.cb-panel__top:focus-visible {
	border-color: var(--cb-neon-cyan);
	background-color: rgba(0, 212, 255, .08);
	transform: translateY(-2px);
}

.cb-panel__topflag {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--body-font);
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cb-neon-cyan);
}

/* El punto que late. Es el único adorno animado del panel y se apaga con
   prefers-reduced-motion, más abajo. */
.cb-panel__topflag::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cb-neon-cyan);
	box-shadow: 0 0 0 0 rgba(0, 212, 255, .6);
	animation: cb-panel-pulse 2.4s var(--cb-ease-out) infinite;
}

@keyframes cb-panel-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(0, 212, 255, .55); }
	70%  { box-shadow: 0 0 0 7px rgba(0, 212, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
}

/*
 * Dos líneas como tope. Estos titulares llegan a 90 caracteres y a este
 * ancho se irían a cuatro líneas, estirando la banda y devolviendo el hueco
 * que se pretendía llenar.
 */
.cb-panel__toptitle {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
}

.cb-panel__topviews {
	font-size: .74rem;
	color: rgba(255, 255, 255, .5);
}

.cb-panel__topviews b {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .82);
}

/* --- Etiquetas de la sección --- */

.cb-panel__tags {
	flex: 1 1 340px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .6rem;
}

.cb-panel__tagslabel {
	margin: 0;
	font-family: var(--body-font);
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
}

.cb-panel__tags ul {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cb-panel__tags li { margin: 0; }

.cb-panel__tags a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .32rem .6rem;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	font-size: .74rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	color: rgba(255, 255, 255, .72);
	transition:
		border-color var(--cb-fast) var(--cb-ease),
		background-color var(--cb-fast) var(--cb-ease),
		color var(--cb-fast) var(--cb-ease);
}

.cb-panel__tags a:hover,
.cb-panel__tags a:focus-visible {
	border-color: var(--cb-neon-violet);
	background: rgba(122, 92, 255, .16);
	color: #fff;
}

/* El número va detrás y en pequeño: informa de cuántas entradas hay, pero
   no compite con el nombre, que es lo que se lee. */
.cb-panel__tags a span {
	font-size: .64rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .56);
}

.cb-panel__tags a:hover span,
.cb-panel__tags a:focus-visible span { color: var(--cb-neon-cyan); }

/* --- Las tres siguientes ---------------------------------------------------
   Continúan donde acaban las tarjetas de la derecha: si allí van la 01, la
   02 y la 03, aquí siguen la 04, la 05 y la 06, y la numeración lo dice en
   voz alta. Sin miniatura y a una línea, que esta columna es estrecha y no
   compite con las tarjetas: aquí se viene a rebuscar, no a mirar.
   -------------------------------------------------------------------------- */

.cb-panel__morelabel {
	margin: 0 0 .6rem;
	font-family: var(--body-font);
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
}

.cb-panel__more {
	margin: 0 0 1.4rem;
	padding: 0;
	list-style: none;
	border-top: 1px dashed rgba(255, 255, 255, .1);
}

.cb-panel__moreitem {
	margin: 0;
	border-bottom: 1px dashed rgba(255, 255, 255, .1);
}

.cb-panel__moreitem > a {
	display: flex;
	align-items: baseline;
	gap: .55rem;
	padding: .5rem 0;
	text-decoration: none;
	color: rgba(255, 255, 255, .62);
	transition:
		color var(--cb-fast) var(--cb-ease),
		padding-left var(--cb-fast) var(--cb-ease-out);
}

.cb-panel__moreitem > a:hover,
.cb-panel__moreitem > a:focus-visible {
	color: #fff;
	padding-left: .35rem;
}

.cb-panel__moreno {
	flex: 0 0 auto;
	font-family: var(--body-font);
	font-size: .6rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .56);
	transition: color var(--cb-fast) var(--cb-ease);
}

.cb-panel__moreitem > a:hover .cb-panel__moreno,
.cb-panel__moreitem > a:focus-visible .cb-panel__moreno {
	color: var(--cb-neon-cyan);
}

/*
 * Dos líneas como mucho: los titulares de este sitio son largos («Radeon
 * RX 7900 XTX — El Monstruo Rojo de AMD que Plantó Cara a Nvidia») y a
 * ancho de columna se irían a cuatro, empujando el botón de sección fuera
 * del panel.
 */
.cb-panel__moretitle {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.35;
}

.cb-panel__all {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1.05rem;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 4px;
	text-decoration: none;
	font-family: var(--body-font);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, .82);
	transition:
		border-color var(--cb-fast) var(--cb-ease),
		background-color var(--cb-fast) var(--cb-ease),
		color var(--cb-fast) var(--cb-ease),
		gap var(--cb-fast) var(--cb-ease-out);
}

.cb-panel__all:hover,
.cb-panel__all:focus-visible {
	border-color: var(--cb-neon-cyan);
	background: rgba(0, 212, 255, .12);
	color: #fff;
	gap: .8rem;
}

/* --- Columna de artículos -------------------------------------------------- */

.cb-panel__label {
	margin: 0 0 1rem;
	font-family: var(--body-font);
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .42);
}

.cb-panel__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cb-panel__card { margin: 0; }

.cb-panel.is-open .cb-panel__card {
	animation: cb-panel-in 420ms var(--cb-ease-out, ease) both;
}

.cb-panel.is-open .cb-panel__card:nth-child(1) { animation-delay: 40ms; }
.cb-panel.is-open .cb-panel__card:nth-child(2) { animation-delay: 100ms; }
.cb-panel.is-open .cb-panel__card:nth-child(3) { animation-delay: 160ms; }
.cb-panel.is-open .cb-panel__card:nth-child(4) { animation-delay: 220ms; }

@keyframes cb-panel-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

.cb-panel__card > a {
	position: relative;
	display: block;
	padding: 0;
	border-radius: 6px;
	text-decoration: none;
	transition: transform var(--cb-base, 260ms) var(--cb-ease-out, ease);
}

.cb-panel__card > a:hover {
	transform: translateY(-4px);
}

.cb-panel__card > a:focus-visible {
	outline: 2px solid var(--cb-neon-cyan);
	outline-offset: 4px;
}

.cb-panel__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	margin-bottom: .7rem;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 5px;
	overflow: hidden;
	background: rgba(0, 0, 0, .4);
}

.cb-panel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cb-slow, 520ms) var(--cb-ease-out, ease), filter var(--cb-base, 260ms) var(--cb-ease, ease);
	filter: saturate(.85);
}

/* Un barrido de luz que cruza la miniatura al apuntarla. */
.cb-panel__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 35%, rgba(0, 212, 255, .35) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform 620ms var(--cb-ease-out, ease);
}

.cb-panel__card > a:hover .cb-panel__media img {
	transform: scale(1.06);
	filter: saturate(1.1);
}

.cb-panel__card > a:hover .cb-panel__media {
	border-color: var(--cb-neon-cyan);
}

.cb-panel__card > a:hover .cb-panel__media::after {
	transform: translateX(120%);
}

.cb-panel__body {
	display: grid;
	grid-template-columns: 1.9rem minmax(0, 1fr);
	column-gap: .35rem;
	align-items: baseline;
}

/* El número de orden, en la columna de la izquierda. */
.cb-panel__no {
	font-family: var(--body-font);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .3);
	transition: color var(--cb-fast) var(--cb-ease);
}

.cb-panel__card > a:hover .cb-panel__no { color: var(--cb-neon-cyan); }

.cb-panel__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--body-font);
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.35;
	color: rgba(255, 255, 255, .88);
	transition: color var(--cb-fast) var(--cb-ease);
}

.cb-panel__card > a:hover .cb-panel__title { color: #fff; }

.cb-panel__date {
	grid-column: 2;
	margin-top: .25rem;
	font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
	font-size: .7rem;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .38);
}

/* --- Línea de estado ------------------------------------------------------- */

.cb-panel__status {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 1.6rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid rgba(255, 255, 255, .07);
	font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
	font-size: .7rem;
	color: rgba(255, 255, 255, .35);
}

.cb-panel__prompt { color: var(--cb-neon-cyan); }
.cb-panel__cmd { color: rgba(255, 255, 255, .6); }

.cb-panel__caret {
	width: 7px;
	height: 1em;
	background: var(--cb-neon-cyan);
	animation: cb-panel-caret 1.05s steps(1) infinite;
}

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

.cb-panel__hint {
	margin-left: auto;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .64rem;
}

/* --- Pantallas medias ------------------------------------------------------ */

@media (max-width: 1199px) {

	.cb-panel__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.cb-panel__aside {
		padding-right: 0;
		padding-bottom: 1.35rem;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}

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

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

	.cb-panel__topflag::before { animation: none; }

	.cb-panel.is-open .cb-panel__card { animation: none; }
	.cb-panel__media::after { display: none; }
	.cb-panel__caret { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Haz inferior
   --------------------------------------------------------------------------
   La misma línea sirve para dos cosas: remata la cabecera en cualquier
   página y, en los artículos, marca cuánto llevas leído. Un solo
   elemento en lugar de una barra de progreso flotante aparte.
   -------------------------------------------------------------------------- */

/*
 * El carril del haz iba en blanco al 9 % sobre una barra translúcida:
 * dos píxeles por los que se colaba la página, justo en el filo de la
 * cabecera. Con la barra ya opaca, el carril se oscurece en vez de
 * aclararse y el filo cierra limpio.
 */
.cb-beam {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	overflow: hidden;
	background: rgba(0, 0, 0, .45);
}

.cb-beam__fill {
	display: block;
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg,
		var(--cb-neon-pink, #ff005e),
		var(--cb-neon-violet, #7a5cff),
		var(--cb-neon-cyan, #00d4ff));
	transform-origin: left center;
	/*
	 * Fuera de los artículos el haz no mide nada: es sólo el remate de
	 * la cabecera. Al 55 % competía con el indicador de sección —mismo
	 * degradado, mismo grosor— y la navegación perdía su señal. Se baja
	 * a un filo tenue; en los artículos (.cb-has-progress) sigue
	 * encendido al 100 % porque ahí sí informa.
	 */
	opacity: .2;
}

/* En entradas y páginas la línea arranca vacía y se llena al leer. */
.cb-has-progress .cb-beam__fill {
	opacity: 1;
	box-shadow: 0 0 10px rgba(0, 212, 255, .55);
	transform: scaleX(var(--cb-progress, 0));
}

/* ==========================================================================
   Buscador a pantalla completa
   --------------------------------------------------------------------------
   Antes era una barra lateral estrecha con un campo pequeño. Ahora ocupa
   la ventana entera: el campo es lo único que compite por la atención, y
   debajo quedan las secciones para quien no sabe qué escribir.

   js/main.js lo abre con .show-search y un fadeToggle, así que se
   neutraliza el `display` en línea que deja jQuery y el estado real lo
   lleva la clase.
   ========================================================================== */

.cb-search.site-search {
	position: fixed;
	inset: 0;
	z-index: 900;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: rgba(6, 5, 14, .93);
	backdrop-filter: saturate(140%) blur(18px);
	-webkit-backdrop-filter: saturate(140%) blur(18px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--cb-base, 260ms) ease, visibility var(--cb-base, 260ms);
}

/* Gana a cualquier display:none/block que jQuery escriba en línea. */
.cb-search.site-search.show-search {
	display: block !important;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.cb-search__inner {
	max-width: 760px;
	margin: 0 auto;
	/*
	 * Defecto observado: el bloque medía 448 px en una ventana de 900 y
	 * quedaba pegado arriba, con medio panel vacío debajo. Se baja hasta
	 * el centro óptico sin recurrir a centrado flexible, que en pantallas
	 * bajas recorta la parte de arriba al desbordar.
	 */
	padding: clamp(1.5rem, 17vh, 9rem) clamp(1.25rem, 5vw, 2rem) 4rem;
	display: flex;
	flex-direction: column;
	gap: 2.25rem;
	transform: translateY(-14px);
	opacity: 0;
	transition: transform var(--cb-slow, 520ms) var(--cb-ease-out, ease), opacity var(--cb-slow, 520ms) ease;
}

.cb-search.show-search .cb-search__inner {
	transform: none;
	opacity: 1;
}

/* --- Cabecera del panel --------------------------------------------------- */

.cb-search__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0;
	border: 0;
	background: none;
}

.cb-search__eyebrow {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cbh-ink-dim, rgba(255, 255, 255, .52));
}

/*
 * Defecto observado: el botón de cerrar salía con DOS aspas. El tema
 * pinta un icono de la tipografía fontello en `.close-menu::before` y
 * el marcado añade además un `<span class="close">×</span>`, que es el
 * elemento realmente pulsable y accesible. Se veían las dos, la del
 * span desplazada a la derecha, dentro de una chapa circular gris que
 * tampoco era la que declara esta hoja: las reglas del tema
 * (background, border y border-radius:20px) ganaban por orden. Se
 * apaga el icono sobrante y se recupera la chapa cuadrada de 42 px que
 * usan los demás botones de la cabecera.
 */
.cb-search .cb-search__close::before {
	content: none;
}

.cb-search .cb-search__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: transparent;
	border: 1px solid var(--cbh-line, rgba(255, 255, 255, .09));
	border-radius: 6px;
	cursor: pointer;
	transition: border-color var(--cb-fast, 140ms) ease, color var(--cb-fast, 140ms) ease, background-color var(--cb-fast, 140ms) ease;
}

.cb-search .cb-search__close .close {
	display: block;
	line-height: 1;
}

.cb-search__close span {
	font-size: 1.5rem;
	line-height: 1;
	color: rgba(255, 255, 255, .7);
}

.cb-search .cb-search__close:hover {
	border-color: var(--cb-neon-pink, #ff005e);
	background: rgba(255, 0, 94, .1);
}

.cb-search__close:hover span { color: #fff; }

/* --- Campo ---------------------------------------------------------------- */

.cb-search__field .search-form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	border: 0;
	border-bottom: 2px solid rgba(255, 255, 255, .16);
	background: none;
	padding: 0;
	transition: border-color var(--cb-base, 260ms) ease;
}

.cb-search__field .search-form:focus-within {
	border-bottom-color: var(--cb-neon-cyan, #00d4ff);
}

.cb-search__field .search-field {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: auto;
	padding: .5rem 0 .9rem;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	font-family: var(--title-font, "Plus Jakarta Sans", sans-serif);
	/*
	 * Defecto observado: a 2,4 rem el texto de ayuda «Introduce tu
	 * búsqueda y aprieta enter» pedía 679 px y el campo útil son 600:
	 * se cortaba a media palabra («…aprieta ent»). Se baja un punto la
	 * escala y, por si acaso, lo que sobre se resuelve con puntos
	 * suspensivos en lugar de un tajo.
	 */
	font-size: clamp(1.35rem, 4.2vw, 2.05rem);
	font-weight: 700;
	letter-spacing: -.02em;
	text-overflow: ellipsis;
}

/* Al 26 % de blanco el texto de ayuda daba 2,46:1 sobre el velo del
   buscador, y es el único rótulo que tiene el panel: si no se lee, no
   hay pista de qué se espera ahí. Al 50 % son 5,03:1. */
.cb-search__field .search-field::placeholder {
	color: rgba(255, 255, 255, .5);
	font-weight: 600;
}

.cb-search__field .search-field:focus {
	outline: none;
	border: 0;
	box-shadow: none;
}

.cb-search__field .search-submit {
	flex: none;
	width: 48px;
	height: 48px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 6px;
	color: var(--cb-neon-cyan, #00d4ff);
	font-size: 1.25rem;
	cursor: pointer;
	transition: transform var(--cb-fast, 140ms) ease, color var(--cb-fast, 140ms) ease;
}

.cb-search__field .search-submit:hover {
	transform: translateX(3px);
	color: #fff;
}

/* --- Accesos a secciones -------------------------------------------------- */

.cb-search__label {
	margin: 0 0 .9rem;
	font-size: .82rem;
	letter-spacing: .04em;
	color: var(--cbh-ink-dim, rgba(255, 255, 255, .52));
}

.cb-search__terms {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cb-search__terms li { margin: 0; }

.cb-search__terms a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .95rem;
	border: 1px solid var(--cbh-line, rgba(255, 255, 255, .09));
	border-radius: 100px;
	background: rgba(255, 255, 255, .03);
	color: rgba(255, 255, 255, .82);
	font-size: .88rem;
	text-decoration: none;
	transition:
		border-color var(--cb-fast, 140ms) ease,
		background-color var(--cb-fast, 140ms) ease,
		transform var(--cb-fast, 140ms) var(--cb-ease-out, ease);
}

.cb-search__terms a:hover {
	border-color: var(--cb-neon-cyan, #00d4ff);
	background: rgba(0, 212, 255, .08);
	transform: translateY(-2px);
	color: #fff;
}

/* La cifra iba suelta detrás del nombre y se leía como un exponente.
   En una chapa propia se entiende que es un recuento. */
.cb-search__count {
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .72rem;
	line-height: 1;
	padding: .2rem .42rem;
	border-radius: 100px;
	background: rgba(255, 255, 255, .08);
	color: rgba(255, 255, 255, .66);
	font-variant-numeric: tabular-nums;
}

.cb-search__widgets {
	border-top: 1px solid var(--cbh-line, rgba(255, 255, 255, .09));
	padding-top: 1.75rem;
}

/* El velo genérico del tema sobra: el propio panel ya tapa la página. */
.cb-header-active .search-overlay { display: none !important; }

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {

	.cb-header {
		--cbh-bar-h: 62px;
		--cbh-bar-h-stuck: 56px;
	}

	.cb-bar__inner {
		gap: .75rem;
	}

	.cb-bar__start {
		gap: .6rem;
	}

	.cb-header .site-title a {
		font-size: 1.25rem;
	}
}

@media (max-width: 380px) {
	.cb-header .site-title a { font-size: 1.1rem; }
}

/* --------------------------------------------------------------------------
   Movimiento reducido e impresión
   -------------------------------------------------------------------------- */

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

	.cb-led { animation: none; }

	.cb-rail,
	.cb-bar__inner,
	.cb-nav__indicator,
	.cb-panel,
	.cb-panel__media img,
	.cb-header .site-title a {
		transition: none;
	}
}

@media print {
	.cb-header,
	.cb-header-sentinel { display: none !important; }
}

/* ==========================================================================
   Repaso de móvil
   --------------------------------------------------------------------------
   Recorrido a 360, 390, 414 y 768 px. Todo lo de esta sección va dentro de
   consultas `max-width`: el escritorio no se toca.
   ========================================================================== */

@media (max-width: 1023px) {

	/* --- Los dos únicos mandos de la barra ---------------------------------
	 * Defecto medido: `.cb-header .toggle` daba 42x42 px de 381 px hacia
	 * arriba y 38x38 por debajo. Son el buscador y el menú, o sea TODA la
	 * navegación que tiene el sitio en móvil, y ninguno llegaba a los
	 * 44x44 del criterio 2.5.5. A 360 px la barra tiene 300 px útiles: el
	 * wordmark ocupa 138 y dos botones de 44 con 8 de separación, 96. Caben
	 * de sobra.
	 * ---------------------------------------------------------------------- */
	.cb-header .toggle {
		width: 44px;
		height: 44px;
	}

	.cb-bar__end {
		gap: .5rem;
	}

	/* --- Buscador a pantalla completa --------------------------------------
	 * Defecto 1: el manejador de cierre que instala js/main.js está en
	 * `.close-menu span`, no en el div que lo envuelve. Medido a 390 px, la
	 * chapa se veía de 42x42 pero la zona REALMENTE pulsable era el aspa:
	 * 15x24 px. Se estira el span hasta ocupar la chapa entera.
	 *
	 * Defecto 2: el panel entraba con 20 px de aire lateral mientras el
	 * resto del sitio (cabecera, hero, tarjetas) va a 30. Al cerrar el
	 * buscador todo el contenido daba un salto lateral de 10 px.
	 * ---------------------------------------------------------------------- */
	.cb-search .cb-search__close {
		width: 44px;
		height: 44px;
		padding: 0;
	}

	/* La chapa mide 44 pero lleva 1 px de borde, así que su caja de
	   contenido son 42: el span se saca ese píxel por cada lado para que
	   la zona pulsable sea la chapa entera y no 42x42. */
	.cb-search .cb-search__close .close {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		margin: -1px;
	}

	.cb-search .cb-search__inner {
		padding-left: var(--cb-edge, 30px);
		padding-right: var(--cb-edge, 30px);
	}

	/* --- Velo del menú lateral ---------------------------------------------
	 * Defecto observado: `.body-fade` es del tema y pinta
	 * `var(--body-background)` —#1e1e2e— al 95 % de opacidad. O sea, un
	 * velo OPACO: al abrir el menú la pantalla entera se convertía en una
	 * plancha gris azulada plana, sin marca y sin profundidad, y como el
	 * cajón usa exactamente el mismo color no se distinguía dónde acababa
	 * uno y empezaba el otro. Se cambia por un velo oscuro translúcido con
	 * desenfoque: la página se sigue intuyendo detrás y el cajón se lee
	 * como una capa por encima.
	 * ---------------------------------------------------------------------- */
	.cb-header-active .body-fade.menu-overlay {
		background: rgba(4, 3, 10, .78);
		backdrop-filter: saturate(120%) blur(6px);
		-webkit-backdrop-filter: saturate(120%) blur(6px);
	}

	/* --- El cajón del menú -------------------------------------------------
	 * Defecto observado: el cajón no había pasado nunca por esta hoja. Salía
	 * con el fondo liso del tema, sin la línea de neón de la cabecera y sin
	 * ninguna jerarquía: once filas iguales de 41 px flotando en un plano
	 * gris. Se le pone el mismo degradado y la misma línea que a `.cb-bar`,
	 * para que sea reconociblemente la misma máquina.
	 * ---------------------------------------------------------------------- */
	.cb-header-active .toggle-sidebar.mobile-navigation {
		background: linear-gradient(180deg, #14112e 0%, #0b091a 62%, #0b091a 100%);
		border-right: 1px solid rgba(122, 92, 255, .3);
		box-shadow: var(--cb-shadow-3, 0 18px 48px rgba(0, 0, 0, .52));
	}

	/* Un haz de neón arriba, el mismo gesto que cierra la cabecera. */
	.cb-header-active .toggle-sidebar.mobile-navigation::before {
		content: "";
		position: sticky;
		top: 0;
		z-index: 2;
		display: block;
		height: 2px;
		margin: 0;
		background: linear-gradient(
			90deg,
			var(--cb-neon-pink, #ff005e),
			var(--cb-neon-violet, #7a5cff) 45%,
			var(--cb-neon-cyan, #00d4ff)
		);
	}

	.cb-header-active .toggle-sidebar.mobile-navigation .toggle-sidebar-header {
		border-bottom-color: var(--cbh-line, rgba(255, 255, 255, .09));
	}

	/* Botón «cerrar»: medido 77x30 px. Se sube a 44 de alto sin cambiar la
	   forma de píldora que ya tenía. */
	.cb-header-active .toggle-sidebar.mobile-navigation .close-menu span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: .5rem 1.1rem;
		border: 1px solid var(--cbh-line, rgba(255, 255, 255, .09));
		background: rgba(255, 255, 255, .05);
		color: rgba(255, 255, 255, .82);
		border-radius: 999px;
		transition:
			border-color var(--cb-fast, 140ms) ease,
			color var(--cb-fast, 140ms) ease,
			background-color var(--cb-fast, 140ms) ease;
	}

	.cb-header-active .toggle-sidebar.mobile-navigation .close-menu span:hover {
		border-color: var(--cb-neon-pink, #ff005e);
		background: rgba(255, 0, 94, .12);
		color: #fff;
	}

	/* Filas del menú: medidas 41 px de alto. Se llevan a 48 —cómodas de
	   acertar con el pulgar— y se marca la sección en la que estamos, que
	   antes no se distinguía de las demás. */
	.cb-header-active .primary-nav-sidebar > li {
		border-bottom: 1px solid var(--cbh-line, rgba(255, 255, 255, .09));
	}

	.cb-header-active .primary-nav-sidebar > li > a {
		min-height: 48px;
		padding: .8rem 0;
		font-size: 1rem;
		font-weight: 600;
		color: rgba(255, 255, 255, .88);
		transition: color var(--cb-fast, 140ms) ease;
	}

	.cb-header-active .primary-nav-sidebar > li > a:hover,
	.cb-header-active .primary-nav-sidebar > li > a:focus-visible {
		color: #fff;
	}

	.cb-header-active .primary-nav-sidebar > li.current-menu-item > a,
	.cb-header-active .primary-nav-sidebar > li.current-menu-parent > a,
	.cb-header-active .primary-nav-sidebar > li.current-menu-ancestor > a {
		color: var(--cb-neon-cyan, #00d4ff);
	}
}

/*
 * Por debajo de 600 px el cajón iba a 380 px de ancho fijo. Medido a
 * 390: dejaba 10 px de página a la vista —inútiles para cerrar tocando
 * fuera, pero suficientes para que el velo y el cajón, del mismo color,
 * parecieran una sola plancha mal cortada. A 360 ya ocupaba el ancho
 * entero. Se unifica: en teléfono, a pantalla completa.
 */
@media (max-width: 599px) {

	.cb-header-active .toggle-sidebar.mobile-navigation {
		max-width: none;
		width: 100%;
		border-right: 0;
	}
}

/*
 * Defecto medido: el wordmark es un enlace a la portada de 138x27 px en la
 * barra y de 139x35 en el cajón del menú. La barra mide 62 px de alto y no
 * hay nada a menos de 100 px a su derecha, así que la zona pulsable se
 * puede estirar hasta 45 sin robarle el toque a nadie.
 */
@media (max-width: 1023px) {

	.cb-header .cb-bar__start .site-title a,
	.cb-header-active .toggle-sidebar.mobile-navigation .site-title a {
		position: relative;
	}

	.cb-header .cb-bar__start .site-title a::after,
	.cb-header-active .toggle-sidebar.mobile-navigation .site-title a::after {
		content: "";
		position: absolute;
		top: -9px;
		right: -6px;
		bottom: -9px;
		left: -6px;
	}
}

/*
 * El aspa del buscador se veía como una chapa de 42x42, pero `js/main.js`
 * engancha el clic en `.close-menu span`, y ese span medía 15x24: la zona
 * que de verdad cierra el buscador era una tercera parte de lo que se ve.
 * El otro agente lo corrigió por debajo de 1.024 px; el defecto es el
 * mismo con ratón, así que se iguala en todos los anchos.
 */
.cb-search .cb-search__close {
	min-width: 44px;
	min-height: 44px;
	padding: 0;
}

.cb-search .cb-search__close .close {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}