/* Hinkypunk 2026 — stili condivisi da tutto il sito.
   Vengono dal prototipo di ottobre 2026. I caratteri sono serviti dal sito:
   vedi caratteri.css, caricato prima di questo file. */

/* ───────────────────────── Colori e misure ───────────────────────── */

:root {
  --nero: #0A0A0F;        /* fondo più scuro: header, footer, hero */
  --fondo: #14141C;       /* fondo delle sezioni */
  --giallo: #E8C547;      /* accento unico */
  --giallo-chiaro: #F0D060; /* accento al passaggio del mouse */
  --testo: #FAFAF8;
  --testo-2: #C9C9D4;     /* testo secondario */
  --testo-3: #B9B9C4;     /* didascalie */
  --testo-4: #8E8E9C;     /* note piccole */
  --bordo: #26262E;
  --bordo-scuro: #1E1E26;
  --bordo-chiaro: #3A3A44;

  --titolo: 'Sofia Sans Condensed', 'Sofia Sans', system-ui, sans-serif;
  --testo-font: 'Sofia Sans', system-ui, sans-serif;

  /* Scala dei titoli: cinque misure, ognuna almeno il 30% più grande della
     successiva. Prima ce n'erano sette, e tre passaggi erano così piccoli
     (+13%, +14%, +17%) che il titolo di una sezione e il suo sottotitolo
     sembravano la stessa cosa. Il titolone della home era a 112px: sopra
     il tetto dei 96, la pagina non parlava, gridava.
     I tre numeri di ogni riga (minimo, crescita, massimo) salgono tutti
     di circa il 30% da un gradino all'altro: così il distacco si vede
     anche sul telefono, non solo sullo schermo grande. */
  /* Il titolone: il carattere è stretto, quindi "al master" a 76px occupa
     235px dei 327 disponibili su un telefono da 375. Prima stava a 48 e
     sembrava un sottotitolo. Il 20vw lo fa crescere in fretta: da 450px di
     schermo in su è già al massimo. */
  --t1: clamp(76px, 20vw, 90px);   /* solo il titolone della home */
  --t2: clamp(37px, 5.6vw, 68px);   /* apertura di pagina, titolo articolo, chiusura gialla */
  --t3: clamp(29px, 4.3vw, 52px);   /* titolo di sezione */
  --t4: clamp(23px, 3.2vw, 38px);   /* sottotitolo, titolo di blocco, nome di un corso */
  --t5: clamp(19px, 2.1vw, 26px);   /* titolo di scheda, titolo di finestra */

  --larghezza: 1248px;
  --margine: 24px;

  /* Ordine di sovrapposizione, dal basso verso l'alto */
  --z-sfondo: 0;
  --z-contenuto: 1;
  --z-header: 20;
  --z-menu: 30;
}

/* ───────────────────────── Base ───────────────────────── */

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

/* Quello che è marcato "hidden" deve sparire davvero, anche quando più
   avanti gli diamo un display (flex, grid...): senza questa riga la
   regola del browser perde e l'elemento resta visibile. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--testo-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--titolo);
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--giallo); }
a:hover { color: var(--giallo-chiaro); }

/* "height: auto" non è un dettaglio: senza, il browser prende l'altezza
   scritta nell'attributo del tag <img> e ignora la proporzione chiesta più
   sotto (aspect-ratio). È il motivo per cui le foto venivano allungate. */
img { display: block; max-width: 100%; height: auto; }

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

/* Salta al contenuto: visibile solo quando arriva il focus da tastiera */
.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-menu);
  background: var(--giallo);
  color: var(--nero);
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
}
.salta:focus { left: 0; }

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

.tenue { color: var(--testo-3); }

/* ───────────────────────── Pulsanti e link ───────────────────────── */

.pulsante {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  background: var(--giallo);
  color: var(--nero);
  text-decoration: none;
  font: 700 18px/1 var(--titolo);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background .18s ease;
}
.pulsante:hover { background: var(--giallo-chiaro); color: var(--nero); }

.pulsante-scuro {
  background: var(--nero);
  color: var(--giallo);
  height: 54px;
  padding: 0 28px;
}
.pulsante-scuro:hover { background: #1A1A22; color: var(--giallo-chiaro); }

.link-sottolineato {
  color: var(--testo);
  text-decoration: none;
  font: 600 17px/1 var(--testo-font);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--giallo);
  transition: color .18s ease;
}
.link-sottolineato:hover { color: var(--giallo); }

/* ───────────────────────── Header ───────────────────────── */

.intestazione {
  /* Appesa in cima: la Home è alta cinque schermate e mezzo, e senza questo
     il menu spariva dopo la prima. La classe "stretta" la mette menu.js
     dopo 140px di scorrimento. */
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--nero);
  border-bottom: 1px solid var(--bordo-scuro);
  transition: border-color .25s ease;
}
.intestazione.stretta { border-bottom-color: var(--bordo); }

/* Gli ancoraggi dentro la pagina finirebbero sotto la barra: questo li fa
   fermare appena più in basso. Vale anche per il salto al contenuto. */
:target,
#contenuto { scroll-margin-top: 88px; }

.intestazione-barra {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 0 var(--margine);
  height: 96px;
  transition: height .25s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.intestazione.stretta .intestazione-barra { height: 68px; }

.logo,
.custom-logo-link { display: block; line-height: 0; }
.logo img,
.custom-logo-link img {
  width: 124px;
  height: auto;
  transition: width .25s ease;
}
.intestazione.stretta .logo img,
.intestazione.stretta .custom-logo-link img { width: 100px; }
.piede-logo .custom-logo-link img { width: 104px; }

.menu-principale ul {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-principale a {
  color: var(--testo-3);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease;
}
.menu-principale a:hover { color: var(--testo); }
.menu-principale a[aria-current="page"],
.menu-principale .current-menu-item > a {
  color: var(--testo);
  border-bottom-color: var(--giallo);
}

.intestazione .pulsante { height: 44px; padding: 0 20px; font-size: 17px; }

.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--bordo-chiaro);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.hamburger span {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--testo);
}
.hamburger span::before,
.hamburger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--testo);
  transition: transform .25s ease, top .25s ease;
}
.hamburger span::before { top: -6px; }
.hamburger span::after { top: 6px; }

.intestazione.aperta .hamburger span { background: transparent; }
.intestazione.aperta .hamburger span::before { top: 0; transform: rotate(45deg); }
.intestazione.aperta .hamburger span::after { top: 0; transform: rotate(-45deg); }

.menu-mobile { display: none; }

/* ───────────────────────── Hero ───────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  display: flex;
  flex-direction: column;
  background: var(--nero);
}

.hero-immagini {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 64%;
  z-index: var(--z-sfondo);
}

.hero-immagini img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: grayscale(1) contrast(1.12) brightness(.92);
  transition: opacity .7s ease;
}
.hero-immagini img.visibile { opacity: 1; }

.hero-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--nero) 0%, rgba(10,10,15,.6) 30%, rgba(10,10,15,.05) 70%);
}

.hero-testo {
  position: relative;
  z-index: var(--z-contenuto);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding-top: 72px;
  padding-bottom: 56px;
}

.hero h1 {
  font-size: var(--t1);
  line-height: 0.92;
  letter-spacing: -1.5px;
  max-width: 980px;
}
.hero h1 em { font-style: normal; color: var(--giallo); }

.domanda { font-size: 16px; color: var(--testo-2); }

.schede { display: flex; gap: 8px; flex-wrap: wrap; }

.scheda {
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--bordo-chiaro);
  border-radius: 3px;
  background: rgba(10,10,15,.55);
  color: var(--testo-2);
  font: 500 17px/1 var(--titolo);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.scheda:hover { color: var(--testo); border-color: #7A7A8C; }
.scheda[aria-pressed="true"] {
  background: var(--giallo);
  border-color: var(--giallo);
  color: var(--nero);
}

.hero-dettaglio {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 540px;
}
.hero-dettaglio h2 { font-size: var(--t4); line-height: 1.1; }
.hero-dettaglio p { font-size: 18px; color: var(--testo-2); white-space: pre-line; }

.hero-azioni {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Riquadro degli ascolti */

.ascolti-posizione {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  z-index: var(--z-contenuto);
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  margin: 0 auto;
}

.ascolti {
  pointer-events: auto;
  background: rgba(10,10,15,.92);
  border: 1px solid var(--bordo);
  padding: 18px 20px 10px;
  width: 400px;
}

.ascolti-titolo {
  display: block;
  font-size: 13px;
  color: var(--giallo);
  margin-bottom: 6px;
}

/* Senza JavaScript si vedono tutti e quattro i gruppi, uno sotto l'altro */
.gruppo-tracce + .gruppo-tracce { margin-top: 18px; }

.traccia {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--bordo-scuro);
  /* serve al bordo che si riempie, qui sotto */
  position: relative;
}

/* Mentre la traccia suona, il suo bordo di sopra si riempie di giallo da
   sinistra a destra. Niente di nuovo nella pagina: è lo stesso bordo che
   c'era già, quindi non si sposta un pixel. La quota la scrive home.js. */
.traccia::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: var(--avanzamento, 0%);
  background: var(--giallo);
  opacity: 0;
}
.traccia.suona::after { opacity: 1; }

.play {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--giallo);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.play[aria-pressed="true"] { background: var(--testo); }

.traccia-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.traccia-titolo {
  font-family: var(--titolo);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.traccia-meta,
.traccia-durata { font-size: 13px; color: #9A9AAB; }
.traccia-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Il tempo che scorre prende il posto della durata: "0:12" al posto di
   "0:30" è larga uguale, quindi la riga non si allarga mentre suona.
   Le cifre a larghezza fissa servono a questo: se no "1" e "4" ballano. */
.traccia-durata {
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.traccia.suona .traccia-durata { color: var(--giallo); }

/* Le sei barrette: si muovono sul segnale vero, preso dall'audio mentre
   esce. Le costruisce home.js al primo ascolto, e stanno qui spente fino a
   quel momento: chi non preme mai play non se le porta dietro. */
.traccia-onda {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
  flex: 0 0 auto;
}
.traccia.suona .traccia-onda { display: flex; }
.traccia-onda i {
  display: block;
  width: 3px;
  height: 2px;
  border-radius: 1px;
  background: var(--giallo);
}

/* Il cambio di percorso: il blocco si spegne per un soffio, cambia mentre
   non si vede, e torna. Senza questo il testo veniva sostituito nello stesso
   fotogramma e chi guardava le foto non si accorgeva di niente. I 150ms
   devono stare d'accordo con DISSOLVENZA in home.js. */
.hero-dettaglio {
  transition: opacity .15s ease, transform .15s ease;
}
.hero-dettaglio.cambia {
  opacity: 0;
  transform: translateY(6px);
}


/* ───────────────────────── Striscia dei nomi ───────────────────────── */

.striscia {
  background: var(--nero);
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.striscia-etichetta {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--testo-3);
  white-space: nowrap;
  padding: 0 28px 0 max(var(--margine), calc((100% - 1200px) / 2));
}

.striscia-finestra {
  flex: 1;
  overflow: hidden;
  padding: 24px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.striscia-nastro {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: scorri 45s linear infinite;
}
.striscia-finestra:hover .striscia-nastro { animation-play-state: paused; }

.striscia-nome {
  font-family: var(--titolo);
  font-size: 22px;
  font-weight: 600;
  white-space: nowrap;
}
.striscia-punto { color: var(--giallo); font-size: 22px; }

@keyframes scorri {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ───────────────────────── Sezioni ───────────────────────── */

.sezione { padding: 112px 0; }
.sezione-scura { background: var(--nero); padding: 104px 0; }

/* Le stesse colonne delle righe dei servizi qui sotto: prima erano due metà
   uguali con 40px di spazio, e il testo di destra partiva a 740 mentre le
   descrizioni dei servizi partivano a 844. Due griglie diverse per righe che
   stanno una sopra l'altra. */
.titolo-doppio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px) 32px;
  gap: 24px;
  align-items: end;
}
.titolo-doppio h2 { font-size: var(--t3); line-height: 1; }
.titolo-doppio p { font-size: 18px; line-height: 1.65; }

/* Elenco dei servizi */

.servizi { border-bottom: 1px solid var(--bordo); }

.servizio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px) 32px;
  gap: 24px;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid var(--bordo);
  color: var(--testo);
  text-decoration: none;
}
.servizio-nome {
  font-family: var(--titolo);
  font-weight: 700;
  font-size: var(--t4);
  letter-spacing: -0.5px;
  transition: color .18s ease;
}
.servizio:hover .servizio-nome { color: var(--giallo); }
.servizio-descrizione { font-size: 16px; color: var(--testo-3); }
.servizio-freccia { color: var(--giallo); font-size: 22px; }

/* Blocco "Ogni progetto ha un suono suo" */

.due-colonne {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}
.due-colonne img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: 55% 50%;
  border-radius: 2px;
}

.blocco-testo { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.blocco-testo h2 { font-size: var(--t3); line-height: 1; }
.blocco-testo p { font-size: 18px; line-height: 1.7; color: var(--testo-3); }

.numeri { display: flex; gap: 40px; flex-wrap: wrap; padding: 8px 0; }
.numero { display: flex; flex-direction: column; gap: 2px; }
.numero b {
  font-family: var(--titolo);
  font-size: 40px;
  font-weight: 700;
  color: var(--giallo);
  line-height: 1.1;
}
.numero span { font-size: 14px; color: var(--testo-3); }

/* Testimonianze */

.testimonianze {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.testimonianza {
  margin: 0;
  background: var(--fondo);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.virgolette {
  font-family: var(--titolo);
  font-size: 56px;
  line-height: 0.6;
  color: var(--giallo);
}
.testimonianza blockquote {
  margin: 0;
  flex: 1;
  font-size: 18px;
  line-height: 1.65;
  color: #E4E4EA;
}
.testimonianza figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--bordo);
}
.testimonianza figcaption img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}
.firma { display: flex; flex-direction: column; gap: 2px; }
.firma b { font-family: var(--titolo); font-size: 20px; font-weight: 700; }
.firma span { font-size: 14px; color: var(--testo-3); }

/* Dallo studio */

.riga-titolo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.riga-titolo h2 { font-size: var(--t3); line-height: 1; }

.news { display: flex; flex-direction: column; }
.news a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--bordo);
  color: var(--testo);
  text-decoration: none;
}
.news a:last-child { border-bottom: 1px solid var(--bordo); }
.news a:hover .news-titolo { color: var(--giallo); }
.news-titolo {
  font-family: var(--titolo);
  font-weight: 700;
  font-size: var(--t5);
  letter-spacing: -0.5px;
  transition: color .18s ease;
}
.news-categoria { font-size: 15px; color: var(--testo-3); text-align: right; }

/* Chiusura gialla */

.chiusura {
  background: var(--giallo);
  color: var(--nero);
  padding: 104px 0;
}
.chiusura h2 { font-size: var(--t2); line-height: 0.98; }
.chiusura p { font-size: 19px; line-height: 1.6; }
.chiusura-testo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

/* ───────────────────────── Footer ───────────────────────── */

.piede {
  background: var(--nero);
  border-top: 1px solid var(--bordo-scuro);
  color: var(--testo-3);
  font-size: 14px;
}

.piede-riga {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 28px var(--margine);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.piede-sinistra { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
.piede-logo { width: 104px; height: auto; }

.social { display: flex; gap: 4px; }
.social a {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--testo-3);
  transition: color .18s ease, background .18s ease;
}
.social a:hover { color: var(--nero); background: var(--giallo); }

.piede-contatti {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}
.piede-contatti a { color: var(--testo-3); text-decoration: none; }
.piede-contatti a:hover { color: var(--giallo); }
.punto { color: var(--bordo-chiaro); }

.piede-legale {
  color: var(--testo-4);
  font-size: 13px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.piede-legale a { color: var(--testo-4); text-decoration: none; }
.piede-legale a:hover { color: var(--testo-3); }

/* ───────────────────────── Schermi stretti ───────────────────────── */

@media (max-width: 1240px) {
  .piede-riga { flex-wrap: wrap; }
  .piede-contatti { order: 3; flex: 1 1 100%; }
  .piede-legale { order: 4; }
}

@media (max-width: 900px) {
  .intestazione-barra { height: 72px; }
  .logo img { width: 104px; }
  .menu-principale,
  .intestazione-barra .pulsante { display: none; }
  .hamburger { display: inline-flex; }

  /* Prima qui c'era un'altezza fissa (480px) con il resto tagliato via: il
     contenuto ne misura 503, quindi alla prossima voce di menu l'ultima
     sparirebbe senza che nessuno se ne accorga. E l'apertura animava
     altezza e margini, che fanno ricalcolare la disposizione della pagina
     a ogni fotogramma: sui telefoni lenti si vede scattare.

     Il menu è staccato dal flusso (position: absolute), quindi la sua
     altezza non riguarda nessun altro: non serve animarla. Si anima solo
     quanto è trasparente e di quanto è spostato, che non costano niente.
     L'altezza se la prende dal contenuto, con il tetto dello schermo e lo
     scorrimento come rete di sicurezza. */
  .menu-mobile {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: var(--z-menu);
    background: var(--nero);
    border-bottom: 1px solid var(--bordo-scuro);
    max-height: calc(100svh - 72px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .menu-mobile-dentro { padding: 8px var(--margine) 24px; }
  .intestazione.aperta .menu-mobile {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
  }

  .menu-mobile ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .menu-mobile a {
    display: block;
    font: 600 24px/1 var(--titolo);
    color: var(--testo-2);
    text-decoration: none;
    padding: 16px 0;
    border-bottom: 1px solid var(--bordo-scuro);
  }
  .menu-mobile a[aria-current="page"],
  .menu-mobile .current-menu-item > a { color: var(--giallo); }
  /* Il "display: block" della regola qui sopra vinceva su .pulsante, e senza
     flex il justify-content non faceva niente: la scritta restava a sinistra. */
  .menu-mobile .pulsante {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    font-size: 18px;
    border-bottom: 0;
    color: var(--nero);
  }

  /* Sul telefono la foto sta dietro al testo a tutta larghezza: il velo
     diventa verticale e pieno, altrimenti il testo finisce sulle parti
     chiare della foto e non si legge più. */
  .hero-immagini { width: 100%; opacity: .4; }
  .hero-velo {
    background: linear-gradient(0deg, rgba(10,10,15,.96) 0%, rgba(10,10,15,.72) 55%, rgba(10,10,15,.6) 100%);
  }
  .ascolti-posizione {
    position: relative;
    bottom: auto;
    padding-bottom: 28px;
  }
  .ascolti { width: 100%; }

  .servizio { grid-template-columns: minmax(0, 1fr); gap: 6px 14px; }
  .servizio-freccia { display: none; }

  .titolo-doppio,
  .due-colonne,
  .testimonianze { grid-template-columns: minmax(0, 1fr); }
  .due-colonne { gap: 40px; }
  .due-colonne img { height: 300px; }

  .sezione { padding: 72px 0; }
  .sezione-scura, .chiusura { padding: 72px 0; }
}

@media (max-width: 600px) {
  .piede-riga { padding: 24px 20px; }
  .piede-logo { width: 92px; }
  .piede-legale { flex: 1 1 100%; white-space: normal; }
  .news a { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .news-categoria { text-align: left; }
}

/* ═════════════════════════ Pagina Servizi ═════════════════════════ */

/* Testo riservato a chi usa uno screen reader: invisibile, ma letto ad alta voce */
.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Apertura di pagina (titolo + sommario) */

.apertura { padding: 104px 0 64px; }
.apertura .contenitore { display: flex; flex-direction: column; gap: 18px; }
.apertura h1 {
  font-size: var(--t2);
  line-height: 0.98;
  max-width: 920px;
}
.apertura p {
  font-size: 19px;
  line-height: 1.65;
  max-width: 640px;
}

/* La vetrina a schede */

.vetrina {
  position: relative;
  overflow: hidden;
  background: var(--nero);
  min-height: 720px;
  display: flex;
}

.vetrina-immagini {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 66%;
  z-index: var(--z-sfondo);
}
.vetrina-immagini img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(.92);
  transition: opacity .7s ease;
}
.vetrina-immagini img.visibile { opacity: 1; }

.vetrina-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--nero) 0%, rgba(10,10,15,.75) 28%, rgba(10,10,15,.1) 70%),
    linear-gradient(0deg, rgba(10,10,15,.85) 0%, rgba(10,10,15,0) 30%);
}

.vetrina-testo {
  position: relative;
  z-index: var(--z-contenuto);
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 72px;
  padding-bottom: 80px;
}

.schede-larghe { max-width: 760px; }
.schede-larghe .scheda { height: 46px; font-size: 18px; }
.schede-larghe .scheda[aria-pressed="false"] { background: transparent; }

.vetrina-dettaglio {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
  margin-top: 8px;
}
.vetrina-dettaglio h2 { font-size: var(--t4); line-height: 1.02; }
.vetrina-dettaglio p { font-size: 18px; color: var(--testo-2); white-space: pre-line; }

.elenco-servizio {
  margin: 0;
  padding-left: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--testo-2);
}

/* Come lavoriamo: cinque passi */

.passi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
}
.passi li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--bordo-chiaro);
}
.passo-numero {
  font-family: var(--titolo);
  font-size: 18px;
  font-weight: 700;
  color: var(--giallo);
}
.passo-titolo { font-family: var(--titolo); font-size: var(--t5); font-weight: 700; }
.passo-testo { font-size: 15px; line-height: 1.6; color: var(--testo-3); }

/* Domande frequenti */

.domande details { border-top: 1px solid var(--bordo); }
.domande details:last-child { border-bottom: 1px solid var(--bordo); }

.domande summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font: 600 20px/1.3 var(--titolo);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: "+"; color: var(--giallo); }
.domande details[open] summary::after { content: "\2212"; }

.domande p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--testo-3);
  max-width: 760px;
}

/* Chiusura su una riga sola */

.chiusura-stretta { padding: 88px 0; }
.chiusura-stretta .contenitore {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.chiusura-stretta h2 { font-size: var(--t3); }

@media (max-width: 1000px) {
  .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .vetrina-immagini { width: 100%; opacity: .4; }
  .vetrina-velo {
    background: linear-gradient(0deg, rgba(10,10,15,.96) 0%, rgba(10,10,15,.72) 55%, rgba(10,10,15,.6) 100%);
  }
  .elenco-servizio { grid-template-columns: minmax(0, 1fr); }
  .apertura { padding: 72px 0 48px; }
}

@media (max-width: 600px) {
  .passi { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ═════════════════════════ Dallo studio ═════════════════════════ */

.sezione-articoli { padding: 24px 0 112px; }

.categoria { color: var(--giallo); font-weight: 600; }

/* L'articolo in evidenza */

.in-evidenza {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  color: var(--testo);
  text-decoration: none;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--bordo);
}
.in-evidenza img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  transition: transform .25s ease;
}
.in-evidenza:hover img { transform: translateY(-4px); }

.evidenza-testo { display: flex; flex-direction: column; gap: 18px; }
.evidenza-testo h2 {
  font-size: var(--t3);
  line-height: 1;
  transition: color .2s ease;
}
.in-evidenza:hover h2 { color: var(--giallo); }
.evidenza-sommario { font-size: 19px; line-height: 1.6; max-width: 560px; }
.evidenza-leggi { font: 600 17px/1 var(--testo-font); color: var(--giallo); }

/* La griglia */

.griglia-news {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 28px;
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--testo);
  text-decoration: none;
}
.news-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  transition: transform .25s ease;
}
.news-card:hover img { transform: translateY(-4px); }
.news-meta { font-size: 14px; }
.news-titolo {
  font: 700 var(--t5)/1.12 var(--titolo);
  letter-spacing: -0.3px;
  transition: color .2s ease;
}
.news-card:hover .news-titolo { color: var(--giallo); }

.nessuno { font-size: 17px; color: var(--testo-3); }

.pulsante-vuoto {
  align-self: center;
  height: 52px;
  padding: 0 28px;
  border: 1px solid var(--bordo-chiaro);
  border-radius: 3px;
  background: transparent;
  color: var(--testo);
  font: 700 18px/1 var(--titolo);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.pulsante-vuoto:hover { border-color: var(--giallo); color: var(--giallo); }

/* ═════════════════════════ Modello articolo ═════════════════════════ */

.articolo-apertura { padding: 56px 0 80px; }

.indietro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--testo-3);
  text-decoration: none;
  font-size: 15px;
}
.indietro:hover { color: var(--giallo); }

.articolo-testata {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 64px;
  align-items: center;
}
.articolo-intro { display: flex; flex-direction: column; gap: 22px; }

.articolo-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 15px;
}

.articolo-intro h1 { font-size: var(--t2); line-height: 0.98; }
.articolo-sommario {
  font-size: 21px;
  line-height: 1.55;
  color: var(--testo-2);
  max-width: 620px;
}

.fatti {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 8px 0 0;
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
}
.fatti > div {
  padding: 16px 16px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fatti > div + div { padding-left: 16px; border-left: 1px solid var(--bordo); }
.fatti dt { font-size: 13px; color: #9A9AAB; }
.fatti dd { margin: 0; font: 600 18px/1.3 var(--titolo); }

.articolo-copertina {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

/* Il testo */

.articolo-corpo-sezione { padding: 0 0 96px; }

.articolo-corpo {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: 19px;
  line-height: 1.75;
  color: #D9D9E0;
}
.articolo-corpo p { margin: 0; }
.articolo-corpo strong { color: var(--testo); font-weight: 600; }
.articolo-corpo h2 {
  margin: 22px 0 0;
  font-size: var(--t4);
  line-height: 1.1;
  color: var(--testo);
}

.passaggi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.passaggi li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--bordo);
}
.passaggi li:last-child { border-bottom: 1px solid var(--bordo); }
.passaggi b { font: 700 22px/1.2 var(--titolo); color: var(--giallo); }
.passaggi span { font-size: 17px; line-height: 1.6; }

.articolo-figura { margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.articolo-figura img { width: 100%; height: auto; border-radius: 2px; }
.articolo-figura figcaption { font-size: 14px; color: #9A9AAB; }

/* ───────── Il testo scritto in WordPress ─────────
   Il corpo dell'articolo arriva dall'editor, non dal tema: può contenere
   elenchi, sottotitoli, citazioni, immagini. Qui prendono lo stesso aspetto
   del resto del sito. */

/* La scorciatoia "font:" fissava 26px: sul telefono l'h3 finiva per essere
   più grande dell'h2 che lo contiene. Si vedeva nel listino prezzi. */
.articolo-corpo h3 {
  margin: 14px 0 0;
  font: 700 var(--t5)/1.2 var(--titolo);
  color: var(--testo);
}

.articolo-corpo ul,
.articolo-corpo ol {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.articolo-corpo li { padding-left: 4px; }
.articolo-corpo li::marker { color: var(--giallo); }

.articolo-corpo a {
  color: var(--giallo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.articolo-corpo blockquote {
  margin: 8px 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--giallo);
  font-size: 21px;
  line-height: 1.6;
  color: var(--testo-2);
}

.articolo-corpo img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.articolo-corpo figure { margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.articolo-corpo figcaption { font-size: 14px; color: #9A9AAB; }

/* Le tabelle capitano di rado, ma quando capitano devono stare in pagina */
.articolo-corpo table { width: 100%; border-collapse: collapse; font-size: 16px; }
.articolo-corpo th,
.articolo-corpo td {
  /* "border: 0" prima: i blocchi tabella di WordPress disegnano una
     griglia completa, e qui serve solo la riga di separazione sotto. */
  border: 0;
  border-bottom: 1px solid var(--bordo);
  padding: 10px 2px;
  text-align: left;
}
.articolo-corpo .wp-block-table { margin: 0; }
.articolo-corpo .wp-block-table table { border: 0; }
.articolo-corpo th { color: var(--testo); font-weight: 600; }

/* I blocchi di WordPress che portano un margine proprio */
.articolo-corpo > *:first-child { margin-top: 0; }
.articolo-corpo .wp-block-image,
.articolo-corpo .wp-caption { margin: 14px 0; }
.articolo-corpo .wp-caption-text { font-size: 14px; color: #9A9AAB; }

/* L'invito finale */

.articolo-invito {
  max-width: 700px;
  margin: 32px auto 0;
  background: var(--nero);
  border: 1px solid var(--bordo-chiaro);
  border-radius: 3px;
  padding: 28px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.articolo-invito > div { display: flex; flex-direction: column; gap: 4px; }
.invito-titolo { font: 700 var(--t5)/1.1 var(--titolo); letter-spacing: -0.3px; }
.articolo-invito .tenue { font-size: 16px; }

/* Altro dallo studio */

.correlati {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.correlati a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--testo);
  text-decoration: none;
}
.correlati img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  transition: transform .25s ease;
}
.correlati a:hover img { transform: translateY(-4px); }
.correlato-titolo {
  font: 700 var(--t5)/1.15 var(--titolo);
  letter-spacing: -0.3px;
  transition: color .2s ease;
}
.correlati a:hover .correlato-titolo { color: var(--giallo); }

@media (max-width: 900px) {
  .in-evidenza { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .griglia-news { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .news-titolo { font-size: 21px; }

  .articolo-testata { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .articolo-copertina { max-width: 420px; }
  .fatti { grid-template-columns: minmax(0, 1fr); }
  .fatti > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--bordo); }
  .articolo-corpo { font-size: 18px; }
  .passaggi li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .correlati { grid-template-columns: minmax(0, 1fr); }
  .correlati img { aspect-ratio: 16 / 10; }
}

@media (max-width: 520px) {
  .griglia-news { grid-template-columns: minmax(0, 1fr); }
}

/* ═════════════════════════ Pagina Academy ═════════════════════════ */

.vetrina-corsi .vetrina-immagini { width: 58%; }
.vetrina-corsi .vetrina-testo { gap: 24px; padding-top: 80px; padding-bottom: 88px; }

.corso {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 580px;
  margin-top: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--bordo);
}

.corso-riga {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.corso h3 {
  font-family: var(--titolo);
  font-weight: 700;
  font-size: var(--t4);
  line-height: 1;
  letter-spacing: -0.5px;
  margin: 0;
}

.corso-insegnante {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
}
.corso-insegnante img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.corso-nome-insegnante { color: var(--giallo); }

.corso > p { font-size: 18px; line-height: 1.6; color: var(--testo-2); }

#corso-blocco-programma {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.corso-etichetta-programma {
  font: 600 13px/1 var(--testo-font);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--testo-4);
}
.programma {
  margin: 0;
  padding-left: 18px;
  columns: 2;
  column-gap: 32px;
  color: var(--testo-2);
  font-size: 16px;
  line-height: 1.85;
}

/* Come funziona */

.formule {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.formula {
  background: var(--fondo);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.formula-titolo { font: 700 var(--t5)/1.1 var(--titolo); letter-spacing: -0.3px; }
.formula ul {
  margin: 0;
  padding-left: 18px;
  color: var(--testo-2);
  font-size: 16px;
  line-height: 1.9;
}

/* Chi insegna */

.insegnanti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
}
.insegnante {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.insegnante img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}
.insegnante-nome { font: 700 30px/1.1 var(--titolo); letter-spacing: -0.3px; }
.insegnante-materie { font-size: 15px; color: var(--giallo); }
.insegnante p { font-size: 16px; line-height: 1.7; }

@media (max-width: 900px) {
  .vetrina-corsi .vetrina-immagini { width: 100%; }
  .programma { columns: 1; }
  .formule, .insegnanti { grid-template-columns: minmax(0, 1fr); }
  .insegnanti { gap: 40px; }
  .formula { padding: 28px; }
}

/* ═════════════════════════ Pagina Chi siamo ═════════════════════════ */

.avviso {
  background: var(--giallo);
  color: var(--nero);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 2px;
}

/* La crew */

.crew {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.scheda-crew {
  appearance: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--testo);
  background: #1E1E2A;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .22s ease, border-color .22s ease;
}
.scheda-crew:hover,
.scheda-crew:focus-visible { transform: translateY(-4px); border-color: rgba(232, 197, 71, .5); }

.scheda-crew img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.crew-testo {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.crew-nome { font: 700 22px/1.1 var(--titolo); letter-spacing: -0.3px; }
.crew-ruolo {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--giallo);
  font-weight: 600;
}
.crew-altro {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--testo-3);
}
.scheda-crew:hover .crew-altro { color: var(--giallo); }

/* Le bio restano qui sotto se lo script non parte */
.bio {
  padding: 14px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--testo-3);
}

/* Come lavoriamo */

.valori {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.valori li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--bordo-chiaro);
}
.valore-titolo { font: 700 var(--t5)/1.15 var(--titolo); letter-spacing: -0.3px; }
.valore-testo { font-size: 16px; line-height: 1.6; color: var(--testo-3); }

/* Le sale */

.sale {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.scheda-sala {
  appearance: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--testo);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sala-immagine {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
}
.sala-immagine img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform .5s ease;
}
.scheda-sala:hover .sala-immagine img { transform: scale(1.05); }

.sala-conta {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(10, 10, 15, .8);
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 20px;
}

.sala-nome { font: 700 24px/1.1 var(--titolo); letter-spacing: -0.3px; }
.scheda-sala:hover .sala-nome { color: var(--giallo); }
.sala-nota { font-size: 15px; line-height: 1.55; color: var(--testo-3); }

/* Le foto restano qui sotto se lo script non parte */
.galleria {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}
.galleria img { width: 100%; border-radius: 3px; }

/* ───────── Le due finestre ───────── */

.finestra {
  width: min(900px, calc(100% - 48px));
  max-height: 88vh;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  background: var(--fondo);
  color: var(--testo);
  overflow: auto;
}
.finestra::backdrop { background: rgba(8, 8, 12, .85); }

.finestra-galleria { width: min(1000px, calc(100% - 48px)); max-height: 92vh; }

.chiudi {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: var(--z-contenuto);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--testo);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.chiudi:hover { background: var(--giallo); color: var(--nero); }

.finestra-corpo { display: flex; }
.finestra-corpo > img {
  flex: 0 0 38%;
  width: 38%;
  object-fit: cover;
  align-self: stretch;
}
.finestra-testo {
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finestra-testo h2 { font-size: var(--t4); }
.bio-ruolo { font-size: 15px; color: var(--giallo); font-weight: 600; }
#bio-testo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
#bio-testo p { font-size: 16px; line-height: 1.7; color: var(--testo-2); }

.galleria-grande { position: relative; background: var(--nero); }
.galleria-grande img {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
}
.freccia-sinistra,
.freccia-destra {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20, 20, 28, .9);
}
.freccia-sinistra { left: 16px; }
.freccia-destra { right: 16px; }

.galleria-piede {
  padding: 18px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.galleria-piede h2 { font-size: var(--t5); }

.miniature { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.miniatura {
  appearance: none;
  width: 84px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  opacity: .55;
  background: none;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura[aria-pressed="true"] { opacity: 1; outline: 2px solid var(--giallo); }

@media (max-width: 1000px) {
  .crew, .sale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .valori { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .crew { gap: 14px; }
  .crew-testo { padding: 14px 14px 16px; }
  .finestra-corpo { flex-direction: column; }
  .finestra-corpo > img { width: 100%; max-height: 260px; flex: 0 0 auto; }
  .finestra-testo { padding: 24px; }
}

@media (max-width: 600px) {
  .sale, .valori { grid-template-columns: minmax(0, 1fr); }
}

/* ═════════════════════════ Pagina Lavori ═════════════════════════ */

.vetrina-lavori { min-height: 640px; }
.vetrina-lavori .vetrina-immagini { width: 62%; }

.area-descrizione {
  font-size: 17px;
  line-height: 1.6;
  color: var(--testo-3);
  max-width: 520px;
}

.lavoro-primo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 540px;
  margin-top: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--bordo);
}

.lavoro-riga {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.lavoro-chi { font-size: 14px; color: var(--giallo); }

.lavoro-frecce { display: flex; align-items: center; gap: 10px; }
.lavoro-posizione {
  font-size: 14px;
  color: var(--testo-3);
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.freccia {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid var(--bordo-chiaro);
  border-radius: 50%;
  background: rgba(10, 10, 15, .55);
  color: var(--testo);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.freccia:hover { background: var(--giallo); border-color: var(--giallo); color: var(--nero); }

.lavoro-primo h2 { font-size: var(--t4); line-height: 1.02; }
.lavoro-primo > p { font-size: 18px; line-height: 1.6; color: var(--testo-2); }

.etichette { display: flex; flex-wrap: wrap; gap: 6px; }
.etichette span {
  font-size: 12px;
  color: var(--testo-2);
  border: 1px solid var(--bordo-chiaro);
  border-radius: 20px;
  padding: 3px 10px;
}

.lavoro-azioni { margin-top: 8px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.pulsante-ascolto[aria-pressed="true"] { background: var(--testo); }

/* La griglia di tutti i lavori */

.sezione-elenco { padding: 64px 0 104px; }

.griglia-lavori {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.lavoro {
  appearance: none;
  text-align: left;
  font: inherit;
  color: var(--testo);
  background: #0F0F16;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, border-color .2s ease;
}
.lavoro:hover { transform: translateY(-4px); border-color: rgba(232, 197, 71, .45); }
.lavoro.attivo { border-color: var(--giallo); }

.lavoro img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.lavoro-testo {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* La scheda si legge in tre righe: dove si trova il lavoro, come si
   chiama, di chi è. */
.lavoro-canale {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--giallo);
}
.lavoro-nome {
  font-family: var(--titolo);
  font-weight: 700;
  font-size: var(--t5);
  line-height: 1.15;
  letter-spacing: -0.3px;
}
.lavoro-cliente { font-size: 13px; color: var(--testo-3); }

@media (max-width: 1000px) {
  .griglia-lavori { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .vetrina-lavori .vetrina-immagini { width: 100%; }
  .sezione-elenco { padding: 48px 0 72px; }
}

@media (max-width: 520px) {
  .griglia-lavori { grid-template-columns: minmax(0, 1fr); }
}

/* ═════════════════════════ Pagina Contatti ═════════════════════════ */

.sezione-contatti { padding: 8px 0 112px; }

.contatti-griglia {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Il modulo */

#modulo-contatti {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.campo-scelte {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.campo-scelte > span { font-size: 15px; color: var(--testo-2); }

.campi-affiancati {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#modulo-contatti label {
  font-size: 15px;
  color: var(--testo-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.facoltativo { color: var(--testo-4); }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  font: 400 17px/1.4 var(--testo-font);
  color: var(--testo);
  background: var(--nero);
  border: 1px solid var(--bordo-chiaro);
  border-radius: 3px;
  padding: 14px 16px;
  width: 100%;
}
textarea { resize: vertical; min-height: 120px; }

input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--giallo);
  outline-offset: 1px;
  border-color: transparent;
}

/* Riga sotto il pulsante.
   Non c'è una casella da spuntare: per un modulo di contatto la base
   giuridica è la richiesta stessa, non il consenso. */

.nota-privacy {
  margin-top: -6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--testo-3);
}
.nota-privacy a { color: var(--giallo); }

/* Messaggio di errore */

.errore {
  color: #FFA5A5;
  font-size: 15px;
  line-height: 1.5;
}

/* Esito dell'invio.
   Niente bordo giallo e niente ringraziamenti finché il modulo non è
   collegato davvero: il giallo qui direbbe "fatto", e non è vero. */

.esito {
  background: var(--nero);
  border: 1px solid var(--bordo-chiaro);
  border-radius: 3px;
  padding: 28px;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.esito:focus-visible { outline: 2px solid var(--giallo); outline-offset: 3px; }
.esito h2 { font-size: var(--t5); }
.esito p { font-size: 16px; line-height: 1.6; color: var(--testo-3); }
.esito strong { color: var(--testo); }

/* Avviso sopra il pulsante di invio */

.nota-prova {
  font-size: 15px;
  line-height: 1.6;
  color: var(--testo-3);
  padding-top: 18px;
  border-top: 1px solid var(--bordo);
}
.nota-prova strong { color: var(--testo); }

/* Colonna dei recapiti */

.recapiti {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 12px;
}
.recapiti h2 { font-size: var(--t5); margin-bottom: 6px; }
.recapiti p { font-size: 17px; line-height: 1.6; color: var(--testo-3); }
.recapiti a { color: var(--testo-3); text-decoration: none; }
.recapiti a:hover { color: var(--giallo); }

.mappa { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.mappa img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border: 1px solid var(--bordo);
  border-radius: 2px;
}
.mappa-piede {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--testo-4);
}
.mappa-apri { color: var(--giallo); }

@media (max-width: 900px) {
  .contatti-griglia { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .campi-affiancati { grid-template-columns: minmax(0, 1fr); }
  .sezione-contatti { padding-bottom: 72px; }
}

/* ───────────────────────── L'arrivo delle liste ─────────────────────────

   Le tre griglie vere del sito — la crew, i lavori, gli articoli — entrano a
   scalare quando le incontri scorrendo.

   **Lo stato normale qui sotto non nasconde niente.** La classe
   "da-rivelare" la mette menu.js un attimo prima di rivelare: se quel
   file non arriva, o se il telefono ha chiesto meno animazioni, la griglia
   resta semplicemente visibile. Una comparsa legata a una transizione che
   non parte è una sezione vuota, ed è un prezzo che non vale la pena. */

.da-rivelare > * {
  opacity: 0;
  transform: translateY(14px);
}
.da-rivelare.rivelata > * {
  opacity: 1;
  transform: none;
  /* Lo sfalsamento: il ritardo di ogni scheda lo scrive menu.js.
     Curva in uscita, senza rimbalzo: arriva e si ferma. */
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1) var(--ritardo, 0ms),
              transform .5s cubic-bezier(.22, 1, .36, 1) var(--ritardo, 0ms);
}


/* ───────────────────────── Meno animazioni ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .striscia-nastro {
    animation: none;
    flex-wrap: wrap;
    width: auto;
  }
  .hero-immagini img,
  .vetrina-immagini img,
  .menu-mobile,
  .hero-dettaglio,
  .intestazione,
  .intestazione-barra,
  .logo img,
  .custom-logo-link img,
  .hamburger span::before,
  .hamburger span::after { transition: none; }

  /* Le griglie non si nascondono nemmeno per un istante: menu.js non
     mette la classe, e questa riga è la cintura se la mettesse comunque. */
  .da-rivelare > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Il bordo che si riempie resta — dice dove sei, non è un ornamento.
     Le barrette invece sono solo movimento: via. */
  .traccia-onda { display: none !important; }
}


/* ═════════════════════════ Template di riserva ═════════════════════════ */

.contenuto-semplice {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contenuto-semplice h1 { font-size: var(--t2); line-height: 1; }
.contenuto-semplice h2 { font-size: var(--t4); line-height: 1.1; }
/* Senza una regola sua, l'h3 restava a una misura fissa e sul telefono
   finiva per essere più grande dell'h2 che lo contiene. */
.contenuto-semplice h3 { font-size: var(--t5); line-height: 1.2; }
.contenuto-semplice p { font-size: 18px; line-height: 1.7; color: var(--testo-3); }
.voce-semplice { padding-bottom: 20px; border-bottom: 1px solid var(--bordo); }


/* ═════════════════════════ Riquadro in evidenza ═════════════════════════
   Un blocco "Gruppo" con classe "riquadro" nell'editor: serve a staccare
   un pacchetto, uno sconto, una nota importante dal resto del testo. */

/* Una riga colorata su un lato solo è la decorazione che fa "fatto da una
   macchina": sta lì senza voler dire niente. Al suo posto un bordo intero
   sottile e un velo del giallo, che stacca il riquadro dal testo senza
   gridare. */
.riquadro {
  border: 1px solid var(--bordo);
  border-radius: 4px;
  background: rgba(232, 197, 71, .05);
  padding: 18px 20px;
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.riquadro p { margin: 0; }
.riquadro strong { color: var(--testo); }
.riquadro .prezzo { color: var(--giallo); font-weight: 700; }
.riquadro .piccolo { font-size: 15px; font-style: italic; color: var(--testo-4); }

/* Nelle tabelle a due colonne la seconda è quasi sempre un prezzo:
   a destra, in giallo, senza andare a capo. */
.articolo-corpo table td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--giallo);
  white-space: nowrap;
}

.avviso-riservato {
  color: var(--giallo);
  font-style: italic;
}


/* ═════════════════════════ Righe pari ═════════════════════════

   Quando gli elementi sono meno delle colonne disponibili, l'ultima riga
   resta spaiata: sei schede in quattro colonne fanno 4+2, con un buco.
   Qui le colonne si riducono al numero che divide gli elementi, così la
   griglia resta equilibrata: 6 diventa 3+3, 3 diventa 3, e così via.

   Due modi, perché i casi sono due:
   - dove il numero è fisso (crew, sale, insegnanti) lo conta il CSS con
     :has(), guardando qual è l'ultimo elemento;
   - dove cambia col filtro (lavori, articoli) il numero lo scrive lo
     script in "data-visibili", perché il CSS non può contare quello che
     è nascosto.

   Le regole stanno sopra il punto di rottura di ogni griglia, così sugli
   schermi stretti continua a decidere la disposizione a una o due colonne. */

@media (min-width: 1001px) {

  /* Crew e sale: quattro colonne di base */
  .crew:has(> :nth-child(2):last-child),
  .sale:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .crew:has(> :nth-child(3):last-child),
  .crew:has(> :nth-child(6):last-child),
  .crew:has(> :nth-child(9):last-child),
  .sale:has(> :nth-child(3):last-child),
  .sale:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Lavori: il numero visibile cambia a ogni area.
     Con un elemento solo non si tocca niente: allargarlo a tutta pagina
     farebbe una scheda da 1200×1500 pixel, peggio del buco che evita. */
  .griglia-lavori[data-visibili="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia-lavori[data-visibili="3"],
  .griglia-lavori[data-visibili="6"],
  .griglia-lavori[data-visibili="9"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 901px) {

  /* Insegnanti: due colonne di base */
  .insegnanti:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Testimonianze e correlati: tre colonne di base */
  .testimonianze:has(> :nth-child(2):last-child),
  .testimonianze:has(> :nth-child(4):last-child),
  .correlati:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Articoli: il numero cambia col filtro per categoria.
     Anche qui, l'elemento solo resta della sua misura. */
  .griglia-news[data-visibili="2"],
  .griglia-news[data-visibili="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Il segnalibro che manda a capo i gruppi di scelte: largo quanto la riga,
   alto zero. Lo mette schede.js dove le due righe risultano più simili. */
.schede .interruzione {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}

/* Quando le scelte vanno a capo, le righe finivano a larghezze diverse: su
   Servizi la prima occupava 547px e la seconda 370, con 177px di scarto.
   Qui i pulsanti si allargano per riempire la riga, così ogni riga finisce a
   filo con le altre. La classe la mette schede.js, e solo se il gruppo va
   davvero a capo: su una riga sola i pulsanti restano larghi quanto la loro
   scritta. */
.schede-distese .scheda { flex: 1 1 auto; }