/*
Theme Name: J.R.J. Escribano
Theme URI: https://jrjescribano.com
Author: J.R.J. Escribano
Description: Tema a medida para la web de autor de J.R.J. Escribano — docente, escritor, ingeniero.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: jrj-escribano
*/

:root {
	--color-paper: #f6f1e7;
	--color-paper-2: #efe6d3;
	--color-ink: #201c16;
	--color-ink-soft: #5a5346;
	--color-terracotta: #b1502f;
	--color-terracotta-dark: #8f3f23;
	--color-gold: #a98651;
	--color-night: #16130f;
	--color-night-soft: #2a251d;
	--color-paper-on-night: #efe6d3;

	--font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Noto Serif', serif;
	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-signature: 'Caveat', var(--font-serif);

	--size-h1: clamp(2.6rem, 2rem + 3vw, 5rem);
	--size-h2: clamp(2rem, 1.6rem + 1.8vw, 3.2rem);
	--size-h3: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
	--size-lead: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
	--size-body: clamp(1rem, 0.96rem + 0.15vw, 1.125rem);

	--space-section: clamp(4rem, 3rem + 5vw, 8rem);
	--space-gutter: clamp(1.25rem, 1rem + 2vw, 4rem);
	--content-width: 1180px;
	--content-narrow: 720px;

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 0.7s;
}

@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('https://jrjescribano.com/wp-content/uploads/2026/08/caveat-700.woff2') format('woff2');
}

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

body {
	margin: 0;
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-serif);
	font-size: var(--size-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.container {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--space-gutter);
}
.container--narrow { max-width: var(--content-narrow); }

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 400;
	line-height: 1.12;
	margin: 0 0 0.5em;
	letter-spacing: -0.01em;
}
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
p { margin: 0 0 1.2em; }

.eyebrow {
	font-family: var(--font-sans);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--book-accent, var(--color-terracotta));
	font-weight: 600;
	display: inline-block;
	margin-bottom: 1em;
	text-decoration: none;
}

.lede { font-family: var(--font-sans); color: var(--color-ink-soft); margin-bottom: 2rem; }
.section--night .lede { color: rgba(239,230,211,0.75); }
.lede--tight { margin-bottom: 0; }
.lede-note { font-family: var(--font-sans); font-size: 0.85rem; color: var(--color-ink-soft); opacity: 0.75; margin: 0.5rem 0 2rem; }
.section.section--tight { padding-bottom: 0; }
/* Sin esto, .section--tight no servía de nada: la sección siguiente
   conservaba su padding-top completo y el hueco no se reducía. */
.section--tight + .section { padding-top: 2.5rem; }
.single-post-thumb { margin-bottom: 2rem; border-radius: 6px; overflow: hidden; }
.btn--mt { margin-top: 1.5rem; }

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.9em 1.7em;
	border-radius: 999px;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform 0.35s var(--ease-out), background-color 0.35s, color 0.35s, border-color 0.35s;
	cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--color-terracotta); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-terracotta-dark); }
.btn--ghost-light { background: transparent; border-color: rgba(239,230,211,0.5); color: var(--color-paper-on-night); }
.btn--ghost-light:hover { background: rgba(239,230,211,0.12); }
.btn--ghost-dark { background: transparent; border-color: rgba(32,28,22,0.3); color: var(--color-ink); }
.btn--ghost-dark:hover { background: rgba(32,28,22,0.06); }

/* Header */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	padding: 1.4rem 0;
	transition: background-color 0.4s var(--ease-out), padding 0.4s var(--ease-out), box-shadow 0.4s;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.site-header.is-scrolled {
	background: rgba(246,241,231,0.92);
	backdrop-filter: blur(10px);
	padding: 0.8rem 0;
	box-shadow: 0 1px 0 rgba(32,28,22,0.08);
}
.site-header:not(.is-scrolled) { color: var(--color-paper-on-night); }
.site-header.is-scrolled { color: var(--color-ink); }
body.has-no-hero .site-header { background: rgba(246,241,231,0.92); backdrop-filter: blur(10px); color: var(--color-ink); box-shadow: 0 1px 0 rgba(32,28,22,0.08); }

.site-logo { font-family: var(--font-signature); font-weight: 700; font-size: 1.85rem; text-decoration: none; letter-spacing: normal; line-height: 1; }

.primary-nav ul { list-style: none; display: flex; gap: 2.1rem; margin: 0; padding: 0; }
.primary-nav a {
	font-family: var(--font-sans);
	font-size: 0.92rem;
	letter-spacing: 0.03em;
	text-decoration: none;
	opacity: 0.86;
	transition: opacity 0.3s;
}
.primary-nav a:hover { opacity: 1; }

/* Mega-menú del ítem "Libros" — una miniatura por colección en vez de
   texto plano (petición del autor, 2026-09-11). El texto navega, la
   flecha (aparte) solo abre/cierra el panel — ver main.js initMegaMenu(). */
.has-mega { position: relative; }
.mega-trigger { display: inline-flex; align-items: center; gap: 0.3rem; }
.mega-trigger__link:hover { opacity: 1; }
.mega-trigger__arrow {
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer;
	padding: 0.45rem 0.15rem 0.45rem 0.3rem; margin: -0.45rem -0.15rem -0.45rem 0;
}
.mega-trigger__arrow:hover, .has-mega.is-open .mega-trigger__arrow { opacity: 1; }
.mega-trigger__arrow svg { width: 9px; height: 9px; transition: transform 0.25s ease; }
.has-mega.is-open .mega-trigger__arrow svg { transform: rotate(180deg); }

.mega {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translate(-50%, -8px);
	width: min(340px, 90vw);
	max-height: min(420px, 70vh);
	overflow-y: auto;
	background: var(--color-paper);
	color: var(--color-ink);
	border: 1px solid rgba(32,28,22,0.12);
	border-radius: 10px;
	box-shadow: 0 24px 48px -18px rgba(32,28,22,0.28);
	padding: 0.65rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
	z-index: 20;
}
.has-mega.is-open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.mega__grid { display: flex; flex-direction: column; gap: 0.4rem; }
.mega__card {
	display: flex; align-items: stretch; text-decoration: none;
	border-radius: 7px; overflow: hidden; border: 1px solid rgba(32,28,22,0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mega__card:hover { transform: translateX(3px); box-shadow: 0 10px 20px -12px rgba(32,28,22,0.3); }
.mega__thumb { flex-shrink: 0; width: 112px; display: flex; align-items: center; justify-content: center; padding: 0.5rem; }
.mega__thumb img { width: 100%; height: auto; max-height: 50px; object-fit: contain; display: block; }
.mega__card--mm .mega__thumb, .mega__card--mm .mega__body { background: #0a0c13; }
.mega__card--da .mega__thumb, .mega__card--da .mega__body { background: #eef6fb; }
.mega__card--mn .mega__thumb, .mega__card--mn .mega__body { background: #fff9e6; }
.mega__body { flex: 1; min-width: 0; padding: 0.5rem 0.85rem 0.5rem 0.7rem; display: flex; flex-direction: column; justify-content: center; }
.mega__title { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 0.9rem; margin: 0 0 0.15rem; }
.mega__card--mm .mega__title { color: #ece4d6; }
.mega__card--da .mega__title { color: #12324a; }
.mega__card--mn .mega__title { color: #011b39; }
.mega__blurb { font-size: 0.72rem; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega__card--mm .mega__blurb { color: rgba(236,228,214,0.66); }
.mega__card--da .mega__blurb { color: rgba(18,50,74,0.66); }
.mega__card--mn .mega__blurb { color: rgba(1,27,57,0.66); }
.mega a.mega__all {
	/* selector reforzado (".mega a.mega__all", no ".mega__all" a secas):
	   dentro de .primary-nav, la regla móvil ".primary-nav a { font-size:
	   1.4rem; color: ... }" empata o gana en especificidad y además va
	   detrás en el archivo — sin este refuerzo se comía el tamaño/color
	   aquí, mismo bug de especificidad que ya se corrigió antes en
	   a.mm-btn/a.da-btn */
	display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
	margin-top: 0.7rem; padding-top: 0.65rem; border-top: 1px solid rgba(32,28,22,0.12);
	font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--color-ink);
}
.mega__all span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega__all svg { width: 12px; height: 12px; flex-shrink: 0; }

.nav-toggle {
	display: none;
	background: none; border: none; cursor: pointer;
	width: 34px; height: 24px; position: relative; padding: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
	content: ''; display: block; position: absolute; left: 0; right: 0; height: 2px;
	background: currentColor; transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle span { top: 11px; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 860px) {
	.nav-toggle { display: block; }
	.primary-nav {
		position: fixed; inset: 0; top: 0;
		background: var(--color-night);
		display: flex; align-items: center; justify-content: center;
		opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease-out);
	}
	body.nav-open .primary-nav { opacity: 1; visibility: visible; }
	.primary-nav ul { flex-direction: column; text-align: center; gap: 1.8rem; }
	.primary-nav a, .mega-trigger__arrow { font-size: 1.4rem; color: var(--color-paper); }
	body.nav-open { overflow: hidden; }
	/* backdrop-filter on the header creates a containing block for the fixed
	   full-screen nav (it stops sizing against the viewport and shrinks to the
	   header's own box) — drop it while the menu is open, on any page */
	body.nav-open .site-header { backdrop-filter: none !important; }

	/* El "Libros" con mega-menú es el único ítem de dos partes: en la
	   navegación móvil a pantalla completa no hay sitio para un panel
	   flotante, así que el desplegable se abre en acordeón justo debajo,
	   dentro de la misma columna centrada. */
	.has-mega { display: flex; flex-direction: column; align-items: center; }
	.mega-trigger__arrow svg { width: 11px; height: 11px; }
	.mega {
		/* max-height NO va en la lista de "transition": con ella declarada aquí,
		   el override de mayor especificidad (.has-mega.is-open .mega) deja de
		   aplicarse — bug real de motor de renderizado confirmado en pruebas
		   (incluso usando una custom property intermedia), no un typo. Se anima
		   solo margin-top/padding; el alto cambia al instante. */
		position: static;
		opacity: 1; visibility: visible; pointer-events: none;
		transform: none;
		width: min(320px, 82vw);
		max-height: 0;
		overflow: hidden;
		margin-top: 0;
		padding: 0 0.6rem;
		transition: margin-top 0.35s ease, padding 0.35s ease;
	}
	.has-mega.is-open .mega {
		/* la regla de escritorio (.has-mega.is-open .mega, más específica que
		   la .mega de aquí) sigue metiendo su propio transform: translate(-50%,0)
		   — sin resetearlo aquí también, el panel se desplaza medio ancho hacia
		   la izquierda y se sale de la pantalla aunque position ya sea static */
		transform: none;
		max-height: 60vh;
		overflow-y: auto;
		margin-top: 0.9rem;
		padding: 0.6rem;
		pointer-events: auto;
	}
}

/* Hero */
.hero {
	position: relative;
	min-height: 100vh;
	background: var(--color-night);
	color: var(--color-paper-on-night);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.hero__photo {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 78% center;
	opacity: 0.94;
}
.hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, var(--color-night) 0%, rgba(22,19,15,0.78) 32%, rgba(22,19,15,0.15) 60%, rgba(22,19,15,0.05) 100%),
		linear-gradient(0deg, rgba(22,19,15,0.85) 0%, rgba(22,19,15,0.15) 45%, rgba(22,19,15,0.05) 100%);
}
.hero__content { position: relative; z-index: 2; padding-block: clamp(6rem, 10vh, 9rem) clamp(3.5rem, 8vh, 6rem); width: 100%; }
.hero__eyebrow { font-family: var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.8rem; color: var(--color-gold); margin-bottom: 1.4rem; }
.hero h1 { max-width: 14ch; color: var(--color-paper-on-night); }
.hero h1 .word { display: inline-block; opacity: 0; transform: translateY(0.4em); filter: blur(6px); }
.hero__lead { font-family: var(--font-sans); font-size: var(--size-lead); max-width: 46ch; color: rgba(239,230,211,0.82); margin-top: 1.2rem; }
.hero__cta { display: flex; gap: 1rem; margin-top: 2.2rem; flex-wrap: wrap; }
.hero__scrolldown {
	position: absolute; bottom: 2.2rem; left: var(--space-gutter);
	font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;
	color: rgba(239,230,211,0.6); display: flex; align-items: center; gap: 0.6rem; z-index: 2;
}
.hero__scrolldown::after { content: ''; width: 1px; height: 34px; background: currentColor; opacity: 0.5; }
@media (max-width: 700px) {
	/* On narrow screens the wrapped h1 + lead + buttons can fill the whole
	   100vh hero, pushing this bottom-pinned indicator right up against the
	   CTA row instead of sitting clear at the bottom — just drop it; the
	   scroll affordance is redundant on mobile anyway. */
	.hero__scrolldown { display: none; }
}

/* Reveal animations */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-group] > * { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
[data-reveal-group].is-visible > * { opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.03s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.12s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.21s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.30s; }

/* Facets strip */
.facets { background: var(--color-paper-2); padding-block: var(--space-section); }
.facets__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 2.5vw, 2.5rem); perspective: 900px; }
.facet__index { font-family: var(--font-sans); color: var(--color-terracotta); font-size: 0.85rem; letter-spacing: 0.1em; margin-bottom: 1rem; }
.facet {
	background: var(--color-paper);
	border-radius: 10px;
	padding: 1.9rem 1.6rem;
	border-top: 3px solid var(--book-accent, var(--color-terracotta));
	box-shadow: 0 4px 10px rgba(32,28,22,0.1);
	transform-style: preserve-3d;
	transition: transform 0.15s ease-out, box-shadow 0.25s var(--ease-out);
}
.facet:hover { box-shadow: 0 18px 34px rgba(32,28,22,0.2), 0 0 0 1px rgba(32,28,22,0.05); }
.facet h3 { margin-bottom: 0.5rem; }
.facet p { color: var(--color-ink-soft); margin-bottom: 0; }
@media (max-width: 780px) { .facets__grid { grid-template-columns: 1fr; gap: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .facet { transition: box-shadow 0.25s var(--ease-out); } }

/* Section generic */
.section { padding-block: var(--space-section); }
.section--night { background: var(--color-night); color: var(--color-paper-on-night); }
.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.section-head p { color: var(--color-ink-soft); font-size: var(--size-lead); font-family: var(--font-sans); }
.section--night .section-head p { color: rgba(239,230,211,0.75); }

/* FAQ por libro */
.faq-list { display: flex; flex-direction: column; gap: 0.9rem; }
.faq-item {
	background: var(--color-paper-2); border-radius: 8px; padding: 1.1rem 1.4rem;
}
.faq-item summary {
	font-family: var(--font-sans); font-weight: 600; cursor: pointer;
	list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: '+'; font-size: 1.3rem; color: var(--color-terracotta); flex-shrink: 0;
	transition: transform 0.25s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { font-family: var(--font-sans); color: var(--color-ink-soft); margin: 0.8rem 0 0; }

/* Sobre-mi teaser */
.about-teaser { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.about-teaser__photo { border-radius: 6px; overflow: hidden; aspect-ratio: 4/5; }
.about-teaser__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-teaser blockquote { font-size: var(--size-h3); font-family: var(--font-serif); font-style: italic; margin: 0 0 1.2rem; color: var(--color-ink); }
.about-teaser p.lede { font-family: var(--font-sans); color: var(--color-ink-soft); }
@media (max-width: 860px) { .about-teaser { grid-template-columns: 1fr; } .about-teaser__photo { max-width: 340px; } }

/* Variante con la foto como elemento dominante (cabecera de Sobre mí) */
.about-teaser--photo-lead {
	grid-template-columns: 1.05fr 0.95fr;
	grid-template-areas: "photo title" "photo desc";
}
/* El h1 con var(--size-h1) por defecto llega a 5rem — en una columna de
   texto ya estrecha, ese título largo se envolvía en muchas más líneas
   que la foto de al lado. Mismo tamaño que ya usa el blockquote del
   otro .about-teaser (misma función: frase de apertura, no un título
   de página normal). */
.about-teaser--photo-lead > h1 { grid-area: title; font-size: var(--size-h3); }
.about-teaser--photo-lead .about-teaser__photo { grid-area: photo; }
.about-teaser--photo-lead .about-teaser__desc { grid-area: desc; }
@media (max-width: 860px) {
	.about-teaser--photo-lead { grid-template-columns: 1fr; grid-template-areas: "title" "photo" "desc"; }
}
/* Difuminado en los bordes superior e inferior — la foto se funde con el fondo en vez de cortar en seco */
.about-teaser--photo-lead .about-teaser__photo img {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}

/* Libros grid */
.book-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 2.75rem); }
.book-card { text-decoration: none; color: inherit; display: block; perspective: 1200px; }
.book-card__cover {
	position: relative;
	border-radius: 4px; overflow: visible; background: var(--color-paper-2);
	box-shadow: 0 18px 40px -18px rgba(32,28,22,0.35);
	transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
	margin-bottom: 1.1rem;
	min-height: 8rem;
	transform-style: preserve-3d;
	transform-origin: 12% 50%;
}
/* Canto de páginas — pseudo-elemento oculto de perfil (rotateY 90deg), se revela al abrirse la portada en 3D al hover */
.book-card__cover::after {
	content: ""; position: absolute; top: 3px; bottom: 3px; left: 99%; width: 22px;
	background: repeating-linear-gradient(to right, #f2ece0, #f2ece0 3px, #cfc6b4 3px, #cfc6b4 4px);
	border-radius: 0 3px 3px 0;
	transform: rotateY(90deg); transform-origin: 0% 50%;
	opacity: 0; transition: opacity 0.3s;
}
.book-card:hover .book-card__cover { transform: translateY(-6px) rotateY(-16deg); box-shadow: 0 28px 55px -18px rgba(32,28,22,0.45); }
.book-card:hover .book-card__cover::after { opacity: 1; }
.book-card__cover img { width: 100%; height: auto; display: block; border-radius: 4px; }
.book-card__title { font-size: 1.2rem; margin-bottom: 0.2rem; }
.book-card__meta { font-family: var(--font-sans); font-size: 0.85rem; color: var(--color-ink-soft); }
.section--night .book-card__meta { color: rgba(239,230,211,0.65); }
.book-card__badge {
	position: absolute; top: 0.8rem; right: 0.8rem; z-index: 2;
	background: var(--color-night); color: var(--color-paper-on-night);
	font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
	padding: 0.35em 0.8em; border-radius: 999px; box-shadow: 0 6px 16px -4px rgba(0,0,0,0.4);
}
.book-card__badge--inline { position: static; display: inline-block; }
.books-empty { font-family: var(--font-sans); color: var(--color-ink-soft); border: 1px dashed rgba(32,28,22,0.25); border-radius: 8px; padding: 3rem; text-align: center; }
@media (max-width: 900px) { .book-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .book-grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; } }

/* Single libro */
.book-single-hero { padding-top: calc(var(--space-section) + 2rem); }
.book-single { display: grid; grid-template-columns: 340px 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.book-single__cover { border-radius: 6px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(32,28,22,0.4); }
.book-single__cover-placeholder { aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center; background: var(--color-paper-2); color: var(--color-ink-soft); font-family: var(--font-sans); font-size: 0.85rem; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.5; }
.book-single__editorial { font-family: var(--font-sans); color: var(--book-accent, var(--color-terracotta)); font-size: 0.9rem; letter-spacing: 0.05em; margin-bottom: 0.6rem; }
.book-single__synopsis { font-size: var(--size-lead); }
@media (max-width: 780px) { .book-single { grid-template-columns: 1fr; } .book-single__cover { max-width: 300px; } }

.btn--amazon {
	background: #f6f1e7; color: #131a12; border: 1px solid rgba(32,28,22,0.12);
	box-shadow: 0 12px 26px -14px rgba(32,28,22,0.35);
}
.btn--amazon::before {
	content: ''; width: 1.15em; height: 1.15em; flex-shrink: 0;
	background: #ff9900;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h10l1 4H6l1-4zm-1 6h12l-1.2 9.2a2 2 0 0 1-2 1.8H9.2a2 2 0 0 1-2-1.8L6 10z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h10l1 4H6l1-4zm-1 6h12l-1.2 9.2a2 2 0 0 1-2 1.8H9.2a2 2 0 0 1-2-1.8L6 10z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn--amazon:hover { background: #fff; }

/* Per-book page background: a barely-there wash of the accent color over the paper tone */
body.single-libro article { background-color: color-mix(in srgb, var(--book-accent, transparent) var(--book-bg-mix, 5%), var(--color-paper)); }

/* Per-book accent color — set via "Color de acento" meta, falls back to the site accent */
.btn--tema {
	border: 2px solid var(--book-accent, var(--color-gold));
	background-color: var(--color-paper);
	background-image:
		repeating-linear-gradient(135deg, color-mix(in srgb, var(--book-accent, var(--color-terracotta)) 14%, transparent) 0 7px, transparent 7px 14px),
		repeating-linear-gradient(45deg, color-mix(in srgb, var(--book-accent, var(--color-gold)) 14%, transparent) 0 7px, transparent 7px 14px);
}
.btn--tema:hover {
	background-color: #fffdf6;
	background-image:
		repeating-linear-gradient(135deg, color-mix(in srgb, var(--book-accent, var(--color-terracotta)) 22%, transparent) 0 7px, transparent 7px 14px),
		repeating-linear-gradient(45deg, color-mix(in srgb, var(--book-accent, var(--color-gold)) 22%, transparent) 0 7px, transparent 7px 14px);
}

/* Jungle motif — literal leaf + vine silhouettes (CSS mask), for books set via "Motivo del botón" */
/* Cancels .btn--tema's woven crosshatch background-image so only the leaf mask below shows */
.btn--motivo-selva,
.btn--motivo-selva:hover { background-image: none; position: relative; overflow: hidden; }
.btn--motivo-selva::before,
.btn--motivo-selva > span { position: relative; z-index: 1; }
.btn--motivo-selva::after {
	content: '';
	position: absolute; inset: 0; z-index: 0;
	background-color: color-mix(in srgb, var(--book-accent, var(--color-terracotta)) 16%, transparent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath transform='translate(14 13) rotate(20) translate(-7 -9)' d='M7 0C3 2 0 6 0 10a7 7 0 0 0 14 0C14 6 11 2 7 0z'/%3E%3Cpath d='M2 26c4-6 10-9 18-8' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/26px repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath transform='translate(14 13) rotate(20) translate(-7 -9)' d='M7 0C3 2 0 6 0 10a7 7 0 0 0 14 0C14 6 11 2 7 0z'/%3E%3Cpath d='M2 26c4-6 10-9 18-8' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/26px repeat;
	pointer-events: none;
}
.btn--motivo-selva:hover::after {
	background-color: color-mix(in srgb, var(--book-accent, var(--color-terracotta)) 26%, transparent);
}

/* Caravan motif ("caravana") — the button IS the photo: a real desert
   photograph fills the pill and pans/zooms slowly, clipped to the button's
   own shape, with a dark scrim so the label stays readable. jrj_buy_button()
   sets --book-photo-url and adds .btn-photo / .btn-photo-scrim spans. */
.btn--motivo-caravana {
	position: relative;
	overflow: hidden;
	background: #2a2015;
	color: #fdf8ee;
	border-color: var(--book-accent, var(--color-terracotta));
}
.btn--motivo-caravana:hover { background: #2a2015; }
.btn--motivo-caravana::before {
	position: relative; z-index: 2;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.btn--motivo-caravana .btn-photo {
	position: absolute; inset: -8px; z-index: 0;
	background-image: var(--book-photo-url);
	background-size: cover; background-position: center;
	animation: btn-photo-pan 6s ease-in-out infinite alternate;
}
.btn--motivo-caravana .btn-photo-scrim {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(20,14,8,0.15) 0%, rgba(20,14,8,0.55) 100%);
}
.btn--motivo-caravana > span:last-child {
	position: relative; z-index: 2;
	text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
@keyframes btn-photo-pan {
	0%   { transform: scale(1.35) translateX(-6%); }
	100% { transform: scale(1.5) translateX(6%); }
}
@media (prefers-reduced-motion: reduce) {
	.btn--motivo-caravana .btn-photo { animation: none; transform: scale(1.35); }
}

/* Meteor motif ("meteorito") — a fireball streaks across a night sky inside
   the button and detonates: flash, double shockwave ring, 6 embers with
   gravity fall, a growing dust cloud and a scorch mark that lingers, plus a
   brief camera-shake on the whole scene. All decorative layers live inside
   .meteor-scene (not the <a> itself) so the shake animation's transform
   doesn't fight the button's own :hover lift transform. */
.btn--motivo-meteorito {
	position: relative;
	overflow: hidden;
	background: #150e12;
	color: #fff3e0;
	border-color: #3a2410;
}
.btn--motivo-meteorito:hover { background: #150e12; }
.btn--motivo-meteorito::before {
	position: relative; z-index: 6;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.btn--motivo-meteorito > span:last-child {
	position: relative; z-index: 6;
	text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 10px rgba(0,0,0,0.4);
}
.meteor-scene {
	position: absolute; inset: 0; z-index: 0;
	animation: btn-shake 4.6s ease-in-out infinite;
}
.meteor-bg {
	position: absolute; inset: 0; z-index: 0;
	background:
		radial-gradient(120% 90% at 78% 82%, color-mix(in srgb, var(--book-accent, var(--color-terracotta)) 35%, transparent), transparent 55%),
		linear-gradient(180deg, #0d0a12 0%, #1a1220 55%, #241627 100%);
}
.meteor-stars { position: absolute; inset: 0; z-index: 0; }
.meteor-stars span { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0.5; }
.meteor-ground {
	position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 1;
	background: linear-gradient(180deg, #3a2412 0%, #1c1208 100%);
	clip-path: polygon(0 40%, 15% 30%, 35% 45%, 55% 25%, 72% 40%, 100% 20%, 100% 100%, 0% 100%);
}
.meteor { position: absolute; z-index: 2; width: 12px; height: 12px; top: 0; left: 0; animation: meteor-fly 4.6s cubic-bezier(.55,0,.85,.35) infinite; }
.meteor__trail {
	position: absolute; right: 5px; top: 4.5px; width: 48px; height: 3px; border-radius: 3px;
	background: linear-gradient(90deg, transparent, rgba(255,180,90,0.85) 55%, rgba(255,235,180,0.95));
	filter: blur(0.5px);
	transform-origin: right center;
}
.meteor__core {
	position: absolute; inset: 0; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff8ea, #ffcf7a 40%, var(--book-accent, #e0691a) 75%, #8a3a0a 100%);
	box-shadow: 0 0 10px 3px rgba(255,170,70,0.8), 0 0 22px 8px color-mix(in srgb, var(--book-accent, #e0691a) 60%, transparent);
}
@keyframes meteor-fly {
	0%    { transform: translate(-12px,-8px) scale(0.5) rotate(35deg); opacity: 1; }
	40%   { transform: translate(122px,20px) scale(0.9) rotate(35deg); opacity: 1; }
	43%   { transform: translate(148px,26px) scale(1.05) rotate(35deg); opacity: 1; }
	43.5% { opacity: 0; }
	100%  { opacity: 0; transform: translate(148px,26px) scale(1.05) rotate(35deg); }
}
.impact-flash {
	position: absolute; z-index: 3; left: 148px; top: 26px; width: 9px; height: 9px; margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0%, #ffd9a0 30%, color-mix(in srgb, var(--book-accent, #e0691a) 90%, transparent) 55%, transparent 75%);
	opacity: 0; transform: scale(0.3);
	animation: flash-pop 4.6s ease-out infinite;
}
@keyframes flash-pop {
	0%, 42.8% { opacity: 0; transform: scale(0.2); }
	43.2%     { opacity: 1; transform: scale(7); }
	46%       { opacity: 0.9; transform: scale(8.5); }
	52%       { opacity: 0; transform: scale(10); }
	100%      { opacity: 0; transform: scale(10); }
}
.shockwave {
	position: absolute; z-index: 3; left: 148px; top: 26px; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
	border-radius: 50%; border: 2px solid rgba(255,205,140,0.9);
	opacity: 0;
	animation: ring-expand 4.6s ease-out infinite;
}
.shockwave.w2 { animation-delay: 0.12s; border-color: rgba(255,170,90,0.7); }
@keyframes ring-expand {
	0%, 43% { opacity: 0; transform: scale(1); }
	44%     { opacity: 0.9; transform: scale(1); }
	62%     { opacity: 0; transform: scale(17); }
	100%    { opacity: 0; transform: scale(17); }
}
.meteor-embers { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ember {
	position: absolute; left: 148px; top: 26px; width: 3.5px; height: 3.5px; border-radius: 50%;
	background: radial-gradient(circle, #fff2cf, #ff9a3d 60%, transparent 75%);
	opacity: 0;
	animation: ember-burst 4.6s cubic-bezier(.25,.8,.4,1) infinite;
}
.ember.e1 { --dx: -38px; --dy: -20px; animation-delay: 0.02s; }
.ember.e2 { --dx: -24px; --dy: -30px; animation-delay: 0.06s; }
.ember.e3 { --dx: 5px;   --dy: -32px; animation-delay: 0.03s; }
.ember.e4 { --dx: 27px;  --dy: -22px; animation-delay: 0.08s; }
.ember.e5 { --dx: 38px;  --dy: -6px;  animation-delay: 0.01s; }
.ember.e6 { --dx: -10px; --dy: -34px; animation-delay: 0.1s; }
@keyframes ember-burst {
	0%, 43% { opacity: 0; transform: translate(0,0) scale(1); }
	44%     { opacity: 1; transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) scale(1); }
	60%     { opacity: 0.9; transform: translate(var(--dx), calc(var(--dy) + 8px)) scale(0.6); }
	75%     { opacity: 0; transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 20px)) scale(0.3); }
	100%    { opacity: 0; }
}
.meteor-dust {
	position: absolute; z-index: 2; left: 148px; top: 30px; width: 17px; height: 12px; margin: -6px 0 0 -8.5px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(120,90,60,0.85), rgba(90,65,45,0.5) 60%, transparent 75%);
	opacity: 0; transform: scale(0.5);
	animation: dust-grow 4.6s ease-out infinite;
}
@keyframes dust-grow {
	0%, 43.5% { opacity: 0; transform: scale(0.5) translateY(0); }
	50%       { opacity: 0.85; transform: scale(2.2) translateY(-3px); }
	75%       { opacity: 0.4; transform: scale(3.2) translateY(-8px); }
	95%       { opacity: 0; transform: scale(3.8) translateY(-11px); }
	100%      { opacity: 0; }
}
.meteor-scorch {
	position: absolute; z-index: 1; left: 148px; top: 30px; width: 22px; height: 10px; margin: -5px 0 0 -11px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(20,12,8,0.75), rgba(20,12,8,0.35) 60%, transparent 80%);
	opacity: 0;
	animation: scorch-fade 4.6s ease-in-out infinite;
}
@keyframes scorch-fade {
	0%, 44% { opacity: 0; }
	50%     { opacity: 0.8; }
	85%     { opacity: 0.6; }
	100%    { opacity: 0; }
}
@keyframes btn-shake {
	0%, 42.5% { transform: translate(0,0); }
	43%       { transform: translate(-2px,1px); }
	43.6%     { transform: translate(3px,-1px); }
	44.2%     { transform: translate(-2px,2px); }
	44.8%     { transform: translate(2px,-1px); }
	45.4%     { transform: translate(-1px,1px); }
	46%, 100% { transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce) {
	.meteor-scene, .meteor, .impact-flash, .shockwave, .ember, .meteor-dust, .meteor-scorch { animation: none; }
	.meteor { opacity: 0; }
	.meteor-scorch { opacity: 0.6; }
}

/* Bloodstream motif ("torrente") — an ambient, no-climax loop: red blood
   cells drift continuously through the button like the inside of a blood
   vessel, with an occasional white blood cell passing through. Background
   wash derives from --book-accent so the motif could be reused on a
   different book without looking mismatched; the cells themselves stay a
   fixed blood-red regardless, since that reads as "blood" on any hue. */
.btn--motivo-torrente {
	position: relative;
	overflow: hidden;
	background: #2a0b0a;
	color: #fdeceb;
	border-color: var(--book-accent, var(--color-terracotta));
}
.btn--motivo-torrente:hover { background: #2a0b0a; }
.btn--motivo-torrente::before {
	position: relative; z-index: 6;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.btn--motivo-torrente > span:last-child {
	position: relative; z-index: 6;
	text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 10px rgba(0,0,0,0.4);
}
.blood-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.blood-bg {
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--book-accent, #b8302f) 30%, #1a0808) 0%,
		color-mix(in srgb, var(--book-accent, #b8302f) 45%, #1a0808) 55%,
		color-mix(in srgb, var(--book-accent, #b8302f) 30%, #1a0808) 100%);
}
.vessel-wall { position: absolute; left: 0; right: 0; height: 4px; background: rgba(0,0,0,0.35); z-index: 1; }
.vessel-wall.top { top: 0; }
.vessel-wall.bottom { bottom: 0; }
.rbc {
	position: absolute; top: 0; left: 0; border-radius: 50%; z-index: 2;
	background: radial-gradient(circle at 35% 35%, #ff8a7c, #c22a1f 65%, #8f1a12 100%);
	animation-name: rbc-flow; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes rbc-flow {
	from { transform: translateX(-24px); }
	to   { transform: translateX(251px); }
}
.rbc.c1 { width: 14px; height: 9px;  top: 8px;  animation-duration: 2.6s; animation-delay: 0s; }
.rbc.c2 { width: 12px; height: 8px;  top: 20px; animation-duration: 3.1s; animation-delay: -1s; }
.rbc.c3 { width: 15px; height: 10px; top: 34px; animation-duration: 2.4s; animation-delay: -0.4s; }
.rbc.c4 { width: 11px; height: 7px;  top: 44px; animation-duration: 2.9s; animation-delay: -2s; }
.rbc.c5 { width: 13px; height: 8px;  top: 14px; animation-duration: 2.7s; animation-delay: -1.6s; }
.rbc.c6 { width: 12px; height: 8px;  top: 30px; animation-duration: 3.3s; animation-delay: -2.4s; }
.rbc.c7 { width: 14px; height: 9px;  top: 40px; animation-duration: 2.5s; animation-delay: -0.8s; }
.wbc-drift {
	position: absolute; top: 24px; left: 0; width: 20px; height: 20px; z-index: 2;
	background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), rgba(210,225,255,0.7) 60%, rgba(180,200,255,0.35) 80%);
	border-radius: 55% 45% 60% 40% / 45% 55% 40% 60%;
	animation: wbc-drift-flow 6s linear infinite;
}
@keyframes wbc-drift-flow {
	from { transform: translateX(-26px); }
	to   { transform: translateX(253px); }
}
@media (prefers-reduced-motion: reduce) {
	.rbc, .wbc-drift { animation: none; opacity: 0.6; }
}

/* Morpho motif ("morfos") — three iridescent blue morpho butterflies flit
   through the button at different sizes/depths/rhythms (never in sync), each
   flapping through a blue-to-brown color shift like the real structural
   colour of the species. Background is a lighter sunlit green (mixed from
   --book-accent) rather than a dark night scene, deliberately, so the
   butterflies read clearly instead of disappearing into the dark. */
.btn--motivo-morfos {
	position: relative;
	overflow: hidden;
	background: #4a6b2e;
	color: #16210c;
	border-color: var(--book-accent, var(--color-terracotta));
}
.btn--motivo-morfos:hover { background: #4a6b2e; }
.btn--motivo-morfos::before {
	position: relative; z-index: 6;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.btn--motivo-morfos > span:last-child {
	position: relative; z-index: 6;
	color: #f2f7e9;
	text-shadow: 0 1px 3px rgba(0,0,0,0.65), 0 0 8px rgba(0,0,0,0.35);
}
.morpho-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.morpho-bg {
	position: absolute; inset: 0;
	background:
		radial-gradient(60px 60px at 30% 15%, rgba(255,255,240,0.3), transparent 70%),
		radial-gradient(50px 50px at 78% 70%, rgba(255,255,240,0.22), transparent 70%),
		linear-gradient(180deg,
			color-mix(in srgb, var(--book-accent, #5b8a2e) 55%, #dff0c8) 0%,
			color-mix(in srgb, var(--book-accent, #5b8a2e) 72%, #eaf5d6) 100%);
	animation: dapple-pulse 5s ease-in-out infinite;
}
@keyframes dapple-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
.morpho { position: absolute; top: 0; left: 0; }
.morpho svg { width: 100%; height: 100%; overflow: visible; }
.morpho .wing { transform-origin: 50% 50%; }
.morpho .wing-blue { fill: #3d7bd6; }
.morpho .wing-brown { fill: #5c4a3a; }
.m-front { width: 32px; height: 26px; margin: -13px 0 0 -16px; z-index: 3; animation: fly-a 4.6s ease-in-out infinite; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
.m-front .wing { animation: flap-a 0.46s ease-in-out infinite; }
.m-front .wing.right { animation-delay: 0.23s; }
.m-front .wing-blue { animation: shift-blue-a 0.46s ease-in-out infinite; }
.m-front .wing-brown { animation: shift-brown-a 0.46s ease-in-out infinite; }
@keyframes fly-a {
	0%   { transform: translate(-8px,32px) rotate(-4deg); }
	30%  { transform: translate(60px,10px) rotate(4deg); }
	55%  { transform: translate(115px,36px) rotate(-3deg); }
	80%  { transform: translate(172px,12px) rotate(4deg); }
	100% { transform: translate(-8px,32px) rotate(-4deg); }
}
.m-mid { width: 22px; height: 18px; margin: -9px 0 0 -11px; z-index: 2; opacity: 0.92; animation: fly-b 5.4s ease-in-out infinite; animation-delay: -1.4s; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.m-mid .wing { animation: flap-a 0.4s ease-in-out infinite; }
.m-mid .wing.right { animation-delay: 0.2s; }
.m-mid .wing-blue { animation: shift-blue-a 0.4s ease-in-out infinite; }
.m-mid .wing-brown { animation: shift-brown-a 0.4s ease-in-out infinite; }
@keyframes fly-b {
	0%   { transform: translate(190px,8px) rotate(8deg); }
	35%  { transform: translate(120px,40px) rotate(-6deg); }
	65%  { transform: translate(55px,6px) rotate(6deg); }
	100% { transform: translate(190px,8px) rotate(8deg); }
}
.m-back { width: 15px; height: 12px; margin: -6px 0 0 -7.5px; z-index: 1; opacity: 0.6; animation: fly-c 6.8s ease-in-out infinite; animation-delay: -3s; filter: blur(0.3px); }
.m-back .wing { animation: flap-a 0.55s ease-in-out infinite; }
.m-back .wing.right { animation-delay: 0.27s; }
.m-back .wing-blue { animation: shift-blue-a 0.55s ease-in-out infinite; }
.m-back .wing-brown { animation: shift-brown-a 0.55s ease-in-out infinite; }
@keyframes fly-c {
	0%   { transform: translate(20px,46px) rotate(-6deg); }
	40%  { transform: translate(95px,14px) rotate(5deg); }
	70%  { transform: translate(160px,42px) rotate(-4deg); }
	100% { transform: translate(20px,46px) rotate(-6deg); }
}
@keyframes flap-a { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.32); } }
@keyframes shift-blue-a { 0%, 100% { opacity: 1; } 50% { opacity: 0.12; } }
@keyframes shift-brown-a { 0%, 100% { opacity: 0; } 50% { opacity: 0.9; } }
.morpho-sparkle { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fffef0; opacity: 0; z-index: 2; }
.morpho-sparkle.sp1 { top: 16px; left: 70px; animation: sparkle-fade 4.6s ease-in-out infinite; animation-delay: 0.9s; }
.morpho-sparkle.sp2 { top: 34px; left: 130px; animation: sparkle-fade 5.4s ease-in-out infinite; animation-delay: 2.1s; }
.morpho-sparkle.sp3 { top: 12px; left: 180px; animation: sparkle-fade 6.8s ease-in-out infinite; animation-delay: 3.6s; }
@keyframes sparkle-fade { 0%, 88% { opacity: 0; } 90% { opacity: 0.9; } 96% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.morpho, .morpho .wing, .morpho .wing-blue, .morpho .wing-brown, .morpho-bg, .morpho-sparkle { animation: none; }
}

/* Sunrise motif ("amanecer") — no animal (hand-drawn creature silhouettes
   read as blobs at this size); the acacia silhouette and the sunrise
   gradient carry the whole scene instead. Ambient loop, no climax: the sun
   breathes gently, ground haze shimmers, and three birds cross the sky at
   different times/heights/speeds so they never sync up. */
.btn--motivo-amanecer {
	position: relative;
	overflow: hidden;
	background: #7a3a1c;
	color: #fff6e0;
	border-color: var(--book-accent, var(--color-terracotta));
}
.btn--motivo-amanecer:hover { background: #7a3a1c; }
.btn--motivo-amanecer::before {
	position: relative; z-index: 6;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.btn--motivo-amanecer > span:last-child {
	position: relative; z-index: 6;
	text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 10px rgba(0,0,0,0.4);
}
.savanna-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sky {
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--book-accent, #b8860b) 55%, #f3d089) 0%,
		color-mix(in srgb, var(--book-accent, #b8860b) 70%, #e8a23d) 28%,
		#f0973a 48%,
		#d9622e 68%,
		#7a3a1c 100%);
}
.sun-glow {
	position: absolute; left: 64px; bottom: 6px; width: 80px; height: 80px; margin: 0 0 0 -40px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,238,190,0.95) 0%, rgba(255,210,120,0.55) 35%, transparent 70%);
	animation: sun-breathe 4.5s ease-in-out infinite;
}
.sun-core {
	position: absolute; left: 44px; bottom: 14px; width: 24px; height: 24px;
	border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8e0, #ffdf8c 55%, #ffb347 100%);
	box-shadow: 0 0 14px 4px rgba(255,210,120,0.7);
	animation: sun-breathe 4.5s ease-in-out infinite;
}
@keyframes sun-breathe {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(-2px) scale(1.04); }
}
.haze {
	position: absolute; left: 0; right: 0; bottom: 8px; height: 14px;
	background: linear-gradient(180deg, rgba(255,220,160,0.35), transparent);
	animation: haze-shimmer 2.6s ease-in-out infinite;
}
@keyframes haze-shimmer {
	0%, 100% { transform: scaleY(1) translateY(0); opacity: 0.6; }
	50%      { transform: scaleY(1.3) translateY(-1px); opacity: 0.35; }
}
.savanna-ground {
	position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
	background: #241407;
	clip-path: polygon(0 60%, 100% 40%, 100% 100%, 0 100%);
}
.grass-tuft { position: absolute; bottom: 6px; width: 1.5px; height: 8px; background: #1c0f05; border-radius: 1px; }
.grass-tuft.t1 { left: 15px; }
.grass-tuft.t2 { left: 19px; height: 6px; }
.grass-tuft.t3 { left: 200px; }
.grass-tuft.t4 { left: 206px; height: 7px; }
.grass-tuft.t5 { left: 212px; height: 5px; }
.acacia { position: absolute; right: 24px; bottom: 6px; width: 140px; height: 74px; }
.acacia svg { width: 100%; height: 100%; overflow: visible; display: block; }
.acacia path, .acacia circle { fill: #1c0f05; }
.bird { position: absolute; opacity: 0; }
.bird svg { width: 100%; height: 100%; overflow: visible; }
.bird path { stroke: #1c0f05; stroke-width: 1.4; fill: none; stroke-linecap: round; }
.bird.b1 { top: 14px; left: 0; width: 11px; height: 6px; animation: bird1-fly 9s linear infinite; }
.bird.b2 { top: 22px; left: 0; width: 8px; height: 5px; animation: bird2-fly 11s linear infinite; animation-delay: -3.5s; }
.bird.b3 { top: 9px; left: 0; width: 9px; height: 5px; animation: bird3-fly 13s linear infinite; animation-delay: -7s; }
@keyframes bird1-fly {
	0%   { opacity: 0; transform: translate(-16px,4px); }
	6%   { opacity: 0.8; }
	46%  { opacity: 0.8; transform: translate(150px,-10px); }
	52%  { opacity: 0; }
	100% { opacity: 0; transform: translate(240px,-14px); }
}
@keyframes bird2-fly {
	0%   { opacity: 0; transform: translate(-14px,2px); }
	5%   { opacity: 0.65; }
	40%  { opacity: 0.65; transform: translate(130px,-6px); }
	46%  { opacity: 0; }
	100% { opacity: 0; transform: translate(240px,-10px); }
}
@keyframes bird3-fly {
	0%   { opacity: 0; transform: translate(-14px,0); }
	4%   { opacity: 0.7; }
	36%  { opacity: 0.7; transform: translate(160px,-8px); }
	42%  { opacity: 0; }
	100% { opacity: 0; transform: translate(250px,-12px); }
}
.wing-flap { animation: wing-beat 0.35s ease-in-out infinite; transform-origin: center; }
@keyframes wing-beat { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.4); } }
@media (prefers-reduced-motion: reduce) {
	.sun-glow, .sun-core, .haze, .bird { animation: none; }
	.bird { opacity: 0; }
}

/* Drakkar motif ("drakkar") — a viking longship with a dragon-head prow
   sails continuously across the button, sail billowing in the wind, hull
   bobbing gently, with a couple of foam puffs at the bow. Ambient loop, no
   climax — same "ship silhouette reads better than an animal" lesson as
   the sunrise motif. Sea gradient derives from --book-accent. */
.btn--motivo-drakkar {
	position: relative;
	overflow: hidden;
	background: #4a6b82;
	color: #eef3f6;
	border-color: var(--book-accent, var(--color-terracotta));
}
.btn--motivo-drakkar:hover { background: #4a6b82; }
.btn--motivo-drakkar::before {
	position: relative; z-index: 6;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.btn--motivo-drakkar > span:last-child {
	position: relative; z-index: 6;
	text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 10px rgba(0,0,0,0.4);
}
.ship-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ship-bg {
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--book-accent, #4a6b82) 45%, #cfe0ea) 0%,
		color-mix(in srgb, var(--book-accent, #4a6b82) 65%, #9fb9c9) 60%,
		color-mix(in srgb, var(--book-accent, #4a6b82) 80%, #4a6b82) 100%);
}
.ship-sun { position: absolute; left: 170px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle,#fff8e0,#ffe2a0 70%,transparent 85%); opacity: 0.85; }
.ship-waterline { position: absolute; left: 0; right: 0; bottom: 14px; height: 1px; background: rgba(255,255,255,0.25); }
.drakkar { position: absolute; bottom: 10px; width: 64px; height: 34px; animation: drakkar-sail 8s linear infinite; }
.drakkar svg { width: 100%; height: 100%; overflow: visible; }
@keyframes drakkar-sail { from { transform: translateX(-70px) translateY(0); } to { transform: translateX(260px) translateY(0); } }
.drakkar-bob { animation: drakkar-bob 1.8s ease-in-out infinite; }
@keyframes drakkar-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-1.5px) rotate(-1.5deg); } }
.sail-fill { animation: sail-billow 2.4s ease-in-out infinite; transform-origin: 50% 0%; }
@keyframes sail-billow { 0%, 100% { transform: skewX(-2deg); } 50% { transform: skewX(3deg); } }
.foam { position: absolute; bottom: 11px; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.7); opacity: 0; }
.foam.f1 { animation: foam-pop 8s linear infinite; animation-delay: 0.1s; }
.foam.f2 { animation: foam-pop 8s linear infinite; animation-delay: 0.5s; }
@keyframes foam-pop {
	0%   { opacity: 0; left: -70px; }
	4%   { opacity: 0.8; }
	10%  { opacity: 0; left: -40px; }
	100% { opacity: 0; left: 260px; }
}
@media (prefers-reduced-motion: reduce) {
	.drakkar, .drakkar-bob, .sail-fill, .foam { animation: none; }
}

/* Rocket motif ("cohete") — a detailed rocket flies a full loop around the
   button itself (not clipped inside it), with a flickering flame and a
   spark trail. jrj_buy_button() wraps the link + decoration in
   .btn-orbit-wrap when this motivo is set. */
.btn-orbit-wrap {
	position: relative;
	display: inline-block;
	padding: 100px;
	margin: -100px;
}
.btn-rocket-fx { position: absolute; inset: 0; pointer-events: none; }
.btn-rocket-orbit {
	position: absolute; inset: 0;
	animation: btn-rocket-fly 4.5s cubic-bezier(0.45,0,0.55,1) infinite;
}
.btn-rocket {
	position: absolute; top: 50%; left: 50%;
	width: 32px; height: 54px;
	margin: -27px 0 0 -16px;
	color: var(--book-accent, var(--color-terracotta));
	animation: btn-rocket-tilt 4.5s cubic-bezier(0.45,0,0.55,1) infinite;
}
.btn-rocket svg { width: 100%; height: 100%; display: block; overflow: visible; }
.btn-rocket__flame-outer { animation: btn-rocket-flame 0.18s ease-in-out infinite alternate; transform-origin: 30px 78px; }
.btn-rocket__flame-inner { animation: btn-rocket-flame 0.13s ease-in-out infinite alternate-reverse; transform-origin: 30px 74px; }
@keyframes btn-rocket-flame { from { transform: scaleY(1) scaleX(1); } to { transform: scaleY(1.22) scaleX(0.88); } }
@keyframes btn-rocket-fly {
	0%   { transform: translate(-69px, 39px); }
	25%  { transform: translate(-22px, -52px); }
	50%  { transform: translate(69px, -17px); }
	75%  { transform: translate(22px, 52px); }
	100% { transform: translate(-69px, 39px); }
}
@keyframes btn-rocket-tilt {
	0%   { transform: rotate(-40deg); }
	25%  { transform: rotate(45deg); }
	50%  { transform: rotate(135deg); }
	75%  { transform: rotate(215deg); }
	100% { transform: rotate(320deg); }
}
.btn-spark {
	position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 50%;
	background: radial-gradient(circle, #fff, var(--book-accent, var(--color-terracotta)) 60%, transparent 70%);
	animation: btn-spark-trail 4.5s cubic-bezier(0.45,0,0.55,1) infinite;
	opacity: 0;
}
.btn-spark:nth-child(2) { animation-delay: -0.12s; }
.btn-spark:nth-child(3) { animation-delay: -0.24s; }
.btn-spark:nth-child(4) { animation-delay: -0.36s; }
.btn-spark:nth-child(5) { animation-delay: -0.48s; }
.btn-spark:nth-child(6) { animation-delay: -0.60s; }
@keyframes btn-spark-trail {
	0%   { transform: translate(-69px, 39px) scale(1); opacity: 0.8; }
	3%   { opacity: 0.8; }
	18%  { opacity: 0; }
	25%  { transform: translate(-22px, -52px) scale(0.4); opacity: 0; }
	100% { transform: translate(-69px, 39px) scale(1); opacity: 0; }
}
@media (max-width: 640px) {
	.btn-orbit-wrap { padding: 64px; margin: -64px; }
	.btn-rocket-fx { transform: scale(0.62); transform-origin: center; }
}
@media (prefers-reduced-motion: reduce) {
	.btn-rocket-fx { display: none; }
}

/* Adventure / product-in-context photo */
.book-adventure { position: relative; }
.book-adventure img { width: 100%; max-height: 620px; object-fit: cover; display: block; }
.book-adventure__copy {
	max-width: var(--content-narrow); margin-inline: auto; text-align: center;
	padding: clamp(2rem, 5vw, 3.5rem) var(--space-gutter) 0;
}
.book-adventure__copy p { font-family: var(--font-sans); color: var(--color-ink-soft); font-size: var(--size-lead); margin: 0; }

/* Atmosphere photos — one or more lifestyle shots in a row */
.book-atmosphere-row {
	display: flex; flex-direction: column; gap: 2px;
	background: var(--color-night);
}
.book-atmosphere-row__item { overflow: hidden; }
.book-atmosphere-row__item img { width: 100%; max-height: 560px; object-fit: cover; display: block; }
.book-atmosphere-row__quote {
	text-align: center; padding: clamp(2rem, 4vw, 3rem) var(--space-gutter);
	background: var(--color-night);
}
.book-atmosphere-row__quote p {
	font-family: var(--font-serif); font-style: italic; color: var(--color-paper);
	font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); margin: 0;
}

/* Open-book lead photo above the interior gallery */
.book-gallery-lead { margin-bottom: clamp(2rem, 4vw, 3rem); border-radius: 8px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(32,28,22,0.4); }
.book-gallery-lead img { width: 100%; height: auto; display: block; }

/* Optional culture/curiosity panel — shown only when a cultura image is attached */
.book-culture { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
.book-culture img {
	width: 100%; height: auto; display: block; border-radius: 8px;
	box-shadow: 0 30px 60px -24px rgba(32,28,22,0.35);
}

/* Look-inside gallery */
.book-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.book-gallery__item {
	padding: 0; border: none; background: none; cursor: zoom-in; border-radius: 6px; overflow: hidden;
	box-shadow: 0 14px 30px -16px rgba(32,28,22,0.35);
	transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.book-gallery__item:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 22px 40px -16px rgba(32,28,22,0.45); }
.book-gallery__item img { width: 100%; height: auto; display: block; }
@media (max-width: 780px) { .book-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .book-gallery { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; } }

/* Lightbox */
.lightbox {
	position: fixed; inset: 0; z-index: 1000; background: rgba(15,13,10,0.94);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease-out);
	padding: clamp(1rem, 5vw, 4rem);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: min(90vw, 900px); max-height: 86vh; border-radius: 6px; box-shadow: 0 30px 70px rgba(0,0,0,0.5); }
.lightbox__close, .lightbox__nav {
	position: absolute; background: rgba(246,241,231,0.1); color: var(--color-paper);
	border: 1px solid rgba(246,241,231,0.25); border-radius: 50%;
	width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
	font-size: 1.4rem; cursor: pointer; transition: background 0.3s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(246,241,231,0.2); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 2rem); }
.lightbox__nav--prev, .lightbox__nav--next { top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .lightbox__nav { width: 38px; height: 38px; font-size: 1.1rem; } }

/* Contact teaser + form */
.contact-teaser { text-align: center; max-width: 640px; margin-inline: auto; }
.contact-form { max-width: 640px; }
.form-row { margin-bottom: 1.3rem; }
.form-row label { display: block; font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.03em; margin-bottom: 0.45rem; color: var(--color-ink-soft); }
.form-row input, .form-row textarea {
	width: 100%; font-family: var(--font-sans); font-size: 1rem; padding: 0.85em 1em;
	border: 1px solid rgba(32,28,22,0.22); border-radius: 6px; background: #fff;
	transition: border-color 0.3s;
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--color-terracotta); }
.form-row textarea { resize: vertical; min-height: 130px; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-notice { font-family: var(--font-sans); padding: 1em 1.2em; border-radius: 6px; margin-bottom: 1.5rem; font-size: 0.95rem; }
.form-notice--ok { background: #e4efe0; color: #2e5c22; }
.form-notice--err { background: #f6e3df; color: #8f3f23; }
.form-privacy-note { font-family: var(--font-sans); font-size: 0.8rem; line-height: 1.6; color: var(--color-ink-soft); margin: 1.5rem 0; }
.form-privacy-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-privacy-note summary { cursor: pointer; font-weight: 600; color: var(--color-ink-soft); }
.form-privacy-note summary:hover { color: var(--color-ink); }
.form-privacy-note p { margin: 0.75rem 0 0; }
.contact-alt { font-family: var(--font-sans); font-size: 0.9rem; color: var(--color-ink-soft); margin-top: 1.25rem; }
.contact-alt a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Sobre mi full page narrative */
.narrative { max-width: var(--content-narrow); margin-inline: auto; padding-block: var(--space-section); }
.narrative p { font-size: var(--size-lead); }
.narrative .anchor {
	font-size: clamp(1.8rem, 1.4rem + 2vw, 3rem);
	font-style: italic;
	text-align: center;
	margin: 2.4em 0;
	color: var(--color-terracotta-dark);
}
.narrative figure { margin: 3rem 0; }
.narrative figure img { border-radius: 6px; }
.narrative figcaption { font-family: var(--font-sans); font-size: 0.8rem; color: var(--color-ink-soft); margin-top: 0.6rem; text-align: center; }
.narrative__closing { text-align: center; padding-top: 2rem; }
.narrative__closing p { font-size: var(--size-h3); font-style: italic; }

/* Sobre mi — chapter markers + photo breaks (visual pacing for a long
   single-column narrative, added without touching any of the copy) */
.chapter-mark {
	display: flex; align-items: center; gap: 0.9em;
	font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--color-terracotta); font-weight: 600;
	margin: 3.2em 0 1.2em;
}
.chapter-mark::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(177,80,47,0.35), transparent); }
.chapter-mark .num { font-family: var(--font-serif); font-style: italic; font-size: 1.3em; color: var(--color-terracotta-dark); }

.portrait-break { margin: 3rem calc(50% - 50vw) 3rem; display: flex; justify-content: center; }
.portrait-break__inner {
	display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: center;
	max-width: 900px; padding-inline: var(--space-gutter);
}
.portrait-break img { width: 200px; height: 240px; object-fit: cover; border-radius: 6px; box-shadow: 0 18px 40px -18px rgba(32,28,22,0.35); }
.portrait-break blockquote { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: var(--size-h3); color: var(--color-ink); }
@media (max-width: 720px) {
	.portrait-break__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

.narrative figure.wide-photo {
	/* selector reforzado: ".narrative figure { margin: 3rem 0; }" (más
	   arriba en este archivo) tiene más especificidad que ".wide-photo"
	   a secas y anulaba los márgenes negativos que sacan la imagen a
	   ancho completo — mismo bug de especificidad que a.mm-btn/a.da-btn */
	margin: 3rem calc(50% - 50vw) 3rem;
}
.wide-photo img { width: 100%; height: auto; display: block; }

.inline-photo { margin: 2.6rem 0; display: flex; justify-content: center; }
.inline-photo img { max-width: 360px; width: 100%; border-radius: 6px; box-shadow: 0 14px 30px -16px rgba(32,28,22,0.4); }
.inline-photo figcaption { font-family: var(--font-sans); font-size: 0.8rem; color: var(--color-ink-soft); margin-top: 0.6rem; text-align: center; }


/* Footer */
.site-footer { background: var(--color-night); color: rgba(239,230,211,0.7); padding-block: 3.5rem 2.5rem; }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.site-footer__name { font-family: var(--font-signature); font-weight: 700; color: var(--color-paper); font-size: 1.5rem; letter-spacing: normal; }
.site-footer__social { display: flex; gap: 1.3rem; list-style: none; margin: 0; padding: 0; }
.site-footer__social a { text-decoration: none; font-family: var(--font-sans); font-size: 0.85rem; opacity: 0.75; transition: opacity 0.3s; }
.site-footer__social a:hover { opacity: 1; }
.site-footer small { font-family: var(--font-sans); font-size: 0.78rem; display: block; width: 100%; margin-top: 1.5rem; }
.site-footer small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-footer small a:hover { color: var(--color-gold); }
.link-button { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-button:hover { color: var(--color-gold); }

/* Aviso de cookies */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; background: var(--color-night); color: rgba(239,230,211,0.9); padding: 1.2rem clamp(1rem, 4vw, 2rem); box-shadow: 0 -10px 30px rgba(0,0,0,0.25); }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { max-width: 1100px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.cookie-banner p { font-family: var(--font-sans); font-size: 0.9rem; margin: 0; max-width: 60ch; }
.cookie-banner p a { color: var(--color-gold); }
.cookie-banner__actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
@media (max-width: 560px) { .cookie-banner__inner { flex-direction: column; align-items: stretch; } .cookie-banner__actions { justify-content: flex-end; } }

/* Notas / blog */
.post-list { max-width: var(--content-narrow); margin-inline: auto; display: flex; flex-direction: column; gap: 2.5rem; }
.post-list article { padding-bottom: 2.5rem; border-bottom: 1px solid rgba(32,28,22,0.12); }
.post-list h2 { font-size: var(--size-h3); margin-bottom: 0.4rem; }
.post-list h2 a { text-decoration: none; }
.post-list .post-meta { font-family: var(--font-sans); font-size: 0.82rem; color: var(--color-ink-soft); margin-bottom: 0.8rem; }
.single-post .entry-content { max-width: var(--content-narrow); margin-inline: auto; font-size: var(--size-lead); }
.single-post .entry-content p { margin-bottom: 1.4em; }

/* Placeholder page (Docencia / Editoriales reservados) */
.placeholder-page { text-align: center; padding-block: calc(var(--space-section) + 3rem); }
.placeholder-page p { font-family: var(--font-sans); color: var(--color-ink-soft); max-width: 480px; margin-inline: auto; }

/* Maintenance page */
.jrj-maintenance { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--color-night); color: var(--color-paper); position: relative; overflow: hidden; }
.jrj-maintenance__inner { position: relative; z-index: 2; padding: 2rem; }
.jrj-maintenance h1 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.8rem); margin-bottom: 0.6rem; }
.jrj-maintenance p { font-family: var(--font-sans); color: rgba(239,230,211,0.7); font-size: 1.05rem; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-terracotta); color: #fff; padding: 0.8em 1.2em; z-index: 999; }
.skip-link:focus { left: 1rem; top: 1rem; }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* ---------- Muertos de Miedo: identidad propia de la colección (v1.8.0) ---------- */
.mm-page {
	--mm-ink: #0a0c13;
	--mm-ink-2: #12141f;
	--mm-ink-3: #1a1d2b;
	--mm-line: rgba(236,228,214,0.14);
	--mm-bone: #ece4d6;
	--mm-bone-soft: rgba(236,228,214,0.62);
	--mm-bone-faint: rgba(236,228,214,0.34);
	--mm-blue: #0662a3;
	--mm-blue-light: #6fb3e8;
	--mm-blue-glow: rgba(6,98,163,0.35);
	--mm-ember: #d98a3d;
	--mm-green: #8bc02c;
	--mm-green-light: #a3df32;
	--mm-green-glow: rgba(139,192,44,0.35);
	--mm-font-display: var(--font-serif);
	--mm-font-body: var(--font-sans);
	background: var(--mm-ink);
	color: var(--mm-bone);
	font-family: var(--mm-font-body);
	line-height: 1.5;
	position: relative;
}
.mm-page ::selection { background: var(--mm-blue); color: var(--mm-bone); }
.mm-page a { color: inherit; text-decoration: none; }

.mm-fog {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(ellipse 900px 500px at 18% -10%, var(--mm-green-glow), transparent 60%),
		radial-gradient(ellipse 700px 420px at 85% 8%, rgba(217,138,61,0.10), transparent 65%);
}
.mm-wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 1.75rem; }

.mm-hero { padding: 5.5rem 0 4rem; text-align: center; border-bottom: 1px solid var(--mm-line); }
.mm-eyebrow {
	font-family: var(--mm-font-body);
	text-transform: uppercase;
	letter-spacing: 0.32em;
	font-size: 0.72rem;
	color: var(--mm-bone-faint);
	margin-bottom: 1.6rem;
}
.mm-eyebrow::before { content: '☠ '; color: var(--mm-blue-light); letter-spacing: 0; }
.mm-hero__logo { max-width: min(560px, 84vw); width: 100%; height: auto; margin: 0 auto 1.6rem; filter: drop-shadow(0 22px 40px rgba(0,0,0,0.55)); }
.mm-hero__lead { font-family: var(--mm-font-body); font-size: 1.08rem; color: var(--mm-bone-soft); max-width: 70ch; margin: 0 auto; }

.mm-shelf { padding: 4.5rem 0 5rem; position: relative; z-index: 1; }
.mm-shelf__head { margin-bottom: 2.6rem; }
.mm-shelf__head h2 { font-family: var(--mm-font-display); font-style: italic; font-weight: 700; font-size: 1.9rem; margin: 0; color: var(--mm-bone); }
.mm-shelf__head p { margin: 0.4rem 0 0; color: var(--mm-bone-soft); font-size: 0.92rem; max-width: 75ch; }

.mm-shelf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.6rem 1.3rem; }

.mm-vol {
	position: relative;
	display: block;
	border-radius: 3px;
	overflow: hidden;
	background: var(--mm-ink-2);
	border: 1px solid var(--mm-line);
	transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.mm-vol:hover { transform: translateY(-6px); border-color: var(--mm-blue); box-shadow: 0 18px 34px -14px rgba(6,98,163,0.45); }
.mm-vol__num {
	position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
	background: rgba(10,12,19,0.75); backdrop-filter: blur(3px);
	border: 1px solid var(--mm-line); color: var(--mm-bone);
	font-family: var(--mm-font-body); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.06em;
	padding: 0.22rem 0.5rem; border-radius: 2px; font-variant-numeric: tabular-nums;
}
.mm-vol__cover { aspect-ratio: 3 / 4.55; width: 100%; height: auto; object-fit: cover; display: block; background: var(--mm-ink-3); }
.mm-vol__body { padding: 0.85rem 0.9rem 1rem; }
.mm-vol__title { font-family: var(--mm-font-display); font-weight: 700; font-size: 0.98rem; line-height: 1.18; margin: 0 0 0.4rem; color: var(--mm-bone); }
.mm-vol__blurb { font-size: 0.78rem; color: var(--mm-bone-soft); margin: 0 0 0.65rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mm-vol__status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; }
.mm-vol__status--live { color: var(--mm-blue-light); }
.mm-vol__status--live::before { content: '●'; font-size: 0.5rem; }
.mm-vol__status--soon { color: var(--mm-ember); }
.mm-vol__status--soon::before { content: '◐'; font-size: 0.62rem; }

.mm-thread { padding: 4rem 0; border-top: 1px solid var(--mm-line); position: relative; z-index: 1; }
.mm-thread__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: start; }
.mm-thread h2 { font-family: var(--mm-font-display); font-style: italic; font-weight: 700; font-size: 1.7rem; margin: 0 0 0.8rem; color: var(--mm-bone); }
.mm-thread__inner > div > p { color: var(--mm-bone-soft); font-size: 0.92rem; margin: 0; }
.mm-thread__chain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.mm-thread__chain li { display: flex; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--mm-line); align-items: baseline; }
.mm-thread__chain li:last-child { border-bottom: none; }
.mm-thread__chain .n { font-family: var(--mm-font-display); font-weight: 700; color: var(--mm-blue-light); font-size: 0.95rem; min-width: 1.6em; font-variant-numeric: tabular-nums; }
.mm-thread__chain .t { font-weight: 600; font-size: 0.95rem; color: var(--mm-bone); }
.mm-thread__chain .s { color: var(--mm-bone-faint); font-size: 0.82rem; margin-left: auto; white-space: nowrap; }

@media (max-width: 860px) {
	.mm-thread__inner { grid-template-columns: 1fr; gap: 1.6rem; }
	.mm-hero { padding: 4rem 0 3rem; }
}

/* Aviso de la colección en la portada */
.mm-spotlight { padding: var(--space-section) 0; overflow: hidden; }
.mm-spotlight__inner {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
.mm-spotlight__text .mm-eyebrow { margin-bottom: 1rem; }
.mm-spotlight__text h2 {
	font-family: var(--mm-font-display); font-style: italic; font-weight: 700;
	font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.7rem); margin: 0 0 1rem; color: var(--mm-bone);
}
.mm-spotlight__lead { color: var(--mm-bone-soft); font-size: 1.02rem; max-width: 42ch; margin: 0 0 1.8rem; }
.mm-spotlight__logo { width: 100%; height: auto; filter: drop-shadow(0 22px 40px rgba(0,0,0,0.5)); }
a.mm-btn {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: var(--mm-green); color: var(--mm-ink);
	font-family: var(--mm-font-body); font-weight: 600; font-size: 0.92rem;
	padding: 0.75rem 1.5rem; border-radius: 3px; text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
}
.mm-btn:hover { background: var(--mm-green-light); color: var(--mm-ink); transform: translateY(-2px); }
@media (max-width: 860px) {
	.mm-spotlight__inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
	.mm-spotlight__lead { margin-inline: auto; }
}

/* ---------- Divulgación Ilustrada: identidad propia de la colección (v1.9.0) ---------- */
.da-page {
	--da-bg: #eef6fb;
	--da-bg-2: #dbe9f5;
	--da-ink: #12324a;
	--da-ink-soft: rgba(18,50,74,0.62);
	--da-ink-faint: rgba(18,50,74,0.4);
	--da-blue: #0e5a91;
	--da-blue-light: #1a6aa5;
	--da-orange: #f8750b;
	--da-line: rgba(18,50,74,0.14);
	--da-font-display: var(--font-serif);
	--da-font-body: var(--font-sans);
	background: var(--da-bg);
	color: var(--da-ink);
	font-family: var(--da-font-body);
	line-height: 1.5;
}
.da-page h2 { color: var(--da-ink); }
.da-page a { color: inherit; text-decoration: none; }
.da-wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.75rem; }

/* Banner de la colección en /libros/ */
.da-spotlight { padding: var(--space-section) 0; overflow: hidden; }
.da-spotlight__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.da-spotlight__text h2 {
	font-family: var(--da-font-display); font-style: italic; font-weight: 700;
	font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.7rem); margin: 0 0 1rem;
}
.da-spotlight__lead { color: var(--da-ink-soft); font-size: 1.02rem; max-width: 42ch; margin: 0 0 1.8rem; }
.da-spotlight__logo { width: 100%; height: auto; filter: drop-shadow(0 14px 30px rgba(18,50,74,0.18)); }
a.da-btn {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: var(--da-blue); color: #fff;
	font-family: var(--da-font-body); font-weight: 600; font-size: 0.92rem;
	padding: 0.75rem 1.5rem; border-radius: 3px; text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
}
.da-btn:hover { background: var(--da-blue-light); transform: translateY(-2px); }
@media (max-width: 860px) {
	.da-spotlight__inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
	.da-spotlight__lead { margin-inline: auto; }
}

/* Página dedicada /divulgacion-ilustrada/ */
.da-hero { padding: 5.5rem 0 4rem; text-align: center; border-bottom: 1px solid var(--da-line); }
.da-hero__logo { max-width: min(700px, 90vw); width: 100%; height: auto; margin: 0 auto 1.6rem; filter: drop-shadow(0 14px 30px rgba(18,50,74,0.18)); }
.da-hero__lead { font-family: var(--da-font-body); font-size: 1.08rem; color: var(--da-ink-soft); max-width: 70ch; margin: 0 auto; }

.da-shelf { padding: 4.5rem 0 5rem; }
.da-shelf__head { margin-bottom: 2.6rem; max-width: 75ch; }
.da-shelf__head h2 { font-family: var(--da-font-display); font-style: italic; font-weight: 700; font-size: 1.9rem; margin: 0; }
.da-shelf__head p { margin: 0.4rem 0 0; color: var(--da-ink-soft); font-size: 0.92rem; }
.da-shelf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.8rem; }

.da-vol {
	position: relative; display: block; border-radius: 6px; overflow: hidden;
	background: var(--da-bg-2); border: 1px solid var(--da-line);
	transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}
.da-vol:hover { transform: translateY(-6px); box-shadow: 0 18px 34px -14px rgba(18,50,74,0.25); }
.da-vol__cover { width: 100%; height: auto; display: block; background: var(--da-bg-2); }
.da-vol__body { padding: 0.9rem 1rem 1.1rem; }
.da-vol__title { font-family: var(--da-font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.2; margin: 0 0 0.4rem; }
.da-vol__blurb { font-size: 0.82rem; color: var(--da-ink-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Manuales técnicos y de Formación Profesional: identidad propia (v1.9.8) ---------- */
.mn-page {
	--mn-bg: #fff9e6;
	--mn-bg-2: #fff2c7;
	--mn-ink: #011b39;
	--mn-ink-soft: rgba(1,27,57,0.62);
	--mn-ink-faint: rgba(1,27,57,0.4);
	--mn-gold: #fdc402;
	--mn-gold-dark: #dba300;
	--mn-line: rgba(1,27,57,0.14);
	--mn-font-display: var(--font-serif);
	--mn-font-body: var(--font-sans);
	background: var(--mn-bg);
	color: var(--mn-ink);
	font-family: var(--mn-font-body);
	line-height: 1.5;
}
.mn-page ::selection { background: var(--mn-gold); color: var(--mn-ink); }
.mn-page h2 { color: var(--mn-ink); }
.mn-page a { color: inherit; text-decoration: none; }
.mn-wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.75rem; }

.mn-hero { padding: 5.5rem 0 4rem; text-align: center; border-bottom: 1px solid var(--mn-line); }
.mn-hero__logo { max-width: min(640px, 88vw); width: 100%; height: auto; margin: 0 auto 1.6rem; filter: drop-shadow(0 14px 30px rgba(1,27,57,0.18)); }
.mn-hero__lead { font-family: var(--mn-font-body); font-size: 1.08rem; color: var(--mn-ink-soft); max-width: 70ch; margin: 0 auto; }

.mn-shelf { padding: 4.5rem 0 5rem; }
.mn-shelf__head { margin-bottom: 2.6rem; max-width: 75ch; }
.mn-shelf__head h2 { font-family: var(--mn-font-display); font-style: italic; font-weight: 700; font-size: 1.9rem; margin: 0; }
.mn-shelf__head p { margin: 0.4rem 0 0; color: var(--mn-ink-soft); font-size: 0.92rem; }
.mn-shelf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.8rem; }
.mn-page .books-empty { color: var(--mn-ink-soft); border-color: var(--mn-line); }

.mn-vol {
	position: relative; display: block; border-radius: 6px; overflow: hidden;
	background: #fff; border: 1px solid var(--mn-line);
	transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}
.mn-vol:hover { transform: translateY(-6px); box-shadow: 0 18px 34px -14px rgba(1,27,57,0.22); }
.mn-vol__cover { position: relative; aspect-ratio: 3 / 4.3; background: var(--mn-bg-2); }
.mn-vol__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-vol__body { padding: 0.9rem 1rem 1.1rem; }
.mn-vol__title { font-family: var(--mn-font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.2; margin: 0 0 0.4rem; }
.mn-vol__blurb { font-size: 0.82rem; color: var(--mn-ink-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Banner de la colección en /libros/ y portada */
.mn-spotlight { padding: var(--space-section) 0; overflow: hidden; }
.mn-spotlight__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.mn-spotlight__text h2 {
	font-family: var(--mn-font-display); font-style: italic; font-weight: 700;
	font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.7rem); margin: 0 0 1rem;
}
.mn-spotlight__lead { color: var(--mn-ink-soft); font-size: 1.02rem; max-width: 42ch; margin: 0 0 1.8rem; }
.mn-spotlight__logo { width: 100%; height: auto; filter: drop-shadow(0 14px 30px rgba(1,27,57,0.18)); }
a.mn-btn {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: var(--mn-gold); color: var(--mn-ink);
	font-family: var(--mn-font-body); font-weight: 600; font-size: 0.92rem;
	padding: 0.75rem 1.5rem; border-radius: 3px; text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
}
.mn-btn:hover { background: var(--mn-gold-dark); color: var(--mn-ink); transform: translateY(-2px); }
@media (max-width: 860px) {
	.mn-spotlight__inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
	.mn-spotlight__lead { margin-inline: auto; }
}