/* SERVIZI — seguito di 08-servizi.css */

/* --- pre-trattamento: pannello con carosello (215:350) ------ */
/* 153:202 — pannello 1220x575 che comincia a x175 */
.sv-pannello{
  position:relative;
  width:calc(1226 * var(--px)); max-width:100%;
  height:calc(575 * var(--px));
  /* 29/9/2026: 48 px liberi sotto l'icona, come nelle altre tre sezioni */
  margin:calc(48 * var(--px)) 0 0 calc(131 * var(--px));
  /* a progetto il pannello sfumava in basso fino a #A19E9E: dal 30/9/2026
     e' pieno, niente grigio scuro (richiesta del cliente) */
  background:var(--bg);
  border-radius:calc(40 * var(--px));
  box-shadow:0 calc(17 * var(--px)) calc(6 * var(--px)) calc(-6 * var(--px)) rgba(0,0,0,.26);
}
/* il carosello qui e' a tutta larghezza del pannello, non 601x440 come in home */
/* altezze in misura assoluta lungo tutta la catena: senza, il carosello
   restava alto zero e il contenuto delle slide veniva ritagliato */
.sv-pannello .carousel{
  width:100%; height:calc(575 * var(--px)); aspect-ratio:auto; margin:0;
}
.sv-pannello .car-track{
  align-items:stretch; border-radius:0; height:calc(575 * var(--px));
}
.sv-pannello .car-slide{ height:calc(575 * var(--px)); }
/* frecce 62px dentro il pannello (161:102 / 161:109) */
/* a progetto le frecce sono un anello bianco di 4px su disco #DDDDDC,
   55,5 di diametro, con la punta bianca ricavata dal disco */
.sv-pannello .car-nav{
  width:calc(55.5 * var(--px)); top:calc(286 * var(--px)); translate:0 -50%;
  background:#FFF; border-radius:50%;
  display:grid; place-items:center;
}
.sv-pannello .car-nav svg{ width:calc(47.5 * var(--px)); height:calc(47.5 * var(--px)); }
.sv-pannello .car-nav svg path{ fill:#DDDDDC; }
.sv-pannello .car-prev{ left:calc(8.2 * var(--px)); }
.sv-pannello .car-next{ right:calc(14.3 * var(--px)); }
/* pallini 14px con passo 12, grigio scuro e non rosso (215:373 / 215:374) */
.sv-pannello .car-dots{
  bottom:calc(21 * var(--px)); gap:calc(12 * var(--px));
}
.sv-pannello .car-dots button{
  width:calc(14 * var(--px)); background:var(--grigio-scuro);
}
.sv-pannello .car-dots button[aria-current="true"]{ background:var(--ink); }

/* coordinate relative al pannello (componente 1400 meno i 180 di offset) */
.sv-slide{ position:relative; height:calc(575 * var(--px)); }
.sv-slide h3{                                   /* 153:219 — pillola 583x77 a (36,81) */
  position:absolute; left:calc(36 * var(--px)); top:calc(81 * var(--px));
  width:calc(583 * var(--px)); height:calc(77 * var(--px));
  margin:0; display:flex; align-items:center; justify-content:center;
  padding:calc(8 * var(--px)) calc(18 * var(--px)); text-align:center;
  background:var(--red-card); color:var(--white);
  /* Anche in WordPress: lo stencil globale degli h3 non entra nella pillola. */
  font-family:var(--font-body);
  font-weight:600; font-size:clamp(15px, calc(44 * var(--px)), 44px);
  line-height:1.15; border-radius:calc(50 * var(--px));
}
.sv-slide p{                                    /* 153:211 — 539 di larghezza a (58,180) */
  position:absolute; left:calc(58 * var(--px)); top:calc(180 * var(--px));
  width:calc(539 * var(--px)); margin:0;
  color:#000; text-align:left;            /* a sinistra dal 28/9/2026: si legge meglio */
  font-size:clamp(14px, calc(24 * var(--px)), 24px);
  line-height:calc(40 * var(--px));
}
.sv-slide img{                                  /* 239:245 — 407x288 a (683,164) */
  position:absolute; left:calc(683 * var(--px)); top:calc(164 * var(--px));
  width:calc(407 * var(--px)); height:calc(288 * var(--px));
  object-fit:cover; border-radius:0;
}
.sv-slide-media{ display:contents; }
@media (min-width:901px){
  /* 28/9/2026: la freccia sinistra copriva l'inizio del testo. Il pannello
     si allarga di 32px per lato; il contenuto delle slide resta fermo. */
  .sv-pannello{ width:calc(1290 * var(--px)); margin-left:calc(99 * var(--px)); }
  .sv-slide > div, .sv-slide > img, .sv-slide > .sv-slide-media{ translate:calc(32 * var(--px)) 0; }
  .sv-slide:nth-child(2) img{ top:calc(127 * var(--px)); width:calc(403 * var(--px)); height:calc(343 * var(--px)); }
  /* Figma 254:287: ritaglio della stuccatura ancorato in basso a destra. */
  .sv-slide:nth-child(3) .sv-slide-media{
    display:block; position:absolute; overflow:hidden;
    left:calc(683 * var(--px)); top:calc(98 * var(--px));
    width:calc(407 * var(--px)); height:calc(379 * var(--px));
  }
  /* In WordPress ogni foto sta in .sv-slide-media (display:contents, quindi senza translate). */
  .sv-slide-media > img{ translate:calc(32 * var(--px)) 0; }
  .sv-slide:nth-child(3) .sv-slide-media img{
    left:-122.01%; top:-59.16%; width:222.01%; height:159.16%; max-width:none; translate:none;
  }
  .sv-slide:nth-child(4) img{ top:calc(134 * var(--px)); height:calc(351 * var(--px)); }
  .sv-slide:nth-child(5) img{ left:calc(666 * var(--px)); top:calc(154 * var(--px)); height:calc(317 * var(--px)); }
}

/* --- sabbiatura: riquadro di testo e colonna di foto -------- */
/* riquadro 636 a x99, foto 453 a x908: margini 99 e 151 */
.sv-due{
  display:grid;
  grid-template-columns:calc(638 * var(--px)) calc(452 * var(--px));
  gap:calc(206 * var(--px));
  justify-content:start;
  margin-left:calc(20 * var(--px));      /* bordo destro allineato alla scheda rosa; foto ferme */
  /* 29/9/2026: prima riquadro e foto salivano accanto all'icona;
     ora partono 48 px sotto, come nelle altre sezioni */
  margin-top:calc(48 * var(--px));
  align-items:start;
}
.sv-scheda{
  /* A tavola il riquadro partiva 168 px sotto le foto: il cliente lo vuole
     allineato alla prima foto (24 settembre 2026). */
  margin-top:0;
  background:var(--scheda-sv);
  border:1px solid var(--scheda-sv);
  border-radius:calc(28 * var(--px));
  /* a progetto: cassa 638x683 a (98,2267), testo a bandiera da x187.
     30/9/2026: il riquadro scende fino al fondo della terza foto (920);
     il testo resta in alto, a bandiera. */
  padding:calc(29 * var(--px)) calc(75 * var(--px)) calc(29 * var(--px)) calc(88 * var(--px));
  color:#000;
  font-size:clamp(14px, calc(24 * var(--px)), 24px); line-height:1.6667;
  height:calc(920 * var(--px));
  box-shadow:none;
}
.sv-scheda p{ margin:0; }   /* a progetto il passo resta 40 anche fra i capoversi */
.sv-scheda p:last-child{ margin-bottom:0; }
/* mappa immagini pagina 3: le tre foto non sono una colonna regolare, hanno
   misure diverse e la prima sborda a sinistra sovrapponendosi alla seconda */
.sv-foto-colonna{
  position:relative; height:calc(920 * var(--px));
}
.sv-foto-colonna img{
  position:absolute; max-width:none;
  object-fit:cover; border-radius:calc(10 * var(--px));
}
/* la prima foto e' disegnata piu' grande della sua finestra (254:301,
   453x272): il ritaglio la riporta dentro */
.sv-foto-colonna img:nth-child(1){
  left:calc(-26.5 * var(--px)); top:calc(-46.8 * var(--px));
  width:calc(560.4 * var(--px)); height:calc(373.7 * var(--px));
  border-radius:0;
  clip-path:inset(calc(46.8 * var(--px)) calc(80.9 * var(--px)) calc(54.9 * var(--px)) calc(26.5 * var(--px)) round calc(10 * var(--px)));
}
.sv-foto-colonna img:nth-child(2){ left:0; top:calc(297 * var(--px));
  width:calc(452 * var(--px)); height:calc(301.4 * var(--px)); }
.sv-foto-colonna img:nth-child(3){ left:calc(-0.2 * var(--px)); top:calc(619 * var(--px));
  width:calc(451.4 * var(--px)); height:calc(301 * var(--px)); }

/* --- verniciatura: due schede colorate --------------------- */
.sv-coppia{
  /* a progetto: rosa 649x723 a (53,3205), lilla 676x723 a (811,3194) */
  display:grid; grid-template-columns:calc(649 * var(--px)) calc(676 * var(--px));
  gap:calc(109 * var(--px));
  justify-content:start; align-items:start;
  margin-left:calc(9 * var(--px));
  margin-top:calc(48 * var(--px));    /* 48 px sotto l'icona (29/9/2026) */
}
.sv-blocco{
  position:relative;
  border:1px solid var(--scheda-sv);
  border-radius:calc(50 * var(--px));
  padding:calc(51 * var(--px)) calc(69 * var(--px));
  color:#000; text-align:center;
  font-size:clamp(14px, calc(24 * var(--px)), 24px);
  line-height:1.6667;                      /* passo 40 come a progetto */
  box-shadow:none;
}
/* dal 30/9/2026 le schede sono tutte grigio B7 (08-servizi.css) */
.sv-blocco--rosa,
.sv-blocco--chiara{ background:var(--scheda-sv); }
.sv-blocco p{ margin:0; }
/* Testo a bandiera come nel riquadro di Sabbiatura: si legge meglio (richiesta
   del cliente, 24 settembre 2026). */
.sv-blocco p{ text-align:left; }
/* mappa immagini pagina 3: 286x190,7 nella scheda rosa, 304x202,7 in quella
   lilla, entrambe attaccate poco sotto il testo */
.sv-blocco img{
  width:calc(286 * var(--px)); max-width:100%;
  height:calc(190.7 * var(--px)); object-fit:cover;
  border-radius:calc(30 * var(--px));
  margin:calc(4 * var(--px)) auto 0;
}