@charset "UTF-8";
/* ==========================================================================
   CriticaBits — la columna lateral
   --------------------------------------------------------------------------
   La barra lateral heredada era una pila de widgets sin relación entre sí:
   cada uno con su tipografía, su margen y su idea de lo que es un título.
   Aquí se le da una sola gramática —panel, filo de acento, rótulo de
   sección, cuerpo— y un color por familia, de modo que se distinga de un
   vistazo qué se está mirando sin tener que leerlo.

   ÍNDICE
     1. El panel: gramática común
     2. Índice de lectura
     2. Newsletter
     3. Lo + Visto
     5. Sectores
     4. Redes sociales
     5. Adaptación a pantallas pequeñas
   ========================================================================== */

/* ==========================================================================
   1. El panel: gramática común
   ========================================================================== */

.cb-aside {
	--cb-panel-pad: 1.4rem;
}

/* El contenedor pegajoso ya es una columna flexible, así que el orden de
   los paneles se decide con `order` (lo pone aside.php) y no tocando la
   configuración de widgets del escritorio.

   Y no lleva desplazamiento propio. El tema la declaraba `sticky` con
   `top`, y una columna más alta que la ventana declarada así se queda
   clavada en cuanto se empieza a bajar: de la newsletter para abajo no
   se llegaba nunca. Acotarla al alto de la ventana lo resolvía, pero a
   costa de meter una segunda barra de desplazamiento dentro de la
   página —y de recortar contra el borde de la caja el punto de la
   sección en curso—. El artículo es largo de sobra: la columna baja con
   la página, entera y sin recortes. */
.cb-aside .aside-sticky-container {
	position: static;
	max-height: none;
	overflow: visible;
	gap: 1.5rem;
}

/* Cada panel conserva su alto: en una columna flexible los hijos se
   encogen por defecto, y bastaba con que algo acotara el contenedor
   para que la columna entera quedara aplastada. */
.cb-aside .aside-sticky-container > * {
	flex: 0 0 auto;
}

:is(.cb-aside .widget, .cb-toc-panel--moved) {
	position: relative;
	margin: 0;
	padding: var(--cb-panel-pad);
	border: 1px solid var(--cb-hairline);
	border-radius: 6px;
	overflow: hidden;
	background:
		linear-gradient(165deg, rgba(24, 29, 46, .82), rgba(12, 15, 26, .92));
	box-shadow: var(--cb-shadow-1);
	transition:
		border-color var(--cb-base) var(--cb-ease),
		box-shadow var(--cb-base) var(--cb-ease),
		transform var(--cb-base) var(--cb-ease-out);
}

/* Un color por familia de panel. Es la única señal que distingue el
   índice de la newsletter cuando se recorre la columna de reojo. */
/* El orden lo reparte aside.php con una clase por ranura. Los widgets
   de bloque —el del índice entre ellos— se quedan sin ella, es decir en
   0, y por tanto arriba. */
.cb-aside .cb-slot-20 { order: 20; }
.cb-aside .cb-slot-30 { order: 30; }
.cb-aside .cb-slot-40 { order: 40; }
.cb-aside .cb-slot-50 { order: 50; }

:is(.cb-aside .widget, .cb-toc-panel--moved) { --cb-accent: var(--cb-neon-cyan); }
.cb-aside .cb-side--news { --cb-accent: var(--cb-neon-pink); }
.cb-aside .cb01_posts_widget { --cb-accent: var(--cb-neon-amber); }
.cb-aside .cb-side--sectors { --cb-accent: var(--cb-neon-violet); }
.cb-aside .cb01_social_widget { --cb-accent: var(--cb-neon-aqua); }

/* Filo de acento a la izquierda: apagado en reposo, encendido al pasar
   por encima. Es lo que convierte cinco cajas en una consola. */
:is(.cb-aside .widget, .cb-toc-panel--moved)::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	background: var(--cb-accent);
	opacity: .38;
	transition: opacity var(--cb-base) var(--cb-ease), box-shadow var(--cb-base) var(--cb-ease);
}

:is(.cb-aside .widget, .cb-toc-panel--moved):hover {
	border-color: var(--cb-hairline-strong);
	box-shadow: var(--cb-shadow-2);
}

:is(.cb-aside .widget, .cb-toc-panel--moved):hover::before {
	opacity: 1;
	box-shadow: 0 0 14px -1px var(--cb-accent);
}

/* --- Rótulo del panel ---------------------------------------------------- */

:is(.cb-aside, .cb-toc-panel--moved) .widget-title {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 .2rem;
	padding: 0;
	border: 0;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .78rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #fff;
}

:is(.cb-aside, .cb-toc-panel--moved) .widget-title::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: var(--cb-accent);
	box-shadow: 0 0 8px -1px var(--cb-accent);
}

:is(.cb-aside, .cb-toc-panel--moved) .widget-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, var(--cb-hairline), transparent);
}

/* La bajada es la que separa el rótulo del cuerpo, con la línea de puntos
   de un documento técnico. */
:is(.cb-aside, .cb-toc-panel--moved) .widget-subtitle {
	margin: 0 0 1rem;
	padding: 0 0 .85rem;
	border-bottom: 1px dashed rgba(255, 255, 255, .1);
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .78rem;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .48);
}

/* ==========================================================================
   2. Newsletter
   ========================================================================== */

/* `.widget p` de style.css pesa (0,1,1) y ganaba a estos dos párrafos,
   que iban a (0,1,0): el color de la casa —blanco al 72 % y al 40 %— se
   perdía y ambos salían en el gris plano #94979e del tema, con lo que
   el reclamo y la letra pequeña acababan del mismo color. */
.cb-aside .cb-news__pitch {
	margin: 0 0 1rem;
	font-size: .88rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .72);
}

.cb-news .mc4wp-form-fields p {
	margin: 0 0 .6rem;
}

.cb-news .mc4wp-form-fields p:last-child {
	margin-bottom: 0;
}

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

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

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

.cb-news input[type="submit"] {
	width: 100%;
	margin: 0;
	padding: .85rem 1rem;
	border: 0;
	/* Con `!important`, y no hay otra: el CSS del Personalizador imprime
	   `input[type="submit"] { border-radius: 0 5px 5px 0 !important }`,
	   pensado para un buscador con el campo pegado al botón. Aquí el
	   botón va suelto y salía con dos esquinas vivas y dos redondeadas. */
	border-radius: 4px !important;
	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: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform var(--cb-fast) var(--cb-ease-out), box-shadow var(--cb-base) var(--cb-ease), filter var(--cb-fast) var(--cb-ease);
}

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

.cb-aside .cb-news__fine {
	margin: .85rem 0 0;
	font-size: .7rem;
	letter-spacing: .04em;
	/* Al 40 % este renglón de 11,2 px se quedaba en 3,8:1 sobre el fondo
	   del panel, por debajo del 4,5:1 que pide texto pequeño. */
	color: rgba(255, 255, 255, .54);
}

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

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

/* ==========================================================================
   3. Lo + Visto
   --------------------------------------------------------------------------
   Era una lista de titulares sin más. Con el puesto delante se lee como
   una clasificación, que es lo que en realidad es, y eso da una razón
   para entrar: no «otro artículo» sino «el más leído».
   ========================================================================== */

.cb-aside .cb01-posts-widget {
	counter-reset: cb-rank;
	display: block;
}

/* `.post-grid` va pegado a `.cb01-posts-widget` porque es el mismo
   elemento, no un descendiente. Hace falta para empatar a (0,4,0) con
   `.widget.cb01_posts_widget .post-grid.has-post-thumbnails .article` de
   style.css, que dejaba estas filas sin aire vertical —medido: padding
   0 en las cinco—, pegadas a su línea de puntos. */
.cb-aside .cb01-posts-widget.post-grid .article {
	counter-increment: cb-rank;
	margin: 0;
	padding: .95rem 0;
	border-top: 1px dashed rgba(255, 255, 255, .09);
}

.cb-aside .cb01-posts-widget.post-grid .article:first-child {
	padding-top: 0;
	border-top: 0;
}

.cb-aside .cb01-posts-widget.post-grid .article:last-child {
	padding-bottom: 0;
}

.cb-aside .cb01-posts-widget .article .thumbnail-wrapper {
	position: relative;
	margin: 0;
	border-radius: 4px;
	overflow: hidden;
}

.cb-aside .cb01-posts-widget .post-thumbnail,
.cb-aside .cb01-posts-widget .post-thumbnail > a {
	display: block;
	margin: 0;
	height: 100%;
}

.cb-aside .cb01-posts-widget img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cb-slow) var(--cb-ease-out);
}

.cb-aside .cb01-posts-widget .article:hover img {
	transform: scale(1.06);
}

/* El plugin ya pintaba un puesto propio, un número enorme centrado sobre
   la miniatura… que además salía «01» en las cinco entradas. Se retira y
   se queda el de aquí, que sí cuenta. */
.cb-aside .widget.cb01_posts_widget .post-grid.show-post-count .article::before {
	content: none;
	display: none;
}

/* El puesto, sobre la miniatura. */
.cb-aside .cb01-posts-widget .thumbnail-wrapper::after {
	content: counter(cb-rank, decimal-leading-zero);
	position: absolute;
	left: 0;
	bottom: 0;
	padding: .2rem .45rem;
	background: rgba(8, 10, 18, .88);
	border-top-right-radius: 4px;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
	color: var(--cb-neon-amber);
}

/* La primera entrada manda: imagen ancha y titular mayor. */
.cb-aside .cb01-posts-widget .first-grid .thumbnail-wrapper {
	aspect-ratio: 16 / 9;
	margin-bottom: .7rem;
}

/* Con `.article` delante para no perder contra la regla general de
   arriba, que ahora también son cuatro clases. */
.cb-aside .cb01-posts-widget .article.first-grid .entry-title {
	font-size: 1rem;
	line-height: 1.35;
}

/* Las demás, en fila: miniatura cuadrada y titular a dos líneas. */
.cb-aside .cb01-posts-widget.post-grid .article:not(.first-grid) .post-inner {
	display: grid;
	grid-template-columns: 66px minmax(0, 1fr);
	gap: .8rem;
	align-items: start;
}

.cb-aside .cb01-posts-widget.post-grid .article:not(.first-grid) .thumbnail-wrapper {
	aspect-ratio: 1;
}

/* `.widget.cb01_posts_widget .article .entry-title` de style.css son
   cuatro clases y ganaba a las tres de aquí: los titulares de las filas
   pequeñas salían a 16 px y peso 600 en vez de 14 px y 700, y por eso
   se iban a tres líneas dentro de una miniatura de 66 px. */
.cb-aside .cb01-posts-widget .article .entry-title {
	margin: 0;
	font-size: .88rem;
	font-weight: 700;
	line-height: 1.4;
}

/* style.css reserva a los titulares de las filas con miniatura un
   selector de nueve clases —`.widget.cb01_posts_widget
   .post-grid[class*="list"].show-post-count
   .article:not(.cover):not(.first-grid) .entry-title`— y los ponía a
   18 px: más grandes que los 16 px de la entrada destacada que tienen
   justo encima, con la jerarquía del panel invertida y el titular
   partido en tres líneas junto a una miniatura de 66 px. Se copia la
   forma del selector para empatar y ganar por orden. */
.cb-aside .cb01-posts-widget.post-grid[class*="list"].show-post-count .article:not(.cover):not(.first-grid) .entry-title,
.cb-aside .cb01-posts-widget.post-grid[class*="list"] .article.has-post-media:not(.cover):not(.first-grid) .entry-title {
	font-size: .88rem;
}

/* El relleno inferior lo anulaba `.widget.cb01_posts_widget
   .post-grid.has-post-thumbnails .article` con cinco clases: las filas
   se quedaban con aire sólo por arriba y el «2.1k Visualizaciones» de
   cada una caía pegado a la miniatura de la siguiente. */
.cb-aside .cb01-posts-widget.post-grid.has-post-thumbnails .article {
	padding-bottom: .95rem;
}

.cb-aside .cb01-posts-widget.post-grid.has-post-thumbnails .article:last-child {
	padding-bottom: 0;
}

.cb-aside .cb01-posts-widget .article .entry-title a {
	color: rgba(255, 255, 255, .88);
	text-decoration: none;
	background: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color var(--cb-fast) var(--cb-ease);
}

.cb-aside .cb01-posts-widget .article:hover .entry-title a,
.cb-aside .cb01-posts-widget .article .entry-title a:hover {
	color: var(--cb-neon-amber);
}

.cb-aside .cb01-posts-widget .entry-meta {
	margin: .35rem 0 0;
}

.cb-aside .cb01-posts-widget .post-meta {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: .5rem;
	font-size: .7rem;
	letter-spacing: .04em;
	/* .42 sobre el panel daba 4,08:1, por debajo del mínimo legible. */
	color: rgba(255, 255, 255, .56);
}

/* El selector del tema para este número lleva un atributo
   (`[data-order-by="post_views"]`) y suma (0,4,0): el «2.1k» salía en
   blanco puro, más fuerte que el titular al que acompaña. */
.cb-aside .cb01-posts-widget .post-meta .cb01-view-count .count {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .68);
}

/* ==========================================================================
   4. Redes sociales
   ========================================================================== */

.cb-aside .cb01-social-icons-wrapper {
	margin: 0;
}

.cb-aside .cb01-social-icons-wrapper .cb01-social-icons {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cb-aside .cb01-social-icon {
	margin: 0;
	padding: 0;
}

.cb-aside .cb01-social-icon a {
	display: flex;
	/* El tema lo declara row-reverse con space-between, que mandaba el
	   icono al extremo opuesto del texto al que acompaña. */
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: .8rem;
	width: 100%;
	padding: .75rem .9rem;
	border: 1px solid var(--cb-hairline);
	border-radius: 4px;
	background: rgba(0, 0, 0, .28);
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
	transition:
		border-color var(--cb-fast) var(--cb-ease),
		background-color var(--cb-fast) var(--cb-ease),
		transform var(--cb-fast) var(--cb-ease-out);
}

.cb-aside .cb01-social-icon a:hover {
	border-color: var(--cb-neon-aqua);
	background: rgba(0, 255, 255, .07);
	transform: translateY(-1px);
	color: #fff;
}

/* El icono lo pinta el tema en el ::before del enlace, pero con el
   nombre reordenado acababa a la derecha del todo, separado del texto
   al que acompaña. Vuelve a su sitio. */
/* El plugin invierte la fila —row-reverse con space-between— sólo dentro
   de .sidebar, y con cinco clases de especificidad. Se deshace con la
   misma forma del selector para no recurrir a !important. */
.cb-aside .cb01-social-icons-wrapper .cb01-social-icons.has-text .cb01-social-icon a,
.cb-aside .cb01-social-icons-wrapper .cb01-social-icons.has-text.icon-background .cb01-social-icon a,
.cb-aside .cb01-social-icons-wrapper .cb01-social-icons.has-text.icon-border .cb01-social-icon a {
	flex-direction: row;
	justify-content: flex-start;
	gap: .8rem;
	width: 100%;
	height: auto;
	/* El mismo selector de cinco clases se lleva también el relleno, el
	   radio y el color: `.sidebar .cb01-social-icons-wrapper
	   .cb01-social-icons .cb01-social-icon a` impone `padding: 1rem` a
	   (0,4,1) y dejaba la tarjeta con 16 px por los cuatro lados —más
	   alta que ancha de aire— y el radio en 5 px, el único del panel que
	   no era 4. */
	padding: .75rem .9rem;
	border-radius: 4px;
	color: rgba(255, 255, 255, .85);
}

/* El orden lo fija flex-direction; aquí sólo se le quita el cuadro de
   fondo y se le da el color de acento. */
.cb-aside .cb01-social-icon a::before {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	background: none;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--cb-accent);
}

.cb-aside .cb01-social-name {
	order: 0;
	flex: 1 1 auto;
	min-width: 0;
}

/* El nombre y el «Síguenos en» vienen en el mismo span y en ese orden;
   invirtiendo la columna, la coletilla queda encima como corresponde. */
.cb-aside .cb01-social-name {
	display: flex;
	flex-direction: column-reverse;
	gap: .1rem;
	font-family: var(--body-font, "Plus Jakarta Sans", sans-serif);
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.2;
}

/* `.sidebar .cb01-social-icons.has-text .cb01-social-subtext` y
   `.cb01-social-icons.brand.icon-background .cb01-social-subtext` son
   (0,4,0) las dos y ganaban a las dos clases de aquí: el «Síguenos en»
   salía a 13 px, en redonda y en blanco puro, o sea con el mismo peso
   visual que el nombre de la red al que acompaña. */
.cb-aside .cb01-social-icons .cb01-social-icon .cb01-social-name {
	font-size: .92rem;
}

.cb-aside .cb01-social-icons .cb01-social-icon .cb01-social-subtext {
	font-size: .68rem;
	font-style: normal;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	/* Igual que la letra pequeña del boletín: al 42 % eran 3,95:1 a
	   10,9 px. */
	color: rgba(255, 255, 255, .54);
}

/* ==========================================================================
   5. Adaptación a pantallas pequeñas
   ========================================================================== */

/* En tableta la columna cae debajo del artículo a lo ancho: dos paneles
   por fila aprovechan el hueco en lugar de dejar una tira de un solo
   panel de medio kilómetro. */
@media (min-width: 783px) and (max-width: 1199px) {

	.cb-aside .aside-sticky-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 1.25rem;
	}
}

@media (max-width: 782px) {

	.cb-aside .widget {
		padding: 1.15rem 1.1rem;
	}

	.cb-aside .cb01-posts-widget .article:not(.first-grid) .post-inner {
		grid-template-columns: 58px minmax(0, 1fr);
	}
}

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

	.cb-aside .cb01-posts-widget img {
		transition: none;
	}
}

/* Medido en móvil y tableta: los titulares de «Lo + Visto» daban 43 px de
   alto pulsable. Un píxel por debajo del mínimo, que en un dedo se nota. */
@media (max-width: 1023px) {

	.cb-aside .cb01-posts-widget .entry-title a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}