/* ============================================================================
   corsi-fotografia-verona.it
   Impianto: barra con menù (come leadanza.it) · apertura a soglia (il Gesto,
   Orietta 2A) · fondo che vira scorrendo, foto sparse in parallasse e due porte
   affiancate (landonorris.com).
   Tutto scritto a mano: nessuna libreria, nessun video in apertura.
   ========================================================================= */

:root{
  /* i due mondi fra cui il sito vira mentre scorri */
  --scuro:#22261c;          /* verde militare, il fondo dell'apertura */
  --scuro-2:#2b3024;
  --crema:#eae7dd;          /* il fondo in cui si arriva */
  --inchiostro:#14160f;
  --verde:#96c222;          /* l'accento: il verde del marchio */
  --verde-cupo:#6f9219;

  /* colori vivi, ricalcolati dal JS mentre si scorre */
  --fondo:var(--scuro);
  --testo:#f2f1ea;
  --tenue:#9aa08c;
  --filo:rgba(242,241,234,.16);

  --lato:clamp(1.25rem,5vw,5.5rem);
  --aria:clamp(5rem,13vh + 4vw,13rem);
  --tempo:.6s cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0;background:var(--fondo);color:var(--testo);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:400;font-size:clamp(1rem,.5vw + .9rem,1.12rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;
  transition:background-color .5s linear,color .5s linear;
  /* clip, NON hidden: hidden crea un contesto di scorrimento e disinnesca
     la rotaia appiccicata del percorso (trappola già pagata il 28/08/2026) */
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--verde);color:#14160f}

/* i titoloni: grottesco largo e pesante */
.mega,h1,h2{
  font-family:Archivo,Impact,"Haettenschweiler",sans-serif;
  font-weight:800;font-stretch:112%;
  line-height:.92;letter-spacing:-.025em;margin:0;text-transform:uppercase;
  text-wrap:balance;
}
/* le frasi che parlano in prima persona: serif inclinato */
.dettato{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-style:italic;
         text-transform:none;letter-spacing:-.01em;line-height:1.1}

.salta{position:absolute;left:-9999px}
.salta:focus{left:var(--lato);top:1rem;z-index:99;background:var(--verde);color:#14160f;padding:.6rem 1rem}

/* ---------------------------------------------------------------- barra */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.1rem var(--lato);
  transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s,background-color .4s,backdrop-filter .4s;
}
/* appena si scorre la barra si appoggia su un fondo suo: sopra una foto,
   le voci del menù da sole non si leggono */
.barra.posata{
  background:color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--filo);
}
.barra.via{transform:translateY(-130%);opacity:0}
.marchio{
  font-family:Archivo,sans-serif;font-weight:800;font-stretch:112%;text-transform:uppercase;
  font-size:clamp(1rem,1.5vw,1.35rem);line-height:.88;letter-spacing:-.02em;
  text-decoration:none;color:var(--testo);
}
.marchio small{display:block;font-weight:400;font-stretch:100%;font-size:.5em;letter-spacing:.14em;
               color:var(--tenue);margin-top:.35rem}

.menu{display:flex;align-items:center;gap:.5rem}
.menu-voci{display:flex;list-style:none;margin:0;padding:0}
.menu-voci > li{position:relative}
.menu-voci > li > a,.menu-voci > li > button{
  display:block;font:inherit;font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--testo);background:none;border:0;cursor:pointer;padding:.7rem 1.05rem;text-decoration:none;
}
.menu-voci > li > a::after,.menu-voci > li > button::after{
  content:"";display:block;height:2px;background:var(--verde);
  transform:scaleX(0);transform-origin:left;transition:transform var(--tempo);margin-top:.28rem;
}
.menu-voci > li:hover > a::after,.menu-voci > li:hover > button::after,
.menu-voci > li:focus-within > a::after,.menu-voci > li:focus-within > button::after{transform:scaleX(1)}
.freccina{display:inline-block;margin-left:.4rem;font-size:.7em;transition:transform var(--tempo)}
.menu-voci > li:hover .freccina{transform:rotate(180deg)}

/* le tendine, come su leadanza.it */
.tendina{
  position:absolute;top:100%;left:0;min-width:20rem;
  background:var(--inchiostro);border:1px solid rgba(242,241,234,.14);
  list-style:none;margin:0;padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(-.5rem);
  transition:opacity .28s,transform .28s,visibility .28s;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.menu-voci > li:hover .tendina,.menu-voci > li:focus-within .tendina{opacity:1;visibility:visible;transform:none}
.tendina a{
  display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;
  padding:.6rem .8rem;text-decoration:none;color:#f2f1ea;font-size:.95rem;
  transition:background .2s,padding-left .2s;
}
.tendina a:hover{background:rgba(150,194,34,.14);padding-left:1.15rem}
.tendina .q{color:#9aa08c;font-size:.8rem;white-space:nowrap}

.bottone{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--verde);color:#14160f;text-decoration:none;
  font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.85rem 1.4rem;border-radius:8px;border:0;cursor:pointer;
  transition:transform var(--tempo),background var(--tempo);
}
.bottone:hover{transform:translateY(-2px);background:#a8d827}
.panino{
  display:none;width:3.1rem;height:3.05rem;border:1px solid var(--filo);border-radius:8px;
  background:none;cursor:pointer;color:var(--testo);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.panino i{display:block;width:19px;height:2px;background:currentColor;transition:transform .3s,opacity .3s}
body.aperto .panino i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.aperto .panino i:nth-child(2){opacity:0}
body.aperto .panino i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1080px){
  .menu-voci{display:none}
  .panino{display:flex}
}
@media (max-width:560px){
  .marchio small{display:none}   /* a capo brutto su schermo stretto */
  .bottone{padding:.8rem 1.05rem;font-size:.75rem}
}

/* il pannello a tutto schermo */
.pannello{
  position:fixed;inset:0;z-index:35;background:var(--inchiostro);color:#f2f1ea;
  padding:6.5rem var(--lato) 3rem;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-2%);
  transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1),visibility .4s;
}
body.aperto .pannello{opacity:1;visibility:visible;transform:none}
body.aperto{overflow:hidden}
.pannello-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:2.5rem 3rem;max-width:78rem}
.pannello h3{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tenue);
             margin:0 0 1.1rem;font-weight:600}
.pannello ul{list-style:none;margin:0;padding:0}
.pannello li a{
  display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid rgba(242,241,234,.1);text-decoration:none;
  font-size:1.05rem;transition:padding-left .25s,color .25s;
}
.pannello li a:hover{padding-left:.6rem;color:var(--verde)}
.pannello .q{color:var(--tenue);font-size:.82rem;white-space:nowrap}

/* ---------------------------------------------------------------- la soglia */
.soglia{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(7rem,16vh,11rem) var(--lato) var(--lato);overflow:hidden;
}
.soglia-foto{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center 42%;
  transform:scale(1.14);
  animation:respiro 22s ease-out forwards;
}
@keyframes respiro{to{transform:scale(1)}}
.soglia::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(34,38,28,.9) 0%,rgba(34,38,28,.42) 30%,
              rgba(34,38,28,.55) 55%,rgba(34,38,28,.97) 100%);
}
.soglia-dentro{position:relative;z-index:2;width:100%}
.soglia-eti{
  display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#e4e5db;margin:0 0 auto;
  text-shadow:0 1px 18px rgba(0,0,0,.8);
}
.soglia-eti span{display:block;width:2.5rem;height:1px;background:var(--verde)}
.soglia h1{
  /* la riga piu' lunga e' «a fotografare»: 13 caratteri. La misura si lega a
     quella, non al gusto, se no esce dallo schermo. */
  font-size:min(clamp(2.4rem,7.4vw,8.2rem), 13.2vw);
  margin:0 0 1.8rem;
}
.soglia h1 .riga{display:block;overflow:hidden}
.soglia h1 .riga > span{display:block;transform:translateY(105%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.soglia.viva h1 .riga > span{transform:none}
.soglia h1 .riga:nth-child(2) > span{transition-delay:.11s}
.soglia h1 .riga:nth-child(3) > span{transition-delay:.22s}
.soglia .sotto{
  display:flex;flex-wrap:wrap;align-items:center;gap:2.5rem;justify-content:space-between;
  border-top:1px solid rgba(242,241,234,.22);padding-top:1.8rem;
  opacity:0;transform:translateY(1.2rem);transition:opacity .8s .5s,transform .8s .5s;
}
.soglia.viva .sotto{opacity:1;transform:none}
.soglia .sotto p{margin:0;max-width:34ch;color:#dcdccf}
.entra{
  display:inline-flex;align-items:center;gap:1rem;text-decoration:none;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--testo);
}
.entra .cerchio{
  width:4.4rem;height:4.4rem;border:1px solid var(--verde);border-radius:50%;
  display:grid;place-items:center;color:var(--verde);font-size:1.3rem;
  transition:background var(--tempo),color var(--tempo),transform var(--tempo);
}
.entra:hover .cerchio{background:var(--verde);color:#14160f;transform:translateY(4px)}

/* ---------------------------------------------------------------- manifesto */
.manifesto{padding:calc(var(--aria) * 1.15) var(--lato);max-width:66rem}
.manifesto p{
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-size:clamp(1.9rem,4.6vw,4.1rem);line-height:1.12;margin:0;letter-spacing:-.015em;
}
/* il segno tirato a mano sopra una parola, come il cerchio giallo di Lando */
.segnata{position:relative;white-space:nowrap;font-style:normal}
.segnata svg{
  position:absolute;left:-5%;top:-16%;width:110%;height:132%;overflow:visible;pointer-events:none;
}
.segnata svg path{
  fill:none;stroke:var(--verde);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.3s cubic-bezier(.6,.05,.25,1) .25s;
}
/* il segno si tira quando la sezione entra in scena: nella home-percorso
   la parola segnata sta nel capitolo finale, non più nel manifesto */
.manifesto.viva .segnata svg path,
.capitolo.viva .segnata svg path{stroke-dashoffset:0}

/* ---------------------------------------------------------------- due porte */
/* Quattro colonne vere: [foto] [testo] [testo] [foto]. Le foto sono colonne,
   non riquadri sovrapposti, così non possono coprire i titoli per costruzione;
   l'entrata dai lati resta, ed è solo una traslazione. */
.porte{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr);
  align-items:stretch;gap:0;padding:clamp(2.5rem,7vh,6rem) 0;overflow:hidden;
}
.porte-lato{min-height:min(64svh,34rem);background-size:cover;background-position:center}
.porte-lato.sx{grid-column:1;transform:translateX(-102%);transition:transform 1.25s cubic-bezier(.16,1,.3,1)}
.porte-lato.dx{grid-column:4;transform:translateX(102%);transition:transform 1.25s cubic-bezier(.16,1,.3,1) .12s}
.porte.viva .porte-lato{transform:none}
.porta{
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:clamp(2rem,4vw,4rem) clamp(1rem,2.5vw,2.5rem);
}
.porta h2{font-size:clamp(1.55rem,3.1vw,2.9rem);margin:0 0 1rem;text-wrap:balance}
.porta p{margin:0 0 2rem;max-width:26ch;color:var(--testo);opacity:.72}

@media (max-width:900px){
  .porte{grid-template-columns:1fr;gap:0}
  .porte-lato{min-height:34svh;transform:none !important}
  .porte-lato.sx{grid-column:1;grid-row:1}
  .porta:nth-of-type(1){grid-row:2}
  .porta:nth-of-type(2){grid-row:4}
  .porte-lato.dx{grid-column:1;grid-row:3}
  .porta{padding:2.5rem var(--lato) 3rem}
}

/* ---------------------------------------------------------------- l'elenco */
.sezione{padding:var(--aria) 0 0}
.testata{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding:0 var(--lato);margin-bottom:clamp(2.5rem,6vw,5rem);
}
.testata h2{font-size:clamp(1.9rem,5.5vw,4.6rem)}
.testata .conto{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue)}

.sfondo{
  position:fixed;inset:0;z-index:-1;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform 7s linear;
  pointer-events:none;
}
.sfondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,22,15,.9),rgba(20,22,15,.35) 60%,rgba(20,22,15,.8))}
body.foto-viva .sfondo{opacity:1;transform:scale(1)}

.elenco{list-style:none;margin:0;padding:0;border-top:1px solid var(--filo)}
.elenco .riga{border-bottom:1px solid var(--filo);position:relative}
.elenco a{
  display:grid;grid-template-columns:4.5rem 1fr auto auto;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.6rem,4.2vw,3.1rem) var(--lato);
  text-decoration:none;transition:opacity var(--tempo),padding-left var(--tempo);
}
.riga-n{font-size:.75rem;letter-spacing:.14em;color:var(--tenue);font-variant-numeric:tabular-nums}
.riga-nome{
  font-family:Archivo,sans-serif;font-weight:700;font-stretch:110%;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.98;font-size:clamp(1.35rem,4.6vw,3.5rem);
}
.riga-dati{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;text-align:right}
.riga-quando{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue);white-space:nowrap}
.riga-quota{font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}
.riga-invito{
  display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--verde);
  opacity:0;transform:translateX(-.7rem);transition:opacity var(--tempo),transform var(--tempo);
}

@media (hover:hover) and (min-width:901px){
  .elenco:hover a{opacity:.26}
  .elenco a:hover,.elenco a:focus-visible{opacity:1;padding-left:calc(var(--lato) + 1.4rem)}
  .elenco a:hover .riga-invito,.elenco a:focus-visible .riga-invito{opacity:1;transform:none}
  .elenco a:hover .riga-nome{text-shadow:0 2px 44px rgba(0,0,0,.92)}
  .elenco .riga:has(a:hover)::before,.elenco .riga:has(a:focus-visible)::before{
    content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--verde)}
}
@media (max-width:900px),(hover:none){
  .elenco a{grid-template-columns:1fr;gap:.55rem;padding:1.5rem var(--lato) 1.7rem;min-height:10rem;align-content:center}
  .elenco .riga{isolation:isolate}
  .elenco .riga::before{content:"";position:absolute;inset:0;z-index:-2;
    background-image:var(--foto);background-size:cover;background-position:center}
  .elenco .riga::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(90deg,rgba(20,22,15,.93) 32%,rgba(20,22,15,.48))}
  .riga-nome{text-shadow:0 2px 26px rgba(0,0,0,.9);max-width:12ch}
  .riga-dati{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:1rem;text-align:left}
  .riga-invito{opacity:1;transform:none;margin-top:.35rem}
  .riga-n{display:none}
}

/* ------------------------------------------------------- galleria sparsa */
.galleria{position:relative;padding:calc(var(--aria) * 1.2) 0;overflow:hidden}
.galleria-intro{padding:0 var(--lato);max-width:40rem;margin-bottom:clamp(2rem,5vh,4rem)}
.galleria-intro h2{font-size:clamp(1.8rem,5vw,4rem);margin-bottom:1.2rem}
.galleria-intro p{color:var(--tenue);margin:0}
.sparse{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2.5rem,7vh,6rem) 1rem;
        padding:0 var(--lato)}
.pezzo{position:relative}
.pezzo figcaption{
  font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--tenue);
  margin:0 0 .7rem;font-weight:600;
}
.pezzo img{width:100%;opacity:0;transform:translateY(2.5rem) scale(1.03);
           transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1)}
.pezzo.viva img{opacity:1;transform:none}
/* posizioni volutamente irregolari */
.pezzo:nth-child(1){grid-column:2/6}
.pezzo:nth-child(2){grid-column:8/13;margin-top:8vh}
.pezzo:nth-child(3){grid-column:1/5;margin-top:-4vh}
.pezzo:nth-child(4){grid-column:6/9;margin-top:12vh}
.pezzo:nth-child(5){grid-column:9/12;margin-top:-6vh}
.pezzo:nth-child(6){grid-column:2/7}
.pezzo:nth-child(7){grid-column:8/12;margin-top:6vh}
.pezzo:nth-child(8){grid-column:3/6;margin-top:10vh}
.pezzo:nth-child(9){grid-column:7/13;margin-top:-2vh}
.pezzo:nth-child(10){grid-column:2/5;margin-top:8vh}
@media (max-width:820px){
  .sparse{grid-template-columns:repeat(6,1fr);gap:3.5rem .8rem}
  .pezzo:nth-child(odd){grid-column:1/5;margin-top:0}
  .pezzo:nth-child(even){grid-column:3/7;margin-top:2vh}
}

/* ------------------------------------------------------------ chiusura */
.chiusura{padding:var(--aria) var(--lato) calc(var(--aria) * .7);text-align:center}
.chiusura h2{font-size:clamp(2rem,7vw,6rem);margin-bottom:1.5rem}
.chiusura p{color:var(--tenue);max-width:44ch;margin:0 auto 2.6rem}

/* ------------------------------------------------------------ schede */
/* la pagina Contatti non ha foto: tiene la testata semplice di prima */
.scheda-testa{padding:calc(var(--aria) * .9) var(--lato) 0;max-width:70rem}
.scheda-testa h1{font-size:clamp(2.2rem,7.5vw,6.5rem);max-width:15ch}

/* La testata e' la foto, col titolo scritto sopra (Marco, 30/08/2026).
   Impianto section > row > col: il posizionamento del testo dentro la
   colonna si regola qui, senza toccare la struttura. */
.scheda-hero{position:relative;isolation:isolate;min-height:clamp(28rem,88svh,56rem);
             display:flex;background-size:cover;background-position:center;
             background-color:var(--scuro-2);overflow:hidden}
.scheda-hero .hero-velo{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(11,13,8,.72) 0%,rgba(11,13,8,.46) 42%,rgba(11,13,8,.82) 100%)}
/* la riga: dove sta il blocco di testo dentro la foto */
.scheda-hero .row{position:relative;z-index:1;width:100%;display:flex;
  align-items:flex-end;          /* verticale: in basso */
  justify-content:flex-start;    /* orizzontale: a sinistra */
  padding:calc(var(--aria) * .8) var(--lato) calc(var(--aria) * .55)}
/* la colonna: quanto e' larga e come si allinea il testo dentro */
.scheda-hero .col{width:min(70rem,100%);text-align:left}
.scheda-hero.senza-foto{border:1px dashed var(--filo)}
/* Le due pagine di legge (/privacy/, /cookie/): testata bassa e senza fotografia.
   🔴 Non riusano `.senza-foto`, che ha il filo tratteggiato ed e' il segnale di
   «qui manca la foto» sulle schede dei corsi: qui la foto non manca, non la
   vogliamo. Su una pagina che si apre per leggere una regola, una testata a
   tutto schermo e' solo una schermata da saltare prima di arrivare al testo. */
.scheda-hero.hero-legale{min-height:auto;border-bottom:1px solid var(--filo)}
.scheda-hero.hero-legale .row{align-items:flex-start;
  padding:calc(var(--aria) * .5) var(--lato) calc(var(--aria) * .3)}
/* Il testo di legge si legge come un documento, non come una pagina di vendita:
   misura piu' stretta (~70 caratteri), titoli staccati, elenchi respirati. */
.pagina-legale .scheda-corpo{max-width:46rem}
.pagina-legale .scheda-corpo h2{margin:2.6rem 0 .9rem}
.pagina-legale .scheda-corpo li{margin-bottom:.5rem}
.pagina-legale .scheda-corpo p{margin:0 0 1rem}
/* I nomi esatti dei cookie: si devono poter copiare e riconoscere a colpo d'occhio. */
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:rgba(242,241,234,.07);padding:.1em .38em;border-radius:.2em}

.briciole{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--tenue);margin:0 0 2rem}
.briciole a{text-decoration:none}
.briciole a:hover{color:var(--verde)}
.scheda-hero .briciole{color:rgba(242,241,234,.72)}
.scheda-hero .briciole a{color:inherit}
/* Il titolo entra a lettere, ognuna che ribalta in orizzontale.
   🔴 Le lettere stanno dentro una PAROLA con white-space:nowrap: senza,
   il browser manderebbe a capo in mezzo a una parola, perche' ogni lettera
   e' un inline-block a se'. */
.scheda-hero .lett{display:inline-block;backface-visibility:hidden;
  transform:rotateY(90deg);opacity:0}
.scheda-hero .par{display:inline-block;white-space:nowrap}
.scheda-hero .viva .lett{animation:entra-lett .7s cubic-bezier(.2,.8,.25,1) both}
@keyframes entra-lett{from{opacity:0;transform:rotateY(90deg)}to{opacity:1;transform:none}}
.scheda-hero .col{perspective:900px}
/* senza JS il titolo si vede lo stesso: e' il JS a spezzarlo */
.scheda-hero h1:not(.spezzato) .lett{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .scheda-hero .lett{opacity:1 !important;transform:none !important;animation:none !important}
}
.scheda-hero h1{font-size:clamp(2.2rem,7.5vw,6.5rem);max-width:15ch;margin:0;
  text-shadow:0 .06em .5em rgba(11,13,8,.45)}
.scheda-spalla{margin:1.8rem 0 0;max-width:44ch;font-size:1.14em;color:var(--tenue)}
.scheda-hero .scheda-spalla{color:rgba(242,241,234,.86);text-shadow:0 .06em .5em rgba(11,13,8,.5)}
.scheda-hero.senza-foto .col::after{content:"foto da scegliere";display:block;margin-top:2rem;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue)}

/* 🔴 I filetti si disegnano SULLE CELLE, non con un fondo colorato che si vede
   nei buchi: uno spazio spaiato non deve mai essere di un altro colore
   (Marco, 10/09/2026). Le colonne sono quante le celle (--celle), e le uscite
   stanno in una griglia loro attaccata sotto (.quando-uscite). */
.quando{display:grid;grid-template-columns:repeat(var(--celle,4),minmax(0,1fr));
        margin:0 var(--lato);padding:0;background:var(--fondo);border:1px solid var(--filo)}
.quando+.quando{border-top:0}
.quando .dato{background:var(--fondo);padding:1.5rem 1.6rem;transition:background .5s linear;
  box-shadow:inset 1px 0 0 var(--filo)}
.quando .dato:first-child{box-shadow:none}
@media (max-width:760px){
  .quando{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quando .dato{box-shadow:inset 1px 0 0 var(--filo),inset 0 1px 0 var(--filo)}
  .quando .dato:nth-child(odd){box-shadow:inset 0 1px 0 var(--filo)}
}
@media (max-width:560px){
  /* una colonna sola: il filetto verticale farebbe una riga doppia sul bordo */
  .quando{grid-template-columns:1fr}
  .quando .dato,.quando .dato:nth-child(odd){box-shadow:inset 0 1px 0 var(--filo)}
  .quando .dato:first-child{box-shadow:none}
}
.quando dt{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);margin:0 0 .55rem;font-weight:600}
.quando dd{margin:0;font-size:1.02rem}
.quando a{color:var(--verde)}

.scheda-corpo{padding:var(--aria) var(--lato) 0;max-width:40rem}
.scheda-corpo h2{font-size:clamp(1.4rem,3.2vw,2.1rem);margin:2.8rem 0 1rem}
.scheda-corpo h3{font-size:1.22rem;margin:2rem 0 .6rem;text-transform:none;font-weight:700}
.scheda-corpo p{margin:0 0 1.15rem}
.scheda-corpo ul{margin:0 0 1.4rem;padding-left:1.1rem}
.scheda-corpo li{margin:0 0 .55rem}
.da-scrivere{color:var(--verde);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88rem}

.iscrizione{margin:var(--aria) var(--lato) 0;padding:clamp(1.8rem,4.5vw,3.4rem);
            background:rgba(20,22,15,.5);border:1px solid var(--filo);max-width:46rem}
.iscrizione h2{font-size:clamp(1.5rem,3.6vw,2.4rem)}
.iscrizione > p{color:var(--tenue);margin:1rem 0 2.2rem;max-width:42ch}
.iscrizione.senza-data{border-left:3px solid var(--verde)}

/* ---- La pagina di ringraziamento: «Il tuo corso in breve» -----------------
   🔴 Il riquadro dei dati sta DENTRO il box dell'iscrizione, che e' largo 46rem
   e ha un padding grosso: con le quattro colonne fisse di `.quando` il testo
   andava a capo a ogni parola, una colonna di parole singole (visto in pagina il
   17/09/2026). Qui il box si allarga, il riquadro perde i margini laterali che
   fuori gli servono, e le colonne le decide la LARGHEZZA disponibile invece del
   loro numero: cosi' vale per un corso con quattro dati e per uno con otto. */
/* 🔴 La pagina riempie lo schermo. Senza, il riquadro finiva a meta' altezza e
   sotto restava una fascia scura vuota prima del piede: la pagina sembrava
   troncata (Marco, 17/09/2026: «non mi piace che si fermi a meta' pagina»).
   Le altre pagine del sito non hanno il problema perche' cominciano con una
   testata alta quanto lo schermo; questa no, ed e' giusto cosi'. */
.pagina-grazie{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--aria) * .6) 0}
.pagina-grazie .iscrizione{max-width:72rem}
/* 🔴 Colonne LARGHE, poche. Con `minmax(11rem,…)` ci stavano cinque colonne da
   182 px e quasi ogni valore andava a capo: «otto incontri sempre di giovedì +
   un'uscita pratica domenicale» occupava QUATTRO righe, «Uscita pratica» tre
   (Marco, 17/09/2026: «allarga le colonne, tutte le info su un'unica riga»).
   Qui una cella non e' una colonnina di un listino: e' una frase che si legge.
   La misura e' presa sul valore piu' lungo del sito, non a occhio. */
/* 🔴 `min(27rem,100%)` e non `27rem` secco: con la misura fissa, su un telefono
   da 390 px la colonna da 432 px non rimpicciolisce e la PAGINA INTERA sborda —
   110 px di scorrimento laterale, misurati il 17/09/2026 prima di accorgersene.
   `auto-fit` non protegge da un minimo piu' largo dello schermo: lo fa il `min`. */
.pagina-grazie .quando{margin:0;grid-template-columns:repeat(auto-fit,minmax(min(27rem,100%),1fr))}
.pagina-grazie .quando .dato{padding:1.15rem 1.35rem}
/* Le celle con la frase lunga si prendono la riga intera invece di spezzarsi. */
.pagina-grazie .quando .dato dd{overflow-wrap:break-word}
/* Un titolo di servizio dentro una pagina di servizio: non e' un titolo di
   vendita e non prende la misura gigante di `.iscrizione h2`. */
.pagina-grazie h2.grazie-riepilogo{font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tenue);font-weight:600;margin:2.4rem 0 .9rem}
.pagina-grazie .quando+p{margin-top:2rem}
/* I titoli dei capitoli della pagina: piu' piccoli di quelli di vendita, ma veri
   titoli — la pagina adesso e' un documento che si legge, non una ricevuta. */
.pagina-grazie h2{font-size:clamp(1.1rem,2vw,1.35rem);margin:2.8rem 0 1rem;
  letter-spacing:-.01em}
.pagina-grazie h2.grazie-riepilogo{font-size:.72rem;letter-spacing:.16em;margin:0 0 .9rem}
.pagina-grazie p{max-width:52ch}
/* L'elenco di tutte le date: due colonne dove c'e' posto, una sul telefono.
   🔴 Non e' un PDF da scaricare: un PDF sul telefono si apre in un'altra
   applicazione, non si cerca dentro e invecchia da solo. Qui le righe stanno
   dove si sta gia' guardando. */
.tutte-le-date{list-style:none;margin:0 0 1.6rem;padding:0;
  /* 🔴 UNA COLONNA SOLA. Le voci sono in ordine di data, uscita pratica
     compresa (Marco, 17/09/2026), e un ordine cronologico su due colonne si
     legge di traverso: l'occhio scende lungo la colonna e salta da gennaio a
     febbraio e ritorno. In piu' le nove voci su due colonne lasciavano una
     cella vuota in fondo, grigia come il filo della griglia. In colonna unica
     si legge dall'alto in basso come il foglio stampato, che e' la stessa cosa. */
  display:grid;grid-template-columns:1fr;
  gap:.1rem;background:var(--filo);border:1px solid var(--filo)}
.tutte-le-date li{background:var(--fondo);padding:.8rem 1.1rem;
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.tutte-le-date .data-eti{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tenue);font-weight:600;flex:0 0 auto}
/* 🔴 L'uscita pratica NON prende piu' la riga intera. Adesso sta in mezzo,
   al suo posto in ordine di data: a tutta larghezza spezzerebbe la griglia in
   due e lascerebbe un buco nella riga prima. Si distingue dal colore, non dalla
   misura — il verde di casa sull'etichetta basta a farla saltare all'occhio. */
.tutte-le-date li.uscita .data-eti{color:var(--verde)}
.tutte-le-date li.uscita span:last-child{font-weight:600}
/* I due tasti del calendario: quello che serve davvero e' il primo, e si vede. */
.tasti-grazie{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;align-items:center;margin:0 0 1rem}
.tasti-grazie .nota-tasto{flex:1 1 16rem;margin:0}
.tasti-grazie .bottone,.tasti-grazie .bottone-filo{text-align:center;text-decoration:none}
.tasti-grazie .bottone-filo{border-radius:8px;padding:.85rem 1.4rem}
.firma-grazie{margin-top:1.6rem;line-height:1.7}
.chiusura-grazie{margin-top:1.8rem;font-size:1.1rem}
.modulo{display:grid;gap:1.15rem}
/* L'esca antispam: fuori dallo schermo, mai visibile, mai a tabulazione.
   Un programma che riempie i moduli la compila, una persona no: se torna
   piena, iscrizione.php butta via la richiesta. NON usare display:none,
   che certi programmi sanno riconoscere e saltare. */
.esca{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.modulo label{display:grid;gap:.45rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);font-weight:600}
.modulo input[type=text],.modulo input[type=email],.modulo input[type=tel],.modulo textarea{
  font:inherit;color:var(--testo);background:transparent;border:0;border-bottom:1px solid var(--filo);
  padding:.7rem 0;text-transform:none;letter-spacing:normal}
.modulo input:focus,.modulo textarea:focus{outline:0;border-bottom-color:var(--verde)}
.modulo .consenso{display:flex;align-items:center;gap:.7rem;text-transform:none;letter-spacing:normal;font-size:.88rem;font-weight:400}
.modulo .manda{margin-top:1.4rem}
/* il tasto e' grande: e' il gesto per cui la pagina esiste */
.modulo button{font-size:.95rem;padding:1.15rem 2.4rem;border-radius:10px}
/* spento finche' non si spunta l'informativa: lo accende il JS.
   Senza JS resta acceso, e a fermare l'invio ci pensa il required. */
.modulo button[disabled]{background:var(--filo);color:var(--tenue);cursor:not-allowed;transform:none}
.modulo button[disabled]:hover{background:var(--filo);transform:none}
.nota-tasto{margin:.85rem 0 0;font-size:.82rem;color:var(--tenue);max-width:34ch}
.modulo button:not([disabled]) + .nota-tasto{visibility:hidden}

/* ------------------------------------------------------- nastro dei corsisti
   Scorre sempre, si ferma quando ci passi sopra (o quando ci arrivi col
   tasto di tabulazione), e al clic la foto si apre grande. */
.sez-allievi{padding:var(--aria) 0 0}
.sez-allievi .eti{margin:0 var(--lato) .6rem;font-size:.7rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--tenue);font-weight:600}
.nastro-dice{margin:0 var(--lato) 2rem;max-width:44ch;font-size:1.14em}
.nastro{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.nastro .fila{display:flex;gap:1.1rem;width:max-content;
  animation:nastro-scorre 150s linear infinite;will-change:transform}
.nastro:hover .fila,.nastro:focus-within .fila{animation-play-state:paused}
.nastro img{height:clamp(20rem,62svh,40rem);width:auto;display:block;cursor:zoom-in;
  background:var(--scuro-2)}
@keyframes nastro-scorre{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* 🔴 «Passa il mouse» non vuol dire niente su un telefono, e li' la striscia
   non si ferma affatto: la riga giusta la sceglie il tipo di puntatore. */
.nastro-come{margin:1.2rem var(--lato) 0;font-size:.85rem;color:var(--tenue);max-width:44ch}
.nastro-come .col-mouse{display:none}
.nastro-come .col-dito{display:inline}
@media (hover:hover) and (pointer:fine){
  .nastro-come .col-mouse{display:inline}
  .nastro-come .col-dito{display:none}
}
.nastro-chi{margin:1.2rem var(--lato) 0;font-size:.78rem;color:var(--tenue);max-width:70ch;line-height:1.7}
@media (prefers-reduced-motion:reduce){
  .nastro{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .nastro .fila{animation:none}
}

/* --------------------------------------------------------- l'ingranditore */
.lente{position:fixed;inset:0;z-index:120;display:none;background:rgba(9,10,7,.95);
  align-items:center;justify-content:center}
.lente[open],.lente.aperta{display:flex}
.lente img{max-width:92vw;max-height:86svh;width:auto;height:auto;display:block;
  box-shadow:0 2rem 5rem rgba(0,0,0,.6)}
.lente .chi{position:absolute;left:0;right:0;bottom:1.4rem;text-align:center;
  color:var(--tenue);font-size:.8rem;letter-spacing:.06em}
.lente button{position:absolute;background:rgba(242,241,234,.1);color:#f2f1ea;border:1px solid var(--filo);
  width:3.4rem;height:3.4rem;border-radius:50%;cursor:pointer;font-size:1.4rem;line-height:1;
  display:grid;place-items:center;transition:background var(--tempo)}
.lente button:hover{background:var(--verde);color:#14160f;border-color:var(--verde)}
.lente .prima{left:1.2rem;top:50%;transform:translateY(-50%)}
.lente .dopo{right:1.2rem;top:50%;transform:translateY(-50%)}
.lente .chiudi{top:1.2rem;right:1.2rem}
@media (max-width:700px){
  .lente .prima{left:.5rem} .lente .dopo{right:.5rem}
  .lente button{width:2.8rem;height:2.8rem}
}

/* ------------------------------------------------------------ foto in scheda
   Poche e a tutta larghezza, dentro il ritmo del testo: non una galleria.
   Il fondo della scheda e' scuro, quindi la foto e' l'unico punto luminoso
   della schermata e va lasciata respirare. */
.foto-scheda{margin:var(--aria) 0 0;padding:0}
/* 🔴 niente max-height: con quella il 16:9 dichiarato non e' quello che si
   vede — su una finestra bassa la fascia usciva 2,39 e il ritaglio preparato
   a 16:9 veniva tagliato una seconda volta dal browser (misurato il 30/08). */
.foto-scheda img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--scuro-2)}
.foto-scheda figcaption{margin:1rem var(--lato) 0;font-size:.82rem;color:var(--tenue);max-width:44ch}

/* ------------------------------------------- i due turni del Corso Base
   Una pagina sola con due orari (10/09/2026): il cappello del turno esce
   solo quando i turni sono più d'uno, e ognuno ha il suo ancoraggio perché i
   link dalla home e dal menù arrivino dritti sul turno giusto. */
.due-turni{display:grid;gap:clamp(1.4rem,3vh,2.4rem)}
.turno-quando{scroll-margin-top:6rem}
.turno-quando .eti{margin:0 var(--lato) .7rem;font-size:.7rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--verde);font-weight:700}
/* Il turno appena raggiunto da un link si accende un istante: senza, chi arriva
   da «Base pomeridiano» non capisce quale dei due riquadri sia il suo. */
.turno-quando:target .quando .dato{background:rgba(150,194,34,.10)}

/* la scelta del turno dentro il modulo */
.modulo .turni{border:1px solid var(--filo);padding:1.1rem 1.3rem 1.3rem;margin:0;
  display:grid;gap:.6rem}
.modulo .turni legend{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tenue);font-weight:600;padding:0 .4rem}
.modulo .scelta{display:flex;align-items:baseline;gap:.7rem;text-transform:none;
  letter-spacing:normal;font-size:1rem;font-weight:400;color:var(--testo)}
.modulo .scelta .q{color:var(--tenue);font-size:.9rem}

/* --------------------------------------------- la foto al fianco del testo
   Scelta da Marco il 10/09/2026 fra quattro modi guardati vivi sulla pagina
   del Base serale (prova C): la foto illustra il blocco appena letto invece
   di interromperlo, e scendendo si alterna sinistra/destra.
   🔴 Aspetto 16:9 dichiarato come nella banda: i ritagli arrivano gia' a 16:9
   e una seconda potatura del browser rifarebbe il danno del 30/08. */
/* 🔴 La foto arriva fino al margine della PAGINA, non alla colonna del testo.
   Il 10/09/2026 e' stata provata anche allineata al blocco di testo che le sta
   sopra (ogni blocco ha il suo max-width: .voci 62rem, .serata 70rem, .doppia e
   .faq 74rem) — allineamento perfetto a ogni larghezza, misurato a zero px su
   cinque schermi. Marco l'ha guardata e ha detto: «era meglio prima». Vince la
   foto piu' grande e sfalsata rispetto al testo: e' quella che aveva scelto
   guardando la prova C. Non rifarlo. */
.foto-fianco{margin:clamp(2rem,5vh,4rem) 0 0;padding:0 var(--lato);
  display:grid;gap:.8rem;max-width:62%}
.foto-fianco img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--scuro-2)}
.foto-fianco figcaption{font-size:.82rem;color:var(--tenue);max-width:40ch;margin:0}
.foto-fianco.fianco-dx{margin-left:auto;text-align:right}
.foto-fianco.fianco-dx figcaption{margin-left:auto}
/* Sotto i 760 px due terzi non esistono: la colonna e' una sola, e la foto
   torna a tutta larghezza allineata a sinistra come il testo. */
@media(max-width:760px){
  .foto-fianco{max-width:100%;text-align:left}
  .foto-fianco.fianco-dx{margin-left:0}
  .foto-fianco.fianco-dx figcaption{margin-left:0}
}

/* ------------------------------------------------------------ piede */
.piede{margin-top:var(--aria);padding:var(--aria) var(--lato) 3rem;border-top:1px solid var(--filo)}
.piede-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2.5rem}
.piede-legale{margin:2.5rem 0 0;padding-top:1.4rem;border-top:1px solid var(--filo);font-size:.78rem;color:var(--tenue);display:flex;flex-wrap:wrap;gap:.6rem}
.piede-legale a{color:inherit;text-decoration:underline;text-underline-offset:.25em}
.piede-legale a:hover{color:var(--verde)}
.piede-cookie{background:none;border:0;padding:0;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:.25em;cursor:pointer}
.piede-cookie:hover{color:var(--verde)}
/* Il riquadro dei cookie: in basso, sopra tutto, ma non a tutto schermo —
   non deve sembrare un muro. Su telefono diventa una striscia piena. */
.consenso-cookie{position:fixed;left:var(--lato);right:var(--lato);bottom:1.2rem;
  z-index:60;max-width:52rem;margin-inline:auto;display:flex;flex-wrap:wrap;
  align-items:center;gap:1rem 1.6rem;padding:1.15rem 1.35rem;
  background:#14170f;border:1px solid var(--filo);
  box-shadow:0 1.2rem 3rem rgba(0,0,0,.45)}
/* 🔴 Senza questa riga il riquadro non sparisce mai: il `display:flex` qui
   sopra vince sull'`[hidden]{display:none}` del browser, che e' una regola
   sull'attributo e pesa meno di una classe. Il JS metteva `hidden`, la scelta
   veniva registrata, e il banner restava a schermo (visto da Marco 17/09/2026). */
.consenso-cookie[hidden]{display:none}
.consenso-testo{margin:0;flex:1 1 22rem;font-size:.86rem;line-height:1.5;color:var(--tenue)}
.consenso-testo a{color:var(--verde)}
.consenso-tasti{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
/* 🔴 I due tasti del consenso sono IDENTICI, e devono restarlo: stessa forma,
   stessa misura, stesso risalto. Accettare e rifiutare devono costare lo stesso
   gesto e la stessa fatica visiva, altrimenti il consenso non vale. Per questo
   hanno una classe loro e non riusano `.bottone` (il verde pieno, che sul sito
   vuol dire «premi qui»): con quello addosso, il sì pesava più del no.
   Non trasformare questa regola in due regole diverse. */
.consenso-tasti .bottone-consenso{flex:0 0 auto;min-width:9.5rem;
  text-align:center;cursor:pointer;
  background:none;border:1px solid var(--verde);color:var(--testo);
  font:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;padding:.85rem 1.4rem;border-radius:8px;
  transition:background var(--tempo)}
.consenso-tasti .bottone-consenso:hover{background:rgba(150,194,34,.14)}
.bottone-filo{background:none;border:1px solid var(--verde);color:var(--testo);
  font:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;padding:.85rem 1.4rem}
.bottone-filo:hover{background:rgba(150,194,34,.14)}
@media (max-width:620px){.consenso-cookie{left:0;right:0;bottom:0;max-width:none;
  border-left:0;border-right:0;border-bottom:0}}
.piede-nome{font-family:Archivo,sans-serif;font-weight:800;font-stretch:112%;text-transform:uppercase;
            font-size:1.6rem;margin:0 0 .4rem;letter-spacing:-.02em}
.piede-riga,.piede p{margin:0;color:var(--tenue);font-size:.95rem}
.piede-eti{font-size:.68rem !important;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .7rem !important;font-weight:600}
.piede a{color:var(--tenue);text-decoration:none;border-bottom:1px solid transparent}
.piede a:hover{color:var(--verde);border-bottom-color:var(--verde)}

/* ------------------------------------------------------------ entrate */
.entra-su{opacity:0;transform:translateY(2.2rem);
          transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.entra-su.viva{opacity:1;transform:none}

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

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .entra-su,.pezzo img,.soglia .sotto{opacity:1 !important;transform:none !important}
  .soglia h1 .riga > span{transform:none !important}
  .porte-lato{transform:none !important}
}

/* ============================================================================
   LA HOME È IL PERCORSO — approvato da Marco il 28/08/2026 (turno 3).
   Impianto preso dalla pagina «il percorso» di leadanza.it: rotaia verde fissa
   a sinistra con le tappe, capitoli a schermo pieno, intro e finale.
   La rotaia è `position:sticky`: perché regga, nessun antenato può avere
   `overflow:hidden` (vedi la correzione su body, riga 39).
   ========================================================================= */
.perc{position:relative;display:grid;grid-template-columns:clamp(190px,17vw,244px) 1fr}
.perc::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 22% at 46% 26%,rgba(150,194,34,.13),transparent 66%)}

.rotaia{position:sticky;top:0;height:100svh;z-index:5;display:flex;flex-direction:column;
  justify-content:center;padding:var(--aria) 0 var(--aria) clamp(1rem,3.4vw,3.5rem)}
.binario{position:relative;flex:0 0 min(56%,540px);display:flex;flex-direction:column;
  justify-content:space-between}
.binario::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:var(--filo)}
.riempi{position:absolute;left:5px;top:6px;width:2px;height:0;background:var(--verde);
  box-shadow:0 0 9px rgba(150,194,34,.7);transition:height .3s ease}
.tappa{position:relative;padding:.2rem 0 .2rem 26px;font-size:.69rem;letter-spacing:.15em;
  text-transform:uppercase;font-weight:600;color:#6b7160;background:none;border:0;
  text-align:left;font-family:inherit;cursor:pointer;transition:color .35s ease}
.tappa::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;background:var(--scuro-2);
  border:2px solid var(--scuro);transition:background .35s,box-shadow .35s,transform .35s}
.tappa:hover{color:var(--testo)}
.tappa.passata{color:#8d947e}
.tappa.passata::before{background:var(--verde-cupo)}
.tappa.qui{color:var(--testo);font-weight:700}
.tappa.qui::before{background:var(--verde);transform:translateY(-50%) scale(1.18);
  box-shadow:0 0 0 5px rgba(150,194,34,.2),0 0 14px rgba(150,194,34,.85)}
.tappa:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

.colonna{position:relative;z-index:1;min-width:0}
.capitolo{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:var(--aria) clamp(1.25rem,5vw,5rem) var(--aria) clamp(1.25rem,3vw,4rem);position:relative}
.capitolo.dx{align-items:flex-end;text-align:right}
.capitolo.dx .pillole{justify-content:flex-end}
.capitolo.sx{align-items:flex-start;text-align:left}

.capitolo .eti{font-size:.69rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600}
.capitolo .marca{color:var(--verde-cupo);margin:0 0 1.3rem}
/* il corpo si lega alla LARGHEZZA, non all'altezza: sulla riga più lunga
   una misura in vh sfora lo schermo (trappola già pagata) */
.frase{font-size:min(clamp(1.5rem,2.9vw,2.75rem),7.4vw);max-width:20ch;color:#e6e8dc;margin:0 0 1.4rem}
/* Frase con l'a capo scelto a mano (genera.py, A_CAPO_NELLA_FRASE): la riga
   è più larga, se no il browser rimanda a capo dove non vogliamo. */
.frase.spezzata{max-width:min(30ch,100%)}
.capitolo .nome{font-size:min(clamp(2.6rem,6.6vw,6rem),13vw);color:var(--verde);margin:0}
.pillole{display:flex;flex-wrap:wrap;gap:.6rem;max-width:46rem;margin-top:2rem}
.pillole.larghe{max-width:56rem}
.pil{font-size:.86rem;color:#d8e4b4;border:1px solid rgba(150,194,34,.32);border-radius:999px;
  padding:.68rem 1.2rem;background:rgba(150,194,34,.06);text-decoration:none;
  display:inline-flex;align-items:center;gap:.55rem;line-height:1.35;
  transition:background var(--tempo),color var(--tempo),border-color var(--tempo)}
.pil::after{content:"\2197";font-size:.85em;color:var(--verde);transition:transform .25s,color .25s}
.pil:hover,.pil:focus-visible{background:var(--verde);color:var(--inchiostro);border-color:var(--verde)}
.pil:hover::after,.pil:focus-visible::after{color:var(--inchiostro);transform:translate(1px,-1px)}
.pil b{font-weight:700}
.capitolo .didascalia{margin:1.1rem 0 0;font-size:.76rem;letter-spacing:.06em;color:#767c69}
.capitolo .didascalia b{color:#c9d9a2;font-weight:600}

.capitolo.avvio{align-items:center;text-align:center}
.capitolo.avvio .eti{color:var(--verde);margin:0 0 1.6rem}
.capitolo.avvio h1{font-size:min(clamp(2.8rem,7.6vw,6.8rem),14vw)}
.capitolo.avvio h1 em{font-style:italic;font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;color:var(--verde);text-transform:none;letter-spacing:-.01em}
.capitolo .sommario{max-width:46ch;margin:1.7rem auto 0;color:var(--tenue);
  font-size:clamp(1rem,.4vw + .95rem,1.2rem)}
.cenno{position:absolute;bottom:clamp(1.6rem,4vh,2.9rem);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.8rem;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:#767c69}
.cenno svg{overflow:visible;width:clamp(84px,9vw,150px);height:auto}
.fil{fill:none;stroke:var(--verde);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fil-t{fill:none;stroke:rgba(150,194,34,.42);stroke-width:1.4;stroke-linecap:round}
.pieno{fill:var(--verde);stroke:none}
.cono{stroke-dasharray:130;stroke-dashoffset:130;animation:apri 3.2s cubic-bezier(.16,1,.3,1) infinite}
@keyframes apri{0%,10%{stroke-dashoffset:130}46%,74%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:130}}
.lente{transform-origin:100px 84px;animation:fuoco 3.2s ease-in-out infinite}
@keyframes fuoco{0%,100%{transform:scale(1)}44%{transform:scale(.86)}}
.freccia{opacity:0;animation:scendi 3.2s ease infinite}
@keyframes scendi{0%,40%{opacity:0;transform:translateY(-10px)}62%,86%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(8px)}}

.capitolo.finale{align-items:center;text-align:center}
.stella{font-size:1.8rem;color:var(--verde)}
.capitolo.finale h2{font-size:min(clamp(1.7rem,3.4vw,3rem),8vw);max-width:22ch;margin:1.4rem auto 0;
  line-height:1.14}
.capitolo.finale h2 em{font-style:italic;font-family:"Instrument Serif",Georgia,serif;
  color:var(--verde);text-transform:none}
.chiamata{display:inline-block;margin-top:2.2rem;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--inchiostro);text-decoration:none;
  background:var(--verde);padding:1.1rem 2.2rem;border-radius:999px;
  box-shadow:0 18px 44px -18px rgba(150,194,34,.75);transition:transform var(--tempo)}
.chiamata:hover{transform:translateY(-2px)}
.capitolo .firma{margin-top:2.6rem;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:#767c69}

/* i capitoli entrano in scena — solo se il copione gira */
.js .capitolo .marca,.js .capitolo .frase,.js .capitolo .nome,
.js .capitolo .didascalia,.js .capitolo .pillole>*{opacity:0;transform:translateY(20px)}
.js .capitolo .marca{transition:opacity .7s ease,transform .7s ease}
.js .capitolo .nome{transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.js .capitolo .frase{transition:opacity .8s ease .1s,transform .8s ease .1s}
.js .capitolo .didascalia{transition:opacity .6s ease .5s,transform .6s ease .5s}
.js .capitolo .pillole>*{transition:opacity .55s ease,transform .55s ease}
.js .capitolo.viva .marca,.js .capitolo.viva .frase,.js .capitolo.viva .nome,
.js .capitolo.viva .didascalia,.js .capitolo.viva .pillole>*{opacity:1;transform:none}
.js .capitolo.viva .pillole>*:nth-child(1){transition-delay:.22s}
.js .capitolo.viva .pillole>*:nth-child(2){transition-delay:.3s}
.js .capitolo.viva .pillole>*:nth-child(3){transition-delay:.38s}

/* sul telefono la rotaia non c'è: i capitoli si leggono uno dopo l'altro.
   La condizione è la LARGHEZZA, non `hover:none` (trappola già pagata) */
@media (max-width:900px),(hover:none){
  .perc{grid-template-columns:1fr}
  .rotaia{display:none}
  .capitolo{min-height:auto;padding:clamp(4rem,11vh,7rem) var(--lato)}
  .capitolo.dx,.capitolo.sx{align-items:flex-start;text-align:left}
  .capitolo.dx .pillole{justify-content:flex-start}
  .capitolo.avvio{min-height:100svh;align-items:center;text-align:center}
  .capitolo.finale{min-height:auto;padding-bottom:clamp(5rem,13vh,8rem)}
  /* a piena larghezza il nome e i dati non devono spartirsi la riga come
     due colonne: la pillola torna testo che va a capo, freccia in coda */
  .pil{width:100%;display:block;text-align:left}
  .pil::after{display:inline;margin-left:.4em;vertical-align:baseline}
  .pil b{display:inline}
}

/* ------------------------------------------------- lo strato d'apertura ---
   Il video sta SOPRA la home, nella stessa pagina: se fosse una pagina a sé
   Google troverebbe un video e nient'altro. Si toglie al primo gesto.
   Nessun avviso di attesa: la foto c'è dal primo istante, e un «attendi»
   annuncerebbe un'attesa che non esiste (deciso il 28/08/2026). */
.apre{position:fixed;inset:0;z-index:80;background:var(--inchiostro) url('/media/apertura/poster.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:opacity .75s ease,visibility .75s}
/* il poster sta sul fondo dello strato: così il browser ne scarica UNO solo,
   quello del suo formato, e il video ci compare sopra quando è pronto */
@media (max-aspect-ratio:1/1){.apre{background-image:url('/media/apertura/poster-verticale.jpg')}}
.apre-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease}
.apre[data-stato="gira"] .apre-video,.apre[data-stato="scritta"] .apre-video{opacity:1}
.apre-velo{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,22,15,.28),rgba(20,22,15,0) 32%,rgba(20,22,15,.42))}
/* La scritta rifà il gesto del video, tavola B della tela (28/08/2026):
   carattere Anton, in basso a sinistra, la domanda che sale da sotto una riga
   invisibile, poi la barra verde tirata da sinistra con la risposta in nero.
   Le proporzioni sono quelle del montaggio: margine 6,4% della larghezza,
   la risposta 1,27 volte la domanda, il blocco a 7,5% dal fondo. */
.apre-scritta{position:absolute;z-index:2;left:6.4%;right:6.4%;bottom:7.5%;
  display:flex;flex-direction:column;align-items:flex-start;gap:.06em;
  font-family:Anton,Impact,"Haettenschweiler",sans-serif;font-weight:400;
  text-transform:uppercase;line-height:1.06;letter-spacing:.004em;
  opacity:0;transition:opacity .25s ease}
.apre[data-stato="scritta"] .apre-scritta{opacity:1}
.apre-domanda{overflow:hidden;display:block;max-width:100%}
.apre-domanda span{display:block;color:#fff;font:inherit;
  font-size:min(14.8vw,24vh);white-space:nowrap;
  transform:translateY(105%);transition:transform .62s cubic-bezier(.16,1,.3,1)}
.apre[data-stato="scritta"] .apre-domanda span{transform:none}
.apre-risposta{display:inline-block;background:var(--verde);
  padding:.07em .16em .09em;transform-origin:left center;transform:scaleX(0);
  transition:transform .5s cubic-bezier(.16,1,.3,1) .5s}
.apre[data-stato="scritta"] .apre-risposta{transform:scaleX(1)}
.apre-risposta b{display:block;color:var(--inchiostro);font:inherit;font-weight:400;
  font-size:min(18.8vw,30.5vh);white-space:nowrap;
  opacity:0;transition:opacity .25s ease .82s}
.apre[data-stato="scritta"] .apre-risposta b{opacity:1}
.apre-salta{position:absolute;z-index:3;right:var(--lato);bottom:clamp(1.4rem,4vh,2.6rem);
  display:inline-flex;align-items:center;gap:.5rem;font-family:inherit;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;cursor:pointer;
  color:#f2f1ea;background:rgba(20,22,15,.42);border:1px solid rgba(242,241,234,.34);
  border-radius:999px;padding:.85rem 1.5rem;backdrop-filter:blur(6px);
  transition:background var(--tempo),color var(--tempo),border-color var(--tempo)}
.apre-salta:hover{background:var(--verde);color:var(--inchiostro);border-color:var(--verde)}
.apre-salta:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
.apre[data-stato="via"]{opacity:0;visibility:hidden;pointer-events:none}
body.apre-su{overflow:hidden}
/* senza JS lo strato non deve intrappolare nessuno */
html:not(.js) .apre{display:none}

@media (prefers-reduced-motion:reduce){
  .cono,.lente,.freccia{animation:none}
  .apre-domanda span,.apre-risposta,.apre-risposta b{transition:none;transform:none;opacity:1}
  .apre-video{display:none}
}


/* ============================================================================
   DICONO DI NOI — scelta di Marco il 29/08/2026 (Torre, pagina Vetrina).
   Sulle pagine dei corsi c'è solo il NUMERO, grande, che è una porta; le
   recensioni per esteso stanno tutte nella loro pagina. Il muro è a colonne
   che non si spezzano: una recensione non si taglia mai a metà.
   ========================================================================= */
.dicono{display:block;margin:var(--aria) var(--lato) 0;padding:clamp(2.4rem,6vw,4.4rem);
  border:1px solid var(--filo);text-align:center;text-decoration:none;
  transition:border-color var(--tempo),background var(--tempo)}
.dicono:hover{border-color:var(--verde);background:rgba(150,194,34,.05)}
.dicono-n{display:block;font-family:Archivo,Impact,sans-serif;font-weight:800;font-stretch:112%;
  font-size:clamp(4.4rem,13vw,10rem);line-height:.85;letter-spacing:-.04em;color:var(--verde)}
.dicono-che{display:block;margin-top:1.1rem;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tenue);font-weight:600}
.dicono-vai{display:inline-block;margin-top:1.9rem;font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;font-weight:700;color:var(--testo);
  border-bottom:1px solid var(--verde);padding-bottom:.35rem}
.dicono:hover .dicono-vai b{display:inline-block;transform:translateX(5px);transition:transform var(--tempo)}

.dicono-testa{padding:calc(var(--aria) * .9) var(--lato) 0;max-width:70rem}
.dicono-testa h1{font-size:clamp(2.4rem,8vw,7rem);color:var(--verde)}
.dicono-conto{margin:2.6rem 0 0;display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap}
.dicono-conto .dicono-n{display:inline;font-size:clamp(2.2rem,5vw,3.6rem)}
.dicono-conto .dicono-che{display:inline;margin:0}

.rec-muro{padding:var(--aria) var(--lato) 0;display:flex;flex-direction:column;
  gap:clamp(4rem,11vh,9rem)}
.rec{margin:0;max-width:min(60ch,72%);position:relative}
.rec.sx{align-self:flex-start;text-align:left}
.rec.dx{align-self:flex-end;text-align:right}
.rec blockquote{margin:0;font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-weight:400;font-size:var(--corpo);line-height:1.22;letter-spacing:-.01em;color:var(--testo)}
.rec blockquote::before{content:"\201C";color:var(--verde-cupo);opacity:.75}
.rec blockquote::after{content:"\201D";color:var(--verde-cupo);opacity:.75}
.rec figcaption{margin-top:1.5rem;display:flex;gap:1rem;align-items:baseline;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.rec.dx figcaption{justify-content:flex-end}
.rec-chi{color:var(--verde)}
.rec-quando{color:var(--tenue);font-weight:600;white-space:nowrap}
/* la prima è la più forte: si annuncia da sé */
.rec:first-child blockquote{font-size:clamp(2.1rem,4.2vw,3.6rem)}

@media (max-width:900px){
  .rec{max-width:100%}
  .rec.dx,.rec.sx{text-align:left;align-self:stretch}
  .rec.dx figcaption{justify-content:flex-start}
  .rec-muro{gap:clamp(3rem,8vh,5rem)}
}

/* le videointerviste: copertina ferma, il filmato parte al clic (venti iframe
   peserebbero più del sito intero) */
.volti{padding:var(--aria) var(--lato) 0}
.volti h2{font-size:clamp(1.8rem,4.4vw,3.2rem);margin:.7rem 0 0}
.volti-spalla{margin:1rem 0 0;color:var(--tenue);max-width:44ch}
.volti-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.1rem;margin-top:2.4rem}
@media (max-width:900px){.volti-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.volti-griglia{grid-template-columns:1fr}}
.volto{position:relative;padding:0;border:1px solid var(--filo);background:var(--scuro-2);
  cursor:pointer;overflow:hidden;aspect-ratio:16/9;display:block;
  transition:border-color var(--tempo)}
.volto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45) brightness(.72);
  transition:filter var(--tempo),transform var(--tempo)}
.volto:hover{border-color:var(--verde)}
.volto:hover img{filter:grayscale(0) brightness(.9);transform:scale(1.04)}
.volto .play{position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem;
  color:var(--testo);text-shadow:0 2px 14px rgba(0,0,0,.6)}
.volto:hover .play{color:var(--verde)}
.volto .chi{position:absolute;left:0;right:0;bottom:0;padding:.6rem .8rem;text-align:left;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  background:linear-gradient(transparent,rgba(20,22,15,.9))}
.volto iframe{width:100%;height:100%;border:0;display:block}
.volto.acceso{cursor:default}
.volto.acceso .play,.volto.acceso img{display:none}

/* i filmati delle uscite (blocco @video): stessa carta delle videointerviste
   — copertina ferma, iframe solo al clic — con uno grande in cima */
.uscite{padding:var(--aria) var(--lato) 0;max-width:74rem;margin:0 auto}
.uscite h2{font-size:clamp(1.6rem,3.6vw,2.6rem);margin:0}
.uscite-spalla{margin:1rem 0 0;color:var(--tenue);max-width:52ch}
.uscite .uscita-grande{margin-top:2rem}
.uscite .uscita-grande .volto{aspect-ratio:16/9;width:100%}
.uscite .volti-griglia{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1.1rem}
@media (max-width:560px){.uscite .volti-griglia{grid-template-columns:1fr}}

/* ============================================================================
   I TRE NUMERI, GIGANTI E DA SOLI IN FONDO — scelta di Marco il 29/08/2026.
   Cifre in contorno, non piene: da lontano sono una texture, da vicino si
   leggono. Si muovono più piano della pagina (parallasse in sito.js); ferme,
   senza JavaScript, funzionano lo stesso.
   ========================================================================= */
.numeroni{position:relative;overflow:hidden;padding:calc(var(--aria) * 1.1) var(--lato);
  display:flex;flex-direction:column;gap:clamp(1rem,4vh,3.4rem);
  border-top:1px solid var(--filo);margin-top:var(--aria)}
.numerone{will-change:transform}
.numerone:nth-child(1){align-self:flex-start}
.numerone:nth-child(2){align-self:flex-end;text-align:right}
.numerone:nth-child(3){align-self:center;text-align:center}
.numerone .cifra{display:block;font-family:Archivo,Impact,sans-serif;font-weight:800;
  font-stretch:112%;font-size:clamp(4.5rem,17vw,15rem);line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:2px rgba(150,194,34,.55);paint-order:stroke fill}
.numerone .che{display:block;margin-top:.9rem;font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--verde-cupo);font-weight:600}
@media (max-width:700px){
  .numerone .cifra{-webkit-text-stroke-width:1.5px}
  .numerone:nth-child(2),.numerone:nth-child(3){align-self:flex-start;text-align:left}
}

/* ============================================================================
   I BLOCCHI DELLA SCHEDA — lo stampo del Corso Base serale (29/08/2026).
   Vengono dal mockup approvato: sono i blocchi della pagina ufficiale
   convertiti nel mondo del sito nuovo. Ogni scheda accende i suoi dal file
   di testo, quindi qui si veste tutto una volta sola.
   ========================================================================= */
.sez-voci,.sez-serata,.sez-doppia,.sez-programma,.sez-faq{padding:var(--aria) var(--lato) 0}
.sez-voci .eti,.sez-serata .eti,.sez-programma .eti,.sez-faq .eti{
  font-size:.69rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--verde);margin:0 0 2rem}

/* l'altro turno: è la cosa che il sito vecchio dice e il nuovo dimenticava */
.turno{margin:var(--aria) var(--lato) 0;border-left:3px solid var(--verde);
  background:rgba(20,22,15,.5);padding:1.6rem 2rem;display:flex;gap:2rem;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.turno p{margin:0;max-width:64ch;color:#d9d8cf}
.turno b{color:var(--testo)}
.turno-vai{white-space:nowrap;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--verde);text-decoration:none;
  border-bottom:1px solid var(--verde);padding-bottom:.25rem}

/* ti ci riconosci: le frasi vere di chi arriva */
.voci{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:62rem}
.voce-virg{border-top:1px solid var(--filo);padding-top:1.1rem;margin:0;
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.25;color:var(--crema)}
.voci-dopo{margin:2.4rem 0 0;font-size:1.14em;color:#d9d8cf;max-width:52ch}

/* com'è fatta una serata */
.serata{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3.4rem;max-width:70rem}
.met{border-top:2px solid var(--verde-cupo);padding-top:1.3rem}
.met h3{font-size:1.3rem;margin:0 0 .7rem;text-transform:none}
.met p{margin:0;color:#d9d8cf}
.serata .fuori-testo{grid-column:2;margin-top:1.4rem}
.fuori-testo{margin:2.6rem 0 0;font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.3;color:var(--verde);max-width:44ch}

/* cosa impari · come stai alla fine */
.doppia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4.4rem;max-width:74rem}
.doppia h2{font-size:clamp(1.4rem,2.6vw,2rem);margin:0 0 1.3rem}
.doppia ul{margin:0;padding:0;list-style:none}
.doppia li{border-top:1px solid var(--filo);padding:.9rem 0;color:#d9d8cf}

/* il programma, con l'uscita al suo posto e non in coda */
.passo{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1.9rem;
  padding:1.4rem 0;border-top:1px solid var(--filo);align-items:baseline;max-width:62rem}
.passo .n{font-family:Archivo,Impact,sans-serif;font-weight:800;font-stretch:112%;
  font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:.8;color:var(--verde-cupo)}
.passo h3{font-size:clamp(1.05rem,1.8vw,1.35rem);margin:0;text-transform:none}
.passo .quando-p{color:var(--tenue);font-size:.9rem;margin:.4rem 0 0}
.passo.uscita{background:rgba(150,194,34,.09);padding-left:1.3rem;padding-right:1.3rem;
  border-top:1px solid var(--verde-cupo)}
.passo.uscita .n,.passo.uscita h3{color:var(--verde)}

/* le domande: sono il «cosa è compreso» scritto meglio */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3.6rem;max-width:74rem}
.dom{border-top:1px solid var(--filo);padding:1.3rem 0}
.dom h3{font-size:1.1rem;margin:0 0 .5rem;text-transform:none;color:var(--verde)}
.dom p{margin:0;color:#d9d8cf}

@media (max-width:800px){
  .voci,.serata,.doppia,.faq{grid-template-columns:1fr;gap:1rem}
  .doppia{gap:2.6rem}
  .serata{gap:2rem}
  .serata .fuori-testo{grid-column:1}
  .passo{grid-template-columns:3.4rem minmax(0,1fr);gap:1.1rem}
  .turno{flex-direction:column;align-items:flex-start;gap:1.1rem}
}

/* ------------------------------------------------------------- i docenti
   Chi insegna quel corso. I ritratti dello studio sono a coppie — uno serio
   e uno simpatico — e qui si SCAMBIANO: col mouse sopra, e al tocco dove il
   mouse non c'è. È l'animazione promessa anni fa a Marco da chi fece
   veronafotografo.it e mai realizzata; sul sito di LEA Danza esiste, ed è
   quella che ha indicato lui (11/09/2026).
   🔴 La coppia è un'aggiunta, non un requisito: `.due` esce solo quando le
   fotografie sono davvero due, e una carta senza foto resta una carta. */
.docenti{padding:var(--aria) var(--lato) 0}
.docenti .eti{font-size:.69rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--verde);margin:0 0 2rem}
.docenti-elenco{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2.6rem}
.docente{width:min(16rem,calc(50% - 1.3rem));margin:0}
.docente .ritratto{display:block;position:relative;aspect-ratio:2/3;overflow:hidden;
  background:var(--scuro-2);border:1px solid var(--filo);
  transition:border-color var(--tempo)}
.docente .ritratto img{width:100%;height:100%;object-fit:cover;display:block}
.docente .ritratto .altra{position:absolute;inset:0;opacity:0;
  transition:opacity var(--tempo)}
.docente.gira:hover .ritratto,.docente.gira.aperta .ritratto{border-color:var(--verde)}
.docente.gira:hover .altra,.docente.gira.aperta .altra{opacity:1}
.docente .chi{display:block;margin-top:.9rem}
.docente strong{display:block;font-size:1.05rem;font-weight:600}
.docente .ruolo{display:block;color:var(--verde);font-size:.82rem;margin-top:.2rem}
.docente .nota{display:block;color:var(--tenue);font-size:.82rem;margin-top:.35rem}
/* senza fotografia niente riquadro vuoto: resta il nome, che è la cosa vera.
   Un segnaposto a righe al posto della faccia dice al visitatore «qui ci
   manca una foto», che non è una cosa da dirgli. */
.docente.senza-faccia{width:auto;min-width:12rem}
.docente.senza-faccia .chi{margin-top:0}
/* chi non vuole animazioni non le ha: resta la foto seria, ferma */
@media (prefers-reduced-motion:reduce){
  .docente .ritratto .altra{transition:none}
}
@media (max-width:560px){
  .docenti-elenco{gap:1.6rem}
  .docente{width:calc(50% - .8rem)}
}

/* --- questionario «Trova il tuo corso» --- */
/* La testata sta sopra un componente largo 1280: si allarga anche lei, ma
   il padding in alto resta quello di .scheda-testa (senza, il titolo finisce
   sotto la barra del menù). */
.pagina-test .scheda-testa{max-width:1280px;margin-inline:auto;padding-left:12px;padding-right:12px;
  padding-bottom:calc(var(--aria) * .35)}
.rimando-test{max-width:820px;margin:0 auto;padding:0 24px 40px;text-align:center;font-size:1.05rem}
.rimando-test a{color:inherit}

/* La cartina di «Dove siamo» -------------------------------------------------
   L'incorporamento pubblico di Google porta dentro la scheda dello studio:
   nome, indirizzo, stelle e numero di recensioni. I testi delle recensioni no,
   e infatti sotto la cartina ci sono i nostri, scelti a mano. */
.sez-mappa{padding:var(--aria) var(--lato) 0}
.sez-mappa .eti{margin:0 0 1.3rem;font-size:.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tenue);font-weight:600}
.mappa{border:1px solid var(--filo);background:rgba(0,0,0,.12);
  height:clamp(19rem,46vh,32rem);overflow:hidden}
.mappa iframe{display:block;width:100%;height:100%;border:0}
/* Il riquadro che sta al posto della mappa finche' nessuno la chiede. */
.mappa-cancello{height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.1rem;text-align:center;padding:2rem var(--lato)}
.mappa-dove{margin:0;font-size:clamp(1.05rem,2.2vw,1.35rem);line-height:1.35}
.mappa-nota{margin:0;max-width:44ch;font-size:.8rem;line-height:1.5;color:var(--tenue)}
.mappa-recensioni{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.1rem,2.6vw,2.4rem);margin-top:clamp(1.7rem,4vw,2.9rem)}
@media (max-width:900px){.mappa-recensioni{grid-template-columns:1fr}}
.mini-rec{margin:0;border-top:2px solid var(--verde);padding-top:1.1rem}
.mini-stelle{margin:0 0 .55rem;color:var(--verde);font-size:.8rem;letter-spacing:.18em}
.mini-rec blockquote{margin:0;font-size:1rem;line-height:1.6}
.mini-rec figcaption{margin-top:.9rem;font-size:.78rem;letter-spacing:.05em;color:var(--tenue)}
.mappa-tutte{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.4rem;
  margin-top:clamp(1.4rem,3vw,2.2rem);font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;font-weight:600;color:var(--verde);text-decoration:none}
.mappa-voto{color:var(--testo)}
.mappa-tutte b{display:inline-block;transition:transform var(--tempo)}
.mappa-tutte:hover b{transform:translateX(5px)}

/* ===========================================================================
   LA STAMPA — il foglio che esce dal tasto «Stampa le date».
   🔴 È un documento, non uno scarto della pagina web. Il primo giro l'ho fatto
   togliendo pezzi al sito e basta: testo attaccato al bordo, niente logo,
   niente gerarchia. Bocciato da Marco il 17/09/2026, e aveva ragione — avevo
   controllato che il testo giusto ci fosse, non come stava sul foglio.
   Quello che esce adesso: marchio, nome del corso, le date, i contatti.
   🔴 Le misure sono in millimetri, non in pixel: su carta il pixel non esiste.
   =========================================================================== */
/* 🔴 `margin:0` sulla pagina, e lo spazio bianco lo fa il CONTENUTO qui sotto.
   Sembra al contrario ed e' deliberato: il margine di @page lo SCAVALCA la
   finestra di stampa del browser, dove «Margini: nessuno» e' una voce che si
   sceglie con un clic — e in quel caso il testo finisce attaccato al bordo del
   foglio. E' successo a Marco due volte di fila il 17/09/2026, mentre la mia
   prova con Chrome headless (che usa i margini predefiniti) usciva giusta: il
   collaudo non riproduceva il caso vero. Con lo spazio dentro il contenuto il
   foglio esce uguale comunque siano impostati i margini. */
@page{size:A4;margin:0}
@media print {
  :root{--fondo:#fff;--scuro-2:#fff;--testo:#111;--tenue:#555;--filo:#c8c8c8;--verde:#111}
  html,body{background:#fff !important;color:#111 !important;font-size:10.5pt}
  /* Via tutto quello che appartiene allo schermo. I tasti stampati sarebbero
     rettangoli vuoti, e il riquadro dei cookie una domanda senza risposta. */
  .testata,.menu,.piede,#consenso-cookie,.tasti-grazie,.scheda-hero,
  .bottone,.bottone-filo,.torna,nav{display:none !important}
  .pagina-grazie{min-height:0;display:block;padding:16mm 18mm 14mm}
  .pagina-grazie .iscrizione{max-width:none;margin:0;padding:0;border:0;background:none}
  /* Sul foglio resta SOLO il capitolo delle date: è quello che si stampa. */
  .pagina-grazie h1,.pagina-grazie h2,.pagina-grazie p,.pagina-grazie .quando{display:none}

  /* --- la testata del foglio ------------------------------------------- */
  .foglio-testata{display:block !important;margin:0 0 9mm}
  .foglio-testata img{display:block;width:46mm;height:auto;margin:0 0 7mm}
  .foglio-corso{display:block !important;font-family:Archivo,sans-serif;font-weight:800;
    font-stretch:112%;font-size:17pt;line-height:1.1;margin:0;color:#111;letter-spacing:-.01em}
  .foglio-eti{display:block !important;font-size:8pt;letter-spacing:.18em;
    text-transform:uppercase;color:#666;margin:2mm 0 0;font-weight:600}

  /* --- l'elenco delle date --------------------------------------------- */
  .pagina-grazie h2.da-stampare{display:none}
  .tutte-le-date{display:block;border:0;background:none;margin:0;
    border-top:1.4pt solid #111}
  .tutte-le-date li{display:flex;justify-content:flex-start;align-items:baseline;
    gap:8mm;background:none;border-bottom:.5pt solid #d2d2d2;padding:3.1mm 0;
    break-inside:avoid;page-break-inside:avoid}
  .tutte-le-date .data-eti{color:#666;min-width:32mm;font-size:7.6pt;letter-spacing:.14em}
  .tutte-le-date li>span:last-child{font-size:11.5pt}
  /* L'uscita pratica si stacca: è l'unica che non è una serata in studio. */
  .tutte-le-date li.uscita{border-bottom:1.4pt solid #111;font-weight:600}

  /* --- il piede del foglio --------------------------------------------- */
  /* 🔴 `max-width:none` serve: `.pagina-grazie p` limita a 52ch, che su carta
     stringeva il piede a meta' foglio e spezzava «corsi-fotografia-verona.it»
     in due righe, con il filetto sopra lungo la meta' del resto. */
  .pagina-grazie .riga-stampa{display:block !important;max-width:none;margin-top:9mm;padding-top:3mm;
    border-top:.5pt solid #d2d2d2;font-size:8.2pt;color:#666;line-height:1.6}
  .solo-stampa{display:inline !important}
}
.riga-stampa,.foglio-testata,.solo-stampa{display:none}