/* ============================================================================
   Simaflex — le 5 pagine interne (task #2758). Stesso mondo della Home («la scheda
   tecnica come manifesto»): graphite/carta, Big Shoulders + mono per i dati, rosso
   segnale come linea di lavorazione, raggio 0. Le primitive (kick, .rv, .dims, .btn,
   .watermark, .ctaband, footer) vengono da main.css: qui SOLO ciò che la Home non ha.
   ========================================================================== */

/* ---------- hero di pagina: foto full-bleed elevata + scrim localizzato a sinistra (DUR-135) ---------- */
.p-hero{position:relative;min-height:min(88svh,860px);display:flex;flex-direction:column;
  background:var(--graphite);color:#F4F2EC;overflow:hidden;isolation:isolate}
.p-hero .hero-media{position:absolute;inset:0;z-index:-2}
.p-hero .hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;filter:contrast(1.04) saturate(.94);
  will-change:transform}
/* Task #2787 (22/09): il contrasto si misura sul FOTOGRAMMA (runbook contrasto-sul-fotogramma). Prima: rosso mono
   worst 1.12:1 a 1440 su /mole-a-tazza/ e 1.19 su /en/custom-grinding-wheels/, kick 1.37, crumbs mobile 2.95.
   Rimedio in tre leve, nessuna delle quali rimpicciolisce il titolo o stende un velo piatto (DUR-135):
   1. la banda sinistra del gradiente tiene ≥.9 fino al 30% e scende SOLO oltre il 50%: il soggetto della foto
      (object-position 62%) resta scoperto a destra;
   2. un'ELLISSE localizzata dietro il blocco testo (sul contenitore-scrim, MAI sul testo: un ::before sulla riga
      viene nascosto insieme al testo che deve proteggere e la misura non si muove);
   3. l'accento rosso del titolo va su riga propria (vedi em.mono sotto) e non trascina più sulla foto. */
.p-hero .hero-scrim{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 46% 62% at 32% 56%,rgba(16,17,19,.9) 0%,rgba(16,17,19,.62) 48%,rgba(16,17,19,0) 100%),
    linear-gradient(90deg,rgba(16,17,19,.95) 0%,rgba(16,17,19,.9) 30%,rgba(16,17,19,.74) 48%,rgba(16,17,19,.3) 66%,rgba(16,17,19,.06) 100%),
    linear-gradient(0deg,rgba(16,17,19,.88) 0%,transparent 40%)}
/* #2834: la briciola è uscita dalla hero (fascia sotto). Il blocco è centrato in verticale: senza i ~42px della briciola
   (riga .72rem + margine 1.3rem) scendeva di ~21px e l'accento di /en/stone-edge… finiva su una toppa più chiara
   (4.86 contro il 4.98 misurato in #2787). Il padding-top ricompra quei 42px: il testo sta ESATTAMENTE dov'era
   misurato, e sopra l'occhiello non c'è nessun buco perché la foto è full-bleed e il blocco resta a centro-alto. */
.p-hero .hero-content{position:relative;z-index:3;margin-top:auto;margin-bottom:auto;padding:calc(2.5rem + 42px) 0 3rem;max-width:48rem}
.p-hero h1{font-size:clamp(2.5rem,5.2vw,4.6rem);line-height:.94;letter-spacing:0;max-width:16ch;text-wrap:balance;
  color:#F7F5EF;text-shadow:0 3px 26px rgba(0,0,0,.45)}
/* L'accento mono su RIGA PROPRIA, a sinistra, nella zona calma: inline finiva a fine riga, cioè sopra il soggetto
   (rosso su texture = 1.1:1). Il colore è un rosso di luce solo per la hero: #CE2C00 su antracite non supera
   3.6:1 nemmeno su nero pieno (limite fisico del tono), #FF5526 misura ≥4.5 sul fotogramma reale e resta il
   rosso segnale del marchio. Fuori dalla hero il rosso resta --rosso. */
.p-hero h1 em.mono{font-size:.5em;color:#FF5526;vertical-align:baseline;text-shadow:0 2px 14px rgba(0,0,0,.5);
  display:block;margin-top:.32em;max-width:22ch;line-height:1.12;letter-spacing:-.01em}
.p-hero .sub{font-size:clamp(1rem,1.3vw,1.14rem);color:#D6D3CC;max-width:50ch;margin:1.5rem 0 2.1rem;line-height:1.6}
.p-hero .cta-row{margin-top:0}
/* --fuori-gabbia: il margine sinistro FUORI dalla colonna del contenuto (18px a sinistra del wrap). Lo usano l'etichetta
   verticale e la fascia breadcrumb (#2834): un valore in un posto solo, così non divergono. Sotto 760 vale il margine
   di pagina (4vw = il bordo del wrap), perché la formula diventa negativa e l'etichetta verticale è nascosta. */
.p-hero,.crumb-band{--fuori-gabbia:calc((100vw - min(1200px,92vw))/2 - 18px)}
.p-hero .hero-vert{position:absolute;left:var(--fuori-gabbia);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,.62);z-index:3} /* #2787: .4 misurava 3.83 sul fotogramma */

/* ---------- briciole: FASCIA full width sotto la hero (#2834, richiesta di Federico 22/09) ----------
   Prima stavano nella hero, appiccicate all'occhiello: davano fastidio. Ora: una fascia sottile antracite (graphite-2,
   un gradino sopra il fondo della hero) con una riga di stacco, la breadcrumb allineata a sinistra FUORI dalla gabbia
   del contenuto — stesso margine dell'etichetta verticale «… · Luni (SP)» (var --fuori-gabbia), non della colonna di
   testo. Markup APG: nav[aria-label] > ol > li, aria-current="page" sull'ultima voce; il separatore rosso è un
   pseudo-elemento, così lo screen reader non lo legge. Il JSON-LD BreadcrumbList lo scrive il generatore, invariato. */
.crumb-band{background:var(--graphite-2);border-top:1px solid var(--dark-line);border-bottom:1px solid rgba(255,255,255,.06);
  padding:.72rem var(--fuori-gabbia) .72rem var(--fuori-gabbia);color:#F4F2EC}
.crumbs{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;gap:.8em;align-items:center;flex-wrap:wrap}
.crumbs li{display:flex;align-items:center;gap:.8em}
.crumbs li+li::before{content:"›";color:var(--rosso);font-size:1.15em;line-height:1}
.crumbs a{color:rgba(255,255,255,.92);text-decoration:none;transition:color .2s}
.crumbs [aria-current="page"]{color:#fff}
/* kick della hero: lo steel (#7C878C) sopra una foto misurava 1.4-2.0; nella hero si schiarisce (#D5DBDE: il kick lungo di levigacoste, che arriva sopra la schiuma bianca della foto, misurava 3.79 con #B4BDC1 e 4.45 con #C4CCCF) */
.p-hero .hero-content .kick{color:#D5DBDE}
.crumbs a:hover{color:#fff}

/* ---------- intro: testo + foto keeper con l'angolo rosso (stesso segno della sezione azienda) ---------- */
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.intro-grid h2{margin-bottom:1.3rem}
.intro-grid p{color:#2E3134;max-width:58ch}
.intro-grid p a,.fam-copy p a,.capsula p a,.step-list a{color:var(--rosso);text-decoration:none;border-bottom:1px solid rgba(206,44,0,.35);transition:border-color .2s}
.intro-grid p a:hover,.fam-copy p a:hover,.capsula p a:hover,.step-list a:hover{border-color:var(--rosso)}
.dark .fam-copy p a{color:#F4F2EC;border-color:rgba(255,255,255,.3)}
.dark .fam-copy p a:hover{border-color:#fff}
.frame{position:relative}
.frame::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}
.frame img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:contrast(1.03);display:block}
.frame.r43 img{aspect-ratio:4/3}
.frame.r32 img{aspect-ratio:3/2}
.frame.corner-r::before{display:none}
.frame.corner-r::after{content:"";position:absolute;right:-12px;bottom:-12px;width:56px;height:56px;
  border-bottom:3px solid var(--rosso);border-right:3px solid var(--rosso)}
.frame figcaption{margin-top:.75rem;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-d)}
.dark .frame figcaption{color:var(--steel)}

/* ---------- sezione-famiglia: la scheda tecnica messa in scena ---------- */
.fam{scroll-margin-top:24px}
.fam-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;position:relative;z-index:1}
.fam-grid.media-left .fam-media{order:-1}
.fam-copy h2{margin-bottom:1.2rem;max-width:20ch}
.fam-copy h3{font-size:1.4rem;margin:2rem 0 .7rem;letter-spacing:.01em}
.fam-copy h3:first-of-type{margin-top:1.6rem}
.fam-copy p{max-width:58ch}
.dark .fam-copy p{color:#B7B4AD}
.fam-copy p.lead{font-size:1.06rem;color:var(--ink);max-width:56ch}
.dark .fam-copy p.lead{color:#DCD9D2}
.fam-media{position:sticky;top:2rem}
.fam-media .frame+.frame{margin-top:2.2rem}
.fam-media .frame.small img{aspect-ratio:1/1}
.media-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.media-pair .frame::before{display:none}

/* tabella misure: righe a filo, dati in mono, niente griglia da foglio di calcolo */
.tab{width:100%;border-collapse:collapse;margin:1.4rem 0 1rem;font-size:.95rem}
.tab th{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-d);
  text-align:left;padding:.55rem .8rem .55rem 0;border-bottom:1px solid var(--paper-line);font-weight:600}
.dark .tab th{color:var(--steel);border-color:var(--dark-line)}
.tab td{padding:.85rem .8rem .85rem 0;border-bottom:1px solid var(--paper-line);vertical-align:top;color:#2E3134;line-height:1.5}
.dark .tab td{color:#C7C4BD;border-color:var(--dark-line)}
.tab td:first-child{white-space:nowrap}
.tab .m{font-family:var(--font-mono);font-weight:600;font-size:.9rem;letter-spacing:-.01em;color:var(--ink);
  background:rgba(24,26,28,.05);border:1px solid var(--paper-line);padding:.3em .55em;display:inline-block}
.dark .tab .m{color:#E6E3DC;background:rgba(255,255,255,.05);border-color:var(--dark-line)}
.tab tr:hover .m{border-color:rgba(206,44,0,.5)}
.tab .tbc{display:inline-block;margin-left:.5em;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rosso);border:1px dashed rgba(206,44,0,.5);padding:.15em .45em;vertical-align:middle}
.tab-note{font-family:var(--font-mono);font-size:.875rem;color:var(--steel-d);margin:0 0 1rem;letter-spacing:.01em}
.dark .tab-note{color:var(--steel)}
.tab-note b{color:var(--rosso);font-weight:600}

/* elenchi tecnici e passi (su disegno) */
.tech-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.15rem}
.tech-list li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;padding:.9rem 0;border-top:1px solid var(--paper-line);color:#2E3134;line-height:1.55}
.tech-list li:last-child{border-bottom:1px solid var(--paper-line)}
.dark .tech-list li{border-color:var(--dark-line);color:#C7C4BD}
.tech-list li::before{content:"";width:.6rem;height:2px;background:var(--rosso);transform:translateY(-.25em)}
.tech-list b{color:var(--ink);font-weight:600}
.dark .tech-list b{color:#F4F2EC}
.step-list{list-style:none;margin:1.4rem 0 0;padding:0;counter-reset:step;display:grid;gap:.15rem}
.step-list li{counter-increment:step;display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:baseline;padding:1rem 0;
  border-top:1px solid var(--paper-line);color:#2E3134;line-height:1.55}
.step-list li:last-child{border-bottom:1px solid var(--paper-line)}
.step-list li::before{content:"0" counter(step);font-family:var(--font-mono);font-size:.82rem;font-weight:600;color:var(--rosso)}
.step-list b{color:var(--ink);font-weight:600}
.microcopy{margin-top:1rem;font-family:var(--font-mono);font-size:.875rem;color:var(--steel-d)}

/* capsula AEO: la domanda come titolo di scheda, la risposta come testo visibile (mai FAQPage) */
.capsula{margin-top:2rem;border:1px solid var(--paper-line);border-left:3px solid var(--rosso);padding:1.4rem 1.6rem;background:var(--carta-2)}
.dark .capsula{border-color:var(--dark-line);border-left-color:var(--rosso);background:rgba(255,255,255,.03)}
.capsula .q{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.15rem;letter-spacing:.01em;margin-bottom:.6rem;line-height:1.1}
.capsula p{margin:0;color:#2E3134;max-width:60ch}
.dark .capsula p{color:#C7C4BD}
.capsula .k{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-d);margin-bottom:.6rem}

/* ---------- fascia full-bleed «macro» (la macchina-wow, execution-contract §3): foto elevata + overlay direzionale ---------- */
.wow{position:relative;isolation:isolate;overflow:hidden;color:#F4F2EC;padding:clamp(6rem,14vw,11rem) 0;background:var(--graphite)}
.wow-bg{position:absolute;inset:0;z-index:-2}
.wow-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform:scale(1.08);will-change:transform}
.wow-grad{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(16,17,19,.94) 6%,rgba(16,17,19,.7) 44%,rgba(16,17,19,.18) 78%)}
.wow .kick{color:var(--steel)}
.wow h2{color:#F4F2EC;margin-bottom:1.2rem}
.wow p{color:#D6D3CC;max-width:52ch;border-left:2px solid var(--rosso);padding-left:1rem}
.wow .wrap{position:relative;z-index:1}
.wow .grane-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.wow .grane-row span{font-family:var(--font-mono);font-size:.78rem;font-weight:500;color:#E6E3DC;background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.22);padding:.4em .7em;backdrop-filter:blur(4px)}

/* ---------- schema profili (levigacoste): tabella reale A–V + quota R in SVG ---------- */
.schema-wrap{margin-top:2rem;border:1px solid var(--dark-line);background:rgba(255,255,255,.02);padding:1.2rem}
.schema-wrap img{width:100%;display:block}
.schema-cap{margin-top:.9rem;font-size:.9rem;color:#ABA8A1}
.schema-cap .mono{font-family:var(--font-mono);color:var(--rosso);text-transform:uppercase;font-size:.74rem;letter-spacing:.05em}
#quotaR{width:100%;height:auto;margin-top:1.2rem}

/* pannello-dati (semirigidi #compatibilita): la scheda tecnica come oggetto, quando la foto sarebbe una ripetizione */
.databox{border:1px solid var(--paper-line);background:var(--graphite);color:#DCD9D2;padding:1.8rem 1.8rem 1.4rem;position:relative}
.databox::before{content:"";position:absolute;top:-14px;left:-14px;width:64px;height:64px;border-top:3px solid var(--rosso);border-left:3px solid var(--rosso)}
.databox-k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-bottom:1.2rem}
.databox dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem}
.databox dl>div{padding:.9rem 0;border-top:1px solid var(--dark-line)}
.databox dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.databox dd{margin:.25rem 0 0;font-family:var(--font-display);font-weight:700;font-size:1.6rem;text-transform:uppercase;color:#F4F2EC;line-height:1.05}
.databox dd .num{font-family:var(--font-mono);font-weight:600;font-size:1.35rem;color:var(--rosso);text-transform:none}
/* ---------- contatti (pagina su disegno) ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.nap{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.2rem}
.nap li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:flex-start;padding:.95rem 0;border-top:1px solid var(--paper-line);line-height:1.5;color:#2E3134}
.nap li:last-child{border-bottom:1px solid var(--paper-line)}
.nap svg{width:23px;height:23px;margin-top:2px;fill:none;stroke:var(--rosso);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nap b{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-d);font-weight:600;margin-bottom:.15rem}
.nap a{color:var(--ink);text-decoration:none;transition:color .2s}
.nap a:hover{color:var(--rosso)}
.nap .num{font-size:1.15rem;font-weight:600}
.contact-card{border:1px solid var(--paper-line);background:var(--graphite);color:#DCD9D2;padding:2rem 2rem 2.2rem;position:relative;overflow:hidden}
.contact-card::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}
.contact-card>*{position:relative}
.contact-card h3{color:#F4F2EC;font-size:1.7rem;margin-bottom:.8rem}
.contact-card p{color:#B7B4AD;max-width:44ch}
.contact-card .ways{display:grid;gap:.8rem;margin-top:1.4rem}
.contact-card .ways a{display:flex;align-items:center;gap:.8rem;padding:.95rem 1.1rem;border:1px solid var(--dark-line);color:#F4F2EC;
  text-decoration:none;font-family:var(--font-mono);font-size:.86rem;letter-spacing:.02em;transition:border-color .25s,background .25s}
.contact-card .ways a:hover{border-color:var(--rosso);background:rgba(206,44,0,.08)}
.contact-card .ways svg{width:20px;height:20px;fill:none;stroke:var(--rosso);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.contact-card .ways .lbl{font-family:var(--font-body);font-size:.8rem;color:var(--steel);margin-left:auto;text-transform:none;letter-spacing:0}
.contact-card .pill{display:inline-block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rosso);margin-bottom:1rem}

/* ---------- CTA di chiusura della pagina (stessa fascia della Home) ---------- */
.ctaband .btn-line{border-color:var(--dark-line)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .intro-grid,.fam-grid,.contact-grid{grid-template-columns:1fr}
  .fam-grid.media-left .fam-media{order:0}
  .fam-media{position:static}
  .fam-media .frame img,.frame.r43 img{aspect-ratio:3/2}
  .fam-media .frame+.frame{margin-top:1.6rem}
  .intro-grid .frame{order:-1}
}
@media(max-width:760px){
  /* la hero rinuncia (DUR-204): restano occhiello, H1 e UNA CTA; la seconda CTA scende in fondo pagina; la briciola sta nella fascia sotto (#2834) */
  .p-hero{min-height:min(92svh,760px)}
  .p-hero .hero-media img{object-position:50% 50%}
  /* #2787: a 390 briciola e occhiello cadevano sul foglio del disegno (crumbs 2.95, kick 1.68). Il blocco testo sta nel
     40% basso della hero: lì il gradiente tiene ≥.9 e un'ellisse in basso a sinistra copre l'occhiello; la metà
     alta resta scoperta e la foto racconta ancora la scena (mobile-composizione §2). Dal #2834 la briciola è fuori
     dalla hero, nella fascia sotto: lo scrim resta com'era (misurato ≥4.98). */
  .p-hero .hero-scrim{background:radial-gradient(ellipse 110% 34% at 30% 76%,rgba(16,17,19,.9) 0%,rgba(16,17,19,.55) 55%,rgba(16,17,19,0) 100%),
    linear-gradient(0deg,rgba(16,17,19,.95) 0%,rgba(16,17,19,.9) 30%,rgba(16,17,19,.7) 52%,rgba(16,17,19,.3) 72%,rgba(16,17,19,.08) 100%)}
  .p-hero .hero-content{margin-top:auto;margin-bottom:0;padding:2rem 0 2.6rem}
  .p-hero h1{font-size:clamp(2.2rem,10.5vw,3.2rem)}
  /* rinuncia dichiarata (DUR-204): sul telefono la hero tiene occhiello, H1 e UNA CTA. Il sottotitolo e la
     seconda CTA cadono: l'intro subito sotto ripete l'essenziale e la CTA su disegno torna in fondo pagina. */
  .p-hero .sub{display:none}
  .p-hero .cta-row .btn-ghost{display:none}
  .p-hero h1{margin-bottom:1.6rem}
  .p-hero .hero-vert{display:none}
  .crumb-band{--fuori-gabbia:4vw;padding-top:.62rem;padding-bottom:.62rem}
  .crumbs{font-size:.64rem;letter-spacing:.12em}
  .media-pair{grid-template-columns:1fr 1fr;gap:.8rem}
  .tab{font-size:.9rem}
  .tab th{display:none}
  .tab tr{display:grid;grid-template-columns:1fr;gap:.35rem;padding:.9rem 0;border-bottom:1px solid var(--paper-line)}
  .dark .tab tr{border-color:var(--dark-line)}
  .tab td{display:block;padding:0;border:0}
  .tab td:first-child{white-space:normal}
  .tab td[data-h]::before{content:attr(data-h) " · ";font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-d)}
  .contact-card{padding:1.6rem 1.3rem 1.8rem}
  .contact-card .ways a{flex-wrap:wrap;word-break:break-word}
  .contact-card .ways .lbl{margin-left:0;flex-basis:100%;padding-left:calc(20px + .8rem)}
  .wow{padding:clamp(5rem,18vw,8rem) 0}
  .wow p{border:0;padding:0}
}

/* ============================ PAGINA LEGALE /privacy/ e /en/privacy/ (task #3033, 25/09/2026) ============================
   Stesso guscio delle pagine interne, ma la hero è SNELLA (niente foto: una pagina legale non ha un soggetto da
   mostrare, e una foto qui sarebbe decorazione; imagery contract: è l'unica sezione solo-testo del sito). Fondo
   graphite con un velo radiale rosso appena percettibile, così resta la stessa famiglia della hero vera. */
.p-hero--slim{min-height:auto;
  background:radial-gradient(ellipse 60% 80% at 80% 20%,rgba(206,44,0,.14) 0%,rgba(206,44,0,0) 60%),var(--graphite)}
.p-hero--slim .hero-content{padding:calc(1.6rem + 42px) 0 2.6rem;max-width:44rem}
.p-hero--slim h1{font-size:clamp(2.2rem,4.4vw,3.8rem)}
.p-hero--slim .sub{margin-bottom:0}
/* il corpo: una colonna di lettura da 68ch, titoli numerati in display, tabelle .tab del sito, liste con la barretta */
.legal .legal-wrap{max-width:68ch}
.legal .legal-meta{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-d);margin:0 0 1.4rem}
.legal .lead{font-size:1.12rem;color:#2E3134;line-height:1.6;margin:0 0 1rem}
.legal h2{font-size:clamp(1.55rem,2.6vw,2.2rem);max-width:none;margin:3rem 0 .9rem;line-height:1.05}
.legal h2 .n{color:var(--rosso);font-family:var(--font-mono);font-weight:600;font-size:.62em;margin-right:.5em;vertical-align:.18em;letter-spacing:.02em}
.legal h3{font-size:1.12rem;margin:1.8rem 0 .5rem;font-family:var(--font-body);font-weight:700;line-height:1.3;letter-spacing:0}
.legal p{color:#2E3134;line-height:1.65;margin:0 0 1rem}
.legal p a,.legal li a{color:var(--rosso);text-decoration:none;border-bottom:1px solid rgba(206,44,0,.35);transition:border-color .2s}
.legal p a:hover,.legal li a:hover{border-color:var(--rosso)}
.legal ul{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.5rem}
.legal ul li{position:relative;padding-left:1.15rem;color:#2E3134;line-height:1.55}
.legal ul li::before{content:"";position:absolute;left:0;top:.7em;width:.55rem;height:2px;background:var(--rosso)}
.legal ul.inline-list{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
.legal .tab{margin:1rem 0 1.2rem;font-size:.92rem}
.legal .tab td:first-child{white-space:normal;min-width:11rem}
.legal .tab td strong{color:var(--ink)}
/* TESTO-1 (mobile_check, 5% max sotto 14px): le note «dim» nelle tabelle si attenuano col COLORE, non col corpo —
   a .86em stavano a 12,7px e pesavano il 16% dei caratteri della pagina. */
.legal .dim{color:var(--steel-d);font-size:1em}
.legal .tab .dim{display:block;margin-top:.2rem;line-height:1.45}
.legal code{font-family:var(--font-mono);font-size:.95em;background:rgba(206,44,0,.08);color:var(--rosso);padding:.1em .45em}
.legal .btn{margin:.2rem 0 .6rem}
.legal .legal-foot{font-family:var(--font-mono);font-size:.82rem;color:var(--steel-d);margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--paper-line)}
@media(max-width:760px){
  .legal .tab td:first-child{min-width:0}
  .legal h2{margin-top:2.4rem}
}

/* ============================ PAGINA CONTATTI /contatti/ e /en/contact/ (task #3035, 25/09/2026) ============================
   Stessa hero fotografica delle pagine interne (beauty_simaflex_c30.jpg: l'etichetta blu con «Luni (SP) · tel 0187 66762»
   è il soggetto giusto per una pagina contatti). Ma quell'etichetta è BIANCA e a 1440 sta proprio sotto le voci del menu:
   «Produzione su disegno» in mono bianco finiva sul bianco (visto sullo scatto contatti-1440.png). Rimedio locale, non
   globale: una BANDA in alto dietro l'header (scende a zero entro ~240px), in aggiunta alle tre leve di #2787 che
   restano identiche; la foto resta scoperta a destra sotto la banda (DUR-135). Su mobile la banda copre solo la riga
   del logo/burger, dove il logo ha già la sua targa. */
.pg-contatti .p-hero .hero-scrim{
  background:linear-gradient(180deg,rgba(16,17,19,.86) 0,rgba(16,17,19,.6) 96px,rgba(16,17,19,0) 240px),
    radial-gradient(ellipse 46% 62% at 32% 56%,rgba(16,17,19,.9) 0%,rgba(16,17,19,.62) 48%,rgba(16,17,19,0) 100%),
    linear-gradient(90deg,rgba(16,17,19,.95) 0%,rgba(16,17,19,.9) 30%,rgba(16,17,19,.74) 48%,rgba(16,17,19,.3) 66%,rgba(16,17,19,.06) 100%),
    linear-gradient(0deg,rgba(16,17,19,.88) 0%,transparent 40%)}