/* CRONOMONTELLO
   Sistema visivo dichiarato prima di costruire (vedi CLAUDE.md):
   asfalto scuro, un colore acceso giallo-arancio fluo (azioni, numeri), il rosso del logo GoOff
   come secondo colore (occhielli, battito sotto il titolo), testo bianco caldo.
   Barlow Condensed per titoli e numeri, Barlow per il testo. Un tema solo, scuro per scelta. */

@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: fallback; src: url("/fonts/barlow-condensed-latin-800-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: fallback; src: url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: fallback; src: url("/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: fallback; src: url("/fonts/barlow-latin-600-normal.woff2") format("woff2"); }

:root {
  --asfalto: #0c0d0f;
  --asfalto-2: #15171a;
  --asfalto-3: #1f2226;
  --linea: #30343a;
  --testo: #f3f2ec;
  --testo-2: #b8bcc2;
  --testo-3: #949aa1;
  --fluo: #ffb31a;
  --fluo-scuro: #3a2a06;
  --rosso: #f05742; /* il rosso del battito GoOff, misurato dal logo (scripts/logo.mjs) */
  --su-fluo: #0c0d0f;
  --errore: #ff7a6e;
  --ok: #8fe39a;

  --stretto: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --testo-famiglia: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --raggio: 6px;
  --testata: 64px;
  --gutter: clamp(16px, 4vw, 40px);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-padding-top: calc(var(--testata) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--asfalto);
  color: var(--testo);
  font-family: var(--testo-famiglia);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--fluo);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Le sezioni ricevono il fuoco solo dal codice (indice, ancore): niente contorno su tutta la sezione. */
[data-capitolo]:focus, main:focus { outline: none; }

.solo-lettori {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.salta {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  background: var(--fluo); color: var(--su-fluo);
  padding: 12px 18px; min-height: 44px; border-radius: var(--raggio);
  font-weight: 600; text-decoration: none;
}
.salta:focus { top: 12px; }

.contenitore {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.contenitore--stretto { max-width: 820px; }

.punto { color: var(--fluo); }

/* ---------- Bottoni: pressione, attesa, esito ---------- */

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 26px;
  background: var(--fluo); color: var(--su-fluo);
  border: 2px solid var(--fluo); border-radius: var(--raggio);
  font-family: var(--stretto); font-weight: 700; font-size: 22px;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.bottone:active { transform: scale(0.96); }
.bottone--secondario { background: transparent; color: var(--testo); border-color: var(--linea); }
.bottone--piccolo { min-height: 44px; padding: 8px 16px; font-size: 18px; }
.bottone--grande { min-height: 60px; font-size: 26px; padding: 14px 34px; }
.bottone[aria-disabled="true"], .bottone:disabled { cursor: progress; }
.bottone.e-in-attesa { background: var(--fluo-scuro); color: var(--fluo); }
.bottone.e-in-attesa::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--fluo);
}
@media (prefers-reduced-motion: no-preference) {
  .bottone.e-in-attesa::before { animation: pulsa .9s ease-in-out infinite; }
}
.bottone.e-ok { background: var(--ok); border-color: var(--ok); color: var(--su-fluo); }
.bottone.e-errore { background: transparent; border-color: var(--errore); color: var(--errore); }

@media (hover: hover) and (pointer: fine) {
  .bottone:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -10px rgba(255, 179, 26, .55); }
  .bottone--secondario:hover { border-color: var(--testo-2); box-shadow: none; }
  .bottone:active { transform: scale(0.96); }
}

@keyframes pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.collegamento {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--fluo); font-weight: 600; text-underline-offset: 4px;
}

/* ---------- Testata ---------- */

.testata {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--testata);
  padding: 0 var(--gutter);
  background: rgba(12, 13, 15, .92);
  border-bottom: 1px solid var(--linea);
}
@supports (backdrop-filter: blur(8px)) {
  .testata { background: rgba(12, 13, 15, .78); backdrop-filter: blur(10px) saturate(1.2); }
}
.marchio {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--stretto); font-style: italic; font-weight: 800; font-size: 24px;
  letter-spacing: 0.02em; text-decoration: none;
}
.marchio span { color: var(--fluo); }

/* ---------- Apertura ---------- */

.apertura {
  position: relative;
  overflow: clip;
  padding: clamp(40px, 8vw, 96px) 0 0;
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(255, 179, 26, .10), transparent 60%),
    var(--asfalto);
}
.apertura__corpo { position: relative; z-index: 1; }

.occhiello {
  font-family: var(--stretto); font-weight: 700; font-size: 18px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rosso);
  margin-bottom: 12px;
}

/* Una riga sola, sempre: la misura segue la larghezza del contenitore.
   "CRONOMONTELLO" in questo carattere è largo circa 5,96 volte la sua misura; 6,3 lascia aria. */
.titolo {
  font-family: var(--stretto); font-style: italic; font-weight: 800;
  font-size: min(calc((min(100vw, 1160px) - 2 * var(--gutter)) / 6.3), 172px);
  line-height: .86; letter-spacing: -0.01em;
  margin-left: -0.04em;
  white-space: nowrap;
  position: relative;
  width: max-content; /* larga quanto la scritta: il battito la attraversa da un capo all'altro */
  margin-block: .16em .2em; /* spazio per il picco sopra le lettere e la punta sotto */
}
/* Il battito GoOff che taglia la scritta: stessi angoli del simbolo, la punta in basso fra CRONO e
   MONTELLO. Coordinate in millesimi di em (la scritta è larga 5,942 em e alta 0,86): scala con il
   titolo senza deformarsi. Posizioni misurate su Barlow Condensed 800 corsivo. */
.battito {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.battito polyline {
  fill: none; stroke: var(--rosso); stroke-width: 80;
  stroke-linejoin: miter; stroke-miterlimit: 6; stroke-linecap: butt;
}

.apertura__frase {
  max-width: 30ch;
  margin-top: 20px;
  font-size: clamp(21px, 2.6vw, 28px); line-height: 1.3;
  color: var(--testo-2);
}
.apertura__frase strong { color: var(--testo); }

/* La grafica in sovrimpressione delle crono in TV */
.grafica-crono {
  display: inline-grid;
  margin-top: 32px;
  border-left: 6px solid var(--fluo);
  background: var(--asfalto-2);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .9);
}
.grafica-crono__riga {
  display: grid; grid-template-columns: 7.5em auto; align-items: baseline;
  padding: 8px 18px 8px 14px;
  border-bottom: 1px solid var(--linea);
}
.grafica-crono__riga:last-child { border-bottom: 0; }
.grafica-crono dt {
  font-family: var(--stretto); font-weight: 700; font-size: 16px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--testo-3);
}
.grafica-crono dd {
  font-family: var(--stretto); font-weight: 700; font-size: 26px;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.grafica-crono__riga--conto dd { color: var(--fluo); }

.apertura__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* La corsa: il profilo si disegna, il punto corre, il cronometro gira */
.corsa {
  position: relative;
  height: clamp(150px, 24vw, 260px);
  margin-top: clamp(24px, 5vw, 56px);
  margin-right: 48px; /* all'arrivo la bici (33 px oltre il punto d'appoggio, più l'inclinazione) resta dentro lo schermo */
}
.corsa__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.corsa__area { fill: rgba(255, 179, 26, .07); }
.corsa__linea {
  fill: none; stroke: var(--fluo); stroke-width: 3; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round;
}
/* La strada ancora da fare, spenta: la linea accesa la copre fin dove è arrivato il corridore. */
.corsa__traccia { fill: none; stroke: var(--linea); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
/* Il corridore: il suo punto d'appoggio (31, 38 nel disegno 64×40) sta sul profilo. */
.corridore {
  position: absolute; width: 64px; height: 40px; margin: -38px 0 0 -31px;
  transform-origin: 31px 38px;
  filter: drop-shadow(0 0 10px rgba(255, 179, 26, .45));
  pointer-events: none;
}
.corridore .ciclista { width: 64px; height: 40px; }
.js .corsa { cursor: pointer; }
.gioco-posto { min-height: 96px; margin-top: 28px; padding-bottom: 8px; } /* 88 del bottone + 8 di aria: border-box conta anche il padding */
.corsa__tempo {
  position: absolute; right: var(--gutter); top: -8px; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right;
}
.corsa__cifre {
  font-family: var(--stretto); font-weight: 700; font-size: clamp(40px, 7vw, 76px);
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--testo);
}
.corsa__nota {
  font-family: var(--stretto); font-weight: 700; font-size: 18px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fluo);
}

/* ---------- Sezioni ---------- */

.sezione { padding: clamp(72px, 10vw, 128px) 0; }
.sezione--scura { background: var(--asfalto-2); }
.sezione--scura .scheda:not(.scheda--accesa) { background: var(--asfalto); }
.sezione__titolo {
  font-family: var(--stretto); font-weight: 700;
  font-size: clamp(40px, 6.4vw, 76px); line-height: .95;
  text-transform: uppercase;
  max-width: 18ch;
}
.sezione__intro { max-width: 60ch; margin-top: 20px; color: var(--testo-2); }

.tre {
  display: grid; gap: 16px; margin-top: 48px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.scheda {
  position: relative;
  padding: 28px 24px 30px;
  background: var(--asfalto-2);
  border: 1px solid var(--linea); border-radius: var(--raggio);
  transition: transform .25s ease, border-color .25s ease;
}
.scheda h3 {
  font-family: var(--stretto); font-weight: 700; font-size: 30px;
  text-transform: uppercase; margin: 8px 0 10px;
}
.scheda p { color: var(--testo-2); }
.scheda__numero {
  font-family: var(--stretto); font-style: italic; font-weight: 800; font-size: 20px; color: var(--fluo);
}
.scheda--accesa { background: var(--fluo); border-color: var(--fluo); }
.scheda--accesa h3, .scheda--accesa p, .scheda--accesa .scheda__numero { color: var(--su-fluo); }
.scheda__grido {
  font-family: var(--stretto); font-style: italic; font-weight: 800;
  font-size: clamp(36px, 4.4vw, 48px); line-height: .95; text-transform: uppercase;
  margin-bottom: 12px;
}
@media (hover: hover) and (pointer: fine) {
  .scheda:hover { transform: translateY(-4px); border-color: var(--testo-3); }
  .scheda--accesa:hover { border-color: var(--fluo); }
}

/* Comparse: solo con JS e movimento consentito; senza, tutto è già al suo posto */
@media (prefers-reduced-motion: no-preference) {
  .js .appare { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
  .js .appare.e-visibile { opacity: 1; transform: none; }
}

/* ---------- Percorso ---------- */

.numeri {
  list-style: none; padding: 0;
  display: grid; gap: 1px; margin-top: 40px;
  grid-template-columns: repeat(4, 1fr);
  background: var(--linea); border: 1px solid var(--linea); border-radius: var(--raggio);
  overflow: hidden;
}
.numero {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6px;
  padding: 18px 20px; background: var(--asfalto);
}
.numero__valore {
  font-family: var(--stretto); font-weight: 700; font-size: clamp(38px, 4.4vw, 54px); line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.numero__unita { font-family: var(--stretto); font-weight: 700; font-size: 22px; color: var(--fluo); }
.numero__nome { grid-column: 1 / -1; color: var(--testo-2); font-size: 16px; margin-top: 4px; }

.profilo { position: relative; margin-top: 48px; }
.profilo__svg { width: 100%; height: clamp(180px, 30vw, 340px); overflow: visible; }
.profilo__strappo { fill: rgba(255, 179, 26, .08); }
.profilo__area { fill: rgba(243, 242, 236, .06); }
.profilo__linea {
  fill: none; stroke: var(--fluo); stroke-width: 3; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round;
}
@media (prefers-reduced-motion: no-preference) {
  .js .profilo:not(.e-disegnato) .profilo__etichetta { opacity: 0; }
  .js .profilo .profilo__etichetta { transition: opacity .5s ease .9s; }
}
.profilo__etichetta {
  position: absolute; top: 0;
  transform: translateX(-100%);
  padding: 4px 12px 4px 0; margin-left: -8px;
  border-right: 2px solid var(--fluo);
  text-align: right; font-size: 15px; line-height: 1.3; color: var(--testo-2);
  white-space: nowrap;
}
/* Quando a sinistra della riga dello strappo l'etichetta non ci sta (schermi stretti), sale sopra il
   profilo, allineata all'inizio della fascia dello strappo. Con JS lo decide pagina.js misurando;
   senza JS vale la soglia. Lo spazio sopra il profilo è lo stesso con e senza JS. */
@media (max-width: 1100px) {
  .profilo { margin-top: 84px; }
  .no-js .profilo__etichetta { top: auto; bottom: calc(100% + 10px); left: 0 !important; transform: none; margin-left: 0; padding: 2px 0 2px 12px; border-right: 0; border-left: 2px solid var(--fluo); text-align: left; }
}
.profilo.e-etichetta-sopra { margin-top: 84px; }
.profilo.e-etichetta-sopra .profilo__etichetta { top: auto; bottom: calc(100% + 10px); left: 0 !important; transform: none; margin-left: 0; padding: 2px 0 2px 12px; border-right: 0; border-left: 2px solid var(--fluo); text-align: left; }
.profilo__etichetta strong {
  display: block; font-family: var(--stretto); font-weight: 700; font-size: 20px;
  text-transform: uppercase; color: var(--fluo);
}
.profilo__asse {
  position: relative; height: 28px; margin-top: 8px;
  border-top: 1px solid var(--linea);
  font-family: var(--stretto); font-weight: 700; font-size: 16px; color: var(--testo-3);
  font-variant-numeric: tabular-nums;
}
.profilo__asse span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
.profilo__asse span:first-child { transform: none; }
.profilo__asse span:last-child { transform: translateX(-100%); }
@media (max-width: 599px) { .profilo__tacca--vicina { display: none; } }
.profilo__fonte { margin-top: 16px; font-size: 15px; color: var(--testo-3); }
.profilo__fonte a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fluo); font-weight: 600; }

/* ---------- Programma ---------- */

.programma { list-style: none; padding: 0; margin-top: 40px; border-top: 1px solid var(--linea); }
.programma li {
  display: grid; grid-template-columns: minmax(9em, 30%) 1fr; gap: 16px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--linea);
}
.programma__ora {
  font-family: var(--stretto); font-weight: 700; font-size: 22px; text-transform: uppercase;
  color: var(--fluo); font-variant-numeric: tabular-nums;
}
.programma__cosa { font-size: 20px; }
.nota { margin-top: 20px; font-size: 16px; color: var(--testo-3); }

/* ---------- Ritrovo ---------- */

.ritrovo { display: grid; gap: 40px; align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ritrovo__testo p:not(.occhiello) { margin-top: 20px; color: var(--testo-2); max-width: 46ch; }
/* Il nome fisso dell'immagine: solo dove si lavora (classe nomi-foto messa dallo script in testa). */
.ritrovo__foto { position: relative; }
.nome-foto { display: none; }
.nomi-foto .nome-foto {
  display: block; position: absolute; z-index: 1; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: 4px; background: #b0124f; color: #fff;
  font: 700 16px/1.2 var(--testo-famiglia); letter-spacing: .06em;
}
.ritrovo__foto img {
  width: 100%; max-width: 516px; height: auto; aspect-ratio: 516 / 387;
  border-radius: var(--raggio); border: 1px solid var(--linea);
  object-fit: cover;
}

/* Il logo GoOff, in versione chiara per il fondo scuro (scripts/logo.mjs). */
.logo, .scheda__logo { position: relative; }
/* In cima: «In collaborazione con:» e la fila dei loghi (oggi GoOff; gli altri si aggiungono come
   altre voci della lista, con un nome fisso ciascuno in IMMAGINI.md). */
.marchi {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(14px, 2vw, 24px);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.marchi__con {
  font-family: var(--stretto); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--testo-2);
}
.marchi__loghi {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(18px, 3vw, 32px);
}
.logo { width: clamp(112px, 14vw, 176px); }
.logo--largo { width: clamp(150px, 17vw, 220px); } /* scritte lunghe e basse, come Bike Map */
.logo--compatto { width: clamp(92px, 11.4vw, 143px); } /* più alti che larghi, come Swatt Club: stessa altezza di GoOff */
.nomi-foto .marchi__loghi .logo .nome-foto { top: -30px; left: 0; transform: none; }
.scheda__logo { width: 128px; margin-top: 24px; }
.logo img, .scheda__logo img { width: 100%; height: auto; }
.nomi-foto .logo .nome-foto, .nomi-foto .scheda__logo .nome-foto {
  top: 50%; left: calc(100% + 10px); transform: translateY(-50%);
}

/* ---------- Iscrizione ---------- */

.sezione--iscrizione {
  background:
    linear-gradient(180deg, rgba(255, 179, 26, .06), transparent 40%),
    var(--asfalto);
  border-top: 1px solid var(--linea);
}
.fatti {
  list-style: none; padding: 0; margin-top: 32px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.fatti li {
  display: flex; flex-direction: column; min-width: 140px;
  padding: 10px 16px; border: 1px solid var(--linea); border-radius: var(--raggio);
  background: var(--asfalto-2);
}
.fatti span { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-3); }
.fatti strong { font-family: var(--stretto); font-weight: 700; font-size: 22px; text-transform: uppercase; }

.modulo { margin-top: 40px; display: grid; gap: 20px; }
.modulo__due { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.campo { display: grid; gap: 8px; }
.campo label { font-weight: 600; font-size: 17px; }
.campo__aiuto { font-weight: 400; color: var(--testo-3); font-size: 15px; margin-left: 6px; }
.campo input {
  width: 100%; min-height: 54px; padding: 12px 16px;
  background: var(--asfalto-2); color: var(--testo);
  border: 2px solid var(--linea); border-radius: var(--raggio);
  font-size: 18px;
  transition: border-color .15s ease, background-color .15s ease;
}
.campo input:focus { outline: none; border-color: var(--fluo); background: var(--asfalto-3); }
.campo input:focus-visible { outline: 3px solid var(--fluo); outline-offset: 2px; }
.campo input[aria-invalid="true"] { border-color: var(--errore); }
.campo__errore { min-height: 0; font-size: 15px; color: var(--errore); font-weight: 600; }
.campo__errore:empty { display: none; }
/* La FTP e, sulla stessa riga, la casella «Non lo so» (spuntata, il campo si spegne). */
.ftp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.campo .ftp > input { width: 9em; flex: none; }
.campo .ftp > input:disabled { opacity: .45; }
.campo .ftp__non-so { padding: 0; min-height: 54px; align-items: center; grid-template-columns: 28px auto; font-weight: 400; }
.campo .ftp__non-so input { min-height: 0; padding: 0; border: 0; }
.ftp__non-so .spunta__casella { margin-top: 0; }
.campo--trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.spunta { display: grid; gap: 4px; }
.spunta__riga {
  position: relative;
  display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start;
  min-height: 44px; padding: 10px 0;
  cursor: pointer;
}
.spunta__riga input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.spunta__casella {
  width: 28px; height: 28px; margin-top: -2px;
  border: 2px solid var(--testo-3); border-radius: 4px; background: var(--asfalto-2);
  display: grid; place-items: center;
  transition: background-color .15s ease, border-color .15s ease;
}
.spunta__casella::after {
  content: ""; width: 8px; height: 15px; margin-top: -3px;
  border: solid var(--su-fluo); border-width: 0 3px 3px 0; transform: rotate(45deg);
  opacity: 0;
}
.spunta__riga input:checked + .spunta__casella { background: var(--fluo); border-color: var(--fluo); }
.spunta__riga input:checked + .spunta__casella::after { opacity: 1; }
.spunta__riga input:focus-visible + .spunta__casella { outline: 3px solid var(--fluo); outline-offset: 3px; }
.spunta__riga input[aria-invalid="true"] + .spunta__casella { border-color: var(--errore); }
.spunta__testo { font-size: 17px; color: var(--testo-2); }
.spunta__documento {
  display: inline-flex; align-items: center; justify-self: start;
  min-height: 44px; margin-left: 42px;
  color: var(--fluo); font-weight: 600; font-size: 16px; text-underline-offset: 4px;
}

.modulo__invio { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.modulo__esito { font-weight: 600; font-size: 17px; }
.modulo__esito.e-errore { color: var(--errore); }

/* Iscrizioni non ancora aperte: il modulo si vede, spento, col timbro sopra. */
.modulo-zona { position: relative; overflow-x: clip; } /* il timbro che cade non fa mai scorrere la pagina di lato */
.modulo-zona--presto .modulo { opacity: .28; filter: grayscale(1); user-select: none; }
.timbro {
  position: absolute; z-index: 2; left: 50%; top: 150px;
  transform: translateX(-50%) rotate(-8deg);
  margin: 0; padding: 10px 28px;
  border: 5px solid var(--fluo); border-radius: 10px;
  background: rgba(12, 13, 15, .82);
  color: var(--fluo); white-space: nowrap;
  font-family: var(--stretto); font-style: italic; font-weight: 800;
  font-size: clamp(32px, 9.5vw, 88px); line-height: 1; text-transform: uppercase; letter-spacing: .01em;
  max-width: calc(100% - 24px);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .timbro { animation: timbra .5s cubic-bezier(.2, 1.5, .4, 1) .2s both; }
}
@keyframes timbra { from { opacity: 0; transform: translateX(-50%) rotate(-8deg) scale(1.25); } to { opacity: 1; transform: translateX(-50%) rotate(-8deg) scale(1); } }

.chiuse {
  margin-top: 40px; padding: 24px; border: 2px solid var(--linea); border-radius: var(--raggio);
  background: var(--asfalto-2); color: var(--testo-2);
}
.chiuse__titolo { font-family: var(--stretto); font-weight: 700; font-size: 32px; text-transform: uppercase; color: var(--testo); margin-bottom: 8px; }

/* Il pettorale: l'esito dell'iscrizione */
.pettorale {
  margin-top: 40px; padding: 28px 28px 32px;
  background: var(--testo); color: var(--su-fluo);
  border-radius: 10px;
  max-width: 460px;
  text-align: center;
  position: relative;
  box-shadow: 0 30px 60px -30px rgba(255, 179, 26, .6);
}
.pettorale::before, .pettorale::after {
  content: ""; position: absolute; top: 14px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--asfalto); box-shadow: inset 0 0 0 2px #c9c7bd;
}
.pettorale::before { left: 14px; }
.pettorale::after { right: 14px; }
.pettorale:focus { outline: none; }
.pettorale:focus-visible { outline: 3px solid var(--fluo); outline-offset: 4px; }
.pettorale__alto { font-family: var(--stretto); font-weight: 700; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: #5b5d60; }
.pettorale__numero {
  font-family: var(--stretto); font-style: italic; font-weight: 800;
  font-size: clamp(110px, 30vw, 180px); line-height: .9; font-variant-numeric: tabular-nums;
}
.pettorale__nome { font-family: var(--stretto); font-weight: 700; font-size: 28px; text-transform: uppercase; }
.pettorale__frase { margin-top: 12px; font-size: 17px; color: #3b3d40; }
@media (prefers-reduced-motion: no-preference) {
  .pettorale.e-arrivato { animation: arriva .55s cubic-bezier(.2, 1.4, .4, 1); }
}
@keyframes arriva { from { transform: translateY(30px) rotate(-4deg) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Regolamento ---------- */

.regole { margin-top: 32px; padding-left: 1.4em; display: grid; gap: 16px; color: var(--testo-2); }
.regole li::marker { font-family: var(--stretto); font-weight: 700; color: var(--fluo); }
.regole strong { color: var(--testo); }

/* ---------- Piede ---------- */

.piede { padding: 56px 0 120px; border-top: 1px solid var(--linea); }
.piede__corpo { display: grid; gap: 8px; }
.piede__marchio { font-family: var(--stretto); font-style: italic; font-weight: 800; font-size: 34px; }
.piede__riga { color: var(--testo-2); }
.piede__link { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; }
.piede__link a { display: inline-flex; align-items: center; min-height: 44px; color: var(--testo-2); text-underline-offset: 4px; }
/* La chiamata al gioco: grande, piena, col cronometro. */
.gioco-invito {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  width: min(100%, 520px); height: 88px; padding: 0 32px;
  border: 0; border-radius: 10px; background: var(--fluo); color: var(--su-fluo);
  cursor: pointer;
  font-family: var(--stretto); font-style: italic; font-weight: 800;
  font-size: clamp(30px, 8vw, 44px); letter-spacing: .01em; text-transform: uppercase;
  box-shadow: 0 18px 40px -16px rgba(255, 179, 26, .7);
  transition: transform .12s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.gioco-invito svg { width: 44px; height: 44px; flex: none; }
.gioco-invito:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .gioco-invito:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -16px rgba(255, 179, 26, .85); }
  .gioco-invito:active { transform: scale(.97); }
}
@media (prefers-reduced-motion: no-preference) {
  .gioco-invito { animation: entra .5s ease both; }
}
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Indice sotto il pollice ---------- */

.indice {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.indice__bottone {
  position: relative;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--linea); background: var(--asfalto-3); color: var(--testo);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .9);
  transition: transform .12s ease;
}
.indice__bottone:active { transform: scale(.94); }
.indice__bottone svg { width: 48px; height: 48px; }
.indice__bottone path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.indice__anello {
  fill: none; stroke: var(--fluo); stroke-width: 2.5;
  stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: center;
  transition: stroke-dasharray .3s ease;
}
.indice__etichetta {
  position: absolute; right: 64px; bottom: 12px;
  padding: 4px 10px; border-radius: 4px;
  background: var(--asfalto-3); border: 1px solid var(--linea);
  font-family: var(--stretto); font-weight: 700; font-size: 16px; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translateX(6px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.indice__etichetta.e-visibile { opacity: 1; transform: none; }
.indice__pannello {
  min-width: 220px; max-height: 70dvh; overflow: auto; overscroll-behavior: contain;
  padding: 8px; border-radius: 10px;
  background: var(--asfalto-3); border: 1px solid var(--linea);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .95);
}
.indice__pannello ul { list-style: none; padding: 0; margin: 0; }
.indice__pannello a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 6px;
  text-decoration: none; font-weight: 600;
}
.indice__pannello a[aria-current="true"] { color: var(--fluo); }
.indice__su { border-top: 1px solid var(--linea); margin-top: 4px; color: var(--testo-2); }
@media (hover: hover) and (pointer: fine) {
  .indice__pannello a:hover { background: var(--asfalto-2); }
}

/* ---------- Pagine semplici (privacy, 404) ---------- */

.pagina { padding: clamp(48px, 8vw, 96px) 0; }
.pagina h1 { font-family: var(--stretto); font-weight: 700; font-size: clamp(44px, 8vw, 84px); line-height: .95; text-transform: uppercase; }
.pagina h2 { font-family: var(--stretto); font-weight: 700; font-size: 28px; text-transform: uppercase; margin-top: 40px; }
.pagina p, .pagina li { color: var(--testo-2); margin-top: 12px; max-width: 68ch; }
.pagina ul { padding-left: 1.2em; }
[data-segnaposto] { font-size: 15px; color: var(--testo-3); background: var(--asfalto-3); padding: 1px 6px; border-radius: 4px; }

.fuori { display: grid; gap: 24px; }
.fuori__disegno { width: 100%; max-width: 520px; height: auto; }
.fuori__disegno path { fill: none; stroke: var(--fluo); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.fuori__disegno circle { fill: var(--testo); }
.fuori__suggerimento a { color: var(--fluo); font-weight: 600; }
.fuori__ricerca { display: grid; gap: 8px; max-width: 520px; }
.fuori__ricerca label { font-weight: 600; }
.fuori__ricerca input {
  min-height: 54px; padding: 12px 16px; border: 2px solid var(--linea); border-radius: var(--raggio);
  background: var(--asfalto-2); font-size: 18px;
}
.fuori__risultati { list-style: none; padding: 0 !important; display: grid; gap: 4px; }
.fuori__risultati a { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 0; text-decoration: none; }
.fuori__risultati strong { color: var(--testo); }
.fuori__risultati span { font-size: 15px; color: var(--testo-3); }

@media (max-width: 1020px) {
  .numeri { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .numeri { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .programma li { grid-template-columns: 1fr; gap: 2px; }
  .corsa__tempo { top: -18px; }
  .profilo__etichetta { font-size: 14px; }
  .profilo__etichetta strong { font-size: 18px; }
}