@charset "UTF-8";
/* ==========================================================================
   CriticaBits — la columna de lectura y su índice
   --------------------------------------------------------------------------
   El índice es la única pieza de la barra lateral que depende de dónde está
   el lector, así que se lleva un trato aparte: panel anclado, medidor de
   avance segmentado, raíl con cursor deslizante y marcador de sección.

   Esta hoja se carga DESPUÉS de criticabits-aside.css, de modo que lo que
   aquí se redefine gana sin necesidad de subir la especificidad.

   ÍNDICE
     1. Geometría de la columna
     2. El panel del índice
     3. Cabecera: medidor de avance
     4. Raíl y cursor
     5. La lista
     6. Pie: marcador de sección
     7. Pantallas estrechas y movimiento reducido
   ========================================================================== */

/* ==========================================================================
   1. Geometría de la columna
   ========================================================================== */

/* La columna iba justa: los titulares de «Lo + Visto» partían en tres
   líneas y el índice partía casi todos los suyos en dos. Setenta y cinco
   píxeles más de ancho los devuelven a una y dos líneas respectivamente,
   y no tocan la medida de lectura del artículo —que está topada en 680 px
   y sobra sitio para ella—.

   El ancho lo calcula el tema en dos tramos distintos, así que se le suman
   los 75 px en cada uno en lugar de repetir sus fórmulas. */
@media (min-width: 1361px) {

	.cb-aside.aside-sidebar {
		width: calc(var(--sidebar-width) + 75px);
	}

	/* El hueco entre el contenido y la columna lateral sube a 4rem: con
	   el panel de lectura ajustado a la columna, 30 px dejaban las dos
	   cajas casi tocándose. */
	.has-sidebar .wrap-inner {
		gap: 4rem;
	}

	.has-sidebar main {
		flex-basis: calc(100% - (var(--sidebar-width) + 75px + 4rem));
	}
}

@media (min-width: 1200px) and (max-width: 1360px) {

	/* En este tramo el tema recalcula el ancho con otra variable, y deja
	   el contenido en flex-grow: 1, así que basta con la columna. */
	.cb-aside.aside-sidebar {
		width: calc(((var(--small-desktop-site-max-width) - (var(--wrap-inner-flex-gap) * 3)) / 4) + 75px);
	}
}

/* El índice abre la columna. */
.cb-aside .cb-slot-10 { order: 10; }

/* La columna se ancla arriba y se queda quieta mientras se lee: el índice
   está en su cabecera, así que permanece a la vista de principio a fin.
   Sólo se despega al final, cuando el <aside> —que mide lo que mide el
   artículo— se le acaba y baja con la página.

   Contrapartida asumida: siendo la columna más alta que la ventana, lo
   que lleva por debajo del pliegue (el boletín y «Lo + Visto») sólo se ve
   antes de que se ancle. La alternativa era que el índice se fuera de la
   pantalla, que es justo lo que no se quiere. */
@media (min-width: 1200px) {

	.cb-aside .aside-sticky-container {
		flex: 0 0 auto;
		position: sticky;
		top: 6.5rem;
		align-self: flex-start;
	}

	/* Quien acompaña a la lectura es la columna entera, no sólo este
	   panel. Aquí sólo se le deja el fondo opaco, para que los paneles
	   que pasan por detrás no se transparenten a través de él. */
	.cb-aside .cb-toc-panel {
		background: linear-gradient(165deg, #181d2ee0, #0c0f1a);
	}
}

/* ==========================================================================
   2. El panel del índice
   ========================================================================== */

.cb-toc {
	--cb-toc-p: 0%;
	--cb-toc-cy: 0px;
	--cb-toc-ch: 0px;
	display: block;
}

/* Un resplandor frío en la esquina superior, para que el panel del índice
   se distinga de los demás sin cambiarle la caja. */
.cb-aside .cb-toc-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(90% 55% at 8% 0%, rgba(0, 212, 255, .10), transparent 70%);
}

/* A página completa no hay widget que lo anuncie: lleva su propia caja. */
.cb-toc--inline {
	position: relative;
	margin: 3rem 0 3.5rem;
	padding: 1.5rem 1.6rem 1.35rem;
	border: 1px solid var(--cb-hairline);
	border-left: 3px solid var(--cb-neon-cyan);
	border-radius: 6px;
	background: linear-gradient(165deg, rgba(24, 29, 46, .9), rgba(12, 15, 26, .94));
}

.cb-toc .cb-toc__title {
	margin: 0 0 1rem;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--cb-neon-cyan);
}

/* ==========================================================================
   3. Cabecera: medidor de avance
   --------------------------------------------------------------------------
   Una barra continua no decía nada de un vistazo. Segmentada se lee como
   los indicadores de carga de una consola: se cuentan los tramos
   encendidos sin tener que leer la cifra.
   ========================================================================== */

.cb-toc .cb-toc__head {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1.15rem;
}

.cb-toc .cb-toc__meter {
	flex: 1 1 auto;
	position: relative;
	height: 9px;
	border-radius: 2px;
	overflow: hidden;
	/* Los tramos apagados. */
	background:
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, .11) 0 5px,
			transparent 5px 8px
		);
}

.cb-toc .cb-toc__meter-fill {
	display: block;
	width: var(--cb-toc-p);
	height: 100%;
	background: linear-gradient(90deg, var(--cb-neon-pink), var(--cb-neon-violet) 45%, var(--cb-neon-cyan));
	/* Los mismos tramos, recortados sobre el relleno. */
	-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
	mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
	filter: drop-shadow(0 0 6px rgba(0, 212, 255, .55));
	transition: width 140ms linear;
}

.cb-toc .cb-toc__pct {
	flex: 0 0 auto;
	min-width: 3.1em;
	text-align: right;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	color: var(--cb-neon-cyan);
	text-shadow: 0 0 14px rgba(0, 212, 255, .45);
}

/* El plegado sólo hace falta donde el índice queda lejos de la vista: en
   el escritorio va anclado y siempre está delante. */
.cb-toc .cb-toc__toggle {
	display: none;
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	margin: 0;
	padding: .35rem .6rem;
	border: 1px solid var(--cb-hairline);
	border-radius: 3px;
	background: none;
	cursor: pointer;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
	transition: color var(--cb-fast) var(--cb-ease), border-color var(--cb-fast) var(--cb-ease);
}

.cb-toc .cb-toc__toggle:hover {
	color: #fff;
	border-color: var(--cb-hairline-strong);
}

/* ==========================================================================
   4. Raíl y cursor
   ========================================================================== */

.cb-toc .cb-toc__body {
	position: relative;
	padding-left: 14px;
	/* Plegable sin medir alturas: una fila de rejilla que colapsa a 0fr. */
	display: grid;
	grid-template-rows: 1fr;
	overflow: hidden;
	transition: grid-template-rows var(--cb-base) var(--cb-ease-out), opacity var(--cb-base) ease;
}

.cb-toc.is-collapsed .cb-toc__body {
	grid-template-rows: 0fr;
	opacity: 0;
}

.cb-toc .cb-toc__rail {
	position: absolute;
	top: .3rem;
	bottom: .3rem;
	left: 5px;
	width: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .08);
	pointer-events: none;
}

/* Lo leído, en la escala del artículo entero. */
.cb-toc .cb-toc__rail-fill {
	display: block;
	position: relative;
	width: 100%;
	height: var(--cb-toc-p);
	border-radius: 2px;
	background: linear-gradient(180deg, var(--cb-neon-pink), var(--cb-neon-violet) 45%, var(--cb-neon-cyan));
	transition: height 140ms linear;
}

/* La cabeza del relleno, encendida: marca hasta dónde se ha leído aunque
   la sección en curso quede más arriba. */
.cb-toc .cb-toc__rail-fill::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: var(--cb-neon-cyan);
	box-shadow: 0 0 10px 1px rgba(0, 212, 255, .9);
}

/* El cursor: una cápsula que se desliza hasta la sección que se está
   leyendo en vez de encenderse y apagarse a saltos. Es el mismo gesto que
   el indicador del menú de la cabecera, para que el sitio hable un solo
   idioma. */
.cb-toc .cb-toc__cursor {
	position: absolute;
	left: 4px;
	top: var(--cb-toc-cy);
	width: 4px;
	height: var(--cb-toc-ch);
	border-radius: 4px;
	background: linear-gradient(180deg, var(--cb-neon-cyan), var(--cb-neon-violet));
	box-shadow: 0 0 16px 1px rgba(0, 212, 255, .65);
	opacity: 0;
	transform: scaleY(.4);
	transform-origin: center;
	pointer-events: none;
	transition:
		top .42s var(--cb-ease-out),
		height .42s var(--cb-ease-out),
		opacity .28s var(--cb-ease),
		transform .42s var(--cb-ease-out);
}

.cb-toc.has-active .cb-toc__cursor {
	opacity: 1;
	transform: scaleY(1);
}

/* ==========================================================================
   5. La lista
   ========================================================================== */

.cb-toc .cb-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	min-height: 0;
	max-width: none;
}

/* El tema pone un filete bajo cada <li> de widget —.widget ol
   li:not(.menu-item-has-children), con peso (0,2,2)— y el índice salía
   rayado de arriba abajo. Hacen falta tres clases para deshacerlo. */
.cb-toc .cb-toc__list .cb-toc__item {
	border: 0;
}

.cb-toc .cb-toc__item {
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

/* Rejilla de tres columnas: cifra, icono y texto. El emoji con el que
   empiezan casi todos los titulares del sitio va en columna propia para
   que los textos arranquen todos a la misma sangría. */
.cb-toc .cb-toc__item a {
	position: relative;
	display: grid;
	grid-template-columns: 26px 0fr minmax(0, 1fr);
	align-items: start;
	column-gap: .6rem;
	padding: .5rem .6rem .5rem .7rem;
	border-radius: 5px;
	text-decoration: none;
	color: rgba(255, 255, 255, .74);
	transition:
		color var(--cb-fast) var(--cb-ease),
		background-color var(--cb-fast) var(--cb-ease),
		transform var(--cb-fast) var(--cb-ease-out);
}

.cb-toc .cb-toc__item a:hover,
.cb-toc .cb-toc__item a:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, .045);
	transform: translateX(3px);
}

/* --- La cifra de sección, en ficha ---------------------------------------- */

.cb-toc .cb-toc__num {
	display: block;
	height: 20px;
	line-height: 18px;
	border: 1px solid var(--cb-hairline-strong);
	border-radius: 4px;
	text-align: center;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
	/* .42 daba 4,08:1 sobre el panel: por debajo del mínimo legible. */
	color: rgba(255, 255, 255, .56);
	transition:
		color var(--cb-fast) var(--cb-ease),
		border-color var(--cb-fast) var(--cb-ease),
		background-color var(--cb-fast) var(--cb-ease),
		box-shadow var(--cb-base) var(--cb-ease);
}

.cb-toc .cb-toc__item a:hover .cb-toc__num {
	border-color: var(--cb-neon-cyan);
	color: #fff;
}

/* --- Los subapartados cuelgan de su sección con una llave ------------------
   Un árbol, no una lista sangrada: la vertical baja desde la ficha de la
   sección y cada subapartado se engancha a ella con un codo. Así se ve de
   qué sección cuelga cada cosa sin tener que numerarlas.
   -------------------------------------------------------------------------- */

.cb-toc .cb-toc__item {
	/* La rama se dibuja sobre el centro de la ficha de la sección:
	   11,2 px de sangría del enlace + la mitad de los 26 px de la ficha. */
	--cb-toc-trunk: 24px;
	position: relative;
}

.cb-toc .cb-toc__item--h3 a {
	padding-top: .4rem;
	padding-bottom: .4rem;
	padding-left: 1.55rem;
	color: rgba(255, 255, 255, .58);
}

.cb-toc .cb-toc__num--sub {
	border: 0;
	background: none;
}

/* La vertical: arranca bajo la ficha de la sección… */
.cb-toc .cb-toc__item--h2:has(+ .cb-toc__item--h3)::before {
	content: "";
	position: absolute;
	left: var(--cb-toc-trunk);
	top: 30px;
	bottom: 0;
	width: 1px;
	background: rgba(255, 255, 255, .15);
}

/* …y sigue por cada subapartado. */
.cb-toc .cb-toc__item--h3::before {
	content: "";
	position: absolute;
	left: var(--cb-toc-trunk);
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(255, 255, 255, .15);
}

/* En el último de una serie se corta a la altura del codo, para que la
   rama cierre en vez de quedar colgando. */
.cb-toc .cb-toc__item--h3:last-child::before,
.cb-toc .cb-toc__item--h3:has(+ .cb-toc__item--h2)::before {
	bottom: auto;
	height: 16px;
}

/* El codo hacia el titular. */
.cb-toc .cb-toc__item--h3::after {
	content: "";
	position: absolute;
	left: var(--cb-toc-trunk);
	top: 16px;
	width: 11px;
	height: 1px;
	background: rgba(255, 255, 255, .15);
}

.cb-toc .cb-toc__ico {
	font-size: .95em;
	line-height: 1.45;
	filter: grayscale(.55);
	opacity: .68;
	transition: filter var(--cb-fast) var(--cb-ease), opacity var(--cb-fast) var(--cb-ease);
}

.cb-toc .cb-toc__item a:hover .cb-toc__ico,
.cb-toc .cb-toc__item.is-active .cb-toc__ico {
	filter: none;
	opacity: 1;
}

.cb-toc .cb-toc__text {
	/* A la tercera columna, siempre.
	   El icono sólo se imprime cuando el titular empieza por emoji, así
	   que en un titular sin él el enlace tiene dos hijos y el texto caía
	   por colocación automática en la columna del icono —de ancho 0fr—.
	   En el ZX Spectrum, «El Spectrum en España: religión de píxel» se
	   componía a un carácter por línea, en una tira de 655 px de alto. */
	grid-column: 3;
	min-width: 0;
	overflow-wrap: break-word;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.4;
}

.cb-toc .cb-toc__item--h3 .cb-toc__text {
	font-size: .86rem;
	font-weight: 500;
}

/* --- La sección que se está leyendo -------------------------------------- */

.cb-toc .cb-toc__item.is-active a {
	color: #fff;
	background: linear-gradient(90deg, rgba(0, 212, 255, .13), rgba(0, 212, 255, 0) 78%);
}

.cb-toc .cb-toc__item.is-active .cb-toc__text {
	font-weight: 700;
}

/* Sólo las secciones tienen ficha. En un subapartado la casilla está
   vacía, y encenderla dejaba un borrón de neón sin cifra dentro. */
.cb-toc .cb-toc__item.is-active .cb-toc__num:not(.cb-toc__num--sub) {
	border-color: transparent;
	background: linear-gradient(135deg, var(--cb-neon-cyan), var(--cb-neon-violet));
	color: #08101c;
	box-shadow: 0 0 14px -2px rgba(0, 212, 255, .8);
}

.cb-toc .cb-toc__item--h3.is-active::before,
.cb-toc .cb-toc__item--h3.is-active::after {
	background: var(--cb-neon-cyan);
	box-shadow: 0 0 8px rgba(0, 212, 255, .55);
}

/* El punto fijo que marcaba la sección en la versión anterior sobra: lo
   sustituye el cursor deslizante. */
.cb-toc .cb-toc__item.is-active a::after {
	content: none;
}

/* --- Entrada escalonada --------------------------------------------------- */

.cb-js .cb-toc__item {
	animation: cb-toc-in .5s var(--cb-ease-out) both;
}

.cb-js .cb-toc__item:nth-child(1)  { animation-delay: .02s; }
.cb-js .cb-toc__item:nth-child(2)  { animation-delay: .06s; }
.cb-js .cb-toc__item:nth-child(3)  { animation-delay: .10s; }
.cb-js .cb-toc__item:nth-child(4)  { animation-delay: .14s; }
.cb-js .cb-toc__item:nth-child(5)  { animation-delay: .18s; }
.cb-js .cb-toc__item:nth-child(6)  { animation-delay: .22s; }
.cb-js .cb-toc__item:nth-child(7)  { animation-delay: .26s; }
.cb-js .cb-toc__item:nth-child(8)  { animation-delay: .30s; }
.cb-js .cb-toc__item:nth-child(n+9) { animation-delay: .34s; }

@keyframes cb-toc-in {
	from { opacity: 0; transform: translateX(-8px); }
	to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   6. Pie: marcador de sección
   ========================================================================== */

.cb-toc .cb-toc__foot {
	display: flex;
	align-items: baseline;
	gap: .3rem;
	margin: 1.1rem 0 0;
	padding-top: .85rem;
	border-top: 1px dashed rgba(255, 255, 255, .1);
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-variant-numeric: tabular-nums;
}

.cb-toc .cb-toc__pos {
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1;
	color: #fff;
}

.cb-toc.has-active .cb-toc__pos {
	color: var(--cb-neon-cyan);
	text-shadow: 0 0 12px rgba(0, 212, 255, .4);
}

.cb-toc .cb-toc__sep,
.cb-toc .cb-toc__total {
	font-size: .9rem;
	font-weight: 700;
	color: rgba(255, 255, 255, .32);
}

.cb-toc .cb-toc__foot-label {
	margin-left: auto;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .34);
}

/* ==========================================================================
   7. Pantallas estrechas y movimiento reducido
   ========================================================================== */

/*
 * En pantalla estrecha no hay índice.
 *
 * Estuvo primero al final de la columna —donde no servía de nada, porque
 * se llega después de haber leído— y luego subido al principio del
 * artículo y plegado, donde tampoco: es un bloque más entre el titular y
 * el primer párrafo, y en un móvil el índice de un texto que se lee de un
 * tirón es peaje, no ayuda. Se retira.
 */
@media (max-width: 1199px) {

	.cb-toc-panel,
	.cb-toc--widget {
		display: none;
	}
}

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

	.cb-js .cb-toc__item {
		animation: none;
	}

	.cb-toc__cursor,
	.cb-toc__meter-fill,
	.cb-toc__rail-fill {
		transition: none;
	}
}