/* Pa-los-ebooks — estilos del lector. Sobrio, serif, acento #AD1531. */

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: #faf9f7;
	color: #1f2937;
	font-family: Georgia, 'Times New Roman', serif;
	transition: background 0.25s, color 0.25s;
}

/* ---------- Barra de progreso fina ---------- */
.lme-progreso {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(173, 21, 49, 0.12);
	z-index: 30;
}

.lme-progreso-fill {
	height: 100%;
	width: 0;
	background: #AD1531;
	transition: width 0.3s;
}

/* ---------- Barra superior ---------- */
.lme-barra {
	position: fixed;
	top: 3px;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
	z-index: 20;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.lme-titulo {
	flex: 1;
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lme-selector {
	max-width: 220px;
	padding: 6px 8px;
	border: 1px solid #d1d5db;
	border-radius: 7px;
	background: #fff;
	color: inherit;
	font-size: 14px;
}

.lme-btn {
	padding: 6px 10px;
	border: 1px solid #d1d5db;
	border-radius: 7px;
	background: #fff;
	color: #1f2937;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.2;
}

.lme-btn:hover {
	border-color: #AD1531;
	color: #AD1531;
}

.lme-btn:focus-visible,
.lme-selector:focus-visible,
.lme-navbtn:focus-visible {
	outline: 2px solid #AD1531;
	outline-offset: 2px;
}

/* ---------- Contenido ---------- */
.lme-main {
	max-width: 70ch;
	margin: 0 auto;
	padding: 90px 32px 60px;
}

.lme-contenido {
	line-height: 1.7;
	font-size: 18px;
	/* Selección PERMITIDA: el subrayador la necesita. La protección de copia
	   ahora vive en el listener de 'copy' del JS (cita corta con crédito). */
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}

.lme-contenido h1,
.lme-contenido h2,
.lme-contenido h3 {
	line-height: 1.3;
	margin: 1.4em 0 0.6em;
}

.lme-contenido p {
	margin: 0 0 1em;
}

.lme-contenido img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 1.5em auto;
}

.lme-contenido blockquote {
	margin: 1.5em 0;
	padding-left: 1.2em;
	border-left: 3px solid #AD1531;
	font-style: italic;
	color: #4b5563;
}

.lme-contenido hr {
	border: 0;
	border-top: 1px solid #d1d5db;
	margin: 2em auto;
	width: 40%;
}

.lme-cargando {
	text-align: center;
	color: #9ca3af;
	padding: 3em 0;
}

.lme-error {
	text-align: center;
	color: #AD1531;
	padding: 2em 0;
	font-weight: 600;
}

/* Marca de agua embebida en el HTML del capítulo. */
.lme-wm {
	display: block;
	opacity: 0.06;
	font-size: 10px;
	text-align: center;
	pointer-events: none;
}

/* ---------- Navegación al pie ---------- */
.lme-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.lme-navbtn {
	flex: 1;
	max-width: 220px;
	padding: 14px 20px;
	border: 2px solid #AD1531;
	border-radius: 9px;
	background: #fff;
	color: #AD1531;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	display: inline-block;
}

.lme-navbtn:hover:not(:disabled) {
	background: #AD1531;
	color: #fff;
}

.lme-navbtn:disabled {
	opacity: 0.3;
	cursor: default;
}

/* ---------- Marca de agua diagonal (overlay) ---------- */
.lme-marca {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 10;
}

.lme-marca-capa {
	position: absolute;
	top: -30%;
	left: -30%;
	width: 160%;
	height: 160%;
	transform: rotate(-27deg);
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.lme-marca-fila {
	white-space: nowrap;
	font-size: 14px;
	opacity: 0.06;
	color: #000;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Modo oscuro ---------- */
body.lme-dark {
	background: #111827;
	color: #e5e7eb;
}

body.lme-dark .lme-barra {
	background: #1f2937;
	border-bottom-color: #374151;
}

body.lme-dark .lme-btn,
body.lme-dark .lme-selector {
	background: #1f2937;
	border-color: #4b5563;
	color: #e5e7eb;
}

body.lme-dark .lme-btn:hover {
	border-color: #AD1531;
	color: #f3a3b1;
}

body.lme-dark .lme-navbtn {
	background: transparent;
	color: #f3a3b1;
	border-color: #AD1531;
}

body.lme-dark .lme-navbtn:hover:not(:disabled) {
	background: #AD1531;
	color: #fff;
}

body.lme-dark .lme-contenido blockquote {
	color: #9ca3af;
}

/* Visible también en oscuro: texto claro. */
body.lme-dark .lme-marca-fila {
	color: #fff;
}

/* ---------- Impresión: nada que imprimir ---------- */
@media print {
	#lme-app {
		display: none;
	}
}

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
	.lme-barra {
		padding: 8px 10px;
		gap: 5px;
	}

	.lme-titulo {
		font-size: 13px;
	}

	.lme-selector {
		max-width: 110px;
		font-size: 13px;
	}

	.lme-btn {
		padding: 5px 8px;
		font-size: 13px;
	}

	.lme-main {
		padding: 78px 20px 40px;
	}

	.lme-navbtn {
		padding: 12px 10px;
		font-size: 15px;
	}
}

/* Botón Volver: primero en la barra, con acento de marca para que se VEA
   (la ✕ anónima de antes nadie la encontraba). */
.lme-volver {
	border-color: #AD1531;
	color: #AD1531;
	white-space: nowrap;
	flex-shrink: 0;
}
.lme-volver:hover {
	background: #AD1531;
	color: #fff;
}
body.lme-dark .lme-volver {
	border-color: #e5697f;
	color: #e5697f;
}
body.lme-dark .lme-volver:hover {
	background: #AD1531;
	border-color: #AD1531;
	color: #fff;
}

/* ==================================================================
   AMPLIACIÓN: temas, fuentes, subrayador, notas, drawer, cita, fin.
   ================================================================== */

/* ---------- Tema sepia ---------- */
body.lme-sepia {
	background: #f4ecd8;
	color: #5b4636;
}

body.lme-sepia .lme-barra {
	background: #efe5cd;
	border-bottom-color: #dccfb0;
}

body.lme-sepia .lme-btn,
body.lme-sepia .lme-selector {
	background: #f9f3e3;
	border-color: #d3c4a2;
	color: #5b4636;
}

body.lme-sepia .lme-navbtn {
	background: #f9f3e3;
}

body.lme-sepia .lme-contenido blockquote {
	color: #7a6450;
}

/* ---------- Fuentes (el serif por defecto ya viene del body) ---------- */
body.lme-font-sans .lme-contenido {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

/* "Legible": Verdana espaciada, pensada para lectura fácil / dislexia. */
body.lme-font-legible .lme-contenido {
	font-family: Verdana, Geneva, sans-serif;
	letter-spacing: 0.03em;
	word-spacing: 0.08em;
}

/* ---------- Subrayados <mark class="lme-hl"> ---------- */
.lme-hl {
	color: inherit;
	padding: 0.06em 0;
	border-radius: 2px;
	cursor: pointer;
}

.lme-hl-amarillo { background: #fde68a; }
.lme-hl-verde    { background: #bbf7d0; }
.lme-hl-rosa     { background: #fbcfe8; }
.lme-hl-azul     { background: #bfdbfe; }

/* En sepia los mismos tonos funcionan; en oscuro, versiones translúcidas
   que dejan leer el texto claro heredado. */
body.lme-dark .lme-hl-amarillo { background: rgba(253, 230, 138, 0.28); }
body.lme-dark .lme-hl-verde    { background: rgba(187, 247, 208, 0.26); }
body.lme-dark .lme-hl-rosa     { background: rgba(251, 207, 232, 0.26); }
body.lme-dark .lme-hl-azul     { background: rgba(191, 219, 254, 0.26); }

/* Indicador de nota dentro del subrayado. */
.lme-nota-dot {
	font-size: 0.7em;
	margin-left: 2px;
	cursor: pointer;
	vertical-align: super;
	user-select: none;
	-webkit-user-select: none;
}

/* Highlight momentáneo al saltar desde el drawer. */
.lme-flash {
	outline: 2px solid #AD1531;
	outline-offset: 2px;
	transition: outline-color 1.2s;
}

/* ---------- Mini-barra flotante de selección ---------- */
.lme-minibar {
	position: fixed;
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	max-width: 320px;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(31, 41, 55, 0.18);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.lme-mini-btn {
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #1f2937;
	border-radius: 8px;
	padding: 4px 7px;
	font-size: 15px;
	cursor: pointer;
	line-height: 1.2;
}

.lme-mini-btn:hover {
	border-color: #AD1531;
	color: #AD1531;
}

.lme-mini-color {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.12);
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.lme-mini-color:hover {
	border-color: #AD1531;
}

/* Fila completa de emojis debajo de los colores. */
.lme-mini-emojis {
	display: flex;
	gap: 4px;
	width: 100%;
	padding-top: 6px;
	border-top: 1px dashed #e5e7eb;
}

.lme-mini-emojis .lme-mini-btn {
	border: none;
	padding: 2px 4px;
	font-size: 17px;
}

body.lme-dark .lme-minibar {
	background: #1f2937;
	border-color: #374151;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

body.lme-dark .lme-mini-btn {
	background: #1f2937;
	border-color: #4b5563;
	color: #e5e7eb;
}

body.lme-dark .lme-mini-emojis {
	border-top-color: #374151;
}

/* ---------- Panel de nota ---------- */
.lme-nota-panel {
	position: fixed;
	z-index: 60;
	width: 300px;
	max-width: calc(100vw - 24px);
	padding: 12px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(31, 41, 55, 0.18);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.lme-nota-area {
	width: 100%;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	padding: 8px;
	font: inherit;
	font-size: 14px;
	resize: vertical;
	background: #fff;
	color: #1f2937;
}

.lme-nota-botones {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}

body.lme-dark .lme-nota-panel {
	background: #1f2937;
	border-color: #374151;
}

body.lme-dark .lme-nota-area {
	background: #111827;
	border-color: #4b5563;
	color: #e5e7eb;
}

/* Botón primario (acción principal) reutilizable. */
.lme-btn-primario {
	background: #AD1531;
	border-color: #AD1531;
	color: #fff;
}

.lme-btn-primario:hover {
	background: #8f1128;
	color: #fff;
}

/* ---------- Toast ---------- */
.lme-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%);
	z-index: 80;
	background: #1f2937;
	color: #fff;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	animation: lme-toast-in 0.25s ease-out;
}

@keyframes lme-toast-in {
	from { opacity: 0; transform: translateX(-50%) translateY(10px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- Drawer "Mis marcas" ---------- */
.lme-velo {
	position: fixed;
	inset: 0;
	background: rgba(17, 24, 39, 0.4);
	z-index: 65;
}

.lme-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 320px;
	max-width: 100%;
	background: #fff;
	z-index: 70;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 30px rgba(31, 41, 55, 0.2);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.lme-drawer-cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid #e5e7eb;
	font-size: 16px;
}

.lme-drawer-cuerpo {
	overflow-y: auto;
	padding: 8px 12px 24px;
	flex: 1;
}

.lme-drawer-sec {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #AD1531;
	margin: 18px 4px 8px;
}

.lme-drawer-vacio {
	color: #9ca3af;
	font-size: 13px;
	margin: 4px;
}

.lme-drawer-item {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}

.lme-drawer-ir {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	text-align: left;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #1f2937;
	border-radius: 10px;
	padding: 9px 10px;
	font-size: 13px;
	cursor: pointer;
	min-width: 0;
}

.lme-drawer-ir:hover {
	border-color: #AD1531;
}

.lme-drawer-txt {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.lme-drawer-extra {
	color: #9ca3af;
	font-size: 12px;
	white-space: nowrap;
	flex-shrink: 0;
}

.lme-chip {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.lme-drawer-borrar {
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 15px;
	padding: 6px;
	opacity: 0.6;
}

.lme-drawer-borrar:hover {
	opacity: 1;
}

body.lme-dark .lme-drawer {
	background: #1f2937;
	color: #e5e7eb;
}

body.lme-dark .lme-drawer-cab {
	border-bottom-color: #374151;
}

body.lme-dark .lme-drawer-ir {
	background: #111827;
	border-color: #374151;
	color: #e5e7eb;
}

/* ---------- Popover Aa ---------- */
.lme-popover {
	position: fixed;
	z-index: 60;
	width: 300px;
	max-width: calc(100vw - 16px);
	padding: 14px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 10px 34px rgba(31, 41, 55, 0.2);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.lme-pop-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.lme-pop-fila:last-child {
	margin-bottom: 0;
}

.lme-pop-label {
	font-size: 13px;
	font-weight: 600;
	color: #6b7280;
	flex-shrink: 0;
}

.lme-pop-grupo {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.lme-pop-num {
	min-width: 26px;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
}

.lme-pop-opcion {
	font-size: 13px;
	padding: 5px 9px;
}

.lme-btn.lme-activo,
.lme-pop-opcion.lme-activo {
	border-color: #AD1531;
	color: #AD1531;
	background: rgba(173, 21, 49, 0.07);
}

/* Swatches de tema: muestran su propio fondo. */
.lme-swatch {
	border: 2px solid #d1d5db;
	border-radius: 9px;
	padding: 6px 9px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
}

.lme-swatch-claro  { background: #faf9f7; color: #1f2937; }
.lme-swatch-sepia  { background: #f4ecd8; color: #5b4636; }
.lme-swatch-oscuro { background: #111827; color: #e5e7eb; }

.lme-swatch.lme-activo {
	border-color: #AD1531;
}

body.lme-dark .lme-popover {
	background: #1f2937;
	border-color: #374151;
	color: #e5e7eb;
}

body.lme-dark .lme-pop-label {
	color: #9ca3af;
}

/* ---------- Modal de cita ---------- */
.lme-modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(17, 24, 39, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.lme-modal-card {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	max-width: 380px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.lme-modal-img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	border: 1px solid #e5e7eb;
	display: block;
}

.lme-modal-botones {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	flex-wrap: wrap;
}

body.lme-dark .lme-modal-card {
	background: #1f2937;
}

body.lme-dark .lme-modal-img {
	border-color: #374151;
}

/* ---------- Stickers ---------- */
.lme-sticker {
	display: inline-block;
	font-size: 18px;
	margin-left: 6px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	vertical-align: baseline;
	/* La rotación exacta la pone el JS (persistida por sticker). */
}

/* ---------- Confetti ---------- */
.lme-confetti {
	position: fixed;
	inset: 0;
	z-index: 95;
	pointer-events: none;
}

/* ---------- Bloque final de celebración ---------- */
.lme-fin {
	margin-top: 56px;
	padding: 28px 20px;
	border: 2px solid rgba(173, 21, 49, 0.25);
	border-radius: 16px;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: rgba(173, 21, 49, 0.03);
}

.lme-fin-titulo {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px;
}

.lme-fin-pregunta {
	color: #6b7280;
	margin: 0 0 16px;
}

.lme-fin-lista {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.lme-fin-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 140px;
	padding: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	background: #fff;
}

.lme-fin-card:hover {
	border-color: #AD1531;
}

.lme-fin-card img {
	width: 100px;
	height: auto;
	border-radius: 6px;
	margin: 0;
}

.lme-fin-card-titulo {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.lme-fin-mas {
	max-width: 240px;
	margin: 0 auto;
}

body.lme-dark .lme-fin {
	background: rgba(173, 21, 49, 0.08);
}

body.lme-dark .lme-fin-card {
	background: #111827;
	border-color: #374151;
}

/* ---------- Móvil: drawer como bottom-sheet + sin selector de ancho ---------- */
@media (max-width: 640px) {
	.lme-drawer {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 70vh;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 30px rgba(31, 41, 55, 0.25);
	}

	/* El ancho de columna no aplica en pantallas angostas. */
	.lme-solo-desktop {
		display: none;
	}

	.lme-minibar {
		max-width: calc(100vw - 16px);
	}
}

/* ---------- Movimiento reducido: nada de transiciones decorativas ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	body,
	.lme-progreso-fill,
	.lme-flash {
		transition: none;
	}

	.lme-toast {
		animation: none;
	}
}

/* ═══ PULIDO 1.2 — el lector deja de verse genérico ═════════════════════════
   Capa de diseño sobre la base: mini-barra de tinta, drawer con tarjetas,
   micro-animaciones. Todo respeta prefers-reduced-motion al final. */

/* ── Mini-barra de selección: pill oscura flotante, estilo herramienta ── */
.lme-minibar, [class*="lme-mini"][class*="bar"] {
	background: #1f2937 !important;
	border: none !important;
	border-radius: 14px !important;
	box-shadow: 0 10px 30px rgba(17, 24, 39, 0.35) !important;
	padding: 10px 12px !important;
	animation: lme-pop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	transform-origin: center bottom;
}
@keyframes lme-pop {
	from { opacity: 0; transform: translateY(6px) scale(0.92); }
	to   { opacity: 1; transform: none; }
}
.lme-mini-color {
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	border: 2px solid rgba(255, 255, 255, 0.25) !important;
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.lme-mini-color:hover {
	transform: scale(1.25);
	border-color: #fff !important;
}
.lme-minibar button:not(.lme-mini-color),
[class*="lme-mini"][class*="bar"] button:not(.lme-mini-color) {
	background: transparent !important;
	border: none !important;
	color: #e5e7eb !important;
	border-radius: 8px !important;
	transition: background 0.15s ease, transform 0.12s ease;
}
.lme-minibar button:not(.lme-mini-color):hover {
	background: rgba(255, 255, 255, 0.12) !important;
	transform: scale(1.08);
}

/* ── Subrayados y stickers: nacen con vida ── */
mark.lme-hl {
	border-radius: 3px;
	padding: 0 1px;
	transition: background-color 0.35s ease;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.lme-sticker {
	display: inline-block;
	animation: lme-sticker-pop 0.3s cubic-bezier(0.34, 1.8, 0.64, 1) both;
	cursor: pointer;
}
@keyframes lme-sticker-pop {
	from { opacity: 0; transform: scale(0.3) rotate(0deg); }
	60%  { transform: scale(1.25); }
	to   { opacity: 1; }
}

/* ── Drawer "Mis marcas": panel editorial, no genérico ── */
.lme-drawer {
	box-shadow: -18px 0 50px rgba(17, 24, 39, 0.25) !important;
	animation: lme-drawer-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lme-drawer-in {
	from { transform: translateX(40px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
.lme-drawer-cab {
	border-bottom: none !important;
	padding: 18px 18px 10px !important;
}
.lme-drawer-cab strong {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 20px;
	color: #1f2937;
}
.lme-drawer-cab strong::after {
	content: '';
	display: block;
	width: 34px;
	height: 3px;
	border-radius: 3px;
	background: #AD1531;
	margin-top: 6px;
}
.lme-drawer-sec {
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #9ca3af !important;
	margin: 18px 0 8px !important;
}
.lme-drawer-item {
	background: #f9fafb;
	border: 1px solid #eef0f3;
	border-radius: 10px;
	margin-bottom: 8px;
	overflow: hidden;
	animation: lme-item-in 0.3s ease both;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lme-drawer-item:hover {
	transform: translateX(-3px);
	box-shadow: 0 3px 12px rgba(17, 24, 39, 0.08);
}
@keyframes lme-item-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
.lme-drawer-item:nth-child(2) { animation-delay: 0.03s; }
.lme-drawer-item:nth-child(3) { animation-delay: 0.06s; }
.lme-drawer-item:nth-child(4) { animation-delay: 0.09s; }
.lme-drawer-item:nth-child(5) { animation-delay: 0.12s; }
.lme-drawer-item:nth-child(n+6) { animation-delay: 0.15s; }
.lme-drawer-txt {
	font-family: Georgia, serif;
	font-style: italic;
	color: #374151;
}
.lme-chip {
	width: 12px !important;
	height: 12px !important;
	border-radius: 4px !important;
	flex-shrink: 0;
}
.lme-drawer-extra {
	font-size: 11px;
	color: #9ca3af;
}
.lme-drawer-borrar {
	opacity: 0.45;
	transition: opacity 0.15s ease, transform 0.12s ease;
}
.lme-drawer-borrar:hover {
	opacity: 1;
	transform: scale(1.1);
}
.lme-drawer-vacio {
	text-align: center;
	color: #9ca3af !important;
	font-size: 13px;
	padding: 10px 0 !important;
}
body.lme-dark .lme-drawer { background: #1a2130 !important; }
body.lme-dark .lme-drawer-cab strong { color: #e5e7eb; }
body.lme-dark .lme-drawer-item { background: #202839; border-color: #2a3347; }
body.lme-dark .lme-drawer-txt { color: #cbd5e1; }

/* ── Toast y flash ── */
.lme-toast {
	border-radius: 999px !important;
	background: #1f2937 !important;
	color: #fff !important;
	box-shadow: 0 10px 26px rgba(17, 24, 39, 0.3) !important;
	animation: lme-toast-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lme-toast-in {
	from { opacity: 0; transform: translate(-50%, 12px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}
.lme-flash {
	animation: lme-flash-pulse 1.4s ease both !important;
	border-radius: 4px;
}
@keyframes lme-flash-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(173, 21, 49, 0.45); }
	60%  { box-shadow: 0 0 0 10px rgba(173, 21, 49, 0); }
	100% { box-shadow: 0 0 0 0 rgba(173, 21, 49, 0); }
}

/* ── Botones: tacto en todo ── */
.lme-btn:active, .lme-navbtn:active { transform: scale(0.95); }

/* ── Marca de agua: presente pero discreta (0.05 era muy visible en
      pantallas claras con textos largos de email) ── */
/* La capa NO lleva opacidad propia: las filas ya traen la suya (0.06) y
   dos opacidades se MULTIPLICAN (0.05 x 0.05 = invisible — el bug que tuvo
   ciega la marca de agua un buen rato). */
.lme-marca-capa { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
	.lme-minibar, .lme-drawer, .lme-drawer-item, .lme-sticker, .lme-toast, .lme-flash {
		animation: none !important;
	}
	.lme-drawer-item, .lme-mini-color, .lme-drawer-borrar { transition: none; }
}

/* ═══ AMPLIACIÓN 1.3 — búsqueda, enfoque, diccionario, voz, exportar ════════
   Sigue el lenguaje de PULIDO 1.2: pill de tinta #1f2937, acento #AD1531,
   serif Georgia en contenido, curvas cubic-bezier(0.22, 1, 0.36, 1). */

/* ── Modo enfoque: las barras se apartan al leer hacia abajo ── */
.lme-barra {
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.lme-nav {
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
body.lme-enfoque .lme-barra {
	/* -110%: el 10% extra cubre el desfase de los 3px de la barra de progreso. */
	transform: translateY(-110%);
}
body.lme-enfoque .lme-nav {
	transform: translateY(18px);
	opacity: 0;
	pointer-events: none;
}

/* ── Cajita de búsqueda: colgada bajo la barra, centrada ── */
.lme-busq-caja {
	position: fixed;
	top: 58px;
	left: 8px;
	right: 8px;
	margin: 0 auto;
	max-width: 520px;
	z-index: 60;
	padding: 10px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(17, 24, 39, 0.18);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	animation: lme-caja-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lme-caja-pop {
	from { opacity: 0; transform: translateY(-8px) scale(0.97); }
	to   { opacity: 1; transform: none; }
}
.lme-busq-fila {
	display: flex;
	align-items: center;
	gap: 8px;
}
.lme-busq-input {
	flex: 1;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 15px;
	background: #fff;
	color: #1f2937;
}
.lme-busq-input:focus-visible {
	outline: 2px solid #AD1531;
	outline-offset: 1px;
}
.lme-busq-cont {
	font-size: 12px;
	color: #6b7280;
	white-space: nowrap;
	flex-shrink: 0;
}
.lme-busq-lista {
	max-height: 50vh;
	overflow-y: auto;
	margin-top: 8px;
}
.lme-busq-lista:empty {
	margin-top: 0;
}
.lme-busq-item {
	display: block;
	width: 100%;
	text-align: left;
	border: 1px solid #eef0f3;
	background: #f9fafb;
	color: #374151;
	border-radius: 10px;
	padding: 8px 10px;
	margin-bottom: 6px;
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.lme-busq-item:hover {
	border-color: #AD1531;
	transform: translateX(2px);
}
.lme-busq-frag {
	display: block;
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 13px;
	line-height: 1.5;
}
.lme-busq-frag strong {
	color: #AD1531;
	font-style: normal;
}
.lme-busq-cap {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9ca3af;
}

/* Resaltado temporal al aterrizar en una coincidencia (se retira solo). */
mark.lme-busq {
	background: rgba(173, 21, 49, 0.2);
	color: inherit;
	border-radius: 3px;
	padding: 0 1px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* ── Diccionario al toque: tarjeta flotante ── */
.lme-dic {
	position: fixed;
	z-index: 60;
	width: 340px;
	max-width: calc(100vw - 24px);
	padding: 14px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 12px 36px rgba(17, 24, 39, 0.22);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	animation: lme-pop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.lme-dic-cab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
}
.lme-dic-palabra {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 24px;
	font-weight: 700;
	color: #1f2937;
}
.lme-dic-cerrar {
	border: none !important;
	background: transparent !important;
	padding: 2px 6px;
}
.lme-dic-cuerpo {
	max-height: 40vh;
	overflow-y: auto;
}
.lme-dic-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #AD1531;
	background: rgba(173, 21, 49, 0.08);
	border-radius: 999px;
	padding: 2px 9px;
	margin: 6px 6px 2px 0;
}
.lme-dic-linea {
	font-size: 14px;
	line-height: 1.55;
	color: #374151;
	margin: 6px 0;
}
.lme-dic-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	color: #AD1531;
	text-decoration: none;
}
.lme-dic-link:hover {
	text-decoration: underline;
}

/* ── Escuchar: el bloque que la voz va leyendo ── */
.lme-leyendo {
	background: rgba(173, 21, 49, 0.07);
	box-shadow: 0 0 0 8px rgba(173, 21, 49, 0.07);
	border-radius: 6px;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* ── Exportar mis notas: pie del drawer ── */
.lme-exportar {
	display: block;
	width: 100%;
	margin: 18px 0 4px;
	padding: 10px;
	text-align: center;
	border: 1.5px dashed #AD1531;
	border-radius: 10px;
	background: transparent;
	color: #AD1531;
	font-weight: 700;
	cursor: pointer;
}
.lme-exportar:hover {
	background: rgba(173, 21, 49, 0.06);
}

/* ── Modo oscuro para todo lo nuevo ── */
body.lme-dark .lme-busq-caja,
body.lme-dark .lme-dic {
	background: #1f2937;
	border-color: #374151;
	color: #e5e7eb;
}
body.lme-dark .lme-busq-input {
	background: #111827;
	border-color: #4b5563;
	color: #e5e7eb;
}
body.lme-dark .lme-busq-item {
	background: #202839;
	border-color: #2a3347;
	color: #cbd5e1;
}
body.lme-dark .lme-busq-frag strong {
	color: #f3a3b1;
}
body.lme-dark .lme-dic-palabra {
	color: #e5e7eb;
}
body.lme-dark .lme-dic-linea {
	color: #cbd5e1;
}
body.lme-dark mark.lme-busq {
	background: rgba(243, 163, 177, 0.3);
}
body.lme-dark .lme-leyendo {
	background: rgba(173, 21, 49, 0.2);
	box-shadow: 0 0 0 8px rgba(173, 21, 49, 0.2);
}

/* ── Móvil: la barra va justa con 🔍 y 🔊 — solo iconos ── */
@media (max-width: 600px) {
	/* "← Volver" pierde la etiqueta y conserva la flecha (el aria-label queda). */
	.lme-volver {
		font-size: 0;
		padding: 5px 9px;
	}
	.lme-volver::before {
		content: '←';
		font-size: 15px;
	}
	.lme-selector {
		max-width: 88px;
	}
	.lme-busq-caja {
		top: 52px;
	}
}

/* ── Movimiento reducido: lo nuevo también se queda quieto ── */
@media (prefers-reduced-motion: reduce) {
	.lme-barra, .lme-nav, .lme-busq-item, .lme-leyendo {
		transition: none;
	}
	.lme-busq-caja, .lme-dic {
		animation: none !important;
	}
}

/* FIX: el drawer y su velo tienen display:flex/block propios, que le GANAN
   al atributo hidden (los estilos de autor pisan la regla del navegador).
   Por eso la ✕ "no cerraba" el panel: quedaba marcado hidden pero pintado. */
.lme-drawer[hidden],
.lme-velo[hidden] {
	display: none !important;
}

/* FIX GLOBAL [hidden]: TODO flotante con display propio necesita esta pareja
   (la lección del drawer, aplicada a la familia completa — el globo de
   selección era el siguiente en la lista). */
.lme-minibar[hidden],
.lme-busq[hidden],
.lme-dic[hidden],
.lme-nota-panel[hidden],
.lme-popover[hidden],
.lme-modal[hidden],
.lme-toast[hidden] {
	display: none !important;
}
/* Selector de narrador en el popover Aa */
.lme-pop-voces {
	max-width: 170px;
	padding: 5px 8px;
	border: 1px solid #d1d5db;
	border-radius: 7px;
	background: #fff;
	color: #1f2937;
	font-size: 13px;
}
body.lme-dark .lme-pop-voces {
	background: #202839;
	border-color: #2a3347;
	color: #e5e7eb;
}

/* ═══ MODO PÁGINA — leer pasando hojas, como un libro real ══════════════════
   Técnica de columnas: el DOM del contenido NO cambia (los subrayados por
   offsets siguen intactos); cada "página" es una columna y el contenedor se
   desplaza con translateX (lo pone el JS). Todo vive bajo body.lme-paginado.
   Coherente con PULIDO 1.2: acento #AD1531, curvas suaves. */

body.lme-paginado {
	overflow: hidden;
	height: 100vh;
}

body.lme-paginado .lme-main {
	position: relative;
	overflow: hidden;
	padding-top: 0;
	padding-bottom: 0;
	/* margin-top y height exactos los calcula el JS al repaginar */
}

/* Canto/lomo del libro: gradientes verticales suaves en los bordes laterales
   del área de lectura (más marcado a la derecha, donde "engordan" las hojas). */
body.lme-paginado .lme-main::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	z-index: 5;
	background:
		linear-gradient(to right, rgba(31, 41, 55, 0.06), transparent 2.5%),
		linear-gradient(to left, rgba(31, 41, 55, 0.09), transparent 2.5%);
}

body.lme-dark.lme-paginado .lme-main::after {
	background:
		linear-gradient(to right, rgba(0, 0, 0, 0.28), transparent 2.5%),
		linear-gradient(to left, rgba(0, 0, 0, 0.38), transparent 2.5%);
}

body.lme-sepia.lme-paginado .lme-main::after {
	background:
		linear-gradient(to right, rgba(91, 70, 54, 0.08), transparent 2.5%),
		linear-gradient(to left, rgba(91, 70, 54, 0.12), transparent 2.5%);
}

body.lme-paginado .lme-contenido {
	height: 100%;
	column-fill: auto;
	/* column-width, column-gap y transform los pone el JS al repaginar */
}

/* Que imágenes y citas no queden partidas entre dos páginas. */
body.lme-paginado .lme-contenido img,
body.lme-paginado .lme-contenido blockquote {
	break-inside: avoid;
}

/* Nav del pie: fija abajo, botones compactos ‹ › con el indicador al centro. */
body.lme-paginado .lme-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	align-items: center;
	justify-content: space-between;
	z-index: 20;
}

body.lme-paginado .lme-navbtn {
	flex: 0 0 auto;
	min-width: 54px;
	max-width: none;
	padding: 8px 18px;
	font-size: 18px;
	line-height: 1.1;
}

/* Indicador "pág. X de Y · Cap. N": solo existe visualmente en modo página. */
.lme-pag-info {
	display: none;
}

body.lme-paginado .lme-pag-info {
	display: block;
	flex: 1;
	min-width: 0;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #6b7280;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.lme-dark .lme-pag-info { color: #9ca3af; }
body.lme-sepia .lme-pag-info { color: #7a6450; }

/* En modo página las barras nunca se esconden (cinturón sobre el guard del JS). */
body.lme-paginado.lme-enfoque .lme-barra {
	transform: none;
}

body.lme-paginado.lme-enfoque .lme-nav {
	transform: none;
	opacity: 1;
	pointer-events: auto;
}

/* ── La hoja: overlay de doblez y sombra sobre la mitad que "gira".
      No es captura de nada: solo el efecto encima; el contenido cambia
      instantáneo por debajo a mitad del giro (lo coordina el JS). ── */
.lme-hoja {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	z-index: 15;
	pointer-events: none;
}

.lme-hoja-adelante,
.lme-hoja-atras {
	display: block;
}

.lme-hoja-adelante {
	right: 0;
	transform-origin: left center;
	background: linear-gradient(to left,
		rgba(31, 41, 55, 0.10),
		rgba(250, 249, 247, 0.92) 14%,
		rgba(250, 249, 247, 0.55) 55%,
		rgba(250, 249, 247, 0.05));
	animation: lme-hoja-ida 0.35s cubic-bezier(0.3, 0.1, 0.3, 1) both;
}

.lme-hoja-atras {
	left: 0;
	transform-origin: right center;
	background: linear-gradient(to right,
		rgba(31, 41, 55, 0.10),
		rgba(250, 249, 247, 0.92) 14%,
		rgba(250, 249, 247, 0.55) 55%,
		rgba(250, 249, 247, 0.05));
	animation: lme-hoja-vuelta 0.35s cubic-bezier(0.3, 0.1, 0.3, 1) both;
}

/* La sombra barre y se intensifica a MITAD del giro (justo cuando el
   contenido cambia por debajo): se siente hoja, no slideshow. */
@keyframes lme-hoja-ida {
	0%   { transform: perspective(1200px) rotateY(0deg);    opacity: 0; box-shadow: none; }
	20%  { opacity: 1; }
	50%  { box-shadow: -32px 0 48px rgba(17, 24, 39, 0.3); }
	100% { transform: perspective(1200px) rotateY(-150deg); opacity: 0; box-shadow: none; }
}

@keyframes lme-hoja-vuelta {
	0%   { transform: perspective(1200px) rotateY(0deg);   opacity: 0; box-shadow: none; }
	20%  { opacity: 1; }
	50%  { box-shadow: 32px 0 48px rgba(17, 24, 39, 0.3); }
	100% { transform: perspective(1200px) rotateY(150deg); opacity: 0; box-shadow: none; }
}

/* Papel según tema: la hoja debe parecer del mismo libro. */
body.lme-dark .lme-hoja-adelante {
	background: linear-gradient(to left,
		rgba(0, 0, 0, 0.35),
		rgba(31, 41, 55, 0.92) 14%,
		rgba(31, 41, 55, 0.55) 55%,
		rgba(31, 41, 55, 0.05));
}

body.lme-dark .lme-hoja-atras {
	background: linear-gradient(to right,
		rgba(0, 0, 0, 0.35),
		rgba(31, 41, 55, 0.92) 14%,
		rgba(31, 41, 55, 0.55) 55%,
		rgba(31, 41, 55, 0.05));
}

body.lme-sepia .lme-hoja-adelante {
	background: linear-gradient(to left,
		rgba(91, 70, 54, 0.14),
		rgba(244, 236, 216, 0.92) 14%,
		rgba(244, 236, 216, 0.55) 55%,
		rgba(244, 236, 216, 0.05));
}

body.lme-sepia .lme-hoja-atras {
	background: linear-gradient(to right,
		rgba(91, 70, 54, 0.14),
		rgba(244, 236, 216, 0.92) 14%,
		rgba(244, 236, 216, 0.55) 55%,
		rgba(244, 236, 216, 0.05));
}

/* Móvil: botones del pie más justos (el gap de 24px lo decide el JS). */
@media (max-width: 640px) {
	body.lme-paginado .lme-navbtn {
		padding: 8px 14px;
	}

	body.lme-paginado .lme-pag-info {
		font-size: 12px;
	}
}

/* Movimiento reducido: el JS ya salta la hoja; cinturón CSS por si acaso. */
@media (prefers-reduced-motion: reduce) {
	.lme-hoja-adelante,
	.lme-hoja-atras {
		animation: none;
		display: none;
	}
}

/* ── Hoja 2.0: la página real gira sobre el lomo ── */
.lme-leaf {
	position: absolute;
	z-index: 45;
	pointer-events: none;
	perspective: 1600px;
}
.lme-leaf-inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform-origin: left center;
}
.lme-leaf-cara {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
	background: #fff;
}
body.lme-sepia .lme-leaf-cara { background: #f4ecd8; }
body.lme-dark .lme-leaf-cara { background: #111827; }
.lme-leaf-clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
/* Reverso: el texto fantasma espejado que se trasluce por el papel. */
.lme-leaf-back { transform: rotateY(180deg); }
.lme-leaf-back .lme-leaf-clip {
	transform: scaleX(-1);
	opacity: 0.09;
	filter: blur(0.4px);
}
/* Sombra del doblez: nace en el lomo y pica a mitad del giro. */
.lme-leaf-front::after,
.lme-leaf-back::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(17, 24, 39, 0.22), rgba(17, 24, 39, 0.05) 26%, transparent 55%);
	animation: lme-leaf-sombra 0.52s ease both;
}
@keyframes lme-leaf-sombra {
	0%   { opacity: 0; }
	45%  { opacity: 1; }
	100% { opacity: 0; }
}
.lme-leaf-gira-fwd  { animation: lme-leaf-fwd 0.52s cubic-bezier(0.45, 0.05, 0.35, 1) both; }
.lme-leaf-gira-back { animation: lme-leaf-bck 0.52s cubic-bezier(0.45, 0.05, 0.35, 1) both; }
@keyframes lme-leaf-fwd {
	from { transform: rotateY(0deg); }
	to   { transform: rotateY(-178deg); }
}
@keyframes lme-leaf-bck {
	from { transform: rotateY(-178deg); }
	to   { transform: rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
	.lme-leaf { display: none !important; }
}

/* ═══ LIBRO ABIERTO (modo doble) — dos hojas y un lomo ══════════════════════
   El JS pone body.lme-doble cuando de verdad hay dos columnas visibles.
   Mismo lenguaje de la casa: acento #AD1531, sombras de tinta, tres temas. */

/* ── El lomo: una línea vertical central sutil que insinúa el pliegue ── */
body.lme-paginado.lme-doble .lme-main::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 44px;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 6;
	background: linear-gradient(to right,
		transparent,
		rgba(31, 41, 55, 0.035) 32%,
		rgba(31, 41, 55, 0.11) 50%,
		rgba(31, 41, 55, 0.035) 68%,
		transparent);
}

body.lme-dark.lme-paginado.lme-doble .lme-main::before {
	background: linear-gradient(to right,
		transparent,
		rgba(0, 0, 0, 0.22) 32%,
		rgba(0, 0, 0, 0.5) 50%,
		rgba(0, 0, 0, 0.22) 68%,
		transparent);
}

body.lme-sepia.lme-paginado.lme-doble .lme-main::before {
	background: linear-gradient(to right,
		transparent,
		rgba(91, 70, 54, 0.05) 32%,
		rgba(91, 70, 54, 0.15) 50%,
		rgba(91, 70, 54, 0.05) 68%,
		transparent);
}

/* ── La hoja en doble: media página que pivota sobre el lomo ──
   Hacia delante reusa lme-leaf-fwd (origin left = lomo, mitad derecha).
   Hacia atrás la hoja va sobre la mitad IZQUIERDA con origin right (el JS
   lo pone inline) y gira hacia la derecha: rotación positiva, espejo. */
.lme-leaf-gira-dbl-bck {
	animation: lme-leaf-dbl-bck 0.52s cubic-bezier(0.45, 0.05, 0.35, 1) both;
}

@keyframes lme-leaf-dbl-bck {
	from { transform: rotateY(0deg); }
	to   { transform: rotateY(178deg); }
}

/* Con el lomo a la DERECHA de la hoja, la sombra del doblez nace del
   otro borde: se espeja el gradiente del ::after. */
.lme-leaf-lomo-der .lme-leaf-front::after,
.lme-leaf-lomo-der .lme-leaf-back::after {
	background: linear-gradient(to left, rgba(17, 24, 39, 0.22), rgba(17, 24, 39, 0.05) 26%, transparent 55%);
}

/* El reverso espejado del giro positivo también se espeja bien con el
   mismo scaleX(-1) del clip: no necesita reglas nuevas. */

/* ═══ GUÍA DE BIENVENIDA — primera vez en el lector ═════════════════════════
   Overlay suave + tarjeta centrada, serif para el título, acento carmesí.
   Regla de la casa: display propio ⇒ pareja [hidden] al final del bloque. */

.lme-guia {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: rgba(17, 24, 39, 0.45);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	animation: lme-guia-velo 0.3s ease both;
	transition: opacity 0.2s ease;
}

@keyframes lme-guia-velo {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Salida: fade del conjunto (el JS quita el nodo de la vista tras 220ms). */
.lme-guia.lme-guia-out {
	opacity: 0;
	pointer-events: none;
}

.lme-guia-card {
	position: relative;
	background: #fff;
	border-radius: 18px;
	padding: 30px 28px 24px;
	max-width: 600px;
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	text-align: center;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
	animation: lme-guia-entra 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lme-guia-entra {
	from { opacity: 0; transform: translateY(18px) scale(0.96); }
	to   { opacity: 1; transform: none; }
}

.lme-guia-cerrar {
	position: absolute;
	top: 12px;
	right: 12px;
	border: none !important;
	background: transparent !important;
	font-size: 16px;
	opacity: 0.55;
}

.lme-guia-cerrar:hover {
	opacity: 1;
	color: #AD1531;
}

.lme-guia-titulo {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 26px;
	font-weight: 700;
	color: #1f2937;
	margin: 4px 0 0;
}

.lme-guia-titulo::after {
	content: '';
	display: block;
	width: 40px;
	height: 3px;
	border-radius: 3px;
	background: #AD1531;
	margin: 10px auto 0;
}

.lme-guia-sub {
	color: #6b7280;
	font-size: 14px;
	margin: 10px 0 0;
}

.lme-guia-lista {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 20px 0 8px;
}

/* Tarjeta de modo: grande, tocable, con diagrama arriba. */
.lme-guia-op {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: 158px;
	padding: 16px 10px 14px;
	border: 2px solid #e5e7eb;
	border-radius: 14px;
	background: #fff;
	color: #1f2937;
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.lme-guia-op:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(17, 24, 39, 0.1);
	border-color: #d1d5db;
}

.lme-guia-op:focus-visible {
	outline: 2px solid #AD1531;
	outline-offset: 2px;
}

/* Seleccionada: borde carmesí (el modo ya está aplicado detrás). */
.lme-guia-op.lme-activo {
	border-color: #AD1531;
	background: rgba(173, 21, 49, 0.05);
	box-shadow: 0 0 0 1px #AD1531;
}

.lme-guia-op-emoji {
	font-size: 22px;
	line-height: 1;
}

.lme-guia-op-titulo {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 16px;
}

.lme-guia-op-desc {
	font-size: 12px;
	color: #6b7280;
	line-height: 1.35;
}

/* ── Mini-diagramas en CSS puro ── */
.lme-guia-diag {
	position: relative;
	width: 64px;
	height: 46px;
	margin-bottom: 4px;
	flex-shrink: 0;
}

/* Scroll: tres líneas horizontales + flecha vertical al lado. */
.lme-guia-diag-scroll {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	padding: 0 16px 0 8px;
}

.lme-guia-diag-scroll i {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: #d1d5db;
}

.lme-guia-diag-scroll i:nth-child(2) {
	width: 78%;
}

.lme-guia-diag-scroll::after {
	content: '↓';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 17px;
	font-weight: 700;
	color: #AD1531;
}

/* Una hoja: un rectángulo con la esquina doblada. */
.lme-guia-diag-pagina::before {
	content: '';
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 17px;
	right: 17px;
	border: 2px solid #d1d5db;
	border-radius: 3px;
}

.lme-guia-diag-pagina::after {
	content: '';
	position: absolute;
	top: 5px;
	right: 19px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 11px 11px 0;
	border-color: transparent #AD1531 transparent transparent;
}

/* Libro abierto: dos rectángulos unidos por el lomo carmesí. */
.lme-guia-diag-doble {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lme-guia-diag-doble i {
	display: block;
	width: 25px;
	height: 40px;
	border: 2px solid #d1d5db;
}

.lme-guia-diag-doble i:first-child {
	border-radius: 5px 0 0 5px;
	border-right: 2px solid #AD1531;
}

.lme-guia-diag-doble i:last-child {
	border-radius: 0 5px 5px 0;
	border-left: none;
}

/* Línea de orientación bajo las tarjetas. */
.lme-guia-pie {
	font-size: 12px;
	color: #9ca3af;
	margin: 6px 0 16px;
}

.lme-guia-listo {
	font-size: 16px;
	padding: 11px 26px;
	border-radius: 999px;
}

/* ── Guía en oscuro y sepia ── */
body.lme-dark .lme-guia-card {
	background: #1f2937;
	color: #e5e7eb;
}

body.lme-dark .lme-guia-titulo {
	color: #e5e7eb;
}

body.lme-dark .lme-guia-op {
	background: #111827;
	border-color: #374151;
	color: #e5e7eb;
}

body.lme-dark .lme-guia-op.lme-activo {
	border-color: #AD1531;
	background: rgba(173, 21, 49, 0.14);
}

body.lme-dark .lme-guia-diag-scroll i,
body.lme-dark .lme-guia-diag-pagina::before,
body.lme-dark .lme-guia-diag-doble i {
	border-color: #4b5563;
	background-color: transparent;
}

body.lme-dark .lme-guia-diag-scroll i {
	background: #4b5563;
}

body.lme-dark .lme-guia-diag-doble i:first-child {
	border-right-color: #e5697f;
}

body.lme-sepia .lme-guia-card {
	background: #f9f3e3;
	color: #5b4636;
}

body.lme-sepia .lme-guia-titulo {
	color: #5b4636;
}

body.lme-sepia .lme-guia-op {
	background: #f4ecd8;
	border-color: #d3c4a2;
	color: #5b4636;
}

/* ── Regla de la casa: display propio ⇒ pareja [hidden] ── */
.lme-guia[hidden] {
	display: none !important;
}

/* ── Móvil: tarjetas a lo ancho, una por fila ── */
@media (max-width: 480px) {
	.lme-guia-card {
		padding: 26px 18px 20px;
	}

	.lme-guia-op {
		width: 100%;
		flex-direction: row;
		text-align: left;
		align-items: center;
		gap: 12px;
		padding: 12px 14px;
	}

	.lme-guia-op .lme-guia-diag {
		margin-bottom: 0;
		transform: scale(0.85);
	}

	.lme-guia-op-titulo {
		display: block;
	}

	.lme-guia-op-desc {
		flex: 1;
		text-align: left;
	}
}

/* ── Movimiento reducido: la guía aparece y se va sin florituras ── */
@media (prefers-reduced-motion: reduce) {
	.lme-guia,
	.lme-guia-card {
		animation: none;
		transition: none;
	}

	.lme-guia-op {
		transition: none;
	}

	.lme-leaf-gira-dbl-bck {
		animation: none;
	}
}

/* ═══ LIBRO ABIERTO 2.1 — el pliego como OBJETO de papel ════════════════════
   Antes: dos columnas angostas (heredaban el ancho de UNA columna de lectura)
   y los cantos/lomo flotando como rayas sueltas. Ahora: pliego ancho, papel
   con sombra sobre un fondo suave, cantos tenues DENTRO del papel. */
html body.lme-paginado.lme-doble {
	background: #eef0f3 !important;
}
html body.lme-sepia.lme-paginado.lme-doble {
	background: #e7dcc4 !important;
}
html body.lme-dark.lme-paginado.lme-doble {
	background: #0b111d !important;
}
body.lme-paginado.lme-doble .lme-main {
	/* !important: pisa el max-width inline del ajuste "Ancho" de Aa
	   (60-80ch es para UNA columna; el pliego necesita las dos). */
	max-width: min(1160px, 94vw) !important;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 18px 55px rgba(17, 24, 39, 0.10), 0 2px 10px rgba(17, 24, 39, 0.05);
	padding-left: 44px !important;
	padding-right: 44px !important;
}
body.lme-sepia.lme-paginado.lme-doble .lme-main {
	background: #f4ecd8;
}
body.lme-dark.lme-paginado.lme-doble .lme-main {
	background: #17202f;
}
/* Cantos: apenas un aliento, y con las esquinas del papel. */
body.lme-paginado.lme-doble .lme-main::after {
	border-radius: 12px;
	background:
		linear-gradient(to right, rgba(31, 41, 55, 0.045), transparent 1.6%),
		linear-gradient(to left, rgba(31, 41, 55, 0.045), transparent 1.6%);
}
body.lme-dark.lme-paginado.lme-doble .lme-main::after {
	background:
		linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent 1.6%),
		linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent 1.6%);
}
body.lme-sepia.lme-paginado.lme-doble .lme-main::after {
	background:
		linear-gradient(to right, rgba(91, 70, 54, 0.06), transparent 1.6%),
		linear-gradient(to left, rgba(91, 70, 54, 0.06), transparent 1.6%);
}
/* Lomo más angosto ahora que vive dentro del papel. */
body.lme-paginado.lme-doble .lme-main::before {
	width: 32px;
}
/* La hoja que gira debe ser del MISMO papel que el pliego. */
body.lme-dark.lme-doble .lme-leaf-cara {
	background: #17202f;
}

/* ── v1.7.2: cierre de capítulo en la hoja derecha + pie sin cortar + debug ── */
/* El lector paginado no debe generar scroll de página: el pie se cortaba. */
body.lme-paginado {
	overflow: hidden;
}
.lme-fincap {
	break-before: column;
	-webkit-column-break-before: always;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
}
.lme-fincap[hidden] {
	display: none !important;
}
.lme-fincap-orn {
	font-size: 44px;
	color: #AD1531;
	opacity: 0.45;
}
.lme-fincap-txt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #9ca3af;
}
body.lme-dark .lme-fincap-txt { color: #64748b; }
.lme-debug {
	position: fixed;
	left: 10px;
	bottom: 10px;
	z-index: 9999;
	background: #1f2937;
	color: #fff;
	font: 600 11px/1.4 monospace;
	padding: 6px 10px;
	border-radius: 8px;
	opacity: 0.92;
	pointer-events: none;
}

/* ═══ AMPLIACIÓN 1.4 — Cerbero, progreso del libro, reseña, papel, muestra,
   cita multi-formato ═══════════════════════════════════════════════════════
   Mismo lenguaje de la casa: acento #AD1531, serif Georgia en lo editorial,
   pill de tinta #1f2937, curvas cubic-bezier(0.22,1,0.36,1). Regla de la casa:
   todo lo que se oculta con [hidden] y tiene display propio lleva su pareja. */

/* ── Barra de progreso: la fina superior refleja el avance GLOBAL del libro
      (coherente con su aria "Avance en el libro"). La capa de capítulo sigue
      calculándose en el JS pero no se pinta: pág. X de Y ya lo cuenta. ── */
.lme-progreso-global {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background: #AD1531;
	transition: width 0.3s;
	z-index: 2;
}
.lme-progreso-fill {
	display: none; /* el avance intra-capítulo no se muestra en la barra fina */
}

/* ── Pie: centro apilado (indicador de página arriba, avance del libro abajo) ── */
.lme-nav-centro {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.lme-libro-info {
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	text-align: center;
}
body.lme-dark .lme-libro-info { color: #9ca3af; }
body.lme-sepia .lme-libro-info { color: #7a6450; }

/* ── Distintivo "Muestra gratis" en la barra ── */
.lme-muestra-badge {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #AD1531;
	background: rgba(173, 21, 49, 0.09);
	border: 1px solid rgba(173, 21, 49, 0.30);
	border-radius: 999px;
	padding: 3px 9px;
	white-space: nowrap;
	flex-shrink: 0;
}
body.lme-dark .lme-muestra-badge {
	color: #f3a3b1;
	border-color: rgba(243, 163, 177, 0.4);
	background: rgba(173, 21, 49, 0.18);
}

/* ── Cerbero: chat cálido al margen ── */
.lme-cerbero {
	position: fixed;
	z-index: 75;
	right: 16px;
	bottom: 16px;
	width: 360px;
	max-width: calc(100vw - 24px);
	max-height: 74vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(17, 24, 39, 0.28);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	animation: lme-cerbero-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lme-cerbero-in {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}
/* En modo página el pie es fijo abajo: subir el panel para no taparlo. */
body.lme-paginado .lme-cerbero { bottom: 78px; }

.lme-cerbero-cab {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid #eef0f3;
	background: rgba(173, 21, 49, 0.04);
	flex-shrink: 0;
}
.lme-cerbero-avatar { font-size: 24px; line-height: 1; flex-shrink: 0; }
.lme-cerbero-quien { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lme-cerbero-nombre { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; color: #1f2937; }
.lme-cerbero-rol { font-size: 11px; color: #9ca3af; }
.lme-cerbero-cerrar { border: none !important; background: transparent !important; padding: 2px 6px; }

.lme-cerbero-ctx {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: baseline;
	padding: 10px 14px 0;
	flex-shrink: 0;
}
.lme-cerbero-ctx-lbl {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #AD1531;
}
.lme-cerbero-ctx-txt {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 13px;
	color: #6b7280;
}

.lme-cerbero-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 14px;
	flex-shrink: 0;
}
.lme-cerbero-accion { font-size: 12px; padding: 6px 10px; border-radius: 999px; }

.lme-cerbero-msgs {
	flex: 1;
	overflow-y: auto;
	padding: 4px 14px 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 64px;
}
.lme-cerbero-burbuja {
	max-width: 88%;
	border-radius: 14px;
	padding: 8px 12px;
	font-size: 14px;
	line-height: 1.5;
	animation: lme-pop 0.16s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.lme-cerbero-user {
	align-self: flex-end;
	background: #AD1531;
	color: #fff;
	border-bottom-right-radius: 5px;
}
.lme-cerbero-cerbero,
.lme-cerbero-pensando {
	align-self: flex-start;
	display: flex;
	gap: 8px;
	background: #faf3ec;
	color: #1f2937;
	border: 1px solid #f0e6da;
	border-bottom-left-radius: 5px;
}
.lme-cerbero-b-avatar { font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.lme-cerbero-b-txt { white-space: pre-wrap; min-width: 0; }

.lme-cerbero-dots { display: inline-flex; align-items: center; gap: 5px; padding: 5px 2px; }
.lme-cerbero-dots i {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #c98a95;
	animation: lme-cerbero-dot 1s infinite ease-in-out;
}
.lme-cerbero-dots i:nth-child(2) { animation-delay: 0.16s; }
.lme-cerbero-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes lme-cerbero-dot {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
	40%           { transform: scale(1); opacity: 1; }
}

.lme-cerbero-pie {
	display: flex;
	gap: 8px;
	padding: 10px 14px;
	border-top: 1px solid #eef0f3;
	flex-shrink: 0;
}
.lme-cerbero-input {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	font-size: 14px;
	background: #fff;
	color: #1f2937;
}
.lme-cerbero-input:focus-visible { outline: 2px solid #AD1531; outline-offset: 1px; }
.lme-cerbero-enviar {
	border-radius: 50%;
	width: 38px;
	height: 38px;
	padding: 0;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

body.lme-dark .lme-cerbero { background: #1f2937; border-color: #374151; }
body.lme-dark .lme-cerbero-cab { background: rgba(173, 21, 49, 0.12); border-bottom-color: #374151; }
body.lme-dark .lme-cerbero-nombre { color: #e5e7eb; }
body.lme-dark .lme-cerbero-ctx-txt { color: #9ca3af; }
body.lme-dark .lme-cerbero-cerbero,
body.lme-dark .lme-cerbero-pensando { background: #111827; border-color: #374151; color: #e5e7eb; }
body.lme-dark .lme-cerbero-pie { border-top-color: #374151; }
body.lme-dark .lme-cerbero-input { background: #111827; border-color: #4b5563; color: #e5e7eb; }

body.lme-sepia .lme-cerbero { background: #f9f3e3; border-color: #d3c4a2; }
body.lme-sepia .lme-cerbero-cab { background: rgba(173, 21, 49, 0.05); border-bottom-color: #e0d4b8; }
body.lme-sepia .lme-cerbero-nombre { color: #5b4636; }
body.lme-sepia .lme-cerbero-cerbero,
body.lme-sepia .lme-cerbero-pensando { background: #f4ecd8; border-color: #e0d4b8; color: #5b4636; }
body.lme-sepia .lme-cerbero-input { background: #fffdf7; border-color: #d3c4a2; color: #5b4636; }

/* ── Puente al papel: popover anclado bajo su botón ── */
.lme-papel {
	position: fixed;
	z-index: 60;
	width: 300px;
	max-width: calc(100vw - 16px);
	padding: 14px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 12px 36px rgba(17, 24, 39, 0.22);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	animation: lme-pop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.lme-papel-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.lme-papel-img { width: 64px; height: auto; border-radius: 6px; flex-shrink: 0; border: 1px solid #e5e7eb; }
.lme-papel-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lme-papel-titulo { font-family: Georgia, 'Times New Roman', serif; font-size: 15px; color: #1f2937; line-height: 1.3; }
.lme-papel-precio { font-weight: 800; color: #AD1531; font-size: 16px; }
.lme-papel-botones { display: flex; flex-direction: column; gap: 8px; }
.lme-papel-botones .lme-btn { text-align: center; text-decoration: none; display: block; }
body.lme-dark .lme-papel { background: #1f2937; border-color: #374151; color: #e5e7eb; }
body.lme-dark .lme-papel-titulo { color: #e5e7eb; }
body.lme-dark .lme-papel-img { border-color: #374151; }
body.lme-sepia .lme-papel { background: #f9f3e3; border-color: #d3c4a2; color: #5b4636; }
body.lme-sepia .lme-papel-titulo { color: #5b4636; }

/* ── Reseña al terminar: estrellas carmesí ── */
.lme-resena { margin: 6px auto 20px; max-width: 420px; text-align: center; }
.lme-resena-titulo { font-family: Georgia, 'Times New Roman', serif; font-size: 18px; margin: 0 0 10px; color: #1f2937; }
.lme-resena-estrellas { display: inline-flex; gap: 4px; margin-bottom: 10px; }
.lme-estrella {
	border: none;
	background: transparent;
	font-size: 30px;
	line-height: 1;
	color: #d1d5db;
	cursor: pointer;
	padding: 2px;
	transition: transform 0.12s ease, color 0.12s ease;
}
.lme-estrella:hover { transform: scale(1.15); }
.lme-estrella.lme-estrella-on { color: #AD1531; }
.lme-resena-area {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	padding: 8px 10px;
	font: inherit;
	font-size: 14px;
	resize: vertical;
	background: #fff;
	color: #1f2937;
	margin-bottom: 10px;
}
.lme-resena-enviar { border-radius: 999px; padding: 9px 22px; }
.lme-resena-gracias { color: #1f2937; font-size: 15px; margin: 8px 0; line-height: 1.5; }
.lme-resena-hecha { padding: 6px 0 4px; }
body.lme-dark .lme-resena-titulo,
body.lme-dark .lme-resena-gracias { color: #e5e7eb; }
body.lme-dark .lme-resena-area { background: #111827; border-color: #4b5563; color: #e5e7eb; }
body.lme-dark .lme-estrella { color: #4b5563; }
body.lme-dark .lme-estrella.lme-estrella-on { color: #f3a3b1; }
body.lme-sepia .lme-resena-area { background: #fffdf7; border-color: #d3c4a2; color: #5b4636; }

/* ── Cita multi-formato: selector arriba de la vista previa ── */
.lme-cita-formatos { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.lme-cita-formato { font-size: 12px; padding: 6px 10px; }

/* ── Muestra gratis: hoja de compra premium ── */
.lme-compra-card {
	background: #fff;
	border-radius: 18px;
	padding: 26px 24px 22px;
	max-width: 380px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	text-align: center;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	animation: lme-guia-entra 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lme-compra-portada {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 22px 16px;
	margin-bottom: 16px;
	border-radius: 14px;
	border: 1px solid rgba(173, 21, 49, 0.18);
	background: linear-gradient(135deg, rgba(173, 21, 49, 0.08), rgba(173, 21, 49, 0.02));
}
.lme-compra-emoji { font-size: 40px; line-height: 1; }
.lme-compra-titulo { font-family: Georgia, 'Times New Roman', serif; font-size: 19px; color: #1f2937; line-height: 1.3; }
.lme-compra-texto { color: #4b5563; font-size: 15px; margin: 0 0 8px; line-height: 1.5; }
.lme-compra-precio { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 24px; color: #AD1531; margin: 6px 0 16px; }
.lme-compra-btn { display: block; text-decoration: none; text-align: center; border-radius: 999px; padding: 13px 20px; font-size: 16px; margin-bottom: 10px; }
.lme-compra-seguir { display: block; width: 100%; border: none; background: transparent; color: #6b7280; font-weight: 600; }
.lme-compra-seguir:hover { color: #AD1531; background: transparent; }
body.lme-dark .lme-compra-card { background: #1f2937; }
body.lme-dark .lme-compra-titulo { color: #e5e7eb; }
body.lme-dark .lme-compra-texto { color: #9ca3af; }
body.lme-sepia .lme-compra-card { background: #f9f3e3; }
body.lme-sepia .lme-compra-titulo { color: #5b4636; }

/* ── Regla de la casa: display propio ⇒ pareja [hidden] ── */
.lme-cerbero[hidden],
.lme-papel[hidden] {
	display: none !important;
}

/* ── Móvil: Cerbero como hoja inferior ── */
@media (max-width: 640px) {
	.lme-cerbero {
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		max-height: 82vh;
		border-radius: 16px 16px 0 0;
	}
	body.lme-paginado .lme-cerbero { bottom: 0; }
}

/* ── Movimiento reducido: lo nuevo también se queda quieto ── */
@media (prefers-reduced-motion: reduce) {
	.lme-cerbero,
	.lme-cerbero-burbuja,
	.lme-papel,
	.lme-compra-card {
		animation: none !important;
	}
	.lme-cerbero-dots i { animation: none !important; }
	.lme-estrella,
	.lme-progreso-global { transition: none; }
}

/* ── Celebración como tarjeta-overlay (no se parte entre columnas) ── */
.lme-fin-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(17, 24, 39, 0.34);
	animation: lme-fin-fade 0.3s ease both;
}
.lme-fin-overlay[hidden] { display: none !important; }
@keyframes lme-fin-fade { from { opacity: 0; } to { opacity: 1; } }
.lme-fin-overlay .lme-fin {
	position: relative;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 70px rgba(17, 24, 39, 0.28);
	max-width: 460px;
	width: 100%;
	max-height: 86vh;
	overflow-y: auto;
	padding: 30px 26px 26px;
	text-align: center;
	animation: lme-fin-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes lme-fin-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
body.lme-sepia .lme-fin-overlay .lme-fin { background: #f4ecd8; }
body.lme-dark .lme-fin-overlay .lme-fin { background: #17202f; color: #e5e7eb; }
.lme-fin-cerrar {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.06);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	color: #6b7280;
}
.lme-fin-cerrar:hover { background: rgba(0, 0, 0, 0.12); }
body.lme-dark .lme-fin-cerrar { background: rgba(255, 255, 255, 0.1); color: #cbd5e1; }
.lme-fin-titulo { font-family: Georgia, 'Times New Roman', serif; font-size: 21px; line-height: 1.3; color: inherit; margin: 4px 0 6px; }