/* ==========================================================================
   SOLUZIONI DIRETTE — Stili principali

   Indice
   01. Base e reset
   02. Tipografia
   03. Accessibilità
   04. Layout e contenitori
   05. Sezioni
   06. Bottoni
   07. Header e navigazione
   08. Hero
   09. Card e griglie
   10. Chip, badge, occhielli
   11. Flusso di energia (firma visiva)
   12. Elenchi con check
   13. Passi numerati
   14. Numeri e prove
   15. Bivio Energia / Digitale
   16. Portfolio
   17. FAQ
   18. Footer
   19. WhatsApp flottante
   20. Utilità
   ========================================================================== */


/* 01. Base e reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--sd-superficie);
	color: var(--sd-inchiostro);
	font-family: var(--sd-font);
	font-size: var(--sd-testo-base);
	font-weight: var(--sd-peso-normale);
	line-height: var(--sd-interlinea-larga);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
 * Nota: qui c'era una regola `img[width][height] { height: auto }` pensata per
 * preservare le proporzioni. Era ridondante (la regola sopra fa già lo stesso)
 * e dannosa: essendo un selettore di attributo, batteva per specificità
 * qualsiasi altezza impostata via classe. Il logo, che ha gli attributi
 * width/height per evitare i salti di layout, veniva disegnato a 625px e
 * sfondava la pagina in orizzontale su telefono.
 */

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;

	/* Sotto i 16px iOS ingrandisce la pagina appena si tocca un campo, e
	   l'utente si ritrova il form fuori schermo. Con i form come unico
	   canale di lead, è un dettaglio che costa contatti. */
	font-size: max(1rem, var(--sd-testo-base));
}

/* Il lampo grigio di Android al tocco sporca i colori del brand */
a,
button {
	-webkit-tap-highlight-color: rgba(2, 27, 58, 0.12);
}

hr {
	border: 0;
	border-top: 1px solid var(--sd-bordo);
	margin: var(--sd-s7) 0;
}


/* 02. Tipografia
   ========================================================================== */

/* Scala dei pesi, non tutto black: la gerarchia si legge anche dal peso.
   900 solo per l'hero, poi 800 → 700 → 600 scendendo di importanza. */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sd-s4);
	line-height: var(--sd-interlinea-stretta);
	letter-spacing: var(--sd-tracking-titolo);
	text-wrap: balance;
}

h1 { font-size: var(--sd-titolo-xl); font-weight: var(--sd-peso-black); }
h2 { font-size: var(--sd-titolo-lg); font-weight: var(--sd-peso-extra); }
h3 { font-size: var(--sd-titolo-md); font-weight: var(--sd-peso-bold); }
h4 { font-size: var(--sd-titolo-sm); font-weight: var(--sd-peso-bold); letter-spacing: -0.015em; }
h5, h6 { font-size: var(--sd-testo-lg); font-weight: var(--sd-peso-semi); letter-spacing: 0; }

p {
	margin: 0 0 var(--sd-s5);
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--sd-fucsia);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--sd-transizione);
}

a:hover {
	color: var(--sd-navy);
}

strong, b {
	font-weight: var(--sd-peso-semi);
}

small {
	font-size: var(--sd-testo-sm);
}

/* Paragrafo introduttivo sotto un titolo di sezione */
.sd-guida {
	font-size: var(--sd-testo-xl);
	line-height: var(--sd-interlinea-media);
	color: var(--sd-inchiostro-tenue);
	max-width: 46ch;
}

/* Evidenziazioni inline. Una sola per titolo, mai due sulla stessa parola.
   Il lime come COLORE DI TESTO è sicuro solo su fondo scuro: su bianco fa
   1.73:1 e diventa illeggibile. Il default è quindi la versione sicura —
   testo che resta scuro, con una barra lime sotto la parola — e sono i
   contesti scuri a riattivare il lime pieno. Fare il contrario significa
   dimenticarselo la prima volta che si aggiunge una sezione chiara. */
.sd-lime {
	color: inherit;
	box-shadow: inset 0 -0.3em 0 rgba(156, 203, 29, 0.45);

	/* Senza questo, se l'evidenziazione va a capo la barra lime viene
	   disegnata una sola volta a cavallo delle due righe e si vede storta. */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.sd-fucsia { color: var(--sd-fucsia); }

:is(.sd-sezione--navy, .sd-header, .sd-footer, .sd-card--navy,
    .sd-strada--energia, .sd-segnaposto, .sd-numeri) .sd-lime {
	color: var(--sd-lime);
	box-shadow: none;
}


/* 03. Accessibilità
   ========================================================================== */

.sd-skip {
	position: absolute;
	left: var(--sd-s4);
	top: var(--sd-s4);
	z-index: 999;
	padding: var(--sd-s3) var(--sd-s5);
	background: var(--sd-fucsia);
	color: var(--sd-white);
	font-weight: var(--sd-peso-semi);
	border-radius: var(--sd-raggio-sm);
	transform: translateY(-200%);
	transition: transform var(--sd-transizione);
}

.sd-skip:focus {
	transform: translateY(0);
	color: var(--sd-white);
}

/* Focus visibile ovunque: obbligatorio per chi naviga da tastiera */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--sd-focus);
	outline-offset: 3px;
	border-radius: var(--sd-raggio-sm);
}

/* Su fondo navy il fucsia non stacca abbastanza: l'anello passa al lime */
.sd-sezione--navy :where(a, button, input, select, textarea, summary):focus-visible,
.sd-header :where(a, button):focus-visible,
.sd-footer :where(a, button):focus-visible {
	outline-color: var(--sd-lime);
}

/* .screen-reader-text è la classe standard di WordPress e dei plugin (es.
   Complianz) per le etichette pensate solo per i lettori di schermo. Il tema
   usa .sd-sr-only per il proprio markup, ma deve nascondere anche quella
   standard, altrimenti quelle etichette (es. "Consent to service ...") si
   vedono nel testo — come nella Cookie Policy. */
.sd-sr-only,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* 04. Layout e contenitori
   ========================================================================== */

.sd-wrap {
	width: 100%;
	max-width: var(--sd-larghezza);
	margin-inline: auto;
	padding-inline: var(--sd-margine);
}

.sd-wrap--largo   { max-width: var(--sd-larghezza-larga); }
.sd-wrap--stretto { max-width: var(--sd-larghezza-stretta); }

.sd-griglia {
	display: grid;
	gap: var(--sd-s6);
}

.sd-griglia--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.sd-griglia--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.sd-griglia--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Due colonne asimmetriche: testo + visuale */
.sd-split {
	display: grid;
	gap: clamp(var(--sd-s6), 5vw, var(--sd-s10));
	align-items: center;
}

@media (min-width: 62rem) {
	.sd-split {
		grid-template-columns: 1fr 1fr;
	}

	.sd-split--testo-largo { grid-template-columns: 1.15fr 0.85fr; }

	/* La Contatti ha la foto (colonna destra) più alta delle card a sinistra:
	   con l'allineamento centrato di default le card scendevano, lasciando un
	   vuoto sotto l'intro. Qui le ancoriamo in alto, così card e foto partono
	   entrambe subito sotto l'intestazione. Solo desktop: il mobile è impilato. */
	.sd-split--visual-largo {
		grid-template-columns: 0.85fr 1.15fr;
		align-items: start;
	}

	/* Inverte l'ordine visivo senza toccare l'ordine nel DOM,
	   così chi usa uno screen reader sente comunque prima il testo */
	.sd-split--invertita > :first-child { order: 2; }
}


/* 05. Sezioni
   ========================================================================== */

.sd-sezione {
	position: relative;
	padding-block: var(--sd-sezione);
}

.sd-sezione--chiara { background: var(--sd-superficie); }
.sd-sezione--alt    { background: var(--sd-superficie-alt); }

.sd-sezione--navy {
	background: var(--sd-navy);
	color: var(--sd-grigio);
}

.sd-sezione--navy :where(h1, h2, h3, h4, h5, h6) {
	color: var(--sd-white);
}

.sd-sezione--navy .sd-guida {
	color: var(--sd-grigio);
}

.sd-sezione--navy a:not(.sd-btn) {
	color: var(--sd-lime);
}

.sd-sezione--navy a:not(.sd-btn):hover {
	color: var(--sd-white);
}

.sd-sezione--stretta { padding-block: clamp(2.5rem, 4vw, 4rem); }

/* Intestazione di sezione */
.sd-intestazione {
	max-width: 52ch;
	margin-bottom: var(--sd-s8);
}

.sd-intestazione--centrata {
	margin-inline: auto;
	text-align: center;
}


/* 06. Bottoni
   ========================================================================== */

.sd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sd-s3);
	padding: 0.95rem 1.75rem;
	border: 2px solid transparent;
	border-radius: var(--sd-raggio-pill);
	font-size: var(--sd-testo-base);
	font-weight: var(--sd-peso-extra);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--sd-transizione), color var(--sd-transizione),
	            border-color var(--sd-transizione), transform var(--sd-transizione),
	            box-shadow var(--sd-transizione);

	/* Nessun bottone sotto i 44px: è la soglia minima per il tocco su mobile */
	min-height: 3rem;
}

.sd-btn:hover {
	transform: translateY(-2px);
}

.sd-btn:active {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.sd-btn:hover { transform: none; }
}

/* Primario: l'azione. Fucsia, e basta uno per schermata. */
.sd-btn--primario {
	background: var(--sd-fucsia);
	color: var(--sd-white);
	box-shadow: var(--sd-ombra-cta);
}

.sd-btn--primario:hover {
	background: #b8175a;
	color: var(--sd-white);
	box-shadow: 0 10px 26px rgba(214, 28, 106, 0.4);
}

/* Secondario su fondo chiaro */
.sd-btn--secondario {
	background: transparent;
	border-color: var(--sd-navy);
	color: var(--sd-navy);
}

.sd-btn--secondario:hover {
	background: var(--sd-navy);
	color: var(--sd-white);
}

/* Secondario su fondo navy */
.sd-sezione--navy .sd-btn--secondario,
.sd-footer .sd-btn--secondario {
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--sd-white);
}

.sd-sezione--navy .sd-btn--secondario:hover,
.sd-footer .sd-btn--secondario:hover {
	background: var(--sd-white);
	border-color: var(--sd-white);
	color: var(--sd-navy);
}

/* Lime: azione positiva, gratuita, senza impegno */
.sd-btn--lime {
	background: var(--sd-lime);
	color: var(--sd-navy);
}

.sd-btn--lime:hover {
	background: #b0e024;
	color: var(--sd-navy);
}

.sd-btn--whatsapp {
	background: #25D366;
	color: #06331a;
}

.sd-btn--whatsapp:hover {
	background: #1eb455;
	color: #06331a;
}

.sd-btn--largo { width: 100%; }
.sd-btn--piccolo { padding: 0.6rem 1.2rem; font-size: var(--sd-testo-sm); min-height: 2.5rem; }

/* Telefono in evidenza: non è un bottone, è un numero che si deve leggere */
.sd-telefono {
	display: inline-flex;
	align-items: center;
	gap: var(--sd-s3);
	font-size: var(--sd-testo-lg);
	font-weight: var(--sd-peso-extra);
	color: var(--sd-navy);
	text-decoration: none;
	white-space: nowrap;
}

.sd-telefono:hover { color: var(--sd-fucsia); }

.sd-telefono__icona {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--sd-fucsia);
	color: var(--sd-white);
	flex-shrink: 0;
}

.sd-sezione--navy .sd-telefono,
.sd-footer .sd-telefono { color: var(--sd-white); }

.sd-sezione--navy .sd-telefono:hover,
.sd-footer .sd-telefono:hover { color: var(--sd-lime); }

/* Gruppo di azioni.
   Su telefono i pulsanti occupano tutta la riga: un bersaglio pieno si
   colpisce senza guardare, due mezzi bersagli affiancati no. */
.sd-azioni {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--sd-s4);
	margin-top: var(--sd-s6);
}

.sd-azioni .sd-telefono {
	justify-content: center;
}

@media (min-width: 34rem) {
	.sd-azioni {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--sd-s4) var(--sd-s5);
	}

	.sd-azioni .sd-telefono { justify-content: flex-start; }
}


/* 07. Header e navigazione
   ========================================================================== */

/* Altezza della testata: contenuta su telefono, dove ogni pixel verticale
   sottratto al contenuto è contenuto che l'utente non legge. */
:root { --sd-header-h: 4.25rem; }

@media (min-width: 62rem) {
	:root { --sd-header-h: 4.75rem; }
}

/* La testata scorre con la pagina: non resta incollata in alto a rubare
   spazio verticale, che su telefono è la risorsa più scarsa.
   `relative` serve comunque, perché la tendina del menu si posiziona su di lei. */
.sd-header {
	position: relative;
	z-index: var(--sd-z-header);
	background: var(--sd-navy);
	color: var(--sd-white);
}

.sd-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-s4);
	min-height: var(--sd-header-h);
}

.sd-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--sd-s3);
	color: var(--sd-white);
	text-decoration: none;
	line-height: 1;
	flex-shrink: 0;

	/* Il logo è anche il link alla home: deve rispettare l'area di tocco */
	min-height: 2.75rem;
}

/* Il marchio per esteso a ogni dimensione: il pittogramma da solo non dice
   chi sei a chi arriva per la prima volta. Cambia solo la scala. */
.sd-logo__completo {
	display: block;
	height: 2.375rem;
	width: auto;
	/* Difesa: per quanto lo si ingrandisca dal Personalizza, non sfora mai
	   la larghezza disponibile accanto al bottone menu su telefono. */
	max-width: 58vw;
	object-fit: contain;
	object-position: left center;
}

@media (min-width: 30rem) {
	.sd-logo__completo { height: 2.75rem; }
}

@media (min-width: 62rem) {
	.sd-logo__completo { height: 3.125rem; }
}

/* Logo caricato dall'admin dal Personalizza */
.sd-logo__immagine {
	max-height: 2.875rem;
	width: auto;
}

/* Navigazione — mobile-first.
   Di base è una tendina compatta che scende da sotto l'header: si apre
   sopra il contenuto senza coprirlo tutto, alta quanto le voci che contiene.
   Solo da 62rem in su diventa la barra orizzontale. */

.sd-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--sd-z-menu);
	background: var(--sd-navy);
	padding: var(--sd-s2) var(--sd-margine) var(--sd-s4);
	box-shadow: 0 16px 32px rgba(2, 27, 58, 0.35);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	max-height: calc(100dvh - var(--sd-header-h) - 1rem);
	overflow-y: auto;
	overscroll-behavior: contain;

	/* Chiusa: scivolata su di poco e trasparente, non un pannello che invade */
	transform: translateY(-0.75rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--sd-transizione), transform var(--sd-transizione),
	            visibility var(--sd-transizione);
}

.sd-nav[data-aperto="true"] {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

.sd-nav__lista {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sd-nav__lista li + li {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sd-nav__lista a {
	display: flex;
	align-items: center;
	padding: var(--sd-s3) var(--sd-s2);
	color: var(--sd-white);
	font-size: var(--sd-testo-base);
	font-weight: var(--sd-peso-semi);
	text-decoration: none;
	min-height: 2.75rem;  /* tocco comodo, senza esagerare */
}

.sd-nav__extra {
	margin-top: var(--sd-s4);
	padding-top: var(--sd-s4);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: grid;
	gap: var(--sd-s3);
}

/* La tendina è leggera: la pagina sotto resta dov'è e non serve bloccarla.
   (Nessun blocco dello scroll: era invasivo.) */

@media (min-width: 62rem) {
	.sd-nav {
		position: static;
		inset: auto;
		background: transparent;
		padding: 0;
		overflow: visible;
		transform: none;
		visibility: visible;
		opacity: 1;
		max-height: none;
		box-shadow: none;
		border-top: 0;
	}

	.sd-nav__lista {
		flex-direction: row;
		align-items: center;
		gap: var(--sd-s6);
	}

	/* Su desktop niente separatori: erano per la tendina mobile. Il reset deve
	   colpire lo stesso selettore `li + li` (più specifico di `li`), altrimenti
	   il bordo superiore resta come lineetta chiara sopra ogni voce. */
	.sd-nav__lista li,
	.sd-nav__lista li + li {
		border-top: 0;
		border-bottom: 0;
	}

	.sd-nav__lista a {
		display: block;
		position: relative; /* àncora la linea ::after sotto la voce */
		padding: var(--sd-s2) 0;
		font-size: var(--sd-testo-sm);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		min-height: 0;
	}

	/* La sottolineatura lime è "la corrente che passa": stesso linguaggio
	   del flusso di energia, applicato alla voce attiva. */
	.sd-nav__lista a::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: -2px;
		height: 2px;
		background: var(--sd-lime);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--sd-transizione);
	}

	/* La linea lime segna SOLO la pagina che stai guardando, non l'hover:
	   è un indicatore di posizione, non un effetto al passaggio del mouse.
	   Elenco tutte le classi che WordPress assegna alla voce corrente. */
	.sd-nav__lista .current-menu-item > a::after,
	.sd-nav__lista .current_page_item > a::after,
	.sd-nav__lista .current-menu-parent > a::after,
	.sd-nav__lista .current_page_parent > a::after,
	.sd-nav__lista .current-menu-ancestor > a::after,
	.sd-nav__lista .current_page_ancestor > a::after {
		transform: scaleX(1);
	}

	/* All'hover, un accenno soft solo se NON è la pagina corrente */
	.sd-nav__lista a:hover {
		color: var(--sd-lime);
	}

	/* Focus da tastiera: niente rettangolo attorno alla voce, ma la stessa
	   linea lime sotto. Resta accessibile (indicatore visibile) senza il box. */
	.sd-nav__lista a:focus-visible {
		outline: none;
	}

	.sd-nav__lista a:focus-visible::after {
		transform: scaleX(1);
	}

	.sd-nav__extra {
		display: none;
	}
}

.sd-header__azioni {
	display: flex;
	align-items: center;
	gap: var(--sd-s4);
}

/* Bottone menu: sola icona, senza riquadro e senza etichetta a schermo.
   Il riquadro con la scritta "Menu" pesava quanto il logo e se lo mangiava;
   il simbolo delle tre righe è universalmente riconosciuto. Il nome resta
   per chi usa uno screen reader. */
.sd-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--sd-raggio-sm);
	color: var(--sd-white);
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--sd-transizione);
}

.sd-menu-toggle:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* L'etichetta serve alla tecnologia assistiva, non agli occhi */
.sd-menu-toggle__etichetta {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.sd-menu-toggle__barre,
.sd-menu-toggle__barre::before,
.sd-menu-toggle__barre::after {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--sd-transizione), opacity var(--sd-transizione),
	            background var(--sd-transizione);
}

.sd-menu-toggle__barre {
	position: relative;
}

.sd-menu-toggle__barre::before,
.sd-menu-toggle__barre::after {
	content: '';
	position: absolute;
	left: 0;
}

.sd-menu-toggle__barre::before { top: -7px; }
.sd-menu-toggle__barre::after  { top: 7px; }

/* Aperto: le tre righe diventano una croce */
.sd-menu-toggle[aria-expanded="true"] .sd-menu-toggle__barre {
	background: transparent;
}

.sd-menu-toggle[aria-expanded="true"] .sd-menu-toggle__barre::before {
	transform: translateY(7px) rotate(45deg);
}

.sd-menu-toggle[aria-expanded="true"] .sd-menu-toggle__barre::after {
	transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 62rem) {
	.sd-menu-toggle { display: none; }
}


/* 08. Hero
   ========================================================================== */

.sd-hero {
	position: relative;
	overflow: hidden;
	background: var(--sd-superficie);
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

.sd-hero__griglia {
	display: grid;
	gap: clamp(var(--sd-s7), 5vw, var(--sd-s10));
	align-items: center;
}

@media (min-width: 62rem) {
	/* La headline è la tesi della pagina: le si dà la colonna più larga,
	   altrimenti a 54px va a capo male e lascia parole orfane.
	   align-items: start ancora il titolo in alto: così non "scende" quando
	   la colonna del form cresce (es. aprendo l'allega-bolletta). */
	.sd-hero__griglia {
		grid-template-columns: 1.2fr 0.8fr;
		align-items: start;
	}
}

.sd-hero__titolo {
	font-size: var(--sd-titolo-xl);
	margin-bottom: var(--sd-s5);
}

.sd-hero__testo {
	font-size: var(--sd-testo-xl);
	line-height: var(--sd-interlinea-media);
	color: var(--sd-inchiostro-tenue);
	max-width: 40ch;
}

/* Riga sotto la headline: richiama il flusso di corrente */
.sd-hero__filo {
	width: 100%;
	max-width: 26rem;
	height: 3px;
	margin: var(--sd-s6) 0;
	background: linear-gradient(90deg, var(--sd-fucsia) 0%, var(--sd-lime) 100%);
	border-radius: 2px;
}

/* Colonna visuale */
.sd-hero__visual {
	position: relative;
}

/* Su telefono la visuale è più bassa: un 4:5 riempirebbe lo schermo e
   spingerebbe fuori il contenuto. Il verticale pieno torna da 62rem in su. */
.sd-hero__foto {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--sd-raggio-lg);
	box-shadow: var(--sd-ombra-lg);
}

@media (min-width: 62rem) {
	.sd-hero__foto { aspect-ratio: 4 / 5; }
}

/* Card della consulente sovrapposta alla foto */
.sd-consulente {
	position: absolute;
	left: clamp(-1rem, -2vw, 0rem);
	bottom: clamp(1rem, 4vw, 2.5rem);
	display: flex;
	align-items: center;
	gap: var(--sd-s4);
	padding: var(--sd-s4) var(--sd-s5);
	background: var(--sd-white);
	border-radius: var(--sd-raggio);
	box-shadow: var(--sd-ombra-lg);
	max-width: 17rem;
}

.sd-consulente__foto {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid var(--sd-lime);
}

/* Ripiego con le iniziali, finché non c'è la foto vera */
.sd-consulente__foto--sigla {
	display: grid;
	place-items: center;
	background: var(--sd-navy);
	color: var(--sd-lime);
	font-weight: var(--sd-peso-black);
	font-size: var(--sd-testo-base);
	letter-spacing: 0.02em;
}

/* Devono stare su righe separate a prescindere dalla larghezza del
   contenitore: da span inline si attaccavano appena la card si allargava. */
.sd-consulente__nome {
	display: block;
	font-weight: var(--sd-peso-extra);
	font-size: var(--sd-testo-base);
	line-height: 1.2;
	color: var(--sd-navy);
}

.sd-consulente__ruolo {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--sd-testo-sm);
	color: var(--sd-inchiostro-tenue);
	line-height: 1.35;
}

/* Segnaposto usato finché non arrivano le foto dello shooting.
   Non è stock: è grafica di brand, dichiaratamente tale. */
.sd-segnaposto {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: var(--sd-raggio-lg);
	background:
		radial-gradient(circle at 78% 18%, rgba(156, 203, 29, 0.18) 0%, transparent 42%),
		radial-gradient(circle at 12% 88%, rgba(214, 28, 106, 0.16) 0%, transparent 46%),
		var(--sd-navy);
	overflow: hidden;
	display: grid;
	place-items: center;
}

.sd-segnaposto__etichetta {
	position: relative;
	z-index: 1;
	max-width: 16rem;
	padding: var(--sd-s5);
	text-align: center;
	color: var(--sd-grigio);
	font-size: var(--sd-testo-sm);
	line-height: var(--sd-interlinea-media);
}

.sd-segnaposto--larga { aspect-ratio: 16 / 9; }
.sd-segnaposto--media { aspect-ratio: 3 / 2; }
.sd-segnaposto--ritratto { aspect-ratio: 3 / 4; }

@media (min-width: 62rem) {
	.sd-segnaposto { aspect-ratio: 4 / 5; }
	.sd-segnaposto--larga { aspect-ratio: 16 / 9; }
	.sd-segnaposto--media { aspect-ratio: 3 / 2; }
	.sd-segnaposto--ritratto { aspect-ratio: 3 / 4; }
}

/* Foto reale dello studio dentro la cornice del segnaposto: riempie il box,
   niente sfondo grafico né etichetta. Le foto sono scatti verticali, quindi
   object-position alto tiene in quadro il soggetto quando il box è più basso. */
.sd-segnaposto--foto {
	background: var(--sd-navy);
}

.sd-foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Il flusso di energia riempie il segnaposto invece di stare al centro */
.sd-flusso--sfondo {
	position: absolute;
	inset: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: none;
}


/* 09. Card e griglie
   ========================================================================== */

.sd-card {
	display: flex;
	flex-direction: column;
	gap: var(--sd-s4);
	padding: var(--sd-s6);
	background: var(--sd-superficie);
	border: 1px solid var(--sd-bordo);
	border-radius: var(--sd-raggio);
	transition: border-color var(--sd-transizione), box-shadow var(--sd-transizione),
	            transform var(--sd-transizione);
}

.sd-card__titolo {
	font-size: var(--sd-titolo-sm);
	font-weight: var(--sd-peso-bold);
	margin: 0;
	color: var(--sd-navy);
}

.sd-card__testo {
	margin: 0;
	color: var(--sd-inchiostro-tenue);
	font-size: var(--sd-testo-base);
}

/* Card cliccabile: tutta la card è il bersaglio, non solo il link */
.sd-card--link {
	position: relative;
	cursor: pointer;
}

.sd-card--link:hover {
	border-color: var(--sd-lime);
	box-shadow: var(--sd-ombra);
	transform: translateY(-3px);
}

.sd-card--link:focus-within {
	border-color: var(--sd-lime);
	box-shadow: var(--sd-ombra);
}

/* Il link copre la card ma resta un solo link nell'albero di accessibilità */
.sd-card__copertura::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.sd-card--link:hover { transform: none; }
}

.sd-card--navy {
	background: var(--sd-navy-panel);
	border-color: rgba(255, 255, 255, 0.1);
}

.sd-card--navy .sd-card__titolo { color: var(--sd-white); }
.sd-card--navy .sd-card__testo  { color: var(--sd-grigio); }

.sd-card--navy.sd-card--link:hover { border-color: var(--sd-lime); }

/* Icona in testa alla card */
.sd-card__icona {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--sd-raggio);
	background: rgba(156, 203, 29, 0.16);
	color: var(--sd-navy);
	flex-shrink: 0;
}

.sd-card--navy .sd-card__icona {
	background: rgba(156, 203, 29, 0.2);
	color: var(--sd-lime);
}

.sd-card__piede {
	margin-top: auto;
	padding-top: var(--sd-s3);
	font-weight: var(--sd-peso-extra);
	font-size: var(--sd-testo-sm);
	color: var(--sd-fucsia);
	display: inline-flex;
	align-items: center;
	gap: var(--sd-s2);
}

.sd-card--navy .sd-card__piede { color: var(--sd-lime); }


/* 10. Chip, badge, occhielli
   ========================================================================== */

/* Occhiello: la piccola etichetta maiuscola sopra i titoli di sezione */
.sd-occhiello {
	display: inline-flex;
	align-items: center;
	gap: var(--sd-s3);
	margin-bottom: var(--sd-s4);
	font-size: var(--sd-testo-sm);
	font-weight: var(--sd-peso-extra);
	text-transform: uppercase;
	letter-spacing: var(--sd-tracking-etichetta);
	color: var(--sd-fucsia);
}

.sd-occhiello::before {
	content: '';
	width: 1.75rem;
	height: 2px;
	background: currentColor;
	flex-shrink: 0;
}

/* Su fondo scuro il fucsia dell'occhiello ha poco contrasto (≈3.5, sotto la
   soglia AA): lo portiamo a lime (≈9.8, ben leggibile). Oltre alle sezioni
   navy standard, copre l'hero e le sezioni immersive della landing e la card
   Energia della home. */
.sd-sezione--navy .sd-occhiello,
.sd-lp-hero .sd-occhiello,
.sd-lp-immersiva .sd-occhiello,
.sd-strada--energia .sd-occhiello { color: var(--sd-lime); }

/* Chip: scorciatoie ai servizi, nell'hero */
.sd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sd-s3);
	list-style: none;
	margin: var(--sd-s6) 0 0;
	padding: 0;
}

.sd-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sd-s2);
	padding: 0.6rem 1.1rem;
	background: var(--sd-superficie);
	border: 1px solid var(--sd-bordo-forte);
	border-radius: var(--sd-raggio-pill);
	font-size: var(--sd-testo-sm);
	font-weight: var(--sd-peso-semi);
	color: var(--sd-navy);
	text-decoration: none;
	min-height: 2.75rem;
	transition: border-color var(--sd-transizione), background var(--sd-transizione),
	            color var(--sd-transizione);
}

.sd-chip:hover {
	background: var(--sd-navy);
	border-color: var(--sd-navy);
	color: var(--sd-white);
}

.sd-chip__punto {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--sd-lime);
	flex-shrink: 0;
}

/* Barra di prova sociale sotto le chip: recensioni Google reali, sede fisica,
   gratuità. Riempie la colonna sinistra e la avvicina all'altezza del form. */
.sd-prove {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sd-s3) var(--sd-s5);
	list-style: none;
	margin: var(--sd-s6) 0 0;
	padding: 0;
}

.sd-prova {
	display: inline-flex;
	align-items: center;
	gap: var(--sd-s2);
	font-size: var(--sd-testo-sm);
	font-weight: var(--sd-peso-semi);
	color: var(--sd-inchiostro-tenue);
	text-decoration: none;
}

.sd-prova svg {
	color: var(--sd-lime);
	flex-shrink: 0;
}

.sd-prova__stelle {
	color: #f5a623; /* oro delle stelle, come le recensioni Google */
	letter-spacing: 0.05em;
}

.sd-prova--google:hover .sd-prova__testo {
	text-decoration: underline;
}

.sd-prova__testo strong {
	color: var(--sd-navy);
	font-weight: var(--sd-peso-extra);
}

/* Badge di rassicurazione: "gratuita", "senza impegno" */
.sd-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sd-s2);
	padding: 0.4rem 0.9rem;
	border-radius: var(--sd-raggio-pill);
	background: rgba(156, 203, 29, 0.18);
	color: var(--sd-navy);
	font-size: var(--sd-testo-sm);
	font-weight: var(--sd-peso-extra);
	letter-spacing: 0.02em;

	/* Dentro un contenitore in colonna il badge si allargherebbe a tutta
	   riga e smetterebbe di leggersi come pastiglia. */
	align-self: flex-start;
	width: fit-content;
}

/*
 * Su fondo scuro il testo navy diventa illeggibile: il lime al 18% di
 * opacità sopra il navy dà un verde scurissimo, e navy su quello fa 1.42:1.
 * Vanno elencati TUTTI i contesti scuri, non solo .sd-sezione--navy:
 * dimenticarne uno significa un badge invisibile.
 */
:is(.sd-sezione--navy, .sd-strada--energia, .sd-card--navy, .sd-footer) .sd-badge {
	background: rgba(156, 203, 29, 0.16);
	color: var(--sd-lime);
}


/* 11. Flusso di energia — firma visiva
   ==========================================================================
   La corrente che collega le sezioni. Lime, sottile, mai invadente.
   Tre forme: il connettore verticale tra sezioni, la linea orizzontale
   che unisce i passi, e l'impulso che scorre lungo il tracciato.
   -------------------------------------------------------------------------- */

.sd-flusso {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	overflow: visible;
	z-index: 1;
}

/* Connettore verticale tra una sezione e la successiva */
.sd-flusso--connettore {
	bottom: calc(var(--sd-sezione) * -0.5);
	width: 2px;
	height: var(--sd-sezione);
	background: linear-gradient(180deg, var(--sd-lime) 0%, rgba(156, 203, 29, 0) 100%);
}

.sd-flusso__tracciato {
	fill: none;
	stroke: rgba(156, 203, 29, 0.28);
	stroke-width: 2;
}

/* L'impulso: un segmento corto che percorre il tracciato in loop */
.sd-flusso__impulso {
	fill: none;
	stroke: var(--sd-lime);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 26 900;
	animation: sd-scorrimento var(--sd-flusso-durata) linear infinite;
}

.sd-flusso__impulso--ritardo { animation-delay: calc(var(--sd-flusso-durata) / -2); }

@keyframes sd-scorrimento {
	from { stroke-dashoffset: 926; }
	to   { stroke-dashoffset: 0; }
}

/* Senza animazione l'impulso resta visibile come tratto fisso:
   la firma grafica non sparisce, smette solo di muoversi. */
@media (prefers-reduced-motion: reduce) {
	.sd-flusso__impulso {
		animation: none;
		stroke-dasharray: none;
		stroke: rgba(156, 203, 29, 0.55);
	}
}

/* Nodo: il punto in cui la corrente "arriva" */
.sd-nodo {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--sd-lime);
	color: var(--sd-navy);
	font-weight: var(--sd-peso-black);
	font-size: var(--sd-testo-sm);
	flex-shrink: 0;
	position: relative;
}

/* Alone pulsante attorno al nodo */
.sd-nodo::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--sd-lime);
	opacity: 0;
	animation: sd-alone var(--sd-flusso-durata) ease-out infinite;
}

@keyframes sd-alone {
	0%   { transform: scale(0.85); opacity: 0.7; }
	70%  { transform: scale(1.3);  opacity: 0; }
	100% { transform: scale(1.3);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sd-nodo::before { animation: none; opacity: 0.35; }
}


/* 12. Elenchi con check
   ==========================================================================
   Il check è navy dentro un pallino lime: su fondo chiaro il lime da solo
   non raggiunge il contrasto minimo (1.73:1), dentro il pallino sì.
   -------------------------------------------------------------------------- */

.sd-check {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sd-s4);
}

.sd-check li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sd-s4);
	align-items: start;
	line-height: var(--sd-interlinea-media);
}

.sd-check li::before {
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.15em;
	border-radius: 50%;
	background-color: var(--sd-lime);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23021B3A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 0.95rem;
	background-position: center;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

.sd-check--fitto { gap: var(--sd-s3); }

.sd-check strong {
	display: block;
	font-weight: var(--sd-peso-extra);
	color: var(--sd-navy);
}

.sd-sezione--navy .sd-check strong { color: var(--sd-white); }


/* 13. Passi numerati
   ========================================================================== */

.sd-passi {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sd-s6);
	counter-reset: passo;
	position: relative;
}

@media (min-width: 48rem) {
	.sd-passi--4 { grid-template-columns: repeat(4, 1fr); }
	.sd-passi--3 { grid-template-columns: repeat(3, 1fr); }

	/*
	 * La linea di corrente che attraversa i passi.
	 * I pallini sono allineati a SINISTRA nella loro colonna (justify-items:
	 * start): il loro centro è a mezzo pallino (1.375rem) dal bordo sinistro
	 * della colonna, NON al centro della colonna. La linea quindi:
	 *  - parte a 1.375rem dal bordo (centro del primo pallino);
	 *  - finisce a "larghezza colonna − mezzo pallino" dal bordo destro,
	 *    dove la larghezza colonna tiene conto del gap fra le colonne
	 *    (col = (100% − (n−1)·gap) / n). Senza il gap la linea restava corta.
	 */
	.sd-passi--4 { --sd-passi-colonne: 4; }
	.sd-passi--3 { --sd-passi-colonne: 3; }

	.sd-passi::before {
		content: '';
		position: absolute;
		top: calc(1.375rem - 1px);
		left: 1.375rem;
		right: calc((100% - (var(--sd-passi-colonne, 4) - 1) * var(--sd-s6)) / var(--sd-passi-colonne, 4) - 1.375rem);
		height: 2px;
		background: repeating-linear-gradient(90deg,
			rgba(156, 203, 29, 0.5) 0 8px,
			transparent 8px 16px);
		z-index: 0;
	}
}

.sd-passo {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--sd-s4);
	justify-items: start;
}

.sd-passo__numero {
	counter-increment: passo;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--sd-lime);
	color: var(--sd-navy);
	font-weight: var(--sd-peso-black);
	font-size: var(--sd-testo-base);
	box-shadow: 0 0 0 6px var(--sd-superficie);
}

.sd-passo__numero::before {
	content: counter(passo, decimal-leading-zero);
}

.sd-sezione--alt .sd-passo__numero { box-shadow: 0 0 0 6px var(--sd-superficie-alt); }
.sd-sezione--navy .sd-passo__numero { box-shadow: 0 0 0 6px var(--sd-navy); }

.sd-passo__titolo {
	font-size: var(--sd-testo-lg);
	font-weight: var(--sd-peso-bold);
	margin: 0;
	color: var(--sd-navy);
	line-height: var(--sd-interlinea-media);
}

.sd-sezione--navy .sd-passo__titolo { color: var(--sd-white); }

.sd-passo__testo {
	margin: 0;
	font-size: var(--sd-testo-base);
	color: var(--sd-inchiostro-tenue);
}

.sd-sezione--navy .sd-passo__testo { color: var(--sd-grigio); }


/* 14. Numeri e prove
   ========================================================================== */

/*
 * I numeri devono stare tutti sulla stessa riga o tutti incolonnati.
 * Con auto-fit, tre numeri in una colonna stretta diventavano 2+1: il terzo
 * restava orfano su una riga sua, con un separatore verticale che non
 * divideva più niente. Il numero di colonne lo decide il markup.
 */
.sd-numeri {
	display: grid;
	gap: var(--sd-s5);
	grid-template-columns: 1fr;
	padding: var(--sd-s6);
	background: var(--sd-navy);
	border-radius: var(--sd-raggio-lg);
	color: var(--sd-white);
}

@media (min-width: 34rem) {
	.sd-numeri { grid-template-columns: repeat(var(--sd-numeri-colonne, 3), 1fr); }
}

.sd-numero {
	text-align: center;
	padding: var(--sd-s3);
}

/* Impilati su telefono, affiancati quando c'è larghezza.
   Il punto di rottura deve coincidere con quello di .sd-numeri, altrimenti
   ci sono separatori orizzontali su una disposizione in colonne. */
.sd-numero + .sd-numero {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 34rem) {
	.sd-numero + .sd-numero {
		border-top: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.14);
	}
}

.sd-numero__valore {
	display: block;
	font-size: var(--sd-titolo-md);
	font-weight: var(--sd-peso-black);
	line-height: 1;
	letter-spacing: var(--sd-tracking-titolo);
	color: var(--sd-lime);
}

.sd-numero__etichetta {
	display: block;
	margin-top: var(--sd-s2);
	font-size: var(--sd-testo-sm);
	color: var(--sd-grigio);
	line-height: var(--sd-interlinea-media);
}

/* Recensione: solo recensioni vere e verificabili, con link alla fonte */
.sd-recensione {
	display: flex;
	flex-direction: column;
	gap: var(--sd-s4);
	padding: var(--sd-s6);
	background: var(--sd-superficie);
	border: 1px solid var(--sd-bordo);
	border-radius: var(--sd-raggio);
	height: 100%;
}

.sd-recensione__stelle {
	color: var(--sd-fucsia);
	letter-spacing: 0.1em;
	font-size: var(--sd-testo-base);
}

.sd-recensione__testo {
	margin: 0;
	font-size: var(--sd-testo-base);
	line-height: var(--sd-interlinea-larga);
	color: var(--sd-inchiostro);
}

.sd-recensione__autore {
	margin-top: auto;
	padding-top: var(--sd-s3);
	border-top: 1px solid var(--sd-bordo);
	font-size: var(--sd-testo-sm);
	color: var(--sd-inchiostro-tenue);
}

.sd-recensione__nome {
	display: block;
	font-weight: var(--sd-peso-extra);
	color: var(--sd-navy);
}

/* Loghi dei fornitori: in scala di grigi finché non ci si passa sopra,
   così non competono con i colori del brand */
.sd-fornitori {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(var(--sd-s6), 5vw, var(--sd-s9));
	list-style: none;
	margin: 0;
	padding: 0;
}

.sd-fornitori img {
	max-height: 2.25rem;
	width: auto;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter var(--sd-transizione), opacity var(--sd-transizione);
}

.sd-fornitori li:hover img {
	filter: grayscale(0);
	opacity: 1;
}


/* 15. Bivio Energia / Digitale
   ==========================================================================
   Il cuore della home: due strade, pari dignità visiva, nessuna ambiguità
   su dove cliccare.
   -------------------------------------------------------------------------- */

.sd-bivio {
	display: grid;
	gap: var(--sd-s6);
}

/* Energia porta il grosso del fatturato: si prende la colonna più larga.
   La parità visiva con Digitale sprecherebbe attenzione sul ramo minore. */
@media (min-width: 54rem) {
	.sd-bivio { grid-template-columns: 1.4fr 0.85fr; align-items: stretch; }
}

/* Etichetta "il più richiesto" sulla strada Energia */
.sd-strada__spicco {
	position: absolute;
	top: var(--sd-s5);
	right: var(--sd-s5);
	display: inline-flex;
	align-items: center;
	gap: var(--sd-s2);
	padding: 0.3rem 0.7rem;
	border-radius: var(--sd-raggio-pill);
	background: var(--sd-fucsia);
	color: var(--sd-white);
	font-size: var(--sd-testo-xs);
	font-weight: var(--sd-peso-extra);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Su schermi stretti il badge d'angolo "Il più richiesto" si sovrapporrebbe
   all'occhiello "Consulenza gratuita": lo riportiamo nel flusso, in cima, così
   i due si impilano senza toccarsi. */
@media (max-width: 61.99rem) {
	.sd-strada__spicco {
		position: static;
		align-self: flex-start;
		margin-bottom: calc(-1 * var(--sd-s3));
	}
}

.sd-strada {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sd-s5);
	padding: clamp(var(--sd-s6), 4vw, var(--sd-s8));
	border-radius: var(--sd-raggio-lg);
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--sd-transizione), box-shadow var(--sd-transizione);
}

.sd-strada:hover { transform: translateY(-4px); box-shadow: var(--sd-ombra-lg); }
.sd-strada:focus-within { box-shadow: var(--sd-ombra-lg); }

@media (prefers-reduced-motion: reduce) {
	.sd-strada:hover { transform: none; }
}

.sd-strada--energia {
	background: var(--sd-navy);
	color: var(--sd-grigio);
}

.sd-strada--digitale {
	background: var(--sd-superficie);
	border: 1px solid var(--sd-bordo);
	color: var(--sd-inchiostro-tenue);
}

.sd-strada__titolo {
	font-size: var(--sd-titolo-md);
	margin: 0;
}

.sd-strada--energia .sd-strada__titolo { color: var(--sd-white); }
.sd-strada--digitale .sd-strada__titolo { color: var(--sd-navy); }

.sd-strada__testo { margin: 0; font-size: var(--sd-testo-lg); }

.sd-strada__elenco {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sd-s2) var(--sd-s4);
	font-size: var(--sd-testo-sm);
	font-weight: var(--sd-peso-semi);
}

.sd-strada__elenco li {
	display: inline-flex;
	align-items: center;
	gap: var(--sd-s2);
}

.sd-strada__elenco li::before {
	content: '';
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--sd-lime);
}

.sd-strada__azione { margin-top: auto; padding-top: var(--sd-s3); }

/* Bagliore di corrente nell'angolo della strada Energia */
.sd-strada--energia::before {
	content: '';
	position: absolute;
	top: -30%;
	right: -20%;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(156, 203, 29, 0.22) 0%, transparent 70%);
	z-index: -1;
}


/* 16. Portfolio
   ========================================================================== */

.sd-lavoro {
	display: flex;
	flex-direction: column;
	background: var(--sd-superficie);
	border: 1px solid var(--sd-bordo);
	border-radius: var(--sd-raggio);
	overflow: hidden;
	transition: border-color var(--sd-transizione), box-shadow var(--sd-transizione),
	            transform var(--sd-transizione);
}

.sd-lavoro:hover {
	border-color: var(--sd-lime);
	box-shadow: var(--sd-ombra);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.sd-lavoro:hover { transform: none; }
}

.sd-lavoro__immagine {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--sd-superficie-alt);
}

.sd-lavoro__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--sd-s3);
	padding: var(--sd-s6);
	flex: 1;
}

.sd-lavoro__tipo {
	font-size: var(--sd-testo-xs);
	font-weight: var(--sd-peso-extra);
	text-transform: uppercase;
	letter-spacing: var(--sd-tracking-etichetta);
	color: var(--sd-fucsia);
}

.sd-lavoro__nome {
	font-size: var(--sd-titolo-sm);
	font-weight: var(--sd-peso-bold);
	margin: 0;
	color: var(--sd-navy);
}

.sd-lavoro__testo {
	margin: 0;
	font-size: var(--sd-testo-base);
	color: var(--sd-inchiostro-tenue);
}

/* Uno screenshot reale sostituisce il segnaposto senza cambiare l'ingombro. */
img.sd-lavoro__immagine {
	display: block;
}

/* Funzioni chiave: elenco compatto con spunta lime, condiviso da siti e app. */
.sd-punti {
	list-style: none;
	margin: var(--sd-s1) 0 0;
	padding: 0;
	display: grid;
	gap: var(--sd-s2);
}

.sd-punti li {
	position: relative;
	padding-left: var(--sd-s5);
	font-size: var(--sd-testo-sm);
	color: var(--sd-inchiostro-tenue);
}

.sd-punti li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.7rem;
	height: 0.4rem;
	border-left: 2px solid var(--sd-lime-scuro, #7ba513);
	border-bottom: 2px solid var(--sd-lime-scuro, #7ba513);
	transform: rotate(-45deg);
}

/* Card "app": diverse dai progetti web — sigla a icona invece dello screenshot. */
.sd-app {
	display: flex;
	flex-direction: column;
	gap: var(--sd-s4);
	background: var(--sd-superficie);
	border: 1px solid var(--sd-bordo);
	border-radius: var(--sd-raggio);
	overflow: hidden;
	padding: var(--sd-s6);
	transition: border-color var(--sd-transizione), box-shadow var(--sd-transizione),
	            transform var(--sd-transizione);
}

.sd-app:hover {
	border-color: var(--sd-lime);
	box-shadow: var(--sd-ombra);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.sd-app:hover { transform: none; }
}

/* Anteprima della schermata (facoltativa): mostriamo la foto intera, mai
   ritagliata — le app spaziano da schermate verticali di telefono a
   dashboard orizzontali da tablet, e "cover" le taglierebbe male. Lo sfondo
   chiaro fa da cornice ed è coerente qualunque sia l'orientamento. */
.sd-app__media {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sd-superficie-alt);
	border-bottom: 1px solid var(--sd-bordo);
	overflow: hidden;
	padding: var(--sd-s4);
	margin: calc(var(--sd-s6) * -1) calc(var(--sd-s6) * -1) 0;
	width: calc(100% + var(--sd-s6) * 2);
}

.sd-app__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0.5rem;
	box-shadow: 0 10px 28px rgba(2, 27, 58, 0.14);
}

/* Riga d'intestazione: la sigla-icona accanto a tipo/nome/piattaforma. Testo e
   funzioni chiave stanno sotto, a piena larghezza, così la card resta bassa e
   il testo ben distribuito — niente colonna stretta di fianco all'icona. */
.sd-app__testa {
	display: flex;
	gap: var(--sd-s4);
	align-items: center;
}

.sd-app__icona {
	flex: 0 0 auto;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 1rem;
	display: grid;
	place-items: center;
	background: var(--sd-navy);
	color: var(--sd-lime);
	font-size: var(--sd-titolo-sm);
	font-weight: var(--sd-peso-extra);
	line-height: 1;
}

.sd-app__intestazione {
	display: flex;
	flex-direction: column;
	gap: var(--sd-s1);
	min-width: 0;
}

.sd-app__piattaforma {
	align-self: flex-start;
	margin-top: var(--sd-s1);
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--sd-superficie-alt);
	border: 1px solid var(--sd-bordo);
	font-size: var(--sd-testo-xs);
	font-weight: var(--sd-peso-medio);
	color: var(--sd-inchiostro-tenue);
}

/* Testo e funzioni chiave: tutta la larghezza della card. */
.sd-app .sd-lavoro__testo { margin: 0; }
.sd-app .sd-punti { margin-top: 0; }

/* Griglia app: card più larghe (2 colonne su desktop) → testo su meno righe e
   card più basse; sotto ~26rem di spazio passa a una colonna. */
.sd-app-griglia {
	display: grid;
	gap: var(--sd-s5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

/* Respiro pieno tra le card dei siti e l'inizio della sezione app. */
.sd-app-intro { margin-top: clamp(var(--sd-s9), 6vw, var(--sd-s11)); }


/* 17. FAQ
   ========================================================================== */

.sd-faq {
	display: grid;
	gap: var(--sd-s3);
	max-width: var(--sd-larghezza-stretta);
	margin-inline: auto;
}

.sd-faq__voce {
	background: var(--sd-superficie);
	border: 1px solid var(--sd-bordo);
	border-radius: var(--sd-raggio);
	overflow: hidden;
}

.sd-faq__voce[open] {
	border-color: var(--sd-bordo-forte);
	box-shadow: var(--sd-ombra-sm);
}

.sd-faq__domanda {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-s4);
	padding: var(--sd-s5) var(--sd-s6);
	font-size: var(--sd-testo-lg);
	font-weight: var(--sd-peso-extra);
	color: var(--sd-navy);
	cursor: pointer;
	list-style: none;
	min-height: 3.5rem;
}

.sd-faq__domanda::-webkit-details-marker { display: none; }

.sd-faq__domanda::after {
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	background-color: var(--sd-lime);
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23021B3A' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-size: 0.9rem;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform var(--sd-transizione);
}

.sd-faq__voce[open] .sd-faq__domanda::after {
	transform: rotate(180deg);
}

.sd-faq__risposta {
	padding: 0 var(--sd-s6) var(--sd-s6);
	color: var(--sd-inchiostro-tenue);
}


/* 18. Footer
   ========================================================================== */

.sd-footer {
	position: relative;
	background: var(--sd-navy-deep);
	color: var(--sd-grigio);
	padding-block: var(--sd-s9) var(--sd-s6);
	font-size: var(--sd-testo-base);
	overflow: hidden;
}

/* Bagliore di corrente nell'angolo: la firma del brand chiude la pagina
   come l'ha aperta, senza aggiungere elementi da caricare. */
.sd-footer::before {
	content: '';
	position: absolute;
	top: -40%;
	right: -10%;
	width: 45%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(156, 203, 29, 0.09) 0%, transparent 70%);
	pointer-events: none;
}

.sd-footer > * { position: relative; }

/* Testata del footer: marchio + frase, separata dalle colonne */
.sd-footer__testata {
	display: grid;
	gap: var(--sd-s6);
	padding-bottom: var(--sd-s7);
	margin-bottom: var(--sd-s7);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 54rem) {
	.sd-footer__testata {
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: var(--sd-s8);
	}
}

.sd-footer__marchio {
	display: block;
	height: 3.25rem;
	width: auto;
	margin-bottom: var(--sd-s5);
}

.sd-footer__claim {
	margin: 0;
	max-width: 42ch;
	font-size: var(--sd-testo-lg);
	line-height: var(--sd-interlinea-media);
	color: var(--sd-grigio);
}

.sd-footer__claim strong {
	color: var(--sd-white);
	font-weight: var(--sd-peso-extra);
}

/* Profili social: pastiglie discrete sotto il claim */
.sd-footer__social {
	list-style: none;
	margin: var(--sd-s5) 0 0;
	padding: 0;
	display: flex;
	gap: var(--sd-s3);
}

.sd-footer__social a {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	color: var(--sd-grigio);
	background: rgba(255, 255, 255, 0.08);
	transition: background var(--sd-transizione), color var(--sd-transizione), transform var(--sd-transizione);
}

.sd-footer__social a:hover,
.sd-footer__social a:focus-visible {
	color: var(--sd-navy);
	background: var(--sd-lime);
	transform: translateY(-2px);
}

/* Azioni nella testata: WhatsApp e telefono, affiancati */
.sd-footer__azioni {
	display: flex;
	flex-direction: column;
	gap: var(--sd-s4);
	align-items: stretch;
}

@media (min-width: 30rem) {
	.sd-footer__azioni { flex-direction: row; align-items: center; }
}

@media (min-width: 54rem) {
	.sd-footer__azioni { flex-direction: column; align-items: stretch; }
}

.sd-footer__griglia {
	display: grid;
	gap: var(--sd-s7) var(--sd-s6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* Titolo di colonna, con il trattino lime che richiama gli occhielli */
.sd-footer__titolo {
	display: flex;
	align-items: center;
	gap: var(--sd-s3);
	font-size: var(--sd-testo-sm);
	font-weight: var(--sd-peso-extra);
	text-transform: uppercase;
	letter-spacing: var(--sd-tracking-etichetta);
	color: var(--sd-white);
	margin-bottom: var(--sd-s4);
}

.sd-footer__titolo::before {
	content: '';
	width: 1rem;
	height: 2px;
	background: var(--sd-lime);
	flex-shrink: 0;
}

.sd-footer__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

/* I link del footer sono righe di testo alte ~22px: da telefono sono
   bersagli scomodi, e Privacy e Contatti sono proprio quelli che la gente
   cerca. Qui diventano righe piene alte 44px. */
.sd-footer__lista a,
.sd-footer__legale a,
.sd-footer__griglia a,
.sd-footer__chiusura a,
.sd-footer address a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--sd-grigio);
	text-decoration: none;
}

/* Tutti i link del footer virano al lime sull'hover. Senza questi selettori
   estesi, i link "nudi" (Google Maps, email, gestisci cookie) cadevano sulla
   regola globale `a:hover { color: navy }` → blu su navy, illeggibile. */
.sd-footer__lista a:hover,
.sd-footer__legale a:hover,
.sd-footer__griglia a:hover,
.sd-footer__chiusura a:hover,
.sd-footer address a:hover {
	color: var(--sd-lime);
	text-decoration: underline;
}

.sd-footer address {
	font-style: normal;
	line-height: var(--sd-interlinea-larga);
}

/* Da tablet in su il puntatore è preciso: le righe tornano compatte */
@media (min-width: 48rem) {
	.sd-footer__lista { gap: var(--sd-s3); }

	.sd-footer__lista a,
	.sd-footer__legale a,
	.sd-footer address a {
		display: inline;
		min-height: 0;
	}
}

/* La linea fucsia sopra la riga di chiusura è un elemento fisso del brand */
.sd-footer__chiusura {
	margin-top: var(--sd-s8);
	padding-top: var(--sd-s5);
	border-top: 2px solid var(--sd-fucsia);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-s4);
	font-size: var(--sd-testo-sm);
	color: var(--sd-white);
}

.sd-footer__legale {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sd-s2) var(--sd-s5);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Firma dello studio: ultima riga in fondo, allineata a sinistra sotto il
   copyright, con lo stesso corpo e lo stesso colore della riga di chiusura.

   È una riga flex, non testo con un'immagine dentro: nel tema le immagini
   sono display:block (regola globale), quindi un marchio dentro un link di
   testo andrebbe a capo e si disallineerebbe. Con flex la frase e il marchio
   restano sulla stessa riga, centrati fra loro. */
.sd-firma-studio {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: var(--sd-s4) 0 0;
	font-size: var(--sd-testo-sm);
	color: var(--sd-white);
}

.sd-firma-studio a {
	display: inline-flex;
	align-items: center;
	color: var(--sd-white);
	text-decoration: none;
	font-weight: var(--sd-peso-semi);
	transition: color var(--sd-transizione);
}

.sd-firma-studio a:hover,
.sd-firma-studio a:focus-visible {
	color: var(--sd-lime);
	text-decoration: underline;
}

/* Marchio al posto del nome: alto come il testo della riga e nella stessa
   tonalità del footer. All'hover torna pieno — niente sottolineatura sotto
   un'immagine. */
.sd-firma-studio__logo {
	display: block;
	height: 0.95rem;
	width: auto;
	opacity: 0.92;
	transition: opacity var(--sd-transizione);
}

.sd-firma-studio a:hover .sd-firma-studio__logo,
.sd-firma-studio a:focus-visible .sd-firma-studio__logo {
	opacity: 1;
}

.sd-firma-studio a:has(.sd-firma-studio__logo):hover,
.sd-firma-studio a:has(.sd-firma-studio__logo):focus-visible {
	text-decoration: none;
}

/* Link "Gestisci cookie" reso da Complianz: lo allineiamo agli altri link
   legali del footer (compare solo quando il plugin è attivo). */
.sd-footer__cookie a,
.sd-footer__cookie button {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: var(--sd-grigio);
	text-decoration: none;
	cursor: pointer;
}

.sd-footer__cookie a:hover,
.sd-footer__cookie button:hover {
	color: var(--sd-lime);
	text-decoration: underline;
}

.sd-footer__nota {
	margin-top: var(--sd-s5);
	font-size: var(--sd-testo-xs);
	line-height: var(--sd-interlinea-media);
	color: rgba(210, 218, 230, 0.6);
	max-width: 70ch;
}


/* 19. Azioni di contatto
   ==========================================================================
   Su telefono le due azioni che convertono — chiamare e scrivere su WhatsApp —
   stanno in una barra fissa in basso, nella zona che il pollice raggiunge
   senza spostare la mano. Su desktop, dove la barra sarebbe invadente e il
   telefono è già nell'header, resta solo il pulsante WhatsApp flottante.
   -------------------------------------------------------------------------- */

.sd-barra-azioni {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--sd-z-flottante);
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--sd-navy);
	box-shadow: 0 -4px 20px rgba(2, 27, 58, 0.28);

	/* Rispetta la barra gestuale di iPhone: senza questo i pulsanti
	   finiscono sotto l'indicatore home e diventano difficili da toccare. */
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.sd-barra-azioni__voce {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sd-s2);
	min-height: 3.5rem;
	padding: var(--sd-s3);
	font-size: var(--sd-testo-base);
	font-weight: var(--sd-peso-extra);
	text-decoration: none;
	color: var(--sd-white);
}

.sd-barra-azioni__voce--chiama   { background: var(--sd-fucsia); }
.sd-barra-azioni__voce--whatsapp { background: #25D366; color: #06331a; }

.sd-barra-azioni__voce:hover,
.sd-barra-azioni__voce:focus-visible { color: var(--sd-white); }
.sd-barra-azioni__voce--whatsapp:hover,
.sd-barra-azioni__voce--whatsapp:focus-visible { color: #06331a; }

.sd-barra-azioni svg { flex-shrink: 0; }

/* La barra copre il fondo della pagina: il contenuto deve poterla superare */
body:has(.sd-barra-azioni) {
	padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
}

/* Pulsante flottante: nascosto su telefono, dove c'è già la barra */
.sd-whatsapp {
	display: none;
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: var(--sd-z-flottante);
	align-items: center;
	gap: var(--sd-s3);
	padding: 0.85rem 1.35rem 0.85rem 0.9rem;
	background: #25D366;
	color: #06331a;
	border-radius: var(--sd-raggio-pill);
	font-weight: var(--sd-peso-extra);
	font-size: var(--sd-testo-sm);
	text-decoration: none;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25);
	transition: transform var(--sd-transizione), box-shadow var(--sd-transizione);
}

.sd-whatsapp:hover {
	transform: translateY(-2px);
	color: #06331a;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
	.sd-whatsapp:hover { transform: none; }
}

.sd-whatsapp svg { flex-shrink: 0; }

@media (min-width: 48rem) {
	.sd-barra-azioni { display: none; }

	body:has(.sd-barra-azioni) { padding-bottom: 0; }

	.sd-whatsapp { display: inline-flex; }
}


/* 20. Utilità
   ========================================================================== */

.sd-centro      { text-align: center; }
.sd-centro .sd-guida,
.sd-centro .sd-intestazione { margin-inline: auto; }

/* Utilità di visibilità con nomi mobile-first: il default è il telefono,
   e il nome dice da dove in su l'elemento compare. Il tipo di display va
   dichiarato esplicitamente, perché non esiste un modo affidabile di
   "ripristinare" quello che l'elemento avrebbe avuto. */
.sd-da-tablet { display: none; }

@media (min-width: 48rem) {
	.sd-da-tablet { display: block; }
	.sd-da-tablet.sd-btn,
	.sd-da-tablet.sd-telefono { display: inline-flex; }

	.sd-fino-tablet { display: none; }
}

.sd-mt-0 { margin-top: 0; }
.sd-mb-0 { margin-bottom: 0; }
.sd-mt-6 { margin-top: var(--sd-s6); }
.sd-mt-8 { margin-top: var(--sd-s8); }
.sd-mb-6 { margin-bottom: var(--sd-s6); }

/* Rivelazione allo scorrimento — applicata via JS solo se il browser
   supporta IntersectionObserver, così senza JS il contenuto resta visibile */
.js-rivela {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--sd-transizione-lenta), transform var(--sd-transizione-lenta);
}

.js-rivela.is-visibile {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js-rivela {
		opacity: 1;
		transform: none;
	}
}


/* 21. Riquadro carica-bolletta
   ==========================================================================
   Sta nella colonna destra dell'hero, dove prima c'era solo una foto.
   È lo spazio più prezioso della pagina: qui ci va l'azione, non un ornamento.
   È anche il contenitore pronto per l'analisi automatica della fase 2.
   -------------------------------------------------------------------------- */

.sd-carica {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sd-s3);
	padding: clamp(var(--sd-s5), 3vw, var(--sd-s6));
	background: var(--sd-superficie);
	border: 1px solid var(--sd-bordo);
	border-radius: var(--sd-raggio-lg);
	box-shadow: var(--sd-ombra-lg);
}

.sd-carica__titolo {
	font-size: var(--sd-titolo-sm);
	font-weight: var(--sd-peso-bold);
	margin: 0;
	color: var(--sd-navy);
}

.sd-carica__nota {
	margin: 0;
	font-size: var(--sd-testo-sm);
	color: var(--sd-inchiostro-tenue);
	line-height: var(--sd-interlinea-media);
}

/* L'area di trascinamento. Il tratteggio lime dice "qui si posa qualcosa"
   senza bisogno di spiegarlo a parole. */
.sd-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sd-s3);
	padding: var(--sd-s6) var(--sd-s4);
	text-align: center;
	border: 2px dashed rgba(156, 203, 29, 0.75);
	border-radius: var(--sd-raggio);
	background: rgba(156, 203, 29, 0.06);
	cursor: pointer;
	transition: background var(--sd-transizione), border-color var(--sd-transizione);
	min-height: 8rem;
}

.sd-dropzone:hover,
.sd-dropzone:focus-within,
.sd-dropzone[data-attivo="true"] {
	background: rgba(156, 203, 29, 0.14);
	border-color: var(--sd-lime);
}

.sd-dropzone__icona {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--sd-lime);
	color: var(--sd-navy);
	flex-shrink: 0;
}

.sd-dropzone__testo {
	font-weight: var(--sd-peso-extra);
	color: var(--sd-navy);
	line-height: var(--sd-interlinea-media);
}

.sd-dropzone__formati {
	font-size: var(--sd-testo-sm);
	color: var(--sd-inchiostro-tenue);
}

/* Il campo file vero resta invisibile ma raggiungibile da tastiera:
   nasconderlo con display:none lo toglierebbe dal tab order. */
.sd-dropzone input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

/* Separatore "oppure" tra il percorso WhatsApp e quello del richiamo */
.sd-oppure {
	display: flex;
	align-items: center;
	gap: var(--sd-s3);
	color: var(--sd-inchiostro-tenue);
	font-size: var(--sd-testo-sm);
	text-transform: lowercase;
}

.sd-oppure::before,
.sd-oppure::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--sd-bordo);
}

/* Allegato bolletta: facoltativo, quindi ripiegato di default.
   Chi vuole lo apre; chi non vuole non lo vede nemmeno. */
.sd-allega {
	border: 1px dashed var(--sd-bordo-forte);
	border-radius: var(--sd-raggio-sm);
	overflow: hidden;
}

.sd-allega > summary {
	display: flex;
	align-items: center;
	gap: var(--sd-s2);
	padding: var(--sd-s3) var(--sd-s4);
	list-style: none;
	cursor: pointer;
	font-size: var(--sd-testo-sm);
	font-weight: var(--sd-peso-semi);
	color: var(--sd-navy);
	min-height: 2.75rem;
}

.sd-allega > summary::-webkit-details-marker { display: none; }

.sd-allega > summary::before {
	content: '+';
	display: grid;
	place-items: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: rgba(156, 203, 29, 0.2);
	color: var(--sd-navy);
	font-weight: var(--sd-peso-black);
	flex-shrink: 0;
}

.sd-allega[open] > summary::before { content: '−'; }

.sd-allega .sd-dropzone {
	margin: 0 var(--sd-s4) var(--sd-s4);
	border-width: 1px;
	min-height: 6rem;
	padding: var(--sd-s4);
}

.sd-carica__campo {
	display: flex;
	flex-direction: column;
	gap: var(--sd-s2);
}

.sd-carica__etichetta {
	font-size: var(--sd-testo-sm);
	font-weight: var(--sd-peso-semi);
	color: var(--sd-navy);
}

.sd-carica input[type="tel"],
.sd-carica input[type="text"],
.sd-carica input[type="email"] {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--sd-bordo-forte);
	border-radius: var(--sd-raggio-sm);
	background: var(--sd-superficie);
	color: var(--sd-inchiostro);
	transition: border-color var(--sd-transizione), box-shadow var(--sd-transizione);
	min-height: 3rem;
}

.sd-carica input:focus {
	border-color: var(--sd-fucsia);
	box-shadow: 0 0 0 3px rgba(214, 28, 106, 0.15);
	outline: none;
}

.sd-carica__privacy {
	display: flex;
	align-items: flex-start;
	gap: var(--sd-s3);
	font-size: var(--sd-testo-xs);
	line-height: var(--sd-interlinea-media);
	color: var(--sd-inchiostro-tenue);
}

.sd-carica__privacy input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.1rem;
	accent-color: var(--sd-fucsia);
	flex-shrink: 0;
}

/* Il cartellino della consulente resta, ma ora accompagna un'azione
   invece di decorare una foto: il modulo chiede, la faccia rassicura. */
.sd-carica .sd-consulente {
	position: static;
	max-width: none;
	padding: var(--sd-s4) 0 0;
	box-shadow: none;
	border-top: 1px solid var(--sd-bordo);
	border-radius: 0;
}


/* 22. Flusso di energia strutturale
   ==========================================================================
   La firma non può vivere solo dentro il segnaposto della foto: sparirebbe
   il giorno in cui arrivano gli scatti dello shooting. Qui diventa una linea
   di corrente che entra dall'alto in ogni sezione marcata, e collega la
   pagina dall'inizio alla fine.
   -------------------------------------------------------------------------- */

.sd-sezione--flusso::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: var(--sd-s8);
	transform: translateX(-50%);
	background: repeating-linear-gradient(180deg,
		rgba(156, 203, 29, 0.7) 0 6px,
		transparent 6px 14px);
	background-size: 2px 14px;
	animation: sd-corrente 0.9s linear infinite;
	pointer-events: none;
}

/* Il nodo in cui la corrente arriva */
.sd-sezione--flusso::after {
	content: '';
	position: absolute;
	top: calc(var(--sd-s8) - 4px);
	left: 50%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--sd-lime);
	transform: translateX(-50%);
	pointer-events: none;
}

@keyframes sd-corrente {
	to { background-position-y: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.sd-sezione--flusso::before { animation: none; }
}


/* 23. Recensioni e fornitori
   ========================================================================== */

.sd-recensioni {
	display: grid;
	gap: var(--sd-s5);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.sd-recensioni { grid-template-columns: repeat(3, 1fr); }
}

.sd-recensione__fonte {
	display: inline-flex;
	align-items: center;
	gap: var(--sd-s2);
	font-size: var(--sd-testo-xs);
	font-weight: var(--sd-peso-semi);
	color: var(--sd-inchiostro-tenue);
	text-decoration: none;
}

.sd-recensione__fonte:hover { color: var(--sd-fucsia); }

/* Terza casella: il totale verificabile.
   Serve a chiudere la griglia senza inventare una recensione che non c'è —
   le valutazioni senza testo esistono e contano, ma non si possono citare. */
.sd-recensione--totale {
	background: var(--sd-navy);
	border-color: var(--sd-navy);
	align-items: flex-start;
	justify-content: center;
}

.sd-recensione--totale .sd-recensione__testo { color: var(--sd-grigio); }
.sd-recensione--totale .sd-recensione__stelle { color: var(--sd-lime); }

.sd-recensione__conteggio {
	margin: 0;
	font-size: var(--sd-testo-lg);
	color: var(--sd-white);
	line-height: 1.2;
}

.sd-recensione__conteggio strong {
	font-size: var(--sd-titolo-md);
	font-weight: var(--sd-peso-black);
	color: var(--sd-white);
	display: block;
	letter-spacing: var(--sd-tracking-titolo);
}

/* Segnaposto per una recensione non ancora inserita. Deliberatamente
   diverso da una recensione vera: non si finge una prova che non c'è. */
.sd-recensione--vuota {
	border-style: dashed;
	background: var(--sd-superficie-alt);
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--sd-inchiostro-tenue);
	font-size: var(--sd-testo-sm);
	min-height: 12rem;
}

.sd-fornitori-fascia {
	text-align: center;
}

.sd-fornitori-fascia__titolo {
	font-size: var(--sd-testo-sm);
	font-weight: var(--sd-peso-semi);
	text-transform: uppercase;
	letter-spacing: var(--sd-tracking-etichetta);
	color: var(--sd-inchiostro-tenue);
	margin-bottom: var(--sd-s6);
}

/* Casella vuota in attesa dei loghi veri */
.sd-fornitore-vuoto {
	display: grid;
	place-items: center;
	width: 8rem;
	height: 2.75rem;
	border: 1px dashed var(--sd-bordo-forte);
	border-radius: var(--sd-raggio-sm);
	font-size: var(--sd-testo-xs);
	color: var(--sd-inchiostro-tenue);
}


/* 24bis. Copertura: due livelli, locale e nazionale
   ==========================================================================
   Sostituisce la lista piatta di comuni. Due card affiancate rendono
   visibile la distinzione — ufficio sul territorio, servizio in tutta
   Italia — invece di affidarla al solo testo.
   -------------------------------------------------------------------------- */

.sd-copertura {
	display: grid;
	gap: var(--sd-s5);
	margin-top: var(--sd-s7);
	text-align: left;
}

@media (min-width: 48rem) {
	.sd-copertura { grid-template-columns: 1.15fr 0.85fr; }
}

.sd-copertura__card {
	display: flex;
	flex-direction: column;
	gap: var(--sd-s4);
	padding: clamp(var(--sd-s5), 3vw, var(--sd-s7));
	border-radius: var(--sd-raggio-lg);
}

/* Locale: navy pieno, il territorio come casa */
.sd-copertura__card--locale {
	background: var(--sd-navy);
	color: var(--sd-grigio);
}

/* Nazionale: chiara, con cornice, il raggio d'azione più ampio */
.sd-copertura__card--nazionale {
	background: var(--sd-superficie);
	border: 1px solid var(--sd-bordo);
}

.sd-copertura__testa {
	display: flex;
	align-items: center;
	gap: var(--sd-s3);
}

.sd-copertura__icona {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--sd-raggio);
	flex-shrink: 0;
}

.sd-copertura__card--locale .sd-copertura__icona {
	background: rgba(156, 203, 29, 0.18);
	color: var(--sd-lime);
}

.sd-copertura__card--nazionale .sd-copertura__icona {
	background: rgba(214, 28, 106, 0.12);
	color: var(--sd-fucsia);
}

.sd-copertura__tit {
	margin: 0;
	font-size: var(--sd-testo-lg);
	font-weight: var(--sd-peso-bold);
	line-height: 1.2;
}

.sd-copertura__card--locale .sd-copertura__tit { color: var(--sd-white); }
.sd-copertura__card--nazionale .sd-copertura__tit { color: var(--sd-navy); }

.sd-copertura__testo {
	margin: 0;
	font-size: var(--sd-testo-base);
	line-height: var(--sd-interlinea-media);
}

.sd-copertura__card--nazionale .sd-copertura__testo { color: var(--sd-inchiostro-tenue); }

/* Comuni: chip più discrete, dentro la card locale */
.sd-comuni {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sd-s2);
	list-style: none;
	margin: var(--sd-s2) 0 0;
	padding: 0;
}

.sd-comuni li {
	padding: 0.35rem 0.75rem;
	border-radius: var(--sd-raggio-pill);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--sd-testo-sm);
	font-weight: var(--sd-peso-medio);
	color: var(--sd-white);
}

.sd-comuni li.sd-comuni__altro {
	background: transparent;
	border-style: dashed;
	color: var(--sd-grigio);
}

.sd-copertura__servizi {
	list-style: none;
	margin: var(--sd-s2) 0 0;
	padding: 0;
	display: grid;
	gap: var(--sd-s3);
}

.sd-copertura__servizi li {
	display: flex;
	align-items: baseline;
	gap: var(--sd-s3);
	font-size: var(--sd-testo-base);
	color: var(--sd-inchiostro);
}

.sd-copertura__servizi strong { font-weight: var(--sd-peso-extra); color: var(--sd-navy); }

.sd-copertura__servizi li::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--sd-lime);
	flex-shrink: 0;
	transform: translateY(-1px);
}


/* 24. Testo lungo (privacy, note legali, articoli)
   ========================================================================== */

.sd-testo-lungo {
	max-width: 68ch;
}

.sd-testo-lungo h2 {
	font-size: var(--sd-titolo-sm);
	font-weight: var(--sd-peso-extra);
	color: var(--sd-navy);
	margin-top: var(--sd-s8);
	margin-bottom: var(--sd-s4);
	scroll-margin-top: 6rem;
}

.sd-testo-lungo h2:first-of-type { margin-top: var(--sd-s6); }

.sd-testo-lungo p { margin-bottom: var(--sd-s5); }

.sd-testo-lungo ul {
	margin: 0 0 var(--sd-s5);
	padding-left: 1.25rem;
	display: grid;
	gap: var(--sd-s3);
}

.sd-testo-lungo li { padding-left: var(--sd-s2); }

.sd-testo-lungo li::marker { color: var(--sd-lime); }


/* Stampa: via tutto ciò che non è contenuto */
@media print {
	.sd-header,
	.sd-footer,
	.sd-whatsapp,
	.sd-flusso,
	.sd-skip {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
		font-size: 11pt;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
	}
}

/* ==========================================================================
   Landing pubblicitarie (template "Landing — Analisi bolletta")
   Header snello senza menu, footer minimale, CTA di chiusura centrata.
   ========================================================================== */

/* Il telefono nell'header sta su fondo navy: va reso chiaro (di base è navy). */
.sd-header .sd-telefono { color: var(--sd-white); }
.sd-header .sd-telefono:hover { color: var(--sd-lime); }

.sd-footer--landing { padding-block: var(--sd-s7); }

.sd-footer__landing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sd-s4);
	text-align: center;
}

.sd-footer__landing-legale {
	margin: 0;
	font-size: var(--sd-testo-sm);
	color: var(--sd-grigio);
	line-height: var(--sd-interlinea-larga);
}

.sd-footer__landing-legale a { color: var(--sd-grigio); }
.sd-footer__landing-legale a:hover { color: var(--sd-lime); }

.sd-landing-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sd-s4);
	justify-content: center;
	margin-top: var(--sd-s6);
}

/* Hero immersivo della landing: fondo navy, firma "flusso di energia" e due
   aloni soffusi in sottofondo, form bianco che galleggia, onda di raccordo. */
.sd-lp-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--sd-navy);
	padding-block: clamp(var(--sd-s8), 8vw, 5.5rem) clamp(4rem, 9vw, 7rem);
}

.sd-lp-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sd-lp-flusso { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }

/* Impulso di corrente che scorre lungo il flusso: solo CSS, un tratto che
   viaggia sul tracciato. Leggerissimo (nessun JS). I due totali dash+gap
   coincidono (518), così un solo keyframe fa il giro perfetto su entrambi. */
.sd-lp-puls {
	fill: none;
	stroke-linecap: round;
	stroke-dasharray: 18 500;
	animation: sd-lp-corrente 3.8s linear infinite;
}
.sd-lp-puls--2 { stroke-dasharray: 20 498; animation-duration: 4.6s; }

@keyframes sd-lp-corrente { to { stroke-dashoffset: -518; } }

@media (prefers-reduced-motion: reduce) {
	.sd-lp-puls { animation: none; opacity: 0; }
}

/* Sezioni scure "immersive" (Perché noi, chiusura): stesso sottofondo
   dell'hero. Il contenuto resta sopra grazie allo z-index del wrap. */
.sd-lp-immersiva { position: relative; overflow: hidden; isolation: isolate; }
.sd-lp-immersiva > .sd-wrap { position: relative; z-index: 1; }

.sd-lp-glow { position: absolute; border-radius: 50%; filter: blur(80px); }
.sd-lp-glow--lime { width: 40rem; height: 40rem; top: -16rem; left: -12rem; background: rgba(156, 203, 29, .28); }
.sd-lp-glow--fucsia { width: 34rem; height: 34rem; bottom: -18rem; right: -10rem; background: rgba(214, 28, 106, .26); }

.sd-lp-hero__grid { position: relative; z-index: 1; }

/* Testo chiaro sul fondo navy */
.sd-lp-hero .sd-hero__titolo { color: var(--sd-white); }
.sd-lp-hero .sd-hero__testo,
.sd-lp-hero .sd-prova__testo { color: var(--sd-grigio); }

/* Badge fluttuanti attorno al form */
.sd-lp-hero__visual { position: relative; }
.sd-lp-badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem .9rem;
	border-radius: var(--sd-raggio-pill);
	background: var(--sd-white);
	color: var(--sd-navy);
	font-size: var(--sd-testo-sm);
	font-weight: var(--sd-peso-extra);
	box-shadow: 0 12px 30px rgba(2, 27, 58, .35);
}
.sd-lp-badge svg { color: var(--sd-lime); }
.sd-lp-badge--gratis { top: -1.1rem; left: -1.1rem; }
.sd-lp-badge--tempo { bottom: 1.5rem; right: -1.1rem; }

/* Onda di transizione verso la prima sezione chiara */
.sd-lp-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; line-height: 0; }
.sd-lp-hero__wave svg { display: block; width: 100%; height: clamp(38px, 6vw, 72px); }
.sd-lp-hero__wave path { fill: var(--sd-superficie); }

/* Su telefono i badge fluttuanti toglierebbero respiro: via. */
@media (max-width: 61.99rem) {
	.sd-lp-badge { display: none; }
}


/* 26. Mappa incorporata (Contatti)
   L'iframe di Google Maps, in cornice arrotondata. Prima del consenso ai
   cookie Complianz lo sostituisce col suo avviso "clicca per attivare".
   ========================================================================== */

.sd-mappa {
	border-radius: var(--sd-raggio);
	overflow: hidden;
	border: 1px solid var(--sd-bordo);
	background: var(--sd-superficie-alt);
}

.sd-mappa__frame {
	display: block;
	width: 100%;
	height: 20rem;
	border: 0;
}


/* 27. Banner cookie vs pulsanti flottanti
   Finché il banner del consenso è a schermo (classe messa dal JS), togliamo di
   mezzo i pulsanti flottanti del tema: si sovrapporrebbero al banner, che sta
   nello stesso angolo in basso. Tornano appena il visitatore sceglie.
   ========================================================================== */

.sd-cookiebanner-attivo .sd-whatsapp,
.sd-cookiebanner-attivo .sd-barra-azioni {
	display: none;
}

/* Dopo la scelta, Complianz mostra un pulsante fisso "Gestisci consenso" in
   basso: si sovrappone ai nostri pulsanti flottanti (WhatsApp / barra mobile).
   Lo nascondiamo perché la stessa funzione è già nel footer ("Gestisci
   cookie"), quindi il consenso resta revocabile con la stessa facilità con cui
   è stato dato — requisito GDPR comunque soddisfatto. */
button.cmplz-manage-consent.manage-consent-1 {
	display: none !important;
}


/* 25. Blog / Guide
   Testata articolo, briciole, box autore, invito finale, card degli articoli.
   Tutto costruito sui componenti esistenti (.sd-lavoro, .sd-testo-lungo) così
   una nuova guida eredita il design senza toccare nulla.
   ========================================================================== */

/* --- Azioni centrate: variante usata nelle chiusure e negli stati vuoti --- */
.sd-azioni--centrate {
	justify-content: center;
	align-items: center;
}

/* --- Briciole di pane --------------------------------------------------- */
.sd-briciole {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sd-s2);
	margin-bottom: var(--sd-s5);
	font-size: var(--sd-testo-sm);
	color: var(--sd-inchiostro-tenue);
}

.sd-briciole a { color: var(--sd-inchiostro-tenue); text-decoration: none; }
.sd-briciole a:hover { color: var(--sd-fucsia); }
.sd-briciole span[aria-hidden] { color: var(--sd-bordo); }
.sd-briciole [aria-current] { color: var(--sd-navy); font-weight: var(--sd-peso-medio); }

/* --- Filtri dell'elenco guide: chip argomenti + ordinamento --------------- */
.sd-filtri {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--sd-s4);
	margin-bottom: var(--sd-s7);
}

.sd-filtri__gruppo { display: flex; flex-wrap: wrap; gap: var(--sd-s2); }
.sd-filtri__ordine { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sd-s2); }
.sd-filtri__etichetta { font-size: var(--sd-testo-sm); color: var(--sd-inchiostro-tenue); }

/* Casella di ricerca guide: lente + campo + invio, come una pastiglia unica */
.sd-filtri__cerca {
	display: flex;
	align-items: center;
	gap: var(--sd-s2);
	padding: 0.35rem 0.5rem 0.35rem 0.85rem;
	border: 1px solid var(--sd-bordo);
	border-radius: var(--sd-raggio-pill);
	background: var(--sd-superficie);
	transition: border-color var(--sd-transizione), box-shadow var(--sd-transizione);
}

.sd-filtri__cerca:focus-within {
	border-color: var(--sd-fucsia);
	box-shadow: 0 0 0 3px rgba(214, 28, 106, 0.15);
}

.sd-filtri__cerca svg { color: var(--sd-inchiostro-tenue); flex-shrink: 0; }

.sd-filtri__cerca input[type="search"] {
	border: none;
	background: none;
	padding: 0.25rem 0;
	min-width: 0;
	width: 11rem;
	max-width: 46vw;
	font-size: var(--sd-testo-sm);
	color: var(--sd-navy);
}

.sd-filtri__cerca input[type="search"]:focus { outline: none; }

.sd-filtri__cerca button {
	flex-shrink: 0;
	padding: 0.35rem 0.9rem;
	border: none;
	border-radius: var(--sd-raggio-pill);
	background: var(--sd-navy);
	color: var(--sd-white);
	font-size: var(--sd-testo-xs);
	font-weight: var(--sd-peso-semi);
	cursor: pointer;
	transition: background var(--sd-transizione);
}

.sd-filtri__cerca button:hover,
.sd-filtri__cerca button:focus-visible { background: var(--sd-fucsia); outline: none; }

.sd-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.9rem;
	border-radius: var(--sd-raggio-pill);
	border: 1px solid var(--sd-bordo);
	background: var(--sd-superficie);
	color: var(--sd-navy);
	font-size: var(--sd-testo-sm);
	font-weight: var(--sd-peso-medio);
	text-decoration: none;
	transition: border-color var(--sd-transizione), background var(--sd-transizione),
	            color var(--sd-transizione);
}

.sd-chip:hover { border-color: var(--sd-lime); }
.sd-chip.is-attiva { background: var(--sd-navy); border-color: var(--sd-navy); color: var(--sd-white); }
.sd-chip--mini { padding: 0.3rem 0.7rem; font-size: var(--sd-testo-xs); }

/* --- Testata dell'articolo ---------------------------------------------- */
.sd-articolo__testata { padding-bottom: var(--sd-s6); }

.sd-articolo__titolo {
	font-size: var(--sd-titolo-md);
	font-weight: var(--sd-peso-extra);
	color: var(--sd-navy);
	margin: var(--sd-s2) 0 0;
	max-width: 22ch;
}

.sd-articolo__filo {
	width: 3.5rem;
	height: 4px;
	border-radius: 2px;
	margin: var(--sd-s5) 0;
	background: linear-gradient(90deg, var(--sd-fucsia), var(--sd-lime));
}

.sd-articolo__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sd-s2);
	margin: 0;
	font-size: var(--sd-testo-sm);
	color: var(--sd-inchiostro-tenue);
}
.sd-articolo__meta span[aria-hidden] { color: var(--sd-bordo); }

/* Copertina a piena larghezza della colonna di lettura, appena sotto la testata. */
.sd-articolo__cover-wrap { margin-top: var(--sd-s2); margin-bottom: var(--sd-s2); }
/* Con la copertina, il corpo le sta già vicino: niente doppio stacco sopra. */
.sd-articolo__cover-wrap + .sd-articolo__corpo { padding-top: var(--sd-s6); }
.sd-articolo__cover {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--sd-raggio-lg);
}

.sd-articolo__corpo { padding-top: var(--sd-s7); }

/* Argomenti (tag) in coda al testo */
.sd-articolo__tag {
	margin-top: var(--sd-s7);
	padding-top: var(--sd-s5);
	border-top: 1px solid var(--sd-bordo);
	font-size: var(--sd-testo-sm);
	color: var(--sd-inchiostro-tenue);
}
.sd-articolo__tag-etichetta { font-weight: var(--sd-peso-bold); color: var(--sd-navy); }
.sd-articolo__tag a { color: var(--sd-fucsia); text-decoration: none; }
.sd-articolo__tag a:hover { text-decoration: underline; }

.sd-articolo__pagine {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sd-s3);
	margin-top: var(--sd-s6);
	font-weight: var(--sd-peso-bold);
}

/* --- Firma in fondo all'articolo: chi cura le guide (marchio, non persona) --- */
.sd-firma {
	display: flex;
	gap: var(--sd-s5);
	align-items: center;
	padding: var(--sd-s6);
	background: var(--sd-superficie-alt);
	border: 1px solid var(--sd-bordo);
	border-radius: var(--sd-raggio-lg);
	max-width: 68ch;
}

.sd-firma__marchio {
	flex: 0 0 auto;
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 1.15rem;
	display: grid;
	place-items: center;
	background: var(--sd-navy);
	color: var(--sd-lime);
	font-size: var(--sd-titolo-sm);
	font-weight: var(--sd-peso-extra);
	letter-spacing: .02em;
}

.sd-firma__testo { display: flex; flex-direction: column; gap: var(--sd-s1); }
.sd-firma__nome { font-size: var(--sd-titolo-sm); color: var(--sd-navy); }
.sd-firma__bio { margin: 0; color: var(--sd-inchiostro-tenue); }

/* --- Invito finale (CTA guida): fondo navy con la firma "flusso" ---------- */
.sd-cta-guida {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--sd-navy);
	padding-block: clamp(var(--sd-s8), 7vw, 4.5rem);
	text-align: center;
}

.sd-cta-guida::before,
.sd-cta-guida::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	z-index: 0;
}
.sd-cta-guida::before { width: 30rem; height: 30rem; top: -14rem; left: -10rem; background: rgba(156, 203, 29, .22); }
.sd-cta-guida::after { width: 26rem; height: 26rem; bottom: -16rem; right: -8rem; background: rgba(214, 28, 106, .20); }

.sd-cta-guida__interno { position: relative; z-index: 1; }

.sd-cta-guida__titolo {
	font-size: var(--sd-titolo-sm);
	font-weight: var(--sd-peso-extra);
	color: var(--sd-white);
	margin: 0 0 var(--sd-s3);
}

.sd-cta-guida__testo {
	margin: 0 auto var(--sd-s6);
	max-width: 52ch;
	color: var(--sd-grigio);
}

/* Telefono chiaro su fondo scuro (CTA e altre sezioni navy). */
.sd-telefono--chiaro { color: var(--sd-white); }
.sd-telefono--chiaro:hover { color: var(--sd-lime); }

/* --- Stato "niente articoli" -------------------------------------------- */
.sd-vuoto {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--sd-s6);
	padding-block: var(--sd-s6);
}

/* --- Card articolo: riusa .sd-lavoro, ma tutta cliccabile ---------------- */
.sd-lavoro--articolo { position: relative; }

.sd-lavoro__media {
	display: block;
	overflow: hidden;
	background: var(--sd-superficie-alt);
}

.sd-lavoro__link { color: inherit; text-decoration: none; }

/* Il link del titolo copre l'intera card: click comodo ovunque, ma il testo
   resta selezionabile e i lettori di schermo annunciano un solo link. */
.sd-lavoro--articolo .sd-lavoro__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sd-lavoro__leggi {
	display: inline-flex;
	align-items: center;
	gap: var(--sd-s2);
	margin-top: auto;
	padding-top: var(--sd-s2);
	font-size: var(--sd-testo-sm);
	font-weight: var(--sd-peso-bold);
	color: var(--sd-fucsia);
}

.sd-lavoro--articolo:hover .sd-lavoro__leggi { gap: var(--sd-s3); }

@media (prefers-reduced-motion: reduce) {
	.sd-lavoro__leggi { transition: none; }
}