/* ==========================================================================
   Mockup — 208:4433 · 1512 x 880

   NUOVA dal mockup del 31 ago 2026. Sezione di sola immagine: nessun testo,
   nessun padding, nessun container. Due livelli sovrapposti su fondo
   #f5f5f5 — la filigrana del logo dietro, la fotografia dei dispositivi
   davanti (PNG trasparente, per questo la filigrana si vede).
   ========================================================================== */

.mockup {
  position: relative;
  width: var(--page-width);
  height: 880px;
  background: var(--color-neutral-100);   /* #f5f5f5 */
  overflow: hidden;
}

/* --- La filigrana --------------------------------------------------------
   Le quattro misure sono in PERCENTUALE come in Figma, non in pixel: cosi
   quando la sezione si accorcia sotto i 1512 il logo resta nella stessa
   posizione relativa invece di scivolare fuori.
     left 16.28%  top 18.18%  width 67.45%  height 28.25%
   Il rapporto 67.45% x 1512 / (28.25% x 880) = 1020 / 248.6 = 4.1, cioe
   esattamente le proporzioni del logo: non e deformato.
-------------------------------------------------------------------------- */
.mockup__filigrana {
  position: absolute;
  left: 16.28%;
  top: 18.18%;
  width: 67.45%;
  height: 28.25%;
  opacity: .2;
  pointer-events: none;
}

.mockup__logo,
.mockup__filigrana img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* --- La fotografia dei dispositivi ---------------------------------------
   `cover` e non `contain`: in Figma il fill e a copertura piena e il taglio
   ai lati e voluto — i dispositivi restano centrati.
-------------------------------------------------------------------------- */
.mockup__media {
  position: absolute;
  inset: 0;
}

.mockup__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}