/* ==========================================================================
   DreamersWare — home page (design system "Industry", vedi ds.css)
   Ogni regola qui deriva da un attributo style="..." del prototipo: la CSP del
   dominio è `style-src 'self'` senza unsafe-inline, quindi in pagina non deve
   tornare nessuno stile inline. Stesso discorso per il JS (home.js).
   ========================================================================== */

/* Altezza della barra fissa, per costruzione: imbottitura verticale + l'elemento
   più alto della riga (il selettore di lingua, ~36px) + il filetto inferiore.
   Serve allo scostamento delle ancore qui sotto — se cambi imbottitura, altezza
   del logo o numero di righe della barra, riallinea questi tre valori. */
:root { --nav-h: 80px; }

html {
  scroll-behavior: smooth;
  /* Senza questo la sezione si allinea al bordo alto della finestra e il titolo
     finisce sotto la barra fissa. `scroll-padding-top` sta sul contenitore di
     scorrimento e vale per TUTTE le ancore, comprese quelle che aggiungeremo. */
  scroll-padding-top: calc(var(--nav-h) + 8px);
}

/* Il colore di fondo passa da body a html: così la maglia di nodi può stare a
   `z-index: -1` — dietro a tutto il contenuto senza dover marcare ogni blocco —
   restando comunque DAVANTI al fondo pagina. Se il fondo restasse su body, un
   canvas a z-index negativo finirebbe dietro di esso e non si vedrebbe. */
html { background: var(--color-bg); }

body {
  background: transparent;
  min-height: 100%;
  overflow-x: hidden;
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

#mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* I riquadri diventano fogli opachi appoggiati sulla tavola: su un fondo che si
   muove, un contenitore trasparente lascia scorrere le linee sotto alle parole.
   È una deroga consapevole al sistema "Industry", che vuole schede e figure come
   puri disegni a linee senza riempimento — la maglia animata cambia il
   presupposto su cui quella regola era scritta. Cornice a capello e crocini di
   registro restano al loro posto, quindi il linguaggio grafico non si perde: da
   disegno vuoto la scheda diventa un foglio quotato, che è la stessa grammatica.
   Il bianco puro stacca dalla carta del fondo (#f2f2f3) senza bisogno di ombre. */
:root { --card-bg: #fff; }

.card-bp,
.spec,
.note,
.ist-card { background: var(--card-bg); }

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); text-decoration: underline; }
a.btn, a.btn:hover { text-decoration: none; }
a.btn-primary, a.btn-primary:hover { color: var(--color-bg); }
a.btn-secondary, a.btn-secondary:hover { color: var(--color-text); }

/* Stati dei bottoni: il sistema porta `.btn-primary:hover` su --color-accent-600
   (#597ea3), che sull'accento base (#5980a6) è una differenza invisibile — il
   passaggio del mouse non si vedeva. Si scende di due passi della scala, dove
   lo stacco è leggibile, e si tiene il terzo per lo stato premuto. */
.btn { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn-primary:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-primary:active { background: var(--color-accent-800); border-color: var(--color-accent-800); }
.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-color: var(--color-accent);
}
.btn-secondary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }

/* Filetto orizzontale: il sistema lo vuole a capello, mai un bordo spesso. */
.rule { height: 1px; border: 0; background: var(--color-divider); margin: 0; }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
}

/* Etichetta di sezione numerata ("01 · L'azienda"). */
.kicker {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-700);
  margin: 0 0 12px;
}

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* — barra di navigazione ------------------------------------------------- */

/* Tre colonne con la centrale a contenuto: le due laterali sono `1fr` uguali,
   quindi il logo cade sull'asse ottico della pagina qualunque sia la larghezza
   dei menù ai lati. Le colonne sono assegnate a mano, così il logo può restare
   il primo elemento del sorgente senza finire a sinistra. */
.site-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 16px clamp(20px, 5vw, 72px);
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-divider);
}

.brand {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.brand:hover { text-decoration: none; color: inherit; }
.brand-logo { height: 44px; width: auto; }

.nav-links {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.nav-right {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav-link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}
.nav-link:hover { color: var(--color-accent-700); text-decoration: none; }

/* Selettore di lingua: bottoni veri, lo stato attivo è la classe .is-on
   messa da home.js (il .seg-opt:has(input:checked) del sistema serve i radio). */
.lang-seg { flex: none; }
.lang-seg .seg-opt {
  border: 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--color-text);
}
.lang-seg .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.lang-seg .seg-opt.is-on { background: var(--color-accent); color: var(--color-bg); }

/* Il sistema colora `.seg-opt:not(:has(input:checked)):hover` di grigio chiaro:
   i nostri sono bottoni, non radio, quindi quel :not() è vero ANCHE per la
   lingua attiva e in mouse-over le rubava il fondo pieno lasciandole il testo
   chiaro — illeggibile. Le due regole qui sotto hanno una classe in più e
   vincono; l'attiva scurisce, l'inattiva prende un velo di accento invece del
   grigio, così la coppia resta distinguibile a colpo d'occhio. */
.lang-seg .seg-opt.is-on:hover { background: var(--color-accent-700); color: var(--color-bg); }
.lang-seg .seg-opt:not(.is-on) { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.lang-seg .seg-opt:not(.is-on):hover {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent-800);
}

.nav-cta { flex: none; }

/* — hero ----------------------------------------------------------------- */

.hero {
  padding: 96px 0 72px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px clamp(32px, 6vw, 96px);
  align-items: flex-end;
}
.hero-title-col { flex: 7 1 340px; min-width: 0; }
.hero-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* rientro ottico: compensa la spalla sinistra della B/D condensata */
  margin: 0 0 0 -0.052em;
}
.hero-title span { display: block; }
.hero-title .accent { color: var(--color-accent); }

.hero-side { flex: 5 1 300px; min-width: 0; padding-bottom: 8px; }
.hero-side .rule { margin: 0 0 20px; }
.hero-sub { font-size: 17px; line-height: 28px; margin: 0 0 28px; max-width: 40ch; }

/* — sezioni di contenuto ------------------------------------------------- */

.sec { padding: 40px 0 72px; }
.sec > .rule { margin: 0 0 32px; }
.sec-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 44px;
  max-width: 26ch;
}

#azienda { padding-top: 56px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.card-bp { position: relative; padding: 24px; }
.card-bp h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 22px;
  line-height: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.card-bp p {
  font-size: 15px;
  line-height: 24px;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* — scheda tecnica dello stack (02) -------------------------------------- */

#tecnologie > .rule { margin: 0 0 40px; }
.spec { position: relative; }
.spec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-bottom: 1px solid var(--color-divider);
}
.spec-title {
  flex: 1;
  min-width: 16ch;
  padding: 12px 24px;
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.spec-meta {
  padding: 12px 24px;
  border-left: 1px solid var(--color-divider);
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.spec-table { table-layout: fixed; width: 100%; }
.spec-table .col-num { width: 72px; }
.spec-table .col-name { width: 32%; }
.spec-table .col-code { width: 14%; }
.spec-table th {
  font-size: 13px;
  font-weight: 600;
  padding: 12px 24px 12px 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.spec-table th:first-child,
.spec-table .td-num { padding-left: 24px; }
.spec-table .td-num {
  padding: 14px 24px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent-700);
}
.spec-table .td-name {
  padding: 14px 24px 14px 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 21px;
  line-height: 24px;
  text-transform: uppercase;
}
.spec-table .td-code {
  padding: 14px 24px 14px 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.spec-table .td-fn {
  padding: 14px 24px 14px 0;
  font-size: 15px;
  line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.spec-note {
  margin: 0;
  padding: 12px 24px;
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
  line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* — prodotto (03) -------------------------------------------------------- */

#prodotto > .rule { margin: 0 0 40px; }
.split {
  display: flex;
  flex-wrap: wrap;
  gap: 32px clamp(32px, 6vw, 96px);
  align-items: flex-start;
}
.split-a { flex: 5 1 260px; min-width: 0; }
.split-b { flex: 7 1 340px; min-width: 0; }
.prod-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
}
.lead { font-size: 17px; line-height: 28px; margin: 0 0 20px; max-width: 52ch; }
.body-text {
  font-size: 15px;
  line-height: 24px;
  margin: 0 0 24px;
  max-width: 56ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* — dati e sovranità (04) ------------------------------------------------ */

#dati { padding-bottom: 80px; }
#dati > .rule { margin: 0 0 40px; }
.split-mid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px clamp(32px, 5vw, 80px);
  align-items: center;
}
.split-mid > .col-text { flex: 6 1 340px; min-width: 0; }
.split-mid > .col-fig { flex: 5 1 300px; min-width: 0; position: relative; margin: 0; }

/* Sezione senza figura (la foto è ancora da decidere): il testo prende tutta la
   riga e le due note si affiancano, invece di allungarsi su una colonna sola.
   Si toglie insieme al ripristino della figure. */
.split-mid.is-textonly > .col-text { flex: 1 1 100%; }
.split-mid.is-textonly .note-stack {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
#dati .sec-title { margin: 0 0 20px; max-width: 24ch; }
#dati .body-text { margin: 0 0 32px; max-width: 50ch; }

.note-stack { display: grid; gap: 24px; }
.note { position: relative; padding: 20px 24px; }
.note h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  line-height: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.note p {
  font-size: 15px;
  line-height: 24px;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
/* Il rimando alla verifica: staccato dal testo e più minuto, perché è una nota
   di servizio e non una parte dell'affermazione. */
.note p + p { margin-top: 12px; }
.note-link { font-size: 13px; }
.note-link a { color: var(--color-accent-700); }

/* Riquadro in attesa dell'immagine definitiva: resta un oggetto wireframe,
   niente riempimento. Si elimina quando la foto viene montata. */
.ph {
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--color-text) 5%, transparent) 0 8px,
    transparent 8px 16px
  );
}
.ph-4x3 { aspect-ratio: 4 / 3; }
.ph-3x4 { aspect-ratio: 3 / 4; }
.ph-logo { height: 64px; padding: 8px; }

/* — istituzioni collegate (05) ------------------------------------------- */

.sec-ist { padding: 24px clamp(20px, 5vw, 72px) 88px; }
.ist-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.ist-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.ist-nav { display: flex; gap: 8px; flex: none; }
.sec-ist > .rule { margin: 0 0 12px; }
.ist-intro {
  font-size: 15px;
  line-height: 24px;
  margin: 0 0 32px;
  max-width: 56ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  /* `proximity` e non `mandatory`: le tappe le calcola home.js dividendo la corsa
     in parti uguali, e un aggancio obbligatorio le riporterebbe sul bordo della
     scheda più vicina, rimettendo il residuo che si voleva togliere. Con
     `proximity` il trascinamento a dito resta comunque assistito. */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 8px 8px 8px 0;
}
.track::-webkit-scrollbar { display: none; }
.ist-card {
  flex: 0 0 clamp(196px, 21vw, 244px);
  scroll-snap-align: start;
  position: relative;
  padding: 20px;
}
/* I quattro loghi sono lockup molto larghi (rapporti da 5,5:1 a 7,3:1): dentro
   una scheda di ~200px il vincolo è la LARGHEZZA, non l'altezza. Quindi il box
   riserva l'altezza e `contain` fa entrare il marchio per intero — con
   `height:100%; width:auto` un 6,6:1 diventerebbe 420px e sfonderebbe la scheda.
   Allineati a sinistra come il testo sotto; l'altezza del box è tarata sul più
   alto dei quattro (~37px) e si può ritoccare qui senza toccare altro. */
/* Il riquadro è salito da 44 a 52px per il marchio Ascom, che è compatto (2,5:1)
   e non allungato come i wordmark: quelli restano limitati dalla LARGHEZZA e non
   cambiano di una virgola, mentre i marchi compatti ora hanno l'altezza che
   serve. Il criterio di pareggio non è l'altezza ma l'AREA occupata — un
   wordmark lungo e sottile e un marchio quadrotto alla stessa altezza pesano in
   modo diverso all'occhio. Con questi valori le cinque aree stanno fra 5.600 e
   7.600 px², cioè indistinguibili. */
.ist-logo { height: 52px; margin-bottom: 18px; }
.ist-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
/* Il badge Aruba (3,5:1) sta fra i wordmark e il marchio compatto di Ascom: senza
   freno riempirebbe tutti i 52px e peserebbe troppo. L'imbottitura riduce l'area
   utile e `contain` fa il resto, portandolo a 40px — 5.590 px², in linea. */
.ist-logo.is-badge { padding: 6px 0; }

/* Ogni scheda è un collegamento al sito dell'istituzione: cliccabile tutta, non
   solo il nome. Il segno ↗ avvisa che si apre in una scheda nuova. */
a.ist-card { display: block; color: inherit; text-decoration: none; }
a.ist-card:hover { border-color: var(--color-accent); color: inherit; text-decoration: none; }
a.ist-card:hover h4 { color: var(--color-accent-700); }
a.ist-card:hover > .corner { color: var(--color-accent); }
a.ist-card::after {
  content: "↗";
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 15px;
  line-height: 1;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}
a.ist-card:hover::after { color: var(--color-accent); }
.ist-card h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.ist-card p {
  font-size: 13px;
  line-height: 20px;
  margin: 0;
  /* lascia libero l'angolo dove sta il segno ↗ */
  padding-right: 20px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* — contatti (06): l'unico campo pieno della pagina ---------------------- */

.contact {
  background: var(--color-accent-900);
  color: var(--color-bg);
  padding: 80px 0;
}
.contact-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 40px clamp(32px, 6vw, 96px);
  align-items: flex-end;
}
.contact-main { flex: 7 1 340px; min-width: 0; }
.contact .kicker { color: var(--color-accent-300); }
.contact .rule {
  background: color-mix(in srgb, var(--color-bg) 24%, transparent);
  margin: 0 0 28px;
}
.contact-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 20px;
  max-width: 22ch;
}
.contact-body {
  font-size: 17px;
  line-height: 28px;
  margin: 0;
  max-width: 46ch;
  color: color-mix(in srgb, var(--color-bg) 80%, transparent);
}
.contact-actions {
  flex: 4 1 240px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.btn-invert {
  background: var(--color-bg);
  color: var(--color-accent-900);
  border-color: var(--color-bg);
  cursor: pointer;
}
/* Sul campo pieno accent-900 il bottone chiaro deve scendere di due passi:
   accent-100 (#eef6ff) contro il fondo pagina (#f2f2f3) non si distingueva. */
.btn-invert:hover { background: var(--color-accent-200); border-color: var(--color-accent-200); }
.btn-invert:active { background: var(--color-accent-300); border-color: var(--color-accent-300); }
.btn-outline-invert {
  background: transparent;
  color: var(--color-bg);
  border-color: color-mix(in srgb, var(--color-bg) 40%, transparent);
  cursor: pointer;
}
.btn-outline-invert:hover {
  background: color-mix(in srgb, var(--color-bg) 18%, transparent);
  border-color: var(--color-bg);
}
.btn-outline-invert:active { background: color-mix(in srgb, var(--color-bg) 28%, transparent); }
.contact :focus-visible { outline-color: var(--color-bg); }

/* — footer --------------------------------------------------------------- */

.site-footer { padding: 48px clamp(20px, 5vw, 72px) 56px; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 32px clamp(32px, 5vw, 80px);
  align-items: start;
}
/* Dimensionato sulla LARGHEZZA e non sull'altezza: la cella del footer si
   restringe con la griglia, e con `height` fissa più `max-width` il marchio si
   schiaccerebbe invece di rimpicciolirsi. Così scala mantenendo le proporzioni. */
.footer-logo {
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-bottom: 18px;
}
.footer-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.footer-tag {
  font-size: 13px;
  line-height: 24px;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.footer-label {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 8px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.footer-val { font-size: 14px; line-height: 24px; margin: 0; }
.site-footer .rule { margin: 40px 0 20px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.footer-bottom .copyright { margin-right: auto; }

/* Bottoni-contatto: l'indirizzo non è nel DOM, lo compone home.js al click. */
.mail-btn { cursor: pointer; }

/* — comparsa progressiva ------------------------------------------------- */

/* Lo stato di partenza lo mette home.js solo sugli elementi ancora sotto la
   piega: senza JS, o con prefers-reduced-motion, tutto resta visibile. */
[data-reveal] { will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* — schermi piccoli ------------------------------------------------------ */

@media (max-width: 860px) {
  /* la barra passa a due righe: voci di menù sotto il logo */
  :root { --nav-h: 100px; }
  .site-nav { gap: 12px 14px; padding: 12px clamp(16px, 5vw, 72px); }
  /* Le voci passano sotto: il logo resta centrato nella prima riga. */
  .nav-links { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 16px; }
  .brand-logo { height: 36px; }
  .hero { padding: 56px 0 48px; }
  .sec { padding: 32px 0 56px; }
  #azienda { padding-top: 40px; }
  .contact { padding: 64px 0; }
  .contact-actions { width: 100%; }
  .contact-actions .btn { width: 100%; }
}

/* Sotto i 560px lingua e "Contattaci" non stanno accanto al logo: tre righe
   centrate, invece di comprimere il bottone fino a spezzarne la parola. */
@media (max-width: 560px) {
  /* tre righe: logo, lingua + CTA, voci di menù */
  :root { --nav-h: 148px; }
  .brand { grid-column: 1 / -1; }
  .nav-right { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .nav-links { grid-row: 3; }

  .spec-head { display: block; }
  .spec-meta { border-left: 0; border-top: 1px solid var(--color-divider); display: inline-block; }
  /* La scheda tecnica non si comprime: scorre dentro la propria cornice. */
  .spec-scroll { overflow-x: auto; }
  .spec-table { min-width: 560px; }
}