/* =========================================================
   Home · stili propri (la base è in mbp.css)
   ========================================================= */

/* ---------- 1. apertura: il muro che si raddrizza ---------- */
.apertura{position:relative;height:310vh;height:310svh}
.apertura-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(132,209,21,.34), rgba(47,62,29,.28) 40%, transparent 70%),
    radial-gradient(60% 50% at 18% 8%, rgba(244,246,239,.045), transparent 70%),
    linear-gradient(180deg,#121310 0%,#161615 55%,#11120e 100%)}
.apertura-pin>.fascio{z-index:0}
/* la maschera è disegnata una volta: home.js la ingrandisce con scale() e rimpicciolisce il muro dello stesso fattore */
.muro-maschera{position:absolute;inset:0;z-index:1;will-change:transform;
  -webkit-mask:radial-gradient(var(--mR0,62vmax) calc(var(--mR0,62vmax)*.82) at 50% 50%,#000 45%,transparent 100%);
          mask:radial-gradient(var(--mR0,62vmax) calc(var(--mR0,62vmax)*.82) at 50% 50%,#000 45%,transparent 100%)}
.muro-scena{position:absolute;inset:0;perspective:1400px;perspective-origin:50% 50%;will-change:transform}
/* la prospettiva sta sull'ancora (stesso punto di fuga, il centro dello schermo) e il muro è piatto:
   le colonne sono nel suo piano, quindi l'immagine è la stessa, ma niente contesto 3D da ordinare a ogni fotogramma */
.muro-ancora{position:absolute;left:50%;top:50%;width:0;height:0;perspective:1400px;perspective-origin:0 0}
.muro{position:absolute;left:0;top:0;display:flex;gap:var(--g);will-change:transform}
/* niente will-change sulle colonne: sette livelli alti come il muro finivano la memoria della scheda video sopra i 1280 px
   (Chrome smetteva di disegnare titolo e menu). Le colonne si muovono dentro il livello del muro */
.muro-col{display:flex;flex-direction:column;gap:var(--g)}
.muro-foto{position:relative;width:var(--tw);aspect-ratio:9/16;background:#0b0c09;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.muro-foto img,.muro-foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* i fotogrammi si spengono con l'opacità; home.js la aggiorna a gradini (pochi ridisegni, non uno per fotogramma) */
.muro-foto:not(.bersaglio) img{opacity:calc(1 - var(--dim,0))}
/* luce lime che lambisce il muro dal basso, ombre per leggere il titolo */
/* telefono: niente maschera sul muro che si muove; un bordo del colore del fondo, disegnato una volta, si allarga con scale() */
.muro-vignetta{position:absolute;inset:0;z-index:1;pointer-events:none;will-change:transform;
  background:radial-gradient(var(--mR0,72vmax) calc(var(--mR0,72vmax)*.82) at 50% 50%,rgba(19,20,17,0) 45%,rgba(19,20,17,.6) 78%,#131411 100%)}
.con-vignetta .muro-maschera{-webkit-mask:none;mask:none}
/* meno livelli a tutto schermo al telefono: il fascio sotto il muro è già coperto dal bordo, la luce lime va nello stesso livello dell'ombra */
.apertura-pin.con-vignetta>.fascio,.con-vignetta .muro-luce{display:none}
.apertura-titolo,.apertura-piede{will-change:transform,opacity}
.muro-luce{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;will-change:opacity;
  background:radial-gradient(90% 60% at 50% 105%, rgba(150,230,40,.75), rgba(132,209,21,.15) 45%, transparent 70%)}
.muro-ombra{position:absolute;inset:0;z-index:2;pointer-events:none;will-change:opacity;
  background:
    radial-gradient(60% 46% at 50% 50%, rgba(10,11,8,.5), transparent 75%),
    radial-gradient(55% 45% at 0% 100%, rgba(10,11,8,.8), transparent 75%),
    linear-gradient(180deg, rgba(10,11,8,.6) 0%, transparent 24%, transparent 66%, rgba(10,11,8,.55) 100%)}
.apertura-vetro{z-index:3;opacity:0;pointer-events:none;will-change:opacity}

.apertura-titolo{position:absolute;left:var(--gut);right:var(--gut);top:46%;z-index:5;text-align:center;pointer-events:none;
  font-size:min(6vw,11vh);line-height:.98;
  transform:translate3d(0,calc(-50% + var(--ty,0px)),0) scale(var(--ts,1));
  text-shadow:0 .04em .14em rgba(0,0,0,.5)}
.apertura-titolo>span{display:block;white-space:nowrap}
.apertura-piede{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(28px,6vh,64px);z-index:5;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;pointer-events:none}
.apertura-piede .testo-l{max-width:30ch;text-shadow:0 1px 20px rgba(0,0,0,.6)}
.apertura-piede .pulsante{margin-top:22px}
.apertura-scorri{display:flex;align-items:center;gap:12px;color:var(--bianco-80);font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em}
.apertura-scorri i{position:relative;width:1px;height:44px;overflow:hidden;background:rgba(244,246,239,.18)}
.apertura-scorri i::after{content:"";position:absolute;left:0;top:0;width:1px;height:50%;background:var(--bianco);transform:translate3d(0,-100%,0);animation:mbp-scorri 2.4s var(--curva) infinite}
/* solo transform: animare top ricalcolerebbe la pagina a ogni fotogramma */
@keyframes mbp-scorri{to{transform:translate3d(0,200%,0)}}
.apertura.vede-testo .apertura-piede{pointer-events:auto}

/* ---------- 2. chi siamo: per chi lavoriamo ---------- */
.chi{position:relative;min-height:100vh;min-height:100svh;display:flex;overflow:hidden;isolation:isolate;background:var(--nero-2)}
.chi-fondi{position:absolute;inset:0;z-index:-2}
/* fotogrammi pieni, uno acceso alla volta: taglio secco, solo opacità */
.chi-fondi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.chi-fondi img.on{opacity:1;animation:mbp-respira 1.4s var(--curva-out) both}
.chi-velo{z-index:-1;background:
  linear-gradient(180deg,rgba(14,15,12,.82) 0%,rgba(14,15,12,.35) 30%,rgba(14,15,12,.3) 55%,rgba(14,15,12,.9) 100%),
  radial-gradient(80% 60% at 0% 60%,rgba(14,15,12,.55),rgba(14,15,12,0) 70%)}
.chi-dentro{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,5vh,56px);padding-block:calc(var(--menu-h) + clamp(28px,6vh,72px)) clamp(48px,9vh,100px)}
.chi-riga{max-width:34ch;text-shadow:0 1px 22px rgba(0,0,0,.6)}
.chi-titolo{display:grid;line-height:.98}
.chi-con{font-size:var(--t-m);line-height:1;text-shadow:0 .03em .2em rgba(0,0,0,.35)}
/* la parola gigante: tutte nello stesso posto, una accesa; entra a maschera (elemento piccolo) */
.chi-parole{display:grid;font-size:min(15.5vw,24vh);letter-spacing:-.055em;line-height:1.02;text-shadow:0 .03em .2em rgba(0,0,0,.3)}
.chi-parole>span{grid-area:1/1;white-space:nowrap;opacity:0;clip-path:inset(-10% -4% 100% -4%);transform:translate3d(0,18%,0)}
.chi-parole>span.on{opacity:1;clip-path:inset(-10% -4% -10% -4%);transform:none;transition:clip-path .4s var(--curva-out),transform .4s var(--curva-out)}
.chi.fermo .chi-parole>span{position:static;opacity:1;clip-path:none;transform:none;font-size:.32em;line-height:1}
.chi.fermo .chi-parole{display:flex;flex-wrap:wrap;gap:0 .3em;font-size:min(14.5vw,24vh)}
.chi-piede{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px}
.chi-rete{max-width:40ch;text-shadow:0 1px 22px rgba(0,0,0,.6)}
.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}

/* ---------- 3. cosa facciamo ---------- */
.servizi .capitolo-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.servizi .capitolo-media .velo-basso{background:linear-gradient(180deg,rgba(14,15,12,.5) 0%,rgba(14,15,12,0) 24%,rgba(14,15,12,0) 42%,rgba(14,15,12,.88) 100%)}
.servizi .capitolo-media .velo-sinistra{opacity:.9}
.servizio-testo{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(64px,10vh,112px);z-index:2}
/* composizione diversa per ogni servizio: non sei volte la stessa scena */
.servizi .capitolo[data-comp="basso-destra"] .servizio-testo{display:flex;flex-direction:column;align-items:flex-end;text-align:right;bottom:clamp(150px,20vh,200px)}
.servizi .capitolo[data-comp="basso-destra"] .velo-sinistra{background:radial-gradient(90% 70% at 100% 100%,rgba(14,15,12,.78),rgba(14,15,12,0) 70%)}
.servizi .capitolo[data-comp="alto-sinistra"] .servizio-testo{top:calc(var(--menu-h) + clamp(70px,11vh,120px));bottom:auto}
.servizi .capitolo[data-comp="alto-sinistra"] .velo-basso{background:linear-gradient(180deg,rgba(14,15,12,.92) 0%,rgba(14,15,12,.74) 45%,rgba(14,15,12,.2) 72%,rgba(14,15,12,.5) 100%)}
.servizi .capitolo[data-comp="centro"] .servizio-testo{top:var(--menu-h);bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.servizi .capitolo[data-comp="centro"] .velo-basso{background:radial-gradient(70% 55% at 50% 52%,rgba(14,15,12,.7),rgba(14,15,12,.25) 80%)}
/* Digital mostra il sito registrato: pieno di scritte, il velo le spegne (si legge solo il movimento della griglia) */
.servizi .capitolo[data-schermo] .velo-basso{background:linear-gradient(180deg,rgba(14,15,12,.8) 0%,rgba(14,15,12,.2) 32%),radial-gradient(75% 65% at 50% 52%,rgba(14,15,12,.93),rgba(14,15,12,.74) 85%)}
.servizi .capitolo[data-schermo] .velo-sinistra{display:none}
/* Eventi (festival): il titolo sta nel cielo, le persone sotto */
.servizi .capitolo[data-eventi] video{object-position:50% 30%}
.servizio-esempio{margin-top:clamp(8px,1.4vh,16px);text-shadow:0 1px 14px rgba(0,0,0,.6)}
.servizio-titolo{line-height:.96;text-shadow:0 .03em .2em rgba(0,0,0,.28)}
.servizio-testo p{margin-top:clamp(14px,2.2vh,24px);max-width:36ch;text-shadow:0 1px 22px rgba(0,0,0,.6)}
/* la stessa cosa in parole semplici: cosa cambia per chi ci sceglie */
.servizio-testo .servizio-pratica{margin-top:clamp(10px,1.6vh,16px);max-width:44ch;font-size:var(--testo);color:var(--bianco-80)}
.servizio-pratica b{font-weight:600;color:var(--bianco)}
/* il titolo della sezione resta fermo in alto: si capisce subito di cosa si parla */
.servizi-testa{position:absolute;left:var(--gut);top:calc(var(--menu-h) + 18px);z-index:20;font-size:clamp(22px,2.2vw,36px);font-weight:400;line-height:1.04;letter-spacing:-.04em;max-width:12ch;
  text-shadow:0 1px 18px rgba(0,0,0,.55);pointer-events:none}
/* ombra in alto a destra dietro l'indice: si legge anche sui video chiari */
.servizi-ombra{z-index:19;background:radial-gradient(45% 55% at 100% 14%,rgba(14,15,12,.66),rgba(14,15,12,0) 72%)}
.servizi-indice{position:absolute;right:var(--gut);top:calc(var(--menu-h) + 24px);z-index:20;display:grid;gap:6px;text-align:right}
.servizi-indice a{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;padding:3px 0;color:rgba(244,246,239,.88);text-shadow:0 1px 14px rgba(0,0,0,.6);transition:color .8s var(--curva-out),transform .8s var(--curva-out);display:inline-block}
.servizi-indice a:hover{color:var(--bianco)}
.servizi-indice a.attivo{color:var(--lime);transform:translateX(-8px)}
.servizi-link{position:absolute;right:var(--gut);bottom:clamp(64px,10vh,112px);z-index:20;justify-content:flex-end}

/* ---------- 4. lavori: visore + traccia di montaggio ---------- */
.visore{position:relative;height:calc(100vh + var(--n,8) * 55vh);height:calc(100svh + var(--n,8) * 55svh)}
.visore-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:var(--nero-2)}
.visore-schermo{position:absolute;inset:0;display:block;z-index:0;background:var(--nero-2);transition:opacity .2s var(--curva)}
.visore-schermo.respiro{opacity:.15}
.visore-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.visore-v.attivo{opacity:1}
.visore-v.entra{animation:mbp-respira 2.4s var(--curva-out) both}
@keyframes mbp-respira{from{transform:scale(1.06)}to{transform:scale(1)}}
.visore-velo{z-index:1;background:
  linear-gradient(180deg,rgba(14,15,12,.6) 0%,rgba(14,15,12,0) 30%,rgba(14,15,12,0) 52%,rgba(14,15,12,.88) 100%)}
.visore-testa{position:absolute;left:0;right:0;top:calc(var(--menu-h) - 4px);z-index:2;pointer-events:none}
.visore-titolo{line-height:.96;text-shadow:0 .03em .22em rgba(0,0,0,.3)}
.visore-piede{position:absolute;left:0;right:0;bottom:calc(clamp(58px,8vh,76px) + env(safe-area-inset-bottom));z-index:3}
.visore-riga{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.visore-info{display:grid;gap:10px;max-width:min(52vw,820px);text-shadow:0 1px 18px rgba(0,0,0,.7)}
.visore-meta{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--bianco-80)}
/* in una riga: il servizio dietro il lavoro e cosa ha risolto */
.visore-risolto{font-size:clamp(26px,3vw,52px);font-weight:300;line-height:1.06;letter-spacing:-.045em;color:var(--bianco);text-wrap:balance;max-width:17ch}
.visore-risolto.cambia{animation:mbp-riga .52s var(--curva-out) both}
@keyframes mbp-riga{from{clip-path:inset(0 0 100% 0);transform:translate3d(0,30%,0)}to{clip-path:inset(0 0 -10% 0);transform:none}}
.visore-azioni{justify-content:flex-end}
.visore-servizio{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--bianco)}
/* la traccia: segmenti larghi quanto la clip, il fotogramma ripetuto dentro come in timeline */
.traccia{position:relative;height:56px}
.traccia-clip{display:flex;gap:2px;height:100%}
.traccia-clip li{flex:var(--d,3) 1 0;min-width:0}
.traccia-clip a{position:relative;display:block;height:100%;background-position:left center;background-size:auto 100%;background-repeat:repeat-x;background-color:#1c1d19;
  opacity:.42;box-shadow:inset 0 0 0 1px rgba(244,246,239,.16);transition:opacity .3s var(--curva-out)}
.traccia-clip a:hover,.traccia-clip a:focus-visible{opacity:.85}
.traccia-clip a.attiva{opacity:1;box-shadow:inset 0 0 0 2px var(--lime)}
.traccia-clip a::after{content:"";position:absolute;top:-6px;bottom:-6px;left:50%;width:max(100%,44px);transform:translateX(-50%)}
.testina{position:absolute;left:0;top:-14px;bottom:-6px;width:2px;margin-left:-1px;background:var(--lime);box-shadow:0 0 12px rgba(132,209,21,.75);pointer-events:none;will-change:transform}
.testina::before{content:"";position:absolute;left:-5px;top:0;width:12px;height:12px;background:var(--lime);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}

/* ---------- 5. come lavoriamo ---------- */
/* qui la composizione cambia: girato pieno e titolo al centro, non in basso a sinistra */
.metodo .capitolo-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.metodo .capitolo-media .velo{background:
  radial-gradient(70% 55% at 50% 52%, rgba(14,15,12,.68), rgba(14,15,12,.28) 75%),
  linear-gradient(180deg, rgba(14,15,12,.5), rgba(14,15,12,0) 26%, rgba(14,15,12,0) 74%, rgba(14,15,12,.6))}
.metodo-testo{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-inline:var(--gut);padding-top:var(--menu-h)}
.metodo-titolo{align-self:stretch;font-size:min(11vw,19vh);line-height:.96;text-shadow:0 .04em .24em rgba(0,0,0,.35)}
.metodo-testo p{margin-top:clamp(18px,3vh,32px);max-width:30ch;text-shadow:0 1px 22px rgba(0,0,0,.7)}
.metodo .capitolo[data-comp="sinistra"] .metodo-testo{align-items:flex-start;text-align:left;justify-content:flex-start;padding-top:calc(var(--menu-h) + clamp(40px,8vh,100px))}
.metodo .capitolo[data-comp="destra"] .metodo-testo{align-items:flex-end;text-align:right;justify-content:flex-end;padding-bottom:clamp(140px,20vh,200px)}
.metodo .capitolo[data-comp="basso-sinistra"] .metodo-testo{align-items:flex-start;text-align:left;justify-content:flex-end;padding-bottom:clamp(150px,19vh,210px)}
.metodo .capitolo[data-comp="basso-sinistra"] .capitolo-media .velo{background:
  radial-gradient(75% 65% at 0% 100%, rgba(14,15,12,.82), rgba(14,15,12,0) 72%),
  linear-gradient(180deg, rgba(14,15,12,.5), rgba(14,15,12,0) 26%, rgba(14,15,12,0) 55%, rgba(14,15,12,.7))}
.metodo .capitolo[data-comp="sinistra"] .metodo-titolo,.metodo .capitolo[data-comp="destra"] .metodo-titolo{align-self:auto}
/* largo quanto la colonna: data-quota (.34) ne prende meno della metà, a sinistra del volto */
.metodo .capitolo[data-comp="basso-sinistra"] .metodo-titolo{align-self:stretch}
/* invito fisso per tutta la sezione: il primo passo del metodo è una chiamata */
.metodo-invito{position:absolute;left:0;right:0;bottom:clamp(36px,7vh,72px);z-index:30;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 22px;padding-inline:var(--gut)}
.metodo-invito p{font-size:var(--testo);color:var(--bianco-80);text-shadow:0 1px 16px rgba(0,0,0,.7)}

/* ---------- 5. le loro parole: la frase grande, il resto piccolo ---------- */
.parole{position:relative;padding-block:clamp(110px,14vw,220px);overflow:hidden;isolation:isolate;background:var(--nero)}
.parole-fondo{position:absolute;inset:0;z-index:-2}
/* fotogramma già sfocato e scurito (assets/img/sfocate): nessun filtro dal vivo */
.parole-fondo img{width:100%;height:100%;object-fit:cover;transform:scale(1.15)}
.parole-fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--nero) 0%,rgba(14,15,12,.25) 18%,rgba(14,15,12,.35) 82%,var(--nero) 100%)}
.parole>.fascio{z-index:-1;opacity:.6}
.parole-titolo{font-size:clamp(40px,7vw,128px);max-width:14ch}
.parole-lista{margin-top:clamp(64px,9vw,150px);display:grid;gap:clamp(56px,6vw,110px)}
.parere{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,28px);row-gap:clamp(18px,2.4vw,36px);align-items:start}
@media (min-width:761px) and (min-height:521px){.parere{min-height:72vh;min-height:72svh;align-content:center}}
.parere-frase{grid-column:1/11;font-size:clamp(28px,4.2vw,74px);font-weight:300;line-height:1.06;letter-spacing:-.045em;text-wrap:balance}
.parere--destra .parere-frase{grid-column:1/11}
.parere figcaption{grid-column:1/5;display:grid;gap:6px;padding-top:.5em}

.parere figcaption b{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;line-height:1.1;color:var(--bianco)}
.parere figcaption span{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;line-height:1.2;color:var(--bianco-60)}
.parere blockquote{grid-column:5/12;font-size:clamp(16px,1.2vw,19px);line-height:1.55;color:var(--bianco-80);max-width:52ch}

.parole-invito{margin-top:clamp(80px,10vw,150px);display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px}
.parole-wa{color:var(--bianco-80)}
.parole-wa a{color:var(--bianco);font-weight:600;transition:color .6s var(--curva-out)}
.parole-wa a:hover{color:var(--lime)}

/* ---------- 7. chiusura come titoli di coda ---------- */
.chiusura{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.chiusura>.media-pieno{z-index:-3}
.chiusura>.velo{z-index:-2}
.chiusura>.fascio{z-index:-1}
.chiusura .velo-pieno{background:rgba(14,15,12,.42)}
.chiusura-velo{background:linear-gradient(180deg,rgba(14,15,12,.5) 0%,rgba(14,15,12,0) 30%,rgba(14,15,12,.2) 60%,rgba(14,15,12,.85) 100%)}
.chiusura-dentro{padding-block:clamp(130px,18vh,210px) clamp(64px,11vh,110px)}
.chiusura-titolo{line-height:.96;text-shadow:0 .03em .2em rgba(0,0,0,.3)}
.chiusura-titolo .coda-2{text-align:right}
.chiusura-piede{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-top:clamp(28px,5vh,56px)}
.chiusura .testo-l{max-width:30ch}
.chiusura-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;font-size:var(--testo)}
.chiusura-azioni a:not(.pulsante){color:var(--bianco-80);transition:color .6s var(--curva-out)}
.chiusura-azioni a:not(.pulsante):hover{color:var(--lime)}

/* ---------- entrata montata (solo alla prima visita) ---------- */
.entrata{position:fixed;inset:0;z-index:89;overflow:hidden;isolation:isolate;cursor:pointer;
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(132,209,21,.30), rgba(47,62,29,.26) 40%, transparent 70%),
    radial-gradient(60% 50% at 18% 8%, rgba(244,246,239,.045), transparent 70%),
    linear-gradient(180deg,#121310 0%,#161615 55%,#11120e 100%)}
.entrata>.fascio{z-index:0}
.entrata-taglio{position:absolute;inset:0;z-index:1;opacity:0}
.entrata-taglio.on{opacity:1;z-index:2}
.entrata-taglio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.entrata-taglio.on img{animation:mbp-respira .62s var(--curva-out) forwards}
.entrata-taglio.senza-img img,.entrata-taglio.senza-img .entrata-velo{display:none}
.entrata-velo{background:radial-gradient(80% 70% at 30% 50%,rgba(14,15,12,.55),rgba(14,15,12,.2) 80%),linear-gradient(180deg,rgba(14,15,12,.35),rgba(14,15,12,0) 30%,rgba(14,15,12,0) 70%,rgba(14,15,12,.45))}
.entrata-parola{position:absolute;left:var(--gut);right:var(--gut);top:50%;z-index:2;transform:translate3d(0,-50%,0);white-space:nowrap;line-height:.96;
  text-shadow:0 .03em .22em rgba(0,0,0,.35)}
.entrata-parola .riga{display:block;clip-path:inset(100% -6% -20% -6%);transform:translate3d(0,40%,0)}
.entrata-taglio.on .riga{animation:mbp-sale .26s var(--curva-out) forwards}
.entrata-taglio.on .riga+.riga{animation-delay:60ms}
@keyframes mbp-sale{to{clip-path:inset(-20% -6% -20% -6%);transform:none}}
.entrata-salta{position:absolute;left:var(--gut);bottom:calc(16px + env(safe-area-inset-bottom));z-index:3;font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--bianco-60)}
body.in-entrata .menu{transform:translateY(-110%)}

/* ---------- tablet in piedi ---------- */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .apertura-titolo{top:auto;bottom:calc(clamp(28px,6vh,64px) + var(--alto-piede,150px) + 36px);text-align:left;font-size:10.4vw;transform-origin:0 100%;
    transform:translate3d(0,var(--ty,0px),0) scale(var(--ts,1))}
  .apertura-titolo>span{white-space:normal}
}

/* ---------- telefono ---------- */
@media (max-width:760px){
  .apertura{height:320vh;height:320svh}
  /* il titolo poggia sul piede (altezza misurata da home.js): mai sopra il testo, a 360 come a 430 */
  .apertura-titolo{top:auto;bottom:calc(24px + var(--alto-piede,150px) + 26px + env(safe-area-inset-bottom));text-align:left;font-size:12vw;line-height:.98;transform-origin:0 100%;
    transform:translate3d(0,var(--ty,0px),0) scale(var(--ts,1))}
  .apertura-titolo>span{white-space:normal}
  .muro-ombra{background:
    linear-gradient(180deg, rgba(10,11,8,.55) 0%, transparent 18%, transparent 30%, rgba(10,11,8,.62) 58%, rgba(10,11,8,.9) 100%)}
  .apertura-pin.con-vignetta .muro-ombra{background:
    linear-gradient(180deg, rgba(10,11,8,.55) 0%, transparent 18%, transparent 30%, rgba(10,11,8,.62) 58%, rgba(10,11,8,.9) 100%),
    radial-gradient(90% 60% at 50% 105%, rgba(150,230,40,.26), rgba(132,209,21,.06) 45%, transparent 70%)}
  .apertura-piede{flex-direction:column;align-items:flex-start;bottom:calc(24px + env(safe-area-inset-bottom))}
  .apertura-piede .testo-l{font-size:18px}
  .apertura-scorri{display:none}

  .chi-riga{font-size:17px}
  .chi-parole{font-size:min(14.5vw,15vh)}
  .chi-con{font-size:30px}
  .chi-dentro{padding-bottom:calc(36px + var(--barra) + env(safe-area-inset-bottom))}
  /* al telefono i testi dei servizi stanno dal 35% in giù (telefoni bassi): il velo li copre tutti */
  .servizi .capitolo[data-comp] .velo-basso{background:linear-gradient(180deg,rgba(14,15,12,.5) 0%,rgba(14,15,12,0) 18%,rgba(14,15,12,.3) 32%,rgba(14,15,12,.82) 58%,rgba(14,15,12,.92) 100%)}
  .servizi .capitolo[data-schermo] .velo-basso{background:linear-gradient(180deg,rgba(14,15,12,.84) 0%,rgba(14,15,12,.62) 26%,rgba(14,15,12,.84) 48%,rgba(14,15,12,.92) 100%)}
  .servizi .capitolo[data-comp] .servizio-testo{top:auto;bottom:calc(96px + var(--barra) + env(safe-area-inset-bottom));display:block;text-align:left}

  .servizio-testo{bottom:calc(96px + var(--barra) + env(safe-area-inset-bottom))}
  .servizio-testo p{font-size:17px}
  .servizio-testo .servizio-pratica{font-size:15px}
  .servizi-indice{display:none}
  .servizi-testa{font-size:22px}
  .servizi-link{left:var(--gut);right:var(--gut);bottom:calc(24px + var(--barra) + env(safe-area-inset-bottom));justify-content:flex-start;gap:10px}
  .servizi-link .pulsante{min-height:46px;padding:0 14px 0 16px}
  .azioni .pulsante{min-height:48px}

  .visore-piede{bottom:calc(24px + var(--barra) + env(safe-area-inset-bottom))}
  .visore-info{max-width:none}
  .visore-riga{flex-direction:column;align-items:flex-start;margin-bottom:14px}
  .visore-meta{font-size:12px}
  .visore-servizio{font-size:12px}
  .visore-risolto{font-size:26px;max-width:none}
  .visore-azioni{justify-content:flex-start;gap:10px}
  .visore-azioni .pulsante{min-height:44px;padding:0 14px 0 16px}
  .traccia{height:44px}   /* segmenti toccabili */

  .metodo-testo p{font-size:18px}
  .metodo-invito{bottom:calc(20px + var(--barra) + env(safe-area-inset-bottom));flex-direction:column;gap:10px}
  .metodo-invito p{font-size:15px}
  .parole-invito{flex-direction:column;align-items:flex-start}
  /* al telefono l'invito lime nelle sezioni fisse lo fa la barra in basso: niente doppioni */
  .servizi-link .pulsante:not(.pulsante--vuoto),.visore-parliamone,.metodo-invito .pulsante{display:none}

  .parere-frase,.parere--destra .parere-frase{grid-column:1/-1;text-align:left;font-size:29px}
  .parere figcaption,.parere--destra figcaption,.parere blockquote,.parere--destra blockquote{grid-column:1/-1}
  .parere blockquote{font-size:15px}
  .parole{padding-bottom:calc(110px + var(--barra))}
  .metodo .capitolo[data-comp] .metodo-testo{justify-content:center;align-items:center;text-align:center;padding:var(--menu-h) var(--gut) 0}
  /* il titolo prende tutta la larghezza: data-adatta misura sul contenitore, non sulla parola */
  .metodo .capitolo[data-comp] .metodo-titolo{align-self:stretch}
  /* Ascoltiamo: in basso, sotto il volto */
  .metodo .capitolo[data-comp="basso-sinistra"] .metodo-testo{justify-content:flex-end;padding-bottom:calc(64px + var(--barra) + env(safe-area-inset-bottom))}

  .chiusura-piede{flex-direction:column;align-items:flex-start}
  .entrata-parola{line-height:.98}
}

/* ---------- telefono orizzontale (schermo basso): tutto più compatto, niente sovrapposizioni ---------- */
@media (orientation:landscape) and (max-height:520px){
  .apertura-piede{bottom:18px}
  .apertura-piede .testo-l{font-size:16px}
  .apertura-piede .pulsante{margin-top:12px;min-height:46px}
  .chi-dentro{padding-block:calc(var(--menu-h) + 10px) 84px;gap:14px}
  .chi-riga,.chi-rete{font-size:15px}
  .chi-con{font-size:24px}
  .chi-parole{font-size:min(12vw,28vh)}
  .azioni .pulsante{min-height:46px}

  .servizi-testa{font-size:17px;max-width:none;top:calc(var(--menu-h) + 4px)}
  .servizi-indice,.servizi-ombra{display:none}
  .servizi .capitolo[data-comp] .servizio-testo{top:auto;bottom:72px;left:var(--gut);right:auto;max-width:min(62%,580px);display:block;text-align:left}
  .servizi .capitolo[data-comp] .velo-basso{background:linear-gradient(90deg,rgba(14,15,12,.84),rgba(14,15,12,.5) 55%,rgba(14,15,12,.14)),linear-gradient(180deg,rgba(14,15,12,.55),rgba(14,15,12,0) 30%)}
  .servizi .capitolo .velo-sinistra{display:none}
  /* Digital (il sito registrato): qui il velo copre tutto, le scritte del girato non si leggono mai accanto al titolo */
  .servizi .capitolo[data-schermo] .velo-basso{background:linear-gradient(90deg,rgba(14,15,12,.9),rgba(14,15,12,.8) 60%,rgba(14,15,12,.74))}
  .apertura-scorri{display:none}
  .servizio-titolo{font-size:min(15vh,62px)!important}
  .servizio-testo p{font-size:15px;margin-top:8px;max-width:50ch}
  .servizio-testo .servizio-pratica{font-size:13px;margin-top:6px}
  .servizio-esempio{margin-top:0}
  .servizi-link{bottom:58px}
  .servizi-link .pulsante:not(.pulsante--vuoto){display:none}

  .visore-titolo{font-size:min(18vh,72px)!important}
  .visore-piede{bottom:60px}
  .visore-riga{margin-bottom:10px}
  .visore-info{gap:6px}
  .visore-risolto{font-size:20px;max-width:30ch}
  .visore-parliamone{display:none}
  .traccia{height:44px}

  .metodo-titolo{font-size:min(19vh,78px)!important}
  .metodo-testo p{font-size:15px;margin-top:10px}
  .metodo .capitolo[data-comp] .metodo-testo{padding-top:var(--menu-h);padding-bottom:98px}
  .metodo .capitolo[data-comp="sinistra"] .metodo-testo{padding-top:calc(var(--menu-h) + 8px)}
  .metodo .capitolo[data-comp="destra"] .metodo-testo{padding-bottom:98px}
  /* Ascoltiamo: più piccolo, resta a sinistra del volto */
  .metodo .capitolo[data-comp="basso-sinistra"] .metodo-titolo{font-size:min(13vh,52px)!important}
  .metodo .capitolo[data-comp="basso-sinistra"] .metodo-testo p{max-width:26ch}
  .metodo-invito{bottom:64px}   /* sopra la fila della barra e del timecode */
  .metodo-invito .pulsante{display:none}
  .metodo-invito p{font-size:14px}

  .parole{padding-block:96px}
  .chiusura-titolo{font-size:min(19vh,84px)!important}
  .chiusura-dentro{padding-block:calc(var(--menu-h) + 12px) 40px}
}

/* ---------- movimento ridotto: tutto fermo e leggibile ---------- */
@media (prefers-reduced-motion:reduce){
  .apertura{height:auto}
  .apertura-pin{position:relative}
  .apertura-scorri i::after{animation:none}
  .visore{height:auto}
  .visore-pin{position:relative;height:100vh;height:100svh}
  .visore-v.entra{animation:none}
  .entrata{display:none}
}

/* ---------- telefono leggero: niente fusioni sopra il girato ---------- */
@media (max-width:760px),(pointer:coarse){
  .muro-foto{box-shadow:none}
  /* tablet: la luce lime passa nel livello dell'ombra (vedi .con-vignetta) */
  .con-vignetta .muro-ombra{background:
    radial-gradient(60% 46% at 50% 50%, rgba(10,11,8,.5), transparent 75%),
    radial-gradient(55% 45% at 0% 100%, rgba(10,11,8,.8), transparent 75%),
    linear-gradient(180deg, rgba(10,11,8,.6) 0%, transparent 24%, transparent 66%, rgba(10,11,8,.55) 100%),
    radial-gradient(90% 60% at 50% 105%, rgba(150,230,40,.26), rgba(132,209,21,.06) 45%, transparent 70%)}
  .muro-luce{mix-blend-mode:normal;background:radial-gradient(90% 60% at 50% 105%, rgba(150,230,40,.28), rgba(132,209,21,.06) 45%, transparent 70%)}
}

/* telefono e tablet: i link della chiusura e di «Le loro parole» sono toccabili (44 px) */
@media (max-width:1100px),(pointer:coarse){
  .chiusura-azioni{row-gap:0}
  .chiusura-azioni a:not(.pulsante),.parole-wa a{display:inline-flex;align-items:center;min-height:44px}
}
/* hanno lavorato con noi: nomi in fila, il punto lime fa da separatore */
.parole-clienti{margin-top:clamp(80px,10vw,150px);padding-top:clamp(28px,3vw,44px);border-top:1px solid rgba(244,246,239,.14)}
.parole-clienti-titolo{color:var(--bianco-60)}
.parole-clienti-lista{list-style:none;margin:clamp(18px,2vw,28px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;font-weight:300;font-size:clamp(22px,2.6vw,40px);line-height:1.2;letter-spacing:-.04em;color:var(--bianco-80)}
.parole-clienti-lista li{white-space:nowrap}
.parole-clienti-lista li:not(:last-child)::after{content:"·";color:var(--lime);margin:0 .45em}
.parole-clienti+.parole-invito{margin-top:clamp(56px,7vw,110px)}