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