/* =========================================================
   Energetica — UI custom · Design kit "Arco" (brief SVELA 07/2026)
   Integra i token di theme.json. Regole chiave del kit:
   un solo colore di marca, bottoni pill, raggi 28/24,
   niente ombre (solo glass hero), segno Arco ricorrente.
   ========================================================= */

/* Tutti i componenti del kit misurano il padding dentro il box:
   senza questo, height:100% + padding fa sbordare i box nelle griglie. */
[class^="e-"],
[class*=" e-"],
[class^="e-"] *,
[class*=" e-"] * {
	box-sizing: border-box;
}

:root {
	--e-ease: cubic-bezier(0.22, 1, 0.36, 1);
	/* Gradiente ufficiale Arco (vincolante) */
	--e-grad-arco: linear-gradient(135deg, #8fe6ff 0%, #12a6e0 55%, #00537f 100%);
	/* Segno Arco come mask (monocromo, colorabile via background).
	   Geometria dell'SVG ufficiale fornito da SVELA (luglio 2026). */
	--e-arco-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M31 85 A37 37 0 1 1 69 85' fill='none' stroke='black' stroke-width='13' stroke-linecap='round'/%3E%3Cpath d='M40 31 A25 25 0 0 1 68 43' fill='none' stroke='black' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E");
	/* Unica ombra ammessa: pannello glass dell'hero */
	--e-shadow-glass: 0 24px 60px -28px rgba(14, 47, 58, 0.45);
	/* Colore di stato per errori form (fuori palette brand, come da brief) */
	--e-error: #b3261e;
}

/* =========================================================
   FOCUS VISIBILE (da tastiera) — non solo un cambio di colore
   ========================================================= */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-700);
	outline-offset: 3px;
	border-radius: 6px;
}
.wp-block-button__link:focus-visible { border-radius: 999px; }
.e-offer:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--brand-700);
	outline-offset: 3px;
}
.e-offer a:focus-visible { outline: none; }

/* =========================================================
   SEGNO «ARCO» — utilità
   Decorativo: usare sempre aria-hidden="true" sull'elemento.
   ========================================================= */
.e-arco {
	display: inline-block;
	width: 44px;
	height: 44px;
	background: var(--e-grad-arco);
	-webkit-mask: var(--e-arco-mask) center / contain no-repeat;
	mask: var(--e-arco-mask) center / contain no-repeat;
	flex: 0 0 auto;
}
/* Segno Arco inserito come blocco Immagine (modificabile dall'editor):
   niente margini né bordi, si comporta come un'icona. */
.e-arco-img { margin: 0 !important; }
.e-arco-img img { display: block; }

.e-arco--flat { background: var(--wp--preset--color--brand); }
.e-arco--white { background: #fff; }
.e-arco--sm { width: 20px; height: 20px; }

/* Divisore di sezione: linea sottile con Arco al centro (26px) */
.e-divider {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	border: none;
	margin: 0 auto;
	max-width: var(--wp--style--global--content-size, 1240px);
}
.e-divider::before,
.e-divider::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--wp--preset--color--border);
}
.e-divider .e-arco { width: 26px; height: 26px; }

/* Divisore come STILE del blocco Separatore di Gutenberg
   (register_block_style 'e-divider'): linea sottile + Arco al centro. */
.wp-block-separator.is-style-e-divider {
	border: none;
	height: 26px;
	opacity: 1;
	display: flex;
	align-items: center;
	gap: 46px;
	background-color: transparent;
	background-image: url("../img/arco-azzurro.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px 26px;
}
.wp-block-separator.is-style-e-divider::before,
.wp-block-separator.is-style-e-divider::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--wp--preset--color--border);
}

/* Filigrana di sezione: molto grande, 5–9% opacità, tagliata dal bordo.
   MAX UNA per schermata. Applicare .e-watermark alla sezione (position/overflow
   gestiti qui), varianti di posizione ed eventuale bianco su fondi scuri. */
.e-watermark { position: relative; overflow: hidden; }
.e-watermark::after {
	content: "";
	position: absolute;
	width: clamp(420px, 46vw, 720px);
	aspect-ratio: 1;
	background: var(--wp--preset--color--brand);
	-webkit-mask: var(--e-arco-mask) center / contain no-repeat;
	mask: var(--e-arco-mask) center / contain no-repeat;
	opacity: 0.07;
	pointer-events: none;
	right: max(-12vw, -180px);
	bottom: -22%;
}
.e-watermark--left::after { right: auto; left: max(-12vw, -180px); }
.e-watermark--top::after { bottom: auto; top: -22%; }
.e-watermark--white::after { background: #fff; opacity: 0.06; }
/* Angolo hero: Arco bianco grande, basso a destra, ~15% */
.e-watermark--hero::after { background: #fff; opacity: 0.15; }
/* il contenuto della sezione resta sopra la filigrana */
.e-watermark > * { position: relative; z-index: 1; }

/* Sfondi di sezione basati sull'Arco (sistema del mockup SVELA):
   composizioni SVG di archi a scale diverse, tagliati dai bordi,
   opacità 4–7%. Variante light (archi azzurri su fondi chiari)
   e ink (archi bianchi + accento ciano su fondi inchiostro). */
.e-bg-arco--light,
.e-bg-arco--ink,
.is-style-e-bg-arco--light,
.is-style-e-bg-arco--ink {
	background-image: url("../img/bg-arco-light.svg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.e-bg-arco--ink,
.is-style-e-bg-arco--ink { background-image: url("../img/bg-arco-ink.svg"); }

/* Elenco con l'Arco come punto (al posto dei trattini), 17–20px */
.e-list,
.is-style-e-list {
	list-style: none;
	padding-left: 0;
}
.e-list li,
.is-style-e-list li {
	position: relative;
	padding-left: 1.9rem;
}
.e-list li::before,
.is-style-e-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 19px;
	height: 19px;
	background: var(--e-grad-arco);
	-webkit-mask: var(--e-arco-mask) center / contain no-repeat;
	mask: var(--e-arco-mask) center / contain no-repeat;
}
/* su fondo scuro: Arco bianco + riga di separazione sottile (sez. "Cosa non paghi") */
.e-list--ondark li::before,
.is-style-e-list--ondark li::before { background: #fff; }
.e-list--lined li {
	padding-bottom: 0.85rem;
	margin-bottom: 0.85rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* =========================================================
   KICKER — etichetta di sezione (h6 la eredita da theme.json)
   ========================================================= */
.e-kicker,
.is-style-e-kicker {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--brand);
}
.e-kicker--ondark,
.is-style-e-kicker--ondark { color: var(--wp--preset--color--ciano); }

/* =========================================================
   BOTTONI — pill, 5 varianti (default = Primario da theme.json)
   Varianti come classi sul wp-block-button.
   ========================================================= */
.wp-block-button__link {
	transition: transform 0.25s var(--e-ease), background-color 0.25s var(--e-ease),
		border-color 0.25s var(--e-ease), color 0.25s var(--e-ease);
}
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button__link:active { transform: translateY(0); }

/* 2 · Inchiostro */
.e-btn--ink .wp-block-button__link,
.is-style-e-btn--ink .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	color: #fff;
}
.e-btn--ink .wp-block-button__link:hover,
.e-btn--ink .wp-block-button__link:focus,
.is-style-e-btn--ink .wp-block-button__link:hover,
.is-style-e-btn--ink .wp-block-button__link:focus {
	background: var(--wp--preset--color--brand-700);
	color: #fff;
}

/* 3 · Fantasma su scuro */
.e-btn--ghost .wp-block-button__link,
.is-style-e-btn--ghost .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #fff;
}
.e-btn--ghost .wp-block-button__link:hover,
.e-btn--ghost .wp-block-button__link:focus,
.is-style-e-btn--ghost .wp-block-button__link:hover,
.is-style-e-btn--ghost .wp-block-button__link:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
}

/* 4 · Contorno su chiaro */
.e-btn--outline .wp-block-button__link,
.is-style-e-btn--outline .wp-block-button__link {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
}
.e-btn--outline .wp-block-button__link:hover,
.e-btn--outline .wp-block-button__link:focus,
.is-style-e-btn--outline .wp-block-button__link:hover,
.is-style-e-btn--outline .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--ink);
}

/* 5 · Glass (testata sopra l'hero) */
.e-btn--glass .wp-block-button__link,
.is-style-e-btn--glass .wp-block-button__link {
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.e-btn--glass .wp-block-button__link:hover,
.e-btn--glass .wp-block-button__link:focus,
.is-style-e-btn--glass .wp-block-button__link:hover,
.is-style-e-btn--glass .wp-block-button__link:focus {
	background: rgba(255, 255, 255, 0.3);
	color: #fff;
}

/* Riga di rassicurazione sotto le CTA */
.e-reassure,
.is-style-e-reassure {
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink-soft);
}
.e-reassure--ondark,
.is-style-e-reassure--ondark { color: rgba(255, 255, 255, 0.75); }

/* =========================================================
   PANNELLO GLASS (hero) — unica ombra ammessa nel sito
   ========================================================= */
.e-glass,
.is-style-e-glass {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 28px;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: var(--e-shadow-glass);
	color: #fff;
}
.e-glass .e-list li::before { background: #fff; }

/* =========================================================
   CARD E BLOCCHI — raggi 24 (card) / 28 (blocchi), niente ombre
   ========================================================= */
.e-card,
.is-style-e-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s var(--e-ease), border-color 0.35s var(--e-ease),
		background 0.35s var(--e-ease);
}
.e-card:hover,
.is-style-e-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 55%, var(--wp--preset--color--border));
}
/* ⚠️ Quando `e-card` sta sulla COLONNA (ed è così in tutti i pattern a tre card),
   `height:100%` si misura su un contenitore alto `auto`: la card si accorcia sul
   proprio contenuto e le card della stessa riga vengono di altezze diverse.
   Rimettendo `auto` riprende a valere lo stiramento delle colonne, che è ciò che
   serve. Sulle card usate come FIGLIO di una colonna il 100% resta necessario. */
.wp-block-column.e-card,
.wp-block-column.is-style-e-card { height: auto; }
.e-block { border-radius: 28px; }

/* Card evidenziata (ex variante calda → ora velo azzurro, un solo colore di marca) */
.e-card--accent {
	background: var(--wp--preset--color--brand-tint);
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 35%, var(--wp--preset--color--border));
}
.e-card--accent .e-eyebrow,
.e-card--accent h3 {
	color: var(--wp--preset--color--brand-700);
}

/* Card dei tre passi: numero grande azzurro a bassa opacità, in alto a destra,
   tagliato dal bordo; dietro, l'Arco piatto molto attenuato. */
.e-step,
.is-style-e-step {
	position: relative;
	overflow: hidden;
}
.e-step .e-step-num,
.e-step .is-style-e-step-num {
	position: absolute;
	top: -0.14em;
	right: 0.04em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(5.5rem, 9.5vw, 8rem);
	line-height: 1;
	color: var(--wp--preset--color--brand);
	opacity: 0.24;
	pointer-events: none;
	user-select: none;
	z-index: 1;
}
.e-step::before {
	content: "";
	position: absolute;
	top: -52px;
	right: -48px;
	width: 190px;
	height: 190px;
	background: var(--wp--preset--color--brand);
	-webkit-mask: var(--e-arco-mask) center / contain no-repeat;
	mask: var(--e-arco-mask) center / contain no-repeat;
	opacity: 0.07;
	pointer-events: none;
}
.e-step > * { position: relative; }

/* =========================================================
   TILE — blocco immagine con velatura scura dal basso
   (griglia 2×2 "Cosa puoi attivare", min 330px)
   ========================================================= */
.e-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 330px;
	border-radius: 28px;
	overflow: hidden;
	padding: 1.75rem;
	color: #fff;
	background-color: var(--wp--preset--color--ink);
	background-size: cover;
	background-position: center;
	isolation: isolate;
	text-decoration: none;
}
.e-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(14, 47, 58, 0.82) 0%, rgba(14, 47, 58, 0.28) 45%, rgba(14, 47, 58, 0.05) 70%);
	z-index: 0;
	transition: background 0.35s var(--e-ease);
}
.e-tile > img,
.e-tile > .e-tile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	transition: transform 0.5s var(--e-ease);
}
/* watermark Arco su ogni tile (come nei blocchi del mockup):
   soft-light così resta discreto sia in chiave chiara sia scura */
.e-tile::after {
	content: "";
	position: absolute;
	width: 48%;
	aspect-ratio: 1;
	top: -14%;
	right: -11%;
	background: #fff;
	-webkit-mask: var(--e-arco-mask) center / contain no-repeat;
	mask: var(--e-arco-mask) center / contain no-repeat;
	opacity: 0.55;
	mix-blend-mode: soft-light;
	pointer-events: none;
	z-index: 0;
}
.e-tile > * { position: relative; z-index: 1; }
.e-tile .e-tile-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--ciano);
	margin-bottom: 0.4rem;
}
.e-tile .e-tile-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.e-tile .e-arrow {
	display: inline-block;
	transition: transform 0.3s var(--e-ease);
	color: #fff;
	font-weight: 700;
}
.e-tile:hover > img,
.e-tile:hover > .e-tile-img { transform: scale(1.04); }
.e-tile:hover .e-arrow { transform: translateX(6px); }
/* Varianti piatte (stile mockup): gradienti al posto delle foto.
   Casa in chiave più chiara, Imprese più scura. */
.e-tile--casa {
	background-image: linear-gradient(135deg, #0c86b8 0%, #00537f 100%);
}
.e-tile--impresa {
	background-image: linear-gradient(135deg, #14455c 0%, #0e2f3a 100%);
}
.e-tile--casa::before,
.e-tile--impresa::before {
	background: linear-gradient(to top, rgba(14, 47, 58, 0.35) 0%, rgba(14, 47, 58, 0) 55%);
}
.e-tile--casa:hover,
.e-tile--impresa:hover { filter: brightness(1.06); }
/* tile servizio: stessa famiglia dei tile Casa */
.e-tile--servizio {
	background-image: linear-gradient(135deg, #0c86b8 0%, #00537f 100%);
}
.e-tile--servizio::before {
	background: linear-gradient(to top, rgba(14, 47, 58, 0.35) 0%, rgba(14, 47, 58, 0) 55%);
}
.e-tile--servizio:hover { filter: brightness(1.06); }
/* riga descrittiva dentro i tile */
.e-tile .e-tile-desc {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.85);
	margin-top: 0.45rem;
	max-width: 34ch;
}
.e-tile:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

/* ---------------------------------------------------------
   MISURA DI LETTURA — il brief chiede righe da ~60 caratteri.
   Vale per il testo corrente delle sezioni; titoli, elenchi in
   colonna e contenuti dentro griglie restano liberi.
   --------------------------------------------------------- */
/* ⚠️ NIENTE larghezze di sezione su misura: il contenitore è 1240px ovunque,
   come in home, così tutte le sezioni di tutte le pagine partono dallo stesso
   asse. Restringere il `content-size` centrava la colonna e spostava il rientro
   di ogni sezione (tre larghezze = tre rientri diversi: errore corretto il 27/07).
   Dove il testo sta sopra una foto, si accorcia la riga con una COLONNA nel
   contenuto (55–58%), esattamente come fa l'hero e la banda della home. */

/* ---------------------------------------------------------
   VOCE DESCRITTIVA — blocco pieno con titolo e spiegazione.
   Per gli elenchi ragionati dei wireframe («tre principi»,
   «tre luoghi dove verificare»): più di un punto elenco,
   meno di una card. Si impilano in verticale.
   --------------------------------------------------------- */
.e-point,
.is-style-e-point {
	/* card vera: fondo bianco + contorno. Il velo azzurro sparirebbe sulle
	   sezioni «carta tenue», che hanno lo stesso colore. */
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	padding: var(--wp--preset--spacing--40);
}
.e-point > :last-child,
.is-style-e-point > :last-child { margin-bottom: 0; }
/* il titolo porta il segno Arco al posto del trattino del wireframe */
.e-point-title,
.is-style-e-point-title {
	position: relative;
	padding-left: 1.9rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.1875rem;
	line-height: 1.3;
	margin: 0 0 0.4rem;
}
.e-point-title::before,
.is-style-e-point-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 19px;
	height: 19px;
	background: var(--e-grad-arco);
	-webkit-mask: var(--e-arco-mask) center / contain no-repeat;
	mask: var(--e-arco-mask) center / contain no-repeat;
}
/* versione su fondo scuro */
.e-point--ondark,
.is-style-e-point--ondark {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 24px;
	padding: var(--wp--preset--spacing--40);
	color: #fff;
}
.e-point--ondark p,
.is-style-e-point--ondark p { color: rgba(255, 255, 255, 0.82); }
.e-point--ondark .e-point-title,
.is-style-e-point--ondark .e-point-title { color: #fff; }
.e-point--ondark .e-point-title::before,
.is-style-e-point--ondark .e-point-title::before { background: #fff; }

/* ---------------------------------------------------------
   NOTA IN EVIDENZA — barra laterale azzurra, fondo velo.
   Per precisazioni e promesse che meritano una pausa nel testo.
   --------------------------------------------------------- */
.e-callout,
.is-style-e-callout {
	background: var(--wp--preset--color--brand-tint);
	border-left: 3px solid var(--wp--preset--color--brand);
	border-radius: 0 24px 24px 0;
	padding: var(--wp--preset--spacing--40);
}
.e-callout p:last-child,
.is-style-e-callout p:last-child { margin-bottom: 0; }
/* versione su fondo scuro */
.e-callout--ondark,
.is-style-e-callout--ondark {
	background: rgba(255, 255, 255, 0.07);
	border-left: 3px solid var(--wp--preset--color--ciano);
	border-radius: 0 24px 24px 0;
	padding: var(--wp--preset--spacing--40);
	color: #fff;
}
.e-callout--ondark p,
.is-style-e-callout--ondark p { color: #fff; }

/* ---------------------------------------------------------
   TILE come blocco COPERTINA nativo (core/cover + stile "Tile").
   Il cliente cambia immagine, velatura, testi e link dall'editor.
   --------------------------------------------------------- */
.wp-block-cover.e-tile,
.wp-block-cover.is-style-e-tile {
	min-height: 330px;
	border-radius: 28px;
	overflow: hidden;
	padding: 1.75rem;
	isolation: isolate;
	/* contenuto ancorato in basso a sinistra. Esplicito su entrambi gli assi
	   perché il blocco Copertina impila in colonna: con flex-direction column
	   le classi is-position-* di WordPress risultano invertite. */
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
}
.wp-block-cover.e-tile .wp-block-cover__inner-container,
.wp-block-cover.is-style-e-tile .wp-block-cover__inner-container {
	width: 100%;
}
/* watermark Arco sul tile */
.wp-block-cover.e-tile::after,
.wp-block-cover.is-style-e-tile::after {
	content: "";
	position: absolute;
	width: 48%;
	aspect-ratio: 1;
	top: -14%;
	right: -11%;
	background: #fff;
	-webkit-mask: var(--e-arco-mask) center / contain no-repeat;
	mask: var(--e-arco-mask) center / contain no-repeat;
	opacity: 0.55;
	mix-blend-mode: soft-light;
	pointer-events: none;
	z-index: 1;
}
/* zoom morbido dell'immagine al passaggio del mouse */
.wp-block-cover.e-tile .wp-block-cover__image-background,
.wp-block-cover.is-style-e-tile .wp-block-cover__image-background {
	transition: transform 0.5s var(--e-ease);
}
.wp-block-cover.e-tile:hover .wp-block-cover__image-background,
.wp-block-cover.is-style-e-tile:hover .wp-block-cover__image-background {
	transform: scale(1.04);
}
/* etichetta e titolo del tile: stili applicabili dal pannello Stili */
.e-tile-label,
.is-style-e-tile-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--ciano);
	margin: 0 0 0.4rem;
}
.e-tile-title,
.is-style-e-tile-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0;
}
/* freccia automatica: non si può cancellare per sbaglio scrivendo il titolo */
.e-tile-title::after,
.is-style-e-tile-title::after {
	content: " →";
	display: inline-block;
	transition: transform 0.3s var(--e-ease);
}
.wp-block-cover:hover .e-tile-title::after,
.wp-block-cover:hover .is-style-e-tile-title::after {
	transform: translateX(6px);
}
.e-tile-title a,
.is-style-e-tile-title a { color: inherit; text-decoration: none; }
/* il link del titolo copre tutto il tile */
.wp-block-cover.e-tile .e-tile-title a::after,
.wp-block-cover.is-style-e-tile .e-tile-title a::after,
.wp-block-cover.e-tile .is-style-e-tile-title a::after,
.wp-block-cover.is-style-e-tile .is-style-e-tile-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}
.wp-block-cover.e-tile:has(a:focus-visible),
.wp-block-cover.is-style-e-tile:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

/* ---------------------------------------------------------
   CARD NUMERATA e PANNELLO GLASS con blocchi nativi
   --------------------------------------------------------- */
/* il numero è un normale paragrafo con lo stile "Numero passo" */
.e-step .e-step-num,
.e-step .is-style-e-step-num { margin: 0; }
/* l'immagine del pannello glass arriva dal blocco Immagine */
.e-glass-person figure,
.e-glass-person .wp-block-image { margin: 0; flex: 0 0 auto; }
.e-glass-person .wp-block-image img {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.6);
}
.e-glass-person-label,
.is-style-e-glass-person-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--ciano);
	margin: 0;
}
.e-glass-person-name,
.is-style-e-glass-person-name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: #fff;
	margin: 0;
}
.e-glass-close,
.is-style-e-glass-close {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	padding-top: 0.85rem;
	margin: 0;
}
/* il pannello glass costruito a blocchi mantiene testo bianco */
.e-glass .wp-block-list,
.e-glass p:not(.e-glass-close):not(.e-glass-person-label) { color: #fff; }

/* =========================================================
   GRIGLIE
   ========================================================= */
.wp-block-columns { align-items: stretch; }
.wp-block-column:has(> .e-offer),
.wp-block-column:has(> .e-card),
.wp-block-column:has(> .wp-block-group) {
	display: flex;
	flex-direction: column;
}
.wp-block-column > .e-offer,
.wp-block-column:has(> .wp-block-group) > .wp-block-group { flex: 1 1 auto; }

.e-grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	grid-auto-rows: 1fr;
}
/* griglie di tile: righe mai sotto l'altezza minima del blocco immagine */
.e-grid:has(> .e-tile) { grid-auto-rows: minmax(330px, 1fr); }
@media (max-width: 599px) {
	.e-grid:has(> .e-tile) { grid-auto-rows: minmax(260px, 1fr); }
}
/* Griglia pari applicata al blocco Colonne dal pannello Stili */
.wp-block-columns.is-style-e-grid-2,
.wp-block-columns.is-style-e-grid-3 {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-auto-rows: 1fr;
}
.wp-block-columns.is-style-e-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wp-block-columns.is-style-e-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wp-block-columns.is-style-e-grid-2 > .wp-block-column,
.wp-block-columns.is-style-e-grid-3 > .wp-block-column { flex-basis: auto !important; margin: 0; }
@media (max-width: 781px) {
	.wp-block-columns.is-style-e-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
	.wp-block-columns.is-style-e-grid-2 { grid-template-columns: 1fr; }
}

.e-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.e-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.e-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.e-grid > .e-card,
.e-grid > .e-tile,
.e-grid > .e-offer { height: 100%; margin: 0; }
@media (max-width: 1024px) {
	.e-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.e-grid--3,
	.e-grid--4 { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
	.e-grid--2 { grid-template-columns: 1fr; }
	.e-tile { min-height: 260px; }
}

/* =========================================================
   COMPONENTI DI TESTO / LEGACY (restilizzati sul nuovo kit)
   ========================================================= */
/* Link prose: underline solo in hover */
.wp-block-post-content a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	text-decoration: none;
	text-underline-offset: 0.18em;
	transition: color 0.2s var(--e-ease);
}
.wp-block-post-content p a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
}

/* Fix collisione slug "border" usato come text-color */
:where(p, span, li, h1, h2, h3, h4, h5, h6, figcaption).has-border-color {
	border-style: none;
}

/* Pill di contesto (es. "Casa" / "Imprese") */
.e-pill {
	display: inline-block;
	background: var(--wp--preset--color--ink);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.4rem 1.05rem;
	border-radius: 999px;
}
.is-layout-constrained > .e-pill {
	margin-left: max(0px, (100% - var(--wp--style--global--content-size, 1240px)) / 2) !important;
	margin-right: 0 !important;
	max-width: none !important;
}

/* Tag evidenza (ex caldo → velo azzurro) */
.e-tag--warm {
	display: inline-block;
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand-700);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 32%, #fff);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
}

/* Eyebrow nelle card */
.e-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

/* Badge lettera (L / G / L+G) */
.e-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 42px;
	padding: 0 0.65rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand-700);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.05rem;
	margin-bottom: 1rem;
}

/* Chip icona (nelle card): sfondo velo, icona blu profondo.
   Per l'icona Arco delle card usare invece <span class="e-arco"> (44px). */
.e-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand-700);
	margin-bottom: 1.1rem;
}
.e-icon svg { width: 26px; height: 26px; stroke: currentColor; }
/* ex variante calda → allineata al velo azzurro */
.e-icon--warm {
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand-700);
}

/* Icone luce/gas nelle righe-offerta: un solo colore di marca */
.e-offer-label {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-weight: 600;
}
.e-offer-ico {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--wp--preset--color--brand-700);
}
.e-offer-ico svg { width: 22px; height: 22px; stroke: currentColor; }
.e-offer--gas .e-offer-ico { color: var(--wp--preset--color--brand-700); }
.e-offer { position: relative; }
.e-offer .e-offer-label a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.e-offer .wp-block-group,
.e-offer {
	transition: transform 0.3s var(--e-ease), border-color 0.3s var(--e-ease),
		background 0.3s var(--e-ease);
}
.e-offer:hover {
	border-color: var(--wp--preset--color--brand) !important;
	background: var(--wp--preset--color--brand-tint);
	transform: translateY(-2px);
}
.e-offer a { text-decoration: none; }
.e-offer .e-arrow {
	display: inline-block;
	transition: transform 0.3s var(--e-ease);
	color: var(--wp--preset--color--brand-700);
	font-weight: 700;
}
.e-offer:hover .e-arrow { transform: translateX(5px); }

/* Sitemap interna */
.e-sitemap { line-height: 1.6; }
.e-sitemap > li { margin-bottom: 0.6rem; }
.e-sitemap a { font-weight: 600; }
.e-sitemap-sub {
	list-style: none;
	margin: 0.55rem 0 0.5rem;
	padding-left: 1rem;
	border-left: 2px solid var(--wp--preset--color--border);
}
.e-sitemap-sub li { margin: 0.35rem 0; }
.e-sitemap-sub a { font-weight: 500; }
.e-tag-mini {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.12rem 0.55rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand-700);
	vertical-align: middle;
	white-space: nowrap;
}
.e-tag-mini--warn {
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--ink-soft);
}
.e-note-muted {
	margin-top: 0.8rem;
	font-size: 0.82rem;
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

/* =========================================================
   FAQ — fisarmonica: domanda Space Grotesk 500 · 23px,
   indicatore circolare +/- a destra, righe sottili
   ========================================================= */
.e-faq.wp-block-details,
.is-style-e-faq.wp-block-details {
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin-top: -1px;
	padding: 0.4rem 0;
}
.e-faq.wp-block-details summary,
.is-style-e-faq.wp-block-details summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 0.55rem 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: clamp(1.2rem, 1.9vw, 1.4375rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	transition: color 0.2s var(--e-ease);
}
.e-faq.wp-block-details summary::-webkit-details-marker { display: none; }
.e-faq.wp-block-details summary:hover { color: var(--wp--preset--color--brand-700); }
.e-faq.wp-block-details summary::after {
	content: "";
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300537f' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px;
	transition: transform 0.3s var(--e-ease), background-color 0.3s var(--e-ease);
}
.e-faq.wp-block-details[open] summary::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300537f' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
	background-color: var(--wp--preset--color--brand-tint);
}
.e-faq.wp-block-details[open] summary { color: var(--wp--preset--color--ink); }

/* =========================================================
   TESTATA — trasparente sopra l'hero, fissa bianca allo scroll
   (lo stato .is-scrolled è applicato da energetica.js)
   ========================================================= */
.e-header--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: transparent;
}
.e-header--overlay .wp-block-navigation-item__content,
.e-header--overlay .wp-block-site-title a { color: #fff; }
.e-header--fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--wp--preset--color--border);
	transform: translateY(-100%);
	transition: transform 0.3s var(--e-ease);
}
.e-header--fixed.is-scrolled { transform: translateY(0); }

/* =========================================================
   FORM (Contact Form 7)
   ========================================================= */
.e-form {
	display: grid;
	gap: 1.1rem;
	max-width: 720px;
}
.e-form .e-field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	min-width: 0;
}
.e-form .e-field--row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.1rem;
}
.e-form input, .e-form select, .e-form textarea { max-width: 100%; }
@media (max-width: 599px) {
	.e-form .e-field--row { grid-template-columns: 1fr; }
}
.e-form label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
}
.e-form input,
.e-form select,
.e-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.8rem 1.05rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font: inherit;
	transition: border-color 0.2s var(--e-ease), box-shadow 0.2s var(--e-ease);
}
.e-form input::placeholder,
.e-form textarea::placeholder { color: var(--wp--preset--color--ink-faint); opacity: 1; }
.e-form input:focus,
.e-form select:focus,
.e-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--brand) 22%, transparent);
}
.e-form textarea { min-height: 150px; resize: vertical; }
.e-form .e-checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.6rem;
}
.e-form .e-checkbox input { width: auto; margin-top: 0.15rem; }
.e-form .e-checkbox label { font-weight: 400; color: var(--wp--preset--color--ink-soft); }
.e-form .e-fieldset { border: 0; padding: 0; margin: 0; }
.e-form .e-fieldset legend {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
	padding: 0;
	margin-bottom: 0.55rem;
}
.e-form .e-radio-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.e-form .e-radio {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.2rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.2s var(--e-ease), background 0.2s var(--e-ease);
}
.e-form .e-radio input { width: auto; margin: 0; accent-color: var(--wp--preset--color--brand); }
.e-form .e-radio:has(input:checked) {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand-tint);
}
.e-form .e-radio:has(input:focus-visible) {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--brand) 22%, transparent);
}
.e-form .e-hint { font-weight: 400; font-size: 0.85rem; color: var(--wp--preset--color--ink-soft); }
.e-form input[type="file"] {
	padding: 0.6rem 0.7rem;
	background: var(--wp--preset--color--surface);
	border-style: dashed;
	border-radius: 14px;
	cursor: pointer;
}
.e-form .wpcf7-form-control-wrap { display: block; }
.e-form input[type="submit"], .e-form .wpcf7-submit {
	display: inline-block;
	width: auto;
	cursor: pointer;
	background: var(--wp--preset--color--brand);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0.9rem 1.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.0625rem;
	transition: background 0.2s var(--e-ease);
}
.e-form input[type="submit"]:hover, .e-form .wpcf7-submit:hover { background: var(--wp--preset--color--brand-700); }
.e-form .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.e-form .wpcf7-radio .wpcf7-list-item { margin: 0; }
.e-form .wpcf7-radio .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.2rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	cursor: pointer;
	font-weight: 500;
}
.e-form .wpcf7-radio .wpcf7-list-item input { width: auto; accent-color: var(--wp--preset--color--brand); }
.e-form .wpcf7-radio .wpcf7-list-item label:has(input:checked) {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand-tint);
}
.e-form .e-checkbox .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.e-form .e-checkbox .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink-soft);
	cursor: pointer;
}
.e-form .e-checkbox .wpcf7-acceptance input { width: auto; margin-top: 0.2rem; accent-color: var(--wp--preset--color--brand); }
.e-form .wpcf7-not-valid-tip { color: var(--e-error); font-size: 0.85rem; margin-top: 0.3rem; }
.e-form .wpcf7-response-output {
	margin: 1.2rem 0 0;
	padding: 0.85rem 1.1rem;
	border-radius: 14px;
	font-size: 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
}

/* =========================================================
   HERO HOME — immagine/video full-bleed, velatura diagonale,
   angolo Arco bianco 15% in basso a destra, pannello glass
   ========================================================= */
.e-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: clip; /* l'angolo Arco è tagliato dal bordo senza creare scroll orizzontale */
	min-height: clamp(620px, 92vh, 840px);
	background-color: var(--wp--preset--color--ink);
	background-size: cover;
	background-position: center;
	isolation: isolate;
	color: #fff;
	padding-top: clamp(6rem, 14vh, 8.5rem);
	padding-bottom: var(--wp--preset--spacing--50);
}
.e-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	/* velatura diagonale + archi Arco sopra la velatura */
	background-image: url("../img/bg-arco-ink.svg"), linear-gradient(100deg, rgba(14, 47, 58, 0.88) 0%, rgba(14, 47, 58, 0.6) 40%, rgba(14, 47, 58, 0.18) 70%, rgba(14, 47, 58, 0.05) 100%);
	background-size: cover, auto;
	background-position: center, center;
	background-repeat: no-repeat;
	z-index: 0;
}
.e-hero::after {
	content: "";
	position: absolute;
	width: clamp(260px, 26vw, 420px);
	aspect-ratio: 1;
	right: -90px;
	bottom: -110px;
	background: #fff;
	-webkit-mask: var(--e-arco-mask) center / contain no-repeat;
	mask: var(--e-arco-mask) center / contain no-repeat;
	opacity: 0.15;
	pointer-events: none;
	z-index: 0;
}
.e-hero > * { position: relative; z-index: 1; width: 100%; }
/* Immagine hero home (variante fotografica; markup già predisposto per il video).
   Ritaglio responsive dedicato: su mobile inquadratura più stretta a destra. */
.e-hero--home { background-image: url("/wp-content/uploads/2026/07/hero-home.webp"); }
@media (max-width: 767px) {
	.e-hero--home { background-position: 72% center; }
}
/* Cinemagraph dell'hero: lo inserisce il JS solo se il browser lo suona davvero,
   così la foto resta il fondo garantito. z-index negativo perché deve stare
   SOPRA la foto ma SOTTO la velatura e gli archi, che sono a z-index 0. */
.e-hero > .e-hero-video {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	/* ⚠️ Senza questi due il video viene largo quanto la colonna (1240) e
	   centrato, invece che a tutta sezione: il layout «constrained» di WordPress
	   dà a ogni figlio diretto `max-width: <content-size>` e margini automatici,
	   e `width: 100%` non lo annulla perché il limite arriva da max-width.
	   Difetto presente dal 27/07, corretto il 31/07: non si notava perché la
	   velatura scura nasconde il bordo, ma ai lati restava ferma la foto. */
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: center;
	/* Scambio istantaneo, senza dissolvenza: il primo fotogramma del video è la
	   stessa scena della foto, quindi il passaggio non si vede. L'opacità serve
	   solo a tenerlo nascosto finché non è davvero in riproduzione. */
	opacity: 0;
	pointer-events: none;
}
.e-hero > .e-hero-video.is-visible { opacity: 1; }
@media (max-width: 767px) {
	/* stessa inquadratura della foto, altrimenti al cambio la scena salta */
	.e-hero > .e-hero-video { object-position: 72% center; }
}

/* --- Cinemagraph dichiarativi -------------------------------------------
   Una sezione con la classe `e-video--<nome>` riceve sopra la foto il video
   /wp-content/uploads/video/<nome>.webm|mp4, inserito da energetica.js.
   Aggiungere un'animazione = una classe nell'editor + due file caricati.

   Stesso impilamento dell'hero: z-index -1 dentro un contenitore che ha
   `isolation: isolate`, quindi il video sta SOPRA la foto di fondo ma SOTTO
   la velatura e gli archi, che stanno a z-index 0 sullo ::before. La foto
   resta il fondo garantito: se il video non parte non si vede nulla.

   Niente transizione, come sull'hero: il primo fotogramma del video è la
   stessa scena della foto, quindi lo scambio non si nota — e una dissolvenza
   in avvio si leggerebbe come un difetto.

   ⚠️ Il selettore deve restare più specifico di `.e-band > *` (che imposta
   `z-index: 1` a tutti i figli e sta più avanti in questo foglio): con la sola
   classe `.e-clip` vince quella, il video sale SOPRA la velatura e il testo si
   ritrova sul video crudo. L'attributo + la classe fanno 0,2,0 contro 0,1,0. */
[class*="e-video--"] > .e-clip {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	/* ⚠️ Senza questi due il video viene largo 1240 e centrato invece che a tutta
	   banda: il layout «constrained» di WordPress dà a ogni figlio diretto
	   `max-width: <content-size>` e margini automatici, e `width: 100%` non lo
	   annulla perche' il limite arriva da max-width. Si vede come una giuntura
	   verticale dove finisce il video e riprende la foto. */
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	pointer-events: none;
}
[class*="e-video--"] > .e-clip.is-visible { opacity: 1; }
/* Variante piatta (stile mockup): gradiente inchiostro→profondo, solo archi */
.e-hero--flat {
	background-image: linear-gradient(120deg, #0e2f3a 0%, #0f4258 55%, #00537f 100%);
}
.e-hero--flat::before {
	background-image: url("../img/bg-arco-ink.svg");
}
/* Hero di pagina interna: stessa lingua dell'hero home, ma più basso
   (non deve occupare tutta la finestra: sotto c'è subito il contenuto).
   Qui l'intestazione NON è sovrapposta, quindi niente padding extra in alto. */
.e-hero--page {
	min-height: clamp(320px, 42vh, 420px);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}
.e-hero--page h1 { font-size: clamp(2.25rem, 5.5vw, 3.5rem); }
/* --- Hero e bande costruiti come blocco Copertina (pagine interne) ---
   Foto e velatura arrivano dal blocco, così il cliente le cambia dall'editor.
   Al CSS restano solo gli archi. Attenzione alla sovrapposizione: la Copertina
   stampa il proprio sfondo DOPO il nostro ::before, quindi senza alzare il
   livello gli archi finirebbero sotto la velatura (nel resto del sito stanno
   sopra). Il contenuto va poi alzato ancora, per restare in cima. */
.wp-block-cover.e-hero::before,
.wp-block-cover.e-hero::after,
.wp-block-cover.e-band::before { z-index: 1; }
.wp-block-cover.e-hero::before { background-image: url("../img/bg-arco-ink.svg"); }
.wp-block-cover.e-band::before { background-image: url("../img/bg-arco-light.svg"); }
.wp-block-cover.e-hero > .wp-block-cover__inner-container,
.wp-block-cover.e-band > .wp-block-cover__inner-container { position: relative; z-index: 2; }
/* `.e-hero > *` alzerebbe anche foto e velatura della Copertina, che finirebbero
   sopra gli archi: i livelli di fondo vanno riportati in basso. */
.wp-block-cover.e-hero > .wp-block-cover__background,
.wp-block-cover.e-hero > .wp-block-cover__image-background,
.wp-block-cover.e-band > .wp-block-cover__background,
.wp-block-cover.e-band > .wp-block-cover__image-background { z-index: 0; }
/* La Copertina impone padding e altezza propri. ⚠️ Il padding orizzontale NON
   va azzerato: è quello che tiene il testo staccato dal bordo su mobile (le
   sezioni normali lo prendono da `has-global-padding`, la Copertina no).
   Riprendendo il padding di root il risultato è identico su desktop — il
   layout constrained centra comunque a 1240 — e corretto sui telefoni. */
.wp-block-cover.e-hero--page,
.wp-block-cover.e-band {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}
.wp-block-cover.e-hero--page {
	min-height: clamp(320px, 42vh, 420px);
}
.e-hero h1 { color: #fff; }
.e-hero .e-hero-sub { color: rgba(255, 255, 255, 0.85); }
/* Solo nell'hero della home il sottotitolo vive in una colonna al 58%: lì la
   misura di lettura va stretta e ancorata all'inizio della colonna. Negli hero
   di pagina il sottotitolo è figlio diretto del layout constrained, e la misura
   la dà già `e-prose`: mettergli un max-width lo scentrerebbe dal titolo. */
.wp-block-column .e-hero-sub {
	max-width: 46ch;
	margin-left: 0;
	margin-right: auto;
}
.e-hero .e-reassure { color: rgba(255, 255, 255, 0.7); }
/* i link dentro l'hero: l'azzurro del testo corrente è illeggibile sul fondo scuro */
.e-hero p a {
	color: var(--wp--preset--color--ciano);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.e-hero p a:hover { color: #fff; }

/* Pannello glass dell'hero */
.e-glass-panel {
	padding: 1.75rem;
	max-width: 400px;
	margin-left: auto;
}
.e-glass-person {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: 1.2rem;
}
.e-glass-person img {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.6);
	flex: 0 0 auto;
}
.e-glass-person .e-glass-person-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--ciano);
}
.e-glass-person .e-glass-person-name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: #fff;
}
.e-glass-panel .e-list { margin: 0 0 1.1rem; }
.e-glass-panel .e-list li { padding-bottom: 0.55rem; }
.e-glass-close {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	padding-top: 0.85rem;
	margin: 0;
}
@media (max-width: 1023px) {
	.e-glass-panel { margin-left: 0; margin-top: var(--wp--preset--spacing--40); }
}

/* =========================================================
   BANDA NARRATIVA — immagine full-bleed, velatura bianca da sinistra
   ========================================================= */
.e-band {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 560px;
	background-color: var(--wp--preset--color--surface);
	background-size: cover;
	background-position: center right;
	isolation: isolate;
}
.e-band::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Velatura bianca da sinistra + archi Arco sopra la velatura.
	   ⚠️ Le tappe non sono estetiche, sono misurate: il testo occupa fino al
	   ~53% della banda, quindi la velatura resta piena fin lì e cala subito
	   dopo. La versione precedente (0.97 / 0.9 al 36% / 0.45 al 60%) calava
	   troppo presto: l'ultimo terzo di ogni riga del paragrafo stava a 2,94:1
	   di contrasto, sotto il 4,5:1 richiesto. Alleggerita il 31/07 su richiesta
	   di Giacomo: ora è meno bianca a sinistra, scopre la foto dal 76% invece
	   che dall'85%, e la fine delle righe è salita a 4,38:1.
	   ⚠️ Le tappe sono TANTE apposta. Con poche tappe la discesa è una rampa
	   dritta che parte da un tratto quasi piatto: nel punto in cui cambia
	   pendenza si forma uno spigolo, e l'occhio lo legge come una **riga
	   verticale bianca** in mezzo alla banda (rilevato da Giacomo il 31/07,
	   misurato come un picco di 4,8× la variazione media proprio al 53,8%
	   della larghezza). Addolcendo la curva il picco si sposta al bordo della
	   sezione e la sfumatura torna continua. Aggiungendo o togliendo tappe,
	   ricontrollare che non si ricrei un gradino.

	   Toccando questi valori, rimisurare: il punto critico è la FINE delle
	   righe del paragrafo (ink-soft su fondo chiaro), non l'inizio. */
	background-image: url("../img/bg-arco-light.svg"),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.86) 0%,
			rgba(255, 255, 255, 0.84) 40%,
			rgba(255, 255, 255, 0.78) 52%,
			rgba(255, 255, 255, 0.6) 60%,
			rgba(255, 255, 255, 0.38) 67%,
			rgba(255, 255, 255, 0.18) 74%,
			rgba(255, 255, 255, 0.06) 82%,
			rgba(255, 255, 255, 0) 90%
		);
	background-size: cover, auto;
	background-position: center, center;
	background-repeat: no-repeat;
	z-index: 0;
}
.e-band > * { position: relative; z-index: 1; width: 100%; }
/* ⚠️ La foto è il PRIMO FOTOGRAMMA del cinemagraph (`forniture-v2.webp`), non
   più lo scatto originale: il montaggio del loop parte dal master a 1 s, quindi
   solo così foto e video coincidono e lo scambio resta invisibile. Sostituendo
   il video va rigenerato anche questo poster — `scripts/clip-web.sh` lo estrae. */
.e-band--forniture { background-image: url("/wp-content/uploads/2026/07/forniture-v2.webp"); }

/* Variante piatta (stile mockup): gradiente chiaro, solo archi */
.e-band--flat {
	background-image: linear-gradient(120deg, #ffffff 0%, #e4f6fd 100%);
}
.e-band--flat::before {
	background-image: url("../img/bg-arco-light.svg");
}
@media (max-width: 781px) {
	.e-band::before { background: rgba(255, 255, 255, 0.92); }
}

/* =========================================================
   ELENCO SU DUE COLONNE (sezione scura "Cosa non paghi")
   ========================================================= */
.e-cols-2,
.is-style-e-cols-2 { columns: 2; column-gap: 3rem; }
.e-cols-2 li,
.is-style-e-cols-2 li { break-inside: avoid; }
@media (max-width: 781px) {
	.e-cols-2 { columns: 1; }
}

/* =========================================================
   TESTATA HOME — trasparente sopra l'hero, fissa bianca allo scroll
   (JS applica .is-scrolled; le altre pagine restano com'erano)
   ========================================================= */
body.home .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: transparent !important;
}
/* con la admin bar di WP loggati: l'header scende sotto la barra */
body.home.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}
body.home .site-header:not(.is-scrolled) .wp-block-navigation-item__content,
body.home .site-header:not(.is-scrolled) .wp-block-navigation__responsive-container-open,
/* la freccia della tendina è in un <button> a fianco del link, non dentro */
body.home .site-header:not(.is-scrolled) .wp-block-navigation-submenu__toggle {
	color: #fff;
}
body.home .site-header:not(.is-scrolled) .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--ciano);
}
/* logo in negativo bianco sopra l'hero */
body.home .site-header:not(.is-scrolled) .custom-logo {
	filter: brightness(0) invert(1);
}
/* bottone "Diventa cliente" in versione glass sopra l'hero */
body.home .site-header:not(.is-scrolled) .wp-block-button__link {
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
/* allo scorrimento: fissa, fondo bianco pieno, logo tricolore */
body.home .site-header.is-scrolled {
	position: fixed;
	top: 0;
	background: #fff !important;
	border-bottom: 1px solid var(--wp--preset--color--border);
	animation: e-header-in 0.3s var(--e-ease);
}
body.home.admin-bar .site-header.is-scrolled {
	top: var(--wp-admin--admin-bar--height, 32px);
}
@keyframes e-header-in {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}
/* logo in negativo bianco (footer o fondi scuri) */
.e-logo-white img { filter: brightness(0) invert(1); }

/* link del footer: bianchi su inchiostro, hover ciano */
.site-footer a { color: rgba(255, 255, 255, 0.92); }
.site-footer a:hover { color: var(--wp--preset--color--ciano); }

/* =========================================================
   MENU PRINCIPALE
   Tre stati da tenere insieme: voci di primo livello, tendina su
   desktop, elenco a scomparsa su mobile. Il filo conduttore è il
   segno Arco come pallino delle voci figlie.
   ========================================================= */

/* la testata (e quindi la tendina) sta sopra al contenuto: senza livello
   esplicito una qualunque barra sticky di pagina le passerebbe davanti */
.site-header { position: relative; z-index: 50; }

/* --- voci di primo livello --- */
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 0.35rem;
	transition: color 0.18s var(--e-ease);
}
/* sottolineatura col gradiente Arco: cresce da sinistra, non lampeggia */
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--e-grad-arco);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.22s var(--e-ease);
}
.site-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.site-header .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content::after,
/* pagina corrente e sezione che la contiene: la sottolineatura resta accesa */
.site-header .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after,
.site-header .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content::after,
.site-header .wp-block-navigation__container > .current-menu-parent > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}
/* la freccia ruota quando la tendina è aperta */
.site-header .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon,
.site-header .wp-block-navigation__submenu-icon {
	transition: transform 0.22s var(--e-ease);
}
.site-header .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon,
.site-header .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
}

/* --- tendina su desktop ---
   ⚠️ Il pannello sta dentro un <li> stretto: da aperto core gli dà `width:auto`,
   e lo «shrink-to-fit» lo schiaccia sul min-width mandando a capo le voci lunghe.
   Vanno ripetuti gli stessi stati di core con un selettore più specifico. */
.site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
	width: max-content;
	min-width: 250px;
	max-width: 360px;
}
.site-header .wp-block-navigation__submenu-container {
	gap: 1px;
	padding: 0.6rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 22px;
	box-shadow: 0 26px 56px -26px rgba(14, 47, 58, 0.32), 0 2px 6px -2px rgba(14, 47, 58, 0.08);
}
/* il `padding` di core sta su `.has-child ...`: serve la stessa profondità,
   altrimenti il testo resta a sinistra e il pallino gli finisce sotto */
.site-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	position: relative;
	padding: 0.6rem 0.9rem 0.6rem 2.35rem;
	border-radius: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	transition: background 0.16s var(--e-ease), color 0.16s var(--e-ease);
}
/* pallino Arco: fermo e tenue, si accende sulla voce attiva */
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	left: 0.9rem;
	top: 50%;
	width: 15px;
	height: 15px;
	margin-top: -7px;
	background: var(--e-grad-arco);
	-webkit-mask: var(--e-arco-mask) center / contain no-repeat;
	mask: var(--e-arco-mask) center / contain no-repeat;
	opacity: 0.28;
	transition: opacity 0.16s var(--e-ease);
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--brand-700);
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::before,
.site-header .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content::before {
	opacity: 1;
}
/* sopra l'hero le voci di primo livello sono bianche: nella tendina no */
body.home .site-header:not(.is-scrolled) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}
body.home .site-header:not(.is-scrolled) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand-700);
}

/* =========================================================
   MAPPA DELLE PAGINE (uso interno) — etichette di stato
   Sono evidenziazioni native dell'editor (formato «Evidenzia», cioè <mark>):
   restano modificabili dal cliente e non richiedono HTML grezzo. Qui prendono
   la forma di pastiglia; i colori arrivano dall'attributo del blocco.
   ========================================================= */
.e-sitemap mark {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.12rem 0.55rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: 0.08em;
}
.e-sitemap em {
	display: block;
	margin-top: 0.15rem;
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.875rem;
	font-style: normal;
}
/* nella legenda le pastiglie stanno in fila dentro un paragrafo */
.e-callout .e-sitemap mark:first-of-type { margin-left: 0; }

/* =========================================================
   BARRA DELLE ANCORE (FAQ) — «su desktop resta fissa allo scroll»
   come chiede il wireframe. Su mobile scorre via: incollata
   ruberebbe metà schermo su una pagina lunga.
   ========================================================= */
.e-faq-nav {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
@media (min-width: 782px) {
	.e-faq-nav {
		position: sticky;
		top: 0;
		z-index: 30;
	}
	/* da loggati la barra deve fermarsi sotto la barra di amministrazione */
	body.admin-bar .e-faq-nav { top: var(--wp-admin--admin-bar--height, 32px); }
}
.e-faq-nav .wp-block-buttons { margin-top: 0; }

/* --- menu a scomparsa su mobile ---
   Il problema non era che le tendine fossero nascoste: era che tutto stava
   centrato e alla stessa dimensione, quindi famiglie e voci figlie si
   leggevano come un unico elenco piatto. Qui si costruisce la gerarchia. */
.wp-block-navigation__responsive-container.is-menu-open {
	/* core allinea l'elenco a scomparsa con la giustificazione del blocco
	   (qui «center»): la si ribalta a sinistra col suo stesso parametro */
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-align: flex-start;
	background: #fff;
	color: var(--wp--preset--color--ink);
}
/* margini dell'elenco a scomparsa: gli stessi del contenuto delle pagine */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: var(--wp--preset--spacing--40) var(--wp--style--root--padding-right) var(--wp--preset--spacing--60) var(--wp--style--root--padding-left);
}
/* ⚠️ `!important` volutamente: il blocco Navigazione porta la classe
   `items-justified-center` e in colonna quella centratura passa da `align-items`,
   che vince su qualunque selettore ragionevole. Qui l'elenco DEVE stare a
   sinistra: centrato, genitori e figli si leggono come una lista piatta. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	text-align: left;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}

/* famiglia: carattere dei titoli, e una linea che la stacca da quella sopra */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	padding-top: 0.9rem;
	margin-top: 0.9rem;
	border-top: 1px solid var(--wp--preset--color--border);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-bottom: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
}
/* la sottolineatura Arco delle voci di primo livello qui non serve */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: none;
}
/* pagina corrente: si riconosce dal colore, non da una riga sotto */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand-700);
}

/* voci figlie: elenco indentato col pallino Arco, non un pannello */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0;
	width: 100%;
	padding: 0.4rem 0 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	gap: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0 0.5rem 1.9rem;
	border-radius: 0;
	font-size: 1.0625rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink-soft);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	left: 0;
	opacity: 0.5;
}
/* niente fondo colorato qui: un rettangolo largo quanto il testo si legge come
   un errore. La pagina corrente si distingue col colore e col pallino pieno. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	background: transparent;
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand-700);
	font-weight: 600;
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content::before {
	opacity: 1;
}
/* la freccia della tendina non serve: i figli sono già tutti in vista */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* =========================================================
   SEZIONI FULL-WIDTH — niente blockGap tra le sezioni di pagina:
   ogni sezione porta il suo padding, il gap creava strisce bianche.
   ========================================================= */
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}
/* niente blockGap neanche tra header/main/footer a livello radice */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}
.entry-content { margin-block-start: 0; }

/* =========================================================
   MOVIMENTO — reveal 200–300ms, niente parallasse/contatori.
   Con prefers-reduced-motion le animazioni non si attivano.
   ========================================================= */
/* --- comparsa allo scorrimento ---
   Due varianti sole, entrambe selezionabili dall'editor come stile del blocco:
   `e-reveal` (sale di 12px) ed `e-reveal--dissolvenza` (solo opacità, per le
   immagini e le Copertine, dove lo scorrimento verticale si nota troppo).
   ⚠️ `register_block_style` applica `is-style-<nome>`: doppio selettore ovunque,
   e anche il JS deve osservare entrambe le classi. */
@media (prefers-reduced-motion: no-preference) {
	.e-reveal-ready .e-reveal,
	.e-reveal-ready .is-style-e-reveal,
	.e-reveal-ready .e-reveal--dissolvenza,
	.e-reveal-ready .is-style-e-reveal--dissolvenza {
		opacity: 0;
		transition: opacity 0.45s var(--e-ease), transform 0.45s var(--e-ease);
	}
	.e-reveal-ready .e-reveal,
	.e-reveal-ready .is-style-e-reveal {
		transform: translateY(12px);
	}
	.e-reveal-ready .e-reveal.is-visible,
	.e-reveal-ready .is-style-e-reveal.is-visible,
	.e-reveal-ready .e-reveal--dissolvenza.is-visible,
	.e-reveal-ready .is-style-e-reveal--dissolvenza.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* --- salti alle ancore ---
   Senza questo il titolo di destinazione finisce SOTTO la barra fissa della
   FAQ (misurato: arriva a 54px, la barra ne occupa 94). `:has()` alza lo
   scarto solo sulle pagine che quella barra ce l'hanno davvero. */
:root { --e-ancora: 2rem; }
/* ⚠️ 8rem è il valore giusto, non alzarlo: l'`id` sta sulla SEZIONE, non sul
   titolo, quindi «sezione che comincia dove finisce la barra» è il risultato
   voluto — l'aria la dà il padding interno della sezione. Alzando a 9rem si
   lascia scoperta una striscia della sezione precedente. */
body:has(.e-faq-nav) { --e-ancora: 8rem; }
body.admin-bar { --e-ancora: calc(2rem + var(--wp-admin--admin-bar--height, 32px)); }
body.admin-bar:has(.e-faq-nav) { --e-ancora: calc(8rem + var(--wp-admin--admin-bar--height, 32px)); }
[id]:not(body):not(html) { scroll-margin-top: var(--e-ancora); }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* --- fisarmoniche delle domande ---
   `<details>` non anima l'apertura da solo. Si anima il contenuto alla
   comparsa: alla chiusura resta istantaneo, ed è il compromesso che funziona
   su tutti i browser senza appoggiarsi a proprietà ancora poco diffuse. */
@media (prefers-reduced-motion: no-preference) {
	.e-faq.wp-block-details[open] > *:not(summary) {
		animation: e-faq-apre 0.3s var(--e-ease);
	}
	@keyframes e-faq-apre {
		from { opacity: 0; transform: translateY(-6px); }
		to { opacity: 1; transform: none; }
	}
}
/* il segno ruota mentre cambia da «+» a «−»: senza, lo scambio è uno scatto */
.e-faq.wp-block-details[open] summary::after { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link:hover,
	.e-card:hover,
	.e-offer:hover { transform: none; }
	.e-tile:hover > img,
	.e-tile:hover > .e-tile-img { transform: none; }
	.wp-block-cover.e-tile:hover .wp-block-cover__image-background { transform: none; }
	.e-faq.wp-block-details[open] summary::after { transform: none; }
	.site-header .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon,
	.site-header .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon { transform: none; }
}