/* ==========================================================================
   Tutti prompti, versione «sole» (18 settembre 2026)
   Un'idea grafica sola: una pagina bianca, istituzionale, dove l'unica cosa
   giocosa è il piccolo sole del marchio. Due colori per volta, come nel logo:
   carbone per testo, titoli, bottone principale e filetti (al 22%); grigio-lilla
   per la parola «prompti», i link, le note e il testo secondario. La vaniglia è
   solo una superficie (il riquadro del corso, l'evidenza al passaggio del mouse,
   la selezione del testo) e mai un colore di testo. Un serif per i titoli
   (Source Serif 4) e un sans per il testo e l'interfaccia (Source Sans 3),
   colonna di lettura di 38rem, nessuna ombra, nessun gradiente, nessun angolo
   arrotondato, un solo bottone principale per pagina.
   Il sole si muove altrove: css/sole.css e js/sole.js (l'agente «sole»). Qui
   c'è solo lo spazio in cui il marchio lo contiene.
   Contrasti (WCAG): carbone su bianco 16,8:1; grigio-lilla su bianco 5,2:1 (AA);
   carbone su vaniglia 14,2:1; grigio-lilla su vaniglia 4,4:1, quindi dentro il
   riquadro vaniglia le note sono carbone.
   ========================================================================== */

/* ---------- 1. Palette e caratteri ------------------------------------------ */
:root {
  --fondo: #FFFFFF;
  --testo: #1C1D21;                  /* carbone */
  --testo-2: #716A76;                /* grigio-lilla: note e testo secondario */
  --link: #716A76;
  --superficie: #F4EEA9;             /* vaniglia: solo superfici */
  --linea: rgba(28, 29, 33, 0.22);   /* i filetti: carbone al 22% */

  --font-titoli: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-testo: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --peso-testo: 400;
  --peso-ui: 600;                    /* navigazione, bottoni, parole in evidenza */
  --peso-titolo: 600;                /* h1 e h2 */
  --peso-h3: 500;
  --corpo: 1.1875rem;                /* 19 px */
  --interlinea: 1.6;

  --misura: 38rem;                   /* colonna di lettura: 65-70 caratteri */
  --largo: 68rem;
  --margine: 1.25rem;
  --spazio: 1.25rem;
  --sezione: 3.5rem;
  --curva: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 48em) { :root { --margine: 3rem; --sezione: 5rem; } }
@media (min-width: 64em) { :root { --margine: 4rem; } }

/* ---------- 2. Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--fondo);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--font-testo);
  font-weight: var(--peso-testo);
  font-size: var(--corpo);
  line-height: var(--interlinea);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 30em) { body { font-size: calc(var(--corpo) - 0.0625rem); } }

h1, h2, h3 { margin: 0 0 0.6em; font-family: var(--font-titoli); font-weight: var(--peso-titolo); line-height: 1.15; color: var(--testo); letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.1rem); }
h3 { font-size: 1.25em; font-weight: var(--peso-h3); margin-bottom: 0.35em; }
p, ul, ol, figure, dl { margin: 0 0 var(--spazio); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
.prosa { max-width: var(--misura); }
.piccolo, .nota { font-size: 0.875em; color: var(--testo-2); line-height: 1.55; }
strong { font-weight: var(--peso-ui); }
em { font-style: italic; }

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--testo); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--testo); outline-offset: 3px; }
::selection { background: var(--superficie); color: var(--testo); }
img { max-width: 100%; height: auto; }

.contenitore { width: min(var(--largo), 100% - 2 * var(--margine)); margin-inline: auto; }
.salta { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: 0.5rem 1rem; background: var(--fondo); color: var(--testo); border: 1px solid var(--testo); }
.salta:focus { top: 1rem; }

/* ---------- 3. Testata ------------------------------------------------------- */
/* Marchio a sinistra, navigazione a destra, un filetto sotto. Il logo è un svg
   incollato nella pagina (così il sole si può animare): la larghezza è qui,
   l'altezza viene dalle proporzioni del disegno. */
.testata { padding: 1.3rem 0 1rem; border-bottom: 1px solid var(--linea); }
.testata .contenitore { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 2rem; }
.marchio { display: inline-flex; line-height: 0; color: var(--testo); }
.marchio svg { display: block; width: 240px; height: auto; aspect-ratio: 720 / 277.5; overflow: visible; }
@media (max-width: 30em) { .marchio svg { width: 190px; } }
.nav ul { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-block; font-family: var(--font-testo); font-weight: var(--peso-ui); font-size: 0.95em; color: var(--testo); text-decoration: none; padding: 0.3rem 0.35rem; margin-inline: -0.35rem; border-bottom: 2px solid transparent; transition: background-color 150ms var(--curva); }
.nav a:hover { background: var(--superficie); }
.nav a[aria-current="page"] { border-bottom-color: var(--testo); }
/* Il bottone chiaro/scuro in fondo al menu (lo aggiunge js/aspetto.js, dal 26
   settembre 2026): si presenta come le voci del menu, con la sua icona. */
.nav .aspetto { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-testo); font-weight: var(--peso-ui); font-size: 0.95em; line-height: inherit; color: var(--testo); background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.3rem 0.35rem; margin-inline: -0.35rem; cursor: pointer; transition: background-color 150ms var(--curva); }
.nav .aspetto:hover { background: var(--superficie); }
.nav .aspetto svg { flex-shrink: 0; }
@media (max-width: 30em) {
  .testata .contenitore { justify-content: center; text-align: center; }
  .nav ul { justify-content: center; gap: 0.2rem 0.9rem; }
}

/* ---------- 4. Apertura ------------------------------------------------------ */
/* Titolo e promessa su una colonna larga: intorno c'è aria, non altro. */
.apertura { padding: calc(var(--sezione) * 1.1) 0 var(--sezione); }
.apertura h1 { max-width: 20ch; }
.apertura .promessa { font-size: 1.15em; max-width: var(--misura); }
.apertura .azioni { margin-top: 1.6rem; }
.apertura-centrata h1 { max-width: none; }

/* ---------- 5. Sezioni ------------------------------------------------------- */
.sezione { padding: var(--sezione) 0; border-top: 1px solid var(--linea); }
.due-colonne { display: grid; gap: 1rem 3rem; }
@media (min-width: 48em) { .due-colonne { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.due-colonne h2 { margin-bottom: 0.4em; }

/* Il riquadro del corso: la sola superficie vaniglia della pagina, con un bordo
   carbone sottile. Dentro, anche le note sono carbone (la vaniglia abbassa il contrasto). */
.blocco { padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--superficie); border: 1px solid var(--testo); }
.blocco h2 { margin-bottom: 0.3em; }
.blocco .piccolo { color: var(--testo); }
.blocco a { color: var(--testo); }

/* Bottoni: squadrati, senza ombre, un solo principale per pagina.
   Il principale è carbone; al passaggio diventa grigio-lilla. Il secondario è solo testo sottolineato. */
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 1.4rem; }
.bottone { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.4rem; min-height: 3rem; background: var(--testo); color: #fff; font-family: var(--font-testo); font-weight: var(--peso-ui); font-size: 0.95em; line-height: 1.3; text-decoration: none; border: 1px solid var(--testo); cursor: pointer; transition: background-color 150ms var(--curva), border-color 150ms var(--curva); }
.bottone:hover, .bottone:focus-visible { background: var(--testo-2); border-color: var(--testo-2); color: #fff; }
.bottone svg { width: 1em; height: 1em; }
.bottone-2 { font-family: var(--font-testo); font-weight: var(--peso-ui); font-size: 0.95em; color: var(--testo); text-decoration: underline; text-underline-offset: 0.2em; }
.bottone-2:hover { color: var(--link); }
.nota-iscriviti { margin-top: 1rem; max-width: var(--misura); }

/* Il programma delle lezioni: una scheda per lezione che si apre al clic (data e titolo nel summary,
   poi «Cosa impari / Cosa provi / Cosa porti a casa»), filetti tra le righe, il + che diventa – come nelle domande */
.lezioni { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--linea); }
.lezioni li { border-bottom: 1px solid var(--linea); }
.lezioni summary { position: relative; display: grid; gap: 0.2rem 2rem; padding: 1.1rem 2.5rem 1.1rem 0; cursor: pointer; list-style: none; }
.lezioni summary::-webkit-details-marker { display: none; }
.lezioni summary::after { content: "+"; position: absolute; right: 0.25rem; top: 1rem; font-size: 1.35em; line-height: 1; color: var(--testo-2); }
.lezioni details[open] summary::after { content: "–"; }
.lezioni summary:hover { background: var(--superficie); }
.lezioni .data { font-weight: var(--peso-ui); color: var(--testo-2); font-size: 0.95em; padding-top: 0.15em; }
.lezioni .tema { font-family: var(--font-titoli); font-weight: var(--peso-h3); font-size: 1.15em; }
.lezioni dl { display: grid; gap: 0.3rem 2rem; margin: 0 0 1.2rem; }
.lezioni dt { font-weight: var(--peso-ui); color: var(--testo-2); font-size: 0.95em; padding-top: 0.1em; }
.lezioni dd { margin: 0 0 0.5rem; max-width: var(--misura); }
@media (min-width: 40em) {
  .lezioni summary, .lezioni dl { grid-template-columns: 9rem minmax(0, 1fr); }
  .lezioni dd { margin-bottom: 0; }
}
.lezioni + .prosa { margin-top: 1.5rem; }

/* Le domande frequenti: una riga per domanda, il segno + che diventa – */
.domande { border-top: 1px solid var(--linea); max-width: 46rem; }
.domande details { border-bottom: 1px solid var(--linea); }
.domande summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 0.95rem 0; cursor: pointer; list-style: none; font-weight: var(--peso-ui); }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: "+"; flex-shrink: 0; font-size: 1.35em; line-height: 1; color: var(--testo-2); }
.domande details[open] summary::after { content: "–"; }
.domande summary:hover { background: var(--superficie); }
.domande details p { padding: 0 2.5rem 1.1rem 0; max-width: var(--misura); }

/* Il pulsantino «?» accanto a una parola, come una nota a piè di pagina: porta alla domanda
   delle Informazioni pratiche che la spiega, e js/rimandi.js la apre. Dalla risposta,
   «Torna al testo» riporta al punto di partenza. L'area che si tocca è più grande del
   cerchio, per il dito sul telefono. Per ora c'è solo su «prototipo», nella pagina del corso. */
.rimando { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; margin-left: 0.2em; vertical-align: 0.4em; font-size: 0.7em; font-weight: var(--peso-ui); line-height: 1; color: var(--testo); text-decoration: none; border: 1.5px solid currentColor; border-radius: 50%; }
.rimando::before { content: ""; position: absolute; inset: -0.6em; }
.rimando:hover { background: var(--superficie); }
.domande details:target > summary { background: var(--superficie); }
.domande .torna { white-space: nowrap; font-size: 0.92em; color: var(--testo-2); }
@media print { .rimando { display: none; } }

/* Chi insegna: foto in misura da scheda, non da copertina */
.firma { display: grid; gap: 1.5rem 3rem; align-items: start; }
@media (min-width: 40em) { .firma { grid-template-columns: 14rem minmax(0, 1fr); } }
.firma img { display: block; width: 100%; max-width: 14rem; }

/* Corso: il video di presentazione */
.video-corso { max-width: 52rem; margin: 1.5rem 0 0; }
.video-corso video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #FAF7EE; border: 1px solid var(--linea); }
.video-corso figcaption { margin-top: 0.7rem; }

/* Chi sono (pagina breve): testo a sinistra, ritratto a destra */
.ritratto-largo { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 48em) { .ritratto-largo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .ritratto-largo img { max-width: 26rem; margin-left: auto; } }

/* Strumenti: l'elenco e il modulo email (il markup è quello di js/strumenti.js) */
.elenco-strumenti { list-style: none; padding: 0; margin: 0; max-width: 46rem; }
.elenco-strumenti li { padding: 1.6rem 0; border-top: 1px solid var(--linea); }
.elenco-strumenti li:first-child { border-top: 0; padding-top: 0; }
.elenco-strumenti strong { display: block; font-family: var(--font-titoli); font-size: 1.3em; font-weight: var(--peso-h3); margin-bottom: 0.4rem; }
.richiesta { margin-top: 1.2rem; max-width: var(--misura); }
.richiesta label { display: block; margin-bottom: 0.6rem; }
.richiesta-riga { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.richiesta input[type="email"] { flex: 1 1 14rem; min-width: 0; padding: 0.7rem 0.9rem; font: inherit; color: var(--testo); background: var(--fondo); border: 1px solid var(--testo); }
.richiesta input[type="email"]:focus { outline: 2px solid var(--testo); outline-offset: 2px; }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.richiesta-esito { margin: 0.8rem 0 0; font-weight: var(--peso-ui); }
.richiesta-esito.errore { color: var(--testo); border-left: 3px solid var(--testo); padding-left: 0.7rem; }   /* niente rosso nella palette: l'errore si segna con un filetto pieno */
.richiesta.inviato .richiesta-riga { display: none; }
.richiesta-nota { margin-top: 0.8rem; }

/* Privacy e documenti lunghi */
.documento { max-width: var(--misura); }
.documento h2 { font-size: 1.4em; margin: 2rem 0 0.6rem; }
.documento h2:first-child { margin-top: 0; }
.aggiornata { margin-top: 2.5rem; }

/* ---------- 6. Piè di pagina ------------------------------------------------- */
/* Un filetto, l'elenco delle pagine, due paragrafi, il logo impilato a destra */
.pie { border-top: 1px solid var(--linea); padding: 2.2rem 0 2.8rem; font-size: 0.92em; color: var(--testo-2); }
.pie .contenitore { display: grid; gap: 1.2rem 3rem; align-items: start; }
@media (min-width: 48em) { .pie .contenitore { grid-template-columns: minmax(0, 1fr) auto; } }
.pie ul { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.pie ul a { font-weight: var(--peso-ui); color: var(--testo); text-decoration: none; }
.pie ul a:hover, .pie ul a[aria-current="page"] { text-decoration: underline; }
.pie p { max-width: var(--misura); margin-bottom: 0.5rem; }
.pie-logo { display: inline-block; line-height: 0; }
.pie-logo svg { display: block; width: 120px; height: auto; aspect-ratio: 463.1 / 541.8; overflow: visible; }

/* ---------- 7. Movimento ridotto e stampa ------------------------------------ */
/* Qui si fermano solo le transizioni di questo foglio: quelle del sole le governa
   css/sole.css, che ha la sua regola per «riduci movimento». */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav a, .bottone { transition: none; }
}
@media print {
  .salta { display: none; }
  body { color: #000; }
  a { color: #000; }
}