/* =====================================================================
   silastraordinaria.it — foglio di stile del sito pubblico
   Tevet Srl · 01/09/2026

   I colori NON si scrivono qui: arrivano da marchio/palette.css, che e' a
   sua volta generato da brand/genera-logo.py. Un hex scritto a mano dentro
   una regola e' un colore che nessuno aggiornera' mai.

   Contrasti gia' misurati (WCAG 2.1, vedi NOTA-DI-BRAND §4):
     notte/neve 17,14 · bianco/lupo 6,54 · lupo/neve 6,08 · pietra/neve 5,81
   VIETATI e non usati da nessuna parte: luna su neve (1,82), lupo su notte (2,82).
   L'oro (luna) compare SOLO come decorazione o su fondo scuro. Mai come testo
   su chiaro, mai come colore di un bottone.

   Niente rivelazioni allo scorrimento: con un salto d'ancora
   l'IntersectionObserver puo' non ricalcolare e la sezione resta invisibile
   per sempre. Il contenuto qui e' visibile dal primo frame, punto.
   ===================================================================== */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--sila-neve);
  color: var(--sila-notte);
  font-family: var(--sila-font-testo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 { font-family: var(--sila-font-logo); font-weight: 580; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(34px, 6vw, 62px); letter-spacing: -.015em; }
h2 { font-size: clamp(26px, 3.6vw, 38px); }
h3 { font-size: 21px; font-weight: 600; }

a { color: inherit; }

.contenitore { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.sezione { padding: 72px 0; }
.sezione + .sezione { padding-top: 0; }
.occhiello {
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sila-pietra); margin: 0 0 10px;
}
.guida { color: var(--sila-pietra); max-width: 60ch; }
.motto {
  font-family: var(--sila-font-logo); font-style: italic; font-weight: 500;
  font-size: clamp(16px, 2.2vw, 20px); color: var(--sila-lupo); margin: 12px 0 0; max-width: 46ch;
}

/* ------------------------------------------------------------ testata */
.testata {
  position: sticky; top: 0; z-index: 10;
  background: var(--sila-neve);
  border-bottom: 1px solid #e8dee2;
}
.testata .contenitore {
  display: flex; align-items: center; justify-content: space-between;
  /* flex-wrap non e' cosmesi: senza, sotto i 400 px il logo piu' le voci non
     ci stanno, la barra va in scroll interno e spinge fuori TUTTA la pagina.
     Misurato con scripts/collauda-landing.js, non dedotto. */
  flex-wrap: wrap; gap: 10px 20px;
  padding-top: 14px; padding-bottom: 14px;
}
.testata a.marchio { display: flex; line-height: 0; }
/* Il marchio si dimensiona per ALTEZZA, non per larghezza: col blocchetto su due
   righe la proporzione e' passata da 5,16:1 a 2,59:1, e una larghezza fissa lo
   farebbe crescere in altezza fino a sfondare la testata. */
.testata img { height: 54px; width: auto; }
.menu { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 15.5px; }
.menu a { text-decoration: none; color: var(--sila-pietra); }
.menu a:hover, .menu a:focus-visible { color: var(--sila-lupo); }

/* ------------------------------------------------------------ bottoni */
/* L'azione e' MAGENTA, non oro: bianco su lupo sta a 6,54, oro su crema a 1,82.
   Un bottone d'acquisto illeggibile e' un biglietto non venduto. */
.bottone {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--sila-lupo); color: #fff;
  border: 2px solid var(--sila-lupo); border-radius: 999px;
  padding: 14px 30px; font: 600 16px/1 var(--sila-font-testo);
  text-decoration: none; cursor: pointer;
}
.bottone:hover, .bottone:focus-visible { background: #852c75; border-color: #852c75; }
.bottone[disabled] { opacity: .45; cursor: not-allowed; }
.bottone.vuoto { background: transparent; color: var(--sila-lupo); }
.bottone.vuoto:hover, .bottone.vuoto:focus-visible { background: var(--sila-lupo); color: #fff; }
:focus-visible { outline: 3px solid var(--sila-luna); outline-offset: 2px; }

/* ------------------------------------------------------------ apertura */
.apertura { background: var(--sila-lupo); color: var(--sila-neve); padding: 84px 0 92px; }
.apertura h1 { max-width: 16ch; }
.apertura .sopra {
  display: inline-block; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  /* oro su magenta: 3,33 - sotto la soglia del testo corrente, sopra quella del
     testo grande. Qui e' un'etichetta da 13 px, quindi NON e' oro: e' neve. */
  color: var(--sila-neve); opacity: .85; margin-bottom: 18px;
}
.apertura p { font-size: 19px; max-width: 52ch; margin: 20px 0 32px; opacity: .93; }
.apertura .bottone { background: var(--sila-neve); color: var(--sila-lupo); border-color: var(--sila-neve); }
.apertura .bottone:hover, .apertura .bottone:focus-visible { background: #fff; border-color: #fff; }
.filetto { height: 6px; background: var(--sila-luna); }

/* ------------------------------------------------------------- schede */
.griglia { display: grid; gap: 22px; }
.griglia.tre { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.scheda {
  border: 1px solid #e8dee2; border-radius: 16px; background: #fffdfb;
  padding: 26px; display: flex; flex-direction: column; gap: 10px;
}
.scheda .numero {
  font-family: var(--sila-font-logo); font-size: 30px; color: var(--sila-lupo); line-height: 1;
}

/* ---------------------------------------------------------- calendario */
.corsa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  border: 1px solid #e8dee2; border-radius: 16px; background: #fffdfb;
  padding: 22px 26px;
}
.corsa .quando { min-width: 108px; }
.corsa .giorno { font-family: var(--sila-font-logo); font-size: 34px; line-height: 1; }
.corsa .mese { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sila-pietra); }
.corsa .cosa { flex: 1 1 240px; }
.corsa .cosa strong { font-family: var(--sila-font-logo); font-size: 21px; font-weight: 600; display: block; }
.corsa .cosa span { color: var(--sila-pietra); font-size: 15px; }
.corsa .prezzo { font-family: var(--sila-font-logo); font-size: 26px; font-weight: 600; }
.corsa .prezzo small { display: block; font: 400 13px/1.3 var(--sila-font-testo); color: var(--sila-pietra); }
.vuoto-calendario {
  border: 1px dashed #d9ccd2; border-radius: 16px; padding: 26px;
  color: var(--sila-pietra); background: transparent;
}

/* ------------------------------------------------------- chi fa che cosa */
/* Non e' una sezione decorativa: il Codice del Turismo distingue chi organizza
   da chi vende, e dirlo in chiaro e' parte della tutela. Vedi vendita-e-broker.md. */
.ruoli { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ruolo { border-left: 3px solid var(--sila-luna); padding-left: 16px; }
.ruolo b { display: block; font-family: var(--sila-font-logo); font-size: 18px; }
.ruolo span { color: var(--sila-pietra); font-size: 15px; }

/* -------------------------------------------------------------- scelta */
.scelta { border: 1px solid #e8dee2; border-radius: 18px; background: #fffdfb; overflow: hidden; }
.scelta .testa { background: var(--sila-lupo); color: var(--sila-neve); padding: 18px 26px;
                 display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; align-items: baseline; }
.scelta .testa .data { font-family: var(--sila-font-logo); font-size: 20px; }
.scelta .corpo { padding: 12px 26px 26px; }
.fascia { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
          padding: 18px 0; border-bottom: 1px solid #efe6e9; }
.fascia:last-of-type { border-bottom: 0; }
.fascia .nome { flex: 1 1 200px; }
.fascia .nome b { font-weight: 600; }
.fascia .nome span { display: block; color: var(--sila-pietra); font-size: 14px; }
.fascia .tariffa { font-family: var(--sila-font-logo); font-size: 20px; font-weight: 600; min-width: 78px; text-align: right; }
.contatore { display: flex; align-items: center; gap: 6px; }
.contatore button {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--sila-lupo); background: transparent; color: var(--sila-lupo);
  font: 600 19px/1 var(--sila-font-testo);
}
.contatore button:hover:not([disabled]) { background: var(--sila-lupo); color: #fff; }
.contatore button[disabled] { opacity: .3; cursor: not-allowed; }
.contatore output { min-width: 30px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.totale { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
          gap: 14px; padding-top: 22px; margin-top: 6px; border-top: 2px solid var(--sila-notte); }
.totale .cifra { font-family: var(--sila-font-logo); font-size: 34px; font-weight: 600; }

/* --------------------------------------------------------------- avvisi */
.avviso { border-radius: 12px; padding: 14px 18px; font-size: 15px; }
.avviso.scuro { background: var(--sila-notte); color: var(--sila-neve); }
/* l'oro come TESTO vive solo qui, su notte: 9,40 */
.avviso.scuro b { color: var(--sila-luna); }
.avviso.chiaro { background: #f3e9ee; color: #6b2440; }

.pratiche dt { font-weight: 600; margin-top: 18px; }
.pratiche dd { margin: 4px 0 0; color: var(--sila-pietra); }

/* --------------------------------------------------------------- piede */
.piede { background: var(--sila-notte); color: var(--sila-neve); padding: 54px 0 40px; margin-top: 80px; }
.piede a { color: var(--sila-neve); }
.piede .righe { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.piede img { height: 62px; width: auto; }
.piede small { display: block; color: #b9a9b4; font-size: 13.5px; line-height: 1.6; }
.piede .legale { margin-top: 36px; padding-top: 20px; border-top: 1px solid #33242f; }

/* Loghi dei due enti dell'evento: ATFSC organizza, ARSAC contribuisce come
   ente pubblico. Nel frammento del piede perche' si propaghi a tutte le
   pagine da un solo file (vedi sito/comuni/piede.html). */
.piede .partner { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--sila-pietra); }
.piede .partner-etichetta {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sila-luna); margin: 0 0 16px; font-weight: 600;
}
.loghi-partner { display: flex; flex-wrap: wrap; gap: 20px 36px; align-items: flex-start; margin: 0; padding: 0; }
.logo-partner { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; max-width: 340px; }
.logo-partner img { height: 80px; width: auto; object-fit: contain; flex: 0 0 auto; }
.logo-partner figcaption { font-size: 13.5px; line-height: 1.5; color: var(--sila-neve); margin: 0; }
.logo-partner figcaption b { font-weight: 600; }

@media (max-width: 560px) {
  .sezione { padding: 52px 0; }
  .apertura { padding: 58px 0 64px; }
  .testata img { height: 44px; }
  .logo-partner img { height: 72px; }
}

/* ------------------------------------------------------- nastro d'avviso */
/* Era scritto inline in due pagine: con sette pagine e un frammento comune,
   inline significava sette copie della stessa riga. */
.avviso.nastro { margin: 0; border-radius: 0; text-align: center; }

/* --------------------------------------------- voce di colonna nel piede */
.voce-piede {
  display: block; margin-bottom: 8px;
  font-family: var(--sila-font-logo); font-size: 15.5px; font-weight: 600;
  color: var(--sila-neve);
}

/* ----------------------------------------------- pagina corrente nel menu */
/* La marca sito.js, non l'HTML: la stessa testata sta in sette pagine. */
.menu a[aria-current="page"] { color: var(--sila-lupo); font-weight: 600; }

/* -------------------------------------------- pagine di testo lungo (prosa) */
/* La misura si mette ai FIGLI, non al contenitore: stringere `.contenitore`
   centrerebbe la colonna di testo e la disallineerebbe dai titoli di sezione
   del resto del sito, che partono tutti dal margine sinistro. */
.prosa > * { max-width: 72ch; }
.prosa > .tabella, .prosa > .avviso { max-width: none; }
.prosa h2 { margin-top: 48px; }
.prosa > h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: 30px; font-size: 19.5px; }
.prosa p, .prosa ul, .prosa ol { margin: 12px 0 0; }
.prosa li { margin-top: 7px; }
.prosa li:first-child { margin-top: 0; }
.prosa a { color: var(--sila-lupo); text-underline-offset: 3px; }
.prosa code {
  font-size: 14.5px; background: #f3e9ee; color: #6b2440;
  padding: 1px 6px; border-radius: 5px;
}

/* ------------------------------------------------------------- da definire */
/* Un buco VERO, non un segnaposto di comodo: deve essere impossibile
   pubblicare la pagina senza accorgersene. Per questo e' un riquadro
   tratteggiato magenta e non un commento HTML - un commento lo vede solo chi
   apre il sorgente, e nessuno apre il sorgente prima di un lancio. */
.dadefinire {
  border: 2px dashed var(--sila-lupo); border-radius: 12px;
  background: #fbf1f7; color: #5d2352;
  padding: 16px 18px; font-size: 15.5px;
}
.dadefinire b { color: #4a1b41; }

/* ------------------------------------------------------------------ tabelle */
.tabella { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15.5px; }
.tabella th, .tabella td {
  text-align: left; vertical-align: top;
  padding: 12px 14px; border-bottom: 1px solid #e8dee2;
}
.tabella th { font-weight: 600; background: #f6eef2; }

/* Sotto i 700 px una tabella a tre colonne non si stringe: si taglia, e il
   taglio non produce overflow di PAGINA, quindi passa inosservato. Qui la
   tabella diventa un elenco di schede e l'intestazione di colonna torna come
   etichetta di ogni cella (attributo data-etichetta nell'HTML). */
@media (max-width: 700px) {
  .tabella thead { display: none; }
  .tabella tr { display: block; padding: 14px 0; border-bottom: 2px solid #e8dee2; }
  .tabella td { display: block; border: 0; padding: 5px 0; }
  .tabella td::before {
    content: attr(data-etichetta); display: block;
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--sila-pietra);
  }
}

/* ---------------------------------------------------------------- postilla */
/* Il testo «in piccolo» che precisa una promessa fatta poco sopra (per ora:
   la trazione del treno). Piccolo si', illeggibile no - qui sotto ci sono i
   contrasti misurati, non stimati:
     pietra su neve            5,81   (postilla su fondo chiaro)
     notte su neve            17,14   (i grassetti dentro la postilla)
     neve su lupo a 0,88       5,10   (postilla dentro l'apertura magenta)
   A 14 px la soglia WCAG e' 4,5. L'opacita' 0,80 dava 4,47 - SOTTO - e 0,82
   dava 4,62, troppo vicino al limite per fidarsi di un antialiasing: 0,88. */
.postilla {
  font-size: 14px; line-height: 1.55;
  color: var(--sila-pietra); max-width: 62ch; margin: 16px 0 0;
}
.postilla b { color: var(--sila-notte); font-weight: 600; }
.apertura .postilla { color: var(--sila-neve); opacity: .88; max-width: 54ch; }
.apertura .postilla b { color: var(--sila-neve); }

/* =====================================================================
   IMPIANTO «VIVO» — 01/09/2026
   Richiesta: piu' colorato e dinamico, effetto WOW, ispirandosi a
   noleggiare.it e lastminute.com. Con i NOSTRI colori, non i loro.

   Cosa si prende da noleggiare.it (misurato sui suoi screenshot in
   ispirazione/, non a memoria): il colore di marca a TUTTA PAGINA, un
   TAGLIO DIAGONALE netto fra due campiture, titoli molto grandi, bottoni
   bianchi in negativo sul colore pieno. Cio' che NON si prende: il suo
   rosa e il suo carattere.

   LA REGOLA CHE TIENE INSIEME TUTTO: il testo non sta MAI sopra una
   fotografia. Sta sopra una campitura piena (lupo, notte, neve) che
   confina con la fotografia. Cosi' il contrasto e' quello gia' misurato
   (bianco su lupo 6,54 · notte su neve 17,14) e non dipende da quanto e'
   chiara la foto di turno - che e' il modo piu' comune di rendere
   illeggibile un eroe fotografico.
   ===================================================================== */

/* ------------------------------------------------- apertura fotografica */
.apertura.foto { padding: 0; overflow: hidden; position: relative; }
.apertura.foto .dueparti { display: grid; grid-template-columns: 1fr; }
.apertura.foto .parola { padding: 64px 0 72px; position: relative; z-index: 2; }
.apertura.foto .scatto {
  position: relative; min-height: 260px;
  background-size: cover; background-position: center;
}
/* Il taglio diagonale. Su schermo stretto e' orizzontale (la foto sta sopra
   e il magenta sotto), da 900 px in su diventa verticale come su noleggiare. */
.apertura.foto .scatto::before {
  content: ''; position: absolute; inset: -1px auto -1px -1px; width: 100%;
  background: var(--sila-lupo);
  clip-path: polygon(0 0, 100% 0, 0 46%);
}
@media (min-width: 900px) {
  .apertura.foto .dueparti { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
  .apertura.foto .parola { padding: 96px 0 104px; }
  .apertura.foto .scatto { min-height: 520px; }
  .apertura.foto .scatto::before {
    inset: -1px -1px -1px -2px; width: 42%;
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }
}
/* La colonna di testo non usa .contenitore centrato: dentro l'eroe il testo
   deve restare agganciato al margine sinistro della pagina, altrimenti a
   1440 px galleggia in mezzo al magenta. */
.apertura.foto .parola .dentro { max-width: 620px; margin-left: auto; padding: 0 24px; }
@media (min-width: 1128px) { .apertura.foto .parola .dentro { padding-right: 56px; } }

.apertura.foto h1 { font-size: clamp(38px, 6.4vw, 70px); max-width: 15ch; }
.apertura.foto .sopra {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px; padding: 7px 16px 7px 12px;
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sila-neve); opacity: 1; margin-bottom: 22px;
}
/* Il pallino che pulsa e' l'unica animazione dell'eroe: dice «in vendita
   adesso» senza aggiungere una parola. Si spegne con prefers-reduced-motion
   (regola globale in cima al foglio). */
.apertura.foto .sopra::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sila-luna); animation: battito 2.4s ease-in-out infinite;
}
@keyframes battito { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.72); } }

/* --------------------------------------------------------- cartellino */
.cartellino {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 26px; font-family: var(--sila-font-logo);
}
.cartellino .cifra { font-size: 46px; font-weight: 600; line-height: 1; }
.cartellino .nota { font: 400 15px/1.4 var(--sila-font-testo); opacity: .9; }

/* ------------------------------------------------------------- striscia */
/* Banda a tutta larghezza fra due sezioni. Serve a spezzare il crema: sette
   pagine tutte color panna erano il vero motivo per cui il sito sembrava
   spento, piu' della mancanza di fotografie. */
.striscia { background: var(--sila-notte); color: var(--sila-neve); padding: 40px 0; }
.striscia.oro { background: var(--sila-luna); color: var(--sila-notte); }
.striscia .fatti { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.striscia .fatto b {
  display: block; font-family: var(--sila-font-logo); font-size: 36px; line-height: 1;
  color: var(--sila-luna);
}
.striscia.oro .fatto b { color: var(--sila-notte); }
.striscia .fatto span { display: block; margin-top: 7px; font-size: 14.5px; opacity: .88; }

/* --------------------------------------------------------- schede evento */
/* La scheda con la fotografia. Il colore della targhetta dice il TIPO di
   evento a colpo d'occhio: sagra=faggeta, natura=bosco, inverno=lago,
   nostro=lupo. I quattro sono tutti sopra 4,5 con il bianco (vedi
   brand/genera-logo.py, dove sono misurati). */
.carte { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); }
.carta {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; background: var(--sila-bianco);
  border: 1px solid #ebe1e6;
  box-shadow: 0 1px 2px rgba(26,17,25,.05);
  transition: transform .22s ease, box-shadow .22s ease;
}
.carta:hover, .carta:focus-within { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(26,17,25,.13); }
.carta .figura { position: relative; aspect-ratio: 3 / 2; background: #e9e0e4; overflow: hidden; }
.carta .figura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carta .targhetta {
  position: absolute; left: 14px; top: 14px;
  background: var(--sila-lupo); color: #fff;
  border-radius: 999px; padding: 6px 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.carta .targhetta.sagra   { background: var(--sila-faggeta); }
.carta .targhetta.natura  { background: var(--sila-bosco); }
.carta .targhetta.inverno { background: var(--sila-lago); }
.carta .targhetta.nostro  { background: var(--sila-lupo); }
/* Il giorno in negativo sull'angolo: si legge prima del titolo, ed e' la cosa
   che si cerca davvero in un calendario. */
.carta .quando {
  position: absolute; right: 14px; bottom: 14px;
  background: var(--sila-notte); color: var(--sila-neve);
  border-radius: 12px; padding: 8px 12px; text-align: center; line-height: 1.05;
}
.carta .quando b { display: block; font-family: var(--sila-font-logo); font-size: 25px; }
.carta .quando span { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sila-luna); }
.carta .testo { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.carta .testo h3 { font-size: 20px; }
.carta .dove { font-size: 14px; color: var(--sila-pietra); }
.carta .dove b { color: var(--sila-notte); font-weight: 600; }
.carta .testo p { margin: 2px 0 0; font-size: 15px; color: var(--sila-pietra); }
.carta .coda { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.carta .coda a { font-weight: 600; color: var(--sila-lupo); text-underline-offset: 3px; }

/* La riga che dice da dove viene la data. Su un calendario di eventi altrui
   NON e' una nota a pie' di pagina: e' la differenza fra un calendario e un
   elenco di cose sentite dire. */
.fonte-dato { font-size: 12.5px; color: var(--sila-pietra); }
.fonte-dato b { font-weight: 600; }
.fonte-dato.incerto { color: #8A4A12; }

/* ------------------------------------------------------- riquadri a colori */
.tessere { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tessera { border-radius: 18px; padding: 26px 24px; color: #fff; }
.tessera h3 { color: #fff; font-size: 22px; }
.tessera p { margin: 8px 0 0; font-size: 15px; opacity: .93; }
.tessera.a { background: var(--sila-lupo); }
.tessera.b { background: var(--sila-faggeta); }
.tessera.c { background: var(--sila-bosco); }
.tessera.d { background: var(--sila-lago); }

/* ------------------------------------------------------------ fotografia */
.foto-larga { position: relative; margin: 0; }
.foto-larga img { width: 100%; display: block; aspect-ratio: 21 / 9; object-fit: cover; }
.foto-larga figcaption {
  position: absolute; right: 0; bottom: 0;
  background: rgba(26,17,25,.78); color: #D9CFD6;
  font-size: 11.5px; padding: 5px 10px; border-radius: 8px 0 0 0;
}
.foto-larga figcaption a { color: #E7DDE3; }

/* Il crema puro su tutta la pagina era la ragione dell'effetto «spento».
   Una sezione su due prende un fondo appena diverso. */
.sezione.tinta { background: #F4ECF1; padding-top: 72px; }

/* ------------------------------------------------- la scelta del posto
   La mappa e' una griglia a SEI colonne per carrozza, come il treno vero:
   1 e 2 a sinistra, 3 e 4 il corridoio (restano vuote), 5 e 6 a destra.
   Le colonne del corridoio non si disegnano: si lasciano larghe, ed e' quel
   vuoto a far leggere il treno come un treno invece che come un tabellone. */
.scelta-fasce { display: grid; gap: 12px; max-width: 560px; margin-top: 20px; }
.fascia-riga {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--sila-bianco); border: 1px solid #E2D6DE; border-radius: 14px; padding: 14px 18px;
}
.contatore-fascia { display: flex; align-items: center; gap: 6px; }
.contatore-fascia button {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--sila-lupo); background: var(--sila-bianco);
  color: var(--sila-lupo); font: 700 20px/1 var(--sila-font-testo);
}
.contatore-fascia button:hover { background: var(--sila-lupo); color: #fff; }
.contatore-fascia span { min-width: 28px; text-align: center; font: 700 18px/1 var(--sila-font-testo); }
.richiamo { color: var(--sila-faggeta); font-weight: 600; }

.legenda-posti { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; padding: 0; margin: 20px 0 26px; font-size: 14px; }
.legenda-posti li { display: flex; align-items: center; gap: 8px; }
.tacca { width: 18px; height: 18px; border-radius: 5px; display: inline-block; }
.tacca.libero { background: var(--sila-bosco); }
.tacca.scelto { background: var(--sila-luna); }
.tacca.occupato { background: #C9BFC6; }
/* Le due tacche del disegno dei gruppi: la spalliera e' la barra scura che
   si vede sulla mappa, il tratteggio e' il posto che non ha nessuno di
   fronte. Stessa forma che hanno sul treno disegnato, in piccolo. */
.tacca.spalliera { background: var(--sila-notte); height: 6px; border-radius: 3px; align-self: center; }
.tacca.spaiato { background: none; border: 1px dashed #B3A6AF; }
.tacca.sportello { background: var(--sila-bianco); border: 2px dashed #B3A6AF; }

.mappa-treno { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 12px; }
.carrozza {
  flex: 0 0 auto; background: var(--sila-bianco);
  border: 1px solid #E2D6DE; border-radius: 18px; padding: 16px 18px 22px;
}
.carrozza h3 { margin: 0 0 14px; font-size: 17px; }
.griglia-carrozza { display: grid; grid-template-columns: repeat(6, 30px); grid-auto-rows: 32px; gap: 4px; }
.posto {
  border: 0; border-radius: 6px; cursor: pointer;
  background: var(--sila-bosco); color: #fff;
  font: 600 9px/1 var(--sila-font-testo); padding: 0;
  /* I sedili stanno sopra il riquadro del gruppo e non riempiono tutta la
     riga: i quattro pixel che restano sopra e sotto sono la striscia in cui
     si vede la spalliera, senza che le due cose si accavallino. */
  position: relative; z-index: 1; height: 24px; align-self: center;
}
.posto:hover:not([disabled]) { background: #2c7d54; }
.posto.scelto { background: var(--sila-luna); color: var(--sila-notte); }
.posto.occupato { background: #C9BFC6; color: #6F6570; cursor: not-allowed; }
.posto.sportello { background: var(--sila-bianco); color: #8A7D87; border: 2px dashed #B3A6AF; cursor: not-allowed; }

/* CHI SI GUARDA IN FACCIA. I gruppi li calcola posti.js (calcolaGruppi) dal
   campo f dei dati, mai un elenco scritto qui. Il riquadro e' il divanetto
   visto dall'alto: tiene insieme le due file che si guardano, e le due
   barre scure sui bordi esterni sono le spalliere. Lo spazio dentro il
   riquadro e' quello per le gambe; dove due gruppi si toccano le due
   spalliere si affiancano e si legge che si e' seduti di spalle. Senza il
   riquadro il disegno inganna: due file attaccate sembrano un gruppo da
   quattro proprio mentre sono schiena contro schiena. */
.riquadro-gruppo {
  z-index: 0; border-radius: 10px;
  background: rgba(31, 92, 60, .11);
  position: relative;
}
.riquadro-gruppo::before, .riquadro-gruppo::after {
  content: ''; position: absolute; left: 0; right: 0; height: 4px;
  background: var(--sila-notte); border-radius: 3px;
}
.riquadro-gruppo::before { top: 0; }
.riquadro-gruppo::after { bottom: 0; }

/* Chi non ha nessuno di fronte: una sola fila. Da che parte guardi la
   pianta del vettore non lo dice, quindi la spalliera non si disegna e il
   riquadro resta tratteggiato invece di promettere un verso che non
   sappiamo. */
.riquadro-gruppo.gruppo-spaiato { background: none; border: 1px dashed #B3A6AF; }
.riquadro-gruppo.gruppo-spaiato::before, .riquadro-gruppo.gruppo-spaiato::after { display: none; }

/* Passare col mouse o col fuoco su un posto accende tutto il suo gruppo:
   si vede subito con chi si e' seduti di fronte, non solo il posto sotto
   al puntatore. */
.posto.gruppo-evidenziato { box-shadow: inset 0 0 0 2px var(--sila-luna); }
.riquadro-gruppo.gruppo-evidenziato { background: rgba(31, 92, 60, .20); }
.riquadro-gruppo.gruppo-spaiato.gruppo-evidenziato { background: rgba(31, 92, 60, .12); }

/* Il totale insegue la pagina: la mappa e' alta piu' di uno schermo e il
   conto, in fondo, si perde proprio mentre si sceglie. */
.barra-scelta {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--sila-notte); color: var(--sila-neve); padding: 14px 0;
}
.barra-dentro { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.barra-dentro .guida { display: block; color: #C6B9C3; }
.barra-destra { display: flex; align-items: center; gap: 18px; }
#barra-totale { font-size: 24px; }

@media (max-width: 700px) {
  .mappa-treno { flex-direction: column; }
  .carrozza { width: 100%; }
  .griglia-carrozza { justify-content: center; }
  .barra-dentro { justify-content: center; text-align: center; }
}

/* =====================================================================
   LA PAGINA DI UN EVENTO (/evento/<slug>), disegnata dal server.
   Due pezzi soli: le briciole in cima e la scheda dei fatti sotto il
   sommario. Il resto e' prosa, e la prosa ha gia' il suo vestito.
   ===================================================================== */

/* Le briciole non sono decorazione: dicono a chi arriva da una ricerca dove
   e' finito. Chi atterra su «Sagra del Fungo» da Google non ha idea di cosa
   sia questo sito finche' non legge questa riga. */
.briciole {
  font-size: 14px;
  color: var(--sila-pietra);
  margin: 0 0 18px;
}
.briciole a { color: var(--sila-pietra); }
.briciole span { color: var(--sila-notte); }

/* I fatti in cima, prima della prosa: quando, dove, chi organizza, quanto.
   Chi apre la pagina di un evento cerca prima questi quattro, e solo dopo
   decide se leggere. Metterli in fondo e' farli cercare. */
.scheda-evento {
  margin: 26px 0 8px;
  padding: 18px 22px;
  background: var(--sila-neve);
  border-left: 4px solid var(--sila-lupo);
  border-radius: 0 10px 10px 0;
  display: grid;
  gap: 10px 26px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.scheda-evento > div { min-width: 0; }
.scheda-evento dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--sila-pietra);
  margin-bottom: 2px;
}
.scheda-evento dd { margin: 0; font-size: 16px; line-height: 1.45; }

.prosa blockquote {
  margin: 22px 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--sila-luna);
  color: var(--sila-pietra);
  font-style: italic;
}