/* ============================================================
   STYLE.CSS — Up Center
   Mobile-first: le regole base valgono per il telefono,
   quelle dentro @media aggiungono spazio sugli schermi grandi.
   ============================================================ */

:root {
  /* Colori campionati dal logo della palestra. Nessun colore inventato. */
  --nero: #282420;          /* fondo del logo */
  --nero-morbido: #322d28;
  --grigio-scuro: #4a423b;
  --grigio: #6f665e;
  --grigio-chiaro: #e4dfd6;
  --bianco: #ffffff;
  --panna: #f7f4e9;         /* crema delle scritte del logo */

  --rosso: #a0282c;         /* guantoni e nastro */
  --rosso-scuro: #861f23;
  --verde-whatsapp: #25d366;

  /* Quanto spazio lasciare sopra il punto d'arrivo di un collegamento.
     La testata resta appiccicata in alto: senza questo stacco coprirebbe
     proprio la cosa che si è appena cercata. Sotto i 700px il menu va a
     due righe e la testata è alta 159px, sopra i 700 sta su una riga sola
     e ne misura 81. Il valore è uno solo per tutto il sito: se lo si
     scrive a mano caso per caso, prima o poi se ne dimentica uno. */
  --stacco: 180px;
  --larghezza: 1100px;
  --raggio: 14px;
  --ombra: 0 2px 14px rgba(40, 36, 32, 0.10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--panna);
  color: var(--nero);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

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

a { color: inherit; }

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

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

.testata {
  background: var(--nero);
  color: var(--bianco);
  position: sticky;
  top: 0;
  z-index: 10;
}

.testata__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  text-align: left;
}

.marchio__logo {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 8px;
}

.marchio__nome {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.marchio__accento { color: var(--panna); }

.marchio__sotto {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grigio-chiaro);
}

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}

.menu a {
  color: var(--grigio-chiaro);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 4px 0;
}

.menu a:hover,
.menu a:focus { color: var(--bianco); }

/* ---------- Hero ---------- */

/* ============================================================
   LA FOTO DIETRO AL TITOLO
   La foto ha i due lati pieni (boxe a sinistra, corsi a destra)
   e il centro vuoto: le scritte stanno lì. Sopra c'è comunque una
   velatura scura, perché «il centro è già scuro» non basta: su uno
   schermo stretto la foto viene ritagliata e sotto le scritte può
   finirci una finestra o un riflesso.
   ============================================================ */
.hero {
  position: relative;
  background-color: var(--nero-morbido);
  background-image: url("img/hero-piccolo.jpg");
  background-size: cover;
  /* Sul telefono la foto viene ritagliata stretta: al centro c'è solo il
     pavimento vuoto. Spostandola verso sinistra dietro le scritte finiscono
     i due pugili, che è quello che vale la pena far vedere. */
  background-position: 24% center;
  background-repeat: no-repeat;
  color: var(--bianco);
  padding: 64px 0 68px;
  text-align: center;
  overflow: hidden;
}

/* La velatura: una fascia scura al centro, larga quanto la colonna del
   testo, che sfuma verso i lati dove ci sono le persone che si allenano.
   Le fermate sono in PIXEL, non in percentuale: se fossero in percentuale
   su uno schermo largo la parte scura si allargherebbe fino a coprire
   anche i pugili. Così invece resta sempre attorno alle scritte.
   Sul telefono le fermate finiscono fuori dallo schermo e la velatura
   copre tutto: giusto così, perché lì la foto è ritagliata sul centro
   vuoto e non c'è niente da mostrare ai lati.
   I valori non sono a occhio: il contrasto di ogni scritta è stato
   misurato sui pixel veri della foto a 375, 768, 1280 e 1900 px. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(24, 21, 18, 0.14) 0,
      rgba(24, 21, 18, 0.72) calc(50% - 470px),
      rgba(24, 21, 18, 0.93) calc(50% - 250px),
      rgba(24, 21, 18, 0.93) calc(50% + 250px),
      rgba(24, 21, 18, 0.72) calc(50% + 470px),
      rgba(24, 21, 18, 0.14) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(24, 21, 18, 0.35),
      rgba(24, 21, 18, 0.18) 50%,
      rgba(24, 21, 18, 0.45)
    );
}

/* Sul telefono la fascia scura al centro non serve: le scritte occupano
   tutta la larghezza, non ci sono lati da tenere liberi. Basta una
   velatura uniforme e piu' leggera, cosi' i pugili dietro si vedono
   davvero. Anche cosi' il contrasto peggiore misurato è 7,3:1. */
@media (max-width: 699px) {
  .hero::before {
    background: linear-gradient(
      to bottom,
      rgba(24, 21, 18, 0.66),
      rgba(24, 21, 18, 0.58) 50%,
      rgba(24, 21, 18, 0.70)
    );
  }
}

/* Le scritte stanno sopra la velatura */
.hero > .contenitore {
  position: relative;
}

/* Un filo d'ombra sotto le lettere. Non serve a passare le soglie — quelle
   le passa la velatura — ma stacca le scritte dove il fondo è mosso. */
.hero__occhiello,
.hero__titolo,
.hero__sottotitolo,
.hero__prova {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero__occhiello {
  /* Sta dentro l'h1, quindi erediterebbe il corpo e il peso del titolo:
     qui li riporta a quelli suoi, e va a capo da sola. */
  display: block;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 14px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grigio-chiaro);
}

.hero__titolo {
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 7vw, 3.2rem);
  line-height: 1.12;
  font-weight: 800;
  text-transform: uppercase;
}

.hero__sottotitolo {
  margin: 0 0 22px;
  font-size: 1.05rem;
  color: var(--grigio-chiaro);
}

.hero__prova {
  margin: 0 0 26px;
  font-size: 1rem;
}

.azioni {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

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

.bottone {
  display: inline-block;
  padding: 15px 24px;
  border-radius: var(--raggio);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
}

.bottone--primario {
  background: var(--rosso);
  color: var(--panna);
}

.bottone--primario:hover { background: var(--rosso-scuro); }

.bottone--whatsapp {
  background: var(--verde-whatsapp);
  color: #06301a;
}

.bottone--whatsapp:hover { filter: brightness(0.94); }

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

.sezione { padding: 44px 0; }

.sezione--evidenza {
  background: var(--bianco);
  border-top: 1px solid var(--grigio-chiaro);
  border-bottom: 1px solid var(--grigio-chiaro);
}

.sezione__titolo {
  margin: 0 0 20px;
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.sezione__titolo::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-top: 10px;
  background: var(--rosso);
  border-radius: 2px;
}

.testo-guida {
  margin: 0 0 16px;
  max-width: 62ch;
  color: var(--grigio-scuro);
}

.avviso {
  margin: 0 0 16px;
  padding: 16px 18px;
  background: var(--panna);
  border-left: 4px solid var(--rosso);
  border-radius: 0 var(--raggio) var(--raggio) 0;
  font-weight: 600;
  max-width: 62ch;
}

.avviso p { margin: 0 0 10px; }
.avviso p:last-child { margin-bottom: 0; }

.avviso a {
  color: var(--rosso);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.avviso a:hover { color: var(--rosso-scuro); }

/* ---------- Sale e valori ---------- */

.sale,
.valori,
.contatti,
.social {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sale { display: grid; gap: 16px; margin: 26px 0; }

.sala {
  background: var(--bianco);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  overflow: hidden;
}

.sala__foto {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--grigio-chiaro);
}

.sala__testi { padding: 20px; }

.sala__nome {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sala__posizione {
  margin: 2px 0 10px;
  font-size: 0.85rem;
  color: var(--grigio);
}

.sala__testo { margin: 0; color: var(--grigio-scuro); }

.valori { display: grid; gap: 12px; margin-top: 26px; }

.valore {
  border-top: 2px solid var(--rosso);
  padding-top: 12px;
}

.valore__titolo {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 800;
}

.valore__testo {
  margin: 0;
  font-size: 0.95rem;
  color: var(--grigio-scuro);
}

/* ============================================================
   ORARI
   Sul telefono si vede l'elenco per giorno.
   Da 900px in su si vedono le griglie settimanali.
   ============================================================ */

.solo-telefono { display: block; }

/* La griglia settimanale si vede anche sul telefono: in larghezza non ci
   sta, quindi tiene la sua misura naturale e scorre dentro
   .griglia-scorrevole, che ha già overflow-x:auto. Il "width:100%" la
   comprimerebbe fino a renderla illeggibile, perciò qui va tolto. */
/* La larghezza minima cresce col numero di giorni della sala: 92px a
   colonna sono quel che serve all'etichetta «in avvio» (72px piu' i due
   padding) per stare su una riga sola. Con table-layout:fixed la tabella
   non si allarga da sola, e l'etichetta sbordava nella cella accanto. */
.griglia { width: auto; min-width: max(620px, calc(108px + var(--giorni, 6) * 92px)); }

/* Senza questa riga in tanti non si accorgono che la tabella si trascina.
   Sta nascosta di suo: la accende lo script solo dove c'è davvero da
   scorrere. Se il JavaScript non parte non si vede, ed è la scelta giusta:
   meglio un suggerimento in meno che uno falso. */
.scorri-settimana {
  display: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rosso);
  margin: 0 0 8px;
}
.scorri-settimana::after { content: " →"; }
.scorri-settimana--serve { display: block; }

/* Testo solo per i lettori di schermo */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.chiusura {
  margin-top: 18px;
  font-weight: 600;
}

/* ---------- Elenco per giorno (telefono) ---------- */

.giorno {
  background: var(--bianco);
  border-radius: var(--raggio);
  border-left: 4px solid transparent;
  margin-bottom: 10px;
  box-shadow: var(--ombra);
  overflow: hidden;
}

.giorno.e-oggi { border-left-color: var(--rosso); }

/* La riga che si tocca per aprire il giorno */
.giorno__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.giorno__testa::-webkit-details-marker { display: none; }

.giorno__testa:hover { background: var(--panna); }

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

.giorno__nome {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.giorno__oggi {
  background: var(--rosso);
  color: var(--panna);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

/* "6 corsi" a destra, con la freccetta che gira quando è aperto */
.giorno__quanti {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  font-size: 0.84rem;
  color: var(--grigio);
  white-space: nowrap;
}

.giorno__testa .giorno__quanti::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--grigio);
  border-bottom: 2px solid var(--grigio);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.giorno[open] .giorno__quanti::after { transform: rotate(45deg); }

/* Giorno senza corsi: nessuna freccia, non si apre */
.giorno--vuoto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  opacity: 0.75;
}

.giorno--vuoto .giorno__quanti { font-style: italic; }

.voci {
  list-style: none;
  margin: 0;
  padding: 0 18px 18px;
  display: grid;
  gap: 12px;
}

.voce {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-top: 12px;
  border-top: 1px solid var(--grigio-chiaro);
}

.voce:first-child {
  padding-top: 0;
  border-top: none;
}

.voce__ora {
  flex: 0 0 auto;
  min-width: 96px;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  padding-top: 1px;
}

.voce__dettaglio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.voce__corso { font-weight: 700; }

.voce__chi {
  font-size: 0.85rem;
  color: var(--grigio);
}

.voce__nota {
  margin-top: 5px;
  padding: 9px 11px;
  background: var(--panna);
  border-left: 3px solid var(--rosso);
  border-radius: 0 8px 8px 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--grigio-scuro);
}

/* ---------- Griglia settimanale (computer) ---------- */

.sala-orari { margin-bottom: 34px; }

.sala-orari__titolo {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sala-orari__dove {
  font-weight: 500;
  text-transform: none;
  font-size: 0.88rem;
  color: var(--grigio);
}

/* Rete di sicurezza: se la griglia non ci sta, scorre dentro di sé
   e non fa mai scorrere tutta la pagina di lato. */
/* Il dito scorre la tabella. Arrivato in fondo alla tabella deve
   FERMARSI: senza overscroll-behavior il gesto continua e trascina la
   pagina intera, che si sposta di lato mostrando il vuoto a destra e
   tagliando il testo a sinistra. La pagina non sborda (misurato a 320,
   360 e 412px): e il gesto che si propaga, ed e questa riga a fermarlo. */

.griglia-scorrevole {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* position:relative e la riga che conta, ed e costata un pomeriggio.
     Nelle caselle vuote della tabella c e uno <span class="sr">, il
     trattino per il lettore di schermo: e position:absolute, e senza un
     antenato posizionato il suo riferimento e LA PAGINA INTERA, non questo
     riquadro. Cosi usciva dal ritaglio e restava piantato dove la tabella
     da 620px lo aveva messo: 18 trattini oltre il bordo destro, documento
     largo 566px su uno schermo da 412, e la pagina si trascinava di lato
     anche lontano dalle tabelle (testata compresa). Con il riquadro
     posizionato, gli span gli appartengono e vengono ritagliati con lui. */
  position: relative;
}

.griglia {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.86rem;
  background: var(--bianco);
}

.griglia th,
.griglia td {
  border: 1px solid var(--grigio-chiaro);
  padding: 9px 10px;
  vertical-align: top;
  text-align: left;
}

.griglia thead th {
  background: var(--nero);
  color: var(--bianco);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
}


.griglia thead th abbr {
  text-decoration: none;
  border: none;
}

/* La colonna degli orari resta ferma a sinistra mentre il resto della
   tabella scorre: senza, sul telefono si vedeva solo "15" o "00" con
   l ora tagliata via, e non si capiva piu di che fascia si parlasse.
   Sticky funziona sulle celle (th/td), non su thead/tr: per questo sta
   qui e non sulla riga. Il riferimento e .griglia-scorrevole, che e il
   contenitore che scorre. Lo sfondo DEVE essere pieno, perche le altre
   celle passano sotto; il z-index la tiene sopra. Con border-collapse
   il bordo destro scorrerebbe via insieme alle celle vicine: il filo
   di separazione e quindi un box-shadow, che resta attaccato alla
   cella ferma. */
.griglia__ora {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 108px;
  background: var(--panna);
  background-clip: padding-box;
  box-shadow: 1px 0 0 var(--grigio-chiaro);
  font-weight: 700;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* L angolo in alto a sinistra ("Orario") sta fermo e sopra a tutto:
   nero come il resto della riga dei giorni. */
.griglia thead th.griglia__ora {
  z-index: 3;
  background: var(--nero);
  box-shadow: 1px 0 0 var(--nero);
}

.griglia td.vuota { background: var(--panna); }

/* Le caselle del giorno di oggi restano identiche alle altre: a segnare
   oggi basta la colonna rossa in testa. Colorare anche le caselle si
   leggeva come un difetto, non come un segnale — e usava lo stesso
   rosato con cui si illumina la riga del listino appena raggiunta. */

.lezione {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.lezione + .lezione {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--grigio-chiaro);
}

.lezione__corso {
  font-weight: 700;
  line-height: 1.25;
}

.lezione__chi {
  font-size: 0.78rem;
  color: var(--grigio);
}

.rimando {
  color: var(--rosso-scuro);
  font-weight: 800;
  margin-left: 2px;
}

/* white-space: nowrap — una pillola non si spezza mai su due righe:
   dentro le colonne strette della griglia diventava un ovale alto il
   doppio. La tabella si allarga da sola quel tanto che serve, e scorre
   gia' di suo. */
.etichetta {
  display: inline-block;
  white-space: nowrap;
  margin-top: 3px;
  background: var(--rosso);
  color: var(--panna);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.note-orari {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 0.85rem;
  color: var(--grigio-scuro);
}

.note-orari li { margin-bottom: 4px; }

/* La nota senza numerino: non e' un elenco, e' una frase sotto la
   tabella. Niente rientro, se no sembra una voce orfana. */
.note-orari--piana { padding-left: 0; }

/* Stessa frase in fondo al giorno, nell'elenco del telefono. */
.nota-giorno {
  margin: 10px 0 0;
  padding: 9px 11px;
  background: var(--panna);
  border-left: 3px solid var(--rosso);
  border-radius: 0 8px 8px 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--grigio-scuro);
}


/* La regola della sala sta subito sotto i rimandi della sua griglia (sul
   computer) o in fondo all'elenco per giorno (sul telefono). Senza questi
   margini si appiccica a quello che ha sopra e a quello che ha sotto.
   Il margine di sotto è più grande di quello dell'articolo della sala
   (34px): i due si fondono e vince il maggiore, quindi comanda questo. */
.regola-sala {
  margin-top: 22px;
  margin-bottom: 46px;
}

/* ============================================================
   ISTRUTTORI
   ============================================================ */

.istruttori {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.scheda {
  background: var(--panna);
  border-radius: var(--raggio);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

/* La scheda raggiunta dal listino. Un anello rosso invece della tinta:
   dentro la scheda ci sono già riquadri bianchi, colorarla tutta la
   renderebbe confusa. */
.scheda:target {
  box-shadow: 0 0 0 3px var(--rosso);
  animation: scheda-raggiunta 1.4s ease-out 1;
}

@keyframes scheda-raggiunta {
  from { box-shadow: 0 0 0 3px var(--rosso), 0 0 0 11px rgba(160, 40, 44, 0.28); }
  to   { box-shadow: 0 0 0 3px var(--rosso), 0 0 0 11px rgba(160, 40, 44, 0); }
}

.scheda__testa {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.scheda__foto,
.scheda__iniziali {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
}

/* Segnaposto usato finché non arrivano le foto */
.scheda__iniziali {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nero);
  color: var(--panna);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

.scheda__chi { min-width: 0; }

.scheda__nome {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
}

.scheda__ruolo {
  margin: 3px 0 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grigio);
}

.scheda__bio {
  margin: 0 0 14px;
  font-size: 0.93rem;
  color: var(--grigio-scuro);
}

.corsi-di {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}

/* ============================================================
   LE SCHEDE DEI CORSI
   Le descrizioni delle discipline: che cosa si fa, chi lo tiene,
   quando e quanto costa. Da non confondere con .corso-di qui sotto,
   che è la riga dentro la scheda di un istruttore.
   ============================================================ */

.discipline {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.disciplina {
  background: var(--bianco);
  border-radius: var(--raggio);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.disciplina__nome {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
}

.disciplina__testo {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--grigio-scuro);
}

/* 'margin-top: auto' incolla la riga di chi tiene il corso al fondo:
   le schede della stessa fila restano allineate anche se le descrizioni
   sono lunghe diverse. */
.disciplina__chi {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--grigio-chiaro);
  font-size: 0.92rem;
  color: var(--grigio-scuro);
}

.corso-di {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 9px 12px;
  background: var(--bianco);
  border-left: 3px solid var(--rosso);
  border-radius: 0 8px 8px 0;
}

/* Il secondo selettore serve alla pagina del corso: li' il bordo rosso
   viene da ".corso-quando__righe li", piu' specifico di una classe sola. */
.corso-di--attesa,
.corso-quando__righe .corso-di--attesa { border-left-color: var(--grigio); }

.corso-di__nome {
  font-weight: 700;
  font-size: 0.92rem;
}

.corso-di__quando {
  font-size: 0.85rem;
  color: var(--grigio);
}

.scheda__nota {
  margin: 0 0 14px;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--grigio-scuro);
}

.scheda__azioni {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

/* min-height: garantisce il bersaglio minimo di 44px per il dito */
.bottone--piccolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  font-size: 0.92rem;
}

.scheda__telefono {
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
}

.etichetta--chiara {
  background: var(--panna);
  color: var(--rosso);
}

/* ============================================================
   PREZZI
   Una sola impaginazione che funziona ovunque: su telefono le due
   colonne si impilano, su schermi larghi stanno affiancate.
   ============================================================ */

.sotto-titolo {
  margin: 30px 0 12px;
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.piccolo {
  font-size: 0.88rem;
  color: var(--grigio);
}

/* ============================================================
   DAGLI ORARI AL LISTINO
   Il nome di ogni corso negli orari porta alla sua tariffa.
   La sottolineatura tratteggiata rossa è sempre visibile, anche
   sul telefono, dove non esiste il passaggio del mouse: se si
   vedesse solo al passaggio, metà delle persone non saprebbe
   nemmeno che c'è qualcosa da toccare.
   ============================================================ */

.invito-prezzi {
  /* un po' di stacco prima della prima tabella: l'invito è una frase a sé,
     non l'intestazione della griglia che segue */
  margin: 0 0 32px;
  max-width: 62ch;
  color: var(--grigio-scuro);
  border-left: 3px solid var(--rosso);
  padding-left: 12px;
}

.verso-prezzo,
.verso-istruttore,
.verso-pacchetti,
.verso-orari {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--rosso);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.verso-prezzo:hover,
.verso-istruttore:hover,
.verso-pacchetti:hover,
.verso-orari:hover {
  color: var(--rosso);
  text-decoration-style: solid;
}

.verso-prezzo:focus-visible,
.verso-istruttore:focus-visible,
.verso-pacchetti:focus-visible,
.verso-orari:focus-visible {
  outline: 3px solid var(--rosso);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Punti d'arrivo dei collegamenti che vengono dalle schede dei corsi.
   Non occupano spazio: servono solo a dire al browser dove fermarsi,
   abbastanza sotto perché la testata appiccicata non copra niente. */
.ancora-corso {
  display: block;
  height: 0;
}

/* Lo script porta sotto gli occhi la tabella (o il giorno) intera, non la
   singola casella: senza la riga dei giorni in cima non si capirebbe quando
   è. */

/* Le lezioni del corso su cui si è cliccato. Vale sia per le caselle
   della griglia del computer sia per le voci dell'elenco del telefono. */
.lezione.corso-acceso,
.voce.corso-acceso {
  /* sul fondo colorato il grigio chiaro non si leggerebbe abbastanza */
  --grigio: #4a423b;
  background: rgba(160, 40, 44, 0.09);
  box-shadow: inset 3px 0 0 var(--rosso);
  border-radius: 4px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
  animation: riga-raggiunta 1.4s ease-out 1;
}

.listino,
.scaglioni {
  list-style: none;
  margin: 0;
  padding: 0;
}

.riga-prezzo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid var(--grigio-chiaro);
}

.riga-prezzo:first-child { padding-top: 0; }

/* ============================================================
   DOVE SI FERMA UN COLLEGAMENTO
   Una regola sola per tutto: qualunque cosa abbia un id dentro la
   pagina è un possibile punto d'arrivo, comprese le sezioni a cui
   punta il menu. Griglie e giorni non hanno id ma ci arriva lo
   script, quindi stanno qui anche loro.
   ============================================================ */
main [id],
.sala-orari,
details.giorno {
  scroll-margin-top: var(--stacco);
}

/* :target = la riga indicata dall'indirizzo, cioè quella su cui si è
   appena cliccato. La regola con il + accende anche la seconda formula
   della stessa tariffa (Elena: 2 o 3 ingressi), che sta subito sotto. */
/* .riga-prezzo--accesa la mette lo script: sono le altre righe della
   stessa tariffa, compresi i pacchetti, che stanno in un altro elenco
   e quindi nessun selettore di vicinanza potrebbe raggiungere. */
.riga-prezzo:target,
.riga-prezzo:target + .riga-prezzo--variante,
.riga-prezzo:target + .riga-prezzo--variante + .riga-prezzo--variante,
.riga-prezzo--accesa {
  /* sul fondo colorato il grigio chiaro non si leggerebbe abbastanza:
     qui dentro --grigio diventa il grigio scuro, e tutti i testi
     piccoli della riga si adeguano da soli. */
  --grigio: #4a423b;
  background: rgba(160, 40, 44, 0.09);
  box-shadow: inset 3px 0 0 var(--rosso);
  border-radius: 4px;
  padding-left: 12px;
  padding-right: 12px;
  margin-left: -12px;
  margin-right: -12px;
  animation: riga-raggiunta 1.4s ease-out 1;
}

@keyframes riga-raggiunta {
  from { background: rgba(160, 40, 44, 0.28); }
  to   { background: rgba(160, 40, 44, 0.09); }
}

.riga-prezzo__cosa {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.riga-prezzo__corso {
  font-weight: 700;
  line-height: 1.3;
}

.riga-prezzo__chi {
  font-size: 0.85rem;
  color: var(--grigio);
}

.riga-prezzo__quanto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prezzo {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.prezzo__unita {
  margin-left: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grigio);
}

.riga-prezzo__extra {
  font-size: 0.85rem;
  color: var(--grigio);
}

/* Per i corsi senza quota mensile: al posto della cifra, il perché */
.prezzo-alternativo {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--grigio-scuro);
}

.scaglioni {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.scaglione {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: var(--bianco);
  border-left: 4px solid var(--rosso);
  border-radius: 0 var(--raggio) var(--raggio) 0;
  padding: 14px 18px;
  box-shadow: var(--ombra);
}

.scaglione__periodo { font-weight: 600; }

.scaglione__prezzo {
  font-size: 1.2rem;
  font-weight: 800;
  white-space: nowrap;
}

/* ============================================================
   COME SI COMINCIA
   ============================================================ */

.passi {
  list-style: none;
  counter-reset: passo;
  margin: 24px 0 30px;
  padding: 0;
  display: grid;
  gap: 18px;
}

.passo {
  counter-increment: passo;
  position: relative;
  padding-left: 52px;
}

.passo::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nero);
  color: var(--rosso);
  border-radius: 50%;
  font-weight: 800;
}

.passo__titolo {
  margin: 5px 0 5px;
  font-size: 1.05rem;
  font-weight: 800;
}

.passo__testo {
  margin: 0;
  color: var(--grigio-scuro);
  max-width: 60ch;
}

/* ---------- Contatti ---------- */

.sede__foto {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--raggio);
  margin-bottom: 20px;
  background: var(--grigio-chiaro);
}

.indirizzo {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 700;
}

.contatti { display: grid; gap: 10px; margin: 22px 0; }

.contatti a {
  display: block;
  background: var(--bianco);
  border-radius: var(--raggio);
  padding: 15px 18px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: var(--ombra);
}

.contatti a:hover { background: var(--rosso); color: var(--panna); }

.social { display: flex; flex-wrap: wrap; gap: 10px 22px; }

.social a { font-weight: 600; }

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

.piede {
  background: var(--nero);
  color: var(--grigio-chiaro);
  padding: 26px 0;
  margin-top: 20px;
}

/* Il link all'informativa privacy, sotto la riga legale: piu' piccolo
   di lei, perche' e' una pagina di servizio e non deve pesare. */
.piede__link {
  margin: 6px 0 0;
  font-size: 0.82rem;
}

.piede__link a {
  color: var(--grigio-chiaro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.piede__link a:hover { color: var(--bianco); }

.piede__legale {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
}

/* ============================================================
   Schermi più larghi
   ============================================================ */

@media (min-width: 700px) {
  .testata__interno {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* la testata su schermo largo tiene logo e nome affiancati */

  .menu { gap: 26px; }

  .hero {
    padding: 96px 0 104px;
    /* sotto i 700px basta la foto piccola: 39 KB invece di 134 */
    background-image: url("img/hero.jpg");
    /* da qui in su ci sta tutta la scena: si torna al centro */
    background-position: center;
  }

  .azioni {
    flex-direction: row;
    justify-content: center;
    gap: 14px;
  }

  .sezione { padding: 64px 0; }

  .sezione__titolo { font-size: 1.9rem; }

  .sale { grid-template-columns: 1fr 1fr; gap: 18px; }

  .valori { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .contatti { grid-template-columns: 1fr 1fr; }

  .istruttori { grid-template-columns: 1fr 1fr; gap: 20px; }

  .discipline { grid-template-columns: 1fr 1fr; gap: 18px; }


  .riga-prezzo {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
  }

  .riga-prezzo__quanto {
    align-items: flex-end;
    text-align: right;
    flex: 0 0 auto;
  }

  .scaglioni { grid-template-columns: 1fr 1fr; }

  .passi { grid-template-columns: repeat(3, 1fr); gap: 24px; }

  .scheda__foto,
  .scheda__iniziali { width: 78px; height: 78px; }

  /* da qui in su la testata sta su una riga sola: 81px invece di 159 */
  :root { --stacco: 120px; }
  /* Pagine dei corsi: la riga di menu sotto il logo alza la testata a
     129-164px. Vale solo senza JavaScript, che poi la misura davvero. */
  .corpo-corso { --stacco: 190px; }
}

@media (min-width: 1050px) {
  .istruttori { grid-template-columns: repeat(3, 1fr); }
  .discipline { grid-template-columns: repeat(3, 1fr); }
}

/* Da qui in su c'è spazio per le griglie settimanali */
@media (min-width: 900px) {
  .solo-telefono { display: none; }

  /* Da qui la settimana ci sta tutta e la tabella torna a riempire la
     colonna. Del suggerimento non c’è bisogno di occuparsi: lo accende lo
     script solo quando c’è davvero da scorrere, e qui non capita. */
  .griglia { width: 100%; min-width: 0; }
}

/* Chi preferisce meno animazioni non le subisce */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* la riga resta evidenziata, ma senza il lampo iniziale */
  .riga-prezzo:target,
  .riga-prezzo:target + .riga-prezzo--variante,
  .riga-prezzo:target + .riga-prezzo--variante + .riga-prezzo--variante,
  .riga-prezzo--accesa,
  .scheda:target,
  .lezione.corso-acceso,
  .voce.corso-acceso {
    animation: none;
  }
}

/* ---------- La tendina "Corsi" nel menu ---------- */

/* Questo 'relative' NON e' decorativo: senza, il pannello qui sotto si
   posiziona rispetto alla pagina intera e sporge oltre il bordo destro.
   E' esattamente il difetto che faceva scorrere il sito di lato. */
.menu__gruppo { position: relative; }

.menu__voce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;          /* via il triangolino di serie di <details> */
  cursor: pointer;
  color: var(--grigio-chiaro);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}

.menu__voce::-webkit-details-marker { display: none; }

.menu__voce:hover,
.menu__voce:focus-visible,
.menu__gruppo[open] > .menu__voce { color: var(--bianco); }

.menu__freccia {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.15s ease;
}

.menu__gruppo[open] .menu__freccia { transform: rotate(180deg); }

/* Centrato sotto la voce e con una larghezza massima legata allo schermo:
   su un telefono stretto non puo' finire fuori dal bordo. */
/* Attaccata al bordo sinistro della voce, non centrata su di lei: con
   «Corsi» in cima a sinistra sul telefono, meta' pannello finiva fuori
   dallo schermo e i nomi dei corsi si leggevano tagliati (visto su un
   Galaxy S24, 14/09/2026). Larghezza limitata allo schermo meno i
   margini, cosi' non esce nemmeno a destra. */
.menu__tendina {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: max-content;
  max-width: min(260px, calc(100vw - 24px));
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--nero-morbido);
  border: 1px solid var(--grigio-scuro);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
}

/* Ponte invisibile sui 10px di stacco fra "Corsi" e il pannello. Senza,
   il puntatore che scende verso le voci attraversa una striscia che non
   appartiene a .menu__gruppo: scatta mouseleave e la tendina aperta col
   mouse si richiude a meta' strada, prima di arrivare a "Boxe". */
.menu__tendina::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -11px; /* 10px di stacco + 1px di bordo del pannello */
  height: 11px;
}

.menu__tendina a {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  text-align: left;
}

.menu__tendina a:hover,
.menu__tendina a:focus {
  background: var(--grigio-scuro);
  color: var(--bianco);
}

.menu__tendina a[aria-current="page"] {
  background: var(--rosso);
  color: var(--panna);
}

/* Il rimando dalla scheda in home alla pagina del corso. */
.disciplina__oltre {
  margin: 12px 0 0;
  font-size: 0.92rem;
}

.disciplina__oltre a {
  color: var(--rosso);
  font-weight: 700;
  text-decoration: none;
}

.disciplina__oltre a:hover { text-decoration: underline; }

/* ---------- Pagine per corso ---------- */

.briciole {
  padding-top: 16px;
  font-size: 0.85rem;
  color: var(--grigio);
}

.briciole a { color: var(--grigio-scuro); }
.briciole span[aria-hidden] { margin: 0 6px; }
.briciole [aria-current] { color: var(--nero); font-weight: 600; }

.corso-testa { padding: 20px 0 34px; }

.corso-testa__occhiello {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rosso);
}

.corso-testa__titolo {
  margin: 0 0 14px;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.12;
}

.corso-testa__sommario {
  margin: 0 0 10px;
  max-width: 62ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--grigio-scuro);
}

.corso-testa__prova { margin: 0 0 22px; }

.corso-testa__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bottone--fantasma {
  border: 2px solid var(--nero);
  padding: 13px 22px; /* 15-2 e 24-2: il bordo non lo fa piu' alto degli altri */
  color: var(--nero);
}

.bottone--fantasma:hover {
  background: var(--nero);
  color: var(--panna);
}

.corso-quando { display: grid; gap: 20px; }

.corso-quando__blocco h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 800;
}

.corso-quando__righe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.corso-quando__righe li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 11px 14px;
  background: var(--bianco);
  border-left: 3px solid var(--rosso);
  border-radius: 0 10px 10px 0;
}

.corso-quando__righe b { font-weight: 700; }
/* :not(.etichetta): senza, questa regola catturava anche l'etichetta
   "in avvio" e la faceva grigio scuro su rosso (1,33:1, illeggibile). */
.corso-quando__righe span:not(.etichetta) { color: var(--grigio-scuro); }

.corso-quando__righe small {
  flex-basis: 100%;
  font-size: 0.85rem;
  color: var(--grigio);
}

/* La colonna del testo e' larga come le altre sezioni: il limite di
   lettura sta sui singoli blocchi, cosi' il bordo sinistro e' lo stesso
   di "Quando ci si allena" e di tutto il resto. Prima la colonna era
   stretta E centrata, e partiva 180px piu' a destra: era quello che
   Diego vedeva storto. */
.corso-blocco { max-width: 68ch; }

.corso-blocco + .corso-blocco { margin-top: 28px; }

.corso-blocco h2 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 800;
}

.corso-blocco p {
  margin: 0 0 12px;
  line-height: 1.7;
  color: var(--grigio-scuro);
}

.corso-blocco p:last-child { margin-bottom: 0; }

/* Un sottotitolo (h3) sta piu' vicino al blocco che lo precede: e' la
   continuazione di quello, non un capitolo nuovo. */
.corso-blocco + .corso-blocco--sotto { margin-top: 18px; }

.corso-blocco h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
  font-weight: 800;
}


/* La scheda di chi tiene il corso a sinistra, la sua presentazione a
   fianco. Sotto i 820px vanno una sopra l'altra: affiancare due colonne
   strette renderebbe illeggibili tutte e due. */
.corso-chi { display: grid; gap: 20px; }

/* Qui la scheda e' una sola: le colonne che .istruttori ha in home (2 da
   700px, 3 da 1050px) la stringerebbero a meta' larghezza — misurato
   197px in una colonna da 340. */
.corso-chi .istruttori { grid-template-columns: 1fr; }

.corso-chi__testo p {
  margin: 0 0 14px;
  max-width: 62ch;
  line-height: 1.7;
  color: var(--grigio-scuro);
}

.corso-chi__testo p:last-child { margin-bottom: 0; }

/* Le tariffe del corso. Stessa forma delle righe degli orari, cosi' la
   pagina ha un solo modo di elencare le cose. */
.corso-prezzi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 620px;
}

.corso-prezzi li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 14px;
  background: var(--panna);
  border-left: 3px solid var(--rosso);
  border-radius: 0 10px 10px 0;
}

.corso-prezzi b { font-weight: 700; }
.corso-prezzi span { margin-left: auto; color: var(--grigio-scuro); }

.corso-prezzi small {
  flex-basis: 100%;
  font-size: 0.85rem;
  color: var(--grigio);
}

.corso-prezzi__note {
  margin-top: 22px;
  max-width: 62ch;
}

.corso-prezzi__note h3 {
  margin: 18px 0 6px;
  font-size: 1rem;
  font-weight: 800;
}

.corso-prezzi__note h3:first-child { margin-top: 0; }

.corso-prezzi__note p {
  margin: 0 0 12px;
  line-height: 1.65;
  color: var(--grigio-scuro);
}

.corso-prezzi__note p:last-child { margin-bottom: 0; }

/* ---------- Il menu di pagina (pagine dei corsi) ---------- */

/* Una riga sotto il logo, separata da un filo. Sul telefono la riga piena
   sparisce e resta la tendina "In questa pagina"; dai 700px in su il
   contrario. Mai tutte e due insieme, cosi' i link non sono doppi. */
.menu-pagina {
  border-top: 1px solid var(--grigio-scuro);
  padding: 8px 0;
}

.menu-pagina__riga {
  display: none;
  flex-wrap: wrap;
  gap: 4px 22px;
}

.menu-pagina__riga a,
.menu__gruppo--pagina .menu__tendina a {
  color: var(--grigio-chiaro);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 4px 0;
}

.menu-pagina__riga a:hover,
.menu-pagina__riga a:focus { color: var(--bianco); }

/* La tendina di pagina si apre a sinistra, larga quanto serve alle voci. */
/* Largo quanto la scritta, non quanto la riga: se no, col mouse, la
   tendina si aprirebbe passando sullo spazio vuoto a destra. */
.menu__gruppo--pagina { display: block; width: max-content; }

.menu__gruppo--pagina .menu__tendina {
  left: 0;
  transform: none;
  min-width: 240px;
  max-width: min(360px, 90vw);
}

.menu__gruppo--pagina .menu__tendina a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
}

.menu__gruppo--pagina .menu__tendina a:hover,
.menu__gruppo--pagina .menu__tendina a:focus {
  background: var(--grigio-scuro);
  color: var(--bianco);
}

@media (min-width: 700px) {
  .menu-pagina__riga { display: flex; }
  .menu__gruppo--pagina { display: none; }
}

/* Foto e video della pagina del corso. */
.corso-foto { margin: 0 0 10px; }

.corso-foto img {
  width: 100%;
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.corso-foto figcaption,
.corso-video figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--grigio);
}

.corso-video { margin: 18px 0 0; }

/* Il video e' verticale (478x850). Senza un tetto, a tutta colonna
   sarebbe alto 1100px e si mangerebbe la pagina: 340px di larghezza
   bastano, ed e' anche piu' dei suoi pixel veri. */
.corso-video video {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: var(--raggio);
  background: var(--nero);
}

/* Nella pagina del corso le schede stanno su fondo panna: bianche, se no
   sparirebbero (in home stanno su fondo bianco ed e' il contrario). */
.pagina-corso .scheda { background: var(--bianco); }

.corso-rimando {
  margin: 18px 0 0;
  font-size: 0.95rem;
  line-height: 1.8;
}

.corso-rimando a { color: var(--rosso); font-weight: 600; }

@media (min-width: 700px) {
  .corso-testa__titolo { font-size: 2.6rem; }
  .corso-quando { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  /* Con un blocco solo la traccia si allarga a tutta la colonna e resta
     tre quarti vuota (misurato: 1060px per 235px di testo). Stesso tetto
     del listino, cosi' orari e prezzi finiscono alla stessa larghezza. */
  .corso-quando:has(> .corso-quando__blocco:only-child) { max-width: 620px; }
}

@media (min-width: 820px) {
  .corso-chi {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
}

/* ---------- Pagine dei corsi: una scheda per istruttore ---------- */

/* Quando il corso lo tengono in piu' persone (il Pilates: tre), orari,
   quota e pacchetti stanno insieme in una scheda per ognuna, col tasto per
   prenotare proprio con lei. Un elenco per disciplina piu' un listino
   piatto non legherebbero gli orari di Stella al prezzo di Stella. */
.offerte { display: grid; gap: 18px; }

/* Con una scheda sola non si allarga a tutta la colonna — sarebbe un metro
   di cartoncino per due righe. Stesso tetto degli orari e del listino. */
.offerte:has(> .offerta:only-child) { max-width: 620px; }

.offerta {
  display: flex;
  flex-direction: column;
  background: var(--bianco);
  border-radius: var(--raggio);
  padding: 18px 20px 20px;
  box-shadow: var(--ombra);
}

.offerta__nome { margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; }
/* Il nome resta rosso: era il colore del collegamento, ora e' del nome. */
.offerta__nome span { color: var(--rosso); }

.offerta .corso-quando__righe li { background: var(--panna); }

/* Orari e prezzi stanno nella stessa scheda, ma non devono sembrare un
   elenco solo: ogni gruppo ha il suo titoletto e i prezzi una riga sopra
   (Diego, 06/09/2026). */
.offerta__gruppo {
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grigio);
}

.offerta__gruppo--prezzi {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--grigio-chiaro);
}

.offerta__prezzi { margin-top: 0; max-width: none; }
/* Nella scheda stretta la quota va sempre a capo sotto il nome: su una
   riga ci starebbe solo qualche volta, e salterebbe da destra a sinistra. */
.offerta__prezzi span { margin-left: 0; flex-basis: 100%; }
.offerta__azione { margin: auto 0 0; padding-top: 14px; }

/* Due colonne da 760px; con tre schede l'ultima resterebbe sola a meta'
   riga, e allora si allarga. Da 1050px ognuna ha la sua colonna. */
@media (min-width: 760px) {
  .offerte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offerta:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1050px) {
  .offerte { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .offerta:last-child:nth-child(odd) { grid-column: auto; }
}

/* ---------- La presentazione dentro la scheda di chi tiene il corso ---------- */

/* Con piu' persone la presentazione di ognuna sta dentro la sua scheda: a
   fianco, in colonna, la prima riga si leggeva accanto alla terza faccia.
   Sparisce la colonna del testo e le schede si affiancano come in home.
   Sta in fondo al foglio perche' deve scavalcare le due colonne che
   .corso-chi prende da 820px in su. */
.corso-chi--dentro { grid-template-columns: 1fr; }

.corso-chi--dentro .istruttori { grid-template-columns: 1fr; margin-top: 0; }

/* Due colonne da 760px: con tre schede la terza resterebbe sola a meta'
   riga, e allora si allarga — come le schede degli orari. Tre da 1050px. */
@media (min-width: 760px) {
  .corso-chi--dentro .istruttori { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .corso-chi--dentro .scheda:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1050px) {
  .corso-chi--dentro .istruttori { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
  .corso-chi--dentro .scheda:last-child:nth-child(odd) { grid-column: auto; }
}

.scheda__presenta {
  margin: 0 0 14px;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--grigio-scuro);
}

/* La nota dell'istruttrice dentro la scheda degli orari: spiega
   l'etichetta «in avvio» proprio dove l'etichetta si vede. */
.offerta__nota {
  margin: 12px 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--grigio-scuro);
}