/* ═════════════════════════════════════════════════════════════════════════════
   Il sito di Orthosuite.

   COLORI
   Presi dal logo vero: il verde-acqua #33B5A5 e il suo scuro #279683.
   Per un po' il prodotto ha usato un altro verde (#0f7d86) e la differenza si
   vedeva passando dal sito alla console. Adesso anche prodotto e console
   partono dal logo, con lo stesso verde scurito quanto basta a funzionare da
   colore d'interfaccia (#1b7a6b) — stessa famiglia, tono diverso perche' un
   colore da vetrina e un colore da bottone hanno due mestieri diversi.

   UNA SOLA CORNICE
   Tutte le schermate stanno dentro .monitor: riquadro arrotondato, ombra
   morbida, barra con tre pallini e la pillola dell'indirizzo. Le verticali
   usano .monitor.stretto, che e' la stessa identica cornice piu' stretta e
   senza pillola. Le scocche finte di tablet e telefono sono state tolte: erano
   imitazioni, e l'occhio guardava la cornice invece della schermata. Regola:
   la cornice non deve mai avere piu' contrasto della schermata che contiene.

   IL RITMO DELLE FASCE
   velo · bianca · crema · VERDE · bianca · grigia · crema · bianca · grigia ·
   velo. Mai due uguali di fila, una sola verde piena — e cade sulla sezione
   con l'invito piu' forte, perche' bianco su verde e' il pulsante che si vede
   di piu'. La pagina apre e chiude sul velo: e' un accordo, non una ripetizione.

   IL RICHIAMO ALL'ORTOPEDIA
   Nessuna stampella e nessun osso: farebbero catalogo di ausili. Restano due
   cose astratte — le curve di livello di una mappa di pressione plantare, e i
   trattini di un metro da misura, riusati anche per unire i quattro passi.
   ═════════════════════════════════════════════════════════════════════════════ */

:root {
  --verde:       #33B5A5;
  --verde-cupo:  #279683;
  --verde-scuro: #1c6d60;
  --verde-velo:  #e8f7f4;
  --verde-nebbia:#f2fbf9;

  --inchiostro:   #16211f;
  --inchiostro-2: #3f4b48;
  --tenue:        #6f7b78;
  --carta:        #ffffff;
  --crema:        #faf8f3;
  --grigio:       #f4f5f4;
  --bordo:        #e6e4dd;
  --bordo-grigio: #dcdcd6;   /* su fondo --grigio, --bordo sparisce */

  --ombra:      0 1px 2px rgba(22,33,31,.04), 0 10px 30px rgba(22,33,31,.07);
  --ombra-alta: 0 2px 8px rgba(22,33,31,.06), 0 28px 60px rgba(22,33,31,.13);

  /* La scocca delle schermate — vedi "LA CORNICE" piu' sotto. Sono gli stessi
     verdi-neri della fascia scura: il nero della pagina e' uno solo. */
  --scocca:       #16211f;
  --scocca-barra: #1e2c29;
  --scocca-bordo: #26352f;
  /* Un oggetto scuro su fondo chiaro ha bisogno di un'ombra piu' profonda di
     una scheda bianca, o sembra ritagliato e appiccicato. */
  --ombra-scocca: 0 2px 10px rgba(22,33,31,.10), 0 30px 64px rgba(22,33,31,.22);
  --raggio: 18px;
  --titolo: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
/* La testata sta appiccicata in alto: senza questo, ogni voce del menu porta
   la sezione SOTTO la testata e il titolo non si vede. */
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--carta); color: var(--inchiostro);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--verde-cupo); }
h1, h2, h3 { font-family: var(--titolo); letter-spacing: -.025em; }

/* ── Quanto e' larga la pagina ────────────────────────────────────────────
   Il numero non e' uno solo, perche' il contenuto non e' uno solo. Un
   paragrafo largo 1600 pixel non si legge: l'occhio perde la riga tornando a
   capo. Una tabella di quattro colonne larga 1140, invece, spreme ogni colonna
   a 270 pixel e manda "Prenotazione online e promemoria via SMS o WhatsApp" su
   tre righe.

   Cosi': il contenitore base tiene la misura di lettura, i pacchetti e le
   schermate hanno il loro, piu' largo. Allargare e' sicuro perche' ogni
   paragrafo di questa pagina ha gia' un tetto in "ch" — la lunghezza di riga
   non dipende dal contenitore, e non si allunga insieme a lui. */
.dentro { width: min(1280px, 100% - 48px); margin-inline: auto; }

/* Le quattro taglie si confrontano: qui la larghezza serve alle colonne, non
   alla lettura. A 1380 ogni card ne prende 328 invece di 270, e le voci
   smettono di spezzarsi in tre. */
/* Stesso margine laterale del contenitore base: con un margine piu'
   generoso, sugli schermi stretti i pacchetti finivano per essere PIU'
   stretti del resto della pagina — l'opposto di quello che serve. */
#pacchetti .dentro { width: min(1440px, 100% - 48px); }

/* Sopra i 1700 lo schermo e' cosi' largo che la pagina, ferma, sembra una
   colonna in mezzo al niente. Un solo scalino: piu' respiro, non il doppio. */
@media (min-width: 1700px) {
  .dentro { width: min(1420px, 100% - 88px); }
  #pacchetti .dentro { width: min(1560px, 100% - 88px); }
}

/* Sui monitor davvero grandi un ultimo scalino, e finisce qui: misurato, a
   1520 la riga di lettura arriva a 72 caratteri — il limite oltre il quale
   l'occhio comincia a perdere il ritorno a capo. Il vuoto che resta ai lati
   non e' spazio sprecato: e' il prezzo di un testo che si legge. */
@media (min-width: 2200px) {
  .dentro { width: min(1520px, 100% - 96px); }
  #pacchetti .dentro { width: min(1680px, 100% - 96px); }
}

/* ── Le fasce ────────────────────────────────────────────────────────────── */

section { padding: 96px 0; position: relative; }
#altro, #partenza { padding: 80px 0; }

.fascia-crema  { background: var(--crema); }
.fascia-grigia { background: var(--grigio); }
.fascia-velo   { background: linear-gradient(180deg, var(--verde-nebbia), var(--carta)); }
.fascia-verde  {
  background: linear-gradient(150deg, var(--verde-cupo) 0%, var(--verde-scuro) 100%);
  color: #fff;
}
.fascia-verde h2, .fascia-verde h3 { color: #fff; }
.fascia-verde p { color: rgba(255,255,255,.9); }
.fascia-verde .etichetta { color: rgba(255,255,255,.75); }

/* Le curve di livello: il richiamo all'ortopedia, senza disegnare un piede. */
.curve::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(closest-side circle at 82% 22%, transparent 0 28%, rgba(51,181,165,.13) 28% 29%, transparent 29%),
    radial-gradient(closest-side circle at 82% 22%, transparent 0 40%, rgba(51,181,165,.11) 40% 41%, transparent 41%),
    radial-gradient(closest-side circle at 82% 22%, transparent 0 54%, rgba(51,181,165,.09) 54% 55%, transparent 55%),
    radial-gradient(closest-side circle at 82% 22%, transparent 0 70%, rgba(51,181,165,.07) 70% 71%, transparent 71%);
  background-size: 760px 760px; background-repeat: no-repeat; background-position: right -180px top -120px;
}
.fascia-verde.curve::before {
  background:
    radial-gradient(closest-side circle at 50% 50%, transparent 0 30%, rgba(255,255,255,.10) 30% 31%, transparent 31%),
    radial-gradient(closest-side circle at 50% 50%, transparent 0 45%, rgba(255,255,255,.08) 45% 46%, transparent 46%),
    radial-gradient(closest-side circle at 50% 50%, transparent 0 62%, rgba(255,255,255,.06) 62% 63%, transparent 63%);
  background-size: 900px 900px; background-repeat: no-repeat; background-position: left -260px bottom -300px;
}

/* Il metro: una riga di trattini, come sul bordo di un righello. */
.metro {
  height: 14px; margin-bottom: 22px; opacity: .5;
  background: repeating-linear-gradient(90deg, var(--verde) 0 1.5px, transparent 1.5px 12px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
          mask-image: linear-gradient(90deg, #000, transparent 70%);
}
/* Per i titoli in mezzo alla colonna, sfuma da tutte e due le parti. */
.metro.centro {
  width: 180px; margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
}

/* ── Testata ─────────────────────────────────────────────────────────────── */

.testata {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.testata.giu { border-bottom-color: var(--bordo); box-shadow: 0 6px 20px rgba(22,33,31,.04); }
.testata .dentro { display: flex; align-items: center; gap: 26px; height: 74px; }
.marchio { display: flex; align-items: center; text-decoration: none; }
.marchio img { height: 34px; width: auto; }
.menu { display: flex; gap: 28px; margin-left: auto; }
.menu a { color: var(--inchiostro-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.menu a:hover { color: var(--verde-cupo); }

/* ── Il menu sugli schermi stretti ───────────────────────────────────────── */
/* Sotto i 980 il menu spariva e basta: restava solo il bottone della demo, e
   dal telefono le altre sezioni erano raggiungibili solo scorrendo tutto. */

.menu-int { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.menu-tasto { display: none; }
/* ── Il velo dietro al menu ───────────────────────────────────────────────
   Non una lastra grigia con lo spigolo netto: la pagina si SFOCA, come fa una
   qualunque app di adesso quando apre un foglio sopra al contenuto. La
   sfocatura non ha bordi, quindi non c'e' nessun rettangolo da vedere, e il
   contenuto resta riconoscibile — dice "e' ancora li', e' solo in pausa"
   invece di "ti ho coperto tutto".

   Sta sotto la testata (60) e sopra la pagina: la testata resta nitida, ed e'
   giusto, perche' e' l'unica cosa con cui si puo' ancora interagire.

   Lo accende una classe su <html>, non un selettore fratello: qui il velo non
   e' piu' fratello della spunta. Senza JavaScript il menu si apre lo stesso,
   solo senza sfocatura. */
.menu-velo {
  position: fixed; inset: 0; z-index: 55;
  /* Tinta chiarissima, non scura: serve a staccare la scheda bianca dal
     fondo sfocato, non a spegnere la pagina. Il distacco vero lo fa l'ombra
     della scheda. */
  background: rgba(240, 244, 243, .45);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  /* Il velo si mangia i gesti: un dito che parte da qui non scorre la pagina,
     e siccome copre tutto tranne la testata, la pagina di fatto e' ferma —
     senza dover vietare lo scorrimento al documento, che rompeva lo sticky. */
  touch-action: none; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity .3s cubic-bezier(.2,.7,.3,1), visibility 0s .3s;
}
.menu-fermo .menu-velo {
  opacity: 1; visibility: visible;
  transition: opacity .3s cubic-bezier(.2,.7,.3,1), visibility 0s;
}

/* Dove la sfocatura non esiste, meglio un velo chiaro che uno nero: la pagina
   resta leggibile sotto e non compare la lastra scura di prima. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu-velo { background: rgba(248, 250, 249, .82); }
}

/* ── Pulsanti ────────────────────────────────────────────────────────────── */

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-size: 15.5px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .14s, box-shadow .2s, background .2s, border-color .2s;
}
.bottone.pieno { background: var(--verde-cupo); color: #fff; box-shadow: 0 8px 22px rgba(39,150,131,.3); }
.bottone.pieno:hover { background: var(--verde-scuro); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(39,150,131,.36); }
.bottone.vuoto { background: transparent; color: var(--inchiostro); border-color: var(--bordo); }
.bottone.vuoto:hover { border-color: var(--verde-cupo); color: var(--verde-cupo); }
.bottone.chiaro { background: #fff; color: var(--verde-scuro); box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.bottone.chiaro:hover { background: #f0faf8; transform: translateY(-2px); }
.bottone.grande { padding: 17px 32px; font-size: 17px; }
.bottone svg { flex: none; }

/* Un invito tiepido: un link, non un secondo bottone. Due pulsanti affiancati
   con azioni diverse si annullano a vicenda. */
.rimando-riga { text-align: center; margin: 56px 0 0; }
.rimando {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600; color: var(--verde-cupo); text-decoration: none;
  border-bottom: 1.5px solid rgba(39,150,131,.3); padding-bottom: 3px;
}
.rimando:hover { border-bottom-color: var(--verde-cupo); }

/* ── Titoli di sezione ───────────────────────────────────────────────────── */

.titolo { text-align: center; margin-bottom: 48px; }
.titolo h2 { margin: 0 0 14px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.14; font-weight: 700; }
.titolo p { margin: 0 auto; max-width: 58ch; font-size: 18.5px; color: var(--inchiostro-2); }
.etichetta {
  display: inline-block; margin-bottom: 14px; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--verde-cupo);
}

/* ── La cornice, unica ───────────────────────────────────────────────────── */

/* LA SCOCCA E' SCURA, E NON E' UN VEZZO.
   Le schermate del programma sono a fondo nero. Dentro una cornice bianca, su
   una pagina bianca, ognuna diventava un rettangolo nero incollato li' — si
   leggeva come un buco, non come uno schermo. Scura, invece, la cornice e' la
   scocca e la schermata e' lo schermo acceso: un oggetto solo, appoggiato sulla
   pagina chiara. Vale anche per le schermate CHIARE (la prenotazione, che e'
   del cliente finale e chiara deve restare): un telefono con la cornice nera e
   dentro una pagina bianca e' esattamente quello che si ha in mano. */
.monitor {
  border-radius: 14px; background: var(--scocca); border: 1px solid var(--scocca-bordo);
  box-shadow: var(--ombra-scocca); overflow: hidden;
}
.monitor-barra {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: var(--scocca-barra); border-bottom: 1px solid var(--scocca-bordo);
}
.monitor-barra i { width: 10px; height: 10px; border-radius: 50%; background: #3d4d49; display: block; }
.monitor-indirizzo {
  margin-left: 10px; padding: 4px 14px; border-radius: 999px;
  background: #121b19; border: 1px solid #2b3a36;
  font-size: 11px; color: #8b9a96; flex: 1; max-width: 260px;
}
/* Il fondo dell'immagine finche' non e' arrivata: scuro come quello che
   arrivera', o a ogni caricamento si vede un lampo bianco dentro la scocca. */
.monitor img, .monitor picture { width: 100%; height: auto; display: block; background: var(--scocca); }

/* Le verticali: stessa cornice, piu' stretta e senza pillola. A trecento pixel
   una pillola con l'indirizzo dentro sembrerebbe una barra di browser
   rimpicciolita male — e la proporzione dice gia' che e' un telefono, senza
   bisogno di disegnargli attorno una scocca di plastica. */
.monitor.stretto { width: min(300px, 100%); margin-inline: auto; }
.monitor.stretto .monitor-barra { padding: 8px 11px; gap: 6px; }
.monitor.stretto .monitor-barra i { width: 8px; height: 8px; }
.monitor.stretto .monitor-indirizzo { display: none; }

/* Due schermate che raccontano una sequenza: la seconda sfalsata, o leggono
   come due lapidi simmetriche invece che come "prima questa, poi quella". */
.monitor-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.monitor-coppia .monitor.stretto { width: 100%; }
.monitor-coppia > :nth-child(2) { margin-top: 34px; }

/* ── 1 · Apertura ────────────────────────────────────────────────────────── */

/* --apertura-fondo: quanto e' alto lo spazio sotto lo schermo. Il palco
   scuro ci si aggancia per finire esatto sul taglio della fascia, invece di
   fermarsi prima (una striscia chiara di sotto) o sconfinare nella sezione
   dopo. Cambiando il riempimento va cambiato anche qui. */
.apertura { padding: 56px 0 96px; overflow: hidden; --apertura-fondo: 96px; }
.apertura-testa { max-width: 780px; margin-inline: auto; text-align: center; }
.apertura-testa .sommario { margin: 0 auto 32px; max-width: 58ch; }
.apertura-testa .azioni { justify-content: center; }

/* "Nato dentro un'ortopedia" e' l'unica cosa che questa pagina puo' dire e i
   concorrenti no. Era scritta piu' piccola della didascalia sotto i pulsanti:
   la frase piu' forte del sito, messa in punta di piedi. Adesso ha il corpo di
   un testo che si legge stando in piedi davanti allo schermo, non chinandosi.
   Cresciuta, non gridata: resta una pastiglia sopra il titolo, e il titolo
   resta il titolo. */
.occhiello {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 18px 7px 8px; border-radius: 999px;
  background: #fff; border: 1px solid var(--bordo);
  color: var(--inchiostro-2); font-size: 15.5px; font-weight: 500; margin-bottom: 26px;
  box-shadow: 0 3px 12px rgba(22,33,31,.07);
}
.occhiello b {
  background: var(--verde-cupo); color: #fff; border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
/* Sul telefono la pastiglia intera non ci sta su una riga: invece di sfondare
   il bordo dello schermo va a capo, con la parte verde sopra e il resto sotto,
   e resta leggibile. */
/* E VA CENTRATO. Un inline-flex che deve andare a capo non e' piu' largo
   quanto il suo contenuto: si prende tutta la riga, e le due righe dentro
   restavano incollate a sinistra mentre titolo, sommario e pulsanti erano
   centrati. Sul telefono era l'unica cosa storta della prima schermata — e la
   prima schermata e' quella che decide se uno continua a leggere (26/09/2026). */
@media (max-width: 560px) {
  .occhiello {
    flex-wrap: wrap; font-size: 14.5px; row-gap: 6px;
    justify-content: center; text-align: center;
  }
}

h1 {
  margin: 0 0 22px;
  font-size: clamp(38px, 6.2vw, 76px); font-weight: 700;
  /* Interlinea 1.16 e non piu' .98. Misurato sul carattere vero: la coda della
     "g" scende di 0,282em sotto la linea di base e il puntino della "i" sale a
     0,820em sopra la sua — 1,101em di inchiostro fra due linee di base
     consecutive, contro 0,98 di riga. Le due righe si sovrapponevano di 0,12em
     (4,7 pixel misurati), ed e' per questo che la "i" di "i conti" toccava la
     "g" di "gestionale".
     1.16 lascia 0,06em di aria vera: il titolo resta stretto come deve essere
     un titolo da vetrina, ma nessuna coda tocca piu' nessun puntino. Essendo un
     rapporto e non un valore fisso, vale identico ai 38 pixel del telefono e ai
     76 del desktop. */
  line-height: 1.16;
  letter-spacing: -.04em; text-wrap: balance;
}
/* La seconda riga prende luce invece di colore piatto: e' il punto piu' alto
   della gerarchia della pagina e puo' permetterselo. Il colore pieno resta
   dichiarato PRIMA, cosi' se il ritaglio sul testo non e' supportato la frase
   non sparisce — un titolo invisibile e' il modo peggiore di essere moderni. */
h1 em {
  font-style: normal; color: var(--verde-cupo);
  background: linear-gradient(96deg, #1c6d60 0%, #33B5A5 52%, #45cbb4 100%);
  -webkit-background-clip: text; background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  h1 em { color: transparent; }
}
.sommario { margin: 0 0 32px; font-size: 19.5px; line-height: 1.6; color: var(--inchiostro-2); }
.azioni { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* I due inviti, ovunque compaiano. Venti e non dodici: il pulsante pieno ha un
   alone di 26px che sconfina sul vicino, e con dodici i due si toccavano — la
   coppia sembrava un interruttore a due posizioni invece di due strade. */
.inviti {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  vertical-align: middle;
}
.sotto-azioni { margin: 20px 0 0; font-size: 14.5px; color: var(--tenue); }
/* "Guarda cosa fa" era il terzo pulsante dell'apertura, e un terzo pulsante
   toglie peso alle due decisioni vere. Qui sotto porta nello stesso posto
   senza competere: scorrere e' quello che uno fa comunque. */
.sotto-azioni-link { white-space: nowrap; }
/* Nella testata il pulsante ha due testi, lungo e corto: sotto i 700px resta il
   corto. Di serie si vede il lungo — la regola che lo spegne sta piu' giu',
   dentro la media query. */
.testata .bottone .corto { display: none; }

.apertura-schermo { position: relative; max-width: 1280px; margin: 52px auto 0; }
@media (min-width: 1700px) { .apertura-schermo { max-width: 1420px; } }
@media (min-width: 2200px) { .apertura-schermo { max-width: 1520px; } }
/* Un alone verde dietro la finestra: la stacca dal velo senza aggiungere bordi. */
.apertura-schermo::before {
  content: ''; position: absolute; inset: 14% 4% -8%; z-index: -1; filter: blur(46px);
  background: radial-gradient(62% 60% at 50% 42%, rgba(51,181,165,.20), transparent 72%);
}

/* IL PALCO SCURO SOTTO L'APERTURA
   La meta' alta della pagina era tutta pallida — velo, bianco, crema — e il
   primo colore vero arrivava al quarto blocco. Qui il fondo si scurisce a meta'
   dello schermo e arriva fino al taglio della fascia: il titolo resta sulla
   luce, lo schermo si appoggia sul buio. E' lo stesso nero dei pacchetti, non
   un quinto colore, cosi' l'apertura e il punto in cui si decide il prezzo si
   rispondono da lontano.

   La larghezza e' 100vw perche' il palco deve arrivare ai bordi della finestra
   mentre lo schermo resta incolonnato col testo: e' la fascia a tagliarlo
   (.apertura ha overflow:hidden), quindi non spunta nessuna barra in basso. */
.apertura-schermo::after {
  content: ''; position: absolute; z-index: -2; pointer-events: none;
  left: 50%; transform: translateX(-50%); width: 100vw;
  top: 30%; bottom: calc(-1 * var(--apertura-fondo));
  background: #0B1614;
}
/* La stessa trama a puntini della fascia dei pacchetti: senza, un fondo scuro
   grande legge come un buco; con, legge come una superficie. */
.apertura-schermo::after { background-image: radial-gradient(rgba(255,255,255,.055) .5px, transparent .5px); background-size: 3px 3px; }

/* Sul palco l'ombra della scocca non si vede piu' — il nero non fa ombra sul
   nero. Al suo posto un filo di luce sul bordo, che e' come si stacca davvero
   un oggetto scuro da un fondo scuro. */
.apertura-schermo .monitor {
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 40px 80px rgba(0,0,0,.5);
}

/* ── 2 · Il confine ──────────────────────────────────────────────────────── */

.confine {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 40px;
  align-items: stretch; max-width: 1080px; margin-inline: auto;
}
.confine-colonna {
  padding: 30px 32px; border-radius: var(--raggio);
  background: #fff; border: 1px solid var(--bordo);
}
/* Quella del gestionale: grigia e tratteggiata. Non e' casa nostra. */
.confine-colonna.altrui { background: var(--grigio); border-style: dashed; }
.confine-colonna.nostra { border-color: #cfe9e2; box-shadow: var(--ombra); }
.confine-colonna h3 {
  margin: 0 0 6px; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--tenue);
}
.confine-colonna.nostra h3 { color: var(--verde-cupo); }
.confine-colonna ul { list-style: none; margin: 0; padding: 0; }
.confine-colonna li {
  display: flex; align-items: center; gap: 12px; padding: 13px 0;
  border-top: 1px solid var(--bordo); font-size: 17px; font-weight: 500;
}
.confine-colonna li:first-of-type { border-top: 0; }
/* L'asimmetria e' voluta: a sinistra un trattino, a destra un'icona verde.
   Detto senza parole: quella roba non e' nostra e non la tocchiamo. */
.confine-colonna.altrui li::before { content: ''; width: 18px; height: 1.5px; background: #c9c6bd; flex: none; }
.confine-colonna.nostra li svg { color: var(--verde-cupo); flex: none; }

.confine-linea {
  position: relative; width: 1px;
  background: linear-gradient(180deg, transparent, var(--bordo) 16%, var(--bordo) 84%, transparent);
}
/* Un "+", non un "vs": il messaggio e' che i due si sommano.

   TONDO, non una pastiglia. Con padding asimmetrico veniva 37x30: un ovale
   schiacciato che non sembrava ne' un pulsante ne' un segno, solo una cosa
   capitata li'. Un cerchio vero, alto quanto largo, si legge come un simbolo. */
.confine-linea span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 999px;
  font-family: var(--titolo); font-weight: 700; font-size: 16px;
  color: var(--tenue); line-height: 1;
}
.confine-chiusura { max-width: 62ch; margin: 38px auto 0; text-align: center; color: var(--inchiostro-2); }

/* ── 3 · Come lavori oggi ────────────────────────────────────────────────── */

.oggi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* Niente verde e nessun sollevamento al passaggio: queste quattro carte non
   sono funzioni da desiderare, sono lo stato attuale. */
.oggi-carta { padding: 26px 24px 24px; border-radius: var(--raggio); background: #fff; border: 1px solid var(--bordo); }
.oggi-segno {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 15px;
  border-radius: 12px; background: var(--grigio); color: #8d8a80;
}
.oggi-carta h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.oggi-carta p  { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tenue); }
.oggi-chiusura {
  max-width: 64ch; margin: 40px auto 0; padding-top: 30px; border-top: 1px solid var(--bordo);
  text-align: center; color: var(--inchiostro-2);
}

/* ── 4 · I tre accenti ───────────────────────────────────────────────────── */

.accenti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* Traslucide, non bianche: tre riquadri pieni spegnerebbero la fascia e
   ruberebbero il colpo d'occhio al pulsante bianco sotto. */
.accento {
  padding: 30px 28px; border-radius: var(--raggio);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
}
.accento:nth-child(3) { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.13); }
.accento-segno {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px;
  border-radius: 13px; background: rgba(255,255,255,.16); color: #fff;
}
.accento h3 { margin: 0 0 10px; font-size: 20px; font-weight: 650; }
.accento p  { margin: 0 0 16px; font-size: 15.5px; }
.accento .punti { margin: 0; }
.accento .punti li { padding: 9px 0; font-size: 14.5px; border-top: 1px solid rgba(255,255,255,.14); }
.accento .punti li:first-child { border-top: 0; }
.accenti-azione { text-align: center; margin: 46px 0 0; }

/* ── 5 · Le quattro funzioni ─────────────────────────────────────────────── */

.dettaglio { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; }
/* Quando la schermata e' una verticale stretta, il testo si prende lo spazio. */
.dettaglio.snello { grid-template-columns: 1.4fr .8fr; }
.dettaglio + .dettaglio { margin-top: 96px; }
.dettaglio.rovescio > :first-child { order: 2; }
.dettaglio h3 { margin: 0 0 18px; font-size: clamp(25px, 2.8vw, 33px); line-height: 1.2; font-weight: 650; }
.dettaglio p { margin: 0 0 22px; color: var(--inchiostro-2); }

.punti { list-style: none; margin: 0; padding: 0; }
.punti li { display: flex; gap: 12px; padding: 8px 0; font-size: 15.5px; color: var(--inchiostro-2); }
.punti svg { flex: none; margin-top: 4px; color: var(--verde-cupo); }
.fascia-verde .punti li { color: rgba(255,255,255,.92); }
.fascia-verde .punti svg { color: #fff; }

/* ── 6 · E poi tutto il resto ────────────────────────────────────────────── */

.resto { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; max-width: 980px; margin-inline: auto; }
/* Se le voci sono in numero dispari, l'ultima resterebbe sola a meta' riga con
   mezzo vuoto accanto, e si vede. Occupando tutta la larghezza il blocco chiude
   diritto. La regola si spegne da sola quando le voci tornano pari — :last-child
   e :nth-child(odd) insieme sono veri solo su un totale dispari. */
.resto-voce:last-child:nth-child(odd) { grid-column: 1 / -1; }
.resto-voce {
  display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start;
  padding: 18px 0; border-top: 1px solid var(--bordo-grigio);
}
.resto-voce:nth-child(1), .resto-voce:nth-child(2) { border-top: 0; padding-top: 0; }
.resto-segno {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; background: var(--verde-velo); color: var(--verde-cupo);
}
.resto-voce h3 { margin: 0 0 3px; font-size: 16.5px; font-weight: 600; }
.resto-voce p  { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tenue); }
.resto-schermo { max-width: 900px; margin: 52px auto 0; }

/* ── 7 · Da dove nasce ───────────────────────────────────────────────────── */

.origine { display: grid; grid-template-columns: 1.05fr .95fr; gap: 58px; align-items: center; }
.origine h2 { margin: 0 0 20px; font-size: clamp(27px, 3.2vw, 38px); line-height: 1.18; }
.origine p { color: var(--inchiostro-2); margin: 0 0 18px; }
.origine p:last-of-type { margin-bottom: 28px; }
.citazione {
  margin: 0; padding: 32px 34px; border-radius: var(--raggio);
  background: #fff; border: 1px solid var(--bordo); box-shadow: var(--ombra);
  font-size: 18.5px; line-height: 1.58; font-family: var(--titolo); font-weight: 500;
}
/* Le virgolette come segno, non come testo: fa leggere la citazione come voce
   di qualcuno invece che come un altro paragrafo dentro un riquadro. */
.citazione::before {
  content: '«'; display: block; font-family: var(--titolo); font-size: 46px;
  line-height: .7; color: var(--verde); opacity: .35; margin-bottom: 10px;
}
.citazione footer { margin-top: 18px; font-size: 14px; color: var(--tenue); font-family: inherit; font-weight: 400; }

/* Le colonne che entrano di lato escono dalla pagina quando il margine
   laterale e' piu' stretto del loro spostamento. Tagliare qui e' l'unico modo
   che non dipende da quanto e' largo lo schermo. */
#confine, #funzioni { overflow-x: clip; }

/* ── 8 · Come si parte ───────────────────────────────────────────────────── */

/* Restano a 1040 di proposito: sono un righello, e le tacche vanno lette tutte
   in un colpo d'occhio. Allargarlo lo farebbe smettere di sembrare una misura. */
.passi {
  /* Lo spazio fra i passi e la meta' della marca: da questi due numeri dipende
     dove finisce il tratto, quindi vivono qui una volta sola. */
  --passo-vuoto: 22px;
  --passo-mezzo: 27px;
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0 var(--passo-vuoto);
}
/* IL PERCORSO E' UN METRO CHE SI RIEMPIE.
   Il tratteggio e' la misura ancora da prendere; mentre scorri, ogni passo si
   tira dietro il suo tratto pieno e il metro si compie. Il richiamo al mestiere
   c'era gia' — quello che mancava era che succedesse qualcosa. */
.passo { position: relative; text-align: center; }
.passo-marca, .passo-chi { margin-inline: auto; }

/* La misura ancora da prendere. Stessa posizione del tratto pieno: si scrive
   una volta sola, sotto. */
.passo::after {
  content: ''; position: absolute; z-index: 0; opacity: .4;
  /* Da centro colonna a centro colonna: in percentuale, cosi' non dipende da
     quanto sono larghe — e le marche stanno esattamente li'. */
  left: 50%; right: calc(-50% - var(--passo-vuoto)); top: var(--passo-mezzo); height: 2px;
  background: repeating-linear-gradient(90deg, var(--verde) 0 6px, transparent 6px 12px);
}
.passo:last-child::after { content: none; }

/* Il tratto pieno di QUESTO passo, fino al prossimo. Il ritardo e' lo stesso
   dello sfalsamento delle rivelazioni, quindi il metro si riempie da sinistra
   nell'ordine in cui i passi entrano. */
.passo::before {
  content: ''; position: absolute; z-index: 1;
  left: 50%; right: calc(-50% - var(--passo-vuoto)); top: var(--passo-mezzo); height: 2px;
  border-radius: 2px; background: var(--verde);
  transform-origin: left top;
  transform: scale(var(--sx, 1), var(--sy, 1));
  transition: transform .62s cubic-bezier(.3,.9,.4,1) var(--ritardo, 0s);
}
.passo:last-child::before { content: none; }
/* Senza JavaScript il metro nasce gia' pieno: si nasconde solo sotto .moto. */
.moto .passo::before { --sx: 0; }
.moto .passo.visto::before { --sx: 1; --sy: 1; }

/* La marca: il segno di cosa succede, col numero appeso. Il numero da solo
   diceva "sei al terzo di quattro" e nient'altro; il segno dice cosa succede
   prima ancora di leggere il titolo. L'alone bianco lo stacca dal metro che
   gli passa dietro. */
.passo-marca {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: 54px; height: 54px; margin-bottom: 20px; border-radius: 17px;
  background: var(--verde-velo); color: var(--verde-cupo);
  box-shadow: 0 0 0 6px var(--carta), 0 8px 18px -10px rgba(39,150,131,.5);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.passo-numero {
  position: absolute; top: -8px; right: -8px;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--verde-cupo); color: #fff;
  font-family: var(--titolo); font-size: 12.5px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 3px var(--carta);
}

/* Chi lo fa. E' la risposta alla paura vera di questo mestiere — "e poi mi
   ritrovo un programma vuoto da riempire" — e in colonna si legge in un colpo:
   tre volte "lo facciamo noi". */
.passo-chi {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 10px; padding: 4px 11px; border-radius: 999px;
  background: var(--verde-velo);
  /* Non var(--verde-cupo): su questo velo verde fa 3,30:1, e undici pixel in
     grassetto per WCAG NON sono "testo grande" (servono 18,66), quindi la
     soglia resta 4,5. Questo verde piu' cupo fa 4,70. Misurato, non scelto
     a occhio. */
  color: #1f7a6b;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
/* var(--tenue) sul grigio faceva 4,02: stesso motivo, stessa soglia. 4,92. */
.passo-chi.tuo { background: var(--grigio); color: #616d6a; }

.passo h3 { margin: 0 0 7px; font-size: 18.5px; font-weight: 650; line-height: 1.25; }
.passo p  { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tenue); }
.passi-azione { text-align: center; margin: 46px 0 0; }

/* ── 9 · Le domande ──────────────────────────────────────────────────────── */

/* Undici righe nude su fondo grigio sono un muro; dentro una scheda bianca
   diventano un oggetto, e le linee di separazione tornano leggibili. */
.domande { max-width: 820px; margin-inline: auto; }
.domande.scheda {
  background: #fff; border: 1px solid var(--bordo); border-radius: 22px;
  padding: 4px 32px; box-shadow: var(--ombra);
}
.domanda { border-bottom: 1px solid var(--bordo); }
.domanda:last-child { border-bottom: 0; }
.domanda summary {
  display: flex; align-items: center; min-height: 62px;
  padding: 21px 46px 21px 0; cursor: pointer; list-style: none; position: relative;
  font-size: 17.5px; font-weight: 600; font-family: var(--titolo);
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary:hover { color: var(--verde-cupo); }
.domanda summary::after {
  content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 26px; font-weight: 300; color: var(--verde-cupo); line-height: 1;
}
.domanda[open] summary::after { content: '−'; }
.domanda p { margin: 0 0 24px; color: var(--inchiostro-2); max-width: 64ch; }

/* ── 10 · Il modulo ──────────────────────────────────────────────────────── */

.modulo-contatto { display: grid; grid-template-columns: .92fr 1.08fr; gap: 58px; align-items: start; }
.modulo-contatto h2 { margin: 0 0 18px; font-size: clamp(27px, 3.2vw, 38px); line-height: 1.18; }
.modulo-contatto > div > p { color: var(--inchiostro-2); margin: 0 0 22px; }
.modulo-contatto .punti li strong { color: var(--inchiostro); font-weight: 650; }

.scheda-modulo {
  padding: 34px; border-radius: 22px; background: #fff;
  border: 1px solid var(--bordo); box-shadow: var(--ombra-alta);
}
.campo { margin-bottom: 17px; }
.campo label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
.campo .facolt { font-weight: 400; color: var(--tenue); }
.campo input, .campo textarea {
  width: 100%; padding: 14px 15px; border-radius: 12px;
  border: 1px solid var(--bordo); background: var(--grigio);
  /* Mai sotto i 16px: iOS ingrandisce la pagina al primo tocco e non la
     rimpicciolisce piu'. */
  font: inherit; font-size: 16px; color: var(--inchiostro);
}
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--verde); background: #fff;
  box-shadow: 0 0 0 3px rgba(51,181,165,.16);
}
.campo-due { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.scheda-modulo .bottone { width: 100%; margin-top: 8px; }
.minuta { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--tenue); text-align: center; }

/* La trappola: un campo che un umano non vede e non compila mai. Niente
   display:none, che i programmi piu' svegli riconoscono. */
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.esito { padding: 17px 19px; border-radius: 13px; margin-bottom: 22px; font-size: 15px; line-height: 1.5; }
.esito.bene { background: #e4f5ef; color: #1e6b57; border: 1px solid #bfe4d7; }
.esito.male { background: #fdeaea; color: #a03636; border: 1px solid #f2caca; }

/* ── Piede ───────────────────────────────────────────────────────────────── */

.piede { padding: 52px 0 40px; background: #16211f; color: #cfd6d4; }
.piede .marchio img { height: 30px; filter: brightness(0) invert(1); opacity: .92; }
.piede-righe { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.piede-righe .marchio { margin-right: auto; }
.piede a { color: #9fada9; text-decoration: none; font-size: 14.5px; }
.piede a:hover { color: #fff; }
.piede-nota {
  margin: 30px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13.5px; color: #7d8c88; max-width: 70ch;
}


/* ── Il menu del telefono ────────────────────────────────────────────────── */
/* La soglia e' MISURATA, non scelta a occhio: logo (142) + i quattro link
   (356) + il bottone (186) + spazi stanno in 780px. Chiudere la navigazione
   prima vuol dire nasconderla mentre c'e' ancora posto — e una navigazione
   nascosta e' una navigazione che quasi nessuno apre. */
@media (max-width: 820px) {
  .menu-tasto {
    display: grid; gap: 5px; padding: 14px 11px;   /* 44x44: la misura di un dito */
    cursor: pointer; border-radius: 12px;
  }
  .menu-tasto span {
    display: block; width: 22px; height: 2px; border-radius: 2px;
    background: var(--inchiostro-2);
    transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .18s;
  }
  .menu-int:checked ~ .menu-tasto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-int:checked ~ .menu-tasto span:nth-child(2) { opacity: 0; }
  .menu-int:checked ~ .menu-tasto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .menu-int:focus-visible ~ .menu-tasto { outline: 2px solid var(--verde-cupo); outline-offset: 2px; }

  /* Il tasto e' l'ultimo della riga: e' il bottone della demo a spingere. */
  .testata .bottone { margin-left: auto; }

  /* ── La scheda ───────────────────────────────────────────────────────────
     E' una SCHEDA, non un lenzuolo incollato alla testata: staccata di sei
     pixel, con lo stesso raggio e la stessa ombra delle altre schede del sito.
     Cosi' il rientro laterale smette di sembrare un errore e diventa la forma
     della cosa — prima era un rettangolo con gli angoli vivi in una pagina
     fatta tutta di curve.

     Sfondo PIENO. Prima era bianco al 97% con un backdrop-filter annidato
     dentro quello della testata: due filtri uno dentro l'altro non si
     compongono come ci si aspetta, e il titolo della pagina si leggeva
     attraverso i nomi delle voci. Un menu dev'essere opaco: la leggibilita'
     viene prima dell'effetto, sempre. */
  .menu {
    /* Larga quanto serve, non quanto lo schermo: quattro voci corte stese su
       tutta la larghezza lasciano mezza scheda vuota, e una scheda mezza vuota
       sembra un errore di caricamento. Sta a destra, sotto il tasto che l'ha
       aperta — e' da li' che deve sembrare uscita. */
    position: absolute; left: auto; right: 0; top: calc(100% + 8px);
    width: min(300px, calc(100vw - 40px));
    flex-direction: column; gap: 0; margin: 0; padding: 6px 20px;
    background: var(--carta);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(22,33,31,.06),
                0 24px 48px -20px rgba(22,33,31,.30);
    display: flex;
    visibility: hidden; opacity: 0; transform: translateY(-12px) scale(.98);
    transform-origin: 100% 0;              /* si apre dal tasto che l'ha aperta */
    transition: opacity .18s, transform .3s cubic-bezier(.2,.7,.3,1), visibility 0s .3s;
  }
  .menu-int:checked ~ .menu {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .2s, transform .36s cubic-bezier(.28,1.12,.42,1), visibility 0s;
  }

  /* Righe piu' basse e senza righelli da tabella. Prima erano alte 58 pixel con
     una linea sotto ognuna: con mezza riga vuota a destra sembrava un foglio di
     calcolo, non un menu. La linea resta solo FRA le voci. */
  .menu a {
    padding: 13px 0; font-size: 17px; font-weight: 600; line-height: 1.3;
    color: var(--inchiostro);
    border-bottom: 1px solid var(--bordo);
    /* Entrano una dopo l'altra, come le card dei pacchetti. */
    opacity: 0; transform: translateY(-6px);
    transition: opacity .22s var(--rit-voce, 0s),
                transform .34s cubic-bezier(.28,1.12,.42,1) var(--rit-voce, 0s),
                color .18s;
  }
  .menu a:last-child { border-bottom: 0; }
  .menu a:nth-child(2) { --rit-voce: .045s; }
  .menu a:nth-child(3) { --rit-voce: .09s;  }
  .menu a:nth-child(4) { --rit-voce: .135s; }
  .menu-int:checked ~ .menu a { opacity: 1; transform: none; }
  .menu a:active { color: var(--verde-cupo); }

  /* La testata deve poter ospitare la scheda e il velo che le escono da sotto. */
  .testata .dentro { position: relative; }

  /* Qui c'era "overflow: hidden" per fermare lo scorrimento. Toglieva al
     documento il suo contenitore di scorrimento e con quello moriva
     position:sticky: aprendo il menu a meta' pagina, la testata tornava in
     cima al documento — migliaia di pixel piu' su — e si portava via la
     scheda. Restava solo il velo sfocato.

     Adesso la pagina non si ferma per divieto ma perche' non la si raggiunge:
     il velo copre tutto e si mangia i gesti (vedi .menu-velo). La testata
     resta appiccicata dov'e', ed e' l'unica cosa ancora toccabile. */
}

/* ── Schermi stretti ─────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  html { scroll-padding-top: 80px; }   /* la testata qui e' piu' bassa */
  section { padding: 68px 0; }
  #altro, #partenza { padding: 60px 0; }
  .apertura { padding: 40px 0 64px; --apertura-fondo: 64px; }
  .titolo { margin-bottom: 40px; }

  .testata .dentro { gap: 14px; }

  .apertura-schermo { margin-top: 40px; }
  .dettaglio, .dettaglio.snello, .origine, .modulo-contatto { grid-template-columns: 1fr; gap: 40px; }
  .dettaglio + .dettaglio { margin-top: 64px; }
  .dettaglio.rovescio > :first-child { order: 0; }

  .oggi { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  /* Con due colonne la terza card resterebbe orfana e si noterebbe. */
  .accenti { grid-template-columns: 1fr; }
  .accento { padding: 26px; }

  .confine { grid-template-columns: 1fr; gap: 20px; }
  .confine-linea {
    width: 100%; height: 36px;
    background: linear-gradient(90deg, transparent, var(--bordo) 16%, var(--bordo) 84%, transparent) center/100% 1px no-repeat;
  }

  .resto { grid-template-columns: 1fr; }
  .resto-voce:nth-child(2) { border-top: 1px solid var(--bordo-grigio); padding-top: 18px; }

  /* ── Il percorso si rimette in piedi ────────────────────────────────────
     Niente stato a due colonne: quattro marche in un quadrato due per due
     sembrano una pulsantiera, non un percorso, e il metro li' non tornerebbe
     comunque. Da qui in giu' e' una colonna sola, uno sotto l'altro, e il
     metro si riempie dall'alto mentre scorri — che e' poi la cosa che il
     percorso deve fare. */
  /* Centrato anche qui, come sul largo: la marca sopra, il testo sotto,
     entrambi sull'asse. La colonna con la marca di fianco funzionava, ma
     costringeva il testo a sinistra e faceva due allineamenti diversi nella
     stessa sezione a seconda dello schermo.

     Il tratto adesso vive NELLO SPAZIO fra un passo e l'altro, non di fianco
     al testo: non ha niente da attraversare, e la sua lunghezza e' esattamente
     lo spazio che separa le tappe. Un numero solo, --passo-salto, governa tutti
     e due — se un giorno cambia l'aria, il tratto la segue. */
  .passi { --passo-salto: 46px; grid-template-columns: 1fr; gap: var(--passo-salto); }
  .passo { display: block; text-align: center; }
  .passo-marca { margin: 0 auto 15px; }
  .passo-chi { margin-inline: auto; }

  .passo::before, .passo::after {
    content: ''; left: 50%; right: auto; top: 100%; bottom: auto;
    width: 2px; height: var(--passo-salto); margin-left: -1px;
  }
  .passo:last-child::before, .passo:last-child::after { content: none; }
  .passo::after {
    background: repeating-linear-gradient(180deg, var(--verde) 0 6px, transparent 6px 12px);
  }
  .moto .passo::before { --sx: 1; --sy: 0; }

  /* Meno schiacciato: il respiro fra chip, titolo e testo faceva sembrare le
     tre righe una cosa sola. */
  .passo-chi { margin-bottom: 13px; }
  .passo h3 { margin-bottom: 9px; }
  .passo p  { line-height: 1.6; max-width: 34ch; margin-inline: auto; }
}

@media (max-width: 620px) {
  .dentro { width: calc(100% - 32px); }
  section { padding: 52px 0; }
  .apertura { padding: 34px 0 56px; --apertura-fondo: 56px; }
  .titolo { margin-bottom: 32px; }
  .testata .dentro { height: 64px; }

  h1 { font-size: clamp(34px, 9.4vw, 60px); letter-spacing: -.035em; }
  .apertura-testa .sommario { font-size: 17.5px; max-width: 40ch; }
  /* In colonna sul telefono: il contenitore degli inviti si allarga con loro,
     o i due pulsanti restano larghi quanto il testo dentro un blocco stretto. */
  .azioni .inviti, .inviti { display: flex; width: 100%; }
  .azioni .bottone, .inviti .bottone { width: 100%; }
  /* La schermata si prende i margini della pagina: trentadue pixel di
     larghezza vera in piu' su un'immagine sono tanti. */
  .apertura-schermo { margin-top: 32px; width: calc(100% + 32px); margin-left: -16px; }

  .oggi { grid-template-columns: 1fr; gap: 14px; }

  /* ── CENTRATI, COME TUTTO IL RESTO DELLA PAGINA ─────────────────────────
     Su quattro colonne una carta e' una colonna, e il testo a sinistra e'
     giusto: l'occhio scorre in orizzontale e gli serve un bordo comune da cui
     partire. Impilate su una colonna sola non e' piu' vero — si legge
     dall'alto in basso, tutto il resto della pagina e' centrato, e quelle
     restavano le uniche cose appoggiate al bordo sinistro.

     Le chiusure di sezione erano addirittura FORZATE a sinistra qui dentro,
     mentre sul computer sono centrate: la stessa frase cambiava allineamento
     passando dal telefono al portatile (26/09/2026). */
  .oggi-carta { padding: 22px 20px; text-align: center; }
  .oggi-segno { margin-inline: auto; }
  .oggi-chiusura, .confine-chiusura { text-align: center; }

  .accento { padding: 24px 20px; }
  .accento h3 { font-size: 18.5px; }
  .accento .punti li { font-size: 14px; }

  .confine-colonna { padding: 22px 20px; }
  .confine-colonna li { font-size: 16px; }

  .monitor.stretto { width: min(260px, 100%); }
  .monitor-coppia { grid-template-columns: 1fr; gap: 18px; }
  .monitor-coppia .monitor.stretto { width: min(250px, 100%); }
  .monitor-coppia > :nth-child(2) { margin-top: 0; }
  .dettaglio h3 { font-size: clamp(22px, 6vw, 33px); }
  .punti li { font-size: 15px; }

  /* La colonna c'e' gia' da 980 in giu': qui resta solo il testo un po' piu'
     grande, che sul telefono si legge meglio. */
  .passo h3 { font-size: 19px; }
  .passo p  { font-size: 15.5px; }

  .domande.scheda { padding: 2px 20px; border-radius: 18px; }
  .domanda summary { font-size: 16.5px; padding-right: 40px; }

  /* Origine e "richiedi una demo" sul computer hanno il testo in una colonna
     e altro di fianco: li' allineato a sinistra e' giusto. Impilati no, e
     restavano gli ultimi due titoli di sezione fuori asse rispetto a tutti
     gli altri. Gli ELENCHI restano a sinistra: centrare delle voci puntate,
     con l'icona che balla riga per riga, si legge peggio — non e' una
     dimenticanza. */
  .origine .etichetta, .origine h2, .origine p,
  .contatto-testo .etichetta, .contatto-testo h2, .contatto-testo > p {
    text-align: center;
  }
  .origine .metro, .contatto-testo .metro { margin-inline: auto; }

  .campo-due { grid-template-columns: 1fr; }
  .scheda-modulo { padding: 24px; }
  .citazione { padding: 24px; font-size: 17px; }

  /* ── IL PIEDE, CENTRATO ─────────────────────────────────────────────────
     In fila su una riga sola (come sul computer) i link vanno a capo da soli
     e si incolonnano a sinistra sotto il logo: si legge come una lista mal
     riuscita, non come un piede. Centrati tornano a essere quello che sono. */
  .piede-righe { justify-content: center; text-align: center; gap: 16px 22px; }
  .piede-righe .marchio { margin-right: 0; flex-basis: 100%; }
  .piede-nota { text-align: center; margin-inline: auto; }

  /* La barra fissa in fondo copre gli ultimi 75 pixel della pagina SEMPRE.
     Mentre si scorre non e' un problema — si continua a scorrere — ma in fondo
     alla pagina non c'e' piu' niente da scorrere, e l'ultima riga del piede
     restava nascosta sotto il pulsante. Lo spazio si aggiunge al piede e non
     al body: cosi' resta scuro come il piede, invece di aprire una striscia
     bianca sotto (26/09/2026). */
  .piede { padding-bottom: calc(40px + 76px + env(safe-area-inset-bottom, 0px)); }
}

/* Sotto i 420 il logo piu' il pulsante non ci stanno: il pulsante si accorcia. */
@media (max-width: 420px) {
  .testata .bottone { padding: 11px 16px; font-size: 14.5px; }
  .testata .bottone .lungo { display: none; }
  .testata .bottone .corto { display: inline; }
}

/* ── Follow-up ───────────────────────────────────────────────────────────────
   Fascia scura, non verde: il verde e' la firma dei tre accenti, e riusarlo lo
   svaluterebbe. Il nero dice "questa e' un'altra cosa", ed e' vero — e' l'unica
   sezione della pagina che parla di fatturato invece che di tempo risparmiato,
   ed e' anche l'unica che racconta qualcosa che non c'e' ancora.

   Nessuna schermata, per lo stesso motivo: una schermata finta brucerebbe la
   credibilita' di tutte quelle vere. Al suo posto uno schema di tappe, che si
   riconosce come schema. */
.fascia-scura { background: #16211f; color: #dfe6e3; }
.fascia-scura h2, .fascia-scura h3, .fascia-scura strong { color: #fff; }
.fascia-scura .titolo p, .fascia-scura p { color: #a9b6b2; }
.fascia-scura .etichetta { color: var(--verde); }
.fascia-scura .punti li { color: #c4cfcc; }
.fascia-scura .punti svg { color: var(--verde); }

/* Le quattro tappe: una riga del tempo, non quattro card. Il numero non serve
   — lo dice il "quando". */
.tappe {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 22px;
  position: relative;
}
.tappe::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: 7px; height: 1.5px; opacity: .3;
  background: repeating-linear-gradient(90deg, var(--verde) 0 6px, transparent 6px 12px);
}
.tappe li { position: relative; padding-top: 30px; }
.tappe li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: #16211f; border: 1.5px solid var(--verde);
}
.tappa-quando {
  display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--verde);
}
.tappe strong { display: block; margin-bottom: 7px; font-family: var(--titolo); font-size: 17.5px; font-weight: 600; }
.tappe p { margin: 0; font-size: 14.5px; line-height: 1.55; }

.followup-sotto {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: start;
  margin-top: 64px; padding-top: 54px; border-top: 1px solid rgba(255,255,255,.1);
}
.followup-sotto h3 { margin: 0 0 14px; font-size: clamp(21px, 2.2vw, 26px); }
.followup-sotto > div > p { margin: 0 0 20px; }
.followup-soldi {
  margin: 22px 0 0 !important; padding-left: 16px; border-left: 2px solid var(--verde);
  font-family: var(--titolo); font-size: 17px; font-weight: 500; color: #fff !important;
}

/* Un esempio vero di messaggio: fa capire il tono meglio di dieci aggettivi, e
   chiarisce da solo che non e' pubblicita'. */
.messaggio-esempio { margin: 0; }
.messaggio-bolla {
  padding: 20px 22px; border-radius: 18px 18px 18px 5px;
  background: #22302c; border: 1px solid rgba(255,255,255,.1);
  font-size: 15.5px; line-height: 1.6; color: #e8efec;
}
.messaggio-esempio figcaption { margin-top: 12px; font-size: 13px; color: #8d9b97; }

.followup-onesto {
  max-width: 68ch; margin: 52px auto 0; padding: 20px 24px; border-radius: 14px;
  background: rgba(51,181,165,.10); border: 1px solid rgba(51,181,165,.28);
  font-size: 15.5px; line-height: 1.6; color: #cfe0dc !important; text-align: center;
}
.followup-onesto strong { color: #fff; }

@media (max-width: 980px) {
  .tappe { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }
  .tappe::before { display: none; }
  .followup-sotto { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; padding-top: 40px; }
}
@media (max-width: 620px) {
  /* Su una colonna la riga del tempo torna, verticale: e' il filo che tiene
     insieme le quattro tappe, e senza sembrano quattro cose scollegate. */
  .tappe { grid-template-columns: 1fr; gap: 0; }
  .tappe::before {
    display: block; left: 5px; right: auto; top: 8px; bottom: 26px;
    width: 1.5px; height: auto;
    background: repeating-linear-gradient(180deg, var(--verde) 0 6px, transparent 6px 12px);
  }
  .tappe li { padding: 0 0 26px 30px; }
  .tappe li::before { top: 4px; }
  .followup-onesto { text-align: left; padding: 18px 20px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   9 · I PACCHETTI

   Quattro card che elencano le stesse nove voci, in tre stati: normale quello
   che c'e', in evidenza quello che QUELLA taglia aggiunge, spento quello che
   non c'e'. Una card sola dice cosa prendo e cosa mi perdo — un confronto a
   doppia entrata, su un telefono, non si legge.

   LO STATO NON DIPENDE SOLO DAL COLORE. La riga assente perde il fondo del
   segno e schiarisce il testo; la riga nuova prende il segno pieno E il peso
   del testo. Chi stampa la pagina, o non distingue bene i colori, legge lo
   stesso — che qui non e' un cavillo: e' il nostro pubblico.
   ═══════════════════════════════════════════════════════════════════════════ */

.piani {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 40px; align-items: start;
}

.piano {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 26px 22px 24px;
  box-shadow: var(--ombra);
}

/* La testa: nome e capienza. La capienza sta qui, dove sulle card di viaggio
   sta il prezzo — perche' senza prezzo e' lei il dato che distingue una taglia
   dall'altra, ed e' la prima domanda vera ("ci sto dentro?"). */
.piano-testa { padding-bottom: 18px; border-bottom: 1px solid var(--bordo); }
.piano-testa h3 { margin: 0; font-size: 24px; line-height: 1.1; }
.piano-quanti {
  list-style: none; margin: 12px 0 0; padding: 0;
  font-size: 13.5px; line-height: 1.45;
  color: var(--tenue); font-weight: 500;
}

.piano-voci { list-style: none; margin: 0; padding: 18px 0 0; }

/* ALLINEAMENTO DEL QUADRATINO CON LA SUA RIGA
   Il quadratino e' 30px, una riga di testo ne e' alta 20: appoggiandoli tutti e
   due in cima (align-items:start) il centro del quadratino cade cinque pixel
   piu' in basso del centro della prima riga — il segno sembra scivolato verso
   il fondo della parola. Si tira su di meta' della differenza, e i due centri
   coincidono.

   Perche' la PRIMA riga e non il blocco intero: le voci che vanno a capo sono
   quattro su nove, e centrare sul blocco farebbe ballare il quadratino su e giu'
   da una riga all'altra. Il segno appartiene all'inizio della voce, e li' deve
   stare fermo.

   --riga e --bollo tengono legate le tre misure che devono restare d'accordo
   (interlinea, lato del quadratino, correzione): cambiarne una a mano senza le
   altre e' esattamente come nasceva lo scarto. */
.piano-voce {
  --riga: 1.4em; --bollo: 30px;
  display: grid; grid-template-columns: var(--bollo) 1fr; gap: 12px;
  align-items: start; padding: 9px 0;
  font-size: 14.5px; line-height: var(--riga);
}
.piano-segno {
  display: grid; place-items: center; width: var(--bollo); height: var(--bollo);
  border-radius: 9px; background: var(--verde-velo); color: var(--verde-cupo);
  margin-top: calc((var(--riga) - var(--bollo)) / 2);
}

/* Quello che questa taglia AGGIUNGE rispetto alla precedente. E' l'unica cosa
   che il lettore cerca davvero: non "cosa contiene Pro" ma "cosa mi da' Pro
   che Standard non mi da'". */
.piano-voce.nuova { font-weight: 700; color: var(--inchiostro); }
.piano-voce.nuova .piano-segno { background: var(--verde-cupo); color: #fff; }

/* Quello che non c'e'. Resta scritto, e questo e' il punto: dice cosa trovi
   salendo di una taglia, senza obbligare a confrontare due card. */
.piano-voce.assente { color: var(--tenue); }
.piano-voce.assente .piano-segno {
  background: var(--grigio); color: #adb4b2;
}

.piani-nota {
  margin: 30px auto 0; max-width: 62ch; text-align: center;
  font-size: 15px; color: var(--inchiostro-2);
}
#pacchetti .passi-azione { margin-top: 26px; }

/* Sotto i 1080 le quattro card diventano una fila che scorre di lato, come le
   classi di un biglietto: il pollice le sfoglia, e ognuna resta larga
   abbastanza da leggersi. Lo scatto le ferma sempre allineate a sinistra, cosi'
   non si finisce mai a meta' di due. */
@media (max-width: 1080px) {
  /* Una card per volta, con la successiva che si intravede: e' quello sguardo
     di fianco a dire "ce n'e' un'altra", non una barra di scorrimento. La barra
     sparisce del tutto — si sfoglia col dito, come si fa con qualunque cosa dal
     2015 in poi. */
  .piani {
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 74vw;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    /* DICIOTTO PIXEL IN CIMA, NON SEI.
       La linguetta "Piu' venduto" sporge 12px sopra il bordo della card
       (.piano-badge { top: -12px }), e qui c'e' `overflow-y: hidden`: con sei
       pixel di imbottitura veniva tagliata a meta' nel senso della lunghezza,
       e si leggeva come un errore di impaginazione proprio sulla card che
       vogliamo far notare. Il margine sopra si accorcia della stessa misura,
       cosi' lo spazio visto resta quello di prima (26/09/2026). */
    gap: 14px; padding: 18px 0 10px; margin-top: 28px;
    margin-inline: calc(50% - 50vw);
    /* il primo e l'ultimo si fermano centrati come tutti gli altri */
    padding-inline: 13vw;
    scrollbar-width: none;
  }
  .piani::-webkit-scrollbar { display: none; }
  .piano { scroll-snap-align: center; scroll-snap-stop: always; }
}

@media (min-width: 700px) and (max-width: 1080px) {
  .piani { grid-auto-columns: 46vw; padding-inline: 27vw; }
}

/* I punti: dicono quante ne restano e a che punto sei. Non si toccano — sono un
   indicatore, non un comando: il comando e' il dito sulla card. */
.piani-punti { display: none; }
@media (max-width: 1080px) {
  .piani-punti {
    display: flex; justify-content: center; gap: 7px; margin-top: 2px;
  }
  .piani-punti span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--bordo-grigio); transition: all .3s cubic-bezier(.2,.7,.3,1);
  }
  .piani-punti span.qui { width: 22px; border-radius: 4px; background: var(--verde-cupo); }
}

@media (max-width: 620px) {
  .piano { padding: 22px 18px 20px; }
  .piano-testa h3 { font-size: 22px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOVIMENTO

   Tre cose sole, e nessuna decora: quello che entra si rivela, quello che si
   tocca risponde, e il fondo respira. Tutto sotto prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Quello che entra ─────────────────────────────────────────────────── */

/* La lista e' scritta qui e ripetuta in moto.js: DEVONO combaciare. E' l'unica
   ripetizione del file, e c'e' per una ragione — se il nascondere stesse in JS,
   arriverebbe dopo il primo disegno e si vedrebbe il lampo. */
.moto .titolo,
.moto .confine-colonna,
.moto .oggi-carta,
.moto .accento,
.moto .dettaglio,
.moto .resto-voce,
.moto .piano,
.moto .passo,
.moto .tappa,
.moto .citazione,
.moto .scheda-modulo,
.moto .contatto-testo {
  opacity: 0;
  transform: translate3d(var(--entra-x, 0), var(--entra-y, 26px), 0);
  /* Molla: l'elemento arriva, supera di un soffio e si assesta. E' la
     differenza fra "compare" e "entra", ed e' quello che distingue un'app di
     adesso da una del 2015. */
  transition: opacity .6s cubic-bezier(.22,1,.36,1),
              transform .78s cubic-bezier(.34,1.32,.5,1);
  transition-delay: var(--ritardo, 0s);
}
.moto .visto { opacity: 1; transform: none; }

/* Il metro si disegna da sinistra: e' il gesto del mestiere, e farlo comparire
   e basta sarebbe stato uno spreco. */
.moto .metro { transform-origin: left center; transform: scaleX(.04); opacity: .3;
  transition: transform 1.1s cubic-bezier(.16,.8,.3,1) .1s, opacity .5s .1s; }
.moto .visto .metro { transform: none; opacity: 1; }


/* ═══ DA DOVE ARRIVA OGNI COSA ═══════════════════════════════════════════════
   Salire di 26px va bene per un titolo, che non ha un "dove". Quando invece il
   blocco un posto ce l'ha — una colonna a sinistra, una a destra — arrivare
   dalla propria parte fa capire il rapporto fra i due prima di leggerli. */

/* Il confine: due colonne che si avvicinano, e il "+" che appare per ultimo.
   E' la frase della sezione fatta col movimento: due cose separate che stanno
   insieme. Ed e' anche l'unico punto in cui il movimento dice qualcosa che il
   testo dice piu' lentamente. */
/* Solo da 981 in su. Impilate, le colonne non hanno una "parte da cui
   arrivare": lo spostamento laterale sarebbe un tremolio, e trentotto pixel
   fuori dal bordo fanno comparire lo scorrimento orizzontale su un telefono. */
@media (min-width: 981px) {
  .moto .confine-colonna.altrui { --entra-x: -38px; --entra-y: 0; }
  .moto .confine-colonna.nostra { --entra-x:  38px; --entra-y: 0; }
}

/* L'INGRANDIMENTO SI FA CON `scale`, NON CON `transform`.
   Qui c'era `transform: scale(.3)` e poi `transform: none`, e tutt'e due
   cancellavano il `translate(-50%, -50%)` che centra il "+" sulla linea: a
   animazione finita il segno restava col bordo sinistro appoggiato alla linea
   e mezzo corpo piu' in basso del centro. Si vedeva su ogni schermo, e sul
   telefono — dove la linea e' orizzontale — sembrava un errore di stampa.

   `scale` e' una proprieta' a se', che si compone col transform invece di
   sostituirlo: la posizione resta quella giusta anche mentre si ingrandisce.
   Sui browser che non la conoscono l'animazione semplicemente non si vede, e
   il "+" e' comunque al suo posto — che e' il verso giusto in cui rompersi
   (26/09/2026). */
.moto .confine-linea span {
  scale: .3; opacity: 0;
  transition: scale .5s cubic-bezier(.34,1.5,.5,1) .28s, opacity .3s .28s;
}
.moto .confine-colonna.altrui.visto ~ .confine-linea span { scale: 1; opacity: 1; }


/* ═══ LE COLONNE DEI QUATTRO BLOCCHI ═════════════════════════════════════════
   Testo e schermata arrivano da parti opposte e si incontrano. Sui blocchi
   rovesciati la direzione si specchia, altrimenti l'immagine attraverserebbe
   il testo per andare al suo posto.

   Il blocco intero fa la dissolvenza, le colonne fanno solo lo spostamento:
   due dissolvenze sovrapposte sporcano e basta. */
.moto .dettaglio > * {
  transform: translate3d(var(--dx, 0), 0, 0);
  transition: transform .72s cubic-bezier(.28,1.1,.42,1) var(--rit-col, 0s);
}
@media (min-width: 981px) {
  .moto .dettaglio > :first-child { --dx: -34px; }
  .moto .dettaglio > :last-child  { --dx:  34px; --rit-col: .1s; }
  .moto .dettaglio.rovescio > :first-child { --dx:  34px; }
  .moto .dettaglio.rovescio > :last-child  { --dx: -34px; }
}
/* Piu' specifica di chi nasconde (0,3,0 contro 0,2,0): rivelare vince sempre. */
.moto .dettaglio.visto > * { transform: none; }


/* Il segno di ogni voce si accende un soffio dopo la riga: prima leggi, poi
   il segno conferma. Al contrario sarebbe un tic. */
.moto .resto-segno {
  transform: scale(.55); opacity: 0;
  transition: transform .5s cubic-bezier(.34,1.45,.5,1) .16s, opacity .3s .16s;
}
.moto .visto .resto-segno { transform: none; opacity: 1; }


/* ═══ LE SCHERMATE ALLA DERIVA ═══════════════════════════════════════════════
   Ogni schermata dentro i blocchi si sposta di pochissimo mentre scorri, piu'
   lenta della pagina. Non e' un parallasse da vetrina: sono quattordici pixel
   in tutta la traversata, quel tanto che basta perche' l'immagine sembri
   appoggiata a un piano diverso dal testo invece che incollata.

   La deriva e il sollevamento del passaggio del mouse stanno nella STESSA
   trasformazione, se no si annullano a vicenda. */
@media (min-width: 981px) {
  .dettaglio .monitor, .resto-schermo .monitor {
    transform: translate3d(0, var(--deriva, 0px), 0);
    /* NIENTE transizione sul transform: la deriva insegue lo scorrimento
       fotogramma per fotogramma, e mezzo secondo di ritardo la farebbe
       arrivare dopo il dito, con l'effetto elastico. Stessa regola della
       schermata in apertura. */
    transition: box-shadow .5s;
  }
}
/* Il sollevamento al passaggio del mouse qui non c'e' piu': una schermata che
   si alza promette un clic, e queste non si cliccano. Resta l'ombra, che dice
   "guarda qui" senza promettere niente. */
@media (hover: hover) and (min-width: 981px) {
  .dettaglio .monitor:hover { box-shadow: var(--ombra-alta); }
}

/* ── 2. Quello che si tocca ──────────────────────────────────────────────── */

.bottone {
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .2s, color .2s;
}
.bottone svg { transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.bottone.pieno:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(28,109,96,.28); }
.bottone:hover svg { transform: translateX(3px); }
.bottone:active { transform: translateY(1px) scale(.985); }

.piano { transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s; }
@media (hover: hover) {
  .piano:hover { transform: translateY(-5px); box-shadow: var(--ombra-alta); border-color: #cfe9e2; }
}
.piano-voce.nuova .piano-segno { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
@media (hover: hover) { .piano:hover .piano-voce.nuova .piano-segno { transform: scale(1.08); } }

.monitor { transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s; }
@media (hover: hover) and (max-width: 980px) {
  .dettaglio .monitor:hover { transform: translateY(-4px); box-shadow: var(--ombra-alta); }
}

/* ── 3. Il fondo che respira ─────────────────────────────────────────────── */

/* Due aloni lentissimi dietro l'apertura. Non sono un gradiente animato di
   moda: sono la stessa luce verde del marchio, sfocata, che si sposta di poco
   in mezzo minuto. Sta dietro a tutto (z-index negativo) e non tocca mai il
   contrasto del testo, che resta su fondo pieno. */
.apertura { position: relative; isolation: isolate; overflow: hidden; }
.apertura::before, .apertura::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(64px); pointer-events: none;
}
.apertura::before {
  width: min(52vw, 620px); aspect-ratio: 1; top: -14vw; right: -8vw;
  background: radial-gradient(circle, rgba(51,181,165,.34), rgba(51,181,165,0) 70%);
  animation: derivaA 34s ease-in-out infinite alternate;
}
.apertura::after {
  width: min(44vw, 520px); aspect-ratio: 1; bottom: -16vw; left: -10vw;
  background: radial-gradient(circle, rgba(39,150,131,.24), rgba(39,150,131,0) 70%);
  animation: derivaB 42s ease-in-out infinite alternate;
}
@keyframes derivaA { to { transform: translate3d(-5vw, 4vw, 0) scale(1.18); } }
@keyframes derivaB { to { transform: translate3d(6vw, -3vw, 0) scale(1.12); } }

/* La fascia verde: un velo che scorre pianissimo, appena percepibile. */
.fascia-verde { position: relative; overflow: hidden; }
.fascia-verde::before {
  content: ''; position: absolute; inset: -40% -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.16), transparent 55%),
              radial-gradient(ellipse at 75% 80%, rgba(255,255,255,.10), transparent 50%);
  animation: velo 30s ease-in-out infinite alternate;
}
.fascia-verde > * { position: relative; z-index: 1; }
@keyframes velo { to { transform: translate3d(4%, -3%, 0) scale(1.08); } }

/* ── 4. L'invito che resta sotto il pollice, sul telefono ────────────────── */

.cta-fissa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--bordo);
  transform: translate3d(0, 130%, 0);
  transition: transform .34s cubic-bezier(.2,.7,.3,1);
}
.cta-fissa.su { transform: none; }
.cta-fissa .bottone { width: 100%; justify-content: center; }
@media (max-width: 860px) { .cta-fissa { display: block; } }

/* ── Chi ha chiesto meno movimento lo ottiene, tutto ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* La classe .moto non viene nemmeno messa, quindi le rivelazioni qui non
     compaiono: restano da spegnere solo le cose che vivono nel CSS puro. */
  .apertura::before, .apertura::after, .fascia-verde::before { animation: none; }
  .bottone, .piano, .monitor, .cta-fissa { transition: none; }
  .bottone:hover, .piano:hover, .monitor:hover { transform: none; }
  .piani { scroll-behavior: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   2026 — PROFONDITA', LUCE, MOLLA

   Il metro di paragone e' dichiarato dal committente: Spotify, Revolut, Airbnb,
   Duolingo. Da li' vengono tipografia grande, profondita' vera e movimento con
   molla. Quello che non viene da li' e' il tono: il lettore e' un titolare che
   deve affidarci i dati sanitari dei suoi clienti, quindi l'effetto non vince
   mai sulla leggibilita' del testo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La barra di avanzamento della lettura ─────────────────────────────────
   Due pixel in cima. Dice quanto manca, che su una pagina lunga e' la domanda
   che fa chiudere la scheda. */
.avanzamento {
  position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 90;
  background: linear-gradient(90deg, var(--verde-scuro), var(--verde));
  transform: scaleX(0); transform-origin: left;
  will-change: transform; pointer-events: none;
}

/* ── La schermata dell'apertura, in prospettiva ────────────────────────────
   Non un mockup inclinato con l'ombra finta: la schermata VERA, appoggiata su
   un piano che si raddrizza mentre scendi. Il gesto e' quello di prendere in
   mano una cosa e metterla dritta davanti agli occhi. */
.apertura-schermo { perspective: 1600px; perspective-origin: 50% 0%; }
.apertura-schermo .monitor {
  transform: rotateX(var(--inclina, 7deg)) scale(var(--scala, .965));
  transform-origin: 50% 0%;
  transition: none;                       /* la muove moto.js, fotogramma per fotogramma */
  box-shadow: 0 2px 6px rgba(22,33,31,.05),
              0 24px 60px rgba(22,33,31,.14),
              0 60px 120px -30px rgba(39,150,131,.28);
}
/* L'alone verde sotto la schermata: e' la luce del prodotto, non un'ombra. */
.apertura-schermo::after {
  content: ''; position: absolute; z-index: -1;
  left: 12%; right: 12%; bottom: -6%; height: 42%;
  background: radial-gradient(ellipse at center, rgba(51,181,165,.42), transparent 68%);
  filter: blur(46px); pointer-events: none;
}
.apertura-schermo { position: relative; }

/* ── Le superfici prendono un anello di luce, non solo un bordo ───────────── */
.piano {
  border-radius: 22px;
  background:
    linear-gradient(var(--carta), var(--carta)) padding-box,
    linear-gradient(160deg, #e9e7e0, #e9e7e0) border-box;
  border: 1.5px solid transparent;
}
@media (hover: hover) {
  .piano:hover {
    background:
      linear-gradient(var(--carta), var(--carta)) padding-box,
      linear-gradient(160deg, rgba(51,181,165,.85), rgba(39,150,131,.25) 60%, #e9e7e0) border-box;
    box-shadow: 0 3px 8px rgba(22,33,31,.05), 0 26px 54px -18px rgba(39,150,131,.34);
  }
}

/* La riga che questa taglia aggiunge: il segno prende luce, non solo colore. */
.piano-voce.nuova .piano-segno {
  background: linear-gradient(145deg, #33B5A5, #1c6d60);
  box-shadow: 0 4px 12px rgba(39,150,131,.34);
}

/* ── La fascia scura diventa profonda ─────────────────────────────────────── */
.fascia-scura { position: relative; overflow: hidden; isolation: isolate; }
.fascia-scura::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 18% 12%, rgba(51,181,165,.20), transparent 62%),
    radial-gradient(50% 50% at 84% 88%, rgba(69,203,180,.13), transparent 60%);
  animation: derivaScura 38s ease-in-out infinite alternate;
}
@keyframes derivaScura { to { transform: translate3d(-3%, 3%, 0) scale(1.1); } }

/* ── Il tocco risponde con la molla ───────────────────────────────────────── */
.bottone { transition: transform .34s cubic-bezier(.34,1.4,.5,1), box-shadow .26s, background .2s, border-color .2s; }
.bottone.pieno {
  background: linear-gradient(150deg, #2fa892, var(--verde-scuro));
  box-shadow: 0 10px 26px rgba(28,109,96,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.bottone.pieno:hover { background: linear-gradient(150deg, #34b9a1, #175d52); }
.bottone:active { transform: scale(.96); transition-duration: .09s; }

/* ── Geometria piu' ampia, come nelle app di adesso ───────────────────────── */
.oggi-carta, .accento, .scheda-modulo, .monitor { border-radius: 22px; }

@media (prefers-reduced-motion: reduce) {
  .avanzamento { display: none; }
  .apertura-schermo .monitor { transform: none; }
  .fascia-scura::after { animation: none; }
  .bottone:active { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ── PACCHETTI, DI NOTTE ──

   La sezione piu' forte della pagina, e l'unica scura insieme al follow-up.
   Il fondo notte fa due cose: stacca il momento della scelta da tutto il resto
   — si capisce che qui si decide — e permette al colore delle taglie di
   brillare, cosa che su carta bianca non succede.
   ═══════════════════════════════════════════════════════════════════════════ */

#pacchetti {
  position: relative; isolation: isolate; overflow: hidden;
  background: #0B1614; color: #E9F2EF;
  padding: 110px 0 100px;
}

/* Il fondo non e' piatto: due masse di luce che derivano lentissime, piu' una
   trama di puntini che da' materia. Senza la trama un fondo scuro grande
   sembra un buco; con la trama sembra una superficie. */
#pacchetti::before {
  content: ''; position: absolute; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46% 42% at 16% 8%,  rgba(69,203,180,.30), transparent 64%),
    radial-gradient(40% 40% at 88% 92%, rgba(183,156,255,.20), transparent 62%),
    radial-gradient(34% 34% at 74% 12%, rgba(255,196,107,.14), transparent 60%);
  animation: nottederiva 44s ease-in-out infinite alternate;
}
#pacchetti::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.07) .5px, transparent .5px);
  background-size: 3px 3px;
}
@keyframes nottederiva { to { transform: translate3d(-4%, 3%, 0) scale(1.12); } }

#pacchetti .etichetta { color: #6FE0C9; }
#pacchetti .titolo h2  { color: #FFFFFF; }
#pacchetti .titolo p   { color: #A6B9B4; }
#pacchetti .metro      { opacity: .55; }
#pacchetti .piani-nota { color: #A6B9B4; }

/* ── La card ──────────────────────────────────────────────────────────────── */

/* La tinta di ogni taglia. Tocca il nome, l'anello e le righe nuove: mai il
   testo corrente, che resta leggibile per tutti. */
.piano:nth-child(1) { --tinta: #8FD9CC; --tinta-cupa: #4E9C8C; }
.piano:nth-child(2) { --tinta: #45CBB4; --tinta-cupa: #2A8F7C; }
.piano:nth-child(3) { --tinta: #FFC46B; --tinta-cupa: #B07C22; }
.piano:nth-child(4) { --tinta: #B79CFF; --tinta-cupa: #6F55C0; }

/* Il "Più venduto" su Pro: una linguetta a cavallo del bordo alto, nella tinta
   della card. La card resta uguale alle altre: e' l'etichetta a dirlo, non un
   bordo diverso — la colonna evidenziata sposta l'occhio, la linguetta informa. */
.piano { position: relative; }
.piano-badge {
  position: absolute; top: -12px; left: 22px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--tinta-cupa); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

#pacchetti .piano {
  position: relative;
  border-radius: 24px; padding: 28px 24px 26px;
  background:
    linear-gradient(#111F1C, #0D1917) padding-box,
    linear-gradient(160deg,
      color-mix(in srgb, var(--tinta) 55%, transparent),
      rgba(255,255,255,.06) 46%,
      rgba(255,255,255,.03)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.9);
  transition: transform .34s cubic-bezier(.34,1.3,.5,1), box-shadow .34s;
}

/* L'alone della taglia, dietro la card: e' quello che la fa sembrare accesa
   invece che disegnata. */
#pacchetti .piano::before {
  content: ''; position: absolute; z-index: -1; inset: 12% 8% -6%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--tinta) 40%, transparent), transparent 70%);
  filter: blur(38px); opacity: .5; transition: opacity .34s;
}
@media (hover: hover) {
  #pacchetti .piano:hover { transform: translateY(-8px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.95); }
  #pacchetti .piano:hover::before { opacity: .95; }
}

#pacchetti .piano-testa { border-bottom: 1px solid rgba(255,255,255,.09); padding-bottom: 20px; }
#pacchetti .piano-testa h3 {
  color: var(--tinta); font-size: 30px; letter-spacing: -.03em;
  text-shadow: 0 0 26px color-mix(in srgb, var(--tinta) 42%, transparent);
}
/* La scala della taglia: la griglia del marchio che si riempie. */
.piano-segno-taglia {
  display: grid; place-items: center; width: 42px; height: 42px;
  margin-bottom: 13px; border-radius: 13px;
  background: color-mix(in srgb, var(--tinta, #45CBB4) 15%, transparent);
  color: var(--tinta, #45CBB4);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta, #45CBB4) 28%, transparent);
}

/* A chi parla la taglia. Sta subito sotto il nome perche' la prima domanda non
   e' "quanto costa" ma "e' il mio?": chi non si riconosce il prezzo non lo
   legge nemmeno. */
.piano-chi {
  margin: 4px 0 0; font-size: 13.5px; font-weight: 600;
  letter-spacing: .01em; color: var(--tinta, #2F7F70); opacity: .9;
}

/* I due limiti, uno per riga, ognuno col suo segno: sono i numeri su cui si
   sceglie la taglia, e in mezzo a una frase non si contano. */
/* La capienza (utenti e sedi) e' l'altra meta' del piano, ma l'occhio scivolava
   dritto all'elenco delle funzioni. Poco di piu', non un altro riquadro: un velo
   nella tinta del piano, un'etichetta che dice cosa sta guardando, e i numeri
   piu' grandi del testo intorno. */
#pacchetti .piano-quanti {
  margin: 16px 0 0; padding: 12px 14px 13px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tinta) 9%, rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 32%, transparent);
  display: grid; gap: 8px;
}
#pacchetti .piano-quanti::before {
  content: 'Quanto è grande';
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta); opacity: .9; margin-bottom: 2px;
}
#pacchetti .piano-quanti li {
  display: grid; grid-template-columns: 21px 1fr; gap: 10px; align-items: center;
  font-size: 14px; font-weight: 500; color: #CBD9D5;
}
#pacchetti .piano-quanti li b { font-size: 17px; font-weight: 800; color: #F2F7F5; letter-spacing: -.01em; }
#pacchetti .piano-quanti .q-segno {
  display: grid; place-items: center; width: 21px; height: 21px;
  color: var(--tinta); opacity: .85;
}

@media (max-width: 620px) {
  .piano-segno-taglia { width: 38px; height: 38px; margin-bottom: 11px; }
}

/* ── Le righe, nei tre stati ──────────────────────────────────────────────── */

/* Quello che il pacchetto CONTIENE pesa: chiaro e semigrassetto. Il grigio non
   e' piu' il tono di serie ma il segnale di cio' che manca — chi legge deve
   vedere prima quello che compra, poi quello che gli resta fuori. */
#pacchetti .piano-voce { color: #E7F1EF; font-weight: 600; }
#pacchetti .piano-segno { background: rgba(255,255,255,.09); color: #A8E2D6; }

/* Quello che QUESTA taglia aggiunge rispetto alla precedente: bianco pieno e
   segno acceso nella sua tinta. Ora e' un secondo livello sopra al primo, non
   piu' l'unica cosa illuminata. */
#pacchetti .piano-voce.nuova { color: #FFFFFF; font-weight: 700; }
#pacchetti .piano-voce.nuova .piano-segno {
  background: linear-gradient(145deg, var(--tinta), var(--tinta-cupa));
  color: #08120F;
  box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--tinta) 65%, transparent);
}

/* Quello che non c'e'. Resta scritto — dice cosa trovi salendo — ma spento. */
#pacchetti .piano-voce.assente { color: #6E817D; font-weight: 400; }
#pacchetti .piano-voce.assente .piano-segno { background: rgba(255,255,255,.035); color: #4E5D5A; }

/* ── I punti della giostra, sul fondo scuro ───────────────────────────────── */
@media (max-width: 1080px) {
  #pacchetti .piani-punti span { background: rgba(255,255,255,.22); }
  #pacchetti .piani-punti span.qui { background: #6FE0C9; }
}

/* Se il browser non conosce color-mix, la card resta comunque leggibile: perde
   l'alone e l'anello colorato, non il contenuto. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  #pacchetti .piano { border-color: rgba(255,255,255,.14); background: #111F1C; }
  #pacchetti .piano::before { display: none; }
  #pacchetti .piano-voce.nuova .piano-segno { background: var(--tinta); }
  .piano-segno-taglia {
    background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  #pacchetti::before { animation: none; }
  #pacchetti .piano { transition: none; }
  #pacchetti .piano:hover { transform: none; }
}

@media (max-width: 620px) {
  #pacchetti { padding: 80px 0 74px; }
  #pacchetti .piano { padding: 24px 20px 22px; }
  #pacchetti .piano-testa h3 { font-size: 26px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   IL SELETTORE MENSILE / ANNUALE, E I PREZZI

   Nessuna riga di JavaScript: una casella di spunta vera piu' due regole di
   fratellanza. Su una pagina che deve vendere, il prezzo e' l'ultima cosa che
   puo' permettersi di dipendere da un file esterno — e con la spunta il cambio
   e' istantaneo, non c'e' un fotogramma in cui si legge il prezzo sbagliato.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La casella resta raggiungibile da tastiera: nascosta all'occhio, non al dito
   ne' al lettore di schermo. display:none la toglierebbe dal giro dei Tab. */
.periodo-int {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.periodo { display: flex; justify-content: center; margin: 34px 0 6px; }

.periodo-pillola {
  position: relative; display: inline-flex; align-items: center;
  padding: 5px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  user-select: none;
}

/* Il cursore che scorre. E' un elemento suo, non un fondo sulla voce attiva:
   cosi' scivola da una parte all'altra invece di accendersi e spegnersi, ed e'
   quel movimento a far capire che sono due facce della stessa cosa. */
.periodo-cursore {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px);
  border-radius: 999px;
  background: linear-gradient(150deg, #2fa892, #17544b);
  box-shadow: 0 6px 18px -6px rgba(47,168,146,.8);
  transition: transform .42s cubic-bezier(.34,1.28,.5,1);
}
.periodo-voce {
  position: relative; z-index: 1;
  padding: 11px 22px; font-size: 15px; font-weight: 600;
  color: #A6B9B4; transition: color .3s;
  white-space: nowrap;
}
.periodo-voce b { font-weight: 700; opacity: .85; }
.v-anno { color: #06120F; }                    /* di serie il cursore sta sull'annuale */

.periodo-int:checked ~ .periodo .periodo-cursore { transform: translateX(100%); }
.periodo-int:checked ~ .periodo .v-anno { color: #A6B9B4; }
.periodo-int:checked ~ .periodo .v-mese { color: #06120F; }

.periodo-int:focus-visible ~ .periodo .periodo-pillola {
  outline: 2px solid #6FE0C9; outline-offset: 3px;
}

/* ── Il prezzo ────────────────────────────────────────────────────────────── */

/* "+ IVA" e' un obbligo di chiarezza, non un messaggio: sta accanto al numero
   ma non compete con lui — piu' piccolo e piu' tenue dell'etichetta che lo
   ospita. In B2B il canone si scrive imponibile, e chi legge deve poterlo
   sapere senza cercarlo. */
.p-iva { font-size: .82em; opacity: .75; }

.piano-prezzo {
  margin: 14px 0 2px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.piano-prezzo b {
  font-family: var(--titolo);
  font-size: 40px; font-weight: 700; letter-spacing: -.035em;
  color: #FFFFFF;
}
.piano-prezzo .p-val { font-size: 22px; font-weight: 600; color: #C8D6D3; }
.piano-prezzo .p-quando {
  display: block; margin-top: 7px;
  font-size: 13.5px; font-weight: 500; color: #93A6A2; letter-spacing: 0;
}

.piano-invece { margin: 0 0 12px; min-height: 20px; font-size: 13px; color: #93A6A2; }
.piano-invece s { color: #6E817D; }
.piano-invece b { color: var(--tinta); font-weight: 700; }

/* Lo scambio: di serie si vede l'ANNUALE — e' il prezzo migliore, e chi legge
   deve incontrarlo per primo. Con la spunta si passa al mese. */
.p-mese { display: none; }
.periodo-int:checked ~ .piani .p-anno { display: none; }
.periodo-int:checked ~ .piani .p-mese { display: inline; }

@media (prefers-reduced-motion: reduce) {
  .periodo-cursore, .periodo-voce { transition: none; }
  .menu, .menu-tasto span, .menu-velo, .menu a { transition: none; }
  .menu a { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .periodo-voce { padding: 11px 16px; font-size: 14px; }
  .periodo-voce b { display: block; font-size: 11.5px; margin-top: 2px; }
  .piano-prezzo b { font-size: 34px; }
}

/* Il prezzo pieno sbarrato accanto allequivalente mensile: e la barra a dire
   "stai risparmiando", e sta PRIMA del numero grande perche si legge da
   sinistra — vedi il vecchio prezzo, poi il nuovo. */
.piano-prezzo .p-prima {
  margin-right: 9px; font-size: 21px; font-weight: 600;
  color: #6E817D; text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, var(--tinta) 75%, transparent);
}
@media (max-width: 620px) { .piano-prezzo .p-prima { font-size: 18px; } }

/* ═══ LA SCELTA DEL PACCHETTO ════════════════════════════════════════════════
   Il pulsante sta sulla card, e apre un riquadro che chiede cosa farne:
   provarlo trenta giorni o attivarlo subito. Sono due cose diverse e nessun
   nome di pulsante le contiene tutte e due — "Scegli Pro" invece non promette
   niente, e la promessa la fa il riquadro dove c'e' lo spazio per spiegarla. */

.piano-scegli {
  width: 100%; justify-content: center; margin-top: 22px;
}
/* IL PULSANTE DI CONTORNO SU FONDO SCURO.
   ".bottone.vuoto" ha il testo in --inchiostro, che e' quasi nero: nella
   sezione dei pacchetti — che e' scura — spariva del tutto. Non e' un caso
   raro, e' ogni fondo scuro: serviva una variante che prenda il colore da chi
   la contiene invece di darlo per scontato. */
.bottone.contorno {
  background: transparent; color: currentColor;
  border: 1.5px solid currentColor; opacity: .92;
}
.bottone.contorno:hover { opacity: 1; background: rgba(255,255,255,.08); }
#pacchetti .bottone.contorno { color: #dfe6e3; }

/* La riga sotto i quattro passi: l'assistenza compresa. Sta staccata dai
   passi perche' non e' un quinto passo — e' una cosa che vale sempre, non una
   tappa (25/09/2026). */
.passi-nota {
  margin: 26px auto 0; max-width: 52ch; text-align: center;
  font-size: 15px; color: var(--tenue);
}

.piani-oppure {
  margin: 34px auto 0; max-width: 46ch; text-align: center;
  padding: 22px 26px; border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
}
.piani-oppure-dom {
  margin: 0 0 14px; font-family: var(--titolo);
  font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: #E9F2EF;
}
/* Le due strade una sotto l'altra e non in fila: sono due cose diverse — una
   dura un minuto da soli, l'altra mezz'ora con noi — e affiancate si leggono
   come una sola frase con un "oppure" in mezzo, che e' quello che erano. */
.piani-oppure-vie {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  flex-wrap: wrap; margin: 0 0 8px; font-size: 15px; color: #A6B9B4;
}
.piani-oppure-vie:last-child { margin-bottom: 0; }
.piani-oppure-vie a {
  display: inline-flex; align-items: center; gap: 7px;
  color: #6FE0C9; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(111, 224, 201, .45);
}
.piani-oppure-vie a:hover { border-bottom-color: #6FE0C9; }
.piani-oppure-vie a svg { flex: none; }

/* Il riquadro. <dialog> vero: lo chiude Esc, blocca il fuoco dentro, e non
   serve una riga di JavaScript per nessuna delle due cose. */
.scelta {
  border: 0; border-radius: 20px; padding: 32px 34px 28px;
  width: min(480px, calc(100% - 32px));
  background: var(--carta); color: var(--inchiostro);
  box-shadow: var(--ombra-alta);
}
.scelta::backdrop { background: rgba(22,33,31,.55); backdrop-filter: blur(3px); }
.scelta h2 { font-size: 26px; margin: 0 0 4px; }
.scelta-sotto { margin: 0 0 22px; color: var(--tenue); }
.scelta-chiudi { position: absolute; top: 14px; right: 16px; }
.scelta-chiudi button {
  background: none; border: 0; font-size: 26px; line-height: 1;
  color: var(--tenue); cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.scelta-chiudi button:hover { background: var(--grigio); color: var(--inchiostro); }
.scelta-via { margin-bottom: 18px; }
.scelta-via .bottone { width: 100%; justify-content: center; }
.scelta-via span {
  display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.5;
  color: var(--tenue);
}
.scelta-via .bottone.contorno { color: var(--inchiostro); }
.scelta-demo {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--bordo);
  font-size: 14.5px; color: var(--tenue);
}

/* ── LA GARANZIA, DOVE DEVE VEDERSI ──────────────────────────────────────────
   Il pulsante dice "Provalo 30 giorni" e quei trenta giorni non sono gratis:
   sono di garanzia. E' una formula che tiene la spinta di "provalo" senza
   mentire, ma sta in piedi SOLO se la condizione si legge nello stesso
   sguardo. Quindi niente grigio da nota a pie' di pagina: fondo verde, scudo,
   e le due cose che contano in grassetto — quanti giorni, e che si riprende
   tutto (25/09/2026). */
.garanzia-badge {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 28px auto 0; max-width: 62ch;
  padding: 16px 20px; border-radius: 16px;
  background: color-mix(in srgb, var(--verde) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--verde) 26%, transparent);
  font-size: 15px; line-height: 1.6;
  text-align: left;
  /* IL COLORE LO EREDITA. Scritto fisso a var(--inchiostro) spariva dentro la
     fascia scura dei pacchetti — inchiostro scuro su fondo scuro — e restava
     visibile solo il grassetto verde. Ereditandolo, lo stesso riquadro
     funziona sia sul bianco che sulla fascia nera, che e' esattamente il
     motivo per cui esiste un token di testo per sezione (25/09/2026). */
  color: inherit;
}
.garanzia-badge svg { flex: none; margin-top: 2px; color: var(--verde-cupo); }
/* Il grassetto invece un colore suo ce l'ha: e' quello che deve saltare
   all'occhio. Sulla fascia scura il verde cupo non si leggerebbe, quindi li'
   si schiarisce. */
.garanzia-badge strong { color: var(--verde-cupo); }
.fascia-scura .garanzia-badge strong,
#pacchetti .garanzia-badge strong { color: var(--verde); }

/* Sotto i pacchetti sta al centro della colonna larga. */
.garanzia-piani { margin-top: 32px; }

/* Nel riquadro della scelta: piu' stretto, e staccato dal pulsante quel tanto
   che basta a non sembrarne la didascalia. */
.scelta .garanzia-scelta {
  margin: 18px 0 0; padding: 14px 16px; font-size: 14px; max-width: none;
}

@media (max-width: 560px) {
  .garanzia-badge { padding: 14px 16px; font-size: 14.5px; gap: 10px; }
}