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