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