@charset "utf-8";
/* Sfogliami.it - pagina dello sfogliabile (flip_new.php)
   Carattere, colori e pulsanti della grafica 2026 del sito (assets/sf/sfogliami.css) */

/* Figtree dai file del sito (SIL OFL): niente richieste a Google Fonts */
@font-face {
	font-family: "Figtree";
	font-style: normal; font-display: swap; font-weight: 300 900;
	src: url(../assets/sf/fonts/figtree-latin-wght-normal.woff2) format("woff2-variations"), url(../assets/sf/fonts/figtree-latin-wght-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: "Figtree";
	font-style: normal; font-display: swap; font-weight: 300 900;
	src: url(../assets/sf/fonts/figtree-latin-ext-wght-normal.woff2) format("woff2-variations"), url(../assets/sf/fonts/figtree-latin-ext-wght-normal.woff2) format("woff2");
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Arial con le misure di Figtree: il testo non si sposta mentre il carattere si carica */
@font-face {
	font-family: "Figtree Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans");
	size-adjust: 100.5%; ascent-override: 94.5%; descent-override: 24.9%; line-gap-override: 0%;
}

:root {
	/* sul turchese il testo è scuro (il bianco non si legge abbastanza), come nel sito */
	--fx-accent: #32C5D2;
	--fx-accent-strong: #25B3C0;
	--fx-accent-edge: #23A9B5;
	--fx-on-accent: #2F353B;
	--fx-petrol: #0B7480; 			/* link e titoletti */
	--fx-petrol-ink: #085C66;
	--fx-ink: #2F353B; 				/* grigio ardesia delle zone scure */
	--fx-glass: rgba(31, 36, 41, .78);
	--fx-glass-strong: rgba(36, 41, 46, .96);
	--fx-line: rgba(255, 255, 255, .1);
	--fx-ink-soft: rgba(255, 255, 255, .72);
	--fx-font: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--fx-ease: cubic-bezier(.2, .8, .2, 1);

	/* parte sotto lo sfogliabile: chiara come il sito, che non ha il tema scuro */
	--fx-bg: #fff;
	--fx-surface: #fff;
	--fx-surface-2: #F7F7F7;
	--fx-surface-3: #ECEEF0;
	--fx-text: #2F353B;
	--fx-text-2: #4A535C;
	--fx-muted: #5C6873;
	--fx-border: #E1E5E8;
	--fx-border-strong: #8A949C;
	--fx-skeleton: #ECEEF0;
	--fx-tint: #E6F7F9;
	--fx-tint-2: #BCEAEF;
	--fx-glass-light: rgba(255, 255, 255, .94);
	--fx-veil: rgba(255, 255, 255, .55);
	--fx-veil-strong: rgba(255, 255, 255, .88);
	--fx-sale: #C8332B;
	--fx-success: #0F7A3D;
	--fx-alert-bg: #FDECEA;
	--fx-alert-text: #B42318;
	--fx-radius: 20px;
	--fx-radius-lg: 28px;
	--fx-shadow-1: 0 1px 2px rgba(31, 36, 41, .06), 0 1px 1px rgba(31, 36, 41, .04);
	--fx-shadow-2: 0 14px 32px -16px rgba(31, 36, 41, .28);
	--fx-shadow-3: 0 34px 70px -28px rgba(31, 36, 41, .45);
	--fx-gutter: clamp(16px, 4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
/* radice a 14px come il sito (sfogliami.css): i rem della parte sotto sono 1/8 più piccoli dei 16px di
   partenza; lo sfogliatore sopra è in px e non cambia */
html { font-size: 87.5%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.fx {
	margin: 0;
	font-family: var(--fx-font);
	font-size: 16px;
	font-weight: 450;
	line-height: 1.5;
	color: var(--fx-text);
	background: var(--fx-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; }
img { max-width: 100%; }

.fx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.fx-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.fx-ico {
	width: 20px; height: 20px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.fx-ico--small { width: 14px; height: 14px; vertical-align: -2px; }
/* icone piene (social del piede) */
.fx-ico--fill { fill: currentColor; stroke: none; }

/* testi tradotti che arrivano con le classi di Bootstrap */
.font-weight-bold { font-weight: 800; }


/* ==========================================================================
   Palco dello sfogliabile
   ========================================================================== */
.fx-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100svh;
	min-height: 320px;
	overflow: hidden;
	overflow: clip; 	/* dove c'è, non scorre al suo interno */
	isolation: isolate;
	color: #fff;
	background: var(--fx-stage-color, #2b2f36);
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}
.fx-stage:fullscreen { height: 100%; }
.fx-stage:-webkit-full-screen { height: 100%; width: 100%; }
/* sotto c'è la parte con i dettagli: il suo bordo spunta in fondo allo schermo (.fx-peek), sopra lo spazio
   lasciato dallo sfogliatore */
.fx-stage--peek { --fx-peek: 26px; padding-bottom: var(--fx-peek); }
.fx-stage--peek.is-fullscreen { --fx-peek: 0px; }

.fx-stage__bg {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	background-image: var(--fx-bg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
/* telefono in verticale: la striscia centrale dello sfondo, se c'è (il browser scarica solo quella) */
@media (orientation: portrait) and (max-width: 760px) {
	.fx-stage__bg { background-image: var(--fx-bg-v, var(--fx-bg)); }
}
.fx-stage__bg::after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, .5));
}

.fx-stage :focus { outline: none; }
.fx-stage :focus-visible { outline: 2px solid var(--fx-accent); outline-offset: 2px; }

/* ---------- barra in alto ---------- */
.fx-top {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 58px;
	padding: 8px max(18px, env(safe-area-inset-right)) 2px max(18px, env(safe-area-inset-left));
}
.fx-brand { flex: none; display: block; height: 36px; opacity: .92; transition: opacity .2s; }
.fx-brand:hover { opacity: 1; }
.fx-brand img { display: block; width: auto; height: 100%; }
.fx-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font: 700 15px/1.3 var(--fx-font);
	color: rgba(255, 255, 255, .94);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.fx-embedded .fx-title { visibility: hidden; }
/* dentro un altro sito: pulsante per aprire la pagina intera */
.fx-btn.fx-open { display: none; margin-left: auto; color: #fff; }
.fx-embedded .fx-btn.fx-open { display: inline-flex; }

/* il pulsante fisso del banner dei cookie copriva la barra dei comandi: le scelte si cambiano dal
   menu "..." e dal piede ("Preferenze privacy") */
.qc-cmp2-persistent-link { display: none !important; }

.fx-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px 0 14px;
	border: 0;
	border-radius: 999px;
	font: 800 14px/1 var(--fx-font);
	white-space: nowrap;
	cursor: pointer;
	transition: transform .15s, background-color .15s;
}
.fx-chip--buy {
	color: var(--fx-on-accent);
	background: var(--fx-accent);
	box-shadow: inset 0 0 0 1.5px var(--fx-accent-edge), 0 6px 18px rgba(0, 0, 0, .3);
}
.fx-chip--buy .fx-ico { width: 18px; height: 18px; }
.fx-chip:hover { transform: translateY(-1px); }
.fx-chip--buy:hover { background: var(--fx-accent-strong); }
/* PRO: il link al sito del cliente */
.fx-chip--link {
	min-width: 0;
	max-width: 40%;
	color: #fff;
	background: rgba(31, 36, 41, .55);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-weight: 700;
	text-decoration: none;
}
.fx-chip--link:hover { background: rgba(31, 36, 41, .85); }
.fx-chip--link .fx-ico { width: 17px; height: 17px; }
.fx-chip--link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fx-top__share { color: #fff; }

/* ---------- area del libro ---------- */
.fx-main {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}
.fx-book-area { position: relative; flex: 1 1 auto; min-width: 0; }
.fx-book-wrap {
	position: absolute;
	top: 6px; bottom: 10px;
	left: 76px; right: 76px;
}
/* sul libro il browser scorre la pagina solo in verticale: una passata di lato è una sfogliata (vedi flip_new.js) */
.fx-book { width: 100%; height: 100%; opacity: 0; transition: opacity .45s ease; touch-action: pan-y; }
.is-ready .fx-book { opacity: 1; }
.fx-book .stf__block { transition: transform .6s var(--fx-ease); }
.fx-book.fx-noanim .stf__block { transition: none; }

.fx-book-shadow {
	position: absolute;
	pointer-events: none;
	border-radius: 2px;
	box-shadow: 0 26px 60px -14px rgba(0, 0, 0, .6), 0 6px 18px rgba(0, 0, 0, .28);
	transition: transform .6s var(--fx-ease), left .45s var(--fx-ease), width .45s var(--fx-ease);
}
/* mentre la pagina gira l'ombra segue la carta fotogramma per fotogramma */
.fx-book.fx-flipping .fx-book-shadow { transition: transform .6s var(--fx-ease); }
.fx-book.fx-noanim .fx-book-shadow { transition: none; }

.fx-spinner {
	position: absolute;
	top: 50%; left: 50%;
	width: 44px; height: 44px;
	margin: -22px 0 0 -22px;
	border: 3px solid rgba(255, 255, 255, .22);
	border-top-color: var(--fx-accent);
	border-radius: 50%;
	animation: fx-spin .8s linear infinite;
}
.is-ready .fx-spinner { display: none; }
@keyframes fx-spin { to { transform: rotate(360deg); } }

.fx-empty, .fx-noscript {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	max-height: 100%;
}
.fx-empty {
	max-width: 420px;
	padding: 20px 24px;
	border-radius: var(--fx-radius);
	background: var(--fx-glass-strong);
	font-weight: 600;
	text-align: center;
}

/* ---------- pagine ---------- */
.fx-page { background: #fff; overflow: hidden; }
.fx-page::before {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(100deg, #eceef1 30%, #f8f9fa 50%, #eceef1 70%);
	background-size: 300% 100%;
	animation: fx-shimmer 1.4s ease-in-out infinite;
}
.fx-page.is-loaded::before, .fx-page--sale::before, .fx-page--back::before { content: none; }
.fx-page.is-error::before { animation: none; background: #eceef1; }
@keyframes fx-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.fx-page__img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	display: block;
	object-fit: fill;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
	-webkit-user-drag: none;
}
.fx-page.is-loaded .fx-page__img { opacity: 1; }

/* piega al centro del libro */
.fx-page::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	z-index: 1;
	width: 8%;
	pointer-events: none;
}
.fx-page.--left::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .17), rgba(0, 0, 0, 0)); }
.fx-page.--right::after { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .17), rgba(0, 0, 0, 0)); }
.stf__wrapper.--portrait .fx-page::after { opacity: .45; }

/* aree cliccabili */
.fx-regions { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
.fx-region {
	position: absolute;
	display: block;
	border-radius: 6px;
	background: var(--fx-accent);
	opacity: 0;
	transition: opacity .2s;
	cursor: pointer;
}
.fx-region:hover, .fx-region:focus-visible { opacity: .38; }
.fx-region--zoom:hover { opacity: .18; }
.fx-show-regions .fx-region { opacity: .32; }
.fx-regions--hint .fx-region { animation: fx-hint 1.8s ease-out; }
@keyframes fx-hint { 0%, 100% { opacity: 0; } 25%, 55% { opacity: .36; } }

/* pagina finale degli sfogliabili in vendita */
.fx-page--sale { background: linear-gradient(160deg, #fff 0%, #E6F7F9 100%); }
.fx-salepage {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10%;
	text-align: center;
	color: var(--fx-ink);
	font-size: 16px;
	font-size: calc(var(--fx-pw, 400px) * .045);
}
.fx-salepage__icon { width: 20%; height: auto; margin-bottom: 6%; color: var(--fx-petrol); stroke-width: 1.6; }
.fx-salepage__title { margin: 0 0 .4em; font: 800 1.5em/1.2 var(--fx-font); letter-spacing: -.01em; }
.fx-salepage__price { margin: 0 0 1.4em; font-size: 1.2em; font-weight: 800; color: var(--fx-petrol-ink); }
.fx-salepage .fx-button { min-height: 0; padding: .8em 1.4em; font-size: .9em; border-width: 0; }
.fx-page button *, .fx-page a * { pointer-events: none; }

/* frecce laterali */
.fx-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px; height: 50px;
	margin-top: -25px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: var(--fx-glass);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .06);
	cursor: pointer;
	transition: opacity .2s, transform .2s, background .2s;
}
.fx-arrow .fx-ico { width: 26px; height: 26px; }
.fx-arrow--prev { left: 14px; }
.fx-arrow--next { right: 14px; }
.fx-arrow:hover { background: rgba(31, 36, 41, .94); transform: scale(1.06); }
.fx-arrow:disabled { opacity: 0; pointer-events: none; }

/* ---------- barra dei comandi ---------- */
.fx-bar-wrap {
	position: relative;
	z-index: 4;
	display: flex;
	justify-content: center;
	padding: 4px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.fx-bar {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
	max-width: 100%;
	padding: 6px;
	border-radius: 18px;
	background: var(--fx-glass);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.fx-bar__sep { flex: none; width: 1px; height: 22px; margin: 0 4px; background: rgba(255, 255, 255, .15); }

.fx-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	color: inherit;
	background: transparent;
	cursor: pointer;
	transition: background .15s, opacity .15s;
}
.fx-btn:hover { background: rgba(255, 255, 255, .12); }
.fx-btn:active { background: rgba(255, 255, 255, .2); }
.fx-btn:disabled { opacity: .32; cursor: default; background: transparent; }
.fx-btn[aria-expanded="true"], .fx-btn.is-active { background: rgba(255, 255, 255, .16); }

.fx-pageinfo {
	flex: none;
	min-width: 86px;
	height: 40px;
	padding: 0 8px;
	border: 0;
	border-radius: 12px;
	color: inherit;
	background: transparent;
	font: 700 14px/1 var(--fx-font);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	cursor: pointer;
}
.fx-pageinfo:hover { background: rgba(255, 255, 255, .12); }
.fx-pageinfo__tot { margin-left: 5px; color: var(--fx-ink-soft); font-weight: 500; }

.fx-textbtn {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 40px;
	margin-left: 4px;
	padding: 0 12px 0 16px;
	border: 0;
	border-radius: 999px;
	color: inherit;
	background: rgba(255, 255, 255, .1);
	font: 700 14px/1 var(--fx-font);
	cursor: pointer;
}
.fx-textbtn:hover { background: rgba(255, 255, 255, .18); }
.fx-textbtn .fx-ico { width: 18px; height: 18px; }

/* barra di scorrimento con anteprima */
.fx-scrub {
	position: relative;
	flex: 1 1 320px;
	min-width: 140px;
	max-width: 520px;
	margin: 0 10px;
	display: flex;
	align-items: center;
}
.fx-scrub__range {
	--fx-progress: 0%;
	width: 100%;
	height: 30px;
	margin: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.fx-scrub__range::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(to right, var(--fx-accent) var(--fx-progress), rgba(255, 255, 255, .24) var(--fx-progress));
}
.fx-scrub__range::-webkit-slider-thumb {
	width: 16px; height: 16px;
	margin-top: -6px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .45);
	-webkit-appearance: none;
	appearance: none;
	transition: transform .15s;
}
.fx-scrub__range:active::-webkit-slider-thumb { transform: scale(1.2); }
.fx-scrub__range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .24); }
.fx-scrub__range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--fx-accent); }
.fx-scrub__range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .45); }
.fx-scrub__tip {
	position: absolute;
	bottom: 38px;
	left: 0;
	transform: translateX(-50%);
	padding: 6px;
	border-radius: 12px;
	background: var(--fx-glass-strong);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
	text-align: center;
	pointer-events: none;
}
.fx-scrub__thumbs { display: flex; justify-content: center; }
.fx-scrub__thumbs .fx-thumbbox { width: 64px; }
.fx-scrub__num { display: block; padding: 4px 4px 0; font: 700 12px/1.2 var(--fx-font); font-variant-numeric: tabular-nums; }

/* ---------- pannello indice/miniature ---------- */
.fx-backdrop {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 9;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .25s;
}
.fx-backdrop.is-open { opacity: 1; }

.fx-panel {
	position: absolute;
	z-index: 10;
	top: 0; bottom: 0; left: 0;
	width: 380px;
	max-width: 92%;
	display: flex;
	flex-direction: column;
	background: var(--fx-glass-strong);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 12px 0 40px rgba(0, 0, 0, .4);
	transform: translateX(-104%);
	transition: transform .32s var(--fx-ease);
}
.fx-panel.is-open { transform: none; }
.fx-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: max(12px, env(safe-area-inset-top)) 12px 8px max(16px, env(safe-area-inset-left));
}
.fx-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
.fx-tab {
	height: 34px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	color: var(--fx-ink-soft);
	background: transparent;
	font: 700 14px/1 var(--fx-font);
	cursor: pointer;
	transition: background .15s, color .15s;
}
.fx-tab:hover { color: #fff; }
.fx-tab.is-active { color: #fff; background: rgba(255, 255, 255, .15); }

.fx-goto {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px 14px max(16px, env(safe-area-inset-left));
	border-bottom: 1px solid var(--fx-line);
	font-size: 13px;
	color: var(--fx-ink-soft);
}
.fx-goto label { flex: 1; }
.fx-goto input {
	width: 76px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 10px;
	color: #fff;
	background: rgba(255, 255, 255, .08);
	font: 700 16px/1 var(--fx-font);
	-moz-appearance: textfield;
}
.fx-goto input::-webkit-inner-spin-button, .fx-goto input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fx-goto .fx-button--small { min-height: 36px; padding: 0 16px; font-size: 14px; }

.fx-panel__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 10px 12px max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
	-webkit-user-select: text;
	user-select: text;
}

.fx-toc { margin: 0; padding: 0; list-style: none; }
.fx-toc a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 11px 12px;
	border-radius: 12px;
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	line-height: 1.35;
	transition: background .15s;
}
.fx-toc a:hover { background: rgba(255, 255, 255, .08); }
.fx-toc a.is-current { background: rgba(50, 197, 210, .24); }
.fx-toc a.is-locked { color: rgba(255, 255, 255, .45); }
.fx-toc__name { flex: 1 1 auto; }
.fx-toc__num { flex: none; color: var(--fx-ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }

.fx-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 18px 12px; padding: 6px 4px; }
.fx-thumb {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 7px;
	padding: 0;
	border: 0;
	color: var(--fx-ink-soft);
	background: none;
	font: 700 12px/1 var(--fx-font);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}
.fx-thumb:hover { color: #fff; }
.fx-thumb.is-current { color: #fff; }
.fx-thumbbox {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: var(--fx-thumb-ratio, 141%);
	overflow: hidden;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, .1);
	background-repeat: no-repeat;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	transition: transform .15s, box-shadow .15s;
}
.fx-thumb .fx-thumbbox { outline: 2px solid transparent; outline-offset: 2px; }
.fx-thumb:hover .fx-thumbbox { transform: translateY(-2px); }
.fx-thumb.is-current .fx-thumbbox { outline-color: var(--fx-accent); }
.fx-thumbbox img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.fx-thumbbox--sale { background: linear-gradient(160deg, #fff, #E6F7F9); }
.fx-thumbbox--sale .fx-ico { position: absolute; top: 50%; left: 50%; width: 40%; height: 40%; transform: translate(-50%, -50%); color: var(--fx-petrol); }

/* ---------- menu e condivisione ---------- */
.fx-menu {
	position: absolute;
	z-index: 10;
	right: 16px;
	bottom: 80px;
	min-width: 270px;
	max-width: calc(100% - 24px);
	max-height: calc(100% - 96px);
	overflow-y: auto;
	padding: 6px;
	border-radius: 18px;
	background: var(--fx-glass-strong);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .07);
	opacity: 0;
	transform: translateY(8px) scale(.98);
	transform-origin: 50% 100%;
	transition: opacity .18s, transform .18s var(--fx-ease);
}
.fx-menu.is-open { opacity: 1; transform: none; }
.fx-menu__item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 0;
	border-radius: 12px;
	color: #fff;
	background: transparent;
	font: 600 15px/1.25 var(--fx-font);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s;
}
.fx-menu__item:hover { background: rgba(255, 255, 255, .1); }
.fx-menu__item .fx-ico { color: var(--fx-ink-soft); }
.fx-menu__item[aria-checked="true"], .fx-menu__item[aria-checked="true"] .fx-ico { color: var(--fx-accent); }
.fx-menu__langs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	margin-top: 4px;
	padding: 8px 6px 4px 12px;
	border-top: 1px solid var(--fx-line);
	color: var(--fx-ink-soft);
}
.fx-menu__langs .fx-ico { margin-right: 8px; }
.fx-lang {
	padding: 8px 9px;
	border-radius: 8px;
	color: #fff;
	text-decoration: none;
	font: 800 13px/1 var(--fx-font);
	letter-spacing: .04em;
}
.fx-lang:hover { background: rgba(255, 255, 255, .12); }

.fx-share { width: 340px; padding: 14px; }
.fx-share__label { margin: 0 0 8px; font-size: 13px; color: var(--fx-ink-soft); }
.fx-share__copy { display: flex; gap: 6px; }
.fx-share__copy input {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 12px;
	color: #fff;
	background: rgba(255, 255, 255, .07);
	font: 400 14px/1 var(--fx-font);
	-webkit-user-select: text;
	user-select: text;
}
.fx-share__copy .fx-btn { color: var(--fx-on-accent); background: var(--fx-accent); }
.fx-share__copy .fx-btn:hover { background: var(--fx-accent-strong); }
.fx-share__page { display: flex; align-items: center; gap: 10px; margin: 12px 2px 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.fx-share__page input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--fx-accent); }
.fx-share__social { display: flex; justify-content: space-between; gap: 6px; margin-top: 14px; }
.fx-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	color: #fff;
	background: rgba(255, 255, 255, .1);
	transition: background .15s, transform .15s, color .15s;
}
.fx-social:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }

.fx-toast {
	position: absolute;
	z-index: 30;
	left: 50%;
	bottom: 86px;
	max-width: 480px;
	width: calc(100% - 32px);
	padding: 12px 16px;
	border-radius: 16px;
	color: #fff;
	background: var(--fx-glass-strong);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
	font-size: 14px;
	text-align: center;
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity .2s, transform .2s;
	pointer-events: none;
}
.fx-toast.is-open { opacity: 1; transform: translate(-50%, 0); }

/* "Riprendi da pagina N" all'apertura */
.fx-resume {
	position: absolute;
	z-index: 8;
	left: 50%;
	bottom: 86px;
	display: flex;
	align-items: center;
	gap: 2px;
	max-width: calc(100% - 24px);
	padding: 5px;
	border-radius: 999px;
	background: var(--fx-glass-strong);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .08);
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity .2s, transform .25s var(--fx-ease), bottom .3s var(--fx-ease);
}
.fx-resume.is-open { opacity: 1; transform: translate(-50%, 0); }
.fx-resume__go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	height: 42px;
	padding: 0 18px 0 14px;
	border: 0;
	border-radius: 999px;
	color: var(--fx-on-accent);
	background: var(--fx-accent);
	box-shadow: inset 0 0 0 1.5px var(--fx-accent-edge);
	font: 800 15px/1 var(--fx-font);
	white-space: nowrap;
	cursor: pointer;
}
.fx-resume__go:hover { background: var(--fx-accent-strong); }
.fx-resume__go span { overflow: hidden; text-overflow: ellipsis; }
.fx-resume__close { width: 38px; height: 38px; border-radius: 999px; color: #fff; }

/* ---------- zoom ---------- */
.fx-zoom {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 20;
	background: #16191d;
	opacity: 0;
	transition: opacity .2s;
}
.fx-zoom.is-open { opacity: 1; }
.fx-zoom__viewport {
	position: absolute;
	top: 0; right: 0; left: 0;
	bottom: calc(72px + env(safe-area-inset-bottom));
	overflow: hidden;
	touch-action: none;
	cursor: grab;
}
.fx-zoom__viewport.is-dragging { cursor: grabbing; }
.fx-zoom__content { position: absolute; top: 0; left: 0; display: flex; transform-origin: 0 0; }
.fx-zoom__content.is-moving { will-change: transform; }
/* fine del pizzico o del trascinamento: torna nei limiti */
.fx-zoom__content.is-settling { transition: transform .26s var(--fx-ease); }
.fx-zoom__page { position: relative; flex: none; overflow: hidden; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.fx-zoom__page img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.fx-zoom__bar {
	position: absolute;
	left: 50%;
	bottom: max(12px, env(safe-area-inset-bottom));
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 6px;
	border-radius: 18px;
	background: var(--fx-glass);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .06);
}


/* ---------- adattamento agli schermi ---------- */
@media (max-width: 1099px) {
	.fx-textbtn.fx-only-xwide { display: none; }
}
@media (max-width: 759px) {
	.fx-arrow { display: none; }
	.fx-book-wrap { left: 10px; right: 10px; }
	.fx-scrub { display: none; }
}
@media (min-width: 640px) {
	.fx-only-narrow { display: none !important; }
}
@media (max-width: 639px) {
	.fx-only-wide { display: none !important; }
	.fx-top { gap: 10px; min-height: 52px; padding-top: 6px; }
	.fx-brand { height: 30px; }
	.fx-title { font-size: 14px; }
	.fx-chip { height: 36px; padding: 0 14px 0 12px; font-size: 13px; }
	.fx-bar-wrap { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
	.fx-bar { width: 100%; justify-content: space-between; }
	.fx-pageinfo { flex: 1 1 auto; }

	.fx-panel {
		top: auto; right: 0;
		width: auto; max-width: none;
		height: 78%;
		border-radius: 22px 22px 0 0;
		box-shadow: 0 -12px 40px rgba(0, 0, 0, .4);
		transform: translateY(104%);
	}
	.fx-panel__head { padding-top: 12px; }
	.fx-menu, .fx-share {
		left: 8px !important; right: 8px !important;
		bottom: 70px !important;
		width: auto;
		min-width: 0;
		max-width: none;
	}
	.fx-zoom__bar { width: calc(100% - 16px); justify-content: space-between; }
	.fx-resume { bottom: 74px; }
	.fx-chip--link { height: 36px; padding: 0 12px 0 10px; }
}
@media (max-height: 520px) {
	.fx-top { display: none; }
	.fx-book-wrap { top: 8px; bottom: 6px; }
	.fx-bar-wrap { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
	.fx-bar { padding: 4px; }
	.fx-btn, .fx-pageinfo { height: 36px; }
	.fx-menu, .fx-share { bottom: 58px; }
	.fx-resume { bottom: 64px; }
}

/* ---------- telefono, anche girato: barre a scomparsa ----------
   Le barre stanno sopra il libro, che così usa tutto lo schermo; con .is-immersive (flip_new.js) escono
   di lato e lasciano passare i tocchi. Sul computer e sui tablet le barre restano dove sono. */
@media (pointer: coarse) and (max-width: 599px), (pointer: coarse) and (max-height: 599px) {
	.fx-top {
		display: flex;
		position: absolute;
		top: 0; left: 0; right: 0;
		padding-top: max(8px, env(safe-area-inset-top));
		padding-bottom: 8px;
		background: linear-gradient(to bottom, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
	}
	.fx-bar-wrap { position: absolute; left: 0; right: 0; bottom: 0; }
	.fx-top, .fx-bar-wrap { transition: opacity .25s ease, transform .32s var(--fx-ease); }
	.fx-stage.is-immersive .fx-top { opacity: 0; transform: translateY(-100%); pointer-events: none; }
	.fx-stage.is-immersive .fx-bar-wrap { opacity: 0; transform: translateY(100%); pointer-events: none; }
	.fx-stage.is-immersive .fx-arrow { opacity: 0; pointer-events: none; }
	.fx-book-wrap { top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom)); }
	.fx-stage.is-immersive .fx-toast, .fx-stage.is-immersive .fx-resume { bottom: max(18px, env(safe-area-inset-bottom)); }
	/* con il bordo della parte sotto in fondo allo schermo, barra e libro stanno sopra quello */
	.fx-stage--peek .fx-bar-wrap { bottom: var(--fx-peek); padding-bottom: 8px; }
	.fx-stage--peek .fx-book-wrap { bottom: calc(var(--fx-peek) + 8px); }
	.fx-stage--peek.is-immersive .fx-toast, .fx-stage--peek.is-immersive .fx-resume { bottom: calc(var(--fx-peek) + 18px); }
}
@media (prefers-reduced-motion: reduce) {
	.fx-stage *, .fx-stage *::before, .fx-stage *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.fx-page::before { animation: none; }
}

/* banner a fianco dello sfogliabile: solo se resta spazio per il libro (come prima, sui
   tablet in verticale finivano dietro alle pagine) */
.fx-adcol {
	flex: 0 0 300px;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 8px 12px 12px 0;
	overflow-y: auto;
	scrollbar-width: none;
}
.fx-adcol::-webkit-scrollbar { display: none; }
@media (min-width: 1200px) {
	.fx-adcol { display: flex; }
}

/* sfogliabile ancora in conversione */
.fx-stage--empty .fx-bar-wrap, .fx-stage--empty .fx-arrow, .fx-stage--empty .fx-spinner { display: none; }


/* ==========================================================================
   Pagina della password
   ========================================================================== */
.fx-stage--lock { align-items: center; justify-content: center; padding: 24px; }
.fx-lock {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: 400px;
	padding: 32px 28px;
	border-radius: var(--fx-radius-lg);
	text-align: center;
	background: var(--fx-glass-strong);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .07);
	-webkit-user-select: text;
	user-select: text;
}
.fx-lock__cover { display: block; max-width: 140px; max-height: 190px; border-radius: 3px; box-shadow: 0 14px 32px rgba(0, 0, 0, .55); }
.fx-lock__title { margin: 0; font: 800 22px/1.25 var(--fx-font); letter-spacing: -.01em; }
.fx-lock__field { display: flex; gap: 8px; width: 100%; }
.fx-lock__field input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 16px;
	border: 2px solid rgba(255, 255, 255, .22);
	border-radius: 12px;
	color: #fff;
	background: rgba(255, 255, 255, .08);
	font: 450 16px/1 var(--fx-font);
}
.fx-lock__field input:focus { outline: none; border-color: var(--fx-accent); box-shadow: 0 0 0 3px rgba(50, 197, 210, .3); }
.fx-lock__field .fx-button { min-height: 52px; font-size: 16px; }
.fx-lock__error { margin: 0; color: #ffb3ab; font-weight: 700; }


/* ==========================================================================
   Sotto lo sfogliabile: il minisito della pubblicazione, come le pagine nuove del sito.
   I testi sono in rem, come nel sito
   ========================================================================== */
.fx-below { position: relative; background: var(--fx-bg); font-size: 1.125rem; line-height: 1.6; }
.fx-below :focus-visible { outline: 3px solid var(--fx-ink); outline-offset: 3px; border-radius: 6px; }

/* il bordo della parte sotto che spunta in fondo allo sfogliatore: toccandolo si va ai dettagli */
.fx-peek {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 26px;
	margin: -26px 0 0;
	padding: 0;
	border: 0;
	border-radius: 22px 22px 0 0;
	color: var(--fx-muted);
	background: var(--fx-bg);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, .22);
	cursor: pointer;
}
.fx-peek .fx-ico { width: 22px; height: 22px; stroke-width: 2.5; transition: transform .2s var(--fx-ease); }
.fx-peek:hover .fx-ico { transform: translateY(2px); }
.fx-peek:focus-visible { outline-offset: -4px; border-radius: 22px 22px 0 0; }
.fx-container { width: 100%; max-width: calc(1200px + 2 * var(--fx-gutter)); margin: 0 auto; padding: 0 var(--fx-gutter); }

.fx-section { padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0; scroll-margin-top: 40px; }
.fx-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.fx-section__title {
	margin: 0;
	font: 750 clamp(1.875rem, 1.35rem + 1.9vw, 2.75rem)/1.1 var(--fx-font);
	letter-spacing: -.017em;
	text-wrap: balance;
}
.fx-section__foot { display: flex; justify-content: center; margin-top: 2.5rem; }

.fx-eyebrow {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem;
	color: var(--fx-petrol);
	font: 700 1rem/1.3 var(--fx-font);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.fx-eyebrow a { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.fx-eyebrow a:hover { text-decoration: underline; text-underline-offset: .18em; }
.fx-eyebrow .fx-ico { width: 1.1em; height: 1.1em; }

/* comparsa dei blocchi scorrendo (la classe fx-js la mette flip_new.js) */
.fx-js .fx-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--fx-ease), transform .7s var(--fx-ease);
	transition-delay: calc(var(--fx-i, 0) * 70ms);
}
.fx-js .fx-reveal.is-in { opacity: 1; transform: none; }


/* ---------- menu che compare scorrendo ---------- */
.fx-subnav {
	position: fixed;
	z-index: 40;
	top: 0; left: 0; right: 0;
	padding-top: env(safe-area-inset-top);
	background: var(--fx-glass-light);
	-webkit-backdrop-filter: blur(12px) saturate(1.6);
	backdrop-filter: blur(12px) saturate(1.6);
	box-shadow: 0 1px 0 var(--fx-border);
	color: var(--fx-text);
	visibility: hidden;
	transform: translateY(-105%);
	transition: transform .35s var(--fx-ease), visibility 0s linear .35s;
}
.fx-subnav.is-visible { visibility: visible; transform: none; transition: transform .35s var(--fx-ease); }
.fx-subnav__inner { display: flex; align-items: center; gap: 18px; height: 64px; }
.fx-subnav__book {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 0;
	border: 0;
	color: inherit;
	background: none;
	font: 700 1.0625rem/1.25 var(--fx-font);
	text-align: left;
	cursor: pointer;
}
.fx-subnav__book img { flex: none; width: auto; height: 40px; border-radius: 2px; box-shadow: 0 2px 8px rgba(31, 36, 41, .25); }
.fx-subnav__book span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-subnav__links { display: flex; gap: 2px; }
.fx-subnav__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .5rem .8rem;
	border-radius: 999px;
	color: var(--fx-text-2);
	text-decoration: none;
	font: 700 1.0625rem/1 var(--fx-font);
	white-space: nowrap;
	transition: color .15s, background .15s;
}
.fx-subnav__links a:hover { color: var(--fx-text); background: var(--fx-surface-2); }
.fx-subnav__links a.is-current { color: var(--fx-petrol-ink); background: var(--fx-tint); }
.fx-subnav .fx-button { flex: none; }


/* ---------- presentazione ---------- */
/* lo sfondo sfocato non deve uscire dal riquadro: se sporge, overflow hidden lo fa scorrere al suo
   interno quando si va al riquadro di acquisto (scrollIntoView) e resta una fascia scoperta. Dove c'è, clip taglia
   senza farne un riquadro che scorre: serve anche alla copertina che gira con lo scorrimento (sotto .fx-book3d) */
.fx-hero { position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: clamp(3.5rem, 2rem + 5vw, 6rem) 0 clamp(3rem, 2rem + 4vw, 4.75rem); }
.fx-hero__ambient {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -2;
	background-position: center;
	background-size: cover;
	filter: blur(70px) saturate(1.4);
	opacity: .5;
}
.fx-hero::before {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	background: linear-gradient(180deg, var(--fx-veil) 0%, var(--fx-veil-strong) 60%, var(--fx-bg) 100%);
}
.fx-hero__grid { display: grid; grid-template-columns: minmax(220px, 400px) minmax(0, 1fr); gap: clamp(3rem, 1rem + 5vw, 4.75rem); align-items: center; }
/* sfogliabile ancora in conversione: la copertina non c'è ancora */
.fx-hero--nocover .fx-hero__grid { grid-template-columns: minmax(0, 1fr); }
.fx-hero--nocover .fx-hero__visual, .fx-hero--nocover .fx-hero__ambient { display: none; }
.fx-hero__visual { display: flex; justify-content: center; padding: 10px 26px 10px 0; perspective: 1600px; }

/* copertina in 3D, con lo spessore delle pagine sul lato destro */
.fx-book3d {
	position: relative;
	display: block;
	width: 100%;
	max-width: 330px;
	padding: 0;
	border: 0;
	border-radius: 2px 5px 5px 2px;
	background: #fff;
	cursor: pointer;
	transform: rotateY(-24deg) rotateX(5deg);
	transform-style: preserve-3d;
	box-shadow: 26px 30px 50px -18px rgba(31, 36, 41, .55), 6px 8px 18px rgba(31, 36, 41, .2);
	transition: transform .7s var(--fx-ease), box-shadow .7s var(--fx-ease);
}
.fx-book3d--wide { max-width: 440px; }
.fx-book3d img { display: block; width: 100%; height: auto; border-radius: inherit; -webkit-user-drag: none; }
.fx-book3d::before {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 1;
	border-radius: inherit;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .25) 0, rgba(255, 255, 255, .3) 1%, rgba(255, 255, 255, 0) 3%, rgba(0, 0, 0, .1) 4.5%, rgba(0, 0, 0, 0) 9%),
		linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 38%);
}
.fx-book3d::after {
	content: "";
	position: absolute;
	top: 1.2%; bottom: 1.2%; left: 100%;
	width: var(--fx-thick, 10px);
	transform-origin: 0 50%;
	transform: rotateY(90deg);
	background: repeating-linear-gradient(90deg, #fbfaf6 0, #fbfaf6 1px, #ddd8cc 1px, #ddd8cc 2px);
	box-shadow: inset 0 0 4px rgba(0, 0, 0, .25);
}
.fx-book3d:hover, .fx-book3d:focus-visible {
	transform: rotateY(-12deg) rotateX(3deg) translateY(-6px);
	box-shadow: 30px 40px 60px -20px rgba(31, 36, 41, .55), 6px 10px 22px rgba(31, 36, 41, .2);
}
/* telefono e tablet, che non hanno il mouse sopra: la copertina si gira verso chi legge mentre attraversa lo schermo,
   seguendo lo scorrimento (animazione legata alla vista, senza JavaScript); dove il browser non la conosce resta ferma.
   Entra quasi di taglio e inclinata all'indietro, a metà schermo guarda chi legge, uscendo si gira di nuovo e si
   inclina in avanti, come su un rullo; prospettiva più vicina perché si veda bene (il 29/10 era appena percettibile).
   Gli antenati non devono essere riquadri che scorrono (overflow: clip in .fx-hero), sennò la vista è la loro */
@keyframes fx-book3d-scorre {
	0% { transform: rotateY(-72deg) rotateX(16deg) translateY(36px) scale(.9); }
	50% { transform: rotateY(-2deg) rotateX(0deg) translateY(-8px) scale(1.03); }
	100% { transform: rotateY(-50deg) rotateX(-10deg) translateY(0) scale(.94); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.fx-hero__visual { perspective: 1000px; }
		.fx-book3d { animation: fx-book3d-scorre linear both; animation-timeline: view(); }
	}
}

.fx-hero__title {
	margin: 0 0 1.25rem;
	font: 800 clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem)/1.05 var(--fx-font);
	letter-spacing: -.021em;
	overflow-wrap: anywhere;
	text-wrap: balance;
}
.fx-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.fx-facts li {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .3rem .85rem;
	border-radius: 999px;
	background: var(--fx-surface-3);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}
.fx-facts .fx-ico { width: 1.1em; height: 1.1em; color: var(--fx-petrol); }
.fx-hero__desc { max-width: 64ch; margin: 0 0 .6rem; line-height: 1.65; overflow-wrap: anywhere; }
.fx-hero__desc.is-clamped {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
}
.fx-hero__desc a { color: var(--fx-petrol); font-weight: 700; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; overflow-wrap: anywhere; }
.fx-hero__desc a:hover { color: var(--fx-petrol-ink); text-decoration-thickness: .14em; }
.fx-desc-toggle { margin: 0 0 1.1rem; }
.fx-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.fx-tags li { padding: .3rem .85rem; border-radius: 999px; color: var(--fx-petrol-ink); background: var(--fx-tint); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.fx-tags li::before { content: "#"; margin-right: 1px; opacity: .6; }
.fx-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.fx-sharebar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.1rem;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--fx-border);
}
.fx-sharebar__label { color: var(--fx-muted); font: 700 1rem/1 var(--fx-font); letter-spacing: .08em; text-transform: uppercase; }
.fx-sharebar__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.fx-below .fx-social {
	padding: 0;
	border: 0;
	width: 48px; height: 48px;
	color: var(--fx-ink);
	background: var(--fx-surface-2);
	box-shadow: inset 0 0 0 1px var(--fx-border);
	cursor: pointer;
}
.fx-below .fx-social:hover { color: var(--fx-on-accent); background: var(--fx-accent); box-shadow: none; }
.fx-below .fx-social .fx-ico { width: 20px; height: 20px; }


/* ---------- pulsanti: a pillola, come nel sito ---------- */
.fx-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 2.875rem;
	padding: .6rem 1.35rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font: 800 1.0625rem/1.2 var(--fx-font);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s var(--fx-ease), border-color .15s var(--fx-ease), color .15s var(--fx-ease), transform .15s var(--fx-ease), box-shadow .15s var(--fx-ease);
}
.fx-button:hover { transform: translateY(-1px); }
.fx-button:active { transform: none; }
.fx-button .fx-ico { width: 1.3em; height: 1.3em; }
/* turchese con il testo scuro e il bordo appena più scuro; anche "Acquista" */
.fx-button--primary, .fx-button--buy { color: var(--fx-on-accent); background: var(--fx-accent); box-shadow: inset 0 0 0 1.5px var(--fx-accent-edge); }
.fx-button--primary:hover, .fx-button--buy:hover { background: var(--fx-accent-strong); }
.fx-button--ghost { color: var(--fx-ink); background: #fff; border-color: var(--fx-ink); }
.fx-button--ghost:hover { background: var(--fx-surface-2); }
.fx-button--block { width: 100%; }
.fx-button--small { min-height: 2.375rem; padding: .4rem .95rem; font-size: 1rem; }
.fx-button--large { min-height: 3.375rem; padding: .8rem 1.75rem; font-size: 1.125rem; }
.fx-link {
	padding: 0;
	border: 0;
	color: var(--fx-petrol);
	background: none;
	font: 700 1rem/1.4 var(--fx-font);
	text-decoration: underline;
	text-decoration-thickness: .08em;
	text-underline-offset: .18em;
	cursor: pointer;
}
.fx-link:hover { color: var(--fx-petrol-ink); text-decoration-thickness: .14em; }
.fx-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	padding: 0;
	border: 2px solid var(--fx-ink);
	border-radius: 50%;
	color: var(--fx-ink);
	background: #fff;
	cursor: pointer;
	transition: background .15s, opacity .15s;
}
.fx-round:hover { background: var(--fx-surface-2); }
.fx-round:disabled { opacity: .3; cursor: default; background: #fff; }


/* ---------- acquisto ---------- */
.fx-buy {
	max-width: 600px;
	margin-top: 2.25rem;
	padding: clamp(1.25rem, .9rem + 1.2vw, 2rem);
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius);
	background: var(--fx-surface);
	box-shadow: var(--fx-shadow-2);
	scroll-margin-top: 90px;
}
.fx-buy__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin: 0 0 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--fx-border);
}
.fx-buy__badge { display: flex; align-items: center; gap: .5rem; margin: 0 0 .25rem; font: 800 1.25rem/1.3 var(--fx-font); }
.fx-buy__badge .fx-ico { width: 1.2em; height: 1.2em; color: var(--fx-sale); }
.fx-buy__done .fx-ico { width: 1.2em; height: 1.2em; color: var(--fx-success); stroke-width: 2.5; }
.fx-buy__price { margin: 0; font: 800 2.25rem/1 var(--fx-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-buy__form { display: grid; gap: .75rem; }
.fx-buy__text { margin: 0 0 1rem; line-height: 1.6; }
.fx-buy__form .fx-buy__text { margin: 0; }
.fx-buy__note { margin: 0; color: var(--fx-muted); font-size: 1rem; }
.fx-buy__done { display: flex; align-items: center; gap: .6rem; margin: 0 0 .25rem; font: 800 1.3rem/1.3 var(--fx-font); }
.fx-buy__forgot { justify-self: end; margin-top: -.25rem; color: var(--fx-petrol); font-size: 1rem; font-weight: 700; }
.fx-buy__badges { display: block; width: 100%; max-width: 300px; height: auto; margin-top: 1.4rem; }
.fx-input {
	width: 100%;
	min-height: 2.875rem;
	padding: .55rem .9rem;
	border: 2px solid var(--fx-border-strong);
	border-radius: 12px;
	color: var(--fx-text);
	background: #fff;
	font: 450 1.0625rem/1.4 var(--fx-font);
	transition: border-color .15s, box-shadow .15s;
}
.fx-input::placeholder { color: #6B707A; opacity: 1; }
.fx-input:hover { border-color: var(--fx-text-2); }
.fx-input:focus { outline: none; border-color: var(--fx-petrol); box-shadow: 0 0 0 4px var(--fx-tint-2); }
.fx-input--short { max-width: 130px; }
.fx-check { display: flex; align-items: center; gap: .75rem; font-weight: 700; cursor: pointer; }
.fx-check input { width: 1.5rem; height: 1.5rem; flex: none; accent-color: var(--fx-petrol); }
.fx-invoice { display: grid; gap: .6rem; }
.fx-invoice__row { display: flex; gap: .6rem; }
.fx-alert { margin: 0 0 .75rem; padding: 1rem 1.25rem; border: 2px solid #F2B8B2; border-radius: 16px; color: #7D1810; background: var(--fx-alert-bg); font-size: 1.0625rem; font-weight: 700; }
.fx-buy__form .fx-alert { margin: 0; }
.fx-coupon { margin-top: .9rem; }
.fx-coupon__form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.fx-coupon__form .fx-input { flex: 1 1 200px; width: auto; }
.fx-coupon__info { margin-top: .5rem; }


/* ---------- prime pagine ---------- */
.fx-section--previews { padding-top: clamp(2rem, 1rem + 2.5vw, 3.5rem); }
.fx-spreads { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.fx-spread {
	flex: 0 1 calc((100% - 60px) / 3);
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	color: var(--fx-text);
	text-decoration: none;
}
.fx-spread__book {
	position: relative;
	display: flex;
	border-radius: 3px;
	background: var(--fx-skeleton);
	box-shadow: 0 22px 40px -22px rgba(31, 36, 41, .55), 0 4px 12px rgba(31, 36, 41, .1);
	overflow: hidden;
	transition: transform .4s var(--fx-ease), box-shadow .4s var(--fx-ease);
}
.fx-spread__book img { display: block; width: 50%; height: auto; -webkit-user-drag: none; }
/* piega al centro */
.fx-spread__book::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 50%;
	width: 16%;
	transform: translateX(-50%);
	pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1) 42%, rgba(0, 0, 0, .24) 50%, rgba(0, 0, 0, .1) 58%, rgba(0, 0, 0, 0));
}
.fx-spread:hover .fx-spread__book, .fx-spread:focus-visible .fx-spread__book {
	transform: translateY(-6px);
	box-shadow: 0 32px 50px -24px rgba(31, 36, 41, .6), 0 6px 16px rgba(31, 36, 41, .12);
}
.fx-spread__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--fx-muted); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-spread__open { display: inline-flex; align-items: center; gap: 6px; color: var(--fx-petrol); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.fx-spread__open .fx-ico { width: 1.05em; height: 1.05em; }
.fx-spread:hover .fx-spread__open, .fx-spread:focus-visible .fx-spread__open { opacity: 1; transform: none; }

@media (min-width: 1024px) {
	/* la prima coppia di pagine in grande */
	.fx-spreads--bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
	.fx-spreads--bento .fx-spread:first-child { grid-column: span 2; grid-row: span 2; align-self: stretch; justify-content: space-between; }
	.fx-spreads--bento .fx-spread:first-child .fx-spread__foot { font-size: 1.0625rem; }
}


/* ---------- indice ---------- */
.fx-section--toc { background: var(--fx-surface-2); }
.fx-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.fx-chapter {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	padding: 12px 18px 12px 12px;
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius);
	color: var(--fx-text);
	background: var(--fx-surface);
	text-decoration: none;
	transition: transform .2s var(--fx-ease), box-shadow .2s, border-color .2s;
}
.fx-chapter:hover, .fx-chapter:focus-visible { transform: translateY(-2px); border-color: var(--fx-accent-edge); box-shadow: var(--fx-shadow-2); }
.fx-chapter__thumb {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: calc(50px * var(--fx-thumb-k, 1.4));
	border-radius: 3px;
	color: var(--fx-muted);
	background-color: var(--fx-surface-3);
	background-repeat: no-repeat;
	box-shadow: 0 3px 10px -2px rgba(31, 36, 41, .3);
}
.fx-chapter__thumb .fx-ico { width: 20px; height: 20px; }
.fx-chapter__name { flex: 1 1 auto; min-width: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.fx-chapter__num {
	flex: none;
	min-width: 2.5rem;
	padding: .35rem .7rem;
	border-radius: 999px;
	color: var(--fx-petrol-ink);
	background: var(--fx-tint);
	font: 800 1rem/1 var(--fx-font);
	font-variant-numeric: tabular-nums;
	text-align: center;
}
.fx-chapter.is-locked { color: var(--fx-muted); }


/* ---------- banner ---------- */
.fx-ad { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 40px auto; padding: 0 12px; overflow: hidden; }
.fx-ad--top { margin: 0; padding: 16px 12px; }
/* banner non arrivato: niente spazio vuoto (se arriva più tardi riprende la sua altezza) */
.fx-ad__slot.is-empty { height: auto; }
.fx-ad.is-empty { margin-top: 0; margin-bottom: 0; }
.fx-ad__slot { max-width: 100%; overflow: hidden; }
.fx-ad__slot--2, .fx-ad__slot--19 { width: 300px; height: 250px; }
.fx-ad__slot--3 { width: 300px; height: 600px; }
.fx-ad__slot--31 { width: 970px; height: 250px; }
.fx-ad__slot--1, .fx-ad__slot--28 { width: 728px; height: 90px; }


/* ---------- altri numeri della raccolta ---------- */
.fx-section--issues { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.fx-section--issues .fx-eyebrow { margin-bottom: .5rem; }
.fx-section__tools { display: flex; align-items: center; gap: 16px; flex: none; }


/* ---------- altri sfogliabili ---------- */
.fx-related { padding: clamp(2.25rem, 1.5rem + 2vw, 3.5rem) 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.fx-related .fx-section__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.012em; }
.fx-related--featured { margin-top: 20px; padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); background: var(--fx-surface-2); }
.fx-rail-nav { display: flex; gap: 8px; }
.fx-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 5 * 24px) / 6);
	gap: 24px;
	margin: 0 calc(-1 * var(--fx-gutter));
	padding: 10px var(--fx-gutter) 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 var(--fx-gutter);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.fx-rail::-webkit-scrollbar { display: none; }
.fx-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--fx-text); text-decoration: none; scroll-snap-align: start; }
.fx-card__cover { position: relative; display: block; height: 0; padding-bottom: 136%; }
.fx-card__cover img {
	position: absolute;
	left: 50%; bottom: 0;
	max-width: 100%;
	max-height: 100%;
	border-radius: 2px 4px 4px 2px;
	background: var(--fx-skeleton);
	box-shadow: 0 18px 30px -16px rgba(31, 36, 41, .6), 0 3px 8px rgba(31, 36, 41, .12);
	transform: translateX(-50%);
	transition: transform .35s var(--fx-ease), box-shadow .35s;
}
.fx-card:hover .fx-card__cover img, .fx-card:focus-visible .fx-card__cover img { transform: translateX(-50%) translateY(-6px); box-shadow: 0 26px 36px -18px rgba(31, 36, 41, .6), 0 4px 10px rgba(31, 36, 41, .14); }
.fx-card__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.fx-card__meta { margin-top: -6px; color: var(--fx-muted); font-size: 1rem; }


/* ---------- invito a provare Sfogliami: come la fascia "Crea subito il tuo sfogliabile" del sito ---------- */
.fx-promo { padding: clamp(2rem, 1rem + 3vw, 3.5rem) 0 clamp(3rem, 2rem + 4vw, 6rem); }
.fx-promo__card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	overflow: clip; 	/* come .fx-hero: il tablet gira con lo scorrimento della pagina */
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 1rem + 3vw, 3rem);
	padding: clamp(2rem, 1rem + 4vw, 4.5rem);
	border-radius: var(--fx-radius-lg);
	color: #fff;
	background: var(--fx-ink);
	box-shadow: var(--fx-shadow-3);
}
.fx-promo__card::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -90px; top: -120px;
	width: 280px; height: 280px;
	border: 48px solid var(--fx-petrol);
	border-radius: 50%;
	opacity: .55;
}
.fx-promo :focus-visible { outline-color: var(--fx-accent); }
.fx-promo .fx-eyebrow { color: var(--fx-accent); }
.fx-promo__title { margin: 0 0 .75rem; font: 800 clamp(1.875rem, 1.35rem + 1.9vw, 2.75rem)/1.1 var(--fx-font); letter-spacing: -.017em; text-wrap: balance; }
.fx-promo__text p { max-width: 46ch; margin: 0 0 1.75rem; color: rgba(255, 255, 255, .88); font-size: 1.1875rem; line-height: 1.6; }
.fx-promo__art { display: flex; justify-content: center; perspective: 1400px; }
.fx-promo__tablet {
	width: 100%;
	max-width: 470px;
	padding: 13px;
	border-radius: 28px;
	background: #1F2429;
	box-shadow: 0 46px 60px -28px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 255, 255, .1);
	transform: rotateY(-16deg) rotateX(7deg) rotateZ(1deg);
	transition: transform .8s var(--fx-ease);
}
.fx-promo__card:hover .fx-promo__tablet { transform: rotateY(-8deg) rotateX(4deg); }
/* senza mouse, come la copertina (.fx-book3d): il tablet si gira verso chi legge mentre attraversa lo schermo */
@keyframes fx-tablet-scorre {
	0% { transform: rotateY(-50deg) rotateX(24deg) rotateZ(4deg) scale(.88); }
	50% { transform: rotateY(-3deg) rotateX(2deg) rotateZ(0deg) scale(1.02); }
	100% { transform: rotateY(-34deg) rotateX(-8deg) rotateZ(-2deg) scale(.95); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.fx-promo__art { perspective: 1000px; }
		.fx-promo__tablet { animation: fx-tablet-scorre linear both; animation-timeline: view(); }
	}
}
.fx-promo__screen {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 8% 7%;
	border-radius: 16px;
	background: radial-gradient(circle at 50% 40%, #3A4148 0%, #23282d 70%);
	overflow: hidden;
}
.fx-promo__spread { position: relative; display: flex; width: 100%; box-shadow: 0 16px 28px -10px rgba(0, 0, 0, .7); }
.fx-promo__spread img { display: block; width: 50%; height: auto; }
.fx-promo__spread::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 50%;
	width: 14%;
	transform: translateX(-50%);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .22) 50%, rgba(0, 0, 0, 0));
}
.fx-promo__spread--single { width: auto; height: 100%; }
.fx-promo__spread--single img { width: auto; height: 100%; }
.fx-promo__spread--single::after { content: none; }


/* ---------- piede: come quello del sito ---------- */
.fx-footer { color: #D7DAE0; background: var(--fx-ink); }
.fx-footer :focus-visible { outline-color: var(--fx-accent); }
.fx-footer a { color: #fff; }
.fx-footer a:hover { color: var(--fx-accent); }
.fx-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr);
	gap: 2.5rem;
	padding: clamp(3rem, 2rem + 4vw, 5rem) 0 2.5rem;
}
.fx-footer__brand { display: inline-block; line-height: 0; border-radius: 10px; }
.fx-footer__brand img { display: block; width: auto; height: 44px; }
.fx-footer__claim { max-width: 34ch; margin: 1rem 0 0; color: #C2C6CE; }
.fx-footer h2 { margin: 0 0 1rem; color: #9EA3AD; font: 700 1rem/1.2 var(--fx-font); letter-spacing: .08em; text-transform: uppercase; }
.fx-footer ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.fx-footer li a { font-weight: 700; text-decoration: none; }
.fx-footer li a:hover { text-decoration: underline; text-underline-offset: .18em; }
.fx-footer .fx-lang { padding: 0; border-radius: 0; font: 700 1.125rem/1.6 var(--fx-font); letter-spacing: 0; }
.fx-footer .fx-lang:hover { background: none; }
.fx-footer__social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.fx-footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .08); }
.fx-footer__social a:hover { color: var(--fx-ink); background: var(--fx-accent); }
.fx-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 0 max(2rem, env(safe-area-inset-bottom));
	border-top: 1px solid rgba(255, 255, 255, .14);
	color: #B9BEC7;
	font-size: 1rem;
}
.fx-footer__bottom p { margin: 0; }
.fx-footer .fx-link { color: #fff; }
.fx-footer .fx-link:hover { color: var(--fx-accent); }


/* ---------- adattamento agli schermi ---------- */
@media (max-width: 1023px) {
	.fx-hero__grid { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 48px; }
	.fx-spread { flex-basis: calc((100% - 30px) / 2); }
	.fx-rail { grid-auto-columns: calc((100% - 3 * 24px) / 4); }
}
@media (max-width: 960px) {
	.fx-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
	.fx-subnav__links { display: none; }
}
/* sui touch le gallerie si scorrono con il dito */
@media (pointer: coarse) {
	.fx-rail-nav { display: none !important; }
}
@media (max-width: 760px) {
	.fx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.fx-hero__visual { padding: 0 20px 0 0; }
	.fx-book3d { max-width: 230px; }
	.fx-book3d--wide { max-width: 320px; }
	.fx-promo__card { grid-template-columns: minmax(0, 1fr); }
	.fx-promo__art { order: -1; }
	.fx-promo__tablet { max-width: 340px; }
}
@media (max-width: 639px) {
	.fx-subnav__inner { gap: 12px; height: 58px; }
	.fx-subnav__book img { height: 36px; }
	.fx-subnav__book { font-size: 1rem; }
	.fx-hero__actions .fx-button { flex: 1 1 auto; }
	.fx-sharebar__list { gap: 6px; }
	.fx-below .fx-social { width: 44px; height: 44px; }
	.fx-buy__price { font-size: 1.875rem; }

	/* prime pagine e altri sfogliabili scorrono di lato */
	.fx-spreads {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 16px;
		margin: 0 calc(-1 * var(--fx-gutter));
		padding: 4px var(--fx-gutter) 26px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--fx-gutter);
		scrollbar-width: none;
	}
	.fx-spreads::-webkit-scrollbar { display: none; }
	.fx-spread { flex: 0 0 84%; scroll-snap-align: start; }
	.fx-spread__open { opacity: 1; transform: none; }
	.fx-rail { grid-auto-columns: 40%; gap: 16px; padding: 8px var(--fx-gutter) 18px; }
	.fx-chapters { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.fx-invoice__row { flex-direction: column; }
	.fx-input--short { max-width: none; }
	.fx-promo__card { border-radius: 24px; }
}
@media (max-width: 560px) {
	.fx-footer__top { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.fx-js .fx-reveal { opacity: 1; transform: none; transition: none; }
	.fx-book3d, .fx-promo__tablet, .fx-spread__book, .fx-card__cover img, .fx-button, .fx-chapter { transition: none; }
}