/* =====================================================================
   annuncivallecamonica.com — foglio di stile principale
   ---------------------------------------------------------------------
   Impostazione mobile first: le regole base valgono per il telefono,
   le media query aggiungono complessità sugli schermi grandi. Su un
   portale di annunci locali la maggioranza del traffico arriva da
   mobile, quindi il caso semplice deve essere quello predefinito.

   Il tono è volutamente aggressivo: fondo scuro, rosso deciso, titoli
   pesanti e molto contrasto. Niente ombre morbide o angoli tondi
   generosi — l'obiettivo è sembrare uno strumento, non una brochure.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKEN
   --------------------------------------------------------------------- */
:root {
    /* Palette */
    --nero:          #0d1117;
    --nero-morbido:  #161b22;
    --grigio-scuro:  #21262d;
    --grigio:        #6e7681;
    --grigio-chiaro: #c9d1d9;
    --bianco:        #ffffff;
    --sfondo:        #f6f7f9;
    --superficie:    #ffffff;
    --bordo:         #e3e6ea;

    --rosso:         #e63946;
    --rosso-scuro:   #c1121f;
    --blu:           #1d3557;
    --verde:         #2a9d8f;
    --giallo:        #e9c46a;

    /* Oro del piano Top. Due tonalità perché lo stesso colore deve
       reggere sia sulle schede chiare delle liste sia sulla fascia
       scura della homepage: la versione base ha contrasto sufficiente
       col testo scuro, quella chiara si stacca dal fondo nero. */
    --oro:           #c8930a;
    --oro-chiaro:    #f2c14e;
    --oro-scuro:     #7a5a00;

    --testo:         #14181f;
    --testo-tenue:   #5b6472;

    /* Tipografia */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

    /* Spaziature su scala coerente */
    --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
    --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;

    --raggio:   6px;
    --raggio-g: 10px;

    --ombra:   0 1px 2px rgba(13, 17, 23, .06), 0 2px 8px rgba(13, 17, 23, .04);
    --ombra-f: 0 4px 12px rgba(13, 17, 23, .10), 0 12px 32px rgba(13, 17, 23, .08);

    --contenitore: 1240px;
}

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

html { -webkit-text-size-adjust: 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(--font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--testo);
    background: var(--sfondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--s3); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
p  { margin: 0 0 var(--s3); }
ul { margin: 0; padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--rosso); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

/* La messa a fuoco da tastiera deve restare sempre ben visibile:
   toglierla rende il sito inutilizzabile senza mouse. */
:focus-visible {
    outline: 3px solid var(--rosso);
    outline-offset: 2px;
    border-radius: 2px;
}

/* L'attributo `hidden` deve vincere sempre.
   Il browser lo applica con `[hidden] { display: none }`, che ha
   specificità inferiore a qualunque regola su classe: senza questa
   riga, un elemento con `hidden` ma con `display: grid` impostato da
   una classe resta visibile. È esattamente ciò che succedeva al
   pannello delle preferenze cookie. */
[hidden] { display: none !important; }

.contenitore {
    width: min(100% - 2rem, var(--contenitore));
    margin-inline: auto;
}

.visivamente-nascosto {
    position: absolute; 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; left: -9999px; top: 0; z-index: 999;
    background: var(--rosso); color: #fff; padding: var(--s3) var(--s4); font-weight: 700;
}
.salta-al-contenuto:focus { left: 0; }

/* ---------------------------------------------------------------------
   3. BOTTONI
   --------------------------------------------------------------------- */
.bottone {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    padding: .65rem 1.25rem;
    border: 2px solid transparent; border-radius: var(--raggio);
    font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.bottone:hover { text-decoration: none; }
.bottone:active { transform: translateY(1px); }

.bottone--primario { background: var(--rosso); color: #fff; }
.bottone--primario:hover { background: var(--rosso-scuro); }

.bottone--scuro { background: var(--blu); color: #fff; }
.bottone--scuro:hover { background: #14273f; }

.bottone--fantasma { background: transparent; color: var(--testo); border-color: var(--bordo); }
.bottone--fantasma:hover { border-color: var(--testo); background: rgba(0, 0, 0, .03); }

.bottone--pieno  { width: 100%; }
.bottone--grande { padding: .9rem 1.75rem; font-size: 1.05rem; }

.collegamento-nudo {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: inherit; text-decoration: underline; font-size: inherit;
}

/* ---------------------------------------------------------------------
   4. TESTATA
   --------------------------------------------------------------------- */
.testata {
    background: var(--nero);
    color: var(--grigio-chiaro);
    position: sticky; top: 0; z-index: 50;
    border-bottom: 1px solid var(--grigio-scuro);
}

/* Su schermo stretto ricerca e voci utente sono nascoste: le colonne
   diventano due, così il pulsante del menu resta all'estremità destra
   invece di accostarsi al marchio. */
.testata__barra {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--s4);
    padding-block: var(--s3);
}

.marchio { display: inline-flex; align-items: center; gap: var(--s3); color: #fff; }
.marchio:hover { text-decoration: none; }

.marchio__segno {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    background: var(--rosso); color: #fff;
    font-weight: 900; font-size: .82rem; letter-spacing: -.03em;
    /* Angolo tagliato: piccolo segno grafico che rende il marchio
       riconoscibile senza bisogno di un logo disegnato. */
    clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}

.marchio__testo { font-size: 1.05rem; font-weight: 500; letter-spacing: -.02em; }
.marchio__testo strong { display: block; font-weight: 800; margin-top: -4px; }

.ricerca { display: none; position: relative; }
.ricerca input {
    width: 100%; padding: .6rem 3rem .6rem 1rem;
    background: var(--grigio-scuro); color: #fff;
    border: 1px solid transparent; border-radius: var(--raggio);
}
.ricerca input::placeholder { color: var(--grigio); }
.ricerca input:focus { border-color: var(--rosso); background: var(--nero-morbido); }
.ricerca button {
    position: absolute; right: 4px; top: 4px; bottom: 4px; width: 40px;
    display: grid; place-items: center;
    background: var(--rosso); color: #fff; border: 0; border-radius: 4px; cursor: pointer;
}

.azioni { display: none; align-items: center; gap: var(--s4); }
.azioni__link { color: var(--grigio-chiaro); font-weight: 600; font-size: .92rem; }
.azioni__link:hover { color: #fff; text-decoration: none; }
.azioni__link--nudo { background: none; border: 0; cursor: pointer; padding: 0; }

/* Il collegamento al pannello si distingue dal resto del menu: chi lo
   vede ha privilegi diversi e deve accorgersene. */
.azioni__link--staff {
    border: 1px solid var(--grigio); border-radius: var(--raggio);
    padding: .3rem .7rem; font-size: .85rem;
}
.azioni__link--staff:hover { border-color: var(--rosso); color: var(--rosso); }
.in-linea { display: inline; margin: 0; }

.menu-mobile {
    display: grid; gap: 5px; padding: var(--s2);
    justify-self: end;
    background: none; border: 0; cursor: pointer;
}
.menu-mobile span {
    display: block; width: 24px; height: 2px; background: #fff;
    transition: transform .18s ease, opacity .18s ease;
}
/* Le tre barre diventano una croce quando il pannello è aperto:
   il pulsante dice sempre cosa succederà premendolo. */
.menu-mobile[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-mobile[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-mobile[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   Pannello di navigazione per schermi stretti
   --------------------------------------------------------------------- */
.pannello-mobile {
    background: var(--nero-morbido);
    border-top: 1px solid var(--grigio-scuro);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}
.pannello-mobile__corpo { padding-block: var(--s4); display: grid; gap: var(--s5); }

.pannello-mobile__ricerca { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); }
.pannello-mobile__ricerca input {
    padding: .7rem 1rem; border-radius: var(--raggio);
    background: var(--grigio-scuro); color: #fff; border: 1px solid transparent;
}
.pannello-mobile__ricerca input::placeholder { color: var(--grigio); }
.pannello-mobile__ricerca input:focus { border-color: var(--rosso); }

.pannello-mobile__titolo {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--grigio); margin-bottom: var(--s2);
}
.pannello-mobile__elenco { display: grid; }
.pannello-mobile__elenco a {
    --accento-voce: var(--rosso);
    display: block; padding: .7rem 0 .7rem var(--s3);
    color: var(--grigio-chiaro); font-weight: 600;
    border-bottom: 1px solid var(--grigio-scuro);
    border-left: 3px solid transparent;
}
.pannello-mobile__elenco a:hover,
.pannello-mobile__elenco a:focus-visible {
    color: #fff; border-left-color: var(--accento-voce); text-decoration: none;
}

.pannello-mobile__utente { display: grid; gap: var(--s3); }
.pannello-mobile__utente a { color: var(--grigio-chiaro); font-weight: 600; }
.pannello-mobile__utente .bottone { color: #fff; }
.pannello-mobile__utente form { margin: 0; }
.pannello-mobile__utente .collegamento-nudo { color: var(--grigio); }

/* ---------------------------------------------------------------------
   Striscia orizzontale delle categorie
   --------------------------------------------------------------------- */
.categorie-barra {
    background: var(--nero-morbido);
    border-top: 1px solid var(--grigio-scuro);
    /* La sfumatura a destra segnala che la striscia continua oltre il
       bordo: senza, sembra semplicemente troncata. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.categorie-barra__lista {
    display: flex; gap: var(--s1);
    overflow-x: auto;
    padding-block: var(--s2);
    /* Barra sottile ma VISIBILE: nasconderla funziona solo dove si
       scorre col dito. Con il mouse, una striscia senza barra e senza
       swipe rende le ultime categorie irraggiungibili. */
    scrollbar-width: thin;
    scrollbar-color: var(--grigio) transparent;
}
.categorie-barra__lista::-webkit-scrollbar { height: 4px; }
.categorie-barra__lista::-webkit-scrollbar-track { background: transparent; }
.categorie-barra__lista::-webkit-scrollbar-thumb {
    background: var(--grigio); border-radius: 100px;
}

/* Dove si scorre col dito la barra non serve e ruba spazio. */
@media (hover: none) and (pointer: coarse) {
    .categorie-barra__lista { scrollbar-width: none; }
    .categorie-barra__lista::-webkit-scrollbar { display: none; }
}

.categorie-barra__voce {
    --accento-voce: var(--rosso);
    padding: .45rem .85rem;
    color: var(--grigio-chiaro); font-size: .88rem; font-weight: 600;
    white-space: nowrap; border-radius: var(--raggio);
    border-bottom: 2px solid transparent;
}
.categorie-barra__voce:hover,
.categorie-barra__voce.attivo {
    color: #fff; background: rgba(255, 255, 255, .06);
    border-bottom-color: var(--accento-voce); text-decoration: none;
}

@media (min-width: 900px) {
    .testata__barra { grid-template-columns: auto 1fr auto; }
    .ricerca { display: block; }
    .azioni  { display: flex; }
    .menu-mobile { display: none; }
    /* Il pannello serve solo dove la barra non ci sta: da qui in su
       resta chiuso anche se era stato aperto prima di allargare la
       finestra. */
    .pannello-mobile { display: none !important; }
    .categorie-barra { -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------------------------------
   5. AVVISI
   --------------------------------------------------------------------- */
.avvisi { margin-top: var(--s4); display: grid; gap: var(--s2); }

.avviso {
    display: flex; align-items: flex-start; gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-radius: var(--raggio);
    border-left: 4px solid var(--grigio);
    background: var(--superficie); box-shadow: var(--ombra);
}
.avviso p { margin: 0; flex: 1; }
.avviso__icona {
    display: grid; place-items: center; flex: 0 0 22px; height: 22px;
    border-radius: 50%; font-size: .75rem; font-weight: 900; color: #fff; background: var(--grigio);
}
.avviso__chiudi { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--grigio); }

.avviso--successo { border-left-color: var(--verde); }
.avviso--successo .avviso__icona { background: var(--verde); }
.avviso--errore   { border-left-color: var(--rosso); }
.avviso--errore .avviso__icona   { background: var(--rosso); }
.avviso--avviso   { border-left-color: var(--giallo); }
.avviso--avviso .avviso__icona   { background: var(--giallo); color: var(--testo); }
.avviso--info     { border-left-color: var(--blu); }
.avviso--info .avviso__icona     { background: var(--blu); }

/* ---------------------------------------------------------------------
   6. EROE
   --------------------------------------------------------------------- */
.eroe {
    background:
        radial-gradient(ellipse at 15% -10%, rgba(230, 57, 70, .30), transparent 55%),
        linear-gradient(160deg, var(--nero) 0%, #1a2233 100%);
    color: #fff;
    padding-block: var(--s7) var(--s8);
}

.eroe__occhiello {
    text-transform: uppercase; letter-spacing: .18em;
    font-size: .72rem; font-weight: 800; color: var(--rosso); margin-bottom: var(--s3);
}

.eroe__titolo {
    font-size: clamp(2.2rem, 8vw, 4.2rem);
    font-weight: 900; letter-spacing: -.035em; margin-bottom: var(--s4);
}
.evidenziato {
    background: linear-gradient(180deg, transparent 62%, var(--rosso) 62%, var(--rosso) 92%, transparent 92%);
    padding-inline: .1em;
}

.eroe__sottotitolo {
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    color: var(--grigio-chiaro); max-width: 48ch; margin-bottom: var(--s5);
}

.eroe__ricerca { display: grid; gap: var(--s2); max-width: 760px; }
.eroe__ricerca input, .eroe__ricerca select {
    padding: .85rem 1rem; border: 2px solid transparent; border-radius: var(--raggio);
    background: #fff; color: var(--testo);
}
.eroe__ricerca input:focus, .eroe__ricerca select:focus { border-color: var(--rosso); }

.eroe__numeri { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s6); color: var(--grigio-chiaro); font-size: .9rem; }
.eroe__numeri strong { display: block; font-size: 1.5rem; color: #fff; font-weight: 800; }

@media (min-width: 760px) {
    .eroe__ricerca { grid-template-columns: 1fr auto auto; }
}

/* ---------------------------------------------------------------------
   7. SEZIONI
   --------------------------------------------------------------------- */
.sezione { padding-block: var(--s7); }
.sezione--scura { background: var(--nero); color: #fff; }
.sezione--scura .sezione__titolo { color: #fff; }

.sezione__testata {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s4); margin-bottom: var(--s5);
    border-bottom: 3px solid var(--testo); padding-bottom: var(--s3);
}
.sezione--scura .sezione__testata { border-bottom-color: var(--grigio-scuro); }

.sezione__titolo { font-size: clamp(1.4rem, 4vw, 2rem); margin: 0; text-transform: uppercase; letter-spacing: -.02em; }
.sezione__collegamento { font-weight: 700; font-size: .9rem; white-space: nowrap; }

/* Fascia degli annunci Top: filo dorato in cima e titolo con fregio,
   così lo spazio si legge come "a pagamento" anche prima di guardare
   le schede. */
.sezione--top { border-top: 3px solid var(--oro); }
.sezione--top .sezione__testata { border-bottom-color: rgba(242, 193, 78, .35); }
.sezione--top .sezione__titolo { display: flex; align-items: center; gap: var(--s3); }
.sezione__fregio {
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--oro-chiaro), var(--oro));
    box-shadow: 0 0 14px rgba(242, 193, 78, .5);
}

.bottone--oro { background: linear-gradient(135deg, var(--oro-chiaro), var(--oro)); color: #2b2000; }
.bottone--oro:hover { background: var(--oro-chiaro); color: #2b2000; }

.invito-top {
    text-align: center; padding: var(--s7) var(--s4);
    border: 1px dashed rgba(242, 193, 78, .45); border-radius: var(--raggio-g);
    background: rgba(242, 193, 78, .05);
}
.invito-top__titolo {
    font-size: clamp(1.2rem, 3.5vw, 1.6rem); font-weight: 800;
    color: var(--oro-chiaro); margin-bottom: var(--s2);
}
.invito-top p { color: var(--grigio-chiaro); max-width: 56ch; margin-inline: auto; }
.invito-top .bottone { margin-top: var(--s4); }

/* ---------------------------------------------------------------------
   8. CATEGORIE E COMUNI
   --------------------------------------------------------------------- */
.griglia-categorie {
    display: grid; gap: var(--s3);
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.tessera-categoria {
    --accento-tessera: var(--rosso);
    display: block; padding: var(--s4);
    background: var(--superficie); color: var(--testo);
    border: 1px solid var(--bordo); border-radius: var(--raggio);
    border-left: 4px solid var(--accento-tessera);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tessera-categoria:hover {
    transform: translateY(-2px); box-shadow: var(--ombra-f); text-decoration: none;
}
.tessera-categoria__nome { display: block; font-weight: 800; margin-bottom: var(--s1); }
.tessera-categoria__sotto { display: block; font-size: .78rem; color: var(--testo-tenue); line-height: 1.4; }

.nuvola-comuni { display: flex; flex-wrap: wrap; gap: var(--s2); }
.nuvola-comuni__voce {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: .4rem .8rem;
    background: var(--superficie); color: var(--testo);
    border: 1px solid var(--bordo); border-radius: 100px; font-size: .88rem; font-weight: 600;
}
.nuvola-comuni__voce:hover { border-color: var(--rosso); color: var(--rosso); text-decoration: none; }
.nuvola-comuni__voce span {
    background: var(--sfondo); color: var(--testo-tenue);
    padding: 0 .45rem; border-radius: 100px; font-size: .75rem; font-weight: 700;
}

/* ---------------------------------------------------------------------
   9. SCHEDE ANNUNCIO
   --------------------------------------------------------------------- */
.griglia-annunci {
    display: grid; gap: var(--s4);
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.scheda {
    background: var(--superficie);
    /* Colore dichiarato esplicitamente, non ereditato: la scheda ha
       fondo bianco proprio e deve restare leggibile ovunque venga
       inserita. Ereditandolo, dentro `.sezione--scura` titolo e prezzo
       diventavano bianchi su bianco — la scheda sembrava vuota. */
    color: var(--testo);
    border: 1px solid var(--bordo); border-radius: var(--raggio);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.scheda:hover { transform: translateY(-3px); box-shadow: var(--ombra-f); border-color: #cdd3db; }
.scheda__collegamento { display: block; color: inherit; }
.scheda__collegamento:hover { text-decoration: none; }

/* I piani a pagamento devono essere riconoscibili a colpo d'occhio:
   è il valore che l'inserzionista ha comprato. */
.scheda--evidenza { border-color: var(--rosso); box-shadow: 0 0 0 1px var(--rosso); }

/* Il Top è il livello più alto e deve leggersi come tale: cornice
   dorata piena, alone caldo e una fascia in cima alla scheda. Un
   semplice bordo colorato si confonderebbe con l'Evidenziato. */
.scheda--top {
    border-color: var(--oro);
    box-shadow: 0 0 0 2px var(--oro), 0 6px 22px rgba(200, 147, 10, .28);
}
.scheda--top .scheda__media::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--oro-chiaro), var(--oro), var(--oro-chiaro));
}
.scheda--top:hover {
    box-shadow: 0 0 0 2px var(--oro), 0 10px 30px rgba(200, 147, 10, .42);
}
.scheda--top .scheda__prezzo { color: var(--oro-scuro); }

/* Sulla fascia scura della homepage l'oro va schiarito, altrimenti
   sparisce contro il nero. */
.sezione--scura .scheda--top { box-shadow: 0 0 0 2px var(--oro-chiaro), 0 6px 24px rgba(242, 193, 78, .3); }
.sezione--scura .scheda--top { border-color: var(--oro-chiaro); }

.scheda__media { position: relative; aspect-ratio: 4 / 3; background: var(--sfondo); }
.scheda__media img { width: 100%; height: 100%; object-fit: cover; }

.scheda__conta-foto {
    position: absolute; right: var(--s2); bottom: var(--s2);
    background: rgba(13, 17, 23, .78); color: #fff;
    font-size: .7rem; font-weight: 700; padding: .15rem .45rem; border-radius: 3px;
}

.etichetta {
    display: inline-block; padding: .18rem .5rem;
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    border-radius: 3px; background: var(--grigio-scuro); color: #fff;
}
.scheda__media .etichetta { position: absolute; left: var(--s2); top: calc(var(--s2) + 4px); }
.etichetta--evidenza { background: var(--rosso); }
.etichetta--tipo     { background: var(--verde); }

/* Badge dorato con testo scuro: il contrasto regge sia sulle foto
   chiare sia su quelle scure, cosa che un testo bianco su oro non fa. */
.etichetta--top {
    background: linear-gradient(135deg, var(--oro-chiaro), var(--oro));
    color: #2b2000;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.scheda__corpo { padding: var(--s3); }
.scheda__prezzo { font-size: 1.15rem; font-weight: 900; margin: 0 0 var(--s1); letter-spacing: -.02em; }
.scheda__trattabile { font-size: .7rem; font-weight: 600; color: var(--testo-tenue); text-transform: uppercase; }

.scheda__titolo {
    font-size: .95rem; font-weight: 600; line-height: 1.35; margin: 0 0 var(--s2);
    /* Due righe massimo: le schede devono restare alte uguali,
       altrimenti la griglia diventa irregolare. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.scheda__meta { font-size: .78rem; color: var(--testo-tenue); margin: 0; display: flex; gap: var(--s1); flex-wrap: wrap; }
.scheda__comune { font-weight: 700; color: var(--testo); }
.scheda__attributi { font-size: .78rem; color: var(--testo-tenue); margin: var(--s2) 0 0; padding-top: var(--s2); border-top: 1px solid var(--bordo); }

/* ---------------------------------------------------------------------
   10. LISTA E FILTRI
   --------------------------------------------------------------------- */
.intestazione-lista { padding-block: var(--s5) var(--s4); }

.briciole { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: .82rem; color: var(--testo-tenue); padding-top: var(--s4); }
.briciole a { color: var(--testo-tenue); }
.briciole [aria-current] { color: var(--testo); font-weight: 700; }

.titolo-pagina { font-size: clamp(1.6rem, 5vw, 2.4rem); margin-bottom: var(--s2); }
.sottotitolo-pagina { color: var(--testo-tenue); max-width: 62ch; }

.disposizione-lista { display: grid; gap: var(--s5); padding-bottom: var(--s7); }

.filtri { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: var(--s4); height: fit-content; }
.filtri__gruppo { margin-bottom: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--bordo); }
.filtri__gruppo:last-of-type { border-bottom: 0; }
.filtri__titolo { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--testo-tenue); margin-bottom: var(--s2); }
.filtri__coppia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.filtri__campo { margin-bottom: var(--s3); }
.filtri__etichetta { display: block; font-size: .84rem; font-weight: 600; margin-bottom: var(--s1); }
.filtri__etichetta span { color: var(--testo-tenue); font-weight: 400; }
.filtri__gruppo--dinamico { background: var(--sfondo); margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); }
.filtri__azzera { display: block; text-align: center; margin-top: var(--s3); font-size: .85rem; color: var(--testo-tenue); }

.filtri input, .filtri select,
.campo input, .campo select, .campo textarea,
.modulo-contatto input, .modulo-contatto textarea,
.modulo-segnalazione select, .modulo-segnalazione textarea {
    width: 100%; padding: .55rem .7rem;
    border: 1px solid var(--bordo); border-radius: var(--raggio);
    background: #fff;
}
.filtri input:focus, .filtri select:focus,
.campo input:focus, .campo select:focus, .campo textarea:focus {
    border-color: var(--rosso); outline-offset: 0;
}

.casella, .scelta { display: flex; align-items: flex-start; gap: var(--s2); cursor: pointer; margin-bottom: var(--s3); font-size: .9rem; }
.casella input, .scelta input { width: auto; margin-top: .25rem; accent-color: var(--rosso); flex: 0 0 auto; }

.risultati__barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap;
}
.risultati__conteggio { margin: 0; color: var(--testo-tenue); font-size: .9rem; }
.risultati__conteggio strong { color: var(--testo); font-size: 1.1rem; }
.risultati__ordina select { padding: .45rem .7rem; border: 1px solid var(--bordo); border-radius: var(--raggio); background: #fff; }

@media (min-width: 960px) {
    .disposizione-lista { grid-template-columns: 280px 1fr; align-items: start; }
    .filtri { position: sticky; top: 130px; }
}

/* ---------------------------------------------------------------------
   11. PAGINAZIONE
   --------------------------------------------------------------------- */
.paginazione { display: flex; flex-wrap: wrap; gap: var(--s1); justify-content: center; margin-top: var(--s6); }
.paginazione__voce {
    min-width: 40px; padding: .45rem .7rem; text-align: center;
    border: 1px solid var(--bordo); border-radius: var(--raggio);
    background: var(--superficie); color: var(--testo); font-weight: 600; font-size: .9rem;
}
.paginazione__voce:hover { border-color: var(--testo); text-decoration: none; }
.paginazione__voce--corrente { background: var(--testo); border-color: var(--testo); color: #fff; }
.paginazione__salto { padding: .45rem .3rem; color: var(--testo-tenue); }

/* ---------------------------------------------------------------------
   12. DETTAGLIO ANNUNCIO
   --------------------------------------------------------------------- */
.dettaglio { display: grid; gap: var(--s5); padding-block: var(--s4) var(--s7); }

.galleria__principale { margin: 0; background: var(--nero); border-radius: var(--raggio); overflow: hidden; }
.galleria__principale img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.galleria__miniature { display: flex; gap: var(--s2); overflow-x: auto; padding-top: var(--s2); scrollbar-width: thin; }
.galleria__miniatura { flex: 0 0 88px; padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; cursor: pointer; overflow: hidden; }
.galleria__miniatura.attiva { border-color: var(--rosso); }
.galleria__miniatura img { width: 88px; height: 66px; object-fit: cover; }
.galleria__vuota { display: grid; place-items: center; gap: var(--s2); background: var(--superficie); border: 1px dashed var(--bordo); border-radius: var(--raggio); padding: var(--s6); color: var(--testo-tenue); }
.galleria__vuota img { width: 120px; opacity: .35; }

.dettaglio__testata { padding-top: var(--s5); }
.dettaglio__etichette { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.dettaglio__titolo { font-size: clamp(1.5rem, 4.5vw, 2.2rem); }
.dettaglio__prezzo { font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 900; color: var(--rosso); margin: 0 0 var(--s2); letter-spacing: -.03em; }
.dettaglio__trattabile { font-size: .8rem; font-weight: 600; color: var(--testo-tenue); text-transform: uppercase; }
.dettaglio__meta { color: var(--testo-tenue); font-size: .9rem; }

.dettaglio__blocco { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--bordo); }
.dettaglio__sottotitolo { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--s4); }
.dettaglio__descrizione { white-space: pre-line; line-height: 1.7; }

.specifiche { display: grid; gap: 1px; background: var(--bordo); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; margin: 0; }
.specifiche__voce { display: flex; justify-content: space-between; gap: var(--s3); padding: .6rem var(--s3); background: var(--superficie); }
.specifiche__voce dt { color: var(--testo-tenue); font-size: .88rem; }
.specifiche__voce dd { margin: 0; font-weight: 700; text-align: right; }

.dettaglio__blocco--segnala summary { cursor: pointer; color: var(--testo-tenue); font-size: .88rem; }
.modulo-segnalazione { margin-top: var(--s3); display: grid; gap: var(--s2); max-width: 460px; }
.modulo-segnalazione label { font-size: .85rem; font-weight: 600; }

@media (min-width: 960px) {
    .dettaglio { grid-template-columns: 1fr 360px; align-items: start; }
    .specifiche { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   13. RIQUADRO CONTATTO
   --------------------------------------------------------------------- */
.riquadro-contatto {
    background: var(--superficie); border: 1px solid var(--bordo);
    border-top: 4px solid var(--rosso); border-radius: var(--raggio);
    padding: var(--s4);
}
/* Lo sticky serve solo quando le colonne sono due: su schermo stretto
   il riquadro sta sotto al contenuto e "incollarlo" lascerebbe una
   fascia vuota alla fine della pagina. */
@media (min-width: 960px) {
    .riquadro-contatto { position: sticky; top: 130px; }
}
.riquadro-contatto__inserzionista { display: flex; gap: var(--s3); align-items: center; padding-bottom: var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid var(--bordo); }
.avatar { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: var(--blu); color: #fff; font-weight: 800; font-size: 1.2rem; }
.riquadro-contatto__nome { margin: 0; font-weight: 800; }
.riquadro-contatto__tipo { margin: 0; font-size: .78rem; color: var(--testo-tenue); }
.riquadro-contatto__titolo { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--testo-tenue); margin: var(--s4) 0 var(--s3); }
.riquadro-contatto__telefono { font-size: 1.3rem; font-weight: 900; text-align: center; margin-top: var(--s2); letter-spacing: -.02em; }

.modulo-contatto { display: grid; gap: var(--s2); }
.modulo-contatto label { font-size: .85rem; font-weight: 600; }
.modulo-contatto label span { color: var(--testo-tenue); font-weight: 400; }
.modulo-contatto .bottone { margin-top: var(--s2); }

/* Campo esca: invisibile e fuori dal flusso di tabulazione, ma non
   con display:none — alcuni bot ignorano i campi nascosti così. */
.campo-esca { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.aiuto { font-size: .78rem; color: var(--testo-tenue); margin: 0; }
.aiuto--piccolo { font-size: .72rem; margin-top: var(--s2); }

/* ---------------------------------------------------------------------
   14. MODULI E SCHEDE FORM
   --------------------------------------------------------------------- */
.riquadro-accesso { display: grid; place-items: center; padding-block: var(--s7); }
.riquadro-accesso--largo .scheda-modulo { max-width: 640px; }

.scheda-modulo {
    width: 100%; max-width: 440px;
    background: var(--superficie); border: 1px solid var(--bordo);
    border-top: 4px solid var(--rosso); border-radius: var(--raggio-g);
    padding: var(--s6); box-shadow: var(--ombra);
}
.scheda-modulo--centrata { text-align: center; }
.scheda-modulo__simbolo { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sfondo); font-size: 1.6rem; margin-bottom: var(--s4); }
.scheda-modulo__titolo { font-size: 1.6rem; }
.scheda-modulo__sottotitolo { color: var(--testo-tenue); margin-bottom: var(--s5); }
.scheda-modulo__pie { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--bordo); text-align: center; font-size: .9rem; color: var(--testo-tenue); }

.campo { margin-bottom: var(--s4); position: relative; }
.campo label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: var(--s1); }
.campo label span { font-weight: 400; color: var(--testo-tenue); }
.campo__aiuto-link { position: absolute; right: 0; top: 0; font-size: .78rem; }
.campo__errore { color: var(--rosso); font-size: .8rem; font-weight: 600; margin: var(--s1) 0 0; }
.campo input[aria-invalid="true"] { border-color: var(--rosso); }

.campi-affiancati { display: grid; gap: var(--s3); }
.gruppo-scelta { border: 0; padding: 0; margin: 0 0 var(--s4); display: flex; gap: var(--s4); flex-wrap: wrap; }
.gruppo-scelta legend { font-size: .85rem; font-weight: 700; margin-bottom: var(--s2); padding: 0; }
.scelta { margin: 0; }

.nota { background: var(--sfondo); border-left: 3px solid var(--blu); border-radius: var(--raggio); padding: var(--s3) var(--s4); text-align: left; font-size: .9rem; margin-bottom: var(--s4); }
.nota ul { list-style: disc; padding-left: 1.2rem; color: var(--testo-tenue); }

@media (min-width: 620px) {
    .campi-affiancati { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   15. DOCUMENTI LEGALI
   --------------------------------------------------------------------- */
.documento { max-width: 800px; padding-block: var(--s5) var(--s8); }
.documento__testata { padding-bottom: var(--s4); margin-bottom: var(--s5); border-bottom: 3px solid var(--testo); }
.documento__testata h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.documento__versione { color: var(--testo-tenue); font-size: .85rem; margin: 0; }
.documento__corpo { line-height: 1.75; }
.documento__corpo h2 { font-size: 1.2rem; margin-top: var(--s6); text-transform: uppercase; letter-spacing: .03em; }
.documento__corpo ul { list-style: disc; padding-left: 1.4rem; margin-bottom: var(--s4); }
.documento__corpo li { margin-bottom: var(--s2); }

/* Segnala i dati aziendali non ancora inseriti: deve saltare
   all'occhio prima della messa online, non passare inosservato. */
.dato-mancante { background: var(--giallo); color: var(--testo); font-weight: 700; padding: 0 .3rem; }

/* ---------------------------------------------------------------------
   16. STATI VUOTI E RICHIAMI
   --------------------------------------------------------------------- */
.vuoto { text-align: center; padding: var(--s8) var(--s4); background: var(--superficie); border: 1px dashed var(--bordo); border-radius: var(--raggio); color: var(--testo-tenue); }
.vuoto__titolo { font-size: 1.2rem; font-weight: 800; color: var(--testo); margin-bottom: var(--s2); }
.vuoto .bottone { margin-top: var(--s4); }

.richiamo { background: var(--rosso); color: #fff; padding-block: var(--s7); text-align: center; }
.richiamo h2 { font-size: clamp(1.5rem, 4.5vw, 2.2rem); }
.richiamo p { color: rgba(255, 255, 255, .9); margin-bottom: var(--s5); }
.richiamo .bottone--primario { background: #fff; color: var(--rosso); }
.richiamo .bottone--primario:hover { background: var(--nero); color: #fff; }

/* ---------------------------------------------------------------------
   17. PIÈ DI PAGINA
   --------------------------------------------------------------------- */
.pie { background: var(--nero); color: var(--grigio-chiaro); padding-top: var(--s7); margin-top: var(--s7); }
.pie__griglia { display: grid; gap: var(--s6); padding-bottom: var(--s6); }
.pie__titolo { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: var(--s3); }
.pie__elenco { display: grid; gap: var(--s2); font-size: .88rem; }
.pie__elenco a, .pie__blocco a { color: var(--grigio-chiaro); }
.pie__elenco a:hover, .pie__blocco a:hover { color: #fff; }
.pie__slogan { font-weight: 700; color: #fff; margin-top: var(--s3); }
.pie__nota { font-size: .85rem; color: var(--grigio); }
.pie__coda { border-top: 1px solid var(--grigio-scuro); padding-block: var(--s4); }
.pie__coda-riga { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; font-size: .8rem; color: var(--grigio); }
.pie__coda-riga p { margin: 0; }
.pie__disclaimer { max-width: 52ch; }
.pie .collegamento-nudo { color: var(--grigio-chiaro); }

@media (min-width: 760px) {
    .pie__griglia { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   18. BANNER COOKIE
   --------------------------------------------------------------------- */
.cookie-banner {
    position: fixed; inset: auto 0 0 0; z-index: 100;
    background: var(--nero); color: var(--grigio-chiaro);
    border-top: 3px solid var(--rosso);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .28);
}
.cookie-banner--nascosto { display: none; }
.cookie-banner__corpo {
    width: min(100% - 2rem, var(--contenitore)); margin-inline: auto;
    padding-block: var(--s4); display: grid; gap: var(--s4); align-items: center;
}
.cookie-banner h2 { font-size: 1rem; color: #fff; margin-bottom: var(--s2); }
.cookie-banner p { font-size: .85rem; margin: 0; }
.cookie-banner a { color: var(--rosso); }

.cookie-banner__scelte { display: grid; gap: var(--s2); margin-top: var(--s3); }
.interruttore { display: flex; gap: var(--s2); align-items: flex-start; font-size: .85rem; cursor: pointer; }
.interruttore input { accent-color: var(--rosso); margin-top: .25rem; }
.interruttore em { display: block; font-style: normal; color: var(--grigio); font-size: .78rem; }
.interruttore--bloccato { opacity: .6; cursor: not-allowed; }

/* "Rifiuta" e "Accetta" devono avere lo stesso peso: un rifiuto reso
   più difficile del consenso non è un consenso libero. */
.cookie-banner__azioni { display: grid; gap: var(--s2); }
.cookie-banner__azioni .bottone--fantasma { color: #fff; border-color: var(--grigio); }
.cookie-banner__azioni .bottone--fantasma:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

@media (min-width: 760px) {
    .cookie-banner__corpo { grid-template-columns: 1fr auto; }
    .cookie-banner__azioni { grid-auto-flow: column; }
}

/* ---------------------------------------------------------------------
   19. SPAZI PUBBLICITARI
   Altezza minima riservata per evitare che il caricamento degli
   annunci sposti il contenuto già letto (Cumulative Layout Shift).
   --------------------------------------------------------------------- */
.ads-slot { margin-block: var(--s5); min-height: 90px; display: grid; place-items: center; }
.ads-slot:empty { display: none; }
.ads-slot--sidebar { min-height: 250px; margin-top: var(--s4); }
.ads-slot--dettaglio { min-height: 250px; }

/* ---------------------------------------------------------------------
   20. STAMPA
   --------------------------------------------------------------------- */
@media print {
    .testata, .pie, .cookie-banner, .ads-slot, .filtri,
    .riquadro-contatto form, .dettaglio__blocco--segnala { display: none !important; }
    body { background: #fff; }
    .dettaglio { grid-template-columns: 1fr; }
}