/* ==========================================================================
   Cyber Lex — TAC-Inspired Ultra-Clean Minimal Design
   Mobile First | Core Web Vitals Optimized
   ========================================================================== */

:root {
  --color-bg: #ffffff;
  --color-bg-soft: #f7f8fa;
  --color-navy: #0f172a;
  --color-navy-light: #1e293b;
  --color-text: #0f172a;
  --color-text-secondary: #64748b;
  --color-text-muted: #94a3b8;
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  --color-phone: #0f172a;
  --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3.25rem;
  --font-size-5xl: 4rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;
  --spacing-5xl: 8rem;
  --radius-full: 9999px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --max-width: 1200px;
  --transition: 200ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  /* Piede sempre in fondo. Su una pagina corta — la 404, il «grazie» — il
     footer si fermava dov'era finito il contenuto e sotto restava una striscia
     bianca fino al bordo dello schermo. Il contenuto si prende lo spazio che
     avanza (`flex: 1 0 auto`) e il piede scende. Sulle pagine lunghe non
     cambia nulla: non c'e' spazio che avanza. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* `1 0 auto` e non `1`: con `flex: 1` la base diventa 0% e il contenuto delle
   pagine lunghe verrebbe compresso invece di dettare l'altezza. */
body > main {
  flex: 1 0 auto;
  /* AOS tiene gli elementi con `fade-left` / `fade-right` traslati di 100px di
     lato finche' non entrano in schermo. Su una colonna larga meta' pagina quei
     100px escono dal bordo e aprono una barra di scorrimento orizzontale, su
     ogni pagina dove quelle animazioni restano sotto il piegamento.
     Il taglio va qui e non sul `body`: sul body il browser lo propaga alla
     finestra e la pagina scorre di lato lo stesso (provato), mentre `main` e'
     fratello dell'header e non ne disturba lo `sticky`.
     `clip` e non `hidden`: `hidden` su un asse solo obbliga l'altro ad `auto` e
     fa di `main` un contenitore di scorrimento; `clip` taglia e basta. La riga
     con `hidden` resta come ricambio per Safari sotto la 16. */
  overflow-x: hidden;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-navy); text-decoration: none; transition: opacity var(--transition); }
a:hover { opacity: 0.7; }
ul, ol { list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* ===== HEADER ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.header__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.header__logo img {
  height: 44px;
  width: auto;
}
/* Barra sola col logo (pagina di accesso): logo al centro, un filo sotto per
   staccarla dalla pagina, che senza menu e pie' di pagina e' quasi vuota. */
.header--sola { border-bottom: 1px solid var(--color-border); }
.header__inner--centro { justify-content: center; }

/* Mobile nav toggle */
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-navy);
  border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav {
  display: none;
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.nav--open { display: block; }
.nav__list { padding: var(--spacing-sm) 0; }
.nav__link {
  display: block;
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: color var(--transition);
}
.nav__link:hover,
.nav__link--active { color: var(--color-navy); opacity: 1; }
.nav__phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--spacing-sm) var(--spacing-lg);
  color: var(--color-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
}
.nav__phone svg { width: 18px; height: 18px; }
/* Icone dell'account in testata: stessa riga del telefono, un tondo al
   passaggio del mouse. Il pulsante di uscita e' un <button> dentro un <form>
   e va spogliato dello stile nativo per somigliare al link accanto. */
.nav__esci { display: contents; }
.nav__icona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full);
  color: var(--color-navy); font-size: 1.05rem; background: transparent; border: 0;
  cursor: pointer; transition: background var(--transition);
}
.nav__icona:hover { background: var(--color-bg-soft); color: var(--color-navy); opacity: 1; }


/* Icone dell'account e «Contattaci» vivono fuori dal menu, in
   `.header__azioni`: su mobile accanto al burger, su desktop dopo il menu. */
.header__azioni { display: flex; align-items: center; gap: 2px; margin-left: auto; }
/* Su telefono il link al modulo e' un tondo con la busta, come le icone
   dell'account accanto; da 1024px in su torna il bottone con la scritta. */
.nav__cta-testo { display: none; }
.nav__cta-icona { font-size: 1.05rem; }
.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 0 0 var(--spacing-xs);
  padding: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  text-align: center;
  transition: background var(--transition);
  /* Su telefono e' un'icona come le altre: sfondo e colore pieni tornano
     solo col bottone da desktop, piu' sotto. */
  background: transparent;
  color: var(--color-navy);
}
/* Al passaggio: su telefono come le icone accanto, da desktop come il bottone. */
.nav__cta:hover { background: var(--color-bg-soft); color: var(--color-navy); opacity: 1; }

/* ===== HERO ===== */
/* Hero a tutta viewport con l'immagine di sfondo. L'immagine resta un `<img>`
   nel markup, non una `background-image`: cosi' conserva l'`alt`, il
   `loading="eager"` e la query di cache-busting che aggiunge `url_for`. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  /* `svh` = viewport "piccola", quella con le barre del browser mobile
     visibili: evita che il contenuto finisca sotto la barra degli indirizzi.
     Chi non la supporta resta sulla riga precedente. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: var(--spacing-4xl) 0;
}
.hero > .container { position: relative; z-index: 1; }
/* `row` di Bootstrap: la disposizione la fa la griglia del framework, le
   distanze restano quelle del sito passate come gutter. Vedi in fondo al file
   «Griglie di Bootstrap con i breakpoint del sito». */
.hero__grid {
  --bs-gutter-x: var(--spacing-2xl);
  --bs-gutter-y: var(--spacing-2xl);
}
.hero__content { max-width: 720px; }
.hero__title {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  margin-bottom: var(--spacing-lg);
}
.hero__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--spacing-xl);
  max-width: 540px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Immagine ferma, contenuto che le scorre davanti. Da 1024px in su: sotto, il
   fisso costringe il browser a ridipingere a ogni pixel di scorrimento e su
   telefono si vede, oltre al fatto che l'effetto su uno schermo alto e stretto
   non si apprezza.
   `clip-path` sull'hero e' la chiave: ritaglia il figlio fisso al riquadro
   dell'hero senza diventarne il contenitore di riferimento — cosa che invece
   farebbero `transform` o `filter`, annullando il fissaggio e riportando tutto
   com'era. Cosi' l'immagine resta un `<img>` con il suo `alt`, la sua priorita'
   di caricamento e la query di cache-busting, invece di degradare a sfondo CSS. */
@media (min-width: 1024px) {
  .hero { clip-path: inset(0); }
  .hero__image { position: fixed; }
}
/* Chi ha chiesto meno animazioni riprende l'immagine solidale alla pagina. */
@media (prefers-reduced-motion: reduce) {
  .hero { clip-path: none; }
  .hero__image { position: absolute; }
}
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Velatura chiara: la foto e' luminosa ma ha il monitor scuro al centro, e il
   testo del sito e' navy. Senza questo strato il titolo diventa illeggibile
   appena capita sopra la parte scura. */
.hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.82) 100%);
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-navy);
  color: #fff;
}
.btn--primary:hover { background: var(--color-navy-light); color: #fff; opacity: 1; }
.btn--outline {
  background: transparent;
  color: var(--color-navy);
  border: 1.5px solid #0e172a;;
}
.btn--outline:hover { color: white; border-color: var(--color-navy); opacity: 1; background: var(--color-navy);}
.btn__arrow { font-size: 1.1em; transition: transform var(--transition); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ===== SECTIONS ===== */
.section { padding: var(--spacing-4xl) 0; }
.section--soft { background: var(--color-bg-soft); }
.section__header { max-width: 600px; margin-bottom: var(--spacing-3xl); }
.section__header--center { text-align: center; margin-left: auto; margin-right: auto; }
.section__eyebrow {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-md);
}
.section__title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  margin-bottom: var(--spacing-md);
}
.section__subtitle {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  line-height: 1.7;
}

/* ===== STATS ===== */
/* Il bordo sta qui, la `row` va dentro: sulla `row` stessa i margini negativi
   di Bootstrap allungherebbero le due righe di bordo oltre il contenitore. */
.stats {
  padding: var(--spacing-3xl) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.stats__row {
  --bs-gutter-x: var(--spacing-xl);
  --bs-gutter-y: var(--spacing-xl);
}
.stat__number {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-navy);
  /* Cifre a larghezza fissa: mentre il contatore sale il numero non cambia
     larghezza a ogni fotogramma. */
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-sm);
}

/* La fascia dei numeri appoggia su una foto ferma: scorrendo, il contenuto le
   passa davanti. La foto e' chiarissima, quindi non si ribaltano i colori — si
   vela di bianco, come fa gia' l'hero con la propria immagine, e i numeri
   restano navy. La velatura non e' un vezzo: sotto, il riquadro di ricerca al
   centro della foto passerebbe proprio dietro le cifre. */
.stats-band {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)),
    url("../images/reputazione-online.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* I due filetti separavano i numeri dal bianco della pagina. Ora a separarli
   c'e' la fascia stessa, e sulla foto velata sarebbero comunque invisibili. */
.stats-band .stats {
  border-top: 0;
  border-bottom: 0;
}
/* Un gradino piu' scura solo qui. Sul grigio uniforme di prima l'etichetta
   stava a 4.48 contro 1, appena sopra il minimo; sotto c'e' una foto, e dove
   capita uno dei suoi punti scuri lo stesso grigio scende a 3.7. Questa tinta
   regge anche li' (5.9). I numeri, gia' navy, non hanno bisogno di nulla. */
.stats-band .stat__label { color: #4d4a40; }
/* Il fermo-immagine solo da desktop. Sotto i 1024px non e' una scelta di gusto:
   iOS non sostiene `fixed` e disegna lo sfondo ingrandito e fuori posto, e su
   ogni telefono costringe il browser a ridipingere la fascia a ogni pixel di
   scorrimento. Li' la foto scorre insieme alla pagina. */
@media (min-width: 1024px) {
  .stats-band { background-attachment: fixed; }
}
/* Lo sfondo fermo e' a tutti gli effetti un movimento: chi ha chiesto meno
   animazioni si riprende la foto solidale alla pagina. Va dopo la regola qui
   sopra, altrimenti a parita' di peso vincerebbe quella. */
@media (prefers-reduced-motion: reduce) {
  .stats-band { background-attachment: scroll; }
}

/* ===== SERVICE CARDS GRID ===== */
.service-cards {
  --bs-gutter-x: var(--spacing-lg);
  --bs-gutter-y: var(--spacing-lg);
}
.service-card {
  padding: var(--spacing-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), transform var(--transition);
  display: block;
  color: var(--color-text);
}
.service-card:hover {
  border-color: var(--color-navy);
  transform: translateY(-2px);
  opacity: 1;
}
.service-card__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.service-card__arrow {
  font-size: 1.25rem;
  transition: transform var(--transition);
  color: var(--color-text-muted);
}
.service-card:hover .service-card__arrow {
  transform: translateX(4px);
  color: var(--color-navy);
}
.service-card__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.8;
}

/* ===== COME AGIAMO ===== */
/* Tre passi in sequenza, subito sotto le `.service-card`. Il numero in cifre
   e' quello che le distingue dalle schede dei servizi qui sopra, che hanno la
   stessa cornice: senza, sarebbero due griglie identiche una in fila all'altra.
   Stesse cifre a due posizioni del sottomenu «Tool forensi». */
.process__row {
  /* Misura del pallino: da qui dipende anche di quanto la scheda gli scorre
     sotto, cioe' meta' di questo valore. */
  --process-index: 2.25rem;
  --bs-gutter-x: var(--spacing-lg);
  --bs-gutter-y: var(--spacing-2xl);
}
.process-card {
  /* Riferimento sia per il numero appoggiato sul bordo sia per il tratteggio
     che parte dal fianco: entrambi si posizionano rispetto alla scheda. */
  position: relative;
  /* In cima c'e' piu' aria che sui tre lati: la meta' bassa del pallino entra
     nella scheda, e l'icona deve restarne libera. */
  padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  transition: border-color var(--transition), transform var(--transition);
}
/* Il numero sta a cavallo del bordo superiore: meta' fuori, meta' dentro, con
   la scheda che gli passa sotto. Centrato in larghezza — dove, sotto i 1024px,
   arriva anche il tratteggio che scende dalla scheda precedente. */
.process__index {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--process-index);
  height: var(--process-index);
  padding: 0 0.6rem;
  border-radius: var(--radius-full);
  background: #0f172a;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  /* Cifre a larghezza fissa: 01, 02 e 03 restano dello stesso ingombro. */
  font-variant-numeric: tabular-nums;
}
/* Il filo tratteggiato sta nel varco fra una scheda e l'altra. Fin qui le
   schede sono incolonnate, quindi il varco e' quello verticale: il filo scende
   dal fondo della scheda precedente alla cima di questa, a meta' larghezza. */
.process__row > .col-12 + .col-12 > .process-card::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  height: var(--bs-gutter-y);
  border-left: 2px dashed var(--color-border);
}
/* Icone Font Awesome Free (CC BY 4.0) incluse come SVG: la CSP del sito
   (`default-src 'self'`) vieta il CDN, e il pacchetto completo sarebbe 1 MB di
   font per tre disegni. Vedi i partial `_icon_*.html`. */
.process-card__icon {
  display: block;
  margin-bottom: var(--spacing-md);
  color: var(--color-navy);
  transition: color var(--transition);
}
.process-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}
.process-card__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}
/* Icona a fianco del titolo invece che sopra. Lo stacco inferiore dell'icona
   serviva quando stava per conto suo su una riga sua: qui alzerebbe la riga e
   basta, e lo stacco verso il testo lo porta il blocco intero. */
.process-card__intestazione {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}
.process-card__intestazione .process-card__icon,
.process-card__intestazione .process-card__title { margin-bottom: 0; }
.process-card__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.8;
}
/* --- Passi a larghezza fissa, sempre in fila ---
   La riga smette di spartirsi lo spazio in colonne di percentuale e diventa un
   elenco di schede tutte della stessa misura: 23rem l'una, un numero e non una
   frazione del contenitore.
   `margin: 0` e i riempimenti azzerati sulle colonne disinnescano i gutter di
   Bootstrap: qui lo spazio fra le schede lo fa `gap`, e i margini negativi
   della `row` allargherebbero la riga oltre il contenitore. */
/* Sotto i 1024px le schede si incolonnano una sotto l'altra — `column` e non
   `wrap`: lasciandole andare a capo da sole, fra ~832 e 1023px di finestra due
   ci stanno affiancate, e li' il filo tratteggiato smette di dire quello che
   deve. Sale in verticale dal centro di una scheda che pero' ha una vicina di
   fianco, e sulla terza — prima di una riga nuova — pende nel vuoto. In colonna
   sola il filo collega sempre una scheda a quella immediatamente sopra. */
.process__row--fisse {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xl);
  margin: 0;
}
.process__row--fisse > .col-12 {
  width: 23rem;
  max-width: 100%;   /* dove 23rem non ci stanno, la scheda si adatta */
  padding: 0;
}
/* Il varco lo fa `gap`, non i gutter, e il filo tratteggiato deve misurare
   quello: senza questa riga resterebbe alto quanto `--bs-gutter-y`, che qui
   vale zero, cioe' sparirebbe. Posizione e tratteggio restano quelli della
   regola generale.
   Il doppio nome di classe alza il peso quel tanto che basta a battere le
   regole di `.process__row` che stanno piu' avanti nel foglio, senza doverle
   inseguire in fondo al file. */
.process__row--fisse.process__row > .col-12 + .col-12 > .process-card::before {
  /* I due pixel in piu' del varco sono voluti: il filo si infila sotto il bordo
     della scheda invece di fermarsi a sfiorarlo, cosi' non resta un capello di
     bianco dove l'arrotondamento a schermi non interi non torna. Non si vedono:
     cadono dietro il numero, che sta proprio li' a cavallo del bordo. */
  height: calc(var(--spacing-2xl) + 2px);
}

@media (min-width: 1024px) {
  /* Da qui i quattro passi tornano in fila e non vanno mai a capo. 23rem e' la
     misura a cui puntano, non una gabbia: se la finestra non basta si stringono
     tutte insieme, che e' sempre meglio che spezzare la sequenza a meta'.
     La misura piena la raggiungono da ~1712px in su — la larghezza a cui e'
     tarato `.container--largo`. */
  .process__row--fisse {
    flex-direction: row;
    flex-wrap: nowrap;
    /* Torna `stretch`: in colonna `center` serviva a centrare le schede in
       orizzontale, ma in riga vorrebbe dire centrarle in verticale, cioe'
       quattro schede di altezze diverse allineate a mezz'aria invece che pari
       fra loro. */
    align-items: stretch;
  }
  /* Doppio nome di classe anche qui: piu' avanti nel foglio `.process__row >
     .col-12` rimette la larghezza a un terzo, con lo stesso peso di questa
     regola e il vantaggio di venire dopo. Oggi non se ne accorgerebbe nessuno
     — `flex-basis` decide comunque la misura di un elemento flessibile, e
     `width` resta lettera morta — ma e' un pareggio che si rompe da solo alla
     prima modifica. */
  .process__row--fisse.process__row > .col-12 {
    flex: 1 1 23rem;
    width: auto;
    max-width: 23rem;
  }
  /* Il filo gira di 90 gradi: dal fianco sinistro della scheda corre
     all'indietro per tutto il varco, a mezza altezza. */
  .process__row--fisse.process__row > .col-12 + .col-12 > .process-card::before {
    bottom: auto;
    top: 50%;
    left: auto;
    right: 100%;
    width: calc(var(--spacing-2xl) + 2px);   /* stessa sovrapposizione, di fianco */
    height: 0;
    border-left: 0;
    border-top: 2px dashed var(--color-border);
  }
}

/* Contenitore piu' largo del solito, per la fascia che ospita i passi a misura
   fissa. Il numero non e' scelto a occhio: quattro schede da 23rem fanno
   1472px, i tre varchi da 3rem ne fanno 144, il respiro laterale del
   contenitore altri 96. Totale 1712. Sopra questa larghezza la fascia smette di
   allargarsi e le schede restano a 23rem piene. */
.container--largo { max-width: 1712px; }

/* Come per `.scope__item`: l'effetto vale dove il mouse esiste davvero, al
   tocco `:hover` resterebbe acceso sulla scheda toccata. La scheda non e' un
   link, quindi si accende ma non promette un clic. */
@media (hover: hover) {
  .process-card:hover {
    border-color: var(--color-navy);
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .process-card:hover { transform: none; }
}

/* ===== PARLANO DI NOI ===== */
/* NON PIU' IN USO da nessun template: la home, l'unica pagina che aveva la
   rassegna, e' passata ai marchi in fila senza cornice (`.press-band`, in fondo
   al foglio). Le regole restano perche' `home.html.bak-design` le usa ancora:
   chi tornasse indietro sul solo template ritroverebbe la sezione com'era.
   Da togliere quando quel backup non serve piu'. */
/* Stessa cornice delle `.service-card` — anche qui la scheda e' un link — ma
   dentro c'e' solo il marchio del giornale e la riga per aprire l'articolo.
   Il logo sta in una fascia di altezza fissa: i marchi hanno proporzioni
   diverse fra loro, e senza la fascia la riga sotto partirebbe ogni volta da
   un'altezza sua. */
.press__row {
  --bs-gutter-x: var(--spacing-lg);
  --bs-gutter-y: var(--spacing-lg);
}
.press-card {
  /* Colonna centrata: con il solo logo dentro, allineare a sinistra lascerebbe
     un vuoto a destra tanto piu' largo quanto e' stretto il marchio. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  transition: border-color var(--transition), transform var(--transition);
}
.press-card:hover {
  border-color: var(--color-navy);
  transform: translateY(-2px);
  opacity: 1;
}
.press-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Piu' alta di prima: il marchio e' rimasto l'unico contenuto della scheda,
     e a 2.75rem si perdeva nella cornice. */
  height: 3.5rem;
}
/* `max-height` e non `height`: il logo si iscrive nella fascia mantenendo le
   sue proporzioni, che sia una testata larga o un marchio quadrato.
   In grigio perche' la fila resti una griglia sola e non un campionario di
   colori altrui; il colore torna sulla scheda puntata. */
.press-card__logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--transition), opacity var(--transition);
}
.press-card:hover .press-card__logo img {
  filter: none;
  opacity: 1;
}
/* Ripiego quando il file del logo manca: il nome della testata scritto, dentro
   la stessa fascia. */
.press-card__wordmark {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}
.press-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy);
}
.press-card__arrow { transition: transform var(--transition); }
.press-card:hover .press-card__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .press-card:hover { transform: none; }
  .press-card:hover .press-card__arrow { transform: none; }
}

/* ===== AMBITI DI APPLICAZIONE ===== */
/* Voci senza bordo perimetrale: sulla home ci sono gia' le `.service-card`
   riquadrate e una seconda griglia di schede appesantirebbe la pagina. Qui
   basta un filetto superiore a separare le voci. */
.scope__row {
  --bs-gutter-x: var(--spacing-xl);
  --bs-gutter-y: var(--spacing-xl);
}
.scope__item {
  border-top: 2px solid var(--color-navy);
  padding-top: var(--spacing-md);
  position: relative;   /* ancora il filetto che si ispessisce al passaggio */
  transition: transform var(--transition);
}
/* Il filetto piu' spesso si ottiene sovrapponendo questa riga al bordo, non
   ingrossando il bordo stesso: cambiare `border-width` sposterebbe il testo di
   qualche pixel a ogni passaggio del mouse. Cresce verso il basso, dove c'e'
   solo il vuoto del padding. */
.scope__item::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-navy);
  transform-origin: top;
  transition: transform var(--transition);
}
.scope__quote {
  font-style: italic;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}
.scope__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}
.scope__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  transition: color var(--transition);
}
/* Solo dove il passaggio del mouse esiste davvero: al tocco `:hover` resta
   incollato alla voce toccata finche' non se ne tocca un'altra.
   La voce non e' un link — niente ombre ne' cursori che promettano un clic:
   si alza, il filetto si ingrossa e il testo si scurisce, come fanno le
   `.service-card` qui sopra. */
@media (hover: hover) {
  .scope__item:hover { transform: translateY(-3px); }
  .scope__item:hover::before { transform: scaleY(3); }
  .scope__item:hover .scope__text { color: var(--color-text); }
}
@media (prefers-reduced-motion: reduce) {
  .scope__item:hover { transform: none; }
}

/* ===== SPLIT SECTIONS ===== */
/* Come `.stats`: bordo e spaziatura sul blocco, `row` all'interno. */
.split {
  padding: var(--spacing-3xl) 0;
  border-bottom: 1px solid var(--color-border-light);
}
.split__row {
  --bs-gutter-x: var(--spacing-2xl);
  --bs-gutter-y: var(--spacing-2xl);
}
.split__text { max-width: 520px; }
.split__eyebrow {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}
.split__title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  margin-bottom: var(--spacing-md);
}
.split__desc {
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--spacing-lg);
}
.split__list { margin-top: var(--spacing-md); }
.split__list li {
  position: relative;
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.8;
}
.split__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: var(--color-navy);
  border-radius: 50%;
}
.split__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.split__visual img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* ===== ARTICLE / SERVICE DETAIL ===== */
.article { max-width: 800px; margin: 0 auto; }
.article__lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--spacing-xl);
}
.article__body p {
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
}
.article__body strong { color: var(--color-text); font-weight: 600; }
.article__body a { color: var(--color-navy); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.article__body a:hover { opacity: 0.7; }
.article__body h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
}

/* Article info cards (for the detail page sections) */
/* La larghezza massima resta sul contenitore: sulla `row` i margini negativi la
   sforerebbero di mezzo gutter per lato, allargando le schede. */
.info-cards {
  max-width: 900px;
  margin: 0 auto;
}
.info-cards__row {
  --bs-gutter-x: var(--spacing-lg);
  --bs-gutter-y: var(--spacing-lg);
}
.info-card {
  padding: var(--spacing-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  /* La transizione sta sulla scheda e non sulla colonna che la contiene: e'
     lei ad avere il bordo, ed e' lei che si muove. */
  transition: border-color var(--transition), transform var(--transition);
}

/* Stesso effetto delle schede di «Come funziona» (`.process-card`): bordo che
   si scurisce e due pixel di sollevamento. Le due griglie stanno sulla stessa
   pagina, e due schede riquadrate che rispondono in modo diverso al mouse si
   notano subito.

   Il bersaglio del `:hover` e' la **colonna** e non la scheda: `.info-card`
   riempie la colonna con `w-100` ma e' la colonna a occupare tutta l'altezza
   della riga, quindi passando fra due schede l'effetto si accende e si spegne
   dove ci si aspetta.

   Sotto `@media (hover: hover)` come l'altro: al tocco `:hover` resterebbe
   acceso sulla scheda toccata. La scheda non e' un link, quindi si accende ma
   non promette un clic. */
@media (hover: hover) {
  .info-cards__row > div:hover .info-card {
    border-color: var(--color-navy);
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .info-cards__row > div:hover .info-card { transform: none; }
}
/* Stessa resa dell'icona delle schede numerate (`process-card__icon`): stessa
   misura, stesso colore, stesso stacco dal titolo. Due schede diverse con la
   stessa icona di dimensioni diverse si notano subito, anche senza saper dire
   perche'. */
.info-card__icon {
  display: block;
  margin-bottom: var(--spacing-md);
  color: var(--color-navy);
}
.info-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}
.info-card__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}
.info-card__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.8;
}
.info-card__text a {
  color: var(--color-navy);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Variante larga e bassa ---
   La griglia si prende tutta la riga invece di fermarsi a 900px: restano due
   schede per riga, ma ognuna passa da ~440 a ~540px. E' li' che si guadagna in
   altezza — piu' larga la scheda, meno righe fa lo stesso testo — e le fasce di
   rispetto si stringono a completare il conto: meno respiro sopra e sotto,
   niente stacco sotto l'icona (che qui sta in riga con il titolo, quindi il suo
   margine inferiore alzava la riga senza servire a nulla) e meno aria fra il
   titolo e il testo. E' un modificatore e non un ritocco a `.info-card`: la
   scheda base la usano anche `/grazie` e le pagine dei servizi, dove la colonna
   stretta e' voluta. */
.info-cards--larghe { max-width: none; }
.info-cards--larghe .info-card { padding: var(--spacing-lg) var(--spacing-xl); }
.info-cards--larghe .info-card__icon { margin-bottom: 0; }
.info-cards--larghe .info-card__title { margin-bottom: var(--spacing-sm); }

/* ===== FAQ ===== */
.faq-list { max-width: 720px; margin: 0 auto; }
/* Sulla pagina dedicata l'elenco parte da sinistra come il titolo e le
   briciole: centrato sotto un'intestazione allineata a sinistra resterebbe
   fuori asse rispetto a tutto il resto della pagina. Dove le FAQ chiudono una
   sezione con intestazione centrata — la pagina del tool — resta centrato. */
.faq-list--sinistra { margin-left: 0; margin-right: 0; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-lg) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  line-height: 1.4;
}
.faq-toggle__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  transition: transform var(--transition);
  margin-left: var(--spacing-md);
}
.faq-item--open .faq-toggle__icon { transform: rotate(45deg); }
.faq-answer {
  display: none;
  padding-bottom: var(--spacing-lg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.8;
}
.faq-item--open .faq-answer { display: block; }

/* ===== CONTACT FORM ===== */
.form { max-width: 560px; }
.form--center { margin: 0 auto; }
.form__row {
  --bs-gutter-x: var(--spacing-lg);
  --bs-gutter-y: var(--spacing-lg);
}
.form__group { margin-bottom: var(--spacing-lg); }
.form__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}
.form__input,
.form__textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: var(--font-size-base);
  font-family: inherit;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: border-color var(--transition);
}
.form__input:focus,
.form__textarea:focus { outline: none; border-color: var(--color-navy); }
.form__textarea { resize: vertical; min-height: 140px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}
.form__check input[type="checkbox"] {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  accent-color: var(--color-navy);
}
.form__check label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* --- Campi obbligatori e segnalazione degli errori --- */
/* Rosso scuro e non acceso: sul bianco arriva a 6.4 contro 1, mentre un rosso
   pieno resta sotto la soglia leggibile. */
.form__obbligatorio { color: #b91c1c; }
.form__nota {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
}
.form__input--errore,
.form__textarea--errore { border-color: #dc2626; }
/* Il bordo resta rosso anche col cursore dentro: la regola del focus arriva
   prima nel foglio, senza questa lo scavalcherebbe e l'errore sparirebbe
   proprio mentre lo si sta correggendo. */
.form__input--errore:focus,
.form__textarea--errore:focus { border-color: #dc2626; }
.form__check--errore input[type="checkbox"] {
  outline: 2px solid #dc2626;
  outline-offset: -2px;
}
/* Il messaggio sotto il campo. Vuoto non occupa spazio, quindi il modulo non
   si allunga finche' non c'e' un errore da dire.
   Non e' un di piu' rispetto al bordo rosso: il colore da solo non è un
   messaggio: chi non distingue il rosso vedrebbe un modulo che rifiuta l'invio
   senza dire perche'. */
.form__errore {
  font-size: var(--font-size-sm);
  color: #b91c1c;
  line-height: 1.5;
}
.form__errore:not(:empty) { margin-top: var(--spacing-sm); }

/* --- Acquisizione a piu' pagine: elenco degli indirizzi e listino --- */
/* `fieldset` senza cornice: raggruppa i campi per chi usa uno screen reader,
   ma non deve disegnare un riquadro dentro un modulo che non ne ha altri. */
.pagine {
  border: 0;
  margin: 0 0 var(--spacing-lg);
  padding: 0;
}
.pagine__voce { margin-bottom: var(--spacing-lg); }
/* La mette `acquisizione-pagine.js`: senza JavaScript i campi restano tutti
   visibili e il modulo funziona lo stesso. */
.pagine__voce--nascosta { display: none; }
.pagine__aggiungi {
  padding: 0.5rem 1.25rem;
  font-size: var(--font-size-sm);
}

.listino {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-size-sm);
}
.listino th,
.listino td {
  text-align: left;
  padding: 0.4rem 0.5rem 0.4rem 0;
  font-weight: 400;
  /* Cifre a larghezza fissa: gli importi restano incolonnati fra le righe. */
  font-variant-numeric: tabular-nums;
}
.listino th { font-weight: 600; white-space: nowrap; }
/* La quantita' corrispondente a quanti indirizzi si sono scritti. Non e' solo
   grassetto: il colore da solo non basterebbe a chi non lo distingue, e il
   filetto a sinistra dice quale riga vale anche in bianco e nero. */
.listino__riga--scelta th,
.listino__riga--scelta td {
  font-weight: 700;
  color: var(--color-navy);
}
.listino__riga--scelta th {
  box-shadow: inset 3px 0 0 0 var(--color-navy);
  padding-left: 0.5rem;
}

/* ===== TEAM ===== */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}
.team-card { text-align: center; }
.team-card__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--spacing-md);
}
.team-card__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 auto var(--spacing-md);
}
.team-card__name { font-size: var(--font-size-lg); font-weight: 700; }
.team-card__role { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin-top: var(--spacing-xs); }
.team-card__bio { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin-top: var(--spacing-sm); line-height: 1.7; max-width: 300px; margin-left: auto; margin-right: auto; }

/* ===== LA NOSTRA STORIA ===== */
/* Tappe incolonnate lungo un filo verticale. Il filo e' un bordo della singola
   tappa, non un elemento a se': cosi' parte e finisce dove finisce il testo,
   qualunque sia la sua lunghezza, senza misure da tenere allineate a mano. */
.storia {
  /* Da qui dipendono sia il pallino sia la rientranza del testo. */
  --storia-pallino: 0.75rem;
  max-width: 760px;
  margin: 0 auto;
}
.storia__voce {
  position: relative;
  padding-left: var(--spacing-xl);
  padding-bottom: var(--spacing-2xl);
}
/* L'ultima tappa non ha nulla sotto: il filo si fermerebbe nel vuoto. */
.storia__voce:last-child { padding-bottom: 0; }
.storia__voce:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--storia-pallino) / 2 - 1px);
  top: var(--storia-pallino);
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.storia__voce::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: var(--storia-pallino);
  height: var(--storia-pallino);
  border-radius: 50%;
  background: var(--color-navy);
}
.storia__anno {
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  /* Cifre a larghezza fissa: gli anni restano incolonnati fra una tappa e l'altra. */
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--spacing-xs);
}
.storia__titolo {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}
.storia__testo {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.8;
}

/* ===== CTA BANNER ===== */
.cta-banner {
  padding: var(--spacing-5xl) 0;
  text-align: center;
  background: var(--color-bg-soft);
}
.cta-banner__title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  margin-bottom: var(--spacing-md);
}
.cta-banner__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xl);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* ===== BREADCRUMB ===== */
.breadcrumb {
  padding: var(--spacing-md) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-navy); opacity: 1; }
.breadcrumb__sep { margin: 0 var(--spacing-sm); }

/* ===== PAGE HERO ===== */
.page-hero { padding: var(--spacing-3xl) 0 var(--spacing-2xl); }
/* Variante a tutta viewport con la foto dietro, come l'hero della home.
   `overflow: hidden` serve perche' la foto e' ritagliata da `object-fit`: senza,
   deborda dalla sezione. */
.page-hero--foto {
  /* Un'unica misura da cui dipende tutta la fascia: si ritocca qui.
     Non e' piu' l'intera viewport come nella home: li' l'hero *e'* la pagina e
     deve riempirla, qui e' l'apertura di una pagina che continua, e presa tutta
     l'altezza obbliga a scorrere prima di sapere di cosa si parla. Lasciandone
     scoperta una parte, il taglio della sezione successiva si intravede e
     invita a proseguire.
     Numero puro e non `70vh`: l'unita' si compone qui sotto, e in `calc()` non
     si puo' dividere una lunghezza per un'altra. */
  --page-hero-altezza: 70;
  position: relative;
  overflow: hidden;
  min-height: calc(var(--page-hero-altezza) * 1vh);
  /* `svh` = viewport "piccola", con le barre del browser mobile visibili: senza
     questa riga su telefono l'ultima riga di testo finisce sotto la barra degli
     indirizzi. Chi non la supporta resta sulla riga precedente. */
  min-height: calc(var(--page-hero-altezza) * 1svh);
  display: flex;
  align-items: center;
}
/* Il contenuto sopra la foto: senza `position`, `z-index` non fa nulla. */
.page-hero--foto > .container { position: relative; z-index: 1; }
/* La foto resta un `<img>` e non una `background-image`, per la stessa ragione
   dell'hero della home: cosi' conserva l'`alt`, il caricamento immediato e la
   query di cache-busting che aggiunge `url_for`. */
.page-hero__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Velatura chiara: il testo del sito e' navy e la foto ha zone piene di luce
   accanto a zone in ombra. Resta verticale a ogni larghezza — a differenza
   dell'hero della home, dove il testo occupa la meta' sinistra e la velatura
   puo' concentrarsi li'. Qui il titolo attraversa quasi tutta la riga, quindi
   scoprire il lato destro lo lascerebbe senza contrasto. */
.page-hero__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.84) 100%);
}
/* Occhiello e sottotitolo di un gradino piu' scuri solo su questa variante. Sul
   bianco della pagina il grigio di sempre basta; sulla foto scende a 3.6 contro
   1, sotto il minimo leggibile. Alzare ancora la velatura non risolve — provato:
   nemmeno al 95% quel grigio arriva a 4.5 — e sbiadirebbe la foto. Questa tinta
   la lascia intatta e porta il contrasto a 5.7. Il titolo, gia' navy, sta a 13.7
   e non ha bisogno di nulla. */
/* Il selettore era rotto: un commento incollato in mezzo alla virgola aveva
   fuso questa regola con quella del link del listino, cosi' l'occhiello sulla
   foto usciva navy e **sottolineato**, e il sottotitolo perdeva del tutto la
   correzione di contrasto. Le due regole tornano separate.
   La tinta e' l'equivalente caldo di #475569 nella scala `abe` (vedi in fondo
   al foglio): stessa luminanza, stesso contrasto sulla foto. */
.page-hero--foto .page-hero__eyebrow,
.page-hero--foto .page-hero__subtitle { color: #4d4a40; }

/* Il prezzo sotto i pulsanti dell'hero: piu' piccolo del sottotitolo e in
   colore attenuato — e' un dettaglio che serve a decidere, non un'affermazione
   della pagina. */
/* «clicca qui» dentro la riga del prezzo. Sottolineato perche' in mezzo a una
   frase il solo colore non basta a dire che si puo' premere, e non tutti lo
   distinguono. */
.page-hero__listino-link {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.page-hero__listino-link:hover { color: var(--color-text); }

.page-hero__prezzo {
  margin-top: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.page-hero__eyebrow {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-md);
}
.page-hero__title {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  margin-bottom: var(--spacing-md);
}
.page-hero__subtitle {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  max-width: 560px;
  line-height: 1.7;
}
.page-hero__image {
  margin-top: var(--spacing-2xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.page-hero__image img {
  width: 100%;
  border-radius: var(--radius-lg);
}
/* Hero delle pagine di dettaglio servizio: fascia alta almeno mezza viewport.
   Serve `object-fit`: senza, un'immagine piu' bassa di 50vh verrebbe stirata
   invece di essere ritagliata, perche' la larghezza resta al 100% del
   contenitore. Deve stare dopo la regola sopra: stessa specificita', vince
   l'ordine. */
.page-hero__image--service img {
  min-height: 50vh;
  object-fit: cover;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--color-navy);
  color: rgba(255,255,255,0.6);
  padding: var(--spacing-3xl) 0 var(--spacing-xl);
}
/* Resta una griglia CSS, non una `row`: le colonne sono `2fr 1fr 1fr 1fr` e con
   proporzioni disuguali i due modelli non coincidono. La griglia toglie i vuoti
   prima di ripartire lo spazio, Bootstrap li mette come padding dentro colonne
   larghe una percentuale fissa: la prima colonna verrebbe ~19px piu' larga, e la
   percentuale che pareggia il conto dipende dalla larghezza della finestra. */
.footer__inner {
  display: grid;
  /* Da telefono: la presentazione (prima colonna) prende tutta la riga, poi
     «Tool forensi» e «Informazioni» stanno affiancate sulla stessa riga. */
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
}
.footer__inner > :first-child { grid-column: 1 / -1; }
.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--spacing-md);
}
.footer__brand img { height: 36px; width: auto; filter: brightness(0) invert(1); }
.footer__desc { font-size: var(--font-size-sm); line-height: 1.7; }
.footer__heading {
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}
.footer__link {
  display: block;
  color: rgba(255,255,255,0.5);
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) 0;
  transition: color var(--transition);
}
.footer__link:hover { color: #fff; opacity: 1; }
.footer__bottom {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: var(--font-size-sm);
  text-align: center;
}
.footer__bottom a { color: rgba(255,255,255,0.5); }
.footer__bottom a:hover { color: #fff; opacity: 1; }

/* Finche' il piede sta su una colonna sola, i blocchi vanno al centro: allineati
   a sinistra lasciano a destra un vuoto che sembra un difetto di impaginazione.
   La soglia e' la stessa a cui il piede torna a quattro colonne — da li' in su
   il centrato non avrebbe senso, le colonne si allineano fra loro.
   `text-align` basta per testo e link (che sono `block`); il logo e' un
   contenitore flex e vuole `justify-content`. */
@media (max-width: 1023.98px) {
  .footer__inner { text-align: center; }
  .footer__brand { justify-content: center; }
}

/* ===== FLOATING BUTTONS (il «?» in basso a destra) ===== */
.floating-btns {
  position: fixed;
  bottom: var(--spacing-lg);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.floating-btns--right { right: var(--spacing-lg); }
.floating-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform var(--transition), box-shadow var(--transition);
}
.floating-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  opacity: 1;
  color: #fff;
}
/* NON PIU' IN USO da nessun template: il tondo di destra e' passato al punto
   interrogativo (`.floating-btn--aiuto`, in fondo al foglio). La regola resta
   perche' `base.html.bak-fab` la usa ancora — chi tornasse indietro sul solo
   template ritroverebbe il telefono al suo posto. Da togliere quando quel
   backup non serve piu'. Il numero cliccabile in testata non passa di qui:
   quello e' `.nav__phone`. */
.floating-btn--phone { background: var(--color-navy); }
.floating-btn svg { width: 24px; height: 24px; }

/* ===== RESPONSIVE: Tablet (>=640px) ===== */
@media (min-width: 640px) {
  /* Da due colonne (`col-6`) a quattro: la soglia e' quella del sito, 640px,
     non una di Bootstrap. */
  .stats__row > .col-6 { width: 25%; }
  .hero__title { font-size: var(--font-size-4xl); }
  .section__title { font-size: var(--font-size-3xl); }
  .split__title { font-size: var(--font-size-3xl); }
  .service-cards > .col-12 { width: 50%; }
  .press__row > .col-12 { width: 50%; }
  .info-cards__row > .col-12 { width: 50%; }
  .scope__row > .col-12 { width: 50%; }
  /* I tre passi di «Come agiamo» restano incolonnati fino a 1024px: a 2+1 la
     sequenza si spezzerebbe. Vedi il blocco desktop piu' sotto. */
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero__title { font-size: var(--font-size-4xl); }
  .form__row > .col-12 { width: 50%; }
}

/* ===== RESPONSIVE: Desktop (>=1024px) ===== */
@media (min-width: 1024px) {
  .container { padding: 0 var(--spacing-2xl); }
  .nav-toggle { display: none; }
  .nav {
    display: flex;
    align-items: center;
    position: static;
    background: transparent;
    border: none;
  }
  .nav__list { display: flex; align-items: center; gap: var(--spacing-sm); padding: 0; }
  .nav__link { padding: var(--spacing-sm) var(--spacing-md); }
  .nav__phone { padding: 0 var(--spacing-md); }
  /* Menu e azioni si spingono insieme a destra: `margin-left: auto` sul menu,
     le azioni subito dopo. */
  .nav { margin-left: auto; }
  .header__azioni { margin-left: var(--spacing-sm); }
  .nav__cta {
    width: auto;
    height: auto;
    margin: 0 0 0 var(--spacing-sm);
    padding: 0.5rem 1.25rem;
    background: var(--color-navy);
    color: #fff;
  }
  .nav__cta:hover { background: var(--color-navy-light); color: #fff; }
  .nav__cta-icona { display: none; }
  .nav__cta-testo { display: inline; }
  .scope__row > .col-12 { width: 33.3333%; }
  /* Quattro testate per riga: sono schede corte, a due per riga la fascia dei
     loghi si allungherebbe per mezza pagina. Con un numero di voci diverso da
     quattro l'ultima riga resta semplicemente piu' corta. */
  .press__row > .col-12 { width: 25%; }
  /* I tre passi affiancati: in colonna singola o a 2+1 non si leggerebbero
     come una sequenza. Il varco fra le schede si allarga, altrimenti al
     tratteggio restano una manciata di pixel e non si legge. */
  .process__row { --bs-gutter-x: var(--spacing-2xl); }
  .process__row > .col-12 { width: 33.3333%; }
  /* Variante a quattro passi: a tre per riga ne resterebbe uno spaiato sotto,
     e il filo tratteggiato si interromperebbe a meta' sequenza. Deve stare dopo
     la riga sopra — stesso peso, vince chi viene per ultimo. */
  .process__row--quattro > .col-12 { width: 25%; }
  /* Ora le schede sono affiancate e il varco e' quello orizzontale: il filo
     gira di 90 gradi e lo attraversa a mezza altezza delle schede.
     `right: 100%` lo appoggia al fianco sinistro della scheda e lo fa correre
     all'indietro per tutta l'ampiezza del varco, fino alla scheda precedente. */
  .process__row > .col-12 + .col-12 > .process-card::before {
    bottom: auto;
    top: 50%;
    left: auto;
    right: 100%;
    width: var(--bs-gutter-x);
    height: 0;
    border-left: 0;
    border-top: 2px dashed var(--color-border);
  }
  .hero { padding: var(--spacing-5xl) 0; }
  .hero__grid { --bs-gutter-x: var(--spacing-4xl); --bs-gutter-y: var(--spacing-4xl); }
  .hero__grid > .col-12 { width: 50%; }
  /* Da qui il testo occupa la meta' sinistra: la velatura si concentra li' e
     lascia scoperta la parte destra della foto. */
  .hero__image::after {
    background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.88) 42%, rgba(255,255,255,0.30) 100%);
  }
  .hero__title { font-size: var(--font-size-5xl); }
  .split__row { --bs-gutter-x: var(--spacing-4xl); --bs-gutter-y: var(--spacing-4xl); }
  .split__row > .col-12 { width: 50%; }
  /* L'inversione va sulla colonna, non sull'immagine: `order` conta fra fratelli
     dello stesso contenitore flex, e ora il fratello e' la colonna. */
  .split--reverse .split__col--visual { order: -1; }
  .footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer__inner > :first-child { grid-column: auto; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  /* Quattro persone: a tre per riga ne resterebbe una spaiata sotto. Deve stare
     dopo la riga qui sopra — stesso peso, vince chi viene per ultimo. */
  .team-grid--quattro { grid-template-columns: repeat(4, 1fr); }
  .info-cards__row > .col-12 { width: 50%; }
  .cta-banner__title { font-size: var(--font-size-3xl); }
}

/* ===== PRINT ===== */
@media print {
  .header, .footer, .nav-toggle, .cta-banner, .floating-btns { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
}

/* ==========================================================================
   Estensioni Flask — alert dei messaggi flash, campo di servizio, testo legale
   (aggiunte a valle del CSS originale: nessuna regola preesistente modificata)
   ========================================================================== */
.alert {
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  color: var(--color-text);
}
.alert--error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.alert--success { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.alert--info { border-color: var(--color-border); background: var(--color-bg-soft); }

.form__campo-sec { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.prose { max-width: 760px; }
.prose h2 {
  font-size: var(--font-size-xl);
  margin: var(--spacing-2xl) 0 var(--spacing-md);
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--color-text-secondary); line-height: 1.8; margin-bottom: var(--spacing-md); }
.prose strong { color: var(--color-text); font-weight: 600; }
.prose ul { margin: 0 0 var(--spacing-md); }
.prose li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-navy);
}
.prose a { text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Compatibilita' con Bootstrap Reboot
   Bootstrap e' caricato PRIMA di questo file e le sue regole di reset agiscono
   a livello di elemento, quindi battono per specificita' il `* { margin: 0 }`
   in testa a questo foglio. Qui ripristiniamo gli azzeramenti su cui si basa
   il layout del sito, senza toccare le regole delle singole componenti.
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure, blockquote, address { margin: 0; }
ul, ol { padding-left: 0; }

/* Tool non ancora offerto: il pulsante resta nel layout ma non e' cliccabile.
   Stessa forma degli altri per non spostare nulla, tinta smorzata perche' non
   sia scambiato per un'azione disponibile. */
.btn--in-arrivo {
  background: var(--color-border);
  color: var(--color-text-secondary);
  cursor: default;
}
.btn--in-arrivo:hover { background: var(--color-border); opacity: 1; }

/* ==========================================================================
   Sipario di apertura — il logo mentre la pagina finisce di caricare
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;   /* sopra header (100) e pulsanti flottanti */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  background: var(--color-bg);
  /* Fermo di sicurezza: se preloader.js non parte — JavaScript disattivato, file
     non arrivato — il sipario si alza da solo e non lascia il sito dietro a un
     velo. Con il JS attivo non si arriva mai a scadenza: chiude prima lui. */
  animation: preloader-uscita 420ms ease 3s forwards;
}
/* Alzato da preloader.js appena la pagina e' pronta: stessa dissolvenza, senza
   attesa. La regola viene dopo, quindi sostituisce l'animazione di sicurezza. */
.preloader--via { animation: preloader-uscita 420ms ease forwards; }
/* Pagine successive della stessa sessione: il sipario non si vede affatto. */
.senza-sipario .preloader { display: none; }

.preloader__logo {
  width: min(200px, 55vw);
  height: auto;
  animation: preloader-logo 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Sotto al logo, la bilancia della giustizia che oscilla: dice che si sta
   caricando senza scritte. Asta e piatti ruotano in senso opposto, cosi' i
   piatti restano paralleli al suolo come in una bilancia vera. Le origini
   sono nelle coordinate del viewBox (transform-box: view-box). */
.preloader__bilancia {
  width: min(170px, 46vw);
  height: auto;
  color: var(--color-navy);
  overflow: visible;
  animation: preloader-logo 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.preloader__asta,
.preloader__piatto {
  transform-box: view-box;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.preloader__asta {
  transform-origin: 200px 100px;   /* il fulcro */
  animation-name: preloader-oscilla;
}
.preloader__piatto { animation-name: preloader-controscilla; }
.preloader__piatto--sx { transform-origin: 100px 100px; }
.preloader__piatto--dx { transform-origin: 300px 100px; }

@keyframes preloader-logo {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
/* Pende a destra, torna, pende a sinistra, torna: 15 gradi al massimo. */
@keyframes preloader-oscilla {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(15deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}
@keyframes preloader-controscilla {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-15deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(15deg); }
  100% { transform: rotate(0deg); }
}
@keyframes preloader-uscita {
  to { opacity: 0; visibility: hidden; }
}

/* Chi ha chiesto meno animazioni vede il logo fermo: il velo resta, serve a
   coprire la pagina mentre si compone, ma niente entrata ne' bilancia che oscilla. */
@media (prefers-reduced-motion: reduce) {
  .preloader__logo { animation: none; }
  .preloader__bilancia,
  .preloader__asta,
  .preloader__piatto { animation: none; }
}

@media print { .preloader { display: none; } }

/* La scheda dell'esito: una colonna stretta e centrata. Larga tutto lo schermo
   una scheda con dentro quattro righe sembrerebbe una pagina vuota, e il
   pièdipagina — che e' l'unica cosa che chiede qualcosa — finirebbe lontano da
   ciò che si e' appena letto. I colori restano quelli del sito: Bootstrap qui
   porta la struttura della `card`, non la palette. */
.scheda {
  max-width: 34rem;
  margin-inline: auto;
  border-color: var(--color-border);
  border-radius: 10px;
}

.scheda .card-title { margin-bottom: var(--spacing-md); }
/* Ombra delle schede di pagamento ed esito. */
.scheda--ombra { box-shadow: 3px 4px 5px #0000003d; }

/* Attesa del pagamento: la bilancia del sipario, piu' piccola, sopra al titolo.
   L'oscillazione e' quella del preloader (preloader__asta/__piatto), che con
   prefers-reduced-motion resta ferma. */
.esito-attesa {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}
.esito-attesa__bilancia {
  width: 110px;
  height: auto;
  color: var(--color-navy);
  overflow: visible;
}
.scheda .card-body { padding: var(--spacing-xl); }
.scheda dt { color: var(--color-text); }
.scheda dd { color: var(--color-text-secondary); }

.pagamento__prezzo {
  font-size: 1.35rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
}

.scheda__footer {
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
}

/* La schermata di pagamento sta stretta: l'intestazione dice una riga sola e
   il contenuto e' un prezzo e due pulsanti, quindi i 4xl di stacco della
   sezione — pensati per pagine che continuano a lungo — lascerebbero mezzo
   schermo vuoto fra il titolo e cio' che si deve premere. Le classi sono
   modificatori e non ritocchi a `.section` / `.prose`: quelle due le usa tutto
   il sito, e cambiarle sposterebbe ogni pagina per aggiustare questa. */
.page-hero--stretto { padding-bottom: var(--spacing-lg); }
.section--pagamento { padding-top: 0; }

/* ==========================================================================
   Pagamento — pulsanti ufficiali dei gestori
   ==========================================================================
   Marchi e colori sono quelli imposti dalle linee guida di PayPal e Stripe, non
   scelte nostre: il pulsante di PayPal deve essere oro #FFC439 con il suo
   wordmark, e il logo non va ridisegnato ne' ricolorato. Per questo qui non si
   usano i token del sito — e per questo gli asset stanno in
   `static/img/pagamenti/` invece che su CDN, che la CSP bloccherebbe.

   L'altezza e' identica per tutti i pulsanti (48px): tre metodi con tre altezze
   diverse sembrerebbero tre livelli di affidabilita' diversi. */

.pagamento__metodi {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 1rem);
  margin: var(--spacing-lg, 1.5rem) 0;
}

.pagamento__scelta { margin: 0; }

.pagamento__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: 24px;          /* la pillola e' la forma del pulsante PayPal */
  font: inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease;
}

.pagamento__btn:hover { filter: brightness(0.94); }

.pagamento__btn:focus-visible {
  outline: 2px solid var(--color-primary, #0b5cff);
  outline-offset: 2px;
}

/* PayPal: oro ufficiale, wordmark nero. Nessun testo accanto al logo — le linee
   guida vogliono il marchio da solo. */
.pagamento__btn--paypal { background: #FFC439; }
.pagamento__btn--paypal img { display: block; height: 24px; width: auto; }

/* Carta: Stripe non ha un pulsante di marca e le sue linee guida sconsigliano
   «Paga con Stripe» — il gestore si dichiara sotto, non sul pulsante. Qui va
   detto cosa si sta per usare, cioe' una carta.

   Il blu e' quello di Stripe (#635BFF): non e' un marchio applicato a sproposito
   — sul pulsante non compare ne' il nome ne' il logo — ma il colore del gestore
   che si dichiara due righe sotto, cosi' il pulsante e la dicitura si leggono
   come una cosa sola invece che come due. */
.pagamento__btn--carta {
  background: #635BFF;
  color: #fff;
}

.pagamento__btn--carta:hover { background: #5147e0; filter: none; }

/* `flex: none` o il glifo si schiaccia quando l'etichetta va a capo su schermi
   stretti; l'allineamento ottico vuole mezzo pixel in su rispetto al testo. */
.pagamento__carta {
  flex: none;
  position: relative;
  top: -1px;
}

.pagamento__btn--bonifico {
  background: transparent;
  color: var(--color-text, #111);
  border-color: var(--color-border, #d5d8de);
}

.pagamento__nota {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-text-secondary, #5b6270);
  text-align: center;
}

.pagamento__gestore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary, #5b6270);
}

.pagamento__gestore img { display: block; border-radius: 3px; }

@media (min-width: 640px) {
  /* Su schermo largo i pulsanti non devono diventare bandiere: restano della
     larghezza di un pulsante, centrati. */
  .pagamento__metodi { max-width: 26rem; margin-inline: auto; }
  .pagamento__gestore { max-width: 26rem; margin-inline: auto; }
}

/* ==========================================================================
   Tipografia editoriale — lo stile dei testi di «Chi siamo 2» esteso al sito
   ==========================================================================
   `about-editorial.css` disegna la voce tipografica del sito: nero caldo al
   posto del navy freddo, display in maiuscolo stretto, occhielli spaziati,
   corpo del testo largo di interlinea. Li' e' tutto sotto il prefisso `.abe-`
   perche' viveva su una pagina sola. Qui le stesse **misure di testo** vengono
   portate sulle classi che le altre pagine gia' usano: nessun template cambia,
   e le pagine restano quelle che sono — cambia come parlano.

   Il blocco sta in fondo apposta: a parita' di peso vince l'ultima regola,
   quindi scavalca anche le misure dentro i `@media` piu' sopra senza doverle
   riscrivere una per una.

   Cosa **non** tocca, di proposito:
   - `.abe-*` — la pagina d'origine ha il suo foglio, caricato dopo questo;
   - testata, piede e pulsanti: `about-editorial.css` aveva gia' scelto di
     lasciarli stare (`.abe-cta .nav__cta` e' scoped apposta), e la cornice del
     sito non e' testo di pagina;
   - `tools/verbale*.html` e `relazione_chat.html`: documenti da stampare, con
     lo stile dentro il file, che questo foglio non raggiunge.
   ========================================================================== */

:root {
  /* Stessa pila di `about-editorial.css`. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* La scala dei grigi passa da fredda (slate) a calda: sono gli stessi tre
     valori di `.abe` — inchiostro, attenuato, corpo del testo. Il navy resta
     dov'era: e' il colore degli sfondi pieni (piede, pulsanti, pallini), non
     del testo. */
  --color-text: #14140f;             /* era #0f172a — `--abe-ink` */
  --color-text-secondary: #6a675e;   /* era #64748b — `--abe-muted` */
  --color-text-muted: #8d897e;       /* era #94a3b8 — l'attenuato piu' chiaro */
  --color-text-body: #3a382f;        /* nuovo — `--abe-story-text` */

  /* Misure fluide dei display, riprese una a una da `about-editorial.css`. */
  --display-hero: clamp(2.4rem, 6vw, 5rem);      /* `.abe-hero__title` */
  --display-page: clamp(2rem, 5vw, 3.8rem);      /* fra hero e sezione */
  --display-sezione: clamp(1.7rem, 3.6vw, 2.9rem); /* `.abe-story__title` */
}

/* ---- Display: maiuscolo stretto ----
   Titoli di apertura e di sezione. Le schede restano fuori: anche in `.abe` il
   nome nella scheda del team e' minuscolo e di peso normale — il maiuscolo e'
   il registro dei titoli, non di ogni intestazione. */
h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.06; }

.hero__title,
.page-hero__title,
.section__title,
.split__title,
.cta-banner__title,
.cta-box__title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.018em;
  line-height: 1.04;
  /* Righe di lunghezza pari invece dell'ultima parola orfana: su un titolo in
     maiuscolo di tre parole la differenza si vede tutta. */
  text-wrap: balance;
}
.hero__title { font-size: var(--display-hero); line-height: 0.98; letter-spacing: -0.02em; }
.page-hero__title { font-size: var(--display-page); }
.section__title,
.split__title,
.cta-banner__title,
.cta-box__title { font-size: var(--display-sezione); }

/* ---- Occhielli: minuscoli, molto spaziati ----
   `.abe` li tiene a 0.75rem con 0.28em di spaziatura e peso normale: e' quella
   spaziatura a fare la riga, non il grassetto. Il peso del sito (600) a quella
   distanza fra le lettere diventa un secondo titolo sopra il titolo. */
.section__eyebrow,
.page-hero__eyebrow,
.split__eyebrow,
.hero__eyebrow,
.cta-box__eyebrow,
.storia__anno {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}
/* Gli anni della storia restano a cifre di larghezza fissa: incolonnati fra una
   tappa e l'altra, come prima. */
.storia__anno { font-variant-numeric: tabular-nums; }

/* ---- Sommari: il registro di `.abe-intro__body` ----
   La riga sotto il titolo: attenuata, non un secondo titolo. */
.hero__subtitle,
.page-hero__subtitle,
.section__subtitle,
.cta-banner__text,
.cta-box__text,
.article__lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ---- Corpo del testo: interlinea 1.75 ----
   `.abe-story__text`: 1.75 di interlinea e l'inchiostro un gradino sotto il
   nero dei titoli. Il sito ne aveva tre diverse (1.6, 1.7, 1.8) a seconda del
   punto: qui diventa una sola. */
.article__body p,
.prose p,
.prose li,
.split__desc,
.split__list li,
.service-card__text,
.service-index__testo,
.step__text,
.process-card__text,
.info-card__text,
.scope__text,
.storia__testo,
.team-card__bio,
.faq-answer {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.75;
  color: var(--color-text-body);
}
/* Le voci puntate restano leggibili sotto il testo corrente: stessa interlinea,
   un filo piu' piccole perche' sono elenchi dentro un discorso. */
.split__list li,
.prose li { font-size: 1rem; }
/* Il pallino dell'elenco segue la riga: con l'interlinea piu' larga, a `top`
   fisso finiva mezzo carattere piu' su del testo. */
.split__list li::before { top: 0.72em; }

/* ---- Intestazioni di scheda e di paragrafo ----
   Minuscole come il nome nella scheda del team di `.abe`, ma con la crenatura
   stretta dei titoli: sono la stessa famiglia, un gradino piu' in basso. */
.service-card__title,
.service-index__titolo,
.step__title,
.process-card__title,
.info-card__title,
.scope__title,
.storia__titolo,
.team-card__name,
.article__body h3,
.prose h2 {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-text);
  text-wrap: balance;
}

/* La domanda delle FAQ e' un'intestazione che si preme: stessa crenatura, peso
   di un pulsante. */
.faq-toggle { letter-spacing: -0.01em; color: var(--color-text); }

/* ---- Etichette minute ----
   Sotto i numeri e accanto ai nomi: attenuate, mai in maiuscolo spaziato — a
   quella misura la spaziatura le farebbe leggere come occhielli. */
.stat__label,
.team-card__role { color: var(--color-text-secondary); line-height: 1.5; }

/* ==========================================================================
   Home — occhiello dell'hero, fascia dei tool forensi, rassegna a filo,
   riquadro di chiusura
   Blocco aggiunto in coda apposta: le regole qui dentro devono poter ritoccare
   quelle generali (`.cta-banner`, `.press__row`) senza doverle inseguire su
   per il foglio, e a parita' di peso vince chi viene per ultimo.
   ========================================================================== */

/* ---- Occhiello dell'hero ----
   Le pagine interne aprono con `.section__eyebrow` sopra il titolo; la home
   era l'unica pagina del sito senza. Il filetto navy davanti alla scritta e'
   lo stesso segno che apre le voci di «Dove interveniamo». */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.hero__eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--color-navy);
  /* Il filetto sta a filo del testo, non della riga: senza questo non si
     allinea con la maiuscola ma con l'interlinea. */
  flex: 0 0 auto;
}

/* ---- Icona dentro la scheda di servizio ----
   La fascia dei tool forensi riusa `.service-card`: stessa cornice, stesso
   passaggio del mouse, stesso arco della freccia. L'unica aggiunta e' il
   disegno in cima, con la misura e il colore che ha gia' in `.process-card`. */
.service-card__icon {
  display: block;
  margin-bottom: var(--spacing-md);
  color: var(--color-navy);
}
.service-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

/* Tre schede per riga da desktop. Sotto restano le due della regola generale
   (2+1): non sono una sequenza, la riga spaiata non toglie senso a niente. */
@media (min-width: 1024px) {
  .service-cards--tre > .col-12 { width: 33.3333%; }
}

/* ---- Rassegna stampa a filo ----
   Prima ogni testata stava in una scheda riquadrata come quelle dei servizi:
   quattro cornici per contenere un logo e la riga «Leggi l'articolo», cioe' la
   quarta griglia di schede della stessa pagina. Qui i marchi stanno in fila
   sul fondo della sezione, senza cornice: la prova sono i loghi, non i riquadri.
   Il collegamento e' il logo stesso — l'`aria-label` dice dove porta, visto che
   dentro il link resta solo un'immagine. */
.press-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* Molto piu' spazio in orizzontale che in verticale: e' quello che tiene i
     marchi separati fra loro ora che non hanno piu' un bordo a dirlo. */
  gap: var(--spacing-xl) var(--spacing-3xl);
}
.press-band__voce {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Fascia di altezza fissa, come faceva `.press-card__logo`: i marchi hanno
     proporzioni diverse e senza la fascia la riga sarebbe una scaletta. */
  height: 2.75rem;
  transition: transform var(--transition);
}
.press-band__voce img {
  max-height: 100%;
  /* Il tetto in larghezza serve alle testate molto distese (La Stampa): a sola
     altezza fissa si prenderebbero mezza riga. */
  max-width: 10rem;
  width: auto;
  object-fit: contain;
  /* Grigi e smorzati perche' la fila resti una riga sola e non un campionario
     di colori altrui; il marchio puntato riprende il suo. */
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter var(--transition), opacity var(--transition);
}
/* Ripiego quando il file del logo manca, come nella vecchia scheda. */
.press-band__wordmark {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  opacity: 0.55;
  transition: opacity var(--transition);
}
@media (hover: hover) {
  .press-band__voce:hover { transform: translateY(-2px); opacity: 1; }
  .press-band__voce:hover img { filter: none; opacity: 1; }
  .press-band__voce:hover .press-band__wordmark { opacity: 1; }
}
/* Da tastiera lo stesso ravvivarsi del passaggio del mouse: senza, il marchio
   a fuoco resta grigio come gli altri e l'unico segno e' il contorno. */
.press-band__voce:focus-visible img { filter: none; opacity: 1; }
.press-band__voce:focus-visible .press-band__wordmark { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .press-band__voce:hover { transform: none; }
}

/* ---- Chiusura ----
   La pagina finiva sui loghi della stampa e poi, di colpo, sul piede. Qui
   sotto c'e' il richiamo al contatto per chi e' arrivato in fondo senza aver
   cliccato niente.
   E' un riquadro navy dentro una sezione bianca, non una fascia navy a tutta
   larghezza: il piede del sito e' gia' navy e una fascia piena gli si
   salderebbe contro — i due blocchi diventano un rettangolo scuro solo, e le
   colonne del piede sembrano parte del richiamo (provato). Staccato dai
   fianchi si legge per quello che e'. */
.cta-box {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  color: #fff;
  text-align: center;
  padding: var(--spacing-3xl) var(--spacing-lg);
}
@media (min-width: 640px) {
  .cta-box { padding: var(--spacing-4xl) var(--spacing-2xl); }
}
.cta-box__eyebrow { color: rgba(255, 255, 255, 0.6); }
.cta-box__title {
  color: #fff;
  margin-bottom: var(--spacing-md);
}
/* Non `--color-text-secondary`: quel grigio e' tarato sul fondo bianco, sul
   navy scenderebbe a 2.6 contro 1. Il bianco smorzato sta a 9.4. */
.cta-box__text {
  color: rgba(255, 255, 255, 0.75);
  max-width: 34rem;
  margin: 0 auto var(--spacing-xl);
}
.cta-box__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
}
/* I due pulsanti si ribaltano: sul navy il pieno navy sparirebbe, e il
   contorno navy pure. */
.cta-box .btn--primary {
  background: #fff;
  color: var(--color-navy);
}
.cta-box .btn--primary:hover {
  background: var(--color-border);
  color: var(--color-navy);
}
.cta-box .btn--outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
}
.cta-box .btn--outline:hover {
  background: #fff;
  color: var(--color-navy);
  border-color: #fff;
}

/* ---- Freccia delle schede a tre per riga ----
   Con quattro schede il titolo sta su una riga sola e la freccia centrata gli
   finisce a fianco. A tre per riga i titoli vanno a capo, e li' `center` la
   lascia a mezz'aria fra le due righe invece che sulla prima, dove la si
   cerca. Il varco le impedisce di toccare la parola piu' lunga. */
.service-cards--tre .service-card__title {
  align-items: flex-start;
  gap: var(--spacing-md);
}
.service-cards--tre .service-card__arrow {
  /* Scesa quel tanto che basta a stare sulla linea di mezzo delle maiuscole
     invece che sul loro tetto. */
  margin-top: 0.15em;
}

/* ==========================================================================
   Pulsante «?» e menu di aiuto (solo home)
   ==========================================================================
   Sulla home il tondo in basso a destra non e' piu' il telefono ma un punto
   interrogativo che apre un menu. Il markup sta in `base.html`, dentro
   `.floating-btns--right`, quindi la posizione sullo schermo e la colonna la
   fanno gia' le regole di `.floating-btns`: qui c'e' solo il menu.
   ========================================================================== */
.fab { position: relative; }

/* Il menu esce sopra il pulsante. `position: absolute` e non un secondo
   elemento della colonna: da fermo il menu non deve spostare il tondo, che sta
   sempre nello stesso punto dello schermo aperto o chiuso. */
.fab__menu {
  position: absolute;
  bottom: calc(100% + var(--spacing-sm));
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-sm);
  opacity: 0;
  transform: translateY(0.5rem);
  /* `visibility` e non `display`: si puo' animare, e da chiuso toglie comunque
     le voci dal percorso di tabulazione e dagli screen reader. */
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition);
}
.fab--aperto .fab__menu {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* Pasticca bianca con l'icona e la parola: al tondo scuro del pulsante serve
   qualcosa che si stacchi, e la voce sola non si leggerebbe sopra la pagina. */
.fab__voce {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0.6rem 1.1rem 0.6rem 0.85rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: border-color var(--transition), transform var(--transition);
}
.fab__voce:hover {
  border-color: var(--color-navy);
  transform: translateX(-2px);
  opacity: 1;
}
.fab__voce-icona { display: block; color: var(--color-navy); }
.fab__voce-icona svg { width: 18px; height: 18px; display: block; }

/* `.floating-btn` era nata per gli `<a>`: su un `<button>` vanno spenti sfondo,
   bordo e riempimento del browser, altrimenti il tondo diventa un rettangolo
   grigio. */
.floating-btn--aiuto {
  background: var(--color-navy);
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
/* Le due icone si sovrappongono nella stessa cella invece di stare in fila:
   `place-items` le centra, e quella nascosta non porta via spazio a quella
   visibile — il tondo non cambia misura quando si scambiano.
   `grid` scavalca il `flex` di `.floating-btn`, che qui non serve piu'. */
.floating-btn--aiuto {
  display: grid;
  place-items: center;
}
.fab__icona {
  grid-area: 1 / 1;
  display: block;
  transition: opacity var(--transition), transform var(--transition);
}
/* Il punto interrogativo e' nudo, alto e stretto: a 24px come le altre icone
   dei tondi sembrerebbe piu' piccolo di loro, perche' occupa meta' della
   larghezza. La croce e' larga quanto alta e sta sulla misura piena. */
.fab__icona--domanda svg { width: 18px; height: 22px; display: block; }
.fab__icona--chiudi svg { width: 20px; height: 20px; display: block; }

/* A menu chiuso c'e' il punto interrogativo, a menu aperto la croce. Le due
   ruotano in versi opposti: e' quel quarto di giro a far leggere lo scambio
   come un ribaltamento invece che come una figura che sostituisce un'altra. */
.fab__icona--chiudi {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}
.fab--aperto .fab__icona--domanda {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}
.fab--aperto .fab__icona--chiudi {
  opacity: 1;
  transform: none;
}
/* Aperto, il pulsante resta acceso: e' il segno che quel menu li' sopra e'
   suo. */
.fab--aperto .floating-btn--aiuto { background: var(--color-navy-light); }

@media (prefers-reduced-motion: reduce) {
  .fab__menu { transition: opacity var(--transition), visibility var(--transition); transform: none; }
  .fab__voce:hover { transform: none; }
  /* Lo scambio resta, il quarto di giro no: le icone si dissolvono l'una
     nell'altra restando dritte. */
  .fab__icona,
  .fab--aperto .fab__icona { transform: none; }
}

/* ==========================================================================
   Home — indice dei servizi e passi senza cornice
   ==========================================================================
   La home aveva tre griglie di schede riquadrate in fila (servizi, tool,
   passi): tutte con lo stesso bordo, lo stesso raggio, lo stesso passaggio
   del mouse. Le schede restano solo ai tool forensi — l'unica cosa che dalla
   home si puo' comprare, e la cornice li' dice proprio «prodotto». I servizi
   diventano un indice di righe numerate, i passi perdono la scatola e tengono
   pallino, icona e filo tratteggiato.
   `.service-cards` e `.process-card` NON si toccano: le usano ancora le
   pagine dei tool. ========================================================= */

/* ---- Indice dei servizi ----
   Righe a tutta larghezza separate da filetti, come le voci di «Dove
   interveniamo» ma con il numero d'ordine al posto del filetto in testa.
   Tutta la riga e' il link. */
.service-index {
  border-top: 1px solid var(--color-border);
  max-width: 56rem;   /* righe da leggere, non da riempire: centrate e contenute */
  margin: 0 auto;
}
.service-index__riga {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: var(--spacing-lg);
  /* `baseline` e non `start`: numero, titolo e freccia hanno corpi diversi e
     allineati in testa sembrerebbero tre righe diverse. */
  align-items: baseline;
  padding: var(--spacing-xl) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.service-index__num {
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  transition: color var(--transition);
}
.service-index__titolo {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-xs);
}
.service-index__testo {
  /* Il grosso lo fa il registro tipografico in coda al foglio; qui solo la
     misura di riga, che su 56rem piene diventerebbe un nastro. */
  max-width: 60ch;
}
.service-index__arrow {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  transition: transform var(--transition), color var(--transition);
}
.service-index__riga:hover { opacity: 1; }
.service-index__riga:hover .service-index__arrow {
  transform: translateX(4px);
  color: var(--color-navy);
}
.service-index__riga:hover .service-index__num { color: var(--color-navy); }
@media (prefers-reduced-motion: reduce) {
  .service-index__riga:hover .service-index__arrow { transform: none; }
}

/* ---- Passi senza cornice ----
   Pallino numerato, icona accanto al titolo, testo. Il filo tratteggiato
   parte dal fianco del pallino e corre verso il passo dopo: e' lui a dire
   «sequenza» — la scatola che c'era attorno non aggiungeva niente. */
.steps__row {
  /* Misura del pallino, da cui dipendono anche le quote del filo. */
  --step-num: 2.25rem;
  --bs-gutter-x: var(--spacing-2xl);
  --bs-gutter-y: var(--spacing-2xl);
}
/* In colonna a ogni larghezza: pallino a sinistra, icona, titolo e testo a
   destra. La sequenza si legge dall'alto in basso come i tre passi si vivono
   nel tempo, e il filo tratteggiato scende da pallino a pallino come una
   dorsale. Prima i passi si affiancavano da 1024px in su. */
.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--step-num) 1fr;
  column-gap: var(--spacing-lg);
  /* Righe da leggere, non da riempire: la colonna sta al centro della sezione
     e il testo tiene una misura di riga da paragrafo. Tutte le righe hanno la
     stessa larghezza (il contenitore e' piu' largo del tetto), quindi i
     pallini restano incolonnati fra loro. */
  max-width: 44rem;
  margin-inline: auto;
}
.step__num {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--step-num);
  height: var(--step-num);
  border-radius: var(--radius-full);
  background: var(--color-navy);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step__intestazione {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  /* Titolo alla stessa altezza del pallino: la riga di intestazione e' alta
     almeno quanto lui e il contenuto le sta centrato dentro. */
  min-height: var(--step-num);
}
.step__icon { display: block; color: var(--color-navy); }
.step__icon svg { width: 1.5rem; height: 1.5rem; display: block; }
.step__title { font-size: var(--font-size-lg); }
.step__text { grid-column: 2; }

/* La dorsale: dal fondo del proprio pallino fin quasi al pallino del passo
   dopo, attraversando testo e varco. Sta sul passo *precedente*
   (`:not(:last-child)`): cosi' parte da una quota che si conosce — il fondo
   del proprio tondo — e l'ultimo passo chiude senza coda. Il `bottom`
   negativo la allunga dentro il varco fra le righe (`--bs-gutter-y`),
   fermandola un soffio prima del tondo che segue. */
.steps__row > .col-12:not(:last-child) > .step::before {
  content: "";
  position: absolute;
  top: calc(var(--step-num) + var(--spacing-sm));
  bottom: calc(var(--spacing-sm) - var(--bs-gutter-y));
  left: calc(var(--step-num) / 2 - 1px);
  border-left: 2px dashed var(--color-border);
}

/* ---- Slider della rassegna ----
   Un nastro solo, senza gruppi doppi: a muoverlo e i clonarne i riempitivi
   per gli schermi larghi e' press-slider.js. Qui c'e' solo la forma: il
   riquadro che taglia, il nastro in fila, le dissolvenze ai bordi. I loghi
   dentro restano le `.press-band__voce` di prima, con il loro grigio che si
   ravviva al passaggio. */
.press-slider {
  overflow: hidden;
  /* Ai bordi i marchi entrano ed escono in dissolvenza invece di farsi
     ghigliottinare dal riquadro. Chi non sostiene `mask-image` li taglia
     netti: brutto ma corretto. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.press-slider__nastro {
  display: flex;
  align-items: center;
  gap: var(--spacing-3xl);
  width: max-content;
}
/* Finche' lo script non parte — o se non parte affatto: JavaScript spento,
   meno animazioni chieste — il nastro e' una fila ferma e centrata, e le
   dissolvenze ai bordi non hanno niente da addolcire. Appena lo script
   aggancia il nastro rimette lui la larghezza a `max-content`. */
@media (prefers-reduced-motion: reduce) {
  .press-slider { -webkit-mask-image: none; mask-image: none; }
  .press-slider__nastro {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* ==========================================================================
   Area personale — stessa impalcatura dell'area riservata di rinfresco-site
   (intestazione, sidebar delle sezioni, scheda col titolo), con i colori e i
   raggi di questo sito: il navy fa da colore pieno, il grigio caldo da fondo
   al passaggio del mouse. Le icone sono SVG inline, dimensionate qui.
   ========================================================================== */
.area { padding-top: var(--spacing-2xl); }
.area__container { max-width: 1080px; }
.area__testa {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl);
}
.area__saluto { font-size: var(--font-size-2xl); font-weight: 800; margin-bottom: var(--spacing-xs); }
.area__sottotitolo { color: var(--color-text-secondary); margin-bottom: 0; }
.area__esci { padding: 0.6rem 1.25rem; }
.area__testa--scheda { margin-bottom: var(--spacing-md); }
.area__icona { display: inline-flex; width: 18px; height: 18px; flex: none; }
.area__icona svg { width: 100%; height: 100%; }

/* Sidebar: colonna da lg in su, riga che scorre in orizzontale sotto, cosi'
   su telefono non mangia mezza schermata prima di arrivare alle pratiche. */
.area-nav {
  display: flex; flex-direction: column; gap: 4px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}
.area-nav__voce {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--radius-md); color: var(--color-text-secondary);
  font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.area-nav__voce:hover { background: var(--color-bg-soft); color: var(--color-navy); }
.area-nav__voce--attiva, .area-nav__voce--attiva:hover { background: var(--color-navy); color: #fff; }
/* Il numero accanto a «Le mie pratiche»: pillola spinta a destra, che si
   inverte quando la voce e' accesa. */
.area-nav__conteggio {
  margin-left: auto; min-width: 1.6rem; padding: 0 .5rem; border-radius: var(--radius-full);
  background: var(--color-bg-soft); color: var(--color-navy);
  font-size: 0.75rem; font-weight: 700; line-height: 1.6rem; text-align: center;
}
.area-nav__voce--attiva .area-nav__conteggio { background: rgba(255, 255, 255, .18); color: #fff; }
/* Azioni irreversibili: rosso, che nel sito altrimenti non si usa per i pulsanti. */
.area__pericolo, .area__pericolo:hover { background: #b91c1c; }
.area__pericolo-outline { color: #b91c1c; border-color: #b91c1c; }
.area__pericolo-outline:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
@media (max-width: 991.98px) {
  .area-nav { flex-direction: row; overflow-x: auto; padding: 8px; gap: 6px; }
  .area-nav__voce { padding: 10px 14px; }
}

/* Da lg in su la colonna del contenuto ha l'altezza della finestra meno
   testata e intestazione dell'area, e scorre per conto suo: la sidebar resta
   ferma accanto. `scroll` e non `auto`, cosi' la barra c'e' sempre e la
   larghezza del contenuto non cambia quando l'elenco si allunga. Sotto lg la
   colonna sta sotto la sidebar e scorre con la pagina. */
@media (min-width: 992px) {
  .area__contenuto {
    max-height: calc(100vh - 15rem);
    overflow-y: scroll;
    overscroll-behavior: contain;
    padding-right: var(--spacing-sm);
    /* Spazio perche' l'ombra della scheda non venga tagliata dal riquadro. */
    padding-bottom: var(--spacing-xl);
    scrollbar-gutter: stable;
  }
  .area-nav { position: sticky; top: var(--spacing-lg); }
}

/* Titolo della sezione aperta: stessa icona della voce nella sidebar. */
.area-titolo {
  display: flex; align-items: center; gap: 10px; margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-xl); font-weight: 800; color: var(--color-text);
}
.area-titolo .area__icona { color: var(--color-navy); width: 22px; height: 22px; }

/* La scheda del contenuto e le sue sezioni. */
.area-card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 28px; box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}
.area-card__nota { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin-bottom: var(--spacing-md); }
.area-sezione { padding-top: 8px; margin-bottom: 8px; }
.area-sezione + .area-sezione { border-top: 1px solid var(--color-border); padding-top: 22px; margin-top: 14px; }
.area-sezione__titolo { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin: 0 0 16px; }
.area-dati { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.area-dato__etichetta { display: block; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.area-dato__valore { font-weight: 600; }

/* Elenco delle pratiche: una riga per pratica, testo a sinistra, importo e
   stato a destra — come lo storico ordini. */
.area-elenco { list-style: none; margin: var(--spacing-sm) 0 0; padding: 0; }
.area-elenco__voce {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: var(--spacing-sm); padding: var(--spacing-md) 0;
  border-top: 1px solid var(--color-border);
}
.area-elenco__principale { min-width: 0; flex: 1 1 16rem; }
.area-elenco__titolo { font-weight: 600; color: var(--color-navy); }
.area-elenco__dettaglio { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.area-elenco__oggetto { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-elenco__lato { text-align: right; flex: 0 1 auto; max-width: 100%; }
.area-elenco__importo { font-weight: 600; }
.area-elenco__badge { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
/* Su schermo stretto importo e stati scendono sotto il testo, allineati a
   sinistra: a destra non c'e' piu' spazio e le pillole sborderebbero. */
@media (max-width: 575.98px) {
  .area-elenco__lato { flex-basis: 100%; text-align: left; }
  .area-elenco__badge { justify-content: flex-start; }
}

/* Stato della pratica e del pagamento: pillole con bordo, colorate solo dove
   il colore dice qualcosa — fatto, da fare, andato male. */
.area-badge {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); font-size: 0.75rem; font-weight: 600;
  color: var(--color-text-secondary); white-space: nowrap;
}
.area-badge--completato, .area-badge--pagata, .area-badge--rispedita, .area-badge--pag-pagato { border-color: #15803d; color: #15803d; }
.area-badge--da_pagare, .area-badge--in_attesa_pagamento, .area-badge--pag-creato, .area-badge--pag-attesa_bonifico { border-color: #b45309; color: #b45309; }
.area-badge--in_corso, .area-badge--in_coda, .area-badge--aperta, .area-badge--spedita, .area-badge--ricevuta, .area-badge--in_lavorazione, .area-badge--pag-autorizzato { border-color: var(--color-navy); color: var(--color-navy); }
.area-badge--fallito, .area-badge--non_riuscita, .area-badge--pag-fallito, .area-badge--pag-scaduto { border-color: #b91c1c; color: #b91c1c; }

/* Pagine di accesso (accedi, password dimenticata, nuova password): colonna
   stretta e centrata come la pagina «Accedi» di rinfresco-site. */
.auth { padding-top: var(--spacing-2xl); }
.auth__container { max-width: 460px; padding-inline: 12px; }
/* La registrazione ha piu' campi: stessa colonna, piu' larga. */
.auth__container--larga { max-width: 720px; }
/* Sezione che si apre con la spunta che la precede («Sei un avvocato?»):
   nascosta finche' la casella non e' attiva. Solo CSS, via `:has()`: un
   browser che non lo conosce mostra la sezione sempre, che e' il ripiego
   giusto — il server scarta comunque i campi di chi non e' avvocato. */
.form__interruttore { padding: 8px 0 var(--spacing-md); }
.form__interruttore:has(input:checked) + .form__sezione-condizionata { display: block; }
@supports selector(:has(input)) {
  .form__interruttore:not(:has(input:checked)) + .form__sezione-condizionata { display: none; }
}
/* Nelle schede dell'account il modulo riempie la scheda e `.form__row` mette
   due campi affiancati senza la griglia di Bootstrap (la macro `campo` rende
   direttamente i gruppi). Sotto i 576px tornano uno sotto l'altro. */
.auth__card .form, .area-card.form { max-width: none; }
.auth__card .form__row, .area-card .form__row {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--spacing-lg);
}
@media (max-width: 575.98px) {
  .auth__card .form__row, .area-card .form__row { grid-template-columns: 1fr; }
}
.auth__card .area-sezione:first-child { padding-top: 0; }
.auth__titolo { font-size: var(--font-size-2xl); font-weight: 800; text-align: center; margin-bottom: var(--spacing-xs); }
.auth__sottotitolo { color: var(--color-text-secondary); text-align: center; margin: 0 auto var(--spacing-xl); }
.auth__card .form__group:last-of-type { margin-bottom: var(--spacing-lg); }
.auth__bottone { width: 100%; }
/* Il campo del codice: cifre grandi e spaziate, al centro. */
.auth__codice { letter-spacing: .4em; font-size: 1.4rem; text-align: center; }
.auth__codice::placeholder { letter-spacing: .4em; }
/* Secondo modulo nella stessa scheda (il reinvio del codice). */
.auth__secondo { margin-top: var(--spacing-md); }
.auth__link { text-align: center; margin-top: var(--spacing-md); }
.auth__link p { margin-bottom: var(--spacing-sm); }
.auth__secondario { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* Testata su telefono: con due icone, il bottone e il burger lo spazio e'
   poco; il bottone si stringe e il burger perde il suo margine. */
@media (max-width: 479.98px) {
  .nav-toggle { width: 40px; padding: var(--spacing-xs); }
  .header__logo img { height: 38px; }
}


/* ==========================================================================
   FAQ — due colonne: il titolo della pagina a sinistra, le card a destra.
   ========================================================================== */
.faq { padding-top: var(--spacing-xl); }
.faq-griglia { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); align-items: start; }
@media (min-width: 992px) {
  .faq-griglia { grid-template-columns: minmax(16rem, 1fr) 1.6fr; gap: var(--spacing-3xl); }
  .faq-titoli { position: sticky; top: calc(72px + var(--spacing-xl)); }
}
.faq-titoli .page-hero__subtitle { margin-bottom: 0; }
/* In una colonna da un terzo il titolo hero a piena taglia andrebbe su quattro
   righe: una misura sotto, stesso stile. */
@media (min-width: 992px) {
  .faq-titoli .page-hero__title { font-size: var(--font-size-3xl); }
}

.faq-cards { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.faq-card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}
.faq-card__numero { color: var(--color-text-muted); font-weight: 700; font-size: var(--font-size-sm); margin-bottom: var(--spacing-xs); }
.faq-card__domanda { font-size: var(--font-size-xl); font-weight: 800; margin-bottom: var(--spacing-sm); }
.faq-card__risposta { color: var(--color-text-body, var(--color-text-secondary)); line-height: 1.7; }

/* ===== AVVISO-TOAST ===== */
/* Avviso passeggero in basso a destra, creato da JS. Si chiama avviso-toast
   perche' il Bootstrap del sito ha gia' un componente .toast che nasconde
   (display:none) chi ne porta la classe senza .show. Lo usa (oggi solo la pagina
   di accesso al social). Fisso e sopra tutto: deve vedersi anche se la pagina
   e' scorsa a meta'. Compare e sparisce con la stessa transizione. */
.avviso-toast {
  position: fixed;
  right: var(--spacing-lg);
  /* Sopra i pulsanti flottanti (.floating-btns, 52px in basso a destra): nello
     stesso angolo il «?» coprirebbe la fine del messaggio. */
  bottom: calc(var(--spacing-lg) + 52px + var(--spacing-md));
  z-index: 1000;
  max-width: min(360px, calc(100vw - 2 * var(--spacing-lg)));
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.avviso-toast--visibile {
  opacity: 1;
  transform: none;
}
/* Il rosso degli errori dei moduli, su fondo pieno: e' un errore, non un avviso. */
.avviso-toast--errore {
  background: #b91c1c;
  color: #fff;
}
/* Le altre categorie dei flash: avviso in navy, successo nel verde di .alert--success. */
.avviso-toast--info {
  background: var(--color-navy);
  color: #fff;
}
.avviso-toast--success {
  background: #166534;
  color: #fff;
}
/* I flash resi come toast dal server (pagina di accesso): una pila in basso a
   destra, cosi' due messaggi non si coprono. Dentro la pila i toast non sono
   piu' fissi: e' fissa la pila. */
.avviso-toast__pila {
  position: fixed;
  right: var(--spacing-lg);
  bottom: calc(var(--spacing-lg) + 52px + var(--spacing-md));   /* come .avviso-toast */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-sm);
  pointer-events: none;
}
.avviso-toast__pila .avviso-toast {
  position: static;
}

/* ===== PAGINA BONIFICO ===== */
/* Le coordinate in scheda, una riga per dato: etichetta e valore a sinistra,
   il pulsante di copia a destra. Sono dati da ricopiare nell'home banking,
   non un testo da leggere: la copia col pulsante evita l'errore di battitura
   che fa arrivare un bonifico su un conto sbagliato. */
.bonifico__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: .8rem 0;
  border-bottom: 1px solid var(--color-border);
}
.bonifico__riga:last-child { border-bottom: 0; }
.bonifico__etichetta {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.bonifico__valore {
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.bonifico__valore code { font-size: 1.05rem; }
.bonifico__nota {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-secondary);
}
.bonifico__copia {
  width: 2.3rem;
  height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy);
  background: transparent;
  border: 1.5px solid var(--color-navy);
  border-radius: 999px;
  cursor: pointer;
}
.bonifico__copia:hover { background: var(--color-bg-soft); }
.bonifico__copia--fatto { color: #15803d; border-color: #15803d; }
.bonifico__copia--errore { color: #b91c1c; border-color: #b91c1c; }

/* ===== BARRA DEI TERMINI E CONDIZIONI ===== */
/* Fissa in fondo, a tutta larghezza, finche' il visitatore non accetta. Sta
   sopra i pulsanti flottanti (90) e sotto i toast (1000). Mentre c'e', il «?»
   e i toast salgono sopra di lei: `--altezza-banner-termini` la misura
   termini.js; senza JavaScript vale il valore di riserva. */
.banner-termini {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .08);
  padding: var(--spacing-md) 0;
}
.banner-termini__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
}
.banner-termini__testo {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.banner-termini__testo a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.banner-termini__modulo { margin: 0; flex-shrink: 0; }
.banner-termini__bottone { white-space: nowrap; }
body.con-banner-termini { padding-bottom: var(--altezza-banner-termini, 88px); }
body.con-banner-termini .floating-btns {
  bottom: calc(var(--altezza-banner-termini, 88px) + var(--spacing-md));
}
body.con-banner-termini .avviso-toast,
body.con-banner-termini .avviso-toast__pila {
  bottom: calc(var(--altezza-banner-termini, 88px) + var(--spacing-md) + 52px + var(--spacing-md));
}
@media (max-width: 640px) {
  .banner-termini__interno { flex-direction: column; align-items: stretch; gap: var(--spacing-sm); }
  .banner-termini__bottone { width: 100%; justify-content: center; }
}
@media print { .banner-termini { display: none; } }

/* Conversazione di un ticket sul sito (/assistenza/ticket): i messaggi del
   cliente a destra, quelli dello staff a sinistra. */
.conversazione { list-style: none; margin: 0 0 var(--spacing-md); padding: 0; display: flex; flex-direction: column; gap: 12px; }
.conversazione__messaggio { max-width: 85%; padding: 12px 16px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.conversazione__messaggio--cliente { align-self: flex-end; background: var(--color-bg-soft); }
.conversazione__messaggio--staff { align-self: flex-start; background: var(--color-bg); }
.conversazione__chi { margin: 0 0 4px; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.conversazione__messaggio--staff .conversazione__chi { font-weight: 600; color: var(--color-text); }
.conversazione__testo { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Stato del ticket nell'area personale (prefisso tkt-: «aperta» e
   «in_lavorazione» delle pratiche hanno gia' i loro colori). */
.area-badge--tkt-aperto { border-color: #b45309; color: #b45309; }
.area-badge--tkt-in_lavorazione { border-color: var(--color-navy); color: var(--color-navy); }