@charset "UTF-8";
/* ==========================================================================
   CriticaBits — páginas: equipo (86) y newsletter (116)
   --------------------------------------------------------------------------
   Hoja propia para no pisar las demás. Cada regla va colgada del
   identificador de su página (`.page-id-N`), de modo que nada de aquí
   puede escaparse a otra vista.

   Nota de cascada: `criticabits-single.css` se encola DESPUÉS de esta
   hoja, así que sus reglas ganan a igualdad de especificidad. Por eso
   casi todos los selectores de aquí arrancan en `.page-id-N` y siguen
   por `.cb-article .entry-content`: suman una clase más que las de
   `single.css` y pasan por delante sin recurrir a `!important`.
   ========================================================================== */

/* ==========================================================================
   0. Piezas compartidas por las dos páginas
   ========================================================================== */

/*
 * El filete de neón sobre cada H2 y su numeración los pone ahora la capa
 * común de páginas (`criticabits-paginas.css`, apartado 8). Lo que había
 * aquí hacía lo mismo con un `::before` absoluto, y al convivir con el
 * nuevo contador el número salía impreso encima del filete. Se quita: una
 * sola regla para las siete páginas, no una por página.
 */

/*
 * Las listas de estas dos páginas no son enumeraciones dentro de un
 * texto: son rejillas de fichas. La sangría de 1,35 rem y las viñetas
 * que `single.css` aplica a toda `ul` las descuadraban por la izquierda.
 * Se anulan sólo dentro de los contenedores propios.
 */
.page-id-86 .cb-article .entry-content .cb-eq-stats ul,
.page-id-86 .cb-article .entry-content .cb-eq-secciones ul,
.page-id-116 .cb-article .entry-content .cb-nl-si ul,
.page-id-116 .cb-article .entry-content .cb-nl-no ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.page-id-86 .cb-article .entry-content .cb-eq-stats li + li,
.page-id-86 .cb-article .entry-content .cb-eq-secciones li + li,
.page-id-116 .cb-article .entry-content .cb-nl-si li + li,
.page-id-116 .cb-article .entry-content .cb-nl-no li + li {
	margin-top: 0;
}

/* ==========================================================================
   1. Página 86 — Tira de cifras
   ========================================================================== */

/*
 * Ojo al marcado: `core/group` interpone un
 * `.wp-block-group__inner-container` entre el grupo y su contenido, así
 * que las listas de estas rejillas NO son hijas directas del bloque.
 * Con el selector de hijo directo la rejilla no llegaba a aplicarse y
 * las cuatro cifras salían apiladas en una sola columna de 779 px.
 */

/*
 * Defecto observado: la página afirmaba «no aceptamos pagos» y «equipo
 * de cuatro redactores» (eran tres) sin un solo dato comprobable a la
 * vista. Cuatro cifras que cualquiera puede contar en el propio sitio
 * hacen más por la credibilidad que tres párrafos de intenciones, y
 * además rompen el muro de texto justo después de la entradilla.
 */
.page-id-86 .cb-article .entry-content .cb-eq-stats ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 1px;
	background: var(--cb-hairline);
	border: 1px solid var(--cb-hairline);
	border-radius: var(--cb-radio-s, 8px);
	overflow: hidden;
}

.page-id-86 .cb-article .entry-content .cb-eq-stats li {
	margin: 0;
	padding: var(--cb-s4) var(--cb-s4) calc(var(--cb-s4) + .15rem);
	background: var(--cb-surface-strong);
	font-size: .8125rem;
	line-height: 1.45;
	letter-spacing: .02em;
	color: var(--cb-ink-3);
	text-transform: uppercase;
}

.page-id-86 .cb-article .entry-content .cb-eq-stats li strong {
	display: block;
	margin-bottom: .35rem;
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--cb-neon-cyan);
	text-transform: none;
}

/* El «0» de notas patrocinadas es el dato con más carga de los cuatro:
   se pinta en rosa para que sea el que se lee primero. */
.page-id-86 .cb-article .entry-content .cb-eq-stats li:last-child strong {
	color: var(--cb-neon-pink);
}

/* ==========================================================================
   2. Página 86 — Panel de método
   ========================================================================== */

/*
 * `is-style-cb-panel` trae 2 rem de relleno fijo, pensado para un aviso
 * corto dentro de un artículo. Con cinco normas de dos líneas cada una
 * el bloque quedaba apretado contra el borde y las normas se leían como
 * un solo párrafo troceado. Se abre el relleno y se separa cada norma
 * con un filete, que es lo que las convierte en una lista de reglas.
 */
.page-id-86 .cb-article .entry-content > .cb-eq-metodo {
	padding: clamp(1.25rem, 3vw, 2.25rem);
}

.page-id-86 .cb-article .entry-content .cb-eq-metodo li {
	padding-block: var(--cb-s3);
	padding-left: 2.1rem;
	line-height: 1.75;
	color: var(--cb-ink-2);
}

.page-id-86 .cb-article .entry-content .cb-eq-metodo li + li {
	margin-top: 0;
	border-top: 1px solid var(--cb-hairline);
}

.page-id-86 .cb-article .entry-content .cb-eq-metodo li::before {
	top: var(--cb-s3);
	color: var(--cb-neon-amber);
}

/* La primera frase de cada norma es la norma; el resto es el porqué.
   Se separan por color para poder leer sólo las cinco negritas. */
.page-id-86 .cb-article .entry-content .cb-eq-metodo li strong {
	color: #fff;
}

/* ==========================================================================
   3. Página 86 — Fichas del equipo
   ========================================================================== */

/*
 * Defecto observado y medido: las tres cartas de personaje llevaban
 * `alignleft` / `alignright`, pero la rejilla de sangrado del artículo
 * anula los flotantes. Resultado: tres figuras de 513 px de alto
 * apiladas en la columna de 680, con ~345 px de hueco muerto a su
 * derecha en cada una, y el texto de la carta —que lleva el nombre y el
 * rol impresos— reducido a 335 px. Se pasan a dos columnas reales a
 * `alignwide` (779 px en esta plantilla, que lleva barra lateral), con
 * la carta a un 40 % y la biografía al lado.
 */
/*
 * Se monta como rejilla, no como flex. Motivo medido: `css/gutenberg.css`
 * del tema copió de WordPress las reglas que AÑADEN margen a las columnas
 * apiladas, pero no las que las apilan (`flex-wrap: wrap` y
 * `flex-basis: 100%` por debajo de 782 px). Con dos columnas flexibles y
 * sin apilado, a 390 px el bloque medía 730 px de ancho: 340 px de
 * desplazamiento horizontal. Con `grid-template-columns` el cambio a una
 * sola columna es una línea y no depende de nada del tema.
 */
.page-id-86 .cb-article .entry-content > .cb-eq-ficha {
	display: grid;
	grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
	align-items: start;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	padding-top: var(--cb-s6);
	border-top: 1px solid var(--cb-hairline);
}

/* Zigzag: la segunda ficha invierte el orden para que la vista no caiga
   siempre por el mismo carril. Al mandar la carta a la segunda casilla
   hay que invertir también los anchos de las dos pistas; sin esto la
   biografía se quedaba con el 38 % (300 px de renglón, siete palabras
   por línea) y la carta se estiraba hasta 430 px. */
.page-id-86 .cb-article .entry-content > .cb-eq-ficha.is-reverse {
	grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
}

.page-id-86 .cb-article .entry-content > .cb-eq-ficha.is-reverse > .cb-eq-ficha__art {
	order: 2;
}

.page-id-86 .cb-article .entry-content .cb-eq-ficha__art .wp-block-image {
	margin: 0;
}

/*
 * La carta ya trae su propio marco ámbar dibujado. Añadirle un borde
 * sería un marco sobre otro marco: se le da sólo profundidad (sombra) y
 * un halo del color que identifica a cada firma.
 */
.page-id-86 .cb-article .entry-content .cb-eq-ficha__art img {
	width: 100%;
	max-height: none;
	border-radius: var(--cb-radio-s, 8px);
	box-shadow: var(--cb-shadow-3);
	transition: transform var(--cb-base) var(--cb-ease-out),
		box-shadow var(--cb-base) var(--cb-ease-out);
}

.page-id-86 .cb-article .entry-content .cb-eq-ficha:hover .cb-eq-ficha__art img {
	transform: translateY(-4px);
}

.page-id-86 .cb-article .entry-content .cb-eq-ficha--pink:hover .cb-eq-ficha__art img {
	box-shadow: var(--cb-shadow-3), 0 0 28px rgba(255, 0, 94, .35);
}

.page-id-86 .cb-article .entry-content .cb-eq-ficha--cyan:hover .cb-eq-ficha__art img {
	box-shadow: var(--cb-shadow-3), 0 0 28px rgba(0, 212, 255, .32);
}

.page-id-86 .cb-article .entry-content .cb-eq-ficha--violet:hover .cb-eq-ficha__art img {
	box-shadow: var(--cb-shadow-3), 0 0 28px rgba(122, 92, 255, .38);
}

/* El nombre abría con el ritmo vertical del artículo (var(--cb-s7) por
   encima), que dentro de una ficha dejaba la cabeza del texto muy por
   debajo del borde superior de la carta. Se pega arriba. */
.page-id-86 .cb-article .entry-content .cb-eq-ficha__bio > h3 {
	margin-top: 0;
	margin-bottom: .3rem;
}

/* Línea de rol: es el dato que antes iba en el propio H3 («– Redactor
   Jefe de Criticabits»), donde competía con el nombre. Bajado a su
   propia línea, pequeño y en el color de la firma. */
.page-id-86 .cb-article .entry-content .cb-eq-ficha .cb-eq-rol {
	margin: 0 0 var(--cb-s4);
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.page-id-86 .cb-article .entry-content .cb-eq-ficha--pink .cb-eq-rol {
	color: var(--cb-neon-rose);
}

.page-id-86 .cb-article .entry-content .cb-eq-ficha--cyan .cb-eq-rol {
	color: var(--cb-neon-cyan);
}

.page-id-86 .cb-article .entry-content .cb-eq-ficha--violet .cb-eq-rol {
	color: #a98fff; /* violeta de marca aclarado: #7a5cff sobre el panel
	                   oscuro se queda en 3,4:1 y no llega a AA. */
}

.page-id-86 .cb-article .entry-content .cb-eq-ficha__bio > p {
	margin-block: 0 var(--cb-s4);
	color: var(--cb-ink-2);
}

/*
 * La habilidad y la especialidad estaban impresas dentro del JPG de la
 * carta, a 30 px de alto sobre 1024 de ancho: al reducir la carta a
 * ~300 px quedaban en 9 px, ilegibles, y además invisibles para un
 * lector de pantalla o para el buscador. Se repiten como texto en una
 * placa tipo consola.
 */
.page-id-86 .cb-article .entry-content .cb-eq-ficha .cb-eq-stat {
	margin-bottom: var(--cb-s4);
	padding: var(--cb-s3) var(--cb-s4);
	border: 1px solid var(--cb-hairline);
	border-left: 2px solid var(--cb-neon-amber);
	border-radius: var(--cb-radio-xs, 4px);
	background: rgba(0, 0, 0, .28);
	font-size: .8125rem;
	line-height: 1.7;
	color: var(--cb-ink-3);
}

.page-id-86 .cb-article .entry-content .cb-eq-ficha .cb-eq-stat strong {
	display: inline-block;
	margin-right: .4rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cb-neon-amber);
}

/* Rejilla de dos columnas —etiqueta y valor— en lugar de texto corrido.
   Con las dos parejas seguidas en línea, en 460 px de ancho «ESPECIALIDAD»
   caía a mitad de renglón y la placa se leía como una sola frase larga. */
.page-id-86 .cb-article .entry-content .cb-eq-ficha .cb-eq-stat {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: .3rem .7rem;
}

.page-id-86 .cb-article .entry-content .cb-eq-ficha .cb-eq-stat strong {
	margin-right: 0;
}

/* Enlace al archivo del autor: es la prueba de todo lo anterior, así que
   se trata como acción, no como enlace de párrafo. */
.page-id-86 .cb-article .entry-content .cb-eq-ficha .cb-eq-link {
	margin-bottom: 0;
}

.page-id-86 .cb-article .entry-content .cb-eq-ficha .cb-eq-link a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .95rem;
	border: 1px solid var(--cb-hairline-strong);
	border-radius: var(--cb-radio-pastilla, 999px);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	/* `style.css` del tema subraya todo enlace de contenido. Dentro de una
	   píldora con borde el subrayado sobra y además se cruza con el borde
	   inferior. */
	text-decoration: none;
	transition: border-color var(--cb-fast) var(--cb-ease),
		background-color var(--cb-fast) var(--cb-ease);
}

.page-id-86 .cb-article .entry-content .cb-eq-ficha .cb-eq-link a::before {
	content: "→";
	color: var(--cb-neon-cyan);
}

.page-id-86 .cb-article .entry-content .cb-eq-ficha .cb-eq-link a:hover,
.page-id-86 .cb-article .entry-content .cb-eq-ficha .cb-eq-link a:focus-visible {
	border-color: var(--cb-neon-cyan);
	background: rgba(0, 212, 255, .1);
}

/* El subrayado animado que `single.css` pone a todo enlace de párrafo
   quedaba flotando bajo la píldora, desalineado con su borde. */
.page-id-86 .cb-article .entry-content .cb-eq-ficha .cb-eq-link a::after {
	display: none;
}

/* ==========================================================================
   4. Página 86 — Rejilla de secciones
   ========================================================================== */

/*
 * Defecto observado: «Lo que encontrarás» eran tres párrafos que
 * enumeraban las secciones en prosa y no enlazaban a ninguna. Desde la
 * página más visitada del sitio no se podía saltar a un solo archivo.
 * Ahora son ocho tarjetas enlazadas con su descripción.
 */
.page-id-86 .cb-article .entry-content .cb-eq-secciones ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: var(--cb-s3);
}

.page-id-86 .cb-article .entry-content .cb-eq-secciones li {
	margin: 0;
	padding: var(--cb-s4);
	border: 1px solid var(--cb-hairline);
	border-radius: var(--cb-radio-s, 8px);
	background: var(--cb-surface);
	transition: border-color var(--cb-fast) var(--cb-ease),
		transform var(--cb-fast) var(--cb-ease-out);
}

.page-id-86 .cb-article .entry-content .cb-eq-secciones li:hover {
	border-color: var(--cb-neon-pink);
	transform: translateY(-2px);
}

.page-id-86 .cb-article .entry-content .cb-eq-secciones li a {
	display: block;
	margin-bottom: .3rem;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	/* Toda la tarjeta es la zona de clic visualmente; el subrayado del
	   tema partía el nombre de la sección en dos y competía con el
	   filete inferior de la propia tarjeta. */
	text-decoration: none;
}

.page-id-86 .cb-article .entry-content .cb-eq-secciones li a::after {
	display: none;
}

.page-id-86 .cb-article .entry-content .cb-eq-secciones li:hover a {
	color: var(--cb-neon-rose);
}

.page-id-86 .cb-article .entry-content .cb-eq-secciones li span {
	display: block;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--cb-ink-3);
}

/* ==========================================================================
   5. Página 86 — Cierre
   ========================================================================== */

.page-id-86 .cb-article .entry-content > .cb-eq-cta {
	gap: var(--cb-s3);
	margin-top: var(--cb-s5);
}

/* ==========================================================================
   6. Página 116 — Caja de suscripción
   ========================================================================== */

/*
 * Defecto de bulto: era una página de conversión SIN formulario. El
 * texto decía literalmente «introduce tu correo en el formulario que se
 * encuentra a pié de página», es decir, mandaba al lector a hacer scroll
 * hasta el pie para hacer lo único que la página existe para conseguir.
 * Ahora el formulario está en el primer pantallazo, dentro de su propia
 * caja.
 */
.page-id-116 .cb-article .entry-content > .cb-nl-lede {
	font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem);
	line-height: 1.6;
	color: var(--cb-ink);
	text-wrap: pretty;
}

.page-id-116 .cb-article .entry-content > .cb-nl-box {
	position: relative;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border: 1px solid var(--cb-hairline-strong);
	border-radius: var(--cb-radio-m, 10px);
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(255, 0, 94, .16), transparent 55%),
		radial-gradient(120% 140% at 100% 100%, rgba(122, 92, 255, .18), transparent 55%),
		var(--cb-surface-strong);
	box-shadow: var(--cb-shadow-3);
	overflow: hidden;
}

/* Filete de neón en el canto superior: separa la caja del panel del
   artículo, que tiene un fondo muy parecido. */
.page-id-116 .cb-article .entry-content > .cb-nl-box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--cb-neon-pink), var(--cb-neon-violet), var(--cb-neon-cyan));
}

.page-id-116 .cb-article .entry-content .cb-nl-box__kicker {
	margin: 0 0 .4rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cb-neon-cyan);
}

.page-id-116 .cb-article .entry-content .cb-nl-box__title {
	margin: 0 0 var(--cb-s4);
	padding-top: 0;
}

/* Este H2 vive dentro de la caja, no en el flujo del artículo: no le
   corresponde la barra de sección de la regla común. */
.page-id-116 .cb-article .entry-content .cb-nl-box__title::before {
	content: none;
}

.page-id-116 .cb-article .entry-content .cb-nl-box__legal {
	margin: var(--cb-s3) 0 0;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--cb-ink-3);
}

/* --- El formulario de Mailchimp ---------------------------------------
   Llega como `.mc4wp-form-fields > p > input`: dos párrafos apilados,
   con el botón debajo del campo y ambos al ancho por defecto del
   navegador. En una caja de 880 px eso deja el campo diminuto y el
   botón perdido. Se ponen en línea. */
.page-id-116 .cb-article .entry-content .cb-nl-box .mc4wp-form-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cb-s3);
	align-items: stretch;
}

.page-id-116 .cb-article .entry-content .cb-nl-box .mc4wp-form-fields > p {
	margin: 0;
	flex: 1 1 16rem;
}

.page-id-116 .cb-article .entry-content .cb-nl-box .mc4wp-form-fields > p:last-child {
	flex: 0 0 auto;
}

/* `width` y `height` los pone ahora la disposición común de `.cb-form`
   (criticabits-enhance.css). Dejarlos aquí en 100 % hacía que el campo se
   comiera la fila entera y el botón cayera debajo. */
.page-id-116 .cb-article .entry-content .cb-nl-box input[type="email"] {
	min-height: 3.25rem;
	padding: .75rem 1rem;
	border: 1px solid var(--cb-hairline-strong);
	border-radius: var(--cb-radio-s, 8px);
	background: rgba(0, 0, 0, .38);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	transition: border-color var(--cb-fast) var(--cb-ease),
		box-shadow var(--cb-fast) var(--cb-ease);
}

/* El gris del marcador de posición del navegador se queda en 2,9:1
   sobre este fondo. Se sube a un blanco al 58 %, que da 6,4:1. */
.page-id-116 .cb-article .entry-content .cb-nl-box input[type="email"]::placeholder {
	color: rgba(255, 255, 255, .58);
	opacity: 1;
}

.page-id-116 .cb-article .entry-content .cb-nl-box input[type="email"]:focus {
	outline: none;
	border-color: var(--cb-neon-cyan);
	box-shadow: 0 0 0 3px rgba(0, 212, 255, .28);
}

/*
 * Medido: el botón salía con `width: 56px`, que son exactamente sus dos
 * rellenos laterales y cero de contenido; el rótulo «Suscribir Ahora!»
 * quedaba cortado en «Sus…». La causa es el `width: 100%` que el tema
 * pone a los `input[type=submit]`: dentro de una columna flexible que se
 * dimensiona por contenido, un porcentaje se resuelve contra un ancho
 * que todavía no existe y colapsa a cero.
 */
.page-id-116 .cb-article .entry-content .cb-nl-box input[type="submit"] {
	width: auto;
	white-space: nowrap;
	/* Ficha del sistema: este botón medía 52 px y el de la barra lateral 44,
	   con radios de 6 y 10, en la misma pantalla y con la misma clase. */
	min-height: var(--cb-btn-alto, 2.75rem);
	padding: var(--cb-btn-pad-y, .6rem) var(--cb-btn-pad-x-l, 1.6rem);
	border: 0;
	border-radius: var(--cb-btn-radio, 10px);
	background: var(--cb-btn-primario-fondo);
	color: #fff;
	font-family: inherit;
	font-size: var(--cb-btn-fs, .9375rem);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 0 18px rgba(255, 0, 94, .3);
	transition: box-shadow var(--cb-base) var(--cb-ease-out),
		transform var(--cb-fast) var(--cb-ease);
}

.page-id-116 .cb-article .entry-content .cb-nl-box input[type="submit"]:hover,
.page-id-116 .cb-article .entry-content .cb-nl-box input[type="submit"]:focus-visible {
	box-shadow: 0 0 26px rgba(122, 92, 255, .55);
	transform: translateY(-1px);
}

/* ==========================================================================
   7. Página 116 — Qué llega y qué no
   ========================================================================== */

/*
 * La página vieja resolvía esto con tres H3 («¿Cómo suscribirte?»,
 * «Política de privacidad», «¿Cómo darse de baja?») y un párrafo debajo
 * de cada uno: tres preguntas administrativas y ni una sola razón para
 * suscribirse. Se sustituyen por dos listas enfrentadas —lo que se
 * recibe y lo que no—, que es donde está el argumento.
 */
.page-id-116 .cb-article .entry-content .cb-nl-si ul,
.page-id-116 .cb-article .entry-content .cb-nl-no ul {
	display: grid;
	/*
	 * 12rem y no 15: las tres tarjetas ya no viven en un bloque `alignwide`,
	 * sino en la misma columna que el texto. Con 15rem de mínimo sólo cabían
	 * dos y la tercera se quedaba sola en una fila; con 12 caben las tres, que
	 * es como está pensada la lista —lo que llega y lo que no llega—.
	 */
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--cb-s3);
}

.page-id-116 .cb-article .entry-content .cb-nl-si li,
.page-id-116 .cb-article .entry-content .cb-nl-no li {
	position: relative;
	margin: 0;
	padding: var(--cb-s4) var(--cb-s4) var(--cb-s4) 2.9rem;
	border: 1px solid var(--cb-hairline);
	border-radius: var(--cb-radio-s, 8px);
	background: var(--cb-surface);
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--cb-ink-2);
}

.page-id-116 .cb-article .entry-content .cb-nl-si li strong,
.page-id-116 .cb-article .entry-content .cb-nl-no li strong {
	color: #fff;
}

/* Marcas dibujadas con caracteres tipográficos, no con emoji: el emoji
   depende de la fuente del sistema y en Windows sale en color, rompiendo
   la paleta. */
.page-id-116 .cb-article .entry-content .cb-nl-si li::before,
.page-id-116 .cb-article .entry-content .cb-nl-no li::before {
	position: absolute;
	left: var(--cb-s4);
	top: calc(var(--cb-s4) + .1rem);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.5;
}

.page-id-116 .cb-article .entry-content .cb-nl-si li::before {
	content: "✓";
	color: var(--cb-neon-cyan);
}

.page-id-116 .cb-article .entry-content .cb-nl-no li::before {
	content: "✕";
	color: var(--cb-neon-pink);
}

.page-id-116 .cb-article .entry-content > .cb-nl-cierre {
	margin-top: var(--cb-s6);
	padding-top: var(--cb-s4);
	border-top: 1px solid var(--cb-hairline);
	color: var(--cb-ink-3);
}

/* ==========================================================================
   8. Estrecho
   ========================================================================== */

@media (max-width: 781px) {

	/* Una sola columna. El zigzag se deshace: en vertical el orden
	   correcto es siempre carta primero, también en la ficha central. */
	.page-id-86 .cb-article .entry-content > .cb-eq-ficha,
	.page-id-86 .cb-article .entry-content > .cb-eq-ficha.is-reverse {
		grid-template-columns: minmax(0, 1fr);
	}

	.page-id-86 .cb-article .entry-content > .cb-eq-ficha.is-reverse > .cb-eq-ficha__art {
		order: 0;
	}

	/* La carta a ancho completo en móvil se come una pantalla entera
	   (1024×1536 escalado a 358 px da 537 px de alto). Se topa para que
	   quepa con el principio de la biografía. */
	.page-id-86 .cb-article .entry-content .cb-eq-ficha__art img {
		max-width: 20rem;
		margin-inline: auto;
	}

	.page-id-86 .cb-article .entry-content .cb-eq-stats li {
		padding: var(--cb-s3) var(--cb-s4);
	}
}

/* ==========================================================================
   9. Botón secundario del cierre
   --------------------------------------------------------------------------
   Lo que había aquí —forma de contorno para `is-style-outline`, porque el CSS
   del núcleo no se encola— lo hace ahora `criticabits-ui.css` para todo el
   sitio. Se retira: la copia local dejaba este botón con el filete al 16 % de
   blanco y el de cualquier otra página al 28 %, o sea dos botones de contorno
   distintos según en qué página estuvieras.
   ========================================================================== */

/* ==========================================================================
   10. Sangrado en pantallas estrechas
   ==========================================================================

   Defecto medido a 390 px: por debajo de 1024 px `criticabits-single.css`
   convierte todo `alignwide` en sangrado completo con márgenes negativos
   —lo correcto para una fotografía— y eso sacaba de la pantalla el borde
   de todas las cajas de estas dos páginas. La tira de cifras, el panel de
   método y las tarjetas de sección aparecían con el filete cortado por
   ambos lados y el texto pegado al cristal, sin un solo píxel de margen.
   Estas cajas son texto, no imágenes: se quedan dentro de la columna.
*/

@media (max-width: 1023px) {

	.page-id-86 .cb-article .entry-content.entry-content > .cb-eq-stats,
	.page-id-86 .cb-article .entry-content.entry-content > .cb-eq-metodo,
	.page-id-86 .cb-article .entry-content.entry-content > .cb-eq-ficha,
	.page-id-86 .cb-article .entry-content.entry-content > .cb-eq-secciones,
	.page-id-116 .cb-article .entry-content.entry-content > .cb-nl-box,
	.page-id-116 .cb-article .entry-content.entry-content > .cb-nl-si,
	.page-id-116 .cb-article .entry-content.entry-content > .cb-nl-no {
		margin-inline: 0;
		width: auto;
	}
}

/* --------------------------------------------------------------------------
   Tinta de los botones del cierre
   --------------------------------------------------------------------------
   Medido en el botón principal: texto `rgb(26,18,6)` sobre el degradado
   rosa→violeta, o sea 4,8:1 en el extremo rosa y 4,2:1 en el violeta,
   cuando el estilo «Neón» declara blanco (que da 4,9:1 y 6,3:1). El
   culpable es `criticabits-single.css`, que pinta de #1a1206 CUALQUIER
   enlace hijo directo de un `.wp-block-button`; la regla se escribió para
   los botones de Amazon, que van sobre ámbar y ahí la tinta oscura es la
   correcta, pero alcanza también a los botones normales.

   Aquí se corrige sólo para esta página. El arreglo de fondo va anotado
   en el informe: esa regla debería acotarse a `.boton-amazon`.
   -------------------------------------------------------------------------- */

.page-id-86 .cb-article .entry-content .cb-eq-cta .wp-block-button.wp-block-button > a[href],
.page-id-86 .cb-article .entry-content .cb-eq-cta .wp-block-button.wp-block-button > a[href]:hover,
.page-id-86 .cb-article .entry-content .cb-eq-cta .wp-block-button.wp-block-button > a[href]:focus-visible {
	color: #fff;
}