/* ==========================================================================
   STILE PRINCIPALE
   Indice
   1. Variabili: palette, caratteri, scala, spaziature
   2. Superfici (ogni sezione imposta i propri colori di testo e accento)
   3. Caratteri
   4. Base e tipografia
   5. Segni del sistema: mirino e trama
   6. Pulsanti e link
   7. Testata e navigazione
   8. Homepage
   9. Componenti delle pagine interne
   10. Guida
   11. Form
   12. Footer
   13. Utilità, anteprima, responsive, movimento
   ========================================================================== */


/* 1. VARIABILI ------------------------------------------------------------
   PALETTE (contrasti WCAG verificati)
   Notte 900   #0C2244  fondo principale      testo bianco 14.7:1, giallo 9.2:1
   Notte 950   #081830  testata, footer       testo bianco 16.5:1
   Notte 800   #13305C  superfici rialzate     testo bianco 12.2:1
   Cobalto     #1F47B0  una sezione forte      testo bianco 7.6:1, tenue #C9D6EE 5.5:1
   Nebbia      #E8EDF5  superficie chiara      inchiostro 13.5:1, cobalto 6.9:1
   Carta       #F8FAFD  superficie chiara      inchiostro 15.1:1, cobalto 7.8:1
   Giallo      #F3BE43  accento unico, solo su fondi blu (su chiaro 1.5:1: mai come testo)
   Sulle superfici chiare l'accento dei segni diventa il cobalto. */
:root {
    --notte-950: #081830;
    --notte-900: #0C2244;
    --notte-800: #13305C;
    --notte-700: #1B3D70;
    --cobalto: #1F47B0;
    --cobalto-scuro: #183A93;
    --nebbia: #E8EDF5;
    --carta: #F8FAFD;
    --bianco: #FFFFFF;

    --testo-chiaro: #F5F7FB;
    --tenue-chiaro: #A9BAD4;
    --inchiostro: #0C2244;
    --inchiostro-tenue: #4A5B7A;

    --giallo: #F3BE43;
    --giallo-chiaro: #F8D27A;
    --errore: #B3261E;

    /* Caratteri */
    --f-titoli: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --f-testo: "Public Sans", "Helvetica Neue", Arial, sans-serif;

    /* Scala tipografica: titoli leggeri e grandi, titoletti compatti e decisi */
    --t-micro: 0.75rem;
    --t-piccolo: 0.875rem;
    --t-base: 1.0625rem;
    --t-lead: clamp(1.125rem, 1.04rem + 0.4vw, 1.3rem);
    --t-h4: 1rem;
    --t-h3: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
    --t-h2-piccolo: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
    --t-h2: clamp(1.85rem, 1.3rem + 2.2vw, 3.1rem);
    --t-h1: clamp(2.35rem, 1.5rem + 3.4vw, 4.4rem);

    /* Spaziature */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4.5rem;
    --sezione: clamp(4.5rem, 3rem + 6vw, 8.5rem);
    --margine: clamp(1rem, 0.4rem + 2.8vw, 3rem);
    --larghezza: 78rem;
    --misura: 62ch;

    /* Forme: angoli netti ovunque, un solo valore */
    --raggio: 2px;

    /* Mirino: lunghezza dei bracci, spessore, colore */
    --mirino-braccio: 16px;
    --mirino-spessore: 2px;
    --mc: var(--giallo);

    --passo-trama: 22px;
    --altezza-testata: 4.5rem;
    --transizione: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* 2. SUPERFICI ------------------------------------------------------------
   Ogni superficie definisce: testo (--t), testo secondario (--t2), linee
   (--ln, --ln2), accento dei segni (--acc), superficie interna (--s2).
   Default: fondo blu notte. */
body {
    --t: var(--testo-chiaro);
    --t2: var(--tenue-chiaro);
    --ln: rgba(245, 247, 251, 0.14);
    --ln2: rgba(245, 247, 251, 0.3);
    --acc: var(--giallo);
    --s2: var(--notte-800);
    --punto: rgba(245, 247, 251, 0.26);
}

.sezione { padding-block: var(--sezione); background: var(--notte-900); color: var(--t); }
.sezione--profonda { background: var(--notte-950); }

.sezione--cobalto {
    background: var(--cobalto);
    --t2: #C9D6EE;
    --ln: rgba(245, 247, 251, 0.2);
    --ln2: rgba(245, 247, 251, 0.38);
    --s2: var(--cobalto-scuro);
}

.sezione--chiara,
.sezione--carta {
    --t: var(--inchiostro);
    --t2: var(--inchiostro-tenue);
    --ln: #D3DBE8;
    --ln2: #A9B6CB;
    --acc: var(--cobalto);
    --s2: var(--bianco);
    --punto: rgba(12, 34, 68, 0.16);
    color: var(--t);
}
.sezione--chiara { background: var(--nebbia); }
.sezione--carta { background: var(--carta); --s2: var(--nebbia); }

.sezione--stretta { padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); }
.sezione--filo { border-top: 1px solid var(--ln); }


/* 3. CARATTERI (in assets/fonts, licenza OFL) ----------------------------- */
@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-var.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Public Sans";
    src: url("../fonts/public-sans-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Public Sans";
    src: url("../fonts/public-sans-var-italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}


/* 4. BASE E TIPOGRAFIA ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--altezza-testata) + 1rem);
}

body {
    margin: 0;
    background: var(--notte-900);
    color: var(--t);
    font-family: var(--f-testo);
    font-size: var(--t-base);
    line-height: 1.65;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; }
.sezione--chiara :focus-visible,
.sezione--carta :focus-visible { outline-color: var(--cobalto); }

::selection { background: var(--giallo); color: var(--notte-950); }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--f-titoli);
    color: var(--t);
    text-wrap: balance;
}

/* Titolo di pagina: grande e leggero */
h1 {
    font-size: var(--t-h1);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.032em;
    max-width: 16ch;
}

/* Titolo di sezione: una dichiarazione, peso leggero */
h2 {
    font-size: var(--t-h2);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.026em;
    max-width: 20ch;
}

/* Titoletti: più piccoli, più decisi */
h3 {
    font-size: var(--t-h3);
    font-weight: 560;
    line-height: 1.28;
    letter-spacing: -0.008em;
}
h4 { font-size: var(--t-h4); font-weight: 600; line-height: 1.35; }

/* Parte di un titolo in tono secondario */
.attenuato { color: var(--t2); }

p { max-width: var(--misura); text-wrap: pretty; }

.testo-grande {
    font-size: var(--t-lead);
    line-height: 1.5;
    font-weight: 360;
    color: var(--t2);
    max-width: 52ch;
}

.tenue { color: var(--t2); }

/* Etichetta: solo in apertura di pagina, una per pagina */
.etichetta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--s-5);
    font-family: var(--f-titoli);
    font-stretch: 118%;
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--t2);
}
.etichetta::before {
    content: "";
    width: 10px;
    height: 10px;
    --mirino-braccio: 4px;
    --mirino-spessore: 1.5px;
    --mc: var(--acc);
    background: var(--mirino-sfondo);
    background-repeat: no-repeat;
}

.flusso > * + * { margin-top: var(--s-4); }
.flusso > h2 + * { margin-top: var(--s-5); }
.flusso > * + h2 { margin-top: var(--s-8); }
.flusso > * + h3 { margin-top: var(--s-6); }
.flusso ul:not([class]),
.flusso ol:not([class]) { padding-left: 1.25rem; max-width: var(--misura); }
.flusso li + li { margin-top: var(--s-2); }
.flusso li::marker { color: var(--acc); }
.flusso ol:not([class]) li::marker { font-family: var(--f-titoli); font-weight: 600; }

strong { font-weight: 640; }

code {
    font-size: 0.88em;
    background: rgba(127, 145, 175, 0.18);
    padding: 0.08em 0.35em;
    border-radius: var(--raggio);
}


/* 5. SEGNI DEL SISTEMA ----------------------------------------------------
   MIRINO: quattro angoli che inquadrano un elemento. È il segno del brand
   finché non esiste un logo definitivo, e funziona con qualunque nome.
   Si disegna con --mirino-sfondo, ricalcolato su ogni elemento così che
   --mc, --mirino-braccio e --mirino-spessore si possano cambiare localmente.
   TRAMA: campo di punti regolare, usato solo in hero e form. */
*, *::before, *::after {
    --mirino-sfondo:
        linear-gradient(var(--mc) 0 0) 0 0 / var(--mirino-braccio) var(--mirino-spessore),
        linear-gradient(var(--mc) 0 0) 0 0 / var(--mirino-spessore) var(--mirino-braccio),
        linear-gradient(var(--mc) 0 0) 100% 0 / var(--mirino-braccio) var(--mirino-spessore),
        linear-gradient(var(--mc) 0 0) 100% 0 / var(--mirino-spessore) var(--mirino-braccio),
        linear-gradient(var(--mc) 0 0) 0 100% / var(--mirino-braccio) var(--mirino-spessore),
        linear-gradient(var(--mc) 0 0) 0 100% / var(--mirino-spessore) var(--mirino-braccio),
        linear-gradient(var(--mc) 0 0) 100% 100% / var(--mirino-braccio) var(--mirino-spessore),
        linear-gradient(var(--mc) 0 0) 100% 100% / var(--mirino-spessore) var(--mirino-braccio);
}

.trama {
    background-image: radial-gradient(circle, var(--punto) 1.3px, transparent 1.8px);
    background-size: var(--passo-trama) var(--passo-trama);
    background-position: calc(var(--passo-trama) / -2) calc(var(--passo-trama) / -2);
}


/* 6. PULSANTI E LINK ------------------------------------------------------ */
a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: var(--acc);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    transition: text-decoration-color var(--transizione), color var(--transizione);
}
a:hover { text-decoration-thickness: 2px; }
.sezione--chiara a:not(.pulsante),
.sezione--carta a:not(.pulsante) { text-decoration-color: rgba(31, 71, 176, 0.55); }
.sezione--chiara a:not(.pulsante):hover,
.sezione--carta a:not(.pulsante):hover { color: var(--cobalto); text-decoration-color: var(--cobalto); }

.pulsante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 3.1rem;
    padding: 0.8rem 1.35rem;
    border: 1px solid var(--giallo);
    border-radius: var(--raggio);
    background: var(--giallo);
    color: var(--notte-950);
    font-family: var(--f-titoli);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transizione), border-color var(--transizione), transform var(--transizione);
}
.pulsante::after { content: "\2192"; font-weight: 400; transition: transform var(--transizione); }
.pulsante:hover { background: var(--giallo-chiaro); border-color: var(--giallo-chiaro); }
.pulsante:hover::after { transform: translateX(3px); }
.pulsante:active { transform: translateY(1px); }

.pulsante--piccolo { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.9375rem; }
.pulsante--piccolo::after { display: none; }

.pulsante--secondario { background: transparent; border-color: var(--ln2); color: var(--t); }
.pulsante--secondario::after { display: none; }
.pulsante--secondario:hover { background: rgba(245, 247, 251, 0.07); border-color: var(--t); }

/* Rimando testuale verso un'altra pagina */
.rimando {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
    font-family: var(--f-titoli);
    font-weight: 560;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--acc);
}
.rimando::after { content: "\2192"; transition: transform var(--transizione); }
.rimando:hover::after { transform: translateX(4px); }

.azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    margin-top: var(--s-6);
}


/* 7. TESTATA E NAVIGAZIONE ------------------------------------------------ */
.salta {
    position: absolute;
    left: var(--s-4);
    top: -100px;
    z-index: 100;
    padding: var(--s-3) var(--s-4);
    background: var(--giallo);
    color: var(--notte-950);
    font-weight: 650;
    border-radius: var(--raggio);
}
.salta:focus { top: var(--s-4); }

.barra-anteprima {
    background: var(--giallo);
    color: var(--notte-950);
    font-size: var(--t-piccolo);
    line-height: 1.45;
    padding-block: 0.55rem;
}
.barra-anteprima code { background: rgba(8, 24, 48, 0.1); }

.testata {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--notte-950);
    border-bottom: 1px solid rgba(245, 247, 251, 0.1);
}
.testata__riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    min-height: var(--altezza-testata);
}

/* Marchio provvisorio: segno a mirino + nome in versione larga.
   Quando esisterà il logo definitivo si sostituisce questo blocco. */
.marchio {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--testo-chiaro);
    text-decoration: none;
    flex-shrink: 0;
}
.marchio__segno {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    --mirino-braccio: 6px;
    --mirino-spessore: 2px;
    --mc: var(--giallo);
    background: var(--mirino-sfondo);
    background-repeat: no-repeat;
}
.marchio__segno::after {
    content: "";
    position: absolute;
    inset: 6.5px;
    background: var(--testo-chiaro);
}
.marchio__nome {
    font-family: var(--f-titoli);
    font-stretch: 118%;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.navigazione__lista { display: flex; align-items: center; gap: var(--s-1); }

.navigazione a:not(.pulsante),
.navigazione__servizi {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.8rem;
    color: var(--testo-chiaro);
    font-family: var(--f-testo);
    font-size: 0.9375rem;
    font-weight: 450;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}
.navigazione a:not(.pulsante):hover,
.navigazione__servizi:hover { color: var(--giallo); }

/* Voce attiva: sottolineatura corta e precisa */
.navigazione a[aria-current="page"]:not(.pulsante)::after,
.navigazione__servizi.is-attivo::after {
    content: "";
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: 0.45rem;
    height: 2px;
    background: var(--giallo);
}
.navigazione__servizi.is-attivo::after { right: 1.9rem; }

.navigazione__freccia {
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.55rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transizione);
}
.navigazione__servizi[aria-expanded="true"] .navigazione__freccia { transform: translateY(1px) rotate(-135deg); }

.navigazione__gruppo { position: relative; }

.sottomenu {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    min-width: 16rem;
    padding: var(--s-2) 0;
    background: var(--notte-900);
    border: 1px solid rgba(245, 247, 251, 0.14);
    border-top: 2px solid var(--giallo);
    box-shadow: 0 24px 48px rgba(3, 10, 24, 0.5);
    display: none;
}
.sottomenu a:not(.pulsante) { display: flex; width: 100%; padding: 0 1rem; }
.sottomenu a[aria-current="page"]:not(.pulsante)::after { left: 1rem; right: auto; width: 1.5rem; }

html:not(.js) .navigazione__gruppo:hover .sottomenu,
html:not(.js) .navigazione__gruppo:focus-within .sottomenu,
.navigazione__servizi[aria-expanded="true"] + .sottomenu { display: block; }

.navigazione__cta { margin-left: var(--s-4); }

.menu-apri {
    display: none;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    padding: 0 0.9rem;
    background: transparent;
    color: var(--testo-chiaro);
    border: 1px solid rgba(245, 247, 251, 0.3);
    border-radius: var(--raggio);
    font: 560 0.9375rem var(--f-titoli);
    cursor: pointer;
}
.menu-apri__linee,
.menu-apri__linee::before,
.menu-apri__linee::after {
    display: block;
    width: 1.1rem;
    height: 1.5px;
    background: currentColor;
    position: relative;
    transition: transform var(--transizione), background-color var(--transizione);
}
.menu-apri__linee::before,
.menu-apri__linee::after { content: ""; position: absolute; left: 0; }
.menu-apri__linee::before { top: -6px; }
.menu-apri__linee::after { top: 6px; }
.menu-apri[aria-expanded="true"] .menu-apri__linee { background: transparent; }
.menu-apri[aria-expanded="true"] .menu-apri__linee::before { transform: translateY(6px) rotate(45deg); }
.menu-apri[aria-expanded="true"] .menu-apri__linee::after { transform: translateY(-6px) rotate(-45deg); }


/* 8. HOMEPAGE ------------------------------------------------------------- */

/* Hero: testo a sinistra, messa a fuoco a destra */
.hero {
    position: relative;
    padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
    padding-bottom: clamp(3.5rem, 2rem + 5vw, 6.5rem);
    overflow: hidden;
}
.hero__griglia {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
.hero h1 { font-size: clamp(2.35rem, 1.55rem + 3vw, 4.15rem); max-width: 15ch; }
.hero .testo-grande { margin-top: var(--s-5); max-width: 40ch; }
.hero .azioni { margin-top: var(--s-7); }

/* Messa a fuoco: trama di punti, un riquadro, un punto scelto.
   Il riquadro è allineato alla trama: le coordinate sono multipli del passo. */
.fuoco {
    position: relative;
    width: 100%;
    max-width: calc(var(--passo-trama) * 20);
    height: calc(var(--passo-trama) * 22);
    justify-self: end;
    --passo-trama: 24px;
}
.fuoco .trama {
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 55% 50%, #000 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 70% at 55% 50%, #000 45%, transparent 100%);
}
.fuoco__riquadro {
    position: absolute;
    left: calc(var(--passo-trama) * 8.5);
    top: calc(var(--passo-trama) * 9.5);
    width: calc(var(--passo-trama) * 4);
    height: calc(var(--passo-trama) * 4);
    --mirino-braccio: 18px;
    --mirino-spessore: 2px;
    --mc: var(--giallo);
    background: var(--mirino-sfondo);
    background-repeat: no-repeat;
    transform-origin: 50% 50%;
}
/* I punti dentro il riquadro cadono sugli incroci della trama */
.fuoco__punto {
    position: absolute;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--testo-chiaro);
}
.fuoco__punto:nth-child(1) { left: calc(var(--passo-trama) * 0.5); top: calc(var(--passo-trama) * 1.5); }
.fuoco__punto:nth-child(2) { left: calc(var(--passo-trama) * 2.5); top: calc(var(--passo-trama) * 0.5); }
.fuoco__punto:nth-child(3) { left: calc(var(--passo-trama) * 3.5); top: calc(var(--passo-trama) * 3.5); }
.fuoco__punto--scelto,
.fuoco__punto--scelto:nth-child(n) {
    left: calc(var(--passo-trama) * 1.5);
    top: calc(var(--passo-trama) * 2.5);
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    background: var(--giallo);
    box-shadow: 0 0 0 6px rgba(243, 190, 67, 0.14);
}
/* Il percorso della richiesta scelta, fino al bordo */
.fuoco__linea {
    position: absolute;
    left: calc(var(--passo-trama) * 10);
    top: calc(var(--passo-trama) * 12);
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(243, 190, 67, 0.7), rgba(243, 190, 67, 0));
}

@media (prefers-reduced-motion: no-preference) {
    .fuoco__riquadro { animation: fuoco-stringi 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) 250ms both; }
    .fuoco__punto--scelto { animation: fuoco-compari 500ms ease-out 1150ms both; }
    .fuoco__linea { animation: fuoco-compari 600ms ease-out 1400ms both; }
}
@keyframes fuoco-stringi {
    from { transform: scale(2.1); opacity: 0; }
    35% { opacity: 1; }
    to { transform: none; opacity: 1; }
}
@keyframes fuoco-compari {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Il problema: dichiarazione ampia e tre situazioni sfalsate */
.dichiarazione h2 { max-width: 22ch; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem); }
.situazioni {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6) clamp(1.5rem, 3.5vw, 3.5rem);
    margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}
.situazioni > div { padding-top: var(--s-5); border-top: 1px solid var(--ln2); }
.situazioni > div:nth-child(2) { margin-top: var(--s-7); }
.situazioni > div:nth-child(3) { margin-top: calc(var(--s-7) * 2); }
.situazioni h3 { margin-bottom: var(--s-3); max-width: 22ch; }
.situazioni p { color: var(--t2); font-size: 1rem; }

/* Autonomo e SCF: due profili affiancati, aspetti in griglia 2 x 2 */
.modelli { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.modelli__schede { display: none; }
.modelli__pannelli {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto repeat(4, auto);
    column-gap: var(--s-5);
}
/* Ogni profilo usa le righe della griglia comune (subgrid): intestazioni e
   aspetti restano allineati tra i due profili e si confrontano riga per riga. */
.modello {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    padding: clamp(1.75rem, 1.1rem + 2.2vw, 3.25rem);
    padding-bottom: clamp(1rem, 0.6rem + 1vw, 1.75rem);
}
/* Sopra i 900px entrambi i profili restano visibili anche se una scheda li nasconde */
.modello[hidden] { display: grid; }
.modello--autonomo {
    background: var(--nebbia);
    --t: var(--inchiostro);
    --t2: var(--inchiostro-tenue);
    --ln: #C9D3E3;
    --acc: var(--cobalto);
    color: var(--t);
}
.modello--scf {
    background: var(--cobalto);
    --t2: #D2DDF1;
    --ln: rgba(245, 247, 251, 0.24);
}
.modello__intestazione {
    display: grid;
    align-content: start;
    gap: var(--s-3);
    padding-bottom: var(--s-6);
}
.modello h3 {
    font-size: var(--t-h2-piccolo);
    font-weight: 450;
    letter-spacing: -0.02em;
    line-height: 1.12;
}
.modello__intestazione p { color: var(--t2); font-size: 1rem; }
.modello dl {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
}
.modello dl > div {
    padding-block: var(--s-5);
    border-top: 1px solid var(--ln);
}
.modello dt {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--f-titoli);
    font-weight: 600;
    font-size: 1rem;
    color: var(--t);
    margin-bottom: 0.45rem;
}
.modello dt::before {
    content: "";
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    --mirino-braccio: 4px;
    --mirino-spessore: 1.5px;
    --mc: var(--acc);
    background: var(--mirino-sfondo);
    background-repeat: no-repeat;
}
.modello dd { margin: 0; padding-left: calc(9px + 0.55rem); font-size: 1rem; line-height: 1.6; color: var(--t2); max-width: 48ch; }

/* Servizi: indice editoriale, l'intera riga è cliccabile */
.servizi { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); border-top: 1px solid var(--ln2); }
.servizio {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    gap: var(--s-4) clamp(1.5rem, 3.5vw, 3.5rem);
    padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem) var(--s-4);
    margin-inline: calc(-1 * var(--s-4));
    border-bottom: 1px solid var(--ln);
    transition: background-color var(--transizione);
}
.servizio h3 {
    font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.35rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.06;
}
.servizio h3 a { text-decoration: none; }
.servizio h3 a::after {
    content: "\2192";
    display: inline-block;
    margin-left: 0.35em;
    font-size: 0.7em;
    color: var(--acc);
    transition: transform var(--transizione);
}
.servizio:hover h3 a::after { transform: translateX(5px); }
.servizio h3 a::before { content: ""; position: absolute; inset: 0; }
.servizio h3 a:focus-visible { outline: none; }
.servizio:has(a:focus-visible) { outline: 3px solid var(--acc); outline-offset: -3px; }
.servizio > p:first-of-type { font-size: 1.0625rem; }
.servizio__quando {
    position: relative;
    padding-left: var(--s-5);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--t2);
}
.servizio__quando::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 10px;
    height: 10px;
    --mirino-braccio: 4px;
    --mirino-spessore: 1.5px;
    --mc: var(--acc);
    background: var(--mirino-sfondo);
    background-repeat: no-repeat;
}
.servizio__quando strong {
    display: block;
    font-family: var(--f-titoli);
    font-weight: 600;
    color: var(--t);
    margin-bottom: 0.15rem;
}
.sezione--carta .servizio:hover { background: var(--nebbia); }

/* Misurazione su cobalto */
.misura {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5.5rem);
    align-items: start;
}
.misura .tabella-scorri { margin-top: 0; }

/* Metodo in breve: scala ascendente */
.scala {
    margin-top: clamp(3rem, 2rem + 3vw, 5rem);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s-5);
    align-items: start;
    counter-reset: fase;
}
.scala li {
    counter-increment: fase;
    position: relative;
    padding-top: var(--s-5);
    border-top: 2px solid var(--ln2);
}
.scala li:nth-child(1) { margin-top: calc(var(--s-6) * 4); }
.scala li:nth-child(2) { margin-top: calc(var(--s-6) * 3); }
.scala li:nth-child(3) { margin-top: calc(var(--s-6) * 2); }
.scala li:nth-child(4) { margin-top: var(--s-6); }
.scala li:last-child { border-top-color: var(--acc); }
.scala li::before {
    content: counter(fase);
    display: block;
    font-family: var(--f-titoli);
    font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--acc);
    margin-bottom: var(--s-4);
}
.scala h3 { margin-bottom: var(--s-2); }
.scala p { font-size: 0.9688rem; line-height: 1.55; color: var(--t2); }

/* Due colonne: titolo e contenuto */
.colonne {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}
.colonne--inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

/* Elenco di condizioni con segno a mirino */
.condizioni { display: grid; gap: 0; }
.condizioni li {
    position: relative;
    padding: var(--s-4) 0 var(--s-4) calc(var(--s-5) + 6px);
    border-top: 1px solid var(--ln);
}
.condizioni li:last-child { border-bottom: 1px solid var(--ln); }
.condizioni li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--s-4) + 0.42em);
    width: 11px;
    height: 11px;
    --mirino-braccio: 4px;
    --mirino-spessore: 1.5px;
    --mc: var(--acc);
    background: var(--mirino-sfondo);
    background-repeat: no-repeat;
}

/* Domande frequenti */
.domande-griglia {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.domande { border-top: 1px solid var(--ln2); }
.domanda { border-bottom: 1px solid var(--ln); }
.domanda summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-5);
    padding-block: var(--s-5);
    cursor: pointer;
    list-style: none;
    font-family: var(--f-titoli);
    font-weight: 500;
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background:
        linear-gradient(var(--acc) 0 0) 50% 50% / 12px 1.5px,
        linear-gradient(var(--acc) 0 0) 50% 50% / 1.5px 12px;
    background-repeat: no-repeat;
    transition: transform var(--transizione);
}
.domanda[open] summary::after { transform: rotate(45deg); }
.domanda summary:hover { color: var(--acc); }
.domanda__risposta { padding-bottom: var(--s-5); color: var(--t2); max-width: 60ch; }
.domanda__risposta p + p { margin-top: var(--s-3); }


/* 9. PAGINE INTERNE ------------------------------------------------------- */

/* Apertura: titolo a sinistra, sintesi incorniciata a destra */
.apertura {
    padding-top: clamp(3rem, 2rem + 4vw, 6rem);
    padding-bottom: clamp(3.5rem, 2rem + 5vw, 6.5rem);
}
.apertura h1 { max-width: 17ch; }
.apertura .testo-grande { margin-top: var(--s-5); }

.apertura--doppia {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2.5rem, 6vw, 6.5rem);
    align-items: end;
}

.sintesi {
    position: relative;
    margin: 8px;
    padding: var(--s-5);
    background: var(--notte-800);
}
.sintesi::after {
    content: "";
    position: absolute;
    inset: -8px;
    pointer-events: none;
    --mc: var(--giallo);
    background: var(--mirino-sfondo);
    background-repeat: no-repeat;
}
.sintesi h2 {
    font-size: var(--t-micro);
    font-stretch: 118%;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--tenue-chiaro);
    max-width: none;
    margin-bottom: var(--s-4);
}
.sintesi ul { display: grid; gap: var(--s-3); list-style: none; padding: 0; }
.sintesi li {
    position: relative;
    padding-left: 1.2rem;
    font-size: 0.9688rem;
    line-height: 1.5;
    color: var(--testo-chiaro);
}
.sintesi li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    background: var(--giallo);
}

/* Nota a margine (consulenti delle reti, avvertenze) */
.nota {
    margin-top: var(--s-7);
    padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6);
    border-left: 2px solid var(--acc);
    background: var(--s2);
    max-width: 54rem;
}
.nota h2,
.nota h3 { font-size: 1.125rem; font-weight: 580; letter-spacing: -0.01em; margin-bottom: var(--s-2); max-width: 44ch; }
.nota p { color: var(--t2); font-size: 1rem; }
.nota p + p { margin-top: var(--s-3); }

.fonti {
    font-size: var(--t-piccolo);
    line-height: 1.55;
    color: var(--t2);
    margin-top: var(--s-4);
}
.fonti a { color: inherit; }

/* Ricerche di esempio */
.ricerche {
    margin-top: var(--s-7);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5) clamp(2rem, 4vw, 4rem);
}
.ricerca { padding: var(--s-5) 0 var(--s-3); border-top: 1px solid var(--ln2); }
.ricerca__query {
    font-family: var(--f-titoli);
    font-weight: 450;
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--t);
}
.ricerca__query::before { content: "\201C"; color: var(--acc); margin-right: 0.05em; }
.ricerca__query::after { content: "\201D"; color: var(--acc); margin-left: 0.05em; }
.ricerca p:not(.ricerca__query) { margin-top: var(--s-3); font-size: 0.9688rem; color: var(--t2); }
.ricerca--ampia {
    grid-column: 1 / -1;
    margin-top: var(--s-4);
    padding: var(--s-5);
    border: 1px dashed var(--ln2);
}
.ricerca--ampia .ricerca__query { text-decoration: line-through; text-decoration-color: var(--acc); text-decoration-thickness: 1.5px; }

/* Tabelle */
.tabella-scorri { overflow-x: auto; margin-top: var(--s-6); }
.tabella { width: 100%; border-collapse: collapse; font-size: 0.9688rem; min-width: 36rem; }
.tabella th,
.tabella td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-5) var(--s-4) 0; line-height: 1.5; }
.tabella thead th {
    font-family: var(--f-titoli);
    font-stretch: 118%;
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t2);
    border-bottom: 1px solid var(--ln2);
    padding-bottom: var(--s-3);
}
.tabella tbody th { font-family: var(--f-titoli); font-weight: 560; width: 28%; color: var(--t); }
.tabella tbody td { color: var(--t2); }
.tabella tbody tr + tr > * { border-top: 1px solid var(--ln); }

/* Tempi: tre fasi su una linea, l'ultima evidenziata */
.tempi {
    margin-top: var(--s-7);
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.6fr;
}
.tempi > div { padding: var(--s-5) var(--s-5) 0 0; border-top: 2px solid var(--ln2); }
.tempi > div + div { padding-left: var(--s-5); }
.tempi > div:last-child { border-top-color: var(--acc); }
.tempi p { margin-top: var(--s-2); font-size: 0.9688rem; color: var(--t2); }

/* Pannello di evidenza: riquadro incorniciato dal mirino */
.pannello-evidenza {
    position: relative;
    max-width: 56rem;
    margin: 10px;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--carta);
    color: var(--inchiostro);
    --t: var(--inchiostro);
    --t2: var(--inchiostro-tenue);
}
.pannello-evidenza::after {
    content: "";
    position: absolute;
    inset: -10px;
    pointer-events: none;
    --mc: var(--giallo);
    background: var(--mirino-sfondo);
    background-repeat: no-repeat;
}
.sezione--chiara .pannello-evidenza,
.sezione--carta .pannello-evidenza { background: var(--notte-900); color: var(--testo-chiaro); --t: var(--testo-chiaro); --t2: var(--tenue-chiaro); }
.pannello-evidenza h2,
.pannello-evidenza h3 { color: var(--t); font-size: var(--t-h2-piccolo); font-weight: 450; letter-spacing: -0.02em; max-width: none; }
.pannello-evidenza p { color: var(--t2); margin-top: var(--s-3); }

/* Componenti di un servizio: griglia a due colonne con segno */
.componenti {
    margin-top: var(--s-7);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) clamp(2rem, 5vw, 5rem);
}
.componenti > div { position: relative; padding-left: calc(var(--s-5) + 6px); }
.componenti > div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 12px;
    height: 12px;
    --mirino-braccio: 5px;
    --mirino-spessore: 1.5px;
    --mc: var(--acc);
    background: var(--mirino-sfondo);
    background-repeat: no-repeat;
}
.componenti p { margin-top: var(--s-2); color: var(--t2); font-size: 1rem; }

/* Fasi (lead generation e metodo) */
.fasi { margin-top: var(--s-7); display: grid; counter-reset: passo; }
.fase {
    counter-increment: passo;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr);
    gap: var(--s-4) clamp(1.5rem, 3.5vw, 3.5rem);
    padding-block: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    border-top: 1px solid var(--ln);
}
.fase:last-child { border-bottom: 1px solid var(--ln); }
.fase h3 {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    column-gap: var(--s-3);
    align-items: baseline;
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.12;
}
.fase h3::before {
    content: counter(passo);
    grid-row: 1 / span 2;
    font-weight: 300;
    font-size: 1.6em;
    line-height: 0.9;
    color: var(--acc);
}
.fase__verbo {
    display: block;
    font-family: var(--f-titoli);
    font-stretch: 118%;
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--t2);
    margin-bottom: var(--s-2);
}
.fase__dettaglio { font-size: 0.9688rem; color: var(--t2); padding-left: var(--s-5); border-left: 1px solid var(--ln); }
.fase__dettaglio h4 { color: var(--t); font-size: 0.9375rem; margin-bottom: var(--s-1); }
.fase__dettaglio h4 + p { margin-bottom: var(--s-4); }
.fase__dettaglio p:last-child { margin-bottom: 0; }

/* Imbuto dei contatti: quattro livelli che si stringono */
.imbuto { margin-top: var(--s-7); display: grid; gap: 6px; }
.imbuto__livello {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--s-3) var(--s-6);
    align-items: center;
    padding: var(--s-4) var(--s-5);
    background: var(--notte-800);
}
.imbuto__livello:nth-child(2) { margin-right: 10%; background: var(--notte-700); }
.imbuto__livello:nth-child(3) { margin-right: 20%; background: var(--cobalto); --t2: #D2DDF1; }
.imbuto__livello:nth-child(4) {
    margin: 10px 30% 0 0;
    background: var(--carta);
    --t: var(--inchiostro);
    --t2: var(--inchiostro-tenue);
    color: var(--inchiostro);
}
.imbuto__livello:nth-child(4)::after {
    content: "";
    position: absolute;
    inset: -8px;
    --mc: var(--giallo);
    background: var(--mirino-sfondo);
    background-repeat: no-repeat;
    pointer-events: none;
}
.imbuto__livello h3 { font-size: 1.125rem; }
.imbuto__livello p { font-size: 0.9375rem; color: var(--t2); }

/* Scheda dati (chi siamo) */
.scheda {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    margin-top: var(--s-5);
    border-top: 1px solid var(--ln);
}
.scheda dt, .scheda dd { padding-block: var(--s-3); border-bottom: 1px solid var(--ln); margin: 0; }
.scheda dt { color: var(--t2); font-size: 0.9375rem; }

/* Pagine legali */
.legale { max-width: 46rem; }
.legale h2 { font-size: var(--t-h2-piccolo); font-weight: 450; max-width: none; }
.legale h3 { font-size: 1.0625rem; }
.legale .flusso > * + h2 { margin-top: var(--s-7); }


/* 10. GUIDA ---------------------------------------------------------------- */
.guida {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}
.indice { position: sticky; top: calc(var(--altezza-testata) + 2rem); font-size: 0.9375rem; }
.indice h2 {
    font-size: var(--t-micro);
    font-stretch: 118%;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--t2);
    margin-bottom: var(--s-4);
    max-width: none;
}
.indice ol { counter-reset: voce; list-style: none; padding: 0; margin: 0; }
.indice li { counter-increment: voce; }
.indice a {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    padding: 0.5rem 0;
    color: var(--t2);
    text-decoration: none;
    line-height: 1.4;
    border-top: 1px solid var(--ln);
}
.indice a::before { content: counter(voce); font-family: var(--f-titoli); }
.indice a:hover { color: var(--t); }
.indice a.is-attiva { color: var(--t); font-weight: 560; }
.indice a.is-attiva::before { color: var(--acc); }

.articolo { max-width: 42rem; }
.articolo > section + section { margin-top: var(--s-8); }
.articolo h2 { font-size: var(--t-h2-piccolo); font-weight: 450; letter-spacing: -0.02em; line-height: 1.15; max-width: 26ch; }
.articolo h2::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    margin-bottom: var(--s-4);
    --mirino-braccio: 5px;
    --mirino-spessore: 2px;
    --mc: var(--acc);
    background: var(--mirino-sfondo);
    background-repeat: no-repeat;
}
.articolo p, .articolo li { font-size: 1.0625rem; }

.in-pratica {
    margin-top: var(--s-6);
    padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6);
    background: var(--notte-900);
    color: var(--testo-chiaro);
    border-left: 2px solid var(--giallo);
}
.in-pratica h3 {
    font-size: var(--t-micro);
    font-stretch: 118%;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--giallo);
    margin-bottom: var(--s-3);
}
.in-pratica ul { padding-left: 1.1rem; }
.in-pratica li + li { margin-top: var(--s-2); }
.in-pratica li::marker { color: var(--giallo); }


/* 11. FORM ---------------------------------------------------------------- */
.richiesta { position: relative; overflow: hidden; }
.richiesta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(40%, 32rem);
    background-image: radial-gradient(circle, rgba(245, 247, 251, 0.13) 1.15px, transparent 1.6px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent);
    mask-image: linear-gradient(90deg, #000, transparent);
    pointer-events: none;
}
.richiesta__griglia {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}
.richiesta__intro h2 { font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.8rem); max-width: 16ch; }
.richiesta__intro > p { margin-top: var(--s-4); color: var(--t2); }
.richiesta__intro > p:first-of-type { font-size: var(--t-lead); font-weight: 360; line-height: 1.5; margin-top: var(--s-5); }
.richiesta__guida { font-weight: 600; color: var(--t) !important; margin-top: var(--s-7) !important; font-size: 0.9375rem; }
.richiesta__elenco { margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.richiesta__elenco li { position: relative; padding-left: 1.2rem; color: var(--t2); font-size: 0.9688rem; }
.richiesta__elenco li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    background: var(--acc);
}

.modulo {
    position: relative;
    margin: 10px;
    background: var(--bianco);
    color: var(--inchiostro);
    padding: clamp(1.35rem, 1rem + 2vw, 2.75rem);
    display: grid;
    gap: var(--s-5);
    box-shadow: 0 30px 60px -30px rgba(3, 10, 24, 0.6);
}
.modulo::after {
    content: "";
    position: absolute;
    inset: -10px;
    pointer-events: none;
    --mirino-braccio: 22px;
    --mc: var(--giallo);
    background: var(--mirino-sfondo);
    background-repeat: no-repeat;
}
.modulo :focus-visible { outline-color: var(--cobalto); }
.modulo a { color: var(--inchiostro); text-decoration-color: rgba(31, 71, 176, 0.55); }
.modulo a:hover { color: var(--cobalto); }
.modulo__coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }

.campo { display: grid; gap: var(--s-2); }
.campo label {
    font-family: var(--f-titoli);
    font-weight: 600;
    font-size: 0.9688rem;
    color: var(--inchiostro);
}
.campo input,
.campo textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem; /* minimo 16px: evita lo zoom automatico su iOS */
    color: var(--inchiostro);
    background: var(--carta);
    border: 1px solid #8193AD; /* 3.1:1 sul bianco */
    border-radius: var(--raggio);
    padding: 0.8rem 0.9rem;
    min-height: 3.1rem;
    transition: border-color var(--transizione), box-shadow var(--transizione), background-color var(--transizione);
}
.campo textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.campo input:hover,
.campo textarea:hover { border-color: var(--inchiostro-tenue); }
.campo input:focus-visible,
.campo textarea:focus-visible {
    outline: none;
    background: var(--bianco);
    border-color: var(--cobalto);
    box-shadow: 0 0 0 3px rgba(31, 71, 176, 0.25);
}
.campo__aiuto { font-size: var(--t-piccolo); color: var(--inchiostro-tenue); }
.campo__errore { font-size: var(--t-piccolo); font-weight: 600; color: var(--errore); }
.campo__errore:empty { display: none; }
.campo.ha-errore input,
.campo.ha-errore textarea { border-color: var(--errore); border-width: 2px; padding: calc(0.8rem - 1px) calc(0.9rem - 1px); }

.modulo__avviso {
    padding: var(--s-4);
    border-left: 3px solid var(--errore);
    background: #FBEDEB;
    color: var(--inchiostro);
    font-size: 0.9688rem;
}
.modulo__avviso:focus { outline: none; }
.modulo__avviso--ok { border-left-color: var(--cobalto); background: #EAF0FB; }
.modulo button[disabled] { opacity: 0.6; cursor: progress; }

/* Campo esca contro lo spam: fuori schermo, non raggiungibile da tastiera */
.campo-esca {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.modulo__privacy { font-size: var(--t-piccolo); color: var(--inchiostro-tenue); }
.modulo .pulsante { justify-self: start; }
.modulo__stato {
    font-size: var(--t-piccolo);
    color: var(--inchiostro-tenue);
    border-top: 1px dashed #C4CEDD;
    padding-top: var(--s-3);
}


/* 12. FOOTER -------------------------------------------------------------- */
.piede {
    background: var(--notte-950);
    padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
    padding-bottom: var(--s-6);
    font-size: 0.9375rem;
    border-top: 1px solid rgba(245, 247, 251, 0.08);
}
.piede__griglia {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: var(--s-7) clamp(1.5rem, 3vw, 3rem);
}
.piede__marchio p { margin-top: var(--s-5); color: var(--tenue-chiaro); max-width: 30ch; line-height: 1.55; }
.piede__titolo {
    font-size: var(--t-micro);
    font-stretch: 118%;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--tenue-chiaro);
    margin-bottom: var(--s-4);
    max-width: none;
}
.piede__colonna ul { display: grid; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.piede__colonna a { text-decoration: none; color: var(--testo-chiaro); }
.piede__colonna a:hover { color: var(--giallo); }
.piede__legale {
    margin-top: var(--s-8);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(245, 247, 251, 0.12);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-3) var(--s-6);
    font-size: var(--t-piccolo);
    color: var(--tenue-chiaro);
}
.piede__link-legali { display: flex; gap: var(--s-5); }
.piede__link-legali a { color: var(--tenue-chiaro); text-decoration-color: rgba(169, 186, 212, 0.5); }


/* BANNER DEI COOKIE ------------------------------------------------------
   Fisso in basso, non blocca la navigazione. "Rifiuta" e "Accetta tutti" hanno
   lo stesso aspetto: nessuna delle due scelte è suggerita. */
.consenso {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    max-height: 85dvh;
    overflow-y: auto;
    background: var(--notte-950);
    color: var(--testo-chiaro);
    border-top: 2px solid var(--giallo);
    box-shadow: 0 -18px 40px rgba(3, 10, 24, 0.45);
    padding-block: var(--s-5);
    font-size: 0.9375rem;
}
.consenso[hidden] { display: none; }
.consenso__riga {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-4) var(--s-7);
    align-items: center;
}
.consenso h2 {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    max-width: none;
    margin-bottom: var(--s-2);
}
.consenso p { color: var(--tenue-chiaro); max-width: 78ch; line-height: 1.55; }
.consenso a { color: var(--testo-chiaro); }
.consenso__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.consenso__pulsante {
    min-height: 2.75rem;
    min-width: 9.5rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--testo-chiaro);
    border-radius: var(--raggio);
    background: var(--testo-chiaro);
    color: var(--notte-950);
    font-family: var(--f-titoli);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transizione), border-color var(--transizione);
}
.consenso__pulsante:hover { background: var(--giallo); border-color: var(--giallo); }
.consenso__personalizza,
.piede__preferenze {
    min-height: 2.75rem;
    padding: 0 0.25rem;
    background: none;
    border: 0;
    color: var(--testo-chiaro);
    font: inherit;
    text-decoration: underline;
    text-decoration-color: var(--giallo);
    text-underline-offset: 0.22em;
    cursor: pointer;
}
.piede__preferenze { min-height: 0; padding: 0; color: var(--tenue-chiaro); font-size: var(--t-piccolo); text-decoration-color: rgba(169, 186, 212, 0.5); }
html:not(.js) .piede__preferenze { display: none; }
.consenso__preferenze {
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(245, 247, 251, 0.14);
}
.consenso__preferenze[hidden] { display: none; }
.consenso fieldset { border: 0; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-3); }
.consenso__voce {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: var(--s-3);
    align-items: start;
    color: var(--tenue-chiaro);
    cursor: pointer;
}
.consenso__voce strong { display: block; color: var(--testo-chiaro); font-family: var(--f-titoli); font-weight: 600; }
.consenso__voce input { width: 1.125rem; height: 1.125rem; margin: 0.2rem 0 0; accent-color: var(--giallo); }
.consenso__voce input:disabled { opacity: 0.6; }
.consenso__voce:has(input:disabled) { cursor: default; }

@media (max-width: 860px) {
    .consenso__riga { grid-template-columns: minmax(0, 1fr); }
    .consenso__azioni { display: grid; grid-template-columns: 1fr 1fr; }
    .consenso__pulsante { min-width: 0; width: 100%; }
    .consenso__personalizza { grid-column: 1 / -1; justify-self: center; }
}


/* 13. UTILITÀ, ANTEPRIMA, RESPONSIVE, MOVIMENTO --------------------------- */
.contenitore {
    width: 100%;
    max-width: var(--larghezza);
    margin-inline: auto;
    padding-inline: var(--margine);
}

.titolo-medio { font-size: var(--t-h2-piccolo); font-weight: 450; max-width: none; }
.senza-margine { margin-top: 0 !important; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }

.nota-anteprima {
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border: 1px dashed var(--giallo);
    font-size: var(--t-piccolo);
    color: var(--testo-chiaro);
    background: rgba(243, 190, 67, 0.08);
    max-width: var(--misura);
}
.sezione--chiara .nota-anteprima,
.sezione--carta .nota-anteprima { border-color: #8A6A10; color: var(--inchiostro); background: #FFF6DC; }

.solo-lettori {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* Desktop stretto e tablet */
@media (max-width: 1080px) {
    .js .menu-apri { display: inline-flex; }

    .navigazione { width: 100%; }
    .js .navigazione {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100dvh - var(--altezza-testata));
        overflow-y: auto;
        background: var(--notte-950);
        border-bottom: 1px solid rgba(245, 247, 251, 0.12);
        padding: var(--s-2) var(--margine) var(--s-6);
        display: none;
    }
    .js .navigazione.is-aperta { display: block; }
    html:not(.js) .testata__riga { flex-wrap: wrap; padding-block: var(--s-3); }

    .navigazione__lista { flex-direction: column; align-items: stretch; gap: 0; }
    .navigazione__lista > li { border-bottom: 1px solid rgba(245, 247, 251, 0.1); }
    .navigazione__lista > li.navigazione__cta { border-bottom: 0; }

    .navigazione a:not(.pulsante),
    .navigazione__servizi {
        width: 100%;
        min-height: 3.4rem;
        padding: 0;
        font-family: var(--f-titoli);
        font-size: 1.25rem;
        font-weight: 400;
        letter-spacing: -0.01em;
    }
    .navigazione__servizi { justify-content: space-between; }
    .navigazione a[aria-current="page"]:not(.pulsante)::after,
    .navigazione__servizi.is-attivo::after { display: none; }
    .navigazione a[aria-current="page"]:not(.pulsante),
    .navigazione__servizi.is-attivo { color: var(--giallo); }

    .sottomenu {
        position: static;
        min-width: 0;
        padding: 0 0 var(--s-3) var(--s-4);
        background: none;
        border: 0;
        box-shadow: none;
    }
    html:not(.js) .sottomenu { display: block; }
    .navigazione .sottomenu a:not(.pulsante) { min-height: 2.9rem; font-size: 1.0625rem; color: var(--tenue-chiaro); }
    .navigazione .sottomenu a[aria-current="page"]:not(.pulsante) { color: var(--giallo); }

    .navigazione__cta { margin: var(--s-5) 0 0; }
    .navigazione__cta .pulsante { width: 100%; min-height: 3.1rem; }

    .hero__griglia,
    .apertura--doppia,
    .colonne,
    .colonne--inverse,
    .misura,
    .domande-griglia,
    .richiesta__griglia,
    .guida { grid-template-columns: minmax(0, 1fr); }

    .apertura--doppia { align-items: start; }
    .apertura--doppia .sintesi { max-width: 32rem; }

    /* Messa a fuoco: fascia orizzontale sotto il testo */
    .fuoco { justify-self: stretch; max-width: none; height: calc(var(--passo-trama) * 8); --passo-trama: 22px; }
    .fuoco__riquadro { left: calc(var(--passo-trama) * 2.5); top: calc(var(--passo-trama) * 2.5); }
    .fuoco__linea { left: calc(var(--passo-trama) * 4); top: calc(var(--passo-trama) * 5); }
    .fuoco .trama {
        -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent);
        mask-image: linear-gradient(90deg, #000 35%, transparent);
    }

    .servizio,
    .fase { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .servizio > h3,
    .fase > h3 { grid-column: 1 / -1; }

    .situazioni > div:nth-child(n) { margin-top: 0; }

    .piede__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .piede__marchio { grid-column: 1 / -1; }

    .indice { position: static; }
    .indice ol { columns: 2; column-gap: var(--s-6); }
    .indice li { break-inside: avoid; }
}

/* Metodo in breve, fascia intermedia (721-1279px): cinque righe sfalsate a
   gradino, con numero, titolo e descrizione affiancati su una riga */
@media (max-width: 1279px) {
    .scala { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .scala li,
    .scala li:nth-child(n) {
        margin-top: 0;
        display: grid;
        grid-template-columns: 3rem minmax(0, 10.5rem) minmax(0, 1fr);
        column-gap: var(--s-5);
        align-items: baseline;
        padding-block: var(--s-5);
        border-top: 1px solid var(--ln2);
    }
    .scala li:nth-child(2) { margin-left: 4%; }
    .scala li:nth-child(3) { margin-left: 8%; }
    .scala li:nth-child(4) { margin-left: 12%; }
    .scala li:nth-child(5) { margin-left: 16%; border-top: 2px solid var(--acc); }
    .scala li::before { margin: 0; font-size: 2.4rem; }
    .scala h3 { margin: 0; }
    .scala p { max-width: 54ch; }
}

/* Autonomo / SCF: sotto i 900px un profilo alla volta, con due schede */
@media (max-width: 900px) {
    .js .modelli__schede {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-bottom: var(--s-4);
        border: 1px solid var(--ln2);
    }
    .modelli__scheda {
        min-height: 3rem;
        padding: 0.6rem 0.75rem;
        background: transparent;
        color: var(--t);
        border: 0;
        font-family: var(--f-titoli);
        font-size: 0.9688rem;
        font-weight: 560;
        line-height: 1.25;
        cursor: pointer;
    }
    .modelli__scheda[aria-selected="true"] { background: var(--nebbia); color: var(--inchiostro); }
    .modelli__scheda[aria-selected="true"][aria-controls="modello-scf"] { background: var(--cobalto); color: var(--testo-chiaro); }
    .modelli__pannelli { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--s-5); }
    .modello,
    .modello[hidden] { display: block; grid-row: auto; }
    .modello dl { display: block; }
    .js .modello[hidden] { display: none; }
}

/* Mobile */
@media (max-width: 720px) {
    .situazioni,
    .ricerche,
    .componenti,
    .tempi,
    .modulo__coppia,
    .servizio,
    .fase { grid-template-columns: minmax(0, 1fr); }

    /* Metodo in breve su mobile: elenco verticale, numero a sinistra */
    .scala li,
    .scala li:nth-child(n) {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        row-gap: var(--s-1);
        align-items: start;
    }
    .scala li::before { grid-row: 1 / span 2; font-size: 2.25rem; }
    .scala li:nth-child(2) { margin-left: 0.5rem; }
    .scala li:nth-child(3) { margin-left: 1rem; }
    .scala li:nth-child(4) { margin-left: 1.5rem; }
    .scala li:nth-child(5) { margin-left: 2rem; }

    .hero .azioni { margin-top: var(--s-6); }
    .azioni .pulsante { width: 100%; }
    .modulo .pulsante { justify-self: stretch; }

    .tempi > div,
    .tempi > div + div { padding: var(--s-5) 0; }

    .fase__dettaglio { padding-left: 0; border-left: 0; padding-top: var(--s-3); border-top: 1px dashed var(--ln); }
    .fase h3 { grid-template-columns: 2.2rem minmax(0, 1fr); }

    .imbuto__livello { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
    .imbuto__livello:nth-child(2) { margin-right: 5%; }
    .imbuto__livello:nth-child(3) { margin-right: 10%; }
    .imbuto__livello:nth-child(4) { margin-right: 15%; }

    .scheda { grid-template-columns: minmax(0, 1fr); }
    .scheda dt { border-bottom: 0; padding-bottom: 0; }

    .indice ol { columns: 1; }

    .piede__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); }

    .richiesta::before {
        width: 100%;
        height: 14rem;
        bottom: auto;
        -webkit-mask-image: linear-gradient(180deg, #000, transparent);
        mask-image: linear-gradient(180deg, #000, transparent);
    }

    /* Tabelle: ogni riga diventa una scheda con le etichette delle colonne */
    .tabella { min-width: 0; }
    .tabella thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tabella tr, .tabella th, .tabella td { display: block; width: auto; padding: 0; }
    .tabella tbody tr { padding-block: var(--s-4); }
    .tabella tbody tr + tr > * { border-top: 0; }
    .tabella tbody tr + tr { border-top: 1px solid var(--ln); }
    .tabella tbody th { width: auto; margin-bottom: var(--s-2); font-size: 1.0625rem; }
    .tabella td + td { margin-top: var(--s-2); }
    .tabella td[data-etichetta]::before {
        content: attr(data-etichetta);
        display: block;
        margin-bottom: 0.1rem;
        font-family: var(--f-titoli);
        font-stretch: 118%;
        font-size: var(--t-micro);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--t);
        opacity: 0.8;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

@media print {
    .testata, .barra-anteprima, .richiesta, .piede, .fuoco { display: none; }
    body { background: #fff; color: #000; }
}