/* 01-base.css */
/* =========================================================
   SIAL — stile derivato dal file Figma "PROGETTO SIAL"
   file: axzB1tuk3AfKU5Z9HrXpUO — artboard HOME PAGE (73:39), 1512 × 5207
   ---------------------------------------------------------
   I valori qui sotto sono letti dal design, non stimati.
   Accanto a ogni blocco è indicato il nodo Figma di origine.

   SCALA FLUIDA
   --px vale 1 px dell'artboard da 1512. Sotto i 1134 px di viewport
   le misure scalano in proporzione, sopra si fermano al 75% del
   progetto (vedi il blocco «Oltre i 1134 px» più sotto).
   ========================================================= */


:root{
  /* --- 1 px dell'artboard 1512 --- */
  --px: 0.066137vw;

  /* --- colori campionati dai nodi Figma --- */
  --red-card:   #C20F1D;   /* card rosse + "Chi siamo?"      73:69 / 73:65 */
  --red-btn:    #CF0010;   /* bottoni + "Come lavoriamo?"    73:90 / 73:94 */
  --grey-btn:   #737373;   /* bottoni grigi; era #AAAAAA (2,3:1), ora 4,7:1 col bianco, 19/10/2026 */
  --bg:         #E2E2E1;   /* fondo pagina                   262:521 */
  --nav-bg:     #D9D9D9;   /* barra di navigazione           73:41 */
  --nav-border: #ACABAB;   /* bordo barra                    73:41 */
  --footer-bg:  #737373;   /* barra di chiusura; era #7B7B7B (4,2:1), come i bottoni grigi */
  --ink:        #3D3D3D;   /* testo corrente                 82:30 / 82:33 */
  --hero-ink:   #2F2F2F;   /* titolo hero                    10:6 */
  --on-red:     #E2E2E1;   /* testo dentro le card           50:9783 */
  --title-card: #FFFFFF;   /* "Perché sceglierci?"; era #D9D9D9 (4,4:1 sul rosso) */
  --white:      #FFFFFF;
  --dot:        #D9D9D9;   /* carosello, punto inattivo      338:2738 */
  --dot-on:     #9F9C9C;   /* carosello, punto attivo        338:2738 */

  /* --- colori introdotti dalle pagine interne (artboard CHI SIAMO) --- */
  --blu:            #0010BA; /* stelle, icone, spunte, bordi   47:9660 */
  --grigio-cert:    #999494; /* fascia certificazioni          281:282 */
  --grigio-storia:  #D5D6D6; /* fascia "La nostra storia"      73:59  */

  /* --- colori introdotti da SERVIZI (artboard 25:76) --- */
  --grigio-scuro:   #9E9C9C; /* fascia scura                   25:77  */
  --grigio-chiaro:  #D8D8D8; /* fascia chiara                  27:138 */
  --rosa-card:      #FFD8D3; /* scheda verniciatura sinistra   112:43 */
  --lilla-card:     #EAEAF0; /* scheda verniciatura destra     119:14 */
  --grigio-banner:  #D7D6D6; /* fascia del banner finale       469:1395 */
  --rosso-carta:    #FF0808; /* titoli delle 4 carte servizi   27:135 */
  --verde:          #1DD700; /* spunte e etichette contatti    315:529 */

  /* --- tipografia reale del file Figma --- */
  --font-display: "Allerta Stencil", system-ui, sans-serif;
  --font-body:    "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(34px, calc(88 * var(--px)), 88px);  /* h2      88px */
  --fs-hero:    clamp(27px, calc(64 * var(--px)), 64px);  /* h1      64px */
  --fs-body:    clamp(16px, calc(30 * var(--px)), 30px);  /* testo   30px */
  --fs-nav:     clamp(13px, calc(20 * var(--px)), 20px);  /* navbar  20px */
  --fs-footer:  clamp(13px, calc(24 * var(--px)), 24px);  /* footer  24px */
  --lh-display: clamp(28px, calc(70 * var(--px)), 70px);  /* interlinea h2 */

  /* --- geometria --- */
  --header-h:    clamp(56px, calc(98 * var(--px)), 98px);
  --radius-card: clamp(12px, calc(20 * var(--px)), 20px);
  --radius-img:  clamp(12px, calc(20 * var(--px)), 20px);
  --radius-car:  clamp(8px,  calc(10 * var(--px)), 10px);
  --radius-pill: 999px;

  --shadow-card: 0 calc(20 * var(--px)) calc(5 * var(--px)) rgba(0,0,0,.25);
  --shadow-btn:  0 calc(10 * var(--px)) calc(8 * var(--px)) rgba(0,0,0,.25);

  --gutter: clamp(20px, calc(114 * var(--px)), 114px);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

/* Comparse abilitate solo dal JS: senza JS e nell'editor tutto resta visibile.
   translate/scale sono indipendenti dai transform di layout e dagli hover. */
@keyframes sial-reveal{
  from{ opacity:0; translate:var(--reveal-x) var(--reveal-y); scale:var(--reveal-scale); }
  to{ opacity:1; translate:0 0; scale:1; }
}
@media (prefers-reduced-motion:no-preference){
  .reveal-ready{
    --reveal-x:0px; --reveal-y:16px; --reveal-scale:1; --reveal-duration:550ms;
  }
  .reveal-ready[data-reveal="left"]{ --reveal-x:-18px; --reveal-y:0px; --reveal-duration:650ms; }
  .reveal-ready[data-reveal="right"]{ --reveal-x:18px; --reveal-y:0px; --reveal-duration:650ms; }
  .reveal-ready[data-reveal="zoom"]{ --reveal-y:0px; --reveal-scale:.98; --reveal-duration:650ms; }
  .reveal-ready.btn{ --reveal-x:0px; --reveal-y:8px; --reveal-scale:1; --reveal-duration:450ms; }
  .reveal-ready:not(.is-in){ opacity:0; }
  .reveal-ready.is-in{
    animation:sial-reveal var(--reveal-duration) var(--ease-soft) var(--reveal-delay, 0ms) both;
  }
}
@media (prefers-reduced-motion:no-preference) and (max-width:900px){
  .reveal-ready,
  .reveal-ready[data-reveal],
  .reveal-ready.btn{
    --reveal-x:0px; --reveal-y:10px; --reveal-scale:1; --reveal-duration:450ms;
  }
}

/* Oltre i 1134 px la scala si ferma al 75% della tavola: 1 px di progetto
   diventa 0,75 px reali e il blocco centrale resta largo 1134 px
   (1512 × 0,75). Deciso il 30/9/2026 su un portatile 1920×1080: a scala
   piena il testo corrente era di 30 px e le sezioni non entravano nello
   schermo; così il sito si vede come con lo zoom del browser al 75%.
   Senza il blocco, le misure scritte con --px continuerebbero a
   ingrandirsi mentre quelle con clamp() si fermano, e le due cose si
   scollano. Le fasce a tutta larghezza restano a tutta larghezza; le
   larghezze massime e gli ancoraggi al blocco centrato sono scritti come
   N * var(--px) e seguono questa scala. La soglia si ripete nelle media
   query min-width:1135px (02-testata-hero, 03-componenti) e in
   03-storia.js: se cambia la scala, vanno cambiate insieme. */
@media (min-width:1134px){
  :root{ --px: 0.75px; }
}
/* Sul computer nessun testo sotto i 16 px: al 75% il menu scenderebbe
   a 15 px. */
@media (min-width:901px){
  :root{ --fs-nav: clamp(16px, calc(20 * var(--px)), 20px); }
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.2;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--red-card); color:#fff; padding:12px 18px; font-size:16px;
}
.skip:focus{ left:8px; top:8px; }

.wrap{
  width:100%; max-width:calc(1512 * var(--px));
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* 02-testata-hero.css */

/* =========================================================
   NAVBAR — 73:40 / 73:41
   barra piena 1512×98, fondo #D9D9D9, bordo #ACABAB,
   voci Albert Sans 20px nere, passo 50px, 65px dal bordo destro
   ========================================================= */
.site-header{
  position:relative; z-index:30;
  height:var(--header-h);
  background:var(--nav-bg);
  border:1px solid var(--nav-border);
}
.header-inner{
  height:100%;
  display:flex; align-items:center; justify-content:flex-end;
  padding-inline:0 clamp(16px, calc(65 * var(--px)), 65px);
  max-width:calc(1512 * var(--px));
}
.nav{ display:flex; gap:clamp(16px, calc(50 * var(--px)), 50px); }
.nav a{
  font-size:var(--fs-nav);
  color:#000; text-decoration:none; white-space:nowrap;
  padding-block:6px; border-bottom:2px solid transparent;
  transition:border-color .18s ease;
}
.nav a:hover, .nav a:focus-visible{ border-bottom-color:var(--red-btn); }
/* "HOME" serve solo nel menu a tendina del telefono */
.nav .nav-home{ display:none; }

.burger{ display:none; }
.header-logo--mobile{ display:none; }

/* Ancoraggio all'artboard centrato.
   Gli elementi in posizione assoluta dentro fasce a tutta larghezza vanno
   agganciati al blocco centrato (1512 px di tavola), non al bordo dello
   schermo: max(N, 50% - 756 + N) vale N fino a 1134 px di finestra e
   segue il centro oltre (tutto in px di tavola, cioè × var(--px)). */
/* =========================================================
   HERO — 262:520
   La S (riempimento del frame) al 70% sotto la foto al 50%:
   da qui l'aspetto slavato del mockup.
   ========================================================= */
.hero{
  position:relative;
  height:clamp(430px, calc(1038 * var(--px)), 1038px);   /* 98 → 1136 */
  overflow:hidden;
  background:var(--bg);
}
/* riempimento del frame: 2292×1164, object-cover, opacità 70% */
.hero-s{
  position:absolute; left:0;
  top:calc(-126 * var(--px));
  width:151.6%;                                          /* 2292 / 1512 */
  height:calc(1164 * var(--px));
  object-fit:cover; opacity:.6;
  max-width:none; pointer-events:none;
}
/* Oltre i 1134 px la S resta in scala con la tavola e segue il blocco
   centrato, come il logo e il titolo. Prima si allargava con lo schermo
   e veniva tagliata in alto (28/9/2026). Nel margine a sinistra la prima
   colonna di s-mark.png, larga 1449 px, viene stirata fino al bordo: così la
   doppia fascia continua senza stacchi. */
@media (min-width:1135px){
  .hero-s{ left:calc(50% - 756 * var(--px)); width:calc(2292 * var(--px)); }
  .hero::before{
    content:""; position:absolute; left:0;
    top:calc(-126 * var(--px));
    width:calc(50% - 756 * var(--px)); height:calc(1164 * var(--px));
    background:url("../img/s-mark.png") 0 0 / calc(100% * 1449) 100% no-repeat;
    opacity:.6; pointer-events:none;
  }
  .ft-home .hero::before{ top:calc(-114 * var(--px)); }
}
/* Component 2 (262:513): foto 1513×901 al 50%.
   hero.jpg e' la stessa foto del nodo Figma ma nella copia a 1920x1277
   estratta dal PDF: l'originale caricato su Figma e' solo 995x662. */
.hero-photo{
  position:absolute; left:0;
  top:calc(-12 * var(--px));
  width:100%;
  height:calc(901 * var(--px));
  /* nel PDF la fascia rende come una foto al 40%: il 50% dichiarato sul
     componente e' l'opacita' del nodo dentro un gruppo gia' velato */
  opacity:.4; overflow:hidden; pointer-events:none;
}
/* le tre foto sono impilate e si alternano in dissolvenza,
   come la Component 2 del design che ha tre varianti */
.hero-photo img{
  position:absolute;
  left:-1.54%; top:-13.42%; width:101.54%; height:113.46%;
  object-fit:cover; max-width:none;
  opacity:0; transition:opacity var(--hero-transition, 2083.538ms) ease-in-out;
}
.hero-photo img.is-on{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .hero-photo img{ transition:none; }
}

/* logo 9:4 — 315×160, a 91px dal bordo, 33px sotto la navbar */
.hero-logo{
  position:absolute; z-index:3;
  left:max(clamp(16px, calc(91 * var(--px)), 91px), calc(50% - 756 * var(--px) + 91 * var(--px)));
  top:clamp(16px, calc(33 * var(--px)), 33px);
  width:clamp(150px, calc(315 * var(--px)), 315px);
}
.hero-logo img{ width:100%; height:auto; }

/* titolo 10:6 — Allerta Stencil 64px #2F2F2F, cassa larga 700px
   y 324 sull'artboard = 226 sotto la navbar alta 98 */
.hero-title{
  position:absolute; z-index:3;
  left:max(clamp(16px, calc(91 * var(--px)), 91px), calc(50% - 756 * var(--px) + 91 * var(--px)));
  top:clamp(110px, calc(226 * var(--px)), 226px);
  width:clamp(260px, calc(700 * var(--px)), 700px);
  margin:0;
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-hero); line-height:1.285;   /* passo 82,25 come a progetto */
  color:var(--hero-ink);
}
.hero-title span{ display:block; }

/* freccia 77:30 — cerchio 60.7×62 pieno #E2E2E1, ruotato -90° */
.scroll-cue{
  position:absolute; z-index:3;
  left:48%; top:67%;
  width:clamp(34px, calc(61 * var(--px)), 61px);
  aspect-ratio:60.74 / 62;
  display:block;
  /* il centraggio sta su transform, non su translate: cosi' non va in
     conflitto con l'animazione di comparsa, che usa translate */
  transform:translateX(-50%);
  transition:transform .2s ease;
}
.scroll-cue svg{ width:100%; height:100%; rotate:-90deg; display:block; }
.scroll-cue:hover{ transform:translateX(-50%) translateY(5px); }

/* =========================================================
   SEZIONI DI TESTO
   ========================================================= */
.display{
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-display); line-height:var(--lh-display);
  margin:0;
}
.split{ display:grid; align-items:start; }
.split-text p{ margin:0 0 1em; }
.split-text p:last-of-type{ margin-bottom:0; }
.split-text strong{ font-weight:600; }
.split-media{ margin:0; position:relative; }
/* height:auto serve a neutralizzare gli attributi width/height del markup,
   altrimenti prevalgono sull'aspect-ratio di progetto */
.split-media img{ width:100%; height:auto; border-radius:var(--radius-img); }

/* --- CHI SIAMO — 262:515 --------------------------------
   h2 #C20F1D a y1118; testo 584px a x114; foto 667px a x737;
   bottone 388×107 appoggiato sul bordo basso della foto      */
.sec-chisiamo{ padding-block:0 calc(77 * var(--px)); }   /* la card 73:69 attacca a 1737 */
/* il titolo risale di 18px sull'hero, come a progetto (y1118 contro hero fino a 1136) */
.sec-chisiamo .display{
  color:var(--red-card);
  position:relative; z-index:2;
  margin-top:calc(-18 * var(--px));
}
.sec-chisiamo .split{
  /* colonne fisse: 584 di testo, 38,8 di stacco, 667,4 di foto, da 114 a
     1404,2 — la foto sborda di 6px sul margine destro, come a progetto */
  grid-template-columns:calc(584 * var(--px)) 1fr;
  gap:calc(38.8 * var(--px));
  margin-right:calc(-6.2 * var(--px));
  margin-top:calc(27 * var(--px));   /* 1118 + 70 → 1215 */
}
/* 82:30: il testo attacca a 1290, e i due capoversi non hanno stacco */
.sec-chisiamo .split-text{ margin-top:calc(68 * var(--px)); }
.sec-chisiamo .split-text p{ margin-bottom:0; }
.sec-chisiamo .split-media img{ aspect-ratio:667 / 445; object-fit:cover; }

/* --- COME LAVORIAMO — 262:517 ---------------------------
   Dal 28/9/2026 e' uguale a Chi siamo: titolo a sinistra, testo di 584px a
   sinistra, foto 667x445 a destra con il bottone appoggiato come "entra nel
   mondo SIAL". Il testo e' piu' lungo: sta centrato sull'altezza della foto. */
.sec-comelavoriamo{ padding-block:calc(135 * var(--px)) calc(162 * var(--px)); }  /* h2 a 2782, card 73:106 a 3541 */
.sec-comelavoriamo .display{ color:var(--red-btn); }
.sec-comelavoriamo .split{
  grid-template-columns:calc(584 * var(--px)) 1fr;
  gap:calc(38.8 * var(--px));
  margin-right:calc(-6.2 * var(--px));
  margin-top:calc(27 * var(--px));
  align-items:center;
}
.sec-comelavoriamo .split-media img{ aspect-ratio:667 / 445; object-fit:cover; }
.sec-comelavoriamo .split-text{ text-align:left; }

/* 03-componenti.css */

/* =========================================================
   BOTTONI — 73:90 / 73:96 / 73:101 / 73:132
   pillola alta 107px, raggio 50px, testo Albert Sans 600 30px
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:clamp(44px, calc(107 * var(--px)), 107px);
  /* a progetto l'etichetta piu' lunga occupa 349px su un bottone da 388:
     con 30px per lato non ci sta e va a capo. Il progetto ne lascia ~19. */
  padding-inline:clamp(12px, calc(14 * var(--px)), 14px);
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-body);
  line-height:1.1; text-align:center; text-decoration:none;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-btn);
  transition:transform .16s ease, box-shadow .16s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 calc(14 * var(--px)) calc(12 * var(--px)) rgba(0,0,0,.28); }
.btn:active{ transform:translateY(0); }
.btn-red{  background:var(--red-btn);  color:var(--white); }
.btn-grey{ background:var(--grey-btn); color:var(--white); }

/* larghezze da progetto */
.btn-w388{ width:clamp(200px, calc(388 * var(--px)), 388px); }
.btn-w433{ width:clamp(220px, calc(433 * var(--px)), 433px); }

/* "entra nel mondo SIAL": 388×107 a x876 y1534 — 73:90 */
.btn-overlay{
  position:absolute; z-index:2;
  left:calc(139 / 667 * 100%);
  top:calc(319 / 445 * 100%);
}

/* =========================================================
   CARD ROSSE — 73:69 (+82:24) e 73:106 (+82:19)
   1011×911, raggio 20px, ombra 0 20px 5px rgba(0,0,0,.25);
   sopra, la stessa S dell'hero al 50%, ingrandita al 228%
   ========================================================= */
.card{
  position:relative;
  width:min(66.87vw, calc(1011 * var(--px)));   /* 1011 / 1512 */
  margin-inline:auto;
  aspect-ratio:1011 / 911;
  background:var(--red-card);
  color:var(--on-red);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
.card-tex{
  position:absolute; inset:0;
  overflow:hidden; border-radius:var(--radius-card);
  opacity:.5; pointer-events:none;
}
.card-tex img{
  position:absolute;
  /* mappa immagini pagina 1: la S sta a -326 / 1611,9, 2308 x 1164,2 */
  width:228.29%; height:127.79%;
  max-width:none; object-fit:cover;
}
/* Le due casse di testo hanno larghezze diverse: il titolo 892 su 1011
   (73:83), il paragrafo 712 (50:9783). Il padding segue il titolo. */
.card-body{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center;
  padding-inline:calc(60 * var(--px));
  text-align:center;
}
.card-title{ width:100%; color:var(--title-card); }
.card-body p{
  width:100%; max-width:calc(712 * var(--px));
  /* a progetto solo la prima frase e' in semigrassetto, non tutto il blocco */
  font-weight:400; margin:0;
}
.card-body strong{ font-weight:600; }
.card-body .btn{ margin-top:auto; }

/* "Perchè sceglierci?" — 262:516
   titolo a 139 dal bordo card, testo centrato su 457, bottone a 65 dal fondo */
.card-perche .card-tex img{ left:-57.02%; top:-13.73%; }
.card-perche .card-body{
  padding-top:calc(125 * var(--px));    /* 73:83 a y1861, card a 1737 */
  padding-bottom:calc(80 * var(--px));  /* 73:96 a y2461 */
}
.card-perche .card-body p{ margin-top:calc(177 * var(--px)); text-align:left; position:relative; left:calc(10.5 * var(--px)); }  /* 50:9783 a y2109 */

/* "I nostri lavori" — 262:518
   titolo a 74, carosello a 240, bottone a 44 dal fondo; titolo #E2E2E1 */
.card-lavori .card-tex img{ left:-57.12%; top:-14.06%; }
.card-lavori .card-body{
  padding-top:calc(57 * var(--px));     /* 73:104 a y3597, card a 3541 */
  padding-bottom:calc(62 * var(--px));  /* 73:132 a y4283 */
}
.card-lavori .card-title{ color:var(--on-red); }
/* Figma 352:2819: contenitore 601×440 a (437,3763). */
.card-lavori .carousel{ width:calc(601 * var(--px)); aspect-ratio:601 / 440; left:calc(-18.5 * var(--px)); }

/* =========================================================
   CAROSELLO — 352:2819 (componente "fluorescente")
   601×440, raggio 10px, frecce 40px, 3 punti da 12px
   ========================================================= */
.carousel{
  position:relative;
  width:calc(601 * var(--px));
  max-width:100%;
  margin:calc(95 * var(--px)) auto 0;   /* 352:2819 a y3763 */
  aspect-ratio:601 / 440;
}
.car-track{
  display:flex; height:100%;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  border-radius:var(--radius-car);
  scrollbar-width:none;
}
.car-track::-webkit-scrollbar{ display:none; }
.car-slide{ margin:0; flex:0 0 100%; scroll-snap-align:center; height:100%; }
/* uno swipe aggancia sempre la foto accanto; piu' swipe di fila ne scorrono di piu' */
.car-slide{ scroll-snap-stop:always; }
.car-slide img{
  width:100%; height:100%; object-fit:cover;
  border-radius:var(--radius-car);
}
.car-nav{
  position:absolute; top:50%; translate:0 -50%; z-index:3;
  width:calc(40 / 601 * 100%); aspect-ratio:1;
  padding:0; border:0; background:none; cursor:pointer;
}
.car-nav svg{ width:100%; height:100%; display:block; }
.car-prev{ left:calc(6 / 601 * 100%); }
.car-next{ right:calc(14 / 601 * 100%); }
.car-next svg{ rotate:180deg; }
.car-dots{
  position:absolute; left:50%; translate:-50% 0;
  bottom:calc(26 / 440 * 100%);
  /* il passo va in --px: una percentuale su gap si calcola sulla larghezza
     del contenitore dei pallini, non del carosello, e verrebbe quasi nulla */
  display:flex; gap:calc(10 * var(--px)); z-index:3;
}
.car-dots button{
  width:clamp(7px, calc(12 * var(--px)), 12px); aspect-ratio:1;
  padding:0; border:0; border-radius:50%;
  background:var(--dot); cursor:pointer;
}
.car-dots button[aria-current="true"]{ background:var(--dot-on); }

/* =========================================================
   STRISCIA FOTO — 262:519
   tre immagini a tutta larghezza, alte 341px, senza spazi
   ========================================================= */
.strip{
  display:grid;
  /* i tagli visibili a progetto cadono a 503 e 1014: la prima foto e' larga
     523 ma la seconda le passa sotto, e la terza sborda a destra */
  grid-template-columns:513fr 501fr 498fr;
  gap:0;
  margin-top:calc(79 * var(--px));   /* 262:519 a y4531 */
}
/* Ogni foto e' disegnata piu' grande della propria finestra e spostata,
   esattamente come nel PDF (mappa immagini pagina 1): la cella ritaglia.
   -10/523 la prima, 502,7/511,6 la seconda, 950,6/581,7 la terza. */
.strip-cell{
  display:block; position:relative; overflow:hidden;
  height:clamp(120px, calc(340 * var(--px)), 340px);
}
.strip-cell img{ position:absolute; max-width:none; object-fit:cover; }
.strip-cell:nth-child(1) img{
  left:calc(-10 * var(--px));   top:calc(-8.4 * var(--px));
  width:calc(523 * var(--px));  height:calc(348.7 * var(--px));
}
.strip-cell:nth-child(2) img{
  left:calc(-10.3 * var(--px)); top:0;
  width:calc(511.6 * var(--px)); height:calc(341 * var(--px));
}
.strip-cell:nth-child(3) img{
  left:calc(-63.4 * var(--px)); top:0;
  width:calc(581.7 * var(--px)); height:calc(388 * var(--px));
}
/* Sopra i 1134 px la scala si ferma ma la griglia continua ad allargarsi:
   le foto riempono la cella invece di restare alla misura dell'artboard,
   altrimenti fra una foto e l'altra resta una fascia vuota. */
@media (min-width:1135px){
  .strip-cell:nth-child(1) img,
  .strip-cell:nth-child(2) img,
  .strip-cell:nth-child(3) img{ left:0; top:0; width:100%; height:100%; }
}

/* 04-piede-pagine-interne.css */

/* =========================================================
   FOOTER — 73:110 / 73:111
   fascia #7B7B7B alta 336px, testo Albert Sans 500 24px
   ========================================================= */
.site-footer{
  background:var(--footer-bg); color:var(--white);
  min-height:clamp(220px, calc(336 * var(--px)), 336px);
  font-size:var(--fs-footer); font-weight:500; line-height:1.21;
  padding-block:clamp(20px, calc(35 * var(--px)), 35px);
}
.site-footer .wrap{ padding-inline:clamp(20px, calc(90 * var(--px)), 90px); }
.footer-inner{ display:flex; justify-content:space-between; gap:40px; }
.footer-brand img{
  width:clamp(90px, calc(137 * var(--px)), 137px);
  height:auto;
  margin-bottom:clamp(14px, calc(11 * var(--px)), 11px);
}
/* 73:113: la cassa e' larga 585px. Su richiesta del cliente i dati
   fiscali stanno su una riga propria, senza separare il numero dall'etichetta. */
.footer-brand address{ font-style:normal; max-width:clamp(240px, calc(585 * var(--px)), 585px); }
.footer-fiscale{ white-space:nowrap; }
/* Proposta D (19/10): recapiti e dati fiscali in gruppi; dati fiscali piu'
   piccoli ma mai sotto i 16 px (ne' sopra il testo, sotto i 1134 px) */
.footer-contatti, .footer-fiscale{ display:block; margin-top:.5em; }
.footer-fiscale{ font-size:max(min(1em, 16px), .8em); }
.footer-et{ font-weight:400; }
.footer-brand a{ text-decoration:none; }
.footer-brand a:hover{ text-decoration:underline; }
.footer-nav{
  display:flex; flex-direction:column; align-items:flex-end;
  text-align:right;
  /* 363:3284: la colonna attacca a y4970, cioe' 99px sotto il bordo
     della fascia (4871) e 64px sotto il logo */
  padding-top:clamp(0px, calc(58 * var(--px)), 58px);
}
.footer-nav > a{ text-decoration:none; }
.footer-nav > a:hover{ text-decoration:underline; }
.footer-legal{ margin:clamp(18px, calc(34 * var(--px)), 34px) 0 0; }  /* 73:114 a y5144 */
.footer-legal a{ text-decoration:none; }
.footer-legal a:hover{ text-decoration:underline; }



/* Sulla home la fascia grigia della navbar finisce a 86, non a 98: gli ultimi
   12px sono gia' la foto dell'hero. L'hero sale di 12 e i suoi contenuti
   scendono della stessa misura, cosi' le quote restano quelle di tavola. */
.ft-home .site-header{ background:none; border-bottom:0; }
.ft-home .site-header::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:clamp(48px, calc(86 * var(--px)), 86px);
  background:var(--nav-bg); z-index:-1;
}
.ft-home .hero{
  margin-top:calc(-12 * var(--px));
  height:clamp(430px, calc(1050 * var(--px)), 1050px);
}
.ft-home .hero-s{     top:calc(-114 * var(--px)); }
.ft-home .hero-photo{ top:0; }
.ft-home .hero-logo{  top:clamp(16px, calc(45 * var(--px)), 45px); }
.ft-home .hero-title{ top:clamp(110px, calc(238 * var(--px)), 238px); }
.ft-home .scroll-cue{ top:67.4%; }

/* =========================================================
   VARIANTI DELLA BARRA DI CHIUSURA
   Nel file Figma la fascia non e' identica su tutte le tavole: cambiano il
   margine sinistro del logo e le quote dei tre blocchi. Qui ci sono le
   varianti, applicate con una classe sul body.
   ========================================================= */
/* Servizi, Verniciatura, Contatti: logo a x96, 29 dal bordo */
.ft-b .site-footer{ padding-block:calc(29 * var(--px)) clamp(20px, calc(33 * var(--px)), 33px); }
.ft-b .site-footer .wrap{ padding-inline:clamp(20px, calc(96 * var(--px)), 96px); }
.ft-b .footer-brand img{ margin-bottom:clamp(14px, calc(29 * var(--px)), 29px); }
.ft-b .footer-nav{ padding-top:clamp(0px, calc(62 * var(--px)), 62px); }
.ft-b .footer-legal{ margin-top:clamp(18px, calc(38 * var(--px)), 38px); }
.pagina-servizi .footer-legal{ margin-top:clamp(18px, calc(34 * var(--px)), 34px); }
/* a tavola la colonna dei link sta 3px piu' in basso su "verniciatura" */
.pagina-lv .footer-nav{ padding-top:clamp(0px, calc(65 * var(--px)), 65px); }
.pagina-lv .footer-legal{ margin-top:clamp(18px, calc(34 * var(--px)), 34px); }
/* Chi siamo: logo a x141, blocchi piu' alti */
.ft-c .site-footer{ padding-block:calc(30 * var(--px)) clamp(20px, calc(34 * var(--px)), 34px); }
.ft-c .site-footer .wrap{ padding-inline:clamp(20px, calc(141 * var(--px)), 141px); }
.ft-c .footer-brand img{ margin-bottom:clamp(14px, calc(21 * var(--px)), 21px); }
.ft-c .footer-nav{ padding-top:clamp(0px, calc(44 * var(--px)), 44px); }
.ft-c .footer-legal{ margin-top:clamp(18px, calc(54 * var(--px)), 54px); }
/* Realizzazioni: fascia Figma 69:49 a y3673, alta 336. */
.ft-d .site-footer{
  min-height:clamp(220px, calc(336 * var(--px)), 336px);
  padding-block:calc(29 * var(--px)) clamp(12px, calc(20 * var(--px)), 20px);
}
.ft-d .site-footer .wrap{ padding-inline:clamp(20px, calc(92 * var(--px)), 92px); }
.ft-d .footer-brand img{ margin-bottom:clamp(14px, calc(29 * var(--px)), 29px); }
.ft-d .footer-nav{ padding-top:clamp(0px, calc(48 * var(--px)), 48px); }
.ft-d .footer-legal{ margin-top:clamp(18px, calc(50 * var(--px)), 50px); }
.ft-d .rz-banner{ margin-bottom:0; }

:root{ --ease-soft:cubic-bezier(.22,.61,.36,1); }

/* =========================================================
   PAGINE INTERNE — navbar 108px con logo (Figma 73:50/73:51)
   bordo #AAA invece di #ACABAB, logo 137x70 a 90,19
   ========================================================= */
.site-header--inner{
  height:clamp(64px, calc(108 * var(--px)), 108px);
  border-color:#AAAAAA;   /* resta chiaro: --grey-btn ora e' scuro */
}
.site-header--inner .header-inner{
  justify-content:space-between;
  padding-inline:clamp(16px, calc(90 * var(--px)), 90px)
                 clamp(16px, calc(65 * var(--px)), 65px);
}
.header-logo{
  width:clamp(92px, calc(137 * var(--px)), 137px);
  flex:0 0 auto;
}
.header-logo img{ width:100%; height:auto; }

/* 05-chi-siamo.css */

/* =========================================================
   CHI SIAMO — artboard Figma 4:2 (1512 x 4373)
   ========================================================= */

/* --- fascia "Benvenuti in Sial" ---------------------------
   30/9/2026, proposta E scelta dalla cliente (verifiche/benvenuti/proposte/):
   rosso del logo al posto del rosso acceso, foto intera in apertura che
   sfuma nel rosso, titolo bianco sulla sfumatura e testo bianco a destra,
   un po' piu' marcato (500) come chiesto. Misure in px della tavola 1512. */
.sec-benvenuti{
  position:relative;
  min-height:clamp(520px, calc(982 * var(--px)), 982px);
  padding-bottom:calc(44 * var(--px));
  overflow:hidden;
  background:linear-gradient(180deg, #C8111F 0%, var(--red-card) 40%, #B20E1B 100%);
}
.sec-benvenuti .benv-s{
  position:absolute; left:calc(-668 * var(--px)); top:calc(-70 * var(--px));
  width:151.6%; height:calc(1164 * var(--px));
  object-fit:cover; max-width:none; pointer-events:none;
  filter:brightness(0); opacity:.16;   /* S rosso scuro, tono su tono */
}
/* margini 83 / 106; titolo nella colonna da 560, testo nel resto */
.benv-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:calc(560 * var(--px)) minmax(0,1fr);
  column-gap:calc(60 * var(--px)); align-items:start;
  padding-inline:clamp(20px, calc(83 * var(--px)), 83px)
                 clamp(20px, calc(106 * var(--px)), 106px);
}
.benv-grid{ display:contents; }
.benv-title{
  position:relative; z-index:2; grid-column:1; grid-row:1;
  margin:0; padding-top:calc(385 * var(--px));   /* sulla sfumatura della foto */
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(32px, calc(85 * var(--px)), 85px);
  line-height:1.282;
  color:var(--white);
}
.benv-title span{ display:block; }
/* foto 700x467 in alto a sinistra: sfuma a destra (maschera) e in basso nel
   rosso (velo). Oltre i 1134 px il blocco centrato lascia rosso ai lati,
   quindi sfuma anche a sinistra, fino a 90 px. */
.benv-foto{
  position:absolute; left:0; top:0; z-index:1; margin:0; overflow:hidden;
  width:calc(700 * var(--px)); height:calc(467 * var(--px));
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 clamp(0px, (100vw - 1134px) / 2, 90px), #000 82%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 clamp(0px, (100vw - 1134px) / 2, 90px), #000 82%, transparent);
}
.benv-foto img{
  position:absolute; left:0; top:0; width:100%; height:100%;
  max-width:none; object-fit:cover; object-position:center 40%;
}
.benv-foto::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(194,15,29,0) 55%, rgba(194,15,29,.82) 82%, var(--red-card) 100%);
}
.benv-testo{
  position:relative; z-index:2; grid-column:2; grid-row:1;
  padding-top:calc(90 * var(--px));
  color:var(--white); font-weight:500;
  font-size:clamp(16px, calc(25 * var(--px)), 25px); line-height:1.35;
  max-width:calc(823 * var(--px));
}
.benv-testo p{ margin:0 0 calc(30 * var(--px)); }   /* stacco di una riga */
.benv-testo p:last-child{ margin-bottom:0; }

/* --- etichette con stella (312:695 / 312:623) ------------- */
.etichetta{
  display:flex; align-items:center;
  gap:calc(21 * var(--px));              /* stella 51-128, testo da 150 */
  padding-left:calc(9 * var(--px));
  margin:0 0 calc(30 * var(--px));
  color:#1E1E1E; font-weight:600;   /* testo scuro, stella rossa: 5,5:1 anche sul grigio delle Certificazioni (19/10/2026) */
  font-size:clamp(15px, calc(35.5 * var(--px)), 35.5px);
}
.sec-valori .etichetta{ margin-bottom:calc(29 * var(--px)); }
.sec-certificazioni .etichetta{ margin-bottom:calc(85 * var(--px)); }   /* 82:40 a y2308 */
.etichetta img{
  width:calc(77.71 * var(--px)); height:auto; flex:none;
  position:relative; top:calc(-5 * var(--px));   /* a progetto la stella sta piu' in alto del testo */
}
.sec-valori .etichetta{
  position:relative; top:calc(-2 * var(--px));
  margin-bottom:calc(27 * var(--px));
}
.sec-certificazioni .etichetta{ position:relative; top:calc(2 * var(--px)); }
.sec-storia .etichetta{ position:relative; top:calc(9 * var(--px)); }

/* --- sezione valori — fondo #D9D9D9 ---------------------- */
.sec-valori{
  position:relative;
  background:var(--nav-bg);
  /* a progetto la fascia chiara attacca a 1101, non subito sotto l'hero:
     nei primi 11px si vede il grigio della fascia successiva */
  border-top:calc(11 * var(--px)) solid var(--grigio-cert);
  padding-block:calc(50 * var(--px)) calc(60 * var(--px));  /* 1101 -> 2083 */
  overflow:hidden;
}
.sec-valori .wrap{
  padding-inline:clamp(20px, calc(42 * var(--px)), 42px)
                 clamp(20px, calc(52 * var(--px)), 52px);
}
.titolo-sezione{
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-display); line-height:var(--lh-display);
  color:var(--red-card);
  margin:0;
}
/* titolo 25:39 — cassa 841 che finisce a x1424 */
.sec-valori .titolo-sezione{
  text-align:center;
  max-width:calc(841 * var(--px));
  margin-left:auto; margin-right:calc(36 * var(--px));
}
/* il verniciatore scontornato sta dietro le schede, a sinistra */
.verniciatore{
  position:absolute; z-index:1; pointer-events:none;
  /* nel PDF questa foto non e' appoggiata dritta: e' specchiata e ruotata
     di ~15,6 gradi. La matrice viene dal transform dell'immagine (xref 819):
     708x642,6 con origine a 518,61 / 1440,45. */
  left:0; top:0;
  width:calc(708 * var(--px));
  height:calc(642.6 * var(--px));
  transform-origin:0 0;
  transform:translate(calc(518.61 * var(--px)), calc(339.45 * var(--px)))
            matrix(-0.96304, 0.26889, 0.26890, 0.96312, 0, 0);
}
.valori{
  position:relative; z-index:2;
  display:grid;
  /* a progetto le tre schede non sono uguali: 281 / 282 / 274 */
  grid-template-columns:calc(281 * var(--px)) calc(282 * var(--px)) calc(274 * var(--px));
  gap:calc(57 * var(--px));
  width:calc(951 * var(--px));            /* schede da x509 a x1460 */
  margin:calc(1 * var(--px)) 0 0 auto;
}
/* dal render: la cassa di testo comincia 257px sotto la cima dell'icona */
.valore{ position:relative; padding-top:calc(264 * var(--px)); }   /* 229:258 a y1730 */
/* ellisse grigia 95:90 — 309x271, il titolo sta nella parte bassa */
.valore-bolla{
  position:absolute; left:50%; top:calc(52 * var(--px));
  translate:-50% 0;
  width:calc(319 * var(--px)); height:calc(279 * var(--px));
  border-radius:50%;
  background:var(--red-card);   /* rosso come su telefono, scelta della cliente 19/10/2026 */
  display:flex; align-items:flex-end; justify-content:center;
  /* dal render: il titolo finisce 87px sopra il fondo dell'ellisse */
  padding-bottom:calc(87 * var(--px));
}
.valore-bolla span{
  color:#FFF9F9; font-weight:400;               /* 47:9658 — 35px */
  font-size:clamp(16px, calc(35 * var(--px)), 35px);
  line-height:1;
}
.valore-icona{
  position:absolute; left:50%; top:0; translate:-50% 0; z-index:2;
  width:calc(165 * var(--px)); height:auto;
}
/* icona rossa su un tondo grigio, se no sparisce nell'ellisse rossa (proposta A, 19/10/2026) */
.valore:nth-child(n) .valore-icona{
  width:calc(150 * var(--px)); aspect-ratio:1; top:0;
  padding:calc(24 * var(--px));
  /* tondo come sfondo e non border-radius: sull'<img> il raggio taglia il disegno */
  background:radial-gradient(circle closest-side, var(--nav-bg) calc(100% - 1px), transparent 100%);
  object-fit:contain;
}

/* le tre schede hanno misure leggermente diverse sull'artboard:
   ellissi 319/297/287, icone 165/145/139 */
.valore:nth-child(2) .valore-bolla{
  top:calc(62 * var(--px)); width:calc(297 * var(--px)); height:calc(265 * var(--px));
}
.valore:nth-child(2) .valore-icona{ width:calc(145 * var(--px)); }
.valore:nth-child(3) .valore-bolla{
  top:calc(62 * var(--px)); width:calc(287 * var(--px)); height:calc(265 * var(--px));
}
.valore:nth-child(3) .valore-icona{ width:calc(139 * var(--px)); }
/* riquadro testo 229:258 — bordo rosso, fondo chiaro, raggio 10 */
.valore-testo{
  position:relative; z-index:3;
  margin:0;                    /* senza questo i margini del <p> aggiungono 48px */
  margin:0;
  border:calc(2 * var(--px)) solid var(--red-card);
  border-radius:calc(30 * var(--px));           /* 229:258 */
  background:#EDEDEC;
  /* la cassa di testo 229:256 e' larga 267 dentro un riquadro di 281:
     restano 7px per lato */
  padding:calc(11 * var(--px)) calc(2 * var(--px))
          calc(4 * var(--px)) calc(12.1 * var(--px));
  color:#3D3D3D;
  font-size:clamp(14px, calc(25 * var(--px)), 25px);   /* 229:256 */
  line-height:1.2;                 /* passo 30 come a progetto */
  min-height:calc(292 * var(--px));               /* fondo a y2021 */
}
/* le tre casse partono da 522,1 / 863,7 / 1193,7 e la terza e' piu' alta */
.valore:nth-child(2) .valore-testo{ padding-left:calc(15.7 * var(--px)); }

/* 06-chi-siamo-2.css */
/* CHI SIAMO — seguito di 05-chi-siamo.css */
.valore:nth-child(3) .valore-testo{
  padding-left:calc(6.7 * var(--px));
  padding-top:calc(16 * var(--px));
  margin-top:calc(-5 * var(--px));
  min-height:calc(297 * var(--px));
}

/* --- sezione certificazioni — fondo #999494 -------------- */
.sec-certificazioni{
  position:relative;
  background:var(--grigio-cert);
  padding-block:calc(64 * var(--px)) calc(56 * var(--px));  /* 2083 -> 3055 */
  overflow:hidden;
}
.sec-certificazioni .wrap{ padding-inline:clamp(20px, calc(42 * var(--px)), 42px); }
/* ellisse chiara 70:27 dietro i bollini */
.cert-onda{
  position:absolute; z-index:1; pointer-events:none;
  /* l'onda e' il tracciato esatto della tavola (611,1 / 1973,4, 729,9x1198,7),
     ritagliato dalla fascia: sopra e sotto sfuma nel grigio delle altre bande */
  left:max(calc(611.1 * var(--px)), calc(50% - 756 * var(--px) + 611.1 * var(--px)));
  top:calc(-109.6 * var(--px));
  width:calc(729.9 * var(--px)); height:calc(1198.7 * var(--px));
  background:url("../img/cs-onda.svg") no-repeat 0 0 / 100% 100%;
}
.sec-certificazioni > .wrap{ position:relative; z-index:2; }
.sec-certificazioni .titolo-sezione{
  margin:0 0 calc(40 * var(--px)) calc(46 * var(--px));
}
.cert-grid{
  display:grid; grid-template-columns:1fr calc(347 * var(--px));
  gap:calc(60 * var(--px));
  align-items:start;
  margin-top:calc(54 * var(--px));   /* bollini a y2435 */
}
.cert-intro{
  margin:0 0 calc(36 * var(--px)) calc(168 * var(--px));
  position:relative; top:calc(-2 * var(--px));
  max-width:calc(797 * var(--px));
  color:#000;
  font-size:var(--fs-body);          /* corpo di progetto, passo 36 */
}
/* 315:529: le spunte attaccano a x157, il testo a 213 e arriva a 1004 */
.cert-lista{
  position:relative; top:calc(-3 * var(--px));
  list-style:none; padding:0; display:grid;
  gap:calc(38 * var(--px));
  margin:0 0 0 calc(115 * var(--px));
  max-width:calc(847 * var(--px));
}
.cert-lista li{
  display:grid; grid-template-columns:calc(56 * var(--px)) 1fr;
  gap:0; align-items:start;
  color:#000;
  font-size:var(--fs-body);
  line-height:1.2;
}
/* a progetto ogni voce e' una cassa di testo a se': la prima va a capo
   dopo "benessere e" e le tre voci non sono spaziate in modo uniforme */
.cert-lista li:nth-child(1){ max-width:calc(828 * var(--px)); }
.cert-lista li:nth-child(2){ margin-top:calc(5 * var(--px)); }
.cert-lista li:nth-child(3){ margin-top:calc(-5 * var(--px)); }
.cert-lista img{ width:100%; height:auto; margin-top:.15em; position:relative; }
/* a progetto le spunte stanno piu' in alto del testo, e non allo stesso
   modo nelle tre voci: 2568 / 2677 / 2784 contro un testo a 2581/2695/2802 */
.cert-lista li:nth-child(1) img{ top:calc(-11 * var(--px)); }
.cert-lista li:nth-child(2) img{ top:calc(-17 * var(--px)); }
.cert-lista li:nth-child(3) img{ top:calc(-15 * var(--px)); }
/* 94:50 / 94:51: due schede 217x270 a x1123, con 23 di stacco */
.bollini{ display:grid; gap:calc(20 * var(--px)); width:calc(218 * var(--px)); margin-top:calc(1 * var(--px)); }
/* card bianca 202:293 — 223x279 */
.bollino{
  background:var(--white);
  border-radius:calc(24 * var(--px));
  box-shadow:0 calc(6 * var(--px)) calc(14 * var(--px)) rgba(0,0,0,.18);
  height:calc(273 * var(--px));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(14 * var(--px));
  padding:calc(18 * var(--px));
  text-align:center;
}
.bollino img{ width:auto; max-height:calc(115 * var(--px)); }
/* 315:737: il marchio ESG e' 119x125 e sta 8px a destra del centro;
   69:68: quello ISO e' 184x115. Le due etichette sono colorate. */
.bollino:first-child img{ width:calc(119 * var(--px)); height:calc(125 * var(--px)); max-height:none; margin-left:calc(16 * var(--px)); }
.bollino:last-child img{ width:calc(184 * var(--px)); height:calc(115 * var(--px)); max-height:none; }
.bollino:last-child{ height:calc(272 * var(--px)); }
.bollino:last-child span{ color:#0F5BAA; }
/* a tavola i due contenuti non sono centrati allo stesso modo nella card */
.bollino img, .bollino span{ position:relative; }
.bollino:first-child img{  top:calc(-4 * var(--px)); }
.bollino:first-child span{ top:calc(-3 * var(--px)); }
.bollino:last-child img{   top:calc(9 * var(--px)); }
.bollino:last-child span{  top:calc(17 * var(--px)); }
.bollino span{
  color:#28803F; font-weight:500;
  font-size:clamp(12px, calc(19 * var(--px)), 19px);   /* mai sotto i 12px */
  line-height:1.26;
  letter-spacing:.02em;
}

/* Coordinate verificate con MCP Figma il 7 settembre 2026.
   Gli aggiustamenti desktop non cambiano il flusso responsive. */
@media (min-width:901px){
  .sec-storia .etichetta, .sec-certificazioni .etichetta{ font-size:calc(35 * var(--px)); font-weight:700; }
  .sec-certificazioni{ height:calc(972 * var(--px)); }
  .sec-storia{ height:calc(982 * var(--px)); }
  .valore-testo{ border-width:calc(1 * var(--px)); padding-top:calc(12.613 * var(--px)); padding-left:calc(12.057 * var(--px)); padding-right:0; }
  .valore:nth-child(2) .valore-testo{ padding-left:calc(15.672 * var(--px)); }
  .valore:nth-child(3) .valore-testo{ padding-left:calc(6.739 * var(--px)); padding-top:calc(17.613 * var(--px)); }
  .valore-bolla{ left:calc(-11 * var(--px)); top:calc(57.507 * var(--px)); translate:0 0;
    width:calc(308.897 * var(--px)); height:calc(271.367 * var(--px)); padding:0; }
  .valore:nth-child(2) .valore-bolla{ left:calc(-6.423 * var(--px)); top:calc(67.129 * var(--px));
    width:calc(298.311 * var(--px)); height:calc(267.518 * var(--px)); }
  .valore:nth-child(3) .valore-bolla{ left:calc(-15.355 * var(--px)); top:calc(61.355 * var(--px));
    width:calc(289.651 * var(--px)); height:calc(267.518 * var(--px)); }
  .valore-bolla span{ position:absolute; left:calc(60.625 * var(--px)); top:calc(116.438 * var(--px)); line-height:1.2; white-space:nowrap; }
  .valore:nth-child(2) .valore-bolla span{ left:calc(65.436 * var(--px)); top:calc(106.815 * var(--px)); }
  .valore:nth-child(3) .valore-bolla span{ left:calc(65.436 * var(--px)); top:calc(112.589 * var(--px)); }
  .bollini{ width:calc(223 * var(--px)); margin-left:calc(-3 * var(--px)); margin-top:calc(-4.406 * var(--px)); gap:calc(12.899 * var(--px)); }
  .bollino, .bollino:last-child{ position:relative; height:calc(279.101 * var(--px)); border-radius:calc(50 * var(--px)); }
  .bollino:first-child img{ position:absolute; left:calc(59 * var(--px)); top:calc(56 * var(--px)); margin:0; }
  .bollino:first-child span{ position:absolute; top:calc(195 * var(--px)); left:calc(40 * var(--px)); }
  .bollino:last-child img{ position:absolute; left:calc(20 * var(--px)); top:calc(63 * var(--px)); }
  .bollino:last-child span{ position:absolute; left:calc(33 * var(--px)); top:calc(199 * var(--px)); width:calc(171 * var(--px)); }
  /* 20 px di tavola ingranditi di 16/15: al 75% fanno 16 px, non 15 */
  .bollino span{ font-size:calc(20 * var(--px) * 16 / 15); font-weight:400; letter-spacing:0; line-height:1.2; }
}

/* --- sezione storia — fondo #D5D6D6 ---------------------- */
.sec-storia{
  position:relative;
  background:var(--grigio-storia);
  padding-block:calc(58 * var(--px)) calc(80 * var(--px));  /* 3055 -> 4037 */
  overflow:hidden;
}
.sec-storia .wrap{ padding-inline:clamp(20px, calc(42 * var(--px)), 42px); }
.storia-testa{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.sec-storia .titolo-sezione{ text-align:right; margin-right:calc(42 * var(--px)); }

/* Figma 326:2436: frame a x=-14, foto a x=344, anteprima a x=1185.
   La versione senza JS resta una fascia scorribile con tutte le didascalie. */
.timeline{
  position:relative; display:flex; gap:calc(30 * var(--px));
  margin-top:calc(65.9 * var(--px));
  padding:0 0 calc(12 * var(--px));
  overflow-x:auto; scrollbar-width:none;
}
.timeline::-webkit-scrollbar{ display:none; }
.timeline figure{
  position:relative; margin:0; flex:0 0 calc(811 * var(--px));
  width:calc(811 * var(--px)); height:calc(628 * var(--px));
  overflow:hidden; background:white; transform-origin:0 0;
}
.timeline img{
  position:absolute; display:block; max-width:none; object-fit:fill;
  /* L'export Figma include gia' il ritaglio del contenitore 811 x 628. */
  left:0; top:0; width:100%; height:100%;
}
.timeline figcaption{
  position:absolute; inset:0; margin:0; padding:0; color:#000;
  font-size:calc(24 * var(--px)); line-height:calc(var(--caption-line, 40) * var(--px));
  text-align:center;
}
.timeline figcaption::before{
  content:""; position:absolute; background:#D9D9D9; border-radius:calc(50 * var(--px));
  left:calc(var(--pill-x) * var(--px)); top:calc(var(--pill-y) * var(--px));
  width:calc(var(--pill-w) * var(--px)); height:calc(var(--pill-h) * var(--px));
}
.timeline figcaption span{
  position:absolute; left:calc(var(--text-x) * var(--px)); top:calc(var(--text-y) * var(--px));
  width:calc(var(--text-w) * var(--px));
}
.timeline figure:first-child figcaption{ text-align:left; }
.timeline.is-ready{
  display:block; width:calc(1526 * var(--px)); height:calc(640 * var(--px));
  margin-left:calc(-56 * var(--px)); padding:0;
  overflow:hidden; touch-action:pan-y pinch-zoom; cursor:grab; user-select:none;
}
.timeline.is-ready figure{ position:absolute; left:0; top:0; }
/* Figma: EASE_IN_AND_OUT_BACK, 300 ms. Anche la scala usa la stessa curva. */
.timeline.is-animated figure{ transition:transform 300ms cubic-bezier(.68,-.55,.265,1.55); }
/* Su telefono, dopo il trascinamento: la corsa riparte gia' lanciata, il
   rimbalzo resta solo all'arrivo. */
.timeline.is-animated.is-rilascio figure{ transition-timing-function:cubic-bezier(.34,1.56,.64,1); }
.timeline.is-dragging{ cursor:grabbing; }
.timeline:focus-visible{ outline:2px solid var(--blu); outline-offset:4px; }
.timeline-status{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* 07-chi-siamo-3.css */
/* CHI SIAMO — seguito di 06-chi-siamo-2.css */
@media (prefers-reduced-motion:reduce){
  .timeline.is-animated figure{ transition:none; }
}

.timeline figure:nth-child(1){--pill-x:128; --pill-y:533; --pill-w:563; --pill-h:53; --text-x:150; --text-y:544; --text-w:581; --caption-line:28.8;}
.timeline figure:nth-child(2){--pill-x:141; --pill-y:545; --pill-w:563; --pill-h:53; --text-x:41; --text-y:550; --text-w:761; }
.timeline figure:nth-child(3){--pill-x:125; --pill-y:447; --pill-w:561; --pill-h:157; --text-x:130; --text-y:447; --text-w:545; }
.timeline figure:nth-child(4){--pill-x:110; --pill-y:525; --pill-w:563; --pill-h:75; --text-x:118; --text-y:525; --text-w:543; }
.timeline figure:nth-child(5){--pill-x:118; --pill-y:524.996; --pill-w:563; --pill-h:75; --text-x:135; --text-y:545.996; --text-w:529; }
.timeline figure:nth-child(6){--pill-x:112; --pill-y:525; --pill-w:563; --pill-h:75; --text-x:91; --text-y:544; --text-w:605; }
.timeline figure:nth-child(7){--pill-x:147; --pill-y:522; --pill-w:563; --pill-h:75; --text-x:218; --text-y:540; --text-w:421; }
.timeline figure:nth-child(8){--pill-x:105; --pill-y:537; --pill-w:563; --pill-h:75; --text-x:113; --text-y:536; --text-w:537; }
.timeline figure:nth-child(9){--pill-x:124; --pill-y:525; --pill-w:563; --pill-h:75; --text-x:92; --text-y:543; --text-w:628; }
.timeline figure:nth-child(10){--pill-x:133; --pill-y:534; --pill-w:603; --pill-h:81; --text-x:304; --text-y:553; --text-w:289; }
.timeline-nav{
  display:flex; justify-content:flex-end; align-items:center;
  gap:calc(16 * var(--px)); margin-top:calc(16 * var(--px));
  margin-right:calc(-13 * var(--px));    /* 393:636: 1369-1483 a y3942 */
}
.timeline-nav button{
  background:none; border:0; padding:0; cursor:pointer;
  width:calc(114 * var(--px)); min-width:44px;
  transition:translate .18s var(--ease-soft), opacity .18s ease;
}
.timeline-nav button:hover{ translate:6px 0; }
.timeline-nav button[disabled]{ opacity:.35; cursor:default; translate:0 0; }
.timeline-nav .prev img{ rotate:180deg; }
.timeline-nav img{ width:100%; height:auto; display:block; }

/* 08-servizi.css */

/* =========================================================
   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; }

/* 09-servizi-2.css */
/* 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;
}

/* 10-servizi-3.css */
/* 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; }
}

/* 11-lavorazioni.css */

/* =========================================================
   LAVORAZIONI — artboard Figma "VERNICIATURA" 32:87 (1512 × 3325)
   Fondo unico #D9D9D9 sotto un hero fotografico a tutta larghezza.
   ========================================================= */
.sec-lv{ background:var(--nav-bg); }

/* --- hero fotografico (44:545) ----------------------------- */
.lv-hero{
  position:relative;
  height:clamp(420px, calc(634 * var(--px)), 634px);   /* 108 → 742 */
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  text-align:center;
}
.lv-hero > img{
  position:absolute; left:calc(-75 * var(--px)); top:calc(-312 * var(--px));
  /* Mantiene il ritaglio della tavola e copre anche gli schermi più larghi. */
  width:calc(100% + 168 * var(--px)); height:calc(100% + 312 * var(--px));
  max-width:none; object-fit:cover;
}
/* a progetto la foto e' velata di bianco all'8%: senza, il rosso risulta
   piu' saturo di quanto renda la tavola */
.lv-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:#fff; opacity:.08; pointer-events:none;
}
.lv-hero-testo{
  position:relative; z-index:2; padding-inline:var(--gutter);
  left:calc(8 * var(--px));              /* a progetto il blocco non e' sull'asse pagina */
  margin-bottom:calc(128 * var(--px));   /* 32:88 non e'centrato: sta 64 piu' in alto */
}
/* 32:88 — Allerta Stencil 88px, interlinea 70, bianco centrato */
.lv-hero h1{
  margin:0;
  color:var(--white);
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-display);
  line-height:var(--lh-display);
  text-shadow:0 calc(2 * var(--px)) calc(10 * var(--px)) rgba(0,0,0,.35);
}
.lv-hero h1 span{ display:block; }
/* 32:91 — anche il sottotitolo e' Allerta Stencil, 40px */
.lv-hero p{
  margin:calc(22 * var(--px)) 0 0;
  color:var(--white);
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(18px, calc(40 * var(--px)), 40px);
  line-height:var(--lh-display);
  text-shadow:0 calc(2 * var(--px)) calc(10 * var(--px)) rgba(0,0,0,.35);
}
/* la freccia: cerchio 71,7 centrato nella larghezza dell'hero,
   anello bianco attorno al disco #D9D9D9 */
.lv-hero .scroll-cue{
  top:auto; bottom:calc(37.15 * var(--px));
  left:50%;
  width:calc(71.7 * var(--px)); aspect-ratio:1;
  border:calc(5.4 * var(--px)) solid #FFF; border-radius:50%;
  display:grid; place-items:center;
}
.lv-hero .scroll-cue svg{ width:100%; height:100%; }
.lv-hero .scroll-cue .cue-disco{ fill:rgba(217,217,217,.5); }
.lv-hero .scroll-cue .cue-punta{ fill:#FFF; transform:scale(1.1); transform-origin:center; }

/* freccia "indietro" nella navbar (44:636) */
.header-indietro{
  width:clamp(34px, calc(56 * var(--px)), 56px);
  flex:0 0 auto; margin-right:calc(22 * var(--px));
  transition:transform .18s var(--ease-soft);
}
.header-indietro img{ width:100%; height:auto; }
.header-indietro:hover{ transform:translateX(-4px); }
.site-header--inner .header-inner.header-inner--indietro{ justify-content:flex-start; }
.header-inner--indietro .nav{ margin-left:auto; }

/* --- titoletti rossi di sezione (32:122 / 32:124 / 128:33) -- */
/* 32:122 / 32:124 / 128:33 — Albert Sans SemiBold 34px */
.lv-titolo{
  margin:calc(15 * var(--px)) 0 0; text-align:center;
  color:var(--red-btn); font-weight:600;
  font-size:clamp(18px, calc(34 * var(--px)), 34px);
  /* a tavola i tre titoletti non stanno sull'asse della colonna */
  position:relative; left:calc(-40 * var(--px));
}
.lv-colonne > div:nth-child(1) .lv-titolo{ left:calc(27 * var(--px)); }
.lv-colonne > div:nth-child(2) .lv-titolo{ left:calc(-16 * var(--px)); }
.lv-titolo--scuro{ color:var(--red-card); }
.lv-colonne .lv-titolo{ margin-top:0; }

/* --- elenco vantaggi con spunta verde ---------------------- */
.lv-vantaggi{
  list-style:none; padding:0;
  width:calc(779 * var(--px)); max-width:100%;
  /* 32:120 — icone a x435, testo a x471: non e' centrato */
  margin:calc(60 * var(--px)) 0 0 calc(321 * var(--px));
  display:grid; gap:calc(2 * var(--px));
}
.lv-vantaggi li{
  /* icone 36x38 a x435, testo a x471 (nodi 130:54 e seguenti) */
  display:grid; grid-template-columns:calc(36 * var(--px)) 1fr;
  gap:0; align-items:center;
  color:var(--ink);
  font-size:clamp(13px, calc(24 * var(--px)), 24px); line-height:1.5;
}
.lv-vantaggi img{ height:calc(38 * var(--px)); width:auto; }   /* riquadro 36x38 */

/* --- striscia di tre foto (254:283 / 254:291 / 254:296) ----- */
/* le foto hanno coordinate assolute sull'artboard, quindi la striscia
   deve partire dal bordo pagina e non dal wrap con padding */
.lv-striscia{
  position:relative;
  height:calc(505 * var(--px));   /* 455 + aria in fondo */
  margin:calc(52 * var(--px)) calc(-1 * var(--gutter)) 0;   /* la foto centrale a y1178 */
  overflow:hidden;
}
.lv-striscia img{
  position:absolute; object-fit:cover; border-radius:0;
}
.lv-striscia .sx{  left:calc(-145 * var(--px)); top:calc(63 * var(--px));
                   width:calc(526 * var(--px)); height:calc(350 * var(--px)); }
.lv-striscia .mid{ left:calc(370 * var(--px)); top:calc(1 * var(--px));
                   width:calc(682 * var(--px)); height:calc(455 * var(--px));
                   border-radius:calc(50 * var(--px));
                   z-index:2; }
/* a tavola la foto di destra e' tagliata sopra e sotto (visibile 1240-1589) */
.lv-striscia .dx, .lv-striscia .fuori{  left:calc(1018.5 * var(--px)); top:calc(36.9 * var(--px));
                   width:calc(588 * var(--px)); height:calc(391.2 * var(--px));
                   clip-path:inset(calc(28.1 * var(--px)) 0 calc(14.1 * var(--px)) 0); }
/* Le tre foto ruotano fra le tre posizioni come la storia: main.js sposta le
   classi sx / mid / dx e la foto che passa da un lato all'altro scorre dietro. */
.lv-striscia .sx, .lv-striscia .dx{ z-index:1; }
.lv-striscia .passa{ z-index:0; }
/* Dalla quarta foto in poi: aspettano invisibili dietro quella di destra. */
@media (min-width:901px){
  .lv-striscia .fuori{ z-index:0; opacity:0; pointer-events:none; }
}
.lv-striscia.is-ready{ cursor:grab; touch-action:pan-y pinch-zoom; user-select:none; }
.lv-striscia.is-dragging{ cursor:grabbing; }
.lv-striscia:focus-visible{ outline:2px solid var(--blu); outline-offset:-4px; }
.lv-striscia.is-animated img{
  transition-property:left, top, width, height, border-radius, clip-path, opacity;
  transition-duration:300ms;
  transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);
}
@media (prefers-reduced-motion:reduce){
  .lv-striscia.is-animated img{ transition:none; }
}

/* --- foto a schermo intero (main.js) ----------------------- */
.si-apre{ cursor:zoom-in; }
/* dove la fascia si trascina resta la manina */
.timeline.is-ready .si-apre, .lv-striscia.is-ready .si-apre{ cursor:inherit; }
html.lightbox-aperta{ overflow:hidden; }
.lightbox{
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:56px 72px; border:0;
  background:rgba(18,18,18,.94); color:#fff;
  overscroll-behavior:contain;
}
.lightbox[open]{ display:grid; place-items:center; animation:sial-lightbox .2s ease; }
.lightbox::backdrop{ background:transparent; }
@keyframes sial-lightbox{ from{ opacity:0; } }
.lightbox-foto{
  margin:0; width:100%; height:100%; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  touch-action:pinch-zoom;
}
.lightbox-foto img{
  width:auto; height:auto; max-width:100%; max-height:100%; min-height:0;
  object-fit:contain; border-radius:0; user-select:none; -webkit-user-drag:none;
}
.lightbox-foto figcaption{ max-width:60ch; font-size:17px; line-height:1.4; text-align:center; }
.lightbox button{
  position:absolute; width:48px; height:48px; padding:0;
  border:0; border-radius:50%; background:none; color:#fff; cursor:pointer;
}
.lightbox button svg{ width:100%; height:100%; display:block; }
.lightbox button:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
/* Il cerchio intorno alla X e' fisso: prima era solo l'anello di focus e
   spariva cliccando altrove. */
.lightbox .lightbox-chiudi{ top:12px; right:12px; border:2px solid currentColor; }
/* niente secondo anello col focus: il cerchio resta uno, si riempie appena */
.lightbox .lightbox-chiudi:focus-visible{ outline:0; background:rgba(255,255,255,.2); }
.lightbox-chiudi span::before, .lightbox-chiudi span::after{
  content:""; position:absolute; left:50%; top:50%; width:22px; height:2px;
  background:currentColor; translate:-50% -50%; rotate:45deg;
}
.lightbox-chiudi span::after{ rotate:-45deg; }
.lightbox-prev, .lightbox-next{ top:50%; translate:0 -50%; display:none; }
.lightbox.is-gruppo .lightbox-prev, .lightbox.is-gruppo .lightbox-next{ display:block; }
.lightbox-prev{ left:12px; }
.lightbox-next{ right:12px; }
.lightbox-next svg{ rotate:180deg; }
.lightbox-conta{ position:absolute; left:50%; bottom:14px; translate:-50% 0; margin:0; font-size:15px; }

/* 12-lavorazioni-2.css */
/* LAVORAZIONI — seguito di 11-lavorazioni.css */
@media (max-width:900px){
  .lightbox{ padding:60px 12px 64px; }
  .lightbox-foto figcaption{ font-size:15px; }
  /* su telefono le frecce scendono in basso, ai lati del contatore */
  .lightbox-prev, .lightbox-next{ top:auto; bottom:6px; translate:0; }
}
@media (prefers-reduced-motion:reduce){
  .lightbox[open]{ animation:none; }
}

/* --- due colonne di elenchi numerati ----------------------- */
.lv-colonne{
  display:grid;
  grid-template-columns:calc(570 * var(--px)) calc(576 * var(--px));
  gap:calc(175 * var(--px));
  justify-content:center;
  margin-top:0;
  align-items:start;
}
.lv-colonne ol{
  margin:calc(70 * var(--px)) 0 0; padding-left:calc(30 * var(--px));
  color:var(--ink);
  font-size:clamp(13px, calc(24 * var(--px)), 24px); line-height:1.667;
}
.lv-colonne li{ margin-bottom:0; padding-left:calc(6 * var(--px)); }   /* a progetto il passo resta 40 */
.lv-colonne > div:first-child ol{ margin-top:calc(79 * var(--px)); }
.lv-colonne li:last-child{ margin-bottom:0; }
.lv-colonne b{ font-weight:600; }
/* Foto tolta dalla pagina su richiesta del cliente (24 settembre 2026): la regola
   resta per le pagine WordPress gia' salvate finche' il blocco non viene rimosso. */
.lv-finitura{
  width:calc(458 * var(--px)); height:calc(305 * var(--px));
  object-fit:cover; border-radius:0;
  margin:calc(-125 * var(--px)) 0 0 calc(38 * var(--px));  /* a x152, y2628, sotto la colonna di sinistra */
}

/* 13-realizzazioni.css */

/* =========================================================
   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; }
}

/* 14-contatti.css */

/* =========================================================
   CONTATTI — artboard Figma 39:476 (1512 × 1318)
   Fascia unica #E2E2E1: recapiti a sinistra, mappa a destra.
   ========================================================= */
.sec-ct{
  background:var(--bg);
  min-height:clamp(420px, calc(874 * var(--px)), 874px);   /* 108 -> 982 */
}
/* margini di questa fascia: 96 a sinistra, 51 a destra (39:477 / 39:536) */
.sec-ct .wrap{
  padding-inline:clamp(20px, calc(96 * var(--px)), 96px)
                 clamp(20px, calc(51 * var(--px)), 51px);
}
.ct-griglia{
  display:grid;
  grid-template-columns:calc(597 * var(--px)) 1fr;
  gap:calc(63 * var(--px));
  align-items:start;
  padding-block:calc(194 * var(--px)) calc(86 * var(--px));   /* titolo a y299 */
}
/* 39:504 — Allerta Stencil 54px */
.ct-titolo{
  margin:0 0 calc(16 * var(--px));
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(26px, calc(54 * var(--px)), 54px);
  line-height:1;
  color:var(--red-card);
}
/* 39:505 — Albert Sans Medium 28px */
.ct-dati{
  margin:0; padding-top:calc(2 * var(--px)); font-style:normal;
  color:#3d3d3d; font-weight:500;
  font-size:clamp(14px, calc(28 * var(--px)), 28px);
  line-height:1.21;                  /* passo 34 come a progetto */
}
.ct-dati p{ margin:0 0 calc(36 * var(--px)); }
.ct-dati p:last-child{ margin-bottom:0; }
.ct-dati a{ text-decoration:none; }
.ct-dati a:hover{ text-decoration:underline; }
/* Proposta C (19/10/2026): orari e recapiti in due colonne, etichette
   sottili a sinistra e dati allineati a destra. */
.ct-tab{ display:grid; grid-template-columns:max-content 1fr; column-gap:1.2em; row-gap:.3em; margin:0; }
.ct-tab dt{ font-weight:400; }
.ct-tab dd{ margin:0; }
.ct-tab .sep, .ct-tab .sep + dd{ margin-top:calc(36 * var(--px)); }

.ct-mappa{
  display:grid; grid-template-rows:minmax(0, 1fr);
  position:relative; margin:calc(16 * var(--px)) 0 0;
  height:calc(529 * var(--px));
  min-height:330px; min-width:0;
  border-radius:0; overflow:hidden; box-shadow:none;
  color:var(--ink); font-family:var(--font-body);
}
.ct-mappa-vista{ position:relative; overflow:hidden; background:#d7d7d4; }
.ct-mappa iframe{ display:block; width:100%; height:100%; border:0; }
/* 28/9/2026: tolta la fascia verde «Apri in Google Maps». La scheda di
   Google dentro la mappa ha già il collegamento alla mappa grande. */
/* Anteprima del modulo Contatti: stessi font e colori, campi leggibili a ogni larghezza. */
.sec-ct--form > .wrap{ padding-top:clamp(36px, calc(80 * var(--px)), 80px); }
.sec-ct--form .ct-griglia{ padding-top:clamp(40px, calc(72 * var(--px)), 72px); }
.ct-form{
  width:100%; max-width:1000px; margin-top:clamp(24px, calc(36 * var(--px)), 36px);
  color:var(--ink); font-family:var(--font-body);
  font-size:clamp(16px, calc(20 * var(--px)), 20px); line-height:1.5;
}
/* 28/9/2026: il titolo del modulo apre la pagina ed e' grande quanto
   «CONTATTI», che ora sta sopra i recapiti. */
.ct-form .ct-form-titolo{
  margin:0 0 calc(16 * var(--px)); font-family:var(--font-display); font-weight:400;
  font-size:clamp(26px, calc(54 * var(--px)), 54px); line-height:1;
  color:var(--red-card);
}
.ct-form .ct-form-intro{ margin:0 0 24px; font-size:16px; }
.ct-form-campi{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.ct-form-campo{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.ct-form-campo label{ font-weight:600; }
.ct-form-campo--messaggio{ grid-column:1 / -1; }
.ct-form-campo input, .ct-form-campo textarea{
  display:block; box-sizing:border-box; width:100%; min-width:0;
  padding:12px 16px; border:1px solid var(--footer-bg); border-radius:8px;
  background:var(--white); color:var(--ink); font:inherit;
}
.ct-form-campo input{ min-height:52px; }
.ct-form-campo textarea{ min-height:168px; resize:vertical; }
.ct-form-consenso{ display:flex; align-items:flex-start; gap:12px; margin-top:24px; font-size:16px; }
.ct-form-consenso input{
  flex:0 0 20px; width:20px; height:20px; margin:2px 0 0;
  accent-color:var(--red-btn); cursor:pointer;
}
.ct-form-consenso label{ cursor:pointer; }
.ct-form-consenso a{ color:var(--red-card); text-decoration:underline; text-underline-offset:3px; }
.ct-form :is(input,textarea,a):focus-visible{ outline:3px solid var(--red-card); outline-offset:3px; }
/* Campo trappola per i robot: fuori schermo, non nascosto (i robot saltano i campi hidden). */
.ct-form-trappola{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ct-form-esito{ margin:0; font-weight:600; }
.ct-form-esito--ok{ color:var(--ink); }
.ct-form-esito--dati, .ct-form-esito--troppi, .ct-form-esito--errore{ color:var(--red-card); }
.ct-form-azioni{ display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px; margin-top:28px; }
.ct-form .ct-form-invia{
  min-height:52px; padding:14px 28px; border:0; font-size:18px;
  line-height:1.3; box-shadow:none;
}
.ct-form .ct-form-invia:disabled{ cursor:not-allowed; opacity:1; transform:none; box-shadow:none; }
@media (max-width:900px){
  .ct-form-campi{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .ct-form-azioni{ align-items:flex-start; flex-direction:column; }
}

/* 15-mobile.css */

/* =========================================================
   MOBILE — tavole Figma Page 2, 8:2 (393–395 px), adattate da 320 a 900 px.
   Quote fluide e contenuti a flusso preservano leggibilità e testi aggiornati.
   ========================================================= */
@media (max-width:900px){
  :root{ --gutter:22px; }

  /* --- rimesse in riga le regole scritte a misura d'artboard --- */
  .sec-chisiamo .split{ margin-right:0 !important; }
  .sec-chisiamo .split-text{ margin-top:0; }
  .sec-chisiamo .split-text p{ margin-bottom:1em; }
  .strip-cell{ height:120px; }
  .sv-foto-colonna{ position:static; height:auto; margin-top:0; display:grid; gap:14px; }
  .sv-foto-colonna img:nth-child(1),
  .sv-foto-colonna img:nth-child(2),
  .sv-foto-colonna img:nth-child(3){ position:static; left:auto; top:auto; width:100%; height:190px; clip-path:none; }
  .sv-scheda{ min-height:0; height:auto; padding:24px 26px; }
  .acapo{ display:none; }
  .sv-imb-foto{ height:230px; }
  .sv-imb-foto img{ position:static; left:auto; top:auto; width:100%; height:100%; }
  .sv-coppia > *:nth-child(1), .sv-coppia > *:nth-child(2){ padding-inline:20px; }
  .sv-imballaggio .sv-blocco{ padding:24px 20px; height:auto; }
  .sv-coppia .sv-blocco{ height:auto; }
  .sv-coppia > * > img,
  .sv-coppia > *:nth-child(1) img, .sv-coppia > *:nth-child(2) img{ position:static; left:auto; top:auto; width:100%; height:180px; margin:20px 0 0; }
  .sv-coppia, .sv-imballaggio{ margin-left:0; }
  .rz-item[data-i] .car-slide img{ position:static; left:auto; top:auto; width:100%; height:100%; }
  .strip-cell:nth-child(1) img,
  .strip-cell:nth-child(2) img,
  .strip-cell:nth-child(3) img{ position:static; left:auto; top:auto; width:100%; height:100%; }
  .cert-lista{ margin-left:0; max-width:none; top:0; }
  .bollini{ width:auto; margin-top:0; }
  .bollino img, .bollino span,
  .bollino:first-child img, .bollino:first-child span,
  .bollino:last-child img, .bollino:last-child span{ top:0; }
  .timeline{ padding-left:0; margin-right:0; scroll-padding-inline-start:0; }
  .timeline figure{ transform:none; height:auto; }
  .timeline img{ position:static; left:auto; top:auto; width:100%; }
  .sv-imballaggio{ margin-left:0; }
  .sv-coppia > *:nth-child(2) img{ width:100%; height:180px; }
  .lv-colonne > div:first-child ol{ margin-top:20px; }
  .lv-colonne li{ margin-bottom:16px; }
  :is(#pre-trattamento, [data-sial-anchor="pre-trattamento"]) .sv-testa,
  :is(#sabbiatura, [data-sial-anchor="sabbiatura"]) .sv-testa{ margin-top:0; }
  .sec-valori{ border-top:0; }
  body{ font-size:17px; line-height:1.35; }

  .site-header, .ft-home .site-header{ height:64px; min-height:64px; background:var(--nav-bg); }
  .ft-home .site-header::before{ display:none; }
  .header-inner{ justify-content:space-between; padding-inline:12px; }
  .header-logo--mobile{ display:block; }
  .header-inner--indietro .burger{ margin-left:auto; }

  .burger{
    display:block; position:relative; z-index:40;
    width:44px; height:44px; padding:9px 8px;
    background:none; border:0; cursor:pointer;
  }
  .burger span{
    display:block; height:2.5px; background:#000; border-radius:2px;
    margin:4px 0; transition:transform .22s ease, opacity .22s ease;
  }
  .burger[aria-expanded="true"] span{ background:#fff; }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  /* menu aperto: pannello rosso a tutto schermo che scende dall'alto, voci bianche */
  .nav{
    position:fixed; inset:0; z-index:35;
    flex-direction:column; justify-content:safe center; align-items:center; gap:8px;
    padding:80px 20px 24px; overflow-y:auto;
    background:var(--red-card);
    visibility:hidden;
    translate:0 -100%; transition:translate .28s ease, visibility 0s linear .28s;
  }
  .nav.is-open{ visibility:visible; translate:0 0; transition:translate .28s ease; }
  .nav a{ display:flex; align-items:center; justify-content:center; min-height:44px; font-size:19px; color:#fff; letter-spacing:.06em; }
  .nav a:hover, .nav a:focus-visible{ border-bottom-color:#fff; }
  .nav .nav-home{ display:flex; }
  @media (prefers-reduced-motion:reduce){ .nav, .nav.is-open{ transition:none; } }

  .ft-home .hero{
    height:auto; min-height:calc(100svh - 64px); margin-top:0;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:60px 22px 24px;
  }
  .ft-home .hero-s, .ft-home .hero-logo{ display:none; }
  .ft-home .hero-photo{ inset:0; width:100%; height:100%; opacity:1; }
  .hero-photo img{ left:0; top:0; width:100%; height:100%; object-position:center; }
  .ft-home .hero::after{
    content:""; position:absolute; inset:40% 0 0; pointer-events:none;
    background:linear-gradient(transparent,rgba(0,0,0,.55));
  }
  .ft-home .hero-title{
    position:relative; z-index:2; left:auto; top:auto; width:100%; max-width:420px; margin:0 auto;
    font-size:clamp(20px,5.6vw,28px); line-height:1.35; text-align:center; color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,.45);
  }
  .scroll-cue{ position:relative; left:auto; top:auto; margin:28px auto 0; translate:0; transform:none; width:44px; }
  .scroll-cue:hover{ transform:translateY(5px); }
  .ft-home .scroll-cue{ top:auto; }

  .sec-chisiamo{ padding-block:32px 36px; }
  .sec-comelavoriamo{ padding-block:40px; }
  .sec-comelavoriamo .wrap{ padding-inline:22px; }
  .sec-comelavoriamo .display{ text-align:center; }
  .split{ grid-template-columns:1fr !important; gap:26px !important; margin-top:26px !important; }
  .display{ font-size:clamp(24px,5.6vw,30px);   /* 24: testo grande, il rosso basta a 3:1 */ line-height:1.25; text-align:center; }
  .sec-chisiamo .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:14px !important; align-items:center; }
  .sec-chisiamo .split-text{ font-size:clamp(14px,3.6vw,16px); line-height:1.4; }
  .sec-comelavoriamo .split-text{ font-size:16px; line-height:1.5; }

  .btn-overlay{
    position:static; width:auto; max-width:100%;
    margin:16px auto 0; display:flex;
  }
  .btn{ min-height:52px; font-size:17px; }
  .sec-chisiamo .btn{ min-height:44px; padding:10px 12px; font-size:14px; line-height:1.3; text-align:center; }
  .btn-w388, .btn-w433{ width:auto; padding-inline:26px; }
  .sv-centro .btn{ width:auto; min-height:44px; }
  .sec-comelavoriamo .btn{ min-height:48px; padding:12px 24px; font-size:16px; line-height:1.3; }
  /* su telefono niente foto: resta il bottone, sotto il testo e a sinistra */
  .sec-comelavoriamo .split{ margin-right:0; }
  .sec-comelavoriamo .split-media img{ display:none; }
  .sec-comelavoriamo .btn-overlay{ display:inline-flex; margin:0; }

  .card{ width:calc(100% - 44px); max-width:600px; aspect-ratio:auto; border-radius:20px; }
  .card-body, .card-perche .card-body, .card-lavori .card-body{ padding:32px 24px; }
  .card-body p{ max-width:none; font-size:15px; line-height:1.4; }
  .card-body .btn{ margin-top:30px; }
  .card-perche .card-body p{ margin-top:20px; text-align:center; }
  .card-body .btn{ width:100%; max-width:260px; min-height:44px; padding:10px 14px; font-size:14px; }
  .carousel{ width:100%; margin-top:26px; }

  /* I pallini restano piccoli come a progetto, ma il bordo trasparente
     porta l'area toccabile a 24px senza spostare il disegno. */
  .car-dots{ gap:10px; }
  .car-dots button{
    width:10px; height:10px; aspect-ratio:auto;
    box-sizing:content-box; border:7px solid transparent;
    background-clip:padding-box;
  }
  .card-lavori .car-nav{ width:34px; padding:5px; }
  .carousel .car-dots button,
  .carousel .car-dots button[aria-current="true"]{ background-clip:padding-box; }
  .sv-pannello .car-dots button{ width:10px; }

  .strip{ grid-template-columns:repeat(3,1fr); margin-top:32px; }
  .strip-cell{ height:clamp(72px,22vw,130px); }

  body[class] .site-footer{ min-height:0; padding-block:20px; font-size:14px; line-height:1.3; }
  .site-footer .wrap.footer-inner{ padding-inline:12px; }
  .footer-inner{ flex-direction:column; gap:16px; }
  .footer-brand{ width:100%; }
  .footer-brand address{ max-width:none; overflow-wrap:anywhere; font-weight:400; }
  .footer-et{ font-weight:300; }
  .footer-fiscale{ font-size:12px; }
  .site-footer .footer-brand img{ width:70px; margin-bottom:10px; }
  .site-footer .footer-nav{ align-items:flex-start; text-align:left; padding-top:0; }
  .footer-nav > a{ display:none; }
  html:not(.sial-js) .footer-nav > a{ display:block; }
  html:not(.sial-js) .burger{ display:none; }
  body[class] .footer-legal{ margin-top:0; font-size:14px; }
  .footer-legal a,
  .footer-legal .privacy-open{ display:inline-block; padding-block:8px; }

  /* ---- pagine interne ---- */
  .site-header--inner{ height:64px; min-height:64px; }
  .site-header--inner .header-inner{ padding-inline:18px 12px; }
  .header-logo{ width:110px; }

  /* proposta E: la foto apre la pagina e sfuma nel rosso, il titolo sta
     sulla sfumatura; la S qui non c'e'. Tavola 390: foto 340, titolo a 232. */
  .sec-benvenuti{ min-height:calc(100svh - 64px); padding:min(59.5vw, 390px) 0 36px; }
  .sec-benvenuti .benv-s{ display:none; }
  .benv-inner{ position:static; display:block; padding-inline:28px; }
  .benv-title{ padding-top:0; font-size:clamp(34px,13vw,58px); line-height:1.05; max-width:none; text-align:center; }
  .benv-grid{ display:block; margin-top:20px; }
  .benv-foto{ right:0; width:auto; height:min(87.2vw, 572px); -webkit-mask-image:none; mask-image:none; }
  .benv-foto img{ object-position:40% 30%; }
  .benv-foto::after{ background:linear-gradient(180deg, rgba(194,15,29,0) 35%, rgba(194,15,29,.82) 68%, var(--red-card) 100%); }
  .benv-testo{ padding-top:0; font-size:15px; line-height:1.4; max-width:620px; margin-inline:auto; }
}

/* 16-mobile-2.css */
/* MOBILE — seguito di 15-mobile.css */
@media (max-width:900px){
  .benv-testo p{ margin-bottom:18px; }

  .etichetta{ gap:10px; margin-bottom:20px; font-size:15px; }
  .etichetta img{ width:28px; top:0; }
  .sec-valori .etichetta,
  .sec-certificazioni .etichetta,
  .sec-storia .etichetta{ top:0; margin-bottom:22px; }

  .sec-valori{ padding-block:40px 44px; }
  .sec-valori .wrap,
  .sec-certificazioni .wrap,
  .sec-storia .wrap{ padding-inline:22px; }
  .titolo-sezione{ font-size:clamp(24px,6.3vw,32px); line-height:1.3; }
  .sec-valori .titolo-sezione{ text-align:center; max-width:268px; margin-inline:auto; font-size:clamp(24px,7.63vw,30px); line-height:1.33; }
  /* Il verniciatore resta solo su desktop: su telefono la cliente lo ha tolto (30/9/2026). */
  .verniciatore{ display:none; }
  .valori{
    grid-template-columns:1fr; gap:24px;
    width:auto; max-width:600px; margin:48px auto 0;
  }
  .valore{ display:grid; grid-template-columns:66px minmax(0,1fr); column-gap:0; align-items:center; min-height:118px; padding-top:0; margin-left:12px; }
  /* Su mobile tutte le schede prevalgono sulle varianti desktop per posizione. */
  .valore:nth-child(n) .valore-bolla{ left:0; top:50%; translate:0 -50%; width:82px; height:82px; padding:0; align-items:center; z-index:4; }
  .valore-bolla span{ font-size:15px; }
  .valore:nth-child(n) .valore-icona{ left:-6px; top:calc(50% - 50px); translate:0; width:38px; height:46px; object-fit:contain; z-index:5; }
  .valore-testo{
    grid-column:2; border-width:1px; border-radius:30px; padding:10px 14px 10px 22px;
    font-size:14px; line-height:1.4; min-height:0;
  }
  .valore:nth-child(2) .valore-testo,
  .valore:nth-child(3) .valore-testo{
    padding:10px 14px 10px 22px; margin-top:0; min-height:0;
  }
  /* Qualita': proposta C "rosso" (scelta della cliente, 30/9/2026); colori
     comuni col computer in 05-chi-siamo.css. Qui solo misure del telefono. */
  .valore-bolla span{ font-size:13px; }
  .valore:nth-child(n) .valore-icona{
    left:-14px; top:calc(50% - 66px); width:52px; height:52px; padding:8px;
  }

  .sec-certificazioni{ padding-block:40px 44px; }
  /* 417:802 — l'arco chiaro entra da sinistra e esce sotto i bollini */
  .cert-onda{
    left:-84px; top:27px;
    width:430px; height:887px;
  }
  .sec-certificazioni .titolo-sezione{ margin:0 0 20px; text-align:center; }
  .cert-grid{ grid-template-columns:1fr; gap:30px; }
  .cert-intro{ margin:0 0 22px; max-width:none; font-size:15px; }
  .cert-lista{ gap:18px; }
  .cert-lista li{ grid-template-columns:26px 1fr; gap:12px; font-size:14px; }
  .cert-lista li:nth-child(1){ max-width:none; }
  .cert-lista li:nth-child(2),.cert-lista li:nth-child(3){ margin-top:0; }
  .cert-lista li img{ top:0; }
  .bollini{ grid-template-columns:1fr 1fr; gap:20px; width:100%; max-width:350px; margin-inline:auto; }
  .bollino, .bollino:last-child{ height:190px; border-radius:20px; padding:16px; gap:20px; }
  .bollino:first-child{ order:2; }
  .bollino:nth-child(n) img{ width:100%; height:84px; max-width:110px; max-height:none; margin:0; object-fit:contain; }
  .bollino span{ font-size:14px; }

  .sec-storia{
    padding-block:40px 44px;
    background-image:url("../img/cs-storia-s.png");
    background-repeat:no-repeat; background-position:center bottom 24px;
    background-size:100% calc(100% - 100px);
  }
  .storia-testa{ flex-direction:column; align-items:flex-start; gap:10px; }
  .sec-storia .titolo-sezione{ text-align:right; align-self:flex-end; margin-right:0; }
  .timeline, .timeline.is-ready{ width:100%; margin:30px 0 0; padding:0; gap:12px; }
  .timeline figure{ flex:0 0 86%; width:86%; height:auto; border-radius:0; }
  .timeline img{ position:static; width:100%; height:clamp(280px,100vw,425px); object-fit:cover; }
  .timeline figcaption, .timeline figure:first-child figcaption{
    position:absolute; inset:auto 8% 18px; padding:6px 10px; font-size:14px; line-height:1.25;
    text-align:center; background:#D9D9D9; border:1px solid #bcbcbc; border-radius:24px;
  }
  .timeline figcaption::before{ display:none; }
  .timeline figcaption span{ position:static; width:auto; }
  .timeline-nav button{ width:70px; min-height:44px; display:flex; align-items:center; }

  /* ---- SERVIZI ---- */
  .sec-sv .wrap{ padding-inline:22px; }
  .onda{ height:46px; }
  .sv-hero{ padding-block:36px 40px; }
  .sv-carte{
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 24px;
    max-width:520px; margin:28px auto 0;
  }
  /* Velo scuro (08-servizi.css) a misura di telefono: carta 3:4, niente
     pulsante «Scopri» (la carta intera resta il link). */
  .sv-carta{ height:auto; aspect-ratio:3 / 4; border-radius:18px; }
  .sv-carta-link::after{ border-radius:18px; }
  .sv-carta-link::before{ display:none; }
  .sv-carta i{ top:10px; left:10px; height:36px; min-width:36px; padding:8px; }
  .sv-carta-testo{ --sfuma:36px; min-height:62%; padding:var(--sfuma) 12px 12px; border-radius:0 0 18px 18px; }
  .sv-carta b{ font-size:clamp(15px,4.4vw,18px); line-height:1.2; overflow-wrap:normal; }
  .sv-carta span{ font-size:13px; margin-top:4px; }
  .sv-cue{ margin-top:32px; }

  .sv-testa{ padding-top:20px; }
  .sv-titolo{ left:0; line-height:1.25; }
  :is(#pre-trattamento, [data-sial-anchor="pre-trattamento"]) .sv-titolo,
  :is(#sabbiatura, [data-sial-anchor="sabbiatura"]) .sv-titolo,
  :is(#verniciatura, [data-sial-anchor="verniciatura"]) .sv-titolo,
  :is(#imballaggio, [data-sial-anchor="imballaggio"]) .sv-titolo{ left:0; }
  .sv-titolo,
  :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,8.6vw,40px); }
  .sv-etichetta{ font-size:15px; text-align:center; left:0; }
  /* 30/9/2026: icone piu' piccole, la parola conta piu' del disegno (08-servizi.css) */
  .sv-icona{ height:26px; margin-top:10px; }
  :is(#pre-trattamento, [data-sial-anchor="pre-trattamento"]) .sv-icona,
  :is(#sabbiatura, [data-sial-anchor="sabbiatura"]) .sv-icona,
  :is(#verniciatura, [data-sial-anchor="verniciatura"]) .sv-icona,
  :is(#imballaggio, [data-sial-anchor="imballaggio"]) .sv-icona{ transform:none; left:0; top:0; }

  .sv-pannello{
    width:auto; padding:22px 18px 26px; border-radius:16px;
    margin:22px auto 0; max-width:520px; height:auto;
  }
  .sv-pannello .carousel{ height:auto; aspect-ratio:auto; margin:0; width:auto; }
  .sv-pannello .car-track{ height:auto; }
  .sv-pannello .car-slide{ height:auto; }
  .sv-pannello .car-nav{ top:auto; bottom:0; translate:0 0; }
  .sv-pannello .car-dots{ position:static; translate:0; margin:14px 48px 0; min-height:44px; justify-content:center; align-items:center; }
  .card-lavori .carousel{ width:min(100%,240px); left:0; aspect-ratio:601 / 440; margin-top:20px; }
  .sv-pannello .car-nav{ width:44px; background:none; }
  .sv-pannello .car-nav svg{ width:100%; height:100%; }
  .sv-pannello .car-nav svg path{ fill:#8A8A8A; }
  /* le slide sono impaginate in assoluto a misura d'artboard: qui tornano
     a flusso normale */
  .sv-slide{ display:block; height:auto; }
  .sv-slide h3{
    position:static; width:fit-content; max-width:100%; height:auto; margin:0 auto 14px;
    padding:9px 18px; border-radius:9px; font-size:16px; display:flex;
  }
  .sv-slide p{ position:static; width:auto; margin:0 0 18px; font-size:15px; line-height:1.5; text-align:left; }
  .sv-slide img{ position:static; width:100%; height:200px; border-radius:12px; }

  .sv-due{ grid-template-columns:minmax(0,1fr); gap:24px; margin:26px 0 0; }
  .sv-scheda{ margin-top:0; padding:22px; border-radius:26px; font-size:14px; line-height:1.5; height:auto; }
  /* 30/9/2026, richiesta del cliente: le tre foto scorrono come la striscia di
     Lavorazioni (17-mobile-3.css), grande quella al centro e le due laterali
     che spuntano. 04-striscia.js parte dalla foto centrale. */
  .sv-foto-colonna{
    position:relative; display:flex; gap:12px; margin-inline:-22px; padding-inline:11%;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;
  }
  .sv-foto-colonna::-webkit-scrollbar{ display:none; }
  .sv-foto-colonna img:nth-child(n){ flex:0 0 100%; width:100%; height:auto; aspect-ratio:3 / 2; border-radius:18px; scroll-snap-align:center; scroll-snap-stop:always; }

  .sv-coppia{ grid-template-columns:minmax(0,1fr); gap:0; margin-top:26px; margin-left:0; background:var(--scheda-sv); border:1px solid var(--scheda-sv); border-radius:28px; overflow:hidden; }
  .sv-blocco{ padding:24px 20px; border-radius:26px; font-size:14px; line-height:1.5; }
  .sv-coppia .sv-blocco{ background:transparent; border:0; border-radius:0; }
  .sv-coppia .sv-blocco{ height:auto; }
  .sv-coppia > *:nth-child(1), .sv-coppia > *:nth-child(2){ padding:24px 20px; margin-top:0; }
  /* dopo la prima foto lo stesso stacco che chiude la scheda dopo la seconda */
  .sv-coppia > *:nth-child(1){ padding-bottom:0; }
  .sv-blocco img{ width:100%; height:180px; margin-top:20px; }
  /* le due foto larghe quanto la scheda, come quella di Imballaggio (30/9/2026) */
  .sv-coppia > *:nth-child(n) > img{ position:static; left:auto; top:auto; width:100%; max-width:none; height:auto; aspect-ratio:3 / 2; margin:20px 0 0; border-radius:12px; }
  /* Il pulsante di Verniciatura sta a 28px dalle schede e, con il margine,
     a 28px anche dal fondo della fascia: il contenitore ne da' solo 13 di tavola. */
  .sv-centro{ margin-top:28px; margin-bottom:calc(28px - 13 * var(--px)); }

  .sv-imballaggio{ grid-template-columns:minmax(0,1fr); gap:0; margin:26px 0 0; padding:22px; background:var(--scheda-sv); border:1px solid var(--scheda-sv); border-radius:28px; }
  .sv-imballaggio .sv-blocco{ padding:22px 0 0; height:auto; border:0; background:none; }
  .sv-imb-foto{ width:100%; height:auto; aspect-ratio:304 / 256; margin-top:0; border-radius:12px; }
  .sv-imballaggio > img{ height:230px; }

  /* ---- LAVORAZIONI ---- */
  .lv-hero{ height:auto; min-height:calc(100svh - 64px); justify-content:flex-end; padding:60px 22px 28px; }
  /* 475:1671 — foto ruotata di 90°, 847 × 476px prima della rotazione.
     Il centro è spostato a destra; la foto parte sopra la barra mobile. */
  .lv-hero > img{
    left:55.85%; top:calc(50% - 29px);
    width:max(calc(100svh - 5px),198.6vw); height:auto;
    aspect-ratio:16 / 9; object-fit:cover;
    transform:translate(-50%,-50%) rotate(90deg);
  }
  .lv-hero h1{ font-size:clamp(28px,7.6vw,38px); line-height:1.5; }
  .lv-hero-testo{ left:0; padding:0; margin:0; }
}

/* 17-mobile-3.css */
/* MOBILE — seguito di 16-mobile-2.css */
@media (max-width:900px){
  .lv-titolo,
  .lv-colonne > div:nth-child(1) .lv-titolo,
  .lv-colonne > div:nth-child(2) .lv-titolo{ left:0; }
  .lv-hero .scroll-cue{ left:auto; bottom:auto; width:52px; border:2px solid white; }
  .lv-hero .scroll-cue .cue-disco{ fill:rgba(217,217,217,.25); }
  .lv-hero .scroll-cue .cue-punta{ fill:#fff; }
  .lv-hero p{ font-size:clamp(15px,4vw,20px); line-height:1.4; margin-top:18px; }
  /* Il disco resta di 34px come a tavola, ma l'area toccabile arriva a 44
     senza spostare il logo: il riempimento e' compensato dal margine. */
  .header-indietro{
    width:34px; margin-right:7px; margin-left:-5px;
    box-sizing:content-box; padding:5px;
  }
  .sec-lv .wrap{ display:flex; flex-direction:column; }
  .lv-titolo{ font-size:24px; }   /* 24: testo grande, il rosso basta a 3:1 */
  .lv-vantaggi{ width:auto; margin:22px 0 0; gap:12px; }
  .lv-vantaggi li{ grid-template-columns:26px minmax(0,1fr); gap:10px; font-size:15px; align-items:start; }
  .lv-vantaggi img{ width:26px; height:28px; margin-top:0; }

  /* Su telefono le tre foto scorrono col dito come la storia, agganciate al centro. */
  .lv-striscia, .lv-striscia.is-ready{
    height:auto; margin-top:30px; display:flex; gap:12px; padding-inline:11%;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    scrollbar-width:none; touch-action:auto; cursor:auto;
  }
  .lv-striscia::-webkit-scrollbar{ display:none; }
  .lv-striscia img,
  .lv-striscia .sx, .lv-striscia .mid, .lv-striscia .dx, .lv-striscia .fuori{
    position:static; left:auto; top:auto; flex:0 0 100%; width:100%; height:auto;
    aspect-ratio:3 / 2; border-radius:18px; box-shadow:none; clip-path:none;
    scroll-snap-align:center; scroll-snap-stop:always;
  }

  .lv-colonne{ display:contents; }
  .lv-colonne > div{ margin-top:30px; }
  .lv-colonne > div:nth-child(2){ order:2; }
  .lv-colonne ol{ margin-top:20px; padding-left:22px; font-size:14px; line-height:1.5; }
  .lv-finitura{ order:1; align-self:center; width:65%; max-width:280px; height:auto; aspect-ratio:3 / 2; margin:24px 0 0; }

  /* ---- REALIZZAZIONI ---- */
  .rz-titolo{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); }
  .sec-rz .wrap{ padding-inline:12px; }
  .rz-galleria{
    position:static; height:auto; margin:40px 0 0;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px;
    grid-template-rows:clamp(112px,37vw,260px) repeat(4,clamp(96px,31vw,220px));
    grid-template-areas:"a b" "c d" "c e" "f g" "h g";
  }
  .rz-item{
    position:static !important;
    left:auto !important; top:auto !important;
    width:auto !important; height:100% !important; min-width:0;
  }
  .rz-item[data-i="0"]{ grid-area:a; }
  .rz-item[data-i="1"]{ grid-area:b; }
  .rz-item[data-i="2"]{ grid-area:c; }
  .rz-item[data-i="3"]{ grid-area:d; }
  .rz-item[data-i="4"]{ grid-area:e; }
  .rz-item[data-i="5"]{ grid-area:f; }
  .rz-item[data-i="6"]{ grid-area:g; }
  .rz-item[data-i="7"]{ grid-area:h; }
  .rz-item .car-track, .rz-item .car-slide{ border-radius:10px; }
  .rz-item .car-nav{ width:36px; padding:8px; }
  .rz-item .car-prev{ left:0; }
  .rz-item .car-next{ right:0; }
  /* Pallini delle gallerie come quelli del banner: 7px a 6px di passo.
     Il bordo trasparente da 3px allarga un po' l'area toccabile. */
  .rz-item .car-dots{ bottom:8px; gap:0; }
  .rz-item .car-dots button{ width:7px; height:7px; border-width:3px; }
  .rz-banner{ width:100%; margin:0; aspect-ratio:366 / 276; }
  .rz-banner .car-nav{ width:44px; }
  .rz-banner .is-slideshow .car-dots{ left:50%; translate:-50% 0; gap:6px; }
  .rz-banner .is-slideshow .car-dots span{ width:7px; height:7px; }

  /* ---- CONTATTI ---- */
  .sec-ct{ min-height:0; }
  .sec-ct .wrap{ padding-inline:22px; }
  .ct-mappa{ width:100%; max-width:298px; height:auto; aspect-ratio:298 / 383; margin:0 auto; }
  .ct-griglia{
    grid-template-columns:minmax(0,1fr); gap:28px;
    padding-block:26px 40px;
  }
  .ct-titolo, .ct-form .ct-form-titolo{ font-size:30px; text-align:center; margin-bottom:20px; }
  .ct-dati{ font-size:16px; overflow-wrap:anywhere; }
  .ct-dati p{ margin-bottom:20px; }
  .ct-dati p:last-child{ margin-bottom:0; }
  .ct-tab{ grid-template-columns:minmax(0,1fr); row-gap:0; }
  .ct-tab dd{ margin-bottom:.5em; }
  .ct-tab .sep{ margin-top:12px; }
  .ct-tab .sep + dd{ margin-top:0; }
}

/* Intestazione condivisa: stesso asse e stessa misura del logo in ogni pagina. */
.site-header, .site-header--inner, .ft-home .site-header{
  height:clamp(64px, calc(108 * var(--px)), 108px);
  background:var(--nav-bg); border:1px solid var(--nav-border);
}
.ft-home .site-header::before{ display:none; }
@media (min-width:901px){
  .ft-home .site-header .header-logo{ display:none; }
  .ft-home .site-header .header-inner{ justify-content:flex-end; }
}
.site-header .header-inner{
  width:100%; max-width:calc(1512 * var(--px)); margin-inline:auto;
  justify-content:space-between;
  padding-inline:clamp(16px, calc(71 * var(--px)), 71px)
                 clamp(16px, calc(65 * var(--px)), 65px);
}
.header-logo, .header-logo--mobile{
  display:block; width:clamp(92px, calc(137 * var(--px)), 137px);
}
@media (max-width:900px){
  .site-header, .site-header--inner, .ft-home .site-header{ height:64px; }
  .site-header .header-inner{ padding-inline:12px; }
  .header-logo{ width:110px; }
}
@media (max-width:900px){ .card-perche .card-body p{ left:0; } }

/* A 320px conserviamo le due colonne senza tagliare le descrizioni. */
@media (max-width:360px){
  .sv-carta i{ top:8px; left:8px; height:30px; min-width:30px; padding:6px; }
  .sv-carta-testo{ --sfuma:28px; padding-inline:8px; padding-bottom:10px; }
}

/* 18-wordpress.css */

/* =========================================================
   INNESTI PER WORDPRESS
   Il foglio qui sopra è quello del sito statico, invariato.
   Sotto ci sono solo le correzioni necessarie perché i wrapper
   aggiunti dall'editor a blocchi non alterino il disegno.

   Tutte le regole stanno dentro :where(), quindi valgono zero in
   specificità: annullano gli stili del core senza mai prendere il
   sopravvento sulle misure di progetto scritte sopra.
   ========================================================= */

/* WordPress avvolge le parti del template in un <div>: senza questo,
   header e piede si comporterebbero come blocchi anonimi in mezzo
   al flusso e alcune fasce a tutta larghezza si restringerebbero. */
.wp-block-template-part{ display:contents; }

/* Lo stacco fra i blocchi del layout "a flusso" è azzerato in
   theme.json (styles.spacing.blockGap): le fasce del sito sono a
   contatto per progetto. Qui resta solo l'azzeramento dei margini
   esterni dei due contenitori. */
:where(main.wp-block-group),
:where(.wp-block-post-content){ margin-block:0; }

/* I titoli restano quelli delle tavole: la classe del core non deve
   aggiungere margini propri. */
:where(.wp-block-heading){ margin-block:0; }

/* Immagini inserite dall'editor: WordPress aggiunge width/height in
   linea, il sito le vuole fluide. */
:where(.wp-block-image),
:where(.wp-block-image figure){ margin:0; }
:where(.wp-block-image img){ height:auto; }

/* Il contenitore assegna le coordinate dall'ordine corrente dei riquadri. */
.rz-galleria{ height:calc(var(--sial-gallery-height, 2293) * var(--px)); }
.rz-galleria .rz-item{
  left:calc(var(--sial-x, 116) * var(--px));
  top:calc(var(--sial-y, 0) * var(--px));
  width:calc(var(--sial-w, 596) * var(--px));
  height:calc(var(--sial-h, 440) * var(--px));
}
/* Nell'editor il contenitore dei blocchi di WordPress forza position:relative. */
.rz-galleria .rz-item.block-editor-block-list__block,
.benv-foto.block-editor-block-list__block,
.benv-foto img.block-editor-block-list__block,
.sv-imb-foto img.block-editor-block-list__block{ position:absolute; }
@media (max-width:900px){
  .sv-imb-foto img.block-editor-block-list__block{ position:static; }
}
.rz-galleria:empty{ height:0; margin-block:0; }
.sec-rz{ display:flow-root; }
@media (max-width:900px){
  .rz-galleria{
    height:auto;
    grid-template-areas:none;
    grid-template-rows:clamp(112px,37vw,260px);
    grid-auto-rows:clamp(96px,31vw,220px);
  }
  .rz-galleria .rz-item[data-i]{
    grid-area:auto;
    grid-column:var(--sial-col);
    grid-row:var(--sial-row) / span var(--sial-span);
  }
}

/* Una didascalia nuova o più lunga resta contenuta nella tappa. */
@media (min-width:901px){
  /* Le misure originali diventano minimi: il testo può crescere senza coprire le foto. */
  .sv-scheda{ height:auto; min-height:calc(920 * var(--px)); padding-bottom:calc(29 * var(--px)); }
  .sv-imballaggio .sv-blocco{ height:auto; min-height:calc(674 * var(--px)); padding-bottom:calc(30 * var(--px)); }
  /* Le schede di Verniciatura crescono gia' col testo: 10-servizi-3.css. */
}
.timeline figure:nth-child(n+11){ --pill-x:100; --pill-y:525; --pill-w:610; --pill-h:90; --text-x:120; --text-y:535; --text-w:570; }
.timeline figcaption span{ overflow-wrap:anywhere; }

/* Pagina 404 (proposta A, 26/10/2026): testo centrato e footer sempre in fondo allo schermo. */
.error404 .wp-site-blocks{ min-height:100vh; display:flex; flex-direction:column; }
.error404 .wp-site-blocks > main{ flex:1; display:flex; flex-direction:column; }
.e404{ flex:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:clamp(48px, calc(120 * var(--px)), 120px) 0; }
.e404 h1{ font-family:var(--font-display); font-size:var(--fs-display); line-height:1.1; color:var(--ink); margin:0 0 clamp(16px, calc(28 * var(--px)), 28px); }
.e404 p{ font-size:var(--fs-body); color:var(--ink); margin:0 0 clamp(28px, calc(56 * var(--px)), 56px); }