/* ============================================================
   iFix Roma — foglio di stile unico
   Tema antracite — il colore reale del marchio iFix solutions.
   Contrasto alto, tipografia grande, larghezza piena.
   L'accento non e' un colore estraneo: e' il cromo del logo.
   Nessun font esterno: stack di sistema, zero richieste in più.
   ============================================================ */

:root {
  /* Antracite: il colore reale del marchio iFix solutions */
  --nero: #0e1115;
  --fondo: #14181e;
  --fondo-2: #1a1f26;
  --carta: #20262f;
  --carta-2: #272e39;
  --bordo: rgba(255, 255, 255, .10);
  --bordo-forte: rgba(255, 255, 255, .20);

  /* l'accento e' il cromo del logo, non un colore estraneo */
  --cromo: #e9eef5;
  --cromo-2: #ffffff;
  --acciaio: #9fb0c4;

  --testo: #ffffff;
  --testo-2: #a8b8ce;
  --testo-3: #7286a0;

  /* ⚠️ I colori del marchio, presi dal PNG del logo e non a occhio:
     la scritta sfuma da bianco a crema, la riga sottile sotto e' oro. */
  --oro: #ffbb5c;
  --oro-2: #ffca93;
  --crema: #ffdeb7;
  --marchio-sfuma: linear-gradient(180deg, #ffffff 0%, #fff6e9 44%, #ffdeb7 100%);

  --ok: #2fd07f;
  --errore: #ff6b81;

  /* vetro opaco: sfondo semitrasparente + sfocatura di cio che sta dietro */
  --vetro: rgba(46, 54, 66, .55);
  --vetro-forte: rgba(52, 61, 74, .72);
  --sfoca: blur(18px) saturate(150%);
  --rilievo: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.30);
  --rilievo-alto: 0 1px 0 rgba(255,255,255,.10) inset, 0 30px 70px rgba(0,0,0,.60), 0 6px 18px rgba(0,0,0,.40);
  --raggio: 16px;
  /* la freccia dei tasti, disegnata una volta sola e riusata come maschera */
  --freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E");
  --raggio-g: 24px;
  --max: none;                 /* larghezza piena: il sito riempie il browser */
  --gutter: clamp(18px, 4vw, 64px);
  --bagliore: 0 0 60px rgba(233, 238, 245, .18);
  /* ⚠️ Cresce insieme a `--testata-h` qui sotto: e' l'aggancio delle sezioni
     3D, che si incollano SOTTO la barra. Lasciata indietro, i primi pixel
     della scena finiscono dietro al menu. */
  --testata: 109px;           /* altezza della barra in cima, che resta appiccicata */
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo-2);
  /* ⚠️ MiSans Latin per tutto il sito, con i caratteri di sistema dietro:
     se il file non arriva (rete lenta, blocco, browser vecchio) la pagina si
     legge comunque con quello che c'e' nel computer. Vedi il blocco
     `@font-face` qui sotto. */
  font-family: "MiSans Latin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cromo); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--testo); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 .5em; }
h1 { font-size: clamp(34px, 6.2vw, 66px); font-weight: 800; }
h2 { font-size: clamp(27px, 4.2vw, 44px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
strong { color: #dce6f3; }

/* ============================================================
   MiSans Latin — IL CARATTERE DEL SITO (dal 2026-10-11)
   ------------------------------------------------------------
   Il sito non ha mai caricato font: usava quelli di sistema, ed e' per
   questo che pesava niente. MiSans e' entrato il 2026-10-10 come prova sulla
   sola home — l'utente su un telefono Xiaomi aveva visto quel carattere e
   gli piaceva — e il giorno dopo l'ha promosso a carattere di TUTTO il sito.
   E' il carattere ufficiale Xiaomi, licenza Apache 2.0: si puo' usare e
   ridistribuire anche commercialmente, e la licenza sta accanto al file in
   `assets/font/`.

   ⚠️ Adesso sta nella regola `body` qui sopra, non piu' in una classe.
   Niente da aggiungere alle pagine, e nessuna pagina nuova se ne puo'
   dimenticare. **Per tornare indietro** si toglie `"MiSans Latin",` da
   quella riga: il resto dello stack e' rimasto identico a prima.
   (La vecchia `class="misans"` sul `<body>` non serve piu' ed e' stata
   tolta da `index.html`.)

   ⚠️ E' il sottoinsieme LATINO in formato variabile: **un file da 135 KB**
   per tutti i pesi, invece di uno per peso. L'asse pero' arriva a **700**,
   mentre `h1` e `h2` chiedono 800: li' il browser si ferma a 700 e i titoli
   vengono un filo meno grassi. E' cosi' anche sulla home, ed e' la resa che
   l'utente ha approvato. Se un giorno da' fastidio si aggiunge il file
   `Heavy` dello stesso pacchetto (un altro centinaio di KB).

   ⚠️ `font-display: swap`: la pagina si legge subito col carattere di
   sistema e cambia quando il file arriva. L'alternativa (`block`) tiene il
   testo invisibile fino a 3 secondi, e una pagina bianca che aspetta un
   carattere e' peggio di un carattere che cambia.
   ============================================================ */
@font-face {
  font-family: "MiSans Latin";
  font-style: normal;
  font-weight: 150 700;
  font-display: swap;
  src: url("font/MiSansLatinVF.woff2") format("woff2");
}
.contenitore { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
/* i testi lunghi restano leggibili anche su schermi larghissimi */
.eroe .sottotitolo, .testa-pagina p { max-width: 68ch; }
.centro { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.occhiello {
  display: inline-block; margin-bottom: 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acciaio);
}
.occhiello::before { content: "— "; opacity: .6; }

.salta {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--cromo); color: #14181e; padding: 12px 18px; border-radius: 0 0 10px 10px; transition: top .15s;
}
.salta:focus { top: 0; text-decoration: none; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--cromo); outline-offset: 3px; border-radius: 4px;
}

/* ---------------- intestazione ---------------- */

.barra-alta {
  background: #000; color: var(--testo-3);
  font-size: 13.5px; letter-spacing: .01em;
  border-bottom: 1px solid var(--bordo);
}
.barra-alta .contenitore {
  display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; justify-content: center;
  padding-top: 9px; padding-bottom: 9px;
}
.barra-alta a { color: #d8e3f2; font-weight: 600; }
.barra-alta .sep { opacity: .3; }
@media (max-width: 700px) { .barra-alta .nascondi-mobile { display: none; } }

/* ============================================================
   La testata non e' una barra
   ------------------------------------------------------------
   Sta APPOGGIATA sopra la prima sezione, senza fondo: la pagina comincia
   subito, e in home il gioco si prende tutta l'altezza fin sotto al menu.
   Poi cambia stato mentre si scorre:

     in cima            trasparente, con una velatura scura in alto che tiene
                        leggibile il menu sopra il gioco e sopra le foto;
     scesi oltre 80 px  diventa una barra vera — fondo scuro, sfocatura, un
                        filo di bordo — e si stringe da 92 a 74 px;
     scendendo ancora   si toglie di mezzo, e torna appena si risale.

   ⚠️ Essendo `fixed` non occupa piu' spazio nel flusso: la prima sezione di
   ogni pagina (`.eroe` o `.testa-pagina`) si prende in carico la sua altezza
   nel proprio `padding-top`. Sono le uniche due che possono stare per prime.
   ============================================================ */
/* ⚠️ Un'altezza SOLA, e non si stringe piu' scorrendo. Per dare respiro al
   menu si alza qui e non col `padding` sul contenitore: `testata.js` misura
   la barra e riscrive `--testata-h`, che e' il `min-height` di quello stesso
   contenitore — un giro che e' meglio non toccare. */
:root { --testata-h: 104px; --eroe-su: clamp(22px, 3.5vw, 44px); }

/* ⚠️ Il fondo c'e' DA SUBITO, non compare scorrendo: una barra che prima non
   c'e' e poi appare fa sobbalzare la pagina proprio nel momento in cui si
   comincia a leggere. E non si stringe: l'altezza e' una sola, scorrendo si
   alza soltanto l'ombra. */
.testata {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  background: rgba(4, 8, 13, .90);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 var(--bordo);
  transition: background-color .38s ease, box-shadow .38s ease,
              transform .42s ease;
}
/* ⚠️ La riga d'oro del marchio, tirata per tutta la barra: e' il filo che lega
   il menu al logo, ed e' l'unico posto dove l'oro sta a piena forza. */
.testata::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 187, 92, 0) 0%, rgba(255, 187, 92, .55) 22%,
    rgba(255, 187, 92, .55) 78%, rgba(255, 187, 92, 0) 100%);
}
.testata--fissa {
  background: rgba(4, 8, 13, .94);
  box-shadow: 0 1px 0 var(--bordo), 0 10px 30px rgba(0, 0, 0, .45);
}
/* ⚠️ Mentre si gioca la testata si smorza — marchio compreso. Sopra al campo
   da gioco un menu a piena luce ruba l'occhio proprio dove serve guardare, e
   stona con il titolo che invece e' gia' velato. Torna piena al primo tocco o
   con la tastiera, cosi' resta comunque raggiungibile; e appena la pagina
   scorre e la testata diventa barra vera (`--fissa`) la regola non vale piu'. */
body.in-gioco .testata:not(.testata--fissa) .marchio,
body.in-gioco .testata:not(.testata--fissa) .menu,
body.in-gioco .testata:not(.testata--fissa) .lingue,
body.in-gioco .testata:not(.testata--fissa) .hamburger {
  opacity: .3; transition: opacity .25s ease;
}
body.in-gioco .testata:not(.testata--fissa):hover .marchio,
body.in-gioco .testata:not(.testata--fissa):hover .menu,
body.in-gioco .testata:not(.testata--fissa):hover .lingue,
body.in-gioco .testata:not(.testata--fissa):hover .hamburger,
body.in-gioco .testata:not(.testata--fissa):focus-within .marchio,
body.in-gioco .testata:not(.testata--fissa):focus-within .menu,
body.in-gioco .testata:not(.testata--fissa):focus-within .lingue,
body.in-gioco .testata:not(.testata--fissa):focus-within .hamburger {
  opacity: 1;
}
.testata--nascosta { transform: translateY(-100%); }

.testata .contenitore {
  display: flex; align-items: center; gap: 18px;
  min-height: var(--testata-h);
}

@media (prefers-reduced-motion: reduce) {
  .testata, .testata .contenitore { transition: none; }
  .testata--nascosta { transform: none; }
}
.marchio { flex: none; display: block; }
.marchio img { width: clamp(178px, 17vw, 250px); }

.menu { margin-left: auto; }
.menu ul { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
/* ⚠️ Il menu porta i colori del marchio, non un grigio qualunque: crema sul
   passaggio del mouse, filo d'oro sotto alla pagina in cui si e'. E' lo stesso
   oro della riga sotto a «iFix», cosi' testata e logo sembrano la stessa cosa.
   ⚠️ Il filo si disegna in `::after` e non col bordo: un bordo sposterebbe il
   testo di un pixel al passaggio del mouse, e si vedrebbe ballare. */
.menu a {
  position: relative; display: block; padding: 10px 14px; border-radius: 10px;
  color: #f1f4f9; font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: color .16s ease, background-color .16s ease;
}
.menu a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px;
  height: 2px; border-radius: 2px; background: var(--oro);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .2s ease, opacity .2s ease;
  opacity: 0;
}
/* ⚠️ NIENTE RIQUADRO DIETRO ALLE VOCI (2026-10-11). Prima la voce sotto al
   mouse, e quella della pagina in cui si e', si accendevano con un
   rettangolo scuro arrotondato. Adesso restano solo due cose: il colore del
   testo e il filo sotto — gli stessi due elementi di cui e' fatto il logo.
   ⚠️ Il tasto «Preventivo» NON e' toccato: quello e' un tasto vero, pieno,
   con la sfumatura del marchio. La sua regola sta piu' sotto e vince. */
.menu a:hover {
  background: none;
  color: var(--crema); text-decoration: none;
}
.menu a:hover::after { transform: scaleX(.7); opacity: .75; }

/* ⚠️ LA VOCE DELLA PAGINA IN CUI SI E' PRENDE I COLORI DEL LOGO: non un
   bianco qualunque, ma la **stessa sfumatura** della scritta «iFix»
   (`--marchio-sfuma`, bianco → crema), ritagliata sulle lettere con
   `background-clip: text`.
   ⚠️ `color: transparent` e' obbligatorio: senza, il colore pieno copre la
   sfumatura e non si vede niente. E va rimesso anche sul `:hover`, se no
   passandoci sopra la voce tornerebbe crema piatta. */
.menu a[aria-current="page"],
.menu a[aria-current="page"]:hover {
  background: var(--marchio-sfuma);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* ⚠️ E il filo sotto e' fatto come LA RIGHINA DEL LOGO: oro che sfuma a
   niente alle due estremita', non un trattino pieno che finisce di colpo.
   E' lo stesso disegno della riga sotto alla barra (`.testata::after`). */
/* ⚠️ Rete di sicurezza: `color: transparent` con una sfumatura ritagliata
   sul testo, su un browser che non sa ritagliare, darebbe una voce di menu
   **invisibile**. Nel dubbio si torna al crema pieno. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .menu a[aria-current="page"],
  .menu a[aria-current="page"]:hover { background: none; color: var(--crema); }
}
.menu a[aria-current="page"]::after {
  transform: scaleX(1); opacity: 1;
  border-radius: 0;
  background: linear-gradient(90deg,
    rgba(255, 187, 92, 0) 0%, rgba(255, 187, 92, .95) 26%,
    rgba(255, 187, 92, .95) 74%, rgba(255, 187, 92, 0) 100%);
}
/* Il tasto del preventivo e' il marchio stesso: la sua sfumatura, il suo oro. */
.menu .evidenza a {
  background: var(--marchio-sfuma); color: #2a1c08; margin-left: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 187, 92, .45);
}
.menu .evidenza a::after { display: none; }
.menu .evidenza a:hover {
  background: linear-gradient(180deg, #ffffff 0%, #fff9f0 44%, #ffe9cd 100%);
  color: #1c1204; box-shadow: 0 8px 26px rgba(0, 0, 0, .5), 0 0 0 1px var(--oro);
}

/* ⚠️ La fascia stretta: sopra ai 1400 il menu si vede tutto, ma fino a circa
   1650 px non ci sta. Misurato a 1440: sbordava di 56 px dallo schermo, e
   siccome la pagina non scorre di lato nessuno se ne accorgeva — le ultime
   voci erano semplicemente tagliate via. Qui le voci si stringono invece di
   sparire. */
/* ⚠️ La fascia si e' allargata a 1760 e si stringe di piu': le voci sono
   passate da dieci a undici con «Prova il tuo telefono», e a 1440 il menu
   sbordava di nuovo — di tre pixel, quanto basta a mangiarsi il bordo del
   tasto «Preventivo». */
@media (min-width: 1401px) and (max-width: 1760px) {
  .testata .contenitore { gap: 10px; }
  .marchio img { width: clamp(140px, 11.2vw, 205px); }
  .menu a { padding-left: clamp(6px, .5vw, 14px); padding-right: clamp(6px, .5vw, 14px);
            font-size: clamp(13px, .92vw, 15px); }
  .menu a::after { left: clamp(6px, .5vw, 14px); right: clamp(6px, .5vw, 14px); }
  .menu .evidenza a { margin-left: 4px; }
}

.hamburger {
  display: none; margin-left: auto; width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--bordo-forte); border-radius: 12px; background: rgba(255, 255, 255, .04); cursor: pointer;
}
.hamburger span { display: block; width: 20px; height: 2px; margin: 4px auto; background: #fff; border-radius: 2px; transition: .2s; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1400px) {
  .hamburger { display: block; }
  .menu {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #050a11; border-bottom: 1px solid var(--bordo);
    padding: 10px var(--gutter) 18px;
    max-height: calc(100vh - var(--testata-h)); overflow-y: auto;
  }
  .menu[hidden] { display: none; }
  .menu ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .menu a { padding: 14px 12px; font-size: 16px; }
  .menu .evidenza a { margin: 8px 0 0; text-align: center; }
}

/* ---------------- eroe ---------------- */

/* ⚠️ LE FASCE SCURE NON FINISCONO PIU' DI NETTO. Il sito alterna due neri —
   `--nero` (#0e1115) per le fasce e `--fondo` (#14181e) per la pagina — e il
   passaggio era un gradino: una riga orizzontale netta per tutta la
   larghezza, che si vedeva benissimo sotto alla vetrina della home. Adesso
   ogni fascia **sfuma** nel colore della pagina sul bordo che la confina, e
   il gradino sparisce senza che nessuno debba sapere dove finisce cosa.
   ⚠️ Non e' un pezzo appiccicato sopra: e' lo sfondo stesso della fascia che
   diventa una sfumatura. Un riquadro in piu' avrebbe dovuto stare sotto al
   contenuto e sopra alla trama, e qui dentro gli strati sono gia' tre. */
.eroe {
  position: relative; isolation: isolate; overflow: hidden;
  --sfuma-col: var(--fondo);
  /* ⚠️ Stesse tappe di smoothstep del piede, e la stessa ragione: senza,
     la pendenza parte e si ferma di colpo e l'occhio legge lo spigolo come
     una riga proprio sotto al gioco. Qui la rampa e' lunga **200 px**.
     ⚠️ `color-mix` perche' il colore d'arrivo e' una variabile: e' `--nero`
     quando sotto c'e' gia' una fascia scura, `--fondo` altrove. */
  background: linear-gradient(180deg,
    var(--nero) 0,
    var(--nero) calc(100% - 200px),
    color-mix(in srgb, var(--sfuma-col) 10%, var(--nero)) calc(100% - 160px),
    color-mix(in srgb, var(--sfuma-col) 35%, var(--nero)) calc(100% - 120px),
    color-mix(in srgb, var(--sfuma-col) 65%, var(--nero)) calc(100% - 80px),
    color-mix(in srgb, var(--sfuma-col) 90%, var(--nero)) calc(100% - 40px),
    var(--sfuma-col) 100%);
  padding: clamp(52px, 8vw, 96px) 0 0;
}
/* ⚠️ Stessa logica della testata: su `chi-siamo` sotto all'eroe c'e' subito
   una `.sezione-nera`. Il colore non cambia, ma la TRAMA blueprint deve
   spegnersi lo stesso, se no finisce di netto. Quindi la maschera resta e si
   cambia solo il colore d'arrivo. */
.eroe:has(+ .sezione-nera) { --sfuma-col: var(--nero); }
.eroe::before {                       /* trama blueprint appena accennata */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/blueprint.webp") right center/contain no-repeat;
  opacity: .1;
  /* ⚠️ Anche la TRAMA va spenta sul fondo, se no il gradino lo rifa' lei:
     il colore sfuma e il disegno tecnico finisce di netto lo stesso. */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 200px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 200px), transparent 100%);
}
.eroe::after {                        /* alone blu dietro al prodotto */
  content: ""; position: absolute; z-index: -1;
  right: -6%; top: 10%; width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(190, 205, 225, .20), transparent 62%);
}
.eroe-griglia {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: center;
}
.eroe h1 { text-wrap: balance; margin-bottom: .35em; }
.eroe .sottotitolo { font-size: clamp(17px, 2vw, 21px); color: var(--testo-2); max-width: 40ch; }
.eroe-figura { position: relative; justify-self: center; }
.eroe-figura img { max-height: 460px; width: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .65)); }
.eroe .bottoni { justify-content: flex-start; }

@media (max-width: 860px) {
  .eroe-griglia { grid-template-columns: 1fr; text-align: center; }
  .eroe .bottoni { justify-content: center; }
  .eroe .sottotitolo { margin-inline: auto; }
  .eroe-figura { order: -1; }
  .eroe-figura img { max-height: 260px; }
  .eroe::before { opacity: .06; }
}

/* testata delle pagine interne */
.testa-pagina {
  position: relative; isolation: isolate;
  background: var(--nero); padding: clamp(52px, 7vw, 84px) 0;
  /* ⚠️ Via il `border-bottom`: era una riga netta sotto a ogni testata.
     ⚠️ Quanto sfuma lo dice `--sfuma`, e la sfumatura vera la disegna
     `::after` (vedi sotto): da li' copre in un colpo solo lo sfondo, la
     fotografia e l'alone colorato, che sono tre strati diversi. */
  /* ⚠️ Da 110 a 170 e poi a **piu' di meta' fascia**. Sotto alla testata il
     salto e' GROSSO: sopra c'e' una fotografia fitta di circuiti e un alone
     colorato, sotto il nero pieno. A 170 px su una fascia da 600 la trama
     restava a piena forza per 430 px e poi spariva in un quarto d'altezza:
     si vedeva il punto in cui finiva.
     ⚠️ `min(320px, 55%)` e non 320 secchi: sul telefono la fascia non ha
     altezza minima e puo' stare sotto ai 300 px — una rampa da 320 partirebbe
     piu' in alto del bordo di sopra e sbiadirebbe tutta la testata. */
  --sfuma: min(320px, 55%);
  --sfuma-col: var(--fondo);
}
/* ⚠️ La testata NON e' nera: sotto c'e' `--nero`, ma sopra ci stanno una
   fotografia al 28% e l'alone della tinta, e il risultato e' una fascia
   chiara e colorata. Quindi si sfuma SEMPRE — quello che cambia e' il
   colore d'arrivo, che dev'essere quello di cio' che viene dopo:
     - prima dell'esploso, che e' nero pieno  →  `--nero`
     - in tutti gli altri casi, la pagina     →  `--fondo`
   ⚠️ Ci sono gia' cascato: avevo spento la sfumatura prima dell'esploso
   dando per scontato che fossero tutti e due neri. La riga si vedeva
   eccome. */
.testa-pagina:has(+ .esploso) { --sfuma-col: var(--nero); }
/* ⚠️ TUTTE LE TESTATE ALTE UGUALE, dal tablet in su. Misurate una per una
   e a PIU' LARGHEZZE, perche' il testo va a capo in modo diverso: si andava
   da 306 (`/privacy`, che ha solo il titolo) a **599** (`/prova-dispositivo`
   a 1000 px, che ha due paragrafi; a finestra larga il primato passa a
   `/en/software/fenice` con 594). Passando da una pagina all'altra la fascia
   colorata ballava, e si vedeva.
   Il numero e' il **contenuto piu' alto**, come ha chiesto l'utente, cosi'
   nessuna pagina viene tagliata: 600 tondi, che coprono ogni pagina da 1000
   px in su. Sotto i 1000 i margini della fascia si stringono da soli e
   nessuna ci arriva. Per combinazione e' quasi l'altezza della vetrina della
   home (555 px), e le due fasce si leggono come la stessa cosa.
   ⚠️ `flex-direction: column` e non `align-items: center`: in riga il
   `.contenitore`, che e' l'unico figlio, si stringerebbe al suo testo invece
   di prendersi tutta la larghezza.
   ⚠️ SUL TELEFONO NON SI FA. Li' il testo va a capo molto di piu' e le stesse
   fascie misurano da 216 a 622 px: bloccarle tutte a 622 vorrebbe dire tre
   quarti di schermo di fascia vuota prima di leggere qualcosa. E due pagine
   non si vedono mai una accanto all'altra su un telefono: il disordine che
   l'altezza unica va a sistemare, li', non si nota. */
@media (min-width: 760px) {
  .testa-pagina {
    min-height: 600px;
    display: flex; flex-direction: column; justify-content: center;
  }
  /* ⚠️ SENZA QUESTA RIGA IL TESTO FINISCE IN MEZZO, e non era voluto.
     `.contenitore` ha `margin: 0 auto`, e in un contenitore flex un margine
     automatico sull'asse trasversale **annulla lo stiramento** e si mangia
     lo spazio da tutte e due le parti: il blocco si stringe al testo e si
     centra, trascinandosi dietro occhiello, titolo, frase e tasti.
     Con una larghezza dichiarata il blocco resta largo quanto la fascia (fino
     al suo `max-width`) e il testo torna a sinistra, come in tutte le altre
     pagine. */
  .testa-pagina > .contenitore { width: 100%; }
}
.testa-pagina::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-position: center; background-size: cover; opacity: .28;
}
.testa-pagina::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    /* ⚠️ Le quattro tappe in mezzo sono una SMOOTHSTEP sull'opacita'
       (10, 35, 65, 90%). Con la sola coppia transparent→colore la pendenza
       partiva e si fermava di colpo, e l'occhio legge quello spigolo come
       una riga anche dove i colori non fanno nessun gradino. Stessa ricetta
       del piede di pagina, dove ha funzionato.
       ⚠️ `color-mix` serve perche' il colore d'arrivo e' una VARIABILE e non
       ci si puo' scrivere dentro un'opacita' a mano. */
    linear-gradient(180deg,
      transparent calc(100% - var(--sfuma)),
      color-mix(in srgb, var(--sfuma-col) 10%, transparent) calc(100% - var(--sfuma) * 0.8),
      color-mix(in srgb, var(--sfuma-col) 35%, transparent) calc(100% - var(--sfuma) * 0.6),
      color-mix(in srgb, var(--sfuma-col) 65%, transparent) calc(100% - var(--sfuma) * 0.4),
      color-mix(in srgb, var(--sfuma-col) 90%, transparent) calc(100% - var(--sfuma) * 0.2),
      var(--sfuma-col) 100%),
    linear-gradient(180deg, rgba(2, 7, 10, .55), rgba(2, 7, 10, .92));
}
.testa-pagina h1 { margin-bottom: 10px; }
.testa-pagina p { color: var(--testo-2); max-width: 62ch; font-size: 18px; margin: 0; }
.testa-pagina.img-contattaci::before { background-image: url("../img/laboratorio.webp"); }
.testa-pagina.img-corriere::before { background-image: url("../img/componenti.webp"); }
.testa-pagina.img-dove::before { background-image: url("../img/laboratorio.webp"); }
.testa-pagina.img-componenti::before { background-image: url("../img/componenti.webp"); }
.testa-pagina.img-software::before { background-image: url("../img/blueprint.webp"); }

/* ---------------- bottoni ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 28px; border: 1px solid transparent; border-radius: 12px;
  font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2;
  cursor: pointer; text-align: center; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn svg { width: 19px; height: 19px; flex: none; }

.btn-primario { background: linear-gradient(180deg, #ffffff, #dfe6ef); color: #14181e; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.btn-primario:hover { background: #fff; }
.btn-chiaro { background: linear-gradient(180deg, #ffffff, #dfe6ef); color: #14181e; }
.btn-chiaro:hover { background: #e6edfa; }
.btn-contorno { background: transparent; border-color: var(--bordo-forte); color: #fff; }
.btn-contorno:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .3); }
.btn-verde { background: #1fab53; color: #fff; box-shadow: 0 10px 30px rgba(31, 171, 83, .3); }
.btn-verde:hover { background: #23c25e; }

.bottoni { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

/* ---------------- sezioni ---------------- */

.sezione { padding: clamp(56px, 8vw, 96px) 0; position: relative; isolation: isolate; }
/* ⚠️ La sezione delle quattro schede arriva subito sotto alla vetrina del
   gioco, e fra le due c'era una fascia nera di quasi 200 px: l'aria normale
   fra due sezioni, che qui pero' separa due cose che si guardano insieme.
   Si stringe SOLO sopra. */
.sezione.scelta { padding-top: clamp(26px, 3vw, 44px); }
/* macchie di luce diffusa: danno al vetro qualcosa da sfocare */
/* ⚠️ ED ERANO LORO L'ULTIMA RIGA RIMASTA. Le macchie sono ancorate alla
   sezione (`inset: 0`) e una sta all'**8% dall'alto**: al bordo superiore e'
   ancora accesa, e li' viene tagliata di netto. Due sezioni attaccate
   finivano cosi' con una riga chiara lunga tutto lo schermo — proprio sotto
   alla striscia dell'usato, dove l'utente l'ha fotografata. Lo sfondo era
   gia' continuo: a non esserlo era la luce sopra.
   ⚠️ Si spengono con una maschera, non spostando le macchie: spostarle in
   mezzo vorrebbe dire rifare la taratura di ogni sezione, e su una sezione
   bassa si sovrapporrebbero. */
.sezione::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 12% 8%, rgba(150,175,210,.10), transparent 70%),
    radial-gradient(50% 45% at 88% 78%, rgba(120,145,185,.09), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 92px, #000 calc(100% - 92px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 92px, #000 calc(100% - 92px), transparent 100%);
}
/* ⚠️ Anche questa sfuma, sopra e sotto. E' un grigio appena piu' chiaro del
   fondo (#1a1f26 contro #14181e): poco, ma una riga netta lunga tutto lo
   schermo si vede lo stesso — e queste fasce sono quelle che si alternano
   piu' spesso, due o tre per pagina. */
.sezione-alt {
  background: linear-gradient(180deg,
    var(--fondo) 0, var(--fondo-2) 70px,
    var(--fondo-2) calc(100% - 70px), var(--fondo) 100%);
}

/* ⚠️ L'ULTIMA FASCIA DELLA PAGINA SFUMA NEL NERO DEL PIEDE.
   E' un velo nero che cresce negli ultimi 240 px, con le solite cinque
   tappe di smoothstep: cosi' la pagina arriva al piede gia' nera, e il piede
   puo' essere nero pieno dal primo pixel, logo compreso.
   ⚠️ `z-index: -1` e' quello che tiene in piedi tutto: dentro a una sezione
   un figlio con z negativo si disegna SOPRA allo sfondo della sezione ma
   SOTTO al testo. Cosi' il velo copre qualunque fondo abbia la fascia
   (nera, grigia, chiara o trasparente) senza sporcare una sola parola, e
   basta una regola per tutte le varianti. `.sezione` ha gia'
   `isolation: isolate`, quindi non sfonda verso il resto della pagina.
   ⚠️ L'ultima sezione di ogni pagina e' sempre una `.sezione`: controllate
   tutte e quattordici. */
main > .sezione:last-child::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 240px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, .104) 20%,
    rgba(0, 0, 0, .352) 40%,
    rgba(0, 0, 0, .648) 60%,
    rgba(0, 0, 0, .896) 80%,
    #000 100%);
}
/* ⚠️ E l'ultima fascia non deve schiarirsi verso il grigio della pagina
   prima di sparire sotto al velo: sotto non c'e' piu' la pagina, c'e' il
   nero. Se no si vedrebbe prima schiarire e poi annerire. */
main > .sezione-nera:last-child { --sfuma-col: var(--nero); }
main > .sezione-alt:last-child {
  background: linear-gradient(180deg,
    var(--fondo) 0, var(--fondo-2) 70px, var(--fondo-2) 100%);
}
/* ⚠️ Sfuma su TUTTI E DUE i bordi: una fascia nera in mezzo alla pagina ha
   un gradino sopra e uno sotto. 84 px bastano — meno si vedono ancora, piu'
   si mangiano il nero e la fascia non si distingue piu'. */
/* ⚠️ DUE COLORI D'ATTACCO, uno per lato: `--sfuma-su` e `--sfuma-col`.
   Di suo la fascia nasce e muore sul colore della pagina; quando il vicino
   e' gia' scuro, da quel lato si attacca direttamente sul nero e la rampa
   diventa piatta (nero → nero), senza nessun passaggio.
   ⚠️ Prima erano due regole intere che si sovrascrivevano, e **copriva solo
   il lato di sopra**: su `/computer` ci sono DUE fasce nere di fila, la
   prima finiva sfumando verso il grigio e la seconda riattaccava dal nero.
   Un gradino bello netto, e l'utente l'ha fotografato. Con le due variabili
   i quattro casi (sola, sopra scuro, sotto scuro, tutti e due) vengono da
   se' senza riscrivere il gradiente. */
.sezione-nera {
  --sfuma-su: var(--fondo);
  --sfuma-col: var(--fondo);
  background: linear-gradient(180deg,
    var(--sfuma-su) 0, var(--nero) 84px,
    var(--nero) calc(100% - 84px), var(--sfuma-col) 100%);
}
/* sopra c'e' gia' scuro → niente passaggio in alto.
   ⚠️ `A + B` guarda il fratello PRECEDENTE di B; `:has(+ ...)` il
   successivo. Servono tutti e due, uno per lato. */
.eroe + .sezione-nera,
.esploso + .sezione-nera,
.testa-pagina + .sezione-nera,
.sezione-nera + .sezione-nera { --sfuma-su: var(--nero); }
/* sotto c'e' gia' scuro → niente passaggio in basso */
.sezione-nera:has(+ .sezione-nera) { --sfuma-col: var(--nero); }

.intro { max-width: 74ch; margin: 0 auto 48px; text-align: center; }
.intro p { color: var(--testo-2); font-size: 18.5px; }
.intro.a-sinistra { margin-left: 0; text-align: left; }

.griglia { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 40px; align-items: center; }

/* scheda base */
.scheda {
  background: var(--vetro);
  -webkit-backdrop-filter: var(--sfoca); backdrop-filter: var(--sfoca);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 28px; display: flex; flex-direction: column; position: relative; overflow: hidden;
  box-shadow: var(--rilievo);
}
/* filo di luce sul bordo superiore: e' quello che fa "vetro" */
.scheda::before, .modulo::before, .valutatore::before, .sede::before, .passi li::before, .riepilogo::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  pointer-events: none;
}
.scheda h3 { margin-bottom: 10px; }
.scheda p { color: var(--testo-2); font-size: 15.5px; margin-bottom: 0; }
.scheda p + p { margin-top: .7em; }

/* ⚠️ La scheda che chiude le griglie dei guasti. I tre puntini vanno GRANDI e
   spenti: dicono «l'elenco non finisce qui» senza rubare il posto a un guasto
   vero, e senza sembrare un titolo. Il bordo tratteggiato dice la stessa cosa
   in un altro modo — e' l'unica scheda che non si chiude.
   ⚠️ `aria-hidden` sui puntini sta nell'HTML: a un lettore di schermo tre
   punti non dicono niente, e la frase sotto li dice tutti. */
.scheda-ancora { border-style: dashed; background: rgba(46, 54, 66, .34); }
.scheda-ancora .puntini {
  /* bianchi come il titolo e un filo piu' grandi: sono un segno, non una
     parola, ma non devono sembrare spenti */
  font-size: 1.2em; letter-spacing: .05em; color: #fff; margin-right: 1px;
}
.scheda-ancora h3 { opacity: .92; }
.scheda .btn { margin-top: 22px; align-self: flex-start; }

a.scheda { color: inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
/* La freccia sta in alto a destra, alla stessa distanza dall'angolo su tutte le
   schede. E' arancione, lo stesso ambra degli accenti nei disegni. L'ombra serve
   perche' sulle schede con disegno finisce sopra l'immagine: senza, sui punti
   chiari sparirebbe. */
a.scheda::after {
  content: "→"; position: absolute; right: 16px; top: 12px; z-index: 2;
  color: #e8843a; font-size: 21px; line-height: 1;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .9), 0 0 12px rgba(0, 0, 0, .7);
  opacity: 0; transform: translateX(-6px); transition: .18s;
}
a.scheda:hover {
  transform: translateY(-5px); border-color: rgba(255, 255, 255, .30);
  background: var(--vetro-forte);
  box-shadow: var(--rilievo-alto), 0 0 0 1px rgba(255, 255, 255, .10);
  text-decoration: none;
}
a.scheda:hover::after { opacity: 1; transform: none; }

/* scheda con foto in cima */
.scheda-foto { padding: 0; }
.scheda-foto .foto { aspect-ratio: 16 / 9; overflow: hidden; background: #0a0f17; }
.scheda-foto .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.scheda-foto:hover .foto img { transform: scale(1.06); }
.scheda-foto .testo { padding: 24px 26px 28px; }
.scheda-foto h3 { margin-bottom: 8px; }
.scheda-foto p { color: var(--testo-2); font-size: 15.5px; margin: 0; }

.scheda-icona { width: 54px; height: 54px; margin-bottom: 18px; object-fit: contain; }

/* nastro dei servizi */
.nastro {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.nastro a, .nastro span {
  display: inline-block; padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--bordo-forte); background: rgba(255, 255, 255, .04);
  color: var(--testo-2); font-weight: 600; font-size: 15px;
}
.nastro a:hover { border-color: var(--cromo); color: #14181e; background: var(--cromo); text-decoration: none; }

/* elenco con spunta */
.spunte { list-style: none; margin: 0; padding: 0; }
.spunte li { position: relative; padding-left: 30px; margin-bottom: 11px; }
.spunte li::before {
  content: ""; position: absolute; left: 4px; top: .45em;
  width: 7px; height: 12px; border: solid var(--cromo); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* numeri / punti di forza */
.numeri { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.numeri div { border-left: 2px solid var(--cromo); padding-left: 18px; }
.numeri b { display: block; color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.numeri span { font-size: 15px; color: var(--testo-3); }

/* ---------------- moduli ---------------- */

.modulo {
  position: relative; overflow: hidden;
  background: var(--vetro);
  -webkit-backdrop-filter: var(--sfoca); backdrop-filter: var(--sfoca);
  border: 1px solid var(--bordo); border-radius: var(--raggio-g);
  padding: clamp(24px, 4vw, 40px); max-width: 980px; margin: 0 auto;
  box-shadow: var(--rilievo);
}
.campi { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.campo { display: flex; flex-direction: column; }
.campo.largo { grid-column: 1 / -1; }
.campo label { font-weight: 650; font-size: 14.5px; margin-bottom: 8px; color: #dce6f3; }
.campo .aiuto { font-weight: 400; color: var(--testo-3); font-size: 13.5px; }
.campo input, .campo textarea, .campo select {
  font: inherit; font-size: 16px;                /* 16px: evita lo zoom su iPhone */
  padding: 13px 15px; border: 1px solid var(--bordo-forte); border-radius: 11px;
  background: rgba(12, 16, 22, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; width: 100%;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}
.campo input::placeholder, .campo textarea::placeholder { color: #5d6f88; }
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--cromo); background: #1a1f27; }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--errore); }

.consenso { display: flex; gap: 13px; align-items: flex-start; margin: 24px 0 6px; font-size: 14.5px; color: var(--testo-2); }
.consenso input { width: 20px; height: 20px; flex: none; margin-top: 3px; accent-color: var(--cromo); }

.esito { border-radius: 12px; padding: 17px 19px; margin-top: 22px; font-weight: 600; }
.esito-ok { background: rgba(47, 208, 127, .12); color: #7cf0b5; border: 1px solid rgba(47, 208, 127, .4); }
.esito-ko { background: rgba(255, 107, 129, .1); color: #ffa8b5; border: 1px solid rgba(255, 107, 129, .38); }

.nota-piccola { font-size: 14px; color: var(--testo-3); }

/* ---------------- piè di pagina ---------------- */

/* ⚠️ IL PIEDE E' NERO PIENO, DAL SUO PRIMO PIXEL (rifatto il 2026-10-11).
   Prima la sfumatura stava QUI DENTRO, e per quanto la allungassi il
   risultato era sempre un piede **grigio in cima**: il logo iFix sta nei
   primi cento pixel e restava sul grigio. Allungarla peggiorava, accorciarla
   rimetteva la riga. Non era un problema di lunghezza ma di POSTO: adesso il
   passaggio lo fa **l'ultima fascia della pagina**, nei suoi ultimi 240 px,
   che sono quasi tutti spazio vuoto (ogni sezione ha fino a 96 px di margine
   interno in fondo). Il piede comincia che e' gia' nero.
   Vedi `main > .sezione:last-child::after`.
   ⚠️ La sfumatura va scritta QUI dentro e non in una regola a parte piu'
   su: `.pie { background: #000 }` ha la stessa forza e sta piu' in basso nel
   foglio, quindi vincerebbe lei e la sfumatura non si vedrebbe. Gia' successo.

   ⚠️ PERCHE' LE TAPPE IN MEZZO (rampa rifatta il 2026-10-11). Da #14181e al nero ci sono **30 unita'** di
   salto: il dislivello piu' grosso di tutto il sito — le altre fasce ne
   hanno sei. Una rampa dritta da 96 px cambiava pendenza di colpo alle due
   estremita', e l'occhio quello spigolo lo legge come una riga anche quando
   i colori non fanno nessun gradino (si chiama banda di Mach: non c'e', ma
   si vede). Le cinque tappe disegnano una **smoothstep**: parte piano,
   scende in mezzo, arriva piano. Niente spigoli, niente riga.
   ⚠️ E dura **340 px** (era 96, poi 240): su un salto cosi' grosso lo
   spazio serve, e l'utente l'ha voluta ancora piu' alta.
   ⚠️ Piu' di cosi' non si puo' allungare: il piede piu' corto del sito e'
   quello della home a finestra larga, **401 px**. A 340 restano una
   sessantina di pixel di nero pieno in fondo; a 400 non ci arriverebbe mai.
   ⚠️ I numeri non sono a occhio: sono `#14181e` moltiplicato per
   `1 - smoothstep(t)` a un quinto per volta. */
.pie {
  background: #000;
  color: var(--testo-3); padding: 64px 0 28px; font-size: 15px;
  /* ⚠️ Niente `border-top`: era l'ultima riga rimasta, una striscia chiara in
     trasparenza proprio dove la sfumatura doveva far sparire il confine. Una
     sfumatura con sopra una riga non e' una sfumatura. */
}
.pie h3 { color: #fff; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.pie a { color: #c9d7e9; }
.pie a:hover { color: #fff; }
/* ⚠️ QUATTRO colonne, non tre: i blocchi sono logo, Sedi, Contatti e Orari.
   Con tre, il quarto andava a capo e si piazzava sotto al logo lasciando mezzo
   piede vuoto a destra — sembrava un problema di allineamento ed era un conto
   sbagliato. Gli orari sono il blocco piu' largo (tre gruppi affiancati) e
   prendono un po' piu' di spazio degli altri due. */
.pie .griglia-pie { display: grid; gap: 36px 30px; grid-template-columns: 1.5fr .9fr .9fr 1.15fr; align-items: start; }
/* ⚠️ Stringendo si va a DUE colonne, non a tre: con tre, dei quattro blocchi
   uno ricadeva a capo da solo — lo stesso difetto di prima, solo piu' stretto.
   A due restano due righe piene e allineate. */
@media (max-width: 1200px) { .pie .griglia-pie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; } }
@media (max-width: 560px) { .pie .griglia-pie { grid-template-columns: minmax(0, 1fr); } }
/* nella colonna stretta del piede i tre gruppi stanno piu' vicini */
.pie .orari { gap: 4px 22px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 10px; }
.pie .logo-pie { width: 248px; margin-bottom: 20px; }
/* Gli orari vanno in orizzontale: giorno sopra, fascia sotto, e i tre gruppi
   affiancati. Il trucco e' 'grid-auto-flow: column' con due righe fisse: dt
   finisce in alto, dd sotto, e ogni coppia forma una colonna. */
.orari {
  display: grid; grid-auto-flow: column; grid-auto-columns: max-content;
  grid-template-rows: auto auto; gap: 4px 34px; align-items: start;
}
.orari dt { font-weight: 650; color: #fff; }
.orari dd { margin: 0; }
/* Su schermo stretto tre colonne non ci stanno: si torna a giorno / orario incolonnati. */
@media (max-width: 620px) {
  .orari { grid-auto-flow: row; grid-template-columns: auto 1fr; grid-template-rows: none; gap: 6px 16px; }
}

.social { display: flex; gap: 10px; margin-top: 20px; }
.social a {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--bordo);
}
.social a:hover { background: var(--cromo); border-color: var(--cromo); }
.social svg { width: 19px; height: 19px; fill: #fff; transition: fill .15s; }
.social a:hover svg { fill: #14181e; }

/* ⚠️ LE INSEGNE DEL PIEDE: Klarna e il punto iliad (2026-10-12).
   Stanno **dentro alla riga dei social**, di fila dopo l'ultima icona, con un
   po' d'aria in mezzo. Non sono una seconda fila: sono due marchi accanto ai
   quattro bollini, e si leggono come una cosa sola.
   ⚠️ **Niente didascalia scritta, e non e' una dimenticanza.** La prima
   colonna del piede misura **399 px**; i quattro social ne prendono 198, e di
   quello che resta i due loghi ne occupano circa 120. Per «Paga anche a
   rate» e «Punto vendita ufficiale - Merulana» non c'e' spazio senza mandare
   tutto a capo, ed e' proprio la riga sola che l'utente ha chiesto. Le frasi
   vivono in `alt` e `title`: le legge chi passa col mouse e le legge un
   lettore di schermo.
   ⚠️ I due loghi hanno proporzioni diversissime (45x19 contro 600x248):
   si allineano alla stessa **altezza**, non alla stessa larghezza, se no uno
   dei due pesa il doppio dell'altro. */
.social { flex-wrap: wrap; }
.pie-insegne {
  display: inline-flex; align-items: center; gap: 12px;
  margin-left: 8px;          /* + i 10 px di gap dei social = 18 px d'aria */
}
.pie-insegne img { width: auto; flex: none; display: block; }

/* ⚠️ IL BADGE KLARNA SI ARRANGIA DA SOLO: e' gia' un rettangolo rosa
   arrotondato col suo margine interno, e va messo e basta.
   ⚠️ E' il file UFFICIALE preso dal CDN di Klarna, non un disegno rifatto:
   il carattere della scritta e' su misura e una copia a occhio si vede. */
.pie-insegne img[alt^="Klarna"] { height: 24px; }

/* ⚠️ IL LOGO ILIAD NO, E VA SU UNA TARGHETTA. Il file e' il marchio
   **rosso su bianco** (non bianco su trasparente, come credevo prima di
   aprirlo), ritagliato **senza un pixel di margine**: appoggiato cosi' sul
   piede nero sarebbe un rettangolo bianco nudo con le lettere che toccano il
   bordo. Il fondo bianco con l'aria intorno e' il modo normale di posare un
   marchio rosso-su-bianco su una pagina scura.
   ⚠️ `content-box`: i 5 px di aria si SOMMANO ai 14 dell'altezza, cosi' la
   targhetta misura 24 px in tutto e pesa quanto il badge Klarna di fianco.
   ⚠️ Niente `opacity`: smorzato su fondo bianco diventa grigio sporco. */
.pie-insegne img[alt^="Punto vendita"],
.pie-insegne img[alt^="Official iliad"] {
  height: 14px; box-sizing: content-box;
  background: #fff; padding: 5px 8px; border-radius: 6px;
}

.chiusura {
  border-top: 1px solid var(--bordo); margin-top: 44px; padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: 14px;
  /* ⚠️ Spazio per i due tasti appiccicati in basso a destra: arrivati in fondo
     alla pagina si piazzano proprio qui, e «Informativa privacy» finiva sotto
     al tasto di WhatsApp. Misurato: il verde e' alto 56 e sta a 18 dal fondo,
     quello dell'assistente gli sta sopra e arriva a 129. */
  padding-right: 200px;
}
@media (max-width: 640px) {
  /* ⚠️ Impilata, la riga deve passare SOTTO ai tasti, non di fianco: il
     posto a destra non c'e'. E 140 non e' un numero tondo a caso — il tasto
     dell'assistente, che e' quello piu' in alto dei due, arriva a 132 px dal
     fondo dello schermo. Con 96 il copyright ci finiva ancora sotto. */
  .chiusura { padding-right: 0; padding-bottom: 92px; }
}

/* ---------------- WhatsApp fisso ---------------- */

.wa-fisso {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff; font-weight: 700;
  padding: 14px 22px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.wa-fisso:hover { background: #1eb855; text-decoration: none; }
.wa-fisso svg { width: 24px; height: 24px; fill: #fff; }
@media (max-width: 640px) {
  .wa-fisso { padding: 0; width: 56px; height: 56px; justify-content: center; right: 14px; bottom: 14px; }
  .wa-fisso span { display: none; }
}

/* ⚠️ Col menu del telefono aperto i due tasti ci galleggiavano SOPRA: il menu
   scende dalla testata fino in fondo allo schermo, e il cerchio verde finiva
   accanto a «Preventivo». Spariscono, come gia' fanno col pannello aperto.
   Il `:has()` evita di toccare lo script del menu, che sta copiato dentro a
   22 pagine; su un browser che non lo capisce si torna a come era prima. */
body:has(.hamburger[aria-expanded="true"]) .wa-fisso,
body:has(.hamburger[aria-expanded="true"]) .ai-lancio { display: none; }

/* ⚠️ In partita i due tasti NON ci devono stare: il campo da gioco e' tutta
   la vetrina, e il cerchio verde galleggiava proprio nell'angolo in basso a
   destra — dove sul telefono si appoggia il pollice per guidare. Si rischiava
   di aprire WhatsApp invece di schivare. */
body.in-gioco .wa-fisso,
body.in-gioco .ai-lancio { display: none; }

/* ⚠️ Scorrendo in giu' i due tasti se ne vanno insieme alla testata, e
   tornano appena si risale (la classe la mette `testata.js`). Sul telefono
   stanno per forza sopra al testo: l'unico modo di non darci fastidio e'
   sparire mentre si legge. Su schermo grande non serve — li' c'e' spazio. */
@media (max-width: 640px) {
  .wa-fisso, .ai-lancio { transition: opacity .2s ease, transform .2s ease; }
  body.tasti-via .wa-fisso,
  body.tasti-via .ai-lancio { opacity: 0; transform: translateY(18px); pointer-events: none; }
}

/* ⚠️ Chi clicca «Chiedi un preventivo» in cima a una pagina dei guasti
   viene buttato in fondo: senza un segnale, dopo lo scatto non si capisce
   dove si e' finiti. La sezione d'arrivo si accende due secondi — due giri
   da un secondo — e poi torna normale. La classe la mette `testata.js`. */
@keyframes lampeggiaArrivo {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: inset 0 0 0 2px rgba(var(--tinta-rgb), .85), 0 0 70px rgba(var(--tinta-rgb), .28); }
}
#contatti.lampeggia { animation: lampeggiaArrivo 1s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { #contatti.lampeggia { animation: none; } }


/* ---------------- prova del controller (/console) ----------------
   ⚠️ Niente verdetti: si accende quello che risponde e si mostra il numero
   che la levetta manda a riposo. La diagnosi la fa chi guarda. */
.pad-prova { max-width: 1000px; margin: 0 auto; }
/* ⚠️ IL RIQUADRO TRATTEGGIATO E' LA RIGA, e il bordo sta qui, non sulla
   frase. Prima il tasto «Prova il gioco!» era un blocco in posizione
   assoluta appoggiato sopra al riquadro, e lo spazio per non finirgli sotto
   era un numero scritto a mano (`padding-right: 330px`): la frase restava
   centrata, andava a capo proprio sotto al tasto, e il tasto non era in
   mezzo ne' alla frase ne' al riquadro. Adesso sono due caselle della stessa
   riga, allineate al centro in verticale. */
.pad-riga {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 12px 18px;
  padding: 14px 18px; margin: 0 0 18px;
  border: 1px dashed var(--bordo-forte); border-radius: 14px;
  background: rgba(255, 255, 255, .03);
}
/* ⚠️ `1 1 260px`: la frase si prende tutto lo spazio che resta, e sotto ai
   260 px manda il tasto a capo da sola — niente media query da tenere
   d'accordo con la larghezza vera del tasto, che cambia con la lingua. */
.pad-stato {
  flex: 1 1 260px; margin: 0; text-align: left;
  color: var(--testo-2); font-size: 16px;
}
/* ⚠️ Finche' il tasto non c'e' (nessun controller, o la navicella non e'
   ancora arrivata) la frase torna in mezzo: da sola, allineata a sinistra in
   un riquadro largo, sembrerebbe dimenticata li'. */
.pad-riga:has(.pad-gioco[hidden]) .pad-stato,
.pad-riga:has([data-pad-vai][hidden]) .pad-stato { text-align: center; }
.pad-quadro { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; align-items: start; }
.pad-quadro[hidden] { display: none; }
.pad-blocco {
  background: var(--vetro); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 22px 24px;
}
.pad-blocco h3 {
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acciaio); margin: 0 0 14px;
}
.pad-blocco h3.pad-sotto { margin-top: 26px; }
.pad-griglia { display: flex; flex-wrap: wrap; gap: 8px; }
.pad-tasto {
  font-size: 13px; font-weight: 650; font-style: normal;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--bordo); color: var(--testo-3);
  background: rgba(255, 255, 255, .03);
  transition: background-color .08s linear, color .08s linear, border-color .08s linear;
}
/* ⚠️ Due stati diversi, e servono tutti e due: `giu` e' «lo stai premendo
   adesso», `visto` e' «questo l'hai gia' provato». Col solo lampeggio non si
   sa piu' quali tasti si sono controllati. */
.pad-tasto.visto { border-color: rgba(var(--tinta-rgb), .55); color: var(--tinta-2); }
.pad-tasto.giu { background: var(--tinta-2); border-color: var(--tinta-2); color: #10161d; }
.pad-azzera {
  font: inherit; font-size: inherit; color: var(--tinta-2);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.pad-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pad-barra i { flex: 1; display: block; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pad-barra u { display: block; height: 100%; width: 0; background: var(--tinta-2); text-decoration: none; }
.pad-eti { font-size: 13px; font-weight: 650; color: var(--testo-2); min-width: 58px; }
.pad-num { font-size: 13px; color: var(--acciaio); min-width: 86px; text-align: right; font-variant-numeric: tabular-nums; }
.pad-leve { display: flex; gap: 20px; flex-wrap: wrap; }
/* ⚠️ COLONNE FISSE, non `auto 1fr`. Col numero largo quanto il suo
   contenuto, passando da `0.00 · 0.00` a `-0.31 · 0.05` la scatola cresceva
   e spingeva via la levetta di fianco: muovendo una, l'altra ballava.
   (112 px e' il campo, 104 il numero piu' lungo possibile.) */
.pad-leva { display: grid; grid-template-columns: 112px 122px; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; }
.pad-campo {
  grid-row: span 2; position: relative; width: 112px; height: 112px;
  border: 1px solid var(--bordo); border-radius: 14px; background: rgba(255, 255, 255, .03);
  transition: border-color .12s linear;
}
.pad-campo.fuori-centro { border-color: var(--errore); }
/* ⚠️ Una CROCE tratteggiata che attraversa tutto il campo, non un
   cerchietto: si vede a colpo d'occhio se il pallino sta sull'incrocio
   (levetta a posto) o se se ne e' andato per conto suo. */
.pad-mira {
  position: absolute; inset: 0; border: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(255, 255, 255, .26) 50%, transparent 0) 0 50% / 9px 1px repeat-x,
    linear-gradient(to bottom, rgba(255, 255, 255, .26) 50%, transparent 0) 50% 0 / 1px 9px repeat-y;
}
.pad-pallino {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%; background: var(--tinta-2);
  box-shadow: 0 0 14px rgba(var(--tinta-rgb), .6);
}
.pad-leva .pad-eti { align-self: end; min-width: 0; }
.pad-leva .pad-num { align-self: start; text-align: left; min-width: 0; white-space: nowrap; }
.pad-touch { font-size: 14px; color: var(--testo-2); }
/* ⚠️ 16:9 come il touchpad vero (1920 x 1080): in un riquadro schiacciato
   il movimento in verticale si vedeva appena, e sembrava che il dito andasse
   solo a destra e a sinistra.
   ⚠️ `margin: ... auto`: il riquadro sta IN MEZZO alla colonna. Appoggiato a
   sinistra lasciava un buco di spazio vuoto a destra, e il blocco sembrava
   sbilanciato accanto agli altri due. */
.pad-touch .pad-campo {
  width: 100%; max-width: 236px; height: 133px;
  border-radius: 10px; margin: 12px auto 0;
}
/* ⚠️ Il tasto del permesso sta in mezzo anche lui, e piu' piccolo: dentro a
   una colonna da 290 px un tasto da 16 px con 28 di fianco andava a capo su
   due righe. `fit-content` perche' `margin: auto` da solo non centra un
   `inline-flex` che si allarga. */
.pad-touch .btn {
  display: flex; width: fit-content; margin: 12px auto 0;
  font-size: 14px; padding: 11px 20px;
}
.pad-touch .pad-campo .pad-mira { inset: 10px; border-radius: 8px; }
/* ⚠️ L'invito al gioco compare SOLO con un controller collegato: lo scopre
   `prova-pad.js` e toglie l'attributo `hidden`. Sta nella stessa riga della
   frase «Collegato: ...», a destra. */
.pad-gioco {
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto; padding: 0; margin: 0;
}
.pad-gioco[hidden] { display: none; }
/* ⚠️ La tela della navicella e' grande quanto la FINESTRA e sta sopra alla
   pagina: `pointer-events: none` perche' il sito resti usabile mentre vola,
   e z-index 58 per passare DIETRO ai due tasti appiccicati in basso a destra
   (60 e 61), che devono restare cliccabili. */
.pad-volo {
  position: fixed; left: 0; top: 0; z-index: 58;
  pointer-events: none;
}
/* ⚠️ `[hidden]` da solo NON basta su un `.btn`. Il browser lo mette a
   `display: none` nel suo foglio di base, ma `.btn { display: inline-flex }`
   e' una regola nostra e vince. Si vedeva dopo aver dato il permesso al
   touchpad: il tasto «Leggi il dito» restava in pagina accanto alla scritta
   «Sto leggendo il dito», e sembrava che non avesse funzionato niente.
   Vale per TUTTI i tasti del sito, non solo per questi due. */
.btn[hidden] { display: none; }
/* il nome della stagione sopra alla classifica mondiale */
.gioco-stagione { margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--acciaio); }

.pad-scelta {
  display: block; width: 100%; margin: 12px 0; font: inherit; font-size: 14px;
  padding: 10px 12px; border-radius: 10px; color: #fff;
  background-color: rgba(12, 16, 22, .6); border: 1px solid var(--bordo-forte);
}
.pad-scelta[hidden] { display: none; }
.pad-blocco .pad-barra { margin-top: 14px; }
.pad-vibra { margin-top: 2px; }
@media (max-width: 560px) { .pad-blocco { padding: 18px 16px; } }

/* ---------------- testi lunghi ---------------- */

.testo-lungo { max-width: 82ch; margin: 0 auto; }
.testo-lungo h2 { font-size: 26px; margin-top: 1.9em; }
.testo-lungo h3 { margin-top: 1.6em; }
.testo-lungo ul { padding-left: 22px; }
.testo-lungo li { margin-bottom: .55em; }

.mappa { border: 0; width: 100%; height: 430px; border-radius: var(--raggio); filter: invert(.92) hue-rotate(180deg); }


/* ---------------- sedi (pagina Dove siamo) ---------------- */

.targhetta {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid var(--bordo-forte); color: var(--acciaio);
}
.targhetta-attiva { background: rgba(47,208,127,.14); border-color: rgba(47,208,127,.45); color: #7cf0b5; }

.sedi { display: grid; gap: 34px; }
.sede {
  display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1.15fr); gap: 34px; align-items: center;
  background: var(--vetro);
  -webkit-backdrop-filter: var(--sfoca); backdrop-filter: var(--sfoca);
  border: 1px solid var(--bordo); border-radius: var(--raggio-g);
  padding: clamp(24px, 3vw, 40px); position: relative; overflow: hidden;
  box-shadow: var(--rilievo);
}
/* La sede che non si vuole ancora svelare: la scheda resta dov'e', pronta e
   completa, ma sotto a un pannello opaco. Per scoprirla si toglie la classe
   `sede-velata` dall'`<article>` — niente altro da ricostruire.
   ⚠️ `pointer-events: none` non e' un dettaglio: senza, la mappa di Google
   resterebbe trascinabile sotto al velo e i link si premerebbero al buio. */
/* Il velo piccolo, per una frase o una riga di elenco: stesso principio del
   velo grande, ma cucito su un pezzo di testo.
   ⚠️ Qui NON si usa `filter: blur()` sull'elemento: sfocherebbe anche il
   pannello `::after` che ci va sopra. Si rende il testo trasparente e lo si
   sfuma con l'ombra — e lo scritto sopra resta nitido. */
.velata {
  position: relative;
  /* ⚠️ Un <span> velato va reso blocco: a testo corrente la frase si spezza su
     due righe e il pannello opaco si sdoppia, lasciando intravedere il mezzo
     in mezzo. Da blocco e' un rettangolo solo. */
  display: inline-block;
  color: transparent !important;
  text-shadow: 0 0 9px rgba(205, 214, 225, .7);
  user-select: none;
}
.velata * { color: transparent !important; text-shadow: inherit; }
.velata a { pointer-events: none; border-color: transparent !important; }
.velata::after {
  content: attr(data-velo);
  position: absolute; inset: -3px -9px;
  display: grid; place-items: center;
  background: rgba(8, 13, 20, .86);
  border: 1px solid var(--bordo); border-radius: 8px;
  color: var(--acciaio); text-shadow: none;
  font-size: .8em; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}

.sede-velata > * { filter: blur(9px); pointer-events: none; user-select: none; }
.sede-velata::after {
  content: attr(data-velo);
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; text-align: center;
  padding: clamp(20px, 4vw, 40px);
  background: rgba(8, 13, 20, .74);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--cromo); font-weight: 700; letter-spacing: .02em;
  font-size: clamp(16px, 2.2vw, 22px); line-height: 1.5;
}

.sede h2 { margin: 14px 0 6px; }
.sede .indirizzone { font-size: 20px; line-height: 1.4; margin-bottom: 24px; }
.sede .indirizzone a { color: #fff; border-bottom: 1px solid var(--bordo-forte); }
.sede .indirizzone a:hover { border-color: var(--cromo); text-decoration: none; }
.sede h3 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--acciaio); margin-bottom: 12px; }
.sede-mappa iframe {
  display: block; width: 100%; height: 380px; border: 0;
  border-radius: var(--raggio); background: var(--carta-2);
}
@media (max-width: 900px) {
  .sede { grid-template-columns: 1fr; }
  .sede-mappa iframe { height: 280px; }
}


/* ---------------- passi numerati ---------------- */

.passi {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  counter-reset: passo;
}
.passi li {
  position: relative; overflow: hidden;
  background: var(--vetro);
  -webkit-backdrop-filter: var(--sfoca); backdrop-filter: var(--sfoca);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 30px 26px 26px;
  box-shadow: var(--rilievo);
}
.passi li::after {                     /* filo che collega i passi su schermo largo */
  content: ''; position: absolute; right: -22px; top: 52px; width: 22px; height: 1px;
  background: var(--bordo-forte);
}
.passi li:last-child::after { display: none; }
@media (max-width: 1100px) { .passi li::after { display: none; } }
.passo-n {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px;
  border-radius: 12px; background: var(--cromo); color: #14181e;
  font-weight: 800; font-size: 18px;
}
.passi h3 { margin-bottom: 8px; }
.passi p { color: var(--testo-2); font-size: 15.5px; margin: 0; }

.spunte-fitte { margin-top: 14px; }
.spunte-fitte li { margin-bottom: 7px; font-size: 14.5px; color: var(--testo-2); }

/* ---------------- Prova il tuo dispositivo ---------------- */

.avviso-privacy {
  background: rgba(47, 208, 127, .10); border: 1px solid rgba(47, 208, 127, .35);
  border-radius: var(--raggio); padding: 18px 22px; color: #b8f0d3; font-size: 15.5px;
  -webkit-backdrop-filter: var(--sfoca); backdrop-filter: var(--sfoca); box-shadow: var(--rilievo);
}
.avviso-privacy strong { color: #d9fbe9; }

.dati-dispositivo {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; margin: 0;
  font-size: 15px;
}
.dati-dispositivo dt { color: var(--acciaio); }
.dati-dispositivo dd { margin: 0; color: #fff; font-variant-numeric: tabular-nums; }

.prova { position: relative; }
.prova .sub-prova { color: var(--acciaio); font-size: 14px; margin: 0 0 10px; }
.prova .spiega { color: var(--testo-2); font-size: 15px; flex: 1; }
.prova .btn { margin-top: 20px; }

.esito-prova {
  position: absolute; top: 22px; right: 22px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bordo-forte);
  background: rgba(255,255,255,.05); color: var(--acciaio);
}
.esito-prova[data-stato="ok"] { background: rgba(47,208,127,.16); border-color: rgba(47,208,127,.5); color: #7cf0b5; }
.esito-prova[data-stato="ko"] { background: rgba(255,107,129,.14); border-color: rgba(255,107,129,.5); color: #ffa8b5; }

.riepilogo {
  position: relative; overflow: hidden;
  margin-top: 44px; background: var(--vetro);
  -webkit-backdrop-filter: var(--sfoca); backdrop-filter: var(--sfoca);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-g); padding: clamp(24px, 3vw, 38px);
  box-shadow: var(--rilievo);
}

/* palcoscenico a tutto schermo */
.palco {
  position: fixed; inset: 0; z-index: 90; background: var(--nero);
  display: flex; flex-direction: column;
}
.palco[hidden] { display: none; }
.palco-barra {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px clamp(14px, 3vw, 26px); border-bottom: 1px solid var(--bordo); background: var(--fondo);
}
.palco-barra .sp { flex: 1; }
.palco-titolo { font-weight: 700; color: #fff; font-size: 17px; }
.palco-barra .btn { padding: 9px 16px; font-size: 14px; }
.palco-corpo { flex: 1; display: flex; align-items: stretch; justify-content: stretch; overflow: auto; }
.palco-aiuto {
  margin: 0; padding: 10px clamp(14px, 3vw, 26px) 14px; text-align: center;
  color: var(--acciaio); font-size: 14px; border-top: 1px solid var(--bordo); background: var(--fondo);
}

.tela-colore { flex: 1; position: relative; cursor: pointer; }
.tela-etichetta {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  font-size: 14px; font-weight: 600; text-align: center; width: 100%;
  color: var(--acciaio); pointer-events: none;
}

.griglia-touch {
  flex: 1; display: grid; gap: 2px; padding: 2px; touch-action: none;
}
.griglia-touch i { background: var(--carta-2); border-radius: 3px; transition: background .1s; }
.griglia-touch i.on { background: var(--cromo); }

.zona-multitouch {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: var(--carta); touch-action: none; user-select: none;
}
.numerone { font-size: clamp(70px, 22vw, 160px); font-weight: 800; color: #fff; line-height: 1; }
.numerone-piccolo { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 6px; text-align: center; }

.centro-palco {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 26px; text-align: center;
}
.barra-livello {
  width: min(320px, 80vw); height: 26px; border-radius: 999px;
  background: var(--carta-2); border: 1px solid var(--bordo-forte); overflow: hidden;
}
.barra-livello i { display: block; height: 100%; width: 0; background: var(--cromo); transition: width .05s linear; }
.anteprima-video {
  width: min(520px, 86vw); max-height: 56vh; border-radius: var(--raggio);
  background: #000; object-fit: cover;
}

/* ---------------- valutazione iPhone ---------------- */

.eroe-valuta::before { opacity: .07; }

.valutatore {
  position: relative;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 0;
  background: var(--vetro);
  -webkit-backdrop-filter: var(--sfoca); backdrop-filter: var(--sfoca);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-g); overflow: hidden;
  box-shadow: var(--rilievo);
}
.valuta-form { padding: clamp(26px, 3.4vw, 46px); }
.valuta-esito {
  padding: clamp(26px, 3.4vw, 46px);
  background: linear-gradient(150deg, #2b323d 0%, #1b2029 60%, #14181e 100%);
  border-left: 1px solid var(--bordo);
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 900px) {
  .valutatore { grid-template-columns: 1fr; }
  .valuta-esito { border-left: 0; border-top: 1px solid var(--bordo); }
}

.passo-valuta { margin-bottom: 30px; }
.passo-valuta[hidden] { display: none; }
.etichetta-passo {
  display: flex; align-items: center; gap: 12px;
  font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 16px;
}
.pallino {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; background: var(--cromo); color: #14181e; font-size: 15px; font-weight: 800;
}

.scelta-grande {
  width: 100%; font: inherit; font-size: 17px; font-weight: 600;
  padding: 16px 18px; border-radius: 12px;
  border: 1px solid var(--bordo-forte); color: #fff;
  background-color: rgba(12, 16, 22, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0c4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 20px;
  padding-right: 48px;
}
/* ⚠️ Niente `cursor: pointer` sulla tendina ne' sulla riga della
   supervalutazione, e non e' una dimenticanza. Sono due fasce larghe quanto il
   modulo: scorrendo la pagina col mouse fermo, il cursore passava
   mano-freccia-mano-freccia quattro o cinque volte in mezzo schermo, e si
   vedeva. Un `<select>` e l'etichetta di una casella di spunta, in qualunque
   altro sito, hanno la freccia: rimessa quella, il modulo sta fermo. La mano
   resta dov'e' davvero un bottone — i pillolini e il tasto in fondo. */
/* ⚠️ DENTRO AL VALUTATORE IL CURSORE NON CAMBIA FORMA, e non e' una svista.
   I comandi sono fasce larghe quanto il modulo — tendina, pillolini della
   memoria, pillolini delle condizioni, riga della supervalutazione — separate
   da intestazioni e spazi vuoti. Scorrendo la pagina col mouse fermo il
   cursore faceva mano-freccia-mano-freccia CINQUE volte in mezzo schermo:
   l'utente l'ha segnalato due volte, e la seconda dopo che avevo tolto la
   mano solo da tendina e supervalutazione (ne restavano due, i pillolini).
   Qui si toglie a tutto il riquadro. I pillolini restano riconoscibili: si
   accendono al passaggio e sono gli unici bottoni della colonna.
   ⚠️ Il tasto in fondo al riquadro del prezzo tiene la mano: e' UNO, sta
   nell'altra colonna e non ha niente sopra o sotto con cui alternarsi. */
#valutatore, #valutatore * { cursor: default; }
#valutatore .btn { cursor: pointer; }
#valutatore :disabled { cursor: not-allowed; }

.scelta-grande:focus { border-color: var(--cromo); outline: none; }
.scelta-grande:disabled { opacity: .5; cursor: not-allowed; }

.segmenti { display: flex; flex-wrap: wrap; gap: 10px; }
.segmento {
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 12px 20px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid var(--bordo-forte); color: var(--testo-2);
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.segmento:hover { border-color: var(--cromo); color: #fff; transform: translateY(-1px); }
.segmento.sel { background: var(--cromo); border-color: var(--cromo); color: #14181e; }

.super {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 8px;
  padding: 18px 20px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px dashed var(--bordo-forte);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.super[hidden] { display: none; }
.super input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--cromo); }
.super strong { display: block; color: #fff; margin-bottom: 3px; }

.euro-grande {
  font-size: clamp(52px, 9vw, 88px); font-weight: 800; color: #fff;
  line-height: 1; letter-spacing: -.045em; margin: 10px 0 6px;
  font-variant-numeric: tabular-nums;
}
.esito-vuoto .euro-grande { color: var(--testo-3); }
.esito-vuoto p { color: var(--testo-3); }
@keyframes pulsaPrezzo { from { transform: scale(.94); opacity: .5; } to { transform: none; opacity: 1; } }
.euro-grande.pulsa { animation: pulsaPrezzo .28s cubic-bezier(.22,.61,.36,1); }

.v-dettaglio { color: var(--testo-2); font-size: 15.5px; margin-bottom: 20px; }
.v-dettaglio .piu {
  display: inline-block; margin-left: 6px; padding: 3px 10px; border-radius: 999px;
  background: rgba(47,208,127,.16); border: 1px solid rgba(47,208,127,.45); color: #7cf0b5;
  font-size: 13px; font-weight: 700;
}
.esito-errore h3 { color: #ffa8b5; }


/* ---------------- pagine software ---------------- */

.prodotto { padding-top: 30px; }
.prodotto .targhetta { position: absolute; top: 22px; right: 22px; }
.prod-logo { width: 62px; height: 62px; object-fit: contain; border-radius: 14px; margin-bottom: 18px; }
.prodotto-soon { opacity: .82; }
.prodotto-soon:hover { opacity: 1; }
/* ⚠️ `auto`, non 22px: le descrizioni dei prodotti sono lunghe diverse, e col
   margine fisso i cinque tasti finivano a cinque altezze diverse. Cosi' si
   appoggiano tutti in fondo al riquadro, e la fila e' dritta. */
.prodotto .btn, .prodotto [aria-disabled] { margin-top: auto; align-self: flex-start; }
.prodotto p { margin-bottom: 22px; }
[aria-disabled="true"] { cursor: default; opacity: .7; }

.prod-logo-grande { width: 76px; height: 76px; object-fit: contain; border-radius: 18px; margin-bottom: 14px; }
.briciole { font-size: 14px; color: var(--acciaio); margin-bottom: 18px; }
.briciole a { color: var(--acciaio); }
.briciole a:hover { color: #fff; }

.ico-tonda {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px;
  display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid var(--bordo);
}
.ico-tonda svg { width: 22px; height: 22px; stroke: var(--cromo); fill: none; stroke-width: 1.7; }

.piano { text-align: center; align-items: center; }
.piano h3 { color: var(--acciaio); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.euro-piano { font-size: 44px; font-weight: 800; color: #fff; letter-spacing: -.04em; line-height: 1.1; margin: 6px 0 4px; }
.piano p { margin-bottom: 0; }
.piano .btn { align-self: stretch; margin-top: 22px; }
.piano-evidenza { border-color: rgba(255,255,255,.30); box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 20px 50px rgba(0,0,0,.45); }

/* ⚠️ La targhetta sta in alto AL CENTRO, e il riquadro tiene lo spazio per lei
   anche quando non ce l'ha. Prima era in alto a destra, sovrapposta al titolo:
   il titolo e' centrato e largo quanto il riquadro, quindi appena la colonna si
   stringeva «PIU' CONVENIENTE» finiva sopra a «6 MESI». */
.piano { padding-top: 54px; }
.piano .targhetta { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* I piani sono quattro: quattro colonne, se no il quarto resta solo in fondo. */
.griglia-piani { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .griglia-piani { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .griglia-piani { grid-template-columns: 1fr; } }


/* servizi: una riga larga, non una colonna */
.servizi-riga {
  display: flex; flex-wrap: wrap; gap: 10px 12px;
  margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--bordo);
}
.servizi-riga a {
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--bordo);
  color: #d3dfee; font-size: 14.5px; font-weight: 600; white-space: nowrap;
}
.servizi-riga a:hover { background: var(--cromo); border-color: var(--cromo); color: #14181e; text-decoration: none; }
.chiusura { margin-top: 30px; }

/* prodotto in evidenza, con alone: al posto della vecchia foto dello schermo rotto */
.vetrina-apple {
  position: relative; margin: 0; display: flex; justify-content: center; isolation: isolate;
}
.vetrina-apple::before {
  content: ''; position: absolute; z-index: -1; inset: 6% 12% 10%;
  background: radial-gradient(closest-side, rgba(170,195,230,.22), transparent 72%);
  filter: blur(6px);
}
.vetrina-apple img {
  max-height: 520px; width: auto;
  filter: drop-shadow(0 34px 60px rgba(0,0,0,.62));
}

/* ---------------- esploso: i pezzi in piano ---------------- */

/* ⚠️ Sfuma SOLO in basso. Sopra all'esploso c'e' sempre la testata di
   pagina, che e' gia' nera: sfumando anche li' si aprirebbe una valle
   chiara in mezzo a due fasce dello stesso colore — piu' brutta della riga
   che si voleva togliere. */
.esploso {
  position: relative; height: 170vh;
  /* ⚠️ Anche qui il colore d'arrivo e' una variabile, come per l'eroe e la
     testata: se un giorno dopo l'esploso ci finisse una fascia nera, la
     rampa si spegne da sola invece di fare un gradino. */
  --sfuma-col: var(--fondo);
  background: linear-gradient(180deg,
    var(--nero) 0, var(--nero) calc(100% - 110px), var(--sfuma-col) 100%);
}
.esploso:has(+ .sezione-nera) { --sfuma-col: var(--nero); }
/* Il pannello si aggancia SOTTO la testata, non a filo pagina: anche la testata
   e' appiccicata, e con top:0 i primi 97 px della scena finivano dietro al menu.
   Su desktop non si vedeva perche' avanzava spazio; su telefono tagliava il 3D. */
.esploso-fisso {
  position: sticky; top: var(--testata); height: calc(100vh - var(--testata));
  min-height: 460px;
  display: flex; align-items: center; overflow: hidden;
}
.esploso-fisso::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 46% at 62% 46%, rgba(150,180,225,.13), transparent 72%),
    radial-gradient(50% 44% at 6% 16%, rgba(110,140,185,.09), transparent 72%);
}
.esploso-griglia {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: .74fr 1.26fr; gap: 34px; align-items: center; width: 100%;
}
.esploso-intro { color: var(--testo-2); font-size: 17px; }

.esploso-passi { list-style: none; margin: 16px 0 18px; padding: 0; }
/* Le voci restano accese man mano che si scorre, quindi a fine corsa sono
   aperte tutte e otto: spaziature strette o l'elenco non ci sta nel pannello. */
.esploso-passi li {
  padding: 4px 0 4px 14px; border-left: 2px solid var(--bordo);
  opacity: .34; transition: opacity .3s ease, border-color .3s ease;
}
.esploso-passi li.attiva { opacity: 1; border-color: var(--cromo); }
.esploso-passi strong { display: block; color: #fff; font-size: 14px; line-height: 1.3; }
.esploso-passi span { color: var(--testo-2); font-size: 13px; line-height: 1.35; }
.esploso-passi li:not(.attiva) span { display: none; }

/* Finestra bassa: con tutte le voci aperte l'elenco non ci starebbe. */
@media (max-height: 840px) {
  .esploso-passi { margin: 10px 0 12px; }
  .esploso-passi li { padding: 2px 0 2px 12px; }
  .esploso-passi strong { font-size: 13px; }
  .esploso-passi span { font-size: 12px; }
  .esploso-intro { font-size: 14px; margin: 6px 0 0; }
  .esploso-testi h2 { font-size: clamp(22px, 2.4vw, 30px); }
}

/* Finestra molto bassa (netbook, browser con molte barre): l'invito a
   scorrere lo si capisce dal movimento, l'elenco no — quindi cede l'invito. */
@media (max-height: 640px) {
  .esploso-intro { display: none; }
  .esploso-passi { margin: 4px 0 6px; }
}

.esploso-scena { position: relative; height: min(76vh, 680px); min-height: 420px; }
/* ⚠️ LA TELA STA SU UN LIVELLO SUO (2026-10-13), e non e' un vezzo.
   La tela si ridisegna a ogni fotogramma mentre si scorre. Senza un livello
   proprio, ogni suo ridisegno sporca il livello che la contiene — il
   pannello appiccicato, con dentro il titolo, l'elenco dei pezzi, la barra di
   avanzamento e due aloni radiali — e il browser deve ridipingere tutto
   quello. Su Safari, che durante lo scorrimento lavora sul filo principale
   piu' di Chrome, e' esattamente il punto dove si vedono gli scatti.
   `translateZ(0)` + `will-change: transform` la mandano sul suo livello: da
   li' in poi il suo ridisegno non tocca nessun altro.
   ⚠️ `will-change` si mette solo qui e sul ventaglio di /valutazioni: ogni
   livello in piu' costa memoria video, e metterlo a pioggia peggiora invece
   di migliorare.
   ⚠️ Nessun cambio d'aspetto: non c'e' nessuna trasformazione vera, solo la
   promozione. */
#esploso-tela {
  display: block; width: 100%; height: 100%;
  transform: translateZ(0);
  will-change: transform;
}
/* ⚠️ E il pannello si tiene i suoi ridisegni dentro: `contain: paint` dice
   al browser che niente di quello che sta qui dentro esce dai suoi bordi,
   quindi non deve andare a controllare il resto della pagina. */
.esploso-fisso { contain: paint; }

/* Etichette dei pezzi: sovrapposte alla tela, posizionate dal JS proiettando
   la posizione 3D di ogni pezzo. Il trattino le collega al pezzo. */
.esploso-eti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.esploso-eti b {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cromo); white-space: nowrap;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(20, 25, 32, .72); border: 1px solid rgba(233, 238, 245, .18);
  backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.esploso-eti i { position: absolute; width: 1px; background: linear-gradient(rgba(233,238,245,.05), rgba(233,238,245,.42)); }
.esploso-eti u { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2px; border-radius: 50%; background: var(--cromo); box-shadow: 0 0 8px rgba(233,238,245,.6); }
@media (max-width: 1000px) { .esploso-eti b { font-size: 10px; padding: 3px 7px; } }





.esploso-avanzamento {
  position: absolute; right: -6px; top: 8%; bottom: 8%; width: 3px;
  background: var(--bordo); border-radius: 2px; overflow: hidden;
}
.esploso-avanzamento i { display: block; width: 100%; height: 0; background: var(--cromo); }

@media (max-width: 1000px) {
  .esploso { height: 160vh; }
  .esploso-griglia { grid-template-columns: 1fr; gap: 14px; }
  .esploso-scena { height: min(44vh, 460px); min-height: 260px; order: -1; }
  .pz-eti { font-size: 9px; padding: 3px 7px; top: calc(100% + 5px); }
  /* ⚠️ In colonna unica resta SOLO l'immagine che si smonta: via l'elenco
     delle otto parti e via l'invito a scorrere. Erano otto righe da 13 px
     schiacciate sotto a una tela alta 34vh, e si portavano via meta' pannello
     per dire quello che l'immagine sta gia' mostrando. Con loro fuori la tela
     passa da 34vh a 64vh — su un telefono da 844 px sono 490 invece di 287.
     ⚠️ L'elenco si NASCONDE, non si toglie dall'HTML: lo script ci scrive
     sopra la voce corrente mentre si scorre, e sopra i 1000 px si vede. */
  .esploso-passi { display: none; }
  .esploso-intro { display: none; }
  .esploso-testi h2 { font-size: clamp(21px, 6vw, 28px); }
}
/* Telefoni corti e tablet in orizzontale: il pannello e' alto una schermata e
   basta poco per non farci stare scena piu' elenco. Qui si stringe ancora. */
@media (max-height: 800px) {
  .esploso-intro { display: none; }
  .esploso-passi { margin: 8px 0 10px; }
  .esploso-passi li { padding: 1px 0 1px 12px; }
  .esploso-passi span { font-size: 12px; line-height: 1.3; }
  .esploso-testi h2 { font-size: clamp(20px, 2.2vw, 26px); }
}
/* Schermo basso e stretto (telefono in orizzontale): senza l'elenco sotto la
   tela puo' restare generosa lo stesso, ma non puo' prendersi due terzi di
   un'altezza che gia' non c'e'. */
@media (max-width: 1000px) and (max-height: 720px) {
  .esploso-scena { height: min(56vh, 420px); min-height: 170px; }
}

/* ⚠️ Telefono CORICATO. Le regole di sopra ragionano in larghezza, e un
   telefono in orizzontale e' largo: prendeva la colonna singola (scena sopra,
   elenco sotto) con la scena al 20% di una finestra alta 390 px. La tela
   veniva 761 x 115 e il modello, inquadrato in altezza, restava grande come
   un'unghia. Coricati si torna a DUE colonne — elenco a sinistra, scena a
   destra alta quanto tutto il pannello: la tela passa a ~400 x 330 e il pezzo
   e' quasi tre volte piu' alto in pixel.

   ⚠️ La corsa si scrive in pixel e non in `vh`: in orizzontale 160vh sono
   624 px e, tolto il pannello, restavano 290 px per smontare tutto — un
   lampo. Con `100vh + 820px` la corsa e' sempre quella, in piedi o coricati. */
@media (max-width: 1000px) and (max-height: 560px) and (orientation: landscape) {
  .esploso { height: calc(100vh + 820px); }
  .esploso-fisso { min-height: 0; }
  .esploso-griglia { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 16px; }
  .esploso-scena { height: calc(100vh - var(--testata) - 16px); min-height: 0; order: 0; }
  .esploso-testi h2 { font-size: 18px; line-height: 1.2; }
  .esploso-passi { margin: 7px 0 0; }
  .esploso-passi li { padding: 1px 0 1px 10px; }
  .esploso-passi strong { font-size: 11.5px; line-height: 1.25; }
  .esploso-passi li.corrente span { font-size: 11px; line-height: 1.25; }
  .esploso-eti b { font-size: 9px; padding: 2px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .esploso { height: auto; }
  .esploso-fisso { position: static; height: auto; padding: 70px 0; }
}

/* ---------------- moduli: privato o azienda, e l'avviso in spedizione ---------------- */

/* Le due pastiglie Privato / Azienda. La scelta decide se l'indirizzo
   completo e' obbligatorio: per un privato che spedisce da solo non serve. */
.etichetta-tipo { font-weight: 650; font-size: 14.5px; margin-bottom: 8px; color: #dce6f3; }
.tipo-cliente { display: flex; flex-wrap: wrap; gap: 12px; }
.tipo-cliente label {
  display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer;
  padding: 12px 20px; border: 1px solid var(--bordo-forte); border-radius: 11px;
  background: rgba(12, 16, 22, .55); font-size: 15.5px; font-weight: 600;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tipo-cliente input { width: 19px; height: 19px; flex: none; accent-color: var(--cromo); }
.tipo-cliente label:has(input:checked) { border-color: var(--cromo); background: #1a1f27; }
.tipo-cliente label:focus-within { border-color: var(--cromo); }

/* l'asterisco dell'indirizzo: compare solo quando serve davvero */
.obbligo-azienda[hidden] { display: none; }

.avviso-attenzione {
  background: rgba(232, 132, 58, .10); border: 1px solid rgba(232, 132, 58, .40);
  border-radius: var(--raggio); padding: 18px 22px; margin: 0 auto 32px;
  max-width: 980px; color: #f0cdae; font-size: 15.5px; line-height: 1.55;
  -webkit-backdrop-filter: var(--sfoca); backdrop-filter: var(--sfoca);
  box-shadow: var(--rilievo);
}
.avviso-attenzione strong { color: #ffe3c9; }
.avviso-attenzione p { margin: 0; }
.avviso-attenzione p + p { margin-top: 10px; }

/* ---------------- valutazione: l'anteprima del telefono scelto ---------------- */

.v-anteprima { margin: 0 0 20px; display: flex; flex-direction: column; align-items: center; }
.v-anteprima[hidden] { display: none; }
.v-anteprima svg, .v-anteprima img {
  height: 200px; width: auto; max-width: 100%; display: block; object-fit: contain;
  filter: drop-shadow(0 20px 38px rgba(0, 0, 0, .55));
  animation: entraTelefono .32s cubic-bezier(.22, .61, .36, 1);
}
.v-anteprima figcaption {
  margin-top: 12px; font-size: 13.5px; font-weight: 650; color: var(--testo-2);
  text-align: center; letter-spacing: .01em;
}
@keyframes entraTelefono { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .v-anteprima svg, .v-anteprima img { animation: none; } }
@media (max-width: 900px) { .v-anteprima svg, .v-anteprima img { height: 156px; } }

/* ---------------- la luce blu della PS5 (home) ---------------- */

/* La foto e' ferma: la striscia luminosa e' un SVG appoggiato sopra,
   in "screen" cosi' la luce si somma al nero della scocca invece di coprirlo. */
.ps5 { position: relative; margin: 0; line-height: 0; }
.ps5 img { width: 100%; }
.ps5-luce {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; mix-blend-mode: screen;
}
.ps5-respiro { animation: ps5Respiro 3.2s ease-in-out infinite; }
@keyframes ps5Respiro {
  0%, 100% { opacity: .38; }
  40%      { opacity: 1; }
  56%      { opacity: .75; }
  70%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ps5-respiro { animation: none; opacity: .9; } }

/* ---------------- selettore di lingua IT / EN ---------------- */

/* Sta nella testata, dopo il menu. Su schermo stretto resta accanto
   all'hamburger: e' il primo posto dove un turista lo cerca. */
.lingue { display: flex; gap: 2px; align-items: center; margin-left: auto; flex: none; }
.lingue a {
  display: grid; place-items: center; min-width: 40px; padding: 7px 10px;
  font-size: 13.5px; font-weight: 750; letter-spacing: .04em;
  color: var(--testo-3); text-decoration: none; border-radius: 9px;
  border: 1px solid transparent; transition: color .15s, background .15s, border-color .15s;
}
.lingue a:hover { color: var(--crema); border-color: transparent; }
/* ⚠️ DISCRETO (2026-10-11). Prima la lingua scelta era una pasticca piena
   color crema: in alto a destra pesava quanto il tasto «Preventivo», e non
   e' una cosa su cui si deve cliccare — e' solo l'indicazione di dove si e'.
   Adesso e' la stessa cosa della voce di menu attiva: nessun riquadro,
   nessun bordo, solo la **sfumatura del marchio** ritagliata sulle lettere.
   ⚠️ Stessa rete di sicurezza del menu: senza `background-clip: text` la
   sigla sarebbe invisibile, e si torna al crema pieno. */
.lingue a.sel {
  background: var(--marchio-sfuma);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .lingue a.sel { background: none; color: var(--crema); }
}
@media (max-width: 1400px) { .lingue { order: 2; margin-left: 0; margin-right: 8px; } }

/* Telefoni molto stretti: marchio, hamburger e IT/EN devono starci tutti
   sulla stessa riga senza toccare il bordo. Il marchio nuovo e' piu' largo
   di quello vecchio, quindi qui sotto si stringe. */
@media (max-width: 390px) {
  .marchio img { width: 148px; }
  .lingue { margin-right: 0; gap: 0; }
  .lingue a { min-width: 33px; padding: 6px 7px; font-size: 12.5px; }
}

/* ============================================================
   COLORE PER ARGOMENTO
   ------------------------------------------------------------
   Il sito era tutto antracite e cromo. Ogni argomento ha adesso
   la sua tinta, e quella tinta lo segue ovunque compaia: nella
   scheda in home, nella testata della sua pagina, nei numeri dei
   passi, nell'occhiello. Cosi' il colore non e' decorazione ma
   orientamento — vedi il verde e sai gia' che si parla di usato.

   Ogni classe porta tre cose: la tinta, la seconda tinta per le
   sfumature, e la tinta in numeri (--tinta-rgb) per poterla usare
   dentro rgba() con un'opacita' qualsiasi.

   Le tinte sono tenute basse: su fondo scuro bastano poche
   percentuali, se no diventa un luna park.
   ============================================================ */

:root {
  --tinta: #9fb0c4;
  --tinta-2: #aebfd2;
  --tinta-rgb: 159, 176, 196;
}

.t-telefoni  { --tinta: #3b82f6; --tinta-2: #60a5fa; --tinta-rgb: 59, 130, 246; }
.t-micro     { --tinta: #ef4444; --tinta-2: #fb923c; --tinta-rgb: 239, 68, 68; }
.t-computer  { --tinta: #a855f7; --tinta-2: #e879f9; --tinta-rgb: 168, 85, 247; }
.t-console   { --tinta: #06b6d4; --tinta-2: #67e8f9; --tinta-rgb: 6, 182, 212; }
.t-software  { --tinta: #6366f1; --tinta-2: #a5b4fc; --tinta-rgb: 99, 102, 241; }
.t-aziende   { --tinta: #e8843a; --tinta-2: #fbbf77; --tinta-rgb: 232, 132, 58; }
.t-dati      { --tinta: #ec4899; --tinta-2: #f9a8d4; --tinta-rgb: 236, 72, 153; }
.t-nostri    { --tinta: #22c55e; --tinta-2: #86efac; --tinta-rgb: 34, 197, 94; }
.t-corriere  { --tinta: #e8843a; --tinta-2: #fbbf77; --tinta-rgb: 232, 132, 58; }
/* ⚠️ «A domicilio» aveva la tinta delle aziende, che e' lo stesso arancio
   del riquadro «Vendi il tuo iPhone»: in home i due blocchi si confondevano.
   Qui la sfumatura e' bianca. */
.t-domicilio { --tinta: #e2eaf4; --tinta-2: #ffffff; --tinta-rgb: 226, 234, 244; }
.t-contatti  { --tinta: #e8843a; --tinta-2: #fbbf77; --tinta-rgb: 232, 132, 58; }

/* ---- l'occhiello prende la tinta dell'argomento ---- */
.occhiello { color: var(--tinta-2); }

/* ---- le schede: filo di luce colorato in cima, alone al passaggio ---- */
.scheda::before {
  left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--tinta), var(--tinta-2), var(--tinta), transparent);
  opacity: 1;
}
a.scheda, .scheda { transition: border-color .22s, box-shadow .22s, transform .22s; }
a.scheda:hover {
  border-color: rgba(var(--tinta-rgb), .55);
  box-shadow: var(--rilievo), 0 22px 60px rgba(var(--tinta-rgb), .22);
  transform: translateY(-3px);
}
a.scheda::after { color: var(--tinta-2); }

/* ⚠️ IL COLORE SUL DISEGNO ESCE SOLO COL MOUSE SOPRA (2026-10-11).
   I quattro disegni hanno tutti lo stesso fondo grigio neutro
   (#161c25 → #0d1219): il blu, il viola, il turchese e il verde che si
   vedevano venivano **solo da questo velo**. Da fermi le schede sono quattro
   riquadri grigi uguali; passandoci sopra si accende la tinta del reparto
   **insieme al bagliore e al sollevamento** che c'erano gia'.
   ⚠️ Restano colorati sempre: il **tasto** e l'**occhiello** (la scritta col
   trattino davanti). Sono loro a dire di che reparto si tratta quando il
   mouse non c'e' — senza, le quattro schede non si distinguerebbero.
   ⚠️ Sul telefono il mouse non esiste e il velo non si accende mai: e'
   voluto, ed e' lo stesso aspetto «pulito» chiesto per il fermo. Tasto e
   occhiello colorati bastano a riconoscerle.
   ⚠️ Si spegne con `opacity`, non togliendo lo strato: cosi' la comparsa e'
   una transizione e non uno scatto. */
.scheda-foto .foto { position: relative; }
.scheda-foto .foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--tinta-rgb), .30), rgba(var(--tinta-rgb), .05) 40%, transparent 62%);
  opacity: 0;
  transition: opacity .25s ease;
}
.scheda-foto:hover .foto::after,
.scheda-foto:focus-visible .foto::after,
.scheda-foto:focus-within .foto::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .scheda-foto .foto::after { transition: none; }
}

/* ---- testate di pagina: un alone della tinta dietro al titolo ---- */
.testa-pagina::after {
  background:
    /* ⚠️ PRIMA DI TUTTE: in CSS il primo strato e' quello SOPRA, ed e' il
       solo modo di spegnere insieme sfondo, fotografia e alone colorato. */
    /* ⚠️ Le quattro tappe in mezzo sono una SMOOTHSTEP sull'opacita'
       (10, 35, 65, 90%). Con la sola coppia transparent→colore la pendenza
       partiva e si fermava di colpo, e l'occhio legge quello spigolo come
       una riga anche dove i colori non fanno nessun gradino. Stessa ricetta
       del piede di pagina, dove ha funzionato.
       ⚠️ `color-mix` serve perche' il colore d'arrivo e' una VARIABILE e non
       ci si puo' scrivere dentro un'opacita' a mano. */
    linear-gradient(180deg,
      transparent calc(100% - var(--sfuma)),
      color-mix(in srgb, var(--sfuma-col) 10%, transparent) calc(100% - var(--sfuma) * 0.8),
      color-mix(in srgb, var(--sfuma-col) 35%, transparent) calc(100% - var(--sfuma) * 0.6),
      color-mix(in srgb, var(--sfuma-col) 65%, transparent) calc(100% - var(--sfuma) * 0.4),
      color-mix(in srgb, var(--sfuma-col) 90%, transparent) calc(100% - var(--sfuma) * 0.2),
      var(--sfuma-col) 100%),
    radial-gradient(95% 130% at 8% 0%, rgba(var(--tinta-rgb), .50), transparent 58%),
    radial-gradient(70% 110% at 96% 100%, rgba(var(--tinta-rgb), .28), transparent 62%),
    linear-gradient(180deg, rgba(2, 7, 10, .56), rgba(2, 7, 10, .93));
}

/* ⚠️ Il bianco non si comporta come le altre tinte. L'alone della testata e'
   tarato su colori SATURI, che a meta' opacita' restano colore; il bianco a
   meta' opacita' aggiunge luce su tutti e tre i canali e sbianca la foto,
   portandosi via il contrasto del titolo. Sulla tinta di casa si tiene piu'
   basso — resta una sfumatura bianca, ma non una foschia. */
.testa-pagina.t-domicilio::after {
  background:
    /* ⚠️ Le quattro tappe in mezzo sono una SMOOTHSTEP sull'opacita'
       (10, 35, 65, 90%). Con la sola coppia transparent→colore la pendenza
       partiva e si fermava di colpo, e l'occhio legge quello spigolo come
       una riga anche dove i colori non fanno nessun gradino. Stessa ricetta
       del piede di pagina, dove ha funzionato.
       ⚠️ `color-mix` serve perche' il colore d'arrivo e' una VARIABILE e non
       ci si puo' scrivere dentro un'opacita' a mano. */
    linear-gradient(180deg,
      transparent calc(100% - var(--sfuma)),
      color-mix(in srgb, var(--sfuma-col) 10%, transparent) calc(100% - var(--sfuma) * 0.8),
      color-mix(in srgb, var(--sfuma-col) 35%, transparent) calc(100% - var(--sfuma) * 0.6),
      color-mix(in srgb, var(--sfuma-col) 65%, transparent) calc(100% - var(--sfuma) * 0.4),
      color-mix(in srgb, var(--sfuma-col) 90%, transparent) calc(100% - var(--sfuma) * 0.2),
      var(--sfuma-col) 100%),
    radial-gradient(95% 130% at 8% 0%, rgba(var(--tinta-rgb), .34), transparent 58%),
    radial-gradient(70% 110% at 96% 100%, rgba(var(--tinta-rgb), .18), transparent 62%),
    linear-gradient(180deg, rgba(2, 7, 10, .58), rgba(2, 7, 10, .94));
}

/* ---- numeri dei passi e pallini: la sfumatura dell'argomento ---- */
.passo-n, .pallino {
  background: linear-gradient(140deg, var(--tinta-2), var(--tinta));
  color: #0b1016;
}
.passi li::before { background: linear-gradient(90deg, transparent, var(--tinta), transparent); }

/* ---- dettagli minori che seguivano il cromo ---- */
.numeri div { border-left-color: var(--tinta); }
.ico-tonda { border-color: rgba(var(--tinta-rgb), .45); }
.ico-tonda svg { stroke: var(--tinta-2); }

/* ---- la sezione puo' portare un velo di colore appena percettibile ---- */
.sezione.tinta-fondo::before {
  background: radial-gradient(90% 70% at 50% 0%, rgba(var(--tinta-rgb), .11), transparent 65%);
}

/* ---------------- home: la scelta del servizio ---------------- */

/* La home non racconta piu' chi siamo: fa scegliere. Quattro riquadri
   grandi, uno per reparto, ognuno con la sua tinta e il suo disegno. */
.eroe-scelta { padding: clamp(36px, 5vw, 64px) 0 clamp(20px, 3vw, 30px); min-height: 0; }
/* ⚠️ NIENTE PROGETTO TECNICO DIETRO AL GIOCO (2026-10-11). La trama
   `blueprint.webp` — il disegno quotato dell'iPhone — sta bene dietro a una
   frase ferma, ma dietro a una tela che si muove diventa un secondo disegno
   che litiga col primo: la navicella passava sopra alle scritte «Li-Ion» e
   «Taptic Engine», e il bordo del disegno faceva una riga sua.
   ⚠️ Si toglie SOLO qui: sulle altre pagine con `.eroe` (chi-siamo,
   valutazioni) non c'e' nessun gioco e il progetto resta. */
.eroe-scelta::before { display: none; }
.eroe-scelta .contenitore { max-width: 900px; }
.eroe-scelta h1 { margin-bottom: 14px; }
.eroe-scelta .sottotitolo { max-width: 58ch; }

/* Quattro affiancati sui monitor larghi, due sui tablet, uno sul telefono.
   Colonne fisse e non auto-fit: con auto-fit si finiva a 3+1, e un riquadro
   orfano in fondo alla riga sta male. */
.scelta .griglia-2 { gap: 16px; align-items: stretch; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .scelta .griglia-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1120px) { .scelta .griglia-2 { grid-template-columns: repeat(4, 1fr); } }

.scheda-scelta .foto { aspect-ratio: 16 / 9; }
.scheda-scelta .testo { padding: 15px 17px 18px; display: flex; flex-direction: column; flex: 1; }
.scheda-scelta h2 { font-size: clamp(18px, 1.5vw, 22px); margin: 1px 0 6px; line-height: 1.2; }
.scheda-scelta p { color: var(--testo-2); font-size: 13.5px; line-height: 1.5; margin: 0 0 11px; }
/* I tasti delle quattro schede sono fatti come quello d'oro del banner della
   valutazione — pieno, con l'ombra colorata e la freccia che scatta — ma
   ognuno prende la TINTA DEL SUO REPARTO invece dell'arancio: e' lo stesso
   sistema di colori che regge tutto il sito.
   ⚠️ Testo scuro, non bianco: su queste tinte chiare il nero si legge molto
   meglio, ed e' anche quello che fa sembrare il tasto pieno invece che
   colorato. */
.scheda-scelta .btn {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(180deg, var(--tinta-2), var(--tinta));
  color: #0b1018; border: 0; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 12px 26px rgba(var(--tinta-rgb), .32);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.scheda-scelta .btn::after {
  content: ''; width: 15px; height: 15px; flex: none;
  background: currentColor;
  -webkit-mask: var(--freccia) center / contain no-repeat;
  mask: var(--freccia) center / contain no-repeat;
  transition: transform .18s ease;
}
.scheda-scelta:hover .btn,
.scheda-scelta:focus-visible .btn {
  transform: translateY(-2px); filter: brightness(1.07);
  box-shadow: 0 16px 34px rgba(var(--tinta-rgb), .46);
}
.scheda-scelta:hover .btn::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .scheda-scelta .btn, .scheda-scelta .btn::after { transition: none; }
  .scheda-scelta:hover .btn { transform: none; }
}
.scheda-scelta .occhiello { margin-bottom: 4px; font-size: 11.5px; }
.scheda-scelta .btn { padding: 10px 16px; font-size: 14px; }

/* le marche: pastiglie piccole, servono a far vedere che non e' solo Apple */
.marche { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; }
.marche li {
  font-size: 11px; font-weight: 650; letter-spacing: .01em;
  padding: 3px 8px; border-radius: 999px;
  color: var(--tinta-2); background: rgba(var(--tinta-rgb), .12);
  border: 1px solid rgba(var(--tinta-rgb), .32);
}

/* la freccia in alto a destra dei riquadri normali qui darebbe fastidio:
   il bottone dice gia' dove si va */
a.scheda-scelta::after { content: none; }


/* ---------------- il banner della valutazione ---------------- */

/* Questo non è un riquadro fra gli altri: deve invogliare. Fondo caldo con la
   luce dell'oro del marchio, la cifra grande, tre motivi per fidarsi e un
   iPhone vero appoggiato a destra. Il riflesso che attraversa il banner ogni
   sei secondi è quello che fa girare la testa: si nota con la coda dell'occhio
   senza dare fastidio a chi sta leggendo altro. */
.banner-usato {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr; gap: 8px;
  margin-top: 22px; padding: clamp(26px, 3.6vw, 44px) clamp(22px, 3.4vw, 46px);
  border-radius: var(--raggio-g); text-decoration: none;
  border: 1px solid rgba(232, 132, 58, .38);
  background:
    radial-gradient(120% 150% at 88% 20%, rgba(232, 132, 58, .30), transparent 58%),
    radial-gradient(90% 120% at 6% 100%, rgba(251, 191, 119, .16), transparent 60%),
    linear-gradient(118deg, #241a12 0%, #1c1710 46%, #14181e 100%);
  box-shadow: var(--rilievo);
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
@media (min-width: 860px) {
  .banner-usato { grid-template-columns: 1.4fr .6fr; gap: clamp(20px, 3vw, 40px); align-items: stretch; }
  .banner-usato .banner-testo { align-self: center; }
}
.banner-usato:hover {
  border-color: rgba(232, 132, 58, .8); transform: translateY(-3px);
  box-shadow: var(--rilievo), 0 28px 70px rgba(232, 132, 58, .22);
}

/* il riflesso che passa */
.banner-usato::before {
  content: ''; position: absolute; top: -60%; bottom: -60%; width: 42%; left: -55%;
  background: linear-gradient(100deg, transparent, rgba(255, 238, 214, .16), transparent);
  transform: skewX(-16deg); pointer-events: none; z-index: -1;
  animation: lucidaBanner 6.5s ease-in-out infinite;
}
/* ⚠️ L'opacita' NON e' un vezzo: per i primi quattro secondi di ogni giro il
   riflesso sta FERMO al punto di partenza, e deve essere invisibile. A
   `left: -55%` sarebbe fuori dal riquadro... se non fosse per lo `skewX`.
   La striscia e' alta il 220% del banner, e una pendenza di 16 gradi su
   mezza altezza sposta il suo bordo ALTO di `0,287 x mezza altezza`: su un
   banner largo e basso sono pochi pixel e resta fuori, ma sul TELEFONO il
   banner e' alto e stretto (330 x 870) e quello spostamento vale 275 px —
   l'angolo in alto della striscia finiva dentro al riquadro e ci restava
   parcheggiato, come una scheggia chiara, finche' l'animazione non partiva.
   L'utente l'ha vista e segnalata. */
@keyframes lucidaBanner {
  0%, 62% { left: -55%; opacity: 0; }
  70%, 84% { opacity: 1; }
  92%, 100% { left: 118%; opacity: 0; }
}
/* ⚠️ E sul telefono la striscia si raddrizza: senza pendenza e senza
   sbordare sopra e sotto, a riposo e' davvero fuori dal riquadro, e il
   riflesso resta un riflesso invece di diventare un cuneo di traverso. */
@media (max-width: 760px) {
  .banner-usato::before { top: 0; bottom: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .banner-usato::before { animation: none; } }

.banner-usato .occhiello { color: #fbbf77; margin-bottom: 10px; }
.banner-usato h2 {
  font-size: clamp(28px, 4vw, 50px); line-height: 1.05; letter-spacing: -.035em;
  color: #fff; margin: 0 0 12px;
}
.banner-usato h2 em {
  font-style: normal; white-space: nowrap;
  background: linear-gradient(100deg, #ffe9c9, #e8843a 55%, #ffcf94);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.banner-usato > .banner-testo > p {
  color: #e6d6c4; font-size: clamp(15px, 1.5vw, 17.5px); max-width: 52ch; margin: 0 0 16px;
}

.banner-punti { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 22px; padding: 0; }
.banner-punti li {
  display: flex; align-items: center; gap: 8px;
  color: #fff; font-size: 15px; font-weight: 620;
}
.banner-punti li::before {
  content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(232, 132, 58, .22); border: 1px solid rgba(251, 191, 119, .6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf77' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 11px;
}

.banner-usato .btn-oro {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #f6a75c, #e8843a);
  color: #201206; border: 0; font-weight: 800;
  box-shadow: 0 14px 34px rgba(232, 132, 58, .34);
}
.banner-usato:hover .btn-oro { background: linear-gradient(180deg, #ffbb76, #ef8f45); }

/* ⚠️ QUI C'ERA un `::after` invisibile che allargava il primo tasto a TUTTO
   il riquadro: si cliccava ovunque e si andava alla valutazione. Tolto il
   2026-10-10, e non va rimesso senza pensarci.
   Il motivo: quell'ombra copriva 813 x 362 px — la foto dell'iPhone, il marrone
   vuoto, tutto — ed essendo parte di un `<a>` si portava dietro la manina.
   Scorrendo la home il cursore diventava una mano per l'intera altezza del
   banner, sopra a roba che non sembra cliccabile, e l'utente l'ha segnalato
   come un difetto (tre volte, contando il valutatore).
   Adesso il banner fa quello che sembra: due tasti, e la mano solo su quelli. */
/* `stretch` e non `center`: il tasto col bordo e' alto 2 px piu' dell'altro,
   e centrati restavano sfalsati di un pelo — si vede. */
.banner-tasti { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.banner-usato .banner-secondario {
  border-color: rgba(255, 213, 170, .5); color: #ffdfc0;
}
.banner-usato .banner-secondario:hover {
  border-color: #ffbb76; color: #fff; background: rgba(232, 132, 58, .16);
}

/* l'iPhone appoggiato a destra, con l'alone caldo dietro */
.banner-foto { position: relative; justify-self: center; align-self: end; margin: 0; min-height: 100%; }
.banner-foto::before {
  content: ''; position: absolute; left: -18%; right: -18%; top: 4%; bottom: -30%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 132, 58, .40), transparent 72%);
}
/* piu alto del banner: la cornice lo taglia in basso, e il telefono
   sembra uscire dall inquadratura invece di stare li appoggiato */
.banner-foto img {
  height: clamp(300px, 34vw, 470px); width: auto; display: block;
  margin-bottom: clamp(-120px, -9vw, -60px);
  filter: drop-shadow(0 30px 54px rgba(0, 0, 0, .65));
}
@media (max-width: 859px) { .banner-foto { display: none; } }

/* ---------------- la vetrina in fondo alla home ---------------- */

/* Sotto il titolo, le cose che ripariamo: foto vere, grandi, appoggiate sulla
   stessa linea di terra e leggermente sovrapposte, come in vetrina. L'ultima
   esce dal bordo destro: fa capire che l'elenco continua.
   ⚠️ aria-hidden: e' decorazione, chi usa un lettore di schermo non deve
   sentirsi elencare tre immagini senza contenuto. */
.eroe-vetrina {
  position: relative; margin: clamp(14px, 2.4vw, 30px) 0 0;
  height: clamp(170px, 24vw, 320px);
  pointer-events: none; user-select: none;
}
.eroe-vetrina .vero {
  position: absolute; bottom: 0; width: auto;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .7));
}
.eroe-vetrina .v-mac    { left: 0%;  height: 60%; z-index: 1; }
.eroe-vetrina .v-ps5v   { left: 22%; height: 84%; z-index: 2; }
.eroe-vetrina .v-pad    { left: 46%; height: 40%; z-index: 4; }
.eroe-vetrina .v-iphone { left: 70%; height: 100%; z-index: 5; }

/* una luce sotto, cosi' non sembrano ritagli appiccicati sul nero */
.eroe-vetrina::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6%; height: 34%;
  background: radial-gradient(60% 100% at 46% 100%, rgba(120, 150, 200, .14), transparent 70%);
}

@media (max-width: 900px) {
  .eroe-vetrina { height: clamp(130px, 30vw, 190px); }
  .eroe-vetrina .v-mac    { left: -4%; height: 56%; }
  .eroe-vetrina .v-ps5v   { left: 22%; height: 80%; }
  .eroe-vetrina .v-pad    { left: 40%; height: 38%; }
  .eroe-vetrina .v-iphone { left: 62%; height: 96%; }
}

/* il ventaglio di iPhone sulla pagina della valutazione: è largo, non alto,
   quindi non può seguire la regola dell'eroe normale */
/* Il ventaglio di iPhone sulla pagina della valutazione: e' largo, non alto,
   quindi non puo' seguire la regola dell'eroe normale.
   ⚠️ La sfumatura in basso non e' un vezzo: nei primi piani il video taglia il
   telefono al bordo inferiore dell'inquadratura, e senza la dissolvenza si
   vedrebbe il bordo netto. */
/* Il ventaglio di iPhone su /valutazioni.

   ⚠️ IL VIDEO E' TAGLIATO AI PRIMI 99 FOTOGRAMMI, E VA AVANTI E INDIETRO.
   Non e' una scelta di durata: dal fotogramma 100 in poi il filmato Apple
   entra nei primi piani, e li' la parte bassa dello schermo **sfuma nel bianco
   fino a sparire** — schermo e sfondo hanno lo stesso colore. Si vede
   guardando l'originale a contrasto spinto. Nessuno scontorno puo' inventare
   un bordo che nel filmato non c'e': ne' il riempimento dai bordi, ne' il
   modello, ne' i due insieme. Su fondo scuro quella dissolvenza si legge come
   un morso nel telefono.
   La parte buona (il ventaglio che si apre, gira e mostra il retro nero) sono
   i primi 99 fotogrammi. Riprodotti avanti e poi indietro il giro non ha
   stacco, e durano 6,5 secondi invece di 8.

   Se un giorno si rifa' con un filmato girato in negozio, il problema non si
   pone e si puo' usare tutto. */
/* La sfumatura arancione su tutto il riquadro, dall'alto — la stessa forma
   delle altre sezioni a tinta (`radial-gradient(90% 70% at 50% 0%)`), col
   colore del marchio. Serve anche a un secondo scopo: sul bordo di sotto del
   video resta un filo di difetto, perche' li' il telefono esce
   dall'inquadratura originale e nessuno scontorno puo' fare di meglio. Con il
   video zumato quel bordo finisce fuori campo. */
.eroe-valuta {
  background:
    radial-gradient(96% 78% at 50% 0%, rgba(232, 132, 58, .24), transparent 70%),
    var(--nero);
}

/* ⚠️ Il video va a FILO col fondo della sezione: appoggiato, non sospeso.
   Senza, la colonna lo centra e resta uno scalino di 27 px fra il telefono e il
   bordo del riquadro. */
.eroe-valuta .eroe-figura { align-self: end; margin-bottom: 0; }

/* ⚠️ ANCHE IL VENTAGLIO SU UN LIVELLO SUO (2026-10-13).
   Su Safari il filmato non si vede: il WebM ha il canale alfa e Safari non
   lo sa rendere, quindi `testata.js` se ne accorge e mette al suo posto un
   **WebP animato** — 96 fotogrammi da 688x594. Un'immagine animata la
   decodifica il filo principale, un fotogramma per volta, e ogni fotogramma
   sporca il livello che la contiene: qui dentro c'e' anche la sfumatura
   arancione dell'eroe, larga quanto la pagina. Il livello proprio limita il
   ridisegno al rettangolo del ventaglio.
   ⚠️ Vale per l'`<img>` tanto quanto per il `<video>`, perche' a seconda del
   browser quell'elemento e' uno dei due. */
/* ⚠️ `canvas` sta in tutte e tre le regole di questa figura insieme a
   `video` e `img`, e non e' per completezza: su Safari il ventaglio E' una
   tela (vedi `assets/ventaglio.js`). Dimenticandola, la tela si ritrova
   `display: inline` e larga 688 px fissi — la sua misura intrinseca — e non
   si adatta piu' alla colonna. Se un giorno si aggiunge una regola qui,
   vanno elencati tutti e tre. */
.eroe-valuta .eroe-figura video,
.eroe-valuta .eroe-figura canvas,
.eroe-valuta .eroe-figura img {
  transform: translateZ(0);
  will-change: transform;
}

.eroe-valuta .eroe-figura img,
.eroe-valuta .eroe-figura canvas,
.eroe-valuta .eroe-figura video {
  max-height: none; width: min(100%, 560px); display: block;
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .55));
  /* ⚠️ SI TAGLIA IL 6% IN FONDO. Nei primi piani il telefono sfuma nel bianco
     e lo scontorno finisce frastagliato: misurato, quel frastagliato non sale
     mai piu' di 26 px su 594, cioe' il 4,4%. Tagliando il 6% se ne va tutto,
     con un po' di margine.
     Il filmato originale ha 688x594; togliendo il 6% restano 558, da cui il
     rapporto qui sotto. `object-fit: cover` con `object-position: top` fa
     tutto il lavoro: il video riempie il riquadro piu' basso e quello che
     avanza si perde SOTTO, dove sta il difetto. */
  aspect-ratio: 688 / 558; height: auto;
  object-fit: cover; object-position: center top;
}
@media (max-width: 900px) {
  .eroe-valuta .eroe-figura img,
  .eroe-valuta .eroe-figura canvas,
  .eroe-valuta .eroe-figura video { width: min(100%, 430px); }
}

/* la tela della navicella: prende il posto delle foto ferme quando il
   JavaScript parte. Le foto restano nell'HTML come riserva. */
.vetrina-tela {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: auto; cursor: crosshair; touch-action: none;
}
/* ⚠️ Mentre si gioca il puntatore sparisce: la navicella LO SOSTITUISCE, e
   avere due cursori sovrapposti confonde la mira. Nella dimostrazione resta,
   perche' li' serve a far capire che ci si puo' cliccare. */
.eroe-vetrina.gioco-attivo .vetrina-tela {
  cursor: none;
}
.eroe-vetrina.tela-attiva .vero { display: none; }

/* Quando si passa dalla vetrina al gioco l'area diventa un campo da gioco vero,
   grande quanto lo permette lo schermo: su un monitor larga e alta, su un
   telefono stretta e lunga come il telefono stesso.
   ⚠️ Niente `transition` sull'altezza, per due motivi: la tela dentro verrebbe
   misurata a meta' corsa e resterebbe piccola (la navicella non arriverebbe in
   fondo, il boss si fermerebbe mezzo fuori dal bordo di sopra), e una pagina
   che il browser considera nascosta non fa avanzare le transizioni per niente.
   La tela si rimisura comunque da sola con un ResizeObserver. */
.eroe-vetrina.gioco-attivo {
  height: min(74vh, 780px);
  border: 1px solid rgba(232, 132, 58, .32);
  border-radius: var(--raggio-g);
  background: radial-gradient(120% 100% at 50% 100%, rgba(232, 132, 58, .07), transparent 62%);
}
/* ⚠️ E quell'alone va spento anche nella DIMOSTRAZIONE, non solo in
   partita. E' un cerchio di luce centrato sul bordo di sotto (`at 46% 100%`),
   quindi proprio li' e' al MASSIMO — e l'eroe, che ha `overflow: hidden`, lo
   taglia di netto: una riga chiara lunga tutta la pagina sotto al gioco.
   Serviva a far «appoggiare» le fotografie dei dispositivi su una
   superficie, ma con la tela accesa quelle fotografie sono nascoste
   (`.tela-attiva .vero { display: none }`): la luce non illumina piu'
   niente, fa solo il danno. */
.eroe-vetrina.tela-attiva::after,
.eroe-vetrina.gioco-attivo::after { display: none; }

/* Appena il JavaScript prende in mano la vetrina, il titolo esce dal flusso e
   la tela gli si mette davanti, prendendosi tutta l'altezza dell'eroe. Cosi'
   nella dimostrazione gli oggetti entrano davvero da sopra e passano davanti
   alla scritta, invece di comparire a meta' schermo. Il titolo resta leggibile:
   la tela e' trasparente.
   Mentre si gioca, in piu', la scritta scende al 14%: li' serve il campo, non
   la frase. */
.eroe.demo-attiva > .contenitore {
  position: absolute; left: 0; right: 0;
  /* ⚠️ Deve combaciare con il `padding-top` dell'eroe: e' lo stesso posto,
     solo fuori dal flusso. */
  top: calc(var(--testata-h) + var(--eroe-su));
  /* ⚠️ La frase sta SOPRA al campo da gioco, non sotto. Prima gli oggetti le
     passavano davanti e per qualche secondo non si leggeva: chi arriva sul
     sito deve poterla leggere sempre, il gioco e' un contorno. Passandoci
     dietro l'effetto resta e la frase non si perde mai. */
  z-index: 2;
  /* ⚠️ E i tocchi devono attraversarla: sotto c'e' la tela, ed e' li' che si
     preme per giocare. Solo i link tornano cliccabili. */
  pointer-events: none;
}
.eroe.demo-attiva > .contenitore a,
.eroe.demo-attiva > .contenitore button { pointer-events: auto; }

/* ⚠️ Il riquadro dietro alla frase. Prima c'era solo un'ombra sotto alle
   lettere, e con gli oggetti che passano dietro non bastava: contro una
   scocca bianca il bianco su bianco non si legge, ombra o non ombra.

   ⚠️ Non ha un `z-index` suo, e non deve averlo: e' il `::before` del blocco
   della frase, che nella dimostrazione sta gia' a 2 mentre la tela sta a 1.
   Le navicelle ci passano dietro da sole. E in partita il blocco scende a 0 e
   al 14%: il riquadro lo segue e sparisce con lui, senza una riga in piu'.

   ⚠️ `inset` in negativo e non `padding` sul blocco: il blocco e' fuori dal
   flusso e in una posizione calcolata sul `padding-top` dell'eroe — cambiargli
   le misure lo sposterebbe rispetto alla tela. Cosi' invece il riquadro cresce
   attorno alla frase senza muovere niente. */
.eroe.demo-attiva > .contenitore::before {
  content: ''; position: absolute; z-index: -1;
  left: 0; right: 0;
  top: calc(var(--eroe-su) * -0.5 - 10px);
  bottom: -22px;
  border-radius: var(--raggio-g);
  background: linear-gradient(180deg, rgba(8, 12, 17, .88), rgba(8, 12, 17, .74));
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid var(--bordo);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 22px 50px rgba(0, 0, 0, .5);
}
/* ⚠️ Col riquadro dietro, le ombrone sotto alle lettere diventano sporco:
   servivano a staccare il bianco da una scena chiara, e adesso c'e' il fondo
   a farlo. Resta un filo, per i bordi del riquadro dove sfuma. */
.eroe.demo-attiva > .contenitore h1 { text-shadow: 0 1px 2px rgba(4, 8, 13, .6); }
.eroe.demo-attiva > .contenitore .sottotitolo { text-shadow: 0 1px 2px rgba(4, 8, 13, .6); }
.eroe.demo-attiva .eroe-vetrina { position: relative; z-index: 1; margin-top: 0; }
.eroe.demo-attiva .eroe-vetrina.tela-attiva { height: clamp(300px, 46vh, 470px); }
/* ⚠️ Sul computer la finestra della dimostrazione e' mezzo centimetro piu'
   bassa (2026-10-10, chiesto dall'utente). Scritto in `cm` di proposito: e'
   la misura che ha chiesto lui, e cosi' si rilegge. Sul telefono resta com'e':
   li' lo spazio e' gia' poco. */
@media (min-width: 1001px) {
  .eroe.demo-attiva .eroe-vetrina.tela-attiva { height: calc(clamp(300px, 46vh, 470px) - 0.5cm); }
}
/* ⚠️ Questa deve stare DOPO e pesare quanto la riga qui sopra, se no la
   dimostrazione vince sul gioco e il campo resta alto 377 px invece di 607. */
.eroe.demo-attiva .eroe-vetrina.gioco-attivo { height: min(74vh, 780px); }
.eroe.demo-attiva.gioco-in-corso > .contenitore {
  opacity: .14; pointer-events: none; user-select: none;
}
/* ⚠️ E mentre si gioca la TELA passa sopra alla frase. Nella dimostrazione e'
   giusto il contrario — gli oggetti passano dietro alla scritta, cosi' chi
   arriva sul sito riesce sempre a leggerla — ma in partita la scritta, per
   quanto sbiadita al 14%, restava comunque davanti: le navicelle le passavano
   sotto e sembrava che ci fosse un vetro sporco in mezzo. */
.eroe.demo-attiva.gioco-in-corso > .contenitore { z-index: 0; }
.eroe.demo-attiva.gioco-in-corso .eroe-vetrina { z-index: 3; }

@media (max-width: 900px) {
  /* sul telefono si prende tutto quello che c'e': stretto e lungo */
  .eroe.demo-attiva .eroe-vetrina.gioco-attivo { height: min(82vh, 820px); }
  .eroe-vetrina.gioco-attivo {
    height: min(82vh, 820px);
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    width: 100vw; border-radius: 0; border-left: 0; border-right: 0;
  }
}

/* Fine partita: il nome da sei lettere e la classifica.
   ⚠️ La classifica sta nel browser di chi gioca, non su un server: ognuno vede
   i propri record. Per una classifica unica servirebbe il Worker con una KV. */
.gioco-pannello {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  background: rgba(6, 10, 18, .9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--raggio-g);
  pointer-events: auto;
}
.gioco-pannello[hidden] { display: none; }
.gioco-scatola { text-align: center; padding: 18px 22px; width: min(100%, 340px); }
.gioco-scatola h3 { margin: 0 0 4px; font-size: 1.05rem; }
.gioco-punti { margin: 0 0 14px; color: var(--testo-2); font-size: .9rem; }
.gioco-punti b { color: #e8843a; font-size: 1.35rem; }
.gioco-nome {
  display: flex; gap: 8px; align-items: flex-end; justify-content: center; margin-bottom: 16px;
}
.gioco-nome label {
  display: grid; gap: 4px; text-align: left;
  font-size: .7rem; color: var(--testo-2);
}
.gioco-nome input {
  width: 128px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06);
  color: #fff; letter-spacing: .22em; text-transform: uppercase;
  font: 700 1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.gioco-nome input:focus { outline: 2px solid rgba(232, 132, 58, .6); outline-offset: 1px; }
.gioco-elenco h4 {
  margin: 0 0 6px; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--testo-2);
}
.gioco-classifica {
  list-style: none; margin: 0 auto 16px; padding: 0; display: grid; gap: 2px;
  width: min(100%, 190px);
  font: 600 .82rem/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.gioco-classifica li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 1px 9px; border-radius: 6px; background: rgba(255, 255, 255, .05);
}
.gioco-classifica li span { color: var(--testo-2); letter-spacing: .12em; }
.gioco-vuoto { margin: 0 0 16px; color: var(--testo-2); }
.gioco-bottoni { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.gioco-bottoni .btn { padding: 9px 15px; font-size: .82rem; }


/* ============================================================
   Lo spazio della testata
   ------------------------------------------------------------
   ⚠️ Va in fondo al foglio di proposito: `.eroe-scelta` e le altre varianti
   riscrivono `padding` per intero piu' su, e messo prima verrebbe cancellato.
   ============================================================ */
.eroe, .eroe-scelta, .eroe-valuta {
  padding-top: calc(var(--testata-h) + var(--eroe-su));
}
.testa-pagina {
  /* ⚠️ I 20 px di prima bastavano dove c'e' l'occhiello sopra al titolo. Dove
     non c'e' — /contattaci/chiedi-assistenza — l'<h1> da 34 px restava
     incollato al bordo della barra. */
  padding-top: calc(var(--testata-h) + clamp(30px, 3vw, 36px));
}
@media (max-width: 700px) {
  /* anche qui un filo di respiro sopra e sotto, ma meno che sul grande:
     su un telefono la barra e' fissa e ogni pixel se lo mangia alla pagina */
  :root { --testata-h: 86px; }

  /* ⚠️ Sul telefono, in partita, la frase va PIU' IN BASSO. Il campo da gioco
     disegna il suo cruscotto (vite, ondata, arma, punti) proprio nei primi
     quaranta pixel: lasciando il titolo dov'e' normalmente, le due scritte si
     accavallano e non si legge ne' l'una ne' l'altra. */
  .eroe.gioco-in-corso > .contenitore {
    top: calc(var(--testata-h) + 26vh);
  }
}

/* Il tasto per silenziare il gioco: sta nell'angolo del riquadro, e si vede
   solo mentre si gioca — nella dimostrazione non suona niente. */
.gioco-muto {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  width: 40px; height: 40px; padding: 0; border-radius: 11px; cursor: pointer;
  font-size: 17px; line-height: 1; display: none; place-items: center;
  /* ⚠️ `.eroe-vetrina` ha `pointer-events: none`: senza questa riga il bottone
     si vede e non si preme. */
  pointer-events: auto;
  background: rgba(6, 11, 18, .62); color: #dce8f7;
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  transition: background .15s, border-color .15s;
}
.gioco-muto:hover { background: rgba(10, 18, 28, .82); border-color: rgba(255, 255, 255, .34); }
.eroe-vetrina.gioco-attivo .gioco-muto { display: grid; }

/* Il tasto per cominciare a giocare. Sta nello stesso angolo del muto — non
   si incontrano mai: questo c'e' solo PRIMA, quello solo DURANTE.
   ⚠️ Piccolo apposta. Prima si partiva toccando un punto qualsiasi della
   scena, e bastava appoggiare il pollice mentre si scorreva per ritrovarsi
   dentro al gioco. Un tasto di questa misura va cercato per essere premuto. */
/* ⚠️ Il doppio di prima (era 13px con 9/15 di spazio): e' l'unica cosa da
   premere in tutta la vetrina, e piccolo in un angolo non lo vedeva nessuno.
   E RESPIRA — un alito lento, non un lampeggio: deve chiamare l'occhio senza
   dare fastidio a chi sta leggendo il resto della pagina. */
.gioco-via {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 17px 30px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 19px; font-weight: 700; line-height: 1;
  animation: respiroGioca 3.2s ease-in-out infinite;
  /* ⚠️ `.eroe-vetrina` ha `pointer-events: none`: senza questa riga il tasto
     si vede e non si preme. */
  pointer-events: auto;
  background: rgba(6, 11, 18, .62); color: #dce8f7;
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  transition: background .15s, border-color .15s, transform .15s;
}
.gioco-via span { font-size: 16px; opacity: .9; }

/* ⚠️ Il respiro e' uno `scale`, e il `:hover` di prima era un `translateY`:
   due `transform` sulla stessa regola si cancellano a vicenda, e col mouse
   sopra il tasto saltava. Col mouse sopra il respiro si FERMA e il tasto
   resta grande: chi ci ha gia' messo il puntatore non ha piu' bisogno di
   essere chiamato. */
@keyframes respiroGioca {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(232, 132, 58, .34); }
  55%      { transform: scale(1.06); box-shadow: 0 0 26px 7px rgba(232, 132, 58, 0); }
}
.gioco-via:hover {
  background: rgba(10, 18, 28, .82); border-color: rgba(255, 255, 255, .34);
  animation-play-state: paused; transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .gioco-via { animation: none; }
}
.eroe-vetrina.gioco-attivo .gioco-via { display: none; }

/* ---------------- assistente del sito ---------------- */

/* Il tasto di richiamo sta SOPRA a quello di WhatsApp, non al suo posto:
   sono due cose diverse — qui si chiede, di la' si scrive a una persona.
   Gli 82 px sono l'altezza del tasto verde piu' il suo margine, misurata. */
.ai-lancio {
  position: fixed; right: 18px; bottom: 82px; z-index: 61;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px 11px 15px; border: 1px solid var(--bordo-forte);
  border-radius: 999px; cursor: pointer;
  background: var(--vetro-forte); backdrop-filter: var(--sfoca);
  color: var(--cromo); font: inherit; font-size: 14px; font-weight: 650;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.ai-lancio:hover { transform: translateY(-2px); border-color: var(--cromo); }
.ai-lancio svg { width: 20px; height: 20px; fill: var(--cromo); flex: none; }
body.ai-aperto .ai-lancio { opacity: 0; pointer-events: none; }

.ai-pannello {
  position: fixed; right: 18px; bottom: 18px; z-index: 130;
  width: min(392px, calc(100vw - 36px));
  height: min(600px, calc(100vh - 132px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio-g); box-shadow: var(--rilievo-alto);
  transform-origin: 100% 100%;
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .22s ease, transform .24s cubic-bezier(.2, .9, .3, 1);
}
.ai-pannello.ai-su { opacity: 1; transform: none; }

/* ⚠️ QUESTE DUE RIGHE NON SI TOLGONO. L'attributo `hidden` mette
   `display:none` con una regola debolissima, e il `display:flex` qui sopra la
   batteva: il pannello chiuso restava in pagina — invisibile, ma vivo — e si
   mangiava i clic del tasto di richiamo e di quello di WhatsApp, che gli
   stanno esattamente sotto. Sul telefono copriva tutto lo schermo e il sito
   sembrava bloccato.
   La seconda riga copre i 240 ms della chiusura, quando il pannello sta
   ancora sfumando e `hidden` non e' ancora tornato. */
.ai-pannello[hidden] { display: none; }
.ai-pannello:not(.ai-su) { pointer-events: none; }

.ai-testa {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 12px 13px 16px; border-bottom: 1px solid var(--bordo);
  background: linear-gradient(180deg, var(--carta-2), var(--carta));
}
.ai-bollo {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none;
  box-shadow: 0 0 0 0 rgba(47, 208, 127, .55); animation: aiBattito 2.4s ease-out infinite;
}
@keyframes aiBattito {
  0% { box-shadow: 0 0 0 0 rgba(47, 208, 127, .5); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(47, 208, 127, 0); }
}
.ai-chi { flex: 1; min-width: 0; line-height: 1.2; }
.ai-chi b { display: block; color: #fff; font-size: 14.5px; }
.ai-chi i { display: block; font-style: normal; font-size: 11.5px; color: var(--testo-3); }
.ai-testa button {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--testo-2); transition: background-color .16s ease, color .16s ease;
}
.ai-testa button:hover { background: var(--carta-2); color: #fff; }
.ai-testa button svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.ai-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.ai-righe { display: flex; flex-direction: column; gap: 9px; }

.ai-riga {
  max-width: 86%; padding: 10px 13px; border-radius: 15px;
  font-size: 14px; line-height: 1.46; animation: aiEntra .26s ease both;
}
@keyframes aiEntra { from { opacity: 0; transform: translateY(7px); } }
.ai-suo {
  align-self: flex-start; border-bottom-left-radius: 5px;
  background: var(--carta-2); color: var(--testo); border: 1px solid var(--bordo);
}
.ai-suo b { color: #fff; }
.ai-mio {
  align-self: flex-end; border-bottom-right-radius: 5px;
  background: var(--cromo); color: #11161d; font-weight: 600;
}
/* i tre puntini mentre "pensa" */
.ai-attesa { display: flex; gap: 4px; padding: 14px 15px; }
.ai-attesa span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--testo-3);
  animation: aiPunti 1.1s ease-in-out infinite;
}
.ai-attesa span:nth-child(2) { animation-delay: .16s; }
.ai-attesa span:nth-child(3) { animation-delay: .32s; }
@keyframes aiPunti {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.ai-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; }
.ai-chip {
  display: inline-block; padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--bordo-forte); background: transparent;
  color: var(--testo-2); font: inherit; font-size: 13px; cursor: pointer;
  text-align: left; transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.ai-chip:hover { background: var(--carta-2); color: #fff; border-color: var(--acciaio); text-decoration: none; }
.ai-chip-forte {
  background: var(--cromo); color: #11161d; border-color: transparent; font-weight: 650;
}
.ai-chip-forte:hover { background: #fff; color: #11161d; }
.ai-chip-wa { background: #25d366; color: #fff; }
.ai-chip-wa:hover { background: #1eb855; color: #fff; }

.ai-piede { display: flex; gap: 8px; padding: 11px 12px; border-top: 1px solid var(--bordo); }
.ai-campo {
  flex: 1; min-width: 0; padding: 10px 15px; border-radius: 999px;
  background: var(--fondo-2); border: 1px solid var(--bordo);
  color: var(--testo); font: inherit; font-size: 14px;
}
.ai-campo::placeholder { color: var(--testo-3); }
.ai-campo:focus { outline: none; border-color: var(--acciaio); }
.ai-invia {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: var(--cromo); cursor: pointer;
}
.ai-invia svg {
  width: 19px; height: 19px; fill: none; stroke: #11161d;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.ai-nota {
  margin: 0; padding: 0 16px 13px; font-size: 11px; line-height: 1.4;
  color: var(--testo-3);
}

/* Sul telefono il pannello prende tutto lo schermo: mezzo schermo di chat
   su un telefono non e' una chat, e' una finestrella. */
@media (max-width: 640px) {
  /* ⚠️ IN FILA, non impilati. Uno sopra l'altro facevano una colonna alta 132
     px sul bordo destro, e per tutta la pagina il testo ci passava sotto: su
     /prova-dispositivo si leggeva «nessuna foto viene inviata a», su
     /contattaci «all'indirizzo che ci». Affiancati la fascia coperta scende a
     70 px, ed e' solo l'angolo. I 42 px dal fondo sono il centro del cerchio
     verde: cosi' i due stanno sulla stessa riga anche se non sono uguali. */
  .ai-lancio { right: 80px; bottom: 16px; padding: 0; width: 52px; height: 52px; justify-content: center; }
  .ai-lancio span { display: none; }
  .ai-pannello {
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100%; height: 100dvh; border-radius: 0; border: 0;
    transform: translateY(22px);
  }
  body.ai-aperto { overflow: hidden; }
  body.ai-aperto .wa-fisso { display: none; }
  .ai-riga { max-width: 90%; }
}

/* ⚠️ I campi che arrivano gia' compilati dall'assistente si devono NOTARE:
   se no la gente riscrive sopra quello che aveva appena detto. */
.ai-riempito {
  border-color: var(--acciaio) !important;
  animation: aiRiempito 2.4s ease-out 1;
}
@keyframes aiRiempito {
  0%, 40% { background-color: rgba(159, 176, 196, .16); }
  100% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-lancio, .ai-pannello, .ai-riga { transition: none; animation: none; }
  .ai-bollo, .ai-attesa span { animation: none; }
}

/* ---------------- griglia di soli titoli ---------------- */

/* ⚠️ Riquadri col solo titolo: l'imbottitura da 28 px, pensata per titolo piu'
   paragrafo, lasciava una scatola alta e mezza vuota. Qui si stringe, e le
   colonne si fanno piu' strette — con una parola sola dentro, riquadri larghi
   come prima diventavano una fila di cartelli spaiati. */
/* ⚠️ `align-items: start`: senza, la griglia allunga TUTTE le schede della
   riga fino all'altezza della piu' alta. Aprendone una, le altre sei
   diventavano scatoloni vuoti alti come la spiegazione appena aperta — una
   fila di riquadri neri senza niente dentro. Cosi' invece cresce solo quella
   che si apre. Le chiuse restano disallineate di 9 px quando il titolo va a
   capo («Passaggio al computer nuovo»), e va benissimo. */
/* ⚠️ Non e' una griglia, e' una FILA CHE VA A CAPO. Con
   `grid-template-columns: repeat(auto-fit, minmax(210px, 1fr))` le colonne
   erano sempre tutte piene tranne l'ultima riga, che restava appoggiata a
   sinistra: dieci riquadri su sette colonne facevano 7 + 3, con mezzo schermo
   vuoto a destra. Cambiando larghezza cambiava lo sbilancio, e non c'era
   verso di farlo tornare — dieci riquadri non si dividono per sette.
   Adesso:
     `flex: 1 1 210px`  i riquadri si allargano a riempire la riga, quanti ce
                        ne stanno; stringendo lo schermo ne scende uno e basta
     `max-width`        l'ultima riga, che ha pochi riquadri, non li gonfia a
                        mezzo schermo l'uno
     `justify-content`  e quel che resta sta in MEZZO, non spiaccicato a
                        sinistra. E' tutto qui il senso di «armonia».
   ⚠️ `align-items: flex-start` resta indispensabile: senza, aprendo una
   tendina tutte le altre della riga diventano scatoloni vuoti alti uguale. */
.griglia-titoli {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
/* ⚠️ `min(300px, 100%)`: il tetto serve a non gonfiare l'ultima riga, ma
   sul telefono — una colonna sola — un tetto fisso lascerebbe i riquadri
   piu' stretti del testo che gli sta accanto. */
.griglia-titoli > .scheda { flex: 1 1 210px; max-width: 240px; }
/* ⚠️ Sul telefono il tetto si toglie: li' la fila e' una colonna sola, e un
   riquadro da 260 in una pagina larga 358 resterebbe piu' stretto del testo
   che gli sta sopra. */
@media (max-width: 700px) { .griglia-titoli > .scheda { max-width: none; } }
/* ⚠️ Sono `<details>`, non riquadri con del JavaScript attaccato: l'apertura,
   il tasto invio, il lettore di schermo e la ricerca dentro alla pagina li fa
   gia' il browser. Una tendina fatta a mano va rifatta accessibile da zero, e
   di solito non la si rifa'.

   ⚠️ Il titolo sta centrato in tutti e due i versi finche' la tendina e'
   chiusa: con la sola riga dentro, appoggiato in alto a sinistra lasciava il
   riquadro sbilanciato — e si vedeva su «Connettore di ricarica», che va a
   capo mentre gli altri no. Aperta, il testo va a sinistra: una spiegazione di
   tre righe centrata non si legge. */
.griglia-titoli .scheda {
  padding: 0; min-height: 74px; justify-content: flex-start;
}
.griglia-titoli summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 20px 18px; min-height: 74px; text-align: center;
  transition: background-color .16s ease;
}
.griglia-titoli summary::-webkit-details-marker { display: none; }
.griglia-titoli summary:hover { background: rgba(255, 255, 255, .04); }
.griglia-titoli .scheda h3 { margin-bottom: 0; }
/* la freccina: gira quando si apre */
.griglia-titoli summary::after {
  content: ''; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--tinta-2); border-bottom: 2px solid var(--tinta-2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease; opacity: .8;
}
.griglia-titoli .scheda[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.griglia-titoli .scheda[open] { justify-content: flex-start; }
.griglia-titoli .scheda[open] summary { min-height: 0; padding-bottom: 12px; }
.griglia-titoli .scheda > p {
  margin: 0; padding: 0 18px 20px; text-align: left; font-size: 14.5px;
  animation: aiEntra .22s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .griglia-titoli summary::after, .griglia-titoli .scheda > p { transition: none; animation: none; }
}