/* ============================================
   Chi siamo: la struttura di Revilaw
   Organigramma della Società e della rete

   Stili specifici della pagina: si appoggia a
   zls_zes/style.css e assets/content-page.css e
   disegna l'organigramma vero e proprio: i tre
   livelli (vertice, soci fondatori, capoarea)
   collegati da linee come in un organigramma
   aziendale. Le card dei partner sono compatte:
   nome e qualifica sempre visibili, biografia
   aperta dal pulsante.
   ============================================ */

/* ============================================
   1. ALBERO DELL'ORGANIGRAMMA
   Le etichette di livello e le linee di
   collegamento danno la lettura gerarchica:
   ogni livello discende da quello sopra.
   ============================================ */
.org-tree {
    margin-top: 8px;
}

/* Arrivando da un'ancora della navbar, il livello non
   deve fermarsi attaccato alla barra fissa con il logo:
   il margine di scroll aggiunge aria sotto la navbar. */
.org-livello {
    scroll-margin-top: 34px;
}

/* La navbar di questa pagina ha una voce in piu' delle
   altre: senza uno spazio minimo garantito, sulle
   larghezze intermedie il menu esteso arriva a toccare
   il logo. Nella stessa fascia le voci si compattano. */
.theme-chisiamo .nav-container {
    gap: 28px;
}

@media (min-width: 1200px) and (max-width: 1460px) {
    .theme-chisiamo .nav-links {
        gap: clamp(8px, 1vw, 18px);
    }

    .theme-chisiamo .nav-links a {
        font-size: 0.84rem;
    }
}

.org-etichetta {
    display: block;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #5A6270;
    margin-bottom: 16px;
}

.org-desc {
    max-width: 680px;
    margin: 0 auto 10px;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

/* Linea verticale tra un livello e il successivo. */
.org-connettore {
    width: 1px;
    height: 52px;
    margin: 26px auto;
    background: rgba(22, 64, 104, 0.3);
}

/* Ramo: la barra orizzontale con le discese verso
   i nodi, il disegno classico dell'organigramma.
   La barra parte dal centro del primo nodo e
   arriva al centro dell'ultimo. */
.org-ramo {
    position: relative;
    display: grid;
    gap: 24px;
    padding-top: 34px;
    margin-top: 20px;
}

.org-ramo::before {
    content: '';
    position: absolute;
    top: 0;
    height: 1px;
    background: rgba(22, 64, 104, 0.3);
}

/* Discesa centrale dalla parte testuale del livello
   alla barra del ramo. */
.org-ramo::after {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    width: 1px;
    height: 20px;
    background: rgba(22, 64, 104, 0.3);
}

.org-ramo-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

.org-ramo-2::before {
    left: 25%;
    right: 25%;
}

.org-ramo-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.org-ramo-3::before {
    left: 16.667%;
    right: 16.667%;
}

/* Nodo: ogni colonna del ramo, con la discesa
   dalla barra orizzontale. */
.org-nodo {
    position: relative;
    display: flex;
    flex-direction: column;
}

.org-nodo::before {
    content: '';
    position: absolute;
    top: -34px;
    left: 50%;
    width: 1px;
    height: 34px;
    background: rgba(22, 64, 104, 0.3);
}

/* ============================================
   2. CARD DEL VERTICE SOCIETARIO
   L'Amministratore Unico apre l'organigramma:
   la card scura richiama l'hero e distingue il
   vertice dal resto della struttura, che sta su
   card chiare.
   ============================================ */
.au-card {
    max-width: 940px;
    margin: 0 auto;
    padding: 56px 56px 52px;
    background: linear-gradient(135deg, #0f1e2e 0%, #1a3a5c 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.au-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #8bb8d4;
}

/* Ritratto del vertice: quadrato arrotondato come le
   card, con il filo azzurro della barra superiore.
   Resta sempre il piu' grande della pagina, anche
   rispetto alle card aperte. */
.au-foto {
    display: block;
    width: 220px;
    height: 220px;
    margin: 0 auto 26px;
    border-radius: 18px;
    border: 1px solid rgba(139, 184, 212, 0.5);
    object-fit: cover;
}

.au-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #8bb8d4;
    margin-bottom: 14px;
}

.au-nome {
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

.au-meta {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(139, 184, 212, 0.85);
    margin-bottom: 30px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.au-bio {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.au-bio p {
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.82);
    hyphenate-limit-chars: 5 2 3;
    -webkit-hyphenate-limit-before: 2;
    -webkit-hyphenate-limit-after: 3;
    word-spacing: -0.05em;
    overflow-wrap: break-word;
}

.au-bio p + p {
    margin-top: 18px;
}

.au-bio strong {
    color: #ffffff;
    font-weight: 600;
}

/* Rimando al profilo LinkedIn: sta nella card scura
   del vertice, quindi ha bisogno di una variante
   chiara oltre a quella delle card bianche. */
.profilo-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 26px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    border: 1px solid rgba(139, 184, 212, 0.45);
    color: #8bb8d4;
    transition: var(--transition);
}

.profilo-linkedin svg {
    width: 14px;
    height: 14px;
}

.au-card .profilo-linkedin:hover {
    background: rgba(139, 184, 212, 0.12);
    color: #ffffff;
    border-color: rgba(139, 184, 212, 0.8);
}

.partner-card .profilo-linkedin {
    margin-top: 18px;
    align-self: flex-start;
    border-color: rgba(22, 64, 104, 0.25);
    color: #164068;
}

.partner-card .profilo-linkedin:hover {
    background: var(--accent-bg);
    border-color: #164068;
}

/* ============================================
   3. CARD DEI PARTNER
   Compatte e uniformi: in testa nome, qualifica
   e pulsante; la biografia si apre sotto. Cosi'
   ogni livello dell'organigramma resta allineato
   a prescindere dalla lunghezza delle bio.
   ============================================ */
.partner-card {
    background: #ffffff;
    border: 1px solid rgba(22, 64, 104, 0.14);
    border-radius: 12px;
    padding: 24px 24px 22px;
    box-shadow: 0 2px 10px rgba(10, 40, 68, 0.04);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #164068;
}

.partner-card:hover {
    box-shadow: 0 10px 28px rgba(10, 40, 68, 0.09);
    border-color: rgba(22, 64, 104, 0.3);
}

.partner-testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

/* Ritratto nella card: stessa geometria del pulsante,
   in scala di grigi gia' nel file. Quando la biografia
   e' aperta il ritratto si ingrandisce insieme. */
.partner-foto {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    border: 1px solid rgba(22, 64, 104, 0.15);
    object-fit: cover;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


@media (prefers-reduced-motion: reduce) {
    .partner-foto {
        transition: none;
    }
}

.partner-identita {
    flex: 1;
    min-width: 0;
}

.partner-nome {
    font-size: 1.12rem;
    font-weight: 700;
    color: #164068;
    line-height: 1.3;
    margin-bottom: 5px;
}

.partner-meta {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #5A6270;
    margin: 0;
}

/* Pulsante che apre e chiude la biografia: un
   quadrato con il piu' che ruota a croce quando
   la card e' aperta. */
.partner-toggle {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid rgba(22, 64, 104, 0.25);
    border-radius: 8px;
    color: #164068;
    cursor: pointer;
    transition: var(--transition);
}

.partner-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.partner-toggle:hover {
    background: #164068;
    border-color: #164068;
    color: #ffffff;
}

.partner-toggle:focus-visible {
    outline: 2px solid #164068;
    outline-offset: 2px;
}


/* La biografia non si apre piu' nella card: vive nella
   scheda in finestra. Il contenuto resta nel markup come
   sorgente dei dati. */
.partner-dettaglio {
    display: none;
}

/* ============================================
   SCHEDA IN FINESTRA
   Un partner alla volta: sfondo oscurato, ritratto
   in primo piano, biografia e collegamenti. Si
   chiude con la X, con un clic fuori o con Esc.
   ============================================ */
/* Il display della classe vincerebbe sull'attributo
   hidden: quando la scheda e' chiusa l'overlay deve
   sparire davvero, non solo diventare trasparente. */
.scheda-overlay[hidden] {
    display: none;
}

.scheda-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 30, 46, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.scheda-overlay.aperto {
    opacity: 1;
}

.scheda {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 44px 42px 36px;
    text-align: center;
    box-shadow: var(--shadow-xl);
    transform: translateY(14px) scale(0.97);
    transition: transform 0.25s ease;
}

/* Da 640px in su la scheda si allarga su due colonne:
   ritratto, LinkedIn e qualifica a sinistra, testo a
   destra. Cosi' anche le biografie lunghe stanno in
   finestra senza barra di scorrimento. */
@media (min-width: 640px) {
    .scheda {
        max-width: 780px;
        text-align: left;
        display: grid;
        grid-template-columns: 240px 1fr;
        grid-template-rows: auto auto auto auto 1fr;
        grid-template-areas:
            'foto nome'
            'foto meta'
            'foto bio'
            'link bio'
            'badge bio';
        column-gap: 34px;
        row-gap: 0;
        align-content: start;
    }

    .scheda-foto {
        grid-area: foto;
        width: 240px;
        height: 240px;
        margin: 0;
    }

    .scheda-nome {
        grid-area: nome;
        font-size: 1.45rem;
    }

    .scheda-meta {
        grid-area: meta;
    }

    .scheda-bio {
        grid-area: bio;
    }

    .scheda .profilo-linkedin {
        grid-area: link;
        justify-self: start;
        margin-top: 18px;
    }

    .scheda .quality-badge {
        grid-area: badge;
        margin-top: 18px;
    }
}

.scheda::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #164068;
}

.scheda-overlay.aperto .scheda {
    transform: none;
}

.scheda-chiudi {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid rgba(22, 64, 104, 0.25);
    border-radius: 8px;
    color: #164068;
    cursor: pointer;
    transition: var(--transition);
}

.scheda-chiudi svg {
    width: 16px;
    height: 16px;
}

.scheda-chiudi:hover {
    background: #164068;
    border-color: #164068;
    color: #ffffff;
}

.scheda-chiudi:focus-visible {
    outline: 2px solid #164068;
    outline-offset: 2px;
}

.scheda-foto {
    display: block;
    width: 280px;
    height: 280px;
    margin: 0 auto 24px;
    border-radius: 16px;
    border: 1px solid rgba(22, 64, 104, 0.15);
    object-fit: cover;
}

.scheda-nome {
    font-size: 1.5rem;
    font-weight: 800;
    color: #164068;
    line-height: 1.25;
    margin-bottom: 6px;
}

.scheda-meta {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: #5A6270;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(22, 64, 104, 0.1);
}

.scheda-bio {
    font-size: 0.95rem;
    line-height: 1.78;
    color: var(--text-secondary);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 5 2 3;
    word-spacing: -0.05em;
    overflow-wrap: break-word;
}

.scheda .profilo-linkedin {
    margin-top: 22px;
    border-color: rgba(22, 64, 104, 0.25);
    color: #164068;
}

.scheda .profilo-linkedin:hover {
    background: var(--accent-bg);
    border-color: #164068;
}

.scheda .quality-badge {
    margin-top: 22px;
}

@media (max-width: 560px) {
    .scheda {
        padding: 34px 22px 28px;
    }

    .scheda-foto {
        width: 210px;
        height: 210px;
    }
}

/* Su finestre molto basse (portatili piccoli, browser
   con zoom) la scheda si fa piu' densa, cosi' resta
   tutta visibile senza barra di scorrimento. */
@media (min-width: 640px) and (max-height: 640px) {
    .scheda {
        padding: 30px 32px 26px;
    }

    .scheda-foto {
        width: 190px;
        height: 190px;
    }

    .scheda {
        grid-template-columns: 190px 1fr;
        column-gap: 26px;
    }

    .scheda-nome {
        font-size: 1.25rem;
    }

    .scheda-bio {
        font-size: 0.88rem;
        line-height: 1.65;
    }

    .scheda .profilo-linkedin,
    .scheda .quality-badge {
        margin-top: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scheda-overlay,
    .scheda,
    .partner-toggle svg {
        transition: none;
    }
}

.partner-bio {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--text-secondary);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    /* Il giustificato su colonne strette apre buchi
       tra le parole: la sillabazione con soglie corte
       e una spaziatura di base ridotta tengono le
       righe piene. */
    hyphenate-limit-chars: 5 2 3;
    -webkit-hyphenate-limit-before: 2;
    -webkit-hyphenate-limit-after: 3;
    word-spacing: -0.06em;
    overflow-wrap: break-word;
}

/* Etichetta di ruolo nel controllo qualita' della
   rete: chiude la card, separata dalla biografia
   perche' e' una qualifica, non parte della bio. */
.quality-badge {
    margin-top: 18px;
    padding-top: 16px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #164068;
    border-top: 1px solid rgba(22, 64, 104, 0.12);
}

/* ============================================
   4. COLONNE DI AREA
   Il banner scuro intesta la colonna; le card dei
   capoarea discendono dal banner con la stessa
   linea dell'albero.
   ============================================ */
.area-banner {
    background: linear-gradient(135deg, #164068, #1a3a5c);
    border-radius: 10px;
    padding: 13px 18px;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #ffffff;
}

.area-col > * + * {
    position: relative;
    margin-top: 22px;
}

.area-col > * + *::before {
    content: '';
    position: absolute;
    top: -22px;
    left: 50%;
    width: 1px;
    height: 22px;
    background: rgba(22, 64, 104, 0.3);
}

/* Nelle colonne di area la card non si stira per
   pareggiare l'altezza delle colonne vicine: una
   colonna con una sola card resterebbe mezza vuota. */
.area-col .partner-card {
    flex: 0 0 auto;
}

.area-col .partner-nome {
    font-size: 1.04rem;
}

.area-col .partner-bio {
    font-size: 0.88rem;
    line-height: 1.7;
}

/* ============================================
   5. FUNZIONIGRAMMA
   La ripartizione funzionale su quattro pilastri.
   Tre pesi visivi: le funzioni chiave (vertice e
   controllo qualita') piene, i soci di capitale in
   tinta, i comitati tratteggiati. Le linee sono
   quelle dell'organigramma, piu' marcate.
   ============================================ */
.funz-tree {
    max-width: 1140px;
    margin: 52px auto 0;
}

.funz-radice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    margin: 0 auto;
    padding: 16px 40px;
    background: linear-gradient(135deg, #0f1e2e, #1a3a5c);
    color: #ffffff;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    box-shadow: 0 14px 34px rgba(10, 40, 68, 0.25);
    overflow: hidden;
}

.funz-radice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #8bb8d4;
}

.funz-radice-logo {
    width: 26px;
    height: auto;
}

.funz-ramo {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    padding-top: 36px;
    margin-top: 28px;
}

/* Barra orizzontale dal primo all'ultimo pilastro
   e discesa dalla radice. */
.funz-ramo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: rgba(22, 64, 104, 0.32);
}

.funz-ramo::after {
    content: '';
    position: absolute;
    top: -28px;
    left: 50%;
    width: 2px;
    height: 28px;
    background: rgba(22, 64, 104, 0.32);
}

.funz-colonna {
    position: relative;
    display: flex;
    flex-direction: column;
}

.funz-colonna::before {
    content: '';
    position: absolute;
    top: -36px;
    left: 50%;
    width: 2px;
    height: 36px;
    background: rgba(22, 64, 104, 0.32);
}

.funz-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #164068, #1a3a5c);
    border-radius: 10px;
    padding: 14px 12px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(10, 40, 68, 0.18);
}

.funz-banner svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: 0.85;
}

.funz-colonna > * + * {
    position: relative;
    margin-top: 20px;
}

.funz-colonna > * + *::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    width: 2px;
    height: 20px;
    background: rgba(22, 64, 104, 0.32);
}

.funz-nodo {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(22, 64, 104, 0.16);
    border-radius: 10px;
    padding: 15px 12px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(10, 40, 68, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.funz-nodo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(22, 64, 104, 0.22);
}

.funz-nodo:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(10, 40, 68, 0.12);
}

.funz-nodo strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: #164068;
    letter-spacing: 0.2px;
    line-height: 1.3;
}

/* Soci di capitale: tinta di riguardo. */
.funz-socio {
    background: var(--accent-bg);
    border-color: rgba(22, 64, 104, 0.3);
}

.funz-socio::before {
    background: #164068;
}

/* Vertice e controllo qualita': pieni, come i punti
   fermi dell'intera pagina. */
.funz-vertice,
.funz-qualita {
    background: linear-gradient(135deg, #164068, #1a3a5c);
    border-color: #164068;
}

.funz-vertice::before,
.funz-qualita::before {
    background: #8bb8d4;
}

.funz-vertice strong,
.funz-qualita strong {
    color: #ffffff;
}

/* I comitati sono organi collegiali, non livelli
   della filiera: il tratteggio li distingue. */
.funz-comitato {
    background: var(--bg-tertiary);
    border-style: dashed;
    box-shadow: none;
}

.funz-comitato::before {
    display: none;
}

.funz-comitato strong {
    color: #5A6270;
    font-weight: 600;
}

.funz-nota {
    max-width: 680px;
    margin: 30px auto 0;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ============================================
   6. RESPONSIVE
   Le tre aree restano affiancate il piu' a lungo
   possibile: sotto i 1100px si stringono spazi e
   padding, e solo su telefono si impilano. Quando
   le colonne si impilano, la barra orizzontale non
   ha piu' senso: resta la sola discesa verticale.
   ============================================ */
@media (max-width: 1100px) {
    .org-ramo-3 {
        gap: 16px;
    }

    .area-col > * + * {
        margin-top: 18px;
    }

    .area-col > * + *::before {
        top: -18px;
        height: 18px;
    }

    .area-col .partner-card {
        padding: 20px 18px 18px;
    }

    .area-col .partner-nome {
        font-size: 0.98rem;
    }

    .area-col .partner-bio {
        font-size: 0.85rem;
        line-height: 1.65;
    }

    .area-banner {
        letter-spacing: 1.6px;
        font-size: 0.7rem;
        padding: 11px 12px;
    }

    .area-col .partner-foto {
        width: 52px;
        height: 52px;
    }

}

/* Il ramo a tre colonne si impila prima di quello a due: le schede non
   scendono sotto i 250px, quindi tre affiancate con i distanziatori
   chiedono poco meno di 800px piu' i margini della pagina. La soglia
   stava a 760px, e nella fascia fra 761 e 830 - dove cade l'iPad in
   verticale, 768px - le tre colonne restavano affiancate e la pagina
   scorreva in orizzontale. Ora si impilano alla stessa soglia del
   funzionigramma, che ha lo stesso numero di colonne. */
@media (max-width: 900px) {
    .org-ramo-3 {
        grid-template-columns: 1fr;
        max-width: 560px;
        padding-top: 0;
    }

    .org-ramo-3::before,
    .org-ramo-3::after,
    .org-ramo-3 > .org-nodo::before {
        display: none;
    }
}

@media (max-width: 860px) {
    .org-ramo-2 {
        grid-template-columns: 1fr;
        max-width: 560px;
        padding-top: 0;
    }

    .org-ramo-2::before,
    .org-ramo-2::after,
    .org-ramo-2 > .org-nodo::before {
        display: none;
    }

    .org-connettore {
        height: 40px;
        margin: 20px auto;
    }

    .au-card {
        padding: 40px 28px 38px;
    }

    .au-bio p {
        font-size: 0.95rem;
    }
}

/* Funzionigramma: sotto i 900px i quattro pilastri
   si impilano; restano le sole discese verticali. */
@media (max-width: 900px) {
    .funz-ramo {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 0;
        gap: 18px;
    }

    .funz-ramo::before,
    .funz-ramo::after,
    .funz-colonna::before {
        display: none;
    }
}

@media (max-width: 560px) {
    .partner-card {
        padding: 22px 18px 20px;
    }

    .au-card {
        padding: 34px 22px 32px;
        border-radius: var(--radius);
    }

    .au-foto {
        width: 176px;
        height: 176px;
    }

}