@charset "UTF-8";
/* ==========================================================================
   CriticaBits — bloques del núcleo
   --------------------------------------------------------------------------
   Por qué existe esta hoja.

   El sitio tiene sistema para lo que se construyó a propósito —botones,
   campos, tablas, paneles, terminal, rúbrica— y no lo tenía para lo que se
   usa todos los días. Censados los 42 artículos y las páginas: 123 listas,
   50 citas, 25 tablas, 21 incrustaciones. Las citas salían de una regla de
   los estilos globales —`background: #0e101a66; padding: 2rem`— que las
   dejaba como un rectángulo gris sin marca ninguna; las listas, con el punto
   por defecto del navegador; y bloques como el código, el desplegable, la
   galería o el audio no tenían NI UNA regla propia en todo el tema: se veían
   tal cual los pinta WordPress, que es justo lo que hace que un artículo
   parezca cosido con trozos de temas distintos.

   Aquí se les da a todos el mismo tratamiento, y el tratamiento no es una
   invención nueva: es el que ya usaban el panel y la terminal del sitio.

     · Panel translúcido con filete de un píxel y radio de la ficha.
     · Un filo de neón —rosa a violeta— en el borde por el que «entra» el
       bloque, que es lo que dice de un vistazo que eso es de Crítica Bits.
     · Un corchete de esquina de 14 px arriba a la derecha, prestado del
       lenguaje de los paneles de instrumentos.
     · Los rótulos y todo lo que no es prosa, en monoespaciada y versalitas.

   Repetir el motivo es la mitad del trabajo: lo que hace que dos bloques
   distintos se lean como del mismo sitio no es que se parezcan, es que
   compartan una marca.

   NOTA SOBRE `:is(.entry-content, .editor-styles-wrapper)`

   El editor de bloques no envuelve el contenido en `.entry-content`: lo mete
   en `.editor-styles-wrapper`. Con el selector escrito sólo para el sitio
   publicado, quien escribe elegía «Frase destacada» o «Terminal» y en el
   editor no cambiaba nada: había que publicar para ver si había acertado.

   `:is()` resuelve los dos casos con una sola regla y —esto es lo que lo hace
   seguro— NO altera la cuenta de especificidad: `:is()` vale lo que valga su
   argumento más específico, y los dos son una clase. O sea, exactamente lo
   mismo que valía `.entry-content` a solas. Ni un empate cambia de bando.

   ÍNDICE
     1. Fichas y motivos comunes
     2. Citas
     3. Listas
     4. Separadores
     5. Código, teclas y texto marcado
     6. Desplegable
     7. Galería, medios y archivo
     8. Texto con medio, columnas y notas al pie
     9. Listas de definición
    10. Pantalla estrecha, impresión y movimiento reducido
   ========================================================================== */

/* ==========================================================================
   1. Fichas y motivos comunes
   ========================================================================== */

:root {
	--cb-bl-panel: linear-gradient(160deg, rgba(34, 41, 57, .58), rgba(18, 22, 32, .74));
	--cb-bl-filo: linear-gradient(180deg, var(--cb-neon-pink, #ff005e), var(--cb-neon-violet, #7a5cff));
	--cb-bl-filo-h: linear-gradient(90deg, var(--cb-neon-pink, #ff005e), var(--cb-neon-violet, #7a5cff));
	--cb-bl-corchete: rgba(255, 255, 255, .22);
	--cb-bl-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Fira Code", Consolas, "Liberation Mono", monospace;
}

/*
 * El corchete de esquina.
 *
 * Se declara una vez y se hereda por composición: cualquier bloque que quiera
 * la marca añade la clase de utilidad y ya la tiene, sin repetir seis
 * declaraciones en cada componente.
 */
:is(.entry-content, .editor-styles-wrapper) .cb-bl-corchete {
	position: relative;
}

:is(.entry-content, .editor-styles-wrapper) .cb-bl-corchete::after {
	content: "";
	position: absolute;
	top: 10px;
	right: 10px;
	width: 14px;
	height: 14px;
	border-top: 1px solid var(--cb-bl-corchete);
	border-right: 1px solid var(--cb-bl-corchete);
	border-radius: 0 var(--cb-radio-xs, 4px) 0 0;
	pointer-events: none;
}

/* ==========================================================================
   2. Citas
   --------------------------------------------------------------------------
   La cuenta de especificidad de estos selectores no es adorno. Los estilos
   globales que WordPress imprime a partir del Personalizador traen

     blockquote.wp-block-quote.is-style-large.is-layout-flow
     .wp-block-quote-is-layout-flow { background:#0e101a66; padding:2rem }

   que son cuatro clases y un elemento. Para pasar por delante sin recurrir a
   `!important` hay que sumar más, y por eso `.entry-content` va repetido: la
   alternativa era declarar la propiedad como intocable y perder la
   posibilidad de que una página concreta pida otra cosa.
   ========================================================================== */

:is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper) blockquote.wp-block-quote,
:is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper) blockquote.fondito {
	position: relative;
	isolation: isolate;
	padding: var(--cb-s5, 2rem) var(--cb-s5, 2rem) var(--cb-s5, 2rem) calc(var(--cb-s5, 2rem) + .5rem);
	background-image:
		linear-gradient(135deg, rgba(122, 92, 255, .12), rgba(255, 0, 94, .05) 42%, rgba(0, 0, 0, 0) 68%),
		var(--cb-bl-panel);
	background-color: transparent;
	border: 1px solid var(--cb-hairline, rgba(255, 255, 255, .09));
	border-left: 0;
	border-radius: 0 var(--cb-radio-l, 14px) var(--cb-radio-l, 14px) 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
	color: var(--cb-ink, rgba(255, 255, 255, .9));
}

/*
 * El filo de neón por el que entra la cita.
 *
 * El `:not` de la terminal no es un detalle: ese estilo ya usa sus dos
 * pseudoelementos —`::before` dibuja la barra de ventana con los tres puntos
 * y `::after` el barrido— y pisárselos le quitaba la barra y le dejaba en su
 * sitio un corchete suelto. Los estilos cerrados se respetan enteros.
 */
:is(.entry-content, .editor-styles-wrapper) blockquote.wp-block-quote:not(.is-style-cb-terminal)::before,
:is(.entry-content, .editor-styles-wrapper) blockquote.fondito::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background-image: var(--cb-bl-filo);
	border-radius: 3px 0 0 3px;
	opacity: .95;
}

/* El corchete de esquina, con el mismo dibujo que el de la utilidad. */
:is(.entry-content, .editor-styles-wrapper) blockquote.wp-block-quote:not(.is-style-cb-terminal)::after,
:is(.entry-content, .editor-styles-wrapper) blockquote.fondito::after {
	content: "";
	position: absolute;
	top: 10px;
	right: 10px;
	width: 14px;
	height: 14px;
	border-top: 1px solid var(--cb-bl-corchete);
	border-right: 1px solid var(--cb-bl-corchete);
	border-radius: 0 var(--cb-radio-xs, 4px) 0 0;
	pointer-events: none;
}

/*
 * La terminal es un componente cerrado —marco cian, barra de ventana y
 * barrido— y no debe recibir nada de lo de arriba: se le quitan el filo, el
 * corchete y el panel para que no se vean dos marcos superpuestos.
 */
:is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper) blockquote.wp-block-quote.is-style-cb-terminal {
	background-image: none;
	background-color: #06090f;
	border: 1px solid rgba(0, 255, 255, .3);
	border-left: 3px solid var(--cb-neon-aqua, #0ff);
	border-radius: var(--cb-radio-s, 8px);
	padding: 2.9rem 1.75rem 1.6rem;
}

/*
 * La firma, siempre por la derecha.
 *
 * `criticabits-single.css` ancla a la derecha el filete corto que la separa,
 * pero el texto de la firma seguía saliendo a la izquierda en la cita normal
 * y a la derecha en la grande: dos citas seguidas con la firma en sitios
 * distintos. Se fija aquí para las dos.
 */
:is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper) blockquote.wp-block-quote:not(.is-style-cb-terminal) cite {
	text-align: right;
}

/* --- El texto de la cita -------------------------------------------------- */

:is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper) blockquote.wp-block-quote p {
	position: relative;
	z-index: 1;
	font-family: var(--body-font);
	font-style: normal;
	text-wrap: pretty;
}

/*
 * `is-style-large` sube un escalón de cuerpo, no cambia de familia.
 *
 * Es el estilo que llevan 88 de las citas del sitio, así que tenía que
 * seguir leyéndose como una cita de fuente y no convertirse de golpe en un
 * destacado tipográfico. Quien quiera eso tiene `cb-destacado`.
 */
:is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper) blockquote.wp-block-quote.is-style-large p {
	font-size: clamp(1.1875rem, 1.03rem + .6vw, 1.4375rem);
	line-height: 1.45;
	letter-spacing: -.005em;
}

/* --- Destacado: la frase que se saca del texto ---------------------------- */

/*
 * Sin caja y sin filo. Un destacado no es una fuente que se cita: es una
 * frase del propio artículo puesta en grande para que el lector que baja
 * deprisa se pare. Ponerle marco lo convertiría otra vez en una cita.
 */
:is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper) blockquote.wp-block-quote.is-style-cb-destacado {
	padding: var(--cb-s4, 1.25rem) 0;
	background-image: none;
	background-color: transparent;
	border: 0;
	border-block: 1px solid var(--cb-hairline, rgba(255, 255, 255, .09));
	border-radius: 0;
	box-shadow: none;
	text-align: center;
}

/*
 * La cuenta tiene que empatar a la del filo y el corchete, que van con
 * `blockquote.wp-block-quote:not(…)`: con una clase menos, el destacado
 * salía con caja quitada pero con el filo rosa y el corchete todavía puestos.
 */
:is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper) blockquote.wp-block-quote.is-style-cb-destacado::before,
:is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper) blockquote.wp-block-quote.is-style-cb-destacado::after {
	content: none;
}

:is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper) blockquote.is-style-cb-destacado p {
	font-family: var(--heading-font, var(--body-font));
	font-size: clamp(1.375rem, 1.1rem + 1.3vw, 1.9rem);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -.02em;
	/* El degradado acaba en un rosa claro, no en el rosa de la marca: con
	   el rosa saturado, las últimas palabras de la frase perdían contraste
	   justo donde la frase remata. */
	background-image: linear-gradient(100deg, #fff 25%, #ffb3cd 92%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

:is(.entry-content, .editor-styles-wrapper) blockquote.is-style-cb-destacado cite {
	text-align: center;
}

:is(.entry-content, .editor-styles-wrapper) blockquote.is-style-cb-destacado cite::before {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

/* --- Pullquote: mismo lenguaje que el destacado --------------------------- */

:is(.entry-content, .editor-styles-wrapper) .wp-block-pullquote {
	padding: var(--cb-s5, 2rem) 0;
	background: none;
	border: 0;
	border-block: 1px solid var(--cb-hairline, rgba(255, 255, 255, .09));
	color: var(--cb-ink, rgba(255, 255, 255, .9));
	text-align: center;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-pullquote blockquote {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-pullquote blockquote::before,
:is(.entry-content, .editor-styles-wrapper) .wp-block-pullquote blockquote::after {
	content: none;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-pullquote p {
	font-family: var(--heading-font, var(--body-font));
	font-size: clamp(1.375rem, 1.1rem + 1.3vw, 1.9rem);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -.02em;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-pullquote cite {
	display: block;
	margin-top: var(--cb-s4, 1.25rem);
	font-family: var(--cb-bl-mono);
	font-size: .8125rem;
	font-style: normal;
	letter-spacing: .06em;
	text-transform: none;
	color: var(--cb-neon-cyan, #00d4ff);
}

/* ==========================================================================
   3. Listas
   --------------------------------------------------------------------------
   Cambia la marca, no la estructura. Se sigue usando `::marker`, que es lo
   que mantiene el sangrado colgante correcto cuando una entrada ocupa tres
   renglones; sustituirlo por un `::before` absoluto obliga a recalcular a
   mano el sangrado de cada nivel y se rompe con el zoom del navegador.
   ========================================================================== */

/*
 * El `:not(.cb-list--iconic)` protege a las 17 listas que ya empiezan cada
 * punto con un emoji. `single.php` les pone esa clase al pintar y
 * `criticabits-single.css` les quita la marca; sin la exclusión, aquí se les
 * devolvería un cuadradito rosa delante del emoji: dos marcas para lo mismo.
 */
/*
 * Los dos espacios duros del final no son un descuido.
 *
 * Con `list-style-position: outside`, la caja de la marca se pega al borde
 * del texto: sin ellos salía «▪Primer punto», la marca tocando la P. El
 * espacio normal se colapsaría; el duro no.
 */
:is(.entry-content, .editor-styles-wrapper) ul.wp-block-list:not(.cb-list--iconic) > li::marker {
	content: "▪\00a0\00a0";
	color: var(--cb-neon-pink, #ff005e);
	font-size: 1.05em;
}

/* Segundo nivel: hueco, para que se note que se ha bajado un escalón. */
:is(.entry-content, .editor-styles-wrapper) ul.wp-block-list:not(.cb-list--iconic) ul > li::marker {
	content: "▫\00a0\00a0";
	color: var(--cb-neon-violet, #7a5cff);
}

:is(.entry-content, .editor-styles-wrapper) ul.wp-block-list:not(.cb-list--iconic) ul ul > li::marker {
	content: "·\00a0\00a0";
	color: var(--cb-ink-3, rgba(255, 255, 255, .62));
}

/*
 * Las páginas tenían su propia marca: un rombo dibujado con un `::before`
 * absoluto en el color de acento de cada página. Era buena idea y era la
 * segunda marca de la misma lista —el cuadrado de arriba y el rombo, uno al
 * lado del otro—, así que se conserva la idea y se tira el dibujo: el color
 * de la página pasa al `::marker`, que es ahora el único sitio donde se
 * pinta la marca de una lista en todo el sitio.
 */
body.cb-pagina-hero .cb-article :is(.entry-content, .editor-styles-wrapper) > ul:not([class*="is-style"]) > li::before {
	content: none;
}

body.cb-pagina-hero .cb-article :is(.entry-content, .editor-styles-wrapper) > ul:not([class*="is-style"]) > li {
	padding-left: 0;
}

body.cb-pagina-hero .cb-article :is(.entry-content, .editor-styles-wrapper) > ul:not([class*="is-style"]) > li::marker {
	color: var(--cb-pagina-acento, var(--cb-neon-pink, #ff005e));
}

/*
 * Las listas numeradas llevan el número en monoespaciada y en cian: es el
 * mismo tratamiento que reciben los números de la ficha del análisis y del
 * índice de lectura, así que el lector ya sabe que un número en cian es una
 * referencia y no parte de la frase.
 */
:is(.entry-content, .editor-styles-wrapper) ol.wp-block-list > li::marker {
	font-family: var(--cb-bl-mono);
	font-size: .85em;
	font-weight: 700;
	color: var(--cb-neon-cyan, #00d4ff);
}

/* ==========================================================================
   4. Separadores
   --------------------------------------------------------------------------
   El separador por defecto NO se toca. Ya lo resolvieron `enhance.css` —que
   le da el degradado de la marca— y `single.css`, que le pone los márgenes
   laterales a cero después de medir que con `margin: auto` dentro de una
   rejilla el `<hr>` se encogía a cero píxeles y no se veía. Volver a
   estrecharlo desde aquí sería deshacer una corrección con motivo.

   Lo que faltaba era una alternativa corta para cuando el corte no es de
   sección entera, y que los dos estilos que ya existían no parecieran
   sobrantes.
   ========================================================================== */

/*
 * El filete corto, como estilo elegible.
 *
 * No se estrecha el elemento: se estrecha el DIBUJO.
 *
 * Se intentó primero con `width: 7rem; margin-inline: auto` y no hubo manera.
 * `single.css` cierra el ancho de todo lo que cuelga del artículo con
 * `body:not(.home):not(.blog) .cb-article .entry-content > :not(.alignwide)…
 * { width: auto; max-width: none }`, que son ocho clases: para pasarle por
 * delante habría que escribir un selector todavía más largo, y el siguiente
 * que lo leyera no sabría por qué. Además, en una rejilla un `<hr>` con
 * márgenes automáticos se encoge a cero —medido: 0 px— porque su contenido
 * es cero.
 *
 * Así que el `<hr>` sigue ocupando la columna entera, como todos los demás, y
 * lo que mide 7 rem es el fondo. Mismo resultado y ni una guerra de cuentas.
 */
:is(.entry-content, .editor-styles-wrapper) hr.wp-block-separator.is-style-cb-filete {
	height: 2px;
	border: 0;
	background-image: var(--cb-bl-filo-h);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 7rem 100%;
	opacity: .9;
}

/*
 * Los tres puntos del núcleo salían a 6 px y al 30 % de blanco: tres motas
 * grises que en una pantalla normal no se ven. Pasan a rombos con el violeta
 * de la marca y con aire entre ellos.
 */
.cb-article :is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper) > hr.wp-block-separator.is-style-dots,
:is(.entry-content, .editor-styles-wrapper) hr.wp-block-separator.is-style-dots {
	height: auto;
	background: none;
	border: 0;
	text-align: center;
	line-height: 1;
}

:is(.entry-content, .editor-styles-wrapper) hr.wp-block-separator.is-style-dots::before {
	content: "◆ ◆ ◆";
	display: block;
	font-family: var(--cb-bl-mono);
	font-size: .8rem;
	letter-spacing: 1.1em;
	/* El sangrado compensa el espaciado que la última letra deja a su
	   derecha; sin él, los tres rombos quedan descentrados a la izquierda. */
	text-indent: 1.1em;
	color: var(--cb-neon-violet, #7a5cff);
	opacity: .8;
}

/* La línea de barrido: tres filetes finos, como una señal de vídeo. */
:is(.entry-content, .editor-styles-wrapper) hr.wp-block-separator.is-style-cb-scanline {
	height: 7px;
	border: 0;
	background-image: repeating-linear-gradient(
		to bottom,
		var(--cb-hairline-strong, rgba(255, 255, 255, .16)) 0 1px,
		rgba(0, 0, 0, 0) 1px 3px
	);
	border-radius: 0;
	opacity: .6;
}

/* ==========================================================================
   5. Código, teclas y texto marcado
   --------------------------------------------------------------------------
   Ni `wp-block-code` ni `wp-block-preformatted` tenían una sola regla en
   todo el tema. Un fragmento de código salía en la monoespaciada del
   navegador, a cuerpo 13, sin fondo y desbordando la columna sin barra de
   desplazamiento: en el móvil se llevaba la página entera hacia la derecha.
   ========================================================================== */

:is(.entry-content, .editor-styles-wrapper) .wp-block-code,
:is(.entry-content, .editor-styles-wrapper) .wp-block-preformatted,
:is(.entry-content, .editor-styles-wrapper) pre:not([class]) {
	position: relative;
	padding: 1.5rem 1.25rem 1.25rem;
	background-image: var(--cb-bl-panel);
	border: 1px solid var(--cb-hairline, rgba(255, 255, 255, .09));
	border-left: 3px solid var(--cb-neon-cyan, #00d4ff);
	border-radius: var(--cb-radio-s, 8px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
	/* El código se desplaza dentro de su caja; nunca arrastra la página. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-code code,
:is(.entry-content, .editor-styles-wrapper) .wp-block-preformatted,
:is(.entry-content, .editor-styles-wrapper) pre:not([class]) {
	font-family: var(--cb-bl-mono);
	font-size: .875rem;
	line-height: 1.7;
	color: #d6faff;
	tab-size: 2;
	white-space: pre;
}

/* El rótulo de la caja, en la misma versalita que el resto de rótulos. */
:is(.entry-content, .editor-styles-wrapper) .wp-block-code::before {
	content: "CÓDIGO";
	position: absolute;
	top: .45rem;
	left: 1.25rem;
	font-family: var(--cb-bl-mono);
	font-size: .58rem;
	letter-spacing: .22em;
	color: rgba(0, 212, 255, .55);
}

/*
 * El `<code>` de dentro de un `<pre>` no lleva caja propia.
 *
 * La caja es del bloque. Con las dos, se veía un recuadro más claro dentro
 * del panel, con su relleno y su filete: dos marcos para el mismo fragmento.
 */
:is(.entry-content, .editor-styles-wrapper) .wp-block-code code,
:is(.entry-content, .editor-styles-wrapper) pre > code {
	display: block;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

/* --- Código dentro de una frase ------------------------------------------ */

:is(.entry-content, .editor-styles-wrapper) :not(pre) > code {
	padding: .12em .42em;
	background-color: rgba(255, 255, 255, .07);
	border: 1px solid var(--cb-hairline, rgba(255, 255, 255, .09));
	border-radius: var(--cb-radio-xs, 4px);
	font-family: var(--cb-bl-mono);
	font-size: .875em;
	color: #cfefff;
	overflow-wrap: break-word;
}

/* --- Teclas -------------------------------------------------------------- */

:is(.entry-content, .editor-styles-wrapper) kbd {
	display: inline-block;
	min-width: 1.6em;
	padding: .1em .45em;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
	border: 1px solid var(--cb-hairline-strong, rgba(255, 255, 255, .16));
	border-bottom-width: 2px;
	border-radius: var(--cb-radio-xs, 4px);
	font-family: var(--cb-bl-mono);
	font-size: .82em;
	line-height: 1.5;
	text-align: center;
	color: #fff;
}

/* --- Texto marcado, abreviaturas, tachado, voladitas --------------------- */

:is(.entry-content, .editor-styles-wrapper) mark {
	padding: .05em .28em;
	background-color: rgba(255, 177, 79, .22);
	border-radius: var(--cb-radio-xs, 4px);
	color: #ffdcae;
}

:is(.entry-content, .editor-styles-wrapper) abbr[title] {
	text-decoration: underline dotted var(--cb-neon-cyan, #00d4ff);
	text-underline-offset: .22em;
	cursor: help;
}

:is(.entry-content, .editor-styles-wrapper) del,
:is(.entry-content, .editor-styles-wrapper) s {
	text-decoration-color: var(--cb-neon-pink, #ff005e);
	text-decoration-thickness: 2px;
	opacity: .72;
}

:is(.entry-content, .editor-styles-wrapper) ins {
	text-decoration: none;
	background-color: rgba(46, 230, 168, .16);
	border-radius: var(--cb-radio-xs, 4px);
	padding: .05em .25em;
}

/* Que una nota al pie no descoloque el renglón. */
:is(.entry-content, .editor-styles-wrapper) sub,
:is(.entry-content, .editor-styles-wrapper) sup {
	font-size: .7em;
	line-height: 0;
}

/* ==========================================================================
   6. Desplegable
   --------------------------------------------------------------------------
   `details` traía el triángulo del navegador y ningún estilo. Se convierte
   en un panel con barra de título, que es el sitio natural para las fichas
   largas —requisitos, tabla de compatibilidades, notas de versión— sin
   partir la lectura del artículo.
   ========================================================================== */

:is(.entry-content, .editor-styles-wrapper) .wp-block-details,
:is(.entry-content, .editor-styles-wrapper) details {
	padding: 0;
	background-image: var(--cb-bl-panel);
	border: 1px solid var(--cb-hairline, rgba(255, 255, 255, .09));
	border-radius: var(--cb-radio-m, 10px);
	overflow: hidden;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-details summary,
:is(.entry-content, .editor-styles-wrapper) details > summary {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .95rem 1.2rem;
	background-color: rgba(255, 255, 255, .04);
	font-family: var(--cb-bl-mono);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cb-ink, rgba(255, 255, 255, .9));
	cursor: pointer;
	list-style: none;
	transition: background-color var(--cb-fast, 140ms) var(--cb-ease, ease);
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-details summary::-webkit-details-marker,
:is(.entry-content, .editor-styles-wrapper) details > summary::-webkit-details-marker {
	display: none;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-details summary::marker,
:is(.entry-content, .editor-styles-wrapper) details > summary::marker {
	content: "";
}

/* El triángulo, dibujado con borde para que gire sin cargar una fuente. */
:is(.entry-content, .editor-styles-wrapper) .wp-block-details summary::before,
:is(.entry-content, .editor-styles-wrapper) details > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-block: .32rem solid transparent;
	border-left: .45rem solid var(--cb-neon-cyan, #00d4ff);
	transition: transform var(--cb-base, 260ms) var(--cb-ease, ease);
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-details[open] summary::before,
:is(.entry-content, .editor-styles-wrapper) details[open] > summary::before {
	transform: rotate(90deg);
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-details summary:hover,
:is(.entry-content, .editor-styles-wrapper) details > summary:hover {
	background-color: rgba(0, 212, 255, .08);
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-details summary:focus-visible,
:is(.entry-content, .editor-styles-wrapper) details > summary:focus-visible {
	outline: 2px solid var(--cb-foco, var(--cb-neon-cyan, #00d4ff));
	outline-offset: -2px;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-details > :not(summary),
:is(.entry-content, .editor-styles-wrapper) details > :not(summary) {
	margin: 0;
	padding: 1.1rem 1.2rem;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-details > :not(summary) + :not(summary),
:is(.entry-content, .editor-styles-wrapper) details > :not(summary) + :not(summary) {
	padding-top: 0;
}

/* ==========================================================================
   7. Galería, medios y archivo
   ========================================================================== */

:is(.entry-content, .editor-styles-wrapper) .wp-block-gallery.has-nested-images figure.wp-block-image {
	border-radius: var(--cb-radio-s, 8px);
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--cb-hairline, rgba(255, 255, 255, .09));
	transition: transform var(--cb-base, 260ms) var(--cb-ease-out, ease),
		box-shadow var(--cb-base, 260ms) var(--cb-ease-out, ease);
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-gallery.has-nested-images figure.wp-block-image:hover {
	transform: translateY(-3px);
	box-shadow: 0 0 0 1px var(--cb-hairline-strong, rgba(255, 255, 255, .16)), var(--cb-shadow-2);
}

/*
 * El pie que el núcleo pone dentro de la imagen con un degradado negro.
 * Se le da la misma monoespaciada que a los demás pies del sitio para que no
 * cante al lado de un pie de figura normal.
 */
:is(.entry-content, .editor-styles-wrapper) .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	font-family: var(--cb-bl-mono);
	font-size: .72rem;
	line-height: 1.45;
	letter-spacing: .01em;
}

/* --- Audio, vídeo y archivo ---------------------------------------------- */

:is(.entry-content, .editor-styles-wrapper) .wp-block-audio,
:is(.entry-content, .editor-styles-wrapper) .wp-block-file {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1rem 1.2rem;
	background-image: var(--cb-bl-panel);
	border: 1px solid var(--cb-hairline, rgba(255, 255, 255, .09));
	border-left: 3px solid var(--cb-neon-violet, #7a5cff);
	border-radius: var(--cb-radio-s, 8px);
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-audio audio {
	flex: 1 1 16rem;
	width: 100%;
	min-width: 0;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-audio figcaption,
:is(.entry-content, .editor-styles-wrapper) .wp-block-video figcaption {
	flex: 1 1 100%;
	margin: 0;
	font-family: var(--cb-bl-mono);
	font-size: .74rem;
	color: var(--cb-ink-3, rgba(255, 255, 255, .62));
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-file__button {
	margin-left: 0;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-video video {
	width: 100%;
	border-radius: var(--cb-radio-s, 8px);
}

/* ==========================================================================
   8. Texto con medio, columnas y notas al pie
   ========================================================================== */

:is(.entry-content, .editor-styles-wrapper) .wp-block-media-text {
	gap: clamp(1rem, .5rem + 2vw, 2.25rem);
	border-radius: var(--cb-radio-m, 10px);
	overflow: hidden;
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-media-text .wp-block-media-text__content {
	padding-block: var(--cb-s4, 1.25rem);
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-columns {
	gap: clamp(1.25rem, .8rem + 1.8vw, 2.5rem);
}

/*
 * Las notas al pie llegaban con el punto y el número por defecto. Aquí el
 * número va en cian y monoespaciada —igual que el de las listas numeradas—
 * y el conjunto se separa del artículo con el filete de siempre.
 */
:is(.entry-content, .editor-styles-wrapper) .wp-block-footnotes {
	margin-top: var(--cb-s7, 4rem);
	padding-top: var(--cb-s4, 1.25rem);
	border-top: 1px solid var(--cb-hairline, rgba(255, 255, 255, .09));
	font-size: .875rem;
	color: var(--cb-ink-2, rgba(255, 255, 255, .72));
}

:is(.entry-content, .editor-styles-wrapper) .wp-block-footnotes li::marker {
	font-family: var(--cb-bl-mono);
	color: var(--cb-neon-cyan, #00d4ff);
}

:is(.entry-content, .editor-styles-wrapper) a[data-fn].fn {
	color: var(--cb-neon-cyan, #00d4ff);
	text-decoration: none;
}

/* ==========================================================================
   9. Listas de definición
   --------------------------------------------------------------------------
   Las usan las fichas de personajes y de modelos. Sin regla propia, el
   término y la definición salían con el mismo cuerpo y el mismo color, con
   la definición sangrada 40 px: dos líneas indistinguibles.
   ========================================================================== */

:is(.entry-content, .editor-styles-wrapper) dl:not([class]) {
	display: grid;
	grid-template-columns: minmax(6rem, auto) 1fr;
	gap: .5rem 1.25rem;
	margin-block: var(--cb-s4, 1.25rem);
}

:is(.entry-content, .editor-styles-wrapper) dl:not([class]) dt {
	font-family: var(--cb-bl-mono);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cb-ink-3, rgba(255, 255, 255, .62));
	padding-top: .22em;
}

:is(.entry-content, .editor-styles-wrapper) dl:not([class]) dd {
	margin: 0;
	color: var(--cb-ink, rgba(255, 255, 255, .9));
}

/* ==========================================================================
   10. Pantalla estrecha, impresión y movimiento reducido
   ========================================================================== */

@media (max-width: 600px) {

	/*
	 * La cita pierde el relleno lateral grande. Medido a 390 px: con los
	 * 2 rem de antes más el filo, quedaban 266 px de texto útil; una cita a
	 * 23 px de cuerpo caía en diecisiete caracteres por línea.
	 */
	:is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper) blockquote.wp-block-quote,
	:is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper) blockquote.fondito {
		padding: var(--cb-s5, 2rem) var(--cb-s4, 1.25rem) var(--cb-s5, 2rem) calc(var(--cb-s4, 1.25rem) + .4rem);
	}

	/* Y el corchete se retira: en 330 px de ancho estorba a la primera línea. */
	:is(.entry-content, .editor-styles-wrapper) blockquote.wp-block-quote::after,
	:is(.entry-content, .editor-styles-wrapper) blockquote.fondito::after {
		content: none;
	}

	:is(.entry-content, .editor-styles-wrapper) dl:not([class]) {
		grid-template-columns: 1fr;
		gap: .2rem;
	}

	:is(.entry-content, .editor-styles-wrapper) dl:not([class]) dd + dt {
		margin-top: .8rem;
	}
}

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

	:is(.entry-content, .editor-styles-wrapper) .wp-block-gallery.has-nested-images figure.wp-block-image,
	:is(.entry-content, .editor-styles-wrapper) .wp-block-details summary::before,
	:is(.entry-content, .editor-styles-wrapper) details > summary::before {
		transition: none;
	}

	:is(.entry-content, .editor-styles-wrapper) .wp-block-gallery.has-nested-images figure.wp-block-image:hover {
		transform: none;
	}
}

@media print {

	:is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper):is(.entry-content, .editor-styles-wrapper) blockquote.wp-block-quote,
	:is(.entry-content, .editor-styles-wrapper) .wp-block-code,
	:is(.entry-content, .editor-styles-wrapper) .wp-block-details {
		background: none;
		box-shadow: none;
		border-color: #999;
	}

	:is(.entry-content, .editor-styles-wrapper) blockquote.wp-block-quote::after {
		content: none;
	}

	/* Un desplegable cerrado en papel es contenido perdido. */
	:is(.entry-content, .editor-styles-wrapper) details > :not(summary) {
		display: block !important;
	}
}