/* ==========================================================================
   Piattaforma prodotto — v4 · leggibilità, zoom, infografiche
   --------------------------------------------------------------------------
   Quinto foglio della sottopagina "gestione delle pratiche di indebitamento".
   Caricato DOPO piattaforma-v3.css e vale come sua continuazione: riscrive
   solo i blocchi che v3 aveva impostati male o troppo piccoli.

   Cosa contiene, in ordine:
     1. §ZOOM    il visualizzatore a schermo intero con zoom e pan
     2. §PRODOTTO testo e immagini più grandi, e la cornice ridimensionata
     3. §PERCORSO le cinque infografiche animate al posto del badge
     4. §DENTRO  disegni e icone in "Che cosa c'è dentro"
     5. §PRING   l'anello delle inclusioni, rifatto con misure esatte

   Regola ereditata da v3 e mai violata qui: il fallback statico è la
   condizione di partenza. Nessun contenuto è nascosto in CSS, ogni
   movimento nasce da JS, e sotto prefers-reduced-motion lo spettacolo è
   spento mentre la pagina resta identica.
   ========================================================================== */

/* ==========================================================================
   §ZOOM — visualizzatore delle schermate a schermo intero
   Perché esiste: le schermate sono documenti, non illustrazioni. Tagliate a
   16/10 dentro una colonna di mezza pagina diventano illeggibili, e il
   visitatore non ha modo di leggerle. Qui si apre la schermata intera e si
   può ingrandire fino alla risoluzione reale del file.
   ========================================================================== */

/* Il pulsante che apre lo zoom copre tutta l'immagine: si clicca ovunque,
   e resta un <button> vero, quindi si raggiunge da tastiera e ha un'etichetta.
   Il gancio (l'icona + la scritta) è l'unica parte visibile, e compare al
   passaggio del mouse o al focus: senza hover la pagina resta pulita. */
.pz-host { position: relative; }
.pz-btn {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.pz-btn:focus { outline: none; }
.pz-btn:focus-visible {
  outline: 2px solid #8A93E8;
  outline-offset: -4px;
}
.pz-hook {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: rgba(10, 11, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #F7F8F8;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
.pz-hook svg { width: 14px; height: 14px; flex: none; }
/* `.pz-host` è la classe che JS mette sulla <figure>: si usa invece di
   :hover() su un antenato perché non richiede che il browser sappia
   selezionare un antenato, e funziona anche sui browser di due versioni fa. */
.pz-host:hover .pz-hook,
.pz-btn:focus-visible ~ .pz-hook,
.pz-btn:focus ~ .pz-hook {
  opacity: 1;
  transform: none;
}
/* Su schermo touch non esiste hover: il gancio resta sempre visibile,
   altrimenti l'unico indizio che l'immagine è apribile sparisce. */
@media (hover: none) {
  .pz-hook { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pz-hook { transition: none; }
}

/* --- l'overlay ------------------------------------------------------- */
.pz {
  position: fixed;
  inset: 0;
  /* Sopra TUTTO. Il banner dei cookie sta a 99999 e il pulsante "torna
     su" del template a 9999999: con uno z-index "ragionevole" finivano
     SOPRA il visualizzatore e ne coprivano la barra dei comandi, rendendo
     lo zoom unusable finché il lettore non chiudeva il banner. Qui si sale
     oltre tutto quello che c'è, e sotto body.pz-locked il banner e la
     pillola spariscono del tutto. */
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  color: #F7F8F8;
}
.pz[hidden] { display: none; }
/* Il banner dei cookie e la sua pillola non hanno niente da dire durante
   una schermata a schermo intero: sono un altro livello di interfaccia e
   lasciarli aperti sopra l'overlay confonde e occupa pulsanti. */
body.pz-locked #nexo-cookie-banner,
body.pz-locked #nexo-cookie-pill {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.pz__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 8, 0.94);
  backdrop-filter: blur(8px);
}
.pz__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  display: grid;
  /* Riga e colonna esplicite e comprimibili. Con la griglia implicita la
     riga si dimensiona sul contenuto e `max-height: 100%` sull'immagine
     non ha niente su cui calcolare la percentuale: il browser lo tratta
     come "none" e la schermata, che è alta 1078 px, esce dalla scena di
     806 px. `minmax(0, 1fr)` rende la riga alta quanto la scena, e allora
     la percentuale si risolve e "adatta" significa adatta. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 20px 20px 8px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.pz__stage:active { cursor: grabbing; }
.pz__stage:focus { outline: none; }
.pz__stage:focus-visible { outline: 2px solid #8A93E8; outline-offset: -6px; }

/* transform-origin 50% 50%: il centraggio lo fa il layout (place-items),
   il transform porta solo lo spostamento e la scala. Con origin 0 0 si
   potrebbe centrare a mano, ma allora il centro va calcolato due volte —
   una dal layout e una dal codice — e le due non coincidono mai: nel
   primo test l'immagine finiva spostata di metà della propria larghezza.
   Qui la scala parte dal centro dell'immagine, che è già il centro della
   scena, e quindi non c'è niente da correggere. */
.pz__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform-origin: 50% 50%;
  will-change: transform;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 48px 100px -46px rgba(0, 0, 0, 0.95);
  /* Non trascinabile. Un <img> premuto avvia il "trascina immagine" del
     browser nativo, che ruba il gesto e annulla il pan con un
     pointercancel: il primo movimento del lettore finisce in un salto. */
  -webkit-user-drag: none;
  user-select: none;
}
.pz__img.is-zoomed { cursor: grab; }
.pz__img.is-loading { opacity: 0; }

/* il contatore di caricamento: si vede solo mentre il file arriva, e per
   l'immagine successiva copre la precedente invece di far saltare il layout */
.pz__spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.18);
  border-top-color: #8A93E8;
  opacity: 0;
  pointer-events: none;
}
.pz.is-loading .pz__spin { opacity: 1; animation: pz-spin 0.9s linear infinite; }
.pz.is-loading .pz__stage { cursor: progress; }
@keyframes pz-spin { to { transform: rotate(360deg); } }

.pz__cap {
  position: absolute;
  left: 20px;
  bottom: 10px;
  max-width: min(60ch, calc(100% - 40px));
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(247, 248, 248, 0.72);
  pointer-events: none;
}

/* --- la barra dei comandi -------------------------------------------- */
.pz__bar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 11, 14, 0.96);
}
/* 44×44 è il minimo tattile: sotto, il comando è più piccolo del dito. */
.pz__b {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #F7F8F8;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.pz__b:hover:not(:disabled) { background: rgba(138, 147, 232, 0.2); border-color: rgba(138, 147, 232, 0.55); }
.pz__b:focus-visible { outline: 2px solid #8A93E8; outline-offset: 2px; }
.pz__b:disabled { opacity: 0.34; cursor: default; }
.pz__b svg { width: 17px; height: 17px; display: block; }
.pz__b--t { font-size: 12.5px; letter-spacing: 0.02em; }
.pz__b--x { margin-left: 6px; }
.pz__n {
  min-width: 62px;
  text-align: center;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: rgba(247, 248, 248, 0.72);
}
.pz__z {
  min-width: 62px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #8A93E8;
}
.pz__sep {
  width: 1px;
  height: 26px;
  margin: 0 6px;
  background: rgba(255, 255, 255, 0.14);
}
.pz__hint {
  position: relative;
  flex: none;
  margin: 0;
  padding: 0 16px 8px;
  text-align: center;
  font-size: 11.5px;
  color: rgba(247, 248, 248, 0.42);
  background: rgba(10, 11, 14, 0.96);
}
.pz__hint kbd {
  font: inherit;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 640px) {
  .pz__stage { padding: 12px 12px 4px; }
  .pz__cap { display: none; }
  .pz__hint { display: none; }
  .pz__bar { gap: 5px; padding-left: 10px; padding-right: 10px; }
  .pz__b { min-width: 42px; padding: 0 9px; }
  .pz__b--t { display: none; }   /* "1:1" e "Adatta" restano su tastiera */
}
@media (prefers-reduced-motion: reduce) {
  .pz__b { transition: none; }
  .pz.is-loading .pz__spin { animation-duration: 2.4s; }
}

/* ==========================================================================
   §PRODOTTO — leggibilità
   Le schermate sono state ridotte a 16/10 con object-fit: cover dentro una
   colonna da metà pagina: la schermata diventava una striscia e il modulo
   verticale del punto 01 era tagliato a metà. Qui ogni cornice ha il
   rapporto vero del file, la colonna dell'immagine è più larga, e i testi
   accanto crescono di un gradino leggibile.
   ========================================================================== */

/* --ar: il rapporto d'aspetto reale della schermata, dichiarato qui e non
   dedotto, perché dedurlo in CSS non è possibile e in JS il primo render
   sbaglia. --fit: "contain" solo dove "cover" taglierebbe il contenuto. */
.vwrap { --max: 1240px; }

.ved {
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);
  gap: 52px;
}
/* La colonna larga deve essere sempre quella dell'immagine. Nei passaggi
   pari l'immagine viene spostata a destra con `order`, ma l'ordine non
   scambia le colonne: senza questo la schermata finiva nella colonna da
   1 parte e il testo in quella da 1,24 — cioè testo grande e schermata
   stretta, esattamente il contrario di quello che si chiedeva. */
.ved:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr);
}

/* --ar vive sulla <figure>, non sull'<img>. --ar e --fit sono letti da
   regole applicate al contenitore, e una custom property non risale: se
   stanno sull'immagine il contenitore vede solo il fallback e tutte le
   cornice tornano a 16/9 — cioè proprio il difetto da togliere, senza che
   nulla segnali che il valore c'è ma non arriva. */
.ved__fig {
  aspect-ratio: var(--ar, 16 / 9);
  /* Su schermate molto verticali il rapporto naturale produrrebbe una
     colonna alta un metro: il tetto impedisce che la sezione diventi una
     colonna infinita, e "contain" mostra la schermata intera al posto di
     rimpiazzarla con uno sfondo. */
  max-height: min(74vh, 780px);
}
.ved__fig img {
  width: 100%;
  /* Il parallasse scorre l'immagine dentro la cornice: l'altezza è
     maggiorata del 14% e l'<img> è alzato di metà, così i 5% di corsa
     non fanno mai comparire un bordo. */
  height: calc(100% + 14%);
  margin-top: -7%;
  aspect-ratio: auto;
  object-fit: var(--fit, cover);
  object-position: top center;
}

/* testo: tre gradini, non un raddoppio. Un raddoppio avrebbe fatto
   esplodere la sezione; nessun gradino l'avrebbe lasciata com'era. */
.ved h3 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); margin-bottom: 16px; }
.ved__txt > p {
  font-size: 1.15rem;
  line-height: 1.64;
  color: var(--p-mut);
  margin: 0 0 22px;
  max-width: 44ch;
}
.ved__l li {
  font-size: 1.03rem;
  line-height: 1.5;
  padding: 10px 0 10px 26px;
}
.ved__l li::before { top: 18px; width: 8px; height: 8px; }
.ved__n { font-size: 11.5px; margin-bottom: 14px; }
.ved__n span { width: 34px; height: 34px; font-size: 13px; }
.ved__fig figcaption { font-size: 13px; padding: 13px 18px 14px; }

/* chiusura del racconto */
.voutro__t { font-size: 1.18rem; }
.voutro p { font-size: 1.03rem; }
.voutro__om { width: 104px; }

/* indice delle altre schermate: da sei-minuscole a sei-leggibili */
.vrest { gap: 14px; }
.vrest img { aspect-ratio: 16 / 10; }
.vrest figcaption { font-size: 11.5px; }

@media (max-width: 1080px) {
  .ved { gap: 38px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .ved:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .ved__fig { max-height: none; }
}
@media (max-width: 860px) {
  .ved, .ved:nth-child(even) { grid-template-columns: 1fr; gap: 26px; }
  /* senza parallasse la sovradimensione non serve e taglierebbe la
     schermata: sotto questo punto l'immagine torna alla sua altezza */
  .ved__fig img { height: auto; margin-top: 0; }
  .ved__txt > p { font-size: 1.08rem; }
  .voutro p { font-size: 0.98rem; }
}

/* ==========================================================================
   §PERCORSO — le cinque infografiche
   Cinque atti, cinque illustrazioni disegnate. Prima di ogni atto c'era un
   quadratino di 46 px con un glifo: cinque simboli uguali di grandezza
   diversa, che non raccontavano nulla e non alleggerivano niente. Qui ogni
   atto ha una scena — 200×128, SVG inline, currentColor — animata con un
   solo gesto, e quel gesto è il verbo dell'atto: entra, si apre, si assegna,
   si firma, sale.
   ========================================================================== */

.ficon {
  /* niente margine negativo: il numero gigante del atto ha già la sua
     altezza di riga e con un -20 px il pannello gli tagliava la coda. */
  margin: 2px -6px 18px;
  padding: 6px 8px 4px;
  /* SU FONDO BIANCO, e questa è una scelta, non una dimenticanza.
     Un pannello colorato dietro a cinque illustrazioni in fila diventa
     una parete: cinque riquadri uguali che si contendono l'attenzione e
     appesantiscono la sezione, che è il difetto che si voleva togliere.
     Le figure sono già colorate e ben sole: a fondo bianco si leggono e la
     colonna respira. */
  background: none;
  overflow: hidden;
}
.pi {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- tratti: i contorni si disegnano ---
   3.2 e non 2.6: a cinque colonne la scena è larga ~170 px su un viewBox
   di 200, quindi un tratto da 2.6 arriva a 2,1 px di schermo e le figure
   fini spariscono. */
.pi-tray, .pi-back, .pi-front, .pi-page, .pi-fold, .pi-ax {
  fill: none;
  stroke: var(--brand, #5E6AD2);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* --- collegamenti e trend ---
   .pi-dash è nella stessa regola perché nella 01 porta il classe
   "pi-dash" e basta: se il tratteggio fosse l'unica regola che lo
   riguarda, resterebbe senza stroke (il default di SVG è "none") e la
   rotaia di arrivo sarebbe invisibile. */
.pi-rail, .pi-lk, .pi-trend, .pi-dash {
  fill: none;
  stroke: var(--brand, #5E6AD2);
  stroke-width: 3.2;
  stroke-linecap: round;
}
.pi-dash { stroke-dasharray: 5 6; }
/* --- superfici --- */
.pi-card {
  fill: #fff;
  stroke: var(--line);
  stroke-width: 2.4;
}
.pi-hd { fill: var(--brand, #5E6AD2); }
.pi-hub { fill: var(--brand, #5E6AD2); }
.pi-ln {
  fill: none;
  stroke: #B6BFCE;
  stroke-width: 4;
  stroke-linecap: round;
}
/* --- accenti --- */
.pi-dot, .pi-coin { fill: var(--brand, #5E6AD2); }
.pi-bar { fill: var(--nexo, #4C1D95); opacity: 0.24; }
.pi-bar2 { opacity: 0.42; }
.pi-bar3 { opacity: 0.66; }
.pi-sig {
  fill: none;
  stroke: var(--ink, #0B1220);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pi-sealc {
  fill: #fff;
  stroke: var(--ok, #15803D);
  stroke-width: 3;
}
.pi-tick {
  fill: none;
  stroke: var(--ok, #15803D);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pi-st .pi-card { transition: none; }

/* testo dell'atto: due gradini, non un corpo diverso */
.fact b { margin-bottom: 14px; }
.fact h3 { font-size: 16.5px; margin-bottom: 10px; }
.fact p { font-size: 13.5px; line-height: 1.6; }
.fact em { font-size: 11.5px; }

@media (max-width: 1000px) {
  .facts { gap: 30px 26px; }
  /* a due colonne la scena ha spazio e può respirare */
  .ficon { padding: 10px 12px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ficon .pi { transition: none; }
}

/* ==========================================================================
   §DENTRO — "Che cosa c'è dentro"
   Tre riquadri di testo con dei pallini. Ora ogni riquadro ha un disegno
   che dice il dominio (il fascicolo, la rete, il commerciale) e ogni voce
   dell'elenco ha un'icona invece di un punto. Le icone sono maschere SVG
   inline: ereditano il colore e il peso dal testo, quindi non introducono
   un secondo sistema di colori nel foglio.
   ========================================================================== */

.fmod { padding: 0 0 24px; overflow: hidden; }
.fmod__art {
  position: relative;
  margin: 0 0 20px;
  padding: 18px 22px 8px;
  background: linear-gradient(165deg, #F6F4FF 0%, #FBFAFF 62%, #FFFFFF 100%);
  border-bottom: 1px solid var(--line);
}
.fmod__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.fmod__in {
  padding: 20px 24px 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.fa-back  { fill: none; stroke: var(--brand, #5E6AD2); stroke-width: 2.6; stroke-linejoin: round; }
.fa-card  { fill: #fff; stroke: var(--line); stroke-width: 2; }
.fa-hd    { fill: var(--brand, #5E6AD2); }
.fa-ln    { fill: none; stroke: #C3CAD8; stroke-width: 3.2; stroke-linecap: round; }
.fa-link  { fill: none; stroke: var(--brand, #5E6AD2); stroke-width: 2.4; stroke-linecap: round; }
.fa-hub   { fill: var(--brand, #5E6AD2); }
.fa-node  { fill: #fff; stroke: var(--brand, #5E6AD2); stroke-width: 2.4; }
.fa-dot   { fill: var(--brand, #5E6AD2); }
.fa-coin  { fill: #F3E8FF; stroke: var(--nexo, #4C1D95); stroke-width: 2.6; }
.fa-eur   { font-size: 24px; font-weight: 700; fill: var(--nexo, #4C1D95);
            text-anchor: middle; dominant-baseline: central; }
.fa-shield{ fill: #fff; stroke: var(--brand, #5E6AD2); stroke-width: 2.6; stroke-linejoin: round; }
.fa-funnel{ fill: #F3F1FB; stroke: var(--brand, #5E6AD2); stroke-width: 2.4; stroke-linejoin: round; }
.fa-clock { fill: none; stroke: var(--ok, #15803D); stroke-width: 2.6; stroke-linecap: round; }

/* le voci dell'elenco: maschera SVG invece del pallino pieno */
.fdoes li { padding-left: 30px; margin-bottom: 10px; font-size: 13.5px; }
.fdoes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  /* il glifo è la maschera, il colore viene dal fondo: così l'icona
     eredita il colore del testo e non introduce un secondo sistema */
  -webkit-mask: var(--ic) center / 14px 14px no-repeat;
  mask: var(--ic) center / 14px 14px no-repeat;
  background: var(--brand, #5E6AD2);
}
.fdoes li:nth-child(1) {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.fdoes li:nth-child(2) {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 4v16'/%3E%3C/svg%3E");
}
.fdoes li:nth-child(3) {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}

/* i chip prendono un pallino di colore: allineati alla famiglia del titolo */
.fchip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 4px 11px; }
.fchip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--brand, #5E6AD2);
  flex: none;
}
/* ogni riquadro ha la sua tinta: la figura e il titolo la condividono */
.fmod:nth-child(1) { --mod: #4C1D95; }
.fmod:nth-child(2) { --mod: #6D28D9; }
.fmod:nth-child(3) { --mod: #2563EB; }
.fmod:nth-child(1) .fchip::before { background: var(--mod); }
.fmod:nth-child(2) .fchip::before { background: var(--mod); }
.fmod:nth-child(3) .fchip::before { background: var(--mod); }
.fmod:nth-child(1) .fa-hub, .fmod:nth-child(1) .fa-hd,
.fmod:nth-child(1) .fa-back, .fmod:nth-child(1) .fa-link,
.fmod:nth-child(1) .fa-node, .fmod:nth-child(1) .fa-dot,
.fmod:nth-child(1) .fa-shield, .fmod:nth-child(1) .fa-funnel { stroke: var(--mod); }
.fmod:nth-child(1) .fa-hub, .fmod:nth-child(1) .fa-hd,
.fmod:nth-child(1) .fa-dot { fill: var(--mod); }
.fmod:nth-child(2) .fa-hub, .fmod:nth-child(2) .fa-hd,
.fmod:nth-child(2) .fa-back, .fmod:nth-child(2) .fa-link,
.fmod:nth-child(2) .fa-node, .fmod:nth-child(2) .fa-dot,
.fmod:nth-child(2) .fa-shield, .fmod:nth-child(2) .fa-funnel { stroke: var(--mod); }
.fmod:nth-child(2) .fa-hub, .fmod:nth-child(2) .fa-hd,
.fmod:nth-child(2) .fa-dot { fill: var(--mod); }
.fmod:nth-child(3) .fa-hub, .fmod:nth-child(3) .fa-hd,
.fmod:nth-child(3) .fa-back, .fmod:nth-child(3) .fa-link,
.fmod:nth-child(3) .fa-node, .fmod:nth-child(3) .fa-dot,
.fmod:nth-child(3) .fa-shield, .fmod:nth-child(3) .fa-funnel { stroke: var(--mod); }
.fmod:nth-child(3) .fa-hub, .fmod:nth-child(3) .fa-hd,
.fmod:nth-child(3) .fa-dot { fill: var(--mod); }

/* il titolo del riquadro prende il pallino del suo dominio */
.fmod__k { display: flex; align-items: center; gap: 9px; font-size: 11.5px; }
.fmod__k::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 6px;
  flex: none;
  background: var(--mod, var(--brand));
}
.fmod h3 { font-size: 1.34rem; margin-bottom: 12px; }
.fmod p { font-size: 13.8px; margin-bottom: 18px; }

/* ==========================================================================
   §PRING — l'anello delle inclusioni, rifatto con misure esatte
   Il difetto era geometrico, non estetico. Con la corona a r=78 dentro un
   viewBox 200×200 e uno spessore di 17, il raggio esterno arrivava a 86.5
   e il testo del prezzo misurava 138 px dentro un mozzo di 115: la cifra
   usciva dal cerchio e finiva sopra la corona. In più gli otto spicchi non
   portavano nessun numero, quindi non si sapeva quale voce fosse quale, e
   l'elenco a due colonne non aveva nessun aggancio con la figura.

   Qui: viewBox 240×240, r=104, spessore 20, mozzo r=76 e prezzo su due
   righe con la baseline allineata al centro ottico. Ogni spicchio porta il
   suo numero, stampato all'angolo esatto del suo arco, e ogni voce
   dell'elenco ha lo stesso colore del suo spicchio.
   ========================================================================== */

.pinc-wrap {
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}
.pring { width: 100%; max-width: 320px; margin: 0 auto; }
.pring__svg { width: 100%; height: auto; overflow: visible; }

.pring__bg {
  fill: none;
  stroke: #E7E9F2;
  stroke-width: 16;
}
.pring__s {
  fill: none;
  stroke-width: 16;
  stroke-linecap: butt;
  transform: rotate(-90deg);
  transform-origin: 140px 140px;
}
/* rampa da scuro a medio: il vecchio gradiente finiva su un viola chiaro
   (#DDD6FE) indistinguibile dal fondo della corona (#EDEFF5). */
.pring__s:nth-of-type(1) { stroke: #3B0F73; }
.pring__s:nth-of-type(2) { stroke: #4C1D95; }
.pring__s:nth-of-type(3) { stroke: #5B21B6; }
.pring__s:nth-of-type(4) { stroke: #6D28D9; }
.pring__s:nth-of-type(5) { stroke: #7C3AED; }
.pring__s:nth-of-type(6) { stroke: #8B5CF6; }
.pring__s:nth-of-type(7) { stroke: #9F7BEA; }
.pring__s:nth-of-type(8) { stroke: #B49BF2; }
.pring__hub { fill: #fff; stroke: var(--line); stroke-width: 1.25; }

/* il numero dello spicchio, bianco, sull'angolo dell'arco */
.pring__i {
  font-size: 16px;
  font-weight: 700;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.pring__n { font-size: 24px; font-weight: 700; fill: var(--ink); }
.pring__l { font-size: 13px; fill: var(--muted); }

/* l'elenco: griglia a due colonne, non `columns`, così le due metà
   hanno la stessa altezza e ogni riga resta leggibile per intero */
.pring__key {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 34px;
}
.pring__key li {
  position: relative;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--ink-2);
  padding: 8px 0 8px 30px;
  border-top: 1px solid var(--line);
}
.pring__key li:nth-child(-n + 2) { border-top: 0; }
.pring__key i {
  position: absolute;
  left: 0;
  top: 7px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  display: grid;
  place-items: center;
  background: var(--kc, var(--nexo));
}

@media (max-width: 900px) {
  .pinc-wrap { grid-template-columns: 1fr; gap: 28px; }
  .pring { max-width: 280px; }
  .pring__key { grid-template-columns: 1fr; }
  .pring__key li:nth-child(2) { border-top: 1px solid var(--line); }
}
/* ==========================================================================
   §SFONDI e §HEADER — non stanno piu' qui
   --------------------------------------------------------------------------
   Erano due inventari separati: sei sezioni con un fondo proprio e una
   testata costruita da zero, con marchio tipografico e pillole acido. Il
   risultato era una pagina che non somigliava al resto del sito e in cui
   ogni sezione aveva il proprio cielo.

   Adesso esistono DUE regole sola, in assets/css/nexo-shell.css, caricato
   dopo questo foglio:

     - lo sfondo e' UN livello unico per tutta la pagina (carta + reticolato
       3D in prospettiva, canvas mosso dal puntatore e dallo scorrimento).
       Nessuna sezione ha piu' un fondo proprio;
     - la testata e' il componente del sito: barra alta navy, marchio
       ufficiale (nexo-logo.svg + wordmark Nasalization), stesse voci,
       stessa pillola di appello.

   Quel foglio dichiara anche i token --nx-*, che questo file continua a
   usare (--nx-void, --nx-void-2, --nx-acid). Per questo i due valori che
   servono anche qui sono ripetuti sotto.
   ========================================================================== */
:root {
  --nx-void:   #0A0818;
  --nx-void-2: #100C26;
  --nx-acid:   #C8F751;
}

/* --- le schedle restano bianche ---------------------------------------
   Il testo vive sulla carta viola, e i riquadri bianchi sono la risposta:
   e' il contrasto a dare la gerarchia, non un altro tono di sfondo sotto
   a tutto. */
.pf-body .pfig,
.pf-body .fmod,
.pf-body .itile,
.pf-body .ocard,
.pf-body .ibase { background-color: #fff; }
.pf-body .pfig { box-shadow: 0 30px 60px -40px rgba(23, 12, 61, 0.5); }