/* Foglio di stile delle pagine documento: servizi e guide.
   La home a canvas NON usa questo file e resta autonoma.

   I token qui sotto sono duplicati da index.html, che resta la fonte di
   verita'. La duplicazione evita di aggiungere una richiesta bloccante alla
   home; tests/pages-shared-system.test.cjs verifica che i valori non divergano. */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/astramente/font/Montserrat-Variable-latin.woff2") format("woff2");
  font-style: normal; font-weight: 100 900; font-display: swap;
}

:root {
  --purple:        #3D348B;
  --purple-soft:   #7174B7;
  --accent:        #F5B819;
  --accent-warm:   #F08721;
  --accent-hot:    #F15D22;
  --brand-dark:    #120C19;
  --brand-light:   #E8EAFF;

  --ink:      var(--brand-light);
  --muted:    rgba(232,234,255,.68);
  /* Misurato sul fondo #120C19: a .46 il contrasto era 4.11, sotto la soglia
     AA di 4.5 per il testo piccolo. Il token e' usato dal pie' di pagina e
     dalle briciole di pane, cioe' testo di 14px. */
  --faint:    rgba(232,234,255,.60);
  --rule:     rgba(232,234,255,.13);
  --amber:    var(--accent);

  --fs-h1:    clamp(32px, 2.4vw + 22px, 52px);
  --fs-h2:    clamp(24px, 1.1vw + 19px, 33px);
  --fs-h3:    clamp(18px, 0.4vw + 16.5px, 21px);
  --fs-body:  clamp(16px, 0.3vw + 15px, 18px);
  --fs-micro: clamp(12px, 0.19vw + 11.3px, 14px);

  /* Colonna di lettura. L'unita' ch misura lo zero, che in Montserrat e' molto
     piu' largo del carattere medio: 68ch producevano 91 caratteri per riga,
     oltre il limite leggibile di 75. Misurato nel browser, 52ch ne danno 70. */
  --page-measure: 52ch;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* WebKit su mobile disegna un rettangolo azzurro su tutto cio' che si tocca,
   scelto da lui e fuori dalla nostra tavolozza. La proprieta' si eredita,
   quindi dichiararla su html la toglie ovunque.

   Toglierla e basta lascerebbe pero' il tocco senza risposta, e
   un'interfaccia che non reagisce sembra rotta: al suo posto cio' che si
   tocca si attenua finche' il dito resta giu'. Senza transizione di
   proposito: molti elementi ne dichiarano gia' una propria su altre
   proprieta', e aggiungerne una qui la farebbe valere solo su alcuni. Un
   riscontro immediato e uguale ovunque batte una dissolvenza a meta'. */
html { -webkit-tap-highlight-color: transparent; }

a:active,
button:active,
summary:active { opacity: .62; }

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

body {
  position: relative;
  margin: 0;
  background: var(--brand-dark);
  color: var(--ink);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Atmosfera: campo stellare e nebulose in sole due sovrapposizioni fisse.
   Suggerisce il mondo della home senza canvas, senza script e senza costo. */
body::before {
  position: fixed; inset: 0; z-index: -2; content: ""; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(232,234,255,.55), transparent),
    radial-gradient(1px 1px at 62% 12%, rgba(232,234,255,.42), transparent),
    radial-gradient(1.2px 1.2px at 84% 38%, rgba(255,214,132,.38), transparent),
    radial-gradient(1px 1px at 34% 64%, rgba(232,234,255,.34), transparent),
    radial-gradient(1.3px 1.3px at 72% 82%, rgba(232,234,255,.3), transparent),
    radial-gradient(1px 1px at 8% 88%, rgba(181,153,255,.34), transparent);
  background-size: 620px 620px;
  opacity: .62;
}

body::after {
  position: fixed; inset: 0; z-index: -1; content: ""; pointer-events: none;
  background:
    radial-gradient(58vw 46vh at 80% 16%, rgba(61,52,139,.30), transparent 70%),
    radial-gradient(48vw 40vh at 10% 76%, rgba(113,116,183,.14), transparent 70%);
}

a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* --- navigazione condivisa: inizio, allineato dal test --- */

/* La capsula di vetro. Prima la barra era testo nudo appoggiato al cielo:
   leggibile, ma senza materia, e accanto a un hero che disegna con la luce
   sembrava un segnaposto. Le tendine erano gia' pannelli di vetro scuro
   sfocato: la capsula usa lo stesso materiale, quindi non introduce un corpo
   estraneo, completa un sistema che esisteva a meta'.

   Il vetro sta su uno pseudo-elemento e non su .sitenav: backdrop-filter su
   un elemento lo rende blocco contenitore dei suoi discendenti fixed, e il
   cassetto del telefono si ritaglierebbe dentro la capsula invece di coprire
   la finestra.

   Il blocco e' duplicato fra index.html e css/pages.css perche' la home
   resta autonoma e non acquisisce una richiesta bloccante;
   tests/pages-shared-system.test.cjs verifica che le copie non divergano.
   Usa solo valori letterali per la stessa ragione. */
.sitenav {
  position: fixed; z-index: 40;
  top: calc(env(safe-area-inset-top) + 10px); left: 12px; right: 12px;
  margin: 0 auto;
  display: flex; align-items: center;
  max-width: 1080px; height: 56px;
  padding: 0 8px 0 16px;
  white-space: nowrap;
}
.sitenav::before {
  position: absolute; inset: 0; z-index: -1; content: "";
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(232,234,255,.06), rgba(232,234,255,0) 55%),
    rgba(17,11,25,.8);
  border: 1px solid rgba(232,234,255,.14);
  box-shadow: 0 16px 44px rgba(5,2,10,.5), inset 0 1px 0 rgba(232,234,255,.07);
}
@supports (backdrop-filter: blur(1px)) {
  .sitenav::before {
    background:
      linear-gradient(180deg, rgba(232,234,255,.06), rgba(232,234,255,0) 55%),
      rgba(17,11,25,.58);
    backdrop-filter: blur(18px) saturate(150%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .sitenav::before { background: rgba(17,11,25,.97); backdrop-filter: none; }
}

/* Sul telefono la capsula non c'e': restano il marchio e la parola Menu,
   appoggiati al cielo senza niente attorno. La capsula serviva a raccogliere
   una fila di voci e a schermarle; qui di voci non ce n'e' piu' nessuna, e un
   contenitore attorno a due soli segni disegna un bordo che non contiene
   niente.

   Cadendo la capsula cade anche il suo margine interno, e i due segni si
   allineano al margine del testo sotto: la stessa colonna delle briciole di
   pane e dei titoli, non una rientranza di otto pixel che si nota appena ma
   si nota. La regola sta dopo le tre qui sopra perche' ha la loro stessa
   specificita' e deve vincere per ordine. */
@media (max-width: 719px) {
  .sitenav::before { content: none; }
  .sitenav { left: 0; right: 0; padding: 0 clamp(20px, 5vw, 48px); }
  /* Restati in due, questi sono tutti i comandi della barra, e si prendono col
     pollice. Il marchio da solo e' alto 24px, sotto i 44 che una mano chiede.
     Il margine negativo restituisce esattamente cio' che il margine interno
     aggiunge: cresce l'area da toccare, non si sposta nulla di cio' che si
     vede, e la barra resta alta uguale. */
  .sitenav-marca { padding: 10px 20px 10px 0; margin: -10px -20px -10px 0; }

  /* Lo scudo. Tolto il vetro, scorrendo il testo passa sotto la barra e ci si
     impiglia: misurato, a 260px di scorrimento il marchio finiva dentro le
     lettere del titolo, e le briciole di pane gli si accavallavano addosso.

     Lo scudo non e' la capsula che torna: non ha bordo, fondo pieno, angoli
     ne' misura. E' una sfumatura del colore stesso della pagina, che c'e'
     solo quando sotto c'e' qualcosa da coprire. A pagina ferma non c'e'
     niente, che e' come deve stare.

     Resta pieno per tutta la fascia in cui vive l'inchiostro della barra, che
     finisce a 66px, e comincia a calare solo sotto. Una prima versione calava
     subito: misurato, all'altezza del marchio era gia' sceso a .77 e il titolo
     continuava a passargli dietro. Il tratto pieno non si vede, perche' il
     colore e' quello della pagina: copre qualcosa solo dove sotto c'e'
     qualcosa, e a pagina ferma non e' acceso affatto.

     Sotto, la discesa segue una curva coseno campionata in nove punti e non
     una spezzata di tre: una spezzata cambia pendenza di colpo, e in quel
     punto l'occhio legge un bordo, cioe' esattamente la cosa che non deve
     esserci. La coseno parte con derivata zero, quindi si innesta sul tratto
     pieno senza uno spigolo, e arriva a zero allo stesso modo: non c'e' un
     punto dove la sfumatura finisce, solo un posto dove non c'e' piu'. */
  .sitenav::after {
    position: fixed; z-index: -1;
    top: 0; left: 0; right: 0;
    height: calc(env(safe-area-inset-top) + 150px);
    content: ""; pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(18,12,25,.96) 0%,
      rgba(18,12,25,.96) 44%,
      rgba(18,12,25,.923) 51%,
      rgba(18,12,25,.819) 58%,
      rgba(18,12,25,.664) 65%,
      rgba(18,12,25,.48) 72%,
      rgba(18,12,25,.296) 79%,
      rgba(18,12,25,.141) 86%,
      rgba(18,12,25,.037) 93%,
      rgba(18,12,25,0) 100%);
  }

  /* Acceso di base, spento solo dove il browser sa leggere lo scorrimento da
     solo. Il verso conta: chi non sa leggerlo si tiene lo scudo sempre, che e'
     lo stato in cui si legge. Firefox stabile a oggi e' ancora dietro flag, ed
     e' circa un lettore su sei: non e' un caso di margine da servire peggio.

     Sessantaquattro pixel di corsa: quando il primo rigo di testo arriva a
     sfiorare la barra lo scudo e' gia' tutto acceso. */
  @supports (animation-timeline: scroll()) {
    .sitenav::after {
      opacity: 0;
      animation: sitenav-scudo auto linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 64px;
    }
  }

  /* Chi ha chiesto meno movimento non chiede di leggere peggio: lo scudo resta,
     fermo e sempre acceso. */
  @media (prefers-reduced-motion: reduce) {
    .sitenav::after { opacity: 1; animation: none; }
  }
}

@keyframes sitenav-scudo { from { opacity: 0; } to { opacity: 1; } }

.sitenav-marca { display: flex; align-items: center; flex: none; }
.sitenav-marca img { display: block; }

/* Il marchio non cambia mai: stesso file, stessa misura, a ogni scena e a ogni
   larghezza. E' il perno attorno a cui la scritta si apre e si richiude, ed e'
   la ragione per cui il passaggio non salta. Altezza dichiarata, larghezza
   ricavata: nel file il quadrato non e' esatto (186.26 per 185.84) e imporre
   due lati uguali lo schiaccerebbe. */
.sitenav-marca .marchio { height: var(--marchio); width: auto; }

/* Le quote del lockup, prese dentro logo_extended_light.svg riquadro per
   riquadro e rimesse qui come frazioni dell'altezza del marchio. Non sono
   scelte a occhio: sono le stesse misure del file ufficiale, e a guscio
   aperto le due immagini affiancate ricompongono quel disegno.

   Nel file, alto 118.59: il marchio finisce a 118.86, la scritta comincia a
   147.06 e arriva a 806.29, alta 75.27. Da cui il vuoto in mezzo, 28.20, e
   l'altezza della scritta, 75.27, entrambi divisi per 118.59. La proporzione
   e' quella della scritta da sola, 659.22 su 75.27, e serve a ricavarne la
   larghezza dall'altezza senza doverla dichiarare due volte. */
.sitenav-marca {
  --marchio: 24px;
  --logotipo-stacco: .237895;
  --logotipo-altezza: .634708;
  --logotipo-proporzione: 8.758071;
  --logotipo-larghezza: calc(var(--marchio) * var(--logotipo-altezza) * var(--logotipo-proporzione));
}
.sitenav-marca .logotipo {
  height: calc(var(--marchio) * var(--logotipo-altezza));
  width: var(--logotipo-larghezza);
}

/* Il guscio e' la finestra sulla scritta, e tiene fuori di se' il vuoto che la
   stacca dal marchio: cosi' dentro c'e' la sola scritta, e farla uscire di un
   suo intero la porta esattamente al bordo, senza lasciare una scheggia di
   coda in vista.

   Il guscio non cambia mai misura. A scomparire e' cio' che ci sta dentro, che
   scorre via dietro il marchio. Muovere il bordo del guscio avrebbe voluto
   dire rifare l'impaginazione a ogni fotogramma, e sulla home dietro c'e' un
   cielo che sta gia' disegnando.

   Non c'e' sotto i 720px: li' la barra porta il solo marchio, su ogni pagina. */
.sitenav-marca .logotipo-guscio {
  display: none; overflow: hidden;
  margin-left: calc(var(--marchio) * var(--logotipo-stacco));
  width: var(--logotipo-larghezza);
}

/* L'ingresso della scritta al caricamento e' stato tolto: sulla home avrebbe
   avuto la stessa presa dello scoprimento per scena, e vincendo l'animazione
   sulla transizione la scritta si sarebbe vista entrare per poi sparire di
   colpo. Un ingresso solo, quello che racconta qualcosa. */

/* margin-left auto e non space-between sulla capsula: il guscio della scritta
   tiene la sua misura anche da chiuso, e con space-between quella misura si
   sarebbe vista come un vuoto in mezzo alla fila. Cosi' invece il marchio sta
   a sinistra e le voci si appoggiano tutte a destra, comunque stia il guscio. */
.sitenav-voci { display: flex; align-items: center; gap: 2px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.sitenav-voci a {
  position: relative;
  display: flex; align-items: center; height: 40px; padding: 0 13px;
  color: rgba(232,234,255,.8); text-decoration: none;
  font: 500 13px/1 "Montserrat", Arial, sans-serif;
  border-radius: 999px;
  transition: color .2s ease, background-color .2s ease;
}
.sitenav-voci a:hover { color: #fff; background: rgba(232,234,255,.07); }
.sitenav-voci a[aria-current="page"] { color: #fff; }

/* "Sei qui" e' una stella a otto punte, non una sottolineatura: e' il segno
   che il viaggio usa gia' per la scena attiva nel rail, stessa figura e stesso
   bagliore. Una sottolineatura sarebbe una convenzione presa altrove. */
.sitenav-voci a[aria-current="page"]::after,
.sitenav-tenda > summary.corrente::after,
.sitenav-lista a[aria-current="page"]::after {
  position: absolute; left: 50%; bottom: 3px;
  width: 9px; height: 9px; margin-left: -4.5px;
  content: "";
  background: radial-gradient(circle, #fff 0 7%, #fff0c7 19%, #ffc04b 43%, rgba(245,184,25,.15) 72%, transparent 73%);
  clip-path: polygon(50% 0,57% 42%,100% 50%,57% 58%,50% 100%,43% 58%,0 50%,43% 42%);
  filter: drop-shadow(0 0 5px rgba(245,184,25,.82));
}
/* Dentro la tendina la stella sta a destra della riga, non sotto. */
.sitenav-lista a[aria-current="page"]::after {
  left: auto; right: 13px; bottom: 50%; margin: 0 0 -4.5px;
}

/* Contatti e' l'unica azione della barra e veste da azione: una pillola ambra
   piena, non un testo colorato che si confonde con le voci. Il testo scuro
   sull'ambra sta sopra 10:1. Sulla pagina corrente la pillola resta com'e' e
   la stella non serve: essere l'unico bottone acceso basta a dire dove siamo. */
.sitenav-voci a.azione,
.sitenav-voci a.azione[aria-current="page"] {
  height: 38px; padding: 0 17px; margin-left: 6px;
  color: #120C19; font-weight: 600;
  background: linear-gradient(180deg, #FFD37A, #F5B819 55%, #EFA51C);
  box-shadow: inset 0 1px 0 rgba(255,240,199,.8), 0 4px 16px rgba(245,184,25,.26);
  transition: box-shadow .2s ease, filter .2s ease, transform .15s ease;
}
.sitenav-voci a.azione:hover {
  color: #120C19; background: linear-gradient(180deg, #FFD37A, #F5B819 55%, #EFA51C);
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(255,240,199,.8), 0 6px 22px rgba(245,184,25,.42);
}
.sitenav-voci a.azione:active { transform: translateY(1px); }
.sitenav-voci a.azione::after { content: none; }
.sitenav a:focus-visible { outline: 2px solid #F5B819; outline-offset: 3px; border-radius: 999px; }

@media (min-width: 720px) {
  .sitenav { top: calc(env(safe-area-inset-top) + 14px); height: 64px; padding: 0 12px 0 22px; }
  /* Il marchio cresce con la capsula, e con lui la scritta: le quote sono
     frazioni di questa misura, quindi basta cambiare la sola radice. */
  .sitenav-marca { --marchio: 26px; }
  .sitenav-marca .logotipo-guscio { display: block; }
  .sitenav-voci a { padding: 0 15px; font-size: 14px; }
  .sitenav-voci a.azione { padding: 0 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .sitenav-voci a, .sitemap li a, .sitemap-titolo { transition: none; }
  .sitenav-voci a.azione:active { transform: none; }
}

/* --- le tendine, dal 720 in su --- */

/* Sottomenu aperti al click e non all'hover: funzionano uguali con mouse,
   tastiera e touch, e la voce non scatta mentre ci si passa sopra per
   raggiungerne un'altra. <details name> fa da fisarmonica esclusiva: aprire
   Guide chiude Servizi. Il velo fisso dentro il summary aperto chiude al
   click fuori. Tutto nativo: le pagine documento non caricano JavaScript,
   percio' manca solo la chiusura con Esc, che il browser non offre da solo. */
.sitenav-tenda { position: relative; }
.sitenav-tenda > summary {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 13px;
  color: rgba(232,234,255,.8); cursor: pointer;
  font: 500 13px/1 "Montserrat", Arial, sans-serif;
  border-radius: 999px;
  list-style: none;
  transition: color .2s ease, background-color .2s ease;
}
.sitenav-tenda > summary::-webkit-details-marker { display: none; }
.sitenav-tenda > summary::marker { content: ""; }
.sitenav-tenda > summary:hover,
.sitenav-tenda[open] > summary,
.sitenav-tenda > summary.corrente { color: #fff; }
.sitenav-tenda > summary:hover,
.sitenav-tenda[open] > summary { background: rgba(232,234,255,.07); }
.sitenav-tenda > summary:focus-visible { outline: 2px solid #F5B819; outline-offset: 3px; }
.sitenav-tenda[open] > summary::before { position: fixed; inset: 0; z-index: -1; cursor: default; content: ""; }

/* La freccia distingue le voci che si aprono da quelle che portano via:
   senza, "Servizi" e "Chi siamo" promettono la stessa cosa e ne mantengono
   due diverse. */
.sitenav-freccia {
  width: 7px; height: 7px; margin-top: -3px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s cubic-bezier(.16,1,.3,1), margin-top .25s cubic-bezier(.16,1,.3,1);
}
.sitenav-tenda[open] .sitenav-freccia { margin-top: 3px; transform: rotate(225deg); }

.sitenav-lista {
  position: absolute; top: calc(100% + 16px); left: 50%; z-index: 41;
  min-width: 236px; margin: 0; padding: 9px;
  list-style: none;
  transform: translateX(-50%);
  background: rgba(17,11,25,.97);
  border: 1px solid rgba(232,234,255,.14);
  border-radius: 20px;
  box-shadow: 0 22px 48px rgba(5,2,10,.55), inset 0 1px 0 rgba(232,234,255,.06);
  animation: sitenav-tendina .22s cubic-bezier(.16,1,.3,1);
}
@supports (backdrop-filter: blur(1px)) {
  .sitenav-lista { background: rgba(17,11,25,.88); backdrop-filter: blur(14px); }
}
@keyframes sitenav-tendina { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .sitenav-lista { animation: none; }
  .sitenav-freccia { transition: none; }
}
.sitenav-lista a {
  position: relative;
  display: block; padding: 10px 34px 10px 12px;
  color: rgba(232,234,255,.8); text-decoration: none;
  font: 500 14px/1.35 "Montserrat", Arial, sans-serif;
  border-radius: 12px;
  transition: color .15s ease, background-color .15s ease;
}
.sitenav-lista a:hover { color: #fff; background: rgba(113,116,183,.16); }
.sitenav-lista a:focus-visible { outline: 2px solid #F5B819; outline-offset: -2px; }
.sitenav-lista a[aria-current="page"] { color: #fff; }
/* La prima riga ripete la voce di testa come collegamento ("Tutti i
   servizi"): il summary apre e basta, e la pagina indice resta a un click. */
.sitenav-lista .panoramica { color: rgba(232,234,255,.94); font-weight: 600; }
.sitenav-lista li:first-child { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(232,234,255,.1); }
.sitenav-lista .separata { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(232,234,255,.1); }

/* Stessa geometria dei collegamenti accanto: la regola sta qui e non nel
   media piu' in alto, che per ordine dei sorgenti perderebbe contro la base. */
@media (min-width: 720px) {
  .sitenav-tenda > summary { padding: 0 15px; font-size: 14px; }
}

/* --- il cassetto, solo su telefono --- */

/* Sotto i 720px la barra porta due cose sole: il marchio e il grilletto
   "Menu". Tutte le destinazioni, Contatti compreso, stanno nel cassetto,
   raggruppate. Tenerne una in barra costringeva a scegliere quale, e la
   scelta si vedeva: una pillola accesa in mezzo a nient'altro.

   Il grilletto tiene la parola accanto ai tratti. Un'icona muta si trova meno
   di una etichettata, e qui lo spazio per la parola c'e' tutto.

   Il cassetto e' un foglio di vetro staccato dai bordi, come la capsula:
   stessa famiglia, non un sipario che copre tutto. Da aperto il summary si
   stende su tutta la finestra e fa da velo scuro: toccarlo richiude, senza
   una riga di JavaScript. */

.sitenav-menu { display: contents; }

/* Spinto a destra da solo: sotto i 720px le voci non ci sono piu', e senza
   questo il grilletto resterebbe appiccicato al marchio.

   Il margine destro negativo pareggia il margine interno: cosi' i tratti del
   glifo cadono sulla colonna del testo, mentre l'area da toccare arriva fino
   al bordo dello schermo. Allineare spostando l'elemento avrebbe allineato
   anche il bersaglio, e lo avrebbe rimpicciolito proprio nell'angolo dove il
   pollice arriva peggio. */
.sitenav-menu > summary {
  display: flex; align-items: center; gap: 9px;
  margin-left: auto; margin-right: -12px;
  height: 40px; padding: 0 12px 0 14px;
  color: rgba(232,234,255,.8); cursor: pointer;
  font: 500 13px/1 "Montserrat", Arial, sans-serif;
  border-radius: 999px;
  list-style: none;
  transition: color .2s ease, background-color .2s ease;
}
/* I 44px che una mano chiede. La regola sta qui e non nel media piu' in alto,
   che a parita' di specificita' perderebbe contro la riga della base. La barra
   e' alta 56 e allinea al centro, quindi il grilletto cresce senza spostare
   niente. */
@media (max-width: 719px) {
  .sitenav-menu > summary { height: 44px; }
}
.sitenav-menu > summary::-webkit-details-marker { display: none; }
.sitenav-menu > summary::marker { content: ""; }
.sitenav-menu > summary:hover,
.sitenav-menu[open] > summary { color: #fff; }
.sitenav-menu > summary:hover { background: rgba(232,234,255,.07); }
.sitenav-menu > summary:focus-visible { outline: 2px solid #F5B819; outline-offset: 3px; }

.sitenav-glifo { position: relative; flex: none; width: 20px; height: 12px; }
.sitenav-glifo i {
  position: absolute; right: 0; height: 1.5px; background: currentColor;
  transition: transform .34s cubic-bezier(.16,1,.3,1), width .3s ease, opacity .18s ease;
}
.sitenav-glifo i:nth-child(1) { top: 0; width: 20px; }
.sitenav-glifo i:nth-child(2) { top: 5px; width: 13px; }
.sitenav-glifo i:nth-child(3) { top: 10px; width: 20px; }
.sitenav-menu[open] .sitenav-glifo i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.sitenav-menu[open] .sitenav-glifo i:nth-child(2) { width: 0; opacity: 0; }
.sitenav-menu[open] .sitenav-glifo i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Da aperto: il summary e' il velo scuro dietro il foglio, il glifo resta
   agganciato dov'era il grilletto e diventa la croce. */
.sitenav-menu[open] > summary {
  position: fixed; inset: 0; z-index: 41;
  display: block; height: auto; padding: 0; border-radius: 0;
  background: rgba(7,4,11,.55);
}
.sitenav-menu[open] > summary:hover { background: rgba(7,4,11,.55); }
.sitenav-menu[open] > summary .sitenav-etichetta { display: none; }
/* La croce resta dove stavano i tratti: stessa colonna del testo, stessa
   quota. Era a 32px quando la capsula rientrava il grilletto; ora che i
   tratti cadono sul margine del testo, ci cade anche lei, e aprendo il
   cassetto il segno non si sposta di un pixel. */
.sitenav-menu[open] .sitenav-glifo {
  position: fixed; z-index: 43;
  top: calc(env(safe-area-inset-top) + 32px);
  right: clamp(20px, 5vw, 48px);
}

.sitenav-pannello {
  position: fixed; z-index: 42;
  top: calc(env(safe-area-inset-top) + 74px); left: 12px; right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 24px 40px;
  background: rgba(13,8,19,.97);
  border: 1px solid rgba(232,234,255,.13);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(5,2,10,.6), inset 0 1px 0 rgba(232,234,255,.06);
  animation: sitenav-cassetto .3s cubic-bezier(.16,1,.3,1);
}
@supports (backdrop-filter: blur(1px)) {
  .sitenav-pannello { background: rgba(13,8,19,.9); backdrop-filter: blur(20px); }
}
@keyframes sitenav-cassetto { from { opacity: 0; transform: translateY(-10px); } }
/* Sui telefoni bassi il cassetto scorre, e senza un segnale le voci oltre il
   bordo sembravano non esistere. Il velo sta appoggiato al fondo e sfuma
   l'ultima riga finche' c'e' altro sotto. */
.sitenav-velo {
  position: sticky; bottom: -40px;
  display: block; height: 40px;
  margin: -40px 0 0; pointer-events: none;
  background: linear-gradient(rgba(13,8,19,0), rgba(13,8,19,.94));
}
@media (prefers-reduced-motion: reduce) {
  .sitenav-pannello { animation: none; }
  .sitenav-glifo i { transition: none; }
}

/* Nel cassetto le colonne si impilano e respirano piu' che nel pie' di pagina:
   li' si scorre, qui si tocca. */
.sitenav-pannello .sitemap { gap: 30px; }
.sitenav-pannello .sitemap-titolo { font-size: 19px; }
.sitenav-pannello .sitemap li a { padding: 10px 0; font-size: 15px; }

/* La home non ha pie' di pagina e il cassetto e' l'unica navigazione che
   possiede sotto i 720px: senza questa riga l'informativa li' sarebbe
   irraggiungibile. Sulle altre pagine e' la seconda via, dopo la coda del
   pie' di pagina. */
.sitenav-coda {
  margin: 28px 0 0; padding-top: 18px;
  border-top: 1px solid rgba(232,234,255,.13);
}
.sitenav-coda a {
  display: inline-block; padding: 6px 0;
  color: rgba(232,234,255,.64); text-decoration: none;
  font: 500 13px/1 "Montserrat", Arial, sans-serif;
}
.sitenav-coda a:hover { color: #F5B819; }

/* Sotto i 720px la fila di voci non c'e': la barra e' marchio e grilletto, e
   le destinazioni stanno tutte nel cassetto. */
@media (max-width: 719px) {
  .sitenav-voci { display: none; }
}
/* Dal 720 in su il cassetto sparisce e le voci restano visibili con le
   tendine: nascondere la navigazione dove lo spazio c'e' ne dimezza la
   scoperta (NN/g, test su 179 partecipanti). */
@media (min-width: 720px) {
  .sitenav-menu { display: none; }
}
/* A cassetto aperto la pagina dietro non scorre: si apriva il menu, si
   scorreva senza accorgersene, e alla chiusura la pagina era altrove. */
html:has(.sitenav-menu[open]) { overflow: hidden; }
/* E bloccandola si ferma anche la linea del tempo che accende lo scudo: senza
   qualcosa da scorrere non c'e' scorrimento da leggere, lo scudo tornerebbe a
   zero e il testo rispunterebbe dietro al marchio proprio mentre il cassetto e'
   aperto. Acceso a mano finche' resta aperto. */
html:has(.sitenav-menu[open]) .sitenav::after { opacity: 1; animation: none; }

/* --- la mappa in fondo --- */

.sitemap { display: grid; gap: 30px 40px; max-width: 1120px; margin: 0 auto; }
@media (min-width: 720px) { .sitemap { grid-template-columns: repeat(3, 1fr); } }

.sitemap-titolo {
  display: block; margin: -5px 0 7px; padding: 5px 0;
  color: rgba(232,234,255,.92); text-decoration: none;
  font: 600 14px/1.2 "Montserrat", Arial, sans-serif; letter-spacing: -.01em;
  transition: color .18s ease;
}
a.sitemap-titolo:hover { color: #F5B819; }

.sitemap-elenco { padding-top: 12px; border-top: 1px solid rgba(232,234,255,.13); }

/* Etichetta di sottogruppo. Le sei guide sono tre domande diverse: raggrupparle
   fa capire quale serve senza leggerle tutte. Niente maiuscoletto spaziato,
   qui serve a separare e non a gridare. */
.sitemap-sotto {
  margin: 16px 0 6px;
  color: rgba(232,234,255,.64);
  font: 600 12px/1.2 "Montserrat", Arial, sans-serif;
}
.sitemap-sotto:first-child { margin-top: 0; }

.sitemap ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sitemap li a {
  display: block; padding: 7px 0;
  color: rgba(232,234,255,.62); text-decoration: none;
  font: 500 14px/1.4 "Montserrat", Arial, sans-serif;
  transition: color .18s ease;
}
.sitemap li a:hover { color: #fff; }
.sitemap a:focus-visible { outline: 2px solid #F5B819; outline-offset: 3px; }

.sitemap-coda {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px;
  max-width: 1120px; margin: 34px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(232,234,255,.12);
}
.sitemap-coda a {
  display: inline-block; margin: -6px 0; padding: 6px 0;
  color: rgba(232,234,255,.86); text-decoration: none;
  font: 600 16px/1 "Montserrat", Arial, sans-serif;
}
.sitemap-coda a:hover { color: #F5B819; }
/* L'informativa non compete con l'indirizzo email: e' la stessa riga, ma il
   peso dice quale delle due e' un invito e quale un riferimento. */
.sitemap-coda a.minore {
  color: rgba(232,234,255,.64);
  font: 500 13px/1 "Montserrat", Arial, sans-serif;
}
.sitemap-coda span {
  color: rgba(232,234,255,.64);
  font: 500 12px/1.4 "Montserrat", Arial, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
}

/* I controlli non sono testo da leggere: trascinare su una voce di menu o su
   un bottone ne selezionava le lettere invece di attivarlo, e la selezione
   restava evidenziata dopo il clic. Vale solo per i comandi: prosa, titoli,
   domande frequenti e indirizzi email restano selezionabili e copiabili,
   perche' li' selezionare serve davvero. */
.sitenav, .sitenav *,
button, summary {
  -webkit-user-select: none; user-select: none;
}
/* --- navigazione condivisa: fine --- */

/* Stessa ragione, per la cornice delle pagine documento. */
.breadcrumb, .page-cta a, .sitemap-titolo, .sitemap-elenco a, .hub-list a {
  -webkit-user-select: none; user-select: none;
}

/* --- intestazione e briciole di pane --- */

/* Il marchio vive nella barra: qui restano le sole briciole di pane.
   La banda della navigazione e' alta 64px, 76 da 720px in su: l'intestazione
   parte sotto, con un po' d'aria. Lo sfumato prosegue oltre e sfuma su di lei,
   che e' il punto: non c'e' un bordo dove finisce. */
.page-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  max-width: 1120px; margin: 0 auto;
  padding: calc(80px + env(safe-area-inset-top)) clamp(20px, 5vw, 48px) 0;
}
@media (min-width: 720px) { .page-header { padding-top: calc(96px + env(safe-area-inset-top)); } }

.breadcrumb {
  margin: 0;
  color: var(--faint);
  font-size: var(--fs-micro);
  letter-spacing: .04em;
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li::after { margin-left: 8px; color: var(--rule); content: "/"; }
.breadcrumb li:last-child::after { content: ""; }
/* Bersaglio tattile: il testo e' alto 18px, il minimo e' 24. Il padding
   allarga la zona toccabile, il margine negativo tiene fermo il ritmo. */
.breadcrumb a {
  display: inline-block; margin: -4px 0; padding: 4px 0;
  color: var(--muted); text-underline-offset: 3px;
}

/* --- corpo --- */

.page-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 48px) 0;
}

/* La 404 non ha briciole di pane, quindi non ha l'intestazione che di solito
   scansa la barra: se la scansa da sola. */
.page-main--sola { padding-top: calc(104px + env(safe-area-inset-top)); }
@media (min-width: 720px) { .page-main--sola { padding-top: calc(124px + env(safe-area-inset-top)); } }

.page-main > section { padding-top: clamp(48px, 6vw, 76px); }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.028em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.04; max-width: 20ch; }
h2 { font-size: var(--fs-h2); line-height: 1.14; max-width: 24ch; }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.012em; }

p { max-width: var(--page-measure); margin: 0; }
.page-main p + p { margin-top: 16px; }

.eyebrow {
  margin: 0 0 14px;
  color: var(--amber);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
}

.lead {
  margin-top: 22px;
  max-width: 46ch;  /* corpo piu' grande, stesso conteggio reale di caratteri */
  color: var(--muted);
  font-size: clamp(18px, 0.5vw + 16.5px, 21px);
  line-height: 1.55;
}

.section-body { margin-top: 22px; color: var(--muted); }

/* --- processo --- */

.steps { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  position: relative;
  padding: 22px 0 22px 58px;
  border-top: 1px solid var(--rule);
  counter-increment: step;
}
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.steps li::before {
  position: absolute; left: 0; top: 24px;
  color: var(--amber);
  font-size: var(--fs-micro); font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  content: "0" counter(step);
}
.steps p { margin-top: 8px; color: var(--muted); }

/* --- deliverable --- */

/* Tre colonne fisse: il fondo a filo e' visibile solo nel gap di 1px fra le
   schede, che hanno il fondo pieno della pagina. Con meno di tre schede la
   cella vuota non ha niente che la copra e il fondo del contenitore diventa un
   riquadro pieno grande un terzo di riga. Le pagine servizio ne hanno sempre
   tre; chi ne ha due usa .team, che non e' una griglia di schede. */
.deliverables { display: grid; gap: 1px; margin-top: 26px; background: var(--rule); }
@media (min-width: 720px) { .deliverables { grid-template-columns: repeat(3, 1fr); } }
.deliverables > div { padding: 24px 22px 26px; background: var(--brand-dark); }
.deliverables h3 { margin-bottom: 8px; }
.deliverables p { color: var(--muted); font-size: var(--fs-micro); line-height: 1.55; }

/* --- il team --- */

/* Due discipline affiancate, non due schede in fila. Il filo verticale che le
   divide e' l'unico segno del blocco, ed e' anche il punto della pagina: le
   due meta' si toccano invece di passarsi il lavoro. Sotto i 720px il filo
   diventa orizzontale, perche' incolonnate le due meta' restano adiacenti. */

.team { display: grid; margin-top: 26px; }
.team > div + div { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--rule); }

@media (min-width: 720px) {
  .team { grid-template-columns: 1fr 1fr; }
  .team > div { padding-right: 34px; }
  .team > div + div {
    margin-top: 0; padding-top: 0; padding-right: 0; padding-left: 34px;
    border-top: 0; border-left: 1px solid var(--rule);
  }
}

.team .disciplina {
  margin: 0 0 12px;
  color: var(--amber);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
}
.team h3 { margin-bottom: 10px; max-width: 24ch; }
.team p { color: var(--muted); font-size: var(--fs-micro); line-height: 1.55; }

/* --- domande frequenti --- */

.faq { margin-top: 26px; }
.faq > div { padding: 24px 0; border-top: 1px solid var(--rule); }
.faq > div:last-child { border-bottom: 1px solid var(--rule); }
.faq h3 { max-width: 46ch; }
.faq p { margin-top: 10px; color: var(--muted); }

/* --- elenchi delle pagine indice --- */

.hub-list { margin: 30px 0 0; padding: 0; list-style: none; }
.hub-list li { border-top: 1px solid var(--rule); }
.hub-list li:last-child { border-bottom: 1px solid var(--rule); }

.hub-list a {
  display: block;
  padding: 26px 0;
  color: inherit; text-decoration: none;
  transition: padding-left .2s ease;
}
.hub-list a:hover { padding-left: 12px; }
@media (prefers-reduced-motion: reduce) { .hub-list a { transition: none; } }
@media (prefers-reduced-motion: reduce) { .hub-list a:hover { padding-left: 0; } }

/* Il titolo di una voce e' un h3, non un h2: sull'indice delle guide sta
   dentro un gruppo, e un h2 dentro un h2 non e' una gerarchia. */
.hub-list h3 {
  display: flex; align-items: baseline; gap: 12px;
  max-width: none;
  font-size: var(--fs-h3);
}
.hub-list a:hover h3 { color: var(--amber); }
.hub-list h3::after {
  color: var(--amber); font-size: .9em; content: "\2192";
}
.hub-list p { margin-top: 8px; color: var(--muted); }

/* --- chiamata all'azione e pagine sorelle --- */

.page-cta { margin-top: 26px; }
.page-cta a {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(245,184,25,.55);
  color: #fff; text-decoration: none;
  font-size: var(--fs-body); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .2s ease, color .2s ease;
}
.page-cta a:hover { border-color: var(--amber); color: var(--amber); }

/* Tre collegamenti scelti, non un elenco. Non sono un ornamento di coda:
   misurato, prima di questo lavoro il vecchio blocco piatto era l'unica cosa
   che teneva collegate tredici pagine su quindici, e togliendolo /faq/
   scendeva a zero collegamenti editoriali in entrata. Cambiarne uno significa
   toccare il grafo, che tests/grafo-interno.test.cjs sorveglia.

   Ognuno porta una riga di contesto: un titolo da solo non dice se vale la
   pena seguirlo. */
/* "Continua da qui" non e' piu' una sezione a se': due chiusure una dopo
   l'altra si contendevano la fine della pagina e non vinceva nessuna. Ora e'
   il titoletto della coda dentro l'unica chiusura. */
.continua-titolo {
  margin-top: clamp(44px, 6vw, 64px);
  color: rgba(232,234,255,.92);
}

.continua {
  display: grid; gap: 1px;
  margin: 18px 0 0; padding: 0;
  background: var(--rule); list-style: none;
}
@media (min-width: 720px) { .continua { grid-template-columns: repeat(3, 1fr); } }
.continua li { background: var(--brand-dark); }
.continua a {
  display: block; height: 100%;
  padding: 22px 20px 24px;
  color: inherit; text-decoration: none;
  transition: background-color .2s ease;
}
.continua a:hover { background: rgba(61,52,139,.16); }
.continua strong {
  display: block; margin-bottom: 6px;
  color: var(--ink);
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.012em;
  transition: color .2s ease;
}
.continua a:hover strong { color: var(--amber); }
.continua span { color: var(--muted); font-size: var(--fs-micro); line-height: 1.55; }
@media (prefers-reduced-motion: reduce) {
  .continua a, .continua strong { transition: none; }
}

/* --- tre trattamenti di sezione, da alternare e non da applicare a ogni
       sezione. Quindici pagine con lo stesso identico ritmo verticale sono un
       muro; non esiste materiale fotografico, quindi la varieta' si costruisce
       con mezzi che il brand possiede gia'. Uno solo per pagina. --- */

/* Raggio 0: la regola a due livelli tiene le pillole alla sola chrome
   galleggiante, il contenuto in pagina resta squadrato. */
.pannello {
  margin-top: 26px;
  padding: 26px clamp(20px, 4vw, 32px) 30px;
  border: 1px solid var(--rule);
  background: rgba(61,52,139,.16);
}
.pannello > :first-child { margin-top: 0; }

/* Una frase per pagina, non una per sezione: e' una pausa, e le pause
   funzionano perche' sono rare. Non introduce testo nuovo, promuove una frase
   che nella pagina c'e' gia'. */
.pausa {
  max-width: 22ch;
  margin: clamp(40px, 6vw, 64px) 0;
  color: var(--amber);
  font-size: var(--fs-h2); font-weight: 700; line-height: 1.14;
  letter-spacing: -.028em; text-wrap: balance;
}

/* La data di un documento che dichiara degli impegni non e' un dettaglio: dice
   a quale versione ci si sta affidando. Sta staccata dal testo e in tono
   minore, perche' va trovata quando si cerca, non letta per forza. */
.pagina-data {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--faint);
  font-size: var(--fs-micro);
}

/* La stella a otto punte che il sito gia' usa, come segno di apertura. Sotto i
   720px sparisce: fuori dalla colonna di lettura non c'e' margine dove starci. */
.marcata { position: relative; }
.marcata::before {
  position: absolute; left: -26px; top: .5em;
  width: 11px; height: 11px;
  background: var(--amber); opacity: .4;
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
  content: "";
}
@media (max-width: 719px) { .marcata::before { display: none; } }

.page-footer {
  max-width: 1120px;
  margin: clamp(72px, 9vw, 112px) auto 0;
  padding: 26px clamp(20px, 5vw, 48px) 64px;
  border-top: 1px solid var(--rule);
  color: var(--faint);
  font-size: var(--fs-micro);
}