@charset "UTF-8";
/* ==========================================================================
   CriticaBits — cabecera de las páginas estáticas
   --------------------------------------------------------------------------
   Aquí NO se dibuja ninguna cabecera. Las páginas usan la misma que los
   artículos —`.single-hero.cover`, con su imagen recortada por `object-fit`,
   su velo de dos capas y su fundido al cuerpo—, que es exactamente lo que se
   pedía: el mismo tipo de hero, no uno parecido.

   Lo que hay en este fichero es sólo lo que una página añade sobre esa
   cabecera y una entrada no tiene:

     · el rótulo de consola con su filete de acento,
     · el titular con la última palabra en el acento,
     · la entradilla,
     · la ficha de tres datos que cambia en cada página.

   La geometría —alto, sangría, medida de 52 rem, velo, fundido— la sigue
   poniendo criticabits-single.css, así que cualquier ajuste que se haga allí
   para los artículos llega solo a las páginas.

   Antes esto era una cabecera propia de 250 líneas, con su fondo, su velo y
   su cinta de carga. Se parecía, pero no era: el alto no coincidía, el fondo
   iba como `background-image` en vez de imagen recortada y el filo inferior
   cortaba en seco contra el cuerpo.
   ========================================================================== */


/* ==========================================================================
   1. La columna
   ========================================================================== */

body.cb-pagina-hero .cb-hero__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/*
 * Orden explícito. El tema reordena el titular dentro de la cabecera «cover»
 * —ahí lo coloca después de los metadatos— y esa regla llega hasta aquí: el
 * HTML sale en el orden correcto y en pantalla el titular aparecía debajo de
 * la ficha de datos.
 */
body.cb-pagina-hero .cb-hero__rotulo { order: 1; }
body.cb-pagina-hero .cb-hero__titulo { order: 2; }
body.cb-pagina-hero .cb-hero__entradilla { order: 3; }
body.cb-pagina-hero .cb-hero__datos { order: 4; }

/* El extracto que algunas páginas repiten dentro de la cabecera: es el mismo
   primer párrafo que se lee dos líneas más abajo. */
body.cb-pagina-hero .single-hero .entry-content.excerpt {
	display: none;
}


/* ==========================================================================
   2. El velo, un punto más cargado
   --------------------------------------------------------------------------
   Mismo mecanismo que en los artículos —el `::after` de `.cover-wrapper`, con
   sus dos capas: una vertical desde abajo y otra lateral—, sólo que más
   opaco. El motivo es que una página lleva encima bastante más texto que un
   artículo: además del titular, una entradilla de dos líneas y tres fichas
   de datos. Con el velo del artículo, sobre una foto movida como la del
   equipo o la trama de circuitos, la entradilla se peleaba con el fondo.
   ========================================================================== */

body.cb-pagina-hero .single-hero.cover .cover-wrapper::after {
	background:
		linear-gradient(to top,
			rgba(6, 5, 14, 1) 0%,
			rgba(6, 5, 14, .97) 28%,
			rgba(6, 5, 14, .88) 54%,
			rgba(6, 5, 14, .6) 80%,
			rgba(6, 5, 14, .34) 100%),
		linear-gradient(to right,
			rgba(6, 5, 14, .88) 0%,
			rgba(6, 5, 14, .6) 46%,
			rgba(6, 5, 14, .12) 100%);
}


/* ==========================================================================
   3. Rótulo de consola
   ========================================================================== */

body.cb-pagina-hero .cb-hero__rotulo {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0 0 .9rem;
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cb-pagina-acento, #7a5cff);
	text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}

/* El filete corto del acento delante del rótulo. */
body.cb-pagina-hero .cb-hero__guion {
	display: block;
	width: 2.2rem;
	height: 3px;
	border-radius: var(--cb-radio-xs, 4px);
	background: linear-gradient(90deg, var(--cb-pagina-acento, #7a5cff), var(--cb-pagina-acento-2, #00d4ff));
}


/* ==========================================================================
   4. Titular
   ========================================================================== */

/*
 * El tamaño y la posición los pone la hoja del artículo. Aquí sólo se
 * devuelve la tipografía: el Personalizador llegó a poner «Major Mono
 * Display» a los titulares de dos páginas, y esa fuente dibuja la A como un
 * triángulo y la H se lee como una N.
 */
body.cb-pagina-hero .single-hero .entry-title {
	font-family: var(--display-font, var(--body-font, inherit)) !important;
	text-transform: none !important;
}

/*
 * La última palabra, en el acento, con degradado recortado sobre el texto. Si
 * el navegador no sabe hacerlo se queda en el color plano, que es lo que
 * declara la primera línea.
 */
body.cb-pagina-hero .cb-hero__acento {
	color: var(--cb-pagina-acento, #7a5cff);
	background: linear-gradient(100deg, var(--cb-pagina-acento, #7a5cff), var(--cb-pagina-acento-2, #00d4ff));
	-webkit-background-clip: text;
	background-clip: text;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {

	body.cb-pagina-hero .cb-hero__acento {
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}


/* ==========================================================================
   5. Entradilla
   ========================================================================== */

body.cb-pagina-hero .cb-hero__entradilla {
	margin: 1rem 0 0;
	max-width: 46ch;
	font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, .84);
	text-shadow: 0 1px 14px rgba(0, 0, 0, .75);
	text-wrap: pretty;
}


/* ==========================================================================
   6. Ficha de datos
   --------------------------------------------------------------------------
   Es lo que distingue una página de otra: tres personas en el equipo, un
   correo por semana, cero borradores enviados a revisar. Va en el primer
   pantallazo porque responde a lo que trae al lector a esa página.
   ========================================================================== */

body.cb-pagina-hero .cb-hero__datos {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 1.6rem 0 0;
	padding: 0;
	/* La ficha se sale de la medida del titular a propósito: con 52 rem, tres
	   datos de etiqueta larga se partían en dos filas y la tercera quedaba
	   sola. Aquí no hay medida de lectura que respetar, son tres rótulos. */
	width: 100%;
	max-width: min(68rem, 100%);
}

body.cb-pagina-hero .cb-hero__dato {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0;
	padding: .7rem .95rem;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--cb-radio-m, 10px);
	/* Translúcido y desenfocado: la imagen del fondo se intuye detrás de las
	   fichas en lugar de quedar tapada por tres cajas opacas. */
	background: rgba(10, 9, 20, .42);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

body.cb-pagina-hero .cb-hero__icono {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: var(--cb-radio-s, 8px);
	background: color-mix(in srgb, var(--cb-pagina-acento, #7a5cff) 22%, transparent);
	color: var(--cb-pagina-acento, #7a5cff);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {

	body.cb-pagina-hero .cb-hero__icono {
		background: rgba(122, 92, 255, .22);
	}
}

body.cb-pagina-hero .cb-hero__svg {
	width: 1.15rem;
	height: 1.15rem;
}

body.cb-pagina-hero .cb-hero__texto {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}

body.cb-pagina-hero .cb-hero__texto strong {
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

body.cb-pagina-hero .cb-hero__texto span {
	font-size: .78rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, .66);
}


/* ==========================================================================
   7. Pantallas estrechas e impresión
   ========================================================================== */

@media (max-width: 780px) {

	body.cb-pagina-hero .cb-hero__datos {
		gap: .5rem;
		margin-top: 1.2rem;
	}

	body.cb-pagina-hero .cb-hero__dato {
		flex: 1 1 100%;
	}
}

@media print {

	body.cb-pagina-hero .cb-hero__datos,
	body.cb-pagina-hero .cb-hero__rotulo {
		display: none;
	}

	body.cb-pagina-hero .cb-hero__acento {
		color: #000;
		-webkit-text-fill-color: #000;
	}
}


/* ==========================================================================
   8. El cuerpo de la página
   --------------------------------------------------------------------------
   Todo lo que sigue viste el contenido que las siete páginas YA tienen
   —párrafos, encabezados, listas, grupos, columnas y tablas de Gutenberg—,
   sin obligar a reescribir su marcado. Cambiar el aspecto de una página se
   hace aquí, no entrada por entrada.

   Va colgado de `body.cb-pagina-hero`, que sólo existe en páginas estáticas:
   nada de esto puede escaparse a un artículo.
   ========================================================================== */

body.cb-pagina-hero .cb-article .entry-content {
	/* Contador para la numeración de los apartados. */
	counter-reset: cb-apartado;
}

/* --- La entradilla del cuerpo ---------------------------------------------
   El primer párrafo entra más grande y más claro: hace de puente entre la
   cabecera y el texto, y da un escalón tipográfico donde antes todo empezaba
   igual de plano. */

body.cb-pagina-hero .cb-article .entry-content > p:first-of-type {
	font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
	line-height: 1.62;
	color: rgba(255, 255, 255, .9);
	text-wrap: pretty;
}


/* --- Apartados ------------------------------------------------------------
   Cada `h2` lleva su número. No es adorno: estas páginas se leen a saltos
   —quien viene a «qué no aceptamos» no lee lo anterior— y numerar da una
   referencia para volver y para citar. */

body.cb-pagina-hero .cb-article .entry-content > h2:not([class*="cb-legal"]) {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: .85rem;
	margin-block: clamp(3rem, 6vw, 4.5rem) var(--cb-s4, 1.25rem);
	padding-top: 1.6rem;
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
}

/* El filete del acento, encima del titular. */
body.cb-pagina-hero .cb-article .entry-content > h2:not([class*="cb-legal"])::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.6rem;
	height: 3px;
	border-radius: var(--cb-radio-xs, 4px);
	background: linear-gradient(90deg, var(--cb-pagina-acento, #7a5cff), var(--cb-pagina-acento-2, #00d4ff));
}

body.cb-pagina-hero .cb-article .entry-content > h2:not([class*="cb-legal"])::before {
	counter-increment: cb-apartado;
	content: counter(cb-apartado, decimal-leading-zero);
	flex: 0 0 auto;
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--cb-pagina-acento, #7a5cff);
	opacity: .85;
	/* Alineado con la primera línea del titular, no con su caja. */
	transform: translateY(-.15em);
}

body.cb-pagina-hero .cb-article .entry-content > h3 {
	margin-block: clamp(2rem, 3.5vw, 2.75rem) .6rem;
	font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3rem);
	letter-spacing: -.01em;
}


/* --- Listas ---------------------------------------------------------------
   Marcador propio en lugar del punto del navegador, y sangría que no deja el
   texto colgando bajo el marcador. */

body.cb-pagina-hero .cb-article .entry-content > ul:not([class*="is-style"]) {
	list-style: none;
	margin-inline: 0;
	padding-left: 0;
}

body.cb-pagina-hero .cb-article .entry-content > ul:not([class*="is-style"]) > li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: .55rem;
}

body.cb-pagina-hero .cb-article .entry-content > ul:not([class*="is-style"]) > li::before {
	content: "";
	position: absolute;
	left: .1rem;
	top: .62em;
	width: .45rem;
	height: .45rem;
	border-radius: var(--cb-radio-xs, 4px);
	background: var(--cb-pagina-acento, #7a5cff);
	transform: rotate(45deg);
}


/* --- Columnas como tarjetas ----------------------------------------------
   Las páginas usan `wp:columns` para enfrentar bloques de texto. Sueltos, en
   una columna oscura, no se leían como piezas separadas. */

body.cb-pagina-hero .cb-article .entry-content .wp-block-columns {
	gap: 1rem;
}

body.cb-pagina-hero .cb-article .entry-content .wp-block-columns > .wp-block-column {
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--cb-hairline, rgba(255, 255, 255, .09));
	border-radius: var(--cb-radio-l, 14px);
	background: rgba(255, 255, 255, .028);
	transition:
		border-color var(--cb-base, 260ms) var(--cb-ease, ease),
		background-color var(--cb-base, 260ms) var(--cb-ease, ease),
		transform var(--cb-base, 260ms) var(--cb-ease-out, ease);
}

body.cb-pagina-hero .cb-article .entry-content .wp-block-columns > .wp-block-column:hover {
	border-color: color-mix(in srgb, var(--cb-pagina-acento, #7a5cff) 45%, transparent);
	background: rgba(255, 255, 255, .045);
	transform: translateY(-2px);
}

/* Dentro de la tarjeta, el primer y el último elemento no arrastran su
   margen: si no, la caja queda descuadrada por arriba y por abajo. */
body.cb-pagina-hero .cb-article .entry-content .wp-block-column > *:first-child { margin-block-start: 0; }
body.cb-pagina-hero .cb-article .entry-content .wp-block-column > *:last-child { margin-block-end: 0; }

body.cb-pagina-hero .cb-article .entry-content .wp-block-column > h3 {
	margin-block-start: 0;
	font-size: 1.05rem;
}


/* --- Tablas ---------------------------------------------------------------
   La de la política de privacidad tenía las celdas al aire. */

body.cb-pagina-hero .cb-article .entry-content .wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	font-size: .92rem;
}

body.cb-pagina-hero .cb-article .entry-content .wp-block-table th {
	padding: .7rem .9rem;
	border-bottom: 2px solid color-mix(in srgb, var(--cb-pagina-acento, #7a5cff) 55%, transparent);
	background: rgba(255, 255, 255, .04);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: left;
	color: rgba(255, 255, 255, .8);
}

body.cb-pagina-hero .cb-article .entry-content .wp-block-table td {
	padding: .7rem .9rem;
	border-bottom: 1px solid var(--cb-hairline, rgba(255, 255, 255, .09));
	vertical-align: top;
}

body.cb-pagina-hero .cb-article .entry-content .wp-block-table tr:last-child td {
	border-bottom: 0;
}


/* --- Enlaces del cuerpo ---------------------------------------------------
   Subrayado que se dibuja al pasar, en el acento de la página. */

body.cb-pagina-hero .cb-article .entry-content p > a:not([class]),
body.cb-pagina-hero .cb-article .entry-content li > a:not([class]) {
	background-image: linear-gradient(90deg, var(--cb-pagina-acento, #7a5cff), var(--cb-pagina-acento-2, #00d4ff));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	transition: background-size var(--cb-base, 260ms) var(--cb-ease-out, ease);
}

body.cb-pagina-hero .cb-article .entry-content p > a:not([class]):hover,
body.cb-pagina-hero .cb-article .entry-content li > a:not([class]):hover {
	background-size: 100% 2px;
}


/* ==========================================================================
   9. Entradas al desplazar
   --------------------------------------------------------------------------
   Sin JavaScript: `animation-timeline: view()` ata la animación al
   desplazamiento, así que el navegador la resuelve solo y no hay que montar
   un IntersectionObserver ni cargar un script más.

   Tres condiciones que no se negocian:

     · Va dentro de `@supports`. Donde no se admite —Firefox y Safari a día
       de hoy— no se declara nada y el contenido sale visible y quieto, que
       es el estado correcto. Nunca queda un bloque en `opacity: 0`
       esperando a un script que quizá no llegue.
     · El rango termina en `cover 22%`, de modo que lo que ya está en
       pantalla al cargar aparece con la animación TERMINADA. La primera
       pantalla se ve completa desde el primer fotograma.
     · Con `prefers-reduced-motion` no se anima nada.

   El movimiento es corto —14 px y algo de opacidad— porque esto acompaña a
   la lectura; no es una función de la página.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	@supports (animation-timeline: view()) {

		@keyframes cb-entra {
			from { opacity: 0; transform: translateY(14px); }
			to   { opacity: 1; transform: none; }
		}

		body.cb-pagina-hero .cb-article .entry-content > h2,
		body.cb-pagina-hero .cb-article .entry-content > h3,
		body.cb-pagina-hero .cb-article .entry-content > p,
		body.cb-pagina-hero .cb-article .entry-content > ul,
		body.cb-pagina-hero .cb-article .entry-content > ol,
		body.cb-pagina-hero .cb-article .entry-content > figure,
		body.cb-pagina-hero .cb-article .entry-content > blockquote,
		body.cb-pagina-hero .cb-article .entry-content > .wp-block-table,
		body.cb-pagina-hero .cb-article .entry-content > .wp-block-group {
			animation: cb-entra linear both;
			animation-timeline: view();
			animation-range: entry 8% cover 22%;
		}

		/*
		 * Las columnas entran escalonadas, de izquierda a derecha. El retardo
		 * no puede ser de tiempo —la animación va atada al desplazamiento, no
		 * al reloj—, así que se corre el rango de cada una: la segunda empieza
		 * un poco más tarde que la primera, y la tercera más que la segunda.
		 */
		body.cb-pagina-hero .cb-article .entry-content .wp-block-column {
			animation: cb-entra linear both;
			animation-timeline: view();
			animation-range: entry 8% cover 26%;
		}

		body.cb-pagina-hero .cb-article .entry-content .wp-block-column:nth-child(2) {
			animation-range: entry 12% cover 30%;
		}

		body.cb-pagina-hero .cb-article .entry-content .wp-block-column:nth-child(3) {
			animation-range: entry 16% cover 34%;
		}

		/* La ficha de la cabecera, igual: las tres tarjetas escalonadas. */
		body.cb-pagina-hero .cb-hero__dato {
			animation: cb-entra linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 18%;
		}

		body.cb-pagina-hero .cb-hero__dato:nth-child(2) { animation-range: entry 0% cover 24%; }
		body.cb-pagina-hero .cb-hero__dato:nth-child(3) { animation-range: entry 0% cover 30%; }
	}
}


/* ==========================================================================
   10. Índice de apartados
   --------------------------------------------------------------------------
   Lo pinta `paginas-indice.php` en las páginas de cuatro apartados o más.
   Va en dos columnas porque en una sola, con nueve apartados, el índice
   medía media pantalla y empujaba el texto por debajo del pliegue.

   Los números son los mismos que la numeración de los `h2`: los pinta PHP
   contando los mismos titulares que cuenta el contador del CSS.
   ========================================================================== */

body.cb-pagina-hero .cb-article .entry-content .cb-indice {
	margin-block: clamp(2rem, 4vw, 3rem);
	padding: 1.4rem 1.5rem 1.5rem;
	border: 1px solid var(--cb-hairline, rgba(255, 255, 255, .09));
	border-radius: var(--cb-radio-l, 14px);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
}

body.cb-pagina-hero .cb-article .entry-content .cb-indice__titulo {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

/* El filete corto del acento, el mismo que abre cada apartado. */
body.cb-pagina-hero .cb-article .entry-content .cb-indice__titulo::before {
	content: "";
	width: 1.6rem;
	height: 2px;
	border-radius: var(--cb-radio-xs, 4px);
	background: linear-gradient(90deg, var(--cb-pagina-acento, #7a5cff), var(--cb-pagina-acento-2, #00d4ff));
}

body.cb-pagina-hero .cb-article .entry-content .cb-indice__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: .1rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

body.cb-pagina-hero .cb-article .entry-content .cb-indice__fila {
	margin: 0;
	padding: 0;
}

/* Sin viñeta propia: el número hace de marcador. */
body.cb-pagina-hero .cb-article .entry-content .cb-indice__fila::before,
body.cb-pagina-hero .cb-article .entry-content .cb-indice__fila::marker {
	content: none;
}

/*
 * El enlace ocupa toda la fila: el objetivo táctil es la línea entera, no
 * las tres palabras del titular.
 */
/*
 * El selector suma cinco clases a propósito: el subrayado rosa de los enlaces
 * del artículo llega con (0,4,2) desde `criticabits-single.css` y aquí no lo
 * queremos —en una lista de nueve filas, nueve subrayados son una reja—.
 */
body.cb-pagina-hero .cb-article .entry-content .cb-indice a.cb-indice__enlace {
	display: flex;
	align-items: baseline;
	gap: .7rem;
	padding: .5rem .55rem;
	border-radius: var(--cb-radio-s, 8px);
	border: 0;
	font-size: .95rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, .84);
	text-decoration: none;
	background-image: none;
	transition:
		background-color var(--cb-fast, 160ms) var(--cb-ease, ease),
		color var(--cb-fast, 160ms) var(--cb-ease, ease);
}

body.cb-pagina-hero .cb-article .entry-content .cb-indice a.cb-indice__enlace:hover,
body.cb-pagina-hero .cb-article .entry-content .cb-indice a.cb-indice__enlace:focus-visible {
	color: #fff;
	background-color: rgba(255, 255, 255, .06);
	text-decoration: none;
}

body.cb-pagina-hero .cb-article .entry-content .cb-indice__num {
	flex: 0 0 auto;
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--cb-pagina-acento, #7a5cff);
	opacity: .85;
}

/*
 * Al llegar desde el índice, el titular se quedaba debajo de la cabecera
 * pegajosa. Se compensa su alto más el aire del propio titular.
 */
body.cb-pagina-hero .cb-article .entry-content > h2[id] {
	scroll-margin-top: 5.5rem;
}

@media (prefers-reduced-motion: no-preference) {

	@supports (animation-timeline: view()) {

		body.cb-pagina-hero .cb-article .entry-content .cb-indice {
			animation: cb-entra linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 20%;
		}
	}
}