/* ═══════════════════════════════════════════════════════════════════
   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;
  --acc:    #1E9BFF;
  --acc2:   #0B6CD4;
  --acc3:   #7FE0FF;

  --fd: 'Sora', sans-serif;
  --fb: 'Manrope', 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;
  background:linear-gradient(180deg, rgba(8,9,12,.92), rgba(8,9,12,.82));
  backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
/* 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:72px; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:20px;
}
.nav-in > .logo      { grid-column:1; justify-self:start;  }
.nav-in > .nav-links { grid-column:2; justify-self:center; }
.nav-in > #burger    { grid-column:3; 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; }
.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 15px; border-radius:9px; transition:color .2s, background .2s;
  position:relative;
}
.nav-links a:hover { color:var(--t1); background:rgba(255,255,255,.05); }
.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));
}
#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; }
.nav-drop-m a { display:block; padding:10px 12px; border-radius:11px; transition:background .2s; }
.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; }

/* ═══ 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:72px; 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; }

  /* «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 span { display:none; }   /* nel pannello basta il nome */
  .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; }
}