/* =========================================================================
   Mascherpa — Soluzioni
   Griglia di tile a larghezza variabile. Si clicca una tile, quella si apre
   a tutta riga e le altre si ridispongono intorno.
   ====================================================================== */

.mascherpa-soluzioni {
	--sol-accent: #2f5df5;
	--sol-h: 200px;
	--sol-gap: 16px;
	--sol-radius: 10px;
	--sol-max-width: 100%;
	--sol-surface: #f4f5f7;
	--sol-line: #e2e6ee;
	--sol-fg: #1b1b1b;
	--sol-muted: #5b6270;

	max-width: var(--sol-max-width);
	margin: 0 auto;
	font-family: inherit;
}

.mascherpa-soluzioni,
.mascherpa-soluzioni *,
.mascherpa-soluzioni *::before,
.mascherpa-soluzioni *::after {
	box-sizing: border-box;
}

/* Il tema veste i <button> di suo: qui devono essere superfici neutre. */
.mascherpa-soluzioni button {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
	margin: 0;
	min-width: 0;
	width: auto;
	-webkit-appearance: none;
	appearance: none;
}

/* -------------------------------------------------------------------------
   Griglia
   ---------------------------------------------------------------------- */

/* Dodici colonne: una tile larga "3/4" ne occupa 9, "1/4" ne occupa 3. Le
   righe non si dichiarano — si formano da sole in base alle larghezze, così
   una fila da tre e una fila da 3/4 + 1/4 convivono senza impostare niente. */
.mascherpa-soluzioni .ms-sol-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--sol-gap);
	/* Righe guidate dal contenuto. Con align-items:stretch l'altezza della
	   riga viene imposta alle tile, e quando il pannello si apre il motore
	   non rimisura la riga finché qualcos'altro non forza un ricalcolo: il
	   contenuto resterebbe tagliato. Le vicine le pareggia il JS. */
	align-items: start;
}

.mascherpa-soluzioni .ms-sol {
	grid-column: span var(--sol-span, 4);
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* La tile è il riferimento per tutto quello che le sta dentro in
	   posizione assoluta — la foto di sfondo prima di tutto. Senza, quella
	   si aggancia al primo antenato posizionato, che è una colonna del
	   builder alta tutt'altro: l'immagine viene stirata su quella e con
	   "cover" se ne vede una fetta a caso. */
	position: relative;
	border-radius: var(--sol-radius);
	overflow: hidden;
	background: var(--sol-bg, var(--sol-surface));
	border: 1px solid var(--sol-line);
	transition: border-color 0.25s ease, box-shadow 0.25s ease,
	            height 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Con un colore o una foto propri il bordo diventa un contorno inutile. */
.mascherpa-soluzioni .ms-sol.has-color,
.mascherpa-soluzioni .ms-sol.has-image {
	border-color: transparent;
}

/* La tile aperta resta nella propria colonna: si allunga soltanto, e con lei
   la riga. La larghezza non cambia mai, così la griglia non si scompone. */
.mascherpa-soluzioni.ms-sol-mode-griglia .ms-sol.is-open {
	box-shadow: 0 12px 34px rgba(16, 24, 40, 0.1);
}

/* Sulla tile aperta la faccia resta della sua altezza: se crescesse anche
   lei, il titolo — che sta in basso — scivolerebbe verso il basso mentre il
   pannello si apre. Il titolo deve stare fermo e aprirsi solo quello che c'è
   sotto. */
.mascherpa-soluzioni .ms-sol.is-open .ms-sol-face {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   Faccia della tile
   ---------------------------------------------------------------------- */

.mascherpa-soluzioni .ms-sol-face {
	position: relative;
	display: flex;
	/* In colonna: il logo sta sopra al blocco di testo invece che accanto.
	   Con una sola colonna il risultato per il testo da solo non cambia. */
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
	/* Prende l'altezza avanzata dentro alla tile: è così che le tile chiuse
	   di una riga si allungano fino a quella aperta. */
	flex: 1 1 auto;
	min-height: var(--sol-h);
	transition: flex-basis 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
	padding: 22px 24px;
	text-align: left;
	color: var(--sol-fg);
	cursor: default;
	overflow: hidden;
}

.mascherpa-soluzioni .ms-sol.has-detail .ms-sol-face {
	cursor: pointer;
}

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

.mascherpa-soluzioni .ms-sol-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease;
}

/* Velo sotto al testo: su una foto qualsiasi il bianco da solo non tiene. */
.mascherpa-soluzioni .ms-sol.has-image .ms-sol-face::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 16, 30, 0.82), rgba(10, 16, 30, 0.15));
}

.mascherpa-soluzioni .ms-sol.has-detail:hover .ms-sol-bg {
	transform: scale(1.04);
}

.mascherpa-soluzioni .ms-sol-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* Due testate nella stessa tile: quella dell'anteprima (occhiello e titolo)
   e quella del pop-up (logo a fianco del titolo). In griglia si vede la
   prima; la seconda resta nascosta e si accende solo nella finestra, che è
   una copia della tile — vedi "Testata del pop-up" in fondo. */
.mascherpa-soluzioni .ms-sol-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.mascherpa-soluzioni .ms-sol-head--open {
	display: none;
}

.mascherpa-soluzioni .ms-sol.is-dark .ms-sol-face {
	color: #fff;
}

.mascherpa-soluzioni .ms-sol-logo-wrap {
	display: block;
	margin-bottom: 10px;
}

.mascherpa-soluzioni img.ms-sol-logo {
	display: block;
	max-height: 34px;
	max-width: 150px;
	width: auto;
	height: auto;
	object-fit: contain;
	/* Il lazy load del tema anima le immagini in entrata. */
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

.mascherpa-soluzioni .ms-sol-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.72;
}

.mascherpa-soluzioni .ms-sol-title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.mascherpa-soluzioni .ms-sol-abstract {
	font-size: 14px;
	line-height: 1.5;
	color: var(--sol-muted);
	max-width: 62ch;
}

.mascherpa-soluzioni .ms-sol.is-dark .ms-sol-abstract {
	color: rgba(255, 255, 255, 0.82);
}

/* Una tile stretta non ha spazio per il sommario. */
.mascherpa-soluzioni .ms-sol--14 .ms-sol-abstract,
.mascherpa-soluzioni .ms-sol--13 .ms-sol-abstract {
	display: none;
}

.mascherpa-soluzioni .ms-sol.is-open .ms-sol-abstract {
	display: block;
}

/* --- Segnale di apertura ---------------------------------------------- */

.mascherpa-soluzioni .ms-sol-toggle {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 1;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid currentColor;
	opacity: 0.55;
	transition: opacity 0.25s ease, transform 0.3s ease;
}

.mascherpa-soluzioni .ms-sol-toggle::before,
.mascherpa-soluzioni .ms-sol-toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease, opacity 0.2s ease;
}

.mascherpa-soluzioni .ms-sol-toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.mascherpa-soluzioni .ms-sol:not(.is-dark) .ms-sol-toggle {
	background: rgba(16, 24, 40, 0.04);
}

.mascherpa-soluzioni .ms-sol-face:hover .ms-sol-toggle {
	opacity: 1;
}

/* Aperta: il "+" diventa "−". */
.mascherpa-soluzioni .ms-sol.is-open .ms-sol-toggle {
	opacity: 1;
	transform: rotate(180deg);
}

.mascherpa-soluzioni .ms-sol.is-open .ms-sol-toggle::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

/* -------------------------------------------------------------------------
   Contenuto che si apre
   ---------------------------------------------------------------------- */

/* L'altezza la anima il JS misurando il contenuto: transizionare
   grid-template-rows da 0fr a 1fr sarebbe più elegante, ma non tutti i
   motori la interpolano — dove non lo fanno il pannello scatta invece di
   aprirsi. Il CSS qui tiene solo gli stati fermi, così senza JS il pannello
   resta chiuso e non lascia un buco. */
.mascherpa-soluzioni .ms-sol-detail {
	overflow: hidden;
	height: 0;
	background: #fff;
	/* Senza questo il pannello si lascia comprimere: la tile è alta quanto la
	   riga, flexbox restringe il figlio per farcelo stare e la riga non cresce
	   mai. Deve essere il pannello a spingere, non il contrario. */
	flex: 0 0 auto;
	transition: height 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mascherpa-soluzioni .ms-sol.is-open .ms-sol-detail {
	height: auto;
}

/* Finché è chiuso il contenuto non deve essere raggiungibile con il
   tabulatore né letto dagli screen reader.

   Il testo compare in dissolvenza restando fermo dov'è: farlo scorrere
   dentro al pannello che si apre è un movimento in più che si legge come
   contenuto che sale, mentre il pannello scende. */
.mascherpa-soluzioni .ms-sol-detail-inner {
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 0.42s, opacity 0.2s ease;
}

.mascherpa-soluzioni .ms-sol.is-open .ms-sol-detail-inner {
	visibility: visible;
	opacity: 1;
	transition: visibility 0s linear 0s, opacity 0.3s ease 0.16s;
}

.mascherpa-soluzioni .ms-sol-detail-body {
	padding: 26px 24px 28px;
	border-top: 1px solid var(--sol-line);
}

/* Fuori dal contenitore la tile non si apre: il contenuto sta sempre lì. */
.mascherpa-soluzioni .ms-sol-detail.is-static {
	height: auto;
}

.mascherpa-soluzioni .ms-sol-detail.is-static .ms-sol-detail-inner {
	visibility: visible;
	transition: none;
}

/* -------------------------------------------------------------------------
   Mobile
   ---------------------------------------------------------------------- */

@media (max-width: 999px) {
	/* Sotto ai 1000px una fila da tre diventa illeggibile: si passa a due
	   colonne, e le tile larghe restano piene. */
	.mascherpa-soluzioni .ms-sol {
		grid-column: span 6;
	}

	.mascherpa-soluzioni .ms-sol--11,
	.mascherpa-soluzioni .ms-sol--34,
	.mascherpa-soluzioni .ms-sol--23 {
		grid-column: 1 / -1;
	}
}

@media (max-width: 680px) {
	.mascherpa-soluzioni .ms-sol,
	.mascherpa-soluzioni .ms-sol--11,
	.mascherpa-soluzioni .ms-sol--34,
	.mascherpa-soluzioni .ms-sol--23 {
		grid-column: 1 / -1;
	}

	.mascherpa-soluzioni .ms-sol-face {
		min-height: 150px;
		padding: 18px 18px;
	}

	.mascherpa-soluzioni .ms-sol-title {
		font-size: 18px;
	}

	.mascherpa-soluzioni .ms-sol-detail-body {
		padding: 20px 18px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mascherpa-soluzioni .ms-sol-detail,
	.mascherpa-soluzioni .ms-sol-bg,
	.mascherpa-soluzioni .ms-sol-toggle,
	.mascherpa-soluzioni .ms-sol {
		transition: none;
	}
}

/* =========================================================================
   Apertura "a finestra"

   La tile viene spostata in un contenitore attaccato al <body>, e al suo
   posto resta un segnaposto che tiene la colonna. Spostarla è l'unico modo
   perché stia davvero sopra al velo: un elemento sollevato con z-index
   resta comunque prigioniero del contesto di impilamento in cui si trova,
   e i temi ne creano in continuazione.
   ====================================================================== */

/* In finestra l'originale resta in griglia e resta chiuso: quello che si
   apre è la copia dentro alla finestra. Senza questo si aprirebbero
   entrambi, e dietro al velo la pagina si allungherebbe. */
.ms-sol-mode-finestra .ms-sol.is-open .ms-sol-detail {
	height: 0;
}

.ms-sol-mode-finestra .ms-sol.is-open {
	box-shadow: 0 0 0 2px var(--sol-accent);
}

.ms-sol-modale[hidden] {
	display: none;
}

.ms-sol-modale {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vh 20px;
	overflow-y: auto;
}

/* Velo scuro: su una pagina chiara un velo chiaro non stacca niente e la
   finestra sembra appoggiata sul nulla. */
.ms-sol-velo {
	position: fixed;
	inset: 0;
	background: rgba(12, 17, 26, 0.62);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ms-sol-modale.is-visible .ms-sol-velo {
	opacity: 1;
}

.ms-sol-finestra {
	position: relative;
	width: 100%;
	max-width: 860px;
	margin: auto;
	opacity: 0;
	transform: translateY(14px) scale(0.985);
	transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ms-sol-modale.is-visible .ms-sol-finestra {
	opacity: 1;
	transform: none;
}

/* La tile dentro alla finestra non è più un elemento di griglia. */
.ms-sol-modale .ms-sol {
	grid-column: auto !important;
	width: 100%;
	height: auto !important;
	border-radius: 14px;
	border: none;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(6, 10, 18, 0.45);
}

/* Nella finestra la testata può essere più bassa: qui non deve reggere il
   confronto con le vicine di una riga, e lo spazio serve al testo. */
.ms-sol-modale .ms-sol-face {
	cursor: default;
	min-height: 0;
	padding: 30px 32px;
}

.ms-sol-modale .ms-sol-inner {
	gap: 8px;
}

.ms-sol-modale .ms-sol-title {
	font-size: 24px;
}

.ms-sol-modale .ms-sol-abstract {
	display: block;
}

.ms-sol-modale .ms-sol-detail-body {
	padding: 28px 32px 32px;
}

.ms-sol-modale .ms-sol-toggle {
	display: none;
}

/* Dentro alla scheda, non appeso fuori: staccato dal riquadro sembrava un
   elemento della pagina sotto. */
.ms-sol-chiudi {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 4;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	border: none;
	box-shadow: 0 4px 14px rgba(6, 10, 18, 0.28);
	cursor: pointer;
	padding: 0;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.ms-sol-modale .ms-sol-toggle {
	display: none;
}

.ms-sol-chiudi::before,
.ms-sol-chiudi::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1.6px;
	background: #1b1b1b;
	transform: translate(-50%, -50%) rotate(45deg);
}

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

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

.ms-sol-chiudi:focus-visible {
	outline: 2px solid #2f5df5;
	outline-offset: 2px;
}

@media (max-width: 680px) {
	.ms-sol-modale {
		padding: 16px 14px;
		align-items: flex-start;
	}

	.ms-sol-chiudi {
		top: 12px;
		right: 12px;
		width: 34px;
		height: 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ms-sol-velo,
	.ms-sol-finestra,
	.ms-sol-chiudi {
		transition: none;
	}

	.ms-sol-finestra {
		transform: none;
	}
}

/* =========================================================================
   Apertura "a scambio"

   Il riquadro non cambia dimensione: il testo esteso compare sotto al
   titolo, dentro agli stessi bordi. Vuole tile più alte del solito — quello
   che si legge deve starci senza scorrere.

   Niente sovrapposizioni: il riquadro ha un'altezza fissa, la testata sta in
   alto e si prende lo spazio che le serve, il testo occupa quello che resta.
   Così il titolo non si muove di un pixel fra chiuso e aperto, e resta
   leggibile mentre leggi il resto.
   ====================================================================== */

/* L'altezza è quella che hai impostato: le tile restano della dimensione con
   cui le hai disegnate, e il testo lungo scorre dentro al riquadro. Solo
   scegliendo "si adatta al contenuto" il JS le fa crescere. */
.ms-sol-mode-scambio .ms-sol {
	position: relative;
	height: var(--sol-h);
	cursor: pointer;
}

.ms-sol-mode-scambio.ms-sol-adatta .ms-sol {
	height: auto;
	min-height: var(--sol-h);
}

.ms-sol-mode-scambio .ms-sol:not(.has-detail) {
	cursor: default;
}

/* Testata statica: così la foto di sfondo e il suo velo si misurano
   sull'intero riquadro invece che sulla sola testata. */
.ms-sol-mode-scambio .ms-sol-face {
	position: static;
	flex: 0 0 auto;
	min-height: 0;
	justify-content: flex-start;
	padding-bottom: 14px;
}

.ms-sol-mode-scambio .ms-sol-inner {
	position: relative;
	z-index: 1;
}

/* Il sommario resta sempre, anche sulle tile strette dove negli altri modi
   viene nascosto. Deve battere quella regola: se comparisse solo
   all'apertura, la testata cambierebbe altezza fra chiuso e aperto e la
   misura della riga verrebbe presa su un ingombro che poi non è più quello,
   con il testo che finisce tagliato. */
.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol .ms-sol-abstract {
	display: block;
}

.ms-sol-mode-scambio .ms-sol-detail {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
	/* Nessuna barra dentro al riquadro: quando l'altezza segue il contenuto
	   non c'è niente da scorrere. Torna solo dove serve — vedi sotto. */
	overflow: hidden;
	background: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-detail {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.ms-sol-mode-scambio .ms-sol-detail-inner {
	opacity: 1;
	visibility: visible;
	transition: none;
}

.ms-sol-mode-scambio .ms-sol-detail-body {
	border-top: none;
	padding: 0 24px 22px;
}

/* Su fondo scuro o su foto il testo che entra deve restare leggibile. */
.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail {
	color: rgba(255, 255, 255, 0.9);
}

.ms-sol-mode-scambio .ms-sol-toggle {
	z-index: 4;
}

/* --- Il movimento dello scambio ----------------------------------------

   Qui il riquadro non cambia dimensione, quindi tutto il movimento può stare
   nel contenuto: la copertina arretra, il testo entra dal basso una riga per
   volta. Lo scaglionamento è quello che dà il senso di lettura — se entrasse
   tutto insieme sarebbe solo una dissolvenza.
   -------------------------------------------------------------------- */

.ms-sol-mode-scambio .ms-sol {
	transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ms-sol-mode-scambio .ms-sol.is-open {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
}

/* La foto arretra e si abbassa: il testo che arriva ha bisogno di fondo
   calmo, e il movimento dice che il riquadro è passato in lettura. */
.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-bg {
	transform: scale(1.06);
	filter: brightness(0.6) saturate(0.85);
}

/* Il sommario si fa da parte senza lasciare un buco: resta al suo posto,
   solo più tenue. */
.ms-sol-mode-scambio .ms-sol-abstract {
	transition: opacity 0.3s ease;
}

.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-abstract {
	opacity: 0.45;
}

/* Le righe del testo entrano una dopo l'altra. */
.ms-sol-mode-scambio .ms-sol-detail-body > *,
.ms-sol-mode-scambio .ms-sol-detail-body li {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.34s ease, transform 0.44s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-detail-body > *,
.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-detail-body li {
	opacity: 1;
	transform: none;
}

.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-detail-body > *:nth-child(1) { transition-delay: 0.08s; }
.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-detail-body > *:nth-child(2) { transition-delay: 0.16s; }
.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-detail-body > *:nth-child(3) { transition-delay: 0.24s; }
.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-detail-body > *:nth-child(4) { transition-delay: 0.30s; }
.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-detail-body > *:nth-child(n+5) { transition-delay: 0.34s; }

.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-detail-body li:nth-child(1) { transition-delay: 0.14s; }
.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-detail-body li:nth-child(2) { transition-delay: 0.20s; }
.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-detail-body li:nth-child(3) { transition-delay: 0.26s; }
.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-detail-body li:nth-child(4) { transition-delay: 0.32s; }
.ms-sol-mode-scambio .ms-sol.is-open .ms-sol-detail-body li:nth-child(n+5) { transition-delay: 0.36s; }

/* In chiusura niente scaglionamento: sparire in fila è un'attesa inutile. */
.ms-sol-mode-scambio .ms-sol-detail-body > *,
.ms-sol-mode-scambio .ms-sol-detail-body li {
	transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
	.ms-sol-mode-scambio .ms-sol,
	.ms-sol-mode-scambio .ms-sol-bg,
	.ms-sol-mode-scambio .ms-sol-abstract,
	.ms-sol-mode-scambio .ms-sol-detail,
	.ms-sol-mode-scambio .ms-sol-detail-body > *,
	.ms-sol-mode-scambio .ms-sol-detail-body li {
		transition: none;
		transform: none;
	}
}

/* =========================================================================
   Convivenza con il tema

   Le tile sono superfici nostre, ma vivono dentro a Salient e contengono
   elementi del builder. Il tema ha impostazioni globali — arrotondamenti,
   altezze delle righe, larghezze a tutto schermo — pensate per le sezioni
   di pagina: applicate qui dentro deformano il riquadro. Qui le
   neutralizziamo dove ci passano sopra.
   ====================================================================== */

/* La forma la decide il riquadro. Il tema arrotonda immagini e superfici
   con un'opzione globale, e su una fascia larga un raggio grande la
   trasforma in una pastiglia. */
.mascherpa-soluzioni .ms-sol-bg,
.ms-sol-modale .ms-sol-bg,
.mascherpa-soluzioni .ms-sol-face,
.ms-sol-modale .ms-sol-face,
.mascherpa-soluzioni .ms-sol-face::after,
.ms-sol-modale .ms-sol-face::after,
.mascherpa-soluzioni .ms-sol-detail,
.ms-sol-modale .ms-sol-detail {
	/* Il ritaglio lo fa la tile con overflow:hidden. Se lo fa anche quello
	   che c'è dentro, e con un raggio che non è il nostro, la superficie
	   diventa un'altra forma. */
	border-radius: 0 !important;
}

.mascherpa-soluzioni .ms-sol-bg,
.ms-sol-modale .ms-sol-bg {
	/* Il lazy load del tema anima gli sfondi in entrata. */
	opacity: 1;
}

/* Quello che si trascina dentro a una tile sono elementi del builder: righe
   e colonne pensate per occupare la pagina. Dentro al riquadro non devono
   sfondare i bordi né imporre altezze proprie — è così che nascono le
   distese di bianco vuoto sotto al contenuto. */
/* Righe e sezioni: niente altezze dichiarate, niente fughe a tutto schermo.
   Una riga a piena larghezza dentro a un riquadro si porta dietro margini
   negativi e traslazioni calcolate sulla finestra del browser. */
.mascherpa-soluzioni .ms-sol-detail-body .vc_row,
.ms-sol-modale .ms-sol-detail-body .vc_row,
.mascherpa-soluzioni .ms-sol-detail-body .wpb_row,
.ms-sol-modale .ms-sol-detail-body .wpb_row,
.mascherpa-soluzioni .ms-sol-detail-body .vc_row-full-width,
.ms-sol-modale .ms-sol-detail-body .vc_row-full-width,
.mascherpa-soluzioni .ms-sol-detail-body .full-width-section,
.ms-sol-modale .ms-sol-detail-body .full-width-section,
.mascherpa-soluzioni .ms-sol-detail-body .full-width-content,
.ms-sol-modale .ms-sol-detail-body .full-width-content {
	margin-left: 0 !important;
	margin-right: 0 !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	max-width: 100% !important;
	min-height: 0 !important;
	height: auto !important;
	transform: none !important;
}

/* Colonne e involucri: la larghezza resta quella loro (una riga a due
   colonne deve restare a due colonne), si tolgono solo altezze e rientri
   pensati per la pagina. */
.mascherpa-soluzioni .ms-sol-detail-body .vc_column_container,
.ms-sol-modale .ms-sol-detail-body .vc_column_container,
.mascherpa-soluzioni .ms-sol-detail-body .vc_column-inner,
.ms-sol-modale .ms-sol-detail-body .vc_column-inner,
.mascherpa-soluzioni .ms-sol-detail-body .wpb_column,
.ms-sol-modale .ms-sol-detail-body .wpb_column,
.mascherpa-soluzioni .ms-sol-detail-body .wpb_wrapper,
.ms-sol-modale .ms-sol-detail-body .wpb_wrapper {
	padding-left: 0 !important;
	padding-right: 0 !important;
	min-height: 0 !important;
	height: auto !important;
}

.mascherpa-soluzioni .ms-sol-detail-body .wpb_content_element,
.ms-sol-modale .ms-sol-detail-body .wpb_content_element {
	margin-bottom: 14px;
}

.mascherpa-soluzioni .ms-sol-detail-body > *:last-child,
.ms-sol-modale .ms-sol-detail-body > *:last-child {
	margin-bottom: 0;
}

/* Le immagini del contenuto stanno dentro alla colonna, sempre. */
.mascherpa-soluzioni .ms-sol-detail-body img,
.ms-sol-modale .ms-sol-detail-body img {
	max-width: 100%;
	height: auto;
}

/* Nella finestra la scheda si stringe sul contenuto: senza, un elemento che
   si dichiara alto lascia una distesa vuota sotto al testo. */
.ms-sol-modale .ms-sol {
	height: auto !important;
}

.ms-sol-modale .ms-sol-detail {
	flex: 0 0 auto;
	height: auto !important;
}

.ms-sol-modale .ms-sol-detail-inner {
	height: auto;
}

.ms-sol-modale .ms-sol-face {
	flex: 0 0 auto;
}

/* Con contenuti veri serve più respiro di una scheda stretta. */
.ms-sol-finestra {
	max-width: 960px;
}

/* -------------------------------------------------------------------------
   Animazioni d'ingresso del tema dentro alle tile

   Salient fa entrare immagini ed elementi in dissolvenza quando arrivano
   nello schermo: finché non ci arrivano restano a opacità zero. Dentro a una
   tile chiusa, o dentro alla finestra — che vive fuori dal flusso della
   pagina — quell'innesco non scatta mai, e l'elemento resta invisibile pur
   occupando il suo spazio. È così che nasce la distesa di bianco.
   ---------------------------------------------------------------------- */

.mascherpa-soluzioni .ms-sol-detail-body [class*="img-with-ani"],
.ms-sol-modale .ms-sol-detail-body [class*="img-with-ani"],
.mascherpa-soluzioni .ms-sol-detail-body [class*="img-with-ani"] img,
.ms-sol-modale .ms-sol-detail-body [class*="img-with-ani"] img,
.mascherpa-soluzioni .ms-sol-detail-body .wpb_animate_when_almost_visible,
.ms-sol-modale .ms-sol-detail-body .wpb_animate_when_almost_visible,
.mascherpa-soluzioni .ms-sol-detail-body [data-animation],
.ms-sol-modale .ms-sol-detail-body [data-animation],
.mascherpa-soluzioni .ms-sol-detail-body .nectar-waypoint-el,
.ms-sol-modale .ms-sol-detail-body .nectar-waypoint-el {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	animation: none !important;
	filter: none !important;
}

/* Il filtro si ferma a "img-with-ani" apposta: nel tema quella classe è
   scritta "img-with-aniamtion-wrap", con il refuso. Allungandolo a
   "img-with-anima" non troverebbe più niente. */

/* -------------------------------------------------------------------------
   Testo del contenuto su tile scure

   Vale SOLO nell'apertura a scambio, dove il testo compare direttamente sul
   colore della tile: lì un titolo con un colore scuro dichiarato addosso —
   perché in pagina sta su fondo bianco — sparirebbe nel fondo.

   Negli altri due modi il pannello del testo ha fondo bianco suo, anche
   quando la tile è scura o colorata: lì forzare il chiaro darebbe bianco su
   bianco, ed è il motivo per cui questa regola non deve uscire da qui.
   ---------------------------------------------------------------------- */

.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail-body,
.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail-body p,
.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail-body li,
.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail-body strong,
.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail-body em {
	color: rgba(255, 255, 255, 0.92) !important;
}

.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail-body h1,
.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail-body h2,
.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail-body h3,
.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail-body h4,
.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail-body h5,
.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail-body h6 {
	color: #fff !important;
}

/* I bottoni hanno un fondo proprio: il colore del testo è affare loro. */
.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail-body a[class*="btn"],
.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail-body a[class*="button"],
.mascherpa-soluzioni.ms-sol-mode-scambio .ms-sol.is-dark .ms-sol-detail-body a[class*="btn"] * {
	color: inherit !important;
}

/* Lo scorrimento interno resta solo nei due casi in cui il testo davvero non
   ci sta: quando hai scelto di tenere l'altezza impostata, e quando il
   contenuto supera lo schermo e il tetto lo ha tagliato. */
.ms-sol-mode-scambio:not(.ms-sol-adatta) .ms-sol-detail,
.ms-sol-mode-scambio .ms-sol.ms-sol-eccede .ms-sol-detail {
	overflow-y: auto;
}

/* =========================================================================
   Loghi

   Due presentazioni. Il PNG nudo va bene dove c'è spazio e il marchio si
   legge in chiaro — le righe intere. Sulle tile strette invece i loghi
   arrivano con forme e proporzioni tutte diverse, e affiancati senza una
   cornice comune sembrano messi a caso: lì un quadrato bianco uguale per
   tutti, nello stesso angolo, li rimette in riga.
   ====================================================================== */

/* --- Riquadro bianco ---------------------------------------------------- */

.mascherpa-soluzioni.ms-sol-logo-box .ms-sol-logo-wrap,
.mascherpa-soluzioni.ms-sol-logo-auto .ms-sol:not(.ms-sol--11) .ms-sol-logo-wrap,
.ms-sol-modale.ms-sol-logo-box .ms-sol-logo-wrap,
.ms-sol-modale.ms-sol-logo-auto .ms-sol:not(.ms-sol--11) .ms-sol-logo-wrap {
	/* Ancorato all'angolo della tile. Ora che il logo non sta più dentro al
	   blocco di testo, il riferimento è la copertina — che riempie la tile —
	   e non il testo, che si sposta a seconda del modo. */
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	/* Quadrato inchiodato: le tre misure insieme impediscono a flexbox di
	   allungarlo o schiacciarlo, che è come diventava un rettangolo. */
	width: var(--sol-logo, 54px);
	min-width: var(--sol-logo, 54px);
	max-width: var(--sol-logo, 54px);
	height: var(--sol-logo, 54px);
	min-height: var(--sol-logo, 54px);
	max-height: var(--sol-logo, 54px);
	flex: 0 0 auto;

	margin: 0;
	/* Nessun margine interno: il logo deve riempire il quadrato. Con un
	   padding l'immagine si riduceva all'area interna — 42px dentro un
	   riquadro da 54 — e sembrava piccola e scentrata. */
	padding: 0;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.12);

	/* Niente può uscire dagli angoli tondi. */
	overflow: hidden;
}

/* Il logo si iscrive nel quadrato senza deformarsi, qualunque sia la sua
   proporzione: è tutto il punto del riquadro. */
.mascherpa-soluzioni.ms-sol-logo-box .ms-sol-logo-wrap img,
.mascherpa-soluzioni.ms-sol-logo-auto .ms-sol:not(.ms-sol--11) .ms-sol-logo-wrap img,
.ms-sol-modale.ms-sol-logo-box .ms-sol-logo-wrap img,
.ms-sol-modale.ms-sol-logo-auto .ms-sol:not(.ms-sol--11) .ms-sol-logo-wrap img {
	/* Larghezza e altezza piene, non "al massimo": con max-* e dimensioni
	   automatiche un logo piccolo resterebbe piccolo in mezzo al quadrato.
	   Così riempie, e object-fit gli impedisce di deformarsi qualunque sia
	   la sua proporzione. */
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* Dove il testo parte dall'alto il riquadro gli starebbe sopra: gli si fa
   spazio. Dove parte dal basso non serve, sono ai due estremi della tile. */
.mascherpa-soluzioni.ms-sol-mode-scambio.ms-sol-logo-box .ms-sol-face,
.mascherpa-soluzioni.ms-sol-mode-scambio.ms-sol-logo-auto .ms-sol:not(.ms-sol--11) .ms-sol-face {
	padding-top: calc(var(--sol-logo, 54px) + 30px);
}

/* --- PNG nudo ----------------------------------------------------------- */

.mascherpa-soluzioni.ms-sol-logo-png .ms-sol-logo-wrap,
.mascherpa-soluzioni.ms-sol-logo-auto .ms-sol--11 .ms-sol-logo-wrap,
.ms-sol-modale.ms-sol-logo-png .ms-sol-logo-wrap,
.ms-sol-modale.ms-sol-logo-auto .ms-sol--11 .ms-sol-logo-wrap {
	/* In flusso, sopra al testo. Relativo e non statico: sulle tile con
	   foto il velo scuro è un elemento posizionato, e un logo in flusso
	   statico finiva dipinto sotto — invisibile. */
	position: relative;
	z-index: 1;
	background: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	min-height: 0;
	max-height: none;
	padding: 0;
	margin: 0 0 12px;
}

.mascherpa-soluzioni.ms-sol-logo-png .ms-sol-logo-wrap img,
.mascherpa-soluzioni.ms-sol-logo-auto .ms-sol--11 .ms-sol-logo-wrap img,
.ms-sol-modale.ms-sol-logo-png .ms-sol-logo-wrap img,
.ms-sol-modale.ms-sol-logo-auto .ms-sol--11 .ms-sol-logo-wrap img {
	/* Altezza dichiarata, non "al massimo": un logo SVG senza dimensioni
	   proprie — e i loghi vettoriali spesso non le hanno — dentro a un
	   contenitore flessibile collassa a zero se gli si lascia l'altezza
	   automatica. Con una misura ferma la larghezza segue la proporzione. */
	height: var(--sol-logo, 54px);
	width: auto;
	max-width: 220px;
	max-height: none;
	object-fit: contain;
	object-position: left center;
}

@media (max-width: 680px) {
	.mascherpa-soluzioni.ms-sol-logo-box .ms-sol-logo-wrap,
	.mascherpa-soluzioni.ms-sol-logo-auto .ms-sol:not(.ms-sol--11) .ms-sol-logo-wrap {
		margin-bottom: 10px;
	}
}

/* =========================================================================
   Testata del pop-up

   Nella finestra il logo sta a fianco del titolo, non nell'angolo e non
   sopra: la testata dell'anteprima e il suo logo si spengono, e si accende
   la testata del pop-up, che porta il proprio titolo e il proprio logo
   (uguali a quelli dell'anteprima o diversi, lo decide la singola tile).

   La finestra ha anche la classe .mascherpa-soluzioni, quindi le regole
   qui sotto devono battere quelle generali: da qui il doppio selettore.
   ====================================================================== */

/* Selettori lunghi apposta: la regola del riquadro del logo usa un :not()
   e pesa quanto cinque classi; per spegnerla qui ce ne vogliono di più. */
.mascherpa-soluzioni.ms-sol-modale .ms-sol-finestra .ms-sol .ms-sol-face .ms-sol-head--closed,
.mascherpa-soluzioni.ms-sol-modale .ms-sol-finestra .ms-sol .ms-sol-face .ms-sol-logo-wrap {
	display: none;
}

.mascherpa-soluzioni.ms-sol-modale .ms-sol-face .ms-sol-head--open {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 18px;
	min-width: 0;
	width: 100%;
	/* Spazio per la X di chiusura, che sta nell'angolo in alto a destra
	   della scheda: un titolo lungo non deve finirci sotto. */
	padding-right: 36px;
}

.mascherpa-soluzioni.ms-sol-modale .ms-sol-open-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1 1 auto;
}

/* Il logo non si stringe né si allunga: la misura è la sua, il titolo si
   prende il resto della riga e va a capo se serve. */
.mascherpa-soluzioni.ms-sol-modale .ms-sol-open-logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

/* --- Nel riquadro bianco: stessa regola dell'anteprima ------------------ */

.mascherpa-soluzioni.ms-sol-modale.ms-sol-logo-box .ms-sol-open-logo-wrap,
.mascherpa-soluzioni.ms-sol-modale.ms-sol-logo-auto .ms-sol:not(.ms-sol--11) .ms-sol-open-logo-wrap {
	width: var(--sol-logo, 54px);
	min-width: var(--sol-logo, 54px);
	height: var(--sol-logo, 54px);
	min-height: var(--sol-logo, 54px);
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.12);
	overflow: hidden;
}

.mascherpa-soluzioni.ms-sol-modale.ms-sol-logo-box .ms-sol-open-logo-wrap img,
.mascherpa-soluzioni.ms-sol-modale.ms-sol-logo-auto .ms-sol:not(.ms-sol--11) .ms-sol-open-logo-wrap img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* --- PNG nudo ----------------------------------------------------------- */

.mascherpa-soluzioni.ms-sol-modale.ms-sol-logo-png .ms-sol-open-logo-wrap img,
.mascherpa-soluzioni.ms-sol-modale.ms-sol-logo-auto .ms-sol--11 .ms-sol-open-logo-wrap img {
	height: var(--sol-logo, 54px);
	width: auto;
	max-width: 200px;
	max-height: none;
	object-fit: contain;
	object-position: left center;
	display: block;
}

@media (max-width: 680px) {
	.mascherpa-soluzioni.ms-sol-modale .ms-sol-face .ms-sol-head--open {
		gap: 14px;
	}

	.mascherpa-soluzioni.ms-sol-modale.ms-sol-logo-png .ms-sol-open-logo-wrap img,
	.mascherpa-soluzioni.ms-sol-modale.ms-sol-logo-auto .ms-sol--11 .ms-sol-open-logo-wrap img {
		max-width: 140px;
	}
}