/* =========================================================================
   Seriana Basket — foglio di stile principale
   Colori e impianto grafico ripresi dal mockup approvato.
   ========================================================================= */

/* --- Caratteri -----------------------------------------------------------
   Per rispettare il GDPR i caratteri NON vengono caricati da Google:
   vanno scaricati una volta e messi in assets/fonts/.
   Finché non ci sono, il sito usa i caratteri di sistema (resta leggibile).
   Togliere il commento dopo aver caricato i file .woff2.

@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-800.woff2') format('woff2');
  font-weight: 800; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
--------------------------------------------------------------------------- */

:root {
  /* ---------------------------------------------------------------------
     Palette ufficiale, campionata direttamente dal logo Seriana Basket.
     Non aggiungere colori fuori da questo elenco.
     --------------------------------------------------------------------- */
  --blu-notte:   #10142C;  /* contorno dello scudo — testata, sezioni scure */
  --blu:         #1E306C;  /* fondo dello scudo — footer, blocchi pieni     */
  --blu-medio:   #1260AE;  /* montagne — collegamenti, etichette giovanili  */
  --blu-chiaro:  #5E9BD1;  /* neve e fiume — dettagli, stati attivi         */
  --rosso:       #E41836;  /* lampi — bottoni e accenti                     */
  --rosso-cupo:  #B21029;  /* rosso al passaggio del mouse                  */
  --arancio:     #F67230;  /* pallone — usato con parsimonia                */

  --grigio:      #F1F2F5;
  --grigio-med:  #D7DAE1;
  --inchiostro:  #171A25;
  --testo-tenue: #596070;
  --bianco:      #FFFFFF;

  /* Caratteri */
  --titoli: 'Barlow Condensed', 'Oswald', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --testo:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Misure */
  --larghezza: 1200px;
  --gutter: 1.25rem;
  --raggio: 6px;
}

/* --- Base ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--testo);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--inchiostro);
  background: var(--bianco);
}

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

a { color: var(--blu-medio); }

h1, h2, h3 {
  font-family: var(--titoli);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}

p { margin: 0 0 1rem; max-width: 68ch; }

ul { margin: 0; padding: 0; list-style: none; }

.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visuale-nascosta {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.salta {
  position: absolute; left: -9999px;
  background: var(--rosso); color: #fff; padding: .75rem 1rem; z-index: 100;
}
.salta:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 3px solid var(--rosso);
  outline-offset: 2px;
}

/* --- Bottoni ------------------------------------------------------------- */

.bottone {
  display: inline-block;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  padding: .7rem 1.6rem;
  border-radius: var(--raggio);
  background: var(--rosso);
  color: #fff;
  border: 2px solid var(--rosso);
  transition: background-color .15s ease, border-color .15s ease;
}
.bottone:hover { background: var(--rosso-cupo); border-color: var(--rosso-cupo); }

.bottone--vuoto {
  background: transparent;
  color: var(--blu);
  border-color: var(--grigio-med);
  font-size: .9375rem;
  padding: .45rem 1rem;
}
.bottone--vuoto:hover { background: var(--blu); border-color: var(--blu); color: #fff; }

.bottone--chiaro {
  background: var(--rosso);
  border-color: var(--rosso);
  color: #fff;
}

/* --- Titoli di sezione ---------------------------------------------------- */

.titolo-sezione {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  text-transform: uppercase;
  color: var(--blu-notte);
  margin: 0;
  padding-bottom: .45rem;
  position: relative;
}
.titolo-sezione::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 56px; height: 4px;
  background: var(--rosso);
}
.titolo-sezione--chiaro { color: #fff; }
.titolo-sezione--centro { text-align: center; }
.titolo-sezione--centro::after { left: 50%; transform: translateX(-50%); }

.intestazione-sezione {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.vuoto {
  padding: 2rem 0;
  color: var(--testo-tenue);
}
.vuoto--chiaro { color: rgba(255,255,255,.75); text-align: center; }

/* --- Testata (scura, con il logo scontornato) ------------------------------ */

.testata {
  background: var(--blu-notte);
  position: sticky;
  top: 0;
  z-index: 50;
}

.testata__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 88px;
}

.testata__logo { display: block; line-height: 0; }
.testata__logo img { height: 62px; width: auto; }

.navigazione ul {
  display: flex;
  align-items: center;
  gap: .15rem;
}

.navigazione a {
  display: block;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: rgba(255,255,255,.86);
  text-decoration: none;
  padding: .6rem .75rem;
  border-radius: 4px;
}
.navigazione a:hover { color: #fff; background: rgba(255,255,255,.08); }
.navigazione a[aria-current="page"] { color: #fff; background: var(--rosso); }

.apri-menu {
  display: none;
  align-items: center;
  gap: .55rem;
  background: none;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px;
  color: #fff;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  padding: .5rem .8rem;
  cursor: pointer;
}
.apri-menu__barre,
.apri-menu__barre::before,
.apri-menu__barre::after {
  display: block; width: 20px; height: 2px; background: #fff;
}
.apri-menu__barre { position: relative; }
.apri-menu__barre::before,
.apri-menu__barre::after { content: ''; position: absolute; left: 0; }
.apri-menu__barre::before { top: -6px; }
.apri-menu__barre::after  { top: 6px; }

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

.apertura {
  position: relative;
  background: var(--blu-notte);
}

.apertura__slide { position: relative; }

.apertura__sfondo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-color: var(--blu);
}
.apertura__sfondo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(16,20,44,.95) 0%, rgba(16,20,44,.80) 45%, rgba(16,20,44,.28) 100%);
}

.apertura__contenuto {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  color: #fff;
}

.apertura__stagione {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 .6rem;
  padding-left: 3.25rem;
  position: relative;
}
.apertura__stagione::before {
  content: '';
  position: absolute; left: 0; top: .7em;
  width: 44px; height: 3px; background: var(--rosso);
}

.apertura__titolo {
  font-size: clamp(2.75rem, 8vw, 5.25rem);
  text-transform: uppercase;
  margin: 0 0 1rem;
  max-width: 12ch;
}

.apertura__sottotitolo {
  font-size: 1.125rem;
  max-width: 42ch;
  color: rgba(255,255,255,.9);
  margin-bottom: 1.75rem;
}

.apertura__punti {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
}
.apertura__punto {
  width: 26px; height: 5px;
  border: 0; padding: 0;
  background: rgba(255,255,255,.4);
  cursor: pointer;
}
.apertura__punto--attivo { background: var(--rosso); }

/* --- Ultime news --------------------------------------------------------- */

.notizie { padding-block: clamp(3rem, 6vw, 4.5rem); }
.notizie--seconda { padding-top: clamp(2rem, 4vw, 3rem); }

.griglia-notizie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.scheda-notizia {
  background: #fff;
  border: 1px solid var(--grigio-med);
  border-radius: var(--raggio);
  overflow: hidden;
}

.scheda-notizia__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.scheda-notizia__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--grigio);
}
.scheda-notizia__foto img { width: 100%; height: 100%; object-fit: cover; }

.etichetta {
  position: absolute;
  top: .6rem; left: .6rem;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  padding: .2rem .6rem;
  border-radius: 3px;
  background: var(--blu);
}
.cat--prima      { background: var(--rosso); }
.cat--giovanili  { background: var(--blu-medio); }
.cat--minibasket { background: var(--blu-notte); }
.cat--societa    { background: var(--blu); }

.scheda-notizia__testo {
  padding: .9rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.scheda-notizia__titolo {
  font-size: 1.25rem;
  line-height: 1.15;
  text-transform: none;
  color: var(--blu-notte);
  margin-bottom: .4rem;
}
.scheda-notizia__link:hover .scheda-notizia__titolo { color: var(--rosso); }

.scheda-notizia__estratto {
  font-size: .9375rem;
  color: var(--testo-tenue);
  margin-bottom: .75rem;
}

.scheda-notizia__data {
  margin: auto 0 0;
  font-size: .8125rem;
  color: var(--testo-tenue);
}

/* --- La nostra storia ---------------------------------------------------- */

.storia {
  background: var(--blu-notte);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.storia__griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.storia__testo p {
  color: rgba(255,255,255,.85);
  margin-block: 1.25rem;
}

.cronologia {
  border-left: 2px solid rgba(255,255,255,.18);
  padding-left: 1.75rem;
}

.cronologia__voce {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: 1.75rem;
  position: relative;
}
.cronologia__voce:last-child { padding-bottom: 0; }
.cronologia__voce::before {
  content: '';
  position: absolute;
  left: calc(-1.75rem - 6px);
  top: .55em;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--rosso);
}

.cronologia__anno {
  font-family: var(--titoli);
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--rosso);
  text-transform: uppercase;
}

.cronologia__fatto { color: rgba(255,255,255,.85); }

/* --- Obiettivi ----------------------------------------------------------- */

.obiettivi {
  background: var(--grigio);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.griglia-obiettivi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
  text-align: center;
}

.obiettivo p {
  margin: 0;
  font-size: .9375rem;
  color: var(--testo-tenue);
}

.obiettivo__titolo {
  font-size: 1.1875rem;
  text-transform: uppercase;
  color: var(--blu-notte);
  margin-bottom: .5rem;
  padding-top: 1rem;
  border-top: 3px solid var(--rosso);
  display: inline-block;
}

/* --- Le nostre squadre ---------------------------------------------------- */

.squadre {
  background: var(--blu);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.griglia-squadre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.scheda-squadra__link {
  position: relative;
  display: block;
  height: 260px;
  border-radius: var(--raggio);
  overflow: hidden;
  text-decoration: none;
  background: var(--blu-notte);
}

.scheda-squadra__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}

.scheda-squadra__link::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,20,44,.93), rgba(16,20,44,.15));
}

.scheda-squadra__nome,
.scheda-squadra__azione {
  position: relative;
  z-index: 1;
  display: block;
  color: #fff;
}

.scheda-squadra__nome {
  font-family: var(--titoli);
  font-weight: 800;
  font-size: 1.75rem;
  text-transform: uppercase;
  line-height: 1.1;
  position: absolute;
  left: 1.25rem; right: 1.25rem; bottom: 3.25rem;
}

.scheda-squadra__azione {
  position: absolute;
  left: 1.25rem; bottom: 1.25rem;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: .9375rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  background: var(--rosso);
  padding: .3rem .8rem;
  border-radius: 3px;
}

/* --- Galleria ------------------------------------------------------------ */

.galleria { padding-block: clamp(3rem, 6vw, 4.5rem); }

.striscia-galleria {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.striscia-galleria img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: var(--raggio);
  background: var(--grigio);
}

/* --- Sponsor: striscia scorrevole ---------------------------------------- */

.sponsor {
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--grigio);
  border-block: 1px solid var(--grigio-med);
}
.sponsor + .sponsor { border-top: 0; }
.sponsor .sponsor__vetrina { margin-top: 0; }

.sponsor__vetrina {
  overflow: hidden;
  margin-top: 2rem;
}

.sponsor__pista {
  display: flex;
  align-items: center;
  will-change: transform;
}

.sponsor__scheda {
  flex: 0 0 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1.25rem;
}

.sponsor__scheda img {
  /* Altezza FISSA e non massima: così un logo piccolo viene ingrandito fino
     alla stessa altezza degli altri, invece di restare minuscolo. contain
     mantiene le proporzioni, quindi niente si deforma: ognuno tiene la sua
     larghezza naturale ma tutti stanno sulla stessa riga ottica. */
  height: 52px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .15s ease, opacity .15s ease;
}
.sponsor__scheda a:hover img,
.sponsor__scheda a:focus-visible img { filter: none; opacity: 1; }

@media (max-width: 900px) { .sponsor__scheda { flex-basis: 33.333%; } }
@media (max-width: 560px) { .sponsor__scheda { flex-basis: 50%; } }

/* =========================================================================
   Impaginazione a due colonne (tutte le pagine tranne la home)
   ========================================================================= */

.impaginato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem);
  align-items: start;
}

/* --- Colonna laterale ----------------------------------------------------- */

.fianco {
  position: sticky;
  top: 108px;
  display: grid;
  gap: 1.25rem;
  /* Se la colonna è più alta della finestra scorre per conto suo: così
     resta agganciata durante la lettura invece di trascinare la pagina. */
  max-height: calc(100vh - 128px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Barra di scorrimento discreta */
  scrollbar-width: thin;
}
.fianco::-webkit-scrollbar { width: 6px; }
.fianco::-webkit-scrollbar-thumb {
  background: var(--grigio-med);
  border-radius: 3px;
}

.fianco__blocco {
  border: 1px solid var(--grigio-med);
  border-radius: var(--raggio);
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--bianco);
}

.fianco__titolo {
  font-size: 1.1875rem;
  text-transform: uppercase;
  color: var(--bianco);
  background: var(--blu-notte);
  margin: -1.1rem -1.25rem 1rem;
  padding: .6rem 1.25rem;
  border-radius: var(--raggio) var(--raggio) 0 0;
  border-bottom: 3px solid var(--rosso);
}

/* Elenco squadre con sponsor intercalati */

.fianco__squadre { display: block; }

.fianco__squadra {
  border-bottom: 1px solid var(--grigio-med);
}
.fianco__squadra a {
  display: block;
  padding: .55rem .25rem;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.0625rem;
  text-transform: uppercase;
  color: var(--blu-notte);
  text-decoration: none;
}
.fianco__squadra a:hover { color: var(--rosso); }

.fianco__intermezzo {
  padding-block: .35rem;
  border-bottom: 1px solid var(--grigio-med);
  /* Fondo bianco: i loghi degli sponsor sono disegnati per fondo chiaro e
     sul grigio perdevano contrasto. */
  background: var(--bianco);
  margin-inline: -1.25rem;
  padding-inline: 1.25rem;
}

.fianco__sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  opacity: 1;
  transition: opacity .26s ease;
}
.fianco__sponsor.in-uscita { opacity: 0; }
.fianco__sponsor img { height: 48px; width: auto; max-width: 160px; object-fit: contain; }

.fianco__sponsor--coda {
  margin: .75rem -1.25rem -1.25rem;
  padding: .5rem 1.25rem;
  background: var(--bianco);
  border-radius: 0 0 var(--raggio) var(--raggio);
}

/* Ultimi articoli */

.fianco__articoli li { border-bottom: 1px solid var(--grigio-med); }
.fianco__articoli li:last-child { border-bottom: 0; }
.fianco__articoli a {
  display: grid;
  gap: .1rem;
  padding-block: .6rem;
  text-decoration: none;
  color: inherit;
}
.fianco__titolino {
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.3;
  color: var(--blu-notte);
}
.fianco__articoli a:hover .fianco__titolino { color: var(--rosso); }

.fianco__tutti { margin: .85rem 0 0; }
.fianco__tutti a {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rosso);
  text-decoration: none;
}
.fianco__tutti a:hover { text-decoration: underline; }

/* Partite */

.fianco__partite li {
  display: grid;
  gap: .1rem;
  padding-block: .65rem;
  border-bottom: 1px solid var(--grigio-med);
}
.fianco__partite li:last-child { border-bottom: 0; }

.fianco__data {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rosso);
}
.fianco__sfida { font-size: .9375rem; line-height: 1.35; }
.fianco__sfida strong { color: var(--blu-notte); }
.fianco__luogo { font-size: .8125rem; color: var(--testo-tenue); }

.fianco__vuoto { font-size: .9375rem; color: var(--testo-tenue); margin: 0; }

.bottone--piccolo {
  font-size: .9375rem;
  padding: .45rem 1rem;
  margin-top: .5rem;
}

/* --- Briciole di pane ----------------------------------------------------- */

.briciole {
  background: var(--grigio);
  border-bottom: 1px solid var(--grigio-med);
  font-size: .875rem;
}
.briciole ol {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  padding-block: .75rem;
  list-style: none;
  margin: 0;
}
.briciole li + li::before { content: '/'; color: var(--grigio-med); margin-right: .6rem; }
.briciole a { color: var(--testo-tenue); text-decoration: none; }
.briciole a:hover { color: var(--blu-medio); text-decoration: underline; }
.briciole [aria-current] { color: var(--inchiostro); }

/* --- Articolo ------------------------------------------------------------- */

.articolo__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}

.articolo__meta .etichetta { position: static; }

.articolo__data {
  font-size: .875rem;
  color: var(--testo-tenue);
}

.articolo__titolo {
  font-size: clamp(2rem, 4.2vw, 3rem);
  color: var(--blu-notte);
  text-transform: none;
  margin-bottom: 1.5rem;
  max-width: 22ch;
}

/* La copertina sta dentro un riquadro con proporzioni fisse: le foto del
   vecchio archivio hanno formati di tutti i tipi, comprese locandine molto
   verticali che a piena larghezza riempivano tutto lo schermo del telefono
   prima ancora di far vedere una riga di testo. */
.articolo__copertina {
  margin: 0 0 1.75rem;
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--grigio);
}
.articolo__copertina img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  border-radius: var(--raggio);
}

@media (max-width: 620px) {
  /* Su telefono il limite è più severo: la foto deve lasciare spazio
     all'inizio dell'articolo senza costringere a scorrere. */
  .articolo__copertina img { max-height: 48vh; }
}

/* Il testo storico contiene stili vecchi: qui vengono neutralizzati
   in modo che l'articolo resti leggibile anche su telefono. */
.articolo__testo { font-size: 1.0625rem; }
.articolo__testo p { max-width: 70ch; margin-bottom: 1.1rem; }
.articolo__testo img {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
  border-radius: var(--raggio);
  margin: .5rem 0 1rem;
  float: none !important;
}
.articolo__testo span,
.articolo__testo div,
.articolo__testo p {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  background: none !important;
}
.articolo__testo strong { color: var(--blu-notte); }
.articolo__testo a { color: var(--blu-medio); }
.articolo__testo table { width: 100% !important; border-collapse: collapse; }
.articolo__testo table td { padding: .35rem .5rem; }

.articolo__galleria-link { margin-top: 1.5rem; }

.articolo__scorrimento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--grigio-med);
}

.articolo__scorrimento-voce {
  display: grid;
  gap: .2rem;
  text-decoration: none;
  color: inherit;
  padding: .75rem 1rem;
  border: 1px solid var(--grigio-med);
  border-radius: var(--raggio);
}
.articolo__scorrimento-voce:hover { border-color: var(--rosso); }
.articolo__scorrimento-voce--destra { text-align: right; }

.articolo__scorrimento-etichetta {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rosso);
}
.articolo__scorrimento-titolo {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--blu-notte);
}

/* --- Richiamo finale ------------------------------------------------------ */

.richiamo {
  background: var(--blu-notte);
  color: #fff;
  padding-block: 2.5rem;
}

.richiamo__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.richiamo__titolo {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  text-transform: uppercase;
  margin: 0 0 .25rem;
}
.richiamo__testo { margin: 0; color: rgba(255,255,255,.82); }

/* --- Piè di pagina (scuro) ------------------------------------------------- */

.pieno {
  background: var(--blu);
  color: rgba(255,255,255,.8);
  font-size: .9375rem;
}

.pieno__sponsor {
  padding-block: 2.25rem 1.75rem;
  /* Fascia chiara: i loghi degli sponsor sono quasi tutti disegnati per
     fondo bianco, e su blu scuro diventavano illeggibili. */
  background: var(--bianco);
  color: var(--blu-notte);
  border-bottom: 0;
}
.pieno__sponsor .pieno__titolo--centro { color: var(--blu-notte); }

.pieno__titolo--centro {
  display: block;
  text-align: center;
  border-bottom: 0;
  margin-bottom: 1.5rem;
}
.pieno__titolo--centro::after {
  content: '';
  display: block;
  width: 56px; height: 3px;
  background: var(--rosso);
  margin: .4rem auto 0;
}

.pieno__sponsor-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 2.5rem;
}
.pieno__sponsor-lista img {
  /* Vedi la striscia: altezza fissa per uniformare, contain per non
     deformare. L'altezza vera la impone il livello, qui sotto. */
  width: auto;
  object-fit: contain;
  opacity: .92;
  transition: opacity .15s ease, transform .15s ease;
}
.pieno__sponsor-lista a:hover img { opacity: 1; transform: translateY(-2px); }

.pieno__griglia {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-block: 3rem 2.5rem;
}

.pieno p { margin: 0 0 .5rem; }

.pieno__ragione { color: #fff; font-weight: 600; }

.pieno__societa img {
  margin-bottom: 1rem;
  height: 76px;
  width: auto;
}

.pieno__titolo {
  font-size: 1.125rem;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}

.pieno__colonna li { margin-bottom: .45rem; }

.pieno a { color: rgba(255,255,255,.8); text-decoration: none; }
.pieno a:hover { color: #fff; text-decoration: underline; }

.pieno__social {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-top: 1rem;
}

.pieno__chiusura {
  border-top: 1px solid rgba(255,255,255,.15);
  background: var(--blu-notte);
}

.pieno__chiusura-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1rem;
  font-size: .875rem;
}

.pieno__chiusura p { margin: 0; }

.pieno__servizio {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}

/* =========================================================================
   Adattamento a schermi piccoli
   ========================================================================= */

@media (max-width: 1080px) {
  .griglia-notizie   { grid-template-columns: repeat(2, 1fr); }
  .griglia-obiettivi { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .striscia-galleria { grid-template-columns: repeat(3, 1fr); }
  .pieno__griglia    { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 960px) {
  .impaginato { grid-template-columns: 1fr; }
  /* Sotto i 960px la colonna laterale va in fondo alla pagina: niente
     posizione agganciata e niente altezza limitata, altrimenti su telefono
     comparirebbe un riquadrino che scorre dentro la pagina. */
  .fianco {
    position: static;
    max-height: none;
    overflow: visible;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  /* Su telefono una colonna sola: due sono troppo strette per leggere */
  .fianco { grid-template-columns: 1fr; }
  .fianco__squadra-foto img { aspect-ratio: 16 / 6; }
}

@media (max-width: 860px) {
  .apri-menu { display: inline-flex; }

  .navigazione {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--blu-notte);
    border-top: 1px solid rgba(255,255,255,.12);
    padding: .5rem var(--gutter) 1rem;
  }
  .navigazione.aperto { display: block; }
  .navigazione ul { flex-direction: column; align-items: stretch; gap: 0; }
  .navigazione a { padding: .85rem .5rem; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; }

  .testata__riga { position: relative; flex-wrap: wrap; }

  .storia__griglia { grid-template-columns: 1fr; }
  .cronologia { margin-top: .5rem; }

  .intestazione-sezione { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .griglia-notizie   { grid-template-columns: 1fr; }
  .griglia-obiettivi { grid-template-columns: 1fr; }
  .striscia-galleria { grid-template-columns: repeat(2, 1fr); }
  .pieno__griglia    { grid-template-columns: 1fr; }
  .cronologia__voce  { grid-template-columns: 1fr; gap: .1rem; }
  .richiamo__riga    { flex-direction: column; align-items: flex-start; }
  .apertura__titolo  { max-width: none; }
  .fianco            { grid-template-columns: 1fr; }
  .articolo__scorrimento { grid-template-columns: 1fr; }
  .articolo__scorrimento-voce--destra { text-align: left; }
}

/* --- Rispetto delle preferenze di sistema -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .testata, .apertura__punti, .richiamo, .pieno__servizio { display: none; }
  body { color: #000; }
}

/* --- Overtime (riviste) --------------------------------------------------- */

.annate {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.25rem 0 2rem;
}
.annate a {
  display: block;
  padding: .35rem .8rem;
  border: 1px solid var(--grigio-med);
  border-radius: 4px;
  text-decoration: none;
  font-size: .9375rem;
  color: var(--blu-notte);
}
.annate a:hover { border-color: var(--rosso); color: var(--rosso); }
.annate a[aria-current] { background: var(--blu-notte); border-color: var(--blu-notte); color: #fff; }

.griglia-riviste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
}

.rivista a {
  display: grid;
  gap: .35rem;
  text-decoration: none;
  color: inherit;
}

.rivista__copertina {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--grigio-med);
  border-radius: var(--raggio);
  box-shadow: 0 3px 10px rgba(16,20,44,.12);
  transition: transform .15s ease;
}
.rivista a:hover .rivista__copertina { transform: translateY(-3px); }

.rivista__senza-copertina {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  background: var(--grigio);
  border: 1px dashed var(--grigio-med);
  border-radius: var(--raggio);
  font-family: var(--titoli);
  font-weight: 700;
  color: var(--testo-tenue);
}

.rivista__titolo {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.15;
  color: var(--blu-notte);
}
.rivista a:hover .rivista__titolo { color: var(--rosso); }
.rivista__meta { font-size: .8125rem; color: var(--testo-tenue); }

/* --- Foto delle squadre in colonna laterale ------------------------------- */

.fianco__squadra-nome {
  display: block;
  padding: .55rem .25rem .35rem;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.0625rem;
  text-transform: uppercase;
  color: var(--blu-notte);
  text-decoration: none;
}
.fianco__squadra-nome:hover { color: var(--rosso); }

.fianco__squadra-foto { padding-bottom: .6rem; }
.fianco__squadra-foto img {
  width: 100%;
  /* Riquadro basso e largo invece di 4/3: con otto squadre la colonna
     diventava più lunga dell'articolo, lasciando una striscia vuota. */
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center;
  border-radius: var(--raggio);
  background: var(--grigio);
}

/* --- Contenuto degli articoli vecchi ---------------------------------------
   Quindici anni di articoli scritti con editor diversi: dentro ci sono
   immagini con larghezza fissa, tabelle usate per impaginare e testo
   allineato con i float. Su telefono tutto questo esce dallo schermo e
   costringe a scorrere in orizzontale. Qui si rimette in riga. */

.articolo__testo img,
.testo-lungo img {
  max-width: 100% !important;
  height: auto !important;
  /* Le misure fisse scritte nell'HTML vengono ignorate */
  width: auto !important;
  border-radius: var(--raggio);
}

/* Le immagini allineate a lato: su schermo stretto vanno a tutta larghezza */
.articolo__testo img[align="left"],
.articolo__testo img[align="right"],
.articolo__testo img[style*="float"] {
  float: none !important;
  display: block;
  margin: 1rem auto !important;
}

/* Le tabelle larghe scorrono da sole invece di allargare la pagina */
.articolo__testo table,
.testo-lungo table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

/* Parole lunghissime e indirizzi incollati non sfondano più il riquadro */
.articolo__testo,
.testo-lungo {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Larghezze fisse ereditate dai vecchi articoli */
.articolo__testo [width],
.articolo__testo [style*="width"] {
  max-width: 100% !important;
}

/* Il riquadro dell'articolo non deve mai allargare la pagina */
.impaginato__principale { min-width: 0; overflow-wrap: break-word; }

/* --- Foto ingrandibili ----------------------------------------------------- */

.ingrandibile { cursor: zoom-in; }

body.modale-aperto { overflow: hidden; }

.modale {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: clamp(.75rem, 3vw, 2.5rem);
  background: rgba(16, 20, 44, .94);
}
.modale[hidden] { display: none; }

.modale__figura {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.modale__immagine {
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  width: auto;
  border-radius: 4px;
  background: #fff;
}

.modale__didascalia {
  color: rgba(255,255,255,.9);
  font-size: .9375rem;
  text-align: center;
  max-width: 60ch;
}

.modale__chiudi {
  position: absolute;
  top: 1rem;
  right: 1rem;
  /* Sta sopra a tutto il resto del riquadro: su foto verticali molto grandi
     la figura arrivava a coprirlo, e si restava senza via d'uscita
     evidente. */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  /* Fondo pieno e non trasparente: sulle foto chiare una × bianca su velo
     trasparente semplicemente non si vedeva. */
  background: rgba(16, 20, 44, .75);
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.modale__chiudi:hover {
  background: var(--rosso);
  border-color: var(--rosso);
  transform: scale(1.06);
}
.modale__chiudi:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.modale__freccia {
  flex: 0 0 auto;
  width: 52px;
  height: 68px;
  font-size: 2.2rem;
  line-height: 1;
  color: #fff;
  background: rgba(16, 20, 44, .7);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease;
}
.modale__freccia:hover { background: var(--rosso); border-color: var(--rosso); }
.modale__freccia:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.modale__freccia[hidden] { display: none; }

@media (max-width: 560px) {
  .modale__freccia {
    position: absolute;
    bottom: 1rem;
    width: 56px;
  }
  .modale__freccia--prima { left: 1rem; }
  .modale__freccia--dopo  { right: 1rem; }
  .modale__immagine { max-height: calc(100vh - 14rem); }
  .modale__figura { padding-top: 3.5rem; }
  .modale__chiudi { width: 44px; height: 44px; font-size: 1.75rem; }
}

/* --- Banner cookie --------------------------------------------------------- */

.cookie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 190;
  background: var(--blu-notte);
  color: rgba(255,255,255,.9);
  border-top: 3px solid var(--rosso);
  box-shadow: 0 -6px 24px rgba(16,20,44,.3);
}
.cookie[hidden] { display: none; }

.cookie__corpo {
  max-width: var(--larghezza);
  margin-inline: auto;
  padding: 1.25rem var(--gutter);
}

.cookie__titolo {
  font-size: 1.25rem;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .4rem;
}
.cookie__testo { font-size: .9375rem; max-width: 80ch; margin-bottom: 1rem; }
.cookie a { color: #fff; }

.cookie__scelte { display: grid; gap: .6rem; margin-bottom: 1rem; }
.cookie__voce {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  align-items: start;
  font-size: .9375rem;
}
.cookie__voce strong { color: #fff; }

.cookie__bottoni { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie__bottoni .bottone--vuoto { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.cookie__bottoni .bottone--vuoto:hover { background: #fff; color: var(--blu-notte); border-color: #fff; }
.cookie__bottoni [hidden] { display: none; }

/* --- Elementi comuni alle pagine interne ----------------------------------- */

.impaginato__principale > h1 { margin-bottom: 1rem; }

.testo-lungo p, .testo-lungo li { max-width: 70ch; }
.testo-lungo h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  text-transform: uppercase;
  color: var(--blu-notte);
  margin-top: 2rem;
}
.testo-lungo h3 { font-size: 1.2rem; color: var(--blu-notte); margin-top: 1.5rem; }
.testo-lungo ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
.testo-lungo li { margin-bottom: .35rem; }
.testo-lungo table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.testo-lungo th, .testo-lungo td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--grigio-med);
  text-align: left;
  vertical-align: top;
}
.testo-lungo thead th { background: var(--grigio); color: var(--blu-notte); }

/* --- Elenchi delle pagine interne ----------------------------------------- */

.titolo-sezione--piccolo { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 2.25rem; }

.filtri-pubblici {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-block: 1.25rem;
}
.filtri-pubblici label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .2rem; }
.filtri-pubblici select {
  font: inherit;
  padding: .45rem .6rem;
  border: 1px solid var(--grigio-med);
  border-radius: 4px;
  background: #fff;
}

.conteggio { color: var(--testo-tenue); font-size: .9375rem; }

.griglia-notizie--elenco { grid-template-columns: repeat(3, 1fr); }
.griglia-notizie--due    { grid-template-columns: repeat(2, 1fr); }

.paginazione-pubblica { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 2rem; }
.paginazione-pubblica a {
  display: block;
  padding: .4rem .8rem;
  border: 1px solid var(--grigio-med);
  border-radius: 4px;
  text-decoration: none;
  color: var(--blu-notte);
}
.paginazione-pubblica a[aria-current] { background: var(--blu-notte); border-color: var(--blu-notte); color: #fff; }

/* Elenco squadre */

.elenco-squadre {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.squadra-scheda a {
  display: block;
  text-decoration: none;
  border: 1px solid var(--grigio-med);
  border-radius: var(--raggio);
  overflow: hidden;
  background: #fff;
}
.squadra-scheda img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.squadra-scheda__nome {
  display: block;
  padding: .7rem .9rem;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.1875rem;
  text-transform: uppercase;
  color: var(--blu-notte);
}
.squadra-scheda a:hover .squadra-scheda__nome { color: var(--rosso); }

.squadra-foto { margin: 0 0 1.5rem; }
.squadra-foto img { width: 100%; border-radius: var(--raggio); }

/* Rosa */

.rosa {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .5rem 1.5rem;
}
.rosa__voce {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  padding-block: .4rem;
  border-bottom: 1px solid var(--grigio-med);
}
.rosa__numero {
  font-family: var(--titoli);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--rosso);
  min-width: 2ch;
}

/* Allenamenti */

.allenamenti li {
  display: grid;
  grid-template-columns: 7rem 8rem 1fr;
  gap: .5rem;
  padding-block: .55rem;
  border-bottom: 1px solid var(--grigio-med);
}
.allenamenti__data {
  font-family: var(--titoli);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blu-notte);
}
.allenamenti__ora { color: var(--rosso); font-weight: 600; }
.allenamenti__luogo { color: var(--testo-tenue); }

/* Foto storiche dell'archivio */

.storiche {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-block: 1.5rem;
}
.storiche img {
  width: 100%;
  border-radius: var(--raggio);
  border: 1px solid var(--grigio-med);
}
.storiche__nome {
  display: block;
  margin-top: .4rem;
  font-family: var(--titoli);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blu-notte);
}

/* Dirigenti */

.dirigenti {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.dirigente img {
  width: 100%;
  /* Ritratti verticali: le foto dei dirigenti sono in piedi, e il riquadro
     quadrato tagliava teste e spalle. */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--raggio);
  margin-bottom: .4rem;
  background: var(--grigio);
}

/* Chi non ha la foto: riquadro con le iniziali, così la griglia resta in
   ordine invece di avere buchi di altezze diverse. */
.dirigente__segnaposto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--raggio);
  margin-bottom: .4rem;
  background: var(--grigio);
  color: var(--blu-chiaro);
  font-family: var(--titoli);
  font-size: 2rem;
  font-weight: 700;
}
.dirigente__nome { display: block; font-weight: 600; color: var(--blu-notte); }
.dirigente__carica { display: block; font-size: .875rem; color: var(--testo-tenue); }

/* Modulistica */

.moduli { display: grid; gap: .75rem; margin-top: 1.5rem; }
.modulo-voce a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--grigio-med);
  border-radius: var(--raggio);
  background: #fff;
  text-decoration: none;
  color: inherit;
}
.modulo-voce a:hover { border-color: var(--rosso); }
.modulo-voce__tipo {
  flex: 0 0 auto;
  font-family: var(--titoli);
  font-weight: 800;
  font-size: .8125rem;
  letter-spacing: .06em;
  color: #fff;
  background: var(--rosso);
  padding: .25rem .5rem;
  border-radius: 3px;
}
.modulo-voce__testo { flex: 1; }
.modulo-voce__testo strong { display: block; color: var(--blu-notte); }
.modulo-voce__nota { font-size: .875rem; color: var(--testo-tenue); }
.modulo-voce__azione {
  flex: 0 0 auto;
  font-family: var(--titoli);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .9375rem;
  color: var(--rosso);
}

.contatto-grande {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
}

@media (max-width: 1080px) {
  .griglia-notizie--elenco { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .griglia-notizie--elenco,
  .griglia-notizie--due { grid-template-columns: 1fr; }
  .allenamenti li { grid-template-columns: 1fr; gap: .1rem; }
  .rosa { grid-template-columns: 1fr; }
}

/* --- Galleria dell'articolo ------------------------------------------------ */

.galleria-articolo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
  margin: 1.75rem 0;
}
.galleria-articolo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raggio);
  background: var(--grigio);
}

/* Rimando all'articolo dentro la didascalia dello sfogliatore */
.modale__rimando {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}
.modale__rimando:hover { color: var(--arancio); }

/* Le foto della galleria in home ora si aprono ingrandite */
.striscia-galleria img { cursor: zoom-in; }

/* Sponsor fra un riquadro e l'altro della colonna laterale */
.fianco__sponsor--isolato {
  border: 1px solid var(--grigio-med);
  border-radius: var(--raggio);
  background: var(--bianco);
  padding: .75rem;
  min-height: 84px;
}

/* Overtime: numeri storici sfogliabili come immagini */
.rivista__sfogliabile { cursor: zoom-in; display: block; }
.rivista__pagina-nascosta { display: none; }
.rivista__come {
  display: block;
  margin-top: .2rem;
  font-size: .8125rem;
  color: var(--blu-medio);
}

/* =========================================================================
   Richiamo al 5 per mille
   ========================================================================= */

.cinquemille {
  background: linear-gradient(100deg, var(--blu-notte), var(--blu));
  color: #fff;
  border-radius: var(--raggio);
  margin-block: 2.5rem;
  overflow: hidden;
}

.cinquemille__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
  padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem);
}

.cinquemille__occhiello {
  margin: 0 0 .3rem;
  font-family: var(--titoli);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--arancio);
}

.cinquemille__titolo {
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  color: #fff;
}

.cinquemille__spiega {
  margin: .6rem 0 0;
  max-width: 52ch;
  color: rgba(255,255,255,.85);
  font-size: .9375rem;
}

.cinquemille__codice {
  text-align: center;
  padding: .9rem 1.4rem;
  border: 2px dashed rgba(255,255,255,.4);
  border-radius: var(--raggio);
  background: rgba(255,255,255,.06);
}

.cinquemille__etichetta {
  display: block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.7);
  margin-bottom: .25rem;
}

.cinquemille__numero {
  font-family: var(--titoli);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  letter-spacing: .04em;
  color: #fff;
  /* Il codice si può selezionare con un doppio clic per copiarlo */
  user-select: all;
}

/* --- Versione ridotta, per il piè di pagina ------------------------------- */

.cinquemille--compatto {
  background: none;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--raggio);
  margin: 1.25rem 0 0;
}

.cinquemille--compatto .cinquemille__riga {
  display: block;
  padding: .9rem 1rem;
}

.cinquemille--compatto .cinquemille__occhiello { font-size: 1.125rem; margin-bottom: .1rem; }
.cinquemille--compatto .cinquemille__titolo    { font-size: .9375rem; margin-bottom: .5rem; }
.cinquemille--compatto .cinquemille__etichetta { margin-bottom: .1rem; }
.cinquemille--compatto .cinquemille__numero    { font-size: 1.125rem; }

/* IMPORTANTE: il riquadro sta anche dentro pagine a fondo chiaro, dove il
   testo eredita il colore scuro e su sfondo blu diventa illeggibile.
   Qui si forza il chiaro su tutto ciò che sta dentro. */
.cinquemille,
.cinquemille h2,
.cinquemille p,
.cinquemille strong,
.cinquemille span { color: #fff; }

.cinquemille .cinquemille__occhiello { color: var(--arancio); }
.cinquemille .cinquemille__spiega    { color: rgba(255,255,255,.85); }
.cinquemille .cinquemille__etichetta { color: rgba(255,255,255,.7); }

/* Dentro le pagine di testo il riquadro non deve ereditare gli stili dei
   titoli e dei paragrafi della pagina. */
.testo-lungo .cinquemille { margin-block: 2rem; }
.testo-lungo .cinquemille h2 { margin: 0; border: 0; padding: 0; }

@media (max-width: 620px) {
  .cinquemille__riga { flex-direction: column; align-items: flex-start; }
  .cinquemille__codice { width: 100%; text-align: left; }
}

/* --- Apertura a immagine fissa -------------------------------------------- */

.apertura--fissa .apertura__slide { min-height: clamp(420px, 62vh, 620px); }

/* Riquadro delle prossime partite dentro l'apertura */
.apertura__partite {
  position: absolute;
  right: var(--gutter);
  bottom: 2rem;
  width: min(320px, calc(100% - var(--gutter) * 2));
  padding: 1rem 1.15rem;
  border-radius: var(--raggio);
  background: rgba(16, 20, 44, .82);
  backdrop-filter: blur(6px);
  color: #fff;
  z-index: 2;
}

.apertura__partite-titolo {
  margin: 0 0 .6rem;
  font-size: .9375rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--arancio);
}

.apertura__partite ul { display: grid; gap: .55rem; }

.apertura__partite li {
  display: grid;
  gap: .1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
  font-size: .9375rem;
}
.apertura__partite li:last-child { border-bottom: 0; padding-bottom: 0; }

.apertura__partite-data {
  font-size: .8125rem;
  color: rgba(255,255,255,.7);
}
.apertura__partite-sfida { line-height: 1.35; }

@media (max-width: 860px) {
  /* Su telefono il riquadro va sotto il testo, non sovrapposto */
  .apertura__partite {
    position: static;
    width: auto;
    margin: 1.5rem var(--gutter) 0;
  }
  .apertura--fissa .apertura__slide { min-height: 0; padding-bottom: 2rem; }
}

.allenamenti__altro { margin-top: 1rem; }

/* Pagine senza colonna laterale: il contenuto usa tutta la larghezza.
   La regola sta qui in fondo e ripete il selettore per avere la precedenza
   sulla griglia a due colonne definita più sopra. */
/* Pagine senza colonna laterale: contenitore proprio, non la griglia a due
   colonne. Riusare quella e annullarne una colonna lasciava lo spazio della
   colonna laterale comunque occupato. */
.pagina-intera {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem);
}
.pagina-intera__contenuto { min-width: 0; overflow-wrap: break-word; }
.pagina-intera__contenuto > h1 { margin-bottom: 1rem; }

/* Squadre della stagione in archivio: riquadri, non un elenco di link */
.elenco-squadre--archivio { margin-bottom: 2rem; }

.squadra-scheda__segnaposto {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 12%;
  background: var(--grigio);
  border-radius: var(--raggio) var(--raggio) 0 0;
}
.squadra-scheda__segnaposto img {
  /* "contain" e non "cover": il logo deve stare tutto dentro il riquadro.
     Con cover veniva ritagliato ai lati, ed è quello che si vedeva. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .6;
}

/* --- Sfogliamento delle pagine -------------------------------------------- */

.sfoglia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--grigio-med);
}

.sfoglia__passo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1.1rem;
  border: 1px solid var(--grigio-med);
  border-radius: var(--raggio);
  font-weight: 600;
  color: var(--blu-medio);
  text-decoration: none;
  background: var(--bianco);
}
.sfoglia__passo:hover { border-color: var(--blu-medio); background: var(--blu-medio); color: #fff; }

/* Il passo non disponibile resta visibile ma spento: sparire farebbe
   saltare gli altri elementi da una pagina all'altra. */
.sfoglia__passo--spento { opacity: .35; pointer-events: none; }

.sfoglia__salto { display: flex; align-items: center; gap: .5rem; margin: 0; }
.sfoglia__salto label { font-size: .9375rem; color: var(--testo-tenue); }
.sfoglia__salto select { padding: .5rem .6rem; }

@media (max-width: 560px) {
  .sfoglia { justify-content: center; }
  .sfoglia__salto { order: -1; width: 100%; justify-content: center; }
}

/* =========================================================================
   Video di YouTube
   ========================================================================= */

.video { padding-block: 3.5rem; background: var(--grigio); }

.video__testo {
  max-width: 60ch;
  margin: -.5rem 0 1.5rem;
  color: var(--testo-tenue);
}

.video__riquadro {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--blu-notte);
  box-shadow: 0 10px 30px rgba(16, 20, 44, .18);
}

.video__riquadro iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__avvio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}

.video__anteprima {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease, filter .3s ease;
}
.video__avvio:hover .video__anteprima { transform: scale(1.03); filter: brightness(.85); }

/* Il tasto di riproduzione, disegnato col CSS */
.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--rosso);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  transition: transform .2s ease, background .2s ease;
}
.video__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 15px 0 15px 26px;
  border-color: transparent transparent transparent #fff;
}
.video__avvio:hover .video__play { transform: translate(-50%, -50%) scale(1.08); }
.video__avvio:focus-visible .video__play { outline: 3px solid #fff; outline-offset: 4px; }

.video__nota {
  margin-top: .75rem;
  font-size: .8125rem;
  color: var(--testo-tenue);
}

@media (max-width: 620px) {
  .video__play { width: 64px; height: 64px; }
  .video__play::after { border-width: 11px 0 11px 19px; }
}

/* --- Sponsor nel piè di pagina, divisi per livello --------------------------
   Il livello più alto in cima e con il logo più grande. Ogni fascia è
   separata da una riga sottile: si capisce che sono gruppi distinti senza
   bisogno di etichette tipo "gold" e "silver", che in una società sportiva
   di paese suonerebbero fuori luogo. */

/* La linea di separazione ora sta sopra l'etichetta di ogni fascia, non più
   fra due liste adiacenti: con l'etichetta in mezzo non lo sono più. La prima
   etichetta non ha linea sopra. */
.pieno__sponsor-etichetta {
  margin: 1.75rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(16, 20, 44, .1);
  text-align: center;
  font-family: var(--titoli);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.pieno__sponsor-etichetta:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.pieno__sponsor-lista--liv1 img { height: 88px; max-width: 200px; }
.pieno__sponsor-lista--liv2 img { height: 70px; max-width: 200px; }
.pieno__sponsor-lista--liv3 img { height: 56px; max-width: 200px; }
.pieno__sponsor-lista--liv4 img { height: 44px; max-width: 200px; }
.pieno__sponsor-lista--liv5 img { height: 34px; max-width: 200px; }

/* Gli sponsor minori stanno più stretti fra loro: occupano meno spazio
   complessivo senza sembrare abbandonati in fondo */
.pieno__sponsor-lista--liv1 { gap: 1.5rem 3rem; }
.pieno__sponsor-lista--liv2 { gap: 1.25rem 2.5rem; }
.pieno__sponsor-lista--liv3 { gap: 1rem 2rem; }
.pieno__sponsor-lista--liv4,
.pieno__sponsor-lista--liv5 { gap: .85rem 1.75rem; }

@media (max-width: 620px) {
  .pieno__sponsor-lista--liv1 img { max-height: 68px; }
  .pieno__sponsor-lista--liv2 img { max-height: 56px; }
  .pieno__sponsor-lista--liv3 img { max-height: 46px; }
}

/* Nella striscia scorrevole il livello si traduce in larghezza del riquadro */
.sponsor__scheda--liv1 img { height: 60px; }
.sponsor__scheda--liv2 img { height: 54px; }
.sponsor__scheda--liv3 img { height: 48px; }
.sponsor__scheda--liv4 img { height: 42px; }
.sponsor__scheda--liv5 img { height: 38px; }

/* Ritratti nel pannello */

/* Il video si vede anche da telefono. */

/* =========================================================================
   Gallerie per annata
   ========================================================================= */

.galleria__intro { margin: -.5rem 0 1.75rem; color: var(--testo-tenue); }

/* Le annate scorrono su una riga sola, come la vecchia striscia di foto.
   Si usa lo scorrimento del browser invece di un carosello programmato:
   funziona col dito, con la rotellina, con la tastiera e con le frecce,
   senza codice che possa rompersi. */
.striscia-annate {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .75rem;
  /* Lo spazio serve perché i riquadri non finiscano attaccati ai bordi
     dello schermo mentre si scorre */
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
}

.striscia-annate::-webkit-scrollbar { height: 8px; }
.striscia-annate::-webkit-scrollbar-thumb {
  background: var(--grigio-med);
  border-radius: 4px;
}

.striscia-annate > .annata {
  flex: 0 0 clamp(260px, 30vw, 340px);
  scroll-snap-align: start;
}

.striscia-annate__comandi {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .75rem;
}

.striscia-annate__freccia {
  width: 44px;
  height: 44px;
  border: 1px solid var(--grigio-med);
  border-radius: 50%;
  background: var(--bianco);
  color: var(--blu-medio);
  font-size: 1.125rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.striscia-annate__freccia:hover { background: var(--blu-medio); color: #fff; }

@media (max-width: 860px) {
  .striscia-annate__comandi { display: none; }
}

.annata__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 3;
  padding: 1rem;
  border-radius: var(--raggio);
  overflow: hidden;
  text-decoration: none;
  /* Senza foto di sfondo resta questa sfumatura: i riquadri restano
     riconoscibili e la griglia non ha buchi bianchi */
  background: linear-gradient(160deg, var(--blu) 0%, var(--blu-notte) 100%);
  color: #fff;
  isolation: isolate;
}

.annata__sfondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .45s ease;
}

/* Velo scuro sopra la foto: senza, il testo bianco sparisce sulle foto
   chiare, che nelle palestre illuminate sono la maggioranza */
.annata__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(16, 20, 44, .85) 15%, rgba(16, 20, 44, .25) 70%);
}

.annata__link:hover .annata__sfondo { transform: scale(1.06); }

.annata__testo { display: block; }

.annata__anno {
  display: block;
  font-family: var(--titoli);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
}

.annata__nota {
  display: block;
  margin-top: .2rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .78);
}

.annata__vai {
  display: block;
  margin-top: .6rem;
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--arancio);
}

@media (max-width: 560px) {
  .striscia-annate > .annata { flex-basis: 78vw; }
  .annata__anno { font-size: 1.375rem; }
}


/* --- IBAN: riga di testo, non un riquadro --------------------------------- */

.riga-iban {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin: .5rem 0;
}

.riga-iban__etichetta {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--testo-tenue);
}

.riga-iban__numero {
  font-family: var(--titoli);
  letter-spacing: .03em;
  color: var(--blu-notte);
  user-select: all;
}

/* Nel piè di pagina, su fondo scuro */
.riga-iban--compatta { margin-top: .75rem; }
.riga-iban--compatta .riga-iban__etichetta { color: rgba(255, 255, 255, .6); }
.riga-iban--compatta .riga-iban__numero { color: #fff; font-size: .9375rem; }


/* =========================================================================
   Calendario pubblico
   ========================================================================= */

.calendario-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.calendario-testa h1 { margin: 0; }

.mesi { display: flex; align-items: center; gap: .6rem; }

.mesi__passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--grigio-med);
  border-radius: 50%;
  color: var(--blu-medio);
  text-decoration: none;
  font-size: 1.125rem;
  transition: background .15s ease, color .15s ease;
}
.mesi__passo:hover { background: var(--blu-medio); border-color: var(--blu-medio); color: #fff; }

.mesi__corrente {
  min-width: 9.5rem;
  text-align: center;
  font-family: var(--titoli);
  font-size: 1.25rem;
  text-transform: capitalize;
  color: var(--blu-notte);
}

.mesi__oggi { font-size: .875rem; margin-left: .25rem; }

/* --- Griglia del mese ------------------------------------------------------ */

.mese {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  margin-bottom: 1.5rem;
}

.mese th {
  padding: .4rem 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--testo-tenue);
  text-transform: uppercase;
}
.mese th abbr { text-decoration: none; border: 0; }

.mese td {
  height: auto;
  min-height: 120px;
  padding: 0;
  border-radius: var(--raggio);
  background: var(--grigio);
  vertical-align: top;
  transition: box-shadow .15s ease, background-color .15s ease;
}

.mese__fuori { background: transparent; box-shadow: none; min-height: 0; }

.mese__numero {
  display: block;
  padding: .4rem .5rem;
  font-family: var(--titoli);
  font-size: 1.0625rem;
  color: var(--blu-notte);
}
.mese__numero--spento { color: var(--testo-tenue); font-weight: 400; }

/* I giorni con qualcosa si distinguono al primo sguardo: fondo bianco,
   bordo marcato e cursore che invita al clic. */
.mese__cella--pieno {
  background: var(--bianco);
  box-shadow: inset 0 0 0 1px var(--grigio-med);
}
.mese__cella--pieno:hover {
  box-shadow: inset 0 0 0 2px var(--blu-chiaro);
  transform: translateY(-1px);
}

.mese__cella--oggi { background: #eef4fb; box-shadow: inset 0 0 0 2px var(--blu-chiaro); }
.mese__cella--oggi .mese__numero {
  color: #fff;
  background: var(--rosso);
  border-radius: var(--raggio) 0 var(--raggio) 0;
  display: inline-block;
  padding: .3rem .55rem;
  margin: .25rem 0 0 .25rem;
}

/* --- Giorni senza eventi --------------------------------------------------
   Restano cliccabili: al passaggio del mouse e al clic dicono che non c'è
   niente in programma, così è chiaro che il giorno è stato "letto". */
.mese__apri--vuoto { cursor: help; position: relative; }
.mese__apri--vuoto:hover { background: #eef1f6; }

/* Fumetto "Nessun evento" al passaggio del mouse / col focus da tastiera. */
.mese__apri--vuoto::after {
  content: 'Nessun evento';
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  transform: translate(-50%, 4px);
  padding: .3rem .55rem;
  background: var(--blu-notte);
  color: #fff;
  font-family: var(--testo);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(16,20,44,.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 5;
}
.mese__apri--vuoto::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--blu-notte);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  z-index: 5;
}
.mese__apri--vuoto:hover::after,
.mese__apri--vuoto:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mese__apri--vuoto:hover::before,
.mese__apri--vuoto:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

.mese__apri {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 120px;
  padding: 0 0 .55rem;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  border-radius: var(--raggio);
}
.mese__apri:focus-visible { outline: 3px solid var(--blu-medio); outline-offset: -3px; }

.mese__apri--aperto {
  background: var(--blu-notte);
}
.mese__apri--aperto .mese__numero { color: #fff; }

.mese__segni {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 3px;
  padding: 0 .5rem;
  flex: 1 1 auto;
}

/* Un quadratino per appuntamento, del colore della squadra */
/* Il colore arriva dalla variabile --sq, impostata inline dal PHP: così
   ogni squadra ha la sua tinta (sempre diversa dalle altre) senza dover
   tenere qui un elenco di classi numerate. */
.segno-sq {
  display: inline-block;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--sq, var(--blu-medio));
}
.mese__segni .segno-sq { width: calc(50% - 2px); }

.segno-sq--annullato {
  opacity: .4;
  background-image: repeating-linear-gradient(
    45deg, rgba(255,255,255,.6) 0 2px, transparent 2px 4px);
}

/* --- Dettaglio della giornata --------------------------------------------- */

.giornata {
  margin-bottom: 2rem;
  border: 1px solid var(--grigio-med);
  border-top: 3px solid var(--blu-notte);
  border-radius: var(--raggio);
  background: var(--bianco);
  overflow: hidden;
}

.giornata__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.25rem;
  background: var(--grigio);
  border-bottom: 1px solid var(--grigio-med);
}

.giornata__titolo {
  margin: 0;
  font-size: 1.125rem;
  text-transform: capitalize;
}

.giornata__chiudi {
  width: 34px;
  height: 34px;
  border: 1px solid var(--grigio-med);
  border-radius: 50%;
  background: var(--bianco);
  color: var(--testo-tenue);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}
.giornata__chiudi:hover { background: var(--rosso); border-color: var(--rosso); color: #fff; }

.giornata__voci { margin: 0; padding: 0; list-style: none; }

.voce-giorno {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: .25rem 1rem;
  align-items: baseline;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--grigio-med);
  border-left: 4px solid var(--grigio-med);
}
.voce-giorno:last-child { border-bottom: 0; }

/* Filetto colorato a sinistra: stessa tinta della squadra (variabile --sq). */
.voce-giorno { border-left-color: var(--sq, var(--grigio-med)); }

.voce-giorno__ora {
  font-family: var(--titoli);
  font-size: 1.0625rem;
  color: var(--blu-notte);
}

.voce-giorno__corpo { display: grid; gap: .15rem; }
.voce-giorno__titolo { font-weight: 600; }
.voce-giorno__risultato { color: var(--rosso); margin-left: .3rem; }

.voce-giorno__meta,
.voce-giorno__nota { font-size: .875rem; color: var(--testo-tenue); }

.voce-giorno__tipo {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--grigio);
  border: 1px solid var(--grigio-med);
  font-size: .75rem;
  font-weight: 600;
  color: var(--blu-notte);
}

.etichetta-annullato {
  display: inline-block;
  margin-left: .4rem;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fbeded;
  border: 1px solid #edc4c4;
  color: #a33131;
  font-size: .75rem;
  font-weight: 600;
}

/* Giornata senza eventi: stesso riquadro, filo grigio a lato e un messaggio
   sobrio al posto dell'elenco. */
.giornata__blocco--vuoto { --sq: var(--grigio-med); }
.giornata__nessuno {
  margin: 0;
  padding: 1.25rem 1.25rem 1.4rem;
  border-left: 4px solid var(--grigio-med);
  color: var(--testo-tenue);
  font-style: italic;
}

/* --- Filtri, sotto il calendario ------------------------------------------ */

/* Pannello comandi PRIMA del calendario: due colonne affiancate — a
   sinistra "cosa mostrare", a destra la squadra. Su telefono si impilano. */
.controlli-calendario {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.25rem 2rem;
  align-items: start;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--grigio-med);
  border-radius: var(--raggio);
  background: linear-gradient(180deg, #fff, var(--grigio));
  box-shadow: 0 1px 2px rgba(16,20,44,.05);
  margin-bottom: 1.5rem;
}

.controlli-calendario__colonna { border: 0; padding: 0; margin: 0; min-width: 0; }

.controlli-calendario__colonna > label,
.controlli-calendario__colonna legend {
  display: block;
  margin: 0 0 .55rem;
  padding: 0;
  font-family: var(--titoli);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

/* Colonna di destra separata da un filo verticale (che sparisce da telefono) */
.controlli-calendario__squadra {
  border-left: 1px solid var(--grigio-med);
  padding-left: 2rem;
}

.controlli-calendario__squadra select {
  width: 100%;
  padding: .6rem .8rem;
  font: inherit;
  color: var(--inchiostro);
  background: var(--bianco);
  border: 1px solid var(--grigio-med);
  border-radius: var(--raggio);
  cursor: pointer;
}
.controlli-calendario__squadra select:hover { border-color: var(--blu-chiaro); }

/* I tipi diventano "pillole" che si accendono quando sono attive. */
.scelte-tipo { display: flex; flex-wrap: wrap; gap: .5rem; }

.scelta-tipo {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.scelta-tipo input { position: absolute; opacity: 0; width: 0; height: 0; }

.scelta-tipo__testo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border: 1px solid var(--grigio-med);
  border-radius: 999px;
  background: var(--bianco);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--testo-tenue);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.scelta-tipo__testo::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 2px solid var(--grigio-med);
  background: var(--bianco);
  flex: 0 0 auto;
  transition: inherit;
}
.scelta-tipo:hover .scelta-tipo__testo { border-color: var(--blu-chiaro); color: var(--blu-notte); }

.scelta-tipo input:checked + .scelta-tipo__testo {
  background: var(--blu-notte);
  border-color: var(--blu-notte);
  color: #fff;
}
.scelta-tipo input:checked + .scelta-tipo__testo::before {
  background: var(--rosso);
  border-color: var(--rosso);
  box-shadow: inset 0 0 0 2px var(--blu-notte);
}
.scelta-tipo input:focus-visible + .scelta-tipo__testo {
  outline: 3px solid var(--rosso);
  outline-offset: 2px;
}

.controlli-calendario__applica { margin-top: .5rem; }

/* --- Legenda dei colori --------------------------------------------------- */

.legenda-squadre { margin-bottom: 2rem; }

.legenda-squadre__titolo {
  display: block;
  margin-bottom: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--testo-tenue);
}

.legenda-squadre ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legenda-squadre li { display: flex; align-items: center; gap: .4rem; font-size: .875rem; }
.legenda-squadre .segno-sq { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; }

/* --- Riquadro per iscriversi ---------------------------------------------- */

.riquadro-iscrizione {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--grigio-med);
  border-left: 4px solid var(--blu-medio);
  border-radius: var(--raggio);
  background: var(--grigio);
}
.riquadro-iscrizione h2 { margin: 0 0 .5rem; font-size: 1.125rem; }

.riquadro-iscrizione__indirizzo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 1rem 0 .5rem;
}
.riquadro-iscrizione__indirizzo code {
  flex: 1 1 240px;
  padding: .5rem .7rem;
  background: var(--bianco);
  border: 1px solid var(--grigio-med);
  border-radius: var(--raggio);
  font-size: .8125rem;
  overflow-x: auto;
  white-space: nowrap;
  user-select: all;
}

/* Le due guide (iPhone e Android) affiancate, che si impilano su telefono. */
.iscrizione-guide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
}

.iscrizione-guida {
  background: var(--bianco);
  border: 1px solid var(--grigio-med);
  border-radius: var(--raggio);
  padding: 1rem 1.1rem 1.15rem;
}

.iscrizione-guida__titolo { margin: 0 0 .6rem; }
.iscrizione-guida__badge {
  display: inline-block;
  font-family: var(--titoli);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blu);
  padding: .3rem .7rem;
  border-radius: 999px;
}

.iscrizione-guida__nota {
  margin: 0 0 .75rem;
  font-size: .875rem;
  color: var(--testo-tenue);
}

.iscrizione-guida__passi {
  margin: 0;
  padding-left: 1.25rem;
  list-style: decimal;
  font-size: .9375rem;
}
.iscrizione-guida__passi li { margin-bottom: .4rem; }
.iscrizione-guida__passi li:last-child { margin-bottom: 0; }
.iscrizione-guida__passi strong { color: var(--blu-notte); }

/* --- Telefono -------------------------------------------------------------- */

@media (max-width: 760px) {
  .mese { border-spacing: 2px; }
  .mese td { height: auto; min-height: 72px; }
  .mese__apri { min-height: 72px; }
  .mese__numero { padding: .25rem .3rem; font-size: .9375rem; }
  .mese__segni { padding: 0 .25rem; gap: 2px; }
  .mese__segni .segno-sq { width: 100%; height: 4px; }

  /* Su telefono niente fumetto (non c'è il passaggio del mouse): resta il
     messaggio nel pannello, che si apre col tocco. */
  .mese__apri--vuoto::after,
  .mese__apri--vuoto::before { display: none; }

  .voce-giorno { grid-template-columns: 1fr; }
  .calendario-testa { flex-direction: column; align-items: stretch; }
  .mesi { justify-content: space-between; }

  /* Comandi e guide: una colonna sotto l'altra. */
  .controlli-calendario { grid-template-columns: 1fr; gap: 1.1rem; }
  .controlli-calendario__squadra { border-left: 0; padding-left: 0; }
  .iscrizione-guide { grid-template-columns: 1fr; }
}