/* course.css
   Il foglio delle pagine corso generate da academy-marketing-sync.
   Si carica DOPO css/style.css, che resta quello del sito e non si duplica.

   Nato il 13/09/2026 unendo, nello stesso ordine in cui la bozza li caricava, i
   blocchi che le due pagine corso di "bozze definitive nicolo-isabella" avevano
   identici in linea (ux.css, b2b.css, corso.css) e il foglio assets/ds-allineamento.css
   caricato per ultimo. L'ordine conta: e' quello che decide chi vince.
   Commenti solo con barra-asterisco: dentro un foglio CSS i commenti HTML fanno
   sparire regole in silenzio (LEGGIMI delle bozze, "Note tecniche"). */

/* ux.css */
/* ============================================================
   Livello di navigazione e accessibilita' condiviso dalle tre proposte.
   Non sostituisce nulla del sito: aggiunge quello che oggi manca su
   pagine che superano gli 8.000 pixel di altezza.
   Palette: giallo, nero e blu dell'Academy. Nessun colore nuovo.
   ============================================================ */

:root {
    --ux-nero: #1a1a1a;
    --ux-giallo: #F9C424;   /* primary: azione */
    --ux-blu: #0047FF;      /* accent: navigazione e link, oggi inutilizzato nel sito */
    --ux-bianco: #ffffff;
}

/* --- 1. Salto al contenuto: prima voce raggiungibile da tastiera --- */
.ux-skip {
    position: absolute; left: -9999px; top: 0; z-index: 9999;
    background: var(--ux-nero); color: var(--ux-bianco);
    padding: .9rem 1.4rem; font-weight: 800; text-decoration: none;
    border: 3px solid var(--ux-giallo);
}
.ux-skip:focus { left: 1rem; top: 1rem; }

/* --- 2. Focus sempre visibile, e visibile davvero --- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 4px solid var(--ux-blu);
    outline-offset: 3px;
    border-radius: 2px;
}

/* --- 3. Barra di sezione: compare dopo la hero, dice dove sei e tiene l'azione a portata ---
   Nota per chi implementa: qui NON si puo' usare position:sticky. Il CSS del sito imposta
   overflow-x:hidden su html e body (style.css, riga 65) e questo disattiva sticky in tutti
   i discendenti, senza errori e senza avvisi. Con position:fixed il problema non si pone. */
.ux-navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    background: var(--ux-bianco);
    border-bottom: 3px solid var(--ux-nero);
    transform: translateY(-105%);
    transition: transform .18s ease-out;
}
.ux-navbar[data-visibile="si"] { transform: translateY(0); }
.ux-navbar-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
    display: flex; align-items: center; gap: 1rem; min-height: 56px;
}
.ux-navbar-voci {
    display: flex; gap: .35rem; flex: 1; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ux-navbar-voci::-webkit-scrollbar { display: none; }
.ux-navbar-voci a {
    white-space: nowrap; text-decoration: none; color: var(--ux-nero);
    font-weight: 700; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase;
    padding: .75rem .65rem; border-bottom: 4px solid transparent; min-height: 44px;
    display: flex; align-items: center;
}
.ux-navbar-voci a:hover { border-bottom-color: var(--ux-giallo); }
.ux-navbar-voci a[aria-current="true"] { border-bottom-color: var(--ux-blu); color: var(--ux-blu); }
.ux-navbar-cta {
    flex: 0 0 auto; margin-left: 1rem; text-decoration: none; background: var(--ux-giallo); color: var(--ux-nero);
    border: 3px solid var(--ux-nero); box-shadow: 3px 3px 0 var(--ux-nero);
    font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
    padding: .7rem 1rem; min-height: 44px; display: flex; align-items: center;
}
.ux-navbar-cta:active { box-shadow: 0 0 0 var(--ux-nero); transform: translate(3px, 3px); }

/* --- 4. Ritorno all'inizio: su pagine cosi' lunghe non e' un vezzo --- */
.ux-su {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900;
    width: 52px; height: 52px; display: none;
    align-items: center; justify-content: center;
    background: var(--ux-bianco); color: var(--ux-nero);
    border: 3px solid var(--ux-nero); box-shadow: 4px 4px 0 var(--ux-nero);
    font-size: 1.4rem; line-height: 1; text-decoration: none; font-weight: 800;
}
.ux-su[data-visibile="si"] { display: flex; }
.ux-su:active { box-shadow: 0 0 0; transform: translate(4px, 4px); }

/* --- 5. Le ancore non finiscono sotto la barra ---
   Il numero sta in --anchor-offset (css/style.css). */
section[id] { scroll-margin-top: var(--anchor-offset, 114px); }

/* --- 6. Stati del modulo: chi compila deve capire cosa sta succedendo --- */
.ux-campo-errore { border-color: #E5484D !important; }
.ux-messaggio {
    margin-top: 1rem; padding: .9rem 1rem; border: 3px solid var(--ux-nero);
    background: var(--ux-giallo); font-weight: 700; display: none;
}
.ux-messaggio[data-stato="visibile"] { display: block; }

/* --- 7. Telefono: la maggior parte del traffico social arriva da li' --- */
@media (max-width: 640px) {
    .ux-navbar-inner { padding: 0 .75rem; gap: .5rem; }
    .ux-navbar-cta { font-size: .75rem; padding: .7rem .8rem; }
    .hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.1; }
    .hero-subtitle { font-size: 1rem; }
    .hero-cta { display: flex; flex-direction: column; gap: .75rem; }
    .hero-cta .btn { width: 100%; text-align: center; }
    .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
    .comparison-table { display: block; overflow-x: auto; }
    .ux-su { right: .75rem; bottom: .75rem; }
}

/* --- 8. Chi ha chiesto meno animazioni, ne ha meno --- */
@media (prefers-reduced-motion: reduce) {
    .ux-navbar { transition: none; }
    * { scroll-behavior: auto !important; }
}

/* --- 9. Le note non usano opacity ---
   `opacity` sommata a un grigio gia' chiaro faceva scendere il contrasto a 4,21:1
   sul fondo giallo, sotto la soglia. Il colore esplicito e' verificabile a colpo d'occhio. */
.p-nota, .b-nota { color: #4a4a4a; opacity: 1; }
section[style*="--aimax-yellow"] .p-nota, .az-giallo .p-nota { color: #3a3a3a; }

/* b2b.css */
/* ============================================================
   Stile condiviso delle pagine per aziende (home aziende + landing AI Act).
   Regole dal design system canonico: giallo = azione, blu = orientamento,
   nero = struttura, arancione solo warning. Bordi e ombre nere piene,
   nessun gradiente, nessuna sfocatura. Il CSS del sito non viene toccato.
   ============================================================ */

:root { --foreground: #1a1a1a; --background: #ffffff; --az-blu: #0047FF; --az-grigio: #f3f3f3; }

/* semantica del colore sui componenti del sito */
.btn-primary { background: var(--aimax-yellow); color: #1a1a1a; border: 3px solid #1a1a1a; box-shadow: 5px 5px 0 #1a1a1a; font-weight: 800; }
.btn-primary:hover { background: #ffd84d; }
.btn-primary:active { box-shadow: 0 0 0 #1a1a1a; transform: translate(5px, 5px); }
.btn-secondary { background: var(--background); color: #1a1a1a; border: 3px solid #1a1a1a; box-shadow: 5px 5px 0 #1a1a1a; font-weight: 800; }
.az-scuro .btn-primary, section[style*="--aimax-yellow"] .btn-primary { background: #1a1a1a; color: #fff; box-shadow: 5px 5px 0 var(--aimax-yellow); }
.az-scuro > .container > .btn-secondary, .az-scuro .section-header .btn-secondary,
.az-scuro > .container > * > .btn-secondary { background: transparent; color: #fff; border-color: #fff; box-shadow: 5px 5px 0 var(--aimax-yellow); }
/* dentro una card chiara il secondario resta scuro su bianco, anche se la sezione e' scura */
.az-scuro :is(.az-passo, .az-cit, .az-form, .az-tessera, .az-livello, .c-colonna, .c-prezzo-card, .p-caso, .az-scheda) .btn-secondary
  { background: #fff; color: #1a1a1a; border-color: #1a1a1a; box-shadow: 5px 5px 0 #1a1a1a; }
.section-label, .section-label--pill { background: var(--aimax-yellow); color: #1a1a1a; border: 2px solid #1a1a1a; }
.stat-value { color: #1a1a1a; }
.stat { border: 3px solid #1a1a1a; box-shadow: 5px 5px 0 var(--aimax-yellow); }
.logo-bar { background: var(--az-grigio) !important; border-top: 3px solid #1a1a1a; border-bottom: 3px solid #1a1a1a; }
.logo-bar .section-label { color: #1a1a1a !important; opacity: 1 !important; }
.logo-bar img { opacity: .85 !important; }

/* sezioni */
.az-scuro { background: var(--foreground); color: var(--background); }
.az-scuro .section-title, .az-scuro h2 { color: var(--background); }
.az-scuro .section-subtitle { color: var(--background); opacity: .9; }
/* il CSS del sito assegna a ogni <p> un grigio #4a4a4a, che vince sull'ereditarieta' del bianco:
   su nero sta a 1,96:1. Qui il testo libero delle sezioni scure e' chiaro (13:1); dentro le card
   bianche (.az-passo, .az-form, .az-cit, .az-livello) resta scuro, com'e' giusto. */
.az-scuro .az-fatto p, .az-scuro .az-fatto li, .az-scuro .az-nota, .az-scuro .section-header p,
.az-scuro > .container > p { color: rgba(255,255,255,.9); }
.az-scuro .az-fatto h3 { color: #fff; }
/* dentro le card bianche il testo resta scuro, qualunque sia la sezione */
.az-scuro :is(.az-passo, .az-cit, .az-form, .az-tessera, .az-livello, .c-colonna, .c-prezzo-card, .p-caso)
  :is(h3, h4, li, p, strong, small, span) { color: #1a1a1a; }
.az-scuro .az-passo small { color: var(--az-blu); }
.az-giallo { background: var(--aimax-yellow); }
.az-grigio { background: var(--az-grigio); }
/* niente opacity: sommata a un grigio chiaro scendeva a 4,21:1 sul giallo.
   Il colore esplicito passa ovunque, e nelle sezioni scure lo schiarisce la regola sotto. */
.az-nota { font-size: .95rem; color: #4a4a4a; margin-top: 1rem; line-height: 1.55; }
.az-giallo .az-nota, .az-grigio .az-nota { color: #3a3a3a; }

/* hero a due colonne: il messaggio a sinistra, la scheda che decide a destra */
.az-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.az-hero h1 { margin-bottom: 1.25rem; }
.az-hero .hero-subtitle { margin: 0 0 1.75rem; }
.az-scheda { border: 3px solid #1a1a1a; background: #fff; box-shadow: 10px 10px 0 #1a1a1a; padding: 1.75rem; }
.az-scheda-testa { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem;
                   display: inline-block; background: var(--aimax-yellow); border: 2px solid #1a1a1a; padding: .2rem .6rem; margin-bottom: 1rem; }
.az-scheda-riga { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 2px solid #eee; }
.az-scheda-riga:last-of-type { border-bottom: 0; }
.az-scheda-riga span:first-child { color: #555; }
.az-scheda-riga strong { text-align: right; }
.az-scheda .btn { width: 100%; text-align: center; margin-top: 1.25rem; }

/* griglie di tessere */
.az-tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.az-tessera { border: 3px solid #1a1a1a; background: #fff; color: #1a1a1a; box-shadow: 6px 6px 0 #1a1a1a; padding: 1.5rem; display: flex; flex-direction: column; }
.az-tessera h3 { margin: 0 0 .5rem; font-size: 1.2rem; line-height: 1.25; }
.az-tessera p { margin: 0; line-height: 1.55; flex: 1; }
.az-tessera .btn { margin-top: auto; align-self: flex-start; }
.az-tessera-n { display: inline-block; border: 2px solid #1a1a1a; background: var(--aimax-yellow); font-weight: 800;
                padding: .15rem .6rem; margin-bottom: .75rem; font-size: .9rem; }
.az-tessera--blu .az-tessera-n { background: var(--az-blu); color: #fff; }

/* i tre livelli, uno dentro l'altro */
.az-livelli { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; align-items: stretch; }
.az-livello { border: 3px solid #1a1a1a; background: #fff; color: #1a1a1a; box-shadow: 8px 8px 0 #1a1a1a; padding: 1.6rem; display: flex; flex-direction: column; position: relative; }
.az-livello--2 { box-shadow: 8px 8px 0 var(--aimax-yellow); }
.az-livello--3 { box-shadow: 8px 8px 0 var(--az-blu); }
.az-livello-n { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.az-livello h3 { font-size: 1.45rem; line-height: 1.15; margin: 0 0 .75rem; }
.az-livello-chi { font-weight: 700; margin: 0 0 1rem; padding: .6rem .8rem; background: var(--az-grigio); border-left: 5px solid #1a1a1a; }
.az-livello-include { margin: 0 0 1rem; padding: .6rem .8rem; border: 2px dashed #1a1a1a; font-size: .92rem; }
.az-livello-include strong { display: block; margin-bottom: .2rem; }
.az-livello ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.az-livello li { padding: .45rem 0 .45rem 1.6rem; position: relative; line-height: 1.45; border-bottom: 2px solid #eee; }
.az-livello li:last-child { border-bottom: 0; }
.az-livello li::before { content: ""; position: absolute; left: 0; top: .85rem; width: 10px; height: 10px; background: var(--aimax-yellow); border: 2px solid #1a1a1a; }
.az-livello li.az-nuovo::before { background: var(--az-blu); }
.az-livello li.az-nuovo { font-weight: 700; }
/* i corsi che hanno gia' una pagina sono cliccabili dentro l'elenco del livello */
.az-livello li a { color: inherit; text-decoration: none; box-shadow: inset 0 -3px 0 var(--aimax-yellow); }
.az-livello li a:hover, .az-livello li a:focus-visible { box-shadow: inset 0 -1.1em 0 var(--aimax-yellow); }
.az-livello-dati { display: flex; gap: 1rem; margin: auto 0 1rem; padding-top: 1rem; border-top: 3px solid #1a1a1a; }
.az-livello-dati div { flex: 1; }
.az-livello-dati strong { display: block; font-size: 1.5rem; line-height: 1.1; }
.az-livello-dati span { font-size: .82rem; color: #555; }
.az-livello .btn { width: 100%; text-align: center; margin-top: auto; }
.az-livello .az-consiglio + .btn { margin-top: .75rem; }
.az-consiglio { font-size: .9rem; margin: .75rem 0 0; padding: .6rem .8rem; background: #fff8d6; border: 2px solid #1a1a1a; }

/* i passi */
.az-passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.az-passo { border: 3px solid #1a1a1a; background: #fff; color: #1a1a1a; box-shadow: 6px 6px 0 #1a1a1a; padding: 1.4rem; }
.az-passo span { display: inline-block; width: 36px; height: 36px; border: 3px solid #1a1a1a; background: var(--aimax-yellow);
                 font-weight: 800; text-align: center; line-height: 30px; margin-bottom: .75rem; }
.az-passo h3 { margin: 0 0 .4rem; font-size: 1.1rem; line-height: 1.25; }
.az-passo p { margin: 0; font-size: .95rem; line-height: 1.5; }
.az-passo small { display: block; margin-top: .6rem; font-weight: 700; color: var(--az-blu); }

/* tabella "quale livello per chi" */
.az-tabella { width: 100%; border-collapse: collapse; margin-top: 2rem; background: #fff; border: 3px solid #1a1a1a; }
.az-tabella th, .az-tabella td { padding: .9rem 1rem; text-align: left; border-bottom: 2px solid #1a1a1a; vertical-align: top; line-height: 1.45; }
.az-tabella th { background: var(--aimax-yellow); font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.az-tabella tr:last-child td { border-bottom: 0; }
.az-tabella td strong { white-space: nowrap; }

/* fatti in tre colonne */
.az-fatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.az-fatto { border-left: 6px solid var(--aimax-yellow); padding: .25rem 0 .25rem 1.25rem; }
.az-scuro .az-fatto { border-left-color: var(--aimax-yellow); }
.az-fatto h3 { margin: 0 0 .5rem; font-size: 1.1rem; line-height: 1.3; }
.az-fatto p { margin: 0; line-height: 1.6; font-size: .97rem; }

/* citazione di posizionamento */
.az-cit { max-width: 900px; margin: 2.5rem auto 0; padding: 1.75rem 2rem; border: 3px solid #1a1a1a; background: #fff; color: #1a1a1a;
          box-shadow: 10px 10px 0 var(--aimax-yellow); font-size: 1.2rem; line-height: 1.55; font-weight: 700; }
.az-cit small { display: block; margin-top: .75rem; font-weight: 400; font-size: .9rem; opacity: .75; }

/* modulo a fascia */
.az-form { border: 3px solid #1a1a1a; background: #fff; color: #1a1a1a; box-shadow: 8px 8px 0 var(--aimax-yellow); padding: 2rem 2.25rem; margin-top: 2.5rem; }
.az-form-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.az-form-testa h3 { margin: 0; font-size: 1.4rem; }
.az-form-testa p { margin: 0; opacity: .8; flex: 1; min-width: 260px; }
.az-form-campi { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr auto; gap: 1rem; align-items: end; }
.az-form label { display: block; font-weight: 700; margin: 0 0 .35rem; font-size: .85rem; }
.az-form input, .az-form select { width: 100%; padding: .8rem; border: 2px solid #1a1a1a; font-family: inherit; font-size: 1rem; background: #fff; }
.az-form .btn { white-space: nowrap; }

/* corsi per ruolo */
.az-ruoli { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.az-ruolo { border: 3px solid #1a1a1a; background: #fff; color: #1a1a1a; box-shadow: 6px 6px 0 #1a1a1a; padding: 1.5rem; }
.az-ruolo h3 { margin: 0 0 .25rem; font-size: 1.2rem; }
.az-ruolo > p { margin: 0 0 1rem; font-size: .93rem; color: #555; }
.az-corso { display: flex; gap: .8rem; align-items: center; padding: .7rem 0; border-top: 2px solid #eee; text-decoration: none; color: #1a1a1a; }
.az-corso img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; }
.az-corso strong { display: block; font-size: .98rem; line-height: 1.2; }
.az-corso span { font-size: .82rem; color: #555; }
.az-corso:hover strong { text-decoration: underline; }

/* chi c'e' dietro, compatto */
.az-max { display: grid; grid-template-columns: 160px 1fr; gap: 2rem; align-items: center; max-width: 820px; margin: 2rem auto 0; }
.az-max img { width: 160px; height: 160px; object-fit: cover; border: 4px solid #1a1a1a; box-shadow: 8px 8px 0 var(--aimax-yellow); }
.az-max p { margin: 0 0 .6rem; line-height: 1.6; }

@media (max-width: 900px) {
    .az-hero, .az-livelli, .az-ruoli { grid-template-columns: 1fr; }
    .az-form-campi { grid-template-columns: 1fr 1fr; }
    .az-max { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 560px) { .az-form-campi { grid-template-columns: 1fr; } }

/* corso.css */
/* ============================================================
   Pagina di un singolo corso. Si appoggia a b2b.css (semantica del colore,
   scheda, fatti, passi, modulo) e aggiunge i componenti che servono solo qui:
   la lista delle cose che restano in mano, le lezioni, il prezzo, le competenze.
   ============================================================ */

/* la hero del corso: le due colonne si allineano in alto e in basso.
   A sinistra il link in cima e i pulsanti in fondo; a destra la scheda si allunga fino al filo dei pulsanti. */
.hero .az-hero { align-items: stretch; }
.az-hero > div:first-child { display: flex; flex-direction: column; }
.az-hero > div:first-child .hero-cta { margin-top: auto; padding-top: 1rem; }
.az-hero .az-scheda { display: flex; flex-direction: column; }
.az-hero .az-scheda .btn { margin-top: auto; }
.az-hero .az-scheda .az-nota { margin-top: auto; padding-top: 1rem; }
.c-torna { display: block; width: max-content; margin-bottom: 1.75rem; font-weight: 700; text-decoration: none; color: #1a1a1a;
           border-bottom: 3px solid #1a1a1a; font-size: .9rem; }
/* la fascia del corso: bianca, a tutta larghezza, sopra la hero */
.c-fascia { background: #fff; border-bottom: 3px solid #1a1a1a; }
.c-fascia-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: .85rem;
                  padding-top: 1.1rem; padding-bottom: 1.25rem; text-align: center; }
.c-fascia-torna { align-self: flex-start; font-weight: 700; font-size: .9rem; text-decoration: none; color: #1a1a1a;
                  border-bottom: 3px solid #1a1a1a; white-space: nowrap; }
.c-fascia-corso { display: flex; align-items: center; gap: 1.25rem; text-align: left; }
.c-fascia-corso img { width: 72px; height: 72px; object-fit: contain; flex: 0 0 72px; }
.c-fascia-corso strong { display: block; font-size: 1.7rem; line-height: 1.15; }
.c-fascia-corso span { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .07em;
                       text-transform: uppercase; color: #555; margin-top: .2rem; }
.c-fascia-prezzo { flex: 0 0 auto; text-decoration: none; color: #1a1a1a; font-weight: 800; font-size: 1.3rem;
                   border: 3px solid #1a1a1a; box-shadow: 4px 4px 0 var(--aimax-yellow); padding: .5rem 1rem; white-space: nowrap; }
.c-fascia-prezzo:hover { box-shadow: 4px 4px 0 #1a1a1a; }
@media (max-width: 760px) {
    .c-fascia-inner { gap: .9rem; }
    .c-fascia-corso img { width: 56px; height: 56px; flex-basis: 56px; }
    .c-fascia-corso strong { font-size: 1.25rem; }
}
.c-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0 1.75rem; }
.c-meta span { border: 2px solid #1a1a1a; background: #fff; padding: .35rem .7rem; font-size: .85rem; font-weight: 700; }
.c-prezzo-inline { font-size: 1.6rem; font-weight: 800; }
.c-prezzo-inline small { font-size: .85rem; font-weight: 400; opacity: .75; margin-left: .4rem; }

/* cosa ti resta in mano */
.c-resta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.c-resta-voce { display: flex; gap: 1rem; align-items: flex-start; border: 3px solid #1a1a1a; background: #fff; color: #1a1a1a;
                box-shadow: 6px 6px 0 #1a1a1a; padding: 1.25rem 1.4rem; }
.c-resta-voce span { flex: 0 0 34px; height: 34px; border: 3px solid #1a1a1a; background: var(--aimax-yellow);
                     font-weight: 800; display: flex; align-items: center; justify-content: center; }
.c-resta-voce p { margin: 0; line-height: 1.5; font-weight: 600; }

/* prima / dopo, compatto */
.c-confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.c-colonna { border: 3px solid #1a1a1a; padding: 1.5rem; background: #fff; color: #1a1a1a; }
.c-colonna--dopo { box-shadow: 8px 8px 0 var(--aimax-yellow); }
.c-colonna h3 { margin: 0 0 1rem; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .05em; }
.c-colonna ul { list-style: none; padding: 0; margin: 0; }
.c-colonna li { padding: .55rem 0 .55rem 1.7rem; position: relative; line-height: 1.5; border-top: 2px solid #eee; }
.c-colonna li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 10px; height: 10px; border: 2px solid #1a1a1a; background: #fff; }
.c-colonna--dopo li::before { background: var(--aimax-yellow); }

/* le lezioni */
.c-lezioni { margin-top: 2.5rem; border: 3px solid #1a1a1a; background: #fff; color: #1a1a1a; box-shadow: 8px 8px 0 #1a1a1a; }
.c-lezione { display: grid; grid-template-columns: 64px 1fr auto; gap: 1.25rem; align-items: center; padding: 1.1rem 1.4rem; border-top: 3px solid #1a1a1a; }
.c-lezione:first-child { border-top: 0; }
.c-lezione-n { width: 44px; height: 44px; border: 3px solid #1a1a1a; background: #fff; font-weight: 800; font-size: 1.1rem;
               display: flex; align-items: center; justify-content: center; }
.c-lezione--gratis .c-lezione-n { background: var(--aimax-yellow); }
.c-lezione h3 { margin: 0 0 .2rem; font-size: 1.1rem; line-height: 1.25; }
.c-lezione p { margin: 0; font-size: .95rem; line-height: 1.5; color: #333; }
.c-lezione-tag { border: 2px solid #1a1a1a; padding: .25rem .6rem; font-size: .75rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.c-lezione--gratis .c-lezione-tag { background: var(--aimax-yellow); }
.c-lezione--arrivo { opacity: .75; }
.c-lezione--arrivo .c-lezione-tag { border-style: dashed; }

/* la finestra della hero: la lezione gratuita, mostrata come prodotto */
.c-finestra { margin: 0; border: 3px solid #1a1a1a; background: #fff; box-shadow: 14px 14px 0 #1a1a1a;
              display: flex; flex-direction: column; overflow: hidden; }
.c-finestra-barra { background: #1a1a1a; color: #fff; display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; }
.c-finestra-pallini { display: flex; gap: .35rem; flex: 0 0 auto; }
.c-finestra-pallini i { width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .45; display: block; }
.c-finestra-titolo { flex: 1; font-size: .85rem; font-weight: 700; letter-spacing: .02em; }
.c-finestra-tag { flex: 0 0 auto; background: var(--aimax-yellow); color: #1a1a1a; font-size: .72rem; font-weight: 800;
                  text-transform: uppercase; letter-spacing: .06em; padding: .2rem .55rem; border: 2px solid #1a1a1a; }
.c-finestra img { width: 100%; height: auto; display: block; border-bottom: 3px solid #1a1a1a; }
.c-finestra-piede { padding: 1rem 1.15rem; font-size: .93rem; line-height: 1.55; color: #1a1a1a; }

/* la striscia dei numeri, sotto la hero */
.c-dati-sezione { background: #1a1a1a; border-bottom: 3px solid #1a1a1a; padding: 1.5rem 0; }
.c-dati { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.c-dati > div { text-align: center; border-right: 2px solid rgba(255,255,255,.2); padding: .25rem 0; }
.c-dati > div:last-child { border-right: 0; }
.c-dati strong { display: block; font-size: 1.75rem; line-height: 1.1; color: var(--aimax-yellow); }
.c-dati span { display: block; font-size: .85rem; color: rgba(255,255,255,.85); margin-top: .25rem; }
@media (max-width: 860px) { .c-dati { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
                            .c-dati > div { border-right: 0; border-bottom: 2px solid rgba(255,255,255,.2); padding-bottom: .75rem; }
                            .c-dati > div:last-child { border-bottom: 0; } }

/* le due schermate vere del corso: mostrare invece di descrivere */
.c-prova { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.c-prova-schermo { margin: 0; border: 3px solid #1a1a1a; background: #fff; box-shadow: 10px 10px 0 #1a1a1a; overflow: hidden; }
.c-prova-schermo img { width: 100%; height: auto; display: block; border-bottom: 3px solid #1a1a1a; }
.c-prova-schermo figcaption { padding: .9rem 1.1rem; font-size: .92rem; line-height: 1.5; color: #1a1a1a; }
.c-prova-nota { text-align: center; margin: 1.1rem 0 0; font-size: .9rem; font-weight: 700; }
@media (max-width: 860px) { .c-prova { grid-template-columns: 1fr; } }

/* come si studia qui */
.c-metodo { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.c-metodo-voce { border: 3px solid #1a1a1a; background: #fff; color: #1a1a1a; box-shadow: 6px 6px 0 #1a1a1a; padding: 1.4rem; }
.c-metodo-voce strong { display: block; font-size: 1.05rem; margin-bottom: .4rem; }
.c-metodo-voce p { margin: 0; font-size: .95rem; line-height: 1.5; }

/* competenze DigComp */
.c-competenze { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem; }
.c-competenza { border: 3px solid #1a1a1a; background: #fff; padding: 1rem 1.1rem; }
.c-competenza strong { display: block; line-height: 1.25; margin-bottom: .35rem; }
.c-competenza span { display: inline-block; border: 2px solid #1a1a1a; padding: .1rem .5rem; font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.c-competenza--forte span { background: var(--aimax-yellow); }
.c-competenza--media span { background: #fff; }
.c-competenza--base span { background: #fff; border-style: dashed; }

/* dove porta */
.c-dopo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem; }
.c-dopo a { display: flex; gap: .8rem; align-items: center; border: 3px solid #1a1a1a; background: #fff; color: #1a1a1a;
            padding: .9rem 1rem; text-decoration: none; box-shadow: 5px 5px 0 #1a1a1a; }
.c-dopo a:hover { box-shadow: 5px 5px 0 var(--aimax-yellow); }
.c-dopo img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px; }
.c-dopo strong { display: block; font-size: .98rem; line-height: 1.2; }
.c-dopo span { font-size: .8rem; color: #555; }

/* prezzo */
.c-prezzo { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: stretch; margin-top: 2.5rem; }
.c-prezzo-card { border: 3px solid #1a1a1a; background: #fff; color: #1a1a1a; box-shadow: 10px 10px 0 #1a1a1a; padding: 2rem;
                 display: flex; flex-direction: column; }
.c-prezzo-card--principale { box-shadow: 10px 10px 0 var(--aimax-yellow); }
.c-prezzo-card h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.c-prezzo-valore { font-size: 2.6rem; font-weight: 800; line-height: 1; margin: .5rem 0; }
.c-prezzo-valore small { font-size: .95rem; font-weight: 400; opacity: .7; margin-left: .5rem; }
.c-prezzo-card ul { list-style: none; padding: 0; margin: 1rem 0 1.5rem; flex: 1; }
.c-prezzo-card li { padding: .45rem 0 .45rem 1.6rem; position: relative; line-height: 1.45; border-top: 2px solid #eee; }
.c-prezzo-card li::before { content: ""; position: absolute; left: 0; top: .85rem; width: 10px; height: 10px; background: var(--aimax-yellow); border: 2px solid #1a1a1a; }
.c-prezzo-card .btn { width: 100%; text-align: center; margin-top: auto; }
.c-prezzo-nota { font-size: .9rem; color: #4a4a4a; margin-top: .9rem; line-height: 1.5;
                 min-height: 2.7em; }   /* due righe: cosi' i pulsanti delle card affiancate si allineano */

@media (max-width: 860px) {
    .c-resta, .c-confronto, .c-prezzo { grid-template-columns: 1fr; }
    .c-lezione { grid-template-columns: 52px 1fr; }
    .c-lezione-tag { grid-column: 2; justify-self: start; }
}

/* ds-allineamento.css */
/* ============================================================
   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;
}
.az-ruoli-riga .az-modo { font-family: var(--font-heading); box-shadow: 3px 3px 0 #000; }
.az-ruoli-riga .az-modo--vivo    { background: var(--aimax-yellow); }
.az-ruoli-riga .az-modo--academy { background: var(--aimax-blue); color: #fff; }
.az-ruoli-riga .az-modo--tutor   { background: var(--aimax-green); }
.az-ruoli-riga .az-modo--mentor  { background: var(--aimax-orange); }
.az-ruoli-riga .az-corso { background: #fff; font-weight: 600; }
.az-ruoli-riga a.az-corso:hover { background: var(--az-grigio); }
.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; }

/* ---------- §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" torna bianco. Il design system lo vorrebbe
      grigio (il testo da comunicare sta sui pannelli muted): scelta di Max.
   ---------- */
.az-livelli { align-items: start; }
.az-livello-dati { margin-top: 1rem !important; }
.az-livello .az-consiglio { background: #fff !important; }