/* ---------------------------------------------------------------------
   La Bottega dell'Attore — foglio di stile del SITO PUBBLICO.

   E' separato apposta da `stile.css`, che veste il gestionale. Le due
   facce vivono sulla stessa cartella ma su due indirizzi diversi
   (www.bottegadellattore.it e gestionale.bottegadellattore.it) e devono
   poter cambiare una senza toccare l'altra.

   Il mondo visivo non e' inventato: e' quello delle locandine della
   Bottega — nero caldo, il rosso della maschera, l'oro dei titoli, la
   panna del testo. Per questo il sito e' scuro e basta, senza tema
   chiaro: un sito di teatro che di giorno diventa bianco perde la sala.
   --------------------------------------------------------------------- */

:root {
  --nero:      #0C0A0B;   /* nero caldo dei manifesti, non #000 */
  --nero-alto: #171315;   /* superfici sollevate */
  --nero-orlo: #2A2224;   /* bordi appena percepibili */
  --rosso:     #C8161F;   /* il rosso della maschera */
  --rosso-cupo:#8B1E2D;   /* lo stesso rosso del gestionale */
  --oro:       #DFA542;   /* l'oro dei titoli sulle locandine */
  --panna:     #F2EBE1;
  --fumo:      #9C8F89;   /* grigio caldo, piegato verso il rosso */

  --sp: clamp(20px, 5vw, 64px);
  --largh: 1140px;
}

* { box-sizing: border-box; }

/* Chi mette `hidden` vuole che sparisca, punto. Stessa regola del
   gestionale, e per lo stesso motivo: i link vestiti da bottone sono
   inline-block e senza questo restavano a video. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--nero);
  color: var(--panna);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

/* ---------- mattoni ---------- */

.fascia { padding: calc(var(--sp) * 1.15) var(--sp); }
.fascia-alta { background: var(--nero-alto); border-top: 1px solid var(--nero-orlo); border-bottom: 1px solid var(--nero-orlo); }
.dentro { max-width: var(--largh); margin: 0 auto; }

.occhiello {
  font-family: "Archivo Narrow", "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 10px;
}

h1, h2, h3, h4 {
  font-family: "Bodoni Moda", Didot, Georgia, "Times New Roman", serif;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
  line-height: 1.14;
}
h2 { font-size: clamp(28px, 4vw, 42px); }
h3 { font-size: 21px; }

p { margin: 0; }
.tenue { color: var(--fumo); }
.stretto { max-width: 62ch; }
.grande { font-size: 17px; }

.testata-fascia {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.oltre {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oro);
  text-decoration: none;
  border-bottom: 1px solid rgba(223, 165, 66, .45);
  padding-bottom: 2px;
  white-space: nowrap;
}
.oltre:hover { border-bottom-color: var(--oro); }

/* ---------- bottoni ---------- */

.bottone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.bottone-pieno { background: var(--rosso); color: #fff; }
.bottone-pieno:hover { background: #E01B25; }
.bottone-vuoto { border-color: rgba(242, 235, 225, .38); color: var(--panna); }
.bottone-vuoto:hover { border-color: var(--panna); background: rgba(242, 235, 225, .07); }
.bottone-oro { background: var(--oro); color: #1A1206; }
.bottone-oro:hover { background: #EFB755; }
.bottone-piccolo { padding: 9px 18px; font-size: 12.5px; }

/* ---------- barra in alto ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(12, 10, 11, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nero-orlo);
}
.barra-dentro {
  max-width: var(--largh);
  margin: 0 auto;
  padding: 12px var(--sp);
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Il marchio e' ritagliato dalle sole maschere del logo quadrato:
   il file ha il fondo nero e il resto della scritta sotto. Quando
   arrivera' il PNG trasparente bastera' sostituire l'immagine e
   togliere il ritaglio. */
.marchio { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.marchio-segno { width: 48px; height: 44px; position: relative; overflow: hidden; flex: none; }
.marchio-segno img { position: absolute; width: 124px; max-width: none; left: -37px; top: -26px; }
.marchio-nome {
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: .2px;
}
.marchio-sotto {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fumo);
}

.menu { display: flex; align-items: center; gap: 28px; }
.menu a {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--panna);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.menu a:hover { border-bottom-color: var(--rosso); }
.menu a[aria-current="page"] { border-bottom-color: var(--oro); color: var(--oro); }
.menu .area {
  border: 1px solid rgba(242, 235, 225, .3);
  border-radius: 2px;
  padding: 7px 15px;
}
.menu .area:hover { border-color: var(--oro); color: var(--oro); border-bottom-color: var(--oro); }

.panino {
  display: none;
  background: none;
  border: 1px solid rgba(242, 235, 225, .25);
  border-radius: 2px;
  color: var(--panna);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 8px 12px;
}

/* La tendina: sotto i 900 px le quattro voci in fila non ci stanno.
   Stessa scelta della navbar del gestionale, soglia diversa perche'
   qui le voci sono meno. */
@media (max-width: 900px) {
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--nero-alto);
    border-bottom: 1px solid var(--nero-orlo);
    padding: 6px 0;
  }
  .menu.aperto { display: flex; }
  .menu a {
    padding: 14px var(--sp);
    border-bottom: 1px solid var(--nero-orlo);
  }
  .menu a:last-child { border-bottom: 0; }
  .menu .area { border: 0; border-radius: 0; margin: 0; color: var(--oro); }
  .panino { display: block; }
  .barra-dentro { position: relative; }
  .marchio-nome { font-size: 17px; }
}

/* ---------- il sipario (la testata con le foto) ---------- */

.sipario {
  position: relative;
  min-height: 600px;
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--nero-orlo);
}
.sipario-corta { min-height: 360px; }

.sipario-foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* Con piu' di una foto si alternano lentamente. Con una sola resta ferma. */
.sipario-girella .sipario-foto { opacity: 0; animation: sipario-gira 24s infinite; }
.sipario-girella .sipario-foto:nth-of-type(1) { animation-delay: 0s; }
.sipario-girella .sipario-foto:nth-of-type(2) { animation-delay: 8s; }
.sipario-girella .sipario-foto:nth-of-type(3) { animation-delay: 16s; }
@keyframes sipario-gira {
  0%   { opacity: 0; transform: scale(1.06); }
  6%   { opacity: 1; }
  30%  { opacity: 1; }
  36%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sipario-girella .sipario-foto { animation: none; opacity: 0; }
  .sipario-girella .sipario-foto:nth-of-type(1) { opacity: 1; }
}

.sipario-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--nero) 2%, rgba(12, 10, 11, .88) 34%, rgba(12, 10, 11, .44) 70%, rgba(12, 10, 11, .74) 100%);
}

.sipario-testo {
  position: relative;
  max-width: var(--largh);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--sp) calc(var(--sp) * 1.15);
  display: grid;
  justify-items: start;
  gap: 18px;
}

/* Il logo ha il fondo nero: `screen` lo fa sparire sopra la foto. */
.lockup { width: 122px; margin-bottom: 2px; mix-blend-mode: screen; }

.sipario h1 { font-size: clamp(38px, 7vw, 76px); letter-spacing: -0.5px; }
.sipario h1 em { font-style: italic; color: var(--oro); }
.sipario-corta h1 { font-size: clamp(32px, 5.4vw, 54px); }

.stagione {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--panna);
  background: rgba(200, 22, 31, .9);
  padding: 6px 14px;
  border-radius: 2px;
}
.sipario-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* ---------- i manifesti (locandine grandi) ---------- */

.manifesti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .manifesti { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

.manifesto {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--nero-alto);
  border: 1px solid var(--nero-orlo);
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.manifesto:hover { border-color: var(--rosso); transform: translateY(-2px); }

.manifesto-foto { position: relative; background: #000; }
.manifesto-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; }
/* Il bollo sta SOTTO la locandina, non sopra: le locandine hanno il
   titolo in cima, e un'etichetta appoggiata li' copriva proprio quello. */
.manifesto-bollo {
  justify-self: start;
  font-family: "Archivo Narrow", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--rosso);
  color: #fff;
  padding: 4px 11px;
  border-radius: 2px;
}
.manifesto-bollo-oro { background: var(--oro); color: #1A1206; }

.manifesto-corpo { padding: 18px; display: grid; align-content: start; gap: 8px; }
.manifesto-corpo h3 { font-size: 23px; }
.manifesto-riga {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fumo);
}
.manifesto-riga b { color: var(--panna); font-weight: 600; }
.manifesto-nota { font-size: 14.5px; color: var(--fumo); }
.manifesto-freccia {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
  margin-top: 4px;
}

/* ---------- le date (il biglietto) ---------- */

.date { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 800px) { .date { grid-template-columns: 1fr; } }

.biglietto {
  display: grid;
  grid-template-columns: 88px 1fr;
  background: var(--nero-alto);
  border: 1px solid var(--nero-orlo);
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.biglietto:hover { border-color: var(--rosso); transform: translateY(-2px); }

.biglietto-data {
  background: var(--rosso-cupo);
  padding: 16px 10px;
  text-align: center;
  display: grid;
  align-content: center;
  gap: 1px;
  border-right: 1px dashed rgba(242, 235, 225, .3);
}
.biglietto-giorno {
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.biglietto-mese {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242, 235, 225, .85);
}
.biglietto-sett {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 235, 225, .62);
  margin-top: 4px;
}
.biglietto-corpo { padding: 15px 18px; display: grid; align-content: start; gap: 6px; }
.biglietto-corpo h3 { font-size: 21px; }
.biglietto-piede { margin-top: 5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prezzo { font-family: "Archivo Narrow", sans-serif; font-size: 13px; font-weight: 600; color: var(--panna); }

.pillola {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pillola-prenota { background: rgba(223, 165, 66, .16); color: var(--oro); border: 1px solid rgba(223, 165, 66, .38); }
.pillola-ultimi  { background: rgba(200, 22, 31, .18); color: #FF8A8A; border: 1px solid rgba(200, 22, 31, .5); }
.pillola-cassa   { background: rgba(156, 143, 137, .12); color: var(--fumo); border: 1px solid rgba(156, 143, 137, .3); }

/* ---------- l'invito ai soci ---------- */

.soci {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--nero-alto);
  border-top: 1px solid var(--nero-orlo);
  border-bottom: 1px solid var(--nero-orlo);
}
.soci-foto { position: absolute; inset: 0; left: 38%; background-size: cover; background-position: center 34%; z-index: 0; }
.soci::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, var(--nero-alto) 0 44%, rgba(23, 19, 21, .84) 62%, rgba(23, 19, 21, .38) 100%);
}
.soci > .dentro { position: relative; z-index: 2; }
.soci-dentro { display: grid; gap: 20px; max-width: 620px; }
.soci ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.soci li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.soci li span:first-child { color: var(--rosso); font-size: 17px; line-height: 1.45; }
.soci-azioni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gia-socio { font-family: "Archivo Narrow", sans-serif; font-size: 13px; letter-spacing: .05em; color: var(--fumo); }
.gia-socio a { color: var(--oro); }

/* ---------- riquadri di testo ---------- */

.due-colonne { display: grid; grid-template-columns: 1.05fr 1fr; gap: calc(var(--sp) * .9); align-items: center; }
.due-colonne.rovescia > :first-child { order: 2; }
@media (max-width: 860px) {
  .due-colonne { grid-template-columns: 1fr; }
  .due-colonne.rovescia > :first-child { order: 0; }
}
.due-colonne img { border-radius: 2px; border: 1px solid var(--nero-orlo); }
.colonna-testo { display: grid; gap: 16px; justify-items: start; }

.numeri { display: flex; gap: 34px; flex-wrap: wrap; }
.numero b {
  display: block;
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
}
.numero span {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fumo);
}

/* ---------- le classi del laboratorio ---------- */

.classi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 800px) { .classi { grid-template-columns: 1fr; } }

.classe {
  background: var(--nero-alto);
  border: 1px solid var(--nero-orlo);
  border-left: 3px solid var(--rosso-cupo);
  border-radius: 2px;
  padding: 22px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.classe-eta {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
}
.classe h3 { font-size: 24px; }
.classe-orario {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--panna);
  font-variant-numeric: tabular-nums;
}
.classe-materie { font-size: 14.5px; color: var(--fumo); }
.classe-chi {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fumo);
  border-top: 1px solid var(--nero-orlo);
  padding-top: 10px;
  margin-top: 2px;
}

/* ---------- riquadro evidenziato (open day, avvisi) ---------- */

.riquadro-oro {
  border: 1px solid rgba(223, 165, 66, .4);
  background: rgba(223, 165, 66, .07);
  border-radius: 2px;
  padding: 22px 24px;
  display: grid;
  gap: 10px;
  justify-items: start;
}
.riquadro-oro h3 { color: var(--oro); }

/* ---------- galleria ---------- */

.galleria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .galleria { grid-template-columns: repeat(2, 1fr); } }
.galleria img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; border: 1px solid var(--nero-orlo); }

/* ---------- elenco di dati (contatti, dove siamo) ---------- */

.schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .schede { grid-template-columns: 1fr; } }
.scheda {
  background: var(--nero-alto);
  border: 1px solid var(--nero-orlo);
  border-radius: 2px;
  padding: 22px;
  display: grid;
  gap: 9px;
  align-content: start;
}
.scheda h3 { font-size: 20px; }
.scheda p, .scheda a { font-size: 15px; color: var(--fumo); text-decoration: none; }
.scheda a:hover { color: var(--panna); }
.scheda strong { color: var(--panna); font-weight: 600; }

/* ---------- messaggi ---------- */

.avviso {
  border: 1px solid var(--nero-orlo);
  border-left: 3px solid var(--oro);
  background: var(--nero-alto);
  border-radius: 2px;
  padding: 16px 20px;
  color: var(--fumo);
}
.avviso b { color: var(--panna); }
.in-attesa { color: var(--fumo); padding: 30px 0; text-align: center; }

/* ---------- il piede ---------- */

.piede { background: #080607; border-top: 1px solid var(--nero-orlo); }
.piede-griglia { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 30px; }
@media (max-width: 760px) { .piede-griglia { grid-template-columns: 1fr; } }
.piede h4 {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 12px;
}
.piede p, .piede a, .piede li { font-size: 14.5px; color: var(--fumo); text-decoration: none; }
.piede a:hover { color: var(--panna); }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.piede-fondo {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--nero-orlo);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #5E5450;
}
.piede-fondo a { font-size: 12.5px; color: #5E5450; }

/* ---------------------------------------------------------------------
   Moduli (iscrizione, prenotazione)

   Stesso mondo delle altre pagine, ma piu' sobrio: qui non si guarda, si
   compila. Le caselle stanno strette, i riquadri non hanno ombre ne'
   bordi grossi, e il gruppo si riconosce dall'etichetta sopra, non da una
   cornice.

   Tutto e' chiuso dentro `.modulo-pubblico` perche' `campi-socio.js` —
   che serve anche al gestionale — stampa una classe `due-colonne` che qui
   esiste gia', e vuol dire un'altra cosa (l'impaginazione a due colonne
   delle pagine). Senza questo confine i campi del modulo si spargerebbero
   come una sezione di pagina.
   --------------------------------------------------------------------- */

.modulo-pubblico { max-width: 680px; margin: 0 auto; }

.modulo-pubblico .gruppo-campi {
  border: 0;
  border-top: 1px solid var(--nero-orlo);
  margin: 0;
  padding: 20px 0 0;
  display: grid;
  gap: 14px;
}
.modulo-pubblico .gruppo-campi:first-of-type { border-top: 0; padding-top: 0; }

.modulo-pubblico .gruppo-campi > legend {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  padding: 0;
  margin: 0 0 2px;
  float: left;      /* `legend` non partecipa alla griglia: lo si toglie di mezzo */
  width: 100%;
}

/* Le caselle si affiancano finche' ci stanno, poi vanno a capo da sole:
   cognome accanto a nome, CAP accanto a provincia. Su una colonna sola
   il modulo diventava una colonna lunghissima da scorrere. */
.modulo-pubblico .due-colonne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 14px;
  align-items: start;
  max-width: none;
}
.modulo-pubblico .due-colonne.rovescia > :first-child { order: 0; }

.modulo-pubblico .campo { display: grid; gap: 5px; }

.modulo-pubblico label {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fumo);
}
.modulo-pubblico .obbligatorio { color: var(--rosso); }

.modulo-pubblico input[type="text"],
.modulo-pubblico input[type="email"],
.modulo-pubblico input[type="tel"],
.modulo-pubblico input[type="date"],
.modulo-pubblico select,
.modulo-pubblico textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--nero);
  color: var(--panna);
  border: 1px solid var(--nero-orlo);
  border-radius: 2px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.35;
}
.modulo-pubblico input:focus,
.modulo-pubblico select:focus,
.modulo-pubblico textarea:focus {
  outline: none;
  border-color: var(--oro);
}
.modulo-pubblico textarea { resize: vertical; min-height: 64px; }
/* Il calendario del browser e' nero su nero se non lo si schiarisce. */
.modulo-pubblico input[type="date"] { color-scheme: dark; }

.modulo-pubblico .aiuto-campo {
  font-size: 12.5px;
  line-height: 1.4;
  color: #7E736F;
}

/* I consensi sono righe da leggere, non caselle da infilare in griglia. */
.modulo-pubblico .elenco-consensi { display: grid; gap: 11px; }
.modulo-pubblico .campo-consenso {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: start;
  font-family: "Archivo", sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--panna);
  cursor: pointer;
}
.modulo-pubblico .campo-consenso input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--rosso);
  cursor: pointer;
}

/* I testi legali: chiusi, perche' sono lunghi e quasi nessuno li apre —
   ma devono esserci, e devono potersi leggere per intero. */
.modulo-pubblico details {
  border: 1px solid var(--nero-orlo);
  border-radius: 2px;
  padding: 11px 14px;
}
.modulo-pubblico details + details { margin-top: 8px; }
.modulo-pubblico summary {
  cursor: pointer;
  font-family: "Archivo Narrow", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fumo);
}
.modulo-pubblico summary:hover { color: var(--panna); }
.modulo-pubblico .testo-legale {
  margin-top: 10px;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fumo);
}

.modulo-pubblico .bottone { width: 100%; justify-content: center; }
@media (min-width: 520px) { .modulo-pubblico .bottone { width: auto; } }

.messaggio-errore {
  border: 1px solid rgba(200, 22, 31, .5);
  border-left: 3px solid var(--rosso);
  background: rgba(200, 22, 31, .1);
  border-radius: 2px;
  padding: 14px 18px;
  color: #FFC9C9;
}

/* ---------------------------------------------------------------------
   Le pagine che sono un modulo (iscrizione, prenotazione)

   Il resto del sito e' scuro perche' e' una sala: si guarda, e il buio
   fa risaltare le locandine. Qui invece si compila, e il nero pieno
   diventa severo — sembra un sistema, non un'associazione che ti sta
   aspettando.

   Quindi: sotto tutto una foto di scena calda, ferma, molto abbassata,
   che toglie il fondo piatto e mette un po' di luce; sopra, il modulo su
   una superficie sollevata invece che sul vuoto; e le caselle appena
   schiarite, non nere su nero.
   --------------------------------------------------------------------- */

/* La foto sta nello sfondo della TESTATA, non in un livello `fixed` dietro
   tutta la pagina. Una foto fissa dietro a un modulo lungo dava piu'
   calore, ma `background-attachment: fixed` su iOS o non si applica o
   scatta, e un livello sovrapposto alto quanto il documento e' lavoro
   inutile per il telefono. Qui la foto scorre con la pagina come tutto
   il resto, e sotto la testata continua un alone caldo: stessa luce,
   nessuna acrobazia.

   (Nota per chi legge la storia dei commit: il primo tentativo fu tolto
   accusandolo di far diventare nera la schermata scorrendo. Non era vero
   — era l'anteprima con cui guardavo a non disegnare le schermate
   scorrute, e succedeva anche sulla home, che sta benissimo. Il fondo
   fisso resta fuori per i motivi veri scritti sopra.) */

.pagina-modulo .piede { background: #080607; }

/* La testata: la foto e il velo caldo stanno nello stesso sfondo, in due
   livelli. Il velo si chiude sul nero della pagina, cosi' la fascia
   sotto attacca senza una riga di stacco. */
.testata-modulo {
  background-image:
    linear-gradient(to bottom,
      rgba(34, 18, 15, .58) 0%,
      rgba(20, 13, 13, .86) 62%,
      rgba(12, 10, 11, .99) 100%),
    url("../media/foto-applausi.jpg");
  background-size: cover, cover;
  background-position: center, center 30%;
  background-repeat: no-repeat;
}

/* Poco spazio sopra e sotto: la navbar, il banner e il foglio del modulo
   devono leggersi come un blocco solo, non come tre cose lontane. */
.testata-modulo { padding: calc(var(--sp) * .7) var(--sp) calc(var(--sp) * .8); }
.testata-modulo .dentro { max-width: 680px; display: grid; gap: 7px; }
.testata-modulo h1 { font-size: clamp(32px, 5vw, 46px); }
.testata-modulo .benvenuto { font-size: 17px; color: rgba(242, 235, 225, .88); }

/* I tre passi: dice quanto e' lungo il giro prima di cominciarlo. */
.passi {
  display: flex;
  gap: 10px 22px;
  flex-wrap: wrap;
  font-family: "Archivo Narrow", sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(242, 235, 225, .72);
  margin-top: 4px;
}
.passi b { color: var(--oro); font-weight: 700; }

/* Un alone caldo che scende dalla testata sulla prima parte del modulo,
   cosi' il nero non riparte di colpo. In flusso normale, nessun livello
   sovrapposto. */
.pagina-modulo .fascia {
  padding-top: calc(var(--sp) * .55);
  background: linear-gradient(to bottom, rgba(72, 38, 28, .16), rgba(12, 10, 11, 0) 340px);
}

/* Il foglio su cui si scrive. Sollevato dal fondo, non incollato.
   Senza `backdrop-filter`: a fondo semiopaco al 90% la sfocatura dietro
   non si vede, e su un foglio alto quanto un modulo intero costa lavoro
   al telefono per niente. */
.carta {
  background: rgba(28, 22, 23, .90);
  border: 1px solid rgba(242, 235, 225, .11);
  border-radius: 4px;
  padding: clamp(22px, 4vw, 38px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

/* Le caselle: schiarite quel tanto che basta a vederne il bordo senza
   accendere la pagina. Nere su nero sembravano buchi. */
.modulo-pubblico input[type="text"],
.modulo-pubblico input[type="email"],
.modulo-pubblico input[type="tel"],
.modulo-pubblico input[type="date"],
.modulo-pubblico select,
.modulo-pubblico textarea {
  background: rgba(242, 235, 225, .06);
  border-color: rgba(242, 235, 225, .18);
}
.modulo-pubblico input:focus,
.modulo-pubblico select:focus,
.modulo-pubblico textarea:focus {
  border-color: var(--oro);
  background: rgba(242, 235, 225, .09);
}
.modulo-pubblico label { color: #BFB2AB; }
.modulo-pubblico .gruppo-campi { border-top-color: rgba(242, 235, 225, .1); }
.modulo-pubblico details { border-color: rgba(242, 235, 225, .13); }
.modulo-pubblico .aiuto-campo { color: #93867F; }

/* Una striscia di foto sotto il modulo: si e' appena scritto il proprio
   nome, ed e' il momento giusto per far vedere dove si sta entrando. */
.striscia-foto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 30px;
}
.striscia-foto img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid rgba(242, 235, 225, .1);
}
@media (max-width: 560px) {
  .striscia-foto { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* ---------- Campi da correggere ----------
   Il rosso sta sul campo, non solo in un elenco in cima: chi compila
   deve vedere dove mettere le mani, non leggere e poi cercare. */

.modulo-pubblico .campo-errore input,
.modulo-pubblico .campo-errore select,
.modulo-pubblico .campo-errore textarea {
  border-color: var(--rosso);
  background: rgba(200, 22, 31, .10);
}
.modulo-pubblico .campo-errore label { color: #FF9C9C; }
.modulo-pubblico .campo-errore input[type="checkbox"] { outline: 2px solid var(--rosso); outline-offset: 3px; }

/* Il consenso non e' un `.campo`: la riga rossa gli sta accanto. */
.modulo-pubblico .campo-consenso.campo-errore {
  border-left: 2px solid var(--rosso);
  padding-left: 10px;
  margin-left: -12px;
}

.modulo-pubblico .nota-errore { color: #FF9C9C; }

/* Il consenso e' una griglia di due colonne — casella e testo — e la
   riga d'errore, aggiunta in fondo, cadeva nella colonna da 20 px della
   casella: «Serve / la / tua / spunta.» Deve prenderle tutte e due. */
.modulo-pubblico .campo-consenso .nota-errore { grid-column: 1 / -1; margin-top: 2px; }

/* ---------- Le tendine ----------
   La tendina che si apre da un `select` la disegna il sistema, non la
   pagina: prendeva il testo chiaro dichiarato qui e lo stendeva sul
   bianco suo, quindi «Madre, Padre, Tutore» c'erano ma non si vedevano —
   si apriva una lista vuota. `color-scheme: dark` dice al browser di
   disegnarla scura; i colori sulle `option` servono a chi non lo ascolta. */
.modulo-pubblico select { color-scheme: dark; }
.modulo-pubblico select option {
  background: #1C1617;
  color: var(--panna);
}

/* Una spunta e un campo di testo lungo, dentro una griglia di colonne
   strette, stanno male a meta' riga: se la prendono tutta. */
.modulo-pubblico .due-colonne > .campo-consenso,
.modulo-pubblico .due-colonne > .campo-largo { grid-column: 1 / -1; }
.modulo-pubblico .due-colonne > .campo-consenso { margin: 2px 0 4px; }