/* FM Studio Consulenza - il sito nuovo (29/9/2026). Stessi colori e caratteri del blog:
   blu #0F2039 (quello della barra del blog), oro #C9A227 / #E6B93C, carta chiara, Raleway per i titoli e Open Sans per il testo. */
:root{
  --blu:#0F2039; --blu-notte:#0F2039; --blu-2:#1B3252;   /* 29/9/2026: TUTTO il blu del sito e' quello della barra del blog */
  --oro:#C9A227; --oro-chiaro:#E6B93C; --oro-tenue:#F3E6BF;
  --carta:#F7F4EC; --carta-2:#EFE9DA; --bianco:#FFFFFF;
  --inchiostro:#17202B; --grigio:#57606C; --linea:#E2DAC6;
  --ombra:0 10px 30px rgba(14,31,54,.10); --ombra-forte:0 18px 44px rgba(14,31,54,.18);
  --raggio:6px; --largo:1160px;
  /* IL PAPIRO, segno distintivo dello Studio (utente, 29/9/2026): lo stesso del blog */
  --oro-scuro:#8A6A0E;   /* l'oro leggibile sul papiro chiaro */
  --papiro:#EEECE1; --foglio:#FBF9F1; --riga:#CDBF9C; --carta-papiro:url('/assets/fm/papiro.jpg');
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--papiro) var(--carta-papiro) repeat; color:var(--inchiostro);
  font-family:"Open Sans",Segoe UI,Arial,sans-serif; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--blu)}
a:hover{color:var(--oro)}
h1,h2,h3,h4{font-family:Raleway,sans-serif; color:var(--blu); line-height:1.25; margin:0 0 .6em}
h1{font-size:clamp(24px,2.4vw,31px); font-weight:700}   /* 29/9: da 50 a 31 (utente: «titoli così enormi»): misura da studio, non da pubblicità */
h2{font-size:clamp(21px,2vw,26px); font-weight:700}
h3{font-size:clamp(18px,1.6vw,20px); font-weight:700}
p{margin:0 0 1.05em}
strong{color:var(--blu-notte)}
.contenitore{max-width:var(--largo); margin:0 auto; padding:0 24px}
.stretto{max-width:780px}
:focus-visible{outline:3px solid var(--oro-chiaro); outline-offset:3px}
.salta{position:absolute; left:-9999px; top:0}
.salta:focus{left:16px; top:16px; z-index:100; background:#fff; padding:10px 14px}

/* ------------------------------------------------------------------ testata */
.testata{position:sticky; top:0; z-index:50; background:var(--blu); color:#fff; box-shadow:0 2px 14px rgba(0,0,0,.18)}
.testata-alta{position:relative; max-width:var(--largo); margin:0 auto; padding:12px 24px 10px;
  display:flex; align-items:center; justify-content:center; text-align:center; transition:padding .25s}
.marchio{position:absolute; left:24px; top:50%; transform:translateY(-50%); display:flex; align-items:center}
.marchio img{width:46px; height:46px; transition:width .25s,height .25s}
.nome-studio{display:block; font-family:Raleway,sans-serif; font-weight:700; font-size:21px; color:var(--oro-chiaro);
  text-decoration:none; letter-spacing:.2px}
.nome-studio:hover{color:#fff}
.motto{display:block; font-family:Raleway,sans-serif; font-weight:600; font-size:17px; color:#F7F7F7; margin-top:2px;
  transition:opacity .2s, max-height .25s; max-height:40px; overflow:hidden}
.bandiere{position:absolute; right:24px; top:50%; transform:translateY(-50%); display:flex; gap:10px}
.bandiere a{display:block; line-height:0; opacity:.9; border-radius:2px; overflow:hidden}
.bandiere a:hover,.bandiere a[aria-current]{opacity:1}
.bandiere img{width:26px; height:auto}
.filo-oro{height:3px; background:var(--oro)}
.menu{max-width:var(--largo); margin:0 auto; padding:0 24px}
.menu ul{list-style:none; margin:0; padding:0; display:flex; justify-content:center; flex-wrap:wrap}
.menu a{display:block; padding:9px 12px 10px; font-family:Raleway,sans-serif; font-weight:500; font-size:16px;
  color:#F2F2F2; text-decoration:none; letter-spacing:.3px; position:relative; white-space:nowrap}
.menu a::after{content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; background:var(--oro-chiaro);
  transform:scaleX(0); transition:transform .2s}
.menu a:hover{color:#fff}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}
.menu a[aria-current]{font-weight:700; color:#fff}
.hamburger{display:none; position:absolute; left:18px; top:50%; transform:translateY(-50%); background:none; border:0;
  color:#fff; padding:8px; cursor:pointer}
.hamburger span{display:block; width:24px; height:2px; background:currentColor; margin:5px 0; transition:transform .2s,opacity .2s}
.testata.compatta .testata-alta{padding-top:7px; padding-bottom:6px}
.testata.compatta .motto{opacity:0; max-height:0}
.testata.compatta .marchio img{width:36px; height:36px}

/* ------------------------------------------------------------------ copertina (home) */
.copertina{position:relative; overflow:hidden; color:#fff}

/* LO SPAZIO (utente, 29/9/2026: «mi piace l'idea che sia un po' spaziale, andare nello spazio fuori dalla
   terra, e poi la tradizione del papiro»). Le fasce blu sono un cielo stellato: il blu profondo, un bagliore
   di pianeta in basso, un riflesso oro in alto e due strati di stelle, il secondo che brilla piano. */
/* 29/9/2026 (utente, sulla barra del blog): «questo è il blu che mi piace, non l'altro che trovo nel sito».
   Il blu del cielo e' quello pieno della barra del blog, #0F2039, senza aloni: restano solo le stelle. */
.copertina,.testa-pagina,.fascia.blu,.invito{position:relative; overflow:hidden; background:#0F2039}
.copertina::before,.testa-pagina::before,.fascia.blu::before,.invito::before,
.copertina::after,.testa-pagina::after,.fascia.blu::after,.invito::after{content:""; position:absolute; inset:0; pointer-events:none}
/* 29/9/2026 (utente): «un pochino più cielo»: tre trame di stelle di passo diverso (173, 331, 587 px) perché
   la ripetizione non si veda - tante piccolissime e tenui, alcune medie, poche luminose con alone - piu' uno
   strato che brilla piano */
.copertina::before,.testa-pagina::before,.fascia.blu::before,.invito::before{opacity:1;
  background-image:
    radial-gradient(0.7px 0.7px at 140px 19px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.0px 1.0px at 22px 130px, rgba(255,255,255,0.37), transparent),
    radial-gradient(0.9px 0.9px at 8px 26px, rgba(255,255,255,0.45), transparent),
    radial-gradient(0.7px 0.7px at 21px 127px, rgba(255,255,255,0.43), transparent),
    radial-gradient(1.0px 1.0px at 51px 114px, rgba(255,255,255,0.32), transparent),
    radial-gradient(0.8px 0.8px at 172px 144px, rgba(255,255,255,0.41), transparent),
    radial-gradient(0.8px 0.8px at 76px 71px, rgba(255,255,255,0.32), transparent),
    radial-gradient(0.7px 0.7px at 120px 132px, rgba(255,255,255,0.34), transparent),
    radial-gradient(0.8px 0.8px at 150px 165px, rgba(255,255,255,0.5), transparent),
    radial-gradient(0.7px 0.7px at 94px 35px, rgba(255,255,255,0.46), transparent),
    radial-gradient(0.7px 0.7px at 141px 101px, rgba(255,255,255,0.44), transparent),
    radial-gradient(1.0px 1.0px at 119px 72px, rgba(255,255,255,0.45), transparent),
    radial-gradient(0.7px 0.7px at 162px 172px, rgba(255,255,255,0.33), transparent),
    radial-gradient(1.0px 1.0px at 102px 106px, rgba(255,255,255,0.29), transparent),
    radial-gradient(1.0px 1.0px at 74px 2px, rgba(200,220,255,0.51), transparent),
    radial-gradient(0.7px 0.7px at 10px 165px, rgba(200,220,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 265px 29px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 77px 89px, rgba(255,255,255,0.66), transparent),
    radial-gradient(1.1px 1.1px at 14px 98px, rgba(200,220,255,0.56), transparent),
    radial-gradient(1.4px 1.4px at 57px 84px, rgba(230,185,60,0.74), transparent),
    radial-gradient(1.1px 1.1px at 114px 103px, rgba(200,220,255,0.81), transparent),
    radial-gradient(1.4px 1.4px at 170px 116px, rgba(255,255,255,0.78), transparent),
    radial-gradient(1.2px 1.2px at 293px 129px, rgba(255,255,255,0.76), transparent),
    radial-gradient(1.1px 1.1px at 164px 210px, rgba(255,255,255,0.82), transparent),
    radial-gradient(1.2px 1.2px at 208px 59px, rgba(230,185,60,0.66), transparent),
    radial-gradient(3.4px 3.4px at 239px 456px, rgba(200,220,255,0.95), rgba(200,220,255,.18) 45%, transparent),
    radial-gradient(3.2px 3.2px at 171px 180px, rgba(255,255,255,0.95), rgba(255,255,255,.18) 45%, transparent),
    radial-gradient(3.8px 3.8px at 561px 474px, rgba(200,220,255,0.86), rgba(200,220,255,.18) 45%, transparent);
  background-size:173px 173px, 173px 173px, 173px 173px, 173px 173px, 173px 173px, 173px 173px, 173px 173px, 173px 173px, 173px 173px, 173px 173px, 173px 173px, 173px 173px, 173px 173px, 173px 173px, 173px 173px, 173px 173px, 331px 331px, 331px 331px, 331px 331px, 331px 331px, 331px 331px, 331px 331px, 331px 331px, 331px 331px, 331px 331px, 587px 587px, 587px 587px, 587px 587px}
.copertina::after,.testa-pagina::after,.fascia.blu::after,.invito::after{opacity:.55; animation:brilla 7s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.2px 1.2px at 118px 163px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.1px 1.1px at 367px 103px, rgba(200,220,255,0.81), transparent),
    radial-gradient(1.3px 1.3px at 4px 76px, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.7px 1.7px at 221px 112px, rgba(200,220,255,0.81), transparent),
    radial-gradient(1.3px 1.3px at 163px 200px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 376px 83px, rgba(255,255,255,1.0), transparent),
    radial-gradient(1.1px 1.1px at 335px 131px, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.2px 1.2px at 389px 455px, rgba(200,220,255,0.78), transparent);
  background-size:457px 457px, 457px 457px, 457px 457px, 457px 457px, 457px 457px, 457px 457px, 457px 457px, 457px 457px}
@keyframes brilla{from{opacity:.25}to{opacity:.8}}
@media (prefers-reduced-motion:reduce){.copertina::after,.testa-pagina::after,.fascia.blu::after,.invito::after{animation:none}}
.copertina .contenitore,.testa-pagina .contenitore,.fascia.blu .contenitore,.invito .contenitore{position:relative; z-index:1}
.copertina .contenitore{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
  padding-top:70px; padding-bottom:78px}
.occhiello{font-family:Raleway,sans-serif; font-weight:700; font-size:13px; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--oro-scuro); margin:0 0 14px}
.copertina .occhiello,.testa-pagina .occhiello,.fascia.blu .occhiello,.invito .occhiello{color:var(--oro-chiaro)}
.copertina h1{color:#fff}
.copertina h1 em{font-style:normal; color:var(--oro-chiaro)}
.copertina .lead{font-size:18px; color:#DDE4EE; max-width:600px}
.pulsanti{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}
.pulsante{display:inline-block; font-family:Raleway,sans-serif; font-weight:700; font-size:15.5px; letter-spacing:.4px;
  padding:13px 24px; border-radius:40px; text-decoration:none; border:2px solid var(--oro); background:var(--oro);
  color:var(--blu-notte); transition:transform .15s, box-shadow .15s, background .15s, color .15s}
.pulsante:hover{background:var(--oro-chiaro); border-color:var(--oro-chiaro); color:var(--blu-notte); transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(201,162,39,.35)}
.pulsante.vuoto{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.pulsante.vuoto:hover{background:rgba(255,255,255,.08); color:#fff; border-color:#fff; box-shadow:none}
.pulsante.scuro{background:var(--blu); border-color:var(--blu); color:#fff}
.pulsante.scuro:hover{background:var(--blu-2); border-color:var(--blu-2); color:#fff}
/* 29/9/2026 (utente): il grafico del break even in copertina su papiro */
.grafico{background:var(--foglio) var(--carta-papiro) repeat; border:1px solid var(--riga); border-radius:0; padding:18px 18px 10px; box-shadow:var(--ombra)}
.grafico svg{width:100%; height:auto; display:block}
.grafico .didascalia{font-size:13px; color:#111111; margin:8px 2px 0}   /* in nero, non grigio (utente) */
.traccia{stroke-dasharray:900; stroke-dashoffset:900; animation:disegna 2.2s ease-out .3s forwards}
.punto{opacity:0; animation:compare .5s ease-out 2.2s forwards}
@keyframes disegna{to{stroke-dashoffset:0}}
@keyframes compare{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.traccia{animation:none; stroke-dashoffset:0}.punto{animation:none; opacity:1}}

/* testata delle pagine interne */
.testa-pagina{color:#fff}
.testa-pagina .sfondo{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.22}
.testa-pagina .sfondo.tenue{opacity:.07; filter:blur(2px)}   /* controllo di gestione: la foto quasi sparisce (utente) */
.testa-pagina .contenitore{position:relative; padding-top:62px; padding-bottom:58px}
.testa-pagina h1{color:#fff; max-width:860px}
.testa-pagina .lead{font-size:18px; color:#DDE4EE; max-width:760px; margin:0}

/* ------------------------------------------------------------------ fasce */
.fascia{padding:84px 0}
/* TRADIZIONE E INNOVAZIONE (utente, 29/9/2026): «o blu o papiro», niente sfondo chiaro liscio. Le fasce si
   alternano fra il papiro e il cielo stellato. Dentro il cielo i riquadri restano pagine di papiro, con
   l'inchiostro scuro: la tradizione dentro l'innovazione. */
.fascia.blu :is(.servizio,.passo,.riquadro,.caso,.scheda-caso .corpo,.errore,.articolo,.documento){color:var(--inchiostro)}
.fascia.blu :is(.servizio,.passo,.riquadro,.caso,.scheda-caso .corpo,.errore,.articolo) :is(h2,h3){color:var(--blu)}
.fascia.blu :is(.servizio,.passo,.riquadro,.caso,.scheda-caso .corpo,.errore,.articolo) strong{color:var(--blu-notte)}
.fascia.blu :is(.servizio,.passo,.riquadro,.caso,.scheda-caso .corpo,.errore,.articolo) a{color:var(--blu)}
.fascia.blu :is(.servizio,.passo,.riquadro,.caso,.scheda-caso .corpo,.errore,.articolo) .occhiello{color:var(--oro-scuro)}
.fascia.blu :is(.servizio,.passo,.riquadro,.caso,.scheda-caso .corpo,.errore,.articolo) .citazione{color:var(--blu)}
.fascia.blu + .invito{border-top:1px solid rgba(201,162,39,.35)}
.fascia.carta2{background:rgba(214,203,176,.18)}
.fascia.blu{color:#E6ECF4}
.fascia.blu h2,.fascia.blu h3{color:#fff}
.fascia.blu strong{color:#fff}
.fascia.blu a{color:var(--oro-chiaro)}
/* 29/9/2026 (utente: «fractional manager in blu su sfondo blu non si legge»): su OGNI fondo blu il grassetto
   e' bianco e i link sono oro, non solo nelle fasce blu ma anche in copertina, intestazioni e invito */
.copertina strong,.testa-pagina strong,.invito strong{color:#fff}
.copertina a:not(.pulsante),.testa-pagina a:not(.pulsante),.invito a:not(.pulsante){color:var(--oro-chiaro)}
.copertina .pulsante.scuro,.testa-pagina .pulsante.scuro,.fascia.blu .pulsante.scuro,.invito .pulsante.scuro{border-color:var(--oro-chiaro)}
.intesta{max-width:780px; margin:0 0 40px}
.intesta.centro{margin-left:auto; margin-right:auto; text-align:center}
.intesta p{color:var(--grigio); font-size:18px}
.fascia.blu .intesta p{color:#C6D1DE}
.due{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.due.media{align-items:center}
.tre{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.quattro{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}

/* numeri in evidenza */
.cifre{display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--foglio) var(--carta-papiro) repeat; border-bottom:1px solid var(--riga)}
.cifra{padding:28px 22px; border-right:1px solid var(--linea); text-align:center}
.cifra:last-child{border-right:0}
.cifra .n{display:block; font-family:Raleway,sans-serif; font-weight:700; font-size:28px; color:var(--blu); line-height:1.1}
.cifra .n small{font-size:18px}
.cifra .t{display:block; font-size:14.5px; color:var(--grigio); margin-top:6px; line-height:1.45}

/* schede dei servizi */
.servizio{background:var(--foglio) var(--carta-papiro) repeat; border:1px solid var(--riga); border-radius:var(--raggio); overflow:hidden; box-shadow:var(--ombra); display:flex;
  flex-direction:column; transition:transform .2s, box-shadow .2s; text-decoration:none; color:inherit}
.servizio:hover{transform:translateY(-4px); box-shadow:var(--ombra-forte); color:inherit}
.servizio .foto{aspect-ratio:4/3; overflow:hidden; background:var(--blu)}
.servizio .foto img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.servizio:hover .foto img{transform:scale(1.04)}
.servizio .testo{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
/* 29/9/2026 (utente): «Temporary Management lo voglio su una riga sola»: i titoli dei quattro riquadri non
   vanno a capo e si adattano alla larghezza della scheda */
.servizio h3{margin-bottom:.4em; white-space:nowrap; font-size:clamp(15px,1.3vw,18px)}
.servizio p{font-size:15.5px; color:var(--grigio); margin-bottom:14px}
.servizio .vai{margin-top:auto; font-family:Raleway,sans-serif; font-weight:700; font-size:14.5px; color:var(--blu)}
.servizio:hover .vai{color:var(--oro)}

/* passi del metodo */
.tre{counter-reset:passo}   /* i passi dentro una griglia a tre: 01-06, non tutti 01 */
.passi{counter-reset:passo; display:grid; grid-template-columns:repeat(5,1fr); gap:18px}   /* cinque passi (29/9: aggiunta la previsione dei flussi finanziari) */
.passo{background:var(--foglio) var(--carta-papiro) repeat; border:1px solid var(--riga); border-top:3px solid var(--oro); border-radius:0 0 var(--raggio) var(--raggio); padding:24px 22px;
  box-shadow:var(--ombra)}
.passo::before{counter-increment:passo; content:counter(passo, decimal-leading-zero); display:block; font-family:Raleway,sans-serif;
  font-weight:700; font-size:30px; color:var(--oro); margin-bottom:8px}
.passo h3{font-size:19px}
.passo p{font-size:15.5px; color:var(--grigio); margin:0}

/* frase in evidenza */
.citazione{font-family:Raleway,sans-serif; font-size:clamp(18px,1.8vw,21px); font-weight:600; line-height:1.4; color:var(--blu);
  border-left:4px solid var(--oro); padding:4px 0 4px 26px; margin:34px 0}
.fascia.blu .citazione{color:#fff}

/* elenchi con il segno oro */
.elenco-oro{list-style:none; padding:0; margin:0 0 1.1em}
.elenco-oro li{position:relative; padding-left:28px; margin-bottom:.55em}
/* 29/9/2026 (utente): «se stai facendo un elenco, non farlo con i trattini ma con i puntini» */
.elenco-oro li::before{content:""; position:absolute; left:6px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--oro)}

/* riquadro */
.riquadro{background:var(--foglio) var(--carta-papiro) repeat; border:1px solid var(--riga); border-radius:var(--raggio); padding:30px 32px; box-shadow:var(--ombra)}
.riquadro.oro{border-left:4px solid var(--oro)}


/* linea del tempo (esempio del break even) */
.tempo{list-style:none; margin:26px 0 0; padding:0; position:relative}
.tempo::before{content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:var(--linea)}
.tempo li{position:relative; padding-left:44px; margin-bottom:18px}
.tempo li::before{content:""; position:absolute; left:4px; top:6px; width:16px; height:16px; border-radius:50%;
  background:var(--bianco); border:3px solid var(--oro)}
.tempo .quando{display:block; font-family:Raleway,sans-serif; font-weight:700; font-size:14px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--oro)}

/* casi */
.caso{background:var(--foglio) var(--carta-papiro) repeat; border:1px solid var(--riga); border-radius:var(--raggio); box-shadow:var(--ombra); padding:30px 32px; display:flex; flex-direction:column}
.caso .settore{font-family:Raleway,sans-serif; font-size:13px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--oro-scuro)}
.caso h3{margin-top:8px}
.caso .esito{display:flex; align-items:baseline; gap:12px; margin:14px 0 6px; padding-top:16px; border-top:1px solid var(--linea)}
.caso .esito .n{font-family:Raleway,sans-serif; font-weight:700; font-size:30px; color:var(--blu); white-space:nowrap}
.caso .esito .t{font-size:14.5px; color:var(--grigio); line-height:1.4}
.scheda-caso{background:var(--foglio) var(--carta-papiro) repeat; border:1px solid var(--riga); border-radius:var(--raggio); box-shadow:var(--ombra); overflow:hidden}
.scheda-caso .dati{display:grid; grid-template-columns:repeat(3,1fr); background:var(--blu); color:#fff}
.scheda-caso .dati div{padding:18px 24px; border-right:1px solid rgba(255,255,255,.12)}
.scheda-caso .dati div:last-child{border-right:0}
.scheda-caso .dati span{display:block; font-family:Raleway,sans-serif; font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--oro-chiaro)}
.scheda-caso .dati b{display:block; font-family:Raleway,sans-serif; font-size:17px; margin-top:4px; color:#fff; line-height:1.35}
.scheda-caso .corpo{padding:30px 32px 26px}
.scheda-caso .corpo h3{margin-top:1.2em}
.scheda-caso .corpo h3:first-child{margin-top:0}
/* 29/9/2026: il dato sopra e la spiegazione sotto, a tutta larghezza (affiancati, un testo lungo diventava una
   colonna stretta accanto a «Basket bond») */
.risultato{display:flex; flex-direction:column; gap:6px; align-items:flex-start; background:rgba(255,255,255,.55); border:1px solid var(--riga); border-radius:var(--raggio); padding:18px 22px; margin:18px 0 4px}
.risultato .n{font-family:Raleway,sans-serif; font-weight:700; font-size:30px; line-height:1.15; color:var(--blu); white-space:nowrap}
.risultato p{margin:0; color:var(--grigio)}

/* errori con i video */
.errori{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.errore{background:var(--foglio) var(--carta-papiro) repeat; border:1px solid var(--riga); border-radius:var(--raggio); overflow:hidden; box-shadow:var(--ombra); display:flex; flex-direction:column}
.errore .video{position:relative; aspect-ratio:16/9; background:var(--blu-notte); border:0; padding:0; cursor:pointer; overflow:hidden; display:block; width:100%}
.errore .video img{width:100%; height:100%; object-fit:cover; opacity:.92; transition:transform .4s, opacity .2s}
.errore .video:hover img{transform:scale(1.04); opacity:1}
.gioca{position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%;
  background:rgba(201,162,39,.94); box-shadow:0 6px 18px rgba(0,0,0,.35)}
.gioca::after{content:""; position:absolute; left:23px; top:18px; border-style:solid; border-width:11px 0 11px 17px;
  border-color:transparent transparent transparent var(--blu-notte)}
.errore .testo{padding:20px 22px 22px}
.errore .num{font-family:Raleway,sans-serif; font-size:13px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--oro-scuro)}
.errore h3{font-size:18.5px; margin:6px 0 8px}
.errore p{font-size:15px; color:var(--grigio); margin:0 0 8px}
.errore details{font-size:15px; color:var(--inchiostro)}
.errore summary{cursor:pointer; font-family:Raleway,sans-serif; font-weight:700; color:var(--blu); font-size:14.5px}
.errore details p{color:var(--inchiostro); margin-top:10px}
.video-grande{position:relative; aspect-ratio:16/9; border-radius:var(--raggio); overflow:hidden; box-shadow:var(--ombra-forte); background:var(--blu-notte)}
.video-grande button{all:unset; cursor:pointer; position:absolute; inset:0}
.video-grande img{width:100%; height:100%; object-fit:cover}
.finestra-video{position:fixed; inset:0; z-index:100; background:rgba(8,18,32,.86); display:none; align-items:center; justify-content:center; padding:24px}
.finestra-video.aperta{display:flex}
.finestra-video video{width:min(1000px,100%); max-height:86vh; border-radius:8px; background:#000}
.finestra-video .chiudi{position:absolute; top:16px; right:20px; background:none; border:0; color:#fff; font-size:34px; cursor:pointer; line-height:1}

/* documenti */
.documenti{display:flex; flex-wrap:wrap; gap:14px; margin-top:22px}
.documento{display:flex; align-items:center; gap:12px; background:var(--foglio) var(--carta-papiro) repeat; border:1px solid var(--riga); border-radius:var(--raggio);
  padding:12px 18px 12px 14px; text-decoration:none; color:var(--blu); font-family:Raleway,sans-serif; font-weight:700; font-size:15px}
.documento:hover{border-color:var(--oro); color:var(--blu)}
.documento .pdf{font-size:11px; font-weight:700; letter-spacing:1px; color:#fff; background:#A93A2F; border-radius:3px; padding:3px 6px}

/* dal blog */
.articoli{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.articolo{background:var(--foglio) var(--carta-papiro) repeat; border:1px solid var(--riga); border-radius:var(--raggio); padding:24px; box-shadow:var(--ombra); text-decoration:none; color:inherit;
  display:flex; flex-direction:column; border-top:3px solid var(--blu)}
.articolo:hover{border-top-color:var(--oro); color:inherit}
.articolo .quando{font-size:12.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--grigio)}
.articolo h3{font-size:18.5px; margin:8px 0 10px}
.articolo p{font-size:15px; color:var(--grigio); margin:0}

/* modulo */
.modulo{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.modulo .pieno{grid-column:1 / -1}
.modulo label{display:block; font-family:Raleway,sans-serif; font-weight:700; font-size:14.5px; color:var(--blu); margin-bottom:6px}
.modulo input,.modulo textarea{width:100%; font:inherit; font-size:16px; padding:12px 14px; border:1px solid #CFC6B0; border-radius:4px; background:#fff; color:var(--inchiostro)}
.modulo textarea{min-height:150px; resize:vertical}
.modulo input:focus,.modulo textarea:focus{outline:none; border-color:var(--blu); box-shadow:0 0 0 3px rgba(15,32,57,.15)}
.modulo .esca{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.modulo .consenso{font-size:13.5px; color:var(--grigio)}
.modulo button{cursor:pointer}
.avviso{padding:14px 18px; border-radius:4px; margin:0 0 16px; font-size:15.5px}
.avviso.ok{background:#E9F3EA; border-left:4px solid #2F7A44}
.avviso.no{background:#F8E9E7; border-left:4px solid #A93A2F}
.recapiti{list-style:none; padding:0; margin:0}
.recapiti li{padding:12px 0; border-bottom:1px solid var(--riga)}
.recapiti span{display:block; font-family:Raleway,sans-serif; font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--oro-scuro)}
.mappa{border-radius:var(--raggio); overflow:hidden; box-shadow:var(--ombra); min-height:320px; background:#e8e4d8}
.mappa .tela{width:100%; height:100%; min-height:320px}

/* invito finale */
.invito{color:#fff; text-align:center; padding:74px 0}
.invito h2{color:#fff}
.invito p{color:#C6D1DE; font-size:18px; max-width:700px; margin:0 auto 26px}
.invito .contatti-veloci{margin-top:22px; font-size:15.5px; color:#C6D1DE}
.invito .contatti-veloci a{color:var(--oro-chiaro); text-decoration:none}

/* piede */
.piede{background:var(--blu-notte); color:#AFBBCB; font-size:15px; padding:56px 0 26px}
.piede .colonne{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px}
.piede h4{color:#fff; font-size:15px; letter-spacing:1.4px; text-transform:uppercase; margin-bottom:14px}
.piede a{color:#D8DFE8; text-decoration:none}
.piede a:hover{color:var(--oro-chiaro)}
.piede ul{list-style:none; padding:0; margin:0}
.piede li{margin-bottom:6px}
.piede .firma-piede{display:flex; gap:14px; align-items:center; margin-bottom:14px}
.piede .firma-piede img{width:48px; height:48px}
.piede .firma-piede b{display:block; font-family:Raleway,sans-serif; color:var(--oro-chiaro); font-size:17px}
.piede .fondo{border-top:1px solid rgba(255,255,255,.1); margin-top:38px; padding-top:18px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px}

/* comparsa in scorrimento */
.appare{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.appare.vista{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.appare{opacity:1; transform:none; transition:none}}

/* ------------------------------------------------------------------ schermi piccoli */
@media (max-width:1020px){
  .copertina .contenitore{grid-template-columns:1fr}
  .quattro{grid-template-columns:repeat(2,1fr)}
  .passi{grid-template-columns:repeat(3,1fr)}
  .cifre{grid-template-columns:repeat(2,1fr)}
  .cifra:nth-child(2){border-right:0}
  .cifra:nth-child(-n+2){border-bottom:1px solid var(--linea)}
  .errori,.articoli,.tre{grid-template-columns:repeat(2,1fr)}
  .menu a{padding:9px 9px 10px; font-size:15px}
}
@media (max-width:760px){
  body{font-size:16px}
  .fascia{padding:58px 0}
  .contenitore{padding:0 18px}
  .due,.tre,.quattro,.passi,.errori,.articoli,.modulo{grid-template-columns:1fr}
  .due{gap:30px}
  .scheda-caso .dati{grid-template-columns:1fr}
  .scheda-caso .dati div{border-right:0; border-bottom:1px solid rgba(255,255,255,.12)}
  .piede .colonne{grid-template-columns:1fr}
  .hamburger{display:block}
  .marchio{display:none}                /* sul telefono: menu a sinistra, nome al centro, bandiere a destra */
  .testata-alta > div:not(.bandiere){padding:0 40px}
  .nome-studio{font-size:16px}
  .motto{font-size:13px}
  .bandiere{right:14px; flex-direction:column; gap:5px}
  .bandiere img{width:20px}
  .menu{display:none; padding:0 0 10px}
  .menu.aperto{display:block}
  .menu ul{flex-direction:column; align-items:stretch}
  .menu a{padding:11px 18px; border-top:1px solid rgba(255,255,255,.08); font-size:16px}
  .menu a::after{left:18px; right:auto; width:30px; bottom:4px}
  .testata.menu-aperto .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .testata.menu-aperto .hamburger span:nth-child(2){opacity:0}
  .testata.menu-aperto .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .copertina .contenitore{padding-top:44px; padding-bottom:50px; gap:30px}
  .testa-pagina .contenitore{padding-top:42px; padding-bottom:40px}
  .riquadro,.caso,.scheda-caso .corpo{padding:24px 20px}
  .cifra .n{font-size:28px}
}

/* i social (LinkedIn, Facebook, YouTube) nel piede e nei contatti */
.social{display:flex; gap:10px; margin-top:6px}
.social a{display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(230,185,60,.55); color:#E6B93C; transition:background .15s,color .15s}
.social a:hover{background:#E6B93C; color:#0F2039}
.social svg{width:17px; height:17px; fill:currentColor}
.recapiti .social a{border-color:var(--riga); color:var(--blu)}
.recapiti .social a:hover{background:var(--blu); color:#fff; border-color:var(--blu)}

/* LA GRIGLIA DELLA COPERTINA (utente, 29/9/2026: «in home mi piaceva quella griglia nello sfondo blu che avevi
   messo all'inizio»): righe sottili ogni 48px sopra il cielo stellato, che sfumano verso il basso. */
.copertina .griglia{position:absolute; inset:0; pointer-events:none; opacity:.08; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 85%); mask-image:linear-gradient(180deg, #000 0%, transparent 85%)}