/* Direzione C «Quattro linee»: un solo foglio di stile per tutte le pagine.
   Gettoni come in theme.json (colori, caratteri, misure). Ogni pubblico ha la sua linea:
   un colore e un pittogramma, usati solo nelle tessere e nella striscia dei biglietti.
   Il rosso vuol dire una cosa sola: «gratuito». */

@font-face {
  font-family: "Overpass";
  src: url("font/overpass.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
/* Inclusive Sans in due voci (300-500 e 501-700) con lo stesso file: a ognuna corrisponde una voce
   delle cifre con gli stessi pesi, così il browser prende le cifre 0-9 da Overpass (Inclusive Sans ha
   lo zero barrato) con il peso giusto: 400 nel testo normale, 600 nel grassetto. */
@font-face {
  font-family: "Inclusive Sans";
  src: url("font/inclusive-sans.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inclusive Sans";
  src: url("font/inclusive-sans.woff2") format("woff2");
  font-weight: 501 700;
  font-style: normal;
  font-display: swap;
}
/* cifre del testo normale: Overpass 400, solo 0-9 (file di 2 KB) */
@font-face {
  font-family: "Inclusive Sans";
  src: url("font/overpass-cifre-400.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039;
}
/* cifre del grassetto: Overpass dal file dei titoli (600-900) */
@font-face {
  font-family: "Inclusive Sans";
  src: url("font/overpass.woff2") format("woff2");
  font-weight: 501 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039;
}

/* ---------- Gettoni ---------- */
:root {
  --bianco: #FFFFFF;
  --banchina: #EDF0F3;
  --inchiostro: #1C2430;
  --orario: #4E5868;
  --filetto: #C3CAD4;
  --rosso: #B10F1E;
  --linea-arancio: #EF7D22;
  --linea-verde: #2BA673;
  --linea-gialla: #FFD43B;
  --linea-azzurra: #4FA8E0;

  --f-segno: "Overpass", "Trebuchet MS", sans-serif;
  --f-lettura: "Inclusive Sans", Verdana, sans-serif;

  /* telefono (390 px) -> computer (1024 px), fluidi in mezzo */
  --t-data: clamp(44px, 36.62px + 1.893vw, 56px);
  --t-parola: clamp(24px, 20.31px + 0.946vw, 30px);
  --t-display: clamp(30px, 18.93px + 2.839vw, 48px);
  --t-titolo: clamp(26px, 21.08px + 1.262vw, 34px);
  --t-biglietto: clamp(21px, 19.15px + 0.473vw, 24px);
  --t-linea: clamp(17px, 16.38px + 0.158vw, 18px);
  --t-dato: clamp(17px, 16.38px + 0.158vw, 18px);
  --t-quanto: clamp(22px, 19.54px + 0.631vw, 26px);
  --t-telefono: clamp(32px, 24.62px + 1.893vw, 44px);
  --t-corpo: clamp(18px, 17.38px + 0.158vw, 19px);

  --r-piccolo: 6px;
  --r-biglietto: 12px;
  --margine: 16px;
  --larghezza: 1200px;
  --sezione: 40px;
  --fascia: 32px;
  --spazio-biglietti: 16px;
  --larghezza-slide: 72vw;
  --spazio-slide: 12px;
  --fondo: var(--bianco);
}
@media (max-width: 359px) {
  :root { --larghezza-slide: 84vw; }
}
@media (min-width: 720px) {
  :root { --larghezza-slide: 84vw; }
}
@media (min-width: 1024px) {
  :root {
    --margine: 32px;
    --sezione: 64px;
    --fascia: 64px;
    --spazio-biglietti: 24px;
    --larghezza-slide: min(60vw, 864px);
    --spazio-slide: 24px;
  }
}

/* colore della linea, dal pubblico principale */
[data-linea="arancio"] { --linea: var(--linea-arancio); }
[data-linea="verde"] { --linea: var(--linea-verde); }
[data-linea="gialla"] { --linea: var(--linea-gialla); }
[data-linea="azzurra"] { --linea: var(--linea-azzurra); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.pagina-scheda { scroll-padding-bottom: 96px; }
@media (max-width: 1023px) { html:has(.scheda2__agganciata) { scroll-padding-bottom: 96px; } } /* giuria Vetrina G3-03: la classe sopra sta sul body */
body {
  margin: 0;
  background: var(--bianco);
  color: var(--inchiostro);
  font-family: var(--f-lettura);
  font-size: var(--t-corpo);
  line-height: 1.5;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--f-segno);
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: var(--t-display); line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: var(--t-titolo); line-height: 1.1; }
h3 { font-size: var(--t-biglietto); line-height: 1.12; }
p, ul, ol, dl, dd, figure { margin: 0; }
a {
  color: var(--inchiostro);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 2px; }
button { font: inherit; }
/* sigle spiegate con <abbr>: niente sottolineatura (la frase intera è nei dettagli del corso) */
abbr[title] { text-decoration: none; cursor: help; }
p, li, dd { text-wrap: pretty; }
::selection { background: var(--inchiostro); color: var(--bianco); }
input { caret-color: var(--inchiostro); }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.salta {
  position: absolute;
  left: 8px; top: -100px;
  z-index: 50;
  padding: 12px 16px;
  background: var(--bianco);
  border: 2px solid var(--inchiostro);
  border-radius: var(--r-piccolo);
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 18px;
}
.salta:focus { top: 8px; }

.contenitore {
  width: 100%;
  max-width: calc(var(--larghezza) + 2 * var(--margine));
  margin-inline: auto;
  padding-inline: var(--margine);
}
.cifre { font-family: var(--f-segno); font-weight: 600; font-variant-numeric: tabular-nums; }

.ico { width: 20px; height: 20px; flex: none; fill: currentColor; }

/* ---------- Pulsanti ---------- */
.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 3px 24px 0;
  border: 2px solid var(--inchiostro);
  border-radius: var(--r-piccolo);
  background: var(--bianco);
  color: var(--inchiostro);
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.pulsante:hover { background: var(--banchina); }
.pulsante--principale { background: var(--inchiostro); color: var(--bianco); }
.pulsante--principale:hover { background: var(--orario); border-color: var(--orario); }
.pulsante--compatto { min-height: 48px; padding-inline: 20px; }
.pulsante .ico { margin-top: -3px; }

.quadratino {
  width: 16px; height: 16px;
  flex: none;
  border-radius: 3px;
  background: var(--rosso);
}
.quadratino--pagamento { background: var(--inchiostro); }

/* ---------- Tessera di linea ---------- */
.tessera {
  --lato: 32px;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--lato);
  height: var(--lato);
  border-radius: var(--r-piccolo);
  background: var(--linea);
  color: var(--inchiostro);
}
.tessera svg { width: 20px; height: 20px; fill: currentColor; }
.tessera--40 { --lato: 40px; }
.tessera--40 svg { width: 24px; height: 24px; }
.tessera--48 { --lato: 48px; }
.tessera--48 svg { width: 28px; height: 28px; }

/* ---------- Testata ---------- */
.testata {
  position: relative;
  z-index: 20;
  background: var(--bianco);
  border-bottom: 1px solid var(--filetto);
}
.testata__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 64px;
}
.testata__logo { display: flex; align-items: center; min-height: 44px; flex: none; }
.testata__logo img { width: auto; }
.logo-compatto { height: 40px; }
.logo-completo { height: 56px; display: none; }
.pulsante-menu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 3px 12px 0;
  border: 2px solid var(--inchiostro);
  border-radius: var(--r-piccolo);
  background: var(--bianco);
  color: var(--inchiostro);
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.pulsante-menu .ico { margin-top: -3px; }
.pulsante-menu:hover { background: var(--banchina); }
.pulsante-menu .ico-chiudi,
.pulsante-menu[aria-expanded="true"] .ico-apri { display: none; }
.pulsante-menu[aria-expanded="true"] .ico-chiudi { display: block; }
.no-js .pulsante-menu { display: none; }

.menu { flex-basis: 100%; padding-bottom: 16px; }
.js .menu {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  padding: 8px var(--margine) 24px;
  background: var(--bianco);
  border-bottom: 1px solid var(--filetto);
}
.js .menu.e-aperto { display: block; }

.menu__accessi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  list-style: none;
  padding: 0;
}
.menu__accessi a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 18px;
}
.menu__accessi .ico { width: 18px; height: 18px; margin-top: -2px; }
.menu__voci { list-style: none; padding: 0; margin-top: 8px; }
.menu__voci li { border-top: 1px solid var(--filetto); }
.menu__voci li:last-child { border-bottom: 1px solid var(--filetto); }
.menu__voci a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-top: 3px;
  font-family: var(--f-segno);
  font-weight: 800;
  font-size: 22px;
  text-decoration: none;
}
.menu__voci a:hover { text-decoration: underline; }
.menu__voci a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; }
.menu .cerca { margin-top: 20px; }

@media (max-width: 359px) {
  .logo-compatto { height: 34px; }
  .testata__barra { gap: 8px; }
  .pulsante-menu { padding-inline: 10px; }
}

@media (min-width: 1024px) {
  .testata__barra { flex-wrap: nowrap; min-height: 72px; gap: 24px; }
  .logo-compatto { display: none; }
  .logo-completo { display: block; }
  .pulsante-menu { display: none; }
  .menu, .js .menu, .js .menu.e-aperto {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 20px;
    position: static;
    padding: 0;
    border: 0;
    background: none;
  }
  .menu__voci { order: 1; display: flex; margin: 0; }
  .menu__voci li, .menu__voci li:last-child { border: 0; }
  .menu__voci a {
    min-height: 72px;
    padding: 3px 9px 0;
    border-bottom: 3px solid transparent;
    font-weight: 700;
    font-size: 18px;
  }
  .menu__voci a[aria-current="page"] {
    text-decoration: none;
    border-bottom-color: var(--inchiostro);
  }
  .menu .cerca { order: 2; margin: 0 0 0 auto; }
  .menu__accessi { order: 3; flex-wrap: nowrap; gap: 16px; }
  .menu__accessi a { white-space: nowrap; }
}

/* ---------- Ricerca ---------- */
.cerca__etichetta {
  display: block;
  margin-bottom: 8px;
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 18px;
}
.cerca__riga { display: flex; gap: 8px; }
.cerca input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 14px;
  border: 2px solid var(--orario);
  border-radius: var(--r-piccolo);
  background: var(--bianco);
  color: var(--inchiostro);
  font-family: var(--f-lettura);
  font-size: 18px;
}
.cerca input::placeholder { color: var(--orario); opacity: 1; }
.cerca .pulsante { padding-inline: 18px; }
@media (min-width: 1024px) {
  .menu .cerca__etichetta {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .menu .cerca input { width: 168px; min-height: 44px; font-size: 17px; padding: 0 10px; }
  .menu .cerca .pulsante { min-height: 44px; width: 44px; padding: 0; }
  .menu .cerca .pulsante .ico { margin: 0; }
}
/* fra 1024 e 1279 px la ricerca della testata non ci sta: restano quella della home e i filtri del catalogo */
@media (min-width: 1024px) and (max-width: 1279px) {
  .menu .cerca { display: none; }
  .menu__accessi { margin-left: auto; }
  .menu__voci a { padding-inline: 7px; }
  .testata__barra { gap: 16px; }
}
@media (min-width: 1280px) {
  .menu .cerca input { width: 200px; }
}

/* ---------- Sezioni e fasce ---------- */
.sezione { margin-block: var(--sezione); }
.fascia {
  --fondo: var(--banchina);
  background: var(--banchina);
  padding-block: var(--fascia);
}
.fascia + .sezione { margin-top: var(--sezione); }
.fascia + .fascia { padding-top: 0; }
.sezione__riga {
  margin-top: 8px;
  max-width: 44rem;
  color: var(--orario);
}
.titolo-con-segno { display: flex; align-items: center; gap: 12px; }
.titolo-con-segno .quadratino { margin-top: -3px; }

/* ---------- Biglietto (card) ---------- */
.griglia-biglietti {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spazio-biglietti);
  list-style: none;
  padding: 0;
  margin-top: 24px;
}
.griglia-biglietti > li { display: flex; }
.griglia-biglietti > li[hidden] { display: none; }
@media (min-width: 720px) {
  .griglia-biglietti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .griglia-biglietti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Dal tablet in su i biglietti della stessa riga allineano le loro parti (riga della tessera, foto,
   data con titolo e stato, etichette, dati, strappo, matrice): lo strappo cade alla stessa altezza.
   Sette righe di griglia per biglietto, condivise con subgrid; lo spazio fra le righe di biglietti
   è il margine sotto ogni biglietto. */
@media (min-width: 720px) {
  @supports (grid-template-rows: subgrid) {
    .griglia-biglietti { row-gap: 0; }
    .griglia-biglietti > li {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
      margin-bottom: var(--spazio-biglietti);
    }
    .griglia-biglietti .biglietto {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      grid-template-columns: minmax(0, 1fr);
    }
    .griglia-biglietti .biglietto__corpo { display: contents; }
    .griglia-biglietti .biglietto__corpo > * { margin: 12px 16px 0; align-self: start; }
    .griglia-biglietti .biglietto__testa { margin-top: 16px; }
    .griglia-biglietti .biglietto .dati { margin-bottom: 16px; }
    /* l'ultimo margine non deve sommarsi allo spazio dopo la griglia */
    .griglia-biglietti { margin-bottom: calc(-1 * var(--spazio-biglietti)); }
  }
}

.biglietto {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 6px;
  background: var(--bianco);
  border: 1px solid var(--filetto);
  border-radius: var(--r-biglietto);
}
/* striscia da 6 px nel colore della linea, lungo il lato alto del biglietto */
.biglietto::before, .slide__biglietto::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 7px;
  border-radius: var(--r-biglietto) var(--r-biglietto) 0 0;
  background: var(--linea);
}
.biglietto__linea, .slide__linea, .scheda__linea {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: var(--t-linea);
  line-height: 1.2;
}
.biglietto__linea, .slide__linea {
  padding: 8px 16px;
  border-bottom: 1px solid var(--filetto);
}
.biglietto__linea span:last-child, .slide__linea span:last-child, .scheda__linea span:last-child { padding-top: 2px; }

.foto {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--banchina);
}
.foto > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fuoco, 50% 50%);
}
.simbolo-ai {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
}

@media (max-width: 639px) {
  .biglietto .foto { aspect-ratio: 16 / 9; }
}
.biglietto__corpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 16px;
}
.biglietto__testa { display: flex; align-items: flex-start; gap: 16px; }
/* titolo e, subito sotto, lo stato: stanno accanto al riquadro della data, nello spazio che il titolo lascia libero */
.biglietto__testo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.biglietto__titolo { font-size: var(--t-biglietto); padding-top: 2px; }
/* parole lunghe («Aggiornamento») nella colonna stretta accanto alla data: fra 1024 e 1279 px i biglietti
   sono larghi circa 300 px e il titolo scende a 21 px (la misura del telefono); a capo forzato solo come riserva */
.biglietto__titolo { overflow-wrap: break-word; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .biglietto__titolo { font-size: 21px; }
  .biglietto__testa { gap: 12px; }
}
.biglietto__titolo a, .slide__titolo a { color: inherit; text-decoration: none; }
.biglietto__titolo a:hover, .slide__titolo a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.biglietto__titolo a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-biglietto);
}
.biglietto__titolo a:focus-visible { outline: none; }
.biglietto:focus-within { outline: 3px solid var(--inchiostro); outline-offset: 2px; }

/* riquadro della data */
.data {
  --lato: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--lato);
  height: var(--lato);
  padding: 4px;
  border-radius: var(--r-piccolo);
  background: var(--rosso);
  color: var(--bianco);
  font-family: var(--f-segno);
  text-align: center;
}
.data--pagamento { background: var(--inchiostro); }
/* iscrizioni chiuse: il riquadro si spegne (fondo bianco, cifre e bordo nel colore della famiglia) */
.data--chiuso { background: var(--bianco); color: var(--rosso); border: 2px solid var(--rosso); }
.data--pagamento.data--chiuso { color: var(--inchiostro); border-color: var(--inchiostro); }
.data__numero {
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.data__mese { font-weight: 700; font-size: 16px; line-height: 1.15; margin-top: 2px; }
.data__parola { font-weight: 900; font-size: 24px; line-height: 1; padding-top: 3px; }
.data__parola + .data__mese { margin-top: 6px; }
.data--92 { --lato: 92px; }
.data--112 { --lato: 112px; }
.data--112 .data__numero { font-size: 56px; }
.data--112 .data__parola { font-size: 30px; }

/* stato, etichette, tre dati */
.stato {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: var(--t-dato);
  line-height: 1.35;
}
.stato .ico { margin-top: 1px; }
.stato span { padding-top: 2px; }
/* stato chiuso in inchiostro come quello aperto: lo distinguono il lucchetto e le parole */
.stato--chiuso { color: var(--inchiostro); }

.etichette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
}
.etichetta {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 3px 10px 0;
  border-radius: var(--r-piccolo);
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}
.etichetta--gratuito { background: var(--rosso); color: var(--bianco); }
.etichetta--prezzo { background: var(--inchiostro); color: var(--bianco); font-variant-numeric: tabular-nums; }
.etichetta--chi { background: var(--bianco); color: var(--inchiostro); border: 2px solid var(--orario); padding-inline: 8px; }

.dati {
  display: grid;
  gap: 6px;
  list-style: none;
  padding: 0;
  font-family: var(--f-segno);
  font-weight: 600;
  font-size: var(--t-dato);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.dati li { display: flex; align-items: flex-start; gap: 10px; }
/* nel biglietto «quando» a tutta riga, durata e dove sulla stessa riga se ci stanno (come nella locandina) */
.biglietto .dati { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.biglietto .dati li:first-child { flex-basis: 100%; }
.dati .ico { margin-top: 1px; }
.dati span { padding-top: 2px; }

/* linea di strappo con le due tacche */
.strappo {
  position: relative;
  flex: none;
  height: 16px;
  background: repeating-linear-gradient(to right, var(--filetto) 0 8px, transparent 8px 14px) center / calc(100% - 32px) 2px no-repeat;
}
.strappo::before, .strappo::after {
  content: "";
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--fondo);
  transform: rotate(45deg);
}
.strappo::before { left: -9px; border-top-color: var(--filetto); border-right-color: var(--filetto); }
.strappo::after { right: -9px; border-bottom-color: var(--filetto); border-left-color: var(--filetto); }

/* matrice «Per chi» / «Quanto» */
.matrice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 8px 16px 16px;
}
.matrice dt {
  margin-bottom: 4px;
  color: var(--orario);
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.matrice dd { font-size: 18px; line-height: 1.35; }
.matrice .quanto {
  max-width: 9em;
  font-family: var(--f-segno);
  font-weight: 800;
  font-size: var(--t-quanto);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.quanto--gratuito { color: var(--rosso); }

/* ---------- Slider «Corsi in evidenza» ---------- */
.evidenza {
  --fondo: var(--bianco);
  overflow-x: clip;
  padding-top: 16px;
  background: var(--bianco);
}
.evidenza__binario {
  display: flex;
  gap: var(--spazio-slide);
  list-style: none;
  margin: 0;
  padding: 0 calc((100vw - var(--larghezza-slide)) / 2) 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.slide {
  display: flex;
  flex: none;
  width: var(--larghezza-slide);
  scroll-snap-align: center;
}
.js .e-attivo .evidenza__binario { /* giuria Vetrina G3-02: senza script.js resta la fila che scorre */
  display: grid;
  overflow: visible;
  padding: 0;
}
.js .e-attivo .slide {
  grid-area: 1 / 1;
  justify-self: center;
  transform: translateX(calc(var(--pos, 0) * (100% + var(--spazio-slide))));
  transition: transform 500ms cubic-bezier(.2, .7, .2, 1);
}
.js .slide.senza-transizione { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js .slide { transition: none; }
}

.slide__biglietto {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "linea" "foto" "corpo";
  grid-template-rows: auto auto 1fr;
  width: 100%;
  padding-top: 6px;
  background: var(--bianco);
  border: 1px solid var(--filetto);
  border-radius: var(--r-biglietto);
}
.slide__linea { grid-area: linea; }
.slide .foto { grid-area: foto; }
.slide .strappo { display: none; }
.slide__corpo {
  grid-area: corpo;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}
.slide__testa { display: flex; align-items: flex-start; gap: 12px; }
.slide__lato { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.slide__lato .etichette { flex-direction: column; align-items: flex-start; }
.slide__titolo {
  font-family: var(--f-segno);
  font-weight: 800;
  font-size: var(--t-biglietto);
  line-height: 1.12;
  text-wrap: balance;
  padding-top: 2px;
}
.slide .pulsante { align-self: flex-start; margin-top: auto; }
/* Telefono: la foto (4:3) è la parte grande della slide; sotto, tessera e linea senza filetto,
   poi data con accanto costo e stato, il titolo e «Scopri il corso». */
@media (max-width: 719px) {
  .slide__biglietto { grid-template-areas: "foto" "linea" "corpo"; }
  .slide .foto { aspect-ratio: 4 / 3; }
  .slide .foto, .slide .foto > img:first-child { border-radius: 8px 8px 0 0; }
  .slide__linea { border-bottom: 0; padding: 12px 14px 0; }
  .slide__corpo { padding: 12px 14px 16px; gap: 12px; }
  .slide__testa { gap: 10px; }
  .slide .stato { font-size: 16px; gap: 6px; }
  .slide .stato .ico { width: 16px; height: 16px; margin-top: 2px; }
}
/* Sul computer le vicine mostrano la foto e la striscia della linea: quella a sinistra allarga la foto
   a tutto il biglietto (altrimenti si vedrebbe la matrice tagliata); la matrice compare quando la slide arriva al centro. */
@media (min-width: 720px) {
  .js .slide[data-pos="-1"] .foto, .js .slide[data-pos="-2"] .foto { grid-column: 1 / -1; grid-row: 1 / -1; z-index: 1; border-radius: 0 0 11px 11px; }
  .js .slide[data-pos="-1"] .foto > img:first-child, .js .slide[data-pos="-2"] .foto > img:first-child { border-radius: 0 0 11px 11px; }
  .js .slide .slide__corpo, .js .slide .slide__linea { transition: opacity 300ms ease-out; }
  .js .e-attivo .slide:not([data-pos="0"]) .slide__corpo, .js .e-attivo .slide:not([data-pos="0"]) .slide__linea { opacity: 0; transition: none; }
}
@media (min-width: 720px) and (prefers-reduced-motion: reduce) {
  .js .slide .slide__corpo, .js .slide .slide__linea { transition: none; }
}
.e-vicina-destra .simbolo-ai { left: calc(var(--finestra, 40px) - 22px); right: auto; }

@media (min-width: 720px) {
  .slide__biglietto {
    grid-template-columns: minmax(0, 1fr) 16px minmax(280px, 324px);
    grid-template-areas: "foto strappo linea" "foto strappo corpo";
    grid-template-rows: auto 1fr;
    min-height: 360px;
  }
  .slide .foto {
    aspect-ratio: auto;
    min-height: 100%;
    border-radius: 0 0 0 11px;
  }
  .slide .foto > img:first-child { border-radius: 0 0 0 11px; }
  .slide__linea { border-bottom: 0; padding: 20px 20px 4px; }
  .slide__corpo { padding: 12px 24px 24px 20px; }
  .slide .strappo {
    display: block;
    grid-area: strappo;
    height: auto;
    background: repeating-linear-gradient(to bottom, var(--filetto) 0 8px, transparent 8px 14px) center / 2px calc(100% - 32px) no-repeat;
  }
  .slide .strappo::before { top: -9px; left: 0; border-color: transparent; border-bottom-color: var(--filetto); border-right-color: var(--filetto); }
  .slide .strappo::after { top: auto; bottom: -9px; right: 0; border-color: transparent; border-top-color: var(--filetto); border-left-color: var(--filetto); }
}
@media (min-width: 1024px) {
  .slide__corpo { gap: 16px; }
}

.evidenza__comandi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.no-js .evidenza__comandi { display: none; }
.comando {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--inchiostro);
  border-radius: 50%;
  background: var(--bianco);
  color: var(--inchiostro);
  cursor: pointer;
}
.comando:hover { background: var(--banchina); }
.comando .ico-riprendi, .comando[data-fermo="true"] .ico-pausa { display: none; }
.comando[data-fermo="true"] .ico-riprendi { display: block; }
.evidenza__posizione {
  min-width: 4.5em;
  padding-top: 2px;
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Home: apertura e legenda «Per chi sei» ---------- */
.apertura { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.apertura__frase { margin-top: 12px; font-size: 20px; line-height: 1.45; }
.apertura .cerca { margin-top: 24px; }
.famiglie { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.famiglie .pulsante { flex: 1 1 auto; gap: 12px; padding-inline: 16px; }
.famiglie .quadratino { margin-top: -3px; }

/* Legenda «Per chi sei» come la legenda di una metropolitana: ogni pubblico è una linea da 6 px
   nel suo colore, che parte dalla tessera e corre fino alla freccia. Il nome sta sopra la linea,
   la spiegazione sotto. Nessun pannello attorno: solo i filetti fra le righe. */
.legenda { margin-top: 8px; list-style: none; padding: 0; }
.legenda li + li { border-top: 1px solid var(--filetto); }
.legenda a {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  grid-template-rows: auto 6px auto;
  column-gap: 0;
  align-items: center;
  min-height: 72px;
  padding: 16px 0;
  color: inherit;
  text-decoration: none;
}
/* la linea: dalla tessera alla freccia */
.legenda a::before {
  content: "";
  grid-column: 1 / 3;
  grid-row: 2;
  height: 6px;
  margin-right: 8px;
  border-radius: 0 3px 3px 0;
  background: var(--linea);
}
.legenda .tessera { grid-column: 1; grid-row: 2; margin-block: -21px; position: relative; z-index: 1; }
.legenda__nome {
  grid-column: 2 / 4;
  grid-row: 1;
  padding: 2px 0 8px 16px;
  font-family: var(--f-segno);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
}
.legenda__spiega { grid-column: 2 / 4; grid-row: 3; padding: 8px 0 0 16px; color: var(--orario); font-size: 16px; line-height: 1.4; }
.legenda .ico { grid-column: 3; grid-row: 2; width: 24px; height: 24px; margin-block: -9px; }
.legenda a:hover { background: var(--banchina); }
.legenda a:hover .legenda__nome { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.legenda a:focus-visible { outline-offset: 2px; }

@media (min-width: 1024px) {
  .apertura {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  .apertura__intro { grid-column: 1 / span 6; padding-top: 8px; padding-right: 24px; }
  .apertura__legenda { grid-column: 7 / span 6; }
  .famiglie .pulsante { flex: 0 1 auto; }
}

/* card della home: 3 sul telefono, 4 sul tablet, 6 sul computer */
@media (max-width: 1023px) {
  .solo-computer { display: none !important; }
}
@media (max-width: 719px) {
  .da-tablet { display: none !important; }
}
.fascia__azione { margin-top: 24px; }
@media (max-width: 719px) {
  .fascia__azione .pulsante { width: 100%; }
}

/* ---------- Pannelli: aziende, credenziali ---------- */
.pannello {
  padding: 24px 16px;
  background: var(--bianco);
  border: 1px solid var(--filetto);
  border-radius: var(--r-biglietto);
}
.pannello__testa { display: flex; align-items: center; gap: 12px; }
.pannello__testa h2 { padding-top: 4px; }
.pannello__frase { margin-top: 12px; }
.righe-link { list-style: none; padding: 0; margin: 16px 0 24px; }
.righe-link li { border-top: 1px solid var(--filetto); }
.righe-link li:last-child { border-bottom: 1px solid var(--filetto); }
.righe-link a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 10px 0 8px;
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  text-decoration: none;
}
.righe-link a:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.righe-link .ico { width: 24px; height: 24px; margin-top: -3px; }

/* Accreditati e certificati: niente pannello, un solo filetto in cima e l'elenco su due colonne */
.credenziali-blocco { padding-top: 24px; border-top: 1px solid var(--filetto); }
.credenziali { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 16px 32px; }
.credenziali li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
}
@media (min-width: 720px) {
  .credenziali { grid-template-columns: 1fr 1fr; }
}
.credenziali .ico { width: 24px; height: 24px; }
.credenziali__nome {
  display: block;
  padding-top: 2px;
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
}
.credenziali__estremi {
  display: block;
  margin-top: 2px;
  color: var(--orario);
  font-family: var(--f-segno);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.coppia-pannelli { display: grid; gap: 24px; }
@media (min-width: 1024px) {
  .pannello { padding: 32px; }
  .coppia-pannelli { grid-template-columns: 5fr 7fr; align-items: start; }
  .credenziali-blocco { padding-top: 32px; }
}

/* ---------- Segreteria ---------- */
.segreteria__corpo { display: grid; gap: 20px; margin-top: 16px; }
.telefono {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-segno);
  font-weight: 800;
  font-size: var(--t-telefono);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  min-height: 52px;
}
.telefono .ico { width: 0.8em; height: 0.8em; margin-top: -0.12em; }
.telefono span { padding-top: 0.12em; }
.telefono:hover span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
.segreteria__orari { margin-top: 8px; }
.recapiti { list-style: none; padding: 0; display: grid; gap: 4px; }
.recapiti li { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.recapiti a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.recapiti .ico { width: 24px; height: 24px; }
@media (min-width: 1024px) {
  .segreteria__corpo { grid-template-columns: 5fr 7fr; column-gap: 24px; align-items: start; }
  .recapiti { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}

/* ---------- Piè di pagina ---------- */
.piede {
  margin-top: var(--sezione);
  padding-block: 40px 32px;
  background: var(--banchina);
}
.piede__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 16px; }
.piede__griglia > :first-child { grid-column: 1 / -1; }
.piede__logo { height: 56px; width: auto; }
.piede__dati { margin-top: 20px; list-style: none; padding: 0; font-size: 16px; line-height: 1.5; }
.piede__dati li + li { margin-top: 4px; }
.piede__dati strong { font-family: var(--f-segno); font-weight: 700; font-size: 18px; }
.piede__titolo {
  margin-bottom: 4px;
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 16px;
  color: var(--orario);
}
.piede__link { list-style: none; padding: 0; }
.piede__link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-top: 2px;
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 16px;
}
.piede__link .ico { width: 16px; height: 16px; margin-top: -2px; }
.piede__ia {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--filetto);
  color: var(--orario);
  font-size: 16px;
}
.piede__ia img { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; }
@media (min-width: 1024px) {
  .piede { padding-block: 56px 40px; }
  .piede__griglia { grid-template-columns: 5fr 3fr 4fr; column-gap: 24px; }
  .piede__griglia > :first-child { grid-column: auto; }
}

/* ---------- Catalogo ---------- */
.intestazione { padding-block: 32px 8px; }
@media (min-width: 1024px) { .intestazione { padding-block: 48px 16px; } }
.intestazione__frase { margin-top: 12px; max-width: 44rem; font-size: 20px; }
.cerca--catalogo { margin-top: 24px; max-width: 36rem; }
.togli-ricerca { margin-top: 4px; }
.togli-ricerca[hidden] { display: none; }
.togli-ricerca a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-top: 2px;
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 18px;
}
.togli-ricerca .ico { width: 18px; height: 18px; margin-top: -3px; }
.filtri { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-top: 24px; }
.no-js .filtri { display: none; }
.filtro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 3px 14px 0 10px;
  border: 2px solid var(--orario);
  border-radius: var(--r-piccolo);
  background: var(--bianco);
  color: var(--inchiostro);
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  cursor: pointer;
}
.filtro .tessera { margin-top: -3px; }
.filtro--tutti { padding-left: 16px; padding-right: 16px; }
.filtro:hover { background: var(--banchina); }
.filtro .spunta { display: none; margin-top: -3px; }
.filtro[aria-pressed="true"] {
  border: 3px solid var(--inchiostro);
  padding: 2px 13px 0 9px;
  font-weight: 800;
}
.filtro--tutti[aria-pressed="true"] { padding-left: 15px; padding-right: 15px; }
.filtro[aria-pressed="true"] .spunta { display: block; }
.risultati { margin-top: 16px; font-family: var(--f-segno); font-weight: 600; font-size: 18px; min-height: 1.4em; }
.catalogo { margin-top: 24px; }
.vuoto {
  margin-top: 24px;
  padding: 20px 16px;
  background: var(--bianco);
  border: 1px solid var(--filetto);
  border-radius: var(--r-biglietto);
}
.vuoto[hidden] { display: none; }

/* ---------- Scheda corso ---------- */
.briciole ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  list-style: none;
  padding: 8px 0;
  font-family: var(--f-segno);
  font-weight: 600;
  font-size: 16px;
}
.briciole li { display: flex; align-items: center; gap: 8px; }
.briciole a { display: inline-flex; align-items: center; min-height: 44px; padding-top: 2px; }
.briciole [aria-hidden] { color: var(--orario); }

.scheda { display: flex; flex-direction: column; gap: 16px; }
.scheda__pannello { display: contents; }
/* locandina per lo schermo (senza simbolo stampato) con sopra il simbolo «AI» vero da 16 px:
   la foto nella pagina 540 x 720 parte a 76 px dall'alto e finisce a 20 px dal bordo destro */
.scheda__immagine { position: relative; }
.scheda__immagine > img:first-child {
  width: 100%;
  height: auto;
  border: 1px solid var(--filetto);
  border-radius: var(--r-biglietto);
}
.scheda__immagine .simbolo-ai { top: calc(10.556% + 6px); right: calc(3.704% + 6px); }
.scheda__file { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 4px; }
.scheda__file a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-top: 2px;
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 16px;
}
.scheda__linea { font-size: 20px; margin-top: 8px; }
.scheda h1 { margin-top: -4px; }
.scheda .stato { font-size: 18px; }

/* «Per chi» e «Quanto» come due righe di testo (la parte grafica la mostra già la locandina) */
.fatti { display: grid; gap: 8px; }
.fatti > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.fatti dt {
  color: var(--orario);
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.fatti dd { line-height: 1.4; }
.fatti__quanto { font-family: var(--f-segno); font-weight: 800; font-size: var(--t-dato); font-variant-numeric: tabular-nums; }
.fatti__quanto--gratuito { color: var(--rosso); }

.scheda__principale {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-inline: calc(-1 * var(--margine));
  padding: 8px var(--margine);
  background: var(--bianco);
  border-top: 2px solid var(--filetto);
}
.scheda__principale .pulsante { width: 100%; }
/* riga di richiamo sopra il pulsante agganciato: stato e costo nella prima schermata del telefono */
.scheda__richiamo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 12px;
  margin-bottom: 6px;
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
}
.richiamo__stato { display: inline-flex; align-items: center; gap: 6px; padding-top: 2px; }
.richiamo__stato .ico { width: 16px; height: 16px; margin-top: -2px; }
.richiamo__stato--chiuso { color: var(--orario); }
.richiamo__costo { padding-top: 2px; font-weight: 800; font-variant-numeric: tabular-nums; }
.richiamo__costo--gratuito { color: var(--rosso); }
.scheda__secondario { margin-top: -8px; }
.scheda__secondario .pulsante { width: 100%; }
/* nota del prototipo in fondo, come segnaposto (non è contenuto del corso) */
.nota-prototipo {
  padding: 10px 14px 8px;
  border: 2px dashed var(--orario);
  border-radius: var(--r-piccolo);
  color: var(--orario);
  font-size: 16px;
  line-height: 1.4;
}

/* sotto i 1024 px: locandina alta al massimo metà schermo, niente riga della tessera
   (il pubblico è già nelle briciole e nella locandina), così titolo e stato salgono */
@media (max-width: 1023px) {
  .scheda__immagine { width: min(100%, 36vh); width: min(100%, 36svh); margin-inline: auto; }
  .scheda__file { justify-content: center; }
  .scheda__linea { display: none; }
}

.dettagli {
  background: var(--bianco);
  border: 1px solid var(--filetto);
  border-radius: var(--r-biglietto);
}
.dettagli summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px 16px;
  list-style: none;
  cursor: pointer;
  border-radius: 11px;
}
.dettagli summary::-webkit-details-marker { display: none; }
.dettagli summary:hover { background: var(--banchina); }
.dettagli summary h2 { font-size: 20px; line-height: 1.2; padding-top: 3px; }
.dettagli summary .ico { width: 24px; height: 24px; }
.dettagli[open] summary { border-radius: 11px 11px 0 0; }
.dettagli[open] summary .ico { transform: rotate(180deg); }
.dettagli__corpo { padding: 4px 16px 20px; }
.dettagli__corpo h3 {
  margin-top: 16px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
}
.dettagli__corpo p { margin-top: 4px; max-width: 65ch; }
.segnaposto { color: var(--orario); font-family: var(--f-segno); font-weight: 700; font-size: 18px; }

.loghi__segnaposto {
  display: grid;
  place-items: center;
  height: 64px;
  padding-top: 3px;
  background: var(--bianco);
  border: 2px dashed var(--orario);
  border-radius: var(--r-piccolo);
  color: var(--orario);
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 16px;
}
.loghi__dicitura { margin-top: 8px; color: var(--orario); font-size: 16px; line-height: 1.45; }

@media (max-height: 560px) {
  .scheda__principale { position: static; margin-inline: 0; padding: 0; border-top: 0; }
  .scheda__richiamo { display: none; }
}
@media (min-width: 1024px) {
  .scheda {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    align-items: start;
    margin-top: 8px;
  }
  .scheda__locandina {
    grid-column: 1 / span 5;
    grid-row: 1 / span 4;
    position: sticky;
    top: 24px;
  }
  .scheda__pannello {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    grid-column: 6 / span 7;
    grid-row: 1;
    padding: 30px 32px 32px;
    background: var(--bianco);
    border: 1px solid var(--filetto);
    border-radius: var(--r-biglietto);
  }
  .scheda__pannello > * { flex: 0 0 100%; }
  .scheda__linea { margin-top: 0; }
  .scheda__pannello > .dati { padding-top: 4px; }
  .fatti { padding-top: 16px; border-top: 1px solid var(--filetto); }
  .scheda__principale, .scheda__secondario { flex: 0 0 auto; }
  .scheda__principale {
    position: static;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .scheda__richiamo { display: none; }
  .scheda__secondario { margin-top: 8px; }
  .scheda__principale .pulsante, .scheda__secondario .pulsante { width: auto; }
  .dettagli, .loghi, .nota-prototipo { grid-column: 6 / span 7; }
}

/* ---------- Locandina 540 x 720 ---------- */
.una-locandina .locandina { display: none; }
/* versione per lo schermo (locandina.html?schermo): senza il simbolo stampato, che la scheda sovrappone a 16 px */
.senza-simbolo .locandina .simbolo-ai { display: none; }
.una-locandina .locandina.e-scelta { display: flex; }
.locandina {
  --fondo: var(--banchina);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 540px;
  height: 720px;
  padding: 0 20px 20px;
  background: var(--bianco);
  color: var(--inchiostro);
}
.locandina > * { flex-shrink: 0; }
.locandina__striscia { height: 8px; margin: 0 -20px; background: var(--linea); }
.locandina__linea {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
}
.locandina__linea span:last-child { padding-top: 3px; }
.locandina .foto {
  margin-top: 12px;
  aspect-ratio: auto;
  height: var(--altezza-foto, 214px);
  border-radius: 8px;
}
.locandina .foto > img:first-child { border-radius: 8px; }
.locandina__testa { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.locandina .data { --lato: 104px; }
.locandina .data__numero { font-size: 60px; padding-top: 6px; }
.locandina .data__parola { font-size: 28px; }
.locandina .data__mese { font-size: 18px; }
/* «Online / quando vuoi»: riquadro più largo, così «quando vuoi» sta su una riga */
.locandina .data--parola { width: 120px; }
.locandina .data--parola .data__mese { white-space: nowrap; }
/* sulla carta il corso a pagamento ha il riquadro a contorno: niente pieni scuri da stampare
   (rosso pieno = gratuito, contorno scuro = a pagamento); sul sito il riquadro resta pieno */
.locandina .data--pagamento { background: var(--bianco); color: var(--inchiostro); border: 3px solid var(--inchiostro); }
.locandina__titolo {
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -0.015em;
  padding-top: 3px;
}
.locandina__titolo--lungo { font-size: 34px; }
.locandina .dati {
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 6px 28px;
  margin-top: 12px;
  font-size: 17px;
}
.locandina .dati li:first-child { grid-column: 1 / -1; }
.locandina .strappo { margin: 12px -20px 0; }
.locandina .matrice { padding: 6px 0 0; gap: 20px; }
.locandina .matrice dd { font-size: 20px; line-height: 1.3; }
.locandina .matrice .quanto { font-size: 24px; }
.locandina__dicitura { margin-top: 8px; color: var(--orario); font-size: 14px; line-height: 1.35; }
.locandina__loghi {
  display: grid;
  place-items: center;
  height: 28px;
  margin-top: 8px;
  padding-top: 2px;
  border: 1.5px dashed var(--orario);
  border-radius: var(--r-piccolo);
  color: var(--orario);
  font-family: var(--f-segno);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.locandina__piede {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
}
.locandina__piede img { height: 56px; width: auto; }
.locandina__sito { font-family: var(--f-segno); font-weight: 800; font-size: 22px; line-height: 1; }

/* ---------- Colori forzati (Windows ad alto contrasto) ---------- */
@media (forced-colors: active) {
  .tessera, .etichetta, .data, .quadratino, .loghi__segnaposto { border: 2px solid CanvasText; }
  .biglietto, .slide__biglietto, .pannello, .legenda, .dettagli { border-color: CanvasText; }
  .pulsante--principale { border-color: ButtonText; }
  .strappo { background: none; border-top: 2px dashed CanvasText; }
  .legenda a::before { height: 0; background: none; border-top: 6px solid CanvasText; }
  .nota-prototipo { border-color: CanvasText; }
}

/* ===== Prova del 20/10/2026: «Quattro linee» con i colori di «Pieno giorno», linee colorate ===== */
:root {
  --inchiostro: #1D3048; /* blu lavoro della B */
  --orario: #4A5869;     /* blu grigio della B */
  --banchina: #F4EBDF;   /* luce dei pannelli della B */
  --filetto: #E2D3BE;    /* separatori della B */
}
/* Pannelli caldi come nella B: biglietti, slide, pannelli della scheda e locandina su «luce» */
.biglietto, .slide__biglietto, .pannello, .scheda__principale, .scheda__pannello, .dettagli, .locandina { background: #F4EBDF; }
.dettagli summary:hover, .legenda a:hover { background: #EADCC8; }

/* ===== Ritocchi dei giudici, 20/10/2026 sera (versione 1 scelta 2 a 1) ===== */
/* verde e azzurro un po' più scuri: le strisce arrivano a circa 3:1 sul crema; arancio invariato (con l'ambra i daltonici confonderebbero arancio e giallo) */
:root { --linea-verde: #1F9466; --linea-azzurra: #2E8FCF; }
/* la linea gialla resta il giallo dei gilet, ma le sue strisce hanno un bordo ocra per non sparire sul crema */
[data-linea="gialla"] { --linea-bordo: #B38600; }
/* strisce più spesse, soprattutto per il telefono */
.biglietto::before, .slide__biglietto::before { height: 10px; box-shadow: inset 0 -2px 0 var(--linea-bordo, transparent); }
.legenda a::before { height: 8px; box-shadow: inset 0 0 0 1px var(--linea-bordo, transparent); }
.locandina__striscia { height: 10px; box-shadow: inset 0 -2px 0 var(--linea-bordo, transparent); }