/* Lo stile che stava dentro a `index.html` (25 KB di `<style>` in pagina).
   Portato qui il 2026-09-16: in pagina lo riscaricava ogni visita insieme
   all'HTML, qui lo tiene in cache il browser. Va caricato DOPO wiki.css,
   che è l'ordine che aveva quando stava in pagina: qui dentro ci sono i
   ritocchi alla hero del tema, e devono vincere loro. */

.my-float{
        margin-top:16px;
    }

    .float{
        position:fixed;
        width:60px;
        height:60px;
        bottom:40px;
        right:40px;
        background-color:#25d366;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        font-size:30px;
        box-shadow: 2px 2px 3px #999;
        z-index:100;
    }

    .float-icon {
        margin-top: 16px;
    }

    .float-corsi{
        position:fixed;
        bottom:40px;
        right:40px;
        background-color:#000000;
        color:#ffffff;
        border-radius:50px;
        padding: 12px 24px;
        text-align:center;
        font-size:14px;
        font-weight:600;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        z-index:100;
        text-decoration:none;
        display:inline-block;
        line-height:1.5;
        transition: all 0.3s ease;
    }

    .float-corsi:hover {
        background-color:#333333;
        color:#ffffff;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    }

    @media (max-width: 768px) {
        .float-corsi {
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            font-size: 13px;
        }
    }

    @media (max-width: 480px) {
        .float-corsi {
            bottom: 15px;
            right: 15px;
            padding: 8px 16px;
            font-size: 12px;
        }
    }

    .btn-brand-red {
        background-color: #c2001c !important;
        border-color: #c2001c !important;
        color: #ffffff !important;
        transition: background-color .3s ease, border-color .3s ease;
    }
    /* ⚠️ Col mouse sopra i tasti non si scambiano il colore (2026-09-03,
       segnalato in una revisione della home). Prima il rosso diventava nero e i
       due neri diventavano rossi: si incrociavano, e il tasto principale perdeva
       forza proprio mentre lo si stava puntando. Adesso il rosso si scurisce e
       resta rosso, i neri restano neri e si schiariscono. Ogni tasto va nella
       propria direzione. */
    .btn-brand-red:hover,
    .btn-brand-red:focus {
        background-color: #960015 !important;
        border-color: #960015 !important;
        color: #ffffff !important;
    }

    /* I .btn-dark altrimenti su :hover ereditano lo sfondo bianco della card
       (regola .btn:hover { background-color: inherit } del tema). Li portiamo al rosso brand. */
    .btn.btn-dark:hover,
    .btn.btn-dark:focus,
    .btn.btn-dark:active {
        background-color: #3a3f4a !important;
        border-color: #3a3f4a !important;
        color: #ffffff !important;
    }

    .faq-item {
        background: #fff;
        border: 1px solid #ececec;
        border-radius: 12px;
        margin-bottom: 14px;
        overflow: hidden;
        box-shadow: 0 4px 18px rgba(0,0,0,.04);
    }
    .faq-item summary {
        cursor: pointer;
        list-style: none;
        padding: 20px 26px;
        font-weight: 600;
        font-size: 1.05rem;
        color: #262b35;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
        content: '+';
        color: #c2001c;
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1;
        flex-shrink: 0;
        transition: transform .2s ease;
    }
    .faq-item[open] summary::after { content: '\2212'; }
    .faq-item .faq-body {
        padding: 0 26px 22px;
        color: rgba(17,24,39,.72);
        line-height: 1.7;
        font-size: .98rem;
    }

    /* ── Federico Boggia Academy (pannello scuro nella sezione Formazione) ── */
    /* Le 303 righe del pannello nero `fba` stavano qui, ed erano CSS in
       linea, cioè peso scaricato a ogni apertura della home. Levate il
       2026-09-03 insieme al pannello: la card dell'Academy adesso è
       `fb-manifesto--academy` e sta in wiki/wiki.css?v=1789576468, con tutti gli altri
       blocchi del sito.
       ⚠️ Erano 29 regole `fba-*` e ne era rimasta viva **una**,
       `fba-eyebrow`, che si chiama `fb-manifesto-occhio` ed è nel foglio
       condiviso. Le altre 28 (le due colonne, le pastiglie, i tre passi,
       la finestra a clic) non le usava più nessuno.
       Il markup e il CSS vecchi stanno in
       `_archivio/workshop-2026-09-02/home-pannello-academy-scuro.html`. */

    /* ── Menu fisso in alto: assente sulla hero, compare dalla seconda sezione in giù ── */
    .sticky-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1020;
        background: rgba(14,15,18,.94);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(255,255,255,.10);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform .35s ease, opacity .3s ease, visibility .3s ease;
    }
    .sticky-nav.is-visible { transform: translateY(0); opacity: 1; visibility: visible; }
    .sticky-nav-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        gap: 18px;
        min-width: 0;
    }
    .sticky-nav-brand {
        flex-shrink: 0;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.2px;
        color: #fff !important;
        text-decoration: none;
    }
    .sticky-nav-links {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-left: auto;
        min-width: 0;
    }
    .sticky-nav-links a {
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
        color: rgba(255,255,255,.78) !important;
        text-decoration: none;
        padding: 4px 0;
        border-bottom: 2px solid transparent;
        transition: color .2s ease, border-color .2s ease;
    }
    .sticky-nav-links a:hover,
    .sticky-nav-links a:focus { color: #fff !important; border-bottom-color: #c2001c; }
    .sticky-nav-cta {
        flex-shrink: 0;
        background: #c2001c;
        color: #fff !important;
        font-size: 13px;
        font-weight: 700;
        padding: 9px 18px;
        border-radius: 50px;
        text-decoration: none;
        transition: background .25s ease, transform .25s ease;
    }
    .sticky-nav-cta:hover, .sticky-nav-cta:focus { background: #fff; color: #0e0f12 !important; transform: translateY(-1px); }
    @media (max-width: 767px) {
        .sticky-nav-inner { padding: 8px 14px; gap: 12px; }
        .sticky-nav-brand { display: none; }
        .sticky-nav-links {
            gap: 18px;
            margin-left: 0;
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }
        .sticky-nav-links::-webkit-scrollbar { display: none; }
        .sticky-nav-cta { padding: 8px 15px; font-size: 12px; }
    }
    /* le ancore del menu fisso non finiscono sotto la barra */
    #academy, #articoli, #formazione, #blog, #consulenza { scroll-margin-top: 90px; }

    /* badge tipo pubblicazione (saggio, articolo, libro) nella sezione Pubblicazioni */
    .pub-badge {
        display: inline-block;
        background-color: #c2001c;
        color: #fff;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 11px;
        letter-spacing: .5px;
        line-height: 1;
        padding: 7px 12px;
        border-radius: 50px;
    }

    /* ---- La hero sta sotto la barra bianca, non dietro ----
       `.full-screen` del tema vale 100vh, ma la barra del sito è `position: sticky`
       e quindi occupa spazio sua: sommate fanno 100vh + l'altezza della barra, cioè
       in fondo alla prima schermata resta una striscia da scrollare per niente.
       I 53px sono la barra: 34 di logo + .55rem di padding sopra e sotto + 1 di
       bordo (vedi `nav.wiki-site-nav` in wiki/wiki.css?v=1789576468). Sotto i 992px non serve:
       lì la hero diventa alta quanto il contenuto (regola qui sotto). */
    @media (min-width: 992px) {
        #home.full-screen { height: calc(100vh - 53px) !important; }
    }

    /* ---- I due bottoni della hero ----
       Sono gli `fb-btn` del sito, quelli che Federico ha scelto il 2026-08-17
       («per la hero i tasti mi piacciono così»): pastiglia con l'icona davanti,
       misura `--lg`, affiancati. Qui i colori sono girati, perché il fondo è
       già rosso: il primo è bianco pieno con la scritta scura, il secondo è
       vuoto col bordo bianco. Senza queste righe `fb-btn` esce rosso su rosso. */
    #home .fb-actions { margin-top: 2rem; gap: .85rem; }
    #home .fb-btn {
        background: #fff;
        border: 2px solid #fff;
        color: var(--wiki-dark) !important;
        box-shadow: 0 12px 26px rgba(0,0,0,.18);
    }
    #home .fb-btn:hover {
        color: var(--wiki-dark) !important;
        box-shadow: 0 16px 34px rgba(0,0,0,.26);
    }
    #home .fb-btn--ghost {
        background: transparent;
        border: 2px solid rgba(255,255,255,.6);
        color: #fff !important;
        box-shadow: none;
    }
    #home .fb-btn--ghost:hover {
        background: rgba(255,255,255,.14);
        border-color: #fff;
        color: #fff !important;
        box-shadow: none;
    }
    /* Da 992px in su stanno in fila, e per starci il fianco della pastiglia si
       stringe un po': `fb-btn--lg` ha 2,2rem di padding, che con due scritte
       lunghe dentro a `col-xl-7` non ci entrano. Sotto i 992 comanda la regola
       del telefono qui sotto, che li fa larghi quanto lo schermo. */
    @media (min-width: 992px) {
        #home .fb-actions { flex-wrap: nowrap; }
        #home .fb-btn--lg { padding: 1rem 1.5rem; font-size: 1.04rem; }
        /* La scritta non va a capo dentro alla pastiglia, e la pastiglia non si
           fa stringere: senza queste due righe il flex spezzava «Guarda i
           workshop in aula» su due righe. Solo da 992 in su: sul telefono i
           bottoni sono larghi quanto lo schermo, e lì il testo deve poter
           andare a capo, sennò sborda dallo schermo. */
        #home .fb-btn { white-space: nowrap; flex: 0 0 auto; }
    }
    @media (min-width: 1400px) {
        #home .fb-btn--lg { padding: 1rem 2.2rem; font-size: 1.08rem; }
    }

    /* ---- La foto sta dentro la hero ----
       Il tema la mette larga il 55% della colonna e 100px sotto il bordo, così
       la sagoma veniva tagliata dall'`overflow-hidden`. Ora la larghezza è
       legata anche all'altezza della finestra (`62vh`, che su un ritratto
       1200×1600 fa circa 83vh di altezza): la foto rimpicciolisce da sé sugli
       schermi bassi invece di sbordare, e appoggia sul fondo della sezione. */
    @media (min-width: 992px) {
        #home .row > .position-absolute {
            width: min(38%, 62vh) !important;
            right: 2% !important;
            bottom: 0 !important;
        }
    }

    /* ---- Il rientro della scaletta ----
       `ps-20` del tema è `padding-left: 20%`, e sotto i 1200px sono 120-130px
       che mancano ai due bottoni per stare in fila: si allargavano sopra la
       foto. Il rientro resta alla riga «Boggia» (è la scaletta della hero), il
       blocco del testo si allinea a «Federico». Sul telefono serviva comunque:
       su 390px il rientro lasciava alla presentazione una colonna da 288px. */
    @media (max-width: 1199px) {
        #home div.ps-20 { padding-left: 0 !important; }

        /* La freccia di fianco al nome: da 1200px in giù «Federico» a 150px è
           già larga quanto la sua colonna, quindi la freccia andava a capo e
           restava sospesa da sola su una riga sua, in mezzo alla hero. È un
           fregio: dove non ci sta, si toglie. */
        #home h1 .bi-arrow-up-right { display: none; }
    }

    /* ---- Hero: sotto i 992px si impila ----
       Testo, pulsanti e foto uno sotto l'altro invece che sovrapposti.
       Il limite è 992px e non 767px perché la colonna del testo è `col-lg-8`:
       sotto quella soglia Bootstrap la porta a tutta larghezza, e la foto,
       che è in `position: absolute`, le finisce sopra. Su iPad copriva la
       riga di presentazione e i due pulsanti. */
    @media (max-width: 991px) {
        #home {
            height: auto !important;
            min-height: 0 !important;
            padding: 2.5rem 0 0 !important;
        }
        #home .container { height: auto !important; }
        #home .row {
            flex-direction: column !important;
            height: auto !important;
            align-items: stretch !important;
        }
        /* La pastiglia non sale sopra il nome. Il tema la tira su di 20px
           (`sm-top-minus-20px`) perché si infili sotto la pancia delle lettere:
           sul telefono il nome è alto 90px e quei 20px finiscono sopra le
           code di «gg», che è l'unica riga di testo che si legge male. */
        #home .top-minus-40px { top: 0 !important; }

        @media (max-width: 575px) {
            #home h1 span.ps-20 { padding-left: 10% !important; }
        }


        /* la foto (atropos) rientra nel flusso, sotto i pulsanti, senza coprire il testo */
        #home .row > .position-absolute {
            position: static !important;
            width: 100% !important;
            /* 280px e non 340: sul telefono la foto deve stare in una schermata
               insieme al nome e ai due bottoni, senza spingere la striscia dei
               fatti fuori dal primo scorrimento. */
            max-width: 280px;
            margin: 1.5rem auto 0 !important;
            bottom: auto !important;
            right: auto !important;
            left: auto !important;
            transform: none !important;
        }
        /* azzera parallax/atropos: senza questo la foto risale sui pulsanti */
        #home .row > .position-absolute .atropos,
        #home .row > .position-absolute .atropos-scale,
        #home .row > .position-absolute .atropos-rotate,
        #home .row > .position-absolute img {
            transform: none !important;
        }
        #home .row > .position-absolute img {
            max-width: 100% !important;
            height: auto !important;
        }

        /* Su tablet c'è spazio: la foto sta più larga di quella del telefono. */
        @media (min-width: 768px) {
            #home .row > .position-absolute { max-width: 400px; }
        }
    }


    /* ── Consulenza · le due aziende (sezione 10) ────────────────────────
       Due schede CHIARE, una per azienda. Chiare di proposito: la sezione
       Formazione ha già il pannello nero dell'Academy, e due blocchi scuri
       nella stessa pagina si leggono come lo stesso blocco ripetuto.
       Ogni scheda porta il colore della sua insegna in `--cons-accent`,
       scritto sull'elemento: l'indigo di Binatomy (--bn-indigo di
       del foglio della wiki) e il coral di Koral. Non il rosso di Federico: sono altre
       due insegne, e si deve vedere al primo sguardo che lo sono. */
    .cons-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
    @media (max-width: 991px) { .cons-grid { grid-template-columns: 1fr; gap: 22px; } }
    .cons-card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid rgba(17,24,39,.09);
        border-radius: 24px;
        padding: 40px 38px 36px;
        box-shadow: 0 20px 46px rgba(17,24,39,.08);
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    @media (max-width: 575px) { .cons-card { padding: 30px 24px 28px; } }
    @media (hover: hover) {
        .cons-card:hover {
            transform: translateY(-4px);
            border-color: color-mix(in srgb, var(--cons-accent) 40%, transparent);
            box-shadow: 0 28px 60px color-mix(in srgb, var(--cons-accent) 18%, rgba(17,24,39,.10));
        }
    }
    /* Il logo è quello vero delle due aziende: Binatomy come file
       (`images/logo-binatomy.svg`, tutti tracciati), Koral scritto qui
       dentro la pagina. Koral NON si mette in un `<img>`: il suo
       marchio ha la parola in Instrument Serif, e un SVG caricato come
       immagine non vede i font della pagina, quindi ripiegherebbe sul
       serif di sistema. Scritto qui, il carattere è quello giusto. */
    .cons-logo {
        display: flex;
        align-items: center;
        height: 42px;
        margin-bottom: 24px;
        color: #111827;
    }
    /* Le due altezze non sono uguali perché i due marchi non sono fatti
       uguali: in Binatomy la parola riempie tutto il logo, in Koral sopra
       c'è il ramo di corallo, che si mangia metà dell'altezza. A parità di
       misura la parola «Koral» verrebbe la metà di «Binatomy»: qui sono
       scelte perché le due parole risultino alte uguali. */
    .cons-logo img { height: 32px; width: auto; display: block; }
    .cons-logo svg { height: 42px; width: auto; display: block; }
    .cons-kicker {
        display: block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--cons-accent);
        margin-bottom: 10px;
    }
    .cons-title {
        font-size: 27px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: -.5px;
        color: #111827;
        margin: 0 0 10px;
    }
    @media (max-width: 575px) { .cons-title { font-size: 23px; } }
    .cons-claim {
        font-size: 17px;
        font-weight: 600;
        color: var(--cons-accent);
        line-height: 1.5;
        margin: 0 0 16px;
    }
    .cons-text {
        color: rgba(17,24,39,.74);
        font-size: 1rem;
        line-height: 1.75;
        margin: 0 0 22px;
    }
    /* Sottolineato staccato invece del solito link colorato: qui dentro
       il colore della scheda è già quello del claim e dei pallini, e un
       terzo pezzo colorato in mezzo a un paragrafo si legge come un
       errore di stile. Il colore arriva solo passandoci sopra. */
    .cons-text a {
        color: inherit;
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, var(--cons-accent) 55%, transparent);
        text-underline-offset: 3px;
        text-decoration-thickness: 1.5px;
        transition: color .2s ease, text-decoration-color .2s ease;
    }
    .cons-text a:hover {
        color: var(--cons-accent);
        text-decoration-color: var(--cons-accent);
    }
    .cons-foot { margin-top: auto; }
    .cons-btn {
        display: block;
        text-align: center;
        border-radius: 50px;
        padding: 14px 22px;
        font-weight: 600;
        font-size: .98rem;
        text-decoration: none;
        background: var(--cons-accent);
        color: #fff !important;
        box-shadow: 0 10px 24px color-mix(in srgb, var(--cons-accent) 30%, transparent);
        transition: transform .2s ease, box-shadow .2s ease;
    }
    .cons-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 32px color-mix(in srgb, var(--cons-accent) 38%, transparent);
        color: #fff !important;
    }
    .cons-note {
        font-size: .85rem;
        color: rgba(17,24,39,.55);
        margin: 14px 0 0;
        text-align: center;
    }
    .cons-note a { color: var(--cons-accent); font-weight: 600; }


    /* ── Le uscite di sezione (2026-08-31) ──────────────────────────────
       Cinque sezioni della home non avevano nessun richiamo: chi finiva di
       leggerle restava senza una porta. La pagina però ha già 17 elementi a
       pulsante più la bolla di WhatsApp e i due tasti della barra in alto:
       un pulsante pieno in ognuna delle cinque li avrebbe portati oltre
       venti, e a quel punto nessuno pesa più di un altro.
       Quindi quattro sezioni su cinque prendono `sez-esci`, che è una riga
       di testo con la freccia, e SOLO le testimonianze prendono il pulsante
       pieno: è il punto in cui uno ha appena letto che una persona partita
       da zero ha trovato lavoro, e vuole sapere da dove si comincia.
       ⚠️ Niente flex su questa riga (vedi CLAUDE.md): dentro c'è del
       grassetto, e in un flex ogni pezzo di testo diventa un elemento a sé.
       La freccia sta in un `::after`, il testo resta una riga sola. */
    .sez-esci {
        display: inline-block;
        margin-top: 6px;
        font-size: .98rem;
        font-weight: 600;
        color: #c2001c;
        text-decoration: none;
        border-bottom: 1px solid rgba(194,0,28,.28);
        padding-bottom: 2px;
        transition: border-color .2s ease, color .2s ease;
    }
    .sez-esci::after {
        content: ' \2192';
        display: inline-block;
        transition: transform .2s ease;
    }
    .sez-esci:hover {
        color: #96001a;
        border-bottom-color: #96001a;
    }
    .sez-esci:hover::after { transform: translateX(3px); }
    /* La riga di uscita delle FAQ sta in mezzo, sotto l'ultima domanda. */
    .sez-esci--centro { display: block; text-align: center; margin-top: 28px; }
    .sez-esci--centro { border-bottom: 0; }
    .sez-esci--centro span { border-bottom: 1px solid rgba(194,0,28,.28); padding-bottom: 2px; }
    .sez-esci--centro:hover span { border-bottom-color: #96001a; }

    /* spazio extra in fondo: i bottoni flottanti fissi non coprono il footer */
    @media (max-width: 767px) {
        #contact {
            padding-bottom: 110px !important;
        }
    }

/* Il link al metodo dentro al testo della sezione «about».
   ⚠️ Serve una regola qui e non basta `.text-base-color` del tema: `wiki.css`
   e' caricato DOPO `tema.min.css` e il colore del corpo vince sull'ereditarieta'
   del link. `home.css` e' l'ultimo foglio, quindi comanda lui. */
.fb-link-metodo {
    color: var(--base-color, #c2001c);
    text-decoration: none;
    border-bottom: 2px solid rgba(194, 0, 28, .35);
    transition: border-color .2s ease;
}
.fb-link-metodo:hover { border-bottom-color: var(--base-color, #c2001c); }

/* ============================ NE HANNO PARLATO ============================
   La striscia delle testate, in cima a «Perché fidarti di me».
   ⚠️ Niente loghi: sono marchi altrui e andrebbero tenuti aggiornati uno per
   uno. Il nome della testata scritto grande fa lo stesso lavoro e non invecchia.
   ⚠️ Le voci senza link sono uscite su carta: la copia ce l'ha Federico. */
.fb-stampa {
    display: grid;
    /* ⚠️ 300px e non 190: le testate sono SEI, e con le colonne strette
       l'ultima riga ne teneva una sola lasciando un buco grigio largo
       quattro caselle. A 300px il contenitore da 1110px ne fa tre, e sei
       voci fanno 3+3. Chi ne aggiunge o ne toglie ricontrolli qui. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1px;
    background: rgba(15, 23, 42, .09);
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 3.5rem;
}
.fb-stampa > * {
    background: #fff;
    padding: 1.4rem 1.25rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: background .2s ease;
}
a.fb-stampa-voce:hover { background: #fafafa; }
/* ⚠️ I marchi hanno proporzioni molto diverse (Rai 1 e' quasi quadrato, «Il
   Telegrafo» e' lunghissimo). Per questo il limite e' su ENTRAMBI i lati e
   l'immagine sta in una riga di altezza fissa: cosi' i larghi li frena la
   larghezza, i compatti l'altezza, e otticamente pesano uguale. */
.fb-stampa-marchio {
    display: flex;
    align-items: center;
    height: 38px;
}
.fb-stampa-logo {
    max-height: 30px;
    max-width: 165px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.fb-stampa-cosa {
    display: block;
    margin-top: .45rem;
    font-size: .88rem;
    line-height: 1.45;
    color: #64748b;
}
.fb-stampa-titolo {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 1rem;
}