@font-face{font-family:"Barlow Condensed";src:url("../assets/fonts/barlow-condensed-600-latin.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Manrope";src:url("../assets/fonts/manrope-latin.woff2") format("woff2");font-weight:400 700;font-display:swap}

/* [hidden] deve vincere sempre: senza !important, un elemento con un
   display esplicito nel foglio (.hud{display:flex}, .lab{display:grid},
   ecc.) ignora l'attributo — lo stile dell'autore batte quello nativo
   del browser anche se meno specifico. Trovato nascondendo l'hud
   dell'hero e i giochi del laboratorio: restavano visibili nonostante
   hidden="" fosse presente nel markup. */
[hidden]{display:none!important}

/* ═══ token ═══ */
:root{
  --stage:#05070b; --panel:#0b0f16; --panel-2:#111823; --alt:#080c12;
  --rule:rgba(221,231,242,.14); --rule-2:rgba(221,231,242,.08);
  --ink:#f2f4f7; --text:#c3ccd6; --muted:#7f8b98;
  --em:#14c08a; --em-bright:#4fe3b0; --em-light:#7fe3bd; --em-deep:#0a8f63;
  --em-dim:rgba(20,192,138,.14);
  /* il tono pieno, usato dove il colore e' decorazione e non testo */
  --em-vivo:#14c08a;
  /* gli stessi ruoli, calibrati per i blocchi su carta. Stanno qui e non
     dentro .sec--chiara perche' cambiare palette deve toccare un punto solo */
  --em-c:#06714f; --em-c-bright:#056347; --em-c-light:#08805a;
  --em-c-deep:#04553d; --em-c-dim:rgba(6,113,79,.10);
  --em-banda:#08805a;
  /* LA SCALA. Sette gradini per i titoli, quattro per il testo. Fuori
     da questi non si inventano altre misure: erano cinquantacinque
     dichiarazioni diverse e sullo schermo facevano trentotto corpi. */
  --d1:calc(clamp(64px,11vw,150px) * var(--sc-titoli,1));
  --d2:calc(clamp(40px,5.1vw,84px) * var(--sc-titoli,1));
  --d3:calc(clamp(34px,4.6vw,72px) * var(--sc-titoli,1));
  --d4:calc(clamp(30px,3.9vw,52px) * var(--sc-titoli,1));
  --d5:calc(clamp(24px,2.8vw,38px) * var(--sc-titoli,1));
  --d6:calc(clamp(22px,2.4vw,30px) * var(--sc-titoli,1));
  --d7:calc(clamp(19px,2vw,25px) * var(--sc-titoli,1));
  --t-lede:calc(clamp(15px,1.1vw,18px) * var(--sc-testi,1));
  --t-base:calc(17px * var(--sc-testi,1));      /* il corpo del sito */
  --t-grande:calc(17px * var(--sc-testi,1));     /* e il gradino sopra --t-corpo: sono la stessa cosa */
  --t-corpo:calc(16px * var(--sc-testi,1));
  --t-mini:calc(13px * var(--sc-testi,1));
  --t-micro:calc(11px * var(--sc-testi,1));
  --display:var(--f-titoli,"Barlow Condensed"),"Arial Narrow",sans-serif;
  --body:var(--f-testi,"Manrope"),system-ui,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,monospace;
  --gutter:clamp(20px,4.6vw,64px);
  --content:1360px;
  --bar:60px;
  --space:clamp(84px,10vw,150px);
  /* I raggi: sei ruoli, non sedici misure. Vedi la nota in
     audit/ — ogni valore qui sotto risponde a una domanda diversa
     ("quanto e' grande la cosa" e "sta dentro qualcos'altro"), e fuori
     da questi sei non se ne inventano altri. */
  --r-pill:999px;
  --r-grande:clamp(18px,2vw,28px);
  --r-card:16px;
  --r-media:12px;
  --r-min:6px;
  --r-tondo:50%;
  --r:var(--r-card);          /* il vecchio nome, tenuto per compatibilita' */
  --ease:cubic-bezier(.22,.72,.18,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 20px);color-scheme:dark;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-x:none}
body{margin:0;min-width:320px;overflow-x:hidden;background:var(--stage);color:var(--ink);
  font:400 var(--t-base)/1.62 var(--body);-webkit-font-smoothing:antialiased;overscroll-behavior-x:none}
img,canvas{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:-.028em;text-wrap:balance;margin:0;line-height:.9}
/* La riga verde dei titoli respira come la terza riga dell'hero: stessa
   sfumatura che scorre, cosi' l'accento non e' un colore fisso ma un
   piccolo segno vivo, coerente ovunque compaia nel sito. I toni sono
   sempre le variabili di contrasto gia' calibrate (mai un bianco quasi
   pieno come nell'hero, li' il fondo e' sempre scuro): qui il fondo
   cambia sezione per sezione, e questi passaggi restano leggibili su
   entrambi perche' --em-bright/--em-light/--em-deep si aggiornano da
   soli col contesto. */
h2 em,.lab__intro h3 em,.appmie__testa h3 em{font-style:normal;
  background:linear-gradient(96deg,var(--em-bright) 6%,var(--em-light) 52%,var(--em-deep) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sfumatura 4s linear infinite}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:700}
.mono{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;font-weight:600}
:focus-visible{outline:2px solid var(--em-bright);outline-offset:3px;border-radius:2px}
::selection{background:var(--em);color:var(--stage)}

.skip{position:fixed;z-index:400;top:8px;left:8px;padding:10px 14px;background:var(--em);
  color:var(--stage);font-weight:700;transform:translateY(-160%)}
.skip:focus{transform:none}

/* ═══ barra ═══ */
.bar{position:fixed;z-index:300;inset:0 0 auto;height:var(--bar);padding-inline:var(--gutter);
  display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);
  background:rgba(5,7,11,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule-2)}
.brand{font-family:var(--display);font-size:var(--d7);letter-spacing:-.04em;font-weight:600}
.brand span{color:var(--em)}
.bar__sess{color:var(--muted);white-space:nowrap}
.bar__sess b{color:var(--em);font-variant-numeric:tabular-nums}
.bar__nav{margin-left:auto;display:flex;gap:4px}
.bar__nav a{padding:6px 9px;color:var(--muted);border:1px solid transparent;border-radius:var(--r-min);transition:color .2s,border-color .2s}
/* La cifra resta, ma davanti alla parola e in sordina: serve a dire
   "sei alla terza prova", non a fare da nome. Sotto i 1200 sparisce
   lei per prima, che e' la meta' che si puo' perdere. */
.bar__nav a .n{color:var(--muted);opacity:.55;margin-right:5px}
.bar__nav a.on .n{opacity:.8}
@media(max-width:1200px){.bar__nav a .n{display:none}}
/* Misurato: sotto i 1150 la barra deborda. Si sfoltisce in ordine di
   quanto una cosa serve — prima l'etichetta della palette (i pallini si
   spiegano da soli), poi l'orologio (lo stesso numero sta nel verdetto),
   poi le voci di raccordo. Lavori e Contatto non se ne vanno mai. */
@media(max-width:1300px){.bar__pal__eti{display:none}}
@media(max-width:1150px){.bar__sess{display:none}}
@media(max-width:1080px){.bar__nav a[data-solo-largo]{display:none}}
/* Sul telefono restano le due voci che uno cerca davvero. Prima erano
   sei cifre su una riga tutta loro, e la testata veniva alta 115px su
   844: un quinto dello schermo speso in etichette che non dicevano
   niente. */
.bar__nav a:hover,.bar__nav a.on{color:var(--em);border-color:var(--em-dim)}
.bar__cta{display:flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--em);
  border-radius:var(--r-pill);color:var(--em);transition:background .2s,color .2s}
.bar__cta:hover{background:var(--em);color:var(--stage)}
@media(max-width:900px){.bar__sess,.bar__nav{display:none}.bar__cta{margin-left:auto}}

/* ═══ hero ═══ */
.hero{position:relative;min-height:100svh;isolation:isolate;overflow:hidden;
  display:grid;align-content:center;
  padding:calc(var(--bar) + 40px) var(--gutter) 210px}
#gl{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:ew-resize;z-index:0}
.hero__fallback{position:absolute;inset:auto var(--gutter) 40% var(--gutter);text-align:center;
  color:var(--muted);display:none}
.no-gl #gl{display:none}
.no-gl .hero__fallback{display:block}
.no-gl .hero{background:radial-gradient(circle at 72% 30%,color-mix(in srgb,var(--em) 16%,transparent),transparent 55%),var(--stage)}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(5,7,11,.96) 0%,rgba(5,7,11,.88) 30%,rgba(5,7,11,.4) 47%,transparent 62%),
             linear-gradient(0deg,rgba(5,7,11,.92) 0%,transparent 30%)}
.hero__scan{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;mix-blend-mode:soft-light;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 1px,transparent 1px 3px)}
/* min-width:0 serve da quando l'eroe contiene la vetrina. .hero e' una
   griglia, e una griglia dimensiona la colonna sul contenuto MINIMO dei
   figli: quattro copertine da 92px piu' gli spazi fanno 392px, e su un
   telefono da 390 quel numero diventava la larghezza di tutto il
   contenitore. Il paragrafo del titolo finiva due parole fuori
   schermo, tagliato di netto. Con min-width:0 la colonna torna a
   obbedire alla larghezza dichiarata e la fila scorre dentro se stessa. */
.hero__content{position:relative;z-index:2;min-width:0;
  width:min(100%,var(--content));margin-inline:auto}
.hero__content>*{max-width:min(100%,47vw)}
@media(max-width:900px){.hero__content>*{max-width:100%}}
.hero h1{font-size:var(--d2);line-height:.87;margin:0}
.hero h1 span{display:block;opacity:0;transform:translateY(.2em);animation:rise .85s var(--ease) forwards}
.hero h1 span:nth-child(1){animation-delay:.12s}
.hero h1 span:nth-child(2){animation-delay:.24s;color:#b9c1cb}
/* La sfumatura scorre piano, in loop, oltre all'ingresso che gia'
   aveva: due animazioni sullo stesso elemento, separate da virgola —
   "rise" (una volta, l'entrata) e "sfumatura" (per sempre, il respiro
   del gradiente). background-size piu' largo del testo da' lo spazio
   in cui far scorrere background-position. */
.hero h1 span:nth-child(3){
  animation:rise .85s var(--ease) .36s forwards, sfumatura 4s linear infinite;
  background:linear-gradient(96deg,#f4fbf8 6%,var(--em-light) 52%,var(--em-deep) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes sfumatura{0%{background-position:220% 50%}100%{background-position:0% 50%}}
@keyframes rise{to{opacity:1;transform:none}}
.hero__punti{margin:clamp(18px,3vh,32px) 0 0}
.hero__punto{display:flex;gap:12px;align-items:flex-start}
.hero__punto+.hero__punto{margin-top:.75em}
.hero__punto__icona{flex:none;width:32px;height:32px;margin-top:.15em;color:var(--em-vivo)}
/* Le scintille (l'accento "AI" su ogni icona) respirano appena: non
   e' un effetto da notare, e' un dettaglio da sentire con la coda
   dell'occhio. transform-origin center perche' senza, in SVG, ogni
   forma scala dal proprio angolo in alto a sinistra invece che dal
   centro — sembrerebbe scivolare, non pulsare. */
@keyframes scintilla{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
.icona__scintilla{transform-origin:center;animation:scintilla 2.2s ease-in-out infinite}
.hero__copy{margin:0;color:var(--text);font-size:var(--t-lede);
  text-transform:uppercase;line-height:1.3;
  opacity:0;animation:rise .85s .5s var(--ease) forwards}
.hero__copy__mark{color:#fff}
.hero__actions{margin-top:clamp(22px,3.4vh,36px);display:flex;flex-wrap:wrap;gap:10px;
  opacity:0;animation:rise .85s .62s var(--ease) forwards}

.eyebrow{display:flex;align-items:center;gap:9px;color:var(--em);margin:0 0 clamp(16px,2.6vh,30px);
  font-size:var(--t-mini)}
.eyebrow i{width:10px;height:10px;border-radius:var(--r-tondo);background:var(--em);flex:none;
  animation:ping 2.6s ease-out infinite}
.eyebrow .n{color:var(--muted);padding-right:9px;margin-right:2px;border-right:1px solid var(--rule)}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--em) 50%,transparent)}70%,100%{box-shadow:0 0 0 15px transparent}}

.read{position:absolute;z-index:2;right:var(--gutter);top:calc(var(--bar) + 32px);
  width:min(300px,40vw);text-align:right;pointer-events:none}
.read .mono{color:var(--muted);display:block;margin-bottom:6px}
.read p{margin:0;color:var(--em-light);font-family:var(--mono);font-size:var(--t-mini);line-height:1.65;min-height:3.3em}
.read p::after{content:"▌";color:var(--em);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media(max-width:900px){.read{display:none}}

.hud{position:absolute;z-index:2;left:0;right:0;bottom:64px;padding:12px var(--gutter) 14px;
  display:flex;align-items:flex-end;gap:clamp(12px,3vw,44px);flex-wrap:wrap;
  border-top:1px solid var(--rule);background:linear-gradient(0deg,rgba(5,7,11,.92),transparent)}
/* La riga che manca in ogni versione precedente: prima dei numeri,
   a chiare lettere, cosa fare e cosa succede. I numeri restano —
   provano che non e' un video — ma non sono piu' la prima cosa che
   si legge. */
.hud__istruzione{flex:1 1 100%;margin:0 0 2px;color:var(--ink);
  font-family:var(--mono);font-size:var(--t-mini);font-weight:600}
.hud__istruzione b{color:var(--em);font-weight:700}
.hud dl{margin:0;display:flex;gap:clamp(12px,2.4vw,34px);flex-wrap:wrap}
.hud dt{color:var(--muted);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.hud dd{margin:0;font-family:var(--mono);font-size:var(--t-mini);font-weight:700;font-variant-numeric:tabular-nums}
.hud dd.on{color:var(--em)}
/* Erosione e Frame provano che il disegno e' calcolato dal vivo, ma
   non aiutano a capire l'idea: restano, piu' piccoli e piu' spenti,
   invece di pesare quanto Direzione umana / Sistema AI / Scena. */
.hud .hud__extra dt,.hud .hud__extra dd{opacity:.5;font-size:var(--t-micro)}
.hud__hint{margin-left:auto;color:var(--muted);white-space:nowrap}
.hud__hint b{color:var(--em)}
@media(max-width:760px){.hud__hint{display:none}}
.rail{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:142px;height:2px;background:var(--rule)}
.rail i{position:absolute;inset:0 auto 0 0;width:50%;background:var(--em);box-shadow:0 0 12px color-mix(in srgb,var(--em) 70%,transparent)}
.rail b{position:absolute;top:50%;left:50%;width:11px;height:11px;border-radius:var(--r-tondo);
  background:var(--em-bright);transform:translate(-50%,-50%);box-shadow:0 0 0 4px color-mix(in srgb,var(--em) 16%,transparent)}
/* "Tu" e "Sistema" agli estremi: il bersaglio del trascinamento si
   legge senza dover leggere niente sotto. Il resto della HUD sta su un
   velo scuro sfumato (.hud{background:linear-gradient(...)}) che gli
   regala il contrasto gratis; il rail sta a nudo sopra la scena WebGL
   in movimento, dove lo stesso grigio misurava 4.35:1 — sotto la
   soglia AA per 4,5:1. Un fondo proprio, non un colore piu' chiaro,
   perche' deve reggere su qualunque fotogramma della scena, non solo
   su quello misurato. */
.rail__capo{position:absolute;bottom:8px;padding:2px 7px;border-radius:4px;
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:rgba(5,7,11,.62)}
.rail__capo--tu{left:0}
.rail__capo--ai{right:0}


/* ═══════════════════════════════════════════════════════════════════
 * LA VETRINA — quattro lavori veri nella prima schermata
 *
 * Misurato prima: la sezione dei lavori cominciava al 25% di una pagina
 * alta 27.000 px. Su un telefono sono dodici schermate. Chi apriva il
 * sito vedeva un titolo, sette righe e un fondo astratto — e se ne
 * andava senza aver visto niente di fatto.
 *
 * Le copertine sono 3:4 e non quadrate perche' tre delle quattro nascono
 * verticali: il quadrato le avrebbe tagliate nel punto dove sta il
 * soggetto. Sono 132 px su schermo e 264 nel file, per gli schermi fitti.
 *
 * La fila scorre di lato quando non ci sta: su 320px quattro copertine
 * da 132 non entrano, e stringerle fino a farle entrare le renderebbe
 * illeggibili — che e' l'unica cosa che non devono essere.
 * ═══════════════════════════════════════════════════════════════════ */
/* Sta PRIMA dei bottoni, e non e' un dettaglio di impaginazione.
   Messa dopo, il suo fondo cadeva a 904px su uno schermo da 900: la
   striscia restava fuori dalla prima schermata, cioe' non faceva la sola
   cosa per cui esiste. Messa prima entra tutta, e l'ordine del discorso
   migliora: titolo, che faccio, ecco quattro cose che ho fatto, adesso
   parliamone. I bottoni chiedono qualcosa dopo aver dato qualcosa. */
.vetrina{margin-top:clamp(20px,2.6vh,30px);margin-bottom:2px;min-width:0}
.vetrina__eti{margin:0 0 10px;color:var(--muted)}
/* min-width:0 non e' ornamentale. Quattro copertine da 92px piu' i tre
   spazi fanno 392px di larghezza minima, e senza questa riga quel 392
   diventa il pavimento di tutto il contenitore dell'eroe: su un telefono
   da 390 il paragrafo del titolo finiva due parole fuori dallo schermo,
   tagliato. La fila deve scorrere dentro se stessa, non allargare chi la
   contiene. */
.vetrina__fila{display:flex;gap:clamp(8px,1vw,14px);min-width:0;
  overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.vetrina__fila::-webkit-scrollbar{display:none}
/* Con JavaScript la fila non scorre piu' da sola: la muove un binario
   che gira in tondo (app.js). Il margine sopra e sotto lascia posto al
   sollevamento al passaggio e al contorno del fuoco, che overflow:hidden
   altrimenti taglierebbe; la sfumatura ai lati dice che il giro continua. */
.vetrina__fila--giro{display:block;overflow:hidden;touch-action:pan-y;cursor:grab;
  padding:6px 0 4px;margin:-6px 0 -4px;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
.vetrina__fila--tira{cursor:grabbing}
.vetrina__fila--tira .vetrina__caso{pointer-events:none}
.vetrina__fila--giro img{-webkit-user-drag:none}
.vetrina__binario{display:flex;gap:clamp(8px,1vw,14px);width:max-content;will-change:transform}
.vetrina__caso{flex:none;width:clamp(92px,8.4vw,124px);display:flex;flex-direction:column;gap:5px;
  transition:transform .22s var(--ease)}
.vetrina__caso img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--r-min);border:1px solid var(--rule);
  transition:border-color .22s,filter .22s}
/* I due marchi (loghi su fondo chiaro) non sono foto piene come le
   altre due copertine: mostrarli a tutto riquadro con object-fit:cover
   li faceva sembrare ritagli bianchi incollati nella stessa fila.
   Qui il logo resta intero (contain) su un fondo scuro coerente col
   resto della vetrina, cosi' le quattro copertine sembrano la stessa
   famiglia invece di due linguaggi diversi. */
.vetrina__caso--marchio img{object-fit:cover;background:var(--panel-2)}
/* Due righe riservate al nome anche quando ne basta una: "Locanda del
   Castello" va a capo e le altre tre no, e senza questo le etichette
   sotto partivano da quattro quote diverse. */
.vetrina__caso b{color:var(--ink);font-size:var(--t-mini);font-weight:600;line-height:1.2;
  min-height:2.4em}
/* 11px e non 9,5: il foglio dichiara 11px come pavimento tipografico
   della UI, e le prime quattro etichette che ho scritto lo sfondavano.
   Lo spazio c'era: la striscia finiva a 825px su uno schermo da 900. */
.vetrina__caso span{color:var(--muted);font-size:var(--t-micro);letter-spacing:.08em}
.vetrina__caso:hover{transform:translateY(-3px)}
.vetrina__caso:hover img{border-color:var(--em);filter:brightness(1.06)}
.vetrina__caso:focus-visible{outline:2px solid var(--em-bright);outline-offset:4px;
  border-radius:var(--r-media)}
@media (prefers-reduced-motion:reduce){
  .vetrina__caso,.vetrina__caso:hover{transition:none;transform:none}
}

/* La quinta copertina non e' una foto: e' una finestra di browser in
   miniatura, perche' quel caso e' un sito vero e non una campagna —
   l'unica cosa onesta da mostrare qui e' la sua stessa cornice. */
.vetrina__finto{display:flex;flex-direction:column;width:100%;aspect-ratio:3/4;
  border-radius:var(--r-min);border:1px solid var(--rule);overflow:hidden;
  background:linear-gradient(160deg,#f1eefa 0%,#ded4f4 100%);
  transition:border-color .22s,filter .22s}
.vetrina__finto i{display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#cabdda;margin:8px 0 0 7px}
.vetrina__finto i:first-child{margin-left:7px}
.vetrina__finto i + i{margin-left:4px}
.vetrina__finto em{display:block;margin:5px 7px 0;padding:3px 7px;border-radius:5px;
  background:rgba(255,255,255,.7);color:#5c4a80;font-style:normal;
  font-family:var(--mono);font-size:7px;letter-spacing:.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.vetrina__finto b{flex:1;display:grid;place-items:center;margin:6px;border-radius:4px;
  background:#140b28;color:#a78bfa;font-family:var(--display);font-size:15px;
  line-height:1.05;text-align:center;letter-spacing:-.01em}
.vetrina__caso--sito:hover .vetrina__finto{border-color:var(--em);filter:brightness(1.04)}
/* ═══ sezioni ═══ */
.sec{position:relative;padding:var(--space) var(--gutter);
  width:100%;}
.sec>*{width:min(100%,var(--content));margin-inline:auto}
.sec--alt{background:var(--alt)}
.sec__head{margin-bottom:clamp(34px,5vw,64px)}
.sec__head h2{font-size:var(--d3)}
.sec__lede{margin-top:clamp(16px,2vw,24px);max-width:60ch;color:var(--text);font-size:var(--t-lede)}

/* ═══ bottoni ═══ */
/* Ogni bottone del sito respira come il CTA del manifesto: un battito
   leggero che dice "premimi" senza dover aspettare l'hover — si ferma
   proprio quando ci si passa sopra, perche' a quel punto il messaggio
   e' arrivato. */
.btn{display:inline-flex;align-items:center;gap:14px;padding:13px 20px;border:1px solid var(--rule);
  border-radius:var(--r-pill);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;cursor:pointer;background:transparent;transition:border-color .2s,background .2s,color .2s,transform .15s;
  animation:btn-respiro 2.6s ease-in-out infinite}
@keyframes btn-respiro{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--em) 0%,transparent)}
  50%{transform:scale(1.04);box-shadow:0 0 16px 4px color-mix(in srgb,var(--em) 45%,transparent)}}
.btn:hover{border-color:var(--em);color:var(--em);animation:none}
/* Due bottoni vicini non respirano in coro: se si gonfiano insieme
   sembra un batticuore solo, innaturale. Sfasati di mezzo ciclo, uno
   si allarga mentre l'altro si restringe — come due persone vere. */
.btn:nth-child(even){animation-delay:1.3s}
.btn:active{transform:scale(.985)}
.btn--solid{background:var(--em);border-color:var(--em);color:#04231a}
.btn--solid:hover{background:var(--em-bright);border-color:var(--em-bright);color:#04231a}
.btn--sm{padding:6px 10px;font-size:var(--t-micro);gap:10px}
.btn--lg{padding:17px 26px;font-size:var(--t-mini)}
.btn i{font-style:normal;font-size:var(--t-grande)}
/* questo tasto non deve respirare/pulsare come gli altri */
.fmtEdit__rigenera{animation:none}

/* ═══ banchi ═══ */
.bench{display:grid;gap:clamp(20px,2.6vw,38px);align-items:start}
@media(min-width:1000px){.bench{grid-template-columns:minmax(0,1.42fr) minmax(300px,.58fr)}}
.bench__stage{margin:0;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:#06090e}
.bench__stage canvas{width:100%;height:auto;cursor:crosshair}
.bench__stage figcaption{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;
  border-top:1px solid var(--rule);color:var(--muted);font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.bench__stage figcaption span:first-child{color:var(--em)}
.bench__panel{border:1px solid var(--rule);border-radius:var(--r);background:var(--panel);padding:clamp(18px,2vw,26px)}
.bench__panel h3{font-size:var(--d6);margin-bottom:.5em}
.bench__panel p{color:var(--text);font-size:var(--t-corpo);line-height:1.6}
.bench__acts{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}

.ctl{display:block;margin:12px 0 0}
.ctl>.mono{color:var(--muted);display:block;margin-bottom:4px}
.ctl output{display:block;margin-top:2px;color:var(--em);font-variant-numeric:tabular-nums}
/* margin:0 e non il 2px del browser: con width:100% la leva finiva
   2px oltre il bordo destro della sua etichetta e 2px dentro a
   sinistra, quindi non era in squadro ne' con la scritta sopra ne'
   col valore sotto. Misurato su ogni banco, a ogni larghezza. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;
  margin:0;background:transparent;cursor:ew-resize}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--em) 0 var(--v,50%),rgba(221,231,242,.16) var(--v,50%) 100%)}
input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:rgba(221,231,242,.16)}
input[type=range]::-moz-range-progress{height:3px;border-radius:2px;background:var(--em)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7.5px;
  border-radius:var(--r-tondo);background:var(--em-bright);box-shadow:0 0 0 4px color-mix(in srgb,var(--em) 16%,transparent)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:var(--r-tondo);
  background:var(--em-bright);box-shadow:0 0 0 4px color-mix(in srgb,var(--em) 16%,transparent)}

.decis{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule-2)}
.decis>.mono{color:var(--muted);display:block;margin-bottom:10px}
.decis ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.decis li{display:flex;gap:9px;color:var(--text);font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.04em;line-height:1.5}
.decis li::before{content:"▸";color:var(--em);flex:none}
.decis li b{color:var(--em-light);font-weight:700}

/* formati */
.formats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end}
.formats figure{margin:0;border:1px solid var(--rule);border-radius:var(--r-media);overflow:hidden;background:#06090e}
.formats canvas{width:100%;height:auto;display:block}
/* flex-wrap perche' sotto i ~110px di colonna "Instagram" e "Post" non
   ci stanno sulla stessa riga: misurato, sbordavano di 3px. Andando a
   capo la didascalia diventa di due righe invece che tagliata. */
.formats figcaption{padding:8px 10px;border-top:1px solid var(--rule);color:var(--muted);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px}
.formats figcaption b{color:var(--em)}

/* Ogni riquadro si apre per scriverci il proprio testo: deve capirsi
   guardandolo, non solo provando a cliccare a caso. Bottone vero (non
   la figura con un click appiccicato sopra), cursore, un rialzo al
   passaggio del dito e un'etichetta "Modifica" che compare sopra il
   fermo immagine — la stessa lingua visiva di "cosa faccio nel
   dettaglio" nelle schede dei servizi. */
.fmt__tasto{all:unset;display:block;position:relative;cursor:pointer;
  border-radius:var(--r-media);transition:transform .2s var(--ease)}
.fmt__tasto:hover,.fmt__tasto:focus-visible{transform:translateY(-3px)}
.fmt__tasto:hover figure,.fmt__tasto:focus-visible figure{border-color:var(--em)}
.fmt__tasto:focus-visible{outline:2px solid var(--em-bright);outline-offset:3px}
.fmt__hint{position:absolute;inset:0;border-radius:var(--r-media);
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(6,9,14,.72);color:#fff;opacity:0;transition:opacity .2s var(--ease);
  font-family:var(--mono);font-size:var(--t-mini);letter-spacing:.1em;text-transform:uppercase;
  pointer-events:none}
.fmt__hint i{width:16px;height:16px;flex:none;font-style:normal}
.fmt__tasto:hover .fmt__hint,.fmt__tasto:focus-visible .fmt__hint{opacity:1}
@media(hover:none){
  /* senza un dito che passa sopra senza toccare, l'invito resta visibile
     appena un poco per dire che si tocca, non un lampo su ogni tap */
  .fmt__hint{opacity:.85;background:linear-gradient(0deg,rgba(6,9,14,.75) 0 34px,transparent 34px);
    align-items:flex-end;padding-bottom:8px;font-size:9px}
}

/* deck lavori */
.deck{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.work{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--panel);
  display:flex;flex-direction:column}
.work canvas{width:100%;height:auto;background:#06090e}
.work__meta{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule);
  color:var(--muted);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase}
.work__meta b{color:var(--em)}
/* flex e non grid: la carta si allunga per pareggiare la riga, e una
   griglia distribuisce l'altezza in piu' fra le righe — nella carta
   stretta di un'impaginazione 8+4 si apriva un vuoto fra il titolo e
   il testo. In colonna flessibile le righe restano alte quanto
   servono e l'avanzo va tutto nel margine automatico del seed, che
   e' dove lo volevo. */
.work__body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.work__body h3{font-size:var(--d7)}
.work__body p{color:var(--text);font-size:var(--t-corpo);line-height:1.55;margin:0}
.work__seed{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;
  padding-top:12px;border-top:1px solid var(--rule-2);color:var(--muted);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase}

/* pipeline */
.pipe{margin:0;padding:0;list-style:none;display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
@media(min-width:900px){.pipe{grid-template-columns:repeat(5,1fr)}}
.pipe li{background:var(--panel);padding:22px 18px 18px;display:grid;gap:8px;align-content:start;
  transition:background .4s var(--ease)}
.pipe li b{color:var(--muted);transition:color .4s}
.pipe li h3{font-size:var(--d7)}
.pipe li p{color:var(--text);font-size:var(--t-corpo);line-height:1.55;margin:0}
.pipe__st{margin-top:10px;color:var(--muted);font-size:var(--t-micro)}
.pipe li.on{background:var(--panel-2)}
.pipe li.on b,.pipe li.on .pipe__st{color:var(--em)}
.pipe li.done .pipe__st{color:var(--em-light)}

/* modalità radar */
.modes{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.modes button{padding:9px 15px;border:1px solid var(--rule);border-radius:var(--r-pill);background:transparent;
  color:var(--muted);cursor:pointer;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;transition:.2s}
.modes button:hover{border-color:var(--em);color:var(--em)}
.modes button[aria-pressed=true]{background:var(--em);border-color:var(--em);color:var(--stage)}

/* grafo */
.graph{position:relative;min-height:340px;padding:20px;display:grid;gap:12px}
@media(min-width:640px){.graph{grid-template-columns:repeat(5,1fr);align-items:center}}
.node{border:1px solid var(--rule);border-radius:var(--r-min);background:var(--panel-2);padding:12px 12px 13px;
  display:grid;gap:5px;transition:border-color .3s,background .3s,box-shadow .3s}
.node .mono{color:var(--muted);font-size:var(--t-micro)}
.node b{font-family:var(--display);font-size:var(--t-grande);text-transform:uppercase;letter-spacing:-.02em}
.node span.out{color:var(--muted);font-family:var(--mono);font-size:var(--t-micro);min-height:1.4em}
.node.run{border-color:var(--em);background:color-mix(in srgb,var(--em) 10%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--em) 12%,transparent)}
.node.ok{border-color:var(--em-deep)}
.node.ok span.out{color:var(--em-light)}
.node.human{border-style:dashed}
.node.human b{color:var(--em-light)}

/* lab */
.lab{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.lab__card{border:1px solid var(--rule);border-radius:var(--r);background:var(--panel);padding:18px;
  display:grid;gap:8px;align-content:start;transition:border-color .3s,transform .3s}
.lab__card:hover{border-color:var(--em);transform:translateY(-3px)}
.lab__card .mono{color:var(--muted)}
.lab__card i{font-style:normal;font-size:var(--d7);color:var(--em);line-height:1}
.lab__card h3{font-size:var(--d7)}
.lab__card p{color:var(--muted);margin:0;font-size:var(--t-micro)}
/* I quattro titoli del laboratorio devono partire alla stessa altezza.
   L'etichetta sopra ("03 · Danza delle correnti") e' piu' lunga in una
   carta che nelle altre e sotto i ~230px di colonna va a capo: misurato
   a 1024px, i titoli si sfalsavano di 18px — e succedeva gia' con
   l'impaginazione di partenza, non solo cambiandola.

   Con subgrid le quattro carte prendono le righe dalla griglia che le
   contiene invece di averne una propria: la riga dell'etichetta e' alta
   quanto la piu' alta di tutte, e i titoli tornano in linea. Il row-gap
   va riscritto perche' altrimenti una sottogriglia eredita la gronda
   del genitore, che qui e' il doppio. Dove subgrid non c'e', resta
   com'era: nessuna regola da riscrivere. */
@supports (grid-template-rows: subgrid){
  .lab[data-gr] > .lab__card{grid-template-rows:subgrid;grid-row:span 4;row-gap:8px}
}

.lab__note{margin-top:20px;color:var(--muted);font-size:var(--t-corpo);max-width:62ch}

/* ── LE ISTRUZIONI ────────────────────────────────────────────────
   Sei voci che dicono cosa si puo' toccare in questa pagina. Stanno
   sulle dodici colonne come tutti gli altri gruppi — due per riga di
   partenza — quindi si spostano e si reimpaginano anche loro: la
   sezione che spiega che si puo' spostare tutto sarebbe la sola cosa
   ferma della pagina, e sarebbe una figura magra. */
.istruzioni{list-style:none;margin:26px 0 0;padding:0}
.istruzioni li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;
  align-content:start;padding:17px 19px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--panel)}
.istruzioni b{grid-row:1/4;padding-top:5px;color:var(--em);
  font-size:var(--t-micro);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.istruzioni h3{margin:0;font-size:var(--t-grande);letter-spacing:-.01em;line-height:1.15}
.istruzioni p{margin:0;color:var(--text);font-size:var(--t-corpo);line-height:1.55}
.istruzioni em{font-style:normal;color:var(--em);font-family:var(--mono);font-size:var(--t-mini)}
.istruzioni__nota{margin:24px 0 0;color:var(--muted);font-size:var(--t-corpo);line-height:1.6;max-width:66ch}
@media (max-width:760px){
  .istruzioni li{padding:15px 16px}
  .istruzioni h3{font-size:var(--t-grande)}
}

/* verdetto */
.sec--verdict{background:linear-gradient(180deg,var(--alt),var(--stage))}
.dossier{border:1px solid var(--em-deep);border-radius:var(--r);background:var(--panel);overflow:hidden}
.dossier__head{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--rule);color:var(--em)}
.dossier__grid{margin:0;padding:20px 18px;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-bottom:1px solid var(--rule-2)}
.dossier__grid dt{color:var(--muted);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:5px}
.dossier__grid dd{margin:0;font-family:var(--display);font-size:var(--d7);line-height:1;color:var(--em);
  font-variant-numeric:tabular-nums}
/* max-width in ch e non in px: il tetto e' in BATTUTE, che e' l'unita'
   in cui si legge. A tutta larghezza questo verdetto arrivava a 149
   battute per riga — oltre le ~85 l'occhio perde il capo riga e
   rilegge la stessa. Misurato da audit/amichevole.mjs. */
.dossier__verdict{margin:0;padding:18px;max-width:64ch;color:var(--text);font-size:var(--t-grande);line-height:1.6;
  border-bottom:1px solid var(--rule-2)}
.dossier__list{margin:0;padding:14px 18px;list-style:none;display:grid;gap:7px}
.dossier__list li{display:flex;gap:10px;color:var(--muted);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.05em}
.dossier__list li::before{content:"○";color:var(--muted)}
.dossier__list li.seen{color:var(--text)}
.dossier__list li.seen::before{content:"●";color:var(--em)}
.dossier .bench__acts{padding:0 18px 20px}

.metrics{margin-top:26px;border:1px solid var(--rule);border-radius:var(--r);background:var(--panel);padding:20px 18px}
.metrics>.mono{color:var(--muted);display:block;margin-bottom:16px}
.metrics dl{margin:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.metrics dt{color:var(--muted);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:4px}
.metrics dd{margin:0;font-family:var(--mono);font-size:var(--t-grande);font-weight:700;color:var(--em);
  font-variant-numeric:tabular-nums}
.metrics__note{margin:18px 0 0;color:var(--muted);font-size:var(--t-mini);line-height:1.6;max-width:66ch}

/* contatto */
/* Il contatto adesso contiene anche il brief: il titolone da 84px
   andava bene quando sotto non c'era niente, qui diventa il capo di una
   sezione che ha dentro un modulo. */
.sec--contact{text-align:left;padding-block:var(--space)}
.brief__capo{margin:0 0 clamp(18px,2vw,26px)}
.brief__capo h3{font-size:var(--d6);letter-spacing:-.02em;line-height:1.08;
  margin:0 0 10px}
#contatto .brief{margin-top:clamp(30px,4vw,52px)}
.sec--contact h2{font-size:var(--d2);max-width:18ch;margin-bottom:clamp(26px,4vw,44px)}
.foot{margin-top:clamp(50px,8vw,90px);padding-top:18px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted)}
/* L'indirizzo e' l'unica cosa del piede che uno deve poter prendere:
   sta a sinistra, dove l'occhio torna, ed e' l'unico pezzo che non ha
   il colore della cenere. */
.foot__posta{color:var(--em);font-size:var(--t-mini);letter-spacing:.06em;text-transform:none;
  /* e' l'unico collegamento del piede e l'ultima cosa cliccabile della
     pagina: il dito deve prenderlo. Da solo era alto 22px. */
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid transparent;transition:border-color .2s}
.foot__posta:hover{border-bottom-color:var(--em)}
.sec--chiara .foot__posta{color:var(--em-c)}
.sec--chiara .foot__posta:hover{border-bottom-color:var(--em-c)}

/* Il tasto della posta e' il primo del riepilogo: pieno, mentre la
   copia resta di contorno. Prima l'unica uscita era la copia, e non
   portava da nessuna parte. */
.brief__posta{display:inline-flex;align-items:center;gap:9px;
  padding:13px 20px;border-radius:var(--r-pill);background:var(--em-banda);color:#fff;
  font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;transition:filter .2s}
.brief__posta:hover{filter:brightness(1.12)}
.brief__posta i{font-style:normal}

/* ═══ voce di sistema ═══
   Il testo che il sito si narra (say(), decine di punti in app.js) resta
   vivo per chi usa uno screen reader — aria-live continua a leggerlo —
   ma non occupa piu' spazio a video: quel posto in basso ora e' del
   menu di navigazione. Stessa tecnica del resto del sito per il testo
   solo-per-lettori: dimensione 1px, tagliato, mai display:none (che
   toglierebbe l'annuncio invece di limitarsi a nasconderlo alla vista). */
.voice{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ═══ dock di navigazione ═══
   Prende il posto in basso che era della voce: sempre visibile, anche
   sotto i 900px dove la barra in alto si nasconde — è l'unico modo per
   saltare fra le sezioni da telefono senza risalire in cima. */
.navdock{position:fixed;z-index:290;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;gap:2px;padding:3px 18px;border-radius:var(--r-pill);
  background:rgba(8,12,18,.88);backdrop-filter:blur(14px);
  border:1px solid var(--em-dim);
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.4) inset;
  max-width:calc(100vw - 24px);overflow:hidden}
/* il filo di luce che scorre da un capo all'altro, come uno scanner */
.navdock::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent 42%,
    color-mix(in srgb,var(--em-light) 55%,transparent) 50%,transparent 58%);
  background-size:260% 100%;animation:navdock-scan 4.6s linear infinite}
@keyframes navdock-scan{0%{background-position:140% 0}100%{background-position:-140% 0}}
/* le staffe agli angoli, come un mirino */
.navdock::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  --b:1px solid color-mix(in srgb,var(--em) 70%,transparent);
  background:
    linear-gradient(var(--b),var(--b)) 0 0/10px 1px no-repeat,
    linear-gradient(var(--b),var(--b)) 0 0/1px 7px no-repeat,
    linear-gradient(var(--b),var(--b)) 100% 0/10px 1px no-repeat,
    linear-gradient(var(--b),var(--b)) 100% 0/1px 7px no-repeat,
    linear-gradient(var(--b),var(--b)) 0 100%/10px 1px no-repeat,
    linear-gradient(var(--b),var(--b)) 0 100%/1px 7px no-repeat,
    linear-gradient(var(--b),var(--b)) 100% 100%/10px 1px no-repeat,
    linear-gradient(var(--b),var(--b)) 100% 100%/1px 7px no-repeat;
  opacity:.85}
.navdock a{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--r-pill);color:var(--muted);text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  transition:color .2s var(--ease),text-shadow .2s var(--ease)}
.navdock a svg{width:25px;height:25px;animation:navdock-respiro 3.4s ease-in-out infinite;
  transition:filter .2s var(--ease)}
.navdock a:nth-child(2) svg{animation-delay:.4s}
.navdock a:nth-child(3) svg{animation-delay:.8s}
.navdock a:nth-child(4) svg{animation-delay:1.2s}
.navdock a:nth-child(5) svg{animation-delay:1.6s}
.navdock a:nth-child(6) svg{animation-delay:2s}
@keyframes navdock-respiro{0%,100%{opacity:.85}50%{opacity:1}}
/* si illumina solo il loghino e la scritta, mai uno sfondo dietro:
   :hover/:focus-visible per chi ci passa sopra, .navdock a--qui per la
   voce della sezione che si sta guardando in questo momento */
.navdock a:hover,.navdock a:focus-visible,.navdock a.qui{color:var(--em-light);
  text-shadow:0 0 10px color-mix(in srgb,var(--em-light) 70%,transparent)}
.navdock a:hover svg,.navdock a:focus-visible svg,.navdock a.qui svg{
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--em-light) 80%,transparent))}
.navdock a:focus-visible{outline:2px solid var(--em-bright);outline-offset:2px}
@media (max-width:460px){
  .navdock{gap:1px;padding:6px 10px}
  .navdock a{padding:6px 5px;font-size:11px;letter-spacing:0}
  .navdock a svg{width:21px;height:21px}
}
@media (prefers-reduced-motion:reduce){
  .navdock,.navdock::before,.navdock a svg{animation:none}
}
/* Il nastro e' fisso e non occupa spazio nel flusso: senza questo, la
   fine della pagina gli scorre sotto e le ultime righe si leggono da
   dietro un vetro. Tiene da parte la propria altezza piu' il suo stacco
   dal bordo. */
#main{padding-block-end:0}
@media(max-width:620px){#main{padding-block-end:0}}

/* ═══ reveal ═══ */
.rv{opacity:0;transform:translateY(14px)}
.rv.in{opacity:1;transform:none;
  transition:opacity .9s var(--ease),transform .9s var(--ease)}

/* I titoli dentro un blocco che si rivela non si limitano a salire col
   resto: si scoprono da sinistra, come una tenda che si apre — cosi' il
   titolo si nota anche quando il blocco intorno e' quasi tutto testo,
   dove il solo salire di 22px passa inosservato (soprattutto su
   schermi stretti, dove il blocco e' gia' quasi a fuoco quando entra). */
.sec__head h2,.sec__head h3,
.union__testa h3,.eso__testa h3,.locanda__testa h3,.cest__testa h3,.appmie__testa h3{
  clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease) .1s}
.sec__head.in h2,.sec__head.in h3,
.union__testa.in h3,.eso__testa.in h3,.locanda__testa.in h3,.cest__testa.in h3,.appmie__testa.in h3{
  clip-path:inset(0 0 0 0)}

/* ═══ micro-interazioni leggere · schede e riquadri senza hover ═══
   Stessa grammatica del resto del sito: solo transform+opacity/colore,
   niente proprietà che scatenano layout. */
.appmie__card,.stack__group{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.appmie__card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(5,7,11,.10)}
.stack__group:hover{transform:translateY(-2px)}

.union__conti li,.eso__conti li,.locanda__conti li,.cest__conti li{
  transition:transform .2s var(--ease)}
.union__conti li:hover,.eso__conti li:hover,.locanda__conti li:hover,.cest__conti li:hover{
  transform:translateY(-2px)}

/* ═══ numeri che contano da zero ═══
   I quattro blocchi di conti dei casi studio: quando il piede entra
   in vista (.rv riceve .in dall'IntersectionObserver già cablato in
   app.js) il numero sale da 0 al valore vero. Tecnica: una custom
   property intera registrata con @property, animata dai keyframe, e
   un ::after che la mostra tramite counter() — counter() accetta solo
   interi, il che dà esattamente i passi a scatti di un conteggio.
   Il numero vero resta nel testo (per chi non vede l'animazione, per
   il no-JS e per la stampa) ma diventa trasparente quando il blocco
   entra, sostituito otticamente dal counter animato. La "4:09" del
   girato di Union non è un intero: resta statica, non ha lo stesso
   trattamento. */
@property --conta{syntax:'<integer>';inherits:true;initial-value:0}

.union__conti li:nth-child(1) b,.union__conti li:nth-child(3) b,
.eso__conti li b,.cest__conti li b,.locanda__conti li b{
  --conta:0; position:relative}
.union__piede.in .union__conti li:nth-child(1) b{animation:contaUnionPezzi .9s var(--ease) forwards}
.union__piede.in .union__conti li:nth-child(3) b{animation:contaUnionStrumenti .9s var(--ease) .08s forwards}
.eso__piede.in .eso__conti li:nth-child(1) b{animation:contaEsoPezzi .9s var(--ease) forwards}
.eso__piede.in .eso__conti li:nth-child(2) b{animation:contaEsoSito .7s var(--ease) .08s forwards}
.eso__piede.in .eso__conti li:nth-child(3) b{animation:contaEsoDocumenti .9s var(--ease) .16s forwards}
.locanda__piede.in .locanda__conti li:nth-child(1) b{animation:contaLocandaMarchio .7s var(--ease) forwards}
.locanda__piede.in .locanda__conti li:nth-child(2) b{animation:contaLocandaLocandine .9s var(--ease) .08s forwards}
.locanda__piede.in .locanda__conti li:nth-child(3) b{animation:contaLocandaBrani .9s var(--ease) .16s forwards}
.cest__piede.in .cest__conti li:nth-child(1) b{animation:contaCestPezzi .9s var(--ease) forwards}
.cest__piede.in .cest__conti li:nth-child(2) b{animation:contaCestMarchio .7s var(--ease) .08s forwards}
.cest__piede.in .cest__conti li:nth-child(3) b{animation:contaCestFormati .8s var(--ease) .16s forwards}

.union__piede.in .union__conti li:nth-child(1) b,
.union__piede.in .union__conti li:nth-child(3) b,
.eso__piede.in .eso__conti li b,
.locanda__piede.in .locanda__conti li b,
.cest__piede.in .cest__conti li b{color:transparent}
.union__piede.in .union__conti li:nth-child(1) b::after,
.union__piede.in .union__conti li:nth-child(3) b::after{
  content:counter(conta);counter-reset:conta var(--conta);
  position:absolute;inset:0;color:#0c2405}
.eso__piede.in .eso__conti li b::after,
.cest__piede.in .cest__conti li b::after{
  content:counter(conta);counter-reset:conta var(--conta);
  position:absolute;inset:0;color:var(--sk-vivo)}
.locanda__piede.in .locanda__conti li b::after{
  content:counter(conta);counter-reset:conta var(--conta);
  position:absolute;inset:0;color:var(--l-oro-chiaro)}

@keyframes contaUnionPezzi{to{--conta:9}}
@keyframes contaUnionStrumenti{to{--conta:5}}
@keyframes contaEsoPezzi{to{--conta:10}}
@keyframes contaEsoSito{to{--conta:1}}
@keyframes contaEsoDocumenti{to{--conta:6}}
@keyframes contaLocandaMarchio{to{--conta:1}}
@keyframes contaLocandaLocandine{to{--conta:9}}
@keyframes contaLocandaBrani{to{--conta:5}}
@keyframes contaCestPezzi{to{--conta:6}}
@keyframes contaCestMarchio{to{--conta:1}}
@keyframes contaCestFormati{to{--conta:2}}

.bar__pal button{transition:transform .18s var(--ease)}
.bar__pal button:hover,.bar__pal button:focus-visible{transform:scale(1.15)}
.bar__pal__piu{transition:transform .18s var(--ease)}
.bar__pal__piu:hover{transform:scale(1.1)}

@media (hover:none){
  .appmie__card:hover,.stack__group:hover,
  .union__conti li:hover,.eso__conti li:hover,.locanda__conti li:hover,.cest__conti li:hover,
  .bar__pal button:hover,.bar__pal__piu:hover{transform:none;box-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .hero h1 span,.hero__copy,.hero__actions{opacity:1;transform:none}
  .hero__scan{display:none}
}

@media print{
  body{background:#fff;color:#000}
  .bar,.voice,.hero,.sec:not(#verdetto),.metrics__note,.bench__acts{display:none!important}
  .sec--verdict{padding:0}
  .dossier{border-color:#000}
  .dossier__grid dd,.dossier__head,.dossier__list li.seen::before{color:#000}
}

/* Su schermi stretti la voce di sistema copriva la telemetria dell'hero:
   la strumentazione sale sopra la barra e si riduce all'essenziale. */
@media (max-width:620px){
  /* su mobile la voce va a capo e diventa più alta */
  .hud{bottom:92px;background:linear-gradient(0deg,rgba(5,7,11,.96) 60%,transparent)}
  .rail{bottom:168px}
  .hero{padding-bottom:236px}
  .hud dl{gap:14px}
  .hud div:nth-child(n+4){display:none}
  .voice{left:12px;right:12px;padding:9px 13px}
}

/* ═══ prova 07 · materia ═══ */
.bench__stage--materia{background:radial-gradient(circle at 50% 45%,#0a1a15,#05070b 70%)}
/* l'altezza sta sul contenitore: il canvas la riempie, e le dimensioni
   inline che OGL scrive vengono rimesse al 100% dopo ogni setSize */
.mat-holder{position:relative;height:clamp(380px,44vw,600px)}
.mat-holder canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:grab}
.mat-holder canvas:active{cursor:grabbing}
.mat__hint{margin-top:14px;color:var(--muted)}
.mat__hint b{color:var(--em)}
.mat--loading{display:grid;place-items:center;height:clamp(380px,44vw,600px);
  color:var(--muted);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase}

/* Pavimento tipografico: 11px sulla UI reale, lo stesso standard che
   l'audit pretendeva dal sito precedente. Le didascalie dei formati
   restano compatte con il tracking, non rimpicciolendo. */
.formats figcaption{letter-spacing:.08em}
.hud dl{gap:clamp(10px,2vw,26px)}

/* i pannelli dei banchi sono focalizzabili: il contorno non deve
   comparire quando li si raggiunge col puntatore */
[role="tabpanel"]:focus{outline:none}
[role="tabpanel"]:focus-visible{outline:2px solid var(--em-bright);outline-offset:4px}

/* ═══ strumenti che uso ═══
   Sei categorie, sei tinte: qui il colore è dato, non decorazione — dice a
   quale famiglia appartiene ogni strumento. Il blu della categoria 02 è
   diventato ciano per non confondersi con l'accento del sito. */
.stack{margin-top:clamp(22px,2.6vw,38px);border:1px solid var(--rule);border-radius:var(--r);
  background:var(--panel);overflow:hidden}
/* L'intestazione era in maiuscoletto da undici pixel, come una didascalia
   qualsiasi. E' il titolo di trentotto voci — la parte del sito che dice
   cosa so usare — e in mezzo alla pagina non la vedeva nessuno. */
.stack__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:6px 16px;flex-wrap:wrap;padding:17px 18px 15px;
  border-bottom:1px solid var(--rule);color:var(--muted)}
.stack__head strong{color:var(--ink);font-weight:600;font-family:var(--display);
  font-size:var(--d7);letter-spacing:.01em;text-transform:uppercase;
  line-height:1.05}
.stack__head span{font-size:var(--t-mini);letter-spacing:.1em}
/* Due colonne come nell'originale: la categoria 08 (social, due sole
   voci) attraversa tutto per non lasciare un buco vuoto accanto. Con
   auto-fit venivano quattro colonne e due restavano vuote. */
.stack__grid{padding:18px;display:grid;gap:clamp(18px,2vw,30px);grid-template-columns:1fr}
@media(min-width:760px){.stack__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stack__group{display:grid;gap:11px;align-content:start}
.stack__group--social{grid-column:1/-1}
.stack__group b{display:flex;align-items:center;gap:9px;color:var(--tool);letter-spacing:.13em}
.stack__group b span{color:var(--muted);font-variant-numeric:tabular-nums}
.stack__group > div{display:flex;flex-wrap:wrap;gap:8px}
/* :is(span,button) perche' la pastiglia nasce span nell'HTML e diventa
   un bottone vero quando il JavaScript arriva. Senza JavaScript la
   lista si legge lo stesso, semplicemente non si apre. */
.stack__group > div :is(span,button){display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px 10px;border:1px solid color-mix(in srgb,var(--tool) 34%,transparent);
  border-radius:var(--r-pill);background:color-mix(in srgb,var(--tool) 7%,var(--panel-2));
  color:var(--ink);font-size:var(--t-corpo);line-height:1.2;transition:border-color .2s,background .2s}
.stack__group > div button{font:inherit;font-size:var(--t-corpo);cursor:pointer;text-align:left}
.stack__group > div button:focus-visible{outline:2px solid var(--tool);outline-offset:2px}
.stack__group > div button:active{transform:translateY(1px)}
.stack__group > div :is(span,button)::before{content:"";width:7px;height:7px;border-radius:var(--r-tondo);
  background:var(--tool);flex:none}
.stack__group > div :is(span,button):hover{border-color:color-mix(in srgb,var(--tool) 62%,transparent);
  background:color-mix(in srgb,var(--tool) 13%,var(--panel-2))}

.stack__group--creative{--tool:#ff8b62}
.stack__group--cloud{--tool:#5ad2e6}
.stack__group--video{--tool:#ef8dff}
.stack__group--audio{--tool:#ffb454}
.stack__group--cloni{--tool:#ff6fa8}
.stack__group--local{--tool:#9c8cff}
.stack__group--orchestration{--tool:#ffd166}
.stack__group--social{--tool:#4fe3b0}

/* Effetti leggeri sulle schede chiare/scure dei servizi e dei formati.
   Tutto su opacity e transform, niente filtri ne' ombre animate.
   1) L'ingresso parte un po' piu' piccolo e si assesta con un rimbalzo
      corto: la salita di 14px c'era gia' (.rv), qui si aggiunge la scala.
   2) Sul computer un alone illumina SOLO il bordo, seguendo il mouse: lo
      ritaglia una maschera, quindi il contenuto non viene toccato. */
.offerta__card.rv:not(.in),.bench__panel.rv:not(.in){transform:translateY(18px) scale(.965)}
.offerta__card.rv.in,.bench__panel.rv.in{
  transition:opacity .7s var(--ease),transform .8s cubic-bezier(.34,1.3,.5,1),border-color .22s}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .offerta__card,.bench__panel{position:relative}
  .offerta__card::after,.bench__panel::after{content:"";position:absolute;inset:0;
    border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
    transition:opacity .3s var(--ease);
    background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),var(--em-bright),transparent 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude}
  .offerta__card:hover::after,.bench__panel:hover::after{opacity:.9}
}

/* il blocco dei formati sta fra le schede dei servizi e gli strumenti:
   senza margine sopra e sotto si attaccava a tutti e due */
#b-grafica{margin-block:clamp(40px,7vw,72px)}

/* La sezione delle skill e' una sezione scura come le altre: dopo una
   sezione chiara il sito la arrotonda e la sovrappone da solo
   (.sec--chiara + .sec), e il profilo chiaro sotto le arrotonda il
   fondo. Niente pannello bianco. Dietro c'e' una griglia con una riga,
   e agli incroci compaiono e spariscono dei punti (app.js). */
#strumenti{overflow:hidden;isolation:isolate;
  /* la regola .sec--chiara + .sec non la raggiunge: subito prima c'e'
     la sezione nascosta del metodo. Stesso schema, scritto qui: sale
     sopra i lavori e prende gli angoli alti tondi. */
  background-color:var(--stage);margin-top:-28px;
  border-start-start-radius:22px;border-start-end-radius:22px;
  padding-top:clamp(28px,3.6vw,48px);
  box-shadow:0 -22px 46px -24px rgba(5,7,11,.42)}
.strumenti__scena{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  color:var(--em-vivo);pointer-events:none;opacity:.55}
#strumenti > .stack{position:relative;z-index:1}
#strumenti .stack{margin-top:0;background:none;border:0;border-radius:0;overflow:visible}
#strumenti .stack__head{border-bottom-color:rgba(221,231,242,.1)}
.strumenti__punti circle{fill:currentColor;opacity:0}
.strumenti--attivi .strumenti__punti circle{
  animation:punto-incrocio var(--dur,5s) ease-in-out var(--rit,0s) infinite}
@keyframes punto-incrocio{
  0%,100%{opacity:0;transform:scale(.4)}
  45%,55%{opacity:.95;transform:scale(1)}}
.strumenti__punti circle{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){
  .strumenti--attivi .strumenti__punti circle{animation:none;opacity:.3}}
/* il sopratitolo col pallino, come sopra ogni sezione del sito: occupa
   tutta la riga e spinge il titolo sotto */
.stack__eti{flex:0 0 100%;margin:0 0 4px}
#strumenti .stack__group > div :is(span,button){padding:5px 10px 6px;font-size:12px;gap:7px;min-height:0}
#strumenti .stack__group > div :is(span,button)::before{width:5px;height:5px}
#strumenti .stack__group > div{gap:6px}
#strumenti .stack__grid{gap:16px}

@media(max-width:560px){
  .stack__grid{padding:14px;gap:20px}
  .stack__group > div span{font-size:var(--t-corpo);padding:8px 13px 9px}
}

/* richiamo al laboratorio */
.lab__cta{margin-top:clamp(22px,2.6vw,34px);display:flex;flex-wrap:wrap;align-items:center;
  gap:16px clamp(18px,2.4vw,32px)}
.lab__cta .lab__note{margin:0;max-width:46ch}
.lab__cta .lab__note b{color:var(--em-light)}
/* il dialog del laboratorio porta il proprio foglio di stile: qui solo il fondo */
.playlab-dialog{border:0;padding:0;max-width:100vw;max-height:100vh;background:var(--stage)}
.playlab-dialog::backdrop{background:rgba(3,6,9,.86);backdrop-filter:blur(6px)}

/* Il dialog del laboratorio porta una descrizione per i lettori di schermo:
   senza questa regola compariva come testo visibile in cima. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ═══ brief · le sei domande ═══
   Il modulo che il cliente compila per mandare la richiesta. Il riepilogo
   si costruisce nel browser: niente esce finché non apre lui l'email. */
.brief__shell{border:1px solid var(--rule);border-radius:var(--r);background:var(--panel);
  overflow:hidden}
.brief__form{padding:clamp(20px,2.4vw,34px)}

.brief__progress{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(22px,2.6vw,34px)}
.brief__progress span{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.brief__progress i{display:block;height:2px;background:var(--rule);position:relative}
.brief__progress i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--progress,16%);
  background:var(--em);box-shadow:0 0 10px color-mix(in srgb,var(--em) 60%,transparent);transition:width .45s var(--ease)}

.brief-step{margin:0;padding:0;border:0;min-width:0}
.brief-step[hidden]{display:none}
.brief-step legend{padding:0;margin-bottom:16px;display:flex;gap:12px;align-items:baseline;
  font-family:var(--display);font-size:var(--d6);font-weight:600;
  text-transform:uppercase;letter-spacing:-.02em;color:var(--ink);line-height:1.02}
.brief-step legend span{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;
  color:var(--em);flex:none;transform:translateY(-.15em)}
.brief-step__hint{margin:0 0 16px;color:var(--muted);font-size:var(--t-corpo)}

.brief-options{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.brief-options label{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--panel-2);
  color:var(--text);font-size:var(--t-corpo);line-height:1.35;transition:border-color .2s,background .2s,color .2s}
.brief-options label:hover{border-color:var(--em-dim);color:var(--ink)}
.brief-options input{appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:18px;height:18px;border:1px solid var(--muted);background:transparent;
  transition:border-color .2s,background .2s}
.brief-options input[type=radio]{border-radius:var(--r-tondo)}
.brief-options input[type=checkbox]{border-radius:var(--r-min)}
.brief-options input:checked{border-color:var(--em);background:var(--em);
  box-shadow:inset 0 0 0 3px var(--panel-2)}
.brief-options label:has(input:checked){border-color:var(--em);background:color-mix(in srgb,var(--em) 9%,transparent);color:var(--ink)}
.brief-options input:focus-visible{outline:2px solid var(--em-bright);outline-offset:3px}
.brief-options .opt-ico{width:22px;height:22px;flex:none;color:var(--muted);transition:color .2s}
.brief-options label:hover .opt-ico{color:var(--em)}
.brief-options label:has(input:checked) .opt-ico{color:var(--em)}

.brief-date{grid-column:1/-1}
.brief-date input{width:100%;margin-top:10px;padding:12px 14px;border:1px solid var(--rule);
  border-radius:var(--r);background:var(--stage);color:var(--ink);font-size:var(--t-corpo)}

.brief-fields{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  margin-top:6px}
.brief-fields__wide{grid-column:1/-1}
.brief-fields label{display:grid;gap:8px;font-size:var(--t-corpo);color:var(--muted)}
.brief-fields label > span{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase}
/* <small> ereditava la riduzione del browser e scendeva a 9,2px:
   stesso pavimento di 11px che vale per tutto il resto della UI. */
.brief-fields label > span small{font-size:var(--t-micro);text-transform:none;letter-spacing:.02em;opacity:.75}
.brief-fields input,.brief-fields textarea,.brief-fields select{width:100%;padding:13px 15px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--stage);color:var(--ink);
  font-size:var(--t-corpo);font-family:var(--body);transition:border-color .2s}
.brief-fields input:focus,.brief-fields textarea:focus{outline:none;border-color:var(--em)}
.brief-fields textarea{resize:vertical;min-height:104px;line-height:1.55}

.brief-consent{display:flex!important;align-items:flex-start;gap:12px;cursor:pointer;
  padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r);background:var(--panel-2)}
.brief-consent input{appearance:none;-webkit-appearance:none;margin:2px 0 0;flex:none;
  width:18px;height:18px;border:1px solid var(--muted);border-radius:var(--r-min);background:transparent}
.brief-consent input:checked{border-color:var(--em);background:var(--em);box-shadow:inset 0 0 0 3px var(--panel-2)}
.brief-consent > span{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;color:var(--text)}
.brief-data-note{margin:16px 0 0;padding-left:14px;border-left:2px solid var(--em-deep);
  color:var(--muted);font-size:var(--t-mini);line-height:1.6}

.brief__error{margin:16px 0 0;padding:12px 15px;border:1px solid var(--cut,#ff6a40);border-radius:var(--r);
  background:rgba(255,106,64,.08);color:#ff9d7a;font-size:var(--t-corpo)}
.brief__error[hidden]{display:none}

.brief__nav{margin-top:clamp(20px,2.4vw,30px);display:flex;flex-wrap:wrap;gap:10px}
.brief__nav button{display:inline-flex;align-items:center;gap:14px;padding:14px 22px;cursor:pointer;
  border:1px solid var(--rule);border-radius:var(--r-pill);background:transparent;color:var(--ink);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  transition:border-color .2s,background .2s,color .2s}
.brief__nav button:hover{border-color:var(--em);color:var(--em)}
.brief__nav button[type=submit]{background:var(--em);border-color:var(--em);color:var(--stage)}
.brief__nav button[type=submit]:hover{background:var(--em-bright);border-color:var(--em-bright);color:var(--stage)}
.brief__nav button[hidden]{display:none}

.brief-summary{padding:clamp(20px,2.4vw,34px);border-top:1px solid var(--rule);display:grid;gap:14px}
.brief-summary[hidden]{display:none}
.brief-summary > span{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--em)}
.brief-summary h3{font-size:var(--d4)}
.brief-summary > p{margin:0;color:var(--text);font-size:var(--t-corpo)}
#brief-copy{margin:0;padding:18px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--stage);color:var(--text);font-family:var(--mono);font-size:var(--t-mini);
  line-height:1.7;white-space:pre-wrap;overflow-x:auto;max-height:420px;overflow-y:auto}
.brief-summary__actions{display:flex;flex-wrap:wrap;gap:8px}
.brief-summary__actions button,.brief-summary__actions a{display:inline-flex;align-items:center;gap:12px;
  padding:12px 18px;cursor:pointer;border:1px solid var(--rule);border-radius:var(--r-pill);
  background:transparent;color:var(--ink);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;transition:border-color .2s,background .2s,color .2s}
.brief-summary__actions a{background:var(--em);border-color:var(--em);color:var(--stage)}
.brief-summary__actions button:hover{border-color:var(--em);color:var(--em)}
.brief-summary__actions a:hover{background:var(--em-bright);border-color:var(--em-bright)}
.brief-summary__status{margin:0;color:var(--em-light);font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.1em;min-height:1.3em}

/* ═══ profilo ═══ */
.profilo{display:grid;gap:clamp(24px,3vw,48px);align-items:center}
@media(min-width:900px){.profilo{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.profilo__testo{display:grid;gap:18px;max-width:62ch}
.profilo__testo p{margin:0;color:var(--text);font-size:var(--t-lede);line-height:1.7}
.profilo__lead{padding-left:16px;border-left:2px solid var(--em);color:var(--ink)!important;
  font-size:var(--d7)!important;line-height:1.6!important}
.profilo__mark{display:flex;align-items:center;justify-content:center;gap:.12em;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:-.04em;
  font-size:var(--d1);line-height:.8;color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--em) 28%,transparent);user-select:none}
/* La barra non e' una lettera: e' la cucitura. Stessa idea dell'eroe —
   di qua la mano, di la' la macchina — inclinata come li', e piena
   mentre le lettere restano in contorno. */
.profilo__mark b{color:var(--em);-webkit-text-stroke:0;font-weight:600;
  font-size:1.16em;transform:skewX(-6deg);margin-inline:.02em}
@media(max-width:899px){.profilo__mark{justify-content:flex-start;font-size:var(--d2)}}

/* Il tasto che apre "un po' di più su di me": una tendina vera
   (<details>), niente JavaScript per un contenuto così semplice. */
.profilo__extra{margin-top:4px}
.profilo__extra summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  list-style:none;color:var(--em);font-family:var(--mono);font-size:var(--t-mini);
  letter-spacing:.08em;text-transform:uppercase;padding:6px 2px;user-select:none}
.profilo__extra summary::-webkit-details-marker{display:none}
/* il cursore lampeggiante mentre la scritta si batte a macchina —
   sparisce da solo appena l'ultima lettera e' arrivata */
.profilo__extra summary span.macchina-cursore::after{
  content:"";display:inline-block;width:2px;height:.9em;margin-left:2px;
  background:currentColor;vertical-align:-.1em;animation:blink .9s step-end infinite}
.profilo__extra summary i{display:grid;place-items:center;width:20px;height:20px;flex:none;
  border:1px solid var(--em);border-radius:50%;font-style:normal;line-height:1;
  transition:transform .25s var(--ease);
  animation:profilo-piu-invito 2.2s ease-in-out infinite}
/* il cerchietto invita al clic invertendo i suoi stessi colori: verde
   pieno con la croce bianca, poi torna trasparente con la croce verde */
@keyframes profilo-piu-invito{
  0%,100%{background:transparent;color:var(--em)}
  50%{background:var(--em);color:#fff}
}
.profilo__extra[open] summary i{animation:none;background:var(--em);color:#fff;transform:rotate(45deg)}
.profilo__chi{display:grid;gap:12px;margin-top:14px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.chi__pill{padding:16px 18px;border-radius:var(--r-media);
  border:1px solid var(--rule);background:var(--panel-2)}
.chi__pill svg{width:26px;height:26px;color:var(--em);margin-bottom:8px}
.chi__pill b{display:block;font-family:var(--display);font-size:var(--t-corpo);
  text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);line-height:1.1;
  margin-bottom:6px}
.chi__pill p{margin:0;color:var(--muted);font-size:var(--t-mini);line-height:1.5}

/* Il blocco del contatto continua dentro la stessa sezione del profilo:
   niente nuovo sfondo, solo un margine e un filo che segna dove
   comincia la seconda meta' — la stessa chiusura, non due. */
.profilo__giunzione{margin-top:clamp(56px,8vw,104px);padding-top:clamp(40px,6vw,64px);
  border-top:1px solid var(--rule)}

/* ═══ le quattro competenze ═══
   I banchi dimostrano; questo blocco dichiara che cosa offro. Sono due
   cose diverse e stanno bene una sotto l'altra. */
.offerta{margin-top:clamp(30px,3.4vw,52px);padding-top:clamp(26px,3vw,42px);
  border-top:1px solid var(--rule)}
.offerta__intro{color:var(--muted);margin-bottom:18px}
.offerta__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.offerta__card{border:1px solid var(--rule);border-radius:var(--r);background:var(--panel);
  padding:18px 18px 20px;display:grid;gap:10px;align-content:start;
  transition:border-color .22s,transform .22s}
.offerta__card:hover{border-color:var(--em);transform:translateY(-3px)}
.offerta__card > .mono{color:var(--em)}
.offerta__card h3{font-size:var(--d7)}
.offerta__card p{margin:0;color:var(--text);font-size:var(--t-corpo);line-height:1.6}
.offerta__tag{color:var(--muted)!important;font-size:var(--t-micro)!important;letter-spacing:.08em;line-height:1.6!important}
.offerta__card .btn{margin-top:6px;justify-self:start}
/* ═══════════════════════════════════════════════════════════════════
 * LA FINESTRA DI UN SERVIZIO
 *
 * Le quattro schede dicevano una riga a testa e chiedevano subito
 * "Parliamo della campagna": chiedevano a chi non sapeva ancora cosa
 * stesse chiedendo. Adesso si aprono, e dentro c'e' il mestiere —
 * cosa ti arriva, come ci arrivo, con cosa, e dove si vede.
 *
 * Piu' larga di quella degli strumenti (560 contro 460): li' ci sta una
 * definizione e un elenco, qui quattro blocchi e i collegamenti ai
 * lavori. Stesso fondo, stesso vetro, stessa Esc: e' la stessa finestra
 * del sito, non una seconda inventata per l'occasione.
 * ═══════════════════════════════════════════════════════════════════ */
.serv{
  color-scheme:dark;
  width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);
  padding:0;border:1px solid color-mix(in srgb,var(--em) 34%,transparent);
  border-radius:var(--r-card);background:#0b0f16;color:#f2f4f7;
  font:400 var(--t-corpo)/1.6 var(--body);overflow:auto;overscroll-behavior:contain}
.serv::backdrop{background:rgba(5,7,11,.72);backdrop-filter:blur(6px)}
.serv__cat{margin:0;padding:20px 24px 0;display:flex;align-items:baseline;gap:10px;
  color:var(--em);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}
.serv__cat .n{padding-right:10px;border-right:1px solid var(--rule)}
.serv__cat em{font-style:normal}
.serv h3{margin:8px 0 0;padding:0 24px;font-size:var(--d7);letter-spacing:-.015em;line-height:1.1}
.serv__lede{margin:12px 0 0;padding:0 24px;color:var(--text);line-height:1.6}

/* Le quattro domande si devono vedere separate: sono quattro risposte
   diverse, e impastarle in un paragrafo solo era il difetto della prima
   versione delle schede degli strumenti. */
.serv__eti{margin:22px 0 8px;padding:0 24px;color:var(--muted);
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}
.serv__lista,.serv__passi{margin:0;padding:0 24px 0 42px;display:grid;gap:7px;
  color:var(--text);font-size:var(--t-corpo);line-height:1.55}
.serv__lista{list-style:none;padding-left:24px}
.serv__lista li{position:relative;padding-left:18px}
.serv__lista li::before{content:"";position:absolute;left:0;top:.62em;
  width:7px;height:2px;border-radius:2px;background:var(--em)}
.serv__passi li::marker{color:var(--em);font-family:var(--mono);font-size:var(--t-mini)}
.serv__con{margin:0;padding:0 24px;color:var(--ink);font-family:var(--mono);
  font-size:var(--t-mini);letter-spacing:.04em;line-height:1.9}

/* "Dove si vede" e' la parte che rende verificabile tutto il resto:
   sono collegamenti ai lavori veri, nella stessa pagina. Hanno peso di
   bottone, non di nota. */
.serv__dove{margin:0;padding:0 24px;list-style:none;display:grid;gap:6px}
.serv__dove a{display:grid;gap:1px;padding:10px 12px;border:1px solid var(--rule);
  border-radius:var(--r-min);background:var(--panel-2);
  transition:border-color .2s,background .2s}
.serv__dove a:hover{border-color:var(--em);background:var(--em-dim)}
.serv__dove b{color:var(--ink);font-size:var(--t-corpo);font-weight:600}
.serv__dove span{color:var(--muted);font-size:var(--t-mini);line-height:1.4}

.serv__piede{margin-top:24px;padding:16px 24px 20px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  position:sticky;bottom:0;background:#0b0f16}

/* Il bottone che apre. Copre tutta la scheda con un ::after — cosi' il
   clic funziona ovunque — ma resta un <button> vero, visibile e
   raggiungibile col tasto Tab. La scheda non contiene piu' nessun altro
   comando: un collegamento dentro una scheda cliccabile e' una trappola,
   e per questo l'invito al brief e' finito dentro la finestra. */
.offerta__card{position:relative}
.offerta__apri{margin-top:8px;justify-self:start;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:0;border:0;background:none;color:var(--em);
  font-family:var(--mono);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-align:left}
.offerta__apri::after{content:"";position:absolute;inset:0;border-radius:var(--r-card)}
.offerta__apri i{font-style:normal;transition:transform .2s var(--ease)}
.offerta__card:hover .offerta__apri i{transform:translateX(3px)}
.offerta__apri:focus-visible{outline:none}
.offerta__card:has(.offerta__apri:focus-visible){outline:2px solid var(--em-bright);
  outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .offerta__apri i,.offerta__card:hover .offerta__apri i{transition:none;transform:none}
}

.offerta__nota{margin:20px 0 0;color:var(--muted);font-size:var(--t-corpo);max-width:70ch}

/* ═══ breakdown dei lavori ═══ */
.work__tag{margin:0;color:var(--muted);font-size:var(--t-micro);letter-spacing:.08em;line-height:1.6}
.work__break{border-top:1px solid var(--rule-2);padding-top:12px}
/* 24px di altezza minima: era 22, e il minimo per un bersaglio da
   puntatore (WCAG 2.5.8) e' 24. Due pixel, ma sono gli unici due
   bersagli di tutto il sito sotto la misura — col dito no, li' la
   riga e' gia' alta abbastanza. */
.work__break summary{cursor:pointer;color:var(--em);list-style:none;display:flex;
  align-items:center;gap:9px;padding:2px 0;min-height:24px}
.work__break summary::-webkit-details-marker{display:none}
.work__break summary::before{content:"+";font-family:var(--mono);font-weight:700;
  transition:transform .25s;display:inline-block}
.work__break[open] summary::before{transform:rotate(45deg)}
.work__break summary:hover{color:var(--em-bright)}
.work__break dl{margin:12px 0 0;display:grid;gap:9px}
.work__break dt{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--em-light)}
.work__break dd{margin:2px 0 0;color:var(--text);font-size:var(--t-corpo);line-height:1.55}

/* occhiello dello studio */
.hero__studio{margin:0 0 clamp(14px,2vh,24px);color:var(--muted);font-family:var(--mono);
  font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;line-height:1.6;
  opacity:0;animation:rise .85s .18s var(--ease) forwards}
/* Lo spot fra il testo e le quattro copertine: il server locale non
   sa rispondere alle richieste "Range", quindi preload="none" e un
   poster vero (un fotogramma preso col canvas, non un fermo immagine
   a caso) — senza, il browser scaricherebbe l'intero file solo per
   mostrarne l'inizio. Stessa cornice scura di .bench__stage, la
   vetrina degli strumenti: e' lo stesso linguaggio dell'eroe, non un
   riquadro inventato per l'occasione. */
.hero__spot{position:relative;margin:clamp(18px,3vh,28px) 0 0;max-width:66ch;
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:#06090e;
  opacity:0;animation:rise .85s .6s var(--ease) forwards}
.hero__spot video{display:block;width:100%;height:auto;background:#000}
/* Lo stesso tasto play delle copertine dei casi cliente: un cerchio
   bianco con un triangolo, al centro. Sparisce appena parte — i
   comandi nativi del video restano sempre li' sotto. */
.hero__spot__play{position:absolute;inset:0;margin:auto;width:64px;height:64px;
  border:0;border-radius:var(--r-tondo);background:rgba(255,255,255,.94);
  box-shadow:0 6px 20px rgba(0,0,0,.4);cursor:pointer;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.hero__spot__play:hover{transform:scale(1.06)}
.hero__spot__play i{position:absolute;inset:0;margin:auto;
  width:0;height:0;border-left:20px solid #06090e;
  border-top:13px solid transparent;border-bottom:13px solid transparent;
  transform:translateX(4px)}
.hero__spot.in-onda .hero__spot__play{opacity:0;pointer-events:none}
/* introduzione del laboratorio */
.lab__intro{margin-top:clamp(24px,3vw,40px);display:grid;gap:12px;max-width:70ch}
.lab__intro > .mono{color:var(--em)}
.lab__intro h3{font-size:var(--d5)}
.lab__intro p{margin:0;max-width:68ch;color:var(--text);font-size:var(--t-corpo);line-height:1.65}

/* ═══════════════════════════════════════════════════════════════════
 * VARIAZIONE — 03.09.2026
 * Dieci sezioni su dieci avevano padding, corpo del titolo e struttura
 * identici: lo stesso tic che l'audit contestava al sito precedente,
 * ricostruito da capo. Qui cambiano ritmo, apertura e impianto.
 * L'accento nei titoli resta su tutte: è una scelta già presa.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── ritmo verticale: tre ampiezze, mai due uguali di fila ── */
.sec.sp-l{padding-block:clamp(104px,12.5vw,182px)}
/* Il padding-top di .sp-l era tarato sull'header + il banco che questa
   sezione aveva prima: tolti entrambi, il primo contenuto e' il titolo
   di .sec__sub, che ha gia' il suo margine sopra. Senza questa riga
   restava un vuoto nero doppio, sommando i due spazi. */
#regia{padding-top:clamp(12px,1.6vw,22px)}
/* .sec__sub aggiunge il suo margine sopra per staccarsi da un titolo
   di sezione che qui non esiste piu': sommato al padding qui sopra
   faceva doppio vuoto. Qui e' la prima cosa della sezione, quindi
   niente margine suo. */
#regia #metodo{margin-top:0}
/* "Metodo" da sola, grande: non c'e' piu' un titolo di sezione sopra
   (l'h2 e il banco sono spariti), quindi questa etichetta fa il lavoro
   che prima faceva l'intestazione — deve pesare come tale, non come
   un piccolo occhiello di passaggio. */
.metodo__eti{font:600 var(--d4) var(--display);text-transform:uppercase;
  letter-spacing:-.01em;color:var(--em);margin-bottom:clamp(10px,1.4vw,16px)}
.sec.sp-m{padding-block:clamp(74px,8.4vw,122px)}
.sec.sp-s{padding-block:clamp(50px,5.4vw,82px)}

/* Il corpo del titolo NON dipende dalla spaziatura.
   Erano attaccati, e il risultato misurato era questo: #lavori — i
   quattro casi, il 38% della pagina — aveva il titolo piu' piccolo di
   tutti (53px) perche' e' una sezione lunga e quindi "sp-s"; #profilo,
   che sono 821px di citazione, ne aveva 75. La classe che dice quanto
   respira una sezione aveva finito per dire anche quanto conta.
   Adesso sp-* governa lo spazio e t-* governa la voce. */
.sec.t-forte .sec__head h2{font-size:var(--d3)}
.sec.t-piano .sec__head h2{font-size:var(--d4)}

/* ── apertura A · larga: il titolo prende tutto, il testo si ritira ── */
@media(min-width:960px){
  .ap-larga .sec__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);
    column-gap:clamp(30px,4vw,72px);align-items:end}
  .ap-larga .sec__head .eyebrow{grid-column:1/-1}
  .ap-larga .sec__head h2{grid-column:1;max-width:none}
  .ap-larga .sec__lede{grid-column:2;margin-top:0;font-size:var(--t-corpo);color:var(--muted)}
}

/* ── apertura B · numero: una cifra grande fa da ancora ── */
.ap-numero .sec__head{position:relative}
@media(min-width:860px){
  .ap-numero .sec__head{padding-left:clamp(96px,10vw,168px)}
  .ap-numero .sec__head::before{content:attr(data-num);position:absolute;left:0;top:-.06em;
    font-family:var(--display);font-weight:600;font-size:var(--d1);line-height:.8;
    color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--em) 34%,transparent);letter-spacing:-.04em;
    pointer-events:none;user-select:none}
}

/* ── apertura C · stretta: titolo e testo affiancati, misura corta ── */
@media(min-width:960px){
  .ap-stretta .sec__head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    column-gap:clamp(34px,5vw,86px);align-items:baseline}
  .ap-stretta .sec__head .eyebrow{grid-column:1/-1}
  .ap-stretta .sec__head h2{grid-column:1}
  .ap-stretta .sec__lede{grid-column:2;margin-top:.35em;max-width:46ch}
}

/* ── impianti: i quattro banchi non hanno più le stesse proporzioni ── */
@media(min-width:1000px){
  .bench--stretto{grid-template-columns:minmax(0,1.06fr) minmax(300px,.94fr)}
  .bench--medio{grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr)}
  .bench--invertito{grid-template-columns:minmax(300px,.62fr) minmax(0,1.48fr)}
  /* il pannello passa nella colonna stretta a sinistra, il visuale
     prende la larga a destra: vale qualunque sia il tag del visuale */
  .bench--invertito > .bench__panel{order:-1}
}

/* ═══════════════════════════════════════════════════════════════════
 * MOBILE — 03.09.2026
 * Quattro difetti misurati: il canvas dell'hero bloccava lo scorrimento,
 * mancava la navigazione, 42 aree di tocco sotto i 44px e 28 testi
 * sotto i 14px. La pagina è lunga 24 schermate: serviva poterla girare.
 * ═══════════════════════════════════════════════════════════════════ */

/* 1 · Lo scorrimento verticale torna alla pagina, il trascinamento
       orizzontale resta al canvas. Prima, con touch-action:none su un
       canvas alto quanto lo schermo, il sito era bloccato sull'hero. */
#gl,
.mat-holder canvas{touch-action:pan-y}

@media (max-width:900px){
  /* 2 · La navigazione torna, come striscia scorrevole sotto il marchio.
         Ventiquattro schermate senza un modo per saltare erano troppe. */
  .bar{height:var(--bar);flex-wrap:nowrap;padding-block:0;row-gap:0}
  .bar__nav{display:flex;order:3;flex:0 1 auto;gap:4px;margin-left:auto;min-width:0;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;scroll-snap-type:x proximity}
  .bar__nav::-webkit-scrollbar{display:none}
  .bar__nav a{flex:none;min-width:44px;min-height:44px;display:grid;place-items:center;
    scroll-snap-align:start;border:1px solid var(--rule-2);border-radius:var(--r-min)}
  .bar__nav a.on{border-color:var(--em);background:var(--em-dim)}
  .bar__sess{display:none}
  /* qui ci stanno solo i lavori e la chiusura: le altre quattro voci
     restano raggiungibili scorrendo, che su un telefono e' il gesto
     naturale comunque */
  .bar__nav a[data-solo-largo]{display:none}
  .bar__nav a{padding:6px 7px;font-size:var(--t-micro)}
  /* Su un telefono le destinazioni che ci stanno sono due, e il verdetto
     non e' una di quelle: si arriva in fondo scorrendo comunque, mentre
     "Contatto" e' l'unica voce che porta dove serve. Con tutti e tre gli
     elementi, "CONTATTO" usciva dal bordo tagliato a meta'. */
  .bar__cta{display:none}
  /* l'ancoraggio segue --bar, ridefinita qui sotto a 113px */
}

@media (max-width:760px){
  /* 3 · Nessuna area di tocco sotto i 44px: è la soglia sotto la quale
         il dito sbaglia bersaglio. */
  .btn,.btn--sm,.modes button,
  .brief__nav button,.brief-summary__actions button,.brief-summary__actions a,
  .bar__cta,.brand,.work__seed button,.lab__cta .btn{min-height:44px}
  .brand{min-width:44px;display:inline-flex;align-items:center}
  .btn--sm{padding-inline:16px}
  .brief-options label,.brief-consent{min-height:52px}
  .brief-fields input,.brief-fields textarea,.brief-fields select{min-height:48px}
  input[type=range]{height:44px}
  .work__break summary{min-height:44px;align-items:center}
  /* 44 e non 40, e :is perche' da oggi sono bottoni: si aprono, quindi
     vanno presi col pollice al primo colpo. Misurato: erano 37px. */
  .stack__group > div :is(span,button){min-height:44px}
  .lab__card{min-height:44px}

  /* 4 · Il corpo del testo non scende sotto i 15px, le meta sotto i 12.
     Questa lista si tiene a mano e a mano ci si dimentica: le voci
     delle istruzioni sono nate a 14,5px senza che me ne accorgessi.
     Adesso a ricordarselo c'e' audit/amichevole.mjs. */
  .sec__lede,.bench__panel p,.work__body p,.offerta__card p,
  .profilo__testo p,.lab__intro p,.metrics__note,.offerta__nota,
  .dossier__verdict,.brief-step__hint,.lab__note,
  /* .union__lavori davanti perche' le regole del blocco Union stanno
     dopo questo blocco nel foglio: a pari specificita' vincerebbero
     loro, e le didascalie resterebbero a 13,5px sul telefono. */
  .istruzioni p,.contatto__come,.brief-data-note,
  .union__lavori .union__pezzo p,.union .union__come dd,
  .locanda__lavori .locanda__pezzo p,.locanda .locanda__come dd,
  .locanda__brani .locanda__nome em,.union .caso-firma,.eso .caso-firma,
  .locanda .caso-firma,.cest .caso-firma,
  .eso__lavori .eso__pezzo p,.eso .eso__come dd,
  .cest__lavori .cest__pezzo p,.cest .cest__come dd,
  .eso .eso__tavola figcaption{font-size:var(--t-corpo)}
  /* .brief-data-note stava qui e vinceva sulla riga dei 15px, che sta
     sopra: due elenchi fatti a mano che si contraddicono, e vince
     l'ultimo. E' la riga che dice che i dati non escono dal browser:
     e' proprio quella che deve leggersi. */
  .work__break dd,.decis li,.brief-options label{font-size:var(--t-corpo)}
  .hud dd{font-size:var(--t-mini)}
  .hud dt,.formats figcaption,.dossier__grid dt,.metrics dt{font-size:var(--t-micro)}
}

@media (max-width:900px){
  /* Su schermo stretto la scena non è divisa in due colonne: il testo
     finisce sopra il lato chiaro. Il velo diventa verticale e più deciso,
     così la leggibilità non dipende da dove si trova il confine. */
  .hero__scrim{background:
    linear-gradient(180deg,rgba(5,7,11,.94) 0%,rgba(5,7,11,.82) 46%,rgba(5,7,11,.66) 68%,rgba(5,7,11,.95) 100%),
    linear-gradient(90deg,rgba(5,7,11,.7) 0%,rgba(5,7,11,.35) 60%,transparent 100%)}
  .hero h1 span:nth-child(2){color:#cfd5dd}
  .hero__copy{color:#dfe5ec}
}

/* ═══════════════════════════════════════════════════════════════════
 * COMANDI E VISIBILITÀ DA TELEFONO — 05.09.2026
 * Misurato a 390×844 con dito emulato. Cinque difetti reali:
 *   · la lettura del sistema spariva sotto i 900px (contenuto perso);
 *   · le istruzioni d'uso sparivano sotto i 760px (nessuna guida);
 *   · Frame e Scena sparivano sotto i 620px;
 *   · il cambio scena era solo doppio clic + barra spaziatrice;
 *   · il pollice dei cursori misurava 18px, il dito ne chiede 44.
 * Niente è stato tolto: quello che era nascosto torna, riposizionato.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · comando di scena, raggiungibile col dito ── */
.scene-pick{display:flex;align-items:center;gap:6px;margin-left:auto}
.scene-pick > .mono{color:var(--muted);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;margin-right:2px}
.scene-pick button{min-width:38px;min-height:32px;padding:0 8px;
  border:1px solid var(--rule-2);border-radius:var(--r-min);background:transparent;
  color:var(--muted);font-family:var(--mono);font-size:var(--t-mini);font-weight:700;
  font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .2s,color .2s}
.scene-pick button[aria-pressed="true"]{border-color:var(--em);color:var(--em);
  background:var(--em-dim)}
.scene-pick button:focus-visible{outline:2px solid var(--em-bright);outline-offset:2px}

/* ── 2 · l'istruzione giusta per il dispositivo giusto ── */
.hud__hint--dito,.mat__hint--dito{display:none}
@media (hover:none),(pointer:coarse){
  .hud__hint--puntatore,.mat__hint--puntatore{display:none}
  .hud__hint--dito{display:inline}
  .mat__hint--dito{display:block}
}

/* ── 3 · la pressione lunga non deve selezionare né aprire menù ── */
#gl,#radar,.mat-holder canvas{
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ── 4 · sul telefono la coda dell'hero smette di essere sovrapposta
        e diventa una colonna: lettura, binario, strumenti. Prima erano
        tre elementi assoluti che si pestavano i piedi, e la soluzione
        adottata era nasconderli. ── */
@media (max-width:900px){
  /* La barra andava a due righe e misurava 113px, non i 60 della
     variabile, perche' la navigazione — sei cifre — si prendeva una riga
     tutta sua: un quinto di uno schermo da 844 per etichette che non
     dicevano niente. Adesso in quella riga ci stanno due voci sole,
     Lavori e Contatto, e la barra torna alta quanto dice la variabile. */
  .hero{padding-bottom:40px;row-gap:0}
  .read,.rail,.hud{position:static;inset:auto}
  .read{order:1;display:block;width:auto;max-width:none;text-align:left;
    margin-top:clamp(22px,4vh,34px);padding-top:16px;border-top:1px solid var(--rule)}
  .read p{min-height:0}
  .rail{order:2;position:relative;margin:22px 0 0;height:2px}
  .hud{order:3;margin-top:20px;padding:14px 0 0;background:none;
    align-items:center;gap:12px 18px}
  .hud dl{gap:12px 18px;flex:1 1 100%}
  /* Frame e Scena tornano: la riga va a capo, non serve tagliarle */
  .hud div:nth-child(n+4){display:block}
  .hud__hint{margin-left:0;white-space:normal;flex:1 1 100%;line-height:1.6}
  .hud__hint--puntatore{display:inline}
  .scene-pick{margin-left:0;flex:1 1 100%;justify-content:flex-start}
  .scene-pick button{min-width:52px;min-height:44px;font-size:var(--t-mini)}
  /* il testo dell'hero non è più costretto a metà schermo */
  .hero__content>*{max-width:100%}
}

/* ── 5 · il pollice dei cursori passa da 18 a 30px: sotto i 44 di area
        utile il dito manca il bersaglio e la pagina scorre invece ── */
@media (pointer:coarse){
  input[type=range]::-webkit-slider-thumb{width:30px;height:30px;margin-top:-13.5px}
  input[type=range]::-moz-range-thumb{width:30px;height:30px}
  /* pan-y e non none: il trascinamento orizzontale muove la leva,
     quello verticale resta alla pagina. Con none i quattro cursori
     diventavano fasce alte 44px dove il dito non scorreva più. */
  input[type=range]{touch-action:pan-y}
}

/* ── 6 · :hover al tocco resta incollato dopo il tap: sedici regole lo
        facevano. Al dito rispondono a :active, che si spegne da solo ── */
@media (hover:none){
  .lab__card:hover,.offerta__card:hover{transform:none}
  .lab__card:active,.offerta__card:active{border-color:var(--em);transform:scale(.985)}
  .btn:active,.modes button:active,
  .bar__nav a:active,.brief__nav button:active,.scene-pick button:active,
  .brief-summary__actions button:active,.work__break summary:active{
    border-color:var(--em);color:var(--em)}
  .btn--solid:active{background:var(--em-bright);color:var(--stage)}
  .brief-options label:active{border-color:var(--em);color:var(--ink)}
  .stack__group > div span:active{
    border-color:color-mix(in srgb,var(--tool) 62%,transparent)}
}

/* ── 7 · ultima parola sulla scelta del suggerimento: le regole di
        impaginazione qui sopra riaccendevano il testo da mouse ── */
@media (hover:none),(pointer:coarse){
  .hud__hint--puntatore,.mat__hint--puntatore{display:none}
  .hud__hint--dito{display:inline}
  .mat__hint--dito{display:block}
}

/* ── 8 · le aree di tocco erano legate alla larghezza (≤760px), non al
        dito: su tablet a 768px restavano 33 bersagli sotto i 44px.
        La soglia giusta la dà il puntatore, non lo schermo. 46px invece
        di 44 perché l'impaginazione frazionaria scendeva a 43,9. ── */
@media (pointer:coarse){
  .btn,.btn--sm,.modes button,
  .brief__nav button,.brief-summary__actions button,.brief-summary__actions a,
  .bar__cta,.brand,.work__seed button,.lab__cta .btn,.lab__card,
  .work__break summary,.scene-pick button{min-height:46px}
  .brand{min-width:46px;display:inline-flex;align-items:center}
  .work__break summary{display:flex;align-items:center}
  .stack__group > div span{min-height:42px}
  .brief-options label,.brief-consent{min-height:52px}
  .brief-fields input,.brief-fields textarea,.brief-fields select{min-height:48px}
  input[type=range]{height:44px}
  .bar__nav a{min-width:44px;min-height:44px;display:grid;place-items:center}
}

/* ═══════════════════════════════════════════════════════════════════
 * VEDERE QUELLO CHE SI TOCCA — 06.09.2026
 * Misurato a 390×844 portando ogni comando dove sta davvero il pollice
 * (78% dell'area utile) e contando quanto del suo risultato resta a
 * schermo. Quattro comandi si muovevano al buio:
 *   fasi della regia  70%   ·  banchi/grafica  56%
 *   banchi/social     70%   ·  flusso AI       46%
 * La causa era sempre la stessa: il visuale è più alto dello schermo
 * perché i suoi box si impilano in colonna. Li affianco: nessuno
 * sparisce, ma il blocco entra tutto sopra il comando.
 * ═══════════════════════════════════════════════════════════════════ */

@media (max-width:900px){
  /* ── i tre formati stavano su due righe: 549px, più di mezzo schermo.
        Affiancati sono 3 miniature da 109px e il confronto — che è il
        senso della sezione — si legge in un colpo d'occhio. ── */
  .formats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
  .formats figcaption{padding:6px 7px;font-size:var(--t-micro);line-height:1.35}
  .formats figcaption b{display:block}

  /* ── il grafo del flusso: cinque nodi in colonna facevano 601px, e il
        tasto "esegui" restava sotto il bordo mentre l'impulso passava
        in alto fuori campo. Su due colonne il flusso ci sta intero. ── */
  .graph{grid-template-columns:1fr 1fr;padding:14px;gap:10px;min-height:0}
  .graph .node{padding:10px 10px 11px}
  .graph .node b{font-size:var(--t-grande)}
  .graph .node:last-child{grid-column:1 / -1}
}

@media (max-width:900px){
  /* ── i tasti che azionano il visuale salgono sotto al visuale. Prima
        stavano in fondo al pannello, dopo il testo: premevi "esegui" e
        l'impulso partiva da un nodo fuori campo, 54px sopra il bordo.
        La spiegazione resta, si legge dopo: è il tocco che ha bisogno
        di stare vicino a quello che muove. ── */
  .bench__panel{display:flex;flex-direction:column}
  .bench__panel > h3       {order:-5}
  .bench__panel > .ctl     {order:-4;margin-top:12px}
  .bench__panel > .modes   {order:-3;margin-top:12px}
  /* quindici pixel del visuale restavano sotto la barra: li recupero
     stringendo lo spazio fra scena e pannello, non tagliando niente */
  .bench{gap:16px}
  .bench__panel > .bench__acts{order:-2;margin:16px 0 0}
  .bench__panel > .mat__hint,
  .bench__panel > .decis   {order:-1}
  /* la spiegazione scende sotto lo strumento: si legge dopo aver
     provato, e non separa più il comando dal suo risultato */
  .bench__panel > p        {order:0;margin-top:10px}
}

/* ═══════════════════════════════════════════════════════════════════
 * BLOCCHI CHIARI — 06.09.2026
 * Cinque sezioni passano su carta bianca: lavori, metodo, laboratorio,
 * profilo, brief. Dalla seconda in poi la pagina alterna scuro e chiaro
 * a ogni blocco, così ogni sezione si stacca dalla precedente.
 *
 * Funziona ridefinendo gli stessi token dentro il blocco: nessuna regola
 * del foglio va riscritta, si ribaltano tutte da sole. I rapporti di
 * contrasto sono misurati su #f7f8fa, non scelti a occhio — il verde
 * #14c08a su bianco fa 2,21:1 e come testo era illeggibile.
 * ═══════════════════════════════════════════════════════════════════ */

.sec--chiara{
  color-scheme:light;                    /* i controlli di sistema seguono */
  --stage:#f7f8fa;                       /* la carta */
  --panel:#ffffff;
  --panel-2:#eef1f5;
  --alt:#eceff3;
  --rule:rgba(5,7,11,.13);
  --rule-2:rgba(5,7,11,.07);
  --ink:#0b0f16;                         /* 18,06:1 */
  --text:#3c4653;                        /*  9,01:1 */
  --muted:#5f6a76;                       /*  5,26:1 */
  /* i ruoli dell'accento arrivano dalla radice: cosi' una palette nuova
     ribalta scuro e chiaro insieme, senza toccare una sola regola */
  --em:var(--em-c);                      /*  5,67:1 — accento da testo */
  --em-bright:var(--em-c-bright);        /*  6,86:1 — stati attivi     */
  --em-light:var(--em-c-light);          /*  4,65:1 */
  --em-deep:var(--em-c-deep);            /*  8,33:1 */
  --em-dim:var(--em-c-dim);
  background:var(--stage);
  color:var(--ink);
}

/* i motori disegnano con colori scritti dentro il codice e restano scuri:
   sulla carta diventano strumenti incassati. Li incornicio perché si
   leggano come tali invece che come buchi neri nella pagina. */
.sec--chiara .bench__stage,
.sec--chiara .formats figure,
.sec--chiara .mat-holder{
  border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 2px rgba(5,7,11,.06), 0 18px 44px -22px rgba(5,7,11,.34);
  /* E dentro restano scuri anche i colori del testo. Senza questa riga
     la didascalia del radar prendeva il grigio da carta (#5f6a76) e
     finiva su un fondo nero: 3,31:1, cioe' illeggibile. Si e' visto
     spostando la tecnologia dal fondo scuro alla carta — un pannello
     che cambia sfondo si porta dietro i suoi colori solo se glielo si
     dice. */
  --ink:#f2f4f7; --text:#c3ccd6; --muted:#7f8b98;
  /* L'accento da carta e' scuro per stare sul bianco: dentro la vetrina
     nera faceva 3,31:1. Qui torna quello vivo, nato per i fondi scuri —
     schiarito di un terzo verso l'inchiostro, perche' su indaco,
     magenta e corallo l'accento vivo da solo si fermava a 4,02:1 e per
     undici pixel ne servono 4,5. Provato su tutte e sette le palette,
     non solo su quella di casa. */
  --em:color-mix(in srgb, var(--em-vivo) 68%, #f2f4f7)}

/* i pannelli su carta: bordo leggero invece del fondo scuro */
.sec--chiara .bench__panel,
.sec--chiara .offerta__card,
.sec--chiara .lab__card,
.sec--chiara .dossier,
.sec--chiara .metrics{background:var(--panel);border-color:var(--rule)}

/* il numerone d'apertura era bianco al 6%: su carta sparirebbe */
.sec--chiara.ap-numero .sec__head::before{color:rgba(5,7,11,.07)}

/* la barra fissa resta scura e ci passa sopra: è un oggetto che galleggia,
   non parte della sezione. Sul chiaro le serve un bordo che la stacchi. */
.sec--chiara{border-block:1px solid var(--rule-2)}

/* ── i colori scritti a mano che il ribaltamento dei token non tocca.
      Sono quattro, e cadono tutti dentro sezioni ora chiare: contorni
      e aloni calibrati su fondo scuro che sulla carta si dissolvono. ── */

/* il marchio ART × AI: contorno verde al 28% su bianco è invisibile */
.sec--chiara .profilo__mark{-webkit-text-stroke:1.5px color-mix(in srgb,var(--em-c) 42%,transparent)}

/* il numerone d'apertura di "lavori" e "laboratorio": pieno, nel verde
   del sito, non piu' contornato. A 176px e' un segno grafico, non testo. */
.sec--chiara.ap-numero .sec__head::before{
  color:var(--em-vivo);-webkit-text-stroke:0}

/* la linguetta sopra la scheda: fondo verde pieno e scritta bianca.
   Il verde e' #08805a e non #14c08a perche' il bianco a 11px sul verde
   acceso fa 2,35:1 — peggio del grigio di partenza. Su questo ne fa
   4,95:1 e passa la soglia. La scheda ha gia' overflow:hidden, quindi
   la fascia si arrotonda da sola sugli angoli. */
.sec--chiara .work__meta{
  background:var(--em-banda);color:#fff;border-bottom-color:transparent;
  padding-block:11px}
.sec--chiara .work__meta b{color:#fff}

/* la barra di avanzamento del brief: l'alone verde su bianco sporcava */
.sec--chiara .brief__progress i::after{box-shadow:none}
.sec--chiara .brief__progress i{background:var(--rule-2)}

/* la risposta scelta nel brief: 9% di verde su bianco non si vedeva */
.sec--chiara .brief-options label:has(input:checked){
  background:color-mix(in srgb,var(--em-c) 8%,transparent);box-shadow:inset 0 0 0 1px var(--em)}

/* le tracce dei cursori usano un grigio chiaro pensato per lo scuro */
.sec--chiara input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--em) 0 var(--v,50%),rgba(5,7,11,.14) var(--v,50%) 100%)}
.sec--chiara input[type=range]::-moz-range-track{background:rgba(5,7,11,.14)}
.sec--chiara input[type=range]::-webkit-slider-thumb,
.sec--chiara input[type=range]::-moz-range-thumb{
  background:var(--em);box-shadow:0 0 0 4px color-mix(in srgb,var(--em-c) 14%,transparent)}

/* ═══════════════════════════════════════════════════════════════════
 * PARALLASSE — 06.09.2026
 * Profondità legata allo scorrimento, non al tempo: ogni strato si
 * muove a una velocità diversa mentre attraversa lo schermo.
 *
 * Fatta con animation-timeline:view(), cioè animazioni guidate dalla
 * posizione dell'elemento nella finestra. Nessun JavaScript, nessun
 * listener sullo scorrimento: il browser la esegue fuori dal thread
 * principale, quindi non ruba fotogrammi al dito che scorre.
 *
 * Uso la proprietà `translate` e non `transform`, così non calpesto le
 * trasformazioni che il foglio già applica altrove (.rv, i knob, ecc.).
 *
 * Chi non ha view() vede la pagina ferma e integra: nessun ripiego in
 * JavaScript, che sarebbe la cosa che fa scattare lo scorrimento.
 * ═══════════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

  @keyframes deriva{from{translate:0 var(--dv)}to{translate:0 calc(var(--dv) * -1)}}

  /* strato 1 · i visuali derivano contro la pagina */
  .bench__stage,
  .mat-holder,
  .formats,
  .deck .work canvas{
    --dv:26px;
    animation:deriva linear both;
    animation-timeline:view()}
  /* niente will-change: le animazioni guidate dallo scorrimento sono già
     composte dal browser, e forzare un livello per ogni visuale su una
     pagina che regge WebGL più sette canvas è memoria grafica spesa per
     niente — sulle schede modeste è la ricetta per il riquadro nero. */

  /* strato 2 · il numerone d'apertura va al doppio: è lui a dare la
     sensazione di profondità, perché scorre visibilmente più veloce
     del titolo che gli sta accanto */
  .ap-numero .sec__head::before{
    --dv:62px;
    animation:deriva linear both;
    animation-timeline:view()}

  /* strato 3 · il marchio ART × AI deriva al contrario del testo */
  .profilo__mark{
    --dv:-38px;
    animation:deriva linear both;
    animation-timeline:view()}

  /* strato 4 · l'hero si allontana mentre esce, invece di sparire
     di colpo sotto il primo blocco */
  @keyframes allontana{to{opacity:.3;scale:.97;translate:0 -34px}}
  .hero__content{
    animation:allontana linear both;
    animation-timeline:view();
    animation-range:exit 0% exit 100%}

  /* strato 5 · la soglia. A ogni passaggio scuro↔chiaro una linea si
     apre dal centro: è il segnale che il blocco è cambiato. */
  @keyframes soglia{from{scale:0 1;opacity:0}to{scale:1 1;opacity:1}}
  .sec--chiara::before,
  .sec--chiara + .sec::before{
    content:"";position:absolute;z-index:1;top:0;height:2px;
    left:var(--gutter);right:var(--gutter);
    background:linear-gradient(90deg,transparent,var(--em),transparent);
    transform-origin:50% 50%;
    animation:soglia linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 80%}

  /* strato 6 · la riga di #come si disegna da sola scorrendo, invece di
     comparire già fatta: è la stessa idea del testo che ha sotto
     ("le disegna il tuo browser adesso"), applicata allo sfondo.
     1445 e' la lunghezza vera del tracciato, letta con
     path.getTotalLength() e non stimata a occhio. */
  .come__scena path{
    stroke-dasharray:1445;stroke-dashoffset:1445;
    animation:come-traccia linear both;
    animation-timeline:view();
    animation-range:entry 15% cover 60%}
  @keyframes come-traccia{to{stroke-dashoffset:0}}

  /* sul telefono l'ampiezza si dimezza: schermo corto, escursione corta,
     altrimenti la deriva diventa un sobbalzo invece che profondità */
  @media (max-width:900px){
    .bench__stage,.mat-holder,.formats,.deck .work canvas{--dv:12px}
    .ap-numero .sec__head::before{--dv:26px}
    .profilo__mark{--dv:-18px}
    @keyframes allontana{to{opacity:.4;scale:.985;translate:0 -18px}}
  }
}
}

/* ═══════════════════════════════════════════════════════════════════
 * PARALLASSE DEI CASI STUDIO — 24.09.2026
 * Le quattro lastre di progetto (Union, Eso/Cest, Locanda) hanno già
 * il fade-in di .rv/.in via IntersectionObserver: qui aggiungo SOLO
 * uno strato in più, senza toccare quel sistema.
 *
 * Uso `scale` e `translate` come proprietà indipendenti da `transform`
 * (stesso trucco della sezione PARALLASSE qui sopra), così questo
 * strato convive con la transizione di .rv.in sulla stessa lastra
 * invece di scavalcarla — le due animazioni non si contendono mai la
 * stessa proprietà.
 * ═══════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

  /* 1 · la scena SVG di sfondo (foglie, scia, marchio) deriva un filo
     più lenta del testo che le sta sopra: la classica profondità da
     parallasse, appena percettibile perché la lastra è già chiusa
     (overflow:hidden) e la scia non tocca mai il bordo */
  @keyframes scena-deriva{from{translate:0 -14px}to{translate:0 14px}}
  .union__scena,
  .eso__scena,
  .cest__scena,
  .locanda__scena{
    animation:scena-deriva linear both;
    animation-timeline:view()}

  /* 2 · le foglie Union: alla loro respirazione (opacity, definita più
     sotto insieme a @keyframes foglie-respiro) aggiungo qui solo la
     seconda tappa, una deriva in scala minima, così sembrano
     allontanarsi appena mentre la lastra scorre. La regola vera e
     propria che unisce le due animazioni sta vicino a
     @keyframes foglie-respiro (dopo, nel foglio, per vincere la
     cascata invece di essere sovrascritta) — qui definisco solo i
     fotogrammi perché sono lo strato "parallasse", coerente con gli
     altri di questa sezione. */
  @keyframes foglie-deriva{from{scale:1.04}to{scale:.98}}

  /* 3 · le lastre stesse: uno zoom quasi impercettibile (.98→1) mentre
     entrano a schermo pieno, in aggiunta al fade di .rv — non lo
     sostituisce, perché agisce su `scale` e non su `transform` */
  @keyframes lastra-arriva{from{scale:.98}to{scale:1}}
  .union__slab,
  .eso__slab,
  .cest__slab,
  .locanda__slab{
    animation:lastra-arriva linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 60%}
}
}

/* ═══════════════════════════════════════════════════════════════════
 * LA CUCITURA FRA I BLOCCHI — 06.09.2026
 * Il salto di tono da solo è un taglio netto. Una riga verde da 2px
 * sopra non si legge (misurata: c'è, ma a pagina intera sparisce).
 *
 * Invece il blocco che cambia tono sale SOPRA il precedente: angoli
 * arrotondati, ombra verso l'alto, sovrapposizione di 44px. Il taglio
 * diventa una scheda che scivola addosso a quella prima, e la riga
 * verde ci corre sopra come rifinitura invece che come separatore.
 *
 * Vale solo dove il tono cambia davvero: hero e regia restano attaccati
 * perché sono lo stesso blocco scuro d'apertura.
 * ═══════════════════════════════════════════════════════════════════ */

.sec--chiara,
.sec--chiara + .sec{
  margin-top:-44px;
  /* 34px era il sedicesimo valore di raggio del foglio. Una sezione e'
     l'oggetto piu' grande che c'e': prende lo stesso angolo dei blocchi
     dei casi, che sono l'altra cosa larga della pagina. */
  border-start-start-radius:var(--r-grande);
  border-start-end-radius:var(--r-grande);
  box-shadow:0 -26px 54px -26px rgba(5,7,11,.55)}

/* il blocco scuro che risale su uno chiaro ha bisogno del contrario:
   l'ombra sotto una superficie chiara non si vede, serve uno stacco */
.sec--chiara + .sec{box-shadow:0 -22px 46px -24px rgba(5,7,11,.42);
  /* La scheda risale gia' di 44px sopra quella chiara: il padding-top
     pieno di .sp-m/.sp-l/.sp-s sommato a quella risalita lasciava un
     vuoto enorme fra l'angolo arrotondato e il sopratitolo. Qui il
     sopratitolo sta subito sotto l'angolo — il resto dello spazio lo
     dà gia' la sovrapposizione. */
  padding-top:clamp(28px,3.6vw,48px)}

/* E soprattutto ha bisogno di un fondo PROPRIO. Le sezioni scure non ne
   avevano mai avuto uno: prendevano quello del body, e a filo non si
   notava. Da scheda sovrapposta invece si vedeva attraverso, e nei 44px
   di sovrapposizione compariva il chiaro di sotto con un taglio netto
   più giù, dove riprendeva il fondo della pagina.
   Uso background-color e non la scorciatoia, così il gradiente del
   verdetto — che è una di queste sezioni — resta al suo posto. */
.sec--chiara + .sec{background-color:var(--stage)}

/* la riga verde corre sul bordo della scheda, non più fra due campiture.
   Sul blocco scuro il verde del tema si legge già. Su carta no: #06714f
   è il verde da testo, giusto per le parole e invisibile come filo di
   luce. Lì torna il verde vivo, che qui è decorazione e non deve
   rispettare la soglia di leggibilità. */
.sec--chiara::before,
.sec--chiara + .sec::before{
  left:34px;right:34px;top:0;height:2px;border-radius:2px}
.sec--chiara::before{
  height:3px;background:linear-gradient(90deg,transparent,var(--em-vivo) 22%,var(--em-vivo) 78%,transparent)}

@media (max-width:900px){
  .sec--chiara,.sec--chiara + .sec{
    margin-top:-28px;
    border-start-start-radius:22px;border-start-end-radius:22px}
  .sec--chiara::before,.sec--chiara + .sec::before{left:22px;right:22px}
}

/* ═══════════════════════════════════════════════════════════════════
 * SELETTORE DI PALETTE — 06.09.2026
 * Si apre tenendo premuto un riquadro (o col tasto destro sul mouse).
 * Il pannello resta sempre sul tema scuro: è uno strumento del sito,
 * non una sua sezione, e così i campioni si giudicano su fondo neutro.
 * ═══════════════════════════════════════════════════════════════════ */

/* il riquadro sotto il dito dà un segno che sta succedendo qualcosa,
   altrimenti mezzo secondo di attesa sembra che non funzioni */
.pal-attesa{outline:1px solid var(--em);outline-offset:2px;
  transition:outline-color .5s var(--ease)}
@media (hover:none){.pal-attesa{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}

.pal{
  color-scheme:dark;
  border:1px solid color-mix(in srgb,var(--em) 34%,transparent);border-radius:var(--r-card);padding:0;
  background:#0b0f16;color:#f2f4f7;
  width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);
  font:400 var(--t-corpo)/1.6 var(--body)}
.pal::backdrop{background:rgba(5,7,11,.72);backdrop-filter:blur(6px)}
.pal__tit{margin:0;padding:18px 20px 0;color:#7f8b98;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase}
.pal__sub{margin:8px 20px 0;color:#c3ccd6;font-size:var(--t-corpo);line-height:1.55}
.pal__griglia{display:grid;gap:8px;padding:16px 20px;
  grid-template-columns:repeat(3,1fr)}
.pal__griglia button{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:5px;justify-content:center;
  padding:14px 8px;border:1px solid rgba(221,231,242,.14);border-radius:var(--r-media);
  background:transparent;color:inherit;cursor:pointer;font:inherit;
  transition:border-color .18s,background .18s}
.pal__griglia i{width:28px;height:28px;border-radius:var(--r-min);
  background:linear-gradient(135deg,var(--campione),var(--campione2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pal__griglia b{font-family:var(--display);font-size:var(--t-mini);letter-spacing:-.01em;
  text-transform:uppercase;line-height:1}
.pal__griglia span{color:#7f8b98;font-size:9px;line-height:1.25}
.pal__griglia button[aria-checked="true"]{
  border-color:var(--campione);background:color-mix(in srgb,var(--campione) 12%,transparent)}
.pal__griglia button:focus-visible{outline:2px solid var(--campione);outline-offset:2px}
/* Il piede resta attaccato in basso invece di scorrere via.

   Con i comandi di posizione il pannello e' cresciuto e su un
   portatile arriva al bordo dello schermo. Scorrere scorreva gia' —
   un dialog lo fa da solo — ma tagliato di netto sul bordo sembra
   rotto, e "Chiudi" finiva fuori vista. Cosi' il fondo del pannello si
   vede sempre, e si capisce che sopra c'e' altro. */
/* ── il tasto che rimette tutto com'era ──────────────────────────────
   Sta in fondo al pannello, dove si va a cercare quando si e' combinato
   un guaio. Non e' rosso: non si distrugge niente, si torna indietro — e
   un rosso qui spaventerebbe per una cosa che non fa paura. Diventa
   caldo solo mentre e' armato, cioe' solo nei sei secondi in cui il
   prossimo colpo fa davvero qualcosa. */
.pal__azzera{width:100%;justify-content:center;background:var(--em);
  border-color:var(--em);color:#04231a;margin-top:6px;
  animation:azzera-respiro 2.6s ease-in-out infinite}
@keyframes azzera-respiro{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
.pal__azzera:hover{background:var(--em);border-color:var(--em);color:#fff;animation:none}
.pal__azzera--certo{border-color:var(--em-bright);background:var(--em-bright);
  color:#04231a}
.pal__fatto{min-height:1.2em;margin:8px 0 0;color:var(--em);text-align:center}

.pal__piede{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
  padding:14px 20px 18px;border-top:1px solid rgba(221,231,242,.08);
  position:sticky;bottom:0;background:#0b0f16;z-index:2;text-align:center}
.pal{overscroll-behavior:contain}
.pal__piede .mono{color:#7f8b98;font-size:var(--t-micro);letter-spacing:.08em}

/* l'accenno: senza, la pressione lunga non la scopre nessuno */
/* width:max-content e' l'unica riga che tiene in piedi questa bolla.
   Senza, il contenitore flex si stringe fino alla parola piu' lunga e
   la frase esce incolonnata, cinque righe in un blocco nero in mezzo
   alla pagina — con lo span che puo' rimpicciolirsi (min-width:0) il
   difetto peggiora invece di sparire. */
.pal-accenno{position:fixed;z-index:320;left:50%;bottom:78px;translate:-50% 12px;
  display:flex;align-items:center;gap:12px;
  width:max-content;max-width:min(560px,calc(100vw - 28px));
  padding:11px 12px 11px 16px;border:1px solid var(--em-dim);border-radius:var(--r-pill);
  background:rgba(11,15,22,.95);backdrop-filter:blur(10px);
  color:#c3ccd6;font-size:var(--t-mini);letter-spacing:.03em;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease),translate .35s var(--ease)}
.pal-accenno.in{opacity:1;pointer-events:auto;translate:-50% 0}
.pal-accenno span{min-width:0}
.pal-accenno button{width:44px;height:44px;flex:none;border-radius:var(--r-tondo);
  border:1px solid rgba(221,231,242,.14);background:transparent;color:#7f8b98;
  cursor:pointer;font-size:var(--t-mini);line-height:1}

@media (max-width:760px){
  .pal__griglia{grid-template-columns:repeat(3,1fr);gap:6px;padding:14px 16px}
  .pal__griglia button{min-height:56px;padding:10px 4px}
  .pal__griglia span{display:none}
  .pal-accenno{bottom:70px;font-size:var(--t-mini);padding-block:13px}
  .pal-accenno button{width:46px;height:46px}
  .pal__piede{flex-wrap:wrap}
  .pal__piede .btn{min-height:46px}
}

/* ── i campioni in testata ──────────────────────────────────────────
   Il pallino mostra 24px di colore dentro un bersaglio da 38 (44 al
   tocco): la parte che si tocca non deve coincidere con quella che si
   vede. Quattro colori a vista, il resto dietro i tre punti. ── */
.bar__pal{display:flex;align-items:center;gap:3px;margin-left:auto}
.bar__pal button{
  width:38px;height:38px;padding:0;display:grid;place-items:center;
  border:0;background:transparent;cursor:pointer;border-radius:var(--r-media)}
.bar__pal button[data-pal-veloce]::before{
  content:"";width:24px;height:24px;border-radius:var(--r-tondo);
  background:var(--campione,#14c08a);
  box-shadow:0 0 0 1px rgba(221,231,242,.26) inset;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}

/* Il colore del campione sta nel foglio, non nel JavaScript. Se lo
   scrive solo lui, basta un modulo rimasto in cache e ti ritrovi
   quattro pallini grigi identici: e' esattamente quello che e'
   successo. Cosi' il colore si vede comunque. */
.bar__pal [data-pal-veloce="smeraldo"]{--campione:#14c08a}
.bar__pal [data-pal-veloce="ciano"]   {--campione:#11adc5}
.bar__pal [data-pal-veloce="ambra"]   {--campione:#c97e0d}
.bar__pal [data-pal-veloce="magenta"] {--campione:#d01c8e}

.bar__pal button[aria-checked="true"]::before{
  transform:scale(1.08);
  box-shadow:0 0 0 2px var(--stage),0 0 0 4px var(--campione)}
.bar__pal button:focus-visible{outline:2px solid var(--em-bright);outline-offset:1px}
.bar__pal__piu{color:var(--muted);font:600 var(--t-grande)/1 var(--mono);letter-spacing:.06em}
.bar__pal__piu:hover{color:var(--em)}
@media (pointer:coarse){.bar__pal button{width:44px;height:44px}}
@media (max-width:900px){.bar__pal{order:2;margin-left:auto;margin-right:2px}}

/* Sotto i 560px quattro pallini piu' marchio piu' verdetto mandano la
   testata a capo: misurata a 165px, un quinto dello schermo occupato da
   una barra fissa. Solo li' resta un pallino unico, nel colore attuale,
   che apre il pannello con tutte e sette. */
@media (max-width:560px){
  .bar__pal{gap:0}
  .bar__pal button[data-pal-veloce]{display:none}
  .bar__pal__piu{width:44px;height:44px;font-size:0}
  .bar__pal__piu::before{content:"";width:22px;height:22px;border-radius:var(--r-tondo);
    background:var(--em);box-shadow:0 0 0 2px var(--stage),0 0 0 4px var(--em-dim)}
}


/* ═══════════════════════════════════════════════════════════════════
 * GRIGLIA A DODICI COLONNE — 06.09.2026
 * Invisibile: c'è sempre, si vede solo se la accendi. Stessa idea di
 * Bootstrap in trenta righe. Dodici perché si divide per 2, 3, 4 e 6.
 *
 * I preset di partenza riproducono l'impaginazione misurata prima di
 * introdurla — deck 3 in fila, offerta e laboratorio 4, formati 3 —
 * così la griglia non cambia niente finché non la usi.
 * ═══════════════════════════════════════════════════════════════════ */

:root{--colonne:12; --gronda:clamp(14px,1.6vw,22px)}

[data-gr]{display:grid;gap:var(--gronda);
  grid-template-columns:repeat(var(--colonne),minmax(0,1fr))}
[data-gr] > *{grid-column:span var(--sp,12);min-width:0}

[data-gr="1"]{--sp:12}
[data-gr="2"]{--sp:6}
[data-gr="3"]{--sp:4}
[data-gr="4"]{--sp:3}
[data-gr="8-4"] > *:nth-child(2n+1){grid-column:span 8}
[data-gr="8-4"] > *:nth-child(2n)  {grid-column:span 4}
[data-gr="4-8"] > *:nth-child(2n+1){grid-column:span 4}
[data-gr="4-8"] > *:nth-child(2n)  {grid-column:span 8}
[data-gr="6-3-3"] > *:nth-child(3n+1){grid-column:span 6}
[data-gr="6-3-3"] > *:nth-child(3n+2),
[data-gr="6-3-3"] > *:nth-child(3n)  {grid-column:span 3}

/* Su schermo stretto tutto scende a colonna piena: dodici colonne su
   390px sono 26px l'una, cioè niente. L'eccezione sono i tre formati,
   che restano affiancati perché è così che si confrontano — e quella
   misura l'abbiamo già verificata. */
@media (max-width:900px){
  /* Qui c'era un buco di specificita' che si vedeva eccome. Questa
     regola e' (0,1,0), ma [data-gr="8-4"] > *:nth-child(2n+1) e'
     (0,2,0) e vinceva: su un telefono da 390px le impaginazioni miste
     restavano miste, cioe' colonne da 109 e 79 px con dentro le carte
     dei lavori. Il testo usciva di 58px dallo schermo. Ora il ripiego
     ha la stessa forma di quelle che deve battere, e i formati — che
     restano affiancati apposta — vengono dopo, quindi vincono a pari
     specificita'. */
  [data-gr] > *,
  [data-gr="8-4"] > *:nth-child(n),
  [data-gr="4-8"] > *:nth-child(n),
  [data-gr="6-3-3"] > *:nth-child(n){grid-column:span 12}
  .formats[data-gr] > *{grid-column:span 4}
  :root{--gronda:12px}
}

/* la griglia accesa: si vede la struttura sotto al sito */
[data-gr-visibile] [data-gr]{
  background-image:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--em) 12%,transparent) 0,
    color-mix(in srgb,var(--em) 12%,transparent)
      calc((100% - 11 * var(--gronda)) / 12),
    transparent calc((100% - 11 * var(--gronda)) / 12),
    transparent calc((100% - 11 * var(--gronda)) / 12 + var(--gronda)));
  outline:1px dashed color-mix(in srgb,var(--em) 34%,transparent);
  outline-offset:3px}
[data-gr-visibile] [data-gr] > *{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--em) 26%,transparent)}

/* ── la sezione griglia dentro il pannello ── */
.pal__sez{margin:0;padding:16px 20px 0;border-top:1px solid rgba(221,231,242,.08)}
.pal__sez .pal__tit{padding:0}
/* la scelta della griglia (una colonna, due, larga a destra...) e' roba
   da chi costruisce la pagina: su telefono, dove i riquadri sono gia'
   impilati uno sotto l'altro senza alternativa, la sezione non serve
   a nessuno e occupa solo spazio nel pannello colori. */
@media (max-width:640px){.pal__sez--griglia{display:none}}
/* "tieni premuto e trascina" e' un gesto da mouse/desktop: su telefono
   non si puo' fare, quindi la sezione che lo spiega resta muta e
   occupa solo spazio. */
@media (max-width:640px){.pal__sez--pos{display:none}}
@media (max-width:640px){.pal__sez--azzera .pal__sub{display:none}}
.pal__gr{display:grid;gap:6px;padding:12px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.pal__gr button{display:grid;gap:3px;text-align:left;padding:9px 11px;
  border:1px solid rgba(221,231,242,.14);border-radius:var(--r-min);
  background:transparent;color:inherit;cursor:pointer;font:inherit}
.pal__gr button i{font-style:normal;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:-1px;color:var(--em);line-height:1}
.pal__gr button b{font-size:var(--t-mini);font-weight:600}
.pal__gr button span{color:#7f8b98;font-size:var(--t-micro)}
.pal__gr button[aria-checked="true"]{border-color:var(--em);
  background:color-mix(in srgb,var(--em) 12%,transparent)}
.pal__gr button:focus-visible{outline:2px solid var(--em-bright);outline-offset:2px}
.pal__vedi{display:flex;align-items:center;gap:10px;margin:12px 0 0;
  color:#c3ccd6;font-size:var(--t-mini);cursor:pointer;min-height:44px}
.pal__vedi input{width:20px;height:20px;accent-color:var(--em)}
@media (max-width:760px){
  .pal__gr{grid-template-columns:repeat(2,1fr)}
  .pal__gr button{min-height:52px}
}

/* l'etichetta dei campioni: senza, quattro pallini in una barra non
   dicono a cosa servono. Sparisce quando lo spazio non basta. */
.bar__pal__eti{margin-left:auto;color:var(--muted);font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.bar__pal__eti + .bar__pal{margin-left:8px}
@media (max-width:1120px){.bar__pal__eti{display:none}}


/* ═══════════════════════════════════════════════════════════════════
 * SPOSTARE UN RIQUADRO — 09.09.2026
 *
 * Tre stati, e si vedono tutti e tre perche' senza il gesto sembra
 * rotto: l'attesa (il bordo si accende), lo stacco (il riquadro si
 * solleva e aspetta di sapere cosa vuoi), il viaggio (segue il dito e
 * i vicini scivolano a fargli posto).
 * ═══════════════════════════════════════════════════════════════════ */

/* staccato: mezzo secondo e' passato, il dito decide */
.pal-staccato{
  outline:1px solid var(--em);outline-offset:2px;
  transform:scale(1.012);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
  cursor:grab;
}
@media (hover:none){
  .pal-staccato{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
}

/* in viaggio: fuori dall'ombra degli altri, e sordo al puntatore
   perche' e' sotto il dito e coprirebbe chi deve fargli posto */
.ord-preso{
  position:relative;z-index:40;
  pointer-events:none;
  cursor:grabbing;
  outline:1px solid var(--em);outline-offset:2px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  opacity:.96;
}
/* il buco dove tornerebbe se lo lasciassi qui */
.ord-gruppo{outline:1px dashed var(--em-dim);outline-offset:10px;border-radius:var(--r-min)}

/* Mentre si trascina, i vicini del gruppo salgono su un piano di
   composizione loro. Spostare una carta nel DOM obbliga comunque il
   browser a rifare il layout, ma senza questo gli tocca anche
   RIDIPINGERE tre canvas da 820×640 a ogni riordino: misurato con la
   CPU rallentata otto volte erano 110 fotogrammi saltati su 122 e 1,2
   secondi di lavoro lungo. Vale solo durante il gesto — tenere dei
   piani in piu' costa memoria, e a riposo non servono a niente. */
.ord-gruppo > *{will-change:transform;contain:layout paint}
body.ord-mappa .ord-gruppo{outline:none}

/* ── LA MAPPA DELLE SEZIONI ───────────────────────────────────────
   Una sezione e' alta fra 500 e 4800 px: trascinarla mentre e' aperta
   non si puo' fare ne' su un telefono ne' su un monitor. Appena una
   sezione si stacca, la pagina si richiude in una banda per sezione —
   numero, nome, tono — e tutte insieme stanno in uno schermo di
   telefono. Da 12 bande a 44 px con i vuoti fanno circa 620 px.

   La specificita' qui va guardata: la cucitura fra i blocchi e'
   scritta `.sec--chiara + .sec` (0,2,0) e vince su `main > section`
   (0,1,2). Con l'id — che ce l'hanno tutte — si arriva a (0,2,3) e la
   mappa vince senza un solo !important. */
body.ord-mappa{overflow-x:hidden}
body.ord-mappa main{
  display:grid;gap:7px;
  max-width:min(1000px,100%);margin-inline:auto;
  padding:calc(var(--bar) + 14px) 12px 18px}
body.ord-mappa main > section[id]{
  display:flex;align-items:center;
  height:clamp(38px,5.4vh,52px);min-height:0;
  margin:0;padding:0 14px;
  border:1px solid var(--rule);border-radius:var(--r-media);box-shadow:none;
  transition:opacity .18s var(--ease),outline-color .18s var(--ease)}
body.ord-mappa main > section[id] > *{display:none}
body.ord-mappa main > section[id] > .ord-banda{display:flex}

.ord-banda{display:none;width:100%;align-items:center;gap:12px;
  font-size:var(--t-mini);letter-spacing:.08em;overflow:hidden}
.ord-banda b{color:var(--em);min-width:20px;font-variant-numeric:tabular-nums}
.ord-banda span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink);font-weight:600;text-transform:uppercase}
.ord-banda i{font-style:normal;color:var(--muted);font-size:var(--t-micro);text-transform:uppercase}

/* dove si puo' atterrare, e dove no. Il rifiuto si vede PRIMA di
   sbagliare: le sezioni dell'altro tono, e le due fisse, si spengono. */
body.ord-mappa main > section[id].ord-si{outline:1px solid var(--em);outline-offset:-1px}
body.ord-mappa main > section[id].ord-no{opacity:.32}
/* la banda in mano deve staccarsi dalle altre buone, che hanno gia'
   il filo verde: un anello pieno invece di un filo, e un'ombra che si
   vede anche sotto una banda chiara */
body.ord-mappa main > section[id].ord-preso{
  outline:none;
  box-shadow:0 0 0 2px var(--em), 0 18px 40px rgba(0,0,0,.6)}

/* ── IL BANCO SPECCHIATO ──────────────────────────────────────────
   Le due colonne di un banco sono 1,42fr e 0,58fr. Scambiando la scena
   col pannello senza scambiare le colonne, il canvas finirebbe in
   300 px e il testo largo il doppio: non e' una variante, e' un
   errore. Con le colonne che seguono, il banco e' specchiato. */
@media(min-width:1000px){
  /* :not([data-gr]) perche' se al banco e' stata scelta un'impaginazione
     dal pannello comanda quella: due regole che riscrivono le stesse
     colonne si annullerebbero a vicenda, e vincerebbe la piu' specifica
     invece della piu' recente. */
  .bench[data-ord-specchio]:not([data-gr]){
    grid-template-columns:minmax(300px,.58fr) minmax(0,1.42fr)}
}
body.ord-in-corso{cursor:grabbing;-webkit-user-select:none;user-select:none}
body.ord-in-corso *{cursor:grabbing !important}

@media (prefers-reduced-motion:reduce){
  .pal-staccato{transform:none;transition:none}
}

/* i tre comandi nel pannello, per chi non trascina */
.pal__pos{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 0}
.pal__pos .btn{flex:1 1 auto;justify-content:center;min-width:112px}
.pal__pos [data-pos-reset]{flex-basis:100%;background:transparent;
  border-color:rgba(221,231,242,.16);color:#c3ccd6}
.pal__pos .btn:disabled{opacity:.38;pointer-events:none}
@media (max-width:640px){
  .pal__pos .btn{min-height:46px}
}

/* ═══════════════════════════════════════════════════════════════════
 * LA VETRINA — le due applicazioni che ha scritto lui
 *
 * Erano due schede scure in mezzo ad altre schede scure, e si leggevano
 * come una nota a margine. Sono la prova piu' forte di tutta la pagina —
 * software funzionante, in uso ogni giorno — quindi diventano una lastra
 * di carta bianca dentro un blocco nero: il contrasto piu' alto che il
 * sito ha gia', senza inventare un colore nuovo.
 *
 * I token sono gli stessi di .sec--chiara, ribaltati qui dentro: cosi'
 * ogni regola scritta in termini di --ink, --text, --panel funziona da
 * sola, e l'accento passa alla sua versione da carta, che sul bianco si
 * legge (il verde da fondo scuro su bianco fa 2,21:1).
 * ═══════════════════════════════════════════════════════════════════ */
.appmie{
  color-scheme:light;
  --stage:#f7f8fa; --panel:#ffffff; --panel-2:#eef1f5; --alt:#eceff3;
  --rule:rgba(5,7,11,.13); --rule-2:rgba(5,7,11,.07);
  --ink:#0b0f16; --text:#3c4653; --muted:#5f6a76;
  --em:var(--em-c); --em-bright:var(--em-c-bright); --em-light:var(--em-c-light);
  --em-deep:var(--em-c-deep); --em-dim:var(--em-c-dim);
  margin:clamp(26px,3vw,44px) 0;
  padding:clamp(22px,3vw,42px) clamp(18px,2.6vw,38px);
  border-radius:var(--r-grande);
  background:var(--stage);color:var(--ink);
  box-shadow:0 26px 70px -30px rgba(0,0,0,.75)}

.appmie__testa{max-width:66ch;margin-bottom:clamp(20px,2.4vw,30px)}
.appmie__testa .eyebrow{color:var(--muted)}
.appmie__testa .eyebrow .n{color:var(--em);border-right-color:var(--rule)}
.appmie__testa h3{margin:10px 0 0;font-size:var(--d5);
  letter-spacing:-.02em;line-height:1.06}
.appmie__lede{margin:14px 0 0;color:var(--text);font-size:var(--t-grande);line-height:1.6}

.appmie__card{display:grid;gap:10px;align-content:start;
  padding:clamp(18px,2vw,26px);border:1px solid var(--rule);border-radius:var(--r);
  background:var(--panel);box-shadow:0 1px 2px rgba(5,7,11,.05)}
.appmie__card > span.mono{color:var(--em);font-size:var(--t-micro);letter-spacing:.12em;overflow-wrap:anywhere}
.appmie__card h4{margin:0;font-family:var(--display);font-size:var(--d6);
  font-weight:600;letter-spacing:-.02em;line-height:1.05;text-transform:uppercase}
.appmie__cos{margin:0;max-width:66ch;color:var(--text);font-size:var(--t-grande);line-height:1.6}

/* Le capacita' a colonne: sono tante, e in colonna unica diventavano un
   muro che nessuno legge fino in fondo. */
/* auto-fit e non due media query sulla larghezza dello SCHERMO: la
   carta puo' essere stretta anche su un monitor largo — basta scegliere
   l'impaginazione a tre o quattro colonne dal pannello — e con le media
   query restava a tre colonne dentro 207px, con le voci che uscivano di
   ventisette pixel. Misurato su tutte le impaginazioni. Il min(100%,...)
   e' quello che evita l'overflow quando la carta e' piu' stretta del
   minimo. */
.appmie__capacita{margin-top:6px;display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:1fr}
.appmie__tile{border:1px solid var(--rule-2);border-radius:var(--r-media);
  background:var(--carta-2,rgba(255,255,255,.02));transition:border-color .2s var(--ease)}
.appmie__tile:hover{border-color:var(--em-light)}
.appmie__tile summary{display:grid;gap:8px;align-content:start;justify-items:start;
  padding:16px;cursor:pointer;list-style:none;position:relative}
.appmie__tile summary::-webkit-details-marker{display:none}
.appmie__icona{flex:none;width:28px;height:28px;color:var(--em-vivo);
  animation:appmie-respiro 2.8s ease-in-out infinite}
/* Ogni riquadro pulsa fuori fase: altrimenti tutte le icone lampeggiano
   in coro e sembra un allarme, non un dettaglio elegante. */
.appmie__tile:nth-child(2) .appmie__icona{animation-delay:.35s}
.appmie__tile:nth-child(3) .appmie__icona{animation-delay:.7s}
.appmie__tile:nth-child(4) .appmie__icona{animation-delay:1.05s}
.appmie__tile:nth-child(5) .appmie__icona{animation-delay:1.4s}
@keyframes appmie-respiro{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.12)}}
.appmie__capacita b{color:var(--em);font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase}
.appmie__capacita p{margin:0;color:var(--text);font-size:var(--t-corpo);line-height:1.5}
.appmie__piu{position:absolute;top:16px;right:16px;width:18px;height:18px;color:var(--muted);
  transition:transform .3s var(--ease);
  animation:piu-gira 3.2s var(--ease) infinite alternate}
.appmie__piu::before,.appmie__piu::after{content:"";position:absolute;background:currentColor;
  top:50%;left:50%;transform:translate(-50%,-50%)}
.appmie__piu::before{width:12px;height:1.6px}
.appmie__piu::after{width:1.6px;height:12px}
/* Gira e diventa verde, poi la STESSA animazione gira all'indietro e
   torna grigia — "alternate" inverte il verso a ogni ciclo, non serve
   un secondo keyframe scritto al contrario. */
@keyframes piu-gira{
  0%{transform:rotate(0deg);color:var(--muted)}
  100%{transform:rotate(180deg);color:var(--em)}
}
.appmie__tile[open] .appmie__piu{animation:none;transform:rotate(45deg);color:var(--em)}
/* Il dettaglio non si limita ad apparire: si "diffonde" — sfuoca meno,
   si allarga leggermente e schiarisce, come una nota che prende forma. */
.appmie__dettaglio{margin:0 16px 16px;padding-top:12px;border-top:1px solid var(--rule-2);
  display:grid;gap:8px;animation:appmie-diffonde .45s var(--ease) backwards}
.appmie__dettaglio p{margin:0;color:var(--text);font-size:var(--t-corpo);line-height:1.55}
.appmie__dettaglio em{font-style:normal;font-weight:600;color:var(--ink)}
@keyframes appmie-diffonde{from{opacity:0;transform:scale(.94);filter:blur(3px)}
  to{opacity:1;transform:scale(1);filter:blur(0)}}

/* Le due carte affiancate devono cominciare a scrivere alla stessa
   altezza: "01 / Assistente editoriale" va a capo dove "02 / Produzione
   video" no, e sotto i ~300px di colonna i due titoli si sfalsavano di
   36px. Con subgrid le righe sono quelle del gruppo, quindi condivise. */
@supports (grid-template-rows: subgrid){
  .appmie__grid[data-gr] > .appmie__card{grid-template-rows:subgrid;grid-row:span 5;row-gap:10px}
}

/* La riga tecnica era una sfilza di nomi separati da puntini: diceva
   "so usare queste cose" e basta. Quattro voci con la loro etichetta
   dicono a cosa serve ognuna, che e' l'unica cosa che interessa a chi
   deve decidere se affidarti un lavoro. */
/* container-type e non una media query: e' la larghezza della CARTA che
   decide se etichetta e testo stanno affiancati, non quella dello
   schermo. Con la media query, scegliendo l'impaginazione a quattro
   colonne restavano affiancati dentro 207px e sbordavano di 21. Stesso
   errore delle sotto-colonne, due regole piu' su: la larghezza dello
   schermo non dice niente su quanto e' larga una scatola dentro. */
.appmie__sotto{margin:10px 0 0;padding-top:14px;border-top:1px solid var(--rule-2);
  container-type:inline-size}
.appmie__sotto > b{display:block;margin-bottom:10px;color:var(--muted);
  font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase}
.appmie__sotto dl{margin:0;display:grid;gap:8px}
.appmie__sotto dl > div{display:grid;gap:2px 14px;
  grid-template-columns:minmax(0,1fr)}
@container (min-width:420px){
  .appmie__sotto dl > div{grid-template-columns:minmax(84px,auto) minmax(0,1fr)}
}
.appmie__sotto dt{color:var(--em);font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;padding-top:.25em}
.appmie__sotto dd{margin:0;color:var(--text);font-size:var(--t-corpo);line-height:1.55}
.appmie__nota{margin:clamp(18px,2vw,26px) 0 0;max-width:70ch;
  color:var(--text);font-size:var(--t-grande);line-height:1.6}


/* ═══════════════════════════════════════════════════════════════════
 * UNION ENERGIA — il caso, in fondo prima dei contatti
 *
 * I colori non sono scelti a occhio: sono contati sui pixel della
 * locandina vera della campagna. Il lime #8cc63e e' quello di
 * "AZZERIAMOLA GREEN", il verde cupo #1c4410 quello dei titoli.
 *
 * E' l'unico punto del sito che non usa la palette del sito: qui il
 * marchio e' un altro, e mescolarli sarebbe un errore da principiante —
 * il verde smeraldo di MF/AI accanto al lime di Union farebbe sembrare
 * che siano lo stesso marchio venuto male. Per la stessa ragione il
 * blocco NON cambia quando si cambia palette dalla testata: quella
 * comanda il sito, non il lavoro di un cliente.
 * ═══════════════════════════════════════════════════════════════════ */
.union{
  --u-lime:#8cc63e; --u-lime-cupo:#6ea52b;
  --u-verde:#1c4410; --u-verde-chiaro:#2f6b1c;
  --u-carta:#ffffff;
  /* La carta del corpo chiaro NON e' bianca. La Locanda lo faceva gia'
     — il suo corpo e' color crema — ed era l'unica dei quattro: gli
     altri tre cadevano da una lastra a colori pieni sullo stesso bianco
     di tutti, e il mondo del cliente finiva alla porta. Questo e' il
     bianco con dentro un soffio del verde della campagna: si vede
     appena, e basta a far capire che si e' ancora dentro lo stesso
     lavoro. --u-carta resta bianco puro perche' e' anche il colore di
     certe parole SULLA lastra scura, dove tingerlo non avrebbe senso. */
  --u-corpo:#f8faf4;
  --u-riga:rgba(28,68,16,.16);
  margin:0 0 clamp(34px,4vw,56px);
  border-radius:var(--r-grande);overflow:hidden;
  background:var(--u-corpo);color:var(--u-verde);
  box-shadow:0 1px 2px rgba(5,7,11,.14),0 16px 26px -18px rgba(5,7,11,.5)}

/* la lastra lime con l'alpaca */
.union__slab{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;gap:clamp(18px,2vw,30px);
  padding:clamp(24px,3.2vw,48px);
  background:
    radial-gradient(120% 140% at 88% 110%, rgba(255,255,255,.5), transparent 58%),
    linear-gradient(148deg, var(--u-lime) 0%, var(--u-lime-cupo) 100%)}
/* Tre zone, e cambiano di posto una volta sola. Sul telefono Davide
   sta accanto ai numeri invece che sotto: da solo su una riga lasciava
   mezza lastra di lime vuoto alla sua sinistra. */
.union__slab{grid-template-areas:"testa testa" "piede davide";
  grid-template-columns:minmax(0,1fr) auto;align-items:end}
.union__testa{grid-area:testa}
.union__piede{grid-area:piede;align-self:end;position:relative;z-index:1}
.union__davide{grid-area:davide}
@media(min-width:840px){
  .union__slab{grid-template-areas:"testa davide" "piede davide";
    grid-template-columns:minmax(0,1fr) minmax(200px,300px);
    min-height:min(56vw,560px)}
}

/* La scena: foglie e scia di luce, i due segni della locandina. Sta
   sotto a tutto (z-index 0 contro l'1 del testo) e non prende clic.
   preserveAspectRatio="slice" la fa comportare come un fondo: riempie
   sempre, e su una lastra stretta taglia invece di schiacciare. */
/* Le foglie della scena Union respirano appena: un'idea di vita dietro
   il testo, così lenta (8s) che si nota solo con la coda dell'occhio,
   mai come un "loop" che distrae. Solo opacity: zero layout, zero costo. */
@media (prefers-reduced-motion: no-preference){
  @keyframes foglie-respiro{0%,100%{opacity:.13}50%{opacity:.22}}
  /* prima respiravano solo in trasparenza, ferme al loro posto: ora
     ondeggiano appena, come mosse da un'aria leggera — ognuna con un
     ritardo diverso (vedi :nth-child piu' sotto) cosi' non si muovono
     tutte insieme come un blocco unico. */
  @keyframes foglie-fluttua{0%,100%{translate:0 0}50%{translate:5px -9px}}
  .union__foglie{animation:foglie-respiro 8s ease-in-out infinite}
  .union__foglie use{animation:foglie-fluttua 7s ease-in-out infinite}
  .union__foglie use:nth-child(2){animation-delay:-2.3s}
  .union__foglie use:nth-child(3){animation-delay:-4.6s}
  .union__foglie use:nth-child(4){animation-delay:-1.1s}
  .union__foglie use:nth-child(5){animation-delay:-3.4s}
}
/* Sopra al respiro (opacity, sempre attivo) si aggiunge — solo dove
   view() esiste — una seconda animazione legata allo scorrimento, su
   `scale` invece che su `opacity`: le due convivono senza contendersi
   la stessa proprietà. @keyframes foglie-deriva è definita nel blocco
   "PARALLASSE DEI CASI STUDIO" qui sopra nel foglio; questa regola sta
   dopo quella di foglie-respiro apposta, per non essere scavalcata. */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
  .union__foglie{
    animation:foglie-respiro 8s ease-in-out infinite,
              foglie-deriva linear both;
    animation-timeline:auto,view()}
}
}
.union__scena{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  pointer-events:none}
.union__scena--stretto{display:none}
@media(max-width:839px){
  .union__scena--largo{display:none}
  .union__scena--stretto{display:block}
}
.union__testa,.union__davide{position:relative;z-index:1}
.union__testa{align-self:center;max-width:60ch}
.union__testa .eyebrow{color:var(--u-verde)}
.union__testa .eyebrow .n{color:var(--u-verde);border-right-color:rgba(28,68,16,.3)}
.union__testa h3{margin:12px 0 0;color:var(--u-verde);
  font-size:var(--d4);letter-spacing:-.025em;line-height:1.02}
/* Il bianco sul lime fa 2,05:1, e per un titolo ne servono 3. Non e'
   una pignoleria da tabella: su uno schermo al sole quella riga
   sparisce. La seconda riga va quindi piu' SCURA invece che piu'
   chiara — il contrasto c'e' lo stesso, e il verde cupo e' un colore
   del brand tanto quanto il bianco. Il bianco resta dov'e' leggibile:
   tutta la meta' di sotto, i bottoni play, la scritta della pastiglia. */
.union__testa h3 em{font-style:normal;color:#0c2405}
/* Il nome del lavoro e del cliente e' un sottotitolo, non una briciola
   di testo minuscolo sopra il titolo: e' la seconda cosa che si legge. */
.union__sotto{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;
  color:#0c2405;font-family:var(--display);font-size:var(--d7);
  font-weight:600;letter-spacing:-.01em;line-height:1.15}
.union__sotto span{color:var(--u-verde);font-family:var(--mono);font-weight:400;
  font-size:var(--t-mini);letter-spacing:.12em;text-transform:uppercase}
.union__lede{margin:16px 0 0;color:var(--u-verde);font-size:var(--t-grande);line-height:1.62}
.union__lede b{color:#0c2405;font-weight:700}
/* Il payoff e' montato come sulla locandina: "UNITI" chiaro sopra,
   "SI VINCE" sotto in lime con la riga, e due trattini ai lati. Il lime
   su verde cupo fa 5,5:1 e il bianco 11,4:1: la targa e' l'unico posto
   della lastra dove il bianco si legge davvero, e infatti e' li' che
   sta. */
.union__claim{margin:20px 0 0;display:inline-grid;justify-items:start;
  position:relative;gap:1px;padding:11px 22px 13px;border-radius:var(--r-media);
  background:color-mix(in srgb,var(--u-verde) 78%,transparent);
  border:1px solid color-mix(in srgb,var(--u-verde) 90%,var(--u-lime) 25%);
  font-family:var(--display);text-transform:uppercase;line-height:1}
.union__claim span{color:var(--u-carta);font-size:var(--t-lede);
  font-weight:600;letter-spacing:.16em}
.union__claim b{color:var(--u-lime);font-size:var(--d6);
  font-weight:700;letter-spacing:.02em;
  border-bottom:3px solid var(--u-lime);padding-bottom:3px}
.union__claim::before,.union__claim::after{content:"";position:absolute;
  top:50%;width:14px;height:3px;border-radius:2px;background:var(--u-verde);
  opacity:.55;animation:claim-va 1.8s ease-in-out infinite}
.union__claim::before{right:calc(100% + 10px);animation-name:claim-vieni}
.union__claim::after{left:calc(100% + 10px);animation-name:claim-va}

/* le due stanghette ai lati delle etichette "claim" respirano verso
   l'esterno e tornano indietro, di qua e di la' dell'etichetta —
   condivisa da tutti i casi (union, eso/cest, locanda) */
@keyframes claim-va{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(9px)}}
@keyframes claim-vieni{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(-9px)}}
@media (prefers-reduced-motion:reduce){
  .union__claim::before,.union__claim::after,
  .eso__claim::before,.eso__claim::after,.cest__claim::before,.cest__claim::after,
  .locanda__claim::before,.locanda__claim::after{animation:none}
}

/* I tre numeri stanno dove la locandina mette le tre icone. Li' dicono
   cosa guadagna il cliente, qui dicono quanto lavoro c'e' dentro:
   e' la stessa impaginazione con un altro mestiere. */
/* Tre colonne vere, non tre elementi che vanno a capo: a 390px il
   flex-wrap mandava il terzo numero da solo su una riga, con la
   stanghetta del separatore appesa nel vuoto. */
.union__conti{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:420px}
.union__conti li{display:grid;gap:2px;align-content:start;min-width:0;
  padding-left:clamp(12px,1.4vw,18px);
  border-left:1px solid rgba(28,68,16,.3)}
.union__conti li:first-child{padding-left:0;border-left:0}
.union__conti b{color:#0c2405;font-family:var(--display);
  font-size:var(--d6);font-weight:700;line-height:1}
/* Sul telefono la lastra e' alta e la sfumatura arriva al lime cupo
   proprio dove stanno i numeri: misurato sui pixel veri, il verde
   #1c4410 li' faceva 4,33:1 e per undici pixel ne servono 4,5. Il
   verde piu' scuro ne fa 5,8 su quello stesso lime. */
.union__conti span{color:#0c2405;font-family:var(--mono);
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase}

/* La riga scritta a mano della locandina. Serve a due cose: e' un segno
   del brand, e riempie l'angolo che altrimenti resta lime e basta. */
.union__nota{margin:16px 0 0;max-width:34ch;text-wrap:balance;position:relative;padding-left:24px;
  color:#0c2405;font-family:var(--display);font-style:italic;
  font-size:var(--t-lede);line-height:1.32}
.union__nota::before{content:"";position:absolute;left:0;top:.55em;
  width:14px;height:2px;border-radius:2px;background:var(--u-verde);opacity:.6}

/* Davide si misura in ALTEZZA, non in larghezza. Scontornato e'
   481x1564: un ritratto in piedi, alto piu' del triplo di quanto sia
   largo. Dargli una larghezza come a un'immagine qualsiasi voleva dire
   una lastra alta quasi mille pixel con dentro un campo di lime vuoto.
   Con width e height a auto e i due massimi, il browser tiene le
   proporzioni da solo e la lastra la decide l'altezza di lui.

   L'ombra e' disegnata, non fotografata: quella vera era sul pavimento
   di uno studio e sul lime si vedeva come una pozza grigia. */
.union__davide{margin:0 6% 0 0;display:grid;justify-items:center;align-self:end}
.union__davide img{display:block;width:auto;height:auto;
  max-width:100%;max-height:clamp(300px,40vw,580px);
  filter:drop-shadow(0 26px 26px rgba(28,68,16,.30))}
/* Sotto gli 840px la sua colonna e' "auto": stretta esattamente sulla sua
   larghezza, quindi finiva a filo del bordo destro della lastra. Un
   margine a destra lo stacca un poco verso il centro. */
@media(max-width:839px){.union__davide{margin-right:8%}}
.union__davide figcaption{margin-top:10px;color:var(--u-verde);text-align:right;
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}
@media(max-width:839px){
  /* Sul telefono si appoggia al bordo destro della lastra, dentro il
     padding: in piedi sul filo invece che a mezz'aria in mezzo al lime. */
  /* i numeri restano attaccati al payoff, il vuoto finisce sotto di
     loro accanto alle gambe di Davide invece che in mezzo alla lastra */
  .union__piede{align-self:start;padding-top:4px}
  .union__davide{justify-items:end;margin:-10px calc(-1 * clamp(12px,1.6vw,24px)) 0 0;
    padding-right:14%}
  .union__davide img{max-height:min(84vw,370px)}
  .union__davide figcaption{margin-right:clamp(12px,1.6vw,24px)}
}

/* il corpo bianco: i nove pezzi e come sono fatti */
.union__corpo{padding:clamp(22px,3vw,42px)}
.union__intro{margin:0 0 16px;color:var(--u-verde-chiaro);
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}

/* :not([data-gr]) e' la riga che tiene separati i due sistemi. Questa
   griglia sta sulle dodici colonne del sito come tutti gli altri
   gruppi, e quando c'e' un preset comanda quello. Senza il :not, la mia
   regola vinceva sul numero di colonne (ne faceva cinque) ma le carte
   continuavano a prendere "span 3" dal preset: una carta larga tre
   quinti della griglia, cioe' una sola per riga e mezza pagina vuota.
   L'auto-fill resta come ripiego per quando il preset non c'e'. */
.union__lavori{display:grid;gap:clamp(14px,1.6vw,22px)}
.union__lavori:not([data-gr]){grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.union__pezzo{display:grid;gap:8px;align-content:start;min-width:0}

/* Sul telefono tutti i gruppi scendono a colonna unica, ma nove
   copertine verticali una sotto l'altra sono uno scorrimento
   infinito: queste stanno a due per riga, come i formati. */
@media (max-width:900px){
  .union__lavori[data-gr] > *{grid-column:span 6}
}

/* la copertina e' un bottone: il video nasce solo al clic */
.union__via{position:relative;display:block;width:100%;padding:0;
  border:1px solid var(--u-riga);border-radius:var(--r-media);overflow:hidden;
  background:#eef3e8;cursor:pointer;line-height:0;
  transition:border-color .2s,transform .2s}
.union__via:hover{border-color:var(--u-lime-cupo);transform:translateY(-2px)}
.union__via:focus-visible{outline:2px solid var(--u-verde);outline-offset:3px}
.union__fermo{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.union__pezzo[data-forma="largo"] .union__fermo{aspect-ratio:16/9}
/* L'unico orizzontale della serie: riga intera e centrato, non
   schiacciato nella stessa colonna stretta dei verticali — "1/-1" e
   non uno "span" fisso perche' il numero di colonne qui cambia con
   l'auto-fill o col preset scelto in griglia.js. */
.union__pezzo[data-forma="largo"]{grid-column:1/-1;order:1}
.union__pezzo[data-forma="largo"] .union__via{max-width:min(100%,620px);margin-inline:auto}
.union__play{position:absolute;inset:0;margin:auto;width:54px;height:54px;
  border-radius:var(--r-tondo);background:rgba(255,255,255,.92);
  box-shadow:0 6px 20px rgba(0,0,0,.3);pointer-events:none}
.union__play::before{content:"";position:absolute;inset:0;margin:auto;
  width:0;height:0;border-left:17px solid var(--u-verde);
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  transform:translateX(3px)}
/* 11px e non 10: sotto gli 11 il sito non scende da nessuna parte, e
   una durata che non si legge tanto vale non scriverla */
.union__durata{position:absolute;right:8px;bottom:8px;
  padding:3px 7px 4px;border-radius:var(--r-min);background:rgba(12,20,8,.82);
  color:#fff;font-size:var(--t-micro);letter-spacing:.08em;line-height:1;pointer-events:none}
.union__pezzo video{width:100%;border:1px solid var(--u-riga);border-radius:var(--r-media);
  background:#0c1408;aspect-ratio:9/16;object-fit:contain}
.union__pezzo[data-forma="largo"] video{aspect-ratio:16/9}
.union__pezzo h4{margin:0;color:var(--u-verde);font-size:var(--t-grande);
  letter-spacing:-.005em;line-height:1.2}
.union__pezzo p{margin:0;color:#4a5a42;font-size:var(--t-mini);line-height:1.5}

/* come sono fatti */
.union__come{margin-top:clamp(24px,3vw,40px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--u-riga);container-type:inline-size}
.union__come > b{display:block;margin-bottom:12px;color:var(--u-verde-chiaro);
  font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase}
.union__come dl{margin:0;display:grid;gap:9px}
.union__come dl > div{display:grid;gap:2px 14px;grid-template-columns:minmax(0,1fr)}
@container (min-width:460px){
  .union__come dl > div{grid-template-columns:minmax(92px,auto) minmax(0,1fr)}
}
.union__come dt{color:var(--u-verde-chiaro);font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;padding-top:.25em}
.union__come dd{margin:0;color:#4a5a42;font-size:var(--t-corpo);line-height:1.55}

@media (prefers-reduced-motion:reduce){
  .union__via:hover{transform:none}
}



/* ═══════════════════════════════════════════════════════════════════
 * SCHEDA TECNICA — la lastra scura di due casi: esoscheletri e CETS
 *
 * Due lavori diversissimi che hanno pero' la stessa grammatica: una
 * lastra scura con l'oggetto del cliente, un corpo chiaro sotto, e i
 * video tutti dentro una cornice 16:9 — perche' in quella fila un
 * trailer orizzontale e un reel verticale devono partire dalla stessa
 * quota. Le regole quindi sono scritte una volta per tutti e due; ogni
 * caso dichiara soltanto le sue sigle di colore.
 *
 * ESOSCHELETRI — i colori sono quelli del sito che ho costruito per il
 * prodotto: notte #04070c, superficie #0e1624, ciano #00f0ff, ghiaccio
 * #c4ecff. Il verde neon #00ff8c c'e' nel loro sistema ma qui NON si usa
 * per il testo: e' a un soffio dallo smeraldo di MF/AI, e due verdi quasi
 * uguali uno accanto all'altro fanno sembrare che il lavoro del cliente
 * sia una parte del mio sito. Resta il ciano, che confusione non ne fa.
 *
 * CETS — blu d'ordinanza, quello del marchio. Per lo stesso motivo di
 * sopra l'accento NON e' il verde del tricolore: quello vive nella scena
 * disegnata e nella targa, dove e' segno e non testo. Sul testo ci vanno
 * il bianco e un acciaio chiaro, che su quel blu fanno 7,6:1.
 * ═══════════════════════════════════════════════════════════════════ */
.eso{
  --sk-notte:#060b14; --sk-fondo:#0b1522;
  --sk-vivo:#00f0ff; --sk-tenue:#7fe9ff;
  --sk-chiaro:#e8f3fa; --sk-carta:#ffffff;
  --sk-riga:rgba(11,21,34,.14);
  --sk-targa:rgba(0,240,255,.07); --sk-targa-riga:rgba(0,240,255,.4);
  --sk-alone:rgba(0,240,255,.22);
  --sk-inchiostro:#16222e; --sk-titolo:#12212e;
  --sk-etichetta:#2d4a5c; --sk-grigio:#4a5a66; --sk-testo:#3d4c58;
  --sk-buio:#0a121c; --sk-nero:#05090f;
  --sk-bordo:var(--sk-vivo);
  /* vedi la nota su --u-corpo: la carta del corpo porta un soffio del
     colore del caso. Qui e' il ciano della scheda tecnica. */
  --sk-corpo:#f3f8fb}

/* CETS — centro elaborazione dati. Il blu dello scudo, e il tricolore
   solo come segno: vedi la nota in cima. */
.cest{
  --sk-notte:#070e19; --sk-fondo:#14243a;
  --sk-vivo:#ffffff; --sk-tenue:#9db8d6;
  --sk-chiaro:#cfe0f2; --sk-carta:#ffffff;
  --sk-riga:rgba(20,36,58,.14);
  --sk-targa:rgba(193,39,45,.14); --sk-targa-riga:rgba(216,86,92,.55);
  --sk-alone:rgba(157,184,214,.18);
  --sk-inchiostro:#16222e; --sk-titolo:#12212e;
  --sk-etichetta:#2d4a5c; --sk-grigio:#4a5a66; --sk-testo:#3d4c58;
  --sk-buio:#0a121c; --sk-nero:#05090f;
  --sk-bordo:var(--sk-fondo);
  /* il blu dello scudo, diluito fino a diventare carta */
  --sk-corpo:#f5f7fa}

.eso,.cest{
  margin:0 0 clamp(34px,4vw,56px);
  border-radius:var(--r-grande);overflow:hidden;
  background:var(--sk-corpo);color:var(--sk-inchiostro);
  box-shadow:0 1px 2px rgba(5,7,11,.14),0 16px 26px -18px rgba(5,7,11,.5)}

.eso__slab,.cest__slab{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;gap:clamp(18px,2vw,30px);
  padding:clamp(24px,3.2vw,48px);
  grid-template-areas:"testa testa" "piede figura";
  grid-template-columns:minmax(0,1fr) auto;align-items:end;
  background:linear-gradient(158deg, var(--sk-fondo) 0%, var(--sk-notte) 100%)}
@media(min-width:840px){
  .eso__slab,.cest__slab{grid-template-areas:"testa figura" "piede figura";
    grid-template-columns:minmax(0,1fr) minmax(200px,300px);
    min-height:min(52vw,520px)}
}
.eso__scena,.cest__scena{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  pointer-events:none}
.eso__scena--stretto,.cest__scena--stretto{display:none}
@media(max-width:839px){
  .eso__scena--largo,.cest__scena--largo{display:none}
  .eso__scena--stretto,.cest__scena--stretto{display:block}
}
.eso__testa,.cest__testa{grid-area:testa;align-self:center;max-width:60ch;
  position:relative;z-index:1}
.eso__piede,.cest__piede{grid-area:piede;align-self:end;position:relative;z-index:1}

.eso__testa .eyebrow,.cest__testa .eyebrow{color:var(--sk-tenue)}
.eso__testa .eyebrow .n,.cest__testa .eyebrow .n{color:var(--sk-tenue);
  border-right-color:color-mix(in srgb, var(--sk-tenue) 40%, transparent)}
.eso__testa h3,.cest__testa h3{margin:12px 0 0;color:var(--sk-chiaro);
  font-size:var(--d4);letter-spacing:-.025em;line-height:1.02}
.eso__testa h3 em,.cest__testa h3 em{font-style:normal;color:var(--sk-vivo)}
.eso__sotto,.cest__sotto{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:0 12px;color:var(--sk-chiaro);font-family:var(--display);
  font-size:var(--d7);font-weight:600;letter-spacing:-.01em;line-height:1.15}
.eso__sotto span,.cest__sotto span{color:var(--sk-tenue);font-family:var(--mono);
  font-weight:400;font-size:var(--t-mini);letter-spacing:.12em;text-transform:uppercase}
.eso__lede,.cest__lede{margin:16px 0 0;font-size:var(--t-grande);line-height:1.62;
  color:color-mix(in srgb, var(--sk-chiaro) 92%, transparent)}
.eso__lede b,.cest__lede b{color:var(--sk-carta);font-weight:700}

/* La targa del payoff: e' la frase dell'endcard del marchio. */
.eso__claim{margin:20px 0 0;display:inline-grid;justify-items:start;
  position:relative;gap:2px;padding:11px 22px 13px;border-radius:var(--r-media);
  background:var(--sk-targa);border:1px solid var(--sk-targa-riga);
  font-family:var(--display);line-height:1.15}
.cest__claim{margin:20px 0 0;display:inline-grid;justify-items:start;
  position:relative;gap:2px;padding:11px 22px 13px;border-radius:var(--r-media);
  background:rgba(157,184,214,.10);border:1px solid rgba(157,184,214,.4);
  font-family:var(--display);line-height:1.15}
.eso__claim span,.cest__claim span{color:var(--sk-tenue);font-size:var(--t-micro);
  font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.eso__claim b,.cest__claim b{color:var(--sk-carta);font-size:var(--d7);
  font-weight:600;letter-spacing:-.01em;
  border-bottom:3px solid var(--sk-vivo);padding-bottom:3px}
.eso__claim::before,.eso__claim::after,.cest__claim::before,.cest__claim::after{
  content:"";position:absolute;top:50%;width:14px;height:3px;border-radius:2px;
  background:var(--sk-tenue);opacity:.85;animation:claim-va 1.8s ease-in-out infinite}
.eso__claim::before,.cest__claim::before{right:calc(100% + 10px);animation-name:claim-vieni}
.eso__claim::after,.cest__claim::after{left:calc(100% + 10px);animation-name:claim-va}

.eso__conti,.cest__conti{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:400px}
.eso__conti li,.cest__conti li{display:grid;gap:2px;align-content:start;min-width:0;
  padding-left:clamp(12px,1.4vw,18px);
  border-left:1px solid color-mix(in srgb, var(--sk-tenue) 28%, transparent)}
.eso__conti li:first-child,.cest__conti li:first-child{padding-left:0;border-left:0}
.eso__conti b,.cest__conti b{color:var(--sk-vivo);font-family:var(--display);
  font-size:var(--d6);font-weight:700;line-height:1}
.eso__conti span,.cest__conti span{color:color-mix(in srgb, var(--sk-chiaro) 82%, transparent);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase}
.eso__nota,.cest__nota{margin:16px 0 0;max-width:34ch;position:relative;padding-left:24px;
  color:color-mix(in srgb, var(--sk-chiaro) 75%, transparent);
  font-family:var(--display);font-style:italic;
  font-size:var(--t-lede);line-height:1.32}
.eso__nota::before,.cest__nota::before{content:"";position:absolute;left:0;top:.6em;
  width:14px;height:2px;border-radius:2px;background:var(--sk-vivo);opacity:.8}

/* L'oggetto del cliente sulla lastra. Sono due cose diverse: il
   dispositivo e' scontornato e su fondo quasi nero ha bisogno di un
   alone per staccarsi, il marchio CETS e' un cerchio bianco e va su una
   targa bianca — scontornarlo darebbe comunque un disco bianco, ma col
   contorno a scaletta. */
.eso__figura,.cest__figura{grid-area:figura;position:relative;z-index:1;
  margin:0;display:grid;justify-items:center;align-self:end}
.eso__figura img,.cest__figura img{display:block;width:auto;height:auto;
  max-width:100%;max-height:clamp(260px,34vw,470px)}
.eso__figura img{filter:drop-shadow(0 0 34px var(--sk-alone)) drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.cest__figura img{max-height:clamp(210px,26vw,340px);
  padding:clamp(14px,1.6vw,22px);border-radius:var(--r-media);background:var(--sk-carta);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.6)}
.eso__figura figcaption,.cest__figura figcaption{margin-top:10px;color:var(--sk-tenue);
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}
@media(max-width:839px){
  /* Stessa cosa vista sulla Locanda: con l'oggetto accanto ai numeri, su
     350px al terzo numero restano 50 pixel e "DOCUMENTI" finisce
     tagliato. L'oggetto va su una riga sua — e su un telefono e' anche
     la cosa che si vuole vedere piu' grande. */
  .eso__slab,.cest__slab{grid-template-areas:"testa" "piede" "figura";
    grid-template-columns:minmax(0,1fr)}
  .eso__piede,.cest__piede{align-self:start;padding-top:4px}
  .eso__figura,.cest__figura{justify-self:center;margin-top:6px}
  .eso__figura img{max-height:min(74vw,330px)}
  .cest__figura img{max-height:min(62vw,290px)}
}

/* il corpo chiaro */
.eso__corpo,.cest__corpo{padding:clamp(22px,3vw,42px)}
.eso__intro,.cest__intro{margin:0 0 16px;color:var(--sk-etichetta);
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}

.eso__lavori,.cest__lavori{display:grid;gap:clamp(14px,1.6vw,22px)}
/* Misurato su uno schermo da 1440: con 220px venivano fuori cinque
   colonne, e tutti e due i casi hanno esattamente SEI pezzi — il sesto
   restava da solo su una riga sua. Due righe c'erano comunque, ma la
   seconda era vuota per quattro quinti.
   Tre colonne fanno due righe piene. E c'e' una ragione piu' seria del
   pareggio: in questa griglia meta' dei pezzi sono verticali dentro una
   cornice 16:9, quindi dell'immagine si vede una striscia larga un
   terzo della colonna. A 228px quella striscia era 72 pixel e la
   scritta dentro non si leggeva; a 394 sono 125 e si legge. */
.eso__lavori:not([data-gr]),.cest__lavori:not([data-gr]){
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.eso__pezzo,.cest__pezzo{display:grid;gap:8px;align-content:start;min-width:0}
@media (max-width:900px){
  .eso__lavori[data-gr] > *,.cest__lavori[data-gr] > *{grid-column:span 6}
}

/* Ogni copertina prende la proporzione vera del suo video: i verticali
   in 9:16, gli orizzontali in 16:9 — non piu' una cornice 16:9 unica
   con le bande nere ai lati per i verticali, che schiacciava esattamente
   i pezzi pensati per lo schermo di un telefono. */
.eso__via,.cest__via{position:relative;display:block;width:100%;padding:0;
  aspect-ratio:9/16;
  border:1px solid var(--sk-riga);border-radius:var(--r-media);overflow:hidden;
  background:var(--sk-buio);cursor:pointer;line-height:0;
  transition:border-color .2s,transform .2s}
.eso__pezzo[data-forma="largo"] .eso__via,.cest__pezzo[data-forma="largo"] .cest__via{
  aspect-ratio:16/9}
/* I pezzi orizzontali restano rari in questa griglia di verticali: qui
   prendono tutta la riga e si allargano al centro, invece di schiacciarsi
   nella stessa colonna stretta di un verticale. "1/-1" e non "span 2":
   con l'auto-fill delle colonne il numero di colonne cambia da schermo a
   schermo, e uno "span" fisso puo' sforare o accavallarsi alla riga dopo
   — la riga intera funziona sempre, a qualunque numero di colonne. */
.eso__pezzo[data-forma="largo"],.cest__pezzo[data-forma="largo"]{grid-column:1/-1;order:1}
.eso__pezzo[data-forma="largo"] .eso__via,.cest__pezzo[data-forma="largo"] .cest__via{
  max-width:min(100%,620px);margin-inline:auto}
/* il bordo acceso non puo' essere --sk-vivo per tutti e due: su CETS
   quello e' il bianco, e un bordo bianco sul corpo bianco non si vede.
   Ha una sigla sua. */
.eso__via:hover,.cest__via:hover{border-color:var(--sk-bordo);transform:translateY(-2px)}
.eso__via:focus-visible,.cest__via:focus-visible{outline:2px solid var(--sk-fondo);
  outline-offset:3px}
.eso__fermo,.cest__fermo{display:block;width:100%;height:100%;object-fit:cover}
.eso__play,.cest__play{position:absolute;inset:0;margin:auto;width:54px;height:54px;
  border-radius:var(--r-tondo);background:rgba(255,255,255,.94);
  box-shadow:0 6px 20px rgba(0,0,0,.4);pointer-events:none}
.eso__play::before,.cest__play::before{content:"";position:absolute;inset:0;margin:auto;
  width:0;height:0;border-left:17px solid var(--sk-fondo);
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  transform:translateX(3px)}
.eso__durata,.cest__durata{position:absolute;right:8px;bottom:8px;
  padding:3px 7px 4px;border-radius:var(--r-min);background:rgba(4,8,14,.84);
  color:#fff;font-size:var(--t-micro);letter-spacing:.08em;line-height:1;pointer-events:none}
.eso__pezzo video,.cest__pezzo video{width:100%;border:1px solid var(--sk-riga);
  border-radius:var(--r-media);background:var(--sk-nero);aspect-ratio:16/9;object-fit:contain}
.eso__pezzo h4,.cest__pezzo h4{margin:0;color:var(--sk-titolo);font-size:var(--t-grande);
  letter-spacing:-.005em;line-height:1.2}
.eso__pezzo p,.cest__pezzo p{margin:0;color:var(--sk-grigio);font-size:var(--t-mini);line-height:1.5}

/* la tavola di riferimento (solo esoscheletri) */
.eso__tavola{margin:clamp(24px,3vw,40px) 0 0;padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--sk-riga);display:grid;gap:12px}
.eso__tavola img{display:block;width:100%;height:auto;border-radius:var(--r-media);
  border:1px solid var(--sk-riga)}
.eso__tavola figcaption{max-width:66ch;color:var(--sk-grigio);font-size:var(--t-corpo);line-height:1.55}

/* "Il dispositivo" in testa alla scheda e' una vista a 360° da
   trascinare, al posto del render fermo: stessa misura e stesso
   drop-shadow flottante dell'immagine che sostituisce, nessuna cornice
   ne' sfondo — cosi' se un fotogramma non e' ancora pronto si vede lo
   sfondo scuro della sezione dietro, mai un riquadro bianco. */
.eso__360-stage{position:relative;height:clamp(260px,34vw,470px);
  aspect-ratio:480/720;max-width:100%;cursor:grab;touch-action:pan-y}
.eso__360-stage:active{cursor:grabbing}
.eso__360-img{display:block;width:100%;height:100%;object-fit:contain;
  user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 0 34px var(--sk-alone)) drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.eso__360-hint{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  padding:6px 12px;border-radius:var(--r-pill);background:rgba(20,11,40,.55);
  color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  pointer-events:none;transition:opacity .3s var(--ease)}
.eso__360-stage--via .eso__360-hint{opacity:0}
@media(max-width:839px){.eso__360-stage{height:min(74vw,330px)}}

/* e poi, di suo */
.eso__come,.cest__come{margin-top:clamp(24px,3vw,40px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--sk-riga);container-type:inline-size}
.eso__come > b,.cest__come > b{display:block;margin-bottom:12px;color:var(--sk-etichetta);
  font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase}
.eso__come dl,.cest__come dl{margin:0;display:grid;gap:9px}
.eso__come dl > div,.cest__come dl > div{display:grid;gap:2px 14px;
  grid-template-columns:minmax(0,1fr)}
@container (min-width:460px){
  .eso__come dl > div,.cest__come dl > div{grid-template-columns:minmax(92px,auto) minmax(0,1fr)}
}
.eso__come dt,.cest__come dt{color:var(--sk-etichetta);font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;padding-top:.25em}
.eso__come dd,.cest__come dd{margin:0;color:var(--sk-testo);font-size:var(--t-corpo);line-height:1.55}

@media (prefers-reduced-motion:reduce){
  .eso__via:hover,.cest__via:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════
 * LA LOCANDA DEL CASTELLO — il caso, sotto Union Energia
 *
 * Stessa struttura del blocco di Union: una lastra col marchio e un
 * corpo chiaro con i pezzi. Cambiano i colori, e cambiano perche' sono
 * di un altro cliente: contati sui pixel del logo consegnato, crema
 * #f5ecdd (l'83% dell'immagine), bordeaux #551a1e, oro #aa8043.
 *
 * La lastra qui e' SCURA dove quella di Union e' chiara, e non e' un
 * capriccio: il lime di Union e' un colore da insegna di giorno, il
 * bordeaux di una locanda e' un colore da sala la sera. Le locandine
 * vere sono tutte candele e legno scuro, e una lastra crema le avrebbe
 * fatte sembrare le foto di qualcun altro.
 *
 * L'oro del marchio (#aa8043) su bordeaux fa 3,8:1: va bene per una
 * riga grande, non per il testo corrente. Dove serve leggere si usa
 * l'oro chiaro #d9b36a, che fa 6,8:1, o direttamente la crema, 11,5:1.
 * ═══════════════════════════════════════════════════════════════════ */
.locanda{
  --l-bordeaux:#551a1e; --l-fondo:#3d1216;
  --l-oro:#aa8043; --l-oro-chiaro:#d9b36a;
  --l-carta:#f5ecdd; --l-inchiostro:#3a1418;
  --l-riga:rgba(85,26,30,.16);
  margin:0 0 clamp(34px,4vw,56px);
  border-radius:var(--r-grande);overflow:hidden;
  background:var(--l-carta);color:var(--l-inchiostro);
  box-shadow:0 1px 2px rgba(5,7,11,.14),0 16px 26px -18px rgba(5,7,11,.5)}

.locanda__slab{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;gap:clamp(18px,2vw,30px);
  padding:clamp(24px,3.2vw,48px);
  grid-template-areas:"testa testa" "piede marchio";
  grid-template-columns:minmax(0,1fr) auto;align-items:end;
  /* Il bagliore caldo lo disegna la scena in SVG, dietro l'insegna in
     basso a destra, e qui non ci deve stare: scritto come fermata di
     una sfumatura CSS diventa un velo chiaro che, per chi legge il
     foglio di stile, copre TUTTA la lastra — testo in alto a sinistra
     compreso. Il controllo dei contrasti lo leggeva cosi' e dava 1,53:1
     sull'oro, che li' non e' vero: li' sotto c'e' bordeaux pieno e
     l'oro fa 6,8:1. Una sola sfumatura piatta, e il caldo dove serve. */
  background:linear-gradient(152deg, var(--l-bordeaux) 0%, var(--l-fondo) 100%)}
@media(min-width:840px){
  .locanda__slab{grid-template-areas:"testa marchio" "piede marchio";
    grid-template-columns:minmax(0,1fr) minmax(220px,320px);
    min-height:min(52vw,520px)}
}
.locanda__scena{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  pointer-events:none}
.locanda__scena--stretto{display:none}
@media(max-width:839px){
  .locanda__scena--largo{display:none}
  .locanda__scena--stretto{display:block}
}
.locanda__testa{grid-area:testa;align-self:center;max-width:60ch;position:relative;z-index:1}
.locanda__piede{grid-area:piede;align-self:end;position:relative;z-index:1}

.locanda__testa .eyebrow{color:var(--l-oro-chiaro)}
.locanda__testa .eyebrow .n{color:var(--l-oro-chiaro);border-right-color:rgba(217,179,106,.4)}
.locanda__testa h3{margin:12px 0 0;color:var(--l-carta);
  font-size:var(--d4);letter-spacing:-.025em;line-height:1.02}
.locanda__testa h3 em{font-style:normal;color:var(--l-oro-chiaro)}
.locanda__sotto{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;
  color:var(--l-carta);font-family:var(--display);font-size:var(--d7);
  font-weight:600;letter-spacing:-.01em;line-height:1.15}
.locanda__sotto span{color:var(--l-oro-chiaro);font-family:var(--mono);font-weight:400;
  font-size:var(--t-mini);letter-spacing:.12em;text-transform:uppercase}
.locanda__lede{margin:16px 0 0;color:rgba(245,236,221,.92);font-size:var(--t-grande);line-height:1.62}
.locanda__lede b{color:var(--l-carta);font-weight:700}

/* La targa del payoff: crema su bordeaux, con l'oro intorno. E' la
   frase che sta sulle loro locandine vere. */
.locanda__claim{margin:20px 0 0;display:inline-grid;justify-items:start;
  position:relative;gap:2px;padding:11px 22px 13px;border-radius:var(--r-media);
  background:rgba(245,236,221,.10);border:1px solid rgba(217,179,106,.45);
  font-family:var(--display);line-height:1.15}
.locanda__claim span{color:var(--l-oro-chiaro);font-size:var(--t-micro);
  font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.locanda__claim b{color:var(--l-carta);font-size:var(--d7);
  font-weight:600;font-style:italic;letter-spacing:-.01em;
  border-bottom:3px solid var(--l-oro-chiaro);padding-bottom:3px}
.locanda__claim::before,.locanda__claim::after{content:"";position:absolute;
  top:50%;width:14px;height:3px;border-radius:2px;background:var(--l-oro-chiaro);
  opacity:.6;animation:claim-va 1.8s ease-in-out infinite}
.locanda__claim::before{right:calc(100% + 10px);animation-name:claim-vieni}
.locanda__claim::after{left:calc(100% + 10px);animation-name:claim-va}

.locanda__conti{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:400px}
.locanda__conti li{display:grid;gap:2px;align-content:start;min-width:0;
  padding-left:clamp(12px,1.4vw,18px);border-left:1px solid rgba(217,179,106,.3)}
.locanda__conti li:first-child{padding-left:0;border-left:0}
.locanda__conti b{color:var(--l-oro-chiaro);font-family:var(--display);
  font-size:var(--d6);font-weight:700;line-height:1}
.locanda__conti span{color:rgba(245,236,221,.82);font-family:var(--mono);
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase}
.locanda__nota{margin:16px 0 0;max-width:34ch;position:relative;padding-left:24px;
  color:rgba(245,236,221,.75);font-family:var(--display);font-style:italic;
  font-size:var(--t-lede);line-height:1.32}
.locanda__nota::before{content:"";position:absolute;left:0;top:.6em;
  width:14px;height:2px;border-radius:2px;background:var(--l-oro-chiaro);opacity:.7}

/* Il marchio non lo scontorno: e' bordeaux e oro, e su una lastra
   bordeaux sparirebbe. Sta sulla sua carta crema, come un'insegna
   appesa. La carta e' lo stesso #f5ecdd del file, quindi il bordo
   dell'immagine non si vede. */
.locanda__marchio{grid-area:marchio;position:relative;z-index:1;
  margin:0;display:grid;justify-items:center;align-self:end}
.locanda__marchio img{display:block;width:auto;height:auto;
  max-width:100%;max-height:clamp(200px,24vw,330px);
  padding:clamp(14px,1.6vw,22px);border-radius:var(--r-media);background:var(--l-carta);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.6)}
.locanda__marchio figcaption{margin-top:10px;color:var(--l-oro-chiaro);
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}
@media(max-width:839px){
  /* Su 390px l'insegna si prendeva 168 pixel dei 350 della lastra, e i
     tre numeri restavano in 55 pixel a testa: "MARCHIO LOCANDINE
     BRANI" finiva tutto attaccato. Qui il marchio va su una riga sua —
     ed e' giusto anche per un altro motivo: su un telefono e' la cosa
     piu' importante del blocco, ed era la piu' piccola. */
  .locanda__slab{grid-template-areas:"testa" "piede" "marchio";
    grid-template-columns:minmax(0,1fr)}
  .locanda__piede{align-self:start;padding-top:4px}
  .locanda__marchio{justify-self:center;margin-top:6px}
  .locanda__marchio img{max-height:min(62vw,280px)}
}

/* il corpo chiaro: le locandine, i brani, come sono fatti */
.locanda__corpo{padding:clamp(22px,3vw,42px)}
.locanda__intro{margin:0 0 16px;color:#6d4a30;
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}

.locanda__lavori{display:grid;gap:clamp(14px,1.6vw,22px)}
.locanda__lavori:not([data-gr]){grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.locanda__pezzo{display:grid;gap:8px;align-content:start;min-width:0}
@media (max-width:900px){
  .locanda__lavori[data-gr] > *{grid-column:span 6}
}

/* Le copertine hanno tre forme diverse — 9:16, 0,74 e 3:4 — perche'
   sono nate in momenti diversi. Due strade sbagliate e una giusta:
   ritagliarle tutte uguali taglia via la riga con la data, che e' il
   motivo per cui una locandina esiste; lasciarle alle loro altezze fa
   una griglia con i titoli a quote diverse, che sembra rotta.

   Quindi: cornice uguale per tutte, 3:4, e dentro la locandina intera
   "contain" su un passe-partout scuro. Non si taglia niente e i titoli
   vanno a filo. Il passe-partout e' scuro e non crema perche' queste
   locandine sono tutte candele e legno: su crema sembrerebbero
   ritagliate male, sul bruno sembrano incorniciate. */
.locanda__via{position:relative;display:block;width:100%;padding:0;
  aspect-ratio:3/4;
  border:1px solid var(--l-riga);border-radius:var(--r-media);overflow:hidden;
  background:#2a1416;cursor:pointer;line-height:0;
  transition:border-color .2s,transform .2s}
.locanda__via:hover{border-color:var(--l-oro);transform:translateY(-2px)}
.locanda__via:focus-visible{outline:2px solid var(--l-bordeaux);outline-offset:3px}
.locanda__fermo{display:block;width:100%;height:100%;object-fit:contain}
.locanda__play{position:absolute;inset:0;margin:auto;width:54px;height:54px;
  border-radius:var(--r-tondo);background:rgba(245,236,221,.94);
  box-shadow:0 6px 20px rgba(0,0,0,.34);pointer-events:none}
.locanda__play::before{content:"";position:absolute;inset:0;margin:auto;
  width:0;height:0;border-left:17px solid var(--l-bordeaux);
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  transform:translateX(3px)}
.locanda__durata{position:absolute;right:8px;bottom:8px;
  padding:3px 7px 4px;border-radius:var(--r-min);background:rgba(26,10,12,.82);
  color:#fff;font-size:var(--t-micro);letter-spacing:.08em;line-height:1;pointer-events:none}
.locanda__pezzo video{width:100%;border:1px solid var(--l-riga);border-radius:var(--r-media);
  background:#1a0a0c;aspect-ratio:3/4;object-fit:contain}
.locanda__pezzo h4{margin:0;color:var(--l-bordeaux);font-size:var(--t-grande);
  letter-spacing:-.005em;line-height:1.2}
.locanda__pezzo p{margin:0;color:#5a4a40;font-size:var(--t-mini);line-height:1.5}

/* La riga della catena, uguale in tutti e tre i casi. Sta subito sotto
   le copertine perche' chi guarda un pezzo la prima cosa che si chiede
   e' con cosa e' fatto, e la risposta non deve stare in fondo a una
   tabella. Nasce per la Locanda e adesso ce l'hanno tutti e tre: le
   tabelle ripetevano la stessa catena — GPT Image, Photoshop, Premiere —
   tre volte, e tre lavori diversi sembravano lo stesso lavoro. */
.caso-firma{margin:clamp(16px,2vw,22px) 0 0;max-width:66ch;
  font-size:var(--t-corpo);line-height:1.55}
.union .caso-firma{color:#4a5a42}
.union .caso-firma b{color:var(--u-verde);font-weight:600}
.eso .caso-firma,.cest .caso-firma{color:var(--sk-grigio)}
.eso .caso-firma b,.cest .caso-firma b{color:var(--sk-fondo);font-weight:600}
.locanda .caso-firma{color:#4c3d34}
.locanda .caso-firma b{color:var(--l-bordeaux);font-weight:600}
.cdi .caso-firma{color:#4a3d66}
.cdi .caso-firma b{color:#140b28;font-weight:600}

/* i cinque brani */
.locanda__musica{margin-top:clamp(24px,3vw,40px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--l-riga)}
.locanda__brani{margin:0;padding:0;list-style:none;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.locanda__suona{position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  width:100%;min-height:56px;padding:10px 14px;text-align:left;
  border:1px solid var(--l-riga);border-radius:var(--r-media);background:#efe6d7;
  cursor:pointer;transition:border-color .2s,background .2s}
.locanda__suona:hover{border-color:var(--l-oro);background:#ece1ce}
.locanda__suona:focus-visible{outline:2px solid var(--l-bordeaux);outline-offset:3px}
/* quanto e' andata avanti: una riga d'oro sotto, non un cronometro */
.locanda__suona::after{content:"";position:absolute;left:0;bottom:0;height:3px;
  width:var(--quanto,0%);background:var(--l-oro);transition:width .25s linear}
.locanda__tasto{position:relative;width:30px;height:30px;border-radius:var(--r-tondo);
  background:var(--l-bordeaux)}
.locanda__tasto::before{content:"";position:absolute;inset:0;margin:auto;
  width:0;height:0;border-left:10px solid var(--l-carta);
  border-top:7px solid transparent;border-bottom:7px solid transparent;
  transform:translateX(2px)}
.locanda__suona.suona .locanda__tasto::before{
  width:9px;height:12px;border:0;border-left:3px solid var(--l-carta);
  border-right:3px solid var(--l-carta);transform:none}
.locanda__nome{display:grid;gap:1px;min-width:0}
.locanda__nome b{color:var(--l-bordeaux);font-size:var(--t-corpo);font-weight:600;line-height:1.2}
.locanda__nome em{color:#6b5a4e;font-style:normal;font-size:var(--t-mini);line-height:1.3}
/* #7a6656 sul crema della riga faceva 4,39:1 e per undici pixel ne
   servono 4,5. Mancava per un niente, ed e' comunque un niente che su
   uno schermo al sole si vede. */
.locanda__min{color:#6f5b4c;font-size:var(--t-micro);letter-spacing:.08em}

/* come sono fatti */
.locanda__come{margin-top:clamp(24px,3vw,40px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--l-riga);container-type:inline-size}
.locanda__come > b{display:block;margin-bottom:12px;color:#6d4a30;
  font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase}
.locanda__come dl{margin:0;display:grid;gap:9px}
.locanda__come dl > div{display:grid;gap:2px 14px;grid-template-columns:minmax(0,1fr)}
@container (min-width:460px){
  .locanda__come dl > div{grid-template-columns:minmax(92px,auto) minmax(0,1fr)}
}
.locanda__come dt{color:#6d4a30;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;padding-top:.25em}
.locanda__come dd{margin:0;color:#4c3d34;font-size:var(--t-corpo);line-height:1.55}

@media (prefers-reduced-motion:reduce){
  .locanda__via:hover{transform:none}
}

/* ═══ CDI Infissi: l'unico caso senza video, con un sito vero dentro ═══ */
.cdi{
  --c-notte:#140b28; --c-fondo:#241247;
  --c-vivo:#a78bfa; --c-tenue:#cabdf7;
  --c-carta:#f3f0fb; --c-inchiostro:#1e1533;
  --c-riga:rgba(20,11,40,.14);
  margin:0 0 clamp(34px,4vw,56px);
  border-radius:var(--r-grande);overflow:hidden;
  background:var(--c-carta);color:var(--c-inchiostro);
  box-shadow:0 1px 2px rgba(5,7,11,.14),0 16px 26px -18px rgba(5,7,11,.5)}
.cdi__slab{padding:clamp(24px,3.2vw,48px);
  background:linear-gradient(152deg, var(--c-fondo) 0%, var(--c-notte) 100%)}
.cdi__testa{max-width:64ch}
.cdi__testa .eyebrow{color:var(--c-tenue)}
.cdi__testa .eyebrow .n{color:var(--c-tenue);border-right-color:rgba(167,139,250,.4)}
.cdi__testa h3{margin:12px 0 0;color:var(--c-carta);
  font-size:var(--d4);letter-spacing:-.025em;line-height:1.02}
.cdi__testa h3 em{font-style:normal;color:var(--c-vivo)}
.cdi__lede{margin:16px 0 0;color:rgba(238,244,248,.9);font-size:var(--t-grande);line-height:1.62}
.cdi__claim{margin:20px 0 0;display:inline-grid;justify-items:start;
  position:relative;gap:1px;padding:11px 22px 13px;border-radius:var(--r-media);
  background:rgba(238,244,248,.08);border:1px solid rgba(167,139,250,.4);
  font-family:var(--display);text-transform:uppercase;line-height:1}
.cdi__claim span{color:var(--c-tenue);font-size:var(--t-lede);font-weight:600;letter-spacing:.16em}
.cdi__claim b{color:var(--c-vivo);font-size:var(--d6);font-weight:700;letter-spacing:.02em;
  border-bottom:3px solid var(--c-vivo);padding-bottom:3px}
.cdi__claim::before,.cdi__claim::after{content:"";position:absolute;top:50%;
  width:14px;height:3px;border-radius:2px;background:var(--c-vivo);opacity:.55;
  animation:claim-va 1.8s ease-in-out infinite}
.cdi__claim::before{right:calc(100% + 10px);animation-name:claim-vieni}
.cdi__claim::after{left:calc(100% + 10px);animation-name:claim-va}
.cdi__piede{margin-top:clamp(20px,2.6vw,32px)}
.cdi__conti{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:400px}
.cdi__conti li{display:grid;gap:2px;align-content:start;min-width:0;
  padding-left:clamp(12px,1.4vw,18px);border-left:1px solid rgba(167,139,250,.3)}
.cdi__conti li:first-child{padding-left:0;border-left:0}
.cdi__conti b{color:var(--c-vivo);font-family:var(--display);font-size:var(--d6);
  font-weight:700;line-height:1}
.cdi__conti span{color:rgba(238,244,248,.82);font-family:var(--mono);
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase}
.cdi__nota{margin:16px 0 0;max-width:34ch;position:relative;padding-left:24px;
  color:rgba(238,244,248,.75);font-family:var(--mono);font-size:var(--t-mini);
  letter-spacing:.08em;text-transform:uppercase;line-height:1.4}
.cdi__nota::before{content:"";position:absolute;left:0;top:.5em;
  width:14px;height:2px;border-radius:2px;background:var(--c-vivo);opacity:.7}

/* il corpo chiaro: il sito vero, incorniciato come una finestra */
.cdi__corpo{padding:clamp(22px,3vw,42px)}
.cdi__intro{margin:0 0 16px;color:#5c4a80;
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}
.cdi__finestra{border-radius:var(--r-media);overflow:hidden;
  border:1px solid rgba(20,11,40,.16);background:#fff;
  box-shadow:0 20px 44px -24px rgba(20,11,40,.4)}
/* griglia e non flex: cosi' l'indirizzo sta nel MEZZO dello spazio
   libero fra i pallini e il tasto, non solo subito dopo i pallini */
.cdi__barra{display:grid;grid-template-columns:repeat(3,auto) 1fr auto;
  align-items:center;gap:8px;padding:10px 12px;
  background:#ede8f7;border-bottom:1px solid rgba(20,11,40,.1)}
/* i tre pallini del finto Mac non sono piu' muti: sono i tasti veri
   della barra, coi tre colori del semaforo macOS — rosso indietro,
   giallo avanti, verde ricarica. Niente cerchi in piu' accanto. */
.cdi__punto{flex:none;width:24px;height:24px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:13px;line-height:1;
  cursor:pointer;position:relative;transition:transform .15s var(--ease)}
.cdi__punto--rosso{background:#ff5f57}
.cdi__punto--giallo{background:#febc2e}
.cdi__punto--verde{background:#28c840}
.cdi__punto:disabled{opacity:.35;cursor:default}
.cdi__punto:hover{transform:scale(1.12)}
.cdi__punto:active{transform:scale(.9)}
.cdi__url{justify-self:center;width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:3px 10px;border-radius:20px;background:#fff;text-align:center;
  color:#5c4a80;font-family:var(--mono);font-size:10px;letter-spacing:.04em}
.cdi__toggle{display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:20px;border:0;
  background:#2e1f52;color:#fff;font-family:var(--mono);font-size:11px;
  letter-spacing:.03em;white-space:nowrap;cursor:pointer;transition:background-color .2s var(--ease)}
.cdi__toggle i{font-style:normal;font-size:13px;line-height:1;color:#8a7fb0}
.cdi__toggle:hover{background:#432c74}
.cdi__toggle[aria-pressed="true"]{background:#8f86a8;color:#fff}
.cdi__toggle[aria-pressed="true"] i{color:#28c840}
@media(max-width:420px){
  .cdi__url{display:none}
  .cdi__toggle{justify-self:end}
}
.cdi__frame{display:block;width:100%;aspect-ratio:16/10;border:0;background:#fff}
.cdi__apri{margin-top:16px;background:#2e1f52;border-color:#2e1f52;color:#fff;
  animation:cdi-respiro 2.6s ease-in-out infinite}
/* stesso battito del resto del sito, ma solo la dimensione — niente
   bagliore attorno: qui il colore pieno basta gia' a farlo notare */
@keyframes cdi-respiro{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.cdi__apri:hover{background:#432c74;border-color:#432c74;color:#fff}
@media(max-width:600px){.cdi__frame{aspect-ratio:3/4}}
/* Un iframe scrollabile dentro una pagina che scorre e' una trappola:
   il dito o la rotella che arrivano sopra scorrono il sito DENTRO la
   finestra, non il portfolio. Come i video, resta spento finché non lo
   attivi tu apposta — fino a quel clic la pagina scorre come sempre. */
.cdi__frameBox{position:relative}
.cdi__attiva{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  background:rgba(20,11,40,.34);border:0;padding:0;cursor:pointer;
  transition:opacity .35s var(--ease)}
.cdi__attiva span{padding:.9rem 1.6rem;border-radius:999px;
  background:rgba(20,11,40,.78);color:#fff;font-weight:600;font-size:var(--t-corpo);
  border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.cdi__attiva--via{opacity:0;pointer-events:none}


/* La scaletta dei pezzi di un caso: si vede solo a JavaScript spento,
   perche' con il JS acceso viene sostituita dalle schede vere. Senza,
   chi arriva senza JS (o un motore di ricerca che non lo esegue)
   trovava tre griglie vuote. */
.scaletta{margin:0;padding:0 0 0 18px;display:grid;gap:6px;
  color:inherit;font-size:var(--t-corpo);line-height:1.5}


/* Un secondo capo dentro una sezione, per quando una sezione contiene
   due prove diverse: la control room e le tre immagini generative
   parlano della stessa cosa e non meritano due sezioni. Piu' piccolo
   del capo di sezione, e staccato da una riga. */
.sec__sub{margin:clamp(34px,4vw,58px) 0 clamp(18px,2vw,26px);
  padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--rule-2);
  max-width:74ch}
.sec__sub h3{margin:10px 0 0;font-size:var(--d6);letter-spacing:-.02em;
  line-height:1.08}
.sec__sub .sec__lede{margin-top:12px}


/* ═══════════════════════════════════════════════════════════════════
 * IL MANIFESTO — lastra scura sulla carta
 *
 * Stessa grammatica dei tre casi: una lastra piena e un corpo chiaro
 * sotto. La differenza e' il colore — le lastre dei clienti hanno i
 * colori dei clienti, questa ha quello di casa. E' la prima volta che
 * si vede questa forma scendendo, e serve proprio a quello: quando poi
 * arrivano i tre lavori, la forma e' gia' nota.
 *
 * Nera e non verde perche' le palette sono sette e tre sono scure:
 * riempire una lastra con l'accento vorrebbe dire ricalcolare il
 * contrasto del testo sette volte. La vetrina scura sulla carta il sito
 * ce l'ha gia' e la usa per i banchi: qui e' la stessa cosa, piu'
 * grande.
 * ═══════════════════════════════════════════════════════════════════ */

/* Il retro della sezione era la carta piatta di .sec--chiara — giusto
   dove il testo ci sta sopra, ma qui il testo vive tutto dentro la
   lastra scura: il margine intorno non ha niente da proteggere e può
   permettersi due bagliori dell'accento invece del bianco spento.
   #come.sec--chiara pesa piu' di .sec--chiara da solo, quindi vince
   senza toccare le altre sezioni chiare (lavori, tecnologia, contatto),
   che restano piatte perche' li' il testo e' sulla carta davvero. */
#come.sec--chiara{
  background:
    radial-gradient(56% 62% at 10% -8%, color-mix(in srgb,var(--em-vivo) 20%,transparent), transparent 68%),
    radial-gradient(48% 58% at 102% 108%, color-mix(in srgb,var(--em-vivo) 15%,transparent), transparent 62%),
    radial-gradient(circle, color-mix(in srgb,var(--ink) 10%,transparent) 1px, transparent 1.4px) 0 0/30px 30px,
    var(--stage)}

/* La riga che continua fuori dalla lastra: stessa tecnica della scena
   qui sopra, spostata a coprire tutta la sezione e dietro la carta
   (z-index sotto .manifesto, che ha bisogno del suo per stare sopra).
   .sec>* la vorrebbe centrata e larga quanto il contenuto: qui deve
   coprire il margine intero, quindi la specificità dell'id la scavalca. */
#come .come__scena{
  position:absolute;inset:0;z-index:0;width:100%;margin-inline:0;
  color:var(--em-vivo);opacity:.4;pointer-events:none}
#come .manifesto{position:relative;z-index:1}

.manifesto{border-radius:var(--r-grande);overflow:hidden;
  background:var(--panel);
  box-shadow:0 1px 2px rgba(5,7,11,.06), 0 26px 60px -30px rgba(5,7,11,.5)}
/* <details>: solo la lastra si vede all'inizio, le istruzioni compaiono
   cliccandoci sopra. E' <summary> che apre e chiude — funziona senza
   JavaScript, tastiera compresa — quindi qui si toglie solo l'aspetto
   di default (il triangolino, l'indentatura da elenco) e si lascia
   fare al browser. */
.manifesto__slab{position:relative;isolation:isolate;overflow:hidden;
  display:block;list-style:none;cursor:pointer;
  padding:clamp(26px,3.4vw,54px);
  background:linear-gradient(152deg,#0e1620 0%,#05070b 100%);
  /* i colori del testo tornano quelli dei fondi scuri, come nelle
     vetrine dei banchi: senza, l'inchiostro da carta finirebbe sul nero */
  --ink:#f2f4f7; --text:#c3ccd6; --muted:#7f8b98;
  --em:color-mix(in srgb, var(--em-vivo) 68%, #f2f4f7);
  color:var(--ink)}
.manifesto__slab::-webkit-details-marker{display:none}
.manifesto__slab:hover{background:linear-gradient(152deg,#111b26 0%,#070a10 100%)}
.manifesto__slab:focus-visible{outline:2px solid var(--em-bright);outline-offset:-4px}
.manifesto__scena{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  color:var(--em-vivo);pointer-events:none;opacity:.5}
.manifesto__slab .sec__head{position:relative;z-index:1;margin:0}
.manifesto__slab .sec__head h2{color:var(--ink)}

/* Il richiamo in fondo alla lastra: un'area cliccabile senza una
   scritta che lo dice e' un indovinello, non un invito. La freccia
   gira con un filo di rimbalzo — non un rotate lineare, che per un
   gesto cosi' piccolo si sente meccanico — stessa idea del "+" che
   diventa "×" nell'altro <details> del foglio (.work__break), stesso
   linguaggio ma con piu' carattere. */
.manifesto__cta{position:relative;z-index:1;margin-top:clamp(20px,2.6vw,30px);
  display:inline-flex;align-items:center;gap:8px;color:#fff;
  padding:10px 18px;border-radius:999px;border:1px solid var(--em-light);
  background:var(--em-light);
  opacity:.92;transition:opacity .2s var(--ease),background-color .2s var(--ease);
  animation:cta-respiro 2.6s ease-in-out infinite}
@keyframes cta-respiro{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--em-light) 0%,transparent)}
  50%{transform:scale(1.05);box-shadow:0 0 16px 4px color-mix(in srgb,var(--em-light) 50%,transparent)}}
.manifesto__slab:hover .manifesto__cta{opacity:1;animation:none}
.manifesto__cta i{font-style:normal;display:inline-block}
/* due versioni del paragrafo: dal telefono molte cose non si possono
   fare (spostare i riquadri, tenere premuto), quindi il testo cambia e
   l'invito ad aprire le istruzioni sparisce */
.solo-piccolo{display:none}
@media (max-width:640px){
  .solo-largo{display:none}
  .solo-piccolo{display:block}
  .manifesto__cta--largo{display:none}
  /* le istruzioni sono quasi tutte per il computer: sul telefono la
     tendina non serve, quindi non si apre (vedi app.js) */
  .manifesto__corpo{display:none}
  .manifesto__slab{cursor:default}
}

/* La lastra risponde al tocco prima ancora che il contenuto cominci a
   crescere: un piccolo affondo, la stessa cosa che fa un tasto vero.
   Senza, il clic e il risultato erano scollegati — si vedeva la scatola
   crescere, non si sentiva il gesto che l'aveva causata. */
.manifesto__slab{transition:transform .15s var(--ease)}
.manifesto__slab:active{transform:scale(.992)}

/* Le sei istruzioni non compaiono in blocco: arrivano una via l'altra,
   leggermente sollevate e sfumate, con lo scarto di un ottavo di
   secondo l'una dall'altra. E' la differenza fra "la scatola si e'
   aperta" e "il contenuto e' arrivato" — la prima versione faceva solo
   crescere il contenitore, e il testo appariva tutto insieme non
   appena c'era spazio, che si sente meccanico quanto sembra.
   "backwards" tiene ogni riga invisibile durante il proprio ritardo,
   se no comparirebbero tutte insieme per poi "aspettare" ferme.
   Il reset globale di prefers-reduced-motion (piu' sopra nel foglio)
   spegne anche questa, azzerando animation-duration: non serve
   ripeterlo qui. */
@keyframes manifesto-arriva{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:translateY(0)}
}
/* La prima taratura (14px, 40ms di scarto, 400ms di durata, curva
   var(--ease) come il resto del sito) era corretta sul fotogramma
   congelato e invisibile a un clic vero — l'ho verificata solo cosi',
   ed era l'errore. Due correzioni, non una.

   La prima e' il tempo: piu' escursione (26px, il doppio) e piu' scarto
   fra una card e l'altra (90ms invece di 40) per leggere una sequenza
   invece di un lampo.

   La seconda e' la curva, ed e' quella che contava di piu'. var(--ease)
   e' cubic-bezier(.22,.72,.18,1): al 22% del tempo e' gia' al 72% del
   movimento. E' la curva giusta per un titolo che deve "arrivare e
   fermarsi" subito — sbagliata per mostrare una sequenza, perche' ogni
   card sembra "gia' arrivata" quasi appena parte, e lo scarto fra una e
   l'altra si vede solo nei primi istanti. Qui serve una curva che tenga
   il movimento visibile per PIU' della durata, non che lo esaurisca
   subito: cubic-bezier(.16,.6,.3,1), che al 22% del tempo e' solo al
   38% del movimento. Vale solo per questa cascata, non e' un secondo
   --ease del sito.

   Il ritardo di ognuna sta scritto DENTRO la stessa regola scoperta da
   [open], non in una regola nth-child separata: la scorciatoia
   "animation:" azzera animation-delay se lo si lascia fuori, e vince
   lei sulle regole nth-child perche' [open] la rende piu' specifica —
   l'ho gia' sbagliato una volta per questo. */
.manifesto[open] .istruzioni li:nth-child(1){animation:manifesto-arriva .55s cubic-bezier(.16,.6,.3,1) .05s backwards}
.manifesto[open] .istruzioni li:nth-child(2){animation:manifesto-arriva .55s cubic-bezier(.16,.6,.3,1) .14s backwards}
.manifesto[open] .istruzioni li:nth-child(3){animation:manifesto-arriva .55s cubic-bezier(.16,.6,.3,1) .23s backwards}
.manifesto[open] .istruzioni li:nth-child(4){animation:manifesto-arriva .55s cubic-bezier(.16,.6,.3,1) .32s backwards}
.manifesto[open] .istruzioni li:nth-child(5){animation:manifesto-arriva .55s cubic-bezier(.16,.6,.3,1) .41s backwards}
.manifesto[open] .istruzioni li:nth-child(6){animation:manifesto-arriva .55s cubic-bezier(.16,.6,.3,1) .5s backwards}
.manifesto[open] .istruzioni__nota{
  animation:manifesto-arriva .55s cubic-bezier(.16,.6,.3,1) .59s backwards}

/* Il corpo NON ha nessuna regola che lega la sua altezza a [open]. Due
   tentativi (grid-template-rows: 0fr/1fr, poi max-height) aprivano
   lisci e non si richiudevano mai: un secondo clic toglieva [open] ma
   il valore restava fermo su quello aperto. Misurato a fondo
   (audit/manifesto.mjs): capita SOLO sul contenuto diretto di un
   <details> — l'icona della freccia, che sta dentro <summary> e non
   viene mai nascosta dal browser, ruota avanti e indietro senza
   problemi con la stessa identica sintassi. E' il motore che, chiudendo
   nativamente un <details>, congela lo stile del suo contenuto diretto
   invece di ricalcolarlo — un limite del browser, non della regola, e
   capita anche senza una riga di JavaScript coinvolta.

   La soluzione che regge e' non combattere quel meccanismo: senza CSS
   qui, aprire e chiudere restano istantanei e SEMPRE corretti (il
   browser gestisce lui la visibilita', esattamente come fa gia' con
   .work__break altrove nel foglio). L'animazione morbida arriva da
   manifesto.js, che tocca l'attributo open solo agli estremi — mai
   mentre il contenuto e' a meta' — e quindi non incontra mai lo stato
   che il motore congela. */
.manifesto__lista{padding-inline:clamp(22px,3vw,42px)}
.manifesto__corpo .istruzioni{margin:clamp(22px,3vw,42px) 0 0}
.manifesto__corpo .istruzioni__nota{margin-bottom:clamp(22px,3vw,42px)}

/* come si comincia, scritto sotto il titolo del contatto */
.contatto__come{margin:0 0 22px;max-width:62ch;color:var(--text);font-size:var(--t-grande);line-height:1.6}


/* ═══════════════════════════════════════════════════════════════════
 * LA SCHEDA DI UNO STRUMENTO
 *
 * Un nome non e' una competenza: "Photoshop" lo scrivono tutti. La
 * scheda dice cosa ci faccio io, e prende il colore del suo gruppo —
 * arancio la grafica, ciano gli assistenti, viola il locale — cosi' si
 * capisce da dove si e' arrivati senza doverlo scrivere.
 * ═══════════════════════════════════════════════════════════════════ */
.scheda{
  color-scheme:dark;
  /* Il tasto Chiudi e' un .btn qualunque, e i .btn respirano nel colore
     di --em: qui dentro lo si fa respirare nel colore dello strumento
     invece che nel verde del sito, cosi' la scheda di Krea 2 chiude in
     magenta e quella di n8n chiude in viola, non tutte uguali. */
  --em:var(--tool);
  width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);
  padding:0;border:1px solid color-mix(in srgb,var(--tool) 40%,transparent);
  border-radius:var(--r-card);background:#0b0f16;color:#f2f4f7;
  font:400 var(--t-corpo)/1.6 var(--body);overflow:auto;overscroll-behavior:contain}
.scheda::backdrop{background:rgba(5,7,11,.72);backdrop-filter:blur(6px)}
.scheda__cat{margin:0;padding:18px 22px 0;color:var(--tool);
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}
.scheda h3{margin:6px 0 0;padding:0 22px;font-size:var(--d7);letter-spacing:-.01em;line-height:1.15}
/* Due blocchi separati, e si devono vedere separati: la definizione e'
   per chi non sa cosa sia lo strumento, l'elenco e' per chi vuole
   sapere cosa ci faccio. Un paragrafo solo li avrebbe impastati, ed era
   il difetto della prima versione — scritta bene e poco utile. */
.scheda__cos{margin:12px 0 0;padding:0 22px;color:#c3ccd6;font-size:var(--t-corpo);line-height:1.6}
.scheda__eti{margin:20px 0 0;padding:0 22px;color:var(--tool);
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}
.scheda__lista{margin:10px 0 20px;padding:0 22px;list-style:none;display:grid;gap:7px}
.scheda__lista li{position:relative;padding-left:17px;color:#f2f4f7;
  font-size:var(--t-corpo);line-height:1.5}
.scheda__lista li::before{content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:var(--r-tondo);background:var(--tool)}
.scheda__piede{position:sticky;bottom:0;display:flex;align-items:center;justify-content:center;
  gap:14px;padding:14px 22px 18px;background:#0b0f16;
  border-top:1px solid rgba(221,231,242,.08)}
@media (max-width:560px){
  .scheda h3{font-size:var(--d7)}
  .scheda__piede{flex-wrap:wrap}
  .scheda__piede .btn{min-height:46px}
}

/* ═══════════════════════════════════════════════════════════════════
 * L'EDITOR DEL KEY VISUAL — scrivi il tuo titolo, scegli il formato
 *
 * Stessa finestra modale delle altre (.serv/.scheda/.pal), un colore
 * suo (l'azzurro dell'editor, non quello dei casi ne' quello dei
 * gruppi di strumenti) cosi' si distingue subito dalle schede che
 * spiegano e si capisce che qui, invece, si lavora.
 * ═══════════════════════════════════════════════════════════════════ */
.fmtEdit{
  color-scheme:dark;
  --em:#5fb8e0;
  container-type:inline-size;
  width:min(880px,calc(100vw - 32px));max-height:calc(100dvh - 32px);
  display:flex;flex-direction:column;
  padding:0;border:1px solid color-mix(in srgb,var(--em) 40%,transparent);
  border-radius:var(--r-card);background:#0b0f16;color:#f2f4f7;
  font:400 var(--t-corpo)/1.6 var(--body);
  /* la finestra stessa non scorre piu': l'immagine e il piede sono
     riquadri fissi del layout a colonna, solo il pannello dei controlli
     (fmtEdit__lato) e' l'unico che scorre. Prima l'immagine era "sticky"
     dentro un unico scroller insieme agli slider: Chrome, scorrendo,
     a volte ridipingeva un pixel di uno slider sopra l'immagine
     incollata. Con due riquadri separati il bug non ha piu' un posto
     dove annidarsi. */
  overflow:hidden}
.fmtEdit::backdrop{background:rgba(5,7,11,.72);backdrop-filter:blur(6px)}
.fmtEdit__cat{margin:0;padding:18px 22px 0;color:var(--em);flex:0 0 auto;
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}
.fmtEdit h3{margin:6px 0 0;padding:0 22px;font-size:var(--d7);letter-spacing:-.01em;
  line-height:1.15;flex:0 0 auto}
.fmtEdit__corpo{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:0 22px}
.fmtEdit__anteprima{flex:0 0 auto;display:grid;justify-items:center;
  gap:6px;padding:14px 0 12px;background:#0b0f16;min-width:0}
/* Un canvas e' un elemento "replaced": senza min-width:0 il browser gli
   riserva comunque lo spazio della sua dimensione intrinseca (fino a
   720px), scavalcando qualunque max-width. */
.fmtEdit__zoomBox{position:relative;max-width:100%;overflow:hidden;touch-action:none;
  border:1px solid var(--rule);border-radius:var(--r-media);background:#06090e;cursor:zoom-in}
.fmtEdit__anteprima canvas{display:block;width:auto;max-width:100%;max-height:38vh;min-width:0;height:auto;
  transform-origin:50% 50%;user-select:none;-webkit-user-drag:none}
.fmtEdit__zoomHint{position:absolute;right:6px;bottom:6px;padding:3px 8px;
  border-radius:999px;background:rgba(5,7,11,.72);color:var(--muted);
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  pointer-events:none;opacity:0;transition:opacity .2s}
.fmtEdit__zoomBox[data-zoomed="true"] .fmtEdit__zoomHint{opacity:1}
.fmtEdit__formatoNome{margin:0;color:var(--muted);font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase}
/* l'unico pannello che scorre: tutto il resto della finestra e' fisso.
   Una barra di scorrimento sottile (non quella di sistema, larga anche
   17px) cosi' i campi non perdono spazio utile sulla destra. */
.fmtEdit__lato{display:grid;gap:16px;align-content:start;min-width:0;
  flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;
  /* la barra occupa spazio reale nel box (fino a 17px di sistema): la
     faccio sporgere fuori a destra con un margine negativo e la
     ripago in padding, cosi' il bordo dei campi resta dov'era prima,
     qualunque sia la larghezza vera della barra */
  width:calc(100% + 18px);margin-right:-18px;padding:4px 8px 18px 5px;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--em) 55%,transparent) transparent}
.fmtEdit__lato::-webkit-scrollbar{width:6px}
.fmtEdit__lato::-webkit-scrollbar-track{background:transparent}
.fmtEdit__lato::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--em) 55%,transparent);
  border-radius:999px}
.fmtEdit__campo{display:grid;gap:8px;min-width:0}
.fmtEdit__campo label{color:var(--muted);font-family:var(--mono);font-size:var(--t-mini);
  letter-spacing:.1em;text-transform:uppercase}
.fmtEdit__campo label output{color:var(--em)}
.fmtEdit__campo textarea,.fmtEdit__input{width:100%;box-sizing:border-box;min-width:0;
  resize:vertical;min-height:84px;padding:12px 14px;
  border:1px solid var(--rule);border-radius:var(--r-media);background:var(--panel-2);
  color:var(--ink);font:inherit;font-size:var(--t-corpo);line-height:1.4}
.fmtEdit__input{min-height:auto;resize:none}
.fmtEdit__select{cursor:pointer;color-scheme:dark}
.fmtEdit__select option{background:var(--panel-2);color:var(--ink)}
.fmtEdit__campo textarea:focus-visible,.fmtEdit__input:focus-visible{outline:2px solid var(--em);outline-offset:2px}
.fmtEdit__formati{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fmtEdit__formati button{display:grid;gap:2px;padding:10px 12px;text-align:left;min-width:0;
  border:1px solid var(--rule);border-radius:var(--r-media);
  background:var(--panel-2);color:var(--ink);font:inherit;cursor:pointer;
  transition:border-color .2s,background .2s}
.fmtEdit__formati button b{font-size:var(--t-mini);font-weight:600}
.fmtEdit__formati button span{color:var(--muted);font-size:10px;line-height:1.25}
.fmtEdit__formati button:hover{border-color:var(--em)}
.fmtEdit__formati button[aria-pressed="true"]{border-color:var(--em);
  background:color-mix(in srgb,var(--em) 16%,var(--panel-2))}
.fmtEdit__formati button[aria-pressed="true"] b{color:var(--em)}
.fmtEdit__font{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fmtEdit__font button{display:grid;gap:2px;padding:10px 6px;text-align:center;min-width:0;
  border:1px solid var(--rule);border-radius:var(--r-media);
  background:var(--panel-2);color:var(--ink);cursor:pointer;overflow:hidden;
  transition:border-color .2s,background .2s}
.fmtEdit__font button b{font-size:13px;font-weight:600;line-height:1.15;
  overflow-wrap:break-word;word-break:break-word}
.fmtEdit__font button span{color:var(--muted);font-size:9px;line-height:1.2;
  font-family:var(--body)}
.fmtEdit__font button:hover{border-color:var(--em)}
.fmtEdit__font button[aria-pressed="true"]{border-color:var(--em);
  background:color-mix(in srgb,var(--em) 16%,var(--panel-2))}
.fmtEdit__font button[aria-pressed="true"] b{color:var(--em)}
/* i tre versi del testo, come in un editor vero: tre tasti, un segno
   solo, niente etichetta a fianco che occupi spazio */
.fmtEdit__allinei,.fmtEdit__stile{display:flex;gap:8px}
.fmtEdit__stile b{font-family:Georgia,serif;font-weight:800;font-style:normal}
.fmtEdit__stile i{font-family:Georgia,serif;font-style:italic;font-weight:600}
.fmtEdit__pillo{width:44px;height:40px;display:grid;place-items:center;
  border:1px solid var(--rule);border-radius:var(--r-media);
  background:var(--panel-2);color:var(--ink);font-size:16px;cursor:pointer;
  transition:border-color .2s,background .2s}
.fmtEdit__pillo:hover{border-color:var(--em)}
.fmtEdit__pillo[aria-pressed="true"]{border-color:var(--em);color:var(--em);
  background:color-mix(in srgb,var(--em) 16%,var(--panel-2))}
/* i colori: pallini pieni, come in un vero pannello di grafica — il
   nome del colore non serve, si vede cos'e' */
.fmtEdit__colori{display:flex;flex-wrap:wrap;gap:8px}
.fmtEdit__tinta{width:30px;height:30px;border-radius:50%;cursor:pointer;
  background:var(--tinta);border:2px solid transparent;box-shadow:0 0 0 1px var(--rule);
  transition:transform .15s var(--ease),box-shadow .2s}
.fmtEdit__tinta:hover{transform:scale(1.1)}
.fmtEdit__tinta[aria-pressed="true"]{box-shadow:0 0 0 2px #0b0f16,0 0 0 4px var(--tinta)}
/* colore testo / colore sfondo: due selettori veri, fianco a fianco
   come in un pannello di photoshop in miniatura */
.fmtEdit__riga2{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:420px){.fmtEdit__riga2{grid-template-columns:1fr 1fr}}
.fmtEdit__riga2--stile{grid-template-columns:1fr 1fr}
.fmtEdit__pickerColore{width:100%;height:40px;padding:3px;box-sizing:border-box;
  border:1px solid var(--rule);border-radius:var(--r-media);
  background:var(--panel-2);cursor:pointer}
.fmtEdit__pickerColore::-webkit-color-swatch-wrapper{padding:0}
.fmtEdit__pickerColore::-webkit-color-swatch{border:none;border-radius:calc(var(--r-media) - 4px)}
.fmtEdit__pickerColore::-moz-color-swatch{border:none;border-radius:calc(var(--r-media) - 4px)}
/* Le tre azioni stanno tutte sulla stessa riga, stesso peso — nessuna
   vale piu' delle altre: chiudere, scaricare o applicare il titolo
   sono tre uscite equivalenti da questa finestra, non una scelta
   principale con due ripieghi accanto. */
.fmtEdit__piede{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:10px;padding:14px 22px 18px;
  background:#0b0f16;border-top:1px solid rgba(221,231,242,.08)}
/* la stessa X tonda degli altri popup del sito (video e immagini), ma
   DENTRO la finestra: .fmtEdit ha overflow:hidden, e messa sopra il bordo
   come negli altri popup veniva tagliata via — invisibile e non cliccabile */
.fmtEdit__chiudiX{position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;
  border-radius:var(--r-tondo);border:1px solid var(--rule);background:var(--panel-2);
  color:var(--ink);font-size:22px;line-height:1;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.fmtEdit__chiudiX:hover{background:var(--panel);border-color:var(--em-light)}
@media (max-width:560px){
  .fmtEdit__chiudiX{top:10px;right:10px;width:32px;height:32px;font-size:19px}
}
@media(max-width:559px){
  .fmtEdit__anteprima canvas{max-width:220px}
}

/* ═══════════════════════════════════════════════════════════════════
 * L'APERTURA DEI POPUP: A DIFFUSIONE, NON DI SCATTO
 *
 * .serv, .scheda e .pal sono la stessa finestra del sito (vedi il
 * commento sopra .serv): prima si materializzavano di colpo, come fa
 * <dialog> di suo con showModal(). Adesso arrivano fuori fuoco e si
 * risolvono a schermo — la sfocatura che si dirada e' l'idea di
 * "diffusione", non solo una dissolvenza.
 *
 * Tutto CSS, senza JavaScript: @starting-style descrive lo stato di
 * partenza appena il browser promuove il dialog in cima allo strato,
 * la transizione lo porta allo stato definito qui sotto. display e
 * overlay hanno bisogno di allow-discrete perche' sono proprieta' che
 * normalmente scattano invece di transire — e' quello che permette
 * anche alla CHIUSURA di dissolversi invece di sparire di scatto,
 * senza un onclose in JavaScript a gestirla.
 * ═══════════════════════════════════════════════════════════════════ */
.serv,.scheda,.pal,.video-lightbox,.fmtEdit,.img-lightbox{
  opacity:0;transform:scale(.96) translateY(10px);filter:blur(9px);
  transition:opacity .32s var(--ease),transform .36s var(--ease),filter .36s var(--ease),
    display .36s allow-discrete,overlay .36s allow-discrete}
.serv[open],.scheda[open],.pal[open],.video-lightbox[open],.fmtEdit[open],.img-lightbox[open]{opacity:1;transform:none;filter:blur(0)}
@starting-style{
  .serv[open],.scheda[open],.pal[open],.video-lightbox[open],.fmtEdit[open],.img-lightbox[open]{opacity:0;transform:scale(.96) translateY(10px);filter:blur(9px)}
}
.serv::backdrop,.scheda::backdrop,.pal::backdrop,.video-lightbox::backdrop,.fmtEdit::backdrop,.img-lightbox::backdrop{
  opacity:0;transition:opacity .32s var(--ease),display .32s allow-discrete,overlay .32s allow-discrete}
.serv[open]::backdrop,.scheda[open]::backdrop,.pal[open]::backdrop,.video-lightbox[open]::backdrop,.fmtEdit[open]::backdrop,.img-lightbox[open]::backdrop{opacity:1}
@starting-style{
  .serv[open]::backdrop,.scheda[open]::backdrop,.pal[open]::backdrop,.video-lightbox[open]::backdrop,.fmtEdit[open]::backdrop,.img-lightbox[open]::backdrop{opacity:0}
}

/* ═══════════════════════════════════════════════════════════════════
 * IL LIGHTBOX DEI VIDEO — un solo posto, per tutti i casi
 * ═══════════════════════════════════════════════════════════════════ */
.video-lightbox{
  color-scheme:dark;
  width:min(920px,calc(100vw - 32px));max-height:calc(100dvh - 96px);
  padding:0;border:0;border-radius:var(--r-card);background:#000;
  overflow:visible}
.video-lightbox::backdrop{background:rgba(3,6,9,.88);backdrop-filter:blur(6px)}
.video-lightbox__video{display:block;width:100%;max-height:calc(100dvh - 96px);
  border-radius:var(--r-card)}
.video-lightbox__chiudi{position:absolute;top:-44px;right:0;width:36px;height:36px;
  border-radius:var(--r-tondo);border:1px solid var(--rule);background:var(--panel-2);
  color:var(--ink);font-size:22px;line-height:1;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.video-lightbox__chiudi:hover{background:var(--panel);border-color:var(--em-light)}
@media (max-width:560px){
  .video-lightbox__chiudi{top:-40px;width:32px;height:32px;font-size:19px}
}

/* ═══════════════════════════════════════════════════════════════════
 * IL LIGHTBOX DELLE IMMAGINI — stessa lastra del video, per le tavole
 * che vanno lette da vicino (es. il riferimento prodotto degli eso)
 * ═══════════════════════════════════════════════════════════════════ */
.img-lightbox{
  color-scheme:dark;
  width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 96px);
  padding:0;border:0;border-radius:var(--r-card);background:#000;
  overflow:visible}
.img-lightbox::backdrop{background:rgba(3,6,9,.88);backdrop-filter:blur(6px)}
.img-lightbox img{display:block;width:100%;max-height:calc(100dvh - 96px);
  object-fit:contain;border-radius:var(--r-card)}
.img-lightbox__chiudi{position:absolute;top:-44px;right:0;width:36px;height:36px;
  border-radius:var(--r-tondo);border:1px solid var(--rule);background:var(--panel-2);
  color:var(--ink);font-size:22px;line-height:1;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.img-lightbox__chiudi:hover{background:var(--panel);border-color:var(--em-light)}
@media (max-width:560px){
  .img-lightbox__chiudi{top:-40px;width:32px;height:32px;font-size:19px}
}
/* l'affordance sull'immagine nella pagina: cursore a lente, un filo di
   sollevamento al passaggio, cosi' si capisce che si apre ingrandita
   prima ancora di cliccarci */
.eso__tavola img{cursor:zoom-in;transition:filter .2s var(--ease)}
.eso__tavola img:hover{filter:brightness(1.05)}

/* Le frecce per sfogliare: stessa lastra del bottone di chiusura,
   appoggiate ai bordi del video invece che sopra — cosi' non coprono
   mai l'ultimo fotogramma o i sottotitoli. */
.video-lightbox__freccia{position:absolute;top:50%;translate:0 -50%;
  width:44px;height:44px;border-radius:var(--r-tondo);
  border:1px solid var(--rule);background:var(--panel-2);color:var(--ink);
  font-size:26px;line-height:1;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),opacity .2s}
.video-lightbox__freccia:hover{background:var(--panel);border-color:var(--em-light)}
.video-lightbox__freccia[hidden]{display:none}
.video-lightbox__freccia--prima{left:-16px}
.video-lightbox__freccia--dopo{right:-16px}
@media (max-width:760px){
  /* sullo schermo stretto le frecce escono dal riquadro e finiscono
     fuori pagina: qui restano dentro, semitrasparenti sul video */
  .video-lightbox__freccia{width:38px;height:38px;font-size:22px;
    background:rgba(11,15,22,.7);border-color:rgba(221,231,242,.2)}
  .video-lightbox__freccia--prima{left:6px}
  .video-lightbox__freccia--dopo{right:6px}
}
.video-lightbox__piede{position:absolute;left:0;right:0;bottom:-34px;
  display:flex;align-items:center;justify-content:center;gap:14px}
.video-lightbox__titolo{margin:0;color:var(--muted);font-size:var(--t-micro);
  letter-spacing:.08em;text-transform:uppercase;text-align:center}
.video-lightbox__loop{display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-tondo);border:1px solid var(--rule);
  background:var(--panel-2);color:var(--muted);font-size:var(--t-micro);
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease)}
.video-lightbox__loop i{font-style:normal;font-size:13px;line-height:1}
.video-lightbox__loop[aria-pressed="true"]{color:var(--em-light);border-color:var(--em-light)}
.video-lightbox__loop:hover{background:var(--panel)}
@media (max-width:560px){.video-lightbox__piede{bottom:-30px;gap:10px}}

/* ═══════════════════════════════════════════════════════════════════
 * PIEDE DI PAGINA
 * Una sezione scura come le altre: dopo il profilo chiaro il sito la
 * arrotonda e la sovrappone da solo (.sec--chiara + .sec). Struttura da
 * sito professionale: invito all'azione grande, quattro colonne (chi
 * sono, sezioni, servizi, lavori), marchio gigante tagliato in basso e
 * riga finale. In fondo lascia spazio al menu fisso.
 * ═══════════════════════════════════════════════════════════════════ */
.piede{overflow:hidden;isolation:isolate;
  padding-block:clamp(56px,8vw,96px) clamp(92px,11vw,108px)}
.piede__scena{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  color:var(--em-vivo);opacity:.5;pointer-events:none}
.piede > :not(.piede__scena){position:relative;z-index:1}

.piede__invito{display:grid;gap:18px;padding-bottom:clamp(36px,5vw,64px);
  border-bottom:1px solid var(--rule)}
.piede__invito .eyebrow{margin:0}
.piede__titolo{margin:0;font-size:clamp(34px,8.4vw,86px);line-height:.98;
  letter-spacing:-.015em;text-transform:uppercase}
.piede__titolo em{font-style:normal;color:var(--em)}
.piede__azioni{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:6px}
.piede__posta{font-size:clamp(16px,4.4vw,24px);color:var(--em-bright);overflow-wrap:anywhere}

.piede__colonne{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,44px) 24px;
  padding-block:clamp(32px,5vw,56px) 0}
.piede__col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.piede__col a{color:var(--text);text-decoration:none;font-size:var(--t-corpo);line-height:1.3;
  border-bottom:1px solid transparent;transition:color .22s var(--ease),border-color .22s var(--ease)}
.piede__col a:hover,.piede__col a:focus-visible{color:var(--em-bright);border-bottom-color:var(--em)}
.piede__tit{margin:0 0 12px;font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.piede__col--chi{grid-column:1/-1}
.piede__col--chi p{margin:0 0 10px;max-width:38ch;color:var(--text);line-height:1.55}
.piede__col--chi .piede__tit{color:var(--em)}
.piede__luogo{display:flex;align-items:center;gap:8px;font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.piede__luogo i{width:8px;height:8px;border-radius:50%;background:var(--em);flex:none}

.piede__parola{margin:clamp(28px,4vw,52px) 0 clamp(14px,2vw,26px);font-family:var(--display);font-weight:600;
  font-size:clamp(100px,45vw,470px);line-height:.82;letter-spacing:-.02em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--em) 42%,transparent);
  user-select:none;white-space:nowrap}
.piede__parola span{-webkit-text-stroke-color:var(--em)}

.piede__fine{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 20px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.piede__su{color:var(--em-bright);text-decoration:none;display:inline-flex;gap:6px;align-items:center;min-height:32px}
.piede__su i{font-style:normal;transition:transform .22s var(--ease)}
.piede__su:hover i{transform:translateY(-3px)}

@media (min-width:820px){
  .piede__invito{grid-template-columns:1fr auto;align-items:end;column-gap:48px}
  .piede__invito .eyebrow,.piede__titolo{grid-column:1}
  .piede__azioni{grid-column:2;grid-row:1/3;flex-direction:column;align-items:flex-start;margin:0}
  .piede__colonne{grid-template-columns:1.4fr 1fr 1.2fr 1.2fr}
  .piede__col--chi{grid-column:auto}
}

/* Le stelline della Locanda brillano: ognuna col suo ritmo e il suo
   ritardo, cosi' non si accendono insieme. Solo trasparenza e scala, e
   non partono per chi ha chiesto meno movimento. */
@media (prefers-reduced-motion:no-preference){
  .stella{transform-box:fill-box;transform-origin:center;
    animation:stella-brilla var(--d,4s) ease-in-out var(--r,0s) infinite}
  @keyframes stella-brilla{
    0%,100%{opacity:.35;transform:scale(.8) rotate(0deg)}
    50%{opacity:1;transform:scale(1.18) rotate(14deg)}}
}

/* Scena della scheda CDI: infissi stilizzati a linea, dietro il testo.
   Una finestra con l'anta che si apre, uno scorrevole che scivola, una
   tapparella che si avvolge e un riflesso che attraversa il vetro. Solo
   trasform e opacity; si fermano fuori schermo (.cdi--fermo, app.js) e
   non partono con "riduci animazioni". */
.cdi__slab{position:relative;isolation:isolate;overflow:hidden}
.cdi__slab > :not(.cdi__scena){position:relative;z-index:1}
.cdi__scena{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  color:var(--c-vivo);opacity:.38;pointer-events:none}
.cdi__scena--stretto{display:none}
@media (max-width:839px){
  .cdi__scena--largo{display:none}
  .cdi__scena--stretto{display:block;opacity:.3}
}
@media (prefers-reduced-motion:no-preference){
  .cdi__anta{transform-box:fill-box;transform-origin:right center;
    animation:cdi-apri 9s ease-in-out infinite}
  .cdi__scorri{animation:cdi-scorri 10s ease-in-out infinite}
  .cdi__tapparella{transform-box:fill-box;transform-origin:center top;
    animation:cdi-tapparella 8s ease-in-out infinite}
  .cdi__luce{animation:cdi-luce 6.5s ease-in-out infinite}
  .cdi--fermo .cdi__anta,.cdi--fermo .cdi__scorri,
  .cdi--fermo .cdi__tapparella,.cdi--fermo .cdi__luce{animation-play-state:paused}
  @keyframes cdi-apri{0%,15%{transform:scaleX(1)}38%,60%{transform:scaleX(.16)}83%,100%{transform:scaleX(1)}}
  @keyframes cdi-scorri{0%,18%{transform:translateX(0)}42%,64%{transform:translateX(-96px)}90%,100%{transform:translateX(0)}}
  @keyframes cdi-tapparella{0%,12%{transform:scaleY(1)}40%,58%{transform:scaleY(.14)}86%,100%{transform:scaleY(1)}}
  @keyframes cdi-luce{0%,25%{transform:translateX(0);opacity:0}45%{opacity:1}75%,100%{transform:translateX(190px);opacity:0}}
}

/* Scena animata di Studio CETS: un drone in volo con il suo cono di
   scansione, il condominio con le finestre che si accendono a caso, e il
   foglio con le spunte che compaiono una dopo l'altra — i tre pezzi di
   questo lavoro (rilievi con drone, condomini, pratiche). Solo trasform e
   opacity; in pausa fuori schermo (.cest--fermo, app.js) e spente con
   "riduci animazioni". Sta sopra la scena statica e sotto il testo. */
.cest__slab{position:relative;isolation:isolate}
.cest__anima{color:var(--sk-tenue);opacity:.42}
.cest__fin{opacity:.14}
.cest__cono{opacity:.1}
@media (prefers-reduced-motion:no-preference){
  .cest__drone{animation:cest-giro 28s ease-in-out infinite}
  .cest__scena--stretto .cest__drone{animation-name:cest-giro-stretto}
  .cest__rotore{transform-box:fill-box;transform-origin:center;
    animation:cest-rotore .16s linear infinite alternate}
  .cest__cono{animation:cest-cono 3.4s ease-in-out infinite}
  .cest__fin{animation:cest-finestra 7s ease-in-out calc(var(--i) * -1.15s) infinite}
  .cest__spunta{opacity:0;animation:cest-spunta 6s ease-in-out calc(var(--i) * .9s) infinite}
  .cest--fermo .cest__drone,.cest--fermo .cest__rotore,.cest--fermo .cest__cono,
  .cest--fermo .cest__fin,.cest--fermo .cest__spunta{animation-play-state:paused}
  @keyframes cest-vola{0%,100%{transform:translate(0,0) rotate(-2deg)}
    35%{transform:translate(14px,-12px) rotate(2deg)}70%{transform:translate(-10px,-6px) rotate(-1deg)}}
  @keyframes cest-rotore{from{transform:scaleX(1)}to{transform:scaleX(.3)}}
  @keyframes cest-cono{0%,100%{opacity:.04}50%{opacity:.2}}
  @keyframes cest-finestra{0%,100%{opacity:.1}18%{opacity:.85}44%{opacity:.85}62%{opacity:.1}}
  @keyframes cest-spunta{0%,12%{opacity:0;transform:scale(.6)}30%,72%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(.6)}}
}
@media (prefers-reduced-motion:reduce){.cest__fin:nth-of-type(3n){opacity:.7}}
.cest__spunta{transform-box:fill-box;transform-origin:center}

/* Scena animata di Human Robots: un esoscheletro di profilo che cammina
   (coscia e ginocchio ruotano, la seconda gamba sfasata di mezzo passo),
   due ingranaggi che girano in verso opposto e un'onda di telemetria che
   scorre in una finestra col suo sensore che pulsa. Solo trasform e
   opacity; in pausa fuori schermo (.eso--fermo, app.js) e spenti con
   "riduci animazioni". */
.eso__anima{color:var(--sk-tenue);opacity:.18}
.eso__sensore{opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .eso__gamba,.eso__stinco,.eso__piede,.eso__ingranaggio{transform-origin:0 0}
  .eso__gamba--a{animation:eso-anca 8.4s linear infinite}
  .eso__gamba--b{animation:eso-anca 8.4s linear -4.2s infinite}
  .eso__stinco--a{animation:eso-ginocchio 8.4s ease-in-out infinite}
  .eso__piede--a{animation:eso-caviglia 8.4s ease-in-out infinite}
  .eso__stinco--b{animation:eso-ginocchio 8.4s ease-in-out -4.2s infinite}
  .eso__piede--b{animation:eso-caviglia 8.4s ease-in-out -4.2s infinite}
  .eso__anca{animation:eso-pulsa 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  .eso__ingranaggio{animation:eso-gira 16s linear infinite}
  .eso__ingranaggio--r{animation-direction:reverse;animation-duration:9s}
  .eso__onda{animation:eso-onda 1.9s linear infinite}
  .eso__sensore{transform-box:fill-box;transform-origin:center;animation:eso-sensore 1.9s ease-in-out infinite}
  .eso--fermo .eso__gamba,.eso--fermo .eso__stinco,.eso--fermo .eso__piede,.eso--fermo .eso__anca,
  .eso--fermo .eso__ingranaggio,.eso--fermo .eso__onda,.eso--fermo .eso__sensore{animation-play-state:paused}
  /* Un passo completo: appoggio del tallone (gamba avanti), spinta (gamba indietro), oscillazione (gamba che torna avanti).
     L'anca avanza a velocita' costante durante l'appoggio e riparte piano; il ginocchio si piega solo quando la gamba
     e' in aria; la caviglia tiene la punta alta al tallone e spinge a fine appoggio. Avanti = angolo negativo. */
  @keyframes eso-anca{0%{transform:rotate(-22deg);animation-timing-function:linear}
    58%{transform:rotate(20deg);animation-timing-function:cubic-bezier(.45,.05,.4,1)}100%{transform:rotate(-22deg)}}
  @keyframes eso-ginocchio{0%{transform:rotate(3deg)}14%{transform:rotate(12deg)}40%{transform:rotate(3deg)}
    58%{transform:rotate(34deg)}74%{transform:rotate(62deg)}92%{transform:rotate(12deg)}100%{transform:rotate(3deg)}}
  @keyframes eso-caviglia{0%{transform:rotate(-10deg)}16%{transform:rotate(1deg)}42%{transform:rotate(-4deg)}
    58%{transform:rotate(18deg)}72%{transform:rotate(4deg)}90%{transform:rotate(-12deg)}100%{transform:rotate(-10deg)}}
  @keyframes eso-pulsa{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
  @keyframes eso-gira{to{transform:rotate(360deg)}}
  @keyframes eso-onda{from{transform:translateX(0)}to{transform:translateX(-60px)}}
  @keyframes eso-sensore{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.7);opacity:1}}
}

/* Copertina del CDI: e' una foto senza scritte, quindi il nome sta sopra,
   in grande e centrato, con una sfumatura scura sotto perche' si legga
   su qualunque parte della foto. Le altre copertine hanno il testo
   dentro l'immagine. */
.vetrina__foto{position:relative;display:block;width:100%;line-height:0}
.vetrina__foto::after{content:"";position:absolute;inset:0;border-radius:var(--r-min);
  background:linear-gradient(180deg,rgba(20,11,40,.05) 30%,rgba(20,11,40,.62) 100%);pointer-events:none}
.vetrina__scritta{position:absolute;left:0;right:0;bottom:10%;z-index:1;text-align:center;
  font-style:normal;font-family:var(--display);font-weight:600;
  font-size:clamp(20px,2.3vw,30px);line-height:.95;letter-spacing:.01em;text-transform:uppercase;
  color:#fff;text-shadow:0 2px 10px rgba(20,11,40,.6)}

/* badge durata rimosso dalle schede video */
.locanda__durata,.union__durata,.eso__durata,.cest__durata{display:none}

/* Human Robots: titolo in acciaio pesante sovraimpresso alla foto */
.vetrina__foto--acciaio::after{background:linear-gradient(180deg,rgba(4,8,14,0) 35%,rgba(4,8,14,.7) 100%)}
.vetrina__scritta--acciaio{bottom:9%;font-weight:900;letter-spacing:.02em;line-height:.92;
  font-size:clamp(19px,2.1vw,27px);color:#c9d1d9;
  background:linear-gradient(180deg,#fff 0%,#dfe5ea 26%,#7d8791 50%,#e9eef2 58%,#8c96a0 82%,#4b545d 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:.6px rgba(10,14,20,.9);text-shadow:none;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 3px 5px rgba(0,0,0,.85))}
.sr-solo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Sfondo dell'eroe: un contenitore grande quanto tutto il blocco, con dentro il canvas alto
   quanto la finestra, fermo (sticky) mentre scorri. Lo sfondo arriva fino in fondo all'eroe
   senza stacchi e senza margini negativi. overflow:clip non crea un contenitore di scorrimento,
   quindi sticky resta agganciato alla finestra. */
.hero { overflow: clip; }
.hero__fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__fondo > #gl {
  position: sticky; inset: 0 auto auto 0; display: block;   /* inset prima di top: altrimenti lo annulla */
  width: 100%; max-width: none; height: 100svh; pointer-events: auto;
}
@media (pointer: coarse) { .hero__fondo > #gl { touch-action: pan-y; } }

/* Eroe su desktop: tutto centrato e il video in scala con lo schermo.
   Il video e' verticale (9:16): prima misurava 684x1216 e su un monitor da 1080 di altezza
   usciva dallo schermo. Ora la sua altezza non supera lo schermo meno lo spazio per la
   barra in alto e un po' d'aria; la larghezza ne segue le proporzioni. */
@media (min-width: 901px) {
  .hero__content { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero__content > * { max-width: min(100%, 980px); }
  /* Sigla, riga sotto e titolo a sinistra; la lista, il video, i marchi e i pulsanti restano centrati */
  .hero__content > .eyebrow,
  .hero__content > .hero__studio,
  .hero__content > h1 { align-self: flex-start; text-align: left; max-width: min(100%, 980px); }
  .hero__punti { align-self: flex-start; width: 100%; max-width: none; text-align: left; }   /* a filo con il titolo, su tutta la larghezza */
  /* la lista e' piu' grande: testo e icone crescono con lo schermo */
  .hero__punti .hero__copy { font-size: calc(clamp(20px, 1.6vw, 32px) * var(--sc-testi, 1)); }
  .hero__punto { gap: clamp(14px, 1.2vw, 22px); align-items: center; }
  .hero__punto__icona { width: calc(clamp(38px, 2.8vw, 54px) * var(--sc-testi, 1)); height: calc(clamp(38px, 2.8vw, 54px) * var(--sc-testi, 1)); margin-top: 0; }
  .hero__punto + .hero__punto { margin-top: 1em; }
  .hero__spot {
    width: max(260px, min(100%, calc((100svh - 176px) * 9 / 16)));
    max-width: none;
    margin-inline: auto;
  }
  .hero__spot video { max-height: calc(100svh - 176px); object-fit: contain; }
  .vetrina { width: min(100%, 980px); }
  .hero__actions { justify-content: center; }
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(5,7,11,.2) 0%, rgba(5,7,11,.5) 22%, rgba(5,7,11,.66) 50%, rgba(5,7,11,.5) 78%, rgba(5,7,11,.2) 100%),
      linear-gradient(0deg, rgba(5,7,11,.85) 0%, transparent 10%);
  }
}


/* ── Eroe su desktop: dati, confine e cursore ───────────────────────────
   La barra dei dati e la linea del confine erano nascoste con l'attributo hidden:
   ora ci sono, fisse in basso, solo nella prima schermata. Il testo e le zone vuote
   lasciano passare il mouse, cosi' il trascinamento funziona su tutto lo sfondo. */
@media (max-width: 900px) {
  .read, .hud, .rail { display: none; }
}
@media (min-width: 901px) {
  .hud, .rail { position: fixed; opacity: 0; pointer-events: none; transition: opacity .25s cubic-bezier(.23, 1, .32, 1); }
  .hud { bottom: 100px; }
  .rail { bottom: 178px; }
  body.hero-vivo .hud { opacity: 1; pointer-events: auto; }
  body.hero-vivo .rail { opacity: 1; }
  .hero__content { pointer-events: none; }
  .hero__content > * { pointer-events: auto; }
  .hero__content > .eyebrow,
  .hero__content > .hero__studio,
  .hero__content > h1,
  .hero__content > .hero__punti { pointer-events: none; }
  .hero h1 { text-shadow: 0 2px 26px rgba(0, 0, 0, .55); }
}

/* Cursore a mirino sopra lo sfondo, con scia di scintille (solo mouse) */
.hero-cursore {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  pointer-events: none; opacity: 0;
  color: var(--em-vivo);
  transition: opacity .18s cubic-bezier(.23, 1, .32, 1);
  will-change: transform;
}
.hero-cursore.on { opacity: 1; }
.hero-cursore svg { display: block; overflow: visible; filter: drop-shadow(0 0 7px color-mix(in srgb, currentColor 65%, transparent)); }
.hero-cursore svg * { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero-cursore .c-punto { fill: currentColor; stroke: none; }
.hero-cursore.is-hold { color: #fff; }
.hero-cursore__dati {
  position: absolute; left: 60px; top: 62px; white-space: nowrap;
  font: 600 12px/1 var(--mono); letter-spacing: .08em; color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, .85);
  opacity: 0; transform: translateY(4px);
  transition: opacity .15s cubic-bezier(.23, 1, .32, 1), transform .15s cubic-bezier(.23, 1, .32, 1);
}
.hero-cursore.is-drag .hero-cursore__dati { opacity: 1; transform: none; }
.hero-scia { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 59; pointer-events: none; }
body.hero-cursore-on #gl { cursor: none; }
@media (pointer: coarse) { .hero-cursore, .hero-scia { display: none; } }


/* ── Testata: 5 voci, le stesse della barra in basso (senza i numeri) ── */
.bar__nav a[data-solo-largo] { display: inline-flex; }

/* ── Barra in basso su desktop: si chiude verso destra e si rimette dal pulsante ──
   Movimento sullo schermo = ease-in-out forte; comparsa = ease-out. Solo transform e opacity. */
.navdock__chiudi, .navdock-apri { display: none; }
@media (min-width: 901px) {
  .navdock {
    transition: transform .5s cubic-bezier(.77, 0, .175, 1), opacity .35s cubic-bezier(.23, 1, .32, 1), visibility 0s;
  }
  .navdock__chiudi {
    display: grid; place-items: center; position: relative; z-index: 2; align-self: center;
    width: 34px; height: 34px; margin: 0 -10px 0 6px; padding: 0; border-radius: 50%;
    border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
    transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
  }
  .navdock__chiudi:hover, .navdock__chiudi:focus-visible {
    color: var(--em-light); border-color: var(--em-dim);
    background: color-mix(in srgb, var(--em) 12%, transparent);
  }
  .navdock__chiudi:focus-visible { outline: 2px solid var(--em-bright); outline-offset: 2px; }
  .navdock__chiudi svg, .navdock-apri svg {
    width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* chiusa: scivola a destra, si rimpicciolisce e sparisce verso il pulsante */
  .navdock.chiuso {
    transform: translateX(calc(-50% + 50vw - 160px)) scale(.2);
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform .5s cubic-bezier(.77, 0, .175, 1), opacity .3s cubic-bezier(.23, 1, .32, 1) .1s, visibility 0s .5s;
  }
  .navdock-apri {
    display: flex; align-items: center; gap: 8px; position: fixed; z-index: 290;
    right: 96px; bottom: 24px; height: 46px; padding: 0 16px 0 14px; border-radius: var(--r-pill);
    background: rgba(8, 12, 18, .88); backdrop-filter: blur(14px);
    border: 1px solid var(--em-dim); color: var(--em-light);
    font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    opacity: 0; transform: translateX(28px) scale(.85); pointer-events: none; visibility: hidden;
    transition: transform .45s cubic-bezier(.23, 1, .32, 1) .1s, opacity .3s cubic-bezier(.23, 1, .32, 1) .1s, visibility 0s .5s;
  }
  .navdock.chiuso + .navdock-apri { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: .18s, .18s, 0s; }
  .navdock-apri:hover, .navdock-apri:focus-visible { border-color: var(--em); color: #fff; }
  .navdock-apri:focus-visible { outline: 2px solid var(--em-bright); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .navdock, .navdock.chiuso, .navdock-apri { transition-duration: .01s !important; transition-delay: 0s !important; }
  .navdock.chiuso { transform: translateX(-50%); }
}

/* ── CDI: l'etichetta dell'indirizzo e la finestra in scala con lo schermo ── */
@media (min-width: 901px) {
  .cdi__url { width: clamp(220px, 22vw, 340px); padding: 7px 18px; font-size: clamp(13px, 1vw, 16px); border-radius: 26px; }
  /* la finestra non supera lo schermo: barra e anteprima 16:10 stanno insieme nell'altezza disponibile */
  .cdi__finestra { width: min(100%, calc((100svh - 170px) * 1.6)); margin-inline: auto; }
}

/* ── Formati: su desktop una griglia regolare, tre per riga, anteprime della stessa misura ──
   Le schede hanno proporzioni diverse (9:16, 4:5, 1:1, 3:2, 16:9, 21:9): lo si vede dentro
   l'anteprima, che sta in una scatola 4:3 uguale per tutte, cosi' righe e bordi si allineano. */
@media (min-width: 901px) {
  .formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); columns: auto; gap: 14px; align-items: stretch; }
  .formats > *, .formats[data-gr] > *:nth-child(n) { margin: 0; grid-column: auto; break-inside: auto; }
  .formats figure { display: flex; flex-direction: column; }
  .formats canvas { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #06090e; flex: 1 1 auto; }
}


/* ── Lavori: niente cifra grande, titolo e testo a filo con il margine ── */
.ap-numero .sec__head { padding-left: 0; }
.ap-numero .sec__head::before { display: none; }

/* ── Colore della scena: barra dei dati, linea del confine e cursore lo seguono ── */
.rail i { background: var(--scena-em, var(--em)); box-shadow: 0 0 12px color-mix(in srgb, var(--scena-em, var(--em)) 70%, transparent); transition: background-color .6s ease, box-shadow .6s ease; }
.rail b { background: var(--scena-em, var(--em-bright)); transition: background-color .6s ease; }
.hud dd.on, .hud__istruzione b { color: var(--scena-em, var(--em)); transition: color .6s ease; }
.scene-pick button[aria-pressed="true"] { border-color: var(--scena-em, var(--em)); }
.hero-cursore { color: var(--scena-em, var(--em-vivo)); transition: opacity .18s cubic-bezier(.23, 1, .32, 1), color .6s ease; }

/* ── Barra dei dati su desktop: ferma sotto l'intestazione, su una riga sola ──
   Prima stava in basso e si sovrapponeva alla lista e al video. Il contenuto dell'eroe
   parte piu' in basso di quanto serve alla barra, cosi' non si toccano. */
@media (min-width: 901px) {
  :root { --hud-h: 50px; }
  .hero { --hero-pt: calc(var(--bar) + 40px + var(--hud-h) + 14px); padding-top: var(--hero-pt); }
  .hud {
    top: var(--bar); bottom: auto; height: var(--hud-h);
    padding: 0 var(--gutter); align-items: center; flex-wrap: nowrap;
    gap: clamp(14px, 2.2vw, 36px);
    border-top: 1px solid var(--rule);
    background: linear-gradient(180deg, rgba(5, 7, 11, .86), rgba(5, 7, 11, .55));
  }
  .hud__istruzione { flex: 1 1 auto; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud dl { flex: none; flex-wrap: nowrap; }
  .hud .hud__extra, .hud .hud__hint { display: none; }
  .hud .scene-pick { flex: none; }
  .rail { top: calc(var(--bar) + var(--hud-h)); bottom: auto; }
  .rail__capo { display: none; }
  .read { top: calc(var(--bar) + var(--hud-h) + 26px); }
}


/* Il video sta nel blocco sotto l'intestazione: se ti fermi vicino, la pagina lo allinea sotto
   l'header (il distacco viene da scroll-padding-top: 20px) e non arriva fino al bordo alto.
   Aggancio morbido (proximity), solo su desktop; il video entra intero fra header e barra in basso. */
@media (min-width: 901px) {
  html { scroll-snap-type: y proximity; }
  .hero__spot { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}


/* ── Pannello colori: sezione dei caratteri ── */
.pal__tipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 10px 0 12px; }
.pal__tipo-gruppo { margin: 0; padding: 12px 14px 14px; border: 1px solid var(--rule); border-radius: var(--r-media); min-width: 0; }
.pal__tipo-gruppo legend { padding: 0 6px; color: var(--em); }
.pal__tipo-riga { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 8px; font-size: var(--t-mini); color: var(--text); }
.pal__tipo-riga select { grid-column: 2 / 4; min-width: 0; padding: 7px 10px; border-radius: var(--r-min); border: 1px solid var(--rule); background: var(--panel-2); color: var(--ink); font: inherit; }
.pal__tipo-riga input[type="range"] { min-width: 0; accent-color: var(--em); }
.pal__tipo-riga output { font-family: var(--mono); font-size: var(--t-micro); color: var(--muted); min-width: 3.4ch; text-align: right; }


/* ── Pannello colori: su desktop e' quasi a tutta pagina, in due colonne ── */
@media (min-width: 901px) {
  .pal { width: min(1180px, calc(100vw - 64px)); max-height: calc(100dvh - 48px); }
  .pal__colonne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .pal__col { min-width: 0; padding-bottom: 8px; }
  .pal__col + .pal__col { border-left: 1px solid rgba(221, 231, 242, .08); }
  .pal__tipo { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .pal__colonne, .pal__col { display: block; }
}

/* ── Carosello dei lavori, piu' grande su desktop ── */
@media (min-width: 901px) {
  .vetrina { width: min(100%, 1360px); }
  .vetrina__caso { width: clamp(150px, 13vw, 230px); }
  .vetrina__caso b { font-size: clamp(15px, 1.15vw, 20px); }
  .vetrina__caso span { font-size: clamp(11px, .85vw, 13px); }
}

/* ── Il mirino in tutto il sito: il cursore del browser sparisce, tranne dove serve ──
   La classe mirino-on la toglie mirino.js sopra campi di testo, video, finestre e iframe. */
body.mirino-on, body.mirino-on * { cursor: none !important; }
.hero-cursore.is-link svg { filter: drop-shadow(0 0 10px color-mix(in srgb, currentColor 85%, transparent)); }

/* ── Barra in basso: il pulsante che la chiude pulsa piano, come un invito ── */
@keyframes navdock-onda { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes navdock-freccia { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .navdock__chiudi::after, .navdock-apri::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    border: 1px solid var(--em-bright); opacity: 0;
    animation: navdock-onda 2.6s cubic-bezier(.23, 1, .32, 1) infinite;
  }
  .navdock__chiudi svg { animation: navdock-freccia 2.6s ease-in-out infinite; }
  .navdock:not(.chiuso) .navdock__chiudi:hover::after, .navdock-apri:hover::after { animation-play-state: paused; }
}


/* ── Testata: comandi rapidi per grandezza e carattere, accanto al colore ── */
.bar__tipo { display: flex; align-items: center; gap: 6px; }
.bar__tipo button {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r-min);
  border: 1px solid var(--rule); background: transparent; color: var(--text);
  font: 600 12px/1 var(--mono); letter-spacing: .04em; cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.bar__tipo button:hover:not(:disabled), .bar__tipo button:focus-visible {
  color: var(--em); border-color: var(--em-dim); background: color-mix(in srgb, var(--em) 10%, transparent);
}
.bar__tipo button:focus-visible { outline: 2px solid var(--em-bright); outline-offset: 2px; }
.bar__tipo button:disabled { opacity: .35; cursor: default; }
@media (max-width: 1240px) { .bar__tipo { display: none; } }

/* ── Eroe su desktop: piu' aria fra le parti, cosi' si staccano ── */
@media (min-width: 901px) {
  .hero__spot { margin-top: clamp(56px, 8vh, 96px); }
  .vetrina { margin-top: clamp(40px, 5.5vh, 64px); }
  .hero__actions { margin-top: clamp(44px, 6.5vh, 76px); }
}

/* Mobile: la riga di voci in testata si nasconde (resta la barra in basso) */
@media (max-width: 900px) { .bar__nav { display: none !important; } .bar__cta { margin-left: auto; } }

/* ── Telefono: in testata i colori e il tasto Contatti ── */
.bar__contatti { display: none; }
@media (max-width: 900px) {
  .bar__contatti {
    display: inline-flex; align-items: center; order: 4; flex: none; min-height: 40px; padding: 0 12px;
    border: 1px solid var(--em); border-radius: var(--r-min); color: var(--em);
    font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  }
  .bar__contatti:active { background: var(--em); color: var(--stage); }
  .bar__contatti { margin-left: 8px; }
}
@media (max-width: 560px) {
  .bar__pal { gap: 0; margin-right: 0; }
  .bar__pal button[data-pal-veloce] { display: inline-grid; width: 30px; height: 44px; }
  .bar__pal__piu { width: 30px; height: 44px; font-size: var(--t-grande); }
  .bar__pal__piu::before { content: none; }
}

/* Tolto su richiesta: tasto Verdetto in testata (il cursore a mirino e' tornato) */
.bar__cta { display: none !important; }

/* ── Piu' colori in testata; Contatti a filo con il margine destro ── */
.bar__pal [data-pal-veloce="corallo"] { --campione: #ff6b57; }
.bar__pal [data-pal-veloce="lime"]    { --campione: #a6e22e; }
.bar__pal [data-pal-veloce="indaco"]  { --campione: #6c5ae6; }
@media (max-width: 560px) {
  .bar { gap: 4px; }
  .bar__pal { margin-left: auto; margin-right: 0; }
  .bar__pal button[data-pal-veloce] { width: 25px; }
  .bar__pal__piu { width: 25px; }
  .bar__pal button[data-pal-veloce]::before { width: 18px; height: 18px; }
  .bar__contatti { margin-left: 6px; margin-right: 0; padding: 0 10px; }
}
@media (max-width: 900px) {
  .bar__pal, .bar__pal__eti + .bar__pal { margin-left: 8px; }
  .bar__contatti { margin-left: auto; }
}

/* ── Pulsanti dell'eroe: piu' grandi e piu' in basso, a meta' fra il carosello e il bordo ── */
@media (min-width: 901px) {
  .hero__actions { margin-top: clamp(64px, 10vh, 112px); margin-bottom: clamp(24px, 4vh, 48px); gap: 16px; }
  .hero__actions .btn { min-height: 64px; padding: 0 40px; font-size: clamp(14px, 1.05vw, 17px); }
}


/* ── Prestazioni: fuori schermo le animazioni si fermano ── */
.fuori, .fuori *, .fuori *::before, .fuori *::after { animation-play-state: paused !important; }


/* ── 360°: maniglie che pulsano ai lati, per far capire che si gira ── */
.eso__360-maniglia {
  position: absolute; top: 46%; width: 28px; height: 28px; margin-top: -14px;
  display: grid; place-items: center; border-radius: 50%; pointer-events: none;
  border: 1px solid var(--em); background: color-mix(in srgb, var(--em) 14%, transparent);
  color: var(--em-bright); font: 600 16px/1 var(--mono); transition: opacity .3s var(--ease);
}
.eso__360-maniglia--sx { left: 6px; }
.eso__360-maniglia--dx { right: 6px; }
.eso__360-maniglia i { font-style: normal; transform: translateY(-1px); }
.eso__360-maniglia::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--em-bright);
  opacity: 0; animation: eso360-onda 2.4s cubic-bezier(.23, 1, .32, 1) infinite;
}
.eso__360-maniglia--dx::after { animation-delay: 1.2s; }
@keyframes eso360-onda { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.eso__360-stage--via .eso__360-maniglia { opacity: .75; }
@media (prefers-reduced-motion: reduce) { .eso__360-maniglia::after { animation: none; } }


/* Il drone di Studio CETS gira per tutta la scheda: un giro largo che passa su tutta la scena
   e ritorna al punto di partenza, inclinandosi nelle curve. Solo transform. */
@media (prefers-reduced-motion:no-preference){
  @keyframes cest-giro{
    0%,100%{transform:translate(0,0) rotate(0deg)}
    14%{transform:translate(-330px,-140px) rotate(-7deg)}
    30%{transform:translate(-680px,-40px) rotate(-3deg)}
    46%{transform:translate(-560px,250px) rotate(6deg)}
    62%{transform:translate(-120px,300px) rotate(4deg)}
    78%{transform:translate(330px,170px) rotate(-4deg)}
    90%{transform:translate(250px,-110px) rotate(-7deg)}}
  @keyframes cest-giro-stretto{
    0%,100%{transform:translate(0,0) rotate(0deg)}
    16%{transform:translate(-200px,-260px) rotate(-7deg)}
    34%{transform:translate(-120px,-560px) rotate(-3deg)}
    52%{transform:translate(200px,-420px) rotate(6deg)}
    70%{transform:translate(250px,-80px) rotate(4deg)}
    86%{transform:translate(-80px,260px) rotate(-5deg)}}
}

/* 360: il canvas sta sopra l'immagine; quando disegna, l'immagine sotto resta solo per chi non ha JS */
.eso__360-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.eso__360-stage--canvas .eso__360-canvas{display:block}
.eso__360-stage--canvas .eso__360-img{visibility:hidden}
/* niente filtri sul canvas che cambia a ogni frame (troppo costosi): l'alone e l'ombra sono statici, dietro */
.eso__360-stage::before{content:"";position:absolute;inset:6% 8% 4%;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at 50% 46%,color-mix(in srgb,var(--sk-alone,#14c08a) 30%,transparent),transparent 68%)}
.eso__360-stage::after{content:"";position:absolute;left:18%;right:18%;bottom:1%;height:5%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.5),transparent 70%)}
.eso__360-canvas,.eso__360-img{position:relative;z-index:1}
.eso__360-canvas{position:absolute}

/* Su desktop la sezione "Posizione nella pagina" del pannello e' nascosta */
@media (min-width: 901px) { .pal__sez--pos { display: none !important; } }


/* le due maniglie battono a ritmi diversi: una piu' veloce, una piu' lenta, sfasate */
@media (prefers-reduced-motion:no-preference){
  .eso__360-maniglia--sx{animation:eso360-batte 1.9s ease-in-out infinite}
  .eso__360-maniglia--dx{animation:eso360-batte 2.7s ease-in-out .8s infinite}
  .eso__360-maniglia--sx::after{animation-duration:1.9s;animation-delay:0s}
  .eso__360-maniglia--dx::after{animation-duration:2.7s;animation-delay:.8s}
}
@keyframes eso360-batte{0%,100%{transform:scale(1);box-shadow:0 0 0 0 transparent}50%{transform:scale(1.14);box-shadow:0 0 14px color-mix(in srgb,var(--em) 55%,transparent)}}

.piede__legale{font-size:inherit}
.piede__legale a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.piede__legale a:hover{color:var(--em-bright)}


/* ── 360: meno lavoro di rendering mentre il dispositivo dondola ── */
/* le maniglie battono solo con transform e opacity (niente ombra animata) e si fermano dopo il primo tocco */
@keyframes eso360-batte { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.14); opacity: 1; } }
.eso__360-maniglia { will-change: transform; }
.eso__360-stage--via .eso__360-maniglia, .eso__360-stage--via .eso__360-maniglia::after { animation: none !important; }
.eso__360-canvas { transform: translateZ(0); }
/* il filo di luce sulla barra in basso e' tornato: scorre da sinistra a destra con un transform (leggero, niente ridisegno dello sfondo) */


/* ── 360: oscillazione a riposo con trasformazione 3D (niente cambio di fotogramma) ── */
.eso__360-canvas { transform-origin: 50% 62%; }
@keyframes eso360-oscilla {
  0%   { transform: perspective(820px) rotateY(-11deg) translateX(-6px); }
  100% { transform: perspective(820px) rotateY(11deg) translateX(6px); }
}
@media (prefers-reduced-motion: no-preference) {
  .eso__360-riposo { animation: eso360-oscilla 3.2s cubic-bezier(.45, 0, .55, 1) infinite alternate; will-change: transform; }
}


/* ── Human Robots: la gamba e gli ingranaggi dietro camminano da sinistra a destra, poi ricominciano ──
   Le due posizioni (--ca e --cb, in unita' della scena) le calcola app.js in base alla parte di scena
   che si vede davvero nella lastra. Solo transform e opacity. */
@media (prefers-reduced-motion: no-preference) {
  .eso__cammino { animation: eso-cammina var(--cam-durata, 16s) linear infinite; }
  .eso--fermo .eso__cammino { animation-play-state: paused; }
  @keyframes eso-cammina {
    0%   { transform: translateX(var(--ca, -500px)); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateX(var(--cb, 200px)); opacity: 0; }
  }
}

/* ── 360: le due frecce laterali piu' staccate dal dispositivo ── */
.eso__360-maniglia--sx { left: -46px; }
.eso__360-maniglia--dx { right: -46px; }
@media (max-width: 420px) {
  .eso__360-maniglia--sx { left: -30px; }
  .eso__360-maniglia--dx { right: -30px; }
}


/* ── Telefono: meno lavoro per la grafica ──
   Niente sfocature dietro barre e finestre (sono gia' quasi opache), niente parallasse legato allo scorrimento
   sulle scene, niente filtri animati. Stesso aspetto, molto meno da ridisegnare a ogni scorrimento. */
@media (max-width: 840px) {
  .bar, .navdock, .cookie, .nodo-window, .nodo-fab, .nodo-hint, .nodo-tour-bubble, .nodo-header {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .bar { background: rgba(5, 7, 11, .94); }
  .navdock { background: rgba(9, 13, 20, .95); }
  .union__scena, .eso__scena, .cest__scena, .locanda__scena { animation: none !important; }
  .navdock::after { animation: none !important; }
}


/* le frecce laterali si premono */
.eso__360-maniglia { pointer-events: auto; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; padding: 0; z-index: 3; }
.eso__360-maniglia:hover, .eso__360-maniglia:focus-visible { opacity: 1 !important; border-color: var(--em-bright); background: color-mix(in srgb, var(--em) 28%, transparent); }
.eso__360-maniglia:active { transform: scale(.92); }
.eso__360-maniglia:focus-visible { outline: 2px solid var(--em-bright); outline-offset: 3px; }

/* Hero desktop: i pulsanti stanno a meta' fra il carosello dei lavori e la fine del blocco (stesso spazio sopra e sotto) */
@media (min-width: 901px) {
  .hero { --gap-az: clamp(120px, 12vw, 190px); padding-bottom: calc(var(--gap-az) - 36px) !important; }
  .hero__actions { margin-top: var(--gap-az) !important; margin-bottom: 36px !important; }
}

/* Telefono stretto: la testata non deve uscire dallo schermo e tagliare "Contatti" */
@media (max-width: 420px) {
  .bar { padding-inline: 14px; gap: 2px; }
  .bar__pal button[data-pal-veloce], .bar__pal__piu { width: 22px; }
  .bar__pal button[data-pal-veloce]::before { width: 16px; height: 16px; }
  .bar__contatti { padding: 0 8px; letter-spacing: .06em; margin-left: auto; }
}
@media (max-width: 350px) {
  .bar__pal button[data-pal-veloce]:nth-of-type(n+5) { display: none; }
}

/* La croce al centro del mirino ha il colore del puntatore classico (bianco con filo scuro) */
.hero-cursore svg .c-mirino { stroke: #fff; stroke-width: 1.8; filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1px #000); }
.hero-cursore svg .c-punto { fill: #fff; filter: drop-shadow(0 0 1.5px #000); }

/* Sul confine mano/macchina il mirino diventa una presa orizzontale: frecce ai lati e angoli allargati, per far capire che si trascina */
.hero-cursore .c-frecce { opacity: 0; transition: opacity .15s ease; }
.hero-cursore.is-presa .c-frecce { opacity: 1; animation: presa-pulsa .9s ease-in-out infinite; }
.hero-cursore.is-presa .c-anello, .hero-cursore.is-presa .c-archi { opacity: .3; }
.hero-cursore.is-presa .c-mirino { stroke: #fff; }
.hero-cursore svg .c-frecce path { stroke-width: 2; filter: drop-shadow(0 0 3px currentColor); }
@keyframes presa-pulsa { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.18); } }
@media (prefers-reduced-motion: reduce) { .hero-cursore.is-presa .c-frecce { animation: none; } }
.hero-cursore .c-frecce { transform-box: view-box; transform-origin: 50% 50%; }

/* Il mirino sta sopra tutto, anche sopra il pannello di Nous, l'avviso cookie e la barra */
.hero-cursore { z-index: 2147483600; }
.hero-scia { z-index: 2147483599; }

/* Mirino più piccolo (da 96 a 60 px): meno ingombrante sopra i contenuti */
.hero-cursore { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.hero-cursore svg { width: 100%; height: 100%; }


/* Fascio di luce sulla barra in basso: un punto luminoso con coda che scorre da sinistra a destra, in ciclo */
.navdock::before {
  inset: 0; width: 100%; background-size: auto; background-position: 0 0; opacity: 1;
  background: linear-gradient(100deg, transparent 30%,
    color-mix(in srgb, var(--em-light) 28%, transparent) 44%,
    color-mix(in srgb, var(--em-light) 85%, transparent) 50%,
    color-mix(in srgb, var(--em-light) 28%, transparent) 56%, transparent 70%);
  transform: translate3d(-100%, 0, 0); will-change: transform;
  animation: navdock-fascio 4.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes navdock-fascio { 0% { transform: translate3d(-100%, 0, 0); } 100% { transform: translate3d(100%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .navdock::before { animation: none; transform: translate3d(0, 0, 0); opacity: .35; } }