/* Curva Nove — CSS non critico (sotto la prima schermata).
   Caricato in modo differito: non blocca il primo rendering su mobile. */

/* ====== traiettoria: soglia di sezione ====== */
body{counter-reset:sez}
.thr{position:relative;border-top:1px solid var(--line)}
.thr::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--lime),transparent);opacity:.5}
.thr::after{counter-increment:sez;content:"0" counter(sez);position:absolute;left:var(--pad-l);top:-.72rem;font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;color:var(--lime);background:var(--n0);padding-inline:.5rem}
section{padding-block:var(--sp5)}
/* Testata di sezione: una colonna sola, titolo sopra e paragrafo sotto, tutti e
   due larghi quanto la pagina. Il max-width di .lede qui non vale. */
.head{display:flex;flex-direction:column;gap:.7rem;margin-bottom:var(--sp4)}
.head h2{font-size:var(--t6)}
.head .lede{max-width:none}

/* ====== parco moto: indice + schede ====== */
.park{background:var(--n1)}
.park-grid{position:relative;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:var(--sp3)}
@media (min-width:1000px){.park-grid{grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:var(--sp4);align-items:start}}
.idx{display:flex;flex-wrap:wrap;gap:.6rem;border-top:1px solid var(--line);padding-top:var(--sp2)}
@media (min-width:1000px){.idx{position:sticky;top:calc(var(--topbar) + 1.5rem);flex-direction:column;flex-wrap:nowrap}}
.idx-t{display:block;flex:1 1 auto;text-align:left;border-left:2px solid transparent;padding:.7rem .9rem;cursor:pointer;font-family:var(--mono);font-size:var(--t3);letter-spacing:-.02em;color:var(--txt-3);transition:color var(--d1) var(--ease),border-color var(--d1) var(--ease),background var(--d1) var(--ease)}
.idx-t small{display:block;font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;margin-top:.25rem}
@media (hover:hover) and (pointer:fine){.idx-t:hover{color:var(--txt)}}
@media (pointer:coarse){.idx-t{min-height:44px}}
.idx .note{flex:1 1 100%;margin-top:var(--sp1);font-size:var(--t3);color:var(--txt-2);max-width:34ch;line-height:1.55}
@media (min-width:1000px){.idx .note{margin-top:var(--sp2)}}
/* stato attivo e commutazione delle schede senza JS (radio + combinatore ~) */
#cat-600:checked ~ .idx .idx-t[for=cat-600],
#cat-1000:checked ~ .idx .idx-t[for=cat-1000]{color:var(--txt);border-left-color:var(--lime);background:linear-gradient(90deg,var(--lime-dim),transparent)}
#cat-600:checked ~ .cards-wrap .cards[data-cat="1000"],
#cat-1000:checked ~ .cards-wrap .cards[data-cat="600"]{display:none}
.cat-in:focus-visible ~ .idx .idx-t[for=cat-600]{outline:2px solid var(--lime);outline-offset:2px}
#cat-1000.cat-in:focus-visible ~ .idx .idx-t[for=cat-600]{outline:none}
#cat-1000.cat-in:focus-visible ~ .idx .idx-t[for=cat-1000]{outline:2px solid var(--lime);outline-offset:2px}

.cards{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:var(--sp2)}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--n2);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0;contain:layout style;transition:border-color var(--d2) var(--ease),transform var(--d2) var(--ease)}
.card figure{position:relative;background:var(--n3);overflow:hidden;isolation:isolate}
.card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
/* la cilindrata resta sempre leggibile: sopra l'immagine anche mentre si ingrandisce all'hover */
.card figure span{position:absolute;left:0;top:0;z-index:2;background:var(--lime);color:#0A0C05;font-family:var(--mono);font-size:var(--t1);font-weight:600;letter-spacing:.12em;padding:.3rem .6rem}
@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:var(--line-2);transform:translateY(-3px)}
  .card img{transition:transform var(--d4) var(--ease)}
  .card:hover img{transform:scale(1.04)}
}
.card-b{padding:1rem 1.05rem 1.15rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.card h3{font-size:var(--t4);letter-spacing:-.03em}
.card .why{font-size:var(--t3);color:var(--txt-2);line-height:1.55}
.card .why b{color:var(--txt);font-weight:600}
.dl{margin-top:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.dl div{background:var(--n2);padding:.55rem .4rem;min-width:0}
.dl b{display:block;font-family:var(--mono);font-size:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}
.dl span{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
/* Aiuti alla guida, nelle stesse caselle delle misure: quello che c'è si
   accende, il "no" resta smorzato. Sono i più, e sedici caselle accese
   sarebbero un allarme invece di un'informazione. */
.dl .no b{color:var(--txt-3)}
.dl .si b{color:var(--lime)}
/* prezzo della singola moto, in fondo alla scheda */
.card-p{display:flex;align-items:baseline;gap:.5rem;margin-top:.8rem}
.card-p b{font-family:var(--mono);font-size:var(--t4);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--lime)}
.card-p span{font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
/* unico punto cliccabile della scheda: immagine e titolo non sono link */
.card-go{align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;margin-top:.7rem;padding-block:.25rem;font-family:var(--mono);font-size:var(--t2);letter-spacing:.12em;text-transform:uppercase;color:var(--lime);border-bottom:1px solid rgba(200,240,46,.35);transition:border-color var(--d1) var(--ease)}
.card-go span{transition:transform var(--d2) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .card-go:hover{border-bottom-color:var(--lime)}
  .card-go:hover span{transform:translateX(4px)}
}
@media (pointer:coarse){.card-go{min-height:44px}}

/* ====== i tre passi, uno accanto all'altro ======
   Erano tre fasce alte quanto lo schermo con il numero in filigrana al 4% di
   opacità: non si vedeva e il testo restava tutto a sinistra. */
.passi{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp3)}
@media (min-width:900px){.passi{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp2)}}
.passo{display:flex;flex-direction:column;gap:.7rem;min-width:0;border-top:1px solid var(--lime);padding-top:1rem}
.passo .num{font-family:var(--mono);font-weight:700;font-size:var(--t6);line-height:1;color:var(--lime)}
.passo h3{font-size:var(--t4);letter-spacing:-.03em}
.passo p{color:var(--txt-2);font-size:var(--t3)}
.passo ul{list-style:none;display:grid;gap:.4rem;margin-top:.2rem}
.passo li{position:relative;padding-left:1.1rem;font-size:var(--t2);color:var(--txt-2)}
.passo li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--lime)}

/* ====== circuiti ====== */
.tracks{background:var(--n2)}
.track-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--sp3)}
@media (min-width:700px){.track-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1080px){.track-row{grid-template-columns:repeat(6,minmax(0,1fr))}}
.track-row a{display:block;background:var(--n2);padding:1.15rem .7rem;text-align:center;min-width:0;transition:opacity var(--d2) var(--ease),filter var(--d2) var(--ease),background var(--d2) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .track-row a{filter:grayscale(1);opacity:.72}
  .track-row a:hover{opacity:1;filter:none;background:var(--n3)}
  /* la pagina in cui sei non si spegne mai */
  .track-row a[aria-current=page]{filter:none;opacity:1}
}
/* dove sei adesso: lime pieno, come le linguette del parco moto */
.track-row a[aria-current=page]{background:var(--lime);color:#0A0C05;cursor:default}
.track-row a[aria-current=page] span{color:rgba(10,12,5,.72)}
@media (hover:hover) and (pointer:fine){.track-row a[aria-current=page]:hover{background:var(--lime)}}
.track-row b{display:block;font-family:var(--mono);font-size:var(--t3);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-row span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}

/* ====== pagine indice: tutte le moto, tutti i circuiti ====== */
.tutte{background:var(--n1)}
.tutte-gruppo + .tutte-gruppo{margin-top:var(--sp4)}
.tutte-h{font-size:var(--t5);letter-spacing:-.03em;margin-bottom:var(--sp2);display:flex;align-items:baseline;gap:.7rem}
.tutte-h small{font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
/* la griglia qui respira di più: tre colonne piene, non la colonna stretta della home */
.tutte .cards{grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:640px){.tutte .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.tutte .cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tutte .listino-nota{margin-top:var(--sp4)}
/* circuito senza tracciato: il riquadro resta, vuoto ma della stessa altezza */
.card-vuota{aspect-ratio:3/2;background:repeating-linear-gradient(135deg,var(--n3),var(--n3) 10px,var(--n2) 10px,var(--n2) 20px);opacity:.5}

/* ====== pagina della singola moto ====== */
.mt-dl{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-top:1px solid var(--line)}
@media (min-width:760px){.mt-dl{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mt-dl div{background:var(--n1);padding:1.1rem 1rem}
.mt-dl b{font-size:var(--t5)}
.mt-prezzi{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:640px){.mt-prezzi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mt-prezzi div{background:var(--n1);padding:1.3rem 1.2rem;min-width:0}
.mt-prezzi div:first-child{background:var(--lime);color:#0A0C05}
.mt-prezzi div:first-child span{color:rgba(10,12,5,.72)}
.mt-prezzi span{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.mt-prezzi b{display:block;margin-top:.35rem;font-family:var(--mono);font-size:var(--t6);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mt-prezzi div:not(:first-child) b{color:var(--lime)}
.mt-prezzi p{margin-top:.4rem;font-size:var(--t2);color:var(--txt-3)}

/* ====== pagina del singolo circuito ====== */
/* testo a sinistra, tracciato a destra; senza mappa resta una colonna sola */
/* La mappa tiene la sua forma: ritagliarla a 3/2 tagliava via le due estremità
   del tracciato, cioè la parte che uno sta guardando. Le misure sono
   sull'immagine, quindi il riquadro non salta mentre carica. */
.briciole a{border-bottom:1px solid transparent;transition:color var(--d1) var(--ease),border-color var(--d1) var(--ease)}
@media (hover:hover) and (pointer:fine){.briciole a:hover{color:var(--lime);border-bottom-color:var(--lime)}}
.ct-date{list-style:none;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:520px){.ct-date{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.ct-date{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ct-date li{background:var(--n2);padding:1rem 1.1rem;display:flex;align-items:baseline;gap:.6rem;min-width:0}
.ct-date b{font-family:var(--mono);font-size:var(--t4);letter-spacing:-.03em;color:var(--lime);font-variant-numeric:tabular-nums}
.ct-date span{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}

/* ====== tariffe: listino per moto ====== */
.listino-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--n1)}
.listino{width:100%;border-collapse:collapse;min-width:420px}
.listino th,.listino td{text-align:right;padding:.85rem 1rem;border-bottom:1px solid var(--line);white-space:nowrap}
.listino thead th{font-family:var(--mono);font-size:var(--t1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.listino tbody th{text-align:left;font-weight:400}
.listino tbody th b{display:block;font-family:var(--mono);font-size:var(--t3);letter-spacing:-.02em;font-weight:600}
.listino tbody th span{font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.listino tbody td{font-family:var(--mono);font-size:var(--t4);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--lime)}
.listino tbody td.dim{color:var(--txt-2);font-size:var(--t3)}
.listino tbody tr:last-child th,.listino tbody tr:last-child td{border-bottom:0}
@media (hover:hover) and (pointer:fine){.listino tbody tr:hover th,.listino tbody tr:hover td{background:var(--n2)}}
.listino-nota{margin-top:var(--sp2);font-size:var(--t2);color:var(--txt-3);max-width:70ch}
/* tabella dei ricambi: sta dentro la domanda sulla caduta, nella FAQ */
.faq .danni-lede{padding:0 0 1rem;color:var(--txt-2);max-width:62ch;font-size:var(--t3)}
.faq .listino-wrap{margin-bottom:.4rem}
.listino.danni tbody td{font-size:var(--t3)}
.listino.danni tbody td.dim{color:var(--txt-2)}
.faq .listino-nota{padding-bottom:1.2rem;margin-top:.8rem}
.faq{margin-top:var(--sp3);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1rem 0;display:flex;gap:1rem;align-items:baseline;font-family:var(--mono);font-size:var(--t3);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--lime);font-family:var(--mono)}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 1.1rem;color:var(--txt-2);max-width:70ch;font-size:var(--t3)}
/* dalla sezione tariffe alla pagina lunga */
.listino-vai{margin-top:var(--sp2)}

/* ====== pagine di testo: come funziona e tariffe ====== */
/* tre colonne di elenchi (cosa è compreso, cosa porti tu, cosa non c'è);
   .due per la coppia testo + elenco della cauzione */
.blocchi{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp3)}
@media (min-width:760px){.blocchi{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp2)}
  .blocchi.due{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp3)}}
.blocco{border-top:1px solid var(--lime);padding-top:1rem;min-width:0}
.blocchi.due .blocco{border-top-color:var(--line)}
.blocco h2{font-size:var(--t4);letter-spacing:-.03em;margin-bottom:.7rem}
.blocco p{color:var(--txt-2);font-size:var(--t3);max-width:60ch}
.blocco ul{list-style:none;display:grid;gap:.5rem}
.blocco li{position:relative;padding-left:1.1rem;font-size:var(--t2);color:var(--txt-2)}
.blocco li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--lime)}
.blocco .quanto{margin-top:1rem;font-family:var(--mono);font-size:var(--t2);letter-spacing:-.02em;color:var(--txt)}
/* il listino ricambi quando sta per conto suo, fuori dalla FAQ */
.danni-fuori .danni-lede{margin-bottom:1rem;color:var(--txt-2);max-width:62ch;font-size:var(--t3)}

/* ====== richiamo alla pagina di prenotazione ====== */
/* sta al posto del modulo su tutte le pagine che non sono /prenota/ */
.vai-p{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.vai-p h2{font-size:var(--t6)}
.vai-p .lede{max-width:none}
.vai-p-tel{font-family:var(--mono);font-size:var(--t2);color:var(--txt-3)}
/* sotto il modulo la riga è un'alternativa a compilarlo, non una sua didascalia:
   ci vuole aria in mezzo, e una linea che dica dove finisce il riquadro */
.b-recap .vai-p-tel{margin-top:var(--sp3);padding-top:var(--sp2);border-top:1px solid var(--line)}
/* sottolineato e non solo colorato: dentro un paragrafo il colore da solo non
   basta a dire che è un link a chi distingue male le tinte */
.vai-p-tel a,.ck-t a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
/* WhatsApp: il pallino verde lo distingue dal telefono senza mettere un'icona
   da scaricare */
a.wa::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.45em;border-radius:50%;background:#25D366;vertical-align:.05em}
/* link con icona: l'icona sta ferma e il testo le si allinea accanto */
a.social{display:inline-flex;align-items:center;gap:.45em}
a.social svg{flex:0 0 auto}
.btn.wa::before{margin-right:.55em}

/* ====== prenota ====== */
.book{background:var(--n1)}
/* ordine mobile: giornata → turno → dati → riepilogo; su desktop torna a due colonne */
.book-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp3);align-content:start}
@media (min-width:900px){
  .book-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp4);grid-template-areas:"evento evento" "days riders" "fields recap" "ok recap";align-items:start}
  .b-days{grid-area:days}.b-riders{grid-area:riders}.b-fields{grid-area:fields}.b-ok{grid-area:ok}.b-recap{grid-area:recap}
}
.book-grid fieldset{border:0;min-width:0;padding:0}
.b-title{display:block;width:100%;padding:0;margin-bottom:.7rem}
.days{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:520px){.days{grid-template-columns:repeat(2,minmax(0,1fr))}}
.days label{background:var(--n2);cursor:pointer;padding:.85rem .9rem;min-width:0;display:flex;align-items:baseline;gap:.55rem;white-space:nowrap;transition:background var(--d1) var(--ease),color var(--d1) var(--ease)}
.days label b{flex:0 0 auto;font-family:var(--mono);font-size:var(--t3);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.days label span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
@media (hover:hover) and (pointer:fine){.days label:hover{background:var(--n3)}}
.days input:checked + label{background:var(--lime);color:#0A0C05}
.days input:checked + label span{color:rgba(10,12,5,.7)}
.days input:focus-visible + label{outline:2px solid var(--lime);outline-offset:-2px}
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
@media (min-width:520px){.slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.slots label{display:flex;align-items:center;justify-content:center;background:var(--n2);border:1px solid var(--line);cursor:pointer;padding:.7rem .4rem;min-height:44px;font-family:var(--mono);font-size:var(--t2);letter-spacing:.06em;white-space:nowrap;transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease),color var(--d1) var(--ease)}
@media (hover:hover) and (pointer:fine){.slots label:hover{border-color:var(--line-2)}}
.slots input:checked + label{background:var(--lime);border-color:var(--lime);color:#0A0C05;font-weight:600}
.slots input:focus-visible + label{outline:2px solid var(--lime);outline-offset:2px}
/* formula: due riquadri alti, nome + spiegazione su due righe */
.slots.duo{grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:420px){.slots.duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.slots.duo label{flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;gap:.2rem;padding:.8rem .85rem;white-space:normal}
.slots.duo b{font-size:var(--t3);letter-spacing:-.02em;font-weight:600}
.slots.duo small{font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);transition:color var(--d1) var(--ease)}
.slots input:checked + label small{color:rgba(10,12,5,.72)}
.slots.slots-2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Mattina o pomeriggio: la mostra e la nasconde il CSS, quindi la scelta
   funziona anche a JavaScript spento. Dove :has() manca resta visibile —
   app.js la nasconde con [hidden], e nel peggiore dei casi si vede una scelta
   in più invece di perderne una. */

/* ====== quante moto, e quale per ognuna ====== */
.slots.slots-num{grid-template-columns:repeat(auto-fit,minmax(3rem,1fr))}
/* mezza giornata: un pilota solo non è ammesso, e si vede. Il primo selettore
   copre il caso con JS (che disabilita il radio), il secondo quello senza. */
.slots input:disabled + label,
/* Testo da leggere, non un'etichetta: a var(--t1) sono undici pixel di
   monospaziato, che si guardano ma non si leggono. */
.hint{margin-top:.65rem;font-family:var(--mono);font-size:var(--t2);line-height:1.55;letter-spacing:.04em;color:var(--txt-3)}
/* extra opzionali: cifra a giornata, si aggiunge una volta sola */
.extra{margin-top:var(--sp2)}
.extra label{display:flex;align-items:flex-start;gap:.7rem;min-width:0;cursor:pointer;background:var(--n2);border:1px solid var(--line);padding:.7rem .75rem;transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease)}
@media (hover:hover) and (pointer:fine){.extra label:hover{border-color:var(--line-2)}}
.extra input:checked + label{border-color:var(--lime);background:var(--lime-dim)}
.extra input:focus-visible + label{outline:2px solid var(--lime);outline-offset:2px}
.extra label::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:.15rem;border:1px solid var(--line-2);border-radius:2px}
.extra input:checked + label::before{background:var(--lime);border-color:var(--lime);box-shadow:inset 0 0 0 3px var(--n2)}
.extra-t{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.extra-t b{font-family:var(--mono);font-size:var(--t2);letter-spacing:-.02em}
/* "× 2": quanti pezzi servono per le moto scelte. Vuoto quando è uno solo. */
.qta{color:var(--lime);font-variant-numeric:tabular-nums}
.extra-t small{font-size:var(--t2);line-height:1.55;color:var(--txt-3)}
.extra em{flex:0 0 auto;margin-left:auto;font-style:normal;font-family:var(--mono);font-size:var(--t2);font-weight:600;font-variant-numeric:tabular-nums;color:var(--lime)}
.extra-riga th b{font-weight:600}
.extra-riga td{font-size:var(--t3)!important}
.riders{margin-top:var(--sp2);display:grid;gap:.45rem}
/* Due colonne — etichetta e menu — e la formula sotto, allineata al menu.
   Con tre figli in una griglia a due colonne la terza cella finiva a capo e
   stringeva il menu della moto a meta larghezza. */
.rider{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.7rem .7rem;min-width:0}
/* sotto la moto: quando sta in pista e quanti piloti se la dividono. Da 640px
   affiancate — i piloti sono tre numeri e non meritano una riga loro */
.rider .rider-sotto{grid-column:2;display:grid;gap:.5rem;margin-top:.5rem;min-width:0}
@media (min-width:640px){
  .rider .rider-sotto{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem .7rem}
}
.rider-piloti{display:flex;align-items:center;gap:.5rem}
.rider-piloti .slots{grid-template-columns:repeat(3,2.3rem);gap:1px}
.rider-piloti .slots label{padding:.5rem .2rem;min-height:40px;font-size:var(--t2)}
.pil-lab{font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt-3);white-space:nowrap}
.rider-n{font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);white-space:nowrap}

/* ====== menù della moto: <details> con radio dentro ====== */
.pick{position:relative;min-width:0}
.pick > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;min-width:0;min-height:52px;padding:.4rem .55rem;background:var(--n2);border:1px solid var(--line);border-radius:2px;transition:border-color var(--d1) var(--ease)}
.pick > summary::-webkit-details-marker{display:none}
.pick > summary::after{content:"";flex:0 0 auto;margin-left:auto;width:0;height:0;border:4px solid transparent;border-top:5px solid var(--lime);transform:translateY(2px)}
.pick[open] > summary::after{transform:rotate(180deg) translateY(2px)}
@media (hover:hover) and (pointer:fine){.pick > summary:hover{border-color:var(--line-2)}}
.pick[open] > summary{border-color:var(--line-2)}
.pick .cur{align-items:center;gap:.6rem;min-width:0;flex:1 1 auto}
/* Miniatura: l'immagine la assegna una regola per modello generata dai dati e
   stampata nell'head. Qui niente scorciatoia "background:", che azzererebbe
   background-image e cancellerebbe quelle regole. */
.th{flex:0 0 auto;width:56px;height:37px;background-color:var(--n3);background-position:center;background-size:cover;background-repeat:no-repeat}
.pick-t{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.pick-t b{font-family:var(--mono);font-size:var(--t2);letter-spacing:-.02em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-t small{font-family:var(--mono);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.pick em{flex:0 0 auto;margin-left:auto;font-style:normal;font-family:var(--mono);font-size:var(--t2);font-weight:600;font-variant-numeric:tabular-nums;color:var(--lime)}
.pick-list{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 4px);background:var(--n2);border:1px solid var(--line-2);box-shadow:0 20px 44px rgba(0,0,0,.55);max-height:min(58vh,360px);overflow:auto;overscroll-behavior:contain}
.pick-h{padding:.5rem .55rem .3rem;font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);border-top:1px solid var(--line)}
.pick-list > .pick-h:first-child{border-top:0}
.pick-list label{display:flex;align-items:center;gap:.6rem;min-width:0;padding:.45rem .55rem;cursor:pointer}
@media (hover:hover) and (pointer:fine){.pick-list label:hover{background:var(--n3)}}
.pick-list input:checked + label{background:var(--lime-dim)}
.pick-list input:focus-visible + label{outline:2px solid var(--lime);outline-offset:-2px}
@media (pointer:coarse){.pick-list label{min-height:52px}}
/* le righe oltre il numero di moto scelto restano nel DOM ma non si vedono:
   il server conta solo le prime, quindi i valori di troppo sono innocui */
.b-riders:has(#m-1:checked) .rider:nth-child(n+2),
.b-riders:has(#m-2:checked) .rider:nth-child(n+3),
.b-riders:has(#m-3:checked) .rider:nth-child(n+4),
.b-riders:has(#m-4:checked) .rider:nth-child(n+5),
.b-riders:has(#m-5:checked) .rider:nth-child(n+6){display:none}
/* ====== date: due campi nativi, il calendario lo apre il browser ====== */
.quando{margin-top:var(--sp3)}
.quando .field{margin-top:0}
.quando-gg{margin-top:var(--sp2)}
.quando input[type=date]{background:var(--n2);border:1px solid var(--line);color:var(--txt);padding:.8rem .9rem;border-radius:2px;width:100%;font-family:var(--mono);font-size:16px;min-height:48px}
.quando input[type=date]:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
/* con color-scheme:dark l'icona del calendario è già chiara: qui si regola solo
   quanto si vede. Invertirla la rimetterebbe nera su fondo nero. */
.quando input[type=date]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer;transition:opacity var(--d1) var(--ease)}
.quando input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:1}
.quando input[type=date]:user-invalid{border-color:var(--mag)}

.field{display:flex;flex-direction:column;gap:.4rem;margin-top:var(--sp3)}
.field label{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
/* 16px pieni: sotto questa soglia iOS ingrandisce la pagina al focus */
.field input{background:var(--n2);border:1px solid var(--line);padding:.85rem .9rem;border-radius:2px;width:100%;font-size:16px;min-height:48px}
.field input::placeholder{color:var(--txt-3)}
.field input:user-invalid{border-color:var(--mag)}
.recap{margin-top:var(--sp3);border:1px solid var(--line-2);background:var(--n2);padding:1.1rem;display:flex;flex-direction:column;gap:.8rem}
.recap p{font-family:var(--mono);font-size:var(--t2);letter-spacing:.04em;color:var(--txt-2)}
.recap p b{color:var(--lime);font-weight:600}
.no-js .recap-live{display:none}
/* contatore della spesa prevista: somma le moto contate */
.quote{display:flex;align-items:baseline;flex-wrap:wrap;gap:.55rem;border-top:1px solid var(--line);padding-top:.85rem}
.quote > span{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.quote b{font-family:var(--mono);font-size:var(--t5);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--lime)}
.quote small{flex:1 1 100%;font-size:var(--t2);line-height:1.55;color:var(--txt-3)}
/* la quota a testa quando una moto è divisa: acceso, perché è il numero che
   guarda chi divide. flex batte il display:none di [hidden], come altrove */
.quote small.quota{color:var(--lime);margin-top:-.2rem}
.quote small.quota[hidden]{display:none}
/* la cauzione non è una spesa: cifra più piccola e bianca, non lime */
.quote.garanzia{border-top-style:dashed;padding-top:.7rem}
.quote.garanzia b{font-size:var(--t4);color:var(--txt)}
.msg{margin-top:var(--sp2);border-left:2px solid var(--lime);background:var(--n2);padding:.9rem 1rem;font-size:var(--t3);color:var(--txt-2)}
.msg.err{border-color:var(--mag)}
.msg b{color:var(--txt);font-weight:600}

/* ====== chiusura ====== */
footer{border-top:1px solid var(--line);background:var(--n0);padding-block:var(--sp4);padding-bottom:calc(var(--sp3) + env(safe-area-inset-bottom,0px));content-visibility:auto;contain-intrinsic-size:auto 520px}
.foot-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:var(--sp3)}
@media (min-width:640px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.foot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.foot-grid h3{font-family:var(--mono);font-size:var(--t1);letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3);margin-bottom:.7rem}
.foot-grid p,.foot-grid li{color:var(--txt-2);font-size:var(--t3)}
.foot-grid ul{list-style:none;display:grid;gap:.3rem}
.foot-grid a{border-bottom:1px solid transparent;transition:color var(--d1) var(--ease),border-color var(--d1) var(--ease)}
@media (hover:hover) and (pointer:fine){.foot-grid a:hover{color:var(--lime);border-bottom-color:var(--lime)}}
@media (pointer:coarse){.foot-grid li{padding-block:.25rem}}
.foot-mark{margin-top:var(--sp4);overflow:hidden}
.foot-mark::before{content:attr(data-mark);display:block;font-family:var(--mono);font-weight:700;font-size:clamp(2.6rem,13vw,8rem);line-height:.85;letter-spacing:-.06em;color:rgba(233,237,241,.06);white-space:nowrap}
.foot-low{margin-top:var(--sp3);padding-top:var(--sp2);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:.5rem;font-family:var(--mono);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
@media (min-width:760px){
  .foot-low{grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}
  .foot-low :nth-child(2){text-align:center}
  .foot-low :nth-child(3){text-align:right}
  /* la riga della società passa sotto, larga quanto tutte e tre */
  .foot-low .legale{grid-column:1 / -1;text-align:left}
}
/* dati societari: obbligatori da dichiarare, non da leggere */
/* niente opacity: sbiadiva un testo già tenue fino a renderlo illeggibile.
   Piccolo sì, sotto la soglia di contrasto no. */
.foot-low .legale{margin-top:.4rem;letter-spacing:.06em;text-transform:none;color:var(--txt-3)}
/* i due link qui dentro hanno lo stesso colore del testo: senza sottolineatura
   non si capirebbe che sono link */
.foot-low .legale a{color:var(--txt-2);text-decoration:underline;text-underline-offset:3px}

/* ====== pagine legali: testo lungo, una colonna ======
   Righe corte perché si legge, non si scorre: 68 caratteri è la misura in cui
   l'occhio ritrova l'inizio della riga dopo. */
/* Una colonna sola, larga quanto la pagina: il testo va a capo da solo. */
.legge{display:grid;gap:var(--sp3)}
.legge > section,.legge .listino-nota,.legge-data,.legge p,.legge ul{max-width:none;width:100%}
.legge .listino-wrap{width:100%;max-width:none}
/* padding-block:0 perché la regola generale su section qui dentro non serve:
   sono paragrafi di un testo, non fasce della pagina */
.legge > section{display:grid;gap:.7rem;padding-block:0}
.legge h2{font-size:var(--t4);letter-spacing:-.03em;color:var(--txt)}
.legge p{color:var(--txt-2)}
.legge ul{list-style:none;display:grid;gap:.5rem}
.legge li{position:relative;padding-left:1.1rem;color:var(--txt-2);font-size:var(--t2)}
.legge li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--lime)}
/* qui le colonne sono parole, non cifre: si leggono allineate a sinistra */
.legge .listino th,.legge .listino td{text-align:left}
.legge .listino td.testo{white-space:normal;min-width:26ch;font-family:var(--sans);font-size:var(--t2);letter-spacing:0}
.legge-data{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);border-top:1px solid var(--line);padding-top:var(--sp2)}

/* ====== le due spunte del modulo ======
   Il consenso è obbligatorio, la copia no. Il campo email compare solo se la
   copia la chiedi: chiedere un indirizzo che non useremmo sarebbe un campo in
   più da compilare per niente. */
.b-ok{display:grid;gap:.8rem;margin-top:var(--sp2)}
.b-ok > label{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;font-size:var(--t2);color:var(--txt-2);line-height:1.5}
.b-ok > label::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:.12rem;border:1px solid var(--line-2);border-radius:2px;transition:background var(--d1) var(--ease),border-color var(--d1) var(--ease)}
.b-ok > input:checked + label::before{background:var(--lime);border-color:var(--lime);box-shadow:inset 0 0 0 3px var(--n1)}
.b-ok > input:focus-visible + label::before{outline:2px solid var(--lime);outline-offset:2px}
.b-ok > label a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
@media (pointer:coarse){.b-ok > label{min-height:44px;align-items:center}}

/* ====== foglietto dei cookie ======
   In basso e stretto: non copre la pagina, non blocca la lettura, non chiede
   di essere chiuso per poter guardare il sito. */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--z-nav) + 1);background:var(--n2);border-top:1px solid var(--lime);padding:var(--sp2) 0 calc(var(--sp2) + env(safe-area-inset-bottom,0px))}
.ck[hidden]{display:none}
.ck-in{width:var(--wrap);margin-inline:auto;padding-left:var(--pad-l);padding-right:var(--pad-r);display:flex;flex-direction:column;gap:1rem}
@media (min-width:820px){.ck-in{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp3)}}
.ck-t{min-width:0}
.ck-t b{display:block;font-family:var(--mono);font-size:var(--t3);letter-spacing:-.02em;margin-bottom:.3rem}
.ck-t p{font-size:var(--t2);color:var(--txt-2);max-width:72ch}
.ck-b{display:flex;gap:.6rem;flex:0 0 auto}
.ck-b .btn{padding:.6rem 1.1rem}
/* il ripensamento: un bottone che sembra il link che gli sta accanto */
.ck-rivedi{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--lime);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .ck{animation:ck-su var(--d2) var(--ease) both}
  @keyframes ck-su{from{transform:translateY(100%)}to{transform:none}}
}

/* ====== comparsa progressiva (solo con JS attivo) ====== */
.js .rv{opacity:0;transform:translateY(18px)}
.js .rv.in{opacity:1;transform:none;transition:opacity var(--d4) var(--ease),transform var(--d4) var(--ease)}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none}
  .stage img{transform:scale(1.04)}
}

/* ---- il calendario delle giornate -----------------------------------
   Una tabella vera, non una griglia finta: le colonne sono i giorni della
   settimana e le righe le settimane, che è esattamente quello che una
   tabella descrive. Da 720px in giù la stessa tabella diventa un'agenda —
   le celle vuote spariscono e ogni giorno con qualcosa fa una riga — perché
   sette colonne su un telefono non si leggono.
   Le due viste stanno tutte e due nel codice della pagina: le linguette le
   accende app.js, e senza JavaScript si vedono entrambe. */
.cal{display:block}
/* display:flex batte il display:none che il browser dà a [hidden]: senza la
   seconda riga le linguette comparirebbero anche senza JavaScript, e non
   avrebbero niente da accendere */
.cal-viste{display:flex;gap:.4rem;margin-bottom:var(--sp3)}
.cal-viste[hidden]{display:none}
.cal-vista{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;
  padding:.5rem .95rem;border:1px solid var(--line-2);border-radius:2px;background:none;
  color:var(--txt-3);cursor:pointer;
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease),border-color var(--d1) var(--ease)}
.cal-vista.on{background:var(--lime);border-color:var(--lime);color:#0A0C05;font-weight:600}
@media (hover:hover){.cal-vista:not(.on):hover{border-color:var(--lime);color:var(--lime)}}

.cal-mese{width:100%;border-collapse:collapse;table-layout:fixed;margin-bottom:var(--sp4)}
.cal-mese caption{caption-side:top;text-align:left;padding-bottom:.85rem;
  font-family:var(--mono);font-size:var(--t2);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--txt)}
.cal-cap{display:flex;align-items:baseline;gap:.75rem}
.cal-anno{color:var(--txt-3)}
.cal-conta{margin-left:auto;font-size:var(--t1);letter-spacing:.14em;color:var(--lime)}
.cal-mese th{padding:.5rem .4rem;border-bottom:1px solid var(--lime);
  font-family:var(--mono);font-size:var(--t1);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt-3);text-align:left}
.cal-mese th abbr{text-decoration:none;border:0}
/* la cella: alta uguale per tutte, così le settimane restano righe e non
   saltano quando un giorno ha due giornate invece di una */
.cal-cella{vertical-align:top;height:6.5rem;padding:.4rem;border:1px solid var(--line);
  border-top:0;border-left:0}
.cal-cella:first-child{border-left:1px solid var(--line)}
.cal-cella.fuori{background:transparent;border-color:transparent}
.cal-cella.piena{background:var(--n1)}
.cal-cella.passato{opacity:.4}
.cal-n{display:block;font-family:var(--mono);font-size:var(--t2);color:var(--txt-3);
  text-align:right;margin-bottom:.3rem}
.cal-cella.piena .cal-n{color:var(--txt)}
/* sul desktop il giorno della settimana sta nell'intestazione della colonna */
.cal-gg{display:none}
/* la pastiglia della giornata: circuito acceso, titolo smorzato e tagliato a
   una riga — il testo intero sta nella scheda, qui serve riconoscerla */
.cal-chip{display:block;margin-bottom:.25rem;padding:.3rem .4rem;border-radius:4px;
  background:var(--n3);border-left:2px solid var(--lime);text-decoration:none;
  transition:background var(--d1) var(--ease)}
.cal-dove{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lime);font-weight:600}
.cal-titolo{display:block;font-size:.72rem;line-height:1.25;color:var(--txt-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.cal-chip:hover{background:#242a33}.cal-chip:hover .cal-titolo{color:var(--txt)}}
.cal-chip:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* da qui in giù non è più una griglia: sette colonne su un telefono sono
   illeggibili, e le celle vuote sarebbero venti su trentuno */
@media (max-width:719px){
  .cal-mese,.cal-mese tbody,.cal-mese tr,.cal-cella{display:block}
  .cal-mese thead{display:none}
  .cal-mese caption{display:flex}
  .cal-cella{height:auto;border:0;border-left:1px solid var(--line);padding:0 0 0 .9rem;margin:0}
  .cal-cella:first-child{border-left:1px solid var(--line)}
  .cal-cella.fuori,.cal-cella:not(.piena){display:none}
  .cal-cella.piena{background:none;padding-top:.2rem;padding-bottom:.9rem}
  /* qui il numero torna a sinistra e si prende il ruolo del titolo di riga,
     con il nome del giorno accanto: senza la colonna sopra, "3" da solo non
     dice se è un sabato o un mercoledì */
  .cal-n{display:flex;align-items:baseline;gap:.5rem;text-align:left;
    font-size:var(--t4);color:var(--txt);margin-bottom:.4rem}
  .cal-gg{display:inline;font-size:var(--t1);letter-spacing:.14em;
    text-transform:uppercase;color:var(--lime)}
  .cal-titolo{white-space:normal}
  .cal-chip{padding:.5rem .6rem}
}

/* la finestra con la scheda della giornata.
   margin:auto lo rimette al centro: l'azzeramento dei margini in cima al CSS
   vale anche per <dialog>, che senza torna in alto a sinistra. */
.scheda-ev{max-width:min(46rem,94vw);width:100%;max-height:90vh;margin:auto;
  border:1px solid var(--line-2);border-radius:4px;padding:0;
  background:var(--n1);color:var(--txt);overflow:hidden}
.scheda-ev::backdrop{background:rgba(4,5,7,.92)}
/* scorre il contenuto, non la finestra: così il bottone di chiusura resta
   dov'è anche con una scheda lunga */
.scheda-ev-in{padding:var(--sp3);max-height:90vh;overflow:auto;overscroll-behavior:contain}
.scheda-ev-in .evento{border-top:0;padding-top:0}
.scheda-ev-in .evento p{max-width:none}
.scheda-ev-chiudi{position:absolute;top:.5rem;right:.5rem}
.scheda-ev-chiudi button{display:inline-flex;align-items:center;justify-content:center;
  width:2.2rem;height:2.2rem;border:1px solid var(--line-2);border-radius:2px;
  background:var(--n0);color:var(--txt);cursor:pointer;
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease),border-color var(--d1) var(--ease)}
@media (hover:hover){
  .scheda-ev-chiudi button:hover{background:var(--lime);color:#0A0C05;border-color:var(--lime)}
}

/* ---- l'elenco delle schede ------------------------------------------
   Sul telefono una giornata sotto l'altra, da 900px in su due per riga.
   Le schede si allineano in alto e non si stirano: una giornata con una
   nota in più è più alta di una senza, e tirarle alla stessa altezza
   lascerebbe un vuoto in mezzo alla più corta. */
.eventi{display:grid;gap:var(--sp3)}
/* display:grid batte il display:none che il browser dà a [hidden]: senza
   questa riga le linguette non spengono niente */
.eventi[hidden]{display:none}
/* Nell'elenco la miniatura non ci va: sedici foto quasi uguali una sotto
   l'altra fanno rumore e allungano le schede senza dire niente. Resta nel
   codice — la finestra la copia da qui, e lì è una sola. Con loading=lazy
   una foto in display:none il browser non la scarica nemmeno. */
.eventi.senza-foto .ev-foto{display:none}
@media (min-width:900px){
  .eventi{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:var(--sp4) var(--sp3)}
  /* una data sola non deve lasciare mezza riga vuota: si prende la riga
     intera, con il testo che resta a misura di lettura */
  .evento:only-of-type{grid-column:1 / -1}
}
.evento{border-top:1px solid var(--lime);padding-top:1rem;min-width:0}
/* testata: riquadro della data, miniatura, titolo */
.ev-top{display:flex;gap:.85rem;align-items:flex-start}
.ev-cap{min-width:0;flex:1 1 auto}
/* il riquadro della data: il numero grosso, il giorno della settimana sotto
   in lime. È la cosa che si cerca scorrendo venti date dello stesso mese */
.ev-data{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:3.1rem;padding:.45rem .5rem .4rem;border:1px solid var(--line-2);border-radius:10px;
  background:var(--n2);line-height:1}
.ev-data b{font-family:var(--mono);font-size:1.3rem;font-weight:500;letter-spacing:-.02em;color:var(--txt)}
/* due giorni non devono allargare il riquadro più delle schede vicine */
.ev-data.arco b{font-size:.98rem;letter-spacing:0}
.ev-gg{margin-top:.3rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
/* il circuito acceso: è la cosa che si cerca scorrendo l'elenco */
.ev-quando{font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.ev-dove{color:var(--lime);font-weight:600}
.evento h4{font-size:var(--t4);letter-spacing:-.03em;margin:.3rem 0 .3rem}
.ev-formula{font-family:var(--mono);font-size:var(--t1);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:.7rem}
.evento p{color:var(--txt-2);font-size:var(--t3);max-width:64ch}
.evento > p{margin-top:.9rem}
.ev-nota{margin-top:1rem;font-size:var(--t2);color:var(--txt-3);max-width:64ch}
.ev-link{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:1.2rem}
/* più stretto del bottone normale: qui ce n'è uno per scheda e diciotto per
   pagina, alla misura piena riempivano l'elenco di blocchi verdi */
.ev-link .btn{padding:.6rem 1rem;font-size:var(--t1);letter-spacing:.12em}
.ev-altri{display:flex;flex-wrap:wrap;gap:.9rem}
.ev-altri a{font-size:var(--t2);color:var(--txt-3);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.ev-altri a:hover{color:var(--lime)}}

/* ---- "stai prenotando per": il contesto quando si arriva da una giornata ----
   Non è un campo, è un promemoria: dice a quale evento la richiesta verrà
   attribuita. I campi sotto restano modificabili, e se cambi data il server
   smette di attribuirla — meglio che bloccarli e costringere a tornare
   indietro per una data diversa. */
.da-evento{grid-area:evento;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-bottom:var(--sp2);padding:.8rem 1rem;border-left:2px solid var(--lime);background:var(--n2)}
.da-evento > span:first-child{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.da-evento b{font-size:var(--t3)}
.da-evento .dim{font-family:var(--mono);font-size:var(--t2);color:var(--txt-3)}

/* ---- formula della singola moto ----
   Tre linguette sotto il menu della moto: intera, mattina, pomeriggio. Prima
   era una scelta sola per tutta la richiesta, e chi voleva una moto tutto il
   giorno e una solo il pomeriggio doveva mandare due richieste. */
/* il margine sopra lo dà adesso .rider-sotto, che le tiene tutte e due */
.rider-form{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px}
.rider-form label{padding:.5rem .4rem;font-size:var(--t1);letter-spacing:.06em;text-align:center}

/* ---- foto ingrandibile e finestra della foto ------------------------
   Il segno con le due frecce dice che la foto si apre: senza, nessuno
   prova a cliccarla. Sulla scheda sta in un angolo e non copre la moto,
   perché la scheda ha già il suo link e due bersagli sovrapposti fanno
   finire altrove chi voleva l'altra cosa. */
.ingrandisci{position:relative;display:block;min-width:0}
.lente-segno{position:absolute;right:.55rem;bottom:.55rem;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:2px;
  background:rgba(8,9,11,.72);color:var(--txt);
  border:1px solid var(--line-2);
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease)}
.lente-segno.angolo{right:.5rem;bottom:.5rem;width:1.75rem;height:1.75rem}
@media (hover:hover) and (pointer:fine){
  .ingrandisci:hover .lente-segno,.lente-segno:hover{background:var(--lime);color:#0A0C05;border-color:var(--lime)}
}
@media (pointer:coarse){.lente-segno{width:2.4rem;height:2.4rem}}

/* la finestra: il velo e la chiusura le fa il browser, qui c'è solo l'aspetto */
.lente{max-width:100vw;max-height:100vh;width:100%;height:100%;
  border:0;padding:0;background:transparent;color:var(--txt);overflow:hidden}
.lente::backdrop{background:rgba(4,5,7,.92)}
.lente-in{width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.9rem;padding:clamp(1rem,4vw,3rem)}
.lente-foto{display:flex;min-height:0}
.lente-foto picture,.lente-foto img{display:block;max-width:95vw;max-height:80vh;
  width:auto;height:auto;object-fit:contain}
.lente-dida{max-width:70ch;text-align:center;font-size:var(--t2);color:var(--txt-3)}
.lente-chiudi{position:absolute;top:clamp(.6rem,2vw,1.2rem);right:clamp(.6rem,2vw,1.2rem)}
.lente-chiudi button{display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border:1px solid var(--line-2);border-radius:2px;
  background:rgba(8,9,11,.72);color:var(--txt);cursor:pointer;
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .lente-chiudi button:hover{background:var(--lime);color:#0A0C05;border-color:var(--lime)}
}