@charset "UTF-8";
/* ==========================================================================
   CriticaBits — sistema de interfaz: fichas, botones, enlaces y campos
   --------------------------------------------------------------------------
   Por qué existe esta hoja.

   Los botones del sitio venían de tres sitios distintos —el tema, Gutenberg y
   los estilos propios— y no coincidía ninguno. Medido en la página del equipo,
   los dos botones que van uno al lado del otro daban 42 px y 38 px de alto,
   con relleno de 12/20 px y de 9,3/18,6 px, esquinas a cero y el texto a 14 px
   en peso 800. Dos botones hermanos que no se parecen es exactamente el
   síntoma de que no hay sistema, sólo reglas sueltas.

   Aquí está el sistema. Primero las fichas —una escala de tamaños, radios,
   duraciones y colores— y encima de ellas una suite de botones y un
   tratamiento único para enlaces y campos. Nada de esta hoja usa un valor
   escrito a pelo: todo sale de una ficha, y cambiar la ficha cambia el sitio
   entero.

   Se encola la ÚLTIMA a propósito. Los enlaces del artículo llegaban desde
   `criticabits-single.css` con especificidad (0,4,2) y ganaban por orden a
   reglas de páginas con la misma cuenta —por eso los nombres de sección de la
   página del equipo salían subrayados en rosa como si fueran texto corrido—.
   Poniendo esta hoja al final, el sistema gana los empates y las páginas
   siguen pudiendo pasar por delante si suman una clase más.

   ÍNDICE
     1. Fichas
     2. Anillo de foco
     3. Suite de botones
     4. Tamaños, formas y estados
     5. Puente con los botones de Gutenberg y del tema
     6. Enlaces
     7. Campos de formulario
     8. Movimiento reducido
   ========================================================================== */

/* ==========================================================================
   1. Fichas
   --------------------------------------------------------------------------
   Todo lo que se repite tiene nombre. Las medidas se dan en `rem` para que
   respeten el tamaño de letra del navegador, salvo el radio y los grosores,
   que son de píxel y no deben crecer con la tipografía.
   ========================================================================== */

:root {

	/* --- Radios ------------------------------------------------------- */
	--cb-radio-xs: 4px;
	--cb-radio-s: 8px;
	--cb-radio-m: 10px;
	--cb-radio-l: 14px;
	--cb-radio-xl: 20px;
	--cb-radio-pastilla: 999px;

	/* --- Botones: geometría base (tamaño «m») -------------------------- */

	/*
	 * 2,75 rem son 44 px con la raíz por defecto: el objetivo táctil mínimo
	 * que recomienda la WCAG. El alto se fija con `min-height` y no con
	 * relleno para que todas las variantes midan lo mismo aunque una lleve
	 * borde y otra no.
	 */
	--cb-btn-alto: 2.75rem;
	--cb-btn-pad-x: 1.15rem;
	--cb-btn-pad-y: .6rem;
	--cb-btn-fs: .9375rem;
	--cb-btn-peso: 650;
	--cb-btn-tracking: .005em;
	--cb-btn-radio: var(--cb-radio-m);
	--cb-btn-gap: .55rem;
	--cb-btn-borde: 1px;
	--cb-btn-icono: 1.15em;

	/* Tamaño «s» */
	--cb-btn-alto-s: 2.125rem;
	--cb-btn-pad-x-s: .8rem;
	--cb-btn-fs-s: .8125rem;
	--cb-btn-radio-s: var(--cb-radio-s);

	/* Tamaño «l» */
	--cb-btn-alto-l: 3.25rem;
	--cb-btn-pad-x-l: 1.6rem;
	--cb-btn-fs-l: 1.0625rem;
	--cb-btn-radio-l: var(--cb-radio-l);

	/* --- Botones: color ----------------------------------------------- */

	--cb-btn-primario-fondo: linear-gradient(100deg, var(--cb-neon-pink, #ff005e), var(--cb-neon-violet, #7a5cff));
	--cb-btn-primario-texto: #fff;
	--cb-btn-primario-halo: 0 10px 30px -14px rgba(255, 0, 94, .85);
	--cb-btn-primario-halo-activo: 0 14px 38px -14px rgba(122, 92, 255, .95);

	--cb-btn-solido-fondo: rgba(255, 255, 255, .09);
	--cb-btn-solido-fondo-activo: rgba(255, 255, 255, .15);
	--cb-btn-solido-borde: var(--cb-hairline-strong, rgba(255, 255, 255, .16));
	--cb-btn-solido-texto: #fff;

	--cb-btn-contorno-borde: rgba(255, 255, 255, .28);
	--cb-btn-contorno-borde-activo: var(--cb-neon-cyan, #00d4ff);
	--cb-btn-contorno-texto: rgba(255, 255, 255, .92);
	--cb-btn-contorno-fondo-activo: rgba(0, 212, 255, .1);

	--cb-btn-fantasma-texto: rgba(255, 255, 255, .78);
	--cb-btn-fantasma-fondo-activo: rgba(255, 255, 255, .08);

	--cb-btn-aviso-fondo: linear-gradient(100deg, #ff2d55, #ff005e);
	--cb-btn-aviso-halo: 0 10px 30px -14px rgba(255, 45, 85, .9);

	/* --- Enlaces ------------------------------------------------------ */

	/*
	 * El enlace del cuerpo era #ff9ab8 con el subrayado al 45 % de opacidad:
	 * el rosa se confundía con el rosa de los titulares y la línea, tan
	 * clara y tan separada del texto, parecía un defecto de renderizado más
	 * que un subrayado. El azul de aquí no compite con ningún acento de la
	 * marca —que son rosa, violeta y ámbar— y sobre el fondo del sitio da
	 * mucho más contraste que el rosa al que sustituye.
	 */
	--cb-enlace: #7fd4ff;
	--cb-enlace-activo: #fff;
	--cb-enlace-visitado: #c3b0ff;
	--cb-enlace-grosor: 1px;
	--cb-enlace-grosor-activo: 2px;
	--cb-enlace-salto: .16em;

	/* --- Campos ------------------------------------------------------- */
	--cb-campo-alto: 2.75rem;
	--cb-campo-pad-x: .85rem;
	--cb-campo-radio: var(--cb-radio-s);
	--cb-campo-fondo: rgba(0, 0, 0, .28);
	--cb-campo-borde: var(--cb-hairline-strong, rgba(255, 255, 255, .16));
	--cb-campo-borde-foco: var(--cb-neon-cyan, #00d4ff);
	--cb-campo-texto: #fff;
	--cb-campo-marcador: rgba(255, 255, 255, .56);

	/* --- Tablas -------------------------------------------------------- */
	--cb-tabla-cebra: rgba(255, 255, 255, .04);
	--cb-tabla-borde: var(--cb-hairline, rgba(255, 255, 255, .09));
	--cb-tabla-cabecera: rgba(255, 255, 255, .55);
	--cb-tabla-pad-x: 1rem;
	--cb-tabla-pad-y: .7rem;

	/* --- Foco ---------------------------------------------------------- */
	--cb-foco-color: var(--cb-neon-cyan, #00d4ff);
	--cb-foco-grosor: 2px;
	--cb-foco-aire: 2px;
}

/* ==========================================================================
   2. Anillo de foco
   --------------------------------------------------------------------------
   Uno solo para todo lo que se puede enfocar con el teclado. Va con
   `:focus-visible` y no con `:focus` para no dibujarlo al hacer clic con el
   ratón, y con `outline` y no con `box-shadow` para que siga viéndose en el
   modo de contraste forzado de Windows.
   ========================================================================== */

.cb-btn:focus-visible,
.cb-campo:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: var(--cb-foco-grosor) solid var(--cb-foco-color);
	outline-offset: var(--cb-foco-aire);
}

/* ==========================================================================
   3. Suite de botones
   --------------------------------------------------------------------------
   Una base y cinco variantes. La base no pinta color: sólo forma, tamaño y
   comportamiento, para que añadir una variante sea añadir tres declaraciones
   de color y nada más.
   ========================================================================== */

.cb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cb-btn-gap);
	min-height: var(--cb-btn-alto);
	padding: var(--cb-btn-pad-y) var(--cb-btn-pad-x);
	border: var(--cb-btn-borde) solid transparent;
	border-radius: var(--cb-btn-radio);
	font-family: inherit;
	font-size: var(--cb-btn-fs);
	font-weight: var(--cb-btn-peso);
	line-height: 1.15;
	letter-spacing: var(--cb-btn-tracking);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	background: transparent;
	color: inherit;
	/* Sin selección de texto: al pulsar dos veces seguidas se quedaba el
	   rótulo resaltado en azul del sistema. */
	user-select: none;
	transition:
		background-color var(--cb-fast, 140ms) var(--cb-ease, ease),
		border-color var(--cb-fast, 140ms) var(--cb-ease, ease),
		color var(--cb-fast, 140ms) var(--cb-ease, ease),
		box-shadow var(--cb-base, 260ms) var(--cb-ease, ease),
		transform var(--cb-fast, 140ms) var(--cb-ease-out, ease);
}

/*
 * Los rótulos largos en pantalla estrecha: `nowrap` es lo que se quiere en
 * una barra de botones, pero no cuando el botón mide más que la pantalla.
 */
@media (max-width: 480px) {
	.cb-btn { white-space: normal; }
}

.cb-btn:active {
	transform: translateY(1px);
}

/* --- Primario ------------------------------------------------------------
   El de la acción principal de cada pantalla. Sólo puede haber uno a la
   vista; si hay dos, ninguno es el principal. */

.cb-btn--primario {
	background: var(--cb-btn-primario-fondo);
	color: var(--cb-btn-primario-texto);
	box-shadow: var(--cb-btn-primario-halo);
	/* El brillo que cruza al pasar por encima se recorta aquí. */
	overflow: hidden;
}

.cb-btn--primario:hover,
.cb-btn--primario:focus-visible {
	box-shadow: var(--cb-btn-primario-halo-activo);
}

/* El destello: una banda clara que cruza el botón una sola vez. */
.cb-btn--primario::after {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 45%;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
	transform: translateX(-160%) skewX(-18deg);
}

.cb-btn--primario:hover::after,
.cb-btn--primario:focus-visible::after {
	animation: cb-destello 720ms var(--cb-ease-out, ease);
}

@keyframes cb-destello {
	to { transform: translateX(320%) skewX(-18deg); }
}

/* --- Sólido --------------------------------------------------------------
   La acción secundaria de verdad: se ve, pero no compite con el primario. */

.cb-btn--solido {
	background-color: var(--cb-btn-solido-fondo);
	border-color: var(--cb-btn-solido-borde);
	color: var(--cb-btn-solido-texto);
}

.cb-btn--solido:hover,
.cb-btn--solido:focus-visible {
	background-color: var(--cb-btn-solido-fondo-activo);
	border-color: rgba(255, 255, 255, .3);
}

/* --- Contorno ------------------------------------------------------------ */

.cb-btn--contorno {
	border-color: var(--cb-btn-contorno-borde);
	color: var(--cb-btn-contorno-texto);
}

.cb-btn--contorno:hover,
.cb-btn--contorno:focus-visible {
	border-color: var(--cb-btn-contorno-borde-activo);
	background-color: var(--cb-btn-contorno-fondo-activo);
	color: #fff;
}

/* --- Fantasma ------------------------------------------------------------
   Para acciones de tercera fila: «cancelar», «ver todo», «cerrar». */

.cb-btn--fantasma {
	color: var(--cb-btn-fantasma-texto);
	padding-inline: calc(var(--cb-btn-pad-x) - .35rem);
}

.cb-btn--fantasma:hover,
.cb-btn--fantasma:focus-visible {
	background-color: var(--cb-btn-fantasma-fondo-activo);
	color: #fff;
}

/* --- Aviso ---------------------------------------------------------------
   Para lo que borra o cancela algo. No se usa hoy en el sitio; está para que
   el día que haga falta no se invente otro botón. */

.cb-btn--aviso {
	background: var(--cb-btn-aviso-fondo);
	color: #fff;
	box-shadow: var(--cb-btn-aviso-halo);
}

/* ==========================================================================
   4. Tamaños, formas y estados
   ========================================================================== */

.cb-btn--s {
	min-height: var(--cb-btn-alto-s);
	padding-inline: var(--cb-btn-pad-x-s);
	font-size: var(--cb-btn-fs-s);
	border-radius: var(--cb-btn-radio-s);
}

.cb-btn--l {
	min-height: var(--cb-btn-alto-l);
	padding-inline: var(--cb-btn-pad-x-l);
	font-size: var(--cb-btn-fs-l);
	border-radius: var(--cb-btn-radio-l);
}

.cb-btn--pastilla { border-radius: var(--cb-radio-pastilla); }

.cb-btn--bloque {
	display: flex;
	width: 100%;
}

/* Sólo icono: cuadrado, y el rótulo va en `aria-label`. */
.cb-btn--icono {
	padding-inline: 0;
	width: var(--cb-btn-alto);
	aspect-ratio: 1;
}

.cb-btn--icono.cb-btn--s { width: var(--cb-btn-alto-s); }
.cb-btn--icono.cb-btn--l { width: var(--cb-btn-alto-l); }

.cb-btn__icono {
	flex: 0 0 auto;
	width: var(--cb-btn-icono);
	height: var(--cb-btn-icono);
	/* Los iconos se dibujan con el color del rótulo, sin excepción. */
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Inhabilitado --------------------------------------------------------
   `pointer-events: none` a secas deja el botón mudo también para el lector de
   pantalla y para el cursor: mejor dejar que reciba el ratón y mostrar el
   cursor de «no». */

.cb-btn[disabled],
.cb-btn[aria-disabled="true"],
.cb-btn.is-inhabilitado {
	opacity: .45;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.cb-btn[disabled]:hover::after,
.cb-btn[aria-disabled="true"]:hover::after {
	animation: none;
}

/* --- Trabajando ----------------------------------------------------------
   Con `aria-busy="true"`, el botón enseña que está esperando respuesta. */

.cb-btn[aria-busy="true"] {
	cursor: progress;
	color: transparent;
}

.cb-btn[aria-busy="true"]::before {
	content: "";
	position: absolute;
	width: 1.05em;
	height: 1.05em;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	animation: cb-girando 640ms linear infinite;
}

@keyframes cb-girando {
	to { transform: rotate(1turn); }
}

/* --- Barra de botones ---------------------------------------------------- */

.cb-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}

/* ==========================================================================
   5. Puente con los botones de Gutenberg y del tema
   --------------------------------------------------------------------------
   El editor escribe `<div class="wp-block-button"><a class="wp-block-button__link">`
   y no va a escribir `.cb-btn`. En vez de pedir que se cambien las entradas,
   se traduce aquí: cada estilo de bloque cae en una variante de la suite.

   Quedan fuera los botones de afiliado heredados (`boton-amazon`,
   `button-77`, `button-85`…), que llevan su propio fondo en el div padre: si
   se les pintase el fondo del sistema encima, desaparecería el suyo.
   ========================================================================== */

.wp-block-button:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cb-btn-gap);
	min-height: var(--cb-btn-alto);
	padding: var(--cb-btn-pad-y) var(--cb-btn-pad-x);
	border: var(--cb-btn-borde) solid transparent;
	border-radius: var(--cb-btn-radio);
	font-size: var(--cb-btn-fs);
	font-weight: var(--cb-btn-peso);
	line-height: 1.15;
	letter-spacing: var(--cb-btn-tracking);
	text-decoration: none;
	transition:
		background-color var(--cb-fast, 140ms) var(--cb-ease, ease),
		border-color var(--cb-fast, 140ms) var(--cb-ease, ease),
		color var(--cb-fast, 140ms) var(--cb-ease, ease),
		box-shadow var(--cb-base, 260ms) var(--cb-ease, ease),
		transform var(--cb-fast, 140ms) var(--cb-ease-out, ease);
}

.wp-block-button:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link:active {
	transform: translateY(1px);
}

/* Sin estilo elegido: sólido. Es el que menos daño hace por defecto. */
.wp-block-button:not([class*="is-style"]):not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link {
	background-image: none;
	background-color: var(--cb-btn-solido-fondo);
	border-color: var(--cb-btn-solido-borde);
	color: var(--cb-btn-solido-texto);
}

.wp-block-button:not([class*="is-style"]):not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link:hover {
	background-color: var(--cb-btn-solido-fondo-activo);
	border-color: rgba(255, 255, 255, .3);
}

/* Neón -> primario. */
.wp-block-button.is-style-cb-neon:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link {
	position: relative;
	overflow: hidden;
	background: var(--cb-btn-primario-fondo);
	border-color: transparent;
	color: var(--cb-btn-primario-texto);
	box-shadow: var(--cb-btn-primario-halo);
}

.wp-block-button.is-style-cb-neon:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link:hover,
.wp-block-button.is-style-cb-neon:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link:focus-visible {
	box-shadow: var(--cb-btn-primario-halo-activo);
}

.wp-block-button.is-style-cb-neon:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 45%;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
	transform: translateX(-160%) skewX(-18deg);
}

.wp-block-button.is-style-cb-neon:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link:hover::after,
.wp-block-button.is-style-cb-neon:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link:focus-visible::after {
	animation: cb-destello 720ms var(--cb-ease-out, ease);
}

/*
 * Sólido.
 *
 * `background-image: none` no es de adorno: el tema pinta el botón con un
 * degradado en `--button-background`, y un `background-color` por debajo no
 * se ve. El botón «sólido» salía magenta.
 */
.wp-block-button.is-style-cb-solido:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link {
	background-image: none;
	background-color: var(--cb-btn-solido-fondo);
	border-color: var(--cb-btn-solido-borde);
	color: var(--cb-btn-solido-texto);
}

.wp-block-button.is-style-cb-solido:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link:hover {
	background-color: var(--cb-btn-solido-fondo-activo);
	border-color: rgba(255, 255, 255, .3);
}

/* Contorno: el del propio Gutenberg y el nuestro caen en el mismo sitio. */
.wp-block-button.is-style-outline:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link,
.wp-block-button.is-style-cb-contorno:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link {
	background: none transparent;
	border-color: var(--cb-btn-contorno-borde);
	color: var(--cb-btn-contorno-texto);
}

.wp-block-button.is-style-outline:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link:hover,
.wp-block-button.is-style-cb-contorno:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link:hover,
.wp-block-button.is-style-outline:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-cb-contorno:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link:focus-visible {
	border-color: var(--cb-btn-contorno-borde-activo);
	background-color: var(--cb-btn-contorno-fondo-activo);
	color: #fff;
}

/* Fantasma. */
.wp-block-button.is-style-cb-fantasma:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link {
	background: none transparent;
	border-color: transparent;
	color: var(--cb-btn-fantasma-texto);
}

.wp-block-button.is-style-cb-fantasma:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link:hover {
	background-color: var(--cb-btn-fantasma-fondo-activo);
	color: #fff;
}

/*
 * El grupo de botones: el tema no le daba separación vertical, así que dos
 * botones que caían en dos líneas quedaban pegados.
 */
.wp-block-buttons {
	gap: .75rem;
}

/* --- El botón de envío de Contact Form 7 ---------------------------------
   Llegaba en pastilla de 100 px de radio, peso 600 y un degradado magenta que
   no está en la paleta: el único botón del sitio con esa forma y ese color.
   Es la acción principal de la página de contacto, así que cae en la variante
   primaria como cualquier otra.

   El selector suma la clase del formulario porque el degradado original venía
   del Personalizador con dos clases de ventaja. */

.wpcf7 .wpcf7-form input.wpcf7-submit,
.wpcf7 .wpcf7-form button.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cb-btn-alto);
	padding: var(--cb-btn-pad-y) var(--cb-btn-pad-x-l);
	border: var(--cb-btn-borde) solid transparent;
	border-radius: var(--cb-btn-radio);
	background: var(--cb-btn-primario-fondo);
	color: var(--cb-btn-primario-texto);
	font-family: inherit;
	font-size: var(--cb-btn-fs);
	font-weight: var(--cb-btn-peso);
	letter-spacing: var(--cb-btn-tracking);
	text-transform: none;
	box-shadow: var(--cb-btn-primario-halo);
	cursor: pointer;
	transition:
		box-shadow var(--cb-base, 260ms) var(--cb-ease, ease),
		transform var(--cb-fast, 140ms) var(--cb-ease-out, ease);
}

.wpcf7 .wpcf7-form input.wpcf7-submit:hover,
.wpcf7 .wpcf7-form button.wpcf7-submit:hover {
	box-shadow: var(--cb-btn-primario-halo-activo);
}

.wpcf7 .wpcf7-form input.wpcf7-submit:active,
.wpcf7 .wpcf7-form button.wpcf7-submit:active {
	transform: translateY(1px);
}

/*
 * El `<button>` pelado de los bloques promocionales del Personalizador. No
 * lleva ni clase ni enlace en el HTML que escribe el tema; el enlace se le
 * pone desde PHP y la forma, desde aquí.
 */
.cb-block-description button,
.block-description button:not([class]) {
	min-height: var(--cb-btn-alto);
	padding: var(--cb-btn-pad-y) var(--cb-btn-pad-x);
	border: var(--cb-btn-borde) solid var(--cb-btn-solido-borde);
	border-radius: var(--cb-btn-radio);
	background-color: var(--cb-btn-solido-fondo);
	color: var(--cb-btn-solido-texto);
	font-family: inherit;
	font-size: var(--cb-btn-fs);
	font-weight: var(--cb-btn-peso);
	cursor: pointer;
}


/* ==========================================================================
   6. Enlaces
   ========================================================================== */

/*
 * El enlace del cuerpo del texto. Se marca con color Y con subrayado: el
 * color solo no vale, porque quien no distingue el azul del blanco se queda
 * sin saber dónde puede pulsar.
 *
 * Las exclusiones van dentro de `:where()`, que no suma especificidad: la
 * regla se queda en (0,2,1). Es a propósito. La que había antes en
 * `criticabits-single.css` llegaba a (0,4,2) por encadenar cinco `:not()`, y
 * cualquier hoja de página que quisiera un enlace de otro color tenía que
 * repetir la cadena de ascendientes hasta superarla. Con la hoja del sistema
 * cargada la última, basta con ir baja: gana los empates por orden y se deja
 * ganar por cualquier regla que de verdad sea más concreta.
 */
.cb-article .entry-content a:not(:where(.wp-block-button__link, .wp-element-button, [class*="cb-btn"], [class*="boton"], [class*="button-"])),
.cb-enlace {
	color: var(--cb-enlace);
	text-decoration: underline;
	text-decoration-thickness: var(--cb-enlace-grosor);
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-underline-offset: var(--cb-enlace-salto);
	/* El subrayado se abre para dejar pasar las colas de las letras. */
	text-decoration-skip-ink: auto;
	border-radius: var(--cb-radio-xs);
	transition:
		color var(--cb-fast, 140ms) var(--cb-ease, ease),
		text-decoration-color var(--cb-fast, 140ms) var(--cb-ease, ease),
		text-decoration-thickness var(--cb-fast, 140ms) var(--cb-ease, ease);
}

.cb-article .entry-content a:not(:where(.wp-block-button__link, .wp-element-button, [class*="cb-btn"], [class*="boton"], [class*="button-"])):hover,
.cb-article .entry-content a:not(:where(.wp-block-button__link, .wp-element-button, [class*="cb-btn"], [class*="boton"], [class*="button-"])):focus-visible,
.cb-enlace:hover,
.cb-enlace:focus-visible {
	color: var(--cb-enlace-activo);
	text-decoration-color: currentColor;
	text-decoration-thickness: var(--cb-enlace-grosor-activo);
}

.cb-article .entry-content a:not(:where(.wp-block-button__link, .wp-element-button, [class*="cb-btn"], [class*="boton"], [class*="button-"])):focus-visible,
.cb-enlace:focus-visible {
	outline: var(--cb-foco-grosor) solid var(--cb-foco-color);
	outline-offset: var(--cb-foco-aire);
	text-decoration: none;
}

/*
 * Enlace que hace de titular.
 *
 * En las rejillas de tarjetas —las secciones de la página del equipo, por
 * ejemplo— el nombre va dentro de un `a`, pero no es un enlace dentro de un
 * texto: es el título de la tarjeta, y toda la tarjeta responde al ratón. Ahí
 * el subrayado no informa de nada y parte el nombre en dos.
 */
.cb-article .entry-content .cb-eq-secciones li a,
.cb-article .entry-content .cb-enlace-titular,
.cb-article .entry-content h1 a,
.cb-article .entry-content h2 a,
.cb-article .entry-content h3 a,
.cb-article .entry-content h4 a {
	color: #fff;
	text-decoration: none;
}

.cb-article .entry-content .cb-eq-secciones li a:hover,
.cb-article .entry-content .cb-enlace-titular:hover,
.cb-article .entry-content h2 a:hover,
.cb-article .entry-content h3 a:hover {
	color: var(--cb-enlace);
}

/* ==========================================================================
   7. Campos de formulario
   --------------------------------------------------------------------------
   Misma altura y mismo radio que los botones: un campo y el botón que lo
   acompaña tienen que casar sin ajustes a ojo.
   ========================================================================== */

.cb-campo {
	display: block;
	width: 100%;
	min-height: var(--cb-campo-alto);
	padding: .55rem var(--cb-campo-pad-x);
	border: 1px solid var(--cb-campo-borde);
	border-radius: var(--cb-campo-radio);
	background-color: var(--cb-campo-fondo);
	color: var(--cb-campo-texto);
	font-family: inherit;
	font-size: .9375rem;
	line-height: 1.4;
	transition:
		border-color var(--cb-fast, 140ms) var(--cb-ease, ease),
		background-color var(--cb-fast, 140ms) var(--cb-ease, ease);
}

.cb-campo::placeholder {
	color: var(--cb-campo-marcador);
	opacity: 1;
}

.cb-campo:focus-visible {
	border-color: var(--cb-campo-borde-foco);
}

textarea.cb-campo {
	min-height: 8rem;
	resize: vertical;
}

.cb-campo[aria-invalid="true"] {
	border-color: var(--cb-neon-pink, #ff005e);
}

/* Etiqueta y pie de ayuda, para que un campo suelto no haya que maquetarlo. */
.cb-campo-grupo {
	display: grid;
	gap: .35rem;
	margin-bottom: 1rem;
}

/*
 * El tema pone margen vertical a `label` y a `p` dentro de los formularios.
 * Sumado al `gap` de la rejilla, la etiqueta quedaba a 40 px de su campo y
 * más cerca del campo de arriba que del suyo.
 */
.cb-campo-grupo > * {
	margin: 0;
}

.cb-campo-etiqueta {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

.cb-campo-ayuda {
	font-size: .8125rem;
	color: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   8. Tablas
   --------------------------------------------------------------------------
   El estilo «rayas» de Gutenberg pinta las filas impares de `#f0f0f0` —está
   escrito a pelo en `style.min.css` del núcleo y otra vez en el
   `gutenberg.css` del tema— y este sitio es oscuro por decisión: el
   interruptor de modo claro está desactivado desde `accessibility.php`. El
   resultado, medido en la comparativa técnica de Turrican II: texto blanco al
   90 % sobre #f0f0f0, o sea 1,09:1. Las filas «Amiga» y «Atari ST» no se
   leían.

   La raya se invierte —blanco al 4 % sobre el fondo del artículo— y se
   aprovecha para dar a todas las tablas el mismo relleno, el mismo filete y
   la misma cabecera, que hasta ahora dependía de qué estilo tuviera puesto el
   bloque.
   ========================================================================== */

.entry-content .wp-block-table table,
.entry-content > table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: .95rem;
}

.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	padding: var(--cb-tabla-pad-y) var(--cb-tabla-pad-x);
	border: 0;
	border-bottom: 1px solid var(--cb-tabla-borde);
	text-align: left;
	vertical-align: middle;
}

.entry-content .wp-block-table thead th {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cb-tabla-cabecera);
	border-bottom: 0;
}

/*
 * El filete bajo la cabecera.
 *
 * Va en `thead` y no en cada `th` por dos razones. Una, que el tema declara
 * `thead { border-bottom: 3px solid }` sin color, o sea `currentColor`: salía
 * una raya blanca de tres píxeles de lado a lado, que era lo más llamativo de
 * la tabla. Y dos, que `border-image` no se pinta sobre bordes colapsados, así
 * que el degradado del sitio no llegaba a verse; como fondo de la fila sí, y
 * además se dibuja una sola vez de punta a punta en lugar de partirse en
 * cuatro trozos, uno por columna.
 */
.entry-content .wp-block-table thead {
	border-bottom: 0;
	background-image: var(--cb-rule);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 2px;
}

.entry-content .wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

/*
 * La raya, del derecho.
 *
 * El selector repite el del núcleo y le añade `.entry-content` para no
 * depender sólo del orden de carga: aquella regla llega con (0,3,2) desde dos
 * hojas distintas y ésta suma una clase más.
 */
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(2n+1),
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--cb-tabla-cebra);
}

.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(2n),
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
	background-color: transparent;
}

/* Con la raya no hacen falta filetes en cada fila: se duplicaba la señal. */
.entry-content .wp-block-table.is-style-stripes th,
.entry-content .wp-block-table.is-style-stripes td {
	border-bottom: 0;
}

.entry-content .wp-block-table.is-style-stripes thead th {
	border-bottom: 0;
}

/*
 * Las tablas se salen de la columna en cuanto tienen cuatro columnas y una
 * pantalla estrecha. Se desplazan dentro de su propia caja y nunca arrastran
 * la página, y el borde redondeado deja claro dónde acaba la caja.
 *
 * El marco va en la figura y no en la `table`: el núcleo le pone a la figura
 * de «rayas» un borde de `#f0f0f0` y el tema otro violeta a la tabla, así que
 * se veían dos marcos, uno redondeado y otro con esquinas vivas dentro.
 */
.entry-content .wp-block-table,
.entry-content .wp-block-table.is-style-stripes {
	overflow-x: auto;
	border: 1px solid var(--cb-tabla-borde);
	border-radius: var(--cb-radio-m);
}


/* ==========================================================================
   8. Movimiento reducido
   ========================================================================== */

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

	.cb-btn,
	.wp-block-button > .wp-block-button__link {
		transition: none;
	}

	.cb-btn:active,
	.wp-block-button > .wp-block-button__link:active {
		transform: none;
	}

	.cb-btn--primario:hover::after,
	.cb-btn--primario:focus-visible::after,
	.wp-block-button.is-style-cb-neon:not([class*="boton"]):not([class*="button-"]) > .wp-block-button__link:hover::after {
		animation: none;
	}

	.cb-btn[aria-busy="true"]::before {
		animation-duration: 2s;
	}
}


/* ==========================================================================
   9. Declaración de afiliación
   --------------------------------------------------------------------------
   La pinta `inc/criticabits/salvaguardas.php` delante del primer enlace de
   compra. Tiene que verse: una declaración que pasa desapercibida no ha
   declarado nada. Pero tampoco puede gritar más que el texto del análisis, así
   que va con el peso de una nota al margen y el color de la marca en el
   rótulo.
   ========================================================================== */

.cb-article .entry-content .cb-afiliacion {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .55rem;
	margin-block: var(--cb-s6, 2.5rem) var(--cb-s4, 1.25rem);
	padding: .8rem 1rem;
	border: 1px solid var(--cb-hairline, rgba(255, 255, 255, .09));
	border-left: 3px solid var(--cb-neon-amber, #ffb14f);
	border-radius: var(--cb-radio-s, 8px);
	background: rgba(255, 177, 79, .06);
	font-size: .8125rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .72);
}

.cb-article .entry-content .cb-afiliacion__marca {
	flex: 0 0 auto;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cb-neon-amber, #ffb14f);
}


/* ==========================================================================
   10. Las fichas del tema padre, atadas a las nuestras
   --------------------------------------------------------------------------
   El tema declara cinco variables de radio en `style.css` y de ellas salen la
   mayoría de las esquinas del sitio: `--default-border-radius: 5px` gobierna
   66 elementos en una sola entrada, y `--button-border-radius: 100px` otros
   27. Ninguno de los dos valores estaba en la escala documentada, así que la
   guía decía una cosa y el sitio pintaba otra.

   No se tocan sus declaraciones —son del tema y una actualización las
   devolvería—: se redefinen aquí, que es la hoja que va la última. Con estas
   cinco líneas, dieciséis formas de redondear una esquina se quedan en las
   cinco de la ficha.
   ========================================================================== */

:root {
	--default-border-radius: var(--cb-radio-s);
	--post-thumbnail-border-radius: var(--cb-radio-s);
	--input-border-radius: var(--cb-campo-radio);
	/*
	 * Los botones del tema dejan de ser pastillas de 100 px. La pastilla sigue
	 * existiendo en la suite —`.cb-btn--pastilla`— para cuando se quiera a
	 * propósito, que es distinto de que sea el valor por defecto.
	 */
	--button-border-radius: var(--cb-btn-radio);
}


/* ==========================================================================
   11. El botón de compra
   --------------------------------------------------------------------------
   Es el botón que da de comer al sitio y era el único que vivía fuera del
   sistema. Se llamaba `.button-77` —el número de un botón de una galería de
   CSS de internet, pegado en el Personalizador— y llegaba con 100 líneas
   propias: radio de 80 px (un séptimo radio, en ninguna ficha), alto de 64 px,
   texto a 28 px (más grande que un h3), el degradado pintado en un `::after`
   del div padre y un `color: #fff !important` que ya se había tenido que
   corregir dos veces por contraste —1,11:1 y 1,56:1 medidos en su día—.

   Sigue siendo ámbar, y a propósito: el color es lo que avisa de que ese
   enlace lleva a una tienda, y eso hay que conservarlo. Lo que cambia es todo
   lo demás: alto, radio, cuerpo y peso salen de la ficha, como cualquier otro
   botón del sitio.

   El ámbar es `--cb-neon-amber`, el de la marca, en vez del `#ffc626 → #f99813`
   que venía de la galería. Con tinta oscura da 11,1:1 sobre el extremo claro y
   8,0:1 sobre el oscuro, medido con la fórmula WCAG.
   ========================================================================== */

.cb-article .entry-content .wp-block-button.button-77 > a[href],
.cb-article .entry-content .wp-block-button[class*="amazon"] > a[href],
.cb-article .entry-content a.boton-amazon,
.cb-article .entry-content a.button-85,
/* Con `.cb-article .entry-content` delante porque `criticabits-single.css`
   pinta de blanco todo `a[class*="btn"]` con (0,3,1) y la clase suelta se
   quedaba en (0,1,0): el rótulo salía blanco sobre ámbar, 1,53:1. */
.cb-article .entry-content a.cb-btn--compra,
.cb-btn--compra {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cb-btn-gap);
	width: 100%;
	min-height: var(--cb-btn-alto-l);
	padding: var(--cb-btn-pad-y) var(--cb-btn-pad-x-l);
	border: 0;
	border-radius: var(--cb-btn-radio);
	background: linear-gradient(100deg, #ffc95e, var(--cb-neon-amber, #ffb14f));
	color: #1a1206;
	font-family: inherit;
	font-size: var(--cb-btn-fs-l);
	font-weight: 700;
	letter-spacing: var(--cb-btn-tracking);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	box-shadow: 0 10px 30px -14px rgba(255, 177, 79, .9);
	transition:
		box-shadow var(--cb-base, 260ms) var(--cb-ease, ease),
		transform var(--cb-fast, 140ms) var(--cb-ease-out, ease);
}

.cb-article .entry-content .wp-block-button.button-77 > a[href]:hover,
.cb-article .entry-content .wp-block-button[class*="amazon"] > a[href]:hover,
.cb-article .entry-content a.cb-btn--compra:hover,
.cb-btn--compra:hover {
	box-shadow: 0 14px 38px -14px rgba(255, 177, 79, 1);
	color: #1a1206;
}

.cb-article .entry-content .wp-block-button.button-77 > a[href]:active,
.cb-btn--compra:active {
	transform: translateY(1px);
}

/*
 * El degradado iba en un `::after` del div padre, con `inset: 4px` y una
 * transición que lo hacía crecer al pasar por encima. Ahora el fondo lo lleva
 * el propio enlace, así que esos pseudoelementos sobran: si se quedaran,
 * pintarían un segundo rectángulo ámbar por detrás.
 */
.cb-article .entry-content .wp-block-button.button-77::before,
.cb-article .entry-content .wp-block-button.button-77::after {
	content: none;
}


/* ==========================================================================
   12. Los enlaces del aviso de cookies
   --------------------------------------------------------------------------
   Salían en `rgb(0, 115, 170)`, el azul por defecto de WordPress: el único
   color del sitio que no pertenece a ninguna paleta, y está en el primer
   elemento que ve cualquier visitante nuevo. Medido sobre el fondo del aviso
   —`rgb(10, 8, 22)`—: 3,81:1, por debajo del mínimo.

   Se pasa al azul de enlace del sistema, que sobre ese mismo fondo da 12,1:1.
   ========================================================================== */

.css-consent-banner a,
.css-consent-banner a:visited,
#cookie-law-info-bar a,
.cli-bar-message a {
	color: var(--cb-enlace, #7fd4ff);
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.css-consent-banner a:hover,
.css-consent-banner a:focus-visible {
	color: #fff;
	text-decoration-color: currentColor;
}

/*
 * Y los tres botones del aviso, al objetivo táctil mínimo. Medían 34 px de
 * alto los tres —«Aceptar todo», «Rechazar todo» y «Gestionar preferencias»—,
 * y son lo primero que se toca en el sitio.
 */
.css-consent-banner button,
.css-consent-banner .css-consent-btn {
	min-height: var(--cb-btn-alto, 2.75rem);
	border-radius: var(--cb-btn-radio, 10px);
}