/* ============================================================
   ERGANE — page-ergane.css
   Marchio ospite dentro il sito NetSource.
   La shell (topbar, footer) resta NetSource: scura, Poppins, ciano.
   Il <main> è il mondo ERGANE: bianco, Fjalla One + Archivo, minio.
   Nessun token ERGANE esce da questo file; nessun token NS entra
   nel corpo della pagina (regola PRODUCT.md, "due identità distinte").

   Grammatica visiva = quella del dépliant A5 già approvato
   (FocasTest/documenti/marketing/depliant-a5.html):
   disegno tecnico a tratto su bianco, screenshot veri dell'UI dentro un
   filo grigio, punti marcati dal simbolo, il blocco nero dei tre rifiuti,
   la barra minio spessa sotto l'offerta. Niente fotografia d'atmosfera.
   ============================================================ */

/* ------------------------------------------------------------
   Section 1: Font face — self-hosted (CSP font-src 'self')
   Fjalla One = il marchio e i titoli (rapporto misurato 3.40)
   Archivo    = testo corrente, cifre tabellari
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Fjalla One';
  src: url('/assets/fonts/fjalla-one/fjalla-one-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fjalla One';
  src: url('/assets/fonts/fjalla-one/fjalla-one-400-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo/archivo-var.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo/archivo-var-ext.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------
   Section 2: Token ERGANE — allineati 1:1 all'applicazione
   (FocasTest/ergane/src/ch/nsource/ergane/config/Theme.java, mappa CSS).
   Corrispondenze: minio=--teal · minio-chiaro=--teal-bright ·
   minio-scuro=--teal-dark · minio-profondo=--teal-deep · ink=--ink ·
   superficie=--line · acciaio=--mut · nebbia=--paper ·
   run=--ok · idle=--amber · alarm=--red.
   Contrasti verificati: ink/bianco 16.3:1 · acciaio/bianco 6.28:1
   minio-scuro/bianco 6.72:1 (titoli e link) · bianco/minio 4.83:1
   ⚠ il minio pieno su bianco è 4.83:1: bene per titoli e segni,
   per il testo corrente si usa minio-scuro.

   Minio e inchiostro sono presi dall'artwork DEF del logo
   (documenti/brand/logo, 24 lug): rgb(78.56%,25.05%,14.60%) = #C84025 e
   rgb(13.73%,12.16%,12.55%) = #231F20. Il foglio marchio scrive a
   fianco dei campioni #C8461E e #332F2E, ma i campioni stessi e i
   tracciati del logo dicono altro: vince il disegno, non l'etichetta.
   Il grigio resta il RAL 7035 dell'app (il foglio non lo usa nel logo).
   ------------------------------------------------------------ */
.erg {
  --erg-minio: #C84025;         /* l'antiruggine — l'asset distintivo */
  --erg-minio-chiaro: #E46D56;  /* solo su fondo scuro */
  --erg-minio-scuro: #A6341A;   /* testo e titoli su bianco */
  --erg-minio-profondo: #8D2511;/* fondi pieni profondi (sidebar app) */
  --erg-ink: #231F20;           /* il nero del quadro elettrico */
  --erg-superficie: #D7D7D7;    /* RAL 7035: i fili, i bordi */
  --erg-acciaio: #5B6165;       /* il testo corrente */
  --erg-nebbia: #F1F2F2;        /* il fondo delle note */
  --erg-white: #FFFFFF;

  /* stati macchina = colori della colonna luminosa. Dati, mai marca. */
  --erg-run: #2E7D46;
  --erg-idle: #E08A00;
  --erg-alarm: #C0392B;
  --erg-off: #D7D7D7;

  --erg-pad: clamp(1.25rem, 5vw, 4rem);
  --erg-sec: clamp(3rem, 7vw, 5.5rem);
  --erg-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Il corpo pagina ribalta la shell scura di base.css */
body.erg {
  background: var(--erg-white);
  color: var(--erg-ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.erg main { font-size: clamp(1rem, 1.05vw, 1.0625rem); line-height: 1.55; }
.erg ::selection { background: var(--erg-minio); color: #fff; }

/* La shell resta NetSource, e va ri-affermata: base.css la fa dipendere dal
   <body> scuro (topbar semitrasparente, footer senza sfondo proprio). Sopra il
   bianco di ERGANE la topbar sbiadiva in grigio e il footer diventava bianco
   con il logo bianco sopra — invisibile. Qui le si rimette il fondo del sito. */
.erg .topbar {
  background: var(--bg);
  backdrop-filter: none;
  color: var(--fg);
  font-family: var(--font-sans);
}
.erg footer {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-variant-numeric: normal;
  border-top: none;
}
.erg .nav-mobile { background: var(--bg); color: var(--fg); font-family: var(--font-sans); }
.erg .skip-link { font-family: var(--font-sans); }

.erg-frame { max-width: 64rem; margin: 0 auto; padding: 0 var(--erg-pad); }
.erg-sec { padding: var(--erg-sec) 0; }
.erg-sec + .erg-sec { border-top: 1px solid var(--erg-superficie); }

.erg h1, .erg h2, .erg h3, .erg .erg-k {
  font-family: 'Fjalla One', 'Bebas Neue', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: -.004em;
  text-wrap: balance;
}
/* Il taglio del dépliant: prima riga inchiostro, seconda riga minio scuro. */
.erg h1 em, .erg h2 em { font-style: normal; color: var(--erg-minio-scuro); display: block; }
/* Fjalla One ha maiuscole alte E discendenti lunghe: fra una riga che finisce
   in «g»/«q» e la successiva che apre con una maiuscola servono ~1.2, non 1.12.
   Sotto quella soglia «ogni macchina.» tocca «Anche il» sopra. */
.erg h2 { font-size: clamp(1.625rem, 3.2vw, 2.375rem); line-height: 1.2; max-width: 20ch; }
.erg h3 { font-size: 1.125rem; line-height: 1.22; margin-bottom: .25rem; }
.erg p { color: var(--erg-acciaio); max-width: 64ch; text-wrap: pretty; }
.erg main strong, .erg main b { font-weight: 600; color: var(--erg-ink); }
.erg .erg-occhiello { margin-top: .9rem; font-size: clamp(1rem, 1.3vw, 1.0625rem); line-height: 1.5; max-width: 58ch; }
.erg .erg-occhiello strong { color: var(--erg-ink); }
.erg .erg-note { font-size: .8125rem; line-height: 1.45; color: var(--erg-acciaio); max-width: 72ch; }

/* ------------------------------------------------------------
   Section 3: Hero — la copertina del dépliant, in pagina
   ------------------------------------------------------------ */
/* Due colonne: a sinistra la voce (marchio, claim, offerta), a destra il
   disegno che la dimostra. Impilate, il disegno lasciava mezzo schermo bianco
   e spingeva la CTA sotto la piega. */
.erg-hero { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 clamp(1.75rem, 3.5vw, 2.75rem); }
.erg-hero .erg-frame {
  display: grid;
  /* la colonna di sinistra deve reggere i due bottoni in riga: sotto i ~26rem
     "Provi a collegare la più vecchia" manda a capo il secondo */
  grid-template-columns: minmax(26rem, 1fr) minmax(0, 1.25fr);
  column-gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
}
.erg-hero-text { max-width: 36rem; }

/* Il lockup del foglio marchio: marchio + slogan. Lo slogan è parte del
   marchio, non copy: si scrive sempre uguale, sotto il logo orizzontale.
   Il taglio Thin del foglio non è spedibile — l'Archivo variabile
   self-hosted copre 400–600 — quindi 400 maiuscolo spaziato è la resa
   più vicina senza aggiungere un altro woff2. */
.erg-lockup { margin-bottom: clamp(1rem, 2vw, 1.35rem); }
/* il marchio DEF è più leggero del precedente (corna a tratto, non un disco
   pieno): alla larghezza vecchia il simbolo spariva. Qui torna a scala di
   copertina, e lo slogan sotto ci sta dentro. */
.erg-hero-logo { display: block; width: clamp(10rem, 13vw, 13rem); height: auto; }
.erg-slogan {
  margin-top: .55rem;
  font-size: clamp(.5625rem, .72vw, .6875rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--erg-acciaio);
}
/* A chi parla il dépliant, detto subito sotto il titolo */
.erg-target {
  margin-top: .9rem;
  font-size: .875rem;
  letter-spacing: .02em;
  color: var(--erg-acciaio);
}
.erg-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  /* alla misura del titolo la collisione è la stessa dell'h2, ma più visibile:
     «Sa quanto gira / ogni macchina. / Anche il ferro del '95.» si toccava a 1.08 */
  line-height: 1.18;
  max-width: 15ch;
}
.erg-hero .erg-occhiello { color: var(--erg-ink); max-width: 40ch; }
.erg-hero-art { margin: 0; }
.erg-hero-art img { width: 100%; height: auto; display: block; }
.erg-hero-art figcaption {
  border-top: 1px solid var(--erg-superficie);
  padding-top: .75rem; margin-top: .5rem;
  font-size: .8125rem; line-height: 1.45; color: var(--erg-acciaio);
}
.erg-hero-art figcaption strong { color: var(--erg-ink); }

.erg-hero-cta { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: clamp(1.5rem, 3vw, 2rem); }

/* Il piede della copertina: barra minio spessa sotto tutte e due le colonne */
.erg-hero-foot {
  grid-column: 1 / -1;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-top: clamp(1rem, 2vw, 1.25rem);
  border-top: 4px solid var(--erg-minio);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  align-items: baseline; justify-content: space-between;
}
.erg-cat { text-align: right; font-size: .8125rem; line-height: 1.5; color: var(--erg-acciaio); }
.erg-cat strong { display: block; color: var(--erg-ink); font-size: .9375rem; }
.erg-cat span { display: block; }
.erg-hero-claim { font-family: 'Fjalla One', system-ui, sans-serif; font-size: 1rem; letter-spacing: .01em; color: var(--erg-ink); }
.erg-hero-claim em { font-style: normal; color: var(--erg-minio-scuro); }

/* Bottoni ERGANE (non ereditano .btn di NetSource) */
.erg-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.35rem;
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .9375rem;
  border-radius: 2px;
  transition: background .18s var(--erg-ease), color .18s var(--erg-ease), border-color .18s var(--erg-ease), transform .18s var(--erg-ease);
}
.erg-btn-primary { background: var(--erg-minio); color: #fff; border: 2px solid var(--erg-minio); }
.erg-btn-primary:hover { background: var(--erg-minio-scuro); border-color: var(--erg-minio-scuro); transform: translateY(-1px); }
.erg-btn-ink { border: 2px solid var(--erg-ink); color: var(--erg-ink); }
.erg-btn-ink:hover { background: var(--erg-ink); color: #fff; }
.erg-btn-ghost { border: 2px solid rgba(255,255,255,.5); color: #fff; }
.erg-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ------------------------------------------------------------
   Section 4: Fascia categoria — il minio porta la marca
   ------------------------------------------------------------ */
.erg-band { background: var(--erg-minio); color: #fff; padding: clamp(2.5rem, 5vw, 3.75rem) 0; }
.erg-band .erg-k { font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.2; max-width: 24ch; }
/* bianco pieno, non 94%: sotto quella soglia il testo sul minio scende a 4.48:1 */
.erg-band p { color: #fff; max-width: 52ch; margin-top: .9rem; }
.erg-band strong { color: #fff; }

/* ------------------------------------------------------------
   Section 5: Figure — il filo grigio del dépliant
   ------------------------------------------------------------ */
.erg-fig { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.erg-fig img { width: 100%; height: auto; display: block; border: 1px solid var(--erg-superficie); }
.erg-fig.is-drawing img { border: none; max-width: 44rem; margin-inline: auto; }
.erg-fig figcaption { margin-top: .7rem; font-size: .8125rem; line-height: 1.45; color: var(--erg-acciaio); }
.erg-fig figcaption strong { color: var(--erg-ink); }
/* la testata dello Stato Live è una striscia: niente ritaglio, filo intorno */
.erg-fig.is-strip img { border: 1px solid var(--erg-superficie); }

/* il disegno a fianco dei punti: il '95 che si collega, e cosa ne esce */
.erg-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.erg-split .erg-punti { margin-top: 0; }
.erg-split .erg-fig.is-drawing img { max-width: 100%; }

/* Segnaposto: sta al posto di una schermata che non abbiamo ancora.
   Deliberatamente NON somiglia a un'interfaccia — un finto screenshot
   sarebbe peggio del vuoto. Si toglie sostituendo <div class="erg-ph">
   con la <figure class="erg-fig"> e la sua immagine. */
.erg-ph {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border: 2px dashed var(--erg-superficie);
  background: var(--erg-nebbia);
  min-height: 14rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: 2rem 1.5rem; text-align: center;
}
.erg-ph svg { width: 2rem; height: 2rem; color: var(--erg-superficie); }
.erg-ph b { font-family: 'Fjalla One', system-ui, sans-serif; font-weight: 400; font-size: 1rem; color: var(--erg-acciaio); }
.erg-ph span { font-size: .8125rem; color: var(--erg-acciaio); }

/* ------------------------------------------------------------
   Section 6: I punti — il simbolo fa da segno, come sul dépliant
   ------------------------------------------------------------ */
.erg-punti { margin-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--erg-superficie); }
.erg-punto {
  display: grid; grid-template-columns: 1.5rem 1fr; column-gap: 1rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--erg-superficie);
}
.erg-punto .erg-segno { width: 1.125rem; height: 1.125rem; margin-top: .2rem; color: var(--erg-minio); }
.erg-punto p { font-size: .9375rem; }

/* ------------------------------------------------------------
   Section 7: Il reparto in diretta — l'unica cosa che la carta non fa
   ------------------------------------------------------------ */
.erg-live { margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 2px solid var(--erg-ink); }
.erg-live-head,
.erg-row {
  display: grid;
  grid-template-columns: 1.6fr .9fr .7fr .8fr .9fr;
  gap: .75rem; align-items: center;
  padding: .85rem .25rem;
  border-bottom: 1px solid var(--erg-superficie);
}
.erg-live-head { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--erg-acciaio); padding-block: .55rem; }
.erg-mach { display: flex; align-items: baseline; gap: .55rem; min-width: 0; }
.erg-mach-name { font-weight: 600; color: var(--erg-ink); }
.erg-mach-ctrl { font-size: .75rem; color: var(--erg-acciaio); white-space: nowrap; }
.erg-state { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 500; color: var(--erg-ink); }
/* i colori della colonna luminosa non si cambiano: l'ambra su bianco fa 2.69:1,
   quindi il contorno (non il colore) porta il pallino sopra il 3:1 di 1.4.11.
   Lo stato è comunque scritto accanto: il colore non è mai l'unico segnale. */
.erg-dot { width: .625rem; height: .625rem; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(20,23,25,.35); }
.erg-dot[data-state="run"] { background: var(--erg-run); }
.erg-dot[data-state="idle"] { background: var(--erg-idle); }
.erg-dot[data-state="alarm"] { background: var(--erg-alarm); }
.erg-dot[data-state="off"] { background: var(--erg-off); }
.erg-num { font-weight: 500; color: var(--erg-ink); }
.erg-num small { color: var(--erg-acciaio); font-weight: 400; font-size: .75rem; margin-left: .15rem; }
.erg-live-foot { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; padding-top: .8rem; }
.erg-pulse { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--erg-acciaio); }
.erg-pulse i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--erg-run); animation: erg-pulse 1.8s ease-in-out infinite; }
@keyframes erg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ------------------------------------------------------------
   Section 8: La nota — il riquadro nebbia del dépliant
   ------------------------------------------------------------ */
/* .erg p (0-1-1) batte .erg-nota (0-1-0): la larghezza va rialzata qui */
.erg .erg-nota {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--erg-nebbia);
  padding: 1.25rem 1.5rem;
  font-size: .9375rem; line-height: 1.5; color: var(--erg-acciaio);
  max-width: 54rem;
}
.erg-nota strong { color: var(--erg-ink); }

/* ------------------------------------------------------------
   Section 9: I tre rifiuti — il blocco nero
   ------------------------------------------------------------ */
.erg-no { background: var(--erg-ink); color: var(--erg-superficie); padding: clamp(1.75rem, 3.5vw, 2.5rem) 0; }
.erg-no h2 { color: #fff; font-size: clamp(1.375rem, 2.6vw, 1.875rem); margin-bottom: 1.25rem; }
.erg-no ul { list-style: none; display: grid; gap: .9rem; max-width: 56rem; }
.erg-no li { position: relative; padding-left: 1.75rem; font-size: .9375rem; line-height: 1.5; color: var(--erg-superficie); }
.erg-no li::before { content: "—"; position: absolute; left: 0; color: var(--erg-minio-chiaro); font-weight: 700; }
.erg-no li strong { color: #fff; font-weight: 600; }

/* ------------------------------------------------------------
   Section 10: Il conto — l'aritmetica, con le ipotesi in chiaro
   ------------------------------------------------------------ */
.erg-calc { margin-top: clamp(1.5rem, 3vw, 2rem); border-top: 2px solid var(--erg-ink); max-width: 40rem; }
.erg-calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--erg-superficie); font-size: .9375rem; }
.erg-calc-row span:last-child { font-weight: 600; white-space: nowrap; color: var(--erg-ink); }
/* I tre riquadri del dépliant: quanto paga oggi, quanto con ERGANE, quanto
   le resta. auto-fit invece di repeat(3): sotto i ~380px si impila da sé,
   senza aggiungere un breakpoint a quelli del sito. */
.erg-conto {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  max-width: 40rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border: 1px solid var(--erg-superficie);
  /* i bordi delle celle rientrano di 1px: overflow li taglia sul telaio */
  overflow: hidden;
}
/* bordi sulla cella, non gap+sfondo: quando l'ultima riga resta spaiata
   (2+1 sul telefono) la traccia vuota non si colora di grigio */
.erg-conto-cell {
  padding: .9rem 1rem 1rem;
  border-top: 1px solid var(--erg-superficie);
  border-left: 1px solid var(--erg-superficie);
  margin: -1px 0 0 -1px;
}
.erg-conto-cell span { display: block; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--erg-acciaio); }
.erg-conto-cell b {
  display: block; margin-top: .35rem;
  font-family: 'Fjalla One', system-ui, sans-serif; font-weight: 400;
  font-size: clamp(1.375rem, 3vw, 1.875rem); line-height: 1.05;
  color: var(--erg-ink); white-space: nowrap;
}
.erg-conto-cell b small { font-size: .5em; margin-left: .25em; color: var(--erg-acciaio); }
/* il terzo è quello che il titolare porta a casa: fondo pieno */
.erg-conto-cell.is-win { background: var(--erg-minio); }
.erg-conto-cell.is-win span,
.erg-conto-cell.is-win b,
.erg-conto-cell.is-win b small { color: var(--erg-white); }
.erg-note-after { margin-top: 1.25rem; }

/* ------------------------------------------------------------
   Section 11: Come si parte — sequenza vera, quindi numerata
   ------------------------------------------------------------ */
.erg-steps { counter-reset: erg-step; margin-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--erg-superficie); }
.erg-step { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--erg-superficie); }
.erg-step::before {
  counter-increment: erg-step;
  content: counter(erg-step, decimal-leading-zero);
  font-family: 'Fjalla One', system-ui, sans-serif;
  font-size: 1.375rem; color: var(--erg-minio); line-height: 1.25;
}
.erg-step p { font-size: .9375rem; }

/* ------------------------------------------------------------
   Section 11b: Partner — non è per il titolare d'officina, è per chi
   in officina ci entra già (macchine, CAM, presetter, assistenza).
   Fondo nebbia: si stacca dal filo del discorso senza gridare.
   ------------------------------------------------------------ */
.erg-partner { background: var(--erg-nebbia); padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.erg-partner .erg-frame { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.erg-partner h2 { font-size: clamp(1.5rem, 2.8vw, 2.125rem); }
.erg-partner ul { list-style: none; display: grid; gap: .75rem; }
.erg-partner li { position: relative; padding-left: 1.6rem; font-size: .9375rem; line-height: 1.5; color: var(--erg-acciaio); }
.erg-partner li::before { content: "—"; position: absolute; left: 0; color: var(--erg-minio); font-weight: 700; }
.erg-partner li strong { color: var(--erg-ink); }
.erg-partner .erg-btn { margin-top: 1.5rem; }

/* ------------------------------------------------------------
   Section 12: L'offerta — barra minio spessa, come sul retro
   ------------------------------------------------------------ */
.erg-cta { padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }
.erg-cta-inner { border-top: 4px solid var(--erg-minio); padding-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.erg-cta .erg-k { font-size: clamp(1.375rem, 3vw, 2.125rem); line-height: 1.2; max-width: 28ch; color: var(--erg-ink); }
.erg-cta .erg-k em { font-style: normal; color: var(--erg-minio-scuro); }
.erg-cta p { margin-top: .9rem; }
.erg-cta-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
.erg-cta-proof { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--erg-superficie); font-size: .875rem; }

/* Link nel corpo chiaro */
.erg main a:not(.erg-btn) { color: var(--erg-minio-scuro); text-decoration: underline; text-underline-offset: 3px; }
.erg main a:not(.erg-btn):hover { color: var(--erg-ink); }
.erg-no a { color: var(--erg-minio-chiaro); }

/* Focus visibile sul fondo chiaro (base.css lo tara sul ciano NS) */
.erg main :focus-visible { outline: 3px solid var(--erg-minio); outline-offset: 2px; }
.erg-no :focus-visible { outline-color: var(--erg-minio-chiaro); }

/* ------------------------------------------------------------
   Section 13: Responsive — 900px è il breakpoint unico del sito
   (qui la nav desktop lascia il posto all'hamburger: base.css non
   la nasconde, lo fa ogni page-*.css)
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .nav { display: none; }
  /* hero: si impila — testo, disegno, poi la barra */
  .erg-hero .erg-frame { grid-template-columns: 1fr; row-gap: clamp(1.75rem, 5vw, 2.5rem); }
  .erg-hero-text { max-width: none; }
  .erg-hero-art img { max-width: 30rem; margin-inline: auto; }
  .erg-hero-foot { flex-direction: column; align-items: flex-start; }
  .erg-cat { text-align: left; }
  .erg-split { grid-template-columns: 1fr; }
  .erg-split .erg-fig.is-drawing img { max-width: 26rem; }
  .erg-partner .erg-frame { grid-template-columns: 1fr; }
}
@media (max-width: 46rem) {
  .erg-live-head { display: none; }
  .erg-row { grid-template-columns: 1fr auto; gap: .3rem .75rem; padding: 1rem .25rem; }
  .erg-row .erg-mach { grid-column: 1; grid-row: 1; }
  .erg-row .erg-state { grid-column: 2; grid-row: 1; justify-self: end; }
  .erg-row .erg-num { grid-column: 1 / -1; display: inline-flex; gap: .35rem; font-size: .875rem; font-weight: 400; color: var(--erg-acciaio); }
  .erg-row .erg-num::before { content: attr(data-label) " "; }
  /* tabellone e testata su telefono si guardano scorrendo: rimpiccioliti
     sarebbero solo grigio (la testata è alta 108px su 1600 di larghezza) */
  .erg-fig.is-scroll, .erg-fig.is-strip { overflow-x: auto; }
  .erg-fig.is-scroll img { max-width: none; width: 46rem; }
  .erg-fig.is-strip img { max-width: none; width: 40rem; }
}

/* ------------------------------------------------------------
   Section 14: Movimento — il default è già visibile, il reveal aggiunge
   ------------------------------------------------------------ */
.erg-reveal { opacity: 1; transform: none; }
.erg-js .erg-reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--erg-ease), transform .7s var(--erg-ease); }
.erg-js .erg-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .erg-js .erg-reveal { opacity: 1; transform: none; transition: none; }
  .erg-pulse i { animation: none; }
  .erg-btn:hover { transform: none; }
}