/* ============================================================
   Allineamento al design system AIMax Academy
   Fonte: website/design-system/AIMAX-ACADEMY-BRUTALIST-DESIGN-SYSTEM.md
   Revisione mt1 (Max), 12/09/2026.

   Si carica per ultimo in tutte e cinque le pagine della cartella e vince
   sulle regole accumulate nei blocchi <style>, che restano come sono.
   Ogni blocco cita il paragrafo del design system che applica.

   Le superfici delle sezioni (bianco, grigio, una sola fascia gialla) non
   stanno qui: dipendono dall'ordine delle sezioni di ogni pagina, quindi
   sono nell'HTML (classi az-giallo / az-grigio e style="background").

   Perche' ci sono dei !important: bordi, ombre, raggio, interlinea e focus
   sono invarianti del sistema, e i blocchi <style> delle pagine hanno decine
   di regole piu' specifiche che li cambiano caso per caso. Qui non si tratta.

   Fuori perimetro, di proposito: la barra "Copia per la revisione" e i
   segnaposto (fac-simile, [Nome Cognome], PLACEHOLDER), che spariranno.
   ============================================================ */


/* ---------- §4 Token: i token del sito puntano a quelli del sistema ---------- */
:root {
  --aa-yellow: 45 95% 56%;
  --aa-dodger-blue: 223 100% 50%;
  --aa-spring-green: 148 100% 41%;
  --aa-orange: 24 100% 56%;
  --aa-red: 357 100% 65%;
  --aa-sky-blue: 195 100% 60%;
  --aa-light-grey: 0 0% 95%;
  --aa-dim-gray: 0 0% 40%;
  --aa-shadow-sm: 2px 2px 0 #000;
  --aa-shadow-md: 4px 4px 0 #000;
  --aa-shadow-lg: 6px 6px 0 #000;
  --aa-shadow-xl: 8px 8px 0 #000;
  --aa-speed: 100ms;

  /* palette: tre blu diversi (#0047FF, #0048FF, #004BFF) e cinque grigi chiari diventano uno */
  --aimax-yellow: hsl(var(--aa-yellow));
  --aimax-blue: hsl(var(--aa-dodger-blue));
  --aimax-orange: hsl(var(--aa-orange));
  --aimax-green: hsl(var(--aa-spring-green));
  --ux-giallo: hsl(var(--aa-yellow));
  --ux-blu: hsl(var(--aa-dodger-blue));
  --az-blu: hsl(var(--aa-dodger-blue));
  --ux-nero: #000;
  --foreground: #000;
  --background: #fff;
  --text-primary: #000;
  --text-secondary: hsl(var(--aa-dim-gray));
  --border-color: #000;
  --bg-secondary: hsl(var(--aa-light-grey));
  --bg-card-header: hsl(var(--aa-light-grey));
  --az-grigio: hsl(var(--aa-light-grey));

  /* §3.1 bordi: 4px su card, bottoni e contenitori; 2px su badge, input e divisioni interne */
  --border-width: 4px;
  --bordo: 4px;
  /* §3.2 ombre nere, senza sfocatura, a 2/4/6/8px */
  --shadow-sm: var(--aa-shadow-sm);
  --shadow-md: var(--aa-shadow-md);
  --shadow-lg: var(--aa-shadow-lg);
  --ombra-card: var(--aa-shadow-lg);
  --ombra-btn: var(--aa-shadow-md);
  --ombra-btn-hover: var(--aa-shadow-sm);
  --ombra-inv: var(--aa-shadow-lg);
  --ombra-persone: var(--aa-shadow-xl);
  /* §3.5 un solo raggio */
  --radius: 14px;
  --radius-sm: 14px;
  --r: 14px;
}


/* ---------- §3.4 Due voci tipografiche ---------- */
/* titoli: Space Mono 700, interlinea 1.15 (la prima riga della hero era a peso 400) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700 !important;
  line-height: 1.15 !important;
}
:is(h1, h2, h3, h4, h5, h6) :is(strong, b, span, mark, a) { line-height: inherit !important; }

/* corpo: Inter, interlinea 1.6 (c'erano 1.4, 1.45, 1.5, 1.55, 1.7) */
p:not(.p-claim), li { line-height: 1.6 !important; }
/* la frase di "Perche' adesso" e' in Space Mono 700 a misura di titolo: interlinea da titolo */
.p-claim, .p-claim--hl { line-height: 1.15 !important; }

/* §7 niente blocchi tutti maiuscoli: il maiuscolo resta ad azioni e micro-etichette */
.hero-badge { text-transform: none; letter-spacing: .02em; }
.footer-links a { font: 500 .9rem/1.6 var(--font-body) !important; text-transform: none !important; letter-spacing: 0 !important; }


/* ---------- §3.3 Colore del testo: nero, e #666 per il secondario ---------- */
/* il CSS del sito dava a ogni <p> il grigio #666: il testo da comunicare e' nero */
p { color: inherit; }

/* sette grigi del testo (#1a1a1a, #222, #333, #3a3a3a, #444, #4a4a4a, #555) diventano due */
.hero-subtitle, .section-subtitle, .p-riga-io, .p-catalogo-riga, .p-porta2 p, .p-motivo p, .p-ruolo p,
.p-voce-chi, .p-voce-nota, .az-giallo .section-subtitle, #tutor .section-subtitle,
.az-persona p.az-persona-quote, .c-lezione p, .c-torna, .c-fascia-torna, .c-finestra-piede,
.c-prova-schermo figcaption, .c-resta-voce, .c-colonna, .c-lezioni, .c-metodo-voce, .c-dopo a,
.c-prezzo-card, .c-fascia-prezzo, .c-finestra-tag, .az-cit {
  color: #000;
}
.p-nota, .az-nota, .az-grigio .az-nota, .c-prezzo-nota, .az-scheda-riga span:first-child, .az-livello-dati span,
.az-ruolo > p, .az-corso span, .az-persona .az-persona-ruolo, .p-ruolo-eti, .c-fascia-corso span, .c-dopo span {
  color: hsl(var(--aa-dim-gray));
}
/* le etichette di sezione a pillola delle pagine corso usavano #1a1a1a come nero */
.section-label, .section-label--pill { color: #000; border-color: #000; }
/* §3.3 su giallo il testo e' solo nero, anche quello secondario */
:is(.az-giallo, .c-dati-sezione) :is(p, span, small, li, .p-nota, .az-nota, .section-subtitle) { color: #000; }


/* ---------- §6 Header e hero ---------- */
/* header giallo con bordo da 4px; la barra che compare scorrendo resta bianca, stessi bordi */
.header { border-bottom: 4px solid #000 !important; }
.ux-navbar { border-bottom: 4px solid #000; }
.ux-navbar-voci a { border-bottom-width: 4px; }

/* hero didattica: fondo grigio chiaro, il giallo sta nell'header sopra; bordo inferiore da 4px */
.hero { background: hsl(var(--aa-light-grey)) !important; color: #000; border-top: 0 !important; border-bottom: 4px solid #000 !important; }


/* ---------- §6 Sezioni: bordi da 4px, nessuna linea doppia ---------- */
section, section.about-section, section.how-section, .logo-bar, .c-dati-sezione {
  border-top: 4px solid #000 !important;
  border-bottom: 0 !important;
}
/* sotto la hero la linea c'e' gia': la sezione dopo non ne aggiunge una seconda */
.hero + section, .hero + section.about-section { border-top: 0 !important; }
/* la fascia loghi segue l'alternanza: bianca, dopo la hero grigia */
.logo-bar { background: #fff !important; }
.c-fascia { border-bottom: 4px solid #000; }

/* §3.3 una sola sezione gialla, con un solo messaggio breve (.aa-section--primary) */
.az-giallo { background: var(--aimax-yellow); color: #000; }
/* nella fascia gialla l'evidenziatore giallo sparirebbe, e il gradiente e' vietato: diventa una sottolineatura nera */
.az-giallo .p-claim--hl b {
  background: none; text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: .14em;
}

/* la striscia dei numeri dei corsi era nera con testo bianco (§3.3: niente pannelli neri col testo):
   diventa la fascia gialla della pagina */
.c-dati-sezione { background: var(--aimax-yellow) !important; color: #000; }
.c-dati strong, .c-dati span { color: #000 !important; }
.c-dati > div { border-color: #000 !important; }

/* §3.3 niente pannelli neri col testo bianco: il riquadro "Oggi" torna chiaro */
.p-box--prima, .p-box--prima .p-kicker, .p-box--prima .p-lista li { color: #000 !important; }


/* ---------- §5 Bottone ---------- */
/* Space Mono 700 maiuscolo, bordo 4px, raggio 14px, ombra 4px, almeno 44px di altezza.
   Hover: si sposta di 2px e l'ombra si accorcia. Active: 4px, l'ombra sparisce.
   Anche dentro le card: prima li' erano piatti e con il bordo da 2px. */
.btn, .nav-cta, .ux-navbar-cta, .ux-su, .ux-skip, .az-ruoli-tab, .c-fascia-prezzo {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  border: 4px solid #000 !important;
  border-radius: 14px !important;
  box-shadow: var(--aa-shadow-md) !important;
  min-height: 44px;
  transition: transform var(--aa-speed), box-shadow var(--aa-speed) !important;
}
:is(.btn, .nav-cta, .ux-navbar-cta, .ux-su, .az-ruoli-tab, .c-fascia-prezzo):hover {
  transform: translate(2px, 2px) !important;
  box-shadow: var(--aa-shadow-sm) !important;
}
:is(.btn, .nav-cta, .ux-navbar-cta, .ux-su, .az-ruoli-tab, .c-fascia-prezzo):active {
  transform: translate(4px, 4px) !important;
  box-shadow: none !important;
}
/* primary = giallo con testo nero, ovunque. Prima nella hero e nelle sezioni gialle era nero */
.btn-primary, .ux-navbar-cta, .ux-skip { background: var(--aimax-yellow) !important; color: #000 !important; }
.btn-secondary, .az-ruoli-tab, .c-fascia-prezzo { background: #fff !important; color: #000 !important; }
/* §7 lo stato non e' solo colore: la scheda scelta e' premuta e in negativo.
   Prima era gialla, identica a un pulsante d'azione (il giallo e' l'azione, non la selezione) */
.az-ruoli-tab.is-active,
.az-ruoli-tab.is-active:hover { background: #000 !important; color: #fff !important; transform: translate(4px, 4px) !important; box-shadow: none !important; }


/* ---------- §5 Card ---------- */
/* fondo bianco, bordo 4px, raggio 14px, ombra nera 6px. Una sola profondita' per griglia:
   niente piu' ombre gialle, blu o bianche, e niente 3, 5, 10 o 14px */
.p-porta2, .p-ruolo, .p-striscia, .p-striscia-act, .p-box, .p-motivo, .p-tutor-card, .p-caso, .p-servizio,
.p-guida-voce, .az-ruoli-box, .az-scheda, .az-livello, .az-cit, .az-form, .az-ruolo, .az-passo,
.az-formula-item, .faq-slot, .d-chiusura, .c-resta-voce, .c-colonna, .c-lezioni, .c-metodo-voce,
.c-competenza, .c-dopo a, .c-prezzo-card {
  background: #fff !important;
  border: 4px solid #000 !important;
  border-radius: 14px !important;
  box-shadow: var(--aa-shadow-lg) !important;
}
/* card piatte: il "prima" dei confronti e le competenze, che sono un elenco */
.p-box--prima, .c-colonna:not(.c-colonna--dopo), .c-competenza { box-shadow: none !important; }
/* le immagini-cornice e le foto: ombra xl, nera */
.c-finestra, .c-prova-schermo { border: 4px solid #000 !important; border-radius: 14px !important; box-shadow: var(--aa-shadow-xl) !important; overflow: hidden; }
.p-max-foto, .az-max img { border: 4px solid #000 !important; box-shadow: var(--aa-shadow-xl) !important; }
.az-persona-avatar { border: 4px solid #000 !important; box-shadow: var(--aa-shadow-lg) !important; background: hsl(var(--aa-light-grey)) !important; }
.c-finestra-barra { background: #000; }
/* hover delle card che contengono un'azione: 2px e ombra a 4px (§5 Card) */
:is(.p-porta2, .p-ruolo, .p-striscia, .p-striscia-act, .az-scheda, .az-livello, .d-chiusura, .c-prezzo-card, .c-dopo a):is(:hover, :focus-within) {
  transform: translate(2px, 2px);
  box-shadow: var(--aa-shadow-md) !important;
}
:is(.p-porta2, .p-ruolo, .p-striscia, .p-striscia-act, .az-scheda, .az-livello, .d-chiusura, .c-prezzo-card, .c-dopo a) {
  transition: transform var(--aa-speed), box-shadow var(--aa-speed);
}
/* la card gialla fra le quattro dei corsi non diceva perche' era gialla: torna bianca */
.p-ruolo--base .p-ruolo-ico { background: #000; color: #fff; }

/* §3.3 il testo da comunicare va su pannelli grigio chiaro: i riquadri gialli con il testo dentro.
   Bordo 2px dentro una card (divisione interna), 4px quando il pannello sta da solo nella sezione */
.az-consiglio, .az-digcomp, .az-livello-chi {
  background: hsl(var(--aa-light-grey)) !important;
  border: 2px solid #000 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: #000 !important;
}
.az-digcomp { border-width: 4px !important; }

/* §5 Callout: bordo solo a sinistra, 4px, colore semantico e fondo al 10%.
   I "fatti" avevano un filo giallo da 6px: sono contesto, quindi info (sky blue) */
.az-fatto {
  border: 0 !important;
  border-left: 4px solid hsl(var(--aa-sky-blue)) !important;
  border-radius: 14px;
  background: hsl(var(--aa-sky-blue) / .1);
  padding: 1rem 1.25rem !important;
  color: #000;
}
.az-fatto :is(h3, p, li) { color: #000 !important; }

/* §5 FAQ: bordo forte, ombra piccola, titolo mono, + e − in arancione. L'aperta non diventa gialla */
.d-voce { border: 4px solid #000 !important; border-radius: 14px; box-shadow: var(--aa-shadow-sm) !important; overflow: hidden; }
.d-voce > summary { font-family: var(--font-heading); }
.d-voce[open] > summary { background: #fff !important; border-bottom: 2px solid #000 !important; }
.d-voce > summary::after { color: var(--aimax-orange); }


/* ---------- §5 Badge ---------- */
/* compatti, mono, bold, maiuscoli, bordo 2px, a pillola (999px e' riservato a loro) */
.beta-badge, .p-ruolo-come, .az-scheda-testa, .az-livello-n, .az-tessera-n, .p-tag, .c-lezione-tag,
.c-competenza span, .c-meta span, .c-finestra-tag {
  border: 2px solid #000 !important;
  border-radius: 999px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}
/* BETA: il badge accent del sistema (blu, testo bianco). Era nero in due pagine e blu nelle altre tre */
.beta-badge { background: var(--aimax-blue) !important; color: #fff !important; }
/* i numeri tondi, come nella home: bordo 2px */
.c-resta-voce span, .c-lezione-n { border: 2px solid #000 !important; border-radius: 999px !important; }
.virgola-badge-overlay { border-width: 2px !important; border-radius: 14px !important; box-shadow: var(--aa-shadow-sm) !important; }


/* ---------- §3.1 Divisioni interne: 2px, nere (niente #eee e niente trasparenze) ---------- */
.az-ruoli-riga, .az-scheda-riga, .az-livello li, .p-domanda { border-bottom: 2px solid #000 !important; }
.az-ruoli-riga:last-child, .az-scheda-riga:last-of-type, .az-livello li:last-child { border-bottom: 0 !important; }
.az-corso, .c-colonna li, .c-prezzo-card li, .p-ruolo-corsi, .p-domande, .az-tessere,
.az-livello-dati, .c-lezione, .p-caso-meta, .p-voce-chi { border-top: 2px solid #000 !important; }
.c-lezione:first-child { border-top: 0 !important; }
.az-tessera { border-right-width: 2px !important; }
.footer-grid { border-bottom: 2px solid #000 !important; }
.c-finestra img, .c-prova-schermo img { border-bottom: 2px solid #000 !important; }
/* i link "torna" sottolineati: 2px, neri (quello delle domande era giallo) */
.c-torna, .c-fascia-torna, .d-torna { border-bottom: 2px solid #000 !important; }
.d-gruppo h2 { border-bottom-color: #000 !important; }


/* ---------- §3.5 Raggi senza una funzione ---------- */
/* l'evidenziatore dei titoli e' un nastro: niente raggio (era 4-5px). In blocco, alto quanto la riga:
   con l'interlinea a 1.15 il fondo nero copriva la riga sopra */
.section-title mark, .hero h1 mark, .az-fatto h3 mark { border-radius: 0 !important; display: inline-block; line-height: 1.15 !important; }
.p-ruolo-corsi a, .p-ruolo-corsi span { border-radius: 0; }
.footer-beta { border: 2px solid #000 !important; border-radius: 14px !important; background: #fff !important; color: #000 !important; }


/* ---------- Footer: bianco, bordo 4px (§3.3 niente pannelli gialli con molto testo) ---------- */
.footer { background: #fff !important; color: #000; border-top: 4px solid #000 !important; }
.footer-brand p { color: hsl(var(--aa-dim-gray)); }


/* ---------- Tutor: la virgola in filigrana ---------- */
/* era di un giallo scuro fuori palette (#e0a70c), e il commento nel CSS della pagina dice gia'
   che doveva sparire quando Virgola e' salito sopra il titolo: la regola non c'era */
#tutor .az-hero > div:first-child::before { content: none !important; }


/* ---------- §7 Focus: 3px giallo, 3px di distanza ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--aimax-yellow) !important;
  outline-offset: 3px !important;
}
/* sulle superfici gialle un anello giallo non si vede: li' e' nero (§10 "focus da tastiera visibile") */
:is(.header, .az-giallo, .c-dati-sezione) :focus-visible { outline-color: #000 !important; }


/* ---------- §3.2 e §7 Motion: 100ms, e chi chiede meno animazioni ne ha meno ---------- */
a, button, summary, .nav-links a, .footer-links a, .footer a { transition-duration: var(--aa-speed) !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ---------- §7 Sotto i 768px: card a 16px di padding, bottoni a tutta larghezza ---------- */
@media (max-width: 48rem) {
  .p-porta2, .p-ruolo, .p-striscia, .p-striscia-act, .p-box, .p-motivo, .p-caso, .az-ruoli-box, .az-scheda,
  .az-livello, .az-cit, .az-form, .faq-slot, .d-chiusura, .c-resta-voce, .c-colonna, .c-metodo-voce,
  .c-prezzo-card { padding: 1rem !important; }
  .btn { width: 100%; justify-content: center; }
}


/* ---------- §5 "Badge": le etichette di sezione delle pagine corso prendono lo
   stile del titolo "Il mio diario" dell'app (src/components/MyDiary.tsx e
   notebooks/NotebookHomeSnippet.tsx): giallo, Space Mono 700 maiuscolo a 1.25rem,
   bordo 4px, raggio 14px, ombra 4px, ruotato di -2 gradi.
   Scelta di Max, 13/09/2026: l'etichetta dice di cosa parla la sezione, e conta
   quanto il titolo.

   Vale SOLO dove il <body> ha class="pagina-corso" (le due pagine corso). Home e
   landing AI Act tengono le etichette con la virgola del redesign di Nicolò.

   display:table invece di inline-block: i .section-header hanno text-align:center
   scritto nell'attributo style, che da CSS non si batte. Un blocco a larghezza
   contenuto si allinea da solo a sinistra con i margini, senza toccare l'HTML.
   ---------- */
body.pagina-corso .section-header :is(.section-label, .section-label--pill) {
  display: table;
  margin: 0 auto .5rem 0;
  padding: .5rem 1rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.15;
  background: var(--aimax-yellow);
  color: #000;
  border: 4px solid #000;
  border-radius: 14px;
  box-shadow: var(--aa-shadow-md);
  transform: rotate(-2deg);
}
/* il titolo resta dov'era: l'etichetta va a sinistra da sola */
body.pagina-corso .section-header { margin-bottom: var(--space-xl); }
/* l'inclinazione manda l'angolo sinistro fuori dal filo del testo: si recupera */
body.pagina-corso .section-header :is(.section-label, .section-label--pill) { margin-left: 3px; }

@media (max-width: 48rem) {
  body.pagina-corso .section-header :is(.section-label, .section-label--pill) {
    font-size: 1rem; padding: .4rem .8rem; border-width: 3px;
  }
}


/* ---------- §4.4 Spazi: aria intorno al titolo della hero ----------
   Chiesto da Max il 13/09/2026: il titolo respirava 1,5rem verso il sottotitolo
   e la hero partiva a 4,5rem dall'header. Con due soli blocchi di testo (via
   l'occhiello) lo spazio bianco e' quello che fa la gerarchia, non il corpo.

   Sta qui e non nel blocco REDESIGN della pagina perche' quelle regole sono di
   Nicolo': si lasciano dove sono e si scavalcano da fuori, come tutto il resto
   di questo foglio. Vale solo sulla home: la landing AI Act ha ancora
   l'occhiello e tre blocchi, quindi altri rapporti.
   ---------- */
.hero { padding-top: clamp(5.5rem, 10vw, 8rem) !important; padding-bottom: clamp(3.5rem, 6vw, 4.5rem) !important; }
.hero h1 { margin-bottom: clamp(1.75rem, 3vw, 2.5rem) !important; }
.hero .hero-subtitle { margin-bottom: 0 !important; }
/* lo stacco verso le due porte lo mette .p-porte, che ha gia' il suo margin-top:
   sommare i due margini faceva un buco doppio */
.hero .p-porte { margin-top: clamp(2.5rem, 4vw, 3.5rem) !important; }

@media (max-width: 48rem) {
  .hero { padding-top: 4rem !important; padding-bottom: 2.5rem !important; }
  .hero h1 { margin-bottom: 1.5rem !important; }
  .hero .hero-subtitle { margin-bottom: 0 !important; }
  .hero .p-porte { margin-top: 2rem !important; }
}

/* la domanda sopra le due porte: e' l'etichetta di una scelta, non un titolo.
   Space Mono come le etichette di sezione, ma piccola e senza pillola: sopra ha
   gia' il titolo grande, e un terzo blocco in evidenza rifarebbe il pasticcio
   dei quattro livelli. Il margine verso le porte lo governa .p-porte. */
.hero .p-porte-domanda {
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0 !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: #000;
}
.hero .p-porte-domanda + .p-porte { margin-top: .9rem !important; }
@media (max-width: 48rem) {
  .hero .p-porte-domanda { margin-top: 2rem !important; font-size: .95rem; }
}

/* ---------- Le due porte della hero: occhiello sopra, la scelta da titolo ----------
   Max, 13/09/2026: "se la domanda sopra e' 'qual e' il vostro obiettivo', la
   risposta non puo' essere la riga piu' piccola del riquadro". Prima l'etichetta
   ("Devo formare il team") stava a .7rem e il titolo era il beneficio. Adesso
   e' l'opposto: la frase che risponde alla domanda e' il titolo, il beneficio
   e' l'occhiello. Nell'HTML i due blocchi erano gia' in quest'ordine: si sono
   scambiati i testi, non le posizioni.
   ---------- */
.p-porta2 .p-porta2-eti { margin: 1.1rem 0 .35rem !important; }
.p-porta2 h3 { font-size: 1.45rem !important; margin-bottom: 1.4rem !important; }
/* "Vogliamo rispettare l'AI Act" a 1,45rem chiede ~420px di riga, e in una
   griglia da 880px ogni card ne aveva 370 al netto del padding: andava a capo
   su "Act". La griglia passa a 1000px e il titolo ci sta.
   Niente white-space:nowrap: su una finestra stretta, o se Space Mono non
   carica, il titolo uscirebbe dal riquadro invece di andare a capo. */
.hero .p-porte { max-width: 1000px !important; }

/* ---------- §4.5 "Come stanno le cose": il box di sinistra su fondo nero ----------
   Max, 13/09/2026: "dobbiamo differenziare i 2 box". Prima erano quasi uguali —
   bianco con bordo grigio a sinistra, giallo a destra — e il contrasto fra
   l'oggi e il dopo non si vedeva a colpo d'occhio.

   Il CSS del redesign (.p-box--prima, riga 1688 della home) era scritto per una
   sezione a fondo scuro: bianco al 72% su nero. Qui la sezione ha
   background:var(--az-grigio), quindi quel bianco sbiadito finiva su grigio
   chiaro e il box risultava spento invece che in secondo piano. Rimettendo il
   nero sotto, quelle regole tornano a funzionare come erano pensate.

   Nero pieno e non grigio scuro: e' lo stesso nero dei bordi e delle ombre di
   tutta la pagina, e l'ombra piena nera del box giallo qui non si vedrebbe.
   ---------- */
#punto-di-partenza .p-box--prima {
  background: #000 !important;
  border-color: #000 !important;
  color: rgba(255, 255, 255, .82) !important;
}
#punto-di-partenza .p-box--prima .p-kicker { color: rgba(255, 255, 255, .82) !important; }
/* la virgola del marchio davanti all'etichetta: gialla, come sulle sezioni scure */
#punto-di-partenza .p-box--prima .p-kicker::before { color: var(--aimax-yellow) !important; }
#punto-di-partenza .p-box--prima .p-lista li { color: rgba(255, 255, 255, .82) !important; }
/* i quadratini della lista erano background:var(--background), cioe' il bianco
   della pagina: su nero sparivano. */
#punto-di-partenza .p-box--prima .p-lista li::before {
  border-color: rgba(255, 255, 255, .82) !important;
  background: transparent !important;
}


/* ---------- §6 La barra che compare scorrendo e' l'header: gialla ----------
   Max, 13/09/2026: il giallo pieno sta nell'header, quindi deve restare anche
   quando l'header esce di vista scorrendo.
   Su giallo il testo e' solo nero (§3.3): la voce attiva perde il blu e si
   riconosce dalla sottolineatura nera. Il pulsante passa a bianco, come
   "Inizia" nell'header: giallo su giallo sparirebbe.
   ---------- */
.ux-navbar { background: var(--aimax-yellow) !important; }
.ux-navbar-voci a,
.ux-navbar-voci a[aria-current="true"] { color: #000 !important; }
.ux-navbar-voci a:hover,
.ux-navbar-voci a[aria-current="true"] { border-bottom-color: #000 !important; }
.ux-navbar-cta { background: #fff !important; color: #000 !important; }
.ux-navbar :focus-visible { outline-color: #000 !important; }

/* ---------- §4.6 "Chi volete formare?": i modi e i corsi in pillole ----------
   Max, 13/09/2026: il box dice a ogni destinatario come si lavora (dal vivo,
   sull'Academy, online con tutor o con mentor, e le combinazioni) e con quali
   corsi. In fila come testo la differenza fra una scheda e l'altra non si
   vedeva: le pillole la fanno vedere a colpo d'occhio.

   I modi hanno un colore fisso ciascuno, cosi' "Dal vivo" e' giallo in tutte e
   quattro le schede. I corsi invece sono bianchi con il bordo nero: sono esempi,
   non devono competere con i modi.

   Le pillole sono <span> dentro .az-ruoli-riga, e la pagina da' a quegli span
   lo stile dell'etichetta di riga (maiuscolo, .72rem, grigio): qui si azzera.
   ---------- */
.az-ruoli-riga .az-pillole { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .35rem; }
.az-ruoli-riga .az-modo,
.az-ruoli-riga .az-corso {
  display: inline-flex; align-items: center; margin: 0;
  text-transform: none; letter-spacing: 0; line-height: 1.2;
  font-weight: 700; font-size: .85rem; color: #000; text-decoration: none;
  padding: .45rem .9rem; border: 2px solid #000; border-radius: 999px;
}
/* 13/09/2026 (Max, dal giro di Nicolo') - l'ombra era invertita. In questo design
   system l'ombra piena e' il segno del pulsante (.btn, .nav-cta, .az-ruoli-tab):
   ce l'avevano i MODI, che non sono cliccabili, e non i CORSI, che lo sono. Da qui
   l'istinto di premere "Dal vivo".
   13/09 sera (Max) - "il come non colorarlo e togliere l'ombra": via anche il
   fondo colorato. Un fondo pieno piu' un bordo pieno restano un pulsante anche
   senza ombra, e i quattro colori facevano da semaforo su un'informazione che non
   e' una scelta. I modi ora sono testo con un bordo leggero: si leggono come
   etichette, e il colore torna a essere il segno dei soli link. */
.az-ruoli-riga .az-modo {
  font-family: var(--font-heading); background: transparent;
  border: 1.5px solid #bbb; color: #333; font-weight: 600; cursor: default;
}
.az-ruoli-riga .az-corso { background: #fff; font-weight: 600; }
.az-ruoli-riga a.az-corso {
  box-shadow: 3px 3px 0 #000; cursor: pointer; transition: all .12s ease;
}
/* la freccia dice "si apre altrove": i corsi vanno in una scheda nuova */
.az-ruoli-riga a.az-corso::after { content: '\2197'; margin-left: .4em; font-size: .9em; }
.az-ruoli-riga a.az-corso:hover {
  background: var(--aimax-yellow); transform: translate(1px, 1px); box-shadow: 2px 2px 0 #000;
}
.az-ruoli-riga a.az-corso:active { transform: translate(3px, 3px); box-shadow: none; }
.az-ruoli-riga .az-corso small { font-weight: 400; font-size: .8em; margin-left: .35em; color: #444; }
.az-ruoli-riga .az-come-nota { margin: .55rem 0 0 !important; font-size: .95rem; color: #333; }
.az-ruoli-casa { margin: 1rem 0 0 !important; font-weight: 700; }
.az-ruoli-box mark { background: var(--aimax-yellow); color: #000; padding: 0 .15em; border-radius: 3px; }

/* 13/09 sera (Max) - "toglierei le linee", e sono TUTTE: prima la croce, poi
   l'orizzontale, poi anche la verticale. Dentro il box non c'e' piu' nessun segno
   grafico: a separare le due colonne e' il solo spazio, e il layout sta tutto in
   home.css. Il §7 qui sopra (riga 194) da' al box fondo bianco, bordo e ombra, che
   e' quello che vogliamo; ma la riga 264 mette un "border-bottom: 2px !important"
   su .az-ruoli-riga - la regola dell'elenco a quattro righe - e con la griglia
   quello e' l'ultimo segno rimasto. Si spegne, e solo dentro la griglia: nel box
   vecchio a quattro righe la linea ci vuole ancora. */
.az-ruoli-box--griglia .az-ruoli-riga { border-bottom: 0 !important; }

/* ---------- §4.7 Evidenziatori dei titoli: giallo con testo nero, solo home ----------
   Max, 13/09/2026: "gli highlight vanno bene gialli sfondo con testo nero". Il
   redesign di Nicolo' li aveva neri con il testo giallo (riga 2008 della home).
   Vale solo sulla home, che e' l'unica pagina con body[data-home="."]: la
   landing AI Act ha lo stesso CSS del redesign e non e' stata guardata.
   Nella fascia gialla ("Perche' formare le persone adesso") restano neri: un
   evidenziatore giallo su fondo giallo sparirebbe.
   ---------- */
body[data-home="."] .section-title mark,
body[data-home="."] .hero h1 mark { background: var(--aimax-yellow); color: #000; }
body[data-home="."] .az-giallo .section-title mark { background: #000; color: var(--aimax-yellow); }

/* ---------- §4.8 "Chi volete formare?": la scheda scelta torna gialla ----------
   Max, 13/09/2026: "il selezionato lo voglio giallo non nero". Scavalca la
   regola del §7 qui sopra (riga 182), che l'aveva fatta nera perche' gialla
   sembrava un pulsante d'azione. Resta premuta e senza ombra: e' quello che la
   distingue da un pulsante giallo, che l'ombra ce l'ha.
   ---------- */
.az-ruoli-tab.is-active,
.az-ruoli-tab.is-active:hover { background: var(--aimax-yellow) !important; color: #000 !important; }

/* ---------- §5 "Percorsi studiati per esigenza": l'illustrazione del corso in testa ----------
   Max, 13/09/2026: "cosi' tutto nero mi fa tristezza". Le quattro card avevano
   un'icona tonda nera. Adesso hanno in testa l'illustrazione del corso, come le
   card del catalogo dell'app (src/components/CourseCard.tsx): banda 16:9 a filo
   del bordo, riga nera da 4px sotto, nessuna icona sopra l'immagine.
   Come nell'app, tutta la card porta al corso: il link col nome si allarga su
   tutta la card con un ::after, e passandoci sopra si accende il suo giallo.
   I margini negativi sono il padding della card (1.5rem 1.4rem, 1rem sotto i
   768px): se cambia quello, cambiano questi.
   Vale solo dove l'immagine c'e', cioe' la home: la landing AI Act usa le
   stesse classi .p-ruolo e non cambia.
   ---------- */
.p-ruolo:has(.p-ruolo-img) { position: relative; }
.p-ruolo-img {
  order: -3;
  display: block;
  width: calc(100% + 2.8rem);
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: -1.5rem -1.4rem .5rem;
  border-bottom: 4px solid #000;
  border-radius: 10px 10px 0 0;   /* il raggio della card (14px) meno il suo bordo (4px) */
  background: hsl(var(--aa-light-grey));
}
.p-ruolo:has(.p-ruolo-img) .p-ruolo-corsi a::after { content: ""; position: absolute; inset: 0; }
@media (max-width: 48rem) {
  .p-ruolo-img { width: calc(100% + 2rem); margin: -1rem -1rem .25rem; }
}


/* ---------- Banda blu: la porta AI Act (solo home) ----------
   Max, 13/09/2026: fondi gialli nell'header e nelle fasce basse, "qualche banda
   blu e basta". Nella home il blu vuol dire gia' AI Act (la seconda porta della
   hero): la striscia bianca sotto i corsi diventa una banda bassa a tutta
   larghezza, un solo messaggio. Blu = accent del sistema (azione secondaria
   forte, promozioni); su blu il testo e' bianco (§7). Il pulsante resta bianco
   con bordo e ombra neri: e' un'azione secondaria, la primaria e' gialla.
   Nel design system una banda blu non c'e': se resta, va aggiunta al §6 come
   variante della fascia.
   ---------- */
.p-banda-act { background: var(--aimax-blue); color: #fff; padding: 1.75rem 0; }
.p-banda-act-inner { display: flex; align-items: center; gap: 1.5rem; }
/* la bandiera e' un cerchio blu: il bordo nero la stacca dal fondo */
.p-banda-act img { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 2px solid #000; object-fit: cover; }
.p-banda-act p { flex: 1; margin: 0; color: #fff; font-size: 1.125rem; }
.p-banda-act strong { font-family: var(--font-heading); }
.p-banda-act .btn { flex: none; }
/* Virgola sporge di ~80px sopra il tutor (top: -186px): con la banda subito
   sopra le finirebbe addosso, blu su blu. Il tutor si prende quello spazio in
   alto e l'omino resta sul bianco. Sotto i 900px l'omino e' gia' nel flusso. */
@media (min-width: 901px) { .p-banda-act ~ #tutor { padding-top: 12.5rem; } }
@media (max-width: 48rem) {
  .p-banda-act-inner { flex-direction: column; text-align: center; gap: 1rem; }
}


/* ---------- Il blu nella landing AI Act ----------
   Max, 13/09/2026: "un po' di blu, che e' la pagina AI Act". Il blu e' gia' il
   colore dell'AI Act nella home (seconda porta, banda sotto i corsi) e qui nei
   badge dei livelli. Due tocchi, non di piu':
   1. "Cosa chiede l'articolo 4", subito sotto la hero, diventa la banda blu della
      pagina: bassa, due fatti, testo bianco (§7). Sta a ~1.500px dalla fascia
      gialla di "Perche' sceglierci", quindi i due colori non si pestano.
   2. Nella scheda della hero le due etichette passano da gialle a blu: il giallo
      resta solo sul pulsante, che e' l'azione (§3.3).
   ---------- */
.az-blu { background: var(--aimax-blue) !important; color: #fff; padding-block: 3rem; }
.az-blu .section-header { margin-bottom: 1.75rem; }
.az-blu :is(.section-label, .section-label--pill),
.az-blu :is(.section-label, .section-label--pill)::before { color: #fff !important; }
/* i fatti: si leggono su card bianche, la banda resta blu attorno.
   Max, 13/09/2026, dubbio di leggibilita' sulla prima versione (testo bianco
   direttamente sul blu). Il contrasto passava (6,2:1), ma il bianco su blu
   saturo "vibra" ai corpi piccoli, e l'evidenziatore nero e giallo sul blu
   faceva tre colori in una parola. Sulle card il testo torna nero su bianco e
   l'evidenziatore sta sul bianco come in tutto il resto del sito */
.az-blu .az-fatto {
  background: #fff !important;
  border: 4px solid #000 !important;
  border-radius: 14px !important;
  box-shadow: var(--aa-shadow-lg);
  padding: 1.25rem 1.5rem !important;
}
.az-blu .az-fatto :is(p, li) { color: #000 !important; }
#ux-contenuto .az-scheda-testa { background: var(--aimax-blue) !important; color: #fff !important; }


/* ---------- La porta AI Act della hero: blu ----------
   Max, 13/09/2026: sfondo blu e testi bianchi, icona invertita (cerchio bianco,
   disegno blu), pulsante bianco. E' lo stesso blu della banda AI Act piu' in
   basso: chi entra da questa porta ritrova il suo colore. Bordo e ombra restano
   neri come tutte le card (§3.2).
   ---------- */
.p-porta2.p-porta2--aiact { background: var(--aimax-blue) !important; }
.p-porta2--aiact :is(h3, p, .p-porta2-eti),
.p-porta2--aiact .p-porta2-eti::before { color: #fff !important; }
.p-porta2--aiact .p-porta2-ico { background: #fff !important; color: var(--aimax-blue) !important; }


/* ---------- Footer nero (tutte e cinque le pagine) ----------
   Max, 13/09/2026: sfondo nero, testi bianchi, un solo pulsante giallo.
   Chiude la pagina (giallo in cima, nero in fondo), e il giallo su nero e' il
   contrasto piu' alto della palette. Il §3.3 vieta i pannelli neri pieni di
   testo: qui ci sono solo link e una riga, e deve restare cosi'. Va aggiunto al
   §6 del design system come eccezione, come l'header giallo.
   A regime diventa includes/footer-it.html.
   ---------- */
.footer.footer--nero { background: #000 !important; color: #fff !important; border-top: 4px solid #000 !important; }
.footer--nero :is(p, h4, li, .footer-links a, .footer-bottom a, .footer-tagline, .footer-azienda) { color: #fff !important; }
.footer--nero .footer-brand p { max-width: 30ch; margin: 1rem 0 1.5rem; }
.footer--nero :is(.footer-links a, .footer-bottom a):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
/* su nero una linea nera non si vede: la divisione interna e' bianca, 2px */
.footer--nero .footer-grid { border-bottom: 2px solid #fff !important; }
.footer--nero .footer-beta { background: transparent !important; color: #fff !important; border: 2px solid #fff !important; }
/* la stessa impaginazione in tutte le pagine: prima la davano i CSS di ogni pagina,
   e fra home e corsi cambiavano logo, colonne e riga beta. Un include ne vuole una sola */
.footer.footer--nero { padding: 3rem 0 2rem !important; }
.footer--nero .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 2rem; margin-bottom: 1.5rem; }
.footer--nero .footer-brand .logo { height: 44px; width: auto; }
.footer--nero .footer-bottom { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; }
.footer--nero .footer-beta { display: table; margin: 1.5rem auto 0; padding: .5rem .9rem; border-radius: 14px !important; font: 700 .78rem/1.4 var(--font-heading); }
@media (max-width: 640px) {
  .footer--nero .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer--nero .footer-brand { grid-column: 1 / -1; }
}

/* P.IVA sul copyright: compare al passaggio del mouse, al tocco o col tab.
   E' nel testo della pagina anche quando non si vede, quindi la leggono
   screen reader e motori */
.footer-azienda { position: relative; cursor: help; text-decoration: underline dotted 2px; text-underline-offset: .22em; }
.footer-piva {
  position: absolute; left: 0; bottom: calc(100% + .6rem); white-space: nowrap;
  padding: .35rem .75rem; background: #fff; color: #000 !important;
  border: 2px solid #000; border-radius: 999px; font: 700 .75rem/1.2 var(--font-heading);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity var(--aa-speed), transform var(--aa-speed);
}
.footer-azienda:is(:hover, :focus) .footer-piva { opacity: 1; transform: none; }


/* ---------- Landing AI Act, "Il percorso": due azioni ----------
   Max, 13/09/2026: "Acquista ora" verso academy.aimax.it/buy/team, subito sotto
   i tre livelli. Una sola primaria per gruppo (§5): qui l'acquisto e' l'azione
   piu' decisa ed e' gialla, "Parliamone" passa a secondaria bianca */
.az-livelli-azioni { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }


/* ---------- Landing AI Act, i tre livelli: il nome e' il titolo della card ----------
   Max, 13/09/2026: niente pillola blu, il nome del livello fa da titolo, piu'
   grande. Resta blu (e' la pagina AI Act) ma come testo: su bianco sta a 6,2:1.
   Nell'HTML il nome e' diventato un <h3>, cosi' e' anche il titolo per chi usa
   uno screen reader. "Consigliato" esce dal nome e diventa l'etichetta
   dell'intermedio: stesso stile delle etichette di sezione delle pagine corso
   ("I risultati", regola body.pagina-corso piu' sopra), appoggiata sul bordo
   della card come un adesivo.
   ---------- */
.az-livello .az-livello-n {
  display: block; margin: 0 0 1rem !important; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  color: var(--aimax-blue) !important; text-align: center; text-transform: none !important;
  font: 700 1.9rem/1.15 var(--font-heading) !important; letter-spacing: 0 !important;
}
.az-livello-tag {
  /* Max, 13/09/2026: sull'angolo in alto a sinistra, piu' inclinata di "I risultati" */
  position: absolute; top: -1.4rem; left: -1.1rem; z-index: 1;
  padding: .5rem 1rem;
  font: 700 1.25rem/1.15 var(--font-heading); text-transform: uppercase;
  background: var(--aimax-yellow); color: #000;
  border: 4px solid #000; border-radius: 14px; box-shadow: var(--aa-shadow-md);
  transform: rotate(-8deg);
}
@media (max-width: 48rem) {
  .az-livello .az-livello-n { font-size: 1.6rem !important; }
  .az-livello-tag { font-size: 1rem; padding: .4rem .8rem; border-width: 3px; }
}
/* card impilate (sotto i 900px): l'etichetta sporge sopra l'intermedio e toccava
   la card del base. Un po' d'aria in piu' solo li' */
@media (max-width: 900px) { .az-livello--2 { margin-top: 1rem; } }


/* ---------- Landing AI Act, i tre livelli: altezze e riquadro "A chi e' rivolto" ----------
   Max, 13/09/2026.
   1. Le card non sono piu' alte uguali: si allineano in alto e finiscono dove
      finisce il contenuto. Le ore stavano in fondo per via di un margine
      automatico che riempiva il vuoto: tolto quello, base e intermedio si
      accorciano da soli e si vede che l'avanzato contiene di piu'.
   2. Il riquadro "A chi e' rivolto" e' giallo (prima grigio, poi bianco, scelta
      di Max del 13/09). Il design system vorrebbe il testo su pannelli grigi e
      il giallo solo sui segnali: qui il riquadro e' corto e il testo e' nero,
      come chiede la regola sul giallo (§3.3).
   ---------- */
.az-livelli { align-items: start; }
.az-livello-dati { margin-top: 1rem !important; }
.az-livello .az-consiglio { background: var(--aimax-yellow) !important; color: #000 !important; }

/* Il nastro delle domande ha overflow:hidden e tagliava l'ombra da 6px delle card.
   Lo spazio lo mette il nastro stesso, cosi' l'ombra ci sta dentro */
.faq-marquee-track { padding-bottom: 8px; }

/* ---------- Banda blu: le due parole chiave sottolineate, non riquadrate ----------
   Max, 13/09/2026: al posto del riquadro nero con la parola gialla, la
   sottolineatura gialla larga che il sito usa gia' sulla frase di "Perche'
   adesso" (.p-claim--hl b, blocco REDESIGN della home). Stessa tecnica:
   una fascia piena alta .58em dietro il testo, non una sfumatura.
   ---------- */
.az-blu .az-fatto h3 mark {
  background: linear-gradient(to top, var(--aimax-yellow) .58em, transparent .58em) !important;
  color: #000 !important;
  padding: 0 .14em !important;
  border-radius: 0 !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}