/* Quisquilia · mondo B · componenti delle pagine interne. Si carica dopo base.css.
   Giro 4: le interne sono in luce. Stesso mondo della home (scena, HUD, Geist, moto) su Mint Cream e grigi freddi.
   I token di base.css sono rimappati qui sotto, quindi --mint vuol dire «testo principale» e --notte «fondo pagina».
   Le isole scure (piede, console, schede di prodotto) rimettono i valori di notte con .isola. */

:root {
  color-scheme: light;
  --notte: #f9fffb;          /* fondo pagina: Mint Cream */
  --mint: #0e2e3e;           /* testo principale: Jet, 14:1 */
  --sky-chiaro: #3b5262;     /* testo secondario: 8:1 */
  --nebbia: #56707f;         /* note e didascalie: 5:1 sul bianco, 4.7:1 sulla carta */
  --sky: #2f5f80;            /* Sky in profondità, per testo e numeri in evidenza: 6.8:1 */
  --sky-vivo: #8eb7ce;       /* Sky vero, solo per dettagli: barre, punti, fili */
  --jet-chiaro: #d3dee6;
  --linea: rgba(14, 46, 62, .12);
  --linea-forte: rgba(14, 46, 62, .26);
  --titolo: #1d2f7a;         /* titoli in Imperial */
  --fondo-pannello: #ffffff;
  --ombra-morbida: 0 1px 2px rgba(14, 46, 62, .05), 0 24px 48px -32px rgba(14, 46, 62, .22);
}
/* isole scure: stessi token della notte */
.piede, .isola, .strato, .esperimento-ui, .anteprima, .scheda-link, .scrivici, .novembre, .notte {
  --notte: #071c27;
  --mint: #f9fffb;
  --sky-chiaro: #d6e5ee;
  --nebbia: #a9bfcc;
  --sky: #8eb7ce;
  --linea: rgba(214, 229, 238, .14);
  --linea-forte: rgba(214, 229, 238, .4);
  --titolo: #f9fffb;
  color: var(--mint);
}
html { background: var(--notte); }
body { background: var(--notte); color: var(--mint); }
::selection { background: var(--imperial); color: #fff; }
.isola ::selection, .piede ::selection { background: var(--fucsia); color: #fff; }

/* aura dell'apertura (giro 5): mesh gradient chiaro, sky e pesca su bianco. Sfuma nel fondo sotto l'apertura.
   Il fondo CSS qui sotto è anche il ripiego senza WebGL e il fotogramma prima che lo shader parta. */
.salta { color: var(--notte); }
.aura { position: absolute; top: 0; left: 0; width: 100%; height: var(--aura-h, 100svh); z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 100%); }
.aura-campo { position: absolute; inset: 0; background:
  radial-gradient(55% 60% at 80% 28%, rgba(183, 208, 224, .7), transparent 70%),
  radial-gradient(45% 50% at 18% 70%, rgba(247, 205, 182, .55), transparent 70%),
  radial-gradient(40% 40% at 55% 10%, rgba(214, 229, 238, .8), transparent 70%), #fff; }
.aura-campo canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.aura::after { content: ""; position: absolute; inset: 0; background: rgba(249, 255, 251, .18); }

/* sessione: Carlo intervista e prende appunti (giro 5, dalla proposta A). Metodo e Prova. */
.sessione { position: relative; padding: 22px 24px 24px; border-radius: 26px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--ombra-morbida); color: var(--jet); }
.sessione-testa { display: flex; align-items: center; gap: 14px; }
.sessione-testa img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.sessione-testa .etichetta-finta { margin-left: auto; }
.sessione-chi { font: 600 var(--t-testo)/1.2 var(--display); color: var(--jet); }
.sessione-chi span { font: 400 var(--t-piccolo)/1 var(--display); color: var(--sky-chiaro); margin-left: 4px; }
.sessione-stato { display: flex; align-items: center; gap: 8px; font-size: var(--t-piccolo); color: var(--sky-chiaro); margin-top: 4px; }
.sessione-stato i { width: 8px; height: 8px; border-radius: 50%; background: var(--fucsia); flex: none; }
.sessione.viva .sessione-stato i { animation: sessione-rec 1.6s ease-in-out infinite; }
@keyframes sessione-rec { 50% { opacity: .35; } }
.sessione-onda { display: block; width: 100%; height: 52px; margin: 14px 0 12px; }
.sessione-righe { display: grid; gap: 8px; }
.sessione.viva .sessione-righe { align-content: end; height: 9.4em; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); }
.sessione-righe li { font-size: var(--t-testo); line-height: 1.45; padding: 10px 14px; border-radius: 16px; width: fit-content; max-width: 92%; }
.sessione-righe .r-ai { background: var(--carta); color: var(--jet); border-bottom-left-radius: 6px; }
.sessione-righe .r-p { background: var(--imperial); color: #f9fffb; justify-self: end; border-bottom-right-radius: 6px; }
.sessione-righe .cursore::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: currentColor; animation: sessione-cursore 1s steps(2) infinite; }
@keyframes sessione-cursore { 50% { opacity: 0; } }
.sessione-report { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px dashed rgba(29, 47, 122, .4); font-size: var(--t-piccolo); line-height: 1.45; color: var(--sky-chiaro); }
.sessione-report span { font: 600 var(--t-dato)/1 var(--display); color: var(--imperial); }
.sessione-report b { color: var(--jet); font-weight: 600; }
@media (max-width: 600px) {
  .sessione { padding: 16px; border-radius: 22px; }
  .sessione-testa { flex-wrap: wrap; }
  .sessione-testa .etichetta-finta { margin-left: 0; order: 3; }
  .sessione.viva .sessione-righe { height: 11.6em; }
}

/* testata chiara */
.testa.staccata { background: rgba(249, 255, 251, .84); box-shadow: 0 1px 0 var(--linea); }
.nav-voce:hover, .nav-voce[aria-expanded="true"] { background: rgba(14, 46, 62, .06); }
.nav-voce.e-qui::after { background: var(--imperial); }
.nav-tendina { background: rgba(255, 255, 255, .94); box-shadow: 0 1px 2px rgba(14, 46, 62, .06), 0 30px 60px -24px rgba(14, 46, 62, .28); }
.nav-tendina a:hover { background: rgba(14, 46, 62, .05); }
.nav-tendina a[aria-current="page"] { background: rgba(142, 183, 206, .22); color: var(--jet); }
.nav-tendina a[aria-current="page"]::after { background: var(--imperial); }
.testa-prova { background: var(--jet); color: #f9fffb; }
.testa-prova:hover { background: var(--imperial); }

/* HUD in luce */
.hud { background: rgba(255, 255, 255, .72); box-shadow: 0 10px 30px -18px rgba(14, 46, 62, .3); }
.hud-barra i { background: var(--sky-vivo); }

/* comandi */
.cta { box-shadow: 0 14px 30px -18px rgba(14, 46, 62, .45); }
.cta:hover { box-shadow: 0 20px 36px -18px rgba(14, 46, 62, .5); }
.cta--chiaro { background: var(--mint); color: var(--notte); }
.cta--chiaro::after { background: linear-gradient(90deg, transparent, rgba(142, 183, 206, .45), transparent); }
.cta--vuoto { box-shadow: 0 0 0 1.5px var(--linea-forte) inset; }
.cta--vuoto:hover { background: rgba(14, 46, 62, .04); box-shadow: 0 0 0 1.5px var(--mint) inset; }
.cta--imperial { color: #f9fffb; }
.rimando { color: var(--imperial); }
.rimando:hover { color: var(--jet); }
.isola .rimando, .piede .rimando { color: var(--sky-chiaro); }
.isola .rimando:hover, .piede .rimando:hover { color: #fff; }

/* pannelli: vetro chiaro, isole scure piene */
.vetro { background: rgba(255, 255, 255, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--linea); box-shadow: var(--ombra-morbida); }
.vetro.strato, .vetro.esperimento-ui, .vetro.anteprima, .vetro.scrivici, .vetro.novembre, .vetro.isola, .notte .vetro {
  background: linear-gradient(160deg, #1b2c6c, #0b2433 72%); border-color: rgba(214, 229, 238, .12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 60px -34px rgba(7, 28, 39, .55); }

@media (max-width: 900px) {
  .nav-apri { background: rgba(255, 255, 255, .72); border-color: var(--linea-forte); }
  .nav-aperto .nav { background: var(--notte); }
  .nav-tendina { background: none; box-shadow: none; }
  .nav-voce:hover, .nav-voce[aria-expanded="true"] { background: none; }
}

/* piede: chiusura scura comune */
.piede { background: var(--notte); border-radius: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0 0; margin-top: clamp(40px, 8vh, 96px); }
.piede .promessa h2 span { color: var(--sky); }

/* griglia a 12 colonne dentro la riga */
.griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px clamp(16px, 2.2vw, 40px); }
.c-3 { grid-column: span 3; } .c-4 { grid-column: span 4; } .c-5 { grid-column: span 5; } .c-6 { grid-column: span 6; }
.c-7 { grid-column: span 7; } .c-8 { grid-column: span 8; } .c-9 { grid-column: span 9; } .c-12 { grid-column: 1 / -1; }
.da-5 { grid-column-start: 5; } .da-6 { grid-column-start: 6; } .da-7 { grid-column-start: 7; } .da-8 { grid-column-start: 8; }
.pila > * + * { margin-top: 1.1em; }

.testo-2 { color: var(--sky-chiaro); }
.grande { font-size: var(--t-lead); line-height: 1.5; }
.piccolo { font-size: var(--t-piccolo); line-height: 1.5; }
.titolo-medio { font: 500 var(--t-t2)/1.02 var(--voce); letter-spacing: -.02em; text-wrap: balance; }
.titolo-sezione, .titolo-medio, .aperta-titolo { color: var(--titolo); }
strong, b { font-weight: 600; }

/* apertura delle pagine interne */
.aperta { min-height: clamp(560px, 92svh, 1000px); display: flex; align-items: flex-end; padding: 150px 0 clamp(56px, 10vh, 112px); }
.aperta .griglia { align-items: end; }
.aperta-titolo { font: 500 var(--t-t1)/.98 var(--voce); letter-spacing: -.02em; text-wrap: balance; }
.aperta-lead { font-size: var(--t-lead); line-height: 1.5; color: var(--sky-chiaro); }
.aperta-lead + .aperta-lead { margin-top: 1em; }
.aperta-titolo + .aperta-segue { margin-top: clamp(24px, 3.4vh, 40px); }
.aperta .azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.aperta .azioni .rimando { margin-top: 0; }

/* sezioni */
.sezione { padding: clamp(80px, 12vh, 150px) 0; }
.sezione--stretta { padding: clamp(64px, 10vh, 120px) 0; }
.sezione + .sezione { padding-top: clamp(40px, 7vh, 90px); }
/* 2/11 · allineati in cima, non in fondo: con un paragrafo di più righe accanto a un titolo corto,
   l'allineamento in fondo lasciava un vuoto sopra al paragrafo, "staccato" dal titolo. */
.capo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px clamp(24px, 4vw, 80px); align-items: start; margin-bottom: clamp(40px, 7vh, 80px); }
.capo > p { font-size: var(--t-lead); line-height: 1.5; color: var(--sky-chiaro); }
.capo--solo { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); }

/* elenco a righe: il contenitore principale, non schede */
.righe { border-bottom: 1px solid var(--linea); }
.righe > li, .righe > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px clamp(24px, 4vw, 80px); align-items: baseline; padding: clamp(22px, 3.4vh, 36px) 0; border-top: 1px solid var(--linea); }
.righe h3, .righe dt { font: 500 var(--t-t3)/1.1 var(--voce); letter-spacing: -.02em; text-wrap: balance; }
.righe p, .righe dd { color: var(--sky-chiaro); font-size: var(--t-testo); line-height: 1.55; }
.righe p + p { margin-top: .8em; }

/* punti in colonne, sotto un filo */
.punti { display: grid; gap: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 44px); }
.punti--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.punti--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.punti--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.punto { padding-top: 22px; border-top: 1px solid var(--linea); }
.punto h3, .punto h4 { font: 600 var(--t-t4)/1.2 var(--display); letter-spacing: -.015em; margin-bottom: 12px; text-wrap: balance; }
.punto p { color: var(--sky-chiaro); font-size: var(--t-testo); line-height: 1.6; }

/* passi numerati: il numero dice l'ordine */
.passi { counter-reset: passo; border-bottom: 1px solid var(--linea); }
.passi > li { counter-increment: passo; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 4px 16px; padding: clamp(20px, 3vh, 30px) 0; border-top: 1px solid var(--linea); }
.passi > li::before { content: counter(passo, decimal-leading-zero); font: 400 var(--t-dato)/1.9 var(--mono); color: var(--sky); font-variant-numeric: tabular-nums; }
.passi h3 { font: 600 var(--t-t4)/1.2 var(--display); letter-spacing: -.015em; margin-bottom: 8px; }
.passi p { color: var(--sky-chiaro); line-height: 1.6; }

/* foglio: superficie chiara per leggere a lungo */
.foglio { background: var(--carta); color: var(--inchiostro); border-radius: 28px; padding: clamp(28px, 4.4vw, 72px); box-shadow: 0 0 0 1px rgba(14, 46, 62, .05) inset; }
.foglio ::selection { background: var(--imperial); color: #fff; }
.foglio .testo-2, .foglio .punto p, .foglio .righe p, .foglio .righe dd, .foglio .passi p, .foglio .capo > p { color: var(--inchiostro-2); }
.foglio .punto, .foglio .righe > li, .foglio .righe > div, .foglio .passi > li { border-color: var(--carta-linea); }
.foglio .righe, .foglio .passi { border-color: var(--carta-linea); }
.foglio .passi > li::before { color: var(--imperial); }
.foglio .rimando { color: var(--imperial); }
.foglio .rimando:hover { color: var(--jet); }
.foglio :focus-visible { outline-color: var(--imperial); }
.foglio .sotto-capo { font: 600 var(--t-t4)/1.2 var(--display); letter-spacing: -.015em; margin: clamp(40px, 6vh, 64px) 0 24px; }

/* citazioni */
.citazione blockquote { font: 500 var(--t-t3)/1.1 var(--voce); letter-spacing: -.02em; text-wrap: pretty; }
.citazione figcaption { margin-top: 16px; font-size: var(--t-piccolo); color: var(--nebbia); }
.citazione--grande blockquote { font-size: var(--t-t2); line-height: 1.02; letter-spacing: -.02em; font-family: var(--voce); font-weight: 500; }

/* volti degli intervistatori */
.volto-foto { position: relative; overflow: hidden; border-radius: 26px; aspect-ratio: 570 / 480; background: var(--jet); }
.volto-foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.02); transition: transform 1.2s var(--esce); }
.volto-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(7, 28, 39, .28)); pointer-events: none; }

/* gettoni */
.gettoni { display: flex; flex-wrap: wrap; gap: 8px; }
.gettoni li { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linea); color: var(--sky-chiaro); font-size: var(--t-piccolo); background: transparent; }

/* passo successivo: uno solo per pagina */
.passo-dopo { padding: clamp(80px, 12vh, 140px) 0 0; }
.passo-dopo-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: clamp(28px, 5vh, 48px) 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); text-decoration: none; }
.passo-dopo-testo { display: grid; gap: 12px; }
.passo-dopo-testo > span { font: 500 var(--t-t2)/1.02 var(--voce); letter-spacing: -.02em; text-wrap: balance; transition: transform .8s var(--esce), color .4s; }
.passo-dopo-testo small { font-size: var(--t-testo); color: var(--sky-chiaro); }
.freccia-tonda { width: clamp(64px, 7vw, 104px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--linea-forte); color: var(--mint); transition: background-color .5s var(--esce), border-color .5s, transform .7s var(--esce); }
.freccia-tonda svg { width: 36%; height: 36%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.passo-dopo-testo > span { color: var(--titolo); }
.passo-dopo-link:hover .passo-dopo-testo > span { transform: translateX(14px); color: var(--jet); }
.passo-dopo-link:hover .freccia-tonda { background: var(--fucsia); border-color: var(--fucsia); color: #fff; transform: rotate(-38deg); }
.passo-dopo-secondario { margin-top: 20px; color: var(--sky-chiaro); }
.passo-dopo-secondario .rimando { margin: 0 0 0 8px; }

/* etichetta di esempio dentro le anteprime chiare */
.foglio .etichetta-finta, .etichetta-finta--chiara { color: var(--imperial); border-color: rgba(29, 47, 122, .3); background: rgba(214, 229, 238, .6); }

/* responsive */
@media (max-width: 1080px) {
  .capo, .capo--solo { grid-template-columns: 1fr; }
  .punti--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .punti--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .griglia > [class*="c-"] { grid-column: 1 / -1; }
  .righe > li, .righe > div { grid-template-columns: 1fr; }
  .aperta { min-height: auto; padding-top: 128px; }
}
@media (max-width: 640px) {
  .punti--2, .punti--3, .punti--4 { grid-template-columns: 1fr; }
  .passi > li { grid-template-columns: 3rem minmax(0, 1fr); }
  .passo-dopo-link { grid-template-columns: 1fr; }
  .freccia-tonda { width: 64px; }
  .foglio { border-radius: 22px; }
}

/* 26/10 · fasce di notte. Stessa identità della home: il fondo chiaro sfuma nella notte e torna chiaro,
   senza bordi netti. Dentro può tornare la sfera di punti (canvas.sfera, _sorgenti/sfera.js). */
.notte { position: relative; isolation: isolate; }
main .notte::before { content: ""; position: absolute; inset: -22vh 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 45% at 85% 40%, rgba(29, 47, 122, .55), transparent 70%),
    radial-gradient(50% 40% at 10% 85%, rgba(247, 205, 182, .10), transparent 70%),
    linear-gradient(180deg, rgba(7, 28, 39, 0), #071c27 22vh, #071c27 calc(100% - 22vh), rgba(7, 28, 39, 0)); }
.sfera { position: absolute; z-index: -1; right: -14vw; top: -6vh; width: min(48vw, 820px); height: min(48vw, 820px); pointer-events: none; opacity: .75; }
@media (max-width: 900px) { .sfera { width: 110vw; height: 110vw; right: -55vw; top: -4vh; opacity: .4; } }
/* il cofano di Metodo e l'anatomia di Compliance non sono più pannelli: sono notte che sfuma */
.notte .cofano-isola.cofano-pannello { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.cp .isola.notte { background: none; }
/* anche la chiusura comune è notte che sfuma: niente più angoli tondi, la sfera torna accanto alla promessa.
   2/11 · stessa curva a più tappe (lenta-veloce-lenta) e stessi riflessi blu/corallo del raccordo della pagina
   degli output (footer-sfumato.css), non più un fade lineare a due tappe: lì era più morbido e pulito, ora è
   la stessa identica cosa ovunque c'è questo piede. */
.piede { isolation: isolate; border-radius: 0; background: #071c27; margin-top: 22vh; }
.piede::before { content: ""; position: absolute; inset: -22vh 0 auto; height: 22vh; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, #071c27 100%),
    radial-gradient(60% 55% at 50% 52%, rgba(29, 47, 122, .55), transparent 72%),
    radial-gradient(40% 40% at 18% 86%, rgba(244, 54, 76, .14), transparent 70%), #071c27;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .03) 7%, rgba(0, 0, 0, .12) 17%, rgba(0, 0, 0, .28) 28%, rgba(0, 0, 0, .5) 41%, rgba(0, 0, 0, .72) 55%, rgba(0, 0, 0, .88) 66%, rgba(0, 0, 0, .96) 76%, rgba(0, 0, 0, .99) 86%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .03) 7%, rgba(0, 0, 0, .12) 17%, rgba(0, 0, 0, .28) 28%, rgba(0, 0, 0, .5) 41%, rgba(0, 0, 0, .72) 55%, rgba(0, 0, 0, .88) 66%, rgba(0, 0, 0, .96) 76%, rgba(0, 0, 0, .99) 86%, #000 100%);
}
.promessa { position: relative; isolation: isolate; }
.promessa .sfera { top: 50%; right: -10vw; transform: translateY(-50%); width: min(40vw, 640px); height: min(40vw, 640px); }
/* la sfera sporge dal bordo destro: si taglia lì, senza allargare la pagina */
main .notte, .promessa { overflow-x: clip; }
@media (max-width: 900px) {
  main .notte::before { inset: -12vh 0; background: radial-gradient(60% 45% at 85% 40%, rgba(29, 47, 122, .55), transparent 70%),
    linear-gradient(180deg, rgba(7, 28, 39, 0), #071c27 12vh, #071c27 calc(100% - 12vh), rgba(7, 28, 39, 0)); }
  .piede { margin-top: 12vh; } .piede::before { inset: -12vh 0 auto; height: 12vh; }
}
/* il cofano aveva un suo fondo pieno con i bordi netti: ora il fondo è solo quello sfumato della notte */
section.cofano.notte:has(.cofano-pannello) { background: none; }

/* 27/10 · l'aura chiara non vive più solo nell'apertura: è il fondo fisso di tutta la pagina e si muove sempre.
   Le fasce di notte (.notte, piede) le passano sopra sfumando, senza bordi netti.
   2/11 · anche Output: stesso fondo fisso dietro alla parte chiara con i dieci esempi. */
.aura { position: fixed; inset: 0; height: 100lvh; -webkit-mask-image: none; mask-image: none; }