/* ==========================================================================
   INDUSTRIAL MATERIAL — Design System v2 "Elegant"
   Stile: Luxury Industrial — sobrio, moderno, raffinato
   ========================================================================== */

/* Font caricati via wp_enqueue_style('industrial-fonts') in functions.php.
   L'@import qui era un secondo download in cascata (render-blocking) e tirava
   giù DM Serif Display, non più usato dal design system. */

/* ==========================================================================
   1. TOKEN: VARIABILI CSS
   ========================================================================== */
:root {
  /* ---- Substrato: carta da disegno, non bianco schermo ------------------
     Il bianco puro è la firma del template. La carta tecnica è calda e
     leggermente sporca: dà profondità senza ombre. */
  --paper-0:             #FAFAF8;  /* fondo pagina, quasi bianco */
  --paper-1:             #FDFDFC;  /* superfici */
  --paper-2:             #FFFFFF;  /* superfici sollevate */

  /* Intensità del reticolo di fondo. Unica manopola: alzala per far
     emergere la griglia, portala a 0 per toglierla del tutto. */
  --grid-hair:           0.020;    /* reticolo fine, 16px */
  --grid-major:          0.038;    /* linea di quinta, 80px */

  /* Durata della comparsa del reticolo allo scroll. */
  --grid-reveal-time:    700ms;

  --color-bg-base:       var(--paper-0);
  --color-bg-surface:    var(--paper-1);
  --color-bg-elevated:   var(--paper-2);

  /* ---- Filetti: in un disegno tecnico le linee si DEVONO vedere -------- */
  --rule-hair:           rgba(22, 24, 28, 0.09);  /* griglia fine */
  --rule:                rgba(22, 24, 28, 0.18);  /* linee di quota, bordi */
  --rule-strong:         rgba(22, 24, 28, 0.38);  /* contorni, tabelle */
  --color-border:        var(--rule);
  --color-border-strong: var(--rule-strong);

  /* ---- Giallo: marcatura, non decorazione -----------------------------
     Evidenziatore su un disegno. Va su misure, stati, un solo elemento
     per schermata. Mai come fondo di un blocco intero. */
  --color-accent:        #FFD600;
  --color-accent-light:  #FFE761;
  --color-accent-dark:   #6E5800;  /* giallo leggibile COME TESTO su carta (7.3:1) */
  --color-accent-muted:  rgba(255, 214, 0, 0.22);
  --color-accent-subtle: rgba(255, 214, 0, 0.08);
  --color-accent-on-fill: #16181C;

  /* ---- Inchiostro ------------------------------------------------------ */
  --color-text-primary:   #16181C;
  --color-text-secondary: #4A4E57;
  /* #83888F stava a 2.81:1 sulla carta: sotto AA anche per il testo
     grande. Su fondo chiaro il "muted" deve scurire, non schiarire. */
  --color-text-muted:     #5E636B;
  --color-text-inverse:   #F7F6F1;

  /* ---- Tipografia: IBM Plex, superfamiglia disegnata per l'ingegneria --
     Condensed per il display (grottesca stretta, svizzera), Sans per il
     corpo, Mono per tutto ciò che è una misura o un codice. */
  --font-display: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3.25rem;
  --text-5xl:  4.5rem;
  --text-hero: clamp(3.25rem, 8.5vw, 7.5rem);

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container-max:    1240px;
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);

  /* Angoli vivi. Un disegno tecnico non ha raccordi decorativi.
     I token restano per non rompere le 1800 righe che li usano. */
  --radius-sm:  0;
  --radius-md:  0;
  --radius-lg:  0;
  --radius-pill: 0;

  /* Niente ombre sfumate: la profondità viene da offset netti,
     come un secondo passaggio di stampa fuori registro. */
  --shadow-sm:     none;
  --shadow-md:     3px 3px 0 var(--rule-hair);
  --shadow-lg:     6px 6px 0 rgba(22, 24, 28, 0.10);
  --shadow-accent: 4px 4px 0 var(--color-accent);

  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  /* FIX: queste variabili erano usate in tutto il file ma mai definite → transizioni istantanee */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 600ms cubic-bezier(0.22, 1, 0.36, 1);

  /* FIX: colori usati da card/badge ma mai definiti → fallback rotto a inherit */
  --color-steel:               #5b7fa6;
  --color-status-ottimo:       #1f8a55; /* verde — AA su tint chiaro */
  --color-status-revisionato:  #8a6d00; /* amber scuro leggibile */
  --color-status-trattabile:   #3f6494; /* blu acciaio leggibile */

  /* FIX: usato da .container--narrow */
  --container-narrow: 820px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-y: scroll; scrollbar-gutter: stable; }

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* Carta millimetrata: reticolo fine da 16px + linea di quinta ogni 80px.
   È il rapporto della carta da disegno vera — il puntinato generico letto
   come "sfondo AI" è sostituito da qualcosa che ha una ragione metrica. */
#global-warehouse-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Nessun background-color qui: il colore carta lo mette gia' il body.
     Cosi' questo strato contiene solo le righe, e l'opacita' agisce sul
     reticolo senza toccare il fondo. */
  background-image:
    linear-gradient(rgba(22, 24, 28, var(--grid-hair)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 24, 28, var(--grid-hair)) 1px, transparent 1px),
    linear-gradient(rgba(22, 24, 28, var(--grid-major)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 24, 28, var(--grid-major)) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 80px 80px, 80px 80px;

  /* Reveal: assente in testata, compare quando si entra nel contenuto.
     Si anima solo l'opacita'. La griglia non si sposta di un pixel, quindi
     le righe da 1px restano ancorate agli stessi pixel fisici e non
     possono sfarfallare. */
  opacity: 0;
  transition: opacity var(--grid-reveal-time) cubic-bezier(0.22, 1, 0.36, 1);
}
html.grid-revealed #global-warehouse-bg { opacity: 1; }

/* Con animazioni ridotte il reticolo c'e' da subito e non si anima. */
@media (prefers-reduced-motion: reduce) {
  #global-warehouse-bg { opacity: 1; transition: none; }
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
ul { list-style: none; }
button, input, textarea, select { font: inherit; }

/* ==========================================================================
   3. TIPOGRAFIA — elegante, sobria
   ========================================================================== */

/* Display: grottesca condensata, minuscola, serrata.
   Il maiuscolo grida; il minuscolo condensato a corpo enorme ha più
   presenza e più densità di parole per riga. */
h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  color: var(--color-text-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: var(--color-text-primary);
}
h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
h4 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.015em; }
h5 { font-size: var(--text-lg); font-weight: var(--fw-medium); }
h6 { font-size: var(--text-base); font-weight: var(--fw-medium); }

/* Misura di lettura corta: è una scheda tecnica, non un saggio. */
p { max-width: 58ch; }

/* Etichetta di sezione = cartiglio del disegno.
   Numero di riferimento in mono, filetto di richiamo, testo. */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.section-label::before {
  content: '';
  display: block;
  width: 28px;
  height: 0;
  border-top: 2px solid var(--color-accent);
  flex-shrink: 0;
}

/* Indicatore di caricamento: quadrato che ruota su sé stesso, non il
   cerchietto con l'arco. Rispetta prefers-reduced-motion. */
.loader-mark {
  width: 26px; height: 26px;
  border: 2px solid var(--color-text-primary);
  border-right-color: var(--color-accent);
  animation: loader-turn 0.9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes loader-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loader-mark { animation-duration: 2.4s; animation-timing-function: linear; }
}

/* Segnaposto "foto mancante": campitura tratteggiata a 45°, la
   convenzione con cui in un disegno si indica una sezione non definita.
   Sostituisce i blocchi blu notte, che sulla carta erano corpi estranei. */
.card-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-3);
  background-color: var(--color-bg-surface);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 6px,
    rgba(22, 24, 28, 0.10) 6px 7px
  );
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: center;
  padding: var(--space-4);
}
.card-placeholder svg { stroke: var(--color-text-secondary); opacity: 0.8; }

/* Quota: numero tecnico in mono, come su un disegno quotato. */
.dim {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
/* Evidenziatore: l'unico uso legittimo del giallo pieno sul testo. */
.mark {
  background: linear-gradient(transparent 62%, var(--color-accent) 62%, var(--color-accent) 94%, transparent 94%);
  padding-inline: 0.08em;
}

.text-accent   { color: var(--color-accent-dark); }
.text-muted    { color: var(--color-text-secondary); }
.text-mono     { font-family: var(--font-mono); font-size: var(--text-sm); }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.section    { padding-block: var(--space-20); position: relative; z-index: 10; background-color: transparent; }
.section--lg { padding-block: var(--space-24); }

.grid { display: grid; gap: var(--space-6); }
.grid--2    { grid-template-columns: repeat(2, 1fr); }
.grid--3    { grid-template-columns: repeat(3, 1fr); }
.grid--4    { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-strong), transparent);
  margin-block: var(--space-8);
}

/* ==========================================================================
   5. BOTTONI — raffinati, non aggressivi
   ========================================================================== */
/* Bottoni: rettangoli netti in mono. Nessun raggio, nessun gradiente.
   L'hover non solleva con un'ombra sfumata — sposta il blocco di 3px e
   lascia dietro un secondo contorno, come una stampa fuori registro. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 1.75rem;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1.5px solid var(--color-text-primary);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              background-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

/* Primario: inchiostro pieno. Il giallo resta la marcatura, non il fondo
   di ogni bottone — così quando compare significa qualcosa. */
.btn--primary {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-text-primary);
}
.btn--primary:hover {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--color-accent);
}
.btn--primary:active { transform: none; box-shadow: none; }

/* Outline: contorno di pari peso, si riempie d'inchiostro all'hover */
.btn--outline {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}
.btn--outline:hover {
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-text-primary);
}
.btn--outline:active { transform: none; }

/* Ghost */
.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.btn--ghost:hover {
  color: var(--color-accent-dark);
  background: var(--color-accent-muted);
}

.btn--sm { padding: 0.5rem 1.25rem; font-size: var(--text-xs); }
.btn--lg { padding: 0.9rem 2.25rem; font-size: var(--text-base); }

/* ==========================================================================
   6. CARD MACCHINARIO — elegante, moderna
   ========================================================================== */
/* Scheda macchinario = tavola quotata. Contorno pieno, nessun raggio,
   nessuna ombra sfumata. All'hover non fluttua: si sposta di 4px e
   lascia un contorno giallo dietro, come una registrazione di stampa. */
.machine-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-text-primary);
  border-radius: 0;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: none;
}
.machine-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0 var(--color-accent);
}

.machine-card__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-bg-surface);
  border-bottom: 1.5px solid var(--color-text-primary);
  position: relative;
}
.machine-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) contrast(1.05);
  transition: filter var(--transition-slow);
}
.machine-card:hover .machine-card__image img {
  transform: none;
  filter: grayscale(0) contrast(1);
}

.machine-card__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
}

.machine-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.machine-card__category {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-steel);
}
.machine-card__title {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.machine-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
}

.machine-card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1.5px solid var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
/* Il prezzo è una misura: mono, cifre tabellari, allineate in colonna
   tra una scheda e l'altra. */
.machine-card__price {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   7. BADGE & SPEC PILLS
   ========================================================================== */
/* Stati = timbri, non pillole. Rettangolo pieno, mono, maiuscolo.
   Il colore resta portatore di significato ma non è più l'unico:
   il testo dice sempre lo stato per esteso. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.3rem 0.7rem;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: none;
  border: 1.5px solid currentColor;
  background: var(--color-bg-elevated);
}
.badge--ottimo      { color: #14653C; }
.badge--revisionato { color: #6E5800; }
.badge--trattabile  { color: #2C4E7A; }

/* Quote tecniche: allineate, cifre a larghezza fissa, filetto sottile. */
.spec-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   8. FORM LEAD
   ========================================================================== */
.form-lead {
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-text-primary);
  border-radius: 0;
  padding: var(--space-8);
  box-shadow: none;
}
.form-lead__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  margin-bottom: var(--space-6);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
/* Campi da modulo tecnico: etichetta in mono maiuscolo, casella squadrata.
   Il focus non alona — ingrossa il contorno e accende una barra gialla
   sotto, come una casella compilata a mano. */
.form-group label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.form-group input,
.form-group textarea,
.form-group select {
  background: var(--color-bg-surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--color-text-muted); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-text-primary);
  box-shadow: inset 0 -4px 0 var(--color-accent);
}
.form-group textarea { min-height: 120px; resize: vertical; }

/* ==========================================================================
   9. NAVIGATION — glassmorphism raffinato
   ========================================================================== */
/* L'header è il cartiglio del disegno: una fascia di carta chiusa da un
   filetto pesante. Niente vetro smerigliato — appartiene alla pagina.
   Lo screenshot mostrava un header bianco cucito su una hero nera: qui
   header e hero condividono lo stesso substrato, la cucitura sparisce. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-base);
  border-bottom: 1.5px solid var(--color-text-primary);
  transition: box-shadow var(--transition-base);
}
.site-header.scrolled {
  box-shadow: 0 1px 0 var(--rule), 0 6px 0 -3px rgba(22, 24, 28, 0.06);
}

/* Tre colonne rigide: marchio | indice | azione.
   Lo spazio morto di 700px al centro sparisce perché l'indice è
   ancorato a destra insieme alla CTA, non lasciato a galleggiare. */
.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-8);
  height: 76px;
}
.nav-logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* Il marchio è SVG inline con fill=currentColor: prende l'inchiostro in
   navbar e il chiaro sul footer, senza un secondo file per l'inverso.
   Dimensionato in altezza — la larghezza segue il rapporto del viewBox. */
.nav-logo__mark { display: block; }
.nav-logo__mark svg {
  display: block;
  height: 34px;
  width: auto;
}
.footer-logo .nav-logo__mark svg { height: 56px; }
@media (max-width: 480px) {
  .nav-logo__mark svg { height: 28px; }
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
  counter-reset: navitem;
}
.nav-links li { counter-increment: navitem; }
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding-block: var(--space-2);
  transition: color var(--transition-fast);
}
/* Numerazione automatica delle voci: indice di tavola, zero markup in più */
.nav-links a::before {
  content: counter(navitem, decimal-leading-zero);
  font-size: 0.85em;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-bottom: 2px solid var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--color-text-primary);
}
.nav-links a:hover::before,
.nav-links a.active::before { color: var(--color-accent-dark); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

/* La CTA in navbar non deve competere con quella della hero:
   contorno, non fondo giallo pieno. */
.nav-cta.btn--primary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}
.nav-cta.btn--primary:hover {
  background: var(--color-accent);
  color: var(--color-accent-on-fill);
  border-color: var(--color-text-primary);
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   10. HERO — sobria, elegante, con presenza
   ========================================================================== */
/* Colonna, non riga: la hero ha due figli (contenuto + piede referenze).
   Con il flex-row ereditato il piede finiva affiancato al contenuto. */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: transparent;
  padding-block: var(--space-16) 0;
  border-bottom: 1.5px solid var(--color-text-primary);
}

.hero__content {
  position: relative;
  z-index: 2;
}
.hero__eyebrow { margin-bottom: var(--space-5); }
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  margin-bottom: var(--space-6);
}
/* La seconda parola del titolo: stesso peso, sottolineata a matita gialla.
   Il corsivo del mono era un falso corsivo — il browser lo inclinava. */
.hero__title em {
  font-style: normal;
  color: var(--color-text-primary);
  box-shadow: inset 0 -0.14em 0 var(--color-accent);
}
.hero__description,
.hero__subtitle {
  font-size: var(--text-lg);
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 46ch;
  margin-bottom: var(--space-8);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Stats — misurate, non urlate */
.hero__stats {
  display: flex;
  gap: var(--space-10);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.hero__stat-value {
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero__stat-value span { color: var(--color-accent-dark); }
.hero__stat-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--space-2);
}

/* ==========================================================================
   11. SECTION HEADER
   ========================================================================== */
.section-header { margin-bottom: var(--space-12); }
.section-header--center { text-align: center; }
.section-header--center p { margin-inline: auto; }

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-transform: lowercase;
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.section-title--serif {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--text-4xl) * 1.1);
}

/* Filetto di chiusura, non trattino decorativo: pieno tratto giallo. */
.section-title--line { padding-bottom: var(--space-4); }
.section-title--line::after {
  content: '';
  display: block;
  margin-top: var(--space-4);
  width: 72px;
  height: 0;
  border-top: 3px solid var(--color-accent);
}
.section-header--center .section-title--line::after {
  margin-inline: auto;
}

/* ==========================================================================
   12. DIVIDER DECORATIVO
   ========================================================================== */
.ornament {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-border-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ==========================================================================
   13. UTILITY
   ========================================================================== */
/* .screen-reader-text è il nome usato da WordPress: stesso comportamento,
   così il markup del tema e quello del core condividono una sola regola. */
.visually-hidden,
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4           { gap: var(--space-4); }
.gap-6           { gap: var(--space-6); }
.mt-auto         { margin-top: auto; }
.w-full          { width: 100%; }


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .hero__stats { display:grid !important; grid-template-columns: repeat(3,1fr) !important; gap: var(--space-4) !important; margin-top: var(--space-8) !important; }
  .form-lead  { padding: var(--space-5); }
  .hero__title { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .hero__actions { flex-direction:column !important; }
  .hero__actions .btn { width:100%; justify-content:center; }
  .hero--with-bg { min-height: 80vh; }
  .section-header { flex-direction:column !important; align-items:flex-start !important; gap: var(--space-4); }
  /* Services grid stack */
  .section .grid[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns:1fr !important; }
}
@media (max-width: 480px) {
  h2  { font-size: var(--text-2xl); }
  .section { padding-block: var(--space-12); }
  .hero__stats { grid-template-columns: 1fr !important; gap: var(--space-6) !important; text-align:center; }
  .hero--with-bg { min-height: 70vh; padding-top: var(--space-8); }
}

/* ==========================================================================
   17. FADE-IN ANIMATION SYSTEM
   ========================================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in-left { opacity:0; transform:translateX(-40px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.fade-in-left.is-visible { opacity:1; transform:translateX(0); }
.fade-in-right { opacity:0; transform:translateX(40px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.fade-in-right.is-visible { opacity:1; transform:translateX(0); }

/* ==========================================================================
   18. SCROLL PROGRESS BAR
   ========================================================================== */
.scroll-progress {
  position: fixed; top:0; left:0; height:3px; z-index:9999;
  background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent), var(--color-accent-light));
  width: 0%; transition: width 0.1s linear; pointer-events:none;
}

/* ==========================================================================
   19. MOBILE MENU (Hamburger + Drawer)
   ========================================================================== */
.nav-toggle {
  display: none; background:none; border:none; cursor:pointer;
  width:32px; height:24px; position:relative; z-index:200;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display:block; width:100%; height:2px;
  background: var(--color-text-primary);
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  position:absolute; left:0;
}
.nav-toggle span { top:50%; transform:translateY(-50%); }
.nav-toggle span::before { content:''; top:-8px; }
.nav-toggle span::after { content:''; top:8px; }
.nav-toggle.is-active span { background:transparent; }
.nav-toggle.is-active span::before { top:0; transform:rotate(45deg); }
.nav-toggle.is-active span::after { top:0; transform:rotate(-45deg); }

@media (max-width: 768px) {
  .nav-toggle { display:block; }
  .nav-links, ul.nav-links {
    position:fixed; inset:0; z-index:150;
    background: rgba(248,250,252,0.97);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    flex-direction:column; align-items:center; justify-content:center;
    gap: var(--space-8);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
    display:flex;
    visibility:hidden;
  }
  .nav-links.is-open, ul.nav-links.is-open { transform: translateX(0); visibility:visible; }
  .nav-links a, ul.nav-links a, .nav-links li a {
    font-size: var(--text-2xl) !important; font-weight: var(--fw-semibold) !important;
    color: var(--color-text-primary) !important;
  }
  .nav-links li { list-style:none; text-align:center; }
  body.menu-open { overflow:hidden; }
}

/* ==========================================================================
   20. HERO ENHANCED
   ========================================================================== */
/* La hero non è più una lastra nera incollata sotto un header bianco.
   È la prima tavola del disegno: stessa carta, chiusa da filetti. */
.hero--with-bg {
  position: relative;
  background-color: transparent;
  padding-block: clamp(var(--space-12), 7vw, var(--space-20)) 0;
}
.hero__grid > * {
  min-width: 0;
}
.hero--with-bg::before { content: none; }

.hero--with-bg .hero__content { position: relative; z-index: 2; }
.hero--with-bg h1, .hero--with-bg .hero__title {
  color: var(--color-text-primary) !important;
}
.hero--with-bg p, .hero--with-bg .hero__subtitle {
  color: var(--color-text-secondary) !important;
}
.hero--with-bg .section-label {
  color: var(--color-text-secondary) !important;
}
.hero--with-bg .section-label::before {
  background: none !important;
  border-top: 2px solid var(--color-accent);
}
.hero--with-bg .hero__title em {
  color: var(--color-text-primary);
}

/* Colonna testo e colonna immagine separate da una linea di sezione,
   non da spazio vuoto. La griglia è dichiarata, non subita. */
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch !important;
    gap: 0 !important;
  }
  .hero__grid > .hero__content {
    padding-right: clamp(var(--space-8), 5vw, var(--space-16));
    padding-bottom: var(--space-12);
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero__grid > .hero__image-wrapper {
    padding-left: clamp(var(--space-8), 5vw, var(--space-16));
    padding-bottom: var(--space-12);
    display: flex;
    align-items: center;
  }
}

.hero--with-bg .stat-number, .hero--with-bg .hero__stat-value {
  color: var(--color-text-primary) !important;
}
.hero--with-bg .stat-number span, .hero--with-bg .hero__stat-value span {
  color: var(--color-accent-dark) !important;
}
.hero--with-bg .stat-label, .hero--with-bg .hero__stat-label {
  color: #64748b !important;
}
.hero--with-bg .hero__stats {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Hero Image Card and Outline Button overrides for Dark Hero Grid */
.hero__image-wrapper {
  position: relative;
  z-index: 2;
}
/* Niente card arrotondata che galleggia: l'immagine è una tavola
   inquadrata da un contorno pieno, appoggiata alla griglia. */
.hero__image-card {
  position: relative;
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--color-text-primary);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  overflow: visible;
  transition: none;
}
.hero__image-card:hover {
  transform: none;
  border-color: var(--color-text-primary);
  box-shadow: none;
}
.hero__image {
  width: 100%;
  border-radius: 0;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  filter: grayscale(0.25) contrast(1.06);
  transition: filter var(--transition-slow);
}
.hero__image-card:hover .hero__image {
  transform: none;
  filter: grayscale(0) contrast(1);
}
/* Etichetta identificativa: sporge dal contorno come un cartellino
   applicato sulla tavola, invece di galleggiare dentro l'immagine. */
.hero__image-badge {
  position: absolute;
  bottom: -1.5px;
  left: -1.5px;
  background: var(--color-text-primary);
  border: none;
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  backdrop-filter: none;
  z-index: 5;
}
.hero__image-badge .badge-dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-accent);
  border-radius: 0;
  display: inline-block;
  box-shadow: none;
}
.hero .btn--outline {
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}
.hero .btn--outline:hover {
  border-color: var(--color-text-primary);
  color: var(--color-text-inverse);
  background: var(--color-text-primary);
}

/* ==========================================================================
   21. FEATURE / WHY-US CARDS
   ========================================================================== */
.feature-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.feature-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.feature-card__icon {
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background: var(--color-accent-muted); border-radius: var(--radius-md);
  color: var(--color-accent-dark); margin-bottom: var(--space-5); font-size:1.5rem;
}
.feature-card__title { font-size: var(--text-lg); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.feature-card__text { color: var(--color-text-secondary); font-size: var(--text-sm); line-height:1.7; }

/* ==========================================================================
   22. FOOTER PREMIUM
   ========================================================================== */
.site-footer {
  background: var(--color-text-primary); color: rgba(255,255,255,0.7);
  padding:0; margin-top: var(--space-16);
}
.site-footer a { color: rgba(255,255,255,0.7); transition: color var(--transition-base); }
.site-footer a:hover { color: var(--color-accent-light); }
/* Filetto pieno, non sfumato: chiude la pagina come il bordo di una tavola. */
.footer-accent-line { height:4px; background: var(--color-accent); }
.footer-main { padding: var(--space-16) 0 var(--space-12); }
.footer-grid {
  display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-10);
}
.footer-brand p { font-size: var(--text-sm); line-height:1.8; margin-top: var(--space-4); max-width:300px; }
.footer-heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform:uppercase;
  letter-spacing:0.16em; color:#fff; margin-bottom: var(--space-5);
}
.footer-links { list-style:none; padding:0; }
.footer-links li { margin-bottom: var(--space-3); }
.footer-links a { font-size: var(--text-sm); }
.footer-contact-item { display:flex; gap: var(--space-3); align-items:flex-start; margin-bottom: var(--space-4); font-size: var(--text-sm); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.1); padding: var(--space-5) 0;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--space-4);
  font-size: var(--text-xs); color: rgba(255,255,255,0.4);
}

@media(max-width:768px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap: var(--space-8); }
}
@media(max-width:480px) {
  .footer-grid { grid-template-columns:1fr; }
}

/* ==========================================================================
   23. SERVICES SECTION ENHANCED
   ========================================================================== */
/* Voci numerate con leader line: il puntinato che collega la voce alla
   sua quota, come in un elenco di parti. Il tratteggio è generato dal
   bordo, non da un carattere ripetuto — resta allineato a ogni larghezza. */
.service-list-item {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--transition-base);
}
.service-list-item:hover { border-bottom-color: var(--color-text-primary); }
.service-list-item__number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-dark);
  min-width: 40px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.service-list-item__text {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex: 1;
}
.service-list-item__text::after {
  content: '';
  flex: 1;
  border-bottom: 1px dotted var(--rule-strong);
  transform: translateY(-0.25em);
}

/* Intestazione del secondo gruppo di punti (le rappresentanze): una riga
   con il trattino giallo delle etichette di sezione, che porta alla pagina
   DRW. Orizzontale, quindi uguale su schermo largo e su telefono. */
.service-list-sezione {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}
.service-list-sezione::before {
  content: "";
  width: 28px;
  border-top: 2px solid var(--color-accent);
  flex-shrink: 0;
}
.service-list-sezione span { transition: transform var(--transition-fast); }
.service-list-sezione:hover,
.service-list-sezione:focus-visible { color: var(--color-accent-dark); }
.service-list-sezione:hover span,
.service-list-sezione:focus-visible span { transform: translateX(4px); }

/* ==========================================================================
   24. CARD SHIMMER ON HOVER
   ========================================================================== */
.machine-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition-base); z-index:3;
}
.machine-card { position:relative; }
.machine-card:hover::before { transform: scaleX(1); }

/* ==========================================================================
   25. BREADCRUMB ENHANCED
   ========================================================================== */
.breadcrumb ol {
  display:flex; align-items:center; gap: var(--space-2);
  list-style:none; padding:0; margin:0;
}
.breadcrumb a { color: var(--color-accent-dark); }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb__sep { color: var(--color-text-muted); margin: 0 var(--space-1); }

/* ==========================================================================
   26. CONTACT SECTION ENHANCED
   ========================================================================== */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap: var(--space-12); align-items:start; }
.contact-info-card {
  background: var(--color-bg-surface); border:1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8);
  border-left: 3px solid var(--color-accent);
}
@media(max-width:768px) { .contact-grid { grid-template-columns:1fr; } }

/* ==========================================================================
   27. EXTRA UTILITIES
   ========================================================================== */
.text-center { text-align:center; }
.mx-auto { margin-inline:auto; }
.relative { position:relative; }
.overflow-hidden { overflow:hidden; }



/* ==========================================================================
   29. BACK TO TOP BUTTON
   ========================================================================== */
.back-to-top {
  position:fixed; bottom:var(--space-8); right:var(--space-8); z-index:90;
  width:48px; height:48px; border-radius:0;
  /* era bianco su giallo pieno: 1.4:1, illeggibile. */
  background: var(--color-text-primary); color: var(--color-accent);
  border:1.5px solid var(--color-text-primary); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: none;
  opacity:0; transform:translateY(20px) scale(0.8); pointer-events:none;
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
}
.back-to-top.is-visible {
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}
.back-to-top:hover {
  transform:translateY(-3px) scale(1.05);
  box-shadow: 0 8px 24px rgba(255, 214, 0, 0.4);
}
.back-to-top svg { width:20px; height:20px; }

/* ==========================================================================
   30. LIGHTBOX GALLERY
   ========================================================================== */
.lightbox-overlay {
  position:fixed; inset:0; z-index:10000;
  background: rgba(0,0,0,0.92); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity 0.35s ease;
}
.lightbox-overlay.is-active { opacity:1; pointer-events:auto; }
.lightbox-overlay img {
  max-width:90vw; max-height:85vh; object-fit:contain;
  border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transform: scale(0.9); transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}
.lightbox-overlay.is-active img { transform:scale(1); }
.lightbox-close {
  position:absolute; top:var(--space-6); right:var(--space-6);
  background:none; border:none; color:#fff; font-size:2rem;
  cursor:pointer; width:48px; height:48px; display:flex;
  align-items:center; justify-content:center; opacity:0.7;
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.lightbox-close:hover { opacity:1; transform:rotate(90deg); }
.lightbox-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  color:#fff; width:48px; height:48px; border-radius: 0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
  transition: all var(--transition-base); backdrop-filter:blur(4px);
}
.lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.lightbox-prev { left:var(--space-6); }
.lightbox-next { right:var(--space-6); }
.lightbox-counter {
  position:absolute; bottom:var(--space-6); left:50%; transform:translateX(-50%);
  color: rgba(255,255,255,0.6); font-family: var(--font-mono);
  font-size: var(--text-sm); letter-spacing:0.1em;
}

/* ==========================================================================
   31. 3D CARD TILT
   ========================================================================== */
.machine-card { perspective: 1000px; }
.machine-card.tilt-active {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out, box-shadow 0.3s ease;
}

/* ==========================================================================
   32. FLOATING LABEL FORM
   ========================================================================== */
.form-group--float { position:relative; margin-bottom: var(--space-6); }
.form-group--float input,
.form-group--float textarea {
  background: var(--color-bg-elevated); border:1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 1.25rem var(--space-4) 0.5rem;
  color: var(--color-text-primary); font-size: var(--text-base); width:100%;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.form-group--float label {
  position:absolute; left: var(--space-4); top:50%; transform:translateY(-50%);
  font-size: var(--text-base); color: var(--color-text-muted);
  transition: all 0.25s ease; pointer-events:none; transform-origin: left;
}
.form-group--float textarea ~ label { top: 1.25rem; transform:none; }
.form-group--float input:focus ~ label,
.form-group--float input:not(:placeholder-shown) ~ label,
.form-group--float textarea:focus ~ label,
.form-group--float textarea:not(:placeholder-shown) ~ label {
  top: 0.45rem; transform: scale(0.75); color: var(--color-accent-dark);
}
.form-group--float input:focus,
.form-group--float textarea:focus {
  outline:none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}

/* ==========================================================================
   33. TESTIMONIAL SECTION
   ========================================================================== */
.testimonial-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.testimonial-card::before {
  content:'"'; position:absolute; top: var(--space-4); left: var(--space-6);
  font-family: var(--font-display); font-size: 4rem; line-height:1;
  color: var(--color-accent-subtle); pointer-events:none;
}
.testimonial-card__text {
  font-size: var(--text-base); line-height:1.8; color: var(--color-text-secondary);
  margin-bottom: var(--space-6); padding-top: var(--space-4);
  font-style:italic;
}
.testimonial-card__author { display:flex; align-items:center; gap: var(--space-4); }
.testimonial-card__avatar {
  width:48px; height:48px; border-radius: 0; background: var(--color-accent-muted);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight: var(--fw-semibold);
  color: var(--color-accent-dark); font-size: var(--text-sm);
}
.testimonial-card__name { font-weight: var(--fw-semibold); font-size: var(--text-sm); }
.testimonial-card__role { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ==========================================================================
   34. PAGE TRANSITIONS
   ========================================================================== */
.page-transition-overlay {
  position:fixed; inset:0; z-index:99999;
  background: var(--color-text-primary);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(.7,0,.3,1);
  pointer-events:none;
}
.page-transition-overlay.is-active {
  transform: scaleY(1); transform-origin: top;
}

/* ==========================================================================
   35. CATALOG RESULTS COUNTER
   ========================================================================== */
.results-counter {
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--color-text-muted); letter-spacing:0.02em;
  margin-bottom: var(--space-6);
}
.results-counter strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }

/* ==========================================================================
   36. CONTATTACI — LANDING PAGE
   ========================================================================== */

/* Hero */
.contattaci-hero {
  text-align: center;
  padding: var(--space-20) 0 var(--space-12);
  position: relative;
}
.contattaci-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-strong), transparent);
}

/* Layout a 2 colonne */
.contattaci-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
@media (max-width: 768px) {
  .contattaci-layout { grid-template-columns: 1fr; }
}

/* Form generico — leggermente più ampio */
.form-lead--generic {
  border-left: 4px solid var(--color-accent);
}

/* ==========================================================================
   37. CTA CONTATTACI — HOMEPAGE BLOCK
   ========================================================================== */
.cta-contattaci {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.cta-contattaci::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent), var(--color-accent-light));
}
.cta-contattaci .section-label::before { display: none; }
.cta-contattaci .section-label { justify-content: center; margin-bottom: var(--space-4); }
.cta-contattaci .section-title--line::after { margin-inline: auto; }

/* Dark mode support */
/* ==========================================================================
   38. FORM RAPIDO (FAST LEAD)
   ========================================================================== */
.form-lead--fast {
  padding: var(--space-6);
  background: var(--color-bg-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-accent);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base);
}
.form-lead--fast:hover {
  transform: translateY(-2px);
}
.form-lead--fast::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent-light));
}
.form-lead--fast .form-group {
  margin-bottom: var(--space-4);
}
.form-lead--fast input[type="email"],
.form-lead--fast input[type="tel"] {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  border-color: var(--color-border-strong);
}
.form-lead--fast input[type="email"]:focus,
.form-lead--fast input[type="tel"]:focus {
  border-color: var(--color-accent);
}

/* ==========================================================================
   39. FLOATING ACTION BUTTON & MODAL
   ========================================================================== */
/* L'icona era l'emoji 📞, che Windows disegna rossa/magenta: un colore
   fuori palette imposto dal font di sistema, non dal CSS. Ora è un SVG
   che eredita currentColor. */
.fab-fast-lead {
  position: fixed;
  bottom: var(--space-8);
  left: var(--space-8);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.8rem 1.4rem;
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  border: 1.5px solid var(--color-text-primary);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--color-accent);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.fab-fast-lead:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--color-accent);
}
.fab-fast-lead:active { transform: none; box-shadow: 2px 2px 0 var(--color-accent); }
.fab-fast-lead__icon {
  display: inline-flex;
  color: var(--color-accent);
}
.fab-fast-lead__icon svg { width: 16px; height: 16px; }
@media (max-width: 768px) {
  .fab-fast-lead {
    bottom: var(--space-4);
    left: var(--space-4);
    padding: 0.6rem 1.2rem;
    font-size: var(--text-sm);
  }
}

.modal-fast-lead {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-fast-lead.is-open {
  opacity: 1;
  pointer-events: auto;
}
.modal-fast-lead__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 13, 24, 0.85);
  backdrop-filter: blur(8px);
}
.modal-fast-lead__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 450px;
  margin: var(--space-4);
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-fast-lead.is-open .modal-fast-lead__content {
  transform: translateY(0);
}
.modal-fast-lead__close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  border: 1.5px solid var(--color-text-primary);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
  transition: background var(--transition-fast);
}
.modal-fast-lead__close:hover {
  background: var(--color-accent);
}
/* ==========================================================================
   40. GDPR COOKIE BANNER
   ========================================================================== */
.mach-cookie-banner {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  left: var(--space-6);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 20px 40px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  padding: var(--space-6);
  animation: mach-slide-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  max-width: 500px;
  margin-left: auto;
}

@keyframes mach-slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.mach-cookie-banner__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mach-cookie-banner__title {
  margin-top: 0;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
}

.mach-cookie-banner__text p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.mach-cookie-banner__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

@media (min-width: 768px) {
  .mach-cookie-banner {
    bottom: var(--space-8);
    right: var(--space-8);
    left: auto;
  }
}

/* ==========================================================================
   41. SWIPER GALLERY CUSTOM OVERRIDES
   ========================================================================== */
.swiper-machine-gallery .swiper-button-prev,
.swiper-machine-gallery .swiper-button-next {
  color: var(--color-accent) !important;
  background: rgba(9, 13, 24, 0.65);
  width: 40px;
  height: 40px;
  border-radius: 0;
  border: 1px solid rgba(255, 214, 0, 0.3);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: all var(--transition-base);
  z-index: 10;
}

.swiper-machine-gallery .swiper-button-prev::after,
.swiper-machine-gallery .swiper-button-next::after {
  font-size: 1rem !important;
  font-weight: bold;
}

.swiper-machine-gallery .swiper-button-prev:hover,
.swiper-machine-gallery .swiper-button-next:hover {
  background: var(--color-accent);
  color: var(--color-accent-on-fill) !important;
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(255, 214, 0, 0.35);
}

.swiper-machine-gallery .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.5) !important;
  opacity: 1 !important;
  width: 8px;
  height: 8px;
  transition: all 0.3s ease;
}

.swiper-machine-gallery .swiper-pagination-bullet-active {
  background: var(--color-accent) !important;
  width: 24px !important;
  border-radius: 0 !important;
}

.swiper-machine-gallery .swiper-button-disabled {
  opacity: 0 !important;
  pointer-events: none;
}

/* ==========================================================================
   42. TECHNICAL HEADER (Light Mode Colors)
   ========================================================================== */
.site-header .nav-logo {
  color: var(--color-text-primary);
}
.site-header .nav-links a {
  color: var(--color-text-secondary) !important;
}
.site-header .nav-links a:hover,
.site-header .nav-links a.active {
  color: var(--color-text-primary) !important;
}
.site-header .nav-toggle span,
.site-header .nav-toggle span::before,
.site-header .nav-toggle span::after {
  background: var(--color-text-primary);
}

@media (max-width: 768px) {
  .site-header .nav-links, .site-header ul.nav-links {
    background: rgba(255, 255, 255, 0.98) !important;
    border-left: 1px solid var(--color-border);
  }
  .site-header .nav-links a, .site-header ul.nav-links a, .site-header .nav-links li a {
    color: var(--color-text-primary) !important;
  }
}

/* CTA in navbar: solo da tablet in su (mobile ha il drawer + il FAB) */
.nav-cta { display: none; }
@media (min-width: 769px) {
  .nav-cta { display: inline-flex; }
}

/* ==========================================================================
   43. SWIPER HERO CAROUSEL
   ========================================================================== */
.swiper-hero {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.swiper-hero .hero__image {
  border-radius: 0;
}
.swiper-hero .swiper-button-prev,
.swiper-hero .swiper-button-next {
  color: var(--color-accent) !important;
  background: rgba(15, 23, 42, 0.7);
  width: 36px;
  height: 36px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-base);
}
.swiper-hero .swiper-button-prev::after,
.swiper-hero .swiper-button-next::after {
  font-size: 0.8rem !important;
  font-weight: bold;
}
.swiper-hero .swiper-button-prev:hover,
.swiper-hero .swiper-button-next:hover {
  background: var(--color-accent);
  color: var(--color-text-primary) !important;
  border-color: var(--color-accent);
}
.swiper-hero .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.4) !important;
  opacity: 1 !important;
}
.swiper-hero .swiper-pagination-bullet-active {
  background: var(--color-accent) !important;
  width: 16px !important;
  border-radius: 0 !important;
}
.swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none;
}

/* --------------------------------------------------------------------------
   Galleria foto in testata ("pellicola"): foto grande con la didascalia su
   un cartellino, come quello delle macchine, e striscia di miniature sotto.
   Le foto sono persone e officine, non schede prodotto: colore pieno,
   niente viraggio grigio delle foto macchina.
   -------------------------------------------------------------------------- */
.galleria .hero__image,
.galleria .hero__image-card:hover .hero__image { filter: none; }
.galleria .swiper-hero { border-radius: 0; }
.galleria-foto { margin: 0; position: relative; }
.galleria-foto__didascalia {
  position: absolute;
  left: -1.5px;
  bottom: -1.5px;
  max-width: 85%;
  padding: var(--space-2) var(--space-4);
  background: var(--color-text-primary);
}
.galleria-foto__didascalia time {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.galleria-foto__didascalia span {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text-inverse);
}
/* I pallini non devono coprire il cartellino: salgono in cima alla foto. */
.galleria .swiper-hero .swiper-pagination {
  top: var(--space-3);
  bottom: auto;
}
.swiper-hero-miniature {
  border-top: 1.5px solid var(--color-text-primary);
  padding: 6px;
  background: #ffffff;
}
.swiper-hero-miniature .swiper-slide {
  cursor: pointer;
  opacity: 0.45;
  transition: opacity var(--transition-fast);
}
.swiper-hero-miniature .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.swiper-hero-miniature .swiper-slide-thumb-active {
  opacity: 1;
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Force CSS Grid children containing swiper sliders to ignore auto-sizing, preventing resize loops */
.machine-content {
  min-width: 0;
}
.machine-sidebar {
  min-width: 0;
}

/* ==========================================================================
   44. ACCESSIBILITÀ — focus visibile coerente + skip link
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
  border-radius: 0;
}
.btn:focus-visible,
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
}
/* niente outline al solo click mouse, solo da tastiera (gestito da :focus-visible) */
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10001;
  background: var(--color-accent);
  color: var(--color-accent-on-fill);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  transition: top var(--transition-base);
}
.skip-link:focus { top: var(--space-4); }

/* ==========================================================================
   45. REDUCED MOTION — rispetta le preferenze utente
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in, .fade-in-left, .fade-in-right { opacity: 1 !important; transform: none !important; }
  .machine-card:hover { transform: none; }
}

/* ==========================================================================
   46. SKELETON LOADING (catalogo AJAX)
   ========================================================================== */
.machine-card--skeleton {
  pointer-events: none;
  border-color: var(--color-border);
}
.machine-card--skeleton .skel {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-sm);
}
.machine-card--skeleton .skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: skel-shimmer 1.4s infinite;
}
@keyframes skel-shimmer { 100% { transform: translateX(100%); } }
.skel--image { aspect-ratio: 4/3; }
.skel--line  { height: 12px; margin: var(--space-2) 0; }
.skel--line.w-60 { width: 60%; }
.skel--line.w-40 { width: 40%; }
.skel--line.w-80 { width: 80%; }

/* ==========================================================================
   47. CATALOGO — toolbar filtri sticky + sort + chips
   ========================================================================== */
.catalog-toolbar {
  position: sticky;
  top: 64px; /* sotto l'header */
  z-index: 50;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-8);
  transition: box-shadow var(--transition-base);
}
.catalog-toolbar.is-stuck { box-shadow: var(--shadow-md); }
.catalog-toolbar__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto;
  gap: var(--space-4);
  align-items: end;
  padding: var(--space-5) var(--space-6);
}
.catalog-toolbar select {
  width: 100%;
  padding: 10px 12px;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.catalog-toolbar select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.catalog-toolbar__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
  display: block;
  color: var(--color-text-secondary);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-6) var(--space-5);
  min-height: 0;
}
.filter-chips:empty { display: none; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.5rem 0.3rem 0.8rem;
  background: var(--color-accent-muted);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  font-weight: var(--fw-medium);
  animation: chip-in 0.25s cubic-bezier(0.22,1,0.36,1);
}
@keyframes chip-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
.filter-chip button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 0;
  background: var(--color-accent); color: var(--color-accent-on-fill);
  border: none; cursor: pointer; font-size: 12px; line-height: 1;
  transition: transform var(--transition-fast);
}
.filter-chip button:hover { transform: scale(1.15); }

/* ==========================================================================
   48. QUICK-VIEW MODAL
   ========================================================================== */
.machine-card__quickview {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.8rem;
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 0;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--transition-base), transform var(--transition-base), background var(--transition-fast);
  backdrop-filter: blur(6px);
}
.machine-card:hover .machine-card__quickview,
.machine-card:focus-within .machine-card__quickview { opacity: 1; transform: translateY(0); }
.machine-card__quickview:hover { background: var(--color-accent); color: var(--color-accent-on-fill); }
@media (hover: none) { .machine-card__quickview { opacity: 1; transform: none; } }

.quickview-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.quickview-modal.is-open { opacity: 1; pointer-events: auto; }
.quickview-modal__backdrop { position: absolute; inset: 0; background: rgba(9,13,24,0.8); backdrop-filter: blur(8px); }
.quickview-modal__dialog {
  position: relative; z-index: 2;
  width: 100%; max-width: 880px; margin: var(--space-4);
  max-height: 88vh; overflow: auto;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 20px 50px rgba(0,0,0,0.4);
  transform: translateY(24px) scale(0.98);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.quickview-modal.is-open .quickview-modal__dialog { transform: none; }
.quickview-modal__close {
  position: absolute; top: var(--space-4); right: var(--space-4); z-index: 5;
  width: 36px; height: 36px; border-radius: 0;
  background: var(--color-bg-elevated); color: var(--color-text-primary);
  border: 1px solid var(--color-border); cursor: pointer; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.quickview-modal__close:hover { background: var(--color-accent); color: var(--color-accent-on-fill); transform: rotate(90deg); }
.quickview-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.quickview-body__media { background: var(--color-bg-elevated); aspect-ratio: 4/3; }
.quickview-body__media img { width: 100%; height: 100%; object-fit: cover; }
.quickview-body__info { padding: var(--space-8); }
.quickview-loading { padding: var(--space-16); text-align: center; color: var(--color-text-muted); font-family: var(--font-mono); }
@media (max-width: 640px) {
  .quickview-body { grid-template-columns: 1fr; }
  .quickview-body__info { padding: var(--space-6); }
}

/* ==========================================================================
   49. STICKY MOBILE CTA (scheda macchinario)
   ========================================================================== */
.mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none;
  align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-strong);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.mobile-cta-bar.is-visible { transform: none; }
.mobile-cta-bar__price { font-weight: var(--fw-semibold); color: var(--color-accent-dark); white-space: nowrap; }
.mobile-cta-bar .btn { flex: 1; justify-content: center; }
@media (max-width: 1023px) {
  .mobile-cta-bar { display: flex; }
  body.has-mobile-cta { padding-bottom: 72px; }
}

/* ==========================================================================
   45. PAGINA DRW — RAPPRESENTANZE INDUSTRIALI
   ========================================================================== */

.drw-hero {
  padding-block: var(--space-20) var(--space-16);
  border-bottom: 1.5px solid var(--color-text-primary);
}
.drw-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6.5vw, 5.5rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  margin-top: var(--space-4);
  max-width: 16ch;
  text-wrap: balance;
}
.drw-hero__lead {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 52ch;
  margin-top: var(--space-6);
}

/* Il marchio sta nel titolo al posto della sigla "DRW": sopra, a capo,
   poi "rappresentanze industriali" in lowercase come prima. */
.drw-hero__logo {
  display: block;
  width: auto;
  height: clamp(2.75rem, 6vw, 4.5rem);
  margin-bottom: var(--space-5);
}

/* Il racconto sta in colonna stretta; a fianco i dati anagrafici come il
   cartiglio di una tavola: sempre gli stessi campi, sempre nello stesso posto. */
.drw-story__grid {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}
.drw-story__aside {
  position: sticky;
  top: 100px;
  border-top: 2px solid var(--color-text-primary);
  padding-top: var(--space-4);
}
.drw-story__aside .dim {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: var(--space-4);
}
.drw-story__fact {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  margin-top: var(--space-1);
  max-width: none;
}
.drw-story__body { font-size: var(--text-lg); line-height: 1.75; }
.drw-story__body > * + * { margin-top: var(--space-5); }
.drw-story__body p { color: var(--color-text-secondary); max-width: 60ch; }
.drw-story__body h2, .drw-story__body h3 { margin-top: var(--space-10); }

/* Le due aree: blocchi affiancati, numerati perche' sono davvero due e
   il titolare le nomina in quest'ordine. */
/* Aree e mandati sono un blocco solo: una cornice sola, le righe
   dentro separate dagli stessi filetti. */
.drw-blocco { border: 1.5px solid var(--color-text-primary); }
.drw-aree__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0;
  border-bottom: 1.5px solid var(--color-text-primary);
}
.drw-area {
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  border-right: 1.5px solid var(--color-text-primary);
}
.drw-area:last-child { border-right: none; }
.drw-area__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  color: var(--color-accent-dark);
}
.drw-area__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 var(--space-4);
}
.drw-area__text { color: var(--color-text-secondary); max-width: 46ch; }
.drw-area__text > * + * { margin-top: var(--space-3); }
.drw-area__text ul { list-style: none; padding: 0; }
.drw-area__text li {
  position: relative;
  padding-left: var(--space-5);
}
.drw-area__text li + li { margin-top: var(--space-1); }
/* Il trattino giallo delle etichette di sezione, anche per le voci. */
.drw-area__text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 10px;
  height: 2px;
  background: var(--color-accent);
}

/* Griglia marchi: ogni logo in una cella quadrata contornata, su bianco
   pieno perche' i loghi altrui sono disegnati per il bianco, non per la
   carta. In scala di grigi finche' non ci passi sopra: cosi' la griglia
   resta uniforme e nessun marchio urla piu' degli altri. */
/* Se non ci sono mandati pubblicati la fascia sparisce e le aree
   chiudono il blocco da sole: niente filetto appeso al vuoto. */
.drw-aree__grid--sola { border-bottom: none; }
.drw-marchi__testata {
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  padding-bottom: var(--space-6);
}
.drw-marchi__titolo {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: var(--space-3);
}
.drw-marchi__count { margin-top: var(--space-2); }
.drw-marchi__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  border-top: 1.5px solid var(--color-text-primary);
  list-style: none;
  padding: 0;
  /* L'ultima colonna e l'ultima riga appoggiano il filetto sulla cornice
     del blocco invece di raddoppiarlo. */
  margin: 0 -1.5px -1.5px 0;
}
.drw-marchio {
  border-right: 1.5px solid var(--color-text-primary);
  border-bottom: 1.5px solid var(--color-text-primary);
}
.drw-marchio__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
}
.drw-marchio__logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  min-height: 130px;
}
.drw-marchio__logo img {
  max-height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Se il logo manca, il nome del marchio prende il suo posto: la cella
   resta piena e la griglia non si sfalsa. */
.drw-marchio__wordmark {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  text-align: center;
}
.drw-marchio__meta {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--rule);
}
.drw-marchio__nome {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
.drw-marchio__settore {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.drw-marchio__btn {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-primary);
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.drw-marchio__btn:hover,
.drw-marchio__btn:focus-visible {
  background: var(--color-accent);
  color: var(--color-text-primary);
}

/* Sta dentro il blocco: prende il margine che la griglia non ha. */
.drw-marchi .drw-vuoto { margin: 0 clamp(var(--space-6), 3vw, var(--space-10)) clamp(var(--space-6), 3vw, var(--space-10)); }
.drw-vuoto {
  border: 1.5px dashed var(--rule-strong);
  padding: var(--space-8);
  background: var(--color-bg-elevated);
}
.drw-vuoto p { color: var(--color-text-secondary); }
.drw-vuoto p + p { margin-top: var(--space-3); }

/* Fiere ed eventi: righe di foto della stessa altezza, ognuna larga quanto
   serve a non tagliarla (da telefono ne arrivano di verticali e di
   orizzontali insieme). --r e' larghezza/altezza, scritto dal template:
   base e crescita di ogni foto sono proporzionali a lui, quindi la riga
   resta pari senza JavaScript. */
.drw-galleria__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}
/* Il riempitivo fa restare l'ultima riga alla misura naturale invece di
   allargarla a tutta pagina. */
.drw-galleria__grid::after { content: ""; flex-grow: 1000; }
.drw-foto {
  flex: calc(var(--r) * 100) 1 calc(var(--r) * 240px);
  min-width: 0;
}
.drw-foto a { display: block; cursor: zoom-in; }
.drw-foto img { display: block; width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; }
/* Il contorno e' un velo sopra la foto e non un bordo: un bordo toglierebbe
   spazio alla foto e sfalserebbe di un paio di pixel le righe. */
.drw-foto .galleria-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--color-text-primary);
  pointer-events: none;
}
/* Il cartellino sta sopra il velo del contorno ma non intercetta il clic:
   tutta la foto, cartellino compreso, apre l'ingrandimento. */
.drw-foto .galleria-foto__didascalia { z-index: 1; pointer-events: none; }

@media (max-width: 860px) {
  .drw-story__grid { grid-template-columns: 1fr; }
  .drw-story__aside { position: static; }
  .drw-area { border-right: none; border-bottom: 1.5px solid var(--color-text-primary); }
  .drw-area:last-child { border-bottom: none; }
}

/* ==========================================================================
   DOCUMENTI LEGALI (privacy policy, termini)
   ==========================================================================
   Una pagina che si legge per obbligo va resa facile da percorrere: colonna
   stretta, titoli numerati ben staccati, tabelle con i filetti del resto del
   sito. Niente di decorativo, serve trovare il paragrafo che interessa. */
.legal__wrap { max-width: 820px; }
.legal__testata { margin-bottom: var(--space-10); }
.legal__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  margin-top: var(--space-4);
}
.legal__body { font-size: var(--text-base); line-height: 1.8; }
.legal__body p,
.legal__body li { color: var(--color-text-secondary); }
.legal__body > * + * { margin-top: var(--space-4); }
.legal__intro {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-5);
}
.legal__body h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}
.legal__body h3 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-top: var(--space-6);
}
.legal__body ul { padding-left: var(--space-6); list-style: disc; }
.legal__body li + li { margin-top: var(--space-2); }
.legal__body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-elevated);
  padding: 1px 5px;
  border: 1px solid var(--rule);
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--rule-strong);
  font-size: var(--text-sm);
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
}
.legal-table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
}
.legal-table td { color: var(--color-text-secondary); }
.legal__nota { margin-top: var(--space-12); }
.legal__nota ul { padding-left: var(--space-6); list-style: disc; margin-top: var(--space-3); }
.legal__nota li { color: var(--color-text-secondary); }

@media (max-width: 640px) {
  /* Una tabella a tre colonne su telefono si legge scorrendola, non
     schiacciandola: meglio lo scorrimento orizzontale del testo a capo
     ogni due lettere. */
  .legal-table { display: block; overflow-x: auto; white-space: nowrap; }
  .legal-table td, .legal-table th { white-space: normal; min-width: 180px; }
}