/*
 * Area Associazione (P-ASSOCIAZIONE): home, chi siamo, trasparenza, sostienici, sponsor, contatti
 * Stili specifici dell'area. Usare i token --clr-* di app.css; prima di creare una classe
 * verificare che non esista già in app.css.
 */

/* Tutte le regole valgono solo nelle pagine di quest'area: il wrapper :where() non aggiunge specificità. */
:where(body[data-area="associazione"]) {
    /* `.contenuto-pagina` (app.css) azzera il padding orizzontale del `.container`: le `.row` con gutter
       sbordano di 12px su mobile. Ripristino limitato alle pagine di quest'area. */
    & .container.contenuto-pagina { padding-left: 0.75rem; padding-right: 0.75rem; }

    /* --------------------------------------------------------------------------
       Elementi condivisi dell'area
       -------------------------------------------------------------------------- */
    .lead-akra { font-size: 1.2rem; line-height: 1.55; color: var(--clr-text); }

    .citazione--grande p { font-family: var(--font-titoli); font-style: normal; font-size: 2rem; font-weight: 600; line-height: 1.15; color: var(--clr-blu); text-transform: uppercase; }

    .elenco-badge { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .elenco-badge .badge { display: inline-flex; align-items: center; gap: 0.3rem; text-transform: none; letter-spacing: 0.01em; font-size: 0.8rem; }

    .elenco-icone { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
    .elenco-icone li { display: flex; gap: 0.65rem; align-items: flex-start; }
    .elenco-icone li > .material-symbols-outlined { color: var(--clr-area); font-size: 1.35rem; flex-shrink: 0; margin-top: 0.05rem; }

    .elenco-spunte, .elenco-croci { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
    .elenco-spunte li, .elenco-croci li { position: relative; padding-left: 1.5rem; }
    .elenco-spunte li::before, .elenco-croci li::before { content: ''; position: absolute; left: 0.2rem; top: 0.55em; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
    .elenco-spunte li::before { background: var(--clr-success); }
    .elenco-croci li::before { background: var(--clr-border-strong); }

    .modulo-pubblico .card-body { padding: 1.5rem; }
    .modulo-pubblico .card-footer { background: var(--clr-surface-alt); padding: 0.85rem 1.5rem; }

    .sezione-testo { max-width: 860px; }

    .numero-link { display: block; text-decoration: none; color: inherit; border-radius: 0.5rem; }
    .numero-link:hover .scheda-percorso__riquadro { border-color: var(--clr-area-border); background: var(--clr-area-surface); }

    /* Campo trappola antispam: fuori schermo, non solo nascosto (alcuni bot ignorano display:none). */
    .campo-trappola { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

    /* Gruppi di checkbox obbligatori (almeno una scelta) */
    .gruppo-feedback { display: none; margin-top: 0.35rem; font-size: 0.875em; color: var(--clr-danger); }
    [data-gruppo-obbligatorio].gruppo-invalido .gruppo-feedback { display: block; }

    /* --------------------------------------------------------------------------
       Grafico partecipanti (SVG)
       -------------------------------------------------------------------------- */
    .grafico-partecipanti__svg { width: 100%; height: auto; display: block; overflow: visible; }
    .grafico-partecipanti__griglia { stroke: var(--clr-divider); stroke-width: 1; stroke-dasharray: 3 4; }
    .grafico-partecipanti__asse { stroke: var(--clr-border-strong); stroke-width: 1; }
    .grafico-partecipanti__barra path { fill: #7C9AB3; transition: fill 0.15s ease; }
    .grafico-partecipanti__barra--ultima path { fill: var(--clr-blu); }
    .grafico-partecipanti__barra:hover path, .grafico-partecipanti__barra:focus path { fill: var(--clr-blu-profondo); }
    .grafico-partecipanti__barra:focus { outline: none; }
    .grafico-partecipanti__barra:focus-visible path { stroke: var(--clr-ocra); stroke-width: 3; }
    .grafico-partecipanti__valore { font-family: var(--font-titoli); font-weight: 700; font-size: 26px; fill: var(--clr-text); font-variant-numeric: tabular-nums; }
    .grafico-partecipanti__anno { font-family: var(--font-mono); font-size: 14px; fill: var(--clr-text-muted); }

    /* --------------------------------------------------------------------------
       Home
       -------------------------------------------------------------------------- */
    .albo-striscia {
        display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: baseline;
        background: #FFFFFF; border: 1px solid var(--clr-divider); border-radius: 0.5rem; padding: 0.75rem 1rem;
    }
    .albo-striscia__titolo { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-text-muted); display: inline-flex; gap: 0.35rem; align-items: center; }
    .albo-striscia__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; font-size: 0.875rem; }

    .itinerario-mini__icona {
        width: 2.75rem; height: 2.75rem; border-radius: 50%; flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--clr-area-surface); color: var(--clr-area);
    }

    .sponsor-striscia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.75rem; }

    .logo-sponsor {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
        min-height: 112px; padding: 0.75rem; text-align: center; text-decoration: none;
        background: #FFFFFF; border: 1px solid var(--clr-border); border-radius: 0.5rem; color: var(--clr-text);
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .logo-sponsor:hover { box-shadow: var(--shadow-hover); border-color: var(--clr-border-strong); color: var(--clr-text); }
    .logo-sponsor__sigla { font-family: var(--font-titoli); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--clr-blu); letter-spacing: 0.04em; }
    .logo-sponsor__nome { font-size: 0.8rem; font-weight: 600; line-height: 1.25; }
    .logo-sponsor__livello { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-text-muted); }
    .logo-sponsor--main { border-top: 3px solid var(--clr-ocra); }

    /* --------------------------------------------------------------------------
       Chi siamo, storia, direttivo
       -------------------------------------------------------------------------- */
    .anima__icona {
        width: 3rem; height: 3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        background: var(--clr-area-surface); color: var(--clr-area); margin-bottom: 0.75rem;
    }
    .anima__icona .material-symbols-outlined { font-size: 1.6rem; }
    .anima__titolo { font-family: var(--font-titoli); font-size: 1.5rem; font-weight: 600; text-transform: uppercase; color: var(--clr-blu); }

    .storia-anni { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
    .storia-anni a {
        font-family: var(--font-mono); font-weight: 500; padding: 0.35rem 0.85rem; border-radius: 999px; min-height: 36px;
        border: 1px solid var(--clr-area-border); background: var(--clr-area-surface); color: var(--clr-area); text-decoration: none;
    }
    .storia-anni a:hover { background: #FFFFFF; }

    .timeline { list-style: none; margin: 0 0 2rem; padding: 0; position: relative; }
    .timeline::before { content: ''; position: absolute; left: 1.4rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--clr-area-border); }
    .timeline__tappa { position: relative; padding-left: 4rem; margin-bottom: 2rem; scroll-margin-top: 90px; }
    .timeline__anno { font-family: var(--font-titoli); font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--clr-blu); margin-bottom: 0.5rem; }
    .timeline__punto {
        position: absolute; left: 0; top: 0; width: 2.85rem; height: 2.85rem; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: #FFFFFF; border: 2px solid var(--clr-ocra); color: var(--clr-blu);
    }
    .timeline__tappa--futura .timeline__punto { border-style: dashed; color: var(--clr-text-muted); }
    .timeline__tappa--futura .timeline__corpo { border-style: dashed; background: transparent; }
    .timeline__titolo { font-family: var(--font-titoli); font-size: 1.5rem; font-weight: 600; color: var(--clr-text); margin-bottom: 0.5rem; }
    .timeline__punti { list-style: none; padding: 0; margin: 0 0 0.75rem; display: grid; gap: 0.3rem; font-size: 0.9rem; }
    .timeline__punti li { display: flex; gap: 0.4rem; align-items: flex-start; }
    .timeline__punti .material-symbols-outlined { color: var(--clr-success); font-size: 1.1rem; margin-top: 0.1rem; }
    .timeline__foto { aspect-ratio: 3 / 2; object-fit: cover; }

    @media (min-width: 992px) {
        .timeline::before { left: 9.4rem; }
        .timeline__tappa { padding-left: 12rem; }
        .timeline__anno { position: absolute; left: 0; top: 0.35rem; width: 7rem; text-align: right; }
        .timeline__punto { left: 8rem; }
    }

    .direttivo-presidente__nome { font-family: var(--font-titoli); font-size: 2rem; font-weight: 700; text-transform: uppercase; color: var(--clr-blu); margin: 0.1rem 0 0.5rem; }
    .direttivo-presidente__citazione { max-width: 30ch; }
    .direttivo-contatti { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; padding: 0; list-style: none; }
    .direttivo-contatti li { display: inline-flex; align-items: center; gap: 0.35rem; }

    .carica--da-comunicare { background: transparent; border-style: dashed; border-color: var(--clr-border-strong); }
    .carica__segnaposto {
        width: 3rem; height: 3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
        background: repeating-linear-gradient(135deg, var(--clr-surface-alt) 0 6px, #FFFFFF 6px 12px);
        border: 1px solid var(--clr-border); color: var(--clr-text-muted);
    }
    .carica__nome { font-style: italic; color: var(--clr-text-muted); }

    /* --------------------------------------------------------------------------
       Trasparenza
       -------------------------------------------------------------------------- */
    .trasparenza-sintesi {
        display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; padding: 0.85rem 1.15rem;
        background: var(--clr-area-surface); border: 1px solid var(--clr-area-border); border-radius: 0.5rem; font-size: 0.875rem;
    }
    .trasparenza-sintesi > div { display: inline-flex; gap: 0.4rem; align-items: center; }
    .trasparenza-sintesi .material-symbols-outlined { color: var(--clr-area); }

    .documenti { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
    .documento { background: #FFFFFF; border: 1px solid var(--clr-border); border-radius: 0.5rem; }
    .documento__testa { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; flex-wrap: wrap; }
    .documento__icona {
        width: 2.75rem; height: 3.25rem; flex-shrink: 0; border-radius: 0.25rem; display: inline-flex; align-items: center; justify-content: center;
        background: var(--clr-surface-alt); border: 1px solid var(--clr-divider); color: var(--clr-blu);
    }
    .documento__corpo { flex: 1; min-width: 220px; }
    .documento__titolo { font-family: var(--font-testo); font-size: 1.05rem; font-weight: 600; margin: 0 0 0.35rem; }
    .documento__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: center; font-size: 0.8rem; color: var(--clr-text-muted); }
    .documento__note { font-size: 0.85rem; color: var(--clr-text-muted); margin: 0.5rem 0 0; }
    .documento__azione { align-self: center; }
    .documento__storico { border-top: 1px solid var(--clr-divider); }
    .documento__storico summary {
        list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem;
        padding: 0.65rem 1.25rem; min-height: 44px; font-size: 0.875rem; font-weight: 500; color: var(--clr-blu); background: var(--clr-bg);
        border-radius: 0 0 0.5rem 0.5rem;
    }
    .documento__storico summary::-webkit-details-marker { display: none; }
    .documento__storico summary::after { content: '▾'; margin-left: auto; transition: transform 0.2s ease; color: var(--clr-text-muted); }
    .documento__storico[open] summary::after { transform: rotate(180deg); }
    .documento__storico[open] summary { border-radius: 0; }
    .documento__conta { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-muted); }

    .versioni { list-style: none; margin: 0; padding: 0.5rem 1.25rem 1rem 2.75rem; position: relative; }
    .versioni::before { content: ''; position: absolute; left: 1.6rem; top: 1rem; bottom: 1.5rem; width: 2px; background: var(--clr-divider); }
    .versioni__voce { position: relative; display: flex; gap: 0.75rem; align-items: center; padding: 0.5rem 0; font-size: 0.875rem; flex-wrap: wrap; }
    .versioni__voce::before { content: ''; position: absolute; left: -1.4rem; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--clr-border-strong); }
    .versioni__voce--vigente::before { background: var(--clr-success); border-color: var(--clr-success); }
    .versioni__numero { font-family: var(--font-mono); font-weight: 500; padding: 0.1rem 0.45rem; border-radius: 0.25rem; background: var(--clr-surface-alt); }

    /* --------------------------------------------------------------------------
       Tesseramento
       -------------------------------------------------------------------------- */
    .passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .passi__passo { position: relative; background: #FFFFFF; border: 1px solid var(--clr-border); border-radius: 0.5rem; padding: 1.25rem; }
    .passi__numero {
        position: absolute; top: 1rem; right: 1.15rem; font-family: var(--font-titoli); font-size: 2.5rem; font-weight: 700;
        line-height: 1; color: var(--clr-area-border);
    }
    .passi__icona { font-size: 1.75rem; color: var(--clr-area); }
    .passi__titolo { font-family: var(--font-titoli); font-size: 1.35rem; font-weight: 600; text-transform: uppercase; color: var(--clr-blu); margin: 0.5rem 0 0.35rem; }
    .passi__passo p { font-size: 0.9rem; }

    /* --------------------------------------------------------------------------
       Sostienici
       -------------------------------------------------------------------------- */
    .sostieni-volantino { padding: 3.5rem 0; }

    .volantino-anteprima__etichetta { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-text-muted); margin-bottom: 0.5rem; }
    .volantino {
        aspect-ratio: 148 / 210; max-width: 380px; margin: 0 auto; padding: 1.5rem 1.4rem; display: flex; flex-direction: column;
        background: var(--clr-blu); color: #FFFFFF; border-radius: 0.5rem; border-bottom: 10px solid var(--clr-ocra);
        background-image: linear-gradient(115deg, transparent 0 58%, rgba(255, 255, 255, 0.05) 58%);
    }
    .volantino__testa { display: flex; align-items: center; gap: 0.75rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
    .volantino__testa img { width: 64px; height: auto; }
    .volantino__occhiello { margin: 1.25rem 0 0.25rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-ocra); font-weight: 600; }
    .volantino__titolo { font-family: var(--font-titoli); font-size: 2rem; font-weight: 700; text-transform: uppercase; line-height: 1; color: #FFFFFF; margin: 0 0 0.75rem; }
    .volantino__testo { font-size: 0.85rem; color: rgba(255, 255, 255, 0.88); }
    .volantino__iban { background: #FFFFFF; color: var(--clr-text); border-radius: 0.375rem; padding: 0.6rem 0.75rem; text-align: center; }
    .volantino__iban span { display: block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-text-muted); }
    .volantino__iban strong { display: block; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; overflow-wrap: anywhere; }
    .volantino__usi { list-style: none; padding: 0; margin: 0.85rem 0 0; font-size: 0.8rem; display: grid; gap: 0.2rem; }
    .volantino__usi li::before { content: '— '; color: var(--clr-ocra); }
    .volantino__piede { margin: auto 0 0; padding-top: 0.75rem; font-size: 0.7rem; color: rgba(255, 255, 255, 0.7); }

    .donazione__importi { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 0.5rem; }
    .donazione__importo { min-height: 48px; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem; }
    .donazione__importo .mono { font-size: 1.15rem; font-weight: 500; }
    .donazione__libero { max-width: 240px; }
    .donazione__riepilogo { display: flex; justify-content: space-between; align-items: baseline; padding-top: 0.85rem; border-top: 1px solid var(--clr-divider); }
    .donazione__riepilogo strong { font-size: 1.5rem; color: var(--clr-blu); }
    .donazione .btn:disabled { opacity: 0.55; }

    .dati-bonifico { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1rem; align-items: center; margin-bottom: 1rem; }
    .dati-bonifico dt { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-muted); }
    .dati-bonifico dd { margin: 0; }
    .dati-bonifico__iban { font-size: 1.05rem; word-break: break-all; }

    .uso-fondi__icona { font-size: 2rem; color: var(--clr-area); }
    .fondi-anno__totale { margin-bottom: 0.5rem; }
    .fondi-anno__totale .mono { font-family: var(--font-mono); font-size: 1.85rem; font-weight: 500; color: var(--clr-blu); }

    /* --------------------------------------------------------------------------
       Sponsor
       -------------------------------------------------------------------------- */
    .numeri-striscia {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
        background: var(--clr-divider); border: 1px solid var(--clr-divider); border-radius: 0.5rem; overflow: hidden;
    }
    .numeri-striscia > div { background: #FFFFFF; padding: 0.85rem 1rem; display: flex; flex-direction: column; }
    .numeri-striscia__valore { font-family: var(--font-titoli); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--clr-blu); font-variant-numeric: tabular-nums; }
    .numeri-striscia__label { font-size: 0.75rem; color: var(--clr-text-muted); margin-top: 0.25rem; }

    .livello-sponsor { margin-bottom: 2rem; }
    .livello-sponsor__titolo { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-testo); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-text-muted); margin-bottom: 0.75rem; }
    .livello-sponsor--main .sponsor-card { border-top: 3px solid var(--clr-ocra); }

    .logo-segnaposto {
        flex-shrink: 0; width: 150px; aspect-ratio: 1 / 1; border-radius: 0.5rem;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.75rem; text-align: center;
        background: var(--clr-surface-alt); border: 1px solid var(--clr-divider); color: var(--clr-blu);
    }
    .logo-segnaposto__sigla {
        width: 3.5rem; height: 3.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        font-family: var(--font-titoli); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.04em;
        border: 2px solid currentColor;
    }
    .logo-segnaposto__nome { font-family: var(--font-titoli); font-size: 0.95rem; font-weight: 600; text-transform: uppercase; line-height: 1.05; letter-spacing: 0.03em; }
    .logo-segnaposto--main { width: 200px; background: var(--clr-blu); color: #FFFFFF; border-color: var(--clr-blu); }
    /* Logo caricato: fondo chiaro anche per il main sponsor, l'immagine si adatta senza deformarsi */
    .logo-segnaposto--immagine { background: #FFFFFF; border-color: var(--clr-divider); }
    .logo-segnaposto--immagine img { width: 100%; height: 100%; object-fit: contain; }
    .logo-segnaposto--main .logo-segnaposto__sigla { border-color: var(--clr-ocra); }
    .logo-segnaposto--silver, .logo-segnaposto--tecnico { width: 110px; }
    .logo-segnaposto--silver .logo-segnaposto__sigla, .logo-segnaposto--tecnico .logo-segnaposto__sigla { width: 2.75rem; height: 2.75rem; font-size: 1.15rem; }
    .logo-segnaposto--silver .logo-segnaposto__nome, .logo-segnaposto--tecnico .logo-segnaposto__nome { font-size: 0.75rem; }

    .pacchetto--evidenza { border: 2px solid var(--clr-ocra); }
    .pacchetto__icona { font-size: 2rem; color: var(--clr-blu); }
    .pacchetto__nome { font-family: var(--font-titoli); font-size: 1.6rem; font-weight: 700; text-transform: uppercase; color: var(--clr-blu); margin: 0; }
    .pacchetto__prezzo { margin: 0.25rem 0 0.75rem; }
    .pacchetto__prezzo .mono { font-size: 1.75rem; font-weight: 500; color: var(--clr-text); }
    .pacchetto__voci { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.45rem; font-size: 0.85rem; }
    .pacchetto__voci li { display: flex; gap: 0.45rem; align-items: flex-start; }
    .pacchetto__voci .material-symbols-outlined { color: var(--clr-success); font-size: 1.1rem; margin-top: 0.05rem; }
    .pacchetto__voce--no { color: var(--clr-text-disabled); }
    .pacchetto__voce--no .material-symbols-outlined { color: var(--clr-text-disabled); }

    .numero-dimostrativo { border-style: dashed; }

    .formati-banner { display: grid; gap: 1rem; }
    .formato-banner { display: grid; grid-template-columns: 1fr; gap: 0.75rem; background: #FFFFFF; border: 1px solid var(--clr-divider); border-radius: 0.5rem; padding: 1rem; }
    .formato-banner__scala { width: 100%; }
    .formato-banner__anteprima {
        width: var(--larghezza, 100%); max-width: 100%; display: flex; align-items: center; justify-content: center;
        background: repeating-linear-gradient(135deg, var(--clr-area-surface) 0 10px, #FFFFFF 10px 20px);
        border: 1px dashed var(--clr-area-border); border-radius: 0.25rem; color: var(--clr-area); font-size: 0.8rem;
    }
    @media (min-width: 768px) {
        .formato-banner { grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); align-items: center; }
    }

    /* --------------------------------------------------------------------------
       Media kit (schermo: fogli A4 in anteprima; stampa: un foglio per pagina)
       -------------------------------------------------------------------------- */
    .media-kit-barra { margin-bottom: 1.5rem; }
    .media-kit-barra__azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; }
    .media-kit { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
    .mk-pagina {
        width: min(210mm, 100%); min-height: 297mm; padding: 14mm 15mm; position: relative;
        background: #FFFFFF; border: 1px solid var(--clr-border); border-radius: 0.25rem; display: flex; flex-direction: column;
        font-size: 0.85rem;
    }
    .mk-pagina--copertina { padding: 0; overflow: hidden; }
    .mk-copertina {
        background: var(--clr-blu); color: #FFFFFF; padding: 16mm 15mm 12mm; border-bottom: 8px solid var(--clr-ocra);
        background-image: linear-gradient(115deg, transparent 0 60%, rgba(12, 42, 66, 0.6) 60%);
    }
    .mk-copertina__testa { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 18mm; }
    .mk-copertina__anno { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-ocra); }
    .mk-copertina__titolo { font-family: var(--font-titoli); font-size: 3.75rem; font-weight: 700; text-transform: uppercase; line-height: 0.95; color: #FFFFFF; margin: 0 0 1rem; }
    .mk-copertina__sottotitolo { font-size: 1rem; color: rgba(255, 255, 255, 0.86); max-width: 52ch; }
    .mk-numeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 12mm; }
    .mk-numeri div { border-top: 2px solid var(--clr-ocra); padding-top: 0.5rem; display: flex; flex-direction: column; }
    .mk-numeri strong { font-family: var(--font-titoli); font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
    .mk-numeri span { font-size: 0.72rem; color: rgba(255, 255, 255, 0.75); }
    .mk-corpo { padding: 12mm 15mm 0; }
    .mk-titolo { font-family: var(--font-titoli); font-size: 1.35rem; font-weight: 600; text-transform: uppercase; color: var(--clr-blu); margin: 0 0 0.6rem; }
    .mk-titolo--grande { font-size: 2.2rem; font-weight: 700; margin-bottom: 1.25rem; }
    .mk-titolo--grande::after { content: ''; display: block; width: 56px; height: 4px; margin-top: 0.4rem; background: var(--clr-ocra); }
    .mk-sottotitolo { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-text-muted); margin: 1.25rem 0 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
    .mk-contatti { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
    .mk-tabella { font-size: 0.8rem; margin-bottom: 0; }
    .mk-elenco { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
    .mk-elenco li { display: flex; align-items: center; gap: 0.4rem; }
    .mk-elenco .material-symbols-outlined { color: var(--clr-blu); font-size: 1.05rem; }
    .mk-visite { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
    .mk-visite div { background: var(--clr-surface-alt); border-radius: 0.375rem; padding: 0.5rem 0.65rem; display: flex; flex-direction: column; }
    .mk-visite strong { font-family: var(--font-titoli); font-size: 1.6rem; line-height: 1; color: var(--clr-blu); }
    .mk-visite span { font-size: 0.7rem; color: var(--clr-text-muted); }
    .mk-mesi { width: 100%; height: auto; display: block; margin-bottom: 0.35rem; }
    .mk-mesi rect { fill: #9DB3C6; }
    .mk-mesi rect.mk-mesi__picco { fill: var(--clr-blu); }
    .mk-mesi text { font-family: var(--font-mono); font-size: 9px; fill: var(--clr-text-muted); }
    .mk-chiusura { margin-top: 1rem; padding: 0.75rem 1rem; background: var(--clr-area-surface); border-left: 4px solid var(--clr-ocra); border-radius: 0.25rem; }
    .mk-piede { margin: auto 0 0; padding-top: 1rem; font-size: 0.68rem; color: var(--clr-text-muted); border-top: 1px solid var(--clr-divider); }
    .mk-pagina--copertina .mk-piede { margin: auto 15mm 10mm; }
    @media screen and (max-width: 767.98px) {
        .mk-pagina { min-height: 0; padding: 1.25rem; }
        .mk-copertina { padding: 1.5rem 1.25rem; }
        .mk-corpo { padding: 1.25rem; }
        .mk-copertina__titolo { font-size: 2.5rem; }
        .mk-numeri { grid-template-columns: repeat(2, 1fr); }
        .mk-pagina .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
        .mk-pagina--copertina .mk-piede { margin: 1rem 1.25rem; }
        .mk-tabella { display: block; overflow-x: auto; }
    }

    /* --------------------------------------------------------------------------
       Volontari
       -------------------------------------------------------------------------- */
    .contatore-volontari {
        display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; padding: 1.15rem 1.35rem;
        background: #FFFFFF; border: 1px solid var(--clr-border); border-left: 4px solid var(--clr-ocra); border-radius: 0.5rem;
    }
    .contatore-volontari__numero { display: flex; align-items: baseline; gap: 0.6rem; }
    .contatore-volontari__numero .mono { font-family: var(--font-titoli); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--clr-blu); }
    .contatore-volontari__dettaglio { flex: 1; min-width: 240px; }
    .contatore-volontari .progress { height: 0.6rem; background: var(--clr-surface-alt); }
    .contatore-volontari .progress-bar { background: var(--clr-success); }

    .postazione__icona { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--clr-area-surface); color: var(--clr-area); }
    .turni { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .turni li { display: inline-flex; align-items: center; gap: 0.4rem; background: #FFFFFF; border: 1px solid var(--clr-divider); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.85rem; }

    /* --------------------------------------------------------------------------
       Contatti
       -------------------------------------------------------------------------- */
    .referente__recapiti { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; font-size: 0.875rem; }
    .referente__recapiti li { display: flex; align-items: center; gap: 0.4rem; min-height: 32px; word-break: break-word; }
    .referente__recapiti .material-symbols-outlined { color: var(--clr-area); }
    .mappa-contatti { height: 300px; background: var(--clr-surface-alt); border-radius: 0.5rem 0.5rem 0 0; z-index: 0; }

    /* --------------------------------------------------------------------------
       Newsletter
       -------------------------------------------------------------------------- */
    .segmento {
        display: flex; gap: 0.75rem; align-items: flex-start; height: 100%; padding: 0.85rem 1rem; cursor: pointer;
        background: #FFFFFF; border: 1px solid var(--clr-border); border-radius: 0.5rem; transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .segmento__icona { color: var(--clr-text-muted); font-size: 1.5rem; }
    .btn-check:checked + .segmento { border-color: var(--clr-ocra); box-shadow: inset 0 0 0 1px var(--clr-ocra); }
    .btn-check:checked + .segmento .segmento__icona { color: var(--clr-blu); }
    .btn-check:focus-visible + .segmento { box-shadow: var(--focus-ring); }

    .passi-verticali { padding-left: 1.25rem; display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
    .passi-verticali li::marker { font-family: var(--font-titoli); font-weight: 700; color: var(--clr-blu); }

    .email-anteprima { max-width: 620px; background: #FFFFFF; border: 1px solid var(--clr-border); border-radius: 0.5rem; overflow: hidden; }
    .email-anteprima__intestazione { display: grid; gap: 0.15rem; padding: 0.75rem 1.15rem; background: var(--clr-surface-alt); border-bottom: 1px solid var(--clr-divider); font-size: 0.8rem; }
    .email-anteprima__corpo { padding: 1.5rem 1.5rem 1rem; }
    .email-anteprima__corpo img { margin-bottom: 1rem; }
    .email-anteprima__piede { padding: 0.75rem 1.5rem; font-size: 0.72rem; color: var(--clr-text-muted); border-top: 1px solid var(--clr-divider); }

    .esito-newsletter { max-width: 680px; margin: 1rem auto 2rem; border-top: 3px solid var(--clr-area); }
    .esito-newsletter .card-body { padding: 2.5rem 1.5rem; }
    .esito-newsletter__icona {
        width: 4rem; height: 4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem;
        background: var(--clr-area-surface); color: var(--clr-area);
    }
    .esito-newsletter__icona .material-symbols-outlined { font-size: 2rem; }
    .esito-newsletter__icona--ok { background: var(--clr-success-bg); color: var(--clr-success); }
    .esito-newsletter__titolo { margin-bottom: 1rem; }
    .esito-newsletter__titolo::after { margin-left: auto; margin-right: auto; }
    .esito-newsletter__segmenti { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; }

    .anteprime-stati { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px dashed var(--clr-border-strong); }
    .anteprime-stati a { font-size: 0.8rem; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid var(--clr-border); text-decoration: none; background: #FFFFFF; }
    .anteprime-stati a.attivo { border-color: var(--clr-area); background: var(--clr-area-surface); font-weight: 600; }

    /* --------------------------------------------------------------------------
       Rimozione foto e pagine legali
       -------------------------------------------------------------------------- */
    .tempi-rimozione { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .tempi-rimozione li { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.15rem; background: #FFFFFF; border: 1px solid var(--clr-border); border-top: 3px solid var(--clr-area); border-radius: 0.5rem; font-size: 0.875rem; }
    .tempi-rimozione__quando { font-family: var(--font-titoli); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; color: var(--clr-blu); line-height: 1.1; }

    .indice-legale { list-style: none; padding: 0; margin: 0; position: sticky; top: 96px; border-left: 2px solid var(--clr-divider); }
    .indice-legale a { display: block; padding: 0.35rem 0.85rem; font-size: 0.875rem; text-decoration: none; color: var(--clr-text-muted); }
    .indice-legale a:hover { color: var(--clr-blu); }

    /* --------------------------------------------------------------------------
       Mobile
       -------------------------------------------------------------------------- */
    @media (max-width: 575.98px) {
        .citazione--grande p { font-size: 1.5rem; }
        .logo-segnaposto, .logo-segnaposto--main { width: 100%; aspect-ratio: auto; min-height: 120px; }
        .documento__azione { width: 100%; }
        .sponsor-card .card-body { flex-direction: column; align-items: stretch !important; }
    }

    @media (prefers-reduced-motion: reduce) {
        .documento__storico summary::after, .grafico-partecipanti__barra path, .logo-sponsor { transition: none; }
    }

    /* --------------------------------------------------------------------------
       Stampa: media kit A4 e volantino delle donazioni
       -------------------------------------------------------------------------- */
    @media print {
        .pagina-media-kit .media-kit { display: block; }
        .pagina-media-kit .mk-pagina {
            width: auto; min-height: 0; height: 271mm; border: 0; border-radius: 0; padding: 0;
            break-after: page; page-break-after: always; overflow: hidden;
        }
        .pagina-media-kit .mk-pagina:last-child { break-after: auto; page-break-after: auto; }
        .pagina-media-kit .mk-copertina,
        .pagina-media-kit .mk-chiusura,
        .pagina-media-kit .mk-visite div,
        .pagina-media-kit .grafico-partecipanti__barra path,
        .pagina-media-kit .mk-mesi rect { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        .pagina-media-kit .mk-copertina { background: #123A5A !important; color: #FFFFFF !important; }
        .pagina-media-kit .mk-copertina__titolo, .pagina-media-kit .mk-numeri strong { color: #FFFFFF !important; }
        .pagina-media-kit .contenuto-pagina { padding: 0; }
        .pagina-media-kit .table.mk-tabella { font-family: var(--font-testo); font-size: 8pt; }
        .pagina-media-kit .table.mk-tabella > :not(caption) > * > * { padding: 0.22rem 0.4rem; }
        .pagina-media-kit .mk-tabella .numeric { font-family: var(--font-mono); }
        .pagina-media-kit .mk-sottotitolo { margin-top: 0.8rem; }
        .pagina-media-kit::after { display: none; }

        &.stampa-volantino #contenuto > *:not(.sostieni-volantino),
        &.stampa-volantino .no-stampa-volantino { display: none !important; }
        &.stampa-volantino .sostieni-volantino { border: 0; padding: 0; }
        &.stampa-volantino .sostieni-volantino .col-lg-5 { flex: 0 0 100%; max-width: 100%; }
        &.stampa-volantino .volantino { max-width: 148mm; margin: 0 auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        &.stampa-volantino .volantino__titolo { color: #FFFFFF !important; }
        &.stampa-volantino::after { display: none; }
    }
}