/* ════════════════════════════════════════════════════════════════
   GRAFICHE AMADEO — css/styles.css
   Foglio di stile unico per tutte le pagine del sito.

   ORGANIZZAZIONE
   1. Sezioni 1–10: variabili (token), base e componenti condivisi.
   2. Blocchi di pagina, marcati [HOME] [STAMPATI] [GRAFICA]
      [ETICHETTE] [CHI-SIAMO] [SOSTENIBILITA].
   3. In coda, blocchi di adattamento (mobile, tablet, componenti
      aggiunti dopo). Ogni blocco ha un titolo ════ che dice cosa fa.
      L'ordine conta: i blocchi più in basso vincono a parità di
      specificità.

   CONVENZIONI
   - Classe di pagina sul <body>: .page-home, .page-stampati,
     .page-grafica, .page-etichette, .page-chi-siamo, .page-sost.
   - Misure di testo, interlinee e spaziature passano dai token in
     :root (--fs-*, --lh-*, --sp-*): non scrivere valori a mano.
   - Breakpoint: 1000 · 900 · 820 · 720 · 680 · 560 px.
     I tablet touch sopra i 720px ricevono le regole "mobile" tramite
     (min-width:721px) and (pointer:coarse): il criterio è l'input,
     non solo la larghezza.
   - Footer e pannello contatti sono inclusi da index.php e
     index.php.
   ════════════════════════════════════════════════════════════════ */

/* ════════ 1. VARIABILI ════════ */
:root{
  color-scheme:light;   /* forza chiaro: impedisce l'inversione automatica del browser/OS in dark mode */
  /* Colori brand */
  --blk:#001923;         /* blu-nero primario */
  --wht:#F5F2EE;
  --org:#E84A2F;         /* arancio accento */
  --c:#00AEEF;--m:#EC008C;--y:#FFE800;--k:#001923;   /* CMYK brand */
  --cream:#EFEDE9;       /* fondo "foglio" pagine interne */
  --cream-alt:#F0EEEB;   /* fondo sezioni chiare della home (tenuto distinto per non alterare il design attuale) */
  --cool:#E6E8EA;
  --bar:#C9C6C2;         /* grigio barre / bottoni servizio */
  --line:#909090;        /* linee divider (home / chi-siamo) */
  --line-soft:#bdbbb7;   /* linee divider su fondo cream */
  /* ── Layout / griglia 12 colonne ── */
  --margin:56px;         /* margine orizzontale di pagina */

  /* ── HERO OLTRE LE BARRE DEL BROWSER ── */
  --hero-oltre-barre:96px;

  --gutter:20px;         /* gutter griglia 12 colonne */
  --cols:12;             /* numero di colonne (6 sotto i 560px) */

  /* Larghezza di una colonna, al netto di margini e gutter.
     Formula UNICA per tutto il sito: usare sempre var(--col),
     mai ricalcolarla a mano nei singoli componenti. */
  --col:calc((100% - 2*var(--margin) - (var(--cols) - 1)*var(--gutter)) / var(--cols));
  /* Variante per elementi già dentro un contenitore in padding
     (il margine è quindi già stato sottratto dal contesto). */
  --col-inner:calc((100% - (var(--cols) - 1)*var(--gutter)) / var(--cols));
  /* ── SCALA TIPOGRAFICA ── */
  --fs-hero:           clamp(48px,10vw,175px);    /* hero della home */
  --fs-hero-interna:   clamp(52px,8vw,140px);     /* hero delle pagine interne */
  --fs-titolo:         clamp(40px,6vw,80px);      /* titolo di sezione — misura standard del sito */
  --fs-titolo-mob:     clamp(48px,13vw,64px);     /* titolo di sezione su telefono */
  --fs-titolo-2:       clamp(28px,3.4vw,52px);    /* titolo secondario grande */
  --fs-titolo-3:       clamp(26px,2.8vw,40px);    /* titolo secondario */
  --fs-titolo-4:       clamp(23px,2.7vw,36px);    /* titolo di scheda / paragrafo manifesto */
  --fs-titolo-4-mob:   clamp(30px,7vw,34px);      /* titolo di scheda su telefono */
  --fs-titolo-5:       clamp(20px,1.9vw,27px);    /* titolo di scheda piccolo */
  --fs-occhiello:      clamp(16px,1.55vw,22px);   /* testo introduttivo grande */
  --fs-testo-lg:       clamp(14px,1.3vw,18px);    /* testo introduttivo */
  --fs-testo:          clamp(14px,1.15vw,16px);   /* corpo del testo — misura standard */
  --fs-testo-sm:       14px;                      /* corpo piccolo, misura fissa */
  --fs-etichetta-lg:   clamp(12px,1.05vw,14px);   /* etichetta grande / bottone */
  --fs-etichetta:      12px;                      /* etichetta */
  --fs-etichetta-sm:   11px;                      /* etichetta piccola — la piu' usata */
  --fs-micro:          10px;                      /* micro-etichetta maiuscoletta */
  --font-titolo:       'Instrument Serif',serif;  /* titoli e citazioni */
  --font-testo:        'Inter',sans-serif;        /* tutto il resto */
  --lh-display:        .95;   /* titoloni: hero, titoli di sezione */
  --lh-titolo:         1.1;   /* titoli secondari e di scheda */
  --lh-medio:          1.25;  /* occhielli, testi introduttivi grandi */
  --lh-testo:          1.4;   /* corpo compatto */
  --lh-corpo:          1.5;   /* corpo standard */
  --lh-arioso:         1.65;  /* corpo lungo, paragrafi da leggere */

  /* ── RITMO VERTICALE ── */
  --sp-sezione:      clamp(70px,9vw,120px);   /* respiro standard fra sezioni */
  --sp-sezione-lg:   clamp(80px,10vw,130px);  /* respiro ampio */
  --sp-sezione-sm:   clamp(56px,7vw,90px);    /* respiro ridotto */
  --sp-sezione-xs:   clamp(40px,5vw,70px);    /* respiro minimo */
  --sp-blocco:       clamp(24px,3vw,44px);    /* stacco fra blocchi dentro una sezione */

  --sp-2:    2px;
  --sp-4:    4px;
  --sp-6:    6px;
  --sp-8:    8px;
  --sp-10:   10px;
  --sp-12:   12px;
  --sp-14:   14px;
  --sp-16:   16px;
  --sp-20:   20px;
  --sp-26:   26px;
  --sp-32:   32px;
  --sp-40:   40px;
  --sp-48:   48px;
  --sp-56:   56px;
  --sp-64:   64px;
  --sp-72:   72px;
  --sp-80:   80px;
  --sp-90:   90px;
  --sp-120:  120px;

  --sp-f-xs:   clamp(12px,1.5vw,18px);
  --sp-f-sm:   clamp(16px,2vw,26px);
  --sp-f-md:   clamp(22px,2.5vw,36px);
  --sp-f-lg:   clamp(34px,4vw,54px);

}

@media (prefers-color-scheme: dark){
  :root{color-scheme:light;}
}

/* ════════ 1b. BREAKPOINT DELLA GRIGLIA ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  :root{--margin:32px;--gutter:16px;}
}
@media(max-width:560px){
  :root{--margin:20px;--gutter:12px;--cols:6;}
}

/* ════════ 2. RESET + BASE ════════ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;overflow-x:clip}
body{
  font-family:var(--font-testo);
  background:var(--blk);color:#fff;
  -webkit-font-smoothing:antialiased;
}

/* ════════ 3. TEXTURE: GRAIN + DOTS ════════ */
.grain-canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;opacity:1;pointer-events:none;z-index:1;}
.dots-layer{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,#D4D3D0 1.5px,transparent 2px);
  background-size:40px 40px;background-position:center;opacity:.65;
  /* nasconde la colonna di puntini più esterna per lato */
  -webkit-mask:linear-gradient(to right, transparent 40px, #001923 40px, #001923 calc(100% - 40px), transparent calc(100% - 40px));
  mask:linear-gradient(to right, transparent 40px, #001923 40px, #001923 calc(100% - 40px), transparent calc(100% - 40px));
  pointer-events:none;z-index:2;
}

/* ════════ 4. GRIGLIA 12 COLONNE + SPLIT-TEXT REVEAL ════════ */

.grid12{
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--gutter);
  width:100%;
}
.col-2-11{grid-column:2 / span 10;}/* 2 colonne di margine per lato */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .col-2-11{grid-column:1 / -1;}}

/* ── 4c. Rimappatura su 6 colonne sotto i 560px ── */

/* Reveal riga-per-riga (elementi .split-text, gestiti da js/site.js) */
.split-line-mask{display:block;overflow:hidden;line-height:inherit;}
.split-line-inner{display:block;opacity:0;}
.split-line-inner.anim-run{animation:maskReveal 1.1s cubic-bezier(0.16,1,0.3,1) forwards;}
@keyframes maskReveal{
  from{transform:translateY(110%) rotate(1.5deg);opacity:0;}
  to{transform:translateY(0%) rotate(0deg);opacity:1;}
}

/* ════════ 5. NAVIGAZIONE ════════ */
.nav{
  position:relative;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--sp-26) var(--margin);
}
.nav-logo{display:flex;align-items:center;gap:var(--sp-16);}
.nav-logo img{height:48px;width:auto;display:block;mix-blend-mode:difference;}

/* Nav sticky (compare oltre il 75% del primo viewport, gestita da js/site.js) */
.nav-sticky{
  position:sticky;top:0;z-index:100;
  margin-bottom:-56px;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 var(--margin);height:56px;
  mix-blend-mode:difference;
  transform:translateY(-100%);
  transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);
  pointer-events:none;
}
.nav-sticky.visible{transform:translateY(0);pointer-events:auto;}
.nav-sticky .nav-logo img{height:32px;mix-blend-mode:normal;}

/* Link di sezione (parentesi quadre in hover) */
.nav-links{display:flex;align-items:center;gap:var(--sp-26);}
.nav-link{
  position:relative;
  font-family:var(--font-testo);font-size:var(--fs-etichetta);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.8);
  text-decoration:none;cursor:pointer;
  padding:0 10px;               /* spazio per ospitare le parentesi */
  transition:color 75ms ease;
}
.nav-sticky .nav-link{color:#fff;font-size:var(--fs-micro);padding:var(--sp-16) 10px;} /* a11y: target ~44px (WCAG 2.5.5) */
.nav-link:hover{color:#fff;}
.nav-link.active{color:#fff;}
/* Parentesi quadre: ::before = sinistra, ::after = destra.
   A riposo scale(0) e opacity 0; in hover/attivo scale(1) e opacity 1. */
.nav-link::before,
.nav-link::after{
  position:absolute;top:50%;
  font-family:var(--font-testo);font-weight:400;
  color:currentColor;opacity:0;
  transition:transform 200ms ease, opacity 200ms ease;
  pointer-events:none;
}
.nav-link::before{content:"[";left:0;transform:translateY(-50%) scale(0);transform-origin:left center;}
.nav-link::after{content:"]";right:0;transform:translateY(-50%) scale(0);transform-origin:right center;}
.nav-link:hover::before,
.nav-link:hover::after,
.nav-link.active::before,
.nav-link.active::after{opacity:1;transform:translateY(-50%) scale(1);}

/* ════════ 6. HERO ════════ */
.hero{
  position:sticky;top:0;
  width:100%;height:100vh;min-height:100vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--blk);z-index:1;
}
.hero-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  transform-origin:center center;
  will-change:transform,opacity;
}
.hero-bg{position:absolute;inset:-8%;z-index:0;overflow:hidden;background:var(--blk);}
.hero-bg img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,25,35,.92) 0%, rgba(0,25,35,.72) 34%, rgba(0,25,35,.22) 62%, rgba(0,25,35,.45) 100%);
}
/* Varianti per pagina (scrim e taglio dell'immagine) */
.page-stampati .hero-bg::after{background:linear-gradient(90deg, rgba(0,25,35,.92) 0%, rgba(0,25,35,.74) 34%, rgba(0,25,35,.30) 62%, rgba(0,25,35,.55) 100%);}
.page-chi-siamo .hero-bg img{object-position:center;}
.page-chi-siamo .hero-bg::after{background:linear-gradient(90deg, rgba(0,25,35,.65) 0%, rgba(0,25,35,.45) 34%, rgba(0,25,35,.10) 62%, rgba(0,25,35,.25) 100%);}
.page-home .hero-bg::after{
  content:"";position:absolute;inset:0;
  mix-blend-mode:multiply;
  background:
    linear-gradient(to top,
      rgba(0,25,35,.42) 0%,
      rgba(0,25,35,.28) 22%,
      rgba(0,25,35,.10) 45%,
      rgba(0,25,35,0) 68%),
    linear-gradient(to bottom,
      rgba(0,25,35,.40) 0%,
      rgba(0,25,35,.24) 13%,
      rgba(0,25,35,0) 28%);
}
.page-home .hero-bg video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(.38) grayscale(.15);
}

/* Contenuto hero (pagine interne) */
.hero-main{
  position:relative;z-index:6;flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--sp-40) var(--margin) var(--sp-56);
}
.page-stampati  .hero-main{max-width:820px;}
.page-grafica   .hero-main{max-width:860px;}
.page-etichette .hero-main{max-width:860px;}
.page-chi-siamo .hero-main{max-width:760px;}
.hero-title{
  font-family:var(--font-titolo);font-style:italic;font-weight:400;
  font-size:var(--fs-hero);line-height:.9;color:#fff;margin-bottom:var(--sp-32);
}
.hero-title--roman{font-style:normal;}  /* variante non corsiva (titolo con <em> interno) */
.hero-desc{
  font-family:var(--font-testo);font-size:var(--fs-testo);
  font-weight:400;letter-spacing:normal;text-transform:none;
  color:rgba(255,255,255,.75);line-height:var(--lh-arioso);max-width:42ch;margin-bottom:var(--sp-40);
}
.page-stampati .hero-desc{max-width:52ch;}
.hero-cta{display:flex;gap:var(--sp-16);flex-wrap:wrap;}

/* ── Hero reimpaginata (titolo in basso a sx, CTA+testo a dx) ── */
/* Sfumature in moltiplica: sotto (titolo/testo/CTA) + sopra (logo/menu) */
:is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-bg::after{
  content:"";position:absolute;inset:0;
  mix-blend-mode:multiply;
  background:
    linear-gradient(to top,
      rgba(0,25,35,.74) 0%,
      rgba(0,25,35,.56) 22%,
      rgba(0,25,35,.22) 45%,
      rgba(0,25,35,0) 68%),
    linear-gradient(to bottom,
      rgba(0,25,35,.72) 0%,
      rgba(0,25,35,.46) 13%,
      rgba(0,25,35,0) 28%);
}
:is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-main{
  max-width:none;
  justify-content:flex-end;          /* contenuto ancorato in basso */
  padding-bottom:var(--sp-56);
}
:is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-foot{
  position:relative;
  display:flex;align-items:flex-end;justify-content:center;
  gap:var(--sp-48);width:100%;
}
:is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-text{
  position:absolute;left:0;bottom:0;max-width:600px;
}
:is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-title{
  font-size:var(--fs-hero-interna);line-height:var(--lh-display);margin-bottom:0;
}
:is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-right{
  position:absolute;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--sp-20);max-width:520px;
}
:is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-cta{
  flex-shrink:0;align-self:flex-end;
}
:is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-desc{
  max-width:520px;margin-bottom:0;text-align:right;
}
/* Giustificato pieno con ultima riga a destra, solo su queste 4 pagine prodotto */
:is(.page-etichette,.page-grafica,.page-stampati,.page-sost) .hero-desc{
  text-align:justify;text-align-last:right;
}
.page-chi-siamo .hero-desc{font-size:var(--fs-occhiello);}
/* CTA smussata (pill) */
.cta-btn-round{border-radius:999px;}
/* CTA "soft" della hero: piccola, testo come la desc, grassetto, bordo sottile */
:is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-cta .cta-btn{
  background:#fff;color:var(--blk);
  border:1px solid #fff;
  font-weight:600;font-size:var(--fs-testo);
  letter-spacing:.01em;text-transform:none;
  padding:var(--sp-8) 20px;
}
:is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-cta .cta-btn:hover{
  background:var(--org,#E84A2F);border-color:var(--org,#E84A2F);color:#fff;
}
@media(max-width:720px){
  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero{
    height:100vh;height:100lvh;
    min-height:100vh;min-height:100lvh;
  }
  @supports (-webkit-touch-callout:none){
    :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero{
      min-height:calc(100lvh + var(--hero-oltre-barre));
    }
  }
  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-main{
    position:absolute;top:0;left:0;right:0;
    height:100vh;height:100svh;
    padding-bottom:var(--sp-40);
  }
  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-foot{
    flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--sp-20);
  }
  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-text,
  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-right{
    position:static;max-width:100%;
  }
  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-title{
    font-size:clamp(46px,15vw,110px);line-height:var(--lh-display);margin-bottom:0;
  }
  .hero-anim.is-armed .hero-title{transform:translateY(40px);}
  .hero-anim.is-ready .hero-title{
    animation:heroTitleRise .52s cubic-bezier(0.65,0,0.35,1) .25s both;
  }
  @keyframes heroTitleRise{
    from{transform:translateY(40px);}
    to{transform:translateY(0);}
  }
  .hero-title-break{display:none;}
  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-desc{text-align:left;text-align-last:left;max-width:100%;}
  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-cta{display:none;}
}

/* ════════ 7. SCROLL-STACK: BODY-STAGE + BODY-SECTION ════════ */
.body-stage{position:relative;z-index:2;background:transparent;}
.body-section{
  position:relative;overflow:hidden;
  border-top-left-radius:clamp(20px,2.4vw,36px);
  border-top-right-radius:clamp(20px,2.4vw,36px);
  box-shadow:0 -24px 60px -18px rgba(0,25,35,.55);
  margin:0 auto;
  width:100%;
}
.page-home .body-section{background:var(--cream-alt);}
/* chi-siamo: la cornice contiene la sezione studio (position:sticky) —
   overflow:clip mantiene il taglio degli angoli senza rompere lo sticky */
.page-chi-siamo .body-section{overflow:clip;}
@media(max-width:560px){
  .body-section{
    border-top-left-radius:18px;
    border-top-right-radius:18px;
    box-shadow:0 -16px 40px -14px rgba(0,25,35,.5);
  }
}

/* Sezioni "foglio" (fondo cream con grain) */
.foglio{position:relative;background:var(--cream);overflow:hidden;}
.foglio-inner{position:relative;z-index:3;}

/* ════════ 8. DIVIDER + CROCINI ════════ */
/* crocini sul bordo tra sezioni */
.section-crocini{position:relative;height:0;overflow:visible;z-index:10;}
.section-crocini img{position:absolute;width:24px;height:24px;top:0;}
.section-crocini .crocino-left{left:36px;transform:translate(-50%,-50%);}
.section-crocini .crocino-right{right:36px;transform:translate(50%,-50%);}

/* riga piena + crocini alle estremità */
.cut-divider{
  position:relative;height:1px;background:var(--line-soft);
  margin-left:calc(-1*var(--margin));margin-right:calc(-1*var(--margin));
}
.page-grafica .cut-divider{background:transparent;}  /* in Grafica la riga è invisibile, restano i crocini */
.cut-divider::before,.cut-divider::after{
  content:'';position:absolute;width:24px;height:24px;top:50%;
  background:url('../img/comuni/crocino.webp') center/contain no-repeat;z-index:6;
}
.cut-divider::before{left:36px;transform:translate(-50%,-50%);}
.cut-divider::after{right:36px;transform:translate(50%,-50%);}

/* zebra divider nero→bianco (transizione tra sezione scura e foglio cream) */
.zebra-divider{
  display:block;width:100%;line-height:0;font-size:0;margin:0;padding:0;
  background:transparent;position:relative;overflow:hidden;margin-top:-1px;
}
.zebra-divider img{display:block;width:100%;height:auto;position:relative;z-index:3;vertical-align:top;}
.page-home .zebra-divider{background:var(--cream-alt);margin-top:0;}
.page-home .zebra-divider img{vertical-align:bottom;}

/* ════════ 9. BOTTONI CTA ════════ */
.cta-actions{display:flex;align-items:center;justify-content:center;gap:var(--sp-16);flex-wrap:wrap;}
/* Variante base: su fondo scuro (bottone bianco pieno / ghost bianco) */
.cta-btn{
  display:inline-block;
  font-family:var(--font-testo);font-weight:600;
  font-size:var(--fs-testo);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--blk);background:#fff;
  padding:var(--sp-16) 40px;text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.cta-btn:hover{background:#001923;color:#fff;}
.hero-cta .cta-btn:hover{background:var(--org,#E84A2F);color:#fff;}   /* hero Scrivici -> arancio */
.cta-btn-ghost{
  display:inline-block;
  font-family:var(--font-testo);font-weight:600;
  font-size:var(--fs-testo);
  letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:transparent;
  padding:var(--sp-16) 40px;border:2px solid #fff;text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.cta-btn-ghost:hover{background:#fff;color:var(--blk);}.page-home .cta-section .cta-btn{background:var(--org);color:#fff;}   /* arancio a riposo */
.page-home .cta-section .cta-btn:hover{background:var(--blk);color:#fff;}   /* -> scuro in hover */
.cta-actions .cta-btn{background:var(--org,#E84A2F);color:#fff;}   /* CTA in fondo: arancio a riposo */
.cta-actions .cta-btn:hover{background:#fff;color:var(--blk);}/* -> bianco in hover */
.page-home .cta-section .cta-btn-ghost{color:var(--blk);border-color:var(--blk);}
.page-home .cta-section .cta-btn-ghost:hover{background:var(--blk);color:#fff;}

/* ════════ 10. SEZIONI CONDIVISE ════════ */

/* ── "I nostri servizi" (foglio finale, tutte le pagine interne) ── */
.tutto{position:relative;padding:var(--sp-sezione) var(--margin) var(--sp-sezione-lg);}
.tutto-head{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);margin-bottom:var(--sp-f-lg);
}
.tutto-head em{font-style:italic;}
.tutto-grid{display:grid;gap:var(--sp-f-xs);}
.tutto-btn{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);
  background:var(--bar);border-radius:6px;
  padding:var(--sp-f-xs) clamp(16px,1.8vw,24px);
  font-family:var(--font-testo);font-size:var(--fs-etichetta-lg);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blk);
  text-decoration:none;cursor:pointer;transition:background .2s;line-height:var(--lh-medio);
}
.tutto-btn:hover{background:#bdbab5;}
.tutto-btn .arr{font-size:16px;flex-shrink:0;}

/* ── CTA scura "Parliamone" (.bozza) ── */
.bozza{
  background:var(--blk);text-align:center;
  padding:var(--sp-sezione-sm) var(--margin) var(--sp-sezione-sm);
  margin-top:-6px;
}
.bozza-head{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:1;color:#fff;margin-bottom:var(--sp-48);
}
.bozza-head em{font-style:italic;}
.bozza-body{
  font-family:var(--font-testo);font-size:21px;
  font-weight:450;color:rgba(255,255,255,.65);line-height:var(--lh-testo);
  text-align:center;max-width:44ch;margin:0 auto var(--sp-40);
}

/* ── Statement centrato "Controllo" (stampati + etichette) ── */
.controllo{position:relative;text-align:center;}
.page-stampati  .controllo{padding:var(--sp-sezione-sm) var(--margin) var(--sp-sezione-sm);}
.page-etichette .controllo{padding:var(--sp-sezione-xs) var(--margin) var(--sp-sezione-sm);}
.controllo-label{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);letter-spacing:normal;text-transform:none;
  color:var(--blk);line-height:var(--lh-display);margin-bottom:calc(clamp(34px,4vw,54px) + 54px);
}
.controllo-label em{font-style:italic;}
.controllo-cmyk{height:18px;width:auto;display:block;margin:0 auto var(--sp-f-sm);}
.controllo-body{
  font-family:var(--font-testo);font-weight:450;
  font-size:var(--fs-titolo-4);line-height:var(--lh-titolo);color:var(--blk);
  margin:0;text-align:center;
}
.controllo-body strong{font-weight:800;}

/* ── Barre "motivi" (grafica + etichette) ── */
.motivo-bar{
  position:relative;
  background:var(--bar);border-radius:12px;
  display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);
  padding:var(--sp-f-sm) clamp(22px,2.6vw,40px);
  transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  cursor:default;
}
.motivo-bar:hover{transform:scale(1.02);}.motivo-title{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo-2);line-height:var(--lh-display);color:var(--blk);flex-shrink:0;
}
.motivo-desc{
  margin:0 0 0 auto;max-width:44%;
  font-family:var(--font-testo);font-size:var(--fs-testo);
  font-weight:500;color:rgba(0,25,35,.82);line-height:var(--lh-testo);
}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .motivo-bar{flex-wrap:wrap;gap:var(--sp-8) var(--sp-16);padding:var(--sp-16) 22px;}
  .motivo-title{font-size:30px;}
  .motivo-desc{margin:var(--sp-6) 0 0;max-width:100%;flex-basis:100%;}
}
/* contenitore .motivi: layout diverso per pagina */
.page-grafica .motivi{display:flex;flex-direction:column;gap:var(--sp-f-xs);}
.page-etichette .motivi{position:relative;padding:var(--sp-sezione) var(--margin) var(--sp-sezione);}

/* ── Partner di fornitura (stampati + etichette) ── */
.partner-sec{position:relative;padding:var(--sp-sezione) 0 var(--sp-sezione-sm);}
.partner-head-wrap{padding:0 var(--margin);margin-bottom:var(--sp-sezione-xs);text-align:center;}
.partner-label{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);
}
.partner-label em{font-style:italic;}
.partner-sub{
  font-family:var(--font-testo);font-size:var(--fs-testo);
  font-weight:500;color:rgba(0,25,35,.55);line-height:var(--lh-arioso);
  max-width:52ch;margin:var(--sp-16) auto 0;
}
/* marquee carosello loghi */
.marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#001923 8%,#001923 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#001923 8%,#001923 92%,transparent);
}
.marquee-track{display:flex;gap:var(--sp-6);width:max-content;animation:marquee 38s linear infinite;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.logo-card{
  flex-shrink:0;width:clamp(220px,22vw,300px);height:120px;
  background:#fff;border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-8);
  box-shadow:0 1px 0 rgba(0,25,35,.06);
}.logo-card .lc-logo{
  max-width:78%;max-height:70px;width:auto;height:auto;object-fit:contain;
}

/* accessibilità: ferma i caroselli automatici se l'utente riduce il movimento */
@media (prefers-reduced-motion: reduce){
  .marquee-track,.striscia-carousel{animation:none;}
}

/* ════════ [HOME] index.html ════════ */

/* ── Hero home: titolo su due righe + pallini CMYK (js/home.js) ── */
.page-home .hero-main{
  z-index:5;max-width:none;
  padding:0 var(--margin);
  --cols:12;
  --col:var(--col-inner);
}
.hero-title-wrap{
  display:flex;flex-direction:column;align-items:flex-start;
  margin-left:calc((var(--col) + var(--gutter)) * 2);
}
/* l'h1 è solo semantico: non genera box, le righe restano figlie dirette del wrap */
.hero-h1{display:contents;margin:0;}
.h-line1{display:flex;align-items:center;gap:var(--sp-16);margin-bottom:-0.06em;}
.h-line2{display:flex;align-items:center;gap:var(--sp-16);margin-left:calc((var(--col) + var(--gutter)) * 2);}
.h-line1 .hl,.h-line2 .hl{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-hero);
  line-height:.9;color:#fff;white-space:nowrap;
}
.h-line2 .hl{font-style:italic;}
.cmyk-dots{display:flex;align-items:center;gap:var(--sp-6);flex-shrink:0;}
.h-sub{
  margin-left:calc((var(--col) + var(--gutter)) * 4);
  margin-top:var(--sp-26);
  font-family:var(--font-testo);
  font-size:clamp(12px,1.1vw,16px);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:#fff;line-height:var(--lh-arioso);
  max-width:calc((var(--col) + var(--gutter)) * 3);
}
.page-home .hero-desc{
  position:absolute;bottom:44px;right:var(--margin);
  width:calc(var(--col) * 3 + var(--gutter) * 2);   /* 3 colonne */
  z-index:5;max-width:none;margin-bottom:0;
}
.hero-icons{display:flex;align-items:center;gap:var(--sp-16);margin-bottom:var(--sp-14);opacity:.75;}
@keyframes certReveal{
  from{transform:translateY(110%);opacity:0;}
  to{transform:translateY(0%);opacity:1;}
}
.cert-mask{display:inline-flex;overflow:hidden;}
.cert-logo{height:40px;width:auto;display:block;animation:certReveal .9s cubic-bezier(0.16,1,0.3,1) both;}
.hero-icons .cert-mask{min-width:0;max-width:100%;}
.hero-icons .cert-logo{width:387px;height:auto;max-width:100%;}
.page-home .hero-icons-sx{
  --loghi-sx-w:min(387px, calc((100vw - 2*var(--margin) - 11*var(--gutter)) / 4 + 2*var(--gutter)));
  --loghi-u:calc(var(--loghi-sx-w) / 110);
  position:absolute;
  left:calc(var(--margin) - var(--loghi-u) * 6.07);
  bottom:calc(47px - var(--loghi-u) * 5.39);
  z-index:5;margin:0;
}
.page-home .hero-icons-sx .cert-logo{width:calc(var(--loghi-u) * 38);max-width:none;}
.page-home .hero-icons-sx{
  left:auto;
  right:calc(var(--margin) - var(--loghi-u) * 6.07);
}
.page-home .hero-desc{
  /* stesse variabili dei loghi: sono dichiarate su .hero-icons-sx e
     non arrivano qui da sole (elementi fratelli) */
  --loghi-sx-w:min(387px, calc((100vw - 2*var(--margin) - 11*var(--gutter)) / 4 + 2*var(--gutter)));
  --loghi-u:calc(var(--loghi-sx-w) / 110);
  width:auto;
  right:calc(var(--margin) + var(--loghi-u) * 25.86 + 2*var(--gutter));
}
@media(max-width:900px){
  .page-home .hero-icons-sx{position:static;padding:0 var(--margin);margin-bottom:var(--sp-32);}
}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-home .hero-icons-sx{display:none;}
}
.page-home .hero-desc p{
  font-family:var(--font-testo);font-size:clamp(10px,.8vw,12px);
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.75);line-height:var(--lh-arioso);margin-bottom:var(--sp-12);
}
.page-home .hero-cta{
  display:inline;font-family:var(--font-testo);font-size:clamp(10px,.8vw,12px);
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;text-decoration:underline;text-underline-offset:4px;cursor:pointer;
}

/* reveal della hero (per riga) */
.reveal-mask{overflow:hidden;display:block;line-height:inherit;}
.reveal-inner{display:block;opacity:0;}
.reveal-inner.anim-run{animation:maskReveal 1.1s cubic-bezier(0.16,1,0.3,1) forwards;}

@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .h-line1{margin-left:0;}
  .h-line2{margin-left:calc((var(--col) + var(--gutter)) * 1);}
  .h-sub{margin-left:calc((var(--col) + var(--gutter)) * 1);max-width:60%;}
  .page-home .hero-desc{position:relative;bottom:auto;right:auto;width:auto;margin:var(--sp-32) 0 var(--sp-40);padding:0 var(--margin);}
}
@media(max-width:560px){
  .h-line1,.h-line2{gap:var(--sp-8);}
  .h-line1 .hl,.h-line2 .hl{font-size:clamp(36px,13vw,64px);white-space:normal;}
  .h-line2{margin-left:clamp(16px,5vw,40px);}
  .h-sub{margin-left:clamp(16px,5vw,40px);max-width:80%;font-size:var(--fs-micro);margin-top:var(--sp-20);}
  .page-home .hero-desc{padding:0 var(--margin);margin-bottom:var(--sp-32);}
}

/* ── Manifesto home (fascia sotto la hero) ── */
.page-home .manifesto-section,
.page-chi-siamo .manifesto-section{
  position:relative;z-index:3;
  background:url('../img/comuni/fascia-zebrata.webp') top center / 100% auto no-repeat;
  padding:0;padding-top:var(--sp-80);
}
.manifesto-divider-top{
  position:absolute;top:36px;left:0;right:0;height:0;
  border-top:1px solid var(--line);
}
.manifesto-divider-top::before,
.manifesto-divider-top::after{
  content:'';position:absolute;width:24px;height:24px;top:0;
  background:url('../img/comuni/crocino.webp') center/contain no-repeat;
  pointer-events:none;z-index:5;
}
.manifesto-divider-top::before{left:36px;transform:translate(-50%,-50%);}
.manifesto-divider-top::after{right:36px;transform:translate(50%,-50%);}
.page-home .manifesto-pallini,
.page-chi-siamo .manifesto-pallini{
  position:absolute;top:36px;left:50%;
  transform:translate(-50%,-50%);
  height:18px;width:auto;pointer-events:none;
}
.manifesto-divider-bottom{height:0;}
.manifesto-content{padding:var(--sp-f-sm) var(--margin) var(--sp-sezione-sm);}
.manifesto-inner{
  /* Blocco di testo centrato: resta a 12 colonne a ogni breakpoint
     (l'inset 2/10 o 3/8 è la sua ragion d'essere). */
  --cols:12;
  --col:var(--col-inner);
  display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);
  width:calc(var(--vw, 100vw) - 2*var(--margin));
  max-width:calc(var(--vw, 100vw) - 2*var(--margin));
  margin-left:calc((100% - (var(--vw, 100vw) - 2*var(--margin))) / 2);
}
.page-home .manifesto-body{
  grid-column:2 / span 10;
  font-family:var(--font-testo);font-weight:450;
  font-size:34px;letter-spacing:-.02em;
  color:var(--blk);line-height:var(--lh-titolo);
  margin:0;text-align:center;position:relative;
}
.page-chi-siamo .manifesto-body{
  grid-column:3 / span 8;
  font-family:var(--font-testo);font-weight:450;
  font-size:34px;letter-spacing:-.02em;
  color:var(--blk);line-height:var(--lh-titolo);
  margin:0;text-align:center;position:relative;
}
.page-home .manifesto-body strong,
.page-chi-siamo .manifesto-body strong{font-weight:800;}

/* ── Carousel "Le nostre stampe" ── */
.carousel-section{position:relative;z-index:3;padding:var(--sp-64) 0 var(--sp-72);}
.carousel-header{padding:0 var(--margin);margin-bottom:var(--sp-72);text-align:left;}
.carousel-title-wrap{display:block;text-align:left;}
.carousel-headline{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);margin:0;
  text-align:center;
}
.carousel-headline em{font-style:italic;}
.carousel-strip{position:relative;background:transparent;padding:0;overflow:hidden;}
.carousel-viewport{
  overflow:hidden;position:relative;cursor:grab;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.carousel-viewport:active{cursor:grabbing;}
.carousel-track{display:flex;gap:var(--sp-6);will-change:transform;padding:0 var(--margin);width:max-content;}
.carousel-unit{
  display:flex;flex-direction:column;gap:var(--sp-10);flex-shrink:0;
  width:calc((100vw - 2*var(--margin) - 11*var(--gutter)) / 12 * 3 + 2*var(--gutter));
}
.carousel-card{position:relative;overflow:hidden;background:var(--blk);border-radius:6px;width:100%;aspect-ratio:3/4;flex-shrink:0;}
.carousel-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6px;display:block;}

/* ── Libertà + infografica ── */
.liberta-section{
  position:relative;z-index:3;
  padding:var(--sp-80) var(--margin) var(--sp-72);
  display:flex;flex-direction:column;gap:var(--sp-56);
}
.liberta-divider,
.liberta-divider-end{
  position:relative;height:1px;background:var(--line);
  margin-left:calc(-1 * var(--margin));
  margin-right:calc(-1 * var(--margin));
}
.liberta-divider{margin-top:calc(-1 * 80px);}
.liberta-divider-end{margin-bottom:calc(-1 * 70px + 12px);} /* 12px per non far clippare la metà bassa del crocino dall'overflow:hidden di .body-section */
.liberta-divider::before,.liberta-divider::after,
.liberta-divider-end::before,.liberta-divider-end::after{
  content:'';position:absolute;width:24px;height:24px;top:50%;
  background:url('../img/comuni/crocino.webp') center/contain no-repeat;
  pointer-events:none;z-index:5;
}
.liberta-divider::before,.liberta-divider-end::before{left:36px;transform:translate(-50%,-50%);}
.liberta-divider::after,.liberta-divider-end::after{right:36px;transform:translate(50%,-50%);}
/* linee verticali tratteggiate */
.liberta-vline{position:absolute;width:0;border-left:1px dashed var(--line);pointer-events:none;z-index:4;top:0;}
.liberta-vline-outer-left{left:36px;bottom:0;}
.liberta-vline-outer-right{right:36px;bottom:0;}
.liberta-vline-col7{left:calc(var(--margin) + (100% - 2*var(--margin)) * 7/12 - 12px);} /* altezza settata dal JS */
.liberta-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-40);padding-right:9%;}
.liberta-headline{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);
  color:var(--blk);flex:0 0 62%;
}
.liberta-headline em{font-style:italic;}
.liberta-body{
  font-family:var(--font-testo);font-size:21px;
  font-weight:450;color:rgba(0,25,35,.65);line-height:var(--lh-testo);
  flex:1;padding-bottom:0;text-align:left;text-transform:none;
  transform-origin:top left;
}
.infographic{width:100%;}
.infographic-chart{display:flex;gap:var(--sp-6);width:100%;}
.bar-col{flex:1;display:flex;flex-direction:column;}
/* Il numero "appoggia" sulla barra che cresce dal basso:
   altezza = zona barra (CHART_H del JS = 350) + spazio per il numero. */
.bar-track{
  width:100%;height:440px;
  display:flex;flex-direction:column;justify-content:flex-end;
  flex-shrink:0;
}
.bar{
  width:100%;height:0;
  overflow:hidden;position:relative;
  background:#c4c2be;
  transition:height 1.5s cubic-bezier(0.22,1,0.36,1), background .3s ease;
  flex-shrink:0;
}
.bar-col:hover .bar{background:var(--blk);}
.bar-label{
  position:absolute;bottom:4px;left:8px;
  font-family:var(--font-testo);font-size:var(--fs-testo-sm);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(0,25,35,.5);line-height:var(--lh-testo);white-space:nowrap;
  transition:color .3s ease;
}
.bar-col:hover .bar-label{color:rgba(255,255,255,.75);}
.bar-num{
  font-family:var(--font-testo);
  font-size:clamp(28px,4.8vw,72px);
  font-weight:450;letter-spacing:-.05em;
  color:var(--line);line-height:1;margin-bottom:var(--sp-4);white-space:nowrap;
  transition:color .3s ease;
}
.bar-col:hover .bar-num{color:var(--blk);}

/* ── Recensioni clienti ("dipendenti") ── */
.dipendenti-section{
  background:var(--cream-alt);
  padding:var(--sp-90) var(--margin) var(--sp-120);
  position:relative;overflow:hidden;
}
.dipendenti-deco{
  position:absolute;top:65%;transform:translateY(-65%);
  height:620px;width:auto;pointer-events:none;z-index:2;
}
.dipendenti-deco.deco-right{right:var(--margin);}
.dipendenti-deco.deco-left{left:var(--margin);}
.dipendenti-inner{position:relative;z-index:3;}
.dipendenti-title{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);
  color:var(--blk);margin-bottom:var(--sp-72);
  text-align:center;
}
.dipendenti-title em{font-style:italic;}
.chat-messages{display:flex;flex-direction:column;gap:var(--sp-26);}
.chat-row{display:flex;flex-direction:column;gap:var(--sp-10);}
.chat-row.chat-left .chat-bubble{border-radius:20px 20px 0 20px;}
.chat-row.chat-right .chat-bubble{border-radius:20px 20px 20px 0;}
.chat-row.chat-left .chat-bubble{margin-left:41.66%;}
.chat-row.chat-right .chat-bubble{margin-left:8.33%;}
.chat-bubble{background:#fff;border:1px solid rgba(0,25,35,.09);border-radius:20px;padding:var(--sp-32) 44px;width:50%;}
.chat-text{
  font-family:var(--font-testo);font-size:clamp(17px,1.9vw,26px);
  font-weight:600;color:var(--blk);line-height:var(--lh-testo);margin-bottom:var(--sp-20);
}
.chat-author{
  font-family:var(--font-testo);font-size:var(--fs-testo-sm);font-weight:500;
  color:rgba(0,25,35,.6);line-height:var(--lh-corpo);
}
.chat-author span{display:block;opacity:.6;font-weight:400;}/* recensioni extra (collassabili) */
.chat-extra{
  display:flex;flex-direction:column;gap:var(--sp-26);
  max-height:0;overflow:hidden;margin-top:-28px;
  
  opacity:0;
}
.chat-extra.open{max-height:2000px;margin-top:0;opacity:1;}
.chat-more-wrap{display:flex;justify-content:center;margin-top:var(--sp-8);padding-bottom:var(--sp-64);}
.chat-more-btn{
  font-family:var(--font-testo);font-size:var(--fs-testo-sm);font-weight:600;letter-spacing:.01em;
  color:var(--blk);background:transparent;
  border:1.5px solid var(--blk);border-radius:999px;
  padding:var(--sp-14) 34px;cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--sp-10);
  transition:background .25s ease, color .25s ease;
}
.chat-more-btn:hover{background:var(--blk);color:#fff;}
.chat-more-btn .arr{transition:transform .35s ease;font-size:var(--fs-etichetta);}
.chat-more-btn.open .arr{transform:rotate(180deg);}
/* linee e crocini della sezione recensioni */
.chat-divider,
.chat-divider-end{
  position:relative;height:1px;background:var(--line);
  margin-left:calc(-1 * var(--margin));
  margin-right:calc(-1 * var(--margin));
}
.chat-divider::before,.chat-divider::after,
.chat-divider-end::before,.chat-divider-end::after{
  content:'';position:absolute;width:24px;height:24px;top:50%;
  background:url('../img/comuni/crocino.webp') center/contain no-repeat;
  pointer-events:none;z-index:5;
}
.chat-divider::before,.chat-divider-end::before{left:36px;transform:translate(-50%,-50%);}
.chat-divider::after,.chat-divider-end::after{right:36px;transform:translate(50%,-50%);}
.chat-vlines-wrap{
  position:relative;
  margin-left:calc(-1 * var(--margin));
  margin-right:calc(-1 * var(--margin));
}
.chat-vlines-wrap .chat-messages{padding:var(--sp-56) var(--margin);}
.chat-vline{
  position:absolute;top:0;bottom:0;width:0;
  border-left:1px dashed var(--line);
  pointer-events:none;z-index:4;
}
.chat-vline-left{left:36px;}
.chat-vline-right{right:36px;}

/* ── Studio (scroll-driven, fase 1 → fase 2) ── */
.studio-section{
  background:var(--cream-alt);
  position:relative;
  height:calc(100vh + 800px); /* fallback: il JS imposta l'altezza reale */
  overflow:visible;
  --studio-progress:0;        /* 0 = fase 1, 1 = fase 2 (settata dal JS) */
}
.studio-sticky{
  position:sticky;top:0;height:100vh;
  padding:0 var(--margin);
  display:flex;align-items:center;z-index:3;
}
/* grain e dots coprono bordo-bordo ignorando il padding */
.studio-sticky > .grain-canvas,
.studio-sticky > .dots-layer{
  left:calc(-1 * var(--margin));
  right:calc(-1 * var(--margin));
  width:auto;
}
.studio-inner{
  position:relative;z-index:3;width:100%;
  /* già dentro un contenitore in padding → --col-inner */
  --col:var(--col-inner);
  display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);
}
.studio-headline{
  grid-column:1 / -1;
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);
  margin:0 0 clamp(80px,12vh,140px) 0;text-align:center;
}
.studio-headline em{font-style:italic;}
.studio-headline .studio-part{display:inline;}
/* colori interpolati via --studio-progress:
   fase 1: part-1 blu, part-2 grigio → fase 2: invertiti */
.studio-headline .studio-part-1{
  color:rgb(
    calc(0  + (201 - 0)  * var(--studio-progress)),
    calc(25  + (198 - 25)  * var(--studio-progress)),
    calc(35  + (194 - 35)  * var(--studio-progress))
  );
}
.studio-headline .studio-part-2{
  color:rgb(
    calc(201 + (0 - 201) * var(--studio-progress)),
    calc(198 + (25 - 198) * var(--studio-progress)),
    calc(194 + (35 - 194) * var(--studio-progress))
  );
}
/* ── Studio chi-siamo: sticky a 3 stati (mission → vision → valori) ── */
.studio-states .studio-headline{color:rgb(201,198,194);}
.studio-states .studio-state-word{
  color:rgb(
    calc(201 + (0 - 201) * var(--hl, 0)),
    calc(198 + (25 - 198) * var(--hl, 0)),
    calc(194 + (35 - 194) * var(--hl, 0))
  );
}
.studio-states .sw-1{--hl:var(--sw1, 1);}
.studio-states .sw-2{--hl:var(--sw2, 0);}
.studio-states .sw-3{--hl:var(--sw3, 0);}

/* ── Chi siamo: linee verticali continue (crocini → storia) + side CMYK studio ── */
/* il titolo studio si allinea a sinistra come quello di storia (colonna 2) */
.page-chi-siamo .studio-headline{grid-column:1 / -1;}
.page-chi-siamo .studio-vline{
  position:absolute;width:0;
  border-left:1px dashed var(--line-soft);
  pointer-events:none;z-index:4;
  top:0;bottom:0;
}
.page-chi-siamo .studio-vline.left{left:36px;}
.page-chi-siamo .studio-vline.right{right:36px;}

.page-chi-siamo .manifesto-section{padding-bottom:var(--sp-26);}
.page-chi-siamo .manifesto-divider-bottom{
  position:relative;height:0;
  border-top:1px solid var(--line);
}
.page-chi-siamo .manifesto-divider-bottom::before,
.page-chi-siamo .manifesto-divider-bottom::after{
  content:'';position:absolute;width:24px;height:24px;top:0;
  background:url('../img/comuni/crocino.webp') center/contain no-repeat;
  pointer-events:none;z-index:5;
}
.page-chi-siamo .manifesto-divider-bottom::before{left:36px;transform:translate(-50%,-50%);}
.page-chi-siamo .manifesto-divider-bottom::after{right:36px;transform:translate(50%,-50%);}
.page-chi-siamo .studio-side{
  position:absolute;top:65%;transform:translateY(-65%);
  z-index:2;pointer-events:none;
}
.page-chi-siamo .studio-side.left{left:var(--margin);}
.page-chi-siamo .studio-side.right{right:var(--margin);}
.page-chi-siamo .studio-side img{height:620px;width:auto;display:block;}

.studio-states .studio-pane{
  grid-area:1 / 1;
  opacity:0;pointer-events:none;
  transform:translateY(40px); /* posizione di riposo: sotto */
  will-change:opacity,transform;
}
.studio-states .pane-1{
  opacity:var(--pane1-op, 1);
  transform:translateY(var(--pane1-y, 0px));
}
.studio-states .pane-2{
  opacity:var(--pane2-op, 0);
  transform:translateY(var(--pane2-y, 40px));
}
.studio-states .pane-3{
  opacity:var(--pane3-op, 0);
  transform:translateY(var(--pane3-y, 40px));
}
/* solo il pannello dello stato attivo riceve gli eventi puntatore */
.studio-states[data-state="1"] .pane-1,
.studio-states[data-state="2"] .pane-2,
.studio-states[data-state="3"] .pane-3{pointer-events:auto;}

/* neutralizza le regole scrub della home sulle card valori */
.studio-states .studio-caps > .studio-cap-inner{opacity:1;transform:none;}

.studio-body{
  font-family:var(--font-testo);font-weight:450;
  font-size:var(--fs-titolo-4);
  color:var(--blk);line-height:var(--lh-medio);margin:0;text-align:center;
}
.studio-body strong{font-weight:800;}
/* Vision (pane-2): 3 colonne di margine per lato → testo sulle 6 centrali.
   --pc ricava la larghezza colonna di pagina dalla larghezza dello stage
   (10 col + 9 gutter); il padding rimuove 2 col + 2 gutter per lato. */
.studio-states .pane-2{
  --pc:calc((100% - 9*var(--gutter)) / 10);
  padding-inline:calc(2*var(--pc) + 2*var(--gutter));
}
@media (max-width:720px){
  .studio-states .pane-2{padding-inline:0;}
}
/* le due fasi vivono nello stesso slot della griglia */
.studio-stage{grid-column:2 / span 10;position:relative;display:grid;}
.studio-stage > .studio-phase{grid-area:1 / 1;will-change:opacity,transform;}
.studio-stage > .studio-phase-1{
  opacity:var(--studio-p1-opacity, 1);
  transform:translateY(calc(var(--studio-p1-out, 0) * -30px));
  pointer-events:auto;
}
.studio-section[data-phase="2"] .studio-stage > .studio-phase-1{pointer-events:none;}
.studio-stage > .studio-phase-2{opacity:1;pointer-events:none;}
.studio-section[data-phase="2"] .studio-stage > .studio-phase-2{pointer-events:auto;}
/* reveal sequenziale delle card (sub-variabili settate dal JS) */
.studio-caps > .studio-cap-inner{
  opacity:var(--cap-opacity, 0);
  transform:translateY(calc((1 - var(--cap-in, 0)) * 30px));
  transition:none;will-change:opacity,transform;
}
.studio-caps > .studio-cap-inner:nth-child(1){--cap-opacity:var(--studio-cap1-opacity, 0);--cap-in:var(--studio-cap1-in, 0);}
.studio-caps > .studio-cap-inner:nth-child(2){--cap-opacity:var(--studio-cap2-opacity, 0);--cap-in:var(--studio-cap2-in, 0);}
.studio-caps > .studio-cap-inner:nth-child(3){--cap-opacity:var(--studio-cap3-opacity, 0);--cap-in:var(--studio-cap3-in, 0);}
.studio-section.studio-done .studio-caps > .studio-cap-inner{opacity:1;transform:none;}
.studio-caps{
  display:grid;
  row-gap:var(--sp-6);margin:0;padding:0;
}
.studio-cap-inner{
  position:relative;
  background:#fff;border-radius:6px;
  padding:var(--sp-blocco);
  box-shadow:0 1px 0 rgba(0,25,35,.06);
  text-align:left;display:flex;flex-direction:column;color:inherit;
}
.studio-cap-title{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo-3);line-height:var(--lh-titolo);
  color:var(--blk);margin-bottom:var(--sp-14);
}
.studio-cap-title em{font-style:italic;}
.studio-cap-body{
  font-family:var(--font-testo);font-weight:450;
  font-size:var(--fs-occhiello);line-height:var(--lh-testo);
  color:rgba(0,25,35,.75);margin:0;max-width:38ch;
}
.studio-cap-body strong{font-weight:800;color:var(--blk);}
@media (max-width:720px){
  .studio-caps{grid-template-columns:1fr;row-gap:var(--sp-32);}
}

/* ── Servizi (griglia scura) ── */
.servizi-section{background:var(--blk);padding:var(--sp-90) var(--margin) var(--sp-40);}
.cta-overlap{margin-top:-4px;position:relative;z-index:1;}
.servizi-header{
  display:grid;column-gap:var(--gutter);
  align-items:flex-end;margin-bottom:var(--sp-64);
}
.servizi-title{
  grid-column:1 / span 5;
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:#fff;
}
.servizi-title em{font-style:italic;}
.servizi-sub{
  grid-column:9 / span 2;
  font-family:var(--font-testo);font-size:21px;
  font-weight:400;color:#fff;line-height:normal;
  letter-spacing:normal;text-transform:none;text-align:right;
}
.servizi-grid{
  display:grid;
  gap:var(--sp-2);background:rgba(255,255,255,.06);
}
.servizio-card{
  position:relative;background:var(--blk);padding:var(--sp-56) 48px;
  display:flex;flex-direction:column;gap:var(--sp-14);
  cursor:pointer;overflow:hidden;isolation:isolate;
}
.servizio-name{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo-4);line-height:var(--lh-titolo);color:#fff;
}
.servizio-btn{
  margin-top:auto;align-self:flex-start;display:inline-block;
  font-family:var(--font-testo);font-weight:600;
  font-size:var(--fs-etichetta-lg);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--blk);background:#fff;
  padding:var(--sp-14) 32px;border:2px solid #fff;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.servizio-btn:hover{background:var(--org,#E84A2F);color:#fff;border-color:var(--org,#E84A2F);}

/* ── CTA finale home ── */
.cta-section{
  background:var(--cream-alt);
  padding:140px var(--margin);
  text-align:center;position:relative;overflow:hidden;
}
.cta-inner{
  position:relative;z-index:3;
  max-width:calc(((100% - 11 * var(--gutter)) / 12) * 4 + var(--gutter) * 3); /* 4 colonne centrali */
  margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-48);text-align:center;
}
.cta-headline{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:1;color:var(--blk);
}
.cta-headline em{font-style:italic;}

/* responsive home */
@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .liberta-top{flex-direction:column;gap:var(--sp-26);}
  .liberta-headline{flex:1 1 auto;}
  .liberta-body{flex:1 1 auto;max-width:100%;}
  .studio-inner{grid-template-columns:1fr;gap:var(--sp-48);}
  .servizi-header{grid-template-columns:1fr;gap:var(--sp-16);align-items:flex-start;}
  .servizi-title,.servizi-sub{grid-column:1 / -1;}
}
@media(max-width:560px){
  .infographic-chart{gap:var(--sp-10);}
  .bar-num{font-size:var(--fs-testo-sm);}
}

/* ════════ [STAMPATI] stampati.html ════════ */

/* ── Manifesto (statement centrato) ── */
.page-stampati .manifesto-section{
  position:relative;z-index:3;
  padding:var(--sp-sezione) var(--margin) var(--sp-sezione-sm);
  text-align:center;
}
.page-stampati .manifesto-pallini{
  height:18px;width:auto;display:block;
  margin:0 auto var(--sp-f-sm);
}
.manifesto-head{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);
  margin:0 0 var(--sp-f-lg);
}
.manifesto-head em{font-style:italic;}
.page-stampati .manifesto-body{
  font-family:var(--font-testo);font-weight:450;
  font-size:var(--fs-titolo-4);line-height:var(--lh-titolo);color:var(--blk);
  margin:0;text-align:center;
}
.page-stampati .manifesto-body strong{font-weight:800;}

/* ── Categorie stampati (strisce con caroselli) ── */
.categorie{position:relative;padding:0 var(--margin) 0;}
.categorie .cut-divider{grid-column:1 / -1;margin-bottom:0;}
.cat-strips{
  position:relative;
  display:flex;flex-direction:column;
  grid-column:2 / -1;
  margin-right:calc(36px - var(--margin));
}
.categorie-side{position:absolute;top:50%;transform:translateY(-50%);z-index:5;pointer-events:none;display:flex;flex-direction:column;}
.categorie-side img{height:620px;width:auto;display:block;}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){.categorie-side{display:none;}}
.cat-vline{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--line-soft);pointer-events:none;z-index:4;}
.cat-vline.left{left:calc(-1 * ((100vw - 2 * var(--margin) - 11 * var(--gutter)) / 12 + var(--margin) - 36px + var(--gutter)));}
.cat-vline.right{right:0;}
/* crocini di chiusura in basso alle linee verticali */
.cat-crocini-bottom{position:relative;height:0;overflow:visible;pointer-events:none;}
.cat-crocini-bottom img{position:absolute;bottom:0;width:24px;height:24px;z-index:10;}
.cat-crocini-bottom .ccl{left:calc(-1 * ((100vw - 2 * var(--margin) - 11 * var(--gutter)) / 12 + var(--margin) - 36px + var(--gutter)));transform:translate(-50%,50%);}
.cat-crocini-bottom .ccr{right:0;transform:translate(50%,50%);}

.striscia{
  position:relative;display:flex;
  min-height:50vh;
  border-top:1px solid rgba(0,25,35,.12);
}
.striscia:first-child{border-top:none;}
.striscia-left{
  flex:0 0 38%;
  padding:var(--sp-sezione-xs) clamp(28px,4vw,56px);
  display:flex;flex-direction:column;justify-content:center;
  border-right:1px solid rgba(0,25,35,.12);
}.striscia-title{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo-2);line-height:1;
  color:var(--blk);margin-bottom:var(--sp-16);
}
.striscia-title em{font-style:italic;}
.striscia-desc{
  font-family:var(--font-testo);font-size:var(--fs-testo);
  font-weight:450;color:rgba(0,25,35,.62);line-height:var(--lh-arioso);max-width:38ch;
}
.striscia-right{flex:1;overflow:hidden;display:flex;align-items:center;}
.striscia-carousel{
  display:flex;gap:var(--sp-6);width:max-content;
  padding:var(--sp-32) 0;
  animation:marquee 28s linear infinite;
}
/* ritmo e direzione alternati tra le strisce */
.striscia:nth-child(even of .striscia) .striscia-carousel{animation-duration:36s;animation-direction:reverse;}
.carousel-item{
  flex-shrink:0;position:relative;
  scroll-snap-align:start;cursor:default;
}
.carousel-tag{
  display:block;text-align:left;margin:0 0 var(--sp-8) 2px;
  font-family:var(--font-testo);font-size:var(--fs-micro);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(0,25,35,.55);white-space:nowrap;
}
.carousel-img{
  width:clamp(280px,34vw,460px);
  aspect-ratio:4/3;
  background:var(--blk);border-radius:6px;flex-shrink:0;
  position:relative;overflow:hidden;
}
.carousel-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-drag:none;user-select:none;
}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .striscia{flex-direction:column;min-height:auto;}
  .striscia-left{flex:none;border-right:none;border-bottom:1px solid rgba(0,25,35,.12);}
  .striscia-right{min-height:200px;}
}

/* ════════ [GRAFICA] grafica-e-prestampa.html ════════ */

/* linee verticali tratteggiate che accompagnano manifesto + gallery */
.linee-wrap{position:relative;}
.linee-wrap::before,
.linee-wrap::after{
  content:'';position:absolute;
  top:clamp(18px,3vw,36px); /* centro crocino */
  bottom:0;width:0;
  border-left:1px dashed rgba(0,25,35,.18);
  pointer-events:none;z-index:4;
}
.linee-wrap::before{left:36px;}
.linee-wrap::after{right:36px;}
.grafica-manifesto{position:relative;margin-bottom:var(--sp-sezione-xs);}
.grafica-manifesto-divider-top{
  position:absolute;
  top:clamp(18px,3vw,36px);left:0;right:0;height:0;
  border-top:1px solid var(--line);
}
.grafica-manifesto-divider-top::before,
.grafica-manifesto-divider-top::after{
  content:'';position:absolute;width:24px;height:24px;top:0;
  background:url('../img/comuni/crocino.webp') center/contain no-repeat;
  pointer-events:none;z-index:5;
}
.grafica-manifesto-divider-top::before{left:36px;transform:translate(-50%,-50%);}
.grafica-manifesto-divider-top::after{right:36px;transform:translate(50%,-50%);}

/* intro (statement centrato) */
.grafica-intro{position:relative;padding:var(--sp-sezione) var(--margin) var(--sp-sezione-sm);text-align:center;}
.grafica-head{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);margin:0 0 var(--sp-f-lg);
}
.grafica-head em{font-style:italic;}
.grafica-cmyk{height:18px;width:auto;display:block;margin:0 auto var(--sp-f-sm);}
.grafica-intro-desc{
  font-family:var(--font-testo);font-weight:450;
  font-size:34px;letter-spacing:-.02em;line-height:var(--lh-titolo);color:var(--blk);
  margin:0;text-align:center;
}
.grafica-intro-desc strong{font-weight:800;}

/* divider tra intro e pilastri */
.page-grafica .foglio-inner > .cut-divider{margin-top:var(--sp-26);}
/* due pilastri (card) */
.pilastri{padding:0 var(--margin) var(--sp-8);}
.pilastri-grid{display:grid;gap:var(--sp-6);}
.pilastro-card{background:none;}
.pilastro-img{
  width:100%;height:300px;background:var(--bar);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;border-radius:6px;margin-bottom:var(--sp-26);
}
.pilastro-img::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(45deg, rgba(0,25,35,.06) 25%, transparent 25%, transparent 75%, rgba(0,25,35,.06) 75%),
    linear-gradient(45deg, rgba(0,25,35,.06) 25%, transparent 25%, transparent 75%, rgba(0,25,35,.06) 75%);
  background-size:24px 24px;background-position:0 0,12px 12px;
}
.pilastro-img.has-image{
  height:auto;aspect-ratio:1920/807;background:none;
}
.pilastro-img.has-image::before{display:none;}
.pilastro-img.has-image img{
  display:block;width:100%;height:100%;object-fit:cover;
}
.pilastro-img span{
  position:relative;z-index:1;
  font-family:var(--font-testo);font-size:var(--fs-etichetta-sm);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(0,25,35,.55);
}
.pilastro-body{padding:0;}
.pilastro-title{
  font-family:var(--font-titolo);font-weight:400;
  font-size:34px;color:var(--blk);line-height:1;margin:0;
}
.pilastro-title em{font-style:italic;}
.pilastro-desc{
  font-family:var(--font-testo);font-size:16px;font-weight:450;
  color:rgba(0,25,35,.65);line-height:var(--lh-arioso);margin:var(--sp-12) 0 0;
}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .pilastri-grid{grid-template-columns:1fr;}
}

/* gallery */
.gallery-sec{padding:var(--sp-sezione-sm) var(--margin) clamp(72px,9vw,96px);position:relative;overflow:hidden;}.gallery-head-row{
  display:flex;align-items:baseline;justify-content:center;
  margin-bottom:var(--sp-26);flex-wrap:wrap;gap:var(--sp-16);
}
.gallery-head{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);margin:0;
  text-align:center;
}
.gallery-head em{font-style:italic;}
.gallery-row{display:grid;gap:var(--sp-6);margin-bottom:var(--sp-6);}
.gallery-row:last-child{margin-bottom:0;}
.gallery-row.top{grid-template-columns:5fr 5fr;}
.gallery-row.bottom{grid-template-columns:3fr 3fr 4fr;}
.gallery-img{
  background:var(--bar);border-radius:6px;
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.gallery-img::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(45deg, rgba(0,25,35,.06) 25%, transparent 25%, transparent 75%, rgba(0,25,35,.06) 75%),
    linear-gradient(45deg, rgba(0,25,35,.06) 25%, transparent 25%, transparent 75%, rgba(0,25,35,.06) 75%);
  background-size:24px 24px;background-position:0 0,12px 12px;
}
.gallery-img span{
  position:relative;z-index:1;
  font-family:var(--font-testo);font-size:var(--fs-etichetta-sm);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(0,25,35,.55);
  text-align:center;padding:0 12px;
}
.gallery-img.has-image::before{display:none;}
.gallery-img.has-image img{width:100%;height:100%;object-fit:contain;object-position:center;position:relative;z-index:1;}
/* immagine con abbondanza: riempie il box e sborda in modo controllato */
.gallery-img.has-image.bleed img{object-fit:cover;transform:scale(1.15);}
/* titolo + immagini a piena larghezza */
.gallery-sec .col-2-11{grid-column:1 / -1;}
.gallery-row.top .gallery-img{height:410px;}
.gallery-row.bottom .gallery-img{height:410px;}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .gallery-row.top,.gallery-row.bottom{grid-template-columns:1fr;}
  .gallery-row.top .gallery-img,
  .gallery-row.bottom .gallery-img{height:220px;}
}

/* prestampa (dark) */
.prestampa{background:var(--blk);position:relative;}

/* ════════ [ETICHETTE] etichette.html ════════ */

/* primo sguardo (testo + visual full-bleed) */
.sguardo{position:relative;overflow:hidden;min-height:97vh;}
.sguardo-text{
  position:relative;z-index:2;
  padding:var(--sp-sezione) clamp(40px,5vw,90px) var(--sp-sezione-sm) var(--margin);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-48);
  max-width:60%;min-height:97vh;
}
.sguardo-headline{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);
}
.sguardo-headline em{font-style:italic;}
.sguardo-body{
  font-family:var(--font-testo);font-size:var(--fs-testo);
  font-weight:400;letter-spacing:normal;text-transform:none;
  color:rgba(0,25,35,.72);line-height:var(--lh-arioso);max-width:48ch;
}
.sguardo-visual{position:absolute;inset:0;z-index:0;background:var(--cream);}
.sguardo-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right bottom;z-index:3;}
.sguardo-pallini{display:none;}

/* ════════ "SGUARDO" (etichette) — MOBILE: STACK title → foto → didascalia ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-etichette .sguardo{
    display:flex;flex-direction:column;
    min-height:0;
    padding:var(--sp-sezione-sm) var(--margin);
    background:var(--cream);
  }
  .page-etichette .sguardo-text{display:contents;}
  .page-etichette .sguardo-pallini{
    display:block;order:1;
    height:12.96px;width:auto;
    margin:0 auto var(--sp-f-sm);
  }
  .page-etichette .sguardo-headline{
    order:2;text-align:center;
    margin:0 0 var(--sp-26);
  }
  .page-etichette .sguardo-visual{
    order:3;position:relative;inset:auto;
    width:auto;aspect-ratio:1194/933;min-height:0;
    margin:0 calc(-1 * var(--margin)) var(--sp-26);
  }
  .page-etichette .sguardo-body{
    order:4;text-align:center;
    margin:0 auto;
  }
}

/* quattro motivi (usa .motivo-bar condivisa) */
.motivi-vline{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--line-soft);pointer-events:none;z-index:4;}
.motivi-vline.left{left:36px;}
.motivi-vline.right{right:36px;}
.motivi-side{position:absolute;top:65%;transform:translateY(-65%);z-index:5;pointer-events:none;}
.motivi-side.left{left:var(--margin);}
.motivi-side.right{right:var(--margin);}
.motivi-side img{height:620px;width:auto;display:block;}
.motivi-head{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);
  margin:0 0 var(--sp-sezione-xs);text-align:center;
}
.motivi-head em{font-style:italic;}
.motivi-list{display:grid;gap:var(--sp-6);align-items:stretch;}

/* tecnologie */
.tecno{position:relative;padding:var(--sp-sezione) var(--margin) var(--sp-sezione-sm);text-align:center;}
.tecno-head{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);margin-bottom:var(--sp-56);text-align:center;
}
.tecno-head em{font-style:italic;}
.tecno-grid{display:grid;gap:var(--sp-6);text-align:left;}
.tecno-img{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:var(--blk);margin-bottom:var(--sp-26);
  display:flex;align-items:center;justify-content:center;
}
/* foto reali al posto del placeholder: riempiono il box 16/9 */
.tecno-img img{width:100%;height:100%;object-fit:cover;display:block;}
.tecno-sub{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);margin-bottom:var(--sp-16);}
.tecno-subtitle{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo-4);line-height:var(--lh-titolo);color:var(--blk);
}.tecno-desc{
  font-family:var(--font-testo);font-size:var(--fs-etichetta-lg);
  font-weight:500;color:rgba(0,25,35,.6);line-height:var(--lh-arioso);max-width:46ch;
}

/* dettagli / finiture (card scure 3:4) */
.dettagli{position:relative;padding:var(--sp-sezione-sm) var(--margin) var(--sp-sezione);}
.dettagli-head{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);margin-bottom:var(--sp-f-lg);
  text-align:center;
}
.dettagli-head em{font-style:italic;}
/* Griglia 12 col: riga 1 = 4 card (span 3), riga 2 = 3 card larghe (span 4) che riempiono */
.dettagli-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-6);}
.dettagli-grid > .det-card{grid-column:span 3;}
.dettagli-grid > .det-card.det-wide{grid-column:span 4;}
.det-card{
  position:relative;display:flex;flex-direction:column;
  border-radius:6px;overflow:hidden;background:var(--blk);
  height:clamp(380px,33vw,480px);
}
/* gradiente multiply bianco→nero sul piede della card (leggibilità testo) */
.det-card:has(.det-media)::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:65%;
  background:linear-gradient(to bottom,#fff 0%,#001923 100%);
  mix-blend-mode:multiply;
  z-index:1;pointer-events:none;
}
.det-media{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;}
.det-media img{width:100%;height:100%;object-fit:cover;display:block;}
.det-body{position:relative;z-index:2;margin-top:auto;padding:var(--sp-20) 22px var(--sp-26);}
.det-title{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo-5);line-height:var(--lh-titolo);color:#fff;margin-bottom:var(--sp-14);
}
.det-desc{
  font-family:var(--font-testo);font-size:var(--fs-testo-sm);font-weight:500;
  color:rgba(255,255,255,.6);line-height:var(--lh-arioso);
}

/* ════════ [CHI-SIAMO] chi-siamo.html ════════ */

/* missione (statement centrato) */
.missione{position:relative;padding:var(--sp-sezione) var(--margin) var(--sp-sezione-sm);text-align:center;}
.missione-label{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);letter-spacing:normal;text-transform:none;
  color:var(--blk);line-height:var(--lh-display);margin-bottom:var(--sp-f-lg);
}
.missione-label em{font-style:italic;}
.missione-cmyk{height:18px;width:auto;display:block;margin:0 auto var(--sp-f-sm);}
.missione-body{
  font-family:var(--font-testo);font-weight:450;
  font-size:var(--fs-titolo-4);line-height:var(--lh-titolo);color:var(--blk);
  margin:0;text-align:center;
}
.missione-body strong{font-weight:800;}
/* visione: gemella della missione, subito sotto (niente pallini CMYK) */
.visione{padding-top:0;}

/* valori (card scure) */
.valori{position:relative;padding:var(--sp-sezione-xs) var(--margin) var(--sp-sezione);}
/* storia / calendario 3D */
.storia{position:relative;padding:0 var(--margin) var(--sp-sezione);}.storia-head{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);
  margin:0 0 var(--sp-sezione-xs);text-align:left;
}
.storia-head em{font-style:italic;}
/* layout: titolo+CTA a sinistra, calendario 3D a destra */
.storia-layout{display:grid;gap:clamp(24px,4vw,60px);align-items:center;}
.storia-left{display:flex;flex-direction:column;justify-content:center;}
.storia-layout .storia-head{margin:0 0 var(--sp-blocco);font-size:clamp(40px,5.4vw,84px);}
.cal-stage{height:clamp(480px,52vw,740px);min-width:0;position:relative;}
/* ── storia chi-siamo: canvas fino all'ultima colonna dx, testo dalla prima a sx ── */
@media(min-width:901px) and (pointer:fine){
  .page-chi-siamo .storia .col-2-11{grid-column:1 / -1;}
  .page-chi-siamo .storia .cal-stage{height:clamp(660px,71vw,1010px);}
}
/* chiusura delle tratteggiate sopra al titolo: crocini interi (non clippati dal foglio) */
.page-chi-siamo .storia-cut-top{
  position:absolute;top:36px;left:0;right:0;margin:0;z-index:6;
}
.page-chi-siamo .storia-cut-vline{
  position:absolute;top:0;height:36px;width:0;
  border-left:1px dashed var(--line-soft);
  pointer-events:none;z-index:4;
}
.page-chi-siamo .storia-cut-vline.left{left:36px;}
.page-chi-siamo .storia-cut-vline.right{right:36px;}
.cal-stage canvas{display:block;width:100%;height:100%;}
.cal-cta{max-width:460px;}
.cal-cta-title{font-family:var(--font-testo);font-weight:800;font-size:var(--fs-titolo-5);line-height:var(--lh-titolo);color:var(--blk);margin:0 0 var(--sp-12);}
.cal-cta-sub{font-family:var(--font-testo);font-weight:400;font-size:clamp(15px,1.35vw,20px);line-height:var(--lh-corpo);color:var(--blk);margin:0 0 var(--sp-f-md);}
.storia-lead{max-width:460px;}
/* hint "trascina le pagine": stesso stile piccolo di .partner-sub */
.cal-cta-hint{
  font-family:var(--font-testo);font-size:var(--fs-testo);
  font-weight:500;color:rgba(0,25,35,.55);line-height:var(--lh-arioso);
  margin:0 0 var(--sp-f-md);
}
.cal-nav{display:flex;align-items:center;gap:var(--sp-14);}
.cal-arrow{display:flex;align-items:center;justify-content:center;height:56px;width:104px;border:1.5px solid var(--blk);border-radius:32px;background:transparent;color:var(--blk);cursor:pointer;transition:background .2s,color .2s,transform .15s,opacity .2s;}
.cal-arrow svg{width:38px;height:16px;}
.cal-zoom{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1.5px solid var(--blk);border-radius:50%;background:transparent;color:var(--blk);cursor:pointer;transition:background .2s,color .2s,transform .15s;}
.cal-zoom svg{width:22px;height:22px;}
.cal-zoom .zoom-v{transition:opacity .2s;}
.cal-zoom.is-zoomed .zoom-v{opacity:0;}
.cal-arrow:hover,.cal-zoom:hover{background:var(--blk);color:var(--cream);}
.cal-arrow:active,.cal-zoom:active{transform:scale(.95);}
.cal-arrow:disabled{opacity:.3;cursor:default;background:transparent;color:var(--blk);transform:none;}
@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .storia-layout{gap:var(--sp-20);}
  .cal-stage{order:-1;height:clamp(360px,80vw,520px);}
  .storia-layout .storia-head{font-size:clamp(40px,9vw,64px);margin-bottom:var(--sp-16);}
  .cal-cta{max-width:none;}
}

/* reparti (griglia card) */
.persone-head{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);
  margin-bottom:var(--sp-f-lg);
  text-align:center;
}
.persone-head em{font-style:italic;}
.team{position:relative;padding:var(--sp-blocco) var(--margin) var(--sp-sezione);}

/* richiamo sostenibilita (foglio chiaro: titolo centrale, bubble marchi, CTA) */
.sost-richiamo{
  position:relative;text-align:center;
  padding:var(--sp-sezione) var(--margin) var(--sp-sezione);
}
.sost-richiamo-title{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);
}
.sost-richiamo-title em{font-style:italic;}
.sost-richiamo-sub{
  font-family:var(--font-testo);font-size:var(--fs-testo);
  font-weight:500;color:rgba(0,25,35,.55);line-height:var(--lh-arioso);
  max-width:52ch;margin:var(--sp-16) auto 0;
}
/* bubble marchi: come le logo-card dei partner ma piu grandi e fisse */
.sost-badges{
  display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;
  gap:var(--sp-6);
  margin:var(--sp-sezione-xs) 0 var(--sp-f-lg);
}
.sost-badge{
  width:clamp(240px,26vw,340px);
  background:#fff;border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-20);
  padding:var(--sp-blocco) clamp(20px,2.4vw,32px);
  box-shadow:0 1px 0 rgba(0,25,35,.06);
}
.sost-badge img{height:clamp(72px,8vw,104px);width:auto;max-width:80%;object-fit:contain;}
.sost-badge-name{
  font-family:var(--font-testo);font-size:var(--fs-etichetta-sm);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(0,25,35,.5);
}
.sost-richiamo-btn{
  display:inline-block;
  font-family:var(--font-testo);font-weight:600;
  font-size:var(--fs-testo);
  letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--blk);
  padding:var(--sp-16) 40px;text-decoration:none;
  transition:background .2s ease;
}
.sost-richiamo-btn:hover{background:var(--org,#E84A2F);}
@media(max-width:680px){
  .sost-badge{width:min(100%,340px);}
}

/* ════════ [SOSTENIBILITA] sostenibilita.html ════════ */
/* statement iniziale (stessa gabbia di .missione) */
.esg-intro{position:relative;padding:var(--sp-sezione) var(--margin) var(--sp-sezione-sm);text-align:center;}

/* ── ESG: tre bubble (riusa .chat-* della home) ── */
.esg{position:relative;padding:var(--sp-sezione-sm) var(--margin) var(--sp-blocco);}
.esg-grid{display:grid;gap:var(--sp-6);align-items:stretch;}
.esg-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid rgba(0,25,35,.09);border-radius:6px;
  padding:var(--sp-blocco);box-shadow:0 6px 22px rgba(0,25,35,.05);
}.esg-title{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo-3);line-height:var(--lh-titolo);color:var(--blk);
  margin-bottom:var(--sp-12);
}
.esg-text{
  font-family:var(--font-testo);font-size:var(--fs-testo-lg);
  font-weight:450;color:rgba(0,25,35,.7);line-height:var(--lh-corpo);margin:0;
}.esg-visual{
  position:relative;background:var(--blk);border-radius:14px;
  aspect-ratio:21/9;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* Chi siamo: box ph-stripe (esg-visual) smussato a 6px */
.page-chi-siamo .esg-visual{border-radius:6px;}
/* foto reale al posto del placeholder: riempie il box 21/9 (16/10 su mobile) */
.esg-visual img{width:100%;height:100%;object-fit:cover;display:block;}

/* ── certificazioni (titolo centrato, marchi cliccabili) ── */
.cert-band{
  position:relative;overflow:hidden;text-align:center;
  background:transparent;
  padding:var(--sp-sezione) var(--margin);
}
/* linea piena semplice sotto la sezione (senza crocini) */
.cert-baseline{
  position:relative;height:1px;background:var(--line-soft);
  margin-left:calc(-1*var(--margin));margin-right:calc(-1*var(--margin));
}
.cert-band-title{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);margin-bottom:0;
}
.cert-band-title em{font-style:italic;}
.cert-band-desc{
  font-family:var(--font-testo);font-size:var(--fs-testo);
  font-weight:500;color:rgba(0,25,35,.6);line-height:var(--lh-arioso);max-width:60ch;margin:var(--sp-16) auto 0;
}
.cert-cards{
  display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;
  gap:var(--sp-6);
  margin:var(--sp-sezione-xs) auto 0;
}
.cert-card{
  width:clamp(240px,26vw,340px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  background:#fff;border-radius:6px;
  padding:var(--sp-blocco) clamp(20px,2.4vw,32px);text-decoration:none;
  box-shadow:0 1px 0 rgba(0,25,35,.06);
  transition:transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s ease;
}
.cert-card:hover{transform:translateY(-5px);box-shadow:0 24px 48px -20px rgba(0,25,35,.22);}
/* loghi certificazione a colori, centrati nel box */
.cert-card-logo{
  height:clamp(64px,7vw,96px);width:auto;max-width:100%;display:block;
  margin-bottom:var(--sp-20);
}
.cert-card-name{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo-5);line-height:var(--lh-titolo);color:var(--blk);margin-bottom:var(--sp-8);
}
.cert-card-num{
  font-family:var(--font-testo);font-size:var(--fs-etichetta-sm);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(0,25,35,.45);
}
.cert-card-hint{
  margin-top:var(--sp-16);
  font-family:var(--font-testo);font-size:var(--fs-etichetta);font-weight:600;
  color:var(--blk);text-decoration:underline;text-underline-offset:4px;
  transition:color .2s ease;
}
.cert-card:hover .cert-card-hint{color:var(--org);}
/* contenuto sopra le decorazioni cmyk/tratteggio */
.cert-band-text,.cert-cards{position:relative;z-index:6;}
/* su mobile nascondi i cmyk laterali della cornice certificazioni */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .cert-band .motivi-side{display:none;}
}

/* ── documenti (righe titolo + testo + pulsante) ── */
.doc-sec{position:relative;padding:var(--sp-sezione) var(--margin) var(--sp-sezione);}
.doc-head{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);color:var(--blk);
  margin-bottom:var(--sp-f-sm);
  text-align:center;
}
.doc-head em{font-style:italic;}.doc-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,64px);
  padding:var(--sp-20) 0;
  border-top:1px solid var(--line-soft);
}
.doc-row:last-child{border-bottom:1px solid var(--line-soft);}
.doc-title{
  font-family:var(--font-titolo);font-weight:400;
  font-size:clamp(26px,3.2vw,46px);line-height:1;color:var(--blk);margin-bottom:var(--sp-10);
}
.doc-title em{font-style:italic;}.doc-btn{background:var(--blk);color:#fff;flex-shrink:0;white-space:nowrap;}
.doc-btn:hover{background:var(--org,#E84A2F);color:#fff;}

/* responsive sostenibilità
   (--margin è globale: vedi :root, soglie 1000/560px) */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .esg-visual{aspect-ratio:16/10;}
  .doc-row{flex-direction:column;align-items:flex-start;gap:var(--sp-20);}
}
@media(max-width:680px){
  .cert-card{width:min(100%,340px);}
}

/* ════════ RESPONSIVE — PAGINE INTERNE (la home ha i suoi override nella sezione [HOME]) ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  /* --margin è globale: vedi :root (soglie 1000/560px) */
  /* stampati */
  .page-stampati .tutto-grid{grid-template-columns:repeat(2,1fr);}
  /* etichette */
  .page-etichette .dettagli-grid > .det-card,
  .page-etichette .tutto-grid{grid-template-columns:repeat(2,1fr);}  .page-chi-siamo .tutto-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-etichette .tecno-grid{gap:clamp(32px,8vw,48px);}
  .page-etichette .motivi-side{display:none;}
  .page-chi-siamo .studio-side{display:none;}
}
@media(max-width:560px){
  .nav{padding:var(--sp-16) var(--margin);}
  .page-stampati .tutto-grid{grid-template-columns:1fr;}
  .page-etichette .tutto-grid{grid-template-columns:1fr;}
  /* Lavorazioni su mobile: carosello trascinabile con peek delle card adiacenti */
  .page-etichette .dettagli-grid{
    display:flex;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    gap:var(--sp-14);
    margin-left:calc(-1 * var(--margin));margin-right:calc(-1 * var(--margin));
    padding:var(--sp-2) var(--margin) var(--sp-14);scroll-padding-inline:var(--margin);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .page-etichette .dettagli-grid::-webkit-scrollbar{display:none;}
  .page-etichette .dettagli-grid > .det-card,
  .page-etichette .dettagli-grid > .det-card.det-wide{
    grid-column:auto;flex:0 0 76%;height:auto;aspect-ratio:3/4;
    scroll-snap-align:center;
  }}

/* ════════ CONTACT DRAWER — pannello laterale di contatto (markup e logica in contact-drawer.js) ════════ */
.cd-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,25,35,.55);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .38s ease,visibility .38s ease;
}
.cd-overlay.cd-open{opacity:1;visibility:visible;}

.cd-drawer{
  position:fixed;top:0;right:0;z-index:1001;
  width:min(460px,92vw);height:100%;
  background:#fff;color:var(--blk,#001923);
  box-shadow:-24px 0 60px rgba(0,0,0,.28);
  transform:translateX(100%);transition:transform .42s cubic-bezier(.4,0,.15,1);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.cd-drawer.cd-open{transform:translateX(0);}

.cd-inner{padding:clamp(34px,5vw,52px) clamp(28px,4vw,44px) clamp(40px,5vw,56px);}

.cd-close{
  position:absolute;top:18px;right:18px;z-index:2;
  width:40px;height:40px;border-radius:999px;border:1px solid rgba(0,25,35,.18);
  background:transparent;color:var(--blk,#001923);cursor:pointer;
  font-size:20px;line-height:1;display:grid;place-items:center;
  transition:background .2s,border-color .2s,transform .2s;
}
.cd-close:hover{background:rgba(0,25,35,.06);border-color:rgba(0,25,35,.4);transform:rotate(90deg);}

/* claim in testa */
.cd-claim{margin:var(--sp-10) 0 var(--sp-8);font-family:var(--font-titolo);font-weight:400;
  font-size:clamp(38px,5.4vw,56px);line-height:var(--lh-display);letter-spacing:normal;color:var(--blk,#001923);}
.cd-sub{margin:0 0 var(--sp-16);font-family:var(--font-testo);font-weight:400;
  font-size:clamp(15px,1.6vw,18px);line-height:var(--lh-testo);color:rgba(0,25,35,.72);max-width:34ch;}
.cd-sub em{font-family:var(--font-testo);font-style:normal;font-weight:500;color:var(--blk,#001923);}

/* contatti diretti (email + telefono), sopra il form */
.cd-direct{
  display:flex;flex-direction:column;gap:var(--sp-12);
  margin:0 0 var(--sp-20);padding:var(--sp-16) 0 var(--sp-16);
  border-top:1px solid rgba(0,25,35,.12);
  border-bottom:1px solid rgba(0,25,35,.12);
}
.cd-direct a{
  font-family:var(--font-testo);font-weight:600;
  font-size:clamp(15px,1.6vw,17px);line-height:var(--lh-medio);
  color:var(--blk,#001923);text-decoration:none;
  overflow-wrap:anywhere;transition:color .2s;align-self:flex-start;
}
.cd-direct a:hover{color:var(--org,#E84A2F);}

/* form */
.cd-form{display:flex;flex-direction:column;gap:var(--sp-16);}
.cd-field{display:flex;flex-direction:column;gap:7px;}.cd-label{font-family:var(--font-testo);font-size:9px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(0,25,35,.5);}
.cd-label .cd-opt{color:rgba(0,25,35,.3);font-weight:500;letter-spacing:.12em;}
.cd-input,.cd-textarea{
  font-family:var(--font-testo);font-size:var(--fs-testo);color:var(--blk,#001923);
  background:rgba(0,25,35,.04);border:1px solid rgba(0,25,35,.16);
  border-radius:6px;padding:var(--sp-12) 15px;width:100%;
  transition:border-color .2s,background .2s;
}
.cd-input::placeholder,.cd-textarea::placeholder{color:rgba(0,25,35,.34);}
.cd-input:focus,.cd-textarea:focus{outline:none;border-color:var(--org,#E84A2F);background:#fff;}
.cd-textarea{resize:vertical;min-height:110px;line-height:var(--lh-testo);}

.cd-submit{
  margin-top:var(--sp-8);font-family:var(--font-testo);font-weight:600;font-size:var(--fs-testo-sm);
  letter-spacing:.02em;color:#fff;background:var(--blk,#001923);
  border:none;border-radius:999px;padding:var(--sp-14) 22px;cursor:pointer;
  transition:background .2s,color .2s;
}
.cd-submit:hover{background:var(--org,#E84A2F);color:#fff;}
.cd-hint{margin-top:var(--sp-2);font-family:var(--font-testo);font-size:var(--fs-etichetta-sm);color:rgba(0,25,35,.42);}
.cd-hint em{font-style:normal;font-weight:600;}
.cd-privacy{margin-top:0;font-family:var(--font-testo);font-size:var(--fs-etichetta-sm);color:rgba(0,25,35,.55);}
.cd-privacy a{color:rgba(0,25,35,.72);text-decoration:underline;text-underline-offset:2px;}
.cd-privacy a:hover{color:var(--org,#E84A2F);}

/* stato di conferma — stesso stile del sottotitolo (.cd-sub) */
.cd-success{display:none;padding:var(--sp-8) 0;}
.cd-drawer.is-sent .cd-form{display:none;}
.cd-drawer.is-sent .cd-success{display:block;}
.cd-success h3{margin:0;font-family:var(--font-testo);font-style:normal;font-weight:400;
  font-size:clamp(15px,1.6vw,18px);line-height:var(--lh-testo);letter-spacing:normal;color:rgba(0,25,35,.72);}
.cd-success p{font-family:var(--font-testo);font-size:var(--fs-testo);line-height:var(--lh-testo);color:rgba(0,25,35,.72);margin:0;}

/* social in fondo al form */
.cd-social{display:flex;gap:var(--sp-12);margin-top:var(--sp-20);}
.cd-social a{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:999px;border:1px solid rgba(0,25,35,.18);color:rgba(0,25,35,.7);transition:background .2s,color .2s,border-color .2s;}
.cd-social a:hover{background:var(--blk,#001923);color:#fff;border-color:var(--blk,#001923);}
.cd-social svg{width:18px;height:18px;}

/* ════════ MOBILE NAV ════════ */
/* Bottone hamburger: nascosto di default, mostrato sotto 820px.
   Iniettato da js/mobile-nav.js dentro header.nav e #navSticky. */
.nav-burger{
  display:none;
  position:relative;
  width:44px;height:44px;
  background:transparent;border:none;padding:0;margin:0;
  cursor:pointer;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.nav-burger-line{
  display:block;position:absolute;left:50%;top:50%;
  width:24px;height:2px;
  background:#fff;border-radius:2px;
  
}
.nav-burger-line:nth-child(1){transform:translate(-50%,-50%) translateY(-4px);}
.nav-burger-line:nth-child(2){transform:translate(-50%,-50%) translateY(4px);}
.nav-burger.is-open .nav-burger-line:nth-child(1){
  transform:translate(-50%,-50%) translateY(-4px) rotate(-45deg);
}
.nav-burger.is-open .nav-burger-line:nth-child(2){
  transform:translate(-50%,-50%) translateY(-4px) rotate(45deg);
}
.nav-sticky .nav-burger-line{background:#fff;}
.nav-burger-line{transition:transform .32s cubic-bezier(.65,0,.35,1),background .32s ease;}
.nav-burger.is-open .nav-burger-line{background:var(--blk,#001923);}
@media(prefers-reduced-motion:reduce){
  .nav-burger-line{transition:none;}
}

.nav-burger--floating{
  position:fixed;z-index:600;
}
.nav-burger--floating.nav-burger--blend{mix-blend-mode:difference;}
.nav-burger--floating.nav-burger--blend .nav-burger-line{background:#fff;}

.nav-logo--floating{
  position:fixed;z-index:600;
}
.nav-logo--floating img{mix-blend-mode:normal;filter:brightness(1);transition:filter .3s ease;}
.nav-logo--floating.nav-logo--dark img{filter:brightness(0);}
@media(prefers-reduced-motion:reduce){
  .nav-logo--floating img{transition:none;}
}

@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .nav .nav-links,
  .nav-sticky .nav-links{display:none;}
  .nav-burger{display:flex;}
  .nav-burger::before{content:'';position:absolute;inset:-6px;}
  .nav-sticky .nav-logo{overflow:hidden;}
  body.mobile-menu-open .nav-sticky{z-index:550;}
  body.mobile-menu-wide .nav-sticky .nav-logo{width:122px;}
  .nav-sticky .nav-logo img{height:31px;}
  .nav-sticky{padding:0 26px;}
  .nav-sticky .nav-logo,
  .nav-sticky .nav-burger{margin-top:var(--sp-26);}
  .nav-shade{height:104px;margin-bottom:-104px;}
  .nav-sticky.visible.nav-sticky--hide-scroll{pointer-events:none;}
  .nav-shade.visible{transition:opacity .4s cubic-bezier(0.22,1,0.36,1),transform .4s cubic-bezier(0.22,1,0.36,1);}
  .nav-shade.visible.nav-shade--hide-scroll{transform:translateY(-100%);}
}

/* Overlay menu mobile: link centrati, colonna, tipografia in-brand.
   Markup iniettato da js/mobile-nav.js, agganciato a document.body. */
.mobile-menu{
  position:fixed;inset:0;z-index:500;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  background:var(--cream,#EFEDE9);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mobile-menu.open{opacity:1;pointer-events:auto;}
.mobile-menu-links{
  position:relative;z-index:3;      /* sopra grain (z-index:1) e dots-layer (z-index:2) */
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(4px,1.2vh,12px);
  padding:0 var(--margin,24px);
  text-align:left;
}
.mobile-menu-links .nav-link{
  position:static;
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);
  letter-spacing:normal;text-transform:none;
  color:var(--blk,#001923);text-decoration:none;
  padding:var(--sp-8) 12px;                  /* a11y: target ≥44px (WCAG 2.5.5) */
}
.mobile-menu-links .nav-link::before,
.mobile-menu-links .nav-link::after{content:none;}
.mobile-menu-links .nav-link::first-letter{text-transform:uppercase;}
.mobile-menu-links .nav-link:hover,
.mobile-menu-links .nav-link.active{color:var(--org,#E84A2F);}

/* ════════ MOBILE 360px — SEZIONI ════════ */

@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .studio-stage{grid-column:1 / -1;}
  .studio-inner > *{min-width:0;}
  .studio-body{font-size:clamp(19px,5.2vw,24px);}
}

@media(max-width:720px){
  .chat-row.chat-left .chat-bubble{margin-left:8%;}
  .chat-row.chat-right .chat-bubble{margin-left:0;}
  .chat-bubble{width:92%;padding:var(--sp-26) 24px;}  .dipendenti-deco{display:none;}
}

@media(max-width:680px){
  .page-sost .tutto-grid{grid-template-columns:1fr;}
}

@media(max-width:560px){
  .bar-label{white-space:normal;font-size:var(--fs-etichetta-sm);line-height:var(--lh-medio);right:8px;}
}

/* 5) CTA — la freccia "→" va a capo nei bottoni (es. "Scrivici →").
   Regola globale, innocua su desktop. */
.cta-btn,.cta-btn-ghost{white-space:nowrap;}

/* ── Freccia SVG nei cliccabili ── */
.btn-arr{
  display:inline-block;vertical-align:middle;flex-shrink:0;
  width:1.55em;height:.62em;margin-left:.55em;
  transition:transform .25s ease;
}
.tutto-btn .btn-arr{margin-left:0;}
.cta-btn:hover .btn-arr,
.cta-btn-ghost:hover .btn-arr,
.tutto-btn:hover .btn-arr,
.sost-richiamo-btn:hover .btn-arr,
.cert-card:hover .btn-arr,
.page-home .hero-cta:hover .btn-arr{transform:translateX(.28em);}

/* ════════ TRE BUONI MOTIVI — card bianche verticali, testo centrato ════════ */
.motivo-bar--tre{
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  text-align:center;
  gap:clamp(16px,1.6vw,22px);
  background:#fff;
  border-radius:20px;
  padding:clamp(34px,3vw,52px) clamp(24px,2vw,34px);
  box-shadow:0 12px 40px rgba(0,25,35,.06);
  height:100%;
}
.motivo-bar--tre .motivo-title{
  margin:0;flex-shrink:0;text-align:center;
  font-size:clamp(26px,2.3vw,40px);line-height:var(--lh-titolo);
}
.motivo-bar--tre .motivo-desc{
  margin:0;max-width:100%;flex-shrink:1;text-align:center;
}
.motivo-bar--tre{transition:none;}
.motivo-bar--tre:hover{transform:none;}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .motivo-bar--tre{padding:var(--sp-26) 24px;}
  .motivo-bar--tre .motivo-title{font-size:28px;}
  .motivo-bar--tre .motivo-title br{display:none;}
}

/* ════════ CONTROLLO QUALITÀ — 3 icone + frecce ════════ */
.cq-flow{
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(16px,2.4vw,40px);
  max-width:1180px;margin:0 auto;
}
.cq-step{
  flex:1 1 0;min-width:0;max-width:320px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.cq-icon{
  width:clamp(56px,6vw,84px);height:clamp(56px,6vw,84px);
  color:var(--blk);margin-bottom:clamp(14px,1.6vw,22px);
}
.cq-icon svg{width:100%;height:100%;display:block;}
.cq-icon img{width:100%;height:100%;display:block;object-fit:contain;}
.cq-step-title{
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo-4);line-height:1;color:var(--blk);
  margin:0 0 clamp(10px,1.2vw,16px);
}
.cq-step-desc{
  font-family:var(--font-testo);font-weight:450;
  font-size:var(--fs-testo-sm);line-height:var(--lh-corpo);
  color:rgba(0,25,35,.78);margin:0;
}
.cq-arrow{
  flex-shrink:0;width:clamp(34px,3.4vw,52px);color:var(--blk);
  align-self:flex-start;
  margin-top:var(--sp-f-md);
}
.cq-arrow svg{width:100%;height:auto;display:block;}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .cq-flow{flex-direction:column;align-items:center;gap:var(--sp-16);}
  .cq-step{max-width:52ch;}
  .cq-arrow{align-self:center;margin-top:0;transform:rotate(90deg);width:30px;}
}

/* ════════ CARD SERVIZI HOME — nome + scopri di più ════════ */

/* ════════ [STAMPATI] Tecnologie di stampa + Lavorazioni speciali ════════ */

/* 3 card larghe = 12 colonne piene */
.page-stampati .dettagli-grid > .det-card.det-wide{grid-column:span 4;}

@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .tecno-grid{gap:clamp(32px,8vw,48px);}
}
@media(max-width:560px){
  .page-stampati .dettagli-grid{
    display:flex;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    gap:var(--sp-14);
    margin-left:calc(-1 * var(--margin));margin-right:calc(-1 * var(--margin));
    padding:var(--sp-2) var(--margin) var(--sp-14);scroll-padding-inline:var(--margin);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .page-stampati .dettagli-grid::-webkit-scrollbar{display:none;}
  .page-stampati .dettagli-grid > .det-card,
  .page-stampati .dettagli-grid > .det-card.det-wide{
    grid-column:auto;flex:0 0 76%;height:auto;aspect-ratio:3/4;
    scroll-snap-align:center;
  }
}

/* ════════ [SOSTENIBILITÀ] ESG — spaziature simmetriche ════════ */
.page-sost .esg-intro{padding-bottom:0;}
.page-sost .esg{
  padding-top:var(--sp-sezione-sm);
  padding-bottom:var(--sp-sezione-sm);
}

/* ════════ [STAMPATI] Categorie — griglia reale, cornice e ritmo ════════ */

.page-stampati .cat-strips{
  /* colonna della griglia 12 ricavata dalla larghezza effettiva */
  --cat-col:calc((100% - 10 * var(--gutter) - var(--margin) + 36px) / 11);
  /* distanza dal bordo sinistro di .cat-strips alla cornice (36px dal foglio) */
  --cat-frame-l:calc(var(--cat-col) + var(--gutter) + var(--margin) - 36px);
  --cat-line:rgba(0,25,35,.12);
}

/* linee verticali della cornice: 36px dai bordi del foglio */
.page-stampati .cat-vline.left{left:calc(-1 * var(--cat-frame-l));}

/* ── Ritmo verticale delle strisce ── */
.page-stampati .striscia{min-height:clamp(300px,22vw,360px);}

/* ── Righe orizzontali: da cornice a cornice ── */
.page-stampati .striscia{
  margin-left:calc(-1 * var(--cat-frame-l));
  padding-left:var(--cat-frame-l);
  border-top:1px solid var(--cat-line);
}
.page-stampati .striscia:first-child{border-top:1px solid var(--cat-line);}
.page-stampati .striscia:nth-child(1 of .striscia){border-top:none;}  /* c'è già il cut-divider sopra */

/* ── Riga di chiusura al centro dei crocini finali ── */
.page-stampati .cat-crocini-bottom{
  margin-left:calc(-1 * (var(--cat-frame-l) + 36px));
  margin-right:-36px;
  border-top:1px solid var(--cat-line);
}
.page-stampati .cat-crocini-bottom .ccr{right:36px;}

/* ── Colonna testo: colonne 2-5 della griglia ── */
.page-stampati .striscia-left{
  flex:0 0 calc(4 * var(--cat-col) + 3 * var(--gutter));
  padding-left:0;
}

/* ── Barra CMYK: si adatta all'altezza della sezione, niente sforo ── */
.page-stampati .categorie-side{
  top:0;bottom:0;transform:none;width:14px;
  background:url('../img/comuni/cmyk-laterale-sx.webp') top center / 14px auto repeat-y;
}
.page-stampati .categorie-side img{display:none;}

/* ── Crocini finali sulla cornice ── */
.page-stampati .cat-crocini-bottom .ccl{left:36px;}

/* ── Mobile: si torna alla pila verticale, altezza dal contenuto ── */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .striscia{min-height:auto;}
  .page-stampati .striscia-left{flex:none;}
}

/* ════════ DRAG SUI CAROSELLI AUTOMATICI (js/drag-marquee.js) ════════ */
.marquee,
.striscia-right{
  cursor:grab;
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
}
.marquee:active,
.striscia-right:active{cursor:grabbing;}
.marquee-track,
.striscia-carousel{will-change:transform;}
.marquee-track img,
.striscia-carousel img{-webkit-user-drag:none;user-select:none;}

/* ════════ INTRO HERO PAGINE INTERNE ════════ */

/* stato di partenza (solo se il JS ha "armato" la hero) */
.hero-anim.is-armed .hero-desc,
.hero-anim.is-armed .hero-cta .cta-btn{opacity:0;}
.hero-anim.is-ready .hero-desc{opacity:1;}

/* 1) il pill bianco entra in fade + micro-scala: apre la scena */
.hero-anim.is-ready .hero-cta .cta-btn{
  animation:heroPillIn .6s cubic-bezier(0.16,1,0.3,1) 120ms both;
}
@keyframes heroPillIn{
  from{opacity:0;transform:translateY(10px) scale(.94);}
  to{opacity:1;transform:none;}
}

.hero-anim.is-armed .hero-cta .btn-arr line{stroke-dasharray:36;stroke-dashoffset:36;}
.hero-anim.is-armed .hero-cta .btn-arr polyline{opacity:0;}
.hero-anim.is-ready .hero-cta .btn-arr line{
  animation:heroArrDraw .5s cubic-bezier(0.16,1,0.3,1) 380ms both;
}
.hero-anim.is-ready .hero-cta .btn-arr polyline{
  transform-box:fill-box;transform-origin:left center;
  animation:heroArrTip .3s cubic-bezier(0.16,1,0.3,1) 780ms both;
}
@keyframes heroArrDraw{to{stroke-dashoffset:0;}}
@keyframes heroArrTip{
  from{opacity:0;transform:translateX(-3px);}
  to{opacity:1;transform:none;}
}

@media(min-width:721px){
  :is(.page-etichette,.page-grafica,.page-stampati,.page-sost) .hero-anim .hero-desc .split-line-inner{
    text-align:justify;text-align-last:justify;
  }
  :is(.page-etichette,.page-grafica,.page-stampati,.page-sost) .hero-anim .hero-desc .split-line-mask:last-child .split-line-inner{
    text-align-last:right;
  }
}

/* 4) movimento ridotto: tutto visibile subito, niente animazioni */
@media (prefers-reduced-motion: reduce){
  .hero-anim.is-armed .hero-desc,
  .hero-anim.is-armed .hero-cta .cta-btn{opacity:1;animation:none;}
  .hero-anim .hero-cta .btn-arr line{stroke-dashoffset:0;animation:none;}
  .hero-anim .hero-cta .btn-arr polyline{opacity:1;animation:none;}
  .hero-anim .hero-desc .split-line-inner{opacity:1;animation:none;}
  .hero-anim.is-armed .hero-title{transform:none;animation:none;}
}

/* ════════ CARD SERVIZI HOME — con descrizione ════════ */
.page-home .servizio-card{min-height:clamp(260px,26vw,340px);}
.page-home .servizio-name{text-wrap:balance;}
.servizio-desc{
  font-family:var(--font-testo);font-weight:400;
  font-size:var(--fs-testo);line-height:var(--lh-corpo);
  color:rgba(255,255,255,.72);
  margin:var(--sp-2) 0 var(--sp-26);max-width:38ch;
}
@media (max-width:900px), (min-width:721px) and (pointer:coarse){
  .page-home .servizio-card{min-height:0;}
  .servizio-desc{margin-bottom:var(--sp-20);max-width:none;}
}

/* ── Recensioni home: box di destra su fondo scuro ── */
.chat-row.chat-right .chat-bubble{
  background:var(--blk);
  border-color:var(--blk);
}
.chat-row.chat-right .chat-text{color:#fff;}
.chat-row.chat-right .chat-author{color:var(--cool);}

/* ════════ GRIGLIA 12 COLONNE — ASSEGNAZIONE PER SEZIONE ════════ */

/* ── HOME ───────────────────────────────────────────────────── */

/* servizi: 3 card → 4 colonne ciascuna (gap 2px = filetto divisorio) */
.servizi-grid{grid-template-columns:repeat(12,minmax(0,1fr));}
.servizi-grid > *{grid-column:span 4;}
@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .servizi-grid{grid-template-columns:repeat(12,minmax(0,1fr));}
  .servizi-grid > *{grid-column:1 / -1;}
}

/* studio (capacità): 3 colonne → span 4 */
.studio-caps{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);}
.studio-caps > *{grid-column:span 4;}
@media (max-width:720px){
  .studio-caps > *{grid-column:1 / -1;}
}

.servizi-header{grid-template-columns:repeat(12,minmax(0,1fr));}

/* ── "TUTTO QUELLO CHE SERVE" (presente su 5 pagine) ────────── */
.tutto-grid{grid-template-columns:repeat(12,minmax(0,1fr));}
.tutto-grid > *{grid-column:span 4;}
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-stampati .tutto-grid,
  .page-etichette .tutto-grid,
  .page-chi-siamo .tutto-grid{grid-template-columns:repeat(12,minmax(0,1fr));}
  .page-stampati .tutto-grid > *,
  .page-etichette .tutto-grid > *,
  .page-chi-siamo .tutto-grid > *{grid-column:span 6;}
  .page-sost .tutto-grid{grid-template-columns:repeat(12,minmax(0,1fr));}
  .page-sost .tutto-grid > *{grid-column:span 6;}
}
@media(max-width:680px){
  .page-grafica .tutto-grid{grid-template-columns:repeat(12,minmax(0,1fr));}
  .page-grafica .tutto-grid > *{grid-column:1 / -1;}
}
@media(max-width:560px){
  .tutto-grid > *,
  .page-stampati .tutto-grid > *,
  .page-etichette .tutto-grid > *,
  .page-chi-siamo .tutto-grid > *,
  .page-sost  .tutto-grid > *{grid-column:1 / -1;}
}

/* ── GRAFICA E PRESTAMPA ────────────────────────────────────── */

.pilastri-grid{
  grid-template-columns:repeat(12,minmax(0,1fr));
  max-width:none;margin:0;
}
.pilastri-grid > *{grid-column:span 6;}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .pilastri-grid > *{grid-column:1 / -1;}
}

.gallery-row.top,
.gallery-row.bottom{grid-template-columns:repeat(12,minmax(0,1fr));}
.gallery-row.top > *{grid-column:span 6;}
.gallery-row.bottom > *{grid-column:span 4;}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .gallery-row.top > *,
  .gallery-row.bottom > *{grid-column:1 / -1;}
}

/* ── ETICHETTE / STAMPATI ───────────────────────────────────── */

/* motivi: 3 → span 4 */
.motivi-list{grid-template-columns:repeat(12,minmax(0,1fr));}
.motivi-list > *{grid-column:span 4;}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .motivi-list{grid-template-columns:repeat(12,minmax(0,1fr));}
  .motivi-list > *{grid-column:1 / -1;}
}

.tecno-grid{
  grid-template-columns:repeat(12,minmax(0,1fr));
  max-width:none;margin:0;
}
.tecno-grid > *{grid-column:span 6;}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-etichette .tecno-grid > *{grid-column:1 / -1;}
  .page-stampati .tecno-grid > *{grid-column:1 / -1;}
}

.storia-layout{grid-template-columns:repeat(12,minmax(0,1fr));}
.storia-layout > *{grid-column:span 6;}
@media(min-width:901px) and (pointer:fine){
  .page-chi-siamo .storia-layout{grid-template-columns:repeat(12,minmax(0,1fr));}
  .page-chi-siamo .storia-layout > *:first-child{grid-column:span 5;}
  .page-chi-siamo .storia-layout > *:last-child{grid-column:span 7;}
}
@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .storia-layout{grid-template-columns:repeat(12,minmax(0,1fr));}
  .storia-layout > *{grid-column:1 / -1;}
}

/* ── SOSTENIBILITÀ ──────────────────────────────────────────── */

/* ESG: 3 → span 4 */
.esg-grid{grid-template-columns:repeat(12,minmax(0,1fr));}
.esg-grid > *{grid-column:span 4;}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .esg-grid > *{grid-column:1 / -1;}
}

/* ── ECCEZIONI ──────────────────────────────────── */

.page-stampati .categorie .grid12{--cols:12;}

/* Decori laterali: 100vw include la scrollbar → usare --vw.
   Stesso principio già applicato a .cat-vline e .manifesto-inner. */
.categorie-side.left{
  left:calc(-1 * ((var(--vw, 100vw) - 2*var(--margin) - 11*var(--gutter)) / 12 + var(--gutter)));
}

/* Carosello lavorazioni su mobile: resta flex, fuori griglia
   (scroll orizzontale con peek delle card adiacenti). */
@media(max-width:560px){
  .page-etichette .dettagli-grid,
  .page-stampati  .dettagli-grid{display:flex;grid-template-columns:none;}
  .page-etichette .dettagli-grid > .det-card,
  .page-etichette .dettagli-grid > .det-card.det-wide,
  .page-stampati  .dettagli-grid > .det-card,
  .page-stampati  .dettagli-grid > .det-card.det-wide{grid-column:auto;flex:0 0 76%;}
}

/* ════════ NAV STICKY — FONDO SFUMATO ════════ */
.nav-shade{
  position:sticky;top:0;height:84px;margin-bottom:-84px;
  z-index:99;                  /* sotto .nav-sticky (100), sopra il contenuto */
  background:linear-gradient(to bottom,var(--cream) 0%,rgba(239,237,233,.96) 65%,rgba(239,237,233,0) 100%);
  pointer-events:none;
  opacity:0;
  transition:opacity .4s cubic-bezier(0.22,1,0.36,1);
}
.nav-shade.visible{opacity:1;}
/* ════════ LINEE DI COSTRUZIONE VERTICALI — nascoste su mobile ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  /* Home — "Numeri che raccontano chi siamo" */
  .liberta-vline{display:none;}
  /* Home — "Una parola dai nostri clienti" */
  .chat-vline{display:none;}
  /* Chi siamo — "Mission, vision, valori" */
  .page-chi-siamo .studio-vline{display:none;}
  /* Grafica e prestampa — "Una selezione dei nostri lavori" */
  .linee-wrap::before,
  .linee-wrap::after{display:none;}
  /* Etichette — "Tre buoni motivi" e Sostenibilità —
     "Certificazioni e riconoscimenti" condividono .motivi-vline */
  .motivi-vline{display:none;}
  /* Stampati — caroselli e descrizioni prodotti */
  .cat-vline{display:none;}
}

/* ════════ CROCINI DI REGISTRO — riduzione ~20% su mobile ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .section-crocini img,
  .cut-divider::before,
  .cut-divider::after,
  .manifesto-divider-top::before,
  .manifesto-divider-top::after,
  .liberta-divider::before,
  .liberta-divider::after,
  .liberta-divider-end::before,
  .liberta-divider-end::after,
  .chat-divider::before,
  .chat-divider::after,
  .chat-divider-end::before,
  .chat-divider-end::after,
  .cat-crocini-bottom img,
  .page-chi-siamo .manifesto-divider-bottom::before,
  .page-chi-siamo .manifesto-divider-bottom::after,
  .grafica-manifesto-divider-top::before,
  .grafica-manifesto-divider-top::after{
    width:19.2px;height:19.2px;
  }
}

/* ════════ MANIFESTO HOME + CHI SIAMO — piena larghezza su mobile ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-home .manifesto-body,
  .page-chi-siamo .manifesto-body{
    grid-column:1 / -1;
  }
}

/* ════════ MANIFESTO HOME + CHI SIAMO — zebrato, pallini, riga e spaziatura ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-home .manifesto-section,
  .page-chi-siamo .manifesto-section{
    background-size:300% auto;
    padding-top:var(--sp-56);
  }
  .page-home .manifesto-pallini,
  .page-chi-siamo .manifesto-pallini{
    height:12.96px;
  }
  .page-home .manifesto-divider-top{display:none;}
  .page-home .manifesto-content,
  .page-chi-siamo .manifesto-content{
    padding-top:var(--sp-f-xs);
  }
}

/* ════════ CAROSELLO "Le nostre stampe" — MOBILE / TABLET ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .carousel-section{
    --n:4;
    --cw:calc((100cqw - 40px - (var(--n) + 1) * 6px) / var(--n));
    --cl:26px;                        /* 20px di sliver + 6px di gap */
  }
  .carousel-strip{container-type:inline-size;}
  .carousel-viewport{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--cl);
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    cursor:default;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .carousel-viewport::-webkit-scrollbar{display:none;}
  .carousel-track{
    transform:none!important;will-change:auto;
    padding-left:var(--cl);
    padding-right:calc(100cqw - var(--cl) - var(--cw));
  }
  .carousel-unit{
    width:var(--cw);
    scroll-snap-align:start;
  }
}
@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .carousel-section{--n:3;}
}
@media(max-width:720px){
  .carousel-section{--n:2;}
  .carousel-unit{scroll-snap-stop:always;}
}
@media(max-width:560px){
  .carousel-section{
    --n:1;
    --cw:calc((100vw - 52px) * .82);
    --cl:calc((100cqw - var(--cw)) / 2); /* centrata nel foglio */
  }
}

/* ════════ TITOLO "Le nostre stampe" + CAROSELLO — SOLO MOBILE ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-home .manifesto-content{
    padding-bottom:var(--sp-32);
  }
  .carousel-section{
    padding-top:var(--sp-32);
  }
  .carousel-header{
    margin-bottom:var(--sp-48);
  }
}

/* ════════ TITOLI SEZIONE — SCALA MOBILE UNIFICATA ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .tutto-head,
  .bozza-head,
  .controllo-label,
  .partner-label,
  .carousel-headline,
  .liberta-headline,
  .dipendenti-title,
  .studio-headline,
  .servizi-title,
  .cta-headline,
  .manifesto-head,
  .grafica-head,
  .gallery-head,
  .sguardo-headline,
  .motivi-head,
  .tecno-head,
  .dettagli-head,
  .missione-label,
  .storia-head,
  .storia-layout .storia-head,
  .persone-head,
  .sost-richiamo-title,
  .cert-band-title,
  .doc-head{
    font-size:var(--fs-titolo-mob);
  }
}

/* ════════ "NUMERI CHE RACCONTANO CHI SIAMO" — MOBILE / TABLET ════════ */
.numeri-mobile{display:none;}

@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .infographic{display:none;}

  .liberta-vline{display:none;}

  .numeri-mobile{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:clamp(16px,4vw,32px);
    row-gap:clamp(42px,9vw,72px);
    width:100%;
  }
  .nm-item{
    container-type:inline-size;
    display:flex;flex-direction:column;
    min-width:0;
  }
  .nm-num{
    font-family:var(--font-testo);
    font-weight:400;
    font-size:min(45cqw,130px);
    letter-spacing:-.05em;
    text-align:center;
    font-variant-numeric:tabular-nums;
    color:var(--line);   /* stesso grigio a riposo di .bar-num su desktop */
    line-height:.85;
    margin:0 0 var(--sp-8);   /* ~-10% sullo stacco visivo numero→etichetta */
    white-space:nowrap;
  }
  .nm-label{
    font-family:var(--font-testo);
    font-size:var(--fs-etichetta-sm);font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;
    color:var(--blk);
    line-height:var(--lh-medio);
    text-align:center;
  }
}

@media(max-width:560px){
  .numeri-mobile{
    row-gap:clamp(36px,10.5vw,54px);
    column-gap:clamp(32px,10vw,48px);
  }
  .nm-num{
    font-size:38cqw;
  }
}

/* ════════ "NUMERI CHE RACCONTANO CHI SIAMO" — TESTATA CENTRATA ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .liberta-top{
    flex-direction:column;
    align-items:center;
    gap:var(--sp-26);
    padding-right:0;
  }
  .liberta-headline{
    flex:1 1 auto;
    text-align:center;
  }
  .liberta-body{
    flex:1 1 auto;
    font-size:var(--fs-testo);   /* = .servizio-desc */
    font-weight:400;
    line-height:var(--lh-corpo);
    text-align:center;
    transform-origin:top center;
    max-width:52ch;
    margin-left:auto;margin-right:auto;
    text-wrap:pretty;
  }
}

/* ════════ NUMERI — FASCIA 561-750px ════════ */
@media(min-width:561px) and (max-width:750px){
  .numeri-mobile{
    column-gap:clamp(34px,5.6vw,42px);
  }
  .nm-num{
    font-size:42cqw;
  }
}

/* ════════ STUDIO "LA TUA VISIONE, LA NOSTRA COMPETENZA" — MOBILE ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .studio-section:not(.studio-states){
    height:auto !important;   /* batte lo style inline del JS */
    --studio-progress:0;
  }
  .studio-section:not(.studio-states) .studio-sticky{
    position:static;
    height:auto;
    display:block;
    padding:var(--sp-40) var(--margin) clamp(72px,14vw,110px);
  }

  /* titolo: niente scambio di colore, tutto scuro */
  .studio-section:not(.studio-states) .studio-headline .studio-part-1,
  .studio-section:not(.studio-states) .studio-headline .studio-part-2{
    color:var(--blk);
  }
  .studio-section:not(.studio-states) .studio-inner{
    row-gap:0;
  }
  .studio-section:not(.studio-states) .studio-headline{
    margin-bottom:var(--sp-26);   /* +30% ca., stesso valore di .liberta-top sopra */
  }

  /* le due fasi non sono più sovrapposte: frase sopra, card sotto */
  .studio-section:not(.studio-states) .studio-stage{
    display:block;
  }
  .studio-section:not(.studio-states) .studio-stage > .studio-phase{
    grid-area:auto;
    will-change:auto;
  }
  .studio-section:not(.studio-states) .studio-stage > .studio-phase-1{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .studio-section:not(.studio-states) .studio-stage > .studio-phase-2{
    opacity:1;
    pointer-events:auto;
    margin-top:var(--sp-56);
  }

  /* frase = misura della didascalia di "Numeri che raccontano" */
  .studio-section:not(.studio-states) .studio-body{
    font-size:var(--fs-testo);   /* = .liberta-body mobile */
    font-weight:400;
    line-height:var(--lh-corpo);
    color:rgba(0,25,35,.65);
    text-align:center;
    max-width:52ch;
    margin-left:auto;margin-right:auto;
    text-wrap:pretty;
  }
  .studio-section:not(.studio-states) .studio-body strong{
    font-weight:600;
  }

  .studio-section:not(.studio-states) .studio-sticky > .grain-canvas,
  .studio-section:not(.studio-states) .studio-sticky > .dots-layer{
    left:0;right:0;width:100%;
  }

  .studio-section:not(.studio-states) .studio-cap-body{
    font-size:var(--fs-testo);   /* = .liberta-body mobile */
    line-height:var(--lh-corpo);
  }

  /* card sempre visibili: niente reveal sequenziale senza scroll-lock */
  .studio-section:not(.studio-states) .studio-caps > .studio-cap-inner{
    opacity:1;
    transform:none;
    will-change:auto;
  }
}

@media(max-width:720px){
  .studio-section:not(.studio-states) .studio-cap-title{
    font-size:var(--fs-titolo-4-mob);
  }
}

/* ════════ RECENSIONI "Una parola dai nostri clienti" — MOBILE ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .chat-divider,
  .chat-divider-end{display:none;}

  .dipendenti-section .controllo-cmyk{height:12.96px;}

  .dipendenti-title{margin-bottom:0;}
  .chat-vlines-wrap .chat-messages{padding-top:var(--sp-56);padding-bottom:0;}

  .chat-messages > .chat-row:nth-of-type(3){display:none;}
  .chat-messages:has(#chatExtra.open) > .chat-row:nth-of-type(3){display:flex;}

  .chat-more-wrap{margin-top:var(--sp-56);}
}

/* ════════ RIGA DI CHIUSURA STUDIO + PALLINI CMYK — MOBILE ════════ */
.studio-divider-end{display:none;}
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .studio-section:not(.studio-states) .studio-sticky{
    padding-bottom:0;
  }
  .studio-section:not(.studio-states) .studio-divider-end{
    display:block;
    grid-column:1 / -1;
    position:relative;height:1px;background:var(--line);
    margin-left:calc(-1 * var(--margin));
    margin-right:calc(-1 * var(--margin));
    margin-top:var(--sp-56);
    margin-bottom:var(--sp-56);
  }
  .studio-section:not(.studio-states) .studio-divider-end::before,
  .studio-section:not(.studio-states) .studio-divider-end::after{
    content:'';position:absolute;width:19.2px;height:19.2px;top:50%;
    background:url('../img/comuni/crocino.webp') center/contain no-repeat;
    pointer-events:none;z-index:5;
  }
  .studio-section:not(.studio-states) .studio-divider-end::before{left:36px;transform:translate(-50%,-50%);}
  .studio-section:not(.studio-states) .studio-divider-end::after{right:36px;transform:translate(50%,-50%);}
  .studio-section:not(.studio-states) .studio-divider-cmyk{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    height:12.96px;width:auto;
    z-index:5;pointer-events:none;
  }

  .dipendenti-section{padding-top:0;}
  .dipendenti-section .controllo-cmyk{display:none;}
}

@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .dipendenti-section{padding-bottom:0;}
}

/* ════════ SERVIZI "Quello che ti serve, quando ti serve" — MOBILE ════════ */
@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .servizi-sub{display:none;}
  .servizio-desc{display:none;}
  .servizio-name{font-size:var(--fs-titolo-4-mob);}
  .servizio-card{padding-left:0;padding-right:0;}
}

/* ════════ SERVIZI — TITOLO SU 2 RIGHE + CTA A DESTRA — MOBILE ════════ */
.sv-br{display:none;}
@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .sv-br{display:inline;}

  .servizi-section{padding-top:var(--sp-40);}

  .servizio-card{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:var(--sp-16);
    padding-top:var(--sp-20);
    padding-bottom:var(--sp-20);
  }
  .servizio-btn{
    margin-top:0;
    align-self:center;
    flex-shrink:0;
  }

  .servizi-grid{
    padding-top:var(--sp-2);
    padding-bottom:var(--sp-2);
  }
}

/* ════════ ZEBRA-DIVIDER HOME (sotto "servizi") — INGRANDIMENTO x2 MOBILE ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-home .zebra-divider img{
    width:200%;
    max-width:none;
    margin-left:-50%;
  }
}

/* ════════ CTA FINALE HOME — PADDING SUPERIORE (SOLO MOBILE) ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .cta-section{padding-top:var(--sp-20);}
}

/* ════════ HERO HOME — MOBILE ════════ */

/* markup solo-mobile: spento ovunque per default → desktop intatto */
.cmyk-dots-mobile,
.hero-certs-mobile,
.hero-scroll-cue{display:none;}

@keyframes heroCueBob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(9px);}
}

@media(max-width:820px), (min-width:721px) and (pointer:coarse){

  .page-home .hero{
    height:100vh;height:100lvh;
    min-height:100vh;min-height:100lvh;
  }
  @supports (-webkit-touch-callout:none){
    .page-home .hero{
      min-height:calc(100lvh + var(--hero-oltre-barre));
    }
  }

  .page-home .hero-main{
    position:absolute;top:0;left:0;right:0;
    height:100vh;height:100svh;
    justify-content:flex-start;
    padding:0 var(--margin) var(--sp-32);
    text-align:center;
  }

  /* ── 1. blocco titolo ── */
  .page-home .hero-title-wrap{
    margin-top:auto;
    margin-left:0;
    align-items:center;
    width:100%;
  }

  .page-home #cmykTop,
  .page-home #cmykBot{display:none;}
  .page-home .cmyk-dots-mobile{
    display:block;line-height:0;margin:0 auto var(--sp-26);
  }
  .page-home .cmyk-dots-mobile img{
    display:block;
    width:clamp(104px,32vw,144px);height:auto;
  }

  /* ── 2. titolo su due righe centrate ── */
  .page-home .h-line1,
  .page-home .h-line2{
    margin-left:0;
    justify-content:center;
    width:100%;
  }
  .page-home .h-line1{margin-bottom:0;}
  .page-home .h-line1 .hl,
  .page-home .h-line2 .hl{
    font-size:clamp(40px,15vw,100px);
    line-height:var(--lh-display);
    white-space:nowrap;
  }

  /* ── 3. loghi certificazione sotto il titolo ── */
  .page-home .hero-certs-mobile{
    align-items:center;justify-content:center;
    gap:var(--sp-20);margin-top:var(--sp-26);opacity:.75;
  }
  .page-home .hero-certs-mobile .cert-logo{height:34px;}

  /* ── 4. didascalia in fondo ── */
  .page-home .h-sub{
    margin:auto 0 0;
    max-width:none;
    text-align:center;
    font-size:clamp(13px,3.6vw,16px);
  }

  /* ── 5. freccia invito allo scroll ── */
  .page-home .hero-scroll-cue{
    display:block;
    margin:var(--sp-16) auto 0;
    color:#fff;
    animation:heroCueBob 2.2s ease-in-out infinite;
  }
  .page-home .hero-scroll-cue svg{
    display:block;width:clamp(46px,13vw,66px);height:auto;
  }

  /* ── fuori su mobile: colonna in basso a destra ── */
  .page-home .hero-desc{display:none;}
}

@media(prefers-reduced-motion:reduce){
  .page-home .hero-scroll-cue{animation:none;}
}

/* ════════ PALLINI CMYK SULLE DUE RIGHE DELLA SEZIONE NUMERI — MOBILE ════════ */
.liberta-divider-cmyk{display:none;}

@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .liberta-divider-cmyk{
    display:block;
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    height:12.96px;width:auto;
    z-index:5;pointer-events:none;
  }
}

/* ════════ STUDIO — LE TRE CARD COMPAIONO A SCROLL ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .studio-section:not(.studio-states).caps-armed .studio-caps > .studio-cap-inner{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .5s ease, transform .5s cubic-bezier(0.16,1,0.3,1);
    will-change:opacity,transform;
  }
  .studio-section:not(.studio-states).caps-armed .studio-caps > .studio-cap-inner.is-in{
    opacity:1;
    transform:none;
  }
}

/* ════════ MENU MOBILE — POSIZIONE STABILE ════════ */

@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  :root{
    --menu-logo-h:31px;
    --menu-links-top:92px;
    /* Margine laterale del menu = quello della nav sticky (26px), non
       piu' var(--margin) che a 360px vale 20px: cosi' le voci partono
       esattamente dalla stessa verticale del logo. */
    --menu-side:26px;
  }

  /* ── Voci ancorate in alto ── */
  .mobile-menu{
    justify-content:flex-start;
    /* Evita che lo scroll dell'overlay, arrivato a fondo corsa, si
       propaghi alla pagina sotto (bounce iOS con menu aperto). */
    overscroll-behavior:contain;
  }
  .mobile-menu-links{
    width:100%;
    
  }

  /* ── Scivolata verso la posizione canonica ── */
  .nav-burger--floating,
  .nav-logo--floating{
    transition:top .3s cubic-bezier(0.22,1,0.36,1),
               left .3s cubic-bezier(0.22,1,0.36,1);
  }
  .nav-sticky .nav-logo img,
  .nav-logo--floating img{height:var(--menu-logo-h);}
  .nav-logo--floating img{
    transition:filter .3s ease,
               height .3s cubic-bezier(0.22,1,0.36,1);
  }
  .nav-logo--floating.is-returning img{height:48px;}
}

@media(prefers-reduced-motion:reduce){
  .nav-burger--floating,
  .nav-logo--floating,
  .nav-logo--floating img{transition:none;}
}

@media(max-width:400px){
  .mobile-menu-links .nav-link{font-size:36px;}
}

/* ════════ ZOOM DISATTIVATO SU MOBILE ════════ */
@media (pointer:coarse){
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  html,body{ touch-action:pan-x pan-y; }
  .cd-input,.cd-textarea{ font-size:16px; }
}

/* ════════ CHI SIAMO — TIPOGRAFIA MOBILE ════════ */
@media(max-width:720px){
  .studio-section.studio-states .studio-cap-title{
    font-size:var(--fs-titolo-4-mob);
  }
}

/* ════════ CHI SIAMO — "MISSION / VISION / VALORI" IN COLONNA ════════ */

/* i tre titoli esistono solo su mobile */
.studio-state-head{
  display:none;
  font-family:var(--font-titolo);font-weight:400;
  font-size:var(--fs-titolo);line-height:var(--lh-display);
  color:var(--blk);text-align:center;
  margin:0 0 var(--sp-26);
}

@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  /* 1. sblocco: niente altezza forzata, niente sticky */
  .studio-section.studio-states{
    height:auto !important;      /* batte lo style inline dello script */
    --studio-progress:0;
  }
  .studio-section.studio-states .studio-sticky{
    position:static;height:auto;display:block;
    padding:var(--sp-40) var(--margin) clamp(72px,14vw,110px);
  }
  /* grain e puntini: con lo sticky static il loro contenitore diventa
     la sezione, che il padding non ce l'ha → via i margini negativi */
  .studio-section.studio-states .studio-sticky > .grain-canvas,
  .studio-section.studio-states .studio-sticky > .dots-layer{
    left:0;right:0;width:100%;
  }
  .page-chi-siamo .studio-side{display:none;}

  /* 2. titolo unico fuori, i tre titoli dentro */
  .studio-section.studio-states .studio-headline-states{display:none;}
  .studio-section.studio-states .studio-state-head{display:block;}

  /* 3. i pannelli non sono piu' sovrapposti: uno sotto l'altro */
  .studio-section.studio-states .studio-inner{row-gap:0;}
  .studio-section.studio-states .studio-stage{display:block;}
  .studio-section.studio-states .studio-stage > .studio-pane{
    grid-area:auto;
    opacity:1;transform:none;pointer-events:auto;
    will-change:auto;
    margin:0 0 var(--sp-56);
  }
  .studio-section.studio-states .studio-stage > .studio-pane:last-child{
    margin-bottom:0;
  }
  /* il rientro di 2 colonne per lato della vision vale solo da desktop */
  .studio-section.studio-states .pane-2{padding-inline:0;}

  .studio-section.studio-states .pane-1 br{display:none;}

  .studio-section.studio-states .studio-body,
  .page-chi-siamo .studio-cap-body,
  .page-chi-siamo .cal-cta-sub,
  .page-chi-siamo .sost-richiamo-sub{
    font-weight:400;
    font-size:var(--fs-testo);
    line-height:var(--lh-corpo);
    color:rgba(0,25,35,.65);
  }
  .studio-section.studio-states .studio-body strong,
  .page-chi-siamo .studio-cap-body strong,
  .page-chi-siamo .cal-cta-sub strong,
  .page-chi-siamo .sost-richiamo-sub strong{
    font-weight:600;
    color:inherit;
  }
}

/* titolo dei tre stati sulla scala mobile unificata dei titoli di
   sezione (vedi blocco "TITOLI SEZIONE — SCALA MOBILE UNIFICATA") */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .studio-state-head{font-size:var(--fs-titolo-mob);}
}

@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .studio-section.studio-states.caps-armed .studio-caps > .studio-cap-inner{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .5s ease, transform .5s cubic-bezier(0.16,1,0.3,1);
    will-change:opacity,transform;
  }
  .studio-section.studio-states.caps-armed .studio-caps > .studio-cap-inner.is-in{
    opacity:1;
    transform:none;
  }
}

/* ════════ CHI SIAMO — PALLINI CMYK SULLE RIGHE, SENZA TRATTEGGIATE (MOBILE) ════════ */
.divider-cmyk{display:none;}

@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-chi-siamo .manifesto-divider-bottom .divider-cmyk,
  .page-chi-siamo .storia-cut-top .divider-cmyk{
    display:block;
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    height:12.96px;width:auto;
    z-index:6;pointer-events:none;
  }
}

@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-chi-siamo .storia-cut-vline{display:none;}
}

/* ════════ CHI SIAMO — NIENTE BARRA SOPRA "MISSION" (MOBILE) ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-chi-siamo .manifesto-divider-bottom{display:none;}
  .page-chi-siamo .manifesto-section{padding-bottom:0;}
}

/* ════════ CHI SIAMO — DIVISORI DI SEZIONE MOBILE ════════ */
.cs-divider{display:none;}

@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-chi-siamo .cs-divider{
    display:block;
    position:relative;height:1px;background:var(--line);
    margin-left:calc(-1 * var(--margin));
    margin-right:calc(-1 * var(--margin));
    margin-bottom:var(--sp-56);
  }
  .page-chi-siamo .cs-divider::before,
  .page-chi-siamo .cs-divider::after{
    content:'';position:absolute;width:19.2px;height:19.2px;top:50%;
    background:url('../img/comuni/crocino.webp') center/contain no-repeat;
    pointer-events:none;z-index:5;
  }
  .page-chi-siamo .cs-divider::before{left:36px;transform:translate(-50%,-50%);}
  .page-chi-siamo .cs-divider::after{right:36px;transform:translate(50%,-50%);}

  /* i pallini vanno sul filo della riga, come nelle altre */
  .page-chi-siamo .cs-divider .divider-cmyk{
    display:block;
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    height:12.96px;width:auto;
    z-index:6;pointer-events:none;
  }

  .page-chi-siamo .team .controllo-cmyk{display:none;}
}

/* ════════ ZEBRATO + PALLINI CMYK SULLA PRIMA FASCIA CHIARA DELLE PAGINE INTERNE — SOLO MOBILE ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-sost .esg-intro,
  .page-stampati .manifesto-section,
  .page-grafica .grafica-intro{
    background:url('../img/comuni/fascia-zebrata.webp') top center / 300% auto no-repeat;
    padding-top:var(--sp-32);
  }
  .page-sost .missione-cmyk,
  .page-stampati .manifesto-pallini,
  .page-grafica .grafica-cmyk{
    height:12.96px;
    margin:0 auto var(--sp-26);
  }
}

/* ════════ CHI SIAMO — SEZIONE CALENDARIO, ORDINE MOBILE ════════ */
.cal-cta-title-mob{display:none;}

@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .page-chi-siamo .storia-layout{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
  }
  .page-chi-siamo .storia-layout .storia-left,
  .page-chi-siamo .storia-layout .cal-cta{display:contents;}

  .page-chi-siamo .storia-layout .storia-head    {order:1;margin:0 0 var(--sp-26);}
  .page-chi-siamo .storia-layout .cal-stage      {order:2;}
  .page-chi-siamo .storia-layout .cal-cta-title-mob{order:3;display:block;}
  .page-chi-siamo .storia-layout .storia-lead    {order:4;margin:0;max-width:none;}

  /* via il titolo desktop, l'hint e la pulsantiera */
  .page-chi-siamo .storia-layout .cal-cta-title:not(.cal-cta-title-mob),
  .page-chi-siamo .storia-layout .cal-cta-hint,
  .page-chi-siamo .storia-layout .cal-nav{display:none;}

  .page-chi-siamo .storia{padding-top:calc(37px + 56px);}
}
/* ════════ GRAFICA E PRESTAMPA — MOBILE: CROCINI E PALLINI CMYK ════════ */
.grafica-manifesto-cmyk{display:none;}

@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-grafica .cut-divider::before,
  .page-grafica .cut-divider::after{display:none;}

  .grafica-manifesto-cmyk{
    display:block;
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    height:12.96px;width:auto;
    z-index:5;pointer-events:none;
  }
}

/* ════════ SOSTENIBILITA' — "Principi e linee guida" stile SERVIZI — MOBILE ════════ */
.doc-br{display:none;}
@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .doc-br{display:inline;}

  .doc-row{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:var(--sp-16);
    padding-top:var(--sp-20);
    padding-bottom:var(--sp-20);
  }
  .doc-title{font-size:var(--fs-titolo-4-mob);}
  .doc-btn{
    padding:var(--sp-12) 20px;
    font-size:clamp(10px,2.6vw,12px);
  }
}

/* ════════ CALENDARIO MOBILE — CANVAS A TUTTO SCHERMO, PIU' ALTO IN CIMA E SOPRA AL TITOLO ════════ */
.cal-tap-hint{display:none;}
@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .page-chi-siamo .cal-tap-hint{
    display:block;position:absolute;z-index:4;
    width:clamp(76.8px,21.6vw,115.2px);height:auto;
    right:12%;bottom:7%;
    pointer-events:none;user-select:none;
    filter:drop-shadow(0 6px 7px rgba(0,25,35,.24));
  }

  .page-chi-siamo .storia-layout .storia-head{position:relative;z-index:1;}

  .page-chi-siamo .storia-layout .cal-stage{
    --cal-bleed-x:var(--margin);   /* letta anche dal JS del calendario */
    --cal-top-extra:180px;         /* idem */
    position:relative;z-index:2;
    margin:calc(-1 * var(--cal-top-extra)) calc(-1 * var(--cal-bleed-x)) var(--sp-26);
    height:calc(clamp(360px,80vw,520px) + var(--cal-top-extra));
  }

  .page-chi-siamo .storia-layout .cal-cta-title-mob{margin:0 0 var(--sp-26);}
}

/* ════════ PALLINI DI SFONDO (.dots-layer) — PADDING RIDOTTO SU MOBILE ════════ */
@media(max-width:560px){
  .dots-layer{
    -webkit-mask:linear-gradient(to right, transparent 20px, #001923 20px, #001923 calc(100% - 20px), transparent calc(100% - 20px));
    mask:linear-gradient(to right, transparent 20px, #001923 20px, #001923 calc(100% - 20px), transparent calc(100% - 20px));
  }
}

/* ════════ CTA FINALI (chi-siamo + home) — TESTO MOBILE + BOTTONI AFFIANCATI ════════ */
.bozza-head-mobile,
.cta-headline-mobile{display:none;}

@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-chi-siamo .bozza-head:not(.bozza-head-mobile){display:none;}
  .page-chi-siamo .bozza-head-mobile{display:block;}
  .page-chi-siamo .bozza-body{display:none;}

  .page-home .cta-section .cta-headline:not(.cta-headline-mobile){display:none;}
  .page-home .cta-section .cta-headline-mobile{display:block;}

  .page-chi-siamo .bozza .cta-actions,
  .page-home .cta-section .cta-actions{
    flex-wrap:nowrap;
    gap:var(--sp-10);
  }
  .page-chi-siamo .bozza .cta-actions .cta-btn,
  .page-chi-siamo .bozza .cta-actions .cta-btn-ghost,
  .page-home .cta-section .cta-actions .cta-btn,
  .page-home .cta-section .cta-actions .cta-btn-ghost{
    padding:var(--sp-14) 14px;
    font-size:var(--fs-etichetta);
  }
}

/* ════════ ZEBRA-DIVIDER CHI SIAMO (sotto la CTA .bozza) — INGRANDIMENTO x2 MOBILE ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-chi-siamo .zebra-divider img{
    width:200%;
    max-width:none;
    margin-left:-50%;
  }
}

/* ════════ GRAFICA E PRESTAMPA — SCALA E BREAKPOINT MOBILE ════════ */

/* ── 2. didascalie ─────────────────────────────────────────────── */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-grafica .grafica-head{margin-bottom:var(--sp-26);}
  .page-grafica .grafica-intro-desc{
    font-size:clamp(22px,3.4vw,34px);
  }
  .page-grafica .grafica-intro-desc strong{font-weight:800;}
  .page-grafica .pilastro-desc{
    font-size:var(--fs-testo);
    font-weight:400;
    line-height:var(--lh-corpo);
    text-wrap:pretty;
  }
}

/* ── 3. titoletti in Instrument Serif ──────────────────────────── */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-grafica .pilastro-title{
    font-size:var(--fs-titolo-4-mob);   /* = .servizio-name / .studio-cap-title */
  }
}

/* ── 4b. gallery: 3 → 2 colonne a 900px, 2 → 1 a 560px ─────────── */
@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .page-grafica .gallery-row.bottom > *{grid-column:span 6;}
}
@media(min-width:561px) and (max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-grafica .gallery-row.top > *{grid-column:span 6;}
  .page-grafica .gallery-row.bottom > *{grid-column:span 6;}
  .page-grafica .gallery-row.bottom > *:nth-child(3){grid-column:1 / -1;}
}
@media(min-width:561px) and (max-width:900px), (min-width:721px) and (pointer:coarse){
  .page-grafica .gallery-row.top .gallery-img,
  .page-grafica .gallery-row.bottom .gallery-img{height:clamp(220px,30vw,300px);}
}

/* ── 4c. "I nostri servizi": 3 → 2 → 1 come le altre pagine ────── */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-grafica .tutto-grid{grid-template-columns:repeat(12,minmax(0,1fr));}
  .page-grafica .tutto-grid > *{grid-column:span 6;}
}
@media(max-width:560px){
  .page-grafica .tutto-grid > *{grid-column:1 / -1;}
}

/* ── 5. CTA finale: a capo mobile + bottoni affiancati ─────────── */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-grafica .bozza-head:not(.bozza-head-mobile){display:none;}
  .page-grafica .bozza-head-mobile{display:block;}

  .page-grafica .bozza .cta-actions{
    flex-wrap:nowrap;
    gap:var(--sp-10);
  }
  .page-grafica .bozza .cta-actions .cta-btn,
  .page-grafica .bozza .cta-actions .cta-btn-ghost{
    padding:var(--sp-14) 14px;
    font-size:var(--fs-etichetta);
  }
}

/* ════════ GRAFICA E PRESTAMPA — SPAZIATURE MOBILE ════════ */

/* ── 1. aria fra le due card in colonna singola ────────────────── */
@media(max-width:720px){
  .page-grafica .pilastri-grid{row-gap:var(--sp-56);}
}

/* ── 2. titoletto → didascalia ─────────────────────────────────── */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-grafica .pilastro-desc{margin-top:var(--sp-14);}   /* = .studio-cap-title */
}

/* ── 3-4-5. ritmo 56 / 56 attorno alle due righe divisorie ─────── */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  /* riga invisibile fra intro e pilastri: via anche il suo ingombro */
  .page-grafica .foglio-inner > .cut-divider{display:none;}

  /* riga sopra "Una selezione": 56px sopra, 56px sotto */
  .page-grafica .pilastri{padding-bottom:var(--sp-56);}
  .page-grafica .grafica-manifesto{margin-bottom:0;}
  .page-grafica .grafica-manifesto-divider-top{top:0;}

  .page-grafica .gallery-head-row{margin-bottom:var(--sp-26);}
}

/* ════════ GALLERY GRAFICA E PRESTAMPA — RIGA ALTA A PROPORZIONE NATURALE SU MOBILE ════════ */
@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .page-grafica .gallery-row.top .gallery-img{
    display:block;
    height:auto;
    aspect-ratio:1790 / 756;   /* = gallery-copes / gallery-gerini */
  }
  .page-grafica .gallery-row.top .gallery-img.has-image.bleed img{
    width:100%;
    height:100%;
    object-fit:contain;
    transform:none;
  }
}

/* ════════ GALLERY GRAFICA E PRESTAMPA — FOTO QUADRATE DEDICATE AL MOBILE ════════ */
.gallery-img picture{display:contents;}

/* ════════ HERO PAGINE INTERNE — RITAGLIO VERTICALE DEDICATO ════════ */
.hero-bg picture{display:contents;}

@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .page-grafica .gallery-row.top .gallery-img,
  .page-grafica .gallery-row.bottom .gallery-img{
    height:auto;
    aspect-ratio:1 / 1;
  }
  .page-grafica .gallery-row .gallery-img.has-image.bleed img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:none;
  }
  .page-grafica .gallery-row.bottom > *:nth-child(3){grid-column:4 / span 6;}
}

@media(max-width:560px){
  .page-grafica .gallery-row.top > *,
  .page-grafica .gallery-row.bottom > *,
  .page-grafica .gallery-row.bottom > *:nth-child(3){grid-column:1 / -1;}
}

/* ════════ ZEBRA-DIVIDER GRAFICA E PRESTAMPA (sotto la CTA .bozza) — INGRANDIMENTO x2 MOBILE ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-grafica .zebra-divider img{
    width:200%;
    max-width:none;
    margin-left:-50%;
  }
}

/* ════════ ETICHETTE SU BOBINA — MOBILE ════════ */

/* ── 1a. crocini soli → riga + crocini + pallini ─────────────────── */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-etichette .section-crocini{
    height:1px;background:var(--line-soft);
    margin-left:calc(-1 * var(--margin));
    margin-right:calc(-1 * var(--margin));
  }
  .page-etichette .section-crocini img.divider-cmyk{
    display:block;position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    height:12.96px;width:auto;z-index:6;pointer-events:none;
  }

  /* ── 1b. pallini sui .cut-divider ── */
  .page-etichette .cut-divider .divider-cmyk{
    display:block;position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    height:12.96px;width:auto;z-index:6;pointer-events:none;
  }

  /* ── 1c. niente pallini soli sopra "Controllo qualità" ──────────── */
  .page-etichette .controllo-cmyk{display:none;}
  .page-etichette .controllo-label{margin-bottom:var(--sp-26);}

  /* ── 2. CTA finale: a-capo mobile + bottoni affiancati ─────────── */
  .page-etichette .bozza-head:not(.bozza-head-mobile){display:none;}
  .page-etichette .bozza-head-mobile{display:block;}

  .page-etichette .bozza .cta-actions{
    flex-wrap:nowrap;
    gap:var(--sp-10);
  }
  .page-etichette .bozza .cta-actions .cta-btn,
  .page-etichette .bozza .cta-actions .cta-btn-ghost{
    padding:var(--sp-14) 14px;
    font-size:var(--fs-etichetta);
  }

  .page-etichette .zebra-divider img{
    width:200%;
    max-width:none;
    margin-left:-50%;
  }

  /* ── 3b. titoletti "famiglia 34/38px" ───────────────────────────── */
  .page-etichette .tecno-subtitle,
  .page-etichette .cq-step-title{
    font-size:var(--fs-titolo-4-mob);
  }

  /* ── 4. spaziature: ritmo 26 / 56 della home ────────────────────── */
  .page-etichette .motivi-head{margin-bottom:var(--sp-26);}
  .page-etichette .tecno-head{margin-bottom:var(--sp-26);}
  .page-etichette .dettagli-head{margin-bottom:var(--sp-26);}
  .page-etichette .partner-head-wrap{margin-bottom:var(--sp-56);}
}

/* ── 3a. didascalie: misura standard home ── */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-etichette .sguardo-body,
  .page-etichette .tecno-desc,
  .page-etichette .cq-step-desc,
  .page-etichette .partner-sub{
    font-size:var(--fs-testo);
    font-weight:400;
    line-height:var(--lh-corpo);
    color:rgba(0,25,35,.65);
    max-width:52ch;
  }
}

/* ════════ "TRE BUONI MOTIVI" (etichette) — ALLINEAMENTO E BREAKPOINT MOBILE ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-etichette .motivi-list{grid-template-columns:1fr;}
  .page-etichette .motivi-list > *{grid-column:1 / -1;}
}
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-etichette .motivo-bar--tre{
    flex-wrap:nowrap;
    align-items:flex-start;
    text-align:left;
  }
  .page-etichette .motivo-bar--tre .motivo-title,
  .page-etichette .motivo-bar--tre .motivo-desc{
    text-align:left;
  }
}

/* ════════ "TRE BUONI MOTIVI" (etichette) — TITOLI SOSTANTIVO SINGOLO SU MOBILE ════════ */
.motivo-title-mobile{display:none;}

@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-etichette .motivo-title:not(.motivo-title-mobile){display:none;}
  .page-etichette .motivo-title-mobile{display:block;}
}

/* ════════ CHI SIAMO — SCAMBIO STORIA/MVV SOLO MOBILE ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-chi-siamo .storia-cut-top{display:none;}

  .page-chi-siamo .storia{padding-top:var(--sp-40);}

  .page-chi-siamo .storia > .cs-divider{
    margin-top:var(--sp-56);
    margin-bottom:0;
  }
}

/* ════════ "TECNOLOGIE DI STAMPA" (etichette) — TELEFONI STRETTI ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-etichette .tecno-grid{
    grid-template-columns:1fr;
    column-gap:0;
    row-gap:clamp(32px,8vw,48px);
  }
}

/* ════════ CAROSELLO "Dettagli che fanno la differenza" (etichette) — MOBILE / TABLET ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-etichette .dettagli{
    --n:4;
    --cw:calc((100cqw - 40px - (var(--n) + 1) * 6px) / var(--n));
    --cl:26px;
    container-type:inline-size;
    padding-left:0;padding-right:0;
  }
  .page-etichette .dettagli-grid{
    display:flex;grid-template-columns:none;gap:var(--sp-6);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--cl);
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    scrollbar-width:none;-ms-overflow-style:none;
    padding:var(--sp-2) var(--cl) var(--sp-14);
    padding-right:calc(100cqw - var(--cl) - var(--cw));
  }
  .page-etichette .dettagli-grid::-webkit-scrollbar{display:none;}
  .page-etichette .dettagli-grid > .det-card,
  .page-etichette .dettagli-grid > .det-card.det-wide{
    grid-column:auto;flex:0 0 var(--cw);width:var(--cw);
    height:auto;aspect-ratio:3/4;
    scroll-snap-align:start;
  }
}
@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .page-etichette .dettagli{--n:3;}
}
@media(max-width:720px){
  .page-etichette .dettagli{--n:2;}
  .page-etichette .dettagli-grid > .det-card,
  .page-etichette .dettagli-grid > .det-card.det-wide{scroll-snap-stop:always;}
}
@media(max-width:560px){
  .page-etichette .dettagli{
    --n:1;
    --cw:calc((100vw - 52px) * .82);
    --cl:calc((100cqw - var(--cw)) / 2);
  }
}

@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-etichette .det-title{font-size:var(--fs-titolo-4-mob);}
}

/* ════════ CAROSELLO "Dettagli che fanno la differenza" (etichette) — TAP, SOLO MOBILE ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-etichette .det-card::after,
  .page-etichette .det-body{
    transition:opacity .18s ease;
  }
}

/* ════════ CAROSELLO "Dettagli che valorizzano lo stampato" (stampati) — MOBILE / TABLET ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-stampati .dettagli{
    --n:4;
    --cw:calc((100cqw - 40px - (var(--n) + 1) * 6px) / var(--n));
    --cl:26px;
    container-type:inline-size;
    padding-left:0;padding-right:0;
  }
  .page-stampati .dettagli-grid{
    display:flex;grid-template-columns:none;gap:var(--sp-6);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--cl);
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    scrollbar-width:none;-ms-overflow-style:none;
    padding:var(--sp-2) var(--cl) var(--sp-14);
    padding-right:calc(100cqw - var(--cl) - var(--cw));
  }
  .page-stampati .dettagli-grid::-webkit-scrollbar{display:none;}
  .page-stampati .dettagli-grid > .det-card,
  .page-stampati .dettagli-grid > .det-card.det-wide{
    grid-column:auto;flex:0 0 var(--cw);width:var(--cw);
    height:auto;aspect-ratio:3/4;
    scroll-snap-align:start;
  }
}
@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .page-stampati .dettagli{--n:3;}
}
@media(max-width:720px){
  .page-stampati .dettagli{--n:2;}
  .page-stampati .dettagli-grid > .det-card,
  .page-stampati .dettagli-grid > .det-card.det-wide{scroll-snap-stop:always;}
}
@media(max-width:560px){
  .page-stampati .dettagli{
    --n:1;
    --cw:calc((100vw - 52px) * .82);
    --cl:calc((100cqw - var(--cw)) / 2);
  }
}

@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .det-title{font-size:var(--fs-titolo-4-mob);}
}

/* ════════ CAROSELLO "Dettagli che valorizzano lo stampato" (stampati) — TAP, SOLO MOBILE ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-stampati .det-card::after,
  .page-stampati .det-body{
    transition:opacity .18s ease;
  }
}

/* ════════ "TECNOLOGIE DI STAMPA" (stampati) — TELEFONI STRETTI ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .tecno-grid{
    grid-template-columns:1fr;
    column-gap:0;
    row-gap:clamp(32px,8vw,48px);
  }
}

/* ════════ "TECNOLOGIE DI STAMPA" (stampati) — MOBILE ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .tecno-subtitle{
    font-size:var(--fs-titolo-4-mob);
  }
  .page-stampati .tecno-head{margin-bottom:var(--sp-26);}
}
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-stampati .tecno-desc{
    font-size:var(--fs-testo);
    font-weight:400;
    line-height:var(--lh-corpo);
    color:rgba(0,25,35,.65);
    max-width:52ch;
  }
}

/* ════════ "TECNOLOGIE DI STAMPA" — GAP TRA CARD 56px ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-etichette .tecno-grid,
  .page-stampati .tecno-grid{
    row-gap:var(--sp-56);
  }
}

/* ════════ [STAMPATI] Caroselli categorie — padding laterale doppio su mobile ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .cat-strips{
    grid-column:1 / -1;
    margin-right:0;
  }
  .page-stampati .striscia{
    margin-left:calc(-1 * var(--margin));
    margin-right:calc(-1 * var(--margin));

  }
  .page-stampati .cat-crocini-bottom{
    margin-left:calc(-1 * var(--margin));
    margin-right:calc(-1 * var(--margin));
  }
}

/* ════════ [STAMPATI] Caroselli categorie — sotto i 1000px ════════ */
.page-stampati .striscia-viewport{width:100%;min-width:0;overflow:hidden;}

@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-stampati .striscia-right{
    --n:4;
    
    /* 20px di sliver + 6px di gap, come la home */
    container-type:inline-size;
  }
  .page-stampati .striscia-viewport{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--cl);
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .page-stampati .striscia-viewport::-webkit-scrollbar{display:none;}
  .page-stampati .striscia-carousel{
    transform:none!important;will-change:auto;
    padding-left:var(--cl);
    padding-right:calc(100cqw - var(--cl) - var(--cw));
  }
  .page-stampati .carousel-item{
    width:var(--cw);
  }
  .page-stampati .carousel-img{
    width:100%;
  }
}
@media(max-width:900px), (min-width:721px) and (pointer:coarse){
  .page-stampati .striscia-right{--n:3;}
}
@media(max-width:720px){
  .page-stampati .striscia-right{--n:2;}
  .page-stampati .carousel-item{scroll-snap-stop:always;}
}
@media(max-width:560px){
  .page-stampati .striscia-right{
    --n:1;
    /* stessa misura della home, decisa a occhio */
    /* scheda centrata: pezzetti visibili su entrambi i lati */
  }
}

/* ════════ [STAMPATI] Caroselli categorie — bordo netto sotto gli 820px ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .striscia{
    padding-left:0;
    padding-right:0;
  }
  .page-stampati .striscia-left{
    padding-left:var(--margin);
    padding-right:var(--margin);
  }
}

/* ════════ [STAMPATI] Caroselli categorie — card leggermente più grandi ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-stampati .striscia-right{
    --cw:calc((100cqw - 24px - (var(--n) + 1) * 6px) / var(--n));  /* sliver 20px → 12px per lato */
    --cl:18px;                                                      /* 12px di sliver + 6px di gap */
  }
}
@media(max-width:560px){
  .page-stampati .striscia-right{
    --cw:calc(100vw - 80px);                 /* ~40px di sliver per lato sul telefono */
    --cl:calc((100cqw - var(--cw)) / 2);
  }
}

/* ════════ [STAMPATI] Titolo+descrizione → carosello — senza riga separatrice su mobile ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .striscia-left{
    border-bottom:none;
    
  }
}

/* ════════ [STAMPATI] "Controllo del file" — SOLO MOBILE ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .controllo{
    padding-top:var(--sp-56);
    padding-bottom:var(--sp-64);
  }
  .page-stampati .controllo-cmyk{display:none;}
  .page-stampati .controllo-label{margin-bottom:var(--sp-16);}
}
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-stampati .controllo-body{
    font-weight:400;
    font-size:var(--fs-testo);
    line-height:var(--lh-corpo);
    color:rgba(0,25,35,.65);
  }
  .page-stampati .controllo-body strong{
    font-weight:600;
    color:inherit;
  }
}

/* ════════ MANIFESTO HOME + CHI SIAMO — SCALA TABLET ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-home .manifesto-body,
  .page-chi-siamo .manifesto-body{
    font-size:clamp(22px,3.4vw,34px);
  }
}

/* ════════ "TECNOLOGIE DI STAMPA" (etichette + stampati) — TITOLO E TESTO CENTRATI SU MOBILE/TABLET ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-etichette .tecno-sub,
  .page-stampati .tecno-sub{
    justify-content:center;
  }
  .page-etichette .tecno-subtitle,
  .page-stampati .tecno-subtitle{
    text-align:center;
  }
  .page-etichette .tecno-desc,
  .page-stampati .tecno-desc{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
}

/* ════════ "PROGETTAZIONE GRAFICA" + "PRESTAMPA" (due pilastri) — SEMPRE UNA SOPRA E UNA SOTTO SU TABLET ════════ */
@media(min-width:721px) and (max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-grafica .pilastri-grid{grid-template-columns:1fr;}
  .page-grafica .pilastri-grid > *{grid-column:1 / -1;}
}

/* ── Titolo e didascalia centrati sotto ogni foto, mobile+tablet ── */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-grafica .pilastro-title{
    text-align:center;
  }
  .page-grafica .pilastro-desc{
    text-align:center;
  }
}

/* ════════ "PROGETTAZIONE GRAFICA" + "PRESTAMPA" — row-gap 56px FRA 721 E 820px ════════ */
@media(min-width:721px) and (max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-grafica .pilastri-grid{row-gap:var(--sp-56);}
}

/* ════════ [STAMPATI] Pallini CMYK sui cut-divider — SOLO MOBILE ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .cut-divider .divider-cmyk{
    display:block;position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    height:12.96px;width:auto;z-index:6;pointer-events:none;
  }
}

/* ════════ A-CAPO PER-BREAKPOINT SU 5 TITOLI ════════ */
.tecno-head-mbreak,
.dettagli-head-mbreak,
.manifesto-head-mbreak,
.dettagli-head-tbreak,
.bozza-head-tbreak{display:none;}

@media(max-width:720px){
  .page-etichette .tecno-head-mbreak,
  .page-etichette .dettagli-head-mbreak{display:inline;}
}

@media(max-width:720px){
  .page-stampati .manifesto-head-mbreak{display:inline;}
}

@media(min-width:721px) and (max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .dettagli-head-tbreak{display:inline;}
}

@media(min-width:721px) and (max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-sost .bozza-head-tbreak{display:inline;}
}

@media(min-width:721px) and (max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-etichette .bozza-head:not(.bozza-head-mobile){display:block;}
  .page-etichette .bozza-head-mobile{display:none;}
}

/* ════════ HOME — titolo "La tua visione, la nostra competenza tecnica" (SOLO TELEFONO) ════════ */
.studio-title-mbreak{display:none;}
@media(max-width:720px){
  .page-home .studio-title-mbreak{display:inline;}
}

/* ════════ ZEBRATURA x2 SU MOBILE — sostenibilita.html + stampati.html ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-sost .zebra-divider img,
  .page-stampati .zebra-divider img{
    width:200%;
    max-width:none;
    margin-left:-50%;
  }
}

/* ════════ HERO PAGINE INTERNE — TABLET VERTICALE ════════ */
@media(min-width:721px) and (max-width:1024px) and (orientation:portrait){

  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero{
    height:100vh;height:100lvh;
    min-height:100vh;min-height:100lvh;
  }
  @supports (-webkit-touch-callout:none){
    :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero{
      min-height:calc(100lvh + var(--hero-oltre-barre));
    }
  }

  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-main{
    position:absolute;top:0;left:0;right:0;
    height:100vh;height:100svh;
    padding-bottom:var(--sp-48);
  }
  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-foot{
    flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--sp-26);
  }
  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-text,
  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-right{
    position:static;max-width:100%;
  }

  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-title{
    font-size:clamp(64px,11vw,104px);line-height:var(--lh-display);margin-bottom:0;
  }
  .hero-title-break{display:none;}

  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-desc{
    text-align:left;text-align-last:left;max-width:62ch;margin-bottom:0;
  }
  :is(.page-etichette,.page-grafica,.page-stampati,.page-sost) .hero-anim .hero-desc .split-line-inner{
    text-align:left;text-align-last:left;
  }
  :is(.page-etichette,.page-grafica,.page-stampati,.page-sost) .hero-anim .hero-desc .split-line-mask:last-child .split-line-inner{
    text-align-last:left;
  }

  /* CTA "Scrivici" nascosta come sul telefono: nel layout impilato
     finirebbe incastrata fra titolo e didascalia. Resta raggiungibile
     dal menu e dal footer. */
  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-cta{display:none;}
}

/* ════════ CAROSELLI "Dettagli" (etichette + stampati) — FINE CORSA SU TABLET ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-etichette .dettagli-grid,
  .page-stampati .dettagli-grid{
    padding-right:var(--cl);
    scroll-padding-right:var(--cl);
  }
  .page-etichette .dettagli-grid > .det-card:last-child,
  .page-stampati .dettagli-grid > .det-card:last-child{
    scroll-snap-align:end;
  }
}

/* ════════ CTA FINALE STAMPATI + SOSTENIBILITA — BOTTONI AFFIANCATI SU MOBILE ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .bozza .cta-actions,
  .page-sost .bozza .cta-actions{
    flex-wrap:nowrap;
    gap:var(--sp-10);
  }
  .page-stampati .bozza .cta-actions .cta-btn,
  .page-stampati .bozza .cta-actions .cta-btn-ghost,
  .page-sost .bozza .cta-actions .cta-btn,
  .page-sost .bozza .cta-actions .cta-btn-ghost{
    padding:var(--sp-14) 14px;
    font-size:var(--fs-etichetta);
    white-space:nowrap;
  }
}
@media(max-width:400px){
  .page-sost .bozza .cta-actions{gap:var(--sp-8);}
  .page-sost .bozza .cta-actions .cta-btn,
  .page-sost .bozza .cta-actions .cta-btn-ghost{
    padding:var(--sp-14) 11px;
    font-size:var(--fs-etichetta-sm);
  }
}

/* ════════ [STAMPATI] Titoli e didascalie dei caroselli categorie — CENTRATI su mobile e tablet verticale ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .striscia-left{text-align:center;}
  .page-stampati .striscia-title{text-align:center;}
  .page-stampati .striscia-desc{text-align:center;margin-left:auto;margin-right:auto;}
}
@media(min-width:821px) and (max-width:1024px) and (orientation:portrait){
  .page-stampati .striscia-left{text-align:center;}
  .page-stampati .striscia-title{text-align:center;}
  .page-stampati .striscia-desc{text-align:center;margin-left:auto;margin-right:auto;}
}

/* ════════ [STAMPATI] Titoli caroselli categorie — stessa misura degli altri titoli della pagina ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .striscia-title{
    font-size:var(--fs-titolo-mob);
  }
}

/* ════════ [STAMPATI] Didascalia → carosello di appartenenza: spazio ridotto a 26px ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .striscia-left{padding-bottom:0;}
  .page-stampati .striscia-carousel{padding-top:var(--sp-26);}
}

/* ════════ [STAMPATI] Riga sopra al titolo → titolo: 56px ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .striscia-left{padding-top:var(--sp-56);}
}

/* ════════ [SOSTENIBILITÀ] Divisori completi sopra "Certificazioni" e "Principi e linee guida" — SOLO MOBILE ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  /* pallini sul .cut-divider sopra "Certificazioni" */
  .page-sost .cut-divider .divider-cmyk,
  /* pallini sulla riga sopra "Principi e linee guida" */
  .page-sost .cert-baseline .divider-cmyk{
    display:block;position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    height:12.96px;width:auto;z-index:6;pointer-events:none;
  }

  /* crocini sulla riga sopra "Principi e linee guida" */
  .page-sost .cert-baseline::before,
  .page-sost .cert-baseline::after{
    content:'';position:absolute;width:19.2px;height:19.2px;top:50%;
    background:url('../img/comuni/crocino.webp') center/contain no-repeat;
    z-index:5;pointer-events:none;
  }
  .page-sost .cert-baseline::before{left:36px;transform:translate(-50%,-50%);}
  .page-sost .cert-baseline::after{right:36px;transform:translate(50%,-50%);}
}

/* ════════ CROCINI DI REGISTRO — DISTANZA UNIFORME DAL BORDO SCHERMO, SOLO MOBILE ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  /* crocino sinistro */
  .section-crocini .crocino-left,
  .cut-divider::before,
  .manifesto-divider-top::before,
  .liberta-divider::before,
  .liberta-divider-end::before,
  .chat-divider::before,
  .chat-divider-end::before,
  .page-chi-siamo .manifesto-divider-bottom::before,
  .grafica-manifesto-divider-top::before,
  .cat-crocini-bottom .ccl,
  .page-stampati .cat-crocini-bottom .ccl,
  .studio-section:not(.studio-states) .studio-divider-end::before,
  .page-chi-siamo .cs-divider::before,
  .page-sost .cert-baseline::before{
    left:calc(50% - var(--vw, 100vw)/2 + 20px);
  }

  /* crocino destro */
  .section-crocini .crocino-right,
  .cut-divider::after,
  .manifesto-divider-top::after,
  .liberta-divider::after,
  .liberta-divider-end::after,
  .chat-divider::after,
  .chat-divider-end::after,
  .page-chi-siamo .manifesto-divider-bottom::after,
  .grafica-manifesto-divider-top::after,
  .cat-crocini-bottom .ccr,
  .page-stampati .cat-crocini-bottom .ccr,
  .studio-section:not(.studio-states) .studio-divider-end::after,
  .page-chi-siamo .cs-divider::after,
  .page-sost .cert-baseline::after{
    right:calc(50% - var(--vw, 100vw)/2 + 20px);
  }
}

/* ════════ CROCINI DI REGISTRO — CORREZIONE DESKTOP E TABLET (>820px) ════════ */
@media(min-width:821px) and (pointer:fine){
  .foglio-inner > .cut-divider::before,
  .foglio-inner > .cert-baseline::before{
    left:calc(36px + var(--margin));
  }
  .foglio-inner > .cut-divider::after,
  .foglio-inner > .cert-baseline::after{
    right:calc(36px + var(--margin));
  }
}

/* ════════ RECENSIONI — CHIUSURA FLUIDA SU iOS ════════ */
.chat-extra{transition:none;}

/* ════════ CRITERIO TABLET — PRIMA L'INPUT, POI LA LARGHEZZA ════════ */

/* ════════ TABLET (TOUCH LARGO) — CORREZIONI SPECIFICHE ════════ */
@media (min-width:901px) and (pointer:coarse){

  /* 1 — ZEBRATURA a meta' scala (tutte le pagine). Sul mobile e'
     width:200% + margin-left:-50% per ingrandire le righe; qui torna
     a scala 1:1, che e' esattamente la meta'. */
  .page-home .zebra-divider img,
  .page-chi-siamo .zebra-divider img,
  .page-grafica .zebra-divider img,
  .page-etichette .zebra-divider img,
  .page-stampati .zebra-divider img,
  .page-sost .zebra-divider img{
    width:100%; max-width:none; margin-left:0;
  }

  .page-home .servizio-name .sv-br{ display:none; }

  .page-sost .doc-title .doc-br{ display:none; }

  /* 4 — CHI SIAMO: respiro sotto la didascalia del calendario
     ("Dal garage di casa..."), che toccava il divider sotto.
     56px = ritmo standard dei passaggi di sezione del progetto. */
  .page-chi-siamo .storia-layout .storia-lead{ margin-bottom:var(--sp-56); }

  /* 6 — ETICHETTE "Tre buoni motivi": box affiancati su 3 colonne
     (sistema a 12 colonne gia' usato dal desktop). Il tratteggio
     laterale .motivi-vline e' gia' nascosto dal blocco condiviso. */
  .page-etichette .motivi-list{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .page-etichette .motivi-list > *{ grid-column:span 4; }

  /* 7 — TECNOLOGIE DI STAMPA su due colonne (etichette e stampati),
     con immagine, titolo e testo centrati nella propria colonna. */
  .page-etichette .tecno-grid,
  .page-stampati .tecno-grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--gutter);
    row-gap:0;
  }
  .page-etichette .tecno-grid > *,
  .page-stampati .tecno-grid > *{ grid-column:span 6; }
  .page-etichette .tecno-col,
  .page-stampati .tecno-col{ text-align:center; }
  .page-etichette .tecno-subtitle,
  .page-stampati .tecno-subtitle,
  .page-etichette .tecno-desc,
  .page-stampati .tecno-desc{
    text-align:center; margin-left:auto; margin-right:auto;
  }

  /* 8 — ETICHETTE "Controllo qualita'": torna al flusso orizzontale
     del desktop, 3 colonne e frecce non ruotate. */
  .page-etichette .cq-flow{
    flex-direction:row;
    align-items:flex-start;
    gap:clamp(16px,2.4vw,40px);
  }
  .page-etichette .cq-step{ max-width:320px; }
  .page-etichette .cq-arrow{
    align-self:flex-start;
    margin-top:var(--sp-f-md);
    transform:none;
    width:clamp(34px,3.4vw,52px);
  }

  /* 9 — SOSTENIBILITA "Un impegno che si traduce in azioni":
     i 3 box bianchi affiancati. */
  .page-sost .esg-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .page-sost .esg-grid > *{ grid-column:span 4; }

  .page-grafica .pilastri-grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--gutter);
    row-gap:0;
  }
  .page-grafica .pilastri-grid > *{ grid-column:span 6; }
}

/* ════════ CONTACT DRAWER — MOBILE: ALTEZZA REALE E FORM CHE CI STA TUTTO ════════ */
@media (max-width:820px), (pointer:coarse) and (max-height:900px){

  /* 1 — altezza vera. L'ordine e' crescente di affidabilita':
     l'ultima regola che il browser capisce vince. */
  .cd-drawer{
    height:100vh;
    height:calc(var(--vh-real, 1vh) * 100);
    height:100svh;
    height:100dvh;
    min-height:0;
  }

  /* 2 — il contenuto diventa una colonna elastica alta quanto il
     pannello: cosi' il textarea puo' prendersi lo spazio che resta. */
  .cd-inner{
    padding:var(--sp-20) 24px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* 3 — testata compressa */
  .cd-close{top:12px;right:12px;width:36px;height:36px;}
  .cd-claim{font-size:30px;margin:0 0 var(--sp-4);}
  .cd-sub{font-size:var(--fs-testo-sm);line-height:var(--lh-medio);margin:0 0 var(--sp-10);}

  /* email e telefono affiancati invece che uno sopra l'altro */
  .cd-direct{
    flex-direction:row;flex-wrap:wrap;align-items:baseline;
    gap:var(--sp-4) var(--sp-16);margin:0 0 var(--sp-12);padding:var(--sp-8) 0 var(--sp-10);
  }
  .cd-direct a{font-size:var(--fs-testo-sm);}

  /* 4 — form piu' compatto */
  .cd-form{gap:var(--sp-10);}
  .cd-field{gap:var(--sp-4);}
  .cd-input,.cd-textarea{padding:var(--sp-12) 14px;}
  .cd-textarea{resize:none;}

  .cd-submit{margin-top:var(--sp-2);padding:var(--sp-14) 20px;}
  .cd-hint{font-size:var(--fs-etichetta-sm);margin-top:0;}
  .cd-privacy{font-size:var(--fs-etichetta-sm);line-height:var(--lh-testo);}

  .cd-social{margin-top:var(--sp-10);gap:var(--sp-10);}
  .cd-social a{width:34px;height:34px;}
}

@media (max-width:820px) and (max-height:820px), (pointer:coarse) and (max-height:820px){
  .cd-inner{display:flex;flex-direction:column;flex:1 0 auto;min-height:0;}
  .cd-form{flex:1 0 auto;min-height:0;}
  .cd-form .cd-field:has(.cd-textarea){flex:1 1 auto;min-height:0;}
  .cd-textarea{min-height:56px;height:100%;flex:1 1 auto;}
}

@media (max-width:820px) and (max-height:600px), (pointer:coarse) and (max-height:600px){
  .cd-inner{padding-top:var(--sp-16);}
  .cd-claim{font-size:26px;}
  .cd-sub{display:none;}
  .cd-social{margin-top:var(--sp-8);}
  .cd-social a{width:32px;height:32px;}
}

/* ════════ CONTACT DRAWER — INDIZIO DI SCROLL ════════ */
.cd-drawer::after{
  content:'';flex:0 0 auto;position:sticky;bottom:0;z-index:1;
  height:64px;margin-top:-64px;pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 62%, #fff 100%);
  opacity:0;transition:opacity .22s ease;
}
.cd-drawer.cd-more::after{opacity:1;}

/* ════════ HERO HOME SU TOUCH — PULSANTE "CHIAMA" + DIDASCALIA ANIMATA ════════ */

/* markup solo-touch: spento ovunque per default → desktop intatto */
.hero-call-mobile{display:none;}

.h-sub-armed:not([data-split-done]){opacity:0;}

@media(max-width:820px), (min-width:721px) and (pointer:coarse){

  /* i tre loghi lasciano il posto al pulsante */
  .page-home .hero-certs-mobile{display:none;}

  .page-home .hero-call-mobile{
    display:inline-flex;align-items:center;justify-content:center;
    box-sizing:border-box;
    margin:var(--sp-26) auto 0;
    padding:var(--sp-10) 26px;min-height:44px;
    border:1px solid #fff;border-radius:999px;
    font-family:var(--font-testo);font-size:var(--fs-etichetta);font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;
    color:#fff;text-decoration:none;white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
    transition:background .2s,color .2s;
  }
  /* feedback al tocco: pieno bianco, testo scuro (come il footer) */
  .page-home .hero-call-mobile:active{background:#fff;color:var(--blk,#001923);}
}

/* ════════ NAV UNICA MOBILE ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){

  .hero header.nav{visibility:hidden;pointer-events:none;}

  .nav-sticky{transform:translateY(0);pointer-events:auto;}
  .nav-shade{opacity:1;}

  .nav-sticky .nav-logo{width:122px;transition:width .32s cubic-bezier(.65,0,.35,1);}
  .nav-sticky--compact .nav-logo{width:34px;}

  .nav-sticky.visible.nav-sticky--hide-scroll{transform:translateY(calc(-100% - 24px));}
}

/* ════════ HERO — FALLBACK BARRE BROWSER SENZA lvh/svh ════════ */
@supports not (height:100svh){
  @media(max-width:720px){
    :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero{
      height:calc(var(--vh-max-real, var(--vh-real, 1vh)) * 100);
      min-height:calc(var(--vh-max-real, var(--vh-real, 1vh)) * 100);
    }
    :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-main{
      height:calc(var(--vh-real, 1vh) * 100);
    }
  }
  @media(max-width:820px), (min-width:721px) and (pointer:coarse){
    .page-home .hero{
      height:calc(var(--vh-max-real, var(--vh-real, 1vh)) * 100);
      min-height:calc(var(--vh-max-real, var(--vh-real, 1vh)) * 100);
    }
    .page-home .hero-main{
      height:calc(var(--vh-real, 1vh) * 100);
    }
  }
  @media(min-width:721px) and (max-width:1024px) and (orientation:portrait){
    :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero{
      height:calc(var(--vh-max-real, var(--vh-real, 1vh)) * 100);
      min-height:calc(var(--vh-max-real, var(--vh-real, 1vh)) * 100);
    }
    :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-main{
      height:calc(var(--vh-real, 1vh) * 100);
    }
  }
}

/* ════════ MENU MOBILE — TAGLIA VOCI E LAYOUT ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  :root{
    --mm-num-w:0px;
    --mm-foot-h:104px;     /* stima altezza del piede, SOLO per il calcolo taglia (il piede reale e' auto) */
    --mm-rows-h:6.65;      /* 7 righe * line-height .95 → em totali del testo */
    --mm-rows-pad:120px;   /* 7 * 12px di padding verticale + 6 * 6px di gap */
    --mm-fit-w:7.6;        /* voce piu' lunga (19 caratteri) in em: misurata 7.1em in Instrument Serif + margine */
  }

  /* ── Griglia: testa / voci / piede ── */
  .mobile-menu{
    display:grid;
    grid-template-rows:var(--menu-links-top) 1fr auto;   /* 1fr = minmax(auto,1fr): se le voci non entrano, e' il piede a scendere sotto (scroll), non a sovrapporsi */
    grid-template-columns:100%;
    align-items:start;
    container-type:size;
  }
  .mobile-menu-links{
    grid-row:2;
    padding:0 var(--menu-side) 0 calc(var(--menu-side) - 12px);
    gap:var(--sp-6);
  }

  /* ── Voci: numerino + testo ── */
  .mobile-menu-links .nav-link{
    display:flex;align-items:baseline;gap:var(--sp-14);
    padding:var(--sp-6) 12px;
    font-size:max(30px, min(
      clamp(40px,6vw,80px),
      calc((100cqh - var(--menu-links-top) - var(--mm-foot-h) - var(--mm-rows-pad)) / var(--mm-rows-h)),
      calc((100cqw - 64px - var(--mm-num-w)) / var(--mm-fit-w))
    ));
  }
  .mm-txt{display:block;transition:transform .18s cubic-bezier(.65,0,.35,1);}
  .mm-txt::first-letter{text-transform:uppercase;}
  /* feedback al tocco: il testo scivola di poco a destra e si colora */
  .mobile-menu-links .nav-link:active .mm-txt{transform:translateX(6px);color:var(--org,#E84A2F);}

  /* ── Piede ── */
  .mm-foot{
    grid-row:3;position:relative;z-index:3;
    padding:var(--sp-20) var(--menu-side) calc(20px + env(safe-area-inset-bottom,0px));
  }
  .mm-divider{position:relative;height:1px;margin:0 calc(-1 * var(--menu-side));}
  .mm-divider-line{
    position:absolute;inset:0;background:var(--line,#909090);
    transform:scaleX(0);transform-origin:left center;
  }
  .mm-divider::before,
  .mm-divider::after{
    content:'';position:absolute;width:19.2px;height:19.2px;top:50%;
    background:url('../img/comuni/crocino.webp') center/contain no-repeat;
    pointer-events:none;opacity:0;
  }
  .mm-divider::before{left:20px;transform:translate(-50%,-50%) rotate(-90deg);}
  .mm-divider::after{right:20px;transform:translate(50%,-50%) rotate(90deg);}
  .mm-divider .divider-cmyk{
    display:block;
    position:absolute;top:50%;left:50%;
    height:12.96px;width:auto;
    transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;
  }
  .mm-contact{
    display:flex;align-items:center;justify-content:space-between;
    gap:var(--sp-12) var(--sp-26);flex-wrap:wrap;margin-top:var(--sp-20);
  }
  .mm-contact-links{display:flex;flex-direction:column;gap:var(--sp-6);min-width:0;}
  .mm-contact-links a{
    font-family:var(--font-testo);font-weight:500;font-size:var(--fs-testo-sm);
    letter-spacing:.02em;line-height:var(--lh-medio);
    color:var(--blk,#001923);text-decoration:none;opacity:0;
    -webkit-tap-highlight-color:transparent;
  }
  .mm-contact-links a:active{color:var(--org,#E84A2F);}
  .mm-contact-social{display:flex;gap:var(--sp-10);flex:0 0 auto;}
  .mm-contact-social a{
    display:inline-grid;place-items:center;width:38px;height:38px;border-radius:999px;
    border:1px solid rgba(0,25,35,.18);color:rgba(0,25,35,.7);opacity:0;
    -webkit-tap-highlight-color:transparent;
    transition:background .2s,color .2s,border-color .2s;
  }
  .mm-contact-social a:active{background:var(--blk,#001923);color:#fff;border-color:var(--blk,#001923);}
  .mm-contact-social svg{width:18px;height:18px;}

  /* ── Animazioni all'apertura (pilotate da .open) ── */
  .mobile-menu .dots-layer{opacity:0;transition:opacity .8s ease .1s;}
  .mobile-menu.open .dots-layer{opacity:.65;}
  .mobile-menu.open .mm-divider-line{animation:mmLine .7s cubic-bezier(.65,0,.35,1) .22s forwards;}
  .mobile-menu.open .mm-divider::before{animation:mmCrocL .5s cubic-bezier(0.16,1,0.3,1) .62s forwards;}
  .mobile-menu.open .mm-divider::after{animation:mmCrocR .5s cubic-bezier(0.16,1,0.3,1) .62s forwards;}
  .mobile-menu.open .mm-divider .divider-cmyk{animation:mmDots .5s cubic-bezier(0.34,1.56,0.64,1) .78s forwards;}
  .mobile-menu.open .mm-contact-links a,
  .mobile-menu.open .mm-contact-social a{animation:mmUp .5s cubic-bezier(0.16,1,0.3,1) forwards;}
  .mobile-menu.open .mm-contact-links a:nth-child(1){animation-delay:.5s;}
  .mobile-menu.open .mm-contact-links a:nth-child(2){animation-delay:.56s;}
  .mobile-menu.open .mm-contact-social a:nth-child(1){animation-delay:.62s;}
  .mobile-menu.open .mm-contact-social a:nth-child(2){animation-delay:.68s;}
}
@keyframes mmLine{to{transform:scaleX(1);}}
@keyframes mmCrocL{
  from{opacity:0;transform:translate(-50%,-50%) rotate(-90deg);}
  to{opacity:1;transform:translate(-50%,-50%) rotate(0deg);}
}
@keyframes mmCrocR{
  from{opacity:0;transform:translate(50%,-50%) rotate(90deg);}
  to{opacity:1;transform:translate(50%,-50%) rotate(0deg);}
}
@keyframes mmDots{
  from{opacity:0;transform:translate(-50%,-50%) scale(.4);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}
}
@keyframes mmUp{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* ── ORIZZONTALE: due colonne (4+3), testa piu' bassa ── */
@media(max-width:820px) and (orientation:landscape), (min-width:721px) and (pointer:coarse) and (orientation:landscape){
  :root{
    --menu-links-top:76px;   /* la X finisce a 62px: 14px d'aria */
    --mm-foot-h:74px;        /* contatti su una riga sola, piede compatto (12+1+12+34+14+1) */
  }
  .mobile-menu-links{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(4,auto);
    grid-template-columns:max-content max-content;
    column-gap:48px;row-gap:var(--sp-6);
    justify-content:start;align-content:start;
  }
  .mobile-menu-links .nav-link{
    font-size:max(28px, min(
      clamp(36px,4.6vw,56px),
      calc((100cqh - var(--menu-links-top) - var(--mm-foot-h) - 66px) / 3.8),
      calc((100cqw - 100px) / 12.8)
    ));
  }
  .mm-foot{padding-top:var(--sp-12);padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));}
  .mm-contact{margin-top:var(--sp-12);flex-wrap:nowrap;}
  .mm-contact-links{flex-direction:row;gap:var(--sp-26);}
  .mm-contact-social a{width:34px;height:34px;}
}

@media(max-width:820px) and (orientation:landscape) and (min-height:560px),
       (min-width:721px) and (pointer:coarse) and (orientation:landscape) and (min-height:560px){
  .mobile-menu-links{align-content:center;height:100%;}
}

/* ── Movimento ridotto: stato finale, niente animazioni ── */
@media(prefers-reduced-motion:reduce){
  .mobile-menu .dots-layer{transition:none;opacity:.65;}
  /* .open nei selettori: stessa specificita' (0,3,0)+ delle regole animate
     sopra, cosi' vincono per ordine — senza, (0,2,0) perderebbe. */
  .mobile-menu.open .mm-divider-line{transform:scaleX(1);animation:none;}
  .mobile-menu.open .mm-divider::before{opacity:1;transform:translate(-50%,-50%);animation:none;}
  .mobile-menu.open .mm-divider::after{opacity:1;transform:translate(50%,-50%);animation:none;}
  .mobile-menu.open .mm-divider .divider-cmyk{opacity:1;transform:translate(-50%,-50%);animation:none;}
  .mobile-menu.open .mm-contact-links a,
  .mobile-menu.open .mm-contact-social a{opacity:1;animation:none;}
  .mm-txt{transition:none;}
}

/* ════════ TORNA IN CIMA ════════ */
.to-top{
  position:fixed;right:28px;bottom:28px;z-index:400;
  width:48px;height:48px;border-radius:999px;
  display:inline-grid;place-items:center;
  border:0;padding:0;cursor:pointer;
  background:var(--blk,#001923);color:#fff;
  box-shadow:0 6px 20px -6px rgba(0,25,35,.45);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s cubic-bezier(0.22,1,0.36,1),
             transform .3s cubic-bezier(0.22,1,0.36,1),
             background .2s ease;
}
.to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.to-top:hover{background:var(--org,#E84A2F);}
/* Sopra il footer (scuro) i colori si invertono, altrimenti il bottone
   scuro su fondo scuro sparisce. Classe messa da js/site.js §11. */
.to-top--su-scuro{background:var(--wht,#F5F2EE);color:var(--blk,#001923);box-shadow:0 6px 20px -6px rgba(0,0,0,.5);}
.to-top--su-scuro:hover{background:var(--org,#E84A2F);color:#fff;}
.to-top:focus-visible{outline:2px solid var(--org,#E84A2F);outline-offset:3px;}
.to-top svg{display:block;}
@media(max-width:820px){
  /* safe-area: su iPhone la barra di Safari e l'home indicator stanno
     in basso — il bottone si alza di quanto serve. */
  .to-top{
    right:20px;
    bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    width:46px;height:46px;
  }
}
@media(prefers-reduced-motion:reduce){
  .to-top{transition:opacity .01s linear;transform:none;}
  .to-top.visible{transform:none;}
}

/* ════════ HERO HOME — LUMINOSITÀ DEL VIDEO ════════ */
.page-home .hero-bg video{
  filter:brightness(.50) grayscale(.06);
}
.page-home .hero-bg::after{
  background:
    linear-gradient(to top,
      rgba(0,25,35,.48) 0%,
      rgba(0,25,35,.30) 20%,
      rgba(0,25,35,.07) 45%,
      rgba(0,25,35,0) 66%),
    linear-gradient(to bottom,
      rgba(0,25,35,.46) 0%,
      rgba(0,25,35,.28) 14%,
      rgba(0,25,35,0) 30%);
}

/* ════════ PANNELLO CONTATTI — OMBRA SOLO DA APERTO ════════ */
.cd-drawer{
  box-shadow:none;
  transition:transform .42s cubic-bezier(.4,0,.15,1), box-shadow .42s ease;
}
.cd-drawer.cd-open{box-shadow:-24px 0 60px rgba(0,0,0,.28);}

/* ════════ FINESTRA VIDEO CTA "VUOI CONOSCERCI DA VICINO?" — solo chi-siamo.html ════════ */
.cta-video{
  position:relative;
  width:min(100%,880px);
  margin:0 auto clamp(32px,4vw,56px);
  aspect-ratio:16/9;
  border-radius:clamp(14px,1.4vw,22px);
  overflow:hidden;
  background:#000;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.75);
  cursor:pointer;
}
/* copertina: una foto, non un video. Pesa poco e non fa partire
   nessuno script di YouTube finche' non si clicca. */
.cta-video-cover{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  display:block;background:#000;
}
/* l'iframe di YouTube entra al clic e copre tutto il riquadro */
.cta-video iframe{
  position:absolute;inset:0;z-index:4;
  width:100%;height:100%;border:0;display:block;
}
/* velo scuro sulla copertina: fa leggere il triangolo anche su una
   foto chiara. Sparisce quando si apre il video. */
.cta-video::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(0,25,35,.30);
  transition:opacity .35s ease;
}
.cta-video.is-playing::before{opacity:0;}

.cta-video-play{
  position:absolute;left:50%;top:50%;z-index:3;
  transform:translate(-50%,-50%);
  width:clamp(58px,6.4vw,82px);aspect-ratio:1;
  border-radius:999px;border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;
  transition:transform .3s cubic-bezier(.16,1,.3,1),background .25s ease,
             border-color .25s ease,opacity .25s ease;
}
.cta-video-play svg{width:36%;height:36%;fill:currentColor;margin-left:8%;}
.cta-video:hover .cta-video-play,
.cta-video-play:hover{
  background:var(--org,#E84A2F);border-color:var(--org,#E84A2F);
  transform:translate(-50%,-50%) scale(1.06);
}
.cta-video.is-playing .cta-video-play{
  opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.88);
}

/* stato "ancora senza video": data-youtube-id vuoto. Al posto del
   play compare una targhetta. Togliendo le virgolette vuote e
   mettendo l'ID, le due cose si scambiano da sole. */
.cta-video-soon{
  position:absolute;left:50%;top:50%;z-index:3;
  transform:translate(-50%,-50%);
  display:none;
  padding:.62em 1.25em;border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;font-size:var(--fs-14,14px);letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;
}
.cta-video[data-youtube-id=""]{cursor:default;}
.cta-video[data-youtube-id=""] .cta-video-play{display:none;}
.cta-video[data-youtube-id=""] .cta-video-soon{display:block;}

@media (prefers-reduced-motion: reduce){
  .cta-video::before,
  .cta-video-play{transition:none;}
}

/* ════════ HERO PAGINE INTERNE SU TELEFONO — BLOCCO TESTO PIU' COMPATTO ════════ */
@media(max-width:720px){
  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-main{
    padding-bottom:var(--sp-26);
  }
  :is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-desc{
    line-height:var(--lh-testo);
  }
}

:is(.page-etichette,.page-grafica,.page-stampati,.page-chi-siamo,.page-sost) .hero-desc{
  line-height:var(--lh-testo);
}

/* ════════ HERO HOME SU MOBILE — BLOCCO TITOLO PIU' IN BASSO ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-home .hero-title-wrap{
    --hero-blocco-giu:42px;
    transform:translateY(var(--hero-blocco-giu));
  }
}

/* ════════ PANNELLO CONTATTI — DA CHIUSO FUORI DAL RENDERING (iOS) ════════ */
.cd-drawer[hidden]{display:none;}
.cd-drawer:focus{outline:none;}

/* ════════ MENU MOBILE — DA CHIUSO FUORI DAL RENDERING ════════ */
.mobile-menu[hidden]{display:none;}

/* ════════ MENU MOBILE — NIENTE FASCIA DIETRO LA BARRA DEL BROWSER ════════ */
.mobile-menu{
  -webkit-clip-path:inset(0 0 calc(100% - 100dvh) 0);
          clip-path:inset(0 0 calc(100% - 100dvh) 0);
}

/* ════════ CHI SIAMO — TRATTEGGIATE AGGANCIATE AI CROCINI SOPRA "MISSION" ════════ */
.page-chi-siamo .manifesto-section::after{
  content:'';position:absolute;
  left:36px;right:36px;bottom:0;height:var(--sp-26);
  border-left:1px dashed var(--line-soft);
  border-right:1px dashed var(--line-soft);
  pointer-events:none;z-index:4;
}
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-chi-siamo .manifesto-section::after{display:none;}
}

/* ════════ DIDASCALIE DA 14px — INTERLINEA 1.5 ════════ */
.det-desc,
.tecno-desc{line-height:var(--lh-corpo);}
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  .page-stampati .striscia-desc,
  .page-stampati .partner-sub,
  .page-sost .cert-band-desc{line-height:var(--lh-corpo);}
}

/* ════════ CAROSELLO "DETTAGLI" (etichette + stampati) — TAP PER APRIRE LA DIDASCALIA, SOLO MOBILE / TABLET ════════ */
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  :is(.page-etichette,.page-stampati) .det-card.det-tap{
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  :is(.page-etichette,.page-stampati) .det-card.det-tap .det-body{
    opacity:1;
    transform:translateY(var(--det-giu,0px));
    transition:transform .7s cubic-bezier(0.16,1,0.3,1);
  }
  :is(.page-etichette,.page-stampati) .det-card.det-tap.is-open .det-body{
    transform:translateY(0);
  }
  :is(.page-etichette,.page-stampati) .det-card.det-tap .det-desc{
    opacity:0;transition:opacity .25s ease;
  }
  :is(.page-etichette,.page-stampati) .det-card.det-tap.is-open .det-desc{
    opacity:1;transition:none;
  }
  :is(.page-etichette,.page-stampati) .det-card.det-tap .det-desc .split-line-inner{
    opacity:1;animation:none;
  }
  :is(.page-etichette,.page-stampati) .det-card.det-tap.is-open .det-desc .split-line-inner{
    animation:maskReveal 1.1s cubic-bezier(0.16,1,0.3,1) both;
  }
}
@media (prefers-reduced-motion: reduce){
  :is(.page-etichette,.page-stampati) .det-card.det-tap .det-body{transition:none;}
  :is(.page-etichette,.page-stampati) .det-card.det-tap.is-open .det-desc .split-line-inner{animation:none;}
}

/* ════════ [ETICHETTE] Riga di divisione sotto "L'etichetta dà voce al tuo prodotto" — DESKTOP ════════ */
.page-etichette .section-crocini{
  height:1px;
  background:var(--line-soft);
}

/* ════════ [ETICHETTE] SGUARDO MOBILE — TEXTURE DI SEZIONE ════════ */
.page-etichette .sguardo-texture-mob{display:none;}

@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-etichette .sguardo{isolation:isolate;}
  .page-etichette .sguardo-texture-mob{display:block;z-index:-1;}

  .page-etichette .sguardo-visual{background:transparent;}
  .page-etichette .sguardo-visual > .grain-canvas,
  .page-etichette .sguardo-visual > .dots-layer{display:none;}
}

/* ── proporzioni della foto mobile ── */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-etichette .sguardo-visual{aspect-ratio:924/733;}
}

/* ════════ CAROSELLO "DETTAGLI" (etichette + stampati) — ALTEZZA DELLA SFUMATURA ════════ */
:is(.page-etichette,.page-stampati) .det-card:has(.det-media)::after{
  height:var(--det-sfum,48%);
  transition:height .7s cubic-bezier(0.16,1,0.3,1);
}
@media(max-width:1000px), (min-width:721px) and (pointer:coarse){
  :is(.page-etichette,.page-stampati) .det-card.det-tap{--det-sfum:34%;}
  :is(.page-etichette,.page-stampati) .det-card.det-tap.is-open{--det-sfum:65%;}
}
@media (prefers-reduced-motion: reduce){
  :is(.page-etichette,.page-stampati) .det-card:has(.det-media)::after{transition:none;}
}

/* ── CAROSELLI DETTAGLI — RITAGLIO 3:4 DEDICATO PER MOBILE/TABLET ── */
.det-media picture{display:contents;}

/* ════════ [ETICHETTE] SGUARDO MOBILE — DIDASCALIA PRIMA, FOTO A FILO DELLA RIGA ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-etichette .sguardo-body{order:3;}
  .page-etichette .sguardo-visual{
    order:4;
    margin:var(--sp-56) calc(-1 * var(--margin)) calc(-1 * var(--sp-sezione-sm));
  }
}

/* ════════ [STAMPATI] Pallini CMYK sulla riga di chiusura dei caroselli — SOLO MOBILE ════════ */
@media(max-width:820px), (min-width:721px) and (pointer:coarse){
  .page-stampati .cat-crocini-bottom img.divider-cmyk{
    display:block;position:absolute;
    top:50%;bottom:auto;left:50%;
    transform:translate(-50%,-50%);
    height:12.96px;width:auto;z-index:6;pointer-events:none;
  }
}

/* ════════ CALENDARIO — CARD HTML (contenuto base + piano B) ════════ */

.page-chi-siamo .cal-stage{transition:height .4s ease;}
.page-chi-siamo .cal-stage.is-cards{
  position:relative;
  height:auto;
  aspect-ratio:1536 / 942;   /* = la proporzione della card: il riquadro le sta addosso */
  min-height:300px;          /* pavimento per i desktop stretti; la card resta proporzionata e si centra */
}
.page-chi-siamo .cal-stage.is-cards canvas{position:absolute;inset:0;z-index:1;}

/* la pista */
.cal-cards{
  list-style:none;margin:0;padding:0;
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:stretch;
  gap:var(--sp-16);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  transition:opacity .38s ease;
}
.cal-cards::-webkit-scrollbar{display:none;}

/* col 3D acceso: fuori dagli occhi ma dentro l'albero di accessibilita' */
.page-chi-siamo .cal-stage:not(.is-cards) .cal-cards{
  position:absolute;inset:auto auto 0 0;
  width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);pointer-events:none;
  display:block;
}
.page-chi-siamo .cal-stage.is-sfuma .cal-cards{opacity:0;}

.cal-card{
  flex:0 0 100%;min-width:0;
  scroll-snap-align:center;
  display:flex;
}

/* il foglio vero e proprio */
.cal-card-in{
  position:relative;isolation:isolate;overflow:hidden;
  width:100%;height:auto;margin:auto;
  aspect-ratio:1536 / 942;max-height:100%;
  display:flex;flex-direction:column;
  padding:7.4% 4.9% 0;
  background-color:#fff;
  background-image:radial-gradient(circle, #EFEFEF 2.5px, transparent 3px);
  background-size:34px 32px;background-position:8px 8px;
  box-shadow:0 20px 44px -26px rgba(0,25,35,.32);
}
/* fascia a onde: altezza ricavata dalla larghezza (284/1200 dell'immagine) */
.cal-card-in::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:0;
  aspect-ratio:1200 / 284;
  background:url(../img/chi-siamo/calendario-onde.webp) center bottom / 100% 100% no-repeat;
}

.cal-card-top,.cal-card-testo,.cal-card-coda,.cal-card-logo{position:relative;z-index:1;}

/* riga dell'anno + data */
.cal-card-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-16);
  padding-bottom:.9%;
  border-bottom:1px solid var(--blk);
}
.cal-card-anno{
  font-family:var(--font-testo);font-weight:800;
  font-size:clamp(54px,7.4vw,132px);
  line-height:.86;letter-spacing:-.015em;
  color:var(--blk);
}
.cal-card-anno-oggi{
  font-family:var(--font-titolo);font-weight:400;
  letter-spacing:0;line-height:1;
}
.cal-card-data{
  display:flex;flex-direction:column;align-items:flex-end;
  font-family:var(--font-testo);font-weight:400;
  font-size:clamp(20px,2.45vw,44px);
  line-height:1.02;color:var(--blk);
  text-align:right;
}

/* testo della tappa */
.cal-card-testo{
  margin:5.4% 0 0;
  font-family:var(--font-titolo);font-weight:400;
  font-size:clamp(17px,2vw,36px);
  line-height:1.4;color:var(--blk);
}
.cal-card-testo strong{font-weight:400;-webkit-text-stroke:.028em var(--blk);}
.cal-card-testo em{font-style:italic;}
.cal-card-coda{
  margin:auto 0 0;padding-bottom:2%;text-align:right;
  font-family:var(--font-titolo);font-weight:400;
  font-size:clamp(17px,2vw,36px);
  line-height:1.42;color:var(--blk);
}
.cal-card-logo{
  display:block;width:13.3%;height:auto;
  margin:auto auto 4.9%;
}
.cal-card-coda + .cal-card-logo{margin-top:0;}

/* ── sotto i 900px: la card riempie il riquadro e diventa verticale ── */
@media (max-width:900px){
  .page-chi-siamo .storia-layout .cal-stage.is-cards{
    --cal-bleed-x:0px;
    --cal-top-extra:0px;
    height:clamp(380px,100vw,500px);
    aspect-ratio:auto;min-height:0;
  }
  .cal-cards{gap:var(--sp-12);}
  .cal-card{flex:0 0 92%;}
  .cal-card-in{
    aspect-ratio:auto;height:100%;max-height:none;
    padding:9% 6.4% 0;
    background-size:26px 25px;
  }
  .cal-card-in::after{aspect-ratio:auto;height:40%;background-size:cover;}
  .cal-card-anno{font-size:clamp(46px,14vw,78px);}
  .cal-card-data{font-size:clamp(19px,4.4vw,28px);}
  .cal-card-testo{font-size:clamp(16px,4.3vw,25px);margin-top:6.4%;}
  .cal-card-coda{font-size:clamp(16px,4.3vw,25px);}
  .cal-card-logo{width:20%;margin-bottom:6%;}
}

/* chi ha chiesto meno animazioni: niente scorrimento morbido */
@media (prefers-reduced-motion:reduce){
  .cal-cards{scroll-behavior:auto;transition:none;}
}

/* ════════ CHI SIAMO — LA RIGA SOPRA "A PICCOLI PASSI" SU DESKTOP ════════ */
@media (min-width:1001px) and (pointer:fine){
  .page-chi-siamo .storia{padding-top:calc(37px + 56px);}
}

/* Footer comune, prima generato da JavaScript. */

.footer-section{background:var(--blk,#001923);padding:70px var(--margin,clamp(24px,5vw,80px)) 40px;border-top:1px solid rgba(255,255,255,.07);}
/* Footer sulla griglia 12 colonne del sito.
   Era 2.2fr/1.2fr/1fr/1fr (rapporti 41/22/18/18) con gap 60px:
   non cadeva su nessuna linea di colonna. Ora 5/3/2/2 = 12 esatte,
   con column-gap = --gutter (il gap verticale resta 60px). */
.footer-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gutter,20px);row-gap:60px;
  margin-bottom:56px;align-items:start;
}
.footer-map-wrap{grid-column:span 5;}
.footer-contatti{grid-column:span 3;}
.footer-col{grid-column:span 2;}

/* Brand + mappa */
.footer-map-wrap{position:relative;border-radius:22px;overflow:hidden;min-height:280px;border:1px solid rgba(255,255,255,.1);}
.footer-map-wrap iframe{width:100%;height:280px;border:0;display:block;filter:saturate(.9);}
/* Colonne standard */
.footer-col-title{font-family:'Inter',sans-serif;font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:16px;}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.footer-col a{font-family:'Inter',sans-serif;font-size:12px;color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s;}
.footer-col a:hover{color:rgba(255,255,255,.95);}

/* Colonna Contatti — evidenziata */
.footer-address{font-family:'Inter',sans-serif;font-style:normal;font-size:13px;line-height:1.5;color:rgba(255,255,255,.6);margin:0 0 18px;}
.footer-address strong{display:block;font-weight:600;color:rgba(255,255,255,.88);margin-bottom:2px;}
.footer-contatti ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
.footer-contatti a{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:rgba(255,255,255,.88);text-decoration:none;transition:color .2s;}
.footer-contatti a:hover{color:#fff;}
.footer-contatti .footer-cta{display:inline-block;margin:0 0 20px;padding:10px 18px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s;}
.footer-contatti .footer-cta:hover{background:#fff;color:var(--blk,#001923);border-color:#fff;}
.footer-social{display:flex;gap:12px;margin:2px 0;}
.footer-social a{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.8);transition:background .2s,color .2s,border-color .2s;}
.footer-social a:hover{background:#fff;color:var(--blk,#001923);border-color:#fff;}
.footer-social svg{width:18px;height:18px;}

.footer-bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-copy{font-family:'Inter',sans-serif;font-size:10px;color:rgba(255,255,255,.70);letter-spacing:.06em;} /* a11y: 9.2:1 (era .45 → 4.46:1) */
.footer-bottom-left{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.footer-legal-link{font-family:'Inter',sans-serif;font-size:10px;letter-spacing:.06em;color:rgba(255,255,255,.70);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:2px;transition:color .2s,border-color .2s;}
.footer-legal-link:hover{color:#fff;border-color:#fff;}
.footer-certs{display:flex;gap:14px;align-items:center;}
.footer-certs img{height:28px;width:auto;opacity:.75;filter:brightness(0) invert(1);}
@media(max-width:900px){
  .footer-grid{row-gap:40px;}
  .footer-map-wrap{grid-column:1 / -1;}
  .footer-contatti,.footer-col{grid-column:span 6;}
}
@media(max-width:520px){
  .footer-map-wrap,.footer-contatti,.footer-col{grid-column:1 / -1;}
  .footer-bottom{flex-direction:column;text-align:center;}
}

/* ═══ FOOTER MOBILE — redesign 2026-08-25 ═══
   Sotto 820px il blocco mappa + contatti originale si nasconde;
   al suo posto un blocco più corto: logo edge-to-edge, CTA+social
   in riga (freccia SVG invece del glifo "→" che andava a capo da
   solo), nome, indirizzo cliccabile verso Maps. Le colonne
   Azienda/Servizi restano le stesse del desktop (stesso markup,
   niente duplicati), solo forzate ad affiancarsi anche sotto i
   520px invece di impilarsi una sull'altra. Richiesto da simone:
   il footer "occupa più di una schermata", va accorciato. */
.footer-mobile-brand{display:none;}
@media(max-width:820px){
  .footer-map-wrap,.footer-contatti{display:none;}
  .footer-mobile-brand{display:block;margin-bottom:80px;}
  .footer-mobile-logo{display:block;width:100%;height:auto;filter:brightness(0) invert(1);margin-bottom:80px;}
  /* Griglia 12 colonne identica a .footer-grid: le due metà (info / azioni)
     restano allineate in verticale con Azienda/Servizi sotto, invece di
     un flex space-between che spingeva le azioni sul bordo destro. */
  .footer-mobile-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter,20px);row-gap:16px;align-items:start;}
  .footer-mobile-info{grid-column:span 6;text-align:left;}
  .footer-mobile-name{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:rgba(255,255,255,.9);margin:0 0 6px;}
  .footer-mobile-address{
    display:block;font-family:'Inter',sans-serif;font-size:13px;line-height:1.5;
    color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s;text-align:left;
  }
  .footer-mobile-address:hover{color:#fff;}
  .footer-mobile-actions{grid-column:span 6;display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
  .footer-mobile-actions .footer-cta{
    display:inline-flex;align-items:center;margin:0;padding:10px 18px;
    border:1px solid rgba(255,255,255,.35);border-radius:999px;
    font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:#fff;
    text-decoration:none;white-space:nowrap;
    transition:background .2s,color .2s,border-color .2s;
  }
  .footer-mobile-actions .footer-cta:hover{background:#fff;color:var(--blk,#001923);border-color:#fff;}
  .footer-grid{row-gap:32px;margin-bottom:32px;}
  .footer-col{grid-column:span 6;}
  .footer-section{padding-top:56px;padding-bottom:88px;}   /* 88 e non 32: spazio per la freccia "torna in cima" (fixed, vedi styles.css) */
  .footer-bottom-left{justify-content:center;gap:10px;}
}