/* =========================================================
   REALIZZAZIONI — artboard Figma 32:140 (1512 × 4009)
   Galleria di caroselli disposti a due colonne sfalsate: le
   posizioni sono quelle dell'artboard, quindi assolute.
   ========================================================= */
.sec-rz{ background:var(--nav-bg); display:flow-root; }  /* 19/10: il margine del contenuto resta dentro, niente fascia chiara sotto la testata */
.sec-rz--fondo{ background:var(--grigio-banner); }

.rz-titolo{
  /* A tavola stava a y121, attaccato alla navbar. Su richiesta del cliente
     (24 settembre 2026) scende di 60: lo spazio sopra e sotto e' uguale e la
     galleria resta dov'era. Il centro segue quello della galleria (x742). */
  position:relative; left:calc(-14 * var(--px));
  margin:0; padding-top:calc(73 * var(--px));
  text-align:center;
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-display); line-height:var(--lh-display);
  color:var(--red-card);
}

/* la griglia parte a y329 ed e' alta 2293 */
.rz-galleria{
  position:relative;
  height:calc(2293 * var(--px));
  margin:calc(78 * var(--px)) calc(-1 * var(--gutter)) 0;
}
.rz-item{ position:absolute; }
.rz-item .carousel{
  width:100%; height:100%; aspect-ratio:auto; margin:0;
}
.rz-item .car-track{ height:100%; border-radius:calc(10 * var(--px)); }
.rz-item .car-slide{ height:100%; }
/* mappa immagini pagina 5: ogni foto e' disegnata piu' larga della sua
   cella e spostata, quindi il ritaglio non e' centrato */
.rz-item .car-slide{ position:relative; overflow:hidden; border-radius:calc(10 * var(--px)); }
.rz-item .car-slide img{ position:absolute; max-width:none; border-radius:0; }
.rz-item[data-i="0"] .car-slide img{ left:calc(1 * var(--px)); top:calc(-0.4 * var(--px)); width:calc(661 * var(--px)); height:calc(440.7 * var(--px)); }
.rz-item[data-i="1"] .car-slide img{ left:calc(-7 * var(--px)); top:calc(0.8 * var(--px)); width:calc(659 * var(--px)); height:calc(439.4 * var(--px)); }
.rz-item[data-i="2"] .car-slide img{ left:calc(0 * var(--px)); top:calc(-33.4 * var(--px)); width:calc(594 * var(--px)); height:calc(792.1 * var(--px)); }
.rz-item[data-i="3"] .car-slide img{ left:calc(-31.5 * var(--px)); top:calc(0 * var(--px)); width:calc(659.9 * var(--px)); height:calc(440 * var(--px)); }
.rz-item[data-i="4"] .car-slide img{ left:calc(-32 * var(--px)); top:calc(0 * var(--px)); width:calc(660 * var(--px)); height:calc(440.1 * var(--px)); }
.rz-item[data-i="5"] .car-slide img{ left:calc(-47.7 * var(--px)); top:calc(0 * var(--px)); width:calc(660.2 * var(--px)); height:calc(440 * var(--px)); }
.rz-item[data-i="6"] .car-slide img{ left:calc(-333.4 * var(--px)); top:calc(-7.1 * var(--px)); width:calc(1120.3 * var(--px)); height:calc(748.8 * var(--px)); }
.rz-item[data-i="7"] .car-slide img{ left:calc(-1.5 * var(--px)); top:calc(-1 * var(--px)); width:calc(598.5 * var(--px)); height:calc(449 * var(--px)); }
.rz-item .car-nav{ width:calc(40 * var(--px)); }
.rz-item .car-prev{ left:calc(14 * var(--px)); }
.rz-item .car-next{ right:calc(14 * var(--px)); }
.rz-item .car-dots{ bottom:calc(14 * var(--px)); gap:calc(9 * var(--px)); }
.rz-item .car-dots button{ background:rgba(255,255,255,.55); }
.rz-item .car-dots button[aria-current="true"]{ background:var(--white); }
/* Nei componenti Figma le foto possono superare il bordo del frame.
   Il viewport delle foto e i comandi mantengono quindi quote distinte. */
@media (min-width:901px){
  .card-lavori .car-track{ position:relative; left:calc(-7 * var(--px)); top:calc(1 * var(--px)); width:calc(608.7734375 * var(--px)); height:calc(439 * var(--px)); }
  .rz-item[data-i="1"] .car-track{ position:relative; left:calc(-7 * var(--px)); top:calc(1 * var(--px)); width:calc(608.7734375 * var(--px)); height:calc(439 * var(--px)); }
  .rz-item[data-i="1"] .car-slide img{ left:0; top:calc(-.2 * var(--px)); }
  .rz-item[data-i="2"] .car-track{ width:calc(594 * var(--px)); height:calc(685 * var(--px)); }
  .rz-item[data-i="3"] .car-track{ width:calc(597 * var(--px)); }
  /* 28/9/2026: la cornice di Figma era alta 448 e scendeva 8 px sotto la
     foto accanto. Ora il riquadro coincide con la cella (596 x 440) e il
     fondo e' allineato a quello della colonna destra. */
}

/* banner finale a tutta larghezza (469:1629) */
.rz-banner{
  position:relative;
  width:calc(1211 * var(--px)); max-width:100%;
  aspect-ratio:1211 / 807;
  margin:calc(84 * var(--px)) auto 0 calc(17 * var(--px));   /* 469:1629 a x131 */
}
.rz-banner .carousel{ width:100%; height:100%; aspect-ratio:auto; margin:0; }
.rz-banner .car-track,
.rz-banner .car-slide{ height:100%; }
.rz-banner .car-nav{ width:calc(48 * var(--px)); }
.rz-banner .car-prev{ left:calc(18 * var(--px)); }
.rz-banner .car-next{ right:calc(18 * var(--px)); }
.rz-banner .car-dots{ bottom:calc(18 * var(--px)); }
.rz-banner .car-dots button{ background:rgba(255,255,255,.55); }
.rz-banner .car-dots button[aria-current="true"]{ background:var(--white); }
.sec-rz--fondo{ display:flow-root; }
.rz-banner .is-slideshow .car-track{ display:block; position:relative; overflow:hidden; border-radius:calc(20 * var(--px)); touch-action:pan-y pinch-zoom; }
/* 28/9/2026: dissolvenza al posto del cambio secco. La nuova foto sale sopra
   la vecchia, che resta piena finché non è coperta: niente fondo che traspare. */
.rz-banner .is-slideshow .car-slide{
  position:absolute; inset:0; width:100%; opacity:0; visibility:hidden;
  transition:opacity 0s linear .9s, visibility 0s linear .9s;
}
.rz-banner .is-slideshow .car-slide.is-current{
  z-index:1; opacity:1; visibility:visible;
  transition:opacity .9s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion:reduce){
  .rz-banner .is-slideshow .car-slide{ transition:none; }
}
.rz-banner .is-slideshow .car-slide img{ border-radius:0; }
/* I pallini stanno al centro della foto (a tavola erano spostati a sinistra). */
.rz-banner .is-slideshow .car-dots{ left:50%; translate:-50% 0; bottom:2.2305%; transform:none; gap:calc(7 * var(--px)); }
.rz-banner .is-slideshow .car-dots span{ width:calc(12 * var(--px)); height:calc(12 * var(--px)); border-radius:50%; background:#d9d9d9; }
.rz-banner .is-slideshow .car-dots span.is-current{ background:#3d3d3d; }
.rz-banner .is-slideshow .car-dots span:first-child.is-current{ background:#9f9c9c; }
.rz-banner .is-slideshow .car-nav{ opacity:0; pointer-events:none; }
.rz-banner .is-slideshow:hover .car-nav,
.rz-banner .is-slideshow:focus-within .car-nav{ opacity:1; pointer-events:auto; }
@media (hover:none), (prefers-reduced-motion:reduce){
  .rz-banner .is-slideshow .car-nav{ opacity:1; pointer-events:auto; }
}