/*
 * Macchi — componenti usati dentro i template Elementor
 * Life Color — 12/10/2026 — cmd 007
 * Life Color — 12/10/2026 — cmd 008 — variabili temporanee della chiosa rimosse.
 * Life Color — 12/10/2026 — cmd 009 — Home: hero e card delle Soluzioni.
 * Life Color — 12/10/2026 — cmd 010 — Home: card dei settori e tag.
 * Life Color — 12/10/2026 — cmd 011 — Home: titoli maiuscoli, pulsante, passi del Metodo.
 * Life Color — 12/10/2026 — cmd 013 — pagina Settori: teal AA nei titoli chiari, titoli delle card senza maiuscole, voci apribili.
 * Life Color — 12/10/2026 — cmd 014 — pagina Azienda: citazione, numeri, segnaposto con proporzioni, valori a pillola.
 * Life Color — 12/10/2026 — cmd 015 — pagina Macchi Forma: logo, colonna ferma, schede, galleria orizzontale.
 * Life Color — 12/10/2026 — cmd 016 — pagina Soluzioni: cerchi del Macchi System, segnaposto dei materiali.
 * Life Color — 12/10/2026 — cmd 017 — pagina Contatti: recapiti, modulo, segnaposto della mappa.
 * Life Color — 13/10/2026 — cmd 017 — focus visibile su consenso e allegato del modulo.
 * Note: .ms-accent (parole evidenziate nei titoli) e chiosa (.ms-chiosa, template 007-chiosa.json).
 */

/* Parole in teal nei titoli: <span class="ms-accent"> nel testo del widget Titolo.
   Solo su sfondi scuri (teal su grafite 5,3:1); su sfondi chiari il teal non passa AA. */
.ms-accent {
	color: var(--ms-teal);
}

/* -------------------------------------------------------------------------------------- Chiosa */

/* Life Color — 12/10/2026 — cmd 008 — tolte le variabili temporanee del CMD 007: titolo e pulsante
   prendono peso, dimensioni e spaziatura direttamente dalle tipografie globali del kit. */

.ms-chiosa .elementor-heading-title {
	text-transform: uppercase;
}

.ms-chiosa .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.ms-chiosa .elementor-button:focus-visible {
	outline: 2px solid var(--ms-teal);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------------- Home: hero */
/* Life Color — 12/10/2026 — cmd 009 — titolo maiuscolo con alone bianco (Figma: ombra bianca 75 %,
   x 1, y 4, sfocatura 4,5) per staccarlo dall'immagine. Nessun ms-reveal: è l'elemento LCP. */
.ms-hero__title .elementor-heading-title {
	text-transform: uppercase;
	text-shadow: 1px 4px 4.5px rgba(255, 255, 255, 0.75);
}

.ms-hero__scroll .elementor-heading-title a {
	display: inline-block;
	padding: 9px 0;
	text-decoration: none;
}

.ms-hero__scroll .elementor-heading-title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ms-hero__scroll .elementor-heading-title a:focus-visible {
	outline: 2px solid var(--ms-focus); /* Life Color — 16/10/2026 — cmd 020 — focus AA invariato. */
	outline-offset: 3px;
}

/* Life Color — 22/10/2026 — cmd 046 — "Scorri in giù" / "Scroll down": 14 px, 700, spaziatura 0,28 px (maiuscolo invariato).
   Specificità 0,5,0 per battere la tipografia globale di Elementor (0,4,0). Link con padding 12 px: area cliccabile 45 px. */
.elementor .e-con.ms-hero .elementor-element.ms-hero__scroll .elementor-heading-title,
.elementor .e-con.ms-hero .elementor-element.ms-hero__scroll .elementor-heading-title a {
	font-size: 14px; /* Life Color — 22/10/2026 — cmd 048 — px: Astra riduce il font-size di html sotto i 922 px. */
	font-weight: 700;
	letter-spacing: 0.28px;
	line-height: 21px;
}

.elementor .e-con.ms-hero .elementor-element.ms-hero__scroll .elementor-heading-title a {
	padding-block: 12px;
}

/* Life Color — 21/10/2026 — cmd 029 — "Scorri in giù" sempre sotto il titolo: Elementor lo posiziona in assoluto
   con top fisso (598 px desktop, 85 % tablet, 75 % mobile) mentre il titolo è centrato in un'altezza variabile.
   Ancorato al fondo dell'hero; padding simmetrici (titolo centrato) che lasciano libera la fascia del link. */
.elementor .e-con.ms-hero .elementor-element.ms-hero__scroll {
	top: auto;
	bottom: clamp(1.5rem, 5vh, 3rem);
}

.elementor .e-con.ms-hero:has(> .ms-hero__scroll) {
	--padding-top: max(6rem, 10vh);
	--padding-bottom: max(6rem, 10vh);
}

/* ------------------------------------------------------------------------------------ Griglia */
/* Life Color — 21/10/2026 — cmd 031 — margine laterale minimo (--ms-gutter) per i testi. I Container boxed di primo
   livello hanno padding 0–2 % e l'interno a min(100%, 1024px): a 1100 px il testo partiva a 31 px. Il padding laterale
   diventa il maggiore tra quello di Elementor (var(--padding-*), valore del breakpoint attivo) e il margine minimo;
   sopra 1024 + 2 × margine l'interno resta centrato a 1024 (invariato). Esclusi: header, pile di card (ms-stack) e
   Container a piena larghezza (card, griglie), che hanno il loro padding. Selettore 0,4,0, più forte del CSS di Elementor. */
.elementor .e-con.e-parent.e-con-boxed:not(.ms-header):not(.ms-stack) {
	padding-inline-start: max(var(--ms-gutter), var(--padding-left, 0px));
	padding-inline-end: max(var(--ms-gutter), var(--padding-right, 0px));
}

/* Hero: il testo parte dal margine minimo anche nella Home, dove l'hero è a piena larghezza e il Container figlio con
   il titolo ha un suo padding del 2 % (sommato ai 10 px dell'hero faceva 31 px). Il padding passa tutto all'hero. */
.elementor .e-con.e-parent.ms-hero {
	padding-inline: var(--ms-gutter);
}

.elementor .e-con.e-parent.ms-hero > .e-con {
	padding-inline: 0;
}

/* Life Color — 21/10/2026 — cmd 032 — il Container figlio dell'hero (diretto nella Home, dentro e-con-inner nelle altre
   pagine) non ha padding proprio (Contatti aveva 10 px, le altre 0): lo scarto di --ms-inner-pad va sul suo e-con-inner,
   che resta centrato a 1024 px. Risultato: H1 e testi dell'hero alla x del testo delle sezioni (gutter o (W − 1024)/2, + 10 px). */
.elementor .e-con.e-parent.ms-hero > .e-con-inner > .e-con {
	padding-inline: 0;
}

.elementor .e-con.e-parent.ms-hero > .e-child > .e-con-inner,
.elementor .e-con.e-parent.ms-hero > .e-con-inner > .e-child > .e-con-inner {
	padding-inline: var(--ms-inner-pad);
}

/* "Scorri in giù" allineato all'inizio del testo dell'hero (100 % = larghezza dell'hero, che parte da x 0). Specificità
   0,5,1, più forte di body:not(.rtl) .elementor-element.elementor-element-ID { left } (0,3,1). */
body:not(.rtl) .elementor .e-con.ms-hero .elementor-element.ms-hero__scroll {
	/* cmd 032 — + --ms-inner-pad: stessa x del testo delle sezioni. */
	left: calc(max(var(--ms-gutter), (100% - 1024px) / 2) + var(--ms-inner-pad));
}

/* H1 della Home limitato in altezza (da 1025 px): a 1366 × 600 il titolo a 110 px su 3 righe arrivava a 22 px dal
   link. 15vh = 90 px a 600 di altezza; con finestre alte resta 110. Solo la Home ha ms-hero__title. Specificità 0,5,0. */
/* Life Color — 21/10/2026 — cmd 032 — H1 delle hero su mobile (< 768 px): 12,5vw (48,75 px a 390, 45 a 360), uguale su tutte
   le pagine, widget a tutta la larghezza utile (Azienda era 289 px e Settori 297 con "METACRILATO" di 329 a 390).
   Parole più lunghe a 44 px: SOLUTIONS. 262, PASSATO 192, PROGETTO. 243, METACRILATO 297, RACCONTACI 281. Specificità 0,5,1. */
@media (max-width: 767px) {
	.elementor .e-con.ms-hero h1.elementor-heading-title {
		font-size: 12.5vw;
		line-height: 1.05;
	}

	.elementor .e-con.ms-hero .elementor-element.ms-hero__title {
		width: 100%;
		max-width: 100%;
	}
}

@media (min-width: 1025px) {
	.elementor .e-con.ms-hero .ms-hero__title .elementor-heading-title {
		font-size: min(110px, 15vh);
		line-height: 1;
	}
}

/* ------------------------------------------------------------------------------ Card immagine */
/* Life Color — 12/10/2026 — cmd 009 — card con immagine di sfondo (Container con tag <a>).
   A riposo: velatura scura in basso sotto il testo bianco (AA). In hover/focus (Figma): +1 %,
   ombra del design system, gradiente teal dal basso, "» " prima del titolo; testo nero (6,7:1). */
.e-con.ms-card {
	overflow: hidden;
	isolation: isolate;
	color: var(--ms-white);
	text-decoration: none;
	box-shadow: inset 0 -150px 110px -40px rgba(26, 23, 27, 0.6);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.e-con.ms-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: linear-gradient(to bottom, rgba(0, 181, 175, 0) 0%, var(--ms-teal) 100%);
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.e-con.ms-card > * {
	position: relative;
	z-index: 1;
}

.e-con.ms-card .elementor-heading-title {
	color: var(--ms-white);
	transition: color 0.3s ease;
}

.e-con.ms-card:hover,
.e-con.ms-card:focus-visible {
	transform: scale(1.01);
	box-shadow: inset 0 0 0 0 rgba(26, 23, 27, 0), var(--ms-shadow);
}

.e-con.ms-card:hover::after,
.e-con.ms-card:focus-visible::after {
	opacity: 1;
}

.e-con.ms-card:hover .elementor-heading-title,
.e-con.ms-card:focus-visible .elementor-heading-title {
	color: var(--ms-nero);
}

.e-con.ms-card:hover .elementor-heading-title::before,
.e-con.ms-card:focus-visible .elementor-heading-title::before {
	content: "» ";
	content: "» " / "";
}

/* Life Color — 16/10/2026 — cmd 021 — con ms-reveal il titolo è spezzato in righe (.ms-line-mask > .ms-line, blocchi):
   la freccia va dentro la prima riga, altrimenti finisce su una riga sua. Senza spezzamento resta la regola sopra. */
.e-con.ms-card:hover .elementor-heading-title:has(.ms-line)::before,
.e-con.ms-card:focus-visible .elementor-heading-title:has(.ms-line)::before {
	content: none;
}

.e-con.ms-card:hover .elementor-heading-title .ms-line-mask:first-child .ms-line::before,
.e-con.ms-card:focus-visible .elementor-heading-title .ms-line-mask:first-child .ms-line::before {
	content: "» ";
	content: "» " / "";
}

.e-con.ms-card:focus-visible {
	outline: 2px solid var(--ms-focus); /* Life Color — 16/10/2026 — cmd 020 — focus AA invariato. */
	outline-offset: 4px;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
	.e-con.ms-card,
	.e-con.ms-card::after {
		transition: none;
	}

	.e-con.ms-card:hover,
	.e-con.ms-card:focus-visible {
		transform: none;
	}
}

/* ------------------------------------------------------------------------- Card dei settori */
/* Life Color — 12/10/2026 — cmd 010 — card scure a tutta larghezza (Figma CARD SETTORE): foto di
   sfondo, sfumatura nera da sinistra (61 % fino al 48 %), ombra del design system. Impilate con
   ms-stack sul Container padre (motion.css / macchi-motion.js). */
.e-con.ms-sector-card {
	overflow: hidden;
	isolation: isolate;
	box-shadow: var(--ms-shadow);
}

.e-con.ms-sector-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.61) 0%, rgba(0, 0, 0, 0.61) 48%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.e-con.ms-sector-card > * {
	position: relative;
	z-index: 1;
}

.ms-sector-card .elementor-heading-title {
	text-transform: uppercase;
}

.ms-sector-card .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Sotto i 768 px il testo occupa tutta la card: velatura uniforme più scura in basso. */
@media (max-width: 767px) {
	.e-con.ms-sector-card::after {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.72) 100%);
	}
}

/* Life Color — 21/10/2026 — cmd 030 — card "chiare" (classe ms-sector-card--light, solo Azienda/Storia): le foto
   storiche sono già scure, la velatura standard (61 %) le nascondeva. Velatura più leggera e sfumata, ombra sul
   testo per la leggibilità sulle zone chiare. Settori, Home e Macchi Forma non cambiano. */
.e-con.ms-sector-card.ms-sector-card--light::after {
	background: linear-gradient(to right, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 75%);
}

.ms-sector-card--light .elementor-heading-title,
.ms-sector-card--light .elementor-widget-text-editor,
.ms-sector-card--light .ms-tags {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

@media (max-width: 767px) {
	.e-con.ms-sector-card.ms-sector-card--light::after {
		/* Life Color — 21/10/2026 — cmd 032 — velatura uniforme (il gradiente .25 → .6 lasciava poco leggibili occhiello e titolo in alto). */
		background: rgba(0, 0, 0, 0.45);
	}
}

/* ------------------------------------------------------------------------------------- Tag */
/* Life Color — 12/10/2026 — cmd 010 — pillole grafite (Figma componente "Design"): carattere e
   colore del testo arrivano dal widget (globale Tag, Bianco). Hover teal: vedi sotto (cmd 020, esteso a tutte le card da cmd 028). */
.ms-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-tags li {
	margin: 0;
	padding: 3px 12px;
	border-radius: var(--ms-radius-full);
	background-color: var(--ms-grafite);
}

/* Life Color — 16/10/2026 — cmd 020 — tag delle card: al passaggio del mouse sfondo #00b5af, testo bianco invariato
   (Figma, Design System, componente "Design" 97:154, variante 2). Solo con dispositivi che hanno l'hover (niente stato "bloccato" al tocco).
   Life Color — 21/10/2026 — cmd 028 — esteso a tutti i tag (.ms-tags li), Materioteca compresa, in tutte le pagine. */
.ms-tags li {
	cursor: default;
	transition: background-color 0.2s ease;
}

@media (hover: hover) {
	.ms-tags li:hover {
		background-color: var(--ms-teal-text);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ms-tags li {
		transition: none;
	}
}

/* ----------------------------------------------------------------------------- Titoli maiuscoli */
/* Life Color — 12/10/2026 — cmd 011 — titoli di sezione scritti in maiuscolo nel Figma. */
.ms-upper .elementor-heading-title {
	text-transform: uppercase;
}

/* ------------------------------------------------------------------------- Pulsante a pillola */
/* Life Color — 12/10/2026 — cmd 011 — colori dai globali nel widget (grafite → teal con testo nero);
   qui solo l'anello di focus. */
.ms-btn .elementor-button:focus-visible {
	outline: 2px solid var(--ms-focus); /* Life Color — 16/10/2026 — cmd 020 — focus AA invariato. */
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------- Passi del Metodo */
/* Life Color — 12/10/2026 — cmd 011 — Figma "Frame 4–8": chiuso 366 px grigio, aperto 957 px teal con la
   descrizione (hover nel Figma; qui anche focus da tastiera: tabindex sul Container). La descrizione resta
   nel DOM (nascosta solo visivamente) e sotto i 1025 px i passi sono sempre aperti. */
.e-con.ms-step {
	--flex-wrap: nowrap;
	background-color: var(--ms-gray-soft);
	transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}

.ms-step .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.ms-step__desc {
	flex: 1 1 auto;
}

@media (min-width: 1025px) {
	.e-con.ms-step {
		/* Life Color — 22/10/2026 — cmd 046 — passo chiuso da 366 a 410 px: "Development" (EN, 292 px a 48 px) entra nella pillola. */
		--width: 410px;
		width: 410px;
	}

	/* Life Color — 12/10/2026 — cmd 011 rettifica A — da chiuso nessuno spazio tra gli elementi: numero a
	   sinistra e nome a destra (space-between, come nel Figma). Con lo spazio di 40 px del template
	   "Produzione" (250 px) non stava nei 302 px utili. Da aperto lo spazio è 20 px (vedi sotto).
	   Selettori più specifici della regola di Elementor sull'elemento (--column-gap in post-9.css). */
	.elementor .elementor-element.e-con.ms-step {
		--column-gap: 0px;
		transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), column-gap 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
	}

	/* Life Color — 12/10/2026 — cmd 011 rettifica A — selettori più specifici: la regola di Elementor
	   ".elementor.elementor .e-con > .elementor-widget { max-width: 100% }" annullava max-width: 0 e la
	   descrizione invisibile occupava spazio, spingendo il nome fuori dal passo chiuso. */
	.elementor .e-con.ms-step > .elementor-widget.ms-step__desc {
		max-width: 0;
		opacity: 0;
		overflow: hidden;
		white-space: nowrap;
		transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
	}

	.e-con.ms-step:hover,
	.e-con.ms-step:focus,
	.e-con.ms-step:focus-within {
		--width: 957px;
		width: 957px;
		background-color: var(--ms-teal);
	}

	/* Da aperto 20 px: con 40 px nel passo 4 ("Realizzazione serie e controllo qualità", 570 px, e
	   "Produzione", 250 px) servivano 928 px sugli 893 utili e la descrizione veniva tagliata. */
	.elementor .elementor-element.e-con.ms-step:hover,
	.elementor .elementor-element.e-con.ms-step:focus,
	.elementor .elementor-element.e-con.ms-step:focus-within {
		--column-gap: 20px;
	}

	.elementor .e-con.ms-step:hover > .elementor-widget.ms-step__desc,
	.elementor .e-con.ms-step:focus > .elementor-widget.ms-step__desc,
	.elementor .e-con.ms-step:focus-within > .elementor-widget.ms-step__desc {
		max-width: 680px;
		opacity: 1;
	}
}

.e-con.ms-step:focus {
	outline: none;
}

.e-con.ms-step:focus-visible {
	outline: 2px solid var(--ms-focus); /* Life Color — 16/10/2026 — cmd 020 — focus AA invariato. */
	outline-offset: 4px;
}

/* Tablet e telefono: numero e nome sulla prima riga, descrizione sotto.
   Life Color — 19/10/2026 — cmd 026 — chiusi; al tocco (classe is-open da macchi-faq.js) fondo teal e descrizione visibile. */
@media (max-width: 1024px) {
	.e-con.ms-step {
		--flex-wrap: wrap;
		--width: 100%;
		width: 100%;
		cursor: pointer;
	}

	.ms-step .ms-step__desc {
		order: 3;
		flex-basis: 100%;
	}

	.elementor .elementor-element.e-con.ms-step:not(.is-open) {
		--row-gap: 0px;
	}

	.elementor .e-con.ms-step > .elementor-widget.ms-step__desc {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
	}

	.e-con.ms-step.is-open {
		background-color: var(--ms-teal);
	}

	.elementor .e-con.ms-step.is-open > .elementor-widget.ms-step__desc {
		max-height: 400px;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.e-con.ms-step,
	.elementor .elementor-element.e-con.ms-step,
	.elementor .e-con.ms-step > .elementor-widget.ms-step__desc { /* Life Color — 12/10/2026 — cmd 011 rettifica A — stessa specificità delle regole desktop. */
		transition: none;
	}
}

/* ------------------------------------------------------------------ Pagina Settori (CMD 013) */
/* Life Color — 12/10/2026 — cmd 013 — parole in teal nei titoli su sfondo CHIARO: "Teal testo (AA)"
   (5,1:1 su bianco). Il teal del brand su bianco è 2,6:1 e non passa AA nemmeno per i titoli grandi.
   Su sfondo scuro resta .ms-accent.
   Life Color — 16/10/2026 — cmd 020 — ora #00b5af (--ms-teal-text), non più AA su bianco: decisione della persona. */
.ms-accent-aa {
	color: var(--ms-teal-text);
}

/* Life Color — 12/10/2026 — cmd 013 — card dei settori della pagina Settori: titolo con le maiuscole
   del Figma ("Design e arredo"), mentre nella Home resta tutto maiuscolo. L'occhiello è maiuscolo
   dalla tipografia globale "Pulsante". */
.ms-sector-card .ms-nocase .elementor-heading-title {
	text-transform: none;
}

/* Life Color — 12/10/2026 — cmd 013 — le card hanno un id (#medicale, #posateria…) per i link del
   footer: l'ancora si ferma sotto l'header fisso. */
.e-con.ms-sector-card {
	scroll-margin-top: var(--ms-stack-top, 6rem);
}

/* ------------------------------------------------------------------- Voci apribili (ms-faq) */
/* Life Color — 12/10/2026 — cmd 013 — "Perché Macchi" (Figma "Frame 51": chiusa 67 px, aperta 167 px).
   <details>/<summary> nativi: tastiera (Invio / Spazio) e lettori di schermo senza JavaScript.
   Il "+" a destra non è nel Figma: indica che la voce si apre (diventa × da aperta).
   Life Color — 19/10/2026 — cmd 022 — con il mouse le voci si aprono al passaggio (macchi-faq.js). */
.ms-faq {
	display: flex;
	flex-direction: column;
	gap: 34px;
}

.ms-faq__item {
	margin: 0;
}

.ms-faq__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 10px;
	border-bottom: 4px solid var(--ms-teal);
	list-style: none;
	cursor: pointer;
}

.ms-faq__title::-webkit-details-marker {
	display: none;
}

.ms-faq__title::after {
	content: "";
	flex: 0 0 20px;
	height: 20px;
	background:
		linear-gradient(var(--ms-teal), var(--ms-teal)) center / 100% 2px no-repeat,
		linear-gradient(var(--ms-teal), var(--ms-teal)) center / 2px 100% no-repeat;
	transition: transform 0.3s ease;
}

.ms-faq__item[open] > .ms-faq__title::after {
	transform: rotate(45deg);
}

/* Life Color — 19/10/2026 — cmd 026 — con il mouse le voci si aprono al passaggio (macchi-faq.js): il "+" non serve.
   Resta su touch, dove si aprono al tocco. */
@media (hover: hover) and (pointer: fine) {
	.ms-faq__title::after {
		display: none;
	}
}

.ms-faq .ms-faq__heading {
	margin: 0;
	font-family: var(--e-global-typography-msh4-font-family), sans-serif;
	font-size: var(--e-global-typography-msh4-font-size);
	font-weight: var(--e-global-typography-msh4-font-weight);
	line-height: var(--e-global-typography-msh4-line-height);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ms-white);
	transition: color 0.2s ease;
}

.ms-faq__title:hover .ms-faq__heading {
	color: var(--ms-teal);
}

.ms-faq__title:focus-visible {
	outline: 2px solid var(--ms-teal);
	outline-offset: 4px;
}

.ms-faq__body {
	display: flex;
	align-items: flex-start;
	padding-top: 10px;
}

/* Life Color — 19/10/2026 — cmd 022 — la voce si apre al passaggio del mouse (macchi-faq.js): il testo entra in
   dissolvenza, così lo spostamento delle voci sotto è meno brusco. */
.ms-faq__item[open] > .ms-faq__body {
	animation: ms-faq-in 0.35s ease both;
}

@keyframes ms-faq-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ms-faq__num {
	flex: 0 0 clamp(64px, 6.75vw, 97px);
	font-family: var(--e-global-typography-msh4-font-family), sans-serif;
	font-size: clamp(56px, 6.67vw, 96px);
	font-weight: 200;
	line-height: 0.84;
	letter-spacing: -0.02em;
	color: var(--ms-teal);
}

.ms-faq__body p {
	margin: 0;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 18px;
	line-height: 26px;
	color: var(--ms-white);
}

@media (prefers-reduced-motion: reduce) {
	.ms-faq__title::after,
	.ms-faq .ms-faq__heading {
		transition: none;
	}

	.ms-faq__item[open] > .ms-faq__body {
		animation: none;
	}
}

/* ------------------------------------------------------------------ Pagina Azienda (CMD 014) */
/* Life Color — 12/10/2026 — cmd 014 — titoli con le maiuscole del testo (anche fuori dalle card). */
.ms-nocase .elementor-heading-title {
	text-transform: none;
}

/* Life Color — 12/10/2026 — cmd 014 — citazione del manifesto (Figma ExtraLight 50/53, globale
   "Sottotitolo / citazione"); le parole in grassetto restano nel corpo della citazione. */
.ms-quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

.ms-quote p {
	margin: 0;
}

.ms-quote strong {
	font-weight: 700;
}

/* Life Color — 12/10/2026 — cmd 014 — etichette dei numeri (Figma Regular 24/27, spaziatura 6 %). */
.ms-stat__label .elementor-heading-title {
	letter-spacing: 0.06em;
}

/* Life Color — 12/10/2026 — cmd 014 — segnaposto con proporzioni fisse per video, mappa e ritratti, in attesa
   dei file del cliente: Container vuoto con fondo Grigio chiaro. */
.e-con.ms-ratio {
	min-height: 0;
	height: auto;
}

.e-con.ms-ratio-video {
	aspect-ratio: 839 / 472;
}

.e-con.ms-ratio-map {
	aspect-ratio: 413 / 658;
}

/* Life Color — 16/10/2026 — cmd 021 — segnaposto "MACCHI SERAFINO" sull'immagine del Territorio, come nel Figma
   (nodo 447:1406, immagine 413 × 658: triangolo teal 32 × 53 con la punta sullo stabilimento a x 53,9 % y 45 %,
   scritta bianca su 2 righe sopra). Misure in % e in cqi (larghezza del riquadro), quindi il segnaposto resta sullo
   stabilimento a ogni larghezza. Decorativo: la didascalia sotto la mappa dice già il luogo. */
.e-con.ms-ratio-map {
	position: relative;
	container-type: inline-size;
}

.e-con.ms-ratio-map::before {
	content: "MACCHI\A SERAFINO";
	content: "MACCHI\A SERAFINO" / "";
	position: absolute;
	left: 52.9%;
	top: 28.3%;
	transform: translateX(-50%);
	z-index: 1;
	white-space: pre;
	text-align: center;
	font-family: var(--ms-font);
	font-weight: 300;
	font-size: 4.1cqi;
	line-height: 1.12;
	letter-spacing: 0;
	color: var(--ms-white);
	pointer-events: none;
}

.e-con.ms-ratio-map::after {
	content: "";
	position: absolute;
	left: 50.1%;
	top: 37.1%;
	z-index: 1;
	width: 7.75%;
	aspect-ratio: 32 / 53;
	background-color: var(--ms-teal);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	pointer-events: none;
}

.e-con.ms-ratio-square {
	aspect-ratio: 1 / 1;
}

/* ----------------------------------------------------------------------- Valori (ms-values) */
/* Life Color — 12/10/2026 — cmd 014 — Figma "Frame 27–39": pillola 253 × 70 grigia, aperta 253 × 253 teal con
   la descrizione (hover nel Figma; qui anche focus da tastiera: tabindex sul Container). Le righe della griglia
   sono alte 70 px: la pillola aperta si allunga sopra lo spazio sotto, senza spostare le altre.
   Testi neri anche sul teal (AA: il bianco sul teal è 2,6:1). Sotto i 1025 px chiuse, aperte al tocco (cmd 026).
   Life Color — 16/10/2026 — cmd 021 — le colonne sono di un terzo della larghezza boxed, lo spazio tra le righe
   dipende dall'altezza della pillola aperta e in hover i testi sono bianchi. */
.e-con.ms-values {
	--display: grid;
	display: grid;
	/* Life Color — 16/10/2026 — cmd 021 — 3 colonne di un terzo della larghezza boxed (richiesta della persona). */
	width: 100%;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 70px;
	column-gap: 20px;
	/* Life Color — 21/10/2026 — cmd 030 — sostituisce il row-gap 164 px del cmd 021 (calcolo mai misurato): da 1025 px
	   le righe sono auto e la pillola aperta spinge giù la riga sotto (vedi media query). */
	row-gap: 20px;
	align-items: start;
}

.e-con.ms-value {
	position: relative;
	z-index: 1;
	/* Life Color — 16/10/2026 — cmd 021 — larghezza della colonna. */
	--width: 100%;
	width: 100%;
	max-height: 70px;
	overflow: hidden;
	background-color: var(--ms-gray-soft);
	transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}

.ms-value .elementor-heading-title {
	white-space: nowrap;
}

.ms-value .ms-value__name .elementor-heading-title {
	font-weight: 200;
	letter-spacing: -0.02em;
}

.ms-value .ms-value__desc {
	opacity: 0;
	transition: opacity 0.3s ease 0.1s;
}

.ms-value .ms-value__desc p:last-child {
	margin-bottom: 0;
}

/* Riga interna (Container senza classe, primo figlio): numero + nome centrati nei 70 px della pillola chiusa
   (16 + 38 + 16), nome subito dopo il numero (12 px), stessa linea di base. Selettori più specifici del CSS di
   pagina di Elementor.
   Life Color — 21/10/2026 — cmd 031 — regole del cmd 030 spostate fuori dalla media query min-width 1025px: valgono a ogni
   larghezza (prima sotto i 1025 px il nome era allineato a destra e la riga a 20–22 px). Non toccano is-open (cmd 026). */
.elementor .e-con.ms-value {
	padding: 16px 25px 20px;
}

.elementor .e-con.ms-value > .e-con:first-child {
	flex-shrink: 0;
	justify-content: flex-start;
	align-items: baseline;
	gap: 12px;
}

.elementor .e-con.ms-value > .elementor-element.ms-value__desc {
	margin-top: 8px; /* 4 px di gap del Container + 8 = 12 px sotto la riga */
}

/* Sotto i 1025 px numero e nome sono più piccoli e la riga è più bassa di 38 px: altezza minima 38 e riga centrata,
   così da chiusa resta a 16 px dall'alto e dal basso come da 1025 px. */
@media (max-width: 1024px) {
	.elementor .e-con.ms-value > .e-con:first-child {
		flex-wrap: wrap;
		align-content: center;
		min-height: 38px;
	}
}

@media (min-width: 1025px) {
	/* Life Color — 21/10/2026 — cmd 030 — righe che crescono: la pillola aperta spinge giù quella sotto, senza
	   sovrapposizioni (il row-gap fisso da 164 px del cmd 021 non serve più). */
	.e-con.ms-values {
		grid-auto-rows: auto;
		row-gap: 20px;
		align-items: start;
	}

	.e-con.ms-value:hover,
	.e-con.ms-value:focus,
	.e-con.ms-value:focus-within {
		z-index: 2;
		max-height: 360px;
		background-color: var(--ms-teal);
	}

	.e-con.ms-value:hover .ms-value__desc,
	.e-con.ms-value:focus .ms-value__desc,
	.e-con.ms-value:focus-within .ms-value__desc {
		opacity: 1;
	}

	/* Life Color — 16/10/2026 — cmd 021 — pillola aperta: numero, nome e descrizione bianchi (richiesta della persona;
	   bianco su teal ≈ 2,6:1, non AA). Selettori più specifici del CSS di pagina di Elementor (0,4,0). */
	.elementor .e-con .e-con.ms-value:hover .elementor-heading-title,
	.elementor .e-con .e-con.ms-value:focus .elementor-heading-title,
	.elementor .e-con .e-con.ms-value:focus-within .elementor-heading-title,
	.elementor .e-con .e-con.ms-value:hover .elementor-element.ms-value__desc,
	.elementor .e-con .e-con.ms-value:focus .elementor-element.ms-value__desc,
	.elementor .e-con .e-con.ms-value:focus-within .elementor-element.ms-value__desc,
	.elementor .e-con .e-con.ms-value:hover .elementor-element.ms-value__desc *,
	.elementor .e-con .e-con.ms-value:focus .elementor-element.ms-value__desc *,
	.elementor .e-con .e-con.ms-value:focus-within .elementor-element.ms-value__desc * {
		color: var(--ms-white);
	}
}

/* Life Color — 16/10/2026 — cmd 021 — transizione di colore dei testi dei valori. */
.ms-value .elementor-heading-title,
.ms-value .ms-value__desc,
.ms-value .ms-value__desc * {
	transition: color 0.3s ease;
}

.e-con.ms-value:focus {
	outline: none;
}

.e-con.ms-value:focus-visible {
	outline: 2px solid var(--ms-focus); /* Life Color — 16/10/2026 — cmd 020 — focus AA invariato. */
	outline-offset: 4px;
}

@media (max-width: 1024px) {
	.e-con.ms-values {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
		row-gap: 20px;
	}

	.e-con.ms-value {
		--width: auto;
		width: auto;
		max-height: 70px;
		cursor: pointer;
	}

	.ms-value .ms-value__desc {
		opacity: 0;
	}

	/* Life Color — 19/10/2026 — cmd 026 — chiuse; al tocco (is-open) aperte come su desktop: fondo teal, testi bianchi. */
	.e-con.ms-value.is-open {
		max-height: 600px;
		background-color: var(--ms-teal);
	}

	.e-con.ms-value.is-open .ms-value__desc {
		opacity: 1;
	}

	.elementor .e-con .e-con.ms-value.is-open .elementor-heading-title,
	.elementor .e-con .e-con.ms-value.is-open .elementor-element.ms-value__desc,
	.elementor .e-con .e-con.ms-value.is-open .elementor-element.ms-value__desc * {
		color: var(--ms-white);
	}
}

@media (max-width: 767px) {
	.e-con.ms-values {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.e-con.ms-value,
	.ms-value .ms-value__desc,
	.ms-value .ms-value__desc *,
	.ms-value .elementor-heading-title {
		transition: none;
	}
}

/* Life Color — 12/10/2026 — cmd 014 — correzioni dalla verifica 7 (approvate dalla persona):
   - la citazione prendeva da Astra blockquote { font-size: 1.1em; color: --ast-global-color-3 } (52,8 px, grigio
     ardesia): ora eredita dimensione e colore dal widget (globale "Sottotitolo / citazione", 48 px);
   - nomi dei valori ed etichette dei numeri: la regola del widget nel CSS di pagina di Elementor (0,4,0) annullava
     il peso 200 e la spaziatura 6 %; selettori più specifici. */
.ms-quote {
	font-size: inherit;
	color: inherit;
}

.elementor .e-con .elementor-element.ms-stat__label .elementor-heading-title {
	letter-spacing: 0.06em;
}

.elementor .e-con .ms-value .elementor-element.ms-value__name .elementor-heading-title {
	font-weight: 200;
}

/* Life Color — 16/10/2026 — cmd 021 — Quarta generazione: Sofia a sinistra e Virginia a destra, due colonne uguali
   in riga (richiesta della persona). Le due schede sono Container con il ritratto (.ms-ratio-square) come primo figlio
   diretto: con width 50 % + spazio 23 px la riga andava a capo. Dai 768 px in su: niente a capo, colonne flessibili
   uguali, allineate in alto. Sotto i 768 px restano una sotto l'altra. */
@media (min-width: 768px) {
	.elementor .e-con:has(> .e-con > .e-con.ms-ratio-square) {
		--flex-wrap: nowrap;
		flex-wrap: nowrap;
		--align-items: flex-start;
		align-items: flex-start;
	}

	.elementor .e-con:has(> .e-con > .e-con.ms-ratio-square) > .e-con:has(> .e-con.ms-ratio-square) {
		--width: auto;
		width: auto;
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ------------------------------------------------------------- Pagina Macchi Forma (CMD 015) */
/* Life Color — 12/10/2026 — cmd 015 — logo Macchi Forma nell'hero (SVG del Figma, 638 × 170). */
.ms-mf-logo {
	display: block;
	width: 638px;
	max-width: 100%;
	height: auto;
}

/* Life Color — 12/10/2026 — cmd 015 — testi Regular su una tipografia globale ExtraLight (Figma Regular 48:
   H1 dell'hero e testi delle schede). Selettore 0,5,0: vedi CLAUDE.md §4. */
.elementor .e-con .elementor-element.ms-regular .elementor-heading-title {
	font-weight: 400;
}

/* Life Color — 12/10/2026 — cmd 015 — "Cosa troverai in MACCHI FORMA.": prima riga piccola nera (Figma
   ExtraLight 40), poi il nome in teal (Figma 90, qui globale "Titolo sezione" 72) con MACCHI in grassetto. */
.ms-mf-title .ms-mf-title__small {
	display: block;
	font-size: 0.56em;
	color: var(--ms-nero);
}

.ms-mf-title strong {
	font-weight: 700;
}

/* Life Color — 12/10/2026 — cmd 015 — colonna che resta ferma mentre scorrono le schede (stesse condizioni
   della pila: da 1025 px, finestra alta almeno 760 px, movimento non ridotto). */
@media (min-width: 1025px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
	.e-con.ms-sticky {
		position: sticky;
		top: var(--ms-stack-top, 6rem);
		align-self: flex-start;
	}
}

/* Life Color — 12/10/2026 — cmd 015 — schede di "Cosa troverai" (Figma "SCHEDA1": 625 × 650, raggio 60):
   stesso componente delle card dei settori, con la velatura dall'alto (nera 80 % → 35 %). */
.e-con.ms-sector-card.ms-mf-card::after {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.ms-tags.ms-tags--col {
	flex-direction: column;
	align-items: flex-start;
}

/* ------------------------------------------------------------- Galleria orizzontale (ms-gallery) */
/* Life Color — 12/10/2026 — cmd 015 — Figma "Galleria": finestra 411 × 520, foto 300 × 520 (raggio 32, spazio 25)
   che scorrono in orizzontale. Scorrimento nativo con aggancio (trackpad, touch, frecce da tastiera dopo il Tab).
   Le foto non ci sono ancora: riquadri Grigio chiaro. */
.ms-gallery {
	display: flex;
	gap: 25px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: 8px;
}

.ms-gallery__item {
	flex: 0 0 300px;
	height: 520px;
	border-radius: 32px;
	background-color: var(--ms-gray-light);
	scroll-snap-align: start;
}

.ms-gallery:focus-visible {
	outline: 2px solid var(--ms-focus); /* Life Color — 16/10/2026 — cmd 020 — focus AA invariato. */
	outline-offset: 4px;
}

@media (max-width: 767px) {
	.ms-gallery__item {
		flex-basis: 75%;
		height: 420px;
	}
}

/* --------------------------------------------------------------- Pagina Soluzioni (CMD 016) */
/* Life Color — 12/10/2026 — cmd 016 — segnaposto delle foto dei materiali (Figma 628 × 430, raggio 47). */
.e-con.ms-ratio-material {
	aspect-ratio: 628 / 430;
}

/* Life Color — 19/10/2026 — cmd 022 — materiali impilati (ms-stack ms-stack--flat sul Container 96a9fd9):
   le card della pila devono avere uno sfondo pieno, altrimenti la card che sale mostra quella sotto.
   Sfondo bianco come la sezione; vale sempre (anche senza pila non cambia nulla a vista). */
.ms-stack--flat > .e-con,
.ms-stack--flat > .e-con-inner > .e-con {
	background-color: var(--ms-white);
}

/* ------------------------------------------------------------ Macchi System (ms-circles) */
/* Life Color — 12/10/2026 — cmd 016 — Figma "bottoni": cerchi 160 × 160 Grigio chiaro con il numero; aperti
   160 × 276 teal con il nome del passo (hover nel Figma; qui anche focus da tastiera: tabindex sul Container).
   La riga è alta almeno 320 px: il cerchio che si allunga non sposta la sezione sotto. Testi neri (AA: il
   bianco del Figma su grigio chiaro è 2,4:1 e su teal 2,6:1). Sotto i 1025 px in colonna, chiusi 160 × 160, aperti al tocco in orizzontale con il nome accanto al numero (cmd 027). */
.e-con.ms-circle {
	--width: 160px;
	width: 160px;
	max-height: 160px;
	overflow: hidden;
	background-color: var(--ms-gray-light);
	text-align: center;
	transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}

.elementor .e-con .ms-circle .elementor-element.ms-circle__label {
	opacity: 0;
	transition: opacity 0.3s ease 0.1s;
}

@media (min-width: 1025px) {
	.e-con.ms-circle:hover,
	.e-con.ms-circle:focus,
	.e-con.ms-circle:focus-within {
		/* Life Color — 19/10/2026 — cmd 026 — altezza uniforme da aperti: 160 × 276 come nel Figma (prima 212–275 secondo il nome). */
		--min-height: 276px;
		min-height: 276px;
		max-height: 276px;
		background-color: var(--ms-teal);
	}

	.elementor .e-con .ms-circle:hover .elementor-element.ms-circle__label,
	.elementor .e-con .ms-circle:focus .elementor-element.ms-circle__label,
	.elementor .e-con .ms-circle:focus-within .elementor-element.ms-circle__label {
		opacity: 1;
	}
}

.e-con.ms-circle:focus {
	outline: none;
}

.e-con.ms-circle:focus-visible {
	outline: 2px solid var(--ms-focus); /* Life Color — 16/10/2026 — cmd 020 — focus AA invariato. */
	outline-offset: 4px;
}

@media (max-width: 1024px) {
	/* Life Color — 19/10/2026 — cmd 027 — su telefoni e tablet i pallini stanno uno sotto l'altro, centrati. Chiusi: cerchio
	   160 × 160 con il numero al centro. Al tocco (is-open, macchi-faq.js) si allungano in orizzontale fino alla larghezza
	   utile e il nome compare a destra del numero (decisione della persona). Sostituisce l'apertura in verticale del cmd 026. */
	.e-con.ms-circles > .e-con-inner {
		--flex-direction: column;
		flex-direction: column;
		--flex-wrap: nowrap;
		flex-wrap: nowrap;
		--align-items: center;
		align-items: center;
	}

	.elementor .elementor-element.e-con.ms-circle {
		--flex-direction: row;
		flex-direction: row;
		--flex-wrap: nowrap;
		flex-wrap: nowrap;
		--justify-content: center;
		justify-content: center;
		--align-items: center;
		align-items: center;
		--width: 160px;
		width: 160px;
		--min-height: 160px;
		min-height: 160px;
		height: 160px;
		max-height: 160px;
		--padding-top: 0px;
		--padding-bottom: 0px;
		--padding-left: 32px;
		--padding-right: 32px;
		padding: 0 32px;
		--column-gap: 0px;
		column-gap: 0;
		cursor: pointer;
		transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), column-gap 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
	}

	.elementor .e-con .ms-circle .elementor-element.ms-circle__label {
		flex: 0 1 auto;
		max-width: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease 0.1s;
	}

	.elementor .e-con .ms-circle .elementor-element.ms-circle__label .elementor-heading-title {
		text-align: left;
	}

	.elementor .elementor-element.e-con.ms-circle.is-open {
		--width: 100%;
		width: 100%;
		--column-gap: 16px;
		column-gap: 16px;
		background-color: var(--ms-teal);
	}

	.elementor .e-con .ms-circle.is-open .elementor-element.ms-circle__label {
		max-width: 240px;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.e-con.ms-circle,
	.elementor .elementor-element.e-con.ms-circle,
	.elementor .e-con .ms-circle .elementor-element.ms-circle__label {
		transition: none;
	}
}

/* Life Color — 12/10/2026 — cmd 016 — correzione dalla verifica 9 (approvata dalla persona): in una riga con
   un testo largo (Macchi System, 768–1024 px) il widget del pulsante si restringeva e "Invia le specifiche"
   andava a capo (147 × 71). Il pulsante non si restringe e il testo resta su una riga. */
.elementor .e-con .elementor-element.ms-btn {
	flex-shrink: 0;
}

.elementor .e-con .elementor-element.ms-btn .elementor-button {
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Pagina Contatti (CMD 017) */
/* Life Color — 12/10/2026 — cmd 017 — segnaposto della mappa "Vieni a trovarci" (Figma 844 × 526). */
.e-con.ms-ratio-contact-map {
	aspect-ratio: 844 / 526;
}

/* Life Color — 19/10/2026 — cmd 022 — segnaposto "MACCHI SERAFINO" sulla mappa di Contatti, come nel Figma
   (nodo 506:1706, 844 × 526: triangolo teal 32 × 53 con la punta sullo stabilimento a x 53,7 % y 39,8 %, scritta
   bianca su 2 righe sopra). Stesso disegno del Territorio di Azienda (cmd 021), misure in % e in cqi. Decorativo:
   l'indirizzo è scritto sopra la mappa. */
.e-con.ms-ratio-contact-map {
	position: relative;
	container-type: inline-size;
}

.e-con.ms-ratio-contact-map::before {
	content: "MACCHI\A SERAFINO";
	content: "MACCHI\A SERAFINO" / "";
	position: absolute;
	left: 53.7%;
	top: 18.9%;
	transform: translateX(-50%);
	z-index: 1;
	white-space: pre;
	text-align: center;
	font-family: var(--ms-font);
	font-weight: 300;
	font-size: 2.01cqi;
	line-height: 1.12;
	letter-spacing: 0;
	color: var(--ms-white);
	pointer-events: none;
}

.e-con.ms-ratio-contact-map::after {
	content: "";
	position: absolute;
	left: 51.9%;
	top: 29.85%;
	z-index: 1;
	width: 3.79%;
	aspect-ratio: 32 / 53;
	background-color: var(--ms-teal);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	pointer-events: none;
}

/* Life Color — 19/10/2026 — cmd 023 — sotto i 768 px la scritta in cqi diventava di 6–7 px: corpo minimo 10 px e
   triangolo minimo 13 px. Restano fissi i punti del Figma: punta del triangolo a 53,7 % / 39,8 % (ancorata con
   translate) e fondo della scritta a 26,5 % (la scritta cresce verso l'alto). */
@media (max-width: 767px) {
	.e-con.ms-ratio-contact-map::before {
		top: auto;
		bottom: 73.5%;
		height: auto; /* Life Color — 19/10/2026 — cmd 024 — Elementor dà a .e-con::before height 100 %: con bottom la scritta usciva in alto. */
		font-size: max(2.01cqi, 10px);
	}

	.e-con.ms-ratio-contact-map::after {
		left: 53.7%;
		top: 39.8%;
		width: max(3.79%, 13px);
		transform: translate(-50%, -100%);
	}
}

/* Life Color — 12/10/2026 — cmd 017 — recapiti: link bianchi sottolineati sul grafite. */
.ms-contact-info a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ms-contact-info a:hover {
	color: var(--ms-teal);
}

.ms-contact-info a:focus-visible {
	outline: 2px solid var(--ms-teal);
	outline-offset: 3px;
}

.ms-contact-info p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------------- Modulo (ms-form) */
/* Life Color — 12/10/2026 — cmd 017 — modulo Elementor Pro sulla scheda Grigio medio (Figma "Contactform").
   AA: etichette, asterischi e testo del consenso bianchi o Superficie (nel Figma teal su grigio: 1,6:1);
   segnaposto Grigio medio sul campo Superficie (5:1; nel Figma Grigio chiaro: 2,1:1). Campi a pillola. */
.elementor .e-con .elementor-element.ms-form .elementor-field-group .elementor-field-textual {
	min-height: 49px;
	padding: 9px 20px;
	border: 0;
	border-radius: 35px;
}

.elementor .e-con .elementor-element.ms-form textarea.elementor-field-textual {
	border-radius: 24px;
	min-height: 200px;
}

.elementor .e-con .elementor-element.ms-form .elementor-field-textual::placeholder {
	color: var(--ms-gray-mid);
	opacity: 1;
}

.elementor .e-con .elementor-element.ms-form .elementor-field-textual:focus {
	outline: 2px solid var(--ms-white);
	outline-offset: 2px;
	box-shadow: none;
}

.elementor .e-con .elementor-element.ms-form .elementor-field-type-upload .elementor-field {
	color: var(--ms-surface);
	padding: 0;
	background: none;
	border: 0;
}

.elementor .e-con .elementor-element.ms-form .elementor-field-type-acceptance .elementor-field-subgroup label {
	color: var(--ms-surface);
}

.elementor .e-con .elementor-element.ms-form .elementor-field-type-acceptance a {
	color: var(--ms-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.elementor .e-con .elementor-element.ms-form .elementor-field-type-acceptance input[type="checkbox"] {
	width: 19px;
	height: 19px;
	accent-color: var(--ms-teal);
}

.elementor .e-con .elementor-element.ms-form .elementor-button:focus-visible {
	outline: 2px solid var(--ms-white);
	outline-offset: 3px;
}

.elementor .e-con .elementor-element.ms-form .elementor-message {
	color: var(--ms-white);
}

/* Life Color — 13/10/2026 — cmd 017 — focus visibile su consenso e allegato: Astra toglie l'outline a tutti gli input
   (input { outline: none }). Anello bianco come sugli altri campi (5,5:1 sul Grigio medio). */
.elementor .e-con .elementor-element.ms-form .elementor-field-type-acceptance input[type="checkbox"]:focus-visible,
.elementor .e-con .elementor-element.ms-form .elementor-field-type-upload .elementor-field:focus-visible {
	outline: 2px solid var(--ms-white);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- Foto di sfondo come <img> */
/* Life Color — 21/10/2026 — cmd 037 — le foto di sfondo dei Container (solo pagine elencate in inc/bg-images.php) sono
   <img> vere con alt, srcset e lazy load. Lo sfondo CSS di post-NNN.css (specificità alta) viene spento con !important;
   l'<img> è assoluto dietro il contenuto (z-index -1 dentro il Container isolato), quindi non occupa spazio e il CLS non cambia.
   Velatura (::before / ::after), filter e transform del Container si applicano anche all'<img> figlio. */
/* Life Color — 21/10/2026 — cmd 038 — lo sfondo CSS si spegne solo se l'<img> c'è davvero (con la cache degli elementi di
   Elementor il wrapper può avere la classe senza l'<img>): al peggio resta lo sfondo di prima. */
.elementor .e-con.ms-has-bg-img {
	isolation: isolate;
}

.elementor .e-con.ms-has-bg-img:has(> .ms-bg-img, > picture > .ms-bg-img) {
	background-image: none !important;
}

.elementor .e-con.ms-has-bg-img > .ms-bg-img,
.elementor .e-con.ms-has-bg-img > .ms-bg-picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}

.elementor .e-con.ms-has-bg-img .ms-bg-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: var(--ms-bg-fit, cover);
	object-position: var(--ms-bg-pos, 0% 0%);
	border-radius: inherit;
}

@media (max-width: 1024px) {
	.elementor .e-con.ms-has-bg-img .ms-bg-img {
		object-position: var(--ms-bg-pos-t, var(--ms-bg-pos, 0% 0%));
	}
}

@media (max-width: 767px) {
	.elementor .e-con.ms-has-bg-img .ms-bg-img {
		object-position: var(--ms-bg-pos-m, var(--ms-bg-pos-t, var(--ms-bg-pos, 0% 0%)));
	}
}

/* ------------------------------------------------------------------------ Home: logo Macchi Forma */
/* Life Color — 22/10/2026 — cmd 046 — il titolo H2 "Macchi Forma" della Materioteca (classe ms-forma-logo) si vede come logo
   SVG, allineato a sinistra. Il testo resta nel DOM per screen reader e motori (colore trasparente e corpo 0, senza
   display:none). Larghezza 600 px, 400 px sotto i 1025 px, 260 px sotto i 768 px. Specificità 0,5,0. */
.elementor .e-con .elementor-element.ms-forma-logo .elementor-heading-title {
	display: block;
	width: 600px;
	max-width: 100%;
	aspect-ratio: 638 / 170;
	background: url("../img/logo-macchi-forma.svg") left center / contain no-repeat;
	color: transparent;
	font-size: 0;
	line-height: 0;
	text-shadow: none;
}

@media (max-width: 1024px) {
	.elementor .e-con .elementor-element.ms-forma-logo .elementor-heading-title {
		width: 400px;
	}
}

@media (max-width: 767px) {
	.elementor .e-con .elementor-element.ms-forma-logo .elementor-heading-title {
		width: 260px;
	}
}