/* ==========================================================================
   ARSENAL META · ajustes visuales sobre la pagina generada.

   Antes eran cuadraditos de 98x119 con 4px de hueco y un fondo propio: se veían
   pequeños y no pegaban con nada. Ahora usan la MISMA tarjeta que la sección
   FACCIONES de la web (.hs-fac-card en styles.css) y las MISMAS ilustraciones
   que ya están en la biblioteca de medios.

   Los valores estan copiados de styles.css, no aproximados:
     proporcion    209 / 261.75
     chaflan       polygon(0 0, 100% 0, 100% 86.4%, 82.3% 100%, 17.7% 100%, 0 86.4%)
     fondo         #17181b
     sombra        drop-shadow, no box-shadow (el clip-path recortaria la caja)

   Va en archivo aparte, y no dentro de arsenal-meta.css, porque ese se
   regenera desde gen3.js y se llevaria esto por delante.
   ========================================================================== */

#arsenal-meta .hs-ejercitos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 12px;
	margin: 12px 0 4px;
	padding: 0;
	list-style: none;
}

#arsenal-meta .hs-ej {
	position: relative;
	display: block;
	aspect-ratio: 209 / 261.75;
	background: #17181b;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	/* El chaflan de la casa: las dos esquinas de abajo cortadas a 45°. */
	clip-path: polygon(0 0, 100% 0, 100% 86.4%, 82.3% 100%, 17.7% 100%, 0 86.4%);
	/* drop-shadow y no box-shadow: con clip-path, la sombra de caja se recorta. */
	filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.5));
	transition: transform .18s ease, filter .18s ease;
}

#arsenal-meta .hs-ej:hover,
#arsenal-meta .hs-ej:focus-visible {
	transform: translateY(-4px);
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.65));
}
#arsenal-meta .hs-ej:focus-visible {
	outline: 2px solid #d28712;
	outline-offset: 2px;
}

#arsenal-meta .hs-ej__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}








@media (max-width: 640px) {
	#arsenal-meta .hs-ejercitos {
		grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
		gap: 9px;
	}
	
}

@media (prefers-reduced-motion: reduce) {
	#arsenal-meta .hs-ej { transition: none; }
	#arsenal-meta .hs-ej:hover { transform: none; }
}


/* ==========================================================================
   CABECERA DE CADA FICHA: degradado de faccion en vez de foto.

   POR QUE. Cada ficha traia dos fotos de fondo (en ::before de la ficha y de
   la banda) de 560 px de ancho, pintadas sobre 1.116: un aumento del 200%.
   De ahi que se vieran pixeladas. Son 62 fotos en total y buena parte del peso
   de la pagina.

   COMO. Cada ficha ya declara su color de faccion en la variable --c, asi que
   el degradado sale correcto solo, sin tener que listar 31 colores a mano:
   de su color hacia el negro azulado del fondo. Si manana entra una faccion
   nueva, hereda el suyo sin tocar nada.
   ========================================================================== */

/* --- Fondo de las fichas ------------------------------------------------------
       Un solo degradado para las 31, el mismo que las tarjetas de Kill Team.
       Antes cada ficha llevaba el color de su faccion: 31 fichas, 31 colores, y
       la otra mitad de la pagina con un unico fondo neutro. La ilustracion de
       cada ejercito (--art) NO se usa: se quiere ver el fondo de la web. */
#arsenal-meta article.dossier::before {
	background-image: linear-gradient(to bottom left, #1c1c1c 0%, #63574c 100%) !important;
	background-size: auto !important;
	background-repeat: no-repeat !important;
	filter: none !important;
	opacity: 0.55 !important;
}

/* La cabecera: de negro al color de la faccion. Aqui SI se usa --c: sobre negro
   se lee como un tinte, no como 31 fondos distintos. */
#arsenal-meta .band::before {
	background-image:
		radial-gradient(120% 150% at 8% 0%,
			rgba(255, 255, 255, 0.06) 0%,
			transparent 46%),
		linear-gradient(to bottom left,
			#0b0d0f 0%,
			color-mix(in srgb, var(--c, #335e68) 55%, #0b0d0f) 100%) !important;
	background-size: auto !important;
	background-repeat: no-repeat !important;
	filter: none !important;
	opacity: 0.9 !important;
	-webkit-mask-image: none !important;
	        mask-image: none !important;
}

/* Sin color de base: si la ficha lleva uno solido, la transparencia de arriba no
   sirve de nada porque tapa igual. */
#arsenal-meta article.dossier {
	background-color: transparent;
}

/* El emblema iba con align-self:center y el texto con align-items:flex-end, o
   sea cada uno con un criterio: el icono flotaba a media banda y los textos
   pegados abajo. Todo al centro y quedan en la misma linea. */
#arsenal-meta .dossier .band {
	align-items: center;
}




/* ==========================================================================
   FONDO DE LA PAGINA: la ilustracion de ruinas, quieta y apagada.

   Va en dos capas fijas detras de todo (z-index:-1), no como
   background-attachment:fixed del body: esa propiedad obliga al navegador a
   repintar el fondo en cada fotograma del desplazamiento y en movil va a
   tirones. Con position:fixed la capa se pinta una vez y el contenido pasa
   por encima.

     capa 1  la ilustracion, desaturada un punto para que no compita con el
             ambar de la marca ni con los colores de faccion
     capa 2  el velo: negro azulado, mas cerrado abajo que arriba, para que
             se intuya la ilustracion sin que ningun texto pierda contraste

   El contenedor de la pagina se pone transparente: si no, su propio fondo
   taparia la ilustracion.
   ========================================================================== */

body.page-template-template-arsenal-meta::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	/* 20% y no 28%: la imagen baja 81px. Con 28% la cabeza de la figura central
	   caia en el pixel 243 y la cabecera acaba en el 301, o sea que se la comia.
	   A 20% cae en el 323, con 22px de aire.
	   La foto mide 1920x2410; con cover a 1440x800 se escala a 0,75 y sobresalen
	   1008px por abajo, asi que cada punto porcentual la mueve 10,1px. */
	background: url("../images/arsenal-fondo.webp?v=2") center 20% / cover no-repeat;
	filter: saturate(0.72) brightness(0.9);
	pointer-events: none;
}

body.page-template-template-arsenal-meta::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(7, 9, 12, 0.34) 0%,
		rgba(7, 9, 12, 0.44) 45%,
		rgba(6, 8, 10, 0.58) 100%);
	pointer-events: none;
}

/* El cuerpo se queda sin fondo para que asome la ilustracion.
   El contenido se apoya en un panel oscuro translucido: deja intuir la imagen
   por detras y mantiene el contraste del texto, que es claro. Sin el, los
   nombres de ejercito se pierden sobre las ruinas. */
body.page-template-template-arsenal-meta,
body.page-template-template-arsenal-meta .hs-arsenal {
	background-color: transparent !important;
	background-image: none !important;
}

body.page-template-template-arsenal-meta #arsenal-meta {
	background-color: rgba(9, 12, 15, 0.80) !important;
	background-image: none !important;
}



/* ==========================================================================
   EL BLOQUE DE ENTRADA: sin foto propia.

   Llevaba su propia ilustracion incrustada. Se le quita para que asome el
   fondo general de la pagina —las ruinas— y todo el tramo se lea como una
   sola pieza en vez de como dos fotos pegadas.

   Se conservan los degradados de tinte (el velo teal y el toque ambar de la
   marca): son los que dan color de casa y los que garantizan que el titulo
   se lea sobre lo que haya detras.
   ========================================================================== */

#arsenal-meta .hero {
	background-image:
		radial-gradient(1100px 620px at 80% -12%, rgba(51, 94, 104, 0.34), rgba(0, 0, 0, 0) 68%),
		radial-gradient(760px 460px at 4% 108%, rgba(226, 134, 0, 0.12), rgba(0, 0, 0, 0) 70%) !important;
	background-size: auto, auto !important;
	background-position: 0% 0%, 0% 0% !important;
	background-repeat: no-repeat, no-repeat !important;
	background-color: transparent !important;
}
#arsenal-meta .hero::before,
#arsenal-meta .hero::after {
	display: none !important;
}



/* ==========================================================================
   KILL TEAM

   Kill Team tiene su propia identidad de marca y no es la de la tienda:
   naranja quemado sobre negro calido y cortes en diagonal. Los valores salen
   de muestrear la imagen de referencia de Games Workshop, no de aproximar:

     naranja del logotipo   #e94f0f / #e34d0e   ->  #E84E0F
     naranja en sombra      #99360b             ->  #9E370B
     negro del panel        #292826 / #2b2726   ->  #26241F

   Se queda la estructura que ya habia (escalones + rejilla de bandas); lo que
   cambia es como va vestida. Todo colgando de #kt para que no toque a 40k.
   ========================================================================== */

#arsenal-meta #kt {
	--kt-naranja: #E84E0F;
	--kt-hondo: #9E370B;
	--kt-negro: #1B1917;
	--kt-panel: #26241F;
}

/* --- La chapa de entrada: cuna naranja en diagonal y corte a la derecha,
       como el bloque de la imagen de referencia. --- */
#arsenal-meta #kt .kt-logo {
	display: block;
	width: auto;
	max-width: 460px;
	height: auto;
	margin: 0 0 18px;
	padding: 22px 54px 22px 34px;
	background-image: linear-gradient(114deg,
		var(--kt-naranja) 0 9%,
		var(--kt-hondo) 9% 10.2%,
		var(--kt-negro) 10.2%);
	clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
}

#arsenal-meta #kt .kt-nota {
	margin: 0 0 30px;
	padding: 11px 16px;
	border-left: 3px solid var(--kt-naranja);
	background: rgba(232, 78, 15, 0.06);
}

/* --- Escalones. La letra conserva su color, que significa algo; lo que se
       suma es el filete naranja y el corte en cuna. --- */
#arsenal-meta #kt h2.tier {
	align-items: center;
	gap: 11px;
	margin: 36px 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(232, 78, 15, 0.28);
}

#arsenal-meta #kt h2.tier .chapa {
	padding: 3px 15px 3px 11px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

#arsenal-meta #kt h2.tier small {
	color: #a9a29a;
}

/* --- Bandas. Negro calido, esquina cortada arriba a la derecha y la cuna
       naranja pegada al canto izquierdo.
       La sombra va en drop-shadow: box-shadow lo cortaria el clip-path. --- */
#arsenal-meta #kt article.kt {
	position: relative;
	border: 0 !important;
	border-radius: 14px !important;
	background-image: linear-gradient(158deg, var(--kt-panel) 0%, #131211 100%) !important;
	filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.55));
	transition: filter 0.18s ease, transform 0.18s ease;
}



#arsenal-meta #kt article.kt:hover {
	transform: translateY(-2px);
	filter: drop-shadow(0 9px 16px rgba(0, 0, 0, 0.62));
}

/* El emblema de faccion queda de marca de agua, sin competir con el naranja. */
#arsenal-meta #kt article.kt .sig {
	opacity: 0.13;
	filter: grayscale(1) brightness(1.7);
}

#arsenal-meta #kt article.kt .fac {
	/* El naranja de marca se queda en 4,08:1 sobre la tarjeta y el minimo
	   legible es 4,5. Este es el tono mas cercano que si lo cumple (4,79:1). */
	color: #F2610F;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* --- Boton. El ambar de la tienda no pinta nada aqui: naranja Kill Team,
       con el mismo corte que la tarjeta. --- */
#arsenal-meta #kt article.kt .btn {
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--kt-naranja) !important;
	/* Negro sobre naranja (4,92:1). En blanco se quedaba en 3,80:1, y ademas
	   Kill Team usa el negro sobre naranja en su propia identidad. */
	color: #141210 !important;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	transition: background 0.16s ease;
}

#arsenal-meta #kt article.kt .btn:hover {
	background: #FF5C17 !important;
}

@media (max-width: 640px) {
	#arsenal-meta #kt .kt-logo {
		max-width: 100%;
		padding: 17px 40px 17px 22px;
	}

}

/* ==========================================================================
   SELECTOR DE JUEGO POR LOGOTIPO

   Los dos logotipos arriba hacen de interruptor: 40.000 (por defecto) ensena
   las casillas de ejercito y sus listas; Kill Team ensena su seccion.

   El <div> lleva class="juego" a proposito. arsenal-meta.js engancha a
   '.juego button' y lee data-juego, asi que el interruptor funciona sin tocar
   una linea de JavaScript.

   Van como imagen, NO como mascara CSS. Son ilustraciones con placa de acero,
   letras blancas y filetes rojos: convertirlas en una silueta de un solo color
   se carga el logotipo entero. Sobre fondo oscuro se leen solos, porque lo que
   es oscuro en ellos es la placa, y las letras son blancas.
   ========================================================================== */

#arsenal-meta .juego-marcas {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 24px 0 30px;
	padding: 0;
}

#arsenal-meta .juego-marcas button {
	/* Sin caja. El recuadro rectangular no es de esta web: aqui las formas son
	   pildoras, esquinas redondeadas y cortes en cuna. Mandan los logotipos, y
	   el elegido se marca con un filete debajo, como una pestana. */
	flex: 0 1 auto;
	margin: 0;
	padding: 2px 2px 11px;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

#arsenal-meta .juego-marcas .marca {
	display: block;
	width: auto;
	height: 62px;
	opacity: 0.42;
	filter: grayscale(0.55);
	transition: opacity 0.18s ease, filter 0.18s ease;
}

#arsenal-meta .juego-marcas button:hover .marca {
	opacity: 0.75;
	filter: grayscale(0.2);
}

#arsenal-meta .juego-marcas button:hover {
	transform: translateY(-2px);
}

/* El elegido se enciende del todo; el otro se queda apagado y apagado de color. */
#arsenal-meta .juego-marcas button[aria-pressed="true"] .marca {
	opacity: 1;
	filter: none;
}

#arsenal-meta .juego-marcas button[aria-pressed="true"] {
	transform: none;
}

/* Un filete abajo con el color de cada juego, para que se vea cual manda
   sin depender solo del brillo del logotipo. */
/* La hoja original trae ".juego button[aria-pressed=true]{background:var(--fuego)}"
   porque ese interruptor era de texto. Aqui son logotipos: un fondo ambar
   solido detras del logotipo de Warhammer no hay por donde cogerlo. */
#arsenal-meta .juego-marcas button[aria-pressed="true"] {
	background: transparent;
	border-bottom-color: #D28712;
}

#arsenal-meta .juego-marcas button[data-juego="kt"][aria-pressed="true"] {
	border-bottom-color: #E84E0F;
}


/* --- Cada juego enseña lo suyo. Las casillas de ejercito son de 40.000, asi
       que en Kill Team se apartan. (La hoja original ocultaba .banners, que es
       lo que habia antes de la rejilla por escalones.) --- */
body[data-juego="kt"] #arsenal-meta .hs-ejercitos {
	display: none;
}

@media (max-width: 640px) {
	#arsenal-meta .juego-marcas {
		gap: 10px;
		margin: 18px 0 22px;
	}
	#arsenal-meta .juego-marcas button { padding: 2px 2px 8px; }
	#arsenal-meta .juego-marcas .marca { height: 40px; }
}

/* ==========================================================================
   ALINEAR ARSENAL CON EL DISENO DE LA TIENDA

   Valores medidos en la web, no aproximados:

     boton principal (ficha de producto)
       fondo #D37C25 · texto blanco · Montserrat 700 · 13,6px
       espaciado 0,8px · VERSALITAS · relleno 13px 56px · radio 999px

     precio                Montserrat 700
     titulo de seccion     Impact 32px versalitas, espaciado 0,05em
     titulo grande (home)  Impact 65px

   Arsenal venia con: botones rectos de peso 400 en otro naranja con el texto
   casi negro, y todas las cifras en Cascadia Mono, una monoespaciada que no
   se usa en ningun otro sitio de la web y que ademas no se descarga (es una
   fuente del sistema de Windows: fuera de Windows cae a otra cualquiera).

   Se usa 'Montserrat HSW' y no 'Montserrat' a proposito: es la misma letra,
   pero la que ya carga Arsenal trae los pesos de verdad (100-900). La del
   tema viene en un solo peso, y el navegador tendria que fingir la negrita.
   ========================================================================== */

/* --- Botones: la pildora de la tienda --- */
#arsenal-meta .carro-b,
#arsenal-meta .ctl-in .grp button,
#arsenal-meta .juego-marcas button {
	font-family: 'Montserrat HSW', 'Montserrat', Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

#arsenal-meta .carro-b {
	padding: 13px 34px;
	border: 0;
	border-radius: 999px;
	background: #D37C25;
	color: #fff;
	font-size: 13.6px;
	transition: background 0.16s ease;
}

#arsenal-meta .carro-b:hover:not(:disabled) {
	/* La tienda no vacia el boton al pasar por encima: lo aviva y lo sube 1px.
	   La hoja de Arsenal lo dejaba transparente con el texto naranja. */
	background: #D37C25;
	color: #fff;
	filter: brightness(1.06);
	transform: translateY(-1px);
}

#arsenal-meta .carro-b:active:not(:disabled) {
	transform: translateY(0);
}

/* --- Filtros y tallas: misma pildora, un escalon mas pequena --- */
#arsenal-meta .ctl-in .grp button {
	padding: 7px 17px;
	border-radius: 999px;
	font-size: 12.5px;
	letter-spacing: 0.7px;
}

/* --- Las cifras: fuera la monoespaciada. Montserrat como en la tienda, con
       las cifras de ancho fijo para que las columnas sigan cuadrando. --- */
#arsenal-meta .nuestro,
#arsenal-meta .pvp,
#arsenal-meta .pts,
#arsenal-meta td.q,
#arsenal-meta .ya,
#arsenal-meta .price,
#arsenal-meta .tw th,
#arsenal-meta .k {
	font-family: 'Montserrat HSW', 'Montserrat', Arial, sans-serif;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

#arsenal-meta .price b.nuestro {
	font-weight: 700;
}

/* --- Titulos: Impact, que es la letra de titular de la tienda --- */
#arsenal-meta .hero h1 {
	font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
	font-weight: 400;
	font-size: 72px;
	line-height: 0.94;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

#arsenal-meta h2.sec,
#arsenal-meta #kt h2.tier {
	font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
	font-weight: 400;
	font-size: 32px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Kill Team manda en lo suyo: su naranja y su corte en cuna se quedan, pero
   el peso y el tamano se ponen al ritmo de los botones de la tienda. */
#arsenal-meta #kt article.kt .btn {
	padding: 13px 22px;
	font-size: 13.6px;
	letter-spacing: 0.8px;
}

@media (max-width: 640px) {
	#arsenal-meta .hero h1 { font-size: 46px; }
	#arsenal-meta h2.sec,
	#arsenal-meta #kt h2.tier { font-size: 25px; }
	#arsenal-meta .carro-b { padding: 12px 22px; }
}

/* --- La monoespaciada esta detras de una variable, --mono, usada 33 veces.
       Redefinirla aqui las cambia todas de una vez, en lugar de ir persiguiendo
       selectores sueltos (b, th, span.k, td.num, span.cdx-p...). --- */
#arsenal-meta {
	--mono: 'Montserrat HSW', 'Montserrat', Arial, sans-serif;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   TODOS LOS BOTONES, NO SOLO UNO

   En el repaso anterior solo cambie .carro-b ("Anadir la lista al carrito").
   Pero en Arsenal hay NUEVE estilos de boton distintos, y el mas visible se
   me quedo fuera: a.bcomp, el "Comprar" que va en cada linea de producto,
   que aparece 63 veces. Seguia en el naranja viejo, cuadrado y de peso 400.

   La tienda tiene dos niveles (medidos en el aviso de cookies del home):

     solido    fondo #D37C25 · texto blanco
     fantasma  fondo transparente · texto y borde #D28712

   Los dos en pildora (999px), Montserrat 700, VERSALITAS.
   ========================================================================== */

/* --- Nivel solido --- */
#arsenal-meta a.bcomp,
#arsenal-meta .codex a.cdx-b,
#arsenal-meta .cta-b > a:first-child {
	display: inline-block;
	border: 0;
	border-radius: 999px;
	background: #D37C25;
	color: #fff;
	font-family: 'Montserrat HSW', 'Montserrat', Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 0.16s ease, transform 0.16s ease;
}

/* El "Comprar" va dentro de una tabla y se repite 63 veces: misma pildora,
   pero en pequeno, para no engordar cada fila. */
#arsenal-meta a.bcomp,
#arsenal-meta .codex a.cdx-b {
	padding: 7px 18px;
	font-size: 12px;
	letter-spacing: 0.7px;
}

#arsenal-meta .cta-b > a:first-child {
	padding: 13px 34px;
	font-size: 13.6px;
}

/* --- Nivel fantasma: el segundo de cada pareja --- */
#arsenal-meta .cta-b > a + a {
	display: inline-block;
	padding: 12px 33px;
	border: 1px solid #D28712;
	border-radius: 999px;
	background: transparent;
	color: #D28712;
	font-family: 'Montserrat HSW', 'Montserrat', Arial, sans-serif;
	font-size: 13.6px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.16s ease, color 0.16s ease;
}

#arsenal-meta .cta-b > a + a:hover {
	background: #D28712;
	color: #fff;
}

/* --- Como en la tienda: se aviva y sube 1px, no cambia de color --- */
#arsenal-meta a.bcomp:hover,
#arsenal-meta .codex a.cdx-b:hover,
#arsenal-meta .cta-b > a:first-child:hover {
	background: #D37C25;
	color: #fff;
	filter: brightness(1.06);
	transform: translateY(-1px);
}

#arsenal-meta a.bcomp:active,
#arsenal-meta .codex a.cdx-b:active,
#arsenal-meta .cta-b > a:first-child:active {
	transform: translateY(0);
}

/* --- Filtros sin seleccionar: fantasma tambien, para que la barra sea
       la misma familia y no botones sueltos sin fondo. --- */
#arsenal-meta .ctl-in .grp button {
	border: 1px solid rgba(210, 135, 18, 0.42);
	background: transparent;
	color: #d9c6a4;
}

#arsenal-meta .ctl-in .grp button:hover {
	border-color: #D28712;
	color: #f0e2c8;
}

#arsenal-meta .ctl-in .grp button[aria-pressed="true"] {
	border-color: #D37C25;
	background: #D37C25;
	color: #fff;
}

/* --- El naranja tambien esta detras de variables. Arsenal usa #E28600 y la
       tienda #D28712: parecidos, pero distintos, y se notaba al saltar de una
       pagina a otra. Redefinirlas aqui alcanza los 1.800 sitios donde se usa
       como texto ("Compra ya", enlaces de producto, antetitulos) sin tener que
       tocarlos uno a uno. Comprobado el contraste sobre el fondo oscuro: 6,5:1. --- */
:root:not([data-theme="light"]) #arsenal-meta,
:root[data-theme="dark"] #arsenal-meta,
:root[data-theme="light"] #arsenal-meta,
#arsenal-meta {
	--fuego: #D28712;
	--oro-claro: #D28712;
}

/* --- Al cambiar de juego se sube aqui. La barra de avisos va fija arriba y
       ocupa 43px, asi que el salto se para un poco antes para no dejar los
       logotipos debajo de ella. --- */
#arsenal-meta .juego-marcas {
	scroll-margin-top: 60px;
}

/* --- La barra de controles tiene dos grupos y no se parecian en nada:

       .chips (Filtro)  sin borde, gap 6px
       .tabs  (Talla)   recuadro de 1px alrededor, botones pegados

   .tabs venia de un control segmentado: una caja con tres pestanas a tope
   compartiendo canto. Al pasar los botones a pildora, quedaban tres pildoras
   sueltas flotando dentro de un rectangulo. Se iguala al de al lado, que ya
   estaba bien: fuera el recuadro y el mismo hueco de 6px. --- */
#arsenal-meta .ctl-in .tabs {
	flex-wrap: wrap;
	gap: 6px;
	border: 0;
}

/* ==========================================================================
   BLOQUE DE CIFRAS DEL HERO (33 ejercitos / 262 listas / 3 tallas)

   Dos problemas:

   1. Cada celda venia con  padding: 16px 0 26px  — cero por los lados — y
      una linea de 1px a la derecha. Resultado: el texto de cada columna
      arrancaba pegado a la raya de la anterior, sin aire.

   2. No se parecia al resto de la web. Las cifras iban en la letra de texto
      a peso normal; en la tienda los numeros grandes son Impact, que es lo
      que ya usan el titular y los titulos de seccion de esta misma pagina.
   ========================================================================== */

#arsenal-meta .hero-stats {
	border-top: 1px solid rgba(210, 135, 18, 0.3) !important;
}

#arsenal-meta .hero-stats > div {
	padding: 18px 24px 22px;
}

/* El selector de la hoja original es ".hero-stats div", descendiente: no pilla
   solo la celda, pilla todos los div de dentro. En las dos celdas de precios
   hay .t1000/.t2000/.t3000, que se pintaban SU PROPIA raya vertical justo al
   lado de la de la celda: dos lineas a 25px una de otra. */
#arsenal-meta .hero-stats > div > div,
#arsenal-meta .hero-stats > div > div > div {
	padding: 0;
	border-right: 0;
	border-left: 0;
}

/* La primera pega a la izquierda y la ultima a la derecha, para que el bloque
   siga alineado con el resto del contenido y no parezca metido hacia dentro. */
#arsenal-meta .hero-stats div:first-child { padding-left: 0; }
#arsenal-meta .hero-stats div:last-child { padding-right: 0; }

#arsenal-meta .hero-stats .n {
	font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
	font-weight: 400;
	letter-spacing: 0.02em;
	margin-bottom: 5px;
}

/* La etiqueta estaba a 10px con opacidad 0,6: casi ilegible. */
#arsenal-meta .hero-stats .l {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	opacity: 0.72;
}

@media (max-width: 640px) {
	#arsenal-meta .hero-stats > div { padding: 14px 16px 18px; }
}


/* ==========================================================================
   MOVIL

   OJO: la hoja original YA trae una maquetacion movil para la tabla indice,
   en @media(max-width:700px): cada fila pasa a display:grid de tres columnas
   (emblema | nombre+nivel | boton) y queda como una ficha. Funciona.

   Lo que se rompia era cosa mia: le puse table-layout:fixed, anchos por
   columna y overflow-wrap:anywhere encima, y eso desmontaba su rejilla. Aqui
   NO se toca la maquetacion de .idx. Solo lo que de verdad faltaba: tamanos
   de letra legibles y zonas pulsables que se puedan acertar con el dedo.
   ========================================================================== */

@media (max-width: 640px) {

	/* --- Lo unico que le faltaba a su rejilla ---

	   La hoja original pone .idx tr en display:grid, pero deja la <table> y
	   el <tbody> como tabla. Con eso el algoritmo de tablas sigue calculando
	   columnas y pelea con la rejilla: la celda del boton se quedaba en 20px
	   pidiendo 115, y la tabla reclamaba 569px en una caja de 343.

	   Basta con sacar a la tabla y al cuerpo del modo tabla para que la
	   rejilla que ya estaba escrita funcione. Su maquetacion no se toca. */
	#arsenal-meta table.idx,
	#arsenal-meta table.idx tbody {
		display: block;
	}

	#arsenal-meta table.idx thead {
		display: none;
	}

	/* .cmp lleva width:1% de la hoja original (el truco de tabla para que una
	   columna se encoja al minimo). Dentro de la rejilla eso sigue valiendo y
	   dejaba la celda en 20px con un boton de 105 dentro, saliendose. */
	#arsenal-meta table.idx td.cmp,
	#arsenal-meta table.idx td.ficon {
		width: auto;
	}

	/* Su rejilla usa "34px 1fr auto". Un 1fr no baja nunca del contenido
	   minimo de la columna, asi que en cuanto una celda traia algo que no
	   parte (los "112 partidas" van con white-space:nowrap) la columna
	   central se iba a 400px y la ficha entera a 579. minmax(0,1fr) si la
	   deja encoger. Es el desbordamiento clasico de CSS grid. */
	#arsenal-meta table.idx tr {
		grid-template-columns: 34px minmax(0, 1fr) auto;
	}

	#arsenal-meta table.idx td {
		min-width: 0;
	}

	/* La nota del nivel va con white-space:nowrap. En los cuatro capitulos que
	   comparten muestra pone "174 partidas · dato conjunto..." y pedia 278px
	   en una columna de 164. En movil se deja partir. */
	#arsenal-meta table.idx .wr .nota {
		white-space: normal;
	}

	/* Lo ultimo que quedaba por debajo de lo legible o de lo pulsable. */
	#arsenal-meta table.idx td.bloque,
	#arsenal-meta table.lista s,
	#arsenal-meta .price s {
		font-size: 11.5px;
	}

	#arsenal-meta table.idx td.name a {
		display: inline-block;
		padding: 6px 0;
	}

	/* .chips traia overflow-x:auto pero es un hijo flexible y no baja de su
	   contenido salvo que se le diga: medía 484px dentro de 375 y lo recortaba
	   el contenedor en vez de desplazarse. */
	#arsenal-meta .ctl-in .grp,
	#arsenal-meta .ctl-in .chips,
	#arsenal-meta .ctl-in .tabs {
		min-width: 0;
		max-width: 100%;
	}

	#arsenal-meta .ctl-in .chips {
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	/* Los Comprar de las listas medían 26px de alto; lo comodo son 40. */
	#arsenal-meta a.bcomp,
	#arsenal-meta .codex a.cdx-b {
		padding: 13px 16px;
		font-size: 12.5px;
	}

	#arsenal-meta .carro-b {
		padding: 15px 22px;
	}

	#arsenal-meta td.prod a,
	#arsenal-meta .codex a.cdx-n {
		display: inline-block;
		padding: 8px 0;
	}

	/* Lo que la hoja original deja por debajo de 11px: en un movil no se lee. */
	#arsenal-meta .banners a b,
	#arsenal-meta .banners a .tt,
	#arsenal-meta .banners-t,
	#arsenal-meta .badge,
	#arsenal-meta .dispo,
	#arsenal-meta .actualizado b,
	#arsenal-meta .band .en,
	#arsenal-meta .band .money span,
	#arsenal-meta .meta b,
	#arsenal-meta .codex .cdx-et,
	#arsenal-meta #kt .kt-b .fac,
	#arsenal-meta .wr-band,
	#arsenal-meta .idx .wr .nota,
	#arsenal-meta .prod .ya {
		font-size: 11.5px;
	}
}

/* ==========================================================================
   BOTON DE CARRITO

   El mismo componente que la tarjeta de producto de la tienda: circulo de
   44px, fondo #D28712, el icono de carrito en blanco y las mismas clases de
   WooCommerce (ajax_add_to_cart add_to_cart_button), asi que anade al carrito
   de verdad, no lleva a otra pagina.

   En las tablas de lista va a 34px: son 872 filas y a 44 cada renglon crecia
   demasiado. Mismo circulo, mismo color, mismo icono; solo la escala cambia.
   ========================================================================== */

#arsenal-meta .hs-carro {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #D28712;
	color: #fff;
	text-decoration: none;
	vertical-align: middle;
	transition: background-color 0.2s, transform 0.1s;
}

#arsenal-meta .hs-carro .hs-cart-svg {
	width: 70%;
	height: 70%;
	display: block;
}

#arsenal-meta .hs-carro:hover {
	background: #B97710;
}

#arsenal-meta .hs-carro:active {
	transform: scale(0.94);
}

/* En el codex hay sitio: el tamano de la tienda. */
#arsenal-meta .hs-carro--g {
	width: 44px;
	height: 44px;
}

/* La celda del precio pasa a llevar importe y boton en la misma linea. */
#arsenal-meta .lista .price {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

#arsenal-meta .lista .price .hs-carro {
	margin-left: auto;
}

/* WooCommerce cuelga un "Ver carrito" detras del boton al anadir: aqui
   sobra, la confirmacion ya la da el propio carrito de la cabecera. */
#arsenal-meta .added_to_cart {
	display: none !important;
}

@media (max-width: 640px) {
	#arsenal-meta .hs-carro { width: 38px; height: 38px; }
	#arsenal-meta .hs-carro--g { width: 42px; height: 42px; }
}

/* ==========================================================================
   ESQUINAS

   En la tienda no hay una sola esquina viva: las tarjetas van a 12-14px, los
   botones alargados a 999px y los redondos al 50%. Arsenal tenia 326 formas
   con esquina recta, que es lo que hacia que pareciera de otra web.

   Se aplica esa misma escala:
     contenedor grande (ficha)    14px
     bloque interior              12px
     chapa pequena / etiqueta     999px
   ========================================================================== */

/* La ficha de cada ejercito. overflow:hidden para que la ilustracion de la
   cabecera y la banda superior se recorten con la misma curva. */
#arsenal-meta article.dossier {
	border-radius: 14px;
	overflow: hidden;
}

#arsenal-meta .dossier .band {
	border-radius: 14px 14px 0 0;
}

/* Bloques interiores. */
#arsenal-meta .dossier .tw,
#arsenal-meta .dossier .meta,
#arsenal-meta .dossier .resumen,
#arsenal-meta .dossier .codex,
#arsenal-meta .dossier .alcarro,
#arsenal-meta .dossier .gancho,
#arsenal-meta .sec {
	border-radius: 12px;
}

/* La placa del emblema. */
#arsenal-meta .sello,
#arsenal-meta .sello .velo,
#arsenal-meta .sello .rasca {
	border-radius: 12px;
}

/* Chapas y etiquetas cortas: pildora, como los botones de la tienda. */
#arsenal-meta .tier,
#arsenal-meta .badge,
#arsenal-meta .dispo,
#arsenal-meta .ya,
#arsenal-meta .extremo,
#arsenal-meta .k {
	border-radius: 999px;
}

/* La barra de controles, pegada arriba: solo las de abajo, que las de arriba
   quedan contra el borde de la pantalla. */
#arsenal-meta .ctl {
	border-radius: 0 0 14px 14px;
}

/* ==========================================================================
   TARJETAS DE KILL TEAM

   Antes llevaban un corte en cuna como sena de identidad, y el emblema de
   faccion detras a modo de marca de agua al 13%. Ahora que el resto de la
   pagina va redondeado a 12-14px, la cuna era la unica forma rara que
   quedaba: la tarjeta se redondea como las demas.

   La identidad de Kill Team pasa a donde de verdad esta en su propia imagen
   de marca: el TRIANGULO INVERTIDO EN NARANJA. En los carteles de Games
   Workshop cada escuadra lleva su simbolo dentro de ese triangulo, y es lo
   que se reconoce a la primera. El triangulo se dibuja aqui; dentro va el
   emblema de faccion que ya traia cada tarjeta.
   ========================================================================== */

#arsenal-meta #kt article.kt {
	border-radius: 14px;
	clip-path: none;
	padding: 18px 18px 16px;
}

/* --- La insignia: triangulo invertido con el emblema dentro --- */
#arsenal-meta #kt article.kt .sig {
	position: static;
	display: grid;
	place-items: center;
	width: 62px;
	height: 54px;
	margin: 0 0 13px;
	opacity: 1;
	filter: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 54'%3E%3Cpath d='M2.4 2.4 H59.6 L31 51.6 Z' fill='none' stroke='%23E84E0F' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

/* El emblema, en naranja y algo por encima del centro: en un triangulo
   invertido el peso visual esta arriba. */
#arsenal-meta #kt article.kt .sig .emb,
#arsenal-meta #kt article.kt .sig svg {
	width: 25px;
	height: 25px;
	margin-top: -7px;
	color: #E84E0F;
	fill: currentColor;
	opacity: 1;
	filter: none;
}

/* Los adornos de la placa antigua no pintan nada dentro del triangulo. */
#arsenal-meta #kt article.kt .sig .velo,
#arsenal-meta #kt article.kt .sig .rasca {
	display: none;
}

/* El filete naranja del canto izquierdo se va con la cuna: ahora el naranja
   lo pone la insignia, que es donde tiene sentido. */
#arsenal-meta #kt article.kt::before {
	display: none;
}

#arsenal-meta #kt article.kt .btn {
	border-radius: 999px;
	clip-path: none;
}

/* --- El carrito de la tarjeta de Kill Team va junto al precio, igual que en
       la tarjeta de producto de la tienda (nombre, precio, carrito). --- */
#arsenal-meta #kt article.kt .kt-p {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 9px;
}

#arsenal-meta #kt article.kt .kt-p .suc,
#arsenal-meta #kt article.kt .kt-p .cja {
	flex: 0 0 100%;
}

#arsenal-meta #kt article.kt .hs-carro--kt {
	margin-left: auto;
	background: #E84E0F;
}

#arsenal-meta #kt article.kt .hs-carro--kt:hover {
	background: #C8420C;
}

/* --- Seis bandas no se venden en caja: se piden a Games Workshop. Su boton
       lleva a contacto y dice "Encargar", asi que no puede ser un carrito.
       Se queda de texto, en fantasma, para que se vea que es otra cosa. --- */
#arsenal-meta #kt article.kt a.btn.btn-2 {
	display: inline-block;
	padding: 11px 22px;
	border: 1px solid rgba(232, 78, 15, 0.55) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: #F2610F !important;
	font-family: 'Montserrat HSW', 'Montserrat', Arial, sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.16s ease, color 0.16s ease;
}

#arsenal-meta #kt article.kt a.btn.btn-2:hover {
	background: #E84E0F !important;
	color: #fff !important;
}

/* ==========================================================================
   RITMO VERTICAL

   Los espacios estaban sin sistema: conviven 4, 5, 6, 7, 8, 10, 11, 13, 14,
   16, 18, 22, 26, 34, 46 y 52px. Doce valores para hacer lo mismo, y por eso
   nada parecia alineado con nada.

   Se pasa a una escala de 8, que es la que se usa fuera:
     8 / 16 / 24 / 32 / 48

   Solo se toca el ritmo ENTRE bloques, que es lo que se lee como orden. Los
   interiores de cada ficha se dejan como estan: funcionan, y esta sesion ya
   me ha ensenado lo que cuesta reescribir lo que no hace falta.
   ========================================================================== */

#arsenal-meta .juego-marcas {
	margin: 24px 0 32px;
}

#arsenal-meta .hs-ejercitos {
	margin: 16px 0 32px;
}

#arsenal-meta .banners-t {
	margin: 0 0 8px;
}

#arsenal-meta .hero-stats {
	margin-top: 8px;
}

/* 46 y 52px entre secciones -> 48 */
#arsenal-meta #j40 > section,
#arsenal-meta #kt > section {
	margin-top: 48px;
}

/* 26px entre fichas -> 24 */
#arsenal-meta article.dossier {
	margin-bottom: 24px;
}

/* El titulo de seccion y su nota, como una unidad. */
#arsenal-meta h2.sec {
	margin: 0 0 8px;
	padding: 16px 18px;
}

#arsenal-meta .sec-note {
	margin: 0 0 24px;
}

/* La rejilla de bandas de Kill Team, al mismo paso. */
#arsenal-meta #kt .rej {
	gap: 16px;
	margin-top: 16px;
}

#arsenal-meta #kt h2.tier {
	margin: 32px 0 8px;
}

#arsenal-meta #kt .kt-nota {
	margin: 0 0 24px;
}

/* --- Los emblemas se dibujaban con el ancho fijado y el alto libre, asi que
       cada uno salia con la proporcion de SU lienzo. La mayoria usa un
       viewBox cuadrado (0 0 49 49) y quedaban bien, pero unos pocos no:

         Ligas de Votann      0 0 725.9 1337.54   -> salia a 42x78
         Deathwatch           166.6 69 715.4 847
         Hijos del Emperador  0 0 120 104
         Angeles Sangrientos  0 0 49 51
         Templarios Negros    sin viewBox

       Con aspect-ratio:1 la caja es siempre cuadrada y el dibujo se ajusta
       dentro centrado (preserveAspectRatio, que ya viene por defecto). Vale
       para cualquier tamano sin repetir medidas en cada sitio. --- */
#arsenal-meta svg.emb {
	aspect-ratio: 1 / 1;
	height: auto;
}

/* --- El carrito de Kill Team salia deforme: heredaba display:block de la
       regla .btn de la hoja original, asi que el icono no se centraba y el
       circulo no se comportaba como tal. Y ademas iba en naranja, cuando el
       carrito es el mismo componente en toda la web. --- */
#arsenal-meta #kt article.kt a.btn.hs-carro {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border-radius: 50% !important;
	background: #D28712 !important;
	color: #fff !important;
}

#arsenal-meta #kt article.kt a.btn.hs-carro:hover {
	background: #B97710 !important;
}

#arsenal-meta #kt article.kt a.btn.hs-carro .hs-cart-svg {
	width: 70%;
	height: 70%;
}


/* ==========================================================================
   INSIGNIAS OFICIALES DE KILL TEAM

   Recortadas del cartel de Games Workshop que paso el dueno de la tienda, una
   a una, y guardadas como MASCARA (la insignia opaca, el fondo transparente).
   Asi el color lo pone el CSS y no la imagen: van todas en el naranja de la
   marca, vengan del bloque naranja o del blanco del cartel.

   Cada insignia ya trae su propio triangulo, asi que aqui se apaga el que
   dibujabamos nosotros y se esconde el emblema de faccion que iba dentro.

   Las bandas que no salen en el cartel (10, las mas nuevas) se quedan con el
   triangulo dibujado y su emblema de faccion: se ven de la misma familia.
   ========================================================================== */

#arsenal-meta #kt article.kt .sig--kt {
	width: 62px;
	height: 62px;
	margin: 0 0 11px;
	background-image: none;
	background-color: #E84E0F;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
}

/* La insignia ya lleva su simbolo: el emblema de faccion sobra. */
#arsenal-meta #kt article.kt .sig--kt svg {
	display: none;
}

/* Si el navegador no soportara mask-image, se vuelve al triangulo dibujado
   en vez de quedarse un cuadrado naranja. */
@supports not ((-webkit-mask-image: url(a.png)) or (mask-image: url(a.png))) {
	#arsenal-meta #kt article.kt .sig--kt {
		background-color: transparent;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 54'%3E%3Cpath d='M2.4 2.4 H59.6 L31 51.6 Z' fill='none' stroke='%23E84E0F' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
	#arsenal-meta #kt article.kt .sig--kt svg { display: block; }
}

/* ==========================================================================
   LA INSIGNIA, DE FONDO Y EN GRANDE

   A 62px se perdia. Pasa a ser el fondo de la tarjeta: grande, alineada a la
   derecha y sangrando por el canto, con el naranja rebajado para que el texto
   siga leyendose por encima. Es el tratamiento de marca de agua que usan las
   fichas de ejercito de 40k con su ilustracion.
   ========================================================================== */

#arsenal-meta #kt article.kt {
	position: relative;
	overflow: hidden;
}

#arsenal-meta #kt article.kt .sig {
	position: absolute;
	top: 50%;
	right: -34px;
	transform: translateY(-50%);
	width: 208px;
	height: 208px;
	margin: 0;
	pointer-events: none;
	z-index: 0;
}

/* Insignia oficial: la mascana pintada en naranja, rebajada. */
#arsenal-meta #kt article.kt .sig--kt {
	width: 208px;
	height: 208px;
	background-color: rgba(232, 78, 15, 0.16);
}

/* Las que no salen en el cartel llevan el triangulo dibujado con su emblema:
   se agranda igual para que las tarjetas se vean de la misma familia. */
#arsenal-meta #kt article.kt .sig:not(.sig--kt) {
	background-size: 200px 174px;
	opacity: 0.16;
}

#arsenal-meta #kt article.kt .sig:not(.sig--kt) svg {
	width: 78px;
	height: 78px;
	margin-top: -22px;
}

/* El contenido, por delante del fondo. */
#arsenal-meta #kt article.kt .kt-b,
#arsenal-meta #kt article.kt .kt-p,
#arsenal-meta #kt article.kt .btn,
#arsenal-meta #kt article.kt .hs-carro {
	position: relative;
	z-index: 1;
}

/* Sin la insignia arriba, la tarjeta ya no necesita ese hueco. */
#arsenal-meta #kt article.kt .kt-b {
	margin-top: 0;
}

/* --- Con la insignia de fondo el naranja del texto de faccion se quedaba en
       4,02:1 (minimo 4,5): la marca de agua aclara el fondo y se come el
       contraste. Bajar su opacidad no bastaba —ni al 9% llegaba— asi que se
       aclara el texto y la insignia se queda grande, que es de lo que se
       trataba. #FF7A2E da 5,00:1 sobre el peor caso del gradiente. --- */
#arsenal-meta #kt article.kt .fac {
	color: #FF7A2E;
}

#arsenal-meta #kt article.kt .suc,
#arsenal-meta #kt article.kt .cja {
	color: #E0A03A;
}


/* --- Reglas de mascara, una por insignia. Se generan desde la carpeta, asi
       que anadir una es dejar el PNG y volver a generar. --- */
#arsenal-meta #kt .sig--angels-of-death {
	-webkit-mask-image: url(../img/kt/angels-of-death.svg?v=4);
	        mask-image: url(../img/kt/angels-of-death.svg?v=4);
}
#arsenal-meta #kt .sig--battleclade {
	-webkit-mask-image: url(../img/kt/battleclade.svg?v=4);
	        mask-image: url(../img/kt/battleclade.svg?v=4);
}
#arsenal-meta #kt .sig--blades-of-khaine {
	-webkit-mask-image: url(../img/kt/blades-of-khaine.svg?v=4);
	        mask-image: url(../img/kt/blades-of-khaine.svg?v=4);
}
#arsenal-meta #kt .sig--blooded {
	-webkit-mask-image: url(../img/kt/blooded.svg?v=4);
	        mask-image: url(../img/kt/blooded.svg?v=4);
}
#arsenal-meta #kt .sig--brood-brothers {
	-webkit-mask-image: url(../img/kt/brood-brothers.svg?v=4);
	        mask-image: url(../img/kt/brood-brothers.svg?v=4);
}
#arsenal-meta #kt .sig--canoptek-circle {
	-webkit-mask-image: url(../img/kt/canoptek-circle.svg?v=4);
	        mask-image: url(../img/kt/canoptek-circle.svg?v=4);
}
#arsenal-meta #kt .sig--celestian-insidiants {
	-webkit-mask-image: url(../img/kt/celestian-insidiants.svg?v=4);
	        mask-image: url(../img/kt/celestian-insidiants.svg?v=4);
}
#arsenal-meta #kt .sig--chaos-cult {
	-webkit-mask-image: url(../img/kt/chaos-cult.svg?v=4);
	        mask-image: url(../img/kt/chaos-cult.svg?v=4);
}
#arsenal-meta #kt .sig--corsair-voidscarred {
	-webkit-mask-image: url(../img/kt/corsair-voidscarred.svg?v=4);
	        mask-image: url(../img/kt/corsair-voidscarred.svg?v=4);
}
#arsenal-meta #kt .sig--death-korps {
	-webkit-mask-image: url(../img/kt/death-korps.svg?v=4);
	        mask-image: url(../img/kt/death-korps.svg?v=4);
}
#arsenal-meta #kt .sig--deathwatch {
	-webkit-mask-image: url(../img/kt/deathwatch.svg?v=4);
	        mask-image: url(../img/kt/deathwatch.svg?v=4);
}
#arsenal-meta #kt .sig--elucidian-starstriders {
	-webkit-mask-image: url(../img/kt/elucidian-starstriders.png?v=3);
	        mask-image: url(../img/kt/elucidian-starstriders.png?v=3);
}
#arsenal-meta #kt .sig--exaction-squad {
	-webkit-mask-image: url(../img/kt/exaction-squad.svg?v=4);
	        mask-image: url(../img/kt/exaction-squad.svg?v=4);
}
#arsenal-meta #kt .sig--exoarmaduras-xv26-sigilo {
	-webkit-mask-image: url(../img/kt/exoarmaduras-xv26-sigilo.svg?v=4);
	        mask-image: url(../img/kt/exoarmaduras-xv26-sigilo.svg?v=4);
}
#arsenal-meta #kt .sig--farstalker-kinband {
	-webkit-mask-image: url(../img/kt/farstalker-kinband.svg?v=4);
	        mask-image: url(../img/kt/farstalker-kinband.svg?v=4);
}
#arsenal-meta #kt .sig--fellgor-ravagers {
	-webkit-mask-image: url(../img/kt/fellgor-ravagers.svg?v=4);
	        mask-image: url(../img/kt/fellgor-ravagers.svg?v=4);
}
#arsenal-meta #kt .sig--gellerpox-infected {
	-webkit-mask-image: url(../img/kt/gellerpox-infected.png?v=3);
	        mask-image: url(../img/kt/gellerpox-infected.png?v=3);
}
#arsenal-meta #kt .sig--goremongers {
	-webkit-mask-image: url(../img/kt/goremongers.svg?v=4);
	        mask-image: url(../img/kt/goremongers.svg?v=4);
}
#arsenal-meta #kt .sig--hand-of-the-archon {
	-webkit-mask-image: url(../img/kt/hand-of-the-archon.svg?v=4);
	        mask-image: url(../img/kt/hand-of-the-archon.svg?v=4);
}
#arsenal-meta #kt .sig--hearthkyn-salvagers {
	-webkit-mask-image: url(../img/kt/hearthkyn-salvagers.svg?v=4);
	        mask-image: url(../img/kt/hearthkyn-salvagers.svg?v=4);
}
#arsenal-meta #kt .sig--hernkyn-yaegirs {
	-webkit-mask-image: url(../img/kt/hernkyn-yaegirs.png?v=3);
	        mask-image: url(../img/kt/hernkyn-yaegirs.png?v=3);
}
#arsenal-meta #kt .sig--hierotek-circle {
	-webkit-mask-image: url(../img/kt/hierotek-circle.svg?v=4);
	        mask-image: url(../img/kt/hierotek-circle.svg?v=4);
}
#arsenal-meta #kt .sig--hunter-clade {
	-webkit-mask-image: url(../img/kt/hunter-clade.svg?v=4);
	        mask-image: url(../img/kt/hunter-clade.svg?v=4);
}
#arsenal-meta #kt .sig--imperial-navy-breachers {
	-webkit-mask-image: url(../img/kt/imperial-navy-breachers.svg?v=4);
	        mask-image: url(../img/kt/imperial-navy-breachers.svg?v=4);
}
#arsenal-meta #kt .sig--inquisitorial-agents {
	-webkit-mask-image: url(../img/kt/inquisitorial-agents.svg?v=4);
	        mask-image: url(../img/kt/inquisitorial-agents.svg?v=4);
}
#arsenal-meta #kt .sig--kasrkin {
	-webkit-mask-image: url(../img/kt/kasrkin.svg?v=4);
	        mask-image: url(../img/kt/kasrkin.svg?v=4);
}
#arsenal-meta #kt .sig--kommandos {
	-webkit-mask-image: url(../img/kt/kommandos.svg?v=4);
	        mask-image: url(../img/kt/kommandos.svg?v=4);
}
#arsenal-meta #kt .sig--legionaries {
	-webkit-mask-image: url(../img/kt/legionaries.svg?v=4);
	        mask-image: url(../img/kt/legionaries.svg?v=4);
}
#arsenal-meta #kt .sig--mandrakes {
	-webkit-mask-image: url(../img/kt/mandrakes.svg?v=4);
	        mask-image: url(../img/kt/mandrakes.svg?v=4);
}
#arsenal-meta #kt .sig--mantifex {
	-webkit-mask-image: url(../img/kt/mantifex.svg?v=4);
	        mask-image: url(../img/kt/mantifex.svg?v=4);
}
#arsenal-meta #kt .sig--murderwing {
	-webkit-mask-image: url(../img/kt/murderwing.svg?v=4);
	        mask-image: url(../img/kt/murderwing.svg?v=4);
}
#arsenal-meta #kt .sig--nemesis-claw {
	-webkit-mask-image: url(../img/kt/nemesis-claw.svg?v=4);
	        mask-image: url(../img/kt/nemesis-claw.svg?v=4);
}
#arsenal-meta #kt .sig--novitiates {
	-webkit-mask-image: url(../img/kt/novitiates.svg?v=4);
	        mask-image: url(../img/kt/novitiates.svg?v=4);
}
#arsenal-meta #kt .sig--pathfinders {
	-webkit-mask-image: url(../img/kt/pathfinders.svg?v=4);
	        mask-image: url(../img/kt/pathfinders.svg?v=4);
}
#arsenal-meta #kt .sig--phobos-strike-team {
	-webkit-mask-image: url(../img/kt/phobos-strike-team.svg?v=4);
	        mask-image: url(../img/kt/phobos-strike-team.svg?v=4);
}
#arsenal-meta #kt .sig--plague-marines {
	-webkit-mask-image: url(../img/kt/plague-marines.svg?v=4);
	        mask-image: url(../img/kt/plague-marines.svg?v=4);
}
#arsenal-meta #kt .sig--ratlings {
	-webkit-mask-image: url(../img/kt/ratlings.svg?v=4);
	        mask-image: url(../img/kt/ratlings.svg?v=4);
}
#arsenal-meta #kt .sig--sanctifiers {
	-webkit-mask-image: url(../img/kt/sanctifiers.svg?v=4);
	        mask-image: url(../img/kt/sanctifiers.svg?v=4);
}
#arsenal-meta #kt .sig--scout-squad {
	-webkit-mask-image: url(../img/kt/scout-squad.svg?v=4);
	        mask-image: url(../img/kt/scout-squad.svg?v=4);
}
#arsenal-meta #kt .sig--spectre-squad {
	-webkit-mask-image: url(../img/kt/spectre-squad.svg?v=4);
	        mask-image: url(../img/kt/spectre-squad.svg?v=4);
}
#arsenal-meta #kt .sig--tempestus-aquilons {
	-webkit-mask-image: url(../img/kt/tempestus-aquilons.svg?v=4);
	        mask-image: url(../img/kt/tempestus-aquilons.svg?v=4);
}
#arsenal-meta #kt .sig--vespid-stingwings {
	-webkit-mask-image: url(../img/kt/vespid-stingwings.svg?v=4);
	        mask-image: url(../img/kt/vespid-stingwings.svg?v=4);
}
#arsenal-meta #kt .sig--void-dancer-troupe {
	-webkit-mask-image: url(../img/kt/void-dancer-troupe.svg?v=4);
	        mask-image: url(../img/kt/void-dancer-troupe.svg?v=4);
}
#arsenal-meta #kt .sig--warpcoven {
	-webkit-mask-image: url(../img/kt/warpcoven.svg?v=4);
	        mask-image: url(../img/kt/warpcoven.svg?v=4);
}
#arsenal-meta #kt .sig--wolf-scouts {
	-webkit-mask-image: url(../img/kt/wolf-scouts.svg?v=4);
	        mask-image: url(../img/kt/wolf-scouts.svg?v=4);
}
#arsenal-meta #kt .sig--wrecka-krew {
	-webkit-mask-image: url(../img/kt/wrecka-krew.svg?v=4);
	        mask-image: url(../img/kt/wrecka-krew.svg?v=4);
}
#arsenal-meta #kt .sig--wyrmblade {
	-webkit-mask-image: url(../img/kt/wyrmblade.svg?v=4);
	        mask-image: url(../img/kt/wyrmblade.svg?v=4);
}

/* ==========================================================================
   TAMANO E INTEGRACION DE LA INSIGNIA

   A 208px tapaba media tarjeta y ademas se veia borrosa: los recortes del
   cartel son de 128px de origen, asi que pintarlos a 208 obligaba al navegador
   a agrandarlos. Se bajan a 104 —la mitad— que es menor que el archivo.

   Va pegada al canto derecho a media altura y el texto se reserva su hueco a
   la izquierda: se reconoce el simbolo y ninguna linea le pasa por encima.
   ========================================================================== */

#arsenal-meta #kt article.kt .sig {
	top: 50%;
	right: -12px;
	transform: translateY(-50%);
	width: 104px;
	height: 104px;
}

#arsenal-meta #kt article.kt .sig--kt {
	width: 104px;
	height: 104px;
	background-color: rgba(232, 78, 15, 0.30);
}

#arsenal-meta #kt article.kt .sig:not(.sig--kt) {
	background-size: 100px 87px;
	opacity: 0.30;
}

#arsenal-meta #kt article.kt .sig:not(.sig--kt) svg {
	width: 40px;
	height: 40px;
	margin-top: -11px;
}

/* Van con flex-basis 100%: sin border-box el relleno se les sale de la caja
   y el texto seguiria pasando por debajo de la insignia. */
#arsenal-meta #kt article.kt .kt-b,
#arsenal-meta #kt article.kt .kt-p .suc,
#arsenal-meta #kt article.kt .kt-p .cja {
	box-sizing: border-box;
	padding-right: 84px;
}

@media (max-width: 640px) {
	#arsenal-meta #kt article.kt .sig,
	#arsenal-meta #kt article.kt .sig--kt {
		width: 96px;
		height: 96px;
		right: -10px;
	}
	#arsenal-meta #kt article.kt .kt-b,
	#arsenal-meta #kt article.kt .kt-p .suc,
	#arsenal-meta #kt article.kt .kt-p .cja {
		box-sizing: border-box;
		padding-right: 76px;
	}
}

/* ==========================================================================
   TARJETA DE KILL TEAM — segun el SVG "tarjeta kill team"

   Valores sacados del archivo, no aproximados. El maqueta va a 632x572 y la
   tarjeta real mide unos 362, asi que todo se escala por 0,573; solo los
   textos pequenos se quedan en su minimo legible en vez de encoger mas.

     tarjeta    rx 29        -> 17px
     degradado  #1c1c1c (arriba derecha) -> #63574c (abajo izquierda)
     sombra     dy 10, desenfoque 5, #1c1c1c al 20%
     insignia   252 de ancho -> 144px, naranja #f50
     titulo     Montserrat Bold 38, espaciado 0,071em -> 22px
     filete     318 de ancho (50%), 4px, #f50
     faccion    Montserrat SemiBold 17, espaciado 0,02em
     carrito    circulo de 58 -> 44px (el que ya usa la tienda), #d28712
     precios    viejo tachado #bfbfbf, nuevo blanco Bold

   Las dos cunas oscuras de las esquinas de abajo salen de las capas
   "Sustraccion 7" y "8" del SVG, con sus opacidades 0,63 y 0,35.
   ========================================================================== */

/* Cuatro por fila en escritorio. El minimo hay que afinarlo: con 300 solo
   entraban tres, y con 250 entraban cinco en cuanto se ensancho el .wrap, que
   era volver a estrecharlas. Con 280 salen cuatro en toda la franja de
   escritorio (de 1.216 a 1.336 utiles) y al estrechar baja sola a 3, 2 y 1. */
#arsenal-meta #kt .rej {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

#arsenal-meta #kt article.kt {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	overflow: hidden;
	padding: 26px 22px 24px;
	border: 0 !important;
	border-radius: 17px !important;
	background-image: linear-gradient(to bottom left, #1c1c1c 0%, #63574c 100%) !important;
	box-shadow: 0 10px 10px rgba(28, 28, 28, 0.2);
	text-align: center;
}

/* --- Las dos cunas de sombra de las esquinas inferiores --- */
#arsenal-meta #kt article.kt::before,
#arsenal-meta #kt article.kt::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	pointer-events: none;
	z-index: 0;
}

#arsenal-meta #kt article.kt::before {
	opacity: 0.63;
	clip-path: polygon(0 39%, 35% 100%, 0 100%);
}

#arsenal-meta #kt article.kt::after {
	opacity: 0.35;
	clip-path: polygon(100% 39%, 100% 100%, 65% 100%);
}

/* --- Orden: insignia, titulo, filete, faccion, carrito, precios --- */
#arsenal-meta #kt article.kt .sig { order: 1; }
#arsenal-meta #kt article.kt .kt-b { order: 2; }
#arsenal-meta #kt article.kt .hs-carro,
#arsenal-meta #kt article.kt .btn-2 { order: 3; }
#arsenal-meta #kt article.kt .kt-p { order: 4; }

/* --- La insignia: centrada arriba y a todo color, no de marca de agua --- */
#arsenal-meta #kt article.kt .sig {
	position: static;
	transform: none;
	width: 144px;
	height: 126px;
	margin: 0 0 18px;
	z-index: 1;
}

#arsenal-meta #kt article.kt .sig--kt {
	width: 144px;
	height: 126px;
	background-color: #f50;
}

#arsenal-meta #kt article.kt .sig:not(.sig--kt) {
	background-size: 140px 122px;
	opacity: 1;
}

#arsenal-meta #kt article.kt .sig:not(.sig--kt) svg {
	width: 52px;
	height: 52px;
	margin-top: -14px;
	color: #f50;
}

/* --- Titulo, filete y faccion --- */
#arsenal-meta #kt article.kt .kt-b {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 0 16px;
	z-index: 1;
	position: relative;
}

#arsenal-meta #kt article.kt .kt-b h3 {
	margin: 0 0 12px;
	font-family: 'Montserrat HSW', 'Montserrat', Arial, sans-serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.071em;
	line-height: 1.15;
	text-transform: uppercase;
	color: #fff;
}

/* El filete naranja entre el titulo y la faccion. */
#arsenal-meta #kt article.kt .kt-b h3::after {
	content: "";
	display: block;
	width: 50%;
	height: 4px;
	margin: 13px auto 0;
	border-radius: 2px;
	background: #f50;
}

#arsenal-meta #kt article.kt .fac {
	display: block;
	padding: 0;
	font-family: 'Montserrat HSW', 'Montserrat', Arial, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #fff;
}

/* --- Carrito, centrado y por delante de las cunas --- */
#arsenal-meta #kt article.kt .hs-carro {
	position: relative;
	z-index: 1;
	margin: 0 0 14px !important;
}

#arsenal-meta #kt article.kt a.btn.btn-2 {
	position: relative;
	z-index: 1;
	margin-bottom: 14px;
}

/* --- Precios: el viejo tachado a la izquierda, el nuevo a la derecha --- */
#arsenal-meta #kt article.kt .kt-p {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 4px 16px;
	width: 100%;
	padding: 0;
	position: relative;
	z-index: 1;
}

#arsenal-meta #kt article.kt .kt-p s {
	order: 1;
	padding: 0;
	font-size: 15px;
	font-weight: 400;
	color: #bfbfbf;
	text-decoration-thickness: 2px;
}

#arsenal-meta #kt article.kt .kt-p b {
	order: 2;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
}

#arsenal-meta #kt article.kt .kt-p .suc,
#arsenal-meta #kt article.kt .kt-p .cja {
	order: 3;
	flex: 0 0 100%;
	box-sizing: border-box;
	padding: 0;
	margin-top: 6px;
	font-size: 11.5px;
	text-align: center;
}

@media (max-width: 640px) {
	#arsenal-meta #kt .rej { grid-template-columns: 1fr; }
	#arsenal-meta #kt article.kt .sig,
	#arsenal-meta #kt article.kt .sig--kt { width: 132px; height: 116px; }
	#arsenal-meta #kt article.kt .kt-b h3 { font-size: 20px; }
}

/* --- Reordenado: los textos arriba, y el precio con el carrito al final.
       Las notas se han sacado del bloque de precios en el HTML para que
       puedan colocarse antes. --- */
#arsenal-meta #kt article.kt .suc { order: 3; }
#arsenal-meta #kt article.kt .cja { order: 4; }
#arsenal-meta #kt article.kt .hs-carro,
#arsenal-meta #kt article.kt a.btn.btn-2 { order: 5; }
#arsenal-meta #kt article.kt .kt-p { order: 6; }

/* Las notas, ahora sueltas en la tarjeta. En gris claro y con el renglon
   mas apretado: iban en ambar y muy separadas. */
#arsenal-meta #kt article.kt .suc,
#arsenal-meta #kt article.kt .cja {
	display: block;
	flex: 0 0 auto;
	width: 100%;
	box-sizing: border-box;
	padding: 0;
	margin: 0 0 4px;
	font-size: 12px;
	line-height: 1.28;
	color: #D6D6D6;
	text-align: center;
}

/* El bloque de precios queda solo, y el carrito debajo. */
#arsenal-meta #kt article.kt .kt-p {
	margin: 14px 0 0;
}

#arsenal-meta #kt article.kt .hs-carro {
	margin: 12px 0 0 !important;
}

#arsenal-meta #kt article.kt a.btn.btn-2 {
	margin-bottom: 0;
}

/* Un poco de aire por arriba para separar las notas de la faccion. */
#arsenal-meta #kt article.kt .suc:first-of-type {
	margin-top: 2px;
}

/* --- Ancho de la pagina ------------------------------------------------------
       La columna de contenido estaba en 1.180 (1.116 utiles). Con cuatro
       tarjetas de Kill Team eso dejaba cada una en 264px y se veian apretadas.
       Subiendola a 1.400 las tarjetas pasan a ~319px, casi lo que median cuando
       solo entraban tres.
       No alarga los textos: los parrafos (.s40, .skt, .sec-note, .gancho,
       .refu-nota) ya traen su propio max-width de 630-740px, asi que el hueco
       de mas se lo quedan solo las rejillas y la tabla, que es lo que interesa. */
#arsenal-meta .wrap {
	max-width: 1400px;
}

/* --- Alineado entre tarjetas vecinas -----------------------------------------
       Cada tarjeta se apilaba por su cuenta (flex en columna), asi que la
       posicion de cada pieza dependia de lo que midiese la de arriba: las 27
       tarjetas que no llevan nota subian el carrito y el precio 43px respecto a
       las que si la llevan, y un titulo de dos lineas desplazaba todo lo demas.

       Con subgrid las 7 filas las define la rejilla, no la tarjeta, asi que
       todas las de una misma fila comparten los mismos carriles: la insignia,
       el titulo, la faccion, la nota, la caja, el carrito y el precio nacen a la
       misma altura aunque a una tarjeta le falte alguna pieza (esa fila se le
       queda vacia y lo de abajo no se mueve).

           1 insignia   2 titulo   3 faccion   4 nota
           5 caja       6 carrito  7 precio                                  */
@supports (grid-template-rows: subgrid) {

	#arsenal-meta #kt .rej {
		column-gap: 20px;
		row-gap: 20px;
	}

	#arsenal-meta #kt article.kt {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 7;
		/* Los 20px de la rejilla separan tarjetas, no las piezas de dentro. */
		row-gap: 0;
		justify-items: center;
		align-items: start;
	}

	#arsenal-meta #kt article.kt .sig  { grid-row: 1; }
	#arsenal-meta #kt article.kt .suc  { grid-row: 4; }
	#arsenal-meta #kt article.kt .cja  { grid-row: 5; }
	#arsenal-meta #kt article.kt .hs-carro,
	#arsenal-meta #kt article.kt a.btn.btn-2 { grid-row: 6; }
	#arsenal-meta #kt article.kt .kt-p { grid-row: 7; }

	/* El titulo y la faccion van dentro de .kt-b: se abre tambien en subgrid
	   para que ocupen las filas 2 y 3 de la tarjeta y no las suyas propias. */
	#arsenal-meta #kt article.kt .kt-b {
		grid-row: 2 / span 2;
		display: grid;
		grid-template-rows: subgrid;
		row-gap: 0;
		justify-items: center;
		align-self: stretch;
		width: 100%;
	}
	#arsenal-meta #kt article.kt .kt-b h3  { grid-row: 1; }
	#arsenal-meta #kt article.kt .kt-b .fac { grid-row: 2; }

	/* Un titulo de una linea y otro de dos comparten carril. Repartiendo el
	   hueco sobrante el texto arranca arriba en los dos y el filete naranja
	   queda abajo en los dos, en vez de subir pegado al titulo corto. */
	#arsenal-meta #kt article.kt .kt-b h3 {
		align-self: stretch;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	/* Las seis tarjetas de encargo llevan boton de texto en vez de carrito.
	   Nacia 12px mas arriba (no tenia margen superior) y media 42,75px de alto
	   en vez de 44, asi que en su fila desentonaba. Se le dan las mismas
	   medidas para que el boton quede a la altura exacta del carrito. */
	#arsenal-meta #kt article.kt a.btn.btn-2 {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		margin-top: 12px;
		margin-bottom: 0;
	}
}

/* En movil va una tarjeta por fila, asi que no hay vecina con la que cuadrar y
   los carriles compartidos solo dejan huecos vacios: 36px por cada una de las
   27 que no llevan nota, casi mil pixeles de scroll de mas. Ahi se vuelve a la
   pila normal, que se ajusta a lo que cada tarjeta tenga. */
@media (max-width: 640px) {
	#arsenal-meta #kt article.kt {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#arsenal-meta #kt article.kt .kt-b {
		display: block;
	}
}

/* --- Encabezados de seccion, con el patron de la tienda ----------------------
       La barra de tier era un cajon con degradado diagonal, filete de 3px y una
       chapa redonda con la letra dentro; ademas la chapa repetia lo que ya dice
       el titulo al lado ("S" y luego "Tier S").

       En la tienda un titulo de seccion no es un cajon, es solo tipografia mas
       un filete (.section-title, styles.css:350): Impact regular, mayusculas,
       AV 71 y una linea de 2px del color de marca. Se copia eso mismo, y el
       filete se deja a todo el ancho porque aqui separa un grupo de tarjetas
       del siguiente.

       Se aplica igual a h2.sec, que llevaba el mismo cajon: si una queda plana
       y la otra no, la pagina no cuadra consigo misma. */
#arsenal-meta #kt h2.tier,
#arsenal-meta h2.sec {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	padding: 0 0 10px;
	border: 0;
	border-bottom: 2px solid var(--fuego);
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	color: #fff;
	letter-spacing: 0.071em;
	line-height: 1.1;
	overflow: visible;
}

/* El rombo de h2.sec era el unico adorno que quedaba; fuera tambien. */
#arsenal-meta h2.sec::before {
	display: none;
}

/* La chapa de la letra sobra: el titulo ya pone "Tier S". */
#arsenal-meta #kt h2.tier > span.tier {
	display: none;
}

/* La coletilla, en la tipografia de texto y sin el espaciado del titular. */
#arsenal-meta #kt h2.tier small {
	font-size: 14px;
	letter-spacing: 0;
	line-height: 1.4;
}

/* Aire: pegada a sus tarjetas y separada del grupo anterior. */
#arsenal-meta #kt h2.tier {
	margin: 44px 0 18px;
}
#arsenal-meta #kt h2.tier:first-of-type {
	margin-top: 26px;
}

/* --- La tira para elegir ejercito --------------------------------------------
       Iba dentro de .hero-in, que conserva el maximo viejo de 1.180, asi que su
       rejilla media 1.116 mientras la de Kill Team ya va a 1.336: dos anchos
       distintos en la misma pagina. Se le da a la cabecera la misma medida que
       al contenido y las dos rejillas quedan a ras.

       Y las fichas eran de 91px, un sello. Con 150 de minimo salen ocho por
       fila (156px) y las 31 caben en cuatro filas justas. La imagen se ha
       cambiado en el HTML a la variante de 419x512, que ya existia, para que
       aguante el tamano sin verse blanda. */
#arsenal-meta .hero-in {
	max-width: 1400px;
}

#arsenal-meta .hs-ejercitos {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}

@media (max-width: 640px) {
	#arsenal-meta .hs-ejercitos {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
		gap: 10px;
	}
}

/* --- El aviso legal del final ------------------------------------------------
       Iba en un <footer> suelto dentro del contenido, asi que se comia la regla
       global del pie del sitio (styles.css:1863): esquinas redondeadas de 2rem,
       fondo #1c1c1c y la foto bg-footer.jpg. Todo eso, metido en una columna de
       82ch pegada a la izquierda de un contenido de 1.336. De ahi el marco.

       Ahora es un div normal. La linea fina va a todo el ancho, como el resto de
       separaciones de la pagina, y el texto se queda en una medida legible y
       centrado debajo, que es lo que se hace en la web con la letra pequena. */
#arsenal-meta .aviso-legal {
	margin: 56px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--rule);
	background: none;
	border-radius: 0;
}

#arsenal-meta .aviso-legal p {
	max-width: 88ch;
	margin: 0 auto;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--muted);
	text-wrap: pretty;
}

#arsenal-meta .aviso-legal b {
	color: var(--ink-2);
	font-weight: 600;
}

@media (max-width: 640px) {
	#arsenal-meta .aviso-legal {
		margin-top: 38px;
		padding-top: 18px;
	}
	#arsenal-meta .aviso-legal p { font-size: 12px; }
}

/* --- Ficha de ejercito de 40k: fuera las cajas dentro de la caja -------------
       La ficha ya es una tarjeta redondeada. Dentro llevaba dos bloques mas con
       sus propias esquinas de 12px, a todo el ancho: el gancho y la tira de
       datos. Un bloque que ocupa el ancho entero no se lee como tarjeta, se lee
       como una caja flotando dentro de otra, y en la tienda no hay eso.
       Ademas la tira separaba sus cuatro campos con lineas verticales, que la
       hacian parecer una hoja de calculo.

       Se separa como en el resto de la web: con aire y una linea fina. */
#arsenal-meta .dossier .gancho,
#arsenal-meta .dossier .meta {
	border-radius: 0;
}

/* El gancho: prosa, no bloque. Se le da la medida de lectura de la pagina y el
   mismo aire que a las notas de seccion. */
#arsenal-meta .dossier .gancho {
	max-width: 84ch;
	padding: 15px 22px 17px;
	font-size: 15px;
	line-height: 1.62;
}

/* La tira de datos: sin fondo propio y sin rayas verticales. Los cuatro campos
   se separan con espacio, y una linea fina la despega de lo que viene debajo. */
#arsenal-meta .dossier .meta {
	background: none;
	gap: 0 40px;
	padding: 2px 22px 12px;
	border-top: 1px solid var(--rule);
}

#arsenal-meta .dossier .meta > div {
	padding: 10px 0 0;
	border-right: 0;
	border-bottom: 0;
	width: auto;
}

/* La chapa del tier: pildora plana. Llevaba borde claro y fondo negro al 22%,
   dos tratamientos para una sola pieza. */
#arsenal-meta .band .tier.grande {
	padding: 5px 13px;
	border: 0;
	background: rgba(6, 8, 11, 0.45);
	letter-spacing: 0.04em;
}

@media (max-width: 640px) {
	#arsenal-meta .dossier .meta {
		gap: 0 24px;
		padding: 2px 14px 10px;
	}
	#arsenal-meta .dossier .gancho { padding: 13px 14px 15px; }
}

/* El gancho traia su propio border-bottom, y como va limitado a la medida de
   lectura la linea se cortaba a media ficha: se veia el canto de una caja que
   ya no existe. Ademas ahora la separacion la pone el borde superior de la tira
   de datos, asi que sobraba y ademas salia doble. */
#arsenal-meta .dossier .gancho {
	border-bottom: 0;
}

/* --- El panel oscuro, 30px mas arriba ----------------------------------------
       Por fuera de las esquinas redondeadas de la cabecera quedaba un recorte
       donde se veia el fondo SIN el panel `rgba(9,12,15,.8)` que main pinta
       encima, porque main empezaba justo donde acaba la cabecera. Ese trozo
       salia de otro tono que el bloque de debajo y se leia como una esquina
       negra.

       Se estira el panel 30px hacia arriba y ya esta. Los 30 se devuelven con un
       borde transparente: el fondo se pinta por debajo del borde, asi que la
       caja crece pero el contenido no se mueve.

       Dos cosas que hay que saber o no funciona:
         - El margen necesita !important. main lleva el id #arsenal-meta y hay
           reglas con esa especificidad que lo dejan en 0. Si entra el borde pero
           no el margen, el contenido BAJA 30px en vez de subir la caja.
         - La cabecera necesita z-index. main va despues en el documento, asi que
           sin esto el panel le pinta encima una banda de 30px a todo lo ancho. */
body.page-template-template-arsenal-meta > header {
	position: relative;
	z-index: 1;
}

body.page-template-template-arsenal-meta > main.hs-arsenal {
	position: relative;
	z-index: 0;
	margin-top: -30px !important;
	border-top: 30px solid transparent;
}

/* --- El hero, 30px mas arriba tambien ----------------------------------------
       Con el panel ya estirado seguia viendose una linea justo en la union. La
       pintaba el hero: su primer radial va colocado en `at 80% -12%`, es decir
       centrado POR ENCIMA de su borde superior. Al empezar el hero exactamente
       donde acaba la cabecera, el resplandor arrancaba de golpe ahi y ese
       arranque se leia como una raya.

       Subiendolo 30px el arranque queda por detras de la cabecera, que va con
       z-index por delante, asi que no se ve. Los 30 se devuelven con un borde
       transparente y el contenido no se mueve.

       El margen necesita !important por lo mismo que el de main: hay reglas con
       la especificidad de #arsenal-meta que lo dejan en 0. Si entra el borde y no
       el margen, el contenido BAJA 30px. */
body.page-template-template-arsenal-meta #arsenal-meta .hero {
	margin-top: -60px !important;
	border-top: 30px solid transparent;
}

/* --- El blanco, por detras del pie y hasta abajo -----------------------------
       Dos huecos dejaban ver la ilustracion donde tenia que haber blanco: los
       64px de `footer { margin-top: 4rem }`, y las esquinas del pie, que cierra
       con `border-radius: 2rem 2rem 0 0`. En el resto de la web no se notan
       porque el body es blanco; aqui es transparente.

       El blanco lo estira la SECCION DE ARRIBA, no el pie. Es importante: una
       capa dentro del pie no vale, porque un hijo con z-index negativo se pinta
       POR ENCIMA del fondo de su propio padre, y tapaba la foto del pie. La
       seccion, en cambio, va antes en el documento, asi que el pie se pinta
       despues y queda por delante: el blanco solo asoma por el hueco del margen
       y por el recorte de las esquinas, que es justo lo que se busca.

       El borde transparente estira el fondo hacia abajo (se pinta por debajo del
       borde) y el margen negativo lo descuenta, asi que no mueve nada.

       100px y no mas: no hay que cubrir el pie entero, solo hasta donde deja ver
       lo de detras. Eso son los 64px del margen mas los 32px del radio de sus
       esquinas; de ahi para abajo el pie es opaco y a todo el ancho. Con 1200px
       el borde se salia por debajo del final del documento y lo estiraba 398px
       con blanco vacio. */
body.page-template-template-arsenal-meta > section.hs-help {
	border-bottom: 100px solid transparent;
	margin-bottom: -100px;
}

/* --- La ficha de ejercito, mas tranquila -------------------------------------
       Tres cosas la hacian caotica:

       1. EL NEGRO QUE SE CORTA A MEDIA FICHA. El gancho, el resumen y .tw
          llevaban un panel propio `rgba(14,18,20,.86)` (arsenal-meta.css:734).
          El gancho ademas va limitado a 82ch, asi que ese panel acaba al 85% del
          ancho y deja un canto vertical en mitad de la tarjeta. Y no aporta
          nada: la ficha ya es rgb(22,26,28), practicamente el mismo tono. Fuera
          el panel; el texto se apoya en el fondo de la ficha y el canto
          desaparece. El limite de 82ch se queda, que es la medida de lectura,
          pero sin fondo ya no dibuja ningun borde.

       2. FILETES DE SOBRA. Habia 264 en UNA ficha, y hay 31 fichas. De esos, 100
          eran el recuadro de las etiquetas "COMPRA YA": la etiqueta ya tiene
          fondo solido del mismo color que su borde, asi que el borde solo la
          hacia 2px mas grande sin verse. Y otros cuatro eran lineas dobles: el
          resumen cerraba con filete y la tira de datos abria y cerraba con otro.
          Se deja una sola linea donde hace falta separar.

       Las lineas de las filas de la tabla SE QUEDAN: ahi si separan datos y son
       las unicas que hacen un trabajo. */

/* 1. Fuera los paneles que se cortan a media ficha. */
#arsenal-meta .dossier .gancho,
#arsenal-meta .dossier .resumen,
#arsenal-meta .dossier .tw {
	background: none;
}

/* 2. El recuadro de "COMPRA YA" sobra: la etiqueta ya es solida. */
#arsenal-meta .dossier .ya {
	border: 0;
}

/* 3. Una sola linea de separacion, no dos seguidas. */
#arsenal-meta .dossier .resumen {
	border-bottom: 0;
}

#arsenal-meta .dossier .meta {
	border-bottom: 0;
}

/* --- Fuera la capa de color de la ficha --------------------------------------
       arsenal-meta.css:462 pinta sobre la propia .dossier una placa (--plate) y
       encima un degradado con el color de faccion:

         background-image: var(--plate,none),
           linear-gradient(116deg, color-mix(var(--c) 62%, #0A1113) ... #0A1113);
         background-blend-mode: soft-light, normal;

       Es opaca y cubre toda la ficha, asi que tapa el fondo de la pagina. Se
       quita entera: sin ella, por la ficha se ve la ilustracion de Arsenal Meta,
       que es lo que se busca. El color de faccion sigue en la cabecera, que es
       donde aporta. */
#arsenal-meta .dossier {
	background-image: none !important;
	background-blend-mode: normal !important;
}

/* --- La cabecera de la ficha, con el lenguaje de la tienda -------------------
       Lo que la desconectaba del resto de la web:
         - El nombre iba en Montserrat; los titulos de la tienda van en Impact.
         - Le faltaba el filete naranja debajo, que es LA firma de los titulos
           de la casa (.section-title span::after en styles.css:364).
         - El nombre en ingles y el % de victorias iban en monoespaciada. La web
           no usa monoespaciada en ningun sitio: cero apariciones en styles.css
           y en blog.css. De ahi el aire de panel tecnico.
         - El emblema llevaba un contorno blanco de 1px; en la tienda las
           imagenes dentro de tarjeta no llevan contorno, llevan radio de 18px.

       Todos los valores de aqui estan copiados de styles.css, no inventados. */

/* El nombre: .section-title tal cual (styles.css:350). */
#arsenal-meta .band h3 {
	font-family: 'Impact', 'Montserrat', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.071em;
	line-height: 1.1;
	position: relative;
	padding-bottom: 10px;
	margin: 0;
}

/* El filete naranja: .section-title span::after (styles.css:364). */
#arsenal-meta .band h3::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #d37c25;
}

/* Nombre en ingles y victorias: la tipografia de texto de la casa, no mono. */
#arsenal-meta .band .en,
#arsenal-meta .band .wr-band {
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding-bottom: 0;
}

#arsenal-meta .band .en { opacity: 0.62; }
#arsenal-meta .band .wr-band { opacity: 0.82; }

/* El emblema: radio 18px como las imagenes de tarjeta en la tienda, y sin el
   contorno blanco, que no existe en ninguna otra parte de la web. */
#arsenal-meta .band .sello {
	border-radius: 18px;
	outline: 0;
}

/* El precio, en la tipografia de titulares y con el mismo espaciado. */
#arsenal-meta .band .money b {
	font-family: 'Impact', 'Montserrat', sans-serif;
	font-weight: 400;
	letter-spacing: 0.03em;
}

#arsenal-meta .band .money .antes,
#arsenal-meta .band .money span {
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 11px;
	letter-spacing: 0.04em;
}

/* --- El precio y el carrito de cada caja, en horizontal ----------------------
       La celda ya era `display:flex` en fila, pero medía 40px de ancho y sus
       tres piezas suman 161 (49 del precio tachado + 58 del nuestro + 34 del
       carrito, mas los huecos). Al no caber, el flex las partia y las apilaba
       una encima de otra, apretadas contra la derecha.

       Con flex-wrap:nowrap la fila deja de partirse, y eso ademas obliga a la
       columna a reservar el ancho que necesita: el min-content de la celda pasa
       a ser la suma de las tres, no la mayor de ellas. */
#arsenal-meta .dossier td.price {
	flex-wrap: nowrap;
	justify-content: flex-end;
	width: auto;
}

/* --- El desglose por caja, a la izquierda del precio -------------------------
       Cuando una unidad necesita mas de una caja, la celda anade un
       `span.nota` con la ecuacion: "2 × 42,50 €". Iba detras del precio, entre
       este y el carrito, y ahi estorba: separa el precio de su boton y se lee
       como si fuera otro importe.

       Delante se entiende sola: primero cuantas cajas y a cuanto sale cada una,
       y despues el total. Los dos precios (el tachado y el nuestro) se quedan
       juntos, que se leen como un par.

       Se hace con `order`, no tocando el HTML: la celda ya es flex. */
#arsenal-meta .dossier td.price .nota { order: 1; }
#arsenal-meta .dossier td.price s.pvp { order: 2; }
#arsenal-meta .dossier td.price b.nuestro { order: 3; }
#arsenal-meta .dossier td.price .hs-carro { order: 4; }


/* --- Que los precios no bailen entre filas -----------------------------------
       Solo 91 de las 339 celdas llevan la ecuacion "2 × 42,50 €". Compartiendo
       fila con los precios, en esas los empujaba y la columna quedaba en zigzag:
       el precio caia en el pixel 941 en unas filas y en el 989 en otras.

       Probé justify-content, margin-left:auto y flex-basis fijo, y ninguno
       basto. El motivo es la mezcla: la celda es un `td` con display:flex, y en
       esa combinacion de tabla y flex el reparto del hueco sobrante no sale
       fiable.

       Se abandona el flex en esta celda. Vuelve a ser celda de tabla normal,
       alineada a la derecha, con los dos precios como bloques de ancho FIJO:
       asi caen siempre en el mismo pixel tengan las cifras que tengan. Medido el
       caso mas ancho de las 339: 58px el tachado y 68px el nuestro.

       Y la ecuacion se saca de la linea: va en posicion absoluta a la izquierda,
       en el hueco que le reserva el padding. Estando fuera del flujo, las filas
       que la llevan y las que no maquetan exactamente igual. */
#arsenal-meta .dossier td.price {
	display: table-cell;
	position: relative;
	text-align: right;
	white-space: nowrap;
	vertical-align: middle;
	padding-left: 100px;
	width: auto;
}

#arsenal-meta .dossier td.price s.pvp,
#arsenal-meta .dossier td.price b.nuestro {
	display: inline-block;
	vertical-align: middle;
	text-align: right;
}

#arsenal-meta .dossier td.price s.pvp { width: 62px; }
#arsenal-meta .dossier td.price b.nuestro { width: 74px; }

#arsenal-meta .dossier td.price .hs-carro {
	vertical-align: middle;
	margin-left: 12px;
}

#arsenal-meta .dossier td.price .nota {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
}

/* --- La pagina es oscura SIEMPRE ---------------------------------------------
       arsenal-meta.css declara el juego de variables CLARO como el de por
       defecto (--ink:#14171A, texto casi negro) y solo pasa al oscuro dentro de
       `@media (prefers-color-scheme: dark)`.

       Eso significaba que a quien tuviera el sistema en modo claro le salia el
       texto negro sobre los fondos oscuros de la ficha: ilegible. No es que
       faltara una variante clara, es que la pagina ya no la tiene: el fondo es
       una ilustracion oscura, los paneles son oscuros y las fichas tambien.

       Se copian aqui los mismos valores oscuros que ya trae arsenal-meta.css en
       su bloque de modo oscuro (lineas 19-23), pero sin media query, para que
       valgan con cualquier ajuste del sistema. */
#arsenal-meta {
	--bg: #0E1113;
	--surface: #161A1C;
	--surface-2: #1C2123;
	--ink: #E8EAE7;
	--ink-2: #B4BDBF;
	--muted: #8A9496;
	--rule: #2A3033;
	--rule-soft: #222729;
	--accent: #6FA3B0;
	--ok: #7CB78C;
	--ok-bg: #1A2A1E;
	--warn: #7FB2BF;
	--warn-bg: #11242A;
	--gap: #DD8474;
	--gap-bg: #2F1D1A;
}