/*
Theme Name: Federico Olivati
Theme URI: https://federicoolivati.it
Description: Tema child di Hello Elementor per federicoolivati.it — progetto BSS Bookness. Contiene i token di design (colori, tipografia, spaziature) e le classi delle sezioni ricorrenti, richiamabili da Elementor come classi CSS aggiuntive.
Author: ScafNet — Stefano Scaffidi Domianello
Author URI: https://scafnet.it
Template: hello-elementor
Version: 1.24.2
Text Domain: federicoolivati
*/

/* ==================================================================
   1. TOKEN — cambia qui, non nelle sezioni
   In Elementor: Impostazioni sito > Colori globali, usa gli stessi hex.
================================================================== */
:root {
  /* Palette della copertina definitiva (blu notte, avorio, oro), settembre
     2026. Il nome --fo-verde resta anche se il verde non esiste piu' in
     copertina: rinominarlo vuol dire toccare tutti i selettori, ed e' un
     lavoro a se'. Contrasti gia' verificati, non ricalcolati qui. */
  --fo-ink:        #16202F;
  --fo-ink-soft:   #46525C;
  --fo-paper:      #F8F2ED;
  --fo-paper-2:    #EFE8E1;
  --fo-line:       #D8D0C6;
  --fo-verde:      #182945;   /* blu notte */
  --fo-verde-dark: #101C31;
  --fo-ambra:      #C59815;   /* oro. SOLO filetti, bordi, decori: 2.4 su carta */
  --fo-ambra-txt:  #8A5A12;   /* per il TESTO: 5.33 su carta */

  --fo-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --fo-body:    "Source Serif 4", Georgia, serif;
  --fo-mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Colore della filigrana "1 1" su /bonus. Va dichiarato come token perche'
     cambia col fondo: scuro sulla carta, chiaro nella sala. Il colore del
     testo non serve — sulle sezioni sta sui widget figli, non sulla sezione. */
  --fo-filigrana: var(--fo-ink);
  --fo-filigrana-op: .05;

  /* Raggio degli angoli. Entrambe le varianti lo azzerano: sta qui una
     volta sola, così non c'è un elenco di selettori da tenere allineato
     ogni volta che si aggiunge un riquadro. */
  --fo-raggio: 3px;

  /* Testo sopra i fondi scuri (.fo-dark, hero della variante Sala). */
  --fo-su-scuro:      #F8F2ED;
  --fo-su-scuro-tenue:#C3CBD1;
  --fo-su-scuro-link: #E3B75C;

  /* L'anello del focus è più sotto, su body: vedi la nota lì. */

  /* --- Scala delle spaziature -------------------------------------
     Sette gradini, in rem invece che in pixel: le distanze seguono la
     dimensione del testo anziché restare fisse. Prima i margini erano
     scritti a mano sezione per sezione — 28, 32, 40, 48, 64, 72, 104 —
     e non appartenevano a nessuna serie. Chi ha bisogno di uno spazio
     sceglie un gradino; se davvero non c'è, si aggiunge qui.
     I rem si calcolano sulla base tipografica dichiarata su <html>, che
     ogni variante ridefinisce: le distanze seguono la dimensione del
     testo scelta dalla direzione, e la preferenza di corpo testo del
     browser. I pixel qui accanto valgono per la Carta (base 18px);
     nella Sala (17px) sono più stretti di circa il 6%. */
  --fo-s-1: .5rem;    /*  9px */
  --fo-s-2: .75rem;   /* 13px */
  --fo-s-3: 1rem;     /* 18px */
  --fo-s-4: 1.5rem;   /* 27px */
  --fo-s-5: 2rem;     /* 36px */
  --fo-s-6: 3rem;     /* 54px */
  --fo-s-7: 4rem;     /* 72px */

  /* Respiro verticale di una sezione. Un valore solo: prima le pagine
     PHP usavano clamp(56px,8vw,104px) e quelle Elementor
     clamp(48px,7vw,88px), così la stessa sezione respirava in modo
     diverso a seconda di come era stata costruita la pagina. */
  --fo-sezione: clamp(3.5rem, 7vw, 6.5rem);   /* 63 → 117 sulla Carta */
  --fo-sezione-apertura: clamp(2.5rem, 5vw, 4.5rem);  /* la prima della pagina */

  /* Altezza della testata fissa. Serve a chi salta a un'ancora: senza,
     il titolo di destinazione finisce sotto l'header. */
  --fo-testata: 72px;

  /* --- Scala dei breakpoint ---------------------------------------
     Due sole soglie, le stesse di Elementor (767 e 1024): tema e
     motore delle pagine cambiano layout nello stesso punto, senza
     fasce in cui uno dice "telefono" e l'altro "tablet". Prima ce
     n'erano sette, nessuna coincidente con le altre né con Elementor:
     600, 620, 699, 760, 800, 860, 900.

        ≤ 767     una colonna
        768—1024  due colonne
        ≥ 1025    tre colonne, layout pieno

     Nessuna eccezione: anche il menu a scomparsa usa la soglia 1024,
     dove le sue voci smettono comunque di entrarci. */
}

/* ==================================================================
   2. BASE
================================================================== */
/* Base tipografica. Sta qui, sulla radice, perché è qui che si
   calcolano i rem: dichiarandola su body — com'era prima — la variante
   cambiava il corpo del testo ma titoli, spaziature e tutto il resto
   restavano agganciati ai 16px di default, e la scelta si applicava a
   metà.

   In percentuale e non in pixel: 112,5% di 16px fa i 18px voluti, ma se
   qualcuno ha alzato il corpo testo nelle preferenze del browser la
   pagina lo segue. Con `font-size: 18px` quella preferenza veniva
   semplicemente ignorata.

   Le varianti ridefiniscono questa riga in assets/stile-*.css. */
html {
  font-size: 112.5%;
  scroll-padding-top: calc(var(--fo-testata) + var(--fo-s-4));
}

body {
  background: var(--fo-paper);
  color: var(--fo-ink);
  font-family: var(--fo-body);
  line-height: 1.62;

  /* Anello del focus da tastiera. Due valori, perché nessun colore solo
     funziona su entrambi i fondi: in tutte e due le varianti --fo-verde
     è ormai un quasi-nero, ottimo sulla carta e invisibile sul buio.
     Nei contesti scuri il token viene ridefinito e l'anello si adegua.

     Vanno dichiarati qui e non in :root con gli altri: le varianti
     ridefiniscono i token su body, e un token derivato dichiarato più
     in alto resterebbe agganciato al valore base — l'anello sarebbe
     uscito verde #1D6B58, colore che nelle varianti non compare mai. */
  --fo-focus:       var(--fo-verde);
  --fo-focus-scuro: var(--fo-su-scuro);
}
h1, h2, h3, h4 {
  font-family: var(--fo-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
/* Il massimo scende da 4.2rem a 3.6rem: a 1280 l'h1 misurava 75.6px e
   da solo riempiva mezzo schermo. Il minimo da telefono non cambia. */
h1 { font-size: clamp(2rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

a { color: var(--fo-verde-dark); text-underline-offset: 3px; }
a:hover { color: var(--fo-ink); }
:focus-visible { outline: 2px solid var(--fo-focus); outline-offset: 3px; }

/* Chi ha chiesto meno movimento vuole meno *movimento*: un cambio di
   colore non lo è. Prima qui spariva ogni transizione, comprese quelle
   che rendono leggibile il passaggio da uno stato all'altro. Restano i
   colori, spariscono spostamenti, ingrandimenti e comparse animate. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: background-color, color, border-color, outline-color, opacity !important;
    scroll-behavior: auto !important;
  }
  .fo-btn:hover,
  .elementor-widget-button .elementor-button:hover,
  .fo-post-card:hover,
  .fo-post-card:focus-within { transform: none; }
}

/* ==================================================================
   3. CLASSI DA USARE IN ELEMENTOR
   Elementor > widget > Avanzate > Classi CSS: scrivi il nome senza punto.
================================================================== */

/* Occhiello sopra i titoli. Deve essere block: nel contenuto e' uno <span>
   e senza questo finisce in linea con l'elemento che segue. */
.fo-eyebrow {
  display: block;
  margin: 0 0 var(--fo-s-3);
  font-family: var(--fo-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fo-ink-soft);
}

/* Payoff del libro */
.fo-payoff {
  font-family: var(--fo-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fo-ambra-txt);
}

/* Frase in evidenza */
/* L'attribuzione sotto una citazione in evidenza: stesso trattamento della
   citazione normale, ma piu' staccata perche' il blocco e' piu' grande. */
.fo-pull footer {
  display: block;
  margin-top: var(--fo-s-3);
  font-family: var(--fo-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--fo-ink-soft);
}
.fo-dark .fo-pull footer { color: var(--fo-su-scuro-tenue); }

.fo-pull {
  font-family: var(--fo-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.25;
  margin: var(--fo-s-6) 0;
  padding: 0 0 0 var(--fo-s-4);
  border-left: 4px solid var(--fo-ambra);
}

/* Il doppio 1: marchio della sezione libro */
.fo-uno {
  font-family: var(--fo-display);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.04em;
  display: inline-flex;
  align-items: baseline;
  gap: .12em;
  font-size: clamp(4rem, 13vw, 9rem);
}
.fo-uno { margin-bottom: .18em; }
.fo-uno i { font-style: normal; color: var(--fo-ink); }
.fo-uno i + i { color: transparent; -webkit-text-stroke: 2px var(--fo-ambra); }
/* Sulle fasce scure il primo "1" e' inchiostro su inchiostro: sparisce, e
   del segno resta mezzo. Sul buio prende il colore del testo. */
.fo-dark .fo-uno i { color: var(--fo-su-scuro); }

/* Elenco delle domande del lettore (pagina libro) */
.fo-questions { list-style: none; padding: 0; margin: var(--fo-s-5) 0 0; }
.fo-questions li {
  font-family: var(--fo-display);
  font-size: 1.15rem;
  font-weight: 500;
  padding: var(--fo-s-2) 0 var(--fo-s-2) var(--fo-s-5);
  border-top: 1px solid var(--fo-line);
  position: relative;
}
.fo-questions li::before { content: "?"; position: absolute; left: 0; color: var(--fo-ambra-txt); }
.fo-questions li:last-child { border-bottom: 1px solid var(--fo-line); }

/* Timeline certificazioni (pagina chi sono) */
.fo-timeline { margin: var(--fo-s-5) 0 0; display: grid; grid-template-columns: 74px 1fr; }
.fo-timeline dt {
  font-family: var(--fo-mono); font-size: .82rem; color: var(--fo-ambra-txt);
  font-variant-numeric: tabular-nums;
  padding: var(--fo-s-2) 0; border-top: 1px solid var(--fo-line);
}
.fo-timeline dd {
  margin: 0; padding: var(--fo-s-2) 0; border-top: 1px solid var(--fo-line); font-size: .96rem;
}
/* Le colonne dichiarate: un anno con due voci metterebbe la seconda in
   colonna 1, cioe' sotto l'anno, e il filetto si spezzerebbe a meta' riga.
   Stessa trappola gia' vista su .fo-moduli. Le voci multiple dello stesso
   anno stanno in un <dd> solo, una per riga. */
.fo-timeline dt { grid-column: 1; }
.fo-timeline dd { grid-column: 2; }
.fo-timeline dd > span { display: block; }
.fo-timeline dd > span + span { margin-top: 5px; }

/* Moduli del percorso formativo */
.fo-moduli { list-style: none; padding: 0; margin: var(--fo-s-6) 0 0; }
.fo-moduli li {
  display: grid; grid-template-columns: 88px 1fr; gap: var(--fo-s-3); align-items: baseline;
  padding: var(--fo-s-4) 0; border-top: 1px solid var(--fo-line);
}
.fo-moduli li:last-child { border-bottom: 1px solid var(--fo-line); }
.fo-moduli span {
  font-family: var(--fo-mono); font-size: .76rem; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase; color: var(--fo-ambra-txt);
}
/* Tre figli (span, strong, em) in una griglia a due colonne: senza dirlo,
   l'em finisce nella cella dopo, cioe' in colonna 1 della riga sotto —
   il sottotitolo andava a capo su tre righe in 88px, sotto l'etichetta,
   col titolo in alto a destra. L'etichetta occupa la colonna 1 su tutte e
   due le righe, titolo e sottotitolo stanno incolonnati nella seconda. */
.fo-moduli span { grid-column: 1; grid-row: 1 / span 2; }
.fo-moduli strong,
.fo-moduli em { grid-column: 2; }
/* Voce senza sottotitolo: due figli, non tre. L'etichetta pretendeva due
   righe lo stesso e ogni voce si portava dietro un divario vuoto — con
   nove QR di fila sono centosessanta pixel di niente. */
.fo-moduli li:not(:has(em)) span { grid-row: 1; }
/* Etichette lunghe ("Introduzione", "Oltre le scene"): in 88px vanno a capo. */
.fo-moduli--largo li { grid-template-columns: 150px 1fr; }
.fo-moduli strong { font-family: var(--fo-display); font-size: 1.22rem; font-weight: 600; display: block; }
.fo-moduli em { color: var(--fo-ink-soft); font-size: .95rem; }

/* Card */
.fo-card {
  background: #fff; border: 1px solid var(--fo-line);
  border-radius: var(--fo-raggio); padding: var(--fo-s-5); height: 100%;
}

/* Copertina con ombra piena */
.fo-cover img { box-shadow: 14px 14px 0 rgba(15,20,24,.07); }
/* Sulle fasce scure l'ombra si toglie e basta. L'ombra piena e' un espediente
   da carta: uno stacco netto spostato di 14px su fondo chiaro legge come
   spessore, su fondo scuro legge come un rettangolo grigio dimenticato li'.
   Sul blu notte la copertina stacca da sola. */
.fo-dark .fo-cover img { box-shadow: none; }

/* Testimonianza */
.fo-quote { border-left: 3px solid var(--fo-ambra); padding: var(--fo-s-1) 0 var(--fo-s-1) var(--fo-s-4); font-size: 1.08rem; }
.fo-quote cite {
  display: block; font-style: normal; font-family: var(--fo-mono);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fo-ink-soft); margin-top: var(--fo-s-2);
}
/* L'attribuzione e' scritta con <footer>, non con <cite>: lo stile c'era
   solo per cite e le firme uscivano come testo normale, indistinguibili
   dalla citazione. */
.fo-quote footer {
  display: block; font-style: normal; font-family: var(--fo-mono);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fo-ink-soft); margin-top: var(--fo-s-2);
}
.fo-quote + .fo-quote,
.elementor-widget-html + .elementor-widget-html > .fo-quote { margin-top: var(--fo-s-6); }
/* Sul blocco Coaching, che e' scuro: il grigio del chiaro qui sparisce. */
.fo-dark .fo-quote footer,
.fo-dark .fo-quote cite { color: var(--fo-su-scuro-tenue); }
.fo-dark .fo-quote { color: var(--fo-su-scuro); }

/* ==================================================================
   LINK ESTERNO ESPLICITO
   Le recensioni stanno su Amazon e Trustpilot. Da telefono non esiste
   l'hover: un link sottolineato in mezzo a un paragrafo non si vede, e
   quelle recensioni sono l'unica riprova pubblica del libro precedente.
   Qui diventano due bersagli veri, alti 44px, con l'icona che dice che
   si esce dal sito.
================================================================== */
.fo-recensioni {
  list-style: none; padding: 0; margin: var(--fo-s-5) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--fo-s-3);
}
.fo-link-esterno {
  display: inline-flex; align-items: center; gap: var(--fo-s-2);
  min-height: 44px; padding: 10px var(--fo-s-4);
  border: 1px solid var(--fo-ambra-txt); border-radius: var(--fo-raggio);
  color: var(--fo-ambra-txt); text-decoration: none;
  font-weight: 500; font-size: .95rem; line-height: 1.3;
}
.fo-link-esterno:hover,
.fo-link-esterno:focus-visible { background: var(--fo-ambra-txt); color: #fff; }
.fo-link-esterno .fo-icona { flex: 0 0 auto; }
.fo-dark .fo-link-esterno {
  border-color: var(--fo-su-scuro-link); color: var(--fo-su-scuro-link);
}
.fo-dark .fo-link-esterno:hover,
.fo-dark .fo-link-esterno:focus-visible { background: var(--fo-su-scuro-link); color: var(--fo-ink); }
@media (max-width: 520px) {
  /* Incolonnati e a tutta larghezza: due pillole affiancate su 375px
     stanno strette e si toccano. */
  .fo-recensioni { flex-direction: column; align-items: stretch; }
  .fo-link-esterno { justify-content: center; }
}

/* Sezioni a fondo alternato e sezione scura.
   Le stesse due classi servono tre forme di markup — la sezione PHP, il
   contenitore Elementor nuovo (.e-con) e quello vecchio
   (.elementor-element) — e prima erano dichiarate tre volte in tre punti
   del file. Qui stanno una volta sola: cambiare il fondo è una riga. */
.fo-alt,
.e-con.fo-alt,
.elementor-element.fo-alt { background-color: var(--fo-paper-2); }

.fo-dark,
.e-con.fo-dark,
.elementor-element.fo-dark {
  background-color: var(--fo-ink);
  color: var(--fo-su-scuro);
  /* Il token del focus si eredita: dentro qui l'anello diventa chiaro. */
  --fo-focus: var(--fo-focus-scuro);
}
.fo-dark h1, .fo-dark h2, .fo-dark h3, .fo-dark strong,
.fo-dark .elementor-heading-title { color: #fff; }
.fo-dark a { color: var(--fo-su-scuro-link); }
.fo-dark .fo-lead { color: var(--fo-su-scuro-tenue); }
/* L'occhiello usa --fo-ink-soft, che sul buio scende a 3:1. Sui fondi
   scuri prende il grigio chiaro, che sta sopra 7:1 in tutte e due le
   varianti. */
.fo-dark .fo-eyebrow,
.fo-dark .elementor-widget-heading.fo-eyebrow .elementor-heading-title {
  color: var(--fo-su-scuro-tenue);
}
/* Payoff e riga di credibilita' nascono per il fondo chiaro: --fo-ambra-txt
   e --fo-ink-soft sul blu notte sono scuro su scuro. Sulle fasce scure
   prendono l'oro chiaro, che e' il colore dei link su questo fondo. */
/* La filigrana e' un token di variante, ma il contesto vince sulla variante:
   ora anche Carta ha fasce scure, e li' il segno color inchiostro sparisce
   nel fondo. Dentro .fo-dark passa al chiaro, in tutte e due le varianti. */
.fo-dark {
  --fo-filigrana: var(--fo-su-scuro);
  --fo-filigrana-op: .09;
}
.fo-dark .fo-payoff { color: var(--fo-su-scuro-link); }
.fo-dark .fo-cred   { color: var(--fo-su-scuro-tenue); }
.fo-dark .fo-cred em { color: var(--fo-su-scuro); }

/* Il lead ha una regola sua piu' specifica (.elementor-widget-text-editor
   .fo-lead p) che vinceva su .fo-dark .fo-lead: sul blu notte restava grigio
   scuro, 2.05 di contrasto. Su /bonus era il paragrafo di apertura — la
   pagina su cui atterrano i lettori col QR. */
.fo-dark .fo-lead,
.fo-dark .elementor-widget-text-editor.fo-lead p { color: var(--fo-su-scuro-tenue); }
.fo-dark p { color: inherit; }

/* Isole chiare dentro una fascia scura: il modulo e le schede hanno fondo
   bianco loro. Li' dentro valgono i colori del chiaro, non quelli del buio —
   altrimenti un link diventa oro su bianco, 1.88. */
.fo-dark .fo-form,
.fo-dark .fo-card { color: var(--fo-ink); }
.fo-dark .fo-form a,
.fo-dark .fo-card a { color: var(--fo-verde-dark); }
.fo-dark .fo-form .fo-privacy-note,
.fo-dark .fo-form label { color: var(--fo-ink-soft); }
.fo-dark .fo-payoff,
.fo-dark .elementor-widget-text-editor.fo-payoff p { color: var(--fo-su-scuro-link); }

/* Tutto quello che usa --fo-ambra-txt e' pensato per la carta: sul blu notte
   sta a 2.77. Vale per i numeri dei moduli e per gli anni della timeline —
   i due punti dove l'oro fa da etichetta invece che da decoro. */
.fo-dark .fo-moduli span,
.fo-dark .fo-timeline dt { color: var(--fo-su-scuro-link); }
.fo-dark .fo-moduli li,
.fo-dark .fo-timeline dt,
.fo-dark .fo-timeline dd { border-top-color: rgba(248,242,237,.18); }
.fo-dark .fo-moduli li:last-child { border-bottom-color: rgba(248,242,237,.18); }
.fo-dark .fo-moduli em { color: var(--fo-su-scuro-tenue); }

/* Dentro un'isola chiara i titoli tornano scuri. La regola generale
   .fo-dark h1,h2,h3 li fa bianchi, e su una scheda bianca il risultato e'
   bianco su bianco: contrasto 1, testo che non c'e'. */
.fo-dark .fo-card h1, .fo-dark .fo-card h2,
.fo-dark .fo-card h3, .fo-dark .fo-card h4,
.fo-dark .fo-card strong,
.fo-dark .fo-card .elementor-heading-title,
.fo-dark .fo-form h1, .fo-dark .fo-form h2,
.fo-dark .fo-form h3, .fo-dark .fo-form strong { color: var(--fo-ink); }

@media (max-width: 767px) {
  /* Incolonnate. Non basta portare la griglia a una colonna: span, strong
     ed em hanno una posizione esplicita, e strong/em in "grid-column: 2"
     si inventavano una seconda colonna che il template non ha piu'.
     Il titolo finiva in una colonna implicita stretta, fuori misura. */
  .fo-moduli li,
  .fo-moduli--largo li { grid-template-columns: 1fr; gap: 4px; }
  .fo-moduli span,
  .fo-moduli strong,
  .fo-moduli em { grid-column: 1; grid-row: auto; }
  .fo-timeline { grid-template-columns: 62px 1fr; }
}

/* ==================================================================
   4. FORM (Elementor Pro Form collegato a Brevo)
================================================================== */
.fo-form .elementor-field-group > label {
  font-family: var(--fo-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fo-ink-soft);
}
.fo-form input[type="text"], .fo-form input[type="email"], .fo-form textarea {
  border: 1px solid var(--fo-line) !important;
  border-radius: var(--fo-raggio) !important;
  background: var(--fo-paper) !important;
  font-family: var(--fo-body) !important;
  padding: 13px 14px !important;
}
.fo-form .elementor-field-type-acceptance label { font-family: var(--fo-body); font-size: .85rem; }

/* ==================================================================
   5. LAYOUT — contenitori
================================================================== */
.fo-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.fo-wrap--narrow { max-width: 760px; }
.fo-main { display: block; }

/* ==================================================================
   6. HEADER
================================================================== */
.fo-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246,244,240,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--fo-line);
  transition: box-shadow .2s ease;
}
.fo-head.is-scrolled { box-shadow: 0 1px 12px rgba(15,20,24,.07); }
.fo-head__inner {
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  min-height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.fo-head__brand {
  font-family: var(--fo-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.01em; text-decoration: none; color: var(--fo-ink);
  white-space: nowrap;
}
.fo-head__brand span { color: var(--fo-verde); }
.fo-head__brand img { max-height: 44px; width: auto; }

.fo-nav__list {
  display: flex; align-items: center; gap: 26px;
  list-style: none; margin: 0; padding: 0;
}
.fo-nav__list a {
  font-family: var(--fo-display); font-size: .92rem; font-weight: 500;
  text-decoration: none; color: var(--fo-ink-soft);
  position: relative;
  transition: color .15s ease;
}
.fo-nav__list a:hover,
.fo-nav__list .current-menu-item > a,
.fo-nav__list .current_page_item > a { color: var(--fo-ink); }

/* Filetto sotto la voce: cresce da sinistra, non sposta niente perché
   è un pseudo-elemento in posizione assoluta. Segnala il passaggio del
   mouse e, soprattutto, tiene ferma la voce della pagina corrente, che
   prima si distingueva dalle altre solo per una sfumatura di grigio.
   Solo da 901 in su: sotto, il menu è la colonna a scomparsa. */
@media (min-width: 1025px) {
  /* 17px di testo sono un bersaglio piccolo anche col mouse: il padding
     lo porta a 41 senza cambiare l'altezza della testata. */
  .fo-nav__list > li > a { display: inline-block; padding-block: var(--fo-s-2); }
  .fo-nav__list > li > a::after {
    content: ""; position: absolute; left: 0; right: 0;
    bottom: calc(var(--fo-s-2) - 4px);
    height: 1.5px; background: currentColor;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .18s ease;
  }
  .fo-nav__list > li > a:hover::after,
  .fo-nav__list > li > a:focus-visible::after,
  .fo-nav__list .current-menu-item > a::after,
  .fo-nav__list .current_page_item > a::after { transform: scaleX(1); }
}

/* sottomenu, secondo livello */
.fo-nav__list li { position: relative; }
/* Il sottomenu non passa da display:none a block — display non si può
   animare, e la tendina compariva di scatto. Con visibilità e opacità
   resta fuori dal percorso di tabulazione quando è chiuso, ma la
   comparsa si vede. */
.fo-nav__list .sub-menu {
  position: absolute; top: 100%; left: -14px;
  min-width: 200px; list-style: none; margin: 0; padding: 8px 0;
  background: #fff; border: 1px solid var(--fo-line); border-radius: var(--fo-raggio);
  box-shadow: 0 8px 24px rgba(15,20,24,.08);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.fo-nav__list li:hover > .sub-menu,
.fo-nav__list li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
/* Il pannello del sottomenu ha fondo proprio, diverso da quello della
   testata: i suoi link non possono ereditare il colore pensato per la
   barra. Nella Sala restavano grigio chiaro su bianco, 1,5 di contrasto.
   Il selettore parte da .fo-head per stare sopra le regole di variante,
   che arrivano dopo nel foglio. */
.fo-nav__list .sub-menu a { display: block; padding: 10px 18px; }
.fo-head .fo-nav__list .sub-menu a { color: var(--fo-ink-soft); }
.fo-head .fo-nav__list .sub-menu a:hover,
.fo-head .fo-nav__list .sub-menu a:focus-visible { color: var(--fo-ink); }

.fo-head__toggle {
  display: none; align-items: center; gap: 10px;
  background: none; border: 1px solid var(--fo-line); border-radius: var(--fo-raggio);
  padding: 12px 14px; min-height: 44px; cursor: pointer; color: var(--fo-ink);
  font-family: var(--fo-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.fo-head__burger { display: inline-block; width: 16px; }
.fo-head__burger i {
  display: block; height: 1.5px; background: var(--fo-ink);
  margin: 3px 0; transition: transform .2s ease, opacity .2s ease;
}
.fo-nav-open .fo-head__burger i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.fo-nav-open .fo-head__burger i:nth-child(2) { opacity: 0; }
.fo-nav-open .fo-head__burger i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* Il menu a scomparsa scatta a 1024, la soglia tablet di Elementor:
   la stessa della scala, quindi non è più un'eccezione. Con la base
   tipografica sulla radice le sette voci misurano 931px nella Carta,
   la più larga delle due — la vecchia soglia di 900 non bastava più.
   Restano 93px di margine: aggiungendo una voce, rimisurare. */
@media (max-width: 1024px) {
  .fo-head__toggle { display: inline-flex; }
  .fo-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--fo-paper); border-bottom: 1px solid var(--fo-line);
    padding: 8px clamp(20px, 5vw, 48px) 20px;
  }
  .fo-nav.is-open { display: block; }
  .fo-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .fo-nav__list > li > a { display: block; padding: 13px 0; border-bottom: 1px solid var(--fo-line); font-size: 1rem; }
  /* Nel pannello a scomparsa i sottomenu sono sempre aperti: si annulla
     il meccanismo di comparsa usato sul desktop. */
  .fo-nav__list .sub-menu {
    position: static; border: 0; box-shadow: none;
    padding: 0 0 8px 16px; background: transparent;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
}

/* ==================================================================
   7. FOOTER
================================================================== */
/* Il footer è scuro in tutte e due le varianti: anello chiaro anche qui,
   altrimenti tutta la navigazione di chiusura è cieca da tastiera. */
.fo-foot {
  background: var(--fo-ink); color: #A9B2B8; font-size: .9rem; margin-top: 0;
  --fo-focus: var(--fo-focus-scuro);
}
.fo-foot__inner {
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: var(--fo-s-7) clamp(20px, 5vw, 48px) var(--fo-s-6);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--fo-s-5);
}
.fo-foot a { color: #D7D2C8; text-decoration: none; }
.fo-foot a:hover { color: #fff; text-decoration: underline; }
.fo-foot__name { font-family: var(--fo-display); font-size: 1.15rem; color: #fff; margin-bottom: .4em; }
.fo-foot__small { font-size: .82rem; }
.fo-foot__label {
  font-family: var(--fo-mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: #889299;
}
/* Aree di tocco. I link del footer erano alti 18px: sotto i 44px
   raccomandati, e sono l'ultima navigazione della pagina. Lo spazio
   arriva dal padding del link, non dal margine della voce, altrimenti
   cresce la distanza ma non il bersaglio. */
.fo-foot__menu { list-style: none; margin: 0; padding: 0; }
.fo-foot__menu a,
.fo-foot__social a,
.fo-foot__legal a {
  display: inline-block;
  padding-block: var(--fo-s-2);
  min-height: 44px;
  box-sizing: border-box;
}
.fo-foot__social a { margin-right: var(--fo-s-4); font-size: .85rem; }
.fo-foot__bottom { border-top: 1px solid #2A3239; }
.fo-foot__bottom-inner {
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: var(--fo-s-1) clamp(20px, 5vw, 48px);
  display: flex; flex-wrap: wrap; gap: var(--fo-s-3); align-items: center;
  justify-content: space-between;
  font-size: .8rem;
}
.fo-foot__legal a { margin-left: var(--fo-s-3); }
@media (max-width: 767px) {
  .fo-foot__inner { grid-template-columns: 1fr; }
  .fo-foot__legal a { margin: 0 var(--fo-s-3) 0 0; }
}

/* ==================================================================
   8. BLOG — archivio, articolo
================================================================== */
.fo-archive__head { padding: var(--fo-sezione) 0 0; }
.fo-archive__intro { color: var(--fo-ink-soft); }

.fo-posts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fo-s-5);
  padding: var(--fo-sezione) 0;
}
@media (max-width: 1024px) { .fo-posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .fo-posts { grid-template-columns: 1fr; } }

/* La scheda sembrava cliccabile ma reagiva solo sul titolo. Ora il
   bersaglio è tutta la scheda, e lo stato di passaggio vale anche per
   la tastiera: :focus-within la accende quando il focus entra in uno
   dei suoi link. */
.fo-post-card {
  background: #fff; border: 1px solid var(--fo-line); border-radius: var(--fo-raggio);
  overflow: hidden; display: flex; flex-direction: column;
  position: relative;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.fo-post-card:hover,
.fo-post-card:focus-within {
  border-color: var(--fo-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,20,24,.08);
}
/* Il link del titolo si estende su tutta la scheda. Gli altri due link
   sono già marcati come decorativi nel template, quindi resta un solo
   punto di arrivo per la tastiera. */
.fo-post-card__title a::after { content: ""; position: absolute; inset: 0; }
.fo-post-card__media img { width: 100%; height: 190px; object-fit: cover; }
.fo-post-card__body { padding: var(--fo-s-4); display: flex; flex-direction: column; flex: 1; }
.fo-post-card__title { font-size: 1.25rem; margin: 6px 0 10px; }
.fo-post-card__title a { text-decoration: none; color: var(--fo-ink); }
.fo-post-card__title a:hover { color: var(--fo-verde-dark); }
.fo-post-card__excerpt { color: var(--fo-ink-soft); font-size: .95rem; flex: 1; }
.fo-post-card__more { font-family: var(--fo-display); font-size: .92rem; text-decoration: none; }

.fo-pagination { padding-bottom: var(--fo-s-7); }
/* Anche qui il bersaglio arriva a 44px: prima erano 35. */
.fo-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: var(--fo-s-1) var(--fo-s-3); margin-right: 6px;
  border: 1px solid var(--fo-line); border-radius: var(--fo-raggio);
  text-decoration: none; font-family: var(--fo-display); font-size: .92rem;
}
.fo-pagination .current { background: var(--fo-ink); color: #fff; border-color: var(--fo-ink); }

.fo-single__head { padding: var(--fo-sezione) 0 0; }
.fo-single__standfirst { font-size: 1.15rem; color: var(--fo-ink-soft); }
.fo-single__media { padding-top: var(--fo-s-5); }
.fo-single__media img { width: 100%; border-radius: var(--fo-raggio); }
.fo-single__body { padding: var(--fo-s-6) 0 var(--fo-s-7); }
.fo-single__body img { border-radius: var(--fo-raggio); }
.fo-single__body blockquote {
  border-left: 4px solid var(--fo-ambra); margin: var(--fo-s-5) 0; padding-left: var(--fo-s-4);
  font-family: var(--fo-display); font-weight: 500; font-size: 1.3rem; line-height: 1.3;
}
.fo-single__cta { padding: var(--fo-sezione) 0; text-align: center; }

.fo-adjacent {
  display: flex; gap: var(--fo-s-4); justify-content: space-between;
  padding: var(--fo-s-6) 0; border-top: 1px solid var(--fo-line);
}
.fo-adjacent__link {
  font-family: var(--fo-display); font-weight: 600; text-decoration: none;
  color: var(--fo-ink); max-width: 46%;
}
.fo-adjacent__link--next { text-align: right; margin-left: auto; }
.fo-adjacent__link .fo-eyebrow { display: block; margin-bottom: 6px; }
@media (max-width: 767px) {
  .fo-adjacent { flex-direction: column; }
  .fo-adjacent__link, .fo-adjacent__link--next { max-width: 100%; text-align: left; margin: 0; }
}

/* ==================================================================
   9. BOTTONI, 404, ricerca
================================================================== */
/* I pulsanti esistono in due forme: un <a class="fo-btn"> nelle pagine
   PHP, e il widget Elementor, dove la classe finisce sul contenitore e
   lo stile va all'elemento interno. Base e stati sono scritti una volta
   sola per entrambe. I modificatori non toccano le proprietà: cambiano
   dei token, che dal contenitore si ereditano fino al pulsante.
   Chi aggiunge un modificatore lo scrive in un posto solo. */
.fo-btn,
.elementor-widget-button .elementor-button {
  display: inline-block;
  font-family: var(--fo-display); font-weight: 600; font-size: 1rem;
  padding: 15px 28px;
  border-radius: var(--fo-raggio);
  /* I valori di ripiego stanno dentro var(), non come dichiarazioni:
     dichiararli qui li riscriverebbe sul pulsante interno, coprendo
     quelli che arrivano per eredità dal contenitore del widget. */
  border: 1px solid var(--fo-btn-bordo, transparent);
  background: var(--fo-btn-sfondo, transparent);
  color: var(--fo-btn-testo, var(--fo-ink));
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease,
              color .15s ease, border-color .15s ease;
}
.fo-btn:hover,
.elementor-widget-button .elementor-button:hover {
  transform: translateY(-1px);
  background: var(--fo-btn-sfondo-hover, var(--fo-btn-sfondo, transparent));
  color: var(--fo-btn-testo-hover, var(--fo-btn-testo, var(--fo-ink)));
  border-color: var(--fo-btn-bordo-hover, var(--fo-btn-bordo, transparent));
}
/* Conferma del tocco: senza questo, su telefono non si capisce se il
   tap è arrivato. */
.fo-btn:active,
.elementor-widget-button .elementor-button:active { transform: translateY(0); }

.fo-btn--primary {
  --fo-btn-sfondo: var(--fo-verde);
  --fo-btn-testo:  #fff;
  --fo-btn-sfondo-hover: var(--fo-verde-dark);
}
.fo-btn--book {
  --fo-btn-sfondo: var(--fo-ambra);
  --fo-btn-testo:  #241703;
  --fo-btn-sfondo-hover: #B0771F;
}
.fo-btn--ghost {
  --fo-btn-bordo: var(--fo-ink);
  --fo-btn-testo: var(--fo-ink);
  --fo-btn-sfondo-hover: var(--fo-ink);
  --fo-btn-testo-hover:  var(--fo-paper);
}

/* In tutte e due le varianti il primario è inchiostro pieno: perfetto
   sulla carta, invisibile sul buio — e il blocco dell'anteprima, che è
   l'obiettivo del sito, ha il fondo scuro. Dentro un contesto scuro si
   inverte, così resta l'azione più forte della schermata ovunque.

   Il selettore parte da body per una ragione di cascata: le varianti
   ridefiniscono .fo-stile-X .fo-btn--primary con la stessa specificità
   di .fo-dark .fo-btn--primary, e arrivando dopo vincerebbero loro. */
body .fo-dark .fo-btn--primary {
  --fo-btn-sfondo: var(--fo-paper);
  --fo-btn-testo:  var(--fo-ink);
  --fo-btn-sfondo-hover: #fff;
  --fo-btn-testo-hover:  var(--fo-ink);
}

/* Ma NON dentro un'isola chiara. Il modulo di /bonus sta su una fascia
   scura, quindi il primario si invertiva — fondo avorio — dentro una
   scheda bianca: 1,11 di contrasto fra il pulsante e la scheda. Il testo
   si leggeva benissimo (e infatti nessun controllo sui testi lo segnalava)
   ma il pulsante non si vedeva come pulsante, e sembrava un link.
   Nelle isole chiare vale il chiaro, come per tutto il resto. */
body .fo-dark .fo-form .fo-btn--primary,
body .fo-dark .fo-card .fo-btn--primary {
  --fo-btn-sfondo: var(--fo-verde);
  --fo-btn-testo:  #fff;
  --fo-btn-sfondo-hover: var(--fo-verde-dark);
  --fo-btn-testo-hover:  #fff;
}
/* E il colore va scritto, non solo il token: quando il pulsante e' un <a>,
   `.fo-dark a` (0,1,1) batte `.fo-btn` (0,1,0) e il testo restava blu
   notte su blu notte — 1,17. Succedeva solo nello stato "Bentornato" di
   /bonus, quello che vede chi si e' gia' registrato, ed e' per questo che
   il primo controllo non l'aveva visto: senza cookie quel pulsante e' un
   <button>, e i <button> non li tocca `.fo-dark a`. */
body .fo-dark .fo-form a.fo-btn--primary,
body .fo-dark .fo-card a.fo-btn--primary { color: #fff; }
/* Il fantasma ha bordo e testo color inchiostro: sul blu notte spariva del
   tutto — restava un rettangolo vuoto. Sul buio si inverte come il primario. */
body .fo-dark .fo-btn--ghost {
  --fo-btn-bordo: var(--fo-su-scuro);
  --fo-btn-testo: var(--fo-su-scuro);
  --fo-btn-sfondo-hover: var(--fo-su-scuro);
  --fo-btn-testo-hover:  var(--fo-ink);
}

.fo-404 { padding: calc(var(--fo-sezione) * 1.15) 0; }
.fo-404__search { margin-top: var(--fo-s-5); }
.fo-404__search input[type="search"] {
  padding: 12px 14px; border: 1px solid var(--fo-line); border-radius: var(--fo-raggio);
  font-family: var(--fo-body); background: #fff; min-width: 240px;
}
.fo-404__search button, .fo-404__search input[type="submit"] {
  padding: 12px 20px; border: 0; border-radius: var(--fo-raggio);
  background: var(--fo-ink); color: #fff; font-family: var(--fo-display); cursor: pointer;
}

/* Pagine di funnel: Canvas non carica header e footer, ma se qualcuno
   cambia template per errore, almeno il menu resta fuori. */
.page-template-elementor_canvas .fo-head,
.page-template-elementor_canvas .fo-foot { display: none; }

/* ==================================================================
   10. SEZIONI DI CONTENUTO
   Struttura delle pagine importate: sezioni a piena larghezza con
   contenitore interno. Il ritmo verticale nasce tutto da qui.
================================================================== */
.fo-single__body > section { padding: var(--fo-sezione) 0; }
.fo-single__body > section:first-child { padding-top: var(--fo-sezione-apertura); }
.fo-single__body > section > .fo-wrap { padding-left: clamp(20px, 5vw, 48px); padding-right: clamp(20px, 5vw, 48px); }
.fo-rule { height: 1px; background: var(--fo-line); border: 0; margin: 0; }

/* La pagina è già dentro un contenitore: le sezioni devono poter sfondare */
.page .fo-single__body { padding: 0; }

.fo-lead { font-size: 1.18rem; color: var(--fo-ink-soft); max-width: 46ch; }

/* --- Ritmo del testo in colonna ------------------------------------
   Due motori, due punti d'attacco, la stessa scala.
   Nelle pagine PHP il margine sta sull'elemento. In quelle Elementor
   no: fra i widget lo spazio lo mette il gap del contenitore, e un
   margine ci si sommerebbe — quindi lì si interviene solo dove il gap
   uniforme appiattisce la gerarchia.
   Prima c'era una sola regola, `.fo-single__body h2 { margin-top:1.6em }`,
   che finiva anche sulle pagine Elementor e staccava l'occhiello dal
   suo titolo di quasi novanta pixel. */
.fo-single__body > section :is(h2, h3) { margin-block: 0 var(--fo-s-3); }
.fo-single__body > section :is(p, ul, ol) + :is(h2, h3) { margin-block-start: var(--fo-s-6); }
.fo-single__body > section p { margin-block: 0 var(--fo-s-4); }

/* Elementor: l'occhiello resta attaccato al titolo (basta il gap), il
   testo che comincia sotto il titolo prende un gradino in più. */
.e-con-inner > .elementor-widget-heading + .elementor-widget-text-editor { margin-top: var(--fo-s-2); }

/* ==================================================================
   11. GRIGLIE
================================================================== */
.fo-hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(var(--fo-s-5), 5vw, var(--fo-s-7)); align-items: center;
}
.fo-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(var(--fo-s-5), 5vw, 3.5rem); }
.fo-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fo-s-5); }
@media (max-width: 1024px) { .fo-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .fo-hero-grid, .fo-grid-2, .fo-grid-3 { grid-template-columns: 1fr; }
}

/* ==================================================================
   12. RITRATTO E COPERTINA
================================================================== */
.fo-portrait {
  aspect-ratio: 4/5; width: 100%;
  background: var(--fo-paper-2) center 20% / cover no-repeat;
  border: 1px solid var(--fo-line); border-radius: var(--fo-raggio);
}
/* Le scatole con aspect-ratio stanno dentro un widget HTML di Elementor
   che, quando la colonna va a capo sotto i 767, ha larghezza indefinita:
   width:100% sul figlio diventa circolare, l'altezza derivata dal
   rapporto non risale al widget e questo collassa. Il ritratto sbordava
   di 435px e la copertina di 163, finendo sopra la sezione seguente.
   Basta dare al widget una larghezza definita. */
.elementor-widget:has(> .fo-portrait),
.elementor-widget:has(> .fo-cover),
.elementor-widget:has(> .fo-video) { width: 100%; }

/* Sul telefono il 4:5 a piena larghezza diventa una schermata intera di
   sola foto — 700px su un tablet stretto — e spinge fuori campo tutto
   quello che viene dopo. Il taglio resta lo stesso, cambia l'altezza. */
@media (max-width: 767px) {
  .fo-portrait { max-height: min(58vh, 420px); }
}
/* La copertina definitiva e' arrivata: niente piu' riquadro tratteggiato
   con la scritta "in arrivo". Fondo e bordo restano solo come rete se un
   giorno l'immagine mancasse — con l'img dentro non si vedono. */
.fo-cover {
  width: 100%; max-width: 300px;
  margin: 0 auto;
  line-height: 0;              /* niente spazio fantasma sotto l'immagine */
}
.fo-cover:empty {
  aspect-ratio: 2/3;
  background: var(--fo-paper-2); border: 1px dashed var(--fo-line);
  display: grid; place-items: center; text-align: center; padding: 20px;
  font-family: var(--fo-mono); font-size: .74rem; color: var(--fo-ink-soft);
}
.fo-cover img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2/3; object-fit: cover;
}
.fo-buy { display: flex; flex-wrap: wrap; gap: var(--fo-s-2); margin-top: var(--fo-s-5); }

/* ==================================================================
   13. FORM DI ISCRIZIONE
   Segnaposto in attesa di Contact Form 7: quando arriva, basta
   avvolgere lo shortcode in un contenitore .fo-form.
================================================================== */
.fo-form {
  background: #fff; border: 1px solid var(--fo-line); border-radius: var(--fo-raggio);
  padding: clamp(var(--fo-s-4), 4vw, var(--fo-s-6)); max-width: 520px;
}
.fo-form label {
  display: block; font-family: var(--fo-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fo-ink-soft);
  margin: 0 0 6px;
}
.fo-form input[type="text"],
.fo-form input[type="email"],
.fo-form textarea {
  width: 100%; padding: 13px 14px; margin-bottom: var(--fo-s-3);
  border: 1px solid var(--fo-line); border-radius: var(--fo-raggio);
  font-family: var(--fo-body); font-size: 1rem;
  background: var(--fo-paper); color: var(--fo-ink);
}
.fo-form input:focus, .fo-form textarea:focus {
  outline: 2px solid var(--fo-focus); outline-offset: 1px;
}
.fo-consent {
  display: flex; gap: var(--fo-s-2); align-items: flex-start;
  font-size: .85rem; color: var(--fo-ink-soft); margin-bottom: var(--fo-s-4); line-height: 1.45;
}
.fo-consent input { margin-top: 4px; flex: none; }
.fo-plain {
  font-family: var(--fo-body) !important; text-transform: none !important;
  letter-spacing: 0 !important; font-size: .85rem !important;
  color: var(--fo-ink-soft) !important; margin: 0 !important;
}
.fo-form .fo-btn { width: 100%; text-align: center; border: 0; }
.fo-privacy-note { font-size: .8rem; color: var(--fo-ink-soft); margin-top: var(--fo-s-2); }

/* ==================================================================
   14. VIDEO E PASSI SUCCESSIVI
================================================================== */
.fo-video {
  /* Il riquadro e' sempre 16:9, cosi' scorrendo quarantuno schede il ritmo
     non cambia mai. I filmati pero' non sono tutti 16:9: quelli piu' stretti
     lasciano due bande. Il fondo e' nero e non --fo-ink apposta — banda nera
     legge come proiezione, banda blu notte legge come errore di misura. */
  aspect-ratio: 16/9; width: 100%;
  background: #000; color: #8B959C;
  display: grid; place-items: center; text-align: center;
  font-family: var(--fo-mono); font-size: .78rem; padding: 20px; border-radius: var(--fo-raggio);
}
.fo-video iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--fo-raggio); }
/* Il riempimento serve al riquadro vuoto, che ospita una didascalia. Con
   dentro un filmato diventa una cornice nera di 20px che toglie altezza e
   falsa il 16:9: il contenitore resta 16:9, il video no. */
.fo-video:has(iframe) { padding: 0; }
.fo-video-list { display: grid; gap: var(--fo-s-6); }
.fo-next-steps { padding-left: 1.1em; margin: var(--fo-s-5) 0 0; }
.fo-next-steps li { margin-bottom: var(--fo-s-2); }
.fo-next-steps strong { color: #fff; }

/* ==================================================================
   15. LEGGIBILITÀ
   Il corpo del testo non deve superare le ~75 battute per riga,
   anche quando la sezione è a piena larghezza.
================================================================== */
.fo-single__body > section > .fo-wrap--narrow p,
.fo-single__body > section > .fo-wrap--narrow ul,
.fo-single__body > section > .fo-wrap--narrow ol { max-width: 68ch; }

/* ==================================================================
   16. ALLINEAMENTO DELLE COLONNE DI TESTO
   L'hero occupa tutta la larghezza utile; se le sezioni sotto fossero
   centrate su 760px, ogni titolo ripartirebbe da un punto diverso.
   Il contenitore resta largo, è il testo a essere limitato.
================================================================== */
.fo-single__body > section > .fo-wrap--narrow { max-width: 1120px; }
.fo-single__body > section > .fo-wrap--narrow > * { max-width: 68ch; }
.fo-single__body > section > .fo-wrap--narrow > h1,
.fo-single__body > section > .fo-wrap--narrow > h2 { max-width: 20ch; }

/* Le sezioni dichiarate centrate restano centrate davvero */
.fo-single__body > section > .fo-wrap--narrow[style*="center"] > * {
  margin-left: auto; margin-right: auto;
}

/* Barra timecode: visibile solo nella variante che la usa */
.fo-strip {
  display: none;
  background: var(--fo-ink); color: var(--fo-ambra);
  font-family: var(--fo-mono); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 9px clamp(20px, 5vw, 48px);
}
.fo-strip span + span { text-align: right; }
@media (min-width: 768px) { .fo-strip { display: none; justify-content: space-between; } }
@media (max-width: 767px) { .fo-strip span + span { display: none; } }

/* ==================================================================
   17. IMMAGINI NEL CONTENUTO
   Classi per inserire foto dentro le pagine senza scrivere stile a mano.
================================================================== */
.fo-figura { margin: 0; }
.fo-figura img {
  width: 100%; border: 1px solid var(--fo-line); border-radius: var(--fo-raggio);
  display: block;
}
.fo-figura figcaption {
  font-family: var(--fo-mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--fo-ink-soft); margin-top: var(--fo-s-2);
}
/* Proporzioni: la foto riempie il riquadro senza deformarsi */
.fo-figura--43 img { aspect-ratio: 4/3; object-fit: cover; }
.fo-figura--32 img { aspect-ratio: 3/2; object-fit: cover; }
.fo-figura--45 img { aspect-ratio: 4/5; object-fit: cover; }
.fo-figura--quadrata img { aspect-ratio: 1/1; object-fit: cover; }

/* Nella variante Sala anche queste diventano fotogrammi */
.fo-stile-sala .fo-figura img { filter: grayscale(1) contrast(1.06); border-color: #2B3238; }
.fo-stile-carta .fo-figura img { filter: sepia(.18) contrast(1.02); }

/* ==================================================================
   18. WIDGET ELEMENTOR
   Le classi finiscono sul contenitore del widget, non sull'elemento
   interno: qui le riporto dove servono.
================================================================== */

/* Base e modificatori dei pulsanti stanno nella sezione 9, scritti una
   volta per tutte e due le forme. Qui resta solo ciò che riguarda il
   contenitore del widget, che non deve sembrare a sua volta un pulsante. */
.elementor-widget-button.fo-btn {
  background: none !important; padding: 0 !important;
  border: 0 !important; transform: none !important;
  display: inline-block; margin-right: 12px;
}

/* Occhielli e payoff: la classe sta sul contenitore */
.elementor-widget.fo-eyebrow .elementor-heading-title,
.elementor-widget.fo-payoff p { font: inherit; color: inherit; }
.elementor-widget-heading.fo-eyebrow .elementor-heading-title {
  font-family: var(--fo-mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fo-ink-soft); font-weight: 400;
}
.fo-stile-sala .fo-hero .elementor-widget-heading.fo-eyebrow .elementor-heading-title { color: var(--fo-ambra); }
.elementor-widget-text-editor.fo-payoff p {
  font-family: var(--fo-mono); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fo-ambra-txt);
}
.elementor-widget-text-editor.fo-lead p { font-size: 1.18rem; color: var(--fo-ink-soft); }
.fo-stile-sala .fo-hero .elementor-widget-text-editor.fo-lead p { color: #AEB8C0; }
.elementor-widget-text-editor.fo-privacy-note p { font-size: .8rem; color: var(--fo-ink-soft); }

/* Spaziatura verticale delle sezioni convertite */
.elementor-section > .elementor-container,
body .e-con { --container-max-width: 1120px; }
/* Stesso respiro delle sezioni PHP: unico token, unica misura. */
.e-con > .e-con-inner { padding-block: var(--fo-sezione); }

/* Fra due fasce dello stesso colore il padding si conta UNA volta sola.
   Ogni contenitore ha var(--fo-sezione) sopra e sotto: a 1440 sono 100.8px
   per lato, che fra due sezioni continue diventano 218 — mezza schermata di
   niente fra il sottotitolo e il primo contenuto.
   Le fasce piene (.fo-dark, .fo-alt) tengono il loro padding su entrambi i
   lati: li' non e' spazio fra due cose, e' il respiro dentro un blocco
   colorato. */
.elementor > .e-con:not(.fo-dark):not(.fo-alt) + .e-con:not(.fo-dark):not(.fo-alt) > .e-con-inner,
/* Il filetto <hr class="rule"> diventa un widget divisore che si infila fra i
   due contenitori e rompe l'adiacenza: senza questa riga la home restava a
   295px mentre le altre pagine scendevano. */
.elementor > .e-con:not(.fo-dark):not(.fo-alt) + .elementor-widget-divider + .e-con:not(.fo-dark):not(.fo-alt) > .e-con-inner {
  padding-block-start: 0;
}
/* L'apertura di pagina respira meno in alto, perché sopra ha già la
   testata. Si aggancia a .fo-hero e non a :first-of-type: quello
   ragiona sul tag e cambierebbe bersaglio al primo container annidato
   che qualcuno aggiunge in cima. Le pagine senza .fo-hero restano al
   valore normale, che è un ripiego innocuo. */
.e-con.fo-hero > .e-con-inner { padding-block-start: var(--fo-sezione-apertura); }
.fo-stile-sala .e-con.fo-hero { background: var(--fo-ink); }
.fo-stile-sala .e-con.fo-hero .elementor-heading-title { color: #fff; }
.fo-stile-sala .e-con.fo-hero .elementor-widget-text-editor { color: #AEB8C0; }

/* Hero scuro nella variante Sala anche sulle pagine Elementor */
.fo-stile-sala .elementor-element.fo-hero,
.fo-stile-sala .elementor-element.fo-hero > .e-con-inner { background-color: var(--fo-ink); }
.fo-stile-sala .elementor-element.fo-hero .elementor-heading-title { color: #fff; }
.fo-stile-sala .elementor-element.fo-hero .elementor-widget-text-editor { color: #AEB8C0; }

/* Leggibilità: nelle sezioni a piena larghezza il testo resta in colonna */
/* NON .elementor-widget-container: per i text-editor non c'e'. Il <p> e'
   figlio diretto del widget, e il limite va messo li'. */
.e-con-inner > .elementor-widget-text-editor > p { max-width: 54ch; }
.e-con-inner > .elementor-widget-heading .elementor-heading-title { max-width: 24ch; }


/* ==================================================================
   RIGA DI CREDIBILITA'
   Sotto la CTA dell'hero. Ha l'aria dell'occhiello ma non e' maiuscola:
   contiene un titolo di libro e un marchio, e il maiuscolo li urlerebbe.
================================================================== */
.fo-cred {
  margin: var(--fo-s-4) 0 0;
  font-family: var(--fo-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--fo-ink-soft);
}
.fo-cred em { font-style: italic; }

/* ==================================================================
   /bonus — IL SEGNO "1 1" IN FILIGRANA
   Chi arriva qui ha inquadrato un QR su carta, in piedi, col libro in
   mano. La pagina deve dire "questo e' per te" prima di essere letta:
   lo fa il segno del libro, grande e quasi invisibile dietro il testo.
================================================================== */
.fo-bonus-hero { position: relative; overflow: hidden; }

/* Il segno va agganciato all'involucro interno di Elementor, non alla
   sezione. Due motivi, scoperti provando:
     - Elementor usa gia' ::before sui contenitori e ne forza le misure a
       100%x100%: il testo ci finiva dentro schiacciato. Da qui ::after.
     - .e-con-inner ha un fondo opaco proprio, che copriva qualunque cosa
       disegnata sulla sezione. Stando dentro, con z-index -1, il segno
       finisce sopra quel fondo e sotto il testo: esattamente una filigrana. */
.fo-bonus-hero > .e-con-inner {
  position: relative;
  /* z-index esplicito: serve a creare il contesto di impilamento. Senza,
     lo z-index -1 del segno esce da questo involucro e finisce sotto il
     suo fondo opaco — cioe' invisibile. Con position:relative da sola non
     succede: ci vuole uno z-index diverso da auto. */
  z-index: 0;
}
.fo-bonus-hero > .e-con-inner::after {
  content: "1 1";
  position: absolute;
  z-index: -1;
  left: -.06em;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  font-family: var(--fo-display);
  font-weight: 700;
  font-size: clamp(15rem, 40vw, 32rem);
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--fo-filigrana);
  opacity: var(--fo-filigrana-op);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 860px) {
  /* Sul telefono le colonne si impilano: il segno sale, per non finire
     dietro ai campi del modulo. */
  .fo-bonus-hero > .e-con-inner::after {
    font-size: 15rem;
    left: -.08em;
    top: 26%;
    /* Sul telefono il segno e' molto piu' grande in proporzione al testo che
       gli sta sopra: alla stessa opacita' si mangia la leggibilita' del primo
       paragrafo. Scalata, non fissata: le due varianti restano proporzionate. */
    opacity: calc(var(--fo-filigrana-op) * .6);
  }
}

/* ==================================================================
   COMPARSA ALLO SCROLL
   La classe .fo-reveal la mette il JS, mai il markup: senza JS non c'e'
   nulla da rivelare e la pagina resta leggibile. Chi ha chiesto meno
   movimento non entra proprio nel blocco.
================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .fo-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease-out, transform .55s ease-out;
    will-change: opacity, transform;
  }
  .fo-reveal.is-in { opacity: 1; transform: none; }
}

/* ==================================================================
   RIGA DI PULSANTI
   Due CTA nello stesso paragrafo diventano un contenitore in riga. Li
   spazia il gap del contenitore: il margine destro che i pulsanti si
   portano da quando erano in linea nel testo qui e' di troppo, e sommato
   al gap li mandava a capo per pochi pixel.
================================================================== */
.fo-btn-riga .elementor-widget-button.fo-btn { margin-right: 0; }


/* ==================================================================
   MARGINI DI TESTA DEI CONTENITORI
   Il contenitore Elementor ha il suo padding-top, la sezione sopra ha il
   suo padding-bottom, e il primo elemento ci aggiungeva il proprio
   margin-top — che non collassa, perche' il padding del contenitore lo
   blocca. Risultato: circa 250px di niente sopra il primo contenuto, su
   /dicono-di-me e /contatti. Il ritmo verticale lo decidono le sezioni,
   non il primo figlio che capita.
================================================================== */
.e-con-inner > *:first-child,
.e-con > .e-con-inner > *:first-child,
.elementor-widget-container > *:first-child { margin-top: 0; }
/* Stessa ragione dall'altra parte: l'ultimo figlio non aggiunge coda. */
.e-con-inner > *:last-child,
.elementor-widget-container > *:last-child { margin-bottom: 0; }

/* Non basta il primo figlio del contenitore: quello e' il widget, che il
   margine non ce l'ha. Il margine sta sul contenuto DENTRO il primo widget
   — un <blockquote>, un <ol>, una <figure> — e per i widget HTML Elementor
   non mette nemmeno .elementor-widget-container in mezzo. Quindi si scende
   di un livello, in tutte e due le forme.
   Misurato su /dicono-di-me: erano 36px che non collassavano contro i
   63 di padding del contenitore. */
.e-con-inner > .elementor-element:first-child > *:first-child,
.e-con-inner > .elementor-element:first-child > .elementor-widget-container > *:first-child,
.e-con > .elementor-element:first-child > *:first-child,
.e-con > .elementor-element:first-child > .elementor-widget-container > *:first-child {
  margin-top: 0;
}

/* Blog senza articoli: non un avviso, una pagina che porta altrove. */
.fo-archive__vuoto { padding: var(--fo-s-6) 0 var(--fo-s-7); }
.fo-archive__vuoto h2 { margin: 0 0 var(--fo-s-4); }
.fo-archive__vuoto-azioni {
  display: flex; flex-wrap: wrap; gap: var(--fo-s-3);
  margin-top: var(--fo-s-5);
}

/* ==================================================================
   MARCHIO NOE E PREFAZIONE
================================================================== */
/* Il logo NOE nel footer: subordinato, in riga con la frase che lo spiega.
   Il marchio del sito e' il nome dell'autore, non questo. */
.fo-foot__marchio {
  display: flex; align-items: center; gap: var(--fo-s-3);
  margin-top: var(--fo-s-4);
}
.fo-foot__marchio img { width: 48px; height: 48px; flex: 0 0 48px; }
.fo-foot__marchio .fo-foot__small { margin: 0; }

/* La prefazione: e' il nome piu' spendibile del progetto, non una postilla.
   Filetto d'oro a sinistra e il display, cosi' pesa quanto deve senza
   rubare la scena al titolo del libro. */
.fo-prefazione {
  margin: var(--fo-s-4) 0 0;
  padding-left: var(--fo-s-3);
  border-left: 3px solid var(--fo-ambra);
  font-family: var(--fo-display);
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--fo-ink);
}
.fo-prefazione strong { font-weight: 700; }
.fo-dark .fo-prefazione { color: var(--fo-su-scuro); }
.fo-dark .fo-prefazione strong { color: #fff; }

/* La riga della prefazione e' un'ancora alla sezione dedicata. Non si
   colora come un link: fa corpo unico col filetto oro, e ricolorarla
   spezzerebbe il blocco. Il segno che si puo' toccare sta sul nome, con
   una sottolineatura che c'e' sempre — da telefono l'hover non esiste,
   e senza il segno nessuno saprebbe che quella riga porta da qualche
   parte. */
.fo-prefazione a { color: inherit; text-decoration: none; }
.fo-prefazione a strong {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--fo-ambra);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.fo-dark .fo-prefazione a strong { color: #fff; }
.fo-prefazione a:hover strong,
.fo-prefazione a:focus-visible strong { text-decoration-thickness: 2px; }

/* ==================================================================
   TOCCA PER INGRANDIRE
   Una composizione — un'aula, una lavagna, le schede compilate — su un
   telefono viene larga 355px, e quello che c'e' scritto dentro non si
   legge. Senza le scritte quella foto non dice niente, quindi si apre.

   La classe --attiva la mette il JS, e solo dove serve: se da desktop la
   foto si vede gia' intera, il riquadro non si apre e il puntatore non
   promette niente.
================================================================== */
.fo-ingrandibile { margin: var(--fo-s-6) 0 0; }
.fo-ingrandibile img {
  display: block;
  width: 100%;
  /* Il file e' 960x960: oltre, il browser lo ingrandirebbe e verrebbe
     molle. "A larghezza piena" qui vuol dire fino a 960. */
  max-width: 960px;
  margin-inline: auto;
  height: auto;
}
.fo-ingrandibile--attiva img { cursor: zoom-in; }
.fo-ingrandibile--attiva img:focus-visible { outline: 2px solid var(--fo-focus); outline-offset: 3px; }
.fo-ingrandibile--attiva figcaption::after {
  content: " \2014 tocca per ingrandire";
  color: var(--fo-ambra-txt);
}
.fo-dark .fo-ingrandibile--attiva figcaption::after { color: var(--fo-su-scuro-link); }

.fo-ingrandita {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10, 14, 20, .94);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
/* L'involucro largo max-content. Centrare la foto con margin:auto o con
   justify-content, quando e' piu' larga dello schermo, la fa traboccare
   anche a SINISTRA, e quella meta' non si raggiunge scorrendo: sta fuori
   dall'area scorrevole. Cosi' invece l'involucro e' largo esattamente
   quanto il suo contenuto (o quanto lo schermo, se e' piu' piccolo) e si
   arriva a tutti e due i bordi. */
.fo-ingrandita__dentro {
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
/* Niente max-width: dentro il riquadro la foto sta alla sua misura vera e
   il contenitore scorre. Rimpicciolirla di nuovo per farla stare nello
   schermo sarebbe tornare al punto di partenza. */
.fo-ingrandita__foto {
  display: block;
  max-width: none;
  width: auto;
  height: auto;
}
.fo-ingrandita__chiudi {
  position: fixed; top: 10px; right: 10px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(248, 242, 237, .4);
  border-radius: 50%;
  background: rgba(10, 14, 20, .75);
  color: #F8F2ED;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
}
.fo-ingrandita__chiudi:hover { background: rgba(10, 14, 20, .95); }
.fo-ingrandita__chiudi:focus-visible { outline: 2px solid var(--fo-focus); outline-offset: 2px; }

/* ==================================================================
   LEGGIBILITÀ — 1 ottobre 2026
   Tre cose misurate, non viste a occhio. Si lavora qui, sui token e
   sulle regole comuni, non pagina per pagina: l'impaginazione e' quella
   approvata e non si tocca.
================================================================== */

/* 1. LA COLONNA DI LETTURA.
   Il testo correva per tutta la larghezza del contenitore: 1120px a
   1280, cioe' 124 battute per riga. Si legge bene fino a 70-75: oltre,
   l'occhio torna a capo e sbaglia riga. Il tema lo sapeva gia' — la
   regola per gli articoli limita a 68ch da settembre — ma sulle pagine
   Elementor non arrivava, perche' la classe .fo-wrap--narrow del
   prototipo non viene portata sul contenitore.
   Il contenitore resta largo e il TESTO si limita: cosi' titoli e
   paragrafi restano allineati sullo stesso bordo sinistro.

   54ch e non 68: il ch e' la larghezza dello zero, e in questo serif e'
   molto piu' largo della lettera media. A 68ch la riga misurava 751px e
   portava 91 battute CONTATE, non stimate. A 54ch sono 594px e circa 72,
   che e' il limite alto di quello che si legge bene. */
.e-con-inner > .elementor-widget-text-editor > p,
.e-con-inner > .elementor-widget-text-editor > ul,
.e-con-inner > .elementor-widget-text-editor > ol { max-width: 54ch; }
.fo-testimonianza { max-width: 72ch; }

/* 2. IL TESTO PICCOLO DA TELEFONO.
   Didascalie, etichette dei campi e testo dei consensi erano fra i 13 e
   i 15px, con interlinee strette: l'etichetta di un campo aveva
   line-height 13px, cioe' nessuna, e andando a capo le righe si
   toccavano. Il consenso privacy in particolare e' il testo che la
   persona deve poter leggere davvero. */
@media (max-width: 767px) {
  .fo-figura figcaption { font-size: .82rem; line-height: 1.45; }
  .fo-form label { font-size: .78rem; line-height: 1.5; }
  /* la regola base usa !important per battere Elementor: qui serve lo stesso */
  .fo-plain { font-size: .92rem !important; line-height: 1.55 !important; }
  .fo-privacy-note { font-size: .86rem; line-height: 1.55; }
  .fo-formato { font-size: .72rem; }
}

/* ==================================================================
   TESTIMONIANZE CHE SI APRONO
   Nome, ruolo e le prime righe ORIGINALI sempre visibili; il resto dietro
   "Leggi tutta la testimonianza". Il taglio cade su un punto fermo: le
   prime righe non sono un riassunto, sono l'inizio del testo vero.

   E' un <details>, quindi apre e chiude da tastiera, dice da solo se e'
   aperto o chiuso, e se il JavaScript non arriva funziona lo stesso.
   Dieci testimonianze lunghe, una sotto l'altra, erano quattro schermate
   di testo che nessuno leggeva fino in fondo.
================================================================== */
.fo-testimonianza {
  border-left: 3px solid var(--fo-ambra);
  padding: var(--fo-s-1) 0 var(--fo-s-1) var(--fo-s-4);
  margin: var(--fo-s-5) 0 0;
}
.fo-testimonianza > summary {
  cursor: pointer;
  list-style: none;
  display: block;
}
.fo-testimonianza > summary::-webkit-details-marker { display: none; }
.fo-testimonianza > summary:focus-visible { outline: 2px solid var(--fo-focus); outline-offset: 4px; }

.fo-chi {
  display: block;
  font-family: var(--fo-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-ink-soft);
  margin-bottom: var(--fo-s-2);
}
.fo-dark .fo-chi { color: var(--fo-su-scuro-tenue); }

.fo-inizio { display: block; font-size: 1.08rem; line-height: 1.6; }

/* L'etichetta: due parole vere, non una generata dal CSS, cosi' la legge
   anche chi non vede lo schermo. Si scambiano all'apertura. */
.fo-apri {
  display: inline-block;
  margin-top: var(--fo-s-2);
  font-family: var(--fo-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fo-ambra-txt);
  /* Bersaglio da pollice: la riga da sola sarebbe alta 18px. */
  padding: 10px 0;
}
.fo-dark .fo-apri { color: var(--fo-su-scuro-link); }
.fo-apri span:last-child { display: none; }
.fo-testimonianza[open] .fo-apri span:first-child { display: none; }
.fo-testimonianza[open] .fo-apri span:last-child { display: inline; }
.fo-testimonianza > summary:hover .fo-apri,
.fo-testimonianza > summary:focus-visible .fo-apri { text-decoration: underline; text-underline-offset: 3px; }

.fo-resto { font-size: 1.08rem; line-height: 1.6; }
.fo-resto p { margin: 0 0 var(--fo-s-3); }
.fo-resto p:last-child { margin-bottom: 0; }
/* L'etichetta sta fra le prime righe e il resto: aperto, il salto si
   sentirebbe. Il resto riparte da dove si era fermato. */
.fo-testimonianza[open] .fo-resto { margin-top: var(--fo-s-1); }

@media (max-width: 767px) {
  .fo-testimonianza { padding-left: var(--fo-s-3); }
}

/* ==================================================================
   TITOLETTO
   Una parola che divide un testo lungo — Risposte, Sfide, Consapevolezza,
   Metodo nella biografia. E' un h2 perche' quella e' la struttura vera
   della pagina, ma non deve pesare come un titolo di sezione: la
   biografia si legge di seguito, e quattro titoli grandi in fila la
   spezzerebbero in quattro pagine diverse.
   Sta attaccato al paragrafo che introduce, e staccato da quello sopra.
================================================================== */
.fo-titoletto {
  font-family: var(--fo-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--fo-ink);
}
/* Elementor incapsula il titolo, quindi il margine va messo sul widget: su
   dentro farebbe effetto solo nella sua scatola e il ritmo non cambierebbe.
   Il contenitore mette gia' 27px fra un widget e l'altro: sotto se ne
   tolgono 16, cosi' il titoletto sta attaccato al suo paragrafo (11px) e
   staccato da quello di prima (63px). Un titolo equidistante da sopra e da
   sotto non dice a chi appartiene. */
/* Da body: Elementor azzera il margine inferiore dei widget con una
   regola che a parita' di specificita' arriva dopo, e il -16 spariva. */
body .elementor .elementor-widget-heading.fo-titoletto {
  margin-block: var(--fo-s-4) -16px;
}
.elementor-widget-heading.fo-titoletto .elementor-heading-title {
  font-size: 1.12rem; font-weight: 600; line-height: 1.25; max-width: none;
}

/* Il formato accanto al nome della scheda. Chi sta per toccare un link
   deve sapere che si apre un PDF prima di toccarlo, non dopo. */
.fo-formato {
  /* Sempre su una riga sua: in linea finiva ora accanto al nome, ora
     sotto, a seconda di quanto il nome andava a capo, e l'elenco
     sembrava disallineato. */
  display: block;
  margin-top: 2px;
  font-family: var(--fo-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fo-ink-soft);
}
.fo-dark .fo-formato { color: var(--fo-su-scuro-tenue); }

/* ==================================================================
   "IN ARRIVO"
   Un materiale annunciato ma non ancora consegnato. Serve che si veda
   che manca: un elenco in cui una voce non si scarica e le altre si',
   senza dirlo, sembra un difetto del sito.
================================================================== */
.fo-in-arrivo {
  display: inline-block;
  margin-left: var(--fo-s-2);
  padding: 2px 8px;
  border: 1px solid var(--fo-line);
  border-radius: 999px;
  font-family: var(--fo-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-ink-soft);
  white-space: nowrap;
  vertical-align: 1px;
}
.fo-dark .fo-in-arrivo { border-color: rgba(248, 242, 237, .28); color: var(--fo-su-scuro-tenue); }

/* ==================================================================
   ACQUISTO — PRONTO E SPENTO
   Il libro non e' ancora in vendita. Un pulsante che non porta da
   nessuna parte e' peggio di nessun pulsante, quindi il blocco resta
   hidden finche' non arrivano i link: si accende togliendo l'attributo
   e mettendo l'href sui due <a>. Il display:none va dichiarato perche'
   i contenitori Elementor impongono un display ai figli e vincerebbero
   sul comportamento di fabbrica di [hidden].
================================================================== */
.fo-acquisto[hidden] { display: none; }
.fo-acquisto { margin-top: var(--fo-s-4); }
.fo-acquisto p { margin: 0 0 var(--fo-s-2); }
.fo-acquisto p:last-child {
  margin-bottom: 0;
  display: flex; flex-wrap: wrap; gap: var(--fo-s-2);
}
.fo-acquisto .fo-btn { margin-right: 0; }

/* Il marchio dentro una pagina: stessa logica del footer — piccolo, in riga
   con la frase che lo spiega, mai da solo come se fosse un secondo logo. */
.fo-marchio {
  display: flex; align-items: center; gap: var(--fo-s-3);
  margin-top: var(--fo-s-5);
  font-size: .9rem; color: var(--fo-ink-soft);
}
.fo-marchio img { width: 56px; height: 56px; flex: 0 0 56px; }
.fo-dark .fo-marchio { color: var(--fo-su-scuro-tenue); }
@media (max-width: 520px) { .fo-marchio { flex-direction: column; align-items: flex-start; } }

/* ==================================================================
   GRIGLIE GENERATE
   Le colonne di una griglia convertita: Elementor mette --width: 50% sui
   figli, ma 50 + 50 piu' il divario supera il contenitore e l'ultima
   colonna va a capo. Si corregge la variabile, non la larghezza: cosi'
   resta una sola dichiarazione e niente !important.
================================================================== */
/* Si sovrascrive width, non --width: la variabile Elementor la scrive
   sull'elemento e da foglio non la si raggiunge. La classe doppia .e-con.e-con
   basta a superare la regola del plugin, senza !important.
   Le percentuali da sole non bastano: il divario e' in pixel fissi, quindi
   50% + 50% + 54px sfora sempre, a qualsiasi larghezza. Serve il calc. */
.fo-griglia > .e-con.e-con { width: calc(50% - var(--fo-s-6) / 2); }
.fo-griglia--3 > .e-con.e-con { width: calc(33.333% - var(--fo-s-6) * 2 / 3); }
@media (max-width: 1024px) {
  .fo-griglia--3 > .e-con.e-con { width: calc(50% - var(--fo-s-6) / 2); }
}
@media (max-width: 767px) {
  .fo-griglia > .e-con.e-con,
  .fo-griglia--3 > .e-con.e-con { width: 100%; }
}

/* Una figura che spezza una colonna di testo ha bisogno di respiro sopra e
   sotto, o si incolla al paragrafo. Il primo/ultimo figlio resta a zero:
   ci pensa la regola sui contenitori. */
.fo-wrap--narrow .fo-figura,
.e-con-inner .fo-figura { margin-block: var(--fo-s-6); }
.fo-figura img { display: block; width: 100%; height: auto; }

/* ==================================================================
   ICONE
   Con parsimonia: il registro e' editoriale, e un'icona che non aggiunge
   comprensione toglie soltanto. Stanno dove distinguono a colpo d'occhio
   una voce da un'altra, mai come decorazione.

   Tratto sottile, currentColor, nessun riempimento: seguono il colore del
   testo, quindi funzionano anche sulle fasce scure senza una seconda
   versione. Dimensione legata al testo, non fissa in pixel.
================================================================== */
.fo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.fo-icona {
  width: 1.15em; height: 1.15em;
  flex: 0 0 auto;
  vertical-align: -0.18em;
  color: var(--fo-ambra-txt);        /* subordinata: l'oro leggibile, non l'inchiostro */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.fo-dark .fo-icona { color: var(--fo-su-scuro-link); }

/* Elenco di canali: l'icona incolonnata a sinistra, il testo allineato. */
.fo-canali { list-style: none; padding: 0; margin: 0; }
.fo-canali li {
  display: flex; align-items: baseline; gap: var(--fo-s-3);
  padding: var(--fo-s-2) 0;
}
.fo-canali li + li { border-top: 1px solid var(--fo-line); }
.fo-canali .fo-icona { position: relative; top: .12em; }

/* Nelle schede l'icona sta sopra il titolo, staccata. */
.fo-card .fo-icona { display: block; width: 1.6em; height: 1.6em; margin-bottom: var(--fo-s-3); }

/* La stessa lista di canali nel footer: piu' compatta, senza filetti — la
   colonna e' gia' stretta e i filetti la spezzerebbero in tre. */
.fo-canali--foot li { padding: 4px 0; border-top: 0; }
.fo-canali--foot li + li { border-top: 0; }

/* I social diventano soli segni: il nome sta nell'aria-label del link. */
.fo-foot__social { display: flex; gap: var(--fo-s-4); align-items: center; margin-top: var(--fo-s-4); }
.fo-foot__social a { display: inline-flex; line-height: 0; }
.fo-foot__social .fo-icona { width: 1.35em; height: 1.35em; }
.fo-foot__social a:hover .fo-icona { color: var(--fo-su-scuro); }

/* Nel footer, che e' sempre scuro, le icone prendono il chiaro. */
.fo-foot .fo-icona { color: var(--fo-su-scuro-link); }

/* ==================================================================
   IL LOGO NOE SUL BLU NOTTE
   E' un marchio positivo: testo chiaro dentro un quadrato verde scuro, su
   petali arancio e blu. Su fondo scuro quei colori attiravano l'occhio piu'
   del nome di Federico che gli sta sopra, e rompevano la palette.
   Desaturato e attenuato smette di competere.

   NON e' la soluzione definitiva. Una versione monocromatica vera, disegnata
   per i fondi scuri, farebbe di meglio: qualunque conversione automatica
   resta una macchia chiara, perche' il marchio nasce positivo. Quando arriva
   si toglie questo filtro e si cambia il file.
   Sulle pagine chiare il logo resta a colori: li' non da' fastidio.
================================================================== */
.fo-foot__marchio img {
  filter: grayscale(1) brightness(1.25) opacity(.42);
  transition: filter .25s ease;
}
.fo-foot__marchio:hover img { filter: grayscale(1) brightness(1.35) opacity(.65); }

/* Barra legale delle pagine di funnel: sottile, in fondo, senza navigazione. */
.fo-canvas-legale {
  display: flex; flex-wrap: wrap; gap: var(--fo-s-3) var(--fo-s-5);
  justify-content: space-between; align-items: center;
  max-width: var(--fo-wrap, 1120px); margin: 0 auto;
  padding: var(--fo-s-4) var(--fo-s-4) var(--fo-s-5);
  font-family: var(--fo-mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--fo-ink-soft);
  border-top: 1px solid var(--fo-line);
}
.fo-canvas-legale a { color: inherit; }
.fo-canvas-legale a + a { margin-left: var(--fo-s-4); }

/* Il rimando di testo dopo una CTA. Dalla revisione 2 ogni pagina ha una
   sola CTA primaria e al massimo una secondaria: tutti gli altri inviti
   scendono a link di testo, che indicano la strada senza contendere il
   clic al pulsante. Colore ereditato, cosi' funziona anche su .fo-dark
   (dove .fo-dark a lo porta sull'oro chiaro). */
.fo-sotto-cta {
  margin: var(--fo-s-3) 0 0;
  font-size: .95rem;
}
.fo-sotto-cta a {
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.fo-sotto-cta a:hover,
.fo-sotto-cta a:focus-visible { border-bottom-color: transparent; }

/* "Prossimamente": quello che esiste ma non e' ancora disponibile — i link
   di acquisto, le destinazioni dei QR. Revisione 2, punto 10: si segnala,
   non si nasconde e non blocca la pagina. Tono di una nota, non di un
   avviso di errore. */
.fo-prossimamente {
  margin-top: var(--fo-s-3);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--fo-ink-soft);
}
.fo-prossimamente strong { font-weight: 600; }
.fo-dark .fo-prossimamente { color: var(--fo-su-scuro-tenue); }
.fo-dark .fo-prossimamente strong { color: var(--fo-su-scuro); }

/* ==================================================================
   AVVISO DEL QR SENZA DESTINAZIONE
   Lo inserisce il mu-plugin dei QR in cima alla sezione Libro Risponde
   quando qualcuno arriva da /lr/N e la destinazione non c'e' ancora.
   Vive su fondo scuro: colori dal token del chiaro-su-scuro, non dal
   testo normale, o resta grigio su blu notte.
================================================================== */
.fo-qr-avviso {
  margin: 0 0 var(--fo-s-5);
  padding: var(--fo-s-3) var(--fo-s-4);
  border-left: 3px solid var(--fo-ambra);
  background: rgba(248, 242, 237, .07);
  border-radius: 0 var(--fo-raggio) var(--fo-raggio) 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--fo-su-scuro);
}

/* ==================================================================
   MOSAICO DELLE FOTOGRAFIE
   Una foto sola in apertura di /formazione diventava LA foto: un palco,
   una platea, un cliente solo. Tre riquadri affiancati dicono invece che
   i contesti sono diversi — platea, piccolo gruppo, esercitazione — e
   nessuno dei tre pretende di rappresentare tutto.
   Proporzioni diverse apposta: allineati in alto, fanno una scaletta.
================================================================== */
.fo-mosaico {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fo-s-4);
  align-items: start;
}
@media (max-width: 1024px) {
  /* Tre per riga, non due. A due colonne le tessere arrivano a 489px ed e'
     la misura PIU' GRANDE a cui vengono mostrate — piu' che a 1280, dove
     sono 260. La tessera "team" viene da un collage e ha 451px nativi: a
     489 coprirebbe il 46 per cento di quello che serve su uno schermo a
     densita' doppia, e si vedrebbe. A tre colonne sono 310px e la
     copertura sale al 73. */
  .fo-mosaico { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .fo-mosaico { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .fo-mosaico { grid-template-columns: 1fr; gap: var(--fo-s-5); }
}

/* Due tessere sole. Dal 1 ottobre il mosaico ne ha due — platea e piccoli
   gruppi — e il collage sta sotto, come blocco a se'. Con le colonne a
   quattro le due foto occupavano il primo quarto della riga e sembravano
   un errore di impaginazione. */
.fo-mosaico--due { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) { .fo-mosaico--due { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .fo-mosaico--due { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .fo-mosaico--due { grid-template-columns: 1fr; } }

/* ==================================================================
   IL COLLAGE DEL LABORATORIO
   Quattro foto in una griglia, NON un'immagine sola. Il collage di
   riferimento era un'immagine generata: ricostruirlo in CSS vuol dire
   che le persone restano quelle fotografate, che desktop e telefono
   possono inquadrare diverso senza raddoppiare i file, e che il testo
   sotto resta testo invece di finire stampato dentro una foto.

   Colonna sinistra piu' larga, come nel riferimento: le due orizzontali
   stanno a sinistra e reggono il taglio, le due verticali a destra. Il
   ritaglio lo fa object-fit, la messa a fuoco object-position, scritta
   per ogni foto nel prototipo.
================================================================== */
.fo-collage {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--fo-s-2);
  margin-top: var(--fo-s-5);
  /* La proporzione sta sul CONTENITORE, non sulle singole foto. Mettendola
     sulle foto ogni cella si faceva l'altezza sua: a 1280 la riga era alta
     443 a sinistra e 295 a destra, e sotto le verticali restavano 148px di
     buco. Con la proporzione qui, le due righe sono 1fr e 1fr e si
     allineano da sole. */
  aspect-ratio: 3 / 2;
}
.fo-collage figure { margin: 0; min-height: 0; }
.fo-collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--fo-raggio);
}
/* Sotto i 700px le colonne diseguali stringono troppo la destra: a 2x2
   pari le facce restano leggibili. Sotto i 520 si impila: a quattro
   tessere larghe 170px non si riconosce piu' nessuno, ed e' il contrario
   di quello che la foto deve dire. */
@media (max-width: 700px) {
  .fo-collage { grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 3; }
}
@media (max-width: 520px) {
  .fo-collage {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    aspect-ratio: auto;
    gap: var(--fo-s-3);
  }
  .fo-collage img { aspect-ratio: 4 / 3; height: auto; }
}
/* La frase sta sotto il collage e gli appartiene: niente del divario
   pieno fra blocchi. */
.fo-collage + .fo-payoff,
.fo-collage + .elementor-widget .fo-payoff { margin-top: var(--fo-s-3); }

/* ==================================================================
   LE DUE POLTRONE
   Immagine simbolica del percorso individuale, non la fotografia di una
   sessione: la didascalia lo dice e l'alt comincia con "Illustrazione".

   Due inquadrature, non due file. Sopra le poltrone c'e' una grande
   parete vuota: da desktop e' respiro, e il taglio largo la tiene; da
   telefono, su 355px, diventa meta' immagine di niente, quindi il
   riquadro si fa piu' alto e stretto e si guarda in basso.
   object-position: il primo valore conta dove si taglia in orizzontale,
   il secondo in verticale — e ne agisce solo uno per volta, quello sul
   lato che viene davvero tagliato.
================================================================== */
.fo-poltrone[hidden] { display: none; }
.fo-poltrone img {
  width: 100%;
  object-fit: cover;
  /* Da desktop si taglia in ALTEZZA: 16/9 su una sorgente 3/2 toglie
     160px, e si tolgono dall'alto — e' li' che c'e' solo muro. */
  aspect-ratio: 16 / 9;
  object-position: center 68%;
}
@media (max-width: 767px) {
  .fo-poltrone img {
    /* Da telefono si taglia in LARGHEZZA e si tiene tutta l'altezza: le
       poltrone restano grandi. Il taglio pende a sinistra per non
       perdere la pianta, che da' profondita' alla stanza; a destra c'e'
       solo l'ombra della finestra. */
    aspect-ratio: 4 / 3;
    object-position: 45% center;
  }
}

/* Le tessere vanno tutte alla stessa proporzione, o la colonna verticale
   viene alta il doppio delle altre e non e' piu' un mosaico: e' una foto
   grande con due francobolli a fianco. Il taglio della verticale e'
   spostato in alto (object-position sull'immagine), o si perdono le teste
   delle due persone che stanno lavorando. */
.fo-mosaico .fo-figura img { aspect-ratio: 4/3; object-fit: cover; }

/* ==================================================================
   IL MODULO DI CONTATTO
   Eredita da .fo-form: riquadro bianco, etichette in mono, campi con
   la stessa cornice degli altri moduli del sito. Qui c'e' solo quello
   che il modulo ha in piu' — il menu a tendina, l'asterisco, il campo
   trappola, il riquadro degli errori e quello della conferma.
================================================================== */
.fo-modulo { max-width: 560px; }
.fo-campo { margin: 0 0 var(--fo-s-3); }
.fo-modulo select {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--fo-line); border-radius: var(--fo-raggio);
  font-family: var(--fo-body); font-size: 1rem;
  background: var(--fo-paper); color: var(--fo-ink);
  /* La freccia disegnata a mano: l'aspetto di fabbrica cambia da sistema
     a sistema ed e' l'unico campo che stonava accanto agli altri. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.fo-modulo select:focus,
.fo-modulo textarea:focus { outline: 2px solid var(--fo-focus); outline-offset: 1px; }
.fo-modulo textarea { resize: vertical; min-height: 140px; }
.fo-obbl { color: var(--fo-ambra-txt); }

/* Il campo trappola. Non display:none: una parte degli automatismi salta
   quello che e' dichiarato nascosto, e la trappola non scatterebbe. Qui
   e' fuori dallo schermo e fuori dal giro di tabulazione. */
.fo-trappola {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.fo-modulo__errori {
  border-left: 3px solid #A8321E;
  background: rgba(168, 50, 30, .06);
  padding: var(--fo-s-3) var(--fo-s-4);
  border-radius: 0 var(--fo-raggio) var(--fo-raggio) 0;
  margin-bottom: var(--fo-s-4);
  font-size: .92rem;
}
.fo-modulo__errori p { margin: 0 0 var(--fo-s-1); }
.fo-modulo__errori ul { margin: 0; padding-left: 1.2em; }
.fo-modulo__errori li { margin-bottom: 2px; }
.fo-modulo__azioni { margin: var(--fo-s-4) 0 0; }

.fo-modulo--fatto h2 { margin-top: 0; font-size: 1.4rem; }
.fo-modulo--fatto p:last-child { margin-bottom: 0; }

@media (max-width: 520px) {
  .fo-modulo input[type="text"],
  .fo-modulo input[type="email"],
  .fo-modulo select { min-height: 48px; }
}

/* ==================================================================
   COLONNA CENTRATA
   .fo-cover si centra da sola (max-width 300, margin auto). Quello che
   le sta sotto no: il pulsante e il rimando restavano a filo colonna,
   sfalsati di un'ottantina di pixel rispetto alla copertina, e da
   lontano sembravano appartenere alla colonna del testo accanto.
================================================================== */
.fo-col-centro { text-align: center; }
.fo-col-centro > .elementor-widget-button { align-self: center; }
/* Il margine destro che il pulsante si porta da quando stava in linea nel
   testo: centrato, sposta la sua scatola di 6px a sinistra della
   copertina. Sei pixel non si vedono da soli, ma fra due elementi
   allineati si'. */
.fo-col-centro .fo-btn { margin-right: 0; }

/* ==================================================================
   BERSAGLI DA TELEFONO
   Un rimando di testo alto 25px si centra male col pollice. Sotto i
   768px i link che sono CTA a se' stanti prendono aria sopra e sotto
   fino a 44px veri; quelli dentro una frase restano come sono, perche'
   allargarli spezzerebbe l'interlinea del paragrafo.
================================================================== */
@media (max-width: 767px) {
  .fo-sotto-cta a {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .fo-canali a { display: inline-block; padding: 9px 0; }
  .fo-head__brand { padding: 8px 0; }
  /* La casella di consenso: 22px erano sotto il minimo, e la riga di
     testo accanto stava stretta. */
  .fo-consent input { width: 24px; height: 24px; }
  .fo-plain { line-height: 1.5 !important; }
}

/* ==================================================================
   CHIUSURA DELL'HERO
   Tre cose che si vedevano solo guardando la home da lontano.
================================================================== */

/* 1. La riga di credibilita' aveva un margine tutto suo (27px) SOPRA i
   27px di distanza che il contenitore mette gia' fra i widget: era
   l'unico elemento dell'hero a stare a 54px dal precedente, e si notava.
   Il ritmo lo detta il contenitore, come per tutto il resto. */
.fo-hero .fo-cred { margin-top: 0; }

/* 2. Sotto la riga restavano 100px di respiro — il padding pieno di una
   sezione — e poi subito il filetto. L'hero non finisce con un blocco di
   testo da far decantare: finisce con una riga piccola, e la sezione dopo
   ha il suo padding intero. Qui basta poco piu' della meta'. */
.fo-hero > .e-con-inner { padding-bottom: calc(var(--fo-sezione) * .42); }

/* 3. I filetti erano DUE: la classe disegna una barra di fondo alta 1px, e
   dentro il widget divisore Elementor ci mette il suo separatore — con il
   bordo nero di fabbrica, quindici pixel piu' sotto. Ne resta uno, quello
   del widget, del colore dei filetti del sito. */
/* Il colore del separatore non si cambia con border-top-color: il widget lo
   costruisce da una variabile sua. E non basta impostarla su .fo-rule: il
   CSS di Elementor ha la stessa specificita' (0,1,0) e si carica DOPO il
   tema — il foglio del tema e' il settimo, quelli di Elementor dal nono in
   poi. Serve la doppia classe, che vince a prescindere dall'ordine. */
.elementor-widget-divider.fo-rule {
  background: none;
  height: auto;
  --divider-color: var(--fo-line);
}

/* E il rimando di testo prende anch'esso il ritmo del contenitore: dentro
   l'hero era l'unico a stare a 45px dal precedente invece che a 27. */
.fo-hero .fo-sotto-cta { margin-top: 0; }

/* ==================================================================
   ULTIMO GIRO VISIVO — 25 settembre 2026
================================================================== */

/* 1. Le etichette sopra i titoli non vanno a capo.
   Non era un problema di testo: il limite di 24 battute pensato per gli
   h2 (.e-con-inner > .elementor-widget-heading .elementor-heading-title)
   colpiva anche l'occhiello, che e' un widget heading con header_size
   "div". A .72rem con 0.16em di spaziatura, 24 battute fanno 196px: ci
   stava "Dicono di me" e non ci stava "Formazione e coaching".
   L'occhiello e' un'etichetta, non un titolo: il limite non lo riguarda. */
.e-con-inner > .elementor-widget-heading.fo-eyebrow .elementor-heading-title {
  max-width: none;
}
@media (min-width: 768px) {
  /* Da desktop nessuna etichetta va a capo, mai. Sotto i 768 si lascia
     libera: "Formatore senior e Professional Coach" in 335px non ci sta,
     e mandarla fuori schermo sarebbe peggio che spezzarla. */
  .fo-eyebrow,
  .fo-eyebrow .elementor-heading-title { white-space: nowrap; }
}

/* 2. Riquadri della stessa riga alla stessa altezza.
   Il contenitore generato e' flex e di fabbrica allinea in cima: le schede
   restavano alte quanto il loro testo e la riga usciva sbilenca — 352, 267
   e 324 px nella stessa fila. */
/* La struttura vera e' questa, e non ha un .e-con-inner: quando il
   contenitore ha content_width "full" Elementor usa .e-con-full, cioe' il
   contenitore E' l'involucro interno.

     .fo-griglia            flex, wrap        <- le colonne stanno in riga
       > .e-con             flex, COLONNA     <- la singola colonna
           > .elementor-widget                <- l'involucro del widget
               > .fo-card

   Le colonne si allungano gia' da sole (align-items: stretch di
   fabbrica). Il pezzo che mancava e' il widget: dentro un flex in
   colonna i figli si allargano in orizzontale, non in verticale, e
   restava alto quanto il suo testo. */
.fo-griglia > .e-con > .elementor-widget { flex: 1 1 auto; }
.fo-griglia .fo-card { height: 100%; }

/* 3. La fascia scura finale e il footer scuro erano lo stesso blu notte
   attaccato: sembravano un blocco solo, alto mille pixel, senza un punto
   in cui una cosa finisce e comincia l'altra. Un filetto chiaro in cima
   al footer, dello stesso tono dei filetti che il tema usa gia' dentro le
   fasce scure. Sulle pagine che chiudono chiaro si legge come lo stacco
   fra il contenuto e il piede: va bene lo stesso. */
.fo-foot { border-top: 1px solid rgba(248, 242, 237, .18); }

/* ==================================================================
   ELENCHI ESPANDIBILI
   Studi, moduli del percorso, i nove temi di Libro Risponde. Chiusi di
   partenza, come ha chiesto Federico: da telefono un elenco di venti
   voci fra due paragrafi e' un muro.
   <details> nativo, non un accordion costruito a mano: funziona senza
   JavaScript, lo sa leggere uno screen reader e il browser lo apre da
   solo quando si cerca dentro la pagina.
================================================================== */
.fo-espandi {
  margin: var(--fo-s-5) 0 0;
  border-top: 1px solid var(--fo-line);
  border-bottom: 1px solid var(--fo-line);
}
.fo-espandi > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--fo-s-4) 0;
  font-family: var(--fo-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-ambra-txt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fo-s-3);
  /* Bersaglio da pollice: la riga e' alta 44px abbondanti col padding. */
  min-height: 44px;
}
.fo-espandi > summary::-webkit-details-marker { display: none; }
/* Il segno + / − disegnato con i bordi: niente font di icone. */
.fo-espandi > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s ease-out;
}
.fo-espandi[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.fo-espandi > summary:focus-visible { outline: 2px solid var(--fo-focus); outline-offset: 2px; }
.fo-espandi > *:not(summary) { margin-top: 0; padding-bottom: var(--fo-s-4); }
/* Dentro un elenco espandibile i filetti delle voci bastano da soli:
   quello del contenitore raddoppierebbe la riga in cima. */
.fo-espandi .fo-moduli { margin-top: 0; }
.fo-espandi .fo-moduli li:first-child { border-top: 0; }
/* E in fondo vale il contrario: il filetto dell'ultima voce e quello del
   contenitore finiscono a dieci pixel uno dall'altro, e sembrano una riga
   sbagliata. Chiude il contenitore. */
.fo-espandi .fo-moduli li:last-child { border-bottom: 0; }
.fo-dark .fo-espandi { border-color: rgba(248, 242, 237, .18); }
.fo-dark .fo-espandi > summary { color: var(--fo-su-scuro-link); }

/* Il tema raggiunto da un QR: si accende per un attimo, cosi' chi arriva
   da fuori capisce dove e' atterrato in mezzo a nove voci uguali. */
.fo-moduli li:target { animation: fo-evidenzia 2.4s ease-out 1; }
@keyframes fo-evidenzia {
  0%, 55% { background: rgba(227, 183, 92, .16); }
  100%    { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .fo-moduli li:target { animation: none; background: rgba(227, 183, 92, .12); }
}