/* ==========================================================================
   Edilmutti - componenti e sezioni delle pagine (home, recensioni, invito).
   Valori dal mockup Figma (tavola 2200 px), portati sui token --dg-*.
   Valori letterali rimasti, segnalati all'operatore:
   - interlinee strette dei titoli grandi (1.07 / 1.14): nessun token sotto lh-sm 1.25;
   - giallo delle stelle delle recensioni (#F6BB06, colore di Google);
   - misure dei riquadri (pulsanti 41 px, icone 72 px, schede) in rem.
   Colori del mockup senza token, per ora sostituiti:
   - verde delle schede su fondo scuro (#005961 / #055D66) -> primary-500 con velo chiaro.
   ========================================================================== */

/* ---------- Componenti ---------- */

/* Occhiello a pillola sopra i titoli. */
.dg-occhiello {
	display: inline-flex;
	margin: 0 0 var(--dg-space-4);
	padding: var(--dg-space-1) var(--dg-space-3);
	font-size: var(--dg-fs-sm);
	font-weight: var(--dg-fw-medium);
	line-height: var(--dg-lh-base);
	letter-spacing: .02em;
	text-transform: uppercase;
	border: var(--dg-border-width) solid currentColor;
	border-radius: var(--dg-radius-pill);
}
.dg-occhiello--pieno { color: var(--dg-primary-500); background: var(--dg-neutral-100); border-color: var(--dg-primary-500); }
.dg-occhiello--chiaro { color: var(--dg-neutral-100); border-color: var(--dg-neutral-200); }

/* Etichetta in maiuscolo (nel mockup in Geist Mono, font non assegnato a un token). */
.dg-etichetta {
	margin: 0;
	font-size: var(--dg-fs-sm);
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Titolo di sezione grande. */
.dg-titolo-sezione {
	margin: 0;
	font-size: var(--dg-h2);
	font-weight: var(--dg-fw-medium);
	line-height: 1.14;
	letter-spacing: -.02em;
}

/* Testo introduttivo accanto ai titoli. */
.dg-testo-lead {
	margin: 0 0 var(--dg-space-5);
	font-size: var(--dg-h6);
	font-weight: var(--dg-fw-medium);
	line-height: var(--dg-lh-base);
}

/* Pulsante a filo con la freccia nel riquadro pieno. Sui fondi chiari e' verde
   petrolio, sui fondi scuri (--chiaro) crema; al passaggio si riempie. */
.dg-pulsante {
	display: inline-flex;
	align-items: center;
	gap: var(--dg-space-3);
	min-height: 3.25rem;
	padding: var(--dg-space-1);
	padding-left: var(--dg-space-3);
	color: var(--dg-primary-500);
	font-weight: var(--dg-fw-medium);
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	background: transparent;
	border: var(--dg-border-width) solid currentColor;
	transition: color var(--dg-duration-fast) var(--dg-ease-standard), background-color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dg-pulsante__icona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5625rem;
	height: 2.5625rem;
	color: var(--dg-neutral-100);
	background: var(--dg-primary-500);
	border-radius: var(--dg-radius-sm);
	transition: inherit;
}
.dg-pulsante__icona .dg-icona { width: 1.25rem; height: 1.25rem; }
.dg-pulsante:hover { color: var(--dg-neutral-100); background: var(--dg-primary-500); }
.dg-pulsante:hover .dg-pulsante__icona { color: var(--dg-primary-500); background: var(--dg-neutral-100); }

.dg-pulsante--chiaro { color: var(--dg-neutral-100); }
.dg-pulsante--chiaro .dg-pulsante__icona { color: var(--dg-primary-500); background: var(--dg-neutral-100); }
.dg-pulsante--chiaro:hover { color: var(--dg-primary-500); background: var(--dg-neutral-100); }
.dg-pulsante--chiaro:hover .dg-pulsante__icona { color: var(--dg-neutral-100); background: var(--dg-primary-500); }

/* ---------- Barra avvisi ---------- */
/* Stima dell'altezza della barra per la hero, finche' tema.js non la misura. */
:root:has(.dg-barra) { --altezza-barra: 3.125rem; }
@media (min-width: 768px) { :root:has(.dg-barra) { --altezza-barra: 3.75rem; } }
.dg-barra { color: var(--dg-neutral-100); background: var(--dg-primary-500); }

/* Telefono (mockup mobile): testo piccolo con la stellina a sinistra, senza la X. */
.dg-barra__inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 3.125rem;
	padding-block: var(--dg-space-2);
}
.dg-barra__testo {
	display: flex;
	align-items: center;
	gap: var(--dg-space-2);
	margin: 0;
	/* 13 px del mockup mobile: piu' piccolo di fs-sm, unico punto del sito. */
	font-size: .8125rem;
	letter-spacing: .02em;
}
.dg-barra__icona { width: .8125rem; height: .8125rem; color: var(--dg-secondary-500); fill: currentColor; stroke: none; }
.dg-barra__link { color: inherit; }
.dg-barra__link:hover { color: inherit; }
.dg-barra__chiudi { display: none; }

/* Da 768 px: testo centrato, stellina piu' grande e la X per chiudere. */
@media (min-width: 768px) {
	.dg-barra__inner { justify-content: center; min-height: 3.75rem; padding-inline: var(--dg-space-6); }
	.dg-barra__testo { font-size: var(--dg-font-size-base); text-align: center; }
	.dg-barra__icona { width: 1.25rem; height: 1.25rem; }
	.dg-barra__chiudi {
		position: absolute;
		top: 50%; right: var(--dg-space-3);
		display: flex;
		padding: var(--dg-space-1);
		color: inherit;
		background: none;
		border: 0;
		transform: translateY(-50%);
		cursor: pointer;
	}
}

/* ---------- Hero ---------- */
/* Misure dai due mockup: desktop (tavola 2200, da 1200 px) e telefono (tavola 402, sotto 1200 px). */

/* Risale sotto l'header trasparente della home: altezza dell'header + il suo bordo. */
.dg-header--sovrapposto ~ .dg-main > .dg-hero:first-child { margin-top: calc(-4.5rem - var(--dg-border-width)); }
@media (min-width: 1200px) {
	.dg-header--sovrapposto ~ .dg-main > .dg-hero:first-child { margin-top: calc(-7.875rem - var(--dg-border-width)); }
}

.dg-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	/* Alta lo schermo meno la barra avvisi (tema.js ne misura l'altezza; senza script
	   vale la stima in alto). */
	min-height: calc(100vh - var(--altezza-barra, 0px));
	overflow: hidden;
	color: var(--dg-neutral-100);
	background: var(--dg-primary-900);
}

/* ---------- Sipario: la hero fotografica resta ferma e la pagina le scorre sopra ----------
   Vale per le testate con foto: .dg-hero (home), .dg-apertura (Chi siamo, Showroom,
   Certificazioni), .dg-testata (categorie e pagine prodotto), quando aprono la pagina.
   --sipario-alto la mette tema.js: 0, o negativo se la hero e' piu' alta dello schermo
   (si ferma quando se ne vede la fine). */
.dg-main > :is(.dg-hero, .dg-apertura, .dg-testata):first-child {
	position: sticky;
	top: var(--sipario-alto, 0px);
	z-index: 0;
}
/* Cio' che segue sale sopra: chi non ha un fondo suo prende quello della pagina (:where non
   aggiunge specificita', le sezioni colorate restano colorate). */
:where(.dg-main > :is(.dg-hero, .dg-apertura, .dg-testata):first-child ~ *),
:where(.dg-main:has(> :is(.dg-hero, .dg-apertura, .dg-testata):first-child) ~ .dg-footer) {
	position: relative;
	z-index: 1;
	background-color: var(--dg-neutral-100);
}
/* Ombra appena accennata sul bordo della pagina che arriva. */
.dg-main > :is(.dg-hero, .dg-apertura, .dg-testata):first-child + * { box-shadow: 0 -1.5rem 3rem rgba(var(--dg-black-rgb), .18); }
/* Mentre viene coperta la hero si scurisce fino al 45% nel primo schermo di scorrimento:
   solo dove il browser lega le animazioni allo scorrimento, e senza "riduci animazioni".
   Sta in ::before perche' ::after e' gia' il velo scuro delle testate (.dg-apertura, .dg-testata). */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.dg-main > :is(.dg-hero, .dg-apertura, .dg-testata):first-child::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 5;
			pointer-events: none;
			background: rgb(var(--dg-black-rgb));
			opacity: 0;
			animation: dg-sipario linear both;
			animation-timeline: scroll(root);
			animation-range: 0 100vh;
		}
		@keyframes dg-sipario { to { opacity: .45; } }
	}
}

/* Foto che scorrono (Swiper) e velo scuro: sotto a tutto, su tutta la hero. */
.dg-hero__swiper { position: absolute; inset: 0; z-index: -2; margin: 0; }
.dg-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Zoom leggerissimo della foto attiva, piu' lungo del cambio (5 s + dissolvenza): la
   classe is-zoom la mette caroselli.js. Niente zoom con "riduci animazioni". */
.dg-hero__swiper .swiper-slide { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.dg-hero__swiper .is-zoom .dg-hero__img { transform: scale(1.06); transition: transform 7s cubic-bezier(.25, .1, .25, 1); }
}
.dg-hero__velo { position: absolute; inset: 0; z-index: -1; background: rgba(var(--dg-black-rgb), .39); }

/* Testi fissi. Lo spazio in alto e' quello dell'header, che in home sta sopra la hero.
   Valori del telefono dal mockup mobile (tavola 402), sovrascritti da 992 px. */
.dg-hero__testi {
	display: flex;
	flex-direction: column;
	padding-top: calc(4.5rem + var(--dg-space-4));
	padding-bottom: var(--dg-space-4);
}
@media (max-width: 1199.98px) { .dg-hero__testi { padding-inline: 1.25rem; } }
.dg-hero__titolo {
	max-width: 7.6em;
	margin: 0;
	line-height: 1.1;
	letter-spacing: -.01em;
}
.dg-hero__sottotitolo { margin: var(--dg-space-3) 0 0; font-weight: var(--dg-fw-medium); line-height: var(--dg-lh-base); }
.dg-hero__testo {
	max-width: 16.5em;
	margin: var(--dg-space-4) 0 0;
	font-weight: var(--dg-fw-medium);
	line-height: 1.33;
}

/* Riquadro incentivi: compatto fino a 1199 px (in basso a sinistra), completo da 1200 px
   (in basso a destra): sotto, accanto al titolo grande non ci sta. */
.dg-hero__lato { margin-top: auto; padding-bottom: var(--dg-space-4); }
.dg-hero__lato .dg-wrap { display: flex; justify-content: flex-start; }
.dg-hero__box { display: none; }

.dg-hero__mini {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	width: 12.25rem;
	padding: .75rem var(--dg-space-3);
	color: var(--dg-white);
	text-decoration: none;
	background: rgba(var(--dg-black-rgb), .14);
	border-radius: var(--dg-radius-xl);
	-webkit-backdrop-filter: blur(17px);
	backdrop-filter: blur(17px);
}
.dg-hero__mini:hover { color: var(--dg-white); background: rgba(var(--dg-black-rgb), .3); }
.dg-hero__mini-titolo { line-height: 1.375; text-transform: uppercase; }
.dg-hero__mini-cifra { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--dg-space-2); }
.dg-hero__mini-sopra { font-weight: var(--dg-fw-medium); line-height: 2; letter-spacing: .05em; }
.dg-hero__mini-valore { font-weight: var(--dg-fw-medium); line-height: 1.15; color: var(--dg-secondary-500); }

/* Barra con contatore e frecce (le frecce al bordo destro dello schermo). */
.dg-hero__barra { position: relative; border-top: var(--dg-border-width) solid rgba(var(--dg-neutral-100-rgb), .3); }
.dg-hero__barra-inner { display: flex; align-items: center; min-height: 3.375rem; }
.dg-hero__contatore {
	margin: 0;
	letter-spacing: .01em;
	color: rgba(var(--dg-white-rgb), .7);
}
.dg-hero__comandi { position: absolute; top: 0; right: 0; bottom: 0; display: flex; }
.dg-hero__comando {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	border-left: var(--dg-border-width) solid rgba(var(--dg-neutral-100-rgb), .3);
	cursor: pointer;
	transition: background-color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dg-hero__comando:hover { background: rgba(var(--dg-white-rgb), .1); }
.dg-hero__comando .dg-icona { width: 1.25rem; height: 1.25rem; }

@media (min-width: 1200px) {
	/* Il testo in basso scende al fondo; il riquadro completo sta sopra la foto, in basso
	   a destra, all'altezza del testo. */
	.dg-hero__testi { flex: 1; padding-bottom: var(--dg-space-4); }
	.dg-hero__titolo { line-height: 1.07; letter-spacing: normal; }
	.dg-hero__sottotitolo { margin-top: var(--dg-space-4); }
	.dg-hero__testo { max-width: min(16.5em, 100% - 26rem); margin-top: auto; padding-top: var(--dg-space-4); line-height: var(--dg-lh-sm); }
	.dg-hero__lato .dg-wrap { justify-content: flex-end; }
	.dg-hero__lato {
		position: absolute;
		left: 0; right: 0; bottom: calc(5rem + var(--dg-space-4));
		margin: 0;
		padding: 0;
		pointer-events: none;
	}
	.dg-hero__mini { display: none; }
	.dg-hero__box {
		display: block;
		width: 24.3125rem;
		padding: var(--dg-space-5) var(--dg-space-4) var(--dg-space-4);
		color: var(--dg-white);
		text-align: center;
		background: rgba(var(--dg-white-rgb), .12);
		border-radius: var(--dg-radius-xl);
		-webkit-backdrop-filter: blur(17px);
		backdrop-filter: blur(17px);
		pointer-events: auto;
	}
	.dg-hero__barra-inner { min-height: 5rem; }
	.dg-hero__contatore { font-weight: var(--dg-fw-semibold); }
	.dg-hero__comando { width: 5.125rem; }
	.dg-hero__comando .dg-icona { width: 2rem; height: 2rem; }
}
@media (min-width: 1200px) {
	.dg-hero__testi { padding-top: calc(7.875rem + var(--dg-space-4)); }
}

.dg-hero__box-titolo {
	margin: 0 0 var(--dg-space-4);
	font-weight: var(--dg-fw-medium);
	line-height: var(--dg-lh-sm);
	letter-spacing: .03em;
	text-transform: uppercase;
}
.dg-hero__box-cifra { display: flex; flex-direction: column; align-items: center; gap: var(--dg-space-1); margin: 0; }
.dg-hero__box-sopra { font-weight: var(--dg-fw-medium); letter-spacing: .05em; }
.dg-hero__box-valore { font-weight: var(--dg-fw-medium); line-height: 1.15; color: var(--dg-secondary-500); }
.dg-hero__box-testo { margin: var(--dg-space-3) 0 var(--dg-space-4); font-weight: var(--dg-fw-medium); }
.dg-hero__box-link {
	display: block;
	padding: var(--dg-space-3);
	color: var(--dg-neutral-100);
	font-weight: var(--dg-fw-medium);
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	border: var(--dg-border-width) solid var(--dg-neutral-100);
	border-radius: var(--dg-radius-sm);
	transition: color var(--dg-duration-fast) var(--dg-ease-standard), background-color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dg-hero__box-link:hover { color: var(--dg-primary-500); background: var(--dg-neutral-100); }

/* Scala tipografica della hero: misure FISSE per fascia, non calcolate sulla larghezza
   dello schermo (scelta del progetto, solo per la hero). Sotto 576 px i valori del
   mockup mobile (tavola 402), da 1400 px quelli del mockup desktop (tavola 2200); in
   mezzo crescono con lo stesso rapporto a ogni soglia. In rem: seguono lo zoom.
   Titolo 62 70 80 90 102 116 · sottotitolo 18 19 20 20 21 22 · testo 24 26 29 32 35 38. */
.dg-hero__titolo { font-size: 3.875rem; }
.dg-hero__sottotitolo { font-size: 1.125rem; }
.dg-hero__testo { font-size: 1.5rem; }
.dg-hero__contatore { font-size: .875rem; }
/* Riquadro compatto (sotto 1200 px): sempre le misure del mockup mobile. */
.dg-hero__mini-titolo { font-size: 1rem; }
.dg-hero__mini-sopra { font-size: .875rem; }
.dg-hero__mini-valore { font-size: 2.25rem; }
/* Riquadro completo (da 1200 px, largo 389 px): sempre le misure del mockup desktop. */
.dg-hero__box-titolo { font-size: 2.0625rem; }
.dg-hero__box-sopra { font-size: 1.0625rem; }
.dg-hero__box-valore { font-size: 4.25rem; }
.dg-hero__box-testo { font-size: 1rem; }
.dg-hero__box-link { font-size: 1.0625rem; }

@media (min-width: 576px) {
	.dg-hero__titolo { font-size: 4.375rem; }
	.dg-hero__sottotitolo { font-size: 1.1875rem; }
	.dg-hero__testo { font-size: 1.625rem; }
}
@media (min-width: 768px) {
	.dg-hero__titolo { font-size: 5rem; }
	.dg-hero__sottotitolo { font-size: 1.25rem; }
	.dg-hero__testo { font-size: 1.8125rem; }
}
@media (min-width: 992px) {
	.dg-hero__titolo { font-size: 5.625rem; }
	.dg-hero__testo { font-size: 2rem; }
}
@media (min-width: 1200px) {
	.dg-hero__titolo { font-size: 6.375rem; }
	.dg-hero__contatore { font-size: 1.125rem; }
	.dg-hero__sottotitolo { font-size: 1.3125rem; }
	.dg-hero__testo { font-size: 2.1875rem; }
}
@media (min-width: 1400px) {
	.dg-hero__titolo { font-size: 7.25rem; }
	.dg-hero__sottotitolo { font-size: 1.375rem; }
	.dg-hero__testo { font-size: 2.375rem; }
}

/* ---------- Famiglie di prodotto ---------- */
.dg-famiglie { padding-block: var(--dg-ss-md) var(--dg-ss-sm); }
.dg-famiglie__titolo { max-width: 11em; margin-bottom: var(--dg-ss-md); }
.dg-famiglie__griglia {
	display: grid;
	gap: var(--dg-space-3);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) { .dg-famiglie__griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .dg-famiglie__griglia { grid-template-columns: repeat(3, 1fr); } }

.dg-famiglia {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	color: var(--dg-white);
	background: var(--dg-neutral-200);
}
@media (min-width: 768px) {
	.dg-famiglia { aspect-ratio: 692 / 825; }
	.dg-famiglia--larga { grid-column: span 2; aspect-ratio: 1408 / 825; }
}
/* A due colonne l'ultima card, se resterebbe da sola sulla riga (posizione pari, dopo la
   prima che ne occupa due), si allarga come la prima: niente buchi. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.dg-famiglia:last-child:nth-child(even) { grid-column: span 2; aspect-ratio: 1408 / 825; }
}
/* Da tre colonne il riquadro largo prende l'altezza dalla scheda accanto. Anche l'ultima
   card si allarga se resterebbe un buco: la prima occupa due posti, quindi succede quando
   le card sono 3n+1 (con 7: Tapparelle + Caminetti largo nell'ultima riga). */
@media (min-width: 1200px) {
	.dg-famiglia--larga { aspect-ratio: auto; }
	.dg-famiglia:last-child:nth-child(3n+1) { grid-column: span 2; aspect-ratio: auto; }
}

.dg-famiglia__img {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%;
	object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
	.dg-famiglia__img { transition: transform var(--dg-duration-slow) var(--dg-ease-standard); }
	.dg-famiglia:hover .dg-famiglia__img { transform: scale(1.04); }
}
.dg-famiglia::before {
	content: "";
	position: absolute; inset: 0 0 auto; z-index: -1;
	height: 52%;
	background: linear-gradient(to bottom, rgba(var(--dg-black-rgb), .6), rgba(var(--dg-black-rgb), 0) 98%);
}
.dg-famiglia__titolo {
	max-width: 80%;
	margin: 0;
	padding: var(--dg-space-4);
	font-size: var(--dg-h3);
	line-height: 1;
	letter-spacing: -.01em;
}
/* Mockup (card Porte interne): 30 px sopra e sotto, 32 px ai lati. */
@media (min-width: 1200px) { .dg-famiglia__titolo { padding: 1.875rem 2rem; } }
.dg-famiglia__link { color: inherit; text-decoration: none; }
.dg-famiglia__link:hover { color: inherit; }
.dg-famiglia__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dg-famiglia:focus-within { outline: var(--dg-focus-ring-width) solid var(--dg-focus-ring-color); outline-offset: var(--dg-focus-ring-offset); }
.dg-famiglia__link:focus-visible { outline: none; }
.dg-famiglia__icona {
	position: absolute;
	top: var(--dg-space-3); right: var(--dg-space-3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem; height: 3.5rem;
	background: rgba(var(--dg-white-rgb), .2);
	border: var(--dg-border-width) solid rgba(var(--dg-white-rgb), .6);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.dg-famiglia__icona .dg-icona { width: 2rem; height: 2rem; }
@media (min-width: 1200px) { .dg-famiglia__icona { width: 4.5rem; height: 4.5rem; } }

/* ---------- Perche' Edilmutti ---------- */
.dg-perche { padding-block: var(--dg-ss-lg); color: var(--dg-neutral-100); background: var(--dg-primary-500); }
.dg-perche__testata { margin-bottom: var(--dg-ss-lg); }
.dg-perche__titolo { max-width: 8.9em; }
.dg-perche__schede {
	display: grid;
	gap: var(--dg-space-3);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) { .dg-perche__schede { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .dg-perche__schede { grid-template-columns: repeat(3, 1fr); } }

.dg-scheda {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--dg-space-6);
	padding: var(--dg-space-5) var(--dg-space-4);
	background: rgba(var(--dg-primary-50-rgb), .08);
	border-radius: var(--dg-radius-lg);
}
@media (min-width: 1200px) { .dg-scheda { min-height: 26.3rem; padding: var(--dg-space-5) 2.5625rem; } }
.dg-scheda__numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6875rem; height: 2.6875rem;
	font-weight: var(--dg-fw-medium);
	color: var(--dg-primary-500);
	background: var(--dg-neutral-100);
	border-radius: var(--dg-radius-sm);
}
.dg-scheda__corpo .dg-etichetta { margin-bottom: var(--dg-space-4); }
.dg-scheda__titolo { margin: 0 0 var(--dg-space-3); font-size: var(--dg-h4); line-height: 1.3; letter-spacing: -.02em; }
.dg-scheda__testo { max-width: 33em; margin: 0; font-weight: var(--dg-fw-medium); }

/* ---------- Incentivi ---------- */
.dg-incentivi { padding-block: var(--dg-ss-xl); }
.dg-incentivi__titolo { max-width: 8.9em; margin-bottom: var(--dg-space-4); }
.dg-incentivi__testo { max-width: 31em; letter-spacing: -.02em; }
.dg-incentivi__sottotitolo { margin: 0 0 var(--dg-space-5); font-size: var(--dg-h4); font-weight: var(--dg-fw-normal); }
/* Su telefono e tablet le schede vanno sotto il pulsante: piu' stacco. */
@media (max-width: 991.98px) { .dg-incentivi .dg-incentivi__colonna { margin-top: var(--dg-space-6); } }
.dg-incentivi__elenco {
	display: grid;
	gap: var(--dg-space-3);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 576px) { .dg-incentivi__elenco { grid-template-columns: repeat(2, 1fr); } }

.dg-bonus {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--dg-space-4);
	color: var(--dg-neutral-100);
	background: linear-gradient(rgba(var(--dg-primary-50-rgb), .08), rgba(var(--dg-primary-50-rgb), .08)) var(--dg-primary-500);
	border-radius: var(--dg-radius-md);
	transition: background-color var(--dg-duration-fast) var(--dg-ease-standard);
}
.dg-bonus:hover { background-color: var(--dg-primary-600); }
.dg-bonus__valore {
	margin: 0 0 var(--dg-space-4);
	font-size: var(--dg-h2);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--dg-secondary-400);
}
.dg-bonus__valore small { display: block; font-size: var(--dg-fs-sm); font-weight: var(--dg-fw-medium); letter-spacing: .04em; }
.dg-bonus__titolo { margin: 0 0 var(--dg-space-2); font-size: var(--dg-h5); color: var(--dg-white); }
.dg-bonus__link { color: inherit; text-decoration: none; }
.dg-bonus__link:hover { color: inherit; }
.dg-bonus__link::after { content: ""; position: absolute; inset: 0; }
.dg-bonus:focus-within { outline: var(--dg-focus-ring-width) solid var(--dg-focus-ring-color); outline-offset: var(--dg-focus-ring-offset); }
.dg-bonus__link:focus-visible { outline: none; }
.dg-bonus__testo { margin: 0; }

/* ---------- Numeri ---------- */
.dg-numeri {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 40rem;
	overflow: hidden;
	color: var(--dg-white);
	background: var(--dg-black);
}
@media (min-width: 992px) { .dg-numeri { min-height: 0; aspect-ratio: 2200 / 1073; } }
.dg-numeri__img {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%;
	object-fit: cover;
}
/* Parallasse: la foto sborda del 25% sopra e sotto e scorre piu' lentamente della pagina
   (da -16% a +16% della sua altezza, cioe' +-24% della sezione: i bordi non si vedono
   mai). Con il CSS dove il browser lo supporta, altrimenti tema.js; niente con "riduci
   animazioni". */
@media (prefers-reduced-motion: no-preference) {
	.dg-numeri .dg-numeri__img { inset: -25% 0; height: 150%; will-change: transform; }
	@supports (animation-timeline: view()) {
		.dg-numeri { view-timeline: --dg-numeri block; }
		.dg-numeri .dg-numeri__img { animation: dg-parallasse linear both; animation-timeline: --dg-numeri; animation-range: cover; }
	}
}
@keyframes dg-parallasse { from { transform: translateY(-16%); } to { transform: translateY(16%); } }
.dg-numeri::after {
	content: "";
	position: absolute; inset: auto 0 0; z-index: -1;
	height: 45%;
	background: linear-gradient(to bottom, rgba(var(--dg-black-rgb), 0), var(--dg-black));
}
/* La scritta riempie la larghezza: le dimensioni sono quelle del viewBox dell'SVG. */
.dg-numeri__parola {
	position: absolute;
	top: .5%; left: 0;
	width: 100%;
	height: auto;
	fill: var(--dg-neutral-100);
	font-family: var(--dg-font-heading);
	font-weight: var(--dg-fw-semibold);
}
.dg-numeri__wrap { padding-block: var(--dg-ss-md) var(--dg-ss-xs); }
.dg-numeri__elenco {
	display: grid;
	gap: var(--dg-space-5) var(--dg-space-3);
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 992px) { .dg-numeri__elenco { grid-template-columns: repeat(4, 1fr); } }
.dg-numeri__voce {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 6.875rem;
	padding-left: var(--dg-space-4);
	border-left: var(--dg-border-width) solid rgba(var(--dg-neutral-100-rgb), .5);
}
.dg-numeri__valore { margin: 0 0 var(--dg-space-2); font-size: var(--dg-h3); line-height: 1.2; }
.dg-numeri__etichetta { color: var(--dg-neutral-100); }

/* ---------- Azienda ---------- */
.dg-azienda { padding-block: var(--dg-ss-md) var(--dg-ss-xl); }
.dg-azienda__titolo { max-width: 11.7em; }
@media (min-width: 992px) { .dg-azienda__destra { padding-top: var(--dg-space-6); } }
.dg-azienda__testo { font-weight: var(--dg-fw-medium); letter-spacing: -.02em; }
@media (min-width: 768px) { .dg-azienda__testo { columns: 2; column-gap: var(--dg-space-5); } }
.dg-azienda__testo p { margin-bottom: 0; }
.dg-azienda__pulsanti { display: flex; flex-wrap: wrap; gap: var(--dg-space-2); margin-top: var(--dg-space-5); }

/* ---------- Recensioni ---------- */
.dg-recensioni { padding-block: var(--dg-ss-lg) var(--dg-ss-xl); background: var(--dg-neutral-200); }
.dg-recensioni__testata { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--dg-ss-lg); }
.dg-recensioni__titolo { max-width: 13em; }
.dg-recensioni__corpo { position: relative; }

/* Swiper largo quanto lo schermo: il margine iniziale (allineato al contenitore del sito)
   lo calcola caroselli.js. Il bordo verticale lascia spazio al contorno del fuoco. */
.dg-recensioni__swiper { padding-block: var(--dg-space-2); }
.dg-recensioni__binario { margin: 0; padding: 0; list-style: none; }
.dg-recensioni__swiper .dg-recensione { width: min(85%, 32.125rem); height: auto; }
.dg-recensione__figura {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 27.375rem;
	margin: 0;
	padding: var(--dg-space-5) var(--dg-space-4);
	background: var(--dg-neutral-100);
	border-radius: var(--dg-radius-lg);
}
@media (min-width: 768px) { .dg-recensione__figura { padding: var(--dg-space-5) 2.5rem; } }
.dg-recensione__testata { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--dg-space-6); }
.dg-recensione__voto { display: flex; margin: 0; }
.dg-recensione__stella { width: 1.25rem; height: 1.25rem; color: var(--dg-neutral-400); }
/* Giallo delle stelle di Google: colore unico, nessun token. */
.dg-recensione__stella.is-piena { color: #f6bb06; fill: currentColor; stroke: none; }
.dg-recensione__fonte { display: block; width: 1.5rem; height: 1.5rem; }
.dg-recensione__testo { flex: 1; margin: 0; font-size: var(--dg-fs-lg); letter-spacing: -.02em; }
.dg-recensione__testo p { margin: 0; }
.dg-recensione__nome { margin-top: var(--dg-space-4); color: inherit; font-size: var(--dg-h6); font-weight: var(--dg-fw-medium); letter-spacing: -.02em; }

.dg-recensioni__comando {
	position: absolute;
	top: 50%; z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem; height: 3.75rem;
	padding: 0;
	color: var(--dg-primary-500);
	background: var(--dg-white);
	border: 0;
	border-radius: var(--dg-radius-circle);
	box-shadow: var(--dg-shadow-lg);
	transform: translateY(-50%);
	cursor: pointer;
}
/* Swiper spegne la freccia al bordo (disabledClass) o tutte e due se non serve scorrere. */
.dg-recensioni__comando.is-spento, .dg-recensioni__comando.swiper-button-lock { display: none; }
/* Su telefono si scorre con il dito: niente frecce. */
@media (max-width: 767.98px) { .dg-recensioni__comando { display: none; } }
.dg-recensioni__comando .dg-icona { width: 1.75rem; height: 1.75rem; }
.dg-recensioni__comando--prec { left: var(--dg-space-3); }
.dg-recensioni__comando--succ { right: var(--dg-space-3); }

/* ---------- News ---------- */
.dg-news { padding-block: var(--dg-ss-lg) var(--dg-ss-xl); }
.dg-news__testata { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--dg-ss-lg); }
.dg-news__titolo { max-width: 11.2em; }
.dg-news__griglia { display: grid; gap: var(--dg-space-6) var(--dg-space-3); grid-template-columns: 1fr; }
@media (min-width: 768px) {
	.dg-news__griglia { grid-template-columns: repeat(3, 1fr); }
	.dg-news__intro { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
	.dg-news__griglia { grid-template-columns: repeat(4, 1fr); }
	.dg-news__intro { grid-column: auto; }
}
.dg-news__intro { padding-top: var(--dg-space-4); border-top: var(--dg-border-width) solid rgba(var(--dg-primary-500-rgb), .3); }
.dg-news__intro p { max-width: 28em; margin: 0 0 var(--dg-space-5); }

.dg-articolo { position: relative; display: flex; flex-direction: column; gap: var(--dg-space-3); }
.dg-articolo__img { display: block; width: 100%; height: auto; aspect-ratio: 515 / 414; margin-bottom: var(--dg-space-2); object-fit: cover; }
@media (max-width: 767.98px) {
	.dg-articolo { gap: var(--dg-space-2); }
	.dg-articolo__img { margin-bottom: 0; }
}
.dg-articolo__titolo { margin: 0; font-size: var(--dg-h5); font-weight: var(--dg-fw-normal); line-height: 1.3; }
.dg-articolo__link { color: inherit; text-decoration: none; }
.dg-articolo__link:hover { color: inherit; text-decoration: underline; }
.dg-articolo__link::after { content: ""; position: absolute; inset: 0; }
.dg-articolo:focus-within { outline: var(--dg-focus-ring-width) solid var(--dg-focus-ring-color); outline-offset: var(--dg-focus-ring-offset); }
.dg-articolo__link:focus-visible { outline: none; }
.dg-articolo__leggi { display: inline-flex; align-items: center; gap: var(--dg-space-2); margin: 0; font-weight: var(--dg-fw-medium); }
.dg-articolo__leggi .dg-icona { width: 1.125rem; height: 1.125rem; stroke-width: 2; }

/* ---------- Marchi ---------- */
/* Fila di loghi ferma (senza script o con "riduci movimento"); con nastro.js diventa un
   nastro a tutta larghezza che scorre (.is-animato). I loghi hanno fondo bianco:
   "multiply" lo fonde con lo sfondo della sezione. */
.dg-marchi { padding-block: var(--dg-ss-md); overflow: hidden; background: var(--dg-neutral-200); }
.dg-marchi__elenco {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--dg-space-5);
	max-width: var(--dg-container-max);
	margin: 0 auto;
	padding: 0 var(--dg-space-3);
	list-style: none;
}
.dg-marchi__voce { flex: 0 0 auto; display: flex; align-items: center; height: 6rem; }
/* Tutti i loghi alla stessa altezza, larghezza libera con un tetto: cosi' un logo largo
   (Finstral) e uno quasi quadrato (Erreci) hanno lo stesso peso. */
.dg-marchi { --dg-marchi-alto: 2.5rem; --dg-marchi-largo: 9rem; --dg-marchi-fondo: var(--dg-neutral-200); }
@media (min-width: 992px) {
	.dg-marchi { --dg-marchi-alto: 3.5rem; --dg-marchi-largo: 12rem; }
	.dg-marchi__voce { height: 8rem; }
}
.dg-marchi__logo { display: block; width: auto; height: var(--dg-marchi-alto); max-width: var(--dg-marchi-largo); object-fit: contain; mix-blend-mode: multiply; }
/* Le immagini con il fondo bianco si fondono con il beige (multiply). Il nastro animato
   e' un gruppo a se' (transform): ha lo stesso fondo della sezione, cosi' la fusione
   avviene anche li'. */
.dg-marchi__elenco { background: var(--dg-neutral-200); }
/* Logo SVG (codice incollato): il riquadro e' lo span, il disegno lo riempie mantenendo le
   proporzioni del viewBox. Il nome e' sullo span (role="img"). */
.dg-marchi__logo--svg { display: flex; color: var(--dg-neutral-600); mix-blend-mode: normal; }
/* Loghi in immagine (senza SVG): grigi e fusi con il fondo, vicini alla tinta degli SVG. */
img.dg-marchi__logo { filter: grayscale(1) contrast(1.15); opacity: .8; }
.dg-marchi__logo--svg svg { display: block; width: auto; height: 100%; max-width: 100%; }

/* Nastro: una fila sola, senza spazi tra le voci (lo spazio e' dentro ogni voce, cosi' le
   serie ripetute sono identiche e il giro non salta). */
.dg-marchi__nastro.is-animato .dg-marchi__elenco {
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	width: max-content;
	max-width: none;
	padding: 0;
	will-change: transform;
}
.dg-marchi__nastro.is-animato .dg-marchi__voce { padding-right: var(--dg-space-6); }
@media (min-width: 992px) { .dg-marchi__nastro.is-animato .dg-marchi__voce { padding-right: var(--dg-space-7); } }

/* ---------- Invito al contatto ---------- */
.dg-invito { padding-block: var(--dg-ss-lg); color: var(--dg-neutral-100); background: var(--dg-primary-500); }
.dg-invito__titolo { max-width: 13.7em; margin: 0; font-size: var(--dg-h3); line-height: 1.16; }
.dg-invito__destra { display: flex; flex-direction: column; align-items: flex-start; }
.dg-invito__destra .dg-testo-lead { font-weight: var(--dg-fw-normal); }
@media (min-width: 992px) { .dg-invito__destra .dg-pulsante { align-self: flex-end; } }

/* ---------- Pagina Prodotti (archive-prodotto.php): testata tipografica ---------- */
/* Dal mockup "Prodotti": titolo grande e frase a sinistra, testo e pulsante a destra
   allineati in basso con la frase; sotto, le card delle categorie della home. */
.dg-elenco { padding-block: var(--dg-ss-md) var(--dg-ss-xl); }
.dg-elenco__testata { display: grid; gap: var(--dg-space-5); margin-bottom: var(--dg-ss-lg); }
@media (min-width: 992px) {
	.dg-elenco__testata { grid-template-columns: minmax(0, 2.7fr) minmax(0, 1fr); column-gap: var(--dg-ss-md); row-gap: var(--dg-space-6); }
	.dg-elenco__titolo { grid-column: 1; }
	.dg-elenco__frase { grid-column: 1; }
	.dg-elenco__lato { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}
.dg-elenco__titolo { max-width: 12em; margin: 0; font-weight: var(--dg-fw-normal); line-height: 1.1; letter-spacing: -.02em; }
/* Scala fissa per fasce, come la hero della home ma piu' piccola: il titolo e' lungo. */
.dg-elenco__titolo { font-size: 2.75rem; }
@media (min-width: 576px) { .dg-elenco__titolo { font-size: 3.25rem; } }
@media (min-width: 768px) { .dg-elenco__titolo { font-size: 4rem; } }
@media (min-width: 992px) { .dg-elenco__titolo { font-size: 4.5rem; } }
@media (min-width: 1200px) { .dg-elenco__titolo { font-size: 5.25rem; } }
@media (min-width: 1400px) { .dg-elenco__titolo { font-size: 6rem; } }
.dg-elenco__frase { max-width: 19em; margin: 0; font-size: var(--dg-h4); line-height: 1.25; }
.dg-elenco__testo { max-width: 30em; margin: 0 0 var(--dg-space-5); }
/* Testata essenziale (News, Contatti): titolo breve e molto grande, solo il testo a destra. */
.dg-elenco--grande { padding-bottom: var(--dg-ss-lg); }
.dg-elenco--grande .dg-elenco__testata { margin-bottom: 0; }
.dg-elenco--grande .dg-elenco__titolo { max-width: none; font-size: 3.75rem; line-height: 1; }
@media (min-width: 576px) { .dg-elenco--grande .dg-elenco__titolo { font-size: 4.75rem; } }
@media (min-width: 768px) { .dg-elenco--grande .dg-elenco__titolo { font-size: 6rem; } }
@media (min-width: 992px) {
	.dg-elenco--grande .dg-elenco__titolo { font-size: 7rem; }
	.dg-elenco--grande .dg-elenco__lato { grid-row: 1; }
}
@media (min-width: 1200px) { .dg-elenco--grande .dg-elenco__titolo { font-size: 8.5rem; } }
@media (min-width: 1400px) { .dg-elenco--grande .dg-elenco__titolo { font-size: 10rem; } }
.dg-elenco--grande .dg-elenco__testo { margin-bottom: 0; }
/* Percorso sopra il titolo nelle pagine di dettaglio (dg_percorso()). */
.dg-briciole { display: flex; flex-wrap: wrap; gap: var(--dg-space-2); margin: 0 0 var(--dg-space-5); padding: 0; font-size: var(--dg-fs-sm); list-style: none; }
.dg-briciole li + li::before { content: "/"; margin-right: var(--dg-space-2); color: var(--dg-neutral-500); }
.dg-briciole a { color: inherit; }
/* Sotto 992 px le tre parti non hanno lo stesso stacco: titolo e frase stanno insieme,
   il testo con il pulsante si stacca di piu', il pulsante resta vicino al suo testo. */
@media (max-width: 991.98px) {
	.dg-elenco__testata { gap: 0; }
	.dg-elenco__frase { margin-top: var(--dg-space-4); }
	.dg-elenco__lato { margin-top: var(--dg-space-5); }
	.dg-elenco__testo { margin-bottom: var(--dg-space-4); }
}

/* ---------- Montanti: colonne divise da filetti (prodotti: vantaggi e percorso; Certificazioni) ---------- */
.dg-montanti { display: grid; gap: var(--dg-space-5) 0; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .dg-montanti { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .dg-montanti { grid-template-columns: repeat(4, 1fr); } }
.dg-montanti > li { padding: var(--dg-space-2) var(--dg-space-4); border-left: var(--dg-border-width) solid currentColor; }
.dg-montanti h3 { margin: 0 0 var(--dg-space-2); font-size: var(--dg-h5); }
.dg-montanti p { max-width: 24em; margin: 0; }
/* Su fondo verde i filetti si schiariscono. */
.dg-montanti--chiaro > li { border-color: rgba(var(--dg-neutral-100-rgb), .35); }
.dg-montanti--chiaro p { opacity: .9; }

/* ---------- Agevolazioni: tessera azzurra, testo e pulsante (pagine prodotto, Servizi) ---------- */
.dg-agevolazioni { padding-bottom: 0; }
.dg-agevolazioni__tessera {
	display: grid;
	gap: var(--dg-space-5);
	align-items: center;
	padding: var(--dg-space-5) var(--dg-space-4);
	color: var(--dg-primary-900);
	background: var(--dg-secondary-100);
	border-radius: var(--dg-radius-2xl);
}
@media (min-width: 768px) { .dg-agevolazioni__tessera { padding-block: var(--dg-space-6); } }
@media (min-width: 992px) { .dg-agevolazioni__tessera { grid-template-columns: 1fr auto; gap: var(--dg-ss-md); padding-inline: var(--dg-space-5); } }
/* Il pulsante resta largo quanto il testo, con la freccia appoggiata a destra. */
.dg-agevolazioni__tessera .dg-pulsante { justify-self: start; }
.dg-agevolazioni h2 { margin: 0 0 var(--dg-space-3); font-size: var(--dg-h3); }
.dg-agevolazioni__testo { max-width: 40em; margin: 0; }