/* ==========================================================================
   NEXO SHELL — sfondo unico e testata di site
   --------------------------------------------------------------------------
   Due sole cose, condivise da /piattaforme.html e dalla sottopagina
   piattaforme/gestione-pratiche-indebitamento.html:

     §SFONDO   il reticolato 3D tecnologico: UN solo livello, fisso, che
               copre tutta la pagina. Non esiste un secondo sfondo ne'
               un terzo: le sezioni non hanno piu' un fondo proprio e
               quello che si vede e' sempre lo stesso disegno.
     §TESTATA  la barra in alto del sito: sub-header navy + marchio ufficiale
               (nexo-logo.svg + wordmark SVG) + voci di menu. Sul resto del
               sito la barra e' trasparente sopra una foto scura; qui la
               pagina e' carta chiara, quindi la barra e' piena. Il marchio,
               la gerarchia, il colore delle voci e la pillola di appello
               sono IDENTICI a quelli delle altre pagine: cambia la
               trasparenza, non il componente.

   Regola ereditata dal progetto: il fallback statico e' la condizione di
   partenza. Senza canvas (o senza JS, o con movimento ridotto) lo sfondo e'
   la griglia piatta disegnata in CSS; il canvas ci mette sopra solo il
   reticolato e il parallasse.
   ========================================================================== */

/* ==========================================================================
   §SFONDO — l'unico sfondo della pagina
   ========================================================================== */

:root {
  /* La carta: non bianco puro. Con l'inchiostro #0B1220 dà 17:1 di
     contrasto, il bianco non aggiungeva leggibilità, solo riverbero. */
  --nx-paper:   #F4F3FC;
  --nx-paper-2: #EDEBFA;
  --nx-ink:     #0B1220;
  --nx-ink-2:   #2C3350;
  --nx-mut:     #5A5F7E;
  --nx-line:    #DEDAEF;
  --nx-mast:    #0F172A;          /* stessa navy della sub-header del sito */
  --nx-mast-2:  #0A1220;
  --nx-brand:   #6D28D9;
  --nx-brand-d: #4C1D95;
  --nx-lilac:   #A78BFA;
  --nx-cyan:    #4AA3FF;
  /* Il reticolato, in chiaro e in scuro (per le cornici scure dei mockup). */
  --nx-grid:      rgba(72, 66, 176, 0.075);
  --nx-grid-dark: rgba(167, 139, 250, 0.16);
}

/* NOTA — niente `html { scroll-behavior: smooth }`.
   Sembra un di più e non lo è: rende animate anche gli scorrimenti
   programmatici (quelli del menu, dei link interni e degli strumenti di
   verifica), e un elemento che si muove mentre lo si fotografa non è mai
   "stabile". Il salto alle sezioni resta istantaneo, che su una pagina di
   sei metri è anche la cosa meno fastidiosa. */

/* La pagina intera appoggia sulla carta. È il fondo del <body>: il
   reticolato ci va sopra, in un livello fisso, e tutte le sezioni restano
   trasparenti. */
body.pf-body {
  background-color: var(--nx-paper);
  background-image:
    radial-gradient(120% 78% at 50% -12%, rgba(124, 92, 246, 0.16) 0%, rgba(124, 92, 246, 0) 62%),
    linear-gradient(180deg, var(--nx-paper) 0%, var(--nx-paper-2) 78%, var(--nx-paper) 100%);
  background-attachment: fixed;
  color: var(--nx-ink);
  font-family: var(--pf-font);
}

/* Il livello del reticolato. `position: fixed` + `z-index: -1` è la scelta
   che non richiede di toccare lo `position` di nessuna sezione: sta sotto
   tutto il contenuto in flusso e sopra il fondo del <body>. */
.nx-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.nx-bg__canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
/* Il canvas si accende solo quando JS ha confermato che può disegnare:
   senza conferma resta la griglia piatta qui sotto. */
.nx-bg--on .nx-bg__canvas { opacity: 1; }

/* Rete di sicurezza: due gradienti invece di un'immagine. Pesa zero byte,
   non fa richieste e non lascia il bordo dentellato. È il fondo anche
   durante il caricamento, prima che il canvas venga acceso. */
.nx-bg__flat {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--nx-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--nx-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 34%, #000 0%, rgba(0, 0, 0, 0.25) 58%, transparent 82%);
  mask-image: radial-gradient(120% 90% at 50% 34%, #000 0%, rgba(0, 0, 0, 0.25) 58%, transparent 82%);
}
.nx-bg--on .nx-bg__flat { opacity: 0; }

/* --- tutte le sezioni perdono il fondo proprio ------------------------
   È il punto dell'obiettivo: non più "un fondo per sezione". Qui si
   azzerano i fondi che v2/v3/v4 avevano assegnato a `.hhero`, `.vsec`,
   `.fsec`, `.wsec`, `.psec`, `.osec`, `.isec` e alla cornice dei mockup. */
.pf-body .hhero,
.pf-body .fsec,
.pf-body .wsec,
.pf-body .psec,
.pf-body .osec,
.pf-body .isec,
.pf-body .vsec {
  background: transparent;
  background-image: none;
  border-top: 0;
}

/* La sezione del prodotto era l'unica isola scura. Ora è la stessa carta
   del resto della pagina: cambiano i token, non il markup. Le schermate
   vere restano scure dentro le loro cornici — quelle sono il prodotto, non
   lo sfondo. */
.pf-body .vsec {
  --p-canvas: transparent;
  --p-s1:     #FFFFFF;
  --p-s2:     #F8F7FE;
  --p-hair:   #DEDAEF;
  --p-ink:    var(--nx-ink);
  --p-mut:    #565C7C;
}
.pf-body .vsec::before { display: none; }
/* I due testi pensati per fondo scuro, riportati su carta. */
.pf-body .vsec h2 em,
.pf-body .vnote a { color: var(--nx-brand); }
.pf-body .vnote a { border-bottom-color: rgba(109, 40, 217, 0.35); }
.pf-body .vnote a:hover { border-bottom-color: var(--nx-brand); }
.pf-body .ved__l li,
.pf-body .voutro b { color: var(--nx-ink-2); }
.pf-body .ved__fig,
.pf-body .voutro { box-shadow: 0 28px 56px -34px rgba(23, 12, 61, 0.42); }
/* La finestrella delle schermate rimpicciolite resta scura: le immagini
   hanno fondo scuro e una cornice bianca le farebbe galleggiare. */
.pf-body .vrest img { background: #0A0B0C; }

/* La cornice del mockup dell'hero e il piè di pagina non sono "sezioni":
   sono componenti. Il mockup resta scuro perché contiene una schermata. */
.pf-body .hframe { background: var(--nx-void-2, #100C26); }

/* Il piè di pagina è il punto in cui la pagina chiude: un tono sotto la
   carta, non un'altra scena. */
.pf-body footer { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(8px); }
.pf-body .sub-footer { background: rgba(15, 23, 42, 0.96); }
.pf-body footer h4 { color: var(--nx-ink); }
.pf-body footer .footer-item p,
.pf-body .footer-cta p { color: var(--nx-mut); }
.pf-body footer .menu-list a { color: var(--nx-ink-2); }
.pf-body footer .menu-list a:hover { color: var(--nx-brand); }
.pf-body footer .footer-mail { color: var(--nx-brand); }
.pf-body .sub-footer p { color: #94A3B8; }

/* --- il salto al contenuto ------------------------------------------- */
.pf-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10050;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  background: var(--nx-brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.pf-skip:focus { left: 0; }

/* ==========================================================================
   §TESTATA — la barra del sito
   ========================================================================== */

/* La barra alta con gli orari: identica a tutte le altre pagine. */
.pf-body .sub-header {
  background-color: var(--nx-mast);
  border-bottom: 1px solid rgba(167, 139, 250, 0.16);
}
.pf-body .sub-header ul li a { color: #CBD5E1; }
.pf-body .sub-header ul li a:hover { color: #fff; }

/* La barra di navigazione. Sul sito è trasparente sopra una fotografia
   scura; qui la pagina è chiara, quindi è piena. Il colore è lo stesso
   navy della barra alta: le due unite si leggono come un unico blocco
   scuro, non come due elementi diversi. */
.pf-body .site-header {
  position: sticky;
  top: 0;
  z-index: 9000;
  /* Il template scrive `header { background-color: transparent !important }`:
     serve lo stesso livello, o la regola non vince. */
  background-color: var(--nx-mast) !important;
  border-bottom: 1px solid rgba(167, 139, 250, 0.18);
  transition: transform 0.35s ease, box-shadow 0.3s ease;
}
.pf-body .site-header.headroom--pinned { box-shadow: 0 14px 34px -24px rgba(10, 18, 32, 0.9); }
.pf-body .site-header.headroom--unpinned { transform: translateY(-110%); }

/* Il template fa `float: left` sul brand: dentro una barra scura con
   logo e menu affiancati il float è quello che fa cadere il menu sotto. */
.pf-body .site-header .navbar { padding: 12px 0; }
.pf-body .site-header .navbar > .container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;
}
.pf-body .site-header .navbar .navbar-brand {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  flex: 0 0 auto;
  text-decoration: none;
}
.pf-body .site-header .brand-mark { width: auto; height: 30px; flex: none; }
.pf-body .site-header .nexo-logo-svg { height: 26px; }

/* Le voci: le stesse del sito — testo bianco, viola all'hover e alla voce
   corrente, filetto viola sotto. Niente pillole: la pillola è nel sito solo
   per la voce di appello. */
.pf-body .site-header .navbar-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin-left: auto;
}
.pf-body .site-header .navbar-nav .nav-item { margin: 0; }
.pf-body .site-header .navbar-nav .nav-item > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* 44 px e' la soglia del dito: sotto, il bersaglio e' piccolo anche se
     sembra grande. Con `min-height` e non con il padding la soglia e'
     rispettata anche quando il carattere si stringe. */
  min-height: 44px;
  padding: 9px 14px;
  margin: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0.5px;
  text-transform: capitalize;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.pf-body .site-header .navbar-nav .nav-item > .nav-link:hover,
.pf-body .site-header .navbar-nav .active > .nav-link,
.pf-body .site-header .navbar-nav .nav-link.current,
.pf-body .site-header .navbar-nav .nav-link.show,
.pf-body .site-header .navbar-nav .nav-link[aria-current="page"] {
  color: var(--nx-lilac);
  border-bottom-color: var(--nx-lilac);
}
.pf-body .site-header .navbar-nav .nav-item > .nav-link:focus-visible {
  outline: 2px solid var(--nx-lilac);
  outline-offset: 3px;
  border-radius: 6px;
}

/* La voce di appello: la pillola viola del sito, invariata.

   Il selettore porta anche `.navbar-nav`: la regola generale della voce
   (`.navbar-nav .nav-item > .nav-link`, cinque classi) ha una
   specificita' maggiore di questa e le cancellerebbe il fondo. */
.pf-body .site-header .navbar-nav .nav-cta { margin-left: 12px; }
.pf-body .site-header .navbar-nav .nav-cta .nav-link {
  min-height: 44px;
  background-color: var(--nx-brand);
  color: #fff !important;
  border-bottom: 0;
  border-radius: 30px;
  padding: 9px 20px !important;
  margin-left: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
}
.pf-body .site-header .navbar-nav .nav-cta .nav-link:hover { background-color: var(--nx-brand-d); }

/* I menu a tendina: pannello scuro, come la barra che li contiene. */
.pf-body .site-header .nav-caret { color: var(--nx-lilac); font-size: 10px; }
.pf-body .site-header .nav-dropdown.open .nav-caret { transform: rotate(180deg); }
.pf-body .site-header .nav-dropdown-menu {
  min-width: 268px;
  margin-top: 12px;
  padding: 8px 0;
  border: 1px solid rgba(167, 139, 250, 0.24);
  border-radius: 12px;
  background: #131C33;
  box-shadow: 0 26px 56px -24px rgba(4, 8, 20, 0.85);
}
.pf-body .site-header .nav-dropdown-menu .nav-dropdown-link {
  display: block;
  padding: 11px 20px;
  color: #CFD6E6;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.pf-body .site-header .nav-dropdown-menu .nav-dropdown-link:hover,
.pf-body .site-header .nav-dropdown-menu .nav-dropdown-link:focus {
  background: rgba(167, 139, 250, 0.16);
  color: #fff;
}
.pf-body .site-header .nav-dropdown-link[aria-current="page"] {
  background: rgba(167, 139, 250, 0.14);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--nx-lilac);
}

/* Il pulsante del menu su schermo stretto. */
.pf-body .site-header .navbar-toggler {
  position: static;
  margin-left: auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  background: transparent;
}
.pf-body .site-header .navbar-toggler:focus-visible { outline: 2px solid var(--nx-lilac); outline-offset: 3px; }
.pf-body .site-header .navbar-toggler-icon {
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
}
.pf-body .site-header .navbar-toggler-icon::after { content: none; }

/* --- sotto 1200 px il menu si richiude dietro il pulsante ---------------
   Sei voci, due menu a tendina e la pillola di appello non entrano in
   1024 px: la barra sbordava di 47 px e il documento diventava
   scorribile in orizzontale. La soglia sale quindi a 1200 px, e la barra
   si stringe ancora un gradino sotto i 1199 per non sprecare spazio.

   Il template dichiara `navbar-expand-lg`, che apre il menu a 992 px: qui
   va richiuso, e per farlo serve `display`, non un semplice ridimensione. */

/* Il menu aperto su schermo stretto. Il template lo forza a fondo bianco
   con `!important` sotto i 992 px: sotto una barra scura va riscritto, o
   il menu è bianco su scuro. */
@media (max-width: 1199.98px) {
  .pf-body .site-header .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 0;
    padding: 12px 16px 16px;
    text-align: left;
    border: 1px solid rgba(167, 139, 250, 0.24);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background-color: var(--nx-mast-2) !important;
    background-image: none !important;
    box-shadow: 0 26px 50px -24px rgba(4, 8, 20, 0.9);
  }
  .pf-body .site-header .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .pf-body .site-header .navbar-nav .nav-item { border-bottom: 0; margin: 0; }
  .pf-body .site-header .navbar-nav .nav-item > .nav-link {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px !important;
    color: #fff !important;
    font-size: 15px;
  }
  .pf-body .site-header .navbar-nav .nav-item > .nav-link:hover,
  .pf-body .site-header .navbar-nav .nav-item > .nav-link.show,
  .pf-body .site-header .navbar-nav .nav-item > .nav-link[aria-current="page"] {
    color: var(--nx-lilac) !important;
    background: rgba(167, 139, 250, 0.14);
    border-bottom-color: transparent;
  }
  .pf-body .site-header .navbar-nav .nav-cta { margin-left: 0; margin-top: 8px; }
  .pf-body .site-header .navbar-nav .nav-cta .nav-link { justify-content: center; }
  .pf-body .site-header .nav-dropdown-menu {
    box-shadow: none;
    margin-top: 2px;
    background-color: #1B2540;
    border-radius: 10px;
  }
  .pf-body .site-header .nav-dropdown-menu .nav-dropdown-link { padding: 10px 14px; }
}

/* NOTA — qui non c'e' piu' nessuna regola che azzera il fondo di
   `#navbarResponsive`. Quella regola serviva quando la testata era
   trasparente sopra un blocco chiaro: il pannello bianco del template
   era il fondo naturale e non si vedeva. Con la testata piena e scura il
   pannello bianco sarebbe un salto di quarant'anni di design, quindi il
   fondo qui sotto e' esplicitamente il navy della barra. */

/* --- la barra stretta, 992–1199 px -------------------------------------
   Sei voci più la pillola di appello, con il logo, non entrano in 1024 px
   con i paddings del template: la barra sbordava di 255 px e il documento
   diventava scorribile in orizzontale. Sotto i 1200 px la barra si stringe:
   marchio più piccolo, voci con meno padding, carattere un gradino sotto.
   Non è un compromesso: è la misura giusta per quella larghezza. */
@media (max-width: 1199.98px) {
  /* Due avversari, entrambi con `!important`:
       - Bootstrap  `.navbar-expand-lg .navbar-collapse { display:flex !important }`
       - il template `#navbarResponsive { display:flex !important }`
     Il secondo ha un selettore di ID e batte qualunque classe: per
     richiudere il menu serve scrivere l'ID, non accorciare la regola. */
  .pf-body .site-header #navbarResponsive { display: none !important; }
  .pf-body .site-header #navbarResponsive.show,
  .pf-body .site-header #navbarResponsive.collapsing { display: block !important; }
  .pf-body .site-header .navbar-expand-lg .navbar-toggler { display: block; }
  .pf-body .site-header .navbar { padding: 10px 0; }
  .pf-body .site-header .navbar > .container { gap: 12px; }
  .pf-body .site-header .navbar .navbar-brand { gap: 9px; }
  .pf-body .site-header .brand-mark { height: 27px; }
  .pf-body .site-header .nexo-logo-svg { height: 23px; }
}

/* Con `position: sticky` la barra occupa il suo posto nel flusso: il primo
   blocco non ha più bisogno del compensatore che serviva con `fixed`. */
@media (max-width: 575.98px) {
  .pf-body .site-header .brand-mark { height: 24px; }
  .pf-body .site-header .nexo-logo-svg { height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-body .site-header,
  .pf-body .site-header .navbar-nav .nav-item > .nav-link { transition: none; }
}