/* Farsi Strada — stili custom del tema (design-system via C, docs/design-remapping.md).
   Caricato DOPO Bootstrap 5.3 (override deterministico). Niente SASS, nessun @import
   di sorgenti. Le variabili Bootstrap sono riagganciate ai token di brand; i
   componenti su misura sono portati dal design export del progetto, home e pagine
   interne comprese: design-remapping.md §7 non ha più pendenze. */

/* ===================================================================
   Font — Mulish self-hosted (decisione §3/§6: nessun hot-link a Google Fonts).
   Mulish è un font aperto (SIL OFL 1.1) → i woff2 variabili stanno in
   assets/fonts/, non si aspettano come binario dal cliente. system-ui è il
   fallback di font-display: swap.
   =================================================================== */
/* Font: Mulish — open (OFL-1.1), source: @fontsource-variable/mulish subset latin */
@font-face {
    font-family: "Mulish";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../fonts/mulish-variable.woff2") format("woff2-variations");
}
@font-face {
    font-family: "Mulish";
    font-style: italic;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../fonts/mulish-italic-variable.woff2") format("woff2-variations");
}

/* ===================================================================
   Tokens — namespaced --farsistrada-* + Bootstrap variable rebind (§3).
   =================================================================== */
:root {
    --farsistrada-font-sans: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;

    --farsistrada-blue: #0C6293;        /* Pantone 7691 C */
    --farsistrada-blue-deep: #034563;   /* Pantone 4160 C */
    --farsistrada-blue-soft: #CFE0EC;
    --farsistrada-blue-tint: #EAF2F8;
    --farsistrada-sky: #9ED2EE;         /* on-dark accent */
    --farsistrada-emphasis: var(--farsistrada-blue); /* colore di <em>, sky sui fondi scuri */
    --farsistrada-ink: #222226;         /* Pantone 426 C */
    --farsistrada-ink-soft: #4A4D53;
    --farsistrada-muted: #7C8088;
    --farsistrada-line: #E2E2E4;
    --farsistrada-line-soft: #ECECEE;
    --farsistrada-cream: #F4F4F4;
    --farsistrada-cream-deep: #E7E7E9;
    --farsistrada-paper: #FCFCFD;
    --farsistrada-white: #FFFFFF;
    /* Rosso di stato: marcatore di campo obbligatorio e messaggi di validazione.
       Non è un colore di brand ma quello che CF7 usa già per .wpcf7-not-valid-tip
       (#dc3232, includes/css/styles.css): un solo rosso per "manca qualcosa", così
       l'asterisco e l'errore che compare sotto al campo non divergono. */
    --farsistrada-error: #DC3232;

    /* Bande del ritmo di pagina: coppia sfondo + hairline per le due bande tinte che
       scandiscono la home e le pagine interne. Erano hex letterali dentro il solo
       blocco della home; la pagina Metodo adotta lo stesso ritmo, quindi un nome
       condiviso impedisce alle due pagine di andare in drift. */
    --farsistrada-band-blue: #DCE9F3;
    --farsistrada-band-blue-line: #C3D8E8;
    --farsistrada-band-grey: #E7EAEE;
    --farsistrada-band-grey-line: #D3D7DD;
    --farsistrada-radius-xs: 3px;
    --farsistrada-radius: 5px;
    --farsistrada-radius-lg: 8px;
    --farsistrada-shadow-sm: 0 1px 0 rgba(14, 26, 38, 0.04), 0 1px 2px rgba(14, 26, 38, 0.05);
    --farsistrada-shadow: 0 14px 34px -20px rgba(7, 66, 103, 0.22), 0 2px 6px rgba(14, 26, 38, 0.05);
    --farsistrada-maxw: 1240px;
    --farsistrada-navbar-h: 76px;

    /* Velatura blu verticale sopra le foto in evidenza (blue-deep, chiara in alto →
       più scura in basso). Sorgente unica: la condividono le card dei servizi in
       homepage e le righe dell'archivio servizi, così le due restano identiche. */
    --farsistrada-photo-scrim: linear-gradient(180deg, rgba(3, 69, 99, 0.22) 0%, rgba(3, 69, 99, 0.66) 100%);

    /* Riaggancio di Bootstrap (§3): i componenti ereditano la palette di brand. */
    --bs-primary: var(--farsistrada-blue);
    --bs-primary-rgb: 12, 98, 147;
    --bs-primary-text-emphasis: var(--farsistrada-blue-deep);
    --bs-link-color: var(--farsistrada-blue);
    --bs-link-color-rgb: 12, 98, 147;
    --bs-link-hover-color: var(--farsistrada-blue-deep);
    --bs-body-color: var(--farsistrada-ink);
    --bs-body-color-rgb: 34, 34, 38;
    --bs-secondary-color: var(--farsistrada-ink-soft);
    --bs-tertiary-color: var(--farsistrada-muted);
    --bs-body-bg: var(--farsistrada-paper);
    --bs-border-color: var(--farsistrada-line);
    --bs-border-radius: var(--farsistrada-radius);
    --bs-border-radius-sm: var(--farsistrada-radius-xs);
    --bs-border-radius-lg: var(--farsistrada-radius-lg);
    --bs-body-font-family: var(--farsistrada-font-sans);
    --bs-body-font-size: 17px;
    --bs-body-line-height: 1.55;
}

/* ===================================================================
   Base type (§3). Overrides Bootstrap reboot defaults.
   =================================================================== */
body {
    font-family: var(--farsistrada-font-sans);
    color: var(--farsistrada-ink);
    background: var(--farsistrada-paper);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.serif {
    font-family: var(--farsistrada-font-sans);
    font-feature-settings: "liga", "kern";
    letter-spacing: -0.01em;
    font-weight: 800;
}

/* Tipografia di base del design-system — heading a peso 800 con tracking
   -0.02em, h1 e h2 in clamp fluido.
   Prima era limitata a un elenco di cinque selettori di sezione tenuto a mano, che
   lasciava la *dimensione* del tutto non portata: nel tema non esisteva nessun
   font-size per h2, quindi ogni h1 e h2 del sito ricadeva sul reboot di Bootstrap
   e si rendeva a 40px / 32px contro gli 88px / 60px che il design chiede a
   larghezza desktop. Le regole di hero con scope (.page-hero, .svc-hero,
   .arch-hero, .farsistrada-term-hero) tengono le proprie dimensioni: battono
   l'elemento nudo per specificità.
   L'elenco andava per giunta esteso a mano
   a ogni nuova sezione, ed è così che è rimasto indietro. Deviazione voluta: il
   design azzera anche i margini degli heading — non portato, perché il contenuto
   WYSIWYG degli articoli conta sui margini di Bootstrap e non ha CSS di sezione
   che li ripristini. */
h1,
h2,
h3,
h4 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
}
h1 {
    font-size: clamp(48px, 6vw, 88px);
}
h2 {
    font-size: clamp(36px, 4.4vw, 60px);
    line-height: 1.06;
}

/* Enfasi inline (farsistrada_inline_html): il redattore può mettere <em> e
   <strong> in qualunque titolo o testo, quindi lo stile vive qui una volta sola
   e non sezione per sezione. <em> è corsivo nel colore di enfasi: blu sui fondi
   chiari, sky su quelli scuri (il token si ridichiara sulla superficie, vedi
   sotto). <strong> resta il grassetto del browser nel colore del testo.
   Negli heading il corsivo sta a 600, non all'800 ereditato: è la variabilità
   che il design cerca, il corsivo stacca dal roman invece di pareggiarlo. Sta
   qui e non nel @font-face, che dichiara ciò che il file sa fare (wght
   200-1000): un descrittore più stretto renderebbe lo stesso 600, ma per clamp
   silenzioso invece che per decisione.
   Vedi design-remapping.md §6 e vendor-updater/SKILL.md §"Pipeline font (open)". */
em {
    font-style: italic;
    color: var(--farsistrada-emphasis);
}
h1 em,
h2 em,
h3 em,
h4 em {
    font-weight: 600;
}
/* Superfici scure o blu: l'enfasi passa a sky, come .academy h2 em e
   .hero h1 .accent del design. */
.farsistrada-hero,
.farsistrada-academy,
.lead-magnet,
.farsistrada-cta-contatto,
.farsistrada-numeri,
.mv-card.dark,
.buy-cta,
.arch-note .box,
.cat-card,
.site-footer {
    --farsistrada-emphasis: var(--farsistrada-sky);
}

/* Il testo corrente sta in ink-soft, non in ink pieno, come nel design.
   Senza questa regola ogni <p> fuori da una sezione che ridichiara il colore
   ricadeva su --bs-body-color (ink pieno), che ovunque si legge più pesante del
   design. */
p {
    color: var(--farsistrada-ink-soft);
}

/* Pagina dei credits (Pattern #30): i punti di "Come è fatto" sono testo
   corrente come i paragrafi che li circondano, non in ink pieno. */
.farsistrada-credits-features {
    color: var(--farsistrada-ink-soft);
}

.lead {
    font-size: 20px;
    line-height: 1.5;
    color: var(--farsistrada-ink-soft);
    max-width: 62ch;
}

.eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--farsistrada-blue);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--farsistrada-blue);
    display: inline-block;
}
.eyebrow.on-dark,
.eyebrow.light {
    color: var(--farsistrada-sky);
}
.eyebrow.on-dark::before,
.eyebrow.light::before {
    background: var(--farsistrada-sky);
}

/* La gutter del design è 28px per lato, non i 12px
   che Bootstrap deriva da --bs-gutter-x. Veniva sovrascritta solo la max-width,
   quindi ogni pagina risultava 16px più larga del design su entrambi i bordi. Le
   row continuano a funzionare: il loro tiro di -12px lo rimette il padding delle
   colonne. */
.container {
    max-width: var(--farsistrada-maxw);
    padding-left: 28px;
    padding-right: 28px;
}

/* Ritmo delle sezioni del design — 120px sopra e sotto, 80px sotto gli 860px.
   Questa regola di base mancava del tutto e la homepage si appoggiava alla
   .py-5 di Bootstrap, il cui !important batteva in silenzio persino le regole
   .farsistrada-clients (38px) e .tight (80px) del tema stesso e appiattiva
   ogni banda a 48px. Solo base:
   qualunque classe di sezione che porta il proprio padding (.page-hero, .tight, le
   bande d'archivio) vince ancora per specificità. */
section {
    padding: 120px 0;
}
@media (max-width: 860px) {
    section {
        padding: 80px 0;
    }
}

/* ===================================================================
   Buttons (§2.4) — Bootstrap .btn reskinned + bespoke add-on variants.
   =================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: var(--farsistrada-radius-xs);
    font-weight: 700;
    font-size: 14.5px;
    /* Il bordo resta quello della .btn di Bootstrap, 1px solid
       var(--bs-btn-border-color), trasparente di default: un `border` letterale
       qui azzerava la variabile, e le varianti outline (il bottone di pausa
       degli slider, .btn-outline-secondary) restavano senza contorno. */
    white-space: nowrap;
    /* La transition della .btn di Bootstrap non include transform, quindi il
       sollevamento di -1px in hover delle varianti su misura scattava invece di
       ammorbidirsi: qui la transition del design, transform compreso. */
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary {
    --bs-btn-bg: var(--farsistrada-blue);
    --bs-btn-border-color: var(--farsistrada-blue);
    --bs-btn-hover-bg: var(--farsistrada-blue-deep);
    --bs-btn-hover-border-color: var(--farsistrada-blue-deep);
    --bs-btn-active-bg: var(--farsistrada-blue-deep);
    --bs-btn-active-border-color: var(--farsistrada-blue-deep);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    /* CF7 tiene il submit disabled finché l'acceptance privacy non è spuntata
       (includes/js/index.js). Senza queste due righe quello stato cadeva sul blu
       di serie di Bootstrap (#0d6efd al 65%), estraneo alla palette. */
    --bs-btn-disabled-bg: var(--farsistrada-blue);
    --bs-btn-disabled-border-color: var(--farsistrada-blue);
    --bs-btn-disabled-color: #fff;
}
.btn-primary:hover { transform: translateY(-1px); }

/* Su fondo scuro (sopra hero e video): bianco con il solo contorno. */
.btn-on-dark {
    color: var(--farsistrada-white);
    border-color: rgba(255, 255, 255, 0.45);
    background: transparent;
}
.btn-on-dark:hover {
    border-color: var(--farsistrada-white);
    background: rgba(255, 255, 255, 0.10);
    color: var(--farsistrada-white);
    transform: translateY(-1px);
}
/* Su fondo blu (sopra la banda academy): bianco pieno. */
.btn-on-blue {
    background: var(--farsistrada-white);
    color: var(--farsistrada-blue-deep);
}
.btn-on-blue:hover {
    background: #EAF4FB;
    color: var(--farsistrada-blue);
    transform: translateY(-1px);
}

/* Link inline con freccia (non un .btn). */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--farsistrada-blue);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    padding: 0;
}
.btn-link:hover { color: var(--farsistrada-blue-deep); }
.btn-link svg { transition: transform .2s ease; }
.btn-link:hover svg { transform: translateX(4px); }
.arrow { width: 14px; height: 14px; flex: 0 0 auto; }

/* Micro-etichetta del design (il suo font mono → Mulish uppercase + tracking):
   meta di card e pannelli, tempo di lettura nei piedi. Owner unico del trattamento,
   così card del blog e pannelli non ne tengono due copie divergenti. */
.cc-meta,
.cc-foot .read,
.pf-foot .read {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--farsistrada-muted);
}

/* Tag sovrapposto a una banda visual scura (card blog, pannello featured):
   vetro su fondo scuro. La variante piena vive nel blocco che la usa. */
.cc-tag {
    position: relative;
    z-index: 2;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: var(--farsistrada-radius-xs);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.32);
}

/* Modulo CF7 su un fondo blu (.form-on-blue): mini-guida (.lead-magnet), newsletter
   del blog (.farsistrada-academy) e "Prossime uscite" dei libri (.arch-note). La skin
   del form (layout a riga, controlli, consenso, submit, messaggi) sta in
   assets/css/cf7.css, accodato solo dove un form viene reso. Qui resta la nota sotto
   il modulo: è markup del template, non del form, e si rende anche quando lo slot
   shortcode è vuoto. */
/* La nota sta dentro il contenitore del modulo, non accanto: così (0,2,0) batte il
   `.lead-magnet p` (0,1,1) che altrimenti le darebbe il peso del corpo testo. */
.form-on-blue .form-note { margin-top: 14px; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }

/* ===================================================================
   Navbar — navbar Bootstrap ri-vestita, effetto sticky smerigliato (fixed-top).
   La utility di bg è vuota di proposito (navbar.bg_class: "") così lo sfondo è
   owner di questo blocco.
   =================================================================== */
/* --farsistrada-navbar-h (su :root, in testa al file) è l'altezza della barra
   chiusa, la misura che body e scroll-padding le riservano: 76px è la barra del
   design. La barra la segue a ogni contenuto: le regole del brand più sotto la
   derivano da questo token. */
:root {
    --farsistrada-adminbar-h: 0px;
}

/* fixed_top con un utente loggato: la admin bar di WP è fissa sopra la pagina
   (z-index 99999) e copriva la navbar, che sta anch'essa a top: 0. Il token vale
   l'altezza della admin bar (32px, 46px sotto i 782px) e porta la navbar sotto
   di essa; il documento lo sposta già WP, con il margin-top di html. Senza
   :has() (browser vecchi) resta la sovrapposizione, e solo per chi è loggato. */
:root:has(> body.admin-bar) {
    --farsistrada-adminbar-h: 32px;
}
@media (max-width: 782px) {
    :root:has(> body.admin-bar) {
        --farsistrada-adminbar-h: 46px;
    }
}
/* Sotto i 600px WP rende la admin bar absolute: scorrendo andrebbe via e
   lascerebbe un buco di 46px sopra la navbar fissa. Resta fissa come sopra. */
@media (max-width: 600px) {
    #wpadminbar {
        position: fixed;
    }
}
.farsistrada-navbar.fixed-top {
    top: var(--farsistrada-adminbar-h);
}

/* fixed_top: tiene il contenuto della pagina libero dalla navbar fissa. */
body { padding-top: var(--farsistrada-navbar-h); }
/* fixed_top, seconda metà: un salto ad ancora porta il bersaglio a y=0, che sta
   DIETRO la barra fissa. Il padding sul body non aiuta: sposta il layout, non la
   posizione di scroll. scroll-padding-top sul container di scroll copre in un
   colpo solo ogni scroll-into-view: i deep-link /servizi/#{slug} nel menu, le
   ancore #chi-siamo / #sostenibilita della pagina contatti, scrollIntoView()
   dal JS. Nessun bersaglio deve sapere che la navbar esiste. */
html { scroll-padding-top: calc(var(--farsistrada-navbar-h) + var(--farsistrada-adminbar-h) + 1rem); }

/* fixed_top, brand: il body riserva --farsistrada-navbar-h, e la riga della barra è
   alta quanto il brand, quindi il brand vale il token meno il padding della
   barra, né di più né di meno. Il nome del sito ci arriva col line-height; il
   logo di Personalizza con la riga flex del suo link, e senza superarla, perché
   arriva alla sua misura intrinseca (un file 800x400 porterebbe la navbar a
   236px, uno basso la lascerebbe più corta della misura riservata).
   position: relative lo tiene sopra il menu aperto, il cui margine negativo
   (sotto) sale sul fondo della riga: senza, gli ultimi 4px del link non
   risponderebbero al clic. */
.farsistrada-navbar .navbar-brand {
    position: relative;
    line-height: calc(var(--farsistrada-navbar-h) - 2 * var(--bs-navbar-padding-y) - 2 * var(--bs-navbar-brand-padding-y));
}
.farsistrada-navbar .custom-logo-link {
    display: flex;
    align-items: center;
    height: calc(var(--farsistrada-navbar-h) - 2 * var(--bs-navbar-padding-y));
}
.farsistrada-navbar .custom-logo {
    width: auto;
    max-height: calc(var(--farsistrada-navbar-h) - 2 * var(--bs-navbar-padding-y));
}
/* Delta di progetto sopra le tre regole della Factory: la barra del design chiude
   con un filetto di 1px (border-bottom di .farsistrada-navbar, più sotto), che la
   formula della Factory non conta. Brand e logo lo tolgono dalla loro riga, così
   la barra chiusa resta alta quanto il token (76px) invece di sbordare di 1px sul
   contenuto che il body le libera. */
.farsistrada-navbar .navbar-brand {
    line-height: calc(var(--farsistrada-navbar-h) - 1px - 2 * var(--bs-navbar-padding-y) - 2 * var(--bs-navbar-brand-padding-y));
}
.farsistrada-navbar .custom-logo-link {
    height: calc(var(--farsistrada-navbar-h) - 1px - 2 * var(--bs-navbar-padding-y));
}
.farsistrada-navbar .custom-logo {
    max-height: calc(var(--farsistrada-navbar-h) - 1px - 2 * var(--bs-navbar-padding-y));
}

/* fixed_top, menu aperto sotto il breakpoint: la barra fissa non scorre con la
   pagina, quindi le voci oltre il bordo dello schermo sarebbero irraggiungibili
   (il gesto scorrerebbe la pagina sotto). Il collapse aperto scorre da sé entro
   l'altezza visibile. Sopra il breakpoint il collapse è la riga del menu, e un
   overflow lì taglierebbe i dropdown: la media query tiene fuori anche il
   collapse che resta .show quando la finestra si allarga col menu aperto (un
   tablet ruotato). L'altezza visibile è 100dvh, che segue la barra degli
   indirizzi del browser mobile; 100vh la precede per i browser senza dvh, che
   scartano la seconda dichiarazione e lascerebbero il menu senza tetto.
   Un contenitore che scorre ritaglia al bordo del proprio padding anche in
   orizzontale, e l'anello di focus sta fuori dalla voce (box-shadow di
   .nav-link, outline di .dropdown-item): il padding pari a
   --bs-focus-ring-width gli fa posto, il margine negativo uguale lascia le
   voci dove sono, scroll-padding-block lo tiene in vista quando il focus fa
   scorrere il menu, e il tetto cresce del padding, così l'area delle voci
   resta la stessa. */
@media (max-width: 991.98px) {
    .farsistrada-navbar.fixed-top .navbar-collapse.show,
    .farsistrada-navbar.fixed-top .navbar-collapse.collapsing {
        max-height: calc(100vh - var(--farsistrada-navbar-h) - var(--farsistrada-adminbar-h) + 2 * var(--bs-focus-ring-width));
        max-height: calc(100dvh - var(--farsistrada-navbar-h) - var(--farsistrada-adminbar-h) + 2 * var(--bs-focus-ring-width));
        overflow-y: auto;
        margin: calc(-1 * var(--bs-focus-ring-width));
        padding: var(--bs-focus-ring-width);
        scroll-padding-block: var(--bs-focus-ring-width);
    }
}
/* Home a tutta pagina (desktop): l'hero sta dietro la navbar trasparente, quindi
   lì l'offset si toglie. Sotto il breakpoint di expand la navbar è piena (vedi il
   blocco transparent/scroll), quindi la home tiene il suo offset di navbar. */
@media (min-width: 992px) {
    body.home { padding-top: 0; }
}

.farsistrada-navbar {
    min-height: var(--farsistrada-navbar-h);
    background: color-mix(in oklab, var(--farsistrada-paper) 82%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid color-mix(in oklab, var(--farsistrada-line) 60%, transparent);
}
/* Bootstrap dà alla .navbar-brand un margine destro di 1rem. Il design dispone
   l'header come logo | link | CTA con lo spazio libero diviso in parti uguali
   (vedi i margini auto qui sotto), e un margine sul brand sbilancerebbe in
   silenzio il vuoto di sinistra. */
.farsistrada-navbar .navbar-brand { color: var(--farsistrada-blue); margin-right: 0; }
.farsistrada-navbar .navbar-brand img { height: 34px; width: auto; }
.farsistrada-navbar .nav-link {
    position: relative;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--farsistrada-ink-soft);
}
.farsistrada-navbar .nav-link:hover,
.farsistrada-navbar .nav-link:focus { color: var(--farsistrada-blue); }
/* Pagina corrente: label in ink più un filetto blu di 2px sotto. Il filetto è
   l'unico marcatore inequivocabile di "sei qui": ink contro ink-soft da solo è
   troppo sommesso per leggersi come stato. Due esclusioni, entrambe volute: un
   .dropdown-toggle tiene il colore ink ma non prende il filetto (apre un menu, non
   è esso stesso la destinazione), e .nav-cta è un bottone. Ancorato al box del
   link, il cui padding orizzontale è 0 al breakpoint espanso, così il filetto copre
   esattamente la label: ed è per questo che ha quello scope, perché nella pila
   compressa ogni <a> è un blocco a tutta larghezza e il filetto correrebbe per
   tutto il drawer. Da compressa, il colore ink porta lo stato da solo (l'idioma
   che Bootstrap stesso usa per un menu impilato). */
.farsistrada-navbar .nav-link.active { color: var(--farsistrada-ink); }
@media (min-width: 992px) {
    .farsistrada-navbar .nav-item:not(.nav-cta) > .nav-link.active:not(.dropdown-toggle)::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        border-radius: 2px;
        background: var(--farsistrada-blue);
    }
}
/* Caret: il chevron 10x6 a tratto del design, non il triangolo pieno di Bootstrap.
   Il glifo è una mask dipinta con currentColor, quindi segue il link in ogni stato
   che la navbar ha (ink-soft, blu in hover, bianco sopra la home trasparente)
   senza un secondo asset da tenere allineato. Si ribalta all'apertura del menu,
   guidato da aria-expanded, l'attributo che Bootstrap già commuta: nessun JS
   nostro. */
.farsistrada-navbar .nav-link.dropdown-toggle::after {
    width: 10px;
    height: 6px;
    margin-left: 7px;
    border: 0;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 10px 6px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 10px 6px;
    transition: transform 0.2s ease;
}
.farsistrada-navbar .nav-link.dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.farsistrada-navbar .dropdown-menu {
    border: 1px solid var(--farsistrada-line);
    border-radius: var(--farsistrada-radius);
    box-shadow: var(--farsistrada-shadow);
    padding: 8px;
}
.farsistrada-navbar .dropdown-item {
    border-radius: var(--farsistrada-radius-xs);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--farsistrada-ink-soft);
    padding: 10px 13px;
}
.farsistrada-navbar .dropdown-item:hover,
.farsistrada-navbar .dropdown-item:focus,
.farsistrada-navbar .dropdown-item.active {
    background: var(--farsistrada-blue-tint);
    color: var(--farsistrada-blue);
}
/* Etichetta di gruppo dentro un dropdown ("Software", "Consulenza", "Formazione"):
   lo <span class="dropdown-header"> non interattivo che il Walker emette per una
   voce di menu marcata con quella classe CSS (Pattern #13). Prende in prestito il
   vocabolario delle group-label del design-system (maiuscolo, spaziato, piccolo,
   smorzato) — le etichette di colonna del footer sono la stessa idea su fondo
   scuro. Lo smorzato è load-bearing, non decorazione: a ink-soft la label portava
   esattamente il colore di .dropdown-item e, essendo più pesante, si leggeva come
   la più cliccabile delle due. --farsistrada-muted è il token già legato a
   --bs-tertiary-color, cioè la sorgente da cui Bootstrap stesso legge
   .dropdown-header. Mai blu: qui il blu è il colore dei link. Un hairline apre
   ogni gruppo dopo il primo, così la label si legge come testa di un insieme e non
   come una riga al suo interno. Il padding orizzontale combacia con
   .dropdown-item, così label e link condividono il bordo sinistro. */
.farsistrada-navbar .dropdown-header {
    margin-top: 6px;
    padding: 12px 13px 5px;
    border-top: 1px solid var(--farsistrada-line-soft);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--farsistrada-muted);
}
.farsistrada-navbar .dropdown-menu > li:first-child .dropdown-header {
    margin-top: 0;
    padding-top: 5px;
    border-top: 0;
}
/* CTA nell'header: aggiungi la classe CSS "nav-cta" a una voce di menu per
   renderla come bottone primario (nota in requirements.md — "Parla con noi" =
   voce di menu stilizzata). */
.farsistrada-navbar .nav-item.nav-cta .nav-link {
    background: var(--farsistrada-blue);
    color: var(--farsistrada-white);
    border-radius: var(--farsistrada-radius-xs);
    padding: 10px 18px;
}
.farsistrada-navbar .nav-item.nav-cta .nav-link:hover {
    background: var(--farsistrada-blue-deep);
    color: var(--farsistrada-white);
}
/* Riga dell'header al breakpoint espanso: logo | link | CTA, lo space-between del
   design. La ul della Factory arriva con .me-auto (link a sinistra) e tiene la CTA
   come ultima voce, quindi la riga viene ricostruita sulla lista stessa: riempie
   la larghezza, e DUE margini auto — prima del primo link e prima della CTA —
   dividono lo spazio libero in due vuoti uguali, esattamente quello che
   space-between produce sull'header a tre figli del design.
   align-items:center è load-bearing, non pulizia: .nav-cta è la voce più alta
   (padding del bottone), quindi con lo stretch di default ogni <li> semplice
   cresceva fino alla sua altezza mentre la sua <a> restava allineata in alto,
   facendo galleggiare le label qualche px sopra il logo e il bottone. Centrare la
   riga le rimette sullo stesso asse.
   La spaziatura fra le label è un margine fra fratelli e non gap: il gap si
   applicherebbe anche prima della CTA, aggiungendo 30px al solo vuoto di destra e
   rompendo la simmetria che i margini auto servono a produrre. È fluida perché
   questo menu è largo (sette voci più logo e bottone): i 30px del design tengono
   da ~1440px in su e si stringono verso 16px avvicinandosi al breakpoint, dove un
   30px fisso lasciava alla riga ~15px di gioco e le label andavano a capo su due
   righe. nowrap, come nel design, rende quel guasto impossibile e non solo
   improbabile. Sotto questo breakpoint il menu collassa in una pila verticale e
   tiene l'idioma di Bootstrap. */
@media (min-width: 992px) {
    .farsistrada-navbar .navbar-nav {
        margin-right: 0 !important;
        flex-grow: 1;
        align-items: center;
    }
    .farsistrada-navbar .navbar-nav > .nav-item:first-child { margin-left: auto; }
    .farsistrada-navbar .nav-item + .nav-item:not(.nav-cta) { margin-left: clamp(16px, 2.08vw, 30px); }
    .farsistrada-navbar .nav-link { white-space: nowrap; }
    .farsistrada-navbar .nav-item:not(.nav-cta) > .nav-link { padding-left: 0; padding-right: 0; }
    .farsistrada-navbar .nav-item.nav-cta { margin-left: auto; }
}

/* ===================================================================
   Navbar — transparent-home + scroll-change (comportamenti del Pattern #13).
   Solo home (classe .farsistrada-navbar-transparent, emessa su is_front_page):
   trasparente sopra l'hero con una velatura in alto per la leggibilità dei link,
   che diventa piena e smerigliata oltre la soglia di scroll (data-scroll-change →
   theme.js commuta .farsistrada-navbar-scrolled). Solo crossfade (background/color)
   così degrada pulito sotto prefers-reduced-motion: mai una transform. Sotto il
   breakpoint navbar-expand la navbar è forzata piena (il menu aperto deve
   leggersi sopra l'hero).
   =================================================================== */
.farsistrada-navbar { transition: background-color 0.25s ease, box-shadow 0.25s ease; }

.farsistrada-navbar-transparent {
    background-image: linear-gradient(180deg, rgba(2, 34, 53, 0.62) 0%, rgba(2, 34, 53, 0.18) 68%, rgba(2, 34, 53, 0) 100%);
    border-bottom-color: transparent;
    box-shadow: none;
}
/* Il testo bianco di brand e link è valido in UNO stato soltanto: >=lg, non
   scrollata, sopra l'hero scuro — lo stesso stato che mostra il logo chiaro (qui
   sotto). Dargli questo scope, invece di applicarlo in modo ampio e revocarlo
   stato per stato, è ciò che tiene leggibile il menu mobile aperto: sotto il
   breakpoint il menu sta sul pannello chiaro forzato pieno, e oltre la soglia di
   scroll la barra diventa piena — in entrambi i casi devono comparire i colori
   scuri di default dei nav-link (compresi :hover/:focus/.active). La vecchia
   regola larga revocava solo il colore BASE, e lasciava :hover/:focus/.active
   bianco su bianco nel menu mobile aperto (mascherato da scrollata solo per un
   caso di ordine sorgente a parità di specificità). */
@media (min-width: 992px) {
    .farsistrada-navbar-transparent:not(.farsistrada-navbar-scrolled) .navbar-brand,
    .farsistrada-navbar-transparent:not(.farsistrada-navbar-scrolled) .nav-link { color: var(--farsistrada-white); }
    .farsistrada-navbar-transparent:not(.farsistrada-navbar-scrolled) .nav-link:hover,
    .farsistrada-navbar-transparent:not(.farsistrada-navbar-scrolled) .nav-link:focus,
    .farsistrada-navbar-transparent:not(.farsistrada-navbar-scrolled) .nav-link.active,
    .farsistrada-navbar-transparent:not(.farsistrada-navbar-scrolled) .navbar-nav > .current-menu-ancestor > .nav-link { color: var(--farsistrada-white); }
}

/* Scrollata oltre la soglia: torna alla navbar piena e smerigliata. Solo lo
   sfondo — i colori di nav-link e brand ricadono sulle regole di navbar piena
   qui sopra. background-color porta !important per battere la .bg-transparent di
   Bootstrap. */
.farsistrada-navbar-transparent.farsistrada-navbar-scrolled {
    background-color: color-mix(in oklab, var(--farsistrada-paper) 94%, transparent) !important;
    background-image: none;
    border-bottom-color: color-mix(in oklab, var(--farsistrada-line) 60%, transparent);
    box-shadow: var(--farsistrada-shadow-sm);
}

/* Sotto il breakpoint di expand: navbar sempre piena anche in home (solo sfondo). */
@media (max-width: 991.98px) {
    .farsistrada-navbar-transparent {
        background-color: color-mix(in oklab, var(--farsistrada-paper) 94%, transparent) !important;
        background-image: none;
        border-bottom-color: color-mix(in oklab, var(--farsistrada-line) 60%, transparent);
    }
}

/* Scambio del logo sulla home trasparente: il logo chiaro (logo_footer "versione
   chiara") compare sopra l'hero scuro; il custom-logo di default torna quando la
   navbar diventa piena allo scroll. Solo da lg in su — sotto il breakpoint la
   navbar è piena (sfondo chiaro), quindi deve comparire il logo di default (scuro).
   Lo scambio è fra i due link, non fra le due immagini: .custom-logo-link è la
   riga flex alta quanto la barra (blocco fixed_top), e lasciarla al suo posto
   con l'immagine spenta manderebbe il logo chiaro a capo sotto di lei. Il link
   chiaro prende la stessa riga, così la barra resta nel token in entrambi gli
   stati. */
.farsistrada-navbar .farsistrada-logo-light-link { display: none; }
@media (min-width: 992px) {
    .farsistrada-navbar-transparent:not(.farsistrada-navbar-scrolled) .custom-logo-link { display: none; }
    .farsistrada-navbar-transparent:not(.farsistrada-navbar-scrolled) .farsistrada-logo-light-link {
        display: flex;
        align-items: center;
        height: calc(var(--farsistrada-navbar-h) - 1px - 2 * var(--bs-navbar-padding-y));
    }
}

/* Brand e toggler stanno sulla stessa riga anche con un nome del sito lungo: il
   brand si accorcia coi puntini di sospensione. La riga della navbar va a capo
   (flex-wrap) prima di restringere: con la base 0 il brand non la fa mai andare
   a capo, poi cresce fino alla propria larghezza e non oltre. Il fattore di
   crescita alto gli dà lo spazio libero prima che al menu espanso, che prende il
   resto: alla pari, un menu lungo gli toglierebbe metà dello spazio che gli
   serve. Senza, sotto il breakpoint un nome lungo uscirebbe dallo schermo e il
   toggler finirebbe su una seconda riga della barra. */
.farsistrada-navbar .navbar-brand {
    flex: 1000 1 0;
    min-width: 0;
    max-width: max-content;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Azioni della barra (farsistrada_navbar_bar_actions), accanto al toggler.
   La riga della navbar distribuisce lo spazio libero fra i suoi elementi
   (justify-content: space-between): senza il margine automatico il contenuto
   starebbe a metà fra brand e toggler. Non si restringe: a stringere è il
   brand, che ha base 0, e il toggler resta sulla riga. Dove la riga si espande
   (sopra il breakpoint, fuori dal layout offcanvas) il menu prende lo spazio
   libero e il margine vale 0: il contenuto sta fra brand e menu. Lo spazio verso
   il toggler, o verso il menu, lo porta ogni elemento agganciato: uno nascosto
   (d-{bp}-none) non ha box né margine, e la riga resta com'è senza aggancio. */
.farsistrada-navbar .farsistrada-navbar-bar-actions {
    display: flex;
    flex: none;
    align-items: center;
    margin-left: auto;
}
.farsistrada-navbar .farsistrada-navbar-bar-actions > * {
    margin-right: 0.5rem;
}

/* Toggler hamburger: reset senza bordo e morph in X allo stato aperto.
   CSS puro sul markup Bootstrap standard (.navbar-toggler > .navbar-toggler-icon);
   lo stato aperto è guidato da [aria-expanded="true"], che il plugin Collapse
   mantiene sul bottone. Nel layout offcanvas il selettore non matcha mai (ASM-47:
   Bootstrap non mantiene l'attributo sul trigger dell'Offcanvas) e il pannello ha
   già il proprio .btn-close: lì restano attivi solo reset e focus. */
.farsistrada-navbar .navbar-toggler {
    position: relative;
    width: 1.875rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-appearance: none;
            appearance: none;
}

/* Inseparabile dalla regola sopra. Azzerare il focus ring di Bootstrap senza
   ripristinarlo per la tastiera lascia il bottone senza focus visibile (WCAG
   2.4.7), e il difetto non si vede in uno screenshot dello stato di riposo:
   :focus-visible mostra l'anello solo alla tastiera, il tap col puntatore no. */
.farsistrada-navbar .navbar-toggler:focus {
    outline: 0;
    box-shadow: none;
}
.farsistrada-navbar .navbar-toggler:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Le tre barre: quella centrale è lo span icona (l'SVG di Bootstrap azzerato con
   background-image: none), le altre due sono i suoi pseudo-elementi. currentColor
   segue lo schema della navbar senza custom property di progetto. */
.farsistrada-navbar .navbar-toggler-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.375rem;
    height: 0.125rem;
    margin-top: -0.0625rem;
    margin-left: -0.6875rem;
    background-color: currentColor;
    background-image: none;
    transition: transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.farsistrada-navbar .navbar-toggler-icon::before,
.farsistrada-navbar .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 1.375rem;
    height: 0.125rem;
    background-color: currentColor;
}
.farsistrada-navbar .navbar-toggler-icon::before {
    top: -0.4375rem;
    transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.farsistrada-navbar .navbar-toggler-icon::after {
    bottom: -0.4375rem;
    transition: bottom 0.075s 0.12s ease,
        transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* Aperto: la barra centrale ruota, quella alta sfuma, quella bassa chiude la X.
   Attivo anche sotto prefers-reduced-motion: WCAG 2.3.3 mira ai trigger
   vestibolari, non a un feedback di stato di 22px in 75ms (stessa lettura dello
   scroll-reveal di Pattern #5). */
.farsistrada-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: rotate(45deg);
}
.farsistrada-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.farsistrada-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease,
        transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Delta di progetto sopra il toggler di Factory. Tre sole differenze, nessun
   cambio di markup né di stato: (1) tinta piena del brand invece di currentColor,
   che segue --bs-navbar-color e quindi rende al 65%; (2) anello di focus nel blu
   del brand con il radius di sistema; (3) barre a riposo sfalsate - la alta corta
   a destra, la bassa corta a sinistra - che si pareggiano su hover e da aperte.
   La (3) è carattere, non meccanismo: sta qui e non nella skill. */
.farsistrada-navbar .navbar-toggler:focus-visible {
    outline-color: var(--farsistrada-blue);
    border-radius: var(--farsistrada-radius-xs);
}
.farsistrada-navbar .navbar-toggler-icon,
.farsistrada-navbar .navbar-toggler-icon::before,
.farsistrada-navbar .navbar-toggler-icon::after {
    background-color: var(--farsistrada-ink);
}
.farsistrada-navbar .navbar-toggler-icon::before {
    width: 0.9625rem;
    transition: top 0.075s 0.12s ease, opacity 0.075s ease, width 0.15s ease-in-out;
}
.farsistrada-navbar .navbar-toggler-icon::after {
    left: auto;
    right: 0;
    width: 0.9625rem;
    transition: bottom 0.075s 0.12s ease,
        transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19),
        width 0.15s ease-in-out;
}
.farsistrada-navbar .navbar-toggler:hover .navbar-toggler-icon::before,
.farsistrada-navbar .navbar-toggler:hover .navbar-toggler-icon::after,
.farsistrada-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
.farsistrada-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    width: 1.375rem;
}
.farsistrada-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transition: bottom 0.075s ease,
        transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1),
        width 0.15s ease-in-out;
}

/* Terzo livello: la voce di secondo livello con figli (li.dropend) apre il
   proprio .dropdown-menu, che theme.js mostra con .show. Sotto il breakpoint,
   e sempre nel layout offcanvas, Bootstrap rende statici i dropdown della
   navbar: il terzo livello è una sottolista rientrata dentro il pannello del
   secondo, senza un riquadro proprio, e il caret, ruotato, punta verso il
   basso, dove la lista si apre. */
.farsistrada-navbar .dropdown-menu .dropdown-menu {
    margin-left: var(--bs-dropdown-item-padding-x);
    padding-top: 0;
    padding-bottom: 0;
    background-color: transparent;
    border: 0;
}
.farsistrada-navbar .dropdown-menu .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.farsistrada-navbar .dropdown-menu .dropend > .dropdown-toggle::after {
    margin-left: auto;
    transform: rotate(90deg);
}

/* .dropend è position: relative (Bootstrap) e si dipinge sopra le voci non
   posizionate: con il toggle di flyout acceso (ramo corrente, flyout aperto) il
   suo sfondo copriva il lato basso dell'anello di focus della voce sopra. La
   voce col focus sale sopra le sorelle. */
.farsistrada-navbar .dropdown-menu .dropdown-item:focus-visible {
    position: relative;
    z-index: 1;
}

/* Sopra il breakpoint il terzo livello è un flyout accanto al dropdown, con la
   prima voce allineata al toggle e il riquadro del dropdown Bootstrap. A
   sinistra (.dropstart, messo da theme.js) se a destra uscirebbe dallo
   schermo. */
@media (min-width: 992px) {
    .farsistrada-navbar.navbar-expand-lg .dropdown-menu .dropdown-menu {
        top: calc(-1 * (var(--bs-dropdown-padding-y) + var(--bs-dropdown-border-width)));
        left: 100%;
        margin-left: var(--bs-dropdown-spacer);
        padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
        background-color: var(--bs-dropdown-bg);
        border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    }
    .farsistrada-navbar.navbar-expand-lg .dropdown-menu .dropstart > .dropdown-menu {
        right: 100%;
        left: auto;
        margin-right: var(--bs-dropdown-spacer);
        margin-left: 0;
    }
    .farsistrada-navbar.navbar-expand-lg .dropdown-menu .dropend > .dropdown-toggle::after {
        transform: none;
    }
}

/* Ramo della pagina corrente. .active e aria-current="page" stanno sulla sola
   voce corrente; ogni antenato porta current-menu-ancestor sul <li>. Il toggle di
   primo livello prende il colore attivo della navbar, quello di secondo livello
   lo sfondo di hover del dropdown, lo stesso di un flyout aperto: il percorso
   fino alla voce resta leggibile senza una seconda voce .active. */
.farsistrada-navbar .navbar-nav > .current-menu-ancestor > .nav-link {
    color: var(--bs-navbar-active-color);
}
.farsistrada-navbar .dropdown-menu > .current-menu-ancestor > .dropdown-item,
.farsistrada-navbar .dropdown-menu .dropdown-toggle.show {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}

/* Delta di progetto sopra il ramo della Factory: il toggle di primo livello che
   contiene la pagina corrente ("Risorse" su /libri/) prende l'ink della voce
   attiva del design (.nav-link.active, sopra), non il nero di
   --bs-navbar-active-color. Senza filetto: apre un menu, non è la
   destinazione. */
.farsistrada-navbar .navbar-nav > .current-menu-ancestor > .nav-link {
    color: var(--farsistrada-ink);
}

/* Mobile (navbar compressa) — trattamento dei sottomenu dropdown. La card
   fluttuante del desktop (bordo + raggio + ombra) si legge come un pannello
   staccato dentro il menu mobile verticale; sotto il breakpoint di expand viene
   appiattita.
   [ALT C — indice editoriale: prefisso contatore mono + righe hairline + reveal strutturale] */
@media (max-width: 991.98px) {
    .farsistrada-navbar .dropdown-menu {
        counter-reset: farsistrada-submenu;
        margin: 4px 0 8px 0.25rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .farsistrada-navbar .dropdown-item {
        display: flex;
        align-items: baseline;
        gap: 0.7rem;
        padding: 10px 13px 10px 0.75rem;
        border-bottom: 1px solid var(--farsistrada-line);
        transition: color 0.15s ease;
    }
    .farsistrada-navbar .dropdown-menu > li:last-child .dropdown-item {
        border-bottom: 0;
    }
    /* L'etichetta di gruppo del desktop porta il proprio hairline; qui ogni riga
       finisce già con uno, quindi l'etichetta lascia cadere il bordo, che
       altrimenti impilerebbe due filetti adiacenti. Il padding sinistro segue le
       righe appiattite, non il pannello desktop, così etichetta e contatori
       condividono un bordo. */
    .farsistrada-navbar .dropdown-header {
        margin-top: 14px;
        padding: 0 13px 6px 0.75rem;
        border-top: 0;
    }
    .farsistrada-navbar .dropdown-menu > li:first-child .dropdown-header {
        margin-top: 4px;
    }
    /* Indice mono dell'occhiello (01, 02, 03…) generato dal counter: nessun cambio di markup. */
    .farsistrada-navbar .dropdown-item::before {
        counter-increment: farsistrada-submenu;
        content: counter(farsistrada-submenu, decimal-leading-zero);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        font-variant-numeric: tabular-nums;
        color: var(--farsistrada-blue);
    }
    .farsistrada-navbar .dropdown-item:hover,
    .farsistrada-navbar .dropdown-item:focus,
    .farsistrada-navbar .dropdown-item.active {
        background: transparent;
        color: var(--farsistrada-blue);
    }
    /* Reveal strutturale — le righe salgono al loro posto in sequenza (calmo,
       comunica l'apertura). L'opacità sempre (sicura sotto reduced-motion); il
       sollevamento solo quando è concesso. */
    .farsistrada-navbar .dropdown-menu.show > li {
        animation: farsistrada-submenu-fade 0.3s ease both;
    }
    .farsistrada-navbar .dropdown-menu.show > li:nth-child(2) { animation-delay: 0.06s; }
    .farsistrada-navbar .dropdown-menu.show > li:nth-child(3) { animation-delay: 0.12s; }
    .farsistrada-navbar .dropdown-menu.show > li:nth-child(4) { animation-delay: 0.18s; }
    .farsistrada-navbar .dropdown-menu.show > li:nth-child(5) { animation-delay: 0.24s; }
}
/* Il sollevamento si aggiunge solo quando il movimento è concesso (dottrina
   design-remapping §3.29: con reduced-motion si degrada al solo fade, non si
   disattiva mai il reveal). */
@media (max-width: 991.98px) and (prefers-reduced-motion: no-preference) {
    .farsistrada-navbar .dropdown-menu.show > li {
        animation-name: farsistrada-submenu-rise;
    }
}
@keyframes farsistrada-submenu-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes farsistrada-submenu-rise {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===================================================================
   Ritmo delle sezioni e testa di sezione (§ design).
   =================================================================== */
.farsistrada-section,
.farsistrada-metodo,
.farsistrada-services,
.farsistrada-academy,
.farsistrada-lead-magnet-section { position: relative; }

.section-head {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    margin-bottom: 64px;
    align-items: end;
}
.section-head h2 { margin-top: 16px; }
.section-head .right { color: var(--farsistrada-ink-soft); }
@media (max-width: 860px) {
    .section-head { grid-template-columns: 1fr; gap: 24px; }
}

/* ===================================================================
   Ritmo delle bande della homepage.
   L'export lo porta come blocco di override body.home-v2 ("ritmo di sfondi
   alternati, contrasto accentuato"): la home alterna bande bianche e tinte in
   modo più netto del default del sito. WordPress emette già
   .page-template-page-home sul <body>, quindi il ritmo si aggancia a quella e non
   serve nessuna classe di tema. Lo scope conta: .farsistrada-clients la riusa
   archive-testimonial.php, che deve tenere lo sfondo carta.
   Le due bande tinte usano i token --farsistrada-band-*, condivisi con la pagina
   Metodo, che segue lo stesso ritmo.
   =================================================================== */
.page-template-page-home .farsistrada-clients {
    background: var(--farsistrada-white);
    border-top-color: var(--farsistrada-line);
    border-bottom-color: var(--farsistrada-line);
}
.page-template-page-home .farsistrada-metodo {
    background: var(--farsistrada-band-blue);
    border-top: 1px solid var(--farsistrada-band-blue-line);
    border-bottom: 1px solid var(--farsistrada-band-blue-line);
}
.page-template-page-home .farsistrada-services {
    background: var(--farsistrada-white);
    border-top-color: var(--farsistrada-line);
    border-bottom-color: var(--farsistrada-line);
}
.page-template-page-home .farsistrada-testimonianze {
    background: var(--farsistrada-band-grey);
    border-top: 1px solid var(--farsistrada-band-grey-line);
    border-bottom: 1px solid var(--farsistrada-band-grey-line);
}
.page-template-page-home .farsistrada-lead-magnet-section {
    background: var(--farsistrada-white);
}

/* ===================================================================
   Hero (video background). Autoplay always (§6) — no reduced-motion gate.
   =================================================================== */
.farsistrada-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Altezza BOUNDED: min-height clamp(pavimento, frazione-vh, tetto) — design-remapping §6.
       La banda resta "a viewport" tra pavimento e tetto, ma con min-height CRESCE sul contenuto
       invece di tagliarlo (niente clip su schermi corti o frazioni basse), e il tetto evita la
       banda cavernosa sui monitor grandi. "mezzo" = default. Il video segue via inset:0. */
    min-height: clamp(380px, 50vh, 520px);
    /* Lo spazio in alto tiene il contenuto libero dalla navbar fissa; il pavimento di
       96px è quello del design, e bilancia quello spazio così il
       blocco si legge centrato invece che sbilanciato in basso. */
    padding: calc(var(--farsistrada-navbar-h) + 14px) 0 96px;
    border-bottom: 1px solid var(--farsistrada-line-soft);
    /* Fallback di brand mostrato finché il video non carica o se manca. */
    background:
        radial-gradient(70% 90% at 78% 12%, color-mix(in oklab, var(--farsistrada-blue) 55%, transparent) 0%, transparent 62%),
        linear-gradient(155deg, var(--farsistrada-blue-deep) 0%, #07344b 55%, #022235 100%);
}
/* Altezza banda scelta in editor (button_group hero_altezza — design-remapping §6).
   Ogni livello è un min-height clamp bounded: pavimento per gli schermi corti, frazione del
   viewport in mezzo, tetto contro il cavernoso. "pieno" = schermo pieno (100dvh). */
.farsistrada-hero[data-hero-height="due-terzi"]   { min-height: clamp(460px, 66vh, 620px); }
.farsistrada-hero[data-hero-height="quasi-pieno"] { min-height: clamp(560px, 86vh, 800px); }
.farsistrada-hero[data-hero-height="pieno"]       { min-height: 100dvh; }
.farsistrada-hero .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.farsistrada-hero .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(2, 34, 53, 0.86) 0%, rgba(2, 34, 53, 0.62) 46%, rgba(2, 34, 53, 0.30) 100%),
        linear-gradient(0deg, rgba(2, 34, 53, 0.55) 0%, transparent 45%);
}
.farsistrada-hero .hero-inner { position: relative; z-index: 2; }
.farsistrada-hero .hero-inner > div { max-width: 760px; }
.farsistrada-hero h1 { color: var(--farsistrada-white); margin-top: 18px; }
.farsistrada-hero h1 .accent { color: var(--farsistrada-sky); font-weight: 800; }
.farsistrada-hero .lead { color: rgba(255, 255, 255, 0.82); margin-top: 26px; max-width: 600px; }
.farsistrada-hero .hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
@media (max-width: 991.98px) {
    .farsistrada-hero,
    .farsistrada-hero[data-hero-height] { min-height: 0; height: auto; padding: 56px 0; } /* mobile = altezza-contenuto (navbar solida, body con offset) */
}

/* Riga delle statistiche — DENTRO l'hero, su fondo scuro sopra il video
   (design-remapping §6). Con min-height la banda cresce per contenerle sui passi
   corti invece di tagliarle, così i tre numeri di risultato vivono sotto le CTA
   come parte della dichiarazione dell'hero. */
.farsistrada-hero .hero-stats-row {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 40px;
    /* Hairline che stacca i numeri dalle CTA qui sopra, come nel design.
       Senza, la riga si leggeva come una terza fila di bottoni. */
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
/* Allineata a sinistra sotto le CTA, non centrata: l'intero blocco hero è
   impaginato a sinistra. */
.farsistrada-hero .hero-stats-row .stat { display: flex; flex-direction: column; gap: 2px; }
.farsistrada-hero .hero-stats-row .val {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    color: var(--farsistrada-sky);
}
.farsistrada-hero .hero-stats-row .lab {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 600px) {
    .farsistrada-hero .hero-stats-row { gap: 32px; }
}

/* ===================================================================
   Clienti — griglia statica di loghi. L'intero
   muro è visibile in un colpo solo: niente autoplay, niente controlli. Sostituisce
   il muro Swiper, che era stato costruito contro un export più vecchio la cui
   banda era un marquee; l'export attuale ha lasciato cadere entrambi a favore di
   una semplice griglia a 4 colonne.
   =================================================================== */
.farsistrada-clients {
    padding: 38px 0;
    border-top: 1px solid var(--farsistrada-line-soft);
    border-bottom: 1px solid var(--farsistrada-line-soft);
    background: var(--farsistrada-paper);
}
.farsistrada-clients .clients-label {
    display: block;
    margin-bottom: 22px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--farsistrada-muted);
}
/* Layout e breakpoint appartengono a Bootstrap: home-clienti.php porta
   `row row-cols-2 row-cols-md-4`, quindi il numero di colonne e il punto di
   collasso sono token del framework, non valori duplicati qui. Solo le gutter sono
   dato di tema, e si impostano attraverso la API di variabili di Bootstrap stesso,
   così resta il framework a essere owner di come vengono applicate. */
.farsistrada-clients .clients-grid {
    --bs-gutter-x: 44px;
    --bs-gutter-y: 30px;
}
.farsistrada-clients .client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    overflow: hidden;
}
/* Il wrapper della card e il suo link esterno facoltativo devono riempire la
   cella, altrimenti la width:100% dell'img si risolverebbe sul box dell'immagine
   invece che sulla colonna. */
.farsistrada-card-cliente { width: 100%; height: 100%; }
.farsistrada-card-cliente > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.farsistrada-client-logo-img {
    width: 100%;
    height: 46px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.62;
    /* I loghi arrivano come PNG su una piastra bianca; multiply fa cadere la piastra
   dentro la banda. */
    mix-blend-mode: multiply;
    transition: opacity .25s ease, filter .25s ease;
}
.farsistrada-card-cliente:hover .farsistrada-client-logo-img { filter: grayscale(0); opacity: 1; }
/* Fallback testuale reso da card-cliente.php quando non c'è nessun logo caricato. */
.farsistrada-card-cliente .client {
    font-weight: 800;
    font-size: 22px;
    line-height: 1.1;
    text-align: center;
    color: var(--farsistrada-ink);
    letter-spacing: -0.01em;
    opacity: 0.55;
    transition: opacity .2s ease, color .2s ease;
}
.farsistrada-card-cliente:hover .client { opacity: 1; color: var(--farsistrada-blue); }
/* "e altri clienti" — maiuscolo, come lo rende il mockup. L'export dichiara la
   classe ma non le dà nessuna regola propria, quindi il resto segue l'idioma di
   micro-tipografia della banda stessa (.clients-label qui sopra): maiuscolo
   spaziato a una dimensione subordinata all'etichetta di sezione, in blu link
   invece che smorzato. */
.farsistrada-clients .clients-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    color: var(--farsistrada-blue);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}
.farsistrada-clients .clients-more:hover { color: var(--farsistrada-blue-deep); }
.farsistrada-clients .clients-more svg { transition: transform .2s ease; }
.farsistrada-clients .clients-more:hover svg { transform: translateX(4px); }

/* ===================================================================
   Metodo — intestazione + fila di passi numerati (01 ── 02 ── 03). Il fondo
   tinto full-bleed resta: è il contrappunto chiaro/tinta del ritmo di pagina.
   La linea parte dal numero e si ferma prima del successivo (padding-right del
   passo); l'ultimo passo non ne ha. La hairline è il blu di brand velato: i
   token chiari (blue-soft, band-blue-line) sparirebbero sulla banda tinta.
   Sotto 860px la fila diventa una colonna e la linea si fa verticale.
   =================================================================== */
.farsistrada-metodo { background: var(--farsistrada-blue-tint); }
.metodo-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.metodo-step { display: flex; flex-direction: column; gap: 14px; padding-right: 20px; }
.metodo-step-num {
    display: flex; align-items: center; gap: 20px;
    font-family: var(--farsistrada-font-sans); font-weight: 800; font-size: 30px; line-height: 1;
    letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--farsistrada-blue);
}
.metodo-step-num::after {
    content: ""; flex: 1; height: 1px;
    background: color-mix(in srgb, var(--farsistrada-blue) 35%, transparent);
}
.metodo-step:last-child .metodo-step-num::after { display: none; }
.metodo-step-label {
    margin: 0; max-width: 24ch;
    font-family: var(--farsistrada-font-sans); font-weight: 700; font-size: 18px; line-height: 1.35;
    color: var(--farsistrada-ink);
}
@media (max-width: 860px) {
    .metodo-steps { grid-auto-flow: row; }
    .metodo-step {
        position: relative; display: grid; grid-template-columns: 40px 1fr; align-items: baseline;
        column-gap: 16px; padding: 0 0 40px;
    }
    .metodo-step:last-child { padding-bottom: 0; }
    .metodo-step-num { display: block; font-size: 24px; text-align: center; }
    .metodo-step-num::after { display: none; }
    .metodo-step:not(:last-child)::before {
        content: ""; position: absolute; left: 20px; top: 34px; bottom: 6px; width: 1px;
        background: color-mix(in srgb, var(--farsistrada-blue) 35%, transparent);
    }
}
/* Inline emphasis (render_inline_heading): brand-term italic+blue — design-remapping §6 */

/* ===================================================================
   Academy — high-impact dark band + areas panel.
   =================================================================== */
.farsistrada-academy {
    background: linear-gradient(135deg, #0A557E 0%, var(--farsistrada-blue-deep) 52%, #022E42 100%);
    color: var(--farsistrada-white);
    border-top: 1px solid var(--farsistrada-line-soft);
    border-bottom: 1px solid var(--farsistrada-line-soft);
    position: relative;
    overflow: hidden;
}
.farsistrada-academy::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.4px);
    background-size: 22px 22px;
    opacity: 0.5;
    pointer-events: none;
}
/* Secondo strato di overlay del design: un bagliore cielo nell'angolo
   in alto a destra più una trama diagonale fine. Senza, la banda è un gradiente
   piatto con dei punti. */
.farsistrada-academy::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(70% 90% at 100% 0%, rgba(143, 214, 255, 0.18), transparent 60%),
        repeating-linear-gradient(135deg, transparent 0 24px, rgba(255, 255, 255, 0.04) 24px 25px);
    pointer-events: none;
}
.farsistrada-academy .container { position: relative; z-index: 1; }
.academy-grid { display: grid; grid-template-columns: 1.25fr 0.95fr; gap: 64px; align-items: center; }
.farsistrada-academy h2 { color: var(--farsistrada-white); margin-top: 18px; }
.academy-intro > p { color: rgba(255, 255, 255, 0.82); font-size: 19px; line-height: 1.55; margin-top: 24px; max-width: 56ch; }
.academy-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 32px; }
/* Il modulo prende il posto della CTA nella stessa banda (blog): stessa aria sopra,
   e una misura che non lascia correre i campi per tutta la colonna. */
.academy-form { margin-top: 32px; max-width: 560px; }
.academy-note { font-size: 12px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.62); max-width: 24ch; line-height: 1.5; }
.instructor { display: flex; align-items: center; gap: 16px; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.instructor .avatar {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: 0.02em;
    color: var(--farsistrada-sky);
}
.instructor .meta strong { display: block; font-size: 15.5px; color: var(--farsistrada-white); font-weight: 700; }
.instructor .meta span { display: block; margin-top: 3px; font-size: 13px; color: rgba(255, 255, 255, 0.66); line-height: 1.45; }
.academy-areas {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--farsistrada-radius-lg);
    padding: 26px 26px 18px;
    /* Il pannello è traslucido sopra il pattern a punti: è la sfocatura a farlo
       leggere come vetro invece che come un rettangolo tinto. */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.academy-areas .areas-head { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); display: block; margin-bottom: 10px; }
.area-row { display: flex; align-items: center; gap: 14px; padding: 16px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); transition: padding-left .2s ease; }
.area-row:hover { padding-left: 12px; }
.area-row .a-name { font-weight: 700; font-size: 16.5px; color: var(--farsistrada-white); flex: 1; }
.area-row .a-name small { display: block; font-weight: 400; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-top: 4px; }
.area-row .a-arrow { width: 16px; height: 16px; color: rgba(255, 255, 255, 0.5); transition: transform .2s ease, color .2s ease; flex: 0 0 auto; }
.area-row:hover .a-arrow { transform: translateX(4px); color: var(--farsistrada-sky); }
.area-row.all { border-bottom: 0; margin-top: 4px; }
.area-row.all .a-name { color: var(--farsistrada-sky); font-size: 14.5px; }
@media (max-width: 980px) { .academy-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ===================================================================
   Servizi — griglia di service-card (dentro la .row row-cols-md-3 g-4 del loop).
   =================================================================== */
.farsistrada-services { background: var(--farsistrada-cream); border-top: 1px solid var(--farsistrada-line-soft); border-bottom: 1px solid var(--farsistrada-line-soft); }
.service-card {
    position: relative;
    background: var(--farsistrada-paper);
    border: 1px solid var(--farsistrada-line-soft);
    border-radius: var(--farsistrada-radius-lg);
    padding: 30px;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
}
.service-card:hover { transform: translateY(-4px); border-color: var(--farsistrada-blue); }
.service-card .visual {
    height: 140px;
    border-radius: var(--farsistrada-radius);
    margin-bottom: 22px;
    background: var(--farsistrada-blue-deep);
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.service-card .visual .visual-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.service-card:hover .visual .visual-photo { transform: scale(1.04); }
.service-card .visual.has-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--farsistrada-photo-scrim);
}
.service-card .visual .badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--farsistrada-radius-xs);
    background: transparent;
}
.service-card h3 { margin-bottom: 8px; }
.service-card p { color: var(--farsistrada-ink-soft); }
.service-card .footer-row {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--farsistrada-line-soft);
}
.service-card .kind { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--farsistrada-muted); }

/* ===================================================================
   Tessere di categoria — la banda "Servizi" della homepage naviga per categoria,
   quindi la griglia qui non è .service-card ma la tessera fotografica del design
   (banda 04 Servizi della home). .service-card qui sopra resta: è il componente
   proprio dell'archivio.
   La velatura NON è --farsistrada-photo-scrim: quella è un lavaggio blue-deep a due
   stop per le card il cui testo sta fuori dall'immagine; questa è una rampa a tre
   stop che resta trasparente per il 30% in alto, perché l'etichetta sta SOPRA la
   foto.
   =================================================================== */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 8px;
}
.cat-card {
    position: relative;
    display: block;
    min-height: 380px;
    border-radius: var(--farsistrada-radius-lg);
    overflow: hidden;
    border: 1px solid var(--farsistrada-line);
    /* Colore di fondo, non decorazione: una categoria i cui servizi non hanno
       immagine in evidenza si rende come tessera blu profondo invece che come
       velatura sopra il nulla. */
    background: var(--farsistrada-blue-deep);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px -20px rgba(3, 69, 99, 0.45);
}
.cat-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.cat-card:hover .cat-photo {
    transform: scale(1.05);
}
.cat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 46, 66, 0) 30%, rgba(3, 46, 66, 0.35) 60%, rgba(2, 30, 42, 0.9) 100%);
}
.cat-body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px 30px;
}
.cat-eyebrow {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.cat-body h3 {
    color: var(--farsistrada-white);
    font-size: 30px;
    margin: 8px 0 16px;
    letter-spacing: -0.01em;
}
.cat-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 10px 20px;
    border-radius: var(--farsistrada-radius-xs);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--farsistrada-white);
    font-weight: 600;
    font-size: 14px;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.cat-cta svg {
    width: 14px;
    height: 14px;
}
.cat-card:hover .cat-cta {
    background: var(--farsistrada-white);
    border-color: var(--farsistrada-white);
    color: var(--farsistrada-blue-deep);
}
@media (max-width: 860px) {
    .cat-grid { grid-template-columns: 1fr; }
    .cat-card { min-height: 260px; }
}

/* ===================================================================
   Processo — 3 bordered steps. Non più una banda della homepage: da quando la
   posizione 06 rende le testimonianze, l'unico consumatore è single-servizio.php
   ("Come lavoriamo" dentro la scheda servizio). Le regole restano per quello; la
   classe di banda .farsistrada-processo e il suo fondo tinto sono stati rimossi
   con il partial home-processo.
   =================================================================== */
.process-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--farsistrada-line); }
.process-step { padding: 36px 26px; border-right: 1px solid var(--farsistrada-line); display: flex; flex-direction: column; gap: 14px; }
.process-step:last-child { border-right: 0; }
.process-step .num { font-size: 12px; letter-spacing: 0.16em; color: var(--farsistrada-blue); text-transform: uppercase; }
.process-step h3 { color: var(--farsistrada-ink); }
.process-step p { margin: 0; }
@media (max-width: 880px) {
    .process-list { grid-template-columns: 1fr; }
    .process-step { border-right: 0; border-bottom: 1px solid var(--farsistrada-line); }
}

/* ===================================================================
   Testimonianze — banda 06 della homepage.
   Due aggiunte di cui il design non ha bisogno, perché non poggia sul Reboot di
   Bootstrap: .q-text toglie il margine di 1rem del paragrafo che litigherebbe con
   il gap del flex, e .quote-card elimina la sottolineatura dell'ancora.
   =================================================================== */
/* Il design abbassa la testa di sezione di questa banda dai 64px standard a 28px. */
.section-head-tight { margin-bottom: 28px; }

.quote-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.quote-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px 30px;
    background: var(--farsistrada-white);
    border: 1px solid var(--farsistrada-line);
    border-radius: var(--farsistrada-radius-lg);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.quote-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -20px rgba(3, 69, 99, 0.35);
    border-color: var(--farsistrada-blue-soft);
}
.quote-card .q-mark {
    font-size: 52px;
    line-height: 0.5;
    color: var(--farsistrada-blue-soft);
    height: 26px;
}
.quote-card .q-text {
    margin: 0;
    color: var(--farsistrada-ink);
    font-size: 16.5px;
    line-height: 1.55;
    text-wrap: pretty;
}
.quote-card .q-cite {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--farsistrada-line-soft);
}
.quote-card .q-cite b {
    font-weight: 700;
    font-size: 15.5px;
    color: var(--farsistrada-ink);
}
.quote-card .q-cite span {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--farsistrada-muted);
}
@media (max-width: 860px) {
    .quote-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   Lead magnet (mini-guida): copertina reale (.guide-cover) o, se manca, guide-mock.
   =================================================================== */
.lead-magnet {
    background: var(--farsistrada-blue);
    color: var(--farsistrada-white);
    border-radius: var(--farsistrada-radius-lg);
    padding: 64px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.lead-magnet h2 { color: var(--farsistrada-white); margin-top: 16px; }
.lead-magnet p { color: rgba(255, 255, 255, 0.78); margin-top: 18px; }
.lead-magnet .eyebrow { color: var(--farsistrada-sky); }
.lead-magnet .eyebrow::before { background: var(--farsistrada-sky); }
.lead-magnet .form { margin-top: 18px; }
.guide-mock {
    position: relative;
    aspect-ratio: 3 / 4;
    max-width: 280px;
    margin-left: auto;
    background: var(--farsistrada-paper);
    border-radius: var(--farsistrada-radius);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.4), 0 6px 12px rgba(0, 0, 0, 0.18);
    padding: 28px 22px;
    transform: rotate(-3deg);
    display: flex;
    flex-direction: column;
    color: var(--farsistrada-ink);
    border: 1px solid var(--farsistrada-line-soft);
}
.guide-mock .stripe { width: 36px; height: 4px; background: var(--farsistrada-blue); margin-bottom: 22px; }
.guide-mock .mini-eyebrow { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--farsistrada-muted); }
.guide-mock h4 { font-size: 22px; line-height: 1.1; margin-top: 6px; color: var(--farsistrada-ink); font-weight: 800; }
.guide-mock .lines { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.guide-mock .lines span { height: 6px; background: var(--farsistrada-cream-deep); border-radius: 2px; }
.guide-mock .lines span:nth-child(2) { width: 80%; }
.guide-mock .lines span:nth-child(3) { width: 60%; }
.guide-mock .corner-fold {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, transparent 50%, var(--farsistrada-cream-deep) 50%);
    border-bottom-left-radius: 6px;
}
/* Copertina reale (guida_copertina): nessuna carta, bordo o rotazione, perché
   l'immagine può essere già un mockup 3D. drop-shadow segue la trasparenza del
   PNG; su una copertina piatta resta l'ombra di un oggetto appoggiato. */
.guide-cover { margin: 0 0 0 auto; max-width: 300px; }
.guide-cover-img {
    display: block; width: 100%; height: auto;
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.35)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
}
@media (max-width: 880px) {
    .lead-magnet { grid-template-columns: 1fr; padding: 44px 32px; }
    .guide-mock { margin: 0 auto; }
    .guide-cover { margin: 0 auto; max-width: 240px; }
}

/* ===================================================================
   Footer — blocco della Factory (theme-bootstrap, Pattern #1): look di
   default del markup di footer.php e footer-menu.php. Rigenerarlo vuol dire
   sostituirlo qui, sopra lo strato di design del footer che segue.
   =================================================================== */
/* Footer: look di default di footer.php e footer-menu.php. Selettori di una
   classe e nessun !important: lo strato di design del progetto, che in questo
   file viene dopo i blocchi della Factory, li sovrascrive con un selettore
   dello stesso peso. */

/* Footer in fondo alla finestra su una pagina corta: il body è una colonna
   flex e <main> ne prende lo spazio libero (header.php); qui il body è alto
   almeno quanto la finestra. Il padding della navbar fissa sta dentro
   l'altezza (box-sizing di Bootstrap). WP sposta il documento sotto la admin
   bar col margin-top di html: senza la sottrazione chi è loggato scorrerebbe
   una pagina corta dell'altezza della barra; senza admin bar la variabile non
   c'è e vale 0. 100dvh segue la barra degli indirizzi del browser mobile;
   100vh la precede per i browser senza dvh. */
body {
    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
/* Skip link di header.php: al focus un controllo completo nell'angolo in alto
   a sinistra, fuori dal flusso, così non sposta il layout. Sopra la navbar
   fixed-top (z-index 1030 di Bootstrap), sotto il backdrop dell'offcanvas
   (1040); il top scavalca la admin bar, e senza admin bar la variabile non
   c'è e vale 0. L'anello di focus è il .focus-ring di Bootstrap, nel markup. */
.farsistrada-skip-link:focus {
    position: absolute;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 0.5rem);
    left: 0.5rem;
    z-index: 1031;
    padding: 0.5rem 1rem;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.site-footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: var(--bs-tertiary-bg);
}
.farsistrada-footer-title {
    margin-bottom: 1rem;
}
/* Il link è un blocco largo quanto il logo: un inline-block starebbe sulla
   linea di base del testo e lascerebbe sotto il logo un vuoto oltre il
   margine. */
.farsistrada-footer-logo-link {
    display: block;
    width: fit-content;
    margin-bottom: 1rem;
    color: var(--bs-emphasis-color);
    text-decoration: none;
}
/* Il logo è reso a dimensione piena: qui prende un'altezza di riga. */
.farsistrada-footer-logo {
    display: block;
    width: auto;
    max-height: 3rem;
}
.farsistrada-footer-site-name {
    font-size: 1.25rem;
}
.farsistrada-footer-blurb {
    color: var(--bs-secondary-color);
}
.farsistrada-footer-social {
    margin-bottom: 0;
}
.farsistrada-footer-social a {
    color: var(--bs-secondary-color);
    font-size: 1.25rem;
}
.farsistrada-footer-social a:hover,
.farsistrada-footer-social a:focus-visible {
    color: var(--bs-emphasis-color);
}
.farsistrada-footer-contacts-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
/* La barra: il filetto sta sul suo contenitore, fuori dalla .row, che coi
   margini negativi della griglia lo farebbe sporgere oltre il contenuto.
   Copyright, tagline, link legali e firma sono le note in calce del sito:
   una per riga e centrate, a ogni larghezza. Lo strato di design non le
   sposta ai lati. */
.farsistrada-footer-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 0.875em;
}
.farsistrada-footer-copyright,
.farsistrada-footer-tagline,
.farsistrada-footer-credits {
    margin-bottom: 0;
}
/* La firma chiude la barra: un corpo appena sotto quello della barra la
   stacca dal copyright come nota di chi ha fatto il sito. */
.farsistrada-footer-credits {
    font-size: 0.9em;
}
/* Il cuore della firma prende il primario del progetto, che lo strato di
   design ridefinisce su --bs-primary. È un'indicazione: su un footer nel
   colore primario il cuore sparirebbe, e lo strato di design lo riporta al
   colore del testo del footer con color: inherit su questo selettore. */
.farsistrada-footer-credits-heart {
    color: var(--bs-primary);
}
/* Il link della firma prende il colore della barra, non quello dei link di
   Bootstrap: la firma è uguale su ogni sito, e un footer scuro o nel colore
   primario la renderebbe invisibile senza una regola del progetto. Col colore
   del testo, a segnalarlo come link sono il grassetto e la sottolineatura:
   lo strato di design non li toglie. */
.farsistrada-footer-credits a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
/* Centrata anche quando va a capo, come il resto della barra. */
.farsistrada-footer-legal-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0;
}
/* Il separatore fra i link legali è grafica: sta qui e non nel markup. Il
   testo alternativo vuoto lo toglie dal nome letto dagli screen reader; la
   prima dichiarazione resta per i browser che non lo supportano. */
.farsistrada-footer-legal-menu li + li::before {
    content: "\00b7";
    content: "\00b7" / "";
    padding: 0 0.5rem;
}

/* Pagina credits (Pattern #30): il riquadro del contatto, centrato, col nome del
   referente e il telefono in evidenza e l'email su una riga sua. Il numero non
   va a capo: la colonna del riquadro è più larga fra lg e xl (col-lg-5). */
.farsistrada-credits-contact {
    text-align: center;
}
.farsistrada-credits-contact-person {
    margin-bottom: 1.5rem;
}
.farsistrada-credits-contact-name {
    display: block;
    font-size: 1.5rem;
    line-height: 1.2;
}
.farsistrada-credits-contact-role {
    display: block;
    margin-top: 0.25rem;
    color: var(--bs-secondary-color);
}
.farsistrada-credits-contact-phone {
    font-size: 1.375rem;
    font-weight: 700;
    white-space: nowrap;
}
/* inline-flex: la sottolineatura del link sta sotto l'indirizzo, non sotto
   l'icona né sotto lo spazio che la separa. */
.farsistrada-credits-contact-email {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 1.125rem;
    font-weight: 700;
}

/* Accanto al testo il riquadro resta in vista mentre si scorre: sticky dentro la
   sua colonna, alta quanto il testo, quindi si ferma prima del footer. Il top
   scavalca la navbar fissa e la admin bar coi token di navbar-walker (0 senza
   fixed_top). In ogni finestra, anche bassa: a fine colonna il riquadro
   risale con la pagina, e la parte sotto il bordo torna raggiungibile. */
@media (min-width: 992px) {
    .farsistrada-credits-contact {
        position: sticky;
        top: calc(var(--farsistrada-navbar-h, 0px) + var(--farsistrada-adminbar-h, 0px) + 1.5rem);
    }
}

/* ===================================================================
   Footer — strato di design: barra di brand scura sopra il markup della
   Factory (design-remapping.md §5, "Factory-Bootstrap re-skin"). Ogni regola
   aggancia la classe propria di una parte del footer, con lo scope
   .site-footer: batte il blocco della Factory qui sopra e le utility di
   Bootstrap del markup (.row, .g-4, .list-inline-item, .h6) senza !important.
   =================================================================== */
.site-footer { background: var(--farsistrada-ink); color: #C8D7E2; padding: 80px 0 30px; }
/* La CSS Grid del design sulla .row della Factory: i gutter della .row si
   azzerano, così padding e margini delle colonne Bootstrap non si sommano al
   gap della griglia. */
.site-footer .farsistrada-footer-columns {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}
.site-footer .farsistrada-footer-title {
    margin-bottom: 16px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}
.site-footer .farsistrada-footer-menu a { display: block; color: rgba(255, 255, 255, 0.85); padding: 6px 0; font-size: 14.5px; text-decoration: none; }
.site-footer .farsistrada-footer-menu a:hover { color: var(--farsistrada-white); }
.site-footer .farsistrada-footer-logo-link { margin-bottom: 0; }
.site-footer .farsistrada-footer-logo { height: 38px; max-height: none; }
/* Nome del sito al posto del logo vuoto: il peso del titolo di marca (.serif). */
.site-footer .farsistrada-footer-site-name { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--farsistrada-white); }
.site-footer .farsistrada-footer-blurb { color: rgba(255, 255, 255, 0.55); margin-top: 18px; max-width: 32ch; }
/* Riga social. L'export dichiara .social-links nel footer di ogni pagina ma non le
   dà mai una regola, quindi il trattamento segue la palette del footer stesso:
   chip a hairline sul fondo scuro, che si riempiono di cielo di brand in hover.
   La lista in riga della Factory perde il margine destro di .list-inline-item:
   la spaziatura è il gap. */
.site-footer .farsistrada-footer-social { display: flex; gap: 10px; margin: 22px 0 0; }
.site-footer .farsistrada-footer-social .list-inline-item { margin-right: 0; }
.site-footer .farsistrada-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.site-footer .farsistrada-footer-social a:hover,
.site-footer .farsistrada-footer-social a:focus-visible {
    color: var(--farsistrada-ink);
    background: var(--farsistrada-sky);
    border-color: var(--farsistrada-sky);
}
.site-footer .farsistrada-footer-bar {
    margin-top: 56px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    gap: 12px;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
}
/* Copyright, tagline e firma sono <p>: il colore della barra, non l'ink-soft
   del testo corrente. */
.site-footer .farsistrada-footer-copyright,
.site-footer .farsistrada-footer-tagline,
.site-footer .farsistrada-footer-credits { color: inherit; }
/* Sul fondo ink del footer il cuore primario (blu) si vede poco: prende il
   colore del testo della barra (design-remapping.md, firma dell'agenzia). */
.site-footer .farsistrada-footer-credits-heart { color: inherit; }
/* Colore della barra, grassetto e sottolineatura il link della firma li
   prende dal blocco della Factory; qui all'hover schiarisce come i link di
   menu. */
.site-footer .farsistrada-footer-credits a {
    transition: color .2s ease;
}
.site-footer .farsistrada-footer-credits a:hover,
.site-footer .farsistrada-footer-credits a:focus-visible { color: var(--farsistrada-white); }
@media (max-width: 880px) {
    .site-footer .farsistrada-footer-columns { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ===================================================================
   Scroll-reveal engine (Pattern #5, requirements.md -> animations.reveal).
   =================================================================== */
:root { --farsistrada-reveal-duration: 700ms; }

.farsistrada-reveal {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: var(--farsistrada-reveal-duration);
    transition-timing-function: ease-out;
}

@media (prefers-reduced-motion: no-preference) {
    .farsistrada-reveal[data-reveal="fade-up"] { transform: translateY(2rem); }
    .farsistrada-reveal[data-reveal="fade-right"] { transform: translateX(-2rem); }
    .farsistrada-reveal[data-reveal="fade-left"] { transform: translateX(2rem); }
    .farsistrada-reveal[data-reveal="zoom-in"] { transform: scale(0.9); }
}

.farsistrada-reveal.farsistrada-reveal-in { opacity: 1; transform: none; }

/* ===================================================================
   Slider (Pattern #19, layout: "slider") — riga dei controlli.
   =================================================================== */

/* Swiper mette frecce e pallini position: absolute sopra le slide, dove coprono
   le card (la freccia sul titolo, i pallini dentro il testo). Il markup li
   raccoglie nella riga .farsistrada-slider-controls dopo la .swiper-wrapper e qui
   tornano nel flusso, sotto le slide. La riga sta dentro la .swiper, che ha
   overflow: hidden: il padding della riga (pt-3 pb-1 nel markup) tiene dentro
   l'anello di focus. I colori sono quelli di Bootstrap, riagganciati al brand. */
.farsistrada-slider {
    --swiper-theme-color: var(--bs-primary);
}
.farsistrada-slider-controls {
    --swiper-navigation-size: 1.25rem;
    --swiper-pagination-bullet-horizontal-gap: 0;
}

/* Frecce e bottone di pausa: bersaglio di 2.75rem (44px) per il tocco. */
.farsistrada-slider-controls .swiper-button-prev,
.farsistrada-slider-controls .swiper-button-next {
    position: static;
    width: 2.75rem;
    height: 2.75rem;
    margin-top: 0;
}
.farsistrada-slider-controls .btn {
    min-height: 2.75rem;
}

/* Pallini: 8px a vista, bersaglio di 24px (WCAG 2.5.8) col bordo trasparente. */
.farsistrada-slider-controls .swiper-pagination {
    position: static;
    display: flex;
    width: auto;
}
.farsistrada-slider-controls .swiper-pagination-bullet {
    box-sizing: content-box;
    border: 0.5rem solid transparent;
    background-clip: padding-box;
}

/* ===================================================================
   Inner-page components (§7) — page-hero + Glossario (CPT `termine`).
   Portati dal design export → token --farsistrada-*. Un solo font (Mulish):
   peso 800 = "display", uppercase + letter-spacing = "mono".
   =================================================================== */

/* Hero inner page (archivio/single non-home; clearance navbar = body padding-top). */
.page-hero {
    padding: 80px 0 64px;
    background: linear-gradient(180deg, var(--farsistrada-cream) 0%, var(--farsistrada-paper) 100%);
    border-bottom: 1px solid var(--farsistrada-line-soft);
}
.page-hero .crumbs {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--farsistrada-muted);
    margin-bottom: 22px;
}
.page-hero .crumbs a { color: var(--farsistrada-muted); text-decoration: none; }
.page-hero .crumbs a:hover { color: var(--farsistrada-blue); }
.page-hero .crumbs span:not([aria-current]) { color: var(--farsistrada-blue); }
/* text-wrap: balance sostituisce il <br> messo a mano dell'export nell'h1:
   l'andare a capo è presentazione (§4.2), quindi non può vivere nel valore del
   campo, e il bilanciamento divide le due frasi in modo pari su righe proprie
   qualunque sia il testo. */
.page-hero h1 { font-size: clamp(40px, 5vw, 72px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
/* Occhiello facoltativo sopra l'h1, come nell'hero della pagina Metodo. Generico su
   .page-hero così ogni hero di pagina interna che ne porta uno lo spazia allo
   stesso modo. */
.page-hero .eyebrow + h1 { margin-top: 16px; }
.page-hero .lead { margin-top: 22px; }
/* Riga di CTA sotto il lead di un page-hero (unico consumer: home.php, hero del blog). */
.hero-intro-cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
/* Accento di brand inline da render_inline_heading (design: <em style="color:var(--blue)">).
   wp_kses toglie lo style inline, quindi il colore dell'accento vive qui —
   generico su .page-hero così ogni <em> negli hero di pagina interna è blu
   (nessuna regola per pagina da dimenticare). */
.page-hero .accent { color: var(--farsistrada-blue); }

/* Affiancati (il testo e il lead). */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }

/* Stat editoriali. */
.gloss-stats {
    display: flex; gap: 30px; flex-wrap: wrap; justify-content: space-around;
    text-align: center; margin-top: 40px; padding-top: 30px;
    border-top: 1px solid var(--farsistrada-line);
}
.gloss-stats .stat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.gloss-stats .val { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--farsistrada-blue); }
.gloss-stats .lab { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--farsistrada-muted); }

/* Toolbar filtro + ricerca. */
.gloss-toolbar {
    display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 16px;
    align-items: end; margin-bottom: 32px; padding: 22px;
    border: 1px solid var(--farsistrada-line); border-radius: var(--farsistrada-radius-lg);
    background: var(--farsistrada-paper);
}
.gloss-field { display: flex; flex-direction: column; gap: 8px; }
.gloss-field label {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 600; color: var(--farsistrada-muted);
}
/* Interlinea dichiarata sui due controlli: `font: inherit` porta all'input
   quella del body (1.55, 23.25px), mentre la select di Chromium resta a
   `normal` (21px): a parità di padding la ricerca era 2.25px più alta e,
   allineate al fondo, le due caselle sporgevano in alto di misure diverse.
   1.4 è la `normal` di Mulish a 15px: 21px di riga, 49px di casella per tutte e due. */
.gloss-field select, .gloss-field input {
    background: var(--farsistrada-paper); border: 1px solid var(--farsistrada-line);
    border-radius: var(--farsistrada-radius); padding: 13px 15px; font: inherit;
    font-size: 15px; line-height: 1.4; color: var(--farsistrada-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.gloss-field select:focus, .gloss-field input:focus {
    outline: none; border-color: var(--farsistrada-blue);
    box-shadow: 0 0 0 3px var(--farsistrada-blue-tint);
}
.gloss-search { position: relative; }
.gloss-search input { width: 100%; padding-left: 42px; }
/* Lente centrata sulla casella: (49px - 18px) / 2 dal fondo del campo. */
.gloss-search svg { position: absolute; left: 14px; bottom: 15.5px; width: 18px; height: 18px; color: var(--farsistrada-muted); pointer-events: none; }
/* Pulsante d'invio del form senza JS, terza colonna della toolbar: con JS è
   nascosto (filtri e ricerca si applicano da soli) e la griglia resta a due. */
@media (min-width: 768px) {
    .gloss-toolbar:has(> .gloss-submit:not([hidden])) { grid-template-columns: minmax(220px, 320px) 1fr auto; }
}

/* Contatore risultati. */
.gloss-count { font-size: 12px; letter-spacing: 0.06em; color: var(--farsistrada-muted); margin: 0 2px 18px; }
.gloss-count b { color: var(--farsistrada-ink); font-weight: 700; }

/* Lista termini — riga a 2 colonne (design .term-row). */
.term-list { border-top: 1px solid var(--farsistrada-line); }
.term-row {
    display: grid; grid-template-columns: 250px 1fr; gap: 30px; align-items: start;
    padding: 24px 6px; border-bottom: 1px solid var(--farsistrada-line-soft);
    transition: background .15s ease, padding-left .2s ease;
}
.term-row:hover { background: var(--farsistrada-blue-tint); padding-left: 14px; }
.term-row .t-head { display: flex; flex-direction: column; gap: 10px; }
.term-row .t-name { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.term-row .t-name a { color: var(--farsistrada-blue); text-decoration: none; }
.term-row .t-name a:hover { color: var(--farsistrada-blue-deep); }
.term-row .t-cat {
    align-self: flex-start; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--farsistrada-ink-soft); background: var(--farsistrada-cream);
    border: 1px solid var(--farsistrada-line); padding: 4px 9px;
    border-radius: var(--farsistrada-radius-xs); text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.term-row .t-cat:hover { border-color: var(--farsistrada-blue); color: var(--farsistrada-blue); }
.term-row .t-def { margin: 0; color: var(--farsistrada-ink-soft); font-size: 15.5px; line-height: 1.6; }

/* Badge categoria del single (hero, pill prominente) + sinonimi (single). */
.term-cat {
    display: inline-block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
    color: var(--farsistrada-blue); background: var(--farsistrada-blue-tint);
    padding: 4px 10px; border-radius: var(--farsistrada-radius-xs); text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.term-cat:hover { background: var(--farsistrada-blue); color: var(--farsistrada-white); }
.term-syn { margin: 8px 0 0; font-size: 14px; color: var(--farsistrada-muted); }
.term-syn-label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-weight: 600; }

/* Empty state: lo nasconde l'attributo `hidden` (server e JS), non una classe. */
.gloss-empty {
    text-align: center; padding: 64px 20px; margin-top: 8px;
    border: 1px dashed var(--farsistrada-line); border-radius: var(--farsistrada-radius-lg);
    color: var(--farsistrada-muted);
}
.gloss-empty strong { display: block; margin-bottom: 8px; font-size: 22px; font-weight: 800; color: var(--farsistrada-ink); }

/* Pager: con JS e senza è lo stesso <nav> della paginazione (skin nella sezione
   "Paginazione"); qui solo lo stacco dalla lista, i 40px del design al posto
   del `mt-4` (utility con !important) che il <nav> porta di suo. */
.farsistrada-gloss .farsistrada-pagination { margin-top: 40px !important; }

/* Single termine. */
.farsistrada-term-hero .term-hero-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.farsistrada-term-hero h1 { font-size: clamp(36px, 4vw, 60px); }
.farsistrada-term-body .term-def-full { font-size: 19px; line-height: 1.6; color: var(--farsistrada-ink-soft); max-width: 72ch; }
.term-related { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--farsistrada-line); }
.term-related-title { margin-bottom: 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--farsistrada-muted); }
.term-related-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.term-related-list a {
    display: inline-block; padding: 8px 14px; font-size: 14px; text-decoration: none;
    border: 1px solid var(--farsistrada-line); border-radius: 999px; color: var(--farsistrada-ink);
    transition: border-color .15s ease, color .15s ease;
}
.term-related-list a:hover { border-color: var(--farsistrada-blue); color: var(--farsistrada-blue); }
.term-back { margin-top: 40px; }
.term-back .btn-link:hover .arrow { transform: translateX(-4px); }

/* Responsive inner-page. */
@media (max-width: 767.98px) {
    .two-up { grid-template-columns: 1fr; gap: 36px; align-items: start; }
    .gloss-toolbar { grid-template-columns: 1fr; }
    .page-hero { padding: 56px 0 44px; }
    .term-row { grid-template-columns: 1fr; gap: 12px; }
    .term-row:hover { padding-left: 6px; }
}

/* ===================================================================
   Pagina Metodo (page-metodo.php, design-remapping §4b/§6).
   Componenti portati dal Design Export → token --farsistrada-*.
   Un solo font (Mulish): peso 800 = "display", uppercase + letter-spacing
   = "mono". page-hero/crumbs/serif/eyebrow/section-head già definiti sopra.
   =================================================================== */

/* ── Ritmo delle bande della pagina Metodo ──
   L'hero rinuncia al proprio filo (la banda subito sotto è bianca, quindi la riga
   ripeterebbe solo il bordo); citazione e FAQ stanno su bianco e la banda delle fasi
   è grigio freddo — stesso ritmo della home, stessi token --farsistrada-band-*. Lo
   scope per classe di sezione è voluto: .page-hero è condivisa con contatti e
   archivi, che il filo lo tengono. */
.farsistrada-metodo-hero { border-bottom: none; }
.farsistrada-metodo-quote,
.farsistrada-metodo-faq { background: var(--farsistrada-white); }
/* La banda della citazione è owner del proprio padding invece della utility .py-5:
   l'export dà al blocco 80px d'aria prima della banda grigia delle fasi
   (`section.tight`), che la utility da 48px non sa esprimere — e .py-5 è
   !important, quindi non la si potrebbe nemmeno sovrascrivere da qui. */
.farsistrada-metodo-quote { padding: 48px 0 80px; }

/* ── Citazione fondatore ── */
.farsistrada-metodo-quote .quote-block {
    background: var(--farsistrada-band-blue);
    border: 1px solid var(--farsistrada-band-blue-line);
    border-radius: var(--farsistrada-radius-lg);
    padding: 64px;
}
.farsistrada-metodo-quote blockquote {
    margin: 0;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--farsistrada-ink);
}
.farsistrada-metodo-quote .sig {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--farsistrada-muted);
}
.farsistrada-metodo-quote .sig::before {
    content: "";
    width: 36px;
    height: 1px;
    background: var(--farsistrada-blue);
}

/* ── Fasi del Metodo (design `.method`/`.method-step`) ──
   Una sequenza verticale di passi separati da righe, non una griglia di card:
   l'ordine di lettura è sequenziale (01 → 02 → 03). L'indice sovradimensionato è
   decorativo (aria-hidden nel template): il senso lo portano il tag e il titolo. */
.farsistrada-metodo-fasi {
    background: var(--farsistrada-band-grey);
    border-top: 1px solid var(--farsistrada-band-grey-line);
    border-bottom: 1px solid var(--farsistrada-band-grey-line);
}
.method { display: flex; flex-direction: column; }
.method-step {
    display: grid;
    grid-template-columns: minmax(120px, 0.5fr) 1.5fr;
    gap: 56px;
    padding: 56px 0;
    border-top: 1px solid var(--farsistrada-line);
    align-items: start;
}
.method-step:last-child { border-bottom: 1px solid var(--farsistrada-line); }
.ms-index {
    font-weight: 800;
    letter-spacing: -0.04em;
    font-size: clamp(64px, 8vw, 128px);
    line-height: 0.8;
    color: var(--farsistrada-blue-soft);
}
.ms-tag {
    display: block;
    margin-top: 12px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--farsistrada-muted);
}
.ms-body h3 {
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: clamp(26px, 2.7vw, 38px);
    line-height: 1.1;
    color: var(--farsistrada-ink);
    margin: 0 0 20px;
    max-width: 22ch;
    text-wrap: balance;
}
.ms-body p { max-width: 58ch; margin: 0; }
.ms-outcome {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--farsistrada-line-soft);
    color: var(--farsistrada-ink);
    font-size: 15px;
    line-height: 1.5;
    max-width: 56ch;
}
.ms-outcome b {
    flex: 0 0 auto;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--farsistrada-blue);
}

/* ── FAQ ── */
.faq-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 64px;
    align-items: start;
}
.faq-aside { position: sticky; top: calc(var(--farsistrada-navbar-h) + var(--farsistrada-adminbar-h) + 28px); }
.faq-aside h2 { margin-top: 16px; }
.faq-aside .aside-note { margin-top: 22px; color: var(--farsistrada-ink-soft); max-width: 34ch; }
.faq-jump { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.faq-jump a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--farsistrada-line-soft);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--farsistrada-ink-soft);
    text-decoration: none;
    transition: color .2s ease, padding-left .2s ease;
}
.faq-jump a:hover { color: var(--farsistrada-blue); padding-left: 6px; }
.faq-jump a .jn { font-size: 11px; letter-spacing: 0.1em; color: var(--farsistrada-blue); flex: 0 0 auto; }

.faq-group { margin-bottom: 56px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--farsistrada-muted);
    padding-bottom: 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--farsistrada-line);
}
.faq-group-head .gn { font-weight: 800; color: var(--farsistrada-blue); letter-spacing: 0; }

.faq-item { border-bottom: 1px solid var(--farsistrada-line-soft); }
.faq-q {
    width: 100%;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 26px 4px 26px 0;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: clamp(18px, 1.7vw, 21px);
    line-height: 1.3;
    color: var(--farsistrada-ink);
    transition: color .2s ease;
}
.faq-q:hover { color: var(--farsistrada-blue); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q .q-text { flex: 1; }
.faq-q .q-mark {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-top: 2px;
    border-radius: var(--farsistrada-radius-xs);
    border: 1px solid var(--farsistrada-line);
    display: grid;
    place-items: center;
    color: var(--farsistrada-blue);
    position: relative;
    transition: background .2s ease, border-color .2s ease;
}
.faq-q .q-mark::before,
.faq-q .q-mark::after { content: ""; position: absolute; background: currentColor; border-radius: 1px; }
.faq-q .q-mark::before { width: 12px; height: 1.5px; }
.faq-q .q-mark::after { width: 1.5px; height: 12px; transition: transform .3s ease, opacity .2s ease; }
.faq-item[open] .q-mark { background: var(--farsistrada-blue); border-color: var(--farsistrada-blue); color: var(--farsistrada-white); }
.faq-item[open] .q-mark::after { transform: rotate(90deg); opacity: 0; }

.faq-a { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq-item[open] .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; min-height: 0; }
.faq-a-inner > :first-child { margin-top: 0; }
.faq-a-inner p { margin: 0 0 14px 50px; max-width: 64ch; color: var(--farsistrada-ink-soft); }
.faq-a-inner p:last-child { margin-bottom: 30px; }
/* I link inline dentro una risposta sono blu. :not(.btn) perché una risposta può
   chiudersi con una CTA a bottone (come nelle FAQ della pagina Metodo), che deve tenere il
   proprio colore .btn-* invece di ereditare il blu dei link. */
.faq-a-inner a:not(.btn) { color: var(--farsistrada-blue); }

@media (prefers-reduced-motion: reduce) {
    .faq-a { transition: none; }
    .faq-q .q-mark, .faq-q .q-mark::after { transition: none; }
}

/* ── Banda CTA contatto (riusabile) ── */
.farsistrada-cta-contatto { background: var(--farsistrada-blue); color: var(--farsistrada-white); }
.farsistrada-cta-contatto .cta-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: end;
}
.farsistrada-cta-contatto h2 { color: var(--farsistrada-white); margin-top: 16px; }
.farsistrada-cta-contatto .cta-copy p { color: rgba(255, 255, 255, 0.78); margin-top: 18px; max-width: 50ch; margin-bottom: 0; }
.farsistrada-cta-contatto .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.farsistrada-cta-contatto .cta-btn-primary {
    background: var(--farsistrada-white);
    border-color: var(--farsistrada-white);
    color: var(--farsistrada-blue);
}
.farsistrada-cta-contatto .cta-btn-primary:hover { background: #f1f7fb; border-color: #f1f7fb; color: var(--farsistrada-blue); }
.farsistrada-cta-contatto .cta-btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--farsistrada-white);
}
.farsistrada-cta-contatto .cta-btn-ghost:hover { border-color: var(--farsistrada-white); color: var(--farsistrada-white); background: rgba(255, 255, 255, 0.08); }

/* ── Responsive pagina Metodo ── */
@media (max-width: 880px) {
    .farsistrada-metodo-quote .quote-block { padding: 40px 28px; }
}
@media (max-width: 720px) {
    .method-step { grid-template-columns: 1fr; gap: 16px; padding: 44px 0; }
    .ms-index { font-size: 64px; }
}
@media (max-width: 860px) {
    .faq-layout { grid-template-columns: 1fr; gap: 36px; }
    .faq-aside { position: static; }
    .faq-jump { display: none; }
}
@media (max-width: 767.98px) {
    .farsistrada-cta-contatto .cta-grid { grid-template-columns: 1fr; gap: 28px; }
    .farsistrada-cta-contatto .cta-actions { justify-content: flex-start; }
    .faq-a-inner p { margin-left: 0; }
}

/* ────────── Archivio Servizi — righe long-form (design-remapping §6) ────────── */
/* Nessun padding di sezione: nell'export le righe stanno in un `.container` nudo
   subito sotto il page-hero, e il ritmo verticale lo dà il `padding: 90px 0` di
   ciascuna `.service-row`. */
.farsistrada-servizi { padding: 0; }

/* Bullet list (punti di forza) */
.bullets { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 18px; }
.bullets li { position: relative; padding-left: 28px; color: var(--farsistrada-ink-soft); }
.bullets li::before { content: ""; position: absolute; left: 0; top: 11px; width: 14px; height: 1px; background: var(--farsistrada-blue); }
.bullets li strong { color: var(--farsistrada-ink); display: block; margin-bottom: 4px; }
.bullets.bullets-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.bullets.bullets-row li { padding-left: 22px; }
@media (max-width: 720px) { .bullets.bullets-row { grid-template-columns: 1fr; gap: 18px; } }

/* Riga servizio (item d'archivio) */
.service-row {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px;
    padding: 90px 0; border-bottom: 1px solid var(--farsistrada-line-soft); align-items: center;
}
.service-row:last-child { border-bottom: 0; }
.service-row.rev { grid-template-columns: 1.1fr 1fr; }
.service-row.rev .visual-col { order: -1; }
/* L'export stacca il titolo dall'occhiello di 16px su ogni riga (inline nel mock);
   stesso ritmo di `.section-head h2` e di `.page-hero .eyebrow + h1`. */
.service-row h2 { margin-top: 16px; margin-bottom: 18px; }

/* Meta spec (etichetta / valore) */
.service-row .meta {
    margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--farsistrada-line);
    display: flex; gap: 28px; flex-wrap: wrap;
}
.service-row .meta div { display: flex; flex-direction: column; gap: 2px; }
.service-row .meta .lab {
    font-family: var(--farsistrada-font-sans); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--farsistrada-muted);
}
/* Peso ereditato (400) come nell'export: la riga d'archivio è un blocco editoriale,
   non la spec-table del single (che sta a 800). */
.service-row .meta .val { font-family: var(--farsistrada-font-sans); font-size: 22px; color: var(--farsistrada-ink); }

.service-row .row-cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Colonna visual: thumbnail se presente, altrimenti pannello branded (dotgrid + glyph).
   È un <a>: azzerare la decorazione di Bootstrap, che altrimenti sottolinea il glyph. */
.service-row .visual-col {
    aspect-ratio: 5 / 4; border-radius: var(--farsistrada-radius-lg);
    background: var(--farsistrada-blue-deep); color: #fff; text-decoration: none;
    position: relative; overflow: hidden; box-shadow: var(--farsistrada-shadow);
    display: grid; place-items: center;
}
.service-row .visual-col img {
    position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.service-row .visual-col:hover img { transform: scale(1.045); }
.service-row .visual-col .corner-tag {
    position: absolute; top: 22px; left: 22px; z-index: 2;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75);
}
.service-row .visual-col .index-num {
    position: absolute; bottom: 22px; right: 26px; z-index: 2;
    font-size: 14px; color: rgba(255, 255, 255, 0.6);
}
.service-row .visual-col .corner-tag,
.service-row .visual-col .index-num { text-shadow: 0 1px 6px rgba(2, 34, 53, 0.45); }
/* Posizionato per stare sopra i puntini di `.dotgrid::before` (come .svc-visual). */
.service-row .visual-col .center-glyph,
.book-row .visual-col .center-glyph {
    position: relative; z-index: 2;
    font-style: italic; font-weight: 800;
    font-size: clamp(80px, 14vw, 180px); color: rgba(255, 255, 255, 0.95);
}

/* Dotted-grid: texture branded del pannello di fallback (senza immagine) */
.dotgrid::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.4px);
    background-size: 20px 20px; opacity: 0.5; pointer-events: none;
}
.dotgrid::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(72% 90% at 100% 0%, rgba(158, 210, 238, 0.16), transparent 60%);
    pointer-events: none;
}
/* Con foto, l'accento azzurro qui sopra cadrebbe SOPRA la <img> (pseudo-elemento in
   coda all'albero) e le tingerebbe l'angolo alto-destro. `.has-photo` riusa lo stesso
   ::after come scrim blu verticale, che tiene leggibili etichetta e indice: un solo
   punto di verità per i tre consumatori .dotgrid (riga servizio, visual del single,
   riga libro), invece di uno <span> di scrim per template. */
.dotgrid.has-photo::after { background: var(--farsistrada-photo-scrim); }

@media (max-width: 880px) {
    .service-row, .service-row.rev { grid-template-columns: 1fr; gap: 36px; padding: 60px 0; }
    .service-row.rev .visual-col { order: 0; }
}

/* CTA di chiusura dell'archivio: banda cream centrata (stesso trattamento della CTA
   del single Servizio, copy propria da Options "Servizi"), non la banda blu condivisa. */
.farsistrada-servizi-cta { background: var(--farsistrada-cream); border-top: 1px solid var(--farsistrada-line-soft); text-align: center; }
.farsistrada-servizi-cta .eyebrow { justify-content: center; }
.farsistrada-servizi-cta h2 { margin-top: 16px; max-width: 22ch; margin-left: auto; margin-right: auto; }
.farsistrada-servizi-cta .cta-actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════
   Single Servizio — dettaglio
   Token del design rimappati su --farsistrada-*. Riusa .section-head,
   .process-list/.process-step, .eyebrow, .dotgrid, .page-hero .crumbs.
   ══════════════════════════════════════════════════════════════════════ */

/* Spaziatura sezioni impilate (design usava padding-top:0 inline) */
.tight { padding: 80px 0; }
.tight-flush { padding-top: 0; }
.farsistrada-servizio-single .process { background: var(--farsistrada-paper); }

/* Ghost button — referenziato dal codice (archivio row-cta, cta_secondaria) ma
   finora non stilizzato: outline neutro che vira al blu in hover. */
.btn-ghost { color: var(--farsistrada-ink); border-color: var(--farsistrada-line); background: transparent; }
.btn-ghost:hover { border-color: var(--farsistrada-blue); color: var(--farsistrada-blue); transform: translateY(-1px); }

/* ── Hero ──
   Nessun padding proprio: l'export dichiara `.svc-hero { padding: 56px 0 72px }` ma la
   regola è morta, perché `.page-hero` (stessa specificità, più in basso nel foglio) la
   vince e impone 80px 0 64px. Qui vale la resa dell'export, non la sua dichiarazione. */
.svc-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; }
.svc-hero h1 { font-size: clamp(40px, 4.6vw, 64px); margin-top: 16px; }
/* Sottotitolo del servizio: blu corsivo nel titolo, sia sul single sia sulla riga d'archivio. */
.svc-hero .tagline,
.service-row .tagline { color: var(--farsistrada-blue); font-style: italic; }
.svc-hero .lead { margin-top: 22px; }
.svc-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--farsistrada-line); }
.svc-stats .stat { display: flex; flex-direction: column; gap: 3px; }
.svc-stats .lab { font-family: var(--farsistrada-font-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--farsistrada-muted); }
.svc-stats .val { font-family: var(--farsistrada-font-sans); font-weight: 800; font-size: 21px; color: var(--farsistrada-ink); }
.svc-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* Visual: thumbnail + scrim se presente, altrimenti pannello branded (dotgrid + glyph) */
.svc-visual {
    aspect-ratio: 1 / 1; border-radius: var(--farsistrada-radius-lg);
    background: linear-gradient(150deg, #0A557E 0%, var(--farsistrada-blue-deep) 58%, #022E42 100%);
    color: #fff; display: grid; place-items: center;
    box-shadow: var(--farsistrada-shadow); position: relative; overflow: hidden;
}
.svc-visual img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-visual .v-label { position: absolute; top: 22px; left: 24px; z-index: 2; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.svc-visual .index-num { position: absolute; bottom: 20px; right: 24px; z-index: 2; font-weight: 800; font-size: 13px; color: rgba(255, 255, 255, 0.66); letter-spacing: 0.04em; }
.svc-visual .v-label, .svc-visual .index-num { text-shadow: 0 1px 6px rgba(2, 34, 53, 0.45); }
.svc-visual .center-glyph { position: relative; z-index: 2; font-style: italic; font-weight: 800; font-size: clamp(90px, 12vw, 170px); color: rgba(255, 255, 255, 0.95); }

/* ── A chi serve (sintomi) ──
   L'export porta il markup (.svc-need, .need-head, .need-list, .tick) ma ZERO
   regole: nessuno dei due fogli stila questa sezione, quindi nel mock gli SVG
   del checkmark, privi di vincolo dimensionale, si espandono a larghezza pagina.
   Ricostruita qui sull'intento (eyebrow + h2 serif con accento, elenco spuntato)
   coi token di progetto e col ritmo di .section-head (16px / 64px), non copiando
   una resa che non esiste. La misura esplicita su .tick svg è il vincolo che
   manca nel mock. Due colonne: 5 voci di ~80 caratteri su una sola colonna a
   1200px darebbero righe illeggibili. */
.need-head { margin-bottom: 64px; }
/* Nessun max-width sull'h2: il titolo è per natura breve ("Hai bisogno di X
   se...") e l'export lo tiene su una riga; un vincolo in ch lo spezzava
   lasciando orfano l'ultimo frammento. Se cresce, va a capo sul container. */
.need-head h2 { margin-top: 16px; }
.need-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
.need-list li { display: flex; align-items: flex-start; gap: 14px; color: var(--farsistrada-ink-soft); line-height: 1.55; }
.need-list .tick {
    flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--farsistrada-blue-tint); color: var(--farsistrada-blue);
    border: 1px solid var(--farsistrada-blue-soft);
}
.need-list .tick svg { width: 13px; height: 12px; }

/* ── Problema / Soluzione ── */
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ps-card { padding: 34px 32px; border-radius: var(--farsistrada-radius-lg); border: 1px solid var(--farsistrada-line-soft); background: var(--farsistrada-white); }
.ps-card.problem { background: var(--farsistrada-cream); border-color: var(--farsistrada-cream-deep); }
.ps-card.solution { background: var(--farsistrada-blue-tint); border-color: var(--farsistrada-blue-soft); }
.ps-card .ps-kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--farsistrada-muted); display: inline-flex; align-items: center; gap: 9px; }
.ps-card.solution .ps-kicker { color: var(--farsistrada-blue); }
.ps-card .ps-kicker::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.ps-card h3 { margin: 14px 0 12px; color: var(--farsistrada-ink); }
.ps-card p { margin: 0; color: var(--farsistrada-ink-soft); }

/* ── Caratteristiche (feature cards) ── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card {
    padding: 30px 28px; border: 1px solid var(--farsistrada-line-soft); border-radius: var(--farsistrada-radius-lg);
    background: var(--farsistrada-white); display: flex; flex-direction: column; gap: 12px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-3px); border-color: var(--farsistrada-blue-soft); box-shadow: var(--farsistrada-shadow); }
.feature-card .f-mark {
    width: 30px; height: 30px; border-radius: var(--farsistrada-radius-xs);
    background: var(--farsistrada-blue-tint); border: 1px solid var(--farsistrada-blue-soft);
    display: grid; place-items: center; color: var(--farsistrada-blue);
    font-family: var(--farsistrada-font-sans); font-weight: 800; font-size: 14px;
}
.feature-card h3 { font-size: 19px; color: var(--farsistrada-ink); }
.feature-card p { margin: 0; color: var(--farsistrada-ink-soft); font-size: 15px; }

/* ── Spec table + eyebrow di sezione ── */
.svc-spec-eyebrow { margin-bottom: 22px; }
.spec-table { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--farsistrada-line); }
.spec-table .spec { padding: 26px 24px; border-right: 1px solid var(--farsistrada-line); border-bottom: 1px solid var(--farsistrada-line); display: flex; flex-direction: column; gap: 6px; }
.spec-table .spec:last-child { border-right: 0; }
.spec-table .spec .lab { font-family: var(--farsistrada-font-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--farsistrada-muted); }
.spec-table .spec .val { font-family: var(--farsistrada-font-sans); font-weight: 800; font-size: 24px; color: var(--farsistrada-ink); }

/* ── CTA di chiusura (service-specific) ── */
.farsistrada-svc-cta { background: var(--farsistrada-cream); border-top: 1px solid var(--farsistrada-line-soft); text-align: center; }
.farsistrada-svc-cta .eyebrow { justify-content: center; }
.farsistrada-svc-cta h2 { margin-top: 16px; max-width: 20ch; margin-left: auto; margin-right: auto; }
.svc-cta-actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Altri servizi ── */
.other-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.other-card {
    padding: 24px; border: 1px solid var(--farsistrada-line-soft); border-radius: var(--farsistrada-radius);
    background: var(--farsistrada-white); display: flex; align-items: center; justify-content: space-between; gap: 14px;
    transition: border-color .2s ease, transform .2s ease;
}
.other-card:hover { border-color: var(--farsistrada-blue); transform: translateY(-2px); }
.other-card .oc-name { font-family: var(--farsistrada-font-sans); font-weight: 800; font-size: 17px; color: var(--farsistrada-ink); }
.other-card .oc-kind { font-family: var(--farsistrada-font-sans); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--farsistrada-muted); display: block; margin-top: 4px; }
.other-card .a-arrow { width: 16px; height: 16px; color: var(--farsistrada-blue); flex: 0 0 auto; transition: transform .2s ease; }
.other-card:hover .a-arrow { transform: translateX(4px); }

@media (max-width: 900px) {
    .svc-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .need-list { grid-template-columns: 1fr; }
    .ps-grid { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: 1fr; }
    .spec-table { grid-template-columns: 1fr; }
    .spec-table .spec { border-right: 0; }
    .other-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   Archivio Dicono di noi / Testimonial (design-remapping §6, Mode C).
   Portato dai .ed-* del mock con token di progetto; classi kebab-case (§7).
   Hero = .page-hero + .two-up (esistenti); ed-clients/ed-cta = sezioni riusate.
   ══════════════════════════════════════════════════════════════════════ */

/* Hero: rule d'accento sopra il lead (design .ed-hero .intro .rule). */
.farsistrada-testimonial-hero .two-up { align-items: end; }
.farsistrada-testimonial-hero .rule { display: block; width: 46px; height: 2px; background: var(--farsistrada-blue); margin-bottom: 22px; }

/* Citazione in evidenza. */
.testimonial-feature { padding: 30px 0 40px; }
.testimonial-feature-inner {
    max-width: 1000px; margin: 0 auto; text-align: center; padding: 64px 40px;
    border-top: 1px solid var(--farsistrada-line); border-bottom: 1px solid var(--farsistrada-line);
    position: relative;
}
.testimonial-feature .qmark {
    font-family: var(--farsistrada-font-sans); font-weight: 800; font-size: 120px; line-height: 0.4;
    color: var(--farsistrada-blue-soft); height: 48px;
}
.testimonial-feature blockquote {
    margin: 0; font-family: var(--farsistrada-font-sans); font-weight: 800;
    font-size: clamp(26px, 3.4vw, 44px); line-height: 1.22; letter-spacing: -0.02em;
    color: var(--farsistrada-ink); text-wrap: balance;
}
.testimonial-feature blockquote p { margin: 0; }
.testimonial-feature blockquote b,
.testimonial-feature blockquote strong { font-weight: 800; color: var(--farsistrada-blue); }
.testimonial-feature .cite { margin-top: 36px; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.testimonial-feature .cite .who { font-weight: 700; font-size: 16px; color: var(--farsistrada-ink); }
.testimonial-feature .cite .role { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--farsistrada-muted); }

/* Intestazione lista. */
.testimonial-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; margin-bottom: 8px; }
.testimonial-sec-head .lbl { font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--farsistrada-blue); }
.testimonial-sec-head .count { font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--farsistrada-muted); }

/* Banda della lista: ritmo stretto. La sezione non porta padding proprio, quindi
   senza questa regola cadeva sul rilievo generico `section { padding: 120px 0 }`
   e apriva ~80px di vuoto sopra e sotto la lista. Il mock le dà 30px/40px perché
   la citazione in evidenza sopra e la banda clienti sotto portano già il proprio
   respiro (pagina Dicono di noi, sezione della lista recensioni). */
.farsistrada-testimonial { padding: 30px 0 40px; }

/* Lista righe recensione (non-link). */
.testimonial-list { border-top: 1px solid var(--farsistrada-ink); }
.testimonial-row {
    display: grid; grid-template-columns: 90px 1fr 240px; gap: 40px; align-items: start;
    padding: 44px 0; border-bottom: 1px solid var(--farsistrada-line); position: relative;
}
.testimonial-row .idx { font-weight: 800; font-size: 34px; color: var(--farsistrada-blue); line-height: 1; letter-spacing: -0.03em; }
.testimonial-row .main .co { font-weight: 800; font-size: 24px; letter-spacing: -0.01em; color: var(--farsistrada-ink); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.testimonial-row .main .co .sector { font-weight: 400; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--farsistrada-muted); }
.testimonial-row .main .qt { margin: 16px 0 0; font-weight: 400; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--farsistrada-ink-soft); max-width: 50ch; }
.testimonial-row .main .qt p { margin: 0; }
.testimonial-row .main .qt p + p { margin-top: 10px; }
.testimonial-row .side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 6px; }
.testimonial-row .side .stars { display: inline-flex; gap: 3px; }
.testimonial-row .side .stars .star { display: inline-flex; width: 15px; height: 15px; }
.testimonial-row .side .stars .star svg { width: 15px; height: 15px; display: block; }
.testimonial-row .side .stars .is-on { color: var(--farsistrada-blue); }
.testimonial-row .side .stars .is-off { color: var(--farsistrada-line); }
.testimonial-row .side .person { font-size: 14px; color: var(--farsistrada-ink-soft); line-height: 1.4; }
.testimonial-row .side .person b { color: var(--farsistrada-ink); font-weight: 700; display: block; }

/* Metriche editoriali. */
.testimonial-metrics { padding: 60px 0; }
.testimonial-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
/* Celle centrate: valore e etichetta stanno sull'asse della cella, e la .lab
   resta larga 26ch centrata sotto il numero (design .ed-metrics .m). */
.testimonial-metrics .m { padding: 20px 40px; border-left: 1px solid var(--farsistrada-line); text-align: center; }
.testimonial-metrics .m:first-child { border-left: 0; padding-left: 0; }
.testimonial-metrics .m .val { font-weight: 800; font-size: clamp(52px, 6vw, 84px); line-height: 1; color: var(--farsistrada-blue); letter-spacing: -0.03em; }
.testimonial-metrics .m .lab { margin: 14px auto 0; color: var(--farsistrada-ink-soft); font-size: 15.5px; line-height: 1.5; max-width: 26ch; }

/* Breakpoint: quelli del mock, uno per banda (900 riga, 760 metriche, 640
   citazione, 560 riga a colonna singola) — non un unico salto a 900. */
@media (max-width: 900px) {
    .testimonial-row { grid-template-columns: 60px 1fr; gap: 24px; }
    /* Stelle e firma sempre affiancate: con il flex-wrap del mock la firma
       lunga scendeva sotto le stelle e quella corta no, e righe vicine avevano
       impaginazioni diverse. Qui la firma va a capo dentro la propria colonna
       (design-remapping.md §"Archivio Dicono di noi / Testimonial"). */
    .testimonial-row .side { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 20px; padding-top: 0; }
    .testimonial-row .side .stars { flex: none; }
    .testimonial-row .side .person { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 767.98px) {
    /* Stesso punto in cui .two-up collassa a colonna singola: sopra questa
       soglia l'hero è ancora a due colonne e la rule non deve stringersi. */
    .farsistrada-testimonial-hero .rule { margin-bottom: 14px; }
}
@media (max-width: 760px) {
    .testimonial-metrics-grid { grid-template-columns: 1fr; gap: 30px; }
    .testimonial-metrics .m { border-left: 0; padding: 24px 0; border-top: 1px solid var(--farsistrada-line); }
    .testimonial-metrics .m:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 640px) {
    .testimonial-feature-inner { padding: 44px 20px; }
}
@media (max-width: 560px) {
    .testimonial-row { grid-template-columns: 1fr; gap: 16px; }
    .testimonial-row .idx { font-size: 30px; }
}

/* ============================================================= */
/* Pagina Contatti (page-contatti.php) — design-remapping §6.    */
/* Classi portate 1:1 dai selettori del design con token         */
/* --farsistrada-* (kebab-case, naming §7). Font mono del mock → */
/* Mulish uppercase + letter-spacing (il tema non ha font mono). */
/* ============================================================= */

/* Sezione contatto: section-head + info-block (sx) + form-card (dx) */
.contact-section { padding: 56px 0 48px; }
.contact-section .section-head { margin-bottom: 36px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start; }

/* Info-block (contatti societari da Options Brand) */
.info-block { display: flex; flex-direction: column; }
.info-item { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; gap: 20px; padding: 18px 0; border-top: 1px solid var(--farsistrada-line-soft); }
.info-item:last-child { border-bottom: 1px solid var(--farsistrada-line-soft); }
.info-item .lab { font-family: var(--farsistrada-font-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--farsistrada-ink); font-weight: 600; padding-top: 3px; }
.info-item .val { font-family: var(--farsistrada-font-sans); font-weight: 700; font-size: 17px; color: var(--farsistrada-ink); line-height: 1.45; }
.info-item .val a { color: var(--farsistrada-blue); }

/* Form-card: contenitore del modulo CF7 (accento blu in cima) */
.form-card { background: var(--farsistrada-white); border: 1px solid var(--farsistrada-line); border-radius: var(--farsistrada-radius-lg); padding: 40px; position: relative; box-shadow: var(--farsistrada-shadow); overflow: hidden; }
.form-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--farsistrada-blue); }
.form-card h3 { font-size: clamp(22px, 2.4vw, 28px); margin: 10px 0 24px; }

/* Skin del form CF7 della form-card (.form-grid, campi, consenso, riga di submit):
   in assets/css/cf7.css. */

@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 480px) { .info-item { grid-template-columns: 1fr; gap: 4px; } }

/* ============================================================= */
/* Pagina Chi siamo (page-chi-siamo.php) — design-remapping §6.  */
/* Classi portate 1:1 dai selettori del design con token         */
/* --farsistrada-* (kebab-case, naming §7). Font mono del mock →  */
/* Mulish uppercase + letter-spacing (il tema non ha font mono). */
/* .about-band / .mv-* / .pillar-grid ARRIVANO da qui: erano nel */
/* blocco Contatti finché quella pagina assorbiva le due bande.  */
/* ============================================================= */

/* Storia (#storia): racconto a sinistra, cronologia a destra */
.farsistrada-storia { padding: 80px 0 72px; }
.farsistrada-storia .section-head { margin-bottom: 44px; }
.story-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: start; }
.story-body p { max-width: 60ch; }
.story-body p + p { margin-top: 18px; }
.story-pull {
    margin-top: 32px; padding: 26px 28px; background: var(--farsistrada-blue-tint);
    border-left: 3px solid var(--farsistrada-blue);
    border-radius: 0 var(--farsistrada-radius-lg) var(--farsistrada-radius-lg) 0;
}
/* max-width: none annulla il 60ch del corpo: la frase in evidenza tiene la sua misura */
.story-pull p { margin: 0; max-width: none; font-weight: 700; font-size: clamp(19px, 2vw, 23px); line-height: 1.35; letter-spacing: -0.01em; color: var(--farsistrada-ink); }

/* Cronologia: anno + evento su riga filettata. Nomi .year/.val NON abbreviati: */
/* l'anno non è il "valore" di una metrica, è l'etichetta temporale della riga. */
.timeline { display: flex; flex-direction: column; }
.timeline-head { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--farsistrada-muted); margin-bottom: 8px; }
.timeline-row {
    display: grid; grid-template-columns: 92px 1fr; gap: 22px; align-items: baseline;
    padding: 20px 0; border-top: 1px solid var(--farsistrada-line-soft);
}
.timeline-row:last-child { border-bottom: 1px solid var(--farsistrada-line-soft); }
.timeline-row .year { font-weight: 800; font-size: 17px; letter-spacing: 0.01em; color: var(--farsistrada-blue); }
.timeline-row .event { font-size: 15px; line-height: 1.55; color: var(--farsistrada-ink-soft); }
.timeline-row .event strong { color: var(--farsistrada-ink); }

/* Numeri (#numeri): banda blu, celle bordate. .val/.lab = vocabolario metrica */
/* condiviso con gloss-stats / svc-stats / testimonial-metrics.                 */
.farsistrada-numeri { background: var(--farsistrada-blue); color: var(--farsistrada-white); padding: 74px 0; }
.farsistrada-numeri h2 { color: var(--farsistrada-white); margin-top: 14px; }
.numeri-intro { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: end; margin-bottom: 46px; }
.numeri-intro p { margin: 0; color: rgba(255, 255, 255, 0.74); }
.num-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.num-grid > div {
    padding: 28px 22px 26px; text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}
.num-grid > div:first-child { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.num-grid .val { display: block; font-weight: 800; font-size: clamp(34px, 3.6vw, 48px); line-height: 1; letter-spacing: -0.03em; color: var(--farsistrada-white); }
.num-grid .lab { display: block; margin-top: 12px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }

/* Mission & Vision (about-band #chi-siamo): due card, la seconda in negativo */
.about-band { background: var(--farsistrada-cream); border-top: 1px solid var(--farsistrada-line-soft); border-bottom: 1px solid var(--farsistrada-line-soft); padding: 80px 0; }
.about-band .section-head { margin-bottom: 40px; }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.mv-card { background: var(--farsistrada-paper); border: 1px solid var(--farsistrada-line-soft); border-radius: var(--farsistrada-radius-lg); padding: 36px; position: relative; overflow: hidden; }
.mv-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: var(--farsistrada-blue-tint); opacity: 0.6; }
.mv-card .label { font-family: var(--farsistrada-font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--farsistrada-blue); position: relative; z-index: 1; }
.mv-card h3 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 12px; color: var(--farsistrada-ink); position: relative; z-index: 1; }
.mv-card p { margin: 14px 0 0; position: relative; z-index: 1; }
.mv-card.dark { background: var(--farsistrada-blue); color: var(--farsistrada-white); }
.mv-card.dark .label { color: var(--farsistrada-sky); }
.mv-card.dark h3 { color: var(--farsistrada-white); }
.mv-card.dark p { color: rgba(255, 255, 255, 0.78); }
.mv-card.dark::after { background: rgba(255, 255, 255, 0.08); opacity: 1; }

/* Fondatore (#fondatore): scheda foto + biografia, filetto blu sul bordo sinistro */
.farsistrada-fondatore { padding: 80px 0; }
.farsistrada-fondatore .section-head { margin-bottom: 36px; }
.founder-card {
    display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center;
    background: var(--farsistrada-white); border: 1px solid var(--farsistrada-line);
    border-radius: var(--farsistrada-radius-lg); padding: 40px;
    box-shadow: var(--farsistrada-shadow); position: relative; overflow: hidden;
}
.founder-card::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--farsistrada-blue); }
/* Senza foto la scheda non collassa: fondo blu + iniziali derivate dal nome. */
.founder-photo {
    width: 100%; height: 340px; overflow: hidden; display: grid; place-items: center;
    background: var(--farsistrada-blue); border-radius: var(--farsistrada-radius-lg);
}
.founder-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-photo-fallback { font-weight: 800; font-size: 64px; letter-spacing: -0.02em; color: var(--farsistrada-sky); }
.founder-card .role { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--farsistrada-blue); }
.founder-card h3 { font-size: clamp(26px, 2.8vw, 34px); margin: 10px 0 0; }
.founder-card p { margin: 16px 0 0; max-width: 58ch; }
.founder-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.founder-tags span {
    font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--farsistrada-ink-soft); background: var(--farsistrada-cream);
    border: 1px solid var(--farsistrada-line); border-radius: var(--farsistrada-radius-xs); padding: 6px 10px;
}
.founder-card .btn-link { margin-top: 24px; }

/* Sostenibilità (#sostenibilita): 4 impegni bordati + progetti sostenuti */
.farsistrada-sostenibilita { padding: 80px 0; background: var(--farsistrada-cream); border-top: 1px solid var(--farsistrada-line-soft); }
.farsistrada-sostenibilita .section-head { margin-bottom: 36px; }
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--farsistrada-line); border: 1px solid var(--farsistrada-line); border-radius: var(--farsistrada-radius-lg); overflow: hidden; margin-top: 8px; }
.pillar-grid > div { background: var(--farsistrada-paper); padding: 28px 24px; }
.pillar-grid .num { font-family: var(--farsistrada-font-sans); font-size: 11px; letter-spacing: 0.16em; color: var(--farsistrada-blue); text-transform: uppercase; }
.pillar-grid h3 { margin: 12px 0 8px; font-size: 16px; }
.pillar-grid p { margin: 0; font-size: 14.5px; color: var(--farsistrada-ink-soft); }
.social-projects { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--farsistrada-line); }
.social-projects .sp-head { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--farsistrada-muted); }
.sp-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.sp-list > div { display: flex; flex-direction: column; gap: 5px; }
.sp-list b { font-weight: 800; font-size: 16px; color: var(--farsistrada-ink); }
.sp-list small { font-size: 13.5px; line-height: 1.5; color: var(--farsistrada-ink-soft); }

@media (max-width: 1000px) {
    .num-grid { grid-template-columns: repeat(3, 1fr); }
    .num-grid > div:nth-child(4) { border-left: 1px solid rgba(255, 255, 255, 0.16); }
    .numeri-intro { grid-template-columns: 1fr; gap: 20px; align-items: start; }
}
@media (max-width: 980px) { .story-grid { grid-template-columns: 1fr; gap: 44px; } }
@media (max-width: 900px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
    .founder-card { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
    .founder-photo { height: 280px; }
    .sp-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) { .mv-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
    .num-grid { grid-template-columns: repeat(2, 1fr); }
    .num-grid > div:nth-child(odd) { border-left: 1px solid rgba(255, 255, 255, 0.16); }
}
@media (max-width: 520px) { .pillar-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
    .timeline-row { grid-template-columns: 1fr; gap: 6px; }
    .sp-list { grid-template-columns: 1fr; }
}

/* ============================================================
   Single Libro (single-libro.php) — design "single-libro" (Mode C 2026-07-04)
   Via-C: riusa page-hero/tight/section-head/feature-grid/feature-card/serif/
   eyebrow/lead/dotgrid; qui SOLO le classi net-new del libro. Token --farsistrada-*.
   ============================================================ */

/* Hero libro: testo + cover 3D */
.book-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
/* Sottotitolo hero = design .sub: blu, corsivo, più piccolo del titolo (non una
   seconda riga a peso pieno). Block + margin lo staccano dal titolo (niente <br>). */
.book-hero .tagline { display: block; margin-top: 14px; color: var(--farsistrada-blue); font-style: italic; font-weight: 700; font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.01em; line-height: 1.3; }
.book-price-row { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 8px; }
.price-tag { display: inline-flex; align-items: baseline; gap: 9px; }
.price-tag .amt { font-size: 2.2rem; font-weight: 800; color: var(--farsistrada-blue); letter-spacing: -0.03em; line-height: 1; }
.price-tag .note { font-size: 0.85rem; color: var(--farsistrada-muted); font-weight: 600; }
.book-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }

/* Cover 3D (mockup CSS; fallback titolo su blu) */
.book-visual { display: flex; justify-content: center; }
.book3d { position: relative; width: min(320px, 78%); aspect-ratio: 15 / 21; border-radius: 3px 8px 8px 3px; overflow: hidden;
  transform: perspective(1600px) rotateY(-18deg); background: var(--farsistrada-blue);
  box-shadow: 12px 0 0 -2px var(--farsistrada-cream-deep), 16px 0 0 -2px var(--farsistrada-line), 20px 0 0 -2px var(--farsistrada-cream-deep),
    -12px 26px 40px -16px rgba(3, 69, 99, 0.40), 0 4px 10px rgba(14, 26, 38, 0.10); }
.book3d-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book3d-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 22px;
  color: var(--farsistrada-white); font-size: 1.35rem; line-height: 1.25; }
.book3d-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.05) 60%, transparent); }

/* Descrizione (the_content) */
.book-description { max-width: 760px; }
.book-description.rich p { margin-bottom: 1em; }

/* Indice + Prefazione */
.indice-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
.section-head-stack { display: block; margin-bottom: 28px; }
.indice-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.indice-list li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--farsistrada-line-soft); }
.indice-list li:last-child { border-bottom: 0; }
.indice-list .c-num { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--farsistrada-blue); min-width: 2.2em; }
.indice-list .c-title { color: var(--farsistrada-ink); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; line-height: 1.3; }
.indice-side { display: flex; flex-direction: column; gap: 24px; }
.prefazione-card { background: var(--farsistrada-blue-tint); border: 1px solid var(--farsistrada-blue-soft); border-radius: var(--farsistrada-radius-lg); padding: 32px; }
.prefazione-card .pc-kicker { display: inline-block; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; color: var(--farsistrada-blue); margin-bottom: 10px; }
.prefazione-card h3 { font-size: 21px; margin-bottom: 12px; }
.pc-body { color: var(--farsistrada-ink-soft); }

/* Specifiche libro (design "specs-mini"): tabellina bordata Pagine/Formato/Editore/Prezzo */
.specs-mini { border: 1px solid var(--farsistrada-line); border-radius: var(--farsistrada-radius-lg); overflow: hidden; }
.specs-mini .sr { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--farsistrada-line-soft); }
.specs-mini .sr:last-child { border-bottom: 0; }
.specs-mini .sr .lab { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; color: var(--farsistrada-muted); }
.specs-mini .sr .val { font-weight: 700; font-size: 0.95rem; color: var(--farsistrada-ink); text-align: right; }

/* Risorse del libro (Pattern #28): griglia di trigger + mosaico gallery.
   La skin del visualizzatore modale sta nella sezione "Media lightbox" in coda al file. */

/* Banda cream con filetti sopra e sotto - lo stesso trattamento di .farsistrada-services
   e .about-band: qui stacca le risorse dalla sezione che le precede e dalla CTA che
   segue, e per questo tiene il ritmo pieno di sezione invece di .tight. */
.libro-risorse { background: var(--farsistrada-cream); border-top: 1px solid var(--farsistrada-line-soft);
  border-bottom: 1px solid var(--farsistrada-line-soft); }
.libro-risorse .section-head { margin-bottom: 44px; }
.resource-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.resource-card { display: flex; flex-direction: column; gap: 16px; min-height: 200px; text-decoration: none; color: inherit;
  background: var(--farsistrada-white); border: 1px solid var(--farsistrada-line-soft); border-radius: var(--farsistrada-radius-lg);
  padding: 26px 24px; transition: none; }
.resource-card .r-type { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; color: var(--farsistrada-muted); }
.resource-card .r-label { margin: 0; font-size: 1.1875rem; line-height: 1.25; }
.resource-card .r-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--farsistrada-blue); font-weight: 700; font-size: 0.875rem; }
.resource-card .r-go .arrow { width: 14px; height: 14px; }
.resource-card .r-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--farsistrada-radius);
  background: var(--farsistrada-blue-tint); border: 1px solid var(--farsistrada-blue-soft); color: var(--farsistrada-blue); font-size: 1.2rem; line-height: 1; }

/* Mosaico di anteprime della gallery: il primo tassello è alto due righe, gli altri
   riempiono le due colonne a destra. Sotto i 820px la colonna larga sparisce e i
   tasselli tornano tutti della stessa altezza. */
.photos-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; margin-top: 24px; }
.photos-grid .photo-tile { position: relative; display: block; min-height: 220px; border-radius: var(--farsistrada-radius-lg);
  overflow: hidden; background: var(--farsistrada-blue-tint); }
.photos-grid .photo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photos-grid .photo-tile::after { content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(2, 38, 58, 0.55)); }
.photos-grid .photo-tile:hover::after { opacity: 1; }
.photos-grid .tall { grid-row: span 2; }
.photos-grid .pt-badge { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 8px 12px;
  border-radius: var(--farsistrada-radius-xs); background: var(--farsistrada-white); color: var(--farsistrada-blue);
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; font-weight: 700; }
@media (max-width: 820px) {
  .photos-grid { grid-template-columns: 1fr 1fr; }
  .photos-grid .tall { grid-row: auto; }
}

/* Scorciatoie alle collezioni nell'hero del libro (design "sc-links") */
.book-hero-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; }
.book-hero-links a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; font-weight: 700; color: var(--farsistrada-muted); }
.book-hero-links a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--farsistrada-blue-soft); }
.book-hero-links a:hover { color: var(--farsistrada-blue); }
.book-hero-links a:hover::before { background: var(--farsistrada-blue); }

/* Cosa trovi: intro editoriale a tutta larghezza */
.book-cosa-intro { max-width: 72ch; }

/* Chiusura CTA — banda blu 2-col (design "buy-cta"), ship-note = pannello traslucido */
.buy-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center;
  background: var(--farsistrada-blue); color: var(--farsistrada-white); border-radius: var(--farsistrada-radius-lg); padding: 60px 64px; }
.buy-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.45;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.4px); background-size: 22px 22px; }
.buy-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 100% 0%, rgba(143, 214, 255, 0.20), transparent 60%); }
.buy-cta > * { position: relative; z-index: 1; }
.buy-cta .eyebrow { color: rgba(255, 255, 255, 0.72); }
.buy-cta h2 { color: var(--farsistrada-white); }
.buy-cta p { color: rgba(255, 255, 255, 0.82); margin-top: 16px; max-width: 44ch; }
.buy-cta .buy-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
.buy-cta .price-tag .amt { color: var(--farsistrada-white); }
.buy-cta .price-tag .note { color: rgba(255, 255, 255, 0.70); }
.buy-cta .btn-primary { background: var(--farsistrada-white); border-color: var(--farsistrada-white); color: var(--farsistrada-blue); }
.ship-note { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--farsistrada-radius); padding: 22px 24px; }
.ship-note .sn-head { display: block; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 700; color: rgba(255, 255, 255, 0.6); }
.ship-note p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }

/* Archivio interim /libri/ — content-libro (riga) + card-libro (griglia) */
.book-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--farsistrada-line-soft); }
.book-row .visual-col { position: relative; aspect-ratio: 4 / 3; border-radius: var(--farsistrada-radius-lg); overflow: hidden; display: grid; place-items: center; background: var(--farsistrada-blue-deep); color: #fff; text-decoration: none; }
.book-row .visual-col img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.book-row-body .row-cta { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.book-card { display: flex; flex-direction: column; gap: 12px; background: var(--farsistrada-white); border: 1px solid var(--farsistrada-line); border-radius: var(--farsistrada-radius-lg); padding: 18px; box-shadow: var(--farsistrada-shadow-sm); }
.book-card .visual { position: relative; aspect-ratio: 3 / 4; border-radius: var(--farsistrada-radius); overflow: hidden; }
.book-card .visual .visual-photo { width: 100%; height: 100%; object-fit: cover; }
.book-card .visual .badge { position: absolute; top: 10px; right: 10px; background: var(--farsistrada-blue); color: var(--farsistrada-white); font-weight: 800; font-size: 0.85rem; padding: 4px 10px; border-radius: var(--farsistrada-radius); }

/* Hover/motion solo se l'utente non ha ridotto le animazioni (owner: reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .book3d { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .book3d:hover { transform: perspective(1600px) rotateY(-9deg); }
  .resource-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
  .resource-card:hover { transform: translateY(-4px); box-shadow: var(--farsistrada-shadow); border-color: var(--farsistrada-blue); }
  .resource-card .r-go .arrow { transition: transform 0.2s ease; }
  .resource-card:hover .r-go .arrow { transform: translateX(4px); }
  .photos-grid .photo-tile img { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .photos-grid .photo-tile:hover img { transform: scale(1.045); }
  .photos-grid .photo-tile::after { transition: opacity 0.3s ease; }
}

/* Responsive */
@media (max-width: 980px) {
  .book-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .indice-grid { grid-template-columns: 1fr; gap: 40px; }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .book-row { grid-template-columns: 1fr; gap: 24px; }
  .buy-cta { grid-template-columns: 1fr; gap: 32px; padding: 44px 30px; }
}
@media (max-width: 560px) {
  .resource-grid { grid-template-columns: 1fr; }
  .book3d { width: min(240px, 70%); }
}

/* ============================================================
   Archivio Libri (archive-libro.php) — design "archive-libro" (Mode C 2026-07-05)
   Via-C: riusa page-hero/eyebrow/serif/lead/btn/price-tag + net-new .arch-* e .marker.
   Il .book3d è riusato dal single (base) e ri-scalato/orientato qui sotto .arch-visual.
   ============================================================ */

/* Marker = occhiello "evidenziato" (campo payoff; stesso dato reso .eyebrow nel single,
   trattamento evidenziatore specifico dell'archivio). */
.marker { display: inline-block; font-style: italic; font-weight: 700; font-size: 15px; letter-spacing: 0.01em;
  color: var(--farsistrada-blue-deep); padding: 1px 7px 3px;
  background: linear-gradient(180deg, transparent 0 56%, var(--farsistrada-blue-soft) 56% 94%, transparent 94%); }

/* Hero archivio */
.arch-hero { padding: 72px 0 40px; }
.arch-hero h1 { font-size: clamp(42px, 5.2vw, 76px); }
.arch-hero .lead { margin-top: 24px; }

/* Lista — righe alternate a piena larghezza */
.archive { background: var(--farsistrada-paper); border-top: 1px solid var(--farsistrada-line-soft); }
.arch-row { padding: 92px 0; border-bottom: 1px solid var(--farsistrada-line-soft); }
.arch-row:last-child { border-bottom: 0; }
.arch-grid { display: grid; grid-template-columns: 0.82fr 1fr; gap: 76px; align-items: center; }
.arch-row.rev .arch-grid { grid-template-columns: 1fr 0.82fr; }
.arch-row.rev .arch-visual { order: -1; }

/* Numero di collana + stato */
.arch-head { display: flex; align-items: center; gap: 16px; }
.arch-idx { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--farsistrada-blue);
  display: flex; align-items: center; gap: 12px; }
.arch-idx::before { content: ""; width: 26px; height: 1px; background: var(--farsistrada-blue); display: inline-block; }
.arch-status { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px; margin-left: auto; }
.arch-status.live { color: var(--farsistrada-blue-deep); background: var(--farsistrada-blue-tint); border: 1px solid var(--farsistrada-blue-soft); }
.arch-status.soon { color: var(--farsistrada-muted); background: var(--farsistrada-cream); border: 1px solid var(--farsistrada-line); }
.arch-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Testo */
.arch-text .marker { margin-top: 20px; }
.arch-text h2 { margin-top: 20px; color: var(--farsistrada-ink); font-size: clamp(28px, 3vw, 40px); }
.arch-text .sub { color: var(--farsistrada-blue); font-style: italic; font-weight: 700; font-size: clamp(18px, 1.9vw, 22px);
  margin-top: 12px; letter-spacing: -0.01em; line-height: 1.3; }
.arch-text > p { margin-top: 20px; max-width: 52ch; }
.arch-meta { display: flex; gap: 10px 26px; flex-wrap: wrap; margin-top: 26px; }
.arch-meta .m { display: flex; flex-direction: column; gap: 3px; }
.arch-meta .m .lab { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--farsistrada-muted); }
.arch-meta .m .val { font-weight: 700; font-size: 15px; color: var(--farsistrada-ink); }
.arch-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; padding-top: 26px;
  border-top: 1px solid var(--farsistrada-line); align-items: center; }
.arch-cta .price-tag { margin-right: 6px; }
.arch-cta .price-tag .amt { font-size: 30px; }
.arch-cta .price-tag .note { font-size: 12px; }

/* Visual — copertina 3D (riusa .book3d base; qui scala/orientamento d'archivio) */
.book3d-wrap { display: flex; justify-content: center; }
.arch-visual .book3d { width: min(320px, 84%); transform: perspective(1700px) rotateY(-19deg); border-radius: 3px 8px 8px 3px;
  box-shadow: 13px 0 0 -2px var(--farsistrada-cream-deep), 17px 0 0 -2px var(--farsistrada-line), 21px 0 0 -2px var(--farsistrada-cream-deep),
    -14px 30px 44px -16px rgba(3, 69, 99, 0.40), 0 4px 10px rgba(14, 26, 38, 0.10); }
.arch-row.rev .book3d { transform: perspective(1700px) rotateY(19deg); border-radius: 8px 3px 3px 8px; }
.arch-visual .book3d .spine { position: absolute; left: 0; top: 0; bottom: 0; width: 15px; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.06) 60%, transparent); }
.arch-row.rev .book3d .spine { left: auto; right: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.06) 60%, transparent); }
.arch-visual .book3d .gloss { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(104deg, rgba(255, 255, 255, 0.18) 0 11%, transparent 30%); }
.arch-visual .book3d .book3d-cover,
.arch-visual .book3d .book3d-title { z-index: 1; }

/* Cover "in preparazione" — ghost (nessuna foto) */
.book3d.ghost { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px;
  background: radial-gradient(70% 60% at 50% 18%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(160deg, #0A557E 0%, var(--farsistrada-blue-deep) 60%, #022E42 100%); }
.book3d.ghost::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.4px); background-size: 18px 18px; opacity: 0.5; }
.book3d.ghost .g-num { position: relative; z-index: 1; font-weight: 800; font-size: 46px; color: rgba(255, 255, 255, 0.26); letter-spacing: -0.02em; }
.book3d.ghost .g-txt { position: relative; z-index: 1; margin-top: 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72); line-height: 1.7; }

/* Prossime uscite — banda blu */
.arch-note .box { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: center;
  padding: 52px 56px; background: var(--farsistrada-blue); color: var(--farsistrada-white); border-radius: var(--farsistrada-radius-lg); }
.arch-note .box::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.45;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.4px); background-size: 22px 22px; }
.arch-note .box > * { position: relative; z-index: 1; }
.arch-note h2 { color: var(--farsistrada-white); }
/* Solo la colonna del testo: nella colonna .side i <p> sono le righe del modulo
   CF7, che prendono layout e colori da .form-on-blue. */
.arch-note .copy p { color: rgba(255, 255, 255, 0.82); margin-top: 14px; max-width: 40ch; }

/* Motion solo se l'utente non ha ridotto le animazioni (owner: reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .arch-row .book3d:hover { transform: perspective(1700px) rotateY(-9deg); }
  .arch-row.rev .book3d:hover { transform: perspective(1700px) rotateY(9deg); }
}

/* Responsive */
@media (max-width: 940px) {
  .arch-hero { padding: 56px 0 32px; }
  .arch-row { padding: 60px 0; }
  .arch-grid, .arch-row.rev .arch-grid { grid-template-columns: 1fr; gap: 44px; max-width: 520px; }
  .arch-row.rev .arch-visual { order: 0; }
}
@media (max-width: 860px) {
  .arch-note .box { grid-template-columns: 1fr; padding: 40px 28px; }
}

/* ===================================================================
   Blog "Blog della logistica" — Posts page dei post nativi (Mode C, ADR 0005).
   Hero .page-hero riusato + featured full-width (primo sticky) + chip filtro
   categoria (riuso del pattern .chip dei corsi, come link a /category/{slug}/)
   + griglia .farsistrada-blog-card + tempo di lettura. Nessuna dipendenza nuova.
   =================================================================== */
/* Banda della griglia di card, condivisa dal blog-index, dagli archivi generici
   (archive.php: categorie, tag, autore) e dai risultati di ricerca. Le tre pagine
   mostrano card sotto lo stesso page-hero: stesso fondo e stesso ritmo, in una
   regola sola. */
.farsistrada-blog,
.farsistrada-archive,
.farsistrada-search { background: var(--farsistrada-paper); padding: 8px 0 56px; }
/* Archivio e ricerca non hanno il pannello "In evidenza" sopra la griglia: senza
   quel blocco le card partirebbero incollate all'hero. */
.farsistrada-archive,
.farsistrada-search { padding-top: 48px; }

/* Card articolo (griglia + featured) — pattern .cc-visual dei corsi: banda visual
   ad altezza fissa con foto in cover se presente, fallback gradiente branded se
   assente (design archive-blog: card senza foto = banda colorata). */
.farsistrada-blog-card {
    overflow: hidden;
    border: 1px solid var(--farsistrada-line-soft);
    border-radius: var(--farsistrada-radius-lg);
    background: var(--farsistrada-white);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.farsistrada-blog-card:hover { transform: translateY(-4px); border-color: var(--farsistrada-blue); box-shadow: var(--farsistrada-shadow); }

/* Banda visual: altezza fissa, categoria (link) + tag "Articolo" sovrapposti.
   Fallback branded (senza foto): puntini + glow d'angolo sul gradiente. La foto
   (.cc-photo, z0) lo copre; lo scrim (.has-photo) tiene leggibili gli overlay. */
.farsistrada-blog-card .cc-visual {
    height: 150px;
    position: relative;
    overflow: hidden;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    color: var(--farsistrada-white);
    background:
        radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.4px) 0 0 / 20px 20px,
        radial-gradient(72% 90% at 100% 0%, rgba(158, 210, 238, 0.22), transparent 60%),
        linear-gradient(135deg, var(--farsistrada-blue) 0%, var(--farsistrada-blue-deep) 100%);
}
.farsistrada-blog-card .cc-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.farsistrada-blog-card.has-photo .cc-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--farsistrada-photo-scrim);
}
/* Categoria: link sovrapposto alla banda, sopra lo stretched-link (z-index) → /category/{slug}/. */
.farsistrada-blog-badge {
    position: relative;
    z-index: 2;
    max-width: 62%;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 6px rgba(2, 34, 53, 0.45);
    transition: color .2s ease;
}
.farsistrada-blog-badge:hover { color: var(--farsistrada-blue-tint); }

/* Featured "In evidenza" = primo sticky nativo, sopra la griglia e solo a pagina 1
   (design .post-featured): due colonne, pannello visual a sinistra e corpo a destra.
   Markup proprio (template-parts/blog-featured.php), non la card rimodellata. */
/* Stesso stacco che c'è fra le righe della griglia (gutter verticale gy-5): il
   pannello in evidenza non deve stare più stretto alle card di quanto le card
   stiano fra loro. */
.featured-row { margin-bottom: 48px; }
.post-featured {
    position: relative;                       /* ancora dello stretched-link del titolo */
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    overflow: hidden;
    border: 1px solid var(--farsistrada-line-soft);
    border-radius: var(--farsistrada-radius-lg);
    background: var(--farsistrada-white);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.post-featured:hover { transform: translateY(-4px); border-color: var(--farsistrada-blue); box-shadow: var(--farsistrada-shadow); }

/* Pannello visual: foto in cover se presente, altrimenti lo stesso fondo branded
   della card (puntini + glow d'angolo sul gradiente blu). Il claim del mock non è
   un dato del post: al suo posto il pannello resta grafico. */
.post-featured .pf-visual {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--farsistrada-white);
    background:
        radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.4px) 0 0 / 20px 20px,
        radial-gradient(72% 90% at 100% 0%, rgba(158, 210, 238, 0.22), transparent 60%),
        linear-gradient(135deg, var(--farsistrada-blue) 0%, var(--farsistrada-blue-deep) 100%);
}
.post-featured .cc-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.post-featured.has-photo .pf-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--farsistrada-photo-scrim);
}
.post-featured .pf-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Variante piena del tag dentro il pannello (design: bianco pieno, senza bordo). */
.post-featured .cc-tag { background: var(--farsistrada-white); color: var(--farsistrada-blue-deep); border-color: transparent; }
.post-featured .pf-kicker {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    text-shadow: 0 1px 6px rgba(2, 34, 53, 0.45);
    transition: color .2s ease;
}
.post-featured .pf-kicker:hover { color: var(--farsistrada-white); }

/* Corpo: meta, titolo, excerpt e piede allineato in fondo. */
.post-featured .pf-body { padding: 32px 34px; display: flex; flex-direction: column; gap: 14px; }
.post-featured .pf-body h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.02em; color: var(--farsistrada-ink); }
.post-featured .pf-body p { margin: 0; color: var(--farsistrada-ink-soft); }
.post-featured .pf-foot {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;              /* su schermo stretto le due etichette vanno a capo */
    gap: 10px 12px;
    border-top: 1px solid var(--farsistrada-line-soft);
}
.post-featured .pf-foot .btn-link { margin-left: auto; }

@media (max-width: 860px) {
    .post-featured { grid-template-columns: 1fr; }
    .post-featured .pf-visual { min-height: 200px; }
    .post-featured .pf-body { padding: 26px 24px; }
}

/* Piede della card: tempo di lettura + CTA, separati da un filo (design .cc-foot).
   Il padding orizzontale riusa lo spacer di .card-body, così i due blocchi sono
   allineati. La CTA va a destra anche quando il tempo di lettura manca. */
.farsistrada-blog-card .cc-foot {
    padding: 14px var(--bs-card-spacer-x, 1rem) 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;              /* su schermo stretto le due etichette vanno a capo */
    gap: 10px 12px;
    border-top: 1px solid var(--farsistrada-line-soft);
}
.farsistrada-blog-card .cc-foot .btn-link { margin-left: auto; font-size: 14px; }

/* ===================================================================
   Paginazione (Pattern #15) — skin del pager del Design Export.
   L'unico pager disegnato è quello del Glossario (.pager): vale per ogni
   paginazione del tema, blog, ricerca e archivi, e per il
   Glossario con e senza JS, dove il lotto AJAX rimanda lo stesso <nav> dell'helper.
   Le custom property di .pagination hanno nel CSS compilato di Bootstrap i
   colori di serie (#0d6efd): non seguono --bs-primary riagganciato al brand,
   vanno ridichiarate qui. Le voci stanno staccate di 8px, ognuna col suo
   raggio, invece del gruppo unito di Bootstrap.
   =================================================================== */
.farsistrada-pagination .pagination {
    --bs-pagination-padding-x: 13px;
    --bs-pagination-padding-y: 0;
    --bs-pagination-font-size: 14.5px;
    --bs-pagination-color: var(--farsistrada-ink-soft);
    --bs-pagination-bg: var(--farsistrada-white);
    --bs-pagination-border-color: var(--farsistrada-line);
    --bs-pagination-border-radius: var(--farsistrada-radius-xs);
    --bs-pagination-hover-color: var(--farsistrada-blue);
    --bs-pagination-hover-bg: var(--farsistrada-white);
    --bs-pagination-hover-border-color: var(--farsistrada-blue);
    --bs-pagination-focus-color: var(--farsistrada-blue);
    --bs-pagination-focus-bg: var(--farsistrada-white);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    --bs-pagination-active-color: var(--farsistrada-white);
    --bs-pagination-active-bg: var(--farsistrada-blue);
    --bs-pagination-active-border-color: var(--farsistrada-blue);
    --bs-pagination-disabled-color: var(--farsistrada-ink-soft);
    --bs-pagination-disabled-bg: var(--farsistrada-white);
    --bs-pagination-disabled-border-color: var(--farsistrada-line);
    column-gap: 8px;
}
.farsistrada-pagination .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px;
    border-radius: var(--bs-pagination-border-radius);
    font-weight: 700; line-height: 1;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
/* Bootstrap sovrappone di 1px le voci successive alla prima (margin-left
   negativo) per fonderne i bordi nel gruppo unito: qui le voci sono staccate
   dal column-gap, che quel -1px accorcerebbe a 7px. Stesso selettore di
   Bootstrap, quindi stessa specificità: vince perché viene dopo. */
.farsistrada-pagination .page-item:not(:first-child) .page-link { margin-left: 0; }
/* Precedente e successivo (design .pager .pg-nav): la freccia del mock accanto
   all'etichetta, a 8px, e 16px di padding orizzontale invece dei 13px delle
   cifre. La freccia è la SVG a tratto del design usata come maschera sul colore
   del testo, così segue la voce a riposo e in hover come il suo stroke
   currentColor. L'aggancio è il rel che l'helper mette sulle due voci; agli
   estremi la voce non c'è (il design la mostrava disattivata). */
.farsistrada-pagination .page-link[rel="prev"],
.farsistrada-pagination .page-link[rel="next"] { gap: 8px; padding-inline: 16px; }
.farsistrada-pagination .page-link[rel="prev"]::before,
.farsistrada-pagination .page-link[rel="next"]::after {
    content: ""; flex: 0 0 auto; width: 14px; height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--farsistrada-pager-arrow) center / 14px 14px no-repeat;
    mask: var(--farsistrada-pager-arrow) center / 14px 14px no-repeat;
}
.farsistrada-pagination .page-link[rel="prev"] {
    --farsistrada-pager-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M11 7H3M7 3 3 7l4 4'/%3E%3C/svg%3E");
}
.farsistrada-pagination .page-link[rel="next"] {
    --farsistrada-pager-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M3 7h8M7 3l4 4-4 4'/%3E%3C/svg%3E");
}
/* Puntini fra i gruppi di pagine: testo, senza la carrozzeria della voce. */
.farsistrada-pagination .page-item[aria-hidden="true"] > .page-link {
    min-width: 0; padding: 0 4px; border-color: transparent; background: none;
    color: var(--farsistrada-muted);
}

/* Stacco della paginazione dalla griglia del blog e degli archivi: 56px, ritocco del
   cliente (design-remapping.md §"Archivio Blog"), più largo del `mt-4` (1.5rem) che il
   <nav> del render #15 porta di suo. `mt-4` è una utility Bootstrap con !important:
   solo un !important la sostituisce. Altrove (ricerca) resta il `mt-4` dell'helper. */
.farsistrada-blog .farsistrada-pagination,
.farsistrada-archive .farsistrada-pagination { margin-top: 56px !important; }

@media (prefers-reduced-motion: reduce) {
    .farsistrada-blog-card,
    .post-featured { transition: none; }
    .farsistrada-blog-card:hover,
    .post-featured:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Landing Corsi (corsi di logistica e corsi di sicurezza)
   Token del design rimappati su --farsistrada-*. Riusa .page-hero/.crumbs/
   .two-up/.section-head/.eyebrow/.tight/.academy/.instructor/.btn-on-blue:
   qui vivono solo i tre componenti che l'export porta nuovi (.area-cards,
   .impact, .testi) più i due vincoli di misura delle sezioni.
   Il font mono del mock diventa Mulish uppercase + letter-spacing, come per
   .svc-stats e .academy-areas (il tema ha un carattere unico).
   ══════════════════════════════════════════════════════════════════════ */

/* L'export stringe la gronda della section-head a 40px su questa sola sezione. */
.farsistrada-landing-corsi-aree .section-head { margin-bottom: 40px; }
/* Nessun text-wrap: balance qui. L'export spezza il titolo con un <br> a mano dopo
   i due punti, che per regola non può vivere nel valore del campo (l'andata a capo
   è presentazione, §4.2). Provato balance: sposta il break ma lascia orfana la prima
   riga su questo copy, e ogni tuning più fine si romperebbe al primo cambio di testo
   dal wp-admin. Wrap naturale = 5 righe come l'export, robusto a copy variabile. */

/* Aree tematiche — griglia 2x2 di card editoriali (non link, non termini). */
.area-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 8px;
}
.area-cards .ac {
    padding: 32px 30px;
    border: 1px solid var(--farsistrada-line-soft);
    border-radius: var(--farsistrada-radius-lg);
    background: var(--farsistrada-white);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.area-cards .ac .ac-num {
    font-family: var(--farsistrada-font-sans);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--farsistrada-blue);
}
.area-cards .ac h3 { font-size: 24px; color: var(--farsistrada-ink); }
.area-cards .ac p {
    margin: 0;
    color: var(--farsistrada-ink-soft);
    font-size: 16.5px;
    line-height: 1.55;
}
@media (max-width: 720px) {
    .area-cards { grid-template-columns: 1fr; }
}

/* Dato di impatto — banda cream, cifra grande + coda piccola. */
.impact {
    background: var(--farsistrada-cream);
    border-top: 1px solid var(--farsistrada-cream-deep);
    border-bottom: 1px solid var(--farsistrada-cream-deep);
}
.impact .container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 48px;
    align-items: center;
}
.impact .fig {
    font-family: var(--farsistrada-font-sans);
    font-weight: 800;
    font-size: clamp(72px, 10vw, 132px);
    line-height: 0.9;
    color: var(--farsistrada-blue);
    letter-spacing: -0.02em;
}
.impact .fig small { font-size: 0.42em; font-weight: 700; }
.impact .txt { max-width: 40ch; }
.impact .txt .eyebrow { margin-bottom: 14px; }
.impact .txt p {
    font-size: 20px;
    line-height: 1.5;
    color: var(--farsistrada-ink);
    margin: 0;
}
@media (max-width: 720px) {
    .impact .container { grid-template-columns: 1fr; gap: 20px; }
}

/* Testimonianza singola — citazione di pagina (non il CPT testimonial). */
.testi { background: var(--farsistrada-white); }
.testi .quote { max-width: 60ch; }
.testi .q-mark {
    font-family: var(--farsistrada-font-sans);
    font-size: 76px;
    line-height: 0.4;
    color: var(--farsistrada-blue-soft);
    display: block;
    height: 40px;
}
/* Nessun font-weight: il design lascia la citazione al peso di base (400) — il
   contrasto della sezione lo porta la dimensione, non il grassetto. */
.testi blockquote {
    margin: 0;
    font-family: var(--farsistrada-font-sans);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.32;
    color: var(--farsistrada-ink);
    letter-spacing: -0.01em;
    text-wrap: pretty;
}
.testi .cite {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--farsistrada-line);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.testi .cite b {
    font-family: var(--farsistrada-font-sans);
    font-weight: 700;
    font-size: 16px;
    color: var(--farsistrada-ink);
}
.testi .cite span {
    font-family: var(--farsistrada-font-sans);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--farsistrada-muted);
}

/* Banda Academy senza aside: l'export vincola la misura della colonna unica. */
.academy-intro-solo { max-width: 720px; }

/* ===================================================================
   Media lightbox (Pattern #28) — skin del visualizzatore modale.
   La struttura è Bootstrap Modal + Swiper: qui non si ridefinisce nulla di
   funzionale (backdrop, focus, scroll lock, trasporto delle slide), si sostituisce
   solo la pelle di default dei due vendor con quella dell'export.
   Il `var(--mono)` dell'export non ha un corrispettivo nel tema, che ha una sola
   famiglia: rende come Mulish maiuscolo spaziato, come ogni altra etichetta.
   =================================================================== */

.farsistrada-lightbox {
    /* Altezza della fascia di identità sotto il media. Serve in due punti: alla
       fascia stessa e all'offset delle frecce, che devono centrarsi sul media e non
       sull'intero palco. Un solo valore, nessun numero magico duplicato. */
    --farsistrada-lightbox-caption-h: 60px;
    --farsistrada-lightbox-stage-bg: #04212F;
    /* Aria intorno al pannello, come la `padding` della shell nell'export: fluida,
       12px sul telefono e 40px da 1334px in su. */
    --farsistrada-lightbox-gutter: clamp(12px, 3vw, 40px);
}

/* Bootstrap monta il backdrop come fratello del modale, fuori dal nostro scope:
   è l'unico punto del componente che va scritto sul selettore globale. Il
   visualizzatore è l'unico modale del tema, quindi non c'è un secondo
   trattamento da cui distinguerlo. */
.modal-backdrop { --bs-backdrop-bg: #02263A; --bs-backdrop-opacity: 0.88; }
.modal-backdrop.show { backdrop-filter: blur(4px); }

/* Il centraggio orizzontale va dichiarato, non ereditato: Bootstrap mette
   `margin-left/right: auto` sul dialog solo da 576px in su, quindi sotto quella
   soglia il `margin` resta 0.5rem su tutti i lati e un `max-width` più stretto
   dello spazio disponibile lascia il pannello incollato a sinistra (misurato:
   8px a sinistra, 24px a destra su un viewport da 390px). Chi impone la larghezza
   si prende anche il centraggio. */
.farsistrada-lightbox .modal-dialog {
    max-width: min(1180px, 100% - var(--farsistrada-lightbox-gutter) * 2);
    margin-inline: auto;
}
.farsistrada-lightbox .modal-content { border: 0; border-radius: var(--farsistrada-radius-lg); overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(2, 38, 58, 0.6); }

/* Testata */
.farsistrada-lightbox .modal-header { position: relative; align-items: flex-start; gap: 24px; padding: 22px 24px 18px;
    border-bottom: 1px solid var(--farsistrada-line-soft); }
.farsistrada-lightbox-head { flex: 1 1 auto; min-width: 0; }
.farsistrada-lightbox-kicker { display: block; text-transform: uppercase; letter-spacing: 0.16em;
    font-size: 0.66rem; font-weight: 700; color: var(--farsistrada-blue); }
.farsistrada-lightbox .modal-title { margin: 8px 0 0; font-size: clamp(19px, 2.2vw, 26px); font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.15; color: var(--farsistrada-ink); }
.farsistrada-lightbox-sub { margin: 8px 0 0; max-width: 62ch; font-size: 0.875rem; color: var(--farsistrada-muted); }
.farsistrada-lightbox-head-end { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; margin-left: auto; }
.farsistrada-lightbox-counter { white-space: nowrap; font-variant-numeric: tabular-nums; text-transform: uppercase;
    letter-spacing: 0.14em; font-size: 0.7rem; font-weight: 700; color: var(--farsistrada-muted); }
/* Il default Bootstrap è una x da 1em in content-box, con un margine negativo che
   la incolla al bordo della testata: qui è un bottone tondo dentro il gruppo di
   destra, quindi vanno riazzerati box-sizing, padding e margine. 44px e non i
   38px del mock: è il bersaglio minimo per il tocco dei controlli del tema
   (Pattern #28, come le frecce e gli slider). */
.farsistrada-lightbox .btn-close { box-sizing: border-box; width: 44px; height: 44px; padding: 0; margin: 0;
    flex: 0 0 auto; border: 1px solid var(--farsistrada-line); border-radius: 50%; opacity: 1;
    background-color: var(--farsistrada-white); background-size: 13px auto; }
.farsistrada-lightbox .btn-close:hover { background-color: var(--farsistrada-blue); border-color: var(--farsistrada-blue);
    filter: var(--bs-btn-close-white-filter); }

/* Palco */
.farsistrada-lightbox .modal-body { padding: 0; }
.farsistrada-lightbox-stage {
    --swiper-navigation-size: 18px;
    --swiper-navigation-top-offset: calc((100% - var(--farsistrada-lightbox-caption-h)) / 2);
}
.farsistrada-lightbox-stage .swiper-slide { display: flex; flex-direction: column; height: auto;
    background: var(--farsistrada-lightbox-stage-bg); }
/* Il media si ferma a due terzi dell'altezza utile: sotto ci stanno fascia e rail,
   e un 16:9 a piena larghezza del modale li spingerebbe fuori schermo. */
/* Proporzione fissa come nel design: è il riquadro a essere sempre lo stesso, non
   la foto. Senza, Swiper equalizza le slide sull'altezza dello scatto più alto e
   ogni foto orizzontale lascia un vuoto sotto la didascalia. */
.farsistrada-lightbox-image { display: block; width: 100%; aspect-ratio: 3 / 2;
    max-height: min(66vh, 620px); object-fit: contain; }
.farsistrada-lightbox-stage .swiper-slide > .ratio { width: 100%; max-width: calc(66vh * 16 / 9); margin: 0 auto; }

.farsistrada-lightbox-facade { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
    background: var(--farsistrada-lightbox-stage-bg); }
.farsistrada-lightbox-facade img { width: 100%; height: 100%; object-fit: cover; }
.farsistrada-lightbox-play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%;
    display: grid; place-items: center; font-size: 2rem; line-height: 1; color: var(--farsistrada-white);
    background: rgba(4, 33, 47, 0.72); border: 1px solid rgba(255, 255, 255, 0.3); }
.farsistrada-lightbox-facade:hover .farsistrada-lightbox-play,
.farsistrada-lightbox-facade:focus-visible .farsistrada-lightbox-play { background: var(--farsistrada-blue);
    border-color: var(--farsistrada-blue); }

/* Slide documento: ritratto + citazione. In flex, non in griglia a due colonne,
   perché il ritratto può mancare e una colonna vuota resterebbe comunque. */
.farsistrada-lightbox-document { margin: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: clamp(24px, 4vw, 48px); padding: clamp(24px, 4vw, 52px); background: var(--farsistrada-cream); }
.farsistrada-lightbox-portrait { flex: 0 0 auto; width: 180px; height: 180px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--farsistrada-line); background: var(--farsistrada-white); }
.farsistrada-lightbox-document blockquote { flex: 1 1 320px; margin: 0; max-width: 632px; font-size: clamp(18px, 2.1vw, 25px);
    font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--farsistrada-ink); text-wrap: pretty; }

/* Frecce: la pelle di default di Swiper è un glifo colorato senza contenitore. */
.farsistrada-lightbox-stage .swiper-button-prev,
.farsistrada-lightbox-stage .swiper-button-next { width: 46px; height: 46px; margin-top: -23px; border-radius: 50%;
    color: var(--farsistrada-white); background: rgba(4, 33, 47, 0.62); border: 1px solid rgba(255, 255, 255, 0.28); }
.farsistrada-lightbox-stage .swiper-button-prev { left: 14px; }
.farsistrada-lightbox-stage .swiper-button-next { right: 14px; }
.farsistrada-lightbox-stage .swiper-button-prev:hover,
.farsistrada-lightbox-stage .swiper-button-next:hover { background: var(--farsistrada-blue); border-color: var(--farsistrada-blue); }

/* Fascia di identità della slide */
.farsistrada-lightbox-caption { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center;
    gap: 4px 14px; padding: 16px 24px; min-height: var(--farsistrada-lightbox-caption-h);
    background: var(--farsistrada-white); border-top: 1px solid var(--farsistrada-line-soft); }
.farsistrada-lightbox-caption-index { font-variant-numeric: tabular-nums; letter-spacing: 0.12em; font-size: 0.7rem;
    font-weight: 700; color: var(--farsistrada-blue); }
.farsistrada-lightbox-caption-text { font-size: 0.95rem; font-weight: 700; color: var(--farsistrada-ink); }
.farsistrada-lightbox-caption-meta { margin-left: auto; display: inline-flex; align-items: baseline; gap: 14px;
    text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem; font-weight: 700; color: var(--farsistrada-muted); }
.farsistrada-lightbox-caption-meta a { white-space: nowrap; text-decoration: none; color: var(--farsistrada-muted); }
.farsistrada-lightbox-caption-meta a:hover { color: var(--farsistrada-blue); }

/* Rail: slidesPerView 'auto', quindi la larghezza del tassello la fissa il CSS. */
.farsistrada-lightbox-rail { padding: 16px 24px 20px; background: var(--farsistrada-cream);
    border-top: 1px solid var(--farsistrada-line-soft); }
.farsistrada-lightbox-rail .swiper-slide { width: auto; height: auto; }
.farsistrada-lightbox-thumb { position: relative; display: block; width: 124px; aspect-ratio: 16 / 9; padding: 0;
    overflow: hidden; cursor: pointer; border: 1px solid var(--farsistrada-line);
    border-radius: var(--farsistrada-radius-xs); background: var(--farsistrada-blue-deep); }
.farsistrada-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; }
.farsistrada-lightbox-thumb:hover img { opacity: 1; }
/* Senza immagine il tassello resta il numero di posizione: il rail continua a
   contare gli elementi anche in una collezione di soli documenti. */
.farsistrada-lightbox-thumb-index { position: absolute; inset: 0; display: grid; place-items: center;
    background: var(--farsistrada-white); color: var(--farsistrada-blue); letter-spacing: 0.1em;
    font-size: 0.72rem; font-weight: 700; }
.farsistrada-lightbox-rail .swiper-slide-thumb-active .farsistrada-lightbox-thumb { border-color: var(--farsistrada-blue);
    box-shadow: 0 0 0 2px var(--farsistrada-blue); }
.farsistrada-lightbox-rail .swiper-slide-thumb-active .farsistrada-lightbox-thumb img { opacity: 1; }

.farsistrada-lightbox-facade:focus-visible,
.farsistrada-lightbox-thumb:focus-visible { outline: 2px solid var(--farsistrada-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .farsistrada-lightbox .btn-close { transition: background-color 0.2s ease, border-color 0.2s ease; }
  .farsistrada-lightbox-play { transition: background 0.2s ease, border-color 0.2s ease; }
  .farsistrada-lightbox-stage .swiper-button-prev,
  .farsistrada-lightbox-stage .swiper-button-next { transition: background 0.2s ease, border-color 0.2s ease; }
  .farsistrada-lightbox-thumb { transition: border-color 0.2s ease, transform 0.2s ease; }
  .farsistrada-lightbox-thumb:hover { transform: translateY(-2px); }
  .farsistrada-lightbox-thumb img { transition: opacity 0.2s ease; }
}

@media (max-width: 760px) {
  /* Didascalia su due righe fisse (la meta scende sotto): le frecce sono centrate
     sul media con calc((100% - questa altezza) / 2), quindi l'altezza deve essere
     nota - e per esserlo l'etichetta non può andare a capo. */
  .farsistrada-lightbox { --farsistrada-lightbox-caption-h: 74px; }
  .farsistrada-lightbox-caption-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .farsistrada-lightbox .modal-header { padding: 18px 18px 14px; }
  .farsistrada-lightbox-head { padding-right: 114px; }
  .farsistrada-lightbox-head-end { position: absolute; top: 18px; right: 18px; gap: 10px; margin-left: 0; }
  .farsistrada-lightbox-caption { padding: 14px 18px; }
  .farsistrada-lightbox-caption-meta { width: 100%; margin-left: 0; }
  .farsistrada-lightbox-rail { padding: 12px 18px 16px; }
  .farsistrada-lightbox-thumb { width: 96px; }
  /* 44px, non i 38px del mock: sotto quella misura la freccia è un bersaglio
     troppo piccolo per il tocco (Pattern #28). */
  .farsistrada-lightbox-stage .swiper-button-prev,
  .farsistrada-lightbox-stage .swiper-button-next { width: 44px; height: 44px; margin-top: -22px; }
  .farsistrada-lightbox-portrait { width: 96px; height: 96px; }
  .farsistrada-lightbox-play { width: 56px; height: 56px; font-size: 1.5rem; }
}

/* ===================================================================
   Ricerca (search.php) — hero con form + griglia di card neutre.
   È l'unica pagina a risultati di tipo MISTO: la card non ha varianti
   per tipo, quindi tutto il suo trattamento sta in queste poche regole.
   La banda della griglia è condivisa con blog e archivi (regola sopra).
   =================================================================== */

/* Form nell'hero: largo quanto una riga di lettura, non quanto il container —
   un campo lungo 1240px inviterebbe a scrivere frasi, non termini. */
.farsistrada-search-hero-form { margin-top: 26px; max-width: 560px; }

.farsistrada-searchform .form-control {
    padding: 13px 16px;
    font-size: 15.5px;
    border: 1px solid var(--farsistrada-line);
    background: var(--farsistrada-white);
    color: var(--farsistrada-ink);
}
.farsistrada-searchform .form-control::placeholder { color: var(--farsistrada-muted); }
/* Il focus ring di Bootstrap è il suo blu di default: qui vale quello del brand. */
.farsistrada-searchform .form-control:focus {
    border-color: var(--farsistrada-blue);
    box-shadow: 0 0 0 3px rgba(12, 98, 147, 0.14);
}

/* Card del risultato: stessa carrozzeria della card del blog (bordo, raggio,
   sollevamento all'hover), senza banda visual — in ricerca conta il testo che
   ha fatto match, e una foto per i tipi che ce l'hanno spezzerebbe la griglia
   in due classi di card. */
.farsistrada-search-card {
    border: 1px solid var(--farsistrada-line-soft);
    border-radius: var(--farsistrada-radius-lg);
    background: var(--farsistrada-white);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.farsistrada-search-card:hover { transform: translateY(-4px); border-color: var(--farsistrada-blue); box-shadow: var(--farsistrada-shadow); }
.farsistrada-search-card .card-body { padding: 24px; }
.farsistrada-search-card .eyebrow { margin-bottom: 14px; }
.farsistrada-search-card .card-title { margin-bottom: 10px; font-size: 21px; line-height: 1.28; }
.farsistrada-search-card .card-text { font-size: 15px; margin-bottom: 18px; }
.farsistrada-search-card .sc-cta { font-size: 14px; }