/* Quisquilia · mondo B · base comune a tutte le pagine.
   Notte, scena WebGL fissa, testata, HUD della sessione, comandi, piede. */
/* Font ospitati sul sito (30/10): gli stessi file e gli stessi unicode-range di Google Fonts, senza passare da due domini esterni. */
/* vietnamese */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonti/fraunces-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* latin-ext */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonti/fraunces-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonti/fraunces-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; }
/* cyrillic-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonti/ibm-plex-mono-400-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonti/ibm-plex-mono-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* vietnamese */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonti/ibm-plex-mono-400-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonti/ibm-plex-mono-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonti/ibm-plex-mono-400-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; }
/* cyrillic-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonti/ibm-plex-mono-500-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonti/ibm-plex-mono-500-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* vietnamese */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonti/ibm-plex-mono-500-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonti/ibm-plex-mono-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonti/ibm-plex-mono-500-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; }
/* latin-ext */ @font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(../fonti/instrument-sans-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(../fonti/instrument-sans-italic-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; }
/* latin-ext */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(../fonti/instrument-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(../fonti/instrument-sans-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; }
:root {
  --notte: #071c27;
  --jet: #0e2e3e;
  --jet-chiaro: #163d50;
  --imperial: #1d2f7a;
  --sky: #8eb7ce;
  --sky-chiaro: #d6e5ee;
  --fucsia: #f4364c;
  --pesca: #f7cdb6;
  --mint: #f9fffb;
  --nebbia: #a9bfcc;      /* testo secondario su notte: 8.6:1 */
  --linea: rgba(214, 229, 238, .14);
  --vetro: rgba(14, 46, 62, .42);
  --carta: #eef4f7;       /* superficie chiara fredda per i testi lunghi */
  --carta-linea: #d3dee6;
  --inchiostro: #0e2e3e;
  --inchiostro-2: #3b5262; /* su carta: 7.4:1 */
  --margine: clamp(24px, 12vw, 192px);
  --voce: "Fraunces", "Iowan Old Style", Georgia, serif;
  --display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* scala tipografica unica (26/10, ridotta di circa un quinto lo stesso giorno): ogni testo del sito usa uno di questi gradini */
  --t-micro: .75rem;                                    /* 12px, il minimo */
  --t-dato: .8125rem;                                   /* etichette mono */
  --t-piccolo: .875rem;                                /* note, gettoni, menu */
  --t-testo: clamp(1rem, .96rem + .12vw, 1.0625rem); /* testo corrente */
  --t-lead: clamp(1.075rem, .98rem + .3vw, 1.25rem);       /* attacchi e sottotitoli */
  --t-t4: clamp(1.125rem, 1rem + .3vw, 1.3rem);       /* titoletti, Instrument Sans 600 */
  --t-t3: clamp(1.4rem, 1.05rem + 1vw, 2rem);        /* titoli di blocco, Fraunces */
  --t-t2: clamp(1.75rem, 1.1rem + 1.9vw, 3rem);            /* titoli di sezione, Fraunces */
  --t-t1: clamp(2.25rem, 1rem + 3.4vw, 4.25rem);           /* aperture delle pagine, Fraunces */
  --t-t0: clamp(2.5rem, .9rem + 4.2vw, 5rem);               /* apertura della home, Fraunces */
  --esce: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--jet-chiaro) var(--notte); background: var(--notte); }
body { margin: 0; background: var(--notte); color: var(--mint); font: 400 var(--t-testo)/1.6 var(--display); font-variation-settings: "SOFT" 100, "WONK" 0; -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--fucsia); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--notte); }
::-webkit-scrollbar-thumb { background: var(--jet-chiaro); border-radius: 10px; border: 2px solid var(--notte); }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
/* 23/10: Fraunces sui titoli veri (h1/h2/.titolo-sezione) su tutto il sito, in automatico, anche nelle
   pagine che hanno una loro classe di titolo con un font già dichiarato: !important come nel ramo di
   prova di Maddalena (prova-ritocchi), stessa combinazione "font B". */
h1, h2, .titolo-sezione { font-family: var(--voce) !important; font-weight: 500 !important; letter-spacing: -.02em !important; font-variation-settings: "SOFT" 100, "WONK" 0; }
ol, ul { list-style: none; }
.mono { font-family: var(--mono); font-size: var(--t-dato); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.solo-lettori { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--mint); color: var(--jet); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.salta:focus { top: 12px; }
.riga { width: 100%; padding-inline: var(--margine); margin-inline: auto; max-width: 1680px; position: relative; }

/* scena WebGL fissa dietro a tutto. Il fondo CSS è anche il ripiego senza WebGL. */
.scena { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; background:
  radial-gradient(70% 60% at 70% 40%, #1d2f7a 0%, transparent 70%), radial-gradient(60% 60% at 20% 90%, #163d50, transparent 70%), var(--notte); }
.velo { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
main, .piede { position: relative; z-index: 2; }

/* testata */
.testa { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .4s, backdrop-filter .4s, box-shadow .4s; }
.testa.staccata { background: rgba(7, 28, 39, .55); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 1px 0 var(--linea); }
.testa-riga { display: flex; align-items: center; gap: 28px; height: 76px; }
.marchio img { width: 160px; height: auto; }
.nav { margin-left: auto; }
.nav-elenco { display: flex; gap: 2px; }
.nav-gruppo { position: relative; }
.nav-voce { position: relative; font: 500 var(--t-piccolo)/1 var(--display); color: var(--mint); background: none; border: 0; padding: 12px 16px; border-radius: 999px; cursor: pointer; transition: background-color .25s; }
.nav-voce:hover, .nav-voce[aria-expanded="true"] { background: rgba(214, 229, 238, .1); }
.nav-voce.e-qui::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--sky); }
.nav-tendina { position: absolute; top: calc(100% + 10px); left: -8px; min-width: 250px; padding: 10px; border-radius: 18px;
  background: rgba(14, 46, 62, .78); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--linea); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--esce), transform .35s var(--esce), visibility .25s; }
.nav-voce[aria-expanded="true"] + .nav-tendina { opacity: 1; visibility: visible; transform: none; }
.nav-capo { font: 400 var(--t-piccolo)/1 var(--display); color: var(--nebbia); padding: 10px 12px 8px; }
.nav-tendina a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-weight: 500; }
.nav-tendina a:hover { background: rgba(214, 229, 238, .08); }
.nav-tendina a[aria-current="page"] { background: rgba(142, 183, 206, .12); color: #fff; }
.nav-tendina a[aria-current="page"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); flex: none; }
.testa-prova { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; text-decoration: none; font: 600 var(--t-piccolo)/1 var(--display); color: var(--jet); background: var(--mint); transition: transform .3s var(--esce), background-color .3s; }
.testa-prova:hover { background: #fff; transform: translateY(-1px); }
.nav-apri { display: none; }

/* HUD della sessione: etichetta di registrazione in alto a destra */
.hud { position: fixed; top: 88px; right: var(--margine); z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 14px; border-radius: 999px;
  background: rgba(7, 28, 39, .5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--linea);
  font: 400 var(--t-dato)/1 var(--mono); color: var(--sky-chiaro); font-variant-numeric: tabular-nums; }
.hud-rec { width: 8px; height: 8px; border-radius: 50%; background: var(--fucsia); animation: rec 1.4s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .35; } }
.hud-domanda { font-family: var(--display); letter-spacing: 0; color: var(--mint); min-width: 12ch; }
.hud-barra { width: 80px; height: 2px; border-radius: 2px; background: var(--linea); overflow: hidden; }
.hud-barra i { display: block; height: 100%; width: 100%; background: var(--sky); transform-origin: left; transform: scaleX(0); }

/* comandi */
.cta { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 14px; height: 64px; padding: 0 30px 0 32px; border-radius: 999px;
  background: var(--fucsia); color: #fff; text-decoration: none; font: 700 var(--t-testo)/1 var(--display); letter-spacing: -.005em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 18px 40px -18px rgba(3, 12, 18, .7); transition: transform .5s var(--esce), box-shadow .5s var(--esce), background-color .3s; }
.cta::after { content: ""; position: absolute; inset: -40% auto -40% -30%; width: 40%; z-index: -1; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg) translateX(-120%); transition: transform .9s var(--esce); }
.cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 24px 48px -18px rgba(3, 12, 18, .8); }
.cta:hover::after { transform: skewX(-20deg) translateX(420%); }
.cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--esce); }
.cta:hover svg { transform: translate(2px, -2px); }
.cta--chiaro { background: var(--mint); color: var(--jet); box-shadow: 0 20px 50px -20px rgba(214, 229, 238, .5); }
.cta--chiaro::after { background: linear-gradient(90deg, transparent, rgba(142, 183, 206, .5), transparent); }
.cta--chiaro:hover svg { transform: translateX(3px); }
.cta--vuoto { background: transparent; color: var(--mint); box-shadow: 0 0 0 1.5px rgba(214, 229, 238, .45) inset; }
.cta--vuoto::after { background: linear-gradient(90deg, transparent, rgba(142, 183, 206, .3), transparent); }
.cta--vuoto:hover { background: rgba(214, 229, 238, .08); box-shadow: 0 0 0 1.5px var(--sky-chiaro) inset; }
.cta--imperial { background: var(--imperial); color: var(--mint); box-shadow: 0 0 0 1px rgba(142, 183, 206, .3) inset, 0 18px 40px -18px rgba(3, 12, 18, .7); }
.cta--imperial::after { background: linear-gradient(90deg, transparent, rgba(142, 183, 206, .4), transparent); }
.cta--imperial:hover { box-shadow: 0 0 0 1px rgba(142, 183, 206, .5) inset, 0 24px 48px -18px rgba(3, 12, 18, .8); }
.rimando { display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; font-weight: 600; color: var(--sky-chiaro); text-decoration: none; }
.rimando svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--esce); }
.rimando:hover { color: #fff; text-decoration: underline; }
.rimando:hover svg { transform: translateX(4px); }
.etichetta-finta { font: 400 var(--t-dato)/1 var(--display); color: var(--sky-chiaro); border: 1px solid var(--linea); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.fonte { font-size: var(--t-piccolo); line-height: 1.5; color: var(--nebbia); }
.da-verificare { display: inline-block; margin-left: 6px; font: 400 var(--t-micro)/1.4 var(--display); border: 1px dashed var(--nebbia); border-radius: 999px; padding: 2px 10px; }
/* 23/10: materiale dei pannelli. Non più vetro blu smerigliato (backdrop-filter): un oggetto solido
   appoggiato sulla scena, non una finestra su di essa. Base quasi nera, un filo di luce che prende
   il bordo in alto, un bagliore sky in un angolo (mai al centro, mai fucsia: resta un accento solo)
   e la stessa grana già usata per ".velo" sopra tutta la pagina, qui più leggera e solo sul pannello. */
.vetro {
  position: relative; border-radius: 26px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(closest-side at 88% 8%, rgba(142, 183, 206, .26), transparent 72%),
    linear-gradient(165deg, rgba(20, 38, 54, .94), rgba(7, 23, 33, .97));
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 180px 180px, 130% 130%, 100% 100%;
  background-blend-mode: overlay, screen, normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 36px 76px -40px rgba(0, 0, 0, .75);
}

.capitolo { position: relative; }
.titolo-sezione { font: 500 var(--t-t2)/1.02 var(--voce); letter-spacing: -.02em; text-wrap: balance; }

/* piede */
.promessa { padding: clamp(120px, 20vh, 240px) 0 clamp(80px, 12vh, 140px); }
.promessa-griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(24px, 4vw, 80px); align-items: center; }
.promessa h2 { font: 500 clamp(3rem, 1rem + 7vw, 8.5rem)/.9 var(--voce); letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 0; }
.promessa h2 span { display: block; color: var(--sky); }
.promessa-testo { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; }
.promessa-testo p { font-size: clamp(1.1rem, 1rem + .35vw, 1.35rem); line-height: 1.5; color: var(--sky-chiaro); margin-bottom: 0; }
.promessa .rimando { margin-top: 0; }
.promessa .azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
@media (min-width: 1081px) {
  .promessa .azioni { justify-content: flex-end; padding-right: 20px; }
  .promessa-testo p { padding-right: 20px; text-align: justify; }
  /* Margine calibrato per far coincidere il tetto visivo del paragrafo con quello di "Hai un
     caso?". Non basta compensare lo scarto osservato a margine fisso: .promessa-testo ha
     align-self:stretch (riempie la riga della grid dall'alto) ma .promessa h2 no, quindi se la
     colonna del paragrafo (gia' piu' alta di h2 per via del blocco "azioni") e' l'elemento che
     determina l'altezza della riga, aumentare il margin-top del paragrafo fa crescere la riga e
     RICENTRA anche il titolo piu' in basso: il margine giusto va risolto direttamente sulla
     pagina (bisezione sul margine finche' lo scarto si annulla), non dedotto da una singola
     misura. Valori risolti cosi' a 5 larghezze: 1090->108px, 1200->68px, 1400->48px,
     1920->6px, 2560->9px. La curva e' NON monotona (scende, poi risale leggermente oltre
     1920px, dove la scala di "rem" stessa cambia, vedi html{font-size:clamp(...)} sopra):
     interpolazione lineare a tratti tra i punti misurati invece di un singolo clamp(). */
  .promessa-testo p { margin-top: calc(504.86px - 36.364vw); }
}
@media (min-width: 1200px) {
  .promessa-testo p { margin-top: calc(188.5px - 10vw); }
}
@media (min-width: 1400px) {
  .promessa-testo p { margin-top: calc(161.58px - 8.077vw); }
}
@media (min-width: 1920px) {
  .promessa-testo p { margin-top: calc(0.2px + 0.328vw); }
}
.piede { background: linear-gradient(transparent, rgba(7, 28, 39, .85) 30%); }
.piede--senza { padding-top: clamp(80px, 12vh, 140px); }
.piede-mappa { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; padding-top: 64px; border-top: 1px solid var(--linea); }
.piede-mappa .marchio img { width: 190px; }
.piede-colonne { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.piede-colonne p { font: 600 var(--t-piccolo)/1 var(--display); color: var(--sky-chiaro); margin-bottom: 16px; }
.piede-colonne ul { display: grid; gap: 8px; }
.piede-colonne a { text-decoration: none; color: var(--sky-chiaro); }
.piede-colonne a:hover, .piede-colonne a[aria-current="page"] { color: #fff; text-decoration: underline; }
.legale { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 40px 0 96px; margin-top: 56px; border-top: 1px solid var(--linea); font-size: var(--t-piccolo); color: var(--nebbia); }

/* responsive comune */
@media (max-width: 1080px) {
  .promessa-griglia, .piede-mappa { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nav, .testa-prova, .hud { display: none; }
  .nav-apri { display: grid; place-content: center; gap: 6px; margin-left: auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linea); background: rgba(7, 28, 39, .5); cursor: pointer; }
  .nav-apri i { width: 18px; height: 2px; border-radius: 2px; background: var(--mint); transition: transform .35s var(--esce); }
  .nav-aperto .nav-apri i:first-of-type { transform: translateY(4px) rotate(45deg); }
  .nav-aperto .nav-apri i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
  .nav-aperto .nav { display: block; position: fixed; inset: 76px 0 0; background: rgba(7, 28, 39, .97); overflow: auto; padding: 16px var(--margine) 40px; }
  .nav-aperto .testa { background: var(--notte); }
  .nav-elenco { flex-direction: column; }
  .nav-voce { font-size: var(--t-t4); font-weight: 600; padding: 16px 0; width: 100%; text-align: left; border-radius: 0; letter-spacing: -.015em; }
  .nav-voce.e-qui::after { left: auto; right: 4px; bottom: 50%; margin: 0 0 -3px; width: 6px; height: 6px; }
  .nav-voce:hover, .nav-voce[aria-expanded="true"] { background: none; }
  .nav-tendina { position: static; display: none; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 0 12px; }
  .nav-voce[aria-expanded="true"] + .nav-tendina { display: block; }
  .piede-colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .testa-riga { height: 64px; }
  .nav-aperto .nav { inset: 64px 0 0; }
  .marchio img { width: 136px; }
  .cta { height: 58px; padding: 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* giro 6 (12/10): accenti caldi comuni */
.hud-barra i { background: linear-gradient(90deg, var(--sky), var(--pesca)); }
.promessa h2 span { color: var(--pesca); }

/* payoff ufficiale (13/10): «tacit knowledge, at scale». Minuscolo, in inglese, mai tradotto. */
.payoff { font: 500 .9375rem/1.2 var(--display); letter-spacing: .01em; color: var(--sky); }
.piede-marchio .marchio { display: block; width: fit-content; }
.piede-marchio .marchio img { display: block; }
.piede-marchio .payoff { margin-top: 8px; font-size: 1.065rem; color: var(--nebbia); }
.apertura-payoff { margin-bottom: calc(clamp(14px, 2vh, 24px) - clamp(32px, 5vh, 56px)); font-size: clamp(1rem, .9rem + .35vw, 1.25rem); color: var(--sky); text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: no-preference) { .apertura-payoff { animation: payoff-entra 1.2s var(--esce) .2s both; } }
@keyframes payoff-entra { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }

/* giro 9 (14/10): le righe dei titoli che salgono dalla maschera (SplitText, mask "lines") tagliavano
   discendenti e accenti, perché l'interlinea dei titoli è sotto l'uno. La maschera si allarga sopra e sotto
   Tutto il compenso sta nel margine in basso (i margini negativi fra righe vicine non si sommano) e lo
   spostamento in alto con top, così l'impaginazione resta com'era. Vale per tutte le pagine. */
.riga-t-mask { position: relative; top: -.12em; padding: .12em .08em .2em; margin: 0 -.08em -.32em; }

/* ===================================================================== adattivo (21/10)
   Schermi molto grandi: la pagina cresce in proporzione invece di restare un francobollo in mezzo.
   La base del rem sale dolcemente oltre il 1920x1080 e segue il lato più corto in proporzione,
   così su un ultrawide basso (3440x1440) non diventa più alta dello schermo. Fino a 1920x1080 resta 16px.
   1920x1080 → 16px · 2560x1440 → 20px · 3840x2160 → 22px (tetto). */
html { font-size: clamp(100%, calc(4px + min(.625vw, 1.1111vh)), 137.5%); }
:root { --margine: clamp(24px, 12vw, 12rem); --testa-h: 4.75rem; }
/* misure in rem: a 16px sono identiche ai px di prima, sui grandi schermi crescono con il resto */
.riga { max-width: 105rem; }
.testa-riga { height: var(--testa-h); }
.marchio img { width: 10rem; }
.nav-voce { padding: .75rem 1rem; }
.nav-tendina { min-width: 15.625rem; }
.testa-prova { height: 2.5rem; padding: 0 1.125rem; }
.hud { top: 5.5rem; }
.cta { height: 3.25rem; padding: 0 1.5rem 0 1.625rem; }
.piede-mappa .marchio img { width: 11.875rem; }
@media (max-width: 900px) {
  :root { --margine: clamp(24px, 6vw, 54px); }
  .nav-aperto .nav { inset: var(--testa-h) 0 0; }
}
@media (max-width: 600px) {
  :root { --testa-h: 64px; --margine: 24px; }
  .marchio img { width: 136px; }
  .cta { height: 58px; padding: 0 24px; }
}
/* la maschera dei titoli che salgono sporge di qualche px oltre la colonna: sui telefoni stretti
   allargava la pagina (322px su 320). La riga taglia solo in orizzontale, in verticale resta libera. */
.riga { overflow-x: clip; }
/* «Raccontacelo.» a 48px era più largo della colonna di un telefono da 320: il minimo scende un poco */
.promessa h2 { font-size: clamp(2.4rem, 1rem + 5vw, 6rem); }
/* la testata non taglia: le tendine scendono libere. L'ultima si allinea a destra, prima toccava il bordo dello schermo. */
.testa-riga { overflow-x: visible; }
@media (min-width: 901px) { .nav-gruppo:last-child .nav-tendina { left: auto; right: -8px; } }

/* newsletter nel piede (30/10): Minima Artificialia. Il modulo parla con /api/iscritti, che vercel.json gira al progetto della newsletter. */
.piede-news { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: start; margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--linea); }
.piede-news-titolo { font: 500 var(--t-t3)/1.05 var(--voce); letter-spacing: -.02em; color: #fff; }
.piede-news-testo { margin-top: 10px; color: var(--nebbia); }
.piede-news-archivio { margin-top: 14px; }
.piede-news-archivio a { color: var(--sky-chiaro); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.piede-news-archivio a:hover { color: #fff; }
.piede-news-campi { display: flex; gap: 12px; }
.piede-news-campi input[type="email"] { flex: 1; min-width: 0; height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--linea); background: rgba(214, 229, 238, .06);
  color: #fff; font: 400 var(--t-testo)/1 var(--display); transition: border-color .2s ease, background .2s ease; }
.piede-news-campi input[type="email"]::placeholder { color: var(--nebbia); opacity: .8; }
.piede-news-campi input[type="email"]:focus { outline: none; border-color: var(--sky); background: rgba(214, 229, 238, .1); }
.piede-news-campi button { height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--fucsia); color: #fff; font: 700 var(--t-testo)/1 var(--display); cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.piede-news-campi button:hover { transform: translateY(-2px); }
.piede-news-campi button:disabled { opacity: .6; transform: none; cursor: wait; }
.piede-news-trappola, .piede-news .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.piede-news-consenso { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: var(--t-piccolo); line-height: 1.5; color: var(--nebbia); cursor: pointer; }
.piede-news-consenso input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--fucsia); cursor: pointer; }
.piede-news-consenso a { color: var(--sky-chiaro); }
.piede-news-esito { margin-top: 12px; font-size: var(--t-piccolo); color: var(--sky-chiaro); }
.piede-news-esito:empty { display: none; }
.piede-news-esito.errore { color: #ff7c8b; }
@media (max-width: 900px) {
  .piede-news { grid-template-columns: 1fr; gap: 24px; }
  .piede-news-campi { flex-direction: column; }
  .piede-news-campi input[type="email"] { flex: none; }
}

/* selettore di lingua IT / EN nella testata (30/10). Discreto: la lingua attuale piena, l'altra attenuata.
   Sul telefono resta visibile accanto al pulsante del menu. */
.lingua { display: flex; align-items: center; gap: 2px; margin-left: -12px; font: 500 .8125rem/1 var(--mono); letter-spacing: .04em; color: var(--mint); }
.lingua a, .lingua-qui { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 6px; border-radius: 999px; }
.lingua a { color: inherit; text-decoration: none; opacity: .5; transition: opacity .2s, background-color .2s; }
.lingua a:hover, .lingua a:focus-visible { opacity: 1; background: rgba(142, 183, 206, .16); }
@media (max-width: 900px) {
  .lingua { margin-left: auto; }
  .lingua ~ .nav-apri { margin-left: 8px; }
}

/* newsletter: striscia in cima alla testata e pop-up (30/10). Li crea assets/mondo/newsletter.js. */
.news-striscia { overflow: hidden; max-height: 40px; background: var(--imperial); color: #f9fffb; transition: max-height .35s ease, opacity .35s ease; }
html:not(.striscia-su) .news-striscia { max-height: 0; opacity: 0; }
.news-striscia-riga { display: flex; align-items: center; gap: 20px; height: 40px; font-size: var(--t-piccolo); }
.news-striscia-riga p { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; white-space: nowrap; }
.news-striscia-riga strong { font-weight: 600; }
.news-striscia-testo { overflow: hidden; text-overflow: ellipsis; color: var(--sky-chiaro); }
.news-striscia-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--fucsia); flex: none; animation: rec 1.4s ease-in-out infinite; }
.news-striscia button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: #fff; font: 600 var(--t-piccolo)/1 var(--display); cursor: pointer; padding: 6px 0; }
.news-striscia button svg, .news-pop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.news-striscia-vai:hover { text-decoration: underline; text-underline-offset: 4px; }
.news-striscia-chiudi { color: var(--sky-chiaro) !important; }
html.striscia-su .hud { top: 128px; }
@media (max-width: 700px) { .news-striscia-testo { display: none; } }

.news-pop { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: min(420px, calc(100vw - 32px)); padding: 28px 28px 24px; border-radius: 22px;
  background: #071c27; color: var(--mint); box-shadow: 0 30px 80px -30px rgba(7, 28, 39, .7), 0 0 0 1px rgba(214, 229, 238, .12);
  opacity: 0; transform: translateY(24px); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }
.news-pop.aperto { opacity: 1; transform: none; }
.news-pop-chiudi { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(214, 229, 238, .08); color: var(--sky-chiaro); cursor: pointer; }
.news-pop-chiudi:hover { background: rgba(214, 229, 238, .16); color: #fff; }
.news-pop-occhiello { color: #ff7c8b; }
.news-pop-titolo { margin-top: 6px; font: 500 var(--t-t3)/1.05 var(--voce); letter-spacing: -.02em; color: #fff; }
.news-pop-testo { margin: 10px 0 18px; color: var(--nebbia); font-size: var(--t-piccolo); line-height: 1.55; }
.news-pop .piede-news-campi { flex-direction: column; }
.news-pop .piede-news-campi input[type="email"] { flex: none; color: #fff; }
.news-pop .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.news-pop .piede-news-consenso { color: #a9bfcc; }
.news-pop .piede-news-consenso a { color: #d6e5ee; }
.news-pop .piede-news-esito { color: #d6e5ee; }
.news-pop-archivio { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: var(--t-piccolo); color: #d6e5ee; text-underline-offset: 4px; }
@media (max-width: 600px) { .news-pop { right: 16px; bottom: 16px; padding: 24px 20px 20px; } }
@media (prefers-reduced-motion: reduce) { .news-pop, .news-striscia { transition: none; } .news-striscia-punto { animation: none; } }