/* =========================================================================
   EMME-CI — Header con megamenu
   File: ec-header.css
   Versione: 1.7.0
   Data: 2026-08-26
   Dipende da: ec-core.css
   Collocazione: child theme /assets/css/ec-header.css

   COME FUNZIONA
   L'header si ritira scendendo e torna risalendo; la chiamata all'azione
   perde l'etichetta e si contrae in un cerchio. I pannelli del megamenu
   scendono con un clip-path e le voci entrano in cascata diagonale: il
   ritardo somma riga e colonna, così l'onda attraversa il pannello invece
   di scendere in parallelo in ognuna.

   A menu aperto l'header resta fermo, altrimenti il pannello scivolerebbe
   via mentre lo si usa.

   CHANGELOG
   1.7.0 — 2026-08-26 — Azzerati i wrapper del Theme Builder: la riga Divi
                        restringeva a 1080px e il contenitore calcolava il
                        suo 90% su quella misura, con margini doppi e
                        contenuto che sbordava a destra.
   1.6.0 — 2026-08-26 — Specificità alta sulla chiamata nascosta in mobile
                        e pulsante in primo piano.
   1.5.0 — 2026-08-26 — Su mobile la chiamata esce dalla barra: resta nel
                        piede del pannello, dove ha spazio per leggersi.
   1.4.0 — 2026-08-26 — Misure del pulsante mobile forzate: Divi applica
                        ai <button> larghezza, padding e colori con
                        specificità alta e lo trasformava in un blocco da
                        290px. Neutralizzati anche i suoi pseudo-elementi.
   1.3.0 — 2026-08-26 — Il pulsante mobile è visibile di base e nascosto
                        da 901px: prima la media query che lo mostrava
                        stava sopra la regola che lo nascondeva, e a pari
                        specificità vinceva quest'ultima.
   1.2.0 — 2026-08-26 — Contenitore interno al 90% con massimo 1920px.
                        Pulsante e pannello mobile con i gruppi come
                        fisarmoniche. Stile del logo caricato.
   1.1.0 — 2026-08-26 — Titolo di colonna vuoto per le colonne di
                        continuazione, così partono alla stessa altezza.
   1.0.0 — 2026-08-26 — Prima release.
   ========================================================================= */

:root {
	--ec-hd-h:        5.2rem;
	--ec-hd-pad:      clamp(1.25rem, 4vw, 3.5rem);
	/* Larghezza utile: 90% della finestra, mai oltre 1920px */
	--ec-hd-largh:    90%;
	--ec-hd-max:      1920px;
	--ec-hd-navy:     #0E1B2B;
	--ec-hd-navy-2:   #142740;
	--ec-hd-navy-3:   #1D3350;
	--ec-hd-accent:   #7FA3C9;
	--ec-hd-onda:     .04s;   /* passo della cascata diagonale */
}

/* -------------------------------------------------------------------------
   0. WRAPPER DEL THEME BUILDER
   Divi incapsula lo shortcode in Sezione > Riga > Modulo, e la riga ha
   width:80% con max-width:1080px. Senza azzerarli il contenitore dell'header
   calcola il suo 90% su una larghezza già ristretta: margini doppi ai lati
   e contenuto che sborda a destra.
   ---------------------------------------------------------------------- */

.et_pb_section:has(.ec-hd),
.et_pb_row:has(.ec-hd),
.et_pb_column:has(.ec-hd),
.et_pb_module:has(.ec-hd),
.et_pb_section:has(.ec-mob),
.et_pb_row:has(.ec-mob),
.et_pb_column:has(.ec-mob) {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	padding: 0 !important;
}

/* Lo sticky dell'header muore se un antenato ha overflow diverso da
   visible: il Theme Builder a volte lo mette sulla sezione. */
.et_pb_section:has(.ec-hd),
.et_pb_row:has(.ec-hd),
.et_pb_column:has(.ec-hd) {
	overflow: visible !important;
}

/* Divi assegna una griglia alle colonne: qui serve un blocco semplice */
.et_pb_column:has(.ec-hd) { display: block !important; }

/* -------------------------------------------------------------------------
   1. BARRA
   ---------------------------------------------------------------------- */

.ec-hd {
	position: sticky;
	top: 0;
	z-index: 60;
	padding-block: 1.35rem;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	transition: transform .52s var(--ec-ease, ease),
	            padding .42s var(--ec-ease, ease),
	            background-color .42s var(--ec-ease, ease),
	            border-color .42s var(--ec-ease, ease);
}

/* Il contenitore tiene la misura; la barra resta a piena larghezza per
   il fondo e la hairline. */
.ec-hd__in {
	width: var(--ec-hd-largh);
	max-width: var(--ec-hd-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 3rem);
}

.ec-hd.is-compatto {
	padding-block: .8rem;
	background: rgba(14, 27, 43, .92);
	backdrop-filter: blur(14px);
	border-bottom-color: rgba(255, 255, 255, .2);
}

.ec-hd.is-via { transform: translateY(-100%); }

/* A menu aperto la barra si ancora: fondo pieno e nessun ritiro */
.ec-hd.is-fermo {
	transform: none !important;
	background: var(--ec-hd-navy-2);
	border-bottom-color: rgba(255, 255, 255, .14);
}

/* --- Marchio ---------------------------------------------------------- */

.ec-hd__brand {
	display: flex;
	align-items: center;
	gap: .65rem;
	text-decoration: none;
	flex: none;
}
.ec-hd__logo {
	display: block;
	height: 2.4rem;
	width: auto;
	max-width: 15rem;
	object-fit: contain;
	transition: height .42s var(--ec-ease, ease);
}
.ec-hd.is-compatto .ec-hd__logo { height: 2rem; }
.ec-hd__mark {
	width: 2.1rem;
	height: 2.1rem;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 4px 4px 0 0;
	flex: none;
}
.ec-hd__t {
	display: block;
	font-family: var(--ec-font-display, inherit);
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: -.02em;
	color: #fff;
	line-height: 1;
}
.ec-hd__s {
	display: block;
	font-size: .5625rem;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .5);
	margin-top: .1rem;
	max-height: 1rem;
	overflow: hidden;
	transition: max-height .42s var(--ec-ease, ease),
	            opacity .26s var(--ec-ease, ease);
}
.ec-hd.is-compatto .ec-hd__s { max-height: 0; opacity: 0; }

/* --- Voci di primo livello -------------------------------------------- */

.ec-hd__nav ul {
	display: flex;
	gap: clamp(.75rem, 2.2vw, 2.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ec-hd__nav li { position: relative; }

.ec-hd__nav > ul > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .9rem 0;
	font-family: var(--ec-font-body, inherit);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
	transition: color .26s var(--ec-ease, ease);
}
.ec-hd__nav > ul > li > a:hover,
.ec-hd__nav > ul > li.is-aperta > a { color: #fff; }

.ec-hd__nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: .55rem;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .42s var(--ec-ease, ease);
}
.ec-hd__nav > ul > li > a:hover::after,
.ec-hd__nav > ul > li.is-aperta > a::after { transform: scaleX(1); }

.ec-hd__ch {
	width: .42rem;
	height: .42rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform .42s var(--ec-ease, ease);
	opacity: .7;
}
.ec-hd__nav > ul > li.is-aperta .ec-hd__ch {
	transform: rotate(225deg) translateY(-2px);
}

/* --- Telefono e chiamata --------------------------------------------- */

.ec-hd__dx {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 2vw, 1.75rem);
}

.ec-hd__tel {
	font-family: var(--ec-font-mono, monospace);
	font-size: .75rem;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	white-space: nowrap;
	transition: color .26s var(--ec-ease, ease);
}
.ec-hd__tel:hover { color: #fff; }

.ec-hd__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	isolation: isolate;
	padding: .8rem 1.6rem;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 999px;
	font-family: var(--ec-font-body, inherit);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: color .26s var(--ec-ease, ease),
	            border-color .26s var(--ec-ease, ease),
	            padding .42s var(--ec-ease, ease),
	            gap .42s var(--ec-ease, ease);
}
.ec-hd__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: #fff;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .42s var(--ec-ease, ease);
}
.ec-hd__cta:hover::before { transform: scaleX(1); transform-origin: left center; }
.ec-hd__cta:hover { color: var(--ec-hd-navy); border-color: #fff; }

.ec-hd__i {
	position: relative;
	display: block;
	width: .875rem;
	height: .875rem;
	overflow: hidden;
	flex: none;
}
.ec-hd__i svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: transform .42s var(--ec-ease, ease);
}
.ec-hd__i svg:last-child { transform: translate(-115%, 115%); }
.ec-hd__cta:hover .ec-hd__i svg:first-child { transform: translate(115%, -115%); }
.ec-hd__cta:hover .ec-hd__i svg:last-child { transform: translate(0, 0); }

.ec-hd__cl {
	overflow: hidden;
	max-width: 14rem;
	transition: max-width .42s var(--ec-ease, ease),
	            opacity .26s var(--ec-ease, ease);
}

/* Compatta: l'etichetta si ritira e resta il cerchio con la freccia */
.ec-hd.is-compatto:not(.is-fermo) .ec-hd__cta {
	padding: .7rem;
	gap: 0;
	aspect-ratio: 1;
	justify-content: center;
}
.ec-hd.is-compatto:not(.is-fermo) .ec-hd__cl { max-width: 0; opacity: 0; }

/* -------------------------------------------------------------------------
   2. PANNELLO
   La posizione verticale la scrive il JS, perché dipende dall'altezza
   della barra che cambia scorrendo.
   ---------------------------------------------------------------------- */

.ec-mm {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 55;
	background: var(--ec-hd-navy-2);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	clip-path: inset(0 0 100% 0);
	transition: clip-path .62s var(--ec-ease, ease);
	pointer-events: none;
}
.ec-mm.is-aperto {
	clip-path: inset(0 0 0 0);
	pointer-events: auto;
}

.ec-mm__in {
	width: var(--ec-hd-largh);
	max-width: var(--ec-hd-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr minmax(0, 17rem);
	gap: clamp(1.5rem, 4vw, 4rem);
	padding-block: clamp(1.75rem, 3.5vw, 3rem);
}

.ec-mm__cols {
	display: grid;
	grid-template-columns: repeat(var(--ec-col, 3), minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 3rem);
}
.ec-mm__col { display: flex; flex-direction: column; }

/* --- Titolo di colonna ------------------------------------------------
   Le colonne di continuazione (quando le voci vengono spezzate senza
   gruppi) hanno il titolo vuoto: la hairline resta, così le colonne
   partono tutte alla stessa altezza.
   ---------------------------------------------------------------------- */

.ec-mm__gt--vuoto { min-height: 1em; }

.ec-mm__gt {
	font-family: var(--ec-font-mono, monospace);
	font-size: .5625rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .38);
	margin: 0 0 .85rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* --- Voci -------------------------------------------------------------
   La cascata diagonale: il ritardo somma riga e colonna, che il PHP
   scrive su --ec-r e --ec-c. Un'onda che attraversa il pannello invece
   di scendere in parallelo in ogni colonna.
   ---------------------------------------------------------------------- */

.ec-mm__l {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .1rem;
}
.ec-mm__l li { overflow: hidden; }

.ec-mm__l a {
	display: block;
	padding: .4rem 0;
	font-family: var(--ec-font-body, inherit);
	font-size: .9375rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	transform: translateY(115%);
	transition: transform .58s var(--ec-ease, ease),
	            color .24s var(--ec-ease, ease),
	            padding-left .3s var(--ec-ease, ease);
	transition-delay: calc((var(--ec-r, 0) + var(--ec-c, 0)) * var(--ec-hd-onda) + .06s);
}
.ec-mm.is-aperto .ec-mm__l a { transform: translateY(0); }
.ec-mm__l a:hover { color: #fff; padding-left: .4rem; }

/* --- Voce in evidenza -------------------------------------------------
   Gli incentivi fiscali non sono una lavorazione: escono dall'elenco.
   ---------------------------------------------------------------------- */

.ec-mm__ev {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s var(--ec-ease, ease) .3s,
	            transform .42s var(--ec-ease, ease) .3s;
}
.ec-mm.is-aperto .ec-mm__ev { opacity: 1; transform: none; }

.ec-mm__ev a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .65rem .8rem;
	background: rgba(127, 163, 201, .1);
	border: 1px solid rgba(127, 163, 201, .24);
	border-radius: 3px;
	font-size: .8125rem;
	color: #fff;
	text-decoration: none;
	transition: background-color .26s var(--ec-ease, ease);
}
.ec-mm__ev a:hover { background: rgba(127, 163, 201, .2); }
.ec-mm__ev span {
	font-family: var(--ec-font-mono, monospace);
	font-size: .5625rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ec-hd-accent);
}

/* --- Area visiva ------------------------------------------------------
   Le immagini arrivano dalla featured image della pagina collegata:
   nessun campo da compilare nel menu.
   ---------------------------------------------------------------------- */

.ec-mm__vis {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 3px;
	overflow: hidden;
	background: var(--ec-hd-navy-3);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .34s var(--ec-ease, ease) .34s,
	            transform .5s var(--ec-ease, ease) .34s;
}
.ec-mm.is-aperto .ec-mm__vis { opacity: 1; transform: none; }

.ec-mm__vis figure {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity .34s var(--ec-ease, ease);
}
.ec-mm__vis figure.on { opacity: 1; }

.ec-mm__vis img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ec-mm__vis figcaption {
	position: absolute;
	inset: auto 0 0;
	padding: 1rem;
	background: linear-gradient(to top, rgba(14, 27, 43, .9), transparent);
	font-family: var(--ec-font-mono, monospace);
	font-size: .625rem;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .72);
	line-height: 1.4;
}
.ec-mm__vis b {
	display: block;
	font-family: var(--ec-font-display, inherit);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -.01em;
	color: #fff;
	margin-bottom: .2rem;
}

/* --- Velo sul contenuto sotto ---------------------------------------- */

.ec-hd__velo {
	position: fixed;
	inset: 0;
	z-index: 54;
	background: rgba(14, 27, 43, .55);
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s var(--ec-ease, ease);
}
.ec-hd__velo.is-on { opacity: 1; }

/* -------------------------------------------------------------------------
   3. RESPONSIVE
   Sotto i 1100px l'area visiva esce e le colonne scendono a due. Sotto
   i 900px il megamenu non ha senso: serve un pannello a tutta altezza,
   che è un componente a parte.
   ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.ec-mm__in { grid-template-columns: 1fr; }
	.ec-mm__vis { display: none; }
	.ec-mm__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {

	.ec-hd__nav,
	.ec-hd__tel { display: none; }
	.ec-mm { display: none; }

	/* Nella barra restano logo e pulsante: la chiamata e il telefono
	   stanno nel piede del pannello, dove hanno lo spazio per essere
	   leggibili. Su 360px di larghezza tre elementi non ci stanno.
	   Specificità alta e !important perché la regola base della chiamata
	   dichiara inline-flex e Divi ne aggiunge di proprie. */
	.ec-hd .ec-hd__dx > .ec-hd__cta,
	.ec-hd .ec-hd__dx > a.ec-hd__cta { display: none !important; }

	/* Il pulsante resta comunque davanti a tutto */
	.ec-hd .ec-hd__burger { position: relative; z-index: 2; }
}

/* -------------------------------------------------------------------------
   4. PULSANTE E PANNELLO MOBILE
   Sotto i 900px il megamenu non ci sta: i gruppi diventano fisarmoniche
   in un pannello a tutta altezza. Le voci sono le stesse, lette dallo
   stesso albero, quindi non c'è un secondo menu da aggiornare.
   ---------------------------------------------------------------------- */

/* Visibile per impostazione predefinita e nascosto solo da 901px in su:
   così l'ordine delle regole nel file non conta. Il contrario — nascosto
   di base e mostrato in una media query più in alto nel file — non
   funziona, perché a pari specificità vince l'ultima dichiarazione.

   Le misure sono forzate perché Divi applica ai <button> larghezza,
   padding e colori con specificità alta: senza questo il pulsante
   diventa un blocco di 290px e i due tratti si perdono in mezzo.
   aspect-ratio non basta, serve la coppia width/height esplicita. */

.ec-hd .ec-hd__burger,
button.ec-hd__burger {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 2.75rem !important;
	min-width: 2.75rem;
	max-width: 2.75rem;
	height: 2.75rem !important;
	min-height: 2.75rem;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	background-image: none !important;
	border: 1px solid rgba(255, 255, 255, .28) !important;
	border-radius: 50% !important;
	color: #fff !important;
	font-size: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	flex: 0 0 auto;
	transition: border-color .26s var(--ec-ease, ease);
}

/* Divi aggiunge una freccia con ::after su alcuni bottoni */
.ec-hd .ec-hd__burger::before,
.ec-hd .ec-hd__burger::after {
	content: none !important;
	display: none !important;
}

.ec-hd .ec-hd__burger:hover { border-color: #fff !important; }

.ec-hd .ec-hd__burger span {
	display: grid;
	gap: 4px;
	width: 1.1rem;
	margin: 0;
	padding: 0;
}
.ec-hd .ec-hd__burger i {
	display: block;
	height: 1px;
	width: auto;
	background: currentColor;
	transition: transform .42s var(--ec-ease, ease),
	            width .42s var(--ec-ease, ease);
}
.ec-hd__burger i:nth-child(1) { width: 100%; }
.ec-hd__burger i:nth-child(2) { width: 64%; margin-left: auto; }

/* Aperto: i due tratti diventano una croce */
.ec-hd__burger[aria-expanded="true"] i:nth-child(1) {
	transform: translateY(2.5px) rotate(45deg);
}
.ec-hd__burger[aria-expanded="true"] i:nth-child(2) {
	width: 100%;
	transform: translateY(-2.5px) rotate(-45deg);
}

/* --- Pannello --------------------------------------------------------- */

.ec-mob {
	position: fixed;
	inset: 0;
	z-index: 58;
	background: var(--ec-hd-navy-2);
	clip-path: inset(0 0 100% 0);
	transition: clip-path .58s var(--ec-ease, ease);
	pointer-events: none;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ec-mob.is-aperto {
	clip-path: inset(0 0 0 0);
	pointer-events: auto;
}

.ec-mob__in {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	width: var(--ec-hd-largh);
	max-width: var(--ec-hd-max);
	margin-inline: auto;
	padding: 6.5rem 0 2.5rem;
}

.ec-mob__l { list-style: none; margin: 0; padding: 0; }
.ec-mob__l li { border-top: 1px solid rgba(255, 255, 255, .12); }
.ec-mob__l li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }

/* Le voci entrano in cascata, come nel megamenu */
.ec-mob__v {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.1rem 0;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--ec-font-display, inherit);
	font-size: 1.375rem;
	font-weight: 500;
	letter-spacing: -.015em;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .3s var(--ec-ease, ease),
	            transform .48s var(--ec-ease, ease);
	transition-delay: calc(var(--ec-r, 0) * .06s + .12s);
}
.ec-mob.is-aperto .ec-mob__v { opacity: 1; transform: none; }

/* Il più diventa croce quando il gruppo è aperto */
.ec-mob__pl {
	position: relative;
	width: 1rem;
	height: 1rem;
	flex: none;
}
.ec-mob__pl::before,
.ec-mob__pl::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1px;
	background: currentColor;
	transition: transform .42s var(--ec-ease, ease);
}
.ec-mob__pl::after { transform: rotate(90deg); }
.ec-mob__v[aria-expanded="true"] .ec-mob__pl::after { transform: rotate(0deg); }

/* --- Fisarmonica ------------------------------------------------------ */

.ec-mob__sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .48s var(--ec-ease, ease);
}
.ec-mob__v[aria-expanded="true"] + .ec-mob__sub { grid-template-rows: 1fr; }
.ec-mob__sub > * { min-height: 0; }

.ec-mob__sub-in {
	overflow: hidden;
	padding-bottom: .75rem;
}

.ec-mob__gt {
	font-family: var(--ec-font-mono, monospace);
	font-size: .5625rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .38);
	margin: .75rem 0 .35rem;
}

.ec-mob__n {
	display: block;
	padding: .5rem 0 .5rem .9rem;
	border-left: 1px solid rgba(255, 255, 255, .14);
	font-size: .9375rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
}
.ec-mob__n:active { color: #fff; }

.ec-mob__n.is-evidenza {
	margin: .6rem 0 .2rem;
	padding: .6rem .8rem;
	border: 1px solid rgba(127, 163, 201, .24);
	border-radius: 3px;
	background: rgba(127, 163, 201, .1);
	color: #fff;
}

/* --- Piede ------------------------------------------------------------ */

.ec-mob__piede {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	opacity: 0;
	transition: opacity .34s var(--ec-ease, ease) .34s;
}
.ec-mob.is-aperto .ec-mob__piede { opacity: 1; }

.ec-mob__tel {
	font-family: var(--ec-font-mono, monospace);
	font-size: .9375rem;
	letter-spacing: .04em;
	color: #fff;
	text-decoration: none;
}

/* Con il pannello aperto la pagina sotto non deve scorrere */
body.ec-mob-aperto { overflow: hidden; }

@media (min-width: 901px) {
	.ec-mob { display: none; }
	.ec-hd .ec-hd__burger,
	button.ec-hd__burger { display: none; }
}

/* -------------------------------------------------------------------------
   5. MOVIMENTO RIDOTTO
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ec-hd { transition: background-color .2s linear; }
	.ec-hd.is-via { transform: none; }
	.ec-mm { transition: opacity .18s linear; clip-path: none; opacity: 0; }
	.ec-mm.is-aperto { opacity: 1; }
	.ec-mm__l a,
	.ec-mm__ev,
	.ec-mm__vis,
	.ec-mob__v,
	.ec-mob__piede {
		transform: none !important;
		transition: none;
		opacity: 1;
	}
	.ec-mob { transition: opacity .18s linear; clip-path: none; opacity: 0; }
	.ec-mob.is-aperto { opacity: 1; }
}

/* -------------------------------------------------------------------------
   6. VISUAL BUILDER
   Dentro l'editor l'header resta statico: lo sticky e i pannelli
   sovrapposti renderebbero impossibile lavorare.
   ---------------------------------------------------------------------- */

body.et-fb .ec-hd { position: static; }
body.et-fb .ec-mm { display: none; }