/*!
 * Biblioteca de Danza — Theme Styles
 * Sistema de diseño: "archivo en escena"
 * Versión: 1.0.0
 *
 * Estructura de secciones (numeradas):
 *   1  Tokens              5  Secciones y eyebrows   9  Bambalinas       13  Búsqueda avanzada  17  Responsive
 *   2  Base                6  Cards                 10 Footer           14  Paginación         18  Reduced motion
 *   3  Header              7  Botones               11 Single           15  Páginas
 *   4  Hero + portadas     8  Categorías            12 Resultados       16  Archives
 */

/* 1. Tokens
   ------------------------------------------------------------------ */
:root {
	--papel:   #FBFAF7;
	--papel-2: #F4F0EA;
	--tinta:   #1C1B1A;
	--tinta-2:   #77b748;
	--telon:   #BE2E22;
	--telon-oscuro: #9E2418;
	--grafito: #6E6A64;
	--linea:   #E4E0D8;
	--badge:	#f16945;
	/* Paleta por categoría (tipo documental): fuente única de verdad.
	   La cambia el usuario aquí; badge, hovers y estadísticas la consumen
	   vía var(--cat-{slug}). */
	--cat-tesis:           #F16A45;
	--cat-articulos:       #2E4A6B;
	--cat-investigaciones: #5A3E72;
	--cat-libros:          #8A4B21;
	--cat-memorias:        #9C6B1C;
	--cat-revistas:        #3D6B52;
	--max-width: 1200px;
	--fuente-display: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fuente-cuerpo: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fuente-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}

/* 2. Base
   ------------------------------------------------------------------ */

/* Reset mínimo: box-sizing global y márgenes por defecto a cero en body. */
*, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--fuente-cuerpo);
	font-size: 1rem;
	color: var(--tinta);
	background: var(--papel);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Encabezados editoriales: Work Sans, peso 500 por defecto. */
h1, h2, h3 {
	margin: 0;
	font-family: var(--fuente-display);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* Contenedor central. */
.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 10vh clamp(16px, 4vw, 24px);
}

/* Imágenes: responsivas por defecto. */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Enlaces: heredan el color; hover sutil con subrayado offset. */
a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* Foco visible: anillo telón, consistente en todo el sitio. */
:focus-visible {
	outline: 2px solid var(--telon);
	outline-offset: 2px;
}

/* Selección de texto a juego con el telón. */
::selection {
	background: var(--telon);
	color: var(--papel);
}

/* 3. Header
   ------------------------------------------------------------------ */

/* Cabecera fija superior con línea de separación. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--papel);
	border-bottom: 1px solid var(--linea);
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}

/* Marca: glifo de Labanotación + nombre del sitio. */
.site-branding {
	flex-shrink: 0;
}

.site-title {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--fuente-display);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.1;
	text-decoration: none;
}

.site-title:hover {
	text-decoration: none;
}

.brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	color: var(--telon);
}

.brand-mark svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Navegación principal: fila hacia la derecha. */
.main-navigation .nav-menu {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation a {
	font-family: var(--fuente-cuerpo);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--tinta);
	text-decoration: none;
	padding: 0.3rem 0;
	border-bottom: 2px solid transparent;
}

.main-navigation a:hover {
	color: var(--telon);
	text-decoration: none;
}

/* Elemento activo del menú. */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--telon);
	border-bottom-color: var(--telon);
}

/* Móvil: menú en columna bajo la marca. */
@media (max-width: 600px) {
	.site-header .container {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.main-navigation {
		width: 100%;
		padding: 0.75rem 0;
	}

	.main-navigation .nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}

/* 4. Hero + portadas
   ------------------------------------------------------------------ */

/* Hero: papel plano, sin gradiente. */
.hero {
	background: var(--papel);
	border-bottom: 1px solid var(--linea);
}

.hero-layout {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 3rem;
	align-items: center;
}

/* Eyebrow: etiqueta mayúscula con glifo telón (usado en hero y secciones). */
.eyebrow {
	margin: 0 0 0.75rem;
	font-family: var(--fuente-cuerpo);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--grafito);
}

.eyebrow-glyph {
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.35rem;
	width: 12px;
	height: 12px;
	color: var(--telon);
}

.eyebrow-glyph svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Título del hero: display Work Sans con énfasis en itálica telón. */
.hero-titulo {
	margin: 0 0 1.25rem;
	font-family: var(--fuente-display);
	font-size: clamp(2.4rem, 6vw, 4.2rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.hero-titulo em {
	font-style: italic;
	color: var(--telon);
}

/* Formulario de búsqueda. */
#search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 560px;
	margin-bottom: 1.5rem;
}

#search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.85rem 1rem;
	border: 1px solid var(--tinta);
	border-radius: 2px;
	background: var(--papel);
	font-family: var(--fuente-cuerpo);
	font-size: 1rem;
	color: var(--tinta);
}

#search-form input[type="search"]::placeholder {
	color: var(--grafito);
}

/* Foco del buscador: borde telón + anillo suave (además del :focus-visible global). */
#search-form input[type="search"]:focus {
	outline: none;
	border-color: var(--telon);
	box-shadow: 0 0 0 3px rgba(190, 46, 34, 0.15);
}

/* Botón del formulario: botón primario telón. */
#search-form button {
	padding: 0.85rem 1.4rem;
	border: none;
	border-radius: 2px;
	background: var(--telon);
	color: var(--papel);
	font-family: var(--fuente-cuerpo);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

#search-form button:hover {
	background: var(--telon-oscuro);
}

/* Columna de portadas: pila de cinco cubiertas ("el archivo en escena"). */
.hero-portadas {
	position: relative;
	width: 340px;
	height: 480px;
	margin: 0 auto;
}

.hero-cover {
	position: absolute;
	display: block;
	width: 220px;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: 2px;
	transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Banda de estadísticas: patrón CLACSO (etiqueta grande sobre número
   pequeño), con iconos circulares telón y separadores sesgados. */
/* Banda de estadísticas: fondo decorativo de notación de danza
   (eco del pentagrama; imagen dance-notation.svg). */
.stats-band {
	position: relative;
}

/* Capa de fondo absoluta: la banda se estira al ancho de la sección,
   sin tiles ni costuras, centrada DETRÁS del contenido. */
.stats-band::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../img/dance-notation.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0.1;
	pointer-events: none;
}

.stats-grid {
	/* position relative: el grid (posterior en el árbol) pinta
	   por encima de la capa de fondo ::before. */
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.stat-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	text-align: center;
}

/* Separador vertical sesgado (patrón CLACSO): 1px × 100%, inclinado -10°. */
.stat-item + .stat-item::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -1rem; /* centra el filete en el gap de 2rem */
	width: 1px;
	height: 100%;
	background: var(--linea);
	transform: translateY(-50%) skewX(-10deg);
}

/* Icono circular con glifo Laban (excepción al radio 2px: círculo CLACSO). */
.stat-icon {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--telon);
	color: var(--papel);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Círculo por estadística: cada uno usa el color de una categoría
   (tokens --cat-* de la sección 1). Especificidad (0,2,0) > (0,1,0)
   de la base .stat-icon, así que gana sin depender del orden. */
.stat-item--documentos .stat-icon { background: var(--cat-tesis); }
.stat-item--autores .stat-icon { background: var(--cat-articulos); }
.stat-item--paises .stat-icon { background: var(--cat-investigaciones); }
.stat-item--tipos .stat-icon { background: var(--cat-revistas); }

.stat-icon svg {
	width: 26px;
	height: 26px;
	display: block;
}

/* Etiqueta grande (display serif) sobre número pequeño (mono, grafito). */
.stat-label {
	margin: 0 0 0.15rem;
	font-family: var(--fuente-display);
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	font-weight: 500;
	line-height: 1.15;
	color: var(--tinta);
}

.stat-number {
	margin: 0;
	font-family: var(--fuente-mono);
	font-size: 2rem;
	color: var(--grafito);
	letter-spacing: 0.02em;
}

/* Tablets: 2×2, icono sobre texto centrado; sin filete en el inicio de la 2ª fila. */
@media (max-width: 900px) {
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem 2rem;
	}

	.stat-item {
		flex-direction: column;
		text-align: center;
	}

	.stat-item:nth-child(3)::before {
		display: none;
	}
}

/* Móvil: una columna; se ocultan todos los separadores. */
@media (max-width: 600px) {
	.stats-grid {
		grid-template-columns: 1fr;
	}

	.stat-item + .stat-item::before {
		display: none;
	}
}

/* Abanico: cinco cubiertas apiladas en cascada, de atrás hacia el frente.
   La cubierta trasera asoma por la izquierda, las intermedias deslizan
   hacia el centro y la frontal queda al frente, centrada. Los valores
   mantienen todas las capas dentro del contenedor 340×480; el paso
   vertical de ~36px deja asomar cada cubierta trasera. */
.hero-portadas .hero-cover:nth-child(1) {
	top: 14px;
	left: 12px;
	transform: rotate(-9deg);
	z-index: 1;
}

.hero-portadas .hero-cover:nth-child(2) {
	top: 50px;
	left: 24px;
	transform: rotate(-5deg);
	z-index: 2;
}

.hero-portadas .hero-cover:nth-child(3) {
	top: 86px;
	left: 56px;
	transform: rotate(-1deg);
	z-index: 3;
}

.hero-portadas .hero-cover:nth-child(4) {
	top: 122px;
	left: 24px;
	transform: rotate(4deg);
	z-index: 4;
}

.hero-portadas .hero-cover:nth-child(5) {
	top: 156px;
	left: 50%;
	transform: translateX(-50%) rotate(-2deg);
	z-index: 5;
}

/* Al pasar el ratón sobre la pila, el abanico se abre: las cubiertas
   traseras se desparraman hacia afuera y la frontal se eleva. La
   transición lenta viene de .hero-cover (0.65s ease-out). */
@media (hover: hover) {
	.hero-portadas:hover .hero-cover:nth-child(1) {
		transform: translate(-22px, 10px) rotate(-4deg);
	}

	.hero-portadas:hover .hero-cover:nth-child(2) {
		transform: translate(-12px, 4px) rotate(-2deg);
	}

	.hero-portadas:hover .hero-cover:nth-child(3) {
		transform: translate(0, -4px) rotate(0deg);
	}

	.hero-portadas:hover .hero-cover:nth-child(4) {
		transform: translate(12px, -8px) rotate(2deg);
	}

	.hero-portadas:hover .hero-cover:nth-child(5) {
		transform: translate(-50%, -12px) rotate(0deg);
	}
}

/* Tablets y móviles: una columna; la pila de portadas se oculta. */
@media (max-width: 900px) {
	.hero-layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.hero-portadas {
		display: none;
	}
}

/* 5. Secciones y eyebrows
   ------------------------------------------------------------------ */

/* Sección editorial: filete superior y aire generoso por arriba/abajo. */
.seccion {
	border-top: 1px solid var(--linea);
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

/* Cabecera: eyebrow y título a la izquierda, acción a la derecha. */
.seccion-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
}

.seccion-header h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 0;
}

/* El eyebrow ya está estilado en la sección 4; aquí solo se le da línea
   propia por encima del título para mantener la alineación editorial. */
.seccion-header .eyebrow {
	flex: 1 1 100%;
	margin-bottom: 0;
}

/* Acción de cabecera: pill con filete tinta que se rellena al hover. */
.seccion-accion {
	font-family: var(--fuente-cuerpo);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: 1px solid var(--tinta);
	border-radius: 3px;
	padding: 0.5rem 1.1rem;
	color: var(--tinta);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s;
}

.seccion-accion:hover {
	background: var(--tinta-2);
	color: var(--papel);
	text-decoration: none;
}

/* 6. Cards
   ------------------------------------------------------------------ */

/* Cuadrícula de documentos: columnas adaptativas. */
.documents-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* Home: la cuadrícula del archivo fija 4 columnas en escritorio para que
   los 8 documentos formen 2 filas completas (evita la tarjeta huérfana
   que produce auto-fill con 5 columnas). El resto de usos de la
   cuadrícula (archives, resultados, relacionados) conservan auto-fill. */
@media (min-width: 901px) {
	.home .documents-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.documents-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

/* Tarjeta: columna con portada arriba y cuerpo abajo. */
.document-card {
	display: flex;
	flex-direction: column;
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: 3px;
	transition: border-color 0.2s, transform 0.2s;
}

@media (hover: hover) {
	.document-card:hover {
		border-color: var(--tinta);
		transform: translateY(-3px);
	}

	/* Hover por categoría: el borde de la tarjeta se tiñe con el color de su
	   tipo documental (--cat-color definido por la clase modificadora).
	   Misma especificidad que .document-card:hover; gana por orden de fuente.
	   El translateY(-3px) de la regla base se conserva intacto. */
	.document-card--tesis:hover,
	.document-card--articulos:hover,
	.document-card--investigaciones:hover,
	.document-card--libros:hover,
	.document-card--memorias:hover,
	.document-card--revistas:hover {
		border-color: var(--cat-color);
	}
}

/* Clases modificadoras de categoría: .document-card--{slug} y
   .category-card--{slug} (añadidas por el marcado server y por el JS de
   resultados) comparten la misma custom property --cat-color con el color
   del tipo documental. La mecánica es: clase modificadora → custom property
   → badge y hover. Sin la clase, --cat-color no existe y la tarjeta usa los
   valores base (--badge por defecto, borde tinta al hover).
   Los valores hex viven en :root (sección 1) como tokens --cat-{slug};
   aquí solo se referencian para editar la paleta en un solo lugar. */
.document-card--tesis,
.category-card--tesis { --cat-color: var(--cat-tesis); }
.document-card--articulos,
.category-card--articulos { --cat-color: var(--cat-articulos); }
.document-card--investigaciones,
.category-card--investigaciones { --cat-color: var(--cat-investigaciones); }
.document-card--libros,
.category-card--libros { --cat-color: var(--cat-libros); }
.document-card--memorias,
.category-card--memorias { --cat-color: var(--cat-memorias); }
.document-card--revistas,
.category-card--revistas { --cat-color: var(--cat-revistas); }

/* Badge por categoría: la insignia hereda el color de su tipo documental
   (texto blanco sobre --cat-color, contraste ≥ 4.5:1). La regla base
   .type-badge con background: var(--badge) queda intacta como fallback
   para tarjetas sin categoría conocida. */
.document-card--tesis .type-badge,
.document-card--articulos .type-badge,
.document-card--investigaciones .type-badge,
.document-card--libros .type-badge,
.document-card--memorias .type-badge,
.document-card--revistas .type-badge {
	background: var(--cat-color);
	border-color: var(--cat-color);
}

/* Portada: rectángulo 3:4; la imagen llena el marco y se amplía al hover. */
.card-cover {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--papel-2);
}

.card-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

@media (hover: hover) {
	.document-card:hover .card-cover img {
		transform: scale(1.03);
	}
}

/* Cuerpo de la tarjeta (solo en el marcado server). El CSS no depende de
   este wrapper: el re-render AJAX genera los mismos hijos como hermanos
   directos, y cada uno está estilizado por su propia clase. */
.card-cuerpo {
	padding: 0.9rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

/* Meta (tipo + año): solo existe en el marcado server. Se estiliza aquí
   como fila, pero .type-badge y .year también se ven bien como hermanos
   directos (caso AJAX) gracias a sus reglas individuales. */
.card-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
}

/* Insignia de tipo documental. */
.type-badge {
	font-family: var(--fuente-cuerpo);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: 1px solid var(--linea);
	border-radius: 2px;
	padding: 0.15rem 0.45rem;
	color: var(--papel);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 70%;
	display: inline-block;
	background: var(--badge);
}

/* Año: dato monoespaciado. */
.year {
	font-family: var(--fuente-mono);
	font-size: 0.78rem;
	color: var(--grafito);
	margin: 0;
	display: inline-block;
}

/* Título: cubre .documento-titulo (server) y el h3 sin clase que generan
   renderResults y crearTarjetaDocumento en el AJAX. */
.documento-titulo,
.document-card h3 {
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.25;
	margin: 0 0 0.35rem;
}

.documento-titulo a,
.document-card h3 a {
	text-decoration: none;
	color: inherit;
}

.documento-titulo a:hover,
.document-card h3 a:hover {
	color: var(--telon);
	text-decoration: none;
}

/* Autor. */
.author {
	font-size: 0.85rem;
	color: var(--grafito);
	margin: 0 0 0.85rem;
}

/* Acciones: ancladas al pie de la tarjeta. En escritorio aparecen al hacer
   hover sobre la tarjeta, pero el espacio queda reservado siempre con
   margin-top auto para que el hover no cambie la altura. */
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.5rem;
}

@media (hover: hover) {
	.actions {
		opacity: 0;
		transform: translateY(4px);
		transition: opacity 0.2s, transform 0.2s;
	}

	.document-card:hover .actions {
		opacity: 1;
		transform: none;
	}
}

/* Táctil y ventanas estrechas: las acciones siempre visibles. */
@media (hover: none), (max-width: 900px) {
	.actions {
		opacity: 1;
		transform: none;
	}
}

/* 7. Botones
   ------------------------------------------------------------------ */

/* Botón base (el del buscador #search-form ya está estilado en la sección 4). */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1rem;
	font-family: var(--fuente-cuerpo);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 2px;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* Primario: telón. */
.btn-primary {
	background: var(--telon);
	color: var(--papel);
}

.btn-primary:hover {
	background: var(--telon-oscuro);
	color: var(--papel);
	text-decoration: none;
}

/* Secundario: filete tinta que se rellena al hover. */
.btn-secondary {
	background: transparent;
	border-color: var(--tinta-2);
	color: var(--tinta);
}

.btn-secondary:hover {
	background: var(--tinta-2);
	color: var(--papel);
	text-decoration: none;
}

/* En las tarjetas los botones son más compactos. */
.document-card .btn {
	padding: 0.45rem 0.7rem;
	font-size: 0.78rem;
}

/* Acción "aprende más" (uiverse.io/cssbuttons-io/massive-mayfly-74):
   círculo tinta con flecha que se expande a todo el ancho al hover,
   etiqueta en papel. Sin sombras ni gradientes: solo transición. */
.learn-more {
	position: relative;
	display: inline-block;
	width: 12rem;
	height: auto;
	cursor: pointer;
	border: 0;
	vertical-align: middle;
	text-decoration: none;
	background: transparent;
	padding: 0;
	font-size: inherit;
	font-family: inherit;
}

.learn-more .circle {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: relative;
	display: block;
	margin: 0;
	width: 3rem;
	height: 3rem;
	background: var(--telon);
	border-radius: 999px;
}

.learn-more .circle .icon {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	background: var(--papel);
}

.learn-more .circle .icon.arrow {
	left: 0.625rem;
	width: 1.125rem;
	height: 0.125rem;
	background: none;
}

.learn-more .circle .icon.arrow::before {
	position: absolute;
	content: "";
	top: -0.29rem;
	right: 0.0625rem;
	width: 0.625rem;
	height: 0.625rem;
	border-top: 0.125rem solid var(--papel);
	border-right: 0.125rem solid var(--papel);
	transform: rotate(45deg);
}

.learn-more .button-text {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.75rem 0;
	margin: 0 0 0 1.85rem;
	color: var(--tinta);
	font-family: var(--fuente-cuerpo);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.6;
	text-align: center;
	text-transform: uppercase;
}

.learn-more:hover .circle {
	width: 100%;
}

.learn-more:hover .circle .icon.arrow {
	background: var(--papel);
	transform: translate(1rem, 0);
}

.learn-more:hover .button-text {
	color: var(--papel);
}

/* El hero necesita más ancho para "Búsqueda avanzada". */
.hero-avanzada-enlace .learn-more {
	width: 16rem;
}

/* Neutraliza los estilos heredados de .seccion-accion en estas acciones. */
.seccion-accion.learn-more {
	border: 0;
	padding: 0;
	background: transparent;
}

.seccion-accion.learn-more:hover {
	background: transparent;
}

/* 8. Categorías
   ------------------------------------------------------------------ */

/* Cuadrícula de categorías: tarjetas enlazadas, sin iconos. */
.categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
}

.category-card {
	display: block;
	border: 1px solid var(--linea);
	padding: 1.25rem 1.1rem;
	text-decoration: none;
	background: var(--papel);
	transition: border-color 0.2s, transform 0.2s;
}

@media (hover: hover) {
	.category-card:hover {
		border-color: var(--telon);
		transform: translateY(-2px);
		text-decoration: none;
	}

	/* Hover por categoría: el borde se tiñe con --cat-color (definido por la
	   clase modificadora .category-card--{slug}). Misma especificidad que
	   .category-card:hover; gana por orden de fuente. */
	.category-card--tesis:hover,
	.category-card--articulos:hover,
	.category-card--investigaciones:hover,
	.category-card--libros:hover,
	.category-card--memorias:hover,
	.category-card--revistas:hover {
		border-color: var(--cat-color);
	}
}

.category-card h2 {
	font-size: 1.15rem;
	font-weight: 500;
	margin: 0 0 0.35rem;
	color: var(--tinta);
}

.category-card .count {
	font-family: var(--fuente-cuerpo);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--grafito);
}

/* Imagen ilustrativa de la categoría: a sangre en la parte superior de la
   tarjeta (margen negativo que compensa el padding de .category-card). */
.category-card-imagen {
	display: block;
	margin: -1.25rem -1.1rem 0.75rem;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--linea);
	border-bottom: 1px solid var(--linea);
}

.category-card-imagen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 9. Bambalinas
   ------------------------------------------------------------------ */

/* Bloque oscuro de cierre de la home: cita editorial + subetiqueta. */
.bambalinas {
	background: var(--tinta);
	color: var(--papel);
	text-align: center;
	padding: clamp(3rem, 7vw, 5rem) 0;
	border-top: 1px solid var(--linea);
}

.bambalinas-cita {
	margin: 0 auto 0.75rem;
	max-width: 640px;
	font-family: var(--fuente-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	line-height: 1.2;
}

.bambalinas-sub {
	margin: 0;
	font-family: var(--fuente-cuerpo);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(251, 250, 247, 0.7);
}

/* 10. Footer
   ------------------------------------------------------------------ */

/* Colofón: fondo tinta con filete telón superior como detalle de cierre. */
.site-footer {
	background: var(--tinta);
	color: var(--papel);
	border-top: 4px solid var(--telon);
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}

.footer-grid p {
	margin: 0;
}

/* Marca del colofón: nombre del sitio en Work Sans. El .brand-mark ya
   está estilado en la sección 3 (glifo en telón), se reutiliza aquí. */
.footer-titulo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	font-family: var(--fuente-display);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.1;
}

/* Licencia y textos descriptivos. */
.footer-licencia {
	font-family: var(--fuente-cuerpo);
	font-size: 0.8rem;
	line-height: 1.6;
	color: rgba(251, 250, 247, 0.7);
}

/* Footer: enlace permanente a la política de acceso abierto. */
.footer-acceso {
	margin-top: 0.75rem;
}

.footer-acceso a {
	font-family: var(--fuente-cuerpo);
	font-size: 0.8rem;
	color: var(--papel);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(251, 250, 247, 0.4);
}

.footer-acceso a:hover {
	text-decoration-color: var(--telon);
}

/* Menú footer: ul generado por wp_nav_menu con menu_class footer-menu-lista. */
.footer-menu-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-menu-lista li {
	margin-bottom: 0.4rem;
}

.footer-menu-lista a {
	font-family: var(--fuente-cuerpo);
	font-size: 0.85rem;
	color: rgba(251, 250, 247, 0.85);
	text-decoration: none;
}

.footer-menu-lista a:hover {
	color: var(--papel);
	text-decoration: none;
}

/* Encabezados de columna del pie: eyebrow en mayúsculas, mismo registro
   que los eyebrows de sección pero en tinta clara sobre fondo oscuro. */
.footer-col-titulo {
	margin: 0 0 0.9rem;
	font-family: var(--fuente-cuerpo);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(251, 250, 247, 0.55);
}

/* Fila final del colofón: el © separado de las columnas por un filete. */
.footer-copy-row {
	border-top: 1px solid rgba(251, 250, 247, 0.15);
	padding: 1rem 0 clamp(1.5rem, 4vw, 2.25rem);
}

.footer-copy {
	margin: 0;
	font-family: var(--fuente-cuerpo);
	font-size: 0.75rem;
	color: rgba(251, 250, 247, 0.55);
}

@media (max-width: 700px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

/* 11. Single / ficha catalográfica
   ------------------------------------------------------------------ */

.documento-header {
	border-bottom: 1px solid var(--linea);
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
}

.documento-header h1 {
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.15;
	margin: 0 0 1rem;
}

/* Miga de pan: Inicio / Catálogo / tipo. El filete inferior separa la miga
   de la ficha; los separadores "/" (aria-hidden) usan un tono #C9C4BA,
   más oscuro que --linea, para ser legibles sobre el papel. */
.documento-breadcrumb {
	margin: 1.5rem 0 0;
	font-family: var(--fuente-cuerpo);
	font-size: 0.8rem;
	color: var(--grafito);
	border-bottom: 1px solid var(--linea);
	padding-bottom: 1rem;
	margin-bottom: 2rem;
}

.documento-breadcrumb a {
	color: var(--grafito);
	text-decoration: none;
}

.documento-breadcrumb a:hover {
	color: var(--telon);
	text-decoration: none;
}

.documento-breadcrumb [aria-hidden="true"] {
	margin: 0 0.4rem;
	color: #C9C4BA;
}

.documento-breadcrumb-actual {
	color: var(--tinta);
}

/* Ficha en dos columnas: portada fija a la izquierda, información fluida. */
.documento-layout {
	display: grid;
	grid-template-columns: minmax(240px, 300px) 1fr;
	gap: 2.5rem;
	align-items: start;
	margin-bottom: 3rem;
}

@media (max-width: 900px) {
	.documento-layout {
		grid-template-columns: 1fr;
	}

	/* En móvil el grid colapsa a 1fr y el aside (portada, que ahora contiene
	   el detalle) iría primero; con order: -1 el título/resumen quedan arriba
	   y el detalle se lee después. */
	.documento-info {
		order: -1;
	}

	.documento-portada {
		max-width: 260px;
		margin-inline: auto;
	}
}

/* Portada: el contenedor no lleva fondo ni borde; solo el marco de la figura. */
.documento-portada-figura {
	margin: 0 0 1.25rem;
}

.documento-portada-figura img {
	width: 100%;
	height: auto;
	border: 1px solid var(--linea);
	background: var(--papel);
	display: block;
	border-radius: 1px;
}

/* Descarga y afiliado a ancho completo dentro de la columna de portada. */
.documento-portada .boton-descargar {
	display: block;
	width: 100%;
	text-align: center;
}

.documento-portada .afiliado {
	margin-top: 0.75rem;
}

.documento-portada .afiliado .boton-afiliado {
	display: block;
	width: 100%;
	text-align: center;
}

/* Columna de información: permite que el grid encoja sin desbordar. */
.documento-info {
	min-width: 0;
}

.documento-header .eyebrow {
	margin-bottom: 0.75rem;
}

/* Autores: display itálica bajo el título. */
.documento-autores {
	font-family: var(--fuente-display);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--tinta);
	margin: 0 0 0.5rem;
}

/* Resumen: prosa editorial con ancho de lectura cómodo. */
.documento-resumen {
	margin: 1.75rem 0 0;
	max-width: 68ch;
}

.documento-resumen p {
	margin: 0 0 1.25rem;
	line-height: 1.75;
}

.documento-resumen p:first-of-type {
	font-size: 1.05rem;
}

.documento-resumen h2,
.documento-resumen h3 {
	margin: 1.5rem 0 0.75rem;
}

.documento-resumen ul,
.documento-resumen ol {
	padding-left: 1.5rem;
	margin: 0 0 1.25rem;
}

.documento-resumen li {
	margin-bottom: 0.5rem;
}

.documento-resumen li:last-child {
	margin-bottom: 0;
}

.documento-resumen blockquote {
	border-left: 2px solid var(--telon);
	padding: 0.25rem 0 0.25rem 1rem;
	margin: 0 0 1.25rem;
	color: var(--grafito);
	font-style: italic;
}

.documento-resumen a {
	color: var(--telon);
	text-decoration: underline;
	text-decoration-color: var(--linea);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.documento-resumen a:hover {
	text-decoration-color: var(--telon);
}

.documento-resumen img.aligncenter {
	display: block;
	margin: 1.5rem auto;
}

/* Cita de referencia: caja con filete telón a la izquierda. */
.documento-cita {
	border: 1px solid var(--linea);
	border-left: 3px solid var(--telon);
	padding: 1.25rem 1.5rem;
	margin: 2rem 0 0;
	background: transparent;
}

.documento-cita-texto {
	font-family: var(--fuente-cuerpo);
	font-size: 0.95rem;
	line-height: 1.7;
	margin: 0 0 0.75rem;
}

.documento-cita-texto em {
	font-family: var(--fuente-display);
	font-style: italic;
}

.documento-cita-texto a {
	color: var(--telon);
	text-decoration: underline;
	text-decoration-color: var(--linea);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.documento-cita-texto a:hover {
	text-decoration-color: var(--telon);
}

/* Botón copiar: compacto respecto al .btn base. */
#copiar-cita {
	padding: 0.45rem 0.9rem;
	font-size: 0.85rem;
}

/* Detalle: filete superior que abre la ficha de metadatos. */
.documento-detalle {
	margin-top: 2.5rem;
	border-top: 1px solid var(--linea);
	padding-top: 1.5rem;
}

.documento-detalle h2 {
	font-family: var(--fuente-display);
	font-size: 1.4rem;
	font-weight: 500;
	margin: 0 0 1.25rem;
}

/* Ficha en dos columnas: etiqueta y valor separados por filetes. */
.documento-metadatos {
	display: grid;
	grid-template-columns: 170px 1fr;
	margin: 0 0 2rem;
}

.documento-metadatos dt {
	padding: 0.6rem 1rem 0.6rem 0;
	border-bottom: 1px solid var(--linea);
	font-family: var(--fuente-cuerpo);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--grafito);
}

.documento-metadatos dd {
	margin: 0;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--linea);
	font-family: var(--fuente-cuerpo);
	font-size: 0.92rem;
}

/* DOI/ISBN se imprimen sin clase propia (single-documento.php); reciben el
   mismo tratamiento que el resto de los dd, sin mono. */
.documento-metadatos dd a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	overflow-wrap: anywhere;
}

.documento-metadatos dd a:hover {
	color: var(--telon);
}

@media (max-width: 600px) {
	.documento-metadatos {
		grid-template-columns: 1fr;
	}

	.documento-metadatos dt {
		padding: 0.6rem 0 0.2rem;
		border-bottom: none;
	}
}

/* El detalle vive ahora en la columna portada: ficha de una sola columna. */
.documento-portada .documento-metadatos {
	grid-template-columns: 1fr;
}

.documento-portada .documento-metadatos dt {
	padding: 0.6rem 0 0.2rem;
	border-bottom: none;
}

.documento-portada .documento-detalle {
	margin-top: 1.5rem;
}

/* Links de autores bajo el título (mismo tratamiento que los dd del detalle). */
.documento-autores a {
	color: var(--telon);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Visor nativo de WordPress (iframe del navegador): columna derecha, bajo la cita. */
.documento-visor-nativo {
	margin-top: 2rem;
}

.pdf-visor-nativo {
	margin: 0;
}

.pdf-visor-nativo iframe {
	display: block;
	width: 100%;
	height: 80vh;
	min-height: 560px;
	max-height: 900px;
	border: 1px solid var(--linea);
	background: var(--papel);
	border-radius: 1px;
}

/* Visor PDF.js. */
.pdf-seccion {
	margin-bottom: 2rem;
}

.pdf-viewer {
	border: 1px solid var(--tinta);
	background: var(--papel-2);
	padding: 1rem;
	margin-bottom: 0.75rem;
}

#pdf-canvas {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.pdf-controles {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}

.pdf-contador {
	font-family: var(--fuente-mono);
	font-size: 0.85rem;
	color: var(--grafito);
}

/* Descarga: primario grande (el enlace usa .boton-descargar, no .btn). */
.boton-descargar {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.85rem 1.5rem;
	background: var(--telon);
	color: var(--papel);
	font-family: var(--fuente-cuerpo);
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: 2px;
	text-decoration: none;
}

.boton-descargar:hover {
	background: var(--telon-oscuro);
	color: var(--papel);
	text-decoration: none;
}

/* Afiliado: secundario con filete tinta. */
.afiliado {
	margin-top: 1rem;
}

.boton-afiliado {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--tinta);
	color: var(--tinta);
	padding: 0.6rem 1.2rem;
	font-family: var(--fuente-cuerpo);
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 2px;
	text-decoration: none;
}

.boton-afiliado:hover {
	background: var(--tinta);
	color: var(--papel);
	text-decoration: none;
}

/* Relacionados: las .document-card internas ya están estiladas en la sección 6. */
.relacionados {
	border-top: 1px solid var(--linea);
	margin-top: 3rem;
	padding-top: 2rem;
}

.relacionados h2 {
	font-size: 1.5rem;
	margin-bottom: 1.25rem;
}

.relacionados-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.75rem;
}

/* Sección "Ver más documentos": barra de categorías debajo de los relacionados. */
.categorias-mas {
	margin-top: 3rem;
	border-top: 1px solid var(--linea);
	padding-top: 2rem;
}

/* Título a la izquierda (por defecto de .seccion-header) y barra de botones centrada. */
.categorias-mas .categorias-barra {
	justify-content: center;
}

.categorias-barra {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.categorias-barra .btn {
	padding: 0.4rem 0.85rem;
	font-size: 0.85rem;
}

.categorias-barra .btn.current {
	background: var(--tinta);
	color: var(--papel);
	border-color: var(--tinta);
}

/* 12. Resultados y facetas
   ------------------------------------------------------------------ */

.resultados-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 2.5rem;
	align-items: start;
}

/* Panel de facetas: columna pegajosa con filete derecho. */
.facetas {
	position: sticky;
	top: 90px;
	border-right: 1px solid var(--linea);
	padding-right: 1.5rem;
}

/* Título de grupo: h3 (Tipo documental, Año) o label en primera posición
   (Buscar, Autor, Publicador, País) según el marcado de page-resultados.php. */
.facet-group {
	margin-bottom: 1.5rem;
}

.facet-group h3,
.facet-group > label:first-child {
	display: block;
	margin: 0 0 0.5rem;
	font-family: var(--fuente-cuerpo);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--grafito);
}

/* Opciones: labels que envuelven una casilla (checkboxes de tipo). */
.facet-group label:has(> input[type="checkbox"]),
.facet-group label:has(> input[type="radio"]) {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.3rem 0;
	font-family: var(--fuente-cuerpo);
	font-size: 0.88rem;
	line-height: 1.4;
}

.facet-group input[type="checkbox"],
.facet-group input[type="radio"] {
	accent-color: var(--telon);
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* Controles de formulario de las facetas (buscador, selects y años). */
.facet-group input[type="search"],
.facet-group select,
.facet-anio input {
	width: 100%;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--linea);
	border-radius: 2px;
	background: var(--papel);
	font-family: var(--fuente-cuerpo);
	font-size: 0.85rem;
	color: var(--tinta);
}

.facet-group input[type="search"]:focus,
.facet-group select:focus,
.facet-anio input:focus {
	outline: none;
	border-color: var(--telon);
}

/* Rango de años: dos columnas Desde/Hasta. */
.facet-anio {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 0.75rem;
}

.facet-anio label {
	font-family: var(--fuente-cuerpo);
	font-size: 0.78rem;
	color: var(--grafito);
}

/* Botón Filtrar: ya trae .btn.btn-primary (sección 7); aquí se expande. */
.facetas .btn-primary {
	width: 100%;
	justify-content: center;
	padding: 0.7rem 1rem;
}

/* Contador de resultados y avisos de vacío (JS y fallback server). */
.total-resultados {
	margin: 0 0 1rem;
	font-family: var(--fuente-cuerpo);
	font-size: 0.85rem;
	color: var(--grafito);
}

.sin-resultados,
.no-results,
.documents-grid > p:first-child:last-child {
	margin-top: 1rem;
	padding: 3rem 1rem;
	text-align: center;
	border-top: 1px dashed var(--linea);
	font-family: var(--fuente-cuerpo);
	color: var(--grafito);
}

@media (max-width: 900px) {
	.resultados-layout {
		grid-template-columns: 1fr;
	}

	.facetas {
		position: static;
		border-right: none;
		border-bottom: 1px solid var(--linea);
		padding: 0 0 1.25rem;
	}
}

/* Aire antes del footer: la paginación de resultados queda pegada al
   colofón; el padding del contenedor principal da respiro al cierre. */
body.page-template-page-resultados-php .site-content {
	padding-bottom: 4rem;
}

@media (max-width: 900px) {
	body.page-template-page-resultados-php .site-content {
		padding-bottom: 2rem;
	}
}

/* 13. Búsqueda avanzada
   ------------------------------------------------------------------ */

/* Sección de búsqueda simple que abre la página de búsqueda: columna
   centrada con filete inferior que separa del constructor booleano. */
.busqueda-simple {
	max-width: 720px;
	margin: 0 auto 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--linea);
}

/* El buscador reutiliza #search-form (sección 4); aquí solo se quita el
   margen inferior que en el hero separa del enlace de avanzada. */
.busqueda-simple #search-form {
	margin-bottom: 0;
}

/* Constructor booleano de /busqueda-avanzada/: columna centrada con ancho
   de lectura cómodo (la página es un formulario de construcción). */
#form-avanzada {
	max-width: 720px;
	margin-inline: auto;
}

/* Sección de búsqueda avanzada: misma columna centrada que la simple. */
.busqueda-avanzada-seccion {
	max-width: 720px;
	margin: 0 auto;
}

/* Ancla del eyebrow "Booleana" (botón "Búsqueda avanzada" del hero): margen
   de scroll para que el header sticky no tape el destino. */
#booleana {
	scroll-margin-top: 90px;
}

/* Títulos h1 de ambas secciones: escala de archive-header sobre la
   cabecera flex de .seccion-header (eyebrow en línea propia). */
.busqueda-simple h1,
.busqueda-avanzada-seccion h1 {
	margin: 0;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
}

/* Selector "Coincide:" (join global ALL/NONE): etiqueta mayúscula como la
   de .facet-group h3 y select a juego con los de las facetas. */
.avanzada-join {
	margin-bottom: 1.5rem;
}

.avanzada-join label {
	display: block;
	margin: 0 0 0.5rem;
	font-family: var(--fuente-cuerpo);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--grafito);
}

.avanzada-join select {
	width: 100%;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--linea);
	border-radius: 2px;
	background: var(--papel);
	font-family: var(--fuente-cuerpo);
	font-size: 0.85rem;
	color: var(--tinta);
}

.avanzada-join select:focus {
	outline: none;
	border-color: var(--telon);
}

/* Grupo de búsqueda: caja con filete hairline, fondo transparente. */
.grupo-busqueda {
	border: 1px solid var(--linea);
	padding: 1rem;
	margin-bottom: 1.25rem;
	background: transparent;
}

/* Cabecera del grupo: etiqueta "Buscar:" a la izquierda, acción a la derecha. */
.grupo-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.grupo-header .grupo-etiqueta {
	font-family: var(--fuente-cuerpo);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--grafito);
}

/* Botones fantasma (Borrar grupo / quitar fila): sin borde ni fondo,
   grafito que se enciende en telón al hover. */
.quitar-grupo,
.quitar-fila {
	border: none;
	background: none;
	padding: 0.25rem 0.4rem;
	font-family: var(--fuente-cuerpo);
	font-size: 0.8rem;
	color: var(--grafito);
	cursor: pointer;
	text-decoration: none;
	transition: color 0.15s;
}

.quitar-grupo:hover,
.quitar-fila:hover {
	color: var(--telon);
	text-decoration: none;
}

/* Fila de búsqueda: término + campo + quitar en una línea. */
.fila-busqueda {
	display: grid;
	grid-template-columns: 1fr 180px auto;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.5rem;
}

.fila-busqueda input[type="search"],
.fila-busqueda select {
	width: 100%;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--linea);
	border-radius: 2px;
	background: var(--papel);
	font-family: var(--fuente-cuerpo);
	font-size: 0.85rem;
	color: var(--tinta);
}

.fila-busqueda input[type="search"]:focus,
.fila-busqueda select:focus {
	outline: none;
	border-color: var(--telon);
}

/* Botón "×" de quitar fila: ancho fijo para que el grid no salte. */
.quitar-fila {
	width: 2rem;
	justify-self: end;
	font-size: 1rem;
	line-height: 1;
}

/* Acciones de añadir (fila y grupo): estilo enlace telón, subrayado al hover. */
.agregar-fila,
#agregar-grupo {
	border: none;
	background: none;
	padding: 0.2rem 0;
	font-family: var(--fuente-cuerpo);
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--telon);
	cursor: pointer;
	text-decoration: none;
}

.agregar-fila:hover,
#agregar-grupo:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Operador del grupo: select a juego con las facetas, con aire vertical. */
.op-grupo {
	display: block;
	max-width: 200px;
	margin-block: 0.75rem;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--linea);
	border-radius: 2px;
	background: var(--papel);
	font-family: var(--fuente-cuerpo);
	font-size: 0.85rem;
	color: var(--tinta);
}

.op-grupo:focus {
	outline: none;
	border-color: var(--telon);
}

/* Límites: reutiliza las reglas globales de .facet-group; solo se añade el
   filete de apertura y el título del bloque "Limitar". */
.avanzada-limites {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linea);
}

.avanzada-limites .limites-titulo {
	margin: 0 0 1.25rem;
	font-family: var(--fuente-cuerpo);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--grafito);
}

/* Acciones finales del constructor (Limpiar / Buscar). */
.avanzada-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* Enlace a la búsqueda avanzada desde las facetas de /resultados/. */
.facetas-avanzada-enlace {
	margin: 1rem 0 0;
	font-family: var(--fuente-cuerpo);
	font-size: 0.85rem;
}

.facetas-avanzada-enlace a {
	color: var(--telon);
	text-decoration: none;
}

.facetas-avanzada-enlace a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Enlace a la búsqueda avanzada bajo el buscador del hero (home.php):
   etiqueta pequeña mayúscula, grafito que se enciende en telón al hover. */
.hero-avanzada-enlace {
	margin: 0 0 1.25rem;
	font-family: var(--fuente-cuerpo);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.hero-avanzada-enlace a {
	color: var(--grafito);
	text-decoration: none;
}

.hero-avanzada-enlace a:hover {
	color: var(--telon);
	text-decoration: none;
}

/* Móvil: las filas se apilan en una columna y los grupos pierden aire. */
@media (max-width: 900px) {
	.fila-busqueda {
		grid-template-columns: 1fr;
	}

	.grupo-busqueda {
		padding: 0.75rem;
	}
}

/* Aire antes del footer: el formulario termina con las acciones pegadas
   al colofón; el padding del contenedor principal da respiro al cierre. */
body.page-template-page-busqueda-avanzada-php .site-content {
	padding-bottom: 4rem;
}

@media (max-width: 900px) {
	body.page-template-page-busqueda-avanzada-php .site-content {
		padding-bottom: 2rem;
	}
}

/* 14. Paginación
   ------------------------------------------------------------------ */

/* Paginación de the_posts_pagination() y de biblioteca.js. */
.navigation.pagination {
	margin-top: 2.5rem;
	text-align: center;
}

.nav-links {
	display: inline-flex;
	justify-content: center;
	gap: 0.35rem;
	flex-wrap: wrap;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2rem;
	height: 2.2rem;
	padding: 0 0.5rem;
	border: 1px solid var(--linea);
	border-radius: 2px;
	color: var(--tinta);
	font-family: var(--fuente-cuerpo);
	font-size: 0.85rem;
	text-decoration: none;
}

a.page-numbers:hover {
	border-color: var(--tinta);
	background: var(--papel-2);
	text-decoration: none;
}

.page-numbers.current {
	background: var(--telon);
	border-color: var(--telon);
	color: var(--papel);
}

/* Flechas « » ‹ › de prev/next: un punto más grandes para que respiren. */
.page-numbers.prev,
.page-numbers.next {
	font-size: 1rem;
	line-height: 1;
}

/* 15. Páginas (fuentes, acerca, enviar)
   ------------------------------------------------------------------ */

.fuentes-tabla {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--fuente-cuerpo);
	font-size: 0.9rem;
}

.fuentes-tabla th {
	padding: 0.6rem 0.5rem;
	border-bottom: 1px solid var(--tinta);
	text-align: left;
	font-family: var(--fuente-cuerpo);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--grafito);
}

.fuentes-tabla td {
	padding: 0.6rem 0.5rem;
	border-bottom: 1px solid var(--linea);
	vertical-align: top;
	overflow-wrap: anywhere;
}

.fuentes-tabla tbody tr:hover td {
	background: var(--papel-2);
}

/* Acerca: columna editorial con h2 fileteados. */
.acerca-contenido {
	max-width: 720px;
	margin-inline: auto;
	font-size: 0.95rem;
	line-height: 1.75;
}

.acerca-contenido h2 {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linea);
	font-size: 1.4rem;
}

/* Sección acceso abierto (dentro de Acerca): columna editorial con cita destacada y declaración. */
.acceso-abierto {
	max-width: 720px;
	font-size: 0.95rem;
	line-height: 1.75;
}

.acceso-abierto .acceso-abierto-lead {
	font-family: var(--fuente-display);
	font-size: 1.15rem;
	line-height: 1.5;
}

.acceso-abierto .acceso-seccion {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linea);
}

.acceso-abierto h2 {
	margin: 0;
	font-size: 1.4rem;
}

.acceso-abierto h3 {
	margin: 1.75rem 0 0.5rem;
	font-size: 1.15rem;
}

.acceso-abierto blockquote {
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--telon);
	background: var(--papel-2);
	font-family: var(--fuente-display);
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1.6;
}

.acceso-abierto blockquote p {
	margin: 0 0 0.5rem;
}

.acceso-abierto blockquote cite {
	display: block;
	font-family: var(--fuente-cuerpo);
	font-size: 0.8rem;
	font-style: normal;
	color: var(--grafito);
}

.acceso-abierto ol,
.acceso-abierto ul {
	padding-left: 1.25rem;
}

.acceso-abierto li {
	margin-bottom: 0.5rem;
}

.acceso-abierto li strong {
	font-weight: 600;
}

/* Declaración de Berlín: bloque sobre papel 2 con filete. */
.acceso-abierto .declaracion {
	margin-top: 1.5rem;
	padding: 1.5rem 2rem;
	background: var(--papel-2);
	border: 1px solid var(--linea);
	border-radius: 2px;
}

.acceso-abierto .declaracion .acceso-seccion {
	border-top: 1px solid var(--linea);
}

/* Atribución de fuentes al pie de la página. */
.acceso-atribucion {
	margin-top: 2.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--linea);
	font-size: 0.8rem;
	color: var(--grafito);
}

/* Enviar: aviso de fase en construcción. */
.aviso-fase {
	border: 1px solid var(--telon);
	background: var(--papel-2);
	padding: 1.25rem 1.5rem;
	border-radius: 2px;
	font-family: var(--fuente-cuerpo);
	font-size: 0.9rem;
	line-height: 1.6;
}

.aviso-fase p {
	margin: 0;
}

/* Enviar: formulario multi-paso (progressive enhancement). */
.envio-form {
	max-width: 720px;
	margin-inline: auto;
}

/* Indicador de pasos: fila numerada con filetes hairline. */
.envio-pasos-indicador {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	margin: 0 0 2rem;
	padding: 0 0 0.5rem;
	list-style: none;
	border-bottom: 1px solid var(--linea);
	font-family: var(--fuente-cuerpo);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.envio-pasos-indicador li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0;
	color: var(--grafito);
}

/* Número del paso en un círculo hairline (reusa la forma de las pills). */
.envio-pasos-indicador li::before {
	content: attr(data-paso);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border: 1px solid var(--linea);
	border-radius: 999px;
	font-family: var(--fuente-mono);
	font-size: 0.75rem;
}

.envio-pasos-indicador li.activo {
	color: var(--tinta);
}

.envio-pasos-indicador li.activo::before {
	border-color: var(--telon);
	color: var(--telon);
}

.envio-pasos-indicador li.completado::before {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--papel);
}

/* Pasos: sin borde por defecto. Solo se ocultan los pasos inactivos cuando
   el asistente JS está activo (.js-envio); sin JavaScript los tres pasos
   son visibles y el envío funciona con un único submit. */
.paso-envio {
	margin: 0 0 2rem;
	padding: 0;
	border: 0;
}

.envio-form.js-envio .paso-envio {
	display: none;
}

.envio-form.js-envio .paso-envio.activo {
	display: block;
}

.paso-envio legend {
	margin: 0 0 1.25rem;
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var(--linea);
	width: 100%;
	font-family: var(--fuente-display);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--tinta);
}

/* Campos: label uppercase grafito (patrón de .facet-group y .avanzada-join). */
.campo-envio {
	margin: 0 0 1.25rem;
}

.campo-envio label {
	display: block;
	margin: 0 0 0.4rem;
	font-family: var(--fuente-cuerpo);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--grafito);
}

.campo-envio input[type="text"],
.campo-envio input[type="number"],
.campo-envio input[type="url"],
.campo-envio input[type="file"],
.campo-envio select,
.campo-envio textarea {
	width: 100%;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--linea);
	border-radius: 2px;
	background: var(--papel);
	font-family: var(--fuente-cuerpo);
	font-size: 0.95rem;
	color: var(--tinta);
}

/* Foco: en teclado se mantiene el anillo telón global de la sección 2
   (:focus-visible); con ratón solo cambia el borde, sin anillo. */
.campo-envio input:focus:not(:focus-visible),
.campo-envio select:focus:not(:focus-visible),
.campo-envio textarea:focus:not(:focus-visible) {
	outline: none;
}

.campo-envio input:focus-visible,
.campo-envio select:focus-visible,
.campo-envio textarea:focus-visible {
	border-color: var(--telon);
}

.campo-envio textarea {
	resize: vertical;
}

/* Checkbox de licencia: casilla y texto en línea, sin transformación
   uppercase (el texto largo se lee en mayúsculas/minúsculas naturales). */
.campo-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.campo-checkbox input[type="checkbox"] {
	margin-top: 0.15rem;
	accent-color: var(--telon);
}

.campo-checkbox label {
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--tinta);
}

/* Ayuda bajo el campo y asterisco de requerido. */
.campo-ayuda {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: var(--grafito);
}

.req {
	color: var(--telon);
	font-weight: 600;
}

/* Acciones del paso: botones lado a lado. */
.envio-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* Notices de resultado: filete hairline, fondo papel 2 y acento a la
   izquierda. Sin colores extra: éxito = tinta, error = telón. */
.envio-notice {
	margin-bottom: 2rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--linea);
	border-left: 3px solid var(--tinta);
	border-radius: 2px;
	background: var(--papel-2);
	font-size: 0.95rem;
	line-height: 1.6;
}

.envio-notice p:first-child {
	margin-top: 0;
}

.envio-notice p:last-child,
.envio-notice ul:last-child {
	margin-bottom: 0;
}

.envio-notice ul {
	margin: 0.5rem 0 0;
	padding-left: 1.1rem;
}

.envio-error {
	border-left-color: var(--telon);
}

/* 16. Archives
   ------------------------------------------------------------------ */

.archive-header {
	padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem;
	border-bottom: 1px solid var(--linea);
	margin-bottom: 2rem;
}

.archive-header h1 {
	margin: 0.3rem 0 0;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.archive-header .eyebrow {
	margin-bottom: 0;
}

.term-description {
	margin-top: 0.75rem;
	max-width: 680px;
	font-family: var(--fuente-cuerpo);
	font-size: 0.95rem;
	color: var(--grafito);
}

/* Conteo de documentos del archive, como dato catalográfico. */
.archive-count {
	margin-top: 0.5rem;
	font-family: var(--fuente-mono);
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	color: var(--grafito);
}

/* Título del término y conteo lado a lado en la misma línea base.
   En móvil el conteo baja de línea si no cabe (flex-wrap). */
.archive-titulo {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 0.9rem;
	margin-top: 0.3rem;
}

/* Overrides: el margen pasa al contenedor para una alineación baseline limpia. */
.archive-titulo h1 {
	margin: 0;
}

.archive-titulo .archive-count {
	margin: 0;
}

/* 17. Responsive (complementos)
   ------------------------------------------------------------------ */

/* Móvil: cabeceras de sección apiladas y tabla de fuentes scrolleable.
   (La nav ya se apila en la sección 3; el footer en la 11; los metadatos
   en la 12; no se repiten aquí.) */
@media (max-width: 600px) {
	.seccion-header {
		flex-direction: column;
		align-items: flex-start;
	}

	/* La tabla de fuentes se vuelve scrolleable en horizontal. */
	.fuentes-tabla {
		display: block;
		overflow-x: auto;
	}
}

/* Los hijos de grid no deben encoger su contenido ni desbordar. */
.documents-grid > *,
.relacionados-grid > *,
.resultados-layout > *,
.categories-grid > *,
.hero-layout > * {
	min-width: 0;
}

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