/* ============================================================
   BORGHI SERENI — Design system
   ------------------------------------------------------------
   Principi:
   1. Mobile-first. Il pubblico reale apre il sito dal telefono.
   2. Text-first. Il sito deve essere bello SENZA fotografie,
      perché all'inizio le foto non ci saranno. Con le immagini
      migliora, ma non ci si appoggia.
   3. Istituzionale ma caldo. Qui i comuni pubblicano documenti
      ufficiali: l'interfaccia deve essere credibile.
   4. Una sola colonna. Niente fasce pubblicitarie laterali.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKEN
   ------------------------------------------------------------ */

:root {
    /* Colore — palette terrosa, derivata da quella originale ma
       ricalibrata per rispettare i contrasti AA su fondo chiaro. */
    --terra:        #8a3f1d;
    --terra-scuro:  #6b2f14;
    --terra-chiaro: #a85a33;
    --terra-velo:   #f6ece5;

    --bosco:        #3f6b48;
    --bosco-velo:   #e9f0e9;
    --oro:          #9c6b12;
    --oro-velo:     #f7efdc;
    --ardesia:      #4a5568;
    --ardesia-velo: #eceef2;

    /* Superfici */
    --sfondo:       #fbf9f6;
    --superficie:   #ffffff;
    --superficie-2: #f4efe8;
    --bordo:        #e5dcd0;
    --bordo-forte:  #d2c5b4;

    /* Testo */
    --inchiostro:   #1f1b17;
    --inchiostro-2: #5c5349;
    --inchiostro-3: #857a6e;

    --attenzione:   #9a3412;
    --successo:     #2f6b3f;

    /* Tipografia */
    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Scala tipografica fluida */
    --t-xs:   0.75rem;
    --t-sm:   0.8125rem;
    --t-base: 0.9375rem;
    --t-md:   1.0625rem;
    --t-lg:   clamp(1.15rem, 1rem + 0.7vw, 1.35rem);
    --t-xl:   clamp(1.4rem,  1.2rem + 1.1vw, 1.85rem);
    --t-2xl:  clamp(1.75rem, 1.4rem + 2vw,   2.6rem);
    --t-3xl:  clamp(2rem,    1.5rem + 3vw,   3.2rem);

    /* Spazio */
    --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
    --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;

    /* Forma */
    --r-sm: 6px;
    --r:    10px;
    --r-lg: 16px;
    --r-full: 999px;

    --ombra-1: 0 1px 2px rgba(31, 27, 23, .06);
    --ombra-2: 0 4px 16px rgba(31, 27, 23, .08);
    --ombra-3: 0 12px 40px rgba(31, 27, 23, .14);

    /* Misure */
    --larghezza:   1120px;
    --larghezza-testo: 68ch;
    --h-header:    58px;
    --h-contesto:  52px;
    --h-navbasso:  58px;

    --transizione: 160ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="chiaro"]) {
        --terra:        #e0895e;
        --terra-scuro:  #f0a37c;
        --terra-chiaro: #c9744a;
        --terra-velo:   #33211a;

        --bosco:        #7fb389;
        --bosco-velo:   #1e2b21;
        --oro:          #d5a441;
        --oro-velo:     #322613;
        --ardesia:      #a3aec2;
        --ardesia-velo: #23272f;

        --sfondo:       #16130f;
        --superficie:   #1e1a16;
        --superficie-2: #262019;
        --bordo:        #352e26;
        --bordo-forte:  #4a4136;

        --inchiostro:   #f2ece4;
        --inchiostro-2: #bfb5a8;
        --inchiostro-3: #8f8578;

        --attenzione:   #f0946b;
        --successo:     #7fb389;

        --ombra-1: 0 1px 2px rgba(0, 0, 0, .4);
        --ombra-2: 0 4px 16px rgba(0, 0, 0, .45);
        --ombra-3: 0 12px 40px rgba(0, 0, 0, .55);
    }
}

/* ------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------ */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--h-header) + var(--h-contesto) + var(--s4));
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    font-family: var(--font-ui);
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--inchiostro);
    background: var(--sfondo);
    -webkit-font-smoothing: antialiased;
    padding-bottom: env(safe-area-inset-bottom);
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--superficie-2); }

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

a { color: var(--terra); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--terra-scuro); }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
    outline: 2px solid var(--terra);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

::selection { background: var(--terra-velo); color: var(--terra-scuro); }

/* ------------------------------------------------------------
   3. TIPOGRAFIA
   ------------------------------------------------------------ */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--inchiostro);
    text-wrap: balance;
}
h1 { font-size: var(--t-2xl); font-weight: 600; }
h2 { font-size: var(--t-xl);  font-weight: 600; }
h3 { font-size: var(--t-lg);  font-weight: 600; }
h4 { font-size: var(--t-md);  font-weight: 600; }

.prosa { max-width: var(--larghezza-testo); font-size: var(--t-md); line-height: 1.7; }
.prosa > * + * { margin-top: var(--s4); }
.prosa h2, .prosa h3 { margin-top: var(--s6); }
.prosa ul, .prosa ol { padding-left: 1.25rem; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa li + li { margin-top: var(--s2); }
.prosa a { text-decoration: underline; }
.prosa img { border-radius: var(--r); margin: var(--s5) 0; }
.prosa blockquote {
    border-left: 3px solid var(--terra);
    padding-left: var(--s4);
    color: var(--inchiostro-2);
    font-style: italic;
}

.silenzioso { color: var(--inchiostro-2); }
.minuto     { font-size: var(--t-sm); color: var(--inchiostro-2); }
.numerico   { font-variant-numeric: tabular-nums; }

/* Etichetta di sezione: un filetto invece di un badge decorativo */
.occhiello {
    display: flex; align-items: center; gap: var(--s3);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--terra);
}
.occhiello::after {
    content: ''; flex: 1; height: 1px; background: var(--bordo);
}

/* ------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------ */

.contenitore {
    width: 100%;
    max-width: var(--larghezza);
    margin-inline: auto;
    padding-inline: var(--s4);
}
@media (min-width: 768px) { .contenitore { padding-inline: var(--s5); } }

.stretto { max-width: 760px; }

.sezione { padding-block: var(--s6); }
@media (min-width: 768px) { .sezione { padding-block: var(--s7); } }

.sezione-velo { background: var(--superficie-2); }

.intestazione-sezione { margin-bottom: var(--s5); }
.intestazione-sezione h2 { margin-top: var(--s2); }
.intestazione-sezione p  { margin-top: var(--s2); color: var(--inchiostro-2); max-width: 60ch; }

.riga-titolo {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s4); flex-wrap: wrap;
}

.griglia { display: grid; gap: var(--s4); }
@media (min-width: 620px)  { .griglia-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 620px)  { .griglia-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .griglia-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px)  { .griglia-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .griglia-4 { grid-template-columns: repeat(4, 1fr); } }

.pila     { display: flex; flex-direction: column; gap: var(--s4); }
.pila-2   { display: flex; flex-direction: column; gap: var(--s2); }
.fila     { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

.salta-al-contenuto {
    position: absolute; left: var(--s4); top: -100px; z-index: 200;
    background: var(--terra); color: #fff;
    padding: var(--s3) var(--s4); border-radius: var(--r);
    transition: top var(--transizione);
}
.salta-al-contenuto:focus { top: var(--s3); color: #fff; }

/* ------------------------------------------------------------
   5. INTESTAZIONE
   ------------------------------------------------------------ */

.testata {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--superficie) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--bordo);
}
@supports not (backdrop-filter: blur(1px)) { .testata { background: var(--superficie); } }

.testata-interna {
    height: var(--h-header);
    display: flex; align-items: center; gap: var(--s4);
}

.marchio {
    display: flex; align-items: center; gap: var(--s2);
    font-family: var(--font-display);
    font-size: 1.1rem; font-weight: 600;
    color: var(--inchiostro); text-decoration: none;
    white-space: nowrap;
}
.marchio:hover { color: var(--terra); }
.marchio svg { color: var(--terra); }

.nav-principale { margin-left: auto; display: none; }
@media (min-width: 900px) { .nav-principale { display: block; } }

.nav-lista { display: flex; align-items: center; gap: var(--s1); }
.nav-voce {
    display: block;
    padding: var(--s2) var(--s3);
    border-radius: var(--r-sm);
    font-size: var(--t-base); font-weight: 500;
    color: var(--inchiostro-2); text-decoration: none;
}
.nav-voce:hover { background: var(--superficie-2); color: var(--inchiostro); }
.nav-voce[aria-current="page"] { color: var(--terra); font-weight: 600; }

.azioni-testata { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
@media (min-width: 900px) { .azioni-testata { margin-left: var(--s2); } }

.bottone-icona {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    color: var(--inchiostro-2);
}
.bottone-icona:hover { background: var(--superficie-2); color: var(--inchiostro); }

/* ------------------------------------------------------------
   6. BARRA DI CONTESTO — l'elemento firma del sito
   ------------------------------------------------------------ */

.barra-contesto {
    position: sticky; top: var(--h-header); z-index: 55;
    background: var(--terra-velo);
    border-bottom: 1px solid var(--bordo);
}
.barra-contesto-interna {
    min-height: var(--h-contesto);
    display: flex; align-items: center; gap: var(--s3);
    padding-block: var(--s2);
}

.origine {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--superficie);
    border: 1px solid var(--bordo-forte);
    border-radius: var(--r-full);
    font-size: var(--t-sm); font-weight: 600;
    color: var(--inchiostro);
    white-space: nowrap;
    box-shadow: var(--ombra-1);
}
.origine:hover { border-color: var(--terra); color: var(--terra); }
.origine svg:first-child { color: var(--terra); flex: none; }
.origine .freccia { color: var(--inchiostro-3); flex: none; }

/* Scala di ampiezza: scorre in orizzontale sul telefono */
.scala {
    display: flex; align-items: center; gap: var(--s1);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block: 2px;
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.scala::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .scala { mask-image: none; } }

.scala-voce {
    padding: var(--s2) var(--s3);
    border-radius: var(--r-full);
    font-size: var(--t-sm); font-weight: 500;
    color: var(--inchiostro-2);
    text-decoration: none; white-space: nowrap;
    border: 1px solid transparent;
}
.scala-voce:hover { background: var(--superficie); color: var(--inchiostro); }
.scala-voce[aria-current="true"] {
    background: var(--terra); color: #fff; font-weight: 600;
    border-color: var(--terra);
}

/* ------------------------------------------------------------
   7. SELETTORE DI ORIGINE (dialog)
   ------------------------------------------------------------ */

.selettore { border: 0; padding: 0; background: transparent; max-width: 520px; width: calc(100% - 2rem); }
.selettore::backdrop { background: rgba(31, 27, 23, .5); backdrop-filter: blur(3px); }

.selettore-corpo {
    background: var(--superficie);
    border-radius: var(--r-lg);
    box-shadow: var(--ombra-3);
    padding: var(--s5);
    max-height: 85vh; overflow-y: auto;
}
.selettore h2 { font-size: var(--t-lg); }
.selettore-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }

.campo-cerca { position: relative; }
.campo-cerca svg { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); color: var(--inchiostro-3); pointer-events: none; }
.campo-cerca input { padding-left: 2.5rem; }

.esiti {
    margin-top: var(--s2);
    border: 1px solid var(--bordo);
    border-radius: var(--r);
    max-height: 260px; overflow-y: auto;
    background: var(--superficie);
}
.esiti:empty { display: none; }
.esito {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    width: 100%; text-align: left;
    padding: var(--s3);
    border-bottom: 1px solid var(--bordo);
    font-size: var(--t-base);
}
.esito:last-child { border-bottom: 0; }
.esito:hover, .esito[aria-selected="true"] { background: var(--terra-velo); }
.esito-nome { font-weight: 500; }
.esito-meta { font-size: var(--t-xs); color: var(--inchiostro-2); white-space: nowrap; }

/* ------------------------------------------------------------
   8. BOTTONI
   ------------------------------------------------------------ */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    padding: var(--s3) var(--s5);
    min-height: 44px;
    border-radius: var(--r-full);
    font-size: var(--t-base); font-weight: 600;
    text-decoration: none; text-align: center;
    border: 1px solid transparent;
    transition: background var(--transizione), border-color var(--transizione), color var(--transizione);
}
.btn-primario { background: var(--terra); color: #fff; }
.btn-primario:hover { background: var(--terra-scuro); color: #fff; }
.btn-contorno { border-color: var(--bordo-forte); color: var(--inchiostro); background: var(--superficie); }
.btn-contorno:hover { border-color: var(--terra); color: var(--terra); }
.btn-piatto { color: var(--terra); padding-inline: var(--s3); }
.btn-piatto:hover { background: var(--terra-velo); }
.btn-piccolo { padding: var(--s2) var(--s3); min-height: 36px; font-size: var(--t-sm); }
.btn-largo { width: 100%; }

/* ------------------------------------------------------------
   9. FILTRI A PASTIGLIA
   ------------------------------------------------------------ */

.filtri {
    display: flex; gap: var(--s2);
    overflow-x: auto; scrollbar-width: none;
    padding-block: var(--s2);
    margin-inline: calc(var(--s4) * -1);
    padding-inline: var(--s4);
}
.filtri::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .filtri { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }

.pastiglia {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3);
    border: 1px solid var(--bordo-forte);
    border-radius: var(--r-full);
    background: var(--superficie);
    font-size: var(--t-sm); font-weight: 500;
    color: var(--inchiostro-2);
    text-decoration: none; white-space: nowrap;
}
.pastiglia:hover { border-color: var(--terra); color: var(--terra); }
.pastiglia[aria-pressed="true"], .pastiglia.attiva {
    background: var(--inchiostro); border-color: var(--inchiostro); color: var(--sfondo); font-weight: 600;
}
.pastiglia.attiva svg { opacity: .8; }

/* ------------------------------------------------------------
   10. SCHEDE
   ------------------------------------------------------------ */

.scheda {
    display: flex; flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--r);
    overflow: hidden;
    text-decoration: none; color: inherit;
    transition: border-color var(--transizione), box-shadow var(--transizione), transform var(--transizione);
}
a.scheda:hover {
    border-color: var(--bordo-forte);
    box-shadow: var(--ombra-2);
    transform: translateY(-2px);
    color: inherit;
}
.scheda-figura { aspect-ratio: 16 / 10; overflow: hidden; background: var(--superficie-2); }
.scheda-figura img { width: 100%; height: 100%; object-fit: cover; }
.scheda-corpo { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.scheda-titolo { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; line-height: 1.25; }
a.scheda:hover .scheda-titolo { color: var(--terra); }
.scheda-testo {
    font-size: var(--t-sm); color: var(--inchiostro-2);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.scheda-piede {
    margin-top: auto; padding-top: var(--s3);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
    font-size: var(--t-xs); color: var(--inchiostro-2);
}

/* Riga compatta: usata nei feed, più densa di una scheda */
.riga {
    display: flex; gap: var(--s4); align-items: flex-start;
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--bordo);
    text-decoration: none; color: inherit;
}
.riga:last-child { border-bottom: 0; }
.riga:hover .riga-titolo { color: var(--terra); }
.riga-contenuto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
.riga-titolo { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; line-height: 1.3; }
.riga-figura { flex: none; width: 84px; height: 84px; border-radius: var(--r-sm); overflow: hidden; background: var(--superficie-2); }
.riga-figura img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 620px) { .riga-figura { width: 132px; height: 92px; } }

/* Data a calendario per gli eventi */
.data-blocco {
    flex: none; width: 56px;
    border: 1px solid var(--bordo); border-radius: var(--r-sm);
    overflow: hidden; text-align: center;
    background: var(--superficie);
}
.data-blocco-mese {
    background: var(--terra); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 2px 0;
}
.data-blocco-giorno { font-size: 1.35rem; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   11. METADATI: distanza, tipo, stato
   ------------------------------------------------------------ */

.meta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: var(--t-xs); color: var(--inchiostro-2); }
.meta-voce { display: inline-flex; align-items: center; gap: 4px; }
.meta-voce svg { flex: none; opacity: .75; }

/* La distanza è informazione di prima classe: ha un token dedicato */
.distanza {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--t-xs); font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--terra);
    background: var(--terra-velo);
    padding: 2px var(--s2);
    border-radius: var(--r-full);
    white-space: nowrap;
}
.distanza svg { flex: none; }

.tipo {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 2px var(--s2); border-radius: var(--r-sm);
    white-space: nowrap;
}
.tipo-notizia   { background: var(--ardesia-velo); color: var(--ardesia); }
.tipo-evento    { background: var(--terra-velo);   color: var(--terra); }
.tipo-avviso    { background: var(--oro-velo);     color: var(--oro); }
.tipo-documento { background: var(--bosco-velo);   color: var(--bosco); }
.tipo-attivita  { background: var(--superficie-2); color: var(--inchiostro-2); }

.pallino { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); font-weight: 600; }
.pallino::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.aperto  { color: var(--successo); }
.chiuso  { color: var(--inchiostro-3); }

.spunta-aderente {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--t-xs); font-weight: 600; color: var(--bosco);
}

/* ------------------------------------------------------------
   12. STATO VUOTO — mai un vicolo cieco
   ------------------------------------------------------------ */

.vuoto {
    text-align: center;
    padding: var(--s7) var(--s4);
    border: 1px dashed var(--bordo-forte);
    border-radius: var(--r-lg);
    background: var(--superficie);
}
.vuoto svg { margin: 0 auto var(--s3); color: var(--inchiostro-3); }
.vuoto h3 { font-size: var(--t-md); }
.vuoto p  { margin-top: var(--s2); color: var(--inchiostro-2); font-size: var(--t-sm); max-width: 44ch; margin-inline: auto; }
.vuoto .btn { margin-top: var(--s4); }

/* Avviso di ampliamento automatico dell'ambito */
.allargato {
    display: flex; align-items: flex-start; gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--oro-velo);
    border: 1px solid color-mix(in srgb, var(--oro) 30%, transparent);
    border-radius: var(--r);
    font-size: var(--t-sm);
    color: var(--inchiostro);
    margin-bottom: var(--s5);
}
.allargato svg { flex: none; color: var(--oro); margin-top: 2px; }

/* ------------------------------------------------------------
   13. COPERTINA / TESTATA DI PAGINA
   ------------------------------------------------------------ */

.copertina { padding-block: var(--s6) var(--s5); }
.copertina h1 { margin-top: var(--s3); }
.copertina .sommario { margin-top: var(--s3); font-size: var(--t-md); color: var(--inchiostro-2); max-width: 60ch; }

.briciole { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--t-xs); color: var(--inchiostro-2); }
.briciole a { color: var(--inchiostro-2); text-decoration: none; }
.briciole a:hover { color: var(--terra); text-decoration: underline; }
.briciole svg { opacity: .5; flex: none; }

.copertina-immagine {
    aspect-ratio: 21 / 9; margin-top: var(--s5);
    border-radius: var(--r-lg); overflow: hidden; background: var(--superficie-2);
}
.copertina-immagine img { width: 100%; height: 100%; object-fit: cover; }

/* Apertura della home: dichiarativa, non promozionale */
.apertura { padding-block: var(--s6) var(--s5); }
.apertura h1 { font-size: var(--t-3xl); max-width: 18ch; }
.apertura p  { margin-top: var(--s4); font-size: var(--t-md); color: var(--inchiostro-2); max-width: 52ch; }
.apertura-azioni { margin-top: var(--s5); display: flex; gap: var(--s3); flex-wrap: wrap; }

/* ------------------------------------------------------------
   14. NAVIGAZIONE A SEZIONI (pagina comune)
   ------------------------------------------------------------ */

.ancore {
    position: sticky; top: calc(var(--h-header) + var(--h-contesto)); z-index: 40;
    background: var(--sfondo);
    border-bottom: 1px solid var(--bordo);
    margin-bottom: var(--s5);
}
.ancore-lista {
    display: flex; gap: var(--s1);
    overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4);
}
.ancore-lista::-webkit-scrollbar { display: none; }
.ancora {
    padding: var(--s3) var(--s3);
    font-size: var(--t-sm); font-weight: 500;
    color: var(--inchiostro-2); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.ancora:hover { color: var(--inchiostro); }
.ancora.attiva { color: var(--terra); border-bottom-color: var(--terra); font-weight: 600; }

/* ------------------------------------------------------------
   15. MODULI
   ------------------------------------------------------------ */

.gruppo-campo { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.etichetta { font-size: var(--t-sm); font-weight: 600; }
.etichetta .opz { font-weight: 400; color: var(--inchiostro-3); }

.campo {
    width: 100%;
    padding: var(--s3);
    min-height: 44px;
    background: var(--superficie);
    border: 1px solid var(--bordo-forte);
    border-radius: var(--r);
    font-size: 16px; /* evita lo zoom automatico su iOS */
    transition: border-color var(--transizione), box-shadow var(--transizione);
}
.campo:focus {
    outline: none;
    border-color: var(--terra);
    box-shadow: 0 0 0 3px var(--terra-velo);
}
.campo::placeholder { color: var(--inchiostro-3); }
textarea.campo { min-height: 140px; resize: vertical; line-height: 1.6; }
select.campo { appearance: none; background-image: none; }

.aiuto { font-size: var(--t-xs); color: var(--inchiostro-2); }
.onore { position: absolute; left: -9999px; }

.avviso { padding: var(--s4); border-radius: var(--r); font-size: var(--t-sm); margin-bottom: var(--s4); border: 1px solid; }
.avviso-ok      { background: var(--bosco-velo); border-color: color-mix(in srgb, var(--bosco) 35%, transparent); color: var(--successo); }
.avviso-errore  { background: var(--terra-velo); border-color: color-mix(in srgb, var(--attenzione) 35%, transparent); color: var(--attenzione); }
.avviso ul { margin-top: var(--s2); padding-left: 1.1rem; list-style: disc; }

/* ------------------------------------------------------------
   16. PAGINAZIONE
   ------------------------------------------------------------ */

.paginazione {
    display: flex; align-items: center; justify-content: center; gap: var(--s4);
    margin-top: var(--s6);
    font-size: var(--t-sm);
}
.paginazione-stato { color: var(--inchiostro-2); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   17. PUBBLICITÀ — nativa nel flusso, mai colonne laterali
   ------------------------------------------------------------ */

.reclame {
    display: block;
    border: 1px solid var(--bordo);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--superficie);
    text-decoration: none;
}
.reclame img { width: 100%; height: auto; }
.reclame-etichetta {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px var(--s3);
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--inchiostro-3);
    border-top: 1px solid var(--bordo);
}
/* Uno slot vuoto NON si disegna: un placeholder "300×240" fa
   sembrare il sito abbandonato. Nessuna regola per .reclame-vuota. */

/* ------------------------------------------------------------
   18. PIÈ DI PAGINA
   ------------------------------------------------------------ */

.piede {
    margin-top: var(--s8);
    background: var(--superficie-2);
    border-top: 1px solid var(--bordo);
    padding-block: var(--s6);
    padding-bottom: calc(var(--s6) + var(--h-navbasso));
}
@media (min-width: 900px) { .piede { padding-bottom: var(--s6); } }

.piede-griglia { display: grid; gap: var(--s5); }
@media (min-width: 620px) { .piede-griglia { grid-template-columns: 2fr 1fr 1fr; } }
.piede h4 { font-family: var(--font-ui); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .07em; color: var(--inchiostro-2); margin-bottom: var(--s3); }
.piede a { color: var(--inchiostro-2); text-decoration: none; font-size: var(--t-sm); }
.piede a:hover { color: var(--terra); }
.piede li + li { margin-top: var(--s2); }
.piede-nota {
    margin-top: var(--s6); padding-top: var(--s4);
    border-top: 1px solid var(--bordo);
    display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
    font-size: var(--t-xs); color: var(--inchiostro-3);
}

/* ------------------------------------------------------------
   19. NAVIGAZIONE INFERIORE (solo telefono)
   ------------------------------------------------------------ */

.nav-basso {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: color-mix(in srgb, var(--superficie) 94%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--bordo);
    padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 900px) { .nav-basso { display: none; } }
@supports not (backdrop-filter: blur(1px)) { .nav-basso { background: var(--superficie); } }

.nav-basso-voce {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: var(--h-navbasso);
    font-size: 10px; font-weight: 600;
    color: var(--inchiostro-3); text-decoration: none;
}
.nav-basso-voce[aria-current="page"] { color: var(--terra); }
.nav-basso-voce svg { flex: none; }

/* ------------------------------------------------------------
   20. UTILITÀ
   ------------------------------------------------------------ */

.solo-lettori-schermo {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.centro   { text-align: center; }
.nascosto { display: none !important; }
@media (min-width: 900px) { .solo-telefono { display: none !important; } }
@media (max-width: 899px) { .solo-desktop  { display: none !important; } }