/* ==========================================================================
   aequitron - Quaderno tecnico
   Foglio da disegno: bianco carta, grafite, una sola matita blu.
   CSS scritto a mano. Nessun framework.
   ========================================================================== */

:root {
  /* Inchiostri */
  --ink:        #17181b;   /* testo primario, mai nero puro */
  --graphite:   #3f4045;   /* testo secondario, grigio di contesto */
  --pencil:     #6f7075;   /* note, metadati */
  --faint:      #b9bbc0;   /* riferimenti spenti */

  /* Superfici */
  --sheet:      #f4f4f2;   /* piano di lavoro */
  --paper:      #ffffff;   /* foglio da disegno */

  /* Tratti */
  --rule:       rgba(23, 24, 27, 0.14);
  --rule-soft:  rgba(23, 24, 27, 0.07);

  /* Unico accento tecnico: matita blu */
  --blu:        #1d4ed8;
  --blu-ink:    #1a3fa8;
  --blu-wash:   rgba(29, 78, 216, 0.08);

  /* Reticolo millimetrato */
  --mm:         5mm;
  --cm:         25mm;

  /* Caratteri */
  --display: "Roboto Slab", Georgia, serif;
  --testo:   "Recursive", ui-sans-serif, system-ui, sans-serif;
  --misura:  "Kode Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scala tipografica fluida */
  --t-quota:  clamp(0.625rem, 0.58rem + 0.2vw, 0.72rem);
  --t-nota:   clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --t-testo:  clamp(1rem, 0.96rem + 0.22vw, 1.09rem);
  --t-lead:   clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  --t-h3:     clamp(1.15rem, 1.02rem + 0.6vw, 1.45rem);
  --t-h2:     clamp(1.7rem, 1.25rem + 2.1vw, 3rem);
  --t-h1:     clamp(2.4rem, 1.4rem + 4.6vw, 5.4rem);
  --t-cifra:  clamp(2.6rem, 1.6rem + 4.4vw, 5rem);

  /* Ritmo */
  --margine:  clamp(18px, 5vw, 84px);
  --salto-s:  clamp(28px, 4vw, 48px);
  --salto:    clamp(52px, 7vw, 104px);
  --salto-l:  clamp(72px, 10vw, 150px);

  /* Spigoli vivi: è un disegno tecnico, non una app */
  --raggio: 0;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--sheet);
  color: var(--ink);
  font-family: var(--testo);
  font-size: var(--t-testo);
  font-variation-settings: "MONO" 0, "CASL" 0, "slnt" 0, "CRSV" 0;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* --- Reticolo millimetrato: il foglio su cui tutto è disegnato ------------ */
.foglio {
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg,  var(--rule-soft) 0 0.5px, transparent 0.5px var(--mm)),
    repeating-linear-gradient(90deg, var(--rule-soft) 0 0.5px, transparent 0.5px var(--mm)),
    repeating-linear-gradient(0deg,  var(--rule) 0 0.5px, transparent 0.5px var(--cm)),
    repeating-linear-gradient(90deg, var(--rule) 0 0.5px, transparent 0.5px var(--cm));
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blu-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--blu); }

:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: 2px;
}

.salta-al-contenuto {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--ink); color: #fff; padding: 10px 16px;
  font-family: var(--misura); font-size: var(--t-quota);
}
.salta-al-contenuto:focus { left: 0; }

/* ==========================================================================
   Tipografia
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

/* Quota: la scritta a fianco della linea di misura */
.quota {
  font-family: var(--misura);
  font-size: var(--t-quota);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pencil);
}
.quota--blu { color: var(--blu); }

.misura {
  font-family: var(--misura);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.42;
  color: var(--graphite);
  max-width: 46ch;
}

/* ==========================================================================
   Struttura di pagina
   ========================================================================== */

.striscia { padding-inline: var(--margine); }

main { display: block; }

section { position: relative; }

/* Linea di riferimento orizzontale fra le sezioni */
.riga-riferimento {
  border: 0;
  border-top: 0.5px solid var(--rule);
  margin: 0;
}

/* ==========================================================================
   Testata: cartiglio in alto
   ========================================================================== */

.testata {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 0.5px solid var(--rule);
}

.testata__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding-inline: var(--margine);
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
}
.marchio svg { display: block; }
.marchio__nome {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}
.marchio__coda {
  font-family: var(--misura);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pencil);
  padding-left: 9px;
  margin-left: 2px;
  border-left: 0.5px solid var(--rule);
}

.navigazione { display: none; }
.navigazione ul {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigazione a {
  font-family: var(--misura);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color 140ms ease, color 140ms ease;
}
.navigazione a:hover { color: var(--ink); border-bottom-color: var(--blu); }
.navigazione a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.apri-menu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--misura);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.apri-menu__tratti { display: grid; gap: 3.5px; }
.apri-menu__tratti i { display: block; width: 19px; height: 1.5px; background: var(--ink); }

.menu-mobile {
  border-top: 0.5px solid var(--rule);
  background: var(--paper);
  padding: 10px var(--margine) 22px;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile li { border-bottom: 0.5px solid var(--rule-soft); }
.menu-mobile a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.menu-mobile a::before {
  content: attr(data-n);
  font-family: var(--misura);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--faint);
}

@media (min-width: 62rem) {
  .navigazione { display: block; }
  .apri-menu, .menu-mobile { display: none; }
}

/* ==========================================================================
   Bottoni
   ========================================================================== */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 22px;
  border-radius: var(--raggio);
  font-family: var(--misura);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: #fff;
  transition: transform 120ms ease, background-color 140ms ease, color 140ms ease;
}
.bottone:hover { background: var(--blu-ink); border-color: var(--blu-ink); color: #fff; }
.bottone:active { transform: translateY(1px); }

.bottone--tratteggio {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.bottone--tratteggio:hover { background: var(--ink); color: #fff; }

.bottone--store {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.bottone--store:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.bottone--store svg { flex: none; }

/* ==========================================================================
   1. Hero
   ========================================================================== */

.hero {
  padding-block: clamp(40px, 7vw, 88px) clamp(44px, 7vw, 96px);
  border-bottom: 0.5px solid var(--rule);
}

.hero__impianto {
  display: grid;
  gap: clamp(30px, 5vw, 56px);
  align-items: end;
}

.hero h1 {
  font-size: var(--t-h1);
  letter-spacing: -0.045em;
  line-height: 0.94;
  max-width: 13ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--blu);
  /* sottolineato come una quota tracciata a mano */
  background-image: linear-gradient(var(--blu), var(--blu));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 2px;
  padding-bottom: 2px;
}

/* Il titolo ha line-height 0.94 e la quota blu sotto "misura" occupa spazio:
   il lead deve staccarsi, altrimenti ci va a sbattere. */
.hero .lead { margin-top: clamp(22px, 3vw, 36px); }

.hero__comandi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 34px);
}

.hero__fiducia {
  margin-top: clamp(20px, 2.6vw, 30px);
  padding-top: 14px;
  border-top: 0.5px solid var(--rule);
  font-family: var(--misura);
  font-size: var(--t-quota);
  letter-spacing: 0.06em;
  color: var(--pencil);
  max-width: 44ch;
  line-height: 1.7;
}
.hero__fiducia b { color: var(--ink); font-weight: 600; }

.hero__disegno {
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.7);
  padding: clamp(14px, 2vw, 22px);
}
.hero__disegno svg { width: 100%; height: auto; }
.hero__disegno figcaption {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 0.5px dashed var(--rule);
  font-family: var(--misura);
  font-size: var(--t-quota);
  letter-spacing: 0.04em;
  color: var(--pencil);
  line-height: 1.75;
  max-width: 62ch;
}

/* Collage delle cinque tavole nella testata: un foglio di tavole quotate */
.hero__collage { padding: clamp(10px, 1.5vw, 16px); }
.collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 0.9vw, 10px);
}
.tav {
  position: relative;
  display: block;
  border: 0.5px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
  text-decoration: none;
}
.tav--largo { grid-column: 1 / -1; }
.tav img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}
/* Cartiglio della tavola, in basso a sinistra come un blocco titolo */
.tav__targa {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 9px;
  font-family: var(--misura);
  font-size: 10px;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
  border-top: 0.5px solid var(--rule);
  border-right: 0.5px solid var(--rule);
}
.tav__targa b { color: var(--blu); font-weight: 600; letter-spacing: 0.12em; }
.tav__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
  .tav { transition: transform 160ms ease; }
  .tav:hover { transform: translateY(-2px); }
  .tav:hover .tav__targa { color: var(--blu); }
}

@media (min-width: 62rem) {
  .hero__impianto { grid-template-columns: 1.08fr 0.92fr; }
}

/* ==========================================================================
   2. Chi misura - colonna stretta con nota a margine
   ========================================================================== */

.chi-misura { padding-block: var(--salto); }

.chi-misura__impianto {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
}

.chi-misura h2 {
  font-size: var(--t-h2);
  max-width: 15ch;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.chi-misura__testo { max-width: 60ch; color: var(--graphite); }
.chi-misura__testo strong { color: var(--ink); font-weight: 600; }

/* Nota a margine: il rettangolo con la graffa, come sul foglio */
.nota-margine {
  border-left: 2px solid var(--blu);
  background: var(--blu-wash);
  padding: clamp(16px, 2vw, 22px);
  align-self: start;
}
.nota-margine h3 {
  font-family: var(--misura);
  font-size: var(--t-quota);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blu-ink);
  margin-bottom: 10px;
}
.nota-margine p {
  font-size: var(--t-nota);
  line-height: 1.65;
  color: var(--graphite);
}

@media (min-width: 62rem) {
  .chi-misura__impianto { grid-template-columns: 1fr 320px; gap: clamp(40px, 6vw, 90px); }
}

/* ==========================================================================
   3. Metodo di misura - la riga graduata
   ========================================================================== */

.metodo {
  padding-block: var(--salto);
  border-block: 0.5px solid var(--rule);
  background: var(--sheet);
}

.metodo__intro { max-width: 62ch; margin-bottom: clamp(30px, 4vw, 48px); }
.metodo h2 { font-size: var(--t-h2); margin-bottom: 16px; max-width: 16ch; }
.metodo__intro p { color: var(--graphite); }

.righello {
  display: grid;
  gap: 0;
  border-top: 1.5px solid var(--ink);
}

.tacca {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 2.4vw, 30px);
  align-items: start;
  padding-block: clamp(18px, 2.4vw, 26px);
  border-bottom: 0.5px solid var(--rule);
}
.tacca__scala {
  font-family: var(--misura);
  font-size: var(--t-quota);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--blu);
  white-space: nowrap;
  padding-top: 4px;
}
.tacca h3 {
  font-size: var(--t-h3);
  margin-bottom: 7px;
}
.tacca p {
  font-size: var(--t-nota);
  color: var(--graphite);
  max-width: 64ch;
  margin: 0;
}

.metodo__somma {
  margin-top: clamp(26px, 3.4vw, 40px);
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1.5px solid var(--ink);
  background: var(--paper);
}
.metodo__somma p:not([class]) { font-size: var(--t-nota); color: var(--graphite); margin: 0; }
.metodo__formula {
  font-family: var(--misura);
  font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
@media (min-width: 48rem) {
  .metodo__somma { grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
}

/* ==========================================================================
   4. Schede tecniche - i pezzi a disegno
   ========================================================================== */

.schede { padding-block: var(--salto) var(--salto-l); }

.schede__testata {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(32px, 4.5vw, 56px);
  max-width: 62ch;
}
.schede__testata h2 { font-size: var(--t-h2); }
.schede__testata p { color: var(--graphite); }

.pila-schede { display: grid; gap: clamp(44px, 6vw, 82px); }

.scheda {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  display: grid;
}

/* Cartiglio della scheda: numero pezzo + denominazione, come sul cartiglio ISO */
.scheda__cartiglio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  padding: 12px clamp(16px, 2.4vw, 26px);
  border-bottom: 1.5px solid var(--ink);
  background: var(--ink);
  color: #fff;
}
.scheda__numero {
  font-family: var(--misura);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #fff;
}
.scheda__denominazione {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}
.scheda__studio {
  font-family: var(--misura);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-left: auto;
}

.scheda__corpo {
  display: grid;
  gap: 0;
}

.scheda__vista {
  border-bottom: 0.5px solid var(--rule);
  padding: clamp(16px, 2.2vw, 24px);
  background:
    repeating-linear-gradient(0deg,  var(--rule-soft) 0 0.5px, transparent 0.5px var(--mm)),
    repeating-linear-gradient(90deg, var(--rule-soft) 0 0.5px, transparent 0.5px var(--mm));
}
.scheda__vista img {
  width: 100%;
  border: 0.5px solid var(--rule);
  background: var(--paper);
}
.scheda__vista figcaption {
  margin-top: 10px;
  font-family: var(--misura);
  font-size: var(--t-quota);
  color: var(--pencil);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.scheda__relazione { padding: clamp(18px, 2.6vw, 30px); }
.scheda__gancio {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.22;
  margin: 0 0 14px;
  max-width: 34ch;
}
.scheda__relazione p:not([class]) { font-size: var(--t-nota); color: var(--graphite); }

/* Rilievo: le quote in colonna, mono */
.rilievo {
  border-top: 0.5px solid var(--rule);
  padding: clamp(16px, 2.2vw, 24px);
  display: grid;
  gap: 0;
  align-content: start;
}
.rilievo__voce {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding-block: 9px;
  border-bottom: 0.5px dotted var(--rule);
}
.rilievo__voce:last-child { border-bottom: 0; }
.rilievo__etichetta {
  font-family: var(--misura);
  font-size: var(--t-quota);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pencil);
}
.rilievo__valore {
  font-family: var(--misura);
  font-size: var(--t-nota);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
}
.rilievo__valore small {
  display: block;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--pencil);
  text-transform: uppercase;
}

/* Tolleranza: il quadrante della scheda */
.tolleranza {
  padding: clamp(16px, 2.2vw, 24px);
  border-top: 1.5px solid var(--ink);
  display: grid;
  gap: 14px;
}
.tolleranza__cifra {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.tolleranza__cifra b {
  font-family: var(--display);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.86;
  color: var(--blu);
  font-variant-numeric: tabular-nums;
}
.tolleranza__cifra span {
  font-family: var(--misura);
  font-size: var(--t-quota);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pencil);
}

/* Scomposizione del punteggio: 5 criteri x 0-2 */
.scomposizione { display: grid; gap: 7px; }
.scomposizione__riga {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.scomposizione__nome {
  font-family: var(--misura);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--graphite);
}
.punti { display: flex; gap: 3px; }
.punti i {
  display: block;
  width: 13px;
  height: 5px;
  background: var(--faint);
}
.punti i.acceso { background: var(--blu); }

/* L'unica riserva: sempre presente, sempre visibile */
.riserva {
  border-top: 0.5px solid var(--rule);
  padding: clamp(16px, 2.2vw, 24px);
  background: var(--sheet);
}
.riserva__titolo {
  font-family: var(--misura);
  font-size: var(--t-quota);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.riserva__titolo::before {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--blu);
  flex: none;
}
.riserva p:not([class]) { font-size: var(--t-nota); color: var(--graphite); margin: 0; max-width: 70ch; }

.scheda__storia {
  border-top: 0.5px solid var(--rule);
  padding: clamp(16px, 2.2vw, 24px);
}
.scheda__storia h4 {
  font-family: var(--misura);
  font-size: var(--t-quota);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-bottom: 9px;
}
.scheda__storia p { font-size: var(--t-nota); color: var(--graphite); }

.scheda__pulsantiera {
  border-top: 0.5px solid var(--rule);
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.2vw, 24px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.scheda__solo-una {
  font-family: var(--misura);
  font-size: var(--t-quota);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pencil);
}
.scheda__approfondimento {
  margin-left: auto;
  font-family: var(--misura);
  font-size: var(--t-quota);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Sopra i 62rem le schede si aprono in due colonne; l'altezza resta diseguale
   perché i testi hanno lunghezze diverse - è voluto. */
@media (min-width: 62rem) {
  .scheda__corpo { grid-template-columns: 1.25fr 0.75fr; }
  .scheda__vista { border-bottom: 0; border-right: 0.5px solid var(--rule); grid-row: 1 / -1; }
  .rilievo { border-top: 0; border-left: 0; }
  .tolleranza { grid-column: 2; }
  .scheda--rovescia .scheda__vista { grid-column: 2; grid-row: 1 / -1; border-right: 0; border-left: 0.5px solid var(--rule); }
  .scheda--rovescia .scheda__relazione { grid-column: 1; grid-row: 1; }
  .scheda--rovescia .rilievo { grid-column: 1; grid-row: 2; border-top: 0.5px solid var(--rule); }
  .scheda--rovescia .tolleranza { grid-column: 1; grid-row: 3; }
  .scheda--rovescia .scheda__corpo { grid-template-columns: 0.75fr 1.25fr; }
}

/* ==========================================================================
   5. Banco di prova - la tabella strumentale
   ========================================================================== */

.banco {
  padding-block: var(--salto);
  border-block: 1.5px solid var(--ink);
  background: var(--sheet);
}

.banco__testata { margin-bottom: clamp(26px, 3.4vw, 40px); max-width: 64ch; }
.banco h2 { font-size: var(--t-h2); margin-bottom: 14px; }
.banco__testata p { color: var(--graphite); }

.banco__telaio { overflow-x: auto; border: 1px solid var(--ink); background: var(--paper); }

.prova {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
  font-size: var(--t-nota);
}
.prova caption {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--misura);
  font-size: var(--t-quota);
  letter-spacing: 0.1em;
  color: var(--pencil);
  line-height: 1.7;
}
.prova th, .prova td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 0.5px solid var(--rule);
  vertical-align: middle;
}
.prova thead th {
  font-family: var(--misura);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pencil);
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.prova tbody tr:last-child th, .prova tbody tr:last-child td { border-bottom: 0; }
.prova tbody tr:hover { background: var(--blu-wash); }
.prova tbody th {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.prova tbody th small {
  display: block;
  font-family: var(--misura);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 3px;
}
.prova td { font-family: var(--misura); font-variant-numeric: tabular-nums; color: var(--graphite); }
.prova .stor {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pencil);
}

/* La barra: un tratto di penna, senza binario di fondo */
.barra {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 168px;
}
.barra__tratto {
  position: relative;
  height: 9px;
  flex: 1;
  border-bottom: 0.5px solid var(--rule);
}
.barra__tratto i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 9px;
  background: var(--blu);
  width: var(--w);
  transform-origin: left center;
}
.barra__valore {
  font-family: var(--misura);
  font-weight: 600;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 3.4em;
}
.barra__valore span { color: var(--faint); font-weight: 400; }

/* Il plotter traccia la misura una volta sola, quando la riga entra in campo. */
@media (prefers-reduced-motion: no-preference) {
  .banco--traccia .barra__tratto i { transform: scaleX(0); }
  .banco--traccia.in-campo .barra__tratto i {
    transform: scaleX(1);
    transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .banco--traccia.in-campo tbody tr:nth-child(1) .barra__tratto i { transition-delay: 40ms; }
  .banco--traccia.in-campo tbody tr:nth-child(2) .barra__tratto i { transition-delay: 100ms; }
  .banco--traccia.in-campo tbody tr:nth-child(3) .barra__tratto i { transition-delay: 160ms; }
  .banco--traccia.in-campo tbody tr:nth-child(4) .barra__tratto i { transition-delay: 220ms; }
  .banco--traccia.in-campo tbody tr:nth-child(5) .barra__tratto i { transition-delay: 280ms; }
}

/* Richiamo di quota: la sola divergenza fra i due store che possiamo documentare */
.richiamo {
  margin-top: clamp(18px, 2.4vw, 26px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--blu);
  background: var(--blu-wash);
  padding: clamp(14px, 2vw, 20px);
}
.richiamo__segno {
  font-family: var(--misura);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--blu-ink);
  border: 1px solid var(--blu);
  padding: 3px 7px;
  white-space: nowrap;
}
/* Il richiamo e' largo quanto il telaio: il testo non deve rannicchiarsi
   a sinistra lasciando mezzo riquadro vuoto. */
.richiamo p { font-size: var(--t-nota); color: var(--graphite); margin: 0; max-width: 104ch; }
.richiamo b { color: var(--ink); font-weight: 600; }

.banco__scala {
  margin-top: 14px;
  font-family: var(--misura);
  font-size: var(--t-quota);
  color: var(--pencil);
  letter-spacing: 0.05em;
  line-height: 1.7;
}

/* ==========================================================================
   6. Pezzo migliore - dichiarazione singola
   ========================================================================== */

.pezzo {
  padding-block: var(--salto-l);
  background: var(--ink);
  color: #fff;
}
.pezzo__impianto { display: grid; gap: clamp(22px, 3vw, 40px); align-items: center; }
.pezzo .quota { color: rgba(255, 255, 255, 0.55); }
.pezzo__cifra {
  font-family: var(--display);
  font-size: var(--t-cifra);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.8;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pezzo__cifra span { color: rgba(255, 255, 255, 0.36); }
.pezzo h2 {
  font-size: clamp(1.6rem, 1.15rem + 2vw, 2.7rem);
  color: #fff;
  margin-block: 10px 16px;
  max-width: 18ch;
}
/* Solo il paragrafo di testo: la cifra e la quota hanno una scala propria e
   non devono essere schiacciate da questa regola. */
.pezzo p:not([class]) { color: rgba(255, 255, 255, 0.74); max-width: 56ch; font-size: var(--t-nota); }
.pezzo__comandi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pezzo .bottone {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.pezzo .bottone:hover { background: var(--blu); border-color: var(--blu); color: #fff; }
.pezzo .bottone--tratteggio {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}
.pezzo .bottone--tratteggio:hover { background: #fff; color: var(--ink); border-color: #fff; }

@media (min-width: 55rem) {
  .pezzo__impianto { grid-template-columns: auto 1fr; gap: clamp(40px, 6vw, 84px); }
}

/* ==========================================================================
   7. Note a matita
   ========================================================================== */

.note { padding-block: var(--salto); }
.note h2 { font-size: var(--t-h2); margin-bottom: clamp(28px, 3.6vw, 44px); max-width: 14ch; }

.note__pila { display: grid; gap: clamp(28px, 3.6vw, 46px); }

.nota {
  display: grid;
  gap: 12px;
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1.5px solid var(--ink);
}
.nota__data {
  font-family: var(--misura);
  font-size: var(--t-quota);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blu);
}
.nota h3 { font-size: var(--t-h3); max-width: 26ch; }
.nota__corpo { color: var(--graphite); }
.nota__corpo p { font-size: var(--t-nota); }
.nota__corpo strong { color: var(--ink); font-weight: 600; }

@media (min-width: 62rem) {
  .nota { grid-template-columns: 190px 1fr; gap: clamp(24px, 4vw, 54px); align-items: start; }
  .nota__data { padding-top: 5px; }
  .nota h3 { grid-column: 2; }
  .nota__corpo { grid-column: 2; }
  /* La seconda nota rientra: il quaderno non è impaginato al millimetro. */
  .note__pila > .nota:nth-child(2) { margin-left: clamp(0px, 6vw, 96px); }
}

/* ==========================================================================
   8. FAQ
   ========================================================================== */

.faq {
  padding-block: var(--salto);
  border-top: 0.5px solid var(--rule);
  background: var(--sheet);
}
.faq h2 { font-size: var(--t-h2); margin-bottom: clamp(24px, 3vw, 38px); max-width: 16ch; }

.faq__elenco { border-top: 1.5px solid var(--ink); max-width: 82ch; }

.domanda { border-bottom: 0.5px solid var(--rule); }
.domanda summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(15px, 2vw, 20px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.18rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--misura);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--blu);
  flex: none;
  transition: transform 160ms ease;
}
.domanda[open] summary::after { content: "-"; }
.domanda summary:hover { color: var(--blu-ink); }
.domanda__risposta { padding: 0 0 clamp(18px, 2.4vw, 24px); }
.domanda__risposta p { font-size: var(--t-nota); color: var(--graphite); max-width: 68ch; }

/* ==========================================================================
   Moduli
   ========================================================================== */

.modulo { display: grid; gap: 20px; max-width: 34rem; }

.campo { display: grid; gap: 7px; }
.campo label {
  font-family: var(--misura);
  font-size: var(--t-quota);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.campo__aiuto {
  font-family: var(--testo);
  font-size: 0.76rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pencil);
  font-weight: 400;
}
.campo input[type="text"],
.campo input[type="email"],
.campo textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--graphite);
  border-radius: var(--raggio);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--testo);
  font-size: 1rem;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.campo textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--pencil); }
.campo input:focus, .campo textarea:focus {
  outline: 0;
  border-color: var(--blu);
  box-shadow: inset 0 0 0 1px var(--blu);
}

.consenso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  padding-top: 4px;
}
.consenso input {
  width: 19px; height: 19px;
  margin: 3px 0 0;
  accent-color: var(--blu);
  flex: none;
}
.consenso label {
  font-family: var(--testo);
  font-size: 0.84rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--graphite);
  line-height: 1.55;
}

.modulo__nota {
  font-family: var(--misura);
  font-size: var(--t-quota);
  color: var(--pencil);
  letter-spacing: 0.04em;
  line-height: 1.7;
  border-top: 0.5px solid var(--rule);
  padding-top: 13px;
}

/* ==========================================================================
   Pagine interne
   ========================================================================== */

.foglio-interno { padding-block: clamp(38px, 5.5vw, 74px) var(--salto); }
.foglio-interno h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); max-width: 17ch; }
.foglio-interno .lead { margin-top: 18px; max-width: 56ch; }

.testo-lungo { max-width: 68ch; margin-top: clamp(30px, 4vw, 48px); }
.testo-lungo h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  margin: clamp(32px, 4vw, 48px) 0 12px;
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid var(--ink);
}
.testo-lungo h3 {
  font-size: var(--t-h3);
  margin: clamp(22px, 2.6vw, 30px) 0 9px;
}
.testo-lungo p, .testo-lungo li { color: var(--graphite); font-size: var(--t-nota); }
.testo-lungo ul, .testo-lungo ol { padding-left: 1.15em; margin: 0 0 1em; }
.testo-lungo li { margin-bottom: 0.45em; }
.testo-lungo li::marker { color: var(--blu); }
.testo-lungo strong { color: var(--ink); font-weight: 600; }
.testo-lungo a { color: var(--blu-ink); }

.aggiornato {
  font-family: var(--misura);
  font-size: var(--t-quota);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-top: 16px;
}

/* 404 */
.errore { padding-block: clamp(60px, 12vw, 150px); text-align: left; }
.errore__cifra {
  font-family: var(--display);
  font-size: clamp(4.5rem, 2rem + 15vw, 12rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.78;
  color: var(--ink);
}
.errore__cifra span { color: var(--blu); }
.errore h1 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem); margin: clamp(18px, 2.4vw, 28px) 0 14px; max-width: 20ch; }
.errore p:not([class]) { color: var(--graphite); max-width: 52ch; }
.errore .bottone { margin-top: 26px; }

/* Ricevuta (grazie.html) */
.ricevuta {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  padding: clamp(22px, 3.4vw, 44px);
  max-width: 44rem;
  margin-top: clamp(26px, 3.4vw, 40px);
}
.ricevuta h2 { font-size: var(--t-h3); margin-bottom: 12px; }
.ricevuta p { font-size: var(--t-nota); color: var(--graphite); }
.ricevuta__comandi { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px; }

/* ==========================================================================
   Piede: il cartiglio del disegno
   ========================================================================== */

.piede {
  border-top: 1.5px solid var(--ink);
  background: var(--paper);
  padding-block: clamp(34px, 4.5vw, 58px) clamp(22px, 3vw, 32px);
}

.piede__impianto {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
}

.piede__marchio .marchio__nome { font-size: 1.3rem; }
.piede__firma {
  margin-top: 12px;
  font-size: var(--t-nota);
  color: var(--graphite);
  max-width: 40ch;
}
.piede__posta {
  margin-top: 14px;
  font-family: var(--misura);
  font-size: var(--t-nota);
  display: block;
}

.piede__colonne { display: grid; gap: 26px; }
.piede h2 {
  font-family: var(--misura);
  font-size: var(--t-quota);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-bottom: 12px;
}
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.piede ul a {
  font-size: var(--t-nota);
  color: var(--graphite);
  text-decoration: none;
}
.piede ul a:hover { color: var(--blu); text-decoration: underline; }

/* La riga che non cambia mai: zero scommesse */
.piede__zero {
  margin-top: clamp(28px, 3.6vw, 40px);
  padding: 12px 0;
  border-block: 1.5px solid var(--ink);
  font-family: var(--misura);
  font-size: clamp(0.72rem, 0.66rem + 0.3vw, 0.86rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.piede__legale {
  margin-top: clamp(18px, 2.4vw, 26px);
  display: grid;
  gap: 14px;
}
.piede__disclaimer {
  font-size: 0.72rem;
  line-height: 1.72;
  color: var(--pencil);
  max-width: 92ch;
  margin: 0;
}
.piede__copyright {
  font-family: var(--misura);
  font-size: var(--t-quota);
  letter-spacing: 0.08em;
  color: var(--faint);
  text-transform: uppercase;
}

@media (min-width: 48rem) {
  .piede__colonne { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 62rem) {
  .piede__impianto { grid-template-columns: 1fr 1.35fr; gap: clamp(40px, 6vw, 96px); }
}

/* ==========================================================================
   Rivelo al primo scorrimento: un solo movimento, motivato.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .rivela {
    opacity: 0;
    transform: translateY(14px);
  }
  .rivela.in-campo {
    opacity: 1;
    transform: none;
    transition: opacity 520ms ease-out, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}