/* ============================================================
   Generation AI Academy — personalizzazioni oltre l'export Webflow
   Caricato DOPO i CSS di Webflow, così vince sulle loro regole.
   Per tornare all'aspetto originale basta togliere questo file
   e rimettere l'icona Lottie nelle pagine.
   ============================================================ */

/* Il gradiente del brand: lo stesso di .gradient-text nei titoli */
:root {
  --gaa-gradient: linear-gradient(
    71deg,
    var(--secondary-color),
    var(--primary-color) 43%,
    var(--primary-color) 52%,
    #51fd7a
  );
}

/* ------------------------------------------------------------
   MENU MOBILE
   Sotto i 991px Webflow sostituisce la barra di navigazione con
   il pulsante a tre righe. Qui sotto viene rivestito con gli
   elementi del design system: pillole come i pulsanti del sito
   e il gradiente viola-blu-verde dei titoli.

   Nota sui raggi: i token --border-radius--NN si rimpiccioliscono
   da soli su mobile (il "24" vale 16px). Usiamo il token, non il
   numero fisso, così restiamo agganciati al design system.
   ------------------------------------------------------------ */
@media screen and (max-width: 991px) {

  /* ---------- Pulsante a tre righe ---------- */
  .hamburger-icon-block {
    width: 44px;                 /* area di tocco comoda da dito */
    height: 44px;
    padding: 0;
    border-radius: var(--_project-font---border-radius--16);
    background-color: var(--neutral-02);
    position: relative;          /* aggancio per centrare l'icona */
    transition: background-color .25s ease;
  }
  .hamburger-icon-block.w--open {
    background-image: var(--gaa-gradient);
    background-color: transparent;
  }

  /* Centratura in assoluto: Webflow impone display:block sul
     pulsante con una regola più forte, quindi il flex non basta. */
  .gaa-burger {
    width: 20px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .gaa-burger span {
    background-color: var(--neutral-04);
    border-radius: 2px;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1),
                opacity .2s ease,
                background-color .25s ease;
  }
  .gaa-burger span:nth-child(1) { top: 0; }
  .gaa-burger span:nth-child(2) { top: 6px; }
  .gaa-burger span:nth-child(3) { top: 12px; }

  /* Aperto: le tre righe diventano una X bianca sul gradiente */
  .w--open .gaa-burger span { background-color: var(--neutral-01); }
  .w--open .gaa-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .w--open .gaa-burger span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
  .w--open .gaa-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ---------- Pannello del menu ---------- */
  .menu-item-list {
    background-color: var(--neutral-01);
    border: 1px solid var(--neutral-02);
    border-radius: var(--_project-font---border-radius--24);
    box-shadow: 0 18px 44px rgba(13, 23, 20, .13);
    grid-row-gap: 2px;
    margin-top: 0;
    padding: 8px;
    overflow: visible;
  }

  /* Via le righine divisorie: basta la spaziatura a separare */
  .menu-item {
    background-color: transparent;
    border: 0;
    border-radius: var(--_project-font---border-radius--100);
  }

  /* Voci a pillola, come i pulsanti del sito */
  .nav-item {
    grid-column-gap: 12px;
    border-radius: var(--_project-font---border-radius--100);
    align-items: center;
    padding: 14px 18px;
    transition: background-color .2s ease;
  }

  /* Pallino col gradiente del brand, sempre visibile: su mobile
     non esiste il passaggio del mouse, quindi il colore del brand
     deve vedersi da subito, non solo al tocco. */
  .nav-item:before {
    content: "";
    background-image: var(--gaa-gradient);
    border-radius: 50%;
    flex: none;
    width: 7px;
    height: 7px;
    opacity: .4;
    transition: opacity .2s ease, transform .2s ease;
  }

  /* Al tocco: pillola col viola del brand e testo BIANCO.

     Qui prima c'era il testo col gradiente, come nei titoli. Non
     funzionava: un'interazione di Webflow dipinge la pillola di
     --primary-color (#3c28f9), e il gradiente attraversa proprio
     quel colore nel suo tratto centrale. Testo e sfondo finivano
     identici, contrasto 1:1, e la parola si bucava nel mezzo
     ("IL CAL NDARIO"). Il gradiente resta dov'e' leggibile: nei
     titoli su fondo chiaro e nel pallino a riposo.

     Il bianco su #3c28f9 da' un contrasto di 7.3:1 - oltre il 4.5:1
     richiesto dalle WCAG AA, e sopra il 7:1 della AAA. E' anche la
     stessa coppia usata dai pulsanti pieni del sito.

     Lo sfondo lo dichiariamo anche noi, non solo l'interazione: se
     quella non parte (JS lento o non caricato) la pillola resta
     comunque viola e il testo bianco resta leggibile. Se invece
     parte, dipinge lo stesso colore e non si nota alcun salto. */
  .nav-item:active {
    background-color: var(--primary-color);
  }
  .nav-item:active:before {
    opacity: 1;
    transform: scale(1.25);
    background-image: none;
    background-color: var(--neutral-01);
  }
  .nav-item:active p {
    background-image: none;
    color: var(--neutral-01);
    -webkit-text-fill-color: var(--neutral-01);
  }

  /* Lo stesso al passaggio del mouse, ma solo dove il mouse
     esiste davvero: sui telefoni l'effetto resterebbe attaccato. */
  @media (hover: hover) {
    .nav-item:hover { background-color: var(--primary-color); }
    .nav-item:hover:before {
      opacity: 1;
      transform: scale(1.25);
      background-image: none;
      background-color: var(--neutral-01);
    }
    .nav-item:hover p {
      background-image: none;
      color: var(--neutral-01);
      -webkit-text-fill-color: var(--neutral-01);
    }
  }

  /* Accessibilità: bordo visibile per chi naviga da tastiera */
  .nav-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
}

/* ------------------------------------------------------------
   DOMANDE FREQUENTI

   Le risposte vengono chiuse da webflow.js, che pesa 890 KB.
   Finche' non e' pronto, la pagina mostra tutte le risposte aperte
   e le schede alte ~570px invece di 85px, poi collassano di colpo:
   su una connessione lenta quel "lampo" si vede bene.
   Chiudendole gia' da CSS il problema sparisce.

   La regola vale SOLO a risposta chiusa. Webflow aggiunge w--open
   quando si apre: senza :not(.w--open) le risposte non si
   aprirebbero piu', perche' aprendo Webflow toglie l'altezza che
   aveva scritto sull'elemento e questa regola le richiuderebbe.

   Niente !important: durante l'animazione l'altezza scritta
   sull'elemento da Webflow deve poter vincere su questa regola.
   ------------------------------------------------------------ */
.faq-answer:not(.w--open) {
  height: 0;
}

/* ------------------------------------------------------------
   DOMANDE FREQUENTI - spazi verticali

   .single-faq e .faq-answer dichiarano white-space: pre-wrap, e con
   pre-wrap i rientri del sorgente HTML smettono di essere invisibili:
   l'indentazione fra </p>, </div> e </nav> diventa righe vere, e nei
   contenitori flex i nodi di soli spazi diventano elementi flex a
   tutti gli effetti. Misurato a 1440px: 113px di vuoto sopra il testo
   e 113px sotto, invece dei ~30px voluti.

   Quel vuoto nasce dalla formattazione del file, non dal contenuto:
   e' la ragione per cui l'ingombro non si puo' governare dai padding
   finche' pre-wrap resta acceso. Spegnendolo lo spazio torna a
   dipendere solo dai padding, quindi e' identico su ogni risposta a
   prescindere da quanto e' lunga.

   Si puo' spegnere senza perdere nulla: nessuno dei 60 paragrafi
   delle FAQ (home + 3 landing) usa a capo nel sorgente: il testo va a
   capo da solo e dove serve una riga vuota c'e' un <br>, che non
   dipende da pre-wrap. Resta invece word-break: keep-all, che e' un
   altro meccanismo e non c'entra con gli spazi verticali.
   ------------------------------------------------------------ */
.single-faq,
.single-faq .faq-question,
.single-faq .faq-answer,
.single-faq .faq-answer-area {
  white-space: normal;
}

/* Stacco domanda -> risposta pari al padding della scheda, cosi' il
   testo ha lo stesso respiro sopra e sotto e il riquadro risulta
   otticamente centrato. La variabile segue i breakpoint da sola
   (28px desktop, 20px sotto i 991px), quindi niente numeri fissi. */
.faq-answer-area {
  padding-top: var(--_project-font---all-padding--tm-padding);
}

/* ------------------------------------------------------------
   TESTO COL GRADIENTE - lettere tonde tagliate ai bordi

   .gradient-text colora le parole con background-clip: text: il
   gradiente viene ritagliato dalla forma dei glifi. Il ritaglio pero'
   usa la scatola di sfondo dello span, che e' larga esattamente
   quanto l'avanzamento del testo. Le lettere tonde disegnano un filo
   oltre quell'avanzamento (l'overshoot tipografico, che serve a farle
   sembrare alte quanto le lettere dritte): quel filo cade fuori dalla
   scatola e viene tagliato via.

   Misurato su "impara l'AI facendo": bordo destro della scatola e del
   testo coincidenti, margine 0.00px, e la "o" finale risultava rasata
   sul fianco destro.

   Allarghiamo la scatola di 0.08em per lato e togliamo altrettanto
   con un margine negativo: lo sfondo ha spazio per l'overshoot, ma
   la posizione del testo non cambia di un pixel, quindi il punto
   fermo dopo lo span resta dov'era. Il gradiente si distende su una
   scatola appena piu' larga: differenza non percepibile.
   ------------------------------------------------------------ */
.gradient-text {
  padding-left: .08em;
  margin-left: -.08em;
  padding-right: .08em;
  margin-right: -.08em;
}

/* ------------------------------------------------------------
   LE PRIME SCHERMATE SI ADATTANO ALLO SCHERMO

   Il problema: l'altezza dei primi due blocchi dipende dalla
   LARGHEZZA della finestra, mai dalla sua altezza. L'immagine
   della hero ha proporzione 5:6 su meta' colonna, il video del
   blocco "Una nuova Generazione" ha proporzione 2:1 su tutta la
   colonna: entrambi hanno quindi un'altezza fissa, decisa dalla
   larghezza del contenitore.

   Misurato, con la hero alta sempre 810px:
     1280x800  -> ne avanzano   38px: si intravede la sezione dopo
     1440x900  -> ne avanzano   90px
     1920x1080 -> ne avanzano  270px
   e su un portatile piu' basso di 810px la hero viene tagliata.

   E' questo che fa "sbucare" pezzi degli elementi di sotto: non
   un margine sbagliato, ma due blocchi che non sanno quanto e'
   alto lo schermo.

   Qui sotto lo diciamo loro. Solo da 992px in su: sotto quella
   soglia il layout e' impilato, la hero e' piu' alta dello
   schermo per forza di cose e forzarla lo schiaccerebbe.

   Usiamo svh (small viewport height) e non vh: sui telefoni vh
   conta anche la fascia delle barre del browser, che compaiono e
   scompaiono scorrendo, e il blocco si metterebbe a sobbalzare.
   La riga con vh resta prima come riserva per i browser vecchi.
   ------------------------------------------------------------ */
@media screen and (min-width: 992px) {

  /* --- Prima schermata: la hero --- */

  .hero-section.section-padding {
    min-height: 100vh;
    min-height: 100svh;
  }

  /* Il contenitore e' gia' flex con align-items: center, quindi
     dandogli l'altezza dello schermo i contenuti si centrano da
     soli invece di restare appesi in alto. */
  .hero-content-wrapper-lp-01 {
    min-height: calc(100vh - var(--_project-font---all-padding--left-right));
    min-height: calc(100svh - var(--_project-font---all-padding--left-right));
  }

  /* L'immagine riempie l'altezza rimasta invece di seguire la
     propria proporzione. Il video interno ha object-fit: cover,
     quindi si adatta senza deformarsi: cambia solo quanto se ne
     vede ai lati. */
  .hero-image-01 {
    aspect-ratio: auto;
    height: calc(100vh - var(--_project-font---all-padding--left-right));
    height: calc(100svh - var(--_project-font---all-padding--left-right));
  }

  /* --- Seconda schermata: "Una nuova Generazione" --- */

  /* Lo spazio utile e' lo schermo meno il bordo alto della
     sezione che lo contiene (--padding-top-bottom, 120px). */
  .about-content-area.alt-version {
    min-height: calc(100vh - var(--_project-font---all-padding--padding-top-bottom));
    min-height: calc(100svh - var(--_project-font---all-padding--padding-top-bottom));
    justify-content: center;
  }

  /* Il video si restringe quando lo schermo e' basso, invece di
     far debordare il blocco. Il conto dentro clamp() e':
        schermo - 120 (bordo alto) - 80 (stacco) - 245 (testo)
     cioe' 445px, che e' tutto cio' che sta sotto il video.
     Sopra i 500px non cresce: e' la sua misura naturale, e piu'
     grande perderebbe l'inquadratura. Sotto i 280px non scende:
     serve a restare riconoscibile su schermi molto bassi. */
  .about-hero-image {
    aspect-ratio: auto;
    height: clamp(280px, calc(100vh - 445px), 500px);
    height: clamp(280px, calc(100svh - 445px), 500px);
  }
}

/* ------------------------------------------------------------
   ANCORE - niente bordo del fuoco sulla sezione di arrivo

   js/custom.js sposta il fuoco sulla sezione appena raggiunta,
   come faceva Webflow, perche' chi naviga da tastiera riprenda
   da li'. Il browser pero' disegna il bordo del fuoco attorno
   all'elemento, e qui gli elementi sono sezioni alte fino a
   1912px: si vedeva un rettangolo attorno a mezza pagina.

   Spegnerlo e' sicuro: la sezione e' un contenitore, non un
   comando. Il bordo torna a vedersi appena il fuoco arriva su
   un link o un pulsante veri, che e' dove serve davvero.
   ------------------------------------------------------------ */
.gaa-ancora-a-fuoco:focus {
  outline: none;
}

/* ------------------------------------------------------------
   MOBILE - aria fra i testi

   Sul telefono molte coppie titolo/testo hanno stacco ZERO: non
   e' una scelta, e' che quei contenitori non dichiarano nessuno
   spazio e la scala del progetto parte da 16px, un passo troppo
   grosso per una coppia titolo-sottotitolo. Cosi' sono rimasti
   attaccati.

   Misurato a 390px, stacco fra i due blocchi di testo:
      0px  "Corso AI Essentials" -> "Impara le basi..."
      0px  titolo scheda corso -> descrizione della scheda
      0px  nome coordinatore -> ruolo
      0px  titolo del calendario -> testo
      0px  titolo "modalita'" -> testo
      8px  titolo della scheda "Approccio pratico" -> testo
     16px  titolo di sezione -> paragrafo

   Sotto si aggiungono tre gradini, uno per tipo di coppia. Non
   tocchiamo le griglie strette del calendario (le lettere dei
   giorni, i contenitori di servizio): li' lo zero e' voluto e
   dare aria sfalserebbe le colonne.

   Solo fino a 767px: e' la soglia Webflow del telefono. Da 768
   in su il layout ha gia' il suo respiro.
   ------------------------------------------------------------ */
@media screen and (max-width: 767px) {

  /* Coppie che oggi stanno a zero: titolo e sua riga di seguito.
     10px e' poco piu' di mezza interlinea del testo piccolo
     (23.8px): si legge come "due righe dello stesso discorso",
     non come due blocchi separati. */
  .courses-section-title-02 > div,
  .coordinatore-content-mobile,
  .calendar-title-container,
  .modalita-title {
    grid-row-gap: 10px;
    row-gap: 10px;
    display: flex;
    flex-direction: column;
  }

  /* Il titolo della scheda corso e la sua descrizione: qui il
     gap e' dichiarato a 0, quindi va riscritto. */
  .courses-image-title {
    grid-row-gap: 10px;
    row-gap: 10px;
  }

  /* Coppie gia' staccate di 8px: portate a 14, circa mezza
     interlinea del titolo che le precede. */
  .process-card-text,
  .courses-price-area {
    grid-row-gap: 14px;
    row-gap: 14px;
  }

  /* Titolo di sezione e suo paragrafo: sono blocchi diversi e
     devono leggersi come tali. Usiamo il gradino successivo
     della scala del progetto invece di un numero nostro.

     Il token si rimpicciolisce da solo sul piccolo, come i raggi
     dei bordi piu' sopra: --spacing--24 vale 24px a schermo
     pieno e 20px sul telefono. Quindi qui lo stacco passa da 16
     a 20px - misurato, non dedotto - e resta agganciato al
     design system se un domani la scala cambia. */
  .hero-content-area-alt,
  .section-title,
  .process-title-area {
    grid-row-gap: var(--_project-font---spacing--24);
    row-gap: var(--_project-font---spacing--24);
  }
}

/* ------------------------------------------------------------
   BROCHURE NON ANCORA DISPONIBILE
   La brochure della prima edizione non si scarica piu' e quella
   della seconda non c'e' ancora. I pulsanti restano al loro
   posto - sono tre: hero, scheda laterale e barra fissa del
   telefono - ma spenti, con un badge che spiega perche'.

   Nota: i pulsanti hanno "overflow: hidden", quindi un badge
   messo fuori verrebbe tagliato. Sta percio' dentro, accanto
   all'etichetta, e la riga diventa flex per tenerli affiancati.

   L'opacita' 0.45 chiesta dal documento e' applicata al bordo e
   all'etichetta, non a tutto il pulsante: se sbiadisse anche il
   badge, l'unica parte che deve farsi leggere sparirebbe.
   ------------------------------------------------------------ */
.brochure-disabled {
  border-color: rgba(60, 40, 249, 0.45);
  cursor: default;
  pointer-events: none;
}

.brochure-disabled .button-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.brochure-disabled .button-text > p:not(.badge-novita) {
  opacity: 0.45;
}

/* Il badge: pillola viola, lo stesso viola dei titoli in
   gradiente, cosi' resta dentro la tavolozza del sito. */
.badge-novita {
  background-color: var(--secondary-color);
  color: #fff;
  border-radius: var(--_project-font---border-radius--58);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   BANNER STATISTICHE DELLA PRIMA EDIZIONE
   Prende il posto della griglia delle classi sold out: finche'
   il nuovo calendario non esiste, al suo posto raccontiamo com'e'
   andata la prima edizione.
   ------------------------------------------------------------ */
.edizione-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--_project-font---spacing--24);
  width: 100%;
  padding: var(--_project-font---spacing--24) 0;
}

.edizione-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

/* Il numero usa il gradiente del brand, come i titoli. */
.edizione-stat-numero {
  background-image: var(--gaa-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Sul telefono quattro colonne diventano illeggibili: si
   impilano a due a due. */
@media screen and (max-width: 767px) {
  .edizione-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Contatti diretti al posto del modulo "Richiedi info". */
.contatti-diretti {
  gap: 8px;
}

.contatto-link {
  text-decoration: none;
}

/* Il banner statistiche e il suo testo di chiusura. */
.edizione-stats-wrapper {
  gap: var(--_project-font---spacing--24);
}

/* ------------------------------------------------------------
   HOME MULTI-CORSO — le due card dei corsi
   La home non e' piu' la landing di AI Essentials: presenta i
   due percorsi e lascia scegliere. Le card riusano i token
   della scheda corso (.courses-details-price) invece di
   inventare uno stile nuovo.
   ------------------------------------------------------------ */
.corsi-wrapper {
  display: flex;
  flex-flow: column;
  gap: var(--_project-font---spacing--40);
  width: 100%;
}

.corsi-griglia {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--_project-font---spacing--24);
  width: 100%;
}

.corso-card {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--_project-font---spacing--40);
  padding: var(--_project-font---all-padding--card-padding);
  border: 1px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--32);
  background-color: var(--neutral-01);
}

/* Il prezzo e la sua postilla stanno sulla stessa riga, con la
   postilla allineata alla base della cifra. */
.corso-card-prezzo {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* Sul telefono le due card si impilano. */
@media screen and (max-width: 767px) {
  .corsi-griglia {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   SEGNAPOSTO DEI CONTENUTI MANCANTI
   Riquadri tratteggiati per i contenuti non ancora consegnati.
   Devono sembrare dichiaratamente finti: un testo plausibile
   messo li' per "riempire" e' il modo migliore per ritrovarselo
   pubblicato per sbaglio.
   ------------------------------------------------------------ */
.segnaposto {
  display: flex;
  flex-flow: column;
  gap: 8px;
  width: 100%;
  padding: var(--_project-font---all-padding--card-padding);
  border: 2px dashed var(--secondary-color);
  border-radius: var(--_project-font---border-radius--32);
  background-color: var(--neutral-02);
}

.segnaposto-etichetta {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: var(--_project-font---border-radius--58);
  background-color: var(--secondary-color);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* Sulla pagina di un corso solo la scheda non va in griglia. */
.corso-card-singola {
  max-width: 560px;
}

/* ============================================================
   RESTYLING 09/2026 — TESTATA A PILLOLA FLOTTANTE (v2)

   La prima versione era una barra piena a tutta larghezza. La
   seconda iterazione di design la sostituisce con una pillola
   bianca che galleggia sopra il contenuto, staccata dal bordo.

   Sta FUORI dal flusso, come nel mockup: le pagine compensano con
   uno spazio in cima alla prima sezione (148px sul desktop, 100
   sul telefono). E' l'unico modo di avere il contenuto che scorre
   sotto la pillola, che e' il punto di una testata flottante.

   Uso "fixed" e non "sticky": sticky occuperebbe il suo spazio
   nel flusso e la pillola non galleggerebbe su niente.

   ATTENZIONE, l'errore in cui e' gia' cascato chi ha disegnato i
   mockup: non ancorare la pillola con "left: 50%" piu' una
   traslazione. Un elemento posizionato cosi' non puo' superare
   meta' della larghezza del contenitore, e le voci vanno a capo
   su se stesse ("La / filosofia"). Serve la fascia larga quanto
   lo schermo e la pillola centrata dentro.

   Lo scheletro resta quello di Webflow (.navbar .w-nav) perche'
   il pulsante a tre righe del telefono e' guidato da webflow.js.
   ============================================================ */
.header {
  position: fixed;
  top: 28px;
  left: 0;
  right: 0;
  bottom: auto;
  margin-top: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  padding: 0 40px;
  background-color: #0000;
  border-bottom: 0;
  pointer-events: none;
}

/* Sulla home la testata ha ancora l'interazione Webflow (data-w-id):
   parte nascosta con translateY(-120px) e allo scorrimento scende a
   translateY(+120px). Quei 120px in piu' vanno compensati con lo
   stesso margine che aveva l'originale, altrimenti la pillola si
   ferma a 148px dal bordo, a meta' schermo, invece che in cima
   come su generationaiacademy.it. Le altre pagine non hanno
   l'interazione e restano a margine zero. */
.header[data-w-id] {
  margin-top: -120px;
}

/* I contenitori intermedi dell'export non devono ne' allargare la
   pillola ne' stringerla: la pillola si dimensiona sul contenuto. */
.header .container,
.header .header-content-wrapper,
.header .navbar,
.header .nav-content-wrapper {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* La pillola vera e propria. */
.flex-block-2 {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: 76px;
  padding: 0 20px 0 24px;
  border: 0;
  border-radius: var(--_project-font---border-radius--32);
  background-color: var(--neutral-01);
  box-shadow: 0 8px 40px #0000001f;
}

/* Quando c'e' l'invito all'azione il bordo destro si stringe. */
.flex-block-2.con-cta {
  padding-right: 14px;
}

.header-logo-link {
  flex: none;
  margin-right: 18px;
}

/* Sulle pagine corso, fra logo ed etichetta, una riga sottile. */
.header-separatore {
  flex: none;
  width: 1px;
  height: 28px;
  margin: 0 16px 0 0;
  background-color: var(--neutral-02);
}

/* Il nome del corso: dice su quale pagina sei, e NON e' un link.
   Serve perche' le due pagine corso hanno ancore con gli stessi
   nomi: senza, la testata non distingue una dall'altra. */
.header-etichetta-corso {
  flex: none;
  margin-right: 18px;
}

.menu-item-list {
  padding-left: 0;
  align-items: center;
  gap: 2px;
}

.nav-item {
  height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--_project-font---border-radius--100, 100px);
}

/* Le voci vanno in maiuscolo, come sul sito online. Il maiuscolo
   lo fa il CSS e non il testo scritto a mano: nel markup resta
   "La filosofia", che e' quello che leggono i lettori di schermo
   e che si puo' ancora cercare nella pagina.

   Riguarda solo le voci: l'etichetta del corso accanto al logo e'
   un nome proprio - AI Essentials, Pro Hospitality - e va lasciata
   com'e'. Lo stesso vale per l'invito all'azione. */
.nav-item p {
  text-transform: uppercase;
}

/* Una voce di due parole non deve mai andare a capo su se stessa. */
.nav-item,
.nav-cta,
.header-etichetta-corso {
  white-space: nowrap;
}

:root {
  --gaa-primary-tint: rgba(60, 40, 249, 0.1);
}

.nav-item.attivo {
  background-color: var(--gaa-primary-tint);
}

.nav-item.attivo p {
  color: var(--primary-color);
}

.nav-cta {
  height: 52px;
  padding: 0 26px;
  margin-left: 18px;
  display: inline-flex;
  align-items: center;
  flex: none;
  border-radius: var(--_project-font---border-radius--58);
  background-color: var(--primary-color);
  text-decoration: none;
}

.nav-cta p {
  color: var(--neutral-01);
}

@media (hover: hover) {
  .nav-item:hover { background-color: var(--gaa-primary-tint); }
  .nav-item:hover p { color: var(--primary-color); }
  .nav-cta:hover { background-color: var(--primary-color-hover); }
}

.nav-item:focus-visible,
.nav-cta:focus-visible,
.header-logo-link:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Fra i 992 e i 1200px la pillola delle pagine corso non ci sta:
   logo, etichetta del corso, quattro voci in maiuscolo e l'invito
   all'azione sommano piu' della larghezza disponibile, e il logo
   finiva tagliato. Qui si stringe tutto quello che si puo'
   stringere senza toccare le misure dei comandi.

   L'etichetta del corso era sparita da qui finche' le voci erano
   a 16px semibold. Alleggerite a 14px medium la pillola si e'
   accorciata di quasi cento pixel, e l'etichetta ci sta di nuovo:
   rimessa, perche' e' la sola cosa che distingue le due pagine
   corso, che hanno ancore con gli stessi nomi. */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  .header {
    padding: 0 16px;
  }
  .flex-block-2 {
    gap: 2px;
    padding: 0 12px 0 16px;
  }
  .header-logo-link {
    margin-right: 10px;
  }
  .header-logo {
    width: 140px;
  }
  .nav-item {
    padding: 0 11px;
  }
  .nav-cta {
    padding: 0 20px;
    margin-left: 10px;
  }
}

@media screen and (max-width: 991px) {
  .header {
    top: 16px;
    left: 16px;
    right: 16px;
    padding: 0;
    /* Webflow impone width: 100% sotto i 479px, che annulla i
       margini laterali e manda la pillola a sforare a destra.
       Con width: auto tornano a comandare left e right. */
    width: auto;
  }
  /* I contenitori intermedi hanno larghezza automatica: senza
     riportarli a tutta larghezza, il 100% della pillola vale
     quanto il suo contenuto e la barra resta stretta. */
  .header .container,
  .header .header-content-wrapper,
  .header .navbar,
  .header .nav-content-wrapper {
    width: 100%;
  }
  .flex-block-2 {
    width: 100%;
    height: 60px;
    padding: 0 8px 0 14px;
    border-radius: var(--_project-font---border-radius--24);
    justify-content: space-between;
  }
  .header-logo-link {
    margin-right: 0;
  }
  .nav-cta {
    display: none;
  }
}

/* ------------------------------------------------------------
   IL FUOCO DA TASTIERA SULLE DOMANDE FREQUENTI
   webflow.css mette "outline: 0" su .w-dropdown-toggle, che e'
   quello che sta sotto .faq-question. Risultato: chi naviga con
   la tastiera attraversava tutte e quindici le domande senza mai
   vedere dov'era.

   Sta qui e non nei fogli del restyling perche' il difetto e' di
   tutte le pagine, compresa la home del 1 ottobre che va online
   per prima. Non sposta nulla nell'impaginazione: si vede solo
   quando si arriva con il tasto di tabulazione.
   ------------------------------------------------------------ */
.faq-question:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   LE DIECI CLASSI DELLA SECONDA EDIZIONE (home, #corsi)
   Stessa grafica del calendario della prima edizione (classi
   .modalita-*, .weekday-*, .classroom-* di Webflow), con in piu' il
   pulsante "Candidati" su ogni classe. Una classe piena (js/posti.js
   aggiunge .piena) torna ad avere l'aspetto delle vecchie "SOLD OUT".
   ------------------------------------------------------------ */
.classi-wrapper {
  scroll-margin-top: 130px;
}
/* Il verde della palette (#39D98A) e' troppo chiaro per un testo
   piccolo su bianco: sta nel pallino, la scritta resta scura. */
.classe-stato {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 600;
  color: var(--neutral-04);
}
.classe-stato::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #39d98a;
}
/* Lo stesso verde chiaro delle vecchie schede SOLD OUT (neutral-02):
   aperte o piene, le schede hanno lo stesso fondo; cambia il testo. */
.classe-aperta {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--neutral-02);
  border-color: var(--neutral-02);
  transition: border-color .2s;
}
/* "Candidati" e' un link sobrio, ma copre tutta la scheda (::after):
   si clicca ovunque sulla classe. */
.classe-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--primary-color);
  text-decoration: none;
}
.classe-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.classe-link svg {
  transition: transform .2s;
}
.classe-aperta:hover {
  border-color: var(--primary-color);
}
.classe-aperta:hover .classe-link svg {
  transform: translateX(3px);
}
.classe-link:focus-visible {
  outline: none;
}
.classe-aperta:has(.classe-link:focus-visible) {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.classroom-container.piena .classe-stato {
  color: #f80e0b;
}
.classroom-container.piena .classe-stato::before {
  display: none;
}
.classroom-container.piena p:not(.classe-stato) {
  color: var(--disabled-text, #9ba39e);
}
.classroom-container.piena .classe-link {
  color: var(--disabled-text, #9ba39e);
  pointer-events: none;
}
.classroom-container.piena:hover {
  border-color: var(--neutral-02);
}
.classi-nota {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border-radius: var(--_project-font---border-radius--24);
  background-color: var(--neutral-02);
}
.classi-nota p,
.classi-lista-attesa {
  margin: 0;
}


/* I due documenti nel modulo di candidatura (/candidati): il campo file
   prende l'aspetto dei campi di testo di Webflow. */
.documento-file {
  height: auto;
  padding: 10px 14px;
  cursor: pointer;
}
.documento-file::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  border: 1px solid var(--primary-color);
  border-radius: 58px;
  background-color: var(--neutral-01);
  color: var(--primary-color);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}
.documento-aiuto {
  margin: 6px 0 0;
}
/* La riga sotto il campo con il file scelto (js/documenti.js). */
.documento-scelto {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  font-size: 14px;
}
.documento-scelto[hidden] {
  display: none;
}
.documento-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--neutral-04);
}
.documento-azione {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary-color);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.documento-modulo {
  color: var(--primary-color);
  font-weight: 600;
}

/* ------------------------------------------------------------
   I VIDEO DI SFONDO SOPRA IL LORO POSTER
   webflow.css mette il <video> a z-index: -100 dentro
   .w-background-video. Da quando il poster e' anche lo sfondo del
   contenitore, quel -100 scendeva sotto lo sfondo stesso: il video
   girava ma si vedeva solo l'immagine ferma. isolation: isolate fa
   del contenitore un contesto a se': il video resta sopra il suo
   sfondo, che si vede solo finche' il video non e' pronto.
   ------------------------------------------------------------ */
.w-background-video {
  isolation: isolate;
}

/* ------------------------------------------------------------
   IL VIDEO DELLA G SEMPRE INTERO
   Sugli schermi bassi .about-hero-image si accorcia (vedi sopra) e
   il video, a object-fit: cover, perdeva la parte alta e bassa della
   G. Il video ha lo sfondo bianco: con contain resta intero e lo
   spazio che avanza ai lati e' bianco come lui. Il poster di sfondo
   segue la stessa regola, per non spuntare ai lati.
   ------------------------------------------------------------ */
.about-hero-image.w-background-video > video {
  object-fit: contain;
}
.about-hero-image.w-background-video {
  background-color: #fff;
  background-size: contain !important;
}

/* Invito alla lista d'attesa sotto le classi (solo con almeno una
   classe SOLD OUT). */
/* Lo stesso fondo delle schede delle classi: si nota sotto la griglia. */
.classi-lista-attesa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 24px;
  background-color: var(--neutral-02);
  border: 1px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--24);
  text-align: center;
}
.classi-lista-attesa .button-primary {
  margin-top: 8px;
}
/* Larghi quanto la griglia delle classi, non quanto il loro testo. */
.classi-lista-attesa,
.classi-nota {
  align-self: stretch;
}
.classi-lista-attesa[hidden] {
  display: none;
}
.classi-lista-attesa p {
  margin: 0;
}

.classi-preferite-aiuto {
  margin: 8px 0 0;
}

/* Classi preferite nel modulo della lista d'attesa: due colonne
   (infrasettimanale, mista), una casella per classe. */
.classi-preferite {
  margin: 0;
  padding: 0;
  border: 0;
}
.classi-preferite legend {
  margin-bottom: 8px;
}
.classi-preferite-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.classi-preferite-colonna {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.classi-preferite-colonna p {
  margin: 0 0 2px;
}
.classe-preferita {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #e2e6e4;
  border-radius: 10px;
  background-color: var(--neutral-01);
  cursor: pointer;
}
.classe-preferita .w-checkbox-input {
  margin: 0;
  float: none;
}
.classe-preferita:has(input:checked) {
  border-color: var(--primary-color);
}
.classi-preferite-errore {
  margin: 6px 0 0;
  color: #f80e0b;
}
@media screen and (max-width: 479px) {
  .classi-preferite-griglia {
    grid-template-columns: 1fr;
  }
}

/* Il titolo "Corso AI Essentials" sopra i 6 moduli in /ai-essentials, a sinistra come quello
   del calendario. */
.programma-titolo {
  align-self: stretch;
  margin-bottom: 8px;
}
.programma-titolo h2 {
  margin: 0;
}

/* In /ai-essentials il corpo e' quello della home (container Webflow,
   1320px): l'intestazione prende la stessa larghezza, cosi' titolo,
   moduli e card laterale partono e finiscono sulle stesse righe. */
.r-hero-corso.r-hero-largo .r-hero-contenuto {
  max-width: 1320px;
}


/* "A chi e' rivolto" in homepage: le schede dei corsi su fondo bianco
   avrebbero solo un bordo quasi invisibile. Prendono il fondo verde
   chiaro del riquadro del coordinatore e delle schede delle classi. */
#requisiti .r-scheda-corso {
  background-color: var(--neutral-02);
  border-color: var(--neutral-02);
}

/* L'ingresso delle parti senza interazione Webflow (js/rivela.js):
   stessa dissolvenza dal basso delle parti animate da webflow.js. */
.rivela-attivo [data-rivela] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .6s ease, transform .6s ease, border-color .2s;
}
.rivela-attivo [data-rivela].rivelato {
  opacity: 1;
  transform: none;
}

/* /pro-hospitality: le quattro lezioni hanno la scheda delle classi
   di AI Essentials, ma non si scelgono: niente bordo al passaggio. */
.classe-aperta.lezione:hover {
  border-color: var(--neutral-02);
}
/* Il prezzo nella card laterale, sotto il nome del corso. */
.prezzo-card {
  margin: 4px 0 0;
}

/* ------------------------------------------------------------
   IL PIEDE VECCHIO NON STA NEI TELEFONI STRETTI

   La riga legale - Privacy Policy, Condizioni di vendita, Diritto
   di recesso - e' un flex in riga senza permesso di andare a capo:
   le serve circa 376px, e sotto i 390 sforava portandosi dietro la
   barra orizzontale. Lo sforo cresceva stringendo: 8px a 390, 27 a
   360, 67 a 320.

   E' il piede Webflow originale, ancora su diciannove pagine: la
   home nuova ha il suo e non ne soffre. Una riga qui le sistema
   tutte insieme.
   ------------------------------------------------------------ */
.div-block-4 {
  flex-wrap: wrap;
}

/* Il blocco "come si comincia" e' tenuto da Webflow spostato di 20px a
   destra finche' non entra in vista. Su telefono quei 20px escono dallo
   schermo: otto pixel di barra orizzontale, uguali a ogni larghezza
   perche' lo spostamento e' fisso e non dipende dallo schermo.

   Si taglia il contenitore invece di toccare l'animazione: a fine corsa
   il blocco e' tornato a zero e il taglio non ha niente da togliere.

   clip e non hidden, perche' hidden creerebbe un contenitore di
   scorrimento e cambierebbe il comportamento di position: sticky. */
.starting-process-content-wrapper {
  overflow-x: clip;
}

/* Il "404" grande e trasparente della pagina di errore e' fissato a
   180px: a quella misura e' largo 343px, e sotto i 360 di schermo
   esce dal bordo portandosi dietro la barra orizzontale.

   Si lega alla larghezza invece di tagliarlo: e' un numero decorativo,
   e un numero decorativo mozzato si nota piu' di uno piu' piccolo. A
   320px viene 83px, che resta grande abbastanza per fare quello che
   deve fare - riempire il fondo senza farsi leggere. */
@media screen and (max-width: 420px) {
  /* Sulla pagina ce ne sono DUE, uno assoluto sullo sfondo e uno nel
     flusso: la prima stesura prendeva solo il primo e la barra restava. */
  .ultra-hero.neutral-01 {
    font-size: 26vw;
  }
}

/* ------------------------------------------------------------
   LE PAGINE LEGALI E LE PAROLE LUNGHISSIME

   Privacy, cookie, condizioni e recesso elencano nomi di cookie
   (_ga_PTGM00HSLY), indirizzi e ragioni sociali per esteso: parole
   senza spazi che su uno schermo stretto non ci stanno e non vanno
   a capo da sole. La cookie policy sforava di 239px a 320.

   anywhere e non break-word: break-word spezza solo se la parola e'
   da sola su una riga, e qui stanno dentro voci di elenco insieme ad
   altro testo. Un nome di cookie spezzato si legge lo stesso; una
   pagina che scorre di lato no.
   ------------------------------------------------------------ */
.pp-text-inner-wrapper {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* «Recedere dal contratto qui» nel pie' di pagina: ben visibile, come
   chiede il legale (T&C Allegato B, punto 7a). 05/10/2026 */
.footer-border-button.r-ft-recesso { border-color: var(--primary-color); }
.footer-border-button.r-ft-recesso p { color: var(--primary-color); }
a.r-ft-recesso { color: var(--primary-color) !important; font-weight: 600; }
/* AI Essentials: il criterio di assegnazione sotto l'ultimo calendario. */
.classi-criterio { width: 100%; margin: 0; }
/* AI Essentials: i requisiti nella box laterale (05/10/2026). */
.box-requisiti { margin-top: 20px; padding-top: 16px; border-top: 1px solid #0c0e171f; display: flex; flex-direction: column; gap: 8px; }
.box-requisiti p { margin: 0; }
.box-requisiti-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

/* ------------------------------------------------------------
   QUANDO I POSTI FINISCONO  —  vedi js/posti.js

   La pagina si mostra con "Iscriviti ora" perche' deve essere giusta
   gia' prima che qualcuno chieda alla dashboard quanti posti
   restano, e restare giusta se nessuno lo chiede mai. Quando la
   risposta arriva e dice che e' pieno, il comando cambia sotto gli
   occhi di chi lo sta guardando.

   Misurato: il comando NON cambia misura - 278px prima e dopo -
   quindi non c'e' nessuno spostamento da compensare. Proprio per
   questo il lampeggio serve: un cambiamento che non sposta niente e'
   un cambiamento che non si nota, e chi aveva gia' deciso di premere
   preme una cosa diversa da quella che aveva letto.

   Un alone che si allarga e svanisce, niente che occupi spazio:
   box-shadow e non border, altrimenti si tornerebbe a spostare.
   ------------------------------------------------------------ */
@keyframes posti-cambiato {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 55%, transparent); }
  55%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary-color) 14%, transparent); }
  100% { box-shadow: 0 0 0 14px #0000; }
}

[data-posti-cambiato] {
  animation: posti-cambiato 1.6s ease-out 2;
  border-radius: inherit;
}

/* Non si fa mai girare a chi ha chiesto meno movimento. Qui, a
   differenza del riepilogo di /iscriviti, togliere l'animazione non
   toglie informazione: la frase resta scritta nel comando, e chi usa
   un lettore di schermo la sente comunque dal messaggio che
   js/posti.js manda una volta sola. */
@media (prefers-reduced-motion: reduce) {
  [data-posti-cambiato] { animation: none; }
}

/* Detto a chi non vede. Non e' display:none: quello lo toglierebbe
   anche ai lettori di schermo, che e' esattamente il contrario. */
.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   L'INGRESSO DEGLI ELEMENTI, PER CHI HA CHIESTO MENO MOVIMENTO

   Sul sito convivono due sistemi d'ingresso. Quello scritto a mano
   (js/rivela.js) la preferenza la rispetta gia': lo snippet in <head>
   non accende nemmeno la classe se qualcuno ha chiesto meno
   movimento. Quello di Webflow no, e il perche' e' una riga dentro
   js/webflow.js:

       reducedMotion: document.body.hasAttribute("data-wf-ix-vacation")
                      && window.matchMedia("(prefers-reduced-motion)").matches

   cioe' la preferenza del sistema conta SOLO se la pagina ha detto di
   volerla ascoltare. Nessuna delle nostre quindici pagine lo diceva,
   quindi 108 elementi scivolavano e si dissolvevano comunque.

   L'interruttore da solo pero' non basta, e sarebbe pericoloso da
   solo: Webflow nasce quegli elementi con opacity:0 scritto
   nell'attributo style, e se l'interazione non parte piu' nessuno
   glielo toglie. Chi ha chiesto meno movimento si ritroverebbe meno
   movimento e anche meno contenuto - cioe' punito per una
   preferenza di accessibilita'.

   Da qui le due mosse insieme: l'interruttore spegne l'animazione, e
   questa regola porta gli elementi allo stato finale. La classe
   .wf-ingresso e' messa in pagina su ognuno di quelli che nascono
   invisibili, perche' a quel punto webflow.js ha gia' riscritto
   l'attributo style e selezionarli da li' non si puo' piu'.

   !important perche' si deve scavalcare uno stile inline, che altro
   non si puo' fare.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* LA RETE DEVE COPRIRE TUTTI, NON SOLO I MARCATI.

     Il 06/10 questa regola nominava solo .wf-ingresso, cioe' gli
     elementi che l'export di Webflow fa nascere con opacity:0 scritto
     nell'attributo style. Sembrava l'elenco completo e non lo era:
     Webflow scrive lo stato iniziale dentro l'HTML solo per ALCUNE
     interazioni, per le altre lo calcola a runtime. Risultato, 147
     elementi su 219 erano fuori dalla rete.

     Si e' visto il 06/10 su /ai-essentials: "Cosa imparerai" e le
     domande frequenti erano due buchi bianchi alti come il contenuto,
     perche' il loro contenitore - .about-content-area, che ha
     data-w-id ma nessun opacity scritto - restava invisibile.

     Adesso si parte da [data-w-id], che e' il marchio che Webflow
     mette su TUTTO quello che anima, e si tolgono le eccezioni. La
     classe .wf-ingresso resta perche' copre i pochi che hanno
     opacity:0 senza essere animati.

     L'eccezione e' il pulsante del menu: li' la trasformazione non e'
     un ingresso, e' l'hamburger che diventa una X. Azzerarla
     lascerebbe tre righe orizzontali su un menu aperto. */
  .wf-ingresso,
  [data-w-id]:not(.w-nav-button):not(.w-nav-button *) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   LO STATO FINALE MESSO DALLA RETE  —  vedi js/rete-ingresso.js

   Lo mette quel file quando webflow.js non ha portato l'elemento allo
   stato finale entro un secondo e mezzo da quando e' entrato nello
   schermo. Non e' lo stesso caso della regola qui sopra: quella vale
   per chi ha chiesto meno movimento, questa per chi non ha chiesto
   niente e si ritroverebbe comunque la pagina vuota.

   !important su tutte e tre perche' si deve scavalcare l'attributo
   style, che altro non si puo' fare. La transizione c'e' perche'
   l'elemento si trova gia' in pagina sotto gli occhi di chi legge: un
   contenuto che compare di colpo si nota piu' di uno che si dissolve
   in mezzo secondo.
   ------------------------------------------------------------ */
.wf-ingresso-recuperato {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .5s ease, transform .5s ease !important;
}

/* ------------------------------------------------------------
   LO SPAZIO RISERVATO ALLE IMMAGINI

   259 immagini su 263 non dichiaravano la propria misura, e 248 di
   loro hanno loading="lazy". Un'immagine pigra senza misura e' alta
   ZERO finche' non arriva: misurato in fondo a /pro-hospitality, i
   loghi dei partner stavano a 150x0, 148x0, 200x0, 80x0. Quando
   arrivano, tutto quello che sta sotto scende di colpo.

   Adesso ogni <img> porta width e height veri, letti dal file. Il
   browser non li usa per dimensionare - ci pensa il CSS - ma per
   calcolare la proporzione e tenere il posto prima che il file
   arrivi.

   Questa riga e' la meta' obbligatoria dell'operazione. La base di
   Webflow dice img { max-width: 100% } e NON dice height: auto: con
   l'attributo height addosso, un'immagine ristretta dal max-width
   resterebbe alta quanto dice l'attributo, cioe' schiacciata. Con
   height: auto l'attributo torna a essere solo una proporzione.

   Controllato prima di scriverla: in tutto il sito nessuna regola
   impone un'altezza a un'immagine. Le uniche due che le toccano -
   .courses-videos e .h-image-text-img - impongono aspect-ratio 1/1,
   che vince sulla proporzione degli attributi e resta quadrata.
   ------------------------------------------------------------ */
/* :where() AZZERA LA SPECIFICITA', e non e' un vezzo: senza, questa
   regola vinceva su mezzo sito.

   img[width][height] pesa 0,2,1 - due attributi contano quanto due
   classi - mentre una regola normale come .r-ft-partner img pesa
   0,1,1. Risultato: il 06/10 i loghi dei partner nel pie' di pagina
   hanno perso il loro height: 40px e sono tornati alla misura del
   file, cioe' enormi. Si vedeva in locale e non su staging perche'
   staging non aveva ancora questa riga.

   Dentro :where() la regola pesa ZERO: fa il suo lavoro dove nessuno
   dice niente, e si fa da parte appena qualcuno dice qualcosa. E'
   esattamente quello che deve fare una rete di sicurezza. */
:where(img[width][height]) {
  height: auto;
}

/* ------------------------------------------------------------
   IL PASSAGGIO DA UNA PAGINA ALL'ALTRA

   Il sito e' statico e multipagina: ogni collegamento scarica un
   documento nuovo, e fra l'uno e l'altro il browser mostra il bianco.
   Non e' un difetto di nessuno, e' come funziona la navigazione - ma
   su un sito dove si passa continuamente fra corso, calendario e
   modulo sono decine di lampi.

   Due righe di CSS, nessun JavaScript. Il browser fotografa la pagina
   che si lascia, carica quella nuova e dissolve dall'una all'altra.
   Il navigatore resta quello del browser: il tasto indietro, il
   caricamento, gli indirizzi non cambiano di una virgola. Chi ha un
   motore che non la conosce vede quello che vedeva prima.

   LA TESTATA NON PARTECIPA alla dissolvenza. Ha un nome suo, quindi
   il browser la riconosce come la stessa cosa nelle due pagine e la
   lascia ferma mentre il resto cambia. Senza il nome svanirebbe e
   ricomparirebbe a ogni salto, che e' il modo piu' veloce per far
   sembrare lento un sito veloce.

   Il nome sta solo su section.header, la barra di navigazione comune.
   /iscriviti ha un'altra testata (.r-testata-modulo, col ritorno al
   corso): dandole lo stesso nome il browser proverebbe a trasformare
   l'una nell'altra, e due cose diverse che si deformano l'una
   nell'altra si notano piu' del lampo che volevamo togliere.
   ------------------------------------------------------------ */
@view-transition {
  navigation: auto;
}

/* 0,22s: sotto la soglia in cui una dissolvenza smette di essere un
   addolcimento e diventa un'attesa. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .22s;
}

section.header {
  view-transition-name: testata;
}

/* Chi ha chiesto meno movimento torna al lampo, che e' il
   comportamento di sempre e non toglie niente. */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* ------------------------------------------------------------
   IL CURSORE CON LA SCIA  —  vedi js/cursore.js

   Un anello che insegue il puntatore. Il cursore del sistema resta
   dov'e': questo si aggiunge, non sostituisce.

   Il centro e' spostato di meta' misura con un translate dentro al
   transform di base, cosi' il JavaScript puo' scrivere solo la
   posizione senza doversi ricordare il raggio.

   pointer-events: none non e' un dettaglio: l'anello sta sopra tutto
   con uno z-index altissimo, e senza questa riga si mangerebbe ogni
   click della pagina.
   ------------------------------------------------------------ */
.r-cursore {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--primary-color) 45%, transparent);
  background-color: color-mix(in srgb, var(--primary-color) 5%, transparent);
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transition: opacity .2s ease, width .2s ease, height .2s ease, margin .2s ease;
  will-change: transform;
}

.r-cursore--visibile { opacity: 1; }

/* Sopra un modulo svanisce del tutto. Non si rimpicciolisce e non si
   smorza: sparisce, perche' mezzo ornamento sopra un campo di
   pagamento e' comunque un ornamento sopra un campo di pagamento. */
.r-cursore--via { opacity: 0; }

/* Un cursore che segue il mouse E' movimento: chi ha chiesto di non
   averne non lo vede. js/cursore.js non lo crea nemmeno, questa e' la
   seconda rete per sicurezza. */
@media (prefers-reduced-motion: reduce) {
  .r-cursore { display: none; }
}

/* Sotto i 992px non esiste: niente puntatore da inseguire. */
@media screen and (max-width: 991px) {
  .r-cursore { display: none; }
}

/* /candidati: il campo che manca, segnato dal controllo di js/candidatura.js. */
.campo-da-sistemare { border-color: #d93025 !important; box-shadow: 0 0 0 1px #d93025 !important; }
/* Moduli (/candidati, lista d'attesa, brochure) da telefono: la barra del
   menu e' fissa e copriva il logo e la prima riga. Spazio sotto la barra. */
@media screen and (max-width: 767px) {
  .contact-section.section-padding.p0 { padding-top: 96px; }
}

/* Pro Hospitality: la nota early bird compare sotto il prezzo solo mentre
   lo sconto è attivo (js/prezzo.js toglie hidden). */
.nota-early-bird {
  margin-top: 4px;
  color: #3c28f9;
}
.nota-early-bird[hidden] {
  display: none !important;
}


/* Riepilogo del checkout Pro Hospitality (07/10/2026): posti, imponibile
   con il prezzo pieno barrato, nome della riduzione, IVA. */
.r-riepilogo-righe {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.r-riepilogo-righe .r-riduzione {
  color: var(--primary-color);
  margin-top: 2px;
}
.r-riepilogo-righe .r-riduzione[hidden] {
  display: none !important;
}

/* Pro Hospitality: i loghi dei partner su quattro file (07/10/2026), una
   per ruolo: Un progetto di (Nana Bianca), Con il patrocinio di (FCRF), Main Partner, Partner Tecnici (i tre
   loghi tecnici sulla stessa fila). */
.partner-grid-wrapper.partner-4-file {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-row-gap: 32px;
}
.partner-4-file > .partner-logo-wrapper,
.partner-4-file > .partner-logo-wrapper-alt {
  height: auto;
  min-height: 0;
  justify-content: flex-start;
  align-items: flex-start;
}
.partner-tecnici-loghi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
}
.partner-tecnici-loghi .logo-42 {
  width: 96px;
}

/* ------------------------------------------------------------
   L'AVVISO SUI POSTI  —  vedi js/avviso-posti.js

   Nasce con hidden nell'HTML e lo toglie lo script solo quando c'e'
   qualcosa da dire. Scritto cosi' e non con display:none in CSS:
   hidden lo capiscono anche i lettori di schermo, e se lo script non
   parte la riga resta chiusa invece di comparire vuota.

   Il colore e' quello d'accento del sito, non un rosso d'allarme:
   dice "affrettati", non "e' successo qualcosa". Niente icona e
   niente grassetto in piu' del necessario - e' un'informazione, non
   un conto alla rovescia.
   ------------------------------------------------------------ */
.r-avviso-posti {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: var(--_project-font---border-radius--12, 12px);
  border: 1px solid color-mix(in srgb, var(--secondary-color) 35%, transparent);
  background-color: color-mix(in srgb, var(--secondary-color) 8%, var(--neutral-01));
  color: var(--neutral-04);
}

/* hidden da solo perde contro il display dei contenitori flex. */
.r-avviso-posti[hidden] { display: none; }

/* ------------------------------------------------------------
   LA SCHEDA DEL PREZZO DI PRO HOSPITALITY: ALTEZZA

   La scheda e' sticky (top: 140px) e deve stare tutta nello schermo
   mentre si scorre. Misurata l'08/10/2026: 723px di altezza. Su uno
   schermo da 900px ci stava con 37px d'avanzo, ma a 800 sforava di 63
   e a 720 - un portatile da 13" con le barre del browser - di 143.
   Cioe' su mezzo parco macchine il comando "Iscriviti ora" restava
   sotto il bordo.

   Due testi lunghi pesavano 180px dei 368 della parte alta:

   - la nota dello sconto (71px) diceva per esteso la scadenza, il
     prezzo pieno e l'IVA. Adesso in scheda c'e' una targa e una
     scadenza breve, e il resto sta nella nota sotto, FUORI dal
     riquadro bianco: la scheda e' sticky, quella no, quindi quelle
     righe non pesano piu' sull'altezza che deve entrare nello
     schermo. Restano comunque in vista quando si arriva al prezzo,
     che per una condizione economica e' il punto che conta.

   - la descrizione (109px) cominciava con "Diciotto ore di lezione in
     presenza", che e' ANCHE la prima voce dell'elenco trenta pixel
     piu' sotto. Tolto il doppione, resta quello che l'elenco non
     dice: di cosa parla il corso.
   ------------------------------------------------------------ */

/* 40px fra il prezzo e l'elenco erano un respiro che qui non ci si
   puo' permettere: il distacco si legge lo stesso a 24. */
.courses-details-price.desktop {
  grid-row-gap: 24px;
  row-gap: 24px;

  /* Lo sticky e' passato alla colonna qui sotto (.r-colonna-prezzo):
     scheda e nota devono muoversi INSIEME. Qui si annulla quello che
     l'export di Webflow mette sulla scheda, altrimenti resterebbero
     due elementi appiccicati a due altezze diverse. */
  position: static;
  top: auto;
}

.prezzo-sconto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 4px 0 0;
}
.prezzo-sconto[hidden] { display: none !important; }

/* La targa non e' un bottone e non deve sembrarlo: fondo appena
   tinto del viola del marchio, nessun bordo, nessuna ombra. */
.prezzo-sconto-targa {
  padding: 3px 10px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.prezzo-sconto-scadenza { color: var(--primary-color); }

/* La nota per esteso, fuori dalla scheda. Piu' piccola e piu' quieta
   del resto: e' una precisazione, non un argomento di vendita. */
.prezzo-nota {
  margin: 10px 4px 0;
  color: var(--neutral-03);
  font-size: 12px;
  line-height: 1.5;
}
.prezzo-nota[hidden] { display: none !important; }

/* ------------------------------------------------------------
   LA COLONNA DEL PREZZO  (08/10/2026)

   .courses-details-bottom e' una riga flex con due elementi: il
   contenuto a sinistra e la scheda del prezzo a destra. La nota
   dello sconto, messa come sorella della scheda, era diventata un
   TERZO elemento della riga: si piazzava a fianco della scheda e si
   prendeva mezza pagina. Adesso scheda e nota stanno dentro una
   colonna sola, quindi la nota sta SOTTO la scheda e la riga torna a
   due.

   La colonna prende la misura che aveva la scheda (312px, che si
   stringono quando serve) e la scheda dentro la riempie: senza il
   flex-basis, la larghezza naturale della nota - una riga sola lunga
   mezzo migliaio di pixel - tornerebbe a dettare la larghezza della
   colonna, cioe' lo stesso difetto sotto un altro nome.

   La nota NON e' sticky: scorre via mentre la scheda resta. E' voluto
   - sta sotto il riepilogo d'acquisto, si legge quando ci si arriva.
   ------------------------------------------------------------ */
.r-colonna-prezzo {
  display: flex;
  flex-direction: column;
  flex: 0 1 312px;
  min-width: 0;

  /* E' QUESTA a restare ferma mentre si scorre, non la scheda da
     sola: la nota dello sconto e' una condizione del prezzo e deve
     stare sotto il riepilogo d'acquisto sempre, non solo finche' non
     si scorre. Se insieme sforano lo schermo pazienza - si scorre e
     si legge - ma non si separano mai.

     116px e non 100: il menu e' fisso e arriva a 104 dalla cima.
     Misurato. */
  position: sticky;
  top: 116px;
  align-self: flex-start;
}

.r-colonna-prezzo > .courses-details-price.desktop {
  width: 100%;
}

/* Nota del bonifico nel checkout (T&C 1.0): la accende js/condizioni.js. */
.r-nota-bonifico[hidden] { display: none !important; }

/* Pro Hospitality: orario e durata dentro la scheda di ogni lezione (09/10/2026). */
.lezione-orario { margin-top: 8px; }

.r-scheda-dati dd[hidden] { display: none !important; }

/* ------------------------------------------------------------
   /iscriviti — IL RIEPILOGO A DESTRA  (09/10/2026)

   Tre ritocchi chiesti da Isacco, tutti nella scheda del riepilogo.
   ------------------------------------------------------------ */

/* 1. L'indirizzo sotto il nome della sede. Il nome resta leggibile,
      la via scende a caption e al grigio: serve a chi deve arrivarci,
      non a chi sta decidendo se comprare. Tre righe diventano due. */
.r-scheda-dati .r-scheda-sotto {
  margin-top: 2px;
  /* Il colore va ridichiarato: .r-scheda-dati dd lo impone a tutte le
     definizioni della scheda e batte la classe .neutral-03 scritta in
     pagina. Senza questa riga l'indirizzo resta nero come il nome
     della sede, cioe' la gerarchia che si voleva non si vede. */
  color: var(--neutral-03);
}

/* 2. I metodi di pagamento: un'icona per tipo invece di una frase che
      comincia con "Carta:" e "Bonifico istantaneo:". L'icona dice il
      metodo a colpo d'occhio, il nome lo conferma, e la condizione -
      quando il posto e' confermato - sta sotto in caption, che e' il
      corpo piu' piccolo della scala tipografica del sito.

      Le due icone sono disegnate, non prese da un font: stesso
      viewBox, stesso tratto e stessi terminali degli altri SVG della
      pagina, cosi' stanno insieme invece di sembrare incollate. */
.r-scheda-dati .r-pagamento {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}

.r-scheda-dati .r-pagamento + .r-pagamento {
  margin-top: 12px;
}

.r-pagamento-icona {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--neutral-04);
}

.r-pagamento-testo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* 3. La nota sul pagamento non riuscito diventa un riquadro: cosi' si
      legge come un'informazione a parte e non come la coda del
      riepilogo. Fondo appena tinto e bordo da un pixel su tutti e
      quattro i lati - non una barra colorata a sinistra, che e' il
      modo in cui un avviso finge di essere un avviso. */
.r-nota-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--neutral-02);
  border-radius: var(--_project-font---border-radius--12, 12px);
  background-color: color-mix(in srgb, var(--neutral-02) 45%, var(--neutral-01));
  color: var(--neutral-03);
}

.r-nota-info-icona {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

/* Pro Hospitality (14/10/2026): il video della testata piu' grande.
   Nelle altre pagine resta la cornice 380x300 del mockup. */
@media screen and (min-width: 992px) {
  .r-hero-video-grande .r-hero-media {
    width: min(54%, 680px);
    height: 460px;
  }
}

@media screen and (max-width: 991px) {
  .r-hero-video-grande .r-hero-media {
    height: 360px;
  }
}

@media screen and (max-width: 767px) {
  .r-hero-video-grande .r-hero-media {
    height: 260px;
  }
}

/* Pro Hospitality (14/10/2026): i moduli hanno le foto delle ADV di
   Grace al posto delle figure 3D su fondo bianco. Verticali 4:5 come
   le ADV, a tutto riquadro: prima la cornice era quadrata e vuota
   per meta'. */
.courses-videos.r-modulo-foto {
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
}

/* La testata di Pro Hospitality non e' grigia come le altre: un fondo
   sfumato nei colori del marchio, molto chiaro, che la rende piu'
   "preziosa" senza uscire dalla palette del sito (14/10/2026). */
.r-hero-corso.r-hero-video-grande {
  background-color: #f1eefe;
  background-image: linear-gradient(115deg, #efe9ff 0%, #e8ecff 45%, #e2f8ee 100%);
}

/* Pro Hospitality: il pulsante di iscrizione sotto il calendario
   (14/10/2026). */
.r-calendario-cta {
  display: flex;
  margin-top: var(--_project-font---spacing--32, 32px);
}
@media screen and (max-width: 767px) {
  .r-calendario-cta .cta { width: 100%; }
}