/* =========================================================
   SERVIZI — artboard Figma 25:76 (1512 × 5313)
   Fasce alternate #9E9C9C / #D8D8D8 raccordate da curve morbide
   (nel design sono vettori; qui sono ellissi ottenute col raggio).
   ========================================================= */
/* 30/9/2026, richiesta del cliente: le schede di testo sono grigio B7 con il
   bordo dello stesso colore, cioe' senza filo scuro. */
.sec-sv{ position:relative; overflow:hidden; --scheda-sv:#B7B7B7; }
.sec-sv--scuro{  background:var(--grigio-scuro); }
.sec-sv--chiaro{ background:var(--grigio-chiaro); }
.sec-sv .wrap{ padding-inline:clamp(20px, calc(44 * var(--px)), 44px); position:relative; z-index:2; }

/* raccordo curvo fra una fascia e l'altra */
/* arco largo e basso, come le curve del design: piu' e' larga
   l'ellisse rispetto all'altezza, piu' il raccordo resta morbido */
.onda{
  position:absolute; left:-30%; width:160%;
  height:calc(96 * var(--px));
  pointer-events:none; z-index:1;
}
.onda--alto{  top:calc(-1 * var(--px));    border-radius:0 0 50% 50% / 0 0 100% 100%; }
.onda--basso{ bottom:calc(-1 * var(--px)); border-radius:50% 50% 0 0 / 100% 100% 0 0; }
.onda--scura{  background:var(--grigio-scuro); }
.onda--chiara{ background:var(--grigio-chiaro); }

/* --- hero: titolo + 4 carte (25:78 / 25:128) --------------- */
.sv-hero{ padding-block:calc(86 * var(--px)) calc(26 * var(--px)); }   /* 108 → 982 */
/* le quattro sezioni attaccano il titolo piu' in alto di quanto venga in
   flusso: qui si riallineano alle quote della tavola */
/* 30/9/2026, richiesta del cliente: niente piu' forme a S (servizi-fondo.svg)
   ne' doppie righe. Le carte restano sul grigio scuro delle Certificazioni
   di Chi siamo; il resto della pagina e' grigio chiaro. Vale per ogni
   variante di sezione, anche nelle pagine WordPress gia' salvate. */
.pagina-servizi,
.pagina-servizi .sec-sv{ background:var(--grigio-chiaro); }
.pagina-servizi .sec-sv.sv-hero{ background:var(--grigio-cert); }
.pagina-servizi .onda,
.pagina-servizi .sv-rigo{ display:none; }
:is(#pre-trattamento, [data-sial-anchor="pre-trattamento"]) .sv-testa{ margin-top:calc(-19 * var(--px)); }
/* 30/9/2026: tolta l'etichetta «LE NOSTRE CARTE» con la sua fascia. Il titolo
   di Pre-trattamento sta sotto le carte alla distanza che separa il pannello
   dal titolo di Sabbiatura (74 di tavola, 50 px sul telefono). In una pagina
   WordPress che ha ancora la fascia il selettore non vale: resta tutto com'era. */
.sv-hero + :is(#pre-trattamento, [data-sial-anchor="pre-trattamento"]) .sv-testa{ margin-top:calc(72 * var(--px)); }
@media (max-width:900px){ .sv-hero + :is(#pre-trattamento, [data-sial-anchor="pre-trattamento"]) .sv-testa{ margin-top:24px; } }
:is(#sabbiatura, [data-sial-anchor="sabbiatura"]) .sv-testa{     margin-top:calc(-41 * var(--px)); }
/* 30/9/2026: il riquadro di Sabbiatura scende fino al fondo delle foto; il
   titolo Verniciatura resta 75 di tavola sotto, come gli altri titoli. */
@media (min-width:901px){ :is(#verniciatura, [data-sial-anchor="verniciatura"]) .sv-testa{ margin-top:calc(62 * var(--px)); } }
.sv-hero .titolo-sezione{ text-align:center; }
.sv-carte{
  display:grid; grid-template-columns:repeat(4, calc(299 * var(--px)));
  gap:calc(71 * var(--px));
  justify-content:start;                 /* a progetto partono da x44 */
  /* 28/9/2026: a tavola le carte stavano a y430 (166 sotto il titolo) e
     su uno schermo 1920x1080 la freccia finiva sul bordo. Ora salgono di 94. */
  margin-top:calc(72 * var(--px));
}
/* 29/9/2026, proposta A «velo scuro» (verifiche/carte-servizi/proposte-2):
   foto a tutta carta come nella tavola Figma, testo bianco su un velo
   grafite che sale da sotto, una sola icona su un bollo chiaro e il
   pulsante rosso «Scopri». La carta resta alta 383, come a tavola. */
.sv-carta{
  position:relative; margin:0; isolation:isolate;
  height:calc(383 * var(--px));
  background:#2A2A2A;                            /* se la foto non arriva */
  border-radius:calc(28 * var(--px));
  box-shadow:0 calc(12 * var(--px)) calc(14 * var(--px)) calc(-4 * var(--px)) rgba(0,0,0,.32);
}
.sv-carta-foto{ position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; }
.sv-carta-foto > img{ display:block; width:100%; height:100%; object-fit:cover; }
/* inquadrature scelte nel prototipo: la lancia nella prima, il verniciatore nella terza */
.sv-carte > *:nth-child(1) > .sv-carta-foto > img{ object-position:78% 50%; }
.sv-carte > *:nth-child(3) > .sv-carta-foto > img{ object-position:38% 50%; }
/* Nel markup l'icona compare due volte, come nella tavola Figma: qui ne basta
   una, in alto a sinistra su un bollo chiaro. La larghezza segue il disegno. */
.sv-carta i{
  position:absolute; z-index:2; top:calc(18 * var(--px)); left:calc(18 * var(--px));
  display:grid; place-items:center;
  height:calc(58 * var(--px)); min-width:calc(58 * var(--px)); padding:calc(14 * var(--px));
  border-radius:999px; background:var(--bg); box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.sv-carta i + i{ display:none; }
.sv-carta i img{ width:auto; height:100%; }
/* Il velo sta sul testo, non sulla foto: sfuma nei --sfuma px sopra il
   titolo e sotto il testo e' sempre almeno all'80%. Cosi' il testo resta
   leggibile anche quando va a capo piu' volte. min-height: le quattro carte
   hanno lo stesso velo anche se il sottotitolo e' piu' corto. */
.sv-carta-testo{
  --sfuma:calc(80 * var(--px));
  position:absolute; z-index:1; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:66%;
  padding:var(--sfuma) calc(24 * var(--px)) calc(84 * var(--px));
  border-radius:0 0 calc(28 * var(--px)) calc(28 * var(--px));
  background:linear-gradient(to top,
    rgba(24,24,24,.9) 0, rgba(24,24,24,.8) calc(100% - var(--sfuma)),
    rgba(24,24,24,.4) calc(100% - var(--sfuma) * .5), rgba(24,24,24,0) 100%);
}
.sv-carta b{
  display:block; color:var(--white); font-weight:600;
  font-size:max(16px, calc(30 * var(--px))); line-height:1.15;
}
.sv-carta span{
  display:block; margin-top:calc(6 * var(--px));
  color:var(--bg); font-weight:500;
  font-size:max(16px, calc(19 * var(--px))); line-height:1.3;
}
/* Titolo e sottotitolo sono il testo del collegamento (vale per i motori di
   ricerca). Il ::after lo stende su tutta la carta: la carta intera porta
   alla sua sezione. Il ::before e' il pulsante «Scopri», fuori dal nome
   accessibile del link (testo alternativo vuoto dopo la barra). */
.sv-carta-link{ text-decoration:none; }
.sv-carta-link::after{ content:""; position:absolute; inset:0; z-index:3; border-radius:calc(28 * var(--px)); }
.sv-carta-link::before{
  content:"Scopri"; content:"Scopri" / "";
  position:absolute; z-index:2; left:calc(24 * var(--px)); bottom:calc(22 * var(--px));
  display:flex; align-items:center;
  height:calc(44 * var(--px)); padding:0 calc(40 * var(--px)) 0 calc(18 * var(--px));
  border-radius:999px; background:var(--red-btn) no-repeat right calc(18 * var(--px)) center / calc(14 * var(--px)) auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8l6.5-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color:var(--white); font-weight:600; line-height:1;
  font-size:max(16px, calc(17 * var(--px)));
}
.sv-carta-link:focus-visible{ outline:none; }
.sv-carta-link:focus-visible::after{ outline:3px solid var(--red-card); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){
  .sv-carta:hover, .sv-carta:focus-within{
    box-shadow:0 calc(18 * var(--px)) calc(24 * var(--px)) calc(-4 * var(--px)) rgba(0,0,0,.4);
  }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .sv-carta{ transition:transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft); }
  .sv-carta:hover, .sv-carta:focus-within{ transform:translateY(-4px); }
  .sv-carta-foto > img{ transition:transform .5s var(--ease-soft); }
  .sv-carta:hover .sv-carta-foto > img{ transform:scale(1.045); }
  .sv-carta-link::before{ transition:background-position .2s var(--ease-soft); }
  .sv-carta:hover .sv-carta-link::before{ background-position:right calc(18 * var(--px)) top calc(50% + 3px); }
}

.sv-cue{
  display:block; width:clamp(40px, calc(72 * var(--px)), 72px);
  margin:calc(44 * var(--px)) auto 0;
  transition:transform .2s var(--ease-soft);
}
.sv-cue img{ width:100%; height:auto; }
.sv-cue:hover{ transform:translateY(5px); }

/* --- intestazione di sezione: etichetta, titolo, icona ------ */
.sv-testa{ text-align:center; }
.sv-etichetta{
  margin:0; color:#1E1E1E; font-weight:600;
  font-size:clamp(14px, calc(34 * var(--px)), 34px);
  text-align:center;                    /* a progetto e' centrata, non a bandiera */
  position:relative; left:calc(6 * var(--px));
}
/* 27:144 / 32:49 / 32:37 / 32:44 — Allerta Stencil 80px, interlinea 70 */
.sv-titolo{
  margin:calc(18 * var(--px)) 0 0;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(30px, calc(80 * var(--px)), 80px);
  line-height:var(--lh-display); color:var(--red-card);
}
/* a progetto solo "Pre-trattamento" e' 80px: gli altri tre titoli sono 88 */
:is(#sabbiatura, [data-sial-anchor="sabbiatura"]) .sv-titolo,
:is(#verniciatura, [data-sial-anchor="verniciatura"]) .sv-titolo,
:is(#imballaggio, [data-sial-anchor="imballaggio"]) .sv-titolo{ font-size:clamp(30px, calc(88 * var(--px)), 88px); }
/* a progetto i quattro titoli non sono centrati sullo stesso asse */
.sv-titolo{ position:relative; }
:is(#pre-trattamento, [data-sial-anchor="pre-trattamento"]) .sv-titolo{ left:calc(7 * var(--px)); }
:is(#sabbiatura, [data-sial-anchor="sabbiatura"]) .sv-titolo{      left:calc(-1 * var(--px)); top:calc(3 * var(--px)); }
:is(#verniciatura, [data-sial-anchor="verniciatura"]) .sv-titolo{    left:calc(-5 * var(--px)); top:calc(-2 * var(--px)); }
:is(#imballaggio, [data-sial-anchor="imballaggio"]) .sv-titolo{     left:calc(24 * var(--px)); }
/* a progetto le quattro icone non hanno la stessa misura ne' lo stesso asse:
   165x84 / 90x79 / 159x57 / 59x61. 30/9/2026, richiesta del cliente: icone
   piu' piccole, la parola conta piu' del disegno. Ognuna e' al 69% della
   tavola (58 / 54 / 39 / 43), come sul telefono da 38 a 26 px. */
.sv-icona{ display:block; margin:calc(25 * var(--px)) auto 0; height:calc(var(--icona, 58) * var(--px)); width:auto; }
:is(#pre-trattamento, [data-sial-anchor="pre-trattamento"]) .sv-icona{ position:relative; left:calc(21.5 * var(--px)); }
:is(#sabbiatura, [data-sial-anchor="sabbiatura"]) .sv-icona{   --icona:54; }
:is(#verniciatura, [data-sial-anchor="verniciatura"]) .sv-icona{ --icona:39; }
:is(#imballaggio, [data-sial-anchor="imballaggio"]) .sv-icona{  --icona:43; }