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