/* ============================================================
   CARATTERI OSPITATI QUI, non presi dal CDN di Google.
   Caricandoli da Google il browser del visitatore contatta i
   server di Google prima di qualsiasi consenso e gli comunica
   l'indirizzo IP. Cosi' i file partono dal nostro server.
   Solo alfabeto latino, solo i tre pesi usati: 184 KB in tutto.
   font-display:swap = il testo si legge subito, il carattere
   definitivo subentra quando e' pronto.
   ============================================================ */
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;
  src:url('font/lato-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url('font/lato-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url('font/lato-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:300;font-display:swap;
  src:url('font/ubuntu-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;font-display:swap;
  src:url('font/ubuntu-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:700;font-display:swap;
  src:url('font/ubuntu-latin-700-normal.woff2') format('woff2');}

/* ============================================================
   MAPPA SOLEMAR — stili
   Allineati alla home: fondo bianco, giallo #fffa00 come unico
   accento, blocchi sfalsati dietro le immagini, testo grigio scuro,
   titoli in tondo minuscolo, molta aria.
   ============================================================ */

/* Le variabili stanno su :root, non sulla sezione: la finestra di dialogo
   vive fuori da .sm-map-section e altrimenti non le erediterebbe. */
.sm-map-section *,.sm-map-section *::before,.sm-map-section *::after,
.sm-dialog *,.sm-dialog *::before,.sm-dialog *::after{box-sizing:border-box;}

:root{
  --sm-yellow:#fffa00;
  --sm-ink:#333333;
  --sm-ink-soft:#5c5c5c;
  --sm-line:#e2e2e2;
  --sm-sea:#0e8ea8;
}

.sm-map-section{
  overflow-x:hidden;              /* nessun elemento può allargare la pagina */
  font-family:Lato,Ubuntu,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#fff;
  padding:14px 0 120px;
  color:var(--sm-ink);
  font-weight:300;
}
.sm-wrap{max-width:1140px;width:100%;margin:0 auto;padding:0 20px;box-sizing:border-box;}

/* --- intestazione ---
   Occhiello con la pennellata gialla, come la banda sopra la mappa:
   è l'accento che lega la sezione al resto del sito. Impaginazione
   a sinistra, spaziature strette. */
.sm-eyebrow{
  position:relative;display:inline-block;
  font-size:1rem;font-weight:400;color:var(--sm-ink-soft);
  margin:0 0 8px;padding:2px 10px;z-index:0;
}
.sm-eyebrow::before{           /* pennellata gialla dietro la parola */
  content:"";position:absolute;left:0;right:0;bottom:2px;height:9px;
  background:var(--sm-yellow);z-index:-1;
}
.sm-title{
  font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.15;font-weight:300;
  letter-spacing:normal;text-transform:none;text-align:left;
  margin:0 0 12px;color:var(--sm-ink);
}
.sm-title em{font-style:normal;font-weight:700;}
.sm-rule{display:none;}        /* la home non usa filetti sotto i titoli */
.sm-lead{
  max-width:640px;margin:0 0 30px;color:var(--sm-ink-soft);
  line-height:1.6;font-size:1.05rem;font-weight:300;text-align:left;
}

/* --- barra comandi --- */
.sm-toolbar{
  display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end;
  justify-content:space-between;margin:0 0 26px;
}
.sm-group-label{
  display:block;font-size:.8rem;font-weight:400;text-align:left;
  color:var(--sm-ink-soft);margin:0 0 11px;
}
.sm-filters{display:flex;flex-wrap:wrap;gap:10px;}
.sm-filter{
  font:inherit;font-size:.68rem;font-weight:700;cursor:pointer;
  letter-spacing:1.6px;text-transform:uppercase;
  border:2px solid #333;background:transparent;color:#333;
  padding:10px 17px;border-radius:0;
  transition:background .2s,color .2s,border-color .2s;
}
.sm-filter:hover{background:var(--sm-ink);color:#fff;}
/* ogni filtro attivo prende il colore della propria attività,
   impostato dal motore leggendo il file dati */
.sm-filter[aria-pressed="true"]{
  background:#fffa00;background:var(--sm-cat,#fffa00);
  border-color:#fffa00;border-color:var(--sm-cat,#fffa00);
  color:#333;color:var(--sm-cat-testo,#333);
}
.sm-filter:focus-visible{outline:3px solid var(--sm-ink);outline-offset:3px;}

/* --- selettore modalità di visualizzazione --- */
.sm-views{display:inline-flex;border:2px solid var(--sm-ink);background:#fff;}
.sm-view{
  font:inherit;font-size:.68rem;font-weight:700;cursor:pointer;
  letter-spacing:1.6px;text-transform:uppercase;
  border:none;background:transparent;color:#333;
  padding:10px 16px;transition:background .2s,color .2s;
}
.sm-view + .sm-view{border-left:2px solid var(--sm-ink);}
.sm-view:hover{background:#f3f3f3;}
.sm-view[aria-pressed="true"]{background:var(--sm-ink);color:#fff;}
.sm-view:focus-visible{outline:3px solid var(--sm-ink);outline-offset:-3px;}

/* --- mappa a tutta larghezza ---
   La mappa sta FUORI da .sm-wrap (vedi HTML): e' figlia diretta della
   sezione, quindi occupa da sola tutta la larghezza del dispositivo,
   mentre testi, filtri, legenda restano dentro la colonna da 1140px.
   Nessun trucco con 100vw: niente sbordo dovuto alla barra di scorrimento. */
.sm-map{
  height:560px;
  width:100%;
  border:none;
  margin:26px 0 0;
  border-top:8px solid var(--sm-yellow);   /* l'accento giallo, ora a nastro */
  box-shadow:none;
  z-index:1;                   /* resta sotto l'header di Nicepage */
}
.sm-wrap-coda{margin-top:0;}
.sm-legend{
  display:flex;flex-wrap:wrap;gap:22px;margin:28px 0 0;
  font-size:.9rem;color:var(--sm-ink-soft);font-weight:300;
}
.sm-legend span{display:inline-flex;align-items:center;gap:9px;}
.sm-legend i{width:11px;height:11px;border-radius:50%;display:inline-block;}
.sm-hint{
  margin:16px 0 0;font-size:.86rem;color:#8a8a8a;text-align:left;
  font-weight:300;line-height:1.8;max-width:760px;
}
.sm-hint strong{font-weight:700;color:var(--sm-ink-soft);}

/* --- segnaposto fisso del campeggio (logo) --- */
.sm-pin-home{
  /* 62px: la misura deve combaciare con iconSize nel motore, altrimenti
     il logo non e' centrato sulle coordinate della sede. */
  width:62px;height:62px;border-radius:50%;
  background:#fff;border:3px solid var(--sm-yellow);
  box-shadow:0 4px 16px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;transition:transform .18s ease;
}
.sm-pin-home img{width:100%;height:100%;object-fit:contain;display:block;}
.leaflet-marker-icon:hover .sm-pin-home{transform:scale(1.08);}
.sm-pin-home::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid var(--sm-yellow);opacity:.75;
  animation:sm-pulse 2.6s ease-out infinite;
}
@keyframes sm-pulse{
  0%{transform:scale(.9);opacity:.8;}
  70%{transform:scale(1.3);opacity:0;}
  100%{opacity:0;}
}

/* --- segnaposti dei punti d'interesse --- */
/* segnaposto a goccia: la sagoma è disegnata in SVG dal motore,
   qui c'è solo il comportamento al passaggio del mouse. */
.sm-pin{
  width:32px;height:46px;
  display:block;line-height:0;
  transition:transform .2s ease;
  transform-origin:50% 96%;      /* cresce restando appoggiato sul punto */
}
.sm-pin svg{width:100%;height:100%;display:block;overflow:visible;}
.leaflet-marker-icon:hover .sm-pin{transform:scale(1.18);z-index:5;}
.leaflet-marker-icon:focus-visible{outline:2px solid #333;outline-offset:3px;}

/* --- finestra di dialogo --- */
.sm-dialog{
  border:none;padding:0;border-radius:0;
  width:min(600px,92vw);background:#fff;color:var(--sm-ink);
  /* il browser limita da solo l'altezza della finestra: senza un tetto
     dichiarato e senza scorrimento il fondo (i pulsanti) finiva sotto il
     bordo dello schermo sui portatili. La foto sta in alto, il corpo scorre. */
  max-height:88vh;
  overflow:hidden;
  flex-direction:column;
  box-shadow:-22px -22px 0 var(--sm-yellow), 0 18px 50px rgba(0,0,0,.22);
  font-family:Lato,Ubuntu,sans-serif;font-weight:300;
}
.sm-dialog[open]{display:flex;}
.sm-dialog::backdrop{background:rgba(0,0,0,.55);}
.sm-dialog-media{position:relative;aspect-ratio:16/9;background:#efefef;overflow:hidden;
                 flex:none;}
.sm-dialog-media img{width:100%;height:100%;object-fit:cover;display:block;}
/* riquadro mostrato quando la foto manca o non si carica */
.sm-dialog-media.sm-nofoto{
  background:repeating-linear-gradient(45deg,#f4f4f4 0 12px,#ededed 12px 24px);
}
.sm-dialog-media.sm-nofoto::before{
  content:"Foto non disponibile";
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#9a9a9a;font-size:.9rem;font-weight:300;
}
/* --- galleria: frecce e pallini, mostrati solo con più di una foto --- */
.sm-foto-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:52px;padding:0;border:none;cursor:pointer;
  background:rgba(255,255,255,.86);color:#333;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.sm-foto-nav:hover{background:#fff;}
.sm-foto-nav:focus-visible{outline:2px solid var(--sm-ink);outline-offset:-4px;}
.sm-foto-nav svg{width:20px;height:20px;display:block;}
.sm-foto-prec{left:0;}
.sm-foto-succ{right:0;}
.sm-foto-punti{
  position:absolute;left:50%;bottom:11px;transform:translateX(-50%);
  display:flex;gap:7px;
}
.sm-foto-punto{
  width:10px;height:10px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid rgba(0,0,0,.4);background:rgba(255,255,255,.8);
  transition:background .2s;
}
.sm-foto-punto[aria-current="true"]{background:var(--sm-yellow);border-color:#333;}
.sm-foto-punto:focus-visible{outline:2px solid var(--sm-ink);outline-offset:2px;}

/* banda dell'attività: il colore arriva dal file dati (--sm-cat) */
.sm-badge{
  position:absolute;left:0;bottom:0;
  background:#fffa00;background:var(--sm-cat,#fffa00);
  color:#333;color:var(--sm-cat-testo,#333);
  font-size:.68rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  padding:9px 17px;
}
.sm-close{
  position:absolute;top:0;right:0;width:44px;height:44px;
  border:none;cursor:pointer;
  background:#fffa00;background:var(--sm-cat,#fffa00);color:#333;color:var(--sm-cat-testo,#333);
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.sm-close:hover{filter:brightness(1.12);}
.sm-close:focus-visible{outline:2px solid var(--sm-ink);outline-offset:-4px;}
/* Il corpo e' una colonna a tre parti: in alto titolo e righe, in mezzo
   la descrizione — l'unica cosa che scorre — in basso i pulsanti.
   Prima scorreva tutto insieme, e aprendo un punto con testo lungo il
   titolo spariva sotto l'etichetta della categoria. */
.sm-dialog-body{
  padding:34px 38px 0;
  display:flex;flex-direction:column;
  flex:1 1 auto;min-height:0;overflow:hidden;
}
.sm-dialog-body h3,
.sm-dialog-body .sm-meta,
.sm-dialog-body .sm-nota{flex:0 0 auto;}
/* filetto colorato dell'attività, sotto il titolo */
.sm-dialog-body h3::after{
  content:"";display:block;width:52px;height:5px;
  background:#fffa00;background:var(--sm-cat,#fffa00);margin:14px 0 0;
}
.sm-dialog-body h3{
  margin:0 0 14px;font-size:1.7rem;font-weight:300;
  text-transform:none;letter-spacing:normal;color:var(--sm-ink);
}
/* Due righe sotto il titolo. La prima e' la distanza in auto, calcolata
   in redazione; la seconda le note e la difficolta'. Se una delle due
   manca, il motore la lascia vuota e questa regola la nasconde. */
.sm-meta{margin:0 0 4px;font-size:.9rem;color:var(--sm-ink-soft);font-weight:700;}
.sm-nota{margin:0 0 20px;font-size:.9rem;color:#8a8a8a;font-weight:400;}

/* Icona in linea, prima del testo, non sopra: da qui il display:flex con
   align-items al primo rigo, cosi' se il testo va a capo l'icona resta
   allineata alla prima riga e non si centra a meta'. */
.sm-meta,.sm-nota{display:flex;align-items:flex-start;gap:8px;}
.sm-ico{
  width:16px;height:16px;flex:none;margin-top:2px;
  color:#333;color:var(--sm-cat,#333);
}
/* la riga sparisce del tutto quando il motore non ha testo da metterci */
.sm-meta.vuota,.sm-nota.vuota{display:none;}
/* la sola parte che scorre. Il filetto in alto segna dove finisce la
   parte ferma: senza, con il testo gia' scorso sembra tagliato a caso. */
.sm-desc{
  margin:14px 0 0;padding:14px 0 22px;line-height:1.95;font-weight:300;
  border-top:1px solid var(--sm-line);
  flex:1 1 auto;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
/* azioni: i due pulsanti di navigazione affiancati sulla prima riga,
   il pulsante di chiusura su una riga a sé, allineato a destra.
   Dimensioni identiche alla banda dell'attività, per proporzione. */
.sm-actions{
  display:flex;flex-wrap:wrap;flex:0 0 auto;
  background:#fff;border-top:1px solid var(--sm-line);
  padding:18px 0 32px;
}
.sm-actions-tit{
  width:100%;margin:0 0 10px;font-size:.78rem;font-weight:700;
  color:#5c5c5c;letter-spacing:.3px;
  display:flex;align-items:center;gap:7px;
}
.sm-actions-tit svg{
  width:16px;height:16px;flex:none;
  color:#333;color:var(--sm-cat,#333);
}
.sm-actions-nav{display:flex;flex-wrap:wrap;gap:8px;width:100%;}
.sm-actions-chiudi{display:flex;justify-content:flex-end;width:100%;margin:14px 0 0;}

.sm-btn{
  font:inherit;font-size:.68rem;font-weight:700;text-decoration:none;cursor:pointer;
  letter-spacing:1.6px;text-transform:uppercase;
  padding:9px 17px;border:1px solid #333;border-radius:0;
  display:inline-block;text-align:center;line-height:1.2;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s;
}
/* azione principale: pieno, con il colore dell'attività */
.sm-btn-primary{
  background:#333;background:var(--sm-cat,#333);
  border-color:#333;border-color:var(--sm-cat,#333);
  color:#fff;color:var(--sm-cat-testo,#fff);
}
.sm-btn-primary:hover{background:#333;border-color:#333;color:#fff;}
/* azioni secondarie: cornice sottile, fondo bianco */
.sm-btn-ghost{background:#fff;color:#333;border-color:#c9c9c9;}
.sm-btn-ghost:hover{background:#333;color:#fff;border-color:#333;}
.sm-btn:focus-visible{outline:2px solid #333;outline-offset:2px;}

/* ---------- computer e portatili ----------
   Su uno schermo basso il contenuto non entra tutto in verticale.
   Invece di tagliare la foto a una misura fissa, l'altezza della foto
   segue quella della finestra; a scorrere e' solo la descrizione, mentre
   il blocco "Come arrivare" resta ancorato in fondo e sempre visibile. */
@media (min-width:768px){
  .sm-dialog{max-height:min(88vh,780px);}

  /* 338px = la proporzione 16:9 piena su 600px di larghezza.
     Su schermi bassi scende fino a 170px, senza mai sparire. */
  .sm-dialog-media{max-height:clamp(170px,30vh,338px);}

  .sm-actions-chiudi{margin-top:12px;}
}

@media (max-width:991px){
  .sm-map-section{padding:12px 0 84px;}
  .sm-toolbar{flex-direction:column;align-items:stretch;gap:18px;}
  /* senza min-width:0 i blocchi flex si allargano fino al contenuto
     e sfondano lo schermo invece di comprimersi */
  .sm-toolbar > div{min-width:0;max-width:100%;}
}

/* ---------- smartphone (verticale) ---------- */
@media (max-width:767px){
  .sm-map-section{padding:15px 0 48px;}
  .sm-wrap{padding:0 18px;}
  .sm-title{font-size:1.8rem;line-height:1.15;margin-bottom:10px;}
  .sm-eyebrow{margin-bottom:7px;}
  .sm-lead{font-size:.97rem;line-height:1.6;margin-bottom:22px;}
  .sm-group-label{font-size:.72rem;margin-bottom:8px;}

  /* filtri su due righe invece che in scorrimento nascosto:
     tutte le categorie restano visibili senza gesti da scoprire */
  .sm-filters{flex-wrap:wrap;gap:7px;overflow:visible;}
  .sm-filter{padding:10px 14px;font-size:.66rem;letter-spacing:1.1px;}

  .sm-views{display:flex;width:100%;max-width:100%;}
  .sm-view{flex:1 1 0;min-width:0;padding:12px 2px;
           font-size:.64rem;letter-spacing:.8px;}
  .sm-toolbar{gap:16px;margin-bottom:20px;}

  /* la mappa esce dai margini e prende tutta la larghezza dello schermo:
     su un telefono ogni pixel di mappa conta */
  /* niente piu' margini negativi: la mappa e' gia' fuori dalla colonna */
  .sm-map{
    height:60vh;min-height:320px;max-height:460px;
    margin:0;width:100%;
    box-shadow:none;border-top:6px solid var(--sm-yellow);
  }
  .sm-legend{gap:10px 16px;font-size:.8rem;margin-top:16px;}
  .sm-hint{font-size:.8rem;margin-top:12px;}

  /* finestra: pannello a tutta larghezza ancorato in basso */
  .sm-dialog{
    width:100%;max-width:100%;max-height:92vh;
    margin:auto 0 0;padding:0;box-shadow:0 -8px 40px rgba(0,0,0,.3);
    flex-direction:column;overflow:hidden;
  }
  .sm-dialog[open]{display:flex;}
  .sm-dialog-media{aspect-ratio:16/10;flex:none;}
  /* ------------------------------------------------------------------
     SUL TELEFONO LA REGOLA SI ROVESCIA.
     Sul computer conviene tenere fermi titolo e righe: c'e' spazio in
     abbondanza e il testo scorre comodo. Su uno schermo alto e stretto
     no: foto, titolo, due righe e tre pulsanti impilati si prendono
     quasi tutto e alla descrizione restano due righe, illeggibili.
     Qui quindi scorre tutto il contenuto — foto compresa, che tanto e'
     decorativa e la si e' gia' vista — e restano fermi solo i pulsanti
     in fondo, che servono sempre. La descrizione recupera cosi' circa
     250 pixel, cioe' dieci righe di testo invece di due.
     ------------------------------------------------------------------ */
  .sm-dialog-body{
    padding:22px 20px 0;
    display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .sm-desc{
    overflow:visible;flex:none;min-height:0;
    margin:14px 0 0;padding:14px 0 18px;
  }
  .sm-actions{
    position:sticky;bottom:0;z-index:2;
    background:#fff;padding:12px 0 18px;
  }
  /* la foto non deve mangiarsi un terzo di schermo */
  .sm-dialog-media{max-height:30vh;}

  /* i due pulsanti del percorso stanno su una riga sola: impilati
     costavano un centinaio di pixel per niente */
  .sm-actions-tit{margin-bottom:8px;}
  .sm-actions-nav{flex-wrap:nowrap;}
  .sm-actions-nav .sm-btn{flex:1 1 0;min-width:0;padding:13px 6px;
    letter-spacing:.6px;font-size:.62rem;white-space:nowrap;}
  .sm-actions-chiudi{margin-top:9px;}
  .sm-actions-chiudi .sm-btn{width:100%;padding:12px;}
  .sm-dialog-body h3{font-size:1.32rem;}
  .sm-desc{font-size:.94rem;line-height:1.75;}
  .sm-close{width:46px;height:46px;font-size:24px;}
  /* sul telefono si sfoglia con il dito: frecce piu' discrete */
  .sm-foto-nav{width:34px;height:46px;background:rgba(255,255,255,.75);}
  /* le regole per i pulsanti stanno piu' sopra, nel blocco delle azioni:
     erano duplicate qui e vincevano, rimettendoli uno sotto l'altro */
}

/* ---------- telefono in orizzontale ----------
   Schermo basso e largo: la mappa deve restare dentro l'altezza
   disponibile e i testi non devono correre per tutta la larghezza. */
@media (max-height:560px) and (orientation:landscape){
  .sm-map-section{padding:9px 0 30px;}
  .sm-title{font-size:1.5rem;margin-bottom:8px;}
  .sm-eyebrow{margin-bottom:6px;}
  .sm-lead{font-size:.92rem;line-height:1.55;max-width:60ch;margin-bottom:14px;}

  /* comandi affiancati: c'è larghezza in abbondanza */
  .sm-toolbar{flex-direction:row;align-items:flex-end;gap:16px;margin-bottom:12px;}
  .sm-toolbar > div:first-child{flex:1 1 auto;min-width:0;}
  .sm-toolbar > div:last-child{flex:0 0 auto;}
  .sm-group-label{margin-bottom:6px;font-size:.72rem;}
  .sm-filter{padding:9px 14px;font-size:.66rem;}
  .sm-views{width:auto;}
  .sm-view{flex:0 0 auto;padding:9px 12px;font-size:.62rem;}

  .sm-map{
    height:74vh;min-height:200px;max-height:340px;
    margin:10px 0 0;width:100%;
    box-shadow:none;border-top:6px solid var(--sm-yellow);
  }
  .sm-legend{margin-top:14px;gap:10px 16px;font-size:.76rem;}
  .sm-hint{margin-top:10px;font-size:.74rem;line-height:1.6;}

  /* finestra: foto a sinistra, testo a destra, tutto senza scorrere */
  .sm-dialog{
    width:100%;max-width:100%;height:100%;max-height:100%;
    margin:0;flex-direction:row;box-shadow:none;
  }
  .sm-dialog[open]{display:flex;}
  .sm-dialog-media{
    flex:0 0 42%;aspect-ratio:auto;height:100%;max-height:none;
  }
  .sm-dialog-body{
    flex:1 1 auto;padding:20px 22px 0;overflow:hidden;
    display:flex;flex-direction:column;
  }
  .sm-actions{padding:12px 0 16px;}
  .sm-dialog-body h3{font-size:1.25rem;margin-bottom:8px;}
  .sm-dialog-body h3::after{margin-top:9px;height:4px;width:42px;}
  .sm-meta{margin-bottom:3px;font-size:.82rem;}
  .sm-nota{margin-bottom:10px;font-size:.82rem;}
  .sm-desc{font-size:.88rem;line-height:1.65;margin-bottom:16px;}
  .sm-actions-tit{margin-bottom:7px;font-size:.72rem;}
  .sm-actions-nav{flex-direction:row;}
  .sm-actions-nav .sm-btn{padding:10px 12px;font-size:.62rem;}
  .sm-actions-chiudi{margin-top:9px;}
  .sm-actions-chiudi .sm-btn{width:auto;padding:10px 22px;}
  .sm-badge{font-size:.62rem;padding:7px 12px;}
}

/* Schermi molto stretti.
   Qui prima i due pulsanti del percorso venivano impilati, e sotto i
   400px si mangiavano un centinaio di pixel che alla descrizione
   servivano. Con il testo piu' piccolo ci stanno in riga anche a 340px,
   che e' la larghezza minima prevista dal sito. */
@media (max-width:400px){
  .sm-actions-nav .sm-btn{font-size:.58rem;letter-spacing:.3px;padding:13px 4px;}
}

/* avviso gesto a due dita, solo su touch */
.sm-gesto{
  position:absolute;inset:0;z-index:400;
  display:none;align-items:center;justify-content:center;
  background:rgba(35,35,35,.55);color:#fff;
  font-size:.95rem;font-weight:700;text-align:center;padding:24px;
  pointer-events:none;opacity:0;transition:opacity .25s;
}
.sm-gesto.on{display:flex;opacity:1;}
.sm-map{position:relative;}

/* su touch il bersaglio dei segnaposti va allargato: la sagoma resta
   di 32px ma l'area toccabile arriva a 44px, la soglia raccomandata */
@media (hover:none) and (pointer:coarse){
  .sm-pin::before{
    content:"";position:absolute;left:50%;top:50%;
    width:46px;height:46px;transform:translate(-50%,-50%);
  }
  .sm-pin{position:relative;}
  .sm-pin-home::before{
    content:"";position:absolute;left:50%;top:50%;
    width:64px;height:64px;transform:translate(-50%,-50%);
  }
  .sm-pin-home{position:relative;}
  .leaflet-touch .leaflet-bar a{width:38px;height:38px;line-height:38px;}
}

@media (prefers-reduced-motion:reduce){
  .sm-pin,.sm-pin-home,.sm-btn,.sm-filter,.sm-view{transition:none;}
  .sm-pin-home::after{animation:none;}
}

/* ============================================================
   PAGINA AUTONOMA — testata, richiamo finale e piede
   Servono solo a mappa-solemar.html: non caricando site.css la
   pagina non eredita nulla dal sito e deve vestirsi da sola.
   Stessi codici colore della home: giallo #fffa00, testo #333.
   ============================================================ */

body.sm-pagina{
  margin:0;background:#fff;color:var(--sm-ink);
  font-family:Lato,Ubuntu,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:300;
}

/* --- testata --- */
.sm-testata{border-bottom:1px solid var(--sm-line);background:#fff;}
.sm-testata-riga{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:14px;padding-bottom:14px;
}
.sm-marchio{
  display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--sm-ink);
}
.sm-marchio img{width:46px;height:46px;object-fit:contain;display:block;}
.sm-marchio span{font-size:1.02rem;font-weight:700;letter-spacing:.4px;}
.sm-testata-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.sm-testata-nav a{
  font-size:.68rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  text-decoration:none;color:var(--sm-ink);padding:10px 14px;
  transition:background .2s,color .2s;
}
.sm-testata-nav a:hover{background:#f3f3f3;}
.sm-testata-nav .sm-torna{border:2px solid var(--sm-ink);}
.sm-testata-nav .sm-torna:hover{background:var(--sm-ink);color:#fff;}
.sm-testata-nav a:focus-visible{outline:3px solid var(--sm-yellow);outline-offset:2px;}

/* la sezione mappa non deve staccarsi dalla testata */
body.sm-pagina .sm-map-section{padding-top:34px;}

/* --- richiamo finale --- */
.sm-richiamo{
  margin:44px 0 0;padding:26px 0 0;border-top:1px solid var(--sm-line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
}
.sm-richiamo-testo{margin:0;font-size:1.05rem;color:var(--sm-ink-soft);}
.sm-richiamo-btn{display:flex;flex-wrap:wrap;gap:9px;}
.sm-richiamo .sm-btn-primary{background:var(--sm-ink);border-color:var(--sm-ink);color:#fff;}
.sm-richiamo .sm-btn-primary:hover{background:var(--sm-yellow);border-color:var(--sm-yellow);color:#333;}

/* --- piede --- */
.sm-piede{background:var(--sm-yellow);color:#333;padding:34px 0;}
.sm-piede-dati{margin:0;font-size:.92rem;line-height:1.7;}
.sm-piede-righe{
  margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(0,0,0,.16);
  font-size:.82rem;
}
.sm-piede-righe a{color:#333;text-decoration:underline;text-underline-offset:2px;}

@media (max-width:767px){
  .sm-testata-riga{flex-direction:column;align-items:flex-start;gap:12px;}
  .sm-marchio img{width:40px;height:40px;}
  .sm-marchio span{font-size:.95rem;}
  .sm-testata-nav{width:100%;gap:6px;}
  .sm-testata-nav a{flex:1 1 auto;text-align:center;padding:11px 8px;letter-spacing:1.1px;}
  body.sm-pagina .sm-map-section{padding-top:22px;}
  .sm-richiamo{margin-top:32px;padding-top:22px;}
  .sm-richiamo-btn{width:100%;}
  .sm-richiamo-btn .sm-btn{flex:1 1 auto;padding:14px 10px;}
  .sm-piede{padding:26px 0;}
}

/* ============================================================
   RICHIESTA DI CONSENSO sopra il riquadro della mappa
   Finche' resta visibile, la pagina non ha contattato nessun
   fornitore esterno: Leaflet e le mattonelle si scaricano solo
   dopo il clic.
   ============================================================ */
.sm-consenso{
  position:absolute;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:repeating-linear-gradient(45deg,#f4f2ec 0 14px,#eeece5 14px 28px);
}
.sm-consenso-box{
  max-width:560px;background:#fff;border:1px solid var(--sm-line);
  box-shadow:0 6px 24px rgba(0,0,0,.10);
  padding:26px 28px;text-align:left;
}
.sm-consenso-tit{
  margin:0 0 10px;font-size:1.05rem;font-weight:700;color:var(--sm-ink);
}
.sm-consenso-txt{
  margin:0 0 18px;font-size:.92rem;line-height:1.65;color:var(--sm-ink-soft);
  font-weight:300;
}
.sm-consenso-txt strong{font-weight:700;color:var(--sm-ink);}
.sm-consenso-txt a{
  color:var(--sm-ink);text-decoration:underline;
  text-decoration-color:var(--sm-yellow);text-underline-offset:2px;
}
.sm-consenso-btn{
  background:var(--sm-ink);border-color:var(--sm-ink);color:#fff;
  min-height:48px;padding:13px 26px;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
}
.sm-consenso-btn:hover{background:var(--sm-yellow);border-color:var(--sm-yellow);color:#333;}
.sm-consenso-btn:disabled{background:#b3b3b3;border-color:#b3b3b3;color:#666;cursor:default;box-shadow:none;}

@media (max-width:767px){
  .sm-consenso{padding:16px;}
  .sm-consenso-box{padding:20px 18px;}
  .sm-consenso-tit{font-size:.98rem;}
  .sm-consenso-txt{font-size:.86rem;line-height:1.6;margin-bottom:15px;}
  .sm-consenso-btn{width:100%;}
}