/* ==========================================================================
   SOLUZIONI DIRETTE — Design token
   Colori, tipografia, spaziature. Nessuna regola di layout: solo variabili.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font — Poppins ospitato in locale.
   Niente CDN di Google: oltre a essere più veloce, evita il trasferimento
   dell'IP dei visitatori verso Google, che in UE è un problema GDPR accertato.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-regular.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-regular-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/poppins-medium.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/poppins-medium-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-semibold.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-semibold-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/poppins-bold.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/poppins-bold-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/poppins-extrabold.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/poppins-extrabold-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('../fonts/poppins-black.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('../fonts/poppins-black-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}


:root {

	/* ----------------------------------------------------------------------
	   COLORI DI BRAND — valori ufficiali, non modificare.
	   ---------------------------------------------------------------------- */

	--sd-navy:        #021B3A;  /* base, ancore, testo */
	--sd-navy-deep:   #011228;  /* footer, profondità */
	--sd-navy-panel:  #042346;  /* card su fondo navy */
	--sd-lime:        #9CCB1D;  /* corrente, benefici, segnali attivi */
	--sd-fucsia:      #D61C6A;  /* azione: solo CTA */
	--sd-white:       #FFFFFF;
	--sd-grigio:      #D2DAE6;  /* testo secondario SU navy */

	/* ----------------------------------------------------------------------
	   SUPERFICI CHIARE — derivate dal navy, mai neutre pure.
	   Il grigio "sporco di blu" tiene insieme le sezioni chiare e quelle
	   navy: un #F5F5F5 neutro le farebbe sembrare due siti diversi.
	   ---------------------------------------------------------------------- */

	--sd-superficie:      #FFFFFF;
	--sd-superficie-alt:  #F4F7FB;  /* sezioni alternate */
	--sd-superficie-scura:#E8EEF7;  /* input, stati hover su chiaro */
	--sd-bordo:           #DDE5F0;
	--sd-bordo-forte:     #C3D0E2;

	/* Testo su superfici chiare */
	--sd-inchiostro:        #021B3A;  /* 17.9:1 su bianco */
	--sd-inchiostro-tenue:  #4A5D7A;  /* 6.7:1 su bianco — passa AA */

	/* ----------------------------------------------------------------------
	   REGOLE DI CONTRASTO — verificate, non a occhio.

	   ✓ bianco su fucsia .......... 4.96:1  CTA, ok per testo normale
	   ✓ lime su navy .............. 9.95:1  benefici su fondo scuro
	   ✓ navy su lime .............. 9.95:1  icone e badge lime
	   ✓ grigio su navy ............ 12.4:1  testo secondario su scuro
	   ✗ lime su bianco ............ 1.73:1  MAI. Né testo né icone.

	   Su fondo chiaro il lime va usato solo come RIEMPIMENTO di una forma
	   che contiene un segno navy (es. check navy dentro pallino lime).
	   ---------------------------------------------------------------------- */

	--sd-focus: #D61C6A;  /* anello di focus da tastiera */

	/* Stati di sistema per i form */
	--sd-errore:   #C0392B;
	--sd-successo: #2E7D32;

	/* ----------------------------------------------------------------------
	   TIPOGRAFIA
	   Corpo a 17px, non 16: il pubblico legge bollette e ha spesso più di 45
	   anni. Un punto in più di corpo vale più di qualsiasi effetto grafico.
	   ---------------------------------------------------------------------- */

	--sd-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

	--sd-peso-normale:   400;
	--sd-peso-medio:     500;
	--sd-peso-semi:      600;
	--sd-peso-bold:      700;
	--sd-peso-extra:     800;
	--sd-peso-black:     900;

	/* Scala fluida: cresce con la finestra senza media query */
	--sd-testo-xs:    0.8125rem;                         /* 13px  — note legali */
	--sd-testo-sm:    0.9375rem;                         /* 15px  — didascalie */
	--sd-testo-base:  1.0625rem;                         /* 17px  — corpo */
	/* I minimi della scala sono tarati sul telefono a 375px, non sul desktop.
	   Su uno schermo alto 812px una headline da 36px consuma metà pagina e
	   spinge la CTA sotto la piega: su un sito che vive di contatti, è la
	   differenza tra una telefonata e un abbandono. */
	--sd-testo-lg:    clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
	--sd-testo-xl:    clamp(1.125rem, 0.8vw + 0.95rem, 1.6rem);
	--sd-titolo-sm:   clamp(1.25rem, 1vw + 1.05rem, 1.75rem);
	--sd-titolo-md:   clamp(1.375rem, 1.6vw + 1.05rem, 2.4rem);
	--sd-titolo-lg:   clamp(1.75rem, 2.2vw + 1.05rem, 2.9rem);
	--sd-titolo-xl:   clamp(1.875rem, 4.5vw + 0.75rem, 3.4rem);

	--sd-interlinea-stretta: 1.06;  /* headline su più righe */
	--sd-interlinea-media:   1.3;
	--sd-interlinea-larga:   1.65;  /* corpo del testo */

	--sd-tracking-titolo: -0.025em;  /* Poppins Black respira meglio stretto */
	--sd-tracking-etichetta: 0.12em; /* occhielli maiuscoli */

	/* ----------------------------------------------------------------------
	   SPAZIATURE — scala su base 4px
	   ---------------------------------------------------------------------- */

	--sd-s1:  0.25rem;
	--sd-s2:  0.5rem;
	--sd-s3:  0.75rem;
	--sd-s4:  1rem;
	--sd-s5:  1.5rem;
	--sd-s6:  2rem;
	--sd-s7:  2.5rem;
	--sd-s8:  3rem;
	--sd-s9:  4rem;
	--sd-s10: 5rem;
	--sd-s11: 6.5rem;

	/* Respiro verticale delle sezioni, fluido */
	--sd-sezione: clamp(3.5rem, 7vw, 7rem);

	/* ----------------------------------------------------------------------
	   LAYOUT
	   ---------------------------------------------------------------------- */

	--sd-larghezza:        1200px;  /* contenitore standard */
	--sd-larghezza-stretta: 760px;  /* testo lungo: ~75 caratteri per riga */
	--sd-larghezza-larga:  1440px;
	--sd-margine:          clamp(1.25rem, 5vw, 3rem);

	/* ----------------------------------------------------------------------
	   FORME
	   Raggi contenuti: il brand è "quadro elettrico", non app per bambini.
	   ---------------------------------------------------------------------- */

	--sd-raggio-sm:  6px;
	--sd-raggio:     12px;
	--sd-raggio-lg:  20px;
	--sd-raggio-pill: 999px;

	/* Ombre bluastre, coerenti col navy: le ombre nere sporcano */
	--sd-ombra-sm: 0 1px 2px rgba(2, 27, 58, 0.06), 0 2px 6px rgba(2, 27, 58, 0.05);
	--sd-ombra:    0 4px 12px rgba(2, 27, 58, 0.08), 0 12px 28px rgba(2, 27, 58, 0.07);
	--sd-ombra-lg: 0 8px 24px rgba(2, 27, 58, 0.10), 0 24px 60px rgba(2, 27, 58, 0.10);
	--sd-ombra-cta: 0 6px 20px rgba(214, 28, 106, 0.32);

	/* ----------------------------------------------------------------------
	   MOVIMENTO
	   ---------------------------------------------------------------------- */

	--sd-transizione:       180ms cubic-bezier(0.4, 0, 0.2, 1);
	--sd-transizione-lenta: 420ms cubic-bezier(0.4, 0, 0.2, 1);
	--sd-flusso-durata:     3.2s;  /* velocità del flusso di energia */

	/* Sopra questo livello sta solo il bottone WhatsApp */
	--sd-z-header:    100;
	--sd-z-menu:      200;
	--sd-z-flottante: 300;
}

/* --------------------------------------------------------------------------
   Chi ha chiesto meno movimento non deve vedere il flusso di energia animato.
   La preferenza si imposta a livello di sistema operativo: va rispettata.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	:root {
		--sd-transizione:       0ms;
		--sd-transizione-lenta: 0ms;
		--sd-flusso-durata:     0s;
	}
}