/* ===========================================================================
   Soqquadro Cornici — foglio di stile del sito pubblico
   Nessuna dipendenza esterna: nessun font remoto (quindi nessun dato del
   visitatore esce dal sito) e nessuna libreria CSS.

   Indice
   1. Variabili e fondamenta
   2. Elementi di base e accessibilità
   3. Impaginazione
   4. Testata e menu
   5. Bottoni ed etichette
   6. Home e sezioni
   7. Schede e griglie
   8. Gallerie e ingranditore
   9. Archivio collaborazioni
   10. Blog e testi lunghi
   11. Moduli
   12. Piè di pagina
   13. Stampa
   14. Banner del consenso ai cookie
   15. Pulsante WhatsApp
   =========================================================================== */

/* --- 1. Variabili e fondamenta ------------------------------------------- */
:root {
    /* I colori dell'officina: il carbone del ferro, l'avorio della carta,
       l'oro della doratura. */
    --carbone: #1c1a18;
    --carbone-tenue: #3a3531;
    --avorio: #f6f3ee;
    --avorio-scuro: #ebe5db;
    --bianco: #ffffff;
    --oro: #8a6a2f;
    --oro-chiaro: #c9a961;
    --testo: #2b2724;
    --testo-tenue: #5c554e;
    --bordo: #ddd5c8;

    --successo: #2f6b45;
    --errore: #9b2c2c;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --larghezza: 72rem;
    --larghezza-testo: 42rem;
    --spazio: clamp(1rem, 2.5vw, 2rem);
    --spazio-sezione: clamp(3rem, 7vw, 5.5rem);

    --raggio: 2px;
    --ombra: 0 1px 3px rgba(28, 26, 24, .08), 0 8px 24px rgba(28, 26, 24, .06);
    --transizione: 180ms ease;

    /* Pulsante WhatsApp: le misure stanno qui perché servono in due posti —
       al pulsante e allo spazio che il piè di pagina gli riserva. Cambiandole
       qui si muovono insieme e nulla resta coperto.

       Il verde è quello scuro del marchio (#128c7e) e non il verde acceso
       (#25d366): con il marchio bianco sopra, l'acceso si ferma a 2:1 di
       contrasto e il cerchio quasi non si stacca dal fondo avorio del sito.
       Così invece siamo a 4,2:1 sul marchio e 3,7:1 sulla pagina, dentro i
       criteri WCAG 2.1 AA che il resto del sito rispetta. */
    --whatsapp-lato: 3.5rem;
    --whatsapp-margine: 1.5rem;
    --whatsapp-verde: #128c7e;
    --whatsapp-verde-scuro: #0e6f63;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--testo);
    background: var(--avorio);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* --- 2. Elementi di base e accessibilità --------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.18;
    color: var(--carbone);
    margin: 0 0 .6em;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }

p { margin: 0 0 1.1em; }

a { color: var(--oro); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--carbone); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }

/* Il contorno di messa a fuoco non si toglie mai: serve a chi naviga da tastiera */
:focus-visible {
    outline: 3px solid var(--oro);
    outline-offset: 2px;
    border-radius: var(--raggio);
}

.salta-al-contenuto {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--carbone);
    color: var(--bianco);
    padding: .8rem 1.2rem;
    text-decoration: none;
}
.salta-al-contenuto:focus {
    left: .5rem;
    top: .5rem;
}

/* --- 3. Impaginazione ---------------------------------------------------- */
.contenitore {
    width: 100%;
    max-width: var(--larghezza);
    margin: 0 auto;
    padding: 0 var(--spazio);
}
.contenitore--testo { max-width: calc(var(--larghezza-testo) + var(--spazio) * 2); }

.sezione { padding: var(--spazio-sezione) 0; }
.sezione--chiara { background: var(--avorio-scuro); }
.sezione--scura { background: var(--carbone); color: var(--avorio); }
.sezione--scura h2, .sezione--scura h3 { color: var(--bianco); }
.sezione--scura a { color: var(--oro-chiaro); }
.sezione--stretta { padding: calc(var(--spazio-sezione) * .6) 0; }

.sezione__testata { max-width: var(--larghezza-testo); margin-bottom: 2.5rem; }
.sezione__titolo { margin-bottom: 1.8rem; }
.sezione__occhiello { color: var(--testo-tenue); font-size: 1.05rem; margin: 0; }
.sezione--scura .sezione__occhiello { color: var(--avorio-scuro); }
.sezione__coda { margin-top: 2.5rem; }

.pagina__testata { padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem; }
.pagina__occhiello {
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    color: var(--oro);
    margin-bottom: .6rem;
}
.pagina__sottotitolo {
    font-size: 1.2rem;
    color: var(--testo-tenue);
    max-width: var(--larghezza-testo);
}
.pagina__aggiornamento { font-size: .85rem; color: var(--testo-tenue); }
.pagina__figura {
    margin: 0 0 2.5rem;
    max-height: 60vh;
    overflow: hidden;
}
.pagina__figura img { width: 100%; object-fit: cover; }

.briciole { padding: 1rem 0 0; font-size: .88rem; }
.briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.briciole li:not(:last-child)::after { content: "›"; margin-left: .4rem; color: var(--bordo); }
.briciole a { color: var(--testo-tenue); text-decoration: none; }
.briciole a:hover { color: var(--oro); text-decoration: underline; }
.briciole [aria-current] { color: var(--testo); }

.vuoto {
    padding: 3rem 0;
    text-align: center;
    color: var(--testo-tenue);
    font-style: italic;
}

.ritorno { margin-top: 2.5rem; }
.ritorno a { text-decoration: none; font-weight: 600; }
.ritorno a:hover { text-decoration: underline; }

/* --- 4. Testata e menu --------------------------------------------------- */
.testata {
    background: var(--avorio);
    border-bottom: 1px solid var(--bordo);
    position: sticky;
    top: 0;
    z-index: 50;
}

.testata__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 5.4rem;
}

.marchio { text-decoration: none; display: block; padding: .7rem 0; }

/* Marchio a immagine: l'altezza comanda, la larghezza segue. Il file è
   400×96: a 3,4rem di altezza occupa circa 227 px di larghezza, quindi resta
   ben definito anche sugli schermi ad alta densità. Per andare oltre servirebbe
   il logo dal cliente in un file più grande (800×192 o un vettoriale). */
.marchio--logo { display: flex; align-items: center; }
.marchio--logo img {
    width: auto;
    height: 3.4rem;
    max-width: 100%;
}
/* Sullo schermo stretto il logo divide la riga con il pulsante del menu:
   più grande di così spingerebbe la testata sopra un sesto dello schermo. */
@media (max-width: 30rem) {
    .marchio--logo img { height: 2.6rem; }
}
.marchio__nome {
    display: block;
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--carbone);
    letter-spacing: .01em;
}
.marchio__coda {
    display: block;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--oro);
    margin-top: .1rem;
}

.apri-menu {
    display: none;
    background: none;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    width: 2.9rem;
    height: 2.9rem;
    cursor: pointer;
    position: relative;
}
.apri-menu__barre,
.apri-menu__barre::before,
.apri-menu__barre::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1.3rem;
    height: 2px;
    background: var(--carbone);
    transform: translateX(-50%);
    transition: transform var(--transizione), opacity var(--transizione);
}
.apri-menu__barre { top: 50%; margin-top: -1px; }
.apri-menu__barre::before { top: -.42rem; left: 0; transform: none; }
.apri-menu__barre::after { top: .42rem; left: 0; transform: none; }

.apri-menu[aria-expanded="true"] .apri-menu__barre { background: transparent; }
.apri-menu[aria-expanded="true"] .apri-menu__barre::before { transform: rotate(45deg) translate(.3rem, .3rem); }
.apri-menu[aria-expanded="true"] .apri-menu__barre::after { transform: rotate(-45deg) translate(.3rem, -.3rem); }

.menu__voci {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
}
.menu__voci a {
    text-decoration: none;
    color: var(--testo);
    font-size: .95rem;
    padding: .4rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transizione), color var(--transizione);
}
.menu__voci a:hover { color: var(--oro); border-bottom-color: var(--bordo); }
.menu__voci a.attiva { color: var(--carbone); border-bottom-color: var(--oro); font-weight: 600; }
/* Il numero di telefono è un bottone, non una voce di menu: senza queste righe
   la regola «.menu__voci a» (più specifica di «.bottone») gli imporrebbe il
   testo scuro sul fondo scuro del bottone, rendendolo illeggibile. */
.menu__voci .menu__telefono a {
    border: none;
    color: var(--bianco);
    font-weight: 600;
    /* Il numero è lungo: senza respiro ai lati tocca i bordi del bottone. */
    padding: .55rem 1.5rem;
    white-space: nowrap;
}
.menu__voci .menu__telefono a:hover,
.menu__voci .menu__telefono a:focus-visible {
    border: none;
    background: var(--oro);
    border-color: var(--oro);
    color: var(--bianco);
}

@media (max-width: 62rem) {
    .apri-menu { display: block; }

    .menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--avorio);
        border-bottom: 1px solid var(--bordo);
        box-shadow: var(--ombra);
        display: none;
    }
    .menu.aperto { display: block; }

    .menu__voci {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .5rem var(--spazio) 1.5rem;
    }
    .menu__voci li { border-bottom: 1px solid var(--avorio-scuro); }
    .menu__voci a { display: block; padding: .9rem 0; border-bottom: none; }
    .menu__voci a.attiva { border-bottom: none; color: var(--oro); }
    .menu__telefono { border-bottom: none; padding-top: 1rem; }
}

/* --- 5. Bottoni ed etichette --------------------------------------------- */
.bottone {
    display: inline-block;
    background: var(--carbone);
    color: var(--bianco);
    padding: .85rem 1.7rem;
    border: 2px solid var(--carbone);
    border-radius: var(--raggio);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background var(--transizione), color var(--transizione), border-color var(--transizione);
    font-family: inherit;
}
.bottone:hover { background: var(--oro); border-color: var(--oro); color: var(--bianco); }

.bottone--vuoto { background: transparent; color: var(--carbone); }
.bottone--vuoto:hover { background: var(--carbone); border-color: var(--carbone); color: var(--bianco); }

.bottone--chiaro { color: var(--avorio); border-color: var(--avorio); }
.bottone--chiaro:hover { background: var(--avorio); color: var(--carbone); }

.bottone--piccolo { padding: .55rem 1.1rem; font-size: .88rem; }

.etichetta {
    display: inline-block;
    background: var(--avorio-scuro);
    color: var(--testo-tenue);
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    text-decoration: none;
    white-space: nowrap;
}
a.etichetta:hover { background: var(--oro); color: var(--bianco); }

.etichette { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.etichette__titolo { font-size: .85rem; color: var(--testo-tenue); }

.elenco-collegamenti { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; }
.elenco-collegamenti--grande { flex-direction: column; gap: .7rem; font-size: 1.1rem; margin-top: 2rem; }

/* --- 6. Home e apertura --------------------------------------------------- */
/* L'apertura non è un fondo nero con sopra una foto sbiadita: è la foto, con
   una velatura scura solo dove passa il testo. Il fondo pieno resta come
   riserva per quando la foto non c'è ancora o non è ancora arrivata. */
.apertura {
    position: relative;
    background: var(--carbone);
    background-image: linear-gradient(150deg, #221f1c 0%, #14120f 100%);
}
.apertura__immagine { position: absolute; inset: 0; overflow: hidden; }
.apertura__immagine img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .78;
}

/* La velatura è netta dietro il testo e si apre verso destra, così la foto
   si vede davvero e il testo resta comunque ben oltre il minimo di
   contrasto richiesto (WCAG AA). */
.apertura__immagine::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg,
            rgba(20, 18, 15, .93) 0%,
            rgba(20, 18, 15, .86) 32%,
            rgba(20, 18, 15, .58) 62%,
            rgba(20, 18, 15, .34) 100%),
        linear-gradient(to top, rgba(20, 18, 15, .55), transparent 45%);
}

/* Sullo schermo stretto il testo occupa tutta la larghezza, quindi la
   fotografia non può stargli dietro: una velatura abbastanza scura da tenere
   leggibile il testo la cancellerebbe quasi del tutto. Allora la foto esce
   da dietro e si mette sopra, a piena larghezza, con il testo sotto sul fondo
   scuro: si vede per intero e il contrasto resta perfetto. */
@media (max-width: 62rem) {
    .apertura__immagine {
        position: relative;
        aspect-ratio: 16 / 10;
        max-height: 48vh;
    }
    .apertura__immagine img { opacity: 1; }
    /* Solo una sfumatura in basso, per legare la fotografia al blocco del testo. */
    .apertura__immagine::after {
        background: linear-gradient(to top,
            rgba(20, 18, 15, .92) 0%,
            rgba(20, 18, 15, 0) 45%);
    }
    .apertura__testo { padding-top: clamp(1.8rem, 6vw, 3rem); }
}
.apertura__testo {
    position: relative;
    padding: clamp(4rem, 12vw, 8.5rem) var(--spazio);
    max-width: 48rem;
    color: var(--avorio);
}
.apertura h1 { color: var(--bianco); margin-bottom: .4em; }
.apertura__sottotitolo {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--oro-chiaro);
    font-family: var(--serif);
    font-style: italic;
    margin-bottom: 1.2rem;
}
.apertura__introduzione { font-size: 1.1rem; color: var(--avorio-scuro); }
.apertura__introduzione p:last-child { margin-bottom: 0; }
.apertura__azioni { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.apertura__azioni .bottone { background: var(--oro); border-color: var(--oro); }
.apertura__azioni .bottone:hover { background: var(--bianco); border-color: var(--bianco); color: var(--carbone); }
.apertura__azioni .bottone--vuoto { background: transparent; color: var(--avorio); border-color: var(--avorio); }
.apertura__azioni .bottone--vuoto:hover { background: var(--avorio); color: var(--carbone); }

/* Blocchi «valore» sulla fascia scura */
.valore { padding-right: 1rem; }
.valore__titolo { font-size: 1.25rem; margin-bottom: .5rem; }
.valore__titolo::before {
    content: "";
    display: block;
    width: 2.2rem;
    height: 2px;
    background: var(--oro-chiaro);
    margin-bottom: 1rem;
}
.valore__testo { color: var(--avorio-scuro); font-size: .98rem; }
.valore__testo p:last-child { margin-bottom: 0; }
.valore__collegamento { display: inline-block; margin-top: .6rem; font-size: .92rem; }

/* Fascia della categoria in evidenza: una lavorazione che nella griglia
   sarebbe una scheda come le altre qui si prende mezza pagina. Fondo bianco e
   filo d'oro in alto per staccarla da quello che le sta sopra e sotto. */
.evidenza {
    background: var(--bianco);
    border-top: 3px solid var(--oro);
    border-bottom: 1px solid var(--bordo);
}
.evidenza__interno {
    display: grid;
    grid-template-columns: minmax(17rem, 1fr) minmax(17rem, 1.05fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.evidenza__interno--solo-testo { grid-template-columns: 1fr; }
.evidenza__interno--solo-testo .evidenza__testo { max-width: var(--larghezza-testo); }
.evidenza__occhiello {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--oro);
    margin-bottom: .4rem;
}
.evidenza__titolo { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 1rem; }
.evidenza__corpo { font-size: 1.05rem; }
.evidenza__corpo p:last-child { margin-bottom: 0; }

/* Quello che si realizza, preso dai nomi delle gallerie: dice in tre secondi
   cosa esce dall'officina, senza costringere a leggere il paragrafo. */
.evidenza__elenco {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.evidenza__elenco li {
    background: var(--avorio);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: .35rem .85rem;
    font-size: .88rem;
    color: var(--testo-tenue);
}
.evidenza__azioni { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* Mosaico: la prima fotografia larga, le altre sotto a coppie. */
.evidenza__foto {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
}
.evidenza__foto li:first-child { grid-column: 1 / -1; }
.evidenza__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    border-radius: var(--raggio);
}
.evidenza__foto li:first-child img { aspect-ratio: 16 / 10; }
.evidenza__foto--poche { grid-template-columns: 1fr; }

@media (max-width: 62rem) {
    .evidenza__interno { grid-template-columns: 1fr; }
}

.numeri {
    list-style: none;
    padding: 0;
    margin: 2.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}

/* Ogni numero è una targhetta: filo d'oro in alto come sulle cornici,
   cifra in grazie, etichetta in tondo minuto. */
.numero {
    position: relative;
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1.4rem 1.2rem 1.2rem;
    overflow: hidden;
    transition: transform var(--transizione), box-shadow var(--transizione);
}
.numero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--oro), var(--oro-chiaro));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
.numero:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombra);
}

.numero__valore {
    display: block;
    font-family: var(--serif);
    font-size: clamp(2.2rem, 5vw, 3rem);
    font-weight: 600;
    color: var(--carbone);
    line-height: 1;
    letter-spacing: -.01em;
    /* Le cifre non devono ballare mentre l'animazione le fa scorrere. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.numero__trattino { color: var(--oro); margin: 0 .06em; }

.numero__etichetta {
    display: block;
    margin-top: .55rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--testo-tenue);
}

/* Entrata: le targhette salgono appena quando arrivano sullo schermo.
   Prima che il JavaScript le marchi come «in vista» restano comunque
   visibili, così senza JavaScript non sparisce nulla. */
.numero.numero--animabile { opacity: 0; transform: translateY(12px); }
.numero.numero--visibile {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.numero.numero--visibile::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .numero, .numero::before, .numero.numero--visibile {
        transition: none;
    }
    .numero.numero--animabile { opacity: 1; transform: none; }
    .numero::before { transform: scaleX(1); }
    .numero:hover { transform: none; }
}

/* Domande frequenti: una riga per domanda, separate da un filo, senza
   riquadri. La risposta si apre e si chiude con <details>, quindi funziona
   anche a JavaScript spento. */
.domande { border-top: 1px solid var(--bordo); }

.domanda { border-bottom: 1px solid var(--bordo); }

.domanda__testo {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    font-family: var(--serif);
    font-size: 1.12rem;
    line-height: 1.4;
    color: var(--carbone);
    transition: color var(--transizione);
}
.domanda__testo::-webkit-details-marker { display: none; }
.domanda__testo:hover { color: var(--oro); }

/* Il segno «più» che diventa «meno»: due tratti, nessuna immagine. */
.domanda__testo::after {
    content: "";
    flex: 0 0 auto;
    width: .8rem;
    height: .8rem;
    margin-top: .35rem;
    background:
        linear-gradient(var(--oro), var(--oro)) center / 100% 1.5px no-repeat,
        linear-gradient(var(--oro), var(--oro)) center / 1.5px 100% no-repeat;
    transition: transform var(--transizione);
}
.domanda[open] .domanda__testo { color: var(--oro); }
.domanda[open] .domanda__testo::after {
    background: linear-gradient(var(--oro), var(--oro)) center / 100% 1.5px no-repeat;
    transform: rotate(180deg);
}

.domanda__risposta { padding: 0 0 1.4rem; color: var(--testo-tenue); max-width: 40rem; }
.domanda__risposta p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .domanda__testo, .domanda__testo::after { transition: none; }
}

.richiamo { background: var(--carbone); color: var(--avorio); padding: var(--spazio-sezione) 0; }
.richiamo__interno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.richiamo__titolo { color: var(--bianco); margin-bottom: .4rem; }
.richiamo__testo { color: var(--avorio-scuro); max-width: 34rem; margin: 0; }
.richiamo__azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.richiamo__azioni .bottone { background: var(--oro); border-color: var(--oro); }
.richiamo__azioni .bottone:hover { background: var(--bianco); border-color: var(--bianco); color: var(--carbone); }

/* --- 7. Schede e griglie -------------------------------------------------- */
.griglia {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1.2rem, 3vw, 2.2rem);
}
.griglia--due { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.griglia--tre { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.griglia--ampia { gap: clamp(1.5rem, 4vw, 3rem); }
.griglia--essenziale { gap: clamp(2rem, 4vw, 3.5rem); }

.scheda { background: var(--bianco); box-shadow: var(--ombra); border-radius: var(--raggio); overflow: hidden; }
.sezione--chiara .scheda { background: var(--bianco); }

.scheda__collegamento {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.scheda__figura { margin: 0; overflow: hidden; background: var(--avorio-scuro); aspect-ratio: 4 / 3; }
.scheda__figura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.scheda__collegamento:hover .scheda__figura img { transform: scale(1.04); }

.scheda__corpo { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.scheda__titolo { font-size: 1.25rem; margin-bottom: .4rem; }
.scheda__collegamento:hover .scheda__titolo { color: var(--oro); }
.scheda__testo { color: var(--testo-tenue); font-size: .95rem; margin-bottom: 1rem; }
.scheda__minuto { font-size: .82rem; color: var(--testo-tenue); margin-bottom: .8rem; }
.scheda__anno, .scheda__data {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--oro);
    margin-bottom: .4rem;
}
.scheda__richiamo {
    margin-top: auto;
    font-size: .88rem;
    font-weight: 600;
    color: var(--oro);
}
.scheda__richiamo::after { content: " ›"; }
.scheda--grande .scheda__titolo { font-size: 1.5rem; }
.scheda--grande .scheda__figura { aspect-ratio: 3 / 2; }

.lavorazioni { margin-top: 1rem; }
.lavorazione { background: var(--bianco); box-shadow: var(--ombra); border-radius: var(--raggio); overflow: hidden; }
.lavorazione__figura { margin: 0; aspect-ratio: 4 / 3; background: var(--avorio-scuro); }
.lavorazione__figura img { width: 100%; height: 100%; object-fit: cover; }
.lavorazione__corpo { padding: 1.3rem 1.5rem 1.5rem; }
.lavorazione__titolo { font-size: 1.15rem; margin-bottom: .4rem; }
.lavorazione__testo { font-size: .95rem; color: var(--testo-tenue); }
.lavorazione__testo p:last-child { margin-bottom: 0; }

/* --- 8. Gallerie e ingranditore ------------------------------------------ */
.galleria { padding: 0 0 var(--spazio-sezione); }
.galleria:first-of-type { padding-top: 1rem; }
.galleria__testata { max-width: var(--larghezza-testo); margin-bottom: 1.8rem; }
.galleria__testata h2 { margin-bottom: .4rem; }
.galleria__testo { color: var(--testo-tenue); font-size: .98rem; }
.galleria__testo p:last-child { margin-bottom: 0; }

.galleria__griglia {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: .9rem;
}
.galleria__voce { margin: 0; }
.galleria__apri {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: var(--avorio-scuro);
    cursor: zoom-in;
    overflow: hidden;
    border-radius: var(--raggio);
    aspect-ratio: 1 / 1;
}
.galleria__apri img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease, opacity var(--transizione);
}
.galleria__apri:hover img { transform: scale(1.05); opacity: .92; }
.galleria__didascalia { font-size: .82rem; color: var(--testo-tenue); margin: .5rem 0 0; }

.lente {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(18, 16, 15, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
}
.lente[hidden] { display: none; }
.lente__contenuto { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lente__contenuto img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    margin: 0 auto;
    border-radius: var(--raggio);
}
.lente__contenuto figcaption { color: var(--avorio-scuro); margin-top: 1rem; font-size: .92rem; }

.lente__chiudi, .lente__precedente, .lente__successiva {
    position: absolute;
    background: rgba(246, 243, 238, .12);
    color: var(--avorio);
    border: none;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    transition: background var(--transizione);
}
.lente__chiudi:hover, .lente__precedente:hover, .lente__successiva:hover { background: rgba(246, 243, 238, .28); }
.lente__chiudi { top: 1rem; right: 1rem; }
.lente__precedente { left: 1rem; top: 50%; transform: translateY(-50%); }
.lente__successiva { right: 1rem; top: 50%; transform: translateY(-50%); }

/* --- 9. Archivio collaborazioni ------------------------------------------ */
.filtri {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    padding: 1.4rem 1.5rem;
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    margin-bottom: 1.5rem;
}
.filtri__campo { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 12rem; }
.filtri__campo label { font-size: .82rem; font-weight: 600; color: var(--testo-tenue); }
.filtri__azioni { display: flex; align-items: center; gap: 1rem; }
.filtri__azzera { font-size: .88rem; }

.risultati { font-size: .95rem; color: var(--testo-tenue); margin-bottom: 2rem; }

.archivio { list-style: none; margin: 0 0 2rem; padding: 0; }
.archivio__anno { margin: 2.5rem 0 1rem; border-bottom: 1px solid var(--bordo); }
.archivio__anno:first-child { margin-top: 0; }
.archivio__anno h2 {
    font-size: 1.6rem;
    color: var(--oro);
    margin: 0 0 .5rem;
}
.archivio__voce { border-bottom: 1px solid var(--avorio-scuro); }
.archivio__collegamento {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    padding: 1rem 0;
    text-decoration: none;
    color: inherit;
    transition: background var(--transizione);
}
.archivio__collegamento:hover { background: var(--avorio-scuro); }
.archivio__figura {
    flex: 0 0 5.5rem;
    height: 4.5rem;
    overflow: hidden;
    border-radius: var(--raggio);
    background: var(--avorio-scuro);
}
.archivio__figura img { width: 100%; height: 100%; object-fit: cover; }
.archivio__corpo { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.archivio__titolo { font-family: var(--serif); font-size: 1.15rem; color: var(--carbone); font-weight: 600; }
.archivio__collegamento:hover .archivio__titolo { color: var(--oro); }
.archivio__artista { font-size: .95rem; color: var(--testo); }
.archivio__dettagli { font-size: .88rem; color: var(--testo-tenue); display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.dati {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem 1.5rem;
    margin: 0 0 2rem;
    padding: 1.5rem;
    background: var(--bianco);
    border-left: 3px solid var(--oro);
}
.dati dt { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--testo-tenue); }
.dati dd { margin: 0; }

/* --- 10. Blog e testi lunghi --------------------------------------------- */
.argomenti { margin-bottom: 2.5rem; }
.argomenti ul { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: 0; }
.argomenti a {
    display: inline-block;
    padding: .4rem 1rem;
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: 999px;
    text-decoration: none;
    font-size: .88rem;
    color: var(--testo);
}
.argomenti a:hover, .argomenti a.attiva { background: var(--carbone); color: var(--bianco); border-color: var(--carbone); }

.testo-lungo { font-size: 1.05rem; }
.testo-lungo--introduzione { font-size: 1.15rem; color: var(--testo-tenue); }
.testo-lungo h2 { margin-top: 2.2em; }
.testo-lungo h3 { margin-top: 1.8em; }
.testo-lungo h2:first-child, .testo-lungo h3:first-child { margin-top: 0; }
.testo-lungo ul, .testo-lungo ol { padding-left: 1.4em; }
.testo-lungo li { margin-bottom: .4em; }
.testo-lungo blockquote {
    margin: 2rem 0;
    padding: .3rem 0 .3rem 1.5rem;
    border-left: 3px solid var(--oro);
    font-family: var(--serif);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--carbone-tenue);
}
.testo-lungo blockquote p:last-child { margin-bottom: 0; }

.paginazione { margin: 3rem 0 0; }
.paginazione ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; justify-content: center; }
.paginazione a, .paginazione__corrente, .paginazione__salto {
    display: inline-block;
    min-width: 2.6rem;
    padding: .5rem .8rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: var(--bianco);
    color: var(--testo);
    font-size: .92rem;
}
.paginazione a:hover { background: var(--carbone); color: var(--bianco); border-color: var(--carbone); }
.paginazione__corrente { background: var(--carbone); color: var(--bianco); border-color: var(--carbone); font-weight: 600; }
.paginazione__salto { border: none; background: none; }

/* --- 11. Moduli ----------------------------------------------------------- */
.contatti {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(2rem, 5vw, 4rem);
    padding-bottom: var(--spazio-sezione);
    align-items: start;
}
@media (max-width: 56rem) {
    .contatti { grid-template-columns: 1fr; }
}

.recapiti { font-style: normal; margin-bottom: 2rem; }
.recapiti p { margin-bottom: .5rem; }
.recapiti__indirizzo { font-size: 1.15rem; font-family: var(--serif); margin-bottom: 1rem !important; }
/* L'indirizzo porta alla mappa: sottolineatura tenue, per non fare rumore
   sopra il resto dei recapiti. */
.recapiti__indirizzo a { text-decoration-color: var(--oro-chiaro); }
.recapiti__etichetta {
    display: inline-block;
    min-width: 5.5rem;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--testo-tenue);
}
.recapiti__orari { list-style: none; padding: 0; }
.recapiti__orari li { padding: .4rem 0; border-bottom: 1px solid var(--avorio-scuro); font-size: .95rem; }
.recapiti__mappa { margin-top: 1.5rem; }
.recapiti__nota { font-size: .82rem; color: var(--testo-tenue); }

.contatti__modulo {
    background: var(--bianco);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
}

.campo { margin-bottom: 1.3rem; }
.campo label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.campo input, .campo textarea, .campo select,
.filtri input, .filtri select {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: var(--bianco);
    font-family: inherit;
    font-size: 1rem;
    color: var(--testo);
}
.campo textarea { resize: vertical; min-height: 8rem; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--oro); }
.campo--corto { max-width: 7rem; }
.campo__aiuto { font-size: .84rem; color: var(--testo-tenue); margin: .35rem 0 0; }
.campo__errore { font-size: .86rem; color: var(--errore); margin: .35rem 0 0; font-weight: 600; }
.campo--errore input, .campo--errore textarea { border-color: var(--errore); }

.campo-doppio { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 34rem) { .campo-doppio { grid-template-columns: 1fr; gap: 0; } }

.campo--scelta label { font-weight: 400; font-size: .92rem; display: flex; gap: .6rem; align-items: flex-start; }
.campo--scelta input { width: auto; margin-top: .25rem; flex-shrink: 0; }

/* Campo esca: nascosto agli utenti ma non con display:none, che alcuni
   programmi automatici riconoscono. */
.esca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.modulo__obbligatori { font-size: .84rem; color: var(--testo-tenue); }

.avviso {
    padding: 1rem 1.2rem;
    border-radius: var(--raggio);
    border-left: 3px solid;
    margin-bottom: 1.5rem;
}
.avviso--successo { background: #eef5f0; border-color: var(--successo); color: #1e4430; }
.avviso--errore { background: #fbeeee; border-color: var(--errore); color: #6b1f1f; }

/* --- 12. Piè di pagina ---------------------------------------------------- */
.pie { background: var(--carbone); color: var(--avorio-scuro); padding: var(--spazio-sezione) 0 2rem; font-size: .93rem; }
.pie__griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 2.5rem;
}
.pie__titolo {
    font-size: 1rem;
    color: var(--bianco);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 1rem;
    font-family: var(--sans);
    font-weight: 600;
}
.pie__testo { font-style: normal; line-height: 1.8; }
.pie a { color: var(--avorio-scuro); text-decoration: none; }
.pie a:hover { color: var(--oro-chiaro); text-decoration: underline; }
.pie__elenco { list-style: none; padding: 0; margin: 0; }
.pie__elenco li { margin-bottom: .5rem; }
.pie__social { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.pie__minuto { font-size: .82rem; color: #8d857b; margin-top: 1rem; }
.pie__coda {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #35302b;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    font-size: .84rem;
    color: #8d857b;
}
.pie__coda p { margin: 0; }

/* Firma dello studio: il marchio al posto del nome scritto. Il collegamento
   non prende la sottolineatura al passaggio, che su un logo starebbe male. */
.pie__firma {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.pie__firma a,
.pie__firma a:hover { text-decoration: none; }
.pie__firma img {
    display: block;
    width: auto;
    height: 1.5rem;
    opacity: .92;
    transition: opacity var(--transizione);
}
.pie__firma a:hover img,
.pie__firma a:focus-visible img { opacity: 1; }

/* Marchi dei social: dimensione dell'area di tocco adeguata anche sul telefono. */
.pie__social-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -.4rem;
    border-radius: 50%;
    transition: transform var(--transizione);
}
.pie__social-logo img { display: block; width: 1.75rem; height: 1.75rem; }
.pie__social-logo:hover,
.pie__social-logo:focus-visible { transform: translateY(-2px); }

/* --- 13. Stampa ----------------------------------------------------------- */
@media print {
    .testata, .pie, .richiamo, .apri-menu, .paginazione, .filtri, .lente, .salta-al-contenuto { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .apertura__immagine { display: none; }
    .apertura__testo { color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* --- Preferenza per il contrasto elevato --------------------------------- */
@media (prefers-contrast: more) {
    :root {
        --testo-tenue: #3a3531;
        --oro: #6d5121;
        --bordo: #9c9284;
    }
}

/* --- 14. Banner del consenso ai cookie ------------------------------------ */
/* Sta in fondo allo schermo e non copre il contenuto: nessun velo scuro,
   nessuna finestra da chiudere per forza. Rifiutare costa un clic come
   accettare, e i due bottoni hanno lo stesso rilievo. */
.cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--carbone);
    color: var(--avorio);
    border-top: 3px solid var(--oro);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .22);
    animation: cookie-entra .45s cubic-bezier(.22, .61, .36, 1) both;
}
.cookie__interno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}
.cookie__testo {
    margin: 0;
    max-width: 52rem;
    font-size: .92rem;
    line-height: 1.6;
}
.cookie__testo a { color: var(--oro-chiaro); }
.cookie__testo a:hover { color: var(--bianco); }
.cookie__azioni { display: flex; gap: .6rem; flex-shrink: 0; }
.cookie__azioni .bottone--vuoto {
    background: transparent;
    color: var(--avorio);
    border-color: var(--avorio);
}
.cookie__azioni .bottone--vuoto:hover { background: var(--avorio); color: var(--carbone); }

@keyframes cookie-entra {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cookie { animation: none; }
}

@media print {
    .cookie { display: none !important; }
}

/* --- 15. Pulsante WhatsApp ------------------------------------------------ */
/* Sta in basso a destra su ogni pagina, computer e telefono. Tre attenzioni:

   1. quando si arriva in fondo alla pagina non deve coprire niente, quindi il
      piè di pagina si riserva da sé lo spazio che il pulsante occupa
      (.con-whatsapp .pie qui sotto);
   2. non deve litigare con il banner dei cookie, che vive nella stessa zona:
      finché il banner è in pagina il pulsante si alza sopra di esso;
   3. resta sotto l'ingranditore delle fotografie (z-index 200) e sotto il
      banner (90), che quando ci sono hanno la precedenza. */
.whatsapp {
    position: fixed;
    right: var(--whatsapp-margine);
    bottom: var(--whatsapp-margine);
    z-index: 80;
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 50%;
}

.whatsapp__cerchio {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--whatsapp-lato);
    height: var(--whatsapp-lato);
    border-radius: 50%;
    background: var(--whatsapp-verde);
    color: var(--bianco);
    box-shadow: 0 3px 10px rgba(28, 26, 24, .24), 0 10px 28px rgba(28, 26, 24, .16);
    transition: transform var(--transizione), background var(--transizione);
}
.whatsapp__logo { width: 56%; height: 56%; display: block; }

.whatsapp:hover .whatsapp__cerchio,
.whatsapp:focus-visible .whatsapp__cerchio {
    background: var(--whatsapp-verde-scuro);
    transform: translateY(-2px);
}

/* L'etichetta esce da sotto il pulsante al passaggio del mouse. È in posizione
   assoluta di proposito: comparendo non sposta nulla e non cambia l'ingombro
   del pulsante. Chi naviga da tastiera la vede allo stesso modo. */
.whatsapp__testo {
    position: absolute;
    right: calc(var(--whatsapp-lato) - 1.4rem);
    padding: .55rem 1.9rem .55rem 1rem;
    border-radius: 2rem;
    background: var(--carbone);
    color: var(--avorio);
    font-size: .85rem;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(28, 26, 24, .2);
    opacity: 0;
    transform: translateX(.6rem);
    pointer-events: none;
    transition: opacity var(--transizione), transform var(--transizione);
}
.whatsapp:hover .whatsapp__testo,
.whatsapp:focus-visible .whatsapp__testo {
    opacity: 1;
    transform: none;
}

/* Sul touch l'etichetta non servirebbe a nulla: non c'è passaggio del mouse. */
@media (hover: none) {
    .whatsapp__testo { display: none; }
}

/* Lo spazio che il pulsante si prende in fondo alla pagina: senza, l'ultima
   riga del piè di pagina finirebbe sotto il pulsante. */
.con-whatsapp .pie {
    padding-bottom: calc(var(--whatsapp-lato) + var(--whatsapp-margine) + 1rem);
}

/* Sopra il banner dei cookie. L'altezza vera del banner la misura sito.js e la
   scrive in --whatsapp-alzata; il valore di riserva qui sotto serve solo
   quando il JavaScript non parte, e sta largo apposta. */
.whatsapp--sopra-banner {
    bottom: calc(var(--whatsapp-margine) + var(--whatsapp-alzata, 12rem));
}

@media (min-width: 48rem) {
    .whatsapp--sopra-banner { bottom: calc(var(--whatsapp-margine) + var(--whatsapp-alzata, 7rem)); }
}

/* Su schermo piccolo il pulsante si stringe un poco e si avvicina al bordo,
   restando sopra i 44px di area di tocco raccomandati. */
@media (max-width: 40rem) {
    :root {
        --whatsapp-lato: 3.25rem;
        --whatsapp-margine: 1rem;
    }
}

@media print {
    .whatsapp { display: none !important; }
    .con-whatsapp .pie { padding-bottom: 2rem; }
}