/* ============================================================
   RESTYLING 09/2026 — COMPONENTI CONDIVISI
   Caricato DOPO custom.css.

   Qui stanno i componenti che compaiono su piu' di una delle tre
   pagine del restyling. Le pagine aggiungono solo il proprio
   markup e, se serve, un foglio di stile loro: nessuna di loro
   ridefinisce quello che c'e' qui dentro.

   Convenzione dei nomi: tutto quello che nasce col restyling ha
   il prefisso r- (r-sezione, r-scheda-corso, r-pilastro...), cosi'
   si distingue a colpo d'occhio dalle classi dell'export Webflow.

   I valori vengono dai token del design system. Dove la specifica
   chiede una misura che i token non coprono, la dichiaro qui come
   variabile una volta sola invece di ripeterla nel markup.
   ============================================================ */

:root {
  /* Valori nuovi, non coperti dai token esistenti */
  /* La testata e' una pillola che galleggia: quanto spazio occupa
     dall'alto non e' la sua altezza, ma lo stacco dal bordo piu'
     l'altezza. Chi deve stare sotto di lei guarda l'ingombro, non
     l'altezza: e' l'errore che faceva toccare il box di iscrizione
     con la pillola.

     I valori sono quelli veri della pillola: 76 di altezza e 28 di
     stacco sul desktop, 60 e 16 sul telefono. Prima qui c'era 80,
     rimasto dalla barra piena della prima versione. */
  --r-altezza-testata: 76px;
  --r-stacco-testata: 28px;
  --r-ingombro-testata: calc(var(--r-stacco-testata) + var(--r-altezza-testata));

  --r-altezza-testata-mobile: 60px;
  --r-stacco-testata-mobile: 16px;
  --r-ingombro-testata-mobile: calc(var(--r-stacco-testata-mobile) + var(--r-altezza-testata-mobile));
  --r-pulsante-grande: 60px;
  --r-pulsante-medio: 48px;
  --r-larghezza-contenuto: 1240px;
  --r-colonna-contenuti: 820px;
  --r-colonna-box: 380px;
  --r-tinta-primaria: rgba(60, 40, 249, 0.1);
  --r-fondo-barra-mobile: rgba(255, 255, 255, 0.92);
  --r-ombra-scheda: 0 4px 16px #00000014;
  --r-ombra-box: 0 8px 40px #0000001f;
  --r-bordo-scheda-chiara: #0c0e171f;
}

/* ------------------------------------------------------------
   RITMO DELLE SEZIONI
   Il fondo si alterna chiaro/verde chiarissimo e lo spazio
   verticale e' costante. E' quello che sostituisce i vuoti non
   spiegati che oggi separano alcune sezioni.
   ------------------------------------------------------------ */
.r-sezione {
  width: 100%;
  padding: var(--_project-font---all-padding--padding-top-bottom)
           var(--_project-font---all-padding--left-right);
  background-color: var(--neutral-01);
}

.r-sezione.alt {
  background-color: var(--neutral-02);
}

.r-contenitore {
  width: 100%;
  max-width: var(--r-larghezza-contenuto);
  margin: 0 auto;
}

/* Testata di sezione: titolo a sinistra, introduzione a destra. */
/* Titolo sopra, testo di apertura sotto. Prima erano affiancati su
   due colonne: il paragrafo partiva alla stessa altezza del titolo e
   l'occhio doveva scegliere da che parte cominciare. Incolonnati, la
   frase si legge come quello che e': il seguito del titolo. */
.r-testata-sezione {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_project-font---spacing--16);
  margin-bottom: var(--_project-font---spacing--56);
}

.r-testata-sezione h2,
.r-testata-sezione h3 {
  margin: 0;
}

/* La riga di apertura resta corta: a tutta larghezza sarebbe un
   paragrafo di 130 caratteri, illeggibile. */
.r-testata-sezione > p {
  max-width: 68ch;
}

.r-testata-sezione p {
  flex: 1 1 0;
  margin: 0;
}

/* ------------------------------------------------------------
   RIGA DI SPECIFICA
   Etichetta a sinistra, valore a destra. Serve a rendere due
   schede corso confrontabili: stesse voci, stesso ordine, cosi'
   l'occhio scorre in orizzontale fra le due.
   ------------------------------------------------------------ */
.r-specifiche {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--16);
  width: 100%;
  margin: 0;
}

.r-specifica {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--_project-font---spacing--16);
}

.r-specifica dt {
  color: var(--neutral-03);
  margin: 0;
}

.r-specifica dd {
  color: var(--neutral-04);
  text-align: right;
  margin: 0;
}

/* ------------------------------------------------------------
   SPUNTA CON CERCHIETTO
   Il cerchio e' la tinta primaria al 10%, il segno e' a tratto e
   segue currentColor: basta cambiare il colore del contenitore.
   ------------------------------------------------------------ */
.r-spunta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.r-spunta-icona {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--_project-font---border-radius--100, 100px);
  background-color: var(--r-tinta-primaria);
  color: var(--primary-color);
}

.r-spunta-icona svg {
  width: 14px;
  height: 14px;
}

/* ------------------------------------------------------------
   PILASTRO NUMERATO
   Il numero e' il gradiente del brand ritagliato dalle cifre.
   ------------------------------------------------------------ */
.r-pilastro {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--16);
  padding: var(--_project-font---all-padding--32px);
  border-radius: var(--_project-font---border-radius--32);
  border: 1px solid var(--neutral-02);
  background-color: var(--neutral-01);
}

.r-pilastro-numero {
  background-image: var(--gaa-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0000;
  margin: 0;
}

/* Nelle pagine corso i pilastri sono un elenco, non schede:
   numero a sinistra, testo a destra, separati da una riga. */
.r-pilastri-elenco .r-pilastro {
  flex-direction: row;
  gap: var(--_project-font---spacing--40);
  padding: var(--_project-font---spacing--40) 0;
  border: 0;
  border-top: 1px solid var(--neutral-02);
  border-radius: 0;
  background-color: #0000;
}

.r-pilastri-elenco .r-pilastro:first-child {
  border-top: 0;
  padding-top: 0;
}

/* ------------------------------------------------------------
   FASCIA STATISTICHE
   Numeri col gradiente, separati dal contenuto da una riga di 2px.
   ------------------------------------------------------------ */
.r-numeri {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--_project-font---spacing--24);
  width: 100%;
  padding-top: var(--_project-font---spacing--40);
  border-top: 2px solid var(--neutral-02);
}

.r-numero {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.r-numero-cifra {
  background-image: var(--gaa-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0000;
  margin: 0;
}

/* ------------------------------------------------------------
   FASCIA CTA PIENA
   Blu pieno, nessun gradiente: e' l'unico punto in cui il blu
   copre tutta la superficie.
   ------------------------------------------------------------ */
.r-fascia-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_project-font---spacing--24);
  padding: var(--_project-font---all-padding--60px, 60px);
  border-radius: var(--_project-font---border-radius--32);
  background-color: var(--primary-color);
  color: var(--neutral-01);
}

.r-fascia-cta h2,
.r-fascia-cta h3,
.r-fascia-cta p {
  color: var(--neutral-01);
  margin: 0;
}

/* Pulsante bianco dentro la fascia blu. */
.r-cta-chiara {
  height: var(--r-pulsante-grande);
  padding: 0 34px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--_project-font---border-radius--58);
  background-color: var(--neutral-01);
  color: var(--primary-color);
  text-decoration: none;
}

/* ------------------------------------------------------------
   PULSANTI DEL RESTYLING
   Le altezze le chiede la specifica: 60px i grandi, 48 i medi.
   Il raggio e' sempre 58: nel sito non esistono pulsanti squadrati.
   ------------------------------------------------------------ */
.r-pulsante,
.r-pulsante-profilato {
  height: var(--r-pulsante-grande);
  padding: 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--_project-font---border-radius--58);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.r-pulsante {
  background-color: var(--primary-color);
  color: var(--neutral-01);
}

.r-pulsante-profilato {
  border: 1.5px solid var(--primary-color);
  color: var(--primary-color);
  background-color: var(--neutral-01);
}

@media (hover: hover) {
  .r-pulsante:hover { background-color: var(--primary-color-hover); }
  .r-pulsante-profilato:hover {
    border-color: var(--primary-color-hover);
    color: var(--primary-color-hover);
  }
}

.r-pulsante:focus-visible,
.r-pulsante-profilato:focus-visible,
.r-cta-chiara:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   BOX DI ISCRIZIONE DELLE PAGINE CORSO
   Sta nella colonna destra e scorre con essa. E' "sticky" dentro
   la colonna, non "fixed": cosi' scorre via insieme al piede
   pagina invece di restare incollato allo schermo sopra ogni
   sezione, che e' il difetto della versione attuale.
   ------------------------------------------------------------ */
.r-colonne-corso {
  display: flex;
  align-items: flex-start;
  gap: var(--_project-font---spacing--40);
  width: 100%;
  max-width: var(--r-larghezza-contenuto);
  margin: 0 auto;
}

.r-colonna-contenuti {
  flex: 1 1 var(--r-colonna-contenuti);
  min-width: 0;
}

.r-box-iscrizione {
  flex: none;
  width: var(--r-colonna-box);
  position: sticky;
  /* 24px di aria sotto la pillola, presi dal token delle schede. */
  top: calc(var(--r-ingombro-testata) + var(--_project-font---all-padding--card-padding));
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--24);
  padding: var(--_project-font---all-padding--tm-padding);
  border-radius: var(--_project-font---border-radius--32);
  border: 1px solid var(--neutral-02);
  background-color: var(--neutral-01);
  box-shadow: var(--r-ombra-box);
}

.r-box-separatore {
  height: 1px;
  width: 100%;
  background-color: var(--neutral-02);
}

/* ------------------------------------------------------------
   BARRA D'AZIONE DEL TELEFONO
   Solo sulle pagine corso. Sul telefono il box laterale non
   esiste: la scheda intera resta in pagina sotto la hero, e qui
   sotto restano nome del corso, sintesi e un solo comando.
   Nel DOM va DOPO il contenuto, cosi' la tabulazione non ci
   inciampa prima di aver letto la pagina.
   ------------------------------------------------------------ */
.r-barra-mobile {
  display: none;
}

@media screen and (max-width: 767px) {
  .r-barra-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--_project-font---spacing--16);
    padding: 12px var(--_project-font---all-padding--left-right);
    background-color: var(--r-fondo-barra-mobile);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--neutral-02);
  }
  .r-barra-mobile .r-pulsante {
    height: var(--r-pulsante-medio);
    padding: 0 22px;
    flex: none;
  }
}

/* ATTENZIONE, per chi mette un video in un contenitore di queste
   pagine: .w-background-video di Webflow impone height: 500px, che
   vince su qualunque aspect-ratio. Va rimesso height: auto sul
   contenitore, altrimenti il video ignora le proporzioni. */

/* ------------------------------------------------------------
   SEGNAPOSTO E BRICIOLE DI PANE
   ------------------------------------------------------------ */
.r-briciole {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--_project-font---spacing--24);
}

.r-briciole a {
  color: var(--neutral-03);
  text-decoration: none;
}

.r-briciole a:hover { text-decoration: underline; }

.r-badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--_project-font---border-radius--58);
  background-color: var(--secondary-color);
  color: var(--neutral-01);
}

/* ------------------------------------------------------------
   PUNTI DI ROTTURA COMUNI
   991 / 767 / 479, gli stessi del sito.
   ------------------------------------------------------------ */
@media screen and (max-width: 991px) {
  /* Girata in colonna, la base di 620px del titolo diventa un'ALTEZZA
     e apre un buco sotto la testata: in colonna la base va azzerata. */
  .r-testata-sezione { flex-direction: column; gap: var(--_project-font---spacing--24); }
  .r-testata-sezione h2,
  .r-testata-sezione h3,
  .r-testata-sezione p { flex: 0 1 auto; }
  .r-colonne-corso { flex-direction: column; }
  .r-box-iscrizione { position: static; width: 100%; }
  .r-numeri { gap: var(--_project-font---spacing--20); }
}

@media screen and (max-width: 767px) {
  .r-numeri { grid-template-columns: repeat(2, 1fr); }
  .r-pilastri-elenco .r-pilastro { flex-direction: column; gap: var(--_project-font---spacing--16); }
  .r-specifica { flex-direction: column; gap: 2px; }
  .r-specifica dd { text-align: left; }
  .r-fascia-cta { padding: var(--_project-font---all-padding--32px); }
}

/* ------------------------------------------------------------
   COMANDI SPENTI A FONDO PIENO
   .brochure-disabled in custom.css sbiadisce bordo ed etichetta:
   funziona sui pulsanti profilati, per cui era nata. Su un
   pulsante pieno pero' il fondo blu resta, e un comando spento
   diventa indistinguibile da uno acceso.

   La specifica del restyling chiede per i comandi spenti fondo
   disabled-bg-color ed etichetta disabled-text. Il badge accanto
   resta a pieno contrasto: e' la parte che deve spiegare perche'
   il comando non funziona.

   Sta in questo foglio, e non in custom.css, perche' cambia
   l'aspetto: la home del 1 ottobre non carica questo file e
   conserva il suo trattamento, gia' approvato.
   ------------------------------------------------------------ */
.button-primary.brochure-disabled,
.button-primary-fw.brochure-disabled,
.r-pulsante.brochure-disabled,
.r-cta-chiara.brochure-disabled {
  background-color: var(--disabled-bg-color);
  border-color: #0000;
}

/* Anche il profilato del restyling: senza, il bordo resta blu e
   il comando sembra acceso. */
.r-pulsante-profilato.brochure-disabled {
  border-color: var(--disabled-text);
  background-color: var(--neutral-01);
}

.r-pulsante.brochure-disabled,
.r-pulsante-profilato.brochure-disabled,
.r-cta-chiara.brochure-disabled {
  color: var(--disabled-text);
  cursor: default;
  pointer-events: none;
}

.button-primary.brochure-disabled .button-bg,
.button-primary-fw.brochure-disabled .button-bg {
  display: none;
}

/* L'etichetta va in disabled-text su ENTRAMBE le forme, piena e
   profilata: la specifica non distingue, e due comandi spenti
   accanto non devono sembrare spenti in due modi diversi. */
.brochure-disabled .button-text > p:not(.badge-novita) {
  color: var(--disabled-text);
  opacity: 1;
}

/* ------------------------------------------------------------
   SPAZIO SOTTO LA TESTATA FLOTTANTE
   La pillola sta fuori dal flusso: la prima sezione di ogni
   pagina deve tenersi lo spazio per non finirci sotto.

   Sta in questo foglio e non in custom.css per una ragione di
   ordine di caricamento: .r-sezione qui sotto dichiara "padding"
   come scorciatoia, e una scorciatoia in un foglio caricato dopo
   vince su un "padding-top" dichiarato prima. Messo qui, invece,
   arriva buono.
   ------------------------------------------------------------ */
/* La classe e' scritta due volte di proposito: raddoppiandola la
   regola pesa piu' di qualunque altra a classe singola, e vince a
   prescindere dall'ordine dei fogli.

   Serve perche' le sezioni dichiarano "padding" come scorciatoia:
   .r-sezione, .r-hero-corso e chiunque altro azzererebbero questa
   compensazione semplicemente venendo caricati dopo. E' gia'
   successo due volte, con la hero delle pagine corso finita sotto
   la pillola. Cosi' non puo' piu' succedere. */
.compensa-testata.compensa-testata {
  padding-top: 148px;
}

@media screen and (max-width: 991px) {
  .compensa-testata.compensa-testata {
    padding-top: 100px;
  }
}

/* ------------------------------------------------------------
   SEGNAPOSTO IN MISURA DI TESTO
   Dentro una riga di specifica o una scheda un riquadro
   tratteggiato intero non ci sta: serve un segnaposto grande
   quanto una parola. Stesso viola tratteggiato del componente
   grande, cosi' si legge come la stessa cosa.

   Era scritta identica nel foglio della home e in quello delle
   pagine di conferma: i due non si incontrano mai, ma due copie
   uguali divergono alla prima modifica.
   ------------------------------------------------------------ */
.r-valore-atteso {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed var(--secondary-color);
  border-radius: var(--_project-font---border-radius--58);
  color: var(--secondary-color);
  font-size: var(--_project-font---all-paragraph--body-14);
  font-weight: var(--_project-font---font-weight--medium);
  white-space: nowrap;
}