/* ============================================================================
   REVERSEA :: il sito
   ----------------------------------------------------------------------------
   Token presi da Marketing/brand/sistema/reversea.css del brain (stessi nomi,
   stessi dodici colori). Spec: docs/superpowers/specs/2026-10-05-restyling-
   sito-design.md del brain. Tre regole che governano il file:
   1. Nessun colore fuori palette: se non c'è la variabile, non si scrive.
      Lo verifica tools/controlla_palette.py.
   2. Solo Archivo 400 e 600.
   3. Corpi a gradini fissi, due scale e un breakpoint: niente clamp().
      I sette gradini della scala governano titoli e corpi. Alcune grandezze
      di servizio per gli elementi di interfaccia sono volute, approvate da
      Matteo il 2026-10-05: 15 (menu, link, indice, footer), 16 (bottoni,
      testi di cella, elenchi dei pannelli), 20 (domande FAQ, stesso tema),
      30 (nome dell'offerta, cifre dei casi), 34 (h2 degli articoli), 56/36
      (h1 della testata), 12 (riga legale).
   ============================================================================ */

:root {
  --blue-dark:#01072B; --blue:#040A34; --blue-light:#111744;
  --crimson:#F82A59;
  --grey-dark:#D6D9E4; --grey:#EBECF1; --white:#FFFFFF;
  --orange:#FF4900; --electric:#4750FD; --yellow:#FFBC15;

  --filetto: rgba(4,10,52,.14);
  --testo-tenue: rgba(17,23,68,.72);
  --testo-su-scuro: rgba(255,255,255,.78);

  --t-numero:88px; --t-h1:64px; --t-h2:44px; --t-h3:26px;
  --t-sotto:22px; --t-corpo:18px; --t-nota:14px;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s7:64px; --s8:96px; --s9:128px;
  --margine:40px; --larghezza:1120px;
  --r-pill:999px; --r-2:24px;

  --accento: var(--crimson);      /* lo cambia data-tema sul body */
}
@media (max-width:767px){
  :root{ --t-numero:56px; --t-h1:40px; --t-h2:30px; --t-h3:22px;
         --t-sotto:19px; --t-corpo:17px; --margine:16px; }
}

body[data-tema="controllo"]{ --accento: var(--crimson); }
body[data-tema="cassa"]{ --accento: var(--orange); }
body[data-tema="margini"]{ --accento: var(--electric); }
body[data-tema="pianificazione"]{ --accento: var(--yellow); --accento-testo: var(--blue); } /* testo: il giallo sul chiaro non regge */

/* --- base: reset a peso zero con :where(), trappola 1 di SISTEMA.md ------ */
:where(*,*::before,*::after){ box-sizing:border-box; }
:where(h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote){ margin:0; }
:where(ul,ol){ padding:0; list-style:none; }
:where(a){ color:inherit; text-decoration:none; }
:where(img,svg){ display:block; max-width:100%; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{ margin:0; background:var(--grey); color:var(--blue-light);
      font-family:Archivo,sans-serif; font-weight:400; font-size:var(--t-corpo);
      line-height:1.55; -webkit-font-smoothing:antialiased; }
h1{ font-size:var(--t-h1); line-height:1.05; font-weight:400; color:var(--blue); letter-spacing:-.01em; }
h2{ font-size:var(--t-h2); line-height:1.12; font-weight:600; color:var(--blue); max-width:960px; }
h3{ font-size:var(--t-h3); line-height:1.25; font-weight:600; color:var(--blue); }
strong,b{ font-weight:600; }
.numero{ font-size:var(--t-numero); line-height:1; font-weight:400; color:var(--blue); font-variant-numeric:tabular-nums; }
.occhiello{ font-size:var(--t-nota); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accento-testo, var(--accento)); }
.sottotitolo,.attacco{ font-size:var(--t-sotto); line-height:1.45; max-width:900px; }
.sottotitolo{ margin-top:var(--s2); }
.attacco{ margin-top:var(--s3); }
.nota{ font-size:var(--t-nota); color:var(--testo-tenue); }
/* Niente parola sola sull'ultima riga: il browser ricompone le ultime righe
   del paragrafo (rilievo di Matteo del 2026-10-08, "va a capo in modo strano").
   Le misure massime di titoli e sottotitoli sono salite per lo stesso motivo:
   820 e 760 px lasciavano a destra spazio vuoto dentro una cornice da 1120. */
p,li,h1,h2,h3,h4,summary{ text-wrap:pretty; }
:focus-visible{ outline:3px solid var(--electric); outline-offset:3px; border-radius:4px; }

/* --- struttura ----------------------------------------------------------- */
.cornice{ max-width:calc(var(--larghezza) + 2 * var(--margine)); margin:0 auto; padding:0 var(--margine); }
.sezione{ padding:var(--s8) 0; }
.fascia{ background:var(--grey-dark); }
.rottura{ background:var(--blue-dark); color:var(--testo-su-scuro); }
.rottura h2,.rottura h3{ color:var(--white); }
.sezione > .cornice > h2 + .sottotitolo + *{ margin-top:var(--s7); }
/* Il blocco FAQ ha già la sua distanza (.faq h2, 40px): details resta fuori. */
.sezione > .cornice > h2 + :not(.sottotitolo):not(details){ margin-top:var(--s7); }
@media (max-width:767px){ .sezione{ padding:var(--s7) 0; } }

/* --- bottoni e collegamenti ---------------------------------------------- */
.bottoni{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5); }
.bottone{ display:inline-flex; align-items:center; gap:var(--s1); border-radius:var(--r-pill);
          padding:14px 28px; font-weight:600; font-size:16px; line-height:1.2;
          transition:background-color .2s, color .2s, transform .2s; }
.bottone:hover{ transform:translateY(-2px); }
.bottone.piccolo{ padding:10px 20px; font-size:var(--t-nota); }
.primario{ background:var(--crimson); color:var(--white); }
.primario:hover{ background:var(--blue); }
.scuro{ background:var(--blue); color:var(--white); }
.scuro:hover{ background:var(--crimson); }
.filo{ box-shadow:inset 0 0 0 1.5px var(--blue); color:var(--blue); }
.filo:hover{ background:var(--blue); color:var(--white); }
.filo-chiaro{ box-shadow:inset 0 0 0 1.5px var(--white); color:var(--white); }
.filo-chiaro:hover{ background:var(--white); color:var(--blue); }
.collegamento{ display:inline-block; margin-top:var(--s2); font-size:15px; font-weight:600; color:var(--blue);
               border-bottom:2px solid var(--accento); padding-bottom:2px; }
.caso{ display:block; margin-top:var(--s1); font-size:15px; color:var(--testo-tenue); }
.caso:hover{ color:var(--blue); text-decoration:underline; text-underline-offset:4px; }

/* --- menu (C1) ------------------------------------------------------------ */
.menu{ position:sticky; top:0; z-index:50; background:rgba(235,236,241,.92);
       backdrop-filter:blur(10px); border-bottom:1px solid var(--grey-dark); }
.menu .cornice{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); height:76px; }
.menu-logo img{ height:26px; width:auto; }
.menu-voci{ display:flex; gap:28px; font-size:15px; }
.menu-voci a{ position:relative; padding:4px 0; }
.menu-voci a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
                     background:var(--crimson); border-radius:var(--r-pill); transition:width .25s; }
.menu-voci a:hover::after,.menu-voci a[aria-current="page"]::after{ width:100%; }
.menu-voci a[aria-current="page"]{ color:var(--blue); font-weight:600; }
.menu-azioni{ display:flex; gap:12px; }
.menu-apri{ display:none; background:none; border:0; padding:8px; color:var(--blue); cursor:pointer; }
.menu-apri .chiudi{ display:none; }
.menu-apri[aria-expanded="true"] .apri{ display:none; }
.menu-apri[aria-expanded="true"] .chiudi{ display:block; }
.menu-mobile{ display:none; }
@media (max-width:1023px){
  .menu-voci,.menu-azioni{ display:none; }
  .menu-apri{ display:block; }
  .menu-mobile[data-aperto="true"]{ display:flex; flex-direction:column; gap:var(--s2);
       padding:var(--s3) var(--margine) var(--s4); border-top:1px solid var(--grey-dark); font-size:18px; }
  .menu-mobile .bottone{ justify-content:center; }
}

/* --- hero (C2) ------------------------------------------------------------ */
.hero .cornice{ display:grid; grid-template-columns:1.15fr 1fr; gap:var(--s6); align-items:center;
                padding-top:var(--s8); padding-bottom:var(--s8); }
.hero .occhiello{ margin-bottom:var(--s3); }
.hero .cornice:not(:has(.hero-visivo)){ grid-template-columns:1fr; } /* hero di solo testo: a tutta larghezza */
.hero:has(+ .sezione:not(.fascia)) .cornice:not(:has(.hero-visivo)){ padding-bottom:0; } /* stesso sfondo sotto: niente doppio spazio */
.hero-visivo{ position:relative; height:420px; }
.galleggia{ position:absolute; display:flex; align-items:center; gap:var(--s2); background:var(--white);
            border-radius:var(--r-pill); padding:12px 28px 12px 12px; font-weight:600; color:var(--blue);
            box-shadow:0 12px 32px rgba(4,10,52,.08); animation:fluttua 6s ease-in-out infinite; }
.galleggia:nth-child(1){ top:20px; left:10%; }
.galleggia:nth-child(2){ top:120px; right:0; animation-delay:-1.5s; }
.galleggia:nth-child(3){ top:230px; left:0; animation-delay:-3s; }
.galleggia:nth-child(4){ top:330px; right:8%; animation-delay:-4.5s; }
@keyframes fluttua{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media (max-width:767px){
  .hero .cornice{ grid-template-columns:1fr; padding-top:var(--s7); padding-bottom:var(--s7); }
  .hero-visivo{ display:none; }
}

/* --- pastiglie ------------------------------------------------------------ */
.pastiglia{ display:inline-flex; flex:none; width:56px; height:56px; border-radius:var(--r-pill);
            align-items:center; justify-content:center; color:var(--white); background:var(--accento); }
.pastiglia svg{ width:26px; height:26px; }
.tema-controllo{ --accento:var(--crimson); }
.tema-cassa{ --accento:var(--orange); }
.tema-margini{ --accento:var(--electric); }
.tema-pianificazione{ --accento:var(--yellow); --accento-testo:var(--blue); } /* testo: il giallo sul chiaro non regge */
/* un tema annidato non eredita il blu: initial rende la variabile non valida e scatta il ripiego su --accento */
.tema-controllo,.tema-cassa,.tema-margini{ --accento-testo:initial; }
.pastiglia.tema-pianificazione{ color:var(--blue-dark); }
.pastiglia.piccola{ width:44px; height:44px; }
.pastiglia.piccola svg{ width:22px; height:22px; }
.pastiglia.grigia{ background:var(--grey-dark); color:var(--blue); }
.pastiglia.scatta svg{ animation:scatto .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes scatto{ from{ transform:scale(.4) rotate(-20deg); } to{ transform:none; } }

/* --- griglie a filetti ---------------------------------------------------- */
.griglia-2,.griglia-3,.griglia-4{ display:grid; }
.griglia-2{ grid-template-columns:repeat(2,1fr); }
.griglia-3{ grid-template-columns:repeat(3,1fr); }
.griglia-4{ grid-template-columns:repeat(4,1fr); }
.griglia-3 > .cella,.griglia-4 > .cella{ padding:var(--s1) var(--s4); }
.griglia-3 > .cella:first-child,.griglia-4 > .cella:first-child{ padding-left:0; }
.griglia-3 > .cella + .cella,.griglia-4 > .cella + .cella{ border-left:1px solid var(--filetto); }
.cella h3{ margin:var(--s2) 0 var(--s1); }
.cella p{ font-size:16px; }
@media (max-width:1023px){ .griglia-4{ grid-template-columns:repeat(2,1fr); row-gap:var(--s5); }
  .griglia-4 > .cella:nth-child(odd){ border-left:0; padding-left:0; } }
@media (max-width:767px){
  .griglia-2,.griglia-3,.griglia-4{ grid-template-columns:1fr; row-gap:0; }
  .griglia-3 > .cella,.griglia-4 > .cella{ border-left:0 !important; padding:var(--s4) 0;
       border-top:1px solid var(--filetto); }
}

/* --- numeri e loghi (C3) -------------------------------------------------- */
.numeri .griglia-3 > .cella{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.numeri .etichetta{ font-size:var(--t-nota); letter-spacing:.08em; text-transform:uppercase; margin-top:12px; }
.loghi{ overflow:hidden; margin-top:var(--s7); border-top:1px solid var(--filetto); padding:28px 0;
        -webkit-mask-image:linear-gradient(90deg,transparent,var(--blue-dark) 10%,var(--blue-dark) 90%,transparent);
                mask-image:linear-gradient(90deg,transparent,var(--blue-dark) 10%,var(--blue-dark) 90%,transparent); }
/* Lo spazio fra i loghi è un margine destro e non un gap: con il gap la seconda
   metà del binario partiva sfasata di mezzo spazio e a fine giro si vedeva il
   salto (rilievo di Matteo del 2026-10-08). Così -50% cade esatto sull'inizio. */
.loghi-binario{ display:flex; align-items:center; width:max-content; animation:scorri 50s linear infinite; }
.loghi-binario img{ height:32px; width:auto; margin-right:96px; filter:grayscale(1); opacity:.6; transition:opacity .2s; }
.loghi-binario img:hover{ opacity:1; }
.loghi-binario img.inverti{ filter:invert(1) grayscale(1); }   /* logo bianco su trasparente (dartmoon) */
.loghi-binario img.alto{ height:52px; }   /* loghi a due piani (simbolo sopra, nome sotto): a 32 px il nome non si legge */
@keyframes scorri{ to{ transform:translateX(-50%); } }

/* --- temi (C5) e servizi -------------------------------------------------- */
.temi{ border-top:1px solid var(--filetto); }
.temi > .cella{ display:flex; gap:var(--s3); padding:var(--s5) var(--s5) var(--s5) 0; border-bottom:1px solid var(--filetto); }
.temi > .cella:nth-child(2n){ padding-left:var(--s5); border-left:1px solid var(--filetto); }
.temi > .cella h3{ margin-top:var(--s1); }
/* La linea sotto "Il caso" cresce da sinistra come nel menu (rilievo del 2026-10-08). */
.temi .caso{ display:inline-block; position:relative; margin-top:var(--s2); padding-bottom:2px; }
.temi .caso::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
                    background:var(--accento); border-radius:var(--r-pill); transition:width .25s; }
.temi .caso:hover{ text-decoration:none; }
.temi .caso:hover::after{ width:100%; }
@media (max-width:767px){ .temi > .cella,.temi > .cella:nth-child(2n){ padding:var(--s4) 0; border-left:0; } }

/* --- processo (C6) -------------------------------------------------------- */
.processo{ margin-top:var(--s6); }
.flusso svg{ width:100%; height:auto; overflow:visible; }
.flusso .fili path{ fill:none; stroke:rgba(4,10,52,.22); stroke-width:1.6; }
.flusso .tronco{ fill:none; stroke:var(--blue); stroke-width:2.5; }
.flusso .attacco-01{ fill:none; stroke:rgba(4,10,52,.35); stroke-width:2; stroke-dasharray:3 6; }
.flusso .ritorno{ fill:none; stroke:var(--crimson); stroke-width:2; stroke-dasharray:4 7; }
.flusso .etichetta-ritorno{ font:600 12px Archivo,sans-serif; letter-spacing:.08em; text-transform:uppercase; fill:var(--crimson); text-anchor:middle; }
.flusso .fonte rect{ fill:var(--white); stroke:rgba(4,10,52,.1); }
.flusso .fonte circle{ fill:var(--electric); }
.flusso .fonte text{ font:600 13px Archivo,sans-serif; fill:var(--blue); }
.flusso .pacchetto rect{ fill:var(--white); fill-opacity:.9; stroke:rgba(4,10,52,.18); }
.flusso .pacchetto text{ font:600 11px Archivo,sans-serif; fill:var(--blue-light); text-anchor:middle; }
.flusso .corre{ fill:var(--electric); }
.flusso .corre.indietro{ fill:var(--crimson); }
.flusso .nodo circle{ fill:var(--blue); }
.flusso .nodo text{ font:600 15px Archivo,sans-serif; fill:var(--white); text-anchor:middle; font-variant-numeric:tabular-nums; }
.fasi{ margin-top:var(--s1); }
.fasi > .cella{ padding-left:0 !important; border-left:0 !important; padding-right:var(--s4); }
.fasi h3{ margin-top:0; }
.fasi .numero-fase{ display:none; }
.divisione{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin-top:var(--s4);
            font-size:var(--t-nota); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.divisione span{ border-top:2px solid var(--blue); padding-top:12px; }
.divisione span + span{ border-color:var(--crimson); }
.fonti-mobile{ display:none; }
@media (max-width:767px){
  .flusso{ display:none; }
  .fonti-mobile{ display:flex; flex-wrap:wrap; gap:var(--s1); margin-bottom:var(--s4); }
  .fonti-mobile span{ background:var(--white); border-radius:var(--r-pill); padding:6px 14px;
                      font-size:var(--t-nota); font-weight:600; color:var(--blue); }
  .fasi{ position:relative; padding-left:72px; }
  .fasi::before{ content:""; position:absolute; left:27px; top:28px; bottom:28px; width:2px; background:var(--blue); }
  .fasi > .cella{ position:relative; border-top:0 !important; padding:0 0 var(--s5) 0; min-height:56px; }
  .fasi .numero-fase{ display:flex; position:absolute; left:-72px; top:0; width:56px; height:56px;
       border-radius:var(--r-pill); background:var(--blue); color:var(--white); font-weight:600;
       align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
  .fasi::after{ content:""; position:absolute; left:23px; top:28px; width:10px; height:10px; border-radius:50%;
       background:var(--electric); animation:scende 4s linear infinite; }
  .fasi > .cella:nth-child(4)::after{ content:""; position:absolute; left:-80px; bottom:calc(100% - 28px);
       height:calc(100% + 0px); width:24px; border:2px dashed var(--crimson); border-right:0;
       border-radius:24px 0 0 24px; }
  .divisione{ grid-template-columns:1fr; }
  .divisione span + span{ margin-left:0; }
}
@keyframes scende{ from{ top:28px; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } to{ top:calc(100% - 28px); opacity:0; } }

/* --- offerta (C7) --------------------------------------------------------- */
.offerta{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.pannello{ border-radius:var(--r-2); padding:var(--s6); background:var(--grey);
           display:flex; flex-direction:column; align-items:flex-start; gap:var(--s1); }
.fascia .pannello{ background:var(--grey); }
.pannello h3{ font-size:30px; margin:4px 0 0; }
.pannello .prezzo{ font-size:var(--t-sotto); font-weight:600; color:var(--blue); margin:var(--s1) 0; font-variant-numeric:tabular-nums; }
.pannello ul{ margin:var(--s2) 0; display:grid; gap:var(--s1); font-size:16px; }
.pannello li{ padding-left:22px; position:relative; }
.pannello li::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--accento); }
.pannello .bottone{ margin-top:auto; }
.offerta + .bottoni{ justify-content:center; }
.pannello.scuro{ background:var(--blue-dark); color:var(--testo-su-scuro); }
.pannello.scuro h3,.pannello.scuro .prezzo{ color:var(--white); }
.pannello.scuro .occhiello{ color:var(--crimson); }
@media (max-width:767px){ .offerta{ grid-template-columns:1fr; } .pannello{ padding:var(--s4); } }

/* --- come si comincia: numeri dei passi (l'ol dice già l'ordine) --------- */
/* Icona sopra, poi "1." accanto al titolo (rilievo di Matteo del 2026-10-08). */
.passi{ list-style:none; counter-reset:passo; }
.passi > .cella{ counter-increment:passo; }
.passi > .cella > .pastiglia{ margin-bottom:var(--s1); }
.passi h3::before{ content:counter(passo) ". "; color:var(--crimson); font-variant-numeric:tabular-nums; }

/* --- domande frequenti (C8) ----------------------------------------------- */
.faq h2{ margin-bottom:var(--s5); }
.faq details{ border-top:1px solid var(--filetto); padding:var(--s3) 0; }
.faq details:last-of-type{ border-bottom:1px solid var(--filetto); }
.faq summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--s3);
              font-size:20px; font-weight:600; color:var(--blue); cursor:pointer; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary svg{ flex:none; width:22px; height:22px; color:var(--crimson); transition:transform .3s; }
.faq details[open] summary svg{ transform:rotate(45deg); }
.faq details > :not(summary){ margin-top:12px; max-width:900px; }

/* --- chiusura (C9) -------------------------------------------------------- */
.chiusura{ text-align:center; padding:112px 0; }
.chiusura h2{ margin:0 auto; }
.chiusura .sottotitolo{ margin:var(--s2) auto 0; color:var(--testo-su-scuro); }
.chiusura .bottoni{ justify-content:center; }
/* Sul blu il primario non può virare al blu: sparirebbe (rilievo del 2026-10-08). */
.rottura .primario:hover{ background:var(--white); color:var(--blue); }

/* --- footer (C10) --------------------------------------------------------- */
.piede{ background:var(--grey-dark); padding:var(--s7) 0 var(--s5); font-size:15px; }
.piede-griglia{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s5); }
.piede img{ height:26px; width:auto; }
.piede p{ margin-top:var(--s2); max-width:320px; }
.piede h5{ font-size:var(--t-nota); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin:0 0 var(--s2); }
.piede li + li{ margin-top:var(--s1); }
.piede a:hover{ color:var(--crimson); }
/* Il bottone del footer vira al crimson: il testo resta bianco, se no sparisce (rilievo del 2026-10-08). */
.piede .bottone:hover{ color:var(--white); }
.piede-social{ display:flex; gap:12px; margin-top:var(--s2); }
.piede-social svg{ width:18px; height:18px; }
.piede-cta{ margin-top:var(--s3); }
.piede-legale{ display:flex; justify-content:space-between; gap:var(--s2); margin-top:var(--s6);
               padding-top:var(--s3); border-top:1px solid var(--filetto); font-size:12px; color:var(--testo-tenue); }
@media (max-width:767px){ .piede-griglia{ grid-template-columns:1fr 1fr; } .piede-legale{ flex-direction:column; } }

/* --- elenchi (use-case, risorse) ------------------------------------------ */
.elenco{ border-top:1px solid var(--filetto); }
.voce{ display:grid; grid-template-columns:1fr; gap:var(--s2); align-items:start; padding:var(--s6) 0; border-bottom:1px solid var(--filetto); } /* tag sopra il titolo, niente colonna vuota (revisione grafica 2026-10-09) */
.voce p:not(.occhiello){ max-width:900px; }
.voce .con-icona{ display:flex; align-items:flex-start; gap:14px; }
.voce .con-icona svg{ flex:none; width:1.1em; height:1.1em; margin-top:.07em; color:var(--blue); }
.voce .occhiello{ display:flex; align-items:center; gap:10px; color:var(--blue); font-weight:400; } /* colore solo nel pallino (2026-10-09) */
.voce .occhiello::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--accento); }
.voce h2,.voce h3{ font-size:var(--t-h3); }
.voce h2 + p,.voce h3 + p{ margin-top:var(--s1); }
.voce .cifre{ display:flex; gap:var(--s5); margin-top:var(--s3); }
.voce .cifre strong{ display:block; font-size:30px; font-weight:400; color:var(--blue); font-variant-numeric:tabular-nums; }
.voce .cifre span{ font-size:var(--t-nota); text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:767px){ .voce{ grid-template-columns:1fr; gap:var(--s2); } }

/* --- dettaglio (case study, risorse) -------------------------------------- */
.percorso{ font-size:var(--t-nota); letter-spacing:.06em; text-transform:uppercase; color:var(--testo-tenue); margin-bottom:var(--s4); }
.percorso a:hover{ color:var(--blue); }
.testata{ padding:var(--s8) 0 var(--s6); border-bottom:4px solid var(--accento); }
.testata h1{ font-size:56px; max-width:900px; }
@media (max-width:767px){ .testata h1{ font-size:36px; } }
.sintesi .numero{ display:block; font-size:var(--t-h2); color:var(--blue); margin-bottom:var(--s1); }   /* 88 px non sta in un terzo di colonna */
.articolo{ display:grid; grid-template-columns:240px minmax(0,720px); gap:var(--s7); justify-content:center; }
.articolo-indice{ position:sticky; top:110px; align-self:start; font-size:15px; }
.articolo-indice a{ display:block; padding:6px 0 6px 14px; border-left:2px solid var(--filetto); }
.articolo-indice a:hover{ border-color:var(--electric); color:var(--electric); } /* blu elettrico come la voce attiva (2026-10-09) */
.articolo-testo section + section{ margin-top:var(--s7); }
.articolo-testo h2{ font-size:34px; margin-bottom:var(--s3); }
.articolo-testo p + p,.articolo-testo p + ul,.articolo-testo ul + p,.articolo-testo blockquote + p{ margin-top:var(--s2); }
.articolo-testo ul{ display:grid; gap:var(--s1); }
.articolo-testo li{ padding-left:22px; position:relative; }
.articolo-testo li::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--accento); }
.articolo-testo a{ color:var(--blue); text-decoration:underline; text-decoration-color:var(--accento); text-underline-offset:4px; }
@media (max-width:1023px){ .articolo{ grid-template-columns:1fr; } .articolo-indice{ display:none; } }
.stesso-tema{ border-top:1px solid var(--filetto); padding-top:var(--s5); }
.stesso-tema a{ display:flex; justify-content:space-between; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--filetto);
                font-size:20px; font-weight:600; color:var(--blue); }
.stesso-tema a:hover{ color:var(--accento-testo, var(--accento)); }
.stesso-tema a svg{ flex:none; width:22px; height:22px; }   /* sul telefono la freccia non si schiaccia */

/* --- /cfo-service: citazioni, elenchi delle fasi, cosa riceve l'azienda ------ */
/* Le domande: quadrante a filetti (Matteo, 2026-10-08: una per riga lasciava
   vuota la destra). Icona grigia sopra, domanda a 20 px perché stia su una
   riga nella colonna, sotto lo strumento che risponde. */
.citazioni > .cella{ padding:var(--s4) var(--s5) var(--s4) 0; border-top:1px solid var(--filetto); }
.citazioni > .cella:nth-child(2n){ padding:var(--s4) 0 var(--s4) var(--s5); border-left:1px solid var(--filetto); }
.citazioni > .cella:nth-last-child(-n+2){ border-bottom:1px solid var(--filetto); }
.citazioni .pastiglia{ margin-bottom:var(--s2); }
.citazioni .domanda{ font-size:20px; line-height:1.35; font-weight:600; color:var(--blue); }
.citazioni .risposta{ margin-top:var(--s1); font-size:16px; color:var(--testo-tenue); }
@media (max-width:767px){
  .citazioni > .cella,.citazioni > .cella:nth-child(2n){ padding:var(--s3) 0; border-left:0; }
  .citazioni > .cella:nth-last-child(2){ border-bottom:0; }
}
.fasi ul{ margin-top:var(--s2); display:grid; gap:var(--s1); font-size:16px; }
.fasi li{ padding-left:22px; position:relative; }
.fasi li::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--accento); }
.ricevi > .cella:nth-child(n+4){ margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--filetto); }
.ricevi > .cella:nth-child(4){ border-left:0; padding-left:0; }
.ricevi .cella h3{ margin-top:var(--s3); }
@media (max-width:767px){ .ricevi > .cella:nth-child(n+4){ margin-top:0; padding-top:var(--s4); } }

/* --- case study: tabella del profilo, passi, esito, sintesi, FAQ ------------ */
.testata .occhiello{ margin-bottom:var(--s2); }
.testata .bottoni{ align-items:center; gap:var(--s3); }
.sintesi .griglia-3{ margin-top:var(--s4); }
.sintesi .riassunto{ margin-top:var(--s6); max-width:900px; }
.articolo-testo h3{ margin-top:var(--s4); margin-bottom:var(--s1); }
.articolo-testo h4{ margin-top:var(--s3); font-size:var(--t-corpo); font-weight:600; color:var(--blue); }
.articolo-testo h4 + p{ margin-top:4px; }
.articolo-testo .profilo{ width:100%; border-collapse:collapse; text-align:left; }
.articolo-testo .profilo th,.articolo-testo .profilo td{ padding:var(--s2) 0; vertical-align:top; border-top:1px solid var(--filetto); }
.articolo-testo .profilo tr:last-child th,.articolo-testo .profilo tr:last-child td{ border-bottom:1px solid var(--filetto); }
.articolo-testo .profilo th{ width:33%; padding-right:var(--s3); font-size:var(--t-nota); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.articolo-testo .passi-testo{ display:grid; gap:var(--s2); margin-top:var(--s2); }
.articolo-testo .passi-testo li{ display:flex; gap:var(--s2); padding-left:0; }
.articolo-testo .passi-testo li::before{ content:none; }
.articolo-testo .passi-testo .n{ flex:none; font-weight:600; color:var(--blue); font-variant-numeric:tabular-nums; }
.articolo-testo .pannello{ margin-top:var(--s2); }
.articolo-testo .pannello + h3{ margin-top:var(--s5); }
.articolo-testo .pannello .cifra{ font-size:var(--t-h2); line-height:1.1; font-weight:400; color:var(--white); }
.articolo-testo .pannello p + p{ margin-top:0; }
.articolo-testo .pannello .cifra + p{ margin-top:var(--s1); }
.faq summary h3{ font-size:inherit; line-height:inherit; font-weight:600; color:inherit; }
.leggi-anche{ margin-top:var(--s4); max-width:820px; }
.leggi-anche a{ text-decoration:underline; text-underline-offset:4px; }
.leggi-anche a:hover{ color:var(--blue); }

/* --- pezzi di /risorse/: lead, citazione, elenco numerato, firma ---------- */
.articolo-testo .intro{ font-size:var(--t-sotto); color:var(--blue-dark); }
.articolo-testo blockquote{ margin-top:var(--s2); padding-left:var(--s3); border-left:4px solid var(--accento); }
.articolo-testo ol{ display:grid; gap:var(--s2); margin-top:var(--s2); counter-reset:passo; }
.articolo-testo ol li{ padding-left:36px; position:relative; counter-increment:passo; }
.articolo-testo ol li::before{ content:counter(passo, decimal-leading-zero); position:absolute; left:0; top:0; width:auto; height:auto; border-radius:0; background:none; font-weight:600; color:var(--blue); font-variant-numeric:tabular-nums; }
.articolo-testo p + ol,.articolo-testo ul + ol{ margin-top:var(--s2); }
.testata .firma{ margin-top:var(--s4); font-size:var(--t-nota); color:var(--testo-tenue); }
.testata .firma a{ font-weight:600; color:var(--blue); }
.testata .firma a:hover{ color:var(--accento-testo, var(--accento)); }
.voce .nota{ margin-top:var(--s2); }
.voce h2 a:hover{ color:var(--accento-testo, var(--accento)); }

/* --- movimento: default visibile, trappola 2 di SISTEMA.md ---------------- */
.rivela{ transition:opacity .8s ease, transform .8s ease; }
.rivela.attesa{ opacity:0; transform:translateY(24px); }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .rivela.attesa{ opacity:1; transform:none; }
}
@media print{ .menu,.menu-mobile,.loghi,.flusso{ display:none; } .rivela.attesa{ opacity:1; transform:none; } }

/* Previsione di cassa (hero di /cfo-service, spec 2026-10-06) */
.previsione { margin: 0; background: var(--white); border-radius: var(--r-2); padding: var(--s5); }
.previsione svg { display: block; width: 100%; height: auto; font-family: inherit; }
.previsione text { font-size: var(--t-nota); fill: var(--blue-dark); font-variant-numeric: tabular-nums; }
.previsione .avviso text { font-weight: 600; fill: var(--orange); }
.previsione .titolo { font-size: 16px; font-weight: 600; fill: var(--blue); }
.previsione .asse-y, .previsione .nota-futuro { fill: var(--testo-tenue); }
.previsione figcaption { margin-top: var(--s3); }
/* Nell'hero di /cfo-service la figura è informativa: sul telefono resta, sotto
   il testo, invece di sparire come i visivi decorativi. */
.hero-visivo.con-figura{ height:auto; }
@media (max-width:767px){
  .previsione { padding: var(--s3); }
  .hero-visivo.con-figura{ display:block; }
}

/* --- home (spec 2026-10-06): nota dei numeri, due concetti, modalità, chi siamo --- */
.numeri .nota{ text-align:center; margin-top:var(--s5); }
/* Sotto la fascia dei loghi bastava il loro respiro: i 96 px della sezione
   lasciavano un vuoto (rilievo del Task 5 del 2026-10-05). */
.sezione.numeri:has(.loghi){ padding-bottom:0; } /* in home i loghi chiudono la fascia */
.concetti > .cella,.persone > .cella{ padding:var(--s4) var(--s5) var(--s4) 0; border-top:1px solid var(--filetto); border-bottom:1px solid var(--filetto); }
.concetti > .cella:nth-child(2n),.persone > .cella:nth-child(2n){ padding:var(--s4) 0 var(--s4) var(--s5); border-left:1px solid var(--filetto); }
.concetti h3{ margin-top:0; }
/* Le due modalità: un blocco con titolo e due voci, non più una frase in coda
   alla griglia (rilievo di Matteo del 2026-10-08). */
.modalita{ margin-top:var(--s7); display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--s2) var(--s5); align-items:start; }
.modalita h3{ margin:0; }
.modalita h4{ font-size:var(--t-sotto); font-weight:600; color:var(--blue); }
.modalita .cella p{ margin-top:4px; }
.modalita .collegamento{ grid-column:2 / -1; justify-self:start; }
@media (max-width:767px){ .modalita{ grid-template-columns:1fr; } .modalita .collegamento{ grid-column:auto; justify-self:start; } }
.persone > .cella{ display:flex; gap:var(--s4); align-items:flex-start; }
/* Ritratti come nei deck (Sales/presentazione-vendita del brain): cerchio e
   bianco e nero, così le due foto, scattate in condizioni diverse, stanno insieme. */
.persone img{ flex:none; width:160px; height:160px; object-fit:cover; border-radius:50%; background:var(--grey);
              filter:grayscale(1) contrast(1.06) brightness(1.03); }
.persone h3{ margin:0 0 4px; }
.persone .occhiello{ margin-bottom:var(--s1); }
.persone + .collegamento{ margin-top:var(--s4); }
/* Chi siamo in home: testo a sinistra, le due persone una sopra l'altra a
   destra, come nei deck. Sotto i 1024 px si va a una colonna sola. */
.chi-home{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s7); align-items:start; }
.chi-testo > p:not(.sottotitolo){ margin-top:var(--s3); max-width:560px; }
.chi-testo .collegamento{ margin-top:var(--s4); }
.chi-home .persone > .cella,.chi-home .persone > .cella:nth-child(2n){ padding:var(--s4) 0; border-left:0; border-bottom:0; }
.chi-home .persone > .cella:last-child{ border-bottom:1px solid var(--filetto); }
@media (max-width:1023px){ .chi-home{ grid-template-columns:1fr; gap:var(--s5); } }
@media (max-width:767px){
  .concetti > .cella,.concetti > .cella:nth-child(2n),
  .persone > .cella,.persone > .cella:nth-child(2n){ padding:var(--s4) 0; border-left:0; border-bottom:0; }
  .concetti > .cella:last-child,.persone > .cella:last-child{ border-bottom:1px solid var(--filetto); }
  .persone img{ width:112px; height:112px; }
}

/* --- chi siamo, contatti, 404 (Task 10) ------------------------------------ */
.hero-testo .attacco{ max-width:760px; }
.distingue,.network{ row-gap:var(--s5); }
.griglia-3.distingue > .cella:nth-child(3n+1),.griglia-3.network > .cella:nth-child(3n+1){ border-left:0; padding-left:0; }
.distingue .voce-nome{ margin-top:var(--s2); font-size:var(--t-sotto); font-weight:600; color:var(--blue); }
.network .cella h4{ margin:var(--s2) 0 var(--s1); font-size:var(--t-h3); line-height:1.25; font-weight:600; color:var(--blue); }
@media (max-width:767px){
  .griglia-3.distingue > .cella:nth-child(3n+1),.griglia-3.network > .cella:nth-child(3n+1){ padding:var(--s4) 0; }
  .distingue,.network{ row-gap:0; }
}
.contatti{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:start; }
.sezione:has(> .contatti){ padding-top:var(--s7); } /* meno spazio sopra (revisione grafica 2026-10-09) */
.contatti-testo .punto{ display:flex; gap:var(--s2); align-items:flex-start; margin-top:var(--s6); }
.contatti-testo .punto h4{ font-size:var(--t-corpo); font-weight:600; color:var(--blue); }
.contatti-testo .punto p{ font-size:var(--t-corpo); margin-top:4px; }
.contatti-mail{ margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--filetto); }
.contatti-mail a{ display:inline-block; margin-top:var(--s1); font-size:var(--t-sotto); font-weight:600; color:var(--blue); border-bottom:2px solid var(--crimson); }
.contatti h1 span{ color:var(--crimson); }
.modulo .hidden{ display:none; }
.modulo-campi{ display:flex; flex-direction:column; gap:var(--s4); }
.coppia{ gap:var(--s4); }
.campo{ display:flex; flex-direction:column; gap:var(--s1); }
.campo label{ font-size:var(--t-nota); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--testo-tenue); }
.campo input,.campo textarea{ width:100%; padding:12px 0; font:inherit; font-size:var(--t-corpo); color:var(--blue);
                              background:transparent; border:0; border-bottom:1.5px solid var(--blue-light); border-radius:0; outline:none;
                              transition:border-color .2s; }
.campo textarea{ resize:vertical; }
.campo input::placeholder,.campo textarea::placeholder{ color:var(--testo-tenue); opacity:.55; } /* esempi, non testo: più tenui (2026-10-09) */
.campo input:focus,.campo textarea:focus{ border-bottom-color:var(--crimson); box-shadow:0 2px 0 0 var(--crimson); }
.modulo-campi .bottone{ align-self:flex-start; border:0; cursor:pointer; font-family:inherit; }
.modulo-campi .bottone:disabled{ opacity:.7; cursor:progress; }
.modulo .animate-pulse{ animation:pulsa 1.2s ease-in-out infinite; }
@keyframes pulsa{ 50%{ opacity:.45; } }
@media (prefers-reduced-motion: reduce){ .modulo .animate-pulse{ animation:none; } }
#success-message h3{ margin-top:var(--s3); }
#success-message p{ margin-top:var(--s1); }
@media (max-width:767px){ .contatti{ grid-template-columns:1fr; gap:var(--s7); } .coppia{ row-gap:var(--s4); } }
.errore{ padding:var(--s9) 0; text-align:center; }
.errore .numero{ color:var(--grey-dark); }
.errore h2{ margin:var(--s3) auto 0; }
.errore .sottotitolo{ margin-left:auto; margin-right:auto; }
.errore .bottoni{ justify-content:center; }

/* --- autovalutazione (Task 12, 2026-10-08): il tool in linea ------------------
   Matteo: "ridurre al massimo la frizione". Hero corto, a una colonna, e
   subito sotto l'iframe di /score-tool, che prende l'altezza del contenuto
   (la manda il tool con postMessage, la pagina la applica). L'altezza qui è
   solo quella di partenza, e quella che resta se gli script sono spenti.
   L'iframe sborda di 16 px a sinistra: è il margine interno del tool, così
   il bordo della sua scheda si allinea al testo dell'hero. */
.hero-score .cornice{ grid-template-columns:1fr; padding-bottom:var(--s5); }
.hero-score .hero-testo{ max-width:none; } /* a tutta larghezza (2026-10-09) */
.hero-score h1 span{ color:var(--crimson); white-space:nowrap; }
.hero-score .pratico{ margin-top:var(--s3); max-width:760px; }
.sezione.strumento{ padding:var(--s7) 0; } /* il test su una fascia sua, al centro (2026-10-09) */
.strumento iframe{ display:block; width:calc(100% + 32px); max-width:712px; height:880px;
                   margin:0 auto; border:0; background:transparent; }
.pilastri{ row-gap:var(--s5); }
.griglia-3.pilastri > .cella:nth-child(3n+1){ border-left:0; padding-left:0; }

.pilastri h3{ margin:0; font-size:var(--t-h3); line-height:1.25; font-weight:600; color:var(--blue); }
.pilastri .peso{ margin-top:4px; font-size:var(--t-nota); letter-spacing:.08em; text-transform:uppercase; color:var(--testo-tenue); }
.pilastri .peso + p{ margin-top:var(--s1); }
.metodo{ gap:var(--s7); align-items:center; }
.metodo h3 + p{ margin-top:var(--s2); }
.metodo p + h3{ margin-top:var(--s6); }
.simulazione .numero{ color:var(--crimson); }
.simulazione .barra{ width:100%; height:8px; margin:var(--s2) 0 var(--s3); border-radius:var(--r-pill);
                     background:rgba(255,255,255,.1); overflow:hidden; }
.simulazione .barra span{ display:block; width:85%; height:100%; border-radius:inherit; background:var(--crimson); }
.simulazione p:last-child{ font-size:16px; }
@media (max-width:767px){
  .hero-score .cornice{ padding-top:var(--s5); padding-bottom:var(--s4); }
  .hero-score .attacco{ margin-top:var(--s2); }
  .hero-score .pratico{ margin-top:var(--s2); }
  .strumento iframe{ height:760px; }
  .griglia-3.pilastri{ grid-template-columns:1fr 1fr; }
  .griglia-3.pilastri > .cella{ padding:var(--s3) 0; }
  .griglia-3.pilastri > .cella:nth-child(2n){ padding-left:var(--s3); }
  .metodo{ gap:var(--s5); }
}

/* --- chi siamo, revisione grafica 2026-10-09 ------------------------------ */
.soci{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.socio{ display:flex; gap:var(--s4); align-items:flex-start; background:var(--white); border-radius:var(--r-2); padding:var(--s5); }
.socio img{ flex:none; width:168px; height:168px; object-fit:cover; border-radius:50%; background:var(--grey);
            filter:grayscale(1) contrast(1.06) brightness(1.03); }
.socio h2{ margin:var(--s1) 0 0; font-size:var(--t-h3); }
.socio .ambito{ margin-top:4px; font-size:var(--t-corpo); font-weight:600; color:var(--blue); }
.socio .ambito + p{ margin-top:var(--s2); font-size:16px; }
.linkedin{ display:inline-flex; align-items:center; gap:8px; margin-top:var(--s3); font-size:16px; font-weight:600; color:var(--blue); text-decoration:none; }
.linkedin svg{ width:18px; height:18px; }
.linkedin:hover{ color:var(--crimson); }
.principi{ margin-top:var(--s6); }
.principi .pastiglia{ margin-bottom:var(--s1); }
.rete{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); margin-top:var(--s6); }
.rete .cella{ display:flex; gap:var(--s2); align-items:flex-start; }
.rete h3{ font-size:20px; margin:8px 0 4px; }
@media (max-width:1023px){ .soci{ grid-template-columns:1fr; } .rete{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){
  .socio{ flex-direction:column; padding:var(--s4); gap:var(--s3); }
  .socio img{ width:112px; height:112px; }
  .rete{ grid-template-columns:1fr; gap:var(--s4); }
}
.hero h1 .marchio{ color:var(--crimson); } /* 64px: il crimson regge (3,26:1, soglia 3:1 per il testo grande) */

/* --- contatti, revisione grafica 2026-10-09 -------------------------------- */
.modulo{ background:var(--white); border-radius:var(--r-2); padding:var(--s6); }
.tappe{ list-style:none; margin:var(--s6) 0 0; padding:0; counter-reset:tappa; display:grid; gap:var(--s3); }
.tappe li{ counter-increment:tappa; display:grid; grid-template-columns:40px 1fr; column-gap:var(--s2); align-items:start; }
.tappe li::before{ content:counter(tappa); grid-row:span 2; display:flex; align-items:center; justify-content:center;
                   width:40px; height:40px; border-radius:50%; background:var(--white); color:var(--crimson); font-weight:600; }
.tappe strong{ display:block; margin-top:8px; color:var(--blue); }
.tappe span{ font-size:16px; }
@media (max-width:767px){ .modulo{ padding:var(--s4); } }
.modulo-campi .nota a{ text-decoration:underline; }

/* --- case study, revisione grafica 2026-10-09 ------------------------------ */
.testata.testata-studio{ padding-top:var(--s7); border-bottom:0; } /* niente percorso né riga d'accento */
.testata.testata-indice{ padding-top:var(--s8); padding-bottom:0; } /* allineata alle altre pagine indice, come /use-case */
.testata-indice h1{ max-width:none; } /* titolo di /risorse/ su una riga */
.articolo-testo a.rimando{ text-decoration-color:var(--electric); }
.articolo-indice a.attivo{ border-color:var(--electric); color:var(--electric); }
.hero-score .occhiello{ color:var(--blue); } /* in blu come le altre pagine: il crimson è già nel titolo (2026-10-09) */
.pilastri .con-icona{ display:flex; align-items:center; gap:12px; }
.pilastri .con-icona svg{ flex:none; width:1em; height:1em; color:var(--blue); }
.hero-score .attacco{ max-width:none; }
.metodo .bottoni{ margin-top:var(--s5); }
/* Figure dentro i pezzi di /risorse/ (dal 2026-10-12, primo uso nella guida AI per il controllo di gestione). */
.articolo-testo figure{ margin-top:var(--s4); margin-bottom:var(--s4); }
.articolo-testo figure img{ display:block; width:100%; height:auto; border-radius:var(--s2); border:1px solid var(--filetto); }
.articolo-testo figcaption{ margin-top:var(--s1); font-size:var(--t-nota); color:var(--testo-tenue); }