/* ============================================================
   nia-pro.css — Area professionisti (Fase 2)

   Tutto scoped sotto `.nia-pro`: nessuna regola può raggiungere
   il sito consumer. I token arrivano da nia-base.css (globale),
   qui non se ne definiscono di nuovi e non si introducono
   famiglie tipografiche diverse.

   Unica variazione di contesto concessa dal brief: l'header B2B
   usa il teal profondo (--nia-teal-deeper → --nia-teal-foot)
   invece del teal standard dell'header consumer.
   ============================================================ */

.nia-pro {
  background-color: var(--nia-bg);
}

/* Il template è full-width (page-builder): niente padding residuo. */
.nia-pro .nia-pro-main {
  padding: 0;
  margin: 0;
}

.nia-pro #primary {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
}

/* ============================================================
   HEADER
   ============================================================ */

.nia-pro-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, var(--nia-teal-deeper) 0%, var(--nia-teal-foot) 100%);
  box-shadow: var(--nia-shadow-sm);
}

.nia-pro-header__inner {
  max-width: var(--nia-max-w);
  margin: 0 auto;
  padding: var(--nia-sp-4) var(--nia-sp-6);
  display: flex;
  align-items: center;
  gap: var(--nia-sp-6);
}

/* --- Logo --- */

.nia-pro-logo,
.nia-pro-logo:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--nia-sp-3);
  color: #fff;
  font-family: var(--nia-font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  margin-right: auto;
}

.nia-pro-logo:hover {
  color: #fff;
  text-decoration: none;
}

.nia-pro-logo__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.nia-pro-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.nia-pro-logo__badge {
  font-family: var(--nia-font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nia-cta);
}

/* --- Nav --- */

.nia-pro-nav {
  display: flex;
  align-items: center;
  gap: var(--nia-sp-6);
}

.nia-pro-nav__list {
  display: flex;
  align-items: center;
  gap: var(--nia-sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nia-pro-nav__list li {
  margin: 0;
}

.nia-pro-nav__list a,
.nia-pro-nav__list a:visited {
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--nia-font-body);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--nia-transition);
}

.nia-pro-nav__list a:hover {
  color: #fff;
  text-decoration: none;
}

.nia-pro-header__cta {
  white-space: nowrap;
}

/* --- Toggle mobile (JS globale nia-handlers.js) --- */

.nia-pro-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nia-pro-toggle .nia-menu-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 2px;
}

/* ============================================================
   BREADCRUMB (solo sotto-pagine)
   ============================================================ */

.nia-pro-breadcrumb {
  background-color: var(--nia-accent-xlight);
  border-bottom: 1px solid var(--nia-border-light);
}

.nia-pro-breadcrumb__inner {
  max-width: var(--nia-max-w);
  margin: 0 auto;
  padding: var(--nia-sp-3) var(--nia-sp-6);
  font-size: 0.82rem;
  color: var(--nia-text-secondary);
}

.nia-pro-breadcrumb a,
.nia-pro-breadcrumb a:visited {
  color: var(--nia-accent);
  text-decoration: none;
}

.nia-pro-breadcrumb a:hover {
  text-decoration: underline;
}

.nia-pro-breadcrumb__sep {
  margin: 0 var(--nia-sp-2);
  color: var(--nia-text-muted);
}

/* ============================================================
   SEZIONI
   ============================================================ */

.nia-pro .nia-pro-section {
  padding: var(--nia-sp-16) var(--nia-sp-6);
}

.nia-pro .nia-pro-section__inner {
  max-width: var(--nia-max-w);
  margin: 0 auto;
}

/* Alternanza di sfondo: ritmo verticale senza nuovi colori.

   Sequenza dopo la 063c (hero e cta sono i due gradienti teal):
     hero(teal) - momento(bianco) - on-nia(beige) - con-chi-lavoriamo(bianco)
     - off-nia(verde chiaro) - come-funziona(bianco) - quanto-costa(beige)
     - faq(bianco) - cta(teal)

   `con-chi-lavoriamo` DEVE restare bianca: si inserisce subito dopo `on-nia`,
   che non ha fondo proprio e resta quindi sul beige di pagina. Lasciandola
   senza fondo si otterrebbero due beige adiacenti. Verificato reso, non a
   mente. */
.nia-pro .nia-pro-section--momento,
.nia-pro .nia-pro-section--con-chi-lavoriamo,
.nia-pro .nia-pro-section--come-funziona,
.nia-pro .nia-pro-section--faq {
  background-color: var(--nia-card-bg);
}

.nia-pro .nia-pro-section--off-nia {
  background-color: var(--nia-accent-xlight);
}

.nia-pro .nia-pro-section__title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--nia-text-primary);
  margin: 0 0 var(--nia-sp-6);
}

.nia-pro .nia-pro-section p {
  color: var(--nia-text-secondary);
  font-size: 1rem;
  line-height: 1.7;
}

/* --- Hero --- */

.nia-pro .nia-pro-section--hero {
  background: linear-gradient(160deg, var(--nia-teal) 0%, var(--nia-teal-deeper) 100%);
  padding-top: var(--nia-sp-20);
  padding-bottom: var(--nia-sp-20);
}

/* margin-right: auto (non `margin: 0 auto`) per tenere il bordo sinistro di
   titolo, sottotitolo e bottone perfettamente allineato. */
.nia-pro .nia-pro-hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15;
  color: #fff;
  margin: 0 auto var(--nia-sp-5) 0;
  max-width: 26ch;
}

.nia-pro .nia-pro-section--hero p.nia-pro-hero__sub {
  font-size: 1.12rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  max-width: 56ch;
  margin: 0 auto var(--nia-sp-8) 0;
}

/* --- Con chi lavoriamo (063c) --- */

/* Sezione di solo testo: senza un limite di riga il paragrafo arriverebbe a
   1080px e diventerebbe illeggibile. Nessun colore, nessuno spazio nuovo. */
.nia-pro .nia-pro-section--con-chi-lavoriamo p.nia-pro-section__lead {
  max-width: 64ch;
  font-size: 1.05rem;
  margin: 0 0 var(--nia-sp-4);
}

.nia-pro .nia-pro-section--con-chi-lavoriamo p {
  max-width: 68ch;
}

/* --- Card --- */

.nia-pro .nia-pro-cards {
  gap: var(--nia-sp-6);
  margin-top: var(--nia-sp-8);
}

.nia-pro .nia-pro-card {
  background-color: var(--nia-card-bg);
  border: 1px solid var(--nia-border);
  border-radius: var(--nia-radius);
  padding: var(--nia-sp-6);
  box-shadow: var(--nia-shadow-sm);
}

.nia-pro .nia-pro-section--momento .nia-pro-card,
.nia-pro .nia-pro-section--come-funziona .nia-pro-card,
.nia-pro .nia-pro-section--faq .nia-pro-card {
  background-color: var(--nia-bg);
}

.nia-pro .nia-pro-card__title {
  font-size: 1.05rem;
  color: var(--nia-text-primary);
  margin: 0 0 var(--nia-sp-3);
}

.nia-pro .nia-pro-card p {
  margin: 0;
  font-size: 0.94rem;
}

/* Link di coda della card (063c task 3 e 5): «Da 100€/anno - verifica la tua
   citta ->» e «Ottimizzazione una tantum a prezzo fisso ->».

   Non e un bottone: e la coda di lettura della card, quindi resta un paragrafo.
   Il selettore include `p` perche `.nia-pro .nia-pro-card p` qui sopra azzera
   il margine e vincerebbe per specificita. */
.nia-pro .nia-pro-card p.nia-pro-card__link {
  margin: var(--nia-sp-4) 0 0;
  font-size: 0.9rem;
  font-weight: 600;
}

/* 063e — il link di coda delle FAQ è lo stesso oggetto di quello delle card:
   si estende il selettore invece di duplicare la regola, come già fatto dalla
   063c per `--outline`. */
.nia-pro .nia-pro-card__link a,
.nia-pro .nia-pro-faq__link a {
  color: var(--nia-accent-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--nia-transition), border-color var(--nia-transition);
}

.nia-pro .nia-pro-card__link a:hover,
.nia-pro .nia-pro-faq__link a:hover {
  color: var(--nia-accent);
  border-bottom-color: currentColor;
}

/* --- FAQ --- */

.nia-pro .nia-pro-faq {
  margin-top: var(--nia-sp-6);
}

.nia-pro .nia-pro-faq__item {
  background-color: var(--nia-bg);
  border: 1px solid var(--nia-border);
  border-radius: var(--nia-radius-sm);
  padding: var(--nia-sp-4) var(--nia-sp-5);
  margin-bottom: var(--nia-sp-3);
}

.nia-pro .nia-pro-faq__item summary {
  font-family: var(--nia-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--nia-text-primary);
  cursor: pointer;
}

.nia-pro .nia-pro-faq__item p {
  margin: var(--nia-sp-3) 0 0;
  font-size: 0.94rem;
}

/* 063e — coda di link dentro una risposta. Il peso lo distingue dal corpo;
   colore e hover arrivano dalla regola condivisa con `.nia-pro-card__link`. */
.nia-pro .nia-pro-faq__item p.nia-pro-faq__link {
  font-weight: 600;
}

/* --- CTA finale --- */

.nia-pro .nia-pro-section--cta {
  background: linear-gradient(135deg, var(--nia-teal-deeper) 0%, var(--nia-teal-foot) 100%);
  text-align: center;
}

.nia-pro .nia-pro-section--cta .nia-pro-section__title {
  color: #fff;
}

.nia-pro .nia-pro-section--cta p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.nia-pro .nia-pro-form-placeholder {
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: var(--nia-radius-sm);
  padding: var(--nia-sp-5);
  font-size: 0.9rem;
}

/* --- Bottoni core → stile NIA --- */

.nia-pro .nia-pro-actions {
  margin-top: var(--nia-sp-6);
  /* Due CTA affiancate dalla 063c (hero, «Con chi lavoriamo»): il block-gap di
     core e 0.5em, troppo stretto per due pillole. */
  gap: var(--nia-sp-3);
}

.nia-pro .nia-pro-section--cta .nia-pro-actions {
  justify-content: center;
}

.nia-pro .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--nia-sp-3) var(--nia-sp-8);
  background-color: var(--nia-cta);
  color: var(--nia-cta-text);
  font-family: var(--nia-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  border-radius: 100px;
  text-decoration: none;
  transition: background-color var(--nia-transition), transform var(--nia-transition);
}

.nia-pro .wp-block-button__link:hover {
  background-color: var(--nia-cta-hover);
  color: var(--nia-cta-text);
  text-decoration: none;
  transform: translateY(-1px);
}

/* --- Outline: azione secondaria o secondo canale, non seconda CTA (063c) ---

   Regola unica, due casi. Era nata dentro «Quanto costa» come
   `.nia-pro-btn--whatsapp` (063d), ma l'hero della 063c ha bisogno della stessa
   forma su fondo teal: invece di duplicarla, `--whatsapp` diventa un caso di
   `--outline`. Il suo selettore resta elencato qui e non come classe in piu sul
   bottone, cosi il pattern della 063d - direttiva chiusa - non viene toccato.

   Su fondo chiaro prende l'accento; sui due fondi teal (hero e CTA finale)
   passa al bianco, che e gia il colore di titolo e testo la dentro. Nessun
   colore nuovo. */

.nia-pro .nia-pro-btn--outline .wp-block-button__link,
.nia-pro .nia-pro-btn--whatsapp .wp-block-button__link {
  background-color: transparent;
  color: var(--nia-accent-dark);
  border: 1px solid var(--nia-accent);
}

.nia-pro .nia-pro-btn--outline .wp-block-button__link:hover,
.nia-pro .nia-pro-btn--whatsapp .wp-block-button__link:hover {
  background-color: var(--nia-accent);
  color: #fff;
}

.nia-pro .nia-pro-section--hero .nia-pro-btn--outline .wp-block-button__link,
.nia-pro .nia-pro-section--cta .nia-pro-btn--outline .wp-block-button__link {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.nia-pro .nia-pro-section--hero .nia-pro-btn--outline .wp-block-button__link:hover,
.nia-pro .nia-pro-section--cta .nia-pro-btn--outline .wp-block-button__link:hover {
  background-color: #fff;
  color: var(--nia-teal-deeper);
  border-color: #fff;
}

/* --- Form di #contatti: Gravity Forms 5 (063g) ---

   ⚠️ Fuori dagli Output Attesi della 063g, che è una direttiva di tracking.
   Ma il form l'ha messo in pagina la 063g stessa (task 4), e senza queste righe
   il bottone di invio resta il blu di default di Gravity Forms (#204ce5) in mezzo
   a una pagina interamente verde e oro: è un difetto introdotto qui, quindi si
   chiude qui. Stesso precedente della 063f, che toccò il CSS della pagina scheda
   e lo dichiarò.

   ⚠️ **Si pilotano le variabili del tema, non si combattono i selettori.**
   Il form usa il tema "orbital" di Gravity Forms (`.gform-theme--framework`),
   le cui regole hanno specificità alta e vincono su un normale
   `.nia-pro .gform_wrapper input[type="submit"]`. La prima stesura faceva
   esattamente quello e non produceva alcun effetto: il bottone restava blu.
   Verificato leggendo le variabili calcolate sull'elemento reale, non la
   documentazione. Ridichiararle sul wrapper le fa ereditare a tutto il form,
   comprese le parti che non stiamo nominando.

   Nessun colore nuovo: si mappano i token NIA già in uso sulle variabili GF.
   La sezione `--cta` ha fondo teal, quindi le etichette prendono il bianco,
   che è già il colore di titolo e testo là dentro. */

.nia-pro .nia-pro-section--cta .gform_wrapper {
  /* Bottone di invio: stessa forma e stessi colori degli altri bottoni pro. */
  --gf-ctrl-btn-bg-color-primary: var(--nia-cta);
  --gf-ctrl-btn-bg-color-hover-primary: var(--nia-cta-hover);
  --gf-ctrl-btn-bg-color-focus-primary: var(--nia-cta-hover);
  --gf-ctrl-btn-border-color-focus-primary: transparent;
  --gf-ctrl-btn-color-primary: var(--nia-cta-text);
  --gf-ctrl-btn-color-hover-primary: var(--nia-cta-text);
  --gf-ctrl-btn-color-focus-primary: var(--nia-cta-text);
  --gf-ctrl-btn-radius: 100px;
  --gf-ctrl-btn-size: 47px;
  --gf-ctrl-btn-padding-x: 32px;
  --gf-ctrl-btn-font-weight: 600;
  --gf-ctrl-btn-shadow-focus: 0 0 0 3px rgba(255, 255, 255, 0.35);

  /* Etichette e sotto-etichette sul fondo teal. */
  --gf-ctrl-label-color-primary: #fff;
  --gf-ctrl-label-color-secondary: #fff;
  --gf-ctrl-label-color-tertiary: rgba(255, 255, 255, 0.75);
  --gf-ctrl-label-color-quaternary: rgba(255, 255, 255, 0.75);
  --gf-ctrl-label-color-req: var(--nia-accent);

  /* Bordi dei campi: visibili sul teal senza introdurre un colore nuovo. */
  --gf-ctrl-border-color: rgba(255, 255, 255, 0.35);
  --gf-ctrl-border-color-hover: rgba(255, 255, 255, 0.6);
  --gf-ctrl-border-color-focus: #fff;

  max-width: 640px;
  margin: var(--nia-sp-8) auto 0;
  text-align: left;
}

/* ⚠️ Il bottone di invio ha bisogno anche di regole dirette, e di `!important`.
   Il reset del tema orbital (`gravity-forms-theme-reset.min.css`) azzera le
   variabili GF su OGNI discendente —
   `.gform-theme--framework :where(:not(html)...) { --gf-ctrl-*: unset }` — quindi
   la ridichiarazione sul wrapper arriva al bottone solo per alcune proprieta'
   (il colore di sfondo passa, `color` e `border-radius` no). Per quelle due il
   framework vince anche su un selettore a 4 classi.

   `!important` qui e' lo strumento giusto e non una scorciatoia: si sta
   sovrascrivendo un framework di terze parti che dichiara con specificita' alta
   dentro il proprio scope. La regola resta confinata a `.nia-pro-section--cta`,
   cioe' a un solo bottone di una sola pagina.

   ⚠️ Se verifichi questi valori da console, leggili DOPO la transizione: GF
   anima il bottone (`--gf-ctrl-btn-transition: .15s`) e `getComputedStyle()`
   restituisce il valore interpolato. Letto subito, sembra che la regola non
   abbia avuto effetto — errore commesso due volte in questa sessione. */

.nia-pro .nia-pro-section--cta .gform_wrapper .gform_footer input[type="submit"] {
  color: var(--nia-cta-text) !important;
  border-radius: 100px !important;
  height: 47px !important;
  padding: 0 var(--nia-sp-8) !important;
  font-family: var(--nia-font-body);
  font-size: 0.9rem;
  font-weight: 600;
}

/* I messaggi di validazione e di conferma non passano dalle variabili del tema. */
.nia-pro .nia-pro-section--cta .gform_wrapper .gform_validation_errors,
.nia-pro .nia-pro-section--cta .gform_wrapper .gform_validation_errors h2 {
  color: #fff;
}

.nia-pro .nia-pro-section--cta .gform_confirmation_message {
  color: #fff;
  font-size: 1.05rem;
}

/* B14 (063i, 2026-09-01) — il marcatore dei campi obbligatori restava col colore
   del tema Gravity Forms (#3a7c6a): un teal medio che sul fondo teal della
   sezione dava contrasto **2.01** contro il 4.5 richiesto per un testo da 12px,
   su 4 occorrenze visibili. Il blocco qui sopra stila wrapper, submit, errori e
   conferma, ma non questo marcatore — che quindi non era mai stato riportato sul
   fondo verde.

   Nessun colore nuovo: e' lo stesso `rgba(255,255,255,0.9)` gia' usato per il
   testo secondario su fondo teal (`.nia-pro-hero__sub`, `.nia-pro-section--cta p`). */
.nia-pro .nia-pro-section--cta .gform_wrapper .gfield_required {
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   FOOTER
   ============================================================ */

.nia-pro-footer {
  background-color: var(--nia-teal-foot);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--nia-font-body);
}

.nia-pro-footer__inner {
  max-width: var(--nia-max-w);
  margin: 0 auto;
  padding: var(--nia-sp-12) var(--nia-sp-6);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--nia-sp-8);
}

.nia-pro-footer__logo,
.nia-pro-footer__logo:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--nia-sp-2);
  color: #fff;
  font-family: var(--nia-font-heading);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.nia-pro-footer__desc {
  margin: var(--nia-sp-3) 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 34ch;
}

.nia-pro-footer__col h4 {
  font-family: var(--nia-font-heading);
  font-size: 0.95rem;
  color: #fff;
  margin: 0 0 var(--nia-sp-3);
}

.nia-pro-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nia-pro-footer__col li {
  margin-bottom: var(--nia-sp-2);
  font-size: 0.86rem;
  line-height: 1.5;
}

.nia-pro-footer a,
.nia-pro-footer a:visited {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color var(--nia-transition);
}

.nia-pro-footer a:hover {
  color: var(--nia-cta);
  text-decoration: none;
}

.nia-pro-footer__back {
  font-weight: 600;
}

.nia-pro-footer__bottom {
  background-color: var(--nia-teal-foot-dark);
}

.nia-pro-footer__bottom-inner {
  max-width: var(--nia-max-w);
  margin: 0 auto;
  padding: var(--nia-sp-4) var(--nia-sp-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--nia-sp-4);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   QUANTO COSTA (063d)
   ------------------------------------------------------------
   Tre gradini impilati, non affiancati: il gradino 1 contiene una
   tabella a due colonne, che in un terzo di riga a 1080px sarebbe
   illeggibile già su desktop.

   Il gradino 2 è la cerniera fra self-serve e servizi: ha un rilievo
   leggero (bordo accento a sinistra + sfondo appena caldo), non un
   trattamento "piano consigliato" da pricing table — non è il piano
   da scegliere, è il passaggio fra due mondi.

   Nessun colore nuovo: solo token già in nia-base.css.
   ============================================================ */

/* Nessun fondo proprio: la sezione resta sul beige di pagina e le card sono
   bianche. È l'unica combinazione che regge l'alternanza — `come-funziona` e
   `faq`, che la circondano, sono entrambe su `--nia-card-bg`. Con la sezione
   bianca ci si ritroverebbe tre fondi bianchi consecutivi e nessuno stacco.
   ⚠️ Aggiornato dalla 063c: `case-study`, che stava in mezzo alle due, è ora
   fuori dalla composizione (PA-6), quindi `come-funziona` e `quanto-costa`
   sono diventate adiacenti — e la scelta di tenere questa sul beige è quella
   che rende corretta anche la nuova sequenza. */

.nia-pro .nia-pro-section--quanto-costa p.nia-pro-section__lead {
  max-width: 62ch;
  margin: 0 0 var(--nia-sp-8);
}

/* --- Il singolo gradino --- */

.nia-pro .nia-pro-gradino {
  background-color: var(--nia-card-bg);
  border: 1px solid var(--nia-border);
  border-radius: var(--nia-radius);
  padding: var(--nia-sp-6);
  box-shadow: var(--nia-shadow-sm);
  margin-bottom: var(--nia-sp-6);
}

.nia-pro .nia-pro-gradino:last-of-type {
  margin-bottom: 0;
}

/* Gradino 2 — la cerniera. */
.nia-pro .nia-pro-gradino--gbp {
  border-left: 3px solid var(--nia-accent);
  background-color: var(--nia-accent-xlight);
}

.nia-pro .nia-pro-section--quanto-costa p.nia-pro-gradino__eyebrow {
  margin: 0 0 var(--nia-sp-2);
  font-family: var(--nia-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nia-accent);
}

.nia-pro .nia-pro-gradino__title {
  font-size: 1.25rem;
  color: var(--nia-text-primary);
  margin: 0 0 var(--nia-sp-2);
}

.nia-pro .nia-pro-section--quanto-costa p.nia-pro-gradino__price {
  margin: 0 0 var(--nia-sp-5);
  font-family: var(--nia-font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--nia-accent-dark);
  font-variant-numeric: tabular-nums;
}

.nia-pro .nia-pro-section--quanto-costa .nia-pro-gradino p {
  max-width: 68ch;
}

.nia-pro .nia-pro-section--quanto-costa p.nia-pro-gradino__note {
  margin-top: var(--nia-sp-4);
  font-size: 0.88rem;
  color: var(--nia-text-muted);
}

.nia-pro .nia-pro-section--quanto-costa p.nia-pro-gradino__riserva {
  margin-top: var(--nia-sp-3);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--nia-text-secondary);
}

.nia-pro .nia-pro-gradino__list {
  margin: var(--nia-sp-4) 0 0;
  padding-left: var(--nia-sp-5);
  color: var(--nia-text-secondary);
  font-size: 0.94rem;
}

.nia-pro .nia-pro-gradino__list li {
  margin-bottom: var(--nia-sp-2);
}

.nia-pro .nia-pro-gradino .nia-pro-actions {
  margin-top: var(--nia-sp-5);
  gap: var(--nia-sp-3);
}

/* WhatsApp: secondo canale, non seconda CTA - outline, non pieno.
   ⚠️ La regola non sta piu qui: dalla 063c `.nia-pro-btn--whatsapp` e un caso
   di `.nia-pro-btn--outline`, generalizzato nella sezione BOTTONI. Il markup
   del pattern «Quanto costa» non e cambiato. */

/* --- Il listino --- */

/* Il wrapper è la <figure> del blocco core: lo scroll orizzontale, se serve,
   sta qui dentro e non sulla pagina. */
.nia-pro .nia-pro-listino {
  margin: var(--nia-sp-5) 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nia-pro .nia-pro-listino table {
  width: 100%;
  border-collapse: collapse;
  background: var(--nia-card-bg);
  border: 1px solid var(--nia-border);
  border-radius: var(--nia-radius-sm);
  overflow: hidden;
  font-size: 0.95rem;
}

.nia-pro .nia-pro-listino thead {
  background: var(--nia-teal);
}

.nia-pro .nia-pro-listino thead th {
  padding: var(--nia-sp-3) var(--nia-sp-4);
  text-align: left;
  font-family: var(--nia-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  border: 0;
}

.nia-pro .nia-pro-listino tbody tr {
  border-top: 1px solid var(--nia-border-light);
}

.nia-pro .nia-pro-listino tbody tr:nth-child(even) {
  background: var(--nia-bg);
}

.nia-pro .nia-pro-listino tbody td {
  padding: var(--nia-sp-3) var(--nia-sp-4);
  color: var(--nia-text-primary);
  border: 0;
}

.nia-pro .nia-pro-listino tbody td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--nia-accent-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La colonna prezzo non ha bisogno di metà tabella. */
.nia-pro .nia-pro-listino thead th:last-child,
.nia-pro .nia-pro-listino tbody td:last-child {
  width: 34%;
}

.nia-pro .nia-pro-listino thead th:last-child {
  text-align: right;
}

/* --- Nota IVA --- */

.nia-pro .nia-pro-section--quanto-costa p.nia-pro-iva {
  margin: var(--nia-sp-6) 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--nia-text-muted);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .nia-pro-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .nia-pro-toggle {
    display: flex;
    order: 3;
  }

  .nia-pro-nav {
    display: none;
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nia-sp-4);
    padding-top: var(--nia-sp-4);
  }

  /* classe applicata dal toggle globale */
  .nia-pro-nav.nia-nav-open {
    display: flex;
  }

  .nia-pro-header__inner {
    flex-wrap: wrap;
    gap: var(--nia-sp-3);
  }

  .nia-pro-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nia-sp-4);
  }

  .nia-pro .nia-pro-section {
    padding: var(--nia-sp-12) var(--nia-sp-5);
  }

  .nia-pro .nia-pro-section--hero {
    padding-top: var(--nia-sp-12);
    padding-bottom: var(--nia-sp-12);
  }

  .nia-pro .nia-pro-cards {
    flex-wrap: wrap;
  }

  .nia-pro-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .nia-pro-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* --- Quanto costa: mobile (063d) --- */

@media (max-width: 600px) {
  .nia-pro .nia-pro-gradino {
    padding: var(--nia-sp-5);
  }

  /* Righe a due bottoni: su schermo stretto vanno impilati a piena larghezza,
     non spezzati a metà. Nata per il gradino 2 (063d), estesa dalla 063c
     all'hero e a «Con chi lavoriamo», che hanno anche loro due CTA. */
  .nia-pro .nia-pro-gradino .nia-pro-actions,
  .nia-pro .nia-pro-section--hero .nia-pro-actions,
  .nia-pro .nia-pro-section--con-chi-lavoriamo .nia-pro-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .nia-pro .nia-pro-gradino .nia-pro-actions .wp-block-button,
  .nia-pro .nia-pro-section--hero .nia-pro-actions .wp-block-button,
  .nia-pro .nia-pro-section--con-chi-lavoriamo .nia-pro-actions .wp-block-button {
    width: 100%;
  }

  .nia-pro .nia-pro-gradino .nia-pro-actions .wp-block-button__link,
  .nia-pro .nia-pro-section--hero .nia-pro-actions .wp-block-button__link,
  .nia-pro .nia-pro-section--con-chi-lavoriamo .nia-pro-actions .wp-block-button__link {
    width: 100%;
    padding-left: var(--nia-sp-4);
    padding-right: var(--nia-sp-4);
    text-align: center;
  }

  /* Il listino resta una tabella, ma stretta: la fascia va a capo, il prezzo
     no. Lo scroll, se serve, resta dentro la figure. */
  .nia-pro .nia-pro-listino table {
    font-size: 0.88rem;
  }

  .nia-pro .nia-pro-listino thead th,
  .nia-pro .nia-pro-listino tbody td {
    padding: var(--nia-sp-3);
  }

  .nia-pro .nia-pro-listino thead th:last-child,
  .nia-pro .nia-pro-listino tbody td:last-child {
    width: 30%;
  }
}