@charset "UTF-8";
/* ==========================================================================
   CriticaBits — el pie
   --------------------------------------------------------------------------
   El pie heredado era el nombre del sitio repetido, un lema en latín y un
   menú de tres columnas cuyo segundo grupo se titulaba « ». Aquí se
   convierte en un cierre: quién hace esto, qué hay dentro, por dónde
   seguir y cómo llegar.

   ÍNDICE
     1. La caja y la franja de carga
     2. Rejilla
     4. Marca: rótulo, lema y chapas
     5. Columnas de enlaces
     6. Barra legal
     7. Línea de cierre, crédito y código Konami
     8. Modo CRT
     9. Pantallas estrechas y movimiento reducido
   ========================================================================== */

/* ==========================================================================
   1. La caja y la franja de carga
   ========================================================================== */

.cb-footer {
	position: relative;
	/* Medido: el último bloque de la página y el pie se solapaban 20 px,
	   y las tarjetas de relacionados quedaban pegadas a la franja de
	   carga. */
	margin: max(125px, 7vw) 0 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 12% 0%, rgba(122, 92, 255, .14), transparent 60%),
		radial-gradient(90% 80% at 92% 8%, rgba(0, 212, 255, .10), transparent 62%),
		linear-gradient(180deg, #0c0f1b, #07080f 70%);
	color: rgba(255, 255, 255, .74);
}

/*
   La franja de carga de una cinta de Spectrum. Es el único adorno del pie
   y dice de qué va el sitio antes de leer una sola palabra: quien
   reconozca esas barras ya sabe dónde está.
*/
.cb-footer__tape {
	height: 7px;
	background: repeating-linear-gradient(
		90deg,
		#ffd400 0 7px,
		#1b1bff 7px 12px,
		#ff2b4d 12px 19px,
		#00e5ff 19px 23px,
		#ffd400 23px 27px,
		#1b1bff 27px 36px
	);
	background-size: 36px 100%;
	opacity: .85;
	/* A saltos, no continua: así se parece más a una cinta cargando de
	   verdad, y de paso repinta seis veces por ciclo en lugar de sesenta
	   por segundo en una banda que casi siempre está fuera de pantalla. */
	animation: cb-tape 900ms steps(6) infinite;
}

@keyframes cb-tape {
	to { background-position: -36px 0; }
}

/*
 * Aquí estaba el fallo del pie, y era de los que sólo se ven en pantalla
 * grande: `--cb-edge` ya vale `max(30px, (100% - 1300px) / 2)`, es decir,
 * YA centra el contenido a 1.300 px por sí solo. Sumarle encima un
 * `max-width: 1300px` con `box-sizing: border-box` restaba dos veces:
 *
 *     1.440 px → 1.300 − 2×70  = 1.160 de contenido
 *     1.553 px → 1.300 − 2×127 = 1.047
 *     1.920 px → 1.300 − 2×310 =   680   ← el pie encogido del informe
 *
 * De ahí que el pie se estrechara cuanto MÁS ancha era la ventana, y que
 * las columnas se apretaran hasta partir «SECCION / ES». Se quita el
 * tope y se deja sólo la cuneta, que es como se alinea el resto del
 * sitio: cabecera, contenido y pie sobre el mismo eje.
 */
.cb-footer__inner {
	max-width: none;
	margin: 0 auto;
	padding: 4.5rem var(--cb-edge, 30px) 2.5rem;
}

/* ==========================================================================
   2. Banda de suscripción
   ========================================================================== */

.cb-footer__signup {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: center;
	gap: 1.5rem 3rem;
	margin: 0 0 3.5rem;
	padding: 1.75rem 2rem;
	border: 1px solid var(--cb-hairline);
	border-left: 3px solid var(--cb-neon-pink);
	border-radius: 6px;
	background: linear-gradient(120deg, rgba(255, 0, 94, .07), rgba(122, 92, 255, .07) 55%, transparent);
}

.cb-footer__signup-title {
	margin: 0 0 .4rem;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.2;
	color: #fff;
}

.cb-footer__signup-text p {
	margin: 0;
	font-size: .9rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .62);
}

/* El formulario de Mailchimp llega en dos <p> apilados; en una sola fila
   el campo y el botón se leen como un único control. */
.cb-footer__signup .mc4wp-form-fields {
	display: flex;
	gap: .5rem;
}

.cb-footer__signup .mc4wp-form-fields p {
	margin: 0;
}

.cb-footer__signup .mc4wp-form-fields p:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.cb-footer__signup input[type="email"] {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 1rem;
	border: 1px solid var(--cb-hairline-strong);
	border-radius: 5px;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .92rem;
	transition: border-color var(--cb-fast) var(--cb-ease), box-shadow var(--cb-fast) var(--cb-ease);
}

.cb-footer__signup input[type="email"]::placeholder {
	color: rgba(255, 255, 255, .45);
}

.cb-footer__signup input[type="email"]:focus {
	outline: none;
	border-color: var(--cb-neon-pink);
	box-shadow: 0 0 0 3px rgba(255, 0, 94, .18);
}

.cb-footer__signup input[type="submit"] {
	height: 48px;
	margin: 0;
	padding: 0 1.4rem;
	border: 0;
	border-radius: 5px;
	background: linear-gradient(120deg, var(--cb-neon-pink), var(--cb-neon-violet));
	color: #fff;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--cb-fast) var(--cb-ease-out), filter var(--cb-fast) var(--cb-ease), box-shadow var(--cb-base) var(--cb-ease);
}

.cb-footer__signup input[type="submit"]:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
	box-shadow: 0 8px 22px -8px var(--cb-neon-pink);
}

.cb-footer__signup-fine {
	margin: .7rem 0 0;
	font-size: .68rem;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .4);
}

.cb-footer__signup .mc4wp-response {
	margin-top: .6rem;
	font-size: .82rem;
	color: rgba(255, 255, 255, .8);
}

.cb-footer__signup .mc4wp-response p { margin: 0; }

/* ==========================================================================
   3. Rejilla
   ========================================================================== */

/*
   Una fila flexible, no una rejilla de columnas fijas.

   Con `grid-template-columns` las cuatro columnas se reparten SIEMPRE el
   ancho disponible, por estrecho que sea: cuando no cabían no bajaban de
   línea, se apretaban. De ahí el «SECCION / ES» partido en dos, los
   titulares rotos a media palabra y el recuento montado encima. Con
   `flex-wrap` cada columna declara el ancho por debajo del cual prefiere
   bajar a la línea siguiente, y el pie deja de tener un ancho en el que
   se rompa.
*/
.cb-footer__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 3rem 2.75rem;
}

.cb-footer__brand {
	flex: 1 1 300px;
	max-width: 460px;
}

.cb-footer__col {
	flex: 1 1 200px;
	min-width: 185px;
}

/* ==========================================================================
   4. Marca: rótulo, lema y chapas
   ========================================================================== */

.cb-footer__wordmark {
	display: inline-block;
	margin: 0 0 1.15rem;
	text-decoration: none;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: clamp(1.9rem, 2.7vw, 2.85rem);
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	letter-spacing: -.035em;
	color: #fff;
	transition: text-shadow var(--cb-base) var(--cb-ease);
}

/* La admiración invertida es la marca de la casa: se enciende. */
.cb-footer__wordmark .logo-i {
	color: var(--cb-neon-pink);
	text-shadow: 0 0 18px rgba(255, 0, 94, .55);
}

/* Al pasar por encima, la aberración cromática de un tubo mal ajustado. */
.cb-footer__wordmark:hover {
	text-shadow:
		-2px 0 rgba(255, 0, 94, .75),
		2px 0 rgba(0, 212, 255, .75);
}

.cb-footer__tagline {
	max-width: 42ch;
	margin: 0 0 1.5rem;
	font-size: .95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, .62);
}

/* Las chapas: el año de arranque, cuánto hay publicado y la línea
   editorial. La tercera no es una métrica, es una promesa. */
.cb-footer__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cb-footer__tags li {
	padding: .35rem .7rem;
	border: 1px solid var(--cb-hairline-strong);
	border-radius: 3px;
	background: rgba(255, 255, 255, .03);
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.cb-footer__tags li:last-child {
	border-color: rgba(255, 0, 94, .4);
	color: var(--cb-neon-rose);
}

/* ==========================================================================
   5. Columnas de enlaces
   ========================================================================== */

/* El filete entre columnas sólo tiene sentido mientras las cuatro van en
   una sola línea; en cuanto bajan, sobraría. */
@media (min-width: 1120px) {

	.cb-footer__col + .cb-footer__col {
		padding-left: 2.75rem;
		margin-left: -2.75rem;
		border-left: 1px solid rgba(255, 255, 255, .06);
	}
}

.cb-footer__title {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 1.2rem;
	padding: 0;
	border: 0;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}

.cb-footer__title::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: var(--cb-neon-cyan);
	box-shadow: 0 0 8px -1px var(--cb-neon-cyan);
}

.cb-footer .cb-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cb-footer .cb-footer__links li {
	margin: 0;
	padding: 0;
	border: 0;
}

.cb-footer .cb-footer__links a {
	position: relative;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .42rem 0 .42rem 0;
	border: 0;
	text-decoration: none;
	font-size: .92rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, .66);
	transition:
		color var(--cb-fast) var(--cb-ease),
		padding-left var(--cb-fast) var(--cb-ease-out);
}

/* Un punto de neón que aparece por la izquierda y empuja el enlace. */
.cb-footer .cb-footer__links a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: var(--cb-neon-cyan);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--cb-fast) var(--cb-ease), transform var(--cb-fast) var(--cb-ease-out);
}

.cb-footer .cb-footer__links a:hover,
.cb-footer .cb-footer__links a:focus-visible {
	color: #fff;
	padding-left: 14px;
}

.cb-footer .cb-footer__links a:hover::before,
.cb-footer .cb-footer__links a:focus-visible::before {
	opacity: 1;
	transform: translateX(0);
	box-shadow: 0 0 8px var(--cb-neon-cyan);
}

.cb-footer__link-text {
	flex: 1 1 auto;
	min-width: 0;
	/* Un titular largo parte por donde sea antes que empujar al
	   recuento. */
	overflow-wrap: anywhere;
}

.cb-footer__count {
	margin-left: auto;
}

/* El recuento de cada sección: informa de cuánto hay detrás del enlace. */
.cb-footer__count {
	flex: 0 0 auto;
	min-width: 1.9em;
	padding: .05rem .35rem;
	border: 1px solid var(--cb-hairline);
	border-radius: 3px;
	text-align: center;
	font-size: .66rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .5);
	transition: border-color var(--cb-fast) var(--cb-ease), color var(--cb-fast) var(--cb-ease);
}

.cb-footer .cb-footer__links a:hover .cb-footer__count {
	border-color: var(--cb-neon-cyan);
	color: var(--cb-neon-cyan);
}

/* ==========================================================================
   6. Barra legal
   ========================================================================== */

.cb-footer .cb-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem 1rem;
	margin: 3.5rem 0 0;
	padding: 1.4rem 0 0;
	border-top: 1px solid var(--cb-hairline);
	list-style: none;
}

.cb-footer .cb-footer__legal li {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
	border: 0;
}

/* El punto separador entre documentos, como en un pie de imprenta. */
.cb-footer .cb-footer__legal li + li::before {
	content: "·";
	color: rgba(255, 255, 255, .28);
}

.cb-footer .cb-footer__legal a {
	padding: 0;
	border: 0;
	text-decoration: none;
	font-size: .82rem;
	color: rgba(255, 255, 255, .55);
	transition: color var(--cb-fast) var(--cb-ease);
}

.cb-footer .cb-footer__legal a:hover {
	color: #fff;
}

/* ==========================================================================
   7. Línea de cierre, crédito y código Konami
   ========================================================================== */

.cb-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-top: 1.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--cb-hairline);
}

.cb-footer__copy {
	margin: 0;
	font-size: .76rem;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .45);
}

/* --- Crédito -------------------------------------------------------------- */

.cb-footer__credit {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: .5rem;
	text-decoration: none;
	overflow: hidden;
}

.cb-footer__credit-pre {
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .32);
}

.cb-footer__credit-name {
	position: relative;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .72);
	transition: color var(--cb-fast) var(--cb-ease);
}

/* Un destello que barre el nombre al pasar por encima. */
.cb-footer__credit-name::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	color: var(--cb-neon-cyan);
	-webkit-mask-image: linear-gradient(100deg, transparent 42%, #000 50%, transparent 58%);
	mask-image: linear-gradient(100deg, transparent 42%, #000 50%, transparent 58%);
	-webkit-mask-size: 260% 100%;
	mask-size: 260% 100%;
	-webkit-mask-position: 130% 0;
	mask-position: 130% 0;
	transition: -webkit-mask-position .75s var(--cb-ease-out), mask-position .75s var(--cb-ease-out);
}

.cb-footer__credit:hover .cb-footer__credit-name {
	color: #fff;
}

.cb-footer__credit:hover .cb-footer__credit-name::after {
	-webkit-mask-position: -30% 0;
	mask-position: -30% 0;
}

/* --- Código Konami -------------------------------------------------------- */

.cb-footer__konami {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin: 0;
	cursor: default;
	user-select: none;
}

.cb-footer__konami-label {
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .32);
}

.cb-footer__keys {
	display: inline-flex;
	gap: 3px;
}

.cb-footer__keys b {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border: 1px solid var(--cb-hairline-strong);
	border-radius: 3px;
	background: rgba(255, 255, 255, .03);
	font-size: .6rem;
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, .5);
	transition: border-color 120ms var(--cb-ease), color 120ms var(--cb-ease), background-color 120ms var(--cb-ease);
}

/* Las teclas ya acertadas se encienden: el sitio responde mientras se
   teclea, en vez de premiar sólo al final. */
.cb-footer__keys b.is-hit {
	border-color: var(--cb-neon-cyan);
	background: rgba(0, 212, 255, .14);
	color: #fff;
	box-shadow: 0 0 10px -2px var(--cb-neon-cyan);
}

/* ==========================================================================
   8. Modo CRT
   --------------------------------------------------------------------------
   El premio del código: la pantalla se convierte en un tubo de rayos
   catódicos durante unos segundos. Es una capa fija por encima de todo,
   sin eventos de ratón, así que no interfiere con nada.
   ========================================================================== */

.cb-crt-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	pointer-events: none;
	opacity: 0;
	transition: opacity 420ms var(--cb-ease);
	background:
		/* Líneas de barrido. */
		repeating-linear-gradient(
			180deg,
			rgba(0, 0, 0, .26) 0 1px,
			transparent 1px 3px
		),
		/* La máscara de sombra: la tríada de fósforos, muy suave. */
		repeating-linear-gradient(
			90deg,
			rgba(255, 0, 0, .05) 0 1px,
			rgba(0, 255, 0, .05) 1px 2px,
			rgba(0, 0, 255, .05) 2px 3px
		),
		/* Y el abombamiento del tubo. */
		radial-gradient(120% 120% at 50% 50%, transparent 52%, rgba(0, 0, 0, .6));
}

.cb-crt .cb-crt-overlay {
	opacity: 1;
	animation: cb-crt-flicker 3.2s steps(1) infinite;
}

@keyframes cb-crt-flicker {
	0%, 92%, 100% { opacity: 1; }
	94%           { opacity: .82; }
	96%           { opacity: 1; }
	98%           { opacity: .9; }
}

/* Nada de `filter` sobre la página: un filtro convierte al elemento en
   bloque contenedor de sus descendientes fijos, y este sitio tiene una
   cabecera y un índice anclados. El efecto se queda entero en la capa. */

.cb-crt-toast {
	position: fixed;
	left: 50%;
	bottom: 2.5rem;
	z-index: 100000;
	transform: translate(-50%, 20px);
	padding: .85rem 1.4rem;
	border: 1px solid var(--cb-neon-cyan);
	border-radius: 4px;
	background: rgba(6, 8, 16, .92);
	box-shadow: 0 0 30px -6px var(--cb-neon-cyan);
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms var(--cb-ease), transform 300ms var(--cb-ease-out);
}

.cb-crt .cb-crt-toast {
	opacity: 1;
	transform: translate(-50%, 0);
}

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

@media (max-width: 1279px) {

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

	.cb-footer__brand {
		flex-basis: 100%;
		max-width: none;
	}
}

@media (max-width: 599px) {

	.cb-footer__inner {
		padding-top: 3rem;
	}

	/* «El sitio» y «Canales» caben en dos columnas y ahorran media
	   pantalla de desplazamiento; «Secciones», con ocho entradas y su
	   recuento, se queda a lo ancho. */
	.cb-footer__grid {
		gap: 2rem 1.5rem;
	}

	/* «Secciones», con ocho entradas y su recuento, a lo ancho; las otras
	   dos caben en media pantalla. */
	.cb-footer__col:first-of-type {
		flex-basis: 100%;
	}

	.cb-footer__col {
		flex-basis: 40%;
		min-width: 140px;
	}

	.cb-footer__signup {
		padding: 1.35rem 1.25rem;
	}

	.cb-footer__signup .mc4wp-form-fields {
		flex-direction: column;
	}

	.cb-footer__signup input[type="submit"] {
		width: 100%;
	}

	.cb-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.1rem;
	}

	/* El código deja de ser una pista y pasa a ser adorno: en un teclado
	   táctil no hay flechas que teclear. */
	.cb-footer__konami-label {
		display: none;
	}
}

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

	.cb-footer__tape {
		animation: none;
	}

	.cb-crt .cb-crt-overlay {
		animation: none;
	}
}

/* ==========================================================================
   Repaso de móvil
   --------------------------------------------------------------------------
   Recorrido a 360 y 390 px. Salvo el contraste del crédito —que no tendría
   sentido corregir sólo en una mitad del sitio—, todo va en `max-width`.
   ========================================================================== */

/*
 * Defecto medido: «WEB HECHA POR» va a 9,6 px con blanco al 32 % sobre el
 * fondo del pie: 2,80:1, cuando el mínimo para texto normal es 4,5:1. Es la
 * línea más pequeña y más apagada de toda la página, y en un móvil al sol no
 * se ve. Al 62 % son 5,45:1, y sube medio punto de cuerpo para no quedarse
 * en un cabello.
 */
.cb-footer__credit-pre {
	font-size: .66rem;
	color: rgba(255, 255, 255, .62);
}

@media (max-width: 1023px) {

	/* --- Enlaces del pie ---------------------------------------------------
	 * Defecto medido a 390 px: las ocho entradas de «Secciones» y las
	 * cuatro de «El sitio» y «Canales» dan filas de 34 px de alto, y los
	 * dos enlaces legales, de 26. En escritorio se pulsan con un ratón de
	 * un píxel; en un teléfono son doce objetivos seguidos por debajo del
	 * mínimo y con 0 px de separación entre ellos, así que fallar el que
	 * quieres es fallar en el de al lado. Se llevan todos a 44.
	 * ---------------------------------------------------------------------- */
	.cb-footer .cb-footer__links a {
		min-height: 44px;
		padding-top: .7rem;
		padding-bottom: .7rem;
	}

	.cb-footer .cb-footer__legal a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* El wordmark del pie medía 154x30. */
	.cb-footer .cb-footer__wordmark {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

@media (max-width: 1023px) {

	/* El crédito del estudio es un enlace y medía 242x14 px. */
	.cb-footer .cb-footer__credit {
		min-height: 44px;
		align-items: center;
	}
}

@media (max-width: 599px) {

	/* --- Barra legal -------------------------------------------------------
	 * Defecto medido a 360 px: los dos enlaces («Política de privacidad»,
	 * 136 px, y «Términos y condiciones», 169) suman 321 sobre 300 de
	 * columna, así que el segundo cae a la línea de abajo… arrastrando el
	 * punto separador, que se pinta con `li + li::before` y quedaba
	 * huérfano al principio de la segunda fila, sangrando el enlace y
	 * pareciendo una viñeta suelta. Al envolverse ya no hay nada que
	 * separar: se retira el punto y se da aire entre filas.
	 * ---------------------------------------------------------------------- */
	.cb-footer .cb-footer__legal {
		gap: .1rem 1.25rem;
	}

	.cb-footer .cb-footer__legal li + li::before {
		content: none;
	}
}

@media (max-width: 380px) {

	/* --- «El sitio» y «Canales» -------------------------------------------
	 * Defecto medido a 360 px: `.cb-footer__col` lleva `min-width: 140px`
	 * y la rejilla, 24 px de hueco. En 300 px de columna, 140+24+140=304:
	 * por cuatro píxeles las dos listas dejaban de caber una al lado de
	 * otra y el pie pasaba de 942 a 1210 px de alto —268 px más de
	 * desplazamiento a cambio de nada—. Se estrecha el hueco y se deja
	 * que las columnas se repartan la mitad exacta.
	 * ---------------------------------------------------------------------- */
	.cb-footer__grid {
		gap: 2rem 1rem;
	}

	.cb-footer__col {
		flex-basis: calc(50% - .5rem);
		min-width: 0;
	}

	.cb-footer__col:first-of-type {
		flex-basis: 100%;
	}
}