/* ==========================================================================
   FRAME/SHIFT — base: tipografías, variables de diseño, reinicio, estructura,
   cabecera y pie. Estilo dieselpunk: acero, latón, remaches y papel de cartel.
   ========================================================================== */

@font-face { font-family: "Barlow Condensed"; src: url(/fonts/barlow-condensed-800.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(/fonts/fraunces-normal-latin.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(/fonts/fraunces-italic-latin.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/fonts/dm-mono-normal-400-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/fonts/dm-mono-normal-500-latin.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
	color-scheme: dark;

	/* Materiales */
	--hollin: #0f1012;
	--acero-0: #1b1e22;
	--acero-1: #2a2e33;
	--acero-2: #4b525a;
	--acero-3: #8d96a0;
	--crema: #eadfc4;
	--crema-2: #d9cba8;
	--laton-a: #f0d68a;
	--laton-b: #b8892d;
	--laton-c: #7d5a1a;
	--rojo: #cf4121;
	--rojo-claro: #ec5a30; /* el rojo para letras sobre fondo oscuro */
	--tinta: #1a1612;

	/* Botones, rótulos y chapas: un degradado suave, sin línea en medio que estorbe al texto */
	--laton: linear-gradient(180deg, #f3dc92, #e0bd62 55%, #cfa24a);
	/* El reflejo de metal, con su corte brusco en medio, solo para las letras grandes del logotipo */
	--laton-metal: linear-gradient(180deg, var(--laton-a), var(--laton-b) 48%, var(--laton-c) 52%, #d9b45e);
	--acero: linear-gradient(150deg, #5d656e, #2b2f34 38%, #3b4148 62%, #1f2227);
	--ruido: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8  0 0 0 0 .75  0 0 0 0 .65  0 0 0 .13 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

	/* Tipografía */
	--titulos: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
	--texto: "Fraunces", Georgia, serif;
	--mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

	/* Estructura */
	--ancho: 76rem;
	--ancho-texto: 40rem;
	--margen: clamp(1rem, 4vw, 1.5rem);
	--proporcion: 2 / 3; /* de las ilustraciones */
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	color: var(--crema);
	font-family: var(--texto);
	font-size: 1.0625rem;
	line-height: 1.55;
	/* Chapa de acero remachada, muy oscurecida, con una viñeta que la apaga hacia los bordes */
	background:
		radial-gradient(130% 75% at 50% 0%, transparent 35%, rgb(0 0 0 / 0.55)),
		linear-gradient(rgb(10 11 12 / 0.8), rgb(10 11 12 / 0.8)),
		url(/img/acero.jpg) 0 0 / 512px;
	background-color: var(--hollin);
}

main {
	flex: 1;
}

img,
picture,
svg {
	display: block;
	max-width: 100%;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--laton-a);
	outline-offset: 3px;
}

[hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Ayudas de accesibilidad */

.solo-lectores {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.salto {
	position: absolute;
	left: var(--margen);
	top: -4rem;
	z-index: 20;
	padding: 0.6rem 1rem;
	background: var(--laton-a);
	color: var(--tinta);
	font-family: var(--mono);
	font-size: 0.8125rem;
}

.salto:focus {
	top: 0.5rem;
}

/* Estructura y utilidades */

.envoltorio {
	width: 100%;
	max-width: calc(var(--ancho) + 2 * var(--margen));
	margin-inline: auto;
	padding-inline: var(--margen);
}

.mono {
	font-family: var(--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Tira de aviso: negro y latón, como en una máquina */
.rayas {
	height: 16px;
	background: repeating-linear-gradient(-45deg, var(--hollin) 0 14px, var(--laton-b) 14px 28px);
	border-block: 2px solid var(--hollin);
	box-shadow: 0 0 0 1px var(--laton-c);
}

/* Cabecera --------------------------------------------------------------- */

.franja {
	background: #0a0b0c;
	border-bottom: 3px solid var(--laton-b);
}

.franja__fila {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.4rem 1.5rem;
	padding-block: 0.5rem;
}

.franja__texto {
	color: var(--acero-3);
}

.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.menu a {
	display: block;
	padding: 0.35rem 1rem;
	border-radius: 2px;
	background: var(--laton);
	color: var(--hollin);
	box-shadow: inset 0 1px 0 #fff6, 0 2px 0 var(--laton-c);
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.menu a:hover {
	filter: brightness(1.12);
}

.menu a[aria-current] {
	background: var(--rojo);
	color: var(--crema);
	box-shadow: inset 0 1px 0 #fff4, 0 2px 0 #6e1f0e;
}

/* La imagen de la cabecera es un panorama 2:1 de la ciudad; aquí se recorta */
.cabecera {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 8.5rem;
	overflow: hidden;
	isolation: isolate;
	background: #0c0d0f var(--miniatura, none) center / cover no-repeat;
}

.cabecera__imagen {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	border: 0;
	aspect-ratio: auto;
	background: none;
}

.cabecera__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 66%;
}

/* Oscurece arriba y abajo para que el título y la franja se lean */
.cabecera::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgb(10 11 12 / 0.7), rgb(10 11 12 / 0.12) 42%, rgb(10 11 12 / 0.55));
}

.cabecera__titulo {
	padding-block: 1.25rem;
}

.cabecera--grande {
	align-items: start;
	min-height: clamp(21rem, 40vw, 33rem);
}

.cabecera--grande .cabecera__imagen img {
	object-position: 50% 40%;
}

.cabecera--grande .cabecera__titulo {
	padding-block: clamp(2rem, 6vw, 4.5rem) 2rem;
	text-align: center;
}

/* La insignia: un engranaje de latón con el objetivo de una cámara, recortada en medallón */
.emblema {
	width: 3.6rem;
	height: 3.6rem;
	flex: none;
	border: 2px solid var(--laton-b);
	border-radius: 50%;
	background: #000;
	box-shadow: 0 0 0 3px var(--hollin), 0 6px 14px #000a;
}

.emblema--grande {
	width: clamp(5rem, 11vw, 7.5rem);
	height: clamp(5rem, 11vw, 7.5rem);
	margin: 0 auto 1rem;
	border-width: 3px;
}

.marca-compacta {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* El logotipo es texto, no imagen: latón con reflejo y una barra roja inclinada */
.logotipo {
	display: inline-block;
	font-family: var(--titulos);
	font-weight: 800;
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	line-height: 0.9;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--laton-a);
	filter: drop-shadow(0 2px 0 #3b2a0b) drop-shadow(0 0 16px rgb(0 0 0 / 0.7));
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.logotipo {
		background: var(--laton-metal);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.logotipo__barra {
		background: linear-gradient(180deg, #ff7a4d, var(--rojo) 55%, #8f2410);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.logotipo__barra {
	display: inline-block;
	margin-inline: 0.02em;
	transform: skewX(-14deg) scaleY(1.04);
	color: var(--rojo);
	filter: drop-shadow(0 0 14px rgb(207 65 33 / 0.8));
}

.logotipo--grande {
	display: block;
	font-size: clamp(3.6rem, 12.5vw, 10rem);
	line-height: 0.84;
	letter-spacing: 0.02em;
}

.lema {
	display: inline-block;
	margin-top: 1.1rem;
	padding: 0.45rem 1.4rem;
	border: 2px solid var(--laton-b);
	outline: 2px solid var(--hollin);
	box-shadow: 0 0 0 4px var(--hollin);
	background: linear-gradient(180deg, #2b2f34, #181a1d);
	color: var(--laton-a);
}

/* Pie -------------------------------------------------------------------- */

.pie {
	margin-top: 4rem;
	background: #0a0b0c;
	color: var(--acero-3);
}

.pie__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-block: 1.6rem;
}

.pie a {
	text-decoration: none;
}

.pie a:hover {
	color: var(--laton-a);
}

.pie__marca {
	font-family: var(--titulos);
	font-weight: 800;
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	color: var(--laton-a);
}

.pie__marca span {
	color: var(--rojo);
}

.pie__texto {
	margin-top: 0.25rem;
	font-size: 0.9375rem;
}

.pie__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Páginas de texto (Acerca, los textos legales, la ficha de una película): se escriben
   directamente sobre el acero, sin caja. La lectura la sostiene la tipografía ----------- */

.hoja {
	position: relative;
	margin-block: 2.5rem 1rem;
	padding-top: 2.2rem;
	color: var(--crema);
}

/* La solapa de latón que da nombre al documento */
.hoja__rotulo {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.25rem 1rem;
	background: var(--laton);
	color: var(--tinta);
	box-shadow: 0 2px 0 var(--laton-c);
	letter-spacing: 0.16em;
}

.titulo-hoja {
	font-family: var(--titulos);
	font-weight: 800;
	font-size: clamp(2.8rem, 7vw, 5.2rem);
	line-height: 0.9;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--laton-a);
}

.entradilla-hoja {
	margin-top: 1rem;
	max-width: 38rem;
	font-size: 1.3rem;
	line-height: 1.4;
	font-style: italic;
	color: var(--crema-2);
}

/* El texto largo es un punto más grande y de interlineado más generoso que el de las tarjetas */
.prosa {
	max-width: 38rem;
	font-size: 1.1875rem;
	line-height: 1.78;
}

.hoja .prosa {
	margin-top: 2rem;
}

.prosa > * + * {
	margin-top: 1.1em;
}

.prosa::after {
	content: "";
	display: block;
	clear: both;
}

/* Una imagen suelta en un texto (la insignia de «Acerca») flota a la derecha, en medallón */
.hoja .prosa figure {
	float: right;
	width: min(13rem, 42%);
	margin: 0.25rem 0 1rem 2rem;
}

.hoja .prosa figure img {
	width: 100%;
	height: auto;
	border: 3px double var(--laton-b);
	border-radius: 50%;
	box-shadow: 0 8px 18px #000a;
}

.prosa h2 {
	margin-top: 2em;
	padding-bottom: 0.3rem;
	border-bottom: 2px solid var(--acero-2);
	font-family: var(--titulos);
	font-weight: 800;
	font-size: 1.9rem;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--laton-a);
}

.prosa ul {
	list-style: square;
	padding-left: 1.4rem;
}

.prosa ul li + li {
	margin-top: 0.4rem;
}

.prosa a {
	text-decoration-color: var(--rojo-claro);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.prosa a:hover {
	color: var(--laton-a);
}

.prosa code {
	padding: 0.05em 0.35em;
	background: #ffffff14;
	font-family: var(--mono);
	font-size: 0.9em;
}

.prosa hr {
	border: 0;
	border-top: 3px dotted var(--acero-2);
	margin-block: 2rem;
}

.ancla {
	margin-left: 0.4em;
	color: var(--laton-a);
	text-decoration: none;
	opacity: 0;
}

h2:hover .ancla,
.ancla:focus-visible {
	opacity: 0.7;
}

/* Páginas de listado sobre el acero: título en latón */

.encabezado {
	padding-block: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
	max-width: 52rem;
}

/* Un encabezado bajo, para las páginas cuyo contenido es lo que importa (el archivo) */
.encabezado--compacto {
	padding-block: 1.5rem 1.3rem;
}

.encabezado--compacto .sobretitulo {
	margin-bottom: 0.3rem;
}

.encabezado--compacto .titulo-pagina {
	font-size: clamp(2.4rem, 5vw, 3.6rem);
}

.sobretitulo {
	margin-bottom: 0.75rem;
	color: var(--rojo-claro);
	font-family: var(--mono);
	font-size: 0.875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sobretitulo a {
	text-decoration: none;
}

.sobretitulo a:hover {
	text-decoration: underline;
}

.titulo-pagina {
	font-family: var(--titulos);
	font-weight: 800;
	font-size: clamp(2.8rem, 8vw, 5.6rem);
	line-height: 0.9;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--laton-a);
}

.entradilla {
	margin-top: 1rem;
	max-width: 38rem;
	font-size: 1.3rem;
	line-height: 1.45;
	color: var(--crema-2);
	text-wrap: pretty;
}

.contador-pagina {
	margin-top: 1rem;
	color: var(--acero-3);
}

/* ==========================================================================
   FRAME/SHIFT — componentes compartidos: fotogramas, tarjetas, secciones,
   botones, listas de términos y de colecciones
   ========================================================================== */

.etiqueta-mono {
	font-family: var(--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--acero-3);
}

.seccion {
	margin-top: clamp(3rem, 7vw, 4.5rem);
}

/* Título de sección: una chapa grabada */
.seccion-titulo {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.6rem;
	font-family: var(--mono);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--laton-a);
}

.seccion-titulo::before {
	content: "";
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 38%, var(--laton-a) 0 20%, var(--laton-b) 40%, var(--laton-c) 70%);
	box-shadow: 0 0 0 0.22rem var(--hollin), 0 0 0 0.34rem var(--acero-2);
}

.seccion-titulo::after {
	content: "";
	flex: 1;
	border-bottom: 2px solid var(--acero-2);
}

.seccion__mas {
	margin-top: 1.5rem;
	font-family: var(--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Botones: una chapa de latón */

.boton {
	display: inline-block;
	padding: 0.7rem 1.3rem;
	border: 0;
	border-radius: 2px;
	background: var(--laton);
	color: var(--hollin);
	box-shadow: inset 0 1px 0 #fff6, 0 3px 0 var(--laton-c);
	font-family: var(--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.boton:hover {
	filter: brightness(1.12);
}

.boton--secundario {
	background: linear-gradient(180deg, #3b4148, #23272c);
	color: var(--crema);
	box-shadow: inset 0 1px 0 #fff3, 0 3px 0 #0b0c0e;
}

/* Rejilla de tarjetas: cuatro por fila en escritorio, tres en tableta, dos en el móvil */

.rejilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem 1.6rem;
	padding-bottom: 0.5rem;
}

@media (min-width: 40rem) {
	.rejilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.rejilla {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.tarjeta {
	position: relative;
}

/* El fotograma: un cuadro de tira de película, con sus perforaciones y su numeración */
.fotograma {
	--agujero: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='18'><rect x='1' y='3' width='8' height='11' rx='2.2' fill='%23c9b57e'/></svg>");
	position: relative;
	padding: 1.45rem 1.35rem;
	border: 1px solid #2c3036;
	border-radius: 3px;
	background: #09090a;
	box-shadow: 0 10px 22px #000c, inset 0 1px 0 #ffffff14;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fotograma::before,
.fotograma::after {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 0.65rem;
	background: var(--agujero) center top / 0.65rem 1.1rem repeat-y;
	opacity: 0.8;
	pointer-events: none;
}

.fotograma::before {
	left: 0.4rem;
}

.fotograma::after {
	right: 0.4rem;
}

.tarjeta:hover .fotograma {
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px var(--laton-b), 0 16px 30px #000d, 0 0 46px rgb(240 214 138 / 0.2);
}

/* Lo que va impreso en el borde de la película */
.fotograma__n,
.fotograma__f {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	font-family: var(--mono);
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	color: var(--laton-b);
	line-height: 1;
}

.fotograma__n {
	left: 1.35rem;
	top: 0.4rem;
}

.fotograma__f {
	right: 1.35rem;
	bottom: 0.4rem;
}

/* La ilustración y el pie comparten celda, uno encima del otro. No se usa position: ni en uno
   ni en otro a propósito: así el enlace del título, que se estira con ::after hasta el
   primer ancestro con position (el fotograma), cubre la tarjeta entera y no solo el pie. */
.fotograma__imagen {
	display: grid;
}

.fotograma__imagen > * {
	grid-area: 1 / 1;
}

/* El título, el año y la dirección van sobre la parte baja de la ilustración */
.fotograma__pie {
	/* El z-index vale en un elemento de rejilla aunque no tenga position, y lo pone sobre la ilustración */
	z-index: 1;
	align-self: end;
	padding: 3.2rem 0.8rem 0.75rem;
	background: linear-gradient(to top, rgb(6 7 8 / 0.96), rgb(6 7 8 / 0.82) 48%, rgb(6 7 8 / 0));
}

.fotograma__titulo {
	font-family: var(--titulos);
	font-weight: 800;
	font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
	line-height: 1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--crema);
	text-shadow: 0 1px 3px #000;
	text-wrap: balance;
}

/* Toda la tarjeta es el enlace */
.fotograma__titulo a {
	text-decoration: none;
}

.fotograma__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.fotograma__meta {
	margin-top: 0.4rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--laton-a);
}

/* La ilustración de una película */

.ilustracion {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--proporcion);
	overflow: hidden;
	background: #15171a var(--miniatura, none) center / cover no-repeat;
}

.ilustracion img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Listas de términos (géneros, países…) y de enlaces: chapas de latón */

.terminos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

.terminos li {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	padding: 0.4rem 0.9rem;
	border-radius: 2px;
	background: var(--laton);
	color: var(--tinta);
	box-shadow: inset 0 1px 0 #fff8, 0 3px 0 var(--laton-c);
}

.terminos a {
	font-family: var(--titulos);
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.terminos .etiqueta-mono {
	color: #22160a;
}

.terminos li:hover {
	filter: brightness(1.1);
}

.lista-enlaces li + li {
	margin-top: 0.5rem;
}

/* Colecciones: resumen en su índice */

.lista-colecciones {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
	gap: 2rem 1.6rem;
}

.coleccion-resumen {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.2rem 1.3rem 1.4rem;
	border-radius: 3px;
	background: var(--acero);
	box-shadow: inset 0 1px 0 #ffffff30, inset 0 -2px 4px #0009, 0 8px 18px #000b;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.coleccion-resumen:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 1px 0 #ffffff30, inset 0 -2px 4px #0009, 0 0 0 1px var(--laton-b), 0 16px 30px #000c, 0 0 46px rgb(240 214 138 / 0.18);
}

.coleccion-resumen__tira {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}

.coleccion-resumen__tira .ilustracion {
	border: 2px solid #0b0c0e;
}

.coleccion-resumen__titulo {
	font-family: var(--titulos);
	font-weight: 800;
	font-size: 1.9rem;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--laton-a);
}

.coleccion-resumen__titulo a {
	text-decoration: none;
}

.coleccion-resumen__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.coleccion-resumen p:not(.etiqueta-mono) {
	color: var(--crema-2);
	font-size: 1rem;
}

/* El odómetro: tres cifras en un contador mecánico (el archivo y la portada) */
.odometro {
	display: inline-flex;
	gap: 3px;
	padding: 4px;
	border: 2px solid var(--acero-2);
	border-radius: 3px;
	background: #0a0a0a;
	box-shadow: inset 0 2px 6px #000;
}

.odometro b {
	display: block;
	width: 1.7rem;
	padding: 0.1rem 0;
	border-radius: 2px;
	background: linear-gradient(180deg, #2a2a2a, #0f0f0f 49%, #000 51%, #1c1c1c);
	color: var(--crema);
	font-family: var(--titulos);
	font-weight: 800;
	font-size: 1.9rem;
	line-height: 1.15;
	text-align: center;
}

/* ==========================================================================
   FRAME/SHIFT — archivo: cuadro de mandos, filtros y contador
   ========================================================================== */

/* El cuadro de mandos: una placa de acero con dos remaches */
.filtros {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.9rem 1.2rem;
	margin-block: 0 2.2rem;
	padding: 1.3rem 1.5rem 1.4rem;
	border: 2px solid #12141680;
	border-radius: 4px;
	background: var(--acero);
	box-shadow: inset 0 1px 0 #ffffff26, inset 0 -3px 12px #0008, 0 10px 30px #000a;
}

.filtros::before,
.filtros::after {
	content: "";
	position: absolute;
	top: 9px;
	width: 10px;
	height: 10px;
	background: radial-gradient(circle at 50% 38%, #c9d0d8 0 1.5px, #6d757f 2.5px, #2c3035 4px, transparent 5px);
}

.filtros::before {
	left: 9px;
}

.filtros::after {
	right: 9px;
}

.filtros__campo {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.filtros__campo--buscar {
	flex: 1 1 15rem;
}

.filtros label {
	font-family: var(--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--laton-a);
}

.filtros input,
.filtros select {
	width: 100%;
	min-width: 9rem;
	padding: 0.55rem 0.8rem;
	border: 2px solid var(--acero-2);
	border-radius: 2px;
	background: #0b0c0e;
	color: var(--crema);
	font-family: var(--mono);
	font-size: 0.9375rem;
	box-shadow: inset 0 3px 8px #000c;
}

.filtros input::placeholder {
	color: var(--acero-3);
}

.filtros input:hover,
.filtros select:hover {
	border-color: var(--acero-3);
}

/* El contador, un odómetro de tres cifras */
.contador {
	display: grid;
	gap: 0.3rem;
	justify-items: end;
	margin-left: auto;
	font-family: var(--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--laton-a);
}

/* En el móvil, los desplegables van de dos en dos para que las tarjetas no queden tan abajo */
@media (max-width: 40rem) {
	.filtros {
		padding: 1.2rem 1rem 1.1rem;
	}

	.filtros__campo {
		flex: 1 1 calc(50% - 0.6rem);
		min-width: 0;
	}

	.filtros__campo--buscar {
		flex-basis: 100%;
	}

	.filtros input,
	.filtros select {
		min-width: 0;
	}

	.contador {
		flex: 1 1 calc(50% - 0.6rem);
		margin-left: 0;
		justify-items: start;
	}
}

.vacio {
	padding-block: 3rem;
	color: var(--crema-2);
	font-size: 1.2rem;
}