/* ============================================================
   Sito pubblico Pro Loco — foglio di stile separato da style.css
   (quello resta per admin.php/collaborazione.php/suap.php: pannelli
   interni con un altro linguaggio visivo). Design token ripresi dal
   prototipo validato col cliente (sito proloco/portale-proloco-pergine.html):
   fondo carta con grana, filetti sottili invece di card con bordo+ombra,
   header fisso antracite, bottoni pillola, campi form solo sottolineati.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;800&family=Newsreader:ital,wght@0,300;0,400;0,600;1,300&family=JetBrains+Mono:wght@500;700&family=Pirata+One&display=swap');

:root{
  /* --carta/--carta-scura/--bosco/--bosco-chiaro qui sono solo il
     fallback: la pagina reale li sovrascrive con la palette scelta
     dall'Admin (vedi <style> iniettato da _header-pubblico.php). */
  --carta:#F7F2E6; --carta-scura:#EDE5D2; --inchiostro:#221F1C;
  --bosco:#123A25; --bosco-chiaro:#1A7E43; --grigino:#DCD6C8;
  --rosso:#C31B1F; --ocra:#EB950B; --bordeaux:#9A1A40; --pietra:#9B9B9B;
  --grigio:#6E6A62; --filo:rgba(34,31,28,.18);
  --disp:'Bricolage Grotesque',system-ui,sans-serif;
  --testo:'Newsreader',Georgia,serif;
  --mono:'JetBrains Mono',monospace;
  /* Solo per il titolo "Programma" nella pagina evento — carattere da
     festa, ispirato a festadelcanederlo.it/programma (che usa lo stesso
     Google Font per il titolo). Non è il carattere dei titoli del resto
     del sito (--disp): va usato con misura, solo dove serve un tocco di
     festa, non ovunque ci sia un <h2>. */
  --festivo:'Pirata One',var(--disp);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--carta); color:var(--inchiostro);
  font-family:var(--testo); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--disp); font-weight:800; line-height:1.1; margin:0 0 .5em; }
p{ margin:0 0 1em; }

.titolo-pagina{ font-size:clamp(32px,5vw,52px); margin-top:0; }
.intro{ font-size:19px; color:var(--grigio); max-width:640px; }
.wn{ max-width:780px; margin:0 auto; padding:0 20px; }
.blocco{ padding:96px 0; }
.blocco-stretto{ padding:64px 0; }

/* ------------------------------------------------------------
   Header fisso antracite — sempre opaco, mai trasparente
   ------------------------------------------------------------ */
.testata-pubblica{
  position:sticky; top:0; z-index:50;
  background:#2A2D31; color:#F2EFE6;
}
.testata-pubblica .in{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.testata-pubblica .marchio{ display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:800; font-size:18px; text-decoration:none; color:#fff; }
.testata-pubblica .marchio img{ height:34px; width:auto; display:block; }
.testata-pubblica .marchio i{ font-style:normal; font-weight:400; opacity:.7; margin-left:6px; font-size:14px; }
.testata-pubblica nav{ display:flex; gap:26px; align-items:center; }
.testata-pubblica nav a{
  text-decoration:none; color:rgba(255,255,255,.82); font-size:15px; font-weight:600;
  padding:6px 0; border-bottom:2px solid transparent;
}
.testata-pubblica nav a.qui, .testata-pubblica nav a:hover{ color:#fff; border-bottom-color:var(--ocra); }
.testata-pubblica .cta-area-soci{
  background:var(--ocra); color:#221F1C; padding:8px 18px; border-radius:100px;
  font-weight:700; text-decoration:none; font-size:14px;
}
.menu-mobile-apri{ display:none; background:none; border:none; color:#fff; cursor:pointer; padding:8px; line-height:0; }
.menu-mobile-apri .icona-chiudi{ display:none; }
.menu-mobile-apri.aperta .icona-hamburger{ display:none; }
.menu-mobile-apri.aperta .icona-chiudi{ display:block; }
@media (max-width:820px){
  .testata-pubblica nav{ display:none; }
  .menu-mobile-apri{ display:block; }
  /* Il pannello mobile era completamente rotto: il bottone "Menu" toglieva
     .aperta ma non esisteva nessuna regola che rimostrasse #navPubblica
     (restava display:none ereditato dalla riga sopra) — il menu su
     smartphone non si apriva mai. Pannello a tutta larghezza sotto
     l'header, non un dropdown stretto: più facile da toccare. */
  #navPubblica{
    display:none; position:fixed; top:64px; left:0; right:0; bottom:0;
    background:#2A2D31; flex-direction:column; align-items:stretch;
    padding:8px 20px 28px; gap:2px; overflow-y:auto; z-index:49;
  }
  #navPubblica.aperta{ display:flex; }
  .testata-pubblica nav a{ font-size:17px; padding:15px 4px; border-bottom:1px solid rgba(255,255,255,.12); }
  .testata-pubblica .cta-area-soci{ margin-top:16px; text-align:center; padding:13px 18px; }
}

/* ------------------------------------------------------------
   Bottoni, form, filetti — filosofia "niente card con bordo+ombra"
   ------------------------------------------------------------ */
.cta{
  display:inline-block; padding:12px 26px; border-radius:100px; font-weight:700;
  font-family:var(--disp); text-decoration:none; font-size:15px; border:1.5px solid var(--inchiostro);
  background:transparent; color:var(--inchiostro); cursor:pointer;
}
.cta-pieno{ background:var(--bosco); border-color:var(--bosco); color:#fff; }
.cta-pieno:hover{ background:var(--bosco-chiaro); border-color:var(--bosco-chiaro); }

.form-pubblico .campo{ margin-bottom:18px; }
.campo label{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--grigio); margin-bottom:6px; }
.campo input, .campo select, .campo textarea{
  width:100%; border:none; border-bottom:1.5px solid var(--filo); background:transparent;
  font-family:var(--testo); font-size:16px; padding:8px 2px; color:var(--inchiostro);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline:none; border-bottom-color:var(--rosso); }
.campo-checkbox{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--grigio); margin:14px 0 20px; }
.campo-checkbox input{ margin-top:3px; }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
@media (max-width:600px){ .form-grid-2{ grid-template-columns:1fr; } }
.form-grid-3{ display:grid; grid-template-columns:1fr 2fr 0.8fr; gap:0 20px; }
@media (max-width:600px){ .form-grid-3{ grid-template-columns:1fr; } }

.tab-soci{ display:flex; gap:24px; border-bottom:1px solid var(--filo); margin:28px 0 26px; }
.tab-soci-voce{ text-decoration:none; color:var(--grigio); font-weight:700; font-family:var(--disp); padding-bottom:10px; border-bottom:2px solid transparent; }
.tab-soci-voce.qui{ color:var(--inchiostro); border-bottom-color:var(--rosso); }

.avviso-inline{ background:var(--carta-scura); padding:10px 14px; border-radius:6px; font-size:14px; margin-bottom:16px; }
.avviso-errore{ background:#F6DDDD; color:var(--rosso); }

/* ------------------------------------------------------------
   Tabelle trasparenza — righe separate da filetti, non celle bordate
   ------------------------------------------------------------ */
.tabella{ width:100%; border-collapse:collapse; margin:18px 0; }
.tabella th, .tabella td{ text-align:left; padding:12px 8px; border-bottom:1px solid var(--filo); font-size:15px; }
.tabella th{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--grigio); font-weight:500; }

.stato{ display:inline-block; padding:3px 12px; border-radius:100px; font-size:12px; font-weight:700; font-family:var(--mono); }
.stato.s-ok{ background:#DCEFDF; color:var(--bosco); }
.stato.s-att{ background:#FBE7C6; color:#8a5c05; }
.stato.s-inf{ background:#F0DCE3; color:var(--bordeaux); }

/* ------------------------------------------------------------
   Direttivo — griglia card separate da filetti (non bordo+ombra)
   ------------------------------------------------------------ */
.griglia-direttivo{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--filo);
  border-top:1px solid var(--filo); border-bottom:1px solid var(--filo); margin:24px 0;
}
@media (max-width:820px){ .griglia-direttivo{ grid-template-columns:repeat(2,1fr); } }
.dir-card{ background:var(--carta); padding:26px 20px; text-align:center; }
.dir-card .ini{
  width:64px; height:64px; border-radius:50%; background:var(--carta-scura); color:var(--bosco);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-family:var(--disp); font-weight:800; font-size:20px;
  overflow:hidden;
}
.dir-card .ini img{ width:100%; height:100%; object-fit:cover; }
.dir-card b{ display:block; font-family:var(--disp); font-size:16px; }
.dir-card span{ display:block; color:var(--grigio); font-size:14px; margin-top:4px; }

/* ------------------------------------------------------------
   Apertura — hero a schermo pieno con l'evento più imminente
   ------------------------------------------------------------ */
.apertura{
  position:relative; min-height:min(88vh,780px); display:flex; align-items:flex-end;
  background:#1a1a1a; color:#fff; overflow:hidden; margin-top:-1px;
}
.apertura .scatto{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
.apertura .velo{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.15) 40%,rgba(15,13,10,.88) 100%);
}
.apertura .quando{ font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ocra); margin-bottom:12px; }
.apertura h1{ font-size:clamp(38px,7vw,84px); color:#fff; max-width:900px; margin-bottom:18px; }
.apertura .sotto{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.apertura .luogo{ font-size:16px; color:rgba(255,255,255,.85); margin:0; }
.apertura .oro{
  background:rgba(15,13,10,.55); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25); border-radius:100px; padding:14px 22px; text-align:center;
}
.apertura .oro b{ display:block; font-family:var(--disp); font-size:26px; color:var(--ocra); line-height:1; }
.apertura .oro span{ display:block; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.75); margin-top:4px; }

/* Badge del conto alla rovescia + pulsante, impilati in basso a destra —
   niente più testo/pulsante sovrapposti al centro della foto. */
.apertura-azioni{ position:absolute; z-index:1; right:32px; bottom:32px; display:flex; flex-direction:column; align-items:center; gap:14px; }

/* Variante senza testo sovrapposto alla foto (home, evento del giorno):
   solo il pulsante (che ha già un fondo bianco proprio, sempre leggibile
   qualunque sia la foto) e il badge del conto alla rovescia (idem, ha già
   un fondo scuro proprio) — niente titolo/luogo/data scritti a mano sopra
   l'immagine, illeggibili con foto chiare o affollate.
   Altezza legata alla LARGHEZZA (vw), non all'altezza dello schermo (vh):
   la sezione è a tutta larghezza, quindi è la larghezza a decidere quanto
   "quadrata" o "panoramica" resta la foto una volta ritagliata da
   object-fit:cover. Con vh, la stessa foto veniva ritagliata in modo
   completamente diverso tra un telefono (schermo alto, stretto: prima
   diventava quasi un ritaglio verticale, tagliando via metà foto ai lati)
   e un desktop (schermo largo, basso) — con vw il rapporto tra i due
   resta simile, il taglio è sempre "una fascia panoramica", solo più
   piccola o più grande. */
.apertura-semplice{ min-height:clamp(260px,58vw,520px); align-items:center; justify-content:center; }
.apertura-semplice .velo{ background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.4) 100%); }

/* ------------------------------------------------------------
   Nastro sponsor — loop CSS, pausa su hover
   ------------------------------------------------------------ */
.nastro-fascia{ background:var(--carta-scura); padding:28px 0 10px; overflow:hidden; }
.nastro{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.nastro-scorre{ display:flex; align-items:center; gap:64px; width:max-content; animation:scorriNastro 32s linear infinite; }
.nastro-fascia:hover .nastro-scorre{ animation-play-state:paused; }
.nastro-scorre span{ font-family:var(--disp); font-weight:600; font-size:20px; color:var(--pietra); white-space:nowrap; filter:grayscale(1); opacity:.7; transition:opacity .2s,filter .2s; }
.nastro-scorre span:hover{ opacity:1; filter:none; color:var(--inchiostro); }
.nastro-scorre img{ height:32px; filter:grayscale(1); opacity:.7; transition:opacity .2s,filter .2s; }
.nastro-scorre img:hover{ opacity:1; filter:none; }
@keyframes scorriNastro{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.nastro-eti{ text-align:center; font-family:var(--mono); font-size:12px; color:var(--grigio); padding:10px 0 28px; margin:0; background:var(--carta-scura); }
.nastro-eti a{ color:var(--rosso); text-decoration:none; border-bottom:1px solid currentColor; }

/* ------------------------------------------------------------
   Manifesto — riquadro grafico in home (cuore in trasparenza sullo sfondo)
   ------------------------------------------------------------ */
.manifesto-riquadro{ position:relative; background:var(--grigino); padding:88px 20px; text-align:center; overflow:hidden; }
.manifesto-riquadro .cuore-sfondo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(70vw,620px); height:auto; fill:rgba(18,58,37,.08); pointer-events:none;
}
.manifesto-riquadro .wn{ position:relative; max-width:720px; }
.manifesto-riquadro .eyebrow{ display:block; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--bosco); margin-bottom:18px; }
.manifesto-riquadro h2{ font-family:var(--disp); font-weight:800; font-size:clamp(30px,5.4vw,52px); line-height:1.1; color:var(--bosco); margin:0 0 26px; }
.manifesto-riquadro .manifesto-testo{ color:var(--inchiostro); opacity:.82; font-size:17px; line-height:1.65; margin:0 0 18px; }
.manifesto-riquadro .manifesto-testo:last-of-type{ margin-bottom:32px; }
.manifesto-riquadro .cta{ background:transparent; border-color:var(--bosco); color:var(--bosco); }
.manifesto-riquadro .cta:hover{ background:var(--bosco); border-color:var(--bosco); color:var(--carta); }

/* ------------------------------------------------------------
   Tesseramento — home: testo a sx, 3 card vantaggi a dx
   ------------------------------------------------------------ */
.tesseramento-griglia{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; }
@media (max-width:820px){ .tesseramento-griglia{ grid-template-columns:1fr; gap:32px; } }
.tesseramento-testo h2{ font-size:clamp(28px,4vw,40px); margin-bottom:16px; }
.tesseramento-card{ display:flex; flex-direction:column; gap:18px; }
.card-vantaggio{
  display:flex; gap:18px; align-items:flex-start; background:var(--carta-scura);
  border-radius:14px; padding:22px 24px;
}
.card-vantaggio .badge-icona{
  flex:none; width:44px; height:44px; border-radius:11px; background:var(--bosco); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.card-vantaggio h3{ font-family:var(--disp); font-weight:700; font-size:17px; margin:0 0 4px; }
.card-vantaggio p{ margin:0; font-size:15px; color:var(--grigio); }

/* ------------------------------------------------------------
   Manifesto — pagina: storia + galleria, poi 4 pilastri
   ------------------------------------------------------------ */
.storia-griglia{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-top:56px; }
@media (max-width:820px){ .storia-griglia{ grid-template-columns:1fr; gap:32px; } }
.storia-testo h2{ font-size:clamp(24px,3.6vw,32px); margin:10px 0 20px; }
.storia-galleria-segnaposto{
  background:var(--carta-scura); border:1.5px dashed var(--filo); border-radius:16px;
  min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--grigio); gap:10px; padding:24px;
}
.storia-galleria-segnaposto span{ font-size:34px; }
.storia-galleria-segnaposto p{ margin:0; font-size:14px; line-height:1.5; }

.griglia-pilastri{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:56px; }
@media (max-width:900px){ .griglia-pilastri{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .griglia-pilastri{ grid-template-columns:1fr; } }
.card-pilastro{
  background:var(--carta); border:1.5px solid var(--filo); border-radius:16px; padding:28px 22px; text-align:center;
}
.card-pilastro .badge-icona{
  margin:0 auto 16px; width:46px; height:46px; border-radius:12px; background:var(--bosco); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.card-pilastro h3{ font-family:var(--disp); font-weight:700; font-size:16.5px; line-height:1.3; margin:0 0 10px; }
.card-pilastro p{ margin:0; font-size:14.5px; color:var(--grigio); line-height:1.55; }

/* ------------------------------------------------------------
   Sentiero delle presenze — home. Tracciato SVG che segue un profilo di
   montagna (non una barra lineare), camminatore che avanza lungo il path
   con getPointAtLength(), due crinali generati proceduralmente sullo
   sfondo, tappe 25/50/75/100% che si accendono. Prato di montagna
   diurno con fiori (non più cielo notturno stellato): stessa identica
   meccanica SVG/JS di prima, cambiano solo i colori e il layer
   decorativo (.fiori al posto di .stelle) — coerente con l'idea di
   "sentiero in montagna" e con il resto del sito, ora più chiaro.
   ------------------------------------------------------------ */
.sentiero{ position:relative; background:var(--grigino); color:var(--inchiostro); padding:96px 0 72px; overflow:hidden; }
.sentiero .cielo{ position:absolute; inset:0; background:radial-gradient(120% 80% at 20% 0%,color-mix(in srgb, var(--carta) 70%, #fff),transparent 62%),linear-gradient(180deg,var(--carta) 0%,var(--grigino) 60%); }
.sentiero .fiori{
  position:absolute; inset:0;
  /* Fiori sparsi soprattutto nella fascia sopra al profilo delle
     montagne (16-42%): quelli più in basso finiscono in parte coperti
     dal riempimento dei crinali (voluto, danno profondità), quelli più
     in alto restano sempre visibili e leggibili come "prato fiorito". */
  background-image:
    radial-gradient(7px 7px at 6% 20%,#E8A0BE,transparent 70%), radial-gradient(6px 6px at 14% 34%,#F4C64F,transparent 70%),
    radial-gradient(6.5px 6.5px at 22% 16%,#fff,transparent 70%), radial-gradient(7px 7px at 30% 38%,#E8A0BE,transparent 70%),
    radial-gradient(6px 6px at 40% 22%,#F4C64F,transparent 70%), radial-gradient(6.5px 6.5px at 49% 40%,#fff,transparent 70%),
    radial-gradient(7px 7px at 58% 18%,#E8A0BE,transparent 70%), radial-gradient(6px 6px at 66% 36%,#F4C64F,transparent 70%),
    radial-gradient(6.5px 6.5px at 74% 24%,#fff,transparent 70%), radial-gradient(7px 7px at 84% 42%,#E8A0BE,transparent 70%),
    radial-gradient(6px 6px at 92% 20%,#F4C64F,transparent 70%), radial-gradient(6.5px 6.5px at 3% 44%,#fff,transparent 70%),
    radial-gradient(6px 6px at 15% 74%,#E8A0BE,transparent 70%), radial-gradient(6px 6px at 45% 80%,#F4C64F,transparent 70%),
    radial-gradient(6px 6px at 70% 76%,#fff,transparent 70%), radial-gradient(6px 6px at 90% 82%,#E8A0BE,transparent 70%);
}
.sentiero .in{ position:relative; max-width:1180px; margin:0 auto; padding:0 20px; }
.sent-testa{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:end; margin-bottom:26px; }
@media (max-width:860px){ .sent-testa{ grid-template-columns:1fr; gap:20px; } }
.sent-testa h2{ font-size:clamp(30px,5vw,52px); max-width:16ch; color:var(--bosco); }
.sent-eyebrow{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ocra); font-weight:700; display:block; margin-bottom:10px; }
.quota{ text-align:right; }
@media (max-width:860px){ .quota{ text-align:left; } }
.quota b{ display:block; font-family:var(--disp); font-size:clamp(44px,8vw,84px); font-weight:800; line-height:.86; letter-spacing:-.03em; color:var(--bosco); }
.quota u{ text-decoration:none; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ocra); display:block; margin-top:10px; }
.mappa{ position:relative; margin:10px -10px 0; }
.mappa svg{ width:100%; height:auto; display:block; overflow:visible; }
.traccia-sfondo{ fill:none; stroke:rgba(34,31,28,.18); stroke-width:3; stroke-dasharray:1 9; stroke-linecap:round; }
.traccia-fatta{ fill:none; stroke:url(#gradTraccia); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; transition:stroke-dashoffset 2.6s cubic-bezier(.22,.8,.24,1); }
.crinale{ fill:rgba(18,58,37,.10); stroke:rgba(18,58,37,.28); stroke-width:1.5; }
.crinale-2{ fill:rgba(18,58,37,.16); stroke:rgba(18,58,37,.20); stroke-width:1.5; }
.tappa circle{ fill:var(--carta); stroke:var(--bosco); stroke-width:2; transition:.4s; }
.tappa.presa circle{ fill:var(--ocra); stroke:var(--ocra); }
.tappa text{ font-family:var(--mono); font-size:11px; fill:var(--grigio); letter-spacing:.1em; }
.tappa.presa text{ fill:var(--inchiostro); font-weight:700; }
.camminatore{ transition:transform 2.6s cubic-bezier(.22,.8,.24,1); }
.camminatore .alone{ fill:rgba(235,149,11,.28); animation:respiroSentiero 2.6s ease-in-out infinite; }
@keyframes respiroSentiero{ 50%{ transform:scale(1.55); opacity:.4; } }
.etichetta-sentiero{
  position:absolute; transform:translate(-50%,-100%); background:var(--bosco); color:var(--carta);
  padding:9px 14px; border-radius:100px; font-family:var(--mono); font-size:12px; white-space:nowrap;
  box-shadow:0 10px 26px rgba(18,58,37,.28); transition:left 2.6s cubic-bezier(.22,.8,.24,1); pointer-events:none;
}
.etichetta-sentiero::after{ content:""; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; background:var(--bosco); transform:translateX(-50%) rotate(45deg); }
.tappe-eventi{ display:flex; gap:8px; flex-wrap:wrap; margin-top:44px; }
.tappe-eventi span{ display:flex; align-items:baseline; gap:10px; border:1px solid var(--filo); border-radius:100px; padding:11px 18px; background:var(--carta); color:var(--inchiostro); }
.tappe-eventi em{ font-style:normal; font-family:var(--disp); font-size:14px; font-weight:600; }
.tappe-eventi b{ font-family:var(--mono); font-size:13px; color:var(--ocra); }
.sent-nota{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:center; margin-top:44px; padding-top:26px; border-top:1px solid var(--filo); }
.sent-nota p{ margin:0; max-width:52ch; font-size:16px; color:var(--grigio); }

/* ------------------------------------------------------------
   Eventi — vetrina
   ------------------------------------------------------------ */
.griglia-eventi{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:28px; margin:28px 0; }
.evento-card{ position:relative; text-decoration:none; color:inherit; border-bottom:1px solid var(--filo); padding-bottom:20px; }
.evento-card .cover{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--carta-scura); border-radius:4px; margin-bottom:14px; }
.evento-card .tipo-tag{ position:absolute; top:10px; left:10px; background:rgba(15,13,10,.7); backdrop-filter:blur(4px); color:#fff; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; padding:4px 11px; border-radius:100px; }
.evento-card .luogo{ font-family:var(--mono); font-size:12px; text-transform:uppercase; color:var(--grigio); letter-spacing:.03em; }
.evento-card h3{ font-size:20px; margin:6px 0 4px; }
.evento-card .quando{ font-size:14px; color:var(--grigio); }

/* ------------------------------------------------------------
   Galleria foto (evento/progetto) + lightbox — niente librerie esterne
   ------------------------------------------------------------ */
.galleria-foto-sezione{ margin-top:48px; }
.galleria-foto-griglia{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-top:16px; }
.galleria-foto-thumb{ padding:0; border:none; background:none; cursor:pointer; aspect-ratio:1/1; border-radius:4px; overflow:hidden; }
.galleria-foto-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.galleria-foto-thumb:hover img{ transform:scale(1.06); }

.lightbox-overlay{ position:fixed; inset:0; background:rgba(15,13,10,.94); z-index:300; display:flex; align-items:center; justify-content:center; padding:40px; }
.lightbox-overlay.hidden{ display:none; }
.lightbox-overlay img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; }
.lightbox-chiudi{ position:absolute; top:20px; right:28px; background:none; border:none; color:#fff; font-size:34px; line-height:1; cursor:pointer; }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff; width:48px; height:48px; border-radius:50%; font-size:26px; cursor:pointer; }
.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
/* Niente margin-top: ogni sezione pubblica finisce già con un padding
   suo (96px per .blocco, 72px per .sentiero...) — un margine aggiuntivo
   qui sommava a quello, creando una fascia vuota color crema tra la fine
   della sezione e l'inizio del footer, ben visibile ora che anche il
   Sentiero è chiaro (prima, scuro, la differenza di colore mascherava
   il problema). */
.piede-pubblico{ background:var(--carta-scura); color:var(--inchiostro); padding:52px 0 0; border-top:1px solid var(--filo); }
.piede-pubblico .in{ max-width:1180px; margin:0 auto; padding:0 20px; }
.piede-pubblico a{ color:var(--inchiostro); text-decoration:none; }
.piede-pubblico a:hover{ color:var(--bosco-chiaro); }
.piede-pubblico .righe{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:30px; }
@media (max-width:760px){ .piede-pubblico .righe{ grid-template-columns:1fr; gap:28px; } }
.marchio-piede{ display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:800; font-size:17px; margin-bottom:12px; }
.marchio-piede img{ height:32px; width:auto; }
.piede-legale{ font-size:13.5px; color:var(--grigio); margin-bottom:14px; }
.piede-pubblico .colonna h4{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--grigio); margin-bottom:14px; font-weight:700; }
.piede-pubblico .colonna div{ margin-bottom:8px; font-size:14.5px; }
.piede-pubblico .social-riga{ display:flex; gap:10px; margin-top:4px; }
.piede-pubblico .social-riga a{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--filo);
  display:flex; align-items:center; justify-content:center;
}
.piede-pubblico .social-riga a:hover{ border-color:var(--bosco-chiaro); background:rgba(47,163,92,.08); }
.piede-pubblico .copy{ font-size:12.5px; font-family:var(--mono); color:var(--grigio); border-top:1px solid var(--filo); padding:18px 0; text-align:center; }

/* ------------------------------------------------------------
   Banner cookie — solo cookie tecnici, nessun consenso di terze
   parti da raccogliere, ma comunicazione esplicita per trasparenza.
   ------------------------------------------------------------ */
.banner-cookie{
  position:fixed; left:0; right:0; bottom:-200px; z-index:200;
  background:var(--inchiostro); color:var(--carta);
  transition:bottom .4s ease;
}
.banner-cookie.visibile{ bottom:0; }
.banner-cookie .in{
  max-width:1180px; margin:0 auto; padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.banner-cookie p{ margin:0; font-size:13px; line-height:1.6; max-width:760px; color:rgba(247,242,230,.85); }
.banner-cookie a{ color:var(--ocra); text-decoration:underline; }
.banner-cookie-azioni{ display:flex; align-items:center; gap:14px; flex:none; }
.banner-cookie-azioni img{ height:32px; width:auto; }
.banner-cookie-azioni button{
  background:var(--ocra); color:#221F1C; border:none; border-radius:100px;
  padding:10px 22px; font-family:var(--disp); font-weight:700; font-size:14px; cursor:pointer;
}
@media (max-width:640px){
  .banner-cookie .in{ flex-direction:column; align-items:flex-start; }
}

/* ------------------------------------------------------------
   Area soci — dashboard
   ------------------------------------------------------------ */
.riquadro-quota{ border:1.5px solid var(--filo); border-radius:10px; padding:24px; margin:24px 0; }
.riquadro-quota.pagata{ border-color:var(--bosco-chiaro); background:#F1F7F2; }
.riquadro-quota.non-pagata{ border-color:var(--ocra); background:#FBF3E4; }
.riquadro-quota .esito{ font-family:var(--disp); font-weight:800; font-size:20px; margin-bottom:4px; }

.hidden{ display:none !important; }
.as-sezione{ margin-top:32px; }

.griglia-pulsanti-soci{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:28px; }
.pulsante-soci{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:26px 12px; border:1.5px solid var(--filo); border-radius:12px; background:var(--carta);
  text-decoration:none; color:var(--inchiostro); font-family:var(--disp); font-weight:700; font-size:14px;
  cursor:pointer; transition:border-color .15s, transform .1s;
}
.pulsante-soci:hover{ border-color:var(--bosco); transform:translateY(-1px); }
.pulsante-soci-icona{ font-size:30px; }

.tessera-socio{
  display:flex; align-items:center; gap:20px; background:var(--bosco); color:var(--carta);
  border-radius:16px; padding:28px 30px; margin:28px 0 0;
  background-image:radial-gradient(circle at 90% 10%, rgba(235,149,11,.15), transparent 60%);
}
.tessera-socio img{ height:64px; width:auto; flex:none; }
.tessera-corpo{ flex:1; min-width:0; }
.tessera-eti{ display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ocra); margin-bottom:6px; }
.tessera-corpo b{ display:block; font-family:var(--disp); font-size:26px; }
.tessera-numero{ display:block; font-size:14px; opacity:.85; margin-top:3px; }
.tessera-valida{ flex:none; text-align:right; font-family:var(--mono); font-size:12px; line-height:1.5; opacity:.85; }
.tessera-valida.sospesa{ color:var(--ocra); opacity:1; font-weight:700; }
/* Tessera Fornitore — stesso markup della tessera Socio, solo grigia
   invece di verde, per distinguerle a colpo d'occhio nell'Area Soci. */
.tessera-socio.grigia{ background:#57534c; }
@media (max-width:520px){
  /* flex-wrap:wrap da solo non bastava: .tessera-corpo (flex:1) si
     restringeva pur di stare sulla stessa riga di logo e stato, e
     l'etichetta "Tessera associativa..." andava a capo su 4-5 righe.
     Colonna intera: logo, poi corpo, poi stato, ognuno a piena larghezza. */
  .tessera-socio{ flex-direction:column; align-items:flex-start; gap:14px; padding:24px 22px; }
  .tessera-valida{ text-align:left; }
}
.riga-turno{ border-bottom:1px solid var(--filo); padding:16px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.riga-turno .info b{ display:block; font-family:var(--disp); }
.riga-turno .info span{ color:var(--grigio); font-size:14px; }

/* Area Gestore (area-soci.php) — griglia delle cartelle assegnate */
.griglia-cartelle-gestore{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:16px 0; }
.cartella-gestore{ background:var(--carta-scura); border:1px solid var(--filo); border-radius:8px; padding:16px; text-align:left; cursor:pointer; font-family:var(--testo); color:var(--inchiostro); }
.cartella-gestore:hover{ border-color:var(--bosco-chiaro); }
.cartella-gestore .ic{ font-size:22px; }
.cartella-gestore b{ display:block; font-family:var(--disp); margin-top:6px; }

/* ------------------------------------------------------------
   Gallery evento — carosello a scorrimento automatico
   ------------------------------------------------------------ */
.carosello{ position:relative; border-radius:6px; overflow:hidden; background:var(--carta-scura); }
.carosello-viewport{ position:relative; aspect-ratio:16/9; }
.carosello-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease; }
.carosello-slide.attiva{ opacity:1; }
.carosello-puntini{ position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:8px; }
.carosello-puntino{ width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,.55); cursor:pointer; padding:0; }
.carosello-puntino.attivo{ background:#fff; }

/* ------------------------------------------------------------
   Selettore giorni — scheda evento
   ------------------------------------------------------------ */
.selettore-giorni{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin:24px 0; }
.giorno-card{ text-decoration:none; color:inherit; border:1.5px solid var(--filo); border-radius:8px; overflow:hidden; transition:border-color .15s; }
.giorno-card.attivo{ border-color:var(--rosso); }
.giorno-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.giorno-card-testo{ padding:12px 14px; }
.giorno-card-testo b{ display:block; font-family:var(--disp); text-transform:capitalize; font-size:15px; }
.giorno-card-testo span{ display:block; color:var(--grigio); font-size:13px; margin-top:2px; }

/* ------------------------------------------------------------
   Timeline programma a fasce orarie
   ------------------------------------------------------------ */
.timeline-programma{ margin-top:24px; }
.fascia-riga{ display:grid; grid-template-columns:80px 1fr; gap:20px; padding:18px 0; border-top:1px solid var(--filo); }
.fascia-riga:last-child{ border-bottom:1px solid var(--filo); }
.fascia-ora{ font-family:var(--mono); font-weight:700; font-size:15px; color:var(--rosso); }
.fascia-attivita{ margin-bottom:14px; }
.fascia-attivita:last-child{ margin-bottom:0; }
.fascia-attivita b{ font-family:var(--disp); font-size:16px; display:block; }
.fascia-attivita p{ margin:4px 0 0; font-size:15px; }
.fascia-attivita .hint-attivita{ color:var(--grigio); font-size:14px; font-style:italic; }

/* ------------------------------------------------------------
   Mappa pubblica — scheda evento
   ------------------------------------------------------------ */
.mappa-pubblica{ position:relative; margin-top:20px; border-radius:6px; overflow:hidden; }
.mappa-pubblica img{ width:100%; display:block; }
.mappa-pubblica-etichetta{
  position:absolute; transform:translate(-50%,-100%); background:var(--inchiostro); color:#fff;
  padding:4px 10px; border-radius:100px; font-family:var(--mono); font-size:11px; white-space:nowrap; pointer-events:none;
}

/* ------------------------------------------------------------
   Programma evento per orari — un'attività per riga, raggruppate per
   giorno. Ispirato a festadelcanederlo.it/programma: la riga chiusa
   mostra solo l'orario, il resto (titolo, luogo, descrizione, link) si
   scopre cliccandoci sopra — <details>/<summary> nativo, niente JS, una
   freccia ruota di 180° quando è aperto.
   ------------------------------------------------------------ */
.programma-titolo-sezione{ font-family:var(--festivo); font-weight:400; font-size:clamp(32px,5vw,48px); color:var(--bosco); margin-bottom:4px; }
.programma-giorno{ margin-top:32px; }
.programma-giorno:first-of-type{ margin-top:24px; }
.programma-giorno h3{ font-size:19px; margin-bottom:14px; }
.programma-lista{ display:flex; flex-direction:column; gap:2px; }
.programma-riga{ border-bottom:1px solid var(--filo); }
.programma-riga summary{
  display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none;
  padding:14px 26px 14px 0; position:relative; font-family:var(--mono); font-size:14px; color:var(--bosco); font-weight:700;
}
.programma-riga summary::-webkit-details-marker{ display:none; }
.programma-riga summary:hover{ color:var(--bosco-chiaro); }
.programma-riga summary::after{
  content:""; position:absolute; right:2px; top:50%; width:9px; height:9px; margin-top:-6px;
  border-right:1.5px solid var(--grigio); border-bottom:1.5px solid var(--grigio);
  transform:rotate(45deg); transition:transform .2s;
}
.programma-riga[open] summary::after{ transform:rotate(-135deg); }
.programma-dettaglio{ padding:0 0 20px; display:flex; flex-direction:column; gap:6px; }
.programma-titolo{ font-weight:700; font-size:17px; }
.programma-luogo{ font-family:var(--mono); font-size:12px; text-transform:uppercase; color:var(--grigio); letter-spacing:.03em; }
.programma-dettaglio p{ margin:4px 0 8px; color:var(--grigio); }

/* ------------------------------------------------------------
   Magazzino — scheda tecnica di un articolo (caratteristiche libere
   chiave/valore, quante l'Admin ne aggiunge)
   ------------------------------------------------------------ */
.magazzino-scheda{ margin-top:16px; border-top:1px solid var(--filo); }
.magazzino-scheda-riga{ display:flex; justify-content:space-between; gap:24px; padding:14px 0; border-bottom:1px solid var(--filo); }
.magazzino-scheda-chiave{ font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--grigio); flex:none; }
.magazzino-scheda-valore{ font-weight:700; text-align:right; }
@media (max-width:480px){ .magazzino-scheda-riga{ flex-direction:column; gap:4px; } .magazzino-scheda-valore{ text-align:left; } }

/* ------------------------------------------------------------
   Modulo popup — collaborazione esterna su una pagina evento
   ------------------------------------------------------------ */
.collabora-cta{ margin-top:48px; padding:32px; border-radius:12px; background:var(--carta-scura); text-align:center; }
.collabora-cta p{ max-width:520px; margin:0 auto 18px; }
.overlay-pubblico{ position:fixed; inset:0; background:rgba(34,31,28,.6); display:flex; align-items:center; justify-content:center; z-index:200; padding:16px; }
.overlay-pubblico.hidden{ display:none; }
.modale-pubblico{ background:var(--carta); border-radius:12px; padding:28px; max-width:560px; width:100%; max-height:90vh; overflow-y:auto; }
.modale-pubblico-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
.modale-pubblico-top h3{ margin:0; font-family:var(--disp); }
.modale-pubblico .chiudi-x{ cursor:pointer; background:none; border:none; font-size:24px; color:var(--grigio); line-height:1; padding:0 0 0 12px; }

/* ------------------------------------------------------------
   Restyling mobile — solo ingombri (padding/margini/dimensioni), il
   desktop sopra resta invariato. I valori desktop (padding:96px, gap
   grandi...) vengono da un design pensato per schermi larghi: su un
   telefono diventano solo tanto spazio vuoto da scorrere senza motivo,
   quindi qui si comprimono per lo spazio via via più stretto.
   ------------------------------------------------------------ */
@media (max-width:600px){
  .blocco{ padding:52px 0; }
  .blocco-stretto{ padding:40px 0; }
  .wn{ padding:0 18px; }
  .intro{ font-size:17px; }

  /* Header: "Pro Loco" + il sottotitolo lungo su una riga di 64px fissa
     andavano a capo e si accavallavano — altezza libera (min-height) e
     testo più piccolo, così il logo resta sempre leggibile. */
  .testata-pubblica .in{ height:auto; min-height:64px; padding:10px 18px; }
  .testata-pubblica .marchio{ font-size:15px; gap:8px; line-height:1.25; }
  .testata-pubblica .marchio img{ height:26px; }
  .testata-pubblica .marchio i{ font-size:10.5px; display:block; margin-left:0; }

  .apertura-azioni{ right:18px; bottom:18px; gap:10px; }
  .apertura .oro{ padding:11px 18px; }
  .apertura .oro b{ font-size:22px; }

  .manifesto-riquadro{ padding:56px 18px; }
  .manifesto-riquadro .manifesto-testo{ font-size:16px; }

  .tesseramento-card{ gap:14px; }
  .card-vantaggio{ padding:18px 20px; gap:14px; }

  .griglia-eventi{ gap:22px; margin:22px 0; }

  .storia-galleria-segnaposto{ min-height:200px; padding:20px; }
  .griglia-pilastri{ gap:14px; margin-top:40px; }
  .card-pilastro{ padding:22px 18px; }

  .sentiero{ padding:52px 0 40px; }
  .sent-nota{ margin-top:32px; padding-top:20px; }

  .collabora-cta{ margin-top:36px; padding:24px 20px; }
  .overlay-pubblico{ padding:10px; }
  .modale-pubblico{ padding:20px; border-radius:10px; }

  .galleria-foto-griglia{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
  .lightbox-overlay{ padding:16px; }
  .lightbox-chiudi{ top:10px; right:14px; font-size:30px; }
  .lightbox-nav{ width:40px; height:40px; font-size:22px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }

  .piede-pubblico{ padding-top:40px; }
  .piede-pubblico .righe{ gap:26px; padding-bottom:24px; }
}

/* Direttivo: 2 colonne fisse (dall'820px) restano strette su un telefono
   piccolo, nome/ruolo vanno a capo in modo scomodo — sotto i 420px passa
   a una colonna sola. */
@media (max-width:420px){ .griglia-direttivo{ grid-template-columns:1fr; } }