/* =========================================================================
   UNA DANZA — foglio di stile del sito vetrina
   FV Partner SRL per Audace Serafino A.S.D. — 2026-08-30

   Costruito sul design system in BRAND/design-system.md.
   Palette 80% bianco / 15-18% nero / 2-5% oro: l'oro è filigrana, mai blocco.
   Tipografia: Jost (titoli) + Inter (testo). Nessun terzo font.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Token
   ------------------------------------------------------------------------- */
:root {
  /* Palette — design system §1 */
  --nero:        #1A1A1A;
  --bianco:      #FFFFFF;
  --oro:         #B08D3E;
  --grigio-testo:#2C2C2C;
  --grigio-bordo:#E8E8E8;
  --grigio-tenue:#F6F6F6;
  --grigio-medio:#8A8A8A;

  /* Tipografia */
  --titolo: 'Jost', 'Century Gothic', 'Futura', sans-serif;
  --testo:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Ritmo verticale — min 120px fra le sezioni (design system §6) */
  --sezione:  clamp(88px, 11vw, 168px);
  --blocco:   clamp(40px, 5vw, 72px);

  /* Griglia — max 1280px, padding 24/48/80 */
  --max:      1280px;
  --max-testo: 720px;
  --bordo-pagina: 24px;

  /* Altezza della testata.
     La detta il logo: la versione principale non scende sotto i 200 px di
     larghezza (design system §3) e a quella larghezza è alta 106 px.
     Quando Fabrizio consegnerà la versione compatta, qui si dimezza. */
  --h-testata: 134px;

  /* Movimento */
  --transizione: 320ms cubic-bezier(.22,.61,.36,1);
}

@media (min-width: 768px)  { :root { --bordo-pagina: 48px; } }
@media (min-width: 1100px) { :root { --bordo-pagina: 80px; } }

/* -------------------------------------------------------------------------
   2. Reset essenziale
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  overflow-x: clip;   /* le immagini che sfondano il bordo non creano scorrimento
                         laterale. `clip` e non `hidden`: hidden romperebbe la
                         testata sticky. */
  background: var(--bianco);
  color: var(--grigio-testo);
  font-family: var(--testo);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Titoli — Jost, mai grassetto, mai italico, mai maiuscolo di parola singola */
h1, h2, h3, h4 {
  font-family: var(--titolo);
  color: var(--nero);
  margin: 0;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}
h3, h4 { line-height: 1.25; letter-spacing: 0; }

h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.95rem); font-weight: 400; }
h4 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 500; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 500; color: var(--nero); }

/* ⚠️ L'attributo `hidden` vale solo quanto una regola del foglio dell'utente
   agente: **qualunque** regola d'autore che imposti `display` lo batte. Nel
   pannello del menu mobile ce ne sono due, e nascondevano un pulsante da
   desktop lasciandolo visibile da telefono.
   Qui `hidden` torna a voler dire nascosto, e vale per tutto il sito: il
   pulsante del menu, i blocchi del conto alla rovescia, il blocco dell'evento
   in homepage. */
[hidden] { display: none !important; }

/* Enfasi dentro un titolo: si alza il peso, non si usa il bold — design system §2 */
.enfasi { font-weight: 500; }

::selection { background: var(--nero); color: var(--bianco); }

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

/* -------------------------------------------------------------------------
   3. Impianto di pagina
   ------------------------------------------------------------------------- */
.contenitore {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
}

.colonna-testo { max-width: var(--max-testo); }

.sezione { padding-block: var(--sezione); }
.sezione--stretta { padding-block: var(--blocco); }
.sezione--scura {
  background: var(--nero);
  color: #D8D8D8;
}
.sezione--scura h1, .sezione--scura h2,
.sezione--scura h3, .sezione--scura h4 { color: var(--bianco); }
.sezione--scura strong { color: var(--bianco); }
.sezione--tenue { background: var(--grigio-tenue); }

/* Divisori: linee oro sottili, MAI riquadri colorati — design system §6 */
.filo {
  border: 0;
  height: 1px;
  background: var(--oro);
  width: 64px;
  margin: 0 0 var(--blocco);
}
.filo--pieno { width: 100%; background: var(--grigio-bordo); }

.salta-al-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--nero);
  color: var(--bianco);
  padding: 12px 20px;
  z-index: 200;
}
.salta-al-contenuto:focus { left: 8px; top: 8px; }

/* -------------------------------------------------------------------------
   4. Etichette e microtesto
   ------------------------------------------------------------------------- */
.etichetta {
  font-family: var(--testo);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grigio-medio);
  margin: 0 0 1.4rem;
  display: block;
}
.etichetta--oro { color: var(--oro); }
.sezione--scura .etichetta { color: #9A9A9A; }

.nota {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--grigio-medio);
}

.occhiello {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  color: var(--nero);
  letter-spacing: -0.005em;
}

/* -------------------------------------------------------------------------
   5. Link e pulsanti
   ------------------------------------------------------------------------- */
.link {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nero);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--oro);
  transition: gap var(--transizione), color var(--transizione);
}
.link:hover { gap: .95em; color: var(--oro); }
.link svg { width: 15px; height: 15px; flex: none; }
.sezione--scura .link { color: var(--bianco); }
.sezione--scura .link:hover { color: var(--oro); }

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--testo);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 38px;
  border: 1px solid var(--nero);
  background: var(--nero);
  color: var(--bianco);
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione);
}
.bottone:hover { background: transparent; color: var(--nero); }
.bottone--vuoto { background: transparent; color: var(--nero); }
.bottone--vuoto:hover { background: var(--nero); color: var(--bianco); }
.sezione--scura .bottone {
  background: var(--bianco); color: var(--nero); border-color: var(--bianco);
}
.sezione--scura .bottone:hover { background: transparent; color: var(--bianco); }

/* -------------------------------------------------------------------------
   6. Testata
   ------------------------------------------------------------------------- */
.testata {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transizione), transform var(--transizione);
}
.testata--staccata { border-bottom-color: var(--grigio-bordo); }

/* In homepage la testata compare solo dopo la prima schermata.
   Sotto `.js` perché è il JavaScript a doverla riportare in campo allo
   scorrimento: senza JS la classe resterebbe per sempre e la homepage non
   avrebbe alcun menu. */
.js .testata--nascosta { transform: translateY(-100%); }

.testata__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--h-testata);
  padding-block: 14px;
}

/* Logo: versione principale, mai sotto i 200 px — design system §3 */
.testata__logo { display: block; flex: none; }
.testata__logo img { width: 200px; }

.navigazione ul {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigazione a {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nero);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transizione), color var(--transizione);
  white-space: nowrap;
}
.navigazione a:hover { border-bottom-color: var(--oro); }
.navigazione a[aria-current="page"] { border-bottom-color: var(--nero); }

.apri-menu, .chiudi-menu {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  margin-right: -10px;
  cursor: pointer;
  color: var(--nero);
}
.apri-menu svg { width: 26px; height: 26px; }
.chiudi-menu svg { width: 24px; height: 24px; }

/* Menu mobile.

   Il pannello a tutto schermo NON può essere un `position: fixed` dentro la
   testata: la testata ha backdrop-filter e transform, che la rendono blocco
   contenitore per i discendenti fissi — l'overlay resterebbe alto quanto lei.
   Quindi, ad apertura, è la testata stessa a diventare il pannello.

   L'apertura è in tre tempi: una tenda bianca scende dall'alto e copre la
   pagina, la croce di chiusura ruota in campo, le voci salgono una dopo
   l'altra da dietro una mascherina. In chiusura la tenda risale.
   Le animazioni sono @keyframes e non transizioni: partono all'istante in cui
   l'attributo cambia, senza bisogno di un fotogramma con lo stato iniziale. */
/* ⚠️ Soglia portata da 900 a 1100 px il 2026-10-02, con l'arrivo della sesta
   voce («La scuola»): a 901 px il menu in riga sforava di 156 px. Sotto i
   1100 px c'è il pannello; fra 1101 e 1240 le voci stanno in riga un po' più
   strette (regola in sezione 37.5). Le due soglie — questa e quella della
   voce-azione in 27.1 — vanno cambiate insieme. */
@media (max-width: 1100px) {
  /* Il menu a scomparsa esiste solo dove il JavaScript può aprirlo. Senza JS
     la navigazione resta in colonna sotto il logo, sempre raggiungibile: da
     telefono non deve mai succedere che il sito sia senza menu. */
  .js .apri-menu { display: block; }
  .js .navigazione { display: none; }

  .navigazione ul { flex-direction: column; gap: 34px; text-align: center; }
  .navigazione a { font-size: 1.15rem; letter-spacing: .08em; }

  /* Fallback senza JavaScript: niente pannello, il menu sta in riga sotto il
     logo. Poche voci brevi, ci stanno tutte. */
  html:not(.js) .testata__interno { flex-wrap: wrap; row-gap: 4px; }
  html:not(.js) .navigazione { width: 100%; }
  html:not(.js) .navigazione ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px 24px;
    padding-bottom: 14px;
  }
  html:not(.js) .navigazione a { font-size: .78rem; letter-spacing: .11em; }
  html:not(.js) .chiudi-menu { display: none; }

  /* ── il pannello ── */
  .testata[data-menu-aperto="true"],
  .testata[data-menu-chiusura="true"] {
    position: fixed;
    inset: 0;
    height: 100dvh;
    background: transparent;
    backdrop-filter: none;
    transform: none !important;
    border-bottom: 0;
    z-index: 150;
    overflow-y: auto;
  }

  /* La tenda: sta sotto al contenuto della testata, così logo e croce restano
     leggibili per tutta la discesa. */
  .testata[data-menu-aperto="true"]::before,
  .testata[data-menu-chiusura="true"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bianco);
    transform-origin: top center;
    z-index: 0;
  }
  .testata[data-menu-aperto="true"]::before  { animation: tendaGiu 520ms cubic-bezier(.16,1,.3,1) both; }
  .testata[data-menu-chiusura="true"]::before { animation: tendaSu 400ms cubic-bezier(.55,0,.9,.35) both; }

  @keyframes tendaGiu { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes tendaSu  { from { transform: scaleY(1); } to { transform: scaleY(0); } }

  .testata[data-menu-aperto="true"] .testata__interno,
  .testata[data-menu-chiusura="true"] .testata__interno {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    /* `align-items: center` arriva dalla regola base della testata, che a
       schermo largo è un flex: qui va riportato a stretch, altrimenti il menu
       resta alto quanto il suo contenuto invece di occupare la riga 1fr, e in
       fondo al pannello si apre un vuoto. */
    align-items: stretch;
    min-height: 100dvh;
  }
  .testata[data-menu-aperto="true"] .testata__logo,
  .testata[data-menu-chiusura="true"] .testata__logo { align-self: center; }

  .testata[data-menu-aperto="true"] .apri-menu,
  .testata[data-menu-chiusura="true"] .apri-menu { display: none; }

  /* ── la croce ── */
  .testata[data-menu-aperto="true"] .chiudi-menu,
  .testata[data-menu-chiusura="true"] .chiudi-menu {
    display: block;
    position: absolute;
    top: 45px;
    right: max(14px, calc(var(--bordo-pagina) - 10px));
  }
  .testata[data-menu-aperto="true"] .chiudi-menu {
    animation: entraCroce 420ms cubic-bezier(.16,1,.3,1) 90ms both;
  }
  @keyframes entraCroce {
    from { opacity: 0; transform: rotate(-90deg) scale(.7); }
    to   { opacity: 1; transform: none; }
  }

  /* ── le voci ── */
  .testata[data-menu-aperto="true"] .navigazione,
  .testata[data-menu-chiusura="true"] .navigazione {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    padding-bottom: 6vh;
  }

  .testata[data-menu-aperto="true"] .navigazione li,
  .testata[data-menu-chiusura="true"] .navigazione li { overflow: hidden; }

  .testata[data-menu-aperto="true"] .navigazione li > a {
    display: inline-block;
    animation: saliVoce 560ms cubic-bezier(.16,1,.3,1) both;
    animation-delay: calc(170ms + var(--i, 0) * 62ms);
  }
  @keyframes saliVoce {
    from { transform: translateY(115%); }
    to   { transform: none; }
  }
  .navigazione li:nth-child(1) { --i: 0; }
  .navigazione li:nth-child(2) { --i: 1; }
  .navigazione li:nth-child(3) { --i: 2; }
  .navigazione li:nth-child(4) { --i: 3; }
  .navigazione li:nth-child(5) { --i: 4; }
  .navigazione li:nth-child(6) { --i: 5; }

  /* In chiusura le voci si spengono in fretta, la tenda fa il resto. */
  .testata[data-menu-chiusura="true"] .navigazione li > a {
    animation: sparisci 200ms ease both;
  }
  @keyframes sparisci { to { opacity: 0; } }


  /* Chi ha chiesto meno movimento apre e chiude il menu, senza spettacolo. */
  @media (prefers-reduced-motion: reduce) {
    .testata[data-menu-aperto="true"]::before,
    .testata[data-menu-chiusura="true"]::before,
    .testata[data-menu-aperto="true"] .chiudi-menu,
    .testata[data-menu-aperto="true"] .navigazione li > a,
    .testata[data-menu-chiusura="true"] .navigazione li > a { animation: none; }
    .testata[data-menu-aperto="true"]::before { transform: scaleY(1); }
  }
}


/* -------------------------------------------------------------------------
   7. Prima schermata della homepage
   ------------------------------------------------------------------------- */
/* La testata è sticky, quindi resta nel flusso e occupa la sua altezza in
   cima al documento: l'apertura prende quel che resta del viewport, così la
   prima schermata è esattamente alta quanto lo schermo. */
.apertura {
  min-height: calc(100svh - var(--h-testata));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px var(--bordo-pagina) 72px;
  position: relative;
}
.apertura__logo {
  width: min(340px, 78vw);
  margin-inline: auto;
}
/* Clear space attorno al logo pari all'altezza della "U" — design system §3 */
.apertura__claim {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  color: var(--nero);
  letter-spacing: .01em;
  margin: clamp(38px, 5vw, 60px) 0 0;
}
.apertura__freccia {
  position: absolute;
  bottom: 40px;
  left: 50%;
  translate: -50% 0;
  color: var(--nero);
  opacity: .5;
  animation: respiro 2.6s ease-in-out infinite;
}
.apertura__freccia svg { width: 22px; height: 22px; }
@keyframes respiro {
  0%, 100% { transform: translateY(0);    opacity: .38; }
  50%      { transform: translateY(7px);  opacity: .75; }
}

/* -------------------------------------------------------------------------
   8. Testata delle pagine interne
   ------------------------------------------------------------------------- */
.intestazione {
  padding-block: clamp(64px, 9vw, 120px) clamp(40px, 5vw, 72px);
}
.intestazione h1 { margin-bottom: .45em; }
.intestazione__sottotitolo {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.45;
  color: var(--grigio-testo);
  max-width: 40ch;
}

/* -------------------------------------------------------------------------
   9. Blocchi editoriali a due colonne
   ------------------------------------------------------------------------- */
.duetto {
  display: grid;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
@media (min-width: 900px) {
  .duetto { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .duetto--invertito > :first-child { order: 2; }
  .duetto--alto { align-items: start; }
}

.duetto__testo > * + * { margin-top: 1.2rem; }

/* -------------------------------------------------------------------------
   10. Ritratti
   ------------------------------------------------------------------------- */
.ritratto {
  position: relative;
  background: var(--grigio-tenue);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.ritratto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.ritratto--intero { aspect-ratio: 4 / 5; }
.ritratto--scena img { object-position: center center; }

/* Il credito sotto l'immagine che sfonda il bordo va allineato a destra: il
   suo bordo sinistro è fuori schermo, il destro coincide con la colonna. */
.credito--lastra { text-align: right; }

.credito {
  font-size: .72rem;
  color: var(--grigio-medio);
  margin-top: 10px;
  letter-spacing: .02em;
}

/* -------------------------------------------------------------------------
   11. Elenco della promessa / valori
   ------------------------------------------------------------------------- */
.promessa {
  display: grid;
  gap: clamp(36px, 4vw, 56px);
  counter-reset: promessa;
}
@media (min-width: 800px) { .promessa { grid-template-columns: repeat(3, 1fr); } }

.promessa__voce { border-top: 1px solid var(--grigio-bordo); padding-top: 26px; }
.promessa__voce::before {
  counter-increment: promessa;
  content: "0" counter(promessa);
  display: block;
  font-family: var(--titolo);
  font-size: .95rem;
  font-weight: 400;
  color: var(--oro);
  letter-spacing: .06em;
  margin-bottom: 18px;
}
.promessa__voce h3 { margin-bottom: .7em; }
.promessa__voce p { font-size: .97rem; }

/* -------------------------------------------------------------------------
   12. Discipline (elenco tipografico)
   ------------------------------------------------------------------------- */
.discipline { border-top: 1px solid var(--grigio-bordo); }

.disciplina {
  display: grid;
  gap: 6px 32px;
  align-items: baseline;
  padding-block: clamp(26px, 3vw, 38px);
  border-bottom: 1px solid var(--grigio-bordo);
  text-decoration: none;
}
@media (min-width: 760px) {
  .disciplina { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr); }
}
.disciplina__nome {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  color: var(--nero);
  line-height: 1.1;
}
.disciplina__dato { font-size: .95rem; color: var(--grigio-testo); }
.disciplina__docente { font-size: .95rem; color: var(--grigio-medio); }

/* -------------------------------------------------------------------------
   13. Corpo docente
   ------------------------------------------------------------------------- */
/* Due righe da quattro: gli otto ritratti chiudono la griglia esatta,
   senza orfani in coda. */
.indice-docenti {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.2vw, 32px);
}
@media (min-width: 620px)  { .indice-docenti { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 880px)  { .indice-docenti { grid-template-columns: repeat(4, 1fr); } }
.indice-docenti a { text-decoration: none; display: block; }
.indice-docenti .ritratto { margin-bottom: 12px; }
.indice-docenti img { transition: filter var(--transizione), transform var(--transizione); }
.indice-docenti a:hover img { transform: scale(1.03); }
.indice-docenti__nome {
  font-family: var(--titolo);
  font-size: .95rem;
  font-weight: 400;
  color: var(--nero);
  line-height: 1.3;
}
.indice-docenti__ruolo {
  font-size: .76rem;
  color: var(--grigio-medio);
  margin-top: 3px;
}

.scheda-docente { scroll-margin-top: 110px; }
.scheda-docente + .scheda-docente { margin-top: var(--sezione); }
.scheda-docente__ruolo {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 14px;
  display: block;
}
.scheda-docente h2 { margin-bottom: .5em; }
.scheda-docente__hook {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.45;
  color: var(--nero);
  margin-bottom: 1.3rem;
}
.scheda-docente__meta {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--grigio-bordo);
  display: grid;
  gap: 10px 32px;
}
@media (min-width: 620px) { .scheda-docente__meta { grid-template-columns: repeat(2, 1fr); } }
.scheda-docente__meta div { font-size: .9rem; }
.scheda-docente__meta dt {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grigio-medio);
  margin-bottom: 3px;
}
.scheda-docente__meta dd { margin: 0; color: var(--nero); }

/* -------------------------------------------------------------------------
   14. Corsi — percorso per età
   ------------------------------------------------------------------------- */
.eta {
  display: grid;
  gap: clamp(20px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.eta__colonna { border-top: 2px solid var(--nero); padding-top: 20px; }
.eta__fascia {
  font-family: var(--titolo);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--nero);
  line-height: 1;
}
.eta__livello {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oro);
  margin-top: 8px;
}
.eta__lista { list-style: none; margin: 20px 0 0; padding: 0; }
.eta__lista li {
  font-size: .9rem;
  line-height: 1.45;
  padding-block: 9px;
  border-top: 1px solid var(--grigio-bordo);
  color: var(--grigio-testo);
}
.eta__lista li span { display: block; font-size: .76rem; color: var(--grigio-medio); margin-top: 2px; }

/* -------------------------------------------------------------------------
   15. Corsi — dettaglio per disciplina
   ------------------------------------------------------------------------- */
.blocco-disciplina { scroll-margin-top: 110px; }
.blocco-disciplina + .blocco-disciplina { margin-top: var(--sezione); }

.blocco-disciplina__testata {
  display: grid;
  gap: 12px 40px;
  align-items: baseline;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--nero);
  margin-bottom: 0;
}
@media (min-width: 800px) {
  .blocco-disciplina__testata { grid-template-columns: minmax(0, 1fr) auto; }
}
.blocco-disciplina__meta {
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--grigio-medio);
  text-transform: uppercase;
}

.tabella-corsi { width: 100%; border-collapse: collapse; }
.tabella-corsi th {
  font-family: var(--testo);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grigio-medio);
  text-align: left;
  padding: 16px 20px 12px 0;
  border-bottom: 1px solid var(--grigio-bordo);
  white-space: nowrap;
}
.tabella-corsi td {
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--grigio-bordo);
  font-size: .95rem;
  vertical-align: baseline;
}
.tabella-corsi td:first-child { color: var(--nero); font-weight: 500; }
.tabella-corsi tr:last-child td { border-bottom: 0; }
.tabella-corsi .num { white-space: nowrap; font-variant-numeric: proportional-nums; }

/* Su schermo stretto la tabella diventa un elenco di schede.
   Vanno sganciati dal layout tabellare anche table e tbody: se restano
   `display: table` l'algoritmo delle colonne tiene la larghezza minima del
   contenuto e la riga sborda a destra, portando i valori fuori schermo. */
@media (max-width: 700px) {
  .tabella-corsi,
  .tabella-corsi tbody { display: block; width: 100%; }
  .tabella-corsi thead { position: absolute; left: -9999px; }
  .tabella-corsi tr {
    display: block;
    padding-block: 18px;
    border-bottom: 1px solid var(--grigio-bordo);
  }
  .tabella-corsi tr:last-child { border-bottom: 0; }
  .tabella-corsi td {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 3px 0;
    border: 0;
    font-size: .92rem;
  }
  .tabella-corsi td:first-child { font-size: 1.05rem; padding-bottom: 8px; }
  .tabella-corsi td::before {
    content: attr(data-etichetta);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grigio-medio);
    flex: none;
    padding-top: .25em;
  }
  .tabella-corsi td:first-child::before { content: none; }
}

/* -------------------------------------------------------------------------
   16. Corsi — la settimana
   ------------------------------------------------------------------------- */
.settimana { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.settimana table { width: 100%; min-width: 720px; border-collapse: collapse; }
.settimana th, .settimana td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--grigio-bordo);
  text-align: left;
  font-size: .9rem;
  vertical-align: top;
}
.settimana thead th {
  font-family: var(--testo);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grigio-medio);
  border-bottom: 1px solid var(--nero);
  white-space: nowrap;
}
.settimana tbody th {
  font-family: var(--titolo);
  font-weight: 400;
  font-size: 1rem;
  color: var(--nero);
  white-space: nowrap;
}
.settimana td span { display: block; font-size: .78rem; color: var(--grigio-medio); margin-top: 3px; }

/* -------------------------------------------------------------------------
   17. Documenti scaricabili
   ------------------------------------------------------------------------- */
.documenti {
  display: grid;
  gap: 1px;
  background: var(--grigio-bordo);
  border: 1px solid var(--grigio-bordo);
}
@media (min-width: 760px) { .documenti { grid-template-columns: repeat(3, 1fr); } }
.documento {
  background: var(--bianco);
  padding: clamp(26px, 3vw, 38px);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background var(--transizione);
}
.documento:hover { background: var(--grigio-tenue); }
.documento__nome {
  font-family: var(--titolo);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--nero);
  line-height: 1.25;
}
.documento__dettaglio { font-size: .85rem; color: var(--grigio-medio); }
.documento__azione {
  margin-top: auto;
  padding-top: 18px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oro);
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.documento__azione svg { width: 14px; height: 14px; }

/* -------------------------------------------------------------------------
   18. Citazione
   ------------------------------------------------------------------------- */
.citazione { max-width: 900px; margin-inline: auto; text-align: center; }
.citazione blockquote {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--nero);
  margin: 0;
  text-wrap: balance;
}
.sezione--scura .citazione blockquote { color: var(--bianco); }
.citazione figcaption {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grigio-medio);
}

/* -------------------------------------------------------------------------
   19. Modulo contatti
   ------------------------------------------------------------------------- */
.modulo { display: grid; gap: 26px; }
.modulo__riga { display: grid; gap: 26px; }
@media (min-width: 680px) { .modulo__riga--doppia { grid-template-columns: 1fr 1fr; } }

.campo { display: grid; gap: 8px; }
.campo label {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grigio-medio);
}
.campo label .obbl { color: var(--oro); }

.campo input,
.campo select,
.campo textarea {
  font-family: var(--testo);
  font-size: 1rem;
  color: var(--nero);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--grigio-bordo);
  padding: 12px 0;
  border-radius: 0;
  transition: border-color var(--transizione);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.campo select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232C2C2C' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 28px;
}
.campo textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: 0; border-bottom-color: var(--oro); }
.campo input::placeholder, .campo textarea::placeholder { color: #BDBDBD; }

.consenso {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--grigio-testo);
}
.consenso input {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  accent-color: var(--nero);
}
.consenso a { color: var(--nero); }

.modulo__invio { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.modulo__errore {
  font-size: .85rem;
  color: #A5361F;
  display: none;
}
.modulo__errore[data-visibile="true"] { display: block; }

/* Trappola anti-spam: invisibile alle persone, compilata dai bot */
.esca {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   20. Riquadro contatti
   ------------------------------------------------------------------------- */
.recapiti { display: grid; gap: clamp(28px, 3vw, 40px); }
.recapito { border-top: 1px solid var(--grigio-bordo); padding-top: 20px; }
.recapito dt {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grigio-medio);
  margin-bottom: 10px;
}
.recapito dd {
  margin: 0;
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.4;
  color: var(--nero);
}
.recapito dd a { text-decoration: none; border-bottom: 1px solid var(--grigio-bordo); }
.recapito dd a:hover { border-bottom-color: var(--oro); }
.recapito__nota { font-size: .85rem; font-family: var(--testo); color: var(--grigio-medio); margin-top: 8px; }

/* -------------------------------------------------------------------------
   21. Pagina di ringraziamento
   ------------------------------------------------------------------------- */
.esito {
  min-height: 78svh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-block: var(--sezione);
}
.esito__segno {
  width: 56px;
  height: 56px;
  margin: 0 auto clamp(28px, 4vw, 44px);
  color: var(--oro);
}
.esito h1 { margin-bottom: .5em; }
.esito p { max-width: 46ch; margin-inline: auto; }

/* -------------------------------------------------------------------------
   22. Piede
   ------------------------------------------------------------------------- */
.piede {
  background: var(--nero);
  color: #9C9C9C;
  padding-block: clamp(64px, 8vw, 104px) 40px;
  font-size: .88rem;
}
.piede__griglia {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(48px, 6vw, 72px);
}
@media (min-width: 860px) {
  .piede__griglia { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}
.piede__logo img { width: 200px; margin-bottom: 24px; }
.piede h4 {
  color: var(--bianco);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-family: var(--testo);
}
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.piede a { text-decoration: none; transition: color var(--transizione); }
.piede a:hover { color: var(--bianco); }
.piede__coda {
  border-top: 1px solid #2E2E2E;
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  font-size: .78rem;
  color: #6E6E6E;
}

/* -------------------------------------------------------------------------
   23. Comparsa progressiva
   ------------------------------------------------------------------------- */
/* La comparsa vale solo sotto la classe .anima, che lo script mette dentro
   il primo requestAnimationFrame — cioè solo dopo che il browser ha
   confermato di star davvero dipingendo la pagina, e prima che dipinga il
   primo fotogramma (quindi senza sfarfallio).
   Dove la pagina non viene dipinta — schede in secondo piano, anteprime,
   viewer incorporati, crawler — .anima non arriva mai e il contenuto resta
   semplicemente visibile. Non deve mai esistere uno stato in cui il testo
   resta a opacità zero perché un'animazione non è partita. */
.anima .svela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,.61,.36,1);
}
.anima .svela[data-visibile="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .anima .svela { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   24. Fascia "bozza" — DA RIMUOVERE alla pubblicazione
   ------------------------------------------------------------------------- */
.bozza {
  background: var(--oro);
  color: #fff;
  font-size: .78rem;
  letter-spacing: .04em;
  text-align: center;
  padding: 10px 20px;
  position: relative;
  z-index: 120;
}
.bozza strong { color: #fff; font-weight: 600; }


/* =========================================================================
   25. REGISTRO EDITORIALE — homepage
   Aggiunto il 2026-08-30. Stessi contenuti, impaginazione cinematografica:
   composizioni asimmetriche, tipografia fuori scala, un solo momento
   fotografico a tutta pagina (Alessandra), movimento legato allo scroll.
   Resta la proporzione del design system: 80% bianco, il nero è un accento.
   ========================================================================= */

:root {
  --fuoriscala: clamp(3rem, 8.5vw, 8.2rem);   /* titoli da apertura di sezione */
  --grande:     clamp(2.2rem, 5vw, 4.6rem);   /* titoli di sezione            */
}

/* -------------------------------------------------------------------------
   25.1 Movimento
   Tutto è condizionato alla classe .js: senza JavaScript nulla è nascosto.
   ------------------------------------------------------------------------- */
.anima [data-anim] { will-change: transform, opacity; }

/* Comparsa dal basso, con ritardo progressivo dato dallo script */
.anima [data-anim="sali"] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms cubic-bezier(.16,1,.3,1),
              transform 900ms cubic-bezier(.16,1,.3,1);
  transition-delay: var(--ritardo, 0ms);
}
.anima [data-anim="sali"][data-visibile="true"] { opacity: 1; transform: none; }

/* Titoli che entrano una parola alla volta */
.parola { display: inline-block; overflow: hidden; vertical-align: bottom; }
.anima .parola > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1000ms cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 55ms + var(--ritardo, 0ms));
}
.anima [data-visibile="true"] .parola > span { transform: none; }

/* Filetto oro che si disegna */
.anima .filo[data-anim="filo"] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms cubic-bezier(.16,1,.3,1);
  transition-delay: var(--ritardo, 0ms);
}
.anima .filo[data-anim="filo"][data-visibile="true"] { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .anima [data-anim="sali"] { opacity: 1; transform: none; }
  .anima .parola > span { transform: none; }
  .anima .filo[data-anim="filo"] { transform: none; }
}

/* -------------------------------------------------------------------------
   25.2 Apertura — il logo grande
   ------------------------------------------------------------------------- */
.apertura--grande {
  min-height: calc(100svh - var(--h-testata));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px var(--bordo-pagina) 180px;   /* il fondo lascia posto all'invito a scorrere */
  position: relative;
  overflow: hidden;
}

.apertura__corpo { width: 100%; }

/* Il logo occupa la scena. Il terzo termine del min() lo tiene dentro
   l'altezza disponibile sugli schermi bassi: 1.9 è il rapporto del marchio. */
.apertura--grande .apertura__logo {
  width: min(74vw, 1120px, calc((100svh - 480px) * 1.9));
  min-width: 200px;                 /* minimo della versione principale */
  margin-inline: auto;
  height: auto;
}
.apertura__logo img { width: 100%; display: block; }

/* La firma si scrive da sola.

   Il marchio dell'apertura è servito in due strati sovrapposti — sopra
   "UNA danza · direzione artistica", sotto la sola firma — tagliati dentro la
   banda vuota che li separa, quindi rimessi insieme sono il logo originale.
   Sulla firma corre una maschera con il bordo inclinato come la penna, che
   scopre il tratto da sinistra a destra.

   Sta sotto `.anima`: dove il browser non dipinge la maschera non arriva e la
   firma è semplicemente già scritta. */
.anima .apertura__firma {
  /* Bordo netto, non sfumato: la penna scopre il tratto, non lo dissolve.
     La transizione è larga tre decimi di punto — una manciata di pixel per
     non vedere la scaletta, senza che si legga come una dissolvenza. */
  -webkit-mask-image: linear-gradient(100deg, #000 0 50%, transparent 50.3%);
          mask-image: linear-gradient(100deg, #000 0 50%, transparent 50.3%);
  -webkit-mask-size: 200% 100%;
          mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: scrittura 2.2s linear .25s both;
}

/* Il ritmo è tutto qui dentro, non nell'easing: la penna attacca piano sulla
   A, corre lungo "Alessandra", esita un attimo fra le due parole, riparte su
   "Celentano" e rallenta sullo svolazzo finale.
   Con mask-size al 200%, la frazione scoperta è esattamente 1 meno la
   posizione: 100% = niente, 0% = tutto. */
@keyframes scrittura {
  0%   { -webkit-mask-position: 100% 0; mask-position: 100% 0;
         animation-timing-function: cubic-bezier(.35,0,.65,1); }
  11%  { -webkit-mask-position: 93% 0;  mask-position: 93% 0;
         animation-timing-function: cubic-bezier(.2,0,.55,1); }
  41%  { -webkit-mask-position: 55% 0;  mask-position: 55% 0;
         animation-timing-function: cubic-bezier(.5,0,.6,1); }
  49%  { -webkit-mask-position: 51% 0;  mask-position: 51% 0;
         animation-timing-function: cubic-bezier(.2,0,.55,1); }
  90%  { -webkit-mask-position: 7% 0;   mask-position: 7% 0;
         animation-timing-function: cubic-bezier(.45,0,.75,1); }
  100% { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .anima .apertura__firma {
    animation: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

@media (max-width: 700px) {
  .apertura--grande .apertura__logo { width: min(86vw, calc((100svh - 300px) * 1.9)); }
}

/* Non più in uso dal 31 agosto 2026: il claim è stato tolto dall'apertura.
   La regola resta perché rimetterlo è una riga di HTML. */
.apertura--grande .apertura__claim {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  letter-spacing: .02em;
  color: var(--nero);
  margin: clamp(34px, 4.5vw, 58px) 0 0;
}

/* Logo e claim escono di scena mentre si scorre: quando arriva la testata,
   il marchio grande se n'è già andato e non ci sono due logo insieme. */
.js .apertura--grande .apertura__corpo {
  opacity: var(--uscita, 1);
  transform: scale(var(--scala, 1));
  transform-origin: center 42%;
}

/* Invito a scorrere.
   Deve farsi notare senza gridare: l'etichetta in oro e, sotto, un filo grigio
   percorso in continuo da un segmento dorato che scende. È anche un link —
   cliccandolo si va alla sezione successiva. */
.apertura__giu {
  position: absolute;
  bottom: 26px;
  left: 50%;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 6px 16px 0;
  text-decoration: none;
  opacity: var(--uscita, 1);
  transition: transform 420ms cubic-bezier(.16,1,.3,1);
}
.apertura__giu:hover { transform: translateY(5px); }

.apertura__giu span {
  font-family: var(--testo);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--oro);
  transition: color var(--transizione);
}
.apertura__giu:hover span { color: var(--nero); }

.apertura__giu i {
  position: relative;
  display: block;
  width: 1px;
  height: 62px;
  background: var(--grigio-bordo);
  overflow: hidden;
}
/* Il segmento che scende: parte sopra il filo ed esce sotto, in continuo. */
.apertura__giu i::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 38%;
  background: var(--oro);
  animation: corsaGiu 2.1s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes corsaGiu {
  0%   { transform: translateY(-115%); opacity: 0; }
  18%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(285%); opacity: 0; }
}

/* Il chevron chiude l'invito: scende e risale piano, in tempo con il filo. */
.apertura__giu::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--oro);
  border-bottom: 1.5px solid var(--oro);
  rotate: 45deg;
  margin-top: 12px;
  animation: cennoGiu 2.1s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes cennoGiu {
  0%, 100% { transform: translateY(-3px); opacity: .45; }
  55%      { transform: translateY(3px);  opacity: 1; }
}

@media (max-width: 700px) {
  .apertura__giu i { height: 52px; }
  .apertura__giu span { font-size: .72rem; letter-spacing: .24em; }
}

@media (prefers-reduced-motion: reduce) {
  .apertura__giu i::after { animation: none; height: 100%; opacity: .75; }
  .apertura__giu::after { animation: none; transform: none; opacity: 1; }
  .apertura__giu:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   25.3 Apertura di sezione — etichetta, filetto, titolo fuori scala
   ------------------------------------------------------------------------- */
.attacco { display: grid; gap: 0; }
.attacco__etichetta {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grigio-medio);
  margin-bottom: clamp(28px, 3.4vw, 46px);
}
.attacco__etichetta::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--grigio-bordo);
  max-width: 240px;
}
.sezione--scura .attacco__etichetta { color: #8E8E8E; }
.sezione--scura .attacco__etichetta::after { background: #333; }

.titolo-fuoriscala {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: var(--fuoriscala);
  line-height: 1.03;
  letter-spacing: -0.022em;
  color: var(--nero);
  margin: 0;
  text-wrap: balance;
}
.titolo-grande {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: var(--grande);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--nero);
  margin: 0;
  text-wrap: balance;
}
.sezione--scura .titolo-fuoriscala,
.sezione--scura .titolo-grande { color: var(--bianco); }

/* Nei titoli fuori scala la parte in evidenza è sempre una frase a sé:
   va a capo da sola invece di attaccarsi alla riga precedente, dove
   spezzerebbe la lettura a metà pensiero. */
.titolo-fuoriscala .enfasi,
.titolo-grande .enfasi { display: block; }

/* Il testo di corpo non sta mai sotto al titolo: sta spostato a destra,
   in una colonna stretta. È l'asimmetria che dà il passo editoriale. */
.colonna-sfalsata {
  max-width: 46ch;
  margin-top: clamp(38px, 4.5vw, 70px);
}
@media (min-width: 1000px) {
  .colonna-sfalsata { margin-left: 50%; }
  .colonna-sfalsata--terzo { margin-left: 33.33%; }
}

/* -------------------------------------------------------------------------
   25.4 Il momento fotografico — l'immagine esce dal bordo della pagina
   ------------------------------------------------------------------------- */
.lastra { position: relative; }

@media (min-width: 1000px) {
  .lastra {
    display: grid;
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    align-items: center;
    gap: clamp(48px, 6vw, 104px);
    min-height: 88svh;
  }
  /* La colonna immagine sfonda il bordo sinistro del contenitore e arriva
     al bordo dello schermo: è quello che rompe la griglia. */
  .lastra__immagine {
    margin-left: calc(var(--bordo-pagina) * -1 - (100vw - min(100vw, var(--max))) / 2);
    height: 88svh;
  }
  .lastra--destra { grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); }
  .lastra--destra .lastra__immagine {
    order: 2;
    margin-left: 0;
    margin-right: calc(var(--bordo-pagina) * -1 - (100vw - min(100vw, var(--max))) / 2);
  }
}

.lastra__immagine {
  position: relative;
  overflow: hidden;
  background: var(--grigio-tenue);
  aspect-ratio: 3 / 4;
}
@media (min-width: 1000px) { .lastra__immagine { aspect-ratio: auto; } }

.lastra__immagine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* Il parallasse: l'immagine è più alta del suo riquadro e scorre più piano */
  transform: translateY(var(--parallasse, 0px)) scale(1.14);
  will-change: transform;
}

.lastra__testo > * + * { margin-top: 1.15rem; }
.lastra__testo .titolo-grande + p { margin-top: clamp(24px, 2.6vw, 38px); }

/* -------------------------------------------------------------------------
   25.5 La promessa — numeri fuori scala, blocchi sfalsati
   ------------------------------------------------------------------------- */
.promesse {
  display: grid;
  gap: clamp(52px, 5vw, 72px);
  counter-reset: promessa;
}
@media (min-width: 900px) {
  .promesse { grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 3.4vw, 56px); align-items: start; }
  /* Sfalsatura verticale: la lettura scende in diagonale */
  .promesse > :nth-child(2) { margin-top: clamp(56px, 7vw, 112px); }
  .promesse > :nth-child(3) { margin-top: clamp(112px, 14vw, 224px); }
}

.promessa-voce { border-top: 1px solid var(--nero); padding-top: clamp(20px, 2.2vw, 30px); }
.promessa-voce__numero {
  counter-increment: promessa;
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(3rem, 5.6vw, 5.4rem);
  line-height: 1;
  color: var(--oro);
  display: block;
  margin-bottom: clamp(18px, 2vw, 30px);
}
.promessa-voce__numero::before { content: "0" counter(promessa); }
.promessa-voce h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); margin-bottom: .7em; }
.promessa-voce p { font-size: .97rem; max-width: 34ch; }

/* -------------------------------------------------------------------------
   25.5-bis Borse di studio (homepage, dal 2026-10-09)
   Apertura a sinistra, le due borse a destra, sfalsate come le promesse:
   la seconda scende, così l'occhio passa da «dentro» a «fuori».
   ------------------------------------------------------------------------- */
.borse { display: grid; gap: clamp(48px, 6vw, 80px); }
@media (min-width: 900px) {
  .borse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 112px); align-items: start; }
  .borse__apertura { position: sticky; top: calc(var(--h-testata) + 32px); }
}
.borse__cappello { margin-top: clamp(24px, 2.6vw, 36px); font-size: 1.05rem; line-height: 1.65; }

.borse__voci { display: grid; gap: clamp(40px, 4.4vw, 60px); }
@media (min-width: 640px) {
  .borse__voci { grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 48px); align-items: start; }
  .borse__voci > .borsa-voce:nth-child(2) { margin-top: clamp(48px, 6vw, 96px); }
  .borse__nota { grid-column: 1 / -1; }
}

.borsa-voce { border-top: 1px solid var(--nero); padding-top: clamp(20px, 2.2vw, 30px); }
.borsa-voce__dove {
  display: block;
  font-family: var(--testo);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: clamp(16px, 1.8vw, 24px);
}
.borsa-voce h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); margin-bottom: .7em; }
.borsa-voce p { font-size: .97rem; }
.borse__nota { border-top: 1px solid var(--grigio-bordo); padding-top: 18px; margin: 0; }

/* -------------------------------------------------------------------------
   25.6 Discipline — righe che reagiscono
   ------------------------------------------------------------------------- */
.elenco-discipline { border-top: 1px solid var(--grigio-bordo); }

.riga-disciplina {
  position: relative;
  display: grid;
  gap: 8px 32px;
  align-items: center;
  padding-block: clamp(26px, 3vw, 42px);
  border-bottom: 1px solid var(--grigio-bordo);
  text-decoration: none;
  transition: padding-left var(--transizione);
}
@media (min-width: 820px) {
  .riga-disciplina {
    /* Colonne fisse a destra: i dati si incolonnano riga su riga invece di
       ammassarsi al margine. Lo spazio vuoto resta dopo il nome, dov'è voluto. */
    grid-template-columns: auto minmax(0, 1fr) 11em minmax(0, 17em);
    gap: 0 clamp(20px, 2.4vw, 40px);
  }
  .riga-disciplina:hover { padding-left: 22px; }
}

.riga-disciplina__cifra {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(.8rem, 1vw, .95rem);
  color: var(--grigio-medio);
  letter-spacing: .1em;
  min-width: 2.4em;
}
.riga-disciplina__nome {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--nero);
  transition: color var(--transizione);
}
.riga-disciplina:hover .riga-disciplina__nome { color: var(--oro); }
.riga-disciplina__dato { font-size: .92rem; color: var(--grigio-testo); white-space: nowrap; }
.riga-disciplina__docente { font-size: .92rem; color: var(--grigio-medio); }
@media (min-width: 820px) {
  .riga-disciplina__docente { text-align: right; min-width: 15em; }
}

/* -------------------------------------------------------------------------
   25.7 Corpo docente — mosaico sfalsato
   ------------------------------------------------------------------------- */
.mosaico {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(22px, 2.6vw, 40px);
}
@media (min-width: 700px)  { .mosaico { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) {
  /* Ogni colonna parte a un'altezza diversa: la fila non è mai piatta */
  .mosaico > :nth-child(4n+2) { margin-top: clamp(26px, 3.4vw, 56px); }
  .mosaico > :nth-child(4n+3) { margin-top: clamp(13px, 1.7vw, 28px); }
  .mosaico > :nth-child(4n+4) { margin-top: clamp(39px, 5vw, 82px); }
}

.tessera { text-decoration: none; display: block; }
.tessera__quadro {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--grigio-tenue);
  margin-bottom: 16px;
}
.tessera__quadro img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 1200ms cubic-bezier(.16,1,.3,1);
}
.tessera:hover .tessera__quadro img { transform: scale(1.05); }
.tessera__nome {
  font-family: var(--titolo);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--nero);
  line-height: 1.25;
}
.tessera__ruolo { font-size: .78rem; color: var(--grigio-medio); margin-top: 4px; }

/* -------------------------------------------------------------------------
   25.8 Momento nero a piena altezza
   ------------------------------------------------------------------------- */
.lastra-nera {
  background: var(--nero);
  color: #C9C9C9;
  min-height: 78svh;
  display: grid;
  align-items: center;
  padding-block: clamp(80px, 10vw, 150px);
}
.lastra-nera blockquote {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.85rem, 4.6vw, 4rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--bianco);
  margin: 0;
  max-width: 18ch;
}
.lastra-nera figcaption {
  margin-top: clamp(34px, 4vw, 56px);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7E7E7E;
}

/* -------------------------------------------------------------------------
   25.9 Chiusura
   ------------------------------------------------------------------------- */
.invito { display: grid; gap: clamp(30px, 3.4vw, 48px); }
@media (min-width: 900px) {
  .invito { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}


/* =========================================================================
   26. REGISTRO EDITORIALE — pagine interne
   Le stesse regole della homepage applicate a direzione, docenti, corsi e
   contatti. I ritratti dei docenti restano in colonna stretta: sono file
   piccoli e ingrandirli li tradirebbe (vedi LEGGIMI, "Foto da sostituire").
   ========================================================================= */

/* -------------------------------------------------------------------------
   26.1 Testata di pagina
   ------------------------------------------------------------------------- */
.apertura-pagina { padding-block: clamp(52px, 6.5vw, 108px) clamp(40px, 5vw, 76px); }
.apertura-pagina .colonna-sfalsata { margin-top: clamp(30px, 3.6vw, 54px); }

/* -------------------------------------------------------------------------
   26.2 Ritratto in colonna stretta
   ------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .duetto--ritratto {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(40px, 5vw, 92px);
  }
}

/* -------------------------------------------------------------------------
   26.3 Scheda docente
   ------------------------------------------------------------------------- */
.scheda-docente__occhiello {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.42;
  color: var(--nero);
  margin: clamp(22px, 2.6vw, 34px) 0 clamp(24px, 3vw, 38px);
  max-width: 40ch;
}
.scheda-docente__corpo > * + * { margin-top: 1.15rem; }

.scheda-docente .scheda-docente__meta {
  margin-top: clamp(28px, 3.4vw, 46px);
  padding-top: clamp(18px, 2.2vw, 28px);
  border-top: 1px solid var(--nero);
  gap: 18px 40px;
}
.scheda-docente__meta dt {
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--grigio-medio);
}
.scheda-docente__meta dd {
  font-family: var(--titolo);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.35;
}

/* -------------------------------------------------------------------------
   26.4 Corsi — il percorso per età
   ------------------------------------------------------------------------- */
.eta__colonna { border-top: 1px solid var(--nero); padding-top: clamp(18px, 2vw, 26px); }
.eta__fascia {
  font-size: clamp(2.1rem, 3.2vw, 3.1rem);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.eta__livello { font-size: .7rem; letter-spacing: .16em; margin-top: 10px; }

/* -------------------------------------------------------------------------
   26.5 Corsi — testata di disciplina
   ------------------------------------------------------------------------- */
.blocco-disciplina__testata {
  padding-bottom: clamp(20px, 2.4vw, 30px);
  align-items: end;
}
.blocco-disciplina__meta {
  font-size: .72rem;
  letter-spacing: .16em;
}

/* -------------------------------------------------------------------------
   26.6 Contatti — il modulo prende aria
   ------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .duetto--contatti { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 110px); }
}
.recapito { border-top: 1px solid var(--nero); }
.recapito dt { letter-spacing: .16em; }

/* -------------------------------------------------------------------------
   26.7 Chiusura di pagina
   ------------------------------------------------------------------------- */
.coda-pagina { display: grid; gap: clamp(28px, 3.2vw, 44px); }
@media (min-width: 900px) {
  .coda-pagina { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}


/* -------------------------------------------------------------------------
   26.8 Glossario dei corsi
   "Che cosa si studia, corso per corso": il nome di un corso non dice niente
   a chi non è del mestiere. Una riga per voce, nome a sinistra e spiegazione
   a destra — si legge come un indice ragionato, non come una scheda prodotto.
   ------------------------------------------------------------------------- */
.glossario { border-top: 1px solid var(--nero); }

.voce-corso {
  display: grid;
  gap: 14px 0;
  padding-block: clamp(28px, 3.2vw, 46px);
  border-bottom: 1px solid var(--grigio-bordo);
}
@media (min-width: 900px) {
  .voce-corso {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 0 clamp(32px, 4vw, 76px);
  }
}

.voce-corso__nome {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.3vw, 1.95rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--nero);
  text-decoration: none;
  display: inline-block;
  transition: color var(--transizione);
}
a.voce-corso__nome:hover { color: var(--oro); }

.voce-corso__eta {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--oro);
  margin-top: 12px;
}

.voce-corso__testo { max-width: 60ch; }
.voce-corso__testo p { font-size: .97rem; }

/* Non più in uso dal 1° settembre 2026: le firme dei maestri sono state tolte
   dalle descrizioni del glossario. La regola resta perché il blocco esiste
   ancora nel componente. */
.voce-corso__maestro {
  margin-top: 14px;
  font-size: .84rem;
  color: var(--grigio-medio);
}


/* -------------------------------------------------------------------------
   26.9 La mappa
   Google viene caricato solo quando il visitatore lo chiede. Finché non tocca
   il pulsante, la pagina non contatta nessun server esterno e non scrive
   cookie: è la ragione per cui il sito può stare online senza banner.
   ------------------------------------------------------------------------- */
.mappa {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--grigio-tenue);
  border: 1px solid var(--grigio-bordo);
  overflow: hidden;
}
@media (max-width: 700px) { .mappa { aspect-ratio: 4 / 5; } }

.mappa iframe { width: 100%; height: 100%; border: 0; display: block; }

.mappa__invito {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(16px, 2vw, 22px);
  padding: 32px 24px;
  text-align: center;
}
.mappa__segno { width: 32px; height: 32px; color: var(--oro); }
.mappa__indirizzo {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.4;
  color: var(--nero);
  margin: 0;
}
.mappa__nota {
  font-size: .8rem;
  line-height: 1.55;
  color: var(--grigio-medio);
  max-width: 44ch;
  margin: 0;
}

/* Senza JavaScript il pulsante non potrebbe fare nulla: resta il collegamento
   alle indicazioni stradali, che funziona sempre. */
html:not(.js) [data-mostra-mappa] { display: none; }


/* =========================================================================
   27. LEZIONE DI PROVA
   ========================================================================= */

/* -------------------------------------------------------------------------
   27.1 La voce di menu che è un pulsante
   Ultima voce della navigazione: non è un link fra gli altri, è l'azione che
   vogliamo. Nero pieno, come i pulsanti del sito.
   ------------------------------------------------------------------------- */
.navigazione a.voce-azione {
  background: var(--nero);
  color: var(--bianco);
  padding: 12px 22px;
  border: 1px solid var(--nero);
  border-bottom-color: var(--nero);
  transition: background var(--transizione), color var(--transizione);
}
.navigazione a.voce-azione:hover {
  background: transparent;
  color: var(--nero);
  border-bottom-color: var(--nero);
}
.navigazione a.voce-azione[aria-current="page"] {
  background: transparent;
  color: var(--nero);
}

@media (max-width: 1100px) {
  /* Nel pannello a tutto schermo il pulsante sta largo e staccato dalle voci */
  .navigazione a.voce-azione {
    padding: 16px 34px;
    margin-top: 14px;
    display: inline-block;
  }
}

/* -------------------------------------------------------------------------
   27.2 I tre passi
   ------------------------------------------------------------------------- */
.passi { display: grid; gap: clamp(40px, 4.5vw, 64px); counter-reset: passo; }
@media (min-width: 860px) { .passi { grid-template-columns: repeat(3, 1fr); } }

.passo { border-top: 1px solid var(--nero); padding-top: clamp(18px, 2.2vw, 28px); }
.passo__numero {
  counter-increment: passo;
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1;
  color: var(--oro);
  display: block;
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.passo__numero::before { content: "0" counter(passo); }
.passo h3 { font-size: clamp(1.2rem, 1.9vw, 1.55rem); margin-bottom: .6em; }
.passo p { font-size: .95rem; max-width: 34ch; }

/* -------------------------------------------------------------------------
   27.3 Le domande che frenano
   Un elenco di obiezioni sciolte una a una. `<details>` nativo: si apre anche
   senza JavaScript, e i motori di ricerca leggono comunque le risposte.
   ------------------------------------------------------------------------- */
.domande { border-top: 1px solid var(--nero); }

.domanda { border-bottom: 1px solid var(--grigio-bordo); }
.domanda > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(22px, 2.6vw, 32px);
  cursor: pointer;
  list-style: none;
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  line-height: 1.3;
  color: var(--nero);
  transition: color var(--transizione);
}
.domanda > summary::-webkit-details-marker { display: none; }
.domanda > summary:hover { color: var(--oro); }

.domanda__segno {
  flex: none;
  width: 15px;
  height: 15px;
  position: relative;
  align-self: center;
}
.domanda__segno::before,
.domanda__segno::after {
  content: "";
  position: absolute;
  background: var(--oro);
  transition: transform var(--transizione), opacity var(--transizione);
}
.domanda__segno::before { inset: 7px 0 auto 0; height: 1px; }
.domanda__segno::after  { inset: 0 auto 0 7px; width: 1px; }
.domanda[open] .domanda__segno::after { transform: scaleY(0); opacity: 0; }

.domanda__risposta {
  padding-bottom: clamp(24px, 3vw, 36px);
  max-width: 62ch;
}
.domanda__risposta p { font-size: .97rem; }
.domanda__risposta > * + * { margin-top: .9rem; }

/* -------------------------------------------------------------------------
   27.4 Il richiamo al modulo, ripetuto lungo la pagina
   ------------------------------------------------------------------------- */
.richiamo {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(36px, 4.5vw, 60px) clamp(28px, 4vw, 56px);
  border: 1px solid var(--grigio-bordo);
  background: var(--grigio-tenue);
}
@media (min-width: 820px) {
  .richiamo { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.richiamo p { margin: 0; max-width: 48ch; }

/* ⚠️ Il margine azzerato qui sopra valeva quando il riquadro conteneva un solo
   paragrafo. Dal 2026-09-07 ce ne sono due, e senza queste due regole si
   incollerebbero l'uno all'altro. */
.richiamo p + p { margin-top: .85em; }
/* Fra titolo e primo paragrafo lo spazio lo dà già il titolo: senza questa
   riga i due margini si sommerebbero e si aprirebbe un buco. La specificità
   è alzata di proposito, per battere la regola qui sopra. */
.richiamo .richiamo__titolo + p { margin-top: 0; }

.richiamo__titolo {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--nero);
}

/* ⚠️ Il margine del titolo va scritto con `.richiamo` davanti, o non vale.
   `.richiamo p { margin: 0 }` qui sopra ha specificità (0,1,1) e batte
   `.richiamo__titolo` (0,1,0): il titolo è anch'esso un <p>, quindi finiva
   azzerato. Non è una svista di oggi — anche i .5rem che c'erano prima non
   sono mai comparsi, ed è per questo che titolo e testo si leggevano come un
   blocco unico. */
.richiamo .richiamo__titolo { margin: 0 0 1.05rem; }

/* -------------------------------------------------------------------------
   27.5 Il modulo in evidenza
   ------------------------------------------------------------------------- */
.modulo-prova { scroll-margin-top: calc(var(--h-testata) + 20px); }


/* -------------------------------------------------------------------------
   27.6 I tre fatti della prova
   Riga compatta di tre affermazioni secche, usata nel blocco della lezione di
   prova in homepage. Su fondo scuro, quindi filetti e testo di servizio più
   chiari del solito.
   ------------------------------------------------------------------------- */
.fatti { display: grid; gap: clamp(26px, 3vw, 44px); }
@media (min-width: 780px) { .fatti { grid-template-columns: repeat(3, 1fr); } }

.fatto { border-top: 1px solid #3A3A3A; padding-top: clamp(16px, 1.8vw, 22px); }
.fatto__voce {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  line-height: 1.2;
  color: var(--bianco);
  display: block;
}
.fatto p { font-size: .9rem; color: #9C9C9C; margin: 10px 0 0; max-width: 30ch; }

/* -------------------------------------------------------------------------
   28. I partner nel piede
   -------------------------------------------------------------------------
   Una fascia sotto le tre colonne del piede, separata da un filo. Deve
   leggersi come una nota a margine, non come una seconda testata: per questo
   l'etichetta è la stessa dei titoletti del piede e i marchi stanno molto
   sotto i 200px del logo UNA DANZA qui accanto.

   Le due altezze sono diverse di proposito. CMA è disegno di linea sottile,
   FV Partner è una targa bianca piena: alla stessa altezza la targa peserebbe
   il doppio. Si usano le versioni chiare ufficiali dei due marchi — mai una
   versione scura schiarita o ricolorata.
   ------------------------------------------------------------------------- */
.partner {
  border-top: 1px solid #2E2E2E;
  padding-top: 30px;
  padding-bottom: clamp(34px, 4vw, 48px);
}

/* «IL SITO» e «CONTATTI» sono bianchi perché aprono le colonne del piede.
   Questa no: apre una fascia di servizio, e in bianco era la cosa più accesa
   della zona — più dei marchi stessi, che stanno al 60%. Scende sotto il tono
   del testo del piede, un gradino più in basso anche dei loghi. */
.piede .partner h4 {
  color: #6E6E6E;
  font-size: .68rem;
  font-weight: 400;
  margin-bottom: 16px;
}

.piede .partner__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;          /* i marchi futuri si accodano e vanno a capo da soli */
  flex-wrap: wrap;
  align-items: center;
  gap: 20px clamp(30px, 4vw, 52px);
}
.partner__elenco li { display: flex; }
.partner__elenco a { display: block; line-height: 0; }

/* I marchi sono bianchi pieni e sul nero del piede gridavano più del testo che
   hanno accanto. A 0.6 il bianco viene reso come un #A3: praticamente il tono
   del testo del piede (#9C9C9C), così la fascia si legge come una nota a
   margine e non come un secondo blocco di marchi.
   Chi è cliccabile torna pieno al passaggio del mouse. */
.partner__logo {
  display: block;
  width: auto;
  opacity: .6;
  transition: opacity var(--transizione);
}
.partner__elenco a:hover .partner__logo,
.partner__elenco a:focus-visible .partner__logo { opacity: 1; }

.partner__logo--cma { height: 32px; }
/* ⚠️ Più alto degli altri due, e non per sbaglio: il marchio Seraphicum è una
   composizione su due livelli, e la riga «complesso scolastico» sopra è molto
   piccola. Provato alle misure vere: a 34px diventa una macchia grigia, a 54px
   il logo domina gli altri due. A 44px si legge e resta alla pari. */
.partner__logo--seraphicum { height: 44px; }
.partner__logo--fv  { height: 38px; }

@media (max-width: 600px) {
  .partner__logo--cma { height: 27px; }
  .partner__logo--seraphicum { height: 37px; }
  .partner__logo--fv  { height: 32px; }
}

/* -------------------------------------------------------------------------
   29. WhatsApp
   -------------------------------------------------------------------------
   Il canale veloce: sta accanto al modulo, non al suo posto. Chi vuole scrivere
   due righe dal telefono lo fa subito; chi preferisce lasciare i dati compila.

   Volutamente NON porta il verde di WhatsApp: la tavolozza del sito è nero,
   bianco e oro, e un bottone verde sarebbe l'elemento più acceso di tutte le
   pagine. A dire di che canale si tratta bastano il glifo e la parola.
   ------------------------------------------------------------------------- */
.glifo-whatsapp {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

.canale {
  display: grid;
  gap: 18px;
  justify-items: start;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid var(--grigio-bordo);
  background: var(--grigio-tenue);
}
.canale__titolo {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.3;
  color: var(--nero);
  margin: 0;
}
.canale p { margin: 0; max-width: 42ch; }
.canale .bottone { padding-inline: 30px; }

/* Sul fondo tenue della pagina corsi/prova il riquadro sparirebbe: gli si dà
   il bianco per staccare. */
.sezione--tenue .canale { background: var(--bianco); }

/* Il numero fra i recapiti: la riga si comporta come telefono ed email, con il
   glifo davanti perché si riconosca a colpo d'occhio. */
.recapito__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}

/* -------------------------------------------------------------------------
   30. Il bottone WhatsApp flottante
   -------------------------------------------------------------------------
   La CTA presente su tutte le pagine. Tre cautele, tutte volute:

   1. NON compare sulla prima schermata. Lì la scena è del marchio e, in
      testata, della voce «Lezione di prova»: la prenotazione vale più di un
      messaggio, e non deve avere concorrenza proprio nel momento in cui il
      sito si presenta. Il bottone entra dopo che si è scesi.
   2. Si toglie di mezzo quando sul video c'è già un riquadro `.canale`
      (contatti, lezione di prova): due inviti a scrivere su WhatsApp nella
      stessa schermata sono uno di troppo.
   3. Sta SOTTO il pannello del menu (z-index 150): a menu aperto sparisce.

   Senza JavaScript resta visibile sempre: meglio un bottone di troppo che un
   contatto che non si vede.
   ------------------------------------------------------------------------- */
.azione-whatsapp {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 95;

  display: inline-flex;
  align-items: center;
  gap: .6em;
  height: 54px;
  padding-inline: 19px;
  border-radius: 999px;

  background: var(--nero);
  color: var(--bianco);
  border: 1px solid var(--nero);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);

  font-family: var(--testo);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;

  transition: opacity var(--transizione), transform var(--transizione),
              background var(--transizione), color var(--transizione);
}
.azione-whatsapp:hover { background: var(--bianco); color: var(--nero); }
.azione-whatsapp .glifo-whatsapp { width: 21px; height: 21px; }

/* Sotto i 600px resta il solo glifo: il pollice ci arriva, la parola no. */
@media (max-width: 599px) {
  .azione-whatsapp { width: 54px; height: 54px; padding: 0; justify-content: center; }
  .azione-whatsapp__testo { display: none; }
}

/* Da qui in giù comanda il JavaScript. Senza, il bottone c'è e basta. */
.js .azione-whatsapp {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.94);
  pointer-events: none;
}
.js .azione-whatsapp--viva {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* A menu aperto il bottone sparisce. Il pannello lo coprirebbe comunque, ma
   così non resta né cliccabile né raggiungibile da tastiera sotto la tenda. */
.testata[data-menu-aperto="true"] ~ .azione-whatsapp,
.testata[data-menu-chiusura="true"] ~ .azione-whatsapp {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .azione-whatsapp { transition: opacity .01ms; transform: none !important; }
}

/* -------------------------------------------------------------------------
   31. Open Week — il conto alla rovescia
   -------------------------------------------------------------------------
   Tre stati, gestiti dal JavaScript: prima della settimana conta all'inizio,
   durante conta alla chiusura, dopo sparisce e lascia il posto al rimando alla
   lezione di prova — che c'è tutto l'anno.

   ⚠️ Le cifre esistono solo con JavaScript. Per questo la riga con le date per
   esteso è **sempre** in pagina e non dipende da niente: senza script si legge
   comunque quando è l'Open Week. È la stessa regola del resto del sito — non si
   nasconde mai un'informazione in attesa di uno script.
   ------------------------------------------------------------------------- */
.conto {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3.5vw, 46px);
  align-items: baseline;
  margin-top: clamp(26px, 3.4vw, 40px);
}

.conto__blocco { text-align: center; min-width: 62px; }

.conto__cifra {
  display: block;
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(2.9rem, 7.5vw, 5.2rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--nero);
  /* cifre a larghezza fissa: senza, i secondi fanno ballare tutta la riga */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.conto__unita {
  display: block;
  margin-top: 10px;
  font-family: var(--testo);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grigio-medio);
}

/* La riga con le date: sempre presente, anche senza JavaScript. */
.conto__date {
  font-family: var(--testo);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grigio-medio);
  margin: 0;
}

/* A settimana iniziata il conto cambia senso: lo si dice, non lo si lascia
   indovinare. */
.conto__stato {
  margin: 14px 0 0;
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--nero);
}
.conto__stato--aperta { color: var(--oro); }

/* Sul fondo scuro del richiamo finale */
.sezione--scura .conto__cifra,
.sezione--scura .conto__stato { color: var(--bianco); }
.sezione--scura .conto__unita,
.sezione--scura .conto__date { color: #9C9C9C; }

/* Il blocco che compare solo a Open Week finita. */
.dopo-open-week {
  border: 1px solid var(--grigio-bordo);
  background: var(--grigio-tenue);
  padding: clamp(30px, 4vw, 48px);
  display: grid;
  gap: 18px;
  justify-items: start;
}

/* Etichetta della data in testa alla pagina: un filo d'oro, l'unico della
   pagina, perché è l'informazione che deve arrivare per prima. */
.etichetta-data {
  color: var(--oro);
  border-color: currentColor;
}

/* -------------------------------------------------------------------------
   32. Open Week in homepage — il blocco dell'evento
   -------------------------------------------------------------------------
   È il primo blocco dopo il marchio, e nei giorni dell'evento è la cosa più
   importante del sito. Nero pieno perché su un sito bianco all'80% il nero è
   l'arma più forte che abbiamo, e la data in oro perché è l'informazione che
   deve arrivare prima di tutte.

   ⚠️ Sparisce da solo dopo il 18 settembre (JavaScript, sezione 9 di main.js).
   Senza JavaScript resta visibile: fra i due modi di sbagliare, mostrare per
   qualche giorno in più un evento appena passato è meno grave che nasconderlo
   proprio nella settimana in cui deve riempirsi.
   ------------------------------------------------------------------------- */
.evento {
  background: var(--nero);
  color: #C9C9C9;
  padding-block: clamp(70px, 9vw, 130px);
}

.evento__etichetta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--testo);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: clamp(26px, 3vw, 40px);
}
/* Il pallino che pulsa: l'unico movimento continuo del sito, e c'è solo qui
   perché solo qui c'è qualcosa che sta per scadere. */
.evento__spia {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--oro);
  flex: none;
  animation: spia 2.4s ease-in-out infinite;
}
@keyframes spia { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .evento__spia { animation: none; } }

.evento__titolo {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(2.3rem, 6.4vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--bianco);
  margin: 0 0 clamp(24px, 3vw, 38px);
  max-width: 19ch;
}
/* ⚠️ Il foglio ha una regola globale `strong { color: var(--nero) }`: su fondo
   nero il grassetto sparirebbe. Va riportato al bianco, qui e nel paragrafo. */
.evento__titolo strong,
.evento__testo strong { color: var(--bianco); }
.evento__titolo strong { font-weight: 500; }

.evento__testo {
  max-width: 46ch;
  font-size: 1.02rem;
  margin: 0;
}
/* Dal 2026-09-07 i paragrafi sono tre e non più uno: senza questa regola si
   incollerebbero l'uno all'altro, perché il margine è azzerato qui sopra. */
.evento__testo + .evento__testo { margin-top: 1.05em; }

/* Countdown e invito: affiancati quando c'è spazio, incolonnati sul telefono. */
.evento__fondo {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  gap: clamp(30px, 4vw, 56px);
  align-items: end;
}
@media (min-width: 900px) {
  .evento__fondo { grid-template-columns: auto minmax(0, 1fr); }
}
.evento .conto { margin-top: 14px; }
.evento .conto__cifra { color: var(--bianco); }
.evento .conto__unita,
.evento .conto__date { color: #8A8A8A; }
.evento .conto__stato { color: var(--oro); }
.evento .bottone {
  background: var(--bianco); color: var(--nero); border-color: var(--bianco);
}
.evento .bottone:hover { background: transparent; color: var(--bianco); }

/* -------------------------------------------------------------------------
   33. Le date dell'Open Week
   -------------------------------------------------------------------------
   Erano dentro un'etichetta minuscola, insieme al nome dell'evento e alla
   parola «gratuita»: l'informazione più importante era la meno visibile.
   Qui diventano un elemento a sé, chiuso fra due fili — dispositivo da
   manifesto: si legge prima ancora di leggere.

   In oro, e non in bianco come il conto alla rovescia, per non avere due
   blocchi di cifre grandi che si fanno concorrenza nello stesso riquadro.
   ------------------------------------------------------------------------- */
.date-evento {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px clamp(14px, 2vw, 24px);
  margin: clamp(26px, 3vw, 38px) 0;
  padding-block: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--grigio-bordo);
  border-bottom: 1px solid var(--grigio-bordo);
}

.date-evento__giorni {
  font-family: var(--titolo);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
}
/* Il trattino fra i due giorni: più leggero dei numeri, così non pesa. */
.date-evento__giorni i { font-style: normal; font-weight: 300; opacity: .55; padding-inline: .12em; }

.date-evento__mese {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.15;
  color: var(--nero);
}

/* ⚠️ NESSUNA PAGINA USA PIÙ QUESTA CLASSE dal 2026-09-07.
   La riga «da lunedì a venerdì» è stata tolta da index.html e da open-week.html
   perché ripeteva parola per parola il titolo lì sopra. Le regole restano
   perché la riga può tornare: questa, quella per il fondo nero della homepage
   e quella dentro la media query dei 600px. Se fra qualche mese sono ancora
   inutilizzate, si cancellano tutte e tre. */
.date-evento__giorno {
  font-family: var(--testo);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grigio-medio);
  margin-left: auto;   /* spinto a fine riga: è il dettaglio, non il titolo */
}

/* Due edizioni dell'Open Week (dal 2026-10-09): le righe delle date si
   impilano come un elenco, con un filo solo fra l'una e l'altra. */
.date-evento + .date-evento { margin-top: calc(-1 * clamp(26px, 3vw, 38px)); border-top: 0; }
/* Un'edizione già chiusa resta scritta ma si spegne: la classe la mette main.js. */
.date-evento--passata { opacity: .38; }
.date-evento--passata .date-evento__giorni,
.date-evento--passata .date-evento__mese { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Sul nero del blocco in homepage */
.evento .date-evento { border-color: #333; }
.evento .date-evento__mese { color: var(--bianco); }
.evento .date-evento__giorno { color: #8A8A8A; }

@media (max-width: 600px) {
  .date-evento__giorno { margin-left: 0; width: 100%; }
}


/* -------------------------------------------------------------------------
   34. Avviso su cookie e tracciamento

   ⚠️ SI CHIAMA `.avviso` E NON `.consenso` PER UN MOTIVO.
   `.consenso` esiste già da prima, poche centinaia di righe più su: è la riga
   della casella privacy dentro i moduli, con `display: flex`, testo grigio e
   `accent-color: nero` sulle caselle. Chiamando così anche questo blocco, il
   banner si prendeva quegli stili — larghezza sbagliata, colori sbagliati — e
   le mie regole tornavano indietro a sporcare i moduli. Se un giorno servisse
   un nome nuovo qui dentro, controllare prima che non esista già nel foglio.
   Una fascia sottile appoggiata al bordo inferiore, costruita da consenso.js.

   Forma scelta con Vito il 2026-09-06: il pannello centrato di prima copriva
   metà dell'apertura della home. Questa occupa poco più dell'altezza dei
   pulsanti e si legge come una striscia di piede.

   ⚠️ Il rifiuto NON sta sulla prima riga: ci stanno la × e «Scopri di più e
   personalizza». È lo schema delle linee guida del Garante del 10 giugno 2021,
   che alla × attribuiscono il significato di «continuo senza acconsentire».

   Quello che non si tocca non è l'aspetto dei pulsanti, ma queste tre cose:
   la × deve esserci e vedersi; il testo deve dire che chiudere significa non
   accettare; chiudere deve registrare un rifiuto vero. Toglierne una fa
   scadere il banner a modo per raccogliere consensi che nessuno ha dato.
   ------------------------------------------------------------------------- */
.avviso {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* ⚠️ I NUMERI VERI DEL FOGLIO, non a occhio:
       200  «Salta al contenuto»  ← deve restare sopra tutto, è il primo
                                    comando che incontra chi naviga da tastiera
       150  il pannello del menu sul telefono
       120  la fascia «bozza»
       100  la testata
        95  il bottone di WhatsApp
     Qui 110: sopra i contenuti e il bottone di WhatsApp, ma **sotto il menu**,
     che sul telefono è un pannello a tutto schermo — a menu aperto l'avviso
     deve sparire dietro, non restargli davanti. E sotto il salto al contenuto.
     (Il primo tentativo era 900, poi 1100: coprivano entrambi.) */
  z-index: 110;
  /* La fascia non oscura la pagina e non blocca lo scorrimento: si può
     continuare a leggere mentre si decide. Oscurare sarebbe un modo di
     forzare la mano. */
}

.avviso__dentro {
  background: var(--nero);
  color: var(--bianco);
  padding: 18px var(--bordo-pagina);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, .22);
  /* ⚠️ IL TETTO NON È FACOLTATIVO.
     La fascia è ancorata al fondo e cresce verso l'alto: aperta sul telefono
     superava l'altezza dello schermo e la sua parte alta finiva fuori, sopra
     il bordo, irraggiungibile — niente scorreva, perché la pagina sotto è
     un'altra cosa. Con un tetto e lo scorrimento interno tutto resta
     raggiungibile.
     `dvh` tiene conto delle barre del browser che compaiono e scompaiono sui
     telefoni; `vh` resta come ripiego per i browser che non lo conoscono. */
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;   /* lo scorrimento non "sfonda" sulla pagina */
  /* Sale dal fondo. La transizione sta qui e non sotto `.anima`, perché
     questa fascia non c'entra con le rivelazioni allo scorrimento: la mostra
     e la nasconde solo consenso.js. */
  transform: translateY(101%);
  opacity: 1;
  transition: transform .44s cubic-bezier(.22, .61, .36, 1),
              opacity   .44s cubic-bezier(.22, .61, .36, 1);
}
.avviso[data-visibile] .avviso__dentro { transform: none; }

/* La riga: parole a sinistra, pulsanti a destra, dentro la stessa griglia
   del resto del sito. */
/* Comandi sopra, testo sotto: ordine chiesto da Vito il 2026-09-06. Vale
   anche per la tastiera e per chi usa uno screen reader — si incontrano prima
   i comandi, poi la spiegazione. Regge perché la spiegazione è una riga. */
.avviso__riga {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.avviso__parole { width: 100%; }

.avviso__testo {
  font-family: var(--testo);
  font-size: .86rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, .74);
  /* Una riga sola su schermo largo: non si giustifica, perché giustificare
     una riga singola non fa nulla e su due righe aprirebbe voragini. */
}

/* ⚠️ Il foglio ha una regola globale `strong { color: var(--nero) }`: su
   questo fondo scuro renderebbe invisibile la frase più importante. */
.avviso__testo strong { color: var(--bianco); font-weight: 600; }

.avviso__testo a {
  color: var(--oro);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.avviso__testo a:hover { color: var(--bianco); }

/* ---- I pulsanti ---- */
.avviso__azioni {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  width: 100%;
}

.avviso__bottone {
  font-family: var(--testo);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 30px;
  border: 1px solid var(--bianco);
  background: var(--bianco);
  color: var(--nero);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transizione), color var(--transizione);
}
.avviso__bottone:hover { background: transparent; color: var(--bianco); }

/* Il pulsante sommesso: stesso corpo e stessa area di quello pieno, ma niente
   fondo — né a riposo né al passaggio del mouse, dove prima si riempiva di
   bianco. È «Scopri di più e personalizza» sulla prima riga.

   ⚠️ Serve SOLO lì. Dentro il pannello «Rifiuta tutto» resta pieno come
   «Salva le mie scelte»: quello è il secondo livello, ed è il punto in cui le
   due strade devono pesare uguale. Se un giorno si applicasse questa classe
   anche là, il rifiuto sparirebbe da entrambi i livelli. */
.avviso__bottone--sommesso {
  background: transparent;
  color: rgba(255, 255, 255, .82);
  border-color: rgba(255, 255, 255, .26);
}
.avviso__bottone--sommesso:hover {
  background: transparent;
  color: var(--bianco);
  border-color: rgba(255, 255, 255, .6);
}

/* ---- La chiusura ----
   ⚠️ Porta scritto che cosa fa. Il significato («continuo senza accettare»)
   stava in una frase del testo; da quando il testo è una riga sola, sta qui.
   Una × muta non informa nessuno e farebbe cadere lo schema.

   ⚠️ Altezza minima 44px come i pulsanti accanto: sotto quella misura un
   comando diventa difficile da centrare col dito, e rendere il rifiuto più
   scomodo dell'accettazione è esattamente ciò che non si può fare. */
.avviso__chiudi {
  margin-left: auto;         /* spinta all'estremo opposto dei due pulsanti */
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  font-family: var(--testo);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transizione);
}
.avviso__chiudi:hover { color: var(--bianco); }

/* I comandi dentro il pannello aperto: qui la scelta è simmetrica, salvare e
   rifiutare stanno alla pari. */
.avviso__azioni-dettaglio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* ---- Il dettaglio, quando si apre ----
   Cresce SOPRA la riga dei pulsanti, così i pulsanti non si spostano sotto il
   dito mentre si legge. */
.avviso__dettaglio {
  max-width: var(--max);
  margin: 0 auto 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.avviso__titolo {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.2;
  margin: 4px 0 18px;
  color: var(--bianco);
}

/* Su schermo largo le tre categorie stanno in fila: incolonnarle
   triplicherebbe l'altezza della fascia, che è il difetto da cui si scappa. */
.avviso__voci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px 34px;
}

.avviso__voce {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
  align-content: start;
}

.avviso__casella {
  width: 16px;
  height: 16px;
  accent-color: var(--oro);
  cursor: pointer;
}
.avviso__casella[disabled] { cursor: default; opacity: .55; }

.avviso__nome {
  font-family: var(--testo);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bianco);
  cursor: pointer;
}
.avviso__casella[disabled] + .avviso__nome { cursor: default; }

.avviso__spiega {
  grid-column: 2;
  margin: 0;
  font-family: var(--testo);
  font-size: .8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .58);
}

/* Il contorno di messa a fuoco deve vedersi sul nero: quello predefinito del
   sito è scuro e qui sparirebbe, lasciando chi naviga da tastiera senza
   sapere dove si trova. */
.avviso :focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
}

/* Il bottone flottante di WhatsApp sta in basso a destra: mentre la fascia è
   aperta si toglie di mezzo, o si sovrappongono. */
.avviso[data-visibile] ~ .azione-whatsapp { opacity: 0; pointer-events: none; }

@media (max-width: 720px) {
  /* Il blocco va tenuto basso: è appoggiato sul fondo e ruba schermo alla
     pagina. Le spaziature si stringono tutte di qualche pixel. */
  .avviso__dentro { padding: 12px var(--bordo-pagina); }
  .avviso__riga { gap: 9px; }
  .avviso__bottone { width: 100%; padding: 11px 10px; }
  .avviso__azioni-dettaglio { flex-direction: column; }
  .avviso__testo { font-size: .8rem; line-height: 1.45; }

  /* ⚠️ La × NON sta più su una riga tutta sua.
     Da sola quella riga costava 44px di comando più il vuoto attorno: una
     cinquantina di pixel per un simbolo. Ora divide la prima riga con
     «Accetta» — che resta il comando più largo e più visibile — e la colonna
     dei comandi passa da tre righe a due.
     Griglia e non colonna flessibile, perché serve mettere due elementi sulla
     stessa riga e il terzo sotto, a tutta larghezza. */
  .avviso__azioni {
    display: grid;
    grid-template-columns: 1fr 44px;
    gap: 8px;
    align-items: center;
  }
  .avviso__azioni > .avviso__bottone:first-child { grid-column: 1; grid-row: 1; }
  .avviso__bottone--sommesso { grid-column: 1 / -1; grid-row: 2; }
  .avviso__chiudi { grid-column: 2; grid-row: 1; margin-left: 0; }

  /* ⚠️ Nessun tetto qui dentro: a scorrere è tutta la fascia
     (`.avviso__dentro`). Rimettere un `max-height` sul solo dettaglio
     creerebbe due zone di scorrimento annidate, e su un telefono si finisce
     per muovere quella sbagliata. */
}

/* -------------------------------------------------------------------------
   Da tablet in su: non più una fascia sul fondo, ma un riquadro centrato in
   orizzontale e appoggiato in cima allo schermo (chiesto da Vito il
   2026-09-06). Una prima versione lo teneva sotto la testata e finiva a metà
   della hero: non era quello che «in alto» voleva dire.
   ------------------------------------------------------------------------- */
@media (min-width: 721px) {
  .avviso {
    /* ⚠️ A filo del bordo, e SOPRA la testata: 160 contro i suoi 100.
       Non è un effetto collaterale — restando sotto, il riquadro finirebbe
       dietro al logo e al menu, visibile a metà e illeggibile. Li copre per
       il tempo in cui resta aperto.
       Ma **sotto il 200 del «Salta al contenuto»**: quello è il primo comando
       che incontra chi arriva da tastiera, e coprirlo lo renderebbe invisibile
       proprio a chi ne ha bisogno.
       Solo da qui in su: sul telefono resta a 110, sotto il pannello del menu. */
    top: 12px;
    bottom: auto;
    z-index: 160;
    padding: 0 var(--bordo-pagina);
  }

  .avviso__dentro {
    max-width: 780px;
    margin: 0 auto;
    padding: 22px 26px;
    box-shadow: 0 20px 52px rgba(0, 0, 0, .3);
    /* Scende dall'alto invece di salire dal fondo, e sfuma: staccato dal
       bordo, un semplice scorrimento senza dissolvenza sembrerebbe uno
       scatto. */
    transform: translateY(-10px);
    opacity: 0;
  }
  .avviso[data-visibile] .avviso__dentro { transform: none; opacity: 1; }

  /* Il bottone di WhatsApp sta in basso a destra: da qui in su non c'è più
     sovrapposizione, quindi non serve nasconderlo. */
  .avviso[data-visibile] ~ .azione-whatsapp { opacity: 1; pointer-events: auto; }
}

/* -------------------------------------------------------------------------
   35. Documento legale (informativa privacy)
   Un testo lungo, con dieci capitoli e cinque tabelle, letto da chi cerca una
   riga precisa. Serve una gerarchia più fitta di quella delle pagine di
   racconto: i titoli del sito arrivano a 48px, qui spezzerebbero la lettura
   invece di guidarla.
   ------------------------------------------------------------------------- */
.testo-legale h2 {
  font-family: var(--titolo);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.1vw, 1.6rem);
  line-height: 1.2;
  margin: 3.2rem 0 1.1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--grigio-bordo);
}
.testo-legale > h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.testo-legale h3 {
  font-family: var(--testo);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 2.2rem 0 .8rem;
}

/* Prosa giustificata, come da regola del progetto. Gli elenchi restano a
   bandiera: sono voci brevi, e giustificarle aprirebbe buchi fra le parole. */
.testo-legale p { text-align: justify; hyphens: auto; }
.testo-legale li { text-align: left; }

.testo-legale table { margin: 1.4rem 0 .6rem; }
.testo-legale table + p { margin-top: 1.2rem; }

/* Nelle tabelle il testo è fitto: qui la prima colonna non va in grassetto
   come nel listino dei corsi, o pesa troppo su tre colonne di seguito. */
.testo-legale .tabella-corsi td:first-child { font-weight: 400; }
.testo-legale .tabella-corsi td { vertical-align: top; }

@media (max-width: 560px) {
  /* Cinque tabelle su schermo stretto: si fanno scorrere invece di
     schiacciare le colonne fino a una parola per riga. */
  .testo-legale table { display: block; overflow-x: auto; white-space: nowrap; }
  .testo-legale table td { white-space: normal; min-width: 9rem; }
}

/* =========================================================================
   36. Formazione insegnanti — corso triennale di metodologia
   Pagina creata il 2026-09-23. Riusa apertura, promesse, richiamo e modulo;
   qui solo ciò che le altre pagine non avevano: elenchi di programma, i tre
   anni e la scheda dell'organizzazione.
   ========================================================================= */

/* La qualifica sotto il titolo: chiesta da Alessandra, "subito dopo il titolo" */
.qualifica {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  letter-spacing: .02em;
  color: var(--oro);
  margin-top: clamp(14px, 1.6vw, 22px);
}

/* Elenchi del programma: filetto nero in testa come le promesse, voci brevi a bandiera */
.programma { display: grid; gap: clamp(40px, 4.5vw, 64px); }
@media (min-width: 900px) { .programma { grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 3.4vw, 56px); } }
.programma__blocco { border-top: 1px solid var(--nero); padding-top: clamp(18px, 2.2vw, 28px); }
.programma__blocco h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); margin-bottom: .8em; }
.programma__blocco ul { list-style: none; margin: 0; padding: 0; }
.programma__blocco li {
  font-size: .97rem;
  padding: .55em 0 .55em 1.3em;
  border-bottom: 1px solid var(--grigio-bordo);
  position: relative;
}
.programma__blocco li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15em;
  width: .55em; height: 1px;
  background: var(--oro);
}
.programma__nota { margin-top: 1.2rem; font-size: .93rem; }

/* I tre anni: una riga per anno, i corsi Vaganova a destra del numero */
.anni { border-top: 1px solid var(--nero); }
.anno {
  display: grid;
  gap: 10px clamp(24px, 4vw, 64px);
  padding-block: clamp(26px, 3.2vw, 42px);
  border-bottom: 1px solid var(--grigio-bordo);
}
@media (min-width: 820px) { .anno { grid-template-columns: 12rem 11rem minmax(0, 1fr); align-items: baseline; } }
.anno__numero { white-space: nowrap; }
.anno__numero {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1;
  color: var(--oro);
}
.anno__corsi {
  font-family: var(--testo);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nero);
}
.anno p { margin: 0; max-width: 58ch; }

/* La scheda dell'organizzazione: coppie voce/valore */
.scheda-corso { border-top: 1px solid var(--nero); margin: 0; }
.scheda-corso > div {
  display: grid;
  gap: 4px 24px;
  padding-block: 16px;
  border-bottom: 1px solid var(--grigio-bordo);
}
@media (min-width: 640px) { .scheda-corso > div { grid-template-columns: 13rem minmax(0, 1fr); } }
.scheda-corso dt {
  font-family: var(--testo);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grigio-medio);
}
.scheda-corso dd { margin: 0; color: var(--nero); }

/* Il calendario degli incontri (date del primo anno, 2026-09-30) */
.calendario { margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--nero); padding-top: clamp(22px, 2.6vw, 32px); }
.calendario__titolo {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  color: var(--nero);
  margin: 0 0 clamp(26px, 3vw, 40px);
}
.calendario__titolo span {
  display: block;
  margin-top: .35em;
  font-family: var(--testo);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oro);
}
.calendario__blocchi { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 720px) { .calendario__blocchi { grid-template-columns: 1fr 1fr; } }
.calendario__periodo {
  font-family: var(--testo);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grigio-medio);
  margin: 0 0 .6rem;
}
.calendario ul { list-style: none; margin: 0; padding: 0; }
.calendario li {
  padding-block: 12px;
  border-bottom: 1px solid var(--grigio-bordo);
  color: var(--nero);
  font-size: 1.02rem;
}
.calendario li span { display: inline-block; width: 7.5rem; color: var(--grigio-medio); font-size: .9rem; }


/* =========================================================================
   37. LA SCUOLA — la sede, il corridoio, le cinque sale
   Aggiunta il 2026-10-02 con le prime foto degli ambienti. Le immagini sono
   in bianco e nero (design system §5, foto d'ambiente della sede) e le
   genera build-immagini-scuola.py: qui non si applica nessun filtro.
   ========================================================================= */

/* -------------------------------------------------------------------------
   37.1 La striscia del corridoio — tre foto alla stessa altezza
   Una orizzontale 3:2 e due verticali 4:5. Perché abbiano la stessa altezza
   le colonne stanno nel rapporto 1,875 : 1 : 1  (3/2 ÷ 4/5 = 1,875).
   ------------------------------------------------------------------------- */
.striscia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.4vw, 22px);
  margin-top: clamp(40px, 5vw, 76px);
}
.striscia figure { margin: 0; overflow: hidden; background: var(--grigio-tenue); aspect-ratio: 4 / 5; }
.striscia figure:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.striscia img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) {
  .striscia { grid-template-columns: 1.875fr 1fr 1fr; }
  .striscia figure:first-child { grid-column: auto; }
}

/* -------------------------------------------------------------------------
   37.2 Le sale
   Ogni sala: numero fuori scala in oro (come la promessa in homepage), foto
   e un testo breve che descrive lo spazio — mai i corsi che ospita. Le sale si alternano fra
   impianto largo (foto orizzontali) e alto (foto verticale), e fra destra e
   sinistra: la lettura scende a zig-zag invece che in colonna.
   ------------------------------------------------------------------------- */
.sale {
  display: grid;
  gap: clamp(72px, 9vw, 150px);
  margin-top: clamp(56px, 7vw, 110px);
}
.sala { display: grid; gap: clamp(26px, 3.2vw, 48px); }

.sala__testa {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 2.2vw, 34px);
  border-top: 1px solid var(--nero);
  padding-top: clamp(20px, 2.2vw, 30px);
}
.sala__numero {
  font-family: var(--titolo);
  font-weight: 300;
  font-size: clamp(3rem, 5.6vw, 5.4rem);
  line-height: 1;
  color: var(--oro);
}
.sala__nome {
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  margin: 0;
}

.sala__foto { margin: 0; overflow: hidden; background: var(--grigio-tenue); }
.sala__foto img { width: 100%; height: 100%; object-fit: cover; }
.sala__foto--larga { aspect-ratio: 3 / 2; }
.sala__foto--alta  { aspect-ratio: 4 / 5; }

.sala__testo > * + * { margin-top: 1.15rem; }
.sala__testo p { max-width: 44ch; }


@media (min-width: 900px) {
  .sala {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 48px);
    align-items: end;
  }
  .sala__testa { grid-column: 1 / -1; grid-row: 1; }

  /* Impianto largo: foto principale su otto colonne, testo accanto in basso;
     l'eventuale seconda foto scende sotto, spostata dall'altra parte. */
  .sala--larga .sala__foto--principale { grid-column: 1 / span 8;  grid-row: 2; }
  .sala--larga .sala__testo            { grid-column: 9 / -1;      grid-row: 2; }
  .sala--larga .sala__foto--seconda    { grid-column: 6 / -1;      grid-row: 3; }

  .sala--larga.sala--invertita .sala__foto--principale { grid-column: 5 / -1; }
  .sala--larga.sala--invertita .sala__testo            { grid-column: 1 / span 4; }
  .sala--larga.sala--invertita .sala__foto--seconda    { grid-column: 1 / span 7; }

  /* Impianto alto: foto verticale su cinque colonne, testo dall'altra parte. */
  .sala--alta .sala__foto  { grid-column: 1 / span 5; grid-row: 2; }
  .sala--alta .sala__testo { grid-column: 7 / -1;     grid-row: 2; }
  .sala--alta.sala--invertita .sala__foto  { grid-column: 8 / -1; }
  .sala--alta.sala--invertita .sala__testo { grid-column: 1 / span 6; }
}

/* -------------------------------------------------------------------------
   37.3 La foto accanto a un testo (homepage, blocco «La scuola»)
   ------------------------------------------------------------------------- */
.foto-ambiente { margin: 0; overflow: hidden; background: var(--grigio-tenue); aspect-ratio: 3 / 2; }
.foto-ambiente img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .duetto--ambiente { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}

/* -------------------------------------------------------------------------
   37.4 Dove siamo — l'indirizzo in grande, su fondo nero
   ------------------------------------------------------------------------- */
.dove { display: grid; gap: clamp(30px, 3.4vw, 48px); }
@media (min-width: 900px) {
  .dove { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.dove__azioni { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.sezione--scura .bottone--vuoto {
  background: transparent; color: var(--bianco); border-color: var(--bianco);
}
.sezione--scura .bottone--vuoto:hover { background: var(--bianco); color: var(--nero); }

/* -------------------------------------------------------------------------
   37.5 Il menu con sei voci
   Fra 1101 e 1240 px le sei voci stanno in riga solo se si stringono un
   poco: meno aria fra una e l'altra, non caratteri più piccoli. Misurato:
   a 1101 px restano 81 px fra logo e menu, a 1241 px 99.
   ------------------------------------------------------------------------- */
@media (min-width: 1101px) and (max-width: 1240px) {
  .navigazione ul { gap: 17px; }
  .navigazione a { letter-spacing: .07em; }
  .navigazione a.voce-azione { padding-inline: 16px; }
}