/* 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 pieno delle
   sezioni scure della home. 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 DORATO NON C'E' PIU', tolto il 2 settembre 2026 su
   richiesta del titolare: sopra una fotografia che e' gia' tutta oro,
   un alone d'oro sul marrone non aggiungeva luce, aggiungeva
   confusione. Il marrone piatto e' cio' che stacca la targhetta dal
   lingotto.

   Con il velo se n'e' andata la riga `--velo-alone-forza: .16` che lo
   accompagnava, e che comunque non aveva mai fatto niente: un var()
   dentro una custom property viene risolto dove la property e'
   dichiarata, quindi le targhette hanno sempre dipinto il .42 dei
   pulsanti invece del terzo scarso che quel commento prometteva.
   Misurato il 2 settembre 2026; la trappola e' scritta per esteso in
   CLAUDE.md.

   --velo-alone-oro resta in tema.css: lo usano ancora i due pulsanti
   pieni scuri, che sono il caso per cui era stato tarato. */
.fregio {
  position: absolute;
  z-index: var(--z-sollevato);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--raggio-s);
  background: 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. */
/* IL MARRONE DELLE TARGHETTE STA QUI, NON SU .fregio

   E' il marrone piu' chiaro delle schede dell'eccellenza — quella di
   «Requisiti» e le altre tre — chiesto il 2 settembre 2026 al posto
   del fondo pieno: sulla fotografia del lingotto stacca meglio.

   Sta sui due modificatori e non sulla classe base perche' .fregio e'
   condivisa da DUE componenti: queste due targhette e le quattro
   pastiglie 34x34 delle icone dentro le schede dell'eccellenza, che
   la macro icone::simbolo() battezza «fregio» per valore predefinito.
   Quelle pastiglie stanno dentro una scheda che e' gia'
   --superficie-scura: dando lo stesso marrone anche a loro
   sparirebbero nel fondo che le ospita. Restano al --fondo-scuro
   della classe base, che e' piu' cupo e le fa vedere.

   Va scritto --superficie-scura e NON --superficie: le targhette
   vivono dentro l'eroe, che e' una sezione chiara, quindi li'
   --superficie vale il bianco avorio. Serve il token assoluto. */
.fregio--purezza,
.fregio--custodia {
  background: var(--superficie-scura);
}

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