/* Il testo e le azioni restano un unico blocco, senza dipendere dall'altezza della figura. */
.caso-corpo {display:flex;flex-direction:column;gap:14px;min-width:0;}
.caso-corpo .caso-azioni {margin-top:0;}
@media(min-width:901px){
 .caso-corpo {grid-column:1;grid-row:3;}
 .caso-corpo .caso-righe,.caso-corpo .caso-azioni {grid-area:auto;}
 .schermi {grid-row:3;}
}
.schermi--grafica {gap:10px;}
.output-grafica {color:var(--imperial);width:100%;--eco:cubic-bezier(.65,0,.35,1);--molla:cubic-bezier(.34,1.56,.64,1);}
.output-grafica svg {width:100%;height:auto;overflow:visible;}
.grafica-sopra {fill:var(--sky);font:11px var(--mono);letter-spacing:.07em;}
.grafica-colonna {fill:var(--jet);font:13px var(--display);}
.grafica-etichetta {fill:var(--imperial);font:500 16px var(--display);}
.grafica-guida {fill:none;stroke:var(--linea);stroke-width:1;}
.output-lettura {font:400 clamp(20px,1.7vw,26px)/1.25 var(--voce);margin:0 0 10px 20px;}
.output-lettura em {font-style:normal;color:var(--sky);}

.output-grafica svg {aspect-ratio:600 / 320;}

/* Ogni elemento che viaggia lungo un offset-path va ancorato al proprio centro. */
.motion-ring-punto,.motion-mappa-punto,.motion-impulso,.motion-flusso-punto,.motion-task--viaggio,
.motion-tempo-punto,.motion-verdetto-punto {transform-box:fill-box;transform-origin:center;}

/* ---------- 01 · Assessment hard skills ---------- */

.tracciato {fill:none;stroke:#2f5f80;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;}
.tracciato--blu {stroke:#1d2f7a;}
.tracciato--sky {stroke:#8eb7ce;}
.tracciato--corallo {stroke:#c93d58;}
.tracciato-base {fill:none;stroke:#c5d7e1;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.tracciato-campitura {fill:rgba(142,183,206,.11);stroke:none;}
.tracciato-nodo {fill:#f9fffb;stroke:#1d2f7a;stroke-width:2;}
.tracciato-nodo--sky {stroke:#8eb7ce;}
.tracciato-nodo--corallo {stroke:#c93d58;}
.tracciato-nodo--pieno {fill:#1d2f7a;}
.tracciato-nodo--pieno.tracciato-nodo--sky {fill:#8eb7ce;}
.tracciato-nodo--pieno.tracciato-nodo--corallo {fill:#c93d58;}
.output-note {display:flex;align-items:center;gap:14px;}
.output-rivedi {background:none;border:0;color:var(--sky);padding:8px 0;font:400 .75rem var(--display);cursor:pointer;}
.output-rivedi:hover {text-decoration:underline;text-underline-offset:4px;}
.output-grafica-piede {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;padding-top:12px;border-top:1px solid var(--linea);}
.output-illustrativo {color:var(--nebbia);font:.6875rem var(--mono);}
.output-apri {display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--imperial);padding:9px 0;cursor:pointer;font:500 .875rem/1.3 var(--display);}
.output-apri span:first-child {font-weight:400;color:var(--sky);}
.output-apri:hover {text-decoration:underline;text-underline-offset:5px;}
.schermi--grafica:not(.in-vista) *,body:has(.output-galleria[open]) .output-grafica * {animation-play-state:paused;}
/* La galleria è un approfondimento separato dalla lettura della pagina. */
.output-galleria {position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100%;padding:clamp(12px,3vw,40px);border:0;background:transparent;color:#f9fffb;}
.output-galleria::backdrop {background:rgba(7,28,39,.96);}
.output-galleria-in {max-width:1440px;height:100%;margin:auto;display:flex;flex-direction:column;gap:12px;}
.output-galleria header {display:flex;align-items:center;justify-content:space-between;gap:20px;}
.output-galleria h2 {font:400 clamp(21px,2vw,30px)/1.2 var(--voce);color:#f9fffb;}
.output-galleria header p {color:#8eb7ce;font-size:11px;margin-bottom:4px;}
.output-chiudi {background:none;border:1px solid #56707f;color:#f9fffb;width:44px;height:44px;flex-shrink:0;border-radius:50%;font:30px/1 var(--display);cursor:pointer;}
.output-galleria-palco {flex:1;min-height:0;display:grid;place-items:center;}
.output-galleria-palco img {max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.output-galleria footer {display:flex;justify-content:center;align-items:center;gap:24px;}
.output-galleria footer button {border:1px solid #56707f;border-radius:50%;background:none;color:#f9fffb;width:44px;height:44px;font-size:22px;cursor:pointer;flex-shrink:0;}
.output-galleria-stato {color:#d6e5ee;font:400 .875rem/1.4 var(--display);text-align:center;}
.output-galleria-viste {display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.output-galleria-viste button {padding:9px 12px;border:1px solid #56707f;border-radius:20px;background:none;color:#d6e5ee;font:400 .8125rem/1.2 var(--display);cursor:pointer;}
.output-galleria-viste button[aria-pressed=true] {background:#f9fffb;color:#0e2e3e;border-color:#f9fffb;}
.output-galleria button:focus-visible {outline:2px solid #f7cdb6;outline-offset:4px;}
@media(max-width:600px){
 .output-grafica-piede {align-items:start;flex-direction:column;gap:0;}
 .output-lettura {font-size:23px;}
 .output-galleria-viste {flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;flex-shrink:0;}
 .output-galleria-viste button {white-space:nowrap;}
 .output-galleria footer {gap:12px;}
 .output-galleria-stato {font-size:.75rem;}
}
@media(prefers-reduced-motion:reduce){.output-grafica * {animation:none!important;transition:none!important;}}

.output-galleria-palco {position:relative;} .output-galleria-palco img {position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;}

@media(min-width:901px) and (max-height:760px){.output-lettura{font-size:21px;line-height:1.2}.output-grafica-piede{padding-top:8px}}
/* Cinque soggetti distinti: persone, territorio, complementarità, dialogo e tempo. */
.segno-blu,.sapere-comune,.sapere-raro,.edificio-dettaglio,.voce-righe,.scambio-conferma,.task-spunta,.task-riga,.orologio-tacca,.orologio-lancetta {fill:none;stroke-linecap:round;stroke-linejoin:round;}
.segno-testa {fill:#e0ebf2;stroke:#1d2f7a;stroke-width:2.2;}
.segno-blu {fill:#e0ebf2;stroke:#1d2f7a;stroke-width:2.4;}
.sapere-comune {stroke:#8eb7ce;stroke-width:5.5;}
.sapere-raro {stroke:#c93d58;stroke-width:5.5;}
.mappa-area {fill:#edf4f6;stroke:#a8c6d6;stroke-width:1.8;stroke-linejoin:round;}
.mappa-confine {fill:none;stroke:#cfdee5;stroke-width:1.4;stroke-linecap:round;}
.mappa-fiume {fill:none;stroke:#b6d1e0;stroke-width:3.5;stroke-linecap:round;}
.edificio-corpo {fill:#e0ebf2;stroke:#1d2f7a;stroke-width:2.2;stroke-linejoin:round;}
.mappa-edificio--corallo .edificio-corpo {fill:#f7cdb6;stroke:#c93d58;}
.edificio-dettaglio {stroke:#8eb7ce;stroke-width:2;}
.pezzo-blu {fill:#d8e7f0;stroke:#1d2f7a;stroke-width:2.3;stroke-linejoin:round;}
.pezzo-corallo {fill:#f5d6c9;stroke:#c93d58;stroke-width:2.3;stroke-linejoin:round;}
.voce-blu {fill:#e0ebf2;stroke:#1d2f7a;stroke-width:2.3;stroke-linejoin:round;}
.voce-corallo {fill:#fcf0e9;stroke:#c93d58;stroke-width:2.3;stroke-linejoin:round;}
.voce-righe {stroke:#8eb7ce;stroke-width:4;}
.scambio-conferma {stroke:#c93d58;stroke-width:3.2;}
.task-spunta {stroke:#8eb7ce;stroke-width:3;}
.task-riga {stroke:#1d2f7a;stroke-width:4;}
.ruota {fill:#1d2f7a;stroke:#1d2f7a;stroke-width:2.3;stroke-linejoin:round;}
.ruota-foro {fill:#f9fffb;stroke:#1d2f7a;stroke-width:2.3;}
.orologio {fill:#fcf0e9;stroke:#c93d58;stroke-width:2.3;}
.orologio-tacca {stroke:#e4b4b3;stroke-width:2;}
.orologio-lancetta {stroke:#c93d58;stroke-width:3.5;}
/* Revisione della famiglia: gerarchia, indagine, lavoro scritto e percezioni. */
.organigramma-struttura {fill:none;stroke:#a8c6d6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ruolo-forma {fill:#edf4f6;stroke:#a8c6d6;stroke-width:1.6;}
.organigramma-legame {fill:none;stroke:#c93d58;stroke-width:3.5;stroke-linecap:round;}
.negozio-corpo {fill:#e0ebf2;stroke:#1d2f7a;stroke-width:2.3;stroke-linejoin:round;stroke-linecap:round;}
.negozio-tetto {fill:#1d2f7a;stroke:#1d2f7a;stroke-width:2.3;stroke-linejoin:round;}
.negozio-insegna {fill:none;stroke:#8eb7ce;stroke-width:2.5;stroke-linejoin:round;}
.negozio-tenda {fill:none;stroke:#1d2f7a;stroke-width:2;}
.negozio-tenda--piena {fill:#d8e7f0;}
.negozio-vetrina {fill:none;stroke:#8eb7ce;stroke-width:1.8;stroke-linejoin:round;}
.lente-vetro {fill:rgba(249,255,251,.22);stroke:#c93d58;stroke-width:3.5;}
.lente-riflesso {fill:none;stroke:#f7cdb6;stroke-width:4;stroke-linecap:round;}
.lente-manico {fill:none;stroke:#c93d58;stroke-width:8;stroke-linecap:round;}
.foglio-sagoma {fill:#e0ebf2;stroke:#1d2f7a;stroke-width:2.3;stroke-linejoin:round;}
.foglio-piega {fill:none;stroke:#8eb7ce;stroke-width:1.8;stroke-linejoin:round;}
.foglio-righe {fill:none;stroke:#8eb7ce;stroke-width:4;stroke-linecap:round;}
.mansionario-aggiunta {fill:none;stroke:#c93d58;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;}
.penna-corpo {fill:#f9dfd4;stroke:#c93d58;stroke-width:2.5;stroke-linejoin:round;}
.penna-dettaglio {fill:none;stroke:#c93d58;stroke-width:2;stroke-linecap:round;}

/* Le versioni del lavoro diventano una procedura, nello stesso linguaggio illustrativo. */
.versione-foglio {fill:#e0ebf2;stroke:#1d2f7a;stroke-width:2.2;stroke-linejoin:round;}
.versione-piega {fill:none;stroke:#8eb7ce;stroke-width:1.8;stroke-linejoin:round;}
.versione-righe {fill:none;stroke:#8eb7ce;stroke-width:2.5;stroke-linecap:round;}
.procedura-foglio {fill:#fcf0e9;stroke:#c93d58;stroke-width:2.3;stroke-linejoin:round;}
.procedura-piega {fill:none;stroke:#e4b4b3;stroke-width:2;stroke-linejoin:round;}
.procedura-sequenza {fill:none;stroke:#e4b4b3;stroke-width:2;}
.procedura-tappa {fill:#fcf0e9;stroke:#c93d58;stroke-width:2.5;}
.procedura-riga {fill:none;stroke:#c93d58;stroke-width:3;stroke-linecap:round;}
[data-grafica="procedura"] .tracciato {stroke-width:2.5;}

/* Valutazioni illustrative: stessa scala visiva, due letture diverse. */
.valutazione-riga--blu {--valutazione:#1d2f7a;}
.valutazione-riga--corallo {--valutazione:#c93d58;}
.valutazione-stella path {fill:#edf4f6;stroke:#bdcfd9;stroke-width:1.8;stroke-linejoin:round;}
.valutazione-stella--piena path {fill:var(--valutazione);stroke:var(--valutazione);}
.valutazione-divisore {fill:none;stroke:#d9e5eb;stroke-width:1.5;}
/* Rifiniture dei soggetti, mantenendo campiture e contorni ripristinati. */
.persona-dettaglio {fill:none;stroke:#8eb7ce;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.ruolo-titolo {fill:none;stroke:#1d2f7a;stroke-width:2.6;stroke-linecap:round;}
.ruolo-righe {fill:none;stroke:#8eb7ce;stroke-width:2;stroke-linecap:round;}
.automazione-flusso {fill:none;stroke:#b5cddc;stroke-width:2;stroke-linecap:round;}
.automazione-foglio {fill:#edf4f6;stroke:#8eb7ce;stroke-width:2.2;stroke-linejoin:round;}
.automazione-clip {fill:#e0ebf2;stroke:#1d2f7a;stroke-width:2.2;stroke-linejoin:round;}
[data-grafica="agentificabilita"] .ruota {fill:#e0ebf2;stroke:#1d2f7a;stroke-width:2.8;}
.orologio-perno {fill:#c93d58;stroke:none;}
.valutazione-virgolette {fill:#8eb7ce;stroke:none;}
.valutazione-riga--corallo .valutazione-virgolette {fill:#f7cdb6;}
.valutazione-racconto {fill:none;stroke:#b5cddc;stroke-width:3;stroke-linecap:round;}

/* Calendario e bilancia: illustrazioni concettuali con campiture e contorni. */
.calendario-base {fill:#d8e7f0;stroke:#8eb7ce;stroke-width:2;stroke-linejoin:round;}
.calendario-pagina {fill:#edf4f6;stroke:#1d2f7a;stroke-width:2.3;stroke-linejoin:round;}
.calendario-testata {fill:none;stroke:#8eb7ce;stroke-width:1.8;}
.calendario-anelli {fill:none;stroke:#8eb7ce;stroke-width:3;stroke-linecap:round;}
.calendario-giorno {fill:#f9fffb;stroke:#c5d9e4;stroke-width:1.3;}
.calendario-impegno {fill:none;stroke:#1d2f7a;stroke-width:3;stroke-linecap:round;}
.delegata-foglio {fill:#e0ebf2;stroke:#1d2f7a;stroke-width:2;stroke-linejoin:round;}
.delegata-piega {fill:none;stroke:#8eb7ce;stroke-width:1.5;stroke-linejoin:round;}
.delegata-righe {fill:none;stroke:#8eb7ce;stroke-width:2;stroke-linecap:round;}
.vaschetta-retro {fill:#fcf0e9;stroke:#c93d58;stroke-width:2;stroke-linejoin:round;}
.vaschetta-fronte {fill:#f5d6c9;stroke:#c93d58;stroke-width:2.3;stroke-linejoin:round;}
.vaschetta-presa {fill:none;stroke:#c93d58;stroke-width:2.5;stroke-linecap:round;}
.bilancia-sostegno {fill:none;stroke:#1d2f7a;stroke-width:3;stroke-linecap:round;}
.bilancia-base {fill:#e0ebf2;stroke:#1d2f7a;stroke-width:2.3;stroke-linejoin:round;}
.bilancia-braccio {fill:none;stroke:#1d2f7a;stroke-width:4;stroke-linecap:round;}
.bilancia-traversa {transform:rotate(6deg);}
.bilancia-fili {fill:none;stroke:#8eb7ce;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.bilancia-coppa {fill:#d8e7f0;stroke:#1d2f7a;stroke-width:2;stroke-linejoin:round;}
.bilancia-voce {fill:#1d2f7a;stroke:none;}
.bilancia-piatto--corallo .bilancia-fili {stroke:#e4b4b3;}
.bilancia-piatto--corallo .bilancia-coppa {fill:#f5d6c9;stroke:#c93d58;}
.bilancia-piatto--corallo .bilancia-voce {fill:#c93d58;}
.bilancia-perno {fill:#f9fffb;stroke:#1d2f7a;stroke-width:2;}
/* Un singolo meccanismo prende in carico il lavoro. */
.robot-base,.robot-colonna,.robot-segmento {fill:#e0ebf2;stroke:#1d2f7a;stroke-width:2.3;stroke-linejoin:round;}
.robot-colonna {fill:#d8e7f0;}
.robot-giunto {fill:#edf4f6;stroke:#1d2f7a;stroke-width:2.3;}
.robot-perno {fill:#8eb7ce;stroke:none;}
.robot-polso {fill:none;stroke:#1d2f7a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.robot-foglio {fill:#f5d6c9;stroke:#c93d58;stroke-width:2;stroke-linejoin:round;}
.robot-piega {fill:none;stroke:#e0a997;stroke-width:1.5;stroke-linejoin:round;}
.robot-righe {fill:none;stroke:#c93d58;stroke-width:1.8;stroke-linecap:round;}
/* Automazione: denti compatti, rotazioni opposte nel rapporto 12:8. */
.meccanismo-profilo {stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;}
.meccanismo-profilo--blu {fill:#d8e7f0;stroke:#1d2f7a;}
.meccanismo-profilo--corallo {fill:#f5d6c9;stroke:#c93d58;}
.meccanismo-foro {fill:#f9fffb;stroke-width:2;}
.meccanismo-foro--blu {stroke:#1d2f7a;}
.meccanismo-foro--corallo {stroke:#c93d58;}
.meccanismo-ruota {transform-origin:0 0;animation-duration:40s;animation-timing-function:linear;animation-iteration-count:infinite;}
.meccanismo-ruota--grande {animation-name:meccanismo-grande;}
.meccanismo-ruota--piccola {animation-name:meccanismo-piccolo;}
.output-pausa .meccanismo-ruota {animation-play-state:paused;}
@keyframes meccanismo-grande {from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes meccanismo-piccolo {from{transform:rotate(0deg)}to{transform:rotate(-540deg)}}
.ruolo-avatar .segno-testa {stroke-width:3.7;}
.ruolo-avatar .segno-blu {stroke-width:4;}