/* 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; }
  .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); }
  .scheda-persona__testa { grid-template-columns: 320px 1fr; align-items: center; }

  .scheda-persona__corpo { grid-template-columns: 1.4fr 0.8fr; }
}

/* La quarta colonna, e l'unico terzo punto di rottura del progetto.
   Vale SOLO per l'anteprima di «chi siamo», che mostra sempre quattro
   schede: a tre colonne la quarta resterebbe sola su una riga tutta
   sua, che e' esattamente il vuoto che si voleva togliere. Non a 900,
   dove quattro colonne darebbero schede da 163 pixel.

   Dal 1 settembre 2026 la griglia completa di /gold-specialist/ ne
   porta sei — i due soci fondatori piu' i quattro Gold Specialist — e
   a quattro colonne farebbe una riga piena e una da due. A tre resta
   due righe piene, quindi li' ci si ferma alla regola dei 900. */
@media (min-width: 1000px) {
  .consulenti--anteprima { 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);
}

.scheda-persona__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

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

/* Senza presentazione le colonne sono una sola, e il riquadro dei
   contatti torna a sinistra invece di galleggiare a destra di un
   vuoto. Sta dopo la regola dei 900 pixel apposta: stessa
   specificita', decide l'ordine. Il tetto e' quello della colonna
   che il riquadro occupava prima, cosi' non si allarga a tutta
   pagina. */
.scheda-persona__corpo--solo-agenda {
  grid-template-columns: 1fr;
  max-width: 34rem;
}

.agenda {
  align-self: start;
  padding: var(--sp-6);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  box-shadow: var(--ombra-card);
}

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

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

.agenda__dati > div {
  display: grid;
  gap: 2px;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--bordo-tenue);
}

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

.agenda__dati dd {
  margin: 0;
}

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

.agenda__vigilanza {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bordo-tenue);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  line-height: var(--interlinea-media);
}


/* 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;
}