/* =========================================================
COMPETENZE
---------------------------------------------------------
Le tavole animate delle quattro aree (home, sezione COMPETENZE,
e pagina Competenze), le aree in versione lunga, l'indice
delle aree con la scena bloccata, la scheda in cinque tempi.
========================================================= */
/* ---------------------------------------------------------
COMPETENZE — le tavole delle quattro aree
Ogni area ha la sua scena disegnata con dei box, come una
schermata vista da lontano: il registro del gestionale, la
mappa dei sistemi della consulenza, il rack dell'infrastruttura,
la vetrina del digitale. Nessuna immagine, nessun gradiente.
FERMA, la tavola e' gia' la cosa finita: e' quello che si vede
senza JS, con meno movimento, e fra un racconto e l'altro.
IN MOVIMENTO, racconta una volta come ci si arriva (.is-run,
messa e tolta da main.js, sezione 14): un record entra e prende
il timbro, il mirino passa sui sistemi e traccia il collegamento
che mancava, un server cade e si ripristina, un prodotto va nel
carrello. L'arancio e' sempre e solo il segno del cambio.
Dove si mette: sopra i 600px di cella (container query) a destra
del testo; sotto, striscia sopra il codice. La larghezza a lato
parte stretta (190px) e cresce piu' in fretta della cella: a 600px
al testo restano 386px, e il titolo piu' lungo — L'INFRASTRUTTURA,
a 36px, una parola sola che non va a capo — ne vuole 375
(misurato a 1400). Con 34cqi fissi ne restavano 372: sbordava.
--------------------------------------------------------- */
.fig{
--fig-run:3s; /* un racconto; main.js lo legge da qui */
display:flex;align-items:center;justify-content:center;
height:156px;padding:14px 16px;
background:var(--fg-bg);border:1px solid var(--fg-line);overflow:hidden;
transition:background-color .5s var(--ease),border-color .5s var(--ease);
}
/* il posto nella cella della home; quello nelle schede di
Competenze sta con .svc__b */
.area > .fig{grid-area:1/1/2/2;margin-bottom:30px}
@container (min-width:600px){
.area > .fig{
grid-area:1/2/7/3;align-self:start;
width:clamp(190px,calc(38cqi - 40px),300px);margin:0 0 0 clamp(24px,4cqi,48px);
}
}
/* la scena: 126px = 156 - 2x14 di respiro - 2x1 di bordo. Le misure
verticali qui dentro sono in pixel perche' i racconti le usano. */
.fig__s{position:relative;display:block;width:100%;height:126px}
.fig i{display:block;height:4px;background:currentColor;opacity:.26}
.fig b,.fig u{display:block}
.fig__card{
background:var(--fg-card);border:1px solid var(--fg-line);
transition:background-color .5s var(--ease),border-color .5s var(--ease);
}
/* SW-02 — il registro. Barra laterale con la sezione accesa, tabella
con testata e righe tutte uguali: e' la condizione perche' il
giro si chiuda senza scatti. Le righe sono 6 e se ne vedono 5
(21px l'una, 105 sotto una testata di 21): a riposo la prima sta
sopra il bordo, spinta su di una riga. */
.fig--sw .fig__s{display:flex;gap:12px}
.fig__side{
flex:0 0 18%;max-width:64px;display:flex;flex-direction:column;gap:10px;
padding:9px 12px 0 0;border-right:1px solid var(--fg-line);
transition:border-color .5s var(--ease);
}
.fig__side i:nth-child(odd){width:72%}
.fig__side .is-on{background:var(--orange);opacity:1}
.fig__tab{flex:1;min-width:0;display:flex;flex-direction:column}
.fig__th,.fig__tr{
display:grid;grid-template-columns:1fr 3fr 1.6fr 8px;column-gap:10px;align-items:center;
height:21px;border-bottom:1px solid var(--fg-line);
transition:border-color .5s var(--ease);
}
.fig__th{flex:none}
.fig__th i{height:3px;width:64%;opacity:.5}
.fig__tb{position:relative;display:block;flex:1;overflow:hidden}
.fig__rows{display:block;transform:translateY(-21px)}
.fig__tr{position:relative}
.fig__tr i:nth-child(1){width:70%}
.fig__tr i:nth-child(2){width:86%}
.fig__tr i:nth-child(3){width:56%}
.fig__tr b,.fig__tr u{grid-area:1/4;width:8px;height:8px}
.fig__tr b{background:currentColor;opacity:.4}
.fig__tr u{background:var(--orange);opacity:0}
.fig__tr.is-new::before,.fig__tr.is-new::after{content:'';position:absolute;opacity:0}
.fig__tr.is-new::before{left:0;top:0;bottom:0;width:2px;background:var(--orange)}
.fig__tr.is-new::after{inset:0;background:var(--orange)}
/* IT-01 — la mappa dei sistemi. Quattro nodi, tre collegamenti
pieni e quello tracciato dalla consulenza, in arancio; sotto, il
tratteggio di quando mancava. Il mirino ha una cornice grande
quanto la scena: spostandola del 68% della sua larghezza il
mirino va dal nodo di sinistra a quello di destra (100 - 32). */
.fig--it .fig__s{max-width:360px}
.fig__n{
position:absolute;width:32%;height:30px;
display:flex;align-items:center;gap:8px;padding:0 10px;
}
.fig__n i:first-child{flex:none;width:7px;height:7px;opacity:.45}
.fig__n i:last-child{flex:1;max-width:64%}
.fig__n--a{left:0;top:12px}
.fig__n--b{right:0;top:12px}
.fig__n--c{left:0;top:84px}
.fig__n--d{right:0;top:84px}
.fig .fig__l{position:absolute;opacity:.4}
.fig .fig__l--ab,.fig .fig__l--cd{left:32%;right:32%;width:auto;height:1px}
.fig .fig__l--ab{top:27px}
.fig .fig__l--cd{top:99px}
.fig .fig__l--ac{left:16%;top:42px;width:1px;height:42px}
.fig .fig__l--bd{
left:84%;top:42px;width:0;height:42px;
background:none;border-left:1px dashed currentColor;opacity:.5;
}
.fig .fig__l--new{
left:calc(84% - .5px);top:42px;width:2px;height:42px;
background:var(--orange);opacity:1;transform-origin:top;
}
.fig__mira{position:absolute;inset:0;display:block;opacity:0;pointer-events:none}
.fig__mira > span{position:absolute;left:-5px;top:7px;display:block;width:calc(32% + 10px);height:40px}
.fig__mira b{position:absolute;width:8px;height:8px;border:0 solid var(--orange)}
.fig__mira b:nth-child(1){left:0;top:0;border-width:2px 0 0 2px}
.fig__mira b:nth-child(2){right:0;top:0;border-width:2px 2px 0 0}
.fig__mira b:nth-child(3){right:0;bottom:0;border-width:0 2px 2px 0}
.fig__mira b:nth-child(4){left:0;bottom:0;border-width:0 0 2px 2px}
/* IN-03 — il rack. Tre server da 1U fra due montanti; il secondo e'
quello che cade. Il led e' due pezzi nella stessa cella di
griglia: il quadrato vuoto (spento) e il pieno arancio (acceso)
sopra — spegnere e' solo togliere il pieno. */
.fig--in .fig__s{
max-width:440px;display:flex;flex-direction:column;justify-content:center;gap:8px;
border-inline:4px solid var(--fg-line);padding:0 6px;
transition:border-color .5s var(--ease);
}
.fig__u{position:relative;display:flex;align-items:center;gap:12px;height:30px;padding:0 10px}
.fig__uc{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.fig__bay{display:flex;gap:3px;flex:none}
.fig .fig__bay i{width:3px;height:14px;opacity:.3}
.fig__uc > i{flex:1;max-width:38%}
.fig__led{display:grid;gap:5px;grid-template-columns:6px 6px;flex:none}
.fig__led i{width:6px;height:6px;opacity:.3}
.fig__led b,.fig__led u{grid-area:1/2;width:6px;height:6px}
.fig__led b{border:1px solid var(--fg-mute);transition:border-color .5s var(--ease)}
.fig__led u{background:var(--orange)}
.fig__rip{position:absolute;left:-1px;right:-1px;bottom:-1px;height:2px;background:var(--orange);opacity:0;transform-origin:left}
/* DG-04 — la vetrina. Barra del browser con il carrello, tre prodotti
in fila; il secondo e' quello che si compra. */
.fig--dg .fig__s{max-width:380px;display:flex;flex-direction:column;gap:8px}
.fig__bar{display:flex;align-items:center;gap:8px;flex:none;height:20px;padding:0 8px}
.fig__bar > i:first-child{flex:none;width:6px;height:6px;opacity:.45}
.fig__bar > i:nth-child(2){flex:1;max-width:56%;height:3px}
.fig__cart{
position:relative;flex:none;margin-left:auto;width:12px;height:9px;
border:1.5px solid var(--fg-mute);border-top:0;
transition:border-color .5s var(--ease);
}
.fig__cart b{position:absolute;right:-6px;top:-6px;width:6px;height:6px;background:var(--orange)}
.fig__prods{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:0}
.fig__p{position:relative;display:flex;flex-direction:column;gap:6px;padding:6px;min-width:0}
.fig__img{display:block;flex:1;background:var(--fg-bg);transition:background-color .5s var(--ease)}
.fig__p > i{width:80%;flex:none}
.fig__pr{display:flex;align-items:center;justify-content:space-between;flex:none;height:10px}
.fig__pr i{width:38%}
.fig__pr b,.fig__pr u{width:10px;height:10px}
.fig__pr b{border:1px solid var(--fg-mute);transition:border-color .5s var(--ease)}
.fig__pr span{display:grid}
.fig__pr span > *{grid-area:1/1}
.fig__pr u{background:var(--orange);opacity:0}
.fig__p.is-k::after{content:'';position:absolute;inset:-1px;border:1px solid var(--orange);opacity:0}
/* I RACCONTI. Uno per tavola, tutti lunghi --fig-run, e tutti finiscono
dove sono cominciati: a riposo, cioe' la tavola ferma qui sopra.
Solo transform e opacita'. Stanno dietro a prefers-reduced-motion
anche se .is-run la mette solo main.js dopo il cancello: se un
domani la mettesse qualcun altro, il movimento resta escluso. */
@media (prefers-reduced-motion:no-preference){
.fig.is-run *,.fig.is-run *::before,.fig.is-run *::after{
animation-duration:var(--fig-run);animation-timing-function:var(--ease);animation-fill-mode:both;
}
/* SW-02: il record nuovo entra dall'alto e spinge giu' gli altri,
prende il timbro arancio, poi torna una riga come le altre. Lo
scatto finale (-21px, a gradino) non si vede: le righe sono
uguali, e la tabella di prima e quella di dopo coincidono. */
.fig.is-run .fig__rows{animation-name:fg-sw-rows}
.fig.is-run .fig__tr.is-new::before{animation-name:fg-sw-edge}
.fig.is-run .fig__tr.is-new::after{animation-name:fg-sw-tint}
.fig.is-run .fig__tr.is-new b{animation-name:fg-sw-wait}
.fig.is-run .fig__tr.is-new u{animation-name:fg-sw-stamp}
/* IT-01: il collegamento arancio si spegne (resta il tratteggio),
il mirino mette a fuoco il primo nodo e passa sugli altri due,
e sull'ultimo il collegamento si traccia dall'alto. */
.fig.is-run .fig__l--new{animation-name:fg-it-link}
.fig--it.is-run .fig__mira{animation-name:fg-it-mira}
.fig--it.is-run .fig__mira > span{animation-name:fg-it-fuoco}
/* IN-03: il secondo server si spegne, la barra del ripristino
lo attraversa, il led si riaccende. */
.fig.is-run .fig__u.is-k .fig__led u{animation-name:fg-in-led}
.fig.is-run .fig__u.is-k .fig__uc{animation-name:fg-in-dim}
.fig.is-run .fig__u.is-k .fig__rip{animation-name:fg-in-rip}
/* DG-04: il pulsante del secondo prodotto si preme, la scheda si
accende, il segno del carrello scatta. */
.fig.is-run .fig__p.is-k u{animation-name:fg-dg-btn}
.fig.is-run .fig__p.is-k::after{animation-name:fg-dg-card}
.fig.is-run .fig__cart b{animation-name:fg-dg-badge}
}
@keyframes fg-sw-rows{
0%,12%{transform:translateY(-21px)}
34%{transform:none}
99%{transform:none;animation-timing-function:steps(1,end)}
100%{transform:translateY(-21px)}
}
@keyframes fg-sw-edge{0%,74%{opacity:1}92%,100%{opacity:0}}
@keyframes fg-sw-tint{0%,74%{opacity:.1}92%,100%{opacity:0}}
@keyframes fg-sw-wait{0%,38%{opacity:.12}46%,100%{opacity:.4}}
@keyframes fg-sw-stamp{
0%,36%{opacity:1;transform:scale(0)}
44%{opacity:1;transform:scale(1.3)}
52%,74%{opacity:1;transform:none}
92%,100%{opacity:0;transform:none}
}
@keyframes fg-it-link{
0%{opacity:1;transform:none}
7%{opacity:0;transform:none}
8%,60%{opacity:0;transform:scaleY(0)}
61%{opacity:1;transform:scaleY(0)}
76%,100%{opacity:1;transform:none}
}
@keyframes fg-it-mira{
0%,8%{opacity:0;transform:none}
16%,24%{opacity:1;transform:none}
38%,44%{opacity:1;transform:translateX(68%)}
56%,66%{opacity:1;transform:translate(68%,72px)}
80%,100%{opacity:0;transform:translate(68%,72px)}
}
@keyframes fg-it-fuoco{0%,8%{transform:scale(1.3)}20%,100%{transform:none}}
@keyframes fg-in-led{0%,10%{opacity:1}13%,68%{opacity:0}72%,100%{opacity:1}}
@keyframes fg-in-dim{0%,10%{opacity:1}16%,66%{opacity:.3}76%,100%{opacity:1}}
@keyframes fg-in-rip{
0%,24%{opacity:1;transform:scaleX(0);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}
66%,78%{opacity:1;transform:none}
92%,100%{opacity:0;transform:none}
}
@keyframes fg-dg-btn{
0%,12%{opacity:0;transform:none}
16%{opacity:1;transform:scale(.6)}
26%,72%{opacity:1;transform:none}
88%,100%{opacity:0;transform:none}
}
@keyframes fg-dg-card{0%,16%{opacity:0}24%,72%{opacity:1}88%,100%{opacity:0}}
@keyframes fg-dg-badge{0%,28%{transform:none}35%{transform:scale(1.9)}46%,100%{transform:none}}
/* ---------------------------------------------------------
COMPETENZE (pagina) — le tavole delle quattro schede
Stesso sistema delle tavole della home: box e barre in
currentColor, colori --fg-*, l'arancio solo per il cambio;
ferma e' la cosa finita, .is-run la racconta una volta
(regia: main.js, sezione 14, «le tavole delle schede»).
La scena pero' e' un'altra. La home dice cos'e' l'area; la
scheda mostra la cosa vera che le resta, quasi sempre quella
del suo caso correlato:
IT-01 sei moduli, e il mirino dell'analisi ne segna due da
sostituire (CS-04: 2 moduli su 6);
SW-02 una pratica del gestionale: si compila l'ultimo campo
e lo stato avanza di un passo — il processo e' il suo;
IN-03 il servizio sulla linea del tempo: cade e torna su;
sotto, i backup, il lavoro perso e il tempo di
ripristino (CS-03);
DG-04 lo stesso dato in due posti: un ordine passa dal sito
al gestionale e la giacenza cala insieme, di qua e di la'.
Due movimenti per racconto, piu' il ritorno a «prima» in
apertura. Nessun numero disegnato: i numeri stanno nel testo.
--------------------------------------------------------- */
/* IT-01 — i moduli. Tre per due; il secondo e il sesto sono quelli
da sostituire: filetto e segno arancio. Il mirino e' quello della
home, grande quanto un modulo piu' 5px per lato: un passo di
colonna e' la sua larghezza meno 2px (il modulo piu' gli 8px di
gap), uno di riga 67px (59 + 8). */
.fig--mod .fig__s{
max-width:360px;display:grid;gap:8px;
grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,59px);
}
.fig__m{position:relative;display:flex;flex-direction:column;gap:7px;padding:9px 10px 0}
.fig__m i:first-child{width:7px;height:7px;opacity:.45}
.fig__m i:nth-child(2){width:72%}
.fig__m i:nth-child(3){width:46%;opacity:.16}
.fig__m u{position:absolute;right:9px;top:9px;width:7px;height:7px;background:var(--orange)}
.fig__m.is-k::after{content:'';position:absolute;inset:-1px;border:1px solid var(--orange);pointer-events:none}
.fig--mod .fig__mira > span{left:-5px;top:-5px;width:calc((100% - 16px) / 3 + 10px);height:69px}
/* SW-02 — la pratica. Una finestra: testata, gli stati del processo
(due fatti, quello corrente in arancio, uno da fare, tratteggiato),
quattro campi. Il nodo e' due pezzi nella stessa cella, come il
led del rack: il quadrato vuoto e il pieno arancio sopra. */
.fig--pra .fig__s{max-width:340px;display:flex;flex-direction:column}
.fig--pra .fig__bar,.fig--sin .fig__bar{height:18px;border-bottom:1px solid var(--fg-line);transition:border-color .5s var(--ease)}
.fig__st{position:relative;flex:none;display:flex;justify-content:space-between;align-items:center;height:30px;margin:0 12px}
.fig .fig__sl{position:absolute;top:14px;height:2px;width:calc((100% - 8px) / 3);opacity:.5;transform-origin:left}
.fig .fig__sl--1{left:4px}
.fig .fig__sl--2{left:calc(4px + (100% - 8px) / 3)}
.fig .fig__sl--3{
left:calc(4px + (100% - 8px) * 2 / 3);top:15px;height:0;
background:none;border-top:1px dashed currentColor;opacity:.4;
}
.fig__sn{position:relative;display:grid;width:8px;height:8px}
.fig__sn > *{grid-area:1/1;width:8px;height:8px}
.fig .fig__sn i{height:8px;opacity:.55}
.fig__sn b{background:var(--fg-card);border:1px solid var(--fg-mute);transition:background-color .5s var(--ease),border-color .5s var(--ease)}
.fig__sn u{background:var(--orange)}
.fig__form{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:8px 10px;padding:2px 12px 0}
.fig__f{display:flex;flex-direction:column;gap:5px;min-width:0}
.fig .fig__f > i{width:42%;height:3px;opacity:.4}
.fig__in{
display:flex;align-items:center;height:17px;padding:0 6px;
background:var(--fg-bg);border:1px solid var(--fg-line);
transition:background-color .5s var(--ease),border-color .5s var(--ease);
}
.fig__in i{width:72%;transform-origin:left}
.fig__f:nth-child(2) .fig__in i{width:54%}
.fig__f:nth-child(3) .fig__in i{width:38%}
.fig__f:nth-child(4) .fig__in i{width:62%}
/* IN-03 — il ripristino. Il servizio e' una linea a gradini: su,
giu' (tratteggiata, come il collegamento che mancava nella
mappa della home) e di nuovo su, con la risalita e il suo segno
in arancio. Sull'asse i backup, che tacciono mentre il servizio
e' giu'; sotto l'asse due parentesi: il lavoro perso (dall'ultimo
backup al guasto) e il tempo di ripristino. Le x sono in % della
scena: guasto al 53, ripristino al 68, ultimo backup al 46. */
.fig--rip .fig__s{max-width:420px}
.fig__plot{position:absolute;inset:0;display:block}
.fig .fig__lv{position:absolute;top:24px;height:2px;opacity:.6}
.fig .fig__lv--a{left:0;width:53%}
.fig .fig__lv--b{left:68%;right:0;width:auto}
.fig .fig__dn{position:absolute;left:53%;top:25px;width:1px;height:44px;opacity:.35}
.fig .fig__lo{
position:absolute;left:53%;top:68px;width:15%;height:0;
background:none;border-top:1px dashed currentColor;opacity:.5;
}
.fig .fig__up{position:absolute;left:calc(68% - 1px);top:24px;width:2px;height:45px;background:var(--orange);opacity:1}
.fig__ok{position:absolute;left:calc(68% - 4px);top:21px;width:8px;height:8px;background:var(--orange)}
.fig .fig__ax{position:absolute;left:0;right:0;top:94px;width:auto;height:1px;opacity:.3}
.fig__bk{position:absolute;left:0;right:0;top:92px;height:5px;display:block}
.fig__bk b{position:absolute;top:0;width:5px;height:5px;margin-left:-2px;background:currentColor;opacity:.5}
.fig__bk b:nth-child(1){left:4%}
.fig__bk b:nth-child(2){left:14.5%}
.fig__bk b:nth-child(3){left:25%}
.fig__bk b:nth-child(4){left:35.5%}
.fig__bk b:nth-child(5){left:46%}
.fig__bk b:nth-child(6){left:79%}
.fig__bk b:nth-child(7){left:89.5%}
.fig__br{position:absolute;top:104px;height:7px;border:1px solid currentColor;border-top:0}
.fig__br--p{left:46%;width:calc(7% - 3px);opacity:.5}
.fig__br--r{left:53%;width:15%;border-color:var(--orange)}
.fig__now{position:absolute;inset:0;display:block;opacity:0;pointer-events:none}
.fig .fig__now i{position:absolute;left:0;top:8px;width:1px;height:92px;opacity:.55}
/* DG-04 — lo stesso dato. A sinistra il sito (prodotto e sotto la
giacenza, cinque quadrati), a destra il gestionale (la riga dello
stesso prodotto, con la stessa giacenza), in mezzo il collegamento
all'altezza delle due giacenze. Il quarto quadrato e' tre pezzi
nella stessa cella: il vuoto, il pieno di prima, il lampo arancio. */
.fig--sin .fig__s{max-width:400px;display:flex;align-items:flex-start}
.fig__w{flex:0 0 40%;height:100%;min-width:0;display:flex;flex-direction:column}
.fig__sp{flex:1;display:flex;flex-direction:column;gap:8px;padding:8px 8px 0}
.fig--sin .fig__img{flex:none;height:31px}
.fig .fig__sp > i{width:70%}
.fig__q{display:flex;gap:3px;flex:none}
.fig .fig__q i{width:6px;height:6px;opacity:.55}
.fig__q b{width:6px;height:6px;border:1px solid var(--fg-mute);transition:border-color .5s var(--ease)}
.fig__q .is-k{display:grid}
.fig__q .is-k > *{grid-area:1/1}
.fig .fig__q .is-k i{opacity:0}
.fig__q .is-k u{width:6px;height:6px;background:var(--orange);opacity:0}
.fig__gr{
display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;
height:25px;padding:0 8px;border-bottom:1px solid var(--fg-line);
transition:border-color .5s var(--ease);
}
.fig__gr:last-child{border-bottom:0}
.fig .fig__gr > i:first-child{width:44%}
.fig .fig__gr > i + i{width:24%;opacity:.16}
/* il collegamento, all'altezza delle due giacenze. Nel sito:
1 di bordo + 18 di testata + 8 + 31 d'immagine + 8 + 4 di nome
+ 8 = 78, e il quadrato e' alto 6: centro a 81. Nel gestionale
la terza riga va da 69 a 94. Chi cambia una misura qui sopra
rifa' il conto. */
.fig__link{position:relative;flex:1;height:1px;margin-top:81px;display:block}
.fig__link::before{content:'';position:absolute;inset:0;background:currentColor;opacity:.35}
.fig__go{position:absolute;inset:0;display:block}
.fig__go u{position:absolute;left:-3px;top:-3px;width:7px;height:7px;background:var(--orange);opacity:0}
@media (prefers-reduced-motion:no-preference){
/* IT-01: i due segni si tolgono; il mirino mette a fuoco il
secondo modulo e lo segna, passa al sesto e segna anche quello. */
.fig--mod.is-run .fig__mira{animation-name:fg-mod-mira}
.fig--mod.is-run .fig__mira > span{animation-name:fg-mod-fuoco}
.fig.is-run .fig__m.is-k::after{animation-name:fg-mod-k1}
.fig.is-run .fig__m.is-k u{animation-name:fg-mod-u1}
.fig.is-run .fig__m.is-k2::after{animation-name:fg-mod-k2}
.fig.is-run .fig__m.is-k2 u{animation-name:fg-mod-u2}
/* SW-02: si torna a prima (campo vuoto, stato indietro di uno),
poi l'ultimo campo si scrive a scatti, il tratto verso lo stato
nuovo si traccia e il nodo si accende. */
.fig.is-run .fig__f.is-k .fig__in i{animation-name:fg-pra-type}
.fig.is-run .fig__sl--2{animation-name:fg-pra-seg}
.fig.is-run .fig__sn.is-k u{animation-name:fg-pra-node}
/* IN-03: la linea si toglie e il cursore del tempo la ridisegna
da sinistra, a velocita' costante; al ripristino il segno
arancio scatta. */
.fig.is-run .fig__plot{animation-name:fg-rip-plot}
.fig.is-run .fig__now{animation-name:fg-rip-now}
.fig.is-run .fig__ok{animation-name:fg-rip-ok}
/* DG-04: la giacenza torna di uno sopra, l'ordine corre sul
collegamento, e il quarto quadrato si svuota nello stesso
istante di qua e di la'. */
.fig.is-run .fig__q .is-k i{animation-name:fg-sin-pieno}
.fig.is-run .fig__q .is-k u{animation-name:fg-sin-lampo}
.fig.is-run .fig__go{animation-name:fg-sin-corsa}
.fig.is-run .fig__go u{animation-name:fg-sin-ordine}
}
@keyframes fg-mod-mira{0%,8%{opacity:0}14%,72%{opacity:1}82%,100%{opacity:0}}
@keyframes fg-mod-fuoco{
0%,8%{transform:translate(calc(100% - 2px),0) scale(1.3)}
20%,34%{transform:translate(calc(100% - 2px),0) scale(1)}
50%,100%{transform:translate(calc(200% - 4px),67px) scale(1)}
}
@keyframes fg-mod-k1{0%{opacity:1}6%,24%{opacity:0}30%,100%{opacity:1}}
@keyframes fg-mod-k2{0%{opacity:1}6%,56%{opacity:0}62%,100%{opacity:1}}
@keyframes fg-mod-u1{
0%{opacity:1;transform:none}
6%{opacity:0;transform:none}
7%,24%{opacity:0;transform:scale(0)}
25%{opacity:1;transform:scale(0)}
31%{opacity:1;transform:scale(1.5)}
38%,100%{opacity:1;transform:none}
}
@keyframes fg-mod-u2{
0%{opacity:1;transform:none}
6%{opacity:0;transform:none}
7%,56%{opacity:0;transform:scale(0)}
57%{opacity:1;transform:scale(0)}
63%{opacity:1;transform:scale(1.5)}
70%,100%{opacity:1;transform:none}
}
/* le barre stanno a .26 (.fig i): il campo che si scrive pure */
@keyframes fg-pra-type{
0%{opacity:.26;transform:none}
6%{opacity:0;transform:none}
7%,12%{opacity:.26;transform:scaleX(0);animation-timing-function:steps(7,end)}
40%,100%{opacity:.26;transform:none}
}
@keyframes fg-pra-seg{
0%{opacity:.5;transform:none}
6%{opacity:0;transform:none}
7%,48%{opacity:.5;transform:scaleX(0)}
62%,100%{opacity:.5;transform:none}
}
@keyframes fg-pra-node{
0%{opacity:1;transform:none}
6%{opacity:0;transform:none}
7%,60%{opacity:0;transform:scale(0)}
61%{opacity:1;transform:scale(0)}
67%{opacity:1;transform:scale(1.5)}
74%,100%{opacity:1;transform:none}
}
@keyframes fg-rip-plot{
0%{opacity:1;clip-path:inset(0% 0% 0% 0%)}
6%{opacity:0;clip-path:inset(0% 0% 0% 0%)}
7%{opacity:0;clip-path:inset(0% 100% 0% 0%)}
10%{opacity:1;clip-path:inset(0% 100% 0% 0%);animation-timing-function:linear}
82%,100%{opacity:1;clip-path:inset(0% 0% 0% 0%)}
}
@keyframes fg-rip-now{
0%,9%{opacity:0;transform:none}
10%{opacity:1;transform:none;animation-timing-function:linear}
82%{opacity:1;transform:translateX(100%)}
90%,100%{opacity:0;transform:translateX(100%)}
}
/* il cursore passa sul 68% della scena al 59% del racconto
(10 + 0,68 x 72) */
@keyframes fg-rip-ok{
0%,6%{transform:none}
7%,59%{transform:scale(0)}
64%{transform:scale(1.6)}
70%,100%{transform:none}
}
@keyframes fg-sin-pieno{0%{opacity:0}6%,44%{opacity:.55}47%,100%{opacity:0}}
@keyframes fg-sin-lampo{0%,43%{opacity:0}46%,60%{opacity:1}76%,100%{opacity:0}}
@keyframes fg-sin-corsa{0%,12%{transform:none}40%,100%{transform:translateX(100%)}}
@keyframes fg-sin-ordine{0%,10%{opacity:0}13%,38%{opacity:1}42%,100%{opacity:0}}
/* ---------------------------------------------------------
AREE DI COMPETENZA, versione lunga
Due blocchi contigui uno sopra l'altro: in alto sigla, titolo
e rimando al caso sulla stessa riga, poi le due risposte
guidate da un'etichetta; sotto, la banda steel o arancio di
quello che facciamo, a celle. La banda tiene la stessa gabbia
delle risposte: l'etichetta sta nella colonna dei (170px
+ 20 di gap), e il filetto che apre le celle cade sul bordo
sinistro dei .
Prima era un dittico affiancato: e' diventato una colonna per
lasciare il posto allo schema del sistema (.sis, sotto).
--------------------------------------------------------- */
.svc{border-top:1px solid var(--line-d)}
.sec--bone .svc{border-top-color:var(--line-l)}
.svc__in{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line-d)}
.sec--bone .svc__in{background:var(--line-l)}
.svc__l{padding:clamp(38px,4.2vw,68px) var(--pad) clamp(26px,3vw,46px);container-type:inline-size}
/* i colori della tavola (--fg-*) sulle schede: vedi .area in home.css */
.svc__l.blk--bone{--fg-bg:var(--bone-2);--fg-card:var(--bone);--fg-line:var(--line-l);--fg-mute:rgba(20,20,22,.42)}
.svc__l.blk--coal{--fg-bg:var(--coal);--fg-card:var(--coal-3);--fg-line:var(--line-d);--fg-mute:rgba(244,242,238,.42)}
.svc__h{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px 40px;margin-bottom:26px}
.svc__k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--orange);margin-bottom:26px}
.svc__t{
font-size:clamp(22px,3.4vw,48px);line-height:.96;letter-spacing:-.045em;
text-transform:uppercase;font-variation-settings:'wdth' 110,'wght' 700;max-width:19ch;
}
.svc__q{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;padding:18px 0;border-top:1px solid var(--line-d)}
.blk--bone .svc__q{border-top-color:var(--line-l)}
.svc__q dt{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;opacity:.62;padding-top:2px}
.svc__q dd{margin:0;font-size:14.5px;line-height:1.62;max-width:58ch}
/* il rimando al caso: in fondo a destra della riga del titolo */
.svc__c{padding-bottom:4px;white-space:nowrap}
/* il pulsante verso contatti: in alto a destra della testata della scheda */
.svc__def{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px}
.svc__def>*{grid-column:1}
.svc__def>.svc__go{grid-column:2;grid-row:1 / span 2;align-self:end}
.svc__go{align-self:start;white-space:nowrap;gap:12px}
.svc__go span{display:inline-block;font-size:14px;transition:transform .35s var(--ease)}
.svc__go:hover span,.svc__go:focus-visible span{transform:translateX(5px)}
.svc__go:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* il corpo della scheda: le due risposte e la tavola dell'area
(.fig, «COMPETENZE (pagina) — le tavole»). L'impianto (tavola
sopra a tutta larghezza, colonna) e' in COMPETENZE (pagina) — la
scheda in cinque tempi: .svc .svc__b e .svc .svc__b > .fig vincono
su ordine, flex, margini e larghezza della tavola. Qui resta solo
quello che non riscrivono; il contenitore e' .svc__l. */
@container (min-width:700px){
.svc__b{display:flex;justify-content:space-between;column-gap:clamp(24px,2.6vw,48px)}
.svc__b > dl{flex:0 1 auto;min-width:0}
}
/* la banda «cosa facciamo»: etichetta sopra, etichette a capsula
sotto. Impaginazione (padding, filetti, corpo, display) in
COMPETENZE (pagina) — la scheda in cinque tempi: .svc .svc__r …
vince su tutto, anche sotto i 900/620px. Qui resta solo quello
che quelle regole non riscrivono. */
.svc__r{padding:0;overflow:hidden}
.svc__rk{
display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;
opacity:.8;
}
.svc__l2 li{display:flex;gap:12px}
.svc__l2 li::before{content:'';width:7px;height:7px;background:var(--orange);flex:0 0 auto;transform:translateY(-2px)}
/* sulla banda arancio il quadratino arancio sparirebbe: passa a
--on-orange (i filetti: .blk--orange.svc__r …, in fondo). L'etichetta
resta a .85 (4,8:1, §11.2); su steel a .8 (6,0:1). */
.blk--orange .svc__l2 li::before{background:var(--on-orange)}
.blk--orange .svc__q{border-top-color:rgba(35,18,4,.22)}
/* ---------------------------------------------------------
L'INDICE DELLE AREE (pagina Competenze)
A destra delle quattro aree, fermo mentre si legge: quattro
celle UGUALI, nello stesso ordine della pagina, dalla 01 alla
04. Numero grande, codice, nome e titolo dell'area: le stesse
parole della scheda, nient'altro.
Prima qui c'era uno schema del sistema a strati (sito sopra,
server sotto, consulenza come cornice). Tolto il 2026-09-11:
confondeva — l'ordine della pila non era quello della pagina,
e la consulenza aveva un'altra forma e un altro peso.
La cella dell'area che si sta leggendo si ACCENDE: una copia
arancio (.sis__lit, la costruisce main.js) scoperta dal
clip-path. Sul fondo di ogni cella un filetto da 2px si riempie
mentre la si legge (--p, scaleX): le aree lette restano
segnate. Lo stato lo scrive main.js «INDICE DELLE AREE» e vale
anche con prefers-reduced-motion, dove cambia di colpo.
Senza JS l'indice e' fermo, senza celle accese, e le celle
restano ancore. Sotto i 1180px (o sotto i 600px di altezza)
diventa una striscia di quattro celle ferma sotto la testata.
(Il prefisso .sis viene dallo schema: e' rimasto per non
toccare la scena bloccata, che lo usa.)
--------------------------------------------------------- */
.aree{--sis-w:clamp(320px,26vw,440px);background:var(--coal)}
.aree__in{display:grid;grid-template-columns:minmax(0,1fr) var(--sis-w)}
.aree__l{grid-column:1;grid-row:1;min-width:0}
.sis{grid-column:2;grid-row:1;background:var(--coal);color:var(--on-dark);border-left:1px solid var(--line-d);border-top:1px solid var(--line-d)}
.sis__in{
position:sticky;top:var(--hdr);
height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));
display:flex;flex-direction:column;
}
.sis__hd{
display:flex;justify-content:space-between;align-items:baseline;gap:12px;
padding:clamp(16px,2.4vh,26px) var(--pad) 12px clamp(20px,2vw,32px);
border-bottom:1px solid var(--line-d);
font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark-2);
}
.sis__n{font-variant-numeric:tabular-nums;white-space:nowrap}
.sis__n b{font-weight:500;color:var(--orange)}
/* quattro righe uguali che si dividono l'altezza della colonna:
stesso peso per tutte, qualunque sia la lunghezza del titolo */
.sis__map{flex:1 1 auto;min-height:0;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-d)}
.sis__a{
position:relative;display:block;min-height:0;overflow:hidden;
padding:clamp(12px,2vh,22px) var(--pad) clamp(14px,2.2vh,24px) clamp(20px,2vw,32px);
background:var(--coal);
transition:background-color .35s var(--ease);
}
.sis__b{
display:grid;height:100%;
grid-template-columns:minmax(0,1fr) auto;
grid-template-rows:auto minmax(0,1fr) auto auto;
grid-template-areas:"n c" ". ." "t t" "s s";
}
.sis__nn{
grid-area:n;font-size:clamp(26px,3.6vh,44px);line-height:.9;letter-spacing:-.05em;
font-variation-settings:'wdth' 110,'wght' 800;font-variant-numeric:tabular-nums;color:var(--on-dark-2);
transition:color .35s var(--ease);
}
.sis__c{grid-area:c;font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.02em;color:var(--orange)}
.sis__t{
grid-area:t;font-size:clamp(15px,1.25vw,19px);line-height:1.05;letter-spacing:-.025em;
text-transform:uppercase;font-variation-settings:'wdth' 106,'wght' 700;
}
.sis__s{grid-area:s;margin-top:5px;font-size:13px;line-height:1.4;color:var(--on-dark-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* l'avanzamento, sul fondo della cella e sopra la copia accesa */
.sis__a::before{
content:'';position:absolute;z-index:2;left:0;right:0;bottom:0;height:2px;
background:var(--orange);transform:scaleX(var(--p,0));transform-origin:left center;pointer-events:none;
}
.sis__a[aria-current="true"]::before{background:var(--on-orange)}
.sis__a:hover{background:var(--coal-3)}
.sis__a:hover .sis__nn{color:var(--on-dark)}
/* fuoco tastiera: l'anello arancio a 3px del sito, ma disegnato
sopra la copia accesa (z-index 3) — un outline le finirebbe
sotto. Sulla cella accesa passa a --on-orange. */
.sis__a:focus-visible{outline:none}
.sis__a:focus-visible::after{content:'';position:absolute;inset:0;z-index:3;box-shadow:inset 0 0 0 3px var(--orange);pointer-events:none}
.sis__a[aria-current="true"]:focus-visible::after{box-shadow:inset 0 0 0 3px var(--on-orange)}
/* la copia accesa. Chiusa a riposo, aperta sulla cella corrente.
Arancio pieno, testo --on-orange: il codice a .85 (4,8:1), il
resto pieno (6,2:1). */
.sis__lit{
position:absolute;inset:0;z-index:1;display:block;padding:inherit;
background:var(--orange);color:var(--on-orange);
clip-path:inset(0% 0% 100% 0%);pointer-events:none;
}
.sis__a[aria-current="true"] > .sis__lit{clip-path:inset(0% 0% 0% 0%)}
.sis__lit .sis__c{color:var(--on-orange);opacity:.85}
.sis__lit .sis__nn,.sis__lit .sis__s{color:var(--on-orange)}
/* LA STRISCIA — sotto i 1180px non c'e' posto per una colonna:
l'indice diventa quattro celle affiancate, sempre 01-04, ferme
sotto la testata finche' si e' dentro le aree. Restano codice e
nome (sotto i 620px il solo codice); l'avanzamento resta sul
fondo di ogni cella. Le aree prendono scroll-margin alto quanto
la striscia: un'ancora non deve finirle sotto. */
@media (max-width:1180px), (max-height:600px){
.aree__in{display:block}
.sis{position:sticky;top:var(--hdr);z-index:20;border-left:0;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.sis__in{position:static;height:auto;display:block}
.sis__hd,.sis__nn,.sis__s{display:none}
.sis__map{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto}
.sis__a{padding:13px clamp(12px,2vw,24px);background:var(--coal-2)}
.sis__b{display:flex;align-items:baseline;gap:10px;min-width:0}
.sis__t{
font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.02em;font-variation-settings:normal;
color:var(--on-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sis__lit .sis__t{color:var(--on-orange)}
.svc{scroll-margin-top:calc(13px * 2 + 11px * 1.4 + 2px)}
}
@media (max-width:620px){
.sis__t{display:none}
.sis__b{justify-content:center}
}
/* LA SCENA BLOCCATA — la mette main.js (.aree--scena), mai il CSS
da solo: sopra i 1180px, con GSAP, senza prefers-reduced-motion
e solo se ogni scheda ci sta intera sotto la testata.
.aree diventa la CORSA: alta un palco piu' --corsa, la distanza
di scroll in cui le schede cambiano. .aree__in e' il PALCO,
sticky sotto la testata e alto quanto lo schermo che resta. Le
quattro schede stanno una sopra l'altra dentro al palco, in
ordine di pagina: quella che arriva copre quella che c'era.
Senza queste regole — senza JS, o se una scheda non ci sta —
le aree restano in colonna come prima. */
.aree--scena{height:calc(100vh - var(--hdr) + var(--corsa,0px));height:calc(100svh - var(--hdr) + var(--corsa,0px))}
.aree--scena .aree__in{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr))}
.aree--scena .aree__l{position:relative;height:100%;overflow:hidden;border-top:1px solid var(--line-d)}
/* z-index:1 su ogni scheda: ognuna chiude il suo velo dentro di se',
se no il velo della prima (senza clip-path, quindi senza contesto
proprio) passerebbe sopra alla scheda che le sale addosso */
.aree--scena .svc{position:absolute;inset:0;z-index:1;border-top:0}
.aree--scena .svc::after{content:'';position:absolute;inset:0;z-index:3;background:var(--coal);opacity:var(--velo,0);pointer-events:none}
/* LO SPAZIO CHE AVANZA. Ogni scheda e' alta quanto il palco, e il
suo contenuto quasi sempre meno: a 1920x1080 avanzavano 340-410px
sotto le risposte, a 1440x900 165-255, a 1366x768 76-143. Un
vuoto cosi' sopra la banda non si leggeva come margine ma come un
buco. Lo prende chi puo' usarlo, e lo decide main.js misurando
(scCiStanno), una volta per tutte e quattro le schede:
- .aree--piena, se c'e' posto: le due risposte vanno affiancate
(~55ch l'una, riempiono anche la larghezza) e la tavola scende
sotto, a tutta larghezza, e prende tutto fino alla banda — la
scena dentro si ingrandisce con lei (--fig-k, qui sotto);
- altrimenti (1366x768, 1280x720: l'impianto pieno sfora di una
ventina di pixel) la tavola resta accanto alle risposte e
l'avanzo va alle due risposte: le righe si allungano fino alla
banda, testo in alto e filetto sopra, come le celle dell'indice
qui accanto. Allungare la banda e' stato provato: sei celle
arancio vuote per due terzi pesavano piu' del vuoto.
Ancorato in alto, sempre: le quattro aree hanno testi di lunghezza
diversa, e il titolo non si stacca dalle sue risposte. */
.aree--scena .svc__in{height:100%;grid-template-rows:minmax(0,1fr) auto}
.aree--misura .svc__in{height:auto}
.aree--scena .svc__b{flex:1 1 auto;min-height:0}
.aree--scena:not(.aree--piena) .svc__b{align-items:stretch}
.aree--scena:not(.aree--piena) .svc__b > .fig{align-self:flex-start}
.aree--scena:not(.aree--piena) .svc__b > dl{display:flex;flex-direction:column}
.aree--scena:not(.aree--piena) .svc__q{flex:1 0 auto;align-content:start}
/* Le spaziature passano in vh: a 1366x768 una scheda naturale e' alta
670-735px e il palco 692 — cosi' ci sta. */
.aree--scena .svc__l{display:flex;flex-direction:column;justify-content:flex-start;padding-block:clamp(22px,4.4vh,68px) clamp(18px,3vh,46px)}
.aree--scena .svc__k{margin-bottom:clamp(12px,2.2vh,26px)}
.aree--scena .svc__h{margin-bottom:clamp(12px,2.4vh,26px)}
.aree--scena .svc__t{font-size:clamp(26px,min(3.4vw,5.8vh),48px)}
.aree--scena .svc__q{padding-block:clamp(9px,1.6vh,18px)}
.aree--scena .sis__in{position:static;height:100%}
/* le tavole delle schede (.svc__b > .fig) non aggiungono altezza da
1349px in su; sotto mandano a capo le risposte, e in una finestra
bassa e stretta (misurate: 1265x649, 1200x650, 1181x700) una
scheda non ci starebbe piu'. Prima le tavole si toglievano per
salvare la scena; ora restano sempre: se la scheda non ci sta
con la tavola, main.js spegne la scena e le aree vanno in colonna. */
/* .aree--piena: risposte affiancate, tavola a tutta larghezza.
La tavola (flex: .aree--piena .svc__b > .fig in fondo) parte da 138px (quelli con cui main.js misura se ci sta:
la scena a 0,85, e cosi' l'impianto pieno entra anche a 1366x768)
e cresce fino alla banda. La scena dentro resta la stessa e si
ingrandisce con zoom: --fig-k e' l'altezza della tavola divisa per
quella di riposo, fra 0,85 e 2,6, scritta da main.js; zoom moltiplica
i pixel — misure, bordi, passi dei racconti — e lascia stare le
percentuali, quindi la scena si allunga in larghezza da sola. Dove
allungarla stonerebbe, ha un tetto: le finestre del digitale non
passano i 200px, il collegamento fra le due prende il resto. */
.aree--piena .svc__b{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:stretch}
.aree--piena .svc__b > dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,3vw,56px)}
/* start: le due risposte stanno nella stessa riga, e la piu' corta
allungava la riga della sua etichetta (12px sotto l'altra) */
.aree--piena .svc__q{grid-template-columns:minmax(0,1fr);gap:8px;align-content:start}
.aree--piena .svc__b > .fig{height:auto}
.aree--piena .svc__b > .fig > .fig__s{zoom:var(--fig-k,1);max-width:none}
.aree--piena .svc__b > .fig--mod > .fig__s{max-width:560px}
.aree--piena .fig__w{flex-basis:min(40%,200px)}
/* il filetto sul bordo della scheda che sale: lo sposta main.js
insieme al clip-path, e c'e' solo durante un cambio */
.aree__bordo{position:absolute;z-index:4;left:0;right:0;top:-1px;height:2px;background:var(--orange);opacity:0;pointer-events:none}
@media (max-width:900px){
.svc__q {grid-template-columns:1fr;gap:6px}
/* il rimando al caso va sotto al titolo */
.svc__h{grid-template-columns:minmax(0,1fr);align-items:start}
.svc__c,.svc__go{justify-self:start}
.svc__def{grid-template-columns:minmax(0,1fr)}
.svc__def>.svc__go{grid-column:1;grid-row:auto;margin-top:18px}
}
/* I quadratini arancio delle etichette scattano uno dopo l'altro
mentre la riga si stampa (main.js, sezione 14): l'apertura
scrive --sq. Il valore di riposo e' 1, quindi senza JS sono
tutti al loro posto. */
.svc__l2 li{--sq:1}
.svc__l2 li::before{transform:translateY(-2px) scale(var(--sq))}
/* ---------------------------------------------------------
COMPETENZE (pagina) — la scheda in cinque tempi
Numero e titolo, definizione, tavola a tutta larghezza, tre
punti di forza, e in fondo «cosa facciamo» a etichette. Gli
hook di main.js (.svc__q, .svc__rk, .svc__l2 li, .svc__b > .fig)
restano quelli di prima. Sta in coda a competenze.css perche' deve
vincere sulle regole della scena bloccata a parita' di peso.
--------------------------------------------------------- */
.svc__def{margin:0 0 clamp(14px,2.4vh,28px)}
.svc__dk{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.62;margin-bottom:10px}
.svc__dp{font-size:clamp(18px,min(2.3vw,4vh),32px);line-height:1.2;letter-spacing:-.02em;font-weight:500;max-width:28ch}
.svc .svc__b{display:flex;flex-direction:column;align-items:stretch}
.svc .svc__b > .fig{order:0;flex:none;max-width:none;width:100%;margin:0}
.aree--piena .svc__b > .fig{flex:1 0 138px}
.svc__pf{margin-top:clamp(14px,2.4vh,26px)}
.svc__pk{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.blk--bone .svc__pk{color:var(--orange-ink)}
.svc__pl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,32px);margin:0;padding:0;list-style:none}
.svc__pl .svc__q{display:block;flex:none;padding:clamp(10px,1.6vh,16px) 0 0;border-top:2px solid var(--orange);font-size:14.5px;line-height:1.55;max-width:none}
.blk--bone .svc__pl .svc__q{border-top-color:var(--orange-ink)}
@container (max-width:699px){
.svc__pl{grid-template-columns:minmax(0,1fr)}
}
.svc .svc__r{display:block}
.svc .svc__r .svc__rk{padding:clamp(14px,2vh,24px) var(--pad) 12px}
.svc .svc__r .svc__l2{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0 var(--pad) clamp(18px,3vh,30px);border:0;list-style:none}
.svc .svc__r .svc__l2 li{padding:9px 14px;border:1px solid var(--line-d);font-size:13px;line-height:1.35;align-items:center}
.blk--orange.svc__r .svc__l2 li{border-color:rgba(35,18,4,.22)}
.svc__pl:has(> li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
@container (max-width:699px){
.svc__pl:has(> li:nth-child(4)){grid-template-columns:minmax(0,1fr)}
}
.svc .svc__in{gap:0}
.blk--bone.svc__r .svc__l2 li{border-color:var(--line-l)}
/* scena bloccata: la scheda deve stare nell'altezza del palco (main.js,
scCiStanno) o la scena si spegne; definizione e etichette piu' strette */
.aree--scena .svc__dp{font-size:clamp(17px,min(2vw,3.6vh),28px);max-width:40ch}
.aree--scena .svc__dk{margin-bottom:6px}
.aree--scena .svc .svc__r .svc__rk{padding-block:clamp(8px,1.4vh,18px) 8px}
.aree--scena .svc .svc__r .svc__l2{gap:8px;padding-bottom:clamp(12px,2vh,24px)}
.aree--scena .svc .svc__r .svc__l2 li{padding:clamp(5px,1vh,9px) 12px;font-size:12.5px}
.aree--scena .svc__pk{margin-bottom:8px}