/* ==========================================================================
   Tema Rekium — lo que theme.json no sabe expresar.

   Regla de la casa: aquí NO se escriben colores a mano. Se usan las variables
   que genera theme.json (--wp--preset--color--*), para que cambiar la paleta
   en un sitio la cambie en todos. Las únicas excepciones son los rgba() con
   transparencia, que theme.json no sabe producir desde un token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. EL VACÍO
   El fondo no es negro plano: lleva dos capas de estrellas muy tenues y un
   velo cian cayendo desde arriba. Cuesta cero peticiones y quita la sensación
   de cartón negro que tienen las webs oscuras mal hechas.
   -------------------------------------------------------------------------- */

body {
	background-image:
		radial-gradient( 1px 1px at 20% 30%, rgba( 255, 255, 255, 0.16 ) 50%, transparent 50% ),
		radial-gradient( 1px 1px at 75% 12%, rgba( 255, 255, 255, 0.11 ) 50%, transparent 50% ),
		radial-gradient( 1200px 620px at 50% -12%, rgba( 13, 166, 220, 0.08 ), transparent 70% );
	background-repeat: repeat, repeat, no-repeat;
	background-size: 150px 150px, 230px 230px, 100% 920px;
	background-attachment: fixed, fixed, scroll;
}

/* --------------------------------------------------------------------------
   2. PIEZAS SUELTAS
   -------------------------------------------------------------------------- */

/* Rótulo de sección. El sitio actual usa mayúsculas; se conservan, pero con
   el interletrado abierto, porque en mayúsculas apretadas se lee peor. */
.rk-rotulo {
	display: block;
	font-family: var( --wp--preset--font-family--titulares );
	font-size: var( --wp--preset--font-size--pequeno );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var( --wp--preset--color--cian );
	margin-block-end: 0.6rem;
}

/* Cifra grande. Ámbar y cifras tabulares: al refrescarse no baila el ancho.
   El ámbar para los números no es un capricho — es el color de los paneles de
   cotización desde que existen, y aquí separa de un vistazo lo que es dato de
   lo que es navegación (que va en cian). */
.rk-cifra {
	display: block;
	font-family: var( --wp--preset--font-family--titulares );
	font-size: var( --wp--preset--font-size--cifra );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var( --wp--preset--color--ambar );
}

.rk-cifra__pie {
	display: block;
	margin-block-start: 0.5rem;
	font-size: var( --wp--preset--font-size--pequeno );
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var( --wp--preset--color--texto-suave );
}

/* Tarjeta, con el filo superior encendido: un detalle que en EVE se reconoce
   al instante, porque las ventanas del juego llevan ese borde iluminado. */
.rk-tarjeta {
	position: relative;
	overflow: hidden;
	padding: var( --wp--preset--spacing--40 );
	background: var( --wp--preset--color--carta );
	border: 1px solid var( --wp--preset--color--borde );
	border-radius: 4px;
}

.rk-tarjeta::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var( --wp--preset--color--cian ) 35%,
		var( --wp--preset--color--cian ) 65%,
		transparent
	);
	opacity: 0.5;
}

/* Rejilla de cifras. auto-fit en vez de un número fijo de columnas: se
   reacomoda sola si mañana añadimos o quitamos una métrica. */
.rk-rejilla {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	gap: 1px;
	background: var( --wp--preset--color--borde );
	border: 1px solid var( --wp--preset--color--borde );
	border-radius: 4px;
	overflow: hidden;
}

.rk-rejilla > * {
	background: var( --wp--preset--color--carta );
	padding: var( --wp--preset--spacing--40 );
	margin: 0;
}

/* --------------------------------------------------------------------------
   3. VARIACIONES
   Subida, bajada, plana y sin dato. El «sin dato» es una raya, nunca un cero:
   un 0 % inventado parece un dato real y falso.
   -------------------------------------------------------------------------- */

.rk-delta--up    { color: var( --wp--preset--color--verde ); }
.rk-delta--down  { color: var( --wp--preset--color--rojo ); }
.rk-delta--flat  { color: var( --wp--preset--color--texto-suave ); }
.rk-delta--none  { color: var( --wp--preset--color--texto-suave ); opacity: 0.65; }

/* El color no puede ser la única señal: quien no distingue rojo de verde se
   queda sin la mitad del dato. Las flechas ▲▼ que ya pone el plugin cargan
   el significado, y aquí se les da aire para que no se pierdan. */
[class*='rk-delta--'] {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   4. ESTADO DEL SERVIDOR
   -------------------------------------------------------------------------- */

.rk-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	padding: 0.85rem var( --wp--preset--spacing--40 );
	background: var( --wp--preset--color--carta );
	border: 1px solid var( --wp--preset--color--borde );
	border-radius: 4px;
	font-size: var( --wp--preset--font-size--pequeno );
}

.rk-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --wp--preset--color--verde );
	box-shadow: 0 0 0 0 rgba( 79, 191, 123, 0.55 );
	animation: rk-latido 2.6s ease-out infinite;
	flex: none;
}

.rk-status--down .rk-status__dot {
	background: var( --wp--preset--color--rojo );
	box-shadow: 0 0 0 0 rgba( 224, 86, 79, 0.55 );
}

.rk-status__label {
	font-family: var( --wp--preset--font-family--titulares );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var( --wp--preset--color--contrast );
}

.rk-status__field {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
}

.rk-status__k {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var( --wp--preset--color--texto-suave );
}

.rk-status__v {
	font-family: var( --wp--preset--font-family--titulares );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var( --wp--preset--color--ambar );
}

/* El latido del punto verde es lo único que se mueve por sí solo en toda la
   página. Con eso basta: una web que se mueve entera no transmite vida, marea. */
@keyframes rk-latido {
	0%   { box-shadow: 0 0 0 0 rgba( 79, 191, 123, 0.5 ); }
	70%  { box-shadow: 0 0 0 7px rgba( 79, 191, 123, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 79, 191, 123, 0 ); }
}

/* --------------------------------------------------------------------------
   5. PANEL DE COTIZACIÓN (JITA)
   No es una cinta que corre. Es un tablero, como los de las bolsas de verdad:
   un texto en movimiento no se lee de un vistazo, y las normas de
   accesibilidad piden poder pararlo. Un tablero se lee y no hay nada que parar.
   -------------------------------------------------------------------------- */

/*
 * Rejilla, no flex.
 *
 * Con flex los ocho artículos se repartían 6 + 2 y la segunda fila quedaba
 * con dos celdas estiradas y un hueco enorme al lado. En un panel de
 * cotizaciones todas las casillas miden lo mismo: por eso son rejilla y por
 * eso son CUATRO columnas, que con ocho artículos dan dos filas exactas.
 */
.rk-tape {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	align-items: stretch;
	gap: 1px;
	background: var( --wp--preset--color--borde );
	border: 1px solid var( --wp--preset--color--borde );
	border-radius: 4px;
	overflow: hidden;
	font-size: var( --wp--preset--font-size--pequeno );
}

.rk-tape__tag {
	display: flex;
	align-items: center;
	padding: 0.7rem 1rem;
	background: var( --wp--preset--color--cian );
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--titulares );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

.rk-tape__item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		'nombre nombre'
		'precio delta';
	gap: 0.3rem 0.6rem;
	align-items: baseline;
	padding: 0.7rem 1rem;
	background: var( --wp--preset--color--carta );
}

.rk-tape__name {
	grid-area: nombre;
	color: var( --wp--preset--color--texto-suave );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	line-height: 1.3;
}

.rk-tape__price {
	grid-area: precio;
	font-family: var( --wp--preset--font-family--titulares );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var( --wp--preset--color--ambar );
	font-size: var( --wp--preset--font-size--base );
	line-height: 1;
}

.rk-tape__delta {
	grid-area: delta;
	font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   6. TABLA DE MERCADO
   -------------------------------------------------------------------------- */

.rk-market {
	width: 100%;
	border-collapse: collapse;
	font-size: var( --wp--preset--font-size--pequeno );
}

.rk-market th {
	text-align: left;
	padding: 0.7rem 0.9rem;
	font-family: var( --wp--preset--font-family--titulares );
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var( --wp--preset--color--texto-suave );
	border-bottom: 1px solid var( --wp--preset--color--cian );
}

.rk-market td {
	padding: 0.65rem 0.9rem;
	border-bottom: 1px solid var( --wp--preset--color--borde );
	color: var( --wp--preset--color--contrast );
}

.rk-market tr:last-child td {
	border-bottom: 0;
}

.rk-market .rk-num,
.rk-market th:not( :first-child ) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.rk-market .rk-num {
	font-family: var( --wp--preset--font-family--titulares );
	color: var( --wp--preset--color--ambar );
}

/* PLEX no cotiza en Jita: tiene su propio mercado global, sin importar dónde
   lo compres o lo vendas. La etiqueta lo dice en vez de disimularlo. */
.rk-market__global {
	display: inline-block;
	margin-inline-start: 0.4rem;
	padding: 0.1rem 0.4rem;
	border: 1px solid var( --wp--preset--color--cian );
	border-radius: 2px;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var( --wp--preset--color--cian );
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   7. NOTICIARIO
   -------------------------------------------------------------------------- */

.rk-wire {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: var( --wp--preset--color--borde );
	border: 1px solid var( --wp--preset--color--borde );
	border-radius: 4px;
	overflow: hidden;
}

.rk-wire__tag {
	display: flex;
	align-items: center;
	padding: 0.7rem 1rem;
	background: var( --wp--preset--color--ambar );
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--titulares );
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

.rk-wire__item {
	flex: 1 1 260px;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.8rem 1rem;
	background: var( --wp--preset--color--carta );
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.rk-wire__item:hover,
.rk-wire__item:focus-visible {
	background: var( --wp--preset--color--carta-alta );
	text-decoration: none;
}

.rk-wire__kind {
	font-family: var( --wp--preset--font-family--titulares );
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var( --wp--preset--color--cian );
}

.rk-wire__title {
	color: var( --wp--preset--color--contrast );
	font-size: var( --wp--preset--font-size--pequeno );
	line-height: 1.4;
}

.rk-wire__age {
	font-size: 0.6875rem;
	color: var( --wp--preset--color--texto-suave );
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. ÍNDICE REKIUM
   -------------------------------------------------------------------------- */

.rk-index {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
}

.rk-index__value {
	font-family: var( --wp--preset--font-family--titulares );
	font-size: var( --wp--preset--font-size--cifra );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var( --wp--preset--color--ambar );
}

.rk-index__delta {
	font-size: var( --wp--preset--font-size--pequeno );
}

/* --------------------------------------------------------------------------
   9. RETRATO HOLOGRÁFICO
   --------------------------------------------------------------------------

   FC solo publica el busto del personaje: de cabeza a hombros, sin cuerpo.
   En vez de disimular el recorte, lo convertimos en lo que es en el juego —
   una holotransmisión. El borde inferior se disuelve en líneas, y entonces
   nadie echa en falta unas piernas.

   Cuatro capas, dos elementos de marcado:
     · .rk-holo::before   fantasma rojo, desplazado a la izquierda
     · .rk-holo::after    fantasma cian, desplazado a la derecha
     · .rk-holo__fx::before  líneas de barrido
     · .rk-holo__fx::after   la pasada de brillo

   Los dos fantasmas usan el MISMO fichero que el <img>, así que el navegador
   lo descarga una sola vez. La imagen de verdad es el <img>, que es el que
   lleva el texto alternativo.

   El desfase de los fantasmas y el parpadeo comparten ciclo de 11 segundos,
   así que los canales se separan justo cuando la señal cae. Ese detalle es lo
   que lo hace parecer una transmisión inestable y no un GIF en bucle. */

.rk-holo {
	--rk-holo-retrato: none;

	position: relative;
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 0;
	aspect-ratio: 1;
	isolation: isolate;
	animation: rk-holo-deriva 7.5s ease-in-out infinite alternate;
}

/* El busto, teñido de cian y disuelto por abajo. El degradado de la máscara
   no baja a transparente de golpe: pasa por un tramo intermedio para que el
   corte no se note. */
.rk-holo__base {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
	filter:
		grayscale( 1 )
		sepia( 1 )
		hue-rotate( 155deg )
		saturate( 2.6 )
		brightness( 1.04 )
		contrast( 1.12 );
	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 52%,
		rgba( 0, 0, 0, 0.82 ) 70%,
		rgba( 0, 0, 0, 0.38 ) 86%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 52%,
		rgba( 0, 0, 0, 0.82 ) 70%,
		rgba( 0, 0, 0, 0.38 ) 86%,
		transparent 100%
	);
	animation: rk-holo-senal 11s steps( 1, end ) infinite;
}

/* Los dos fantasmas de color. Heredan la misma máscara que el busto para que
   se disuelvan con él. */
.rk-holo::before,
.rk-holo::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var( --rk-holo-retrato );
	background-size: cover;
	background-position: center;
	border-radius: 3px;
	mix-blend-mode: screen;
	pointer-events: none;
	-webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 52%, rgba( 0, 0, 0, 0.6 ) 76%, transparent 100% );
	mask-image: linear-gradient( to bottom, #000 0%, #000 52%, rgba( 0, 0, 0, 0.6 ) 76%, transparent 100% );
}

.rk-holo::before {
	z-index: 1;
	filter: grayscale( 1 ) sepia( 1 ) hue-rotate( -30deg ) saturate( 5 ) brightness( 0.8 );
	opacity: 0.4;
	animation: rk-holo-desfase-rojo 11s steps( 1, end ) infinite;
}

.rk-holo::after {
	z-index: 3;
	filter: grayscale( 1 ) sepia( 1 ) hue-rotate( 150deg ) saturate( 5 ) brightness( 0.8 );
	opacity: 0.32;
	animation: rk-holo-desfase-cian 11s steps( 1, end ) infinite;
}

/* Las dos capas de efecto van por encima de todo. */
.rk-holo__fx {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	border-radius: 3px;
	overflow: hidden;
}

/* Líneas de barrido. Se hacen más marcadas hacia abajo, así que la disolución
   del busto parece que se rompe en líneas en vez de desvanecerse sin más. */
.rk-holo__fx::before {
	content: '';
	position: absolute;
	inset: -100% 0;
	background-image: repeating-linear-gradient(
		to bottom,
		rgba( 13, 166, 220, 0.14 ) 0 1px,
		transparent 1px 3px
	);
	-webkit-mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0.35 ) 0%, rgba( 0, 0, 0, 0.8 ) 60%, #000 100% );
	mask-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0.35 ) 0%, rgba( 0, 0, 0, 0.8 ) 60%, #000 100% );
	animation: rk-holo-lineas 9s linear infinite;
}

/* La pasada de brillo. Está fuera de cuadro casi todo el ciclo y entra una
   sola vez: en bucle continuo cansa y deja de llamar la atención. */
.rk-holo__fx::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	height: 28%;
	top: -30%;
	background: linear-gradient(
		to bottom,
		transparent,
		rgba( 13, 166, 220, 0.12 ) 45%,
		rgba( 190, 240, 255, 0.16 ) 50%,
		rgba( 13, 166, 220, 0.12 ) 55%,
		transparent
	);
	animation: rk-holo-barrido 11s ease-in-out infinite;
}

@keyframes rk-holo-deriva {
	from { transform: translateY( -3px ); }
	to   { transform: translateY( 3px ); }
}

@keyframes rk-holo-lineas {
	from { transform: translateY( 0 ); }
	to   { transform: translateY( 3px ); }
}

/* La señal cae en tres momentos, a intervalos desiguales (17 %, 44 %, 79 %).
   Si fueran regulares el ojo aprendería el ritmo y dejaría de creerlo. */
@keyframes rk-holo-senal {
	0%, 16.6%   { opacity: 1; }
	17%         { opacity: 0.55; }
	17.5%       { opacity: 1; }
	43.6%       { opacity: 1; }
	44%         { opacity: 0.68; }
	44.3%       { opacity: 0.92; }
	44.8%       { opacity: 1; }
	78.4%       { opacity: 1; }
	78.8%       { opacity: 0.45; }
	79.4%       { opacity: 1; }
	100%        { opacity: 1; }
}

/* Los canales se separan justo en esos tres momentos. El resto del tiempo
   están a 1 px, que es lo que da el tono frío sin que se note el truco. */
@keyframes rk-holo-desfase-rojo {
	0%, 16.6%  { transform: translateX( -1px ); }
	17%        { transform: translateX( -5px ); }
	17.5%      { transform: translateX( -1px ); }
	43.6%      { transform: translateX( -1px ); }
	44%        { transform: translateX( -3px ) translateY( 1px ); }
	44.8%      { transform: translateX( -1px ); }
	78.4%      { transform: translateX( -1px ); }
	78.8%      { transform: translateX( -7px ); }
	79.4%      { transform: translateX( -1px ); }
	100%       { transform: translateX( -1px ); }
}

@keyframes rk-holo-desfase-cian {
	0%, 16.6%  { transform: translateX( 1px ); }
	17%        { transform: translateX( 5px ); }
	17.5%      { transform: translateX( 1px ); }
	43.6%      { transform: translateX( 1px ); }
	44%        { transform: translateX( 3px ) translateY( -1px ); }
	44.8%      { transform: translateX( 1px ); }
	78.4%      { transform: translateX( 1px ); }
	78.8%      { transform: translateX( 7px ); }
	79.4%      { transform: translateX( 1px ); }
	100%       { transform: translateX( 1px ); }
}

@keyframes rk-holo-barrido {
	0%   { top: -30%; opacity: 0; }
	6%   { opacity: 0.9; }
	34%  { top: 102%; opacity: 0.9; }
	40%  { top: 102%; opacity: 0; }
	100% { top: -30%; opacity: 0; }
}

/* --------------------------------------------------------------------------
   10. PASOS DE RECLUTAMIENTO
   -------------------------------------------------------------------------- */

.rk-pasos {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: var( --wp--preset--spacing--40 );
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: rk-paso;
}

.rk-pasos > li {
	counter-increment: rk-paso;
	position: relative;
	padding: var( --wp--preset--spacing--40 );
	padding-block-start: 3.4rem;
	background: var( --wp--preset--color--carta );
	border: 1px solid var( --wp--preset--color--borde );
	border-radius: 4px;
}

.rk-pasos > li::before {
	content: counter( rk-paso );
	position: absolute;
	top: var( --wp--preset--spacing--40 );
	left: var( --wp--preset--spacing--40 );
	font-family: var( --wp--preset--font-family--titulares );
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	color: var( --wp--preset--color--cian );
	opacity: 0.85;
}

.rk-pasos h3 {
	margin-block: 0 0.5rem;
	font-size: var( --wp--preset--font-size--medio );
}

.rk-pasos p {
	margin: 0;
	font-size: var( --wp--preset--font-size--pequeno );
}

/* --------------------------------------------------------------------------
   11. QUIEN NO QUIERE MOVIMIENTO
   Todo lo que se mueve en este tema se para aquí. No es un añadido de buena
   voluntad: hay gente a la que el movimiento le provoca mareo o migraña, y el
   sistema operativo ya lo sabe. Basta con preguntarle.

   El retrato NO desaparece: se queda quieto, teñido y con sus líneas. Sigue
   siendo un holograma, simplemente estable.
   -------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.rk-holo__fx::after {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   12. CABECERAS — PARCHE DEFENSIVO
   --------------------------------------------------------------------------

   El 2026-11-13, nada más activar el tema, TODOS los titulares salieron del
   color del fondo: invisibles. La causa no estaba en este tema sino en
   `post-104.css`, la hoja que Elementor sigue cargando para la portada VIEJA
   (página 104), que todavía figura como página de inicio aunque ya no se
   pinte. Dentro hay una regla que pinta las cabeceras de #03080B.

   Cuando se desactive Elementor esto desaparece solo. Mientras tanto, y por
   si mañana vuelve a aparecer otra hoja con la misma idea, el tema se defiende
   diciendo lo suyo con más peso. No lleva !important: no hace falta, basta con
   ganar en especificidad desde la raíz del documento.
   -------------------------------------------------------------------------- */

:root :is( h1, h2, h3, h4, h5, h6 ).wp-block-heading,
:root .wp-site-blocks :is( h1, h2, h3, h4, h5, h6 ) {
	color: var( --wp--preset--color--contrast );
}

/* --------------------------------------------------------------------------
   13. EL LOGO
   --------------------------------------------------------------------------

   El logo de Rekium es un rayo ámbar dentro de un anillo. Dos datos que
   mandan en todo lo de abajo:

     · Su ámbar medido es #E0A040, a un pelo del #ECA943 que ya usábamos para
       las cifras. No hubo que forzar nada: la paleta y el logo ya estaban de
       acuerdo. Por eso el brillo va en ámbar cálido y no en blanco.

     · El PNG original mide 2000x2003 y tiene un 21% de transparencia. Esa
       transparencia es la pieza clave: permite usar el propio logo como
       MÁSCARA, así el brillo solo existe sobre el rayo y el anillo, y nunca
       sobre el rectángulo que los contiene. Es la diferencia entre un
       destello que parece parte de la marca y una luz que cruza una caja.

   La URL del logo no está escrita aquí: la inyecta functions.php en la
   variable --rk-logo leyendo el logo que haya configurado el sitio. Si algún
   día se cambia el logo desde el editor, esto le sigue solo.
   -------------------------------------------------------------------------- */

/* ── El de la cabecera ─────────────────────────────────────────────────── */

.wp-block-site-logo {
	position: relative;
	border-radius: 50%;
	/* El halo del anillo: late como un condensador cargándose. */
	animation: rk-logo-carga 6.5s ease-in-out infinite;
}

/* El brillo, recortado por la silueta del propio logo. */
.wp-block-site-logo::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: screen;

	-webkit-mask-image: var( --rk-logo );
	mask-image: var( --rk-logo );
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;

	/* 115° sigue la inclinación del rayo. En 45° el destello cruza el
	   dibujo a contrapelo y se nota que es un truco. */
	background-image: linear-gradient(
		115deg,
		transparent 42%,
		rgba( 255, 226, 160, 0.75 ) 49%,
		rgba( 255, 248, 230, 0.95 ) 51%,
		rgba( 255, 226, 160, 0.75 ) 53%,
		transparent 60%
	);
	background-size: 320% 100%;
	background-repeat: no-repeat;
	background-position: 170% 0;
	animation: rk-logo-brillo 6.5s ease-in-out infinite;
}

/* ── El emblema del hero ───────────────────────────────────────────────── */

.rk-hero {
	position: relative;
	overflow: hidden;
}

/*
 * El hero ocupa el ancho ancho como el resto de la página, PERO su texto no.
 *
 * Son dos problemas distintos con soluciones opuestas: la caja tenía que
 * crecer para no cantar al lado de secciones de 1320 px, y el texto tenía
 * que quedarse corto porque un titular a 1320 px de ancho deja de leerse de
 * una pasada. Así que la caja va a 1320 y el texto a 700, pegado a la
 * izquierda — y los 600 px que sobran a la derecha son justo donde vive el
 * emblema, que antes estaba DETRÁS de las letras peleándose con ellas.
 *
 * El selector lleva dos clases a propósito: la maquetación de WordPress
 * centra los hijos con `margin-inline: auto` y hay que ganarle en
 * especificidad para pegarlos a la izquierda.
 */
.wp-block-group.rk-hero > * {
	position: relative;
	z-index: 1;
	max-width: 700px;
	margin-inline-start: 0;
	margin-inline-end: auto;
}

/* El logo enorme, casi apagado. A 2000 px hay resolución de sobra para esto
   y no se pixela ni en una pantalla grande. */
/*
 * El emblema se mide por la ALTURA del hero, no en píxeles fijos.
 *
 * Con un ancho fijo de 620 px el círculo salía más alto que la propia caja
 * y el `overflow: hidden` lo cortaba por arriba, por abajo y por la derecha
 * a la vez. Parecía un fallo de carga, y con razón.
 *
 * Atándolo al 70% de la altura y dejando que el ancho lo deduzca la
 * proporción 1:1, el logo entra entero siempre, mida lo que mida el hero.
 * El tope de 420 px es para pantallas muy altas, donde el 70% se volvería
 * desproporcionado.
 */
.rk-hero::before,
.rk-hero::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 2%;
	height: min( 70%, 420px );
	width: auto;
	aspect-ratio: 1;
	transform: translateY( -50% );
	pointer-events: none;
	z-index: 0;
}

.rk-hero::before {
	background-image: var( --rk-logo );
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	/* Sube de 0,07 a 0,10: ahora que está en su hueco y no debajo del texto,
	   puede verse sin molestar. */
	opacity: 0.10;
}

/* Y el mismo brillo recorriéndolo, también recortado por la silueta. Es lo
   único que se mueve en el hero: una luz que atraviesa el rayo cada pocos
   segundos y se va. */
.rk-hero::after {
	-webkit-mask-image: var( --rk-logo );
	mask-image: var( --rk-logo );
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;

	background-image: linear-gradient(
		115deg,
		transparent 44%,
		rgba( 236, 169, 67, 0.55 ) 49%,
		rgba( 255, 236, 200, 0.75 ) 51%,
		rgba( 236, 169, 67, 0.55 ) 53%,
		transparent 58%
	);
	background-size: 320% 100%;
	background-repeat: no-repeat;
	background-position: 170% 0;
	/* Estaba a 0,55 y al pasar la luz el rayo se encendía entero: dejaba de
	   ser un fondo y se convertía en el protagonista. A 0,22 se intuye el
	   barrido y el texto sigue mandando, que es de quien es el hero. */
	opacity: 0.22;
	animation: rk-logo-brillo 9s ease-in-out infinite;
}

/* El brillo pasa UNA vez y luego se queda fuera de cuadro un buen rato. En
   bucle continuo cansa a los diez segundos y deja de mirarse. */
@keyframes rk-logo-brillo {
	0%, 58%   { background-position: 170% 0; }
	80%, 100% { background-position: -70% 0; }
}

/* La carga del anillo: sube y baja, y coincide con el paso del brillo. */
@keyframes rk-logo-carga {
	0%, 56%  { box-shadow: 0 0 0 0 rgba( 236, 169, 67, 0 ); }
	68%      { box-shadow: 0 0 14px 2px rgba( 236, 169, 67, 0.45 ); }
	84%, 100% { box-shadow: 0 0 0 0 rgba( 236, 169, 67, 0 ); }
}

/* Sin movimiento: el emblema se queda, el destello no. La marca no depende
   de la animación para estar presente. */
@media ( prefers-reduced-motion: reduce ) {
	.wp-block-site-logo::after,
	.rk-hero::after {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   14. ICONOS REALES DE EVE
   --------------------------------------------------------------------------
   El mismo icono que el piloto ve dentro del juego, servido por el servidor
   de imágenes oficial. Un veterano reconoce el Tritanium o un bloque de
   combustible antes de leer el nombre, y eso convierte el panel en algo que
   se escanea en vez de leerse.
   -------------------------------------------------------------------------- */

.rk-icono {
	width: 28px;
	height: 28px;
	flex: none;
	vertical-align: middle;
	border-radius: 2px;
	/* Los iconos de EVE vienen con su propio fondo oscuro: un filo muy tenue
	   los separa de la tarjeta sin dibujarles una caja encima. */
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.07 );
}

.rk-market td .rk-icono {
	margin-inline-end: 0.6rem;
}

/* En la cinta el icono manda sobre el nombre: ocupa la columna izquierda
   entera y las dos líneas de texto se le colocan al lado. */
.rk-tape__item {
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		'icono nombre nombre'
		'icono precio delta';
	column-gap: 0.7rem;
}

.rk-tape__item .rk-icono {
	grid-area: icono;
	align-self: center;
	width: 34px;
	height: 34px;
}

/* --------------------------------------------------------------------------
   15. EL MURO DE TROFEOS
   --------------------------------------------------------------------------
   Lo que hemos abatido, con el render oficial. Esto es lo que ocupa el hueco
   de la galería: se mantiene solo y no hay que subir una captura nunca.
   -------------------------------------------------------------------------- */

.rk-trofeos {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: var( --wp--preset--spacing--40 );
}

.rk-trofeo {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var( --wp--preset--color--carta );
	border: 1px solid var( --wp--preset--color--borde );
	border-radius: 4px;
}

.rk-trofeo__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	/* El render viene sobre negro. Se funde con la tarjeta por abajo para
	   que la ficha no parezca una foto pegada sobre un cartón. */
	-webkit-mask-image: linear-gradient( to bottom, #000 58%, transparent 100% );
	mask-image: linear-gradient( to bottom, #000 58%, transparent 100% );
}

.rk-trofeo__pie {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: var( --wp--preset--spacing--40 );
}

.rk-trofeo__nombre {
	font-family: var( --wp--preset--font-family--titulares );
	font-size: var( --wp--preset--font-size--medio );
	font-weight: 600;
	color: var( --wp--preset--color--contrast );
	line-height: 1.2;
}

.rk-trofeo__valor {
	font-family: var( --wp--preset--font-family--titulares );
	font-size: var( --wp--preset--font-size--grande );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--ambar );
	line-height: 1;
}

.rk-trofeo__fecha {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var( --wp--preset--color--texto-suave );
}

/* --------------------------------------------------------------------------
   16. LA BARRA DE PORCENTAJE
   El relleno viene del shortcode en --rk-barra. CSS puro: correcto aunque el
   navegador no ejecute una línea de JavaScript.
   -------------------------------------------------------------------------- */

.rk-barra {
	display: block;
	width: 100%;
	height: 4px;
	margin-block-start: 0.7rem;
	background: var( --wp--preset--color--borde );
	border-radius: 2px;
	overflow: hidden;
}

.rk-barra > i {
	display: block;
	height: 100%;
	width: var( --rk-barra, 0% );
	background: linear-gradient(
		90deg,
		var( --wp--preset--color--cian ),
		var( --wp--preset--color--ambar )
	);
	transform-origin: left center;
	animation: rk-barra-llena 1.3s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

@keyframes rk-barra-llena {
	from { transform: scaleX( 0 ); }
	to   { transform: scaleX( 1 ); }
}

/* --------------------------------------------------------------------------
   17. EL PANEL DE JITA SE REFRESCA
   Un barrido cruza el tablero cada pocos segundos, como un terminal que
   relee sus datos. No mueve el texto: solo pasa una luz por encima.
   -------------------------------------------------------------------------- */

.rk-tape {
	position: relative;
}

.rk-tape::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent 44%,
		rgba( 13, 166, 220, 0.10 ) 49%,
		rgba( 190, 240, 255, 0.14 ) 50%,
		rgba( 13, 166, 220, 0.10 ) 51%,
		transparent 56%
	);
	background-size: 260% 100%;
	background-repeat: no-repeat;
	background-position: 150% 0;
	animation: rk-tape-barrido 8s ease-in-out infinite;
}

@keyframes rk-tape-barrido {
	0%, 64%   { background-position: 150% 0; }
	88%, 100% { background-position: -60% 0; }
}

/* Las variaciones dan un destello al cargar: «esto se acaba de actualizar».
   Una sola vez — en bucle sería un parpadeo molesto. */
.rk-tape__delta,
.rk-market .rk-num[class*='rk-delta--'] {
	animation: rk-delta-aviso 2.4s ease-out 1 both;
}

@keyframes rk-delta-aviso {
	0%, 35% { opacity: 0.35; }
	50%     { opacity: 1; }
	62%     { opacity: 0.55; }
	75%,
	100%    { opacity: 1; }
}

/* --------------------------------------------------------------------------
   18. LA REJILLA ARRANCA
   Las casillas entran escalonadas cuando la rejilla se ve. El escalón lo
   pone rekium.js en --rk-orden; sin JavaScript la clase nunca se añade y
   todo queda visible desde el principio, que es el estado correcto.
   -------------------------------------------------------------------------- */

.rk-rejilla.rk-entra > *,
.rk-trofeos.rk-entra > * {
	animation: rk-casilla 0.55s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
	animation-delay: calc( var( --rk-orden, 0 ) * 70ms );
}

@keyframes rk-casilla {
	from { opacity: 0; transform: translateY( 10px ); }
	to   { opacity: 1; transform: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.rk-tape::after {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   19. LA CAZA RECIENTE
   La segunda fila del muro. Fichas algo más pequeñas que las históricas: son
   más y pesan menos que una Keepstar, y así se distingue de un vistazo que
   son dos listas distintas y no una sola partida en dos renglones.
   -------------------------------------------------------------------------- */

.rk-trofeos--reciente {
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
}

.rk-trofeos--reciente .rk-trofeo__valor {
	font-size: var( --wp--preset--font-size--medio );
}

.rk-trofeos--reciente .rk-trofeo__nombre {
	font-size: var( --wp--preset--font-size--pequeno );
}

/* La fecha de lo reciente va en cian: es lo que convierte la ficha en una
   prueba de vida en vez de en una vitrina. */
.rk-trofeos--reciente .rk-trofeo__fecha {
	color: var( --wp--preset--color--cian );
}

.rk-trofeos__ventana {
	margin-block-start: 0.9rem;
	font-size: var( --wp--preset--font-size--pequeno );
	color: var( --wp--preset--color--texto-suave );
}

/* --------------------------------------------------------------------------
   20. LAS PALABRAS NO SE PARTEN
   --------------------------------------------------------------------------
   En columnas estrechas los titulares salían partidos a mitad de palabra:
   «Industri / a», «Explora / ción». Lo provoca el `overflow-wrap` que ponen
   los estilos globales de WordPress, pensado para URLs largas, que aplicado
   a un titular queda espantoso.

   Las URLs sí deben poder partirse; los titulares no. Así que se dice
   explícitamente dónde vale cada cosa.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.rk-cifra,
.rk-camino__titulo,
.rk-trofeo__nombre {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* --------------------------------------------------------------------------
   21. ELIGE TU GUERRA
   --------------------------------------------------------------------------
   Era la única sección de la web hecha de adjetivos. Todo lo demás son datos
   y a un piloto con horas de vuelo las promesas le resbalan.

   No se le pueden poner cifras —zKillboard mide combate, no minería ni
   industria— así que se le pone lo segundo mejor: el casco. Cuatro naves
   reales, con sus siluetas, que dicen de qué va cada camino antes de leer
   una palabra. Y el texto pasa a ser corto y paralelo: mismo tamaño, misma
   forma, un dato concreto cada uno.
   -------------------------------------------------------------------------- */

.rk-caminos {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 230px, 1fr ) );
	gap: var( --wp--preset--spacing--40 );
	margin-block-start: var( --wp--preset--spacing--50 );
}

.rk-camino {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 330px;
	overflow: hidden;
	background: var( --wp--preset--color--carta );
	border: 1px solid var( --wp--preset--color--borde );
	border-radius: 4px;
}

/* El filo encendido de arriba, el mismo que las demás tarjetas: es lo que
   hace que toda la web parezca una ventana del juego. */
.rk-camino::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	z-index: 2;
	background: linear-gradient(
		90deg,
		transparent,
		var( --wp--preset--color--cian ) 35%,
		var( --wp--preset--color--cian ) 65%,
		transparent
	);
	opacity: 0.5;
}

/* La nave ocupa la mitad de arriba y se disuelve hacia el texto. Los renders
   de EVE vienen sobre negro, así que el degradado los funde con la tarjeta
   sin que se vea un corte. */
.rk-camino__nave {
	position: absolute;
	inset: 0 0 auto 0;
	height: 62%;
	background-image: var( --rk-nave );
	background-size: cover;
	background-position: center;
	-webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 42%, transparent 100% );
	mask-image: linear-gradient( to bottom, #000 0%, #000 42%, transparent 100% );
	opacity: 0.9;
	transition: transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 ), opacity 0.4s ease;
}

/* Un acercamiento mínimo al pasar por encima. Mínimo de verdad: 1,04. Lo
   justo para que la tarjeta conteste y no para que dé un salto. */
.rk-camino:hover .rk-camino__nave {
	transform: scale( 1.04 );
	opacity: 1;
}

.rk-camino__texto {
	position: relative;
	z-index: 1;
	margin-block-start: auto;
	padding: var( --wp--preset--spacing--40 );
}

.rk-camino__rol {
	display: block;
	font-family: var( --wp--preset--font-family--titulares );
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var( --wp--preset--color--cian );
	margin-block-end: 0.45rem;
}

.rk-camino__titulo {
	margin: 0 0 0.55rem;
	font-family: var( --wp--preset--font-family--titulares );
	/* Tamaño fijo y menor que el de un h3 normal: estas tarjetas son
	   estrechas y aquí es donde se partían las palabras. */
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var( --wp--preset--color--contrast );
}

.rk-camino__pie {
	margin: 0;
	font-size: var( --wp--preset--font-size--pequeno );
	line-height: 1.5;
	color: var( --wp--preset--color--texto );
}

/* --------------------------------------------------------------------------
   22. LA CITA DEL CEO
   --------------------------------------------------------------------------
   Sonaba a párrafo porque pesaba lo mismo que un párrafo. Una declaración
   del CEO tiene que leerse como una voz, no como más texto.

   Tres cosas la arreglan, y ninguna toca sus palabras:

     · TAMAÑO. Sube a cuerpo de titular pero en caja baja y con peso medio.
       Así contrasta con los h2 de la página: esos son rótulos gritados en
       mayúsculas, esto es alguien hablando.

     · AUSENCIA DE ADORNO. Ni barra lateral, ni comillas decorativas, ni
       cursiva. Sobre un fondo casi negro, la letra blanca grande y sola
       pega más fuerte que cualquier ornamento que le pongas al lado.

     · LA FIRMA. Deja de ser una nota al pie en gris. El nombre en blanco y
       el cargo en cian, apoyados en una línea: hay un holograma suyo al
       lado y el ojo tiene que unir las dos cosas.
   -------------------------------------------------------------------------- */

.rk-cita {
	margin: 0;
}

.rk-cita__texto {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var( --wp--preset--font-family--titulares );
	font-size: var( --wp--preset--font-size--grande );
	font-weight: 500;
	font-style: normal;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var( --wp--preset--color--contrast );
}

.rk-cita__texto p {
	margin: 0 0 0.85rem;
}

.rk-cita__texto p:last-child {
	margin-bottom: 0;
}

/* La primera frase es el rechazo y va un punto más apagada; la segunda es
   la que invita, y se queda en blanco puro. Es la misma jerarquía que tiene
   al decirlo en voz alta. */
.rk-cita__texto p:first-child {
	color: var( --wp--preset--color--texto );
}

/* El salto antes del remate solo existe cuando hay sitio. En un móvil la
   línea ya se parte sola y un salto forzado dejaría un renglón suelto. */
@media ( max-width: 600px ) {
	.rk-cita__texto br {
		display: none;
	}
}

.rk-cita__firma {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-block-start: var( --wp--preset--spacing--40 );
	padding-block-start: var( --wp--preset--spacing--30 );
	border-block-start: 1px solid var( --wp--preset--color--borde );
}

.rk-cita__nombre {
	font-family: var( --wp--preset--font-family--titulares );
	font-size: var( --wp--preset--font-size--medio );
	font-weight: 600;
	color: var( --wp--preset--color--contrast );
	line-height: 1.2;
}

.rk-cita__cargo {
	font-family: var( --wp--preset--font-family--titulares );
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var( --wp--preset--color--cian );
}

/* --------------------------------------------------------------------------
   23. LA PUERTA DE SALIDA: VERIFICAR
   --------------------------------------------------------------------------
   La web entera presume de datos de zKillboard y no había ni un sitio donde
   ir a contrastarlos. Eso convierte las cifras en afirmaciones nuestras, y un
   piloto con horas de vuelo las descuenta enteras.

   La regla que nos pusimos era «no le hagas el análisis al enemigo, pero
   déjale verificar al recluta». Esto es la segunda mitad.

   Va discreto a propósito: no compite con el botón de Discord, que es la
   acción que sí queremos. Es una puerta, no una llamada.
   -------------------------------------------------------------------------- */

.rk-verificar {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var( --wp--preset--font-family--titulares );
	font-size: var( --wp--preset--font-size--pequeno );
	font-weight: 500;
	color: var( --wp--preset--color--texto-suave );
	text-decoration: none;
	border-block-end: 1px solid var( --wp--preset--color--borde );
	padding-block-end: 0.3rem;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.rk-verificar:hover,
.rk-verificar:focus-visible {
	color: var( --wp--preset--color--cian );
	border-block-end-color: var( --wp--preset--color--cian );
	text-decoration: none;
}

.rk-verificar__flecha {
	transition: transform 0.2s ease;
}

.rk-verificar:hover .rk-verificar__flecha {
	transform: translateX( 3px );
}

/* --------------------------------------------------------------------------
   24. LAS ETIQUETAS DE LAS CIFRAS, A LA MISMA ALTURA
   «Ciudadelas reventadas» ocupaba dos líneas mientras las otras cinco
   ocupaban una, y la rejilla quedaba desigual. Se reservan dos líneas para
   todas: así da igual lo que midan y nadie tiene que acortar un rótulo para
   que cuadre el diseño.
   -------------------------------------------------------------------------- */

.rk-cifra__pie {
	min-height: 2.6em;
}

/* --------------------------------------------------------------------------
   25. JITA 4-4 PASA A SER CABECERA
   Era una celda más del tablero y dejaba un hueco raro al final de su fila.
   Un panel de cotizaciones de verdad lleva el mercado rotulado ARRIBA, no
   metido entre los artículos.
   -------------------------------------------------------------------------- */

.rk-tape__tag {
	grid-column: 1 / -1;
	justify-content: flex-start;
	padding-block: 0.55rem;
}

/* --------------------------------------------------------------------------
   26. LOS PASOS, ENLAZADOS
   Eran tres cajas sueltas. Una línea fina los une para que se lean como una
   secuencia: primero esto, después esto. Desaparece en cuanto las tarjetas
   se apilan, porque en vertical el orden ya lo da la posición.
   -------------------------------------------------------------------------- */

@media ( min-width: 760px ) {
	.rk-pasos--enlazados > li:not( :last-child )::after {
		content: '';
		position: absolute;
		top: calc( var( --wp--preset--spacing--40 ) + 0.85rem );
		left: 100%;
		width: var( --wp--preset--spacing--40 );
		height: 1px;
		background: linear-gradient(
			90deg,
			var( --wp--preset--color--cian ),
			transparent
		);
		opacity: 0.5;
	}
}

/* --------------------------------------------------------------------------
   27. TARJETAS QUE SON ENLACES
   Las de «Aprender New Eden» llevaban un enlace dentro y nada lo indicaba.
   Ahora la tarjeta entera reacciona y el titular saca una flecha: se ve que
   lleva a algún sitio antes de pasar el ratón por encima del texto.
   -------------------------------------------------------------------------- */

.rk-enlace {
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.rk-enlace:hover {
	border-color: var( --wp--preset--color--cian );
	background: var( --wp--preset--color--carta-alta );
}

.rk-enlace h3 a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
}

.rk-enlace h3 a::after {
	content: '\2192';
	font-size: 0.8em;
	transition: transform 0.2s ease;
}

.rk-enlace:hover h3 a::after {
	transform: translateX( 3px );
}


/* --------------------------------------------------------------------------
   28. EL EMBLEMA SOLO CUANDO HAY SITIO
   Por debajo de 900 px el texto ya ocupa todo el ancho y el emblema volvería
   a quedar debajo de las letras, que es justo lo que acabamos de arreglar.
   -------------------------------------------------------------------------- */

@media ( max-width: 900px ) {
	.rk-hero::before,
	.rk-hero::after {
		display: none;
	}
}


/* --------------------------------------------------------------------------
   29. EL TABLERO, A CUATRO COLUMNAS
   Ocho artículos entre cuatro columnas dan dos filas exactas, sin celdas
   sueltas. En pantallas medias bajan a tres y en móvil a dos.
   -------------------------------------------------------------------------- */

@media ( min-width: 700px ) {
	.rk-tape {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( min-width: 1000px ) {
	.rk-tape {
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* --------------------------------------------------------------------------
   30. EL TABLERO EN EL MÓVIL
   A dos columnas no cabe: con icono, nombre, precio y variación en 187 px se
   desbordaba y salían «LARGE SK… INJECTOR» y precios cortados. Por debajo de
   560 px va a una sola columna, que además es como se lee un panel de
   cotizaciones en un teléfono: en vertical, de arriba abajo.
   -------------------------------------------------------------------------- */

@media ( max-width: 560px ) {
	.rk-tape {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   31. EL PANEL DE UTILIDADES
   --------------------------------------------------------------------------
   Tres fallos en el mismo sitio, y los tres se arreglan con la misma idea.

   1. El bloque de navegación de WordPress pinta el panel de BLANCO cuando no
      se le dicen colores de superposición, y nuestro texto de menú es blanco.
      Dieciocho enlaces presentes en el HTML y perfectamente invisibles.
   2. Los grupos (Corporación, Fit, Mercado & PI, Logística) se abrían en una
      pestaña lateral, a la derecha del panel. Utilidades es el último del
      menú, así que esa pestaña nacía ya fuera de la pantalla: se cortaba.
   3. Los títulos de grupo iban en gris apagado para distinguirlos de un
      enlace. Parecían deshabilitados, que es justo lo contrario de lo que
      quería decir.

   La solución de los tres: el panel deja de ser una columna estrecha con
   pestañas y pasa a ser UNA TARJETA a dos columnas con todo dentro. Nada se
   despliega hacia los lados, así que nada se puede salir por el borde; los
   catorce enlaces se ven de una vez; y los títulos de grupo se pintan como
   rótulos (cian, versalitas, sin flecha) en lugar de como enlaces muertos
   — que es lo que son: su href es "#" y no llevan a ningún sitio.

   OJO CON LA ESPECIFICIDAD. WordPress oculta los submenús anidados con
   .wp-block-navigation .has-child .wp-block-navigation__submenu-container
   (tres clases). Cualquier regla nuestra con menos peso pierde en silencio:
   el CSS se aplica, no da error, y el menú sigue roto. Por eso aquí se repite
   .has-child dos veces — no es decoración, es lo que hace que gane.
   -------------------------------------------------------------------------- */

/* El panel, para los dos niveles. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var( --wp--preset--color--carta-alta );
	border: 1px solid var( --wp--preset--color--borde );
	border-radius: 4px;
}

.wp-block-navigation .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container a,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var( --wp--preset--color--contrast );
}

/* La tarjeta del último elemento del menú (Utilidades), anclada al borde
   derecho y a dos columnas. El ancho es fijo para que las columnas tengan
   algo que repartir; max-width lo mete en cintura en pantallas estrechas. */
.wp-block-navigation .wp-block-navigation__container > li.has-child:last-child > .wp-block-navigation__submenu-container {
	display: block;
	left: auto;
	right: 0;
	width: 32rem;
	max-width: calc( 100vw - 2rem );
	min-width: 0;
	columns: 2;
	column-gap: 1.75rem;
	padding: 1.15rem 1.25rem 0.9rem;
}

/* Los grupos, dentro de la tarjeta en vez de en una pestaña lateral. */
.wp-block-navigation .has-child .has-child > .wp-block-navigation__submenu-container {
	position: static;
	display: block;
	width: auto;
	min-width: 0;
	height: auto;
	opacity: 1;
	visibility: visible;
	overflow: visible;
	transform: none;
	border: 0;
	background: transparent;
	box-shadow: none;
	padding: 0;
}

.wp-block-navigation .wp-block-navigation__container > li.has-child:last-child > .wp-block-navigation__submenu-container > li {
	display: block;
	break-inside: avoid;
}

.wp-block-navigation .wp-block-navigation__container > li.has-child:last-child > .wp-block-navigation__submenu-container > li.has-child {
	margin-bottom: 1rem;
}

/* Rótulo de grupo. No es un enlace: pointer-events lo deja claro al ratón y
   la flecha sobra, porque ya no hay nada que desplegar. */
.wp-block-navigation .has-child .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	color: var( --wp--preset--color--cian );
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	pointer-events: none;
	padding: 0 0 0.3rem;
}

.wp-block-navigation .has-child .has-child > .wp-block-navigation__submenu-icon {
	display: none;
}

/* Los enlaces. Sin sangría propia: la alineación la marca el padding de la
   tarjeta, y así las dos columnas y la fila de abajo empiezan en la misma x. */
.wp-block-navigation .has-child .has-child > .wp-block-navigation__submenu-container a,
.wp-block-navigation .wp-block-navigation__container > li.has-child:last-child > .wp-block-navigation__submenu-container > li > a {
	font-size: 0.93rem;
	line-height: 1.35;
	padding: 0.2rem 0;
}

.wp-block-navigation .wp-block-navigation__submenu-container a:hover,
.wp-block-navigation .wp-block-navigation__submenu-container a:focus-visible {
	color: var( --wp--preset--color--cian );
}

/* Status EVE Servers: el único enlace sin grupo. Cruza las dos columnas al
   pie de la tarjeta, separado por una línea, para que no se lea como un
   título de grupo vacío. */
.wp-block-navigation .wp-block-navigation__container > li.has-child:last-child > .wp-block-navigation__submenu-container > li:not( .has-child ) {
	column-span: all;
	margin-top: 0.35rem;
	padding-top: 0.7rem;
	border-top: 1px solid var( --wp--preset--color--borde );
}

@media ( max-width: 620px ) {
	.wp-block-navigation .wp-block-navigation__container > li.has-child:last-child > .wp-block-navigation__submenu-container {
		columns: 1;
		width: min( 20rem, calc( 100vw - 2rem ) );
	}
}