:root{
  --bianco:#FFFFFF;--carta:#F5F7F9;--carta2:#EEF2F5;--linea:#E3E8ED;--linea2:#D3DBE2;
  --testo:#14212E;--tenue:#5B6B7B;--blu:#0592C7;--blu-testo:#0474A0;--blu-chiaro:#E8F4FA;
  --champagne:#D8C3A0;
  --blu-forte:#0A7DAA;--blu-forte2:#086C93;--blu-luce:#5CC3EA;
  --faro-ease:cubic-bezier(0.22,1,0.36,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Helvetica Neue",Arial,sans-serif;
  --fascetta-h:32px;--barra-h:56px;--testata-h:calc(var(--fascetta-h) + var(--barra-h));
  --gutter:16px;--max:1240px;--raggio:16px;
  --ombra:0 1px 2px rgba(20,33,46,.04),0 8px 24px -14px rgba(20,33,46,.18);
  --ombra-su:0 2px 4px rgba(20,33,46,.05),0 18px 36px -18px rgba(20,33,46,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--testata-h) + 12px)}
body{margin:0;background:var(--bianco);color:var(--testo);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-0.02em;line-height:1.08}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
/* anello di fuoco: segue la forma dell'elemento (prima border-radius:8px cambiava la forma dei pulsanti tondi al fuoco) */
:focus-visible{outline:2px solid var(--blu);outline-offset:3px}
a:not([class]):focus-visible{border-radius:4px}

/* ---------- pulsanti ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid transparent;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .16s var(--faro-ease),background-color .2s var(--faro-ease),border-color .2s var(--faro-ease),color .2s var(--faro-ease),box-shadow .2s var(--faro-ease)}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.btn-blu{background:var(--blu-forte);color:#fff}
.btn-blu:hover{background:var(--blu-forte2);box-shadow:0 8px 20px -10px rgba(5,146,199,.6)}
.btn-chiaro{background:#fff;border-color:var(--linea2);color:var(--testo)}
.btn-chiaro:hover{border-color:#B7C3CD;box-shadow:var(--ombra)}
.btn-chiaro svg{color:var(--blu)}

/* ---------- testata ---------- */
.testata{position:sticky;top:0;z-index:50}
.fascetta{height:var(--fascetta-h);background:var(--blu-chiaro);color:#2B4A5E;font-size:12.5px;display:flex;align-items:center;overflow:hidden;transition:height .26s var(--faro-ease),opacity .2s var(--faro-ease)}
.fascetta .wrap{display:flex;align-items:center;gap:10px}
.fascetta .punto{width:6px;height:6px;border-radius:50%;background:var(--blu);flex:none}
.fascetta b{color:var(--testo);font-weight:600}
.fascetta button{margin-left:auto;background:none;border:0;color:#4A6577;width:32px;height:32px;font-size:20px;line-height:1;cursor:pointer;border-radius:8px;transition:color .2s var(--faro-ease),background-color .2s var(--faro-ease)}
.fascetta button:hover{color:var(--testo);background:rgba(5,146,199,.1)}
.fascetta button{width:44px;margin-right:-6px}
.chiusa .fascetta{height:0;opacity:0}
/* 21/10 sera (livello 3): fondo pieno. Col bianco al 90% e la sfocatura, scorrendo, il cerchio blu e i pulsanti dell'apertura
   si vedevano attraverso la testata (schermata di Mario delle 19:07). Pieno anche sulle pagine interne, sopra i rami blu. */
.barra{height:var(--barra-h);background:#fff;border-bottom:1px solid var(--linea)}
.barra .wrap{height:100%;display:flex;align-items:center;gap:12px}
.logo{display:block;width:132px;flex:none}
.logo img{width:100%;height:auto}
.nav{display:none}
.barra .azioni{margin-left:auto;display:flex;align-items:center;gap:8px}
.barra .chiama-mini{min-height:38px;padding:0 14px;font-size:14px}
.chiama-mini .solo-pc{display:none}
.menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--linea2);background:#fff;color:var(--testo);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s var(--faro-ease),transform .16s var(--faro-ease)}
.menu-btn:active{transform:scale(.97)}
.menu-btn i{position:relative;width:14px;height:10px;display:block}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.6px;background:currentColor;border-radius:2px;transition:transform .24s var(--faro-ease),top .24s var(--faro-ease)}
.menu-btn i::before{top:1px}.menu-btn i::after{top:7px}
.menu-aperto .menu-btn i::before{top:4px;transform:rotate(45deg)}
.menu-aperto .menu-btn i::after{top:4px;transform:rotate(-45deg)}
.foglio{position:fixed;left:0;right:0;top:var(--testata-h);bottom:0;z-index:49;background:#fff;padding:6px var(--gutter) calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity .24s var(--faro-ease),transform .24s var(--faro-ease),visibility 0s .24s}
.menu-aperto .foglio{opacity:1;transform:none;visibility:visible;transition:opacity .24s var(--faro-ease),transform .24s var(--faro-ease)}
.foglio a.voce{display:flex;align-items:center;justify-content:space-between;color:var(--testo);text-decoration:none;font-size:21px;font-weight:650;letter-spacing:-.02em;padding:11px 0;border-bottom:1px solid var(--linea);transition:color .2s var(--faro-ease),padding-left .2s var(--faro-ease)}
.foglio a.voce:hover{color:var(--blu-testo);padding-left:4px}
.foglio .riga{display:flex;gap:10px;margin-top:20px}
.foglio .riga .btn{flex:1}

/* ---------- apertura della home: «Le nostre consulenze» a tutta pagina (21/10 pomeriggio, livello 2; curata il 23/10) ----------
   Mario (21/10): «portare a livello successivo questa zona della consulenza, tipo quella roba blu … che va a prendere pure
   tutta la pagina, che diventa così tutta futuristica … aumentiamo cose nello sfondo, aumentiamo dettagli».
   Mario (23/10): «la qualità dello sfondo della home dev'essere portata ad un livello successivo estetico, tipo lo sfondo
   curato, le righe che non sparaflashano a caso, tutto equilibrato e bello esteticamente»; poi: «anche in sé per sé i tasti
   vanno ingranditi un po' e resi più belli anche quelli».
   Dal 23/10 lo sfondo è fermo e il movimento ha un ritmo solo, lento e in ordine:
   - fondo: blu notte con la luce morbida dietro il cerchio, una luce fredda dall'alto e la vignettatura che scurisce i bordi
     verso lo stesso #09121A del fondo della società (in basso non cambia niente: il passaggio non si vede); sopra, una grana
     finissima (rumore SVG all'opacità 0,035) che scioglie le bande delle sfumature scure;
   - punti a griglia più fini e un pavimento a griglia fermo, sottile e sfumato da tutti i lati (prima avanzava e le linee
     lontane sfarfallavano); niente più particelle;
   - angoli di mira sottili e, al computer, le due etichette tecniche in basso allineate sulla linea degli angoli;
   - nel cerchio: scala con le tacche (una maggiore per ogni servizio), anelli fermi a filo (1 px vero con
     vector-effect, non sfocati), un solo anello che gira piano (128 s) e la luce che gira sull'orbita dei nodi in 16 s
     (--T) con una scia sottile. Quando la luce passa da un servizio, il suo collegamento col centro si accende dal disco
     verso il centro e si spegne: un'onda sola che fa il giro in ordine (prima erano dieci impulsi sfalsati di 0,36 s);
     l'alone al centro respira con lo stesso passo (8 s andata, 8 s ritorno);
   - dischi più grandi (circa +13% a 390, +11% al computer; a 320 restano di 52 px: i due nodi a ±14 gradi, se uno sale
     al passaggio o col tocco della manina, si toccherebbero), riempimento in rilievo e bordo
     di luce fini; acceso (mouse, fuoco, manina) con il disco chiaro e l'alone in dissolvenza su due livelli (::before e
     ::after), pressione che si abbassa in 0,16 s.
   Misure in unità del cerchio (cqi = 1% del lato): orbita --R, centro --rc, disco --d. Movimento d'ambiente lineare o
   ease-in-out; interazioni con --faro-ease in 0,16-0,3 s; con movimento ridotto (o ?fermo=1, classe .statico) tutto fermo
   e leggibile. */
.ap-cs{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:calc(100vh - var(--testata-h));min-height:calc(100svh - var(--testata-h));padding:12px 0 calc(12px + env(safe-area-inset-bottom));color:#fff;background-color:#0B1620;background-image:radial-gradient(135% 100% at 50% 44%,rgba(9,18,26,0) 50%,rgba(9,18,26,.72) 100%),radial-gradient(52% 38% at 50% 45%,rgba(18,150,204,.25),rgba(18,150,204,.09) 52%,rgba(18,150,204,0) 100%),radial-gradient(90% 46% at 50% -6%,rgba(128,204,236,.11),rgba(128,204,236,0) 72%),linear-gradient(180deg,#13253A 0%,#0E1B29 50%,#09121A 100%)}
.cs-scena{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cs-scena::before{content:"";position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .82 0 0 0 0 .92 0 0 0 0 1 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");background-size:200px 200px}
/* bordo in basso delle aperture scure (home, servizi, 404): una linea di luce sottile al posto dello stacco netto col bianco */
.ap-cs::after,.ap-rami::after,.ap-notte::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(92,195,234,0),rgba(92,195,234,.55),rgba(92,195,234,0));pointer-events:none}
.cs-punti{position:absolute;inset:0;background-image:radial-gradient(rgba(150,214,240,.55) .6px,transparent 1.1px);background-size:24px 24px;background-position:center center;opacity:.38;-webkit-mask-image:radial-gradient(64% 70% at 50% 45%,rgba(0,0,0,.35) 18%,#000 46%,rgba(0,0,0,.4) 76%,transparent 100%);mask-image:radial-gradient(64% 70% at 50% 45%,rgba(0,0,0,.35) 18%,#000 46%,rgba(0,0,0,.4) 76%,transparent 100%)}
/* pavimento fermo: griglia a filo in prospettiva disegnata in SVG (linee di 1 px vero, uguale in Chrome e Safari; prima era
   un piano 3D che avanzava e le linee lontane sfarfallavano), sfumata ai lati, in lontananza e sul bordo in basso */
.cs-pavimento{position:absolute;left:0;right:0;bottom:0;height:34%;overflow:hidden;-webkit-mask-image:radial-gradient(62% 64% at 50% 44%,#000 0,rgba(0,0,0,.6) 45%,transparent 100%);mask-image:radial-gradient(62% 64% at 50% 44%,#000 0,rgba(0,0,0,.6) 45%,transparent 100%)}
.cs-pavimento svg{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.cs-pavimento path{fill:none;stroke:rgba(110,200,236,.15);stroke-width:1px;vector-effect:non-scaling-stroke}
.cs-cornici{position:absolute;inset:10px calc(var(--gutter) - 6px);--c:rgba(150,212,238,.34);--l:12px;background:linear-gradient(var(--c),var(--c)) left top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--l) no-repeat,linear-gradient(var(--c),var(--c)) right top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--l) no-repeat,linear-gradient(var(--c),var(--c)) left bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--l) no-repeat,linear-gradient(var(--c),var(--c)) right bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--l) no-repeat}
.cs-hud{position:absolute;font:500 10px/1 ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(160,214,238,.5);white-space:nowrap}
/* 22/10 (incontro con l'ingegnere, nota 28): via «Scafati · Bologna» e la riga dei 365 giorni in alto; restano solo le
   coordinate e le ISO in basso, al computer */
.cs-hud-c,.cs-hud-d{display:none}

.cs{position:relative;margin:0;color:#fff}
.ap-cs .cs{flex:1;display:grid;place-items:center;padding:34px 0 26px}
.cs-anello{position:relative;width:min(calc(100vw - 8px),660px);width:min(calc(100vw - 8px),660px,max(300px,calc(100vh - var(--testata-h) - 218px)));width:min(calc(100vw - 8px),660px,max(300px,calc(100svh - var(--testata-h) - 218px)));aspect-ratio:1;margin:0 auto;container-type:inline-size;--R:38cqi;--rc:20cqi;--d:clamp(52px,15.5cqi,80px);--T:16s;--t0:.8s}
.cs-alone{position:absolute;left:50%;top:50%;width:78%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(92,195,234,.26),rgba(5,146,199,.11) 46%,rgba(5,146,199,0) 74%);pointer-events:none}
html:not(.statico) .cs-alone{animation:cs-respira calc(var(--T) / 2) ease-in-out var(--t0) infinite alternate}
@keyframes cs-respira{from{opacity:.82;scale:.97}to{opacity:1;scale:1.02}}
.cs-fondo,.cs-giro{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cs-fondo circle,.cs-giro circle{fill:none}
.cs-r1{stroke:rgba(92,195,234,.16);stroke-width:.3}
.cs-tacche{stroke:rgba(150,210,236,.42);stroke-width:.9;stroke-dasharray:.24 3.8703}
/* tacche accese all'angolo di ogni nodo (22/10: dieci nodi a passo non uniforme, -90 -58 -14 14 58 90 122 166 194 238 gradi) */
.cs-tacche-m{stroke:var(--blu-luce);stroke-width:2.4;stroke-dasharray:.5 25.694 .5 35.517 .5 22.42 .5 35.517 .5 25.694 .5 25.694 .5 35.517 .5 22.42 .5 35.517 .5 25.694;stroke-dashoffset:.25}
.cs-orbita{stroke:rgba(92,195,234,.34);stroke-width:.35}
.cs-r2{stroke:rgba(92,195,234,.1);stroke-width:.3}
.cs-tacche-i{stroke:rgba(92,195,234,.38);stroke-width:.6;stroke-dasharray:.2 4.5124}
/* 23/10: nel cerchio della home (e della 404) gli anelli pieni sono linee di 1 px vero a ogni misura (le pagine dei servizi,
   che usano le stesse classi nei loro anelli, restano come prima) */
.cs-fondo :is(.cs-r1,.cs-orbita,.cs-r2,.cs-r3){vector-effect:non-scaling-stroke;stroke-width:1px}
.cs-fondo .cs-r1{stroke:rgba(120,205,238,.13)}
.cs-fondo .cs-tacche{stroke:rgba(150,210,236,.3);stroke-width:.8}
.cs-fondo .cs-tacche-m{stroke:rgba(120,210,242,.9);stroke-width:2}
.cs-fondo .cs-orbita{stroke:rgba(110,200,236,.3)}
.cs-fondo .cs-punteggio{stroke:rgba(255,255,255,.14);stroke-width:.55;stroke-linecap:round;stroke-dasharray:.01 2.6}
.cs-fondo .cs-r2{stroke:rgba(92,195,234,.08)}
.cs-fondo .cs-tacche-i{stroke:rgba(110,200,236,.28);stroke-width:.5}
.cs-fondo .cs-r3{stroke:rgba(110,200,236,.2)}
.cs-giro{will-change:transform}
.cs-g1 circle{stroke:rgba(110,200,236,.3);stroke-width:.4;stroke-linecap:round;stroke-dasharray:34 56.06}
.cs-g3 .cs-alone-p{fill:url(#csLuceA)}
.cs-g3 .cs-luce{fill:#CFF1FC}
/* scia della luce: un filo sull'orbita che si spegne dietro la luce (conico, mascherato ad anello sul raggio 38) */
.cs-scia{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,rgba(110,205,240,0) 0deg,rgba(110,205,240,0) 272deg,rgba(150,222,248,.48) 360deg);-webkit-mask-image:radial-gradient(closest-side,transparent calc(76% - 1.5px),#000 calc(76% - .5px),#000 calc(76% + .5px),transparent calc(76% + 1.5px));mask-image:radial-gradient(closest-side,transparent calc(76% - 1.5px),#000 calc(76% - .5px),#000 calc(76% + .5px),transparent calc(76% + 1.5px));will-change:transform}
html:not(.statico) .cs-g1{animation:cs-giro calc(var(--T) * 8) linear infinite}
html:not(.statico) :is(.cs-g3,.cs-scia){animation:cs-giro var(--T) linear var(--t0) infinite}
.cs-centro{position:absolute;left:50%;top:50%;z-index:1;width:calc(var(--rc) * 2);aspect-ratio:1;margin:0;translate:-50% -50%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;text-align:center;border:1px solid transparent;background:radial-gradient(circle at 50% 26%,#2A607E,#11374F 58%,#0C1B29) padding-box,linear-gradient(180deg,rgba(176,228,248,.75),rgba(92,195,234,.3) 50%,rgba(92,195,234,.5)) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 calc(var(--rc) * .14) rgba(92,195,234,.05),0 0 60px rgba(92,195,234,.22);transition:opacity .2s var(--faro-ease)}
.cs-titolo{margin:0;font-size:clamp(21px,6.3cqi,42px);font-weight:650;letter-spacing:-.025em;line-height:1;color:#fff}
.cs-titolo span{display:block;margin-top:.06em;font-weight:600;color:rgba(255,255,255,.82)}
.cs-sotto{max-width:76%;font-size:clamp(10.5px,2.2cqi,13px);font-weight:500;line-height:1.25;color:rgba(160,214,238,.85);text-wrap:balance;transition:opacity .16s var(--faro-ease)}
.cs-sotto.cambia{opacity:0}
.cs-nav{position:absolute;inset:0}
.cs-nodi{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.cs-nodo{position:absolute;z-index:1;left:calc(50% + var(--x) * var(--R));top:calc(50% + var(--y) * var(--R));width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);transition:opacity .2s var(--faro-ease)}
/* il collegamento dal nodo al centro: parte dal centro del disco (sotto il disco) e arriva al bordo del cerchio centrale */
.cs-nodo::before,.cs-nodo::after{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:calc(var(--R) - var(--rc));height:1px;margin-top:-.5px;transform-origin:0 50%;rotate:calc(var(--a) + 180deg);pointer-events:none}
.cs-nodo::before{background:linear-gradient(90deg,rgba(110,200,236,.5),rgba(110,200,236,.06));opacity:.6;transition:opacity .24s var(--faro-ease)}
/* l'onda di luce (23/10): quando la luce dell'orbita arriva al servizio, il collegamento si accende dal disco verso il centro
   e si spegne; ritardo = --t0 più la frazione di giro dell'angolo del nodo (da -90 gradi, in senso orario) */
.cs-nodo::after{height:1.5px;margin-top:-.75px;border-radius:1px;background:linear-gradient(90deg,#E2F7FE,rgba(140,218,246,.75) 50%,rgba(120,210,242,.05));box-shadow:0 0 8px rgba(92,195,234,.55);opacity:0;transform:scaleX(0)}
html:not(.statico) .cs-nodo::after{animation:cs-onda-filo var(--T) cubic-bezier(.45,0,.55,1) calc(var(--t0) + var(--T) * var(--o,0)) infinite}
.cs-nodo:nth-child(2){--o:.08889}
.cs-nodo:nth-child(3){--o:.21111}
.cs-nodo:nth-child(4){--o:.28889}
.cs-nodo:nth-child(5){--o:.41111}
.cs-nodo:nth-child(6){--o:.5}
.cs-nodo:nth-child(7){--o:.58889}
.cs-nodo:nth-child(8){--o:.71111}
.cs-nodo:nth-child(9){--o:.78889}
.cs-nodo:nth-child(10){--o:.91111}
@keyframes cs-onda-filo{0%{opacity:1;transform:scaleX(0)}7%{opacity:1;transform:scaleX(1)}11%{opacity:.85;transform:scaleX(1)}22%{opacity:0;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
.cs-nodo a{position:absolute;inset:0;border-radius:50%;color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .24s var(--faro-ease)}
/* disco: riempimento in rilievo (luce dall'alto) e bordo di luce di 1 px, più chiaro in alto; ::before è il disco acceso,
   ::after l'alone; passano in dissolvenza (opacità), così l'acceso è morbido anche dove i gradienti non si animano */
.cs-disco{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;color:#A9E0F5;border:1px solid transparent;background:radial-gradient(120% 115% at 50% 0%,#21476A 0%,#16324D 50%,#0F253A 100%) padding-box,linear-gradient(180deg,rgba(182,230,249,.7),rgba(92,195,234,.18) 52%,rgba(92,195,234,.4)) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -10px 18px -10px rgba(0,0,0,.45),0 0 0 4px rgba(92,195,234,.04),0 12px 24px -14px rgba(0,0,0,.85);transition:color .2s var(--faro-ease)}
.cs-disco::before,.cs-disco::after{content:"";position:absolute;inset:-1px;border-radius:50%;opacity:0;pointer-events:none;transition:opacity .24s var(--faro-ease)}
.cs-disco::before{border:1px solid transparent;background:radial-gradient(120% 115% at 50% 0%,#326590 0%,#21496D 52%,#163756 100%) padding-box,linear-gradient(180deg,#DDF5FD,rgba(120,210,242,.6) 50%,rgba(120,210,242,.95)) border-box}
.cs-disco::after{box-shadow:0 0 0 6px rgba(92,195,234,.12),0 0 28px 2px rgba(92,195,234,.36)}
.cs-disco svg{position:relative;width:44%;height:44%;stroke-width:1.55;shape-rendering:geometricPrecision}
.cs-nome{position:absolute;left:50%;top:calc(100% + 6px);width:max-content;max-width:6.6em;translate:-50% 0;font-size:clamp(12px,3.3cqi,15px);font-weight:600;line-height:1.15;letter-spacing:-.005em;text-align:center;color:rgba(255,255,255,.88);text-wrap:balance;text-shadow:0 1px 8px rgba(9,18,26,.9);transition:color .2s var(--faro-ease),opacity .2s var(--faro-ease)}
/* numero del servizio sul collegamento, come un'etichetta sul filo (stessi numeri del menù) */
/* nomi sopra il disco nella metà alta (tranne i due nodi quasi orizzontali, che col nome sopra toccherebbero il vicino) */
.cs-nodo.su .cs-nome{top:auto;bottom:calc(100% + 6px)}
/* i due nodi in basso sono vicini: i loro nomi si scostano un poco verso l'esterno */
.cs-nodo.dx .cs-nome{translate:-38% 0}
.cs-nodo.sx .cs-nome{translate:-62% 0}
/* 22/10, dieci servizi a passo non uniforme (più spazio sopra e sotto i quattro nodi ai lati, a ±14° dall'orizzontale):
   i nomi dei nodi ai lati si scostano verso l'esterno (fdx a destra, fsx a sinistra), così non toccano il disco del nodo
   vicino e restano nello schermo; 02, 03, 09 e 10 col nome sopra, gli altri sotto.
   23/10: il nome si scosta verso l'esterno solo finché resta ad almeno 5 px dal bordo dello schermo, poi rientra
   (36.88cqi = 0.9703 x --R, distanza del nodo dal centro del cerchio, che sta al centro dello schermo) */
/* 23/10 sera, Mario: «LA SCITTA VENDITA ESTINTORI DEV ESSERE ACCENTRATA BENE»: i nomi dei quattro nodi ai lati stanno
   centrati sul disco; rientrano solo se arriverebbero a meno di 5 px dal bordo dello schermo */
.cs-nodo.fdx .cs-nome{translate:min(-50%,calc(50vw - 36.88cqi - 100% - 5px)) 0}
.cs-nodo.fsx .cs-nome{translate:max(-50%,calc(36.88cqi + 5px - 50vw)) 0}
/* cerchio stretto (telefoni da 320-360 px): nomi più piccoli e più vicini al disco */
@container (max-width:360px){
  .cs-nome{font-size:11px;max-width:6em;line-height:1.1;top:calc(100% + 4px)}
  .cs-nodo.su .cs-nome{bottom:calc(100% + 4px)}
  .cs-nodo.fdx .cs-nome{translate:min(-50%,calc(50vw - 36.88cqi - 100% - 5px)) 0}
  .cs-nodo.fsx .cs-nome{translate:max(-50%,calc(36.88cqi + 5px - 50vw)) 0}
}
/* telefoni da 320 px: centrati, i nomi dei quattro nodi ai lati toccherebbero il disco vicino; lì si scostano un poco */
@container (max-width:330px){
  .cs-nodo.fdx .cs-nome{translate:min(-30%,calc(50vw - 36.88cqi - 100% - 5px)) 0}
  .cs-nodo.fsx .cs-nome{translate:max(-70%,calc(36.88cqi + 5px - 50vw)) 0}
}
/* stati del disco: passaggio del mouse, fuoco, pressione e la manina (cs-acceso, cs-premuto, in sito.js) hanno lo stesso
   acceso; la pressione si abbassa più svelta (0,16 s) */
.cs-nodo a:focus-visible{outline:2px solid var(--blu-luce);outline-offset:4px}
.cs-nodo a:is(:focus-visible,:active) .cs-disco,.cs-nodo.cs-acceso .cs-disco{color:#fff}
.cs-nodo a:is(:focus-visible,:active) .cs-disco::before,.cs-nodo a:is(:focus-visible,:active) .cs-disco::after,.cs-nodo.cs-acceso .cs-disco::before,.cs-nodo.cs-acceso .cs-disco::after{opacity:1}
.cs-nodo a:active{transform:translateY(-1px) scale(.96);transition-duration:.16s}
@media (hover:hover){
  .cs-nodo a:hover{transform:translateY(-3px)}
  .cs-nodo a:hover .cs-disco{color:#fff}
  .cs-nodo a:hover .cs-disco::before,.cs-nodo a:hover .cs-disco::after{opacity:1}
  .cs-nodo a:hover .cs-nome{color:#fff}
  .cs-nodo:hover::before{opacity:1}
  .cs-nodo a:active{transform:translateY(-1px) scale(.97)}
}
/* servizio scelto (sito.js, «nodo che si stacca»): il nodo cresce e si accende, dal disco partono i rami che si disegnano,
   gli altri nodi e il centro si spengono; poi cambia la pagina e il disco vola sul nodo del servizio (view-transition-name
   «srv-nodo», messo in pageswap) */
.cs-via .cs-nodo:not(.cs-scelto),.cs-via .cs-centro{opacity:.26}
.cs-via .cs-nodo:not(.cs-scelto)::after{animation:none}
.cs-scelto{z-index:3}
.cs-scelto a,.cs-scelto a:hover,.cs-scelto a:active{transform:scale(1.3)}
.cs-scelto .cs-disco{color:#fff}
.cs-scelto .cs-disco::before,.cs-scelto .cs-disco::after{opacity:1}
.cs-scelto::before{opacity:1}
.cs-scelto .cs-nome{color:#fff}
.cs-rami{position:absolute;left:50%;top:50%;width:170px;height:170px;max-width:none;margin:-85px 0 0 -85px;rotate:var(--a);overflow:visible;pointer-events:none}
.cs-rami path{fill:none;stroke:var(--blu-luce);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;animation:cs-disegna .22s var(--faro-ease) calc(var(--k) * 24ms) forwards}
.cs-rami circle{fill:var(--blu-luce);opacity:0;animation:cs-punto .16s var(--faro-ease) calc(.14s + var(--k) * 24ms) forwards}
@keyframes cs-disegna{to{stroke-dashoffset:0}}
@keyframes cs-punto{to{opacity:1}}
html:not(.statico) .cs-centro{animation:cs-entra .3s var(--faro-ease) both}
html:not(.statico) .cs-nodo{animation:cs-entra .3s var(--faro-ease) calc(.12s + var(--i) * 50ms) both}
@keyframes cs-entra{from{opacity:0;scale:.82}}
@keyframes cs-giro{to{transform:rotate(1turn)}}

/* piede dell'apertura: pulsanti e segno per scorrere. 23/10: pulsanti più alti (50 px al telefono, 52 al computer), il
   pieno con una luce dall'alto e un bordo chiaro di 1 px, quelli di vetro col bordo di luce; al passaggio del mouse salgono
   di 1 px e si schiariscono, alla pressione si stringono (0,16 s) */
.cs-piede{position:relative;display:grid;justify-items:center;gap:12px;padding:0 var(--gutter)}
.cs-piede .pulsanti{width:100%;max-width:448px;margin-top:0}
.cs-piede .pulsanti .btn{flex:1 1 0;min-height:50px;padding:0 10px;min-width:0;gap:9px;letter-spacing:-.005em}
.cs-piede .btn:hover{transform:translateY(-1px)}
.cs-piede .btn:active{transform:scale(.97);transition-duration:.16s}
.btn-vetro{background:rgba(255,255,255,.07);border-color:rgba(92,195,234,.4);color:#fff}
.btn-vetro svg{color:var(--blu-luce)}
.btn-vetro:hover{background:rgba(255,255,255,.12);border-color:var(--blu-luce)}
.ap-cs .btn-blu{background:var(--blu-forte);box-shadow:0 10px 26px -12px rgba(5,146,199,.9)}
.cs-piede .btn-blu{border-color:rgba(160,222,246,.32);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 58%) #0B83B3;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 28px -14px rgba(5,146,199,.95)}
.cs-piede .btn-blu:hover{background-color:#1092C4;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 14px 30px -12px rgba(5,146,199,1)}
.cs-piede .btn-vetro{border-color:rgba(120,205,240,.3);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)) rgba(15,32,49,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.cs-piede .btn-vetro:hover{border-color:rgba(140,215,244,.7);background-color:rgba(26,54,80,.7)}
.ap-cs .btn:focus-visible,.ap-rami .btn:focus-visible{outline-color:var(--blu-luce)}
/* 21/10 sera: bersaglio da 44×44 px; i margini negativi lasciano lo stesso posto di prima (30 px), così pulsanti e cerchio non si spostano */
.cs-giu{position:relative;display:grid;place-items:center;width:44px;height:44px;margin:-7px 0;border-radius:12px;-webkit-tap-highlight-color:transparent}
.cs-giu i{position:relative;display:block;width:1px;height:22px;background:linear-gradient(rgba(92,195,234,0),rgba(92,195,234,.6));overflow:visible}
.cs-giu i::after{content:"";position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:#BDEBFA;box-shadow:0 0 6px rgba(92,195,234,.8)}
html:not(.statico) .cs-giu i::after{animation:cs-scendi 4s ease-in-out infinite}
@keyframes cs-scendi{0%{transform:translateY(0);opacity:0}25%{opacity:1}80%{transform:translateY(18px);opacity:0}100%{transform:translateY(18px);opacity:0}}
/* 21/10 sera: le animazioni continue dell'apertura si fermano quando il cerchio esce dallo schermo (classe cs-fuori
   sull'html, messa da sito.js con un IntersectionObserver sulla scena dell'apertura) */
html.cs-fuori :is(.cs-alone,.cs-g1,.cs-g3,.cs-scia),html.cs-fuori .cs-nodo::after,html.cs-fuori .cs-giu i::after{animation-play-state:paused}
.cs-giu:focus-visible{outline-color:var(--blu-luce)}
@media (prefers-reduced-motion:reduce){
  .cs-giro,.cs-scia,.cs-centro,.cs-nodo,.cs-nodo::after,.cs-alone,.cs-giu i::after{animation:none!important}
  .cs-nodo a,.cs-nodo a:hover,.cs-nodo a:active,.cs-scelto a,.cs-piede .btn:hover,.cs-piede .btn:active{transform:none}
  .cs-rami{display:none}
}

/* ---------- esempio di clic (22/10, nota 28 dell'incontro con l'ingegnere: «un esempio di clic che si muove da solo») ----------
   Rifatto il 23/10 (Mario: «nella home dev'essere più intuitivo il discorso del click e il click non deve fare sempre la
   stessa via con il mouse»): la regia è in sito.js («manina dell'esempio di clic»), che a ogni giro sceglie servizi diversi
   e percorsi diversi e muove la mano con Web Animations (solo transform e opacity). Qui solo l'aspetto: al computer il
   puntatore del mouse (.cs-freccia) che sul servizio diventa la manina (.cs-dito, classe su-nodo), al telefono il dito;
   l'onda attorno al disco toccato, il punto del tocco sotto il dito, la scritta «Clicca» accanto alla mano (.cs-clicca,
   messa da sito.js solo dove non copre dischi, nomi, titolo e non esce dallo schermo) e il nodo acceso come al passaggio
   del mouse (.cs-acceso, .cs-premuto). Senza JS la mano non c'è; con movimento ridotto (o ?fermo=1) resta ferma sul
   servizio 01 con la scritta. Al primo gesto sul cerchio .cs-provato la toglie per sempre. Icona della mano disegnata sul
   modello di «pointer» di Lucide (ISC); la freccia è disegnata qui. */
.cs-mano{position:absolute;left:50%;top:50%;z-index:2;width:0;height:0;pointer-events:none;opacity:0;visibility:hidden;--m:clamp(28px,9cqi,40px);--f:clamp(22px,4.6cqi,28px);transition:opacity .2s var(--faro-ease),visibility 0s linear .2s}
.cs-mano.in-giro{opacity:1;visibility:visible;transition:opacity .2s var(--faro-ease),visibility 0s}
.cs-mano.cs-col-dito{--m:clamp(30px,10cqi,42px)}
.cs-mano-in{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.cs-mano svg{position:absolute;max-width:none;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));transition:opacity .16s var(--faro-ease)}
.cs-dito{left:calc(var(--m) * -.3333);top:calc(var(--m) * -.0833);width:var(--m);height:var(--m);transform-origin:33.33% 8.33%}
.cs-freccia{left:calc(var(--f) * -.2083);top:calc(var(--f) * -.1042);width:var(--f);height:var(--f);opacity:0}
.cs-col-mouse .cs-dito{opacity:0}
.cs-col-mouse .cs-freccia{opacity:1}
.cs-col-mouse .su-nodo .cs-dito{opacity:1}
.cs-col-mouse .su-nodo .cs-freccia{opacity:0}
.cs-mano-pieno{fill:#fff;stroke:#0F1C2A;stroke-width:1.1;stroke-linejoin:round}
.cs-mano-dita{fill:none;stroke:#0F1C2A;stroke-width:1.1;stroke-linecap:round}
.cs-punto{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(189,235,250,.4) 55%,rgba(189,235,250,0) 72%);opacity:0}
.cs-onda{position:absolute;left:0;top:0;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border:2px solid var(--blu-luce);border-radius:50%;opacity:0}
.cs-clicca{position:absolute;left:0;top:0;padding:5px 10px 6px;border-radius:999px;background:var(--blu-luce);color:#0B1620;font-size:12.5px;font-weight:650;line-height:1;letter-spacing:.005em;white-space:nowrap;box-shadow:0 0 0 3px rgba(92,195,234,.18),0 8px 18px -8px rgba(0,0,0,.7);opacity:0;scale:.9;transition:opacity .2s var(--faro-ease),scale .2s var(--faro-ease)}
.cs-clicca.vede{opacity:1;scale:1}
/* il servizio che la mano tocca si accende come al passaggio del mouse; alla pressione si abbassa come al clic vero */
.cs-nodo.cs-acceso a{transform:translateY(-3px)}
.cs-nodo.cs-acceso .cs-nome{color:#fff}
/* «Clicca» sopra il nome del servizio toccato (al telefono, quando accanto alla mano non c'è posto): il nome piccolo
   sfuma, tanto in quel momento si legge intero sotto il titolo */
.cs-nodo.cs-coperto .cs-nome{opacity:0}
.cs-nodo.cs-acceso::before{opacity:1}
.cs-nodo.cs-premuto a{transform:translateY(-1px) scale(.97)}
.cs-provato .cs-mano{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){
  .cs-mano,.cs-mano svg,.cs-clicca{transition:none}
  .cs-nodo.cs-acceso a,.cs-nodo.cs-premuto a{transform:none}
}

/* ---------- regia dello scorrimento dell'apertura (21/10 sera, livello 3) ----------
   Mario (21/10): «la parte della home rendila più dinamica che non deve avere una pagina per sé … lui nella home vuole la
   parte tech questa blu che abbiamo poi scorri e le varie scritte e info come ce le abbiamo ora e poi dopo i servizi».
   Ordine della home: apertura, la società (#studio, fascia blu notte), servizi, sedi, contatti. L'apertura non finisce più
   con uno stacco: il fondo arriva al blu notte (#09121A) da cui parte la società e la linea di luce in basso non c'è più.
   p = quanto dell'apertura è già passato sotto la testata (0 in cima, 1 quando è uscita):
   - etichette tecniche e angoli di mira si spengono subito (p 0-0,14), prima di arrivare alla testata;
   - i dieci servizi (dal 22/10) si spengono uno dopo l'altro, dal più alto al più basso (p 0-0,52), sempre prima della testata;
   - il cerchio arretra (scala 0,8) e sale più piano della pagina (parallasse: scende di 0,4 dell'apertura mentre la pagina
     sale di 1), spegnendosi fra 0,15 e 0,8 (resta in vista finché il suo posto è nello schermo: niente vuoto sopra la
     società); pulsanti e segno per scorrere fra 0,12 e 0,42;
   - la griglia a terra si allunga verso l'alto e sfuma (p 0-0,5) (le particelle non ci sono più dal 23/10),
     i punti a griglia scendono piano; un velo blu notte copre il fondo dell'apertura (p 0-0,16): il passaggio non si vede;
   - titolo e numeri della società salgono e si accendono mentre entrano dal basso, finiti quando sono interi nello schermo.
   Solo translate, scale e opacity (più visibility alla fine, così i link spenti non si toccano). Dove ci sono le animazioni
   legate allo scorrimento (Chrome, Edge, Safari 26) è tutto CSS: view-timeline --ap sull'apertura, con la testata tolta in
   cima (view-timeline-inset). Altrimenti sito.js mette la classe sd-js e fa gli stessi passi (?sd=0 per provarlo).
   Con movimento ridotto o ?fermo=1 (classe statico) niente: tutto fermo e leggibile. Il cerchio non è più tagliato in
   basso (overflow-y visibile): scendendo passa sopra il fondo della società e sotto i suoi testi. */
.ap-cs{overflow:hidden;overflow:clip visible}
.ap-cs::after{content:none}
.ap-cs .cs-pavimento{transform-origin:50% 100%}
.cs-sfuma{position:absolute;left:0;right:0;bottom:0;height:48%;background:linear-gradient(180deg,rgba(9,18,26,0),rgba(9,18,26,.84) 56%,#09121A);opacity:0}
@keyframes cs-sd-spegni{to{opacity:0}}
@keyframes cs-sd-via{to{visibility:hidden}}
@keyframes cs-sd-velo{to{opacity:1}}
@keyframes cs-sd-hud{to{opacity:0;translate:0 -10px}}
@keyframes cs-sd-punti{to{opacity:.1;translate:0 25%}}
@keyframes cs-sd-terra{to{opacity:0;scale:1 1.5}}

@keyframes cs-sd-piede{to{opacity:0;translate:0 18px}}
@keyframes cs-sd-cerchio{to{translate:0 calc((100svh - var(--testata-h)) * .4);scale:.8}}
@keyframes cs-sd-sale{from{opacity:.15;translate:0 40px}}
@keyframes cs-sd-cifra{from{opacity:.15;translate:0 32px;scale:.96}}
/* Solo nel ripiego (sd-js): ogni pezzo mosso da sito.js ha il suo livello, così il passo dello scorrimento non ridisegna
   la griglia a terra (maschera e prospettiva) né le scie; sito.js toglie sd-livelli quando l'apertura esce dallo schermo
   e libera i livelli. Nella via CSS ci pensa già il browser. */
html.sd-js .ap-cs.sd-livelli :is(.cs-hud,.cs-cornici,.cs-punti,.cs-pavimento,.cs-sfuma,.cs-piede,.cs-anello,.cs-nodi,.cs-nodo a){will-change:transform,opacity}
@supports (animation-timeline:view()) and (animation-range:exit 0% exit 100%) and (view-timeline-inset:1px){
  html:not(.statico):not(.sd-js) .ap-cs{view-timeline:--ap block;view-timeline-inset:var(--testata-h) 0px}
  html:not(.statico):not(.sd-js) .ap-cs :is(.cs-hud,.cs-cornici,.cs-punti,.cs-pavimento,.cs-sfuma,.cs-piede,.cs-anello,.cs-nodi,.cs-nodo a){animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ap}
  html:not(.statico):not(.sd-js) .ap-cs .cs-hud{animation-name:cs-sd-hud;animation-range:exit 0% exit 10%}
  html:not(.statico):not(.sd-js) .ap-cs .cs-cornici{animation-name:cs-sd-spegni;animation-range:exit 0% exit 14%}
  html:not(.statico):not(.sd-js) .ap-cs .cs-punti{animation-name:cs-sd-punti;animation-range:exit 0% exit 100%}
  html:not(.statico):not(.sd-js) .ap-cs .cs-pavimento{animation-name:cs-sd-terra;animation-range:exit 0% exit 50%}

  html:not(.statico):not(.sd-js) .ap-cs .cs-sfuma{animation-name:cs-sd-velo;animation-range:exit 0% exit 16%}
  html:not(.statico):not(.sd-js) .ap-cs .cs-piede{animation-name:cs-sd-piede,cs-sd-via;animation-range:exit 12% exit 42%}
  html:not(.statico):not(.sd-js) .ap-cs .cs-anello{animation-name:cs-sd-cerchio,cs-sd-spegni,cs-sd-via;animation-range:exit 0% exit 100%,exit 15% exit 80%,exit 15% exit 80%}
  html:not(.statico):not(.sd-js) .ap-cs .cs-nodi{animation-name:cs-sd-via;animation-range:exit 0% exit 52%}
  html:not(.statico):not(.sd-js) .ap-cs .cs-nodo a{animation-name:cs-sd-spegni;animation-range:exit 0% exit 24%}
  html:not(.statico):not(.sd-js) .ap-cs .cs-nodo:is(:nth-child(2),:nth-child(10)) a{animation-range:exit 4% exit 28%}
  html:not(.statico):not(.sd-js) .ap-cs .cs-nodo:is(:nth-child(3),:nth-child(9)) a{animation-range:exit 12% exit 36%}
  html:not(.statico):not(.sd-js) .ap-cs .cs-nodo:is(:nth-child(4),:nth-child(8)) a{animation-range:exit 20% exit 44%}
  html:not(.statico):not(.sd-js) .ap-cs .cs-nodo:is(:nth-child(5),:nth-child(7)) a{animation-range:exit 26% exit 50%}
  html:not(.statico):not(.sd-js) .ap-cs .cs-nodo:nth-child(6) a{animation-range:exit 28% exit 52%}
  html:not(.statico):not(.sd-js) #studio :is(.testa-sez>:not(.storia),.storia>p,.cifra){animation-name:cs-sd-sale;animation-duration:auto;animation-timing-function:var(--faro-ease);animation-fill-mode:both;animation-timeline:view();animation-range:entry 0% entry 100%}
  html:not(.statico):not(.sd-js) #studio .cifra{animation-name:cs-sd-cifra}
  html:not(.statico):not(.sd-js) #studio :is(.testa-sez>p,.storia>p){animation-range:entry 6% contain 4%}
  html:not(.statico):not(.sd-js) #studio .cifra:nth-child(2){animation-range:entry 10% contain 4%}
  html:not(.statico):not(.sd-js) #studio .cifra:nth-child(3){animation-range:entry 20% contain 8%}
  html:not(.statico):not(.sd-js) #studio .cifra:nth-child(4){animation-range:entry 30% contain 12%}
}

.testo-ap{display:grid;gap:0}
.occhiello{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blu-testo)}
.occhiello::before{content:"";width:18px;height:1.5px;background:var(--blu)}
.pulsanti{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.reperibili{margin-top:12px;font-size:13.5px;color:var(--tenue);display:flex;align-items:center;gap:8px}
.reperibili::before{content:"";width:7px;height:7px;border-radius:50%;background:#2EB872;box-shadow:0 0 0 3px rgba(46,184,114,.16);flex:none}
.reperibili a{color:var(--blu-testo);font-weight:600;text-underline-offset:2px;transition:color .2s var(--faro-ease)}
.reperibili a:hover{color:var(--blu-forte2)}

/* ---------- servizi ---------- */
.servizi{padding:28px 0 64px}
.testa-griglia{display:grid;gap:6px;margin-bottom:16px}
.testa-griglia h2{font-size:26px;letter-spacing:-.02em}
.testa-griglia p{color:var(--tenue);font-size:15px;max-width:60ch}
.griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tessera{position:relative;display:flex;flex-direction:column;width:100%;text-align:left;border:1px solid var(--linea);border-radius:var(--raggio);background:#fff;padding:0;overflow:hidden;cursor:pointer;box-shadow:var(--ombra);transition:transform .24s var(--faro-ease),box-shadow .24s var(--faro-ease),border-color .24s var(--faro-ease)}
.tessera:hover{transform:translateY(-2px);box-shadow:var(--ombra-su)}
.tessera:active{transform:scale(.98)}
.tessera.accesa{border-color:var(--blu);box-shadow:0 0 0 3px rgba(5,146,199,.14),var(--ombra-su)}
.tessera .media{position:relative;aspect-ratio:4/3;background:var(--carta2);overflow:hidden}
.tessera video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--carta2) center/cover no-repeat}
.tessera.accesa .n{background:var(--blu-forte);color:#fff}
.tessera .corpo{display:grid;gap:4px;padding:10px 12px 12px}
.tessera .t{font-size:15px;font-weight:650;line-height:1.2;letter-spacing:-.01em;color:var(--testo)}
.tessera .r{font-size:13px;line-height:1.35;color:var(--tenue)}
@media (max-width:899.98px){.tessera .r{font-size:13.5px}}
.tessera .piu{position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--testo);transition:background-color .2s var(--faro-ease),transform .24s var(--faro-ease),color .2s var(--faro-ease)}
.tessera .piu svg{width:13px;height:13px}
.tessera .piu:hover,.tessera .piu:focus-visible{background:var(--blu-forte);color:#fff;transform:rotate(90deg) scale(1.12)}
.radon{grid-column:1/-1;display:grid;gap:8px;text-align:left;border:1px solid var(--linea);border-radius:var(--raggio);padding:18px;background:var(--carta);cursor:pointer;color:var(--testo);transition:transform .24s var(--faro-ease),box-shadow .24s var(--faro-ease),border-color .24s var(--faro-ease)}
.radon:hover{transform:translateY(-2px);box-shadow:var(--ombra-su);border-color:var(--linea2)}
.radon:active{transform:scale(.99)}
.radon .tag{font-size:12px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--blu-testo)}
/* nono e decimo servizio (radon e, dal 22/10, HACCP), più piccoli delle otto tessere (Mario, 15/10: «sì ma non come gli 8
   principali»): al telefono uno sotto l'altro a tutta larghezza, al computer affiancati, mezza riga ciascuno */
.radon-testa{display:flex;align-items:center;gap:12px}
.radon .cm{width:72px;height:54px;border-radius:10px}
.radon:hover .cm img{transform:scale(1.06)}
.radon h3{font-size:20px}
.radon p{color:var(--tenue);font-size:14.5px;max-width:70ch}
.dettagli{display:inline-flex;align-items:center;gap:6px;color:var(--blu-testo);font-size:14.5px;font-weight:650}
.dettagli svg{width:16px;height:16px;transition:transform .2s var(--faro-ease)}
.radon:hover .dettagli svg{transform:translateX(3px)}
.dett{display:none}

/* ---------- sezioni ---------- */
.sezione{padding:64px 0;border-top:1px solid var(--linea)}
.testa-sez{margin-bottom:28px}
.testa-sez h2{font-size:30px;line-height:1.08;letter-spacing:-.025em;margin-top:10px;max-width:22ch}
.testa-sez p{margin-top:12px;color:var(--tenue);font-size:16px;max-width:56ch}
.testa-sez .storia p+p{margin-top:.75em}
/* 22/10: la storia della società è lunga (testo dell'ingegnere), il titolo sta in alto accanto al suo inizio */
@media (min-width:900px){#studio .testa-sez{align-items:start}}
/* .rivela (17/10): niente più entrata allo scorrimento. Testi e foto ci sono sempre, anche scorrendo veloce (Mario: «ti
   appaiono le scritte in ritardo»). La classe resta nell'HTML senza stile, solo come segno (contatori e rotta della mappa: sito.js). */

/* studio */
.cifre{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cifra{padding:18px 16px;border-radius:var(--raggio);background:var(--carta);border:1px solid var(--linea);transition:transform .24s var(--faro-ease),box-shadow .24s var(--faro-ease)}
.cifra:hover{transform:translateY(-2px);box-shadow:var(--ombra)}
.cifra b{display:block;font-size:42px;line-height:1;font-weight:650;letter-spacing:-.03em;color:var(--testo);font-variant-numeric:tabular-nums}
.cifra span{display:block;margin-top:8px;font-size:14px;color:var(--tenue);line-height:1.35}
.tempo{margin-top:36px;position:relative;display:grid}
.tempo li{position:relative;padding:0 0 22px 28px}
.tempo li::before{content:"";position:absolute;left:5px;top:6px;bottom:-6px;width:1px;background:var(--linea2)}
.tempo li:last-child::before{display:none}
.tempo li::after{content:"";position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--blu)}
.tempo b{display:block;font-size:14px;font-weight:650;color:var(--blu-testo)}
.tempo span{display:block;margin-top:2px;font-size:15px;line-height:1.4}
.cert{margin-top:32px;display:grid;gap:16px}
.cert h3{font-size:18px}
.iso{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.iso figure{min-width:0}
.iso figure{margin:0;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:8px;display:grid;place-items:center;aspect-ratio:3/2;transition:transform .24s var(--faro-ease),box-shadow .24s var(--faro-ease)}
.iso figure:hover{transform:translateY(-2px);box-shadow:var(--ombra)}
.iso img{width:100%;height:100%;object-fit:contain}
.pillole{display:flex;flex-wrap:wrap;gap:8px}
.pillole li{font-size:13.5px;font-weight:550;padding:7px 12px;border-radius:999px;background:var(--carta);border:1px solid var(--linea)}

/* ---------- sedi: mappa viva, schede e settimana (22/10) ----------
   Mario (22/10, sulla pagina contatti): «arricchirei di più questa pagina dove c'è la mappa e ovunque appare questa zona
   con i due uffici … sembra tutto troppo vuoto». Stessa zona nella home (#sedi) e nei contatti (genera.mjs copia la mappa).
   Mappa sul blu notte dell'apertura: Italia a punti su griglia esagonale (strumenti/mappa-punti.py) col contorno sottile,
   reticolo ogni 2 gradi (etichette solo al computer, nei margini), le due città con segnaposto, mira e anelli, un impulso
   di luce che va da Scafati a Bologna (translate in cqi: resta sul compositore) e accende Bologna all'arrivo, distanza in
   linea d'aria calcolata dalle coordinate (490,8 km: «circa 490 km»), ora italiana, angoli di mira come nell'apertura.
   Mappa e schede si accendono insieme e la città porta alla sua scheda (sito.js). Orari: settimana lun-dom con le due fasce,
   cerchio dei 365 giorni di reperibilità, aperto o chiuso ora sull'ora italiana (html[data-uffici], sito.js).
   Movimento ridotto o ?fermo=1: niente animazioni, tutto leggibile; fuori dallo schermo in pausa (classe vivo-fuori). */
.sedi-griglia{display:grid;gap:14px}
.sedi-intro{display:none}
.mp{position:relative;isolation:isolate;margin:0;padding:12px;border-radius:20px;overflow:hidden;color:#fff;background-color:#0B1620;background-image:radial-gradient(70% 52% at 60% 54%,rgba(5,146,199,.26),rgba(5,146,199,0) 72%),radial-gradient(110% 60% at 15% -8%,rgba(92,195,234,.13),rgba(92,195,234,0) 62%);box-shadow:inset 0 0 0 1px rgba(92,195,234,.16),0 22px 44px -28px rgba(9,18,26,.6)}
.mp::before{content:"";position:absolute;inset:8px;z-index:3;pointer-events:none;--c:rgba(92,195,234,.55);background:linear-gradient(var(--c),var(--c)) left top/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px 14px no-repeat,linear-gradient(var(--c),var(--c)) right top/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px 14px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px 14px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/14px 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px 14px no-repeat}
.mp-tela{position:relative;width:100%;max-width:500px;aspect-ratio:560/660;margin:0 auto;container-type:inline-size}
.mp-carta,.mp-luci{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mp-reticolo{fill:none;stroke:rgba(92,195,234,.13);stroke-width:1;vector-effect:non-scaling-stroke}
.mp-terra path{fill:rgba(92,195,234,.05);stroke:rgba(92,195,234,.42);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mp-punti{fill:none;stroke:rgba(126,206,238,.5);stroke-width:3.2;stroke-linecap:round}
.mp-luci{opacity:.3;pointer-events:none}
.mp-luci path{fill:none;stroke:#C8EEFB;stroke-width:3.8;stroke-linecap:round}
html:not(.statico) .mp-luci{animation:mp-respira 6s ease-in-out infinite alternate}
@keyframes mp-respira{to{opacity:1}}
.mp-rotta-alone{fill:none;stroke:rgba(92,195,234,.16);stroke-width:8;stroke-linecap:round}
.mp .rotta{fill:none;stroke:rgba(160,218,240,.8);stroke-width:1.6;stroke-linecap:round;transition:stroke .24s var(--faro-ease)}
/* impulso di luce da Scafati a Bologna: punti della curva campionati con andatura morbida (vedi LEGGIMI, «La home») */
.mp-impulso{position:absolute;left:0;top:0;z-index:1;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#E8F8FE;box-shadow:0 0 8px 3px rgba(92,195,234,.75);opacity:0;translate:64.64cqi 70.18cqi;pointer-events:none}
html:not(.statico) .mp-impulso{animation:mp-impulso 5.2s linear 1.2s infinite}
@keyframes mp-impulso{0%{opacity:0;translate:64.64cqi 70.18cqi}8%{opacity:1;translate:64.64cqi 70.18cqi}12.5%{translate:64.50cqi 69.25cqi}17%{translate:64.04cqi 66.58cqi}21.5%{translate:63.12cqi 62.49cqi}26%{translate:61.58cqi 57.43cqi}30.5%{translate:59.33cqi 51.94cqi}35%{translate:56.34cqi 46.52cqi}39.5%{translate:52.76cqi 41.59cqi}44%{translate:48.91cqi 37.43cqi}48.5%{translate:45.19cqi 34.21cqi}53%{translate:42.08cqi 31.94cqi}57.5%{translate:40.01cqi 30.61cqi}62%{opacity:1;translate:39.29cqi 30.18cqi}70%,100%{opacity:0;translate:39.29cqi 30.18cqi}}
/* città: il segnaposto sta sul punto (--x, --y), l'etichetta a destra (Bologna) o a sinistra (Scafati, sul mare) */
.mp-citta{position:absolute;left:var(--x);top:var(--y);z-index:2;display:flex;align-items:center;gap:4px;width:max-content;translate:-22px -50%;color:#fff;text-decoration:none;border-radius:12px;-webkit-tap-highlight-color:transparent;transition:opacity .24s var(--faro-ease)}
.mp-sc{flex-direction:row-reverse;translate:calc(-100% + 22px) -50%}
.mp-segno{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center}
.mp-segno::before{content:"";width:9px;height:9px;border-radius:50%;background:#E8F8FE;box-shadow:0 0 0 3px rgba(92,195,234,.35),0 0 14px 2px rgba(92,195,234,.6);transition:scale .24s var(--faro-ease)}
.mp-sc .mp-segno::before{width:11px;height:11px;background:#fff;box-shadow:0 0 0 4px rgba(5,146,199,.6),0 0 18px 3px rgba(92,195,234,.7)}
.mp-segno::after{content:"";position:absolute;inset:8px;pointer-events:none;--c:rgba(170,222,242,.8);background:linear-gradient(var(--c),var(--c)) left top/7px 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px 7px no-repeat,linear-gradient(var(--c),var(--c)) right top/7px 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px 7px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/7px 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px 7px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/7px 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px 7px no-repeat;opacity:.5;scale:1.2;transition:scale .24s var(--faro-ease),opacity .24s var(--faro-ease)}
.mp-onda{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:1px solid rgba(140,214,242,.85);opacity:0;pointer-events:none}
html.statico .mp-sc .mp-onda:first-child{opacity:.4;scale:2.2}
html:not(.statico) .mp-sc .mp-onda{animation:mp-onda 5.2s var(--faro-ease) 1.2s infinite}
html:not(.statico) .mp-sc .mp-onda+.mp-onda{animation-delay:3.8s}
html:not(.statico) .mp-bo .mp-onda{animation:mp-arrivo 5.2s linear 1.2s infinite}
@keyframes mp-onda{0%{opacity:.9;scale:1}45%,100%{opacity:0;scale:4.2}}
@keyframes mp-arrivo{0%,60%{opacity:0;scale:1}63%{opacity:.95;scale:1.1}90%,100%{opacity:0;scale:4}}
.mp-et{display:grid;gap:2px;padding:6px 9px 7px;border-radius:10px;background:rgba(8,17,25,.72);border:1px solid rgba(92,195,234,.22);line-height:1.1;white-space:nowrap;transition:background-color .24s var(--faro-ease),border-color .24s var(--faro-ease)}
.mp-sc .mp-et{text-align:right}
.mp-et b{font-size:15px;font-weight:650;letter-spacing:-.01em}
.mp-et small{font-size:9.5px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--blu-luce)}
.mp-et code,.mp-dist,.mp-ora,.mp-nord,.mp-gradi,.mp-legenda span{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace}
.mp-et code{font-size:10px;font-weight:500;line-height:1.25;letter-spacing:.02em;color:rgba(196,228,243,.82)}
.mp[data-accesa] .mp-citta{opacity:.5}
.mp[data-accesa="scafati"] .mp-sc,.mp[data-accesa="bologna"] .mp-bo{opacity:1}
.mp[data-accesa="scafati"] .mp-sc .mp-et,.mp[data-accesa="bologna"] .mp-bo .mp-et{background:rgba(10,52,74,.9);border-color:rgba(92,195,234,.75)}
.mp[data-accesa="scafati"] .mp-sc .mp-segno::after,.mp[data-accesa="bologna"] .mp-bo .mp-segno::after{opacity:1;scale:1}
.mp[data-accesa="scafati"] .mp-sc .mp-segno::before,.mp[data-accesa="bologna"] .mp-bo .mp-segno::before{scale:1.3}
.mp[data-accesa] .rotta{stroke:#D6F3FD}
.mp-citta:focus-visible{outline:2px solid var(--blu-luce);outline-offset:2px}
.mp-citta:active .mp-segno::before{scale:.85}
/* distanza in linea d'aria, agganciata a metà rotta */
.mp-dist{position:absolute;left:var(--x);top:var(--y);z-index:1;display:grid;gap:2px;margin:0;padding:0 0 0 18px;translate:0 -50%;font-size:10px;line-height:1.2;letter-spacing:.02em;color:rgba(196,228,243,.82);white-space:nowrap;pointer-events:none}
.mp-dist::before{content:"";position:absolute;left:-4px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;border:1px solid var(--blu-luce);background:#0B1620}
.mp-dist::after{content:"";position:absolute;left:4px;top:50%;width:9px;height:1px;background:rgba(92,195,234,.6)}
.mp-dist b{font:650 13px/1.15 var(--font);letter-spacing:-.01em;color:#fff}
.mp-nord{position:absolute;left:4%;top:3%;z-index:1;display:grid;justify-items:center;gap:3px;font-size:10px;font-weight:600;line-height:1;color:rgba(196,228,243,.82)}
.mp-nord::before{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:9px solid var(--blu-luce)}
.mp-ora{position:absolute;right:4%;top:3%;z-index:1;display:grid;justify-items:end;gap:4px;margin:0;font-size:9.5px;line-height:1.1;letter-spacing:.14em;text-transform:uppercase;color:rgba(170,218,238,.78)}
.mp-ora[hidden]{display:none}
.mp-ora b{display:flex;align-items:center;gap:7px;font-size:17px;font-weight:600;line-height:1;letter-spacing:.04em;color:#fff}
.mp-gradi{display:none}
.mp-legenda{position:absolute;left:22px;bottom:18px;z-index:2;display:grid;gap:4px;max-width:62%}
.mp-legenda b{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;letter-spacing:-.005em;color:#fff}
.mp-legenda b::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--blu-luce);box-shadow:0 0 0 3px rgba(92,195,234,.22)}
.mp-legenda span{font-size:9.5px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:rgba(170,218,238,.74)}
/* tutto in pausa quando la zona è fuori dallo schermo (sito.js) */
.vivo-fuori .mp-luci,.vivo-fuori .mp-impulso,.vivo-fuori .mp-onda,.vivo-fuori .s365-giro{animation-play-state:paused!important}

/* schede delle sedi */
.sedi-col{display:grid;gap:12px;align-content:start}
.sede{position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--raggio);padding:16px 18px 18px;box-shadow:var(--ombra);transition:transform .24s var(--faro-ease),box-shadow .24s var(--faro-ease),border-color .24s var(--faro-ease)}
.sede:hover,.sede.accesa{transform:translateY(-2px);box-shadow:var(--ombra-su)}
.sede.accesa{border-color:rgba(5,146,199,.45)}
.sede:focus{outline:none}
.sede:focus-visible{outline:2px solid var(--blu);outline-offset:3px}
.sede.arrivo{animation:sede-arrivo .9s var(--faro-ease)}
@keyframes sede-arrivo{0%,25%{box-shadow:0 0 0 4px rgba(5,146,199,.35),var(--ombra-su)}100%{box-shadow:0 0 0 4px rgba(5,146,199,0),var(--ombra-su)}}
.sede-testa{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.sede-segno{position:relative;flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--blu)}
.sede-segno::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--blu)}
.sede-segno.principale{background:var(--blu-chiaro)}
.sede-segno.principale::before{inset:3.5px}
.sede-segno::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1px solid var(--blu);opacity:0;pointer-events:none}
.sede.accesa .sede-segno::after{animation:sede-onda 1.1s var(--faro-ease)}
@keyframes sede-onda{from{opacity:.8;scale:1}to{opacity:0;scale:2.3}}
.sede .tipo{font-size:12px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--blu-testo)}
.sede-coord{display:none;margin-left:auto;font:500 11px/1.2 ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;letter-spacing:.02em;color:var(--tenue)}
@media (min-width:600px){.sede-coord{display:block}}
.sede h3{font-size:24px;margin-top:8px}
.sede address{font-style:normal;margin-top:6px;color:var(--tenue);font-size:15.5px}
.sede-ore{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;margin-top:8px;font-size:14px;font-weight:550;color:var(--testo)}
.stato-punto{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:#A9B6C2;transition:background-color .24s var(--faro-ease),box-shadow .24s var(--faro-ease)}
html[data-uffici="aperto"] .stato-punto{background:#1E9E61;box-shadow:0 0 0 3px rgba(30,158,97,.2)}
html[data-uffici="festivo"] .stato-punto{background:var(--blu);box-shadow:0 0 0 3px rgba(5,146,199,.2)}
.sede .recapiti{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sede .recapiti .btn{min-height:44px;font-size:14px;padding:0 14px}
.sedi-col .vai{min-height:44px;margin-block:-10.5px}

/* orari a colpo d'occhio: settimana, fasce, oggi e ora, cerchio dei 365 giorni */
.sett{position:relative;padding:16px 18px 18px;border-radius:var(--raggio);background:var(--carta);border:1px solid var(--linea)}
.sett-testa{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px}
.sett h3{font-size:16px;letter-spacing:-.01em}
.sett-stato{display:inline-flex;align-items:center;gap:6px;margin:0;padding:5px 11px 5px 9px;border-radius:999px;background:#fff;border:1px solid var(--linea);font-size:12.5px;line-height:1.25;color:var(--tenue)}
html:not(.statico) .sett-stato{animation:sett-appare .24s var(--faro-ease)}
.sett-stato[hidden]{display:none}
.sett-stato b{color:var(--testo);font-weight:650}
@keyframes sett-appare{from{opacity:0}}
.sett-corpo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;margin-top:12px}
.sett-giorni{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.sett-giorni li{display:grid;gap:5px}
.sett-giorni b{display:block;padding:2px 0;border-radius:6px;font-size:11px;font-weight:600;line-height:1.3;text-align:center;color:var(--tenue);transition:background-color .2s var(--faro-ease),color .2s var(--faro-ease)}
.sett-bin{position:relative;display:block;height:60px;border-radius:7px;background:#fff;border:1px solid var(--linea);overflow:hidden}
.sett-bin i{position:absolute;left:3px;right:3px;top:var(--a);bottom:calc(100% - var(--b));border-radius:4px;background:linear-gradient(180deg,var(--blu),var(--blu-forte));transition:opacity .24s var(--faro-ease)}
.chiuso .sett-bin{background:repeating-linear-gradient(135deg,#fff 0 5px,var(--carta2) 5px 6px)}
.sett-bin .sett-adesso{display:none;left:0;right:0;top:var(--t);bottom:auto;height:2px;margin-top:-1px;border-radius:0;background:var(--testo)}
.sett-bin .sett-adesso::before{content:"";position:absolute;left:1px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--testo)}
.sett-giorni li.oggi b{background:var(--testo);color:#fff}
.sett-giorni li.adesso .sett-adesso{display:block}
.con-oggi .sett-giorni li:not(.oggi) .sett-bin i{opacity:.45}
.sett-fasce{margin-top:9px;font-size:12.5px;line-height:1.35;color:var(--tenue)}
.sett-365{display:grid;justify-items:center;align-content:start;gap:6px;width:96px;text-align:center;text-decoration:none;color:var(--testo);border-radius:14px;-webkit-tap-highlight-color:transparent}
.s365{position:relative;display:grid;place-items:center;align-content:center;width:86px;height:86px;transition:scale .24s var(--faro-ease)}
.s365 svg{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}
.s365-fondo{fill:#fff;stroke:rgba(5,146,199,.14);stroke-width:5}
.s365-pieno{fill:none;stroke:var(--blu);stroke-width:2.5}
.s365-tacche{fill:none;stroke:rgba(4,116,160,.5);stroke-width:2.5;stroke-dasharray:.8 21.19}
.s365-luce{fill:none;stroke:#9FE0F7;stroke-width:3;stroke-linecap:round;stroke-dasharray:24 208.5}
html:not(.statico) .s365-giro{animation:cs-giro 9s linear infinite}
.s365 b{position:relative;font-size:23px;font-weight:650;letter-spacing:-.02em;line-height:1}
.s365 small{position:relative;max-width:54px;margin-top:2px;font-size:9.5px;line-height:1.15;color:var(--tenue)}
.s365-testo{display:grid;gap:2px;font-size:10.5px;line-height:1.25;color:var(--tenue)}
.s365-testo b{font-size:13px;font-weight:650;color:var(--blu-testo)}
.sett-365:hover .s365{scale:1.04}
.sett-365:active .s365{scale:.97}
.sett-365:focus-visible{outline-offset:4px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:379px){
  .sett{padding:14px 14px 16px}
  .sett-corpo{gap:10px}
  .sett-giorni{gap:3px}
  .sett-giorni b{font-size:10px}
  .sett-365{width:80px}
  .s365{width:76px;height:76px}
  .s365 b{font-size:20px}
  .mp-et code{display:none}
  .mp-legenda span{letter-spacing:.08em}
}
@media (max-width:599.98px){
  .mp-legenda{max-width:calc(45% - 22px)}
  .sede .sede-ore{display:none}
}
@media (min-width:900px){
  .sedi-intro{display:block}
  .sedi-griglia{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:stretch}
  .mp{display:grid;place-items:center;padding:34px 52px 26px}
  .mp-gradi{display:block}
  .mp-lat,.mp-lon{position:absolute;font-size:9.5px;line-height:1;letter-spacing:.06em;color:rgba(160,212,236,.66);white-space:nowrap}
  .mp-lat{left:-10px;top:var(--y);translate:-100% -50%}
  .mp-lon{top:-10px;left:var(--x);translate:-50% -100%}
  .mp-legenda{left:26px;bottom:22px}
  .sett-bin{height:68px}
  .sede{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto 1fr;column-gap:18px}
  .sede>*{grid-column:1}
  .sede-testa{grid-column:1/-1}
  .sede .recapiti{grid-column:2;grid-row:2/-1;flex-direction:column;align-items:stretch;align-self:center;margin-top:8px}
}

/* contatti */
.dirette{display:grid;gap:10px}
.diretta{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--raggio);background:#fff;border:1px solid var(--linea);box-shadow:var(--ombra);text-decoration:none;color:var(--testo);transition:transform .24s var(--faro-ease),box-shadow .24s var(--faro-ease),border-color .24s var(--faro-ease)}
.diretta:hover{transform:translateY(-2px);box-shadow:var(--ombra-su);border-color:var(--linea2)}
.diretta:active{transform:scale(.98)}
.diretta .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--blu-chiaro);color:var(--blu-testo);flex:none}
.diretta .ico svg{width:20px;height:20px}
.diretta small{display:block;font-size:12.5px;color:var(--tenue)}
.diretta b{display:block;font-size:18px;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums;word-break:break-word}
.modulo{margin-top:22px;display:grid;gap:12px;background:var(--carta);border:1px solid var(--linea);border-radius:20px;padding:18px}
.campo{display:grid;gap:6px}
.campo label{font-size:13.5px;font-weight:600}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;font-size:16px;color:var(--testo);background:#fff;border:1px solid var(--linea2);border-radius:12px;padding:12px 14px;min-height:48px;transition:border-color .2s var(--faro-ease),box-shadow .2s var(--faro-ease);-webkit-appearance:none;appearance:none}
.campo select{background-image:linear-gradient(45deg,transparent 50%,#5B6B7B 50%),linear-gradient(135deg,#5B6B7B 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--blu);box-shadow:0 0 0 4px rgba(5,146,199,.16)}
.consenso{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--tenue);line-height:1.4}
.consenso input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--blu)}
.modulo .btn{width:100%}

/* piè */
.pie{background:var(--carta);border-top:1px solid var(--linea);color:var(--tenue);padding:48px 0 24px;font-size:14.5px}
.pie-griglia{display:grid;gap:24px}
.pie img{height:30px;width:auto;margin-bottom:12px}
.pie h4{margin:0 0 10px;color:var(--testo);font-size:12.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}
.pie a{color:var(--testo);text-decoration:none;transition:color .2s var(--faro-ease)}
.pie a:hover{color:var(--blu-testo)}
.pie p{margin-bottom:6px}
.pie-fondo{margin-top:32px;padding-top:18px;border-top:1px solid var(--linea);display:flex;flex-direction:column;align-items:flex-start;gap:14px;font-size:13px}
.pie-fondo nav{display:flex;gap:18px}
.pie-legale{margin:0;font-size:12px;line-height:1.5;color:var(--tenue);max-width:72ch}
.cifra b i{font-style:normal}
.pie-fondo button{background:none;border:0;padding:0;font:inherit;color:var(--testo);cursor:pointer;transition:color .2s var(--faro-ease)}
.pie-fondo button:hover{color:var(--blu-testo)}
.firma-faro{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);white-space:nowrap;align-self:flex-end}
.firma-faro svg{width:44px;height:11px;overflow:visible}
.firma-faro .fascio{transform-origin:54px 7px;transform:scaleX(.8);transition:transform .3s var(--faro-ease)}
.firma-faro:hover .fascio{transform:scaleX(1)}

/* finestre */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;color:var(--testo)}
dialog::backdrop{background:rgba(20,33,46,.38);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.scheda{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-height:92svh;overflow:auto;background:#fff;border-radius:22px 22px 0 0;opacity:0;transform:translateY(18px) scale(.96);transition:opacity .24s var(--faro-ease),transform .24s var(--faro-ease)}
.scheda[open].su{opacity:1;transform:none}
.scheda-media{position:relative;aspect-ratio:4/3;max-height:40svh;width:100%;background:var(--carta2);overflow:hidden}
.scheda-media video{width:100%;height:100%;object-fit:cover}
.scheda-media.senza{background:var(--carta) linear-gradient(rgba(5,146,199,.1) 1px,transparent 1px) 0 0/24px 24px;max-height:110px}
.scheda-media.senza video{display:none}
.scheda-corpo{padding:20px var(--gutter) calc(22px + env(safe-area-inset-bottom))}
.scheda-corpo h3{font-size:25px;margin-top:6px}
.scheda-corpo p{margin-top:10px;color:var(--tenue);font-size:15.5px;line-height:1.5}
.scheda-corpo ul{margin-top:14px;display:grid;gap:8px}
.scheda-corpo ul li{position:relative;padding-left:22px;font-size:15px;line-height:1.4}
.scheda-corpo ul li::before{content:"";position:absolute;left:2px;top:7px;width:8px;height:8px;border-radius:2px;background:var(--blu);transform:rotate(45deg)}
.scheda-corpo .pulsanti{margin-top:20px}
.scheda-corpo .pulsanti .btn{flex:1 1 auto}
.chiudi{position:absolute;right:12px;top:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--testo);font-size:22px;line-height:1;cursor:pointer;box-shadow:var(--ombra);transition:background-color .2s var(--faro-ease),transform .16s var(--faro-ease)}
.chiudi:hover{background:#fff}
.chiudi:active{transform:scale(.94)}
.legale{width:min(520px,calc(100% - 32px));margin:auto;background:#fff;border-radius:18px;padding:24px;opacity:0;transform:scale(.96);transition:opacity .24s var(--faro-ease),transform .24s var(--faro-ease)}
.legale[open].su{opacity:1;transform:none}
.legale h3{font-size:22px}
.legale p{margin:10px 0 18px;color:var(--tenue)}
.avviso{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:80;transform:translate(-50%,16px);opacity:0;width:max-content;max-width:calc(100% - 32px);padding:12px 16px;border-radius:14px;background:var(--testo);color:#fff;font-size:14.5px;box-shadow:var(--ombra-su);pointer-events:none;transition:opacity .24s var(--faro-ease),transform .24s var(--faro-ease)}
.avviso.su{opacity:1;transform:translate(-50%,0)}

/* ---------- computer ---------- */
@media (min-width:900px){
  :root{--fascetta-h:34px;--barra-h:66px;--gutter:32px}
  .fascetta{font-size:13px}
  .logo{width:168px}
  .nav{display:flex;align-items:center;gap:28px;margin-left:40px}
  .nav a{color:var(--testo);text-decoration:none;font-size:15px;font-weight:550;position:relative;padding:6px 0;transition:color .2s var(--faro-ease)}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--blu);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--faro-ease)}
  .nav a:hover{color:var(--blu-testo)}
  .nav a:hover::after{transform:scaleX(1)}
  .menu-btn,.foglio{display:none}
  .barra .chiama-mini{min-height:42px;padding:0 18px;font-size:14.5px}
  .chiama-mini .solo-tel{display:none}
  .chiama-mini .solo-pc{display:inline}
  .testo-ap{order:1}
  .ap-cs{padding:14px 0 16px}
  .ap-cs .cs{padding:40px 0 24px}
  .cs-anello{width:min(calc(100vw - 8px),700px,max(300px,calc(100vh - var(--testata-h) - 192px)));width:min(calc(100vw - 8px),700px,max(300px,calc(100svh - var(--testata-h) - 192px)))}
  .cs-hud{font-size:10.5px}

  /* 23/10: le due etichette stanno sulla linea in basso degli angoli di mira, a 10 px dalla fine del braccio */
  .cs-hud-c,.cs-hud-d{display:block;bottom:calc(12px - .5em + .5px)}
  .cs-hud-c{left:calc(var(--gutter) - 12px + 16px + 10px)}
  .cs-hud-d{right:calc(var(--gutter) - 12px + 16px + 10px)}
  .cs-cornici{inset:12px calc(var(--gutter) - 12px);--l:16px}
  .cs-pavimento{height:40%}
  .cs-piede .pulsanti{width:auto;max-width:none;justify-content:center;gap:10px}
  .cs-piede .pulsanti .btn{flex:0 0 auto;min-height:52px;padding:0 26px;font-size:15.5px}
  .servizi{padding:20px 0 88px}
  .testa-griglia{grid-template-columns:auto 1fr;align-items:baseline;gap:24px;margin-bottom:18px}
  .testa-griglia h2{font-size:28px}
  .testa-griglia p{justify-self:end;text-align:right}
  .griglia{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .tessera .media{aspect-ratio:16/10}
  .tessera .corpo{padding:12px 14px 14px}
  .tessera .t{font-size:16px}
  .radon{grid-column:span 2;grid-template-columns:72px minmax(0,1fr);align-content:start;gap:6px 20px;padding:20px 22px}
  .radon-testa{display:contents}
  .radon .cm{grid-column:1;grid-row:1/span 3}
  .radon>:not(.radon-testa){grid-column:2}
  .radon .tag{grid-column:2;grid-row:1}
  .radon .dettagli{margin-top:2px}
  .sezione{padding:100px 0}
  .testa-sez{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end;margin-bottom:40px}
  .testa-sez h2{font-size:clamp(34px,3.2vw,46px)}
  .testa-sez p{margin-top:0;font-size:17px}
  .cifre{grid-template-columns:repeat(4,1fr);gap:16px}
  .cifra{padding:24px}
  .cifra b{font-size:56px}
  .tempo{grid-template-columns:repeat(5,1fr);margin-top:52px}
  .tempo li{padding:28px 18px 0 0}
  .tempo li::before{left:0;right:0;top:5px;bottom:auto;width:auto;height:1px}
  .tempo li:last-child::before{display:block;right:30%}
  .tempo li::after{top:0}
  .cert{grid-template-columns:1fr 1.2fr;gap:40px;align-items:start;margin-top:52px}
  .cert>div:first-child{display:grid;gap:14px}
  .contatti-griglia{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
  .contatti .testa-sez{display:block}
  .contatti .testa-sez p{margin-top:14px}
  .modulo{margin-top:0;grid-template-columns:1fr 1fr;padding:26px;gap:14px}
  .campo.pieno,.consenso,.modulo .btn{grid-column:1/-1}
  .pie-griglia{grid-template-columns:1.25fr 1.15fr .75fr 1.1fr;gap:40px}
  .pie-fondo{flex-direction:row;align-items:center;justify-content:space-between}
  .scheda{inset:0;margin:auto;width:min(980px,calc(100% - 64px));height:min(600px,calc(100vh - 64px));max-height:none;border-radius:24px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
  .scheda[open]{display:grid}
  .scheda-media{aspect-ratio:auto;max-height:none;height:100%}
  .scheda-media.senza{max-height:none}
  .scheda-corpo{overflow:auto;padding:36px 36px 30px;display:flex;flex-direction:column}
  .scheda-corpo h3{font-size:30px}
  .scheda-corpo .pulsanti{margin-top:auto;padding-top:22px}
  .scheda-corpo .pulsanti .btn{flex:0 0 auto}
}
@media (max-width:359px){
  .logo{width:112px}
  .barra .wrap{gap:8px}
  .menu-btn .mt{display:none}
  .menu-btn{padding:0 11px}
  .cs-piede .pulsanti .btn{font-size:14px;padding:0 6px;flex:1 1 auto}
  .tessera .t{font-size:14px}
}

/* ---------- movimento ridotto e versione ferma (?fermo=1 per le prove) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* =====================================================================
   PARTI COMUNI NUOVE E PAGINE INTERNE (14/10, scritte da genera.mjs)
   ===================================================================== */
html.senza-fascetta{--fascetta-h:0px}
html.senza-fascetta .fascetta{height:0;opacity:0}
.salta{position:absolute;left:12px;top:-60px;z-index:90;padding:10px 14px;border-radius:10px;background:var(--testo);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:top .2s var(--faro-ease)}
.salta:focus{top:10px}
.barra{position:relative}
a.tessera,.tessera-vai,a.radon{text-decoration:none;color:inherit}
a.radon{color:var(--testo)}

/* tessere della home: il riquadro porta alla pagina, il + apre l'anteprima veloce */
.tessera-vai{display:flex;flex-direction:column;flex:1;border-radius:inherit}
.tessera-vai:focus-visible{outline-offset:-3px;border-radius:var(--raggio)}
button.piu{border:0;padding:0;cursor:pointer;z-index:2}
button.piu::before{content:"";position:absolute;inset:-9px}
.tessera .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* menù del telefono: servizi aperti, poi le pagine */
.foglio-tit{margin:14px 0 2px;font-size:12px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--blu-testo)}
.foglio-servizi a{display:flex;align-items:center;gap:12px;min-height:46px;padding:5px 0;border-bottom:1px solid var(--linea);color:var(--testo);text-decoration:none;font-size:16px;font-weight:600;line-height:1.25;letter-spacing:-.01em;transition:color .2s var(--faro-ease),padding-left .2s var(--faro-ease)}
.foglio-servizi a:hover{color:var(--blu-testo);padding-left:4px}
.foglio a[aria-current="page"]{color:var(--blu-testo)}
.foglio .riga{margin-top:auto;padding-top:20px}

/* briciole */
.briciole{padding-top:14px;font-size:13px;color:var(--tenue)}
.briciole ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.briciole li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.briciole li+li::before{content:"";width:6px;height:6px;border-top:1.5px solid #9AA8B5;border-right:1.5px solid #9AA8B5;transform:rotate(45deg);flex:none}
.briciole a{color:var(--tenue);text-decoration:none;border-radius:4px;transition:color .2s var(--faro-ease)}
.briciole a:hover{color:var(--blu-testo)}
.briciole [aria-current]{color:var(--testo);font-weight:550}

/* apertura delle pagine interne */
.ap-int{padding:14px 0 8px}
.ap-int .wrap{display:grid;gap:22px}
.ap-int h1{font-size:30px;line-height:1.07;letter-spacing:-.025em;margin:10px 0 12px;max-width:21ch;text-wrap:balance}
.ap-int .frase{font-size:16px;line-height:1.55;color:var(--tenue);max-width:60ch}
.ap-int .pulsanti .btn{flex:1 1 0;padding:0 10px;min-width:0}
.solo-testo .pulsanti .btn{flex:1 1 auto}
.ap-int .nota{margin-top:10px;font-size:13px;color:var(--tenue)}
.lato-ap{display:grid;gap:10px}
.solo-testo .wrap{max-width:860px}

/* sezioni delle pagine interne */
.sezione.fitta{padding:44px 0}
.h2-sez{font-size:26px;line-height:1.1;letter-spacing:-.022em;margin:8px 0 18px;max-width:24ch}
.testa-riga{margin-bottom:20px}
.testa-riga p{margin-top:8px;color:var(--tenue);max-width:60ch}

/* punti e collegamenti dentro le voci */
.punti{display:grid;gap:6px}
.punti li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.45}
.punti li::before{content:"";position:absolute;left:3px;top:7px;width:7px;height:7px;border-radius:2px;background:var(--blu);transform:rotate(45deg)}
.vai{display:inline-flex;align-items:center;gap:6px;justify-self:start;color:var(--blu-testo);font-size:15px;font-weight:650;text-decoration:none;border-radius:6px}
.vai svg{width:16px;height:16px;transition:transform .2s var(--faro-ease)}
.vai:hover svg{transform:translateX(3px)}
.iso.in-blocco{max-width:440px}
.altri{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:28px}


/* domande frequenti */
.faq{display:grid}
.faq details{border-bottom:1px solid var(--linea)}
.faq details:first-child{border-top:1px solid var(--linea)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 2px;cursor:pointer;font-size:16.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em;border-radius:8px;transition:color .2s var(--faro-ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blu-testo)}
.croce{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--carta);border:1px solid var(--linea);color:var(--testo);transition:transform .26s var(--faro-ease),background-color .2s var(--faro-ease),color .2s var(--faro-ease),border-color .2s var(--faro-ease)}
.croce::before,.croce::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;margin:-.8px 0 0 -6px;background:currentColor;border-radius:2px}
.croce::after{transform:rotate(90deg)}
.faq details[open]:not(.chiude) .croce{transform:rotate(45deg);background:var(--blu-chiaro);border-color:transparent;color:var(--blu-testo)}
.risposta{overflow:hidden}
.risposta p{padding:0 46px 20px 2px;color:var(--tenue);font-size:15.5px;line-height:1.6;max-width:72ch}

/* invito finale */
.invito{display:grid;gap:18px;padding:26px 20px;border-radius:22px;background:var(--carta);border:1px solid var(--linea)}
.invito h2{font-size:26px;line-height:1.1;letter-spacing:-.022em;max-width:22ch;margin-top:8px}
.invito p{margin-top:10px;color:var(--tenue);font-size:15px;max-width:52ch}
.invito .pulsanti{margin-top:0}
.invito .pulsanti .btn{flex:1 1 auto}


/* chi siamo: linea del tempo nell'apertura */
.scheda-tempo{background:var(--carta);border:1px solid var(--linea);border-radius:20px;padding:22px 20px 4px}
.scheda-tempo .tempo{margin-top:0}

/* contatti */
.modulo-testo p{margin-top:12px;color:var(--tenue);max-width:52ch}
.modulo-testo p+p{margin-top:8px}
.consenso a{color:var(--blu-testo)}
.campo.errore input,.campo.errore select,.campo.errore textarea{border-color:#C2412D;box-shadow:0 0 0 4px rgba(194,65,45,.12)}
.consenso.errore{color:#A3341F}
.scuoti{animation:scuoti .3s var(--faro-ease)}
@keyframes scuoti{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* informative e pagina non trovata */
.segnaposto{padding:12px 14px;border:1px dashed var(--linea2);border-radius:12px;background:var(--carta);color:var(--tenue);font-size:14.5px}
.aggiornato{margin-top:10px;font-size:13px;color:var(--tenue)}
.legami{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.elenco-servizi{display:grid;gap:8px}
.elenco-servizi a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--linea);background:#fff;color:var(--testo);text-decoration:none;font-size:15px;font-weight:600;line-height:1.3;box-shadow:var(--ombra);transition:transform .24s var(--faro-ease),box-shadow .24s var(--faro-ease),border-color .24s var(--faro-ease)}
.elenco-servizi a:hover{transform:translateY(-2px);box-shadow:var(--ombra-su);border-color:var(--linea2)}
.elenco-servizi a:active{transform:scale(.98)}

/* piè comune */
.pie-tit{margin:0 0 12px;color:var(--testo);font-size:12.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}
.pie ul li{margin-bottom:7px;line-height:1.35}
.pie-pres{max-width:36ch}
.pie-cert{margin-top:14px;display:grid;gap:4px;font-size:13px;line-height:1.4}
.pie address{font-style:normal}
.pie .sede-p{margin-bottom:12px}
.pie .sede-p b{display:block;color:var(--testo);font-weight:600;font-size:13px}
.pie-fondo{font-size:13px}
.pie-fondo nav a{color:var(--testo)}
/* tocchi da 44 px senza cambiare il disegno (20/10): aree invisibili attorno ai pulsanti piccoli */
.pie-fondo nav a{display:inline-block;padding:8px 0;margin:-8px 0}
@media (max-width:899.98px){
  .barra .chiama-mini,.menu-btn{position:relative}
  .barra .chiama-mini::before,.menu-btn::before{content:"";position:absolute;inset:-4px 0}
}
.pie-firma{display:flex;justify-content:flex-end;margin-top:14px;padding-top:6px;border-top:1px solid var(--linea)}
.firma-faro{text-decoration:none}
.firma-faro:hover{color:var(--testo)}

/* tendina dei servizi (solo computer) */
.nav-servizi{display:none}
.tendina{display:none}

@media (min-width:900px){
  .nav-servizi{display:flex;align-items:center;align-self:stretch}
  .nav-voce{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;font:inherit;font-size:15px;font-weight:550;color:var(--testo);cursor:pointer;border-radius:6px;transition:color .2s var(--faro-ease)}
  .nav-voce svg{width:12px;height:12px;transition:transform .24s var(--faro-ease)}
  .nav-voce:hover,.nav-servizi.aperta .nav-voce,.nav-voce.qui{color:var(--blu-testo)}
  .nav-servizi.aperta .nav-voce svg{transform:rotate(180deg)}
  .nav>a[aria-current="page"]{color:var(--blu-testo)}
  .nav>a[aria-current="page"]::after{transform:scaleX(1)}
  .tendina{display:block;position:absolute;left:50%;top:calc(100% + 1px);width:min(calc(var(--max) - 2 * var(--gutter)),calc(100% - 2 * var(--gutter)));transform:translate(-50%,-6px);opacity:0;visibility:hidden;background:#fff;border:1px solid var(--linea);border-top:0;border-radius:0 0 20px 20px;box-shadow:var(--ombra-su);padding:16px;transition:opacity .2s var(--faro-ease),transform .24s var(--faro-ease),visibility 0s .24s}
  .nav-servizi.aperta .tendina{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s var(--faro-ease),transform .24s var(--faro-ease)}
  .tendina ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .nav .tendina a{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:14px;color:var(--testo);text-decoration:none;transition:background-color .2s var(--faro-ease)}
  .nav .tendina a::after{display:none}
  .nav .tendina a:hover,.nav .tendina a:focus-visible{background:var(--carta)}
  .nav .tendina a[aria-current="page"]{background:var(--blu-chiaro)}
  .tendina b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
  .tendina small{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--tenue);font-weight:450}
  .tendina-piede{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding:12px 12px 0;border-top:1px solid var(--linea);font-size:13.5px;color:var(--tenue)}
  .nav .tendina-piede a{display:inline-flex;align-items:center;gap:6px;padding:6px 0;color:var(--blu-testo);font-weight:650;background:none}
  .nav .tendina-piede a:hover{background:none}
  .nav .tendina-piede a svg{width:15px;height:15px;transition:transform .2s var(--faro-ease)}
  .nav .tendina-piede a:hover svg{transform:translateX(3px)}

  .briciole{padding-top:20px}
  .ap-int{padding:18px 0 16px}
  .ap-int .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
  .ap-int .testo-ap{order:0}
  .scheda-tempo .tempo{grid-template-columns:1fr;margin-top:0}
  .scheda-tempo .tempo li{padding:0 0 20px 30px}
  .scheda-tempo .tempo li::before{left:5px;right:auto;top:6px;bottom:-6px;width:1px;height:auto}
  .scheda-tempo .tempo li:last-child::before{display:none}
  .scheda-tempo .tempo li::after{top:4px}
  .ap-int .wrap>.briciole{grid-column:1/-1;margin-bottom:-22px}
  .ap-int h1{font-size:clamp(36px,3.4vw,50px);margin:14px 0 16px;max-width:18ch}
  .ap-int .frase{font-size:17px}
  .ap-int .pulsanti .btn{flex:0 0 auto;padding:0 20px}
  .solo-testo .wrap{grid-template-columns:1fr;max-width:var(--max)}
  .solo-testo .wrap>.briciole{margin-bottom:0}
  .solo-testo h1{max-width:22ch}
  .sezione.fitta{padding:76px 0}
  .h2-sez{font-size:clamp(30px,2.8vw,40px);margin:10px 0 28px}
  .testa-riga{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end;margin-bottom:32px}
  .testa-riga .h2-sez{margin-bottom:0}
  .testa-riga p{margin-top:0;font-size:17px}
  .invito{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;padding:40px 44px}
  .invito h2{font-size:clamp(28px,2.6vw,36px)}
  .invito .pulsanti{justify-content:flex-end;max-width:460px}
  .invito .pulsanti .btn{flex:0 0 auto}
  .scheda-tempo{padding:28px 28px 8px}
  .elenco-servizi{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media (min-width:900px) and (max-width:1099px){
  .tendina ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:359px){
  .ap-int h1{font-size:27px}
  .ap-int .pulsanti .btn{font-size:14px;padding:0 6px;flex:1 1 auto}
}

/* =====================================================================
   PAGINE COMPATTE (14/10 sera): «Cosa facciamo» con voci e riquadro dei mini video,
   fascia per chi / come, domande + invito + collegati, referenze in chi siamo,
   privacy e cookie insieme, piè corto al telefono
   ===================================================================== */
.sezione.fitta{padding:12px 0}
.h2-sez{font-size:22px;margin:2px 0 12px}
.h2-pic{font-size:17px;line-height:1.2;letter-spacing:-.015em;margin:0 0 8px}
.ap-int{padding:6px 0 0}
.ap-int .wrap{gap:12px}
.ap-int h1{font-size:27px;margin:8px 0 8px}
.ap-int .frase{font-size:15px;line-height:1.5}
.ap-int .pulsanti{margin-top:12px}
.ap-int .reperibili{display:none}

/* pillole di «Cosa comprende»: vanno a capo, mai di lato */
.pillole-c{display:flex;flex-wrap:wrap;gap:5px}
.pillole-c li{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:999px;background:#fff;border:1px solid var(--linea);font-size:13px;font-weight:550;line-height:1.25;transition:border-color .2s var(--faro-ease),transform .2s var(--faro-ease)}
.pillole-c li:hover{border-color:var(--linea2);transform:translateY(-1px)}
.pillole-c .sp{flex:none;width:18px;height:18px;border-radius:50%;background:var(--blu-chiaro);color:var(--blu-testo);display:grid;place-items:center}
.pillole-c .sp svg{width:10px;height:10px}

/* voci richiudibili + riquadro */
.cosa-griglia{display:grid;gap:12px;margin-top:16px}
.riquadro{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--carta2);border:1px solid var(--linea);isolation:isolate}
.strato{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .3s var(--faro-ease)}
.strato.su{opacity:1;z-index:1}
.strato img,.strato video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.voci-d{display:grid}
.voce{border-bottom:1px solid var(--linea)}
.voce:first-child{border-top:1px solid var(--linea)}
.voce-t{list-style:none;display:flex;align-items:center;gap:12px;padding:6px 2px;cursor:pointer;border-radius:10px;transition:background-color .2s var(--faro-ease)}
.voce-t::-webkit-details-marker{display:none}
.voce-t:hover{background:var(--carta)}
.voce-t h3{flex:1;min-width:0;font-size:16px;line-height:1.25;letter-spacing:-.012em;font-weight:650;transition:color .2s var(--faro-ease)}
.voce[open] .voce-t h3,.voce.qui .voce-t h3{color:var(--blu-testo)}
.mini{flex:none;width:40px;height:40px;border-radius:10px;overflow:hidden;background:var(--carta2);border:1px solid var(--linea);display:grid;place-items:center;transition:box-shadow .2s var(--faro-ease),transform .2s var(--faro-ease)}
.mini img{width:100%;height:100%;object-fit:cover}
.voce.qui .mini,.voce[open] .mini{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--blu)}
.croce.v{width:26px;height:26px}
.croce.v::before,.croce.v::after{width:10px;margin-left:-5px}
details[open]:not(.chiude)>summary .croce.v{transform:rotate(45deg);background:var(--blu-chiaro);border-color:transparent;color:var(--blu-testo)}
.dentro{overflow:hidden}
.dentro-c{display:grid;gap:8px;padding:0 2px 14px}
.dentro-c p{color:var(--tenue);font-size:15px;line-height:1.5;max-width:66ch}
.dentro-c .punti li{font-size:14.5px;line-height:1.4}
.dentro-c .iso.in-blocco{max-width:360px}

/* fascia per chi / come */
.fascia{background:var(--carta)}
.fascia-griglia{display:grid;gap:16px}
.media-f{position:relative;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:3/1;background:var(--carta2);border:1px solid var(--linea)}
.media-f img,.media-f video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fascia-testo{display:grid;gap:16px}
.perchi-p{display:flex;flex-wrap:wrap;gap:5px}
.perchi-p li{display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 3px;border-radius:999px;background:#fff;border:1px solid var(--linea);font-size:13px;font-weight:550;line-height:1.25;transition:border-color .2s var(--faro-ease),transform .2s var(--faro-ease)}
.perchi-p li:hover{border-color:var(--linea2);transform:translateY(-1px)}
.perchi-p .ico{flex:none;width:22px;height:22px;border-radius:50%;background:var(--blu-chiaro);color:var(--blu-testo);display:grid;place-items:center}
.perchi-p .ico svg{width:12px;height:12px}
/* passi: al telefono in due colonne (tre se sono tre), al computer in fila */
.passi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 12px}
.passi[style*="--np:3"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
.passi li{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:8px;row-gap:4px;align-content:start}
.passi li::before{content:"";width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,var(--blu) 0 4px,var(--blu-chiaro) 4.5px 8px,transparent 8.5px)}
.passi b{align-self:center;font-size:14px;font-weight:650;letter-spacing:-.01em;line-height:1.25;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.passi span{grid-column:1/-1;color:var(--tenue);font-size:13px;line-height:1.4;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.passi[style*="--np:3"] li{grid-template-columns:minmax(0,1fr)}

/* domande + invito + collegati */
.fi-griglia{display:grid;gap:18px}
.faq summary{padding:11px 2px;font-size:15px;gap:14px}
.faq .croce{width:26px;height:26px}
.risposta p{padding:0 40px 16px 2px;font-size:15px}
.fi-lato{display:grid;gap:18px;align-content:start}
.invito-c{display:grid;gap:8px;padding:16px;border-radius:18px;background:var(--carta);border:1px solid var(--linea)}
.invito-c .occhiello{display:none}
.invito-c h2{font-size:20px;line-height:1.15;letter-spacing:-.02em;max-width:24ch}
.invito-c p{color:var(--tenue);font-size:14px}
.invito-c .pulsanti{margin-top:4px;gap:6px;flex-wrap:nowrap}
.invito-c .pulsanti .btn{flex:1 1 auto;min-width:0;min-height:44px;padding:0 10px;font-size:14px}
.invito-c .solo-pc{display:none}
/* fascia scura (20/10): «Lo studio» nella home e invito finale delle pagine interne su fondo inchiostro; --blu-luce è il blu CTA (196°) schiarito, solo su fondo scuro */
#studio{background:var(--testo);color:#fff;border-top:0}
#studio .testa-sez h2,#studio .cert h3,#studio .tempo span,#studio .cifra b{color:#fff}
#studio .testa-sez p,#studio .cifra span{color:rgba(255,255,255,.72)}
#studio .occhiello,#studio .tempo b,#studio .vai{color:var(--blu-luce)}
#studio .occhiello::before{background:var(--blu-luce)}
#studio .cifra{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
#studio .cifra:hover{box-shadow:0 18px 36px -18px rgba(0,0,0,.6)}
#studio .tempo li::before{background:rgba(255,255,255,.18)}
#studio .tempo li::after{background:var(--testo);border-color:var(--blu-luce)}
#studio .pillole li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
#studio .iso figure{border-color:transparent}
#studio + .sezione{border-top:0}
/* 21/10 sera (livello 3): nella home la società viene subito dopo l'apertura e i servizi dopo la società (Mario: «poi
   scorri e le varie scritte e info come ce le abbiamo ora e poi dopo i servizi, non subito dopo a questa parte blu»).
   La fascia parte dal blu notte del fondo dell'apertura (#09121A) e arriva all'inchiostro: il passaggio non si vede.
   Il contenuto sta sopra il cerchio che scende spegnendosi (l'apertura non taglia più in basso, vedi «regia dello scorrimento»). */
#studio{background:linear-gradient(180deg,#09121A 0,var(--testo) 560px)}
#studio>.wrap{position:relative;z-index:1}
#studio + .servizi{padding-top:52px}
.invito,.invito-c{background:var(--testo);border-color:transparent;color:#fff}
.invito h2,.invito-c h2{color:#fff}
.invito p,.invito-c p{color:rgba(255,255,255,.72)}
.invito .occhiello,.invito-c .occhiello{color:var(--blu-luce)}
.invito .occhiello::before,.invito-c .occhiello::before{background:var(--blu-luce)}
.invito .btn-chiaro,.invito-c .btn-chiaro{background:#fff;border-color:#fff}
#studio :focus-visible,.invito :focus-visible,.invito-c :focus-visible{outline-color:var(--blu-luce)}
.coll-righe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.coll-righe li{display:flex}
.coll-righe a{flex:1;position:relative;display:flex;align-items:center;gap:8px;padding:5px 8px 5px 5px;border:1px solid var(--linea);border-radius:14px;background:#fff;color:var(--testo);text-decoration:none;transition:transform .2s var(--faro-ease),box-shadow .2s var(--faro-ease),border-color .2s var(--faro-ease)}
.coll-righe a:hover{transform:translateY(-1px);box-shadow:var(--ombra);border-color:var(--linea2)}
.coll-righe a:active{transform:scale(.98)}
.cm{position:relative;flex:none;width:40px;height:40px;border-radius:9px;overflow:hidden;background:var(--carta2)}
.cm img{width:100%;height:100%;object-fit:cover}
.ct{min-width:0}
.ct b{display:block;font-size:13px;font-weight:650;line-height:1.25;letter-spacing:-.01em}
.coll-righe .freccia{display:none}
.ct small{display:none;margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--tenue)}
.freccia{position:absolute;right:10px;top:50%;margin-top:-13px;width:26px;height:26px;border-radius:50%;background:var(--carta);color:var(--testo);display:grid;place-items:center;transition:background-color .2s var(--faro-ease),color .2s var(--faro-ease),transform .24s var(--faro-ease)}
.freccia svg{width:13px;height:13px}
.coll-righe a:hover .freccia{background:var(--blu-forte);color:#fff;transform:translateX(2px)}

/* chi siamo: referenze */
.ref-testa{display:grid;gap:12px;margin-bottom:14px}
.ref-testa .h2-sez{margin-bottom:8px}
.ref-testa p{color:var(--tenue);font-size:14.5px;line-height:1.45;max-width:60ch}
.ref .cifre.tre{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ref .cifra{padding:10px}
.ref .cifra b{font-size:26px}
.ref .cifra span{font-size:12px;margin-top:4px;line-height:1.3}
.gruppi-d{display:block}
.gruppo-d{border-bottom:1px solid var(--linea);break-inside:avoid}
.gruppo-d:first-child{border-top:1px solid var(--linea)}
.gruppo-t{list-style:none;display:flex;align-items:center;gap:12px;padding:8px 2px;cursor:pointer;border-radius:10px;transition:background-color .2s var(--faro-ease)}
.gruppo-t::-webkit-details-marker{display:none}
.gruppo-t:hover{background:var(--carta)}
.gruppo-t h3{flex:1;min-width:0;font-size:15.5px;line-height:1.25;letter-spacing:-.01em;font-weight:650}
.g-ico{flex:none;width:36px;height:36px;border-radius:10px;background:var(--blu-chiaro);color:var(--blu-testo);display:grid;place-items:center}
.g-ico svg{width:18px;height:18px}
.g-n{flex:none;min-width:26px;padding:2px 7px;border-radius:999px;background:var(--carta2);font-size:12px;font-weight:650;text-align:center;font-variant-numeric:tabular-nums;color:var(--tenue)}
.gruppo-d .dentro-c{padding:0 2px 12px 48px;gap:4px}
.clienti{display:grid}
.clienti li{display:grid;gap:1px;padding:6px 0;border-top:1px solid var(--linea)}
.clienti li:first-child{border-top:0}
.clienti b{font-size:14.5px;font-weight:600;line-height:1.3}
.clienti span{font-size:13px;color:var(--tenue);line-height:1.35}
/* linea del tempo: al telefono anno a sinistra e fatto a destra, al computer la linea verticale */
.scheda-tempo{padding:12px 14px 4px}
.scheda-tempo .tempo li{display:grid;grid-template-columns:62px minmax(0,1fr);column-gap:10px;align-items:baseline;padding:0 0 8px}
.scheda-tempo .tempo li::before,.scheda-tempo .tempo li::after{display:none}
.scheda-tempo .tempo b{font-size:12.5px;font-variant-numeric:tabular-nums;padding:2px 0;border-radius:6px;background:#fff;border:1px solid var(--linea);text-align:center}
.scheda-tempo .tempo span{font-size:13.5px;line-height:1.35;margin-top:0}

/* contatti */
.ap-int .dirette{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ap-int .diretta{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
.ap-int .diretta .ico{width:34px;height:34px;border-radius:10px}
.ap-int .diretta .ico svg{width:17px;height:17px}
.ap-int .diretta b{font-size:15px}
.ap-int .diretta small{font-size:12px}
.ap-int .diretta>span:last-child{margin-top:auto}
.fitta.contatti .contatti-griglia{display:grid;gap:18px}
.media-m{aspect-ratio:16/9;margin-top:14px}
.fitta.contatti .modulo{margin-top:0}

/* privacy e cookie */
.salti{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.salti .btn{min-height:40px;font-size:14px;padding:0 14px}
.salti .btn svg{color:var(--blu)}
.legale-griglia{display:grid;gap:22px}
.lp-testa{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.lp-ico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--blu-chiaro);color:var(--blu-testo);display:grid;place-items:center}
.lp-ico svg{width:20px;height:20px}
.lp-testa h2{font-size:20px;letter-spacing:-.018em}
.lp-voce{border-bottom:1px solid var(--linea)}
.lp-voce:first-child{border-top:1px solid var(--linea)}
.lp-t{list-style:none;display:flex;align-items:center;gap:12px;padding:9px 2px;cursor:pointer;border-radius:10px;transition:background-color .2s var(--faro-ease)}
.lp-t::-webkit-details-marker{display:none}
.lp-t:hover{background:var(--carta)}
.lp-t h3{flex:1;min-width:0;font-size:15px;line-height:1.3;font-weight:600;letter-spacing:-.008em}
.lp-voce .dentro-c{padding:0 2px 12px 42px}
.legami{margin-top:20px}

/* piè: al telefono solo recapiti, dati societari, note legali e firma */
.pie{padding:24px 0 14px}
.pie-marchio img{margin-bottom:0;height:26px}
.pie-pres,.pie-cert,.pie-col{display:none}
.pie-griglia{gap:12px}
.pie-recapiti address{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.pie-recapiti address p:not(.sede-p){grid-column:1/-1}
.pie .sede-p{margin-bottom:6px}
.pie-recapiti>p{margin-bottom:4px}
.pie-fondo{margin-top:14px;padding-top:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px}
.pie-fondo .pie-legale{grid-column:1/-1;grid-row:2}
.pie-fondo nav{grid-row:1;grid-column:2}
.pie-firma{margin-top:12px}

@media (min-width:900px){
  .sezione.fitta{padding:48px 0}
  .h2-sez{font-size:clamp(26px,2.2vw,32px);margin:6px 0 16px}
  .h2-pic{font-size:19px}
  .ap-int{padding:12px 0 8px}
  .ap-int .wrap{gap:48px}
  .ap-int h1{font-size:clamp(34px,3.1vw,46px);margin:12px 0 14px}
  .ap-int .wrap>.briciole{margin-bottom:-30px}
  .ap-int .frase{font-size:17px;line-height:1.55}
  .ap-int .reperibili{display:flex;margin-top:10px;font-size:13.5px}

  .pillole-c{display:flex;flex-wrap:wrap;gap:6px}
  .pillole-c li{align-items:center;padding:5px 11px 5px 6px;border-radius:999px;background:#fff;font-size:13.5px;line-height:1.25}
  .pillole-c .sp{width:18px;height:18px;margin-top:0;background:var(--blu-chiaro);color:var(--blu-testo);display:grid;place-items:center}
  .pillole-c .sp svg{display:block;width:10px;height:10px}
  .perchi-p li{padding:4px 12px 4px 4px;font-size:13.5px}
  .perchi-p .ico{width:26px;height:26px}
  .faq summary{padding:13px 2px;font-size:16px}
  .faq .croce{width:30px;height:30px}
  .ct small{display:block}
  .ct b{font-size:14.5px}
  .cm{width:64px;height:48px;border-radius:10px}
  .coll-righe{grid-template-columns:1fr}
  .coll-righe a{gap:12px;padding:6px 44px 6px 6px}
  .coll-righe .freccia{display:grid}
  .invito-c .occhiello{display:inline-flex}
  .invito-c .pulsanti{flex-wrap:wrap;gap:8px}
  .invito-c .solo-pc{display:inline}
  .invito-c .solo-tel{display:none}

  .cosa-testa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:center}
  .cosa-testa .h2-sez{margin:0}
  .cosa-testa.sola{grid-template-columns:1fr}
  .cosa-griglia{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start;margin-top:22px}
  .riquadro{position:sticky;top:calc(var(--testata-h) + 20px);aspect-ratio:16/10;border-radius:18px}
  .voce-t{padding:9px 6px}
  .voce-t h3{font-size:17px}
  .mini{width:52px;height:40px}
  .dentro-c{padding:2px 6px 18px 70px}

  .fascia-griglia{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:36px;align-items:center}
  .fascia.senza-media .fascia-griglia{grid-template-columns:1fr}
  .media-f{aspect-ratio:4/3;border-radius:18px}
  .media-m{aspect-ratio:16/9}
  .fascia-testo{gap:22px}
  .passi,.passi[style*="--np:3"]{grid-template-columns:repeat(var(--np,4),minmax(0,1fr));gap:18px}
  .passi li{grid-template-columns:1fr;row-gap:8px}
  .passi li::before{position:relative;z-index:1;width:30px;height:30px;font-size:12px}
  .passi li::after{content:"";position:absolute;left:36px;right:-12px;top:15px;height:1px;background:var(--linea2)}
  .passi li:last-child::after{display:none}
  .passi b{font-size:15px;align-self:start}
  .passi span{font-size:14px;line-height:1.45}

  .fi-griglia{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:44px;align-items:start}
  .fi-griglia.sola{grid-template-columns:minmax(0,7fr)}
  .fi-faq .h2-sez{margin-top:0}
  .invito-c{padding:22px 24px}
  .invito-c h2{font-size:24px}
  .invito-c .pulsanti .btn{flex:0 0 auto}

  .ref-testa{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end;margin-bottom:22px}
  .ref .cifra{padding:16px}
  .ref .cifra b{font-size:40px}
  .gruppi-d{columns:2;column-gap:36px}
  .gruppo-d:nth-child(5){border-top:1px solid var(--linea)}
  .scheda-tempo{padding:22px 24px 6px}
  .scheda-tempo .tempo li{display:block;padding:0 0 16px 30px}
  .scheda-tempo .tempo li::before,.scheda-tempo .tempo li::after{display:block}
  .scheda-tempo .tempo li:last-child::before{display:none}
  .scheda-tempo .tempo b{font-size:14px;padding:0;background:none;border:0;text-align:left}
  .scheda-tempo .tempo span{font-size:15px;line-height:1.4;margin-top:2px}

  .ap-int .dirette{gap:10px}
  .ap-int .diretta{flex-direction:row;align-items:center;gap:14px;padding:14px 16px}
  .ap-int .diretta .ico{width:42px;height:42px;border-radius:12px}
  .ap-int .diretta b{font-size:17px}
  .fitta.contatti .contatti-griglia{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"testo modulo" "faq modulo";column-gap:48px;row-gap:24px;align-items:start}
  .fitta.contatti .modulo-testo{grid-area:testo}
  .fitta.contatti .modulo{grid-area:modulo}
  .fitta.contatti .fi-faq{grid-area:faq}

  .legale-griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px;align-items:start}
  .lp-testa h2{font-size:24px}

  .pie{padding:44px 0 22px}
  .pie-pres,.pie-cert{display:block}
  .pie-cert{display:grid}
  .pie-col{display:block}
  .pie-marchio img{margin-bottom:12px;height:30px}
  .pie-griglia{gap:40px}
  .pie-recapiti address{display:block}
  .pie .sede-p{margin-bottom:12px}
  .pie-fondo{margin-top:28px;padding-top:18px;display:flex}
  .pie-firma{margin-top:14px}
}
@media (min-width:900px){
  /* al computer i gruppi sono aperti (sito.js) e i nomi scorrono in colonne bilanciate */
  .gruppi-d.aperti{columns:3;column-gap:28px}
  .gruppi-d.aperti .gruppo-d{break-inside:auto;border-top:0;border-bottom:0;margin-bottom:10px}
  .gruppi-d.aperti .gruppo-t{padding:4px 0;break-after:avoid}
  .gruppi-d.aperti .g-ico{width:30px;height:30px;border-radius:8px}
  .gruppi-d.aperti .gruppo-t h3{font-size:15px}
  .gruppi-d.aperti .gruppo-d .dentro-c{display:block;padding:0 0 2px}
  .gruppi-d.aperti .clienti li{break-inside:avoid;padding:4px 0}
  .gruppi-d.aperti .clienti b{font-size:14px}
  .gruppi-d.aperti .clienti span{font-size:12.5px}
}
@media (min-width:1100px){
  .gruppi-d.aperti{columns:4}
}
/* le griglie a una colonna del telefono non si allargano mai oltre lo schermo */
@media (max-width:899px){
  .cosa-griglia,.fascia-griglia,.fi-griglia,.fi-lato,.legale-griglia,.ref-testa,.fitta.contatti .contatti-griglia{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:359px){
  .ap-int .dirette{grid-template-columns:1fr}
  .pie-recapiti address{grid-template-columns:1fr}
  .invito-c .pulsanti{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .strato,.mini,.pillole-c li,.perchi-p li,.coll-righe a{transition:none}
}

/* =====================================================================
   SERVIZI · STRUTTURA UNICA (15/10 sera): In breve (tessere uguali), Cosa facciamo a schede numerate col riquadro del
   video, Per chi a tessere con il video del servizio, Come lavoriamo a tappe, domande + invito, collegati in fila.
   Classi proprie (srv-* per le sezioni, sv-* per i pezzi: .scheda e .tessera sono già della home): chi siamo resta
   com'era. Movimento: --faro-ease, 0,16-0,3 s.
   ===================================================================== */
/* In breve: cosa comprende, tessere tutte uguali (due colonne al telefono, righe piene al computer) */
.sezione.srv-breve{border-top:0;padding:10px 0 0}
.sv-breve{display:grid;gap:10px;padding:12px;border-radius:18px;background:var(--carta);border:1px solid var(--linea)}
.sv-breve-testa{display:grid;gap:3px;padding:2px 2px 0}
.sv-breve-testa .occhiello{font-size:11px}
.sv-breve-testa h2{font-size:18px;line-height:1.15;letter-spacing:-.018em}
/* al telefono una lista a due colonne senza riquadri (le scritte stanno quasi tutte su una riga); al computer tessere */
.sv-breve-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;padding:0 2px}
.sv-breve-lista li{display:flex;align-items:center;gap:8px;border-radius:12px;font-size:13.5px;font-weight:600;line-height:1.25;letter-spacing:-.005em;transition:border-color .2s var(--faro-ease),transform .2s var(--faro-ease),box-shadow .2s var(--faro-ease)}
.sv-breve-lista li:last-child:nth-child(odd){grid-column:1/-1}
.sv-breve-lista .sp{flex:none;width:20px;height:20px;border-radius:50%;background:var(--blu-chiaro);color:var(--blu-testo);display:grid;place-items:center}
.sv-breve-lista .sp svg{width:11px;height:11px}
.sv-breve-lista li>span:last-child{min-width:0}

/* Cosa facciamo: schede numerate (titolo che dice cosa si ottiene, sintesi al computer, dettagli in punti a richiesta) */
.srv-cosa .h2-sez{order:-1;margin:0 0 2px}
.sv-schede-griglia{margin-top:0;gap:10px}
.sv-destra{display:contents}
.srv-cosa .riquadro{aspect-ratio:2/1;border-radius:16px}
.sv-schede{display:grid;gap:8px}
.srv-cosa .voce.sv-scheda{border:1px solid var(--linea);border-radius:14px;background:#fff;transition:border-color .2s var(--faro-ease),box-shadow .2s var(--faro-ease),transform .2s var(--faro-ease)}
.srv-cosa .sv-scheda-t{display:grid;grid-template-columns:minmax(0,1fr) 26px;align-items:center;column-gap:12px;padding:10px 10px 10px 14px;border-radius:13px}
.sv-scheda-c{display:grid;gap:3px;min-width:0}
.srv-cosa .sv-scheda-t h3{font-size:16px;line-height:1.25;font-weight:650;letter-spacing:-.012em;color:var(--testo)}
.srv-cosa .voce[open] .voce-t h3{color:var(--blu-testo)}
.sv-sint{display:none;font-size:13.5px;line-height:1.4;color:var(--tenue)}
.srv-cosa .sv-scheda[open]{border-color:rgba(5,146,199,.38);box-shadow:var(--ombra)}
.srv-cosa .sv-scheda .dentro-c{padding:0 14px 14px 50px;gap:10px}
.srv-cosa .punti{gap:7px}
.srv-cosa .punti li{padding-left:15px;font-size:14.5px;line-height:1.45;color:var(--tenue)}
.srv-cosa .punti li::before{left:1px;top:9px;width:5px;height:5px;border-radius:50%;transform:none}
.srv-cosa .punti b{color:var(--testo);font-weight:620}

/* Per chi lavoriamo + Come lavoriamo, sullo stesso fondo, col video del servizio */
.srv-chi{background:var(--carta)}
.sv-chi-griglia{display:grid;gap:20px}
.sv-chi-media{display:none}
.sv-chi-testo{display:grid;gap:22px}
.sv-tessere{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:6px}
.sv-tessera{display:flex;align-items:center;gap:9px;min-height:54px;padding:8px 10px 8px 8px;border-radius:12px;background:#fff;border:1px solid var(--linea);font-size:13.5px;font-weight:600;line-height:1.28;letter-spacing:-.005em;transition:border-color .2s var(--faro-ease),transform .2s var(--faro-ease),box-shadow .2s var(--faro-ease)}
.sv-tessera.sv-larga{grid-column:1/-1}
.sv-tessera .ico{flex:none;width:32px;height:32px;border-radius:9px;background:var(--blu-chiaro);color:var(--blu-testo);display:grid;place-items:center}
.sv-tessera .ico svg{width:17px;height:17px}
/* 26/10: a 320 px «apparecchiature» usciva di 10 px (scorrimento di lato): le parole lunghe vanno a capo con il trattino */
.sv-tessera>span:last-child{min-width:0;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.sv-tessera>span:last-child{min-width:0}
.sv-t-media{position:relative;grid-row:span 2;min-height:112px;border-radius:12px;overflow:hidden;background:var(--carta2);border:1px solid var(--linea)}
.sv-t-media img,.sv-t-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-tappe{display:grid}
.sv-tappe li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;padding-bottom:12px}
.sv-tappe li:last-child{padding-bottom:0}
.sv-tappe li::before{content:"";position:absolute;left:14.5px;top:34px;bottom:4px;width:1px;background:var(--linea2)}
.sv-tappe li:last-child::before{display:none}
/* 26/10: il segno delle tappe è un punto, niente numero (Mario: «quei numerini … fanno schifo toglili») */
.sv-tn{grid-row:span 2;width:30px;height:30px;display:grid;place-items:center}
.sv-tn::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--blu);box-shadow:0 0 0 4px var(--blu-chiaro)}
.sv-tappe b{padding-top:5px;font-size:15px;font-weight:650;line-height:1.25;letter-spacing:-.01em}
.sv-tappe li>span:last-child:not(.sv-tn){margin-top:2px;color:var(--tenue);font-size:14px;line-height:1.45}

/* domande + invito, poi i servizi collegati in fila */
.srv-fine .sv-coll-fila{margin-top:20px}
.srv-fine .coll-righe li:last-child:nth-child(odd){grid-column:1/-1}
@media (hover:hover){
  .sv-tessera:hover{border-color:var(--linea2);transform:translateY(-1px);box-shadow:var(--ombra)}
  .srv-cosa .sv-scheda:not([open]):hover{border-color:var(--linea2);transform:translateY(-1px);box-shadow:var(--ombra)}
}
@media (min-width:900px){
  .sezione.srv-breve{padding:22px 0 0}
  .sv-breve{grid-template-columns:190px minmax(0,1fr);align-items:center;gap:28px;padding:18px 20px 18px 26px;border-radius:22px}
  .sv-breve-testa{gap:6px;padding:0}
  .sv-breve-testa h2{font-size:24px}
  .sv-breve-lista{grid-template-columns:repeat(var(--nc,4),minmax(0,1fr));gap:8px}
  .sv-breve-lista li:last-child:nth-child(odd){grid-column:auto}
  .sv-breve-lista{padding:0}
  .sv-breve-lista li{min-height:48px;padding:9px 12px 9px 9px;background:#fff;border:1px solid var(--linea);font-size:14px}
  .sv-breve-lista .sp{width:22px;height:22px}
  .sv-breve-lista li:hover{border-color:var(--linea2);transform:translateY(-1px);box-shadow:var(--ombra)}

  .srv-cosa.fitta,.srv-chi.fitta,.srv-fine.fitta{padding:40px 0}
  .sv-destra{display:block;min-width:0}
  .srv-cosa .h2-sez{margin:0 0 16px}
  .srv-cosa .sv-schede-griglia{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start}
  .srv-cosa .riquadro{aspect-ratio:16/10;border-radius:18px}
  .sv-schede{gap:10px}
  .sv-schede.sv-due{grid-template-columns:repeat(2,minmax(0,1fr))}
  .srv-cosa .sv-scheda-t{align-items:start;padding:14px 14px 14px 14px}
  .srv-cosa .sv-scheda-t .croce{margin-top:1px}
  .srv-cosa .sv-scheda-t h3{font-size:16.5px}
  .sv-sint{display:block}
  .srv-cosa .sv-scheda .dentro-c{padding:0 16px 16px 54px}

  .sv-chi-griglia{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:36px;align-items:stretch}
  .srv-chi.senza-media .sv-chi-griglia{grid-template-columns:1fr}
  .sv-chi-media{display:block;position:relative;margin:0;min-height:280px;border-radius:18px;overflow:hidden;background:var(--carta2);border:1px solid var(--linea)}
  .sv-chi-media img,.sv-chi-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .sv-chi-testo{gap:26px;align-content:start}
  .srv-chi .h2-sez{margin:0 0 12px}
  .sv-t-media{display:none}
  .sv-tessere{grid-template-columns:repeat(var(--nt,4),minmax(0,1fr));gap:8px}
  .sv-tessera,.sv-tessera.sv-larga{grid-column:auto;flex-direction:column;align-items:flex-start;gap:10px;min-height:0;padding:14px 14px 15px;font-size:14px}
  .sv-tappe{grid-template-columns:repeat(var(--np,4),minmax(0,1fr));gap:16px}
  .sv-tappe li{grid-template-columns:1fr;row-gap:8px;padding-bottom:0}
  .sv-tappe li::before{left:40px;right:-12px;top:15px;bottom:auto;width:auto;height:1px}
  .sv-tn{grid-row:auto}
  .sv-tappe b{padding-top:0}

  .srv-fine .sv-coll-fila{margin-top:26px;padding-top:22px;border-top:1px solid var(--linea)}
  .srv-fine .coll-righe{grid-template-columns:repeat(var(--nc,2),minmax(0,1fr));gap:12px}
  .srv-fine .coll-righe li:last-child:nth-child(odd){grid-column:auto}
  /* quattro collegati in fila: solo i nomi (le righe di descrizione andavano su cinque righe strette) */
  .sv-coll-fila[style*="--nc:4"] .ct small{display:none}
}
@media (max-width:899px){
  .sv-schede-griglia,.sv-chi-griglia{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .sv-breve-lista li,.sv-tessera,.srv-cosa .voce.sv-scheda{transition:none}
  .sv-breve-lista li:hover,.sv-tessera:hover{transform:none}
}

/* =====================================================================
   APERTURA DEI SERVIZI: LA RAMIFICAZIONE (21/10 pomeriggio) E PASSAGGIO FRA LE PAGINE
   Mario (21/10): «non deve uscire poi la pagina con il video, ma è come se poi si creasse tutta una ramificazione che ti
   va a spiegare poi la pagina successiva». Apertura alta quanto lo schermo sotto la testata, sullo stesso fondo blu notte
   della home: titolo, il nodo del servizio (#srv-nodo, stessa icona del cerchio della home) e i rami verso 4-6 voci vere,
   ognuna porta alla parte della pagina che la spiega. Sotto, frase e pulsanti. Le misure dei rami sono fisse (genera.mjs,
   RAMI_T e RAMI_D): al telefono un albero (disco 60 px, tronco a 30 px, voci da 72 px, alte 48, passo 56), al computer un
   ventaglio (disco 104 px a sinistra, voci da 232 px, alte 50, passo 66), così l'SVG coincide sempre con le voci.
   Le briciole al telefono non si vedono (il logo e il menù portano già alla home; nel JSON-LD restano).
   ===================================================================== */
.ap-rami{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:calc(100vh - var(--testata-h));min-height:calc(100svh - var(--testata-h));padding:20px 0 28px;color:#fff;background-color:#0B1620;background-image:radial-gradient(70% 46% at 16% 46%,rgba(5,146,199,.26),rgba(5,146,199,0) 70%),radial-gradient(120% 60% at 50% -10%,rgba(92,195,234,.1),rgba(92,195,234,0) 60%),linear-gradient(180deg,#14263A 0%,#0F1C2A 50%,#09121A 100%)}
.ap-rami>.wrap{position:relative;width:100%}
.rm-scena{position:absolute;inset:0;z-index:-1;pointer-events:none}
.rm-punti{position:absolute;inset:0;background-image:radial-gradient(rgba(92,195,234,.42) .8px,transparent 1.25px);background-size:22px 22px;opacity:.42;-webkit-mask-image:radial-gradient(90% 70% at 20% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(90% 70% at 20% 50%,#000 20%,transparent 100%)}
.ap-rami .briciole{display:none}
.ap-rami .occhiello{color:var(--blu-luce)}
.ap-rami .occhiello::before{background:var(--blu-luce)}
.ap-rami h1{color:#fff;font-size:27px;line-height:1.08;margin:10px 0 0;max-width:20ch}
.rm-albero{position:relative;height:var(--ht);--x:72px}
.rm-cerchi{position:absolute;left:30px;top:30px;width:560px;height:560px;margin:-280px 0 0 -280px;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.rm-anelli{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rm-anelli circle{fill:none}
.rm-giro circle{stroke:rgba(92,195,234,.34);stroke-width:.35;stroke-linecap:round;stroke-dasharray:30 57.96}
.rm-giro{will-change:transform}
html:not(.statico) .rm-giro{animation:cs-giro 120s linear infinite}
.rm-linee{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.rm-ld{display:none}
.rm-alone{fill:none;stroke:rgba(92,195,234,.12);stroke-width:5;stroke-linecap:round}
.rm-ramo{fill:none;stroke:rgba(140,210,238,.78);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.rm-punto{fill:var(--blu-luce)}
html:not(.statico) .rm-ramo{stroke-dasharray:1 1;stroke-dashoffset:1;animation:rm-disegna .3s var(--faro-ease) calc(.14s + var(--i) * 60ms) forwards}
html:not(.statico) .rm-alone{animation:rm-appare .3s var(--faro-ease) calc(.3s + var(--i) * 60ms) both}
html:not(.statico) .rm-punto{transform-box:fill-box;transform-origin:center;animation:rm-punto .2s var(--faro-ease) calc(.38s + var(--i) * 60ms) both}
@keyframes rm-disegna{to{stroke-dashoffset:0}}
@keyframes rm-punto{from{opacity:0;transform:scale(.3)}}
@keyframes rm-appare{from{opacity:0}}
.rm-nodo{position:absolute;left:0;top:0;z-index:1;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:#fff;background-color:#1D3C5A;background-image:radial-gradient(circle at 50% 22%,rgba(255,255,255,.2),rgba(255,255,255,0) 66%);border:1px solid var(--blu-luce);box-shadow:0 0 0 7px rgba(92,195,234,.12),0 0 34px rgba(92,195,234,.45)}
.rm-nodo svg{width:46%;height:46%}
.rm-nome{position:absolute;left:76px;top:30px;translate:0 -50%;display:grid;gap:4px;margin:0;line-height:1.15}
.rm-nome b{font-size:15px;font-weight:650;letter-spacing:-.01em}
/* 23/10: «Clicca una voce» al posto di «Scegliete una voce» (come «Clicca un servizio» della home), in tondo e non più in
   maiuscolo spaziato; la freccia indica i rami: sotto al telefono, a destra al computer, e si sposta di 3 px due volte
   quando i rami sono disegnati */
.rm-nome small{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;line-height:1.2;color:rgba(160,214,238,.92);--spinta:0 3px}
.rm-segno{flex:none;width:14px;height:14px;rotate:90deg}
html:not(.statico) .rm-segno{animation:rm-segno .3s var(--faro-ease) 1s 4 alternate}
@keyframes rm-segno{to{translate:var(--spinta)}}
html:not(.statico) .rm-nome{animation:rm-appare .26s var(--faro-ease) .18s both}
.rm-nav{position:absolute;left:var(--x);right:0;top:80px}
.rm-rami{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.rm-rami li{height:48px}
.rm-rami a{position:relative;display:flex;align-items:center;gap:10px;height:100%;padding:0 9px 0 14px;border-radius:14px;border:1px solid rgba(92,195,234,.3);background:rgba(20,42,64,.78);color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .2s var(--faro-ease),border-color .2s var(--faro-ease),background-color .2s var(--faro-ease)}
.rm-t{flex:1;min-width:0;font-size:14.5px;font-weight:600;line-height:1.2;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rm-fr{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--blu-luce);background:rgba(92,195,234,.12);transition:background-color .2s var(--faro-ease),color .2s var(--faro-ease),transform .2s var(--faro-ease)}
.rm-fr svg{width:16px;height:16px}
.rm-rami a:active{transform:scale(.98);border-color:var(--blu-luce);background:rgba(36,73,106,.85)}
.rm-rami a:focus-visible{outline:2px solid var(--blu-luce);outline-offset:3px}
@media (hover:hover){
  .rm-rami a:hover{transform:translateX(3px);border-color:var(--blu-luce);background:rgba(36,73,106,.8)}
  .rm-rami a:hover .rm-fr{background:var(--blu-luce);color:#0B1620;transform:translateY(1px)}
  .rm-rami a:active{transform:translateX(3px) scale(.98)}
}
html:not(.statico) .rm-rami li{animation:rm-voce .26s var(--faro-ease) calc(.32s + var(--i) * 60ms) both}
@keyframes rm-voce{from{opacity:0;transform:translateX(-8px)}}
/* impulso di luce sui rami, dal nodo verso la voce (offset-path: niente JS) */
.rm-impulso{position:absolute;left:0;top:0;z-index:0;width:6px;height:6px;border-radius:50%;background:#BDEBFA;box-shadow:0 0 8px 2px rgba(92,195,234,.7);offset-path:var(--pt);offset-rotate:0deg;offset-distance:0%;opacity:0;pointer-events:none}
/* le entrate della ramificazione aspettano il primo fotogramma mostrato (classe rm-via dallo script in testa): fino ad allora
   restano ferme sul primo stato, poi partono tutte insieme mentre il disco arriva */
html:not(.rm-via) .ap-rami *{animation-play-state:paused!important}
html:not(.statico) .rm-impulso{animation:rm-impulso 3.4s ease-in-out calc(1.1s + var(--i) * .55s) infinite}
@keyframes rm-impulso{0%{offset-distance:0%;opacity:0}12%{opacity:1}78%{opacity:1}90%,100%{offset-distance:100%;opacity:0}}
@supports not (offset-path:path("M0 0H1")){.rm-impulso{display:none}}
.rm-dopo .frase{color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.55;max-width:60ch}
.ap-rami .pulsanti{margin-top:16px}
.ap-rami .reperibili{color:rgba(255,255,255,.64)}
.ap-rami+.sezione.fitta{padding-top:24px}
/* telefoni stretti (320-359 px): voci più compatte, così anche «Piano di sicurezza e coordinamento (PSC)» sta in due righe;
   tablet in verticale: le voci non si allungano oltre 520 px */
@media (max-width:359px){
  .ap-rami h1{font-size:25px}
  .rm-rami a{gap:6px;padding:0 6px 0 11px}
  .rm-t{font-size:13px}
  .rm-fr{width:26px;height:26px}
}
@media (min-width:600px) and (max-width:899.98px){.rm-rami a{max-width:520px}}
/* voce d'arrivo dopo il tocco su un ramo (sito.js): si accende per un attimo */
.rm-arrivo{animation:rm-arrivo 1.4s var(--faro-ease)}
@keyframes rm-arrivo{0%,30%{box-shadow:0 0 0 3px rgba(92,195,234,.55)}100%{box-shadow:0 0 0 3px rgba(92,195,234,0)}}
@media (min-width:900px){
  .ap-rami{padding:28px 0 36px}
  .ap-rami .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"testa albero" "dopo albero";column-gap:56px;row-gap:0;align-items:center}
  .rm-testa{grid-area:testa;align-self:end}
  .rm-dopo{grid-area:dopo;align-self:start;padding-top:18px}
  .ap-rami .briciole{display:block;padding-top:0;margin-bottom:12px;color:rgba(255,255,255,.62)}
  .ap-rami .briciole a{color:rgba(255,255,255,.62)}
  .ap-rami .briciole a:hover,.ap-rami .briciole [aria-current]{color:#fff}
  .ap-rami .briciole li+li::before{border-color:rgba(255,255,255,.42)}
  .ap-rami h1{font-size:clamp(38px,3.6vw,52px);max-width:15ch;margin:14px 0 0}
  .rm-albero{grid-area:albero;height:var(--hd);--x:232px}
  .rm-lt{display:none}
  .rm-ld{display:block}
  .rm-impulso{offset-path:var(--pd)}
  .rm-nodo{top:calc(var(--hd) / 2 - 52px);width:104px;height:104px;box-shadow:0 0 0 10px rgba(92,195,234,.1),0 0 60px rgba(92,195,234,.45)}
  .rm-nome{left:52px;top:calc(var(--hd) / 2 + 68px);translate:-50% 0;width:140px;justify-items:center;text-align:center}
  .rm-nome b{font-size:14px;text-wrap:balance}
  .rm-nome small{--spinta:3px 0}
  .rm-segno{rotate:0deg}
  .rm-cerchi{left:52px;top:calc(var(--hd) / 2);width:980px;height:980px;margin:-490px 0 0 -490px}
  .rm-nav{top:0}
  .rm-rami{gap:16px}
  .rm-rami li{height:50px}
  .rm-rami a{padding:0 10px 0 18px;max-width:440px}
  .rm-t{font-size:15.5px}
  .ap-rami .pulsanti .btn{flex:0 0 auto;padding:0 20px}
  .ap-rami+.sezione.fitta{padding-top:56px}
}
@media (prefers-reduced-motion:reduce){
  .rm-giro,.rm-ramo,.rm-alone,.rm-punto,.rm-nome,.rm-segno,.rm-rami li,.rm-impulso,.rm-arrivo{animation:none!important}
  .rm-impulso{display:none}
  .rm-rami a,.rm-rami a:hover,.rm-rami a:active{transform:none}
}

/* 404 (21/10 pomeriggio): stesso fondo blu notte dell'apertura, col cerchio della home accanto al messaggio */
.ap-notte{position:relative;overflow:hidden;padding:28px 0 32px;color:#fff;background-color:#0B1620;background-image:radial-gradient(60% 50% at 70% 50%,rgba(5,146,199,.26),rgba(5,146,199,0) 70%),linear-gradient(180deg,#14263A 0%,#0F1C2A 50%,#09121A 100%)}
.ap-notte h1{color:#fff}
.ap-notte .frase{color:rgba(255,255,255,.78)}
.ap-notte .occhiello{color:var(--blu-luce)}
.ap-notte .occhiello::before{background:var(--blu-luce)}
.ap-notte .btn-chiaro,.ap-rami .btn-chiaro{background:rgba(255,255,255,.07);border-color:rgba(92,195,234,.4);color:#fff}
.ap-notte .btn-chiaro:hover,.ap-rami .btn-chiaro:hover{background:rgba(255,255,255,.12);border-color:var(--blu-luce)}
.ap-notte .btn:focus-visible{outline-color:var(--blu-luce)}
.ap-404 .cs{padding:30px 0 14px}
.ap-404 .cs{min-width:0}
.ap-404 .cs-anello{width:min(100%,520px)}

/* passaggio: la testata resta ferma e la pagina nuova scende a tendina sopra quella vecchia (20/10: niente più
   dissolvenza, che per un attimo mostrava i due testi uno sopra l'altro). Le immagini vecchie restano sotto finché le
   nuove non sono piene: mai un fotogramma bianco in mezzo. 21/10 pomeriggio: dal cerchio «Consulenza» (classe vt-nodo,
   messa dallo script in testa) la pagina nuova appare sopra la vecchia, ferma sotto, mentre il disco del nodo toccato
   vola sul nodo del servizio (gruppo «srv-nodo»): le due aperture hanno lo stesso fondo e sembrano una scena sola, e i
   rami si disegnano mentre il disco arriva. Fra due servizi il disco resta al suo posto e cambia l'icona. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
.testata{view-transition-name:testata}
#srv-nodo{view-transition-name:srv-nodo}
::view-transition-group(*){animation-duration:.3s;animation-timing-function:var(--faro-ease)}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:vt-tenda .28s var(--faro-ease) both}
html.vt-nodo::view-transition-new(root){animation:vt-appare .26s var(--faro-ease) .02s both}
::view-transition-old(srv-nodo){animation:vt-esce .22s var(--faro-ease) both}
::view-transition-new(srv-nodo){animation:vt-appare .22s var(--faro-ease) .06s both}
::view-transition-new(srv-nodo):only-child{animation:vt-nodo .3s var(--faro-ease) .06s both}
@keyframes vt-esce{to{opacity:0}}
@keyframes vt-entra{from{opacity:0;transform:translateY(8px)}}
@keyframes vt-tenda{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes vt-appare{from{opacity:0}}
@keyframes vt-nodo{from{opacity:0;transform:scale(.6)}}
/* 21/10: la testata è uguale nelle due pagine: si vede solo la nuova, ferma (in Safari la dissolvenza fra le due la
   lasciava bianca per circa 0,3 s) */
::view-transition-old(testata){display:none}
::view-transition-new(testata){animation:none}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* uscita dal menù e dalla tendina (21/10, sito.js «uscita dal menù»): al tocco la voce si accende subito (.premuto,
   prima del clic); al clic menù e tendina si chiudono in 0,16 s e sotto la testata parte la barra; poi cambia la pagina.
   Nella foto della pagina vecchia per il passaggio (.vt-scatto, messa in pageswap) menù, tendina e barra non ci sono:
   il media dell'apertura resta al suo posto e la pagina nuova scende sopra come da ogni altro link */
.foglio-servizi a,.foglio a.voce{position:relative;transition:color .2s var(--faro-ease),padding-left .2s var(--faro-ease),scale .16s var(--faro-ease)}
.foglio-servizi a::before,.foglio a.voce::before{content:"";position:absolute;inset:0 -10px;z-index:-1;border-radius:12px;background:var(--blu-chiaro);opacity:0;transition:opacity .16s var(--faro-ease)}
/* il riscontro al tocco è .premuto: niente evidenziatura del browser, che in Chrome per Android restava sopra il menù
   mentre sfuma */
.foglio a,.nav .tendina a{-webkit-tap-highlight-color:transparent}
.foglio a.premuto{color:var(--blu-testo);scale:.985}
.foglio a.premuto::before{opacity:1}
.nav .tendina a{transition:background-color .2s var(--faro-ease),scale .16s var(--faro-ease)}
.nav .tendina a.premuto{background:var(--blu-chiaro);scale:.985}
.nav .tendina-piede a.premuto{background:none}
.cta-uscita .foglio{transition:opacity .16s var(--faro-ease),transform .16s var(--faro-ease),visibility 0s .16s}
.cta-uscita .menu-btn i::before,.cta-uscita .menu-btn i::after{transition-duration:.16s}
@media (min-width:900px){
  .cta-uscita .tendina{transition:opacity .16s var(--faro-ease),transform .16s var(--faro-ease),visibility 0s .16s}
}
.cta-avanza{position:fixed;left:0;top:var(--testata-h);z-index:50;width:100%;height:2px;background:var(--blu);transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none}
.cta-uscita .cta-avanza{opacity:1;animation:cta-avanza 1.2s var(--faro-ease) both}
@keyframes cta-avanza{from{transform:scaleX(0)}to{transform:scaleX(.7)}}
:root.vt-scatto .foglio,:root.vt-scatto .tendina,:root.vt-scatto .cta-avanza,:root.cta-via .foglio,:root.cta-via .tendina{transition:none;animation:none;opacity:0;visibility:hidden}
/* dove i passaggi fra le pagine non ci sono (Firefox, Safari prima del 18.2: classe messa dallo script in testa) la
   pagina nuova entra con una dissolvenza breve */
@media (prefers-reduced-motion:no-preference){
  .vt-entra:not(.statico) main{animation:vt-entra .24s var(--faro-ease)}
}
@media (prefers-reduced-motion:reduce){
  .cta-avanza{display:none}
  .foglio a.premuto,.nav .tendina a.premuto{scale:none}
  .cta-uscita .foglio,.cta-uscita .tendina{transition:none}
}
.statico .cta-avanza{display:none}
.statico .cta-uscita .foglio,.statico .cta-uscita .tendina{transition:none}

/* =====================================================================
   RIFINITURE (15/10): «il resto del sito curato allo stesso livello del plastico».
   Tipografia (a capo bilanciati, niente sillabazione, orari e numeri che non si spezzano), stati di passaggio, fuoco e
   pressione delle voci, tendina con le miniature, recapiti, sedi, referenze aperte, 404 con l'immagine, ritmo della home,
   passaggio fra le pagine per il titolo. Movimento: --faro-ease, 0,16-0,3 s, guardia del movimento ridotto in fondo.
   ===================================================================== */
h1,h2,h3,.occhiello,.faq summary,.tendina b,.ct b,.foglio-servizi a{text-wrap:balance}
p,li,small,.risposta p,.dentro-c p{text-wrap:pretty}
.nw{white-space:nowrap}
.reperibili{text-wrap:balance}
/* passi: niente sillabazione automatica («do-cumenti», «or-ganizzazione»): si va a capo fra le parole */
.passi b,.passi span{-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal}

/* voci richiudibili (domande, «Cosa facciamo», referenze, privacy): il «+» risponde al passaggio e alla pressione */
.croce{transition:transform .26s var(--faro-ease),scale .16s var(--faro-ease),background-color .2s var(--faro-ease),color .2s var(--faro-ease),border-color .2s var(--faro-ease)}
summary:hover .croce{background:#fff;border-color:var(--linea2)}
summary:active .croce{scale:.9}
/* micro-movimenti al passaggio del mouse (20/10): solo transform, opacità e colore; al telefono niente cambia */
@media (hover:hover){
  summary:hover .croce{background:var(--blu-chiaro);border-color:transparent;color:var(--blu-testo)}
  .tessera .media>video,.tessera .media>img{transition:transform .3s var(--faro-ease)}
  .tessera:hover .media>video,.tessera:hover .media>img{transform:scale(1.04)}
  .btn-blu:hover:not(:active){transform:translateY(-1px)}
}
@media (prefers-reduced-motion:reduce){
  .tessera:hover .media>video,.tessera:hover .media>img,.btn-blu:hover:not(:active),.srv-cosa .sv-scheda:not([open]):hover{transform:none}
}
.voce-t:active,.gruppo-t:active,.lp-t:active{background:var(--carta2)}
.mini img{transition:transform .3s var(--faro-ease)}
.voce-t:hover .mini img{transform:scale(1.06)}

/* «Per chi lavoriamo»: un'icona per tipo di cliente, abbastanza grande da leggersi (a 12 px la fiamma era una macchia) */
.perchi-p li{padding:3px 12px 3px 3px;gap:8px}
.perchi-p .ico{width:26px;height:26px}
.perchi-p .ico svg{width:15px;height:15px}
@media (min-width:900px){
  .perchi-p li{padding:4px 13px 4px 4px}
  .perchi-p .ico{width:28px;height:28px}
  .perchi-p .ico svg{width:16px;height:16px}
}

/* miniature: si scaldano al passaggio (tendina, collegati) */
.cm img{transition:transform .3s var(--faro-ease)}
a:hover>.cm img{transform:scale(1.06)}

/* recapiti diretti: telefono dello studio ed email a tutta larghezza, in riga */
.ap-int .diretta.larga{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px}

/* 404: i tre pulsanti hanno scritte lunghe («Chiama lo studio» usciva dal pulsante a 390 px): vanno a capo */
.ap-404 .pulsanti .btn{flex:1 1 auto;padding:0 16px}
/* 404 (21/10): il cerchio «Consulenza» della home accanto al messaggio, per ripartire da un servizio */

/* telefono: nei collegati la miniatura senza numero sopra (a 40 px il numero copriva la foto) */
@media (max-width:899.98px){
  .coll-righe .cm{width:44px;height:44px}
  /* 17/10 sera: i servizi collegati a una colonna, con la freccia (in due colonne i nomi andavano su tre righe) */
  .srv-fine .coll-righe{grid-template-columns:1fr}
  .coll-righe a{padding-right:44px}
  .coll-righe .freccia{display:grid}
  /* link del piè alti almeno 32 px, facili da toccare */
  .pie-recapiti a,.pie a:not(.firma-faro){display:inline-block;padding-block:8px;margin-block:-4px}
}

@media (min-width:900px){
  /* tendina dei servizi: miniatura col numero accanto a nome e descrizione intera (niente puntini a metà frase) */
  .nav .tendina a{align-items:flex-start;gap:14px;padding:10px 12px}
  .tendina .cm{width:64px;height:48px;border-radius:10px;margin-top:2px}
  .tendina ul{gap:2px 6px}

  /* referenze aperte in colonne: niente «×» (i gruppi non si chiudono) e niente mano sul titolo */
  .gruppi-d.aperti .croce{display:none}
  .gruppi-d.aperti .gruppo-t{cursor:default}
  .gruppi-d.aperti .gruppo-t:hover,.gruppi-d.aperti .gruppo-t:active{background:none}

  /* 404: messaggio a sinistra, cerchio «Consulenza» a destra */
  .ap-404 .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}

  /* home: ritmo più stretto fra le sezioni (100 px + 88 della griglia lasciavano un vuoto di quasi due schermi di bianco) */
  .sezione:not(.fitta){padding:84px 0}
  .servizi{padding-bottom:72px}
  #studio + .servizi{padding-top:72px}
  .testa-sez{margin-bottom:32px}
}

/* passaggio fra le pagine: dal 20/10 il titolo non ha più un passaggio suo (dissolvenza sopra la pagina): scende con la
   tendina insieme al resto della pagina nuova, così non compare mai sopra i testi della pagina vecchia */
::view-transition-new(root){animation-delay:.04s}

@media (prefers-reduced-motion:reduce){
  .croce,.mini img,.cm img{transition:none}
  summary:active .croce{scale:none}
  .voce-t:hover .mini img,a:hover>.cm img{transform:none}
}

/* scorrimento senza vuoti (17/10, Mario: «pagina bianca e poi ti appaiono le cose»)
   1. al telefono la testata non sfoca più ciò che le passa sotto: la sfocatura si ricalcolava a ogni fotogramma dello
      scorrimento (lavoro pesante sui telefoni lenti); dal 21/10 sera fondo bianco pieno su ogni misura (regola della .barra).
   2. ogni riquadro di foto o video ha un fondo grigio-azzurro (mai bianco) finché la sua immagine non arriva;
      le misure fisse (aspect-ratio) c'erano già. */
.tessera .media,.riquadro,.media-f,.sv-chi-media,.sv-t-media,.scheda-media{background:linear-gradient(135deg,var(--carta2),var(--linea2))}

/* ---------- REFERENZE, pagina a parte (22/10) ----------
   Mario: «LE REFERENZE DEVONO AVERE LA SEZIONE A PARTE IN ALTO COME SERVIZI, CHI SIAMO ECC». Apertura chiara con la
   società in testa e, accanto, i settori come scorciatoie con l'icona (portano al gruppo e lo aprono, sito.js); sotto i
   gruppi dei clienti (stessi stili di prima, senza numeri); poi «Le nostre aziende partner» su fascia scura, ben in
   vista, ogni partner con l'icona del suo lavoro. In chi siamo resta un rimando (.ref-rimando) coi settori in pillole.
   Nella home «Vedi le referenze» sta subito sotto il testo della società (.ref-su). */
.ap-ref .ref-societa{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:650;line-height:1.3;letter-spacing:-.005em;color:var(--blu-testo);text-wrap:balance}
.ap-ref .ref-societa::before{content:"";flex:none;width:18px;height:1.5px;background:var(--blu)}
.ref-salti ul,.ref-salti-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ref-salti a,.ref-salti-l a{display:flex;align-items:center;gap:10px;min-height:52px;height:100%;padding:8px 12px 8px 8px;border:1px solid var(--linea);border-radius:14px;background:#fff;box-shadow:var(--ombra);color:var(--testo);font-size:14px;font-weight:600;line-height:1.25;letter-spacing:-.005em;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .24s var(--faro-ease),box-shadow .24s var(--faro-ease),border-color .2s var(--faro-ease)}
.ref-salti .g-ico,.ref-salti-l .g-ico{width:34px;height:34px}
.ref-salti .ref-salto-p a,.ref-salti-l .ref-salto-p a{background:var(--testo);border-color:var(--testo);color:#fff}
.ref-salti .ref-salto-p .g-ico,.ref-salti-l .ref-salto-p .g-ico{background:rgba(92,195,234,.16);color:var(--blu-luce)}
.ref-salti a:active,.ref-salti-l a:active{transform:scale(.98)}
.ref-salti a:focus-visible,.ref-salti-l a:focus-visible{outline-offset:2px}
@media (hover:hover){
  .ref-salti a:hover,.ref-salti-l a:hover{transform:translateY(-2px);box-shadow:var(--ombra-su);border-color:var(--linea2)}
  .ref-salti .ref-salto-p a:hover,.ref-salti-l .ref-salto-p a:hover{border-color:var(--blu-luce)}
  .ref-p:hover{transform:translateY(-2px);border-color:rgba(92,195,234,.45);background:rgba(255,255,255,.09)}
}
/* le aziende partner, ben in vista: fascia scura come «La società» della home */
.ref-partner{background:var(--testo);color:#fff;border-top:0}
.ref-partner .occhiello{color:var(--blu-luce)}
.ref-partner .occhiello::before{background:var(--blu-luce)}
.ref-partner .h2-sez{color:#fff;margin-bottom:10px}
.ref-p-testa p{color:rgba(255,255,255,.76);font-size:16px;line-height:1.5;max-width:46ch}
.ref-p-griglia{display:grid;gap:8px;margin-top:22px}
.ref-p{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px 10px 10px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.06);transition:transform .24s var(--faro-ease),border-color .2s var(--faro-ease),background-color .2s var(--faro-ease)}
.ref-p .g-ico{background:rgba(92,195,234,.16);color:var(--blu-luce)}
.ref-p-t{display:grid;gap:2px;min-width:0}
.ref-p-t b{font-size:15px;font-weight:650;line-height:1.3;color:#fff}
.ref-p-t span{font-size:13px;line-height:1.35;color:rgba(255,255,255,.72)}
/* rimando di chi siamo */
.ref-r{display:grid;gap:18px;padding:20px;border:1px solid var(--linea);border-radius:var(--raggio);background:var(--carta)}
.ref-r .h2-sez{margin-bottom:10px}
.ref-r p{color:var(--tenue);font-size:15.5px;line-height:1.5;max-width:52ch;margin-bottom:12px}
/* home: «Vedi le referenze» sotto il testo della società */
.testa-sez .ref-su{margin-top:16px}
@media (min-width:600px){
  .ref-p-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .ap-ref .ref-societa{font-size:16px;margin-top:6px}
  .ref-salti ul{gap:10px}
  .ref-partner .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
  .ref-p-griglia{margin-top:0;gap:10px}
  .ref-r{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;padding:30px 32px}
  .ref-salti-l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .testa-sez .ref-su{grid-column:2;margin-top:-30px}
}
@media (prefers-reduced-motion:reduce){
  .ref-salti a,.ref-salti-l a,.ref-p{transition:none}
  .ref-salti a:hover,.ref-salti-l a:hover,.ref-salti a:active,.ref-salti-l a:active,.ref-p:hover{transform:none}
}
.ref-r .vai,.testa-sez .ref-su .vai{min-height:44px;margin-block:-11px}
/* vendita (22/10): al telefono il pulsante di WhatsApp prende la larghezza del suo testo («Scrivici su WhatsApp» non si
   taglia); se non c'è posto, «Chiama» va sotto a tutta larghezza */
@media (max-width:899.98px){.ap-int .pulsanti.acquisto .btn-blu{flex:0 0 auto}.ap-int .pulsanti.acquisto .btn:not(.btn-blu){flex:1 1 auto}}

/* =====================================================================
   VIDEO INTERO DEI SERVIZI (23/10): riquadro grande «Guarda il video» dopo «Cosa facciamo», su fondo inchiostro come la
   fascia scura. Al telefono a tutta larghezza dentro i margini, al computer al centro fino a 960 px, sempre 16:9. Il
   tasto copre tutto il riquadro (tocco grande), il disco del play sta al centro. Senza JS il tasto resta nascosto e ci
   sono i comandi del browser sopra la locandina; con JS (classe .pronto) il video resta trasparente finché non parte
   (.in-moto). Movimento: --faro-ease, 0,16-0,3 s; con movimento ridotto o ?fermo=1 niente transizioni né scale.
   ===================================================================== */
.sezione.fitta.srv-video{padding:30px 0 28px;border-top:0;background:var(--testo);color:#fff}
.srv-video + .sezione{border-top:0}
.sv-video-box{max-width:960px;margin:0 auto}
.sv-video-testa{display:grid;gap:7px;margin-bottom:14px}
.sv-video-occ{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.srv-video .occhiello{color:var(--blu-luce)}
.srv-video .occhiello::before{background:var(--blu-luce)}
.sv-video-durata{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 7px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.88);font-size:12.5px;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.sv-video-durata svg{width:13px;height:13px;color:var(--blu-luce)}
.srv-video .h2-sez{margin:0;max-width:30ch;color:#fff;font-size:22px;line-height:1.15;text-wrap:balance}
.sv-video{margin:0}
.sv-video-quadro{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0B1520;border:1px solid rgba(255,255,255,.1);box-shadow:0 22px 50px -26px rgba(0,0,0,.75);isolation:isolate}
.sv-video-quadro img,.sv-video-quadro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-video-quadro img{transition:transform .3s var(--faro-ease)}
.sv-video-quadro video{z-index:1}
.sv-video-quadro video:fullscreen{object-fit:contain}
.sv-video-quadro.pronto video{opacity:0;transition:opacity .24s var(--faro-ease)}
.sv-video-quadro.pronto.in-moto video{opacity:1}
.sv-video-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;cursor:pointer;color:var(--blu-forte);background:radial-gradient(circle at 50% 50%,rgba(9,18,26,.34) 0,rgba(9,18,26,.12) 34%,rgba(9,18,26,0) 62%),linear-gradient(180deg,rgba(9,18,26,0) 55%,rgba(9,18,26,.28));-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:opacity .24s var(--faro-ease),visibility 0s linear 0s}
.sv-video-play[hidden]{display:none}
.sv-video-play:focus-visible{outline:0}
.sv-play{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 0 8px rgba(255,255,255,.16),0 14px 30px -12px rgba(0,0,0,.6);transition:transform .2s var(--faro-ease),box-shadow .2s var(--faro-ease)}
.sv-play svg{width:26px;height:26px;margin-left:3px}
.sv-video-play:focus-visible .sv-play{outline:3px solid var(--blu-luce);outline-offset:6px}
.sv-video-play:active .sv-play{transform:scale(.95)}
.in-moto .sv-video-play{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--faro-ease),visibility 0s linear .2s}
.sv-video-fonte{margin-top:9px;font-size:12px;line-height:1.4;color:rgba(255,255,255,.66)}
@media (hover:hover){
  .sv-video-play:hover .sv-play{transform:scale(1.06);box-shadow:0 0 0 12px rgba(255,255,255,.2),0 18px 36px -12px rgba(0,0,0,.65)}
  .sv-video-quadro:not(.in-moto):hover img{transform:scale(1.02)}
}
@media (min-width:900px){
  .sezione.fitta.srv-video{padding:56px 0 50px}
  .sv-video-testa{gap:9px;margin-bottom:20px}
  .srv-video .h2-sez{font-size:clamp(26px,2.2vw,32px)}
  .sv-video-quadro{border-radius:20px}
  .sv-play{width:88px;height:88px;box-shadow:0 0 0 10px rgba(255,255,255,.16),0 18px 40px -14px rgba(0,0,0,.6)}
  .sv-play svg{width:34px;height:34px;margin-left:4px}
  .sv-video-fonte{margin-top:12px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .sv-video-quadro img,.sv-video-quadro.pronto video,.sv-video-play,.sv-play{transition:none}
  .sv-video-play:hover .sv-play,.sv-video-play:active .sv-play,.sv-video-quadro:not(.in-moto):hover img{transform:none}
}
.statico .sv-video-quadro img,.statico .sv-video-quadro.pronto video,.statico .sv-video-play,.statico .sv-play{transition:none}
.statico .sv-video-play:hover .sv-play,.statico .sv-video-play:active .sv-play,.statico .sv-video-quadro:not(.in-moto):hover img{transform:none}

/* ---------- NAVIGAZIONE FRA I SERVIZI (23/10 sera) ----------
   Mario (23/10): «serve solo un metodo più intuitivo per tornare alla home quando si è sui servizi … lo scorrere i servizi
   nella ruota pure dev'essere più semplice e intuitivo» e «anche da PC». Tre parti (genera.mjs, «navigazione fra i servizi»):
   «← Home» nella testata delle pagine interne; nell'apertura dei servizi «← Tutti i servizi» e i due vicini del cerchio sopra
   il disco; in fondo ai servizi la ruota piccola «Gli altri servizi». Movimento: --faro-ease, 0,16-0,3 s per le interazioni;
   all'arrivo da precedente o successivo gli anelli girano di un passo (0,6 s); con movimento ridotto o ?fermo=1 tutto fermo. */

/* testata: «← Home» a sinistra del logo, sempre in vista (la testata è fissa) */
.torna-home{position:relative;flex:none;display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:0 13px 0 10px;border-radius:999px;border:1px solid rgba(5,146,199,.3);background:var(--blu-chiaro);color:var(--blu-testo);font-size:14px;font-weight:650;line-height:1;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .2s var(--faro-ease),border-color .2s var(--faro-ease),transform .16s var(--faro-ease)}
.torna-home::before{content:"";position:absolute;inset:-4px -3px}
.torna-home svg{width:17px;height:17px;flex:none;transition:transform .2s var(--faro-ease)}
.torna-home:active{transform:scale(.96)}
.torna-home:focus-visible{outline:2px solid var(--blu);outline-offset:3px}
@media (hover:hover){
  .torna-home:hover{background:#D6ECF7;border-color:var(--blu)}
  .torna-home:hover svg{transform:translateX(-2px)}
}
.con-home .barra .wrap{gap:8px}
.con-home .logo{flex:0 1 132px;min-width:0}
/* al telefono stretto «Chiama» diventa solo l'icona (44 px, il nome resta per i lettori di schermo e nell'aria-label) */
@media (max-width:479.98px){
  .con-home .barra .azioni{gap:6px}
  .con-home .barra .chiama-mini{width:44px;padding:0;gap:0}
  .con-home .chiama-mini .solo-tel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .con-home .menu-btn{padding:0 11px}
}
/* sotto i 360 px resta lo scudo del logo (la parte sinistra dell'immagine), così «Home», «Chiama» e «Menù» stanno interi */
@media (max-width:399.98px){
  .barra .logo{flex:0 1 132px;min-width:0}
}
@media (max-width:359.98px){
  .con-home .menu-btn .mt{display:inline}
  .menu-btn{min-width:44px;justify-content:center}
  .con-home .logo{flex:none;width:30px;height:30px;overflow:hidden}
  .con-home .logo img{width:30px;height:30px;max-width:none;object-fit:cover;object-position:0 50%}
}
@media (min-width:900px){
  .torna-home{min-height:42px;padding:0 15px 0 12px;font-size:14.5px}
  .torna-home::before{inset:-2px}
  .con-home .barra .wrap{gap:14px}
  .con-home .logo{flex:none;width:168px}
}
@media (min-width:900px) and (max-width:1179.98px){
  .con-home .logo{width:146px}
  .con-home .nav{margin-left:18px;gap:22px}
  .con-home .chiama-mini .solo-pc{display:none}
  .con-home .chiama-mini .solo-tel{display:inline}
}

/* apertura dei servizi: «← Tutti i servizi» in cima (porta al cerchio della home) */
.rm-torna{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0 0 12px -2px;padding:0 15px 0 11px;border-radius:999px;border:1px solid rgba(92,195,234,.36);background:rgba(15,32,49,.55);color:#fff;font-size:14px;font-weight:600;line-height:1;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .2s var(--faro-ease),border-color .2s var(--faro-ease),transform .16s var(--faro-ease)}
.rm-torna svg{width:17px;height:17px;flex:none;color:var(--blu-luce);transition:transform .2s var(--faro-ease)}
.rm-torna:active{transform:scale(.97)}
.rm-torna:focus-visible{outline:2px solid var(--blu-luce);outline-offset:3px}
@media (hover:hover){
  .rm-torna:hover{border-color:var(--blu-luce);background:rgba(26,54,80,.75)}
  .rm-torna:hover svg{transform:translateX(-2px)}
}
.ap-rami .rm-testa{display:flex;flex-direction:column;align-items:flex-start}

/* i due vicini nel cerchio, sopra il disco del servizio (prima a sinistra, dopo a destra) */
.rm-albero{margin-top:76px}
.rm-vai{position:absolute;left:0;right:0;bottom:calc(100% + 16px);z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rm-vai-a{position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:52px;padding:6px 10px 6px 6px;border-radius:999px;border:1px solid rgba(92,195,234,.3);background:rgba(13,29,45,.72);color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .2s var(--faro-ease),border-color .2s var(--faro-ease),transform .16s var(--faro-ease)}
.rm-vai-a-succ{justify-content:flex-end;padding:6px 6px 6px 10px;text-align:right}
.rm-vai-a-fr{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(92,195,234,.14);color:var(--blu-luce);transition:background-color .2s var(--faro-ease),color .2s var(--faro-ease),transform .2s var(--faro-ease)}
.rm-vai-a-fr svg{width:18px;height:18px}
.rm-vai-a-t{display:grid;gap:2px;min-width:0;line-height:1.15}
.rm-vai-a-t small{font-size:11px;font-weight:600;letter-spacing:.04em;color:rgba(160,214,238,.9)}
.rm-vai-a-t b{font-size:13.5px;font-weight:650;letter-spacing:-.005em;overflow-wrap:anywhere}
.rm-vai-a:active{transform:scale(.97)}
.rm-vai-a:focus-visible{outline:2px solid var(--blu-luce);outline-offset:3px}
@media (hover:hover){
  .rm-vai-a:hover{border-color:var(--blu-luce);background:rgba(26,54,80,.85)}
  .rm-vai-a:hover .rm-vai-a-fr{background:var(--blu-luce);color:#0B1620}
  .rm-vai-a-prec:hover .rm-vai-a-fr{transform:translateX(-2px)}
  .rm-vai-a-succ:hover .rm-vai-a-fr{transform:translateX(2px)}
}
@media (max-width:359.98px){
  .rm-vai-a{gap:6px;padding-right:8px}
  .rm-vai-a-succ{padding:6px 6px 6px 8px}
  .rm-vai-a-fr{width:32px;height:32px}
  .rm-vai-a-t b{font-size:12.5px}
}
@media (min-width:900px){
  .rm-albero{margin-top:0}
  .rm-vai{right:auto;bottom:calc(100% + 26px);grid-template-columns:repeat(2,minmax(0,250px));gap:10px}
  .rm-vai-a-t small{font-size:11.5px}
  .rm-vai-a-t b{font-size:14px}
}
/* arrivo da precedente o successivo: gli anelli girano di un passo e l'icona del disco cambia girando */
html.vt-avanti:not(.statico) .rm-cerchi{animation:rm-ruota-a .6s var(--faro-ease) both}
html.vt-indietro:not(.statico) .rm-cerchi{animation:rm-ruota-i .6s var(--faro-ease) both}
@keyframes rm-ruota-a{from{rotate:36deg}}
@keyframes rm-ruota-i{from{rotate:-36deg}}
html.vt-avanti::view-transition-old(srv-nodo){animation:vt-gira-via-a .24s var(--faro-ease) both}
html.vt-avanti::view-transition-new(srv-nodo){animation:vt-gira-in-a .3s var(--faro-ease) .04s both}
html.vt-indietro::view-transition-old(srv-nodo){animation:vt-gira-via-i .24s var(--faro-ease) both}
html.vt-indietro::view-transition-new(srv-nodo){animation:vt-gira-in-i .3s var(--faro-ease) .04s both}
@keyframes vt-gira-via-a{to{opacity:0;transform:rotate(-50deg) scale(.86)}}
@keyframes vt-gira-in-a{from{opacity:0;transform:rotate(50deg) scale(.86)}}
@keyframes vt-gira-via-i{to{opacity:0;transform:rotate(50deg) scale(.86)}}
@keyframes vt-gira-in-i{from{opacity:0;transform:rotate(-50deg) scale(.86)}}

/* home: il servizio appena lasciato resta acceso qualche secondo (sito.js, «ritorno nella home»), con un'onda sola */
html:not(.statico) .cs-lasciato .cs-disco{animation:cs-lasciato 1.4s var(--faro-ease) .3s 2}
@keyframes cs-lasciato{0%{box-shadow:0 0 0 0 rgba(120,212,244,.6)}100%{box-shadow:0 0 0 18px rgba(120,212,244,0)}}
.cs-lasciato::before{opacity:1}

/* in fondo ai servizi: «Gli altri servizi», la ruota piccola coi dieci dischi del cerchio della home */
.altri{position:relative;isolation:isolate;overflow:hidden;padding:26px 0 24px;color:#fff;background-color:#0B1620;background-image:radial-gradient(70% 60% at 50% 34%,rgba(5,146,199,.22),rgba(5,146,199,0) 72%)}
.altri::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(92,195,234,.4) .8px,transparent 1.25px);background-size:22px 22px;opacity:.3;-webkit-mask-image:radial-gradient(60% 60% at 50% 40%,#000 10%,transparent 100%);mask-image:radial-gradient(60% 60% at 50% 40%,#000 10%,transparent 100%);pointer-events:none}
.altri-griglia{display:grid;justify-items:center;gap:14px}
.cs-mini{width:100%;padding:24px 0 26px}
.cs-mini .cs-anello{width:min(calc(100vw - 24px),400px)}
.cs-mini .cs-nodo::after{display:none}
.cs-mini .cs-titolo{font-size:clamp(20px,6cqi,30px)}
.cs-mini .cs-sotto{font-size:clamp(11px,2.9cqi,13px)}
/* il servizio di adesso: acceso con «Sei qui» */
.cs-qui .cs-disco{color:#fff}
.cs-qui .cs-disco::before,.cs-qui .cs-disco::after,.cs-qui::before{opacity:1}
.cs-qui .cs-nome{color:#fff}
.cs-nome em{display:block;width:max-content;margin:0 auto 3px;padding:3px 8px 4px;border-radius:999px;background:var(--blu-luce);color:#0B1620;font-size:10.5px;font-style:normal;font-weight:700;line-height:1;letter-spacing:.02em}
.altri-lato{display:grid;gap:10px;width:100%;max-width:448px}
.altri-qui{display:none}
.altri-vai{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.altri-a{position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:56px;padding:7px 10px 7px 7px;border-radius:16px;border:1px solid rgba(120,205,240,.3);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)) rgba(15,32,49,.6);color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .2s var(--faro-ease),border-color .2s var(--faro-ease),transform .16s var(--faro-ease)}
.altri-a-succ{justify-content:flex-end;padding:7px 7px 7px 10px;text-align:right}
.altri-a-fr{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(92,195,234,.14);color:var(--blu-luce);transition:background-color .2s var(--faro-ease),color .2s var(--faro-ease),transform .2s var(--faro-ease)}
.altri-a-fr svg{width:18px;height:18px}
.altri-a-t{display:grid;gap:2px;min-width:0;line-height:1.15}
.altri-a-t small{font-size:11px;font-weight:600;letter-spacing:.04em;color:rgba(160,214,238,.9)}
.altri-a-t b{font-size:14px;font-weight:650;overflow-wrap:anywhere}
.altri-a:active{transform:scale(.97)}
.altri-a:focus-visible,.altri-home:focus-visible{outline:2px solid var(--blu-luce);outline-offset:3px}
.altri-home{width:100%;min-height:52px;gap:9px;border-color:rgba(160,222,246,.32);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 58%) #0B83B3;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 28px -14px rgba(5,146,199,.95)}
.altri-home svg{width:19px;height:19px}
@media (hover:hover){
  .altri-a:hover{border-color:rgba(140,215,244,.75);background-color:rgba(26,54,80,.75)}
  .altri-a:hover .altri-a-fr{background:var(--blu-luce);color:#0B1620}
  .altri-a-prec:hover .altri-a-fr{transform:translateX(-2px)}
  .altri-a-succ:hover .altri-a-fr{transform:translateX(2px)}
  .altri-home:hover{background-color:#1092C4;transform:translateY(-1px)}
}
@media (max-width:359.98px){
  .altri-a{gap:6px;padding-right:8px}
  .altri-a-succ{padding:7px 7px 7px 8px}
  .altri-a-fr{width:32px;height:32px}
  .altri-a-t b{font-size:12.5px}
}
@media (min-width:900px){
  .altri{padding:40px 0}
  .altri-griglia{grid-template-columns:auto minmax(0,400px);justify-content:center;align-items:center;column-gap:72px}
  .cs-mini{width:auto;padding:30px 0}
  .cs-mini .cs-anello{width:420px}
  .altri-qui{display:grid;gap:8px;margin-bottom:6px}
  .altri-qui .occhiello{color:var(--blu-luce)}
  .altri-qui .occhiello::before{background:var(--blu-luce)}
  .altri-qui b{font-size:clamp(26px,2.3vw,32px);font-weight:650;letter-spacing:-.02em;line-height:1.1}
  .altri-lato{gap:12px}
  .altri-a-t b{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .torna-home,.torna-home svg,.rm-torna,.rm-torna svg,.rm-vai-a,.rm-vai-a-fr,.altri-a,.altri-a-fr,.altri-home{transition:none}
  .torna-home:active,.rm-torna:active,.rm-vai-a:active,.altri-a:active,.torna-home:hover svg,.rm-torna:hover svg,.rm-vai-a:hover .rm-vai-a-fr,.altri-a:hover .altri-a-fr,.altri-home:hover{transform:none}
  .rm-cerchi,.cs-lasciato .cs-disco{animation:none!important}
}
.statico :is(.torna-home,.torna-home svg,.rm-torna,.rm-torna svg,.rm-vai-a,.rm-vai-a-fr,.altri-a,.altri-a-fr,.altri-home){transition:none}
.statico :is(.torna-home:active,.rm-torna:active,.rm-vai-a:active,.altri-a:active,.altri-home:hover){transform:none}

/* ---------- ESEMPI DI UTILIZZO (26/10, Disinfezione: foto vere degli atomizzatori nei locali) ----------
   Griglia senza scorrimento di lato: tre colonne al telefono (due righe, meno di una schermata), sei in una riga al
   computer. Micro-movimento al passaggio del mouse: la foto si solleva e si avvicina appena (--faro-ease, 0,22-0,3 s).
   Con movimento ridotto o ?fermo=1 (classe statico) tutto fermo. */
.sv-es-testa{display:grid;gap:4px;margin-bottom:12px}
.sv-es-testa .h2-sez{margin:0}
.sv-es-testa p{max-width:62ch;color:var(--tenue);font-size:14.5px;line-height:1.45}
.sv-es-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
.sv-es{margin:0;min-width:0}
.sv-es-foto{display:block;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--carta2);box-shadow:var(--ombra);transition:transform .22s var(--faro-ease),box-shadow .22s var(--faro-ease)}
.sv-es-foto img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--faro-ease)}
.sv-es figcaption{margin-top:6px;font-size:12.5px;line-height:1.25;font-weight:600;color:var(--testo);text-wrap:balance}
@media (hover:hover){
  .sv-es:hover .sv-es-foto{transform:translateY(-2px);box-shadow:var(--ombra-su)}
  .sv-es:hover .sv-es-foto img{transform:scale(1.03)}
}
@media (min-width:900px){
  .sv-es-testa{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:6px 28px;margin-bottom:18px}
  .sv-es-testa p{font-size:15px}
  .sv-es-griglia{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
  .sv-es-foto{border-radius:14px}
  .sv-es figcaption{margin-top:8px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .sv-es-foto,.sv-es-foto img{transition:none}
  .sv-es:hover .sv-es-foto,.sv-es:hover .sv-es-foto img{transform:none}
}
.statico .sv-es-foto,.statico .sv-es-foto img{transition:none}
.statico .sv-es:hover .sv-es-foto,.statico .sv-es:hover .sv-es-foto img{transform:none}

/* CERTIFICATI E DOCUMENTI (26/10) · Mario: «se abbiamo dei certificati e non li abbiamo messi, dobbiamo metterli … anche
   se magari sono cose da cliccare e poi si apre l'immagine». Parte compatta dopo «Cosa facciamo»: copertina vera piccola,
   titolo, tipo e peso; al tocco il PDF in una scheda nuova o l'immagine nella finestra .doc-vista (sito.js). Al telefono
   due colonne (circa una schermata), al computer fino a sei per riga. Niente numeri davanti. */
.srv-doc .sv-doc-testa{display:grid;gap:4px;margin-bottom:14px}
.srv-doc .sv-doc-testa p{margin:0;color:var(--tenue);font-size:14px;line-height:1.45;max-width:62ch}
.sv-doc-griglia{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sv-doc-griglia>li{display:flex;min-width:0}
.dc{flex:1;min-width:0;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:10px;min-height:64px;padding:8px 10px 8px 8px;border:1px solid var(--linea);border-radius:12px;background:#fff;color:var(--testo);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .2s var(--faro-ease),box-shadow .2s var(--faro-ease),border-color .2s var(--faro-ease)}
.dc-cop{width:40px;aspect-ratio:3/4;border-radius:5px;overflow:hidden;background:var(--carta2);box-shadow:0 0 0 1px var(--linea)}
.dc-cop img{display:block;width:100%;height:100%;object-fit:cover}
.dc-t{display:grid;gap:3px;min-width:0;align-content:center}
.dc-t b{font-size:13px;line-height:1.28;font-weight:600;letter-spacing:-.005em;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word}
.dc-t small{font-size:11.5px;line-height:1.3;color:var(--tenue);font-variant-numeric:tabular-nums}
.dc-tag{justify-self:start;font-style:normal;font-size:10.5px;line-height:1.2;font-weight:650;letter-spacing:.03em;color:var(--blu-testo);background:var(--blu-chiaro);padding:2px 6px;border-radius:5px}
.dc-forte{border-color:var(--blu);box-shadow:inset 0 0 0 1px var(--blu)}
.dc:focus-visible,.sv-doc-link a:focus-visible{outline:2px solid var(--blu);outline-offset:2px}
.dc:active{transform:scale(.98)}
@media (hover:hover){
  .dc:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,33,46,.08);border-color:var(--linea2)}
  .dc-forte:hover{border-color:var(--blu)}
}
@media (min-width:700px){.sv-doc-griglia{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){
  .srv-doc .sv-doc-testa{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:6px 28px;margin-bottom:16px}
  .sv-doc-griglia{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .dc{grid-template-columns:44px minmax(0,1fr)}
  .dc-cop{width:44px}
}
@media (min-width:1200px){.sv-doc-griglia{grid-template-columns:repeat(var(--nc,6),minmax(0,1fr))}}
/* documenti collegati dentro le schede di «Cosa facciamo» */
.sv-doc-link{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.sv-doc-link a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--linea2);border-radius:999px;background:#fff;color:var(--blu-testo);font-size:13.5px;font-weight:600;line-height:1.2;text-decoration:none;transition:background-color .2s var(--faro-ease),border-color .2s var(--faro-ease),transform .16s var(--faro-ease)}
.sv-doc-link svg{width:16px;height:16px;flex:none}
.sv-doc-link a:active{transform:scale(.97)}
@media (hover:hover){.sv-doc-link a:hover{background:var(--blu-chiaro);border-color:var(--blu)}}
/* finestra delle immagini (sito.js la crea al primo tocco): Esc, Chiudi o tocco fuori; pagina ferma sotto */
html:has(dialog.doc-vista[open]){overflow:hidden}
.doc-vista{position:fixed;inset:0;margin:auto;width:min(1040px,calc(100% - 16px));height:min(calc(100svh - 16px),1400px);background:#fff;border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);opacity:0;transform:scale(.96);transition:opacity .22s var(--faro-ease),transform .22s var(--faro-ease)}
.doc-vista:not([open]){display:none}
.doc-vista.su{opacity:1;transform:none}
.doc-vista-testa{display:flex;align-items:center;gap:12px;padding:6px 6px 6px 16px;border-bottom:1px solid var(--linea)}
.doc-vista-testa b{flex:1;min-width:0;font-size:15px;line-height:1.3;font-weight:600}
.doc-vista-chiudi{flex:none;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--linea2);border-radius:999px;background:#fff;color:var(--testo);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s var(--faro-ease),transform .16s var(--faro-ease)}
.doc-vista-chiudi:hover{background:var(--carta)}
.doc-vista-chiudi:active{transform:scale(.97)}
.doc-vista-chiudi:focus-visible{outline:2px solid var(--blu);outline-offset:2px}
.doc-vista-corpo{overflow:auto;overscroll-behavior:contain;background:var(--carta2);padding:10px}
.doc-vista-corpo img{display:block;margin:0 auto;max-width:100%;height:auto;border-radius:4px;box-shadow:0 1px 6px rgba(20,33,46,.12)}
@media (prefers-reduced-motion:reduce){
  .dc,.sv-doc-link a,.doc-vista,.doc-vista-chiudi{transition:none}
  .dc:hover,.dc:active,.sv-doc-link a:active{transform:none}
}
.statico .dc,.statico .sv-doc-link a,.statico .doc-vista,.statico .doc-vista-chiudi{transition:none}
.statico .dc:hover,.statico .dc:active{transform:none}