/* SERVIZI — seguito di 09-servizi-2.css */
/* le due schede hanno margini interni diversi: 81/78 la prima, 78/60 la seconda.
   A tavola la seconda stava 11 px piu' in alto: ora partono alla stessa altezza. */
/* 30/9/2026, richiesta del cliente: le due foto sono larghe quanto il testo
   della scheda, come sul telefono. Le schede crescono insieme (almeno 723 di
   tavola) e le foto chiudono in fondo, alla stessa altezza. */
@media (min-width:901px){
  .sv-coppia{ align-items:stretch; }
  .sv-coppia .sv-blocco{ display:flex; flex-direction:column; gap:calc(36 * var(--px)); height:auto; min-height:calc(723 * var(--px)); }
  .sv-coppia > *:nth-child(1){
    padding:calc(50.4 * var(--px)) calc(77.7 * var(--px)) calc(50.4 * var(--px)) calc(81.3 * var(--px));
  }
  .sv-coppia > *:nth-child(2){
    padding:calc(50.4 * var(--px)) calc(60.65 * var(--px)) calc(50.4 * var(--px)) calc(77.35 * var(--px));
  }
  /* altezza fissa: le schede sono larghe 649 e 676, cosi' le foto hanno la
     stessa altezza e partono alla stessa quota */
  .sv-coppia > * > img{ position:static; flex-shrink:0; width:100%; height:calc(324 * var(--px)); margin:auto 0 0; }
}
/* 30/9/2026: 48 sotto le schede (l'ombra non tocca il pulsante) e titolo
   Imballaggio 75 sotto, come gli altri titoli. Sul telefono: 16-mobile-2.css. */
.sv-centro{ text-align:center; margin:calc(48 * var(--px)) 0 calc(11 * var(--px)); }
/* qui il bottone e' 368x100 e usa il rosso delle carte, non quello dei bottoni */
.sv-centro .btn{ width:calc(368 * var(--px)); min-height:calc(100 * var(--px)); }
.sv-centro .btn-red{ background:var(--red-card); }

/* --- imballaggio: foto a sinistra, scheda a destra ---------- */
/* 393:734: la finestra della foto e' 596x480 a (56,4348); dentro, l'immagine
   e' disegnata 776,5x518 spostata di -178,5/-38. La scheda va da 812 a 1486. */
.sv-imballaggio{
  display:grid; grid-template-columns:calc(596 * var(--px)) calc(676 * var(--px));
  gap:calc(157 * var(--px));
  justify-content:start; align-items:start;
  margin-left:calc(14 * var(--px));
  margin-top:calc(35 * var(--px));    /* 48 px sotto l'icona (29/9/2026) */
}
.sv-imb-foto{
  display:block; position:relative; overflow:hidden;
  margin-top:calc(86 * var(--px));    /* la finestra scende a y4346 */
  height:calc(480 * var(--px)); border-radius:calc(20 * var(--px));
}
.sv-imb-foto img{
  position:absolute; left:calc(-180.5 * var(--px)); top:calc(-40 * var(--px));
  width:calc(776.5 * var(--px)); height:calc(518 * var(--px));
  max-width:none; object-fit:cover;
}
.sv-imballaggio .sv-blocco{
  padding:calc(91.4 * var(--px)) calc(85.2 * var(--px)) 0 calc(75.8 * var(--px));
  height:calc(674 * var(--px));
}

/* Imballaggio: quattro ritagli del componente Figma 393:734. */
.sv-imb-foto{ min-width:0; }
.sv-imb-foto .car-track{ position:relative; border-radius:inherit; }
.sv-imb-foto .car-slide{ position:relative; overflow:hidden; min-width:0; }
.sv-imb-foto .car-slide img{
  position:absolute; max-width:none; border-radius:0; margin:0;
  left:-30.28%; top:-7.92%; width:130.28%; height:107.92%;
}
.sv-imb-foto .car-slide:nth-child(2) img{ left:-31.94%; top:-25.68%; width:152.25%; height:125.68%; }
.sv-imb-foto .car-slide:nth-child(3) img{ left:0; top:-.01%; width:120.81%; height:100.01%; }
.sv-imb-foto .car-slide:nth-child(4) img{ left:-17.45%; top:-5.25%; width:127.18%; height:105.29%; }
.sv-imb-foto .car-dots{ bottom:2%; gap:0; }
.sv-imb-foto .car-dots button{
  width:24px; height:24px; background:none; display:grid; place-items:center;
}
.sv-imb-foto .car-dots button::before{
  content:""; width:clamp(6px, calc(12 * var(--px)), 12px); aspect-ratio:1;
  border-radius:50%; background:#d9d9d9;
}
.sv-imb-foto .car-dots button[aria-current="true"]::before{ background:#fff; }

/* --- ombre (30/9/2026) -------------------------------------- */
/* Richiesta del cliente: schede e foto hanno l'ombra del pannello di
   Pre-trattamento (Consulenza e Sopralluoghi), 17/6/-6 a tavola. Sotto
   i 900 px resta almeno di 8 px, altrimenti sul telefono non si vede. */
.sec-sv{
  --ombra-sv:0 max(8px, calc(17 * var(--px))) max(5px, calc(6 * var(--px)))
    min(-4px, calc(-6 * var(--px))) rgba(0,0,0,.26);
}
.sv-pannello, .sv-scheda, .sv-blocco, .sv-imb-foto{ box-shadow:var(--ombra-sv); }
/* La prima foto di Sabbiatura e' ritagliata con clip-path, che taglierebbe
   anche la sua ombra: l'ombra sta sulla colonna e segue le tre foto. */
.sv-foto-colonna{
  filter:drop-shadow(0 max(5px, calc(11 * var(--px))) max(3px, calc(4 * var(--px))) rgba(0,0,0,.24));
}
/* Sul telefono Verniciatura e Imballaggio diventano una scheda sola: l'ombra
   va sulla scheda esterna, non sui blocchi trasparenti ne' sulla foto dentro. */
@media (max-width:900px){
  .sv-coppia, .sv-imballaggio{ box-shadow:var(--ombra-sv); }
  .sv-coppia .sv-blocco, .sv-imballaggio .sv-blocco,
  .sv-imballaggio .sv-imb-foto{ box-shadow:none; }
}