/*
 * 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-teal-text);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------------------ 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, 178, 169, 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: "» " / "";
}

.e-con.ms-card:focus-visible {
	outline: 2px solid var(--ms-teal-text);
	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%);
	}
}

/* ------------------------------------------------------------------------------------- Tag */
/* Life Color — 12/10/2026 — cmd 010 — pillole grafite (Figma componente "Design"): carattere e
   colore del testo arrivano dal widget (globale Tag, Bianco). Statici: nessun hover. */
.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);
}

/* ----------------------------------------------------------------------------- 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-teal-text);
	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 {
		--width: 366px;
		width: 366px;
	}

	/* 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-teal-text);
	outline-offset: 4px;
}

/* Tablet e telefono: numero e nome sulla prima riga, descrizione sotto, sempre visibile. */
@media (max-width: 1024px) {
	.e-con.ms-step {
		--flex-wrap: wrap;
		--width: 100%;
		width: 100%;
	}

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

@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. */
.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). */
.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);
}

.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;
}

.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;
	}
}

/* ------------------------------------------------------------------ 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;
}

.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 sempre aperte. */
.e-con.ms-values {
	--display: grid;
	display: grid;
	grid-template-columns: repeat(3, 253px);
	grid-auto-rows: 70px;
	column-gap: 20px;
	row-gap: 115px;
	align-items: start;
}

.e-con.ms-value {
	position: relative;
	z-index: 1;
	--width: 253px;
	width: 253px;
	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;
}

@media (min-width: 1025px) {
	.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;
	}
}

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

.e-con.ms-value:focus-visible {
	outline: 2px solid var(--ms-teal-text);
	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: none;
	}

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

@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 {
		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;
}

/* ------------------------------------------------------------- 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-teal-text);
	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;
}

/* ------------------------------------------------------------ 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 sempre aperti. */
.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 {
		max-height: 340px;
		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-teal-text);
	outline-offset: 4px;
}

@media (max-width: 1024px) {
	.e-con.ms-circle {
		max-height: none;
	}

	.elementor .e-con .ms-circle .elementor-element.ms-circle__label {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.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 — 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;
}