@charset "utf-8";
/* ============================================================================
   Rinaldi Digital Lab — foglio di stile comune
   ----------------------------------------------------------------------------
   Un solo file per tutto il sito: si modifica qui una volta e cambia ovunque.
   Le sezioni sono numerate, cerca il numero per trovarle in fretta.

    1. Caratteri
    2. Variabili (colori, misure, tempi)
    3. Azzeramento e base
    4. Tipografia
    5. Layout e utilità
    6. Accessibilità
    7. Testata e navigazione
    8. Menu a schermo intero
    9. Piè di pagina
   10. Hero della home
   11. Striscia scorrevole
   12. Il criterio — luce oro
   13. Sezioni e blocchi comuni
   14. Aree di consulenza
   15. Schede, elenchi, numeri, timeline, settori
   16. Diagramma della regia
   17. Domande frequenti
   18. Utilità (al posto degli stili in linea)
   19. Richiamo finale (CTA)
   20. Pagine di testo (privacy, cookie)
   21. Movimento ridotto e stampa
   22. Transizioni fra pagine
   23. Ritocchi per schermi piccoli
   24. Senza JavaScript
   ========================================================================== */


/* == 1. CARATTERI ==========================================================
   Font self-hostati: nessuna chiamata a server esterni, niente trasferimento
   di indirizzi IP verso terze parti, caricamento più veloce.
   ========================================================================== */

@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* Caratteri di ripiego con le metriche corrette.
   Servono a evitare lo "scatto" del layout quando i font veri finiscono di
   caricare: senza questi, il titolo della hero cambiava larghezza e spostava
   tutta la pagina (CLS oltre 0,5 alla prima visita). I valori sono calcolati
   confrontando larghezza media, ascendente e discendente dei font veri con
   quelli di Arial / Liberation Sans. */
@font-face{
  font-family:"Archivo ripiego";
  src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:97.14%;
  ascent-override:90.39%;
  descent-override:21.62%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Manrope ripiego";
  src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:93.51%;
  ascent-override:113.99%;
  descent-override:32.08%;
  line-gap-override:0%;
}


/* == 2. VARIABILI ==========================================================
   Cambiando un valore qui cambia tutto il sito.
   ========================================================================== */

:root{
  /* colori — direzione "Materia" */
  --ink:#08090A;            /* fondo principale */
  --ink-2:#0F1113;          /* fondo delle sezioni alternate */
  --ink-3:#16181B;          /* fondo delle schede */
  --pale:#EDEAE4;           /* testo principale */
  --dim:rgba(237,234,228,.66);   /* testo secondario */
  --mute:rgba(237,234,228,.50);  /* testo terziario, ancora leggibile */
  --faint:rgba(237,234,228,.30); /* solo elementi decorativi */
  --gold:#C2A16A;           /* accento, colore del logo */
  --gold-soft:rgba(194,161,106,.16);
  --gold-line:rgba(194,161,106,.42);
  --line:rgba(237,234,228,.14);
  --line-2:rgba(237,234,228,.07);

  /* caratteri */
  --disp:"Archivo","Archivo ripiego",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Manrope","Manrope ripiego",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* misure */
  --gut:clamp(20px,4.5vw,68px);   /* margine laterale */
  --max:1340px;                    /* larghezza massima del contenuto */
  --max-testo:68ch;                /* larghezza massima dei testi lunghi */
  --sez:clamp(64px,9vw,132px);     /* spazio verticale fra le sezioni */

  /* tempi e curve del movimento */
  --t-veloce:.28s;
  --t-medio:.55s;
  --t-lento:.85s;
  --curva:cubic-bezier(.16,1,.3,1);
}


/* == 3. AZZERAMENTO E BASE ================================================= */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;   /* la testata fissa non deve coprire le ancore */
}

body{
  margin:0;
  background:var(--ink);
  color:var(--pale);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(15.5px,1.02vw,17px);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

img,video{max-width:100%;height:auto;display:block}
svg{display:block}

a{color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color var(--t-veloce) ease}
a:hover{color:var(--pale)}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

strong,b{font-weight:600;color:var(--pale)}
em{font-style:italic}

hr{border:0;border-top:1px solid var(--line);margin:var(--sez) 0}

::selection{background:var(--gold);color:var(--ink)}


/* == 4. TIPOGRAFIA ========================================================= */

h1,h2,h3,h4,h5{
  font-family:var(--disp);
  margin:0;
  letter-spacing:-.028em;
  line-height:1.06;
  text-wrap:balance;
}

/* titolo gigante della hero */
.t-hero{font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,9.4vw,8.4rem);line-height:.9;letter-spacing:-.04em}

/* titolo-manifesto della sezione "Il criterio" */
.t-manifesto{font-weight:800;text-transform:uppercase;font-size:clamp(2.3rem,7.2vw,6rem);line-height:.92;letter-spacing:-.04em}

/* H1 delle pagine interne */
.t-1{font-weight:800;text-transform:uppercase;font-size:clamp(2.1rem,5.6vw,4.4rem);line-height:.96;letter-spacing:-.035em}

/* titoli di sezione */
.t-2{font-weight:800;text-transform:uppercase;font-size:clamp(1.6rem,3.5vw,2.9rem);line-height:1.02;letter-spacing:-.032em}
.t-3{font-weight:700;font-size:clamp(1.18rem,1.9vw,1.6rem);letter-spacing:-.022em;line-height:1.14}
.t-4{font-weight:600;font-size:1.02rem;letter-spacing:-.012em;line-height:1.3}

/* etichetta piccola sopra i titoli */
.eyebrow{
  font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 16px;
}

/* paragrafo introduttivo */
.lede{font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.56;color:var(--dim);max-width:58ch}
.testo{max-width:var(--max-testo)}
.testo p+p{margin-top:0}

/* piccolo, ma ancora leggibile */
.small{font-size:.9rem;color:var(--dim)}
.meta{font-family:var(--disp);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}


/* == 5. LAYOUT E UTILITÀ =================================================== */

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sezione{padding-block:var(--sez)}
.sezione--stretta{padding-block:calc(var(--sez) * .62)}
.sfondo-2{background:var(--ink-2);border-block:1px solid var(--line-2)}

/* due colonne: etichetta a sinistra, contenuto a destra */
.griglia-2{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,64px)}
@media(min-width:900px){
  .griglia-2{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:start}
}

.colonna{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
.intestazione-sezione{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;
  margin-bottom:clamp(28px,4vw,54px)}
.intestazione-sezione__nota{max-width:34ch}

.centrato{text-align:center}
.nascosto{display:none !important}


/* == 6. ACCESSIBILITÀ ====================================================== */

/* salto al contenuto: visibile solo quando riceve il fuoco da tastiera */
.salta{
  position:absolute;left:12px;top:-100px;z-index:200;
  background:var(--gold);color:var(--ink);font-family:var(--disp);font-weight:600;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  padding:12px 18px;border-radius:3px;text-decoration:none;
  transition:top var(--t-veloce) ease;
}
.salta:focus{top:12px;color:var(--ink)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

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


/* == 7. TESTATA E NAVIGAZIONE ============================================== */

.testata{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px var(--gut);
  border-bottom:1px solid transparent;
  background:linear-gradient(180deg,rgba(8,9,10,.80),rgba(8,9,10,0));
  transition:transform var(--t-medio) var(--curva),background var(--t-veloce) ease,border-color var(--t-veloce) ease;
}
.testata.is-fissa{background:rgba(8,9,10,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.testata.is-nascosta{transform:translateY(-115%)}

.marchio{display:flex;align-items:center;gap:11px;text-decoration:none;line-height:1;flex:none}
.marchio img{height:30px;width:auto}
.marchio span{
  font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pale);white-space:nowrap;padding-left:11px;border-left:1px solid var(--line);
}
.marchio:hover span{color:var(--gold)}
@media(max-width:600px){.marchio span{display:none}}

.nav{display:flex;align-items:center;gap:clamp(12px,1.9vw,28px)}
.nav__link{
  font-family:var(--disp);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;position:relative;padding-block:6px;
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform var(--t-medio) var(--curva);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--pale)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__link[aria-current="page"]{color:var(--gold)}

.bottone-nav{
  font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pale);text-decoration:none;border:1px solid var(--line);border-radius:3px;
  padding:10px 17px;white-space:nowrap;
  transition:background var(--t-veloce) ease,color var(--t-veloce) ease,border-color var(--t-veloce) ease;
}
.bottone-nav:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* pulsante che apre il menu completo */
.apri-menu{
  appearance:none;background:none;border:1px solid var(--line);border-radius:3px;cursor:pointer;
  font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pale);padding:10px 15px;display:inline-flex;align-items:center;gap:9px;
  transition:border-color var(--t-veloce) ease,color var(--t-veloce) ease;
}
.apri-menu:hover{border-color:var(--gold);color:var(--gold)}
.apri-menu i{display:block;width:16px;height:9px;position:relative;flex:none}
.apri-menu i::before,.apri-menu i::after{
  content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor;transition:transform var(--t-veloce) ease;
}
.apri-menu i::before{top:0}
.apri-menu i::after{bottom:0}
.apri-menu:hover i::before{transform:translateX(3px)}

/* su schermi stretti restano solo marchio e menu */
@media(max-width:1040px){
  .nav__link{display:none}
}
@media(max-width:520px){
  /* la CTA si accorcia in "Audit": il nome completo resta per i lettori di schermo */
  .bottone-nav .ridotto{display:none}
}
@media(max-width:560px){
  /* riga decorativa della hero: su schermi stretti andava a capo, e non serve */
  .hero__hud{display:none}
}
@media(max-width:430px){
  .testata{gap:10px;padding-inline:16px}
  .testata .bottone-nav{padding:10px 11px;letter-spacing:.09em}
  .apri-menu{padding:10px 11px;letter-spacing:.09em}
}


/* == 8. MENU A SCHERMO INTERO ==============================================
   Non è la versione mobile della navigazione: è l'indice completo del sito,
   disponibile su tutti i formati.
   ========================================================================== */

.menu{
  position:fixed;inset:0;z-index:90;background:var(--ink);
  display:flex;flex-direction:column;
  padding:0 var(--gut) clamp(24px,5vh,56px);
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;opacity:0;
  transition:opacity var(--t-medio) ease,visibility 0s linear var(--t-medio);
}
.menu[data-aperto="true"]{visibility:visible;opacity:1;transition:opacity var(--t-medio) ease}

.menu__barra{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-inline:0;padding-block:14px;border-bottom:1px solid var(--line);margin-bottom:clamp(26px,5vh,54px)}
.chiudi-menu{
  appearance:none;background:none;border:1px solid var(--line);border-radius:3px;cursor:pointer;
  font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pale);padding:10px 15px;transition:border-color var(--t-veloce) ease,color var(--t-veloce) ease;
}
.chiudi-menu:hover{border-color:var(--gold);color:var(--gold)}

.menu__corpo{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,72px);flex:1 1 auto;align-content:start}
@media(min-width:860px){.menu__corpo{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}

.menu__gruppo h2{
  font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px;
}
.menu__elenco{list-style:none;margin:0 0 clamp(28px,4vh,44px);padding:0;display:flex;flex-direction:column}
.menu__elenco li{border-bottom:1px solid var(--line-2)}
.menu__elenco a{
  display:flex;align-items:baseline;gap:14px;text-decoration:none;color:var(--pale);
  font-family:var(--disp);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(1.35rem,3.4vw,2.3rem);line-height:1.1;
  padding-block:clamp(10px,1.5vh,16px);
  transition:color var(--t-veloce) ease,padding-left var(--t-medio) var(--curva);
}
.menu__elenco a:hover,.menu__elenco a:focus-visible{color:var(--gold);padding-left:14px}
.menu__elenco small{
  font-family:var(--body);font-weight:400;font-size:.82rem;letter-spacing:0;color:var(--mute);
  text-transform:none;
}
.menu__elenco--minore a{font-size:clamp(1rem,1.7vw,1.24rem);font-weight:600}

.menu__cta{border:1px solid var(--gold-line);border-radius:3px;padding:clamp(20px,2.6vw,30px);
  background:linear-gradient(150deg,var(--gold-soft),transparent 70%)}
.menu__cta p{color:var(--dim);font-size:.95rem;margin-bottom:20px}
.menu__contatti{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.92rem}
.menu__contatti a{color:var(--dim);text-decoration:none}
.menu__contatti a:hover{color:var(--gold)}

body.menu-aperto{overflow:hidden}


/* == 9. PIÈ DI PAGINA ====================================================== */

.pie{border-top:1px solid var(--line);padding-block:clamp(44px,6vw,72px) 26px;background:var(--ink)}
.pie__griglia{display:grid;gap:clamp(28px,4vw,40px);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding-bottom:34px;border-bottom:1px solid var(--line-2)}
.pie__marchio img{height:58px;width:auto;margin-bottom:18px}
.pie__marchio p{color:var(--dim);max-width:32ch;font-size:.92rem}
.pie h2{font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pie a{color:var(--dim);text-decoration:none;font-size:.92rem}
.pie a:hover{color:var(--pale)}
.pie address{font-style:normal;color:var(--dim);font-size:.92rem;line-height:1.7}
.pie__coda{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;
  font-family:var(--disp);font-weight:500;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.pie__coda ul{flex-direction:row;gap:18px;flex-wrap:wrap}
.pie__coda a{font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--mute)}


/* == 10. HERO DELLA HOME ===================================================
   Tre atti guidati dallo scorrimento:
   1) il video si vede solo dentro le lettere del titolo
   2) il campo si apre e compare il messaggio
   3) il campo si contrae in un oggetto con gli angoli arrotondati
   Senza JavaScript, o con "movimento ridotto" attivo, la hero resta ferma e
   perfettamente leggibile: il testo è vero testo HTML, sempre presente.
   ========================================================================== */

.hero{position:relative;height:260vh}
/* corsa della hero: 260vh sui grandi schermi, 190vh sotto i 900 px.
   Era 340vh / 230vh: accorciata il 2 ottobre 2026 per alleggerire la home;
   i tre atti restano, solo più ravvicinati. */
@media(max-width:900px){.hero{height:190vh}}
.hero--statica{height:auto}
.hero__fisso{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden}
.hero--statica .hero__fisso{position:static;height:88svh;min-height:480px}

.hero__scena{position:relative;width:100%;height:100%;isolation:isolate;overflow:hidden;will-change:transform}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) sepia(.58) saturate(1.9) hue-rotate(-14deg) contrast(.70) brightness(1.55)}

/* luce calda sopra il video, in «screen»: alza i neri della clip, che è
   molto scura, e tiene leggibili le lettere dell'atto 1. Si spegne insieme
   alla copertura (rdl.js, sezione 5). Per lettere più chiare o più scure
   si regola l'opacità dei colori qui sotto. */
.hero__luce{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(120% 120% at 50% 45%,rgba(232,208,160,.62) 0%,rgba(194,161,106,.52) 55%,rgba(150,120,75,.46) 100%)}
.hero--statica .hero__luce{display:none}

/* velo scuro: acceso al secondo atto, per tenere il testo leggibile */
.hero__velo{position:absolute;inset:0;opacity:0;background:
  linear-gradient(180deg,rgba(8,9,10,.58) 0%,rgba(8,9,10,.14) 30%,rgba(8,9,10,.74) 72%,rgba(8,9,10,.97) 100%),
  radial-gradient(130% 95% at 50% 38%,transparent 20%,rgba(8,9,10,.52) 76%,rgba(8,9,10,.9) 100%)}

/* la copertura nera in "multiply" lascia passare il video solo dove il testo è bianco */
.hero__mascherina{position:absolute;inset:0;background:var(--ink);mix-blend-mode:multiply;
  display:grid;place-items:center;padding-inline:var(--gut);text-align:center}
.hero__mascherina h1{color:#fff}
.hero__mascherina h1 span{display:block}

.hero__hud{position:absolute;left:var(--gut);right:var(--gut);top:clamp(76px,10vh,108px);z-index:4;
  display:flex;justify-content:space-between;gap:20px;pointer-events:none;
  font-family:var(--disp);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

.hero__messaggio{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(28px,6vh,64px);z-index:3;
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;opacity:0}
.hero__messaggio h2{max-width:15ch}
.hero__messaggio p{max-width:38ch;color:var(--pale);font-size:clamp(1rem,1.28vw,1.2rem);line-height:1.55;
  text-shadow:0 1px 18px rgba(8,9,10,.9)}
.hero__messaggio .meta{color:var(--gold);text-shadow:0 1px 18px rgba(8,9,10,.9)}
.hero--statica .hero__messaggio,.hero--statica .hero__velo{opacity:1}
/* Nella versione statica il titolo non può sparire: la copertura smette di
   fare da maschera e il titolo diventa testo bianco sopra il video velato. */
.hero--statica .hero__mascherina{mix-blend-mode:normal;background:none;z-index:3;align-items:center}
.hero--statica .hero__mascherina h1{color:var(--pale);text-shadow:0 2px 30px rgba(8,9,10,.8)}

.hero__scorri{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:4;
  font-family:var(--disp);font-weight:500;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}


/* == 11. STRISCIA SCORREVOLE ===============================================
   Decorativa: il contenuto è marcato aria-hidden e non porta informazioni
   che non siano già scritte altrove.
   ========================================================================== */

.striscia{background:var(--gold);color:var(--ink);overflow:hidden;white-space:nowrap;
  padding-block:13px;position:relative;z-index:5}
.striscia__nastro{display:inline-flex;will-change:transform}
.striscia__nastro span{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(.95rem,1.7vw,1.32rem);
  padding-inline:clamp(16px,2.4vw,34px);display:inline-flex;align-items:center;gap:clamp(16px,2.4vw,34px);
}
.striscia__nastro span::after{content:"◆";font-size:.5em;opacity:.6}


/* == 12. IL CRITERIO — LUCE ORO ============================================
   La sezione-manifesto della homepage, e l'unico punto del sito in cui
   compare la luce oro. Non è uno slider: è una sola scena.
   Una luce attraversa lentamente il fondo scuro mentre si scorre, passa
   sopra i nomi degli strumenti — il rumore — e accende il titolo, che dal
   grigio chiaro passa all'oro nel punto illuminato.
   Le variabili --x e --y sono la posizione della luce: le muove il
   JavaScript. I valori di partenza qui sotto tengono la scena leggibile
   anche senza JavaScript o con "riduci movimento" attivo.
   ========================================================================== */

.criterio{--x:50%;--y:46%;
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink-2);border-block:1px solid var(--line);
  padding-block:clamp(92px,14vw,180px)}

/* il rumore: i nomi degli strumenti, appena percettibili, dietro tutto */
.criterio__rumore{position:absolute;inset:0;z-index:0;margin:0;pointer-events:none;
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;color:var(--pale)}
.criterio__rumore span{position:absolute;white-space:nowrap;line-height:1;opacity:.045}
.criterio__rumore span:nth-child(1){top:6%;left:4%;font-size:clamp(2.4rem,7vw,6rem)}
.criterio__rumore span:nth-child(2){top:19%;right:6%;font-size:clamp(2.6rem,8vw,6.8rem)}
.criterio__rumore span:nth-child(3){top:63%;left:2%;font-size:clamp(2.2rem,6vw,5.2rem)}
.criterio__rumore span:nth-child(4){top:81%;right:13%;font-size:clamp(2.4rem,7vw,6rem)}
.criterio__rumore span:nth-child(5){top:39%;left:-1%;font-size:clamp(1.8rem,5vw,4.4rem)}
.criterio__rumore span:nth-child(6){top:88%;left:33%;font-size:clamp(2rem,6vw,5.2rem)}
.criterio__rumore span:nth-child(7){top:3%;right:27%;font-size:clamp(1.9rem,5.5vw,4.8rem)}
.criterio__rumore span:nth-child(8){top:72%;right:2%;font-size:clamp(1.8rem,5vw,4.4rem)}
.criterio__rumore span:nth-child(9){top:50%;right:-2%;font-size:clamp(1.7rem,4.6vw,4rem)}
.criterio__rumore span:nth-child(10){top:14%;left:37%;font-size:clamp(1.6rem,4.4vw,3.8rem)}
/* su schermi stretti il rumore si dirada: deve restare rumore, non disturbo */
@media(max-width:760px){
  .criterio__rumore span:nth-child(5),
  .criterio__rumore span:nth-child(9),
  .criterio__rumore span:nth-child(10){display:none}
}

/* la luce */
.criterio__luce{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(circle 10vmax at var(--x) var(--y),rgba(243,226,192,.20),transparent 72%),
  radial-gradient(circle 36vmax at var(--x) var(--y),
    rgba(194,161,106,.30) 0%,rgba(194,161,106,.14) 26%,rgba(194,161,106,.045) 48%,transparent 68%)}

.criterio__corpo{position:relative;z-index:2}
.criterio__corpo h2{max-width:none;color:var(--pale)}
.criterio__corpo h2 span{display:block}
/* il titolo prende l'oro dove passa la luce; se il browser non sa ritagliare
   lo sfondo sul testo, resta semplicemente chiaro e pieno */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .criterio__corpo h2{
    background-image:radial-gradient(circle 38vmax at var(--x) var(--y),
      #F6E9CD 0%,var(--gold) 22%,var(--pale) 54%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}

/* micro-sequenza: le tre parole si accendono una dopo l'altra con lo scorrimento */
.criterio__sequenza{display:flex;flex-wrap:wrap;margin:clamp(28px,3.6vw,46px) 0 0;
  font-family:var(--disp);font-weight:600;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase}
.criterio__sequenza span{position:relative;color:var(--mute);opacity:.45;
  padding-right:clamp(30px,4vw,54px);
  transition:color var(--t-lento) var(--curva),opacity var(--t-lento) var(--curva)}
.criterio__sequenza span:not(:last-child)::after{content:"\2192";position:absolute;right:clamp(11px,1.6vw,20px);
  color:var(--faint)}
.criterio__sequenza[data-fase="1"] span:nth-child(-n+1),
.criterio__sequenza[data-fase="2"] span:nth-child(-n+2),
.criterio__sequenza[data-fase="3"] span:nth-child(-n+3){color:var(--gold);opacity:1}



/* == 13. SEZIONI E BLOCCHI COMUNI ========================================== */

/* comparsa graduale allo scorrimento */
.comparsa{opacity:0;transform:translateY(26px);
  transition:opacity var(--t-lento) var(--curva),transform var(--t-lento) var(--curva)}
.comparsa.is-visibile{opacity:1;transform:none}
.comparsa[data-ritardo="1"]{transition-delay:.09s}
.comparsa[data-ritardo="2"]{transition-delay:.18s}
.comparsa[data-ritardo="3"]{transition-delay:.27s}

/* intestazione delle pagine interne */
.testata-pagina{padding-block:clamp(112px,14vh,168px) clamp(26px,3.2vw,44px);border-bottom:1px solid var(--line-2)}
/* la sezione che segue subito l'intestazione respira meno: i due spazi si sommavano */
.testata-pagina + .sezione,.testata-pagina + .sfondo-2{padding-top:clamp(44px,5.5vw,76px)}
.testata-pagina .t-1{margin-bottom:26px}

/* briciole di pane */
.briciole{margin-bottom:26px;font-family:var(--disp);font-weight:500;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase}
.briciole ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;color:var(--mute)}
.briciole li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--faint)}
.briciole a{color:var(--mute);text-decoration:none}
.briciole a:hover{color:var(--gold)}

/* blocco "in sintesi" */
.sintesi{border-left:2px solid var(--gold);background:linear-gradient(90deg,var(--gold-soft),transparent 72%);
  padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,30px);margin-block:clamp(26px,3.4vw,40px);max-width:72ch}
.sintesi h2{font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px}
.sintesi p{color:var(--pale);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6}

/* nota a margine */
.nota{border:1px solid var(--line);background:var(--ink-2);padding:clamp(18px,2.2vw,26px);
  margin-block:clamp(24px,3vw,34px);max-width:72ch}
.nota h2,.nota h3{font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin:0 0 11px}
.nota p{color:var(--dim);font-size:.96rem}

/* elenco con trattino */
.elenco{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:11px;max-width:var(--max-testo)}
.elenco li{padding-left:22px;position:relative;color:var(--dim)}
.elenco li::before{content:"";position:absolute;left:0;top:.68em;width:10px;height:1px;background:var(--gold)}
.elenco strong{color:var(--pale)}

/* elenco su due colonne per gli elenchi lunghi */
.elenco--due{max-width:none}
@media(min-width:760px){.elenco--due{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,60px)}}

/* sezione che si rivela: spotlight col cursore, e pulsante per tutti gli altri */
.rivela{position:relative;background:var(--ink-2);border-block:1px solid var(--line);overflow:hidden}
.rivela__base{position:relative;z-index:2}
.rivela__sotto{
  position:absolute;inset:0;z-index:3;display:flex;align-items:center;
  padding:var(--sez) var(--gut);background:var(--gold);color:var(--ink);
  -webkit-mask-image:radial-gradient(circle var(--r,0px) at var(--x,50%) var(--y,50%),#000 62%,transparent 100%);
  mask-image:radial-gradient(circle var(--r,0px) at var(--x,50%) var(--y,50%),#000 62%,transparent 100%);
}
.rivela__sotto .wrap{width:100%}
.rivela__sotto p{color:rgba(8,9,10,.78)}
.rivela__sotto .eyebrow{color:rgba(8,9,10,.72)}
/* stato "tutto scoperto": attivato dal pulsante, dal tocco o dalla tastiera */
.rivela[data-scoperto="true"] .rivela__sotto{-webkit-mask-image:none;mask-image:none}
.rivela__comando{
  position:absolute;right:var(--gut);bottom:22px;z-index:5;
  appearance:none;background:rgba(8,9,10,.72);border:1px solid var(--line);border-radius:3px;cursor:pointer;
  font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pale);padding:10px 15px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color var(--t-veloce) ease,color var(--t-veloce) ease;
}
.rivela__comando:hover{border-color:var(--gold);color:var(--gold)}
.rivela[data-scoperto="true"] .rivela__comando{background:rgba(8,9,10,.86);color:var(--pale)}
/* Sotto i 900px non c'è un puntatore preciso: il secondo livello diventa un
   blocco normale sotto il primo, e il pulsante non serve più. */
@media(max-width:900px){
  .rivela__sotto{position:static;-webkit-mask-image:none;mask-image:none;
    padding:calc(var(--sez) * .8) 0}
  .rivela__comando{display:none}
}
/* Le larghezze dei due titoli erano scritte in linea nell'HTML: stanno qui,
   così l'HTML resta pulito e il risultato è identico. */
.rivela__base h2{max-width:17ch}
.rivela__sotto h2{max-width:18ch}
.rivela .lede{margin-top:24px}

/* collegamento "oltre": porta alle pagine di approfondimento.
   Sostituisce i link in linea nel corpo del testo: sulla home il testo è poco,
   e i rimandi devono essere riconoscibili a colpo d'occhio. */
.link-oltre{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--disp);font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-line);padding-bottom:6px;
  transition:gap var(--t-medio) var(--curva),color var(--t-veloce) ease,border-color var(--t-veloce) ease}
.link-oltre:hover{gap:16px;color:var(--pale);border-bottom-color:var(--pale)}

/* sezione "Il punto": titolo grande a sinistra, poche righe a destra */
.punto{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px)}
@media(min-width:900px){
  .punto{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:start}
}
.punto__copy{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);max-width:56ch}
.punto__copy p{margin:0}
.punto__copy .lede{color:var(--dim);max-width:none}
.punto__copy .link-oltre{align-self:flex-start;margin-top:6px}


/* == 14. AREE DI CONSULENZA ================================================ */

.aree{border-top:1px solid var(--line);margin-top:clamp(26px,3.4vw,44px)}
.area{
  border-bottom:1px solid var(--line);padding-block:clamp(24px,3vw,40px);
  display:grid;grid-template-columns:1fr;gap:14px;position:relative;
  transition:background var(--t-medio) ease;
}
@media(min-width:900px){
  .area{grid-template-columns:clamp(64px,7vw,112px) minmax(0,1.05fr) minmax(0,1.5fr);gap:clamp(20px,3vw,54px);align-items:start}
}
.area::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-lento) var(--curva)}
.area:hover::after,.area:focus-within::after{transform:scaleX(1)}
.area:hover{background:linear-gradient(90deg,rgba(194,161,106,.055),transparent 68%)}
/* il numero è parte dell'identità grafica: grande, non un'etichetta */
.area .area__num{font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:.9;
  letter-spacing:-.045em;color:var(--gold);margin:0}
.area h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:-.025em;
  font-size:clamp(1.18rem,2vw,1.7rem);line-height:1.04;margin:0;
  transition:transform var(--t-medio) var(--curva)}
@media(hover:hover){.area:hover h3{transform:translateX(8px)}}
.area__link{color:inherit;text-decoration:none}
.area__link:hover{color:var(--gold)}
.area p{color:var(--dim);font-size:.98rem;margin-bottom:0}
.aree__oltre{margin-top:clamp(26px,3.4vw,42px)}
.area__voci{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;padding:0;list-style:none}
.area__voci li{font-family:var(--disp);font-weight:500;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:5px 11px;color:var(--mute)}


/* == 15. SCHEDE, ELENCHI, NUMERI, TIMELINE, SETTORI ======================== */

.schede{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.scheda{background:var(--ink);padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:12px;
  transition:background var(--t-medio) ease;position:relative}
.scheda::before{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform var(--t-medio) var(--curva)}
.scheda:hover{background:var(--ink-2)}
.scheda:hover::before{transform:scaleY(1)}
.scheda__etichetta{font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.scheda p{color:var(--dim);font-size:.95rem}
.scheda a{margin-top:auto;padding-top:8px}
.scheda .link-oltre{align-self:flex-start}

/* tre pannelli grandi: sono situazioni in cui riconoscersi, non servizi */
.schede--situazioni{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.schede--situazioni .scheda{padding:clamp(26px,3.4vw,48px);gap:15px;min-height:clamp(250px,25vw,330px)}
.schede--situazioni .scheda h3{font-size:clamp(1.3rem,2.1vw,1.75rem)}
.schede--situazioni .scheda p{font-size:.98rem}

/* fasi del metodo */
.fasi{counter-reset:fase;list-style:none;margin:clamp(26px,3.4vw,44px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.fase{counter-increment:fase;background:var(--ink);padding:clamp(22px,3vw,38px);
  display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.fase{grid-template-columns:76px minmax(0,.58fr) minmax(0,1.72fr);gap:clamp(20px,3vw,44px);align-items:start}}
.fase__num{font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:.9;
  color:var(--gold);letter-spacing:-.04em}
.fase__num::before{content:"0" counter(fase)}
.fase h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:-.025em;
  font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.05;margin:0}
.fase dl{margin:14px 0 0;display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:620px){.fase dl{grid-template-columns:170px minmax(0,1fr)}}
.fase dt{font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);padding-block:10px}
.fase dd{margin:0;padding-block:10px;color:var(--dim);font-size:.95rem;border-bottom:1px solid var(--line-2)}
.fase dd:last-of-type{border-bottom:0}

/* numeri */
.numeri{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.numero{background:var(--ink);padding:clamp(24px,3.2vw,42px)}
.numero b{display:block;font-family:var(--disp);font-weight:800;letter-spacing:-.045em;line-height:.88;
  font-size:clamp(2.6rem,5.4vw,4.4rem);color:var(--gold);font-variant-numeric:tabular-nums}
.numero span{display:block;margin-top:13px;font-size:.9rem;color:var(--dim);max-width:26ch}

/* numeri della prova (27 / 21 / 7) — solo sulla home.
   Non sono schede: sono elementi grafici, e si devono percepire prima ancora
   di leggerne la descrizione. Il blocco .numeri qui sopra resta com'era,
   perché lo usa la pagina Studio. */
.proof__elenco{list-style:none;margin:0;padding:clamp(26px,3.4vw,46px) 0 0;display:grid;
  grid-template-columns:1fr;gap:clamp(34px,4.4vw,62px);border-top:1px solid var(--line)}
@media(min-width:760px){.proof__elenco{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr)}}
.proof__voce b{display:block;font-family:var(--disp);font-weight:800;color:var(--gold);
  font-size:clamp(4.6rem,13vw,10.5rem);line-height:.8;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.proof__eti{display:block;margin-top:clamp(14px,1.7vw,24px);
  font-family:var(--disp);font-weight:600;font-size:clamp(.95rem,1.15vw,1.08rem);letter-spacing:-.012em;
  line-height:1.25;color:var(--pale);max-width:22ch}
.proof__nota{display:block;margin-top:7px;font-family:var(--disp);font-weight:500;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.proof__oltre{margin-top:clamp(30px,4vw,54px)}

/* timeline del metodo: orizzontale da 900px in su, verticale sotto.
   La linea si completa mentre si scorre e i punti si accendono in ordine:
   serve a far capire che le fasi hanno una sequenza, non a decorare. */
.tl{--avanzamento:1;
  list-style:none;margin:clamp(30px,4vw,52px) 0 0;padding:0 0 0 34px;position:relative;
  display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,36px)}
.tl::before,.tl::after{content:"";position:absolute;left:0;top:7px;bottom:7px;width:1px}
.tl::before{background:var(--line)}
.tl::after{background:var(--gold);transform:scaleY(var(--avanzamento));transform-origin:top;
  transition:transform var(--t-lento) linear}
.tl__passo{position:relative}
.tl__passo::before{content:"";position:absolute;left:-34px;top:9px;width:9px;height:9px;border-radius:50%;
  transform:translateX(-4px);background:var(--ink-2);border:1px solid var(--line);
  transition:background var(--t-medio) ease,border-color var(--t-medio) ease}
.tl[data-attivi="1"] .tl__passo:nth-child(-n+1)::before,
.tl[data-attivi="2"] .tl__passo:nth-child(-n+2)::before,
.tl[data-attivi="3"] .tl__passo:nth-child(-n+3)::before,
.tl[data-attivi="4"] .tl__passo:nth-child(-n+4)::before,
.tl[data-attivi="5"] .tl__passo:nth-child(-n+5)::before{background:var(--gold);border-color:var(--gold)}
@media(min-width:900px){
  .tl{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,2.4vw,38px);padding:34px 0 0}
  .tl::before,.tl::after{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .tl::after{transform:scaleX(var(--avanzamento));transform-origin:left}
  .tl__passo::before{left:0;top:-34px;transform:translateY(-4px)}
}
.tl__num{margin:0 0 12px;font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,2.4vw,2.1rem);
  line-height:.9;letter-spacing:-.045em;color:var(--gold)}
.tl__nome{margin:0;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:-.022em;
  font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.1}
.tl__verbo{margin:9px 0 0;font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute)}
.tl__testo{margin:12px 0 0;color:var(--dim);font-size:.93rem;max-width:32ch}

/* esperienza di settore: due pannelli, tipografia grande e un dettaglio
   grafico astratto. Nessuna fotografia: meglio niente che uno stock. */
.settori{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));margin-top:clamp(26px,3.4vw,44px)}
.settore{position:relative;overflow:hidden;background:var(--ink);color:inherit;text-decoration:none;
  display:flex;flex-direction:column;gap:15px;padding:clamp(26px,3.4vw,48px);
  transition:background var(--t-medio) ease}
.settore::after{content:"";position:absolute;right:-28%;top:-52%;width:76%;aspect-ratio:1;border-radius:50%;
  border:1px solid var(--gold-line);opacity:.3;pointer-events:none;
  transition:transform var(--t-lento) var(--curva),opacity var(--t-lento) ease}
.settore:hover{background:var(--ink-2)}
.settore:hover::after{transform:translate(-16px,16px) scale(1.05);opacity:.55}
.settore__nome{margin:0;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1;color:var(--pale)}
.settore__testo{color:var(--dim);font-size:.98rem;max-width:34ch}
.settore__oltre{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--disp);font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);transition:gap var(--t-medio) var(--curva)}
.settore:hover .settore__oltre{gap:16px}

/* rotaia orizzontale (usata nella pagina Situazioni, non pubblicata) */
.rotaia{display:flex;gap:clamp(14px,1.8vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:10px;cursor:grab}
.rotaia::-webkit-scrollbar{display:none}
.rotaia.is-trascinata{cursor:grabbing;scroll-snap-type:none}
.rotaia>*{flex:0 0 clamp(260px,30vw,390px);scroll-snap-align:start}


/* == 16. DIAGRAMMA DELLA REGIA ============================================= */

.diagramma-blocco{margin-block:clamp(30px,4vw,52px)}
.commuta{display:inline-flex;border:1px solid var(--line);border-radius:100px;padding:4px;position:relative;
  margin-bottom:clamp(22px,3vw,34px)}
.commuta button{appearance:none;background:none;border:0;cursor:pointer;position:relative;z-index:2;
  font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);padding:10px 18px;border-radius:100px;white-space:nowrap;
  transition:color var(--t-medio) ease}
.commuta button[aria-pressed="true"]{color:var(--ink)}
.commuta__pillola{position:absolute;top:4px;bottom:4px;border-radius:100px;background:var(--gold);z-index:1;
  transition:transform var(--t-medio) var(--curva),width var(--t-medio) var(--curva)}

.diagramma{--spazio:20px;display:grid;grid-template-columns:1fr;gap:var(--spazio);position:relative}
@media(min-width:800px){.diagramma{--spazio:clamp(30px,5vw,78px);grid-template-columns:repeat(3,1fr);align-items:stretch}}
.nodo{border:1px solid var(--line);background:var(--ink-2);padding:22px 20px;position:relative;
  transition:opacity var(--t-medio) ease,transform var(--t-medio) var(--curva),border-color var(--t-medio) ease,background var(--t-medio) ease}
.nodo h3{font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin:0 0 10px}
.nodo p{color:var(--dim);font-size:.93rem;margin:0}
.nodo--rdl{border-color:var(--gold-line);background:linear-gradient(160deg,var(--gold-soft),transparent 72%)}
@media(min-width:800px){
  .nodo+.nodo::before{
    content:"";position:absolute;top:50%;left:calc(-1 * var(--spazio));width:var(--spazio);height:1px;
    background:repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 12px);background-size:12px 1px;
    opacity:.85;animation:scorri-trattini 1.1s linear infinite;transition:opacity var(--t-medio) ease;
  }
  .scavalco{position:absolute;left:16%;right:16%;top:-14px;height:54px;
    border-top:1px dashed var(--pale);border-radius:60px 60px 0 0;opacity:0;transition:opacity var(--t-medio) ease}
  .diagramma[data-modo="senza"] .nodo+.nodo::before{opacity:0}
  .diagramma[data-modo="senza"] .scavalco{opacity:.34}
}
@keyframes scorri-trattini{to{background-position:12px 0}}
.diagramma[data-modo="senza"] .nodo--rdl{opacity:.14;transform:scale(.94) translateY(8px);
  border-color:var(--line);background:none}
@media(max-width:799px){
  /* senza le linee di collegamento, un nodo quasi invisibile non si capisce:
     su schermi stretti resta leggibile ma barrato e con il bordo tratteggiato */
  .diagramma[data-modo="senza"] .nodo--rdl{opacity:.38;transform:none;
    border-style:dashed;border-color:var(--line)}
  .diagramma[data-modo="senza"] .nodo--rdl h3{text-decoration:line-through}
}
.diagramma__nota{margin-top:clamp(24px,3vw,36px);color:var(--dim);font-size:.96rem;max-width:66ch;min-height:4.4em}


/* == 17. DOMANDE FREQUENTI ================================================= */

.faq{border-top:1px solid var(--line);margin-top:clamp(24px,3vw,38px);max-width:82ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding-block:clamp(16px,2vw,22px);padding-right:36px;position:relative;
  font-family:var(--disp);font-weight:600;font-size:clamp(1rem,1.35vw,1.16rem);letter-spacing:-.015em;
  color:var(--pale);transition:color var(--t-veloce) ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t-medio) var(--curva)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details>div{padding-bottom:clamp(18px,2.2vw,24px);color:var(--dim);max-width:66ch}


/* == 18. UTILITÀ ============================================================
   Prendono il posto degli stili che erano scritti dentro l'HTML (style="…"):
   così la politica di sicurezza del server (.htaccess) può vietarli tutti.
   Hanno !important perché devono valere come valevano gli stili in linea.
   ========================================================================== */
.menu__barra--interna{padding-inline:0 !important}
.testo-dim{color:var(--dim) !important}
.misura-36{max-width:36ch !important}
.misura-62{max-width:62ch !important}
.misura-64{max-width:64ch !important}
.stacco-8{margin-top:8px !important}
.stacco-16{margin-top:16px !important}
.stacco-26{margin-top:26px !important}
.prosegui--senza-filetto{border-top:0 !important}
.nota-piccola{color:var(--mute);font-size:.9rem;margin-top:6px}
.recapiti{font-style:normal;color:var(--dim);line-height:1.9;font-size:1.02rem}

/* contatti: il pulsante della mail e il telefono, sulla stessa riga */
.contatto__azioni{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:clamp(24px,3vw,34px)}

/* «In sintesi» in home: sta sopra i tre numeri, nella stessa sezione */
.sintesi--home{max-width:880px;margin-bottom:clamp(40px,5vw,64px)}

/* Situazioni: il tipo di problema sopra il titolo di ogni caso */
.fasi .scheda__etichetta{font-size:.75rem;margin:0 0 10px}

/* == 19. RICHIAMO FINALE (CTA) ============================================= */

.bottone{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--disp);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--gold);color:var(--ink);border:1px solid var(--gold);border-radius:3px;
  padding:16px 26px;text-decoration:none;cursor:pointer;
  transition:gap var(--t-medio) var(--curva),filter var(--t-veloce) ease;
}
.bottone:hover{gap:20px;filter:brightness(1.08);color:var(--ink)}
.bottone--vuoto{background:none;color:var(--pale);border-color:var(--line)}
.bottone--vuoto:hover{border-color:var(--gold);color:var(--gold);filter:none}

.richiamo{background:var(--gold);color:var(--ink);padding-block:clamp(64px,9vw,140px)}
.richiamo .eyebrow{color:rgba(8,9,10,.7)}
.richiamo h2{max-width:17ch}
.richiamo p{color:rgba(8,9,10,.76);max-width:48ch;margin-top:22px;font-size:clamp(1rem,1.28vw,1.16rem)}
.richiamo .bottone{background:var(--ink);color:var(--gold);border-color:var(--ink);margin-top:clamp(28px,4vw,44px)}
.richiamo .bottone:hover{color:var(--gold)}
/* il grassetto eredita il chiaro dal corpo del testo: sull'oro sarebbe illeggibile */
.richiamo strong{color:var(--ink)}
.richiamo__micro{margin:16px 0 0;font-family:var(--disp);font-weight:500;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(8,9,10,.76)}

/* riga di collegamenti interni a fine pagina */
.prosegui{border-top:1px solid var(--line);padding-block:clamp(30px,4vw,50px)}
.prosegui h2{font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 20px}
.prosegui ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.prosegui a{display:block;border:1px solid var(--line);padding:18px 20px;text-decoration:none;color:var(--pale);
  font-family:var(--disp);font-weight:600;font-size:.98rem;letter-spacing:-.01em;
  transition:border-color var(--t-veloce) ease,background var(--t-veloce) ease}
.prosegui a:hover{border-color:var(--gold-line);background:var(--ink-2);color:var(--gold)}
.prosegui small{display:block;font-family:var(--body);font-weight:300;font-size:.85rem;color:var(--mute);
  margin-top:7px;letter-spacing:0}


/* == 20. PAGINE DI TESTO =================================================== */

.pagina-testo{max-width:76ch}
.pagina-testo h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.2rem,2vw,1.6rem);
  letter-spacing:-.022em;margin:clamp(34px,4vw,52px) 0 14px}
.pagina-testo h3{font-family:var(--disp);font-weight:600;font-size:1.02rem;margin:26px 0 10px}
.pagina-testo ul,.pagina-testo ol{color:var(--dim);padding-left:22px;margin:0 0 1.15em}
.pagina-testo li{margin-bottom:8px}
.pagina-testo p{color:var(--dim)}
.da-completare{display:inline-block;background:rgba(201,127,94,.16);border:1px solid rgba(201,127,94,.5);
  color:#E0A585;font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.06em;
  padding:2px 8px;border-radius:2px}


/* == 21. MOVIMENTO RIDOTTO E STAMPA ========================================
   Chi ha attivato "riduci movimento" nel sistema operativo vede lo stesso
   sito, fermo. Nessun contenuto dipende dall'animazione.
   ========================================================================== */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
  .comparsa{opacity:1;transform:none}
  .hero{height:auto}
  .hero__fisso{position:static;height:88svh;min-height:460px}
  .hero__mascherina{mix-blend-mode:normal;background:none;z-index:3}
  .hero__mascherina h1{color:var(--pale);text-shadow:0 2px 30px rgba(8,9,10,.8)}
  .hero__velo,.hero__messaggio{opacity:1}
  .hero__scorri{display:none}
  /* la luce oro non si muove: resta accesa al centro, il titolo è leggibile
     e la sequenza è tutta visibile */
  .criterio{--x:50%;--y:46%}
  .tl{--avanzamento:1}
}

@media print{
  .testata,.menu,.striscia,.hero__video,.criterio__rumore,.criterio__luce,
  .rivela__comando,.prosegui,.apri-menu{display:none!important}
  .criterio__corpo h2{color:#000;background:none;-webkit-text-fill-color:#000}
  body{background:#fff;color:#000;font-size:11pt}
  a{color:#000}
  .richiamo{background:none;color:#000;border-top:1px solid #000}
}


/* == 22. TRANSIZIONI FRA PAGINE ============================================
   Miglioramento progressivo: dove il browser la supporta, il passaggio da una
   pagina all'altra è animato. Dove non la supporta, la navigazione è normale.
   ========================================================================== */

@view-transition{navigation:auto}

::view-transition-old(root){animation:sfuma-via .22s ease both}
::view-transition-new(root){animation:sfuma-dentro .32s ease both}
@keyframes sfuma-via{to{opacity:0}}
@keyframes sfuma-dentro{from{opacity:0}}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}


/* == 23. RITOCCHI PER SCHERMI PICCOLI =======================================
   Le micro-etichette in maiuscoletto crescono un poco sotto i 640px.
   Sta in fondo di proposito: deve vincere sulle regole precedenti.
   ========================================================================== */

@media(max-width:640px){
  .eyebrow,.meta,.hero__scorri,.hero__hud,.criterio__sequenza,.tl__verbo,.proof__nota,
  .pie__coda,.pie__coda a,.pie__coda span{font-size:.76rem}
  .marchio span{font-size:.74rem}
  .menu__elenco small{font-size:.86rem}
}


/* == 24. SENZA JAVASCRIPT ==================================================
   Si usa la media query `scripting: none` invece di una classe aggiunta dal
   JavaScript. La differenza è importante: una classe viene tolta a pagina già
   disegnata, e tutto quello che cambia il layout provoca uno scatto (era il
   caso della hero, che passava da 88svh a 340vh). La media query invece vale
   fin dal primo disegno, quindi non sposta niente.
   ========================================================================== */

@media(scripting:none){
  /* hero: senza JavaScript non c'è la sequenza in tre atti, quindi non serve
     la corsa di scorrimento */
  .hero{height:auto}
  .hero__fisso{position:static;height:88svh;min-height:480px}
  .hero__mascherina{mix-blend-mode:normal;background:none;z-index:3}
  .hero__mascherina h1{color:var(--pale);text-shadow:0 2px 30px rgba(8,9,10,.8)}
  .hero__velo{opacity:.9}
  .hero__luce{display:none}
  .hero__messaggio{opacity:1}
  .hero__scorri{display:none}

  /* i blocchi che comparirebbero allo scorrimento sono già visibili */
  .comparsa{opacity:1;transform:none}

  /* il secondo livello diventa un blocco normale, uno sotto l'altro */
  .rivela__sotto{position:static;-webkit-mask-image:none;mask-image:none;
    padding-block:calc(var(--sez) * .7)}
  .rivela__comando{display:none}

  /* la luce oro non può muoversi: resta ferma al centro della scena, con il
     titolo acceso e le tre parole tutte leggibili (è già lo stato di partenza
     scritto nell'HTML, qui si rende esplicito) */
  .criterio{--x:50%;--y:46%}
  .tl{--avanzamento:1}

  /* la pillola scorrevole del commutatore non può muoversi: il pulsante
     premuto si tiene il proprio sfondo */
  .commuta__pillola{display:none}
  .commuta button[aria-pressed="true"]{background:var(--gold)}

  /* il menu a schermo intero non può aprirsi: si naviga dal piè di pagina */
  .apri-menu{display:none}
  .menu{display:none}
}