/* Anton, il carattere del titolo della home, servito dal sito e non da Google
   Fonts: un dominio esterno in meno prima del consenso ai cookie, e nessun
   indirizzo del visitatore mandato a Google. Solo il sottoinsieme latino, 12 KB. */
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;
  src:url(../font/anton-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ==========================================================================
   HOME NUOVA - tipografia condensata su fondi fotografici, con movimento
   Il contenuto e' quello di sempre: cambia la scala, il carattere, l'aria e
   il movimento. Nessun testo e' stato tolto.
   ========================================================================== */

/* --- La testata --------------------------------------------------------- */
.dreammm.h2 .dm-hero{min-height:100svh;display:grid;align-content:center;
  padding-top:clamp(140px,17vh,200px);padding-bottom:clamp(70px,9vh,110px)}

/* Il fondo fotografico. Trattato duro perche' deve leggersi come materia
   sotto la tipografia, non come una fotografia di montagna: desaturato,
   scurito, e con una velatura navy che tiene il contrasto del testo.
   Si muove lentissimo - venti secondi per un ciclo - perche' un fondo fermo
   sotto un titolo fermo e' una fotografia, non una scena. */
.dreammm.h2 .h2-fondo{position:absolute;inset:-6%;z-index:0;
  background-size:cover;background-position:center 42%;
  filter:grayscale(.72) contrast(1.16) brightness(.42);
  animation:h2-deriva 34s ease-in-out infinite alternate;
  will-change:transform}
@keyframes h2-deriva{
  from{transform:scale(1.04) translate3d(-1.2%,0,0)}
  to{transform:scale(1.12) translate3d(1.2%,-1.4%,0)}
}
.dreammm.h2 .dm-hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(102deg,rgba(14,26,31,.95) 24%,rgba(14,26,31,.62) 56%,rgba(14,26,31,.86));
  pointer-events:none}

/* Le etichette minute in monospazio: il contrappunto che fa sembrare tutto
   "da studio". C'e' su tutti i riferimenti, da noi non c'era. */
.dreammm.h2 .h2-eti{position:absolute;top:calc(77px + 30px);left:var(--gutter);right:var(--gutter);
  z-index:4;display:flex;justify-content:space-between;gap:20px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.44)}
.dreammm.h2 .h2-eti span{white-space:nowrap}

/* --- Il titolo: condensato, enorme, in maiuscolo ------------------------- */
.dreammm.h2 .dm-mega{font-family:Anton,var(--dm-display),sans-serif;font-weight:400;
  font-size:clamp(46px,min(9.2vw,13.6vh),176px);line-height:.9;
  letter-spacing:.002em;text-transform:uppercase;color:#fff}
.dreammm.h2 .dm-mega em{font-style:normal;color:var(--lime)}

/* L'immagine dentro la frase: sta nel flusso del testo, allineata alla base
   delle lettere, e per questo si legge come parte del titolo e non come una
   figura messa accanto. */
.dreammm.h2 .h2-inline{display:inline-block;vertical-align:-.1em;
  width:.86em;height:.72em;margin-left:.16em;
  background-size:cover;background-position:center;
  border-radius:.12em;filter:grayscale(.2) contrast(1.05);
  box-shadow:0 10px 34px rgba(0,0,0,.5)}

.dreammm.h2 .dm-hero .dm-piombo{font-size:clamp(18px,1.9vw,25px);max-width:40ch}

/* --- Le sezioni: piu' aria e una cosa sola per schermata ----------------- */
.dreammm.h2 section{padding-block:clamp(96px,13vw,190px)}
.dreammm.h2 .dm-grande{font-size:clamp(34px,6.4vw,92px);line-height:.94}
.dreammm.h2 .dm-eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:400;font-size:11px;letter-spacing:.17em}

/* --- Il movimento dei bordi ---------------------------------------------
   Una luce che percorre il filo in cima a ogni sezione. E' il tipo di
   movimento che si nota senza disturbare la lettura: non si muove il testo,
   si muove la luce sul bordo. */
.dreammm.h2 .dm-fondale{position:relative}
.dreammm.h2 .dm-fondale::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  z-index:5;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--lime),transparent);
  background-size:38% 100%;background-repeat:no-repeat;
  animation:h2-luce 9s linear infinite;opacity:.6}
@keyframes h2-luce{
  from{background-position:-45% 0}
  to{background-position:145% 0}
}

/* La grana che respira: si muove appena, e toglie l'aria di "piatto" ai
   fondi pieni senza aggiungere un solo file. */
.dreammm.h2 .dm-scura::after,
.dreammm.h2 .dm-superficie::after{content:"";position:absolute;inset:0;z-index:0;
  background:var(--grana);background-size:220px 220px;opacity:.035;
  pointer-events:none;animation:h2-grana 7s steps(6) infinite}
@keyframes h2-grana{
  0%{transform:translate3d(0,0,0)} 20%{transform:translate3d(-3%,2%,0)}
  40%{transform:translate3d(2%,-3%,0)} 60%{transform:translate3d(-2%,-2%,0)}
  80%{transform:translate3d(3%,1%,0)} 100%{transform:translate3d(0,0,0)}
}

@media (max-width:820px){
  .dreammm.h2 .h2-eti{position:static;margin-bottom:24px;flex-direction:column;gap:5px}
  .dreammm.h2 .h2-eti span:nth-child(2){display:none}
  .dreammm.h2 .dm-hero{padding-top:clamp(110px,14vh,150px)}
}

/* Chi ha chiesto meno movimento non lo riceve: niente deriva, niente luce,
   niente grana. La pagina resta identica, solo ferma. */
@media (prefers-reduced-motion:reduce){
  .dreammm.h2 .h2-fondo,
  .dreammm.h2 .dm-fondale::before,
  .dreammm.h2 .dm-scura::after,
  .dreammm.h2 .dm-superficie::after{animation:none}
}
/* --- Il contenitore della testata tornava stretto e centrato --------------
   `.dm-hero` e' diventato una griglia per centrare in verticale. Ma il
   contenitore dentro ha `margin-inline:auto`, e **i margini automatici su un
   elemento di griglia annullano lo stiramento**: la colonna si e' stretta al
   contenuto (906px invece di 1340) e i margini l'hanno centrata.
   Basta chiedere la larghezza piena. */
.dreammm.h2 .dm-hero .dm-wrap{width:100%}

/* Il fondo era sceso quasi al nero fra la luminosita' bassa e la velatura:
   la roccia non si vedeva piu' e restava un rettangolo scuro. */
/* Il filtro duro serviva alla fotografia di roccia; la galassia e' gia' del colore giusto. */
.dreammm.h2 .dm-hero::before{
  /* Tarata sul video di roccia di prima: sopra la galassia la spegneva.
     A sinistra resta densa, perche' li' sotto ci sono i titoli. */
  background:linear-gradient(102deg,rgba(9,14,26,.92) 16%,rgba(9,14,26,.42) 48%,rgba(9,14,26,.14))}

/* L'immagine dentro la frase: piu' grande, con un bordo che la dichiara.
   Il ritaglio parte dall'alto, dove nei mockup c'e' la parte leggibile del
   sito invece del fondo. */
.dreammm.h2 .h2-inline{width:1.02em;height:.78em;
  background-position:center 18%;
  border-radius:.1em;box-shadow:0 0 0 2px rgba(255,255,255,.16),0 14px 40px rgba(0,0,0,.6);
  filter:grayscale(.1) contrast(1.12) saturate(1.05)}
/* ==========================================================================
   LA TESTATA VIVA: il fondo e i testi che entrano
   ========================================================================== */

/* --- Lo sfondo della testata ----------------------------------------------
   Prima un video (604 KB, decodificati per sempre), poi una galassia disegnata.
   Adesso un campo di particelle su tela **trasparente**: il fondo lo fa il
   gradiente qui sotto, che non costa niente, e la tela ci mette solo i punti. */
.dreammm.h2 .h2-spazio{position:absolute;inset:0;z-index:0;overflow:hidden;
  filter:none;animation:none;
  background:radial-gradient(120% 100% at 70% 40%,#101a2e,#070a12 70%)}
.dreammm.h2 .h2-particelle{position:absolute;inset:0;
  opacity:0;transition:opacity 1.2s ease}
.dreammm.h2 .h2-particelle.e-disegnata{opacity:1}


/* Il testo sta sopra il fondo e sopra la cresta: se si incrociano, vince
   la parola. */
.dreammm.h2 .dm-hero .dm-wrap{z-index:3}

/* --- I testi che entrano ------------------------------------------------
   Entrano in ordine di lettura, non tutti insieme: occhiello, titolo riga
   per riga, frase, sostegno, bottoni, recensioni. Il ritardo cresce di poco
   ogni volta - novanta millesimi - perche' si legga come una sequenza e non
   come un elenco che sfarfalla. */
@keyframes h2-entra{
  from{opacity:.01;transform:translate3d(0,26px,0)}
  to{opacity:1;transform:none}
}
@keyframes h2-riga{
  from{transform:translate3d(0,108%,0)}
  to{transform:none}
}

.js-attivo .dreammm.h2 .dm-hero__occhiello,
.js-attivo .dreammm.h2 .h2-eti,
.js-attivo .dreammm.h2 .dm-hero .dm-piombo,
.js-attivo .dreammm.h2 .dm-hero .dm-hero__sotto p,
.js-attivo .dreammm.h2 .dm-hero .dm-azioni,
.js-attivo .dreammm.h2 .dm-hero .dm-recensioni{
  opacity:.01;animation:h2-entra .85s cubic-bezier(.16,1,.3,1) forwards}

.js-attivo .dreammm.h2 .h2-eti{animation-delay:.05s}
.js-attivo .dreammm.h2 .dm-hero__occhiello{animation-delay:.15s}
.js-attivo .dreammm.h2 .dm-hero .dm-piombo{animation-delay:.62s}
.js-attivo .dreammm.h2 .dm-hero .dm-hero__sotto p{animation-delay:.71s}
.js-attivo .dreammm.h2 .dm-hero .dm-azioni{animation-delay:.80s}
.js-attivo .dreammm.h2 .dm-hero .dm-recensioni{animation-delay:.89s}

/* Il titolo entra riga per riga, dal basso, con la riga che fa da finestra.
   E' l'unica animazione del titolo: farlo anche dissolvere lo farebbe
   sembrare incerto. */
.dreammm.h2 .dm-mega .dm-riga{overflow:hidden;display:block}
.js-attivo .dreammm.h2 .dm-mega .dm-riga > span{display:block;
  transform:translate3d(0,108%,0);
  animation:h2-riga 1.05s cubic-bezier(.16,1,.3,1) forwards}
.js-attivo .dreammm.h2 .dm-mega .dm-riga:nth-child(1) > span{animation-delay:.28s}
.js-attivo .dreammm.h2 .dm-mega .dm-riga:nth-child(2) > span{animation-delay:.40s}

/* L'immagine dentro la frase arriva dopo il titolo, altrimenti sale con le
   lettere e sembra una lettera anche lei. */
.js-attivo .dreammm.h2 .h2-inline{opacity:0;transform:scale(.82);
  animation:h2-inline .8s cubic-bezier(.16,1,.3,1) 1.05s forwards}
@keyframes h2-inline{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .js-attivo .dreammm.h2 .dm-hero *{animation:none!important;opacity:1!important;transform:none!important}
  /* Le particelle restano ferme: ci pensa gia' il JavaScript, qui e' solo
     una cintura di sicurezza. */
  .dreammm.h2 .h2-particelle{opacity:.7}
}

/* L'oggetto dentro il titolo e' astratto e nasce gia' su fondo scuro: niente
   bordo chiaro, che serviva a staccare le schermate dei clienti e qui invece
   lo separerebbe dalle lettere. La luce viola dentro e il taglio lime in cima
   sono gli stessi del resto del sito, quindi si fonde da solo. */
.dreammm.h2 .h2-inline{box-shadow:none;
  filter:none;background-position:center;
  width:.92em;height:.74em;border-radius:.06em}
/* Il fondo dell'immagine e' quasi nero ma non esattamente quello della
   testata, e attorno all'oggetto si vedeva un rettangolo. Con `screen` il
   nero sparisce del tutto e resta solo la luce: e' lo stesso modo in cui
   bepatrickdavid fonde la sua tipografia con l'immagine, e ci evita di
   scontornare un PNG. */
.dreammm.h2 .h2-inline{mix-blend-mode:screen;background-color:transparent}
/* --- Il divisore fra le sezioni e' dritto -------------------------------
   Il profilo a picchi apparteneva al linguaggio di prima. Con la tipografia
   nuova la sezione deve chiudere netta: il taglio dritto e' piu' duro e non
   compete con il titolo. */
.dreammm.h2 .dm-picchi{display:none}
/* ==========================================================================
   LO SCATTO ALLA SEZIONE SUCCESSIVA
   `proximity` e non `mandatory`, e la ragione e' misurata: solo due sezioni
   su nove stanno in una schermata. Le altre vanno da 1,09 a 1,90 schermate,
   e con lo scatto obbligatorio chi scorre si perderebbe da un terzo a meta'
   di sette sezioni - fra cui i nove servizi e il problema, cioe' il contenuto
   che converte e quello che porta la SEO.

   Con `proximity`: se ti fermi vicino a un confine, ci scivola dentro; se sei
   a meta' di una sezione lunga, ti lascia leggere. E' nativo, non toglie lo
   scorrimento di mano a nessuno, e funziona con tastiera e trackpad.

   Quando le sezioni saranno alte una schermata, qui basta cambiare una parola.
   ========================================================================== */
/* --- Lo scatto del CSS e' stato tolto, e non e' un ripiego -----------------

   `scroll-snap-type:y proximity` sembrava il modo nativo e gentile di fare la
   stessa cosa. Misurandolo si e' visto che **rendeva illeggibile meta' della
   pagina**: dentro una sezione piu' alta dello schermo - il Metodo, Chi siamo,
   i Lavori, le Garanzie - ogni colpo di rotellina veniva riassorbito e la
   pagina non avanzava di un pixel. Non "scattava male": non si scorreva.

   Prova: fermi a 2680, quattro colpi di rotellina.
     con `y proximity` -> 2680, 2680, 2680, 2680
     con `none`        -> 2800, 2920, 3040, 3160

   Il salto fra sezioni ora lo fa `scatto.js`, che sa distinguere una sezione
   alta una schermata da una lunga. Il CSS non serve piu' e faceva solo danno.
   Resta il margine, che serve alle ancore: senza, il titolo della sezione
   finisce sotto la testata fissa. */
.dreammm.h2 > section{scroll-margin-top:77px}
/* ==========================================================================
   SEZIONE ALTA UNA SCHERMATA
   Meno 77px perche' la testata e' fissa: senza la sottrazione la sezione
   sborda di quei 77 e lo scatto si ferma sempre un po' prima della fine.
   ========================================================================== */
/* La regola sta in `sistema.css`, che la usano tutte e due le famiglie di
   pagine. Qui c'era la sua copia, con un peso maggiore: vinceva sulla
   impaginazione del nastro e sulla home le carte finivano sopra il titolo.
   Una definizione sola, nel foglio condiviso. */

/* --- Il bianco che respira ----------------------------------------------
   Due aloni molto tenui che vanno avanti e indietro con tempi diversi, cosi'
   non tornano mai nella stessa posizione. Al 5 e al 4 per cento si vedono
   appena: e' quello che li rende giusti. Piu' visibili diventerebbero una
   decorazione, e la decorazione qui non serve a niente. */
.dreammm.h2 .h2-aurora{position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 42% at 22% 30%,rgba(105,103,251,.13),transparent 70%),
    radial-gradient(34% 38% at 78% 72%,rgba(200,249,4,.10),transparent 70%);
  animation:h2-respira 26s ease-in-out infinite alternate;will-change:transform}
@keyframes h2-respira{
  from{transform:translate3d(-2%,-1.5%,0) scale(1)}
  to{transform:translate3d(2.5%,2%,0) scale(1.1)}
}

/* --- L'impaginato: dire a sinistra, mostrare a destra, punti sotto ------- */
.dreammm.h2 .h2-prob{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  grid-template-areas:"dire scena" "punti punti";
  align-items:center;gap:clamp(26px,4vh,56px) clamp(30px,4vw,72px);
  position:relative;z-index:2;width:100%}
.dreammm.h2 .h2-prob__dire{grid-area:dire}
.dreammm.h2 .h2-prob__scena{grid-area:scena;margin:0}
.dreammm.h2 .h2-punti{grid-area:punti}

.dreammm.h2 .h2-prob .dm-grande{font-size:clamp(32px,5.4vw,78px);margin-bottom:20px}
.dreammm.h2 .h2-prob__testo{color:#3D4A52;font-size:clamp(15.5px,1.2vw,18px);
  line-height:1.62;max-width:44ch}
.dreammm.h2 .h2-prob__testo p{margin:0}

/* --- Il portatile, disegnato e non fotografato ---------------------------
   Due rettangoli e un'inclinazione. Non pesa niente, resta nitido a
   qualsiasi risoluzione e non va rifatto quando cambia il grafico dentro. */
.dreammm.h2 .h2-pc{perspective:1400px;width:100%}
.dreammm.h2 .h2-pc__vetro{position:relative;aspect-ratio:16/10;
  background:linear-gradient(160deg,#101f26,#0a1418);
  border:10px solid #17272e;border-radius:14px;
  box-shadow:0 40px 90px rgba(14,26,31,.30),0 2px 0 rgba(255,255,255,.06) inset;
  transform:rotateX(7deg) rotateY(-9deg);transform-origin:50% 100%;
  overflow:hidden;padding:14px 10px 8px}
.dreammm.h2 .h2-pc__vetro svg{width:100%;height:auto;display:block}
.dreammm.h2 .h2-pc__base{height:13px;margin:0 -7%;
  background:linear-gradient(180deg,#1b2c34,#0d171c);
  border-radius:0 0 16px 16px;
  box-shadow:0 20px 40px rgba(14,26,31,.28);
  transform:rotateX(7deg) rotateY(-9deg);transform-origin:50% 0}

.dreammm.h2 .h2-pc__griglia line{stroke:rgba(255,255,255,.09);stroke-width:1}
.dreammm.h2 .h2-pc__eti{fill:rgba(255,255,255,.34);font-size:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.dreammm.h2 #h2-punta{filter:drop-shadow(0 0 8px currentColor)}

/* La frase dentro lo schermo cambia da sola insieme al grafico. */
.dreammm.h2 .h2-pc__dice{position:absolute;left:14px;bottom:12px;right:14px;
  font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.62);margin:0;
  transition:color .5s}
.dreammm.h2 .h2-pc__dice b{display:block;font-family:var(--dm-display);font-weight:800;
  font-size:15px;color:#FF4757;margin-bottom:2px;transition:color .5s}
.dreammm.h2 .h2-pc__dice.e-buono b{color:var(--lime)}
/* --- I tre punti ---------------------------------------------------------
   Erano tre righe con un bordo sotto e un numero viola: un elenco appoggiato
   in fondo. Ora sono tre colonne separate da un filo verticale, con l'indice
   in monospazio come le etichette della testata - lo stesso segno, quindi
   appartengono alla pagina invece di essere ospiti.
   Il filo si accende passandoci sopra: e' il solo movimento che serve. */
.dreammm.h2 .h2-punti{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;border-top:1px solid rgba(14,26,31,.14)}
.dreammm.h2 .h2-punti__voce{position:relative;
  padding:clamp(18px,2.4vh,30px) clamp(18px,2vw,34px) 0 0;
  margin-right:clamp(18px,2vw,34px)}
.dreammm.h2 .h2-punti__voce + .h2-punti__voce{
  padding-left:clamp(18px,2vw,34px);margin-left:0}
.dreammm.h2 .h2-punti__voce::before{content:"";position:absolute;
  left:calc(-1 * clamp(18px,2vw,34px));top:0;bottom:0;width:1px;
  background:rgba(14,26,31,.14);transition:background .4s}
.dreammm.h2 .h2-punti__voce:first-child::before{display:none}
.dreammm.h2 .h2-punti__voce::after{content:"";position:absolute;
  left:0;right:clamp(18px,2vw,34px);top:-1px;height:1px;
  background:var(--viola);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.dreammm.h2 .h2-punti__voce:hover::after{transform:scaleX(1)}

.dreammm.h2 .h2-punti__n{display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.16em;color:var(--viola-cupo);margin-bottom:10px}
.dreammm.h2 .h2-punti h3{font-family:var(--dm-display);font-weight:800;
  font-size:clamp(15px,1.25vw,19px);line-height:1.2;color:var(--navy);
  margin-bottom:7px}
.dreammm.h2 .h2-punti p{font-size:clamp(13.5px,1vw,15px);line-height:1.5;
  color:#5A6570;margin:0;max-width:32ch}

@media (max-width:980px){
  /* Sotto i 980 la sezione non ci sta piu' in una schermata: meglio
     lasciarla crescere che schiacciare il testo fino a non leggerlo. */
  /* (la variante per schermi stretti sta in sistema.css) */
  .dreammm.h2 .h2-prob{grid-template-columns:1fr;
    grid-template-areas:"dire" "scena" "punti"}
  .dreammm.h2 .h2-punti{grid-template-columns:1fr}
  .dreammm.h2 .h2-punti__voce{padding:18px 0 18px 0;margin:0}
  .dreammm.h2 .h2-punti__voce + .h2-punti__voce{padding-left:0;
    border-top:1px solid rgba(14,26,31,.14)}
  .dreammm.h2 .h2-punti__voce::before{display:none}
  .dreammm.h2 .h2-pc__vetro,
  .dreammm.h2 .h2-pc__base{transform:none}
}
/* La frase dentro lo schermo stava in basso e finiva sopra "anno 1".
   In alto a sinistra c'e' lo spazio che la linea piatta lascia libero: la
   frase lo occupa, e quando la linea sale le passa sotto senza toccarla. */
.dreammm.h2 .h2-pc__dice{top:14px;bottom:auto;left:16px;right:auto;
  max-width:58%;background:rgba(10,20,24,.55);backdrop-filter:blur(6px);
  padding:10px 13px;border-left:2px solid #FF4757;transition:border-color .5s,color .5s}
.dreammm.h2 .h2-pc__dice.e-buono{border-left-color:var(--lime)}
/* --- L'animazione di passaggio ------------------------------------------
   Prima il contenuto della sezione che arriva saliva tutto insieme, e per
   giunta a salto finito: si atterrava su una sezione gia' ferma e visibile,
   e la si vedeva sobbalzare un attimo dopo. Sembrava un errore, e in un certo
   senso lo era - si sovrapponevano tre movimenti diversi: la rivelazione
   `.dm-riv` del tema, il blocco intero, e il lampo sul filo in cima.

   Ora e' un movimento solo. I pezzi della sezione si scrivono uno dopo
   l'altro, con lo stesso passo e la stessa curva della testata, e cominciano
   *mentre* la pagina e' ancora in volo: quando ci si ferma il movimento e'
   gia' a meta', e non c'e' nessun salto da vedere.

   Il lampo sul filo e' sparito: su `.dm-hero::before` non era un filo ma la
   velatura scura sopra il video, e tornando alla testata la si vedeva
   schiarire di colpo. */

/* Lo stato di partenza, mentre la pagina vola verso la sezione. `animation:none`
   serve a spegnere quella del primo caricamento, che con `both` teneva ancora
   il suo fotogramma finale e vinceva su una semplice opacita'. */
.js-attivo .dreammm.h2 section.h2-vola .h2-tocco:not(.h2-fermo){
  animation:none;opacity:0;transform:translate3d(0,26px,0)}
.js-attivo .dreammm.h2 section.h2-arrivo .h2-tocco:not(.h2-fermo){
  animation:h2-entra .78s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--i,0) * 60ms)}

/* Il titolo grande non si dissolve: sale riga per riga dietro la sua finestra,
   come al primo caricamento. Dissolverlo lo farebbe sembrare incerto. */
.js-attivo .dreammm.h2 section.h2-vola .h2-tocco.dm-mega:not(.h2-fermo),
.js-attivo .dreammm.h2 section.h2-arrivo .h2-tocco.dm-mega:not(.h2-fermo){
  animation:none;opacity:1;transform:none}
.js-attivo .dreammm.h2 section.h2-vola .h2-tocco.dm-mega:not(.h2-fermo) .dm-riga > span{
  animation:none;transform:translate3d(0,108%,0)}
.js-attivo .dreammm.h2 section.h2-arrivo .h2-tocco.dm-mega:not(.h2-fermo) .dm-riga > span{
  animation:h2-riga .95s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--i,0) * 60ms)}

/* Durante il passaggio la rivelazione a scorrimento del tema sta ferma: il JS
   la da' per gia' avvenuta, e senza questo la sua transizione si sommerebbe
   all'entrata dei pezzi. Due spostamenti nello stesso verso fanno il salto. */
.js-attivo .dreammm.h2 section.h2-vola .dm-riv,
.js-attivo .dreammm.h2 section.h2-arrivo .dm-riv{transition:none}

@media (prefers-reduced-motion:reduce){
  .js-attivo .dreammm.h2 section.h2-vola .h2-tocco,
  .js-attivo .dreammm.h2 section.h2-arrivo .h2-tocco,
  .js-attivo .dreammm.h2 .h2-tocco.h2-fermo{
    animation:none;opacity:1;transform:none}
}
/* Il reset del tema azzera i margini di ogni paragrafo: i due capoversi si
   attaccavano e sembravano uno solo andato a capo male. */
.dreammm.h2 .h2-prob__testo p + p{margin-top:.9em}
/* Il nastro (la vetrina) e' passato in `sistema.css`: lo usano la home per i
   servizi e le pagine interne per i lavori. Tenerne due copie voleva dire
   vederle divergere alla prima modifica. */

/* ==========================================================================
   IL METODO 3M
   Fondo chiaro come la sezione del problema - il ritmo scuro/chiaro/scuro/chiaro
   e' quello che rende visibile lo scatto fra sezioni. Ma la composizione e'
   diversa: un dispositivo con dentro un'animazione, a due schermate dal
   portatile della sezione 2, si sarebbe letto come la stessa slide ripetuta.
   ========================================================================== */
.dreammm.h2 .h2-metodo{position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding-block:clamp(28px,4.6vh,72px)}

/* Le righe sono tutte `auto` e il blocco si centra: con il percorso su `1fr`
   si prendeva tutto lo spazio avanzato e spingeva le tre fasi fuori dalla
   schermata - la descrizione della prima finiva tagliata a meta'. */
.dreammm.h2 .mt-dentro{position:relative;z-index:2;
  flex:1;min-height:0;display:grid;
  grid-template-rows:auto auto auto;align-content:center;
  gap:clamp(14px,2.6vh,34px)}

/* --- La testa ----------------------------------------------------------- */
.dreammm.h2 .mt-testa{text-align:center;max-width:min(880px,92vw);margin-inline:auto}
.dreammm.h2 .mt-testa .dm-eyebrow{justify-content:center}
.dreammm.h2 .mt-titolo{font-family:var(--dm-display);font-weight:800;
  font-size:clamp(26px,3.4vw,48px);line-height:1.06;letter-spacing:-.022em;
  text-wrap:balance;margin:10px 0 0}
.dreammm.h2 .mt-sotto{margin:14px 0 0;font-size:clamp(15px,1.1vw,18px);
  line-height:1.55;color:var(--muto-scuro);max-width:66ch;margin-inline:auto;
  text-wrap:pretty}

/* --- Il percorso --------------------------------------------------------
   La linea si stira in larghezza e resta alta uguale (`preserveAspectRatio:
   none`), cosi' le tre stazioni cadono sopra le tre colonne a ogni misura. */
.dreammm.h2 .mt-percorso{position:relative}
.dreammm.h2 .mt-linea{display:block;width:100%;
  height:clamp(118px,19vh,200px);overflow:visible}

/* Il prima: tratti sparsi e piatti. Sono l'improvvisazione di cui parla il
   titolo, e spariscono quando la linea del metodo li raggiunge. */
/* Il binario: tutto il percorso, sempre visibile e chiarissimo. Ha preso il
   posto dei tratti sparsi, che dicevano "improvvisazione" ma sembravano un
   disegno rimasto a meta'. */
.dreammm.h2 .mt-binario{fill:none;stroke:#D9DFE6;stroke-width:3;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.dreammm.h2 .mt-corpo{fill:url(#mt-corpo-sf);stroke:none;
  opacity:calc(var(--vis,1) * var(--riempi,0))}

.dreammm.h2 .mt-scia{fill:none;stroke:url(#mt-sfumatura);stroke-width:4.5;opacity:var(--vis,1);
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}

/* L'alone attorno alla punta: e' quello che fa sembrare la linea una cosa che
   avanza e non un tratto che cresce. */
.dreammm.h2 .mt-alone{fill:var(--viola-cupo);opacity:0}

/* Il pallino che percorre la linea: e' lui a dare il tempo alle tre colonne. */
.dreammm.h2 .mt-viaggia{fill:var(--viola-cupo);opacity:0;transition:opacity .3s ease;
  filter:drop-shadow(0 0 10px rgba(87,84,224,.55))}

/* Le stazioni: in percentuale sul contenitore, non dentro l'SVG, cosi' il
   cerchio non si deforma quando la linea si stira. */
.dreammm.h2 .mt-stazione{position:absolute;
  width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:var(--bianco,#fff);border:2px solid #C3CBD3;
  transition:border-color .45s ease,transform .45s cubic-bezier(.22,1,.36,1),
             box-shadow .45s ease}
.dreammm.h2 .mt-stazione i{position:absolute;inset:4px;border-radius:50%;
  background:#C3CBD3;transition:background .45s ease}
.dreammm.h2 .mt-stazione.e-accesa{border-color:var(--viola-cupo);
  transform:scale(1.35);box-shadow:0 0 0 6px rgba(87,84,224,.14)}
.dreammm.h2 .mt-stazione.e-accesa i{background:var(--viola-cupo)}

/* --- Le tre fasi --------------------------------------------------------- */
.dreammm.h2 .mt-fasi{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.6vw,44px)}
.dreammm.h2 .mt-fase{text-align:center;padding-inline:clamp(0px,1vw,18px);
  opacity:.5;transition:opacity .5s ease}
.dreammm.h2 .mt-fase.e-accesa{opacity:1}

.dreammm.h2 .mt-fase__nome{font-family:var(--dm-display);font-weight:800;
  font-size:clamp(19px,1.9vw,28px);line-height:1.1;letter-spacing:-.015em;
  margin:0;color:var(--navy)}
/* La M grande e' il segno del marchio: e' il motivo per cui il metodo si
   chiama 3M, e va vista prima del resto della parola. */
.dreammm.h2 .mt-fase__nome b{color:var(--viola-cupo);font-weight:800}
.dreammm.h2 .mt-fase__eti{margin:6px 0 0;font-family:var(--dm-display);
  font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muto-scuro)}
.dreammm.h2 .mt-fase__txt{margin:10px 0 0;font-size:clamp(14px,1.02vw,17px);
  line-height:1.5;color:var(--muto-scuro);max-width:36ch;margin-inline:auto;
  text-wrap:pretty}

/* --- Schermi bassi e telefoni -------------------------------------------- */
@media (max-width:900px), (max-height:700px){
  .dreammm.h2 .h2-metodo{padding-block:var(--sp-lg)}
  .dreammm.h2 .mt-dentro{height:auto}
  /* Sul telefono le tre fasi si impilano, e allora la linea orizzontale non
     le collega piu' niente: sparisce, e restano le tre fasi tutte accese. */
  .dreammm.h2 .mt-percorso{display:none}
  .dreammm.h2 .mt-fasi{grid-template-columns:1fr;gap:var(--sp-md);
    margin-top:var(--sp-md)}
  .dreammm.h2 .mt-fase{opacity:1;text-align:left}
  .dreammm.h2 .mt-fase__txt{margin-inline:0;max-width:none}
}

@media (prefers-reduced-motion:reduce){
  /* Senza movimento la sequenza non ha senso: tutto acceso, tutto fermo. */
  .dreammm.h2 .mt-fase{opacity:1}
  .dreammm.h2 .mt-stazione{border-color:var(--viola-cupo)}
  .dreammm.h2 .mt-stazione i{background:var(--viola-cupo)}
  .dreammm.h2 .mt-viaggia{display:none}
}
/* ==========================================================================
   CHI SIAMO — da Belluno, in tutta Italia
   Sezione scura come la vetrina, ma con un mezzo ancora diverso: dopo un
   portatile, un nastro di foto e una linea disegnata, qui c'e' una
   costellazione. Il ritmo lo tengono fondo, griglia e caratteri; a cambiare
   ogni volta e' cosa si guarda.
   ========================================================================== */
.dreammm.h2 .h2-chi{position:relative;overflow:hidden;background:#080d14;
  display:flex;flex-direction:column;
  padding-block:clamp(28px,4.6vh,72px)}

.dreammm.h2 .ch-dentro{position:relative;z-index:2;flex:1;min-height:0;
  display:grid;align-content:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;gap:clamp(24px,4vw,72px)}

.dreammm.h2 .ch-particelle{position:absolute;inset:0;overflow:hidden;
  pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.dreammm.h2 .ch-particelle.e-disegnata{opacity:.5}

/* Un alone dietro la costellazione: senza, i punti galleggiano nel nero e la
   mappa non ha un centro. */
.dreammm.h2 .ch-alone{position:absolute;right:6%;top:50%;
  width:min(680px,52vw);aspect-ratio:1;transform:translateY(-50%);
  border-radius:50%;pointer-events:none;filter:blur(90px);
  background:radial-gradient(circle,rgba(87,84,224,.34),transparent 66%)}

/* --- La colonna del testo ------------------------------------------------ */
.dreammm.h2 .ch-titolo{font-family:var(--dm-display);font-weight:800;
  font-size:clamp(26px,3.2vw,46px);line-height:1.06;letter-spacing:-.022em;
  margin:0;text-wrap:balance}
.dreammm.h2 .ch-testo{margin-top:clamp(14px,1.8vh,22px)}
.dreammm.h2 .ch-testo p{font-size:clamp(15px,1.12vw,18px);line-height:1.6;
  color:rgba(255,255,255,.72);max-width:52ch}
.dreammm.h2 .ch-testo p + p{margin-top:.85em}

/* --- Le tre cifre -------------------------------------------------------- */
.dreammm.h2 .ch-cifre{list-style:none;margin:clamp(18px,2.4vh,30px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
  gap:clamp(18px,2.4vw,42px)}
.dreammm.h2 .ch-cifre li{max-width:17ch}
.dreammm.h2 .ch-cifre b{display:block;font-family:var(--dm-display);font-weight:800;
  font-size:clamp(28px,2.6vw,40px);line-height:1;letter-spacing:-.02em;
  color:var(--lime)}
.dreammm.h2 .ch-cifre span{display:block;margin-top:7px;font-size:12.5px;
  line-height:1.4;color:rgba(255,255,255,.55)}

.dreammm.h2 .ch-vai{margin-top:clamp(18px,2.4vh,30px)}

/* --- La costellazione ---------------------------------------------------- */
.dreammm.h2 .ch-mappa{position:relative;margin:0;
  justify-self:center;align-self:center}
.dreammm.h2 .ch-mappa svg{display:block;
  height:clamp(240px,52vh,470px);width:auto;overflow:visible}

/* --- Il contorno dell'Italia --------------------------------------------
   Aggiunto dopo: la sola costellazione era bella ma chiedeva troppo a chi
   guarda - bisognava indovinare che quei punti fossero un paese. Il confine
   viene dai dati veri, proiettato con le stesse costanti delle citta'. */
.dreammm.h2 .ch-contorno{
  fill:rgba(87,84,224,.14);
  stroke:rgba(178,196,220,.42);stroke-width:1;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;
  opacity:0}

/* I punti erano troppo deboli: si confondevano col campo di particelle dietro e
   la forma del paese non si leggeva. */
.dreammm.h2 .ch-punto{fill:rgba(228,238,250,.98);r:2.4;opacity:0}
@keyframes ch-appari{to{opacity:1}}

/* --- Il ciclo -------------------------------------------------------------
   Le animazioni valgono solo sotto `.e-anima`, che il JavaScript toglie e
   rimette: le animazioni CSS con `forwards` si fermano da sole e da sole non
   ripartono piu'. Senza questo, tornando sulla sezione si trovava il disegno
   gia' finito mentre tutte le altre ricominciano.

   Fuori da `.js-attivo` resta tutto visibile e fermo: senza JavaScript la
   mappa si vede lo stesso. */
.dreammm.h2 .h2-chi:not(.e-anima) .ch-contorno,
.dreammm.h2 .h2-chi:not(.e-anima) .ch-punto,
.dreammm.h2 .h2-chi:not(.e-anima) .ch-meta{opacity:1}
.dreammm.h2 .h2-chi:not(.e-anima) .ch-arco{stroke-dashoffset:0}
.js-attivo .dreammm.h2 .h2-chi:not(.e-anima) .ch-contorno,
.js-attivo .dreammm.h2 .h2-chi:not(.e-anima) .ch-punto,
.js-attivo .dreammm.h2 .h2-chi:not(.e-anima) .ch-meta{opacity:0}
.js-attivo .dreammm.h2 .h2-chi:not(.e-anima) .ch-arco{stroke-dashoffset:100}

/* Il contorno per primo: e' il palcoscenico, arriva prima degli attori. */
.dreammm.h2 .h2-chi.e-anima .ch-contorno{
  animation:ch-appari .9s ease forwards}
.dreammm.h2 .h2-chi.e-anima .ch-punto{
  animation:ch-appari .6s ease forwards;
  animation-delay:calc(.5s + var(--i,0) * 11ms)}

/* La dissolvenza di fine ciclo: tutto insieme, e si ricomincia. */
.dreammm.h2 .h2-chi.e-svanisce .ch-contorno,
.dreammm.h2 .h2-chi.e-svanisce .ch-punto,
.dreammm.h2 .h2-chi.e-svanisce .ch-meta,
.dreammm.h2 .h2-chi.e-svanisce .ch-arco,
.dreammm.h2 .h2-chi.e-svanisce .ch-eti{
  animation:none;opacity:0;transition:opacity .9s ease}

/* Gli archi si tracciano uno dopo l'altro, e poi restano. La lunghezza e'
   sovrastimata di proposito: `pathLength` la normalizza a 100, cosi' non serve
   misurarla con JavaScript. */
.dreammm.h2 .ch-arco{fill:none;stroke:var(--lime);stroke-width:1.1;
  opacity:.55;vector-effect:non-scaling-stroke;
  stroke-dasharray:100;stroke-dashoffset:100}
.dreammm.h2 .h2-chi.e-anima .ch-arco{
  animation:ch-traccia 1.15s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(1.4s + var(--i,0) * 175ms)}
@keyframes ch-traccia{to{stroke-dashoffset:0}}

.dreammm.h2 .ch-casa{fill:var(--lime)}

/* Le mete degli archi si accendono quando l'arco le raggiunge. Il ritardo e'
   lo stesso dell'arco piu' la sua durata, cosi' il puntino compare esattamente
   quando la linea arriva. */
.dreammm.h2 .ch-meta{fill:var(--lime);opacity:0}
.dreammm.h2 .h2-chi.e-anima .ch-meta{
  animation:ch-appari .45s ease forwards;
  animation-delay:calc(2.35s + var(--i,0) * 175ms)}
.dreammm.h2 .ch-casa-alone{fill:var(--lime);opacity:.16;
  transform-origin:center;animation:ch-pulsa 3.4s ease-in-out infinite}
@keyframes ch-pulsa{
  0%,100%{opacity:.10;transform:scale(.82)}
  50%{opacity:.26;transform:scale(1.12)}
}

.dreammm.h2 .ch-eti{fill:var(--lime);font-family:var(--dm-display);font-weight:800;
  font-size:11px;letter-spacing:.18em}
.js-attivo .dreammm.h2 .ch-eti{opacity:0}
.dreammm.h2 .h2-chi.e-anima .ch-eti{animation:ch-appari .8s ease 1.2s forwards}

/* --- Schermi bassi e telefoni -------------------------------------------- */
@media (max-width:900px), (max-height:700px){
  .dreammm.h2 .h2-chi{padding-block:var(--sp-lg)}
  .dreammm.h2 .ch-dentro{grid-template-columns:1fr;gap:var(--sp-md)}
  /* La mappa passa sopra il testo: e' l'immagine, e su una colonna sola
     l'immagine viene prima. */
  .dreammm.h2 .ch-mappa{order:-1}
  .dreammm.h2 .ch-mappa svg{height:clamp(220px,42vh,300px)}
  .dreammm.h2 .ch-cifre{grid-template-columns:1fr;gap:14px}
  .dreammm.h2 .ch-cifre li{max-width:none}
  .dreammm.h2 .ch-alone{right:-20%;width:min(460px,90vw)}
}

@media (prefers-reduced-motion:reduce){
  .dreammm.h2 .ch-punto{opacity:1;animation:none}
  .dreammm.h2 .ch-arco{stroke-dashoffset:0;animation:none}
  .dreammm.h2 .ch-meta{opacity:1;animation:none}
  .dreammm.h2 .ch-casa-alone{animation:none;opacity:.18}
}
/* ==========================================================================
   I MARCHI DEI CLIENTI — sezione chiara
   Due file che scorrono in senso opposto. E' l'unico movimento e non chiede
   niente: non si ferma, non aspetta, non si clicca.
   ========================================================================== */
.dreammm.h2 .h2-loghi{position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding-block:clamp(28px,4.6vh,72px)}
.dreammm.h2 .lg-dentro{position:relative;z-index:2;flex:1;min-height:0;
  display:grid;grid-template-rows:auto auto;align-content:center;
  gap:clamp(24px,4.6vh,60px)}

.dreammm.h2 .lg-testa{text-align:center;max-width:min(880px,92vw);margin-inline:auto}
.dreammm.h2 .lg-titolo{font-family:var(--dm-display);font-weight:800;
  font-size:clamp(26px,3.4vw,48px);line-height:1.06;letter-spacing:-.022em;
  margin:0;text-wrap:balance}
.dreammm.h2 .lg-sotto{margin:14px 0 0;font-size:clamp(15px,1.1vw,18px);
  line-height:1.55;color:var(--muto-scuro);max-width:66ch;margin-inline:auto;
  text-wrap:pretty}

/* Due file basse su una schermata intera lasciavano un vuoto sotto: piu'
   spazio fra loro e marchi piu' alti, cosi' la parte bassa ha un peso. */
.dreammm.h2 .lg-file{display:grid;gap:clamp(14px,3.2vh,44px)}
.dreammm.h2 .lg-muro{overflow:hidden;
  /* Le file sfumano ai lati invece di tagliarsi di netto: un logo tagliato a
     meta' sul bordo sembra un errore di impaginazione. */
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.dreammm.h2 .lg-fila{display:flex;width:max-content;
  gap:clamp(20px,3vw,52px);
  animation:lg-scorri 58s linear infinite}
.dreammm.h2 .lg-fila--indietro{animation-duration:72s;animation-direction:reverse}
/* Meta' esatta: a quel punto la seconda copia dei loghi si trova dov'era la
   prima, e il giro non si vede. */
@keyframes lg-scorri{to{transform:translateX(-50%)}}

/* Piu' grandi: alla misura di prima si leggevano a fatica, ed erano la prova
   sociale della pagina - il pezzo che deve convincere, non fare da sfondo. */
.dreammm.h2 .lg-marchio{flex:none;
  width:clamp(130px,12.5vw,214px);height:clamp(66px,9vh,124px);
  background-repeat:no-repeat;background-position:center;background-size:contain;
  filter:grayscale(1);opacity:.5;
  transition:filter .35s ease,opacity .35s ease}
.dreammm.h2 .lg-muro:hover .lg-marchio{opacity:.62}
.dreammm.h2 .lg-marchio:hover{filter:none;opacity:1}

/* ==========================================================================
   I LAVORI — lo stesso nastro dei servizi, carte orizzontali
   ========================================================================== */
/* Le proporzioni della scheda-lavoro, l'ambiente e il mockup stavano qui
   legati a `.dreammm.h2`, cioe' alla sola home, e sulle pagine interne le
   stesse schede ricadevano sulla proporzione verticale dei servizi. Ora
   stanno in sistema.css senza quel vincolo: una definizione sola. Qui resta
   il fondo, che e' davvero solo della home. */
.dreammm.h2 .h2-lavori{background:#080d14}
/* Un sito e' largo: la carta cambia proporzione, il meccanismo resta lo stesso.
   `--cw` qui e' la larghezza e `--ch` resta l'altezza della foto. */
/* La carta orizzontale, con un tetto suo: a parita' di altezza una carta
   larga occupa molto piu' spazio di una verticale, e sul 27" diventava un
   cartellone. `--ch-max` lo legge `vetrina.js`. */






.dreammm.h2 .lv-tutti{margin-left:clamp(10px,1.4vw,22px);
  font-family:var(--dm-display);font-weight:800;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lime);
  text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .3s}
.dreammm.h2 .lv-tutti:hover{border-bottom-color:var(--lime)}

/* ==========================================================================
   LE GARANZIE — sezione chiara, senza disegno
   Dopo un grafico, un nastro, una linea, una costellazione e due file di loghi,
   una pagina ha bisogno di un punto in cui si legge e basta.
   ========================================================================== */
.dreammm.h2 .h2-gar{position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding-block:clamp(28px,4.6vh,72px)}
.dreammm.h2 .gr-dentro{position:relative;z-index:2;flex:1;min-height:0;
  display:grid;grid-template-rows:auto auto;align-content:center;
  gap:clamp(22px,3.4vh,46px)}

.dreammm.h2 .gr-testa{text-align:center;max-width:min(900px,92vw);margin-inline:auto}
.dreammm.h2 .gr-titolo{font-family:var(--dm-display);font-weight:800;
  font-size:clamp(26px,3.4vw,48px);line-height:1.06;letter-spacing:-.022em;
  margin:0;text-wrap:balance}

.dreammm.h2 .gr-sotto{margin:14px 0 0;color:#3D4A52;
  max-width:60ch;margin-inline:auto}

/* Riquadri e non un elenco: come elenco la sezione risultava vuota - quattro
   paragrafi in croce su una pagina larga. Il riquadro da' peso a ogni promessa
   e le mette sullo stesso piano, che e' poi quello che sono. */
.dreammm.h2 .gr-voci{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,24px)}
.dreammm.h2 .gr-voce{position:relative;overflow:hidden;
  padding:clamp(20px,2.2vw,34px) clamp(20px,2.2vw,34px) clamp(20px,2.2vw,32px);
  border:1px solid #E2E7EE;border-radius:16px;
  background:linear-gradient(168deg,rgba(255,255,255,.9),rgba(246,248,252,.72));
  transition:border-color .4s ease,transform .4s cubic-bezier(.22,1,.36,1),
             box-shadow .4s ease}
.dreammm.h2 .gr-voce:hover{border-color:rgba(87,84,224,.42);
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(20,30,60,.09)}

/* La barra in cima si allunga all'entrata: e' l'unico movimento della sezione,
   perche' questa e' quella in cui si legge e basta. */
.dreammm.h2 .gr-barra{position:absolute;left:0;top:0;height:3px;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--viola-cupo),var(--lime));
  transition:transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 110ms)}
/* Il rivelo e' quello standard del tema (`.dm-riv` -> `.dentro`), lo stesso
   usato in tutto il sito: cosi' i riquadri entrano quando si arriva davvero,
   non al caricamento della pagina che sta dieci schermate piu' su. */
.dreammm.h2 .gr-voce.dentro .gr-barra{transform:scaleX(1)}
html:not(.js-attivo) .dreammm.h2 .gr-barra{transform:scaleX(1)}

/* Il numero grande e' il segno che tiene su il riquadro. Sta dietro al testo,
   scolorito: si sente, non si legge. */
.dreammm.h2 .gr-n{position:absolute;right:clamp(12px,1.4vw,22px);top:clamp(6px,.8vw,12px);
  font-family:var(--dm-display);font-weight:800;
  font-size:clamp(46px,5vw,78px);line-height:1;
  color:rgba(87,84,224,.11);font-variant-numeric:tabular-nums;
  pointer-events:none}
.dreammm.h2 .gr-voce h3{position:relative;font-family:var(--dm-display);font-weight:800;
  font-size:clamp(17px,1.5vw,23px);line-height:1.18;letter-spacing:-.012em;
  margin:0;color:var(--navy);max-width:22ch}
.dreammm.h2 .gr-voce p{position:relative;margin:10px 0 0;
  line-height:1.55;color:var(--muto-scuro);text-wrap:pretty}

/* ==========================================================================
   L'ULTIMA PAROLA — sezione scura
   Qui non c'e' niente da guardare se non la frase e il bottone: e' l'unico
   punto della pagina in cui si chiede qualcosa.
   ========================================================================== */
.dreammm.h2 .h2-finale{position:relative;overflow:hidden;background:#080d14;
  display:flex;flex-direction:column;
  padding-block:clamp(28px,4.6vh,72px)}
.dreammm.h2 .fn-particelle{position:absolute;inset:0;overflow:hidden;
  pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.dreammm.h2 .fn-particelle.e-disegnata{opacity:.62}
.dreammm.h2 .fn-alone{position:absolute;left:50%;top:52%;
  width:min(920px,88vw);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;filter:blur(100px);
  background:radial-gradient(circle,rgba(87,84,224,.34),transparent 66%)}

.dreammm.h2 .fn-dentro{position:relative;z-index:2;flex:1;min-height:0;
  display:grid;align-content:center;justify-items:center;text-align:center}
.dreammm.h2 .fn-titolo{font-family:var(--dm-display);font-weight:800;
  font-size:clamp(32px,5.2vw,80px);line-height:1.02;letter-spacing:-.03em;
  margin:0;text-wrap:balance}
.dreammm.h2 .fn-sotto{margin:clamp(18px,2.4vh,28px) 0 0;
  font-size:clamp(15px,1.15vw,19px);line-height:1.6;
  color:rgba(255,255,255,.72);max-width:62ch;text-wrap:pretty}
.dreammm.h2 .fn-btn{margin-top:clamp(22px,3vh,36px)}
.dreammm.h2 .fn-nota{margin:16px 0 0;font-size:13.5px;
  color:rgba(255,255,255,.5)}

/* --- Schermi bassi e telefoni -------------------------------------------- */
@media (max-width:900px), (max-height:700px){
  .dreammm.h2 .h2-loghi,
  .dreammm.h2 .h2-gar,
  .dreammm.h2 .h2-finale{padding-block:var(--sp-lg)}
  .dreammm.h2 .lg-dentro,
  .dreammm.h2 .gr-dentro,
  .dreammm.h2 .fn-dentro{height:auto}
  .dreammm.h2 .gr-voci{grid-template-columns:1fr;gap:var(--sp-md)}
}

@media (prefers-reduced-motion:reduce){
  .dreammm.h2 .lg-fila{animation:none}
}
/* ==========================================================================
   UNIFORMITA'
   Le sezioni sono nate una alla volta e ognuna si era portata la sua misura.
   Misurate a 1600px, i titoli erano 78, 58, 48, 46, 48, 58, 48 e 80 pixel -
   quattro scale diverse per la stessa cosa - con un peso 900 in mezzo a sette
   800, e tre valori di spaziatura verticale.

   Qui non si pareggia tutto a un numero solo: si dichiarano **tre ruoli**, e
   ogni titolo prende il suo.

     titolo centrato   le sezioni che parlano a tutta larghezza
     titolo in colonna piu' piccolo, perche' divide lo spazio con un'immagine
     chiusura          l'ultima parola, l'unico punto in cui si chiede qualcosa

   Sta in fondo al foglio, e per una ragione: le regole di sezione sono sparse
   e alcune vivono dentro media query. Un blocco piazzato prima le avrebbe
   lasciate vincere. Le poche eccezioni per schermi piccoli sono ridichiarate
   in coda a questo stesso blocco.
   ========================================================================== */

/* --- I titoli ------------------------------------------------------------ */
.dreammm.h2 .vt-titolo,
.dreammm.h2 .mt-titolo,
.dreammm.h2 .lg-titolo,
.dreammm.h2 .gr-titolo{
  font-family:var(--dm-display);font-weight:800;
  font-size:clamp(30px,3.9vw,56px);line-height:1.04;letter-spacing:-.025em;
  text-wrap:balance}

.dreammm.h2 .h2-prob .dm-grande,
.dreammm.h2 .ch-titolo{
  font-family:var(--dm-display);font-weight:800;
  font-size:clamp(30px,3.6vw,52px);line-height:1.05;letter-spacing:-.025em;
  text-wrap:balance}

.dreammm.h2 .fn-titolo{
  font-family:var(--dm-display);font-weight:800;
  font-size:clamp(34px,5.2vw,80px);line-height:1.02;letter-spacing:-.03em}

/* --- I paragrafi di testa e i testi di lettura ---------------------------
   Una misura sola, la stessa del corpo del sito. Il metodo e le garanzie erano
   a 16px: due punti sotto al resto, e si vedeva. */
.dreammm.h2 .vt-sotto,
.dreammm.h2 .mt-sotto,
.dreammm.h2 .lg-sotto,
.dreammm.h2 .fn-sotto,
.dreammm.h2 .ch-testo p,
.dreammm.h2 .vt-carta__txt,
.dreammm.h2 .mt-fase__txt,
.dreammm.h2 .gr-voce p,
.dreammm.h2 .h2-punti p{
  font-size:clamp(15px,1.1vw,18px);line-height:1.55;text-wrap:pretty}

/* Il grigio del testo sulle sezioni chiare: ce n'erano due, #3D4A52 e #5F6E78.
   Vince il piu' scuro - su bianco fa 8,6 contro 1 invece di 5,3, e con un testo
   che si legge non si fa i tirchi. Il chiaro resta per le etichette. */
.dreammm.h2 .mt-sotto,
.dreammm.h2 .lg-sotto,
.dreammm.h2 .mt-fase__txt,
.dreammm.h2 .gr-voce p,
.dreammm.h2 .h2-punti p{color:#3D4A52}

/* E quello sulle sezioni scure: una sola trasparenza. */
.dreammm.h2 .vt-sotto,
.dreammm.h2 .fn-sotto,
.dreammm.h2 .ch-testo p,
.dreammm.h2 .vt-carta__txt{color:rgba(255,255,255,.74)}

/* --- La spaziatura delle sezioni ----------------------------------------- */
.dreammm.h2 .h2-prob-sez,
.dreammm.h2 .h2-vetrina,
.dreammm.h2 .h2-metodo,
.dreammm.h2 .h2-chi,
.dreammm.h2 .h2-loghi,
.dreammm.h2 .h2-gar,
.dreammm.h2 .h2-finale{padding-block:clamp(28px,4.6vh,72px)}

/* --- Le eccezioni per schermi piccoli, ridichiarate qui in coda ----------
   Non e' ripetizione inutile: senza, il blocco qui sopra scavalcherebbe le
   regole originali, che stanno piu' su nel foglio. */
@media (max-width:900px), (max-height:700px){
  .dreammm.h2 .vt-carta__txt{font-size:14px}
  .dreammm.h2 .h2-prob-sez,
  .dreammm.h2 .h2-vetrina,
  .dreammm.h2 .h2-metodo,
  .dreammm.h2 .h2-chi,
  .dreammm.h2 .h2-loghi,
  .dreammm.h2 .h2-gar,
  .dreammm.h2 .h2-finale{padding-block:var(--sp-lg)}
}

/* I marchi erano troppo scoloriti: su fondo bianco, al 50% di opacita' e tutti
   in grigio, si leggevano a fatica. */
.dreammm.h2 .lg-marchio{opacity:.72}
.dreammm.h2 .lg-muro:hover .lg-marchio{opacity:.8}

/* --- Sul telefono la testata parte subito dal titolo ----------------------
   La riga grigia sopra (studio, Belluno, 5,0 su Google) ripeteva
   l'occhiello, partiva a filo del bordo e spingeva il titolo in basso: via,
   e il testo sale sotto la barra. 11 settembre 2026. */
@media (max-width:820px){
  .dreammm.h2 .h2-eti{display:none}
  .dreammm.h2 .dm-hero{padding-top:calc(77px + 30px);align-content:start}
}