/* 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__griglia { grid-template-columns: repeat(3, 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; }
}


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

.chi-siamo__apertura {
  padding-top: 180px;
  background: var(--bagliore-contesto), var(--fondo);
}

.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);
}

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

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

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

.chi-siamo__richiamo--centrato {
  text-align: center;
}

.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);
}

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


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

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

.consulente {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  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);
}

.consulente__ritratto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.consulente__testo {
  padding: var(--sp-5);
}

.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;
  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);
}

.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);
}


/* I CONTATTI */
/* ------------------------------------------------ */

.contatti__griglia {
  display: grid;
  gap: var(--sp-4);
}

.contatto {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  color: var(--testo);
  text-align: center;
  transition: border-color var(--durata-media) ease;
}

.contatto:hover {
  border-color: var(--accento);
  color: var(--testo);
}

.contatto--fermo:hover {
  border-color: var(--bordo);
}

.contatto__valore {
  font-family: var(--font-display);
  font-size: var(--testo-xl);
}


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