/* ============================================================
   RESTYLING 09/2026 — HOME MULTI-CORSO
   Caricato DOPO restyling-comuni.css, e solo da
   /home-5-ottobre: qui sta SOLO cio' che e' specifico della
   home. Tutto il resto (sezioni, testate, specifiche, spunte,
   pilastri, numeri, pulsanti, badge) arriva dal foglio comune
   e non viene ridefinito.

   Stessa convenzione di nomi del foglio comune: prefisso r-.
   ============================================================ */

/* ------------------------------------------------------------
   TESTATA: SEI VOCI IN UNA BARRA LARGA 1240

   La testata nasce con tre voci e ne ha cinque. Fra 992 e 1200px
   logo + cinque pillole + pulsante non ci stanno in riga e il
   testo delle voci andrebbe a capo dentro la pillola. Invece di
   accorciare le etichette stringo gli spazi interni: le voci
   restano alte 40px e larghe abbastanza per il dito.
   ------------------------------------------------------------ */
.nav-item p {
  white-space: nowrap;
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .flex-block-2 {
    gap: var(--_project-font---spacing--20);
  }
  .nav-item {
    padding: 0 10px;
  }
  .nav-cta {
    padding: 0 18px;
  }
}

/* ------------------------------------------------------------
   IL FUOCO DA TASTIERA SI VEDE SU OGNI COMANDO

   Il foglio comune lo dichiara sui suoi pulsanti; qui lo estendo
   a tutti i collegamenti delle sezioni nuove e del piede pagina,
   compresi quelli che pulsanti non sono (loghi, voci di elenco).
   ------------------------------------------------------------ */
.r-sezione a:focus-visible,
.r-piede a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   1. HERO
   Testo a sinistra, immagine a destra. Non uso .hero-section:
   quelle regole impongono l'altezza dello schermo intero, che
   con la testata fissa da 80px spinge sotto la piega meta' del
   contenuto.
   ------------------------------------------------------------ */
.r-hero {
  display: grid;
  grid-template-columns: minmax(0, 616px) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

/* ------------------------------------------------------------
   LA HERO PRENDE QUASI TUTTO LO SCHERMO

   Prima occupava quello che le serviva e basta: su uno schermo
   largo e basso il titolo restava piccolo in mezzo al vuoto, e
   l'immagine scendeva a 341px di altezza. Adesso la sezione punta
   a 92svh, cosi' e' lei la prima cosa che si vede, per intera.

   Il 92 e non il 100 e' voluto: quell'8% e' la fetta della sezione
   successiva che resta a schermo, e dice "sotto continua". Una
   hero che riempie esattamente lo schermo sembra invece la fine
   della pagina, e c'e' chi non scorre.

   svh e non vh. Su telefono vh conta anche la barra degli
   indirizzi, che sparisce scorrendo: con vh la hero nasce piu'
   alta dello schermo e il bordo basso non si vede mai. svh e' lo
   schermo piccolo, quello con tutte le barre presenti, ed e' la
   misura che non mente. Resta una riga vh prima, per i browser
   che svh non lo conoscono: leggono quella e ignorano l'altra.

   Solo da 992px in su. Sotto, la hero diventa una colonna sola -
   titolo, testo, loghi, immagine - ed e' gia' piu' alta dello
   schermo da sola: imporle un'altezza non servirebbe a niente e
   rischierebbe di comprimerla.
   ------------------------------------------------------------ */
@media screen and (min-width: 992px) {
  .compensa-testata {
    min-height: 92vh;
    min-height: 92svh;
    display: flex;
    /* stretch e non center: la griglia dentro deve essere alta quanto
       la sezione, altrimenti i suoi due lati si allungano fino
       all'altezza del contenuto e basta - che e' il punto di partenza. */
    align-items: stretch;
  }

  .compensa-testata > .r-hero {
    width: 100%;
  }

  /* I due lati si allungano insieme: l'immagine riempie l'altezza
     disponibile invece di restare alta quanto la sua proporzione. */
  .r-hero {
    align-items: stretch;
  }

  /* Il testo resta centrato verticalmente anche se la colonna
     adesso e' alta quanto la sezione. */
  .r-hero-testo {
    justify-content: center;
  }

  /* .r-hero > sta qui per vincere sulla regola base piu' sotto nel
     foglio, che fissa aspect-ratio 5/6 e max-height 548px: a parita'
     di peso vince l'ultima scritta, e l'ultima e' quella. */
  .r-hero > .r-hero-media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 420px;
    max-height: none;
  }
}

/* Sugli schermi larghi il titolo cresce con loro. Sotto i 1200 resta
   agli 80px del tema: e' gia' la misura giusta, e rimpicciolirlo
   sarebbe un peggioramento. Il tetto a 112px evita che su un monitor
   molto largo il titolo diventi piu' alto della colonna di testo. */
@media screen and (min-width: 1201px) {
  .r-hero-testo h1 {
    font-size: clamp(80px, 4.6vw, 100px);
    line-height: 1.06;
    /* Senza, a 100px "La prima scuola di AI a Firenze" si spezzava in
       tre righe sbilanciate, con "scuola" staccata da "prima". balance
       distribuisce le righe invece di riempire la prima e andare a
       capo dove capita. */
    text-wrap: balance;
  }

  /* La colonna del testo cresce col titolo: a 616px un titolo da
     100px andrebbe a capo comunque, per quanto equilibrato. */
  .r-hero {
    grid-template-columns: minmax(0, 720px) minmax(0, 1fr);
  }
}

.r-hero-testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_project-font---spacing--24);
}

.r-hero-testo h1 {
  margin: 0;
}

.r-hero-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_project-font---spacing--16);
}

/* La riga di credito ai due enti che fanno la scuola. */
.r-hero-credito {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: var(--_project-font---spacing--8);
}

.r-logo-credito {
  width: auto;
  height: 40px;
  object-fit: contain;
}

.r-hero-media {
  /* .w-background-video impone height: 500px: senza height: auto
     l'altezza fissa vince sulla proporzione e il riquadro si
     stringe invece di riempire la colonna. */
  height: auto;
  aspect-ratio: 5 / 6;
  max-height: 548px;
  border-radius: var(--_project-font---border-radius--32);
  overflow: hidden;
}

/* ------------------------------------------------------------
   2. LE DUE SCHEDE CORSO
   Griglia a due colonne di uguale larghezza: e' il punto di
   tutta la sezione. Le voci sono le stesse e nello stesso
   ordine, quindi l'occhio confronta in orizzontale; perche'
   funzioni davvero le righe devono partire alla stessa altezza,
   e per questo prezzo e specifiche hanno un'altezza propria che
   non dipende da quanto e' lunga la descrizione sopra.
   ------------------------------------------------------------ */
.r-schede-corso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--_project-font---spacing--24);
  align-items: stretch;
}

.r-scheda-corso {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--24);
  padding: var(--_project-font---all-padding--40px);
  border: 1px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--32);
  background-color: var(--neutral-01);
}

.r-scheda-riga-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.r-scheda-nome {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Due descrizioni di lunghezza diversa non devono sfalsare le
     righe sotto: il blocco occupa lo spazio della piu' alta. */
  min-height: 116px;
}

.r-scheda-nome h3 {
  margin: 0;
}

/* Il prezzo e' sempre presente e sempre sulla stessa riga: e'
   la voce che rende le due schede confrontabili a colpo d'occhio
   ("Gratuito" e "690€" alla stessa misura, alla stessa altezza). */
.r-scheda-prezzo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: var(--_project-font---spacing--20) 0;
  border-bottom: 1px solid var(--neutral-02);
}

.r-scheda-spunte {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Il comando sta in fondo alla scheda e largo quanto la scheda:
   le due schede hanno contenuti di altezza diversa e senza
   questo i due pulsanti non sarebbero allineati fra loro. */
.r-scheda-cta {
  width: 100%;
  margin-top: auto;
}


/* ------------------------------------------------------------
   IMPAGINAZIONE A DUE COLONNE
   La usano quattro sezioni: la scuola, la sede, i requisiti e
   l'attestato. Due varianti soltanto, per non moltiplicare le
   griglie: colonne uguali, oppure colonna sinistra stretta.
   ------------------------------------------------------------ */
.r-due-colonne {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
  align-items: center;
}

.r-due-colonne.stretta-sinistra {
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.r-colonna {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_project-font---spacing--24);
}

.r-colonna h2 {
  margin: 0;
}

/* ------------------------------------------------------------
   3. UNA NUOVA GENERAZIONE
   ------------------------------------------------------------ */
.r-media-generazione {
  width: 100%;
  max-width: 380px;
  height: auto;
  aspect-ratio: 38 / 26;
  border-radius: var(--_project-font---border-radius--32);
  overflow: hidden;
}

/* I numeri della home sono tre, non quattro come nella fascia
   delle pagine corso: variante invece di ritoccare il comune.
   Restano tre su una riga anche sul telefono, come da specifica:
   sono cifre corte e una griglia 2+1 lascerebbe un buco. */
.r-numeri.r-numeri-tre {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--_project-font---spacing--8);
}

/* ------------------------------------------------------------
   4. MENO TEORIA, PIU' PRATICA
   ------------------------------------------------------------ */
.r-pilastri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--_project-font---spacing--24);
}

.r-pilastri h3 {
  margin: 0;
}

/* ------------------------------------------------------------
   5. IL POSTO GIUSTO — media e righe con icona
   ------------------------------------------------------------ */
.r-media-sede {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  border-radius: var(--_project-font---border-radius--32);
  overflow: hidden;
}

.r-elenco-icone {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.r-riga-icona {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Le icone sono a tratto e seguono currentColor: il colore lo
   decide la riga, non l'icona. */
.r-icona {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--primary-color);
}

/* ------------------------------------------------------------
   6. IL COORDINATORE DIDATTICO
   Scheda bianca sul fondo alternato: citazione a sinistra,
   ritratto a destra.
   ------------------------------------------------------------ */
.r-coordinatore {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 56px;
  align-items: center;
  padding: 48px;
  border-radius: var(--_project-font---border-radius--32);
  background-color: var(--neutral-01);
}

.r-coordinatore-testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_project-font---spacing--24);
}

.r-coordinatore-nome {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.r-coordinatore-ritratto {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--_project-font---border-radius--24);
}

/* Etichetta neutra: la pillola del badge, ma spenta. Il viola di
   .r-badge qui griderebbe piu' della citazione che annuncia. */
.r-etichetta-neutra {
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin: 0;
  padding: 0 16px;
  border-radius: var(--_project-font---border-radius--58);
  background-color: var(--neutral-02);
  color: var(--neutral-03);
}

/* ------------------------------------------------------------
   7. I REQUISITI PER PARTECIPARE
   ------------------------------------------------------------ */
.r-requisiti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--_project-font---spacing--20);
}

.r-requisito {
  display: flex;
  gap: 12px;
  padding: var(--_project-font---all-padding--tm-padding);
  border: 1px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--24);
  background-color: var(--neutral-01);
}

.r-requisito-testo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.r-requisito h3 {
  margin: 0;
}

/* Da 768 in su i requisiti sono schede e la spunta non serve:
   il riquadro fa gia' da segno. Sul telefono diventano un
   elenco e la spunta torna a essere l'unico segno disponibile. */
.r-requisito .r-spunta-icona {
  display: none;
}

/* ------------------------------------------------------------
   8. DAI VALORE ALLE TUE COMPETENZE — il fac-simile dell'attestato
   Non e' un attestato vero: e' un disegno di come sara'. Il nome
   e' dichiarato finto come tutti gli altri buchi di contenuto.
   ------------------------------------------------------------ */
.r-attestato {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--_project-font---spacing--24);
  width: 100%;
  min-height: 340px;
  margin: 0;
  padding: 36px;
  border: 1px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--32);
  background-color: var(--neutral-01);
}

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

.r-attestato-logo {
  width: auto;
  height: 36px;
  object-fit: contain;
}

.r-attestato-corpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* La barretta col gradiente: l'unico posto della home in cui il
   gradiente non e' ritagliato da delle lettere. */
.r-attestato-barra {
  width: 160px;
  height: 6px;
  border-radius: var(--_project-font---border-radius--8);
  background-image: var(--gaa-gradient);
}

.r-attestato-didascalia {
  margin: 0;
}

/* ------------------------------------------------------------
   10. DOMANDE FREQUENTI
   Testata ferma a sinistra, domande a destra in tre gruppi.
   ------------------------------------------------------------ */
.r-faq-colonne {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.r-faq-laterale {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_project-font---spacing--24);
  position: sticky;
  /* Sotto la testata fissa, piu' il respiro di una scheda. */
  top: calc(var(--r-ingombro-testata) + var(--_project-font---all-padding--card-padding));
}

.r-faq-laterale h2 {
  margin: 0;
}

.r-faq-gruppi {
  display: flex;
  flex-direction: column;
  gap: var(--_project-font---spacing--32);
}

.r-faq-gruppo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.r-faq-etichetta {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Le domande in attesa di risposta: elenco dentro al segnaposto.
   Restano domande, non finte risposte. */
.r-elenco-domande {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
  padding-left: 20px;
}

.r-elenco-domande li {
  color: var(--neutral-04);
}

/* ------------------------------------------------------------
   PIEDE PAGINA — le tre colonne di collegamenti
   ------------------------------------------------------------ */
.r-piede-colonne {
  display: flex;
  /* Le tre colonne stanno in riga e si prendono lo spazio che
     serve: il blocco del logo accanto e' elastico e si stringe.
     Con "wrap" invece restavano schiacciate in 400px e la terza
     colonna finiva sotto le altre due. */
  flex: none;
  flex-wrap: nowrap;
  gap: var(--_project-font---spacing--40);
  /* .footer-logo-menu-area dichiara text-align: center e i
     collegamenti lo ereditavano, finendo centrati sotto le loro
     etichette invece che incolonnati. */
  text-align: left;
}

.r-piede-gruppo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.r-piede-titolo {
  margin: 0;
  color: var(--neutral-03);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.r-piede-link {
  color: var(--neutral-04);
  text-decoration: none;
}

@media (hover: hover) {
  .r-piede-link:hover {
    color: var(--primary-color);
  }
}

/* ============================================================
   PUNTI DI ROTTURA
   991 / 767 / 479, gli stessi del sito e del foglio comune.
   ============================================================ */

@media screen and (max-width: 991px) {

  /* Tutte le impaginazioni a due colonne diventano una sola.
     L'immagine della hero passa sotto al testo: a 900px di
     larghezza una colonna da 450 non regge un titolo da 60px. */
  .r-hero,
  .r-due-colonne,
  .r-due-colonne.stretta-sinistra,
  .r-faq-colonne {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--_project-font---spacing--40);
  }

  .r-hero-media {
    aspect-ratio: 16 / 9;
    max-height: none;
  }

  /* Ferma non ha piu' senso quando la testata sta sopra le
     domande invece che accanto. */
  .r-faq-laterale {
    position: static;
  }

  .r-coordinatore {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--_project-font---spacing--32);
    padding: var(--_project-font---all-padding--32px);
  }

  .r-coordinatore-ritratto {
    height: 320px;
  }

  .r-media-generazione {
    max-width: none;
  }

  .r-piede-colonne {
    gap: var(--_project-font---spacing--40);
  }
}

@media screen and (max-width: 767px) {
  /* Le due schede corso si impilano. Fra 768 e 991 restano
     affiancate: e' li' che il confronto serve di piu' e lo
     schermo lo consente ancora. */
  .r-schede-corso,
  .r-pilastri,
  .r-requisiti {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Impilate, le due descrizioni non devono piu' allinearsi fra
     loro: l'altezza minima diventa solo un buco bianco. */
  .r-scheda-nome {
    min-height: 0;
  }

  .r-scheda-corso {
    padding: var(--_project-font---all-padding--32px);
  }

  /* I requisiti smettono di essere schede e diventano un elenco
     con la spunta: quattro riquadri in colonna su 375px sono
     quattro scatole vuote, la spunta dice la stessa cosa in un
     quarto dello spazio. */
  .r-requisiti {
    gap: 0;
  }

  .r-requisito {
    padding: var(--_project-font---spacing--20) 0;
    border: 0;
    border-top: 1px solid var(--neutral-02);
    border-radius: 0;
    background-color: #0000;
  }

  .r-requisito:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .r-requisito .r-spunta-icona {
    display: inline-flex;
    margin-top: 2px;
  }

  .r-attestato {
    min-height: 0;
    padding: var(--_project-font---all-padding--card-padding);
  }

  /* Sul telefono il piede e' gia' in colonna: le tre colonne di
     collegamenti possono andare a capo fra loro. */
  .r-piede-colonne {
    flex-wrap: wrap;
    gap: var(--_project-font---spacing--24) var(--_project-font---spacing--40);
  }

  /* I due comandi della hero sono passati al componente .cta: il
     selettore segue, se no sul telefono tornano affiancati e stretti. */
  .r-hero-azioni .cta {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------
   DUE SEZIONI BIANCHE DI FILA
   Dove il fondo si alterna (bianco / neutral-02) lo stacco e' il
   padding di una sezione sola. Fra due sezioni bianche invece si
   sommavano il fondo della prima e la testa della seconda: 240px
   di vuoto, il doppio del resto della pagina (sede, coordinatore,
   "A chi e' rivolto", attestato). La seconda perde la testa.
   ------------------------------------------------------------ */
.r-sezione:not(.alt) + .r-sezione:not(.alt) {
  padding-top: 0;
}

/* ------------------------------------------------------------
   LO SCORRIMENTO ORIZZONTALE A 1024px

   Il ritratto del coordinatore e' animato da Webflow: prima di
   entrare in vista sta a opacita' zero e spostato di 20px a
   destra, e ci arriva scorrendo. Lo spostamento pero' esiste anche
   da fermo, e intorno ai 1024px il suo contenitore arriva gia' a
   dieci pixel dal bordo: i venti dello spostamento finiscono fuori
   e il browser aggiunge la barra orizzontale.

   Si taglia sul contenitore e non si tocca l'animazione. Da ferma
   l'immagine e' grande quanto il contenitore e il taglio non ha
   niente da togliere; durante l'ingresso perde una striscia a
   destra, mentre e' quasi trasparente e si sta ancora muovendo.

   Perche' qui e non su body: sulla pagina ci sono venti elementi
   con lo stesso spostamento, e verrebbe voglia di tagliare tutto in
   un colpo. Ma un taglio sul body cambia il comportamento di
   position: sticky, che questa pagina usa per la colonna delle
   domande frequenti. Meglio una riga precisa che una larga.
   ------------------------------------------------------------ */
.div-block {
  overflow: hidden;
}

/* Stessa storia del ritratto qui sopra, un piano piu' in alto: dentro
   questa sezione c'e' un altro blocco che Webflow tiene spostato di
   20px a destra finche' non entra in vista, e su telefono quei 20px
   finiscono fuori - otto pixel di barra orizzontale, uguali a ogni
   larghezza perche' lo spostamento e' fisso.

   clip e non hidden: hidden creerebbe un contenitore di scorrimento e
   cambierebbe il comportamento di position: sticky piu' avanti nella
   pagina. clip taglia e basta. */
.r-sezione-coordinatore {
  overflow-x: clip;
}

/* CTA finale della home: titolo, frase e bottone centrati (05/10/2026). */
.r-cta-finale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_project-font---spacing--20);
  text-align: center;
}
.r-cta-finale h2,
.r-cta-finale p {
  margin: 0;
}
.r-cta-finale p {
  max-width: 56ch;
}
.r-cta-finale .cta {
  margin-top: var(--_project-font---spacing--12, 12px);
}

/* ------------------------------------------------------------
   I DUE PERCORSI (13/10/2026, terza versione)
   Due fasce larghe quanto lo schermo con i colori del sito: AI
   Essentials sul grigio-verde chiaro (neutral-02), Pro Hospitality
   sul bianco. Niente schede e niente illustrazioni: l'immagine sono
   le persone a cui il corso si rivolge, scritte in grande, con una
   parola - sempre quella centrale - nel gradiente del marchio. Testo, dati e pulsante sono
   quelli di sempre del sito.
   ------------------------------------------------------------ */
.r-percorsi-sezione {
  position: relative;
}

.r-ancora {
  position: absolute;
  top: calc(-1 * var(--r-ingombro-testata, 104px));
}

.r-percorsi-intro {
  padding-bottom: 64px;
}

.r-percorso {
  padding: 112px var(--_project-font---all-padding--left-right);
}

.r-percorso--essentials { background-color: var(--neutral-02); }

/* Il coordinatore segue la fascia bianca dei corsi per le aziende: la
   fascia ha gia' il suo spazio sotto, la sezione non ne aggiunge. */
.r-percorsi-sezione + .r-sezione:not(.alt) {
  padding-top: 0;
}
.r-percorso--hospitality { background-color: var(--neutral-01); }

.r-percorso-griglia {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}

.r-percorso--hospitality .r-percorso-griglia {
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
}

.r-percorso-testo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 640px;
}

.r-percorso-testo p,
.r-percorso-testo h3,
.r-percorso-pubblico {
  margin: 0;
}

.r-percorso-attacco {
  font-family: var(--_project-font---project-font--secondary-font);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--primary-color);
}

.r-percorso-nome {
  margin-top: 8px !important;
  font-family: var(--_project-font---project-font--font-family);
  font-size: clamp(44px, 5.4vw, 76px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--neutral-04);
}

.r-percorso-racconto {
  margin-top: 28px !important;
  font-family: var(--_project-font---project-font--secondary-font);
  font-size: 19px;
  line-height: 1.6;
  color: var(--neutral-03);
}

/* Nella fascia delle aziende i dati sono quelli del primo corso:
   il titoletto lo dice, e il blocco sotto gli sta attaccato. */
.r-percorso-fatti-titolo {
  margin-top: 36px !important;
  font-family: var(--_project-font---project-font--secondary-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--neutral-04);
}

.r-percorso-fatti-titolo + .r-percorso-fatti {
  margin-top: 14px;
}

.r-percorso-racconto + .r-percorso-racconto {
  margin-top: 16px !important;
}

/* I dati del corso in un unico riquadro morbido, quattro celle
   divise da una riga sottile: il valore in grande, sotto una nota.
   Bianco sul grigio-verde di AI Essentials, grigio-verde sul bianco
   dei corsi per le aziende: il riquadro si stacca sempre dal fondo. */
.r-percorso-fatti {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 36px 0 40px;
  padding: 22px 0;
  border-radius: 24px;
  background-color: var(--neutral-01);
}

.r-percorso--hospitality .r-percorso-fatti {
  background-color: var(--neutral-02);
}

.r-percorso-fatti div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 22px;
  border-left: 1px solid var(--r-bordo-scheda-chiara, #0c0e171f);
}

.r-percorso-fatti div:first-child {
  border-left: 0;
}

.r-percorso-fatti dt {
  font-family: var(--_project-font---project-font--secondary-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-03);
}

.r-percorso-fatti dd {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.r-fatto-valore {
  font-family: var(--_project-font---project-font--font-family);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--neutral-04);
}

.r-fatto-nota {
  font-family: var(--_project-font---project-font--secondary-font);
  font-size: 14px;
  line-height: 1.35;
  color: var(--neutral-03);
}

/* Le persone a cui il corso si rivolge, in grande: una per riga,
   le altre in grigio tenue e una nel gradiente del marchio. */
.r-percorso-pubblico {
  display: flex;
  flex-direction: column;
  font-family: var(--_project-font---project-font--font-family);
  /* Ogni voce sta su una riga sola, anche "Strutture ricettive":
     la misura e' quella che la fa entrare nella sua colonna. */
  font-size: clamp(34px, 4.8vw, 70px);
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  /* Il viola del gradiente, schiarito: le parole accanto alla
     centrale lo richiamano senza fargli concorrenza. */
  color: rgba(179, 82, 237, 0.3);
}

.r-percorso--essentials .r-percorso-pubblico {
  align-items: flex-end;
  text-align: right;
}

.r-percorso-pubblico span:nth-child(2) {
  background-image: var(--gaa-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0000;
}

@media screen and (max-width: 991px) {
  .r-percorso { padding-top: 88px; padding-bottom: 88px; }
  .r-percorso-griglia,
  .r-percorso--hospitality .r-percorso-griglia {
    gap: 40px;
  }
  .r-percorso-fatti {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
  }
  .r-percorso-fatti div:nth-child(3) {
    border-left: 0;
  }
}

@media screen and (max-width: 767px) {
  .r-percorsi-intro { padding-bottom: 48px; }
  .r-percorso {
    padding: 64px 20px;
  }
  .r-percorso-griglia,
  .r-percorso--hospitality .r-percorso-griglia {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .r-percorso-pubblico {
    order: -1;
    font-size: 36px;
  }
  .r-percorso--essentials .r-percorso-pubblico {
    align-items: flex-start;
    text-align: left;
  }
  .r-percorso-racconto { font-size: 17px; }
  .r-percorso-cta {
    width: 100%;
  }
}

/* Il pulsante "Scopri i corsi" nella hero della home (14/10/2026):
   chi cerca i corsi li raggiunge senza scorrere. */
.r-hero-cta {
  align-self: flex-start;
}

/* I pulsanti dei due corsi (14/10/2026): piu' grandi del resto della
   pagina, con un'ombra colorata, e di due colori, cosi'
   scorrendo si vede subito dove si entra. AI Essentials ha il blu del
   sito, i corsi per le aziende il lilla. */
.r-percorso-cta.cta {
  height: 68px;
  padding: 0 40px;
  font-size: 19px;
}
.r-percorso-cta.cta--primaria {
  box-shadow: 0 12px 30px rgba(60, 40, 249, 0.35);
}
.r-percorso-cta.cta--lilla {
  box-shadow: 0 12px 30px rgba(157, 92, 240, 0.38);
}
@media (hover: hover) {
  .r-percorso-cta:hover }
@media screen and (max-width: 767px) {
  .r-percorso-cta.cta {
    height: 60px;
    font-size: 17px;
  }
}