/* ============================================================================
   Simaflex — mondo "scheda tecnica / graphite studio" (build-mondo).
   Core tecnico invisibile ereditato (reveal fail-safe, lightbox, drawer,
   widget WA M4 congelato); composizione visiva 100% propria. DUR-133 v2.
   ========================================================================== */

:root{
  --ink:#181A1C;          /* testo su chiaro */
  --ink-soft:#4A4E52;
  --carta:#F1EEE8;        /* base chiara: carta tecnica calda (mai bianco puro) */
  --carta-2:#E8E4DA;
  --graphite:#161719;     /* base scura: fondo graphite come le foto prodotto */
  --graphite-2:#1E2023;
  --graphite-3:#26292d;
  --steel:#7C878C;        /* acciaio smorzato (dal brand #617379) */
  --steel-d:#5E6A70;
  --rosso:#CE2C00;        /* rosso segnale (brand) */
  --rosso-d:#B8060A;
  --paper-line:rgba(24,26,28,.16);
  --dark-line:rgba(255,255,255,.14);
  --font-display:'Big Shoulders Display',system-ui,sans-serif;
  --font-body:'Schibsted Grotesk',system-ui,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,monospace;
  --easeio:cubic-bezier(.65,.05,.36,1);
  --ease-out2:cubic-bezier(.16,1,.3,1);
  --z-float:90;
  --radius-lg:14px;       /* SOLO per il widget WA congelato */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;font-family:var(--font-body);background:var(--carta);color:var(--ink);
  font-size:17px;line-height:1.62;font-weight:400;overflow-x:hidden;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:800;line-height:.98;
  letter-spacing:.005em;text-transform:uppercase}
p{margin:0 0 1em}
.wrap{width:min(1200px,92vw);margin-inline:auto}
.pad{padding:clamp(4.5rem,9vw,8rem) 0;position:relative;overflow:hidden}
.galsec{overflow:hidden}
section{scroll-margin-top:20px}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* dark bands */
.dark{background:var(--graphite);color:#DCD9D2}
.dark h1,.dark h2,.dark h3,.dark h4{color:#F4F2EC}
.dark::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode:overlay}

/* ---------- kicker + "la passata di rettifica" (motion-signature) ---------- */
.kick{font-family:var(--font-mono);font-size:.74rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--steel-d);display:flex;align-items:center;gap:.7em;margin-bottom:1.1rem}
.dark .kick{color:var(--steel)}
.kick::before{content:"";width:34px;height:2px;background:var(--rosso);display:inline-block;
  transform-origin:left;transition:width .5s var(--easeio)}
.kick.center-k{justify-content:center}
/* motion dell'occhiello: la riga rossa si "mola" (draw-in) al reveal.
   Confinata al ::before (34px): niente overlay a tutta larghezza (fix P0 sweep). */
.sweep{position:relative}
html.js .sweep::before{width:0}
html.js .sw-force-reveal.sweep::before{width:34px}

/* ---------- headings ---------- */
h2{font-size:clamp(2.1rem,4.6vw,3.7rem);letter-spacing:0;max-width:16ch;text-wrap:balance}
.center h2,.head.center h2{margin-inline:auto;text-align:center}
em.mono{font-family:var(--font-mono);font-style:normal;font-weight:500;text-transform:none;
  color:var(--rosso);letter-spacing:-.02em;font-size:.82em;display:inline-block}
.head{max-width:44rem;margin-bottom:clamp(2.4rem,4vw,3.4rem)}
.head.center{margin-inline:auto;text-align:center}
.sub-lead,.faq-lead{color:var(--ink-soft);max-width:52ch}
.dark .sub-lead{color:#B7B4AD}
.dark .faq-lead{color:#B7B4AD}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-mono);font-weight:500;
  font-size:.86rem;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;
  padding:.95em 1.5em;border-radius:0;transition:background .25s var(--ease-out2),
  color .25s,border-color .25s,transform .25s var(--ease-out2)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost{color:#F4F2EC;border:1.5px solid rgba(255,255,255,.5)}
.btn-ghost:hover{background:#F4F2EC;color:var(--graphite);border-color:#F4F2EC}
.btn-ghost .chip svg{width:16px;height:16px}
.btn-red{background:var(--rosso);color:#fff;border:1.5px solid var(--rosso)}
.btn-red:hover{background:#a82400;border-color:#a82400}
.btn-line{border:1.5px solid var(--dark-line);color:#F4F2EC}
.btn-line:hover{border-color:#F4F2EC}

/* ============================ HEADER ============================ */
#hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  background:var(--graphite);color:#F4F2EC;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media video{width:100%;height:100%;object-fit:cover;filter:contrast(1.04) saturate(.92)}
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(16,17,19,.9) 0%,rgba(16,17,19,.72) 32%,rgba(16,17,19,.28) 62%,rgba(16,17,19,.12) 100%),
    linear-gradient(0deg,rgba(16,17,19,.85) 0%,transparent 42%)}
.grit{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23g)' opacity='0.4'/></svg>");mix-blend-mode:overlay}

.site-head{position:relative;z-index:5;padding:1.2rem 0}
/* l'header va a tutta larghezza col logo a filo pagina (round 23): il wrap dell'header è più largo del wrap dei contenuti.
   Task #2835 (Federico, 22/09): le 4 pagine prodotto stanno nella TENDINA «Prodotti» con l'etichetta piena (contratto
   multipagina §6: si passa alla tendina, non si taglia la parola), così la riga Home · Prodotti · Produzione su disegno ·
   Contatti · lingua sta intera da 1024px in su, IT e EN — prima la nav IT era larga 965px e il burger compariva già sotto
   1280, cioè su un Windows 1366 al 125% (1093px CSS) o un iPad orizzontale (1180). Corpo delle voci alzato da .78rem
   (12,5px) a .92rem (14,7px) col tracking ridotto (.03em → .02em); logo 78 → 88px.
   Task #2879 (Federico, 23/09): voci ancora +10% (.92 → 1.01rem, 16,2px; tendina .84 → .92rem) col tracking ricalibrato
   (.02 → .015em: il mono maiuscolo a 16px respira da solo); il RIQUADRO passa dal selettore lingua alla voce «Richiedi
   informazioni» (.nav-cta, ex «Contatti»), la lingua resta ultima e nuda. Se a 1024 la riga non ci sta, si cala di corpo
   SOLO lì (media query in fondo al blocco), mai tagliare parole. */
.site-head .wrap{display:flex;align-items:center;gap:1.4rem;width:min(1400px,95vw)}
.logo{margin-right:auto;display:block}
.logo img{height:88px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.site-head nav{display:flex;align-items:center;gap:1.6rem}
.site-head nav>a,.nav-dd-btn{font-family:var(--font-mono);font-size:1.01rem;font-weight:500;letter-spacing:.015em;white-space:nowrap;
  line-height:1.2;text-transform:uppercase;color:#EAE7E0;text-decoration:none;transition:color .2s;position:relative;padding:.3em 0}
.nav-dd-btn{background:none;border:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:.45em}
.nav-dd-btn svg{width:.7em;height:.5em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s var(--ease-out2)}
.nav-dd.is-open .nav-dd-btn svg{transform:rotate(180deg)}
.site-head nav>a::after,.nav-dd-btn::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;
  background:var(--rosso);transition:width .3s var(--ease-out2)}
.site-head nav>a:hover,.nav-dd-btn:hover,.nav-dd.is-open .nav-dd-btn{color:#fff}
.site-head nav>a:hover::after,.site-head nav>a[aria-current="page"]::after,
.nav-dd-btn:hover::after,.nav-dd.is-open .nav-dd-btn::after,.nav-dd-btn--current::after{width:100%}
.site-head nav>a[aria-current="page"],.nav-dd-btn--current{color:#fff}
.site-head nav>a:focus-visible,.nav-dd-btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* la CTA dell'header (#2879): riquadro sottile 1px, raggio 0, stesso mono maiuscolo delle voci; a riposo bordo bianco al 55%,
   in hover/fuoco si riempie del rosso del sistema (come i .btn-red) senza muoversi (DUR-13: bottoni stabili). Niente riga
   rossa sotto (::after) e niente stato «corrente»: è un'azione, non una pagina. */
.site-head nav>a.nav-cta{padding:.5em .95em;border:1px solid rgba(255,255,255,.55);color:#F4F2EC;margin-left:.2rem;
  transition:background .2s,border-color .2s,color .2s}
.site-head nav>a.nav-cta::after{display:none}
.site-head nav>a.nav-cta:hover,.site-head nav>a.nav-cta:focus-visible{background:var(--rosso);border-color:var(--rosso);color:#fff}
.site-head nav>a.nav-cta:focus-visible{outline-offset:3px}
/* la tendina: antracite del sistema, riga rossa sottile in testa, voci mono maiuscole con il trattino rosso che si
   accende su hover/fuoco/voce corrente. Stato aperto = .is-open (js/main.js: hover con chiusura ritardata, click, frecce,
   Esc); senza JS restano hover e focus-within. Il ::before è un ponte invisibile sul vuoto fra bottone e pannello. */
.nav-dd{position:relative}
.nav-dd-panel{position:absolute;left:-1.1rem;top:calc(100% + .9rem);min-width:19rem;padding:.55rem 0;z-index:20;
  background:var(--graphite-2);border:1px solid var(--dark-line);border-top:2px solid var(--rosso);
  box-shadow:0 18px 40px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease-out2),transform .22s var(--ease-out2),visibility 0s linear .22s}
.nav-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-1rem;height:1rem}
.nav-dd.is-open>.nav-dd-panel,html:not(.js) .nav-dd:hover>.nav-dd-panel,html:not(.js) .nav-dd:focus-within>.nav-dd-panel{
  opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav-dd-panel a{display:block;padding:.62rem 1.3rem .62rem 1.7rem;font-family:var(--font-mono);font-size:.92rem;font-weight:500;
  letter-spacing:.015em;text-transform:uppercase;white-space:nowrap;color:#DCD9D2;text-decoration:none;position:relative;
  transition:color .2s,background .2s}
.nav-dd-panel a::before{content:"";position:absolute;left:.75rem;top:50%;width:.5rem;height:2px;margin-top:-1px;background:var(--rosso);
  opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .2s,transform .25s var(--ease-out2)}
.nav-dd-panel a:hover,.nav-dd-panel a:focus-visible,.nav-dd-panel a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.045)}
.nav-dd-panel a:hover::before,.nav-dd-panel a:focus-visible::before,.nav-dd-panel a[aria-current="page"]::before{opacity:1;transform:none}
.nav-dd-panel a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
/* selettore lingua: bandierina + codice, ultima voce, SENZA riquadro (#2879: il riquadro è della CTA «Richiedi informazioni»;
   prima stava qui e faceva sembrare la lingua l'azione principale dell'header). Hover: solo il bianco pieno. */
.lang a{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:.84rem;font-weight:600;
  letter-spacing:.06em;color:#EAE7E0;text-decoration:none;padding:.42em .2em;transition:color .2s}
.lang a:hover{color:#fff}
.lang a:focus-visible{outline:2px solid #fff;outline-offset:4px}
.lang svg{width:22px;height:11px;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-burger i{width:26px;height:2px;background:#F4F2EC;display:block;transition:.3s}

/* ---------- pannello del menu mobile: smarti-menu.js è un componente CONGELATO del kit, si configura da fuori.
   Task #2835 (Federico, 22/09): il pannello «quasi rosso sangue» non piace → fondo antracite del sistema, il rosso resta
   solo accento (numeri, riga sotto la voce, voce attiva); logo più grande (44 → 64px); CHIAMA / WHATSAPP da pillole piene
   (rosso e verde WhatsApp) a outline sottile mono maiuscolo, stesso peso del resto del sistema; raggio 0 come tutto il sito.
   Il kit scrive le variabili --smm-* INLINE sulla radice del pannello dopo averle misurate sulla pagina: l'!important qui
   è l'unico modo di vincere su uno stile inline senza toccare il componente. Le altre regole vincono per specificità
   (una classe in più del selettore del kit), perché il foglio del kit viene appeso in head DOPO questo. ---------- */
#smm-panel{--smm-bg:var(--graphite-2)!important;--smm-accent:var(--rosso)!important;--smm-accent-on-bg:#FF5526!important}
#smm-panel .smm-glow{opacity:.12!important;filter:blur(40px)}
#smm-panel .smm-top .smm-brand img{max-height:64px;max-width:240px}
#smm-panel .smm-top .smm-brand--plate img{border-radius:0;background:none;padding:0} /* il logo Simaflex è già pensato per il fondo scuro (è quello dell header): niente targhetta */
#smm-panel .smm-top .smm-x{border-radius:0}
#smm-panel nav.smm-nav a{border-radius:0}
#smm-panel nav.smm-nav a[aria-current="page"]{color:#fff}
#smm-panel .smm-nav a[aria-current="page"] .smm-t::after{right:0}
#smm-panel .smm-ctas .smm-cta{background:transparent;color:#EAE7E0;border:1px solid rgba(255,255,255,.3);border-radius:0;min-height:46px;
  font-family:var(--font-mono);font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  transition:border-color .2s,color .2s,background .2s}
#smm-panel .smm-ctas .smm-cta svg{width:15px;height:15px;opacity:.85}
#smm-panel .smm-ctas .smm-cta:hover,#smm-panel .smm-ctas .smm-cta:active{border-color:#fff;color:#fff;background:rgba(255,255,255,.06);filter:none;transform:none}

.nav-panel{display:none}

/* ---------- hero content ---------- */
.hero-content{position:relative;z-index:3;margin-top:auto;margin-bottom:auto;
  padding:2rem 0;max-width:52rem}
.hero-content .kick{color:var(--steel);margin-bottom:1.4rem}
.hero-content .kick::before{background:var(--rosso)}
h1{font-size:clamp(3rem,9vw,7.2rem);line-height:.9;letter-spacing:-.005em;
  color:#F7F5EF;text-shadow:0 3px 26px rgba(0,0,0,.45)}
h1 em.mono{font-size:.5em;color:var(--rosso);vertical-align:baseline;
  text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero-content .sub{font-size:clamp(1rem,1.4vw,1.18rem);color:#D6D3CC;max-width:46ch;
  margin:1.6rem 0 2.2rem;line-height:1.6}
.hero-vert{position:absolute;left:calc((100vw - min(1200px,92vw))/2 - 18px);top:50%;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,.4);z-index:3}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3}
.scroll-cue .stick{display:block;width:22px;height:36px;border:2px solid rgba(255,255,255,.45);border-radius:0}
.scroll-cue .dot{display:block;width:3px;height:8px;background:var(--rosso);margin:6px auto 0;animation:cue 1.7s var(--easeio) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* watermark gigante tono-su-tono (parallax percepibile, DUR-147) */
.watermark{position:absolute;font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(6rem,20vw,18rem);line-height:.8;white-space:nowrap;pointer-events:none;
  color:rgba(255,255,255,.035);top:8%;left:2%;z-index:0;letter-spacing:-.02em}
.watermark.wm{top:auto;bottom:-4%;left:-2%}

/* ============================ PRODOTTI (dark) ============================ */
#prodotti .wrap{position:relative;z-index:1}
.cat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--dark-line);
  border:1px solid var(--dark-line)}
.spec{background:var(--graphite-2);padding:1.9rem 1.8rem;position:relative;overflow:hidden;
  transition:background .3s var(--ease-out2)}
.spec::before{content:"";position:absolute;top:0;left:0;width:0;height:3px;background:var(--rosso);
  transition:width .45s var(--easeio)}
.spec:hover{background:var(--graphite-3)}
.spec:hover::before{width:100%}
.spec-h{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem}
.wico{width:38px;height:38px;flex:none;fill:none;stroke:var(--steel);stroke-width:1.3;
  stroke-linejoin:round;stroke-linecap:round;transition:stroke .3s}
.spec:hover .wico{stroke:var(--rosso)}
.spec h3{font-size:1.32rem;color:#F4F2EC;line-height:1.02;letter-spacing:.01em}
.spec p{font-size:.95rem;color:#ABA8A1;margin:0 0 1.1rem;line-height:1.55}
.dims{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.dims span{font-family:var(--font-mono);font-size:.76rem;font-weight:500;letter-spacing:-.01em;
  color:#E6E3DC;background:rgba(255,255,255,.05);border:1px solid var(--dark-line);
  padding:.34em .6em;white-space:nowrap;transition:border-color .3s,color .3s}
.spec:hover .dims span{border-color:rgba(206,44,0,.4)}
.spec-g{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-bottom:1.1rem;padding-bottom:.7rem;border-bottom:1px solid var(--dark-line)}
.spec-g span{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.spec-g a{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#C7C4BD;text-decoration:none;white-space:nowrap;transition:color .2s}
.spec-g a:hover{color:var(--rosso)}
.spec-cta{text-decoration:none;color:inherit;background:var(--graphite);border:1px solid rgba(206,44,0,.35)}
.spec-cta h3{font-size:1.5rem;color:#F4F2EC;margin-bottom:.8rem}
.spec-cta h3 em.mono{font-size:.7em}
.spec-cta p{color:#ABA8A1}
.spec-cta:hover{background:var(--graphite-2)}
.spec-link{display:inline-block;margin-top:.9rem;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--rosso);text-decoration:none;transition:color .2s}
.spec-link:hover{color:#ff6a3d}
.spec{display:flex;flex-direction:column}
.spec .grain{margin-top:auto}
.cat-group-unused{grid-column:1/-1;background:var(--graphite);padding:1rem 1.8rem .7rem;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.cat-group span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.cat-group a{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.05rem;color:#F4F2EC;text-decoration:none;
  letter-spacing:.02em;transition:color .2s}
.cat-group a:hover{color:var(--rosso)}
.cat-group.half{grid-column:auto}
.dims .tbc{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rosso);margin-left:.4em}
.grain{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel);padding-top:.7rem;border-top:1px solid var(--dark-line)}

/* ============================ AZIENDA (light) ============================ */
.az-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.az-copy h2{margin-bottom:1.4rem}
.reasons{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.2rem}
.reasons li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
  padding:1.05rem 0;border-top:1px solid var(--paper-line);font-size:1.02rem;color:#2E3134}
.reasons li:last-child{border-bottom:1px solid var(--paper-line)}
.rn{font-family:var(--font-mono);font-size:.82rem;font-weight:600;color:var(--rosso)}
.az-media{position:relative}
.az-media::before{content:"";position:absolute;top:-14px;left:-14px;width:64px;height:64px;
  border-top:3px solid var(--rosso);border-left:3px solid var(--rosso);z-index:2}
.az-media img{width:100%;aspect-ratio:4/3.4;object-fit:cover;filter:contrast(1.03)}

.link-arrow{display:inline-block;margin-top:1.6rem;font-family:var(--font-mono);font-size:.84rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--rosso);text-decoration:none;border-bottom:2px solid transparent;transition:border-color .25s,color .2s}
.link-arrow:hover{border-color:var(--rosso)}
.dark .link-arrow{color:#F4F2EC}
.dark .link-arrow:hover{color:var(--rosso)}
/* §92: sezione «più di un produttore» resa più WOW — badge, descrittori, hover premium */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.6vw,1.5rem);
  margin-top:clamp(2.6rem,5vw,4rem)}
.pillar{background:var(--carta);padding:2.4rem 1.6rem 2rem;text-align:center;border:1px solid var(--paper-line);
  border-radius:16px;position:relative;overflow:hidden;transition:transform .35s var(--ease-out2),box-shadow .35s,border-color .3s}
.pillar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--rosso);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out2)}
.pillar:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(0,0,0,.32);border-color:transparent}
.pillar:hover::before{transform:scaleX(1)}
.p-badge{display:inline-flex;align-items:center;justify-content:center;width:74px;height:74px;margin:0 auto 1.1rem;
  border-radius:50%;background:color-mix(in srgb,var(--rosso) 9%,var(--carta));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rosso) 22%,transparent);transition:background .3s,transform .35s var(--ease-out2)}
.pillar:hover .p-badge{background:color-mix(in srgb,var(--rosso) 15%,var(--carta));transform:translateY(-2px)}
.p-badge svg{width:34px;height:34px;fill:none;stroke:var(--rosso);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pillar h4{font-size:1.12rem;letter-spacing:.01em;margin-bottom:.5rem}
.pillar p{font-size:.9rem;line-height:1.5;color:var(--ink-soft,#5a5a54);max-width:24ch;margin:0 auto}

/* ============================ PRODUZIONE (dark) ============================ */
.prod-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);position:relative;z-index:1}
.prod-copy h2{margin-bottom:1.3rem}
.signature{margin-top:2.2rem;border:1px solid var(--dark-line);background:rgba(255,255,255,.02);padding:1.6rem}
#profilo{width:100%;height:auto;overflow:visible}
#profilo .slab{fill:rgba(255,255,255,.07);stroke:var(--steel);stroke-width:1.5}
#profilo .veins{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.1}
#profilo .ghost{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.2;stroke-dasharray:4 5}
#profilo .ghost-target{fill:none;stroke:rgba(206,44,0,.45);stroke-width:1.4;stroke-dasharray:5 5}
#profilo .edge{fill:rgba(206,44,0,.1);stroke:#F4F2EC;stroke-width:2.4;stroke-linejoin:round}
#profilo .passline{fill:none;stroke:var(--rosso);stroke-width:3}
#profilo .wheel{fill:none;stroke:var(--steel);stroke-width:1.6;stroke-linecap:round}
#profilo .dimline{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1}
#profilo .dimline text{font-family:var(--font-mono);font-size:13px;fill:var(--rosso);stroke:none}
.sig-cap{margin-top:1rem;font-size:.9rem;color:#ABA8A1}
.sig-cap .mono{font-family:var(--font-mono);color:var(--rosso);text-transform:uppercase;
  font-size:.76rem;letter-spacing:.05em}
.prod-side{display:flex;flex-direction:column;gap:1.2rem}
.prod-shot img{width:100%;aspect-ratio:1/1;object-fit:cover}
.prod-shot{position:relative}
.prod-shot::after{content:"";position:absolute;right:-12px;bottom:-12px;width:56px;height:56px;
  border-bottom:3px solid var(--rosso);border-right:3px solid var(--rosso)}
.matbox{border:1px solid var(--dark-line);padding:1.3rem 1.4rem;background:var(--graphite-2)}
.matbox h4{font-size:.82rem;font-family:var(--font-mono);font-weight:600;letter-spacing:.14em;
  color:var(--steel);margin-bottom:.85rem;text-transform:uppercase}
.matbox p{font-size:.92rem;color:#ABA8A1;margin:0}
.matbox .dims{margin:0}

/* ============================ CATALOGO (gallery full-bleed) ============================ */
.galsec{background:var(--graphite);color:#F4F2EC;padding-top:clamp(4.5rem,9vw,8rem)}
.galsec .head{margin-bottom:clamp(2.4rem,4vw,3.4rem)}
.galsec .kick{color:var(--steel)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.gal figure{margin:0;position:relative;overflow:hidden;cursor:pointer;aspect-ratio:1/1;background:#0f1012}
.gal figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out2),filter .4s}
.gal figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(206,44,0,.16),transparent 55%);
  opacity:0;transition:opacity .35s}
.gal figure:hover img{transform:scale(1.06)}
.gal figure:hover::after{opacity:1}

/* ============================ FAQ ============================ */
.grid-faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.grid-faq>div:first-child h2{margin-bottom:1.2rem}
.faq-list details{border-top:1px solid var(--paper-line);padding:.3rem 0}
.faq-list details:last-child{border-bottom:1px solid var(--paper-line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.15rem 0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:1.14rem;letter-spacing:.01em;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.plus{flex:none;width:30px;height:30px;display:grid;place-items:center;border:1.5px solid var(--paper-line);
  transition:border-color .3s,transform .35s var(--ease-out2)}
.plus svg{width:15px;height:15px;fill:none;stroke:var(--rosso);stroke-width:2;stroke-linecap:round}
details[open] .plus{transform:rotate(135deg);border-color:var(--rosso)}
.faq-list details p{margin:0 0 1.3rem;color:var(--ink-soft);max-width:56ch}

/* ============================ CTA band ============================ */
.ctaband .inner{max-width:46rem;position:relative;z-index:1}
.ctaband h2{margin-bottom:1.1rem}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}

/* ============================ FOOTER ============================ */
footer{background:var(--graphite);color:#C7C4BD;padding:clamp(3.5rem,6vw,5rem) 0 2.2rem;position:relative}
footer .brand img{height:66px;width:auto;margin-bottom:1.1rem;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.cols{display:grid;grid-template-columns:1.25fr .85fr 1fr 1.05fr;gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:2.6rem;border-bottom:1px solid var(--dark-line)}
.brand img{height:56px;width:auto;margin-bottom:1.2rem;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.brand p{color:#A6A39C;max-width:34ch;font-size:.98rem}
footer h4{font-size:.78rem;font-family:var(--font-mono);font-weight:600;letter-spacing:.16em;
  color:var(--steel);text-transform:uppercase;margin-bottom:1.2rem}
.row{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1rem;font-size:1.02rem;line-height:1.45}
.row svg{width:23px;height:23px;flex:none;margin-top:2px;fill:none;stroke:var(--steel);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.row a{color:#DCD9D2;text-decoration:none;transition:color .2s}
.row a:hover{color:#fff}
footer address{font-style:normal;color:#C7C4BD}
.maps{display:inline-block;margin-top:.4rem;font-family:var(--font-mono);font-size:.82rem;
  color:var(--rosso);text-decoration:none;letter-spacing:.02em;transition:color .2s}
.maps:hover{color:#e85c3a}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;
  padding-top:1.8rem;font-size:.85rem;color:#8B8880}
.footer-bottom a{color:#C7C4BD;text-decoration:none}
.footer-bottom a:hover{color:#fff}
.heart{color:#e11f1d}
.foot-nav{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot-nav a{color:#DCD9D2;text-decoration:none;font-size:.98rem;transition:color .2s;position:relative;padding-left:1.1rem}
.foot-nav a::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:2px;background:var(--rosso);opacity:.7}
.foot-nav a:hover{color:#fff}

/* ============================ LIGHTBOX ============================ */
.lightbox{position:fixed;inset:0;background:rgba(12,13,15,.95);z-index:100;display:none;
  align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:84vh;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.lb-btn{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  color:#F4F2EC;width:52px;height:52px;font-size:1.5rem;cursor:pointer;display:grid;place-items:center;
  transition:background .2s}
.lb-btn:hover{background:rgba(206,44,0,.55);border-color:var(--rosso)}
.lb-close{top:24px;right:24px}
.lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.lb-next{right:24px;top:50%;transform:translateY(-50%)}

/* ============================ REVEAL (fail-safe core) ============================ */
.js .rv{opacity:0;transform:translateY(26px)}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}
  html.js .sweep::before{width:34px;transition:none}.scroll-cue .dot{animation:none}}
.sw-force-reveal{opacity:1!important;transform:none!important;
  transition:opacity .7s ease,transform .7s ease!important}

/* ============================ RESPONSIVE ============================ */
/* sotto 1024 la nav si nasconde e resta il burger (#2835: prima 1280; il pannello lo fa smarti-menu.js) */
@media(max-width:1023px){
  .site-head nav{display:none}
  .nav-burger{display:flex;position:relative;z-index:61}
}
@media(max-width:1000px){
  .cat{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .az-grid,.prod-grid,.grid-faq{grid-template-columns:1fr}
  /* §100: il footer non deve restare a 3 colonne strette su tablet/mobile → impila */
  .cols{grid-template-columns:1fr 1fr}
  .cols>.brand{grid-column:1/-1}
  .prod-side{flex-direction:row;flex-wrap:wrap}
  .prod-shot{flex:1 1 240px}.matbox{flex:1 1 220px}
  .gal{grid-template-columns:repeat(3,1fr)}
  .az-media{order:-1}
}
@media(max-width:760px){
  .cols{grid-template-columns:1fr}
  .cat,.pillars{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .hero-vert{display:none}
  .logo img{height:72px}
  h1{font-size:clamp(2.8rem,13vw,4.6rem)}
}
@media(max-width:400px){
  body{font-size:16px}
  .spec{padding:1.5rem 1.3rem}
  .gal{grid-template-columns:1fr}
}