/* ═══════════════════════════════════════════════════════════════
   UN PONTE PER L'ESTATE 2026 · Avigliano Umbro e Montecastrilli
   Concept: l'Arco — un solo gesto visivo, tutto il resto al servizio.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* L'inchiostro del ponte e la carta della pagina */
  --ink: #13203f;
  --ink-55: rgba(19, 32, 63, 0.55);
  --ink-30: rgba(19, 32, 63, 0.30);
  --ink-14: rgba(19, 32, 63, 0.14);
  --ink-08: rgba(19, 32, 63, 0.08);
  --carta: #f8f2e3;   /* crema calda da poster estivo */
  --bianco: #ffffff;

  --brand-arancio: #ef8a1e;  /* il blob del titolo */
  --acqua: #bfe0f3;          /* il fiume sotto il ponte */

  /* I cinque accenti: l'unica festa cromatica.
     --acc-* per tratti e fondi, --acct-* per testo (contrasto AA su bianco). */
  --acc-piccoli: #ff6b5e;  --acct-piccoli: #b8311f;
  --acc-scuola:  #0e9594;  --acct-scuola:  #0b6e6d;
  --acc-sport:   #2f9e44;  --acct-sport:   #1e7a33;
  --acc-oratori: #eca72c;  --acct-oratori: #8a5a00;
  --acc-teatro:  #7c6fe0;  --acct-teatro:  #5343c4;

  --display: "Baloo 2", "Plus Jakarta Sans", system-ui, sans-serif;
  --testo: "Plus Jakarta Sans", system-ui, sans-serif;

  --raggio: 14px;
  --ombra: 0 1px 2px rgba(19, 32, 63, 0.05), 0 6px 16px -8px rgba(19, 32, 63, 0.18);
  --ombra-su: 0 2px 4px rgba(19, 32, 63, 0.06), 0 14px 28px -10px rgba(19, 32, 63, 0.26);
  --molla: cubic-bezier(0.34, 1.45, 0.5, 1);
}

/* ── Base ─────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--testo);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--carta);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink); color: var(--carta); }

h1, h2, h3 { font-family: var(--display); line-height: 1.04; margin: 0; }

a { color: inherit; }

button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

[hidden] { display: none !important; }

/* Il tratto del ponte: coerente ovunque */
.tratto {
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t-impalcato { stroke-width: 5; }
.t-parapetto { stroke-width: 3; }
.t-balaustra { stroke-width: 2; opacity: 0.85; }
.t-arcata    { stroke-width: 3.5; }
.t-pile      { stroke-width: 3; }
.t-acqua     { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 14 12; opacity: 0.4; }
.borgo       { fill: #d9c3a3; }

/* scenografia del ponte: fiume, verde, cipressi */
.acqua-fondo { fill: var(--acqua); }
.onde path   { stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: 0.75; }
.verde       { fill: #6aa84f; }
.cipresso    { fill: #3f7a35; }
.t-acqua { display: none; }   /* sostituita dall'acqua piena */

/* le arcate dell'hero portano il colore della loro categoria */
.t-arcata    { stroke-width: 6; }
.a-piccoli   { stroke: var(--acc-piccoli); }
.a-scuola    { stroke: var(--acc-scuola); }
.a-sport     { stroke: var(--acc-sport); }
.a-oratori   { stroke: var(--acc-oratori); }
.a-teatro    { stroke: var(--acc-teatro); }
.a-iride     { stroke: url(#arco-iride); stroke-width: 6; }

/* ── Loghi istituzionali ──────────────────────────────────────── */

.loghi {
  display: flex;
  justify-content: center;
  padding: 1.1rem clamp(1rem, 4vw, 2rem) 0;
}
.loghi img {
  width: auto;
  height: clamp(66px, 11vw, 92px);
  max-width: 100%;
  object-fit: contain;
}

/* ── Decori dell'estate ───────────────────────────────────────── */

.deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.deco svg { position: absolute; display: block; }
.deco-sole        { width: clamp(56px, 9vw, 104px); top: 2%;  left: 4%; animation: gira 60s linear infinite; }
.deco-nuvola-1    { width: clamp(70px, 11vw, 130px); top: 30%; right: 6%; }
.deco-nuvola-2    { width: clamp(54px, 8vw, 96px);  top: 64%; left: 3%; }
.deco-foglia-sx   { width: clamp(40px, 6vw, 78px);  top: 22%; left: 1%; transform: rotate(-12deg); }
.deco-foglia-dx   { width: clamp(70px, 11vw, 132px); top: 50%; right: 1%; transform: rotate(8deg); }
.deco-scarabocchio{ width: clamp(40px, 6vw, 78px);  top: 8%;  right: 12%; }
.deco-manina      { width: clamp(34px, 5vw, 56px);  top: 7%;  left: 50%; transform: translateX(-50%) rotate(-8deg); }

@keyframes gira { to { transform: rotate(360deg); } }

/* ── Hero ─────────────────────────────────────────────────────── */

.eroe {
  position: relative;
  overflow: hidden;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 4rem) clamp(1.1rem, 4vw, 2.5rem) 0;
  text-align: center;
}

.eroe-kicker {
  position: relative;
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Il titolo bianco su blob arancione, con l'anno colorato sotto */
.titolo-blocco {
  position: relative;
  display: inline-block;
  margin: 0.4rem auto 0;
  padding: 0 1rem;
}
.blob {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 48%;
  width: 116%;
  height: 86%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 30px rgba(239, 138, 30, 0.28));
}

.eroe-titolo {
  position: relative;
  z-index: 1;
  font-size: clamp(3rem, 11vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.titolo-parole {
  display: block;
  color: #fff;
  padding: 0.35em 0.2em 0.1em;
}
.eroe-anno {
  display: block;
  line-height: 0.9;
  margin-top: -0.06em;
  letter-spacing: 0.02em;
}
.eroe-anno span:nth-child(1) { color: var(--acc-piccoli); }
.eroe-anno span:nth-child(2) { color: var(--acc-scuola); }
.eroe-anno span:nth-child(3) { color: var(--acc-sport); }
.eroe-anno span:nth-child(4) { color: var(--acc-teatro); }

.eroe-sotto {
  position: relative;
  max-width: 44rem;
  margin: 1.6rem auto 0;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  color: var(--ink);
  font-weight: 600;
}

/* Indice rapido delle campate */
.indice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  margin-top: 1.8rem;
}

.indice a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.35rem 0.2rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
}
.indice a b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
}
.indice a:nth-child(1) { border-color: var(--acc-piccoli); }
.indice a:nth-child(1) b { color: var(--acct-piccoli); }
.indice a:nth-child(2) { border-color: var(--acc-scuola); }
.indice a:nth-child(2) b { color: var(--acct-scuola); }
.indice a:nth-child(3) { border-color: var(--acc-sport); }
.indice a:nth-child(3) b { color: var(--acct-sport); }
.indice a:nth-child(4) { border-color: var(--acc-oratori); }
.indice a:nth-child(4) b { color: var(--acct-oratori); }
.indice a:nth-child(5) { border-color: var(--acc-teatro); }
.indice a:nth-child(5) b { color: var(--acct-teatro); }
.indice a:hover span, .indice a:focus-visible span { text-decoration: underline; }

/* Il ponte dell'hero */
.ponte { margin: clamp(1.6rem, 4vh, 3rem) 0 0; }

.ponte svg { display: block; width: 100%; height: auto; }

.ponte svg.ponte-piccolo { display: none; }

.ponte-didascalia {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.9rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.ponte-linea { flex: 1; height: 1px; background: var(--ink-14); }

#salta-intro {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 60;
  padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--ink-30);
  border-radius: 999px;
  background: var(--bianco);
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: var(--ombra);
}

/* ── Intro: il ponte si costruisce (solo prima visita) ────────── */
/* Stato iniziale: tratti non disegnati, testi sospesi sopra.      */

html.intro .eroe .tratto {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
html.intro .eroe .borgo,
html.intro .acqua-fondo,
html.intro .onde,
html.intro .verde,
html.intro .cipresso { opacity: 0; }
html.intro .eroe-kicker,
html.intro .eroe-sotto,
html.intro .indice,
html.intro .deco,
html.intro .ponte-didascalia { opacity: 0; }
html.intro .blob { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
html.intro .eroe-titolo {
  opacity: 0;
  transform: translateY(-44px);
}

/* La sequenza: impalcato → parapetto → balaustra → arcate → pile → borghi → titolo */
html.intro.via .eroe .tratto       { transition: stroke-dashoffset 0.55s ease-out; }
html.intro.via .t-impalcato        { transition-delay: 0s; }
html.intro.via .t-parapetto        { transition-delay: 0.12s; }
html.intro.via .t-balaustra        { transition-delay: 0.3s; transition-duration: 0.5s; }
html.intro.via .t-arcata:nth-of-type(5) { transition-delay: 0.25s; }
html.intro.via .t-arcata:nth-of-type(6) { transition-delay: 0.37s; }
html.intro.via .t-arcata:nth-of-type(7) { transition-delay: 0.49s; }
html.intro.via .t-arcata:nth-of-type(8) { transition-delay: 0.61s; }
html.intro.via .t-arcata:nth-of-type(9) { transition-delay: 0.73s; }
html.intro.via .t-pile             { transition-delay: 0.8s; }
html.intro.via .eroe .tratto       { stroke-dashoffset: 0; }
html.intro.via .eroe .borgo,
html.intro.via .acqua-fondo,
html.intro.via .onde,
html.intro.via .verde,
html.intro.via .cipresso { opacity: 1; transition: opacity 0.6s ease 0.9s; }
html.intro.via .blob {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.5s ease 0.95s, transform 0.6s var(--molla) 0.95s;
}
html.intro.via .deco { opacity: 1; transition: opacity 0.6s ease 1.3s; }
html.intro.via .eroe-titolo {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease 1.05s, transform 0.65s cubic-bezier(0.2, 0.9, 0.2, 1) 1.05s;
}
html.intro.via .eroe-kicker,
html.intro.via .eroe-sotto,
html.intro.via .indice,
html.intro.via .ponte-didascalia {
  opacity: 1;
  transition: opacity 0.5s ease 1.35s;
}

/* ── Barra filtri ─────────────────────────────────────────────── */

.filtri {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding: 0.7rem clamp(1.1rem, 4vw, 2.5rem) 0.75rem;
  background: color-mix(in srgb, var(--carta) 92%, transparent);
  border-bottom: 1px solid var(--ink-08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  justify-content: center;
}

.filtri-chips {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.filtri-chips::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.5rem 0.95rem;
  border: 1.5px solid var(--ink-30);
  border-radius: 999px;
  background: var(--bianco);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.chip svg { width: 17px; height: 17px; color: var(--ink-55); }

.chip[data-cat="piccoli"] { --acc: var(--acc-piccoli); --acct: var(--acct-piccoli); }
.chip[data-cat="scuola"]  { --acc: var(--acc-scuola);  --acct: var(--acct-scuola); }
.chip[data-cat="sport"]   { --acc: var(--acc-sport);   --acct: var(--acct-sport); }
.chip[data-cat="oratori"] { --acc: var(--acc-oratori); --acct: var(--acct-oratori); }
.chip[data-cat="teatro"]  { --acc: var(--acc-teatro);  --acct: var(--acct-teatro); }

.chip:hover { border-color: var(--acc); }
.chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--acc) 16%, white);
  border-color: var(--acc);
  color: var(--acct);
}
.chip[aria-pressed="true"] svg { color: var(--acct); }

.filtri-campi {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.campo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border: 1.5px solid var(--ink-30);
  border-radius: 999px;
  background: var(--bianco);
  color: var(--ink-55);
}
.campo:focus-within { border-color: var(--ink); color: var(--ink); }
.campo input {
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
}
.campo-cerca input { width: clamp(150px, 30vw, 240px); }
.campo-eta span { font-size: 0.85rem; font-weight: 700; }
.campo-eta input { width: 3.2ch; text-align: center; -moz-appearance: textfield; }
.campo-eta input::-webkit-outer-spin-button,
.campo-eta input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.azzera {
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--carta);
  font-weight: 700;
  font-size: 0.88rem;
}

#contatore {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-55);
  white-space: nowrap;
}

/* ── Le campate ───────────────────────────────────────────────── */

.campata {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.1rem, 4vw, 2.5rem) clamp(2rem, 5vh, 3rem);
  scroll-margin-top: 7rem;
}
/* tinta a tutta larghezza: ogni campata ha la propria luce, decisa */
.campata::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--acc) 22%, var(--carta)),
    color-mix(in srgb, var(--acc) 9%, var(--carta)));
}

.campata[data-cat="piccoli"] { --acc: var(--acc-piccoli); --acct: var(--acct-piccoli); }
.campata[data-cat="scuola"]  { --acc: var(--acc-scuola);  --acct: var(--acct-scuola); }
.campata[data-cat="sport"]   { --acc: var(--acc-sport);   --acct: var(--acct-sport); }
.campata[data-cat="oratori"] { --acc: var(--acc-oratori); --acct: var(--acct-oratori); }
.campata[data-cat="teatro"]  { --acc: var(--acc-teatro);  --acct: var(--acct-teatro); }

.campata-testa {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2rem);
}

.numerale {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(4rem, 9vw, 6.8rem);
  line-height: 0.9;
  color: var(--acc);
  flex: none;
}

.campata-nome h2 {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--acct);
}
.campata-nome h2::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 5px;
  margin-top: 0.5rem;
  border-radius: 3px;
  background: var(--acc);
}
.campata-nome p {
  margin: 0.6rem 0 0;
  color: var(--ink-55);
  font-weight: 500;
}

/* L'arcata della campata: si completa quando la sezione entra in vista */
.arcata {
  display: block;
  width: 100%;
  height: clamp(56px, 9vw, 110px);
  margin-top: 1.4rem;
}
.arcata path { vector-effect: non-scaling-stroke; stroke-width: 3; }
.arcata .arcata-curva { stroke: var(--acc); }

html.js .arcata .tratto {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s ease-out;
}
html.js .campata.vista .arcata .tratto { stroke-dashoffset: 0; }
html.js .campata.vista .arcata .arcata-curva { transition-delay: 0.18s; }

/* ── Le targhe appese ─────────────────────────────────────────── */

.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 2.6rem 2rem;
  padding-top: 2.5rem;
}

.targa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.5rem 1.3rem 1.15rem;
  background: color-mix(in srgb, var(--acc) 5%, var(--bianco));
  border: 1.5px solid color-mix(in srgb, var(--acc) 22%, var(--ink-14));
  border-radius: var(--raggio);
  box-shadow: inset 0 6px 0 var(--acc), var(--ombra);
  text-decoration: none;
  color: var(--ink);
  transform-origin: 50% -30px;
  transition: transform 0.5s var(--molla), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* il tirante e l'anello: la targa è appesa alla struttura */
.targa::before {
  content: "";
  position: absolute;
  top: -26px;
  left: 50%;
  width: 2px;
  height: 26px;
  margin-left: -1px;
  background: var(--ink-30);
}
.targa::after {
  content: "";
  position: absolute;
  top: -34px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -5.5px;
  border: 2px solid var(--ink-30);
  border-radius: 50%;
  background: var(--carta);
}

.targa:hover, .targa:focus-visible {
  transform: rotate(1.3deg);
  box-shadow: inset 0 6px 0 var(--acc), var(--ombra-su);
  border-color: var(--acc);
}
.targa:nth-child(even):hover, .targa:nth-child(even):focus-visible {
  transform: rotate(-1.1deg);
}

.targa-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acct);
}
.targa-cat::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--acc);
}

.targa h3 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.targa-ente {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-55);
}

.targa-meta {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.targa-meta span + span::before {
  content: "·";
  margin: 0 0.45rem;
  color: var(--ink-30);
}
.targa-luogo {
  margin: 0.1rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-55);
  font-weight: 500;
}

.targa-desc {
  margin: 0.45rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-55);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.targa-apri {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--acct);
}
.targa-apri::after { content: " →"; }

/* le targhe calano dai tiranti quando la campata entra in vista */
html.js .campata:not(.vista) .targa {
  opacity: 0;
  transform: translateY(-20px);
}
html.js .campata.vista .targa {
  transition:
    opacity 0.45s ease calc(0.35s + var(--i, 0) * 70ms),
    transform 0.55s var(--molla) calc(0.35s + var(--i, 0) * 70ms),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* campata senza risultati: l'arcata resta, le targhe scompaiono */
.campata.vuota { padding-bottom: 1.2rem; }
.campata.vuota .griglia { display: none; }
.campata-vuota-nota {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-55);
}

/* ── Stato vuoto globale ed errore ────────────────────────────── */

.vuoto {
  max-width: 30rem;
  margin: 3rem auto;
  padding: 2.2rem 1.6rem;
  text-align: center;
  background: var(--bianco);
  border: 1.5px solid var(--ink-14);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}
.vuoto-titolo {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
}
.vuoto p { margin: 0.3rem 0 1rem; color: var(--ink-55); }
.vuoto a { font-weight: 700; color: var(--ink); }

/* ── Chiusura ─────────────────────────────────────────────────── */

.piede {
  margin-top: clamp(3rem, 8vh, 5rem);
  padding: clamp(3rem, 7vh, 4.5rem) 1.4rem clamp(2.4rem, 5vh, 3.4rem);
  background: var(--ink);
  color: #eaf0fa;
  text-align: center;
}

.piede-ponte {
  width: min(420px, 80vw);
  height: auto;
  display: block;
  margin: 0 auto 1.6rem;
}
.piede-ponte path { stroke-width: 4; stroke-linecap: round; }
.piede-impalcato { stroke: #eaf0fa; }
.piede-pile { stroke: rgba(234, 240, 250, 0.45); stroke-width: 2.5; }

.piede-motto {
  margin: 0 0 1.6rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.piede p { margin: 0.35rem 0; }

.piede .piede-nota {
  font-size: 0.85rem;
  color: rgba(234, 240, 250, 0.65);
  max-width: 36rem;
  margin: 0.8rem auto 0;
}

.piede :focus-visible { outline-color: #eaf0fa; }

/* ── Scheda attività (bottom sheet) ───────────────────────────── */

.velo {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(13, 22, 44, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.velo.visibile { opacity: 1; }

.scheda {
  position: fixed;
  z-index: 80;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bianco);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(13, 22, 44, 0.25);
  padding: 0.6rem 1.3rem calc(1.4rem + env(safe-area-inset-bottom));
  transform: translateY(105%);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}
.scheda.aperta { transform: translateY(0); }

.scheda[data-cat="piccoli"] { --acc: var(--acc-piccoli); --acct: var(--acct-piccoli); }
.scheda[data-cat="scuola"]  { --acc: var(--acc-scuola);  --acct: var(--acct-scuola); }
.scheda[data-cat="sport"]   { --acc: var(--acc-sport);   --acct: var(--acct-sport); }
.scheda[data-cat="oratori"] { --acc: var(--acc-oratori); --acct: var(--acct-oratori); }
.scheda[data-cat="teatro"]  { --acc: var(--acc-teatro);  --acct: var(--acct-teatro); }

.scheda-maniglia {
  width: 44px;
  height: 5px;
  margin: 0.3rem auto 0.6rem;
  border-radius: 3px;
  background: var(--ink-14);
}

.scheda-chiudi {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--carta);
}
.scheda-chiudi:hover { background: var(--ink-14); }

.scheda-corpo { max-width: 34rem; margin: 0 auto; padding-top: 0.4rem; }

.scheda-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acct);
}
.scheda-cat::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--acc);
}

.scheda-corpo h2 {
  margin: 0.5rem 3rem 0.2rem 0;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
}

.scheda-ente { margin: 0 0 1rem; font-weight: 600; color: var(--ink-55); }

.scheda-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem 1.2rem;
  margin: 0 0 1rem;
  padding: 1rem;
  background: var(--carta);
  border-radius: 12px;
}
.scheda-meta div { min-width: 0; }
.scheda-meta dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.scheda-meta dd { margin: 0.15rem 0 0; font-weight: 600; }

.scheda-note {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  font-size: 0.92rem;
  border-left: 4px solid var(--acc);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--acc) 8%, white);
}

.scheda-desc { margin: 0 0 1.3rem; }

.scheda-contatti-titolo {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.contatto {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 58px;
  margin-bottom: 0.6rem;
  padding: 0.7rem 1rem;
  border: 1.5px solid color-mix(in srgb, var(--acc) 45%, white);
  border-radius: 12px;
  background: color-mix(in srgb, var(--acc) 10%, white);
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}
.contatto:hover { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, white); }
.contatto svg { flex: none; width: 22px; height: 22px; color: var(--acct); }
.contatto small { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-55); }
.contatto b { font-size: 1.05rem; letter-spacing: 0.01em; }

/* ── Desktop ──────────────────────────────────────────────────── */

@media (min-width: 720px) {
  .scheda {
    left: 50%;
    right: auto;
    bottom: 2rem;
    width: min(580px, 92vw);
    border-radius: 20px;
    transform: translate(-50%, calc(100% + 3rem));
  }
  .scheda.aperta { transform: translate(-50%, 0); }
  .scheda-maniglia { display: none; }
}

/* ── Mobile ───────────────────────────────────────────────────── */

@media (max-width: 639px) {
  .ponte svg.ponte-grande { display: none; }
  .ponte svg.ponte-piccolo { display: block; }
  .eroe-titolo { font-size: clamp(2.9rem, 14.5vw, 4.4rem); }
  .filtri { justify-content: flex-start; }
  .filtri-campi { width: 100%; justify-content: flex-start; }
  #contatore { margin-left: auto; }
  .campata { scroll-margin-top: 8.5rem; }
}

/* ── Movimento ridotto: tutto già costruito, fermo e completo ─── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .arcata .tratto,
  html.js .campata:not(.vista) .targa {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .targa, .scheda, .velo, .chip, .contatto { transition: none; }
  .targa:hover, .targa:focus-visible { transform: none; }
  .deco-sole { animation: none; }
}