/* PAGINE */
/* ------------------------------------------------ */
/* Cio' che riguarda una pagina sola e non si ripete altrove: il
   blog, chi siamo, le schede dei Gold Specialist.
   Nessun token nuovo: tutto viene da tema.css. */


/* IL RIENTRO SOTTO LA TESTATA */
/* ------------------------------------------------ */
/* La barra a isola galleggia sopra il contenuto. La home se ne
   occupa da sola perche' l'eroe ha un margine alto; ogni altra
   pagina ha bisogno di questo. */

.pagina {
  padding-top: 140px;
}


/* INTESTAZIONE DI PAGINA */
/* ------------------------------------------------ */

.pagina__intestazione {
  padding: 0 var(--gutter) var(--sezione-y-stretta);
}

.pagina__titolo {
  max-width: 20ch;
  margin-top: var(--sp-3);
  font-size: var(--titolo-l);
}

.pagina__sommario {
  max-width: 60ch;
  margin-top: var(--sp-5);
  color: var(--testo-attenuato);
  font-size: var(--testo-l);
}

.pagina__corpo {
  padding: 0 var(--gutter) var(--sezione-y);
}


/* ELENCHI DI ARTICOLI */
/* ------------------------------------------------ */

/* TUTTE LE SCHEDE DELLA STESSA MISURA.

   La larghezza la dava gia' la griglia. L'altezza no: ogni riga era
   alta quanto la sua scheda piu' lunga, quindi scorrendo l'elenco le
   righe ballavano e il ritmo si perdeva.

   grid-auto-rows: 1fr rende tutte le righe alte quanto la piu' alta
   di tutte, non solo quanto la piu' alta della propria riga. Da solo
   pero' non basterebbe: senza limitare il testo, un estratto lungo
   alzerebbe l'intera pagina. Percio' titolo ed estratto sono tagliati
   a un numero fisso di righe — due e tre — e cio' che avanza non si
   vede. Il titolo intero e l'estratto intero restano nell'articolo,
   che e' dove vanno letti.

   Il taglio e' -webkit-line-clamp, che ha bisogno delle altre tre
   dichiarazioni per funzionare: da solo non fa niente. */

.elenco-articoli {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--sp-4);
  list-style: none;
}

/* La riga si allunga, la voce dentro no: senza questo la scheda resta
   alta quanto il suo testo e in fondo alla casella avanza un vuoto,
   con il bordo che si ferma a meta'. E' anche cio' che porta «Leggi»
   in fondo a tutte, perche' quel margine e' automatico. */
.elenco-articoli .scheda {
  height: 100%;
}

.elenco-articoli .scheda__titolo,
.elenco-articoli .scheda__estratto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.elenco-articoli .scheda__titolo {
  -webkit-line-clamp: 2;
}

.elenco-articoli .scheda__estratto {
  -webkit-line-clamp: 3;
}

@media (min-width: 600px) {
  .elenco-articoli { grid-template-columns: 1fr 1fr; }
  .format { grid-template-columns: 1fr 1fr; }
  .filtri__riga { grid-template-columns: 2fr 1fr 1fr; }
  .filtri__riga--due { grid-template-columns: 2fr 1fr; }
  .consulenti { grid-template-columns: 1fr 1fr; }
  .contatti { grid-template-columns: 1fr 1fr; }
  .societari { grid-template-columns: 1fr 1fr; }
  .societari__voce + .societari__voce { border-top: 0; }
  .societari__voce { border-top: 1px solid var(--bordo-tenue); }
  .societari__voce:nth-child(-n + 2) { border-top: 0; }
}

@media (min-width: 900px) {
  .elenco-articoli { grid-template-columns: repeat(3, 1fr); }
  /* I format erano cinque su una riga sola. Da sei, tre e tre: su
     una riga di sei ogni scheda scenderebbe sotto i duecento pixel e
     la descrizione andrebbe a capo a ogni parola. */
  .format { grid-template-columns: repeat(3, 1fr); }
  .tappe { grid-template-columns: repeat(3, 1fr); }
  .pilastri { grid-template-columns: repeat(3, 1fr); }
  .consulenti { grid-template-columns: repeat(3, 1fr); }
  /* LA COLONNA DESTRA ALTA QUANTO IL RITRATTO.

     La riga della griglia e' alta quanto il piu' alto dei due, e il
     ritratto sta a 320x400 — `align-self: start` glielo impedisce di
     stirarsi, altrimenti una colonna destra piu' alta lo allungherebbe
     oltre il suo 4:5 e il taglio del viso cambierebbe da persona a
     persona.

     L'anagrafica invece si stira (e' il valore di partenza) e diventa
     una colonna flessibile: identita' in alto contro il bordo
     superiore della foto, pulsanti in basso contro quello inferiore,
     recapiti in mezzo. Lo spazio che avanza si divide fra i due
     stacchi invece di ammucchiarsi tutto sopra i pulsanti.

     Quando e' la colonna destra a essere piu' alta — succede fra i 900
     e i 1100 pixel, dove la disponibilita' va a capo — non avanza
     niente da distribuire e `space-between` non fa nulla: i margini
     scritti sui singoli blocchi restano quelli. */
  /* Le due colonne sono misurate, non elastiche, e `justify-content`
     centra il gruppo nella pagina: il ritratto non e' piu' incollato
     al margine sinistro con mezzo schermo vuoto a destra, e la
     sezione sta sullo stesso asse della colonna di lettura che le
     viene sotto. Con `1fr` al posto di `minmax(0, 34rem)` la seconda
     colonna si prenderebbe tutto lo spazio avanzato e non ci sarebbe
     piu' niente da centrare.

     Sotto i 1000 pixel circa le due colonne non ci stanno piu' per
     intero: la seconda si stringe, `justify-content` non ha nulla da
     spartire e il blocco torna a occupare la larghezza disponibile.
     E' il comportamento voluto, non un caso limite da correggere. */
  .scheda-persona__testa {
    grid-template-columns: 320px minmax(0, 34rem);
    justify-content: center;
  }

  .scheda-persona__ritratto { align-self: start; }

  .scheda-persona__anagrafica {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

/* La quarta colonna, e l'unico terzo punto di rottura del progetto.

   Valeva solo per l'anteprima di «chi siamo». Dal 2 settembre 2026
   vale per TUTTE le griglie di persone, su richiesta del titolare:
   quel giorno le tre schede di esempio sono uscite e la rete e'
   passata a quattro persone vere, che a quattro colonne fanno una
   riga sola e piena — in anteprima e nell'elenco completo, che ora
   mostrano esattamente le stesse quattro.

   Non a 900: li' quattro colonne darebbero schede da 163 pixel. Il
   punto di rottura resta a 1000, dove ne restano circa 210.

   Se un giorno la rete cresce, questa regola non va ritoccata — a
   quattro colonne otto persone fanno due righe piene e cinque ne
   fanno una piena e una da una sola scheda. E' il vuoto che questa
   regola nacque per togliere, e il numero da guardare e' quello. */
@media (min-width: 1000px) {
  .consulenti { grid-template-columns: repeat(4, 1fr); }
}


/* ARGOMENTI */
/* ------------------------------------------------ */

.argomenti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
  list-style: none;
}

.argomento {
  display: inline-block;
  padding: var(--sp-1) var(--sp-4);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pillola);
  color: var(--testo-attenuato);
  font-size: var(--testo-xs);
  letter-spacing: var(--traccia-s);
  transition: border-color var(--durata-media) ease,
              color var(--durata-media) ease;
}

.argomento:hover {
  border-color: var(--accento);
  color: var(--accento-leggibile);
}


/* ETICHETTE E CONTO ALLA ROVESCIA */
/* ------------------------------------------------ */
/* Venivano da componenti.css, e sono state spostate qui perche' il
   riquadro Gold Rain — {{ goldrain() }} — puo' comparire dentro un
   articolo, e un articolo ora si legge anche dentro l'area clienti.

   L'area clienti carica questo foglio e NON componenti.css, e non e'
   una svista: componenti.css dichiara .piano, .piano__nome e
   .piano__obiettivo, e la vista dei piani dell'area clienti dichiara
   gli stessi tre nomi. Caricarlo la' scombinerebbe quella vista.
   Verificato incrociando i nomi di classe dei due file.

   .etichetta condivideva un blocco con .occhiello: quello e' rimasto
   di la' e ora scrive per esteso le cinque dichiarazioni che aveva
   in comune. Cinque righe ripetute, in cambio di un solo posto in
   cui vive ciascuna delle due classi. */

.etichetta {
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-l);
  line-height: var(--interlinea-media);
  text-transform: uppercase;
}

.etichetta--centrata {
  text-align: center;
}

.conto {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.conto__unita {
  display: grid;
  gap: var(--sp-1);
  justify-items: center;
  min-width: 62px;
  padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  background: var(--superficie);
}

.conto--compatto .conto__unita {
  min-width: 52px;
  padding: var(--sp-2);
}

.conto__cifra {
  color: var(--accento-leggibile);
  font-family: var(--font-display);
  font-size: var(--titolo-s);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.conto__nome {
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.conto__data {
  margin-top: var(--sp-4);
  color: var(--testo-tenue);
  font-size: var(--testo-xs);
  text-align: center;
}


/* I SEI FORMAT */
/* ------------------------------------------------ */
/* La fascia di presentazione in cima al blog: cinque riquadri
   numerati, ognuno collegato alla pagina del suo format. */

.blog-testata {
  padding-top: 140px;
}

.format {
  display: grid;
  gap: var(--sp-4);
  list-style: none;
}

.format__collegamento {
  display: grid;
  gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-6);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  color: var(--testo);
  transition: border-color var(--durata-media) ease,
              box-shadow var(--durata-media) ease,
              transform var(--durata-media) ease;
}

/* Solo l'ancora: la scheda in attesa porta le stesse classi ma non
   porta da nessuna parte, e non deve rispondere al puntatore. */
a.format__collegamento:hover {
  border-color: var(--accento);
  box-shadow: var(--ombra-card);
  color: var(--testo);
  transform: translateY(-3px);
}

/* L'icona sta al posto del numero: stessa riga, stesso colore, ed
   e' l'unico segno della scheda. La misura e' scritta qui perche' il
   tracciato eredita solo currentColor. */
.format__segno {
  width: 30px;
  height: 30px;
  color: var(--accento);
}

/* La scheda di un format che non ha ancora articoli non e' un
   collegamento: niente puntatore a mano, niente sollevamento al
   passaggio, e il bordo resta quello a riposo. */
.format__collegamento--attesa {
  cursor: default;
}

.format__collegamento--attesa .format__argomenti {
  color: var(--accento-leggibile);
}

.format__numero {
  color: var(--accento);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
  line-height: 1;
}

.format__nome {
  font-family: var(--font-display);
  font-size: var(--titolo-s);
}

.format__descrizione {
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

.format__argomenti {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--bordo-tenue);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}


/* LA RICERCA E I FILTRI */
/* ------------------------------------------------ */

.blog-elenco {
  padding-top: 0;
}

.filtri {
  margin-bottom: var(--sp-10);
  padding: var(--sp-6);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-l);
  background: var(--superficie);
}

.filtri__riga {
  display: grid;
  gap: var(--sp-3);
}

.filtri__cerca input,
.filtri__scelta select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  background: var(--fondo);
  color: var(--testo);
  font-size: var(--testo-s);
}

.filtri__cerca input::placeholder {
  color: var(--testo-tenue);
}

.filtri__cerca input:focus-visible,
.filtri__scelta select:focus-visible {
  border-color: var(--accento);
}

.filtri__pillole {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.filtro-pillola {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pillola);
  color: var(--testo-attenuato);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
  transition: background var(--durata-media) ease,
              border-color var(--durata-media) ease,
              color var(--durata-media) ease;
}

.filtro-pillola:hover {
  border-color: var(--accento);
}

.filtro-pillola--attiva {
  border-color: var(--accento);
  background: var(--grad-accento-superficie);
  color: var(--fondo-scuro);
}

.filtri__esito {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bordo-tenue);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
}

.filtri__vuoto {
  padding: var(--sp-10) 0;
  color: var(--testo-attenuato);
  text-align: center;
}


/* UNA COLONNA DI LETTURA */
/* ------------------------------------------------ */
/* Un articolo del blog e una pagina legale non sono composizioni:
   sono colonne di lettura, e vanno trattate come tali.

   Le altre pagine appoggiano il contenuto al margine sinistro, che
   sulle griglie e' giusto. Su un testo lungo no: a 1920 pixel il testo
   finiva nel terzo sinistro dello schermo e i due terzi rimanenti
   restavano vuoti, con l'occhio costretto a tornare ogni volta a
   sinistra da molto lontano.

   Qui la colonna si centra e si ferma a 75 caratteri, che e' la
   larghezza in cui la riga si legge in un colpo solo senza perdere il
   segno andando a capo.

   Le due classi condividono le stesse righe apposta: la larghezza di
   lettura si cambia qui una volta sola, e vale per entrambe. */

.articolo .pagina__intestazione,
.articolo .pagina__corpo,
.pagina--lettura .pagina__intestazione,
.pagina--lettura .pagina__corpo {
  /* Il margine interno si somma alla colonna invece di mangiarsela:
     i 75 caratteri restano 75 anche col respiro laterale. Il numero
     sta in tema.css, perche' lo usa anche l'area clienti. */
  max-width: calc(var(--lettura-colonna) + 2 * var(--sp-6));
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

/* L'intestazione al centro: occhiello, titolo e sommario. */
.articolo .pagina__intestazione,
.pagina--lettura .pagina__intestazione {
  text-align: center;
}

.articolo .pagina__titolo,
.articolo .pagina__sommario,
.pagina--lettura .pagina__titolo,
.pagina--lettura .pagina__sommario {
  max-width: none;
  margin-inline: auto;
}

/* Il sommario NON e' centrato, e non e' un'incoerenza: e' il primo
   testo da leggere, non un'insegna. Centrato e in tondo somigliava a
   una seconda riga del titolo, e l'occhio non capiva dove finiva
   l'intestazione e cominciava l'articolo.

   Giustificato come il corpo, in corsivo, e staccato dal titolo: il
   corsivo e' un carattere vero — Jost ha il suo, ospitato in casa —
   non un'inclinazione finta del browser. Lo stacco fa il lavoro che
   altrimenti servirebbe una riga o un fregio. */
.articolo .pagina__sommario,
.pagina--lettura .pagina__sommario,
.lettura__sommario {
  margin-top: var(--sp-8);
  font-style: italic;
  text-align: justify;
  hyphens: auto;
}

.articolo .articolo__sopra {
  justify-content: center;
}

/* La prosa non ha piu' bisogno di un tetto suo: glielo da' la
   colonna che la contiene. .lettura e' l'articolo aperto dentro
   l'area clienti: la colonna se la da' da se' — il guscio ha gia' i
   suoi margini laterali e sommarci quelli di qui la stringerebbe due
   volte — ma da qui in giu' e' lo stesso articolo del blog, e legge
   le stesse righe. */
.articolo .prosa,
.pagina--lettura .prosa,
.lettura .prosa {
  max-width: none;
}

/* Testo giustificato, con la sillabazione automatica accesa.

   La sillabazione qui non e' un vezzo: senza, giustificare significa
   allargare gli spazi fra le parole finche' la riga non arriva in
   fondo, e su una parola lunga si aprono voragini bianche. Il browser
   sa dove spezzare perche' <html> dichiara lang="it".

   Solo i paragrafi: un titolo giustificato che va a capo si vedrebbe
   con la prima riga stirata da un bordo all'altro. */
.articolo .prosa p,
.pagina--lettura .prosa p,
.lettura .prosa p {
  text-align: justify;
  hyphens: auto;
}

.articolo .prosa h2,
.articolo .prosa h3,
.pagina--lettura .prosa h2,
.pagina--lettura .prosa h3,
.lettura .prosa h2,
.lettura .prosa h3 {
  text-align: left;
}

.articolo__sopra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.articolo__format {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pillola);
}

.articolo__etichetta {
  margin-top: var(--sp-14);
  font-family: var(--font-testo);
}

.articolo__ritorno {
  margin-top: var(--sp-14);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--bordo-tenue);
}


/* I QUATTRO BLOCCHI RICHIAMABILI IN UN ARTICOLO */
/* ------------------------------------------------ */
/* Erano i componenti MDX Callout, PianoCard, GoldRainBox e Cta.
   Nessun token nuovo: usano quelli del tema come tutto il resto. */

.nota {
  margin: var(--sp-8) 0;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--accento);
  border-radius: var(--raggio-s);
  background: var(--superficie);
  font-size: var(--testo-m);
}

.nota--attenzione {
  border-left-color: var(--accento-su-chiaro);
  background: var(--superficie-alt);
}

.nota__titolo {
  margin-bottom: var(--sp-3);
  color: var(--testo);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
}

.nota__corpo > * + * {
  margin-top: var(--sp-3);
}

.piano-inline,
.goldrain-inline {
  margin: var(--sp-8) 0;
  padding: var(--sp-6);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  box-shadow: var(--ombra-card);
}

.piano-inline__nome {
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-xl);
  text-transform: uppercase;
}

.piano-inline__obiettivo {
  font-family: var(--font-display);
  font-size: var(--titolo-s);
  line-height: 1;
}

.piano-inline__descrizione {
  margin-top: var(--sp-3);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
}

.piano-inline__dati {
  margin-top: var(--sp-5);
  font-size: var(--testo-s);
}

.piano-inline__dati > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--bordo-tenue);
}

.piano-inline__dati dt {
  color: var(--testo-tenue);
}

.piano-inline__dati dd {
  margin: 0;
  font-weight: var(--peso-medio);
}

.goldrain-inline {
  text-align: center;
}

.goldrain-inline__data {
  margin-top: var(--sp-4);
  color: var(--testo-tenue);
  font-size: var(--testo-xs);
}

.goldrain-inline__nota {
  margin-top: var(--sp-3);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

/* CHI SIAMO */
/* ------------------------------------------------ */

/* L'apertura e' alta esattamente una schermata, come l'eroe della
   home, e per la stessa ragione: la linea del tempo dal 2018 a oggi
   e' il racconto, e va vista tutta senza scorrere. Stesso metodo —
   min-height senza tetto, e le misure verticali che diventano
   intervalli nella media query dei 900 pixel, cosi' il contenuto
   rientra anche su una finestra alta 590. Il metodo e il comando che
   lo verifica su undici finestre stanno in
   docs/reference/altezza-della-prima-schermata.md.

   Su una finestra alta i pixel in piu' non li assorbe una fotografia,
   come fa l'eroe: li assorbe lo stacco fra il testo e le tappe, che
   restano in fondo. Un blocco unico centrato, provato prima, lasciava
   trecento pixel di vuoto sopra e sotto su un Full HD. */
.chi-siamo__apertura {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  padding-top: 180px;
  background: var(--bagliore-contesto), var(--fondo);
}

.chi-siamo__intro {
  position: relative;
  z-index: var(--z-contenuto);
  align-self: center;
}

/* Sul telefono il marchio scende sotto il testo: accanto avrebbe una
   colonna larga centoventi pixel e non si leggerebbe piu' ne' lui ne'
   il titolo. */
.chi-siamo__marchio {
  width: min(200px, 46vw);
  margin: var(--sp-10) auto 0;
}

.chi-siamo__decoro {
  position: absolute;
  inset: 0;
  z-index: var(--z-sfondo);
  pointer-events: none;
}

.chi-siamo__titolo,
.chi-siamo__sommario,
.tappe {
  position: relative;
  z-index: var(--z-contenuto);
}

.chi-siamo__titolo {
  max-width: 20ch;
  margin-top: var(--sp-4);
  font-size: var(--titolo-l);
}

.chi-siamo__sommario {
  max-width: 60ch;
  margin-top: var(--sp-6);
  color: var(--testo-attenuato);
  font-size: var(--testo-l);
}

.tappe {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-18);
  list-style: none;
}

.tappa {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--bordo);
}

.tappa__anno {
  color: var(--accento-leggibile);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
}

.tappa__titolo {
  margin-top: var(--sp-2);
  font-size: var(--testo-xl);
}

.tappa__testo {
  margin-top: var(--sp-3);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

/* GLI SPAZI VERTICALI DELL'APERTURA SEGUONO LA FINESTRA

   Le stesse cinque righe che l'eroe ha in struttura.css, per lo
   stesso motivo: senza, su una finestra alta 625 pixel — un portatile
   1366x768 — l'ultima tappa finisce sotto il bordo. Ogni misura e'
   minimo, quota proporzionale all'altezza della finestra, massimo, e
   il massimo e' sempre il valore fisso di prima: da 1060 pixel di
   finestra in su non cambia niente. Sotto i 900 di larghezza le tappe
   si impilano e una schermata non basta piu': la compressione li'
   non servirebbe a niente. */
@media (min-width: 900px) {
  .chi-siamo__apertura {
    padding-top: clamp(88px, 15svh, 180px);
  }

  /* Le stesse proporzioni delle due colonne dell'eroe. Il marchio sta
     al centro della colonna di destra e al centro verticale del
     testo, non del riquadro: e' align-items a farlo. */
  .chi-siamo__intro {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: var(--sp-18);
  }

  /* La terza misura e' il tetto sull'altezza della finestra: su una
     finestra bassa un marchio da 300 pixel sarebbe piu' alto del
     testo che deve accompagnare, e si porterebbe via lo spazio delle
     tappe. 36svh di larghezza fanno 29svh di altezza: a 41 la sezione
     sfondava di dieci pixel sulla finestra piu' bassa, misurati. */
  .chi-siamo__marchio {
    width: min(300px, 26vw, 36svh);
    margin: 0;
    justify-self: center;
  }

  .chi-siamo__titolo {
    margin-top: clamp(10px, 1.8svh, 16px);
  }

  .chi-siamo__sommario {
    margin-top: clamp(15px, 2.8svh, 24px);
  }

  .tappe {
    margin-top: clamp(30px, 6svh, 72px);
  }

  .tappa {
    padding-top: clamp(12px, 2.2svh, 20px);
  }
}

/* I quattordici pixel della frase piu' lunga.

   Il sommario dell'apertura e' azienda.descrizione, ed e' cresciuto il
   1 settembre 2026 di due categorie di clienti: sulla finestra da 590
   pixel prende una riga in piu' e la sezione arrivava a 604, misurati.
   Le tappe restavano dentro, ma l'invariante di questa pagina e'
   apertura uguale alla finestra, non "quasi".

   Si toglie aria, che e' la leva giusta finche' ce n'e': lo stacco in
   cima scende da 15svh a 12,6, che a 590 fa esattamente quei quattordici
   pixel. Il tetto di 640 non e' arrotondato: da 625 in su l'apertura era
   gia' pari alla finestra, quindi li' il minore riempimento e' margine
   che avanza e non sposta niente. Sopra i 640 non cambia un pixel. */
@media (min-width: 900px) and (max-height: 640px) {
  .chi-siamo__apertura {
    padding-top: clamp(74px, 12.6svh, 180px);
  }
}

.chi-siamo__racconto {
  padding-top: 0;
}

.chi-siamo__racconto .prosa {
  margin-inline: auto;
}


/* LA LINEA DEL RACCONTO */
/* ------------------------------------------------ */
/* Un nodo per capitolo lungo il fianco sinistro, e una linea che li
   attraversa dall'alto in basso. Le posizioni non stanno qui: le
   misura static/js/racconto.js sui titoli veri e le passa in due
   variabili, --racconto-cima e --racconto-tratto. Il perche' e'
   scritto in cima a quel file.

   Tutto sotto [data-racconto-attivo], che lo script mette solo dopo
   aver inserito almeno un nodo: senza JavaScript non c'e' spazio
   riservato, non c'e' rientro, e il racconto e' quello di prima. */

.racconto[data-racconto-attivo] {
  position: relative;
  padding-left: var(--sp-18);
}

/* La linea ferma, e sopra la stessa linea che si allunga e si spegne.
   Due elementi e non uno: quella ferma e' il binario, quella viva e'
   l'onda, e devono poter avere altezze diverse nello stesso istante. */
.racconto[data-racconto-attivo]::before,
.racconto[data-racconto-attivo]::after {
  content: "";
  position: absolute;
  top: var(--racconto-cima, 0);
  left: 23px;
  z-index: var(--z-sfondo);
  width: 2px;
  pointer-events: none;
}

.racconto[data-racconto-attivo]::before {
  height: var(--racconto-tratto, 0);
  background: var(--bordo-tenue);
}

.racconto[data-racconto-attivo]::after {
  height: 0;
  background: var(--accento);
  box-shadow: var(--ombra-alone);
}

/* Il nodo sta nel titolo ed e' posizionato rispetto a lui, cosi'
   segue il capitolo dovunque il testo lo porti. Il margine negativo
   in alto lo centra sulla prima riga del titolo invece che sul suo
   riquadro, che con un titolo su due righe sarebbe tutt'altro punto. */
/* Il nodo sta SOPRA la linea, e va detto: uno pseudo-elemento ::after
   e' l'ultimo figlio generato del suo elemento, quindi senza questi
   due z-index l'onda dorata passava davanti al cerchio invece che
   dietro — e per un istante ogni capitolo aveva una riga d'oro in
   mezzo all'icona. */
.racconto__nodo {
  position: absolute;
  left: calc(-1 * var(--sp-18));
  z-index: var(--z-contenuto);
  margin-top: -.15em;
}

.racconto__nodo .segno {
  width: 24px;
  height: 24px;
}

/* Il titolo ha bisogno di un riferimento e di aria sopra: il nodo e'
   alto 48 pixel contro i venti scarsi della riga, e senza stacco il
   cerchio del capitolo toccherebbe l'ultimo capoverso del capitolo
   precedente. */
.racconto[data-racconto-attivo] h2 {
  position: relative;
  min-height: 48px;
}

.racconto[data-racconto-attivo] h2 + * {
  margin-top: var(--sp-4);
}

.chi-siamo__richiamo {
  margin-top: var(--sp-10);
}

/* VIGILANZA E LA RETE SONO UN DISCORSO SOLO

   Chi siamo per legge e chi siamo di persona: due facce della stessa
   domanda, e fra loro c'era lo stacco pieno di due sezioni — il
   fondo dell'una piu' la cima dell'altra, fino a 220 pixel — che le
   faceva leggere come due argomenti estranei. Le due imbottiture
   scendono a tre quarti, e al loro posto passa una riga d'oro.

   La riga vive sulla seconda sezione e non fra le due: un elemento in
   mezzo sarebbe stato un terzo blocco da tenere allineato ai margini
   di entrambe. Il gradiente e' quello gia' in tema.css, che sfuma agli
   estremi e prende il colore da currentColor: qui glielo si passa
   sull'elemento stesso, perche' il testo intorno e' marrone. */

.chi-siamo__vigilanza {
  padding-bottom: calc(var(--sezione-y) * .75);
}

.chi-siamo__rete {
  padding-top: calc(var(--sezione-y) * .75);
}

.chi-siamo__rete::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-contenuto);
  height: 1px;
  background: var(--grad-divisore-orizzontale);
  color: var(--accento);
}


.pilastri {
  display: grid;
  gap: var(--sp-6);
  list-style: none;
}

.pilastro {
  padding: var(--sp-6);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
}

.pilastro__titolo {
  font-size: var(--testo-xl);
}

.pilastro__testo {
  margin-top: var(--sp-3);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}


/* I DATI SOCIETARI */
/* ------------------------------------------------ */

.societari {
  display: grid;
  gap: 0;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  overflow: hidden;
}

.societari__voce {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-6);
}

.societari__voce + .societari__voce {
  border-top: 1px solid var(--bordo-tenue);
}

.societari dt {
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
}

.societari dd {
  margin: 0;
  font-size: var(--testo-m);
}

/* Il valore verificabile e' un collegamento, ma resta prima di tutto
   un valore: tiene il colore e il corpo della riga in cui sta, e non
   diventa oro come tutti gli altri collegamenti del sito. A dire che
   si puo' cliccare bastano la sottolineatura e la freccia — che e'
   anche quel che distingue le tre righe cliccabili dalle quattro che
   non lo sono, senza bisogno di leggerle. L'oro entra al passaggio
   del puntatore, dove non compete con niente. */
.societari__registro {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--bordo-forte);
  text-underline-offset: 4px;
  transition: color var(--durata-media) ease,
              text-decoration-color var(--durata-media) ease;
}

.societari__registro:hover {
  color: var(--accento-leggibile);
  text-decoration-color: var(--accento);
}

/* La freccia sta sulla linea di base del testo, non al centro della
   riga: con align-items: baseline un'icona alta quanto una maiuscola
   scenderebbe di qualche pixel sotto le lettere. */
.societari__registro .icona {
  align-self: center;
}


/* I GOLD SPECIALIST */
/* ------------------------------------------------ */

/* Lo scarto e' piu' largo del riquadro di prima: le schede sono
   verticali e occupano meno larghezza, e lo spazio guadagnato va
   fra l'una e l'altra invece che dentro. */
.consulenti {
  display: grid;
  gap: var(--sp-10);
  list-style: none;
}

/* Verticale, con lo stesso margine su tutti e quattro i lati. La
   proporzione non e' imposta: la decidono il ritratto quadrato e le
   tre righe di testo sotto, che insieme fanno un rettangolo alto
   circa un terzo piu' che largo. */
.consulente {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-5);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  overflow: hidden;
  transition: border-color var(--durata-media) ease,
              box-shadow var(--durata-media) ease,
              transform var(--durata-media) ease;
}

.consulente:hover {
  border-color: var(--accento);
  box-shadow: var(--ombra-card);
  transform: translateY(-3px);
}

/* Quadrato e largo quanto il contenuto della scheda, non piu' una
   fascia a tutta larghezza: in formato ritratto l'immagine valeva
   due volte e mezza il testo che le sta sotto e tre schede
   riempivano una schermata intera. I segnaposto sono stati
   ridisegnati quadrati, cosi' il ritaglio non taglia niente. */
.consulente__ritratto {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--raggio-s);
  object-fit: cover;
}

/* Tutto in asse: ritratto e testo condividono lo stesso centro, cosi'
   la scheda non ha un lato pieno e uno vuoto. Il margine laterale lo
   mette gia' la scheda, qui resta solo lo stacco dal ritratto. */
.consulente__testo {
  padding: var(--sp-5) 0 0;
  text-align: center;
}

.consulente__ruolo {
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
}

.consulente__nome {
  margin-top: var(--sp-2);
  font-size: var(--titolo-s);
}

.consulente__nome a {
  color: inherit;
}

/* Tutta la card e' cliccabile, ma il collegamento resta uno solo. */
.consulente__nome a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.consulente__zona {
  margin-top: var(--sp-2);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
}

.consulente__invito {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  color: var(--accento-leggibile);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}


/* LA PAGINA DI UN GOLD SPECIALIST */
/* ------------------------------------------------ */

.scheda-persona__testa {
  display: grid;
  gap: var(--sp-8);
  padding: 0 var(--gutter) var(--sezione-y-stretta);
}

.scheda-persona__ritratto {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  border-radius: var(--raggio-l);
  object-fit: cover;
  box-shadow: var(--ombra-card-chiara);
}

.scheda-persona__nome {
  margin-top: var(--sp-3);
  font-size: var(--titolo-l);
}

.scheda-persona__zona {
  margin-top: var(--sp-3);
  color: var(--testo-attenuato);
  font-size: var(--testo-l);
}

/* I RECAPITI, ACCANTO AL RITRATTO

   Erano un riquadro bordato a meta' pagina, sotto la presentazione.
   Niente bordo e niente ombra qui: accanto al ritratto sarebbe una
   scatola dentro una scatola, e i due filetti bastano a staccare i
   dati dal nome che sta sopra e dai pulsanti che stanno sotto.

   Una colonna sola fino a 600 pixel, due da li' in su: e' la regola
   nel blocco @media in cima al file, dove stanno tutte le altre. */
.contatti {
  display: grid;
  /* Il tetto non e' un vezzo: senza, a due colonne su uno schermo da
     1440 pixel fra «Telefono» e «Disponibilita'» restano quaranta
     centimetri di niente, e i due dati smettono di leggersi come un
     blocco solo. E' lo stesso tetto della riga dei pulsanti, cosi' i
     due filetti finiscono dove finisce quella. */
  max-width: 34rem;
  gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-8);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--bordo-tenue);
  border-bottom: 1px solid var(--bordo-tenue);
  font-size: var(--testo-s);
}

.contatti > div {
  display: grid;
  gap: 2px;
}

/* `1 / -1` e non `span 2`: a una colonna sola le due scritture
   darebbero risultati diversi, e la seconda sborderebbe. */
.contatti__larga {
  grid-column: 1 / -1;
}

.contatti dt {
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.contatti dd {
  margin: 0;
}

/* Lo stacco dal filetto dei recapiti vale --sp-8 e non --sp-7: nella
   scala di tema.css il 7 NON esiste — salta dal 6 all'8 — e una
   variabile inesistente rende la dichiarazione invalida, cioe'
   margine zero. Su schermo largo non si vedeva, perche' lassu' lo
   spazio lo distribuisce `space-between`; su telefono i pulsanti
   toccavano la riga. Prima di scrivere var(--sp-N) va controllato
   che quel numero ci sia. */
.scheda-persona__azioni {
  display: flex;
  flex-wrap: wrap;
  max-width: 34rem;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

/* La colonna di lettura, il testo giustificato e la sillabazione
   arrivano da `pagina--lettura`, dichiarata sull'articolo: qui resta
   solo lo spazio in fondo. Il margine laterale NON va riscritto —
   `padding` per esteso cancellerebbe il `padding-inline` di quella
   regola, che in questo file sta prima. */
.scheda-persona__corpo {
  padding-bottom: var(--sezione-y-stretta);
}


/* LA PAGINA DI ERRORE */
/* ------------------------------------------------ */

.errore {
  display: grid;
  place-items: center;
  min-height: 70svh;
  padding: 140px var(--gutter) var(--sezione-y);
  text-align: center;
}

.errore__codice {
  color: var(--accento-leggibile);
  font-family: var(--font-display);
  font-size: var(--titolo-xl);
  line-height: 1;
}