/* =========================================================
   Pagina LAVORI · apertura montata, «Cosa possiamo fare per te»,
   filtri, muro dei lavori con servizio e risultato, invito
   che chiude la riga, chiusura come titoli di coda, lavoro aperto.
   Usa variabili e classi di mbp.css (che qui non si tocca).
   Fluidità: si animano solo transform e opacity; nessun filtro
   dal vivo, nessun backdrop-filter, fondi sfocati già pronti
   (assets/img/sfocate).
   ========================================================= */

/* --p (parallasse dell'apertura) cambia a ogni fotogramma mentre si scorre: non ereditata, ricalcola solo
   l'elemento che la usa e non tutto il titolo con le sue parole */
@property --p{syntax:'<number>';inherits:false;initial-value:.5}

.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
@keyframes lv-riga{from{opacity:0;transform:translate3d(0,40%,0)}to{opacity:1;transform:none}}
.cambia{animation:lv-riga .52s var(--curva-out) both}

/* ---------- 1. apertura montata ---------- */
.lv-apertura{position:relative;height:100vh;height:100svh;min-height:560px;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:var(--nero-2)}
.lv-montaggio{z-index:-3}
/* ogni taglio è un cambio di opacità in 0 ms: un taglio vero, mai una dissolvenza */
.lv-montaggio>.lv-taglio{opacity:0}
.lv-montaggio>.lv-taglio.on{opacity:1;animation:lv-respiro 1.04s var(--curva-out) both}
.lv-montaggio>.lv-eroe.on{animation:lv-respiro-eroe 7s var(--curva-out) both}
@keyframes lv-respiro{from{transform:scale(1.08)}to{transform:scale(1.01)}}
@keyframes lv-respiro-eroe{from{transform:scale(1.1)}to{transform:none}}
html:not(.js) .lv-montaggio>.lv-eroe{opacity:1}
.lv-apertura-velo{z-index:-1;background:
  linear-gradient(180deg,rgba(14,15,12,.55) 0%,rgba(14,15,12,0) 22%,rgba(14,15,12,.08) 48%,rgba(14,15,12,.9) 100%),
  radial-gradient(80% 60% at 0% 100%,rgba(14,15,12,.55),rgba(14,15,12,0) 70%)}
.lv-apertura-dentro{padding-block:calc(var(--menu-h) + 40px) clamp(58px,8vh,88px);
  transform:translate3d(0,calc((var(--p,.5) - .5) * -90px),0)}
.lv-etichetta{display:flex;align-items:center;gap:10px;margin-bottom:clamp(10px,1.8vh,20px);font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;
  text-shadow:0 1px 14px rgba(0,0,0,.6)}
@media (min-width:761px){.lv-etichetta{max-width:min(36ch,44vw)}}
.lv-etichetta i{display:none}
.lv-etichetta-testo{display:inline-block}
.lv-titolo{line-height:.96;margin-left:-.04em;text-shadow:0 .03em .22em rgba(0,0,0,.3)}
.lv-apertura-piede{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-top:clamp(18px,3.2vh,36px)}
.lv-apertura-piede .testo-l{max-width:40ch;text-shadow:0 1px 18px rgba(0,0,0,.55)}
.js .lv-apertura-piede{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1.04s var(--curva-out),transform 1.04s var(--curva-out)}
.lv-apertura.pronta .lv-apertura-piede{opacity:1;transform:none}
.lv-apertura .link-freccia .lv-giu{display:inline-block;transform:rotate(90deg)}
.lv-apertura .link-freccia:hover .lv-giu{transform:rotate(90deg) translate3d(5px,0,0)}

/* ---------- 2. cosa possiamo fare per te ---------- */
.lv-guida{position:relative;overflow:hidden;isolation:isolate;background:var(--nero-2);padding-block:clamp(110px,15vh,190px) clamp(92px,11vh,130px)}
/* fondo: il girato del servizio scelto, già sfocato; deriva piano, cambia con il filtro */
.lv-guida-fondo{position:absolute;inset:-6%;z-index:-1;animation:lv-deriva 18s var(--curva) infinite alternate}
.lv-guida-fondo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .9s var(--curva)}
.lv-guida-fondo img.su{opacity:1}
.lv-guida::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--nero) 0%,rgba(14,15,12,.2) 34%,rgba(14,15,12,.25) 66%,var(--nero) 100%)}
@keyframes lv-deriva{from{transform:translate3d(-2%,1%,0) scale(1.04)}to{transform:translate3d(2%,-1%,0) scale(1.1)}}
.lv-guida-dentro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:36px clamp(40px,6vw,120px);align-items:end}
.lv-guida-titolo{font-size:clamp(44px,6.8vw,132px);line-height:.98;max-width:9ch}
.lv-spiega{display:grid;justify-items:start;gap:14px;max-width:44ch;padding-bottom:.3em}
.lv-spiega-servizio{display:flex;align-items:center;gap:10px;font-weight:300;font-size:clamp(30px,3.2vw,52px);line-height:1;letter-spacing:-.05em}
.lv-spiega-servizio i{display:none}
.lv-spiega-servizio span,.lv-spiega-cosa,.lv-spiega-pratica{display:block}
.lv-spiega-cosa{color:var(--bianco)}
.lv-spiega-pratica{font-size:var(--testo);color:var(--bianco-80)}
.lv-spiega-pratica b{font-weight:600;color:var(--bianco)}
.lv-spiega-invito{margin-top:2px}

/* ---------- filtri ---------- */
/* restano in alto scorrendo; scendono sotto il menu quando il menu torna */
.filtri{position:sticky;top:0;z-index:60;transition:transform .8s var(--curva-out),opacity .42s var(--curva)}
/* quando il menu torna i filtri scendono sotto: solo transform, niente ricalcolo del layout */
.filtri.menu-su{transform:translate3d(0,calc(var(--menu-h) - 10px),0)}
/* finiti i lavori, i filtri escono: la chiusura e il piede restano puliti */
.filtri.fuori{transform:translate3d(0,calc(-100% - var(--menu-h)),0);opacity:0;pointer-events:none}
.filtri::before{content:"";position:absolute;inset:0 0 -26px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,15,12,.97) 0%,rgba(14,15,12,.95) calc(100% - 26px),rgba(14,15,12,0) 100%)}
.filtri-dentro{display:flex;gap:clamp(22px,2.6vw,40px);padding:16px var(--gut) 14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filtri-dentro::-webkit-scrollbar{display:none}
.filtri button{position:relative;flex:none;min-height:44px;padding:0 0 0 14px;font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:rgba(244,246,239,.72);transition:color .6s var(--curva-out)}
.filtri button::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--lime);
  transform:scale(0) rotate(-45deg);transition:transform .8s var(--curva-out)}
.filtri button:hover,.filtri button[aria-pressed="true"]{color:var(--bianco)}
.filtri button[aria-pressed="true"]::before{transform:none}

/* ---------- 3. muro dei lavori: girato bordo a bordo ---------- */
.lv-opere{position:relative;padding-top:6px;padding-bottom:clamp(90px,11vw,180px)}
.lv-opere>.fascio{opacity:.55}
.muro-opere{--col:4;display:grid;grid-template-columns:repeat(var(--col),minmax(0,1fr));gap:3px;grid-auto-flow:row dense;
  transition:opacity .42s var(--curva)}
.muro-opere.cambio{opacity:0}
/* pochi lavori: colonne grandi al centro, mai più alte dello schermo */
.muro-opere.pochi{grid-template-columns:repeat(var(--n),minmax(0,calc(78svh * 9 / 16)));justify-content:center}
/* colonne: 10 riquadri verticali + l'invito, che chiude l'ultima riga largo 2 a 2, 3, 4 e 6 colonne (a 5 sarebbe una riga intera vuota); ogni riquadro sta in uno schermo */
@media (min-width:1600px){.muro-opere{--col:6}}
@media (max-width:1099px){.muro-opere{--col:3}}
@media (max-width:760px){.muro-opere{--col:2;gap:2px}}
/* telefono in orizzontale: 6 colonne, il riquadro intero (didascalia compresa) sta tra i filtri e la barra in basso;
   il lavoro largo si abbassa all'altezza dello schermo */
@media (max-height:500px) and (orientation:landscape){.muro-opere{--col:6}.muro-opere .opera--largo{aspect-ratio:auto;height:calc(100svh - 120px)}.opera--largo video{object-position:50% 30%}}

.opera{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:#1c1d19;isolation:isolate}
.opera[hidden]{display:none}
.opera--span{grid-column:span var(--span,2);aspect-ratio:calc(var(--span,2) * 9) / 16}
.opera--largo{grid-column:1/-1;aspect-ratio:16/9}
/* il girato sale nel suo riquadro come una tendina, colonna dopo colonna (solo transform) */
.opera-film{position:absolute;inset:0;overflow:hidden}
.opera-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.6s var(--curva-out)}
.opera-film::after{content:"";position:absolute;inset:0;background:var(--nero);opacity:0;transition:opacity .8s var(--curva-out);pointer-events:none}
.js .opera[data-rivela]{opacity:1;transform:none;transition:none}
.js .opera[data-rivela] .opera-film{transform:translate3d(0,101%,0);transition:transform 1.04s var(--curva-out);transition-delay:calc(var(--ritardo,0) * 1ms)}
.js .opera.visto .opera-film{transform:none}
/* mentre è aperto a tutto schermo il riquadro resta vuoto */
.opera.in-scena .opera-film{opacity:0}

/* servizio dietro il lavoro e cosa ha risolto: sempre visibili, anche al telefono */
.opera::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,15,12,0) 0%,rgba(14,15,12,.5) 48%,rgba(14,15,12,.86) 100%)}
.opera--largo::after{height:44%}
.opera-info{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:7px;padding:clamp(12px,1.25vw,20px);
  text-shadow:0 1px 12px rgba(0,0,0,.6);transition:transform .9s var(--curva-out)}
.js .opera[data-rivela] .opera-info{opacity:0;transform:translate3d(0,14px,0);transition:opacity .8s var(--curva-out),transform .9s var(--curva-out);
  transition-delay:calc(var(--ritardo,0) * 1ms + 420ms)}
.js .opera.visto .opera-info{opacity:1;transform:none}
.opera-servizio{display:flex;align-items:center;gap:8px;font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.03em;color:var(--bianco)}
.opera-servizio::before{content:"";width:6px;height:6px;flex:none;background:var(--lime)}
.opera-risolto{font-size:clamp(14px,1.02vw,16px);line-height:1.3;letter-spacing:-.02em;color:var(--bianco);max-width:30ch}
.opera--largo .opera-risolto{font-size:var(--testo-l);max-width:34ch}

@media (hover:hover){
  .muro-opere:hover .opera-film::after{opacity:.5}
  .muro-opere .opera:hover .opera-film::after{opacity:0}
  .muro-opere .opera:hover video{transform:scale(1.07)}
  .muro-opere .opera.visto:hover .opera-info{transform:translate3d(0,-6px,0)}
}

/* l'invito chiude l'ultima riga: stessa altezza dei lavori, luce lime dal basso, niente card che galleggia */
.opera-invito{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;aspect-ratio:9/16;overflow:hidden;isolation:isolate;
  padding:clamp(16px,1.6vw,30px);container-type:inline-size;
  background:
    radial-gradient(110% 62% at 50% 112%,rgba(134,212,17,.34),rgba(134,212,17,.08) 46%,rgba(134,212,17,0) 72%),
    repeating-conic-gradient(from 180deg at 50% 118%,rgba(134,212,17,0) 0deg,rgba(134,212,17,.06) 1.8deg,rgba(134,212,17,0) 3.6deg,rgba(134,212,17,0) 6.5deg),
    linear-gradient(180deg,#1b1c19 0%,var(--nero-2) 100%)}
.opera-invito.opera--span{aspect-ratio:calc(var(--span,2) * 9) / 16}
.opera-invito-meta{display:flex;align-items:center;gap:9px;font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--bianco-80)}
.opera-invito-meta i{width:7px;height:7px;background:var(--lime);box-shadow:0 0 12px rgba(132,209,21,.8)}
.opera-invito-titolo{font-size:min(13cqi,96px);line-height:.98;max-width:12ch}
.opera-invito-azioni{display:grid;justify-items:start;gap:14px}
.opera-invito-wa{display:flex;flex-wrap:wrap;align-items:center;column-gap:.35em;font-size:14px;color:var(--bianco-60)}
.opera-invito-wa a{display:inline-flex;align-items:center;min-height:44px}
.opera-invito-wa a{color:var(--bianco);transition:color .5s var(--curva-out)}
.opera-invito-wa a:hover{color:var(--lime)}
.opera-invito .pulsante{min-height:50px;padding:0 18px 0 20px}

/* filtro senza lavori */
.opere-vuoto{padding-block:clamp(60px,10vw,140px)}
.opere-vuoto .testo-l{max-width:34ch;color:var(--bianco)}
.opere-vuoto .link-freccia{margin-top:28px}
.opere-vuoto:not([hidden]){animation:lv-riga 1.04s var(--curva-out) both}

/* ---------- 4. chiusura: titoli di coda sopra il dietro le quinte ---------- */
.lv-chiusura{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.lv-chiusura>.media-pieno{z-index:-3}
.lv-chiusura>.velo{z-index:-2}
.lv-chiusura>.fascio{z-index:-1}
.lv-chiusura .velo-pieno{background:rgba(14,15,12,.4)}
.lv-chiusura-velo{background:linear-gradient(180deg,rgba(14,15,12,.5) 0%,rgba(14,15,12,0) 30%,rgba(14,15,12,.2) 58%,rgba(14,15,12,.88) 100%)}
.lv-chiusura-dentro{padding-block:clamp(130px,18vh,210px) clamp(60px,10vh,110px)}
.lv-chiusura-titolo{line-height:.96;text-shadow:0 .03em .2em rgba(0,0,0,.3)}
.lv-chiusura-titolo .coda-2{text-align:right}
/* schermo largo: il girato del dietro le quinte ha il volto a destra; i titoli di coda restano sfalsati
   ma nella metà sinistra, così «al tuo» non finisce mai sul volto */
@media (min-width:761px) and (orientation:landscape){.lv-chiusura-titolo{max-width:50%}}
/* tablet in piedi: il girato verticale (come al telefono), alzato di un decimo; i titoli di coda un po' più stretti,
   così cominciano sotto il volto */
@media (min-width:761px) and (orientation:portrait){
  .lv-chiusura .solo-largo{display:none!important}
  .lv-chiusura .solo-tel{display:block!important;object-position:50% 0;top:-10%;height:110%}
  .lv-chiusura-titolo{max-width:72%}
}
/* telefono basso (fino a 760 di altezza): stesso principio, il volto resta sopra «Dai vita» */
@media (max-width:760px) and (max-height:760px){
  .lv-chiusura .solo-tel{object-position:50% 0;top:-6%;height:106%}
  .lv-chiusura-titolo{max-width:88%}
}
@media (max-width:760px) and (max-height:700px){.lv-chiusura .solo-tel{top:-12%;height:112%}}
.lv-chiusura-piede{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-top:clamp(28px,5vh,56px)}
.lv-chiusura .testo-l{max-width:30ch}
.lv-chiusura-nota{margin-top:10px;font-size:var(--testo);color:var(--bianco-80)}
.lv-chiusura-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;font-size:var(--testo)}
.lv-chiusura-azioni a:not(.pulsante){display:inline-flex;align-items:center;min-height:44px;color:var(--bianco-80);transition:color .6s var(--curva-out)}
.lv-chiusura-azioni a:not(.pulsante):hover{color:var(--lime)}

/* ---------- lavoro aperto a tutto schermo ---------- */
.lb{position:fixed;inset:0;z-index:130;visibility:hidden;pointer-events:none;overflow:hidden;isolation:isolate}
.lb.aperto{visibility:visible;pointer-events:auto}
.lb.chiude{visibility:visible}
/* dietro: lo stesso girato già sfocato (immagine pronta, nessun filtro dal vivo) e le coste del vetro */
.lb-fondo{position:absolute;inset:0;z-index:-1;background:var(--nero-2);opacity:0;transition:opacity .9s var(--curva-out)}
.lb-fondo img{position:absolute;inset:-8%;width:116%;height:116%;max-width:none;object-fit:cover;animation:lv-deriva 16s var(--curva) infinite alternate paused}
.lb.aperto .lb-fondo img{animation-play-state:running}
.lb-fondo::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,rgba(14,15,12,.1),rgba(14,15,12,.6))}
.lb.aperto .lb-fondo{opacity:1}
.lb-palco{position:absolute;inset:0;display:grid;place-items:center}
.lb-scena{position:relative;width:min(100vw,calc(100svh * 9 / 16));aspect-ratio:9/16;overflow:hidden;background:#1c1d19;transform-origin:0 0;will-change:transform}
.lb.largo .lb-scena{width:min(100vw,calc(100svh * 16 / 9),1600px);aspect-ratio:16/9}
.lb-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .42s var(--curva)}
.lb-video.cambio{opacity:0}
.lb-scena-velo{display:none}

.lb-chiudi{position:absolute;top:max(14px,env(safe-area-inset-top));right:var(--gut);z-index:2;display:inline-flex;align-items:center;gap:12px;height:44px;font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;
  color:var(--bianco);text-shadow:0 1px 16px rgba(0,0,0,.5);opacity:0;transition:opacity .8s var(--curva-out) .25s,color .6s var(--curva-out)}
.lb-chiudi:hover{color:var(--lime)}
.lb-x{position:relative;width:18px;height:18px}
.lb-x i{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor;transform:rotate(45deg)}
.lb-x i+i{transform:rotate(-45deg)}

.lb-barra{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;
  padding:0 var(--gut) calc(clamp(18px,3vh,32px) + env(safe-area-inset-bottom));pointer-events:none;
  opacity:0;transform:translate3d(0,16px,0);transition:opacity .8s var(--curva-out) .3s,transform 1s var(--curva-out) .3s}
.lb-info{display:grid;gap:8px;max-width:min(34ch,calc((100vw - min(100vw,100svh * 9 / 16)) / 2 - var(--gut) - 24px));text-shadow:0 1px 14px rgba(0,0,0,.6)}
.lb-servizio{display:flex;align-items:center;gap:9px;font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em}
.lb-servizio i{width:7px;height:7px;flex:none;background:var(--lime)}
.lb-risolto{font-size:var(--testo-l);line-height:1.28;letter-spacing:-.02em}
.lb.largo .lb-info{max-width:34ch}
.lb-azioni{display:flex;align-items:center;gap:10px;pointer-events:auto}
.lb-frecce{display:flex;gap:3px}
.lb-frecce button{width:52px;height:52px;display:grid;place-items:center;font-family:var(--f-etichetta);font-weight:800;font-size:20px;color:var(--bianco);background:rgba(14,15,12,.6);
  box-shadow:inset 0 0 0 1px rgba(244,246,239,.3);transition:background .6s var(--curva-out),color .6s var(--curva-out)}
.lb-frecce button:hover{background:var(--lime);color:#10120c}
.lb-invito{min-height:52px}
.lb.aperto .lb-chiudi{opacity:1}
.lb.aperto .lb-barra{opacity:1;transform:none}
body.lb-aperto{overflow:hidden}
body.lb-aperto .barra{opacity:0;pointer-events:none;transition:none}
/* computer stretto o lavoro largo: l'informazione sta sopra il girato, in basso */
@media (max-width:1099px){
  .lb-scena-velo{display:block;position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;background:linear-gradient(180deg,rgba(14,15,12,0),rgba(14,15,12,.85))}
  .lb-info{max-width:34ch}
}

/* ---------- telefono ---------- */
@media (max-width:760px){
  .lv-apertura{min-height:520px}
  .lv-apertura-dentro{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .lv-apertura-piede{gap:18px}
  .lv-apertura-piede .testo-l{font-size:17px}
  .lv-etichetta{font-size:12px}
  .azioni{gap:12px 22px}
  .azioni .pulsante{min-height:48px}

  .lv-guida{padding-block:clamp(84px,12vh,120px) calc(var(--barra,62px) + 34px)}
  /* al telefono il fondo sfocato resta fermo: niente livello grande ricomposto a ogni fotogramma */
  .lv-guida-fondo{animation:none;inset:0}
  .lv-guida-dentro{grid-template-columns:minmax(0,1fr);gap:24px}
  .lv-guida-titolo{font-size:clamp(40px,13.4vw,64px);max-width:none}
  .lv-spiega .testo-l{font-size:18px}
  .lv-spiega-pratica{font-size:15px}

  .filtri-dentro{flex-wrap:wrap;overflow:visible;gap:0 22px;padding:10px var(--gut) 8px}
  .filtri button{min-height:44px;font-size:12px}

  .opera-info{gap:5px;padding:10px 10px 11px}
  .opera-servizio{font-size:10px;gap:7px;letter-spacing:.04em}
  .opera-servizio::before{width:5px;height:5px}
  .opera-risolto{font-size:13px;line-height:1.25}
  .opera--largo .opera-risolto{font-size:15px}
  .opera-invito{padding:14px}
  .opera-invito .pulsante{min-height:46px}

  .lv-chiusura-dentro{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
  .lv-chiusura-piede{flex-direction:column;align-items:flex-start;gap:20px;margin-top:clamp(18px,3vh,40px)}
  .lv-chiusura-azioni{gap:0 22px;font-size:15px}

  /* lavoro aperto: il girato tra la riga in alto e la barra in basso, servizio e invito sopra il bordo */
  .lb-palco{place-items:start center;padding-top:56px}
  .lb-scena{width:min(100vw,calc((100svh - 56px - 78px) * 9 / 16))}
  .lb.largo .lb-palco{place-items:center;padding-top:0}
  .lb.largo .lb-scena{width:100vw}
  .lb-scena-velo{display:block;height:34%}
  .lb-chiudi{top:max(6px,env(safe-area-inset-top))}
  .lb-barra{flex-direction:column;align-items:stretch;gap:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .lb-info{max-width:none;gap:6px}
  .lb-servizio{font-size:12px}
  .lb-risolto{font-size:16px}
  .lb-azioni{justify-content:space-between}
  .lb-invito{min-height:46px;padding:0 14px 0 16px;gap:10px}
  .lb-frecce button{width:46px;height:46px}
}

/* ---------- telefono in orizzontale: tutto in uno schermo basso ---------- */
@media (max-height:500px) and (orientation:landscape){
  .lv-apertura{min-height:0}
  .lv-apertura-dentro{padding-block:calc(var(--menu-h) + 6px) calc(58px + env(safe-area-inset-bottom))}
  .lv-etichetta{margin-bottom:6px;max-width:min(30ch,30vw)}
  .lv-apertura-piede{margin-top:10px;gap:10px 32px;flex-wrap:nowrap}
  .lv-apertura-piede .testo-l{font-size:15px;max-width:44ch}
  .lv-apertura .azioni{flex-wrap:nowrap;flex:none}
  .lv-guida{padding-block:calc(var(--menu-h) + 20px) 96px}
  .lv-guida-fondo{animation:none;inset:0}
  .lv-chiusura-dentro{padding-block:calc(var(--menu-h) + 24px) 40px}
  .lv-chiusura-piede{margin-top:20px}
}

/* ---------- movimento ridotto: tutto già al suo posto ---------- */
@media (prefers-reduced-motion:reduce){
  .lv-apertura-dentro{transform:none}
  .lv-montaggio>.lv-taglio.on,.lv-guida-fondo,.lb-fondo img{animation:none}
  .js .opera[data-rivela] .opera-film,.js .opera[data-rivela] .opera-info,.js .lv-apertura-piede{transform:none;opacity:1;transition:none}
  .muro-opere,.opera-film video,.filtri,.lb-fondo,.lb-chiudi,.lb-barra,.lb-video,.lv-guida-fondo img{transition:none}
  .cambia,.opere-vuoto:not([hidden]){animation:none}
}

/* telefono e tablet (html.leggero da mbp.js): il fondo della guida resta fermo */
html.leggero .lv-guida-fondo{animation:none}
.lb-caso[hidden]{display:none}
.lb-caso{white-space:nowrap}
@media (max-width:760px){.lb-azioni{flex-wrap:wrap}.lb-caso{flex:1 1 100%;justify-content:center;order:-1}}

/* sul computer (e telefono in orizzontale) la barra contatto prende il posto del menu in alto a destra:
   i filtri, che stanno nella stessa fascia, le lasciano lo spazio (scorrono di lato se non entrano) */
@media (min-width:761px){
  /* la fila si ferma prima della barra (non le passa sotto): quello che non entra scorre di lato, con una sfumatura sul bordo */
  html.con-barra .filtri-dentro{max-width:calc(100% - 262px);-webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
}
/* card stretta (telefono in orizzontale): il pulsante resta dentro */
@media (max-height:500px) and (orientation:landscape){.opera-invito-azioni{justify-items:stretch;min-width:0}.opera-invito-azioni .pulsante{max-width:100%;min-width:0;justify-content:space-between;padding-inline:clamp(10px,4cqi,20px);gap:8px}}