/* Stili delle 4 pagine di approfondimento — usa le variabili e le classi di
   base gia' definite in site.css (palette, .topbar, .section, .card, .case,
   .stat-row, .pillar, .tl, .member, .cta-box, footer...). Qui solo cio' che
   e' nuovo: hero senza nastro, macchina da scrivere, coverflow, campo
   d'inchiostro, il richiamo grafico al circuito stampato. */

/* ---------------- hero senza nastro 3D ---------------- */
.hero-piatto{
  position:relative; overflow:hidden;
  padding:clamp(120px,16vw,200px) var(--gutter) clamp(70px,8vw,110px);
  isolation:isolate;
}
.hero-piatto .ink-field{
  position:absolute; inset:0; width:100%; height:100%; z-index:-1;
  display:block; opacity:.85;
  /* NESSUNA sfocatura, né qui né dentro il canvas: la morbidezza viene tutta
     dallo stiramento di un buffer minuscolo (vedi LATO in pagine.js), che il
     browser interpola gratis.
     Le due strade già provate e scartate, entrambe misurate:
     - `ctx.filter` dentro il canvas, raggio 45-90px per riempimento: 8 fps;
     - `filter: blur()` in CSS su questo elemento: 23 fps — sembra gratis, ma
       il canvas si ridipinge a ogni frame e quindi la sfocatura va rifatta a
       ogni frame su un'area grande. Il raggio quasi non conta (12px dava 25
       fps, 26px ne dava 23): conta il RIFARLA. Senza: 60 fps pieni. */
}
/* il testo dell'hero deve stare nello stesso contenitore centrato delle
   sezioni sotto (.section-in, max-width:1360px) — altrimenti su schermi
   larghi resta incollato al margine sinistro mentre il resto e' centrato. */
.hero-piatto .hero-in{ max-width:1360px; margin:0 auto; position:relative; }
.hero-piatto::after{
  content:""; position:absolute; inset:auto 0 0 0; height:26%; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, var(--paper) 100%);
}
.hero-piatto .kicker{ display:flex; align-items:center; gap:10px; }
/* :not(.mw) esclude il titolo WebGL dell'hero centrato: senza, questa regola
   (0,1,1 di specificità: una classe + un elemento) batteva silenziosamente
   `margin:0 auto` e `max-width:640px` di `.mw` (0,1,0) — stesso identico bug
   già in memoria del progetto per `.foot-mark img` contro `.only-dark`,
   ripetuto qui: il titolo restava incollato a sinistra invece che centrato
   come il sottotitolo sotto. Fix alla fonte (si esclude il caso, non si
   prova a vincere lo scontro di specificità da lontano) invece di alzare la
   specificità di `.mw` — quel secondo approccio si rompe di nuovo alla
   prossima regola più specifica che qualcuno aggiunge qui. */
.hero-piatto h1:not(.mw){ margin:14px 0 0; max-width:16ch; }
.hero-piatto .lede{ margin-top:18px }
.hero-piatto .tags{ margin-top:22px }

/* breadcrumb minimo: Home / Sezione */
.briciole{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
           color:var(--ink-3); margin:0 0 20px; display:flex; align-items:center; gap:8px; }
.briciole a{ color:var(--ink-3); text-decoration:none; } .briciole a:hover{ color:var(--ink) }
.briciole i{ font-style:normal; opacity:.5 }

/* ---------------- hero centrato (ARVertise) ---------------- */
.hero-centro{ text-align:center; }
/* `.briciole`/`.kicker` sono righe flex: `text-align` non li centra (non è
   testo a capo, sono flex-item allineati da `justify-content`). Serve un
   selettore con specificità maggiore di `.hero-piatto h1:not(.mw)` più sotto
   (stessa identica classe di bug già capitata due volte in questo progetto:
   `.hero-piatto .hero-centro …`, CON lo spazio — è un discendente, "dentro
   `.hero-centro` dentro `.hero-piatto`" — non un selettore composto
   `.hero-piatto.hero-centro` che richiederebbe un solo elemento con
   entrambe le classi: qui invece sono su due elementi annidati diversi,
   la section e il div `.hero-in`). */
.hero-piatto .hero-centro .briciole,
.hero-piatto .hero-centro .kicker{ justify-content:center; }
.hero-piatto .hero-centro h1:not(.mw){
  margin-left:auto; margin-right:auto;
  max-width:none;   /* qui il titolo va a capo per scelta (i <br> in pagina), non per un tetto in ch pensato per l'ARVertise a una parola sola */
}
.hero-piatto .hero-centro .lede{ margin-left:auto; margin-right:auto; }

/* Titolo "Mesh Text": un vero reticolo WebGL2, non tessere — porting fedele
   di "Mesh Text Hover" di OriginKit, vedi initMeshText in pagine.js.
   `.mw` è l'<h1>: dentro il testo VERO (`.mw-vero`) e il canvas WebGL
   (`.mw-tela`). Finché il motore non parte il testo si vede normale (senza
   JS, o se WebGL2 non è disponibile, resta un titolo — non un buco);
   `.mw-attivo`, messa da pagine.js solo quando il canvas disegna davvero, lo
   toglie dalla vista lasciandolo a lettori di schermo e motori di ricerca.
   Altezza dimezzata rispetto al primo tentativo (era clamp(150px,19vw,250px)):
   richiesto esplicitamente "almeno il 40% più piccolo" — qui il taglio è
   ~48% su ogni punto della scala, verificato con getBoundingClientRect(). */
.mw{
  position:relative; margin:0 auto;
  width:100%; max-width:640px;
  height:clamp(80px, 10vw, 130px);
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(26px,6vw,80px);   /* lo legge il canvas per la misura del font */
}
.mw-vero{ font-weight:700; letter-spacing:-.03em; line-height:1; }
.mw-attivo .mw-vero{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.mw-tela{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; }
.mw:not(.mw-attivo) .mw-tela{ display:none; }
.hero-centro .hero-sub{
  margin:clamp(6px,1.4vw,18px) auto 0; max-width:22ch;
  font-weight:700; letter-spacing:-.025em; line-height:1.12;
  font-size:clamp(21px,3.1vw,40px); color:var(--ink);
  text-wrap:balance;
}
.hero-centro .hero-sub em{ font-style:normal; position:relative; white-space:nowrap; }
.hero-centro .hero-sub em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.075em;
  background:var(--accent-page, var(--amber)); border-radius:2px;
}

/* ---------------- ARVertise: testo a sinistra, video nel telefono a destra ---- */
/* `auto` sulla seconda colonna, non una frazione: il telefono ha una larghezza
   sua e con `.95fr` si prendeva metà riga lasciando un vuoto largo quanto lui
   fra sé e il testo. Così la colonna è esattamente il telefono e il testo si
   allarga a riempire il resto. */
.arv-due{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,5vw,72px); align-items:center;
}
.arv-claim{
  margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.1;
  font-size:clamp(26px,3.9vw,52px);
}
.arv-testo .lede{
  margin-top:clamp(15px,1.9vw,24px); font-size:clamp(15.5px,1.4vw,18.5px);
  max-width:54ch;   /* più largo dei 46ch di base: qui la colonna è più ampia */
}

/* cornice del telefono. Il video è una registrazione dello SCHERMO (contiene già
   la sua barra di stato e la "dynamic island"), quindi qui serve solo la scocca:
   aggiungerne un'altra sopra darebbe due tacche sovrapposte. */
.telefono{
  position:relative; margin:0 auto;
  width:min(330px, 74vw); aspect-ratio:332/720;
  background:linear-gradient(150deg,#2a2c33,#0c0d10 42%,#17181d);
  border-radius:clamp(30px,3.4vw,44px); padding:clamp(7px,.8vw,10px);
  box-shadow:0 40px 70px -30px rgba(18,22,38,.55),
             0 2px 6px rgba(18,22,38,.18),
             inset 0 0 0 1px rgba(255,255,255,.09);
}
.telefono video{
  width:100%; height:100%; display:block; object-fit:cover;
  border-radius:clamp(24px,2.7vw,35px); background:#000;
}
/* tasti laterali: due tacche sottili, quel tanto che basta a leggerlo come oggetto */
.telefono::before, .telefono::after{
  content:""; position:absolute; left:-2px; width:2px; border-radius:2px;
  background:linear-gradient(180deg,#33353d,#1b1c21);
}
.telefono::before{ top:22%; height:7%; }
.telefono::after{ top:32%; height:11%; }

@media (max-width:900px){
  .arv-due{ grid-template-columns:1fr; gap:clamp(26px,6vw,44px); }
  .arv-testo{ order:1 } .arv-telefono{ order:2 }
}

/* ---------------- case studies: titolo grande centrato + locandina a corredo ---- */
.cs-head{ text-align:center; max-width:56ch; margin:0 auto clamp(36px,5vw,64px); }
.cs-head h2{ margin:0; font-size:clamp(32px,5.6vw,68px); }
/* .lede ha un suo max-width (46ch, site.css) piu' stretto di .cs-head e
   margin:0 di base — senza margini automatici resta appoggiato al bordo
   sinistro invece di centrarsi nel contenitore (segnalato dall'utente su
   "Clicca una foto o usa le frecce..."). Stessa correzione gia' usata altrove
   sul sito per lo stesso identico problema (.hero-piatto .hero-centro .lede,
   .sec-head.centrata .lede), mai arrivata qui. */
.cs-head .lede{ margin-left:auto; margin-right:auto; }

.case-poster{
  position:absolute; z-index:1; bottom:-22px; left:-30px;
  width:106px; aspect-ratio:2/3; object-fit:cover; border-radius:11px;
  box-shadow:0 20px 40px -14px rgba(18,22,38,.5), 0 0 0 4px var(--paper);
  transform:rotate(-7deg);
}
.case.rev .case-poster{ left:auto; right:-30px; transform:rotate(7deg); }
/* .case-poster usata dentro un .reel vero (caso Comunicazione: locandina
   Percy Jackson sopra al banner Yobee), non solo dentro .telefono come
   nell'uso originale ARVertise: ".reel img"/".reel video" (site.css) ha
   specificita' piu' alta (classe+elemento) e da sola vincerebbe su
   ".case-poster" (una sola classe), facendola esplodere a piena tela.
   Stessa disciplina di ".hero-piatto h1:not(.mw)" gia' in questo file:
   si fissa qui, con un selettore ancora piu' specifico, non alzando la
   specificita' di ".case-poster" stessa (si romperebbe di nuovo alla
   prossima regola pensata per lei). */
.reel .case-poster{ top:auto; right:auto; bottom:-22px; left:-30px; width:106px; height:auto; }
.case.rev .reel .case-poster{ left:auto; right:-30px; }
@media (max-width:520px){
  .case-poster{ width:76px; bottom:-12px; }
  /* stessa ragione della regola ".reel .case-poster" qui sopra: senza
     ripeterla anche qui dentro, sotto i 520px l'inset dentro un .reel
     resterebbe a 106px (l'ultima dichiarazione di larghezza vista dal
     browser, non essendo in un media query proprio) invece di rimpicciolire */
  .reel .case-poster{ width:76px; bottom:-12px; }
}
/* variante "+30%" richiesta esplicitamente per la locandina Percy Jackson
   (case Comunicazione/Yobee): stessa proporzione fra base e mobile
   dell'originale (106->76, qui 138->99), non solo il numero da desktop
   applicato ovunque. Selettore a 3 classi/combinatori apposta, per battere
   ".reel .case-poster" qui sopra a parita' di regola piu' specifica vinta
   per numero di classi, non per ordine nel file. */
.reel .case-poster.case-poster-lg{ width:138px; }
@media (max-width:520px){
  .reel .case-poster.case-poster-lg{ width:99px; }
}
/* Piu' grande ma sporgente uguale (-30px) avrebbe accavallato il testo a
   fianco: il rettangolo ruotato di una locandina piu' grande, con lo stesso
   sbordo dal reel, arriva piu' lontano verso destra (misurato: da 6px di
   margine dal testo a un vero accavallamento). Qui si riduce lo sbordo, non
   la dimensione appena aumentata — il "+30%" richiesto resta. */
.case.rev .reel .case-poster.case-poster-lg{ right:-2px; bottom:-155px; }
@media (max-width:860px){
  /* sotto la soglia le case sono impilate (site.css, .case.rev{grid-template-columns:1fr}):
     qui non c'e' piu' nessun testo a fianco da proteggere, si torna allo
     sbordo pieno per l'effetto "angolo della foto" voluto */
  .case.rev .reel .case-poster.case-poster-lg{ right:-30px; bottom:-12px; }
}
/* Uno sbordo cosi' vistoso (necessario per scavalcare il logo, vedi sopra)
   sporge dalla riga PIU' del padding inferiore della sezione: a schermi
   larghi (dove la banner e' piu' alta e quindi -155px pesa relativamente
   meno, cioe' la locandina scende ancora piu' in basso in assoluto)
   arrivava a scavalcare cio' che viene dopo. Spazio extra solo qui, apposta
   per questa sporgenza, non sul padding generico della sezione.
   Portato da 60px a 130px il 2026-09-15, quando e' arrivata una terza case
   (Notorious/Grand Prix) subito dopo questa: i 60px bastavano solo contro
   la CTA finale di allora, misurati per QUEL vicino — con la nuova case
   subito sotto la locandina di Yobee ci finiva sopra per 51px (misurato a
   1440px, non a occhio). 130px lascia margine anche piu' largo. */
@media (min-width:861px){
  body.comunicazione .case.rev{ padding-bottom:130px; }
}
/* "bottom" piu' negativo di quanto serva solo per il "+30%": il banner ha il
   logo del film ("PERCY JACKSON AND THE OLYMPIANS") che occupa quasi tutta
   la meta' destra dell'immagine fino a circa il 54% dell'altezza — la
   locandina, appesa all'angolo, ci passava sopra (segnalato dall'utente).
   Spostata piu' in basso, oltre quel 54%, cade nell'area vuota fra il logo
   e "KINGS LEAGUE ITALY", ed essendo comunque il coperchio (in alto sul
   banner, per lo z-index) resta "esterna" come richiesto invece che infilata
   nel testo. */
/* La stessa identica cosa valeva gia', anche senza toccare nulla, per
   l'altra case di questa pagina (Minecraft): lo sbordo pieno (-30px) del
   video-locandina del totem arrivava a toccare o accavallare il testo a
   fianco per tutta la fascia desktop (misurato: da -19px a -1px di
   margine, cioe' sempre accavallato). Non era mai stato segnalato prima
   ma e' lo stesso identico problema ora messo a fuoco dall'utente sull'altra
   case — corretto qui, scoped alla sola pagina come il resto sopra. */
body.comunicazione .case:not(.rev) .reel .case-poster{ left:-2px; }
@media (max-width:860px){
  body.comunicazione .case:not(.rev) .reel .case-poster{ left:-30px; }
}
/* Lo sbordo -30px qui sopra (pensato per il margine ampio del desktop) e'
   piu' largo del gutter mobile (18px a 390px — meno ancora, per via della
   rotazione della locandina che allarga il riquadro reale oltre la sua
   larghezza dichiarata) — misurato: 22px di overflow orizzontale VERO
   (documentElement.scrollWidth > clientWidth), con tanto di scorrimento
   laterale fastidioso ai bordi della pagina (segnalato dall'utente).
   Ridotto qui SOLO sotto gli 860px, mantenendo un accenno dell'effetto
   "angolo della foto" senza mai uscire dal bordo reale dello schermo —
   stessi identici selettori delle due regole che sovrascrive (qui sopra e
   la .case-poster-lg piu' sotto), per vincere per ordine nel file invece
   di rialzare artificialmente la specificita'. Verificato dopo: 0px di
   overflow orizzontale da 320px a 860px (passo largo, non solo un punto). */
@media (max-width:860px){
  body.comunicazione .case:not(.rev) .reel .case-poster{ left:-7px; }
  .case.rev .reel .case-poster.case-poster-lg{ right:-7px; }
}

/* ---------------- Comunicazione: case allineate in alto, non al centro ----
   ".case{align-items:center}" (site.css) e' la regola condivisa da tutte
   le pagine che usano .case: sta bene quando il media e' molto piu' alto
   del testo E verticale (es. il telefono di ARVertise, 4x il testo — li'
   centrare fa apparire il telefono "sospeso" accanto al paragrafo, voluto).
   Qui invece il media e' un banner orizzontale via via meno alto: centrare
   spingeva il titolo a partire a meta' immagine invece che in cima,
   segnalato dall'utente con screenshot ("il testo e' sotto l'immagine").
   Scoped alla sola pagina (classe su <body>, stesso schema di HOLO) per
   non cambiare le altre pagine che usano lo stesso .case senza che nessuno
   l'abbia chiesto. */
body.comunicazione .case{ align-items:start; }
/* Eccezione alla regola qui sopra: il video di Grand Prix e' verticale
   (.reel.tall), non un banner orizzontale come le altre due case di questa
   pagina — qui vale di nuovo la ragione ORIGINALE di ".case{align-items:
   center}" in site.css (media molto piu' alto del testo E verticale, va
   centrato non allineato in cima) che il resto di questa pagina disattiva
   apposta. Senza questa eccezione il testo (piu' corto) lascia un vuoto
   enorme sotto di se' mentre il video, molto piu' alto, continua ancora
   (segnalato dall'utente: "questo spazio così ampio sulla sinistra").
   :has() invece di una classe in piu' sull'HTML: la ragione per centrare
   e' proprio ".reel.tall", non serve un secondo marcatore che dica la
   stessa cosa — e resta specifico a QUESTA case, le altre due (.reel.wide)
   restano allineate in cima come richiesto in origine. */
body.comunicazione .case:has(.reel.tall){ align-items:center; }
/* Le due case sono due grid indipendenti (".case" e' lei stessa il grid
   container, non una riga di una grid piu' grande che le contiene entrambe):
   la stessa "1.1fr 1fr" su due grid diverse non garantisce lo stesso confine
   in pixel, perche' senza min-width:0 una traccia "auto" si allarga fino al
   min-content del suo contenuto (qui il .reel, che ha una sua width minima
   intrinseca) invece di fermarsi alla frazione pura — segnalato dall'utente:
   il testo della seconda case non cadeva sotto l'immagine della prima.
   min-width:0 sui figli diretti spegne quell'influenza e lascia dividere lo
   spazio solo alle fr, identiche riga per riga. */
body.comunicazione .case > *{ min-width:0; }
/* Anche a colonne perfettamente allineate (min-width:0 sopra), il testo
   della seconda case NON cade sotto l'immagine della prima: ".case.rev" usa
   lo stesso "1.1fr 1fr" della prima, ma il trucco direction:rtl che la
   specchia inverte solo l'ORDINE visivo delle due tracce, non le loro
   larghezze — la prima traccia (1.1fr, piu' larga) resta assegnata al primo
   figlio nel DOM (qui il testo), che pero' ora appare a destra. Il confine
   fra le due tracce cade quindi 62px piu' a sinistra di dove finisce il
   controimmagine della prima case. Scambiando le frazioni SOLO qui, la
   traccia piu' larga va al media (ora a sinistra) e il confine torna a
   coincidere. */
/* Solo da desktop in su: sotto la soglia .case/.case.rev collassano a una
   colonna (site.css, @media max-width:860px) e qui non c'e' piu' nessun
   bordo fra due tracce da allineare — ma questa regola, senza un suo media
   query, ha specificita' piu' alta (body+3 classi) di quella di site.css
   (2 classi) e la batteva SEMPRE, anche sotto gli 860px: risultato, la
   seconda case restava a due colonne strette (testo in una colonna lunga,
   immagine rimpicciolita) e la sua locandina, con lo sbordo negativo
   pensato per un .reel a piena larghezza, usciva dal bordo dello schermo
   (segnalato dall'utente, misurato: 22px di overflow orizzontale reale a
   390px). */
@media (min-width:861px){
  body.comunicazione .case.rev{ grid-template-columns:1fr 1.1fr; }
}

/* ---------------- icone di tecnologia (Web3), al posto dei pallini colore ---- */
.pillar-icon{ display:block; width:30px; height:30px; margin-bottom:14px; }
.pillar-icon svg{ width:100%; height:100%; }

/* ---------------- riconoscimenti/partnership (Chi siamo): logo ufficiale a colori,
   non in scala di grigi come i loghi-cliente sopra — qui il colore è parte della
   credibilità del badge (es. il verde NVIDIA), non un elemento da uniformare ---- */
.recognition{ padding:clamp(26px,3.4vw,38px); display:flex; flex-direction:column; gap:18px; }
.recognition-logo{ height:44px; width:auto; max-width:100%; object-fit:contain; align-self:flex-start; }
/* stessa ancora visiva del logo (in testa alla card, stesso ruolo), ma
   testo vero: usata dove non c'e' un logo autorizzato all'uso (ANICA, MePA
   — 2026-09-17). */
.recognition-nome{
  margin:0; font-family:var(--display); font-weight:700;
  font-size:clamp(22px,2.2vw,28px); letter-spacing:-.02em; color:var(--ink);
}
.recognition p{ margin:0; font-size:15.5px; color:var(--ink-2); line-height:1.66; }

/* ---------------- sezione "Partnership" (Chi siamo): griglia di loghi ----
   Ogni logo arriva con la sua forma e le sue proporzioni (un wordmark largo,
   un'icona quadrata...): il riquadro fisso + object-fit:contain e' lo stesso
   principio di .clients-logo in home — cosi' pesano tutti uguale a colpo
   d'occhio, invece che un logo enorme e uno minuscolo affiancati. A colori
   veri (niente scala di grigi), stesso criterio di .recognition qui sopra:
   sono partnership da valorizzare, non un bollino da sfumare sullo sfondo. */
.partner-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:920px){ .partner-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .partner-grid{ grid-template-columns:1fr; } }
.partner-tile{
  display:flex; align-items:center; justify-content:center;
  height:104px; padding:16px 22px;
  transition:box-shadow .18s, transform .18s;
}
.partner-tile img{ max-width:78%; max-height:70%; width:auto; height:auto; object-fit:contain; }
a.partner-tile:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -22px rgba(18,22,38,.3); }

/* ---------------- loghi cliente sopra il titolo di ogni case (Web3) ---------- */
.case-brand{ display:flex; align-items:center; gap:20px; margin-bottom:14px; }
.case-brand img{ height:clamp(26px,3vw,36px); width:auto; filter:grayscale(1); }

/* ---------------- loghi partner sotto un pillar (Comunicazione): stessa
   grana di .case-press qui sopra (grigio spento, si accende al passaggio
   del mouse), ma senza l'etichetta "Se ne parla su" — qui basta il titolo
   del pillar sopra per dare il contesto ---- */
.pillar-partners{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:16px; }
.pillar-partners a{ display:block; line-height:0; }
.pillar-partners img{ height:33px; width:auto; max-width:168px; object-fit:contain;
                       filter:grayscale(1); opacity:.72; transition:opacity .15s; }
.pillar-partners a:hover img, .pillar-partners a:focus-visible img{ opacity:1; }
/* alcuni loghi partner arrivano bianco-su-trasparente (pensati per un fondo
   scuro, come sul sito di chi li possiede): su questa pagina chiara
   sarebbero invisibili. invert() li porta scuri prima del grayscale gia'
   previsto sopra, senza dover rifare il file. Selettore doppio (qui e su
   .case-brand) perche' lo stesso logo Yobee torna anche sopra la case di
   Kings League: una sola regola, riusabile in entrambi i contesti. */
.pillar-partners img.invert-logo, .case-brand img.invert-logo, .partner-tile img.invert-logo{ filter:invert(1) grayscale(1); }

/* ---------------- case Giometti: riga-annuncio stampa + loghi di rimando ---- */
.case-press-line{ margin-top:10px; font-size:11.5px; font-style:italic; letter-spacing:.01em;
                   color:var(--ink-3); line-height:1.55; max-width:52ch; }
.case-press{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:18px; }
.case-press span{ font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink-3); }
.case-press a{ display:block; line-height:0; }
.case-press img{ height:20px; width:auto; filter:grayscale(1); opacity:.62; transition:opacity .15s; }
.case-press a:hover img, .case-press a:focus-visible img{ opacity:1; }
/* link testuale invece di un logo, quando non ce n'è uno adatto (es. una sola fonte stampa di nicchia) */
.case-press a:not(:has(img)){
  display:inline; line-height:1.4; font-size:11px; font-weight:700; letter-spacing:.02em;
  color:var(--ink); text-decoration:underline; text-underline-offset:3px; opacity:.75;
}
.case-press a:not(:has(img)):hover{ opacity:1; }

/* ---------------- eventi: badge città (colori Eldorado, non stemmi ufficiali) + anno --- */
.case-year{ font-size:11px; color:var(--ink-3); font-weight:600; letter-spacing:.03em; }
.city-badge{
  display:inline-block; padding:5px 13px; border-radius:99px;
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:color-mix(in srgb, var(--c, var(--ink)) 15%, transparent);
  color:var(--c, var(--ink));
}
.case-noimg span{
  font-size:clamp(22px,3vw,34px); font-weight:800; letter-spacing:-.02em; text-transform:uppercase;
  color:var(--c, var(--ink)); opacity:.5;
}

/* ---------------- macchina da scrivere ---------------- */
.tw-prefix{ color:inherit }
.tw-text{ color:var(--accent-page, var(--amber)) }
.tw-cursor{ color:var(--accent-page, var(--amber)); font-weight:400; }
.tw-cursor.tw-off{ opacity:0 }

/* ---------------- divisore a circuito stampato ---------------- */
.trace-div{ display:flex; align-items:center; gap:10px; margin:0 0 16px; color:var(--accent-page, var(--amber)); }
.trace-div .pad{ width:7px; height:7px; border-radius:99px; background:currentColor; flex:none; }
.trace-div .linea{ height:1px; width:34px; background:currentColor; opacity:.55; flex:none; }
.trace-div .linea.lunga{ width:64px }
.trace-div span{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; }

/* ---------------- coverflow ---------------- */
.coverflow{
  position:relative; height:clamp(280px,38vw,420px); display:flex; align-items:center;
  justify-content:center; outline:none;
  /* Le card non attive sbirciano di proposito ai lati (transform:translateX
     su .cf-item, qui sotto), ma senza overflow:hidden restano nel flusso a
     piena larghezza: su schermi stretti le card piu' lontane dal centro
     (--off:±2) sporgono decine di px oltre il bordo vero della pagina,
     allargando tutto il documento e creando lo scorrimento laterale
     fastidioso segnalato dall'utente su un'altra sezione della stessa
     pagina (mai notato qui perche' sul coverflow non c'era nulla da
     "sistemare" a vista — solo la larghezza del documento cresceva).
     Trovato con un controllo automatico di overflow orizzontale, non
     segnalato dall'utente. Nessun effetto visibile su desktop (le card
     gia' rientravano nel contenitore li'). */
  overflow:hidden;
}
.cf-track{ position:relative; width:100%; height:100%; }
.cf-item{
  position:absolute; top:50%; left:50%; margin:0; cursor:pointer;
  width:clamp(160px,26vw,320px); height:clamp(120px,19vw,220px);
  transform:translate(-50%,-50%) translateX(calc(var(--off) * 62%)) scale(calc(1 - min(2,abs(var(--off))) * .22));
  filter:brightness(calc(1 - min(2,abs(var(--off))) * .28));
  transition:transform .5s cubic-bezier(.22,.8,.28,1), filter .5s, opacity .5s;
  opacity:calc(1 - min(2,abs(var(--off))) * .32);
  border-radius:12px; overflow:hidden; background:var(--paper-2);
  box-shadow:0 24px 58px -20px rgba(18,22,38,.5), 0 1px 4px rgba(18,22,38,.12);
  outline:1px solid var(--line); outline-offset:-1px;
}
.cf-item.cf-active{ box-shadow:0 30px 70px -18px rgba(18,22,38,.55),
                     0 0 0 5px color-mix(in srgb, var(--accent-page, var(--amber)) 24%, transparent); }
.cf-item img{ display:block; width:100%; height:100%; object-fit:cover; }
.cf-item figcaption{
  position:absolute; left:10px; right:10px; bottom:8px; margin:0;
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:#fff;
  text-shadow:0 1px 5px rgba(0,0,0,.75); opacity:calc(1 - min(1,abs(var(--off))) * 1.4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cf-arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:10; appearance:none; cursor:pointer;
  width:40px; height:40px; border-radius:99px; border:1px solid var(--line);
  background:var(--paper-2); color:var(--ink); font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -12px rgba(18,22,38,.3);
}
.cf-prev{ left:clamp(2px,1vw,10px) } .cf-next{ right:clamp(2px,1vw,10px) }
.cf-arrow:hover{ background:var(--paper) }
@media (max-width:680px){ .cf-arrow{ display:none } }

/* ---------------- schede offerta e liste (2026-09-03) ----------------
   Servono alle due pagine nuove nate dai deck (Formazione Specializzata e
   H.O.L.O.): una scheda che presenta un'offerta con i suoi dati secchi
   (formato/output/accesso) e un elenco puntato con la spunta al posto del
   pallino. Stessa grammatica delle .card gia' in uso, non un blocco a se'. */
.offerta{ padding:clamp(22px,2.6vw,34px); display:flex; flex-direction:column; gap:14px; }
.offerta h3{ margin:0; font-size:clamp(22px,2.3vw,30px); font-weight:700; letter-spacing:-.02em; }
.offerta > p{ margin:0; color:var(--ink-2); font-size:16.5px; line-height:1.62; }
.offerta-tag{
  align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; padding:5px 12px; border-radius:99px;
  background:color-mix(in srgb, var(--c, var(--ink)) 14%, transparent); color:var(--c, var(--ink));
}
.offerta-dati{
  margin:0; padding:14px 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:7px 16px; align-items:baseline;
}
.offerta-dati dt{
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap;
}
.offerta-dati dd{ margin:0; font-size:15px; color:var(--ink-2); line-height:1.5; }

.spunta{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.spunta li{
  position:relative; padding-left:26px;
  font-size:15.5px; line-height:1.58; color:var(--ink-2);
}
/* la spunta e' disegnata in CSS (due lati di un quadrato ruotato): niente
   glifo tipografico, che cambia forma da un font all'altro */
.spunta li::before{
  content:""; position:absolute; left:4px; top:.34em;
  width:5px; height:9px; border:solid var(--accent-page, var(--teal));
  border-width:0 2px 2px 0; rotate:45deg;
}

.hint-fonte{
  margin:18px 0 0; font-size:13px; line-height:1.6; color:var(--ink-3); max-width:82ch;
}

/* ---------------- hero "le due mani" (2026-09-04) ----------------
   Ripresa della copertina del deck "Esperti AI": mano umana in basso a
   sinistra, mano robotica in alto a destra, che si avvicinano al centro dove
   sta il titolo. Le due immagini NON sono generate: sono ritagliate dal PDF
   del deck (avevano gia' il canale di trasparenza), divise in due file lungo
   il vuoto fra le mani e ricomposte qui — stesso identico soggetto del
   documento del cliente, a costo zero.

   Due trasformazioni indipendenti su due elementi annidati, per non farle
   litigare: l'ENTRATA (le mani che si avvicinano al caricamento) sta sul
   contenitore .mani-lay come animazione CSS; l'USCITA legata allo scroll (si
   allontanano e si dissolvono) sta sull'<img> dentro, guidata dalla variabile
   --p che scrive pagine.js. Metterle sullo stesso elemento significherebbe
   che la seconda sovrascrive la prima. */
/* Grigio chiaro, non piu' il blu notte del deck: richiesta esplicita di
   restare nelle tonalita' del bianco. Il margine negativo di 80px risale
   sotto la barra sticky (alta esattamente 80px, vedi .topbar in site.css):
   senza, il grigio partiva sotto l'intestazione e sopra restava una fascia
   chiara. Il padding superiore lo ricompensa, cosi' il testo non finisce
   dietro la pillola. Nessuna sfumatura in fondo: il taglio col colore della
   sezione successiva e' netto, come richiesto. */
.mani{
  position:relative; isolation:isolate; overflow:hidden;
  margin-top:-80px;
  min-height:min(100svh, 880px);
  display:grid; place-items:center;
  padding:clamp(200px,19vw,265px) var(--gutter) clamp(90px,11vw,140px);
  background:var(--grigio-mani);
  color:var(--ink);
}
.mani-scena{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.mani-lay{ position:absolute; display:block; }
.mani-lay--umana{ left:-3%;  bottom:-2%; width:min(34%, 470px); }
.mani-lay--robot{ right:-3%; top:15%;    width:min(37%, 520px); }
.mani-img{ display:block; width:100%; height:auto; }

/* uscita legata allo scroll: --p va da 0 (hero in cima) a 1 (hero uscito) */
.mani-lay--umana .mani-img{
  translate:calc(var(--p,0) * -26%) calc(var(--p,0) * 20%);
  opacity:calc(1 - var(--p,0) * 1.25);
}
.mani-lay--robot .mani-img{
  translate:calc(var(--p,0) * 26%) calc(var(--p,0) * -20%);
  opacity:calc(1 - var(--p,0) * 1.25);
}

/* entrata: partono piu' lontane e si avvicinano */
@keyframes mani-entra-sx{ from{ translate:-16% 12%; opacity:0 } to{ translate:0 0; opacity:1 } }
@keyframes mani-entra-dx{ from{ translate:16% -12%; opacity:0 } to{ translate:0 0; opacity:1 } }
.mani-lay--umana{ animation:mani-entra-sx 1.5s cubic-bezier(.22,.9,.3,1) both; }
.mani-lay--robot{ animation:mani-entra-dx 1.5s cubic-bezier(.22,.9,.3,1) .12s both; }

/* Il testo sta SOPRA le mani e si porta dietro il proprio fondo scuro: e' la
   sola garanzia che resti leggibile qualunque cosa gli passi dietro, visto
   che le mani sono chiare quanto il testo. Niente riquadro netto — un alone
   sfumato, che a occhio non si vede come rettangolo. */
.mani-testo{ position:relative; z-index:2; text-align:center; max-width:min(720px,84vw); }
.mani-testo::before{
  content:""; position:absolute; z-index:-1;
  inset:-30% -18%;
  background:radial-gradient(closest-side, var(--grigio-mani) 0%,
             color-mix(in srgb, var(--grigio-mani) 88%, transparent) 55%,
             transparent 100%);
}
/* "Esperti AI" era una piccola eyebrow sopra il titolo vero; su richiesta
   esplicita dell'utente e' diventata lei stessa il titolo principale, con
   lo stesso metodo usato per "ARVertise" (mesh WebGL, vedi .mw qui sotto e
   initMeshText in pagine.js) — non e' una scelta a se': .mw e' gia' un h1
   generico riusabile, pensato apposta per non doverlo reinventare pagina
   per pagina. La vecchia frase che ERA l'h1 scende di un livello: resta
   visivamente quasi identica (stessa impaginazione), diventa "mani-sub". */
.mani-sub{
  margin:clamp(10px,1.4vw,18px) 0 0; color:var(--ink);
  font-size:clamp(24px,3.4vw,44px); line-height:1.1; letter-spacing:-.03em; text-wrap:balance;
}
/* stessa identica sottolineatura sfumata di .hero-centro .hero-sub em
   (ARVertise): richiesta esplicita dell'utente di riprendere quel
   trattamento qui. Niente piu' colore navy sul testo (lo faceva risaltare
   da solo) — l'enfasi ora e' tutta nella barra sotto, colorata
   nell'accento della pagina (qui --navy, vedi --accent-page sul body),
   esattamente come "brand" resta nero e si distingue solo per la barra
   ambra su ARVertise. */
.mani-sub em{ font-style:normal; position:relative; white-space:nowrap; }
.mani-sub em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.075em;
  background:var(--accent-page, var(--amber)); border-radius:2px;
}
.mani-lede{
  margin:clamp(18px,2vw,26px) auto 0; max-width:46ch;
  font-size:clamp(15.5px,1.4vw,19px); line-height:1.6;
  color:var(--ink-2);
}

@media (max-width:760px){
  /* Sul telefono le due mani non possono stare ai lati del testo: non c'e'
     larghezza. La versione precedente le teneva in posizione assoluta con
     percentuali sull'altezza dell'hero: su schermo corto l'altezza si
     comprime, il testo no, e la mano umana finiva SOPRA le ultime righe del
     lede (misurato: mano a 446px, testo fino a 497px). Sopra invece restava
     un vuoto di quasi 300px.
     Qui le mani escono dal posizionamento assoluto ed entrano nel flusso
     come due fasce vere (display:contents scioglie il contenitore e rende i
     due <span> figli diretti della griglia): robot / testo / umana, una
     sotto l'altra. L'altezza dell'hero diventa la somma delle tre fasce —
     niente vuoti, e la sovrapposizione col testo e' impossibile per
     costruzione, non per taratura. Le due mani restano ai lati opposti e
     puntano l'una verso l'altra attraverso il testo: stesso gesto del
     desktop, ruotato di 90°. */
  .mani{
    min-height:0;
    grid-template-columns:100%;
    align-content:start;
    padding:clamp(96px,25vw,116px) var(--gutter) clamp(18px,5vw,26px);
    row-gap:clamp(6px,2vw,14px);
  }
  .mani-scena{ display:contents; }
  .mani-lay{ position:relative; inset:auto; }
  /* nel markup la mano umana viene prima (ordine sensato per il desktop, dove
     conta lo stacking): qui l'ordine visivo va ribaltato, robot sopra e umana
     sotto, come nel deck */
  .mani-lay--robot{ order:1; width:min(78%,330px); justify-self:end;   margin-right:calc(var(--gutter) * -1); }
  .mani-testo{ order:2; max-width:100%; justify-self:center; }
  .mani-lay--umana{ order:3; width:min(70%,300px); justify-self:start; margin-left:calc(var(--gutter) * -1); }
  .mani-testo::before{ inset:-18% -14% }
  .mani-lede{ font-size:16px }
}

html.movimento-ridotto .mani-lay--umana,html.movimento-ridotto .mani-lay--robot{ animation:none }
html.movimento-ridotto .mani-lay--umana .mani-img,html.movimento-ridotto .mani-lay--robot .mani-img{ translate:none; opacity:1 }

/* ---------------- schede formatori con ritratto (2026-09-04) ----------------
   I due ritratti arrivano scontornati dal deck (pagine "IL TUO AI ADVISOR" e
   "IL TUO AI ENGINEER"), quindi senza sfondo: gliene serve uno o
   "galleggiano". Un fondo tenue nel colore d'accento della pagina, con la
   figura appoggiata sul bordo inferiore come nel deck. */
.formatore{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(18px,2.4vw,32px); align-items:end;
  padding:0; overflow:visible;                /* la figura sbordera' dal riquadro */
}
.formatore-foto{
  /* NON stretch: prima riempiva tutta l'altezza della card (decisa dal
     testo, che varia da persona a persona) lasciando una fascia di
     sfondo vuota sopra la testa. align-items:end (ereditato da .formatore)
     ora si limita ad appoggiare il pannello in basso, alla sua altezza
     naturale — stesse proporzioni del ritratto, niente aria sprecata. */
  position:relative; align-self:end; overflow:visible;
  width:clamp(150px,15vw,215px); aspect-ratio:760/942;
  background:linear-gradient(180deg,
             color-mix(in srgb, var(--accent-page, var(--navy)) 13%, transparent),
             color-mix(in srgb, var(--accent-page, var(--navy)) 4%, transparent));
}
.formatore-foto img{
  /* piu' larga del riquadro apposta: ancorata al bordo basso, sale sopra il
     bordo alto del pannello invece di finire dentro come un ritaglio piatto.
     Ancorata al lato ESTERNO (non a quello verso il testo) cosi' lo sborda
     non rischia mai di coprire bio/elenco puntato; le due card si aprono
     verso l'esterno, non si scontrano nel mezzo tra le due. */
  display:block; position:absolute; bottom:0; right:0;
  width:clamp(172px,17.4vw,247px); height:auto; object-fit:contain;
  filter:drop-shadow(0 20px 26px rgba(18,22,38,.22));
}
.grid.g-2 .formatore:nth-child(2) .formatore-foto img{ right:auto; left:0; }
.formatore-testo{ padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px) 0; }
.formatore-testo > b{ display:block; font-size:21px; font-weight:700; line-height:1.18; }
.formatore-testo > span{
  display:block; margin-top:4px; font-size:14px; color:var(--ink-3); font-weight:600;
}
.formatore-testo > p{
  margin:13px 0 0; font-size:16.5px; line-height:1.6; color:var(--ink-2);
}
.formatore-testo .spunta{ margin-top:14px }
@media (max-width:640px){
  /* sotto i 640px la card impila foto sopra e testo sotto: lo sbordo
     orizzontale non avrebbe piu' senso, la figura torna in flusso normale */
  .formatore{ grid-template-columns:1fr; align-items:stretch; }
  .formatore-foto{
    width:100%; aspect-ratio:auto; min-height:0; padding-top:18px; overflow:hidden;
  }
  .formatore-foto img{
    position:static; width:min(230px,58%); height:auto; margin:0 auto;
    filter:none;
  }
  .formatore-testo{ padding:clamp(18px,4vw,24px) }
}

/* ---------------- "le due proposte" (2026-09-04, rifatta su misura) ----
   Riscritta a partire dal DOM VERO della pagina /services/web di
   y-vision.co.kr (letto con Playwright: outerHTML della sezione, non solo
   uno screenshot), su richiesta esplicita dell'utente di riprodurla con
   precisione — poi riportata sui nostri colori chiari, che li' sono
   invertiti (fondo nero, tratto e testo bianchi). Tre meccaniche, verificate
   sul vivo e non indovinate:

   1. IL TRATTO NON E' TUTTO TRATTEGGIATO E NON E' TUTTO ANIMATO. Misurato
      campionando lo stroke-dasharray ogni 180ms mentre la sezione entra in
      vista: lo stelo verticale resta fermo su "1px,1px" dall'inizio alla
      fine (sempre disegnato, mai animato) — SOLO le due curve animano, e
      NON via stroke-dashoffset come nel trucco classico: il primo numero di
      stroke-dasharray cresce da un valore minuscolo fino a "1px" in circa
      700-900ms. Qui riproduco lo stesso risultato visivo con la tecnica
      standard (dashoffset 1->0 su un path pathLength="1"), equivalente ma
      piu' robusta cross-browser; lo stelo resta statico com'era.
   2. I DUE RIQUADRI SI ALLARGANO E SI STRINGONO A VICENDA. Misurato con le
      bounding box: a riposo 672/672px (50/50), col mouse sul primo diventano
      804/540px — non e' uno scale() sull'immagine, e' flex-grow vero (0.85
      di base quando il mouse e' sulla riga, 1.35 sul riquadro toccato) che
      sposta anche il bordo fra i due, cioe' li fa muovere in orizzontale.
   3. LA FILIGRANA E' GRANA, NON TESTO. Nel DOM e' un div a tutta sezione con
      un rumore feTurbulence (baseFrequency 0.9, numOctaves 2) filtrato a
      colore fisso e alpha 0.035, opacity 0.45 sul div — sul loro nero viene
      fuori bianco, qui va invertita a inchiostro perche' il fondo e' chiaro.
      La prima versione che avevo fatto (una parola enorme in trasparenza)
      non era questo: e' stata tolta.

   Il titolo e' centrato come nel riferimento (li' non e' mai stato
   decentrato: prima l'avevo frainteso). */

.sez-proposte{ position:relative; overflow:hidden; isolation:isolate; }
/* grana: stesso identico filtro del riferimento, colore invertito per il
   fondo chiaro (0 0 0 invece di 1 1 1 nella feColorMatrix = inchiostro
   invece di bianco), stessi numeri altrove (frequenza, opacita', piastrella
   120x120) perche' sono quelli che davano l'effetto giusto. */
.sez-proposte::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sez-proposte > .section-in{ position:relative; z-index:1; }

/* testata di sezione centrata. Era una regola legata a .sez-proposte; ora e'
   una classe a se' perche' su questa pagina la usano quattro sezioni: se una
   testata e' centrata devono esserlo tutte, altrimenti la colonna del testo
   salta da sinistra al centro scorrendo. */
.sec-head.centrata{ text-align:center; max-width:none; }
.sec-head.centrata .trace-div{ justify-content:center; }
.sec-head.centrata h2{ margin-left:auto; margin-right:auto; }
.sec-head.centrata .lede{ margin-left:auto; margin-right:auto; }

/* --- il tratto che si biforca --- */
.biforca{
  margin:clamp(10px,2vw,22px) auto clamp(30px,3.6vw,46px);
  width:min(560px,74vw);
}
.biforca svg{ display:block; width:100%; height:clamp(78px,8.6vw,118px); overflow:visible; }
.biforca path{
  fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
/* Il tratto si genera dall'alto: prima scende lo stelo, poi dal punto di
   stacco partono i due rami verso le card. Prima lo stelo era fisso e i rami
   crescevano AL CONTRARIO — dalle punte esterne verso il centro — quindi a
   meta' animazione si vedevano due archetti staccati dal resto e il gesto
   non si leggeva come una biforcazione.
   Verso del disegno: con dasharray "1 1" e pathLength=1, l'offset va da
   POSITIVO a zero perche' il tratto cresca dal punto di partenza del
   tracciato (l'offset negativo fa l'opposto: scopre prima la coda, e i rami
   comparivano staccati dallo stelo). Verificato imponendo i due valori a
   mano e guardando il reso, non dedotto.
   Il vuoto del tratteggio e' lungo il DOPPIO del tracciato (1 2, non 1 1):
   con un vuoto lungo quanto il tratto il motivo si ripete subito dopo, e a
   riposo (offset 1) bastava un'inezia di arrotondamento perche' la coda del
   tracciato rientrasse nel tratto successivo — restavano due archetti
   visibili sulle punte, staccati da tutto, che non sparivano mai. Con il
   vuoto doppio la ripetizione cade fuori dal tracciato e non puo' accadere. */
.biforca .stelo{ stroke:var(--ink-3); }
.biforca .stelo, .biforca .ramo{
  stroke-dasharray:1 2; stroke-dashoffset:1.05;  /* pathLength="1": 1 = tutto il tracciato.
     1.05 e non 1 netto: a 1 il confine cade esattamente sull'inizio del
     tracciato e la punta arrotondata ci lascia un puntino */
}
.biforca .stelo{ transition:stroke-dashoffset .5s ease-out; }
/* i rami partono quando lo stelo e' arrivato in fondo. Lenti di proposito:
   deve vedersi il percorso, non essere gia' finito quando l'occhio arriva */
.biforca .ramo{ transition:stroke-dashoffset 1.35s ease-in-out .45s; }
.biforca.aperta .stelo, .biforca.aperta .ramo{ stroke-dashoffset:0; }
html.movimento-ridotto .biforca .stelo, html.movimento-ridotto .biforca .ramo{ transition:none; stroke-dashoffset:0; }

/* --- i due riquadri: flexbox vero, non grid, perche' devono ridistribuirsi --- */
.proposte{ display:flex; flex-direction:column; gap:clamp(14px,1.8vw,20px); }
@media (min-width:821px){ .proposte{ flex-direction:row; } }

/* Flip 3D al click (2026-09-16, richiesto esplicitamente): il fronte
   mostra l'anteprima, il retro il dettaglio (percorso dell'audit / livelli
   di certificazione). Stessa tecnica del flip a scroll di ".split-card"
   qui sotto in questo file (perspective sul contenitore, preserve-3d +
   rotateY(180deg) sulla "carta" interna, backface-visibility:hidden sulle
   due facce) — qui pero' e' una transizione CSS su un cambio di classe al
   click, non un'interpolazione guidata dallo scroll: non serve altro JS
   che un ascoltatore di click per faccia (vedi pagine.js, initFlipCard).
   .proposta-flip prende il posto che PRIMA occupava .proposta direttamente
   dentro .proposte come flex-item (stessa taglia, stesso hover-grow): ora
   .proposta e' condivisa dalle DUE facce (fronte/retro) e non puo' piu'
   essere lei il flex-item, altrimenti crescerebbe/si restringerebbe due
   volte (una per faccia). */
.proposta-flip{
  /* height ESPLICITO, non solo min-height: ".proposta-carta{height:100%}"
     qui sotto ha bisogno di un genitore ad altezza vera per risolvere la
     percentuale (min-height da solo non basta per lo spec CSS — su
     desktop il flex-grow del genitore ".proposte" glielo dava comunque
     per un'altra via, "align-items:stretch" di riga, ma su mobile
     ".proposte" e' a colonna e ".proposta-flip" non e' un flex-item
     allungato: senza height la carta collassava a 0, e il fronte/retro
     (dentro, position:absolute) si riducevano al solo contenuto visibile
     invece di riempire la card — bug trovato via screenshot su 390px,
     misurato: .proposta-carta height=0px). Solo "height", NON PIU'
     "min-height": da quando initFlipCard (pagine.js) misura e applica
     l'altezza vera in JS, un pavimento fisso qui sotto forzava la card dal
     contenuto piu' corto (Audit) oltre la sua misura naturale, lasciando
     sopra l'occhiello uno spazio vuoto in piu' che l'altra card, dal
     contenuto piu' lungo, non aveva — le due dovevano avere lo stesso
     margine sopra, richiesto esplicitamente (bug trovato misurando:
     403px calcolati da JS, 410px resi per via del min-height). Il valore
     qui sotto resta solo come altezza PRIMA che JS giri — mai come limite
     dopo. */
  position:relative; height:clamp(410px,48vw,520px);
  perspective:1800px;
}
@media (min-width:821px){
  .proposta-flip{
    flex:1 1 0%; height:clamp(440px,36vw,540px);
    transition:flex-grow .65s cubic-bezier(.22,.8,.3,1);
  }
  /* mouse ovunque sulla riga: entrambi scendono un poco (base 0.85 = 50/50
     ancora, ma "pronta a spostarsi"); quella toccata sale sopra con :hover,
     stessa specificita' della regola precedente — vince perche' viene dopo. */
  .proposte:hover .proposta-flip{ flex-grow:.85; }
  .proposte .proposta-flip:hover{ flex-grow:1.35; }
  /* segnalato dall'utente: una volta girata una carta, il continuo
     cambio di larghezza al passaggio del mouse (l'effetto sopra) diventa
     fastidioso invece che dinamico — il retro ha testo vero da leggere,
     non solo un'anteprima, e vuole una larghezza stabile. ".e-bloccata"
     (aggiunta da initFlipCard in pagine.js non appena UNA delle due carte
     e' girata, tolta quando torna al fronte) riporta entrambe a
     flex-grow:1 e ce le tiene: stessa specificita' delle due regole sopra
     con una classe in piu', vince a prescindere dall'ordine nel file. */
  .proposte.e-bloccata:hover .proposta-flip{ flex-grow:1; }
  .proposte.e-bloccata .proposta-flip:hover{ flex-grow:1; }
}
.proposta-carta{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.proposta-flip.e-girata .proposta-carta{ transform:rotateY(180deg); }

.proposta{
  position:absolute; inset:0; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:flex-end;
  width:100%; border-radius:20px; border:1px solid var(--line);
  /* segnalato dall'utente: la descrizione (.proposta p) partiva a ~37% di
     altezza carta, dentro la zona ancora poco opaca del velo qui sotto
     (::before, sfuma fino al 62%) — poco leggibile sopra le foto piu'
     chiare. Riquadro un po' piu' alto = stesso testo, ancorato in basso
     (justify-content:flex-end), che scivola dentro la parte gia' quasi
     tutta coperta dal velo invece che a cavallo della sfumatura. */
  padding:clamp(24px,3vw,38px);
  text-decoration:none; color:var(--ink); font:inherit; text-align:left;
  background:var(--paper-2);
  transition:border-color .5s ease;
  backface-visibility:hidden;
}
/* .proposta e' condivisa da un <button> (fronte) e un <div> (retro): gli
   azzeramenti che servono SOLO al bottone (niente sfondo/bordo/appearance
   del browser) stanno qui, non nella regola sopra — cosi' il retro non li
   eredita per caso e la regola sopra resta quella che decide davvero
   sfondo/bordo/padding per entrambe le facce. */
.proposta-fronte{ appearance:none; cursor:pointer; }
.proposta-retro{ transform:rotateY(180deg); }
.proposta-flip:hover .proposta,
.proposta-fronte:focus-visible{
  border-color:color-mix(in srgb, var(--accent-page, var(--navy)) 42%, var(--line));
}
/* l'indicazione richiesta esplicitamente ("l'utente deve vedere che gira"):
   stesso trattamento del vai-e-freccia esistente, testo diverso e icona di
   rotazione al posto della freccia dritta — cosi' NON si legge come "vai
   al contatto" (cosa che ora fa solo il bottone sul retro). */
.proposta-gira{ cursor:pointer; }

.proposta-retro h3{ color:#fff; }
.proposta-retro .spunta li{ color:rgba(255,255,255,.82); }
.proposta-retro .spunta li::before{ border-color:var(--c, var(--teal)); }
/* ".proposta.proposta-retro > p", non solo ".proposta-retro > p": a parita'
   di specificita' (una classe + elemento) ".proposta p" piu' sotto in questo
   file vinceva per ordine, lasciando il paragrafo del retro nel grigio
   scuro pensato per il fronte chiaro — praticamente invisibile sul fondo
   scuro del retro (segnalato dall'utente via screenshot). Stessa identica
   famiglia di bug e stessa soluzione gia' usata per ".proposta.proposta-retro::before"
   qui sotto: due classi battono una, a prescindere dall'ordine. */
.proposta.proposta-retro > p{ color:rgba(255,255,255,.82); }
.proposta-retro .offerta-dati{ border-top-color:rgba(255,255,255,.18); }
.proposta-retro .offerta-dati dt{ color:rgba(255,255,255,.55); }
.proposta-retro .offerta-dati dd{ color:rgba(255,255,255,.88); }
.proposta-retro-nota{ margin:14px 0 0; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.68); max-width:40ch; }

/* usata solo un istante da initFlipCard per misurare l'altezza vera del
   contenuto di una faccia (vedi pagine.js, misuraAltezza): ".proposta{
   position:absolute;inset:0}" fissa l'altezza della faccia a quella del
   genitore invece di lasciarla decidere dal contenuto, e "scrollHeight" li'
   non si puo' usare — per una faccia con "justify-content:flex-end" il
   contenuto che non entra sborda VERSO L'ALTO, fuori dalla direzione che
   scrollHeight sa misurare (verificato: riportava lo stesso valore
   dell'altezza fissa, 408px, anche quando il contenuto vero arrivava ben
   oltre — bug scoperto misurando, non a intuito). Uscire per un istante da
   "absolute" e tornare ad altezza automatica da' invece la misura vera,
   letta da offsetHeight. */
.proposta.e-misura{ position:relative; height:auto; overflow:visible; }

/* Lista "tappe" con icona (2026-09-16): sostituisce i numeri scritti nel
   testo dell'Audit ("1. Questionario"...) con un'icona rappresentativa per
   fase, richiesta esplicita dell'utente. Componente nuovo invece di
   riadattare ".spunta" — quella disegna un'unica spunta uguale per tutti
   gli elementi via ::before condiviso, qui invece ogni voce ha una sua
   icona diversa: serve un elemento vero per icona, non un chiama uguale. */
/* linea divisoria sopra la lista, stessi valori di ".offerta-dati" (usata
   dal retro di Academy) cosi' le due card seguono la stessa struttura
   visiva: titolo, descrizione, linea, contenuto — richiesto esplicitamente
   dall'utente guardandole affiancate. */
.tappe{
  list-style:none; margin:0; padding:14px 0 0; border-top:1px solid rgba(255,255,255,.18);
  display:flex; flex-direction:column; gap:14px;
}
.tappe li{ display:flex; align-items:flex-start; gap:13px; }
.tappe-icona{
  width:36px; height:36px; flex:none; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); display:grid; place-items:center;
}
.tappe-icona svg{
  width:17px; height:17px; stroke:#fff; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.tappe b{ display:block; font-size:14.5px; font-weight:700; color:#fff; }
/* ".proposta-retro .tappe p", non solo ".tappe p": la stessa identica
   famiglia di bug di ".proposta.proposta-retro > p" qui sopra — a parita'
   di specificita' (una classe + elemento) ".proposta p" piu' sotto vince
   per ordine, e il testo torna al grigio scuro del fronte (trovato via
   screenshot mentre si verificava il fix del paragrafo principale: stesso
   problema, punto diverso della pagina). */
.proposta-retro .tappe p{ margin:2px 0 0; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.72); }

@media (min-width:821px){
  /* su desktop la card e' larga (colonna singola su mobile, meta' riga qui)
     e i testi del retro — tarati su mobile con un tetto in "ch" pensato per
     una colonna stretta — andavano a capo molto prima del bordo della
     carta, lasciando vuoto a destra: richiesto esplicitamente di usare
     tutta la larghezza disponibile. "justify", non solo togliere il tetto:
     e' la parola usata dall'utente ("giustificarsi"), e con paragrafi di
     piu' righe rende il bordo destro dritto quanto quello sinistro invece
     che frastagliato. */
  .proposta.proposta-retro > p{ max-width:none; text-align:justify; }
  .proposta-retro-nota{ max-width:none; text-align:justify; }
  /* stessa taglia del paragrafo principale del retro di Academy
     (".proposta p", 16px/1.6 — non sovrascritti qui sopra, quindi ereditati
     cosi' com'e' da entrambi): richiesto esplicitamente che le descrizioni
     dell'Audit si leggano alla stessa grandezza di quelle di Formazione. */
  /* "max-width:none" e' quello che davvero mancava qui — il resto (giustificato,
     div del genitore allargato) era gia' a posto, ma ".proposta p{max-width:42ch}"
     (la regola generica, mai riscritta apposta per questo paragrafo annidato
     piu' in profondita') continuava comunque a tagliare la riga a ~42
     caratteri: le proprieta' non toccate da una regola piu' specifica
     restano quelle della regola meno specifica, non spariscono da sole.
     Stesso identico bug, quarta volta in questa carta (vedi le altre voci
     ".proposta.proposta-retro > p" e ".proposta-retro-nota" sopra) — qui
     pero' nascosto meglio, perche' senza il tetto il testo SEMBRAVA gia'
     giusto finche' non si e' misurato il vero margine destro. */
  .proposta-retro .tappe p{ font-size:16px; line-height:1.6; text-align:justify; max-width:none; }
  .tappe b{ font-size:16px; }
  .tappe-icona{ width:42px; height:42px; }
  .tappe-icona svg{ width:19px; height:19px; }
  .tappe li{ gap:16px; }
  /* il vero motivo per cui il testo andava a capo presto lasciando troppo
     margine a destra: ".tappe li" e' una riga flex (icona + questo div),
     ma il div del testo non aveva un flex-grow — di default un elemento
     flex si stringe al proprio contenuto (shrink-to-fit), non si allunga
     a riempire lo spazio che avanza. "text-align:justify" da solo non
     bastava: giustifica DENTRO alla larghezza che il div si e' preso, e se
     quella e' gia' stretta di suo il margine a destra resta lo stesso.
     "flex:1" lo forza a occupare tutto lo spazio rimasto sulla riga (fino al
     bordo della card, come a sinistra); "min-width:0" evita che un flex-item
     con testo lungo spinga la riga oltre il contenitore invece di andare a
     capo (il comportamento di default di un flex-item e' non restringersi
     sotto il proprio contenuto). Scoped qui solo su desktop, richiesto
     esplicitamente di non toccare mobile: la' il testo non e' giustificato
     e un div piu' largo cambierebbe dove va a capo, cosa che oggi va bene. */
  .tappe li > div{ flex:1 1 0%; min-width:0; }
}

/* Le due immagini vengono dallo stesso deck del cliente ("Esperti AI - Deck
   Luglio 2026.pdf", slide "percorso" e slide "formazione"), gia' ritagliate
   con canale alpha vero (non uno sfondo bianco da togliere a occhio): stessa
   provenienza e stessa tecnica delle mani nell'hero di questa pagina.
   Entrambe nel flusso normale, prima cosa dentro il retro, non piu'
   "position:absolute" dietro al testo (prima versione, tolta su richiesta
   esplicita dell'utente: "sotto al testo" — dietro/appena visibile — "non
   va bene", la voleva sopra e ben visibile come sull'altra carta). Il
   layout le spinge in basso da solo (niente margine calcolato a mano per
   farle spazio). La maschera in fondo sfuma ciascuna verso il colore di
   sfondo della propria card, cosi' il bordo inferiore non taglia netto.
   "height:auto" e' necessario, non solo "aspect-ratio": l'attributo HTML
   height="..." (serve per riservare lo spazio prima che l'immagine carichi)
   vale come un'altezza CSS "presentational" gia' risolta, quindi
   "aspect-ratio" da solo non la ricalcola — resta all'altezza intrinseca
   del file invece che a quella proporzionata alla larghezza vera della
   card (bug trovato misurando su mobile: 525px invece di ~170px). */
.proposta-retro-img--audit{
  display:block; width:100%; height:auto; aspect-ratio:1276/720; object-fit:cover; object-position:50% 35%;
  border-radius:12px; margin:0 0 16px;
  -webkit-mask-image:linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 60%, transparent 100%);
}
.proposta-retro-img--academy{
  display:block; width:100%; height:auto; aspect-ratio:900/339; object-fit:cover;
  border-radius:12px; margin:0 0 16px;
  -webkit-mask-image:linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 60%, transparent 100%);
}
@media (min-width:821px){
  /* su desktop c'e' molta piu' larghezza disponibile di quanta ne usi un
     rapporto tagliato per il telefono: piu' alta e con un ritaglio che
     tiene piu' scaletta (meno "striscia", piu' presenza) — richiesto
     esplicitamente ("più grande... ben proporzionato con tutto il resto"). */
  /* stessa proporzione di --academy (non solo "piu' alta di prima"):
     cosi' le due immagini vengono sempre alla STESSA altezza a schermo, a
     qualunque larghezza delle due card — non due numeri scelti a parte che
     avrebbero ricominciato a divergere al primo cambio di layout.
     Richiesto esplicitamente ("un'armonia" fra le due card mancante). */
  .proposta-retro-img--audit{ aspect-ratio:900/300; object-position:50% 42%; }
  .proposta-retro-img--academy{ aspect-ratio:900/300; }
}
/* Il retro NON ha una foto sotto: gli serve un fondo suo, scuro, non il
   velo chiaro di ".proposta::before" (pensato per sfumare una foto verso
   il colore carta) — quella regola pero' e' scritta piu' sotto in questo
   file e a parita' di specificita' (una sola classe, come qui) vincerebbe
   lei per ordine, lasciando il retro quasi bianco con testo bianco sopra
   (bug trovato via screenshot: testo illeggibile). Due classi invece di
   una battono quella regola indipendentemente dall'ordine — stessa
   disciplina gia' usata altrove in questo file per la stessa famiglia di
   conflitti (".hero-piatto h1:not(.mw)", ".reel .case-poster"). */
.proposta.proposta-retro::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(155deg, color-mix(in srgb, var(--c, var(--ink)) 88%, black) 0%, color-mix(in srgb, var(--ink) 92%, black) 100%);
}
.proposta-cta{ margin-top:18px; align-self:flex-start; }
.proposta-indietro{
  appearance:none; background:none; border:none; padding:0; margin-top:14px;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:700; color:rgba(255,255,255,.65);
}
.proposta-indietro svg{ width:15px; height:15px; }
.proposta-indietro:hover{ color:#fff; }

.proposta-cert-badges{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }

.proposta-foto{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.proposta-foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform 1.1s cubic-bezier(.22,.8,.3,1);
}
.proposta:hover .proposta-foto img,
.proposta:focus-visible .proposta-foto img{ transform:scale(1.08); }
/* Foto dell'Audit ribaltata in orizzontale, richiesto esplicitamente
   dall'utente: il portatile era sulla sinistra, proprio dove sta il testo
   (il fronte e' ancorato in basso a sinistra) — specchiata lo sposta a
   destra e lascia alla scritta la zona piu' semplice del tavolo, piu'
   leggibile. Combina "scaleX(-1)" con GLI STESSI valori di scale(...) delle
   due regole sopra invece di aggiungerli come regola a parte: sullo stesso
   elemento un secondo "transform" non si somma al primo, lo sostituisce
   del tutto. */
.proposta-foto img.specchiata{ transform:scaleX(-1) scale(1.02); }
.proposta:hover .proposta-foto img.specchiata,
.proposta:focus-visible .proposta-foto img.specchiata{ transform:scaleX(-1) scale(1.08); }
/* velo chiaro dal basso: le foto sono luminose e il testo e' scuro, quindi
   qui SCHIARISCE — l'opposto del riferimento, che scurisce verso il nero */
.proposta::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,
             color-mix(in srgb, var(--paper-2) 12%, transparent) 0%,
             color-mix(in srgb, var(--paper-2) 55%, transparent) 30%,
             color-mix(in srgb, var(--paper-2) 92%, transparent) 48%,
             var(--paper-2) 62%);
}

.proposta-eti{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); margin-bottom:11px;
  /* la sua riga sta nel punto piu' trasparente del velo (in cima, dove la
     foto deve respirare): su una foto chiara come quella dell'Audit un
     grigio chiaro (ink-3, usato altrove) ci spariva dentro. Serve inchiostro
     pieno PIU' un'ombra scura sotto — un'ombra chiara qui non fa nulla,
     schiarisce un testo gia' chiaro su un fondo gia' chiaro. */
  text-shadow:0 1px 8px color-mix(in srgb, var(--ink) 30%, transparent);
}
.proposta-eti::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--c, var(--accent-page, var(--navy)));
  box-shadow:0 0 10px color-mix(in srgb, var(--c, var(--accent-page, var(--navy))) 65%, transparent);
}
.proposta h3{
  margin:0; font-size:clamp(22px,2.6vw,34px); font-weight:700; letter-spacing:-.025em;
  line-height:1.1; font-family:var(--display);
}
.proposta p{
  margin:12px 0 0; max-width:42ch;
  font-size:16px; line-height:1.6; color:var(--ink-2);
}
.proposta-dati{
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:6px 22px;
  font-size:13.5px; color:var(--ink-3);
}
.proposta-dati b{ color:var(--ink); font-weight:700 }
.proposta-vai{
  margin-top:18px; display:inline-flex; align-items:center; gap:11px;
  font-size:14.5px; font-weight:700; color:var(--ink);
}
/* la freccia esce a destra e ne rientra una da sinistra: stesso scambio del
   riferimento, fatto con due frecce dentro una finestrella che ritaglia */
.proposta-frecce{
  position:relative; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--ink); overflow:hidden; flex:none;
  transition:background .3s ease, border-color .3s ease;
}
.proposta-frecce span{
  position:absolute; inset:0; display:grid; place-items:center;
  transition:transform .34s cubic-bezier(.4,0,.2,1);
}
.proposta-frecce span:last-child{ transform:translateX(-100%) }
.proposta:hover .proposta-frecce span:first-child{ transform:translateX(100%) }
.proposta:hover .proposta-frecce span:last-child{ transform:translateX(0) }
.proposta:hover .proposta-frecce{ background:var(--ink); border-color:var(--ink); }
.proposta:hover .proposta-frecce svg{ stroke:var(--paper-2) }
.proposta-frecce svg{ width:15px; height:15px; stroke:var(--ink); stroke-width:1.9;
                      fill:none; stroke-linecap:round; stroke-linejoin:round;
                      transition:stroke .3s ease; }


/* ---------------- "contesto" e "la legge" (2026-09-04) ----------------
   Ricostruite dalle slide 2 e 3 del deck "Esperti AI". Le figure sono le
   stesse del PDF, estratte con il loro canale alpha (pdfimages tira fuori
   RGB e smask separati, ricomposti in RGBA) — quindi ritagliate, senza
   fondo. La card 01 nel deck e' un collage di quattro pezzi distinti (volto
   + tre frecce): ricomposto qui in un'unica immagine.

   Il soggetto appoggiato sul bordo basso di un pannello in tinta d'accento
   e' lo stesso trattamento delle schede formatori: e' il motivo ricorrente
   della pagina, non un terzo stile inventato. */
/* ---------------- "tutti parlano di AI" — scroll split card (2026-09-05) ----------------
   Sostituisce la riga a tre voci con animazioni indipendenti (frecce che
   vagano, segnaposto che cerca, rifiuti che si disperdono): l'utente ha
   chiesto esplicitamente questo componente, "scroll split card" di
   componentry.dev — scaricato il sorgente vero (registry shadcn,
   https://componentry.dev/r/scroll-split-card.json) e riletto con
   precisione invece di indovinare dal nome. E' React/Framer Motion; qui e'
   un porting fedele in CSS+JS piano (stessa tecnica di sempre in questo
   sito), non l'intero componente incollato — niente framework qui.

   Il trucco alla base: UNA sola immagine (imageSrc) viene mostrata a
   fette identiche larghe il 300% del proprio riquadro e spostate di
   -0%/-100%/-200% — cosi' le tre fette, accostate, ricompongono l'immagine
   intera senza cuciture visibili (nessun ritaglio manuale, e' puro CSS).
   Scorrendo, tre fasi (proporzioni identiche al sorgente originale, sono
   frazioni di scroll indipendenti dalla scala):
     0 → 0.2   agli angoli interni cresce l'arrotondamento: da un'unica
                immagine piatta a tre schede coi bordi via via distinti
     0 → 0.4   le tre schede si separano lateralmente e rimpiccioliscono
     0.4 → 0.8 flip 3D (rotateY 0→180°): il fronte (fetta d'immagine)
                lascia il posto al retro (le tre card di contenuto reali,
                con le immagini statiche gia' in uso altrove nella pagina)
     0.8 → 1   il gruppo risale leggermente mentre appare la frase finale
   La progressione e' quella di un normale "sticky scroll": il contenitore
   e' alto piu' schermate (qui 380vh, il sorgente ne usa 500 ma su una
   sezione di contenuto normale — non un sito-evento a schermo intero —
   risultava eccessivo), lo stage interno resta incollato in cima
   (position:sticky) finche' non si e' scorso tutta quell'altezza. */
.split-scroll{ position:relative; height:380vh; width:100%; }
.split-stage{
  position:sticky; top:0; height:100svh; width:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; perspective:1200px;
  background:var(--paper);
}
.split-intro, .split-outro{
  position:absolute; left:0; right:0; text-align:center; padding:0 var(--gutter);
  pointer-events:none;
}
.split-intro{ top:16%; }
.split-intro span{
  font-size:11px; font-weight:700; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-3);
}
.split-outro{
  /* il selettore usato finora era ".split-outro p": non ha mai applicato
     nulla, perche' .split-outro nel markup e' gia' il <p> (vedi HTML),
     non un contenitore con un <p> dentro — bug silenzioso, la frase
     finale ha sempre preso lo stile di default invece di questo. Corretto
     puntando la regola direttamente sulla classe.
     Dimensione richiesta esplicitamente uguale al titolo h2 di questa
     stessa sezione ("Tutti parlano di AI. Pochi la mettono a terra."):
     stesso font-size/line-height/letter-spacing della regola h2 in
     site.css, cosi' apertura e chiusura della sezione si rispondono alla
     pari. Resta piu' pesante (800 invece di 700): il grassetto extra era
     una richiesta esplicita precedente, mai ritirata. */
  bottom:12%;
  margin:0; font-size:clamp(25px,3.4vw,44px); font-weight:800; line-height:1.04;
  letter-spacing:-.032em; color:var(--ink); font-family:var(--display);
}

.split-riga{
  display:flex; width:min(1080px,92vw); height:clamp(320px,36vw,460px);
  /* Un aspect-ratio fisso qui (provato) toglie lo stretch ma lega la forma
     della card a quella dell'immagine di copertina — su telefono diventava
     troppo bassa per il testo, che si tagliava. Il fronte ora calcola da
     solo, in JS (vedi aggiornaSfondo in initSplitScroll), una dimensione
     "cover" IDENTICA per tutte e tre le fette: l'immagine non si stira mai
     (mantiene sempre le sue proporzioni vere) qualunque sia l'altezza che
     la riga assume — le due cose sono libere di cambiare indipendentemente. */
  position:relative; will-change:transform;
  /* SENZA questo, il flip non si vede affatto su WebKit/Safari: la riga e'
     l'anello intermedio fra lo stage (che porta perspective) e le card
     (che ruotano) — se la riga stessa non partecipa al contesto 3D, lo
     appiattisce per i suoi discendenti e la prospettiva del nonno non
     arriva piu' alle card. Il sorgente originale lo mette esplicitamente
     sull'equivalente di questo elemento (transformStyle:preserve-3d');
     mancava, e su Chromium il difetto non si vedeva (piu' permissivo),
     ma su WebKit il fronte restava sempre visibile, mai il retro. */
  transform-style:preserve-3d;
}
.split-card{
  position:relative; flex:1 1 0; height:100%;
  transform-style:preserve-3d; will-change:transform;
}
.split-fronte, .split-retro{
  position:absolute; inset:0; overflow:hidden; backface-visibility:hidden;
  border-radius:0; /* JS la fa crescere: gli angoli esterni partono gia' arrotondati sotto */
}
.split-card:first-child .split-fronte, .split-card:first-child .split-retro{ border-radius:16px 0 0 16px; }
.split-card:last-child .split-fronte, .split-card:last-child .split-retro{ border-radius:0 16px 16px 0; }
.split-fronte{ z-index:2; }
.split-fronte-img{
  /* prima larga il 300% e spostata di -0/-100/-200% col "left" percentuale:
     funzionava, ma legava la dimensione dello sfondo al 100%/100% del suo
     stesso riquadro (percentuale), che e' esattamente cio' che stirava
     l'immagine se la riga cambiava proporzione. Ora resta della stessa
     dimensione della sua card (100%) e basta: background-size e
     background-position arrivano gia' in pixel veri da initSplitScroll,
     niente piu' percentuali su cui lo stretch possa rientrare dalla
     finestra. */
  position:absolute; inset:0; height:100%; width:100%;
  background-repeat:no-repeat;
}
.split-retro{
  z-index:1; transform:rotateY(180deg);
  display:flex; flex-direction:column;
  /* prima color-mix con --accent-page: il fondo cambiava tono da pagina a
     pagina (o virava al navy di default). Richiesto esplicitamente un
     grigio neutro sempre uguale, su desktop e su mobile, senza dipendere
     dall'accento della pagina. */
  background:linear-gradient(155deg, color-mix(in srgb, var(--ink) 72%, white) 0%, var(--ink) 100%);
  border:1px solid rgba(255,255,255,.08);
}
/* Prima l'immagine era a piena tela DIETRO il testo (object-fit:cover +
   velo scuro sopra): con le tre foto vere del PDF, non generate su misura,
   il ritaglio "cover" tagliava a caso e il testo sopra diventava illeggibile
   in piu' punti (segnalato dall'utente). Ora l'immagine ha un riquadro
   tutto suo, SOPRA al testo, mai dietro: zero sovrapposizione per
   costruzione, non per taratura del velo. object-fit:contain e non cover:
   ogni foto mantiene la propria proporzione reale (il volto e' quasi
   quadrato, il cassonetto piu' verticale, le strade piu' larghe) invece di
   essere tutte forzate nello stesso rettangolo — "niente effetto stretch",
   richiesto esplicitamente. */
.split-retro-figura{
  position:relative; z-index:2; flex:0 0 auto;
  /* ingrandita e portata quasi al bordo (richiesto esplicitamente): meno
     padding laterale, piu' altezza. object-fit:contain su .split-retro-img
     (sotto) evita comunque qualunque stiramento qualunque sia lo spazio. */
  height:44%; padding:clamp(8px,1.4vw,14px) clamp(4px,0.8vw,8px) 0;
  display:flex; align-items:flex-end; justify-content:center;
}
.split-retro-img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.split-retro-testo{
  /* centrato invece che ancorato in alto: i testi accorciati (mobile in
     mente) lasciavano un vuoto vistoso in fondo alla card, che qui e' bassa
     e larga (aspect-ratio della riga, non piu' un clamp indipendente) */
  position:relative; z-index:2; flex:1 1 auto; min-height:0;
  padding:clamp(8px,1.4vw,14px) clamp(18px,2.4vw,28px) clamp(16px,2.2vw,26px);
  display:flex; flex-direction:column; justify-content:center;
}
/* stessa grana feTurbulence usata altrove in pagina, ma in bianco: qui il
   fondo e' scuro, il grano scuro sarebbe invisibile */
.split-retro::before{
  content:""; position:absolute; inset:0; z-index:1; opacity:.35; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.split-num{ display:block; font-size:clamp(16px,1.7vw,21px); font-weight:700; color:#fff; opacity:.75; }
.split-retro h3{ margin:5px 0 0; font-size:clamp(18px,2.3vw,27px); font-weight:700; letter-spacing:-.02em; color:#fff; }
.split-retro p{ margin:6px 0 0; font-size:clamp(14.5px,1.9vw,24px); line-height:1.32; color:rgba(255,255,255,.85); }

@media (max-width:760px){
  /* Il fronte ora si ridimensiona da solo in JS (aggiornaSfondo), quindi
     qui l'altezza puo' tornare a essere quella che serve al testo del
     retro senza rischio di stirare l'immagine: piu' alta in proporzione
     alla larghezza rispetto al desktop, dove le tre colonne sono larghe e
     il testo ci sta comodo su poche righe. */
  .split-riga{ width:98vw; height:clamp(420px,120vw,520px); }
}

/* senza JS o con "riduci le animazioni": niente scroll-jack di quattro
   schermate ne' flip 3D — le tre card restano semplicemente impilate,
   gia' girate sul contenuto vero (leggibile fin da subito, non serve
   scorrere apposta per raggiungerlo). initSplitScroll in pagine.js esce
   subito in questo caso e non tocca piu' nulla via JS. */
html.movimento-ridotto .split-scroll{ height:auto; }
html.movimento-ridotto .split-stage{ position:relative; height:auto; flex-direction:column; gap:20px; perspective:none; padding:0; }
html.movimento-ridotto .split-intro,html.movimento-ridotto .split-outro{ display:none; }
html.movimento-ridotto .split-riga{ flex-direction:column; height:auto; width:100%; gap:16px; }
/* .split-card altezza AUTO, non piu' clamp(...,420px): quel valore era
   tarato per lo stato "girato" con .split-retro ancora position:absolute
   (righe sotto), dove il contenuto riempie esattamente la card. Qui
   .split-retro diventa position:relative (per uscire dal flip 3D) e
   perde percio' il vincolo "inset:0" che lo faceva combaciare col
   riquadro — il suo contenuto reale (immagine quasi a grandezza naturale
   + testo) misura ~637px, molto di piu' dei 420px fissi: il testo finiva
   fuori dalla propria card, coperto dalla card successiva (bug trovato
   dall'utente via screenshot, riprodotto con reduced_motion="reduce" in
   Playwright prima di questo fix). height:auto lascia che la card segua
   il proprio contenuto invece di tagliarlo a una misura pensata per
   un'altra modalita'. */
html.movimento-ridotto .split-card{ height:auto; transform-style:flat; }
html.movimento-ridotto .split-fronte{ display:none; }
html.movimento-ridotto .split-retro{ position:relative; inset:auto; transform:none; border-radius:16px !important; height:auto; }
/* .split-retro-figura ha "height:44%" nella regola base (pagine.css sopra):
   una percentuale che ha bisogno di un genitore ad altezza DEFINITA per
   risolversi. Con .split-retro ora ad altezza auto (riga sopra), quel 44%
   non risolve a nulla di utile e la foto renderizza vicino alla sua
   dimensione nativa (misurato: 552x479px, decisamente troppo per una
   card impilata). Un tetto esplicito qui la riporta a una misura
   ragionevole senza toccare la regola base, che serve intatta al flip 3D. */
html.movimento-ridotto .split-retro-figura{ height:auto; max-height:220px; padding-top:22px; }

.legge{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px); align-items:start;
  --sep:clamp(15px,1.9vw,22px);
}
/* PERSA nel passaggio a video (2026-09-05): quando .legge-figura e' stato
   riscritto per il video, la vecchia regola responsive di .legge e' finita
   dentro il blocco cancellato e non e' stata rimessa. Risultato segnalato
   dall'utente: a telefono restava una griglia a due colonne STRETTE anche
   sotto i 400px — il pannello video si schiacciava a 142x80px, di fatto
   invisibile. Qui si torna a una sola colonna, video sopra e testo sotto. */
@media (max-width:820px){
  .legge{ grid-template-columns:1fr; gap:clamp(22px,4vw,30px); }
  .legge-figura{ order:-1; }
}
.norme{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.norme li{
  position:relative; padding-left:34px;
  font-size:16.5px; line-height:1.62; color:var(--ink-2);
}
.norme li + li{ margin-top:var(--sep); padding-top:var(--sep);
                border-top:1px solid var(--line); }
/* dalla seconda voce in poi il padding del filetto separatore spinge il testo
   in giu' ma non l'asterisco, che e' posizionato sul bordo alto della voce:
   va scalato della stessa quantita', altrimenti resta appeso sopra la riga */
.norme li + li::before{ top:calc(var(--sep) + .2em); }
.norme b{ color:var(--ink); font-weight:700; }
/* l'asterisco del deck. In maschera e non come immagine colorata, cosi'
   prende --accent-page come tutto il resto della pagina; e non e' un glifo
   tipografico, che cambierebbe forma da un font all'altro (stessa ragione
   per cui .spunta disegna la spunta in CSS). */
.norme li::before{
  content:""; position:absolute; left:2px; top:.2em; width:17px; height:17px;
  background:var(--accent-page, var(--navy));
  --ast:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M4.2 7.5l15.6 9'/%3E%3Cpath d='M19.8 7.5l-15.6 9'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask:var(--ast) center/contain no-repeat;
          mask:var(--ast) center/contain no-repeat;
}
.legge-figura{
  /* Prima erano due PNG generate separatamente, composte a mano con
     CSS transform tarati a occhio per ogni larghezza (desktop/tablet/
     mobile avevano ognuna la propria percentuale) — fragile, e il
     risultato restava "sembra incollato" (segnalato dall'utente,
     2026-09-05). Ora e' un video vero generato con Higgsfield (vedi
     initVideoScrub in pagine.js), scrubbato dallo scroll invece che
     riprodotto: una sola sorgente 16:9, object-fit:cover la adatta a
     qualunque proporzione del riquadro senza bisogno di ritarature
     per breakpoint. */
  position:relative; overflow:hidden; border-radius:16px; aspect-ratio:16/9;
  background:var(--paper-2);
}
.legge-poster, .legge-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.legge-video{
  opacity:0; transition:opacity .3s ease;
}
/* il poster sparisce SOLO quando il video ha davvero dipinto il suo primo
   fotogramma (classe aggiunta all'evento "seeked" in initVideoScrub) — mai
   prima, altrimenti su iOS si vede un buco vuoto finche' il video non parte */
.legge-figura.ha-video .legge-video{ opacity:1; }
.legge-figura.ha-video .legge-poster{ opacity:0; }
html.movimento-ridotto .legge-video{ display:none } /* resta solo il poster, martelletto gia' appoggiato */
/* la nota resta l'unico blocco allineato a sinistra sotto una sezione tutta
   centrata: la si riporta in asse */
.sez-legge .hint-fonte{
  margin:clamp(26px,3vw,40px) auto 0; text-align:center; max-width:96ch;
}

/* ================= HOLO — pagina scura (2026-09-05) =================
   Unica pagina del sito su fondo nero, scelta esplicita dell'utente: le
   particelle luminose del titolo e i totem olografici (immagini prese dal
   deck, tutte gia' scontornate su fondo scuro) su grigio chiaro perdono
   quasi tutto. La pagina NON riscrive i componenti: ribalta soltanto i
   token di colore sul <body>, cosi' barra, footer, card e bottoni gia'
   scritti seguono da soli senza una seconda versione di ognuno. */
body.holo{
  --paper:#07080B; --paper-2:#0F1117; --ink:#F2F5FA; --ink-2:#AEB7C5; --ink-3:#79828F;
  --line:rgba(255,255,255,.13);
  color-scheme:dark;
}
/* il marchio esiste solo in nero su trasparente: invertirlo da' esattamente
   la stessa forma in bianco, senza dover generare e mantenere un secondo file */
body.holo .brand-icon, body.holo .brand-word{ filter:invert(1); }
body.holo .hero-piatto{ background:none; }

/* ---- il palco: 100svh di buio dove le particelle compongono H.O.L.O. ---- */
.holo-hero{
  position:relative; min-height:100svh; width:100%;
  display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 30%, #0d1119 0%, #05060A 62%);
  padding:0 var(--gutter); text-align:center;
}
.holo-hero canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* stessa vignettatura della reference: spegne i bordi e tiene l'occhio al centro */
.holo-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(115% 115% at 50% 42%, transparent 50%, rgba(0,0,0,.72) 100%);
}
.holo-hero-in{ position:relative; z-index:2; display:grid; gap:clamp(20px,3vw,38px); justify-items:center; }
.holo-titolo{
  margin:0; font-family:var(--display); font-weight:700; line-height:1;
  font-size:clamp(46px,13.5vw,190px); letter-spacing:-.035em; color:#fff;
  text-shadow:0 0 60px rgba(45,189,243,.45), 0 0 140px rgba(45,189,243,.2);
  /* parte spenta: si accende quando le particelle hanno finito di comporla
     (classe .mostra da initHoloTitolo), non a tempo fisso */
  opacity:0; filter:blur(16px); transform:scale(1.03);
  transition:opacity .9s ease, filter .9s ease, transform .9s ease;
}
.holo-titolo.mostra{ opacity:1; filter:blur(0); transform:none; }
.holo-sotto{
  margin:0; max-width:34ch; color:var(--ink-2);
  font-size:clamp(16px,1.9vw,23px); line-height:1.5;
  opacity:0; transform:translateY(14px); transition:opacity .8s ease .35s, transform .8s ease .35s;
}
.holo-titolo.mostra ~ .holo-sotto{ opacity:1; transform:none; }
.holo-scroll{
  position:absolute; left:50%; bottom:clamp(22px,4vh,44px); transform:translateX(-50%);
  z-index:2; display:grid; justify-items:center; gap:10px;
  font-size:10.5px; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
.holo-scroll span{ display:block; width:1px; height:46px; background:linear-gradient(180deg,rgba(255,255,255,.6),transparent); }

/* ---- parole che si mettono a fuoco una dopo l'altra (come la reference) ---- */
.mat-parola{
  display:inline-block; opacity:0; filter:blur(9px); transform:translateY(.42em);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1), filter .75s cubic-bezier(.2,.7,.2,1),
             transform .75s cubic-bezier(.2,.7,.2,1);
}
.dentro .mat-parola{ opacity:1; filter:blur(0); transform:none; }

/* ---- frase-manifesto fra una sezione e l'altra ---- */
.holo-claim{
  margin:0 auto; max-width:22ch; text-align:center;
  font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(28px,5vw,68px); line-height:1.06; color:#fff;
}
.holo-claim em{ font-style:normal; color:var(--cyan); }

/* ---- il prodotto: totem grande + poche voci tecniche ---- */
.holo-prodotto{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px); align-items:center;
}
.holo-figura{ position:relative; display:grid; place-items:center; }
/* l'alone dietro al totem: e' quello che fa leggere "sta illuminando la
   stanza" invece di "e' un png incollato sul nero" */
.holo-figura::before{
  content:""; position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(45,189,243,.30) 0%, rgba(45,189,243,.10) 42%, transparent 70%);
  filter:blur(18px);
}
.holo-figura img{
  position:relative; display:block; width:auto; height:auto;
  max-width:100%; max-height:clamp(320px,52vh,560px);
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.65));
}
.holo-specs{ display:grid; gap:clamp(16px,2.2vw,26px); margin-top:clamp(18px,2.4vw,28px); }
.holo-spec{ border-top:1px solid var(--line); padding-top:14px; }
.holo-spec b{ display:block; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
.holo-spec span{ display:block; margin-top:6px; font-size:clamp(16px,1.7vw,20px); color:var(--ink); }

/* ---- i tre numeri ---- */
.holo-numeri{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px); }
.holo-num b{
  display:block; font-family:var(--display); font-weight:700; letter-spacing:-.04em;
  font-size:clamp(46px,7.5vw,104px); line-height:1; color:#fff;
  text-shadow:0 0 44px rgba(45,189,243,.35);
}
.holo-num span{ display:block; margin-top:10px; color:var(--ink-2); font-size:clamp(14.5px,1.5vw,17px); line-height:1.5; max-width:26ch; }

/* ---- i riquadri dei contesti d'uso: immagine del deck + una riga ---- */
.holo-usi{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,28px); }
.holo-uso{
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  padding:clamp(20px,2.6vw,30px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
/* ogni contesto tiene il colore del proprio render nel deck (blu/rosso/verde):
   l'alone lo riprende, cosi' il riquadro sembra illuminato dal totem dentro */
.holo-uso::before{
  content:""; position:absolute; left:50%; top:6%; width:70%; aspect-ratio:1; translate:-50% 0;
  background:radial-gradient(circle, var(--g, rgba(45,189,243,.28)) 0%, transparent 68%);
  filter:blur(16px); pointer-events:none;
}
.holo-uso img{ position:relative; display:block; width:auto; max-width:100%; max-height:clamp(200px,26vh,300px); }
.holo-uso h3{ position:relative; margin:clamp(14px,2vw,20px) 0 0; font-size:clamp(17px,1.9vw,22px); font-weight:700; letter-spacing:-.02em; color:#fff; }
.holo-uso p{ position:relative; margin:8px 0 0; font-size:clamp(14px,1.45vw,16.5px); line-height:1.5; color:var(--ink-2); max-width:30ch; }

/* ---- cosa comprende, ridotto a etichette invece che a elenchi lunghi ---- */
.holo-incluso{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(20px,2.6vw,30px); }
.holo-incluso li{
  list-style:none; border:1px solid var(--line); border-radius:99px;
  padding:10px 18px; font-size:clamp(13.5px,1.35vw,15.5px); color:var(--ink-2);
  background:rgba(255,255,255,.03);
}

/* ---- chiusura: l'invito a sentirsi, che e' lo scopo della pagina ---- */
.holo-cta{
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:26px;
  background:radial-gradient(90% 140% at 12% 0%, rgba(45,189,243,.16) 0%, transparent 58%), rgba(255,255,255,.03);
  padding:clamp(30px,5vw,68px); text-align:center;
  display:grid; justify-items:center; gap:clamp(16px,2.2vw,26px);
}
.holo-cta h2{ margin:0; max-width:18ch; }
.holo-cta p{ margin:0; max-width:52ch; color:var(--ink-2); font-size:clamp(15.5px,1.6vw,19px); line-height:1.55; }
.holo-cta-dati{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px; font-size:15px; }
.holo-cta-dati a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line); }
.holo-cta-dati a:hover{ color:#fff; border-color:currentColor; }

@media (max-width:900px){
  .holo-prodotto{ grid-template-columns:1fr; gap:clamp(24px,5vw,40px); }
  .holo-usi{ grid-template-columns:1fr; }
  .holo-uso img{ max-height:clamp(220px,34vh,300px); }
}
@media (max-width:640px){
  .holo-numeri{ grid-template-columns:1fr; gap:26px; text-align:left; }
  .holo-num span{ max-width:none; }
}