/* ai-act.css - la landing AI Act, in italiano e in inglese. Viene dopo style.css e ux.css. */
/* 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: #000000; --background: #ffffff; --az-blu: #0047FF; --az-grigio: #f3f3f3; }

/* semantica del colore sui componenti del sito */
.btn-primary { background: var(--aimax-yellow); color: #000000; border: 3px solid #000000; box-shadow: 5px 5px 0 #000000; font-weight: 800; }
.btn-primary:hover { background: #ffd84d; }
.btn-primary:active { box-shadow: 0 0 0 #000000; transform: translate(5px, 5px); }
.btn-secondary { background: var(--background); color: #000000; border: 3px solid #000000; box-shadow: 5px 5px 0 #000000; font-weight: 800; }
.az-scuro .btn-primary, section[style*="--aimax-yellow"] .btn-primary { background: #000000; 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: #000000; border-color: #000000; box-shadow: 5px 5px 0 #000000; }
.section-label, .section-label--pill { background: var(--aimax-yellow); color: #000000; border: 2px solid #000000; }
.stat-value { color: #000000; }
.stat { border: 3px solid #000000; box-shadow: 5px 5px 0 var(--aimax-yellow); }
.logo-bar { background: var(--az-grigio) !important; border-top: 3px solid #000000; border-bottom: 3px solid #000000; }
.logo-bar .section-label { color: #000000 !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 #666666, 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: #000000; }
.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: #666666; 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 #000000; background: #fff; box-shadow: 10px 10px 0 #000000; 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 #000000; border-radius: 999px; padding: .2rem .8rem; 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; justify-content: 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 #000000; background: #fff; color: #000000; box-shadow: 6px 6px 0 #000000; 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 #000000; 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 #000000; background: #fff; color: #000000; box-shadow: 8px 8px 0 #000000; 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: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; text-align: center;
                display: block; background: var(--az-blu); color: #ffffff; border: 2px solid #000000; border-radius: 999px; padding: .5rem .8rem; }
.az-livello-domanda { font-weight: 800; text-align: left; margin: 1rem 0 .4rem; color: #000000; }
/* 10/09/2026 (Isabella) - logo per livello, da *_background-dark.png. Il
   rettangolo scuro pieno (colore uniforme #07101f, verificato pixel per
   pixel) tolto via script Python/Pillow con chroma-key + autocrop, file
   risalvati sovrascrivendo assets/livelli/*.png, ridotti a 320px di lato.
   La sagoma olive dietro la bandiera fa parte del disegno dell'icona stessa
   (un sigillo), non e' sfondo: lasciata com'e', il contrasto su bianco e'
   questione di fase design, non ora. Niente piu' box/bordo: object-fit
   contain, altezza piccola, si vede l'icona intera senza tagli.
   Mappatura file/livello verificata su percorsi.yaml: lo slug
   "alfabetizzazione-ai-act" e' il nome tecnico di "AI-Act intermedio"
   (rinominato il 14/08/2026, il file si chiama ancora cosi' per storia sua) -
   percorsi.yaml righe 173-178. */
.az-livello-logo { display: block; width: auto; height: 56px; object-fit: contain; margin: 0 0 1rem; }
.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 #000000; }
/* 10/09/2026 (Isabella) - tolto il bordo tratteggiato su richiesta diretta,
   restava un box tratteggiato dentro un box con bordo pieno: troppi bordi. */
.az-livello-include { margin: 0 0 1rem; 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 #000000; }
.az-livello li.az-nuovo::before { background: var(--az-blu); }
.az-livello li.az-nuovo { font-weight: 700; }
.az-livello li.az-nuovo a, .az-livello li.az-nuovo { text-decoration: underline; text-decoration-color: var(--aimax-yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }
/* i corsi che hanno gia' una pagina sono cliccabili dentro l'elenco del livello */
.az-livello li a { color: inherit; text-decoration: none; }
.az-livello li a:hover, .az-livello li a:focus-visible { text-decoration: underline; }
.az-livello-dati { display: flex; gap: 1rem; margin: auto 0 1rem; padding-top: 1rem; border-top: 3px solid #000000; }
.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: var(--aimax-yellow); border: 2px solid #000000; border-radius: var(--r); color: #000000; }

/* i passi */
/* 10/09/2026 (Isabella) - .az-passi/.az-passo non piu' usate in HTML: la
   sezione "Partire" a 4 passi e' stata unita dentro "Preventivo". Regole
   lasciate qui (non tolte) nel caso servano ancora altrove o si torni
   indietro - nessun danno a lasciarle, non si applicano a niente ora. */
.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 #000000; background: #fff; color: #000000; box-shadow: 6px 6px 0 #000000; padding: 1.4rem; }
.az-passo span { display: inline-block; width: 36px; height: 36px; border: 3px solid #000000; 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 #000000; }
.az-tabella th, .az-tabella td { padding: .9rem 1rem; text-align: left; border-bottom: 2px solid #000000; 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; }
/* 10/09/2026 (Isabella) - "chi" in grassetto: provato giallo, contrasto
   scarso su bianco (vedi nota sopra rimossa), tornato a nero su richiesta
   diretta - risalta di piu' cosi'. Rimane il colore normale del testo,
   .az-tabella-chi resta come gancio per lo stile se in futuro serve. */
.az-tabella-chi { color: #000000; }

/* 10/09/2026 (Isabella) - nastro FAQ che scorre, stessa tecnica del nastro
   loghi di home-aziende-v2-bozza (overflow:hidden sul contenitore + track
   raddoppiata piu' larga della pagina + translateX(-50%) in loop, mask ai
   bordi per sfumare invece di tagliare). Pausa al passaggio del mouse E al
   focus da tastiera (le card non hanno link dentro, ma il focus-within
   costa niente e aiuta se in futuro se ne aggiunge uno). Su
   prefers-reduced-motion: animazione ferma, la track diventa una griglia
   normale che va a capo, le card duplicate (aria-hidden) spariscono per non
   mostrare le domande due volte. */
.faq-marquee {
    overflow: hidden;
    width: 100%;
    margin-top: 2.5rem;
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.faq-marquee-track {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    width: max-content;
    animation: faq-marquee-scroll 35s linear infinite;
}
.faq-marquee:hover .faq-marquee-track,
.faq-marquee:focus-within .faq-marquee-track {
    animation-play-state: paused;
}
.faq-slot {
    flex: none;
    width: 300px;
    border: 3px solid #000000;
    background: #fff;
    box-shadow: 6px 6px 0 var(--aimax-yellow);
    padding: 1.25rem 1.4rem;
}
.faq-slot h3 { margin: 0 0 .5rem; font-size: 1.02rem; line-height: 1.3; }
.faq-slot p { margin: 0; font-size: .92rem; line-height: 1.5; }
@keyframes faq-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .faq-marquee { overflow-x: visible; -webkit-mask-image: none; mask-image: none; }
    .faq-marquee-track { animation: none; flex-wrap: wrap; width: 100%; }
    .faq-marquee-track [aria-hidden="true"] { display: none; }
}

/* 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; }

/* 10/09/2026 (Isabella) - "formula" di cosa si da', sezione "cosa vi resta":
   voci unite da un "+", su richiesta diretta. Classe a parte (non .az-fatti)
   per non toccare le altre sezioni che usano .az-fatti a griglia normale. */
.az-digcomp { max-width: 680px; margin: 1.75rem auto 0; text-align: center; font-size: .97rem; line-height: 1.55;
              background: #fff; border: 3px solid #000000; border-radius: var(--radius-sm); padding: 1.1rem 1.4rem; }
.az-formula { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.az-formula-item { background: #fff; border: 3px solid #000000; border-radius: var(--radius-sm); box-shadow: 6px 6px 0 #000000;
                    padding: .8rem 1.25rem; font-weight: 700; font-size: 1rem; }
.az-formula-plus { width: 2rem; height: 2rem; border-radius: 50%; background: #000000; color: var(--aimax-yellow);
                    font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* citazione di posizionamento */
.az-cit { max-width: 900px; margin: 2.5rem auto 0; padding: 1.75rem 2rem; border: 3px solid #000000; background: #fff; color: #000000;
          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 #000000; background: #fff; color: #000000; 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 #000000; 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 #000000; background: #fff; color: #000000; box-shadow: 6px 6px 0 #000000; 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: #000000; }
.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 #000000; box-shadow: 8px 8px 0 var(--aimax-yellow); }
.az-max p { margin: 0 0 .6rem; line-height: 1.6; }


/* 08/09/2026 (Isabella) - la squadra dietro Max: PLACEHOLDER, persone finte.
   Vedi commento HTML sopra la sezione per il perche' e il divieto di
   pubblicare cosi' com'e'. */
.az-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 900px; margin: 2.5rem auto 0; }
.az-persona { text-align: center; }
.az-persona-avatar {
    width: 88px; height: 88px; margin: 0 auto .75rem; border-radius: 50%;
    border: 3px solid #000000; box-shadow: 5px 5px 0 var(--aimax-yellow);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-weight: 800; font-size: 1.4rem;
    color: #fff;
}
.az-persona h3 { font-size: 1.05rem; margin: 0 0 .15rem; }
.az-persona .az-persona-ruolo { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #555; margin-bottom: .6rem; }
.az-persona p.az-persona-quote { font-size: .9rem; font-style: italic; color: #444; margin: 0; line-height: 1.5; }
.az-persona-placeholder-tag { display: inline-block; margin-top: .5rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #b91c1c; border: 2px solid #b91c1c; border-radius: 4px; padding: .1rem .4rem; }

@media (max-width: 700px) {
    .az-team { grid-template-columns: 1fr; }
}



@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; } }
        .p-bandiera { width: 120px; height: auto; display: block; margin: 0 0 1rem; }
        .az-hero .p-bandiera { margin-bottom: 1rem; }
    
        /* ============================================================
           12/09/2026 (Isabella) - blocco REDESIGN trapiantato da
           ../index.html (stesso identico CSS,
           richiesto da Nicolo'), per dare a questa pagina lo stesso
           linguaggio visivo della home: virgola del marchio sulle
           etichette, meno superfici gialle, pulsanti "fisici", menu
           allineati, evidenziatore nero/giallo sui titoli.
           Escluse solo le 3 righe di regola #domande di quel blocco:
           la' la sezione domande e' una lista statica in due colonne,
           qui e' il nastro animato (.faq-marquee) - quella griglia
           avrebbe schiacciato il nastro in una colonna stretta.
           Tutto il resto del blocco e' identico, incluse le regole per
           classi che questa pagina non usa (restano semplicemente
           inerti, non fanno danno).

           BUG CORRETTO IL 12/09/2026: questo commento usava per errore la
           sintassi dei commenti HTML invece di quella dei commenti CSS.
           Dentro un tag stile, i segni di apertura e chiusura del
           commento HTML sono token CSS validi ma non delimitano un
           blocco commento vero: tutto il testo in mezzo, incluse le vere
           righe di CSS subito dopo, veniva letto come un unico selettore
           invalido, che mandava in crash il parser per il resto del
           blocco. Verificato con Chrome headless (puppeteer): il foglio
           di stile risultava con 2 sole regole invece di circa 230.
           Per i commenti dentro un tag stile: sempre la sintassi CSS,
           mai quella HTML.
           ============================================================ */
        /* ======================================================================
           REDESIGN (11/09/2026) - dall'audit di web design. Ordine: sistema, cuciture e
           spaziatura, tipografia, etichette con la virgola, poi sezione per sezione, mobile.
           ====================================================================== */

        /* --- sistema: token --- */
        :root {
          --bordo: 3px; --r: 14px;
          --ombra-card: 6px 6px 0 #000; --ombra-btn: 4px 4px 0 #000; --ombra-btn-hover: 2px 2px 0 #000;
          --ombra-inv: 6px 6px 0 #fff; --ombra-persone: 8px 8px 0 var(--aimax-yellow);
        }
        /* card: una sola, con due varianti */
        .p-porta2, .p-motivo, .p-ruolo, .p-striscia-act, .az-tessera, .p-box--dopo {
          border: var(--bordo) solid #000; border-radius: var(--r); box-shadow: var(--ombra-card); }
        .p-striscia-act { box-shadow: 6px 6px 0 var(--aimax-blue); }
        .p-box--dopo { box-shadow: var(--ombra-inv); }
        .p-box--prima { border: var(--bordo) solid rgba(255,255,255,.35); border-radius: var(--r); box-shadow: none; }
        /* pulsanti: una sola fisica, si premono */
        .btn { border-width: var(--bordo); border-radius: var(--r); box-shadow: var(--ombra-btn); font-weight: 700;
               transition: transform .1s, box-shadow .1s, background .1s; }
        .btn:hover { transform: translate(2px, 2px); box-shadow: var(--ombra-btn-hover); }
        .btn:active { transform: translate(4px, 4px); box-shadow: none; }
        .btn-primary { background: var(--aimax-yellow); color: #000; }
        .hero .btn-primary, .az-giallo .btn-primary { background: #000; color: #fff; }
        section[style*="--foreground"] .btn-primary, #preventivo .btn-primary {
          background: var(--aimax-yellow); color: #000; box-shadow: 6px 6px 0 #fff; }
        section[style*="--foreground"] .btn-primary:hover, #preventivo .btn-primary:hover { box-shadow: 3px 3px 0 #fff; }
        .btn-secondary { background: #fff; color: #000; }
        /* pulsanti dentro una card: piatti, l'ombra la porta la card */
        .p-porta2 .btn, .p-striscia-act .btn { box-shadow: none; }
        .p-porta2 .btn:hover, .p-striscia-act .btn:hover { transform: none; box-shadow: none; }
        .p-porta2 .btn-primary:hover { background: #222; }
        .p-porta2 .btn-secondary:hover, .p-striscia-act .btn-secondary:hover { background: #f2f2f2; }
        /* 12/09/2026 (Isabella) - stessa regola applicata a .az-scheda (la card della hero
           di questa pagina): il pulsante dentro una card resta piatto, l'ombra la porta solo
           la card, come .p-porta2 sopra - altrimenti si vedono due ombre sovrapposte. */
        .az-scheda .btn { box-shadow: none; }
        .az-scheda .btn:hover { transform: none; box-shadow: none; }
        .az-scheda .btn-primary:hover { background: #222; }
        /* 12/09/2026 (Isabella) - card di questa pagina (.az-scheda, .az-livello) riportate
           agli stessi identici token delle card della home (.p-porta2 e simili): bordo,
           raggio e ombra uguali. Prima avevano valori pre-redesign (raggio 0, ombre piu'
           pesanti, 8-10px invece di 6px) rimasti da prima del trapianto dello stile. Le
           ombre colorate dei livelli 2 e 3 restano, solo la misura scende a 6px come fa
           .p-porta2--aiact sulla home con la sua ombra blu. */
        .az-scheda, .az-livello { border: var(--bordo) solid #000; border-radius: var(--r); box-shadow: var(--ombra-card); }
        .az-livello--2 { box-shadow: 6px 6px 0 var(--aimax-yellow); }
        .az-livello--3 { box-shadow: 6px 6px 0 var(--az-blu); }
        .lang-switcher__menu { box-shadow: var(--ombra-card); }
        .beta-badge { background: #000; color: var(--aimax-yellow); border-radius: 6px; }

        /* --- cuciture e spaziatura --- */
        section, .footer { border-top: 3px solid #000; border-bottom: 0; }
        .hero { border-top: 0; }
        .header { border-bottom-width: 3px; }
        section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
        .hero, #preventivo { padding-block: clamp(5rem, 10vw, 8rem); }
        .logo-bar { padding: 3rem 0; }
        .section-header { margin-bottom: 2.5rem; }
        .section-title { letter-spacing: 0; }

        /* --- tipografia --- */
        .hero-subtitle { font-weight: 500; color: #1a1a1a; }
        .section-subtitle { color: #3a3a3a; }
        .az-giallo .section-subtitle, #tutor .section-subtitle { font-weight: 500; color: #1a1a1a; font-size: 1.06rem; }
        .p-porta2 h3, .p-ruolo h3 { font-size: 1.375rem; letter-spacing: 0; }
        .p-domanda h3 { font-size: 1.15rem; }
        .az-persona h3 { font-size: 1.05rem; }
        .p-porta2 p, .p-ruolo p, .p-box li, .p-passo p { font-size: 1.0625rem; }
        .p-voce-chi, .p-voce-nota, .p-catalogo-riga, .p-riga-io { font-size: .94rem; }

        /* --- etichette: una sola voce, Space Mono, con la virgola del marchio come segno --- */
        .section-label, .section-label--pill, .logo-bar .section-label,
        .p-porta2-eti, .p-ruolo-eti, .p-kicker, .hero-badge {
          display: inline-flex; align-items: center; gap: .5em; width: auto;
          padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1;
          font: 700 .8rem/1 var(--font-heading); text-transform: uppercase; letter-spacing: .1em; color: inherit; }
        .section-label::before, .section-label--pill::before, .logo-bar .section-label::before,
        .p-porta2-eti::before, .p-ruolo-eti::before, .p-kicker::before {
          content: ","; font: 700 2em/0 var(--font-heading); transform: translateY(-.1em); color: #000; }
        section[style*="--foreground"] .section-label::before,
        section[style*="--foreground"] .p-kicker::before { color: var(--aimax-yellow); }
        .p-porta2--aiact .p-porta2-eti::before { color: var(--aimax-blue); }
        .p-porta2--aiact .p-porta2-eti { color: var(--aimax-blue); }
        .section-header .section-label { margin-bottom: 1rem; }
        .hero-badge { font-size: .75rem; letter-spacing: .08em; margin-bottom: 1.6rem; }
        .p-ruolo-come { border: 2px solid #000; border-radius: 999px; background: #fff;
                        font: 700 .78rem/1 var(--font-heading); padding: .4rem .7rem; }

        /* --- hero: due voci e l'evidenziatore --- */
        .hero { padding-top: clamp(3rem, 6vw, 4.5rem); }
        .hero h1 { font-weight: 400; font-size: clamp(1.35rem, 2.4vw, 2.125rem); line-height: 1.2;
                   letter-spacing: 0; margin-bottom: 1.5rem; }
        .hero h1 br { display: none; }
        .hero h1 strong { display: block; font-weight: 700; font-size: clamp(2.2rem, 4.4vw, 4rem);
                          line-height: 1.08; letter-spacing: -.01em; margin-top: .35em; text-wrap: balance; }
        .hero h1 mark { background: #000; color: var(--aimax-yellow); padding: .04em .22em; border-radius: 4px; }
        .p-porta2--aiact { box-shadow: 6px 6px 0 var(--aimax-blue); }
        .p-riga-io { color: #1a1a1a; }
        .p-riga-io a { box-shadow: inset 0 -3px 0 #000; text-decoration: none; }

        /* --- loghi --- */
        .logo-bar .container { text-align: center; }
        .logo-bar .section-label { display: inline-flex; width: auto; margin-bottom: 2rem; }
        .logo-marquee { -webkit-mask-image: none; mask-image: none; margin-top: 0; }
        .logo-marquee-track { gap: 4rem; }
        .logo-marquee .logo-slot { height: 40px; }

        /* --- come stanno le cose: il "dopo" vince apposta --- */
        .p-prova--box { align-items: stretch; }
        .p-box--dopo { transform: translate(12px, -12px); box-shadow: 8px 8px 0 #fff; }

        /* --- perché adesso: una frase sola, evidenziata come i pulsanti --- */
        .p-claim { max-width: 1000px; margin: 3.2rem auto 0; text-align: center;
                   font: 700 clamp(1.3rem, 3vw, 2.2rem)/1.45 var(--font-heading);
                   letter-spacing: -.02em; color: #000; text-wrap: balance; }
        .p-claim--hl { margin-top: .5em; line-height: 1.6; }
        .p-claim--hl b { padding: 0 .14em; font-weight: 700;
                         background: linear-gradient(to top, var(--aimax-yellow) .58em, transparent .58em);
                         box-decoration-break: clone; -webkit-box-decoration-break: clone; }
        @media (max-width: 640px) { .p-claim { margin-top: 2.2rem; font-size: 1.3rem; }
                                    .p-claim--hl { margin-top: .55em; } }

        /* --- i corsi: quattro livelli invece di sei, il nome del corso come piede --- */
        .p-ruolo-eti { display: none; }
        .p-ruolo-ico { order: -2; background: #000; color: #fff; }
        .p-ruolo--base .p-ruolo-ico { background: #fff; color: #000; }
        .p-ruolo-come { order: -1; margin: 1rem 0 .8rem; }
        .p-ruolo h3 { font-size: 1.3rem; margin-bottom: .6rem; }
        .p-ruolo p { font-size: 1rem; color: #000; }
        .p-ruolo-corsi a, .p-ruolo-corsi span {
          font: 700 .95rem/1.25 var(--font-heading); background: transparent; color: #000;
          padding: .45rem 0; border-radius: 0; box-shadow: inset 0 -3px 0 #000; }
        .p-ruolo-corsi a:hover { background: transparent; color: #000; box-shadow: inset 0 -1.2em 0 var(--aimax-yellow); }
        .p-ruolo--base .p-ruolo-corsi a { background: transparent; }
        .p-ruoli { margin-top: 2rem; }

        /* --- il tutor: Virgola a grandezza reale, la virgola in filigrana --- */
        .virgola-sprite-intro { display: none; }
        .virgola-showcase-chat { position: relative; overflow: visible; margin-top: 3.5rem; }
        .virgola-showcase-chat .virgola-sprite {
          position: absolute; left: -84px; top: -118px; z-index: 2;
          width: 192px; height: 208px; background-size: 1152px 208px;
          animation: virgola-sprite-6-xl 1.8s steps(6) infinite; }
        @keyframes virgola-sprite-6-xl { from { background-position-x: 0; } to { background-position-x: -1152px; } }
        #tutor .az-hero > div:first-child { position: relative; z-index: 0; }
        #tutor .az-hero > div:first-child::before {
          content: ","; position: absolute; left: -.1em; top: -.5em; z-index: -1; pointer-events: none;
          font: 700 22rem/1 var(--font-heading); color: #e6b31f; }
        @media (prefers-reduced-motion: reduce) { .virgola-showcase-chat .virgola-sprite { animation: none; } }

        /* --- chi l'ha già fatto: colonne, righe nere, la virgoletta adesiva --- */
        .az-tessere { grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 2.5rem; border-top: 3px solid #000; }
        .az-tessera { border: 0; border-right: 3px solid #000; border-radius: 0; box-shadow: none;
                      background: transparent; padding: 2rem 2rem 1.5rem; }
        .az-tessera:last-child { border-right: 0; }
        .az-tessera::before { content: "\201C"; display: block; margin-bottom: .5rem;
                              font: 700 4.5rem/.6 var(--font-heading); color: var(--aimax-yellow);
                              -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
        .p-voce-testo { font-size: 1.1rem; font-weight: 500; line-height: 1.5; color: #000; }
        .p-voce-chi { border-top: 2px solid #000; color: #000; }
        .p-facsimile-avviso { display: table; margin: 0 auto 1.8rem; transform: rotate(-1deg);
                              background: var(--aimax-yellow); border: 2px solid #000; box-shadow: 3px 3px 0 #000;
                              font: 700 .78rem/1.4 var(--font-heading); color: #000; padding: .5rem .9rem; max-width: 720px; }

        /* --- il nostro team: la foto pesa quanto deve, gli avatar parlano il dialetto di Max --- */
        .az-max { grid-template-columns: 240px 1fr; gap: 3rem; max-width: 900px; }
        .az-max img { width: 240px; height: 240px; border-width: 3px; box-shadow: 10px 10px 0 var(--aimax-yellow); }
        .az-max h3 { font-size: 1.75rem; }
        .az-max p { color: #000; font-size: 1.06rem; max-width: 56ch; }
        .az-persona-avatar { border-radius: 0; width: 104px; height: 104px; border-width: 3px;
                             background: #f3f3f3 !important; color: #000; box-shadow: 6px 6px 0 var(--aimax-yellow); }

        /* --- domande: regola home-specifica esclusa qui, landing-ai-act usa il marquee, non la griglia --- */
        #domande .section-title { font-size: clamp(2rem, 3.2vw, 2.75rem); }
        .p-domande { grid-template-columns: 1fr; gap: 0; margin-top: 0; border-top: 3px solid #000; }
        .p-domanda { border-left: 0; border-bottom: 3px solid #000; padding: 1.4rem 0; }
        .p-domanda p { font-size: 1rem; color: #000; }

        /* --- il primo passo: il climax --- */
        #preventivo .section-title { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.05; }
        #preventivo .p-cta-coda { margin-top: 2.4rem; }
        #preventivo .p-coda-passi { display: flex; flex-wrap: wrap; justify-content: center;
                                    max-width: 1000px; margin: 1.6rem auto 0; padding: 0;
                                    font: 400 .88rem/1.6 var(--font-heading); letter-spacing: -.01em;
                                    color: rgba(255,255,255,.6); }
        #preventivo .p-coda-passi span { padding: 0 .85rem; }
        #preventivo .p-coda-passi span:not(:last-child)::after { content: "\00b7"; margin-left: .85rem;
                                    color: var(--aimax-yellow); font-weight: 700; }
        @media (max-width: 700px) {
          #preventivo .p-coda-passi { flex-direction: column; align-items: center; text-align: center;
                                      gap: .5rem; margin-top: 1.8rem; }
          #preventivo .p-coda-passi span { padding: 0; }
          #preventivo .p-coda-passi span:not(:last-child)::after { content: none; } }
        #preventivo .btn-primary { font-size: 1.05rem; padding: 1.25rem 2.5rem; box-shadow: 8px 8px 0 #fff; }
        #preventivo .btn-primary:hover { box-shadow: 4px 4px 0 #fff; }

        /* --- footer --- */
        .footer { padding: 3rem 0 2rem; border-top-width: 3px; }
        .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; padding-bottom: 2rem; border-bottom-width: 3px; }
        .footer-brand .logo { height: 44px; }
        .footer-brand p { color: #000; max-width: 34ch; }
        .footer h4 { letter-spacing: .08em; }
        .footer-links a { font: 700 .8rem/1 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; }
        .footer-beta { display: table; margin: 1.5rem auto 0; padding: .5rem .9rem; background: #fff; border: 2px solid #000;
                       border-radius: 0; color: #000; font: 700 .78rem/1.4 var(--font-heading); }

        /* --- mobile --- */
        @media (max-width: 820px) { .p-box--dopo { transform: none; } }
        @media (max-width: 900px) {
          .virgola-showcase-chat .virgola-sprite { left: -12px; top: -96px; width: 144px; height: 156px;
                                                   background-size: 864px 156px; animation-name: virgola-sprite-6-md; }
          #tutor .az-hero > div:first-child::before { font-size: 14rem; } }
        @keyframes virgola-sprite-6-md { from { background-position-x: 0; } to { background-position-x: -864px; } }
        @media (max-width: 760px) { .az-tessere { grid-template-columns: 1fr; }
                                    .az-tessera { border-right: 0; border-bottom: 3px solid #000; } }
        @media (max-width: 640px) {
          .hero { padding-top: 2.5rem; }
          .hero-badge { font-size: .68rem; letter-spacing: .06em; }
          .hero h1 { font-size: 1.15rem; }
          .hero h1 strong { font-size: 2.2rem; }
          .p-porte { gap: 1rem; margin-top: 1.8rem; }
          .p-porta2 { padding: 1.1rem 1.1rem 1rem; }
          .p-porta2-ico { width: 36px; height: 36px; }
          .p-porta2 h3 { font-size: 1.1rem; }
          .p-porta2 p { margin-bottom: .9rem; }
          .p-motivo { grid-template-columns: 56px 1fr; gap: 1rem; }
          .p-motivo::before { font-size: 2.4rem; }
          .p-ruoli { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
                     padding: .5rem 1.5rem 1.25rem; margin: 1.6rem -1.5rem 0; scrollbar-width: none; }
          .p-ruoli::-webkit-scrollbar { display: none; }
          .p-ruolo { flex: 0 0 82vw; scroll-snap-align: start; }
          .ux-navbar-voci a:not([aria-current="true"]) { display: none; }
          .ux-navbar-cta { border-radius: 14px; box-shadow: 4px 4px 0 #000; }
          .ux-su { display: none !important; }
          .az-max { grid-template-columns: 1fr; gap: 1.2rem; text-align: left; justify-items: start; }
          .az-max img { width: 132px; height: 132px; box-shadow: 6px 6px 0 var(--aimax-yellow); }
          .az-max h3 { font-size: 1.15rem; }
          .az-team { grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 2rem; }
          .az-persona-avatar { width: 60px; height: 60px; font-size: 1rem; box-shadow: 4px 4px 0 var(--aimax-yellow); }
          .az-persona h3 { font-size: .85rem; }
          .az-persona-quote { font-size: .78rem; }
          .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; text-align: left; }
          .footer-brand { grid-column: 1 / -1; }
          .logo-marquee .logo-slot { height: 30px; }
          .logo-marquee .logo-slot img { max-width: 110px; }
          .logo-marquee-track { gap: 2rem; }
        }

        /* --- correzioni dopo la prima resa --- */
        .section-label--pill, .logo-bar .section-label { background: transparent !important; color: inherit !important; border: 0; padding: 0; }
        .p-motivo::before { grid-row: 1 / span 2; grid-column: 1; align-self: start; }
        .p-motivo h3, .p-motivo p { grid-column: 2; }
        .p-motivo h3 { grid-row: 1; }
        .p-motivo p { grid-row: 2; }
        .p-motivo { row-gap: .3rem; }
        .p-ruolo-come { white-space: nowrap; }
        .virgola-showcase-chat .virgola-sprite { left: -124px; top: -136px; }
        /* L'offset delle ancore non si ridichiara qui: --header-h ha gia' la sua
           variante mobile in style.css, e una copia locale tornerebbe a divergere. */
        @media (max-width: 900px) { .virgola-showcase-chat .virgola-sprite { left: -16px; top: -104px; } }

        /* ======================================================================
           RIFINITURE (11/09/2026, sera) - allineamenti, i due menu, la virgola a sinistra,
           l'evidenziatore sui titoli, le strisce di servizio.
           ====================================================================== */

        /* --- i due menu parlano la stessa lingua: Space Mono, stessa misura, stessi margini --- */
        .nav-links li:has(> .lang-switcher:empty) { display: none; }   /* toglieva 24px al bordo destro */
        .ux-navbar-inner { padding-left: var(--space-md); padding-right: var(--space-md); min-height: 60px; }
        .ux-navbar-voci { gap: .5rem; }
        .ux-navbar-voci a { font-family: var(--font-heading); font-size: .8125rem; font-weight: 700;
                            letter-spacing: 0; padding: .8rem .5rem; border-bottom-width: 3px; }
        .ux-navbar-cta { font-family: var(--font-heading); font-size: .78rem; font-weight: 700;
                         letter-spacing: 0; border-width: 3px; border-radius: var(--r);
                         box-shadow: var(--ombra-btn); padding: .65rem 1.1rem; margin-left: 1.25rem; }
        .ux-navbar-cta:hover { transform: translate(2px, 2px); box-shadow: var(--ombra-btn-hover); }
        .ux-navbar-cta:active { transform: translate(4px, 4px); box-shadow: none; }

        /* --- l'evidenziatore: lo stesso segno della hero, anche sui titoli scuri su fondo chiaro --- */
        .section-title mark, .hero h1 mark, .az-fatto h3 mark {
          background: #000; color: var(--aimax-yellow); padding: .06em .22em;
          border-radius: 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
        section[style*="--foreground"] .section-title mark { background: var(--aimax-yellow); color: #000; }
        /* 12/09/2026 (Isabella) - "Alfabetizzazione"/"Registro interno" stanno su sfondo
           nero (.az-scuro, impostato via classe, non via style inline: l'attributo
           section[style*="--foreground"] sopra non li intercetta). Stessa inversione
           fatta dalla home per i titoli scuri su sfondo scuro: box giallo, testo nero. */
        .az-scuro .az-fatto h3 mark { background: var(--aimax-yellow); color: #000; }
        /* 12/09/2026 (Isabella) - stesso motivo: la virgola davanti a "Cosa chiede davvero"
           e' nera per via della regola generale, invisibile sul nero di .az-scuro. Qui va
           gialla, come le altre etichette su sfondo scuro. */
        .az-scuro .section-label--pill::before { color: var(--aimax-yellow); }

        /* --- la virgola in filigrana: a sinistra del blocco, grande abbastanza da leggersi --- */
        #tutor .az-hero > div:first-child::before { font-size: 24rem; left: -.10em; top: -.72em; color: #e0a70c; }
        @media (max-width: 900px) { #tutor .az-hero > div:first-child::before { font-size: 13rem; left: -.08em; top: -.68em; } }

        /* --- la barra che compare e' la stessa barra del sito, compattata: stesso marchio a sinistra --- */
        .ux-navbar-inner::before { content: "AI, MAX"; flex: none; margin-right: 1.5rem;
                                   font: 700 .9rem/1 var(--font-heading); color: #000; letter-spacing: -.02em; }
        @media (max-width: 900px) { .ux-navbar-inner::before { display: none; } }

        /* --- team: le persone incolonnate con la foto di Max, non centrate per conto loro --- */
        .az-persona { text-align: left; }
        .az-persona-avatar { margin-left: 0; }
        .az-team { max-width: 900px; margin-left: auto; margin-right: auto; }

        /* --- strisce di servizio sotto le card dei corsi: un solo componente --- */
        .p-striscia { display: flex; align-items: center; gap: 1.2rem; max-width: 980px; margin: 1.6rem auto 0;
                      background: #fff; border: var(--bordo) solid #000; border-radius: var(--r);
                      padding: 1rem 1.4rem; box-shadow: var(--ombra-card); }
        .p-striscia + .p-striscia { margin-top: 1rem; }
        .p-striscia p { margin: 0; flex: 1; font-size: .95rem; line-height: 1.45; }
        .p-striscia .btn { flex: none; border-width: 2px; box-shadow: none; }
        .p-striscia .btn:hover { transform: none; box-shadow: none; background: #f2f2f2; }
        .p-striscia-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #000; color: #fff;
                          display: flex; align-items: center; justify-content: center; }
        .p-striscia-act img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #000; object-fit: cover; flex: none; }
        .p-striscia-act { box-shadow: 6px 6px 0 var(--aimax-blue); }
        .p-ruoli + .p-striscia { margin-top: 2rem; }

        /* --- allineamenti che a occhio non si vedono ma si sentono --- */
        /* i piedi delle card dei corsi: la riga di separazione alla stessa altezza in tutte e quattro */
        .p-ruolo-corsi { margin-top: auto; min-height: 4.1rem; align-items: flex-start; }
        /* le attribuzioni delle testimonianze: le righe sopra i nomi devono stare alla stessa
           altezza anche se una citazione e' piu' lunga. Subgrid: le tre tessere condividono le righe. */
        .az-tessere { grid-template-rows: auto 1fr auto; }
        .az-tessera { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
        .p-voce-testo { margin-bottom: 1.3rem; }
        .p-voce-chi { align-self: end; }
        /* i tre passi della chiusura: numeri incolonnati anche a due cifre */
        .p-passo-n { min-width: 2ch; text-align: right; }

        /* --- footer: le due voci del piede sulla stessa riga di base --- */
        .footer-bottom { align-items: baseline; }
        /* la voce "Preventivo" e' gia' il pulsante a destra: nella barra sarebbe doppia */
        .ux-navbar-voci a[data-va="preventivo"] { display: none; }
        /* su telefono il titolo con l'evidenziatore non deve spezzare la parola evidenziata */
        @media (max-width: 640px) { .section-title mark { padding: .04em .18em; } .section-title { text-wrap: balance; } }

        /* ======================================================================
           L'OMINO SOPRA "DENTRO" (11/09/2026, sera) - la mascotte esce dall'angolo della chat
           e va sopra il titolo, incolonnata con la D. La virgola in filigrana sparisce: nello
           stesso posto erano due segni per la stessa cosa.
           ====================================================================== */
        .virgola-showcase-chat .virgola-sprite { display: none; }
        #tutor .az-hero > div:first-child { position: relative; }
        #tutor .az-hero > div:first-child > .virgola-sprite {
          position: absolute; left: 295px; top: -186px; z-index: 1;   /* centro a 379px = mezzeria di "lezione" */
          width: 168px; height: 182px; background-size: 1008px 182px;
          animation: virgola-sprite-6-lg 1.8s steps(6) infinite; }
        @keyframes virgola-sprite-6-lg { from { background-position-x: 0; } to { background-position-x: -1008px; } }
        /* su telefono lo spazio sopra il titolo non c'e': l'omino torna nel flusso e spinge il testo,
           cosi' resta dentro la sezione invece di sconfinare sopra il bordo */
        @media (max-width: 900px) {
          #tutor .az-hero > div:first-child > .virgola-sprite {
            position: static; margin: 0 0 .6rem -4px; width: 120px; height: 130px;
            background-size: 720px 130px; animation-name: virgola-sprite-6-sm; } }
        @keyframes virgola-sprite-6-sm { from { background-position-x: 0; } to { background-position-x: -720px; } }
        @media (prefers-reduced-motion: reduce) { #tutor .virgola-sprite { animation: none; } }

        /* 12/09/2026 (Max, sessione copy) - il team: quattro persone vere, stessa card per tutti.
           Max per primo ma non piu' grande degli altri. Sta in coda cosi' vince sulle regole
           .az-team / .az-persona scritte sopra per i tre placeholder.
           13/09/2026 (Max) - copiato a mano dalla home insieme alla sezione #chi-sono: le due
           copie restano identiche finche' il team non diventa un include (vedi LEGGIMI). */
        .az-team--quattro { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; max-width: 1100px; margin-top: 2rem; }
        .az-team--quattro .az-persona { display: flex; flex-direction: column; text-align: left; }
        .az-persona-foto { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%;
                           margin: 0 0 1rem; border: 4px solid #000; box-shadow: 6px 6px 0 #000; }
        .az-team--quattro .az-persona h3 { font-size: 1.05rem; margin: 0 0 .15rem; }
        .az-team--quattro .az-persona-ruolo { margin: 0 0 .6rem; }
        .az-team--quattro .az-persona-bio { font-size: .92rem; line-height: 1.55; color: #000; margin: 0; }
        .az-team--quattro .az-persona-placeholder-tag { align-self: flex-start; }
        /* 13/09/2026 (Max) - il profilo LinkedIn chiude la card; margin-top:auto lo allinea in fondo
           fra le quattro, anche con bio di lunghezza diversa */
        .az-persona-linkedin { align-self: flex-start; margin-top: auto; padding-top: .9rem; font-size: .85rem; font-weight: 700;
                               color: #000; text-decoration: underline; text-decoration-color: var(--aimax-yellow);
                               text-decoration-thickness: 3px; text-underline-offset: 3px; }
        @media (max-width: 980px) { .az-team--quattro { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 560px) { .az-team--quattro { grid-template-columns: 1fr; max-width: 380px; } }