/* =========================================================
   He Visto un Fantasma — Portada (front-page.php): bloque de libro destacado, carrusel, testimonios/CTA y franja Autor + destacado.
 * Se carga solo en la portada.
   Depende de app.css (tokens y base). Las reglas conservan el orden relativo
   que tenían en el CSS monolítico.
   ========================================================= */

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

.hvuf-section--alt {
	background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--color-accent-deep) 0%, var(--color-bg-alt) 65%);
	border-block: 1px solid var(--color-border);
}

/* ---------- Bloque libro destacado ---------- */

.hvuf-block-libro {
	position: relative;
	overflow: hidden;
	background-color: var(--color-bg-alt);
	padding-block: var(--space-8);
}

.hvuf-block-libro__background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 18% 30%;
}

/*
 * Oscurecimiento asimetrico, de izquierda (portada/faro, foto muy visible,
 * con tinte azul/violaceo para conservar el ambiente crepuscular) a derecha
 * (texto, oscuro para garantizar legibilidad). rgba(23,34,54,...) es
 * --color-accent-deep en formato rgb; rgba(10,12,17,...) es --color-bg.
 * Tercio izquierdo aclarado ~10-15% adicional respecto a la primera pasada
 * para dar mas presencia a la fotografia sin tocar el tramo del texto.
 */

.hvuf-block-libro__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(23, 34, 54, 0.04) 0%,
		rgba(23, 34, 54, 0.28) 32%,
		rgba(10, 12, 17, 0.78) 62%,
		rgba(10, 12, 17, 0.93) 100%
	);
}

.hvuf-block-libro__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(200px, 320px) 1fr;
	gap: var(--space-7);
	align-items: center;
}

/*
 * Barras flotantes (Amazon/Goodreads/Babelio/Medios): tercera columna,
 * solo presente cuando hay al menos una barra con dato real. Entran desde
 * la derecha en secuencia via --hvuf-barra-orden (indice por barra) y se
 * quedan fijas; nunca hay ticker ni bucle.
 */

.hvuf-block-libro__inner--con-barras {
	grid-template-columns: minmax(200px, 320px) 1fr minmax(170px, 22%);
}

.hvuf-block-libro__barras {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-3);
}

/*
 * Se presentan como pequeñas "fichas flotantes" editoriales: icono +
 * texto + indicador de enlace, con algo mas de presencia que un simple
 * enlace de texto, pero sin sombras/glow ni estetica de app. El fondo usa
 * rgba(236,233,227,...) -- --color-text en formato rgb -- para quedar
 * "suspendidas" sobre la fotografia con un contraste sutil pero claro.
 */

.hvuf-barra-flotante {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 48px;
	padding: var(--space-3) var(--space-4);
	background: rgba(236, 233, 227, 0.06);
	border: 1px solid rgba(236, 233, 227, 0.2);
	border-radius: var(--radius);
	color: var(--color-text);
	font-size: 0.9rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	opacity: 0;
	transform: translateX(28px);
	animation: hvuf-barra-entrada 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: calc(var(--hvuf-barra-orden, 0) * 0.18s);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hvuf-barra-flotante__icono {
	display: inline-flex;
	color: var(--color-text-muted);
}

.hvuf-barra-flotante__texto {
	flex: 1;
	font-weight: 500;
}

.hvuf-barra-flotante__flecha {
	display: inline-flex;
	color: var(--color-text-muted);
	opacity: 0.75;
}

.hvuf-barra-flotante:hover,
.hvuf-barra-flotante:focus-visible {
	background: rgba(236, 233, 227, 0.12);
	border-color: var(--color-accent-strong);
}

.hvuf-barra-flotante:hover .hvuf-barra-flotante__icono,
.hvuf-barra-flotante:hover .hvuf-barra-flotante__flecha,
.hvuf-barra-flotante:focus-visible .hvuf-barra-flotante__icono,
.hvuf-barra-flotante:focus-visible .hvuf-barra-flotante__flecha {
	color: var(--color-accent-strong);
	opacity: 1;
}

@keyframes hvuf-barra-entrada {
	from {
		opacity: 0;
		transform: translateX(28px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hvuf-barra-flotante {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* Si no cabe la tercera columna de barras junto a portada + info, bajan
   debajo del bloque principal en vez de forzar tres columnas estrechas. */

@media (max-width: 900px) {
	.hvuf-block-libro__inner--con-barras {
		grid-template-columns: minmax(200px, 320px) 1fr;
	}

	.hvuf-block-libro__barras {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: var(--space-2);
	}

	.hvuf-barra-flotante {
		flex: 1 1 200px;
	}
}

/* Retícula wide (ver .hvuf-container): la portada gana algo de presencia y el
   bloque respira más, sin que el excerpt (max-width propio, más abajo) crezca. */

@media (min-width: 1440px) {
	.hvuf-block-libro__inner {
		grid-template-columns: minmax(200px, 360px) 1fr;
		gap: 4rem;
	}

	.hvuf-block-libro__inner--con-barras {
		grid-template-columns: minmax(200px, 360px) 1fr minmax(170px, 22%);
	}
}

.hvuf-block-libro__cover {
	display: block;
	border-radius: var(--radius);
}

.hvuf-block-libro__cover-image {
	aspect-ratio: 2 / 3;
	width: 100%;
	object-fit: cover;
	border: 1px solid var(--color-border);
	transition: opacity 0.2s ease;
}

.hvuf-block-libro__cover:hover .hvuf-block-libro__cover-image,
.hvuf-block-libro__cover:focus-visible .hvuf-block-libro__cover-image {
	opacity: 0.82;
}

.hvuf-block-libro__title {
	margin-bottom: var(--space-3);
}

.hvuf-block-libro__title a {
	color: inherit;
	text-decoration: none;
}

.hvuf-block-libro__title a:hover,
.hvuf-block-libro__title a:focus-visible {
	color: var(--color-accent-strong);
	text-decoration: underline;
}

.hvuf-block-libro__excerpt {
	color: var(--color-text-muted);
	font-size: 1.05rem;
	max-width: 46ch;
}

.hvuf-block-libro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-5);
}

@media (max-width: 700px) {
	.hvuf-block-libro__background {
		object-position: center 30%;
	}

	/* En movil la portada y el texto se apilan verticalmente: un degradado
	   horizontal ya no tiene un "lado del texto" al que oscurecer, así que
	   se pasa a un tratamiento vertical mas uniforme, priorizando que el
	   texto (mas abajo) siga siendo legible sin perder del todo la foto. */
	.hvuf-block-libro__overlay {
		background: linear-gradient(180deg, rgba(10, 12, 17, 0.62) 0%, rgba(10, 12, 17, 0.9) 100%);
	}

	.hvuf-block-libro__inner {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.hvuf-block-libro__cover {
		max-width: 220px;
	}

	/* En movil las barras se muestran como lista compacta apilada bajo los
	   botones de compra, sin la animacion lateral (que no tiene sentido en
	   una columna que ya apila verticalmente de arriba a abajo). */
	.hvuf-block-libro__barras {
		flex-direction: column;
		margin-top: var(--space-4);
	}

	.hvuf-barra-flotante {
		flex: none;
		width: 100%;
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* ---------- Bloque testimonios ---------- */

.hvuf-block-testimonios {
	position: relative;
}

.hvuf-block-testimonios--con-fondo {
	background-color: var(--color-bg-alt);
	background-size: cover;
	/* Encuadre pensado para conservar el castillo de Poenari, la niebla y
	   parte del valle a la derecha, fuera de la zona mas oscurecida. */
	background-position: 62% 42%;
}

/*
 * Degradado de izquierda (texto, muy oscuro para garantizar legibilidad)
 * a derecha (imagen, progresivamente mas transparente). Mismo criterio ya
 * usado en el overlay del bloque de libro destacado. rgba(10,12,17,...)
 * es --color-bg en formato rgb.
 *
 * Varios stops intermedios (no solo inicio/fin) para que la caida sea
 * gradual en vez de una meseta plana seguida de un corte brusco: se
 * mantiene por encima del minimo necesario durante toda la franja donde
 * puede caer texto (max-width:640px, hasta ~85-95% del ancho segun el
 * breakpoint) y solo en el ultimo tramo -- ya sin texto -- se acelera el
 * aclarado hacia la fotografia.
 */

.hvuf-block-testimonios__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(10, 12, 17, 0.90) 0%,
		rgba(10, 12, 17, 0.80) 25%,
		rgba(10, 12, 17, 0.74) 55%,
		rgba(10, 12, 17, 0.70) 85%,
		rgba(10, 12, 17, 0.42) 94%,
		rgba(10, 12, 17, 0.08) 100%
	);
}

.hvuf-block-testimonios__inner {
	position: relative;
}

.hvuf-block-testimonios__text {
	max-width: 640px;
}

.hvuf-block-testimonios__body p {
	/* Mas claro que --color-text-muted (#a2a5b3) para que, sobre foto, el
	   cuerpo de texto no se vea apagado; sigue siendo claramente secundario
	   frente al titulo (--color-text, #ece9e3). Mismo tono frio de gris que
	   el resto de la paleta, no un valor nuevo. */
	color: #c2c4cc;
	margin: 0 0 var(--space-4);
}

.hvuf-block-testimonios__body p:last-child {
	margin-bottom: var(--space-5);
}

@media (max-width: 782px) {
	.hvuf-block-testimonios--con-fondo {
		background-position: 75% 30%;
	}

	.hvuf-block-testimonios__overlay {
		background: linear-gradient(
			90deg,
			rgba(10, 12, 17, 0.90) 0%,
			rgba(10, 12, 17, 0.82) 20%,
			rgba(10, 12, 17, 0.78) 45%,
			rgba(10, 12, 17, 0.76) 70%,
			rgba(10, 12, 17, 0.74) 92%,
			rgba(10, 12, 17, 0.45) 98%,
			rgba(10, 12, 17, 0.15) 100%
		);
	}
}

@media (max-width: 700px) {
	.hvuf-block-testimonios--con-fondo {
		background-position: 80% 25%;
	}

	.hvuf-block-testimonios__overlay {
		background: linear-gradient(
			90deg,
			rgba(10, 12, 17, 0.92) 0%,
			rgba(10, 12, 17, 0.85) 20%,
			rgba(10, 12, 17, 0.82) 45%,
			rgba(10, 12, 17, 0.80) 70%,
			rgba(10, 12, 17, 0.78) 90%,
			rgba(10, 12, 17, 0.50) 97%,
			rgba(10, 12, 17, 0.20) 100%
		);
	}
}

/* ---------- Franja Sobre el autor + ATHENE NOCTUA ----------
 * El autor es el elemento principal (~72%); ATHENE NOCTUA es un proyecto
 * complementario dentro de su mismo espacio personal (~28%), no una
 * segunda seccion principal equivalente. Separadas por una linea
 * vertical sutil (no tarjetas).
 */

.hvuf-franja-autor-athene {
	/* Menos aire vertical que otras secciones: es una franja de apoyo,
	   no una seccion protagonista como el libro destacado. */
	padding-block: var(--space-6);
}

.hvuf-franja-autor-athene__inner {
	display: grid;
	grid-template-columns: minmax(0, 72fr) minmax(0, 28fr);
	/* start (no stretch): cada columna toma su propia altura de contenido,
	   para que ATHENE (mucho mas corto) no fuerce la altura de toda la
	   franja ni deje hueco vacio bajo el bloque de Autor. */
	align-items: start;
	gap: var(--space-8);
}

.hvuf-franja-autor-athene__col {
	min-width: 0;
}

.hvuf-franja-autor-athene__col--autor {
	padding-right: var(--space-8);
	border-right: 1px solid var(--color-border);
}

/* Si solo hay contenido para una de las dos columnas, que ocupe todo el
   ancho en vez de dejar una parte vacia. */

.hvuf-franja-autor-athene__inner:has(> :only-child) > .hvuf-franja-autor-athene__col {
	grid-column: 1 / -1;
	border-right: none;
	padding-right: 0;
	max-width: 640px;
}

/* Autor: foto vertical + bio lado a lado (no la foto sola ocupando toda
   la columna), alineadas arriba. Foto con algo mas de presencia que en
   la pasada anterior (~20% mas ancha) y algo menos de separacion
   respecto al texto. */

.hvuf-franja-autor-athene__autor-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);
	margin-top: var(--space-4);
}

.hvuf-franja-autor-athene__col--autor .hvuf-franja-autor-athene__media {
	flex: 0 0 auto;
	width: clamp(175px, 26%, 240px);
	margin-bottom: 0;
}

.hvuf-franja-autor-athene__autor-content {
	flex: 1 1 auto;
	min-width: 0;
}

/* Ancho de lectura limitado para que la bio no se extienda de mas junto
   a una columna ya generosa (72%). */

.hvuf-franja-autor-athene__col--autor .hvuf-franja-autor-athene__text {
	max-width: 44ch;
}

/* ATHENE NOCTUA: isotipo (solo el simbolo, sin texto integrado) + nombre
   como texto HTML (misma tipografia de titulos que el resto del sitio) +
   una linea descriptiva. Todo el bloque es un unico enlace hacia la URL
   configurada, para no depender de un boton independiente. */

.hvuf-franja-autor-athene__link {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.hvuf-franja-autor-athene__link:hover,
.hvuf-franja-autor-athene__link:focus-visible {
	opacity: 0.85;
}

/* Bloque ATHENE centrado: pequeña identidad de marca autocontenida
   dentro de su columna, no un bloque de texto alineado a la izquierda
   como el resto de la franja. */

.hvuf-franja-autor-athene__col--athene {
	text-align: center;
}

.hvuf-franja-autor-athene__col--athene .hvuf-franja-autor-athene__media {
	width: 112px;
	margin-inline: auto;
	margin-bottom: var(--space-4);
}

.hvuf-franja-autor-athene__image {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: 1px solid var(--color-border);
}

/* El isotipo de ATHENE conserva su proporcion original (es circular, no
   una foto 3/4) y no lleva borde: es una marca, no una fotografia. */

.hvuf-franja-autor-athene__col--athene .hvuf-franja-autor-athene__image {
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: initial;
	border: none;
}

.hvuf-franja-autor-athene__col--athene .hvuf-franja-autor-athene__title {
	font-size: 1.3rem;
	margin: 0 0 var(--space-2);
}

.hvuf-franja-autor-athene__col--autor .hvuf-placeholder--discreet {
	aspect-ratio: 3 / 4;
}

.hvuf-franja-autor-athene__text p {
	color: var(--color-text-muted);
	margin: 0 0 var(--space-4);
}

.hvuf-franja-autor-athene__text p:last-child {
	margin-bottom: var(--space-5);
}

.hvuf-franja-autor-athene__tagline {
	color: var(--color-text-muted);
	margin: 0;
}

/* Retícula wide (ver .hvuf-container): más aire entre las dos columnas y el
   isotipo de ATHENE gana algo de presencia; la bio (max-width propio, más
   arriba) y el resto del contenido de lectura no cambian. */

@media (min-width: 1440px) {
	.hvuf-franja-autor-athene__inner {
		gap: 5.5rem;
	}

	.hvuf-franja-autor-athene__col--athene .hvuf-franja-autor-athene__media {
		width: 150px;
	}
}

/* Tablet: se suaviza la proporcion (el autor sigue siendo mayor, pero
   ATHENE NOCTUA gana algo de aire) para mantener legibilidad antes de
   apilar por completo en movil. */

@media (max-width: 1024px) and (min-width: 783px) {
	.hvuf-franja-autor-athene__inner {
		grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
	}
}

@media (max-width: 782px) {
	.hvuf-franja-autor-athene__inner {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.hvuf-franja-autor-athene__col--autor {
		padding-right: 0;
		padding-bottom: var(--space-8);
		border-right: none;
		border-bottom: 1px solid var(--color-border);
	}

	.hvuf-franja-autor-athene__inner:has(> :only-child) > .hvuf-franja-autor-athene__col {
		border-bottom: none;
		padding-bottom: 0;
	}

	/* En movil, foto y bio se apilan (foto arriba, centrada) en vez de
	   ir lado a lado. */
	.hvuf-franja-autor-athene__autor-row {
		flex-direction: column;
	}

	.hvuf-franja-autor-athene__col--autor .hvuf-franja-autor-athene__media {
		width: 100%;
		max-width: 220px;
		margin-inline: auto;
	}
}

/* ---------- Libros destacados: carrusel manual (2+ libros) ---------- */

/* Los títulos de libro son h2 (el h1 de la portada es permanente y oculto):
   conservan el tamaño visual que tenían como h1. */

.hvuf-block-libro h2.hvuf-block-libro__title {
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.hvuf-block-libro .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;
}

/* Sin JavaScript: todos los libros visibles, apilados, con su ficha completa. */

.hvuf-block-libro--carrusel:not(.is-js) .hvuf-block-libro__slide + .hvuf-block-libro__slide {
	margin-top: var(--space-8);
}

/* Con JavaScript: los slides comparten una celda (la altura es la del más
   alto, sin saltos al cambiar de libro); solo el activo es visible y
   navegable. visibility:hidden lo saca de Tab y del árbol de accesibilidad. */

.hvuf-block-libro--carrusel.is-js .hvuf-block-libro__slides {
	display: grid;
}

.hvuf-block-libro--carrusel.is-js .hvuf-block-libro__slide {
	grid-area: 1 / 1;
	min-width: 0;
}

.hvuf-block-libro--carrusel.is-js .hvuf-block-libro__slide:not(.is-activo) {
	visibility: hidden;
}

/* Transición breve y discreta al cambiar de libro (solo opacidad). */

.hvuf-block-libro__slide.is-entrando {
	animation: hvuf-libro-entra 0.25s ease-out;
}

@keyframes hvuf-libro-entra {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.hvuf-block-libro__slide.is-entrando {
		animation: none;
	}
}

.hvuf-block-libro__controles {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.hvuf-block-libro__controles[hidden] {
	display: none;
}

/* Controles editoriales discretos: el peso visual lo llevan la portada y el
   contador, no estos botones. Reposo casi invisible (fondo transparente,
   borde apenas perceptible); el foco es, a propósito, mucho más marcado
   que el hover, para no sacrificar accesibilidad por sobriedad. */

.hvuf-block-libro__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--color-text-muted);
	background: transparent;
	border: 1px solid rgba(236, 233, 227, 0.14);
	border-radius: 6px;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.hvuf-block-libro__nav:hover {
	color: var(--color-text);
	background: rgba(236, 233, 227, 0.06);
	border-color: rgba(236, 233, 227, 0.32);
}

.hvuf-block-libro__nav:active {
	background: rgba(236, 233, 227, 0.1);
}

.hvuf-block-libro__nav:focus-visible {
	/* Más marcado que el hover: el sistema de foco del sitio (2px) se refuerza aquí a 3px,
	   como ya se hace en otros controles importantes (Contacto, resumen de errores). */
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
	border-color: transparent;
}

.hvuf-block-libro__nav .hvuf-icon {
	width: 1rem;
	height: 1rem;
	stroke-width: 1.1;
}

.hvuf-block-libro__nav--anterior .hvuf-icon {
	transform: scaleX(-1);
}

.hvuf-block-libro__posicion {
	min-width: 3.5rem;
	margin: 0;
	text-align: center;
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	color: var(--color-text-muted);
}

/* En móvil no se iguala la altura de los slides (no sacrificar el responsive):
   solo ocupa espacio el libro activo y los controles quedan justo debajo. */

@media (max-width: 700px) {
	.hvuf-block-libro--carrusel.is-js .hvuf-block-libro__slide:not(.is-activo) {
		display: none;
	}
}