/* =========================================================
   He Visto un Fantasma — CSS propio del tema.
   Sin frameworks. Paleta oscura, editorial, discretamente gótica.
   ========================================================= */

:root {
	--color-bg: #0a0c11;
	--color-bg-alt: #10131a;
	--color-surface: #161a23;
	--color-border: #262c39;
	--color-text: #ece9e3;
	--color-text-muted: #a2a5b3;
	--color-accent: #3a5a8c;
	--color-accent-strong: #5b82bd;
	--color-accent-deep: #172236;
	--color-red: #5c2027;
	--color-warm: #8a6a4b;
	--color-focus: #7fa7de;
	/* Amarillo lunar: mismo dorado del isotipo/logo (#E2C15C), reservado
	   para toques puntuales (hover, detalles), no para bloques de color. */
	--color-moonlight: #e2c15c;

	--font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4.5rem;

	--container-width: 1180px;
	--radius: 3px;

	/* Tema oscuro: los controles nativos del navegador (desplegable de select, selector de
	   fecha, barras de scroll, autorrelleno) se dibujan también en oscuro. */
	color-scheme: dark;
}

/*
 * Alto contraste (opcional, activado por la persona desde el interruptor de
 * cabecera -ver .hvuf-a11y-toggle y assets/js/app.js-, o recordado de una
 * visita anterior vía localStorage). Redefine los mismos tokens de :root en
 * vez de duplicar reglas: los ~215 usos existentes de var(--color-*) en el
 * resto de esta hoja se repintan solos. No es una inversión de color (nada
 * de filter:invert). Las fotografías, portadas y capturas no se tocan: no
 * dependen de ningún color de este bloque.
 *
 * --color-accent (fondo de los botones primarios) SÍ se redefine aquí -a
 * diferencia de una primera pasada que lo dejó igual-: era la razón
 * principal por la que el modo se sentía "casi igual que el normal", ya
 * que los CTA son de los elementos más visibles de la página y su color no
 * cambiaba. --color-accent-deep (usado en el degradado del pie) se aclara
 * menos que el resto a propósito: si se acerca demasiado a --color-bg, el
 * pie deja de distinguirse de la página; el borde superior (--color-border,
 * ya muy marcado) es quien hace el trabajo principal de separación ahí.
 *
 * Bloques de formulario con colores en crudo (no en var(--color-*), fuera
 * de este bloque) tienen su propio override explícito más abajo, marcado
 * "alto contraste": no reaccionarían solos a este bloque.
 *
 * Ratios medidos y documentados en el informe de esta fase (no en este
 * comentario, para no duplicar y desincronizar): texto principal/fondo,
 * texto secundario/fondo, enlaces, botones, navegación, pie, formularios y
 * foco sobre los fondos relevantes.
 */

:root[data-hvuf-contrast="high"] {
	--color-bg: #000000;
	--color-bg-alt: #0a0a0a;
	--color-surface: #141414;
	--color-border: #cfd3da;
	--color-text: #ffffff;
	--color-text-muted: #d6d9de;
	--color-accent: #2f5fd6;
	--color-accent-strong: #9dc0f5;
	--color-accent-deep: #16223a;
	--color-red: #ff8a80;
	--color-warm: #e0b98a;
	--color-focus: #ffd034;
	--color-moonlight: #ffd034;
}

/* Enlaces de contenido: no solo color, también subrayado (evita depender
   únicamente del color para diferenciarlos del texto que los rodea). */

:root[data-hvuf-contrast="high"] .entry-content a,
:root[data-hvuf-contrast="high"] .hvuf-libro-ficha a,
:root[data-hvuf-contrast="high"] p a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Reset base ---------- */

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

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

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-accent-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--color-text);
}

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 var(--space-4);
	color: var(--color-text);
}

h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }

h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }

h3 { font-size: 1.25rem; }

p { margin: 0 0 var(--space-4); }

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

/* Listas de CONTENIDO editorial (páginas, entradas, bloques de WordPress, introducciones):
   recuperan marcador, sangrado y separación. Las listas de interfaz (menús, filtros, chips,
   pasos, cronologías…) llevan siempre clase propia y siguen sin marcador: por eso solo se
   restauran las listas sin clase (editor clásico) o con .wp-block-list (bloque Lista). */

:is( .entry-content, .hvuf-contacto__intro, .hvuf-experiencia__intro, .hvuf-recursos__entradilla ) :is( ul, ol ):is( :not( [class] ), .wp-block-list ) {
	margin: 0 0 var(--space-4);
	padding-left: 1.5rem;
}

:is( .entry-content, .hvuf-contacto__intro, .hvuf-experiencia__intro, .hvuf-recursos__entradilla ) ul:is( :not( [class] ), .wp-block-list ) {
	list-style: disc;
}

:is( .entry-content, .hvuf-contacto__intro, .hvuf-experiencia__intro, .hvuf-recursos__entradilla ) ol:is( :not( [class] ), .wp-block-list ) {
	list-style: decimal;
	padding-left: 1.9rem; /* deja sitio a numeraciones de dos cifras */
}

:is( .entry-content, .hvuf-contacto__intro, .hvuf-experiencia__intro, .hvuf-recursos__entradilla ) :is( ul, ol ):is( :not( [class] ), .wp-block-list ) > li {
	margin-bottom: var(--space-2);
	padding-left: 0.25rem;
}

:is( .entry-content, .hvuf-contacto__intro, .hvuf-experiencia__intro, .hvuf-recursos__entradilla ) :is( ul, ol ):is( :not( [class] ), .wp-block-list ) > li::marker {
	color: var(--color-text-muted);
}

:is( .entry-content, .hvuf-contacto__intro, .hvuf-experiencia__intro, .hvuf-recursos__entradilla ) :is( ul, ol ):is( :not( [class] ), .wp-block-list ) > li:last-child {
	margin-bottom: 0;
}

:is( .entry-content, .hvuf-contacto__intro, .hvuf-experiencia__intro, .hvuf-recursos__entradilla ) :is( ul, ol ):is( :not( [class] ), .wp-block-list ) :is( ul, ol ) {
	margin: var(--space-2) 0 0;
}

button { font-family: inherit; }

/* ---------- Accesibilidad ---------- */

.hvuf-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-accent-strong);
	color: #0a0c11;
	padding: var(--space-3) var(--space-4);
	z-index: 1000;
	border-radius: var(--radius);
}

.hvuf-skip-link:focus {
	left: var(--space-4);
	top: var(--space-4);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

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

/* ---------- Layout ---------- */

.hvuf-container {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-5);
}

/*
 * Retícula wide: la caja general (.hvuf-container, y por tanto cabecera, Home,
 * páginas interiores, formularios y footer -todos cuelgan de ella-) crece de forma
 * fluida en pantallas grandes, sin salto en el punto de entrada (a 1440px, 67vw
 * = 964.8px, por debajo del suelo de 1180px, así que no cambia nada todavía) y
 * sin tocar tablet/móvil, que quedan exactamente igual que antes de este cambio.
 * Esto ensancha la RETÍCULA, no el contenido de lectura: los anchos en ch
 * (párrafos, entradillas, bio, contenido editorial...) no dependen de esta
 * variable y no crecen con ella.
 */

@media (min-width: 1440px) {
	:root {
		--container-width: clamp(1180px, 67vw, 1480px);
	}
}

.hvuf-eyebrow {
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent-strong);
	margin: 0 0 var(--space-2);
}

/* ---------- Placeholder de imagen ---------- */

.hvuf-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	width: 100%;
}

.hvuf-placeholder__icon {
	width: 25%;
	max-width: 64px;
	height: auto;
}

.hvuf-placeholder--discreet {
	background: transparent;
	border-color: var(--color-border);
	opacity: 0.55;
}

.hvuf-placeholder--discreet .hvuf-placeholder__icon {
	width: 18%;
	max-width: 40px;
}

/* Iconos de interfaz en linea (hevistounfantasma_icon_*): tamaño relativo
   al texto que acompañan, nunca mas grandes que él. */

.hvuf-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* ---------- Botones ---------- */

.hvuf-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius);
	font-size: 0.95rem;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hvuf-button--primary {
	background: var(--color-accent);
	color: #f4f2ee;
	border-color: var(--color-accent);
}

.hvuf-button--primary:hover {
	background: var(--color-accent-strong);
	border-color: var(--color-accent-strong);
	color: #0a0c11;
}

.hvuf-button--secondary {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-border);
}

.hvuf-button--secondary:hover {
	border-color: var(--color-accent-strong);
	color: var(--color-accent-strong);
}

.hvuf-link-arrow {
	display: inline-block;
	color: var(--color-text-muted);
	text-decoration: none;
}

.hvuf-link-arrow:hover {
	color: var(--color-accent-strong);
}

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

.site-header {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-4);
	position: relative;
}

.site-branding {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.25rem;
}

.site-branding img {
	max-height: 60px;
	width: auto;
}

/* Logo nativo (Apariencia > Personalizar > Identidad del sitio): altura
   fija, ancho automático para no deformarlo. Ajustar solo aqui si el
   logo cambia; no se hardcodea ninguna ruta de imagen. */

.custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.custom-logo {
	height: 52px;
	width: auto;
	max-width: 100%;
}

@media (max-width: 782px) {
	.custom-logo {
		height: 38px;
	}
}

.site-branding__link {
	color: var(--color-text);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.menu-toggle {
	display: none;
	align-items: center;
	gap: var(--space-2);
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius);
	cursor: pointer;
}

.menu-toggle__icon {
	width: 18px;
	height: 2px;
	background: currentColor;
	position: relative;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.menu-toggle__icon::before { top: -6px; }

.menu-toggle__icon::after { top: 6px; }

.main-navigation__list {
	display: flex;
	gap: var(--space-6);
}

.main-navigation__list a {
	color: var(--color-text);
	text-decoration: none;
	font-size: 0.95rem;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}

.main-navigation__list a:hover {
	color: var(--color-accent-strong);
}

/* Página actual: indicador muy discreto (no depende solo del color: también
   sube el peso y añade un filete inferior). aria-current="page" ya lo pone
   wp_nav_menu(); esto solo lo hace perceptible visualmente. */

.main-navigation__list a[aria-current="page"] {
	font-weight: 600;
	border-bottom-color: currentColor;
}

/* Con 7 enlaces, en tablet ancha (justo antes del menú móvil) se recorta el
   hueco entre ellos para que no toquen la marca. */

@media (min-width: 901px) and (max-width: 1024px) {
	.main-navigation__list {
		gap: var(--space-4);
	}
}

/* El menú se colapsa un poco antes (900 px) desde que hay 7 enlaces: con menos
   ancho no caben en una línea junto a la marca. Las "utilidades del sitio"
   (ver .site-utilities-bar) viven en su propia línea, fuera de esta, así que
   no le quitan espacio a la navegación. */

@media (max-width: 900px) {
	.menu-toggle {
		display: inline-flex;
	}

	.main-navigation {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		/* Sin esto, cualquier bloque posterior que forme su propio contexto de
		   apilamiento (p. ej. position:relative o un filter en una imagen, como
		   el hero de Home o el de Autor) se pinta encima del menú abierto, al
		   compartir el mismo nivel de pila implícito y ir despues en el DOM. */
		z-index: 10;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
		padding: var(--space-4) var(--space-5);
	}

	.main-navigation.is-open {
		display: block;
	}

	.main-navigation__list {
		flex-direction: column;
		gap: var(--space-4);
	}
}

/*
 * Barra de utilidades del sitio: línea propia, separada de la navegación
 * principal (logo+nav conservan exactamente su composición e hitos
 * responsive de siempre en .site-header__inner, sin tocar). Deliberadamente
 * compacta -zona auxiliar, no una segunda cabecera-: poco padding, texto
 * algo más pequeño que la navegación principal.
 */

.site-utilities-bar {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.site-utilities-bar__inner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-block: var(--space-1);
}

/*
 * Utilidades del sitio: hoy solo el interruptor "Alto contraste", pensada
 * para admitir en el futuro un selector de idioma junto a él (multidioma;
 * no implementado) sin rehacer el header.
 */

.site-utilities {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

/*
 * Interruptor real (no abre nada): alterna data-hvuf-contrast="high" en
 * <html> -ver assets/js/app.js-. Más ligero que un control de cabecera
 * principal (fondo/borde de .menu-toggle): es una línea secundaria. El
 * padding vertical + min-height mantienen un objetivo táctil de 32px pese
 * al texto pequeño (WCAG 2.2 SC 2.5.8), sin ensanchar el texto ni añadir
 * aire visible de más (align-items:center centra el contenido dentro).
 */

.hvuf-a11y-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: transparent;
	border: 1px solid transparent;
	color: var(--color-text-muted);
	padding: var(--space-1) var(--space-2);
	min-height: 32px;
	border-radius: var(--radius);
	font-size: 0.85rem;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.hvuf-a11y-toggle:hover {
	color: var(--color-accent-strong);
}

/* Estado activado: diferencia visual clara (borde + color), no solo un
   cambio sutil de tono -debe leerse a simple vista que está encendido-. */

.hvuf-a11y-toggle[aria-pressed="true"] {
	color: var(--color-accent-strong);
	border-color: var(--color-accent-strong);
}

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

/*
 * Composicion horizontal de dos zonas (Marca / Enlaces), sin columnas
 * rigidas ni encabezados de seccion: se lee como un cierre editorial,
 * no como un sitemap. Azul noche/petroleo (--color-accent-deep, ya usado
 * en el sitio para fondos editoriales) con un degradado muy sutil hacia
 * --color-bg-alt -- misma gama, ambos ya existentes en la paleta -- para
 * diferenciar el pie del negro continuo del body sin introducir ningun
 * color nuevo. Altura reducida respecto a la version anterior (menos
 * padding vertical, mas aire horizontal).
 */

.site-footer {
	border-top: 1px solid var(--color-border);
	background: linear-gradient(120deg, var(--color-accent-deep) 0%, var(--color-bg-alt) 100%);
	padding-top: var(--space-6);
	margin-top: var(--space-8);
}

/* El aire inferior del bloque azul vive aqui (no en .site-footer): asi
   queda DENTRO del bloque, encima de la franja legal, y no añade una
   banda azul extra por debajo de ella. */

.site-footer__inner {
	padding-bottom: var(--space-6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6) var(--space-7);
}

/* -- Marca: isotipo (Site Icon nativo) + nombre, algo mas protagonista
   que en el resto del sitio dado que ya no comparte el pie con columnas
   de igual peso. -- */

.site-footer__marca {
	flex: 1 1 320px;
}

.site-footer__brand {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-serif);
	font-size: 1.35rem;
	color: var(--color-text);
	margin: 0 0 var(--space-2);
}

.site-footer__isotipo {
	display: block;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.site-footer__tagline {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	max-width: 42ch;
	margin: 0;
}

/*
 * Enlaces: dos lineas de texto corrido con separadores "·", no listas
 * verticales ni cards. El propio texto (Libros, Blog...) ya es
 * suficientemente autoexplicativo sin un encabezado "Navegación"/
 * "Proyectos" encima.
 */

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 0 1 auto;
}

.site-footer__links-line {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.92rem;
}

.site-footer__links-line a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.site-footer__links-line a:hover,
.site-footer__links-line a:focus-visible {
	color: var(--color-moonlight);
}

.site-footer__sep {
	margin-inline: var(--space-2);
	opacity: 0.45;
}

/* -- Franja legal: mas compacta que el resto del pie. Fondo mas oscuro y
   neutro (--color-bg, el mismo negro del body) que el azul noche de
   arriba, para marcar un ultimo escalon visual sin salir de la paleta
   existente. El color vive en el wrapper de ancho completo
   (.site-footer__legal-strip); el .hvuf-container interior centra el
   contenido igual que en el resto del sitio. -- */

.site-footer__legal-strip {
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
}

.site-footer__legal {
	padding-block: var(--space-3);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-4);
}

.site-footer__copy {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.875rem;
}

.site-footer__auge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-text-muted);
	text-decoration: none;
}

.site-footer__auge:hover,
.site-footer__auge:focus-visible {
	color: var(--color-moonlight);
}

.site-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__legal-list a {
	color: var(--color-text-muted);
	text-decoration: none;
	font-size: 0.875rem;
}

.site-footer__legal-list a:hover,
.site-footer__legal-list a:focus-visible {
	color: var(--color-moonlight);
}

/* Tablet: Marca arriba, enlaces debajo (el propio flex-wrap ya los baja
   de fila al no caber junto a Marca; se fuerza aqui para que sea
   siempre asi, no solo cuando el contenido no cabe). */

@media (max-width: 900px) {
	.site-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Sin esto, flex-grow:1 de .site-footer__marca (pensado para el
	   reparto horizontal en desktop) estira ese bloque para llenar el
	   alto sobrante en el eje principal ya vertical, dejando un hueco
	   vacío antes de los enlaces. */
	.site-footer__marca,
	.site-footer__links {
		flex: 0 1 auto;
	}
}

@media (max-width: 700px) {
	.site-footer__inner {
		gap: var(--space-5);
	}

	/* Targets tactiles: los enlaces son texto corrido, no bloques, asi
	   que se les da algo de padding vertical propio en vez de min-height
	   (que forzaria una caja rectangular ajena al resto de la linea). */
	.site-footer__links-line a,
	.site-footer__legal-list a {
		display: inline-block;
		padding-block: var(--space-2);
	}

	.site-footer__legal {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Tarjetas ---------- */

.hvuf-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-6);
}

.hvuf-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color 0.15s ease, transform 0.2s ease;
}

.hvuf-card:hover {
	border-color: var(--color-accent-strong);
	transform: translateY(-2px);
}

.hvuf-card__media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.hvuf-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 12, 17, 0) 55%, rgba(10, 12, 17, 0.4) 100%);
	pointer-events: none;
}

.hvuf-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.hvuf-card:hover .hvuf-card__image {
	transform: scale(1.03);
}

.hvuf-card__body {
	padding: var(--space-5) var(--space-4);
}

.hvuf-card__title {
	font-size: 1.05rem;
	margin: 0 0 var(--space-2);
}

.hvuf-card__title a {
	color: var(--color-text);
	text-decoration: none;
}

.hvuf-card__title a:hover {
	color: var(--color-accent-strong);
}

.hvuf-card__excerpt {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	margin: 0;
}

/* Texto solo para lectores de pantalla (accesible, fuera de la vista). */

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

.hvuf-format-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-3) 0;
}

.hvuf-format-list li {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-1) var(--space-3);
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

/* ---------- Archivo (Libros / Blog / Medios) ---------- */

.hvuf-archive-header {
	padding-block: var(--space-7) var(--space-5);
}

.hvuf-post__header,
.hvuf-page__header {
	padding-top: var(--space-6);
}

.hvuf-post__meta {
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

.hvuf-post__cover,
.hvuf-page__cover {
	margin-block: var(--space-5);
}

.hvuf-post__cover-image,
.hvuf-page__cover-image {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	border: 1px solid var(--color-border);
}

.entry-content {
	max-width: 68ch;
	padding-block: var(--space-5) var(--space-7);
}

.entry-content p { color: var(--color-text); }

.entry-content blockquote {
	margin: var(--space-5) 0;
	padding-left: var(--space-5);
	border-left: 3px solid var(--color-red);
	color: var(--color-text-muted);
	font-family: var(--font-serif);
	font-style: italic;
}

.entry-content a {
	color: var(--color-accent-strong);
}

/* ---------- Páginas de sistema (404) y resultados de búsqueda ---------- */

.hvuf-sistema {
	padding-block: var(--space-7) var(--space-8);
}

.hvuf-sistema__texto {
	max-width: 60ch;
	margin-bottom: var(--space-5);
	color: var(--color-text-muted);
}

.hvuf-sistema__enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.hvuf-resultados {
	max-width: 780px;
	margin-inline: auto;
	padding-bottom: var(--space-8);
}

.hvuf-resultado {
	padding-block: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.hvuf-resultado__tipo {
	margin: 0 0 var(--space-1);
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

.hvuf-resultado__titulo {
	margin: 0 0 var(--space-2);
	font-size: 1.25rem;
}

.hvuf-resultado__titulo a {
	color: var(--color-text);
	text-decoration: none;
}

.hvuf-resultado__titulo a:hover {
	color: var(--color-accent-strong);
}

.hvuf-resultado__extracto {
	max-width: 68ch;
	margin: 0;
	color: var(--color-text-muted);
}

/* Error al enviar (página propia del tema) */

.hvuf-comentarios__error {
	padding-block: var(--space-7);
	max-width: 68ch;
}

.hvuf-comentarios__error-mensaje {
	margin-bottom: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-left: 3px solid var(--color-red);
	background: var(--color-bg-alt);
}

.hvuf-comentarios__error-mensaje p:last-child {
	margin-bottom: 0;
}

/* ---------- Paginación ---------- */

.pagination,
.navigation.pagination {
	display: flex;
	gap: var(--space-3);
	padding-block: var(--space-5) var(--space-7);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text-muted);
	text-decoration: none;
	padding-inline: var(--space-2);
}

.pagination .page-numbers.current {
	border-color: var(--color-accent-strong);
	color: var(--color-text);
}