/* =====================================================================
   Studio Legale Petillo — foglio di stile del sito pubblico

   Principi:
   - Accessibilità WCAG 2.2 AA: ogni colore di testo è verificato ≥ 4.5:1
     sul proprio sfondo; gli elementi di interfaccia ≥ 3:1.
   - L'oro storico dello Studio (#ca9b52) ha solo 2.5:1 su bianco. Resta
     quindi solo dove è puramente decorativo (filetti, aloni, bordi di
     riquadro), mentre esistono due varianti scurite per gli usi in cui il
     colore porta informazione: --oro-testo (#7d5e22, 6.0:1) per testo e
     link, --oro-stato (#a2762f, 4.1:1) per gli indicatori di interfaccia.
   - Tutto in unità relative: lo zoom al 200% non rompe nulla.
   - Le preferenze dell'utente (contrasto, dimensione, spaziatura, font)
     sono attributi su <html>, impostati dal JS e persistenti.
   ===================================================================== */

/* ---------- 1. Token ------------------------------------------------ */
:root {
    /* Colori di base */
    --inchiostro:        #14181d;   /* titoli — 17.8:1 su bianco */
    --testo:             #333a42;   /* corpo — 11.5:1 */
    --testo-tenue:       #5c6670;   /* metadati — 5.9:1 */
    --carta:             #ffffff;
    --carta-alt:         #f7f5f1;   /* sezioni alternate, avorio caldo */
    --carta-scura:       #1b2027;   /* footer e blocchi scuri */
    --bordo:             #ddd8cf;
    --bordo-forte:       #948a7b;   /* bordo dei campi: 3.4:1, soglia UI di WCAG 1.4.11 */

    /* Oro dello Studio */
    --oro:               #ca9b52;   /* decorativo: filetti, bordi, icone su scuro */
    --oro-testo:         #7d5e22;   /* testo e link su carta: 6.0:1 */
    --oro-testo-hover:   #5c4415;
    --oro-chiaro:        #f0e6d4;   /* fondi tenui */
    --oro-stato:         #a2762f;   /* indicatori di stato: 4.1:1, supera la soglia UI */
    --oro-su-scuro:      #e0bc7f;   /* oro su fondo scuro: 9.1:1 */

    /* Stati */
    --successo:          #1f6b3f;
    --successo-fondo:    #e8f4ed;
    --errore:            #9b1c1c;
    --errore-fondo:      #fdeaea;
    --avviso:            #7a5200;
    --avviso-fondo:      #fdf4e3;
    --focus:             #0b57d0;   /* blu di focus, 6.4:1 su bianco */

    /* Tipografia */
    --font-titoli: "Playfair Display", "Iowan Old Style", "Palatino Linotype",
                   Palatino, "Times New Roman", Georgia, serif;
    --font-testo:  "Source Sans 3", "Open Sans", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:   ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

    /* Scala tipografica fluida: si adatta senza media query */
    --t--1:  clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
    --t-0:   clamp(1.00rem, 0.97rem + 0.16vw, 1.13rem);
    --t-1:   clamp(1.15rem, 1.09rem + 0.30vw, 1.35rem);
    --t-2:   clamp(1.35rem, 1.24rem + 0.55vw, 1.75rem);
    --t-3:   clamp(1.60rem, 1.40rem + 1.00vw, 2.30rem);
    --t-4:   clamp(1.95rem, 1.58rem + 1.85vw, 3.10rem);
    --t-5:   clamp(2.30rem, 1.70rem + 3.00vw, 4.00rem);

    /* Spazio */
    --s-1: 0.375rem;
    --s-2: 0.75rem;
    --s-3: 1.25rem;
    --s-4: 2rem;
    --s-5: 3rem;
    --s-6: 4.5rem;
    --s-7: 7rem;

    /* Misure */
    --larghezza-max: 76rem;
    --larghezza-testo: 40rem;
    --raggio: 3px;
    --raggio-grande: 6px;

    /* Ombre discrete: lo studio non è una startup */
    --ombra-1: 0 1px 2px rgba(20, 24, 29, 0.06), 0 2px 8px rgba(20, 24, 29, 0.04);
    --ombra-2: 0 2px 4px rgba(20, 24, 29, 0.08), 0 8px 24px rgba(20, 24, 29, 0.07);

    --transizione: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modalità ad alto contrasto: attivata dagli strumenti di lettura.
   Non è un "tema scuro": è un aumento deliberato del contrasto. */
html[data-contrasto="alto"] {
    --inchiostro: #000000;
    --testo: #000000;
    --testo-tenue: #1a1a1a;
    --carta: #ffffff;
    --carta-alt: #ffffff;
    --carta-scura: #000000;
    --bordo: #000000;
    --bordo-forte: #000000;
    --oro: #000000;
    --oro-stato: #00368a;
    --oro-testo: #00368a;
    --oro-testo-hover: #001f52;
    --oro-chiaro: #ffffff;
    --oro-su-scuro: #ffe58a;
    --ombra-1: none;
    --ombra-2: none;
}
html[data-contrasto="alto"] * {
    text-shadow: none !important;
}
html[data-contrasto="alto"] a { text-decoration: underline; }
html[data-contrasto="alto"] .bottone,
html[data-contrasto="alto"] .scheda,
html[data-contrasto="alto"] input,
html[data-contrasto="alto"] select,
html[data-contrasto="alto"] textarea { border: 2px solid #000 !important; }

/* Carattere ad alta leggibilità */
html[data-font="leggibile"] {
    --font-titoli: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif;
    --font-testo: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif;
}

/* Spaziatura aumentata: soddisfa il criterio WCAG 1.4.12 con margine */
html[data-spaziatura="ampia"] {
    --interlinea: 1.9;
}
html[data-spaziatura="ampia"] p,
html[data-spaziatura="ampia"] li,
html[data-spaziatura="ampia"] dd {
    line-height: 1.9;
    letter-spacing: 0.06em;
    word-spacing: 0.14em;
}
html[data-spaziatura="ampia"] p { margin-bottom: 2.2em; }

/* Link sempre evidenziati */
html[data-link="evidenziati"] .contenuto a,
html[data-link="evidenziati"] main a:not(.bottone) {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    background-color: var(--oro-chiaro);
    padding: 0 0.15em;
}

/* ---------- 2. Reset ragionato -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    /* La dimensione base è impostata dal JS come percentuale: l'utente può
       ingrandire fino al 200% senza toccare lo zoom del browser. */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
html[data-animazioni="ridotte"] *,
html[data-animazioni="ridotte"] *::before,
html[data-animazioni="ridotte"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

body {
    margin: 0;
    font-family: var(--font-testo);
    font-size: var(--t-0);
    line-height: var(--interlinea, 1.68);
    color: var(--testo);
    background-color: var(--carta);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }
svg { fill: currentColor; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titoli);
    color: var(--inchiostro);
    line-height: 1.18;
    margin: 0 0 var(--s-2);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
h1 { font-size: var(--t-4); }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-2); }
h4 { font-size: var(--t-1); }
h5, h6 { font-size: var(--t-0); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.4em; }

/* Il respiro fra le voci serve agli elenchi che si leggono, non a quelli che
   si usano. Applicandolo a tutti gli `li` finiva anche nei menu: in un
   contenitore flex allineato al centro il margine inferiore entra nel calcolo
   dell'allineamento, così le voci con margine salivano di qualche pixel e
   l'ultima — che ha il margine azzerato — restava più in basso.
   `:where()` ha specificità zero: i componenti che definiscono i propri
   margini continuano a vincere senza dover ricorrere a `!important`. */
:where(.prosa, .contenuto, .riquadro, .avviso, .vuoto, blockquote, td, dd) li {
    margin-bottom: 0.45em;
}
:where(.prosa, .contenuto, .riquadro, .avviso, .vuoto, blockquote, td, dd) li:last-child {
    margin-bottom: 0;
}

a {
    color: var(--oro-testo);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--transizione);
}
a:hover { color: var(--oro-testo-hover); text-decoration-thickness: 2px; }

/* Focus sempre visibile e sempre a contrasto sufficiente (WCAG 2.4.11/2.4.13) */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Nessun elemento perde il focus visibile, nemmeno su fondo scuro */
.sezione--scura :focus-visible,
.pie :focus-visible { outline-color: #ffd873; }

blockquote {
    margin: var(--s-4) 0;
    padding: var(--s-2) 0 var(--s-2) var(--s-3);
    border-left: 3px solid var(--oro);
    font-style: italic;
    color: var(--testo);
}
blockquote p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--bordo); margin: var(--s-5) 0; }

table { border-collapse: collapse; width: 100%; font-size: var(--t--1); }
th, td { padding: var(--s-2); text-align: left; border-bottom: 1px solid var(--bordo); }
th { font-weight: 600; color: var(--inchiostro); background: var(--carta-alt); }

code { font-family: var(--font-mono); font-size: 0.92em; background: var(--carta-alt); padding: 0.1em 0.35em; }

/* ---------- 3. Utilità ---------------------------------------------- */
.solo-lettori-schermo {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.salta-al-contenuto {
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -110%);
    z-index: 1000;
    background: var(--carta-scura);
    color: #fff;
    padding: var(--s-2) var(--s-3);
    border-radius: 0 0 var(--raggio) var(--raggio);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--transizione);
}
.salta-al-contenuto:focus {
    transform: translate(-50%, 0);
    color: #fff;
}

.contenitore {
    width: 100%;
    max-width: var(--larghezza-max);
    margin-inline: auto;
    padding-inline: var(--s-3);
}
.contenitore--stretto { max-width: 52rem; }

.sezione { padding-block: var(--s-6); }
.sezione--compatta { padding-block: var(--s-5); }
.sezione--alt { background: var(--carta-alt); }
.sezione--scura {
    background: var(--carta-scura);
    color: #e6e3de;
}
.sezione--scura h1, .sezione--scura h2, .sezione--scura h3 { color: #fff; }
.sezione--scura a { color: var(--oro-su-scuro); }
.sezione--scura a:hover { color: #fff; }

.prosa { max-width: var(--larghezza-testo); }
.prosa--larga { max-width: 46rem; }
.prosa h2 { margin-top: var(--s-5); }
.prosa h3 { margin-top: var(--s-4); }
.prosa > *:first-child { margin-top: 0; }
.prosa img { margin-block: var(--s-3); border-radius: var(--raggio); }
.prosa figure { margin: var(--s-4) 0; }
.prosa figcaption {
    font-size: var(--t--1);
    color: var(--testo-tenue);
    margin-top: var(--s-1);
    font-style: italic;
}

.occhiello {
    display: block;
    font-family: var(--font-testo);
    font-size: var(--t--1);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oro-testo);
    margin-bottom: var(--s-2);
}
.sezione--scura .occhiello { color: var(--oro-su-scuro); }

.filetto {
    width: 3rem;
    height: 2px;
    background: var(--oro);
    border: 0;
    margin: var(--s-3) 0;
}
.filetto--centrato { margin-inline: auto; }

.testo-tenue { color: var(--testo-tenue); }
.testo-centrato { text-align: center; }
.mt-0 { margin-top: 0; }

/* ---------- 4. Bottoni ---------------------------------------------- */
.bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    /* L'area di contatto rispetta il minimo di 24×24 px (WCAG 2.5.8),
       qui abbondantemente superato. */
    min-height: 2.9rem;
    padding: 0.7em 1.5em;
    font-family: var(--font-testo);
    font-size: var(--t-0);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--raggio);
    cursor: pointer;
    transition: background-color var(--transizione), color var(--transizione),
                border-color var(--transizione), transform var(--transizione);
}
.bottone:hover { transform: translateY(-1px); text-decoration: none; }
.bottone:active { transform: translateY(0); }

.bottone--primario {
    background: var(--carta-scura);
    color: #ffffff;
    border-color: var(--carta-scura);
}
.bottone--primario:hover { background: #2c343e; border-color: #2c343e; color: #fff; }

.bottone--oro {
    background: var(--oro);
    color: #1b1408;           /* scuro su oro: 7.2:1 */
    border-color: var(--oro);
}
.bottone--oro:hover { background: #b8873d; border-color: #b8873d; color: #1b1408; }

.bottone--contorno {
    background: transparent;
    color: var(--oro-testo);
    border-color: var(--bordo-forte);
}
.bottone--contorno:hover {
    background: var(--oro-chiaro);
    border-color: var(--oro);
    color: var(--oro-testo-hover);
}
.sezione--scura .bottone--contorno {
    color: var(--oro-su-scuro);
    border-color: rgba(224, 188, 127, 0.5);
}
.sezione--scura .bottone--contorno:hover {
    background: rgba(224, 188, 127, 0.12);
    border-color: var(--oro-su-scuro);
    color: #fff;
}

.bottone--piccolo { min-height: 2.4rem; padding: 0.45em 1em; font-size: var(--t--1); }
.bottone--largo { width: 100%; }

/* Link con freccia: l'indicazione non è affidata al solo colore */
.link-freccia {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 0.1em;
}
.link-freccia::after { content: "→"; transition: transform var(--transizione); }
.link-freccia:hover::after { transform: translateX(3px); }

/* ---------- 5. Intestazione ----------------------------------------- */
.testata {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--carta);
    border-bottom: 1px solid var(--bordo);
}
.testata__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    min-height: 4.5rem;
}

.marchio {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    text-decoration: none;
    color: var(--inchiostro);
    /* Cede spazio invece di spingere fuori schermo ciò che gli sta accanto.
       Con flex-shrink: 0 la barra sbordava di 97px a 320px di larghezza e il
       pulsante del menu, ultimo della fila, finiva fuori dallo schermo. */
    flex-shrink: 1;
    min-width: 0;
}
.marchio:hover { color: var(--inchiostro); }
.marchio__segno {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    color: var(--oro);
}
.marchio__testo { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.marchio__nome {
    font-family: var(--font-titoli);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    /* Rete di sicurezza: se lo spazio mancasse comunque, il nome si accorcia
       invece di allargare la barra. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.marchio__sotto {
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--testo-tenue);
    margin-top: 0.15em;
}

.nav-principale { display: flex; align-items: center; gap: var(--s-3); }
.nav-principale__lista {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-principale__voce > a {
    display: block;
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--testo);
    text-decoration: none;
    border-radius: var(--raggio);
    position: relative;
}
.nav-principale__voce > a:hover { color: var(--oro-testo); background: var(--carta-alt); }
.nav-principale__voce > a[aria-current="page"] {
    color: var(--inchiostro);
}
/* La pagina corrente non è segnalata dal solo colore: c'è anche il filetto */
.nav-principale__voce > a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0.7rem; right: 0.7rem; bottom: 0.15rem;
    height: 3px;
    background: var(--oro-stato);
}

.testata__azioni { display: flex; align-items: center; gap: var(--s-1); }

.bottone-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--raggio);
    color: var(--testo);
    cursor: pointer;
    transition: background-color var(--transizione), color var(--transizione);
}
.bottone-icona:hover { background: var(--carta-alt); color: var(--oro-testo); }
.bottone-icona svg { width: 1.35rem; height: 1.35rem; }

.menu-mobile-apri { display: none; }

/* Selettore di lingua */
.lingue { position: relative; }
.lingue__attivo {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-height: 2.75rem;
    padding: 0 0.7rem;
    background: transparent;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--testo);
    cursor: pointer;
}
.lingue__attivo:hover { border-color: var(--oro); color: var(--oro-testo); }
.lingue__attivo svg { width: 0.7rem; height: 0.7rem; transition: transform var(--transizione); }
.lingue__attivo[aria-expanded="true"] svg { transform: rotate(180deg); }
.lingue__elenco {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 11rem;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-2);
    z-index: 120;
}
.lingue__elenco[hidden] { display: none; }
.lingue__elenco a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: 0.5rem 0.7rem;
    font-size: 0.95rem;
    color: var(--testo);
    text-decoration: none;
    border-radius: var(--raggio);
}
.lingue__elenco a:hover { background: var(--carta-alt); color: var(--oro-testo); }
.lingue__elenco a[aria-current="true"] { font-weight: 700; color: var(--inchiostro); }
.lingue__elenco a[aria-current="true"]::after { content: "✓"; color: var(--oro-testo); }
.lingue__codice {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--testo-tenue);
}

/* Menu mobile */
@media (max-width: 62rem) {
    .menu-mobile-apri { display: inline-flex; }
    .nav-principale {
        position: fixed;
        inset: 0;
        z-index: 200;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: var(--s-3);
        background: var(--carta);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform var(--transizione);
        visibility: hidden;
    }
    .nav-principale[data-aperto="1"] { transform: translateX(0); visibility: visible; }
    .nav-principale__testa {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: var(--s-3);
        border-bottom: 1px solid var(--bordo);
        margin-bottom: var(--s-2);
    }
    .nav-principale__lista { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-principale__voce > a {
        padding: 0.95rem 0.5rem;
        font-size: var(--t-1);
        border-bottom: 1px solid var(--bordo);
        border-radius: 0;
    }
    .nav-principale__voce > a[aria-current="page"]::after { left: 0.5rem; bottom: 0.4rem; }

    /* Telefono e lingua: nella barra non c'è posto, qui sì. */
    .testata__azioni > a[href^="tel:"],
    .testata__azioni > .lingue { display: none; }

    .nav-principale__extra { display: block; margin-top: var(--s-3); }
    .nav-principale__telefono {
        display: flex;
        align-items: center;
        gap: var(--s-2);
        min-height: 2.75rem;
        padding: 0.7rem 0.5rem;
        font-weight: 600;
        color: var(--testo);
        text-decoration: none;
        border-bottom: 1px solid var(--bordo);
    }
    .nav-principale__telefono:hover { color: var(--oro-testo); }
    .nav-principale__telefono svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }

    .nav-principale__etichetta {
        margin: var(--s-3) 0 var(--s-1);
        padding-inline: 0.5rem;
        font-size: var(--t--1);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--testo-tenue);
    }
    .nav-principale__lingue {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-1);
        list-style: none;
        margin: 0;
        padding: 0 0.5rem;
    }
    .nav-principale__lingue a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0 0.9rem;
        border: 1px solid var(--bordo);
        border-radius: var(--raggio);
        color: var(--testo);
        text-decoration: none;
        font-size: 0.95rem;
    }
    .nav-principale__lingue a:hover { color: var(--oro-testo); border-color: var(--oro-stato); }
    /* La lingua in uso non è segnalata dal solo colore */
    .nav-principale__lingue a[aria-current="true"] {
        border-color: var(--oro-stato);
        box-shadow: inset 0 0 0 1px var(--oro-stato);
        font-weight: 700;
    }
}

/* Sotto i 416px i conti restano stretti anche con due comandi in meno:
   il marchio si rimpicciolisce quel tanto che basta. */
@media (max-width: 26rem) {
    .marchio__segno { width: 2rem; height: 2rem; }
    .marchio__nome { font-size: 1rem; }
    .marchio__sotto { font-size: 0.6rem; letter-spacing: 0.18em; }
}
@media (min-width: 62.01rem) {
    .nav-principale__testa { display: none; }
    /* Da desktop telefono e lingua tornano nella barra, dove c'è spazio. */
    .nav-principale__extra { display: none; }
}

/* ---------- 6. Hero ------------------------------------------------- */
.hero {
    position: relative;
    padding-block: var(--s-7) var(--s-6);
    background:
        linear-gradient(180deg, rgba(27, 32, 39, 0) 0%, rgba(27, 32, 39, 0.02) 100%),
        var(--carta-alt);
    border-bottom: 1px solid var(--bordo);
    overflow: hidden;
}
.hero::before {
    /* Filigrana decorativa: puramente ornamentale, aria-hidden nel markup */
    content: "";
    position: absolute;
    top: -30%;
    right: -12%;
    width: 42rem;
    height: 42rem;
    background: radial-gradient(circle, rgba(202, 155, 82, 0.12) 0%, rgba(202, 155, 82, 0) 68%);
    pointer-events: none;
}
.hero__contenuto { position: relative; max-width: 46rem; }
.hero__titolo { font-size: var(--t-5); margin-bottom: var(--s-3); }
.hero__sottotitolo {
    font-size: var(--t-1);
    color: var(--testo);
    max-width: 38rem;
    margin-bottom: var(--s-4);
}
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.intestazione-pagina {
    padding-block: var(--s-5) var(--s-4);
    background: var(--carta-alt);
    border-bottom: 1px solid var(--bordo);
}
.intestazione-pagina h1 { margin-bottom: var(--s-2); }
.intestazione-pagina__intro {
    font-size: var(--t-1);
    color: var(--testo);
    max-width: 44rem;
    margin: 0;
}

/* Briciole */
.briciole { padding-block: var(--s-2); font-size: var(--t--1); }
.briciole__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45em;
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--testo-tenue);
}
.briciole__lista li::after { content: "›"; margin-left: 0.45em; color: var(--bordo-forte); }
.briciole__lista li:last-child::after { content: none; }
.briciole a { color: var(--testo-tenue); }
.briciole a:hover { color: var(--oro-testo); }
.briciole [aria-current="page"] { color: var(--testo); font-weight: 600; }

/* ---------- 7. Griglie e schede ------------------------------------- */
.griglia {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.griglia--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.griglia--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.griglia--larga { gap: var(--s-4); }

.scheda {
    display: flex;
    flex-direction: column;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande);
    overflow: hidden;
    transition: border-color var(--transizione), box-shadow var(--transizione), transform var(--transizione);
}
.scheda:hover { border-color: var(--oro); box-shadow: var(--ombra-2); transform: translateY(-2px); }
.scheda:focus-within { border-color: var(--focus); }
.scheda__media { position: relative; background: var(--carta-alt); aspect-ratio: 16 / 9; }
.scheda__media img { width: 100%; height: 100%; object-fit: cover; }
.scheda__corpo { display: flex; flex-direction: column; flex: 1; padding: var(--s-3); gap: var(--s-2); }
.scheda__titolo { font-size: var(--t-1); margin: 0; }
.scheda__titolo a { color: var(--inchiostro); text-decoration: none; }
.scheda__titolo a:hover { color: var(--oro-testo); }
/* Tutta la scheda è cliccabile, ma il link accessibile resta uno solo */
.scheda__titolo a::after { content: ""; position: absolute; inset: 0; }
.scheda { position: relative; }
.scheda__testo { margin: 0; color: var(--testo); font-size: 0.97rem; flex: 1; }
.scheda__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em var(--s-2);
    font-size: var(--t--1);
    color: var(--testo-tenue);
    margin: 0;
}
.scheda__pie {
    padding: var(--s-2) var(--s-3);
    border-top: 1px solid var(--bordo);
    background: var(--carta-alt);
    font-size: var(--t--1);
}

/* Scheda materia */
.scheda-materia {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-3);
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande);
    border-top: 3px solid var(--oro);
    transition: box-shadow var(--transizione), transform var(--transizione);
}
.scheda-materia:hover { box-shadow: var(--ombra-2); transform: translateY(-2px); }
.scheda-materia__icona { width: 2.2rem; height: 2.2rem; color: var(--oro-testo); }
.scheda-materia h3 { font-size: var(--t-1); margin: 0; }
.scheda-materia h3 a { color: var(--inchiostro); text-decoration: none; }
.scheda-materia h3 a::after { content: ""; position: absolute; inset: 0; }
.scheda-materia h3 a:hover { color: var(--oro-testo); }
.scheda-materia p { margin: 0; font-size: 0.97rem; }

/* Scheda persona */
.scheda-persona {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande);
    overflow: hidden;
    transition: box-shadow var(--transizione), transform var(--transizione), border-color var(--transizione);
}
.scheda-persona:hover { box-shadow: var(--ombra-2); transform: translateY(-2px); border-color: var(--oro); }
.scheda-persona__foto { aspect-ratio: 3 / 4; background: var(--carta-alt); }
.scheda-persona__foto img { width: 100%; height: 100%; object-fit: cover; }
.scheda-persona__vuota {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--carta-alt) 0%, var(--oro-chiaro) 100%);
    color: var(--oro-testo);
    font-family: var(--font-titoli);
    font-size: var(--t-4);
    font-weight: 700;
}
.scheda-persona__corpo { padding: var(--s-3); }
.scheda-persona__nome { font-size: var(--t-1); margin: 0 0 0.2em; }
.scheda-persona__nome a { color: var(--inchiostro); text-decoration: none; }
.scheda-persona__nome a::after { content: ""; position: absolute; inset: 0; }
.scheda-persona__nome a:hover { color: var(--oro-testo); }
.scheda-persona__ruolo { margin: 0; font-size: var(--t--1); color: var(--testo-tenue); }

/* Pilastri (i quattro punti della pagina Studio) */
.pilastri { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.pilastro {
    padding: var(--s-4) var(--s-3);
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande);
    text-align: center;
}
.pilastro__icona {
    width: 2.6rem; height: 2.6rem;
    margin: 0 auto var(--s-2);
    color: var(--oro-testo);
}
.pilastro h3 {
    font-family: var(--font-testo);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--oro-testo);
    margin-bottom: var(--s-1);
}
.pilastro p { margin: 0; font-size: 0.97rem; }

/* ---------- 8. Elenchi di servizi ----------------------------------- */
.servizi { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.1rem; }
.servizi li {
    position: relative;
    padding: 0.65em 0 0.65em 1.9em;
    border-bottom: 1px solid var(--bordo);
    margin: 0;
}
.servizi li:last-child { border-bottom: 0; }
.servizi li::before {
    content: "";
    position: absolute;
    left: 0.35em;
    top: 1.15em;
    width: 0.55em;
    height: 0.55em;
    border-right: 2px solid var(--oro-stato);
    border-bottom: 2px solid var(--oro-stato);
    transform: rotate(-45deg);
}
@media (min-width: 48rem) {
    .servizi--due-colonne { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
}

/* ---------- 9. News ------------------------------------------------- */
.etichetta {
    display: inline-block;
    padding: 0.2em 0.7em;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--oro-testo);
    background: var(--oro-chiaro);
    border-radius: 999px;
    text-decoration: none;
}
a.etichetta:hover { background: var(--oro); color: #1b1408; }

.etichette { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }

.articolo__testata { margin-bottom: var(--s-4); }
.articolo__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em var(--s-2);
    font-size: var(--t--1);
    color: var(--testo-tenue);
    margin-bottom: var(--s-2);
}
.articolo__sommario {
    font-size: var(--t-1);
    color: var(--testo);
    font-weight: 400;
    margin-bottom: var(--s-3);
    padding-left: var(--s-3);
    border-left: 3px solid var(--oro);
}
.articolo__immagine {
    margin-block: var(--s-4);
    border-radius: var(--raggio-grande);
    overflow: hidden;
    background: var(--carta-alt);
}
.articolo__immagine img { width: 100%; }

/* Allegati */
.allegati { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.allegato {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--oro-stato);
    border-radius: var(--raggio);
    transition: border-color var(--transizione), box-shadow var(--transizione);
    margin: 0;
}
.allegato:hover { box-shadow: var(--ombra-1); border-color: var(--oro); border-left-color: var(--oro); }
.allegato__icona { flex-shrink: 0; width: 1.6rem; height: 1.6rem; color: #9b1c1c; }
.allegato__corpo { flex: 1; min-width: 0; }
.allegato__titolo { display: block; font-weight: 600; color: var(--inchiostro); text-decoration: none; }
.allegato__titolo:hover { color: var(--oro-testo); text-decoration: underline; }
.allegato__meta { display: block; font-size: var(--t--1); color: var(--testo-tenue); margin-top: 0.15em; }

/* ---------- 10. Paginazione ----------------------------------------- */
.paginazione { margin-top: var(--s-5); }
.paginazione__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.paginazione a, .paginazione span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    min-height: 2.6rem;
    padding: 0 0.7em;
    font-weight: 600;
    text-decoration: none;
    color: var(--testo);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}
.paginazione a:hover { border-color: var(--oro); background: var(--oro-chiaro); color: var(--oro-testo-hover); }
.paginazione [aria-current="page"] {
    background: var(--carta-scura);
    border-color: var(--carta-scura);
    color: #fff;
}
.paginazione .disabilitato { opacity: 0.45; border-style: dashed; }

/* ---------- 11. Moduli ---------------------------------------------- */
.campo { margin-bottom: var(--s-3); }
.campo__etichetta {
    display: block;
    font-weight: 600;
    color: var(--inchiostro);
    margin-bottom: 0.35em;
}
.campo__obbligatorio { color: var(--errore); margin-left: 0.15em; }
.campo__aiuto {
    display: block;
    font-size: var(--t--1);
    color: var(--testo-tenue);
    margin-top: 0.3em;
}
.campo__errore {
    display: flex;
    align-items: flex-start;
    gap: 0.4em;
    font-size: var(--t--1);
    font-weight: 600;
    color: var(--errore);
    margin-top: 0.35em;
}
.campo__errore::before { content: "⚠"; flex-shrink: 0; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="search"], select, textarea {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.6em 0.8em;
    font-family: inherit;
    font-size: var(--t-0);
    color: var(--testo);
    background: var(--carta);
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio);
    transition: border-color var(--transizione), box-shadow var(--transizione);
}
textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
select {
    appearance: none;
    padding-right: 2.4em;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23636d77' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9em center;
    background-size: 0.7em;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(11, 87, 208, 0.16);
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
    border-color: var(--errore);
    border-width: 2px;
}
input[type="file"] {
    width: 100%;
    padding: 0.6em;
    font-size: var(--t--1);
    border: 1px dashed var(--bordo-forte);
    border-radius: var(--raggio);
    background: var(--carta-alt);
}
/* Il segnaposto è testo a tutti gli effetti: deve superare 4.5:1 */
input::placeholder, textarea::placeholder { color: #636d77; opacity: 1; }

.campo-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.7em;
    margin-bottom: var(--s-3);
}
.campo-checkbox input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.2em;
    accent-color: var(--carta-scura);
    cursor: pointer;
}
.campo-checkbox label { cursor: pointer; font-size: 0.97rem; }

fieldset { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: var(--s-3); margin: 0 0 var(--s-3); }
legend { padding-inline: 0.5em; font-weight: 700; color: var(--inchiostro); }

.modulo__legenda { font-size: var(--t--1); color: var(--testo-tenue); margin-bottom: var(--s-3); }

/* Honeypot: invisibile all'utente ma raggiungibile dai bot.
   Non usa display:none, che alcuni bot riconoscono. */
.trappola {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ---------- 12. Avvisi ---------------------------------------------- */
.avviso {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-3);
    border-radius: var(--raggio);
    border-left: 4px solid;
    margin-bottom: var(--s-3);
}
.avviso__icona { flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin-top: 0.1em; }
.avviso__titolo { font-weight: 700; margin: 0 0 0.25em; font-family: var(--font-testo); font-size: var(--t-0); }
.avviso p:last-child { margin-bottom: 0; }
.avviso--successo { background: var(--successo-fondo); border-color: var(--successo); color: #14472a; }
.avviso--errore { background: var(--errore-fondo); border-color: var(--errore); color: #6d1414; }
.avviso--info { background: var(--oro-chiaro); border-color: var(--oro); color: #4a3611; }
.avviso--attenzione { background: var(--avviso-fondo); border-color: var(--avviso); color: #5c3e00; }

/* Avviso sull'origine dei documenti */
.avviso-autore {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-3);
    margin-bottom: var(--s-3);
    background: var(--carta-alt);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--oro-stato);
    border-radius: var(--raggio);
}
.avviso-autore__icona {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0.15em;
    color: var(--oro-testo);
}
.avviso-autore__corpo { font-size: 0.95rem; }
.avviso-autore__titolo {
    font-weight: 700;
    color: var(--inchiostro);
    margin-bottom: 0.2em;
}
.avviso-autore p:last-child { margin-bottom: 0; }

/* Nota sul fallback di lingua */
.nota-traduzione {
    display: block;
    padding: var(--s-2) var(--s-3);
    margin-bottom: var(--s-3);
    font-size: var(--t--1);
    background: var(--carta-alt);
    border-left: 3px solid var(--bordo-forte);
    color: var(--testo-tenue);
}

/* ---------- 13. Click-to-load (mappe e video) ------------------------ */
.terza-parte {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 16rem;
    padding: var(--s-4) var(--s-3);
    text-align: center;
    background:
        repeating-linear-gradient(45deg, var(--carta-alt) 0 12px, #efece6 12px 24px);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande);
    overflow: hidden;
}
.terza-parte--video { aspect-ratio: 16 / 9; min-height: 0; padding: 0; }
.terza-parte__contenuto { max-width: 30rem; padding: var(--s-3); }
.terza-parte__icona { width: 2.5rem; height: 2.5rem; margin: 0 auto var(--s-2); color: var(--testo-tenue); }
.terza-parte__avviso { font-size: var(--t--1); color: var(--testo); margin-bottom: var(--s-3); }
.terza-parte iframe { width: 100%; height: 100%; border: 0; display: block; }
.terza-parte__anteprima {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.5) brightness(0.55);
}
.terza-parte--video .terza-parte__contenuto {
    position: relative;
    z-index: 1;
    color: #fff;
    background: rgba(20, 24, 29, 0.78);
    border-radius: var(--raggio-grande);
}
.terza-parte--video .terza-parte__avviso { color: #e6e3de; }
.terza-parte--video .terza-parte__icona { color: #fff; }

.video-incorporato { aspect-ratio: 16 / 9; }
.video-incorporato iframe { width: 100%; height: 100%; border: 0; border-radius: var(--raggio-grande); }

.convegno { margin-bottom: var(--s-4); }
.convegno__titolo { font-size: var(--t-1); margin-bottom: var(--s-1); }
.convegno__meta { font-size: var(--t--1); color: var(--testo-tenue); margin-bottom: var(--s-2); }

/* Scheda del singolo convegno */
.convegno-scheda { max-width: 46rem; display: flex; flex-direction: column; gap: var(--s-4); }

/* Locandina: proporzioni proprie e mai ritagliata. Un manifesto tagliato
   perde data, luogo e programma, cioè tutto ciò che lo rende utile. */
.locandina { margin: 0; }
.locandina img { width: 100%; height: auto; border-radius: var(--raggio-grande); border: 1px solid var(--bordo); }
.locandina__didascalia { margin-top: var(--s-2); font-size: var(--t--1); color: var(--testo-tenue); }

/* Nella scheda la locandina sta dentro un riquadro di proporzioni fisse, per
   non far saltare la griglia, ma vi entra per intero: contain, non cover. */
.scheda__media--locandina { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--s-2); }
.scheda__media--locandina img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

.scheda__fregio {
    position: absolute;
    top: var(--s-2);
    left: var(--s-2);
    z-index: 1;
    padding: 0.2em 0.7em;
    border-radius: 999px;
    background: var(--carta-scura);
    color: #ffd873;
    font-size: var(--t--1);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Fascia dei convegni annunciati. Sfondo proprio invece di entrare
   nell'alternanza di sezione--alt, che si invertirebbe sotto a seconda che
   un convegno sia in programma o no. */
.sezione--evidenza {
    background: var(--carta-alt);
    border-block: 1px solid var(--bordo);
}

/* ---------- 14. Strumenti di lettura -------------------------------- */
.strumenti { position: relative; }
.strumenti__pannello {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    width: min(22rem, calc(100vw - 2rem));
    padding: var(--s-3);
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra-2);
    z-index: 150;
}
.strumenti__pannello[hidden] { display: none; }
.strumenti__titolo {
    font-family: var(--font-testo);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--testo-tenue);
    margin-bottom: var(--s-2);
}
.strumenti__gruppo { margin-bottom: var(--s-3); }
.strumenti__etichetta { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4em; }
.strumenti__zoom { display: flex; align-items: center; gap: 0.4rem; }
.strumenti__zoom button {
    flex: 1;
    min-height: 2.6rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    background: var(--carta-alt);
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio);
    cursor: pointer;
    color: var(--testo);
}
.strumenti__zoom button:hover { background: var(--oro-chiaro); border-color: var(--oro); }
.strumenti__valore {
    min-width: 4rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--inchiostro);
}
.interruttore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    width: 100%;
    min-height: 2.8rem;
    padding: 0.45rem 0.6rem;
    font-family: inherit;
    font-size: 0.95rem;
    text-align: left;
    color: var(--testo);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--raggio);
    cursor: pointer;
}
.interruttore:hover { background: var(--carta-alt); }
.interruttore__spia {
    flex-shrink: 0;
    width: 2.6rem;
    height: 1.5rem;
    background: #c9c3b8;
    border-radius: 999px;
    position: relative;
    transition: background-color var(--transizione);
}
.interruttore__spia::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 1.1rem; height: 1.1rem;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--transizione);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.interruttore[aria-pressed="true"] .interruttore__spia { background: var(--successo); }
.interruttore[aria-pressed="true"] .interruttore__spia::after { transform: translateX(1.1rem); }
/* Lo stato non dipende dal solo colore: compare anche il segno di spunta */
.interruttore[aria-pressed="true"] .interruttore__testo::after { content: " ✓"; font-weight: 700; }

/* ---------- 15. Banner cookie --------------------------------------- */
.cookie {
    position: fixed;
    left: 50%;
    bottom: var(--s-2);
    transform: translateX(-50%);
    width: min(60rem, calc(100vw - 1.5rem));
    z-index: 900;
    padding: var(--s-3) var(--s-4);
    background: var(--carta);
    border: 1px solid var(--bordo-forte);
    border-top: 3px solid var(--oro);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra-2);
}
.cookie[hidden] { display: none; }
.cookie__titolo { font-size: var(--t-1); margin-bottom: var(--s-1); }
.cookie__testo { font-size: 0.95rem; margin-bottom: var(--s-3); }
.cookie__azioni { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* "Accetta" e "Rifiuta" hanno lo stesso peso visivo: lo impone il Garante */
.cookie__azioni .bottone--primario,
.cookie__azioni .bottone--rifiuta { flex: 1 1 10rem; }
.bottone--rifiuta {
    background: var(--carta);
    color: var(--inchiostro);
    border-color: var(--carta-scura);
}
.bottone--rifiuta:hover { background: var(--carta-alt); color: var(--inchiostro); }
.cookie__dettagli { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--bordo); }
.cookie__dettagli[hidden] { display: none; }
.cookie__categoria {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--bordo);
}
.cookie__categoria:last-child { border-bottom: 0; }
.cookie__categoria h3 { font-family: var(--font-testo); font-size: 0.98rem; margin: 0 0 0.2em; }
.cookie__categoria p { margin: 0; font-size: var(--t--1); color: var(--testo-tenue); }
.cookie__fisso { font-size: var(--t--1); color: var(--successo); font-weight: 700; white-space: nowrap; }

/* ---------- 16. Piè di pagina --------------------------------------- */
.pie {
    margin-top: auto;
    background: var(--carta-scura);
    color: #c8c4bd;
    padding-block: var(--s-5) var(--s-3);
    font-size: 0.95rem;
}
.pie a { color: #ded9d1; text-decoration: none; }
.pie a:hover { color: var(--oro-su-scuro); text-decoration: underline; }
.pie__griglia {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    padding-bottom: var(--s-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pie__titolo {
    font-family: var(--font-testo);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oro-su-scuro);
    margin-bottom: var(--s-2);
}
.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista li { margin-bottom: 0.5em; }
.pie__marchio { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.pie__marchio svg { width: 2.2rem; height: 2.2rem; color: var(--oro); }
.pie__marchio-nome { font-family: var(--font-titoli); font-size: 1.15rem; color: #fff; font-weight: 700; }
.pie__social { display: flex; gap: var(--s-1); margin-top: var(--s-2); }
.pie__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem; height: 2.6rem;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--raggio);
}
.pie__social a:hover { border-color: var(--oro); background: rgba(202,155,82,0.15); }
.pie__social svg { width: 1.2rem; height: 1.2rem; }
.pie__coda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding-top: var(--s-3);
    font-size: var(--t--1);
    color: #9d9890;
}
.pie__coda-link { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.pie__revoca {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: #ded9d1;
    text-decoration: underline;
    cursor: pointer;
}
.pie__revoca:hover { color: var(--oro-su-scuro); }

/* ---------- 17. Blocchi vari ---------------------------------------- */
.richiamo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4);
    background: var(--carta-scura);
    color: #e6e3de;
    border-radius: var(--raggio-grande);
    border-left: 4px solid var(--oro);
}
.richiamo h2 { color: #fff; margin-bottom: var(--s-1); font-size: var(--t-2); }
.richiamo p { margin: 0; max-width: 34rem; }

.contatto-blocco { display: grid; gap: var(--s-2); }
.contatto-riga { display: flex; align-items: flex-start; gap: var(--s-2); }
.contatto-riga__icona { flex-shrink: 0; width: 1.3rem; height: 1.3rem; margin-top: 0.2em; color: var(--oro-testo); }
.contatto-riga dt { font-weight: 700; color: var(--inchiostro); font-size: var(--t--1); }
.contatto-riga dd { margin: 0; }

.due-colonne { display: grid; gap: var(--s-5); }
@media (min-width: 60rem) {
    .due-colonne { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s-6); }
    .due-colonne--pari { grid-template-columns: 1fr 1fr; }
    .due-colonne--invertita { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
}
.colonna-laterale { align-self: start; }
@media (min-width: 60rem) {
    .colonna-laterale--adesiva { position: sticky; top: 6rem; }
}

.riquadro {
    padding: var(--s-3);
    background: var(--carta-alt);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande);
}
.riquadro h2, .riquadro h3 { font-size: var(--t-1); margin-bottom: var(--s-2); }

.elenco-semplice { list-style: none; padding: 0; margin: 0; }
.elenco-semplice li { padding: 0.55em 0; border-bottom: 1px solid var(--bordo); margin: 0; }
.elenco-semplice li:last-child { border-bottom: 0; }
.elenco-semplice a { text-decoration: none; font-weight: 600; }
.elenco-semplice a:hover { text-decoration: underline; }

.vuoto {
    padding: var(--s-5) var(--s-3);
    text-align: center;
    color: var(--testo-tenue);
    background: var(--carta-alt);
    border: 1px dashed var(--bordo-forte);
    border-radius: var(--raggio-grande);
}

/* Torna su */
.torna-su {
    position: fixed;
    right: var(--s-3);
    bottom: var(--s-3);
    z-index: 80;
    width: 2.9rem; height: 2.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--carta-scura);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--ombra-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity var(--transizione), transform var(--transizione), visibility var(--transizione);
}
.torna-su[data-visibile="1"] { opacity: 1; visibility: visible; transform: translateY(0); }
.torna-su:hover { background: var(--oro); color: #1b1408; }
.torna-su svg { width: 1.2rem; height: 1.2rem; }

/* Pagina di errore */
.errore-pagina { padding-block: var(--s-7); text-align: center; }
.errore-pagina__codice {
    font-family: var(--font-titoli);
    font-size: clamp(4rem, 14vw, 9rem);
    line-height: 1;
    color: var(--oro-chiaro);
    margin: 0;
}

/* ---------- 18. Stampa ---------------------------------------------- */
@media print {
    .testata, .pie, .cookie, .torna-su, .strumenti, .briciole, .nav-principale { display: none !important; }
    body { font-size: 11pt; color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
    .contenuto a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
    .scheda, .riquadro { border: 1px solid #999; break-inside: avoid; }
    h2, h3 { break-after: avoid; }
}