/* STRUTTURA */
/* ------------------------------------------------ */
/* Testata, piede di pagina, respiro delle sezioni e le griglie che
   dispongono i blocchi. Il vestito dei singoli pezzi sta invece in
   componenti.css.

   Il foglio e' scritto PARTENDO DAL TELEFONO: le regole di base sono
   quelle della colonna singola, e le griglie dello schermo grande
   arrivano dentro @media (min-width: 900px). Cosi' un telefono
   interpreta soltanto quello che usa, e c'e' un punto solo in tutto il
   progetto in cui la disposizione cambia. */


/* LA BARRA A ISOLA */
/* ------------------------------------------------ */

.sentinella {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-sentinella);
  width: 100%;
  height: 46px;
  /* Trasparente e inerte finche' la barra e' visibile: e' lo script a
     renderla sensibile al puntatore quando la barra si nasconde. */
  pointer-events: none;
}

.sentinella[data-attiva] {
  pointer-events: auto;
}

.testata {
  position: fixed;
  top: var(--sp-4);
  left: 50%;
  z-index: var(--z-testata);
  width: min(1180px, calc(100% - var(--sp-8)));
  transform: translateX(-50%);
  transition: transform var(--durata-lenta) ease,
              opacity var(--durata-lenta) ease;
}

.testata[data-nascosta] {
  opacity: 0;
  transform: translateX(-50%) translateY(-140px);
  pointer-events: none;
}

/* Il vetro della barra sta su uno strato SOTTO, non sulla barra
   stessa. Il motivo e' preciso: un elemento con backdrop-filter
   diventa la radice di sfondo per tutto quello che contiene, e i suoi
   discendenti che a loro volta chiedono un backdrop-filter finiscono
   per sfocare il vuoto. Con la sfocatura sulla barra, la tendina e il
   menu del telefono restavano semitrasparenti senza sfocare niente, e
   sopra un testo diventavano illeggibili.

   Spostandola su ::before, la barra non e' piu' radice di sfondo e i
   due pannelli possono avere la loro sfocatura vera. Il risultato e'
   che barra e pannelli hanno esattamente lo stesso aspetto, che e'
   il punto. */
.testata__isola {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  border-radius: var(--raggio-pillola);
  box-shadow: var(--ombra-barra);
}

.testata__isola::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--vetro-scuro);
  -webkit-backdrop-filter: var(--sfocatura-vetro);
  backdrop-filter: var(--sfocatura-vetro);
}

.testata__marchio {
  flex: none;
  line-height: 0;
}

.testata__marchio img {
  width: auto;
  height: 30px;
}

/* --- Il menu --- */

/* Sul telefono il menu e' un pannello che scende da sotto la barra,
   chiuso finche' non si tocca il bottone. Sopra i 900 pixel torna una
   riga di voci: vedi in fondo al file. */
.menu {
  position: absolute;
  top: calc(100% + var(--sp-3));
  right: 0;
  left: 0;
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border: 1px solid var(--bordo-su-scuro);
  border-radius: var(--raggio-m);
  background: var(--vetro-scuro);
  box-shadow: var(--ombra-card-scura);
  list-style: none;
  -webkit-backdrop-filter: var(--sfocatura-vetro);
  backdrop-filter: var(--sfocatura-vetro);
}

.testata[data-menu-aperto] .menu {
  display: flex;
}

.menu__voce {
  position: relative;
}

/* Spento sul telefono, dove il menu e' una colonna: un filo verticale
   fra due voci incolonnate non separerebbe niente. La forma sta in
   fondo al file, dentro lo schermo grande. */
.menu__separatore {
  display: none;
}

.menu__collegamento {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) 0;
  color: var(--testo-su-scuro-attenuato);
  font-size: var(--testo-xs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--durata-media) ease;
}

.menu__collegamento:hover,
.menu__voce--tendina[data-aperta] .menu__collegamento--tendina {
  color: var(--accento-tenue);
}

/* IL LOGIN E' UN PULSANTE, NON L'AZIONE PRINCIPALE.

   Era una pillola d'oro pieno da 97x44 con --grad-accento-superficie
   addosso: lo stesso trattamento di «Parliamone 30 minuti», che e' la
   sola cosa che questo sito deve far fare. Ma il login serve a chi e'
   gia' cliente — una minoranza, che la strada la conosce gia' — e
   dargli la voce piu' forte della barra su tutte le pagine toglieva
   peso all'unica che deve convertire. Dietro quel pulsante, per giunta,
   c'e' una dimostrazione con dati finti.

   Resta pieno, quindi resta un pulsante: cambia la tinta, che diventa
   un velo, e la misura, che scende a 84x34. L'oro pieno da qui in poi
   vuol dire una cosa sola. Ridotto il 4 settembre 2026 su richiesta del
   proprietario. */
.menu__accesso {
  display: inline-block;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--raggio-pillola);
  background: var(--superficie-accesso);
  color: var(--accento-tenue);
  font-size: var(--testo-xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--durata-media) ease,
              color var(--durata-media) ease;
}

.menu__accesso:hover {
  background: var(--superficie-accesso-viva);
  color: var(--accento-chiarissimo);
}

/* --- La tendina --- */

.gallone {
  width: 1em;
  height: 1em;
  transition: transform var(--durata-rapida) ease;
}

.menu__voce--tendina[data-aperta] .gallone {
  transform: rotate(180deg);
}

/* Sul telefono la tendina e' un rientro dentro il pannello del menu,
   non un riquadro sospeso: non c'e' spazio per farlo galleggiare. */
.tendina {
  display: none;
  padding-left: var(--sp-4);
  list-style: none;
  opacity: 0;
  transition: opacity var(--durata-rapida) ease,
              transform var(--durata-rapida) ease;
}

.menu__voce--tendina[data-aperta] .tendina {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.tendina__collegamento {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--raggio-s);
  color: var(--testo-su-scuro-attenuato);
  font-size: var(--testo-xs);
  letter-spacing: var(--traccia-s);
  transition: background var(--durata-media) ease,
              color var(--durata-media) ease;
}

.tendina__collegamento:hover {
  background: rgb(var(--rgb-accento-tenue) / .08);
  color: var(--accento-tenue);
}

/* --- Il bottone del menu, solo sul telefono --- */

.testata__interruttore {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: var(--raggio-cerchio);
  color: var(--testo-su-scuro-attenuato);
}

.testata__hamburger,
.testata__hamburger::before,
.testata__hamburger::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--durata-rapida) ease,
              opacity var(--durata-rapida) ease;
}

.testata__hamburger::before,
.testata__hamburger::after {
  content: "";
  position: absolute;
}

.testata__hamburger::before { transform: translateY(-6px); }
.testata__hamburger::after  { transform: translateY(6px); }

.testata__interruttore[aria-expanded="true"] .testata__hamburger {
  background: transparent;
}

.testata__interruttore[aria-expanded="true"] .testata__hamburger::before {
  transform: rotate(45deg);
}

.testata__interruttore[aria-expanded="true"] .testata__hamburger::after {
  transform: rotate(-45deg);
}


/* IL RESPIRO DELLE SEZIONI */
/* ------------------------------------------------ */
/* Ogni sezione della home porta la classe .sezione oltre alla sua.
   Qui c'e' cio' che hanno in comune: il fondo del proprio contesto,
   il margine laterale e il respiro sopra e sotto. */

.sezione {
  position: relative;
  padding: var(--sezione-y) var(--gutter);
  background: var(--fondo);
  color: var(--testo);
  overflow: hidden;
}

.sezione__intestazione {
  position: relative;
  z-index: var(--z-contenuto);
  margin-bottom: var(--sp-14);
}

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

.sezione__titolo {
  max-width: 22ch;
  margin-top: var(--sp-3);
  font-size: var(--titolo-m);
}

.sezione__intestazione--centrata .sezione__titolo {
  max-width: none;
  margin-inline: auto;
}

.sezione__sottotitolo {
  max-width: 56ch;
  margin-top: var(--sp-4);
  color: var(--testo-attenuato);
  font-size: var(--testo-m);
}

.sezione__intestazione--centrata .sezione__sottotitolo {
  margin-inline: auto;
}

/* Un nome messo in evidenza dentro un sottotitolo. Senza questa regola
   prende il grassetto predefinito del browser, cioe' 700, e resta del
   colore attenuato del paragrafo: una macchia scura che pesa senza
   distinguersi. Qui come altrove nel progetto — .prosa strong,
   .profilo__modi strong — lo stacco lo fa il colore e il peso sale di
   un gradino solo. */
.sezione__sottotitolo strong {
  color: var(--testo);
  font-weight: var(--peso-medio);
}


/* L'EROE */
/* ------------------------------------------------ */

/* L'eroe e' alto esattamente una schermata, sempre.

   Qui c'era un tetto a 860 pixel, messo contro il vuoto che lasciava
   min-height: 100svh su uno schermo alto. Curava il vuoto e apriva il
   difetto opposto: su una finestra da 945 pixel l'eroe si fermava 85
   pixel prima del bordo e lasciava intravedere il marrone della
   sezione successiva; a 1080 erano 220 pixel, a 1300 erano 440.

   Senza tetto quei pixel se li prende la fotografia, che e' fuori dal
   flusso e ritagliata con object-fit: cresce l'immagine, non il
   vuoto. Perche' questo non tagli la fascia certificazioni sui
   portatili bassi, il contenuto deve poter rientrare, e i suoi spazi
   verticali diventano fluidi nella media query dei 900 pixel. */
.eroe {
  display: grid;
  /* Il contenuto prende lo spazio, la fascia certificazioni resta
     incollata in fondo invece di galleggiare. */
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  padding-top: 128px;
  padding-bottom: 0;
  background: var(--bagliore-contesto), var(--fondo);
}

.eroe__decoro,
.eroe__pattern {
  position: absolute;
  inset: 0;
  z-index: var(--z-sfondo);
  pointer-events: none;
}

/* Lo strato del fiore sfuma sopra e sotto, cosi' il disegno non
   finisce di netto contro il bordo della sezione. La maschera che
   segue il puntatore sta invece sul fiore: due elementi, due
   maschere, nessuna composizione da mettere d'accordo. */
.eroe__pattern {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.eroe__griglia {
  position: relative;
  z-index: var(--z-contenuto);
  display: grid;
  /* Centrato nello spazio disponibile, ma la riga resta alta quanto
     il suo contenuto: se si stirasse, si stirerebbe con lei anche la
     colonna dell'immagine. */
  align-content: center;
  gap: var(--sp-10);
  padding-bottom: var(--sp-14);
}

.eroe__titolo {
  margin-top: var(--sp-6);
  font-size: var(--titolo-xl);
}

.eroe__citazione {
  max-width: 44ch;
  margin-top: var(--sp-6);
  color: var(--accento-su-chiaro);
  font-size: var(--testo-l);
  font-style: italic;
  line-height: var(--interlinea-media);
}

.eroe__corpo {
  max-width: 46ch;
  margin-top: var(--sp-6);
  color: var(--testo-attenuato);
}

.eroe__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
  margin-top: var(--sp-10);
}

.eroe__nota {
  max-width: 40ch;
  margin-top: var(--sp-5);
  color: var(--testo-tenue);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

/* Lo strato del fiore, dentro la griglia. Riquadro suo per non far
   fondere il fiore con il testo: mix-blend-mode ha bisogno di un
   contesto di sovrapposizione tutto suo, e questo glielo da'. */
.eroe__pattern {
  position: absolute;
  inset: 0;
  z-index: var(--z-sfondo);
  pointer-events: none;
}

/* Testo e figura sopra il pattern. */
.eroe__testo,
.eroe__figura {
  position: relative;
  z-index: var(--z-contenuto);
}

.eroe__immagine {
  position: relative;
  margin: 0;
}

/* La cornice avvolge la sola fotografia, didascalia esclusa: e' il
   riferimento delle due targhette, che devono stare sul bordo
   dell'immagine e non su quello della figura. */
.eroe__cornice {
  position: relative;
}

.eroe__immagine img {
  width: 100%;
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra-rilievo);
}

/* Lo stacco e' largo quanto serve alla targhetta che sporge sotto
   l'immagine: con meno, la prima riga finisce sotto la targhetta. */
.eroe__didascalia {
  margin-top: var(--sp-10);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  line-height: var(--interlinea-media);
}


/* LA CITAZIONE */
/* ------------------------------------------------ */

/* Imbottitura sua e non quella condivisa: --sezione-y-stretta e' gia'
   la ridotta, ma resta pensata per una sezione che contiene qualcosa.
   Qui dentro c'e' un paragrafo e basta, e con l'imbottitura comune la
   fascia scura risultava alta il doppio del testo che ospita. */
.citazione {
  padding-block: clamp(32px, 4.5vh, 56px);
  text-align: center;
}

/* IL CORPO NON E' PIU' CALCOLATO SUL VERSO INTERO

   Fino al 16 settembre 2026 qui c'erano quattro versi brevi, e il
   corpo era 5,2vw: una misura tarata sul verso piu' lungo — «Ma a te
   dicono di restare su fondi», 15,5 volte il corpo — perche' i versi
   andavano tenuti interi su ogni larghezza.

   La frase nuova e' lunga il doppio: «I grandi fondi di investimento
   lo accumulano, le banche centrali lo comprano» misura circa 35
   volte il corpo. Tenerla intera negli 86vw disponibili vorrebbe dire
   2,4vw, cioe' nove pixel su un telefono da 390: illeggibile. Quindi
   la regola cambia — la frase PUO' andare a capo, e cio' che va
   tenuto intero sono le due frasi, separate dal <br>.

   La frase nuova e' lunga il doppio: «I grandi fondi di investimento
   lo accumulano, le banche centrali lo comprano» misura circa 41
   volte il corpo. Tenerla intera negli 86vw disponibili vorrebbe dire
   2,1vw, cioe' otto pixel su un telefono da 390: illeggibile. Il
   termine in vw resta quindi tarato per tenerla intera — 2vw, con un
   punto percentuale di margine sulla misura vera, verificata a 1024,
   1280, 1440, 1600 e 1920 — e il minimo di 19 pixel comanda sotto i
   950, dove la frase va a capo perche' non puo' fare altrimenti.

   Il capo, quando arriva, non deve lasciare una parola sola in fondo:
   a questo serve `text-wrap: balance`. E NON c'e' un tetto alla
   misura: un max-width in em manderebbe a capo la frase molto prima
   che lo schermo lo imponga, spezzando «lo / accumulano».

   Il tetto del corpo resta 34 e non 46 perche' a 46 la citazione
   competeva con i titoli di sezione, che a 1440 stanno a 44,6. */
.citazione__testo {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 34px);
  line-height: var(--interlinea-stretta);
  text-wrap: balance;
}


/* DA DOVE VENIAMO: L'ARCO PROPORZIONALE */
/* ------------------------------------------------ */
/* Questa e' la regola del TELEFONO, perche' il foglio e' mobile-first:
   l'arco e' coricato, il filo e' un bordo a sinistra e i nodi gli
   stanno sopra. La versione orizzontale sta in fondo, dentro la media
   query dei 900 pixel.

   La proporzione fra i tre momenti e' la sola idea della sezione, e
   sopravvive al cambio di disposizione cambiando asse: in orizzontale
   e' la LARGHEZZA dei blocchi, qui e' lo spazio VERTICALE sotto
   ognuno. Sei anni sono la strada che si scorre prima di arrivare al
   2024.

   Il nodo e' uno pseudo-elemento e non .passo__nodo, che pure
   esisterebbe gia'. Quella classe la usano Gold Way e il racconto di
   «chi siamo», e telefono.css la inchioda a left: 0 per la variante
   verticale del primo: riusarla qui significherebbe ereditare una
   regola scritta per un altro componente e scoprirlo su un telefono.
   Nove pixel di cerchio non valgono quel rischio. */

.arco {
  display: grid;
  list-style: none;
}

.arco__tappa {
  position: relative;
  padding-left: var(--sp-6);
  border-left: 1px solid var(--bordo);
}

.arco__tappa::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  margin-left: -5px;
  border-radius: var(--raggio-cerchio);
  background: var(--accento);
}

/* Lo spazio vuoto E' il tempo che passa. */
.arco__tappa--lunga { padding-bottom: var(--sp-18); }
.arco__tappa--media { padding-bottom: var(--sp-10); }

/* L'ultimo non prolunga il filo oltre il proprio nodo: la linea
   arriva a «Oggi» e finisce li'. Il rientro resta, o i tre blocchi
   non sarebbero incolonnati. */
.arco__tappa--fine { border-left-color: transparent; }

.arco__anno {
  color: var(--accento-leggibile);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
  line-height: var(--interlinea-stretta);
}

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

/* Nessun tetto alla larghezza qui: sul telefono il testo arriva al
   margine destro come fa quello dei tre passi della sezione scura, e
   sono la stessa cosa a due schermate di distanza. Il tetto serve solo
   al desktop, dove la prima colonna e' larga 6fr, ed e' scritto li'. */
.arco__testo {
  margin-top: var(--sp-3);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

/* I nomi dei due soci, dentro un testo attenuato. Lo stacco lo fa il
   COLORE, e il peso resta medio: e' la convenzione del progetto, la
   stessa di .profilo__modi strong e di .prosa strong. Il grassetto
   pieno del browser su tredici pixel di Jost fa una macchia scura
   invece di un'enfasi, e qui sono due nomi in fila. */
.arco__testo strong {
  color: var(--testo);
  font-weight: var(--peso-medio);
}


/* I VOLTI */
/* ------------------------------------------------ */
/* Ritratti tondi e piccoli, non le schede quadrate di «chi siamo»:
   li' sono profili da consultare, qui sono persone da riconoscere.
   Le sorgenti sono le stesse immagini 800x800 gia' nel progetto. */

.volti {
  margin-top: var(--sp-18);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--bordo-tenue);
  text-align: center;
}

.volti__frase {
  max-width: 34ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--titolo-s);
  line-height: var(--interlinea-media);
}

/* DUE PER DUE SUL TELEFONO, E NON QUATTRO CHE VANNO A CAPO. Con
   flex-wrap i quattro ritratti su 390 pixel uscivano tre piu' uno, e
   l'ultimo restava solo su una riga tutta sua: e' lo stesso difetto
   che il progetto evita sulla griglia dei Gold Specialist, dove
   quattro e' il numero che riempie la riga. Una griglia a due colonne
   non ha modo di sbagliare. */
.volti__fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  list-style: none;
}

/* Quadrati smussati, non tondi. Il raggio e' --raggio-s, che e' lo
   stesso di .consulente__ritratto: il ritratto quadrato dentro la
   scheda Gold Specialist. Cosi' lo stesso viso ha la stessa forma
   ovunque compaia, e qui non nasce una terza smussatura inventata. */
.volti__ritratto {
  width: 78px;
  height: 78px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  object-fit: cover;
}

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

.volti__richiamo { margin-top: var(--sp-8); }


/* PERCHÉ LO FACCIAMO: I TRE PASSI */
/* ------------------------------------------------ */

/* .gradini e NON .metodo, che pure sarebbe il nome giusto: quello e'
   gia' della fisarmonica in componenti.css, foglio che si carica dopo
   questo e che quindi vince a parita' di specificita'. Il titolo di
   ogni passo usciva in corpo xxs, color testo-tenue e preceduto da un
   «+» — il segno di un <details> chiuso. Niente nel progetto controlla
   le collisioni di nome fra fogli: si vedono guardando la pagina. */
.gradini {
  display: grid;
  gap: var(--sp-8);
  list-style: none;
}

/* IL SEGMENTO SOPRA IL NUMERO ROMANO. Un filo sottile per tutta la
   colonna: separa i tre passi e gli da' una riga da cui partire,
   com'e' la riga d'imposta sopra un'iscrizione.

   Il tono e' --bordo-forte e non --bordo, che era quello della
   versione precedente: su fondo bruno --bordo sta al ventotto per
   cento di opacita' e a colpo d'occhio spariva, tanto che il filo
   sembrava non esserci. Al quarantacinque si vede restando un filo.

   E' uno pseudo-elemento e non un border-top perche' cosi' il suo
   spessore non entra nel calcolo del riquadro: cambiare il tratto non
   sposta di un pixel il testo sotto. */
.gradino::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: var(--sp-5);
  background: var(--bordo-forte);
}

/* Marcellus esiste solo al peso 400: il numero si stacca per corpo e
   per colore, mai per grassetto — chiederlo produrrebbe un finto
   neretto calcolato dal browser. */
.gradino__numero {
  color: var(--accento);
  font-family: var(--font-display);
  font-size: var(--titolo-s);
  line-height: var(--interlinea-stretta);
  letter-spacing: var(--traccia-s);
}

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

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

.missione__visione {
  max-width: 30ch;
  margin: var(--sp-18) auto 0;
  font-family: var(--font-display);
  font-size: var(--titolo-sm);
  line-height: var(--interlinea-media);
  text-align: center;
}


/* I DUE PROFILI */
/* ------------------------------------------------ */

.profili__griglia {
  display: grid;
  gap: var(--sp-6);
}


/* IL PERCHÉ */
/* ------------------------------------------------ */

.perche {
  background: var(--bagliore-contesto), var(--fondo);
}

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

.perche__capo {
  position: relative;
  z-index: var(--z-contenuto);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--bordo-tenue);
}

.perche__capo--secondo {
  margin-top: var(--sp-18);
}

.perche__numero {
  color: var(--accento);
}

.ragioni {
  position: relative;
  z-index: var(--z-contenuto);
  display: grid;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
  list-style: none;
}

.eccellenza {
  position: relative;
  z-index: var(--z-contenuto);
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}


/* I NUMERI */
/* ------------------------------------------------ */

.numeri__intestazione {
  display: grid;
  gap: var(--sp-8);
}

.numeri__scelta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.numeri__indizio {
  max-width: 34ch;
  color: var(--testo-tenue);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
  text-align: center;
}

.numeri__vista--nascosta {
  display: none;
}

.numeri__richiamo {
  margin-top: var(--sp-10);
  font-family: var(--font-display);
  font-size: var(--titolo-s);
  text-align: center;
}

.retro__capo {
  display: grid;
  gap: var(--sp-6);
  align-items: end;
  margin-bottom: var(--sp-8);
}

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

/* L'asterisco che rimanda alla nota sotto la tabella. `line-height: 0`
   insieme a vertical-align: super serve a non far crescere la riga del
   titolo: senza, l'asterisco alzato allarga l'interlinea di quella riga
   sola e il titolo su due righe si scompagina. */
.rimando {
  color: var(--accento-leggibile);
  font-size: .55em;
  line-height: 0;
  vertical-align: super;
}

.rimando:hover {
  text-decoration: underline;
}

.retro__sottotitolo {
  max-width: 46ch;
  margin-top: var(--sp-3);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
}

.simulatore {
  display: grid;
  gap: var(--sp-8);
}

.simulatore__comandi {
  display: grid;
  gap: var(--sp-8);
  align-content: start;
}


/* I PIANI */
/* ------------------------------------------------ */

.piani {
  background: var(--bagliore-contesto), var(--fondo);
}

.piani__griglia {
  display: grid;
  gap: var(--sp-5);
  align-items: stretch;
}

.piani__nota {
  margin-top: var(--sp-10);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  text-align: center;
}


/* GOLD WAY */
/* ------------------------------------------------ */

.percorso {
  position: relative;
}

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

.goldway__richiamo {
  margin-top: var(--sp-14);
  text-align: center;
}


/* GOLD RAIN */
/* ------------------------------------------------ */

.goldrain {
  display: flex;
  flex-direction: column;
  gap: var(--sp-18);
  min-height: 100svh;
  justify-content: center;
  background: var(--bagliore-contesto), var(--fondo);
}

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

/* I tre segmenti fissi. Stessa materia delle gocce — un filo di un
   pixel con il gradiente che sfuma alle due estremita' — ma fermi:
   una goccia si legge come caduta solo se accanto c'e' qualcosa che
   non cade. Le tre altezze sono diverse di proposito, e nessuna
   coincide con la meta' della sezione. */
.goldrain__aste {
  position: absolute;
  inset: 0;
  z-index: var(--z-sfondo);
  pointer-events: none;
}

.asta {
  position: absolute;
  width: 1px;
  color: var(--accento-tenue);
  background: var(--grad-divisore);
  opacity: .55;
}

/* Il segmento di mezzo e' l'unico che passerebbe dentro la colonna
   centrata, cioe' sopra il testo e i due pulsanti. La sua posizione
   non e' una percentuale ma una distanza dal centro: la fila dei due
   pulsanti e' larga 620 pixel fissi, quindi comincia a meta' meno
   310, e 340 lascia trenta pixel d'aria. Il 4% e' il pavimento per
   le finestre strette, dove meta' meno 340 uscirebbe dallo schermo:
   li' i pulsanti si impilano e lo spazio libero torna ai lati. */
.asta:nth-child(1) { left: 13%; top:  8%; height: 26%; }
.asta:nth-child(2) { left: max(4%, calc(50% - 340px)); top: 44%; height: 38%; }
.asta:nth-child(3) { left: 81%; top: 20%; height: 18%; }

.goldrain__centro {
  position: relative;
  z-index: var(--z-contenuto);
  text-align: center;
}

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

.goldrain__claim {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
}

/* Sessantadue caratteri e non cinquantasei. Il paragrafo e' scritto
   in due righe separate da un <br>, e la prima — «Gli acquisti di
   Aurum Evolution avvengono in due sole giornate al mese: il 10 e il
   25.» — al corpo --testo-s ne misura 467 di pixel. A 56ch il
   riquadro ne offriva 448 e quella riga si spezzava dopo «e il»,
   lasciando «25.» da solo su una terza riga. Il valore non e' scelto
   tondo: e' il primo che sta largo abbastanza, con una dozzina di
   pixel di margine.

   Sul telefono resta su due righe, e non e' una dimenticanza. A 390
   pixel di schermo ne restano 335 di larghezza: per far stare quella
   frase su una riga sola servirebbe il corpo a 9 pixel, contro i 13
   di adesso e i 10 della misura piu' piccola dell'intero progetto.
   Anche a margini azzerati ne servirebbero 10,5. L'unica leva vera
   sarebbe accorciare la frase, ed e' una decisione editoriale: posta
   al proprietario il 31 agosto 2026, che ha scelto di tenere il testo
   intero e le due righe. */
.goldrain__testo {
  max-width: 62ch;
  margin: var(--sp-5) auto 0;
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
}

.goldrain__centro .etichetta {
  margin-top: var(--sp-10);
}

.goldrain__azioni {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

/* Tre righe: il titolo, il nastro delle card, e in fondo i comandi.
   Le aree hanno un nome perche' sullo schermo grande la stessa riga
   di comandi si scioglie — le frecce spariscono e «Vedi tutti» risale
   accanto al titolo — e un riordino per aree evita di scrivere due
   volte lo stesso collegamento nel modello per poi nasconderne uno. */
.appuntamenti {
  position: relative;
  z-index: var(--z-contenuto);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "capo   capo"
    "lista  lista"
    "frecce tutti";
  gap: var(--sp-5);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--bordo-tenue);
}

.appuntamenti__capo { grid-area: capo; }
.appuntamenti__finestra { grid-area: lista; }
.appuntamenti__frecce { grid-area: frecce; }

.appuntamenti__tutti {
  grid-area: tutti;
  justify-self: end;
  align-self: center;
}

.appuntamenti__titolo {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: var(--testo-xl);
}

/* Lo stesso contenitore a scorrimento con aggancio del carousel degli
   articoli: cosi' il dito e le frecce muovono la stessa cosa e non
   serve una seconda implementazione per il tocco.

   Il respiro verticale c'e' perche' la card cambia bordo al passaggio
   del puntatore e un asse qui e' `auto`: il CSS impone allora che
   l'altro non possa restare `visible`, e senza margine interno il
   bordo superiore verrebbe tagliato via. */
.appuntamenti__finestra {
  padding-block: var(--sp-2);
  margin-block: calc(var(--sp-2) * -1);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.appuntamenti__finestra::-webkit-scrollbar {
  display: none;
}

/* Colonne di larghezza calcolata e non `1fr`: dentro un contenitore a
   scorrimento `1fr` misura il contenuto, non la finestra, e le card
   si stringerebbero tutte dentro lo schermo invece di sporgere. Due
   card intere per schermata piu' lo stacco fra loro. */
.appuntamenti__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--sp-4)) / 2);
  gap: var(--sp-4);
  align-items: stretch;
}

.appuntamenti__frecce {
  display: flex;
  gap: var(--sp-2);
}


/* GOLD INSIGHT */
/* ------------------------------------------------ */

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

/* Un blocco solo, non piu' due colonne: la pillola e' salita
   accanto all'occhiello e la destra resta libera per l'anello. */
.goldinsight__capo {
  position: relative;
  z-index: var(--z-contenuto);
  margin-bottom: var(--sp-10);
}

/* L'occhiello e la pillola sulla stessa riga: "Formazione" dice di
   cosa si tratta, la pillola cosa ci trovi. Separate erano due
   frammenti agli angoli opposti dello schermo. */
.goldinsight__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

/* Qui la pillola non e' piu' una pillola: e' la seconda meta' di
   una didascalia sola. Via il margine interno che la teneva
   staccata, e un punto mediano a legare le due parti. */
.goldinsight__riga .pillola {
  padding-inline: 0;
}

.goldinsight__riga .pillola::before {
  content: "\00B7";
  margin-right: var(--sp-3);
}

.goldinsight__titolo {
  margin-top: var(--sp-3);
  font-size: var(--titolo-m);
}

.goldinsight__claim {
  margin-top: var(--sp-3);
  color: var(--testo-attenuato);
  font-style: italic;
}

.canali {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-14);
  list-style: none;
}


/* PARTNERSHIP */
/* ------------------------------------------------ */

.partnership__capo {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
  margin-bottom: var(--sp-10);
}

.partnership__griglia {
  display: grid;
  gap: var(--sp-5);
}

/* La Gold Academy e' la quarta cella della griglia dei partner, non
   un blocco appeso sotto: sul telefono deve poter stare accanto alle
   altre. Da 600 pixel in su riprende la riga intera — vedi
   grid-column piu' avanti — e torna la fascia larga di sempre. */
.accademia {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--velo-chiaro);
}

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

.accademia__testo {
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
}

/* Da 600 pixel in su la Gold Academy riprende la riga intera e torna
   la fascia larga: imbottitura e raggio maggiori delle card, e il
   titolo su una riga sola. Il margine ricostruisce lo stacco che
   aveva quando stava fuori dalla griglia — quattro pixel in piu' del
   distacco fra le righe. */
@media (min-width: 600px) {
  .accademia {
    grid-column: 1 / -1;
    margin-top: var(--sp-1);
    padding: var(--sp-8);
    border-radius: var(--raggio-l);
  }

  .accademia__titolo {
    white-space: nowrap;
  }
}


/* LA CHIUSURA */
/* ------------------------------------------------ */

.chiusura {
  background: var(--bagliore-contesto), var(--fondo);
  text-align: center;
}

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

/* Il marchio e il manifesto si contendono la stessa schermata: qui il
   logo cresce e il testo scende di un gradino, cosi' l'ultima cosa
   che si vede e' il marchio e non un paragrafo. Il tetto resta sotto
   i 420px del file, che non va ingrandito oltre il suo vero. */
.chiusura__logo {
  position: relative;
  z-index: var(--z-contenuto);
  width: min(290px, 60vw);
  margin: 0 auto;
}

.chiusura__manifesto {
  position: relative;
  z-index: var(--z-contenuto);
  max-width: 26ch;
  margin: var(--sp-10) auto 0;
  font-size: var(--titolo-sm);
  line-height: var(--interlinea-media);
}

.chiusura .bottone {
  position: relative;
  z-index: var(--z-contenuto);
  margin-top: var(--sp-10);
}

.chiusura__chiosa {
  position: relative;
  z-index: var(--z-contenuto);
  margin-top: var(--sp-8);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
}

.chiusura__nota {
  position: relative;
  z-index: var(--z-contenuto);
  margin-top: var(--sp-3);
  color: var(--testo-tenue);
  font-size: var(--testo-s);
}


/* IL PIEDE DI PAGINA */
/* ------------------------------------------------ */

.pie {
  padding: var(--sp-18) var(--gutter) var(--sp-8);
  background: var(--fondo);
  color: var(--testo);
}

.pie__griglia {
  display: grid;
  gap: var(--sp-10);
}

.pie__logo {
  width: 150px;
}

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

.pie__dati {
  margin-top: var(--sp-4);
  color: var(--testo-tenue);
  font-size: var(--testo-xs);
  line-height: var(--interlinea-media);
}

.pie__titolo {
  margin-bottom: var(--sp-5);
  color: var(--accento-tenue);
  font-family: var(--font-testo);
  font-size: var(--testo-xxs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-xl);
  text-transform: uppercase;
}

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

.pie__elenco a {
  color: var(--testo-su-scuro-attenuato);
  font-size: var(--testo-s);
}

.pie__elenco a:hover {
  color: var(--accento-tenue);
}

.pie__elenco--trust a {
  border-bottom: 1px solid var(--bordo-tenue);
}

.pie__barra {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-14);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--bordo-tenue);
  color: var(--testo-su-scuro-tenue);
  font-size: var(--testo-xs);
}

.pie__recapiti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}


/* LO SCHERMO GRANDE */
/* ------------------------------------------------ */
/* Da qui in giu' c'e' tutto e solo cio' che cambia sopra i 900 pixel.
   Un telefono legge queste regole ma non le applica mai. */

@media (min-width: 900px) {

  .testata__interruttore { display: none; }

  /* La barra si stringe su quello che contiene invece di occupare
     tutta la larghezza. Con width: max-content il riquadro e' largo
     esattamente quanto le voci piu' il pulsante, e il
     translateX(-50%) della regola di base lo tiene al centro dello
     schermo qualunque larghezza risulti.

     Prima era largo 1180 pixel fissi: il pulsante Login finiva
     all'estremo destro e in mezzo restava un vuoto che non diceva
     niente. */
  .testata {
    width: max-content;
    max-width: calc(100% - var(--sp-8));
  }

  /* Il menu smette di essere un pannello e torna una riga di voci.
     flex: none, non flex: 1: se il menu si allargasse a riempire, la
     barra tornerebbe larga quanto lo spazio disponibile. */
  .menu {
    position: static;
    display: flex;
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-5);
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Nessuno stacco in piu' prima del pulsante: gli stessi venti pixel
     che separano ogni voce dalla successiva. Ce n'erano ventotto, otto
     dei quali di margine dedicato, e servivano a staccare la pillola
     d'oro pieno da cio' che la precedeva. Da quando il Login e' un velo
     e non un richiamo, quello stacco lo faceva sembrare lontano dal
     menu invece che l'ultima delle sue voci — e la distanza che l'occhio
     misura non e' fino al bordo della pillola ma fino alla sua scritta,
     che ha gia' venti pixel di riempimento suoi. */
  .menu__voce--accesso { margin-left: 0; }

  /* IL FILO FRA LE DUE META' DEL MENU.

     Le voci a sinistra portano a un punto della home, quelle a destra
     a una pagina dedicata: sono due gesti diversi e finora si
     leggevano come una fila sola.

     Alto diciotto pixel, non quanto la barra: deve separare le
     scritte, non tagliare in due il vetro. Stesso filo del bordo
     dell'isola, cosi' non arriva un secondo tono d'oro. */
  .menu__separatore {
    display: block;
    align-self: center;
    width: 1px;
    height: 18px;
    background: var(--bordo-su-scuro);
  }

  /* La tendina torna un pannello sospeso sotto la sua voce. Resta nel
     documento anche da chiusa — invisibile e inerte — perche' la
     comparsa deve poter sfumare, e display:none non sfuma.

     Stesso vetro della barra: deve sembrare la barra che si allunga,
     non un secondo oggetto appoggiato sopra. */
  .tendina {
    position: absolute;
    top: calc(100% + var(--sp-3));
    left: 50%;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    padding: var(--sp-2);
    border: 1px solid var(--bordo-su-scuro);
    border-radius: var(--raggio-m);
    background: var(--vetro-scuro);
    box-shadow: var(--ombra-card-scura);
    transform: translateX(-50%) translateY(-8px);
    pointer-events: none;
    -webkit-backdrop-filter: var(--sfocatura-vetro);
    backdrop-filter: var(--sfocatura-vetro);
  }

  .menu__voce--tendina[data-aperta] .tendina {
    transform: translateX(-50%) translateY(0);
  }

  /* GLI SPAZI VERTICALI DELL'EROE SEGUONO LA FINESTRA

     Il contenuto dell'eroe e' alto 700 pixel su una finestra larga
     1280 e 725 da 1600 in su. Su una finestra alta 625 — un portatile
     1366x768, o un Full HD con Windows al 150% — sfondava, e la
     fascia certificazioni finiva sotto il bordo: 83 pixel invisibili,
     cioe' le quattro autorizzazioni che danno credito al sito.

     Ogni misura qui sotto e' un intervallo: minimo, quota
     proporzionale all'altezza della finestra, massimo. Il massimo e'
     sempre il valore fisso di prima, quindi da 860 pixel di finestra
     in su non cambia niente. Sotto, l'eroe si stringe per gradi
     togliendo aria e non contenuto: circa 115 pixel recuperati sulla
     finestra piu' bassa, che bastano fino a 590. */
  .eroe {
    padding-top: clamp(92px, 15svh, 128px);
  }

  .eroe__titolo,
  .eroe__citazione,
  .eroe__corpo {
    margin-top: clamp(15px, 2.8svh, 24px);
  }

  .eroe__azioni {
    margin-top: clamp(25px, 4.6svh, 40px);
  }

  .eroe__nota {
    margin-top: clamp(13px, 2.3svh, 20px);
  }

  /* Solo la fascia dentro l'eroe: e' l'unica che deve stare sopra il
     bordo della finestra. */
  .eroe .fascia {
    padding-block: clamp(10px, 1.8svh, 16px);
  }

  .eroe__griglia {
    padding-bottom: clamp(35px, 6.5svh, 56px);
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-18);
    /* stretch e non center: la colonna dell'immagine deve essere alta
       quanto quella del testo, non galleggiarci accanto. */
    align-items: stretch;
  }

  /* L'IMMAGINE SEGUE IL TESTO, NON VICEVERSA

     L'immagine e' un ritratto 896x1200: lasciata alla sua proporzione
     naturale diventava molto piu' alta della colonna di testo accanto,
     e l'eroe risultava sbilanciato.

     Il modo per farle seguire il testo e' toglierla dal flusso: cosi'
     non ha voce in capitolo sull'altezza della riga, che viene decisa
     dalla sola colonna di testo. La figura, che resta nel flusso, si
     stira fino a quell'altezza, e l'immagine la riempie ritagliandosi
     con object-fit invece di deformarsi. */
  .eroe__immagine {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
  }

  .eroe__cornice {
    flex: 1;
    display: flex;
    /* Senza questo un elemento flessibile non scende sotto la propria
       altezza naturale, e tutto il ragionamento salta. */
    min-height: 0;
  }

  .eroe__immagine img {
    flex: 1;
    min-height: 0;
    height: 100%;
    object-fit: cover;
  }

  /* L'ARCO SI ALZA, E LA PROPORZIONE PASSA ALLE LARGHEZZE.

     6fr e 2fr sono i sei anni fra il 2018 e il 2024 e i due fra il
     2024 e oggi. Non sono un calcolo: sono una proporzione scritta a
     mano, e va riguardata quando il secondo tratto sara' cresciuto
     abbastanza da rendere il disegno bugiardo — attorno al 2029, dove
     il rapporto vero diventa 6 a 5 e due colonne larghe uguali
     direbbero la verita' meglio di queste.

     La terza colonna non misura niente, perche' «Oggi» e' un punto e
     non un intervallo: il filo NON ci passa sopra e finisce esatto
     sul suo nodo. E' la riga che fa funzionare tutto il resto —
     lasciando correre il bordo anche li', il 2024 cadeva al sessanta
     per cento di una linea che proseguiva nel vuoto, e la proporzione
     fra i due tratti smetteva di leggersi. Con il filo lungo 6fr + 2fr
     i tre nodi stanno a 0, tre quarti e fondo, che e' esattamente il
     rapporto fra sei anni e due.

     rapporto fra sei anni e due. */

  /* IL TETTO DEI TRE BLOCCHI LARGHI, in un posto solo perche' devono
     stare incolonnati fra loro: l'arco, la fascia dei volti sotto e
     le tre colonne della sezione scura che segue sono lo stesso
     impaginato che continua, e tre tetti scritti separatamente
     divergono al primo ritocco.

     Milleduecento non e' cosmetico. Senza, su un monitor da 1440
     l'arco si stendeva su 1340 pixel: il primo tratto diventava un
     vuoto di settecento pixel che si legge come uno stacco fra due
     blocchi separati invece che come una distanza fra due date, e i
     tre testi finivano cosi' lontani da non stare piu' in una sola
     occhiata. La proporzione ha bisogno che i suoi estremi si vedano
     insieme.

     margin-inline e non margin: i margini superiori dei tre sono
     diversi e vanno lasciati dove sono. */
  .arco,
  .gradini,
  .volti {
    max-width: 1200px;
    margin-inline: auto;
  }

  .arco {
    grid-template-columns: 6fr 2fr minmax(14rem, max-content);
    margin-top: var(--sp-10);
  }

  .arco__tappa {
    padding: var(--sp-6) var(--sp-8) 0 0;
    border-top: 1px solid var(--bordo);
    border-left: 0;
  }

  .arco__tappa::before {
    margin: -5px 0 0 0;
  }

  /* In orizzontale il vuoto e' alla loro destra, non sotto. */
  .arco__tappa--lunga,
  .arco__tappa--media { padding-bottom: 0; }

  /* Il tetto vive solo qui. La prima colonna e' larga 6fr, cioe' quasi
     settecento pixel su un monitor da 1440: senza, la riga del 2018
     correrebbe per centoventi caratteri mentre quelle del 2024 e di
     oggi ne fanno quaranta, e tre blocchi della stessa natura
     sembrerebbero tre cose diverse. Sul telefono non serve e non c'e',
     perche' li' la colonna e' gia' stretta. */
  .arco__testo { max-width: 34ch; }

  .arco__tappa--fine {
    padding-right: 0;
    border-top: 0;
  }

  /* Da qui in su la rete e' una riga sola, come sulla griglia dei
     Gold Specialist e nell'anteprima di «chi siamo». Quattro e' il
     numero che la riempie: una quinta persona lascerebbe anche qui
     una card sola su una seconda riga. */
  .volti__fila {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-10);
  }

  .volti__ritratto {
    width: 104px;
    height: 104px;
  }

  .gradini {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-10);
  }

  /* Due colonne di larghezza fissa e centrate, non due meta' della
     sezione. Con 1fr 1fr su un monitor da 1440 ogni card superava i
     settecento pixel: il testo dentro andava a capo dopo un centinaio
     di caratteri e la card si leggeva come una fascia orizzontale,
     non come una scheda. La misura e' quella di una colonna di
     lettura, e lo stacco fra le due sale di conseguenza — a 24 pixel
     le due card sembravano un blocco solo diviso da una riga. */
  .profili__griglia {
    grid-template-columns: repeat(2, minmax(0, 400px));
    justify-content: center;
    gap: var(--sp-18);
  }

  .ragioni { grid-template-columns: repeat(4, 1fr); }

  .eccellenza {
    grid-template-columns: repeat(4, 1fr);
    /* Righe alte quanto il loro contenuto, senza minimi imposti: a
       decidere sono le quattro schede, e la card del caveau si adatta
       perche' la sua immagine e' fuori dal flusso. */
    grid-auto-rows: auto;
  }

  .eccellenza__caveau {
    grid-column: span 2;
    grid-row: span 2;
  }

  .numeri__intestazione { grid-template-columns: 1.2fr 0.8fr; }

  .retro__capo { grid-template-columns: 1.4fr auto; }

  .simulatore { grid-template-columns: 1fr 1fr; }

  .piani__griglia { grid-template-columns: repeat(3, 1fr); }

  .percorso__passi { grid-template-columns: repeat(4, 1fr); }

  .goldrain__azioni { flex-direction: row; justify-content: center; }

  /* Le quattro card ci stanno tutte su una riga: niente da scorrere,
     quindi niente frecce. Il titolo passa a riga intera e «Vedi
     tutti» gli si mette accanto, allineato al suo piede. */
  .appuntamenti {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "capo  tutti"
      "lista lista";
  }

  .appuntamenti__frecce {
    display: none;
  }

  .appuntamenti__tutti {
    align-self: end;
  }

  /* Fuori dal contenitore a scorrimento la finestra non ha piu' nulla
     da contenere, e `visible` restituisce alla card l'ombra e il
     bordo che il ritaglio le toglieva. */
  .appuntamenti__finestra {
    overflow: visible;
  }

  .appuntamenti__pista {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .canali { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .partnership__capo { grid-template-columns: 1fr auto; align-items: center; }

  .partnership__griglia { grid-template-columns: repeat(3, 1fr); }

  .accademia { grid-template-columns: auto 1fr auto; align-items: center; }

  .pie__griglia { grid-template-columns: 1.5fr 1.1fr 1fr 1.1fr; }

  .pie__elenco--due { grid-template-columns: 1fr 1fr; }

  .pie__barra {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}


/* LA SOGLIA INTERMEDIA */
/* ------------------------------------------------ */
/* Le griglie a quattro colonne devono passare da quattro a due prima
   di arrivare a una: schiacciate direttamente in colonna singola
   perdono il ritmo, e in due stanno bene gia' da 600 pixel. */

@media (min-width: 600px) and (max-width: 899px) {
  .ragioni,
  .eccellenza,
  .canali,
  .partnership__griglia,
  .profili__griglia {
    grid-template-columns: 1fr 1fr;
  }

  /* Il nastro degli eventi ne mostra tre invece di due: a 800 pixel
     due card sole diventano larghe quanto una fascia. */
  .appuntamenti__pista {
    grid-auto-columns: calc((100% - 2 * var(--sp-4)) / 3);
  }

  .pie__griglia { grid-template-columns: 1fr 1fr; }
}