/* =====================================================================
   Revista interactiva (Flipbook) — Horizontes Amazónicos, 2026-11-11
   Paleta de la revista: NAVY #142A42 · TEAL #009B9B · GOLD #E4A722
   ===================================================================== */
.ha-flipbook {
	--fb-navy: #142A42;
	--fb-teal: #009B9B;
	--fb-teal-soft: rgba(0, 155, 155, .12);
	--fb-gold: #E4A722;
	--fb-paper: #f6f8f9;
	--fb-progress: 0%;
	--fb-load: 0%;
	position: relative;
	margin: 1.5rem 0 2.5rem;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(20, 42, 66, .08), 0 12px 32px -12px rgba(20, 42, 66, .25);
	overflow: hidden;
	animation: haFbEnter .7s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes haFbEnter {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Cabecera ---------- */
.ha-fb-head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem 2rem;
	padding: 1.6rem 1.75rem 1.4rem;
	color: #fff;
	background: linear-gradient(120deg, var(--fb-navy) 0%, #1b3a57 55%, #0f5f69 100%);
	isolation: isolate;
}
.ha-fb-deco {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	z-index: -1;
	pointer-events: none;
}
.ha-fb-mol line, .ha-fb-mol polygon { stroke: rgba(255, 255, 255, .45); stroke-width: 1.4; }
.ha-fb-mol circle { fill: var(--fb-teal); stroke: rgba(255, 255, 255, .7); stroke-width: 1; }
.ha-fb-mol circle.gold { fill: var(--fb-gold); }
.ha-fb-mol--a { transform-origin: 505px 45px; animation: haFbFloat 9s ease-in-out infinite; }
.ha-fb-mol--b { transform-origin: 396px 87px; animation: haFbSpin 28s linear infinite; }
.ha-fb-wave {
	stroke: var(--fb-gold);
	stroke-width: 1.5;
	opacity: .55;
	stroke-dasharray: 6 6;
	animation: haFbDash 6s linear infinite;
}
@keyframes haFbFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(4deg); } }
@keyframes haFbSpin  { to { transform: rotate(360deg); } }
@keyframes haFbDash  { to { stroke-dashoffset: -120; } }

.ha-fb-head-text { flex: 1 1 360px; min-width: 0; }
.ha-fb-kicker {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .2rem .65rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fb-navy);
	background: var(--fb-gold);
}
.ha-fb-kicker svg { width: 14px; height: 14px; fill: currentColor; }
.ha-flipbook .ha-fb-title {
	margin: .55rem 0 .35rem;
	font-size: 1.5rem;
	line-height: 1.2;
	color: #fff;
}
.ha-fb-sub { margin: 0; max-width: 60ch; font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .82); }

.ha-fb-stats {
	display: flex;
	gap: .6rem;
	margin: 0;
}
.ha-fb-stats > div {
	min-width: 76px;
	padding: .5rem .75rem;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 10px;
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(4px);
	text-align: center;
}
.ha-fb-stats dt { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.ha-fb-stats dd {
	margin: .1rem 0 0;
	font: 700 1.25rem/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: var(--fb-gold);
}

/* ---------- Escenario ---------- */
.ha-fb-stage-wrap {
	position: relative;
	min-height: 320px;
	padding: 2rem 1rem 1.5rem;
	background:
		radial-gradient(circle at 1px 1px, rgba(20, 42, 66, .11) 1px, transparent 0) 0 0 / 18px 18px,
		linear-gradient(180deg, var(--fb-paper), #e9eef1);
}
.ha-fb-stage { margin: 0 auto; outline: none; }
.ha-fb-stage:focus-visible { box-shadow: 0 0 0 3px var(--fb-gold); border-radius: 4px; }
.ha-flipbook.is-loading .ha-fb-stage { visibility: hidden; }
.ha-flipbook.is-ready .ha-fb-stage { animation: haFbBookIn .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes haFbBookIn {
	from { opacity: 0; transform: perspective(1200px) rotateX(10deg) translateY(16px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

.ha-fb-page { background: #fff; }
.ha-fb-page-inner { position: relative; width: 100%; height: 100%; overflow: hidden; }
.ha-fb-page canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .4s ease; }
.ha-fb-page-inner.is-rendered canvas { opacity: 1; }
/* Lomo: sombreado interior hacia el centro del libro */
.ha-fb-page.is-left .ha-fb-page-inner::after,
.ha-fb-page.is-right .ha-fb-page-inner::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 7%;
	pointer-events: none;
}
.ha-fb-page.is-left  .ha-fb-page-inner::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .13), transparent); }
.ha-fb-page.is-right .ha-fb-page-inner::after { left: 0;  background: linear-gradient(to right, rgba(0, 0, 0, .13), transparent); }
.ha-fb-page[data-density="hard"] .ha-fb-page-inner::after { display: none; }

.ha-fb-shimmer {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, #f1f4f6 30%, #e3e9ed 50%, #f1f4f6 70%) 0 0 / 300% 100%;
	animation: haFbShimmer 1.4s linear infinite;
	transition: opacity .4s;
}
.ha-fb-page-inner.is-rendered .ha-fb-shimmer { opacity: 0; animation: none; }
@keyframes haFbShimmer { to { background-position: -150% 0; } }
.ha-fb-pnum {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 .4rem;
	border-radius: 4px;
	font: 600 10px/16px ui-monospace, Menlo, Consolas, monospace;
	color: var(--fb-navy);
	background: rgba(255, 255, 255, .85);
	opacity: 0;
	transition: opacity .25s;
}
.ha-fb-stage:hover .ha-fb-pnum { opacity: .9; }

/* Llegada tras un salto largo: el libro «se hojea» rápido y aparece */
.ha-fb-stage.is-arrive { animation: haFbArrive .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes haFbArrive {
	0%   { opacity: .15; transform: perspective(1400px) rotateY(-14deg) translateX(24px); filter: blur(2px); }
	100% { opacity: 1;   transform: none; filter: none; }
}

/* Pulso al saltar a un artículo */
.ha-flipbook.is-pulse .ha-fb-stage-wrap::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 2px solid var(--fb-teal);
	border-radius: 12px;
	pointer-events: none;
	animation: haFbPulse 1.1s ease-out both;
}
@keyframes haFbPulse {
	0%   { opacity: .9; transform: scale(.98); box-shadow: 0 0 0 0 rgba(0, 155, 155, .45); }
	100% { opacity: 0;  transform: scale(1);   box-shadow: 0 0 0 18px rgba(0, 155, 155, 0); }
}

/* ---------- Cargador hexagonal ---------- */
.ha-fb-loader {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	color: var(--fb-navy);
}
.ha-fb-loader[hidden] { display: none; }
.ha-fb-hex { width: 74px; height: 74px; }
.ha-fb-hex polygon { fill: none; stroke-width: 5; stroke-linejoin: round; }
.ha-fb-hex-track { stroke: rgba(20, 42, 66, .12); }
.ha-fb-hex-run {
	stroke: var(--fb-teal);
	stroke-dasharray: 60 180;
	animation: haFbHexRun 1.5s linear infinite;
}
.ha-fb-hex circle { fill: var(--fb-gold); transform-origin: 50px 50px; animation: haFbBeat 1.5s ease-in-out infinite; }
@keyframes haFbHexRun { to { stroke-dashoffset: -240; } }
@keyframes haFbBeat { 0%,100% { transform: scale(.7); } 50% { transform: scale(1.15); } }
.ha-fb-loader-text { font-size: .9rem; font-weight: 600; }
.ha-fb-loader-pct {
	position: relative;
	width: 160px;
	height: 4px;
	border-radius: 4px;
	overflow: hidden;
	font-size: 0;
	background: rgba(20, 42, 66, .1);
}
.ha-fb-loader-pct::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--fb-load);
	background: linear-gradient(90deg, var(--fb-teal), var(--fb-gold));
	transition: width .2s;
}

.ha-fb-error { padding: 2.5rem 1rem; text-align: center; color: var(--fb-navy); }
.ha-fb-btn {
	display: inline-block;
	padding: .55rem 1.1rem;
	border-radius: 999px;
	color: #fff !important;
	background: var(--fb-teal);
	text-decoration: none;
	font-weight: 600;
}

/* ---------- Barra de control ---------- */
.ha-fb-bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .7rem 1rem;
	border-top: 1px solid rgba(20, 42, 66, .08);
	background: #fff;
}
/* barra de progreso de lectura */
.ha-fb-bar::before {
	content: "";
	position: absolute;
	top: -1px; left: 0;
	height: 3px;
	width: var(--fb-progress);
	background: linear-gradient(90deg, var(--fb-teal), var(--fb-gold));
	transition: width .5s cubic-bezier(.2, .7, .2, 1);
}
.ha-fb-ctrl {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(20, 42, 66, .14);
	border-radius: 10px;
	color: var(--fb-navy);
	background: #fff;
	cursor: pointer;
	transition: transform .15s, background .2s, color .2s, border-color .2s;
}
.ha-fb-ctrl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ha-fb-ctrl:hover, .ha-fb-ctrl:focus-visible { color: #fff; background: var(--fb-teal); border-color: var(--fb-teal); transform: translateY(-1px); }
.ha-fb-ctrl:active { transform: scale(.94); }

.ha-fb-progress {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "count range" "art art";
	align-items: center;
	gap: .1rem .75rem;
	padding: 0 .5rem;
}
.ha-fb-counter {
	grid-area: count;
	font: 500 .85rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: var(--fb-navy);
	white-space: nowrap;
}
.ha-fb-counter b { color: var(--fb-teal); }
.ha-fb-range { grid-area: range; width: 100%; accent-color: var(--fb-teal); cursor: pointer; }
.ha-fb-current-article {
	grid-area: art;
	overflow: hidden;
	font-size: .75rem;
	color: #5b6b7a;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ---------- Aviso flotante ---------- */
.ha-fb-toast {
	position: fixed;   /* visible aunque la cabecera del visor quede fuera de pantalla */
	top: 1rem;
	left: 50%;
	z-index: 100001;
	max-width: calc(100vw - 2rem);
	text-align: center;
	padding: .5rem 1rem;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	color: #fff;
	background: var(--fb-navy);
	box-shadow: 0 8px 20px -8px rgba(20, 42, 66, .6);
	opacity: 0;
	transform: translate(-50%, -12px);
	pointer-events: none;
	transition: opacity .3s, transform .3s;
}
.ha-fb-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Pantalla completa ---------- */
.ha-flipbook:fullscreen { margin: 0; border-radius: 0; overflow: auto; display: flex; flex-direction: column; }
.ha-flipbook:fullscreen .ha-fb-head { display: none; }
.ha-flipbook:fullscreen .ha-fb-stage-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* el marco con scroll del zoom debe ocupar todo el ancho; si no, se encoge y el libro queda diminuto */
.ha-flipbook:fullscreen .ha-fb-scroll { width: 100%; }
.ha-flipbook:-webkit-full-screen { width: 100%; height: 100%; margin: 0; border-radius: 0; overflow: auto; display: flex; flex-direction: column; }
.ha-flipbook:-webkit-full-screen .ha-fb-head { display: none; }
.ha-flipbook:-webkit-full-screen .ha-fb-stage-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ha-flipbook:-webkit-full-screen .ha-fb-scroll { width: 100%; }
.ha-flipbook.is-max {
	position: fixed;
	inset: 0;
	z-index: 10000;
	margin: 0;
	border-radius: 0;
	overflow: auto;
}
.ha-flipbook.is-max .ha-fb-head { display: none; }
.ha-flipbook.is-max { display: flex; flex-direction: column; }
.ha-flipbook.is-max .ha-fb-stage-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ha-flipbook.is-max .ha-fb-scroll { width: 100%; }

/* ---------- Botón en la TOC ---------- */
.ha-fb-goto {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: .55rem 0 .2rem;
	padding: .38rem .85rem .38rem .7rem;
	border: 1px solid var(--fb-teal, #009B9B);
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.2;
	color: #007b7b;
	background: rgba(0, 155, 155, .06);
	cursor: pointer;
	transition: background .2s, color .2s, box-shadow .2s, transform .15s;
}
.ha-fb-goto svg { width: 16px; height: 16px; fill: currentColor; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.ha-fb-goto:hover, .ha-fb-goto:focus-visible {
	color: #fff;
	background: #009B9B;
	box-shadow: 0 6px 14px -6px rgba(0, 155, 155, .7);
	transform: translateY(-1px);
}
.ha-fb-goto:hover svg { transform: rotateY(180deg) scale(1.1); }
.ha-fb-goto-page:not(:empty) {
	padding: .05rem .45rem;
	border-radius: 999px;
	font: 600 .72rem ui-monospace, Menlo, Consolas, monospace;
	color: #142A42;
	background: #E4A722;
}
.ha-fb-goto.is-busy svg { animation: haFbSpin 1s linear infinite; }

/* Artículo que se está leyendo en el visor */
.obj_issue_toc li.ha-fb-reading > .obj_article_summary {
	position: relative;
	box-shadow: inset 4px 0 0 #E4A722;
	background: linear-gradient(90deg, rgba(228, 167, 34, .08), transparent 60%);
	transition: background .4s, box-shadow .4s;
}

/* ---------- Responsivo ---------- */
@media (max-width: 767px) {
	.ha-fb-head { padding: 1.2rem 1rem 1rem; }
	.ha-flipbook .ha-fb-title { font-size: 1.2rem; }
	.ha-fb-stats { width: 100%; }
	.ha-fb-stats > div { flex: 1; min-width: 0; }
	.ha-fb-stage-wrap { padding: 1rem .5rem; }
	.ha-fb-bar { flex-wrap: wrap; justify-content: center; }
	.ha-fb-progress { order: -1; flex-basis: 100%; padding: 0 0 .3rem; }
	.ha-fb-ctrl { width: 38px; height: 38px; }
}


/* =====================================================================
   Lupa (visor de página con zoom) — 2026-11-12
   El visor se monta en <body> (o en el libro si está a pantalla completa),
   por eso usa colores literales y no las variables de .ha-flipbook.
   ===================================================================== */
html.ha-fb-zoom-open, html.ha-fb-zoom-open body { overflow: hidden; }

.ha-fb-zoom {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: rgba(12, 26, 41, .94);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .25s ease;
}
.ha-fb-zoom[hidden] { display: none; }
.ha-fb-zoom.is-on { opacity: 1; }

.ha-fb-zoom-bar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	padding: .6rem .9rem;
	color: #fff;
	background: linear-gradient(90deg, #142A42, #0f4e5a);
	border-bottom: 2px solid #E4A722;
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6);
}
.ha-fb-zoom-group { display: flex; align-items: center; gap: .35rem; }
.ha-fb-zoom-page, .ha-fb-zoom-pct {
	min-width: 4.5em;
	text-align: center;
	font: 600 .85rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: #E4A722;
}
.ha-fb-zoom-page { min-width: 8em; color: #fff; }
.ha-fb-zbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 10px;
	color: #fff;
	background: rgba(255, 255, 255, .08);
	cursor: pointer;
	transition: background .2s, transform .15s, border-color .2s;
}
.ha-fb-zbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ha-fb-zbtn:hover:not(:disabled), .ha-fb-zbtn:focus-visible { background: #009B9B; border-color: #009B9B; }
.ha-fb-zbtn:active:not(:disabled) { transform: scale(.93); }
.ha-fb-zbtn:disabled { opacity: .35; cursor: default; }
.ha-fb-zclose { background: rgba(228, 167, 34, .18); border-color: rgba(228, 167, 34, .6); }
.ha-fb-zclose:hover { background: #E4A722 !important; color: #142A42; }

.ha-fb-zoom-scroll {
	position: relative;
	flex: 1 1 auto;
	overflow: auto;
	padding: 16px;
	outline: none;
	cursor: zoom-in;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
}
.ha-fb-zoom-scroll.is-zoomed { cursor: grab; }
.ha-fb-zoom-scroll.is-dragging { cursor: grabbing; user-select: none; }
.ha-fb-zoom-sheet {
	position: relative;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .7);
	animation: haFbZoomIn .35s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes haFbZoomIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.ha-fb-zoom-sheet canvas { display: block; width: 100%; height: 100%; }
.ha-fb-zoom-sheet .ha-fb-shimmer {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, #f1f4f6 30%, #e3e9ed 50%, #f1f4f6 70%) 0 0 / 300% 100%;
	animation: haFbShimmer 1.4s linear infinite;
	transition: opacity .3s;
}
.ha-fb-zoom-sheet.is-rendered .ha-fb-shimmer { opacity: 0; animation: none; pointer-events: none; }
.ha-fb-zoom-hint {
	flex: none;
	margin: 0;
	padding: .45rem 1rem;
	font-size: .78rem;
	text-align: center;
	color: rgba(255, 255, 255, .7);
}

/* Botón flotante «Ampliar para leer» sobre el libro */
.ha-fb-zoom-fab {
	position: absolute;
	top: .7rem;
	right: .9rem;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .8rem .4rem .6rem;
	border: 0;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	color: #fff;
	background: #142A42;
	box-shadow: 0 6px 16px -6px rgba(20, 42, 66, .7);
	cursor: pointer;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .3s, transform .3s, background .2s;
}
.ha-flipbook.is-ready .ha-fb-zoom-fab { opacity: 1; transform: none; animation: haFbFabHint 2.4s ease-in-out 1.2s 2; }
.ha-fb-zoom-fab:hover, .ha-fb-zoom-fab:focus-visible { background: #009B9B; }
.ha-fb-zoom-fab svg { width: 18px; height: 18px; fill: none; stroke: #E4A722; stroke-width: 2.2; stroke-linecap: round; }
@keyframes haFbFabHint { 0%, 100% { box-shadow: 0 6px 16px -6px rgba(20, 42, 66, .7); } 50% { box-shadow: 0 0 0 8px rgba(228, 167, 34, .25), 0 6px 16px -6px rgba(20, 42, 66, .7); } }
.ha-fb-ctrl--zoom { color: #009B9B; border-color: rgba(0, 155, 155, .45); }
.ha-fb-ctrl svg circle { fill: none; stroke: currentColor; stroke-width: 2; }
/* Cursores: selección de zona en el centro, mano en los bordes (pasar página) */
.ha-fb-zoomer[data-zone="select"], .ha-fb-zoomer[data-zone="select"] * { cursor: crosshair !important; }
.ha-fb-zoomer[data-zone="flip"], .ha-fb-zoomer[data-zone="flip"] * { cursor: pointer !important; }

@media (max-width: 767px) {
	.ha-fb-zoom-bar { position: relative; justify-content: center; padding: .5rem; }
	.ha-fb-zclose { position: absolute; top: .5rem; right: .5rem; }
	.ha-fb-zoom-bar { padding-right: 3.2rem; }
	.ha-fb-zoom-page { min-width: 6.5em; }
	.ha-fb-zoom-scroll { padding: 8px; }
	.ha-fb-zoom-fab span { display: none; }
	.ha-fb-zoom-fab { padding: .45rem; }
}

/* ---------- Movimiento reducido / impresión ---------- */
@media (prefers-reduced-motion: reduce) {
	.ha-flipbook, .ha-flipbook *, .ha-fb-goto, .ha-fb-goto *, .ha-fb-zoom, .ha-fb-zoom * {
		animation: none !important;
		transition: none !important;
	}
}
@media print {
	.ha-flipbook, .ha-fb-goto { display: none !important; }
}

/* Botón modo una página / doble página — 2026-11-12 */
.ha-fb-ctrl--mode { position: relative; width: auto; padding: 0 .55rem; gap: .25rem; }
.ha-fb-ctrl--mode svg { fill: none; }
.ha-fb-mode-label { font: 700 .8rem ui-monospace, Menlo, Consolas, monospace; }
.ha-flipbook.is-single .ha-fb-page.is-left .ha-fb-page-inner::after,
.ha-flipbook.is-single .ha-fb-page.is-right .ha-fb-page-inner::after { display: none; }

/* Zoom del libro (25–200 %) y selector — 2026-11-12 */
.ha-fb-zoomer { margin: 0 auto; }
.ha-flipbook.is-zoomed .ha-fb-scroll { overflow-x: auto; padding-bottom: 4px; }
.ha-fb-zoomctl {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	height: 40px;
	margin: 0;
	padding: 0 .3rem 0 .55rem;
	border: 1px solid rgba(20, 42, 66, .14);
	border-radius: 10px;
	color: #142A42;
	background: #fff;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
}
.ha-fb-zoomctl:hover, .ha-fb-zoomctl:focus-within { border-color: #009B9B; box-shadow: 0 0 0 3px rgba(0, 155, 155, .15); }
.ha-fb-zoomctl svg { width: 17px; height: 17px; fill: none; stroke: #009B9B; stroke-width: 2.2; stroke-linecap: round; }
.ha-fb-zoomsel, .ha-fb-zoom-sel {
	border: 0;
	background: transparent;
	font: 600 .85rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: inherit;
	cursor: pointer;
	outline: none;
}
.ha-fb-zoom-sel {
	height: 38px;
	padding: 0 .5rem;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 10px;
	color: #E4A722;
	background: rgba(255, 255, 255, .08);
}
.ha-fb-zoom-sel option, .ha-fb-zoomsel option { color: #142A42; background: #fff; }
.ha-fb-zoom-sel:focus-visible { border-color: #009B9B; }


/* Recuadro de selección y vista de la zona ampliada — 2026-11-12 */
.ha-fb-selbox {
	position: fixed;
	z-index: 99999;
	border: 2px dashed #009B9B;
	border-radius: 4px;
	background: rgba(0, 155, 155, .12);
	box-shadow: 0 0 0 9999px rgba(20, 42, 66, .18);
	pointer-events: none;
}
.ha-fb-region {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: rgba(12, 26, 41, .94);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .25s ease;
}
.ha-fb-region[hidden] { display: none; }
.ha-fb-region.is-on { opacity: 1; }
.ha-fb-region-bar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	padding: .6rem .9rem;
	color: #fff;
	background: linear-gradient(90deg, #142A42, #0f4e5a);
	border-bottom: 2px solid #E4A722;
}
.ha-fb-region-info { font: 600 .85rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #E4A722; }
.ha-fb-region-btn {
	height: 38px;
	padding: 0 .9rem;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 10px;
	font-size: .85rem;
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, .08);
	cursor: pointer;
}
.ha-fb-region-btn:hover, .ha-fb-region-btn:focus-visible { background: #009B9B; border-color: #009B9B; }
.ha-fb-region-stage {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	cursor: zoom-out;
}
.ha-fb-region-img {
	position: relative;
	flex: none;
	background: #fff;
	cursor: default;
	box-shadow: 0 0 0 2px #E4A722, 0 22px 60px -14px rgba(0, 0, 0, .75);
}
.ha-fb-region-img canvas { display: block; width: 100%; height: 100%; }
.ha-fb-region-img .ha-fb-shimmer {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, #f1f4f6 30%, #e3e9ed 50%, #f1f4f6 70%) 0 0 / 300% 100%;
	animation: haFbShimmer 1.4s linear infinite;
	transition: opacity .3s;
}
.ha-fb-region-img.is-rendered .ha-fb-shimmer { opacity: 0; animation: none; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	.ha-fb-region, .ha-fb-region * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Guía interactiva (tarjetas animadas en la cabecera) — 2026-11-12
   ===================================================================== */
.ha-fb-tips {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .5rem;
	margin: .7rem 0 0;
	padding: 0;
	list-style: none;
}
.ha-fb-tips li { margin: 0; }
.ha-fb-tip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	width: 100%;
	height: 100%;
	padding: .5rem .35rem .45rem;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 10px;
	color: #fff;
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(4px);
	font-size: .72rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
	animation: haFbTipIn .5s cubic-bezier(.2, .7, .2, 1) both;
}
.ha-fb-tips li:nth-child(2) .ha-fb-tip { animation-delay: .08s; }
.ha-fb-tips li:nth-child(3) .ha-fb-tip { animation-delay: .16s; }
.ha-fb-tips li:nth-child(4) .ha-fb-tip { animation-delay: .24s; }
@keyframes haFbTipIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ha-fb-tip:hover, .ha-fb-tip:focus-visible {
	border-color: #E4A722;
	background: rgba(255, 255, 255, .14);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6);
	outline: none;
}
.ha-fb-tip:active { transform: scale(.97); }
.ha-fb-tip.is-playing { border-color: #009B9B; box-shadow: 0 0 0 3px rgba(0, 155, 155, .35); }
.ha-fb-tip-ico { width: 48px; height: 36px; overflow: visible; }
.ha-fb-tip-ico .pg { fill: rgba(255, 255, 255, .92); stroke: none; }
.ha-fb-tip-ico .ln { stroke: #9fb3c4; stroke-width: 1.6; stroke-linecap: round; fill: none; }

/* 1 · seleccionar zona: el recuadro se dibuja desde la esquina y lo sigue el cursor */
.ico-select .sel { fill: rgba(0, 155, 155, .22); stroke: #009B9B; stroke-width: 1.6; stroke-dasharray: 3 2;
	transform-box: fill-box; transform-origin: 0 0; animation: haFbSel 3s ease-in-out infinite; }
.ico-select .cur { fill: #E4A722; stroke: #142A42; stroke-width: .6; animation: haFbCur 3s ease-in-out infinite; }
@keyframes haFbSel { 0%, 12% { transform: scale(.05); opacity: 0; } 18% { opacity: 1; } 55%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes haFbCur { 0%, 12% { transform: translate(-18px, -12px); } 55%, 100% { transform: translate(0, 0); } }

/* 2 · pasar página: la hoja derecha gira sobre el lomo; el borde parpadea */
.ico-flip .pg { fill: rgba(255, 255, 255, .85); }
.ico-flip .leaf { fill: #E4A722; transform-box: view-box; transform-origin: 24px 18px; animation: haFbLeaf 2.8s ease-in-out infinite; }
.ico-flip .edge { stroke: #009B9B; stroke-width: 2.4; stroke-linecap: round; animation: haFbEdge 2.8s ease-in-out infinite; }
@keyframes haFbLeaf { 0%, 25% { transform: scaleX(1); fill: #E4A722; } 60% { transform: scaleX(0); fill: #c98f17; } 95%, 100% { transform: scaleX(-1); fill: rgba(255, 255, 255, .85); } }
@keyframes haFbEdge { 0%, 15% { opacity: 1; } 25%, 100% { opacity: 0; } }

/* 3 · teclado: las teclas se pulsan por turnos */
.ico-keys .key rect { fill: rgba(255, 255, 255, .12); stroke: #fff; stroke-width: 1.4; }
.ico-keys .key path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-keys .key { transform-box: fill-box; animation: haFbKey 2.4s ease-in-out infinite; }
.ico-keys .k2 { animation-delay: 1.2s; }
@keyframes haFbKey { 0%, 30%, 100% { transform: translateY(0); } 10%, 20% { transform: translateY(1.5px); } }
.ico-keys .k1 rect { animation: haFbKeyFill 2.4s ease-in-out infinite; }
.ico-keys .k2 rect { animation: haFbKeyFill 2.4s ease-in-out 1.2s infinite; }
@keyframes haFbKeyFill { 0%, 30%, 100% { fill: rgba(255, 255, 255, .12); } 10%, 20% { fill: #009B9B; } }

/* 4 · saltar a un artículo: flecha del índice al libro */
.ico-jump .arw { fill: none; stroke: #E4A722; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 26; animation: haFbArw 2.6s ease-in-out infinite; }
.ico-jump .arh { fill: none; stroke: #E4A722; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: haFbArh 2.6s ease-in-out infinite; }
.ico-jump .ln:nth-of-type(1) { animation: haFbRow 2.6s ease-in-out infinite; }
@keyframes haFbArw { 0%, 10% { stroke-dashoffset: 26; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes haFbArh { 0%, 50% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes haFbRow { 0%, 5% { stroke: #9fb3c4; } 10%, 60% { stroke: #E4A722; } 80%, 100% { stroke: #9fb3c4; } }

/* Demostración «seleccionar zona» sobre el libro */
.ha-fb-demosel {
	position: fixed;
	z-index: 9000;
	border: 2px dashed #009B9B;
	border-radius: 4px;
	background: rgba(0, 155, 155, .12);
	pointer-events: none;
	transform-origin: 0 0;
	animation: haFbDemoSel 1.8s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes haFbDemoSel { 0% { transform: scale(0); opacity: 0; } 15% { opacity: 1; } 60% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
/* Demostración «borde para pasar página» */
.ha-fb-demoedge {
	position: fixed;
	z-index: 9000;
	border-radius: 6px;
	background: linear-gradient(90deg, rgba(228, 167, 34, 0), rgba(228, 167, 34, .45));
	pointer-events: none;
	animation: haFbDemoEdge 1.6s ease-out forwards;
}
.ha-fb-demoedge.is-left { background: linear-gradient(270deg, rgba(228, 167, 34, 0), rgba(228, 167, 34, .45)); }
@keyframes haFbDemoEdge { 0% { opacity: 0; } 20%, 60% { opacity: 1; } 100% { opacity: 0; } }
/* «Ver en revista interactiva» resaltado */
.ha-fb-goto.is-hint { animation: haFbGotoHint 1.2s ease-in-out 3; }
@keyframes haFbGotoHint { 0%, 100% { box-shadow: 0 0 0 0 rgba(228, 167, 34, 0); } 50% { box-shadow: 0 0 0 7px rgba(228, 167, 34, .45); } }

@media (max-width: 767px) {
	.ha-fb-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	.ha-fb-tips *, .ha-fb-demosel, .ha-fb-demoedge, .ha-fb-goto.is-hint { animation: none !important; }
}

/* =====================================================================
   Logo animado de la revista en la cabecera del visor — 2026-11-12
   Capas y animaciones: .ha-logo (styleSheet.css de la revista, sección 14).
   Insignia blanca redonda con anillo dorado; flota suavemente y repite la
   animación al pasar el ratón (ver flipbook.js).
   ===================================================================== */
.ha-fb-brandrow { display: flex; align-items: center; gap: 14px; }
.ha-fb-brandtext { min-width: 0; }
.ha-fb-brandtext .ha-fb-title { margin-bottom: 0; }
.ha-fb-brand {
	flex: none;
	width: 72px;
	height: 72px;
	padding: 6px;
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
	box-shadow: 0 0 0 3px rgba(228, 167, 34, .9), 0 10px 22px -8px rgba(0, 0, 0, .55);
	animation: haFbBrandIn .6s cubic-bezier(.2, .8, .2, 1) both, haFbBrandFloat 6s ease-in-out 2.6s infinite;
}
.ha-fb-brand .ha-logo { width: 100%; }
@keyframes haFbBrandIn { from { opacity: 0; transform: scale(.6) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes haFbBrandFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (max-width: 767px) {
	.ha-fb-brand { width: 56px; height: 56px; padding: 5px; }
	.ha-fb-brandrow { gap: 10px; }
}

/* Indicador de carga = logo animado de la revista — 2026-11-12
   (capas .ha-logo de styleSheet.css sección 14; flipbook.js repite la animación cada 3 s mientras carga) */
.ha-fb-loadlogo {
	width: 112px;
	height: 112px;
	padding: 10px;
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
	box-shadow: 0 0 0 4px rgba(228, 167, 34, .9), 0 12px 26px -10px rgba(20, 42, 66, .45);
	animation: haFbBreath 2.4s ease-in-out infinite;
}
.ha-fb-loadlogo .ha-logo { width: 100%; }
@keyframes haFbBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }