/*
 * Pelle MARANGONI — sito personale di Francesco Marangoni.
 *
 * Nero e antracite, testi avorio e grigio, accenti e pulsanti gialli: la
 * direzione delle tavole Gotham (contenuti/tavole-gotham nel repo). I valori
 * veri stanno nei Colori globali del Kit; qui ci sono solo i ripieghi dei
 * token --fm-theme-* e le poche cose che Elementor non sa fare da solo.
 *
 * Selettore a specificita' vera e non :where(): il CSS dei moduli viene
 * stampato anche inline piu' in basso nella pagina e a parita' di
 * specificita' vincerebbe lui (lezione di Atelier, 3.6.47-48).
 */

/*
 * Gotham, quattro tagli: Book per il testo, Medium per occhielli ed
 * etichette, Bold per titoli e pulsanti, Book corsivo per le rare enfasi.
 * Ridotti al latino (italiano, inglese, simboli comuni): circa 15 kB l'uno.
 * Lo spazio indivisibile ( ) nel file originale era largo 25 em: buchi
 * enormi nel testo. Corretto il 5/10/2026 alla larghezza dello spazio (?v=2).
 */
@font-face {
	font-family: "Gotham";
	src: url("../font/Gotham-Book.woff2?v=2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Gotham";
	src: url("../font/Gotham-BookItalic.woff2?v=2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Gotham";
	src: url("../font/Gotham-Medium.woff2?v=2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Gotham";
	src: url("../font/Gotham-Bold.woff2?v=2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

body.fm-theme-marangoni,
[class*="fm-wpgc-theme-marangoni"] {

	--fm-theme-surface: var(--e-global-color-fmfondo, #101113);
	--fm-theme-surface-soft: var(--e-global-color-fmantracite, #18191b);

	--fm-theme-ink: var(--e-global-color-secondary, #f4f1e9);
	--fm-theme-muted: var(--e-global-color-text, #bbbcb9);
	--fm-theme-line: var(--e-global-color-fmlinea, #3c3d40);

	--fm-theme-action: var(--e-global-color-primary, #ffc43d);
	--fm-theme-action-text: var(--e-global-color-fminchiostro, #111214);
	--fm-theme-action-hover: color-mix(in srgb, var(--e-global-color-primary, #ffc43d) 86%, #fff);

	--fm-theme-radius: 0;

	--fm-theme-panel: var(--e-global-color-fmnero, #090a0b);
	--fm-theme-panel-ink: var(--e-global-color-secondary, #f4f1e9);
	--fm-theme-overlay: rgba(0, 0, 0, 0.62);

	--fm-theme-badge: var(--e-global-color-primary, #ffc43d);
	--fm-theme-badge-text: var(--e-global-color-fminchiostro, #111214);
	--fm-theme-badge-soft: var(--e-global-color-fmantracite, #18191b);
	--fm-theme-badge-soft-text: var(--e-global-color-secondary, #f4f1e9);
	--fm-theme-badge-sale: var(--e-global-color-primary, #ffc43d);
	--fm-theme-badge-sale-text: var(--e-global-color-fminchiostro, #111214);

	--fm-theme-button: var(--e-global-color-primary, #ffc43d);
	--fm-theme-button-text: var(--e-global-color-fminchiostro, #111214);

	--fm-theme-font: var(--e-global-typography-text-font-family, "Gotham"), sans-serif;

	background-color: var(--e-global-color-fmfondo, #101113);
	color: var(--e-global-color-text, #bbbcb9);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.fm-theme-marangoni ::selection {
	background: var(--e-global-color-primary, #ffc43d);
	color: var(--e-global-color-fminchiostro, #111214);
}

/*
 * I segnaposto delle tavole: riquadro con il tratteggio diagonale e la
 * cornice calda. Si mette la classe fm-segnaposto su un contenitore; quando
 * arrivano foto, video o il modello 3D la classe si toglie e il contenitore
 * prende il suo fondo.
 */
body.fm-theme-marangoni .fm-segnaposto {
	background-color: #222327;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(255, 255, 255, 0.025) 0,
		rgba(255, 255, 255, 0.025) 1px,
		transparent 1px,
		transparent 14px
	);
	border: 1px solid var(--e-global-color-fmcornice, #46423a);
}

/*
 * Hello Elementor colora di magenta link e bottoni al passaggio e al fuoco.
 * Qui i link restano nel colore che hanno, il giallo li accende.
 */
body.fm-theme-marangoni a {
	color: inherit;
}

body.fm-theme-marangoni a:hover,
body.fm-theme-marangoni a:focus-visible {
	color: var(--e-global-color-primary, #ffc43d);
}

body.fm-theme-marangoni .elementor-button:focus-visible,
body.fm-theme-marangoni a:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #ffc43d);
	outline-offset: 3px;
}

/*
 * Le voci del menu in testata: la pagina in cui ci si trova resta avorio.
 */
body.fm-theme-marangoni .elementor-nav-menu .elementor-item.elementor-item-active {
	color: var(--e-global-color-secondary, #f4f1e9);
}

/*
 * Il modulo contatti: caselle scure con il bordo antracite, come la tavola.
 * I colori dei campi si regolano anche dal widget Modulo; qui ci sono solo
 * le cose che il widget non espone (segnaposto, freccia della tendina,
 * casella del consenso).
 */
body.fm-theme-marangoni .elementor-field-group .elementor-field::placeholder {
	color: var(--e-global-color-accent, #8f9292);
	opacity: 1;
}

body.fm-theme-marangoni .elementor-field-group .elementor-select-wrapper::before {
	color: var(--e-global-color-text, #bbbcb9);
}

body.fm-theme-marangoni .elementor-field-type-acceptance input[type="checkbox"] {
	accent-color: var(--e-global-color-primary, #ffc43d);
	width: 16px;
	height: 16px;
}

/*
 * La tabella di confronto della pagina Temporary manager: e' un widget
 * Editor di testo con una <table> dentro, cosi' resta modificabile a mano.
 * Sotto i 768 px scorre di lato invece di schiacciarsi.
 */
body.fm-theme-marangoni .fm-confronto {
	overflow-x: auto;
}

body.fm-theme-marangoni .fm-confronto table {
	width: 100%;
	min-width: 720px;
	margin: 0;
	border-collapse: collapse;
	border: 1px solid var(--e-global-color-fmlinea, #3c3d40);
	font-size: 14px;
	line-height: 1.5;
}

body.fm-theme-marangoni .fm-confronto th,
body.fm-theme-marangoni .fm-confronto td {
	padding: 20px 24px;
	border: 0;
	border-bottom: 1px solid var(--e-global-color-fmlinea, #3c3d40);
	background: transparent;
	text-align: left;
	vertical-align: middle;
	color: var(--e-global-color-text, #bbbcb9);
}

body.fm-theme-marangoni .fm-confronto th {
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #ffc43d);
}

body.fm-theme-marangoni .fm-confronto tbody th {
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--e-global-color-text, #bbbcb9);
}

body.fm-theme-marangoni .fm-confronto tr > *:last-child {
	background: var(--e-global-color-fmlinea, #3c3d40);
}

body.fm-theme-marangoni .fm-confronto tr:last-child > * {
	border-bottom: 0;
}

/*
 * Gli elenchi puntati delle schede servizio: punto giallo piccolo invece del
 * pallino di sistema, interlinea larga come nelle tavole.
 */
body.fm-theme-marangoni .fm-elenco ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.fm-theme-marangoni .fm-elenco li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 14px;
}

body.fm-theme-marangoni .fm-elenco li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 4px;
	height: 4px;
	background: currentColor;
	opacity: 0.8;
}

body.fm-theme-marangoni [id] {
	scroll-margin-top: 100px;
}

/*
 * Scheda lavoro del portfolio: le etichette dei dati (Periodo, Output...)
 * arrivano dentro il tag dinamico, cosi' spariscono quando il campo e' vuoto.
 */
body.fm-theme-marangoni .fm-dato-etichetta {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #ffc43d);
}

/* I video del vecchio portfolio (Bunny e YouTube) a tutta larghezza. */
body.fm-theme-marangoni .elementor-widget-theme-post-content iframe {
	max-width: 100%;
}

body.fm-theme-marangoni .elementor-widget-theme-post-content p:empty {
	display: none;
}

/*
 * La galleria del modulo Campi Portfolio scrive le colonne inline, uguali su
 * ogni schermo: su telefono si scende a due.
 */
@media (max-width: 767px) {
	body.fm-theme-marangoni .fm-portfolio-gallery [style*="grid-template-columns"],
	body.fm-theme-marangoni .fm-portfolio-gallery[style*="grid-template-columns"] {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/*
 * Scheda lavoro: i capitoli del racconto (tag "Capitolo del racconto").
 * Titolo a sinistra, testo a destra, filetto sopra; su telefono uno sotto
 * l'altro. Il capitolo vuoto non stampa niente, filetto compreso.
 */
body.fm-theme-marangoni .fm-capitolo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
	gap: 40px;
	padding: 40px 0;
	border-top: 1px solid var(--e-global-color-fmlinea, #3c3d40);
}

body.fm-theme-marangoni .fm-capitolo__titolo {
	margin: 0;
	font-family: var(--e-global-typography-fmblocco-font-family, "Gotham"), sans-serif;
	font-size: var(--e-global-typography-fmblocco-font-size, 24px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.2px;
	color: var(--e-global-color-secondary, #f4f1e9);
}

body.fm-theme-marangoni .fm-capitolo__testo > :last-child {
	margin-bottom: 0;
}

body.fm-theme-marangoni .fm-capitolo__testo ul {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

body.fm-theme-marangoni .fm-capitolo__testo li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 16px;
}

body.fm-theme-marangoni .fm-capitolo__testo li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 5px;
	height: 5px;
	background: var(--e-global-color-primary, #ffc43d);
}

body.fm-theme-marangoni .fm-capitolo__testo strong {
	color: var(--e-global-color-secondary, #f4f1e9);
}

@media (max-width: 767px) {
	body.fm-theme-marangoni .fm-capitolo {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 28px 0;
	}
}

body.fm-theme-marangoni .fm-citazione {
	margin: 40px 0 0;
	padding: 40px 0 0;
	border-top: 1px solid var(--e-global-color-fmlinea, #3c3d40);
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--e-global-color-secondary, #f4f1e9);
}

body.fm-theme-marangoni .fm-citazione p::before { content: "«"; }
body.fm-theme-marangoni .fm-citazione p::after { content: "»"; }

body.fm-theme-marangoni .fm-citazione cite {
	display: block;
	margin-top: 16px;
	font-size: 12px;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #ffc43d);
}

/* I dati della testata: valore sotto l'etichetta, link al sito in giallo. */
body.fm-theme-marangoni .fm-dato-valore {
	display: block;
}

body.fm-theme-marangoni .fm-dato-valore a {
	color: var(--e-global-color-primary, #ffc43d);
}

/*
 * L'INVERSIONE ALL'AVORIO (vedi assets/js/inverti.js).
 *
 * I colori globali di Elementor sono variabili sul body: registrandole con
 * @property il browser sa che sono colori e le fa sfumare invece di
 * scambiarle di colpo. Sui browser che non conoscono @property lo scambio
 * avviene lo stesso, solo senza dissolvenza.
 *
 * In negativo: i fondi diventano avorio, i testi nero, e il giallo degli
 * accenti e dei pulsanti diventa nero (con il testo dei pulsanti avorio).
 * Il 1/10/2026 era giallo: troppo, disturbava la lettura. Il giallo su
 * avorio non si legge, per questo anche gli accenti passano al nero.
 */
@property --e-global-color-fmnero { syntax: "<color>"; inherits: true; initial-value: #090a0b; }
@property --e-global-color-fmfondo { syntax: "<color>"; inherits: true; initial-value: #101113; }
@property --e-global-color-fmantracite { syntax: "<color>"; inherits: true; initial-value: #18191b; }
@property --e-global-color-fmpiede { syntax: "<color>"; inherits: true; initial-value: #0b0c0d; }
@property --e-global-color-fmlinea { syntax: "<color>"; inherits: true; initial-value: #3c3d40; }
@property --e-global-color-fminchiostro { syntax: "<color>"; inherits: true; initial-value: #111214; }
@property --e-global-color-primary { syntax: "<color>"; inherits: true; initial-value: #ffc43d; }
@property --e-global-color-secondary { syntax: "<color>"; inherits: true; initial-value: #f4f1e9; }
@property --e-global-color-text { syntax: "<color>"; inherits: true; initial-value: #bbbcb9; }
@property --e-global-color-accent { syntax: "<color>"; inherits: true; initial-value: #8f9292; }

body.fm-theme-marangoni {
	transition:
		--e-global-color-fmnero 0.7s ease,
		--e-global-color-fmfondo 0.7s ease,
		--e-global-color-fmantracite 0.7s ease,
		--e-global-color-fmpiede 0.7s ease,
		--e-global-color-fmlinea 0.7s ease,
		--e-global-color-fminchiostro 0.7s ease,
		--e-global-color-primary 0.7s ease,
		--e-global-color-secondary 0.7s ease,
		--e-global-color-text 0.7s ease,
		--e-global-color-accent 0.7s ease,
		background-color 0.7s ease;
}

/*
 * 5/10/2026: avorio piu' spento (prima #f4f1e9 e #eae6db): il passaggio dal nero
 * «sparava a bomba». Due toni caldi abbassati, stessa coppia chiaro/scuro.
 */
body.fm-theme-marangoni.fm-negativo {
	--e-global-color-fmnero: #e3ddd0;
	--e-global-color-fmfondo: #e3ddd0;
	--e-global-color-fmantracite: #d9d2c3;
	--e-global-color-fmpiede: #e3ddd0;
	--e-global-color-fmlinea: rgba(17, 18, 20, 0.16);
	--e-global-color-fminchiostro: #e3ddd0;
	--e-global-color-primary: #111214;
	--e-global-color-secondary: #111214;
	--e-global-color-text: #3a3b3e;
	--e-global-color-accent: #6b6c70;
	background-color: #e3ddd0;
}

/*
 * "Resta com'e' nell'inversione" (fm-fisso-si): le sezioni con foto e la
 * striscia gialla dei loghi tengono i colori veri anche in negativo, se no
 * i testi diventerebbero neri sulla foto scura. Vale anche per la testata.
 */
body.fm-theme-marangoni.fm-negativo .fm-fisso-si,
body.fm-theme-marangoni.fm-negativo .fm-testata {
	--e-global-color-fmnero: #090a0b;
	--e-global-color-fmfondo: #101113;
	--e-global-color-fmantracite: #18191b;
	--e-global-color-fmpiede: #0b0c0d;
	--e-global-color-fmlinea: #3c3d40;
	--e-global-color-fminchiostro: #111214;
	--e-global-color-primary: #ffc43d;
	--e-global-color-secondary: #f4f1e9;
	--e-global-color-text: #bbbcb9;
	--e-global-color-accent: #8f9292;
}

/*
 * «Sezione chiara (avorio fisso)» (fm-chiara-si): la sezione usa sempre i colori
 * dell'avorio, ma solo lei: la pagina non cambia. Stessi valori dell'inversione.
 */
body.fm-theme-marangoni .fm-chiara-si {
	--e-global-color-fmnero: #e3ddd0;
	--e-global-color-fmfondo: #e3ddd0;
	--e-global-color-fmantracite: #d9d2c3;
	--e-global-color-fmpiede: #e3ddd0;
	--e-global-color-fmlinea: rgba(17, 18, 20, 0.16);
	--e-global-color-fminchiostro: #e3ddd0;
	--e-global-color-primary: #111214;
	--e-global-color-secondary: #111214;
	--e-global-color-text: #3a3b3e;
	--e-global-color-accent: #6b6c70;
}

body.fm-theme-marangoni .fm-chiara-si .fm-vetro-si {
	--fm-vetro-fondo: rgba(17, 18, 20, 0.04);
	--fm-vetro-bordo: rgba(17, 18, 20, 0.12);
}

body.fm-theme-marangoni .fm-chiara-si.fm-bagliore-si::before,
body.fm-theme-marangoni .fm-chiara-si.fm-bagliore-si::after {
	opacity: 0;
}

body.fm-theme-marangoni.fm-negativo ::selection {
	background: #111214;
	color: #f4f1e9;
}

@media (prefers-reduced-motion: reduce) {
	body.fm-theme-marangoni {
		transition: none;
	}
}

/*
 * La Galleria di base di Elementor allarga la griglia con margini negativi
 * pari a meta' spaziatura: sul telefono, a una colonna, sporgeva di qualche
 * pixel e faceva scorrere la pagina di lato.
 */
body.fm-theme-marangoni .elementor-widget-image-gallery {
	overflow: hidden;
}

/* Gli articoli del blog: titoli interni e citazioni nella colonna di lettura. */
body.fm-theme-marangoni .elementor-widget-theme-post-content h2,
body.fm-theme-marangoni .elementor-widget-theme-post-content h3 {
	margin: 48px 0 16px;
	font-size: 26px;
	line-height: 1.25;
	color: var(--e-global-color-secondary, #f4f1e9);
}

body.fm-theme-marangoni .elementor-widget-theme-post-content blockquote {
	margin: 32px 0;
	padding-left: 20px;
	border-left: 3px solid var(--e-global-color-primary, #ffc43d);
	color: var(--e-global-color-secondary, #f4f1e9);
}

/*
 * La testata (come sul sito vecchio): sfumatura su desktop, fondo pieno
 * #544C4C da tablet in giu'. Elementor non sa cambiare il TIPO di sfondo per
 * dispositivo (sfumatura -> colore), per questo sta qui. La classe fm-testata
 * e' sul contenitore del modello Marangoni — Testata.
 */
@media (max-width: 1024px) {
	body.fm-theme-marangoni .fm-testata {
		background: #544c4c !important;
	}
}

/*
 * Il carosello a schermo intero dei casi in evidenza (pagina Casi): ogni slide
 * e' alta quanto lo schermo meno la testata (75 px; 66 su telefono).
 */
body.fm-theme-marangoni .fm-slide-schermo {
	min-height: calc(100vh - 75px);
	min-height: calc(100svh - 75px);
}

/*
 * La copertina della slide arriva dal tag dinamico «Immagine in evidenza»: in
 * quel caso Elementor non stampa misura, ripetizione e posizione dello sfondo
 * (le copertine uscivano a grandezza reale, ripetute e agganciate in alto a
 * sinistra). Le fissiamo qui: a tutto schermo, una volta, centrate.
 */
body.fm-theme-marangoni .e-loop-item .fm-slide-schermo {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

@media (max-width: 767px) {
	body.fm-theme-marangoni .fm-slide-schermo {
		min-height: calc(100svh - 66px);
	}
}

body.fm-theme-marangoni .fm-carosello-schermo .swiper-pagination {
	bottom: 32px !important;
}

/* I pulsanti si sollevano di un pixel al passaggio, come su Frontiers. */
body.fm-theme-marangoni .elementor-button {
	transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, transform 0.28s ease;
}

body.fm-theme-marangoni .elementor-button:hover {
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	body.fm-theme-marangoni .elementor-button:hover {
		transform: none;
	}
}

/*
 * EFFETTO AL PASSAGGIO (Stile del Pulsante → Effetto al passaggio; classi
 * messe da assets/js/pulsanti.js solo con un mouse vero).
 *
 * Luce: un riflesso morbido dentro il pulsante segue il puntatore, come le
 * luci delle sezioni. Magnete: il pulsante si lascia attirare e torna al suo
 * posto con un piccolo rimbalzo. Bordo: una luce gialla corre sul filetto dei
 * pulsanti a filo. Avorio: il fondo si riempie d'avorio da sinistra.
 */
@property --fm-giro {
	syntax: "<angle>";
	inherits: false;
	initial-value: 130deg;
}

body.fm-theme-marangoni .elementor-button.fm-pulsante--luce,
body.fm-theme-marangoni .elementor-button.fm-pulsante--bordo,
body.fm-theme-marangoni .elementor-button.fm-pulsante--avorio {
	position: relative;
	isolation: isolate;
}

body.fm-theme-marangoni .elementor-button.fm-pulsante--luce,
body.fm-theme-marangoni .elementor-button.fm-pulsante--avorio {
	overflow: hidden;
}

body.fm-theme-marangoni .fm-pulsante--luce::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(140px circle at var(--fm-px, 50%) var(--fm-py, 50%), var(--fm-luce, rgba(255, 255, 255, 0.55)), transparent 62%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

body.fm-theme-marangoni .fm-pulsante--luce:hover::before {
	opacity: 1;
}

body.fm-theme-marangoni .elementor-button.fm-pulsante--magnete,
body.fm-theme-marangoni .elementor-button.fm-pulsante--magnete:hover {
	transform: translate(var(--fm-tx, 0px), var(--fm-ty, 0px));
	transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, transform 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}

body.fm-theme-marangoni .elementor-button.fm-pulsante--magnete:hover {
	transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, transform 0.18s ease-out;
}

body.fm-theme-marangoni .fm-pulsante--bordo::before {
	content: "";
	position: absolute;
	inset: -1px;
	padding: 2px;
	border-radius: inherit;
	background: conic-gradient(from var(--fm-giro), transparent 0 38%, var(--fm-bordo-luce, var(--e-global-color-primary, #ffc43d)) 80%, transparent 99%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: fm-giro 2.2s linear infinite paused;
	pointer-events: none;
}

/* Ferma a riposo (luce in alto a destra), gira al passaggio, si ferma dov'e' quando il mouse esce. */
body.fm-theme-marangoni .fm-pulsante--bordo:hover::before,
body.fm-theme-marangoni .fm-pulsante--bordo:focus-visible::before {
	animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
	body.fm-theme-marangoni .fm-pulsante--bordo:hover::before {
		animation-play-state: paused;
	}
}

/* Sui pulsanti pieni la luce e' nera: riempimento giallo, riflesso scuro. */
body.fm-theme-marangoni .fm-pulsante--bordo.fm-pulsante--pieno::before {
	inset: 0; /* tutta dentro il giallo: fuori, sul fondo scuro, il nero sparirebbe */
	background: conic-gradient(from var(--fm-giro), transparent 0 38%, var(--fm-bordo-luce, rgba(17, 18, 20, 0.85)) 80%, transparent 99%);
}

/* Il filetto dei pulsanti a filo resta spento al passaggio, se no il giallo pieno copre la luce. */
body.fm-theme-marangoni .elementor-button.fm-pulsante--bordo:not(.fm-pulsante--pieno):hover {
	border-color: var(--e-global-color-fmlinea, #3c3d40) !important;
}

@keyframes fm-giro {
	from {
		--fm-giro: 130deg;
	}
	to {
		--fm-giro: 490deg;
	}
}

body.fm-theme-marangoni .fm-pulsante--avorio::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #f4f1e9;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
	pointer-events: none;
}

body.fm-theme-marangoni .fm-pulsante--avorio:hover::before {
	transform: scaleX(1);
}

body.fm-theme-marangoni .elementor-button.fm-pulsante--avorio:hover {
	color: #111214 !important;
}

/* La freccia (se c'e' un'icona) fa un passo avanti con la luce. */
body.fm-theme-marangoni .fm-pulsante--luce .elementor-button-icon,
body.fm-theme-marangoni .fm-pulsante--avorio .elementor-button-icon {
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.fm-theme-marangoni .fm-pulsante--luce:hover .elementor-button-icon,
body.fm-theme-marangoni .fm-pulsante--avorio:hover .elementor-button-icon {
	transform: translateX(4px);
}

/* Le etichette in fila (pagina Formazione, "Per chi"): larghe quanto il testo. */
body.fm-theme-marangoni .e-con.fm-pillola {
	--width: auto;
	width: auto;
	flex: 0 0 auto;
}

/*
 * La striscia dei loghi (modello "Marangoni — Striscia loghi"): un nastro che
 * scorre piano e in continuo, loghi tutti avorio e semitrasparenti, accesi al
 * passaggio. E' un Carosello di immagini di Elementor: i loghi si tolgono o
 * aggiungono dal widget. Lo scorrimento continuo = autoplay a 0 ms + velocita'
 * lunga + andamento lineare (sotto).
 */
body.fm-theme-marangoni .fm-loghi .swiper-wrapper {
	transition-timing-function: linear !important;
}

body.fm-theme-marangoni .fm-loghi .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
}

/* Il contenitore fra la slide e il logo deve essere largo quanto la slide,
   altrimenti si stringe attorno al logo e il width:100% sotto non vale niente. */
body.fm-theme-marangoni .fm-loghi .swiper-slide > *,
body.fm-theme-marangoni .fm-loghi .swiper-slide-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
}

body.fm-theme-marangoni .fm-loghi .swiper-slide img,
body.fm-theme-marangoni .fm-loghi .swiper-slide-image {
	/* Gli SVG non dichiarano una larghezza: senza width:100% il browser li
	   chiude in un quadrato alto quanto la riga e i loghi orizzontali
	   diventano minuscoli. object-fit li tiene nelle proporzioni. */
	width: 100%;
	max-width: 168px;
	height: 52px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.42;
	transition: opacity 0.3s ease, filter 0.3s ease;
}

body.fm-theme-marangoni .fm-loghi .swiper-slide:hover img {
	opacity: 1;
}

/* Nell'inversione all'avorio i loghi diventano neri. */
body.fm-theme-marangoni.fm-negativo .fm-loghi .swiper-slide img {
	filter: brightness(0);
}

@media (max-width: 767px) {
	body.fm-theme-marangoni .fm-loghi .swiper-slide img {
		max-width: 110px;
		height: 40px;
	}
}

/*
 * VETRO E BAGLIORI (4 ottobre 2026, richiesta di Francesco: "più colori e
 * qualche effetto glass sulle card", sullo stile della home del sito vecchio).
 *
 * Si accendono e si regolano da Elementor: Contenitore > Stile > "Vetro e
 * bagliore" (includes/class-fm-marangoni-effetti.php). I controlli scrivono
 * le variabili --fm-vetro-* e --fm-bagliore-* e le classi fm-vetro-si,
 * fm-bagliore-si, fm-bagliore-pos-*. Le classi a mano fm-vetro e fm-bagliore
 * (prima versione) valgono ancora, con i valori di partenza.
 */
body.fm-theme-marangoni .fm-bagliore-si,
body.fm-theme-marangoni .fm-bagliore {
	--fm-bagliore-1: var(--e-global-color-fmarancio, #f4ad3b);
	--fm-bagliore-2: var(--e-global-color-primary, #ffc43d);
	--fm-bagliore-opacita: 0.55;
	--fm-bagliore-misura: 720px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

body.fm-theme-marangoni .fm-bagliore-si::before,
body.fm-theme-marangoni .fm-bagliore-si::after,
body.fm-theme-marangoni .fm-bagliore::before,
body.fm-theme-marangoni .fm-bagliore::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(90px);
	transition: opacity 0.7s ease;
}

body.fm-theme-marangoni .fm-bagliore-si::before,
body.fm-theme-marangoni .fm-bagliore::before {
	width: min(46vw, var(--fm-bagliore-misura));
	height: min(46vw, var(--fm-bagliore-misura));
	top: -12%;
	left: -10%;
	opacity: var(--fm-bagliore-opacita);
	background: radial-gradient(circle, var(--fm-bagliore-1) 0%, transparent 70%);
}

body.fm-theme-marangoni .fm-bagliore-si::after,
body.fm-theme-marangoni .fm-bagliore::after {
	width: min(36vw, calc(var(--fm-bagliore-misura) * 0.78));
	height: min(36vw, calc(var(--fm-bagliore-misura) * 0.78));
	bottom: -14%;
	right: -6%;
	opacity: calc(var(--fm-bagliore-opacita) * 0.65);
	background: radial-gradient(circle, var(--fm-bagliore-2) 0%, transparent 70%);
}

body.fm-theme-marangoni .fm-bagliore-pos-destra::before,
body.fm-theme-marangoni .fm-bagliore--destra::before {
	left: auto;
	right: -10%;
}

body.fm-theme-marangoni .fm-bagliore-pos-destra::after,
body.fm-theme-marangoni .fm-bagliore--destra::after {
	right: auto;
	left: -6%;
}

body.fm-theme-marangoni .fm-bagliore-pos-basso::before,
body.fm-theme-marangoni .fm-bagliore--basso::before {
	top: auto;
	bottom: -20%;
}

body.fm-theme-marangoni .fm-vetro-si,
body.fm-theme-marangoni .fm-vetro {
	--fm-vetro-blur: 18px;
	--fm-vetro-fondo: rgba(255, 255, 255, 0.05);
	--fm-vetro-bordo: rgba(255, 255, 255, 0.12);
	--fm-vetro-bordo-sopra: rgba(244, 173, 59, 0.45);
	--fm-vetro-raggio: 7px;
	position: relative;
	background-color: var(--fm-vetro-fondo) !important;
	-webkit-backdrop-filter: blur(var(--fm-vetro-blur)) saturate(150%);
	backdrop-filter: blur(var(--fm-vetro-blur)) saturate(150%);
	border: 1px solid var(--fm-vetro-bordo) !important;
	border-radius: var(--fm-vetro-raggio) !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 60px -30px rgba(0, 0, 0, 0.7);
	transition: transform 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}

body.fm-theme-marangoni .fm-vetro--caldo {
	--fm-vetro-fondo: rgba(244, 173, 59, 0.08);
	--fm-vetro-bordo: rgba(244, 173, 59, 0.28);
}

/* Il riflesso: una luce diagonale in alto, sopra il colore del vetro. */
body.fm-theme-marangoni .fm-vetro-si.fm-vetro-riflesso-si,
body.fm-theme-marangoni .fm-vetro {
	background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(255, 255, 255, 0) 60%) !important;
}

body.fm-theme-marangoni .fm-vetro-si.fm-vetro-solleva-si:hover,
body.fm-theme-marangoni .fm-vetro:hover {
	transform: translateY(-3px);
	border-color: var(--fm-vetro-bordo-sopra) !important;
}

/* Nell'inversione all'avorio il vetro diventa scuro e le luci si spengono. */
body.fm-theme-marangoni.fm-negativo .fm-vetro-si,
body.fm-theme-marangoni.fm-negativo .fm-vetro {
	--fm-vetro-fondo: rgba(17, 18, 20, 0.04);
	--fm-vetro-bordo: rgba(17, 18, 20, 0.12);
}

body.fm-theme-marangoni.fm-negativo .fm-bagliore-si::before,
body.fm-theme-marangoni.fm-negativo .fm-bagliore-si::after,
body.fm-theme-marangoni.fm-negativo .fm-bagliore::before,
body.fm-theme-marangoni.fm-negativo .fm-bagliore::after {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	body.fm-theme-marangoni .fm-vetro-si:hover,
	body.fm-theme-marangoni .fm-vetro:hover {
		transform: none;
	}
}

/*
 * Luci dietro le card su telefono: in proporzione allo schermo le macchie
 * diventavano piccole, e con le card una sotto l'altra le sezioni sono
 * altissime: non si vedevano. Qui sono larghe piu' dello schermo, piu'
 * intense, una in alto e una in fondo alla sezione.
 */
@media (max-width: 767px) {
	body.fm-theme-marangoni .fm-bagliore-si::before,
	body.fm-theme-marangoni .fm-bagliore::before {
		width: 120vw;
		height: 120vw;
		top: -6%;
		left: -40vw;
		right: auto;
		bottom: auto;
		filter: blur(70px);
		opacity: calc(var(--fm-bagliore-opacita) * 1.15);
	}

	body.fm-theme-marangoni .fm-bagliore-si::after,
	body.fm-theme-marangoni .fm-bagliore::after {
		width: 110vw;
		height: 110vw;
		bottom: -4%;
		right: -40vw;
		left: auto;
		top: auto;
		filter: blur(70px);
		opacity: calc(var(--fm-bagliore-opacita) * 0.9);
	}
}

/*
 * La luce che segue il mouse (assets/js/bagliore.js): quando lo script ha
 * visto il puntatore nella sezione, la luce principale si centra su
 * --fm-mx / --fm-my invece di stare nel suo angolo.
 */
body.fm-theme-marangoni .fm-bagliore--segue::before {
	top: var(--fm-my, 0) !important;
	left: var(--fm-mx, 0) !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%);
}

/*
 * L'apertura della Home con la foto come sfondo (classe fm-apertura-foto sulla
 * sezione): alta quanto lo schermo sotto la testata, la foto (quadrata, fondo
 * nero a zero come la sezione) e' alta quanto la sezione, intera e allineata a
 * sinistra; il testo sta nella colonna destra al 50% e puo' passarle sopra.
 * Elementor non sa dimensionare lo sfondo sull'altezza, per questo sta qui.
 * Sul telefono la foto va in cima a piena larghezza e la colonna vuota
 * (fm-apertura-spazio) le fa posto, cosi' il testo resta sotto e leggibile.
 */
body.fm-theme-marangoni .e-con.fm-apertura-foto {
	min-height: calc(100svh - 75px);
	background-size: auto 100% !important;
	background-position: left center !important;
}

body.fm-theme-marangoni .e-con.fm-apertura-foto > .e-con-inner > .e-con,
body.fm-theme-marangoni .e-con.fm-apertura-foto > .e-con {
	min-height: inherit;
}

@media (max-width: 1024px) {
	body.fm-theme-marangoni .e-con.fm-apertura-foto {
		min-height: 0;
		background-size: 100% auto !important;
		background-position: center top !important;
	}

	body.fm-theme-marangoni .e-con.fm-apertura-spazio {
		height: 100vw;
		min-height: 0;
	}
}

/*
 * Nelle card delle griglie (lavori, corsi, articoli) il link attorno alla
 * copertina e' inline-block: sul telefono la foto restava piu' stretta della
 * card (330 px su 358 in Casi). Il link occupa tutta la larghezza.
 */
body.fm-theme-marangoni .e-loop-item .elementor-widget-theme-post-featured-image a {
	display: block;
}

/*
 * Il testo dei pulsanti non va a capo da tablet in su: accanto a un titolo
 * («Tutti i casi» in Home) il pulsante veniva schiacciato su due righe.
 */
@media (min-width: 768px) {
	body.fm-theme-marangoni .elementor-button-text {
		white-space: nowrap;
	}

	body.fm-theme-marangoni .elementor-widget-button {
		flex-shrink: 0;
	}
}

/*
 * Video con le sue proporzioni (classe fm-video-naturale sul widget Video):
 * Elementor conosce solo alcune proporzioni fisse (16:9, 9:16, 4:3...) e mette
 * un video verticale 2:3 in un riquadro sbagliato. Cosi' il riquadro segue il file.
 */
body.fm-theme-marangoni .fm-video-naturale .elementor-wrapper {
	aspect-ratio: auto !important;
	height: auto !important;
}

body.fm-theme-marangoni .fm-video-naturale video {
	position: static !important;
	display: block;
	width: 100%;
	height: auto !important;
}