/* Cerchia · Milano a pedali — stile vintage ispirato a tram, cartellonistica e manifesti milanesi */

:root {
  --carta: #f2e8d5;
  --carta-2: #e8dbc0;
  --carta-3: #d8c59f;
  --bianco: #fbf6ea;
  --inchiostro: #2a2420;
  --inchiostro-2: #574c42;
  --inchiostro-3: #85786a;
  --arancio: #e2701f;
  --arancio-scuro: #b5541a;
  --rosso: #b3262d;
  --verde: #2f5d4a;
  --verde-scuro: #1d3b2f;
  --crema: #efe0b9;
  --ottone: #b08d57;
  --giallo-tabellone: #f3d27a;
  --marrone: #5b3a24;        /* legno e cuoio dei tram d'epoca */
  --marrone-chiaro: #8a5a3b;

  --font-display: "Bodoni Moda", "Didot", Georgia, serif;
  --font-cartello: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-testo: "Barlow", system-ui, -apple-system, sans-serif;

  --raggio: 6px;
  --ombra: 0 1px 0 rgba(42, 36, 32, .06), 0 10px 24px -14px rgba(42, 36, 32, .45);
  --h-testata: 64px;
  --h-nav-bassa: 0px;
  --gutter: clamp(22px, 5vw, 40px);
  --max: 1200px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--carta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--arancio-scuro); }
a:hover { color: var(--rosso); }
:focus-visible { outline: 3px solid var(--arancio); outline-offset: 2px; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0 0 .4em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.8rem); font-style: italic; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-style: italic; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; text-wrap: pretty; }

.cartello {
  font-family: var(--font-cartello);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
  font-size: .82rem;
}
.occhiello { composes: cartello; font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; font-size: .85rem; color: var(--arancio-scuro); margin: 0 0 .6em; display: flex; align-items: center; gap: .6em; }
.occhiello::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.muto { color: var(--inchiostro-3); }
.piccolo { font-size: .88rem; }

/* ───────────── Testata ───────────── */
.testata {
  position: sticky; top: 0; z-index: 1000;
  height: var(--h-testata);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--gutter);
  background: var(--arancio);
  color: var(--bianco);
  border-bottom: 4px solid var(--crema);
  box-shadow: 0 2px 0 var(--inchiostro);
}
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marchio:hover { color: inherit; }
.marchio img { width: 40px; height: 40px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.marchio-testo { display: flex; flex-direction: column; line-height: 1; }
.marchio-nome { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.65rem; letter-spacing: -.01em; }
.marchio-payoff { font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; font-weight: 600; opacity: .92; margin-top: 3px; }
.nav-alta { display: flex; gap: 4px; }
.nav-alta a {
  font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: .95rem;
  color: var(--bianco); text-decoration: none; padding: 8px 12px; border-radius: 3px;
}
.nav-alta a:hover { background: rgba(0,0,0,.12); color: var(--bianco); }
.nav-alta a.attivo { background: var(--inchiostro); color: var(--crema); }
.nav-alta .nav-partner { border: 1.5px solid rgba(251,246,234,.7); margin-left: 6px; }

.nav-bassa { display: none; }

@media (max-width: 860px) {
  :root { --h-testata: 56px; --h-nav-bassa: calc(62px + env(safe-area-inset-bottom)); }
  .nav-alta { display: none; }
  .marchio img { width: 34px; height: 34px; }
  .marchio-nome { font-size: 1.4rem; }
  .nav-bassa {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    height: var(--h-nav-bassa); padding-bottom: env(safe-area-inset-bottom);
    background: var(--inchiostro); border-top: 3px solid var(--arancio);
  }
  .nav-bassa a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--carta-3); text-decoration: none;
    font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600;
  }
  .nav-bassa svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .nav-bassa a.attivo { color: var(--giallo-tabellone); }
  body { padding-bottom: var(--h-nav-bassa); }
}

main { outline: none; min-height: calc(100dvh - var(--h-testata) - var(--h-nav-bassa)); }
.contenitore { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sezione { padding: clamp(40px, 7vw, 88px) 0; }
.sezione + .sezione { padding-top: 0; }
.intestazione-sezione { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.intestazione-sezione h2 { margin: 0; }
.filetto { border: 0; height: 6px; margin: 0; background:
  linear-gradient(var(--inchiostro), var(--inchiostro)) top / 100% 2px no-repeat,
  linear-gradient(var(--inchiostro), var(--inchiostro)) bottom / 100% 1px no-repeat; }

/* ───────────── Bottoni e chip ───────────── */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 20px;
  font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: 1rem;
  background: var(--arancio); color: var(--bianco); text-decoration: none;
  border: 2px solid var(--inchiostro); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--inchiostro); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s;
}
.bottone:hover { color: var(--bianco); background: var(--arancio-scuro); }
.bottone:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--inchiostro); }
.bottone.secondario { background: var(--bianco); color: var(--inchiostro); }
.bottone.secondario:hover { background: var(--crema); color: var(--inchiostro); }
.bottone.verde { background: var(--verde); }
.bottone.verde:hover { background: var(--verde-scuro); }
.bottone.piccolo { min-height: 36px; padding: 6px 14px; font-size: .85rem; box-shadow: 2px 2px 0 var(--inchiostro); }
.bottone[disabled] { opacity: .5; cursor: not-allowed; }
.fila-bottoni { display: flex; gap: 12px; flex-wrap: wrap; }

.chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  min-height: 36px; padding: 5px 13px; border-radius: 999px;
  border: 1.5px solid var(--inchiostro-2); background: var(--bianco);
  font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; font-size: .86rem;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip .pallino { width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--inchiostro-3)); border: 1.5px solid var(--inchiostro); flex: none; }
.chip:has(input:checked), .chip.attivo { background: var(--inchiostro); color: var(--crema); border-color: var(--inchiostro); }
.chip:has(input:focus-visible) { outline: 3px solid var(--arancio); outline-offset: 2px; }
.filtri { display: flex; flex-wrap: wrap; gap: 8px; }

.badge-linea {
  display: inline-grid; place-items: center; flex: none;
  min-width: 2.6em; height: 2em; padding: 0 .45em;
  font-family: var(--font-cartello); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em;
  color: #fff; background: var(--c, var(--arancio)); border-radius: 5px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 0 0 1.5px var(--inchiostro);
}
.badge-linea.grande { font-size: 1.6rem; }
.etichetta { display: inline-block; font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .74rem; padding: 2px 8px; border-radius: 3px; background: var(--inchiostro); color: var(--crema); }
.etichetta.aperto { background: var(--verde); color: #fff; }
.etichetta.chiuso { background: var(--carta-3); color: var(--inchiostro-2); }
.etichetta.partner { background: var(--ottone); color: var(--inchiostro); }
.etichetta.rossa { background: var(--rosso); color: #fff; }

/* ───────────── Home ───────────── */
.hero { position: relative; overflow: hidden; border-bottom: 2px solid var(--inchiostro); }
.hero-griglia { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 4vw, 56px); align-items: center; padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(28px, 5vw, 56px); }
.hero h1 { margin-bottom: .25em; }
.hero h1 em { color: var(--arancio-scuro); font-style: italic; }
.hero .attacco { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 34em; color: var(--inchiostro-2); }
.hero .fila-bottoni { margin-top: 26px; }
.manifesto { width: 100%; aspect-ratio: 1 / 1; max-width: 520px; justify-self: center; }
.manifesto svg { width: 100%; height: 100%; display: block; }
@media (max-width: 860px) {
  .hero-griglia { grid-template-columns: 1fr; }
  .manifesto { max-width: 340px; order: -1; margin: 0 auto -8px; }
}

.contatori { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--inchiostro); background: var(--inchiostro); gap: 2px; }
.contatore { background: var(--crema); padding: 18px 20px 16px; }
.contatore b { display: block; font-family: var(--font-display); font-style: italic; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; }
.contatore span { font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; font-weight: 600; color: var(--inchiostro-2); }
@media (max-width: 640px) { .contatori { grid-template-columns: repeat(2, 1fr); } }

/* Biglietti (card percorsi) — ispirati ai vecchi biglietti del tram */
.biglietti { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.biglietto {
  --c: var(--arancio);
  position: relative; display: grid; grid-template-columns: 76px 1fr; min-height: 168px;
  background: var(--bianco); color: var(--inchiostro); text-decoration: none;
  border: 2px solid var(--inchiostro); border-radius: 4px; box-shadow: var(--ombra);
  transition: transform .15s ease, box-shadow .15s ease;
}
.biglietto:hover { color: var(--inchiostro); transform: translateY(-3px) rotate(-.3deg); box-shadow: 0 16px 28px -16px rgba(42,36,32,.6); }
.biglietto-matrice {
  position: relative; background: var(--c); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 6px;
  border-right: 2px dashed var(--bianco);
}
.biglietto-matrice::after { /* perforazione */
  content: ""; position: absolute; top: -2px; bottom: -2px; right: -9px; width: 16px;
  background: radial-gradient(circle at 8px 8px, var(--carta) 4.5px, transparent 5px) 0 0 / 16px 16px repeat-y;
}
.biglietto-codice { font-family: var(--font-cartello); font-weight: 700; font-size: 2rem; line-height: 1; }
.biglietto-matrice .cartello { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .72rem; opacity: .9; letter-spacing: .2em; }
.biglietto-corpo { padding: 16px 18px 14px 22px; display: flex; flex-direction: column; gap: 6px; }
.biglietto-corpo h3 { margin: 0; font-size: 1.32rem; font-style: italic; }
.biglietto-corpo p { margin: 0; color: var(--inchiostro-2); font-size: .95rem; line-height: 1.4; }
.biglietto-meta { margin-top: auto; display: flex; gap: 14px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dotted var(--inchiostro-3); font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .07em; font-size: .82rem; font-weight: 600; color: var(--inchiostro-2); }
.biglietto-meta b { color: var(--inchiostro); }
.biglietto .timbro { position: absolute; top: 10px; right: 10px; transform: rotate(6deg); }

/* Tabellone (eventi) */
.tabellone { background: var(--verde-scuro); color: var(--giallo-tabellone); border: 3px solid var(--inchiostro); border-radius: 6px; box-shadow: inset 0 0 0 4px #2b5143, var(--ombra); overflow: hidden; }
.tabellone-testa { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 2px solid #2b5143; flex-wrap: wrap; }
.tabellone-testa h3 { color: var(--crema); margin: 0; font-size: 1.4rem; }
.orologio { font-family: var(--font-cartello); font-size: 1.6rem; font-weight: 700; letter-spacing: .06em; background: #0f241c; padding: 2px 10px; border-radius: 4px; }
.riga-evento { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid #2b5143; color: var(--giallo-tabellone); text-decoration: none; }
.riga-evento:last-child { border-bottom: 0; }
.riga-evento:hover { background: #24493b; color: var(--giallo-tabellone); }
.riga-evento .quando { font-family: var(--font-cartello); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; }
.riga-evento .cosa b { display: block; font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .05em; font-size: 1.12rem; color: #fff6dc; line-height: 1.15; }
.riga-evento .cosa span { font-size: .9rem; color: #cfe0c8; }
.riga-evento .cat { font-family: var(--font-cartello); text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; border: 1px solid currentColor; padding: 1px 7px; border-radius: 3px; white-space: nowrap; }
@media (max-width: 560px) { .riga-evento { grid-template-columns: 70px 1fr; } .riga-evento .cat { display: none; } }

/* Schede generiche */
.griglia-schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.scheda { background: var(--bianco); border: 1.5px solid var(--inchiostro); border-radius: var(--raggio); padding: 18px 20px; box-shadow: var(--ombra); display: flex; flex-direction: column; gap: 8px; }
.scheda h3 { margin: 0; }
.scheda p { margin: 0; }
.scheda .fila-bottoni { margin-top: auto; padding-top: 8px; }
.scheda.in-evidenza { border-width: 2.5px; background: linear-gradient(180deg, var(--crema), var(--bianco) 70%); }

.blocco-partner { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border: 2px solid var(--inchiostro); background: var(--inchiostro); gap: 2px; }
.blocco-partner > div { background: var(--crema); padding: 22px; }
.blocco-partner h3 { font-size: 1.25rem; }
.numero-grande { font-family: var(--font-display); font-style: italic; font-size: 3rem; line-height: 1; color: var(--arancio-scuro); }

/* ───────────── Mappa ───────────── */
.vista-mappa { position: relative; height: calc(100dvh - var(--h-testata) - var(--h-nav-bassa)); }
.vista-mappa .mappa { position: absolute; inset: 0; }
.mappa { background: var(--carta-2); }
.leaflet-container { font-family: var(--font-testo); font-size: 15px; }
.leaflet-tile-pane { filter: grayscale(.55) sepia(.6) saturate(1.1) hue-rotate(-10deg) contrast(.92) brightness(1.04); }
.leaflet-etichette-pane { filter: sepia(.6) contrast(1.05); }
.leaflet-control-layers { border: 2px solid var(--inchiostro) !important; border-radius: 6px !important; background: var(--bianco); box-shadow: 2px 2px 0 var(--inchiostro) !important; }
.leaflet-control-layers-base label { font-size: .9rem; }

.leaflet-control-attribution { font-size: 11px; background: rgba(251,246,234,.85) !important; }
.leaflet-bar a { color: var(--inchiostro); }
.leaflet-popup-content-wrapper { background: var(--bianco); border: 2px solid var(--inchiostro); border-radius: 6px; box-shadow: 3px 3px 0 var(--inchiostro); }
.leaflet-popup-tip { background: var(--inchiostro); }
.leaflet-popup-content { margin: 12px 14px; line-height: 1.4; }
.leaflet-popup-content h4 { font-family: var(--font-display); font-style: italic; font-size: 1.12rem; margin: 0 0 4px; }
.pop-riga { font-size: .9rem; color: var(--inchiostro-2); margin: 2px 0; }

.pannello {
  position: absolute; z-index: 500; background: var(--bianco); border: 2px solid var(--inchiostro); border-radius: 8px;
  box-shadow: 4px 4px 0 var(--inchiostro);
}
.pannello-livelli { top: 14px; left: 14px; width: min(300px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow: auto; padding: 14px 16px; }
.pannello-livelli h2 { font-size: 1.35rem; margin: 0 0 4px; }
.pannello-livelli fieldset { border: 0; padding: 0; margin: 12px 0 0; }
.pannello-livelli legend { font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; font-weight: 700; color: var(--inchiostro-3); margin-bottom: 6px; }
.livello { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; font-size: .95rem; }
.livello input { width: 18px; height: 18px; accent-color: var(--arancio); margin: 0; }
.livello .segno { width: 22px; height: 0; border-top: 4px solid var(--c); flex: none; }
.livello .segno.tratteggio { border-top-style: dashed; }
.livello .segno.punto { width: 13px; height: 13px; border-radius: 50%; background: var(--c); border: 2px solid var(--inchiostro); }
.livello small { margin-left: auto; color: var(--inchiostro-3); font-family: var(--font-cartello); font-size: .8rem; }
.pannello-chiudi { display: none; }
@media (max-width: 860px) {
  /* su telefono il pannello è un bottone piccolo a destra, sotto "dove sono / ricentra": non copre zoom e attribuzioni */
  .pannello-livelli { top: 104px; left: auto; right: 10px; bottom: auto; width: min(300px, calc(100% - 20px)); max-height: calc(100% - 170px); padding: 46px 14px 14px; }
  .pannello-livelli.chiuso { width: auto; max-height: none; overflow: visible; padding: 0; border-radius: 999px; box-shadow: 2px 2px 0 var(--inchiostro); }
  .pannello-livelli.chiuso > :not(.pannello-chiudi) { display: none; }
  .pannello-chiudi { display: inline-flex; position: absolute; top: 8px; right: 8px; min-height: 32px; padding: 4px 12px; font-size: .78rem; gap: 6px; box-shadow: none; }
  .pannello-livelli.chiuso .pannello-chiudi { position: static; border: 0; }
  .pannello-chiudi svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}
.bottone-mappa { position: absolute; z-index: 500; right: 14px; top: 14px; }
@media (max-width: 860px) { .bottone-mappa { top: 12px; right: 12px; } }

.segnaposto-tappa {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--bianco); border: 3px solid var(--c, var(--arancio)); box-shadow: 0 0 0 2px var(--inchiostro);
  font-family: var(--font-cartello); font-weight: 700; font-size: .95rem; color: var(--inchiostro);
}
.segnaposto-tappa.fatta { background: var(--c); color: #fff; }
.segnaposto-tappa.prossima { width: 38px; height: 38px; font-size: 1.15rem; animation: pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 2px var(--inchiostro), 0 0 0 9px rgba(226,112,31,.28); } }
.io-sono { width: 20px; height: 20px; border-radius: 50%; background: #2a6fdb; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--inchiostro), 0 0 0 10px rgba(42,111,219,.2); }
@media (prefers-reduced-motion: reduce) { .segnaposto-tappa.prossima { animation: none; } }

/* ───────────── Percorso ───────────── */
.vista-percorso { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .9fr); height: calc(100dvh - var(--h-testata) - var(--h-nav-bassa)); }
.vista-percorso .mappa { height: 100%; border-right: 2px solid var(--inchiostro); }
.colonna-percorso { overflow: auto; padding: 26px clamp(22px, 3vw, 34px) 40px; }
.testa-percorso { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.testa-percorso h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 0; }
.dati-percorso { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--inchiostro); border-radius: 6px; overflow: hidden; margin: 18px 0; background: var(--inchiostro); gap: 2px; }
.dati-percorso div { background: var(--crema); padding: 10px 10px 8px; text-align: center; }
.dati-percorso b { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.55rem; line-height: 1.05; }
.dati-percorso span { font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600; color: var(--inchiostro-2); }
.barra-copertura { height: 12px; border: 1.5px solid var(--inchiostro); border-radius: 999px; background: radial-gradient(circle, var(--c) 1.8px, transparent 2.2px) 0 50% / 8px 8px repeat-x, var(--bianco); overflow: hidden; margin: 6px 0 4px; }
.barra-copertura i { display: block; height: 100%; background: var(--c); }
.legenda-copertura { display: flex; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--inchiostro-2); }
.legenda-copertura span::before { content: ""; display: inline-block; width: 26px; height: 7px; border-radius: 4px; background: var(--c); box-shadow: 0 0 0 1.5px var(--inchiostro); margin-right: 7px; vertical-align: middle; }
.legenda-copertura span.mancante::before { background: radial-gradient(circle, var(--bianco) 1.4px, transparent 1.8px) 1px 50% / 7px 7px repeat-x, var(--c); }

.linea-tappe { list-style: none; margin: 22px 0 0; padding: 0; position: relative; }
.linea-tappe::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 6px; background: var(--c); border-radius: 3px; box-shadow: 0 0 0 1.5px var(--inchiostro); }
.tappa { position: relative; padding: 0 0 22px 56px; }
.tappa .nodo { position: absolute; left: 4px; top: 2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bianco); border: 4px solid var(--c); box-shadow: 0 0 0 1.5px var(--inchiostro); font-family: var(--font-cartello); font-weight: 700; }
.tappa button.nome-tappa { all: unset; cursor: pointer; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.22rem; line-height: 1.15; }
.tappa button.nome-tappa:hover { color: var(--arancio-scuro); }
.tappa button.nome-tappa:focus-visible { outline: 3px solid var(--arancio); outline-offset: 2px; }
.tappa .categoria { display: block; font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; font-weight: 600; color: var(--inchiostro-3); margin: 2px 0 6px; }
.tappa p { font-size: .97rem; margin: 0 0 6px; color: var(--inchiostro-2); }
.tappa .curiosita { font-style: italic; font-size: .92rem; color: var(--verde); }
.tappa .tratto { font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--inchiostro-3); margin-top: 8px; }
.barra-azione { position: sticky; bottom: 0; padding: 14px 0 4px; background: linear-gradient(transparent, var(--carta) 30%); }
@media (max-width: 860px) {
  .vista-percorso { display: block; height: auto; }
  .vista-percorso .mappa { height: 46vh; border-right: 0; border-bottom: 2px solid var(--inchiostro); }
  .colonna-percorso { overflow: visible; }
  .barra-azione { bottom: var(--h-nav-bassa); }
  .dati-percorso { grid-template-columns: repeat(2, 1fr); }
}

/* ───────────── Guida (Cicerone) ───────────── */
.vista-guida { position: fixed; inset: 0; z-index: 2000; background: var(--carta); }
.vista-guida .mappa { position: absolute; inset: 0; }
.guida-alto {
  position: absolute; z-index: 600; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--inchiostro); color: var(--crema); border-radius: 10px; box-shadow: 0 8px 20px -10px #000;
}
.guida-alto .badge-linea { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.guida-alto .verso { flex: 1; min-width: 0; line-height: 1.15; }
.guida-alto .verso small { display: block; font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; color: var(--carta-3); }
.guida-alto .verso b { display: block; font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .04em; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--giallo-tabellone); }
.guida-alto .distanza { font-family: var(--font-cartello); font-weight: 700; font-size: 1.5rem; color: #fff; white-space: nowrap; }
.guida-esci { all: unset; cursor: pointer; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 1.3rem; line-height: 1; }
.guida-esci:focus-visible { outline: 3px solid var(--arancio); }
.guida-progresso { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.15); border-radius: 0 0 10px 10px; overflow: hidden; }
.guida-progresso i { display: block; height: 100%; background: var(--arancio); transition: width .4s; }

.foglio {
  position: absolute; z-index: 600; left: 0; right: 0; bottom: 0;
  max-height: 62%; overflow: auto; overscroll-behavior: contain;
  background: var(--bianco); border-top: 3px solid var(--inchiostro); border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 30px -12px rgba(0,0,0,.4);
  padding: 8px 22px calc(16px + env(safe-area-inset-bottom));
}
.foglio .maniglia { display: block; width: 64px; height: 22px; margin: -4px auto 4px; padding: 0; border: 0; cursor: pointer; background: linear-gradient(var(--carta-3), var(--carta-3)) center / 44px 5px no-repeat; border-radius: 3px; }
.foglio h2 { font-size: 1.6rem; margin: 2px 0 2px; }
.foglio .racconto { font-size: 1.05rem; line-height: 1.55; }
.foglio .fila-bottoni { margin: 10px 0 4px; }
.foglio.compatto .racconto, .foglio.compatto .curiosita, .foglio.compatto .vicini { display: none; }
.vicini { margin-top: 14px; padding-top: 12px; border-top: 1px dotted var(--inchiostro-3); }
.vicini ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.vicini li { display: flex; gap: 10px; align-items: center; font-size: .93rem; }
.vicini li i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 1.5px solid var(--inchiostro); flex: none; }
.vicini li span { margin-left: auto; font-family: var(--font-cartello); color: var(--inchiostro-3); }
.guida-tasti { position: absolute; z-index: 600; right: 12px; display: flex; flex-direction: column; gap: 10px; }
.tasto-tondo { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--inchiostro); background: var(--bianco); box-shadow: 2px 2px 0 var(--inchiostro); display: grid; place-items: center; cursor: pointer; font-size: 1.25rem; }
.tasto-tondo.attivo { background: var(--arancio); color: #fff; }
.tasto-tondo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 861px) {
  .foglio { left: auto; right: 16px; bottom: 16px; width: 420px; max-height: calc(100% - 110px); border: 2px solid var(--inchiostro); border-radius: 12px; box-shadow: 5px 5px 0 var(--inchiostro); }
  .foglio .maniglia { display: none; }
  .guida-alto { right: auto; width: 460px; }
}

/* ───────────── Liste servizi ───────────── */
.vista-servizi { display: grid; grid-template-columns: minmax(340px, 440px) 1fr; height: calc(100dvh - var(--h-testata) - var(--h-nav-bassa)); }
.vista-servizi .elenco { overflow: auto; border-right: 2px solid var(--inchiostro); padding: 22px var(--gutter) 30px; }
.vista-servizi .mappa { height: 100%; }
.cerca { width: 100%; min-height: 44px; padding: 8px 14px; border: 2px solid var(--inchiostro); border-radius: 999px; background: var(--bianco); font: inherit; margin: 12px 0; }
.voce-ciclista { all: unset; display: block; width: 100%; box-sizing: border-box; cursor: pointer; padding: 12px 4px; border-bottom: 1px dotted var(--inchiostro-3); }
.voce-ciclista:hover, .voce-ciclista.selezionata { background: var(--crema); }
.voce-ciclista:focus-visible { outline: 3px solid var(--arancio); outline-offset: -3px; }
.voce-ciclista b { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; }
.voce-ciclista .riga { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.voce-ciclista small { display: block; color: var(--inchiostro-3); font-size: .86rem; }
.orari { width: 100%; border-collapse: collapse; font-size: .86rem; margin-top: 6px; }
.orari td { padding: 1px 4px; border-bottom: 1px dotted var(--carta-3); }
.orari td:first-child { font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .06em; width: 3.2em; }
.orari tr.oggi td { font-weight: 700; color: var(--inchiostro); }
@media (max-width: 860px) {
  .vista-servizi { display: flex; flex-direction: column-reverse; height: auto; }
  .vista-servizi .mappa { height: 42vh; border-bottom: 2px solid var(--inchiostro); }
  .vista-servizi .elenco { border-right: 0; overflow: visible; }
}

.vuoto { padding: 26px; border: 2px dashed var(--inchiostro-3); border-radius: 8px; text-align: center; color: var(--inchiostro-2); background: rgba(251,246,234,.6); }

.avviso { position: fixed; z-index: 3000; left: 50%; bottom: calc(var(--h-nav-bassa) + 18px); transform: translateX(-50%); max-width: calc(100% - 32px); background: var(--inchiostro); color: var(--crema); padding: 10px 18px; border-radius: 999px; font-size: .95rem; box-shadow: 0 8px 20px -8px #000; }

.pie { border-top: 6px solid var(--marrone-chiaro); background: var(--marrone); color: #e8d6bd; padding: 28px 0 34px; font-size: .88rem; }
.pie a { color: var(--crema); }
.pie .contenitore { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.pie-marchio { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--crema); }

/* Modulo partner */
.modulo .campi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 12px; }
.modulo label { display: flex; flex-direction: column; gap: 5px; font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .07em; font-size: .82rem; font-weight: 600; }
.modulo label .muto { text-transform: none; letter-spacing: 0; font-family: var(--font-testo); font-weight: 400; }
.modulo input, .modulo select, .modulo textarea { font: inherit; font-family: var(--font-testo); text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 400; min-height: 44px; padding: 8px 12px; border: 2px solid var(--inchiostro); border-radius: 6px; background: var(--bianco); color: var(--inchiostro); }
.modulo .pieno { grid-column: 1 / -1; }
.modulo .spunta { flex-direction: row; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font-family: var(--font-testo); font-size: .95rem; font-weight: 400; }
.modulo .spunta input { min-height: 0; width: 20px; height: 20px; accent-color: var(--verde); }
@media (max-width: 640px) { .modulo .campi { grid-template-columns: 1fr; } }
@media (min-width: 700px) { .griglia-schede > .in-evidenza:only-child { grid-column: 1 / -1; max-width: 760px; } }

/* ───────── Account ───────── */
.conto { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 6px 14px; border-radius: 999px; background: var(--inchiostro); color: var(--crema); text-decoration: none; font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.conto:hover, .conto.attivo { color: var(--giallo-tabellone); }
.conto .iniziale { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--crema); color: var(--inchiostro); font-size: .85rem; }
.conto .conto-nome { max-width: 9em; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; font-family: var(--font-testo); }
@media (max-width: 860px) {
  .testata { justify-content: space-between; }
  .conto { margin-left: auto; padding: 5px 10px; font-size: .8rem; }
  .conto .conto-nome { display: none; }
  .nav-bassa { grid-template-columns: repeat(6, 1fr); }
  .nav-bassa a { font-size: .66rem; letter-spacing: .05em; }
}
.contenitore.stretto { max-width: 720px; }
.codice-input { font-family: var(--font-cartello) !important; font-size: 2rem !important; letter-spacing: .35em; text-align: center; font-weight: 700 !important; max-width: 320px; }

/* ───────── Feste ───────── */
.hero-feste { background: radial-gradient(circle at 85% 30%, rgba(226,112,31,.18), transparent 55%); }
.passi-festa { list-style: none; counter-reset: passo; margin: 0; padding: 0; display: grid; gap: 12px; }
.passi-festa li { counter-increment: passo; position: relative; padding: 14px 16px 14px 64px; background: var(--bianco); border: 2px solid var(--inchiostro); border-radius: 8px; box-shadow: 3px 3px 0 var(--inchiostro); }
.passi-festa li::before { content: counter(passo); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--arancio); color: #fff; font-family: var(--font-cartello); font-weight: 700; font-size: 1.2rem; border: 2px solid var(--inchiostro); }
.passi-festa b { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; }
.passi-festa span { font-size: .95rem; color: var(--inchiostro-2); }
.entra-codice { display: inline-flex; gap: 6px; align-items: center; }
.entra-codice input { width: 7.5em; min-height: 46px; padding: 6px 12px; border: 2px solid var(--inchiostro); border-radius: 999px; background: var(--bianco); font-family: var(--font-cartello); font-weight: 700; font-size: 1.1rem; letter-spacing: .2em; text-transform: uppercase; text-align: center; }
.scegli-linea { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.scegli-linea legend { font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .07em; font-size: .82rem; font-weight: 600; margin-bottom: 6px; }
.modulo .opzione-linea { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--carta-3); border-radius: 8px; background: var(--bianco); cursor: pointer; text-transform: none; letter-spacing: 0; font-family: var(--font-testo); font-weight: 400; font-size: .95rem; }
.modulo .opzione-linea input { position: absolute; opacity: 0; pointer-events: none; min-height: 0; }
.opzione-linea:has(input:checked) { border-color: var(--inchiostro); background: var(--crema); box-shadow: 2px 2px 0 var(--inchiostro); }
.opzione-linea:has(input:focus-visible) { outline: 3px solid var(--arancio); outline-offset: 2px; }
.opzione-linea small { display: block; color: var(--inchiostro-3); }
.riquadro-servizio { margin-top: 14px; padding: 12px 14px; border: 2px dashed var(--inchiostro-3); border-radius: 8px; background: rgba(239,224,185,.4); }
.riquadro-servizio .campi { margin-top: 10px; }
.vista-festa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); min-height: calc(100dvh - var(--h-testata) - var(--h-nav-bassa)); }
.vista-festa .mappa { min-height: 360px; border-right: 2px solid var(--inchiostro); position: sticky; top: var(--h-testata); height: calc(100dvh - var(--h-testata) - var(--h-nav-bassa)); }
@media (max-width: 860px) { .vista-festa { display: block; } .vista-festa .mappa { position: relative; top: auto; height: 38vh; min-height: 0; border-right: 0; border-bottom: 2px solid var(--inchiostro); } }
.servizi-festa { list-style: none; padding: 0; margin: 10px 0 16px; display: grid; gap: 6px; font-size: .95rem; }
.invito { margin-top: 10px; gap: 10px; }
.riga-link { display: flex; gap: 8px; }
.riga-link input { flex: 1; min-width: 0; min-height: 40px; padding: 6px 12px; border: 2px solid var(--inchiostro); border-radius: 6px; background: var(--carta); font-size: .9rem; }
.codice-festa { margin-left: auto; align-self: center; font-family: var(--font-cartello); font-weight: 700; font-size: 1.3rem; letter-spacing: .25em; background: var(--verde-scuro); color: var(--giallo-tabellone); padding: 4px 10px; border-radius: 4px; }
.segnaposto-ritrovo { background: var(--inchiostro); color: var(--giallo-tabellone); font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: .8rem; padding: 4px 10px; border-radius: 4px; text-align: center; box-shadow: 0 0 0 2px var(--giallo-tabellone); }

/* ───────── Gioco ───────── */
.schede-gioco { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 2px solid var(--inchiostro); }
.schede-gioco button { all: unset; cursor: pointer; padding: 6px 12px; font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .9rem; color: var(--inchiostro-3); border-radius: 6px 6px 0 0; }
.schede-gioco button[aria-selected="true"] { background: var(--inchiostro); color: var(--crema); }
.schede-gioco button:focus-visible { outline: 3px solid var(--arancio); }
.indizio { margin: 8px 0 12px; padding: 14px 16px; background: var(--verde-scuro); color: var(--giallo-tabellone); border-radius: 8px; font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.35; box-shadow: inset 0 0 0 3px #2b5143; }
.termometro { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 14px; margin-bottom: 12px; border: 2px solid var(--t); border-radius: 999px; color: var(--t); }
.termometro b { font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .1em; font-size: 1.2rem; }
.termometro span { font-family: var(--font-cartello); font-weight: 700; }
.zona-ricerca { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bianco); color: var(--c, var(--arancio)); border: 3px dashed currentColor; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.racconto-gioco summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .85rem; padding: 6px 0; }
.racconto-gioco p { font-size: .98rem; }
.quiz, .sfida { margin-top: 12px; padding: 12px 14px; border: 2px solid var(--inchiostro); border-radius: 8px; background: var(--crema); }
.domanda { font-weight: 600; margin: 0 0 10px; }
.opzioni { display: grid; gap: 8px; }
.opzione { text-align: left; min-height: 44px; padding: 8px 14px; border: 2px solid var(--inchiostro); border-radius: 8px; background: var(--bianco); cursor: pointer; font-size: .98rem; }
.opzione:hover:not([disabled]) { background: var(--giallo-tabellone); }
.opzione[disabled] { cursor: default; opacity: .75; }
.opzione.giusta { background: var(--verde); color: #fff; opacity: 1; }
.opzione.sbagliata { background: var(--rosso); color: #fff; opacity: 1; }
.esito-quiz { margin: 10px 0 0; font-weight: 600; }
.carica-foto { position: relative; }
.classifica { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.classifica li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1.5px solid var(--inchiostro); border-radius: 8px; background: var(--bianco); }
.classifica li.mia { background: var(--crema); border-width: 2.5px; }
.classifica .pos { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.4rem; text-align: center; }
.classifica .chi small { display: block; color: var(--inchiostro-3); font-size: .82rem; }
.classifica .tp { font-family: var(--font-cartello); color: var(--inchiostro-3); }
.classifica .pt { font-family: var(--font-cartello); font-weight: 700; font-size: 1.3rem; }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.album figure { margin: 0; }
.album img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 2px solid var(--inchiostro); display: block; }
.album figcaption { font-size: .8rem; line-height: 1.25; margin-top: 4px; }
.premiazione { position: relative; overflow: hidden; padding-top: 6px; }
.podio { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 6px; margin: 14px 0; }
.gradino { position: relative; text-align: center; background: var(--c, var(--arancio)); color: #fff; border: 2px solid var(--inchiostro); border-radius: 6px 6px 0 0; padding: 10px 4px 34px; }
.gradino b { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1.1; }
.gradino span { font-family: var(--font-cartello); font-size: .9rem; }
.gradino i { position: absolute; left: 0; right: 0; bottom: 4px; font-style: normal; font-family: var(--font-cartello); font-weight: 700; font-size: 1.4rem; }
.gradino.g1 { min-height: 150px; background: var(--ottone); color: var(--inchiostro); }
.gradino.g2 { min-height: 115px; background: #9aa3a8; color: var(--inchiostro); }
.gradino.g3 { min-height: 90px; background: #b5652b; }
.coriandoli { position: absolute; inset: 0; pointer-events: none; }
.coriandoli i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 14px; background: var(--c); border-radius: 2px; animation: cade 3.2s linear var(--d) infinite; }
@keyframes cade { to { transform: translateY(420px) rotate(540deg); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .coriandoli { display: none; } }

/* Promo feste in home */
.banda-feste { display: grid; grid-template-columns: 1fr 220px; gap: 28px; align-items: center; padding: clamp(20px, 4vw, 36px); background: var(--verde-scuro); color: var(--crema); border: 3px solid var(--inchiostro); border-radius: 10px; box-shadow: inset 0 0 0 4px #2b5143, var(--ombra); }
.banda-feste h2 { color: #fff6dc; }
.banda-feste .occhiello { color: var(--giallo-tabellone); }
.banda-feste p { color: #dfe9da; max-width: 46em; }
.banda-feste .bottone.secondario { background: transparent; color: var(--crema); border-color: var(--crema); box-shadow: 3px 3px 0 #0f241c; }
.mini-podio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 6px; height: 150px; }
.mini-podio li { display: grid; place-items: start center; padding-top: 8px; border: 2px solid var(--inchiostro); border-radius: 6px 6px 0 0; font-family: var(--font-cartello); font-size: 1.6rem; color: var(--inchiostro); }
.mini-podio li:nth-child(1) { height: 70%; background: #9aa3a8; }
.mini-podio li:nth-child(2) { height: 100%; background: var(--ottone); }
.mini-podio li:nth-child(3) { height: 50%; background: #b5652b; color: #fff; }
@media (max-width: 700px) { .banda-feste { grid-template-columns: 1fr; } .mini-podio { display: none; } }

/* Controllo ricentra (tutte le mappe) */
.controlli-ricentra a { width: 40px !important; height: 40px !important; display: grid !important; place-items: center; background: var(--bianco) !important; color: var(--inchiostro) !important; }
.controlli-ricentra a:hover { background: var(--crema) !important; }
.controlli-ricentra svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.leaflet-bar.controlli-ricentra { border: 2px solid var(--inchiostro) !important; box-shadow: 2px 2px 0 var(--inchiostro) !important; border-radius: 8px !important; overflow: hidden; }

/* ───────── SOS / Aiuto ───────── */
.sos-testata { display: inline-grid; place-items: center; min-width: 52px; height: 34px; margin-left: 10px; padding: 0 12px; border-radius: 999px; background: var(--rosso); color: #fff; border: 2px solid var(--bianco); font-family: var(--font-cartello); font-weight: 700; letter-spacing: .12em; text-decoration: none; box-shadow: 0 0 0 2px var(--inchiostro); }
.sos-testata:hover, .sos-testata.attivo { color: #fff; background: #8f1d23; }
@media (max-width: 860px) { .sos-testata { margin-left: auto; height: 30px; min-width: 46px; padding: 0 10px; font-size: .85rem; } .sos-testata + .conto { margin-left: 8px; } }
.tasto-sos { background: var(--rosso) !important; color: #fff; font-family: var(--font-cartello); font-weight: 700; font-size: .85rem; letter-spacing: .06em; }
.sos-numeri { display: grid; gap: 10px; margin-bottom: 14px; }
.numero-sos { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 12px 14px; border: 2px solid var(--inchiostro); border-radius: 10px; background: var(--bianco); color: var(--inchiostro); text-decoration: none; box-shadow: 3px 3px 0 var(--inchiostro); }
.numero-sos b { font-family: var(--font-cartello); font-size: 2rem; letter-spacing: .04em; min-width: 3.2em; text-align: center; }
.numero-sos strong { display: block; font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .08em; }
.numero-sos span { font-size: .9rem; line-height: 1.35; }
.numero-sos.rossa { background: var(--rosso); color: #fff; }
.numero-sos:hover { transform: translate(-1px, -1px); color: inherit; }
.numero-sos.rossa:hover { color: #fff; }
.sos-posizione { display: grid; gap: 6px; padding: 12px 14px; margin-bottom: 14px; border: 2px dashed var(--inchiostro-3); border-radius: 10px; background: var(--crema); }
.sos-posizione code { font-family: var(--font-cartello); font-size: 1.3rem; font-weight: 700; letter-spacing: .04em; }
.sos-titolo { font-size: 1.25rem; margin: 14px 0 6px; }
.sos-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.sos-lista li { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px dotted var(--inchiostro-3); }
.sos-voce small { display: block; color: var(--inchiostro-2); }
.sos-azioni { display: flex; gap: 6px; flex-wrap: wrap; }
.pallino-sos { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); border: 1.5px solid var(--inchiostro); vertical-align: middle; }
.sos-dialogo { width: min(560px, calc(100% - 20px)); max-height: calc(100dvh - 40px); padding: 0; border: 3px solid var(--inchiostro); border-radius: 14px; background: var(--carta); color: var(--inchiostro); box-shadow: 6px 6px 0 var(--inchiostro); }
.sos-dialogo::backdrop { background: rgba(42, 36, 32, .55); }
.sos-testa { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--rosso); color: #fff; }
.sos-testa h2 { margin: 0; font-size: 1.5rem; color: #fff; }
.sos-corpo { padding: 16px; overflow: auto; max-height: calc(100dvh - 120px); }

/* ───────── Aggancio eventi ───────── */
.aggancio-scheda { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 16px; }
.aggancio-scelta { display: flex; align-items: center; gap: 8px; font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: .85rem; }
.aggancio-scelta select { min-height: 38px; padding: 4px 10px; border: 2px solid var(--inchiostro); border-radius: 6px; background: var(--bianco); font-family: var(--font-testo); text-transform: none; letter-spacing: 0; font-weight: 600; }
.riga-evento.con-azione .cosa a { color: inherit; text-decoration: none; }
.riga-evento.con-azione .cosa a:hover b { text-decoration: underline; }
.aggiungi-tappa { min-height: 36px; padding: 4px 12px; border: 2px solid var(--giallo-tabellone); border-radius: 999px; background: transparent; color: var(--giallo-tabellone); font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: .8rem; cursor: pointer; white-space: nowrap; }
.aggiungi-tappa:hover { background: var(--giallo-tabellone); color: var(--verde-scuro); }
.aggiungi-tappa.fatto { background: var(--giallo-tabellone); color: var(--verde-scuro); }
@media (max-width: 560px) { .riga-evento.con-azione { grid-template-columns: 64px 1fr; } .riga-evento.con-azione .aggiungi-tappa { grid-column: 2; justify-self: start; } }

/* ───────── Paline stampabili ───────── */
.paline { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 60px; }
.palina { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--bianco); border: 3px solid var(--inchiostro); border-radius: 12px 12px 4px 4px; overflow: hidden; box-shadow: var(--ombra); break-inside: avoid; }
.palina-testa { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--c); color: #fff; border-bottom: 4px solid var(--crema); }
.palina-codice { font-family: var(--font-cartello); font-weight: 700; font-size: 1.6rem; background: rgba(0,0,0,.18); border: 2px solid #fff; border-radius: 6px; padding: 0 8px; }
.palina-linea { flex: 1; text-align: left; font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: .85rem; line-height: 1.1; }
.palina-n { font-family: var(--font-cartello); font-weight: 700; }
.palina h2 { font-size: 1.35rem; margin: 14px 14px 2px; }
.palina-cat { font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--inchiostro-3); margin: 0 0 10px; }
.palina-qr { width: 62%; aspect-ratio: 1; padding: 10px; background: #fff; border: 2px solid var(--inchiostro); border-radius: 8px; }
.palina-qr svg { width: 100%; height: 100%; display: block; }
.palina-invito { margin: 10px 14px; font-weight: 600; font-size: .95rem; }
.palina-piede { width: 100%; margin-top: auto; display: grid; gap: 2px; padding: 8px 10px; background: var(--marrone); color: #f0e2cc; font-size: .78rem; }
.palina-piede b { color: #fff; background: var(--rosso); padding: 0 6px; border-radius: 3px; }
@media print {
  .testata, .nav-bassa, .non-stampa, .pie, #avviso { display: none !important; }
  body { background: #fff; padding: 0; }
  .paline { grid-template-columns: repeat(2, 1fr); gap: 12mm; padding: 0; }
  .palina { box-shadow: none; }
}

/* ───────── Regia ───────── */
.regia-contatori { grid-template-columns: repeat(5, 1fr); border: 2px solid var(--inchiostro); }
@media (max-width: 860px) { .regia-contatori { grid-template-columns: repeat(2, 1fr); } }
.tabella-regia { overflow-x: auto; border: 2px solid var(--inchiostro); border-radius: 8px; background: var(--bianco); }
.tabella-regia table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabella-regia th { text-align: left; font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .07em; font-size: .78rem; background: var(--marrone); color: #f0e2cc; padding: 8px 10px; }
.tabella-regia td { padding: 8px 10px; border-top: 1px solid var(--carta-3); vertical-align: top; }
.tabella-regia td .bottone { margin-top: 4px; }
.tabella-regia tr.nota-riga td { border-top: 0; padding-top: 0; color: var(--inchiostro-2); }

/* Bodoni più robusto: alle dimensioni grandi il carattere usa grazie sottilissime che sul telefono spariscono.
   Peso 800 e dimensione ottica "da testo" (opsz bassa) danno tratti più spessi e leggibili. */
h1, h2, h3, .marchio-nome, .pie-marchio, .contatore b, .numero-grande, .dati-percorso b, .tappa button.nome-tappa,
.leaflet-popup-content h4, .voce-ciclista b, .passi-festa b, .indizio, .classifica .pos, .gradino b, .biglietto-corpo h3 {
  font-weight: 800;
  font-variation-settings: "opsz" 30;
}
@media (max-width: 860px) {
  h1, h2, h3, .marchio-nome, .pie-marchio, .contatore b, .numero-grande, .dati-percorso b, .tappa button.nome-tappa,
  .leaflet-popup-content h4, .voce-ciclista b, .passi-festa b, .indizio, .classifica .pos, .gradino b, .biglietto-corpo h3 {
    font-variation-settings: "opsz" 12;
  }
  .marchio-nome { font-weight: 900; }
  .attacco, .colonna-percorso p, .scheda p { line-height: 1.6; }
}

/* ───────── Lingue ───────── */
.visivamente-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scegli-lingua { margin-left: 12px; }
.nav-alta { margin-left: auto; }
.scegli-lingua select { appearance: none; -webkit-appearance: none; height: 34px; padding: 0 26px 0 12px; border-radius: 999px; border: 2px solid var(--bianco); background: rgba(0,0,0,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fbf6ea' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 6px; color: var(--bianco); font-family: var(--font-cartello); font-weight: 700; letter-spacing: .08em; font-size: .9rem; cursor: pointer; }
.scegli-lingua select option { color: var(--inchiostro); }
@media (max-width: 860px) { .scegli-lingua { margin-left: auto; } .scegli-lingua select { height: 30px; font-size: .8rem; padding: 0 22px 0 9px; } .scegli-lingua + .sos-testata { margin-left: 8px; } }
@media (max-width: 380px) { .marchio-payoff { display: none; } }
/* Cinese: caratteri adatti, niente spaziature da maiuscoletto */
:lang(zh-CN) body { font-family: "Noto Sans SC", var(--font-testo); }
:lang(zh-CN) h1, :lang(zh-CN) h2, :lang(zh-CN) h3, :lang(zh-CN) .indizio, :lang(zh-CN) .passi-festa b, :lang(zh-CN) .biglietto-corpo h3 { font-family: "Noto Serif SC", var(--font-display); font-style: normal; letter-spacing: 0; }
:lang(zh-CN) .cartello, :lang(zh-CN) .occhiello, :lang(zh-CN) .bottone, :lang(zh-CN) .chip, :lang(zh-CN) .nav-alta a, :lang(zh-CN) .nav-bassa a { letter-spacing: .02em; }

/* Voce del Cicerone */
.scegli-voce { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 2px; }
.scegli-voce .cartello { margin-right: 4px; }
.scegli-voce .chip { min-height: 32px; font-size: .78rem; padding: 4px 11px; }
.voci-assegnate { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.voci-assegnate li { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; border-bottom: 1px dotted var(--carta-3); padding-bottom: 6px; }
.voci-assegnate code { font-size: .8rem; }
.voce-card audio { width: 100%; height: 36px; }

@media (max-width: 860px) { .testata { padding: 0 12px; gap: 8px; } .marchio { min-width: 0; flex-shrink: 1; } .marchio-testo { min-width: 0; } .conto { padding: 5px 9px; } }
.scegli-lingua[hidden] + .sos-testata { margin-left: auto; }
@media (min-width: 861px) { .scegli-lingua[hidden] + .sos-testata { margin-left: 12px; } }

/* ───────── Diario ───────── */
.diario-contatori { border: 2px solid var(--inchiostro); margin-top: 18px; }
.abbonamenti { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
.abbonamento { display: grid; gap: 10px; padding: 14px 16px; background: var(--bianco); border: 2px solid var(--inchiostro); border-left: 10px solid var(--c); border-radius: 6px; text-decoration: none; color: var(--inchiostro); box-shadow: var(--ombra); }
.abbonamento:hover { color: var(--inchiostro); transform: translateY(-2px); }
.abbonamento.vuoto-abb { opacity: .72; }
.abb-testa { display: flex; align-items: center; gap: 10px; }
.abb-testa b { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; }
.abb-buchi { display: flex; flex-wrap: wrap; gap: 6px; }
.abb-buchi i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--font-cartello); font-weight: 700; font-size: .85rem; border: 2px dashed var(--inchiostro-3); color: var(--inchiostro-3); }
.abb-buchi i.timbrata { border: 2px solid var(--inchiostro); background: var(--c); color: #fff; transform: rotate(-8deg); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35); }
.abb-piede { font-family: var(--font-cartello); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--inchiostro-2); }
.giri { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.giri li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bianco); border: 1.5px solid var(--inchiostro); border-radius: 8px; }
.giri li > span:nth-child(2) { flex: 1; min-width: 0; }
.giri small { display: block; color: var(--inchiostro-3); }
.ricordo-anteprima { display: block; width: 100%; max-height: 62dvh; object-fit: contain; border-radius: 6px; }

/* ── Cicerone parlante (conversazione a voce) ── */
.bottone-parla { background: var(--verde-scuro); border-color: var(--verde-scuro); color: var(--crema); }
.conversa { margin: 12px 0 6px; padding: 12px 14px; border: 2px solid var(--verde-scuro); border-radius: var(--raggio); background: var(--crema); }
.conversa-testa { display: flex; align-items: center; gap: 10px; font-family: var(--font-cartello); }
.conversa .onda { display: inline-flex; gap: 3px; align-items: center; height: 18px; }
.conversa .onda i { width: 4px; height: 6px; border-radius: 2px; background: var(--verde-scuro); }
.conversa.parla .onda i { background: var(--arancio); animation: onda .9s ease-in-out infinite; }
.conversa.ascolta .onda i { animation: onda 1.8s ease-in-out infinite; }
.conversa.collego .onda i { opacity: .4; }
.conversa .onda i:nth-child(2) { animation-delay: .15s; }
.conversa .onda i:nth-child(3) { animation-delay: .3s; }
@keyframes onda { 0%, 100% { height: 6px; } 50% { height: 18px; } }
@media (prefers-reduced-motion: reduce) { .conversa .onda i { animation: none !important; } }
.conversa-righe { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 6px; max-height: 168px; overflow-y: auto; }
.conversa-righe li { padding: 6px 10px; border-radius: 10px; font-size: .93rem; line-height: 1.35; max-width: 92%; }
.conversa-righe li.cicerone { background: var(--bianco); border: 1px solid var(--marrone-chiaro); }
.conversa-righe li.tu { background: var(--verde-scuro); color: var(--crema); justify-self: end; }
.conversa .fila-bottoni { margin: 8px 0 0; }