/* 44Bit — prototipo v3.0. La variabile --luce (0-1) e --sfondo sono scritte da app.js in base allo scroll. */

@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("assets/fonts/Poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("assets/fonts/Poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("assets/fonts/Poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-display: swap; src: url("assets/fonts/OpenSans-400.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-display: swap; src: url("assets/fonts/OpenSans-600.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-display: swap; src: url("assets/fonts/OpenSans-700.woff2") format("woff2"); }

:root {
  --crema: #FEEDDC;
  --arancio: #FF581D;
  --inchiostro: #140B07;
  --testo: #FEEDDC;
  --testo-2: rgba(254, 237, 220, 0.78);
  --filetto: rgba(254, 237, 220, 0.18);
  --sfondo: #0D0A09;
  --luce: 0;
  --bagliore: 0;
  --vis: 1;                       /* 0 = apertura, scena piena; 1 = sfumatura normale (da Chi siamo in poi) */
  --h: calc(1 - var(--vis));
  --fine: 0;                     /* 0 lontano dal fondo, 1 in fondo alla pagina (scritta da app.js) */
  --hm: var(--h);                 /* apertura della maschera: la scena è nitida in apertura e in fondo alla pagina */
  --luminosita: 1.15;             /* (2026-10-05) schiarita della scena durante lo scroll: 1 = nessuna; l'apertura non cambia (si applica con --vis) */
  /* centro del quadro del video (dove sta il chip nel finale), per l'alone di luce */
  --chip-x: calc(100vw - var(--margine) - var(--scena-w) * var(--estensione) + var(--scena-w) * 0.5);
  --estensione: 1.11;             /* riquadro della scena = quadro del video × 1,11: a destra resta la fascia di respiro */
  /* Layout: contenitore centrato di 105rem (1680px a 16px). Margine laterale = il maggiore tra 5% dello schermo e
     lo spazio che resta ai lati del contenitore; testata, testo e scena si allineano tutti a quel margine. */
  --margine: max(1.25rem, 5vw, calc((100vw - 105rem) / 2));
  --colonna: clamp(30rem, 46vw, 44rem);
  --scena-w: min(62vw, calc(100svh * 0.63), calc((100vw - 2 * var(--margine)) * 0.55));
  --titoli: "Poppins", "Segoe UI", system-ui, sans-serif;
  --testi: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --uscita: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* Sopra i 1920px tutto cresce poco a poco (rem), fino al 125% a 3840px. I frame sono a 720p: più di così si impastano. */
html { font-size: clamp(16px, calc(16px + (100vw - 1920px) * 0.00208), 20px); }

html {
  background: var(--sfondo);
  scrollbar-color: rgba(254, 237, 220, 0.32) var(--sfondo);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 400 1.0625rem/1.7 var(--testi);
  caret-color: var(--arancio);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--arancio); color: var(--inchiostro); }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.25em; }
:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; border-radius: 2px; }

.salta {
  position: fixed; left: 1rem; top: -4rem; z-index: 50;
  background: var(--crema); color: var(--inchiostro);
  padding: 0.6rem 1rem; border-radius: 0.5rem; font-weight: 600;
}
.salta:focus { top: 1rem; }

/* ---------- La scena: riquadro 9:16 fisso a destra, dissolto verso sinistra ---------- */
/* Maschera della scena (2026-10-05). Ora: a sinistra opacità 0,55 al 24% e 0,88 al 46% (a h = 0), piena dal 56%; a destra piena fino al 66%, poi 0,65 al 77%, 0,3 all'85%, zero al 90% (dove finisce il quadro del video: una sfumatura che finisce dopo il 90% lascia vedere il bordo come una riga).
   VALORI PRECEDENTI per tornare indietro. Originale della v3.0: sinistra 0,22 al 24% e 0,6 al 46%; destra `#000 calc(72% + 20% * var(--h)), transparent calc(88% + 12% * var(--h))`. Passo intermedio del 2026-10-05 (prima del secondo rialzo): sinistra 0,40 al 24% e 0,78 al 46%, piena dal 60%; destra piena fino al 62%, 0,6 al 74%, 0,25 all'83%, zero al 90%. Tentativo scartato (riga visibile a destra): `#000 calc(82% + 10% * var(--h)), transparent calc(91% + 9% * var(--h))`. Copia del file originale: v3.0/archivio/style-prima-maschera.css */

.scena {
  position: fixed; top: 0; right: var(--margine); bottom: 0; z-index: 0;
  width: calc(var(--scena-w) * var(--estensione));
  pointer-events: none;
}
#frame { filter: brightness(calc(1 + (var(--luminosita) - 1) * var(--vis) * (1 - var(--fine)))); }   /* solo i fotogrammi, non i led; in apertura (--vis = 0) nessun filtro */
/* Livello delle luci (led, respiro del neon, neon, scritta «44 Bit»), sopra la scena: si somma alla scena (screen) e non ha la sfumatura laterale, così le lettere restano piene. */
#led { position: absolute; left: 0; top: 0; mix-blend-mode: screen; }
.scena #led { -webkit-mask-image: none; mask-image: none; }
.scena canvas {
  display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / calc(0.55 + 0.35 * var(--hm))) calc(24% - 10% * var(--hm)), rgb(0 0 0 / calc(0.88 + 0.12 * var(--hm))) calc(46% - 24% * var(--hm)), #000 calc(56% - 32% * var(--hm)), #000 calc(66% + 26% * var(--h) + 8% * var(--fine)), rgb(0 0 0 / calc(0.65 + 0.35 * var(--h) + 0.15 * var(--fine))) calc(77% + 15% * var(--h) + 4% * var(--fine)), rgb(0 0 0 / calc(0.3 + 0.7 * var(--h) + 0.15 * var(--fine))) calc(85% + 9% * var(--h) + 1% * var(--fine)), transparent calc(90% + 10% * var(--h)));
          mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / calc(0.55 + 0.35 * var(--hm))) calc(24% - 10% * var(--hm)), rgb(0 0 0 / calc(0.88 + 0.12 * var(--hm))) calc(46% - 24% * var(--hm)), #000 calc(56% - 32% * var(--hm)), #000 calc(66% + 26% * var(--h) + 8% * var(--fine)), rgb(0 0 0 / calc(0.65 + 0.35 * var(--h) + 0.15 * var(--fine))) calc(77% + 15% * var(--h) + 4% * var(--fine)), rgb(0 0 0 / calc(0.3 + 0.7 * var(--h) + 0.15 * var(--fine))) calc(85% + 9% * var(--h) + 1% * var(--fine)), transparent calc(90% + 10% * var(--h)));
}

/* La luce che esce dal processore: un nucleo caldo e chiaro, stretto sul chip, che alza tutto lo schermo. */
.alone {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: calc(var(--bagliore) * (1 - 0.6 * var(--fine)));   /* in fondo la scena è nitida: il bagliore si riduce del 60% per non velarla */
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 30% 38% at var(--chip-x, 80%) 50%, rgba(255, 190, 140, 0.34), rgba(255, 160, 100, 0.12) 55%, transparent 100%),
    radial-gradient(ellipse 58% 64% at var(--chip-x, 80%) 50%, rgba(255, 150, 90, 0.10), transparent 100%);
}

/* (v2.0) Nessun riverbero sul fondo: la luce del neon è già nell'immagine di apertura. */
.spill { display: none; }

/* ---------- Testata ---------- */

.testata {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.15rem var(--margine);
}
.testata::before {
  content: ""; position: absolute; inset: 0 0 -2.75rem; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--sfondo) 97%, transparent) 0%, color-mix(in srgb, var(--sfondo) 92%, transparent) 55%, transparent 100%);
}
.marchio { display: flex; align-items: center; gap: 0.55rem; margin-right: auto; }
.marchio img:first-child { height: 2.25rem; width: auto; }
.marchio img:last-child { height: 1.25rem; width: auto; }

.menu { display: flex; gap: 1.75rem; }
.menu a {
  font: 600 0.9rem/1 var(--testi); text-decoration: none; color: var(--testo-2);
  padding: 0.5rem 0; transition: color 0.2s;
}
.menu a:hover { color: var(--crema); text-decoration: underline; text-underline-offset: 0.5em; }

/* ---------- Pulsanti e link ---------- */

.pulsante {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--arancio); color: var(--inchiostro);
  font: 600 0.9rem/1 var(--titoli); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  padding: 1.05rem 1.7rem; border-radius: 999px;
  box-shadow: 0 0.6rem 1.25rem -0.6rem rgba(0, 0, 0, 0.7);
  transition: background 0.2s, transform 0.3s var(--uscita), box-shadow 0.3s;
}
.pulsante:hover { background: #FF7240; transform: translateY(-2px); box-shadow: 0 0.9rem 1.5rem -0.6rem rgba(0, 0, 0, 0.75); }
.pulsante:active { transform: translateY(0); }
.pulsante-piccolo { font-size: 0.78rem; padding: 0.8rem 1.25rem; }

/* Pulsante di chiamata nella testata (2026-10-05): sul computer «Chiamaci 045 630 4562» con gli orari al passaggio del mouse, su telefono e tablet stretto «Chiama ora». */
/* Teleassistenza in testata (2026-10-05, solo computer): pulsante a contorno azzurro con icona, accanto a «Chiamaci». Su telefono e tablet stretto (fino a 860 px) non compare e il telefono resta com'era. */
.tele {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  padding: 0.74rem 1.15rem; border-radius: 999px; text-decoration: none;
  border: 1.5px solid rgba(98, 165, 255, 0.95); color: #D7E8FF; background: rgba(62, 140, 255, 0.10);
  font: 600 0.78rem/1 var(--titoli); letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 0 0.9rem rgba(62, 140, 255, 0.35), inset 0 0 0.6rem rgba(62, 140, 255, 0.12);
  transition: background 0.2s, box-shadow 0.2s, transform 0.3s var(--uscita);
}
.tele:hover { background: rgba(62, 140, 255, 0.22); box-shadow: 0 0 1.4rem rgba(62, 140, 255, 0.55), inset 0 0 0.8rem rgba(62, 140, 255, 0.2); transform: translateY(-2px); }
.tele svg { flex: none; }
.testata { gap: 1.25rem; }
@media (max-width: 860px) { .tele { display: none; } }

.chiama { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap; }
.chiama-icona { flex: none; }
.chiama-breve { display: none; }
/* Testo letto solo dai lettori di schermo (2026-10-13): gli orari del pulsante di chiamata, visibili solo al passaggio del mouse. */
.solo-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.chiama-numero { letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.chiama-orari {
  position: absolute; right: 0; top: calc(100% + 0.7rem); z-index: 30; min-width: 17.5rem; padding: 0.85rem 1rem;
  background: rgba(13, 10, 9, 0.96); border: 1px solid var(--filetto); border-radius: 0.6rem;
  color: var(--crema); font: 400 0.82rem/1.55 var(--testi); letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
  box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(-0.3rem); pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.chiama-stato { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--filetto); font-weight: 600; color: var(--crema); }
.chiama-stato[hidden] { display: none; }
.chiama-stato .punto { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #E0594F; box-shadow: 0 0 0.5rem rgba(224, 89, 79, 0.65); }
.chiama-stato.aperto .punto { background: #4CC07A; box-shadow: 0 0 0.5rem rgba(76, 192, 122, 0.7); }
.chiama-orari strong { display: block; margin-bottom: 0.25rem; font: 600 0.7rem/1 var(--testi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--testo-2); }
@media (hover: hover) {
  .chiama:hover .chiama-orari, .chiama:focus-visible .chiama-orari { opacity: 1; transform: none; }
}
@media (hover: none) { .chiama-orari { display: none; } }

.link {
  color: var(--crema); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(254, 237, 220, 0.4); text-underline-offset: 0.35em;
  transition: text-decoration-color 0.2s;
}
.link:hover { text-decoration-color: var(--arancio); }

/* ---------- Struttura delle sezioni ---------- */

main { position: relative; z-index: 2; }

.colonna {
  width: min(calc(100% - 2 * var(--margine)), var(--colonna));
  margin-left: var(--margine);
}

.sezione { padding-block: clamp(5rem, 16vh, 9rem); }

h1, h2, h3 { font-family: var(--titoli); font-weight: 600; margin: 0; text-wrap: balance; }

h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.025em;
  max-width: 11ch;
}
h2 {
  font-size: clamp(1.9rem, 3.3vw, 2.8rem); line-height: 1.12; letter-spacing: -0.02em;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.titolo-piccolo { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; line-height: 1.3; }

p { margin: 0 0 1.15rem; max-width: 36rem; color: var(--testo-2); text-wrap: pretty; }
p strong { color: var(--crema); font-weight: 600; }

.apertura-testo {
  font: 500 clamp(1.2rem, 1.9vw, 1.5rem)/1.45 var(--titoli);
  color: var(--crema); letter-spacing: -0.01em;
  margin-bottom: 1.75rem;
}

/* ---------- Apertura ---------- */

.apertura {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding-block: 7rem 6rem;
}
.sottotitolo {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5;
  max-width: 24rem; margin: 1.5rem 0 2.25rem;
}
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }

.scorri {
  position: absolute; left: var(--margine); bottom: 2.25rem;
  display: flex; align-items: center; gap: 0.9rem;
  font: 600 0.85rem/1 var(--testi); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--crema); text-decoration: none;
  transition: opacity 0.5s;
}
.scorri i { position: relative; width: 4rem; height: 1px; background: var(--filetto); overflow: hidden; }
.scorri i::after {
  content: ""; position: absolute; inset: 0; background: var(--crema);
  transform: translateX(-100%); animation: scorri 2.5s var(--uscita) 12;
}
@keyframes scorri { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.scorri.nascosto { opacity: 0; pointer-events: none; }

/* ---------- Contatti ---------- */

.contatti { padding-bottom: 0; }

.recapiti .link { display: inline-block; margin-top: 0.4rem; font-size: 0.95rem; }

/* Mappa della sede: dal 2026-10-06 (sera) è la mappa di Google, caricata solo al click (vedi .mappa nel blocco «Restyling»). Prima: immagine statica OSM (backup del 6/10). */
/* Orari di apertura vivi (2026-10-05): riga di stato con puntino, riga di oggi evidenziata (e fascia in corso), numero del sabato cliccabile.
   Il testo dello stato è lo stesso del pulsante di chiamata (statoUfficio in app.js). Senza JavaScript restano l'elenco normale. */
.orari-stato { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; }
.recapiti .orari-stato { margin-bottom: 1.1rem; }   /* .recapiti dd azzera i margini: serve la stessa specificità */
.orari-stato[hidden] { display: none; }
.orari-stato .punto { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #E0594F; box-shadow: 0 0 0.5rem rgba(224, 89, 79, 0.65); }
.orari.aperto .orari-stato .punto { background: #4CC07A; box-shadow: 0 0 0.5rem rgba(76, 192, 122, 0.7); }
.orari-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.orari-elenco li { display: grid; grid-template-columns: 5.6rem 1fr; gap: 0.2rem 1rem; align-items: baseline; transition: opacity 0.3s; }
.orari-elenco .giorno { color: var(--testo-2); font-weight: 600; }
.orari-vivi .orari-elenco li { opacity: 0.55; }
.orari-vivi .orari-elenco li.oggi { opacity: 1; }
.orari-vivi li.oggi .giorno { color: var(--crema); }
.orari-vivi .fascia.in-corso { color: var(--crema); font-weight: 700; text-decoration: underline; text-decoration-color: #4CC07A; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.tel-pillola {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.3rem; padding: 0.15rem 0.75rem; white-space: nowrap;
  border: 1px solid var(--filetto); border-radius: 999px; background: rgba(254, 237, 220, 0.06);
  color: var(--crema); font-weight: 600; text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.recapiti a.tel-pillola { text-decoration: none; }
.tel-pillola:hover { border-color: var(--arancio); background: rgba(255, 88, 29, 0.14); }
@media (max-width: 420px) { .orari-elenco li { grid-template-columns: 1fr; gap: 0; } }

.modulo { display: grid; gap: 1.3rem; }
.modulo h3 { font-size: 1.2rem; line-height: 1.4; margin-bottom: 0.5rem; max-width: 26rem; }
.campo { display: grid; gap: 0.4rem; }
.campo label { font: 600 0.875rem/1 var(--testi); letter-spacing: 0.06em; color: var(--crema); }
.campo input, .campo select, .campo textarea {
  width: 100%; font: 400 1.05rem/1.4 var(--testi); color: var(--crema);
  background: rgba(254, 237, 220, 0.08);
  border: 0; border-bottom: 1px solid rgba(254, 237, 220, 0.62);
  border-radius: 0.5rem 0.5rem 0 0; padding: 0.85rem 0.9rem;
  transition: background 0.2s, border-color 0.2s;
}
.campo select option { background: #1C1816; color: var(--crema); }
.campo textarea { resize: vertical; min-height: 7rem; }
.campo input:hover, .campo select:hover, .campo textarea:hover { background: rgba(254, 237, 220, 0.11); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 0; background: rgba(254, 237, 220, 0.13); border-bottom-color: var(--arancio); box-shadow: 0 1px 0 var(--arancio); }
.campo .errore { border-bottom-color: #FF8A6B; }

.consenso { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.95rem; color: var(--testo-2); cursor: pointer; }
.consenso input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--arancio); flex: none; }
.consenso a { color: var(--crema); }
.modulo .pulsante { justify-self: start; margin-top: 0.5rem; }
.esito { min-height: 1.5rem; margin: 0; color: var(--crema); font-weight: 600; }


.piede {
  margin: clamp(4rem, 12vh, 7rem) 0 0 var(--margine); width: min(calc(100% - 2 * var(--margine)), var(--colonna)); padding: 1.75rem 0 2.25rem;
  border-top: 1px solid var(--filetto);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  font-size: 0.9rem;
}
.piede p { margin: 0; max-width: none; font-size: 0.9rem; }
.piede a { color: var(--testo-2); }
.piede a:hover { color: var(--crema); }

/* ---------- Rivelazione dei testi: una sola, orchestrata ---------- */

.js [data-rivela] {
  opacity: 0; transform: translateY(1.1rem);
  transition: opacity 0.9s var(--uscita), transform 0.9s var(--uscita);
  transition-delay: var(--ritardo, 0s);
}
.js [data-rivela].visto { opacity: 1; transform: none; }

/* ---------- Telefono: la scena diventa sfondo a pieno schermo ---------- */

@media (min-width: 861px) and (max-width: 1200px) {
  :root { --margine: max(1.25rem, 4vw); }
}

@media (max-width: 860px) {
  .menu { display: none; }
  .chiama-esteso { display: none; }
  .chiama-breve { display: inline; }
  :root { --scena-w: 100vw; --estensione: 1; --chip-x: 80%; }
  .scena { right: 0; }
  .scena::after {
    /* velo di base fisso: non segue la luce, così il testo ha sempre lo stesso contrasto */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(13, 10, 9, calc(0.62 - 0.52 * var(--h))), rgba(13, 10, 9, calc(0.78 - 0.16 * var(--h))));
  }
  .scena canvas { -webkit-mask-image: none; mask-image: none; }
  .apertura { align-items: flex-end; padding-block: 7rem 8rem; }
}

@media (max-width: 420px) {
  .marchio img:last-child { height: 1.1rem; }
  .pulsante-piccolo { padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-rivela] { opacity: 1; transform: none; transition: none; }
  .scorri i::after { animation: none; transform: none; }
  .pulsante, .pulsante:hover { transition: none; transform: none; }
}

/* Scorrimento trascinando con il mouse: mano aperta sullo sfondo, chiusa mentre si trascina; sui testi il cursore resta quello normale. Solo dispositivi con mouse. */
@media (hover: hover) and (pointer: fine) {
  body { cursor: grab; }
  p, h1, h2, h3, li, dt, dd, label { cursor: auto; }
  html.trascina, html.trascina * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
}

/* ---------- Interruttore della luce (2026-10-06, prototipo): solo computer con mouse ----------
   Posizione e dimensione le imposta app.js (nel quadro della scena, accanto alla porta). Sparisce scorrendo. */
.interruttore { display: none; }
@media (min-width: 1201px) and (hover: hover) and (pointer: fine) {
  .js .interruttore {
    display: block; position: fixed; z-index: 5; left: 0; top: 0; width: 0; height: 0;
    padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -50%);
    border-radius: 12%; opacity: 0; pointer-events: none; transition: filter .3s, opacity .25s;
  }
  .js .interruttore.visibile { opacity: 1; pointer-events: auto; }
  .interruttore[hidden] { display: none; }
  .interruttore:hover { filter: brightness(1.25); }
  .interruttore:focus-visible { outline: 2px solid var(--arancio, #ff8c37); outline-offset: 4px; }
  .interruttore .sw-tasto { transform-box: fill-box; transform-origin: center; transform: perspective(140px) rotateX(-16deg); transition: transform .18s cubic-bezier(.3,1.5,.5,1); }
  .interruttore[aria-checked="true"] .sw-tasto { transform: perspective(140px) rotateX(16deg); }
  .interruttore .sw-tacca { fill: rgba(255,255,255,.16); transition: fill .2s; }
  .interruttore[aria-checked="true"] .sw-tacca { fill: #ffb067; }
  .interruttore .sw-led { fill: #3a2a20; transition: fill .2s; }
  .interruttore[aria-checked="true"] .sw-led { fill: #ff9b4a; filter: drop-shadow(0 0 4px #ff8c37); }
  .interruttore.invito::after {                          /* piccolo invito finché non lo si è usato: un alone caldo che respira */
    content: ""; position: absolute; inset: -14%; border-radius: 22%; pointer-events: none;
    box-shadow: 0 0 18px 3px rgb(255 140 55 / .45); animation: sw-invito 2.6s ease-in-out infinite;
  }
  @keyframes sw-invito { 0%, 100% { opacity: .12; } 50% { opacity: .85; } }
}
@media (prefers-reduced-motion: reduce) { .interruttore.invito::after { animation: none; opacity: .35; } }

/* ---------- Pagine di testo (Privacy Policy e Cookie Policy, 2026-10-06) ----------
   Stesse variabili del sito; nessuna scena né script. Testata fissa con il marchio e «Torna al sito». */
.pagina-documento { background: var(--sfondo); }
.pagina-documento .testata { justify-content: space-between; }
.pagina-documento .torna { font-size: 0.95rem; text-decoration: none; }
.pagina-documento .torna:hover { text-decoration: underline; }
.documento { width: min(calc(100% - 2 * var(--margine)), 46rem); margin: 0 auto; padding: 8rem 0 2rem; }
.documento h1 { max-width: none; font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.documento h2 { font-size: 1.35rem; margin: 2.75rem 0 0.9rem; letter-spacing: -0.01em; }
.documento h3 { font-size: 1.05rem; margin: 1.5rem 0 0.4rem; color: var(--crema); }
.documento p, .documento li { max-width: none; color: var(--testo-2); line-height: 1.7; }
.documento p { margin: 0 0 1rem; }
.documento ul { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.documento li { margin-bottom: 0.45rem; }
.documento strong { color: var(--crema); font-weight: 600; }
.documento a { color: var(--crema); text-decoration-color: rgba(254, 237, 220, 0.45); }
.documento a:hover { text-decoration-color: var(--arancio); }
.documento .agg { margin: 0.9rem 0 1.8rem; font-size: 0.9rem; color: rgba(254, 237, 220, 0.6); }
.documento .intro { font-size: 1.12rem; color: var(--crema); }
.tabella { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.25rem; font-size: 0.97rem; }
.tabella th, .tabella td { text-align: left; vertical-align: top; padding: 0.8rem 0.9rem 0.8rem 0; border-top: 1px solid var(--filetto); color: var(--testo-2); }
.tabella th { color: var(--crema); font: 600 0.8rem/1.2 var(--testi); letter-spacing: 0.08em; text-transform: uppercase; }
.tabella tr:last-child td { border-bottom: 1px solid var(--filetto); }
.piede-documento { margin: 3rem auto 0; width: min(calc(100% - 2 * var(--margine)), 46rem); }
@media (max-width: 640px) { .tabella th, .tabella td { display: block; padding-right: 0; } .tabella thead { display: none; } .tabella td:first-child { border-bottom: 0; padding-bottom: 0.2rem; color: var(--crema); } .tabella td:last-child { border-top: 0; padding-top: 0; } }

/* Campo trappola del modulo (2026-10-06): invisibile alle persone, i robot lo compilano. Non usare display:none (alcuni robot lo riconoscono). */
.trappola { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pulsante:disabled { opacity: 0.6; cursor: progress; transform: none; }

/* =====================================================================================================================
   Restyling (2026-10-06 sera): schede con icone, animazioni d'ingresso e al passaggio del mouse, mappa Google al click.
   La scena a destra (canvas, maschera, luce) non è toccata. Per tornare indietro: backups/44bit.eu-prima-restyling-20261006-1718.tar.gz
   ===================================================================================================================== */

:root {
  --carta: rgba(254, 237, 220, 0.045);
  --carta-hover: rgba(254, 237, 220, 0.075);
  --bordo: rgba(254, 237, 220, 0.12);
  --molla: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.icone { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Barra di avanzamento della lettura, in cima ---------- */
.avanzamento {
  position: fixed; left: 0; top: 0; z-index: 40; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--arancio), #FFB067);
  transform-origin: 0 50%; transform: scaleX(var(--letto, 0));
  box-shadow: 0 0 10px rgba(255, 88, 29, 0.7);
  pointer-events: none;
}

/* ---------- Testata: diventa una barra di vetro quando si scorre ---------- */
.testata { transition: padding 0.4s var(--uscita); }
.testata::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(13, 10, 9, 0.72); border-bottom: 1px solid var(--bordo);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  opacity: 0; transition: opacity 0.4s;
}
.testata.compatta { padding-block: 0.7rem; }
.testata.compatta::after { opacity: 1; }
.testata.compatta::before { opacity: 0; }
.testata::before { transition: opacity 0.4s; }
.marchio img:first-child { transition: transform 0.6s var(--molla); }
.marchio:hover img:first-child { transform: rotate(-12deg) scale(1.08); }

.menu a { position: relative; }
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 2px; border-radius: 2px;
  background: var(--arancio); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--uscita);
}
.menu a:hover { text-decoration: none; }
.menu a:hover::after, .menu a.attivo::after { transform: scaleX(1); transform-origin: left; }
.menu a.attivo { color: var(--crema); }

/* ---------- Pulsanti: riflesso che attraversa, freccia che avanza ---------- */
/* Il riflesso è uno sfondo che scorre, non un livello sopra: così il pulsante non deve tagliare ciò che sporge
   (il riquadro degli orari di «Chiamaci» sta dentro il pulsante e con overflow: hidden spariva). */
.pulsante {
  background-color: var(--arancio);
  background-image: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.45) 50%, transparent 58%);
  background-size: 250% 100%; background-repeat: no-repeat; background-position: 130% 0;
  transition: background-color 0.2s, background-position 0.8s var(--uscita), transform 0.3s var(--uscita), box-shadow 0.3s;
}
.pulsante:hover {
  background-color: #FF7240;
  background-image: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.45) 50%, transparent 58%);
  background-size: 250% 100%; background-repeat: no-repeat; background-position: -30% 0;
  box-shadow: 0 0.9rem 1.8rem -0.6rem rgba(255, 88, 29, 0.55);
}
.pulsante-freccia { display: inline-flex; align-items: center; gap: 0.7rem; }
.freccia { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--molla); }
.pulsante-freccia:hover .freccia, .link-freccia:hover .freccia { transform: translateX(0.3rem); }
.link-freccia { display: inline-flex; align-items: center; gap: 0.45rem; }
.chiama .chiama-icona { transition: transform 0.4s; }
.chiama:hover .chiama-icona { animation: squillo 0.9s ease-in-out; }
@keyframes squillo { 0%, 100% { transform: rotate(0); } 15%, 45%, 75% { transform: rotate(-14deg); } 30%, 60%, 90% { transform: rotate(14deg); } }

/* ---------- Occhielli delle sezioni: numero + filetto che si disegna ---------- */
.occhiello {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.1rem;
  font: 600 0.78rem/1 var(--testi); letter-spacing: 0.16em; text-transform: uppercase; color: var(--arancio);
}
.occhiello .numero { color: var(--testo-2); font-variant-numeric: tabular-nums; }
.occhiello .numero::after {
  content: ""; display: inline-block; vertical-align: middle; width: 2.5rem; height: 1px; margin-left: 0.75rem;
  background: var(--arancio); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--uscita) 0.25s;
}
.occhiello.visto .numero::after, html:not(.js) .occhiello .numero::after { transform: scaleX(1); }
.occhiello-apertura {
  display: inline-flex; padding: 0.5rem 0.95rem; border: 1px solid rgba(255, 88, 29, 0.4); border-radius: 999px;
  background: rgba(255, 88, 29, 0.08); color: #FFB59A; letter-spacing: 0.12em; margin-bottom: 1.6rem;
}
.impulso { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--arancio); flex: none; }
.impulso::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--arancio); animation: impulso 2s ease-out infinite; }
@keyframes impulso { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3.2); opacity: 0; } }

/* ---------- Titoli parola per parola ---------- */
.parola { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.parola > span { display: inline-block; }
.js [data-parole] { opacity: 1 !important; transform: none !important; }
.js [data-parole] .parola > span { transform: translateY(105%) rotate(4deg); transform-origin: left bottom; transition: transform 1s var(--uscita); transition-delay: calc(var(--ritardo, 0s) + var(--p, 0) * 0.07s); }
.js [data-parole].visto .parola > span { transform: none; }

/* ---------- Numeri dell'apertura ---------- */
.numeri { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 3rem 0 0; }
.numeri div { position: relative; padding-left: 1rem; }
.numeri div::before { content: ""; position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem; width: 2px; border-radius: 2px; background: linear-gradient(var(--arancio), transparent); }
.numeri dt { font: 700 clamp(1.8rem, 2.6vw, 2.3rem)/1 var(--titoli); color: var(--crema); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.numeri dd { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--testo-2); }

/* ---------- Pillole (Chi siamo) ---------- */
.pillole { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 2rem; padding: 0; }
.pillole li {
  padding: 0.45rem 0.95rem; border: 1px solid var(--bordo); border-radius: 999px; background: var(--carta);
  font: 600 0.82rem/1.2 var(--testi); color: var(--crema); cursor: default;
  transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.4s var(--molla);
}
.pillole li:hover { border-color: var(--arancio); background: rgba(255, 88, 29, 0.12); transform: translateY(-3px); }
.js .pillole li[data-rivela] { transform: translateY(0.6rem) scale(0.9); }
.js .pillole li[data-rivela].visto { transform: none; }
.js .pillole li[data-rivela].visto:hover { transform: translateY(-3px); }

/* ---------- Schede (servizi, punti di forza, recapiti, modulo): luce che segue il mouse e bordo che si accende ---------- */
.carta {
  position: relative; isolation: isolate;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 1rem;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.5s var(--uscita), transform 0.5s var(--uscita), opacity 0.9s var(--uscita);
}
.carta::before {                                   /* luce morbida sotto il puntatore */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 88, 29, 0.13), transparent 45%);
  opacity: 0; transition: opacity 0.4s;
}
.carta::after {                                    /* bordo arancio solo vicino al puntatore */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(14rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 120, 60, 0.95), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 0.4s;
}
.carta:hover::before, .carta:hover::after, .carta:focus-within::after { opacity: 1; }
.carta:hover { background: var(--carta-hover); box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.8); }

.carta-icona {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.8rem; flex: none;
  background: linear-gradient(145deg, rgba(255, 88, 29, 0.22), rgba(255, 88, 29, 0.06));
  border: 1px solid rgba(255, 88, 29, 0.35); color: #FF8A5C;
  transition: transform 0.6s var(--molla), background 0.4s, color 0.4s, box-shadow 0.4s;
}
.carta-icona svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; }
.carta:hover .carta-icona { transform: translateY(-3px) rotate(-6deg) scale(1.08); background: var(--arancio); color: var(--inchiostro); box-shadow: 0 0.6rem 1.4rem -0.4rem rgba(255, 88, 29, 0.7); }
.carta:hover .carta-icona svg { animation: tratto 0.9s var(--uscita); }
@keyframes tratto { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.js .carta[data-rivela] .carta-icona svg { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--uscita) calc(var(--ritardo, 0s) + 0.25s); }
.js .carta[data-rivela].visto .carta-icona svg { stroke-dashoffset: 0; }

/* Servizi: griglia di schede */
.carte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.carte .carta { padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 0.9rem; }
.carte h3 { font-size: 1.12rem; color: var(--crema); transition: color 0.3s; }
.carte .carta:hover h3 { color: #FFB59A; }
.carte p { margin: 0; font-size: 0.97rem; line-height: 1.65; }
.js .carta[data-rivela] { transform: translateY(2rem) scale(0.97); }
.js .carta[data-rivela].visto { transform: none; }
.js .carta[data-rivela].visto:hover { transform: translateY(-6px); }
/* Le schede che entrano con l'animazione tengono anche le transizioni del passaggio del mouse (la regola generale di [data-rivela] le toglierebbe). */
.js .carta[data-rivela], .js .marchi li[data-rivela], .js .pillole li[data-rivela] {
  transition: opacity 0.9s var(--uscita) var(--ritardo, 0s), transform 0.9s var(--uscita) var(--ritardo, 0s),
              background 0.4s, border-color 0.4s, box-shadow 0.5s var(--uscita), color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .js .carte .carta[data-rivela].visto.inclina, .js .punti .carta[data-rivela].visto.inclina { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); transition: transform 0.15s linear, background 0.4s, border-color 0.4s, box-shadow 0.5s; }
}

/* Perché noi: tre schede orizzontali */
.punti { margin: 2.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.punti .carta { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.2rem 1.2rem; padding: 1.3rem 1.4rem; }
.punti .carta-icona { grid-row: span 2; }
.punti h3 { font: 600 1.08rem/1.3 var(--titoli); color: var(--crema); text-wrap: wrap; }
.punti p { margin: 0; max-width: none; color: var(--testo-2); text-wrap: wrap; }   /* era un <dl> (2026-10-13): annulla le regole generiche di h3 e p per restare identico */

/* Partner: loghi che si accendono */
.partner { padding-block: clamp(3rem, 9vh, 6rem); }
.marchi {
  list-style: none; margin: 0.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem;
}
.marchi li {
  height: 5rem; padding: 0.9rem 1.1rem; display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 0.9rem;
  transition: border-color 0.4s, background 0.4s, transform 0.5s var(--molla), opacity 0.9s var(--uscita);
}
.marchi img { width: auto; height: auto; max-width: 100%; max-height: 3.2rem; object-fit: contain; opacity: 0.72; filter: grayscale(1) brightness(1.15); transition: opacity 0.4s, filter 0.4s, transform 0.5s var(--molla); }
.marchi li:hover { border-color: var(--bordo); background: var(--carta-hover); }
.marchi li:hover img { opacity: 1; filter: none; transform: scale(1.08); }
.js .marchi li[data-rivela] { transform: scale(0.85); }
.js .marchi li[data-rivela].visto { transform: none; }

/* ---------- Contatti ---------- */
.recapiti { margin: 2.5rem 0 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.recapiti .carta { padding: 1.2rem 1.3rem 1.3rem; }
.recapiti .sede, .recapiti .orari { grid-column: 1 / -1; }
.recapiti dt { display: flex; align-items: center; gap: 0.55rem; font: 600 0.78rem/1 var(--testi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--testo-2); margin-bottom: 0.75rem; }
.dt-icona { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--arancio); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s var(--molla); }
.recapiti .carta:hover .dt-icona { transform: scale(1.25) rotate(-8deg); }
.recapiti dd { margin: 0; color: var(--crema); line-height: 1.6; }
.recapiti dd > a:not(.tel-pillola) { font: 600 1.15rem/1.4 var(--titoli); text-decoration: none; background: linear-gradient(var(--arancio), var(--arancio)) 0 100% / 0 2px no-repeat; transition: background-size 0.4s var(--uscita); }
.recapiti dd > a:not(.tel-pillola):hover { background-size: 100% 2px; }

/* Mappa Google: anteprima scura, al click si carica l'iframe. */
.recapiti .mappa { position: relative; height: 15rem; margin-top: 1rem; border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--bordo); background: #2a2320; }
.mappa-img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.4) brightness(0.6) blur(1.5px); transform: scale(1.04);
  transition: transform 6s linear, filter 0.5s;
}
.mappa:hover .mappa-img { transform: scale(1.12); filter: invert(0.92) hue-rotate(180deg) saturate(0.5) brightness(0.7) blur(0.5px); }
.mappa-carica {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1.3rem 0.85rem 1rem; cursor: pointer;
  border: 1px solid rgba(255, 88, 29, 0.6); border-radius: 999px; background: rgba(13, 10, 9, 0.82); color: var(--crema);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-align: left; white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(255, 88, 29, 0.5); animation: chiamata 2.4s ease-out infinite;
  transition: background 0.3s, transform 0.4s var(--molla);
}
.mappa-carica:hover { background: rgba(255, 88, 29, 0.9); color: var(--inchiostro); transform: translate(-50%, -50%) scale(1.05); }
.mappa-carica svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: rimbalzo 2.4s var(--molla) infinite; }
.mappa-carica strong { display: block; font: 600 0.95rem/1.2 var(--titoli); }
.mappa-carica small { display: block; font-size: 0.75rem; opacity: 0.75; }
@keyframes chiamata { 0% { box-shadow: 0 0 0 0 rgba(255, 88, 29, 0.45); } 70%, 100% { box-shadow: 0 0 0 1.1rem rgba(255, 88, 29, 0); } }
@keyframes rimbalzo { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
.mappa-apri {
  position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.75rem; border-radius: 999px;
  background: rgba(13, 10, 9, 0.85); color: var(--crema); font: 600 0.75rem/1 var(--testi); text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.mappa-apri svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--molla); }
.mappa-apri:hover { background: var(--arancio); color: var(--inchiostro); }
.mappa-apri:hover svg { transform: translateX(3px); }
.mappa-credito { position: absolute; left: 0.7rem; bottom: 0.55rem; z-index: 3; font-size: 0.68rem; color: rgba(254, 237, 220, 0.55); }
.mappa-credito a { color: inherit; }
.mappa.caricata .mappa-credito { display: none; }
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.8s; }
.mappa.caricata iframe { opacity: 1; }
.mappa.caricata .mappa-carica, .mappa.caricata .mappa-img, .mappa.caricata .mappa-apri { display: none; }   /* Google ha già il suo «Apri in Maps» */

/* Modulo */
.modulo.carta { padding: clamp(1.4rem, 3vw, 2rem); margin-top: 1rem; }
.modulo.carta:hover { transform: none; }
.campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.3rem 1rem; }
.campo { position: relative; }
.campo input, .campo select, .campo textarea { border-bottom-color: rgba(254, 237, 220, 0.35); background-image: linear-gradient(var(--arancio), var(--arancio)); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-color 0.2s, background-size 0.5s var(--uscita), border-color 0.2s; }
.campo input:focus, .campo select:focus, .campo textarea:focus { background-size: 100% 2px; box-shadow: none; }
.campo label { transition: color 0.3s, transform 0.3s var(--uscita); transform-origin: left; }
.campo:focus-within label { color: var(--arancio); transform: translateX(0.2rem); }
.campo .errore { animation: scossa 0.45s; }
@keyframes scossa { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.modulo button.invio .freccia { animation: vola 0.9s ease-in-out infinite; }
@keyframes vola { 50% { transform: translate(3px, -3px); } }
.esito.ok { color: #7EE0A4; }
.esito.ok::before { content: "✓"; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-right: 0.5rem; border-radius: 50%; background: #4CC07A; color: var(--inchiostro); font-size: 0.85rem; animation: comparsa 0.5s var(--molla); }
@keyframes comparsa { from { transform: scale(0); } to { transform: none; } }

/* Teleassistenza in fondo: una scheda-collegamento */
.carta.teleassistenza {
  display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1.1rem 1.3rem; text-decoration: none; color: var(--crema);
}
.teleassistenza-testo { display: grid; gap: 0.15rem; flex: 1; }
.teleassistenza-testo strong { font: 600 1.05rem/1.3 var(--titoli); }
.teleassistenza-testo span { color: var(--testo-2); font-size: 0.92rem; }
.carta.teleassistenza .freccia { width: 1.3rem; height: 1.3rem; color: var(--arancio); }
.carta.teleassistenza:hover .freccia { transform: translateX(0.35rem); }

/* ---------- Telefono e tablet stretto: la scena fa da sfondo, le schede devono restare leggibili ---------- */
@media (max-width: 860px) {
  .carta { background: rgba(13, 10, 9, 0.68); }
  .carta:hover { background: rgba(20, 15, 13, 0.8); }
  .marchi { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.75rem; border-radius: 1rem; background: rgba(13, 10, 9, 0.72); }
  .recapiti { grid-template-columns: 1fr; }
  .numeri { gap: 1rem 1.6rem; margin-top: 2.25rem; }
  .pillole li { background: rgba(13, 10, 9, 0.6); }
}

/* ---------- Torna in cima (2026-10-06): pulsante tondo in basso a destra, con l'anello di lettura ---------- */
.su {
  position: fixed; right: max(1rem, calc(var(--margine) * 0.5)); bottom: 1.5rem; z-index: 30;
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: rgba(13, 10, 9, 0.78); color: var(--crema); text-decoration: none;
  border: 1px solid var(--bordo); box-shadow: 0 0.8rem 1.8rem -0.6rem rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(1rem) scale(0.8);
  transition: opacity 0.4s var(--uscita), transform 0.5s var(--molla), visibility 0s linear 0.4s, background 0.3s, color 0.3s, box-shadow 0.3s;
}
.su.visibile { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.su:hover { background: var(--arancio); color: var(--inchiostro); box-shadow: 0 0.9rem 1.8rem -0.5rem rgba(255, 88, 29, 0.6); transform: translateY(-3px); }
.su-anello { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); fill: none; stroke-width: 2; }
.su-anello circle { stroke: rgba(254, 237, 220, 0.1); }
.su-anello .su-letto { stroke: var(--arancio); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke 0.3s; }   /* il riempimento lo scrive app.js: Firefox non accetta calc() senza unità qui */
.su:hover .su-letto { stroke: var(--inchiostro); }
.su-freccia { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.su:hover .su-freccia { animation: su-salta 0.8s var(--molla) infinite; }
@keyframes su-salta { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 860px) { .su { right: 1rem; bottom: 1rem; width: 3rem; height: 3rem; } }
@media (prefers-reduced-motion: reduce) { .su, .su.visibile { transition: opacity 0.2s, visibility 0s; transform: none; } .su:hover .su-freccia { animation: none; } }

/* ---------- Pagina della teleassistenza (tools/teleassistenza.php, 2026-10-06): stessa grafica della home, senza scena ---------- */
.pagina-tele {
  background:
    radial-gradient(ellipse 60% 45% at 85% 0%, rgba(255, 88, 29, 0.14), transparent 70%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(62, 140, 255, 0.07), transparent 70%),
    var(--sfondo);
  background-attachment: fixed;
}
.pagina-tele .testata { gap: 1.5rem; }
.torna-sito { font-size: 0.92rem; text-decoration: none; }
.torna-sito .freccia { transition: transform 0.4s var(--molla); }
.torna-sito:hover .freccia { transform: translateX(-0.3rem); }
.tele-pagina { width: min(calc(100% - 2 * var(--margine)), 60rem); margin: 0 auto; padding-top: clamp(7rem, 16vh, 9.5rem); position: relative; z-index: 2; }
.tele-apertura h1 { max-width: none; font-size: clamp(2.4rem, 5vw, 3.9rem); }
.tele-apertura .sottotitolo { max-width: 40rem; }
.tele-sezione { padding-top: clamp(3.5rem, 9vh, 5.5rem); }
.tele-intro { margin-bottom: 1.5rem; }

.passi { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; counter-reset: passo; }
.passi .carta { padding: 1.4rem 1.4rem 1.5rem; display: grid; gap: 0.7rem; }
.passi h3 { font-size: 1.1rem; color: var(--crema); }
.passi p { margin: 0; font-size: 0.95rem; }
.passi a { color: var(--crema); font-weight: 600; text-decoration-color: rgba(254, 237, 220, 0.4); }
.passi a:hover { text-decoration-color: var(--arancio); }
.passo-n { position: absolute; top: 0.9rem; right: 1.2rem; font: 700 2.6rem/1 var(--titoli); color: rgba(254, 237, 220, 0.07); transition: color 0.4s; pointer-events: none; }
.passi .carta:hover .passo-n { color: rgba(255, 88, 29, 0.35); }

.tele-sistema { display: flex; align-items: center; gap: 0.6rem; max-width: none; margin-bottom: 1.25rem; color: var(--testo-2); }
.tele-sistema strong { color: var(--crema); }
.tele-sistema a { color: var(--crema); }
.tele-sistema .punto { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #E8A33D; box-shadow: 0 0 0.5rem rgba(232, 163, 61, 0.6); }
.tele-sistema .punto.aperto { background: #4CC07A; box-shadow: 0 0 0.5rem rgba(76, 192, 122, 0.7); }

.scaricamenti { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.carta.scarica { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 1.3rem; padding: 1.3rem 1.4rem; text-decoration: none; color: inherit; }
.scarica-testo { display: grid; gap: 0.15rem; min-width: 0; }
.scarica-testo h3, .scarica-titolo { font: 600 1.15rem/1.3 var(--titoli); color: var(--crema); }
.scarica-testo p, .scarica-testo > span { margin: 0; font-size: 0.93rem; color: var(--testo-2); max-width: none; }
.scarica-testo .scarica-file { font-size: 0.8rem; color: rgba(254, 237, 220, 0.5); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.carta.scarica .pulsante { white-space: nowrap; }
.carta.consigliato { border-color: rgba(255, 88, 29, 0.55); background: linear-gradient(135deg, rgba(255, 88, 29, 0.1), rgba(254, 237, 220, 0.03) 60%); padding-top: 2.1rem; }
.carta.consigliato .carta-icona { background: var(--arancio); color: var(--inchiostro); }
.distintivo {
  position: absolute; top: -0.75rem; left: 1.3rem; padding: 0.3rem 0.8rem; border-radius: 999px;
  background: var(--arancio); color: var(--inchiostro); font: 600 0.72rem/1.2 var(--testi); letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 0.4rem 1rem -0.3rem rgba(255, 88, 29, 0.7);
}
.pulsante-contorno { background-color: transparent; background-image: none; color: var(--crema); box-shadow: inset 0 0 0 1.5px rgba(254, 237, 220, 0.5); }
.scarica-esterna:hover .pulsante-contorno { background-color: var(--arancio); color: var(--inchiostro); box-shadow: inset 0 0 0 1.5px var(--arancio); }
.scarica-esterna:hover .freccia { transform: translate(0.15rem, -0.15rem); }
.tele-errore { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.4rem; border-color: rgba(232, 163, 61, 0.5); }
.tele-errore h3 { font-size: 1.1rem; color: var(--crema); margin-bottom: 0.4rem; }
.tele-errore p { margin: 0; }
.tele-errore a { color: var(--crema); }
.pagina-tele .piede { width: auto; margin: clamp(4rem, 12vh, 6rem) 0 0; }

@media (max-width: 860px) {
  .torna-sito { margin-left: auto; }
  .pagina-tele .carta { background: rgba(254, 237, 220, 0.045); }
}
@media (max-width: 640px) {
  .carta.scarica { grid-template-columns: auto 1fr; }
  .carta.scarica .pulsante { grid-column: 1 / -1; justify-content: center; }
  .torna-sito { font-size: 0; gap: 0; }
  .torna-sito .freccia { width: 1.3rem; height: 1.3rem; }
}

/* ---------- Integrazione AI in evidenza (2026-10-07) ---------- */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Servizi: tre colonne su desktop, così la prima riga è Assistenza, Odoo, AI */
@media (min-width: 1100px) {
  .servizi .colonna { width: min(calc(100% - 2 * var(--margine)), max(var(--colonna), 50rem)); }
  .carte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carte .carta { padding: 1.3rem 1.15rem 1.4rem; }
  .carte h3 { font-size: 1.05rem; }
  .carte p { font-size: 0.92rem; line-height: 1.6; }
  /* la terza colonna passa sopra la scena: schede quasi opache, così il testo resta leggibile */
  .carte .carta:not(.carta-ai) { background: rgba(17, 13, 11, 0.88); }
  .carte .carta:not(.carta-ai):hover { background: rgba(27, 20, 17, 0.92); }
}

/* La scheda AI: bordo a gradiente che gira lento, alone arancio, etichetta «Novità» */
.carta.carta-ai {
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--sfondo) 88%, #FF581D 12%), color-mix(in srgb, var(--sfondo) 94%, #3E8CFF 6%)) padding-box,
    conic-gradient(from var(--giro), rgba(255, 88, 29, 0.95), rgba(255, 176, 103, 0.6), rgba(98, 165, 255, 0.85), rgba(255, 88, 29, 0.25), rgba(255, 88, 29, 0.95)) border-box;
  animation: giro 6s linear infinite;
  box-shadow: 0 0 2.2rem -0.8rem rgba(255, 88, 29, 0.55);
}
.carta.carta-ai:hover { box-shadow: 0 1.5rem 3rem -1.2rem rgba(255, 88, 29, 0.6), 0 0 2.6rem -0.6rem rgba(98, 165, 255, 0.35); }
@keyframes giro { to { --giro: 360deg; } }
.carta-ai .carta-icona { background: linear-gradient(145deg, #FF581D, #FF9A5C); border-color: transparent; color: var(--inchiostro); box-shadow: 0 0.5rem 1.3rem -0.4rem rgba(255, 88, 29, 0.8); }
.carta-ai .carta-icona svg { animation: scintilla 3.2s ease-in-out infinite; transform-origin: center; }
@keyframes scintilla { 0%, 70%, 100% { transform: scale(1) rotate(0); } 80% { transform: scale(1.18) rotate(12deg); } 90% { transform: scale(0.95) rotate(-6deg); } }
.carta-ai h3 { color: #FFB59A; }
.carta-novita {
  position: absolute; top: 1rem; right: 1rem; padding: 0.22rem 0.6rem; border-radius: 999px;
  background: rgba(98, 165, 255, 0.16); border: 1px solid rgba(98, 165, 255, 0.6); color: #D7E8FF;
  font: 600 0.66rem/1.2 var(--testi); letter-spacing: 0.1em; text-transform: uppercase;
}

/* Apertura: richiamo cliccabile all'AI */
.novita-ai {
  display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 1.8rem; padding: 0.4rem 0.95rem 0.4rem 0.4rem;
  border-radius: 999px; text-decoration: none; color: var(--crema); font-size: 0.92rem;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(20, 14, 12, 0.92), rgba(20, 14, 12, 0.92)) padding-box,
    conic-gradient(from var(--giro), rgba(255, 88, 29, 0.9), rgba(98, 165, 255, 0.8), rgba(255, 88, 29, 0.2), rgba(255, 88, 29, 0.9)) border-box;
  animation: giro 6s linear infinite;
  transition: transform 0.4s var(--molla), box-shadow 0.4s;
}
.novita-ai:hover { transform: translateY(-2px); box-shadow: 0 0.8rem 1.8rem -0.8rem rgba(255, 88, 29, 0.7); }
.novita-ai-etichetta {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; border-radius: 999px;
  background: linear-gradient(135deg, #FF581D, #FF9A5C); color: var(--inchiostro);
  font: 700 0.7rem/1 var(--testi); letter-spacing: 0.08em; text-transform: uppercase;
}
.novita-ai-etichetta svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.novita-ai .freccia { color: var(--arancio); }
.novita-ai:hover .freccia { transform: translateX(0.3rem); }
.numeri { margin-top: 2.25rem; }

/* Chi siamo: la pillola AI accesa */
.pillole li.pillola-ai { border-color: rgba(255, 88, 29, 0.7); background: rgba(255, 88, 29, 0.14); color: #FFD2BF; box-shadow: 0 0 1rem -0.3rem rgba(255, 88, 29, 0.6); }

@media (max-width: 860px) {
  .carta.carta-ai { background:
    linear-gradient(160deg, rgba(30, 18, 13, 0.92), rgba(16, 14, 18, 0.9)) padding-box,
    conic-gradient(from var(--giro), rgba(255, 88, 29, 0.95), rgba(255, 176, 103, 0.6), rgba(98, 165, 255, 0.85), rgba(255, 88, 29, 0.25), rgba(255, 88, 29, 0.95)) border-box; }
  .novita-ai { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .carta.carta-ai, .novita-ai, .carta-ai .carta-icona svg { animation: none; }
}

/* ---------- Verifica «Non sono un robot» del modulo (2026-10-07) ---------- */
.robot {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.25rem 1rem;
  padding: 0.9rem 1.1rem; border: 1px solid var(--bordo); border-radius: 0.75rem; background: rgba(13, 10, 9, 0.35);
  transition: border-color 0.3s, background 0.3s;
}
.robot-casella { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; font: 600 0.98rem/1.2 var(--testi); color: var(--crema); }
.robot-casella input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.robot-segno {
  position: relative; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 0.4rem;
  border: 2px solid rgba(254, 237, 220, 0.55); background: rgba(254, 237, 220, 0.06);
  transition: border-color 0.2s, background 0.2s, transform 0.3s var(--molla);
}
.robot-casella:hover .robot-segno { border-color: var(--arancio); transform: scale(1.06); }
.robot-casella input:focus-visible + .robot-segno { outline: 2px solid var(--crema); outline-offset: 3px; }
.robot-stato { justify-self: end; font-size: 0.85rem; font-weight: 600; color: var(--testo-2); }
.robot-nota { grid-column: 1 / -1; font-size: 0.75rem; color: rgba(254, 237, 220, 0.5); }
.robot-noscript { grid-column: 1 / -1; margin: 0.3rem 0 0; font-size: 0.85rem; }
/* in calcolo: il quadratino diventa una rotella */
.robot[data-stato="calcolo"] .robot-segno { border-color: rgba(254, 237, 220, 0.2); border-top-color: var(--arancio); border-radius: 50%; animation: robot-gira 0.8s linear infinite; }
@keyframes robot-gira { to { transform: rotate(360deg); } }
/* verificato: spunta verde */
.robot[data-stato="ok"] { border-color: rgba(76, 192, 122, 0.55); background: rgba(76, 192, 122, 0.07); }
.robot[data-stato="ok"] .robot-segno { border-color: #4CC07A; background: #4CC07A; animation: comparsa 0.4s var(--molla); }
.robot[data-stato="ok"] .robot-segno::after {
  content: ""; position: absolute; left: 0.42rem; top: 0.12rem; width: 0.42rem; height: 0.8rem;
  border: solid var(--inchiostro); border-width: 0 0.18rem 0.18rem 0; transform: rotate(45deg);
}
.robot[data-stato="ok"] .robot-stato { color: #7EE0A4; }
.robot[data-stato="errore"] { border-color: rgba(255, 138, 107, 0.7); animation: scossa 0.45s; }
.robot[data-stato="errore"] .robot-stato { color: #FF8A6B; }
@media (max-width: 420px) { .robot { grid-template-columns: 1fr; } .robot-stato { justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .robot[data-stato="calcolo"] .robot-segno, .robot[data-stato="errore"], .robot[data-stato="ok"] .robot-segno { animation: none; } }

/* ---------- Meno movimento: tutto fermo e visibile ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-parole] .parola > span, .js .carta[data-rivela], .js .marchi li[data-rivela], .js .pillole li[data-rivela] { transform: none !important; transition: none; }
  .js .carta[data-rivela] .carta-icona svg { stroke-dashoffset: 0; transition: none; }
  .carta:hover .carta-icona svg, .impulso::after, .mappa-carica, .mappa-carica svg, .chiama:hover .chiama-icona { animation: none; }
  .carta, .carta-icona, .marchi img { transition: none; }
  .pulsante { background-image: none; }
}

/* =====================================================================================================================
   Pagine interne (2026-10-13): servizi (/intelligenza-artificiale/, /odoo/) e strumenti (/tools/).
   Usano body.pagina-tele (sfondo, testata, piede) più body.pagina-interna; lo script comune è /pagine.js.
   ===================================================================================================================== */
.pagina-interna .menu { margin-left: auto; }
.pagina-interna .marchio { margin-right: 0; }
.pagina-interna .testata { gap: 1.5rem; }
.pagina-interna .menu a[aria-current="page"] { color: var(--crema); }
.pagina-interna .menu a[aria-current="page"]::after { transform: scaleX(1); }
.interna { width: min(calc(100% - 2 * var(--margine)), 64rem); margin: 0 auto; padding-top: clamp(6.5rem, 5.5rem + 3vw, 9rem); position: relative; z-index: 2; }   /* in vw, non in vh: l'altezza della finestra cambia nei primi istanti e spostava la pagina (CLS) */

/* Briciole di pane */
.briciole ol { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.55rem; font-size: 0.85rem; color: var(--testo-2); }
.briciole li { display: inline-flex; align-items: center; gap: 0.55rem; }
.briciole li + li::before { content: ""; width: 0.38rem; height: 0.38rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.6; }
.briciole a { color: var(--testo-2); text-decoration: none; }
.briciole a:hover { color: var(--crema); text-decoration: underline; }
.briciole [aria-current] { color: var(--crema); }

/* Apertura delle pagine interne */
.interna-apertura h1 { max-width: 18ch; font-size: clamp(2.3rem, 5vw, 3.9rem); }
.interna-apertura .sottotitolo { max-width: 42rem; }
.interna-sezione { padding-top: clamp(3.5rem, 9vh, 5.5rem); }
.interna-sezione > h2 { max-width: 30ch; }
.interna-sezione > p { max-width: 44rem; }
.interna-sezione .carte { margin-top: 0.5rem; }
.interna-sezione .carte .carta { background: var(--carta); }
.interna-sezione .carte .carta:hover { background: var(--carta-hover); }
.carte ul.elenco { margin: 0; padding-left: 1.1rem; color: var(--testo-2); font-size: 0.95rem; line-height: 1.6; }
.carte ul.elenco li { margin-bottom: 0.25rem; }
.carta .etichetta { align-self: flex-start; padding: 0.22rem 0.6rem; border-radius: 999px; border: 1px solid var(--bordo); color: var(--testo-2); font: 600 0.68rem/1.2 var(--testi); letter-spacing: 0.1em; text-transform: uppercase; }

/* Esempi: schede larghe a due colonne (titolo a sinistra, testo a destra) */
.esempi { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.esempi .carta { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.2rem; padding: 1.4rem 1.5rem; align-items: start; }
.esempi .carta-icona { grid-row: span 3; }
.esempi h3 { font-size: 1.12rem; color: var(--crema); }
.esempi p { margin: 0; max-width: none; font-size: 0.97rem; }
.esempi .settore { font: 600 0.72rem/1.2 var(--testi); letter-spacing: 0.12em; text-transform: uppercase; color: #FF8A5C; }

/* Riquadro di testo in evidenza */
.riquadro { padding: clamp(1.4rem, 3vw, 2rem); }
.riquadro h3 { font-size: 1.15rem; color: var(--crema); margin-bottom: 0.6rem; }
.riquadro p:last-child { margin-bottom: 0; }
.riquadro ul { margin: 0; padding-left: 1.2rem; color: var(--testo-2); }
.riquadro li { margin-bottom: 0.45rem; }
.riquadro li strong { color: var(--crema); }

/* Domande frequenti: <details> nativi, con l'animazione dell'icona */
.faq { display: grid; gap: 0.75rem; margin-top: 0.5rem; }
.faq details { padding: 0; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; font: 600 1.02rem/1.4 var(--titoli); color: var(--crema);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 0.6rem; height: 0.6rem; margin-right: 0.3rem;
  border-right: 2px solid var(--arancio); border-bottom: 2px solid var(--arancio); transform: rotate(45deg) translateY(-0.15rem);
  transition: transform 0.4s var(--molla);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-0.1rem); }
.faq details > div { padding: 0 1.3rem 1.2rem; }
.faq details p { margin: 0 0 0.7rem; max-width: none; }
.faq details p:last-child { margin-bottom: 0; }
.faq .carta:hover { transform: none !important; }

/* Invito finale */
.invito-finale {
  margin-top: clamp(3.5rem, 9vh, 5.5rem); padding: clamp(1.6rem, 4vw, 2.6rem);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem 2rem;
  border: 1px solid rgba(255, 88, 29, 0.45);
  background: linear-gradient(135deg, rgba(255, 88, 29, 0.14), rgba(254, 237, 220, 0.03) 65%);
}
.invito-finale h2 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.invito-finale p { margin: 0; }
.invito-finale .azioni { justify-content: flex-end; }
.invito-finale.carta:hover { transform: none; }

/* Collegamenti tra le pagine (in fondo e nella home) */
.altre-pagine { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.altre-pagine .carta { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; text-decoration: none; color: var(--crema); height: 100%; }
.altre-pagine .carta strong { display: block; font: 600 1.05rem/1.3 var(--titoli); }
.altre-pagine .carta span span { display: block; color: var(--testo-2); font-size: 0.9rem; }
.altre-pagine .freccia { margin-left: auto; width: 1.2rem; height: 1.2rem; color: var(--arancio); }
.altre-pagine .carta:hover .freccia { transform: translateX(0.3rem); }
.carta-link { margin-top: auto; font-size: 0.92rem; text-decoration: none; color: var(--crema); }
.carta-link .freccia { color: var(--arancio); }
.carta-link:hover { color: #FFB59A; }

/* Piede delle pagine interne: collegamenti */
.piede-link { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }

@media (max-width: 860px) {
  .invito-finale { grid-template-columns: 1fr; }
  .invito-finale .azioni { justify-content: flex-start; }
  .interna-sezione .carte .carta, .pagina-interna .carta { background: rgba(254, 237, 220, 0.045); }
}
@media (max-width: 560px) {
  .esempi .carta { grid-template-columns: 1fr; }
  .esempi .carta-icona { grid-row: auto; }
}

/* ---------- Strumenti (2026-10-13) ---------- */
.strumento { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1rem; margin-top: 2rem; align-items: start; }
.strumento > .carta { padding: clamp(1.3rem, 3vw, 1.8rem); }
.strumento .carta:hover { transform: none !important; }
.strumento h2 { font-size: 1.2rem; margin-bottom: 1.2rem; letter-spacing: -0.01em; }
.strumento .campo { margin-bottom: 1.15rem; }
.strumento .campo:last-child { margin-bottom: 0; }
.strumento .nota-campo { font-size: 0.82rem; color: rgba(254, 237, 220, 0.55); margin: 0.1rem 0 0; }
.strumento .carta.risultato { position: sticky; top: 6rem; border-color: rgba(255, 88, 29, 0.4); }
@media (max-width: 900px) { .strumento { grid-template-columns: 1fr; } .strumento .carta.risultato { position: static; } }

/* Gruppi di scelte a pulsante (radio nascosti) */
.scelte { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.scelte legend { padding: 0; margin-bottom: 0.55rem; font: 600 0.875rem/1 var(--testi); letter-spacing: 0.06em; color: var(--crema); }
.scelta { position: relative; }
.scelta input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scelta span {
  display: inline-block; padding: 0.55rem 0.95rem; border-radius: 999px; border: 1px solid var(--bordo); background: rgba(254, 237, 220, 0.05);
  font: 600 0.85rem/1.2 var(--testi); color: var(--testo-2); transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.scelta:hover span { border-color: rgba(255, 88, 29, 0.6); color: var(--crema); }
.scelta input:checked + span { background: var(--arancio); border-color: var(--arancio); color: var(--inchiostro); }
.scelta input:focus-visible + span { outline: 2px solid var(--crema); outline-offset: 2px; }
.scelta input:disabled + span { opacity: 0.4; }

/* Livelli RAID: schede selezionabili */
.livelli { display: grid; gap: 0.5rem; }
.livello { position: relative; display: block; padding: 0.8rem 1rem 0.85rem 2.6rem; border: 1px solid var(--bordo); border-radius: 0.75rem; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.livello input { position: absolute; left: 1rem; top: 1.05rem; width: 1rem; height: 1rem; margin: 0; accent-color: var(--arancio); }
.livello strong { display: block; font: 600 0.98rem/1.3 var(--titoli); color: var(--crema); }
.livello small { display: block; margin-top: 0.15rem; font-size: 0.85rem; line-height: 1.45; color: var(--testo-2); }
.livello:hover { border-color: rgba(255, 88, 29, 0.55); }
.livello:has(input:checked) { border-color: var(--arancio); background: rgba(255, 88, 29, 0.1); }
.livello:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

/* Elenco dei risultati */
.valori { margin: 0; display: grid; }
.valori > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--filetto); }
.valori > div:last-child { border-bottom: 0; }
.valori dt { color: var(--testo-2); font-size: 0.93rem; }
.valori dd { margin: 0; font: 600 1.05rem/1.3 var(--titoli); color: var(--crema); text-align: right; font-variant-numeric: tabular-nums; }
.valori dd.grande { font-size: 1.6rem; color: #FFB59A; }
.valori dd small { display: block; font: 400 0.78rem/1.3 var(--testi); color: var(--testo-2); }
.avviso { display: flex; gap: 0.7rem; align-items: flex-start; margin: 1rem 0 0; padding: 0.8rem 1rem; border-radius: 0.7rem; border: 1px solid rgba(232, 163, 61, 0.5); background: rgba(232, 163, 61, 0.08); font-size: 0.9rem; color: var(--crema); max-width: none; }
.avviso[hidden] { display: none; }
.avviso::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #E8A33D; color: var(--inchiostro); font-weight: 700; font-size: 0.8rem; }

/* Dischi del RAID */
.dischi { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.2rem 0 0.8rem; }
.disco { width: 2.6rem; height: 3.3rem; border-radius: 0.45rem; display: grid; place-items: center; font: 600 0.68rem/1 var(--testi); color: var(--inchiostro); transition: transform 0.4s var(--molla), background 0.3s; animation: comparsa 0.4s var(--molla) both; animation-delay: calc(var(--i, 0) * 30ms); }
.disco.dati { background: #FF8A5C; }
.disco.parita { background: #62A5FF; }
.disco.copia { background: #7EE0A4; }
.disco.riserva { background: rgba(254, 237, 220, 0.25); color: var(--crema); }
.disco:hover { transform: translateY(-3px); }
.legenda { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8rem; color: var(--testo-2); }
.legenda span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legenda i { width: 0.75rem; height: 0.75rem; border-radius: 0.2rem; }

/* Uscita del generatore (password, rete) */
.uscita {
  position: relative; display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.1rem; margin-bottom: 1rem;
  border-radius: 0.75rem; background: rgba(13, 10, 9, 0.6); border: 1px solid var(--bordo);
  font: 500 1.15rem/1.45 ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; color: var(--crema);
  word-break: break-all; min-height: 3.6rem;
}
.uscita output { flex: 1; }
.uscita.vuota output { color: rgba(254, 237, 220, 0.45); font-family: var(--testi); font-size: 0.95rem; word-break: normal; }
.copia {
  flex: none; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.75rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bordo); background: rgba(254, 237, 220, 0.06); color: var(--crema); font: 600 0.78rem/1 var(--testi);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.copia:hover { border-color: var(--arancio); background: rgba(255, 88, 29, 0.15); }
.copia.fatto { border-color: #4CC07A; background: rgba(76, 192, 122, 0.15); color: #7EE0A4; }
.copia svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copia:disabled { opacity: 0.4; cursor: default; }
.valori .copia { margin-left: 0.6rem; padding: 0.3rem 0.55rem; vertical-align: middle; }

/* Forza della password */
.forza { margin: 0 0 1.2rem; }
.forza-barra { height: 0.45rem; border-radius: 999px; background: rgba(254, 237, 220, 0.1); overflow: hidden; }
.forza-barra i { display: block; height: 100%; width: var(--forza, 0%); border-radius: inherit; background: var(--colore-forza, #E0594F); transition: width 0.5s var(--uscita), background 0.3s; }
.forza-testo { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.45rem; font-size: 0.85rem; color: var(--testo-2); }
.forza-testo strong { color: var(--crema); }

/* Caselle di spunta e cursori negli strumenti */
.spunte { display: grid; gap: 0.55rem; margin: 0 0 1.15rem; }
.spunta { display: flex; align-items: center; gap: 0.7rem; font-size: 0.95rem; color: var(--testo-2); cursor: pointer; }
.spunta input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--arancio); flex: none; }
.spunta input:disabled + span { opacity: 0.5; }
.cursore { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.4rem 1rem; }
.cursore label { grid-column: 1 / -1; }
.cursore input[type="range"] { width: 100%; accent-color: var(--arancio); }
.cursore output { min-width: 2.5rem; text-align: right; font: 600 1.1rem/1 var(--titoli); color: var(--crema); font-variant-numeric: tabular-nums; }
.schede-strumento { display: flex; gap: 0.3rem; padding: 0.3rem; margin-bottom: 1.3rem; border-radius: 999px; background: rgba(254, 237, 220, 0.06); border: 1px solid var(--bordo); width: fit-content; }
.schede-strumento button { border: 0; cursor: pointer; padding: 0.6rem 1.2rem; border-radius: 999px; background: transparent; color: var(--testo-2); font: 600 0.88rem/1 var(--testi); transition: background 0.2s, color 0.2s; }
.schede-strumento button[aria-selected="true"] { background: var(--arancio); color: var(--inchiostro); }
.schede-strumento button:hover:not([aria-selected="true"]) { color: var(--crema); }
.azioni-strumento { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.3rem; }
.pulsante-secondario { background-color: transparent; background-image: none; color: var(--crema); box-shadow: inset 0 0 0 1.5px rgba(254, 237, 220, 0.45); }
.pulsante-secondario:hover { background-color: rgba(255, 88, 29, 0.15); background-image: none; box-shadow: inset 0 0 0 1.5px var(--arancio); }
.pulsante-pericolo { background-color: transparent; background-image: none; color: #FF8A6B; box-shadow: inset 0 0 0 1.5px rgba(255, 138, 107, 0.6); }
.pulsante-pericolo:hover { background-color: rgba(255, 138, 107, 0.14); background-image: none; box-shadow: inset 0 0 0 1.5px #FF8A6B; }

/* Tabelle di confronto nel testo degli strumenti */
.confronto { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: 0.93rem; }
.confronto th, .confronto td { text-align: left; padding: 0.7rem 0.8rem 0.7rem 0; border-bottom: 1px solid var(--filetto); color: var(--testo-2); vertical-align: top; }
.confronto th { color: var(--crema); font: 600 0.78rem/1.2 var(--testi); letter-spacing: 0.08em; text-transform: uppercase; }
.confronto td:first-child { color: var(--crema); font-weight: 600; white-space: nowrap; }
.tabella-scorre { overflow-x: auto; }
.tabella-scorre .confronto { min-width: 34rem; }

/* Timer della teleassistenza */
.cronometro { font: 600 clamp(3rem, 9vw, 4.6rem)/1 var(--titoli); letter-spacing: -0.02em; color: var(--crema); font-variant-numeric: tabular-nums; text-align: center; margin: 1.2rem 0; }
.cronometro.in-corso { color: #FFB59A; text-shadow: 0 0 1.5rem rgba(255, 88, 29, 0.45); }
.cronometro.in-pausa { color: #E8A33D; }
.storico { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.storico li { padding: 1rem 1.1rem; border: 1px solid var(--bordo); border-radius: 0.75rem; background: rgba(13, 10, 9, 0.35); }
.storico .testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.storico strong { color: var(--crema); font-family: var(--titoli); }
.storico p { margin: 0.3rem 0 0; font-size: 0.9rem; max-width: none; }
.storico ol { margin: 0.5rem 0 0; padding-left: 1.2rem; font-size: 0.85rem; color: var(--testo-2); }
.vuoto { color: rgba(254, 237, 220, 0.5); font-size: 0.92rem; }
.intertempi textarea { margin-top: 0.4rem; }
.intertempi > div { padding: 0.8rem 0; border-bottom: 1px solid var(--filetto); }

@media (prefers-reduced-motion: reduce) {
  .disco { animation: none; }
  .faq summary::after, .forza-barra i { transition: none; }
}

/* Home, apertura (2026-10-13): l'H1 è l'occhiello «Assistenza informatica e AI per aziende a Verona» (parole che la gente cerca);
   «Soluzioni IT Enterprise» resta il titolo grande ma è un <p>, con lo stesso aspetto che aveva come H1. */
h1.occhiello { max-width: none; text-wrap: wrap; }
.titolo-apertura {
  margin: 0; max-width: 11ch; color: var(--testo); text-wrap: balance;
  font: 600 clamp(2.6rem, 5.4vw, 4.6rem)/1.04 var(--titoli); letter-spacing: -0.025em;
}
@media (max-width: 560px) { h1.occhiello-apertura { border-radius: 1rem; line-height: 1.45; align-items: flex-start; } h1.occhiello-apertura .impulso { margin-top: 0.3rem; } }
.riquadro p { max-width: none; }
@media (min-width: 700px) { .carte.carte-due { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .esempi.esempi-due { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .pagina-interna .marchio { margin-right: auto; } }
.valori > div[hidden] { display: none; }
@media (min-width: 700px) { .altre-pagine.altre-due { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Testata adattiva (2026-10-13): con le voci delle pagine nuove il menu non ci stava sotto i 1440 px.
   Le voci non vanno mai a capo; sotto 1280 px etichette brevi, «Chiama ora» e teleassistenza solo icona; sotto 1020 px in home spariscono Chi siamo e Perché noi. */
.menu a { white-space: nowrap; }
.marchio, .tele, .chiama { flex: none; }
.menu-breve { display: none; }
@media (max-width: 1360px) { .menu { gap: 1.15rem; } .testata { gap: 1rem; } }
@media (min-width: 861px) and (max-width: 1279px) {
  .menu-esteso { display: none; }
  .menu-breve { display: inline; }
  .tele span { display: none; }
  .tele { padding: 0.7rem; }
  .chiama-esteso { display: none; }
  .chiama-breve { display: inline; }
}
@media (min-width: 861px) and (max-width: 1020px) { .menu a.menu-secondaria { display: none; } }

/* Menu su telefono (2026-10-13): pulsante a tre righe (creato da app.js e pagine.js) e pannello sotto la testata. */
.apri-menu, .menu .solo-telefono { display: none; }
@media (max-width: 860px) {
  .apri-menu {
    display: inline-grid; place-content: center; gap: 5px; flex: none; width: 2.6rem; height: 2.6rem; padding: 0; cursor: pointer;   /* non più alto di «Chiama ora»: la testata non cresce quando compare */
    border: 1px solid var(--bordo); border-radius: 50%; background: rgba(13, 10, 9, 0.6); color: var(--crema);
  }
  .apri-menu span { display: block; width: 1.15rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.35s var(--uscita), opacity 0.2s; }
  .menu-aperto .apri-menu { border-color: var(--arancio); }
  .menu-aperto .apri-menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-aperto .apri-menu span:nth-child(2) { opacity: 0; }
  .menu-aperto .apri-menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .testata .menu {
    display: flex; flex-direction: column; gap: 0; position: fixed; left: 0; right: 0; top: 4.9rem; margin: 0;
    max-height: calc(100svh - 5rem); overflow-y: auto; padding: 0.4rem var(--margine) 1.2rem;
    background: #0D0A09; border-bottom: 1px solid var(--bordo); box-shadow: 0 1.5rem 2.5rem -1rem rgba(0, 0, 0, 0.8);
    opacity: 0; visibility: hidden; transform: translateY(-0.6rem);
    transition: opacity 0.3s, transform 0.35s var(--uscita), visibility 0s linear 0.35s;
  }
  .menu-aperto .testata .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .testata .menu a { padding: 0.95rem 0; font-size: 1.05rem; color: var(--crema); border-bottom: 1px solid var(--filetto); }
  .testata .menu a:last-child { border-bottom: 0; }
  .testata .menu a::after { display: none; }
  .testata .menu a.attivo, .testata .menu a[aria-current="page"] { color: #FFB59A; }
  .testata .menu .solo-telefono { display: block; color: #D7E8FF; }
  .menu-aperto .testata::after { opacity: 1; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .testata .menu, .apri-menu span { transition: none; } }
@media (max-width: 360px) { .testata { gap: 0.6rem; } .chiama { padding-inline: 0.85rem; } }
.passi h2.passo-titolo { font-size: 1.1rem; line-height: 1.3; letter-spacing: 0; margin: 0; color: var(--crema); }

/* Galleria di schermate (pagina Odoo, 2026-10-13): cornice a finestra, clic per ingrandire (dialog creato da pagine.js) */
.galleria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0.5rem; }
.schermata { margin: 0; padding: 0.7rem 0.7rem 0.9rem; }
.schermata.larga { grid-column: 1 / -1; }
.schermata a { display: block; border-radius: 0.6rem; overflow: hidden; border: 1px solid var(--bordo); background: #fff; cursor: zoom-in; }
.schermata .finestra { display: flex; gap: 0.35rem; padding: 0.45rem 0.6rem; background: #2A2320; }
.schermata .finestra i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: rgba(254, 237, 220, 0.25); }
.schermata .finestra i:first-child { background: #FF5F57; }
.schermata .finestra i:nth-child(2) { background: #FEBC2E; }
.schermata .finestra i:nth-child(3) { background: #28C840; }
.schermata img { width: 100%; height: auto; transition: transform 0.6s var(--uscita); }
.schermata a:hover img { transform: scale(1.02); }
.schermata figcaption { margin-top: 0.75rem; padding: 0 0.2rem; font-size: 0.92rem; color: var(--testo-2); line-height: 1.5; }
.schermata figcaption strong { color: var(--crema); }
.schermata.carta:hover { transform: none !important; }
@media (max-width: 700px) { .galleria { grid-template-columns: 1fr; } }
.lente { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
.lente::backdrop { background: rgba(8, 6, 5, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lente img { display: block; max-width: 96vw; max-height: 86vh; width: auto; height: auto; border-radius: 0.6rem; box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.6); }
.lente p { margin: 0.8rem 0 0; max-width: none; text-align: center; color: var(--crema); font-size: 0.95rem; }
.lente button {
  position: absolute; top: -0.8rem; right: -0.8rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--bordo); background: #1C1816; color: var(--crema); font: 600 1.4rem/1 var(--titoli);
}
.lente button:hover { background: var(--arancio); color: var(--inchiostro); }

/* =====================================================================================================================
   Strumenti nuovi (2026-10-13): fattura elettronica, verifica posta, videosorveglianza, QR Wi-Fi
   ===================================================================================================================== */
.strumento-largo { grid-template-columns: 1fr; }
.errore-box { margin: 1rem 0 0; padding: 0.9rem 1.1rem; border-radius: 0.75rem; border: 1px solid rgba(255, 138, 107, 0.6); background: rgba(255, 138, 107, 0.1); color: var(--crema); max-width: none; }
.errore-box[hidden] { display: none; }
.solo-lettori-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* --- Fattura elettronica: zona di caricamento --- */
.fe-zona {
  display: grid; place-items: center; gap: 0.8rem; text-align: center; padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
  border: 2px dashed rgba(254, 237, 220, 0.3); border-radius: 1rem; background: rgba(254, 237, 220, 0.03);
  transition: border-color 0.2s, background 0.2s;
}
.fe-zona.sopra { border-color: var(--arancio); background: rgba(255, 88, 29, 0.08); }
.fe-zona .carta-icona { width: 3.6rem; height: 3.6rem; }
.fe-zona p { margin: 0; max-width: 34rem; }
.fe-zona strong { color: var(--crema); font-family: var(--titoli); font-size: 1.15rem; }
.fe-zona .azioni { justify-content: center; }
.fe-zona label.pulsante { cursor: pointer; }
.fe-zona:focus-within label.pulsante { outline: 2px solid var(--crema); outline-offset: 3px; }
.fe-barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem; margin: 2rem 0 1rem; }
.fe-barra h2 { margin: 0; font-size: 1.3rem; }
.fe-barra .azioni-strumento { margin: 0; }
.fe-risultato[hidden] { display: none; }

/* --- Fattura elettronica: il documento, un foglio bianco anche a schermo --- */
.fe-vista { background: #fff; color: #1d1a18; border-radius: 0.9rem; padding: clamp(1.1rem, 3.5vw, 2.4rem); font: 400 0.92rem/1.5 var(--testi); box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.8); }
.fe-vista * { color: inherit; }
.fe-vista p, .fe-vista dd, .fe-vista td, .fe-vista li { max-width: none; margin: 0; text-wrap: wrap; }
.fe-vista h2, .fe-vista h3 { margin: 0; letter-spacing: 0; }
.fe-trasmissione { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.4rem; }
.fe-trasmissione span { padding: 0.2rem 0.6rem; border-radius: 999px; background: #f2eeea; font-size: 0.78rem; color: #5c524b; }
.fe-trasmissione .fe-firmata { background: #e3f5ea; color: #1e6b3b; }
.fe-documento + .fe-documento { margin-top: 2.5rem; padding-top: 2rem; border-top: 2px dashed #d9d2cc; }
.fe-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem 2rem; padding-bottom: 1.2rem; border-bottom: 2px solid #1d1a18; }
.fe-tipo { font: 600 0.78rem/1.2 var(--testi); letter-spacing: 0.1em; text-transform: uppercase; color: #c2410c !important; margin-bottom: 0.3rem !important; }
.fe-testa h2 { font: 600 clamp(1.3rem, 2.6vw, 1.75rem)/1.2 var(--titoli); }
.fe-lotto { font-size: 0.8rem; color: #7a6f68 !important; }
.fe-totale { text-align: right; padding: 0.6rem 1rem; border-radius: 0.6rem; background: #fff1e8; }
.fe-totale span { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9a3412; }
.fe-totale strong { font: 700 1.45rem/1.2 var(--titoli); font-variant-numeric: tabular-nums; }
.fe-parti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding: 1.3rem 0; border-bottom: 1px solid #e6e0db; }
.fe-soggetto h3, .fe-blocco h3 { font: 600 0.72rem/1.2 var(--testi); letter-spacing: 0.12em; text-transform: uppercase; color: #7a6f68 !important; margin-bottom: 0.5rem; }
.fe-nome { font: 600 1.05rem/1.35 var(--titoli); margin-bottom: 0.2rem !important; }
.fe-ind { color: #4a423d !important; }
.fe-vista dl { margin: 0.6rem 0 0; display: grid; gap: 0.15rem; }
.fe-riga { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: 0.8rem; }
.fe-riga dt { color: #7a6f68; }
.fe-blocco { padding: 1.2rem 0; border-bottom: 1px solid #e6e0db; }
.fe-blocco:last-child { border-bottom: 0; }
.fe-scorre { overflow-x: auto; }
.fe-tabella { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.fe-tabella th { text-align: left; font: 600 0.72rem/1.2 var(--testi); letter-spacing: 0.06em; text-transform: uppercase; color: #7a6f68; padding: 0.5rem 0.6rem 0.5rem 0; border-bottom: 1px solid #1d1a18; white-space: nowrap; }
.fe-tabella td { padding: 0.55rem 0.6rem 0.55rem 0; border-bottom: 1px solid #eee8e3; vertical-align: top; }
.fe-tabella .fe-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fe-tabella .fe-n { color: #9a8f88; width: 2rem; }
.fe-tabella .fe-descr { min-width: 14rem; }
.fe-tabella small, .fe-allegati small { display: block; color: #7a6f68; font-size: 0.78rem; }
.fe-iban { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.02em; }
.fe-cond { font-weight: 600; margin-bottom: 0.4rem !important; }
.fe-somme dl { max-width: 24rem; margin-left: auto; }
.fe-somme .fe-riga { grid-template-columns: 1fr auto; }
.fe-somme dd { text-align: right; font-variant-numeric: tabular-nums; }
.fe-somme .fe-grande { margin-top: 0.4rem; padding-top: 0.5rem; border-top: 2px solid #1d1a18; font: 700 1.15rem/1.3 var(--titoli); }
.fe-somme .fe-grande dt { color: #1d1a18; }
.fe-allegati ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.fe-allegati .copia { border-color: #d9d2cc; background: #f7f3f0; color: #1d1a18; }
@media (max-width: 640px) { .fe-parti { grid-template-columns: 1fr; } .fe-riga { grid-template-columns: 1fr; gap: 0; } .fe-somme .fe-riga { grid-template-columns: 1fr auto; } .fe-totale { text-align: left; } }

/* --- Verifica della posta --- */
.pv-modulo { display: grid; grid-template-columns: 2fr 1.2fr auto; gap: 1rem; align-items: end; }
.pv-modulo .campo { margin: 0; }
.pv-modulo .pulsante { white-space: nowrap; }
@media (max-width: 760px) { .pv-modulo { grid-template-columns: 1fr; } .pv-modulo .pulsante { justify-self: start; } }
.pv-esito { margin-top: 1.5rem; padding: 1.3rem 1.5rem; border-left: 4px solid var(--bordo); }
.pv-esito[hidden] { display: none; }
.pv-esito h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0.2rem 0 0.4rem; }
.pv-esito p { margin: 0; max-width: none; }
.pv-esito .pv-dominio { font: 600 0.8rem/1.2 var(--testi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--testo-2); }
.pv-esito.st-ok { border-left-color: #4CC07A; }
.pv-esito.st-avviso { border-left-color: #E8A33D; }
.pv-esito.st-errore { border-left-color: #FF6B4A; }
#pv-sezioni { display: grid; gap: 0.75rem; margin-top: 1rem; }
.pv-sezione summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.2rem; }
.pv-sezione summary::-webkit-details-marker { display: none; }
.pv-sezione summary strong { font: 600 1.05rem/1.2 var(--titoli); color: var(--crema); }
.pv-stato { margin-left: auto; font-size: 0.8rem; font-weight: 600; color: var(--testo-2); }
.pv-segno { flex: none; display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; font: 700 0.8rem/1 var(--testi); background: rgba(254, 237, 220, 0.15); color: var(--crema); }
.st-ok > summary .pv-segno, li.st-ok .pv-segno { background: #4CC07A; color: var(--inchiostro); }
.st-avviso > summary .pv-segno, li.st-avviso .pv-segno { background: #E8A33D; color: var(--inchiostro); }
.st-errore > summary .pv-segno, li.st-errore .pv-segno { background: #FF6B4A; color: var(--inchiostro); }
.pv-corpo { padding: 0 1.2rem 1.2rem; }
.pv-voci { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pv-voci li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--testo-2); line-height: 1.55; }
.pv-voci li .pv-segno { width: 1.25rem; height: 1.25rem; font-size: 0.7rem; margin-top: 0.12rem; }
.pv-record { margin-top: 1rem; display: grid; gap: 0.35rem; }
.pv-record p { margin: 0; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(254, 237, 220, 0.5); }
.pv-record code { display: block; padding: 0.5rem 0.7rem; border-radius: 0.5rem; background: rgba(13, 10, 9, 0.6); border: 1px solid var(--bordo); font: 0.82rem/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--crema); overflow-wrap: anywhere; }
.pv-sezione.carta:hover { transform: none !important; }

/* --- Videosorveglianza --- */
.vs-gruppo { margin: 0 0 1rem; padding: 1.1rem 1.2rem 1rem; border: 1px solid var(--bordo); border-radius: 0.9rem; background: rgba(254, 237, 220, 0.03); min-width: 0; }
.vs-gruppo legend { padding: 0 0.4rem; font: 600 0.95rem/1.2 var(--titoli); color: var(--crema); }
.vs-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.9rem 1rem; }
.vs-campi .campo { margin: 0; }
.vs-togli { margin-top: 0.9rem; }
.vs-globali { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.9rem 1rem; margin-top: 1.2rem; }
.vs-globali .campo { margin: 0; }
#vs-dettaglio { margin: 0.8rem 0 0; font-size: 0.82rem; color: rgba(254, 237, 220, 0.55); max-width: none; }

/* --- QR Wi-Fi: cartello stampabile --- */
.qw-cartello {
  background: #fff; color: #140B07; border-radius: 1rem; padding: clamp(1.4rem, 4vw, 2.2rem); text-align: center;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.8); display: grid; gap: 0.6rem; justify-items: center;
}
.qw-cartello * { color: inherit; }
.qw-titolo { font: 700 clamp(1.6rem, 4vw, 2.2rem)/1.15 var(--titoli); margin: 0; }
.qw-sotto { font-size: 1rem; margin: 0; max-width: 22rem; color: #4a423d !important; }
.qw-qr { width: min(100%, 17rem); aspect-ratio: 1; display: grid; place-items: center; margin: 0.4rem 0; }
.qw-qr svg { width: 100%; height: 100%; }
.qw-qr .vuoto { color: #6b625c !important; }   /* 5,9:1 sul bianco */
.qw-dati { margin: 0; display: grid; gap: 0.25rem; font-size: 1rem; }
.qw-dati div { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.qw-dati dt { color: #7a6f68; }
.qw-dati dd { margin: 0; font-weight: 700; font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.qw-dati div[hidden] { display: none; }
.qw-campo-pw { display: flex; gap: 0.5rem; }
.qw-campo-pw input { flex: 1; }

/* --- Stampa di un solo elemento (window.stampa44 in pagine.js) --- */
@media print {
  @page { margin: 12mm; }
  html.stampa-mirata, html.stampa-mirata body { background: #fff !important; color: #000 !important; color-scheme: light; }   /* con color-scheme dark i margini della pagina escono scuri */
  html.stampa-mirata body *:not(.via-stampa):not(.da-stampare):not(.da-stampare *) { display: none !important; }
  html.stampa-mirata .via-stampa {
    display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
    background: none !important; box-shadow: none !important; transform: none !important; width: auto !important; max-width: none !important; opacity: 1 !important;
  }
  html.stampa-mirata .via-stampa::before, html.stampa-mirata .via-stampa::after { display: none !important; }
  html.stampa-mirata .da-stampare { box-shadow: none !important; transform: none !important; opacity: 1 !important; border-radius: 0 !important; padding: 0 !important; }
  html.stampa-mirata .qw-cartello.da-stampare { width: 130mm; margin: 10mm auto 0 !important; padding: 12mm !important; border: 1px solid #ccc !important; border-radius: 6mm !important; }
  html.stampa-mirata .qw-cartello .qw-qr { width: 90mm; }
  html.stampa-mirata .fe-tabella tr { break-inside: avoid; }
}
button.link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--crema); }
.fe-zona { position: relative; }
/* Il pulsante del menu lo crea lo script: lo spazio a destra è riservato da subito (classe .js nel <head>), così «Chiama ora» non si sposta quando compare (CLS). */
@media (max-width: 860px) {
  .js .testata:has(.menu) { padding-right: calc(var(--margine) + 2.6rem + 0.75rem); }
  .js .apri-menu { position: absolute; right: var(--margine); top: 50%; transform: translateY(-50%); }
}
@media (max-width: 360px) {
  .testata .chiama { font-size: 0.7rem; letter-spacing: 0.02em; padding-inline: 0.75rem; gap: 0.4rem; }
  .js .testata:has(.menu) { padding-right: calc(var(--margine) + 2.6rem + 0.5rem); }
}
@media (max-width: 860px) { .pagina-tele .testata, .pagina-interna .testata { gap: 1rem; } }
@media (max-width: 360px) { .testata, .pagina-tele .testata, .pagina-interna .testata { gap: 0.6rem; } }

/* ---------- Banner dei cookie (2026-10-13, consenso.js) ----------
   «Accetta» e «Rifiuta» identici (stessa evidenza, come chiede il Garante); «Personalizza» apre le categorie. */
.consenso-cookie {
  position: fixed; z-index: 60; left: 0; right: 0; margin-inline: auto; bottom: 1.25rem; width: min(calc(100% - 2rem), 33rem);
  padding: 1.3rem 1.4rem 1.2rem; border-radius: 1rem; background: #1C1816; color: var(--crema);
  border: 1px solid rgba(255, 88, 29, 0.45); box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.85);
  opacity: 0; transform: translateY(1rem); transition: opacity 0.3s, transform 0.4s var(--uscita);
}
.consenso-cookie.visibile { opacity: 1; transform: none; }
.consenso-cookie[hidden] { display: none; }
.cc-titolo { margin: 0 2rem 0.4rem 0; font: 600 1.05rem/1.3 var(--titoli); color: var(--crema); max-width: none; }
.cc-testo { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--testo-2); max-width: none; }
.cc-testo a { color: var(--crema); }
.cc-chiudi {
  position: absolute; top: 0.6rem; right: 0.6rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--bordo); background: transparent; color: var(--crema); font: 400 1.3rem/1 var(--testi);
}
.cc-chiudi:hover { border-color: var(--arancio); }
.cc-scelte { border: 0; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.cc-scelte[hidden] { display: none; }
.cc-scelte .spunta { font-size: 0.86rem; align-items: flex-start; }
.cc-scelte .spunta input { margin-top: 0.15rem; }
.cc-scelte strong { color: var(--crema); }
.cc-azioni { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.6rem; margin-top: 1.1rem; }
.cc-azioni .pulsante { padding: 0.8rem 1rem; font-size: 0.78rem; text-align: center; }
@media (max-width: 520px) {
  .consenso-cookie { left: 0.75rem; right: 0.75rem; width: auto; bottom: 0.75rem; }
  .cc-azioni { grid-template-columns: 1fr 1fr; }
  .cc-azioni .cc-personalizza { grid-column: 1 / -1; order: 3; }
}
@media (prefers-reduced-motion: reduce) { .consenso-cookie { transition: none; } }
@media print { .consenso-cookie { display: none !important; } }