/* ==========================================================================
   I riquadri della versione «cielo-sfera» (20-22 settembre 2026)
   Il testo sta su riquadri trasparenti al 76%: nuvole, sole e uccelli si vedono
   anche dietro le parole. I riquadri sono larghi quanto il testo (46rem) e
   centrati, quindi il cielo si vede ai lati e in una fascia tra l'uno e l'altro.
   Dal 22 settembre, scelti da Isabella tra le proposte del 21:
   - riquadri «I»: un contorno carbone e, dietro, una forma dello stesso
     riquadro spostata in basso a destra, col suo contorno, come una stampa a
     due colori fuori registro. Dietro i riquadri bianchi la forma è vaniglia,
     dietro il riquadro giallo del corso è lilla. Tutto resta
     trasparente: la forma dietro è disegnata solo dove sporge (un ritaglio a L),
     così il cielo si vede anche attraverso di lei. Sul riquadro giallo si
     affaccia il sole del marchio, con le mani sul bordo, e si culla piano;
   - bottoni «14»: il contorno da una parte e il colore spostato dall'altra
     (vaniglia il principale, lilla il secondario, bianco il principale dentro
     il riquadro giallo); passandoci sopra il colore torna a registro.
   Titoli al centro, testo giustificato (con la sillabazione italiana), sezioni a
   una colonna sola; nella testata marchio e navigazione al centro.
   Non hanno riquadro la testata di ogni pagina, l'apertura della home e, dal 22
   settembre, l'apertura del corso e il piè di pagina: marchio, navigazione,
   titolo, promessa, bottoni e le righe del piè stanno sul cielo.
   Quando il sole non ha ancora raggiunto una sezione, il suo riquadro sta in
   penombra: la superficie si vela appena di grigio-lilla. La classe
   «in-penombra» la mette e la toglie js/veduta.js, e vale solo se il cielo è
   disegnato (classe «veduta-attiva» su <html>).
   Questo foglio va dopo css/sito.css, di cui cambia le fasce (via i filetti che
   separavano le sezioni), i bottoni e l'impaginazione delle sezioni.
   ========================================================================== */

:root {
  /* I riquadri lasciano passare il cielo. Con questa trasparenza, anche sopra il
     pixel più scuro del cielo il grigio-lilla di note e link resta sopra 4,5:1. */
  --riquadro: rgba(255, 255, 255, 0.76);
  --riquadro-ombra: rgba(237, 233, 242, 0.78);   /* la superficie in penombra */
  --vaniglia-velo: rgba(244, 238, 169, 0.8);     /* il riquadro giallo del corso */
  --vaniglia-ombra: rgba(230, 225, 205, 0.82);   /* lo stesso, in penombra */
  /* La forma fuori registro dietro i riquadri: quanto è spostata, il filo del
     contorno, i due colori (vaniglia; lilla, cioè il malva chiaro #CBC1CD). */
  --sfasa: 9px;
  --filo: 1.5px;
  --dietro-vaniglia: rgba(244, 238, 169, 0.82);
  --dietro-lilla: rgba(203, 193, 205, 0.82);
  --aria: clamp(1.8rem, 5vw, 2.8rem);  /* lo spazio di cielo tra un riquadro e l'altro */
  /* I riquadri sono larghi quanto il testo, non quanto la pagina. */
  --largo: 46rem;
  /* Il grigio-lilla di note e link, un poco più scuro del #716A76 della versione
     sole: serve margine perché i riquadri sono trasparenti. */
  --testo-2: #5F5966;
  --link: #5F5966;
}

/* ---------- 1. Le fasce: solo aria, niente filetti ------------------------- */
/* Sotto ogni riquadro sporge la forma sfalsata: l'aria tra i riquadri ne tiene conto. */
.testata,
.apertura,
.sezione,
.pie {
  border: 0;
  padding: calc(var(--aria) + var(--sfasa)) 0 0;
}
.testata { padding-top: var(--aria); }
.pie { padding-bottom: calc(var(--aria) * 1.8); }

/* ---------- 2. La testata: marchio e navigazione al centro, e segue chi scorre
   Come nel sito in linea, la testata resta in cima alla finestra mentre si
   scorre. In cima alla pagina sta sul cielo, grande; scorrendo il marchio esce
   di vista e resta attaccata la riga del menu, su una fascia bianca trasparente
   con il filo carbone sotto. Fin dove sale (--testata-cima) e la classe
   «scorsa» li mette js/testata.js; senza script la testata scorre via con la
   pagina. I titoli a cui portano i collegamenti interni si fermano sotto la fascia. */
.testata .contenitore { flex-direction: column; justify-content: center; align-items: center; gap: 0.75rem; text-align: center; }
.nav ul { justify-content: center; }
.testata { padding-bottom: 0.4rem; transition: background-color 200ms var(--curva), box-shadow 200ms var(--curva); }
html.testata-segue .testata { position: sticky; top: var(--testata-cima, 0px); z-index: 20; }
.testata.scorsa {
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 var(--filo) 0 0 var(--testo);
}
main [id] { scroll-margin-top: 4.5rem; }
/* Le lingue del sito (dal 9 ottobre 2026): una riga piccola sopra il marchio,
   che scorrendo esce di vista con lui. La lingua della pagina ha il filo sotto,
   come la voce del menu della pagina aperta. */
.lingue ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.1rem 0.9rem; margin: 0; padding: 0; list-style: none; }
.lingue a { display: inline-block; font-family: var(--font-testo); font-weight: var(--peso-ui); font-size: 0.85em; color: var(--testo); text-decoration: none; padding: 0.15rem 0.3rem; margin-inline: -0.3rem; border-bottom: 2px solid transparent; transition: background-color 150ms var(--curva); }
.lingue a:hover { background: var(--superficie); }
.lingue a[aria-current] { border-bottom-color: var(--testo); }
/* La nota sotto i bottoni dell'apertura (pagine straniere del corso: «il corso è in
   italiano, su misura in inglese») sta sul cielo, senza riquadro: colore pieno, come
   il menu, perché il grigio-lilla delle note lì non regge il contrasto (3,4:1). */
.apertura .nota-iscriviti,
.apertura .nota-iscriviti a { color: var(--testo); }
.apertura .nota-iscriviti { margin-top: 1rem; }
/* I due passi per iscriversi (dal 9 ottobre 2026), nei riquadri gialli del corso:
   prima il modulo (codice e invito all'incontro), poi Eventbrite. */
.passi { max-width: var(--misura); margin: 0.8rem auto 0; padding-left: 1.6rem; text-align: left; }
.passi li { margin-bottom: 0.5rem; padding-left: 0.3rem; }
.passi li::marker { font-weight: var(--peso-ui); }
/* Sul telefono (dal 19 ottobre 2026) la testata va su quattro righe (lingue,
   marchio, menu, chiaro/scuro): meno aria sopra le lingue, tra una riga e
   l'altra e prima della prima sezione, altrimenti il titolo arriva a metà schermo. */
@media (max-width: 30em) {
  .testata { padding-top: 0.9rem; }
  .testata .contenitore { gap: 0.45rem; }
  main > section:first-child { padding-top: calc(0.9rem + var(--sfasa)); }
}

/* ---------- 3. I riquadri, fuori registro ------------------------------------
   Il riquadro ha il contorno; la forma dietro (::before) è lo stesso rettangolo
   spostato di --sfasa in basso a destra, col suo contorno, ritagliata a L: si
   vede solo dove sporge. Il riquadro è un contesto a sé (isolation), così la
   forma sta sotto le parole e sopra il cielo. */
.apertura > .contenitore,
.sezione > .contenitore,
.pie > .contenitore,
.blocco {
  position: relative;
  isolation: isolate;
  background: var(--riquadro);
  border: var(--filo) solid var(--testo);
  padding: clamp(1.1rem, 2.6vw, 2rem);
  transition: background-color 900ms var(--curva);
}
.apertura > .contenitore::before,
.sezione > .contenitore::before,
.pie > .contenitore::before,
.blocco::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--sfasa) - var(--filo));
  left: calc(var(--sfasa) - var(--filo));
  right: calc(-1 * (var(--sfasa) + var(--filo)));
  bottom: calc(-1 * (var(--sfasa) + var(--filo)));
  background: var(--dietro-vaniglia);
  border: var(--filo) solid var(--testo);
  clip-path: polygon(calc(100% - var(--sfasa)) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - var(--sfasa)), calc(100% - var(--sfasa)) calc(100% - var(--sfasa)));
  pointer-events: none;
}
.blocco::before { background: var(--dietro-lilla); }

/* Il riquadro giallo del corso fa già da riquadro: il contenitore intorno sparisce. */
.sezione > .contenitore:has(> .blocco) {
  background: transparent;
  border: 0;
  padding: 0;
}
.sezione > .contenitore:has(> .blocco)::before { content: none; }
.blocco { background: var(--vaniglia-velo); }

/* L'apertura della home e, dal 22 settembre, quella del corso stanno sul cielo,
   senza riquadro. Il selettore con body vince anche sulla penombra (sezione 5):
   la superficie non torna nemmeno quando la sezione è in-penombra. */
body.home .apertura > .contenitore,
body.corso .apertura > .contenitore { background: transparent; border: 0; padding-inline: 0; }
body.home .apertura > .contenitore::before,
body.corso .apertura > .contenitore::before { content: none; }

/* Anche il piè di pagina sta sul cielo, senza riquadro (22 settembre). Il
   grigio-lilla delle note sul cielo non basta (sul pixel più scuro farebbe
   2,8:1), quindi qui testo e link sono di un grigio-lilla scuro, #34303A, che
   anche lì fa più di 5:1; le voci del menu restano carbone. */
.pie { --testo-pie: #34303A; color: var(--testo-pie); }
.pie p a { color: var(--testo-pie); }
.pie > .contenitore { background: transparent; border: 0; padding-inline: 0; }
.pie > .contenitore::before { content: none; }

/* ---------- 4. Il sole che si affaccia sul riquadro giallo -------------------
   Il sole del marchio spunta dal bordo alto, le mani appoggiate sul filo, e si
   culla: il corpo ruota di 2,5 gradi per parte attorno al punto tra le mani, in
   1,6 secondi per parte; le mani stanno ferme. Il corpo è tagliato alla riga
   y = 74 del disegno, che con lo spostamento qui sotto cade sul bordo del
   riquadro. Passandoci sopra col mouse (sul telefono toccandolo) strizza gli
   occhi in un sorriso, come la mascotte del margine: gli occhi si schiacciano e
   al loro posto compaiono due archetti, le guance salgono, la bocca si allarga.
   Gli archetti sono spenti anche nel disegno (opacity="0" nelle due pagine): il
   22 settembre un browser con in memoria il foglio di prima li mostrava sempre,
   sopra gli occhi ovali, e gli occhi non erano più quelli del logo. */
.blocco:has(> .spunta) { margin-top: 4.6rem; }
.spunta {
  position: absolute;
  bottom: 100%;
  right: 2rem;
  width: clamp(5rem, 16vw, 6.6rem);
  height: auto;
  overflow: visible;
  transform: translateY(calc(6.62% - var(--filo)));
}
.spunta-corpo {
  transform-box: fill-box;
  transform-origin: 50% 71.76%;   /* il punto (0, 74) del disegno, tra le mani */
  animation: spunta-culla 1.6s ease-in-out infinite alternate;
}
.spunta-occhio,
.spunta-guancia,
.spunta-bocca { transform-box: fill-box; transform-origin: center; transition: transform 160ms var(--curva); }
.spunta-riso { opacity: 0; transition: opacity 160ms var(--curva); }
.spunta:hover .spunta-occhio { transform: scaleY(0.08); }
.spunta:hover .spunta-riso { opacity: 1; }
.spunta:hover .spunta-guancia { transform: translateY(-3px) scale(1.1); }
.spunta:hover .spunta-bocca { transform: scale(1.22, 1.12); }
@keyframes spunta-culla {
  from { transform: rotate(-2.5deg); }
  to   { transform: rotate(2.5deg); }
}

/* ---------- 5. Penombra e luce ---------------------------------------------- */
html.veduta-attiva .in-penombra > .contenitore { background: var(--riquadro-ombra); }
html.veduta-attiva .in-penombra .blocco { background: var(--vaniglia-ombra); }
html.veduta-attiva .in-penombra > .contenitore:has(> .blocco),
html.veduta-attiva .pie.in-penombra > .contenitore { background: transparent; }

/* ---------- 6. I bottoni, fuori registro -------------------------------------
   Il contorno sta sul bottone (::after), il colore (::before) è spostato di
   6 e 5 px; passandoci sopra, o col fuoco da tastiera, torna a registro. Scritta
   carbone su tutti. Il colore ha un filo di trasparenza, come i riquadri. */
.bottone,
.bottone-2 {
  --bottone-colore: rgba(244, 238, 169, 0.92);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  background: none;
  color: var(--testo);
  border: 0;
  font-family: var(--font-testo);
  font-weight: var(--peso-ui);
  font-size: 0.95em;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}
.bottone-2 { --bottone-colore: rgba(203, 193, 205, 0.9); }
/* La freccia dei link esterni grande come quella del bottone principale (sito.css la
   misura solo in .bottone): senza, nel secondario si allargava e mandava a capo la scritta. */
.bottone-2 svg { width: 1em; height: 1em; flex-shrink: 0; }
.blocco .bottone { --bottone-colore: rgba(255, 255, 255, 0.9); }
.bottone::before,
.bottone-2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bottone-colore);
  transform: translate(6px, 5px);
  transition: transform 180ms var(--curva);
}
.bottone::after,
.bottone-2::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--filo) solid var(--testo);
  pointer-events: none;
}
.bottone:hover, .bottone:focus-visible,
.bottone-2:hover, .bottone-2:focus-visible,
.blocco a.bottone, .blocco a.bottone-2 { background: none; color: var(--testo); }
.bottone:hover::before, .bottone:focus-visible::before,
.bottone-2:hover::before, .bottone-2:focus-visible::before { transform: translate(0, 0); }
/* Accanto ai colori spostati serve un poco più di spazio. */
.azioni { gap: 1rem 1.7rem; }

/* ---------- 7. L'apertura della home: centrata, sul cielo --------------------
   Sul cielo il titolo ha bisogno di un filo di corpo in più. */
body.home .apertura { padding-top: calc(var(--aria) * 1.6); }
body.home .apertura h1 { font-size: clamp(2.4rem, 1.6rem + 2.8vw, 3.6rem); }
body.home .apertura .promessa { font-size: 1.2em; }
@media (max-width: 30em) { body.home .apertura { padding-top: 1.6rem; } }  /* telefono: vedi la testata, sezione 2 */

/* ---------- 8. Titoli al centro, testo giustificato --------------------------
   Il testo giustificato va a capo con la sillabazione italiana (lang="it"),
   così sul telefono le righe non si riempiono di buchi. */
.apertura > .contenitore { text-align: center; }
.apertura h1,
.apertura .promessa { margin-inline: auto; text-wrap: balance; }
.apertura .azioni,
.sezione .azioni { justify-content: center; }
.sezione h2 { text-align: center; }
.sezione > .contenitore > h2:first-child,
.sezione > .contenitore > .documento > h2:first-child { margin-top: 0; }
.prosa,
.apertura .promessa,
.documento,
.domande,
.domande details p,
.lezioni dd { max-width: none; }
.sezione p,
.apertura p.prosa,
.ritratto-largo p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}
.sezione p.piccolo,
.lezioni + .prosa { text-align: center; }
/* Il modulo della pagina Tools resta allineato a sinistra, col campo email. */
.richiesta p { text-align: left; }
.nota-iscriviti { margin-inline: auto; }
/* Non più usato dal 29 settembre 2026, sera (il prezzo si dice a parole, senza barrare). Il prezzo pieno barrato in rosso nel riquadro del corso, in corso.html e
   nella home (29 settembre 2026).
   Il riquadro è vaniglia anche di notte, quindi il rosso resta lo stesso. */
.prezzo-pieno {
  margin-right: 0.3em;
  font-weight: var(--peso-testo);
  text-decoration: line-through;
  text-decoration-color: #C62828;
  text-decoration-thickness: 0.12em;
}

/* Le sezioni a due colonne (titolo a sinistra, testo a destra) diventano una
   colonna sola: il titolo sopra, al centro, il testo su tutta la larghezza. */
.due-colonne { display: block; }
.due-colonne > h2 { margin-bottom: 0.6em; }

/* Le domande frequenti: su tutta la larghezza del riquadro. */
.domande details p { padding: 0 0 1.1rem; }

/* Il programma: il titolo al centro, le schede delle lezioni come prima. */
.lezioni { margin-top: 1.2rem; }

/* Gli strumenti: il nome al centro, la descrizione giustificata. */
.elenco-strumenti { max-width: none; }
.elenco-strumenti strong { text-align: center; }

/* La privacy è un documento lungo: i sottotitoli restano a sinistra, per scorrerli. */
.documento h2 { text-align: left; }

/* ---------- 9. Chi insegna e Chi sono: foto e testo ---------------------------
   Il titolo sopra, al centro. In «Chi insegna» la foto sta a sinistra e il
   testo tutto accanto, a destra (come preferisce Isabella), in un corpo appena
   più piccolo del resto (0,94), così nella home è alto quanto la foto e sotto
   la foto non resta il buco; la foto sta a metà altezza del testo. Il bottone
   «Il mio percorso» va sotto le due colonne, al centro. In «Chi sono» la foto
   sta a destra e il testo le gira attorno. Sul telefono la foto sta sopra il
   testo, al centro. Nessuna cornice: le foto sono ritagliate. */
.ritratto-largo { display: flow-root; }
.firma img,
.ritratto-largo img { display: block; width: 100%; max-width: none; margin: 0; border: 0; }
.firma picture,
.ritratto-largo picture { display: block; width: min(15rem, 80%); margin: 0 auto 1.2rem; }
.firma { gap: 0.8rem 1.8rem; }
.firma .prosa { max-width: none; }
.firma .prosa p { font-size: 0.94em; }
.firma > .azioni { margin-top: 0.6rem; }
@media (min-width: 40em) {
  .firma { grid-template-columns: 15rem minmax(0, 1fr); align-items: center; }
  .firma > h2,
  .firma > .azioni { grid-column: 1 / -1; }
  .firma picture { width: auto; margin: 0; }
}
@media (min-width: 48em) {
  .firma { grid-template-columns: 19rem minmax(0, 1fr); }
}
@media (min-width: 48em) {
  .ritratto-largo picture { float: right; width: 17rem; margin: 0.2rem 0 1rem 1.8rem; }
}
.ritratto-largo h1 { text-align: center; }
.ritratto-largo .promessa { text-align: justify; text-wrap: wrap; max-width: none; }
/* I due paragrafi di Chi sono hanno il corpo del testo, come quelli del
   riquadro sotto: la promessa, che altrove è più grande (1,15), qui torna a 1. */
.ritratto-largo .promessa { font-size: 1em; }

@media (prefers-reduced-motion: reduce) {
  .apertura > .contenitore,
  .sezione > .contenitore,
  .pie > .contenitore,
  .blocco,
  .bottone::before,
  .bottone-2::before { transition: none; }
  .spunta-corpo { animation: none; }
}
@media print {
  .apertura > .contenitore,
  .sezione > .contenitore,
  .pie > .contenitore,
  .blocco { background: #fff; }
  .apertura > .contenitore::before,
  .sezione > .contenitore::before,
  .pie > .contenitore::before,
  .blocco::before { content: none; }
}

/* Il programma dal 28 settembre 2026: le date con i titoli, senza schede da aprire,
   poi gli obiettivi formativi tutti insieme, in un elenco numerato. */
.lezioni.calendario li { display: grid; gap: 0.2rem 2rem; padding: 0.9rem 0; }
@media (min-width: 40em) {
  .lezioni.calendario li { grid-template-columns: 11rem minmax(0, 1fr); }
}
.obiettivi-titolo { text-align: center; margin-top: 2.2rem; }
.sezione p.obiettivi-attacco { max-width: var(--misura); margin: 0.8rem auto 0.6rem; text-align: left; }
.obiettivi { max-width: var(--misura); margin: 0 auto; padding-left: 1.6rem; }
.obiettivi li { margin-bottom: 0.7rem; padding-left: 0.3rem; }
.obiettivi li::marker { color: var(--testo-2); font-weight: var(--peso-ui); }
.obiettivi + .prosa { margin: 1.5rem auto 0; text-align: center; }
/* Dal 29 settembre 2026, sera: al posto delle date con i titoli, una frase sulla
   prima edizione sotto il titolo e, in fondo, i corsi che verranno; al centro. */
.sezione p.edizione-attacco,
.sezione p.edizione-seguito { margin: 1rem auto 0; text-align: center; }
.sezione p.riga-centrata { text-align: center; text-wrap: balance; }

/* ---------- 10. Le parole che si accendono scorrendo ------------------------
   Dal 29 settembre 2026: in qualche paragrafo un gruppo di parole (al massimo
   uno per paragrafo) è un <strong class="accento">. Finché non arriva sullo
   schermo è scritto normale; poi js/accenti.js gli dà la classe «acceso» e il
   peso sale fino al grassetto, mentre sotto le parole passa, da sinistra, un
   tratto di evidenziatore: vaniglia sui riquadri bianchi, lilla sul riquadro
   giallo. La spaziatura si stringe mentre il peso sale (--stringi, misurata
   dallo script), così il testo giustificato non si muove. Senza script, o con
   «riduci movimento», le parole sono già in grassetto e l'evidenziatore c'è già. */
:root { --evidenzia: rgba(244, 238, 169, 0.95); }
.blocco { --evidenzia: rgba(203, 193, 205, 0.85); }
.accento {
  font-weight: 700;
  background-image: linear-gradient(var(--evidenzia), var(--evidenzia));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.42em;
}
html.js .accento {
  font-weight: var(--peso-testo);
  letter-spacing: 0;
  background-size: 0% 0.42em;
  transition:
    font-weight 700ms var(--curva),
    letter-spacing 700ms var(--curva),
    background-size 900ms var(--curva) 200ms;
}
html.js .accento.acceso {
  font-weight: 700;
  letter-spacing: var(--stringi, 0);
  background-size: 100% 0.42em;
}
@media (prefers-reduced-motion: reduce) {
  html.js .accento { transition: none; }
}
@media print {
  .accento, html.js .accento { font-weight: 700; background: none; }
}