/* =========================================================
   He Visto un Fantasma — Recursos: índice, recurso genérico, ATHENE NOCTUA y Plantilla web para autores. Se carga solo en esas páginas.
   Depende de app.css (tokens y base). Las reglas conservan el orden relativo
   que tenían en el CSS monolítico.
   ========================================================= */

/* ---------- Recursos ---------- */

.hvuf-recursos__entradilla,
.hvuf-recurso__entradilla {
	max-width: 60ch;
	margin: var(--space-3) 0 0;
	color: var(--color-text-muted);
	font-size: 1.15rem;
}

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

.hvuf-recursos__lista {
	display: grid;
	gap: 0;
	padding-block: var(--space-6) var(--space-7);
}

/* Bloque editorial: igual jerarquía para todos los recursos, sin caja ni sombra;
   solo un filete que los separa. */

.hvuf-recurso-bloque {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-block: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.hvuf-recurso-bloque__cabecera {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-height: 72px;
	margin-bottom: var(--space-4);
}

.hvuf-recurso-bloque__media {
	flex-shrink: 0;
}

.hvuf-recurso-bloque__imagen {
	display: block;
	width: 72px;
	height: auto;
}

.hvuf-recurso-bloque__titulos {
	min-width: 0;
}

.hvuf-recurso-bloque__estado,
.hvuf-recurso__estado {
	margin: 0 0 var(--space-2);
	color: var(--color-text-muted);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hvuf-recurso-bloque__titulo {
	margin: 0;
}

.hvuf-recurso-bloque__descripcion {
	max-width: 52ch;
	color: var(--color-text-muted);
}

.hvuf-recurso-bloque__caracteristicas {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: 0;
	width: 100%;
	max-width: 52ch;
}

.hvuf-recurso-bloque__caracteristicas li {
	padding-block: var(--space-2);
	border-top: 1px solid var(--color-border);
	font-size: 0.95rem;
}

.hvuf-recurso-bloque__caracteristicas li:last-child {
	border-bottom: 1px solid var(--color-border);
}

.hvuf-recurso-bloque__enlace {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	color: var(--color-text);
}

@media (min-width: 900px) {
	.hvuf-recursos__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-7);
	}

	.hvuf-recurso-bloque + .hvuf-recurso-bloque {
		padding-left: var(--space-7);
		border-left: 1px solid var(--color-border);
	}
}

/* Página de un recurso */

.hvuf-recurso__nav {
	padding-top: var(--space-5);
}

.hvuf-recurso__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.hvuf-recurso__cabecera {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);
	padding-bottom: var(--space-4);
}

.hvuf-recurso__logo-imagen {
	display: block;
	width: 96px;
	height: auto;
}

.hvuf-recurso__intro {
	min-width: 0;
}

/* Alineado con la cabecera (a la izquierda del contenedor); solo el texto se
   limita a un ancho de lectura. */

.hvuf-recurso__contenido {
	max-width: var(--container-width);
	padding-block: var(--space-4) var(--space-6);
}

.hvuf-recurso__contenido > * {
	max-width: 68ch;
}

/* Secciones escritas en el editor: filete y aire, como una lista editorial. */

.hvuf-recurso__contenido h2 {
	margin: var(--space-6) 0 var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	font-size: 1.3rem;
}

.hvuf-recurso__contenido > h2:first-child {
	margin-top: 0;
}

/* Capturas insertadas en el contenido nativo (p. ej. los pasos de instalación de ATHENE):
   mismo marco discreto que la captura principal del hero. */

.hvuf-recurso__contenido figure {
	margin: var(--space-4) 0;
}

.hvuf-recurso__contenido figure img {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.hvuf-recurso__contenido figcaption {
	margin-top: var(--space-2);
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

.hvuf-recurso__descarga,
.hvuf-recurso__autoria {
	padding-block: var(--space-5);
}

.hvuf-recurso__descarga > *,
.hvuf-recurso__autoria > * {
	max-width: 68ch;
}

.hvuf-recurso__autoria {
	margin-bottom: var(--space-7);
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.hvuf-recurso__descarga,
.hvuf-recurso__autoria {
	border-top: 1px solid var(--color-border);
}

.hvuf-recurso__autoria-titulo {
	margin: 0 0 var(--space-2);
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.hvuf-recurso__autoria p {
	margin: 0;
}

/* Las páginas de recurso pueden ser muy breves (contenido progresivo): el pie se
   queda al final de la ventana en vez de flotar a mitad de página. Solo en estas
   páginas, sin tocar el resto del sitio. */

body:has(.hvuf-recurso, .hvuf-recursos) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body:has(.hvuf-recurso, .hvuf-recursos) .site-footer {
	margin-top: auto;
}

@media (max-width: 480px) {
	.hvuf-recurso__cabecera {
		flex-direction: column;
		gap: var(--space-3);
	}

	.hvuf-recurso__logo-imagen {
		width: 72px;
	}
}

/*
 * "Plantilla web para autores" (página #1005): dos columnas INDEPENDIENTES,
 * exclusivas de esta página -el resto de recursos (incluido ATHENE) no usa
 * estas clases-. Las capturas viven como <img> normales dentro del
 * contenido nativo (insertadas como en cualquier entrada del editor, sin
 * meta propia ni cambios en Recurso_MetaBox).
 *
 * Deliberadamente NO es "fila de texto + imagen" repetida: eso acopla la
 * altura de cada fila a la de su captura y genera huecos verticales
 * artificiales en el texto. En su lugar, .contenido y .muestras son dos
 * hijos del mismo grid que fluyen cada uno a su propio ritmo (el texto con
 * el espaciado normal de .hvuf-recurso__contenido h2/p, las capturas con su
 * propio gap) - añadir una tercera captura en .muestras no mueve ni un
 * píxel del texto. La relación imagen-sección es visual/aproximada, no una
 * alineación exacta.
 *
 * Un único DOM, sin duplicar imágenes: en escritorio, Grid separa las dos
 * columnas (60/40); por debajo de 782px (mismo corte que el resto del
 * sitio) pasan a una sola columna, con el texto completo primero y las
 * capturas agrupadas después bajo su propia etiqueta "Así se ve en la
 * práctica" -no intercaladas sección a sección: con una sola lista de DOM,
 * esa intercalación exacta no es compatible con columnas de verdad
 * independientes en escritorio (ver discusión en el historial del
 * proyecto); agruparlas con una etiqueta propia evita que aparezcan sueltas
 * y sin contexto-.
 */

.hvuf-plantilla-autores__layout {
	max-width: none; /* este bloque sí ocupa el ancho completo del contenedor, a diferencia del resto de hijos de .hvuf-recurso__contenido */
	display: grid;
	grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
	align-items: start;
	gap: var(--space-7);
	margin: var(--space-4) 0 var(--space-6);
}

.hvuf-plantilla-autores__contenido > * {
	max-width: 60ch; /* mismo criterio de ancho de lectura que el resto del contenido, no se ensancha por tener más espacio disponible */
}

.hvuf-plantilla-autores__contenido > h2:first-child {
	margin-top: 0;
}

.hvuf-plantilla-autores__muestras {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.hvuf-plantilla-autores__muestras-titulo {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.hvuf-plantilla-autores__captura {
	margin: 0;
}

.hvuf-plantilla-autores__captura img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

@media (max-width: 782px) {
	.hvuf-plantilla-autores__layout {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
}

/* ---------- ATHENE NOCTUA: hero, captura, manual, apoyo ----------
 * Página especializada (template-parts/content/recurso-athene.php), distinta de la
 * genérica de arriba; comparte el namespace .hvuf-recurso__* pero no su markup, así que
 * estas reglas no afectan a "Plantilla web para autores". */

.hvuf-recurso__hero {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);
	padding-block: var(--space-5) var(--space-4);
}

.hvuf-recurso__hero-simbolo img {
	width: 72px;
	height: 72px;
	border-radius: var(--radius);
}

.hvuf-recurso__hero-texto {
	min-width: 0;
}

.hvuf-recurso__hero-datos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin: var(--space-3) 0 0;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.hvuf-recurso__hero-version {
	color: var(--color-text-muted);
}

.hvuf-recurso__hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

/*
 * Retícula compartida de ATHENE: todos los bloques cuelgan del mismo borde izquierdo -el
 * de .hvuf-recurso__contenido, que ya comparten hero/manual/apoyo/autoría por ser todos
 * .hvuf-container- y ninguno se centra por su cuenta. El ancho SÍ varía según el tipo de
 * contenido: columna de lectura para el texto en prosa (más ancha que las 68ch editoriales
 * del resto de recursos, porque esto es una página de producto, no una entrada de blog) y
 * columna ancha para la captura y las composiciones a dos columnas, que necesitan más
 * espacio para las imágenes. Alinear no es lo mismo que igualar el ancho. Escalado con
 * .hvuf-recurso--athene (presente solo en el <article> de esta plantilla) para no afectar
 * en absoluto a "Plantilla web para autores", que sigue en 68ch.
 */

.hvuf-recurso--athene {
	--athene-ancho-lectura: 800px;
	--athene-ancho-ancho: 960px;
}

.hvuf-recurso--athene .hvuf-recurso__contenido > :is(h2, p) {
	max-width: var(--athene-ancho-lectura);
}

.hvuf-recurso--athene .hvuf-recurso__contenido > .hvuf-recurso__captura-principal,
.hvuf-recurso--athene .hvuf-recurso__instalacion,
.hvuf-recurso--athene .hvuf-recurso__identidad {
	max-width: var(--athene-ancho-ancho);
}

/* Captura principal: primera figura del contenido nativo (no la Imagen destacada, que
   sigue siendo el símbolo que también usan el índice de Recursos y Home). Alineada al mismo
   borde izquierdo que el resto de la columna, no centrada; conserva su proporción real
   (width:100% por debajo del max-width, sin recortar). */

.hvuf-recurso__contenido > .hvuf-recurso__captura-principal {
	margin: 0 0 var(--space-6);
}

.hvuf-recurso__captura-principal-imagen {
	width: 100%;
	height: auto;
}

/*
 * Instalación rápida y ¿Por qué ATHENE NOCTUA?: composición de dos columnas en escritorio,
 * una columna en estrecho. Grid simple sin `order`: el texto va primero en el DOM (y a la
 * izquierda) en ambos casos, así que el orden visual coincide siempre con el de lectura y
 * con el de tabulación por teclado.
 */

.hvuf-recurso__instalacion,
.hvuf-recurso__identidad {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	align-items: start;
	margin: var(--space-6) 0;
}

.hvuf-recurso__instalacion-texto :is(h2, ol, p):last-child,
.hvuf-recurso__identidad-texto :is(h2, p):last-child {
	margin-bottom: 0;
}

.hvuf-recurso__instalacion-capturas {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.hvuf-recurso__instalacion-capturas img {
	width: 100%;
	height: auto;
}

/* ¿Por qué ATHENE NOCTUA?: la ilustración es una pausa de identidad, no una captura más -
   se mantiene moderada (no a ancho completo de columna) y verticalmente centrada con el
   texto. */

.hvuf-recurso__identidad-media {
	display: flex;
	justify-content: center;
}

.hvuf-recurso__identidad-imagen {
	width: 100%;
	max-width: 230px;
	height: auto;
	border-radius: var(--radius);
}

.hvuf-recurso__manual,
.hvuf-recurso__apoyo {
	padding-block: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.hvuf-recurso__manual > * {
	max-width: 68ch;
}

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

/* Bloque de apoyo: deliberadamente pequeño y secundario -franja horizontal compacta, no una
   card editorial-, para que no compita con el contenido de ATHENE ni parezca una petición de
   compra. Portada minúscula (thumbnail nativo), sin extracto. */

.hvuf-recurso__apoyo-texto {
	color: var(--color-text-muted);
}

.hvuf-recurso__apoyo-libro {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	max-width: 420px;
	margin-top: var(--space-3);
}

.hvuf-recurso__apoyo-portada {
	flex-shrink: 0;
	width: 56px;
	height: 84px;
	object-fit: cover;
	border-radius: var(--radius);
}

.hvuf-recurso__apoyo-info {
	min-width: 0;
}

.hvuf-recurso__apoyo-titulo {
	margin: 0;
	font-size: 1rem;
}

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

.hvuf-recurso__apoyo-enlace {
	display: inline-block;
	margin-top: var(--space-1);
	font-size: 0.9rem;
}

@media (max-width: 782px) {
	.hvuf-recurso__instalacion,
	.hvuf-recurso__identidad {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.hvuf-recurso__identidad-media {
		margin-top: var(--space-3);
	}
}

@media (max-width: 560px) {
	.hvuf-recurso__hero {
		flex-direction: column;
		gap: var(--space-3);
	}

	.hvuf-recurso__hero-simbolo img {
		width: 56px;
		height: 56px;
	}

	.hvuf-recurso__apoyo-libro {
		gap: var(--space-3);
	}
}