/* ============================================================
   ELECTRA ITALIA srl — sistema di design
   Register: Brand (attrezzature di collaudo e cablaggi)
   Corsia: "il banco sotto tensione" — fondo grafite, serigrafia
   in condensata maiuscola, il lime come unico segnale vivo.
   Palette e font sono fissati dal manuale di marca del cliente.

   Nota di contrasto, perché non sembri una scelta di gusto:
   il lime #d5d900 su bianco dà 1,5:1 ed è inutilizzabile come
   testo. Su grafite dà 7,1:1. Il fondo scuro è la conseguenza
   della palette, non una preferenza.
   ============================================================ */

/* ---------- Token ---------- */
:root {
  /* Marca — valori esatti dal manuale, non modificarli */
  --lime:        #d5d900;
  --lime-cupo:   #a8ab00;   /* solo su campiture chiare e stati :active */
  --arancio:     #d17512;   /* marca la sola divisione Harness & Systems */
  --arancio-chiaro: #e08c2e;/* la stessa cosa quando è testo su fondo scuro */
  --grafite:     #3d3d3c;
  --grafite-2:   #585857;
  --grigio:      #9d9d9c;

  /* Superfici scure */
  --fondo:       #242423;   /* più cupo del grafite di marca, così i pannelli emergono */
  --fondo-2:     #1c1c1b;   /* pozzi: corsia, piè di pagina, righe di tabella */
  --pannello:    #2e2e2d;
  --pannello-2:  #3d3d3c;

  /* Superficie chiara — solo lettura lunga (pagine legali, note) */
  --carta:       #f1f1ef;
  --carta-2:     #e4e4e0;

  /* Inchiostri su scuro — verificati su --fondo */
  --su:          #e6e6e2;   /* testo corrente   13,2:1 */
  --su-2:        #c0c0bb;   /* secondario        8,9:1 */
  --su-3:        #9d9d9c;   /* metadati, ≥16px   6,0:1 */

  /* Inchiostri su carta */
  --ink:         #262625;
  --ink-2:       #4a4a48;
  --ink-3:       #6b6b68;

  /* Filetti */
  --filo:        rgba(255, 255, 255, 0.13);
  --filo-2:      rgba(255, 255, 255, 0.24);
  --filo-carta:  #d5d5d0;

  /* Tipografia */
  --f-display: "Encode Sans Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --f-testo:   "Encode Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Scala fluida, ragione 1.25. Tetto del display 3,5rem: un banco
     non è un manifesto, e su Electronica il tetto è 4,4rem. */
  --t--2: clamp(0.70rem, 0.68rem + 0.09vw, 0.76rem);
  --t--1: clamp(0.83rem, 0.80rem + 0.13vw, 0.90rem);
  --t-0:  clamp(1rem, 0.97rem + 0.15vw, 1.07rem);
  --t-1:  clamp(1.16rem, 1.11rem + 0.26vw, 1.33rem);
  --t-2:  clamp(1.36rem, 1.27rem + 0.44vw, 1.66rem);
  --t-3:  clamp(1.60rem, 1.44rem + 0.78vw, 2.08rem);
  --t-4:  clamp(1.90rem, 1.62rem + 1.38vw, 2.70rem);
  --t-5:  clamp(2.25rem, 1.80rem + 2.20vw, 3.50rem);

  /* Spazio */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4.5rem;
  --s-9: 6.5rem;  --s-10: 9rem;

  /* Misure di impaginato */
  --corsia-w:  240px;
  --lettura:   1040px;
  --larga:     1180px;
  /* Soglia della corsia. 1060px e non 1180: un portatile 16:9 con
     scalatura di sistema al 150% dà un viewport CSS attorno ai 1140px,
     e con la soglia più alta la corsia — che è l'impianto del sito —
     non si sarebbe mai vista su quelle macchine. Il valore è ripetuto
     nelle media query e in js/site.js (chiusura del cassetto). */
  --soglia-corsia: 1060px;

  /* Movimento */
  --uscita:       cubic-bezier(0.22, 1, 0.36, 1);
  --uscita-lenta: cubic-bezier(0.16, 1, 0.3, 1);

  /* Piani */
  --z-linea:  1;
  --z-corsia: 100;
  --z-velo:   200;
  --z-cassetto: 210;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--f-testo);
  font-weight: 400;            /* su fondo scuro il 300 sbava: mai sotto 400 */
  font-size: var(--t-0);
  line-height: 1.65;
  color: var(--su);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;  /* è un sito di tabelle: le cifre si incolonnano */
  overflow-wrap: break-word;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
  border-radius: 2px;
}
.carta :focus-visible { outline-color: var(--lime-cupo); }

::selection { background: var(--lime); color: var(--fondo); }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: var(--t-5); }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-2); }
h4 { font-size: var(--t-1); }

p { text-wrap: pretty; }
p + p { margin-top: 0.85em; }

/* La serigrafia: l'etichetta stampata sul pannello di uno strumento.
   È l'elemento tipografico che distingue questo sito da Electronica. */
.serigrafia {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--su-3);
}
.serigrafia--lime  { color: var(--lime); }
.serigrafia--aran  { color: var(--arancio-chiaro); }
.carta .serigrafia { color: var(--ink-3); }

/* La serigrafia con il pad davanti: la stessa etichetta,
   ma agganciata alla linea di segnale. */
.serigrafia--pad { position: relative; padding-left: 1.15rem; }
.serigrafia--pad::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime);
}

.occhiello {
  font-size: var(--t-1);
  font-weight: 400;
  color: var(--su-2);
  max-width: 60ch;
}
.guida {
  color: var(--su-2);
  max-width: 66ch;
}
.nota {
  font-size: var(--t--1);
  color: var(--su-3);
  max-width: 70ch;
}
.carta .guida { color: var(--ink-2); }
.carta .nota  { color: var(--ink-3); }

a { color: inherit; }
.testo a,
.guida a,
.nota a { color: var(--lime); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.testo a:hover,
.guida a:hover,
.nota a:hover { text-decoration-thickness: 2px; }
.carta a { color: var(--lime-cupo); }

/* ============================================================
   Guscio: corsia fissa a sinistra, contenuto a destra.
   La navigazione di lato è la differenza di impianto più
   visibile rispetto a Electronica, che ha la testata in alto.
   ============================================================ */
.salta {
  position: absolute;
  left: -9999px;
  z-index: 999;
  background: var(--lime);
  color: var(--fondo);
  padding: var(--s-3) var(--s-5);
  font-weight: 600;
}
.salta:focus { left: var(--s-4); top: var(--s-4); }

.contenuto { min-height: 100vh; }

.container {
  width: min(100% - 2.5rem, var(--lettura));
  margin-inline: auto;
}
.container--largo { width: min(100% - 2.5rem, var(--larga)); }

@media (min-width: 1060px) {
  .contenuto { margin-left: var(--corsia-w); }
  /* La colonna resta ancorata a sinistra — l'impaginato è asimmetrico —
     ma con un margine vero dalla corsia, che è una superficie, non un bordo.
     Il margine sinistro lascia anche lo spazio alla linea di segnale. */
  .container       { width: min(100% - 7rem, var(--lettura)); margin-inline: 3.5rem auto; }
  .container--largo { width: min(100% - 7rem, var(--larga)); }
}

/* ---------- Corsia (desktop) ---------- */
.corsia {
  background: var(--fondo-2);
  border-bottom: 1px solid var(--filo);
  z-index: var(--z-corsia);
}

@media (min-width: 1060px) {
  .corsia {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--corsia-w);
    border-right: 1px solid var(--filo);
    border-bottom: 0;
    display: flex;
    flex-direction: column;
    padding: var(--s-6) var(--s-5) var(--s-5);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.corsia__marchio { display: block; }
.corsia__marchio img { width: 172px; }

.corsia__nav { margin-top: var(--s-7); }
.corsia__nav ul { list-style: none; padding: 0; }

.corsia__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.55rem 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-1);
  letter-spacing: -0.005em;
  color: var(--su-2);
  text-decoration: none;
  border-bottom: 1px solid var(--filo);
  transition: color 0.18s var(--uscita);
}
.corsia__link:hover { color: var(--su); }
.corsia__link[aria-current="page"] { color: var(--lime); }

/* Il pad del marchio in testa a ogni voce: vuoto, si riempie sulla
   pagina corrente. Dice una cosa vera — dove siamo — invece di
   fingere un indice numerato che la navigazione non ha. */
.corsia__pad {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid var(--grafite-2);
  align-self: center;
  transition: background 0.18s var(--uscita), border-color 0.18s var(--uscita);
}
.corsia__link:hover .corsia__pad { border-color: var(--su-2); }
.corsia__link[aria-current="page"] .corsia__pad { background: var(--lime); border-color: var(--lime); }

/* Le due divisioni nella corsia: pastiglie che portano il colore di divisione. */
.corsia__div { margin-top: var(--s-6); display: grid; gap: var(--s-2); }
.div-pastiglia {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  background: var(--pannello);
  color: var(--su-2);
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t--1);
  line-height: 1.2;
  transition: background 0.18s var(--uscita), color 0.18s var(--uscita);
}
/* Il tratto di conduttore che entra nella pastiglia: porta il colore
   di divisione senza ricorrere alla barra laterale da scheda. */
.div-pastiglia::before {
  content: "";
  flex: none;
  width: 18px;
  height: 2px;
  background: var(--grafite-2);
  transition: width 0.18s var(--uscita);
}
.div-pastiglia img { width: 24px; flex: none; }
.div-pastiglia:hover::before { width: 24px; }
.div-pastiglia:hover { background: var(--pannello-2); color: var(--su); }
.div-pastiglia--ft::before { background: var(--lime); }
.div-pastiglia--hs::before { background: var(--arancio); }

.corsia__coda { margin-top: auto; padding-top: var(--s-6); }
.corsia__recapito {
  display: grid;
  gap: 0.15rem;
  font-size: var(--t--1);
  color: var(--su-3);
}
.corsia__recapito a { color: var(--su-2); text-decoration: none; }
.corsia__recapito a:hover { color: var(--lime); }

/* ---------- Il contatore della distinta ---------- */
.contatore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--lime);
  color: var(--fondo);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.18s var(--uscita);
}
.contatore:hover { filter: brightness(1.08); }
.contatore__n {
  display: inline-grid;
  place-items: center;
  min-width: 1.7em;
  height: 1.7em;
  padding-inline: 0.35em;
  background: var(--fondo);
  color: var(--lime);
  border-radius: 999px;
  font-size: var(--t--2);
}
/* Vuota, la distinta non urla: resta un invito spento. */
.contatore[data-vuota="si"] {
  background: transparent;
  color: var(--su-3);
  border: 1px solid var(--filo-2);
}
.contatore[data-vuota="si"] .contatore__n { background: var(--pannello); color: var(--su-3); }

/* ---------- Corsia in versione barra (sotto 1180px) ---------- */
.corsia__barra {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 1.25rem;
}
@media (min-width: 1060px) { .corsia__barra { display: none; } }

.corsia__barra .corsia__marchio img { width: 148px; }
.corsia__barra-spazio { margin-left: auto; }

.burger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--filo-2);
  color: var(--su);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.burger__barre { display: grid; gap: 3px; width: 16px; }
.burger__barre span { height: 2px; background: currentColor; }

/* Il contatore in barra si riduce a pastiglia */
.contatore--barra {
  width: auto;
  margin-top: 0;
  padding: var(--s-2) var(--s-3);
}
.contatore--barra span:first-child { display: none; }
@media (min-width: 560px) { .contatore--barra span:first-child { display: inline; } }

@media (min-width: 1060px) {
  .corsia { position: fixed; }
  .corsia__blocco { display: contents; }
}
@media (max-width: 1059.98px) {
  .corsia { position: sticky; top: 0; }
  .corsia__blocco { display: none; }
}

/* ---------- Cassetto (menu su schermo stretto) ---------- */
.velo {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.62);
  z-index: var(--z-velo);
  opacity: 0;
  transition: opacity 0.25s var(--uscita);
}
.velo[data-aperto="si"] { opacity: 1; }

.cassetto {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(92vw, 380px);
  background: var(--fondo-2);
  border-left: 1px solid var(--filo);
  z-index: var(--z-cassetto);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.32s var(--uscita);
}
.cassetto[data-aperto="si"] { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .velo, .cassetto { transition: none; }
}

.cassetto__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.cassetto__testa img { width: 148px; }
.cassetto__chiudi {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--su-2);
  border: 1px solid var(--filo-2);
  padding: var(--s-2) var(--s-3);
}
.cassetto ul { list-style: none; padding: 0; display: grid; }

/* ============================================================
   Sezioni e linea di segnale
   ============================================================ */
.sez { padding-block: var(--s-8); position: relative; }
.sez--stretta { padding-block: var(--s-7); }
.sez--pozzo { background: var(--fondo-2); }
.sez--pannello { background: var(--pannello); }

.sez + .sez { border-top: 1px solid var(--filo); }
.sez--pozzo + .sez--pozzo,
.sez--pannello + .sez--pannello { border-top: 1px solid var(--filo); }

.testa-sez {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
@media (min-width: 900px) {
  .testa-sez--due {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-7);
    align-items: end;
  }
}
.testa-sez h2 { margin-top: var(--s-3); }

/* Il corpo della pagina fa da riferimento alla linea di segnale. */
[data-corpo] { position: relative; }

/* La linea di segnale: corre sul filo sinistro del contenuto
   e depone un pad a ogni sezione. È l'eco minore del fascio. */
.linea {
  position: absolute;
  /* Nel margine, non a filo della corsia: appoggiata al bordo
     sembrerebbe un secondo filetto della corsia stessa. */
  left: 1.5rem; top: 0; bottom: 0;
  width: 2px;
  background: var(--filo);
  z-index: var(--z-linea);
  pointer-events: none;
}
.linea__viva {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background: var(--lime);
  transform-origin: top;
}
@media (max-width: 1059.98px) { .linea { display: none; } }

/* ============================================================
   L'apertura: il fascio
   Il logo Harness & Systems portato a scala di pagina.
   ============================================================ */
.apertura { padding-block: var(--s-8) var(--s-9); }
@media (min-width: 1000px) {
  .apertura__griglia {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: var(--s-8);
    align-items: center;
  }
}
.apertura h1 { margin-top: var(--s-4); }
.apertura h1 .riga-tit { display: block; }
.apertura .occhiello { margin-top: var(--s-5); }
.apertura .btn-riga { margin-top: var(--s-6); }

/* Sotto i 1000px il disegno non ha respiro: al suo posto va
   l'elenco, che dice le stesse sei cose in verticale. */
.fascio { display: none; width: 100%; height: auto; }
@media (min-width: 1000px) { .fascio { display: block; } }
.fascio__cond {
  fill: none;
  stroke: var(--grafite-2);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke 0.2s var(--uscita);
}
.fascio__pad {
  fill: var(--fondo);
  stroke: var(--grafite-2);
  stroke-width: 2.5;
  transition: fill 0.2s var(--uscita), stroke 0.2s var(--uscita);
}
.fascio__guscio { fill: none; stroke: var(--su-3); stroke-width: 2.5; }
.fascio__et {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--su-2);
  transition: fill 0.2s var(--uscita);
}
/* Sotto tensione */
.fascio__via:hover .fascio__cond,
.fascio__via:focus-visible .fascio__cond,
.fascio__via[data-viva="si"] .fascio__cond { stroke: var(--lime); }
.fascio__via:hover .fascio__pad,
.fascio__via:focus-visible .fascio__pad,
.fascio__via[data-viva="si"] .fascio__pad { fill: var(--lime); stroke: var(--lime); }
.fascio__via:hover .fascio__et,
.fascio__via:focus-visible .fascio__et,
.fascio__via[data-viva="si"] .fascio__et { fill: var(--su); }
.fascio__via { cursor: pointer; }
.fascio__via:focus { outline: none; }
.fascio__via:focus-visible .fascio__et { text-decoration: underline; }

/* Sotto i 1000px il fascio diventa un elenco: stessa informazione,
   senza chiedere a uno schermo stretto di reggere un disegno largo. */
.fascio-elenco { list-style: none; padding: 0; display: grid; gap: 1px; background: var(--filo); }
@media (min-width: 1000px) { .fascio-elenco { display: none; } }
.fascio-elenco a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--fondo);
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-1);
}
.fascio-elenco a:hover { background: var(--pannello); color: var(--lime); }
.fascio-elenco span { color: var(--grafite-2); font-size: var(--t--2); letter-spacing: 0.1em; }

/* ============================================================
   Bottoni
   ============================================================ */
.btn-riga { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.72rem 1.15rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.18s var(--uscita), color 0.18s var(--uscita),
              border-color 0.18s var(--uscita);
}
.btn__punta { width: 18px; height: 18px; flex: none; }
.btn__punta svg { width: 100%; height: 100%; }

.btn--pieno { background: var(--lime); color: var(--fondo); }   /* 10,2:1 */
.btn--pieno:hover { background: #e6ea1a; }
.btn--filo { border-color: var(--filo-2); color: var(--su); }
.btn--filo:hover { border-color: var(--lime); color: var(--lime); }
.btn--muto { color: var(--su-2); padding-inline: 0; }
.btn--muto:hover { color: var(--lime); }
.carta .btn--pieno { background: var(--lime); color: #242423; }
.carta .btn--filo { border-color: var(--filo-carta); color: var(--ink); }
.carta .btn--filo:hover { border-color: var(--lime-cupo); color: var(--lime-cupo); }

/* ============================================================
   Pannelli di divisione
   ============================================================ */
.divisioni { display: grid; gap: 1px; background: var(--filo); }
@media (min-width: 900px) { .divisioni { grid-template-columns: 1fr 1fr; } }

.pannello-div {
  background: var(--fondo);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  border-top: 3px solid var(--grafite-2);
}
.pannello-div--ft { border-top-color: var(--lime); }
.pannello-div--hs { border-top-color: var(--arancio); }
.pannello-div__logo { width: 190px; }
.pannello-div ul { list-style: none; padding: 0; display: grid; gap: 0; }
.pannello-div li {
  padding: 0.55rem 0 0.55rem 1.15rem;
  border-bottom: 1px solid var(--filo);
  font-size: var(--t--1);
  color: var(--su-2);
  position: relative;
}
.pannello-div li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05em;
  width: 6px; height: 1px;
  background: var(--grafite-2);
}
.pannello-div--ft li::before { background: var(--lime); }
.pannello-div--hs li::before { background: var(--arancio); }
.pannello-div .btn { margin-top: auto; align-self: flex-start; }

/* ============================================================
   La matrice — dove Electra interviene, fase per fase.
   È la sezione che un ingegnere legge per prima.
   ============================================================ */
.tabella-avvolta { overflow-x: auto; overflow-y: hidden; }
.tabella-avvolta:focus-visible { outline-offset: -3px; }

.matrice { min-width: 720px; font-size: var(--t--1); }
.matrice caption {
  text-align: left;
  padding-bottom: var(--s-4);
  color: var(--su-3);
  font-size: var(--t--1);
}
.matrice th, .matrice td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--filo);
}
.matrice thead th {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--su-3);
  border-bottom: 1px solid var(--filo-2);
  white-space: nowrap;
}
.matrice thead th.is-ft { color: var(--lime); }
.matrice thead th.is-hs { color: var(--arancio-chiaro); }
.matrice tbody th {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-0);
  color: var(--su);
  width: 20%;
  white-space: nowrap;
}
.matrice td { color: var(--su-2); }
.matrice tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.matrice .vuoto { color: var(--grafite-2); }

/* ============================================================
   Il catalogo: righe di lavorazione.
   Ogni riga è una cosa che si può chiedere, e porta il suo "+".
   ============================================================ */
/* Su un catalogo di ventisette righe i filtri devono restare a portata
   di mano mentre si scorre. Solo da 1060px in su: sotto quella soglia la
   barra della corsia occupa già la testa della pagina. */
@media (min-width: 1060px) {
  .filtri {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--fondo);
    margin-bottom: 0;
  }
}
.filtri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--filo);
  margin-bottom: var(--s-5);
}
.filtri__gruppo { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filtro {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--filo-2);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--su-2);
  transition: all 0.16s var(--uscita);
}
.filtro:hover { color: var(--su); border-color: var(--su-3); }
.filtro[aria-pressed="true"] { background: var(--su); border-color: var(--su); color: var(--fondo); }
.filtro[aria-pressed="true"][data-div="ft"] { background: var(--lime); border-color: var(--lime); }
.filtro[aria-pressed="true"][data-div="hs"] { background: var(--arancio); border-color: var(--arancio); color: #201200; }
.filtri__esito { margin-left: auto; font-size: var(--t--1); color: var(--su-3); }

.cap-gruppo + .cap-gruppo { margin-top: var(--s-7); }
.cap-gruppo__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--filo-2);
}

.righe { list-style: none; padding: 0; }

.riga {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--filo);
}
.riga[hidden] { display: none; }
.riga__cod {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t--2);
  letter-spacing: 0.06em;
  color: var(--grafite-2);
  padding-top: 0.32em;
}
.riga--ft .riga__cod { color: var(--lime); }
.riga--hs .riga__cod { color: var(--arancio-chiaro); }
.riga__nome { font-family: var(--f-display); font-weight: 600; font-size: var(--t-1); }
.riga__det { font-size: var(--t--1); color: var(--su-2); margin-top: 0.2rem; }
.riga__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-2);
  font-size: var(--t--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--su-3);
  font-family: var(--f-display);
  font-weight: 600;
}

/* Il "+": l'affordance che tiene insieme tutto il sito.
   Lo accende JavaScript, quindi senza JS non compare. */
.agg {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--filo-2);
  color: var(--su-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.16s var(--uscita);
}
.agg:hover { border-color: var(--lime); color: var(--lime); }
.agg__segno { font-size: 1.15em; line-height: 1; }
.agg[aria-pressed="true"] {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--fondo);
}

/* Su telefono le tre colonne della riga non ci stanno: il pulsante
   scende sotto al testo, incolonnato con lui e non con il codice. */
@media (max-width: 640px) {
  .riga { grid-template-columns: 3.2rem minmax(0, 1fr); gap: var(--s-3); }
  .riga > [data-agg-qui] { grid-column: 2; }
  .distinta__riga { grid-template-columns: 3.2rem minmax(0, 1fr); gap: var(--s-3); }
  .distinta__togli { grid-column: 2; justify-self: start; }
  .cap-gruppo__testa { flex-wrap: wrap; gap: var(--s-2); }
  .filtri__esito { margin-left: 0; width: 100%; }
}

/* ============================================================
   Settori — non un indice a passaggio del mouse (quello è di
   Electronica): qui ogni settore porta il vincolo che impone.
   ============================================================ */
.settori { display: grid; gap: 1px; background: var(--filo); }
@media (min-width: 700px)  { .settori { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1050px) { .settori { grid-template-columns: repeat(4, 1fr); } }

.settore {
  background: var(--fondo);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.settore h3 { font-size: var(--t-1); }
.settore p { font-size: var(--t--1); color: var(--su-2); }
.settore__vincolo {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--filo);
  font-size: var(--t--2);
  color: var(--su-3);
}

/* ============================================================
   Riquadri, numeri, citazione
   ============================================================ */
.riquadro {
  background: var(--pannello);
  border: 1px solid var(--filo);
  border-top: 2px solid var(--lime);
  padding: var(--s-5);
}
.riquadro--aran { border-top-color: var(--arancio); }

.dati { display: grid; gap: 1px; background: var(--filo); }
@media (min-width: 640px) { .dati { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .dati { grid-template-columns: repeat(4, 1fr); } }
.dato { background: var(--fondo); padding: var(--s-5); }
.dato__v {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-3);
  color: var(--lime);
  line-height: 1;
}
.dato__e { display: block; margin-top: var(--s-2); font-size: var(--t--1); color: var(--su-2); }

.citazione {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-3);
  line-height: 1.2;
  max-width: 22ch;
}

/* La casa madre: il rimando a Electronica srl. */
.casa {
  display: grid;
  gap: var(--s-5);
  align-items: center;
  background: var(--pannello);
  padding: var(--s-6);
}
@media (min-width: 820px) { .casa { grid-template-columns: 230px minmax(0, 1fr) auto; } }
.casa img { width: 200px; }

/* ============================================================
   Schemi disegnati
   Su questo sito il disegno tecnico fa il lavoro che su Electronica
   fanno le fotografie di processo: dice come è fatta una cosa,
   cosa che una foto di reparto non dice quasi mai.
   ============================================================ */
.schema-avvolto { overflow-x: auto; overflow-y: hidden; padding-bottom: var(--s-3); }
.schema-avvolto:focus-visible { outline-offset: -3px; }
.schema { display: block; min-width: 720px; width: 100%; height: auto; }

.schema__blocco { fill: var(--pannello); stroke: var(--filo-2); stroke-width: 1.5; }
.schema__blocco--vivo { stroke: var(--lime); }
.schema__filo { fill: none; stroke: var(--grafite-2); stroke-width: 2; stroke-linecap: round; }
.schema__filo--vivo { stroke: var(--lime); }
.schema__filo--tratto { stroke-dasharray: 5 5; }
.schema__pad { fill: var(--lime); }
.schema__pad--spento { fill: var(--fondo); stroke: var(--grafite-2); stroke-width: 2; }
.schema__et {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--su);
}
.schema__et--lime { fill: var(--lime); }
.schema__et--aran { fill: var(--arancio-chiaro); }
.schema__nota { font-family: var(--f-testo); font-size: 12.5px; fill: var(--su-3); }

/* ============================================================
   Immagini
   ============================================================ */
.figura { margin: 0; }
.figura img {
  width: 100%;
  filter: saturate(0.82) contrast(1.04);
}
.figura figcaption {
  margin-top: var(--s-3);
  font-size: var(--t--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--su-3);
}
.figura--bordo img { border: 1px solid var(--filo); }

.banda {
  display: grid;
  gap: 1px;
  background: var(--filo);
}
@media (min-width: 760px) { .banda { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   La distinta (pagina richiesta)
   ============================================================ */
.distinta { list-style: none; padding: 0; }
.distinta__riga {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--filo);
}
.distinta__cod {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t--2);
  letter-spacing: 0.06em;
  color: var(--lime);
}
.distinta__nome { font-family: var(--f-display); font-weight: 600; font-size: var(--t-1); }
.distinta__div { font-size: var(--t--2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--su-3); }
.distinta__togli {
  border: 1px solid var(--filo-2);
  padding: 0.3rem 0.6rem;
  font-size: var(--t--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--su-3);
}
.distinta__togli:hover { border-color: var(--lime); color: var(--lime); }

.distinta-vuota {
  border: 1px dashed var(--filo-2);
  padding: var(--s-6);
  text-align: center;
  color: var(--su-2);
}

/* ============================================================
   Modulo
   ============================================================ */
.modulo { display: grid; gap: var(--s-4); }
@media (min-width: 720px) {
  .modulo { grid-template-columns: 1fr 1fr; }
  .campo--pieno { grid-column: 1 / -1; }
}

.campo { display: grid; gap: var(--s-2); }
.campo > label {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--su-2);
}
.campo__obbl { color: var(--lime); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--fondo-2);
  border: 1px solid var(--filo-2);
  color: var(--su);
  border-radius: 0;
  transition: border-color 0.16s var(--uscita);
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--su-3); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--lime); outline: none; box-shadow: 0 0 0 1px var(--lime); }
.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--su-3) 50%),
                    linear-gradient(135deg, var(--su-3) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.25rem, calc(100% - 0.8rem) 1.25rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.campo__errore { font-size: var(--t--1); color: #ff8a80; min-height: 1.2em; }
.campo[data-errore="si"] input,
.campo[data-errore="si"] select,
.campo[data-errore="si"] textarea { border-color: #ff8a80; }

.consenso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  font-size: var(--t--1);
  color: var(--su-2);
}
.consenso input { width: 1.15rem; height: 1.15rem; margin-top: 0.25rem; accent-color: var(--lime); }

/* Trappola per i bot: fuori campo, non display:none (alcuni bot lo leggono). */
.trappola {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.esito { padding: var(--s-4); border: 1px solid var(--filo-2); font-size: var(--t--1); }
.esito[data-stato="ok"] { border-color: var(--lime); background: rgba(213, 217, 0, 0.08); }
.esito[data-stato="ko"] { border-color: #ff8a80; background: rgba(255, 138, 128, 0.08); }

/* ============================================================
   Piè di pagina
   ============================================================ */
.pie {
  background: var(--fondo-2);
  border-top: 1px solid var(--filo);
  padding-block: var(--s-7) var(--s-5);
}
.pie__alto { display: grid; gap: var(--s-6); }
@media (min-width: 820px) {
  .pie__alto { grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--s-7); }
}
.pie__marchio img { width: 210px; }
.pie__claim { margin-top: var(--s-4); font-size: var(--t--1); color: var(--su-2); max-width: 42ch; }
.pie__titolo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--su-3);
  margin-bottom: var(--s-3);
}
.pie__lista { list-style: none; padding: 0; display: grid; gap: var(--s-2); font-size: var(--t--1); }
.pie__lista a { color: var(--su-2); text-decoration: none; }
.pie__lista a:hover { color: var(--lime); }

.pie__basso {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--filo);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  font-size: var(--t--2);
  color: var(--su-3);
}
.pie__basso a { color: var(--su-3); text-decoration: none; }
.pie__basso a:hover { color: var(--lime); }
.pie__legale { margin-left: auto; display: flex; gap: var(--s-4); flex-wrap: wrap; }

/* ============================================================
   Carta — le pagine di lettura lunga (privacy, cookie)
   ============================================================ */
.carta {
  background: var(--carta);
  color: var(--ink-2);
}
.carta h1, .carta h2, .carta h3 { color: var(--ink); }
.carta .serigrafia--pad::before { background: var(--lime-cupo); }
.carta .testo { max-width: 68ch; }
.carta .testo h2 { margin-top: var(--s-7); font-size: var(--t-2); }
.carta .testo h3 { margin-top: var(--s-6); font-size: var(--t-1); }
.carta .testo p, .carta .testo ul, .carta .testo ol { margin-top: var(--s-4); }
.carta .testo ul, .carta .testo ol { padding-left: 1.3rem; }
.carta .testo li + li { margin-top: var(--s-2); }
.carta .avviso {
  margin-top: var(--s-7);
  padding: var(--s-5);
  background: var(--carta-2);
  border-top: 2px solid var(--lime-cupo);
  font-size: var(--t--1);
  color: var(--ink-2);
}

/* ============================================================
   404
   ============================================================ */
.perso { min-height: 62vh; display: grid; align-content: center; gap: var(--s-5); }

/* ============================================================
   Movimento — qui non c'è nulla.
   Regola presa da Electronica e mantenuta: il CSS non nasconde mai
   niente in attesa di GSAP. Lo stato di partenza delle rivelazioni
   lo imposta js/motion.js, e solo quando ha davvero intenzione di
   animare. Se GSAP non arriva, la pagina si vede tutta.
   ============================================================ */

/* ============================================================
   Stampa — su carta il fondo scuro non ha senso e brucia toner.
   ============================================================ */
@media print {
  :root { --su: #111; --su-2: #333; --su-3: #555; --filo: #ccc; --filo-2: #999; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .corsia, .cassetto, .velo, .contatore, .agg, .filtri, .btn, .fascio { display: none !important; }
  .contenuto { margin-left: 0; }
  .sez { padding-block: 1.2rem; border-top: 1px solid #ccc; }
  .sez--pozzo, .sez--pannello, .pannello-div, .settore, .dato, .casa, .riquadro { background: #fff; }
  .matrice { min-width: 0; font-size: 9.5pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; }
  .pie { background: #fff; }
}