/* SynERE V14 · sistema del sito
   Carica DOPO movimento.css: qui stanno la base tipografica, la griglia,
   i componenti delle pagine interne e l'unificazione della resa fotografica. */

/* I FONT STANNO SUL NOSTRO DOMINIO, non su Google.
   Chiamare fonts.googleapis.com significava mandare a Google l'indirizzo IP di
   ogni visitatore prima di qualsiasi consenso: un trasferimento a terzi da
   dichiarare e da far passare dal banner. Ospitandoli qui la richiesta a terzi
   non esiste piu', e la pagina non aspetta piu' un secondo dominio per
   disegnare il testo.
   Sono font variabili: un solo file copre tutti i pesi. Newsreader porta anche
   l'asse ottico (opsz), quindi il carattere si ridisegna da solo fra i titoli a
   52px e il testo a 15px, com'era con Google.
   unicode-range fa scaricare latin-ext solo se in pagina compare un carattere
   che il latino base non ha: sul sito italiano non succede quasi mai.
   Licenza SIL Open Font 1.1, copia in font/OFL.txt: va tenuta li'. */
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(font/libre-franklin-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(font/libre-franklin-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(font/newsreader-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(font/newsreader-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url(font/newsreader-latin-corsivo.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url(font/newsreader-latin-ext-corsivo.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --navy: #15213F; --navy-2: #0F1830; --avorio: #FAF7F1; --blu: #1266BA; --azzurro: #8FB8E8; --verde: #2A7E30;
  --testo: #3A4256; --testo-chiaro: rgba(250,247,241,0.78); --filetto: rgba(21,33,63,0.18); --filetto-scuro: rgba(250,247,241,0.16);
  --grigio: #B8BCC6; --grigio-mono: #9AA0AE;
}
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; background: var(--navy); color: var(--avorio); font-family: "Libre Franklin", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--azzurro); outline-offset: 4px; }
img { max-width: 100%; }
.serif { font-family: "Newsreader", Georgia, "Times New Roman", serif; }
.mono { font-family: "Libre Franklin", "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 64px; }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
section { padding: 104px 0 112px; }
.N { background: var(--navy); color: var(--avorio); }
.A { background: var(--avorio); color: var(--navy); }
.N .mono { color: var(--azzurro); }  .A .mono { color: var(--blu); }
.N .rule { border-top: 1px solid var(--filetto-scuro); } .A .rule { border-top: 1px solid var(--filetto); }
.N .corpo { color: var(--testo-chiaro); font-weight: 300; } .A .corpo { color: var(--testo); }
.N .link { color: var(--avorio); border-bottom: 1px solid rgba(250,247,241,.5); } .A .link { color: var(--blu); border-bottom: 1px solid var(--blu); }
.link { font-size: 14px; font-weight: 500; padding-bottom: 2px; align-self: flex-start; display: inline-block; }
.h2 { font-size: 46px; line-height: 1.06; letter-spacing: -.01em; }
.A .h2 { font-weight: 500; }
.testa { align-items: end; margin-bottom: 56px; }
.col { display: flex; flex-direction: column; gap: 18px; }
.sticky { position: sticky; top: 96px; align-self: start; }
.btn { display: inline-block; padding: 15px 22px; font-size: 14px; font-weight: 500; }
.btn-chiaro { background: var(--avorio); color: var(--navy); }
.btn-blu { background: var(--blu); color: var(--avorio); }
.btn-bordo { border: 1px solid rgba(250,247,241,.45); color: var(--avorio); padding: 14px 22px; }
.salta { position: absolute; left: -9999px; }
.salta:focus { left: 16px; top: 12px; z-index: 40; background: var(--avorio); color: var(--navy); padding: 10px 16px; }

/* ---------- resa fotografica unificata ----------
   Una sola viratura per tutto il sito: la ricetta approvata (.blu di
   movimento.css) passa su ogni fotografia, comprese quelle gia' trattate in
   duotone. Cosi' le foto di stabilimento e i campi generativi appartengono
   alla stessa famiglia e nessuna stona.
   Nota tecnica: la viratura NON puo' passare dal mix-blend-mode del
   pseudo-elemento. Un filter sull'immagine figlia isola il backdrop, quindi il
   blend "color" non trova nulla da virare: e' il motivo per cui le fotografie
   restavano grigie invece di diventare blu. La viratura si fa quindi dentro la
   catena di filtri (grayscale -> sepia -> hue-rotate), che rende in ogni
   browser e non dipende dalla composizione dei livelli. */
.blu > img, .pres .riga .fig .ph, .fig-blu > img {
  filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(1.55) brightness(1.04) contrast(1.06); }
.blu::before { display: none; }
.blu::after { background: linear-gradient(180deg, rgba(21,33,63,.18) 0%, rgba(21,33,63,0) 46%, rgba(21,33,63,.30) 100%); mix-blend-mode: normal; }
/* Le sorgenti sono normalizzate a monte (normalizza.py): stessa media, stesso
   respiro, alte luci compresse. Qui restano solo due scarti voluti. */
.blu.chiara > img { filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(1.5) brightness(.9) contrast(1.14); }
.blu.hero-v1 > img { filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(1.45) brightness(.8) contrast(1.08); }
/* Il velo degli hero interni: la leggibilita' del titolo non dipende dalla foto. */
.phero .scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,24,48,.90) 0%, rgba(15,24,48,.62) 32%, rgba(15,24,48,.70) 64%, rgba(21,33,63,.97) 100%); }
/* Maschere: la foto sfuma nel fondo invece di finire con un taglio secco. */
.sfuma-b { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); }
.sfuma-l { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }

/* ---------- grafica generativa ----------
   Una tela per sezione, sempre sotto al testo e sopra alla fotografia velata.
   Ordine negli hero: foto · velo · rete · testo. */
canvas[data-gen] { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; pointer-events: none; }
section.hero .wrap, section.phero .wrap, section.banda .wrap { z-index: 4; }
.phero .scrim { z-index: 1; }
.banda canvas[data-gen] { z-index: 1; opacity: .75; }
/* La rete si apre dove sta il testo: non si abbassa ovunque, si dirada li'.
   Il titolo resta la cosa piu' chiara dello schermo, che e' la regola. */
.hero.gen canvas[data-gen] {
  -webkit-mask-image: radial-gradient(74% 48% at 50% 52%, rgba(0,0,0,.22) 0%, rgba(0,0,0,.55) 46%, #000 80%);
  mask-image: radial-gradient(74% 48% at 50% 52%, rgba(0,0,0,.22) 0%, rgba(0,0,0,.55) 46%, #000 80%); }
.phero.gen canvas[data-gen] {
  -webkit-mask-image: radial-gradient(60% 58% at 30% 60%, rgba(0,0,0,.20) 0%, rgba(0,0,0,.55) 48%, #000 84%);
  mask-image: radial-gradient(60% 58% at 30% 60%, rgba(0,0,0,.20) 0%, rgba(0,0,0,.55) 48%, #000 84%); }
/* Con la rete sopra, la fotografia non si spegne: la rete fa gia' il contrasto,
   quindi il velo si alleggerisce e l'impianto si riconosce.
   La viratura qui NON passa dal CSS: e' gia' cotta nel file (duotone.py). Un
   filter su una foto a tutta pagina viene rivalutato a ogni fotogramma della
   tela e costa piu' di tutta la grafica generativa: 17 fotogrammi al secondo
   contro 39. Stessa catena, stesso risultato, verificato contro il browser. */
.hero.gen .sfondo > img, .phero.gen .sfondo > img { filter: none; }
.phero.gen .scrim { background: linear-gradient(180deg, rgba(15,24,48,.74) 0%, rgba(15,24,48,.34) 32%, rgba(15,24,48,.44) 64%, rgba(21,33,63,.93) 100%); }
.hero.gen h1, .hero.gen .sotto, .phero.gen h1, .phero.gen .sotto,
.hero.gen .eyebrow, .phero.gen .occhio { text-shadow: 0 2px 26px rgba(21,33,63,.8), 0 0 2px rgba(21,33,63,.55); }

/* Il filo: il segnale che percorre il filetto sotto la testata di sezione. */
.filo { position: relative; height: 1px; background: var(--filetto-scuro); overflow: hidden; }
.A .filo { background: var(--filetto); }
.testa + .filo, .testa-c + .filo, .capo + .filo { margin-top: -18px; margin-bottom: 42px; }
.filo i { position: absolute; top: -1px; left: 0; width: 20%; height: 3px; opacity: 0;
  background: linear-gradient(90deg, rgba(0,138,228,0) 0%, rgba(0,138,228,.5) 55%, rgba(250,247,241,.95) 88%, rgba(250,247,241,0) 100%); }
.A .filo i { background: linear-gradient(90deg, rgba(18,102,186,0) 0%, rgba(18,102,186,.45) 55%, rgba(0,138,228,.95) 88%, rgba(0,138,228,0) 100%); }
.filo.corre i { animation: filo-corre 1.6s cubic-bezier(.35,.1,.2,1) forwards; }
@keyframes filo-corre {
  0% { transform: translateX(-26%); opacity: 0; }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { transform: translateX(500%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .filo.corre i { animation: none; } }


/* ---------- il grassetto di lettura ----------
   Nei paragrafi lunghi una sola parte in evidenza, quella che porta il punto.
   Non e' colore: e' peso e pieno contrasto contro un corpo attenuato. Cosi'
   chi scorre prende il senso senza leggere tutto, e chi legge non trova
   evidenziatore. Uno per paragrafo: due non aiutano piu' nessuno. */
strong, .corpo strong, .cen strong, .lead strong, .descr strong, .d strong { font-weight: 500; }
.N strong, .banda strong { color: var(--avorio); font-weight: 500; }
.A strong { color: var(--navy); font-weight: 600; }

/* ---------- navigazione ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(21,33,63,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(250,247,241,.08); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; }
.nav .links { display: flex; gap: 32px; font-size: 14px; align-items: center; }
.nav .links > a, .nav .voce-menu > a { color: rgba(250,247,241,.8); padding: 4px 0; border-bottom: 1px solid transparent; }
.nav .links > a:hover, .nav .voce-menu > a:hover { color: var(--avorio); border-bottom-color: rgba(250,247,241,.5); }
.nav .links a[aria-current="page"], .nav .voce-menu.qui > a { color: var(--avorio); font-weight: 500; border-bottom-color: var(--azzurro); }
.nav .links a.ora { color: var(--avorio); font-weight: 500; }
.logo { height: 32px; width: auto; filter: brightness(0) invert(1); }
.voce-menu { position: relative; }
.voce-menu .tendina { position: absolute; top: 100%; left: -24px; padding-top: 20px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s, transform .25s, visibility .25s; }
.voce-menu:hover .tendina, .voce-menu:focus-within .tendina { opacity: 1; visibility: visible; transform: none; }
.tendina-in { background: var(--navy-2); border: 1px solid rgba(250,247,241,.14); width: 360px; padding: 8px 0; }
.tendina-in a { display: flex; flex-direction: column; gap: 3px; padding: 14px 24px; border-top: 1px solid rgba(250,247,241,.08); }
.tendina-in a:first-child { border-top: 0; }
.tendina-in a:hover { background: rgba(143,184,232,.08); }
.tendina-in .mono { color: var(--azzurro); font-size: 11px; }
.tendina-in span:last-child { font-size: 15px; color: var(--avorio); }
.apri { display: none; background: none; border: 1px solid rgba(250,247,241,.35); color: var(--avorio); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 10px 14px; cursor: pointer; }
.pannello { display: none; border-top: 1px solid rgba(250,247,241,.12); background: var(--navy-2); }
.pannello.aperto { display: block; }
.pannello a { display: block; padding: 16px 24px; border-bottom: 1px solid rgba(250,247,241,.08); font-size: 16px; }
.pannello .sotto-v { padding-left: 44px; font-size: 15px; color: rgba(250,247,241,.78); }

/* ---------- hero delle pagine interne ----------
   Deliberatamente piu' basso e piu' piccolo della home: la home e' un palco,
   le pagine interne una testata. Il salto di scala (780 -> 470 px di altezza,
   76 -> 52 px di titolo) e' quello che fa capire dove si e' senza dirlo. */
.phero { position: relative; padding: 0; min-height: 470px; overflow: hidden; display: flex; align-items: flex-end; }
.phero .sfondo { position: absolute; inset: 0; }
.phero .sfondo img { width: 100%; height: 100%; object-fit: cover; }
.phero .wrap { position: relative; z-index: 2; padding-top: 146px; padding-bottom: 64px; }
.phero h1 { font-size: 52px; line-height: 1.06; font-weight: 300; letter-spacing: -.01em; max-width: 780px; }
.phero .occhio { display: block; margin-bottom: 18px; }
.phero .sotto { max-width: 600px; font-size: 17px; line-height: 1.55; color: rgba(250,247,241,.8); font-weight: 300; margin-top: 22px; }
.phero .azioni { display: flex; gap: 18px; align-items: center; margin-top: 32px; flex-wrap: wrap; }
/* Senza fotografia: resta il navy con la sola rete. Su una pagina di consultazione
   una foto che non dice niente pesa piu' di nessuna foto. */
.phero.nudo { min-height: 400px; }
.phero.nudo .scrim { background: linear-gradient(180deg, rgba(15,24,48,.62) 0%, rgba(15,24,48,.10) 38%, rgba(21,33,63,.88) 100%); }

/* ---------- le domande ---------- */
.dom .qlista { border-top: 1px solid var(--filetto); margin-top: 8px; }
.dom .q { display: grid; grid-template-columns: 1fr; padding: 24px 0; border-bottom: 1px solid var(--filetto); }
.dom .q span { font-size: 29px; line-height: 1.16; font-weight: 500; }
.N.dom .qlista, .N.dom .q { border-color: var(--filetto-scuro); }
.dom .nota { margin-top: 22px; color: var(--grigio-mono); text-transform: none; letter-spacing: .01em; font-size: 13px; font-weight: 400; }
.dom .lead { font-size: 18px; line-height: 1.6; }

/* ---------- come lo affrontiamo (passi) ---------- */
.passi .riga { display: grid; grid-template-columns: 64px 1fr 300px; gap: 40px; align-items: start; padding: 30px 0; border-top: 1px solid var(--filetto-scuro); }
.passi .riga:last-of-type { border-bottom: 1px solid var(--filetto-scuro); }
.passi .riga h3 { font-size: 32px; line-height: 1.1; margin-bottom: 10px; }
.passi .riga .d { font-size: 15px; line-height: 1.55; color: var(--testo-chiaro); font-weight: 300; max-width: 640px; }
.passi .riga .seg { height: 1px; background: rgba(143,184,232,.55); margin-top: 22px; }
.passi .riga .fig { position: relative; width: 300px; height: 150px; overflow: hidden; background: var(--navy-2); }
.passi .riga .fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.A.passi .riga { border-color: var(--filetto); }
.A.passi .riga .d { color: var(--testo); }


/* ---------- i quadratini ----------
   Due segni, tutti e due gia' nella V13 e tutti e due presi dal marchio
   Simbiosi (rettangolo arrotondato diviso in quattro quadranti).

   .dot4  i quattro quadratini in 2x2, nell'ordine del marchio: verde, azzurro,
          blu, arancio. Nella V13 era il segno che apriva un blocco (i tre
          passaggi, le tre voci di "chi siamo"). Qui prende il posto della
          numerazione 01/02/03, che violava il divieto sui numeri decorativi.
   .quadro  il quadratino singolo, blu: era il segno dell'elenco delle domande
          (.qbox .qlist li::before nella V13). Resta li'.

   Sono l'allineamento visivo piu' economico fra le due societa': stessa forma,
   nessun logo prestato. Rari di proposito: su ogni riga diventerebbero il
   "modulo ripetuto" che il divieto esclude.
   Su navy le quattro tinte sono schiarite, altrimenti verde e blu spariscono. */
.dot4 { display: inline-grid; grid-template-columns: repeat(2, 8px); grid-auto-rows: 8px; gap: 2px; vertical-align: middle; }
.dot4 i { display: block; border-radius: 1px; }
.dot4 i:nth-child(1) { background: var(--verde); }
.dot4 i:nth-child(2) { background: #008AE4; }
.dot4 i:nth-child(3) { background: var(--blu); }
.dot4 i:nth-child(4) { background: #C0660F; }
.N .dot4 i:nth-child(1) { background: #4CA653; }
.N .dot4 i:nth-child(2) { background: #29A3F0; }
.N .dot4 i:nth-child(3) { background: #3E86D6; }
.N .dot4 i:nth-child(4) { background: #D2822C; }

.quadro { display: block; width: 8px; height: 8px; border-radius: 2px; background: var(--blu); flex: none; }
.N .quadro { background: var(--azzurro); }
.quadro.verde { background: var(--verde); }

/* nelle domande prende il posto del trattino: e' la lista della V12-V13 */
.dom .q { grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.dom .q .quadro { margin-top: 13px; }

/* nei tre passaggi prende il posto del numero */
.passi .riga .segno { display: flex; flex-direction: column; align-items: flex-start; }
.passi .riga .segno .dot4 { margin-top: 10px; }
.passi .riga .seg { margin-top: 18px; width: 46px; }

/* ---------- banda foto a tutta larghezza ----------
   La didascalia e' avorio sopra la fotografia: se il fondo della foto e'
   chiaro non si legge piu'. Il velo in basso non e' un effetto, e' quello che
   garantisce la leggibilita' qualunque foto ci finisca sotto. */
.bandafoto { padding: 0; position: relative; }
.bandafoto .im { height: 520px; position: relative; overflow: hidden; }
.bandafoto .im img { width: 100%; height: 100%; object-fit: cover; }
.bandafoto .im.blu::after { background: linear-gradient(180deg, rgba(21,33,63,.20) 0%, rgba(21,33,63,0) 38%, rgba(15,24,48,.52) 72%, rgba(15,24,48,.84) 100%); }
.bandafoto figcaption { position: absolute; z-index: 3; left: 64px; bottom: 26px; max-width: 620px; color: var(--avorio);
  text-shadow: 0 1px 14px rgba(15,24,48,.85); }
.bandafoto figure { margin: 0; }

/* ---------- testo lungo (osservatorio, chi siamo) ---------- */
.testolungo .blocco { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 24px; }
.testolungo .lat { grid-column: span 3; }
.testolungo .cen { grid-column: 5 / span 7; display: flex; flex-direction: column; gap: 26px; }
.testolungo .cen p { font-size: 18px; line-height: 1.65; }
.testolungo .cen .h2 { margin-bottom: 6px; }
.testolungo .firma { font-size: 13px; color: var(--grigio-mono); letter-spacing: .04em; }
.divisore { border-top: 1px solid var(--filetto); margin: 88px 0; }
.divisore.filo { border-top: 0; height: 1px; }
.N .divisore { border-color: var(--filetto-scuro); }

/* ---------- faq ---------- */
.faq .elenco { border-top: 1px solid var(--filetto); }
.faq details { border-bottom: 1px solid var(--filetto); }
.faq summary { list-style: none; cursor: pointer; display: flex; gap: 24px; align-items: baseline; justify-content: space-between; padding: 22px 0; font-size: 22px; line-height: 1.25; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 300; color: var(--blu); flex-shrink: 0; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { color: var(--blu); }
.faq .risp { padding: 0 88px 26px 0; max-width: 860px; font-size: 16px; line-height: 1.65; color: var(--testo); }

/* ---------- glossario ---------- */
.gloss dl { margin: 0; border-top: 1px solid var(--filetto-scuro); }
.gloss .voce { display: grid; grid-template-columns: 320px 1fr; gap: 40px; padding: 24px 0; border-bottom: 1px solid var(--filetto-scuro); }
.gloss dt { font-size: 22px; line-height: 1.2; }
.gloss dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--testo-chiaro); font-weight: 300; }

/* ---------- rassegna stampa ---------- */
.stampa .riga { display: grid; grid-template-columns: 150px 1fr 140px; gap: 32px; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--filetto); }
.stampa .riga:last-of-type { border-bottom: 1px solid var(--filetto); }
.stampa .riga h3 { font-size: 24px; line-height: 1.2; }
.stampa .riga .t { text-align: right; font-size: 13px; color: var(--grigio-mono); }

/* ---------- articoli osservatorio ---------- */
.arts .capo { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 24px; align-items: end; }
.arts .art-riga { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 24px; padding: 40px 0; border-top: 1px solid var(--filetto); align-items: start; }
.arts .art-riga .foto { grid-column: span 4; aspect-ratio: 16 / 10; }
.arts .art-riga .testo { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: 14px; }
.arts .art-riga h3 { font-size: 34px; line-height: 1.1; }
.arts .art-riga p { font-size: 16px; line-height: 1.6; }
.N.arts .art-riga { border-color: var(--filetto-scuro); }

/* ---------- pagine legali ----------
   Colonna di lettura stretta, gerarchia sobria. Il testo e' quello validato:
   qui si tocca solo l'impaginazione. */
.legale { max-width: 68ch; display: flex; flex-direction: column; gap: 18px; }
.legale h2 { font-family: "Newsreader", Georgia, serif; font-size: 27px; line-height: 1.2; font-weight: 500;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--filetto); }
.legale h2:first-of-type { margin-top: 6px; }
.legale h3 { font-family: "Newsreader", Georgia, serif; font-size: 20px; font-weight: 500; margin-top: 14px; }
.legale p, .legale li { font-size: 15.5px; line-height: 1.7; color: var(--testo); }
.legale ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legale a { color: var(--blu); border-bottom: 1px solid rgba(18,102,186,.4); }
.legale a:hover { border-bottom-color: var(--blu); }
.legale table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0; display: block; overflow-x: auto; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-top: 1px solid var(--filetto); }
.legale th { font-family: "Libre Franklin", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blu); }
.legale .indice { border-top: 1px solid var(--filetto); border-bottom: 1px solid var(--filetto); padding: 20px 0; }
.legale .indice strong { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blu); margin-bottom: 12px; }
.legale .indice ul { padding-left: 0; list-style: none; gap: 8px; }
.legale .avviso { border-left: 3px solid #C0660F; padding: 14px 0 14px 18px; font-size: 14.5px; color: var(--testo); background: rgba(192,102,15,.05); }
.legale .aggiornata { font-size: 13px; color: var(--grigio-mono); }

/* ---------- 404 ---------- */
.p404 { min-height: 62vh; display: flex; align-items: center; }
.p404 .wrap { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.p404 .cifra { font-family: "Newsreader", Georgia, serif; font-size: 92px; line-height: 1; font-weight: 300; color: var(--azzurro); }
.p404 h1 { font-size: 44px; line-height: 1.08; font-weight: 300; }
.p404 p { max-width: 46ch; color: var(--testo-chiaro); font-weight: 300; }
.p404 .azioni { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- prossima pagina ---------- */
.prossime { padding: 0; border-top: 1px solid var(--filetto-scuro); }
.prossime .due { display: grid; grid-template-columns: 1fr 1fr; }
.prossime a { display: flex; flex-direction: column; gap: 12px; padding: 56px 0; }
.prossime a:last-child { border-left: 1px solid var(--filetto-scuro); padding-left: 48px; align-items: flex-end; text-align: right; }
.prossime .t { font-size: 32px; line-height: 1.1; }
.prossime a:hover .t { color: var(--azzurro); }

/* ---------- banda blu di chiusura ---------- */
.banda { background: var(--blu); color: var(--avorio); padding: 88px 0; position: relative; overflow: hidden; }
.banda .sfondo { position: absolute; inset: 0; }
.banda .sfondo img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.banda .sfondo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--blu) 0%, rgba(18,102,186,.88) 44%, rgba(14,78,60,.74) 100%); }
.banda .wrap { position: relative; z-index: 2; }
.banda .h2 { font-size: 50px; font-weight: 400; }
.banda p { color: rgba(250,247,241,.88); }

/* ---------- contatti ---------- */
.cont .h2 { font-size: 44px; }
.form-c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo.largo { grid-column: span 2; }
.campo label { font-size: 13px; color: rgba(250,247,241,.7); }
.campo input, .campo textarea { font: inherit; font-size: 15px; color: var(--avorio); background: transparent; border: 0; border-bottom: 1px solid rgba(250,247,241,.4); padding: 10px 0; }
.campo textarea { min-height: 96px; resize: vertical; }
.priv { grid-column: span 2; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: rgba(250,247,241,.7); }
.rec { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: rgba(250,247,241,.85); }

/* ---------- footer ---------- */
footer { background: var(--navy-2); color: rgba(250,247,241,.8); padding: 72px 0 40px; font-size: 14px; }
footer h4 { font-size: 13px; font-weight: 600; color: var(--avorio); margin-bottom: 14px; }
footer .colf { display: flex; flex-direction: column; gap: 8px; }
footer .colf a:hover { color: var(--avorio); }
footer .basso { border-top: 1px solid var(--filetto-scuro); margin-top: 56px; padding-top: 24px; display: flex; justify-content: space-between; gap: 24px; font-size: 12px; color: rgba(250,247,241,.55); }

/* ---------- componenti della home ---------- */
.hero { position: relative; padding: 0; min-height: 780px; overflow: hidden; display: flex; align-items: center; }
.hero .sfondo { position: absolute; inset: 0; }
.hero .sfondo img { width: 100%; height: 100%; object-fit: cover; }
.hero .wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; padding-top: 110px; padding-bottom: 110px; }
.hero h1 { font-size: 76px; line-height: 1.02; font-weight: 300; letter-spacing: -.01em; max-width: 1040px; }
.hero .sotto { max-width: 720px; font-size: 19px; line-height: 1.55; color: rgba(250,247,241,.82); font-weight: 300; }
/* Accento: si differenzia il concetto, non si decora la parola. Un solo accento
   per titolo, e solo dove c'e' un .k il resto del titolo si attenua. */
.hero h1:has(.k), .phero h1:has(.k), .N .h2:has(.k), .banda .h2:has(.k) { color: rgba(250,247,241,.76); }
.hero h1 .k, .phero h1 .k, .N .h2 .k, .banda .h2 .k { color: var(--avorio); font-weight: 400; }
.A .h2 .k { color: var(--blu); }
.eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--azzurro); }

.dim .testa-c { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; margin-bottom: 56px; }
.dim .h2 { font-size: 54px; font-weight: 400; max-width: 820px; }
.dim .intro { max-width: 780px; font-size: 17px; color: var(--testo); }
.dim .griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 80px; }
.dim .riga { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--filetto); }
.dim .riga:nth-last-child(-n+2) { border-bottom: 1px solid var(--filetto); }
.dim .riga .serif { font-size: 30px; font-weight: 500; }
.dim .riga .d { font-size: 15px; line-height: 1.55; color: var(--testo); }
.dim .cit { display: flex; align-items: center; padding: 26px 0; font-size: 20px; line-height: 1.4; font-style: italic; color: var(--blu); }

.pov { position: relative; overflow: hidden; }
.pov .rete { position: absolute; right: -40px; bottom: -60px; width: 640px; height: 460px; opacity: .45; }
.pov .rete img { width: 100%; height: 100%; object-fit: cover; }
.pov .h2 { font-size: 58px; font-weight: 400; }
.pov .corpo { max-width: 760px; font-size: 18px; line-height: 1.6; }

.chi .voce { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--filetto); }
.chi .voce:last-child { border-bottom: 1px solid var(--filetto); }
.chi .voce .serif { font-size: 24px; font-weight: 500; }
.chi .voce .d { font-size: 15px; line-height: 1.55; color: var(--testo); }
.chi .foto { aspect-ratio: 4 / 3; margin-top: 40px; }
.chi .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pres .riga { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; padding: 22px 0; border-top: 1px solid var(--filetto-scuro); }
.pres .riga:last-child { border-bottom: 1px solid var(--filetto-scuro); }
.pres .riga .fig { position: relative; width: 300px; height: 127px; overflow: hidden; background: #0F1830; }
.pres .riga .fig .ph { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .66; }
.pres .riga .fig .mo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; mix-blend-mode: screen; }
.pres .riga h3 { font-size: 30px; line-height: 1.1; }
.pres .riga .d { font-size: 15px; line-height: 1.55; color: var(--testo-chiaro); font-weight: 300; }
.asse { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.asse span:nth-child(2) { flex-grow: 1; height: 1px; background: rgba(250,247,241,.25); }
.asse .mono { color: rgba(250,247,241,.55); }

.met .linea { position: relative; height: 14px; margin-top: 8px; }
.met .linea i { position: absolute; top: 6px; height: 1px; }
.met .linea b { position: absolute; top: 0; width: 13px; height: 13px; border-radius: 50%; }
.met .tappe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 28px; }
.met .tappa { display: flex; flex-direction: column; gap: 10px; padding-right: 24px; }
.met .tappa h3 { font-size: 28px; font-weight: 500; line-height: 1.1; }
.met .tappa .d { font-size: 15px; line-height: 1.5; color: var(--testo); }
.met .cit { margin-top: 48px; font-size: 22px; line-height: 1.4; font-style: italic; color: var(--blu); }

.srv { padding-top: 0; }
.srv .sep { border-top: 1px solid var(--filetto); padding-top: 104px; }
.lista { display: flex; flex-direction: column; border-top: 1px solid var(--filetto); padding-top: 34px; gap: 4px; }
.voce-s { display: flex; align-items: baseline; gap: 20px; padding: 14px 0; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: var(--grigio); }
.voce-s .mono { width: 72px; flex-shrink: 0; color: var(--grigio-mono); }
.voce-s .serif { font-size: 44px; line-height: 1.05; font-weight: 400; transition: color .35s; }
.voce-s.attiva { color: var(--navy); } .voce-s.attiva .serif { font-weight: 500; } .voce-s.attiva .mono { color: var(--blu); }
.destra { display: flex; flex-direction: column; gap: 22px; border-top: 1px solid var(--filetto); padding-top: 34px; }
.pila { position: relative; height: 380px; overflow: hidden; background: var(--navy); }
.pila .blu { position: absolute; inset: 0; opacity: 0; transition: opacity .6s cubic-bezier(.2,.7,.2,1); }
.pila .blu > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pila .blu.attiva { opacity: 1; }
.pila::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,24,48,0) 0%, rgba(15,24,48,.62) 70%, rgba(15,24,48,.86) 100%); }
.pila .did { position: absolute; left: 16px; bottom: 14px; z-index: 3; color: var(--avorio) !important;
  text-shadow: 0 1px 12px rgba(15,24,48,.8); }
.descr { font-size: 17px; line-height: 1.55; }

.bdi .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.bdi .f { display: flex; flex-direction: column; gap: 10px; padding: 28px 0; border-top: 1px solid var(--filetto-scuro); }
.bdi .f:nth-last-child(-n+2) { border-bottom: 1px solid var(--filetto-scuro); }
.bdi .f h3 { font-size: 30px; line-height: 1.1; }
.bdi .f .d { font-size: 15px; line-height: 1.55; color: var(--testo-chiaro); font-weight: 300; }
.volano { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; margin-top: 96px; padding-top: 64px; border-top: 1px solid var(--filetto-scuro); }
.volano svg { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.volano .tre { display: flex; flex-direction: column; }
.volano .tre div { display: flex; flex-direction: column; gap: 8px; padding: 20px 0; border-top: 1px solid var(--filetto-scuro); }
.volano .tre div:last-child { border-bottom: 1px solid var(--filetto-scuro); }
.volano .tre p { font-size: 15px; line-height: 1.55; color: var(--testo-chiaro); font-weight: 300; }

.art { display: flex; flex-direction: column; gap: 16px; }
.art .foto { aspect-ratio: 4 / 3; }
.art h3 { font-size: 26px; line-height: 1.15; }
.art-main { position: relative; display: block; }
.art-main .foto { position: absolute; inset: 0; height: 100%; }
.art-main .foto img { height: 100%; }
.art-main .testo { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; padding: 40px; min-height: 640px; height: 100%; box-sizing: border-box; justify-content: flex-end; color: var(--avorio); }
/* Il titolo si appoggia alla foto: serve un fondo, non un velo su tutta l'immagine. */
.art-main .testo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: -1;
  background: linear-gradient(180deg, rgba(15,24,48,0) 0%, rgba(15,24,48,.62) 52%, rgba(15,24,48,.86) 100%); }
.art-main .testo .mono { color: var(--azzurro); }
.art-main .testo .link { color: var(--avorio); border-color: rgba(250,247,241,.5); }
.art-main h3 { font-size: 40px; line-height: 1.08; max-width: 560px; }
.art-largo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; border-top: 1px solid var(--filetto); padding-top: 24px; margin-top: 24px; }
.art-largo .foto { aspect-ratio: 16 / 7; }
.art-largo .corpo-a { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.art-largo h3 { font-size: 30px; line-height: 1.12; }

.conchi .foto { aspect-ratio: 16 / 9; }
.conchi .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.conchi .corpo { font-size: 17px; line-height: 1.6; }

/* Il filo prende il posto del primo filetto della lista: mai due righe vicine.
   Sta in fondo di proposito: a parita' di specificita' vince chi arriva dopo, e
   qui deve vincere sempre. (Il difetto si vedeva sui tre passaggi: due filetti
   a venti pixel di distanza.) */
.filo + .qlista, .filo + .elenco, .filo + dl, .filo + .lista, .filo + .destra,
.passi .filo + .riga, .stampa .filo + .riga, .arts .filo + .art-riga { border-top: 0; }
.filo + .griglia > .riga:nth-child(-n+2), .filo + .form > .f:nth-child(-n+2) { border-top: 0; }
.filo + .g12 .lista, .filo + .g12 .destra { border-top: 0; }

/* ---------- adattamento ---------- */
@media (max-width: 1180px) {
  .passi .riga { grid-template-columns: 48px 1fr; }
  .passi .riga .fig { display: none; }
  .gloss .voce { grid-template-columns: 240px 1fr; gap: 28px; }
}
@media (max-width: 900px) {
  .wrap { padding: 0 24px; } section { padding: 64px 0 72px; }
  .g12, .dim .griglia, .bdi .form, .form-c, .met .tappe, .art-largo, .volano,
  .testolungo .blocco, .arts .capo, .arts .art-riga, .prossime .due { grid-template-columns: 1fr; }
  .g12 > *, .testolungo .blocco > *, .arts .capo > *, .arts .art-riga > *,
  .form-c > *, .dim .griglia > *, .bdi .form > *, .volano > * { grid-column: auto !important; }
  .hero h1 { font-size: 40px; } .hero { min-height: 0; }
  .phero, .phero.nudo { min-height: 0; } .phero h1 { font-size: 32px; } .phero .wrap { padding-top: 48px; padding-bottom: 48px; }
  .h2, .dim .h2, .pov .h2, .banda .h2 { font-size: 32px; }
  .voce-s .serif { font-size: 28px; }
  .art-main .testo { min-height: 420px; padding: 24px; } .art-main h3 { font-size: 28px; }
  .pres .riga { grid-template-columns: 1fr; } .pres .riga .fig { width: 100%; height: 150px; }
  .dim .riga, .chi .voce { grid-template-columns: 1fr; gap: 6px; }
  .nav .links { display: none; } .apri { display: block; }
  .sticky { position: static; }
  .dom .q span.serif { font-size: 22px; } .dom .q { gap: 14px; } .dom .q .quadro { margin-top: 10px; }
  .passi .riga { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .passi .riga h3 { font-size: 26px; }
  .gloss .voce { grid-template-columns: 1fr; gap: 8px; }
  .stampa .riga { grid-template-columns: 1fr; gap: 8px; } .stampa .riga .t { text-align: left; }
  .faq summary { font-size: 19px; } .faq .risp { padding-right: 0; }
  .bandafoto .im { height: 300px; } .bandafoto figcaption { left: 24px; right: 24px; }
  .arts .art-riga h3 { font-size: 26px; }
  .prossime a:last-child { border-left: 0; border-top: 1px solid var(--filetto-scuro); padding-left: 0; align-items: flex-start; text-align: left; }
  .prossime .t { font-size: 24px; }
  .divisore { margin: 48px 0; }
  .testolungo .cen p { font-size: 16px; }
}

/* ---------- hidden vince su tutto ----------
   Nei quattro servizi in home il pannello di destra mostra una voce alla volta:
   le altre portano l'attributo hidden e il browser le nasconde da solo. I
   paragrafi funzionavano, i link no: comparivano tutti e quattro "Scopri il
   servizio" uno sotto l'altro.
   Il motivo e' una regola di priorita' del CSS. Il "display: none" di hidden
   arriva dal foglio di stile del browser, che perde contro qualunque regola
   scritta da noi: .link dichiara "display: inline-block", quindi rimetteva in
   pagina un elemento che il browser aveva nascosto. I paragrafi .descr non
   dichiarano display, e per questo si comportavano bene.
   Qui hidden torna a valere sempre, su qualunque elemento. Sta in fondo al file
   e porta !important perche' e' l'unico caso in cui una regola deve battere
   anche una dichiarazione piu' specifica scritta domani da qualcun altro. */
[hidden] { display: none !important; }