/* ============================================================
   La veste chiara delle pagine di contenuto.

   Nasce il 22 settembre 2026, estratta dalle due pagine gia'
   rifatte (suoni per studiare e calcolo voto di laurea): stessa
   scala di colore, stessa tipografia, stessi bersagli tattili.
   Prima ogni pagina si portava dentro il suo foglio di stile
   copiato a mano, e bastava correggere un contrasto per doverlo
   fare venti volte.

   I nomi delle classi sono quelli che le pagine usavano gia'
   (wrap, hero, foglio, occhiello, azioni, btn, faq, piede-*):
   cosi' una pagina passa alla veste nuova sostituendo il suo
   blocco <style> con un collegamento a questo file, senza
   toccare il corpo.

   Contrasti verificati con la formula WCAG sul fondo --carta:
   inchiostro 16.4:1, inchiostro-2 7.2:1, inchiostro-3 4.8:1,
   blu 7.5:1, corallo 5.0:1, verde 4.9:1. Tutti sopra 4.5:1.
   ============================================================ */

:root{
  --carta:#FAF8F3;
  --inchiostro:#1A1A18;
  --inchiostro-2:#54544F;
  --inchiostro-3:#6E6E66;
  --riga:#E4E0D6;
  --blu:#11557F;
  --corallo:#B24B33;
  --verde:#2C7A5B;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  /* nomi vecchi, tenuti perche' alcune pagine li usano ancora */
  --ink:var(--inchiostro); --ink2:var(--inchiostro-2); --ink3:var(--inchiostro-3);
  --sabbia:var(--carta); --corrente:var(--blu); --accento:var(--corallo);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--carta);color:var(--inchiostro);font:400 20px/1.66 var(--serif)}
h1,h2,h3,h4{text-wrap:balance;font-weight:400}
p,li{text-wrap:pretty}
a{color:inherit}
img{max-width:100%;height:auto}
.wrap,.gabbia{max-width:64ch;margin:0 auto;padding:0 26px 60px}

/* ---------- testata ---------- */
header{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--riga);flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--sans);letter-spacing:-.01em}
.marca svg{width:22px;height:22px;flex:none}
.marca b{font-size:16px;font-weight:600}
/* Solo il motto accanto al marchio si nasconde (figlio diretto di .marca).
   Scritto ".marca span", nascondeva anche "Focus" e "Sea", che dal marchio
   nuovo stanno in due span dentro <b>: restava l'icona senza nome. */
.marca > span{display:none}
header > .pillbtn{margin-left:auto}
.testa-dx{display:flex;align-items:center;gap:10px;margin-left:auto}
.langsel{-webkit-appearance:none;appearance:none;color:var(--inchiostro-2);border:1px solid var(--riga);border-radius:8px;
  padding:8px 28px 8px 12px;font-family:var(--sans);font-size:14px;cursor:pointer;min-height:44px;
  background:transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2354544F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 8px center/13px}
.langsel option{color:#000}
.pillbtn{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--inchiostro);border:1px solid var(--riga);
  border-radius:8px;padding:0 15px;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.pillbtn:hover{border-color:var(--inchiostro-3)}

/* ---------- apertura ---------- */
.hero{padding:40px 0 0}
h1{font-size:clamp(30px,4.6vw,40px);line-height:1.14;letter-spacing:-.014em;max-width:22ch}
h1 em{font-style:normal}
.lede,.occhiello-lettera{font-size:19px;color:var(--inchiostro-2);margin:16px 0 0;max-width:54ch;font-family:var(--serif)}
.data{font-family:var(--sans);font-size:14px;color:var(--inchiostro-3);letter-spacing:.02em;margin:40px 0 8px}
.azioni{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.btn,.azione{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;
  background:var(--inchiostro);color:var(--carta);font-family:var(--sans);font-weight:500;font-size:17px;
  padding:0 22px;border-radius:6px;text-decoration:none;border:0;cursor:pointer;
  transition:transform .15s cubic-bezier(.2,.7,.3,1)}
.btn:hover,.azione:hover{transform:translateY(-1px)}
.btn:active,.azione:active{transform:scale(.97)}
.link-testo{font-family:var(--sans);font-size:16px;color:var(--blu);background:none;border:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}

/* ---------- corpo ---------- */
section{padding:44px 0 0}
h2{font-size:26px;line-height:1.2;letter-spacing:-.012em;margin:0 0 12px;max-width:26ch}
h3{font-family:var(--sans);font-size:17px;font-weight:600;margin:0 0 12px;letter-spacing:-.005em}
h4{font-family:var(--sans);font-size:16px;font-weight:600;margin:20px 0 6px}
p{margin:0 0 20px;max-width:58ch;color:var(--inchiostro-2)}
p strong,p b{color:var(--inchiostro);font-weight:500}
section p:first-of-type{margin-top:0}
main a,section a,.testo a,.faq a{color:var(--blu);text-decoration:underline;text-underline-offset:2px}
main a.btn,main a.azione,main a.marca,main a.pillbtn{text-decoration:none;color:inherit}
a.btn,a.azione{color:var(--carta)}
.minore{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--inchiostro-3)}
.elenco{margin:0 0 20px;padding-left:22px;max-width:58ch;color:var(--inchiostro-2)}
.elenco li{margin-bottom:10px}
.elenco b{font-weight:600;color:var(--inchiostro)}
blockquote,.pullquote,.massima{margin:28px 0;padding:0 0 0 20px;border-left:2px solid var(--corallo);
  font-size:22px;line-height:1.5;color:var(--inchiostro);max-width:56ch}
hr{border:0;border-top:1px solid var(--riga);margin:40px 0}
/* l'etichetta maiuscola sopra i titoli non si usa piu': e' il difetto
   numero uno della lista delle abitudini riconoscibili */
.occhiello{display:none}

/* ---------- lo strumento, quando la pagina ne ha uno ---------- */
.foglio{background:#fff;border:1px solid var(--riga);border-radius:6px}
.foglio-in{padding:20px}
.foglio.testo{padding:22px;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--inchiostro-2)}
/* due riquadri di fila sono un confronto: senza questo si toccano e
   sembrano un riquadro solo diviso da una riga */
.foglio.testo + .foglio.testo{margin-top:20px}
.foglio.testo h3,.foglio.testo h4{color:var(--inchiostro)}
.foglio.testo p{margin-bottom:12px}
input[type=text],input[type=number],input[type=email],input[type=date],input[type=time],select,textarea{
  width:100%;font-family:var(--sans);font-size:16px;padding:10px 12px;min-height:44px;
  border:1px solid var(--riga);border-radius:6px;background:var(--carta);color:var(--inchiostro)}
textarea{resize:vertical;min-height:96px}
select{-webkit-appearance:none;appearance:none;padding-right:30px;cursor:pointer;
  background:var(--carta) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2354544F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 9px center/14px}
label{font-family:var(--sans);font-size:14px;color:var(--inchiostro-3);display:block;margin-bottom:5px}
.campi{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.risultati{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--riga)}
.ris{flex:1;min-width:120px;font-family:var(--sans)}
.ris b{display:block;font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ris span{display:block;font-size:13px;color:var(--inchiostro-3);margin-top:2px}
.ris.min b{color:var(--blu)}
.invia{min-height:44px;padding:0 20px;border:0;border-radius:6px;background:var(--blu);color:#fff;
  font-family:var(--sans);font-size:16px;font-weight:600;cursor:pointer}
.invia:active{transform:scale(.97)}

/* ---------- salvataggio (lo disegna assets/js/salvataggio.js) ---------- */
.salvataggio{margin-top:18px;padding-top:16px;border-top:1px solid var(--riga);font-family:var(--sans);font-size:15px;color:var(--inchiostro-2)}
.salvataggio .sv-riga{margin-bottom:6px;line-height:1.55}
.salvataggio .sv-riga b{color:var(--inchiostro);font-weight:600}
.salvataggio .sv-lbl{display:block;flex:1 1 100%;font-size:14px;color:var(--inchiostro-2);margin-bottom:2px}
.salvataggio .sv-btns{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:12px}
.salvataggio .sv-inp{flex:1 1 220px;min-width:170px}
.salvataggio .sv-b{font-family:var(--sans);font-size:15px;font-weight:600;padding:0 16px;min-height:44px;border-radius:6px;
  cursor:pointer;border:1px solid var(--riga);background:var(--carta);color:var(--inchiostro-2);
  transition-property:transform,border-color,background-color,color;transition-duration:150ms;transition-timing-function:cubic-bezier(.2,.7,.3,1)}
.salvataggio .sv-b:hover{border-color:var(--inchiostro-3);color:var(--inchiostro)}
.salvataggio .sv-b:active{transform:scale(.97)}
.salvataggio .sv-b.sv-blu{background:var(--blu);border-color:var(--blu);color:#fff}
.salvataggio .sv-b.sv-rosso{color:var(--corallo);border-color:#E2CFC9}
.salvataggio .sv-stato{margin-top:10px;font-size:14px;color:var(--inchiostro-3)}

/* ---------- domande e piede ---------- */
.faq,.scheda{border-top:1px solid var(--riga);padding-top:26px;margin-top:40px}
.faq h3{font-size:17px}
.faq p,.scheda p{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--inchiostro-3)}
.piede-garanzie{font-family:var(--sans);font-size:14px;color:var(--inchiostro-3);padding-top:28px;margin-top:40px;border-top:1px solid var(--riga)}
.piede-link{font-family:var(--sans);font-size:14px;color:var(--inchiostro-3);margin-top:10px;display:flex;flex-wrap:wrap;align-items:baseline}
.piede-link a{color:var(--inchiostro-2)}
.piede-link .sep{color:var(--riga);margin:0 7px}
.copy{font-family:var(--sans);font-size:13px;color:var(--inchiostro-3);margin-top:10px}

/* ---------- accessibilita' ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blu);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .btn:active,.azione:active,.invia:active{transform:none}
}
@media (max-width:640px){
  body{font-size:19px}
  .campi{grid-template-columns:1fr}
  .hero{padding-top:30px}
  blockquote,.pullquote,.massima{font-size:20px}
}

/* ---------- il disegno, quando la pagina ne ha uno ----------
   Aggiunto il 22 settembre 2026 passando alla veste chiara le
   diciannove pagine di contenuto: il loro unico disegno era
   gia' su fondo chiaro, gli mancava solo la cornice. */
figure{margin:28px 0}
figure svg{display:block;width:100%;height:auto;border:1px solid var(--riga);border-radius:6px}
figcaption{font-family:var(--sans);font-size:14px;color:var(--inchiostro-3);margin-top:10px}