/* ==========================================================================
   Caratteri ospitati sul nostro server
   Roboto v51, sottoinsiemi latin + latin-ext (il secondo serve alle lettere
   polacche: ą ć ę ł ń ś ź ż). Sei stili, gli stessi che il sito usava
   quando li chiedeva a Google.
   Ospitandoli qui il sito non contatta più server esterni: nessun dato del
   visitatore esce, e non serve alcun banner cookie.
   font-display: swap = il testo compare subito con un carattere di sistema
   e viene sostituito appena Roboto è pronto.
   ========================================================================== */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/font/roboto-v51-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/font/roboto-v51-latin_latin-ext-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/font/roboto-v51-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/font/roboto-v51-latin_latin-ext-500italic.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/font/roboto-v51-latin_latin-ext-700.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/font/roboto-v51-latin_latin-ext-900.woff2") format("woff2");
}

/* ==========================================================================
   WDB Automotive — Sito Corporate v2
   Direzione: enterprise pulito, molto respiro, hero full-bleed, movimento.

   PALETTE — gerarchia da Brand Guidelines §4:
   · Navy #172E41 e Grigio #4D4D4D restano i colori DOMINANTI del layout.
   · Il blu di accento è il navy schiarito: stessa famiglia, nessun colore estraneo.
     Regge CTA, link, icone e stati attivi.
   · Verde #009933 e Rosso #BA0000 NON sono colori di interfaccia: compaiono solo
     come micro-dettaglio tricolore (classe .tri) che cita la doppia freccia del
     logo e rinforza il posizionamento italiano.
   ========================================================================== */

:root {
  --navy: #172E41;

  /* Superfici scure — "nero con velatura navy".
     A colpo d'occhio leggono come nero, ma la sfumatura vira verso il blu
     profondo, così la scena conserva gli azzurri e il legame col marchio.
     Valori precedenti, se si volesse tornare al navy pieno:
       --navy-deep: #0C1A26 · --navy-grad: #12293B · footer fino a #081118 */
  --navy-deep: #050709;   /* base delle superfici scure */
  --navy-grad: #141C24;   /* centro delle sfumature */

  --navy-mid: #1E3D56;
  --navy-soft: #F2F5F8;
  --grey: #4D4D4D;
  --grey-mid: #667685;
  --grey-soft: #F7F9FA;

  /* Accento operativo — navy saturo, stessa tonalità del logo con più intensità */
  --blue: #12559E;        /* superfici piene: bottoni, righelli, bordi attivi */
  --blue-dark: #0F4780;   /* solo stati hover */
  --blue-bright: #5C9BE0; /* testo e dettagli su fondo scuro */
  --blue-soft: #E6EDF7;   /* tinte di sfondo per icone e tag */

  /* Tricolore — solo micro-dettagli, mai colore dominante */
  --tri-green: #009933;
  --tri-green-dark: #006020;
  --tri-red: #BA0000;
  --tri-red-bright: #FF0000;
  --red-soft: #FDEDED;
  --red-dark: #BA0000;

  --white: #FFFFFF;
  --line: #E4E9ED;
  --max: 1240px;
  --max-narrow: 900px;
  --r: 20px;
  --r-sm: 12px;
  --r-pill: 999px;
  /* Tipografia: Roboto come famiglia unica (titoli e testo).
     I titoli usano il peso 900 per compensare la neutralità del carattere. */
  --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: var(--font);
  --ease: cubic-bezier(.19, 1, .22, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--grey);
  background: var(--white);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
svg { display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: var(--max-narrow); margin: 0 auto; padding: 0 32px; }
@media (max-width: 620px) { .container, .container-narrow { padding: 0 22px; } }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--navy);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.018em;
}
/* H1 — maiuscolo in peso medio: più snello del 900, che a corpo grande
   risultava un blocco compatto. Il maiuscolo allarga la riga di circa un
   terzo, quindi il corpo è ridotto e l'interlinea leggermente aperta. */
h1 {
  font-size: clamp(2rem, 4.5vw, 3.35rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  line-height: 1.2;
}
/* H2 ridotto: restando in peso 900 minuscolo, alla stessa dimensione
   risulterebbe otticamente più pesante dell'H1 e ne ribalterebbe la gerarchia. */
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 22px; }
h3 { font-size: 1.35rem; margin-bottom: 12px; font-weight: 700; letter-spacing: -0.015em; }

p { margin-bottom: 18px; }

section { padding: 130px 0; position: relative; }
@media (max-width: 780px) { section { padding: 80px 0; } }

.bg-soft { background: var(--grey-soft); }

/* ---------- Eyebrow / section headers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--blue);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 30px; height: 2px;
  background: var(--blue);
  flex-shrink: 0;
}
.eyebrow.on-dark { color: var(--blue-bright); }
.eyebrow.on-dark::before { background: var(--blue-bright); }

/* Variante tricolore: il righello cita la doppia freccia del logo.
   Da usare sugli eyebrow principali, non su tutti, per non banalizzarlo. */
.eyebrow.tri::before {
  background: linear-gradient(
    90deg,
    var(--tri-green) 0 33.33%,
    #E8ECEF 33.33% 66.66%,
    var(--tri-red) 66.66% 100%
  );
  width: 34px;
  height: 3px;
  border-radius: 1.5px;
}
.eyebrow.tri.on-dark::before {
  background: linear-gradient(
    90deg,
    var(--tri-green) 0 33.33%,
    rgba(255,255,255,0.85) 33.33% 66.66%,
    var(--tri-red-bright) 66.66% 100%
  );
}

/* Righello tricolore autonomo (es. sotto i numeri chiave) */
.rule-tri {
  width: 44px; height: 3px; border-radius: 1.5px;
  background: linear-gradient(
    90deg,
    var(--tri-green) 0 33.33%,
    #E8ECEF 33.33% 66.66%,
    var(--tri-red) 66.66% 100%
  );
}

.section-head { max-width: 760px; margin-bottom: 72px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

.lead {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--grey-mid);
  line-height: 1.65;
  font-weight: 400;
}

/* Prima frase del sottotitolo in bianco pieno: fa da ponte fra il titolo e
   l'elenco dei servizi, che resta nel grigio chiaro del testo di supporto.
   Peso normale — l'enfasi è affidata al colore, non al grassetto. */
/* Frase chiave dell'hero: emerge con corpo, peso e colore, restando in
   minuscolo per non contendere il ruolo al titolo, che è in maiuscolo.
   Il corpo resta circa la metà dell'H1 a tutte le larghezze. */
.lead-strong {
  display: block;
  color: var(--white);
  font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.35;
  margin-bottom: 10px;     /* unico stacco: fra la frase bianca e l'elenco */
}
/* L'elenco dei servizi va a capo più volte: interlinea più stretta, così le
   sue righe restano un blocco compatto invece di sfilacciarsi. */
.lead-list {
  display: block;
  line-height: 1.35;
}

/* ---------- Motion ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-1 { transition-delay: .1s; }
.reveal-2 { transition-delay: .2s; }
.reveal-3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 20px 0;
  transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.solid {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 12px 0;
  box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(12,26,38,0.06);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.logo-link img { height: 38px; width: auto; transition: height .35s var(--ease); }
.site-header.solid .logo-link img { height: 32px; }

.logo-light { display: block; }
.logo-dark { display: none; }
.site-header.solid .logo-light { display: none; }
.site-header.solid .logo-dark { display: block; }
/* Pagine con header chiaro fin dall'inizio */
.site-header.always-solid .logo-light { display: none; }
.site-header.always-solid .logo-dark { display: block; }

.main-nav ul { display: flex; list-style: none; gap: 4px; flex-wrap: wrap; }
.main-nav a {
  font-weight: 600;
  font-size: 0.94rem;
  color: rgba(255,255,255,0.86);
  padding: 9px 16px;
  border-radius: var(--r-pill);
  transition: color .2s ease, background .2s ease;
}
.main-nav a:hover { color: var(--white); background: rgba(255,255,255,0.12); }
.main-nav a.active { color: var(--white); background: rgba(255,255,255,0.16); }

.site-header.solid .main-nav a,
.site-header.always-solid .main-nav a { color: var(--navy); }
.site-header.solid .main-nav a:hover,
.site-header.always-solid .main-nav a:hover { background: var(--navy-soft); }
.site-header.solid .main-nav a.active,
.site-header.always-solid .main-nav a.active { background: var(--navy); color: var(--white); }

.header-cta {
  background: var(--blue);
  color: var(--white) !important;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background .2s ease, transform .2s var(--ease);
}
.header-cta:hover { background: var(--blue-dark); transform: translateY(-2px); }

/* ---------- Selettore lingua ----------
   <details> nativo: si apre senza JavaScript, è raggiungibile da tastiera
   e i link restano leggibili dai motori di ricerca. */
.lang-switch { position: relative; flex-shrink: 0; }
.lang-switch summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.86);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::marker { content: ""; }
.lang-switch summary svg { width: 17px; height: 17px; flex-shrink: 0; }
.lang-switch summary:hover { color: var(--white); background: rgba(255,255,255,0.12); }
.lang-switch[open] summary { background: rgba(255,255,255,0.14); color: var(--white); }

.site-header.solid .lang-switch summary,
.site-header.always-solid .lang-switch summary { color: var(--navy); border-color: var(--line); }
.site-header.solid .lang-switch summary:hover,
.site-header.always-solid .lang-switch summary:hover,
.site-header.solid .lang-switch[open] summary,
.site-header.always-solid .lang-switch[open] summary { background: var(--navy-soft); color: var(--navy); }

.lang-switch ul {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 186px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(12,26,38,0.16);
  padding: 6px;
  z-index: 5;
}
.lang-switch ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  transition: background .18s ease;
}
.lang-switch ul a span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--grey-mid);
}
.lang-switch ul a:hover { background: var(--navy-soft); }
.lang-switch ul a[aria-current] { background: var(--navy); color: var(--white); }
.lang-switch ul a[aria-current] span { color: rgba(255,255,255,0.66); }

.nav-toggle {
  display: none;
  background: none; border: none;
  color: var(--white);
  cursor: pointer;
  padding: 6px;
}
.nav-toggle svg { width: 28px; height: 28px; }
.site-header.solid .nav-toggle,
.site-header.always-solid .nav-toggle { color: var(--navy); }

@media (max-width: 980px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .main-nav {
    position: fixed;
    inset: 0;
    background: var(--navy-deep);
    display: none;
    padding: 110px 32px 40px;
    overflow-y: auto;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 2px; }
  .main-nav a,
  .site-header.solid .main-nav a,
  .site-header.always-solid .main-nav a {
    display: block;
    color: rgba(255,255,255,0.9);
    font-size: 1.3rem;
    font-family: var(--display);
    font-weight: 700;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    background: none;
  }
  .main-nav a.active,
  .site-header.solid .main-nav a.active { color: var(--blue-bright); background: none; }
  body.nav-open { overflow: hidden; }

  /* A menu aperto l'intestazione deve smettere di fare da riquadro di
     riferimento al pannello. backdrop-filter, come transform e filter, rende
     l'elemento il contenitore dei discendenti a posizione fissa: con la barra
     solida il menu si ritrovava alto 88 px, schiacciato dentro la barra
     stessa, invece di coprire lo schermo. Togliendo la sfocatura mentre il
     menu e' aperto, "fixed" torna a riferirsi alla finestra. */
  body.nav-open .site-header.solid,
  body.nav-open .site-header.always-solid {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    box-shadow: none;
  }

  /* Il pannello e' a posizione fissa, quindi copre i fratelli non posizionati:
     logo, bottone e selettore lingua vanno sollevati sopra di lui, altrimenti
     spariscono dietro al fondo scuro e il menu non si puo' piu' chiudere. */
  body.nav-open .logo-link,
  body.nav-open .nav-toggle,
  body.nav-open .lang-switch { position: relative; z-index: 2; }

  body.nav-open .nav-toggle,
  body.nav-open .site-header.solid .nav-toggle,
  body.nav-open .site-header.always-solid .nav-toggle { color: var(--white); }

  /* Logo e selettore lingua: a menu aperto il fondo e' scuro, quindi servono
     le versioni chiare. Le regole vanno ripetute includendo .solid e
     .always-solid perche' altrimenti perdono per specificita' contro
     ".site-header.solid .logo-light", che ha una classe in piu'. */
  body.nav-open .logo-light,
  body.nav-open .site-header.solid .logo-light,
  body.nav-open .site-header.always-solid .logo-light { display: block; }

  body.nav-open .logo-dark,
  body.nav-open .site-header.solid .logo-dark,
  body.nav-open .site-header.always-solid .logo-dark { display: none; }

  /* Il selettore lingua resta accessibile anche a menu aperto */
  .lang-switch { margin-left: auto; }
  .lang-switch summary { padding: 7px 11px; font-size: 0.8rem; }
  .lang-switch summary svg { width: 15px; height: 15px; }

  body.nav-open .lang-switch summary,
  body.nav-open .site-header.solid .lang-switch summary,
  body.nav-open .site-header.always-solid .lang-switch summary {
    color: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.3);
    background: transparent;
  }
  body.nav-open .site-header.solid .lang-switch summary:hover,
  body.nav-open .site-header.always-solid .lang-switch summary:hover,
  body.nav-open .site-header.solid .lang-switch[open] summary,
  body.nav-open .site-header.always-solid .lang-switch[open] summary {
    background: rgba(255,255,255,0.14);
    color: var(--white);
  }
}

/* ---------- Hero full-bleed ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--navy-deep);
  color: var(--white);
  padding: 160px 0 100px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg svg { width: 100%; height: 100%; }

/* ==========================================================================
   SFONDO ANIMATO DELL'HERO (solo home)
   Lo scenario prende vita: scie che attraversano, nodi che pulsano sfalsati,
   onda diagnostica che si traccia come su un oscilloscopio, ingranaggio che
   compie un giro al minuto. Tutto sotto la velatura scura, così il testo
   resta il primo elemento letto.
   ========================================================================== */
@keyframes hero-scia {
  0%   { transform: translateX(-300px); opacity: 0; }
  12%  { opacity: .9; }
  70%  { opacity: .9; }
  100% { transform: translateX(420px); opacity: 0; }
}
@keyframes hero-battito {
  0%, 100% { opacity: .95; transform: scale(1); }
  50%      { opacity: .45; transform: scale(1.5); }
}
@keyframes hero-respiro { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@keyframes hero-giro    { to { transform: rotate(360deg); } }
@keyframes hero-traccia {
  0%   { stroke-dashoffset: 640; }
  55%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes hero-deriva  { to { transform: translateY(26px); } }

.hero-live .h-scia   { animation: hero-scia 7s linear infinite; }
.hero-live .h-scia-2 { animation-duration: 9s;  animation-delay: 1.4s; }
.hero-live .h-scia-3 { animation-duration: 8s;  animation-delay: 3s; }
.hero-live .h-scia-4 { animation-duration: 11s; animation-delay: .6s; }
.hero-live .h-nodo {
  transform-box: fill-box; transform-origin: center;
  animation: hero-battito 3.4s ease-in-out infinite;
}
.hero-live .h-nodo:nth-of-type(2) { animation-delay: .7s; }
.hero-live .h-nodo:nth-of-type(3) { animation-delay: 1.4s; }
.hero-live .h-nodo:nth-of-type(4) { animation-delay: 2.1s; }
.hero-live .h-nodo:nth-of-type(5) { animation-delay: 2.8s; }
.hero-live .h-alone   { animation: hero-respiro 9s ease-in-out infinite; }
.hero-live .h-alone-2 { animation-delay: 4s; }
.hero-live .h-ingr {
  transform-box: fill-box; transform-origin: center;
  animation: hero-giro 60s linear infinite;
}
.hero-live .h-onda {
  stroke-dasharray: 640; stroke-dashoffset: 640;
  animation: hero-traccia 5.5s ease-in-out infinite;
}
.hero-live .h-grid { animation: hero-deriva 9s linear infinite; }

/* ---------- Costellazione dell'hero in home ----------
   Ciclo unico di 15s per tutti gli elementi: i ritardi in linea nel markup
   decidono l'ordine di comparsa, così la rete sembra costruirsi da sé.
   pathLength="100" normalizza i tratteggi: ogni arco si traccia nello stesso
   tempo indipendentemente dalla sua lunghezza reale. */
.hero-live .cs-arco {
  stroke-width: 1.3;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: cs-traccia 15s ease-in-out infinite backwards;
}
@keyframes cs-traccia {
  0%, 3%    { stroke-dashoffset: 100; opacity: 0; }
  16%       { stroke-dashoffset: 0;   opacity: .5; }
  84%       { stroke-dashoffset: 0;   opacity: .5; }
  96%, 100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* I punti compaiono in dissolvenza, senza scatti di scala: lo sbalzo
   oltre la dimensione finale li faceva scoppiettare. */
.hero-live .cs-nodo { animation: cs-accendi 15s ease-in-out infinite backwards; }
@keyframes cs-accendi {
  0%, 2%    { opacity: 0; }
  15%       { opacity: 1; }
  86%       { opacity: 1; }
  97%, 100% { opacity: 0; }
}

/* Anelli che si espandono da alcuni nodi, come un segnale che parte */
.hero-live .cs-alone {
  fill: none; stroke-width: 1.4;
  transform-box: fill-box; transform-origin: center;
  animation: cs-onda 15s ease-out infinite backwards;
}
@keyframes cs-onda {
  0%, 20%  { opacity: 0;   transform: scale(.4); }
  26%      { opacity: .55; transform: scale(1); }
  46%      { opacity: 0;   transform: scale(3.4); }
  100%     { opacity: 0;   transform: scale(3.4); }
}

/* Impulsi che percorrono i collegamenti dopo che la rete è formata */
.hero-live .cs-impulso {
  stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 7 93;
  animation: cs-transito 15s cubic-bezier(.5,0,.5,1) infinite backwards;
}
@keyframes cs-transito {
  0%, 28%   { stroke-dashoffset: 100; opacity: 0; }
  32%       { opacity: .95; }
  60%       { stroke-dashoffset: 0;   opacity: .95; }
  66%, 100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* Nastri di titoli che scorrono in orizzontale (hero della pagina News).
   Il contenuto è duplicato: quando la prima copia esce, la seconda è già in
   posizione, quindi lo scorrimento non ha stacchi. Il nastro centrale va in
   senso opposto agli altri due. */
@keyframes nt-sx { to   { transform: translateX(-50%); } }
@keyframes nt-dx { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.hero-live .nt-1 { animation: nt-sx 44s linear infinite; }
.hero-live .nt-2 { animation: nt-dx 58s linear infinite; }
.hero-live .nt-3 { animation: nt-sx 36s linear infinite; }

/* Il comunicato che si scrive (hero degli articoli).
   Le barre crescono in larghezza con una scalatura ancorata a sinistra:
   più affidabile dell'animazione di width sugli elementi SVG. */
.hero-live .rd-titolo,
.hero-live .rd-riga {
  transform-box: fill-box;
  transform-origin: left center;
  animation: rd-scrivi 11s cubic-bezier(.3,0,.25,1) infinite backwards;
}
@keyframes rd-scrivi {
  0%        { transform: scaleX(0); opacity: 1; }
  9%        { transform: scaleX(1); opacity: 1; }
  86%       { transform: scaleX(1); opacity: 1; }
  96%, 100% { transform: scaleX(1); opacity: 0; }
}

/* Ponti fra i due insiemi: si tracciano dopo, sono il senso dell'immagine */
.hero-live .cs-ponte {
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: cs-ponte 15s ease-in-out infinite backwards;
}
@keyframes cs-ponte {
  0%, 18%   { stroke-dashoffset: 100; opacity: 0; }
  34%       { stroke-dashoffset: 0;   opacity: .8; }
  84%       { stroke-dashoffset: 0;   opacity: .8; }
  96%, 100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* Deriva lentissima dell'intera scena: toglie la sensazione di immagine fissa */
.hero-live .cs-scena { animation: cs-deriva 26s ease-in-out infinite; }
@keyframes cs-deriva {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-14px, 10px); }
}

/* Raggi dal centro verso i punti della rete: il tratteggio scorre verso
   l'esterno, sfalsato, come un'erogazione continua. */
.hero-live .h-raggio {
  stroke-dasharray: 9 11;
  animation: hero-erogazione 2.6s linear infinite;
}
.hero-live .h-raggio-2 { animation-delay: .35s; }
.hero-live .h-raggio-3 { animation-delay: .7s; }
.hero-live .h-raggio-4 { animation-delay: 1.05s; }
.hero-live .h-raggio-5 { animation-delay: 1.4s; }
@keyframes hero-erogazione { to { stroke-dashoffset: -40; } }

/* Percorso a gradini dell'hero di Chi Siamo: si traccia dal basso verso
   l'alto e poi svanisce. Il tratteggio vale quanto l'intera lunghezza
   del percorso (752 unità), così parte davvero da zero. */
.hero-live .h-salita {
  stroke-dasharray: 752;
  stroke-dashoffset: 752;
  animation: hero-salita 8s ease-in-out infinite;
}
@keyframes hero-salita {
  0%   { stroke-dashoffset: 752; opacity: 1; }
  55%  { stroke-dashoffset: 0;   opacity: 1; }
  86%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* Nell'hero di pagina lo sfondo statico è attenuato a .5; quando è animato
   lo porto a piena resa e alleggerisco la velatura sul lato destro, dove
   non c'è testo. A sinistra resta fitta, così titolo e occhiello restano
   il primo elemento letto. */
.page-hero.hero-live .hero-bg { opacity: 1; }
.page-hero.hero-live::after {
  background: linear-gradient(100deg, rgba(5,7,9,0.94) 24%, rgba(5,7,9,0.40) 100%);
}
@media (max-width: 900px) {
  .page-hero.hero-live::after {
    background: linear-gradient(180deg, rgba(5,7,9,0.88) 0%, rgba(5,7,9,0.96) 62%);
  }
}

/* ---------- Destinatario che cambia nel titolo ----------
   Le varianti sono impilate nella stessa cella di griglia: la più larga
   fissa l'ingombro, così la riga non salta a ogni cambio. */
.rot { display: inline-grid; vertical-align: bottom; }
.rot > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity .5s ease, transform .5s var(--ease);
  white-space: nowrap;
  color: var(--blue-bright);
}
.rot > span.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-live * { animation: none !important; }
  .rot > span { opacity: 1; transform: none; transition: none; }
  .rot > span:not(:first-child) { display: none; }
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,7,9,0.96) 0%, rgba(5,7,9,0.82) 45%, rgba(5,7,9,0.35) 100%);
  z-index: 1;
}
@media (max-width: 900px) {
  .hero::after { background: linear-gradient(180deg, rgba(5,7,9,0.9) 0%, rgba(5,7,9,0.96) 60%); }
}
.hero .container { position: relative; z-index: 2; width: 100%; }
/* Allargato da 780 a 900px insieme all'aumento del titolo: la variante più
   lunga, "DEI NETWORK DI OFFICINE", altrimenti andrebbe a capo. */
.hero-inner { max-width: 900px; }
.hero h1 { color: var(--white); margin-bottom: 28px; }
/* Tagline — Brand Guidelines §6: sempre in corsivo, bianca su fondo scuro,
   tono colloquiale ma tecnico. Preceduta dalla barra tricolore che richiama
   la doppia freccia del logo. */
.hero .tagline {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--white);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.1vw, 1.7rem);
  letter-spacing: 0.005em;
  line-height: 1.3;
  text-transform: none;
  margin-bottom: 30px;
}
.hero .tagline::before {
  content: "";
  flex-shrink: 0;
  width: 52px;
  height: 5px;
  border-radius: 2.5px;
  background: linear-gradient(
    90deg,
    var(--tri-green) 0 33.33%,
    #FFFFFF 33.33% 66.66%,
    var(--tri-red-bright) 66.66% 100%
  );
}
@media (max-width: 620px) {
  .hero .tagline { gap: 13px; }
  .hero .tagline::before { width: 38px; height: 4px; }
}

/* La tagline ovunque compaia nel testo va in corsivo */
.tagline-text { font-style: italic; }

/* ---------- Scioglimento della sigla ----------
   "Workshop Data Bank" accompagna il logo e rende WDB autoesplicativo.
   Non sostituisce la tagline: è una didascalia del nome, non un motto,
   quindi resta in tondo e discreta per non competere con il corsivo. */
.wdb-unfold {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9em;
  font-size: 0.8rem;
  font-weight: 400;
  /* Corsivo per riprendere l'inclinazione del "WDB" del logo */
  font-style: italic;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  margin: 0;
  line-height: 1.6;
}
.wdb-unfold b {
  font-weight: 900;
  font-style: italic;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.24em;
}
.wdb-unfold.on-light { color: var(--grey-mid); }
.wdb-unfold.on-light b { color: var(--navy); }
.wdb-unfold.left { justify-content: flex-start; }
/* Lo sviluppo della sigla citato nel testo corrente */
.wdb-nome { font-style: italic; }

@media (max-width: 620px) {
  .wdb-unfold { font-size: 0.7rem; letter-spacing: 0.18em; gap: 0.7em; }
  .wdb-unfold b { letter-spacing: 0.18em; }
}
.hero .lead { color: rgba(255,255,255,0.75); max-width: 620px; margin-bottom: 42px; }

/* ---------- Fila dei marchi nell'hero ----------
   I loghi originali hanno colori molto diversi fra loro e diversi contengono
   elementi neri, che su questo fondo sparirebbero. Il filtro li appiattisce
   in una sagoma monotona chiara: leggibili tutti, e nessuno prevale sugli
   altri. L'opacità tiene la fila subordinata al testo; al passaggio del
   mouse il singolo logo si schiarisce. */
.hero-brands {
  display: flex;
  align-items: center;
  /* Lo spazio fra i loghi si adatta alla larghezza disponibile: sopra i
     1100px resta una riga sola, sotto si stringe prima di andare a capo. */
  justify-content: space-between;
  gap: clamp(14px, 2.4vw, 40px);
  flex-wrap: nowrap;
  margin-top: 66px;
  padding-top: 38px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.hero-brands .hb { flex-shrink: 0; }
.hero-brands .hb {
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.62;
  transition: opacity .25s ease;
}
.hero-brands .hb:hover { opacity: 1; }

/* Altezze calibrate una per una: i marchi hanno proporzioni diverse
   (da 3.1:1 a 4.6:1) e a pari altezza risulterebbero squilibrati.
   Con questi valori la fila occupa circa l'83% della larghezza utile,
   quindi resta su una riga sola senza risultare compressa. */
.hb-techdata   { height: 29px; }
.hb-axitecnica { height: 23px; }
.hb-semarepair { height: 29px; }
.hb-evergest   { height: 24px; }
.hb-academy    { height: 31px; }
.hb-edizioni   { height: 26px; }
.hb-officina   { height: 27px; }

@media (max-width: 900px) {
  .hero-brands { margin-top: 44px; padding-top: 28px; }
  .hb-techdata, .hb-semarepair { height: 23px; }
  .hb-academy { height: 25px; }
  .hb-officina, .hb-edizioni { height: 21px; }
  .hb-axitecnica, .hb-evergest { height: 19px; }
}
/* Sotto i 660px i sette marchi non ci stanno più in riga: si dispongono su
   due righe centrate, che è più leggibile di un'unica fila microscopica. */
@media (max-width: 660px) {
  .hero-brands {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 18px 22px;
  }
  .hb-techdata, .hb-semarepair { height: 20px; }
  .hb-academy { height: 22px; }
  .hb-officina, .hb-edizioni { height: 18px; }
  .hb-axitecnica, .hb-evergest { height: 17px; }
}

.hero-meta {
  display: flex;
  gap: 56px;
  margin-top: 72px;
  flex-wrap: wrap;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.hero-meta .m-num {
  font-family: var(--display);
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero-meta .m-lab {
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
  margin-top: 8px;
  letter-spacing: 0.02em;
}
@media (max-width: 620px) { .hero-meta { gap: 32px; } .hero-meta .m-num { font-size: 1.8rem; } }

.scroll-hint {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.45);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.scroll-hint svg { width: 18px; height: 18px; animation: bob 2s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (max-width: 900px) { .scroll-hint { display: none; } }

/* ---------- Page hero (pagine interne) ---------- */
.page-hero {
  position: relative;
  background: var(--navy-deep);
  color: var(--white);
  padding: 200px 0 110px;
  overflow: hidden;
}
.page-hero .hero-bg { opacity: .5; }
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(5,7,9,0.95) 30%, rgba(5,7,9,0.6) 100%);
  z-index: 1;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: var(--white); margin-bottom: 24px; max-width: 900px; }
.page-hero .lead { color: rgba(255,255,255,0.72); max-width: 660px; }
@media (max-width: 780px) { .page-hero { padding: 150px 0 70px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 34px;
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .25s var(--ease), background .25s ease, border-color .25s ease, color .25s ease;
}
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-3px); }
.btn-ghost { border-color: rgba(255,255,255,0.35); color: var(--white); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.08); transform: translateY(-3px); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-deep); transform: translateY(-3px); }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }
.mt-56 { margin-top: 56px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--blue);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  transition: gap .25s var(--ease);
}
.link-arrow svg { width: 17px; height: 17px; }
.link-arrow:hover { gap: 15px; }
.link-arrow.on-dark { color: var(--blue-bright); }

/* ---------- Grid ---------- */
.grid { display: grid; gap: 32px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); gap: 64px; }
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 640px) {
  .grid-4, .grid-3 { grid-template-columns: 1fr; }
}

/* ---------- Feature (flat, senza bordi pesanti) ---------- */
.feature { padding: 0; }
.feature .f-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 26px;
}
.feature .f-icon svg { width: 27px; height: 27px; }
/* Icone feature uniformi (blue-soft su blue).
   Le varianti .navy e .deep restano definite qui sotto ma non sono più usate:
   basta riaggiungere la classe nell'HTML per recuperarle. */
.feature .f-icon.navy { background: var(--navy-soft); color: var(--navy); }
.feature .f-icon.deep { background: var(--navy); color: var(--white); }
.feature p { color: var(--grey-mid); margin-bottom: 0; }

/* ---------- Product rows (righe alternate grandi) ---------- */
@media (max-width: 1000px) {
}

/* Tag di categoria: uniformi, i prodotti si distinguono già dai visual */
.ptag.red,

/* Visual placeholder grafico */
.visual {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--navy-deep);
  display: flex; align-items: center; justify-content: center;
}
.visual svg.art,
.visual img.art { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.visual .visual-label {
  position: relative; z-index: 2;
  color: rgba(255,255,255,0.9);
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  text-align: center;
  padding: 24px;
}
.visual.tall { aspect-ratio: 3 / 4; }
.visual.wide { aspect-ratio: 16 / 9; }

/* ---------- Stat band ---------- */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
@media (max-width: 900px) { .stat-band { grid-template-columns: repeat(2, 1fr); gap: 44px; } }
@media (max-width: 480px) { .stat-band { grid-template-columns: 1fr; } }
.stat-item { text-align: left; }
.stat-item .s-num {
  font-family: var(--display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
}
.stat-item .s-lab { color: var(--grey-mid); font-size: 0.95rem; margin-top: 14px; }
.stat-item .s-rule { width: 44px; height: 3px; background: var(--blue); margin-bottom: 24px; }
.on-navy .stat-item .s-num { color: var(--white); }
.on-navy .stat-item .s-lab { color: rgba(255,255,255,0.6); }

/* ---------- CTA band full-bleed ---------- */
.cta-band {
  position: relative;
  background: var(--navy-deep);
  color: var(--white);
  padding: 120px 0;
  overflow: hidden;
}
.cta-band .hero-bg { opacity: .45; }
.cta-band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(5,7,9,0.9) 20%, rgba(5,7,9,0.55) 100%);
  z-index: 1;
}
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.72); font-size: 1.15rem; }

/* ---------- Timeline ---------- */
@media (max-width: 780px) {
}

/* ---------- Value rows ---------- */
.vrow { display: grid; grid-template-columns: 64px 1fr; gap: 28px; padding: 40px 0; border-top: 1px solid var(--line); align-items: start; }
.vrow:last-child { border-bottom: 1px solid var(--line); }
.vrow .v-num {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.05em;
}
.vrow h3 { margin-bottom: 10px; }
.vrow p { color: var(--grey-mid); margin-bottom: 0; }
@media (max-width: 640px) { .vrow { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; } }

/* ---------- Forms ---------- */
.form-wrap {
  background: var(--white);
  border-radius: var(--r);
  padding: 48px;
  box-shadow: 0 30px 70px rgba(12,26,38,0.10);
}
@media (max-width: 620px) { .form-wrap { padding: 30px 24px; } }
/* Due campi affiancati: quando un'etichetta va a capo il campo si abbassa e
   la riga si sfalsa. Con la griglia condivisa etichette e campi restano
   allineati fra loro; align-items:end fa da riserva sui browser più vecchi. */
.form-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 9px; align-items: end; }
@supports (grid-template-rows: subgrid) {
  .form-row { grid-template-rows: auto auto; align-items: stretch; }
  .form-row > .field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    align-content: start;
  }
  .form-row > .field label { align-self: end; }
}
@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-row, .form-row > .field { grid-template-rows: none; }
  .form-row > .field { display: flex; }
}

.field { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.field label { font-family: var(--display); font-weight: 700; font-size: 0.85rem; color: var(--navy); letter-spacing: 0.01em; }
.field input, .field select, .field textarea {
  padding: 15px 0;
  border: none;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--navy);
  background: transparent;
  transition: border-color .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--blue);
}
.field textarea { resize: vertical; }
/* Campo trappola per i robot: invisibile ma raggiungibile dai lettori di schermo */
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Esito dell'invio, al ritorno dal server */
.form-esito {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.95rem;
}
.form-esito.ok { background: #E8F5EC; color: var(--tri-green-dark); }
.form-esito.ko { background: #FCECEC; color: var(--tri-red); }

.consent { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; margin: 8px 0 28px; color: var(--grey-mid); }
.consent input { margin-top: 5px; }

/* ---------- Note interna (solo revisione) ---------- */
.note {
  display: flex; gap: 14px; align-items: flex-start;
  background: #FFFAF0;
  border-left: 3px solid #E8B33C;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 18px 22px;
  font-size: 0.88rem;
  color: #7A5A10;
  margin-top: 28px;
}
.note svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 3px; color: #E8B33C; }

/* ---------- Placeholder blocchi ---------- */
.ph {
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  padding: 64px 40px;
  text-align: center;
  color: var(--grey-mid);
  background: var(--grey-soft);
}
.ph svg { width: 34px; height: 34px; margin: 0 auto 18px; color: #B9C4CE; }

/* ---------- Fila dei partner ----------
   I loghi arrivano dal documento aziendale e sono già in scala di grigi, su
   fondo bianco: la sezione usa quindi il bianco pieno, così i bordi dei file
   si fondono col fondo senza aloni. */
.partner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.6vw, 44px);
  flex-wrap: wrap;
}
.partner-row img {
  flex-shrink: 0;
  width: auto;
  opacity: 0.75;
  transition: opacity .25s ease;
}
.partner-row img:hover { opacity: 1; }

/* Altezze calibrate: i loghi vanno da 1:1 a 5:1 di proporzione */
.pt-total      { height: 40px; }
.pt-pirelli    { height: 30px; }
.pt-launch     { height: 26px; }
.pt-marelli    { height: 46px; }
.pt-systemdata { height: 32px; }
.pt-ad         { height: 48px; }
.pt-giadi      { height: 44px; }

@media (max-width: 900px) {
  .partner-row { justify-content: center; gap: 26px 30px; }
  .pt-total { height: 30px; } .pt-pirelli { height: 23px; }
  .pt-launch { height: 20px; } .pt-marelli { height: 34px; }
  .pt-systemdata { height: 24px; } .pt-ad { height: 36px; }
  .pt-giadi { height: 33px; }
}

/* ---------- News ---------- */
.n-kind {
  font-family: var(--display);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 5px 10px; border-radius: 5px;
}

/* ---------- Contatti ---------- */
.c-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.c-ico svg { width: 21px; height: 21px; }

/* ==========================================================================
   SEZIONE SERVIZI — "Un unico partner per il tuo business"
   Riproduzione in HTML del visual istituzionale: arco luminoso, griglia di
   servizi su tre colonne e logo al centro-basso. I nomi dei servizi sono
   testo reale (SEO + screen reader), non parte di un'immagine.
   ========================================================================== */
.services {
  position: relative;
  background: var(--navy-deep);
  padding: 120px 0 0;
  overflow: hidden;
}
.services::before {            /* trama di punti, come nell'hero */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}
.services .globe {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  min-height: 340px;
  pointer-events: none;
  z-index: 0;
}
.services .globe img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }

/* rete di collegamenti animata: sta sopra il globo ma sotto ai testi,
   così le linee non riducono mai la leggibilità delle voci di servizio */
.services .svc-links {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.services .container { position: relative; z-index: 2; }

/* griglia 3 colonne × 4 righe; la cella centrale in basso resta libera
   perché lì si inserisce il logo, esattamente come nel visual originale */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 58px 40px;
  text-align: center;
  margin-bottom: 64px;
}
.svc {
  color: rgba(255,255,255,0.92);
  line-height: 1.32;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.svc .s-a {                    /* prima riga, leggera */
  display: block;
  font-weight: 400;
  font-size: 0.94rem;
  color: rgba(255,255,255,0.72);
}
.svc .s-b {                    /* seconda riga, in evidenza */
  display: block;
  font-weight: 700;
  font-size: 1.06rem;
  color: #fff;
}
.svc.center-gap { visibility: hidden; }   /* cella lasciata libera per il logo */

/* logo + claim */
.svc-brand {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-bottom: 96px;
}
.svc-brand img { height: 104px; width: auto; margin: 0 auto 22px; }
.svc-brand .wdb-unfold { margin-bottom: 30px; }
.svc-claim {
  color: #fff;
  font-weight: 900;
  font-size: clamp(1.05rem, 2.1vw, 1.65rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0;
}

@media (max-width: 900px) {
  .services { padding-top: 80px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 26px; margin-bottom: 48px; }
  .svc.center-gap { display: none; }       /* su mobile la cella vuota non serve */
  .svc .s-a { font-size: 0.82rem; }
  .svc .s-b { font-size: 0.92rem; }
  .svc-brand img { height: 74px; }
  .svc-brand { padding-bottom: 70px; }
  .services .globe { height: 46%; min-height: 260px; }
}
@media (max-width: 520px) {
  .svc-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(180deg, var(--navy-grad) 0%, var(--navy-deep) 100%); color: rgba(255,255,255,0.6); padding: 90px 0 36px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }
.site-footer h3 { color: var(--white); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 22px; font-weight: 700; }
.site-footer .logo-link img { height: 34px; margin-bottom: 22px; }
.site-footer .f-blurb { font-size: 0.95rem; max-width: 300px; line-height: 1.7; }

.f-links { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.f-links a { font-size: 0.95rem; transition: color .2s ease; }
.f-links a:hover { color: var(--blue-bright); }

/* ---------- Profili social nel footer ---------- */
.f-social { list-style: none; display: flex; gap: 10px; margin-top: 20px; }
.f-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  color: rgba(255,255,255,0.72);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.f-social a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.34);
}
.f-social svg { width: 17px; height: 17px; }
/* Riga legale del footer */
.footer-bottom .f-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; margin: 0; padding: 0; }
.footer-bottom .f-legal a { font-size: inherit; }
.footer-bottom .f-legal a:hover { color: var(--blue-bright); }
/* Segnaposto per i dati societari ancora da fornire */
.c-fax { color: var(--grey-mid); font-size: 0.92em; }
.footer-bottom { padding-top: 30px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.85rem; color: rgba(255,255,255,0.4); }

/* Utility */
/* Righe di lettura corte, ma allineate al bordo sinistro del contenitore */
.mt-72 { margin-top: 72px; }
.mt-40 { margin-top: 40px; }

/* ============ SEDI OPERATIVE (Chi Siamo) ============ */
.sedi-blocco {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.sedi-mappa { position: relative; justify-self: center; width: 100%; max-width: 420px; }
.sedi-mappa img { display: block; width: 100%; height: auto; }
/* I segnaposto sono in percentuale sull'immagine: restano allineati a ogni dimensione */
.sede-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid var(--white);
  box-shadow: 0 3px 10px rgba(23,46,65,0.28);
  color: var(--white);
  font-size: 0.82rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.sedi-elenco { list-style: none; counter-reset: none; margin: 0; padding: 0; }
.sedi-elenco li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--grey-line, rgba(23,46,65,0.12));
}
.sedi-elenco li:first-child { padding-top: 0; }
.sedi-elenco li:last-child { border-bottom: 0; padding-bottom: 0; }
.sede-n {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue);
  font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.sedi-elenco h3 { margin-bottom: 2px; }
.sede-prov { color: var(--grey-mid); font-weight: 400; }
.sede-ruolo {
  color: var(--blue); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase;
  margin-bottom: 8px;
}
.sedi-elenco p:last-child { color: var(--grey-mid); margin-bottom: 0; }

@media (max-width: 860px) {
  .sedi-blocco { grid-template-columns: 1fr; gap: 46px; }
  .sedi-mappa { max-width: 320px; }
  .sede-pin { width: 26px; height: 26px; font-size: 0.74rem; border-width: 2px; }
}

/* ============ TIMELINE A BINARIO (Chi Siamo) ============
   Geometria in un unico punto: --bn-x è l'asse verticale su cui stanno
   sia la riga sia il centro dei pallini, così restano sempre allineati.
   Colonna anno 110px + gap 60px → l'asse cade a metà del gap.          */
.bn {
  --bn-x: 140px;
  list-style: none;
  /* Larghezza limitata per non avere righe di testo lunghissime, ma
     allineata a sinistra come ogni altro blocco della pagina. */
  max-width: 880px;
  margin: 0;
  padding: 0;
  position: relative;
}
.bn li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0 60px;
  padding: 0 0 46px;
  position: relative;
  /* Sopra la traccia, così la riga blu scorre dietro ai pallini */
  z-index: 1;
}
.bn li:last-child { padding-bottom: 0; }

/* Binario grigio, da centro primo pallino a centro ultimo */
.bn::before {
  content: "";
  position: absolute;
  left: calc(var(--bn-x) - 1px);
  top: var(--bn-top, 17px);
  height: var(--bn-alt, calc(100% - 34px));
  width: 2px;
  background: rgba(23, 46, 65, 0.14);
  z-index: 0;
}
/* Traccia blu che avanza con lo scorrimento */
.bn-scia {
  position: absolute;
  left: calc(var(--bn-x) - 1px);
  top: var(--bn-top, 17px);
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-bright) 100%);
  transition: height .18s linear;
  pointer-events: none;
  z-index: 0;
}

.bn li::after {
  content: "";
  position: absolute;
  left: calc(var(--bn-x) - 9px);
  top: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 3px rgba(18, 85, 158, 0.16);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}

/* Coda della traccia: prosegue oltre l'ultimo nodo e sfuma, così la
   sequenza non si chiude di netto sull'ultima data. */
.bn::after {
  content: "";
  position: absolute;
  left: calc(var(--bn-x) - 1px);
  top: calc(var(--bn-top, 17px) + var(--bn-alt, 0px));
  width: 2px;
  height: 74px;
  background: linear-gradient(180deg, rgba(23, 46, 65, 0.14) 0%, rgba(23, 46, 65, 0) 100%);
  z-index: 0;
}
/* L'ultima tappa è aperta: pallino vuoto con anello, non pieno */
.bn li.bn-aperta::after {
  background: var(--white);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(18, 85, 158, 0.14);
}
.bn.bn-anim li.bn-aperta.tappa-attiva::after {
  background: var(--white);
  border-color: var(--blue);
  transform: scale(1.08);
}
.bn-aperta .bn-anno { letter-spacing: 0.02em; }

.bn-anno {
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--navy);
  text-align: right;
  line-height: 1.15;
  padding-top: 1px;
  transition: color .4s ease;
}
.bn-box h3 { margin-bottom: 8px; }
.bn-box p { color: var(--grey-mid); margin: 0; }

/* Stato di partenza dell'animazione: attivo solo quando il JS è in funzione,
   così senza script la timeline resta comunque colorata e leggibile. */
.bn.bn-anim li::after {
  background: var(--white);
  border-color: #C6D2DE;
  box-shadow: none;
}
.bn.bn-anim .bn-anno { color: #97A5B2; }
.bn.bn-anim li.tappa-attiva::after {
  background: var(--blue);
  border-color: var(--white);
  box-shadow: 0 0 0 3px rgba(18, 85, 158, 0.18);
  transform: scale(1.08);
}
.bn.bn-anim li.tappa-attiva .bn-anno { color: var(--navy); }

@media (max-width: 700px) {
  .bn { --bn-x: 7px; }
  .bn li { grid-template-columns: 1fr; gap: 4px; padding: 0 0 34px 34px; }
  .bn-anno { text-align: left; font-size: 1.25rem; }
}

/* ============ "IL NOME": lo scorporo della sigla ============
   Le tre righe sono impilate normalmente. All'avvio ognuna è traslata
   in modo che le lettere risultino affiancate sulla riga di mezzo,
   come nel logo; poi tornano a posto e le parole si scoprono.       */
.nome-blocco {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
@media (max-width: 900px) { .nome-blocco { grid-template-columns: 1fr; gap: 48px; } }

.wdb-anim { justify-self: center; }
.wa-scena {
  position: relative;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-style: italic;
  line-height: 1.15;
  letter-spacing: 0.01em;
  padding-bottom: 0.5em;
}
.wa-riga {
  margin: 0;
  white-space: nowrap;
  color: var(--grey-mid);
  font-weight: 500;
}
.wa-l {
  display: inline-block;
  font-weight: 900;
  color: var(--navy);
}
.wa-t { display: inline-block; }
.wa-tri {
  display: block;
  position: absolute;
  left: 0; bottom: 0;
  height: 5px; width: 100%;
  border-radius: 2.5px;
  background: linear-gradient(90deg,
    var(--tri-green) 0 33.33%, #D9DEE3 33.33% 66.66%, var(--tri-red-bright) 66.66% 100%);
  transform-origin: left center;
}

/* Sfasamento iniziale di ogni riga. Questi sono ripieghi: i valori veri
   li misura il JS sul testo davvero renderizzato, perché la larghezza di
   W, D e B dipende dal font caricato. */
.wa-r1 { --wa-dx: 0em;   --wa-dy: 1.15em;  }
.wa-r2 { --wa-dx: 0.9em; --wa-dy: 0em;     }
.wa-r3 { --wa-dx: 1.6em; --wa-dy: -1.15em; }

/* Stato di partenza solo quando il JS è attivo: senza script si legge tutto */
.wdb-anim.wa-pronta .wa-riga { opacity: 0; transform: translate(var(--wa-dx), var(--wa-dy)); }
.wdb-anim.wa-pronta .wa-t    { clip-path: inset(0 100% 0 0); opacity: 0; }
.wdb-anim.wa-pronta .wa-tri  { transform: scaleX(0); }

.wdb-anim.wa-va .wa-riga { animation: wa-apri 2.1s cubic-bezier(.65,.02,.25,1) forwards; }
.wdb-anim.wa-va .wa-t    { animation: wa-scopri .75s cubic-bezier(.4,0,.2,1) forwards; }
.wdb-anim.wa-va .wa-tri  { animation: wa-barra .7s cubic-bezier(.4,0,.2,1) 2.05s forwards; }

.wdb-anim.wa-va .wa-r1 .wa-t { animation-delay: 1.32s; }
.wdb-anim.wa-va .wa-r2 .wa-t { animation-delay: 1.48s; }
.wdb-anim.wa-va .wa-r3 .wa-t { animation-delay: 1.64s; }

@keyframes wa-apri {
  0%   { opacity: 0; transform: translate(var(--wa-dx), var(--wa-dy)); }
  16%  { opacity: 1; transform: translate(var(--wa-dx), var(--wa-dy)); }
  30%  { opacity: 1; transform: translate(var(--wa-dx), var(--wa-dy)); }
  62%  { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes wa-scopri {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}
@keyframes wa-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .wdb-anim.wa-pronta .wa-riga,
  .wdb-anim.wa-pronta .wa-t,
  .wdb-anim.wa-pronta .wa-tri { opacity: 1; transform: none; clip-path: none; }
  .wdb-anim.wa-va .wa-riga,
  .wdb-anim.wa-va .wa-t,
  .wdb-anim.wa-va .wa-tri { animation: none; }
}

/* ============ PAGINA PRODOTTI: servizi per famiglie ============ */
.fam-head {
  margin-bottom: 44px;
  max-width: 900px;
}
.fam-head h2 { margin-bottom: 14px; }
.fam-head .lead { margin: 0; }

.serv-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.serv {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 30px;
  display: flex; flex-direction: column;
}
/* Icona di scheda: stessa famiglia di quelle in home, misura ridotta */
.serv-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.serv-ico svg { width: 22px; height: 22px; }

/* Il capitolo sulle banche dati ha tre schede: una riga da tre colonne,
   invece di due più una orfana. */
.serv-griglia.tre { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .serv-griglia.tre { grid-template-columns: 1fr; } }

/* Etichetta non cliccabile: stesso aspetto delle altre, senza effetto al passaggio */
.serv-marchio.statico { cursor: default; }

/* I due canali di accesso */
.canali-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.canale {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px 32px;
}
.canale h3 { font-size: 1.15rem; margin-bottom: 12px; }
.canale p { color: var(--grey-mid); margin-bottom: 20px; }
@media (max-width: 760px) { .canali-griglia { grid-template-columns: 1fr; } }

.serv h3 { font-size: 1.12rem; margin-bottom: 12px; }
.serv h3 a { color: inherit; transition: color .2s ease; }
.serv h3 a:hover { color: var(--blue); }
.serv p { color: var(--grey-mid); margin: 0 0 22px; }
/* Etichette del marchio: cliccabili, portano alla pagina del prodotto */
.serv-marchi { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.serv-marchio {
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 7px 12px; border-radius: 6px;
  transition: background .2s ease, color .2s ease;
}
.serv-marchio:hover { background: var(--blue); color: var(--white); }

/* Striscia dei marchi in chiusura */
.marchi-griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.marchio {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 26px 26px;
  transition: border-color .2s ease, transform .2s ease;
}
.marchio:hover { border-color: var(--blue); transform: translateY(-3px); }
.marchio img { height: 30px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; align-self: flex-start; }
.marchio-desc { color: var(--grey-mid); font-size: 0.92rem; line-height: 1.55; margin: 20px 0 18px; }
.marchio-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--blue); font-weight: 700; font-size: 0.86rem;
}
.marchio-link svg { width: 16px; height: 16px; }

@media (max-width: 1000px) { .marchi-griglia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .serv-griglia { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .marchi-griglia { grid-template-columns: 1fr; } }

/* ============ PERSONALIZZAZIONE DELLA BANCA DATI (Soluzioni B2B) ============ */
.pers-blocco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  /* Le due colonne chiudono alla stessa quota: il bordo inferiore dello
     schema si allinea con l'ultima riga del testo. */
  align-items: end;
}
.pers-blocco .lead { margin-bottom: 0; }
/* Lo schema è più alto della colonna di testo: senza un limite sporgeva
   sopra al titolo. Ridotto e agganciato al bordo destro. */
.pers-visual { justify-self: end; width: 100%; max-width: 480px; }
.pers-visual img { display: block; width: 100%; height: auto; border-radius: 16px; }
@media (max-width: 900px) { .pers-visual { justify-self: center; max-width: 440px; } }
@media (max-width: 900px) { .pers-blocco { grid-template-columns: 1fr; gap: 44px; } }

/* ============ DATA FEED (Soluzioni B2B) ============ */
.df-schema {
  max-width: 980px;
  margin: 0 auto 56px;
  padding: 34px 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.df-schema img { display: block; width: 100%; height: auto; }

/* Cinque schede su una griglia da sei colonne: tutte della stessa larghezza,
   tre sopra e due sotto centrate, invece di una riga con due schede più larghe. */
.df-griglia { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.df-punto { grid-column: span 2; }
.df-punto:nth-child(4) { grid-column: 2 / span 2; }
.df-punto:nth-child(5) { grid-column: 4 / span 2; }
.df-punto {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 26px;
}
.df-punto h3 { font-size: 1.05rem; margin-bottom: 10px; }
.df-punto p { color: var(--grey-mid); font-size: 0.94rem; margin: 0; }

.df-chiusura {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 28px;
  margin-top: 46px; padding-top: 40px;
  border-top: 1px solid var(--line);
}
.df-chiusura p { max-width: 640px; color: var(--grey-mid); margin: 0; }
.df-chiusura strong { color: var(--navy); }

@media (max-width: 1000px) {
  .df-griglia { grid-template-columns: repeat(2, 1fr); }
  .df-punto, .df-punto:nth-child(4), .df-punto:nth-child(5) { grid-column: auto; }
}
@media (max-width: 560px)  { .df-griglia { grid-template-columns: 1fr; } .df-schema { padding: 20px 16px; } }

/* ============ RECAPITI IN GRIGLIA (Contatti) ============ */
.rec-griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.rec {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 26px;
}
.rec h3 { font-size: 1.02rem; margin-bottom: 8px; }
.rec h3 a { color: inherit; transition: color .2s ease; }
.rec h3 a:hover { color: var(--blue); }
.rec p { color: var(--grey-mid); margin: 0; line-height: 1.65; }
.rec a { color: var(--blue); font-weight: 500; }
.rec a:hover { text-decoration: underline; }
.rec .c-ico { margin-bottom: 18px; }
.rec-link { margin-top: 16px; font-size: 0.9rem; }

/* Cosa succede dopo l'invio: rassicura chi sta per scrivere */
.dopo-invio {
  margin-top: 36px; padding-top: 32px;
  border-top: 1px solid var(--line);
}
.dopo-invio p { color: var(--grey-mid); margin-bottom: 14px; }
.dopo-invio p:last-child { margin-bottom: 0; }
@media (max-width: 1000px) { .rec-griglia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .rec-griglia { grid-template-columns: 1fr; } }

/* ============ NEWS ============ */
.news-lista { list-style: none; margin: 0; padding: 0; max-width: 940px; }

/* Riga con miniatura: l'immagine a sinistra, il testo a destra.
   La miniatura ripete il collegamento del titolo, quindi per chi usa uno
   screen reader e' decorativa: alt vuoto e link nascosto nel markup. */
.news-card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.news-card:last-child { border-bottom: 1px solid var(--line); }

.nc-figura {
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--grey-soft);
  aspect-ratio: 960 / 624;
}
.nc-figura img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s var(--ease);
}
.news-card:hover .nc-figura img { transform: scale(1.04); }
.nc-meta, .art-meta {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px;
}
.nc-meta time, .art-meta time { color: var(--grey-mid); font-size: 0.9rem; }
.art-meta time { color: rgba(255,255,255,0.66); }
.news-card h2 { font-size: clamp(1.15rem, 2vw, 1.42rem); margin-bottom: 10px; line-height: 1.28; }
.news-card h2 a { color: inherit; transition: color .2s ease; }
.news-card h2 a:hover { color: var(--blue); }
.news-card p { color: var(--grey-mid); margin-bottom: 16px; font-size: 0.95rem; }
.nc-meta { margin-bottom: 10px; }

@media (max-width: 720px) {
  /* Sotto i 720 px la colonna diventa troppo stretta per due blocchi
     affiancati: la miniatura passa sopra, a tutta larghezza. */
  .news-card { grid-template-columns: 1fr; gap: 16px; padding: 26px 0; }
  .nc-figura { max-width: 100%; }
}

/* Torna all'elenco, nell'intestazione dell'articolo */
.torna {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.7); font-size: 0.9rem; font-weight: 500;
  margin-bottom: 26px;
}
.torna:hover { color: var(--white); }
.torna svg { width: 17px; height: 17px; }

/* Corpo del comunicato */
.articolo { max-width: 760px; }
/* Logo dell'ente citato, in apertura di comunicato */
.art-logo {
  margin: 0 0 34px;
  padding: 26px 30px;
  background: var(--grey-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.art-logo img { display: block; height: 48px; width: auto; }
.art-logo figcaption { color: var(--grey-mid); font-size: 0.84rem; }
.articolo p { color: var(--grey-mid); margin-bottom: 22px; }
.art-sommario {
  font-size: 1.14rem; color: var(--navy) !important; line-height: 1.7;
  padding-bottom: 26px; margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.articolo h2 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin: 42px 0 16px; }
.art-chiusura {
  margin-top: 34px; padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--navy) !important; font-weight: 500;
}
/* Immagini dentro il corpo dell'articolo */
.art-figura { margin: 34px 0; }
.art-figura img {
  display: block; width: 100%; height: auto;
  border-radius: 16px; border: 1px solid var(--line);
}
.art-figura figcaption {
  color: var(--grey-mid); font-size: 0.88rem; line-height: 1.6;
  margin-top: 12px; padding-left: 2px;
}
.art-figura.larga { margin: 0 0 34px; }
.art-figura.piccola { max-width: 460px; }
@media (min-width: 1100px) {
  /* le immagini possono sporgere dalla colonna di testo, che è stretta */
  .art-figura.larga { width: calc(100% + 180px); max-width: none; }
}

/* Citazione dentro l'articolo */
.art-citazione {
  margin: 38px 0; padding: 28px 30px;
  background: var(--grey-soft);
  border-left: 3px solid var(--blue);
  border-radius: 0 14px 14px 0;
}
.art-citazione p {
  font-style: italic; color: var(--navy) !important;
  font-size: 1.05rem; line-height: 1.7; margin-bottom: 16px;
}
.art-citazione footer { display: flex; flex-direction: column; gap: 2px; }
.art-citazione footer b { color: var(--navy); font-size: 0.95rem; }
.art-citazione footer span { color: var(--grey-mid); font-size: 0.86rem; }

/* Invito all'azione in coda all'articolo */
.art-azione { margin: 38px 0 8px; }

.art-fonti { margin-top: 46px; padding: 28px 30px; background: var(--grey-soft); border-radius: 16px; }
.art-fonti h3 {
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grey-mid); font-weight: 700; margin-bottom: 14px;
}
.art-fonti ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.art-fonti a { color: var(--blue); font-weight: 500; }
.art-fonti a:hover { text-decoration: underline; }

/* ---------- Documenti legali incorporati ----------
   Privacy e Cookie Policy non sono copiate nelle pagine: sono ospitate da
   LegalBlink e mostrate qui dentro, così restano aggiornate da sole.
   L'altezza non può adattarsi al contenuto perché il documento arriva da
   un altro dominio: si fissa una finestra alta e si lascia scorrere dentro. */
.section-doc { padding-top: 8px; }

.doc-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(5, 7, 9, .05);
}
.doc-frame iframe {
  display: block;
  width: 100%;
  height: 78vh;
  min-height: 520px;
  border: 0;
}

.doc-apri { margin-top: 18px; font-size: 0.92rem; }
.doc-apri a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--blue); font-weight: 500;
}
.doc-apri a:hover { text-decoration: underline; }
.doc-apri svg { width: 15px; height: 15px; }

.mb-32 { margin-bottom: 32px; }

@media (max-width: 720px) {
  /* Su schermo piccolo la finestra interna diventa scomoda: si allunga,
     così il documento scorre insieme alla pagina invece che dentro un box. */
  .doc-frame iframe { height: 88vh; min-height: 460px; }
}

/* Collegamento all'informativa dentro la casella di consenso.
   Deve leggersi come un link: il testo intorno e' grigio e senza il colore
   e la sottolineatura nessuno capisce che si puo' aprire. */
.consent a {
  color: var(--blue);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.consent a:hover {
  color: var(--blue-dark);
  text-decoration-thickness: 2px;
}
.consent a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Salta al contenuto: obbligo di accessibilita' (WCAG 2.4.1, livello A).
   Invisibile finche' non si arriva col tasto Tab, poi compare in alto. */
.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--white);
  color: var(--navy);
  padding: 14px 22px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
  box-shadow: 0 6px 24px rgba(12,26,38,.18);
}
.salta:focus { left: 0; }