/* =====================================================================
   FF Theme · pagina Settori (/settori/, prima /realizzazione-siti-web-vetrina/), dopo pagina.css
   Dal concept pagine/federicofloris-settori-concept.html (blocco «PAGINA SETTORI»).
   In più rispetto al concept: le schede di tutti i settori sono stampate dal server (.ff-sp-pane),
   l'elenco è fatto di link (#settore-…), stati senza JavaScript.
   ===================================================================== */
.ff-short{display:none}
.ff-hero .ff-facts{margin-top:4px}

/* ===== 02 · Settori: elenco fermo a sinistra, scheda a destra ===== */
.ff-sect-grid{display:grid;grid-template-columns:minmax(16rem,.36fr) minmax(0,1fr);gap:clamp(32px,4vw,80px);margin-top:clamp(40px,7vh,72px);align-items:start}
.ff-sect-nav{position:sticky;top:calc(var(--ff-head) + 24px);min-width:0}
.ff-sect-list{display:grid;border-top:1px solid var(--line)}
.ff-sect-list [role="tab"]{position:relative;display:grid;grid-template-columns:2.8rem minmax(0,1fr) auto;align-items:baseline;gap:10px;width:100%;padding:clamp(11px,1.7vh,15px) 0;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;text-decoration:none;cursor:pointer;
  color:color-mix(in srgb,var(--fg) 62%,transparent);font:500 1.02rem/1.25 var(--ff-sans);transition:padding var(--ff-t-mid) var(--ff-ease-out),color var(--ff-t-fast)}
.ff-sect-list small{font-size:.7rem;white-space:nowrap}
.ff-sect-list small b{font-weight:500;color:var(--muted);transition:color var(--ff-t-fast)}
.ff-sect-list i{font:400 .66rem/1 var(--ff-mono);letter-spacing:.05em;text-transform:uppercase;font-style:normal;color:var(--muted);white-space:nowrap}
/* settore scelto: testo pieno, cifra magenta e una linea magenta che scorre sotto */
.ff-sect-list [role="tab"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--ff-ease-out)}
.ff-sect-list [role="tab"][aria-selected="true"]{color:var(--fg);padding-left:8px}
.ff-sect-list [role="tab"][aria-selected="true"]::after{transform:scaleX(1)}
.ff-sect-list [role="tab"][aria-selected="true"] small b,.ff-sect-list [role="tab"]:hover small b{color:var(--accent)}
.ff-sect-list [role="tab"]:hover{color:var(--fg)}
.ff-sect-list [role="tab"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* senza JavaScript l'elenco è un indice di link: nessuna voce «scelta» */
html:not(.ff-js) .ff-sect-list [role="tab"]{color:var(--fg);padding-left:0}
html:not(.ff-js) .ff-sect-list [role="tab"]::after{transform:scaleX(0)}

/* scheda: intestazione e disegno affiancati, poi tre colonne, poi prezzo e azioni.
   Con JS ogni .ff-sp-pane è «trasparente» (display:contents): i suoi blocchi prendono le aree della griglia;
   si vede solo la scheda scelta. Senza JS le schede sono blocchi uno sotto l'altro. */
.ff-sp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);grid-template-areas:"h slot" "body body" "foot foot";gap:clamp(24px,4vh,40px) clamp(28px,3.5vw,64px);border-top:1px solid var(--line);padding-top:clamp(20px,3vh,32px);min-width:0;outline:0}
.ff-js .ff-sp-pane{display:contents}
.ff-js .ff-sp-pane:not(.is-on){display:none}
.ff-sp-h{grid-area:h;display:grid;gap:16px;align-content:start;min-width:0}
.ff-sp>.ff-slot{grid-area:slot}
.ff-sp-body{grid-area:body}
.ff-sp-foot{grid-area:foot}
html:not(.ff-js) .ff-sp{display:block;border-top:0;padding-top:0}
html:not(.ff-js) .ff-sp>.ff-slot{display:none}
html:not(.ff-js) .ff-sp-pane{display:grid;gap:clamp(24px,4vh,40px);padding-top:clamp(20px,3vh,32px);border-top:1px solid var(--line)}
/* senza JS i blocchi della scheda vanno uno sotto l'altro (le aree h/body/foot valgono solo nella griglia di .ff-sp) */
html:not(.ff-js) .ff-sp-pane>*{grid-area:auto}
html:not(.ff-js) .ff-sp-pane+.ff-sp-pane{margin-top:clamp(48px,8vh,88px)}
.ff-sp-pane{scroll-margin-top:calc(var(--ff-head) + 24px)}
.ff-sp-k{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font-size:.72rem}
.ff-sp-k b{color:var(--accent);font-weight:500}
.ff-sp-n+span{flex-basis:100%;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;line-height:1.5}
.ff-sp-h h3{font-size:clamp(2.1rem,3.6vw,3.6rem);letter-spacing:-.04em;max-width:14ch}
.ff-sp-pitch{margin:0;max-width:44ch;font-size:1.08rem;line-height:1.55;color:var(--muted)}
/* contenuti che cambiano col settore: escono e rientrano */
.ff-swap{transition:opacity 380ms var(--ff-ease-out),transform 380ms var(--ff-ease-out)}
.ff-sp.is-out .ff-swap{opacity:0;transform:translateY(8px);transition-duration:160ms}
.ff-sp-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vh,36px) clamp(20px,2.4vw,40px);padding-top:clamp(20px,3vh,28px);border-top:1px solid var(--line)}
.ff-sp-col{display:grid;gap:14px;align-content:start;min-width:0}
.ff-sp-col h4{margin:0;font-size:.72rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ff-sp-col h4 small{margin-left:6px;color:var(--fg)}
.ff-sp-parts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ff-sp-parts li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-weight:500}
.ff-sp-parts small{padding-top:.3em;font-size:.68rem;color:var(--accent)}
.ff-sp-xh{margin:8px 0 0;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ff-page .ff-scene .ff-sp-col .ff-tags{flex-wrap:wrap;margin-inline:0;padding-inline:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
.ff-sp-col .ff-tags li{font-size:.66rem;padding:6px 9px}
/* design pronti: schede piccole con il nome in corsivo */
.ff-sp-mocks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ff-sp-mocks a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n i" "d i";gap:4px 12px;align-items:center;padding:14px 16px;border:1px solid var(--line);text-decoration:none;background:color-mix(in srgb,var(--surface) 60%,transparent);transition:border-color var(--ff-t-mid),transform var(--ff-t-mid) var(--ff-ease-out)}
.ff-sp-mocks b{grid-area:n;font:italic 400 1.5rem/1 var(--ff-serif)}
.ff-sp-mocks small{grid-area:d;font:400 .66rem/1.3 var(--ff-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ff-sp-mocks i{grid-area:i;font-style:normal;transition:color var(--ff-t-fast),transform var(--ff-t-mid) var(--ff-ease-out)}
.ff-sp-mocks a:hover{border-color:var(--accent);transform:translateY(-2px)}
.ff-sp-mocks a:hover i{color:var(--accent);transform:translate(2px,-2px)}
/* elenchi di guide (scheda e sezione 04) */
.ff-sp-links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ff-sp-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:11px 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-sp-links li:last-child a{border-bottom:0}
.ff-sp-links i{font-style:normal;color:var(--muted);transition:transform var(--ff-t-mid) var(--ff-ease-out),color var(--ff-t-fast)}
.ff-sp-links a:hover{padding-left:6px;color:var(--accent)}
.ff-sp-links a:hover i{transform:translateX(4px);color:var(--accent)}
.ff-sp-none{margin:0;color:var(--muted);max-width:34ch}
.ff-sp-none .ff-link{color:var(--fg)}
/* prezzo di partenza e azioni */
.ff-sp-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;padding-top:clamp(20px,3vh,28px);border-top:1px solid var(--line)}
.ff-sp-price{display:grid;gap:6px}
.ff-sp-price>small:first-child{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ff-sp-price p{display:flex;align-items:baseline;gap:6px;margin:0}
.ff-sp-price p>span{font-weight:500}
.ff-sp-price b{font-size:clamp(2.4rem,3.8vw,3.6rem);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.ff-sp-price em{margin-left:8px;font:400 .7rem/1 var(--ff-mono);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ff-sp-price>small:last-child{color:var(--muted);font-size:.88rem}
.ff-sp-price>small a{color:var(--fg);text-underline-offset:3px}
.ff-sp-price>small a:hover{color:var(--accent)}
.ff-sp-foot .ff-actions{margin:0}
@media (min-width:900px){
  .ff-sp .ff-slot{padding-bottom:28px}
  .ff-sp .ff-slot i{width:100%;max-width:30rem}
}

/* ===== 03 · Specifiche: quattro punti in riga e scheda tecnica ===== */
.ff-points--4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.4vw,40px);margin-top:clamp(40px,7vh,72px);border-top:0}
.ff-points--4 li{grid-template-columns:1fr;align-content:start;gap:10px;border-top:1px solid var(--line);border-bottom:0}
.ff-points--4 span{padding:0}
.ff-points .ff-pn .ff-sub{color:var(--muted)}
.ff-points--4 p{grid-column:auto}
.ff-datasheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vh,40px) clamp(28px,4vw,72px);margin-top:clamp(48px,8vh,88px)}
.ff-ds-col{display:grid;gap:14px;align-content:start;min-width:0}
.ff-page .ff-scene .ff-ds-col h3{font-size:.72rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ff-ds-col dl{margin:0;border-top:1px solid var(--line)}
.ff-ds-col dl div{display:grid;grid-template-columns:minmax(8rem,.42fr) minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.ff-ds-col dt{font:400 .7rem/1.6 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ff-ds-col dd{margin:0;font-weight:500}
.ff-spec-aux{margin-top:clamp(36px,6vh,56px)}

/* ===== 04 · Guide: un gruppo per settore ===== */
.ff-guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:clamp(32px,5vh,48px) clamp(24px,3vw,48px);margin-top:clamp(40px,7vh,72px);align-items:start}
.ff-gg{display:grid;gap:4px;min-width:0}
.ff-gg-h{display:grid;grid-template-columns:2.8rem minmax(0,1fr) auto;align-items:baseline;gap:10px;width:100%;padding:0 0 12px;background:none;border:0;border-bottom:1px solid color-mix(in srgb,var(--fg) 45%,transparent);text-align:left;text-decoration:none;cursor:pointer;color:var(--fg);font:600 1.15rem/1.2 var(--ff-sans);letter-spacing:-.015em}
.ff-gg-h small{font-size:.7rem;font-weight:400}
.ff-gg-h small b{font-weight:500;color:var(--accent)}
.ff-gg-h i{font-size:.64rem;font-weight:400;letter-spacing:.05em;text-transform:uppercase;font-style:normal;color:var(--muted);transition:color var(--ff-t-fast)}
.ff-gg-h:hover i,.ff-gg-h:focus-visible i{color:var(--accent)}
.ff-gg .ff-sp-links{border-top:0}
.ff-guides-all{margin-top:clamp(36px,6vh,56px)}

/* ===== Desktop stretto ===== */
@media (min-width:900px) and (max-width:1180px){
  .ff-sect-grid{grid-template-columns:minmax(12.5rem,.3fr) minmax(0,1fr);gap:32px}
  .ff-sect-list i{display:none}
  .ff-sect-list [role="tab"]{grid-template-columns:2.6rem minmax(0,1fr)}
  .ff-sp{grid-template-columns:minmax(0,1fr) minmax(0,.7fr)}
  .ff-sp-body{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ff-sp-body .ff-sp-col:first-child{grid-row:span 2}
  .ff-points--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== Tablet e telefono ===== */
@media (max-width:899px){
  .ff-sect-grid{display:block;margin-top:28px}
  /* l'elenco diventa una riga di pillole che resta sotto l'header mentre scorri la scheda */
  .ff-sect-nav{top:var(--ff-head);z-index:3;margin:0 calc(var(--ff-pad-r) * -1) 0 calc(var(--ff-pad-l) * -1);padding:10px 0;background:var(--bg);border-bottom:1px solid var(--line)}
  .ff-sect-list{display:flex;gap:6px;border-top:0;overflow-x:auto;scrollbar-width:none;padding:0 var(--ff-pad-r) 0 var(--ff-pad-l);scroll-padding-inline:var(--ff-pad-l)}
  .ff-sect-list::-webkit-scrollbar{display:none}
  .ff-sect-list.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-sect-list [role="tab"]{flex:none;display:inline-flex;gap:8px;width:auto;padding:9px 14px;border:1px solid var(--line);color:var(--fg);font-size:.92rem;white-space:nowrap}
  .ff-sect-list [role="tab"]::after,.ff-sect-list i,.ff-sect-list .ff-long{display:none}
  .ff-sect-list .ff-short{display:inline}
  .ff-js .ff-sect-list [role="tab"][aria-selected="true"]{padding-left:14px;background:var(--fg);border-color:var(--fg);color:var(--bg)}
  .ff-js .ff-sect-list [role="tab"][aria-selected="true"] small b{color:var(--bg)}
  .ff-js .ff-sect-list [role="tab"][aria-selected="true"] .ff-sub{color:color-mix(in srgb,var(--bg) 60%,transparent)}
  /* scheda in colonna: intestazione, disegno, colonne, prezzo (i blocchi delle schede sono figli diretti grazie a display:contents) */
  .ff-sp{display:flex;flex-direction:column;gap:24px;border-top:0;padding-top:28px}
  .ff-sp-h{order:1}.ff-sp>.ff-slot{order:2;margin-bottom:0}.ff-sp-body{order:3}.ff-sp-foot{order:4}
  .ff-sp-pane{scroll-margin-top:calc(var(--ff-head) + 72px)}
  .ff-sp-h h3{font-size:clamp(2rem,9vw,2.6rem)}
  .ff-sp-body{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ff-sp-body .ff-sp-col:first-child{grid-column:1/-1}
  .ff-points--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ff-datasheet{grid-template-columns:1fr}
}
@media (max-width:599px){
  .ff-sp-body,.ff-points--4{grid-template-columns:1fr}
  .ff-sp-foot{flex-direction:column;align-items:stretch}
  /* azioni su due righe se non ci stanno (niente pulsanti tagliati) */
  .ff-page .ff-scene .ff-sp-foot .ff-actions,.ff-page .ff-scene.ff-hero .ff-actions{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;margin-inline:0;padding-inline:0}
  .ff-ds-col dl div{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .ff-swap,.ff-sect-list [role="tab"]::after{transition:none}
}