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

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

.menu__accesso {
  display: inline-block;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--raggio-pillola);
  background: var(--grad-accento-superficie);
  color: var(--fondo-scuro);
  font-size: var(--testo-xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
  white-space: nowrap;
  transition: box-shadow var(--durata-media) ease;
}

.menu__accesso:hover {
  box-shadow: var(--ombra-passaggio);
  color: var(--fondo-scuro);
}

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


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

/* L'altezza dell'eroe segue il suo contenuto, con un tetto.

   Con min-height: 100svh secco, su uno schermo da 1080 pixel restavano
   226 pixel di vuoto sopra e 162 sotto: piu' di un terzo della
   schermata era niente. Succedeva perche' il contenuto e' alto circa
   760 pixel e veniva centrato in 1080.

   Il tetto a 860 tiene l'eroe una schermata piena sui portatili e gli
   impedisce di gonfiarsi sugli schermi alti, dove per giunta lasciar
   intravedere la sezione successiva invoglia a scorrere. */
.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: min(100svh, 860px);
  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 */
/* ------------------------------------------------ */

.citazione {
  padding-block: var(--sezione-y-stretta);
  text-align: center;
}

.citazione__testo {
  font-family: var(--font-display);
  font-size: var(--titolo-m);
  line-height: var(--interlinea-media);
}


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

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

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

.goldrain__testo {
  max-width: 56ch;
  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);
}

.appuntamenti {
  position: relative;
  z-index: var(--z-contenuto);
  display: grid;
  gap: var(--sp-5);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--bordo-tenue);
}

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


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

.accademia {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding: var(--sp-8);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-l);
  background: var(--velo-chiaro);
}

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

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


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

.chiusura__logo {
  position: relative;
  z-index: var(--z-contenuto);
  width: min(210px, 50vw);
  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-m);
  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;
  }

  /* Uno stacco misurato prima del pulsante, non tutto lo spazio
     rimasto. */
  .menu__voce--accesso { margin-left: var(--sp-2); }

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

  .eroe__griglia {
    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;
  }

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

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

  .appuntamenti { grid-template-columns: 0.85fr 1fr 1fr; }


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

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