/* =====================================================================
   FF Theme · blog: copertine disegnate in CSS e schede degli articoli (archivio, articolo, correlati)
   Dai concept pagine/federicofloris-articoli-concept.html e federicofloris-articolo-concept.html.
   Ogni argomento ha le sue composizioni (v0, v1, v2) e in più i simboli (v3), validi per tutte le categorie;
   le variabili --a…--f (0..1, dallo slug: inc/blog.php) cambiano posizioni, misure e tinta.
   Misure in cqi: la copertina scala con il suo riquadro (scheda piccola, copertina grande, immagine 1200×630).
   Caricato da archivio e articolo (inc/blog.php).
   ===================================================================== */

.ff-cov{--mx:0;--my:0;position:relative;display:block;aspect-ratio:16/10;overflow:hidden;container-type:inline-size;isolation:isolate}
.ff-cov .l{position:absolute;display:block;transition:transform 700ms var(--ff-ease-out)}
/* parallasse leggera degli strati col mouse (blog.js imposta --mx e --my) */
.ff-cov .l1{transform:translate(calc(var(--mx) * -8px),calc(var(--my) * -8px))}
.ff-cov .l2{transform:translate(calc(var(--mx) * 12px),calc(var(--my) * 12px))}
.ff-cov .l3{transform:translate(calc(var(--mx) * 20px),calc(var(--my) * 20px))}
.ff-cov .l4{transform:translate(calc(var(--mx) * 28px),calc(var(--my) * 28px))}

/* ===== Servizi · pannelli di vetro su fondo scuro, una luce colorata ===== */
.ff-cov--servizi{background:radial-gradient(120% 90% at calc(30% + var(--a) * 50%) 0%,hsl(calc(215 + var(--b) * 70) 32% 20%),#0c0d12 62%)}
.ff-cov--servizi.v0 .l3{left:calc(40% + var(--c) * 40%);top:calc(-10% + var(--d) * 30%);width:52cqi;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,hsl(calc(215 + var(--b) * 70) 80% 62% / .7),transparent 66%);filter:blur(10px)}
.ff-cov--servizi.v0 .l1{left:calc(8% + var(--a) * 14%);top:calc(18% + var(--e) * 16%);width:calc(46% + var(--c) * 14%);height:52%;border-radius:2.4cqi;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ff-cov--servizi.v0 .l2{left:calc(36% + var(--d) * 22%);top:calc(36% + var(--f) * 14%);width:34%;height:40%;border-radius:2.4cqi;border:1px solid rgba(255,255,255,.18);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2cqi 6cqi rgba(0,0,0,.35)}
.ff-cov--servizi.v0 .l4{left:calc(12% + var(--a) * 14%);bottom:calc(10% + var(--f) * 6%);width:18cqi;height:3.2cqi;border-radius:999px;background:var(--ff-magenta)}
/* Servizi 2 · una finestra del browser con il blocco principale colorato */
.ff-cov--servizi.v1 .l1{left:9%;top:13%;width:82%;height:80%;border-radius:2cqi;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.ff-cov--servizi.v1 .l2{left:9%;top:13%;width:82%;height:8%;border-radius:2cqi 2cqi 0 0;background:rgba(255,255,255,.1)}
.ff-cov--servizi.v1 .l3{left:calc(15% + var(--a) * 8%);top:30%;width:calc(38% + var(--c) * 16%);height:36%;border-radius:1.4cqi;background:linear-gradient(135deg,hsl(calc(215 + var(--b) * 90) 70% 58%),hsl(calc(270 + var(--d) * 60) 60% 40%))}
.ff-cov--servizi.v1 .l4{left:calc(15% + var(--a) * 8%);top:73%;width:16cqi;height:3.2cqi;border-radius:999px;background:var(--ff-magenta);box-shadow:20cqi 0 0 rgba(255,255,255,.14)}
/* Servizi 3 · anelli concentrici e una scheda di vetro */
.ff-cov--servizi.v2 .l1{left:calc(44% + var(--a) * 16%);top:50%;width:64cqi;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 7cqi rgba(255,255,255,.03),0 0 0 14cqi rgba(255,255,255,.02)}
.ff-cov--servizi.v2 .l2{left:calc(44% + var(--a) * 16%);top:50%;width:30cqi;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(255,255,255,.3)}
.ff-cov--servizi.v2 .l3{left:calc(30% + var(--c) * 30%);top:calc(10% + var(--d) * 30%);width:44cqi;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,hsl(calc(215 + var(--b) * 90) 80% 62% / .6),transparent 66%);filter:blur(10px)}
.ff-cov--servizi.v2 .l4{left:8%;bottom:10%;width:30%;height:28%;border-radius:2cqi;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ===== Settori · un arco e un sole caldi, su un orizzonte ===== */
.ff-cov--settori{background:linear-gradient(180deg,hsl(calc(18 + var(--a) * 26) 48% 90%),hsl(calc(18 + var(--a) * 26) 38% 80%))}
.ff-cov--settori.v0 .l1{left:calc(14% + var(--b) * 40%);bottom:-1%;width:calc(26% + var(--c) * 10%);height:calc(62% + var(--d) * 18%);border-radius:999px 999px 0 0;background:linear-gradient(180deg,hsl(calc(10 + var(--e) * 30) 62% 62%),hsl(calc(0 + var(--e) * 20) 52% 38%))}
.ff-cov--settori.v0 .l2{left:calc(8% + var(--f) * 70%);top:calc(10% + var(--a) * 18%);width:calc(10cqi + var(--b) * 6cqi);aspect-ratio:1;border-radius:50%;background:hsl(calc(36 + var(--c) * 14) 92% 60%);box-shadow:0 0 0 2cqi hsl(calc(36 + var(--c) * 14) 92% 60% / .22)}
.ff-cov--settori.v0 .l3{left:0;right:0;bottom:18%;height:1px;background:rgba(40,25,15,.35)}
/* (lo strato 4 della composizione 1 non si usa: un rettangolo trasparente sull orizzonte non diceva nulla) */
.ff-cov--settori.v0 .l4{display:none}
/* Settori 2 · colonnato: due archi e la luna */
.ff-cov--settori.v1{background:linear-gradient(180deg,hsl(calc(220 + var(--a) * 30) 30% 24%),hsl(calc(15 + var(--a) * 20) 40% 46%))}
.ff-cov--settori.v1 .l1,.ff-cov--settori.v1 .l2{bottom:-1%;width:22%;border-radius:999px 999px 0 0;background:linear-gradient(180deg,hsl(calc(28 + var(--e) * 20) 60% 70%),hsl(calc(14 + var(--e) * 20) 46% 42%))}
.ff-cov--settori.v1 .l1{left:calc(18% + var(--b) * 10%);height:calc(56% + var(--c) * 12%)}
.ff-cov--settori.v1 .l2{left:calc(46% + var(--b) * 10%);height:calc(66% + var(--d) * 12%)}
.ff-cov--settori.v1 .l3{left:calc(70% + var(--f) * 14%);top:calc(12% + var(--a) * 14%);width:9cqi;aspect-ratio:1;border-radius:50%;box-shadow:inset -2.4cqi -.6cqi 0 hsl(48 70% 84%)}
.ff-cov--settori.v1 .l4{left:0;right:0;bottom:0;height:12%;background:rgba(0,0,0,.18)}
/* Settori 3 · mare: due onde, il sole e una vela */
.ff-cov--settori.v2{background:linear-gradient(180deg,hsl(calc(190 + var(--a) * 20) 55% 82%),hsl(calc(30 + var(--a) * 20) 70% 86%))}
.ff-cov--settori.v2 .l1{left:calc(56% + var(--b) * 26%);top:calc(14% + var(--c) * 14%);width:14cqi;aspect-ratio:1;border-radius:50%;background:hsl(calc(30 + var(--d) * 16) 92% 62%)}
.ff-cov--settori.v2 .l2{left:-10%;right:-10%;bottom:-8%;height:44%;border-radius:50% 50% 0 0 / 40% 40% 0 0;background:hsl(calc(196 + var(--e) * 20) 52% 46%)}
.ff-cov--settori.v2 .l3{left:-20%;right:-4%;bottom:-14%;height:32%;border-radius:50% 50% 0 0 / 46% 46% 0 0;background:hsl(calc(204 + var(--e) * 20) 54% 32%)}
.ff-cov--settori.v2 .l4{left:calc(18% + var(--f) * 30%);bottom:38%;width:9cqi;height:13cqi;clip-path:polygon(50% 0,100% 100%,0 100%);background:#fff8ef}
/* =====================================================================
   SIMBOLI (composizione v3) · in tutte le categorie: il simbolo prende il posto delle tre composizioni,
   lo sfondo resta quello della categoria. Tela 100cqi × 62,5cqi (16:10); orizzonte delle copertine chiare all'84%.
   Selettori .ff-cov.v3.sym-… (quattro classi): vincono sempre sulla regola comune che centra gli strati.
   --ink = colore del disegno: scuro sulle categorie chiare (Settori, Costi e scelte), chiaro su quelle scure.
   ===================================================================== */
.ff-cov.v3{--ink:#2b2420}
.ff-cov--servizi.v3,.ff-cov--tecnica.v3{--ink:#ece7e0}
.ff-cov--settori.v3{background:linear-gradient(transparent calc(84% - 1px),rgba(40,25,15,.3) 84%,transparent calc(84% + 1px)),linear-gradient(180deg,hsl(calc(18 + var(--a) * 26) 48% 90%),hsl(calc(18 + var(--a) * 26) 38% 80%))}
.ff-cov.v3 .l{left:50%;top:52%;translate:-50% -50%}

/* --- Sito vetrina: finestra del browser, hero con titolo e pulsante magenta, tre colonne --- */
.ff-cov.v3.sym-sito .l,.ff-cov.v3.sym-blog .l,.ff-cov.v3.sym-shop .l{translate:none}
.ff-cov.v3.sym-sito .l1,.ff-cov.v3.sym-blog .l1,.ff-cov.v3.sym-shop .l1{left:13cqi;top:8cqi;width:74cqi;height:47cqi;border:1px solid color-mix(in srgb,var(--ink) 24%,transparent);border-radius:1.6cqi;
  background:radial-gradient(circle at 2.6cqi 2.2cqi,color-mix(in srgb,var(--ink) 45%,transparent) .6cqi,transparent .7cqi),radial-gradient(circle at 4.8cqi 2.2cqi,color-mix(in srgb,var(--ink) 45%,transparent) .6cqi,transparent .7cqi),radial-gradient(circle at 7cqi 2.2cqi,color-mix(in srgb,var(--ink) 45%,transparent) .6cqi,transparent .7cqi),
  linear-gradient(color-mix(in srgb,var(--ink) 10%,transparent) 0 4.4cqi,color-mix(in srgb,var(--ink) 4%,transparent) 0)}
.ff-cov.v3.sym-sito .l2{left:17cqi;top:16cqi;width:66cqi;height:19cqi;border-radius:1cqi;
  background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)) 3.4cqi 4.6cqi/28cqi 1.8cqi no-repeat,linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) 3.4cqi 8.4cqi/19cqi 1.2cqi no-repeat,
  linear-gradient(135deg,hsl(calc(215 + var(--b) * 90) 70% 58%),hsl(calc(270 + var(--d) * 60) 60% 40%))}
.ff-cov.v3.sym-sito .l3{left:20.4cqi;top:28cqi;width:11cqi;height:3.2cqi;border-radius:999px;background:var(--ff-magenta)}
.ff-cov.v3.sym-sito .l4{left:17cqi;top:38.5cqi;width:20.6cqi;height:12cqi;border-radius:.8cqi;background:color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:22.7cqi 0 0 color-mix(in srgb,var(--ink) 12%,transparent),45.4cqi 0 0 color-mix(in srgb,var(--ink) 12%,transparent)}

/* --- Blog: tre articoli con miniatura (il primo in evidenza, magenta) e la barra laterale --- */
.ff-cov.v3.sym-blog .l2{left:17cqi;top:15cqi;width:13cqi;height:9cqi;border-radius:.6cqi;background:var(--ff-magenta);box-shadow:0 13cqi 0 color-mix(in srgb,var(--ink) 16%,transparent),0 26cqi 0 color-mix(in srgb,var(--ink) 16%,transparent)}
.ff-cov.v3.sym-blog .l3{left:33cqi;top:15cqi;width:31cqi;height:36cqi;
  background:linear-gradient(color-mix(in srgb,var(--ink) 80%,transparent),color-mix(in srgb,var(--ink) 80%,transparent)) 0 1cqi/29cqi 1.7cqi no-repeat,linear-gradient(color-mix(in srgb,var(--ink) 35%,transparent),color-mix(in srgb,var(--ink) 35%,transparent)) 0 4.6cqi/23cqi 1.1cqi no-repeat,linear-gradient(color-mix(in srgb,var(--ink) 35%,transparent),color-mix(in srgb,var(--ink) 35%,transparent)) 0 7cqi/17cqi 1.1cqi no-repeat,
  linear-gradient(color-mix(in srgb,var(--ink) 80%,transparent),color-mix(in srgb,var(--ink) 80%,transparent)) 0 14cqi/26cqi 1.7cqi no-repeat,linear-gradient(color-mix(in srgb,var(--ink) 35%,transparent),color-mix(in srgb,var(--ink) 35%,transparent)) 0 17.6cqi/21cqi 1.1cqi no-repeat,linear-gradient(color-mix(in srgb,var(--ink) 35%,transparent),color-mix(in srgb,var(--ink) 35%,transparent)) 0 20cqi/15cqi 1.1cqi no-repeat,
  linear-gradient(color-mix(in srgb,var(--ink) 80%,transparent),color-mix(in srgb,var(--ink) 80%,transparent)) 0 27cqi/28cqi 1.7cqi no-repeat,linear-gradient(color-mix(in srgb,var(--ink) 35%,transparent),color-mix(in srgb,var(--ink) 35%,transparent)) 0 30.6cqi/24cqi 1.1cqi no-repeat,linear-gradient(color-mix(in srgb,var(--ink) 35%,transparent),color-mix(in srgb,var(--ink) 35%,transparent)) 0 33cqi/12cqi 1.1cqi no-repeat}
.ff-cov.v3.sym-blog .l4{left:67cqi;top:15cqi;width:16cqi;height:35cqi;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:.6cqi;
  background:linear-gradient(color-mix(in srgb,var(--ink) 40%,transparent),color-mix(in srgb,var(--ink) 40%,transparent)) 2.4cqi 3cqi/8cqi 1.2cqi no-repeat,
  repeating-linear-gradient(transparent 0 7cqi,color-mix(in srgb,var(--ink) 20%,transparent) 7cqi calc(7cqi + 1px),transparent calc(7cqi + 1px) 9cqi) 2.4cqi 0/11cqi 100% no-repeat}

/* --- E-commerce: griglia di prodotti (uno scelto, magenta) con il prezzo e la borsa della spesa --- */
.ff-cov.v3.sym-shop .l2{left:17cqi;top:15cqi;width:19cqi;height:12cqi;border-radius:.6cqi;background:color-mix(in srgb,var(--ink) 16%,transparent);
  box-shadow:22cqi 0 0 var(--ff-magenta),44cqi 0 0 color-mix(in srgb,var(--ink) 16%,transparent),0 18cqi 0 color-mix(in srgb,var(--ink) 16%,transparent),22cqi 18cqi 0 color-mix(in srgb,var(--ink) 16%,transparent),44cqi 18cqi 0 color-mix(in srgb,var(--ink) 16%,transparent)}
.ff-cov.v3.sym-shop .l3{left:17cqi;top:28.6cqi;width:63cqi;height:20cqi;
  background:linear-gradient(color-mix(in srgb,var(--ink) 55%,transparent),color-mix(in srgb,var(--ink) 55%,transparent)) 0 0/11cqi 1.2cqi no-repeat,linear-gradient(var(--ff-magenta),var(--ff-magenta)) 22cqi 0/11cqi 1.2cqi no-repeat,linear-gradient(color-mix(in srgb,var(--ink) 55%,transparent),color-mix(in srgb,var(--ink) 55%,transparent)) 44cqi 0/11cqi 1.2cqi no-repeat,
  linear-gradient(color-mix(in srgb,var(--ink) 55%,transparent),color-mix(in srgb,var(--ink) 55%,transparent)) 0 18cqi/11cqi 1.2cqi no-repeat,linear-gradient(color-mix(in srgb,var(--ink) 55%,transparent),color-mix(in srgb,var(--ink) 55%,transparent)) 22cqi 18cqi/11cqi 1.2cqi no-repeat,linear-gradient(color-mix(in srgb,var(--ink) 55%,transparent),color-mix(in srgb,var(--ink) 55%,transparent)) 44cqi 18cqi/11cqi 1.2cqi no-repeat}
.ff-cov.v3.sym-shop .l4{left:79cqi;top:3.4cqi;width:12cqi;aspect-ratio:1;border-radius:50%;box-shadow:0 1.4cqi 4cqi rgba(0,0,0,.35);
  background:linear-gradient(#fff,#fff) 50% 66%/4.8cqi 3.8cqi no-repeat,radial-gradient(circle at 50% 46%,transparent 1.2cqi,#fff 1.25cqi 1.7cqi,transparent 1.75cqi),var(--ff-magenta)}

/* --- Agriturismo: montagne verdi dietro, la collina, il casale con la porta magenta, il sole --- */
.ff-cov.v3.sym-farm .l{translate:none}
.ff-cov.v3.sym-farm .l1{left:-4cqi;top:14cqi;width:108cqi;height:38.6cqi;clip-path:polygon(0 100%,0 62%,22% 18%,34% 40%,52% 0,70% 34%,80% 22%,100% 58%,100% 100%);background:linear-gradient(180deg,hsl(calc(120 + var(--b) * 30) 24% 40%),hsl(calc(110 + var(--b) * 30) 30% 30%))}
.ff-cov.v3.sym-farm .l2{left:-10cqi;top:40cqi;width:120cqi;height:24cqi;border-radius:50% 50% 0 0 / 100% 100% 0 0;background:hsl(calc(90 + var(--c) * 20) 36% 54%)}
.ff-cov.v3.sym-farm .l3{left:calc(28cqi + var(--d) * 22cqi);top:34cqi;width:18cqi;height:13cqi;clip-path:polygon(0 38%,50% 0,100% 38%,100% 100%,0 100%);
  background:linear-gradient(var(--ff-magenta),var(--ff-magenta)) 50% 100%/3.4cqi 5.6cqi no-repeat,linear-gradient(#fffaf2,#fffaf2) 22% 62%/2.8cqi 2.8cqi no-repeat,linear-gradient(#fffaf2,#fffaf2) 78% 62%/2.8cqi 2.8cqi no-repeat,linear-gradient(180deg,hsl(14 52% 52%) 0 38%,hsl(30 40% 82%) 38%)}
.ff-cov.v3.sym-farm .l4{left:calc(66cqi + var(--e) * 14cqi);top:6cqi;width:10cqi;aspect-ratio:1;border-radius:50%;background:hsl(calc(36 + var(--c) * 12) 92% 60%);box-shadow:0 0 0 2cqi hsl(calc(36 + var(--c) * 12) 92% 60% / .22)}

/* --- Automobile di profilo (carrozzerie: magenta) e auto della scuola guida (scura, insegna sul tetto) --- */
.ff-cov.v3.sym-car .l,.ff-cov.v3.sym-drive .l{translate:none}
.ff-cov.v3.sym-car .l1,.ff-cov.v3.sym-drive .l1{left:18cqi;top:26cqi;width:64cqi;height:21.5cqi;background:var(--ff-magenta);
  /* sagoma con i finestrini ritagliati (evenodd): bordi paralleli a parabrezza e lunotto, montanti di spessore simile */
  clip-path:polygon(evenodd,0 82%,1% 56%,8% 46%,27% 40%,37% 10%,45% 3%,66% 3%,76% 12%,87% 40%,97% 47%,100% 60%,100% 84%,96% 88%,4% 88%,0 82%,
    33.5% 41%,43% 11.5%,57% 11.5%,57% 41%,33.5% 41%,0 82%,
    60.5% 41%,60.5% 11.5%,70.5% 11.5%,81% 41%,60.5% 41%,0 82%)}
.ff-cov.v3.sym-drive .l1{background:var(--ink)}
/* niente finestrini sovrapposti: sono vuoti nella sagoma */
.ff-cov.v3.sym-car .l2,.ff-cov.v3.sym-drive .l2{display:none}
.ff-cov.v3.sym-car .l3,.ff-cov.v3.sym-car .l4,.ff-cov.v3.sym-drive .l3,.ff-cov.v3.sym-drive .l4{top:40.5cqi;width:12cqi;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--ff-magenta) 0 1.3cqi,#8c8278 1.4cqi 3.4cqi,var(--ink) 3.5cqi)}
.ff-cov.v3.sym-drive .l3,.ff-cov.v3.sym-drive .l4{background:radial-gradient(circle,var(--ff-magenta) 0 1.3cqi,#cfc6bb 1.4cqi 3.4cqi,#1b1714 3.5cqi)}
.ff-cov.v3.sym-car .l3,.ff-cov.v3.sym-drive .l3{left:25.6cqi}
.ff-cov.v3.sym-car .l4,.ff-cov.v3.sym-drive .l4{left:61.4cqi}
/* scuola guida: insegna magenta sul tetto (carrozzeria e finestrini sono ritagliati: la disegna la ruota posteriore) */
.ff-cov.v3.sym-drive .l3::before{content:"";position:absolute;left:21.9cqi;top:-18cqi;width:12cqi;height:3.8cqi;border-radius:.8cqi .8cqi 0 0;background:var(--ff-magenta)}

/* --- Ruota: copertone e mozzo magenta, essenziale --- */
.ff-cov.v3.sym-wheel .l1{width:38cqi;aspect-ratio:1;border-radius:50%;border:8cqi solid var(--ink);background:color-mix(in srgb,var(--ink) 10%,transparent)}
.ff-cov.v3.sym-wheel .l2{width:7cqi;aspect-ratio:1;border-radius:50%;background:var(--ff-magenta)}
.ff-cov.v3.sym-wheel .l3,.ff-cov.v3.sym-wheel .l4{display:none}

/* --- Ingranaggio: ruota dentata scura con il mozzo forato e un ingranaggio magenta che ingrana --- */
.ff-cov.v3.sym-gear .l1,.ff-cov.v3.sym-gear .l3{border-radius:50%;
  -webkit-mask:radial-gradient(circle,transparent 0 17%,#000 17.5% 70%,transparent 70.5%);mask:radial-gradient(circle,transparent 0 17%,#000 17.5% 70%,transparent 70.5%)}
.ff-cov.v3.sym-gear .l1{margin-left:-7cqi;width:36cqi;aspect-ratio:1;rotate:calc(var(--c) * 30deg);
  background:radial-gradient(circle,var(--ink) 0 58%,transparent 58.5%),repeating-conic-gradient(var(--ink) 0 15deg,transparent 15deg 30deg)}
.ff-cov.v3.sym-gear .l3{margin-left:15.6cqi;margin-top:-12cqi;width:21cqi;aspect-ratio:1;rotate:calc(var(--c) * -40deg + 11deg);
  background:radial-gradient(circle,var(--ff-magenta) 0 54%,transparent 54.5%),repeating-conic-gradient(var(--ff-magenta) 0 18deg,transparent 18deg 36deg)}
.ff-cov.v3.sym-gear .l2,.ff-cov.v3.sym-gear .l4{display:none}

/* --- Piatto con coltello e forchetta (stessa misura) --- */
.ff-cov.v3.sym-plate .l1{width:40cqi;aspect-ratio:1;border-radius:50%;background:#fffaf2;box-shadow:0 2cqi 5cqi rgba(60,35,20,.18)}
.ff-cov.v3.sym-plate .l2{width:27cqi;aspect-ratio:1;border-radius:50%;border:1px solid rgba(60,35,20,.18)}
.ff-cov.v3.sym-plate .l3,.ff-cov.v3.sym-plate .l4{width:1.4cqi;height:30cqi;border-radius:999px}
.ff-cov.v3.sym-plate .l3{margin-left:-28cqi;background:var(--ink)}
.ff-cov.v3.sym-plate .l4{margin-left:28cqi;background:var(--ff-magenta)}

/* --- Manubrio --- */
.ff-cov.v3.sym-dumbbell .l1{width:40cqi;height:2.2cqi;border-radius:999px;background:var(--ink)}
.ff-cov.v3.sym-dumbbell .l2{margin-left:-20cqi;width:6cqi;height:26cqi;border-radius:1cqi;background:var(--ff-magenta);box-shadow:-6.5cqi 0 0 -2cqi var(--ff-magenta)}
.ff-cov.v3.sym-dumbbell .l3{margin-left:20cqi;width:6cqi;height:26cqi;border-radius:1cqi;background:var(--ff-magenta);box-shadow:6.5cqi 0 0 -2cqi var(--ff-magenta)}
.ff-cov.v3.sym-dumbbell .l4{display:none}

/* --- Edifici con le finestre (skyline): le altezze cambiano da articolo ad articolo --- */
.ff-cov.v3.sym-building .l{translate:none;top:auto;bottom:16%;background-position:calc(var(--w) * .225) calc(var(--h) * .29)}
.ff-cov.v3.sym-building .l1{--w:4.2cqi;--h:5.2cqi;left:39.9%;width:16.2cqi;height:calc(34cqi + var(--b) * 8cqi);border:1.8cqi solid var(--ink);border-bottom:0;background-color:var(--ink);background-image:conic-gradient(at 55% 42%,var(--ink) 75%,rgba(255,236,205,.82) 0);background-size:var(--w) var(--h)}
.ff-cov.v3.sym-building .l2{--w:3.4cqi;--h:4.4cqi;left:58.1%;width:13.2cqi;height:calc(22cqi + var(--c) * 6cqi);border:1.5cqi solid #6b625a;border-bottom:0;background-color:#6b625a;background-image:conic-gradient(at 55% 42%,#6b625a 75%,rgba(255,236,205,.5) 0);background-size:var(--w) var(--h)}
.ff-cov.v3.sym-building .l3{--w:3.2cqi;--h:4.2cqi;left:28.7%;width:9.2cqi;height:calc(14cqi + var(--d) * 5cqi);border:1.4cqi solid #8c8278;border-bottom:0;background-color:#8c8278;background-image:conic-gradient(at 55% 42%,#8c8278 75%,rgba(255,236,205,.45) 0);background-size:var(--w) var(--h)}
.ff-cov.v3.sym-building .l4{left:calc(39.9% + 6.1cqi);width:4cqi;height:6cqi;background:var(--ff-magenta)}

/* --- Fedi --- */
.ff-cov.v3.sym-rings .l1{margin-left:-7cqi;width:26cqi;aspect-ratio:1;border-radius:50%;border:2.2cqi solid hsl(42 70% 52%)}
.ff-cov.v3.sym-rings .l2{margin-left:7cqi;width:26cqi;aspect-ratio:1;border-radius:50%;border:2.2cqi solid var(--ff-magenta)}
.ff-cov.v3.sym-rings .l3{top:24%;margin-left:-7cqi;width:4cqi;aspect-ratio:1;rotate:45deg;background:#fffaf2;box-shadow:0 0 2cqi #fff}
.ff-cov.v3.sym-rings .l4{display:none}

/* --- Bilancia --- */
.ff-cov.v3.sym-scales .l1{top:54%;width:1.2cqi;height:40cqi;background:var(--ink)}
.ff-cov.v3.sym-scales .l2{top:24%;width:50cqi;height:1.2cqi;background:var(--ink);rotate:calc(-6deg + var(--a) * 12deg)}
.ff-cov.v3.sym-scales .l3{top:33%;margin-left:-22cqi;width:18cqi;height:9cqi;border-radius:0 0 999px 999px;background:#6b625a}
.ff-cov.v3.sym-scales .l4{top:33%;margin-left:22cqi;width:18cqi;height:9cqi;border-radius:0 0 999px 999px;background:var(--ff-magenta)}

/* --- Generici, per qualsiasi categoria · Lucchetto (sicurezza, GDPR, hosting, manutenzione) --- */
.ff-cov.v3.sym-lock .l1{margin-top:-11cqi;width:17cqi;height:16cqi;border:2.4cqi solid var(--ink);border-bottom:0;border-radius:9cqi 9cqi 0 0}
.ff-cov.v3.sym-lock .l2{margin-top:5cqi;width:28cqi;height:21cqi;border-radius:2cqi;background:var(--ff-magenta);box-shadow:0 2cqi 6cqi rgba(0,0,0,.2)}
.ff-cov.v3.sym-lock .l3{margin-top:3.4cqi;width:4.4cqi;aspect-ratio:1;border-radius:50%;background:rgba(20,10,15,.55)}
.ff-cov.v3.sym-lock .l4{margin-top:7.4cqi;width:1.8cqi;height:5cqi;border-radius:999px;background:rgba(20,10,15,.55)}
/* --- Grafico in crescita (SEO, visite, risultati): barre che salgono, l'ultima magenta, e la linea di tendenza --- */
.ff-cov.v3.sym-chart .l1{width:56cqi;height:36cqi;border-left:1px solid color-mix(in srgb,var(--ink) 50%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ink) 50%,transparent)}
.ff-cov.v3.sym-chart .l2{margin-left:-6cqi;margin-top:5cqi;width:36cqi;height:24cqi;
  background:linear-gradient(color-mix(in srgb,var(--ink) 30%,transparent),color-mix(in srgb,var(--ink) 30%,transparent)) 0 100%/6cqi 30% no-repeat,linear-gradient(color-mix(in srgb,var(--ink) 30%,transparent),color-mix(in srgb,var(--ink) 30%,transparent)) 10cqi 100%/6cqi 48% no-repeat,linear-gradient(color-mix(in srgb,var(--ink) 30%,transparent),color-mix(in srgb,var(--ink) 30%,transparent)) 20cqi 100%/6cqi 66% no-repeat,linear-gradient(color-mix(in srgb,var(--ink) 30%,transparent),color-mix(in srgb,var(--ink) 30%,transparent)) 30cqi 100%/6cqi 82% no-repeat}
.ff-cov.v3.sym-chart .l3{margin-left:21cqi;margin-top:5cqi;width:6cqi;height:24cqi;background:linear-gradient(var(--ff-magenta),var(--ff-magenta)) 0 100%/100% 100% no-repeat}
.ff-cov.v3.sym-chart .l4{margin-left:2cqi;margin-top:-3cqi;width:50cqi;height:1.1cqi;border-radius:999px;background:var(--ink);rotate:-26deg}

/* ===== Costi e scelte · colonne di altezze diverse, una accesa ===== */
.ff-cov--scelte{background:linear-gradient(180deg,#efebe4,#e2ddd4)}
.ff-cov--scelte.v0 .l1,.ff-cov--scelte.v0 .l2,.ff-cov--scelte.v0 .l3{bottom:14%;width:13%;border-radius:1.2cqi 1.2cqi 0 0;background:#2b2724}
.ff-cov--scelte.v0 .l1{left:calc(14% + var(--a) * 6%);height:calc(22% + var(--b) * 22%)}
.ff-cov--scelte.v0 .l2{left:calc(36% + var(--c) * 6%);height:calc(34% + var(--d) * 24%);background:#5e5852}
.ff-cov--scelte.v0 .l3{left:calc(58% + var(--e) * 6%);height:calc(48% + var(--f) * 26%);background:var(--ff-magenta)}
.ff-cov--scelte.v0 .l4{left:8%;right:8%;bottom:14%;height:1px;background:#2b2724;box-shadow:0 -12cqi 0 rgba(43,39,36,.12),0 -24cqi 0 rgba(43,39,36,.08)}
/* Costi e scelte 2 · una bilancia */
.ff-cov--scelte.v1 .l1{left:calc(50% - .5cqi);top:24%;width:1cqi;height:58%;background:#2b2724}
.ff-cov--scelte.v1 .l2{left:20%;right:20%;top:24%;height:1cqi;background:#2b2724;rotate:calc(-8deg + var(--a) * 16deg)}
.ff-cov--scelte.v1 .l3,.ff-cov--scelte.v1 .l4{top:calc(30% + var(--b) * 6%);width:20cqi;height:10cqi;border-radius:0 0 999px 999px}
.ff-cov--scelte.v1 .l3{left:13%;background:#5e5852}
.ff-cov--scelte.v1 .l4{right:13%;top:calc(30% + var(--c) * 6%);background:var(--ff-magenta)}
/* Costi e scelte 3 · pile di monete */
.ff-cov--scelte.v2 .l1,.ff-cov--scelte.v2 .l2{bottom:16%;width:18cqi;border-radius:1cqi;background:repeating-linear-gradient(0deg,#2b2724 0 2.2cqi,#4a4540 2.2cqi 2.6cqi)}
.ff-cov--scelte.v2 .l1{left:calc(20% + var(--a) * 6%);height:calc(22% + var(--b) * 14%)}
.ff-cov--scelte.v2 .l2{left:calc(44% + var(--c) * 6%);height:calc(38% + var(--d) * 16%);background:repeating-linear-gradient(0deg,var(--ff-magenta) 0 2.2cqi,#9a1450 2.2cqi 2.6cqi)}
.ff-cov--scelte.v2 .l3{left:calc(70% + var(--e) * 8%);top:calc(18% + var(--f) * 14%);width:13cqi;aspect-ratio:1;border-radius:50%;border:1.4cqi solid #2b2724;background:#efebe4}
.ff-cov--scelte.v2 .l4{left:8%;right:8%;bottom:16%;height:1px;background:#2b2724}

/* ===== Tecnica e SEO · reticolo, una lente e una linea di scansione ===== */
.ff-cov--tecnica{background:linear-gradient(160deg,hsl(calc(200 + var(--a) * 40) 40% 14%),#0b0f16)}
.ff-cov--tecnica.v0 .l1{inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:6cqi 6cqi}
.ff-cov--tecnica.v0 .l2{left:calc(22% + var(--b) * 40%);top:calc(16% + var(--c) * 22%);width:calc(24cqi + var(--d) * 8cqi);aspect-ratio:1;border-radius:50%;border:.6cqi solid hsl(calc(170 + var(--e) * 60) 70% 62%);background:radial-gradient(circle,hsl(calc(170 + var(--e) * 60) 70% 62% / .18),transparent 70%)}
.ff-cov--tecnica.v0 .l3{left:calc(22% + var(--b) * 40% + 20cqi);top:calc(16% + var(--c) * 22% + 20cqi);width:12cqi;height:.8cqi;border-radius:999px;background:hsl(calc(170 + var(--e) * 60) 70% 62%);transform-origin:left;rotate:45deg}
.ff-cov--tecnica.v0 .l4{left:0;right:0;top:calc(30% + var(--f) * 50%);height:1px;background:var(--ff-magenta);box-shadow:0 0 2cqi var(--ff-magenta)}
/* Tecnica 2 · il codice: </> grande e righe · Tecnica 3 · un indicatore di prestazioni (reticolo in comune) */
.ff-cov--tecnica.v1 .l1,.ff-cov--tecnica.v2 .l1{inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:6cqi 6cqi}
.ff-cov--tecnica.v1 .l2{left:calc(10% + var(--b) * 12%);top:calc(12% + var(--c) * 12%);font:500 24cqi/1 var(--ff-mono);color:hsl(calc(170 + var(--e) * 60) 70% 62%);letter-spacing:-.04em}
.ff-cov--tecnica.v1 .l2::before{content:"</>"}
.ff-cov--tecnica.v1 .l3{left:calc(10% + var(--b) * 12%);bottom:18%;width:40%;height:1cqi;border-radius:999px;background:rgba(255,255,255,.22);box-shadow:0 -4cqi 0 rgba(255,255,255,.14),0 4cqi 0 rgba(255,255,255,.1)}
.ff-cov--tecnica.v1 .l4{right:12%;top:30%;width:1.2cqi;height:14cqi;background:var(--ff-magenta);animation:ff-cov-blink 1.2s steps(2) infinite}
@keyframes ff-cov-blink{50%{opacity:0}}
.ff-cov--tecnica.v2 .l2{left:50%;top:64%;width:52cqi;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.6cqi solid hsl(calc(140 + var(--e) * 40) 60% 52%);border-bottom-color:transparent;border-left-color:rgba(255,255,255,.14);rotate:45deg}
.ff-cov--tecnica.v2 .l3{left:50%;top:64%;width:20cqi;height:.9cqi;border-radius:999px;background:#fff;transform-origin:left center;rotate:calc(-150deg + var(--b) * 100deg)}
.ff-cov--tecnica.v2 .l4{left:50%;top:64%;width:4cqi;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--ff-magenta)}

/* ===== Scheda articolo (archivio, correlati) ===== */
.ff-post{min-width:0}
.ff-post a{display:grid;grid-template-rows:auto 1fr;height:100%;text-decoration:none;color:var(--fg);border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 55%,transparent);transition:border-color var(--ff-t-mid),transform var(--ff-t-mid) var(--ff-ease-out)}
.ff-post a:hover{border-color:color-mix(in srgb,var(--fg) 40%,transparent);transform:translateY(-3px)}
.ff-post-b{display:flex;flex-direction:column;gap:10px;padding:clamp(16px,1.8vw,22px);min-width:0}
.ff-post-b small{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.ff-post-b b{font-size:1.12rem;font-weight:600;letter-spacing:-.015em;line-height:1.25;text-wrap:balance;overflow-wrap:break-word}
.ff-post-b i{margin-top:auto;padding-top:6px;font:400 .68rem/1 var(--ff-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transition:color var(--ff-t-fast)}
.ff-post a:hover .ff-post-b i{color:var(--accent)}
.ff-post .ff-cov{border-bottom:1px solid var(--line)}
/* schede che entrano quando compaiono (filtri, «Mostra altri») */
.ff-post-in{animation:ff-post-in 560ms var(--ff-ease-out) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes ff-post-in{from{opacity:0;transform:translateY(14px)}}

@media (prefers-reduced-motion:reduce){
  .ff-cov .l{transition:none}
  .ff-cov--tecnica.v1 .l4{animation:none}
  .ff-post-in{animation:none}
  .ff-post a:hover{transform:none}
}