/* =========================================================
   LAVORAZIONI — artboard Figma "VERNICIATURA" 32:87 (1512 × 3325)
   Fondo unico #D9D9D9 sotto un hero fotografico a tutta larghezza.
   ========================================================= */
.sec-lv{ background:var(--nav-bg); }

/* --- hero fotografico (44:545) ----------------------------- */
.lv-hero{
  position:relative;
  height:clamp(420px, calc(634 * var(--px)), 634px);   /* 108 → 742 */
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  text-align:center;
}
.lv-hero > img{
  position:absolute; left:calc(-75 * var(--px)); top:calc(-312 * var(--px));
  /* Mantiene il ritaglio della tavola e copre anche gli schermi più larghi. */
  width:calc(100% + 168 * var(--px)); height:calc(100% + 312 * var(--px));
  max-width:none; object-fit:cover;
}
/* a progetto la foto e' velata di bianco all'8%: senza, il rosso risulta
   piu' saturo di quanto renda la tavola */
.lv-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:#fff; opacity:.08; pointer-events:none;
}
.lv-hero-testo{
  position:relative; z-index:2; padding-inline:var(--gutter);
  left:calc(8 * var(--px));              /* a progetto il blocco non e' sull'asse pagina */
  margin-bottom:calc(128 * var(--px));   /* 32:88 non e'centrato: sta 64 piu' in alto */
}
/* 32:88 — Allerta Stencil 88px, interlinea 70, bianco centrato */
.lv-hero h1{
  margin:0;
  color:var(--white);
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-display);
  line-height:var(--lh-display);
  text-shadow:0 calc(2 * var(--px)) calc(10 * var(--px)) rgba(0,0,0,.35);
}
.lv-hero h1 span{ display:block; }
/* 32:91 — anche il sottotitolo e' Allerta Stencil, 40px */
.lv-hero p{
  margin:calc(22 * var(--px)) 0 0;
  color:var(--white);
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(18px, calc(40 * var(--px)), 40px);
  line-height:var(--lh-display);
  text-shadow:0 calc(2 * var(--px)) calc(10 * var(--px)) rgba(0,0,0,.35);
}
/* la freccia: cerchio 71,7 centrato nella larghezza dell'hero,
   anello bianco attorno al disco #D9D9D9 */
.lv-hero .scroll-cue{
  top:auto; bottom:calc(37.15 * var(--px));
  left:50%;
  width:calc(71.7 * var(--px)); aspect-ratio:1;
  border:calc(5.4 * var(--px)) solid #FFF; border-radius:50%;
  display:grid; place-items:center;
}
.lv-hero .scroll-cue svg{ width:100%; height:100%; }
.lv-hero .scroll-cue .cue-disco{ fill:rgba(217,217,217,.5); }
.lv-hero .scroll-cue .cue-punta{ fill:#FFF; transform:scale(1.1); transform-origin:center; }

/* freccia "indietro" nella navbar (44:636) */
.header-indietro{
  width:clamp(34px, calc(56 * var(--px)), 56px);
  flex:0 0 auto; margin-right:calc(22 * var(--px));
  transition:transform .18s var(--ease-soft);
}
.header-indietro img{ width:100%; height:auto; }
.header-indietro:hover{ transform:translateX(-4px); }
.site-header--inner .header-inner.header-inner--indietro{ justify-content:flex-start; }
.header-inner--indietro .nav{ margin-left:auto; }

/* --- titoletti rossi di sezione (32:122 / 32:124 / 128:33) -- */
/* 32:122 / 32:124 / 128:33 — Albert Sans SemiBold 34px */
.lv-titolo{
  margin:calc(15 * var(--px)) 0 0; text-align:center;
  color:var(--red-btn); font-weight:600;
  font-size:clamp(18px, calc(34 * var(--px)), 34px);
  /* a tavola i tre titoletti non stanno sull'asse della colonna */
  position:relative; left:calc(-40 * var(--px));
}
.lv-colonne > div:nth-child(1) .lv-titolo{ left:calc(27 * var(--px)); }
.lv-colonne > div:nth-child(2) .lv-titolo{ left:calc(-16 * var(--px)); }
.lv-titolo--scuro{ color:var(--red-card); }
.lv-colonne .lv-titolo{ margin-top:0; }

/* --- elenco vantaggi con spunta verde ---------------------- */
.lv-vantaggi{
  list-style:none; padding:0;
  width:calc(779 * var(--px)); max-width:100%;
  /* 32:120 — icone a x435, testo a x471: non e' centrato */
  margin:calc(60 * var(--px)) 0 0 calc(321 * var(--px));
  display:grid; gap:calc(2 * var(--px));
}
.lv-vantaggi li{
  /* icone 36x38 a x435, testo a x471 (nodi 130:54 e seguenti) */
  display:grid; grid-template-columns:calc(36 * var(--px)) 1fr;
  gap:0; align-items:center;
  color:var(--ink);
  font-size:clamp(13px, calc(24 * var(--px)), 24px); line-height:1.5;
}
.lv-vantaggi img{ height:calc(38 * var(--px)); width:auto; }   /* riquadro 36x38 */

/* --- striscia di tre foto (254:283 / 254:291 / 254:296) ----- */
/* le foto hanno coordinate assolute sull'artboard, quindi la striscia
   deve partire dal bordo pagina e non dal wrap con padding */
.lv-striscia{
  position:relative;
  height:calc(505 * var(--px));   /* 455 + aria in fondo */
  margin:calc(52 * var(--px)) calc(-1 * var(--gutter)) 0;   /* la foto centrale a y1178 */
  overflow:hidden;
}
.lv-striscia img{
  position:absolute; object-fit:cover; border-radius:0;
}
.lv-striscia .sx{  left:calc(-145 * var(--px)); top:calc(63 * var(--px));
                   width:calc(526 * var(--px)); height:calc(350 * var(--px)); }
.lv-striscia .mid{ left:calc(370 * var(--px)); top:calc(1 * var(--px));
                   width:calc(682 * var(--px)); height:calc(455 * var(--px));
                   border-radius:calc(50 * var(--px));
                   z-index:2; }
/* a tavola la foto di destra e' tagliata sopra e sotto (visibile 1240-1589) */
.lv-striscia .dx, .lv-striscia .fuori{  left:calc(1018.5 * var(--px)); top:calc(36.9 * var(--px));
                   width:calc(588 * var(--px)); height:calc(391.2 * var(--px));
                   clip-path:inset(calc(28.1 * var(--px)) 0 calc(14.1 * var(--px)) 0); }
/* Le tre foto ruotano fra le tre posizioni come la storia: main.js sposta le
   classi sx / mid / dx e la foto che passa da un lato all'altro scorre dietro. */
.lv-striscia .sx, .lv-striscia .dx{ z-index:1; }
.lv-striscia .passa{ z-index:0; }
/* Dalla quarta foto in poi: aspettano invisibili dietro quella di destra. */
@media (min-width:901px){
  .lv-striscia .fuori{ z-index:0; opacity:0; pointer-events:none; }
}
.lv-striscia.is-ready{ cursor:grab; touch-action:pan-y pinch-zoom; user-select:none; }
.lv-striscia.is-dragging{ cursor:grabbing; }
.lv-striscia:focus-visible{ outline:2px solid var(--blu); outline-offset:-4px; }
.lv-striscia.is-animated img{
  transition-property:left, top, width, height, border-radius, clip-path, opacity;
  transition-duration:300ms;
  transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);
}
@media (prefers-reduced-motion:reduce){
  .lv-striscia.is-animated img{ transition:none; }
}

/* --- foto a schermo intero (main.js) ----------------------- */
.si-apre{ cursor:zoom-in; }
/* dove la fascia si trascina resta la manina */
.timeline.is-ready .si-apre, .lv-striscia.is-ready .si-apre{ cursor:inherit; }
html.lightbox-aperta{ overflow:hidden; }
.lightbox{
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:56px 72px; border:0;
  background:rgba(18,18,18,.94); color:#fff;
  overscroll-behavior:contain;
}
.lightbox[open]{ display:grid; place-items:center; animation:sial-lightbox .2s ease; }
.lightbox::backdrop{ background:transparent; }
@keyframes sial-lightbox{ from{ opacity:0; } }
.lightbox-foto{
  margin:0; width:100%; height:100%; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  touch-action:pinch-zoom;
}
.lightbox-foto img{
  width:auto; height:auto; max-width:100%; max-height:100%; min-height:0;
  object-fit:contain; border-radius:0; user-select:none; -webkit-user-drag:none;
}
.lightbox-foto figcaption{ max-width:60ch; font-size:17px; line-height:1.4; text-align:center; }
.lightbox button{
  position:absolute; width:48px; height:48px; padding:0;
  border:0; border-radius:50%; background:none; color:#fff; cursor:pointer;
}
.lightbox button svg{ width:100%; height:100%; display:block; }
.lightbox button:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
/* Il cerchio intorno alla X e' fisso: prima era solo l'anello di focus e
   spariva cliccando altrove. */
.lightbox .lightbox-chiudi{ top:12px; right:12px; border:2px solid currentColor; }
/* niente secondo anello col focus: il cerchio resta uno, si riempie appena */
.lightbox .lightbox-chiudi:focus-visible{ outline:0; background:rgba(255,255,255,.2); }
.lightbox-chiudi span::before, .lightbox-chiudi span::after{
  content:""; position:absolute; left:50%; top:50%; width:22px; height:2px;
  background:currentColor; translate:-50% -50%; rotate:45deg;
}
.lightbox-chiudi span::after{ rotate:-45deg; }
.lightbox-prev, .lightbox-next{ top:50%; translate:0 -50%; display:none; }
.lightbox.is-gruppo .lightbox-prev, .lightbox.is-gruppo .lightbox-next{ display:block; }
.lightbox-prev{ left:12px; }
.lightbox-next{ right:12px; }
.lightbox-next svg{ rotate:180deg; }
.lightbox-conta{ position:absolute; left:50%; bottom:14px; translate:-50% 0; margin:0; font-size:15px; }