/* =========================================================================
   Mascherpa — Settori applicativi
   Tutto scoped sotto .mascherpa-settori. I reset con !important servono a
   vincere sugli stili che Salient applica ai <button> dentro al contenuto.
   ====================================================================== */

.mascherpa-settori {
	--ms-accent: #2f5df5;
	--ms-rule: #e6e6e6;
	--ms-muted: #9a9a9a;
	--ms-muted-hover: #555;
	--ms-text: #1b1b1b;
	--ms-body: #555;
	--ms-quote: #d7deec;
	--ms-max-width: 100%;
	--ms-header-ratio: 16 / 9;
	--ms-item-size: 16px;
	--ms-tab-size: 14px;
	/* Colore verso cui sfumano i bordi della fila di tab: deve essere lo
	   sfondo della sezione, altrimenti la sfumatura si vede come una macchia. */
	--ms-fade: #fff;
	--ms-gap: 50px;
	--ms-radius-media: 4px;
	--ms-radius-tab: 5px;

	max-width: var(--ms-max-width);
	margin: 0 auto;
	font-family: inherit;
	position: relative;
}

/* Il tema non garantisce border-box su tutti i discendenti: senza questo
   padding e larghezza al 100% si sommano e il contenuto esce dalla colonna. */
.mascherpa-settori,
.mascherpa-settori *,
.mascherpa-settori *::before,
.mascherpa-settori *::after {
	box-sizing: border-box;
}

/* --- Reset dei bottoni contro il tema ---------------------------------- */

.mascherpa-settori button {
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family: inherit;
	line-height: 1.3;
	margin: 0;
	min-width: 0;
	width: auto;
	-webkit-appearance: none;
	appearance: none;
	transition: none;
}

.mascherpa-settori button::before,
.mascherpa-settori button::after {
	/* Salient aggiunge pseudo-elementi decorativi ai bottoni. */
	box-shadow: none;
}

.mascherpa-settori button:hover,
.mascherpa-settori button:focus {
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

/* =========================================================================
   Navigazione — comune ai tre layout
   ====================================================================== */

.mascherpa-settori .ms-nav-shell {
	position: relative;
}

.mascherpa-settori .mascherpa-tabs-nav {
	display: flex;
	flex-wrap: nowrap;          /* mai su due righe */
	gap: var(--ms-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	width: 100%;
	min-width: 0;
}

.mascherpa-settori .mascherpa-tabs-nav::-webkit-scrollbar {
	display: none;
}

/* L'allineamento vale finché i tab entrano; quando scorrono partono da
   sinistra da soli, senza tagliare il primo elemento. */
.mascherpa-settori.ms-align-center .mascherpa-tabs-nav { justify-content: center; }
.mascherpa-settori.ms-align-left   .mascherpa-tabs-nav { justify-content: flex-start; }
.mascherpa-settori.ms-align-right  .mascherpa-tabs-nav { justify-content: flex-end; }

.mascherpa-settori.is-scrollable .mascherpa-tabs-nav {
	justify-content: flex-start;
}

.ms-tabs-classic.is-scrollable .mascherpa-tabs-nav {
	scroll-padding-inline: 44px;
}

.mascherpa-settori .mascherpa-tab-btn {
	position: relative;
	flex: 0 0 auto;
	cursor: pointer;
	scroll-snap-align: center;
	white-space: nowrap;
	padding: 0;
	display: block;
}

/* --- Icona del settore nel tab ----------------------------------------- */

.mascherpa-settori .ms-tab-icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 1;
}

.mascherpa-settori .ms-tab-icon i {
	font-size: 1.2em;
	line-height: 1;
	display: block;
}

/* Iconsmind arriva come SVG, non come icon font: va dimensionato a mano. */
.mascherpa-settori .ms-tab-icon .im-icon-wrap svg {
	width: 1.3em;
	height: 1.3em;
	display: block;
	fill: currentColor;
}

.ms-tabs-classic .ms-tab-icon {
	margin-right: 7px;
	vertical-align: middle;
}

/* Nello stile Hero il bottone è già in flex, allineato in basso: l'icona si
   affianca all'etichetta senza toccare la disposizione esistente. */
.ms-tabs-hero .mascherpa-tab-btn {
	gap: 8px;
}

.mascherpa-settori .mascherpa-tab-btn:focus-visible {
	outline: 2px solid var(--ms-accent);
	outline-offset: 4px;
}

/* --- Frecce di scorrimento --------------------------------------------- */

.mascherpa-settori .ms-nav-arrow {
	position: absolute;
	top: 0;
	z-index: 3;
	width: 34px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--ms-muted-hover);
	font-size: 22px;
	border-radius: 0 !important;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.mascherpa-settori .ms-nav-arrow--prev { left: 0; }
.mascherpa-settori .ms-nav-arrow--next { right: 0; }

.mascherpa-settori .ms-nav-arrow[hidden] {
	display: none;
}

.mascherpa-settori .ms-nav-arrow:hover {
	color: var(--ms-accent);
}

.mascherpa-settori .ms-nav-arrow:disabled {
	opacity: 0.25;
	cursor: default;
}

/* Sfumature ai bordi quando c'è altro da scorrere. */
.mascherpa-settori .ms-nav-shell::before,
.mascherpa-settori .ms-nav-shell::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 1px;
	width: 56px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 2;
}

.mascherpa-settori .ms-nav-shell::before {
	left: 0;
	background: linear-gradient(to right, var(--ms-fade), transparent);
}

.mascherpa-settori .ms-nav-shell::after {
	right: 0;
	background: linear-gradient(to left, var(--ms-fade), transparent);
}

.mascherpa-settori.can-scroll-left .ms-nav-shell::before,
.mascherpa-settori.can-scroll-right .ms-nav-shell::after {
	opacity: 1;
}

/* =========================================================================
   Pannelli e immagine
   ====================================================================== */

/* Tutti i pannelli nella stessa cella: il blocco prende l'altezza del più
   alto e non la cambia più. Cambiando tab o ruotando i casi la pagina sotto
   non si muove. Nascondo con visibility invece che con display perché una
   cella con display:none non contribuisce all'altezza — e visibility:hidden
   toglie comunque il contenuto dal tab order e dagli screen reader. */
.mascherpa-settori .ms-panels {
	display: grid;
}

.mascherpa-settori .mascherpa-tab-panel {
	grid-area: 1 / 1;
	padding-top: 50px;
	visibility: hidden;
}

.mascherpa-settori .mascherpa-tab-panel.active {
	visibility: visible;
}

/* L'attributo hidden vale display:none e farebbe collassare la cella. */
.mascherpa-settori .mascherpa-tab-panel[hidden] {
	display: block;
}

/* Il lazy load del tema anima le immagini in entrata e le lascerebbe vuote
   dentro ai pannelli nascosti. Le rimettiamo a posto solo dentro al pannello
   e al caso attivi: visibility:visible su un discendente di un elemento
   nascosto lo fa ricomparire, e con i pannelli sovrapposti si vedrebbero uno
   attraverso l'altro. */
.mascherpa-settori .mascherpa-tab-panel.active img.mascherpa-tab-header,
.mascherpa-settori .mascherpa-tab-panel.active .mascherpa-testimonial-item.active img.ms-attrib-logo {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* --- La colonna dell'immagine: un pezzo per ogni caso -------------------

   I pezzi stanno sovrapposti nella stessa cella e si alternano insieme al
   testo. Sovrapporli invece di nasconderli con display serve a tenere
   l'ingombro stabile: cambiando caso non si muove niente. */

.mascherpa-settori .ms-media-stack {
	display: grid;
	width: 100%;
	max-width: 760px;
	margin: 0 auto 50px;
	border-radius: var(--ms-radius-media);
	overflow: hidden;
	position: relative;
}

.mascherpa-settori .ms-media-item {
	grid-area: 1 / 1;
	position: relative;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.mascherpa-settori .mascherpa-tab-panel.active .ms-media-item.active {
	visibility: visible;
	opacity: 1;
}

.mascherpa-settori .mascherpa-tab-header {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.mascherpa-settori.ms-header-ratio .ms-media-stack {
	aspect-ratio: var(--ms-header-ratio);
}

.mascherpa-settori.ms-header-fixed .ms-media-stack {
	height: var(--ms-header-h);
}

.mascherpa-settori .mascherpa-tab-header--empty {
	background: linear-gradient(135deg, #dde4f0, #c6d0e2);
}

/* =========================================================================
   Carosello dei casi
   ====================================================================== */

.mascherpa-settori .mascherpa-testimonial {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

/* Il riquadro prende aria e angoli sia quando ha un fondo colorato sia
   quando ha solo il bordo: un bordo appiccicato al testo non si guarda. */
.mascherpa-settori .mascherpa-testimonial.has-bg,
.mascherpa-settori.ms-has-border .mascherpa-testimonial {
	padding: 44px 40px 36px;
	border-radius: var(--ms-radius-media);
}

.mascherpa-settori .mascherpa-testimonial.has-bg {
	background: var(--ms-panel-bg);
}

.mascherpa-settori.ms-has-border .mascherpa-testimonial {
	border: var(--ms-panel-border-w) solid var(--ms-panel-border-c);
}

/* Stessa cosa per i casi: la colonna resta alta quanto il caso più lungo,
   così l'alternanza automatica non fa saltare niente. */
.mascherpa-settori .ms-testimonial-track {
	display: grid;
}

/* --- Frecce e contatore dei casi, in alto a destra del box ------------- */

/* Fuori dal flusso: il box ha altezza fissa e i casi sono sovrapposti in una
   cella di griglia, quindi la barra non deve occupare spazio proprio. */
.mascherpa-settori .ms-case-nav {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 2px;
	z-index: 2;
}

.mascherpa-settori .ms-case-count {
	font-size: calc(var(--ms-item-size) * 0.8);
	color: var(--ms-muted);
	letter-spacing: 0.02em;
	margin-right: 6px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mascherpa-settori .ms-case-sep {
	margin: 0 2px;
	opacity: 0.6;
}

.mascherpa-settori .ms-case-current {
	color: var(--ms-dot, var(--ms-accent));
	font-weight: 600;
}

.mascherpa-settori .ms-case-arrow {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 19px;
	line-height: 1;
	color: var(--ms-muted);
	border-radius: 999px !important;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.mascherpa-settori .ms-case-arrow:hover {
	color: var(--ms-dot, var(--ms-accent));
	background: var(--ms-dot-track, rgba(0, 0, 0, 0.06)) !important;
}

.mascherpa-settori .ms-case-arrow:focus-visible {
	outline: 2px solid var(--ms-dot, var(--ms-accent));
	outline-offset: 2px;
}

/* Su fondo scuro il grigio dei numeri e delle frecce sparisce. */
.mascherpa-settori .mascherpa-testimonial.is-dark .ms-case-count,
.mascherpa-settori .mascherpa-testimonial.is-dark .ms-case-arrow {
	color: rgba(255, 255, 255, 0.65);
}

/* La barra sta nell'angolo del riquadro: senza fondo il riquadro non ha
   padding, quindi si lascia respiro al contenuto sotto. */
.mascherpa-settori .mascherpa-testimonial.has-bg .ms-case-nav,
.mascherpa-settori.ms-has-border .mascherpa-testimonial .ms-case-nav {
	top: 18px;
	right: 20px;
}

.ms-content-split .mascherpa-testimonial .ms-case-nav {
	top: 22px;
	right: 22px;
}

.mascherpa-settori .mascherpa-testimonial-item {
	grid-area: 1 / 1;
	visibility: hidden;
}

/* Stesso motivo: il caso attivo torna visibile solo se lo è anche il suo
   pannello, altrimenti riemergerebbe da dentro un pannello nascosto. */
.mascherpa-settori .mascherpa-tab-panel.active .mascherpa-testimonial-item.active {
	visibility: visible;
	animation: mascherpaFade 0.6s ease;
}

@keyframes mascherpaFade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.mascherpa-settori .quote-mark {
	font-size: 40px;
	line-height: 1;
	color: var(--ms-quote);
	display: block;
	margin-bottom: 8px;
	font-family: Georgia, serif;
}

.mascherpa-settori .mascherpa-testimonial-item h4 {
	font-size: calc(var(--ms-item-size) * 1.25);
	margin: 0 0 16px;
	color: var(--ms-text);
	line-height: 1.35;
}

.mascherpa-settori .ms-testimonial-text,
.mascherpa-settori .ms-testimonial-text p {
	font-size: var(--ms-item-size);
	line-height: 1.75;
	color: var(--ms-body);
}

.mascherpa-settori .ms-testimonial-text p {
	margin: 0 0 1em;
}

.mascherpa-settori .ms-testimonial-text p:last-child {
	margin-bottom: 0;
}

/* Fondo scuro: testo chiaro. */
.mascherpa-settori .mascherpa-testimonial.is-dark h4 {
	color: #fff;
}

.mascherpa-settori .mascherpa-testimonial.is-dark .ms-testimonial-text,
.mascherpa-settori .mascherpa-testimonial.is-dark .ms-testimonial-text p {
	color: rgba(255, 255, 255, 0.82);
}

.mascherpa-settori .mascherpa-testimonial.is-dark .quote-mark {
	color: rgba(255, 255, 255, 0.35);
}

/* --- Firma del caso: logo e nome, entrambi facoltativi ----------------- */

.mascherpa-settori .ms-attrib {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 26px;
}

.mascherpa-settori .ms-attrib-logo {
	max-height: 44px;
	max-width: 150px;
	width: auto;
	height: auto;
	object-fit: contain;
	flex: 0 0 auto;
	border-radius: 0;
}

.mascherpa-settori .ms-attrib-text {
	text-align: left;
	line-height: 1.35;
}

.mascherpa-settori .ms-attrib-name {
	display: block;
	font-size: calc(var(--ms-item-size) * 0.95);
	font-weight: 600;
	color: var(--ms-text);
}

.mascherpa-settori .ms-attrib-role {
	display: block;
	font-size: calc(var(--ms-item-size) * 0.84);
	color: var(--ms-muted);
	margin-top: 2px;
}

.mascherpa-settori .mascherpa-testimonial.is-dark .ms-attrib-name {
	color: #fff;
}

.mascherpa-settori .mascherpa-testimonial.is-dark .ms-attrib-role {
	color: rgba(255, 255, 255, 0.6);
}

/* Il logo separato dal testo solo quando ci sono entrambi. */
.mascherpa-settori .ms-attrib-logo + .ms-attrib-text {
	padding-left: 14px;
	border-left: 1px solid var(--ms-rule);
}

.mascherpa-settori .mascherpa-testimonial.is-dark .ms-attrib-logo + .ms-attrib-text {
	border-left-color: rgba(255, 255, 255, 0.22);
}

.mascherpa-settori .ms-extra {
	margin-top: 34px;
}

.mascherpa-settori .mascherpa-testimonial-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
}

/* Il pallino attivo si allunga in una barretta che si riempie fino al caso
   successivo: si vede a colpo d'occhio quanto manca. I colori si calcolano
   in PHP sul fondo vero del pannello — un accento chiaro su pannello chiaro
   sparirebbe. */
.mascherpa-settori .mascherpa-dot {
	position: relative;
	overflow: hidden;
	width: 8px;
	height: 8px;
	border-radius: 999px !important;
	background: var(--ms-dot-track, #d8d8d8) !important;
	cursor: pointer;
	padding: 0;
	flex: 0 0 auto;
	transition: width 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
	            background-color 0.2s ease;
}

.mascherpa-settori .mascherpa-dot:hover {
	background: var(--ms-dot, var(--ms-accent)) !important;
}

.mascherpa-settori .mascherpa-dot.active {
	width: 34px;
}

/* La parte piena. Parte da zero ogni volta che il pallino diventa attivo:
   la regola comincia a valere in quel momento e l'animazione riparte da sé. */
.mascherpa-settori .mascherpa-dot.active::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--ms-dot, var(--ms-accent));
	transform: scaleX(0);
	transform-origin: left center;
	animation: mascherpaDotFill var(--ms-dot-duration, 6000ms) linear forwards;
}

@keyframes mascherpaDotFill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* Il riempimento deve stare fermo quando sta ferma anche la rotazione:
   passaggio del mouse, blocco da tastiera, blocco fuori schermo. */
.mascherpa-settori.ms-paused .mascherpa-dot.active::after {
	animation-play-state: paused;
}

/* Senza rotazione automatica non c'è niente da caricare: la barretta è
   semplicemente piena. */
.mascherpa-settori[data-autoplay="false"] .mascherpa-dot.active::after {
	animation: none;
	transform: scaleX(1);
}

.mascherpa-settori .mascherpa-dot:focus-visible {
	outline: 2px solid var(--ms-accent);
	outline-offset: 3px;
}

/* =========================================================================
   TAB — Stile classico
   ====================================================================== */

.ms-tabs-classic .ms-nav-shell {
	border-bottom: 1px solid var(--ms-rule);
}

.ms-tabs-hero .ms-nav-shell {
	border-bottom: none;
}

/* I blocchetti si scorrono trascinandoli: le frecce coprirebbero il primo
   e l'ultimo, e disallineerebbero la fila rispetto all'immagine sotto. */
.ms-tabs-hero .ms-nav-arrow {
	display: none !important;
}

.ms-tabs-hero .ms-nav-shell::before,
.ms-tabs-hero .ms-nav-shell::after {
	width: 34px;
}

.ms-tabs-classic .mascherpa-tab-btn {
	padding: 0 0 18px !important;
	color: var(--ms-muted);
	font-size: var(--ms-tab-size);
	font-weight: 500;
	transition: color 0.2s ease;
}

.ms-tabs-classic .mascherpa-tab-btn .ms-tab-media {
	display: none;
}

.ms-tabs-classic .mascherpa-tab-btn:hover {
	color: var(--ms-muted-hover);
}

.ms-tabs-classic .mascherpa-tab-btn.active {
	color: var(--ms-accent);
}

.ms-tabs-classic .mascherpa-tab-btn.active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--ms-accent);
}

/* =========================================================================
   TAB — Stile hero
   Il tab aperto è un bottone pieno: la sua foto è già visibile sotto.
   Gli altri restano blocchetti con la propria foto di sfondo.
   ====================================================================== */

.ms-tabs-hero {
	--ms-gap: 10px;
}

.ms-tabs-hero .mascherpa-tab-btn {
	height: 88px;
	/* La larghezza si governa con min/max, non con width: il tab aperto è
	   largo quanto la sua etichetta, e da/verso "auto" il browser non sa
	   animare — il blocchetto scatterebbe invece di allargarsi. Due misure
	   concrete si animano entrambe. */
	width: auto;
	min-width: 136px;
	max-width: 136px;
	border-radius: var(--ms-radius-tab) !important;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: 12px !important;
	white-space: normal;
	text-align: left;
	transition: min-width 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
	            max-width 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
	            padding 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
	            background-color 0.25s ease;
}

.ms-tabs-hero .ms-tab-media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease, filter 0.25s ease;
	filter: saturate(0.55) brightness(0.62);
}

.ms-tabs-hero .mascherpa-tab-btn::after {
	/* velo scuro perché l'etichetta resti leggibile su qualsiasi foto */
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 16, 30, 0.75), rgba(10, 16, 30, 0.1));
}

.ms-tabs-hero .ms-tab-label {
	position: relative;
	z-index: 1;
	color: #fff;
	transition: font-size 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.25s ease;
	font-size: calc(var(--ms-tab-size) * 0.9);
	font-weight: 600;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ms-tabs-hero .mascherpa-tab-btn:hover .ms-tab-media {
	transform: scale(1.06);
	filter: saturate(0.8) brightness(0.72);
}

/* Il tab aperto */
.ms-tabs-hero .mascherpa-tab-btn.active {
	min-width: 170px;
	max-width: 300px;
	background: var(--ms-accent) !important;
	/* Stesso appoggio in basso e stesso rientro a sinistra degli altri tab:
	   le etichette restano su una linea sola. Solo il margine a destra è più
	   largo, perché il blocchetto pieno non deve stringere il testo. */
	padding: 12px 20px 12px 12px !important;
}

.ms-tabs-hero .mascherpa-tab-btn.active .ms-tab-media,
.ms-tabs-hero .mascherpa-tab-btn.active::after {
	display: none;
}

.ms-tabs-hero .mascherpa-tab-btn.active .ms-tab-label {
	font-size: calc(var(--ms-tab-size) * 1.07);
	font-weight: 600;
	-webkit-line-clamp: 2;
	/* Gli altri tab hanno la foto con il velo scuro sotto, quindi bianco.
	   Questo ha il colore di accento pieno: se è chiaro il bianco sparisce,
	   e il colore lo decide il PHP misurando il contrasto. */
	color: var(--ms-tab-active-text, #fff);
}

.ms-tabs-hero .mascherpa-tab-panel {
	padding-top: 34px;
}

.ms-tabs-hero.ms-content-stacked .ms-media-stack {
	max-width: none;
	margin-bottom: 44px;
}

/* =========================================================================
   CONTENUTO — Split
   ====================================================================== */

.ms-content-split .mascherpa-tab-panel {
	padding-top: 40px;
}

.ms-tabs-hero.ms-content-split .mascherpa-tab-panel {
	padding-top: 26px;
}

.ms-content-split .ms-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	/* Il pannello è alto quanto il più alto di tutti: la foto deve seguirlo,
	   non fermarsi all'altezza del proprio testo. */
	height: 100%;
	border-radius: var(--ms-radius-media);
	overflow: hidden;
}

/* Gli elementi di una griglia hanno min-width auto: un contenuto largo
   allargherebbe la colonna oltre 1fr e spingerebbe fuori la seconda metà. */
.ms-content-split .ms-split > * {
	min-width: 0;
}

.ms-content-split .ms-split-media {
	position: relative;
	/* La larghezza deve restare quella della colonna. Senza, l'aspect-ratio
	   qui sotto la ricava dall'altezza della riga — che segue il testo — e
	   con un testo lungo la colonna foto sfonda quella del testo. */
	width: 100%;
	max-width: 100%;
}

/* La misura minima della colonna sta piu' in basso, sul puntello: qui
   darebbe alla colonna un'altezza propria, e un elemento che ce l'ha non si
   stira per riempire la riga. */

.mascherpa-settori.ms-content-split .ms-split-media .ms-media-stack {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	aspect-ratio: auto;
}

/* Il colore va sulla colonna intera, non sul riquadro interno. La variabile
   arriva dal pannello: dichiararla sul riquadro non basterebbe, un genitore
   non vede le custom property dei propri figli. */
.ms-content-split .ms-split-body {
	display: flex;
	align-items: center;
	background: var(--ms-panel-bg, #f6f7f9);
}

.ms-content-split .mascherpa-testimonial {
	max-width: none;
	width: 100%;
	text-align: left;
	padding: 48px 44px;
}

.ms-content-split .mascherpa-testimonial.has-bg,
.ms-content-split.ms-has-border .mascherpa-testimonial {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 48px 44px;
}

/* Nello Split il box del testo è tutta la colonna di destra. */
.ms-content-split.ms-has-border .ms-split-body {
	border: var(--ms-panel-border-w) solid var(--ms-panel-border-c);
}

.ms-content-split .mascherpa-testimonial-dots,
.ms-content-split .ms-attrib {
	justify-content: flex-start;
}

.ms-content-split .quote-mark {
	margin-bottom: 4px;
}

/* =========================================================================
   Mobile
   ====================================================================== */

@media (max-width: 999px) {
	.ms-content-split .ms-split {
		grid-template-columns: 1fr;
		/* Una colonna sola: foto e testo sono due righe. Se il blocco e' alto
		   perche' un altro settore lo e', lo spazio in piu' non deve gonfiare
		   la foto oltre l'altezza scelta — resta in fondo. */
		align-content: start;
	}

	.ms-content-split .ms-split-media {
		position: relative;
		min-height: 0;
	}

	.ms-content-split .mascherpa-testimonial,
	.ms-content-split .mascherpa-testimonial.has-bg,
	.ms-content-split.ms-has-border .mascherpa-testimonial {
		padding: 36px 28px;
	}
}

@media (max-width: 768px) {
	.mascherpa-settori {
		--ms-gap: 26px;
	}

	.mascherpa-settori .ms-nav-arrow {
		display: none !important;
	}

	.mascherpa-settori .ms-nav-shell::before { left: 0; }
	.mascherpa-settori .ms-nav-shell::after  { right: 0; }

	/* Con lo scroll orizzontale il primo tab deve poter arrivare a filo. */
	.mascherpa-settori .mascherpa-tabs-nav {
		justify-content: flex-start;
		scroll-padding-inline: 16px;
	}

	.mascherpa-settori .mascherpa-tab-panel {
		padding-top: 30px;
	}

	.mascherpa-settori .ms-media-stack {
		margin-bottom: 30px;
	}

	.mascherpa-settori.ms-header-fixed .ms-media-stack {
		height: var(--ms-header-h-mobile, 260px);
	}

	.mascherpa-settori .mascherpa-testimonial.has-bg,
	.mascherpa-settori.ms-has-border .mascherpa-testimonial {
		padding: 32px 24px 28px;
	}

	.mascherpa-settori .ms-testimonial-text,
	.mascherpa-settori .ms-testimonial-text p {
		font-size: calc(var(--ms-item-size) * 0.94);
	}

	.mascherpa-settori .mascherpa-testimonial-dots {
		margin-top: 24px;
	}

	.mascherpa-settori .ms-case-arrow {
		width: 26px;
		height: 26px;
		font-size: 17px;
	}

	.mascherpa-settori .mascherpa-testimonial.has-bg .ms-case-nav,
	.mascherpa-settori.ms-has-border .mascherpa-testimonial .ms-case-nav {
		top: 12px;
		right: 14px;
	}

	.mascherpa-settori .ms-attrib {
		margin-top: 20px;
		gap: 11px;
	}

	.mascherpa-settori .ms-attrib-logo {
		max-height: 34px;
		max-width: 110px;
	}

	.mascherpa-settori .ms-attrib-logo + .ms-attrib-text {
		padding-left: 11px;
	}

	/* Hero: blocchetti più piccoli, il tab aperto resta riconoscibile. */
	.ms-tabs-hero {
		--ms-gap: 8px;
	}

	.ms-tabs-hero .mascherpa-tab-btn {
		height: 62px;
		min-width: 96px;
		max-width: 96px;
		padding: 9px !important;
	}

	.ms-tabs-hero .ms-tab-label {
		font-size: calc(var(--ms-tab-size) * 0.79);
		-webkit-line-clamp: 2;
	}

	.ms-tabs-hero .mascherpa-tab-btn.active {
		min-width: 130px;
		max-width: min(62vw, 210px);
		padding: 9px 14px 9px 9px !important;
	}

	.ms-tabs-hero .mascherpa-tab-btn.active .ms-tab-label {
		font-size: calc(var(--ms-tab-size) * 0.93);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mascherpa-settori .mascherpa-testimonial-item.active {
		animation: none;
	}
	.mascherpa-settori .ms-tab-label {
		transition: none;
	}
	.mascherpa-settori .mascherpa-dot {
		transition: none;
	}
	.mascherpa-settori .mascherpa-dot.active::after {
		animation: none;
		transform: scaleX(1);
	}
	.mascherpa-settori .mascherpa-tabs-nav {
		scroll-behavior: auto;
	}
	.mascherpa-settori .mascherpa-tab-btn,
	.mascherpa-settori .ms-tab-media {
		transition: none;
	}
}

/* =========================================================================
   Settore usato da solo, fuori dal contenitore
   ====================================================================== */

.mascherpa-settori.ms-single-settore .mascherpa-tab-panel {
	padding-top: 0;
}

/* =========================================================================
   Avviso di contenitore vuoto — visibile solo a chi può modificare
   ====================================================================== */

.ms-empty-notice {
	max-width: 900px;
	margin: 0 auto;
	padding: 18px 20px;
	border: 1px dashed #c0392b;
	border-radius: 4px;
	color: #c0392b;
	background: rgba(192, 57, 43, 0.04);
	font-size: 14px;
	line-height: 1.5;
}

/* =========================================================================
   Video dei casi

   Nell'anteprima il video sta in sottofondo, senza audio e senza comandi,
   con la miniatura di YouTube sotto: quella si vede subito, il video arriva
   quando è pronto. Su una connessione lenta resta la miniatura, e la tessera
   non è mai vuota. Il pulsante sopra apre il video vero, a schermo intero.
   ====================================================================== */

.mascherpa-settori .ms-media-item.has-video {
	cursor: pointer;
	background: #0a101e;
}

/* Il fotogramma in sottofondo. Ci finisce dentro l'iframe, ma solo quando il
   caso è a schermo: caricarne uno per ogni caso significherebbe chiedere a
   YouTube dieci video per una pagina che ne mostra uno. */
.mascherpa-settori .ms-video-sfondo {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
	overflow: hidden;
}

.mascherpa-settori .ms-video-sfondo.is-pronto {
	opacity: 1;
}

/* L'iframe copre lo spazio anche quando le proporzioni non coincidono: un
   video 16:9 dentro a un riquadro più stretto va ritagliato, non schiacciato. */
.mascherpa-settori .ms-video-sfondo iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-width: 177.78%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

.mascherpa-settori .ms-video-play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
	padding: 0;
	background: rgba(10, 16, 30, 0.18) !important;
	transition: background-color 0.25s ease;
}

.mascherpa-settori .ms-video-play:hover {
	background: rgba(10, 16, 30, 0.32) !important;
}

.mascherpa-settori .ms-video-play span {
	display: block;
	width: 74px;
	height: 74px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 8px 30px rgba(6, 10, 18, 0.35);
	position: relative;
	transition: transform 0.25s ease;
}

/* Il triangolo, disegnato con i bordi: niente immagine da caricare. */
.mascherpa-settori .ms-video-play span::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 19px;
	border-color: transparent transparent transparent #10141e;
}

.mascherpa-settori .ms-video-play:hover span {
	transform: scale(1.08);
}

.mascherpa-settori .ms-video-play:focus-visible {
	outline: 3px solid var(--ms-accent);
	outline-offset: -4px;
}

@media (max-width: 768px) {
	.mascherpa-settori .ms-video-play span {
		width: 58px;
		height: 58px;
	}

	.mascherpa-settori .ms-video-play span::after {
		border-width: 9px 0 9px 15px;
	}
}

/* --- La finestra a schermo intero -------------------------------------- */

.ms-video-finestra[hidden] {
	display: none;
}

.ms-video-finestra {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vh 20px;
}

.ms-video-velo {
	position: fixed;
	inset: 0;
	background: rgba(6, 10, 18, 0.88);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ms-video-finestra.is-visible .ms-video-velo {
	opacity: 1;
}

.ms-video-telaio {
	position: relative;
	width: 100%;
	max-width: 1200px;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ms-video-finestra.is-visible .ms-video-telaio {
	opacity: 1;
	transform: none;
}

.ms-video-telaio iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ms-video-chiudi {
	position: absolute;
	top: -46px;
	right: 0;
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: transform 0.2s ease;
}

.ms-video-chiudi::before,
.ms-video-chiudi::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 1.7px;
	background: #10141e;
	transform: translate(-50%, -50%) rotate(45deg);
}

.ms-video-chiudi::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.ms-video-chiudi:hover {
	transform: scale(1.08);
}

@media (max-width: 680px) {
	.ms-video-finestra {
		padding: 20px 14px;
	}

	.ms-video-chiudi {
		top: -42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mascherpa-settori .ms-media-item,
	.mascherpa-settori .ms-video-sfondo,
	.mascherpa-settori .ms-video-play,
	.mascherpa-settori .ms-video-play span,
	.ms-video-velo,
	.ms-video-telaio {
		transition: none;
	}

	/* Un video che parte da solo è un movimento non richiesto. */
	.mascherpa-settori .ms-video-sfondo {
		display: none;
	}
}

/* =========================================================================
   La forma la decide il blocco

   Il tema arrotonda immagini e superfici con impostazioni globali. Su un
   riquadro largo e basso un raggio grande non fa "angoli tondi": fa una
   pastiglia, e su un video si vede come una curva che taglia l'inquadratura.
   Qui il raggio è quello del pannello, e dentro non lo tocca nessuno.
   ====================================================================== */

.mascherpa-settori .ms-media-stack {
	border-radius: var(--ms-radius-media) !important;
}

.mascherpa-settori.ms-content-split .ms-split-media .ms-media-stack {
	border-radius: 0 !important;
}

.mascherpa-settori .ms-media-item,
.mascherpa-settori .ms-media-item img,
.mascherpa-settori img.mascherpa-tab-header,
.mascherpa-settori .ms-video-sfondo,
.mascherpa-settori .ms-video-sfondo iframe,
.mascherpa-settori .ms-video-play {
	border-radius: 0 !important;
}

/* Il pulsante copre tutta l'inquadratura, quindi qualunque decorazione che
   il tema attacca ai bottoni qui diventa grande quanto il video. */
.mascherpa-settori .ms-video-play::before,
.mascherpa-settori .ms-video-play::after {
	content: none !important;
	display: none !important;
}

/* Il cerchio resta un cerchio: le tre misure insieme impediscono a flexbox
   o a una regola del tema di allungarlo. */
.mascherpa-settori .ms-video-play span {
	flex: 0 0 auto;
	min-width: 74px;
	max-width: 74px;
	min-height: 74px;
	max-height: 74px;
	border-radius: 999px !important;
}

@media (max-width: 768px) {
	.mascherpa-settori .ms-video-play span {
		min-width: 58px;
		max-width: 58px;
		min-height: 58px;
		max-height: 58px;
	}
}

/* =========================================================================
   Testo lungo: si scorre sul posto

   Un caso di dieci righe e uno di due non possono decidere l'altezza del
   blocco a testa. Si sceglie una volta quanto testo si vede; chi sfora si
   scorre dentro al proprio riquadro. A scorrere e' solo il testo: la firma
   e il logo restano fuori, sempre in vista, perche' sono l'unica cosa che
   dice di chi e' il caso che si sta leggendo.
   ====================================================================== */

.mascherpa-settori .ms-testo-wrap {
	position: relative;
}

.mascherpa-settori.ms-testo-limitato .ms-testimonial-text {
	max-height: var(--ms-testo-max);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(120, 130, 150, 0.4) transparent;
}

/* La barra resta discreta: e' un riquadro di testo dentro una pagina, non
   un pannello a se'. */
.mascherpa-settori.ms-testo-limitato .ms-testimonial-text::-webkit-scrollbar {
	width: 5px;
}

.mascherpa-settori.ms-testo-limitato .ms-testimonial-text::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: rgba(120, 130, 150, 0.4);
}

.mascherpa-settori.ms-testo-limitato .ms-testimonial-text::-webkit-scrollbar-track {
	background: transparent;
}

.mascherpa-settori .mascherpa-testimonial.is-dark .ms-testimonial-text {
	scrollbar-color: rgba(255, 255, 255, 0.42) transparent;
}

.mascherpa-settori .mascherpa-testimonial.is-dark .ms-testimonial-text::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.42);
}

/* La sfumatura dice che il testo continua.

   E' una maschera, non un velo colorato: sfuma verso qualunque fondo ci sia
   dietro, chiaro o scuro, senza doverlo indovinare. Si applica al riquadro,
   non al contenuto, quindi resta ferma in basso mentre il testo scorre. */
.mascherpa-settori.ms-testo-limitato .ms-testo-wrap.is-lungo .ms-testimonial-text {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6em), transparent);
	        mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6em), transparent);
	transition: -webkit-mask-image 0.2s ease, mask-image 0.2s ease;
}

/* Arrivati in fondo non c'e' piu' niente da annunciare. */
.mascherpa-settori.ms-testo-limitato .ms-testo-wrap.is-lungo.is-fine .ms-testimonial-text {
	-webkit-mask-image: none;
	        mask-image: none;
}

.mascherpa-settori .ms-testimonial-text:focus-visible {
	outline: 2px solid var(--ms-accent);
	outline-offset: 4px;
}

/* =========================================================================
   Altezze dello Split: una riga, tre cose che devono seguirla

   1. La colonna della foto deve arrivare in fondo come quella del testo.
   2. Dentro la colonna, tutti i casi devono essere alti uguale, anche quelli
      con un'immagine propria di proporzioni diverse o con un video.
   3. Il testo sta al centro sempre, non solo quando avanza spazio.
   ====================================================================== */

/* --- 1. La colonna della foto ------------------------------------------

   L'altezza minima non puo' stare sulla colonna stessa: "aspect-ratio" e
   "min-height" le danno un'altezza propria, e un elemento che ha gia'
   un'altezza non si stira per riempire la riga. La misura minima passa
   quindi a un elemento vuoto in flusso: fa da puntello — la riga non
   scende sotto quella misura — ma lascia la colonna libera di crescere
   quando e' il testo a comandare. */

.ms-content-split .ms-split-media {
	aspect-ratio: auto;
	min-height: 0;
	height: auto;
	align-self: stretch;
}

.ms-content-split .ms-split-media::before {
	display: block;
	width: 100%;
	content: '';
}

.ms-content-split.ms-header-ratio .ms-split-media::before {
	aspect-ratio: var(--ms-header-ratio);
}

.ms-content-split.ms-header-fixed .ms-split-media::before {
	height: var(--ms-header-h);
}

/* --- 2. I casi dentro la colonna della foto ----------------------------

   La riga di una griglia e' "auto": cresce fino al contenuto anche quando
   il contenitore ha un'altezza sua. Un'immagine verticale caricata su un
   solo caso allungava percio' tutte le celle oltre il riquadro, e le altre
   restavano indietro. Con minmax(0, 1fr) la riga non supera il riquadro:
   ogni caso e' alto quanto lo spazio, e l'immagine lo riempie ritagliata. */

.mascherpa-settori .ms-media-stack {
	grid-template-rows: minmax(0, 1fr);
}

.mascherpa-settori .ms-media-item {
	min-height: 0;
	overflow: hidden;
}

/* --- 3. Il testo al centro --------------------------------------------

   Il riquadro riempie la colonna: cosi' contatore e frecce restano in alto
   e i pallini in fondo, sempre alla stessa altezza da un caso all'altro.
   In mezzo la traccia si prende tutto lo spazio libero e ci centra dentro
   il caso — corto o lungo che sia. */

.ms-content-split .ms-split-body {
	align-items: stretch;
}

.ms-content-split .mascherpa-testimonial {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ms-content-split .ms-testimonial-track {
	flex: 1 1 auto;
	align-content: center;
	min-height: 0;
}

/* Anche fuori dallo Split i casi si centrano tra loro: la traccia e' alta
   quanto il caso piu' lungo, gli altri non devono restare appesi in alto. */
.mascherpa-settori .ms-testimonial-track {
	align-items: center;
}

/* =========================================================================
   Il video di sfondo, centrato in ogni riquadro

   Le misure in "vw" guardano lo schermo, non il riquadro che deve riempire:
   su mobile il video finiva 860x359 dentro una finestrella 484x260 — stirato
   e col soggetto fuori dall'inquadratura, e nella colonna dello Split
   ingrandito a dismisura. Con il riquadro dichiarato contenitore, le misure
   diventano sue: il video si comporta come un object-fit: cover, sempre
   centrato, a qualunque larghezza.
   ====================================================================== */

/* La copertura la calcola il JS, in pixel, misurando il riquadro vero.
   Qui c'era una versione con le container query: "container-type: size"
   porta con se' "contain: size", e dove l'altezza del riquadro non risolve
   le unita' cqh valgono zero — il video diventava 16:9 sulla larghezza,
   centrato, con la copertina sopra e il nero sotto. Le regole qui sotto
   restano solo come ripiego finche' il JS non ha misurato. */

/* L'altezza per mobile va dichiarata dopo quella desktop: stessa forza, e a
   parita' di forza vince l'ultima scritta. */
@media (max-width: 999px) {
	.ms-content-split.ms-header-fixed .ms-split-media::before {
		height: var(--ms-header-h-mobile, 260px);
	}
}

/* =========================================================================
   La catena dell'immagine nello Split

   Perche' la foto arrivi in fondo devono valere tutti e quattro gli anelli:
   la colonna riempie la riga, il riquadro riempie la colonna, la voce
   riempie il riquadro, l'immagine riempie la voce. Se ne salta uno, la foto
   torna alla sua altezza naturale e sotto resta il bianco della pagina —
   ed e' quello che si vedeva, mentre il video (che il JS forza in pixel)
   arrivava in fondo.

   Qui gli anelli sono dichiarati uno per uno e con "!important": non per
   vincere una regola del plugin, ma perche' nessuna regola del tema sulle
   immagini possa spezzare la catena a meta'.
   ====================================================================== */

.mascherpa-settori.ms-content-split .ms-split-media .ms-media-stack {
	position: absolute !important;
	inset: 0 !important;
	height: 100% !important;
	max-height: none !important;
}

.mascherpa-settori .ms-media-item {
	height: 100%;
	min-height: 0;
}

.mascherpa-settori img.mascherpa-tab-header {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
}