/* =========================================================
   LIVE SERVICE — le pagine degli strumenti gratuiti.
   Si appoggia a style.css: qui c'e' solo quello che serve
   agli strumenti veri e propri.
   ========================================================= */

.strumento{padding:calc(78px + clamp(40px,6vw,80px)) 0 clamp(60px,8vw,110px)}
.strumento__testa{max-width:64ch}
.strumento__titolo{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(28px,4.2vw,50px);line-height:1.16;margin:14px 0 0;color:#fff;
}
.strumento__sotto{margin:20px 0 0;font-size:clamp(14px,1.1vw,16px);line-height:1.75;color:var(--ink-2)}
.strumento__promessa{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--arancio);
  padding:7px 14px;border-radius:20px;
  background:var(--arancio-4);box-shadow:inset 0 0 0 1px var(--arancio-3);
}
.strumento__indietro{
  display:inline-flex;align-items:center;gap:9px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);
  transition:color .35s var(--ease);
}
.strumento__indietro:hover{color:var(--arancio)}

/* ── impianto a due colonne: si compila a sinistra, si guarda a destra ── */
.cv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,3vw,44px);margin-top:clamp(34px,4vw,56px);align-items:start}
@media (max-width:980px){.cv{grid-template-columns:1fr}}

.cv__pannello{position:relative;padding:26px;border-radius:var(--r-lg)}
.cv__gruppo{margin-bottom:26px}
.cv__gruppo:last-child{margin-bottom:0}
.cv__legenda{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);
}
.cv__legenda::before{content:'';width:16px;height:1px;background:var(--arancio)}

.campo{display:block;margin-bottom:12px}
.campo span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-bottom:7px}
.campo input,.campo textarea{
  width:100%;padding:11px 13px;border-radius:11px;
  background:rgba(255,255,255,.04);color:#fff;
  border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  font-family:var(--f-body);font-size:13.5px;line-height:1.55;
  transition:box-shadow .3s var(--ease);
}
.campo textarea{resize:vertical;min-height:86px}
.campo input:focus,.campo textarea:focus{outline:0;box-shadow:inset 0 0 0 1px var(--arancio-2)}
.campo--due{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── la foto ────────────────────────────────────────────────────────── */
.foto{display:flex;gap:16px;align-items:flex-start;margin-top:6px}
.foto__anteprima{
  position:relative;flex:none;width:66px;height:82px;border-radius:10px;cursor:pointer;
  display:grid;place-items:center;overflow:hidden;
  background:rgba(255,255,255,.04) center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:box-shadow .3s var(--ease);
}
.foto__anteprima:hover{box-shadow:inset 0 0 0 1px var(--arancio-3)}
/* La sagoma che sta di solito dove manca la foto, piu' il segno di aggiunta:
   una casella vuota non direbbe a nessuno che ci si puo' cliccare. */
.foto__sagoma{width:30px;height:36px;fill:rgba(255,255,255,.20)}
.foto__piu{
  position:absolute;right:5px;bottom:5px;
  width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;line-height:1;
  font-size:14px;color:#000;background:var(--arancio);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.foto__anteprima.ha-foto .foto__sagoma,
.foto__anteprima.ha-foto .foto__piu{display:none}
.foto__azioni{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.foto__nota{flex:1 0 100%;margin:2px 0 0;font-size:11px;line-height:1.55;color:var(--ink-4)}
#fotoVia[hidden]{display:none}

/* ── interruttore ────────────────────────────────────────────────────
   Un interruttore vero, non una casella con l'etichetta di fianco: si
   capisce a colpo d'occhio se una cosa e' accesa o spenta. Resta un
   checkbox sotto, quindi funziona anche da tastiera e con i lettori di
   schermo. */
.interruttore{
  display:flex;align-items:center;gap:13px;cursor:pointer;
  margin:0;padding:0;
}
.interruttore input{position:absolute;opacity:0;width:0;height:0}
.interruttore__leva{
  position:relative;flex:none;width:46px;height:27px;border-radius:20px;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:background .32s var(--ease-out),box-shadow .32s var(--ease);
}
.interruttore__leva::after{
  content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.5);
  transition:transform .32s cubic-bezier(.32,1.6,.55,1),width .2s var(--ease);
}
.interruttore input:checked + .interruttore__leva{
  background:var(--arancio);box-shadow:inset 0 0 0 1px var(--arancio);
}
.interruttore input:checked + .interruttore__leva::after{transform:translateX(19px)}
.interruttore:active .interruttore__leva::after{width:25px}
.interruttore input:focus-visible + .interruttore__leva{
  box-shadow:inset 0 0 0 1px var(--arancio),0 0 0 3px var(--arancio-3);
}
.interruttore__testo{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.interruttore__testo small{display:block;font-size:11px;color:var(--ink-4);margin-top:2px}

/* quando la foto e' spenta, i comandi restano visibili ma smorzati */
.foto.spenta .foto__anteprima,.foto.spenta .foto__azioni{opacity:.38;pointer-events:none}

.cv__troppo{
  margin:0 0 12px;font-size:11.5px;color:var(--arancio);
  padding:9px 13px;border-radius:11px;
  background:var(--arancio-4);box-shadow:inset 0 0 0 1px var(--arancio-3);
}
.cv__troppo[hidden]{display:none}

.voce{position:relative;padding:16px;border-radius:14px;margin-bottom:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.voce__togli{
  position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;border:0;cursor:pointer;
  background:rgba(255,255,255,.05);color:var(--ink-3);font-size:15px;line-height:1;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.voce__togli:hover{color:var(--arancio);background:var(--arancio-4)}

.btn--mini{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  background:none;border:0;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:color .3s var(--ease),box-shadow .3s var(--ease);
}
.btn--mini:hover{color:var(--arancio);box-shadow:inset 0 0 0 1px var(--arancio-3)}

/* ── scelta del modello ─────────────────────────────────────────────── */
.modelli{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
@media (max-width:1180px){.modelli{grid-template-columns:repeat(2,1fr)}}


.cv__solo{font-size:8.5px;letter-spacing:.12em;color:var(--arancio);margin-left:8px;text-transform:none}
.cv__avviso{margin:12px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-4)}
.cv__avviso b{color:var(--ink-2);font-weight:500}

.lingue-cv{display:flex;gap:10px}
.scelta{position:relative;flex:1}
.scelta input{position:absolute;opacity:0;pointer-events:none}
.scelta span{
  display:grid;place-items:center;padding:11px;border-radius:11px;cursor:pointer;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:color .3s var(--ease),box-shadow .3s var(--ease);
}
.scelta:has(input:checked) span{color:var(--arancio);box-shadow:inset 0 0 0 1px var(--arancio)}
.modello{
  position:relative;cursor:pointer;border-radius:12px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);padding:9px;
  transition:box-shadow .3s var(--ease);
}
.modello input{position:absolute;opacity:0;pointer-events:none}
.modello__mini{display:block;aspect-ratio:1/1.414;border-radius:6px;background:#fff;overflow:hidden;position:relative}
.modello__nome{display:block;margin-top:9px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);text-align:center}
.modello:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.modello:has(input:checked){box-shadow:inset 0 0 0 1px var(--arancio)}
.modello:has(input:checked) .modello__nome{color:var(--arancio)}

/* Miniature disegnate a CSS: nessuna immagine da scaricare.
   Il grigio delle righe e' scuro di proposito — a questa dimensione un
   grigio chiaro sparisce e i sei modelli sembrano sei fogli bianchi. */
.modello__mini{--riga:#8e8e8e;--titolo:#1a1a1a;--scuro:#1a1a1a}
.modello__mini::before,.modello__mini::after{content:'';position:absolute}

/* Essenziale: titolo in alto, testo a tutta larghezza */
.mini--essenziale::before{left:16%;right:34%;top:11%;height:8%;background:var(--titolo)}
.mini--essenziale::after{left:16%;right:16%;top:26%;bottom:14%;
  background:repeating-linear-gradient(to bottom,var(--riga) 0 5%,transparent 5% 13%)}

/* A colonna: fascia scura a sinistra */
.mini--colonna::before{left:0;top:0;bottom:0;width:36%;background:var(--scuro)}
.mini--colonna::after{left:44%;right:12%;top:12%;bottom:12%;
  background:repeating-linear-gradient(to bottom,var(--riga) 0 6%,transparent 6% 15%)}

/* Testata: fascia scura in alto */
.mini--scuro::before{left:0;right:0;top:0;height:32%;background:var(--scuro)}
.mini--scuro::after{left:12%;right:12%;top:42%;bottom:12%;
  background:repeating-linear-gradient(to bottom,var(--riga) 0 6%,transparent 6% 15%)}

/* Europass: etichette strette a sinistra, contenuto a destra, riga di base */
.mini--europass::before{left:10%;width:22%;top:20%;bottom:12%;
  background:repeating-linear-gradient(to bottom,var(--titolo) 0 5%,transparent 5% 20%)}
.mini--europass::after{left:38%;right:10%;top:20%;bottom:12%;
  background:repeating-linear-gradient(to bottom,var(--riga) 0 5%,transparent 5% 11%)}

/* Internazionale: titolo centrato, poi blocchi larghi */
.mini--internazionale::before{left:28%;right:28%;top:12%;height:7%;background:var(--titolo)}
.mini--internazionale::after{left:14%;right:14%;top:28%;bottom:14%;
  background:repeating-linear-gradient(to bottom,var(--riga) 0 4%,transparent 4% 11%)}

/* Compatto: due colonne fitte */
.mini--compatto::before{left:10%;right:10%;top:10%;height:7%;background:var(--titolo)}
.mini--compatto::after{left:10%;right:10%;top:24%;bottom:10%;
  background:
    repeating-linear-gradient(to bottom,var(--riga) 0 5%,transparent 5% 11%) left/44% 100% no-repeat,
    repeating-linear-gradient(to bottom,var(--riga) 0 5%,transparent 5% 11%) right/44% 100% no-repeat}

/* ── il foglio ──────────────────────────────────────────────────────── */
.cv__anteprima{position:sticky;top:96px}
.cv__barra{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.cv__nota{font-size:11.5px;color:var(--ink-4);margin-left:auto}
.cv__esempio{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--arancio);
  padding:5px 11px;border-radius:20px;
  background:var(--arancio-4);box-shadow:inset 0 0 0 1px var(--arancio-3);
}
.cv__esempio[hidden]{display:none}
#viaEsempio[hidden]{display:none}
/* Il foglio d'esempio e' leggermente smorzato: si capisce che non e' il tuo. */
.foglio--esempio{opacity:.82}

.foglio-cont{container-type:inline-size;width:100%}
.foglio{
  /* Tutte le misure del foglio sono in centesimi della sua larghezza: cosi'
     l'impaginazione e' identica sullo schermo e sulla pagina stampata,
     qualunque sia la dimensione dell'anteprima. */
  --u:1cqw;
  width:100%;aspect-ratio:1/1.414;background:#fff;color:#111;
  border-radius:6px;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,1),0 0 0 1px rgba(255,255,255,.10);
  font-family:var(--f-body);
}
.foglio *{box-sizing:border-box}

/* Il foglio e' un documento a se' stante, non un pezzo del sito: le regole
   generali (h1 bianco, carattere da titoli, spaziature) non devono colargli
   dentro, o il nome finisce bianco su carta bianca. Si usa :where() perche'
   non pesa sulla specificita': ogni regola del foglio scritta piu' sotto
   continua a vincere senza dover rincorrere. */
.foglio :where(h1,h2,h3,h4,p,span,div,section,aside,header,ul,li){
  color:inherit;
  font-family:inherit;
  font-weight:inherit;
  letter-spacing:normal;
  text-transform:none;
  margin:0;
  padding:0;
  list-style:none;
}
.f-nome{font-size:calc(var(--u)*4.5);line-height:1.12;margin:0;font-weight:600;letter-spacing:-.01em}
.f-ruolo{font-size:calc(var(--u)*2.1);margin:calc(var(--u)*1.2) 0 0;color:#555;letter-spacing:.02em}
.f-contatti{display:flex;flex-wrap:wrap;gap:calc(var(--u)*2.1);margin:calc(var(--u)*2.2) 0 0;font-size:calc(var(--u)*1.75);color:#444}
.f-sez{margin:calc(var(--u)*3.4) 0 0}
.f-titolo{
  font-size:calc(var(--u)*1.7);letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 calc(var(--u)*1.5);color:#111;display:flex;align-items:center;gap:calc(var(--u)*1.6);
}
.f-titolo::after{content:'';flex:1;height:1px;background:#ddd}
.f-voce{margin-bottom:calc(var(--u)*2.2)}
.f-voce:last-child{margin-bottom:0}
.f-riga{display:flex;justify-content:space-between;gap:calc(var(--u)*2);align-items:baseline}
.f-cosa{font-size:calc(var(--u)*2);font-weight:600;margin:0}
.f-dove{font-size:calc(var(--u)*1.8);color:#555;margin:calc(var(--u)*.5) 0 0}
.f-quando{font-size:calc(var(--u)*1.7);color:#777;white-space:nowrap}
.f-testo{font-size:calc(var(--u)*1.78);line-height:1.6;color:#333;margin:calc(var(--u)*1) 0 0;white-space:pre-line}
.f-tag{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.2)}
.f-tag span{font-size:calc(var(--u)*1.65);padding:calc(var(--u)*.6) calc(var(--u)*1.3);border-radius:calc(var(--u)*2);background:#f1f1f1;color:#333}

/* La foto: ogni modello la colloca dove ha senso per quel modello. */
.f-foto{
  display:block;background:#e9e9e9 center/cover no-repeat;
  border-radius:calc(var(--u)*1.2);
}
.f-testa{display:flex;gap:calc(var(--u)*4);align-items:flex-start;justify-content:space-between}
.f-testa .f-foto{flex:none;width:calc(var(--u)*17);height:calc(var(--u)*21)}

/* modello 1 — essenziale */
.foglio--essenziale{padding:calc(var(--u)*8) calc(var(--u)*8.5)}
.foglio--essenziale .f-nome{color:#111}

/* modello 2 — a colonna */
.foglio--colonna{display:grid;grid-template-columns:32% 1fr}
.foglio--colonna .cv-lato{
  background:#141414;color:#eee;padding:calc(var(--u)*7) calc(var(--u)*4.5);
  overflow-wrap:anywhere;
}
/* Nella colonna stretta i titoli e i contatti vanno rimpiccioliti, altrimenti
   escono dal bordo. */
.foglio--colonna .cv-lato .f-titolo{font-size:calc(var(--u)*1.5);letter-spacing:.1em}
.foglio--colonna .cv-lato .f-contatti{font-size:calc(var(--u)*1.6)}
.foglio--colonna .cv-lato .f-tag span{font-size:calc(var(--u)*1.5)}
.foglio--colonna .cv-corpo{padding:calc(var(--u)*7) calc(var(--u)*6)}
.foglio--colonna .cv-lato .f-titolo{color:#fff}
.foglio--colonna .cv-lato .f-titolo::after{background:#3a3a3a}
.foglio--colonna .cv-lato .f-contatti{flex-direction:column;gap:calc(var(--u)*1.4);color:#bdbdbd}
.foglio--colonna .cv-lato .f-tag span{background:#242424;color:#e6e6e6}
.foglio--colonna .cv-lato .f-nome{font-size:calc(var(--u)*3.9);color:#fff}
.foglio--colonna .cv-lato .f-foto{width:100%;height:calc(var(--u)*30);margin-bottom:calc(var(--u)*3)}
.foglio--colonna .cv-lato .f-ruolo{color:#ff7a1a}

/* modello 3 — testata scura */
.foglio--scuro .cv-testata{background:#111;color:#fff;padding:calc(var(--u)*7) calc(var(--u)*8)}
.foglio--scuro .cv-testata .f-foto{width:calc(var(--u)*16);height:calc(var(--u)*20);border-radius:50%}
.foglio--scuro .cv-testata .f-nome{color:#fff}
.foglio--scuro .cv-testata .f-ruolo{color:#ff7a1a}
.foglio--scuro .cv-testata .f-contatti{color:#c7c7c7}
.foglio--scuro .cv-corpo{padding:calc(var(--u)*5.5) calc(var(--u)*8) calc(var(--u)*8)}

/* modello 4 — Europass
   Struttura del formato europeo: la colonna delle etichette a sinistra, il
   contenuto a destra, una riga sottile a separare ogni blocco. */
.foglio--europass{padding:calc(var(--u)*6.5) calc(var(--u)*7);font-size:calc(var(--u)*1.75)}
.foglio--europass .eu-testa{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--u)*3);
  padding-bottom:calc(var(--u)*2.2);border-bottom:calc(var(--u)*.5) solid #111}
.foglio--europass .eu-marchio{font-size:calc(var(--u)*1.55);letter-spacing:.2em;text-transform:uppercase;color:#888;white-space:nowrap}
.foglio--europass .f-nome{font-size:calc(var(--u)*4)}
.foglio--europass .eu-riga{display:grid;grid-template-columns:26% 1fr;gap:calc(var(--u)*3);
  padding:calc(var(--u)*1.9) 0;border-bottom:1px solid #e2e2e2}
.foglio--europass .eu-riga:last-child{border-bottom:0}
.foglio--europass .eu-eti{font-size:calc(var(--u)*1.6);letter-spacing:.1em;text-transform:uppercase;color:#555;line-height:1.5}
.foglio--europass .eu-dato{font-size:calc(var(--u)*1.78);line-height:1.6;color:#222}
.foglio--europass .f-voce{margin-bottom:calc(var(--u)*1.7)}
.foglio--europass .f-sez{margin:0}
.foglio--europass .f-titolo{display:none}

/* modello 5 — Internazionale
   Impostazione anglosassone: testata centrata, niente dati anagrafici,
   sezioni larghe e molto respiro. */
.foglio--internazionale{padding:calc(var(--u)*8.5) calc(var(--u)*9);text-align:center}
.foglio--internazionale .f-nome{font-size:calc(var(--u)*4.4);letter-spacing:.02em}
.foglio--internazionale .f-ruolo{color:#666;letter-spacing:.16em;text-transform:uppercase;font-size:calc(var(--u)*1.7)}
.foglio--internazionale .f-contatti{justify-content:center}
.foglio--internazionale .f-sez{text-align:left;margin-top:calc(var(--u)*4.6)}
.foglio--internazionale .f-titolo{justify-content:center;letter-spacing:.26em;color:#111}
.foglio--internazionale .f-titolo::after{display:none}
.foglio--internazionale .f-titolo::before{content:'';flex:0 0 auto;width:calc(var(--u)*6);height:1px;background:#111}
.foglio--internazionale .f-tag{justify-content:center}

/* modello 6 — Compatto
   Per chi ha molte voci: due colonne, righe strette, niente spazi sprecati. */
.foglio--compatto{padding:calc(var(--u)*6.5) calc(var(--u)*6.5)}
.foglio--compatto .cv-due{column-count:2;column-gap:calc(var(--u)*5);margin-top:calc(var(--u)*3)}
.foglio--compatto .f-sez{break-inside:avoid;margin:0 0 calc(var(--u)*3.4)}
.foglio--compatto .f-voce{margin-bottom:calc(var(--u)*2)}
.foglio--compatto .f-cosa{font-size:calc(var(--u)*1.85)}
.foglio--compatto .f-dove,.foglio--compatto .f-testo{font-size:calc(var(--u)*1.62)}
.foglio--compatto .f-nome{font-size:calc(var(--u)*4.1)}
.foglio--compatto .f-testa .f-foto{width:calc(var(--u)*14);height:calc(var(--u)*17)}

/* ── in stampa esce solo il foglio, a pagina intera ─────────────────── */
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff}
  /* Si nasconde tutto e si lascia visibile il solo foglio, portato a
     pagina intera: cosi' il PDF che esce e' il curriculum e basta. */
  body *{visibility:hidden}
  .foglio,.foglio *{visibility:visible}
  /* L'anteprima e' appiccicata in alto con position:sticky: se resta
     posizionata, il foglio si ancora a lei invece che alla pagina e in stampa
     esce spostato. In stampa tornano tutti statici. */
  .cv__anteprima,.foglio-cont,.cv,.strumento,.wrap{position:static !important}
  .foglio{
    position:absolute;left:0;top:0;
    width:210mm;min-height:297mm;height:auto;aspect-ratio:auto;
    --u:2.1mm;
    opacity:1 !important;
    border-radius:0;box-shadow:none;overflow:visible;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  /* Se il contenuto supera la pagina prosegue sulla seconda invece di
     essere tagliato via in silenzio. */
  .f-voce,.f-sez{break-inside:avoid}
}

/* =========================================================
   CONVERTI IN PDF
   ========================================================= */
.zona{
  display:grid;place-items:center;gap:7px;text-align:center;
  padding:34px 22px;border-radius:16px;cursor:pointer;
  border:1px dashed rgba(255,255,255,.16);
  background:rgba(255,255,255,.015);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.zona svg{width:26px;height:26px;color:var(--arancio)}
.zona b{font-size:13.5px;color:var(--ink-1);font-weight:400}
.zona small{font-size:11.5px;color:var(--ink-4)}
.zona:hover{border-color:var(--arancio-3);background:var(--arancio-4)}
.zona.sopra{border-color:var(--arancio);background:var(--arancio-4)}

.lavoro{
  margin:14px 0 0;font-size:11.5px;color:var(--arancio);
  padding:9px 13px;border-radius:11px;
  background:var(--arancio-4);box-shadow:inset 0 0 0 1px var(--arancio-3);
}
.lavoro[hidden]{display:none}
.vuoto{margin:18px 0 0;font-size:12.5px;color:var(--ink-4)}
.vuoto[hidden]{display:none}

.elenco{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.riga{
  display:flex;align-items:center;gap:13px;padding:9px;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.riga__mini{
  flex:none;width:38px;height:48px;border-radius:7px;
  background:#111 center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.riga__dati{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.riga__dati b{font-size:12.5px;font-weight:400;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.riga__dati small{font-size:11px;color:var(--ink-4)}
.riga__cmd{display:flex;gap:5px;flex:none}
.riga__cmd button{
  width:27px;height:27px;border-radius:8px;border:0;cursor:pointer;
  background:rgba(255,255,255,.05);color:var(--ink-3);font-size:13px;line-height:1;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.riga__cmd button:hover:not(:disabled){color:var(--arancio);background:var(--arancio-4)}
.riga__cmd button:disabled{opacity:.28;cursor:default}

/* cursore del margine */
.cursore{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;
  background:rgba(255,255,255,.14);outline:0;padding:0;box-shadow:none;
}
.cursore::-webkit-slider-thumb{
  -webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--arancio);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.cursore::-moz-range-thumb{
  width:17px;height:17px;border:0;border-radius:50%;
  background:var(--arancio);cursor:pointer;
}
.btn--glass:disabled{opacity:.4;cursor:default}

/* anteprima delle pagine del PDF */
.pagine{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;margin-top:14px}
.pagina{
  position:relative;margin:0;background:#fff;border-radius:3px;overflow:hidden;
  box-shadow:0 8px 22px -12px rgba(0,0,0,1),0 0 0 1px rgba(255,255,255,.12);
}
.pagina__img{position:absolute;display:block;background:center/contain no-repeat}
.pagina figcaption{
  position:absolute;right:4px;bottom:3px;
  font-size:9px;color:#8a8a8a;background:rgba(255,255,255,.85);
  padding:1px 5px;border-radius:8px;line-height:1.5;
}

.riga__mini--testo{
  display:grid;place-items:center;background:rgba(255,255,255,.05);
  font-size:9px;letter-spacing:.1em;color:var(--arancio);
}
.anteTesto{
  margin:14px 0 0;padding:14px;border-radius:11px;max-height:260px;overflow:auto;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.6;
  color:var(--ink-2);white-space:pre-wrap;word-break:break-word;
}
.anteTesto[hidden]{display:none}

/* =========================================================
   I SEGNI DI FIDUCIA — al posto di quattro schede di prosa
   In fondo a ogni strumento c'erano quattro riquadri che
   spiegavano a parole perche' era sicuro, cosa faceva e cosa
   non faceva. Erano gli stessi su ogni pagina, e nessuno li
   leggeva. Adesso sono tre righe con un segno: la stessa
   informazione, un decimo delle parole.
   I limiti veri non stanno piu' qui: compaiono nel momento in
   cui li tocchi, dentro lo strumento.
   ========================================================= */
.fidi{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);
  margin-top:clamp(34px,4vw,56px);padding-top:26px;
  border-top:1px solid var(--line);
}
.fido{display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--ink-3)}
.fido svg{width:17px;height:17px;flex:none;color:var(--arancio)}
.fido b{font-weight:400;color:#fff}
.fidi__coda{
  flex:1 1 220px;display:flex;align-items:center;justify-content:flex-end;
  font-size:12px;color:var(--ink-4);
}
.fidi__coda a{color:var(--arancio)}
.fidi__coda a:hover{text-decoration:underline}
@media (max-width:700px){
  .fidi__coda{justify-content:flex-start}
}