@charset "utf-8";

/*	Impostazione variabili */

	* {

	/*	COLOR PALETTE IN ORDINE DI IMPORTANZA */
	/*
		--Palette1: #AE1857;
		--Palette2: #fdc517;
		--Palette3: #8b1446; 
		--Palette4: #cfa215; 
	*/

	/*	PAGINA */
		--Page_Background_Color: #eeeeee;
		--Page_Title_Color: #444444;
		--Page_Text_Color: #444444;
		--Link_Text_Color: var(--Palette1);

	/*	LOGHI */
		--Logo_Light: url(/images/logo/website_white.png);
		--Logo_Dark: url(/images/logo/website_black.png);

	/*	FONTS */
		--Font_Normal: "Roboto","Arial","Helvetica";
		--Font_Condensed: "Roboto Condensed","Arial Narrow","Helvetica Condensed";

	/*	HEADER */
		--Header_Background_Color: #ffffff;
		--Header_Background_Border_Color: #cccccc;
		--Header_Text_Color: #333333;

		--Header_Font: var(--Font_Normal);
		--Header_Search_Box_Font: var(--Font_Normal);
		--Header_Menu_Font: var(--Font_Normal);

		--Header_Menu_Buttons_Text: #333333;
		--Header_Menu_Buttons_Background: transparent;
		--Header_Menu_Buttons_Text_Hover: #ffffff;
		--Header_Menu_Buttons_Background_Hover: var(--Palette1);

		--Header_SubMenu_Background: #ffffff;
		--Header_SubMenu_Buttons_Text: #444444;
		--Header_SubMenu_Buttons_Background: transparent;
		--Header_SubMenu_Buttons_Text_Hover: #ffffff;
		--Header_SubMenu_Buttons_Background_Hover: var(--Palette1);

	/*	FOOTER */
		--Footer_Background: #dddddd;
		--Footer_Text_Color: #444444;
		--Footer_Text_Font_Size: 0.9rem;
		--Footer_Titles_Font_Size: 1.5rem;
		--Footer_Link_Color: #4281bf;
		--Footer_Link_Underline: underline;
		--Footer_Logo_Height: 2rem;

	/*	SCROLLBARS */
		--Scrollbars_Width: 0.6rem;
		--Scrollbars_Color:#999999;
		--Scrollbars_Background:#dddddd;

	/*	ROTOR 
		--Rotor_OffsetTop: 6rem;
		--Rotor_MaxWidth:unset;
		--Rotor_MaxHeight:unset; */

	/*	VARIANTE PER ROTOR PIU PICCOLO E CENTRATO */
		--Rotor_OffsetTop: 9rem;
		--Rotor_MaxWidth:70rem;
		--Rotor_MaxHeight:30rem; 

	/*	BOX EVENTI */
		--Box_Evento_Background_Color: #ffffff;
		--Box_Evento_Border_Color: #cccccc;
		--Box_Evento_Titles_Color: var(--Palette1);
		--Box_Evento_Titles_Font: var(--Font_Normal);
		--Box_Evento_Title_FontSize: 1.7rem;
		--Box_Evento_Subtitle_FontSize: 1.3rem;
		--Box_Evento_Authors_Color: var(--Page_Text_Color);
		--Box_Evento_Authors_Font: var(--Font_Normal);
		--Box_Evento_Button_Font: var(--Font_Normal);
		--Box_Evento_Button_Text_Color: var(--Palette1);
		--Box_Evento_Button_Background: #ffffff;
		--Box_Evento_Date_Color: var(--Page_Text_Color);
		--Box_Evento_Date_Font: var(--Font_Normal);
		--Box_Evento_Date_FontSize: 0.9rem;
		--Box_Evento_Abstract_Color: #777777;
		--Box_Evento_Abstract_Font: var(--Font_Normal);
		--Box_Evento_Abstract_FontSize: 1.1rem;

	/*	BOX NOTIZIA VERTICALE */
		--Notizia_Background: #ffffff;
		--Notizia_Titles_Color: var(--Palette1);
		--Notizia_Titles_Font: var(--Font_Normal);
		--Notizia_Title_FontSize: 1.7rem;
		--Notizia_Subtitle_FontSize: 1.3rem;
		--Notizia_Button_Font: var(--Font_Normal);
		--Notizia_Button_Text_Color: #ffffff;
		--Notizia_Button_Background: var(--Palette1);
		--Notizia_Abstract_Color: var(--Page_Text_Color);
		--Notizia_Abstract_Font: var(--Font_Normal);
		--Notizia_Abstract_FontSize: 1rem;

	}


/*	Regole CSS comuni */
	/*	max-width + overflow-x:clip (07/08/2026): tappo allo scroll orizzontale su mobile. La causa
		erano i decori floreali "sakura" — pseudo-elementi ::before posizionati IN NEGATIVO oltre il
		bordo del viewport (.FdoIntro--decorRight:before / --decorLeft:before in home.css,
		.FdoCorsiPetal--right:before in corsi-e-attivita.css), dentro sezioni con `overflow: visible`
		(i fiori devono restare visibili, quindi le sezioni non possono tagliarli). `.FdoPage` e
		`.FdoSection` hanno già `overflow-x: clip`, ma lo scroller VERO della pagina è html/body: un
		clip su un contenitore INTERNO non impedisce a quel contenitore di allargare comunque lo
		scroller superiore se lo sfora. Qui invece si taglia lo sfondamento alla radice, quindi vale
		per ogni pagina del sito (anche quelle "storiche" che non usano `.FdoPage`) senza dover mettere
		mano a ogni singola sezione con un decoro.
		⚠️ `clip`, non `hidden`: `hidden` crea uno scroll container (`overflow` genera un nuovo
		blocco di formattazione), che romperebbe `position: sticky` — es. la barra header "Acquista il
		biglietto" userebbe html/body come proprio contenitore di scroll invece della viewport, e
		lo sticky si fermerebbe alla prima sezione invece di restare in vista scorrendo la pagina.
		`clip` taglia il contenuto senza creare un nuovo contesto di scroll: sticky resta intatto. */
	HTML, BODY {
		margin:0;
		padding:0;
		border:0;
		width:100%;
		max-width: 100%;
		overflow-x: clip;
		font-family: var(--Font_Normal);
		background-color: var(--Page_Background_Color);
	}
	
	A, A:visited, A:active { color:var(--Link_Text_Color); }

	.NotVis {
		position: absolute;
		left:-5000vw;
		top:-5000vw;
	}

/*	Spinner */

	@-webkit-keyframes Spin {
		from {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		to {
			-webkit-transform: rotate(359deg);
			transform: rotate(359deg);
		}
	}
	@keyframes Spin {
		from {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
	to {
			-webkit-transform: rotate(359deg);
			transform: rotate(359deg);
		}
	}
	#SpinnerOverlay {
		display: none;
		position: fixed;
		left:0;
		top:0;
		width:100%;
		height: 100vh;
		z-index: 12000;
		overflow: hidden;
		overscroll-behavior: contain;
		background-color: #ffffffdd;
	}
	#SpinnerOverlay .Spinner {
		position: absolute;
		left:50%;
		top:50%;
		margin-left:calc(-3.5rem - 0.75rem);
		margin-top:calc(-3.5rem - 0.75rem);
		display: block;
		height: 7rem;
		width: 7rem;
		border-radius: 50%;
	}
	#SpinnerOverlay .Spin1 {
		border: 1.5rem #e0e0e0 solid;
		border-top: 1.5rem var(--Palette2) solid;
		-webkit-animation: Spin 1s infinite linear;
		animation: Spin 1s infinite linear;
	}
	#SpinnerOverlay .Spin2 {
		border: 1.5rem transparent solid;
		border-top: 1.5rem var(--Palette1) solid;
		-webkit-animation: Spin 1.5s infinite linear;
		animation: Spin 1.5s infinite linear;
	}



/*	Settaggio scrolbars */

	::-webkit-scrollbar {
		-webkit-box-shadow: none;
		width: var(--Scrollbars_Width);
		background-color:var(--Scrollbars_Background);
	}
	 
	::-webkit-scrollbar-track {
		-webkit-box-shadow: none;
		-webkit-border-radius: 0;
		border-radius: 0;
		background-color:trdnsparent;
	}
	 
	::-webkit-scrollbar-thumb { 
		-webkit-box-shadow: none; 
		-webkit-border-radius: 0;
		border-radius: 0;
		background: var(--Scrollbars_Color);
		border:none;
	}
	::-webkit-scrollbar-thumb:window-inactive {
		background: var(--Scrollbars_Color);
	}





/*	-------------------------------------------------------------------------- */
/*	Mobile sino a 480 portrait (la maggior parte dei mobile) 
/*	-------------------------------------------------------------------------- */
	@media screen and (max-width: 440px) {

		HTML {
			font-size: 3.6vw;
		}
		BODY {
			/* padding-top rimosso: #Header ora è "sticky" (nuovo layout 2026), non più "fixed" */
		}
		.Container {
			display: block;
			max-width: 92vw;
			margin-left: auto;
			margin-right: auto;
			margin-top: 2.5rem;
			margin-bottom: 2rem;
			color: var(--Page_Text_Color);
		}
		.Container H1.PageTitle {
			display: block;
			margin: 0;
			padding: 0;
			margin-bottom: 1.5rem;
			margin-top: -2rem;
			line-height: 1.1em;
			font-size: 3.1rem;
			font-weight: 900;
			color: var(--Page_Title_Color);
			text-align: left;
		}
		.Container H2.PageSubtitle {
			display: block;
			margin: 0;
			padding: 0;
			margin-bottom: 1.5rem;
			line-height: 1.2em;
			font-size: 1.6rem;
			font-weight: 400;
			color: #444444;
			text-align: left;
			font-style: italic;
		}

	}

/*	-------------------------------------------------------------------------- */
/*	Desktop sino a 1366 (la maggior parte dei notebook) 
/*	-------------------------------------------------------------------------- */
	@media screen and (min-width: 441px) and (max-width: 1366px) {

		HTML {
			font-size: 1.32vw;
		}
		BODY {
			/* padding-top rimosso: #Header ora è "sticky" (nuovo layout 2026), non più "fixed" */
		}
		.Container {
			display: block;
			max-width: 71.222rem;;
			margin-left: auto;
			margin-right: auto;
			margin-top: 2rem;
			margin-bottom: 5rem;
			color: var(--Page_Text_Color);
		}
		.Container H1.PageTitle {
			display: block;
			margin: 0;
			padding: 0;
			margin-bottom: 1.0rem;
			line-height: 1em;
			font-size: 3.5rem;
			font-weight: 900;
			color: var(--Page_Title_Color);
			text-align: left;
			margin-bottom: 2rem;
		}
		.Container H2.PageSubtitle {
			display: block;
			margin: 0;
			padding: 0;
			margin-bottom: 1.5rem;
			line-height: 1em;
			font-size: 1.9rem;
			font-weight: 400;
			color: #444444;
			text-align: left;
			font-style: italic;
		}
		
	}

/*	-------------------------------------------------------------------------- */
/*	Schermi sopra i 1366 (solitamente fullHD) 
/*	-------------------------------------------------------------------------- */
	@media screen and (min-width: 1367px) {

		HTML {
			margin:0px;
			padding:0px;
			width:100%;
			height:100%;
			font-size: 18px;
		}
		BODY {
			/* padding-top rimosso: #Header ora è "sticky" (nuovo layout 2026), non più "fixed" */
		}

	/*	------------------------------------------------------------- */
		.Container {
			display: block;
			max-width: 71.222rem;;
			margin-left: auto;
			margin-right: auto;
			margin-top: 2rem;
			margin-bottom: 5rem;
			padding-top: 0;
			color: var(--Page_Text_Color);
		}
		.Container H1.PageTitle {
			display: block;
			margin: 0;
			padding: 0;
			margin-bottom: 3.0rem;
			line-height: 1em;
			font-size: 3.5rem;
			font-weight: 900;
			color: var(--Page_Title_Color);
			text-align: left;
		}
		.Container H2.PageSubtitle {
			display: block;
			margin: 0;
			padding: 0;
			margin-bottom: 1.5rem;
			margin-top: -2rem;
			line-height: 1em;
			font-size: 2.3rem;
			font-weight: 400;
			color: var(--Page_Title_Color);
			text-align: left;
			font-style: italic;
		}

	}

/*	============================================================================ */
/*	NUOVO DESIGN SYSTEM "Fdo" (Festival dell'Oriente) — pagine ricostruite da zero
/*	dal bundle React di produzione (www.festivaldelloriente.it), a partire dal
/*	dump docs/dom/*.htm e dal CSS .newlayout/assets/index-hyXwmGwt.css.
/*
/*	Sostituisce integralmente il precedente sistema "Nl*" (homepage a blocchi
/*	editabili, rollback 22/07/2026): nomi di classe nuovi (prefisso "Fdo"), zero
/*	dipendenza dal gestore Pagine/repository per titolo.
/*
/*	Scope: SOLO le pagine con <body class="FdoPage">. Tutto qui sotto e' annidato
/*	sotto .FdoPage per non toccare le pagine del sito "storico" (Palette1 ecc.
/*	sopra in questo stesso file). Le custom property in :root sono innocue anche
/*	fuori scope (non renderizzano nulla se non referenziate).
/*
/*	Pagine che useranno questo sistema: homepage (oggi), poi (se il flusso
/*	funziona) le altre pagine convertite da docs/dom/*.htm.
/*	============================================================================ */

	:root {

	/*	Token verificati 1:1 contro :root in .newlayout/assets/index-hyXwmGwt.css */
		--color-bg: #052e5a;
		--color-hero-bleed-top: #063b73;
		--color-heading-alt: #052e5a;
		--color-h3: #ffbed8;
		--color-pink-soft: #ffc7dd;
		--color-body: #ffeaf3;
		--color-ticket-surface: #ffeaf3;
		--color-button-primary-bg: #b30000;
		--color-button-primary-text: #ffefef;
		--color-button-secondary-bg: #ffaece;
		--color-button-secondary-bg-hover: #ff8fbb;
		--color-button-secondary-text: #052e5a;
		--gradient-heading: linear-gradient(90deg, #d89958 13.14%, #8c5a30 38.47%, #a27544 43.68%, #dcbf7c 57.09%, #f4dc92 63.8%, #e6c880 69.76%, #c39752 82.42%, #b3803d 87.64%);
		--color-gold: #dcbf7c;
		--gradient-section-sticky: linear-gradient(180deg, #03162b 0%, #052e5a 100%);
		--color-navbar-pink-bg: #ffaece;
		--color-navbar-blue-bg: #052e5a;
		--color-card-activity: #011d3d;
		--color-card-prereg: #06396f;
		--color-border-accent: #ff63a2;

		--font-display: "Zen Antique", serif;
		--font-body: "Instrument Sans", sans-serif;

		--text-h1-size: 80px;
		--text-h1-line: 88px;
		--text-h1-weight: 400;
		--text-h2-size: 56px;
		--text-h2-line: 64px;
		--text-h2-weight: 400;
		--text-h3-size: 24px;
		--text-h3-line: 32px;
		--text-h3-weight: 400;
		--text-subtitle-size: 18px;
		--text-subtitle-line: 24px;
		--text-subtitle-weight: 400;
		--text-body-size: 16px;
		--text-body-line: 24px;
		--text-body-weight: 400;
		--text-body-bold-weight: 700;
		--text-button-size: 14px;
		--text-button-line: 18px;
		--text-button-weight: 600;
		--text-caption-size: 14px;
		--text-caption-line: 20px;
		--text-caption-weight: 400;

		--space-0: 0;
		--space-1: 4px;
		--space-2: 8px;
		--space-3: 12px;
		--space-4: 16px;
		--space-5: 24px;
		--space-6: 32px;
		--space-7: 48px;
		--space-8: 64px;
		--space-9: 96px;
		--space-10: 128px;

		--container-max: 1200px;
		--space-section: var(--space-9);
		--radius: 8px;
		--marquee-duration: 40s;

	/*	Breakpoint di riferimento (letterali nelle @media, le custom property non sono usabili li') */
	/*	tablet: 641px  ·  desktop: 1025px  ·  large: 1441px */

	}

/*	---------------------------------------------------------------------- */
/*	Reset di base, SOLO dentro .FdoPage
/*	---------------------------------------------------------------------- */

	.FdoPage, .FdoPage *, .FdoPage *:before, .FdoPage *:after { box-sizing: border-box; }
	.FdoPage { overflow-x: clip; background-color: var(--color-bg); color: var(--color-body); font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: var(--text-body-weight); -webkit-font-smoothing: antialiased; }
	.FdoPage h1, .FdoPage h2, .FdoPage h3, .FdoPage h4, .FdoPage h5, .FdoPage h6 { margin: 0; font-family: var(--font-display); font-weight: var(--text-h1-weight); }
	.FdoPage p { margin: 0; }
	.FdoPage img, .FdoPage picture, .FdoPage svg, .FdoPage video { display: block; max-width: 100%; }
	:where(.FdoPage) a { color: inherit; text-decoration: none; }
	:where(.FdoPage) button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; }
	.FdoPage ul, .FdoPage ol { list-style: none; margin: 0; padding: 0; }
	.FdoPage :focus-visible { outline: 2px solid var(--color-h3); outline-offset: 2px; }

/*	---------------------------------------------------------------------- */
/*	Componente "Section" — contenitore standard di sezione (usato dalla
/*	maggior parte dei blocchi: hero escluso, colonne intro escluse)
/*	---------------------------------------------------------------------- */

	.FdoSection { position: relative; z-index: 1; width: 100%; overflow-x: clip; padding: var(--space-7) var(--space-4); scroll-margin-top: 80px; }
	@media (min-width: 1025px) { .FdoSection { padding: var(--space-9) var(--space-6); } }
	.FdoSection--withBackground { background-image: var(--section-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; }
	.FdoSectionInner { width: 100%; max-width: var(--container-max); min-width: 0; margin: 0 auto; overflow-x: clip; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
	.FdoSectionInner--narrow { max-width: 48ch; }
	.FdoSectionSubtitle { margin: 0; font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: var(--text-h3-weight); color: var(--color-h3); }
	.FdoSectionBody { margin: 0; font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--color-body); }
	.FdoSectionBody--narrow { max-width: 48ch; }
	.FdoCtaRow { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
/*	Un pulsante marcato "non visibile" dall'editor NON viene stampato: la riga che lo conteneva
	resterebbe un contenitore vuoto, invisibile ma con i suoi margini (es. #udine-gallery .FdoCtaRow
	{ margin-top }), cioe' un buco nel layout. Vuota, la riga sparisce. */
	.FdoCtaRow:empty { display: none; }

/*	---------------------------------------------------------------------- */
/*	Componente "Heading" — titoli con variante gradient/solid (usato ovunque)
/*	---------------------------------------------------------------------- */

	.FdoHeading { margin: 0; font-family: var(--font-display); text-wrap: balance; }
	.FdoHeading--h1 { font-size: clamp(40px, 8vw, var(--text-h1-size)); line-height: 1.1; font-weight: var(--text-h1-weight); }
	.FdoHeading--h2 { font-size: clamp(32px, 6vw, var(--text-h2-size)); line-height: 1.14; font-weight: var(--text-h2-weight); }
	.FdoHeading--solid { color: var(--color-heading-alt); }
	.FdoHeading--gradient { color: #d89958; background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .1em; }

	.FdoFeatureTitle { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 34px; font-weight: var(--text-h2-weight); text-wrap: balance; color: #d89958; background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
	.FdoFeatureSubtitle { margin: 0; font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: var(--text-body-weight); color: #ffeaf3; }

/*	---------------------------------------------------------------------- */
/*	Componente "Button" — CTA primario/secondario (usato ovunque)
/*	---------------------------------------------------------------------- */

	.FdoBtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border: 2px solid transparent; border-radius: var(--radius); font-family: var(--font-body); font-size: var(--text-button-size); line-height: var(--text-button-line); font-weight: var(--text-button-weight); white-space: nowrap; transition: transform .15s ease, filter .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
	.FdoBtn--primary { background-color: var(--color-button-primary-bg); color: var(--color-button-primary-text); }
	.FdoBtn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
	.FdoBtn--secondary { background-color: var(--color-button-secondary-bg); color: var(--color-button-secondary-text); }
	.FdoBtn--secondary:hover { background-color: var(--color-button-secondary-bg-hover); transform: translateY(-1px); }
	.FdoBtn--outline { background-color: transparent; border-color: var(--color-button-secondary-bg); color: var(--color-button-secondary-bg); }
	.FdoBtn--outline:hover { background-color: transparent; border-color: var(--color-button-secondary-bg-hover); color: var(--color-button-secondary-bg-hover); transform: translateY(-1px); }
	.FdoBtn--menu { background-color: var(--color-button-primary-bg); color: var(--color-body); }
	/*	I bottoni-link (a.FdoBtn) devono mantenere il proprio colore ANCHE da :visited/:active:
		la regola legacy globale "a, a:visited, a:active { color: var(--Link_Text_Color) }" ha
		specificità 0,1,1 e batterebbe le varianti .FdoBtn--* (0,1,0), rendendo il testo scuro sui
		link già visitati (es. "Compra biglietto" di un evento già aperto). Qui specificità 0,2,1. */
	:where(.FdoPage) a.FdoBtn--primary:visited, :where(.FdoPage) a.FdoBtn--primary:active { color: var(--color-button-primary-text); }
	:where(.FdoPage) a.FdoBtn--secondary:visited, :where(.FdoPage) a.FdoBtn--secondary:active { color: var(--color-button-secondary-text); }
	:where(.FdoPage) a.FdoBtn--outline:visited, :where(.FdoPage) a.FdoBtn--outline:active { color: var(--color-button-secondary-bg); }
	:where(.FdoPage) a.FdoBtn--menu:visited, :where(.FdoPage) a.FdoBtn--menu:active { color: var(--color-body); }
	.FdoBtn:active { transform: translateY(0); }

/*	---------------------------------------------------------------------- */
/*	Componente "Marquee" — auto-scroll orizzontale in loop continuo (paesi,
/*	programma, street-food/mille-sapori). Un solo gruppo di card nel markup
/*	Twig; il duplicato per il loop e' generato via JS (vedi script marquee
/*	in fondo a home.htm). Punto 10 della richiesta: funzionante (su www non lo era).
/*	---------------------------------------------------------------------- */

	/*	Layout card INVARIATO (striscia orizzontale, riga unica). Base: scrollbar orizzontale visibile
		(overflow-x:auto) → senza JS (= modalità modifica) tutte le card sono raggiungibili scorrendo
		e restano gestibili normalmente. Il JS (FdoInitMarquee, dietro window.FdoEditMode) fa SOLO due
		cose aggiungendo .is-animating alla .FdoMarquee dopo il clone: (1) nasconde la scrollbar
		(overflow:hidden) e (2) attiva l'animazione. In edit-mode il JS non gira → niente animazione,
		scrollbar visibile. */
	.FdoMarquee { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: none; }
	.FdoMarquee.is-animating { overflow: hidden; }
	.FdoMarqueeTrack { display: flex; width: max-content; will-change: transform; }
	.FdoMarquee.is-animating .FdoMarqueeTrack { -webkit-animation: FdoMarqueeScroll var(--marquee-duration, 40s) linear infinite; animation: FdoMarqueeScroll var(--marquee-duration, 40s) linear infinite; }
	@media (hover: hover) and (pointer: fine) {
		.FdoMarquee:hover .FdoMarqueeTrack, .FdoMarquee:focus-within .FdoMarqueeTrack { -webkit-animation-play-state: paused; animation-play-state: paused; }
	}

/*	TOCCO / SCHERMI STRETTI: il marquee diventa uno SCORRITORE A DITA, come .FdoScroller (05/08/2026).
	Prima su mobile era il peggiore dei due mondi: .is-animating imposta overflow:hidden, quindi non si
	poteva trascinare, e la pausa all'hover qui sopra vale solo per i puntatori FINI, quindi al tocco non
	si poteva nemmeno fermare. Le card scorrevano via e basta.
	Le tre righe: (1) restituisco lo scorrimento nativo; (2) fermo l'animazione, che altrimenti
	combatterebbe col dito muovendo il contenuto sotto le dita; (3) nascondo il CLONE che il JS aggiunge
	per il loop continuo (lo marca aria-hidden="true", vedi FdoInitMarquee in homepage/home.htm), che
	senza animazione farebbe scorrere due volte la stessa lista.
	⚠️ CONSEGUENZA VOLUTA: al tocco lo scorrimento automatico NON c'è più — si scorre col dito. Col mouse
	su schermo largo resta l'animazione con la pausa all'hover.
	⚠️ La query è l'UNIONE di tre condizioni:
	  - (any-pointer: coarse) → il caso vero. Basta che UNO dei dispositivi di puntamento disponibili sia
	    grossolano: prende telefoni e tablet a qualunque larghezza E i laptop con touchscreen, che con
	    (pointer: coarse) restavano fuori perché dichiarano il MOUSE come puntatore primario (aggiunta il
	    05/08/2026 su richiesta). Rende superfluo (pointer: coarse), che è implicato da questo e non serve
	    più elencare.
	  - (hover: none) → dispositivi senza hover ma con puntatore fine (raro, es. certi stilo).
	  - (max-width: 1024px) → rete di sicurezza, e rende la regola provabile restringendo una finestra
	    da tavolo.
	⚠️ ESCLUSE le due bande DECORATIVE (05/08/2026, su richiesta): .FdoPaesiMarquee (home) e
	.FdoUdineCountriesMarquee (landing Udine) sono file continue di soli nomi di Paese, non liste da
	sfogliare: lì lo scorrimento perenne È l'effetto grafico e resta anche al tocco. L'esclusione vale
	per tutte e tre le regole, clone compreso: l'animazione traslada di -50% CONTANDO sul clone, quindi
	nasconderlo mentre l'animazione gira farebbe scorrere la banda fino a svuotarsi. */
	@media (max-width: 1024px), (hover: none), (any-pointer: coarse) {
		.FdoMarquee.is-animating:not(.FdoPaesiMarquee):not(.FdoUdineCountriesMarquee) { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
		.FdoMarquee.is-animating:not(.FdoPaesiMarquee):not(.FdoUdineCountriesMarquee) .FdoMarqueeTrack { -webkit-animation: none; animation: none; }
	/*	⚠️ AGGIORNAMENTO 07/08/2026 — il clone si nasconde solo se NON c'è lo scorrimento automatico.
		Da oggi su tocco la striscia si muove da sola con `scripts/fdo-autoscroll.js`, che sposta
		`scrollLeft` e per il giro continuo ha BISOGNO del clone (arrivato in fondo all'originale, la
		copia prende il suo posto). Il motore marca il contenitore con `.is-autoscroll`: se per
		qualsiasi motivo non partisse (JS spento, errore), si ricade nel comportamento precedente —
		clone nascosto, lista singola scorribile col dito — che è una degradazione accettabile. */
		.FdoMarquee:not(.FdoPaesiMarquee):not(.FdoUdineCountriesMarquee):not(.is-autoscroll) .FdoMarqueeTrack > .FdoMarqueeGroup[aria-hidden="true"] { display: none; }
	}

/*	SCORRIMENTO AUTOMATICO (07/08/2026): la barra sparisce quando la striscia si muove da sola — è il
	comportamento dello scorritore "novità", preso a riferimento dal committente e ora esteso a tutte
	le strisce su tocco. La classe la mette il JS, quindi senza JS la barra resta: le card devono
	comunque essere raggiungibili. */
	.FdoMarquee.is-autoscroll, .FdoScroller.is-autoscroll { scrollbar-width: none; -ms-overflow-style: none; }
	.FdoMarquee.is-autoscroll::-webkit-scrollbar, .FdoScroller.is-autoscroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
	.FdoMarqueeGroup { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-4); padding-right: var(--space-4); }
	.FdoMarqueeGroup--stretch { align-items: stretch; }
	@-webkit-keyframes FdoMarqueeScroll { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); } }
	@keyframes FdoMarqueeScroll { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); } }
	/*	NB: nessun blocco @media (prefers-reduced-motion: reduce) qui: i marquee devono
		animarsi SEMPRE e su tutti i browser (richiesta esplicita), quindi l'animazione
		non viene disattivata dalla preferenza di sistema "riduci animazioni". */

/*	---------------------------------------------------------------------- */
/*	Componente "Scroller" — scroll orizzontale draggabile/con tastiera e
/*	scroll-snap (novita, video-festival). Punto 10: mantenuto funzionante.
/*	---------------------------------------------------------------------- */

	.FdoScroller { display: flex; justify-content: safe center; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-h3) transparent; padding: var(--space-2) 0 var(--space-4); }
	.FdoScroller::-webkit-scrollbar { height: 6px; }
	.FdoScroller::-webkit-scrollbar-thumb { background-color: var(--color-h3); border-radius: var(--radius); }
	.FdoScrollerTrack { display: flex; align-items: flex-start; gap: var(--space-5); width: max-content; }
	.FdoScrollerTrack > * { scroll-snap-align: center; flex-shrink: 0; }
	.FdoScrollerTrack--stretch { align-items: stretch; }
	@media (min-width: 1025px) { .FdoScroller { margin: 0; padding: var(--space-2) 0 var(--space-4); } }