/* =====================================================================
   FF Theme · pagine interne con le scene (dopo scene.css)
   Modello del concept pagine/federicofloris-servizi-concept.html («PAGINA INTERNA»), comune alle pagine
   interne: una scena d'apertura a tutto schermo, poi scroll naturale. Stesso guscio della home.
   Ogni sezione ha il suo tono scuro/chiaro a ogni larghezza (token di base.css su [data-tone]):
   il confine scorre con la pagina; header, rail e barra prendono il tono della sezione che hanno sotto (main.js).
   Caricato solo dalle pagine che usano questo modello (inc/pagine.php).
   ===================================================================== */

.ff-page .ff-scene{
  position:relative;display:block;background:var(--bg);color:var(--fg);
  padding-block:clamp(96px,16vh,180px);padding-left:var(--ff-pad-l);padding-right:var(--ff-pad-r);
}
/* il canvas sta sopra le sezioni (che hanno il loro fondo) ma non intercetta nulla:
   disegna il reticolo appena percettibile e l'oggetto nel suo riquadro */
.ff-page #ff-obj{z-index:2}
/* avanzamento continuo con lo scroll: niente transizione, segue il dito o la rotella */
.ff-page .ff-progress i{transition:none}
.ff-page .ff-scene h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
/* intestazioni di sezione: titolo e testo con una misura di lettura; griglie, linee e schede occupano tutta la cornice */
.ff-head{display:grid;gap:clamp(14px,2.2vh,22px);max-width:min(46rem,100%);min-width:0}
.ff-page .ff-scene .ff-head .ff-lead{max-width:52ch}
.ff-page .ff-scene h3,.ff-page .ff-scene p,.ff-points b,.ff-steps3 b,.ff-card h3{-webkit-user-select:text;user-select:text}

/* Entrata dei contenuti quando arrivano in vista (classe ff-rv messa dal JS: senza JS tutto resta visibile) */
.ff-page.ff-js .ff-rv{opacity:0;transform:translateY(18px);transition:opacity 800ms var(--ff-ease-out),transform 800ms var(--ff-ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.ff-page.ff-js .ff-rv.is-in{opacity:1;transform:none}

/* ===== Apertura: testo a sinistra, disegno a destra ===== */
.ff-page .ff-hero{
  min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center;gap:clamp(40px,6vw,120px);
  padding-block:calc(var(--ff-head) + clamp(20px,5vh,56px)) calc(var(--ff-barh) + clamp(20px,5vh,56px));
}
.ff-page .ff-hero .ff-in{max-width:none}
.ff-hero h1{font-size:clamp(2.6rem,min(5.6vw,8.4vh),6.2rem)}
/* mini indice delle soluzioni: righe con numero, nome e freccia */
.ff-jump{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);max-width:30rem}
.ff-jump a{display:grid;grid-template-columns:2.8rem minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:clamp(8px,1.3vh,12px) 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:500;transition:padding var(--ff-t-mid) var(--ff-ease-out),color var(--ff-t-fast)}
.ff-jump small{font:400 .7rem/1 var(--ff-mono);color:var(--muted);white-space:nowrap}
.ff-jump i{font-style:normal;color:var(--muted);transition:transform var(--ff-t-mid) var(--ff-ease-out),color var(--ff-t-fast)}
.ff-jump a:hover,.ff-jump a:focus-visible{padding-left:8px;color:var(--accent)}
.ff-jump a:hover i,.ff-jump a:focus-visible i{transform:translateY(3px);color:var(--accent)}
.ff-jump a:hover small{color:var(--accent)}
/* sottosezioni numerate come i capitoli di una documentazione: «02.» grigio, la cifra in magenta */
.ff-sub{font-style:normal;color:var(--muted)}
.ff-step-n b,.ff-jump small b{color:var(--accent);font-weight:500}
.ff-slot b .ff-sub{color:var(--muted)}

/* desktop: il riquadro del disegno dell'apertura è aperto (niente scheda), con la lettura tecnica sotto */
@media (min-width:900px){
  .ff-page .ff-slot{display:block;position:relative;padding:0 0 30px;align-self:center}
  .ff-page .ff-slot b{display:none}
  .ff-page .ff-slot i{display:block;width:min(100%,calc((100svh - var(--ff-head) - var(--ff-barh) - 140px) * 1.3));aspect-ratio:1.3;margin-left:auto}
  .ff-page .ff-slot p{position:absolute;left:auto;right:0;bottom:0;margin:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .ff-step .ff-slot{display:none}
}

/* ===== Passi a sinistra, palco fermo a destra (es. «Soluzioni» in Servizi) ===== */
.ff-sol-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(40px,6vw,120px)}
.ff-sol-steps{display:grid;gap:0;min-width:0}
.ff-step{min-height:min(78vh,760px);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(32px,6vh,64px);border-bottom:1px solid var(--line)}
.ff-step:last-child{border-bottom:0}
.ff-step-in{display:grid;gap:16px;max-width:36rem;transition:opacity 500ms var(--ff-ease-out)}
.ff-step-n{margin:0;color:var(--muted)}
.ff-step h3{font-size:clamp(2rem,3.4vw,3.2rem)}
.ff-step-in>p:not(.ff-step-n){margin:0;max-width:44ch;font-size:1.08rem;line-height:1.55}
/* il passo che si sta leggendo resta pieno, gli altri si attenuano (solo desktop) */
@media (min-width:900px){
  .ff-js .ff-step:not(.is-active) .ff-step-in{opacity:.32}
  .ff-head+.ff-step{margin-top:clamp(24px,6vh,64px)}
}
.ff-stage{position:relative;min-width:0}
.ff-stage-in{position:sticky;top:var(--ff-head);height:calc(100vh - var(--ff-head) - var(--ff-barh));display:flex;flex-direction:column;justify-content:center}
.ff-stage-in b{display:none}
.ff-stage i{display:block;width:min(100%,calc((100vh - var(--ff-head) - var(--ff-barh) - 140px) * 1.3));aspect-ratio:1.3;margin-left:auto}
.ff-stage-in p{margin:14px 0 0 auto;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:min(100%,calc((100vh - var(--ff-head) - var(--ff-barh) - 140px) * 1.3))}

/* ===== Due schede affiancate con righe d'azione ===== */
.ff-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(40px,7vh,72px)}
.ff-card{position:relative;display:grid;gap:18px;align-content:start;padding:clamp(24px,3vw,44px);border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 55%,transparent);min-width:0;overflow:hidden;transition:border-color var(--ff-t-mid)}
.ff-card:hover{border-color:color-mix(in srgb,var(--fg) 35%,transparent)}
.ff-card-n{position:absolute;top:clamp(10px,1.6vw,22px);right:clamp(16px,2vw,30px);font:italic 400 clamp(4rem,7vw,7rem)/1 var(--ff-serif);color:color-mix(in srgb,var(--fg) 10%,transparent);pointer-events:none;transition:color var(--ff-t-mid)}
.ff-card:hover .ff-card-n{color:color-mix(in srgb,var(--accent) 55%,transparent)}
.ff-card-k{margin:0;color:var(--accent)}
.ff-card h3{font-size:clamp(1.8rem,2.6vw,2.6rem);max-width:15ch}
.ff-card>p:not(.ff-mono){margin:0;color:var(--muted);max-width:46ch}
/* righe d'azione: titolo, descrizione, freccia che scorre */
.ff-rows{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.ff-rows li{border-bottom:1px solid var(--line)}
.ff-rows a,.ff-rows button{width:100%;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;align-items:baseline;gap:6px 16px;padding:15px 0;background:none;border:0;text-align:left;text-decoration:none;cursor:pointer;color:var(--fg);transition:padding var(--ff-t-mid) var(--ff-ease-out)}
.ff-rows b{font-weight:600}
.ff-rows small{color:var(--muted);font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-rows i{font-style:normal;color:var(--muted);transition:transform var(--ff-t-mid) var(--ff-ease-out),color var(--ff-t-fast)}
.ff-rows a:hover,.ff-rows button:hover,.ff-rows a:focus-visible,.ff-rows button:focus-visible{padding-left:8px}
.ff-rows a:hover i,.ff-rows button:hover i{transform:translateX(4px);color:var(--accent)}
.ff-rows a:hover b,.ff-rows button:hover b{color:var(--accent)}

/* ===== Cosa è incluso aperto in pagina: tre gruppi in colonna ===== */
.ff-inc-cols{display:grid;grid-template-columns:repeat(3,minmax(300px,1fr));gap:clamp(28px,4vh,40px) clamp(28px,3vw,48px);margin-top:clamp(40px,7vh,72px);
  /* se le tre colonne non ci stanno, restano su una riga e scorrono di lato (senza barra visibile) */
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
.ff-inc-cols::-webkit-scrollbar{display:none}
.ff-inc-cols>*{scroll-snap-align:start}
.ff-inc-cols.ff-ovf{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,36px)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,36px)),transparent 100%)}
.ff-inc-cols .ff-inc{grid-template-columns:1fr}
.ff-inc-cols h3{font:400 .75rem/1 var(--ff-mono)!important;letter-spacing:.06em!important;text-transform:uppercase;color:var(--muted)}
.ff-incs.is-drawing .ff-inc svg *{animation:ff-ink 760ms var(--ff-ease-out) both;animation-delay:calc(var(--d,0) * 60ms + 120ms)}
.ff-inc-note{margin-top:28px}
/* righe a scorrimento orizzontale (data-hscroll): le frecce «Scorri» compaiono solo quando i blocchi non ci stanno */
.ff-hs-nav{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:clamp(28px,5vh,48px);color:var(--muted)}
/* margine ridotto solo quando le frecce si vedono (nel concept valeva anche a frecce nascoste e il blocco si attaccava al testo) */
.ff-hs-nav:not([hidden])+[data-hscroll]{margin-top:14px!important}
.ff-hs-nav span{margin-right:10px}
/* testo troppo lungo per la sua riga: puntini e, al passaggio del mouse, scorre fino alla fine (pagina.js) */
.ff-mq{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ff-hs-nav button{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);background:none;cursor:pointer;color:var(--fg);transition:border-color var(--ff-t-fast),opacity var(--ff-t-fast)}
.ff-hs-nav button:hover{border-color:var(--fg)}
.ff-hs-nav button:disabled{opacity:.3;cursor:default}
/* caroselli: niente selezione del testo, così trascinandoli col mouse non si evidenzia nulla */
.ff-page [data-hscroll],.ff-page [data-hscroll] *{-webkit-user-select:none!important;user-select:none!important}
.ff-page [data-hscroll].ff-ovf{cursor:grab}
.ff-page [data-hscroll].ff-dragging{scroll-snap-type:none;cursor:grabbing}

/* ===== Metodo: tre parole su una linea che si riempie scorrendo ===== */
.ff-steps3{--p:0;list-style:none;margin:clamp(48px,8vh,88px) 0 0;padding:34px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);position:relative}
.ff-steps3::before,.ff-steps3::after{content:"";position:absolute;left:5px;right:0;top:5px;height:1px;background:var(--line)}
.ff-steps3::after{background:var(--accent);transform:scaleX(var(--p));transform-origin:left}
.ff-steps3 li{position:relative;display:grid;gap:12px;align-content:start;min-width:0;container-type:inline-size}
/* nodo: quadrato che diventa rombo magenta, lo stesso segno della sezione attiva nel rail */
.ff-steps3 li::before{content:"";position:absolute;top:-34px;left:0;width:11px;height:11px;border:1px solid var(--muted);background:var(--bg);transition:background-color var(--ff-t-mid),border-color var(--ff-t-mid),transform var(--ff-t-mid) var(--ff-ease-out)}
.ff-steps3 li.is-on::before{background:var(--accent);border-color:var(--accent);transform:rotate(45deg)}
.ff-steps3 span{color:var(--muted);transition:color var(--ff-t-mid)}
.ff-steps3 li.is-on span{color:var(--accent)}
/* la parola si misura sulla larghezza della sua colonna (unità cqi): «Commissiona» non tocca mai «Rilassati» */
.ff-steps3 b{font-size:clamp(2.2rem,4.4vw,4.6rem);font-size:clamp(1.6rem,15cqi,4.6rem);font-weight:600;letter-spacing:-.04em;line-height:1;color:color-mix(in srgb,var(--fg) 28%,transparent);transition:color 600ms var(--ff-ease-out)}
.ff-steps3 li.is-on b{color:var(--fg)}
.ff-steps3 p{margin:0;max-width:34ch;color:var(--muted)}
/* senza JS la linea resta piena e le parole accese */
html:not(.ff-js) .ff-steps3{--p:1}
html:not(.ff-js) .ff-steps3 b{color:var(--fg)}
.ff-faqbox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(56px,9vh,96px);padding-top:24px;border-top:1px solid var(--line)}
.ff-faqbox p{margin:0;max-width:46ch}

/* ===== Prezzi: punti di forza e certificazioni ===== */
.ff-prices-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(40px,6vw,120px);align-items:start}
.ff-points{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ff-points li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:6px 14px;padding:clamp(18px,3vh,26px) 0;border-bottom:1px solid var(--line)}
.ff-points span{color:var(--accent);padding-top:.45em}
.ff-points b{font-size:clamp(1.4rem,2vw,1.8rem);font-weight:600;letter-spacing:-.025em;line-height:1.1}
.ff-points p{grid-column:2;margin:0;color:var(--muted);max-width:42ch}
/* richiamo al concept gratuito della home (sotto i pulsanti, rimanda a Prezzi #concept) */
.ff-concept-ref a{color:var(--fg);text-underline-offset:3px;text-decoration-color:var(--accent)}
.ff-concept-ref a:hover{color:var(--accent)}
.ff-certs{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:clamp(48px,8vh,80px)}
.ff-certs p{margin:0;color:var(--muted)}

/* ===== Chiusura: titolo grande su una riga, contatti, piede legale ===== */
.ff-page .ff-end h2.ff-big{font-size:clamp(3.2rem,10.5vw,10rem);line-height:.9;letter-spacing:-.05em;white-space:nowrap}
.ff-end .ff-head{max-width:none}
.ff-end .ff-lead{max-width:46ch}
.ff-end .ff-contact{margin-top:clamp(40px,7vh,64px)}
.ff-page .ff-end{padding-bottom:calc(var(--ff-barh) + clamp(40px,7vh,72px))}

/* niente scroll orizzontale per mezzo pixel delle righe che arrivano fino ai bordi (clip non rompe gli elementi sticky) */
.ff-page main{overflow-x:clip}

/* ===== Desktop stretto (900–1180): colonne un po' più compatte ===== */
@media (min-width:900px) and (max-width:1180px){
  .ff-page .ff-hero,.ff-sol-grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(32px,4vw,56px)}
  .ff-prices-grid{grid-template-columns:1fr}
}

/* ===== Tablet e mobile ===== */
@media (max-width:899px){
  .ff-page .ff-scene{padding-block:clamp(72px,12vh,112px)}
  /* l'occhiello torna visibile (in home sta nella scheda del disegno), tranne nell'apertura che ha la sua scheda */
  .ff-page .ff-eyebrow{display:flex}
  .ff-page .ff-hero .ff-eyebrow{display:none}
  .ff-page .ff-hero{display:flex;flex-direction:column;justify-content:space-between;gap:0;padding-block:calc(var(--ff-head) + 14px) calc(var(--ff-barh) + 40px)}
  .ff-page .ff-hero .ff-slot{order:-1}
  .ff-hero h1{font-size:clamp(2.3rem,10vw,3.1rem)}
  .ff-sol-grid{display:block}
  .ff-stage{display:none}
  .ff-head+.ff-step{margin-top:24px}
  .ff-step{min-height:0;padding-block:36px}
  .ff-step .ff-slot{margin-bottom:22px}
  .ff-step h3{font-size:clamp(1.9rem,8vw,2.4rem)}
  .ff-duo{grid-template-columns:1fr}
  .ff-steps3{grid-template-columns:1fr;padding:0 0 0 34px;gap:36px}
  .ff-steps3::before,.ff-steps3::after{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .ff-steps3::after{transform:scaleY(var(--p));transform-origin:top}
  .ff-steps3 li::before{top:.15em;left:-34px}
  .ff-steps3 b{font-size:clamp(2.2rem,10vw,3rem);font-size:clamp(2rem,15cqi,3rem)}
  .ff-prices-grid{grid-template-columns:1fr}
  .ff-page .ff-end h2.ff-big{font-size:clamp(3rem,15vw,5.5rem)}
}
/* telefono: le tre colonne di «Cosa è incluso» una sotto l'altra */
@media (max-width:599px){
  .ff-inc-cols{grid-template-columns:1fr;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .ff-incs .ff-hs-nav{display:none!important}
}
@media (min-width:600px) and (max-width:899px){
  .ff-page .ff-step-in>p:not(.ff-step-n),.ff-page .ff-head .ff-lead{max-width:70ch}
}
@media (max-width:520px){
  .ff-rows a,.ff-rows button{grid-template-columns:minmax(0,1fr) auto}
  .ff-rows small{grid-column:1;grid-row:2}
  .ff-rows i{grid-column:2;grid-row:1/3;align-self:center}
}
@media (prefers-reduced-motion:reduce){
  .ff-page.ff-js .ff-rv{opacity:1;transform:none}
  .ff-incs.is-drawing .ff-inc svg *{animation:none}
}