/* COMPONENTI */
/* ------------------------------------------------ */
/* I pezzi che si ripetono: occhielli, bottoni, card, pillole, la
   tabella, i cursori, il carousel.

   Ogni pezzo e' scritto UNA VOLTA, in termini dei token di contesto
   (--superficie, --bordo, --testo...). Chi lo mette dentro una
   sezione scura non riscrive nulla: e' la sezione a ridichiarare le
   variabili, in base.css. */


/* ETICHETTE E OCCHIELLI */
/* ------------------------------------------------ */

/* .etichetta non e' piu' qui: sta in pagine.css, insieme alle altre
   classi che possono comparire DENTRO un articolo. L'area clienti
   carica quel foglio e non questo — questo dichiara .piano, e la
   vista dei piani dell'area clienti dichiara lo stesso nome — quindi
   una classe che serve al corpo di un articolo deve stare di la'. */

.occhiello {
  color: var(--accento-leggibile);
  font-size: var(--testo-xxs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-xl);
  line-height: var(--interlinea-media);
  text-transform: uppercase;
}

/* Il testo con il riflesso d'oro che scorre. Va su uno span dentro un
   titolo, mai su un blocco intero: il ritaglio sul testo costa, e su
   un paragrafo lungo si vede scattare. */
.oro {
  background: var(--grad-accento-testo);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.collegamento-sottolineato {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--accento);
  color: var(--accento-leggibile);
  font-size: var(--testo-xs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.icona {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}


/* BOTTONI */
/* ------------------------------------------------ */
/* Cinque varianti, non una per posto in cui compare un bottone. */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-8);
  border: 1px solid transparent;
  border-radius: var(--raggio-pillola);
  font-size: var(--testo-xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-l);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transition: background var(--durata-media) ease,
              border-color var(--durata-media) ease,
              box-shadow var(--durata-media) ease,
              color var(--durata-media) ease;
}

.bottone--grande {
  padding: var(--sp-5) var(--sp-10);
}

/* Il pieno d'oro: l'invito principale. Ce n'e' uno per schermata. */
.bottone--primario {
  background: var(--grad-accento-superficie);
  color: var(--fondo-scuro);
  box-shadow: var(--ombra-card-chiara);
}

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

/* Il pieno scuro: l'invito dentro una card chiara. Due strati, non
   uno: l'alone dorato sopra il marrone. Restano un fondo solo per il
   browser, quindi il pulsante non ha bisogno di uno pseudo-elemento
   ne' di un secondo livello da comporre. */
.bottone--scuro {
  background: var(--velo-alone-oro), var(--fondo-scuro);
  color: var(--testo-su-scuro);
}

.bottone--scuro:hover {
  color: var(--accento-tenue);
  box-shadow: var(--ombra-card-chiara);
}

/* Il vuoto: seconda scelta, stesso peso tipografico. */
.bottone--fantasma {
  border-color: var(--bordo);
  color: var(--accento-leggibile);
}

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

/* Il pieno d'oro piccolo, per i capi di sezione su fondo scuro. */
.bottone--oro {
  background: var(--grad-accento-superficie);
  color: var(--fondo-scuro);
}

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

/* Il solo testo con la riga sotto: terza scelta. */
.bottone--testo {
  padding-inline: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--accento);
  color: var(--accento-leggibile);
}

.bottone--testo:hover {
  border-bottom-color: currentColor;
}

/* Dentro una card di piano il bottone eredita il colore del piano. */
.bottone--piano {
  width: 100%;
  margin-top: auto;
  border-color: var(--bordo-forte);
  color: inherit;
}

.bottone--piano:hover {
  background: var(--fondo-scuro);
  color: var(--testo-su-scuro);
}

/* Il collegamento all'articolo sotto al pulsante: seconda scelta, e
   si vede che lo e'. */
.piano__articolo {
  display: block;
  margin-top: var(--sp-3);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-align: center;
  text-transform: uppercase;
}

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

.sigla {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border: 1px solid currentColor;
  border-radius: var(--raggio-cerchio);
  font-size: .8em;
  letter-spacing: 0;
  text-transform: lowercase;
}


/* PILLOLE */
/* ------------------------------------------------ */

.pillola {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pillola);
  background: var(--superficie);
  color: var(--testo-attenuato);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
}

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

/* Sotto i sette giorni la finestra e' vicina e la pillola lo dice.
   Nell'export il colore passava a un oro chiarissimo, illeggibile su
   fondo crema: qui cambia il bordo, che si vede senza gridare. */
.pillola--vicina {
  border-color: var(--accento);
  background: rgb(var(--rgb-accento) / .08);
}

.pillola--vicina strong {
  color: var(--accento-leggibile);
}

.pillola--quieta {
  border-color: transparent;
  background: none;
  color: var(--testo-tenue);
}

.pillola strong {
  color: var(--testo);
  font-weight: var(--peso-forte);
}

.pillola__punto {
  width: 6px;
  height: 6px;
  border-radius: var(--raggio-cerchio);
  background: var(--accento);
}


/* FREGI FLOTTANTI */
/* ------------------------------------------------ */
/* Le due targhette sull'immagine dell'eroe. */

/* Le due targhette hanno lo stesso fondo: il marrone delle sezioni
   scure della home, con sopra un velo dorato fermo. Erano una chiara
   e una scura, e su una fotografia d'oro quella chiara spariva nel
   riflesso del lingotto mentre l'altra si staccava — due pesi diversi
   per due informazioni dello stesso rango.

   Il velo e' --velo-alone-oro, lo stesso identico dei due pulsanti
   pieni scuri: l'alone sale dal bordo inferiore. Un solo gradiente
   dichiarato in tema.css e usato in due punti, non due sfumature
   simili scritte due volte. */
.fregio {
  position: absolute;
  z-index: var(--z-sollevato);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--raggio-s);
  /* Poco piu' di un terzo della forza che ha sui pulsanti: la
     targhetta e' alta la meta', e la stessa alfa su meta' spazio si
     legge come il doppio. */
  --velo-alone-forza: .16;
  background: var(--velo-alone-oro), var(--fondo-scuro);
  color: var(--testo-su-scuro);
  box-shadow: var(--ombra-card-chiara);
}

/* Le due targhette stanno una per angolo opposto e una per bordo
   orizzontale: la purezza a cavallo del bordo superiore, a destra; la
   custodia a cavallo del bordo inferiore, a sinistra. Nessuna delle
   due sporge di lato — la colonna dell'immagine e' l'ultima della
   griglia, e una sporgenza a destra finirebbe nel margine della
   pagina. */
/* La sporgenza in alto e' fluida, e non per estetica: su una finestra
   bassa il contenuto dell'eroe sale, la fotografia con lui, e a
   1280x590 la targhetta finiva otto pixel dentro la barra di
   navigazione. Il massimo e' la misura fissa che c'era prima, quindi
   sopra i 1200 pixel di finestra non cambia nulla; il minimo e' quel
   che lascia quattro pixel di aria sulla finestra piu' bassa che
   questo progetto considera. Misurato, non stimato: il comando sta in
   docs/reference/altezza-della-prima-schermata.md. */
.fregio--purezza {
  top: calc(-1 * clamp(12px, 2svh, 24px));
  right: var(--sp-5);
}

.fregio--custodia {
  bottom: calc(-1 * var(--sp-6));
  left: var(--sp-5);
}

.fregio__etichetta {
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
  opacity: .75;
}

.fregio__valore {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: var(--testo-l);
}


/* LA FASCIA SCORREVOLE */
/* ------------------------------------------------ */
/* Quattro credenziali che scorrono, e ognuna e' un collegamento a un
   registro pubblico. Sono l'ultima cosa della prima schermata e la
   sola prova verificabile che ci sia sopra il bordo: vanno lette.
   Cinque cose lo rendono possibile, e nessuna di esse aggiunge un
   pixel di altezza — la fascia deve stare sopra il bordo anche su una
   finestra da 590, quindi ingrandire il corpo non e' gratis. */

.fascia {
  position: relative;
  z-index: var(--z-contenuto);
  margin: 0 calc(-1 * var(--gutter));
  padding-block: var(--sp-4);
  /* Una banda con una superficie sua, non piu' una dissolvenza dentro
     l'eroe: era --velo-fondo-chiaro, e la fascia si leggeva come il
     bordo inferiore della fotografia invece che come una
     dichiarazione. Due fili d'oro la chiudono sopra e sotto. */
  border-block: 1px solid var(--bordo-su-chiaro);
  background: var(--superficie-chiara-alt);
  overflow: hidden;
  /* Le voci svaniscono ai due estremi invece di essere tagliate a
     meta' parola. Quaranta pixel: meno non si vede, di piu' mangia
     una voce intera sul telefono. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px,
    #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px,
    #000 calc(100% - 40px), transparent);
}

.fascia__pista {
  display: flex;
  width: max-content;
}

/* Si ferma mentre qualcuno la legge o la usa. E' l'intervento che
   conta piu' di tutti: queste quattro voci sono collegamenti, e senza
   questa riga bisogna cliccare un bersaglio in movimento.
   :focus-within e non solo :hover, perche' chi arriva col tabulatore
   ha lo stesso problema e nessun modo di risolverlo. */
.fascia:hover .fascia__pista,
.fascia:focus-within .fascia__pista {
  animation-play-state: paused;
}

.fascia__elenco {
  display: flex;
  align-items: center;
  list-style: none;
}

.fascia__voce {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding-right: var(--sp-8);
  white-space: nowrap;
}

/* Sottolineate perche' portano da qualche parte: sono i quattro
   registri pubblici su cui le dichiarazioni si verificano, e senza un
   segno visibile nessuno immagina di poterci cliccare. */
/* Maiuscolo, dieci pixel scarsi, in movimento: e' gia' la
   combinazione piu' difficile che esista da leggere. La spaziatura
   scende di un gradino — da --traccia-xl, che al corpo di questa
   riga vale il 22% della lettera, a --traccia-l — e il colore sale da
   --testo-tenue a --testo-attenuato. Il contrasto misurato passa da
   5,17 a 6,41 — meno di quanto darebbe il solo cambio di colore,
   perche' nel frattempo la banda ha preso un fondo un gradino piu'
   profondo — e l'altezza della riga non cambia di niente. */
.fascia__voce a {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--bordo);
  color: var(--testo-attenuato);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
  transition: border-color var(--durata-media) ease,
              color var(--durata-media) ease;
}

.fascia__voce a:hover {
  border-bottom-color: var(--accento);
  color: var(--accento-leggibile);
}

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


/* CARD DEI PROFILI */
/* ------------------------------------------------ */

.profilo {
  display: flex;
  flex-direction: column;
  padding: var(--sp-8);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: var(--ombra-card);
  transition: border-color var(--durata-media) ease,
              box-shadow var(--durata-media) ease,
              transform var(--durata-media) ease;
}

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

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

.profilo__occhiello {
  margin-top: 2px;
  color: var(--testo-tenue);
  font-size: var(--testo-s);
  font-style: italic;
}

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

.profilo__evidenza {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  background: var(--superficie-alt);
  font-size: var(--testo-s);
}

/* I due fondi scambiati, e nient'altro. Il Conservatore e
   l'Investitore raccontano due cose diverse, e questa e' la
   distinzione piu' economica possibile: non un terzo colore da
   inventare e da mantenere, ma i due che la card gia' usa, invertiti.
   Vale solo sul Conservatore — l'Investitore resta com'era. */
.profilo--invertito {
  background: var(--superficie-alt);
}

.profilo--invertito .profilo__evidenza {
  background: var(--superficie);
}

.profilo .etichetta {
  margin-top: var(--sp-6);
}

.profilo__modi {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  list-style: none;
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

.profilo__modi strong {
  color: var(--testo);
  font-weight: var(--peso-medio);
}

.profilo__chiusa {
  margin: var(--sp-8) 0 var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--bordo-tenue);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-align: center;
  text-transform: uppercase;
}

.profilo .bottone {
  margin-top: auto;
}

.profilo .conto {
  margin: var(--sp-4) 0 var(--sp-8);
}


/* LE QUATTRO RAGIONI */
/* ------------------------------------------------ */

.ragione {
  padding-left: var(--sp-4);
  border-left: 1px solid var(--bordo);
}

/* Il numero sta dentro il titolo, non sopra: la riga si legge
   "II Diversificazione" invece di spezzarsi in due. Eredita corpo e
   carattere dal titolo, e cambia solo colore. */
.ragione__numero {
  margin-right: var(--sp-3);
  color: var(--accento);
}

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

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


/* L'ECCELLENZA */
/* ------------------------------------------------ */

.eccellenza__caveau,
.eccellenza__card {
  padding: var(--sp-6);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  transition: border-color var(--durata-media) ease,
              box-shadow var(--durata-media) ease;
}

.eccellenza__caveau:hover,
.eccellenza__card:hover {
  border-color: var(--accento);
  box-shadow: var(--ombra-alone);
}

.eccellenza__caveau {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* L'IMMAGINE SEGUE LE QUATTRO SCHEDE, NON VICEVERSA

   La card del caveau occupa due righe della griglia, quindi la sua
   altezza si distribuisce su entrambe. Con l'immagine nel flusso — 470
   pixel alla sua proporzione naturale — quelle due righe diventavano
   alte 297 ciascuna, mentre una scheda accanto ne riempiva 123: 126
   pixel di vuoto per scheda, quattro volte.

   Togliendo l'immagine dal flusso l'altezza delle righe la decidono le
   schede, che e' quello che si vuole, e l'immagine riempie lo spazio
   che avanza ritagliandosi invece di deformarsi. Il minimo evita che,
   se un giorno le schede diventassero cortissime, resti una fessura. */
.eccellenza__figura {
  position: relative;
  flex: 1;
  min-height: 200px;
}

.eccellenza__figura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--raggio-s);
  object-fit: cover;
}

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

.eccellenza__caveau .eccellenza__titolo {
  font-size: var(--titolo-s);
}

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

.fregio-simbolo,
.eccellenza__card .fregio {
  position: static;
}

/* Il segno geometrico in cima alle quattro schede piccole. */
.eccellenza__card > svg {
  width: 34px;
  height: 34px;
  margin-bottom: var(--sp-5);
  padding: var(--sp-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  color: var(--accento);
}


/* L'INTERRUTTORE A DUE PILLOLE */
/* ------------------------------------------------ */

.interruttore {
  display: inline-flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pillola);
  background: var(--superficie);
}

.interruttore__pillola {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--raggio-pillola);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
  transition: background var(--durata-rapida) ease,
              color var(--durata-rapida) ease,
              box-shadow var(--durata-rapida) ease;
}

.interruttore__punto {
  width: 5px;
  height: 5px;
  border-radius: var(--raggio-cerchio);
  background: currentColor;
  opacity: .5;
}

.interruttore__pillola--attiva {
  background: var(--grad-accento-superficie);
  color: var(--fondo-scuro);
  box-shadow: var(--ombra-card-chiara);
}

.interruttore__pillola--attiva .interruttore__punto {
  opacity: 1;
}


/* IL CONTATORE E LA TABELLA */
/* ------------------------------------------------ */

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

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

.retro__nota {
  margin-top: var(--sp-2);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.tabella {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--raggio-m);
  overflow: hidden;
  background: var(--superficie);
  font-size: var(--testo-s);
}

.tabella thead {
  background: var(--fondo-scuro);
  color: var(--testo-su-scuro-attenuato);
}

.tabella th {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--testo-xxs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--traccia-l);
  text-align: left;
  text-transform: uppercase;
}

.tabella tbody th {
  color: var(--testo);
  font-family: var(--font-display);
  font-size: var(--testo-l);
  letter-spacing: 0;
  text-transform: none;
}

.tabella td {
  padding: var(--sp-4) var(--sp-5);
  font-variant-numeric: tabular-nums;
}

.tabella tbody tr:nth-child(even) {
  background: var(--superficie-alt);
}

.tabella__numerica {
  text-align: right;
}

.tabella__guadagno {
  color: var(--accento-leggibile);
  font-weight: var(--peso-medio);
}

.avvertenza {
  margin-top: var(--sp-5);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  line-height: var(--interlinea-media);
}


/* IL SIMULATORE */
/* ------------------------------------------------ */

.cursore__etichetta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
}

.cursore__valore {
  color: var(--testo);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}

.cursore input[type="range"] {
  width: 100%;
  margin-top: var(--sp-4);
  accent-color: var(--accento);
}

/* Il colore del testo va dichiarato qui: il riquadro porta la classe
   contesto-scuro, che rimappa le variabili ma non le applica — a
   farlo sono di solito .sezione e .pagina, e questo riquadro non e'
   ne' l'una ne' l'altra. */
.simulatore__esito {
  padding: var(--sp-8);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-l);
  background: var(--superficie);
  color: var(--testo);
  box-shadow: var(--ombra-card);
}

.simulatore__proiezione {
  margin-top: var(--sp-2);
  color: var(--accento-leggibile);
  font-family: var(--font-display);
  font-size: var(--titolo-l);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.barra {
  margin-top: var(--sp-6);
}

.barra__testa {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  color: var(--testo-attenuato);
  font-size: var(--testo-xs);
}

.barra__testa > span:nth-child(2) {
  margin-left: auto;
  color: var(--testo);
  font-variant-numeric: tabular-nums;
}

.barra__percentuale {
  color: var(--accento-leggibile);
}

.barra__pista {
  height: 6px;
  border-radius: var(--raggio-pillola);
  background: var(--superficie-alt);
  overflow: hidden;
}

.barra__riempimento {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--raggio-pillola);
  background: var(--grad-barra-piena);
  transition: width var(--durata-lenta) var(--curva-uscita);
}

.barra__riempimento--tenue {
  background: var(--grad-barra-tenue);
}


/* LE CARD DEI PIANI */
/* ------------------------------------------------ */

.piano {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-l);
  transition: border-color var(--durata-media) ease,
              box-shadow var(--durata-media) ease,
              transform var(--durata-media) ease;
}

.piano:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombra-alone);
}

/* Tre temi, non tre palette da dodici chiavi come nell'export: la
   card scura, quella intermedia e quella dorata differiscono per il
   fondo e per il colore del testo, il resto e' identico. */

.piano--scura {
  background: var(--superficie);
  color: var(--testo);
}

.piano--media {
  background: var(--grad-card-media);
  color: var(--testo);
}

.piano--oro {
  border-color: var(--accento);
  background: var(--grad-perla);
  color: var(--testo-su-chiaro);
  box-shadow: var(--ombra-rilievo);
  /* La card in evidenza usa i token del contesto CHIARO anche stando
     dentro una sezione scura: e' una superficie chiara a tutti gli
     effetti, e i suoi bordi e testi devono seguirla. */
  --testo: var(--testo-su-chiaro);
  --testo-attenuato: var(--testo-su-chiaro-attenuato);
  --testo-tenue: var(--testo-su-chiaro-tenue);
  --bordo: var(--bordo-su-chiaro);
  --bordo-forte: var(--bordo-su-chiaro-forte);
  --bordo-tenue: var(--bordo-su-chiaro-tenue);
  --accento-leggibile: var(--accento-su-chiaro);
}

.piano__fregio {
  position: absolute;
  top: calc(-1 * var(--sp-3));
  left: 50%;
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--raggio-pillola);
  background: var(--fondo-scuro);
  color: var(--accento-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-l);
  text-transform: uppercase;
  transform: translateX(-50%);
}

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

.piano__obiettivo {
  font-family: var(--font-display);
  font-size: var(--titolo-m);
  line-height: 1;
}

.piano__didascalia {
  color: var(--testo-tenue);
  font-size: var(--testo-xs);
}

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

.piano__dati {
  margin: var(--sp-6) 0;
  font-size: var(--testo-s);
}

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

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

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


/* IL PERCORSO GOLD WAY */
/* ------------------------------------------------ */

/* La linea unisce il centro del primo nodo a quello del quarto. I
   nodi sono ancorati a sinistra della loro colonna, non centrati:
   partendo dal 12,5% la linea cominciava a meta' strada fra il primo
   e il secondo. Da qui i due valori: 24px e' mezzo nodo, e il tratto
   copre tre colonne piu' tre scarti, cioe' il 75% della larghezza
   piu' tre quarti di uno scarto. Vive qui e non in un fotogramma
   perche' lo usa anche l'animazione. */
.percorso__linea {
  --percorso-tratto: calc(75% + .75 * var(--sp-8));
  position: absolute;
  top: 23px;
  left: 24px;
  width: var(--percorso-tratto);
  height: 2px;
  background: var(--bordo-tenue);
}

.percorso__linea--viva {
  width: 0;
  background: var(--accento);
  box-shadow: var(--ombra-alone);
}

.passo {
  position: relative;
  padding-top: var(--sp-14);
}

.passo__nodo {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--accento);
  border-radius: var(--raggio-cerchio);
  background: var(--superficie);
  color: var(--accento-leggibile);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
}

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

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


/* GLI EVENTI */
/* ------------------------------------------------ */

.appuntamenti__capo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Colonna e non blocco: le quattro card stanno su una riga sola e
   hanno testi di lunghezza diversa, quindi «Dettagli» va spinto in
   fondo o si ferma a quattro altezze diverse. */
.evento {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  scroll-snap-align: start;
  transition: border-color var(--durata-media) ease;
}

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

.evento__titolo {
  margin: var(--sp-2) 0;
  font-size: var(--testo-l);
}

.evento__dettaglio {
  margin-bottom: var(--sp-4);
  color: var(--testo-tenue);
  font-size: var(--testo-xs);
}

.evento .collegamento-sottolineato {
  margin-top: auto;
  align-self: flex-start;
}


/* I CANALI */
/* ------------------------------------------------ */
/* Nell'export l'evidenziazione di queste quattro schede era gestita
   da JavaScript con dieci binding di stato. E' :hover. */

.canale__collegamento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pillola);
  color: var(--testo);
  font-size: var(--testo-s);
  transition: border-color var(--durata-media) ease,
              background var(--durata-media) ease;
}

.canale__collegamento:hover {
  border-color: var(--accento);
  background: rgb(var(--rgb-accento) / .08);
  color: var(--testo);
}

.canale__nome {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.canale__nome::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--raggio-cerchio);
  background: var(--accento);
}

.canale__invito {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accento-leggibile);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--durata-media) ease;
}

.canale__collegamento:hover .canale__invito {
  opacity: 1;
}


/* IL CAROUSEL */
/* ------------------------------------------------ */

.carousel__capo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.carousel__sottotitolo {
  max-width: 52ch;
  margin-top: var(--sp-2);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
}

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

.carousel__freccia {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-cerchio);
  color: var(--accento-leggibile);
  transition: border-color var(--durata-media) ease,
              background var(--durata-media) ease;
}

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

/* Il carousel e' un contenitore a scorrimento con aggancio, non una
   pista che trasla. Cosi' lo stesso meccanismo serve le frecce del
   mouse e il dito sul telefono, e non serve una seconda
   implementazione per il tocco.

   Il respiro verticale non e' estetico: la scheda si alza di tre
   pixel al passaggio del puntatore, e qui un asse e' `auto`, quindi
   il CSS impone che l'altro non possa restare `visible`. Senza
   questo margine interno il bordo superiore della scheda sollevata
   e l'ombra finiscono tagliati via dal contenitore. Il margine
   negativo restituisce la spaziatura di prima. */
.carousel__finestra {
  padding-block: var(--sp-4);
  margin-block: calc(var(--sp-4) * -1);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

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

.carousel__pista {
  display: flex;
}

.carousel__lastra {
  display: grid;
  gap: var(--sp-4);
  min-width: 100%;
  scroll-snap-align: start;
}

.carousel__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

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

.carousel__punto {
  width: 26px;
  height: 3px;
  border-radius: var(--raggio-pillola);
  background: var(--bordo);
  transition: background var(--durata-lenta) ease;
}

.carousel__punto[aria-selected="true"] {
  background: var(--accento);
}


/* LA SCHEDA DI UN ARTICOLO */
/* ------------------------------------------------ */

.scheda {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  transition: border-color var(--durata-media) ease,
              box-shadow var(--durata-media) ease,
              transform var(--durata-media) ease;
}

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

/* La riga che porta pastiglia e data. Va a capo invece di stringere:
   su una scheda in colonna stretta "Gold Insight" e "17 maggio 2027"
   non ci stanno affiancate, e una data spezzata a meta' e' peggio di
   una riga in piu'. */
.scheda__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}

.scheda__data {
  color: var(--testo-tenue);
  font-size: var(--testo-xs);
  font-weight: var(--peso-leggero);
}

.scheda__format {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pillola);
  color: var(--testo-tenue);
  font-size: var(--testo-xxs);
  letter-spacing: var(--traccia-m);
  text-transform: uppercase;
}

.scheda__evidenza-nota {
  color: var(--accento-leggibile);
}

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

.scheda--evidenza .scheda__titolo {
  font-size: var(--titolo-s);
}

.scheda__titolo a {
  color: inherit;
}

.scheda__titolo a:hover {
  color: var(--accento-leggibile);
}

/* Tutta la scheda e' cliccabile, ma il collegamento resta uno solo:
   il lettore di schermo sente il titolo, non un doppione. */
.scheda__titolo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

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

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


/* LE CARD B2B */
/* ------------------------------------------------ */

.partner {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  transition: border-color var(--durata-media) ease;
}

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

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

.partner__testo {
  margin: var(--sp-4) 0 var(--sp-6);
  color: var(--testo-attenuato);
  font-size: var(--testo-s);
  line-height: var(--interlinea-media);
}

.partner .collegamento-sottolineato {
  margin-top: auto;
  align-self: flex-start;
}


/* SCHERMO GRANDE */
/* ------------------------------------------------ */

@media (min-width: 900px) {
  .carousel__lastra {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .goldinsight .scheda--evidenza {
    padding: var(--sp-6);
  }
}