/* ═══════════════════════════════════════════════════════════════════
   pagine.css — foglio di stile delle PAGINE INTERNE
   (riparazione-infotainment, riparazione-centralina-sos,
    download-firmware, download-mappe, preventivo-gratuito)

   PERCHE' UN FILE A PARTE E NON LO STILE DENTRO index.html
   La vetrina tiene tutto il suo CSS in un blocco <style> lungo 860 righe
   dentro la pagina: e' una pagina sola, e cosi' si carica in un colpo. Le
   pagine interne sono cinque: se ognuna si portasse dietro la propria copia
   del blocco, la stessa modifica andrebbe fatta in cinque posti e prima o poi
   una resterebbe indietro. Qui invece lo stile e' scritto una volta e le
   cinque pagine lo condividono — e in piu' il browser lo scarica una volta
   sola per tutte, quindi dalla seconda pagina in poi si apre subito.

   index.html NON e' stato toccato. Fa storia a se': ha lo sfondo animato, i
   punti caldi sulla foto e l'archivio interrogabile, roba che qui non serve.
   Portarla dentro un file comune voleva dire rimaneggiare la vetrina — che
   funziona — per un vantaggio che non c'era.

   I nomi e i valori (--acc, .btn, .kick, #nav, footer) sono ripresi TALI E
   QUALI dalla vetrina, cosi' le pagine sono la stessa cosa a vedersi e chi
   cambia un colore la' lo ritrova qui con lo stesso nome.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg:     #08090C;
  --bg2:    #0D0F14;
  --panel:  #11141B;
  --panel2: #161A23;
  --line:   #222835;
  --line2:  #2E3648;
  --t1:     #EDF1F7;
  --t2:     #A7B0BF;
  --t3:     #768090;
  --mint:   #2CE6B8;
  --amber:  #FFB454;
  --red:    #FF5A48;
  --barra:64px;            /* altezza della barra: la usano anche il pannello del panino */
  --acc:    #1E9BFF;
  --acc2:   #0B6CD4;
  --acc3:   #7FE0FF;

  --fd: 'Sora', 'Sora ripiego', sans-serif;
  --fb: 'Manrope', 'Manrope ripiego', sans-serif;
  --fm: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(.22,1,.36,1);
  --container: 1220px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg); color: var(--t1);
  font-family: var(--fb); font-size:16px; line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
::selection { background: var(--acc); color:#fff; }
::-webkit-scrollbar { width:9px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius:5px; }

.container { max-width:var(--container); margin:0 auto; padding:0 44px; }
.stretto  { max-width:900px; }

/* ─── tipografia ─── */
.kick {
  font-family:var(--fm); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acc);
  display:inline-flex; align-items:center; gap:10px;
}
/* flex:0 0 26px — la lineetta non si accorcia quando il testo del kicker e'
   lungo. Vale per tutte le 16 pagine che caricano questo foglio. */
.kick::before { content:''; flex:0 0 26px; width:26px; height:1px; background:linear-gradient(90deg,var(--acc),transparent); }
h1.title, h2.title {
  font-family:var(--fd); font-weight:800;
  font-size:clamp(32px,4.2vw,58px);
  line-height:1.06; letter-spacing:-.02em; margin:16px 0 18px;
}
h2.title { font-size:clamp(27px,3.2vw,42px); }
h1.title em, h2.title em {
  font-style:normal;
  background:linear-gradient(100deg,var(--acc) 8%,var(--acc3) 92%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
h3 { font-family:var(--fd); font-weight:700; letter-spacing:-.01em; }
.lead { color:var(--t2); font-size:16.5px; max-width:640px; }
p + p { margin-top:14px; }
.testo p { color:var(--t2); font-size:15.5px; }
.testo strong { color:var(--t1); font-weight:600; }
.testo a:not(.btn) { color:var(--acc); border-bottom:1px solid rgba(30,155,255,.35); }
.testo a:not(.btn):hover { border-bottom-color:var(--acc); }

/* ─── pulsanti ─── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fd); font-size:14.5px; font-weight:700;
  padding:15px 28px; border-radius:12px; cursor:pointer; border:none;
  transition:transform .25s var(--ease), box-shadow .25s, filter .25s, background .25s;
  white-space:nowrap;
}
.btn .arr { transition:transform .25s var(--ease); }
.btn:hover .arr { transform:translateX(4px); }
.btn-mint { background:linear-gradient(120deg,var(--acc),var(--acc2)); color:#fff; box-shadow:0 8px 30px rgba(30,155,255,.25); }
.btn-mint:hover { transform:translateY(-2px); box-shadow:0 14px 40px rgba(30,155,255,.35); filter:brightness(1.06); }
.btn-ghost { background:rgba(255,255,255,.04); color:var(--t1); border:1px solid var(--line2); }
.btn-ghost:hover { transform:translateY(-2px); background:rgba(255,255,255,.08); }
.cta-row { display:flex; gap:16px; flex-wrap:wrap; }

/* ─── comparse ───
   Stesse classi della vetrina: se il JavaScript non parte, la regola
   `.no-js` piu' sotto lascia tutto visibile invece di una pagina bianca. */
.rv   { opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.on{ opacity:1; transform:none; }
.rv-z { opacity:0; transform:scale(.94); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv-z.on { opacity:1; transform:none; }
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}

/* ═══ BARRA IN ALTO ═══
   Sulle pagine interne non c'e' la foto a schermo intero sotto la barra:
   parte gia' opaca, senza il passaggio da trasparente a pieno della vetrina. */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  /* FONDO PIATTO, come in index. Qui la barra ha un solo stato — sotto non
     c'e' la foto di apertura ma subito il contenuto — quindi va tarata come lo
     stato DENSO di index, non come quello leggero sopra l'immagine. */
  background:linear-gradient(180deg, rgba(10,15,22,.94), rgba(10,15,22,.88));
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--line2);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
}

/* GRIGLIA A TRE COLONNE, NON FLEX: il menu deve stare al centro della barra.
   Con `flex: space-between` finiva al centro dello spazio che avanza dopo il
   logo, cioe' spostato a destra di mezza larghezza del logo.
   Le colonne sono assegnate a mano perche' sotto la soglia del panino il <nav>
   diventa display:none, e con la collocazione automatica il panino scalerebbe
   in seconda colonna finendo in mezzo alla barra. Stesso blocco in index.html. */
/* 1320 e non 1220 come il resto della pagina: il menu misura 786px e il logo
   179, e perche' il menu stia al centro VERO le colonne laterali devono essere
   larghe uguali e almeno quanto il logo — 1272px con i margini. Dentro 1220 la
   colonna del logo si allargava rubando spazio a destra e il menu finiva 26px
   fuori centro. Stesso valore nel blocco <style> di index.html. */
.nav-in {
  max-width:1320px; margin:0 auto; padding:0 44px;
  height:var(--barra); display:grid;
  /* `auto` e non `1fr` sulla prima colonna: cosi' si dimensiona sul marchio.
     Con `1fr` prendeva lo spazio che avanzava dai link — 203px contro i 257
     che serve — e il marchio veniva schiacciato invece di far largo. */
  /* QUARTA COLONNA, dal 31 agosto 2026: il selettore di lingua.
     Sopra i 1300px la colonna del panino e' vuota, perche' #burger nasce
     display:none — ed e' esattamente li' che il selettore doveva andare. Messo
     invece dentro .nav-links avrebbe allargato il menu di ~150px, spostando la
     soglia del panino oltre i 1450px: lo stesso motivo per cui "Piattaforme"
     sta nel pannello dei servizi e non in barra. Cosi' il menu non cambia di
     un pixel e la soglia — un valore che vive in DUE file — resta a 1300. */
  grid-template-columns:auto 1fr auto auto;
  align-items:center; gap:20px;
}
.nav-in > .logo      { grid-column:1; justify-self:start;  }
/* Al centro della colonna che avanza fra il marchio e il bordo. Non e' il
   centro esatto della barra — con un marchio largo 297 e 785px di voci,
   centrarle davvero sulla barra le farebbe finire SOTTO il marchio a 1300px.
   Centrate nello spazio libero non si scontrano mai e leggono lo stesso. */
.nav-in > .nav-links { grid-column:2; justify-self:center; align-items:center; }
.nav-in > .lang      { grid-column:3; justify-self:end;    }
.nav-in > #burger    { grid-column:4; justify-self:end;    }
.logo { font-family:var(--fd); font-weight:800; font-size:19px; display:flex; align-items:center; gap:10px; letter-spacing:-.01em; }
.logo svg { flex-shrink:0; }
/* Il marchio in barra. L'altezza sta nel CSS e non nell'attributo perche' i due
   file di <picture> hanno proporzioni leggermente diverse (4,95 e 4,92): dando
   solo l'altezza, ognuno si calcola la sua larghezza e nessuno dei due viene
   schiacciato. Gli attributi width/height restano sul tag per far sapere al
   browser quanto spazio tenere prima di avere l'immagine.
   ⚠️ Sotto i 760px <picture> serve gia' il file senza frase: qui si accorda
   solo l'altezza, se no resterebbe alto 52 e prenderebbe mezza barra. */
/* Solo l'intestazione. `.logo` e' la stessa classe anche nel pie' di pagina:
   con il selettore largo il marchio in fondo passava da 26 a 52 - il doppio -
   e nessuno se ne accorgeva guardando la barra in alto, che era giusta. */
/* `max-width:none` annulla la regola globale `img,svg{max-width:100%}`: con
   l'altezza bloccata a 52 quel limite comprimeva la larghezza e il marchio
   usciva schiacciato del 20%. */

#nav .logo img { display:block; height:30px; width:auto; max-width:none; }
@media (max-width:760px) { #nav .logo img { height:26px; } }
/* In fondo comandano gli attributi del tag: 26px, senza frase. */
footer .logo img { display:block; }
.logo .wordmark { white-space:nowrap; }
.nav-links { display:flex; gap:2px; }
.nav-links a {
  font-size:14px; font-weight:600; color:var(--t2);
  padding:9px 13px; border-radius:0; transition:color .2s, background .2s;
  position:relative;
}
.nav-links a:hover { color:var(--t1); background:none; }
.nav-links a.active { color:var(--t1); }
.nav-links a.active::after {
  content:''; position:absolute; left:15px; right:15px; bottom:3px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--acc),var(--acc3));
}
/* ═══ LE ICONE DEL MENU SERVIZI ═══
   Disegnate da noi e incorporate: un'emoji la disegna il font di chi guarda, e
   dove manca esce un rettangolo. `currentColor` fa seguire all'icona il colore
   della voce, quindi si accende da sola al passaggio del mouse senza una
   regola in piu'. */
.nd-ico { width:19px; height:19px; flex:0 0 19px; color:var(--acc); opacity:.75; transition:opacity .2s; }
.nav-drop-m a:hover .nd-ico, .nav-drop-m a:focus-visible .nd-ico { opacity:1; }
/* «Area Clienti»: l'ultima voce e' la sola che porta a casa il lavoro, quindi
   e' l'unica che pesa piu' delle altre. Prima aveva un `style="color:..."`
   scritto nel tag, che e' anche il motivo per cui non poteva diventare un
   pulsante: uno stile in linea batte qualunque foglio. */
.nav-links > a:last-child {
  background:none; color:var(--acc); font-weight:700;
  border:1px solid rgba(30,155,255,.55); border-radius:10px;
  padding:9px 17px; margin-left:12px;
}
.nav-links > a:last-child:hover {
  color:#fff; background:rgba(30,155,255,.14); border-color:rgba(30,155,255,.9);
}
.nav-links > a:last-child::after { display:none; }
#burger { display:none; background:none; border:none; cursor:pointer; padding:10px; }
#burger span { display:block; width:21px; height:2px; background:var(--t1); margin:4px 0; border-radius:2px; }

/* ═══ VOCE A SCOMPARSA "SERVIZI" ═══
   Le cinque pagine stanno qui invece che distese nel menu: il menu resta quello
   che accompagna la home, e le pagine hanno comunque il loro posto in alto.

   IL PANNELLO SI NASCONDE CON opacity + visibility, NON CON display:none.
   E' la ragione per cui questa voce ha senso anche per Google: i link restano
   <a href> veri, scritti nell'HTML fin dall'inizio e non inseriti al clic,
   quindi vengono letti e seguiti come qualsiasi altro link. Con display:none
   funzionerebbe lo stesso, ma visibility mantiene il pannello raggiungibile
   anche con la tastiera (:focus-within qui sotto). */
.nav-drop { position:relative; display:flex; align-items:center; }
.nav-drop-t {
  font-family:var(--fb); font-size:14px; font-weight:600; color:var(--t2);
  background:none; border:none; cursor:pointer;
  padding:9px 15px; border-radius:9px;
  display:inline-flex; align-items:center; gap:6px;
  /* line-height COPIATA DAI LINK, non lasciata a "normal": i <button> non
     ereditano l'interlinea del <body> come fanno gli <a>, e senza questa riga
     il bottone e' alto 37px contro i 41px dei link, con la scritta "Servizi"
     due pixel piu' in alto delle altre voci. */
  line-height:1.65;
  transition:color .2s, background .2s;
}
.nav-drop-t:hover, .nav-drop.open .nav-drop-t { color:var(--t1); background:rgba(255,255,255,.05); }
.nav-drop-t .fx { font-size:10px; transition:transform .25s var(--ease); }
.nav-drop:hover .nav-drop-t .fx, .nav-drop.open .nav-drop-t .fx { transform:rotate(180deg); }

.nav-drop-m {
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:330px; padding:8px;
  background:var(--panel); border:1px solid var(--line2); border-radius:16px;
  box-shadow:0 30px 60px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-drop:hover .nav-drop-m,
.nav-drop:focus-within .nav-drop-m,
.nav-drop.open .nav-drop-m { opacity:1; visibility:visible; transform:translateX(-50%); }
/* Ponte invisibile fra la voce e il pannello: senza, i 10px di stacco fanno
   perdere l'hover mentre il puntatore scende e il pannello si richiude in
   faccia. */
.nav-drop-m::before { content:''; position:absolute; left:0; right:0; top:-12px; height:12px; }
/* Una griglia di due colonne, non un blocco: l'icona sta a sinistra e il testo
   - nome sopra, descrizione sotto - occupa la colonna di destra su due righe.
   Con display:block l'icona finiva SOPRA il nome, perche' <b> e <span> sono
   blocchi e si incolonnavano tutti e tre. */
.nav-drop-m a { display:grid; grid-template-columns:auto 1fr; column-gap:11px;
  align-items:center; padding:10px 12px; border-radius:11px; transition:background .2s; }
.nav-drop-m .nd-ico { grid-column:1; grid-row:1 / span 2; align-self:center; }
.nav-drop-m b, .nav-drop-m span { grid-column:2; }
.nav-drop-m a:hover { background:rgba(255,255,255,.06); }
.nav-drop-m b { display:block; font-family:var(--fd); font-size:14px; font-weight:700; color:var(--t1); line-height:1.35; }
.nav-drop-m span { font-size:12.5px; color:var(--t3); line-height:1.45; }

/* ═══ SELETTORE DI LINGUA ═══
   Sta in terza colonna della barra, fuori da .nav-links: vedi il perche' sopra,
   nel blocco .nav-in.

   NIENTE JAVASCRIPT, ED E' UNA SCELTA. Il pannello si apre con :hover sul
   computer e con :focus-within al tocco, perche' toccare un <button> gli da' il
   fuoco. Il sottomenu "Servizi" invece ha un gestore in js/pagine.js e un
   secondo gestore identico dentro index.html, che vanno tenuti allineati a
   mano: un terzo posto da ricordare non lo si aggiunge se il CSS basta.

   Nascosto con opacity+visibility e MAI con display:none: dentro ci sono i
   collegamenti alle altre cinque lingue, e Google li deve trovare anche a
   pannello chiuso — e' tutto il senso delle annotazioni hreflang. */
.lang { position:relative; display:flex; align-items:center; }
.lang-t {
  font-family:var(--fb); font-size:13px; font-weight:600; color:var(--t2);
  background:none; border:1px solid var(--line2); cursor:pointer;
  padding:6px 10px; border-radius:9px;
  display:inline-flex; align-items:center; gap:6px;
  /* line-height come sul tasto "Servizi", e per lo stesso motivo: i <button>
     non ereditano l'interlinea del <body>. */
  line-height:1.65;
  transition:color .2s, background .2s, border-color .2s;
}
.lang-t:hover, .lang:focus-within .lang-t {
  color:var(--t1); background:rgba(255,255,255,.05); border-color:#3C4557;
}
.lang-g { width:15px; height:15px; opacity:.72; flex-shrink:0; }
.lang-c { letter-spacing:.03em; }
.lang-t .fx { font-size:10px; transition:transform .25s var(--ease); }
.lang:hover .lang-t .fx, .lang:focus-within .lang-t .fx { transform:rotate(180deg); }
.lang-m {
  position:absolute; top:calc(100% + 10px); right:0;
  width:190px; padding:8px;
  background:var(--panel); border:1px solid var(--line2); border-radius:14px;
  box-shadow:0 30px 60px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.lang:hover .lang-m, .lang:focus-within .lang-m {
  opacity:1; visibility:visible; transform:none;
}
/* Ponte invisibile fra il tasto e il pannello: senza, i 10px di stacco fanno
   perdere l'hover a meta' strada e il pannello si chiude sotto il puntatore.
   Stessa soluzione di .nav-drop-m. */
.lang-m::before { content:''; position:absolute; left:0; right:0; top:-12px; height:12px; }
.lang-m a {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:8px 11px; border-radius:9px; text-decoration:none;
}
.lang-m a:hover { background:rgba(255,255,255,.06); }
.lang-m b { font-family:var(--fd); font-size:14px; font-weight:600; color:var(--t1); }
.lang-m span { font-family:var(--fm); font-size:11px; color:var(--t3); letter-spacing:.06em; }

/* Avviso in cima alle pagine legali tradotte: dice che a fare fede e'
   l'italiano. Lo mette tools/traduci-sito.py e sulla versione italiana non
   compare. Bordo a sinistra e non riquadro pieno: deve leggersi come una nota
   sul testo, non come un avviso di pericolo che si salta per abitudine. */
.avviso-lingua {
  margin:0 0 26px; padding:11px 16px;
  border-left:3px solid var(--line2); border-radius:0 8px 8px 0;
  background:rgba(255,255,255,.03);
  font-size:13.5px; line-height:1.6; color:var(--t3);
}
.avviso-lingua a { color:var(--t2); }

/* ═══ BRICIOLE DI PANE ═══
   Servono a chi legge, ma soprattutto a Google: insieme allo schema
   BreadcrumbList sono il modo in cui capisce che queste pagine sono rami
   della home e non cinque siti scollegati. */
.briciole {
  padding:104px 0 0; font-family:var(--fm); font-size:12px; color:var(--t3);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.briciole a { color:var(--t2); }
.briciole a:hover { color:var(--acc); }
.briciole span[aria-current] { color:var(--t3); }
.briciole .sep { opacity:.5; }

/* ═══ TESTATA DI PAGINA ═══ */
.pag-testa { padding:26px 0 64px; position:relative; overflow:hidden; }
.pag-testa::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 70% at 15% 0%, rgba(30,155,255,.13), transparent 62%),
    radial-gradient(ellipse 55% 50% at 88% 15%, rgba(44,230,184,.07), transparent 68%);
}
/* Il contenuto va rialzato sopra l'alone, non l'alone spinto sotto con
   z-index:-1: quello lo manderebbe dietro allo sfondo del <body> e su alcuni
   browser sparirebbe del tutto. */
.pag-testa > * { position:relative; z-index:1; }
/* TESTATA CENTRATA, come le intestazioni di sezione e come fa la vetrina.
   Prima era allineata a sinistra: su una pagina che si apre con un titolo
   grosso e tre righe di sommario, la colonna di testo a sinistra con mezza
   pagina vuota a destra sembrava un impaginato lasciato a meta'. */
.pag-testa { text-align:center; }
.pag-testa .kick { display:flex; justify-content:center; }
.pag-testa .lead { font-size:17px; margin-left:auto; margin-right:auto; }
.pag-testa .cta-row { margin-top:34px; justify-content:center; }

/* ─── striscia dei numeri sotto la testata ─── */
.fatti { display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; justify-content:center; }
.fatto {
  border:1px solid var(--line); background:var(--panel); border-radius:12px;
  padding:12px 18px; display:flex; align-items:center; gap:10px;
  font-size:13.5px; color:var(--t2);
}
.fatto b { font-family:var(--fd); color:var(--t1); font-weight:700; }
.fatto svg { color:var(--acc); flex-shrink:0; }

/* ═══ SEZIONI ═══ */
section { padding:80px 0; }
section.alt { background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sez-testa { max-width:680px; margin:0 auto 44px; text-align:center; }
.sez-testa .lead { margin:6px auto 0; }
/* La lineetta resta solo a sinistra della scritta, come nella vetrina: e' un
   ::before, e centrando col justify-content non serve toglierla. */
.sez-testa .kick { display:flex; justify-content:center; }

/* ═══ SCHEDE ═══ */
.griglia { display:grid; gap:18px; }
.g2 { grid-template-columns:repeat(2,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g4 { grid-template-columns:repeat(4,1fr); }
.scheda {
  border:1px solid var(--line); background:var(--panel); border-radius:16px;
  padding:26px 24px; transition:border-color .3s, transform .3s var(--ease), background .3s;
}
.scheda:hover { border-color:var(--line2); transform:translateY(-3px); background:var(--panel2); }
.scheda h3 { font-size:16.5px; margin-bottom:9px; }
.scheda p { color:var(--t2); font-size:14px; }
.scheda .ico {
  width:40px; height:40px; border-radius:11px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(30,155,255,.10); color:var(--acc); border:1px solid rgba(30,155,255,.22);
}
.scheda .tag {
  display:inline-block; margin-bottom:12px;
  font-family:var(--fm); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--t3);
}

/* elenco puntato con la spunta */
.spunte { list-style:none; display:grid; gap:11px; }
.spunte li { display:flex; gap:12px; align-items:flex-start; color:var(--t2); font-size:15px; }
.spunte li::before {
  content:'✓'; flex-shrink:0; margin-top:1px;
  width:21px; height:21px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(44,230,184,.12); color:var(--mint);
  font-size:12px; font-weight:700;
}
.spunte li b { color:var(--t1); font-weight:600; }

/* I BLOCCHI si centrano, il LORO TESTO no.
   Elenchi puntati e passi numerati con le righe centrate diventano illeggibili:
   l'occhio perde la colonna da cui ripartire a ogni riga. Si centra quindi la
   scatola dentro la pagina e si lascia il testo allineato a sinistra. */
.passi, .spunte { margin-left:auto; margin-right:auto; }
p.testo { text-align:center; margin-left:auto; margin-right:auto; max-width:640px; }

/* ─── passi numerati ─── */
.passi { list-style:none; counter-reset:p; display:grid; gap:16px; }
.passi li {
  counter-increment:p; position:relative; padding-left:56px;
  color:var(--t2); font-size:15px;
}
.passi li::before {
  content:counter(p,decimal-leading-zero);
  position:absolute; left:0; top:-2px;
  font-family:var(--fm); font-size:13px; font-weight:500;
  width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line2); color:var(--acc);
}
.passi li b { display:block; color:var(--t1); font-family:var(--fd); font-weight:700; font-size:15.5px; margin-bottom:3px; }

/* ─── sigle delle piattaforme ─── */
.sigle { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.sigla {
  font-family:var(--fm); font-size:12.5px; color:var(--t2);
  border:1px solid var(--line2); border-radius:9px; padding:7px 13px;
  background:var(--panel); transition:border-color .25s, color .25s;
}
.sigla:hover { border-color:var(--acc); color:var(--t1); }
.sigla b { color:var(--acc3); font-weight:500; }

/* ═══ FAQ ═══ */
.faq-item { border:1px solid var(--line); border-radius:14px; background:var(--panel); margin-bottom:12px; overflow:hidden; transition:border-color .3s; }
.faq-item.open { border-color:rgba(44,230,184,.35); }
.faq-q {
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:20px 24px; text-align:left;
  font-family:var(--fd); font-size:15.5px; font-weight:700; color:var(--t1);
}
.faq-q .fx { font-size:20px; font-weight:400; color:var(--t3); transition:transform .35s var(--ease), color .3s; flex-shrink:0; }
.faq-item.open .fx { transform:rotate(45deg); color:var(--acc); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-a p { padding:0 24px 22px; color:var(--t2); font-size:14px; }

/* ═══ MODULO PREVENTIVO ═══ */
.modulo {
  border:1px solid var(--line2); background:var(--panel); border-radius:20px;
  padding:34px 32px;
}
.campi { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.campo { display:flex; flex-direction:column; gap:7px; }
.campo.pieno { grid-column:1 / -1; }
.campo label { font-family:var(--fm); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); }
.campo label .obb { color:var(--acc); }
.campo input, .campo select, .campo textarea {
  font-family:var(--fb); font-size:15px; color:var(--t1);
  background:var(--bg2); border:1px solid var(--line2); border-radius:11px;
  padding:13px 15px; width:100%;
  transition:border-color .25s, background .25s;
}
.campo textarea { resize:vertical; min-height:118px; line-height:1.6; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline:none; border-color:var(--acc); background:var(--panel2);
}
.campo input::placeholder, .campo textarea::placeholder { color:var(--t3); }
.campo .aiuto { font-size:12.5px; color:var(--t3); }
/* il messaggio d'errore nasce nascosto: compare solo se il campo e' vuoto al
   momento dell'invio, cosi' non si apre la pagina gia' piena di rosso */
.campo .err { font-size:12.5px; color:var(--red); display:none; }
.campo.ko input, .campo.ko textarea, .campo.ko select { border-color:var(--red); }
.campo.ko .err { display:block; }
.modulo-piede { margin-top:26px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.modulo-piede .nota { font-size:12.5px; color:var(--t3); max-width:420px; }

/* Riepilogo dopo l'invio. Compare solo a modulo confermato ed e' la rete di
   sicurezza del metodo mailto: se sul dispositivo non c'e' un programma di
   posta configurato non si apre niente, e senza questo riquadro l'utente
   resterebbe a guardare una pagina che sembra non aver fatto nulla. Qui invece
   trova il testo pronto da copiare su WhatsApp. */
.esito {
  margin-top:24px; border:1px solid rgba(44,230,184,.35); border-radius:16px;
  background:rgba(44,230,184,.05); padding:24px;
}
.esito h3 { font-size:16px; color:var(--mint); margin-bottom:8px; }
.esito p { color:var(--t2); font-size:14px; }
.esito pre {
  margin-top:16px; padding:16px; border-radius:11px;
  background:var(--bg2); border:1px solid var(--line2);
  font-family:var(--fm); font-size:12.5px; line-height:1.7; color:var(--t2);
  white-space:pre-wrap; word-break:break-word; max-height:280px; overflow:auto;
}
.esito .cta-row { margin-top:16px; }

/* ═══ RIQUADRO DI CHIUSURA ═══ */
.chiusura {
  border:1px solid var(--line2); border-radius:22px; padding:52px 44px;
  background:
    radial-gradient(ellipse 70% 120% at 12% 0%, rgba(30,155,255,.13), transparent 62%),
    var(--panel);
  text-align:center;
}
.chiusura h2 { font-family:var(--fd); font-weight:800; font-size:clamp(24px,3vw,36px); letter-spacing:-.02em; line-height:1.12; }
.chiusura p { color:var(--t2); margin:14px auto 0; max-width:520px; font-size:15.5px; }
.chiusura .cta-row { justify-content:center; margin-top:30px; }
.chiusura .righe { margin-top:34px; display:flex; gap:34px; justify-content:center; flex-wrap:wrap; font-family:var(--fm); font-size:13px; color:var(--t3); }
.chiusura .righe a { color:var(--t1); border-bottom:1px solid var(--acc); padding-bottom:2px; }
.chiusura .righe a:hover { color:var(--acc); }

/* ─── rimando alle altre pagine ───
   Ogni pagina linka le altre quattro. Non e' riempitivo: sono i collegamenti
   interni con cui Google capisce che le cinque pagine sono le sezioni
   principali del sito, ed e' fra queste che sceglie le voci da mostrare
   sotto il risultato di ricerca. */
.altre { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:12px; }
.altra {
  border:1px solid var(--line); background:var(--panel); border-radius:14px; padding:20px;
  transition:border-color .3s, transform .3s var(--ease);
}
.altra:hover { border-color:var(--acc); transform:translateY(-3px); }
.altra b { display:block; font-family:var(--fd); font-size:14.5px; color:var(--t1); margin-bottom:5px; }
.altra span { font-size:13px; color:var(--t3); }

/* ═══ PIE' DI PAGINA ═══ */
footer { border-top:1px solid var(--line); padding:44px 0; background:var(--bg2); }
/* ═══ PIE' DI PAGINA — GRIGLIA A QUATTRO COLONNE ═══
   Era un flex con `justify-content:space-between`: le colonne si allargavano
   ognuna quanto il suo contenuto e i distacchi erano tutti diversi. In griglia
   le tre colonne di link sono larghe uguali fra loro e allineate, e il blocco
   del marchio ha la sua misura (1.5fr) perche' contiene logo e recapiti.
   `grid-column:1/-1` sulle due righe in fondo le fa correre per tutta la
   larghezza, sotto le colonne. */
.foot {
  display:grid; grid-template-columns:auto auto auto auto;
  justify-content:space-between;
  gap:46px 34px; align-items:start;
  font-size:13px; color:var(--t3);
}
.foot > div:first-child { max-width:300px; }
.foot a:hover { color:var(--t1); }
.foot-links { display:flex; flex-direction:column; gap:10px; }
.foot-links h2 {
  font-family:var(--fm); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--t3);
  margin-bottom:2px;
}
.foot-links a { color:var(--t2); font-size:13.5px; }
.foot-links a:hover { color:var(--t1); }
.foot .disc { grid-column:1/-1; max-width:none; font-size:11.5px; line-height:1.6; }
.foot .foot-legale { grid-column:1/-1; }
/* Sotto i 1080px quattro colonne diventano strette: si passa a due, col blocco
   del marchio che prende tutta la riga. Sotto i 640px una sola. */
@media (max-width:1080px) {
  /* qui le tracce riempiono la riga, quindi space-between non ha spazio
     da distribuire: torna a due colonne uguali. */
  .foot { grid-template-columns:1fr 1fr; gap:38px 30px; }
  .foot > div:first-child { grid-column:1/-1; max-width:none; }
}
@media (max-width:640px) {
  .foot { grid-template-columns:1fr; gap:32px; }
}

/* ─── riga legale in fondo al pie' di pagina ───
   Ragione sociale, sede e partita IVA: per una societa' che vende online la
   pubblicazione della P.IVA e' un obbligo (art. 35 DPR 633/1972), e prima non
   compariva da nessuna parte. Privacy e cookie stanno QUI e non piu' in mezzo
   alle voci di navigazione: chi cerca l'informativa guarda in fondo, non in una
   colonna di dodici link.
   flex-basis:100% perche' .foot e' un flex con wrap: cosi' la riga occupa una
   fascia sua sotto le colonne, invece di infilarsi come quarta colonna. */
/* Niente margin-top: il distacco lo da' gia' il rowGap della griglia (46px).
   Con tutti e due la riga legale finiva a 72px dalla nota sui marchi, contro i
   46 fra le colonne e la nota: tre fasce a distanze diverse. Ora sono 46 e 46,
   e i 20px di padding servono solo a staccare il testo dalla linea. */
.foot-legale {
  grid-column:1/-1; padding-top:20px;
  border-top:1px solid var(--line);
  font-size:12px; line-height:1.7; color:var(--t3); text-align:center;
}
.foot-legale a { color:var(--t2); border-bottom:1px solid var(--line2); padding-bottom:1px; }
.foot-legale a:hover { color:var(--acc); border-bottom-color:var(--acc); }

/* ─── pagine legali: privacy, cookie, condizioni d'uso ───
   Aggiunte il 16 agosto 2026. Prima queste tre pagine NON avevano nessuno
   stile: `.legale`, `.aggiornata`, `.titolare` e `.tab-wrap` comparivano nel
   generatore ma nel foglio non esisteva una sola regola che le riguardasse.
   Su schermo largo passava perche' la riga non superava mai troppo i limiti
   della leggibilita'; sul telefono no — i titoli non si staccavano dal testo,
   le sezioni si fondevano una nell'altra e le tabelle uscivano dallo schermo
   spingendo l'intera pagina di lato.

   Un documento legale illeggibile e' un documento che non e' stato letto, e
   questo e' esattamente il tipo di pagina che qualcuno tira fuori il giorno che
   c'e' una contestazione. */
:is(.legale,.prosa) { max-width:76ch; }

/* La riga della data: piccola e discreta, ma va vista subito perche' e' la
   prima cosa che si controlla su un documento di questo tipo. */
:is(.legale,.prosa) .aggiornata {
  font-family:var(--fm); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--t3); padding-bottom:20px; margin-bottom:6px; border-bottom:1px solid var(--line);
}

/* Il titolo di sezione e' cio' che rende scorribile un documento lungo: si
   cerca la sezione, non si legge da capo. Il filo sopra separa i blocchi
   meglio di qualunque margine — su schermo stretto un margine grande e basta
   sembra spazio vuoto, non una divisione. */
:is(.legale,.prosa) h2 {
  font-family:var(--fd); font-size:20px; font-weight:800; letter-spacing:-.01em;
  color:var(--t1); margin:44px 0 14px; padding-top:26px; border-top:1px solid var(--line);
}
:is(.legale,.prosa) h2:first-of-type { border-top:0; padding-top:0; margin-top:26px; }
:is(.legale,.prosa) h3 { font-size:16px; margin:26px 0 10px; color:var(--t1); }

:is(.legale,.prosa) p { color:var(--t2); font-size:15.5px; line-height:1.72; }
:is(.legale,.prosa) p + p { margin-top:13px; }
:is(.legale,.prosa) b, .legale strong { color:var(--t1); font-weight:600; }
:is(.legale,.prosa) a:not(.btn) { color:var(--acc); border-bottom:1px solid rgba(30,155,255,.35); }
:is(.legale,.prosa) a:not(.btn):hover { border-bottom-color:var(--acc); }

:is(.legale,.prosa) ul { margin:14px 0 0; padding-left:0; list-style:none; }
:is(.legale,.prosa) li {
  position:relative; padding:7px 0 7px 22px;
  color:var(--t2); font-size:15px; line-height:1.6;
}
:is(.legale,.prosa) li::before {
  content:''; position:absolute; left:4px; top:16px;
  width:6px; height:6px; border-radius:50%; background:var(--acc); opacity:.55;
}

/* Il riquadro con ragione sociale, sede e partita IVA. Va distinto dal testo:
   e' l'unico blocco della pagina che qualcuno copia davvero, per scrivere una
   PEC o una raccomandata. */
:is(.legale,.prosa) .titolare {
  background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; margin:18px 0 8px;
}
:is(.legale,.prosa) .titolare p { color:var(--t2); font-size:14.5px; line-height:1.85; }

/* ⚠️ Le tabelle scorrono DENTRO il proprio riquadro, non trascinano la pagina.
   Senza questo, una tabella a tre colonne su uno schermo da 375px allarga il
   documento e tutto il testo si sposta di lato a ogni scorrimento: e' il
   difetto che rendeva le pagine legali illeggibili sul telefono. */
:is(.legale,.prosa) .tab-wrap {
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:16px 0 4px; border:1px solid var(--line); border-radius:14px; background:var(--bg2);
}
:is(.legale,.prosa) table { width:100%; border-collapse:collapse; min-width:520px; }
:is(.legale,.prosa) th, .legale td {
  text-align:left; padding:12px 16px; font-size:13.5px; line-height:1.55;
  border-bottom:1px solid var(--line); vertical-align:top;
}
:is(.legale,.prosa) th {
  font-family:var(--fm); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--t3); background:rgba(255,255,255,.02); white-space:nowrap;
}
:is(.legale,.prosa) td { color:var(--t2); }
:is(.legale,.prosa) td:first-child { color:var(--t1); }
:is(.legale,.prosa) tr:last-child td { border-bottom:0; }

@media (max-width:760px) {
  /* 44px di margine laterale su uno schermo da 375px lasciano 287px di testo:
     la colonna diventa cosi' stretta che ogni frase si spezza in tre righe, ed
     e' meta' del motivo per cui queste pagine si leggevano male sul telefono.
     24px e' lo stesso valore che usa gia' la vetrina. */
  /* La barra segue il contenuto: prima .container scendeva a 24px e .nav-in
     restava a 44, quindi il logo era rientrato di venti pixel piu' del testo
     sotto — si notava, perche' sono incolonnati uno sull'altro. E il pannello
     del menu, ancorato a 12px dal bordo, finiva scollegato dal pulsante che lo
     apre, che stava a 44. */
  .container, .nav-in { padding-left:24px; padding-right:24px; }

  /* Sotto i 760px il testo prende tutta la colonna: il limite in `ch` serve a
     non far correre l'occhio su righe lunghissime, problema che su un telefono
     non esiste. */
  :is(.legale,.prosa) { max-width:none; }
  :is(.legale,.prosa) h2 { font-size:18px; margin:34px 0 12px; padding-top:22px; }
  :is(.legale,.prosa) p, .legale li { font-size:15px; }
  :is(.legale,.prosa) .titolare { padding:16px 18px; }
  /* ⚠️ SUL TELEFONO LE TABELLE NON SONO PIU' TABELLE.
     Prima scorrevano di lato dentro il proprio riquadro: meglio che trascinare
     la pagina, ma comunque una mezza soluzione — per leggere la terza colonna
     bisogna trascinare, e su un documento legale cio' che va trascinato non
     viene letto. Qui ogni riga diventa un blocco e le tre colonne si
     incolonnano, ciascuna sotto la propria etichetta. Niente scorrimento
     orizzontale da nessuna parte.
     L'etichetta esce da `data-et`, che il generatore scrive in ogni cella:
     senza, sparita la riga dei titoli resterebbero tre frasi sciolte. */
  :is(.legale,.prosa) .tab-wrap {
    overflow:visible; border:0; background:none; border-radius:0; margin:16px 0 4px;
  }
  :is(.legale,.prosa) table { display:block; min-width:0; width:auto; }
  /* `tbody` c'e' anche se non e' scritto nel sorgente: lo aggiunge il browser,
     e senza questa riga resterebbe una scatola di tipo tabella in mezzo, che
     annulla il display:block di quelle sopra e sotto. */
  :is(.legale,.prosa) tbody { display:block; }
  :is(.legale,.prosa) tr.intest { display:none; }
  :is(.legale,.prosa) tr {
    display:block; padding:14px 16px; margin-bottom:10px;
    border:1px solid var(--line); border-radius:14px; background:var(--bg2);
  }
  :is(.legale,.prosa) tr:last-child { margin-bottom:0; }
  :is(.legale,.prosa) td { display:block; padding:0; border-bottom:0; font-size:14.5px; }
  :is(.legale,.prosa) td::before {
    content:attr(data-et);
    display:block; margin-bottom:3px;
    font-family:var(--fm); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--t3);
  }
  /* Il filo separa i campi dentro il blocco: senza, tre valori uno sotto
     l'altro sembrano un unico paragrafo spezzato male. */
  :is(.legale,.prosa) td + td { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
  :is(.legale,.prosa) td:first-child { color:var(--t1); font-weight:600; }
}

/* ═══ MENU A PANINO ═══════════════════════════════════════════════
   Portato qui il 17 agosto 2026, copiandolo da index.html.

   IL BUCO CHE CHIUDE
   Il markup della barra lo scrive barra() in tools/comune.py ed e' identico a
   quello della vetrina: c'e' il pulsante #burger, c'e' #nav-links, c'e' il
   sottomenu #nav-drop. Anche il gestore c'era gia', in js/pagine.js. Mancava
   soltanto QUESTO: le regole che sotto una certa larghezza nascondono le voci
   e accendono il pulsante. Senza, su queste pagine il ☰ restava invisibile
   (#burger nasce display:none) e le otto voci restavano distese in barra su
   uno schermo da 375px.
   Il difetto non si vedeva provando dal computer, ed e' il motivo per cui e'
   sopravvissuto: la barra sembrava a posto perche' a quella larghezza lo era.

   PERCHE' COPIATO E NON CONDIVISO
   La vetrina ha il suo foglio dentro la pagina, queste hanno pagine.css: sono
   due impianti separati per una ragione — index.html deve stare in piedi da
   sola, senza fogli esterni, perche' e' la pagina che si carica per prima.
   Finche' restano due, le regole della barra vanno tenute allineate a mano.
   Se si tocca il menu di la', si tocca anche qui. */
@media (max-width:1300px) {
  .nav-links { display:none; }
  /* Il pannello si aggancia al pulsante che lo apre, cioe' a DESTRA.
     Prima era `left:12px; right:12px`: largo quanto lo schermo, quindi
     scollegato dal ☰ che l'aveva appena aperto — si apriva una fascia e non un
     menu, e il dito che aveva toccato in alto a destra si ritrovava le voci
     dall'altra parte. Ancorato a destra il legame fra il tasto e cio' che ne
     esce e' immediato, ed e' anche il lato dove sta il pollice su un telefono
     tenuto in una mano.
     La larghezza e' un valore fisso con un tetto: 300px sono la misura giusta
     per otto voci brevi, e `calc(100% - 24px)` impedisce che su uno schermo da
     320px il pannello esca dai bordi. */
  .nav-links.open {
    display:flex; flex-direction:column; position:absolute; top:var(--barra); right:12px; left:auto;
    width:min(300px, calc(100% - 24px));
    background:var(--panel); border:1px solid var(--line2); border-radius:16px; padding:14px;
    box-shadow:0 30px 60px rgba(0,0,0,.6);
  }
  #burger { display:block; }

  /* ── IL PANNELLO DEL PANINO ────────────────────────────────────
     Rifatto il 31 agosto 2026: era otto voci in fila, tutte dello stesso peso,
     senza gruppi. Si leggeva come un elenco.
     Le tre cose che lo rendono un pannello e non una lista: un filo di accento
     in cima, i gruppi separati da una riga sottile, e una sola voce che pesa
     piu' delle altre (Area Clienti, che e' la destinazione che conta). */
  .nav-links.open {
    width:min(340px, calc(100% - 24px));
    padding:0; gap:0;
    /* In colonna `align-items` governa l'orizzontale, non piu' il verticale:
       il `center` che serve alla barra qui centrerebbe tutte le voci. Con
       `stretch` ogni voce prende tutta la larghezza, il testo parte da
       sinistra e il dito puo' toccare ovunque sulla riga invece che solo sulle
       lettere. */
    align-items:stretch;
    /* Il pannello non puo' superare lo schermo. Con i servizi aperti misura 761
       px: su un telefono alto 667 usciva di 166 px sotto il bordo, e siccome
       overflow:hidden serviva ad arrotondare gli angoli, «Area Clienti»
       diventava IRRAGGIUNGIBILE — non si poteva nemmeno scorrere fino a lei.
       `hidden auto` tiene il taglio ai lati (che e' quello che arrotonda) e
       lascia scorrere in verticale.
       `dvh` invece di `vh` perche' sul telefono la barra del browser si ritira
       e si riapre: con `vh` il conto e' fatto sull'altezza massima e il fondo
       del pannello resta sotto la barra proprio quando c'e'. La riga con `vh`
       resta sopra come ripiego per i browser che non conoscono `dvh`. */
    max-height:calc(100vh - var(--barra) - 12px);
    max-height:calc(100dvh - var(--barra) - 12px);
    overflow:hidden auto;
    overscroll-behavior:contain;
  }
  /* Il filo in cima: gli stessi due blu del marchio. E' l'unico ornamento, e
     serve a dire dove comincia il pannello senza aggiungere una riga di testo. */
  .nav-links.open::before {
    content:''; display:block; height:2px; flex:0 0 2px;
    background:linear-gradient(90deg, var(--acc), var(--acc3));
  }
  .nav-links.open > a,
  .nav-links.open > .nav-drop { margin:0 10px; width:auto; }
  .nav-links.open > a:first-of-type { margin-top:10px; }
  .nav-links.open > a { padding:10px 12px; font-size:14.5px; border-radius:9px; }

  /* Il gruppo dei servizi si stacca da quello delle ancore. Una riga sottile
     basta: due gruppi di voci separati da niente sono un gruppo solo. */
  .nav-links.open > .nav-drop {
    margin-top:8px; padding-top:8px; border-top:1px solid var(--line);
  }

  /* «Area Clienti» e' l'ultima voce ed e' quella che porta a casa il lavoro:
     smette di essere un link grigio come gli altri e diventa un pulsante. */
  .nav-links.open > a:last-child {
    margin:10px; padding:12px 14px; border-radius:11px;
    background:linear-gradient(120deg, var(--acc), var(--acc2));
    color:#fff !important; font-weight:700; text-align:center;
  }
  .nav-links.open > a:last-child:hover { filter:brightness(1.08); background:linear-gradient(120deg, var(--acc), var(--acc2)); }

  /* Dentro il sottomenu le descrizioni TORNANO. C'erano gia' nel markup ma una
     regola le spegneva: sono la differenza fra «Download Mappe» e «Download
     Mappe - navigazione pronta da installare», cioe' fra un nome e una
     risposta alla domanda «e' questa la voce che cerco?». */
  .nav-links.open .nav-drop-m span { display:block; font-size:12px; line-height:1.45; color:var(--t3); margin-top:2px; }
  .nav-links.open .nav-drop-m a { padding:9px 12px; border-radius:9px; align-items:flex-start; }
  .nav-links.open .nav-drop-m a:hover { background:rgba(255,255,255,.05); }
  .nav-links.open .nav-drop-m b { font-size:14px; font-weight:600; color:var(--t1); display:block; }
  .nav-links.open .nav-drop-m { padding:0; }
  .nav-links.open .nav-drop.open .nav-drop-m { max-height:560px; }
  .nav-links.open .nav-drop-t { padding:10px 12px; }

  /* «Servizi» e' un SOTTOMENU vero anche nel pannello del panino, non un
     elenco disteso.
     Prima le sei voci si mostravano tutte, con "Servizi" ridotto a semplice
     intestazione, per risparmiare un tocco. Il conto pero' era: quattordici
     voci una sotto l'altra, che non si leggono piu' come un menu — si leggono
     come una lista. Un tocco in piu' vale l'ordine.
     Chiuso di partenza: si apre solo se lo si chiede. */
  .nav-links.open .nav-drop { width:100%; display:block; }
  .nav-links.open .nav-drop-t {
    /* torna un tasto vero, e si veste come le altre voci del pannello */
    pointer-events:auto; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; text-align:left;
    font-family:var(--fd); font-size:15px; font-weight:600; letter-spacing:0;
    text-transform:none; color:var(--t2);
    padding:11px 15px; border-radius:10px;
  }
  .nav-links.open .nav-drop.open .nav-drop-t { color:var(--t1); background:rgba(255,255,255,.05); }
  .nav-links.open .nav-drop-t .fx { display:inline; font-size:11px; }

  .nav-links.open .nav-drop-m {
    position:static; transform:none; width:100%; padding:0 0 0 12px;
    background:none; border:none; box-shadow:none;
    /* CHIUSO: si apre con max-height, non con display, perche' display non si
       puo' animare e il pannello scatterebbe. L'altezza di arrivo e' generosa:
       serve solo a permettere la transizione, non a limitare. */
    opacity:1; visibility:visible;
    max-height:0; overflow:hidden;
    transition:max-height .32s var(--ease);
  }
  .nav-links.open .nav-drop.open .nav-drop-m { max-height:420px; }
  .nav-links.open .nav-drop-m::before { display:none; }
  .nav-links.open .nav-drop-m a { padding:9px 12px; }
  .nav-links.open .nav-drop-m b { font-size:14.5px; font-weight:600; color:var(--t2); }
}

/* ═══ LE GRIGLIE SU SCHERMO PICCOLO ══════════════════════════════
   Aggiunte il 17 agosto 2026. Fino a ieri .g2, .g3, .g4, .altre e .campi
   avevano UN solo valore, quello da computer, e nessuna fascia sotto: su un
   telefono da 375px le tre schede di «Cosa ripariamo» restavano affiancate a
   circa 90px l'una, il documento diventava largo 559px e la pagina scorreva
   di lato. Il browser reagiva riducendo la scala, quindi il testo si leggeva
   anche piu' piccolo di quanto fosse scritto.

   Non si vedeva provando dal computer: a quelle larghezze le griglie erano
   giuste, e nessuno era mai sceso sotto. E' lo stesso motivo per cui mancava
   il menu a panino su queste pagine — il foglio era stato scritto guardando
   una larghezza sola.

   Le soglie seguono quelle gia' usate sulla vetrina, cosi' passando da una
   pagina all'altra il sito non cambia comportamento a meta' strada. */
@media (max-width:1080px) {
  .g4 { grid-template-columns:repeat(2,1fr); }
  .g3 { grid-template-columns:repeat(2,1fr); }
  .altre { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  /* Una per riga. Due schede da 150px con titolo e due righe di testo non
     sono due schede: sono due colonne di parole spezzate. */
  .g2, .g3, .g4 { grid-template-columns:1fr; gap:14px; }
  .campi { grid-template-columns:1fr; }
  .scheda { padding:20px 18px; }
  /* Le voci «altre pagine» restano due per riga: sono un titolo e una riga di
     descrizione, e in colonna singola diventerebbero quattro fasce inutilmente
     alte in fondo alla pagina. */
  .altre { grid-template-columns:repeat(2,1fr); gap:10px; }
  .altra { padding:12px 13px; }
  .altra b { font-size:13.5px; }
  .altra span { font-size:12px; }
  /* Il tocco non ha il passaggio del mouse: il sollevamento resterebbe
     appiccicato all'ultima scheda toccata. */
  .scheda:hover, .altra:hover { transform:none; }
}
@media (max-width:430px) {
  /* Sotto i 430px anche due colonne di «altre pagine» stringono troppo. */
  .altre { grid-template-columns:1fr; }
}