/* CLIS — scheda di stile del sito eclisis.it · Grafica, Prova 7 (25/10/2026)
   Ogni misura nasce dalla sezione aurea (φ = 1,618) o dalla serie di Fibonacci.
   Caratteri: Unbounded (titoli, pulsanti) · Space Grotesk (testo). Colori: nero, bianco, verde, rosso. Angoli vivi. */
:root{
  --nero:#0A0A0A;--bianco:#FFFFFF;--verde:#7CFF00;--rosso:#E0372D;
  --grigio:rgba(255,255,255,.62);--grigio-c:rgba(10,10,10,.62);
  --filo:rgba(255,255,255,.16);--filo-c:rgba(10,10,10,.16);
  --ft:"Unbounded","Helvetica Neue",Arial,sans-serif;
  --fs:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  /* spazi: Fibonacci */
  --s1:8px;--s2:13px;--s3:21px;--s4:34px;--s5:55px;--s6:89px;--s7:144px;
  /* caratteri: scala φ su 16 px */
  --t0:16px;--t1:26px;--t2:42px;--t3:68px;--t4:110px;--t5:178px;
  /* tempi: φ */
  --m1:.38s;--m2:.62s;--m3:1s;--m4:1.618s;--curva:cubic-bezier(.22,.68,.18,1);
  --margine:var(--s5);--larg:1440px;
  color-scheme:dark}
@media (max-width:760px){:root{--margine:var(--s3)}}
*{box-sizing:border-box}
html{background:var(--nero);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nero);color:var(--bianco);font-family:var(--fs);font-size:var(--t0);line-height:1.618;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--verde);color:var(--nero)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--verde);outline-offset:4px}

/* ---------- Testata ---------- */
.testa{position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + var(--s3)) var(--margine) 0}
.testa .logo img{width:89px;height:auto}
.vocimenu{display:flex;gap:var(--s4);align-items:center}
.vocimenu a,.apri{font-family:var(--ft);font-weight:500;font-size:13px;letter-spacing:.144em;text-transform:uppercase;text-decoration:none;color:var(--bianco);
  padding:var(--s1) 0;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;transition:border-color var(--m1) var(--curva),color var(--m1)}
.vocimenu a:hover,.vocimenu a[aria-current="page"]{border-bottom-color:var(--verde)}
.vocimenu a.ordina{color:var(--rosso)}
.apri{display:none}
@media (max-width:760px){
  .testa .logo img{width:68px}
  .apri{display:block}
  .vocimenu{position:fixed;inset:0;z-index:30;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--s3);padding:var(--s6) var(--margine);
    background:var(--nero);opacity:0;visibility:hidden;transition:opacity var(--m2) var(--curva),visibility 0s linear var(--m2)}
  .vocimenu a{font-size:var(--t2);font-weight:800;letter-spacing:0;padding:0}
  .aperto .vocimenu{opacity:1;visibility:visible;transition:opacity var(--m2) var(--curva)}
  .vocimenu .geo-menu{position:absolute;right:-89px;bottom:-55px;width:377px;opacity:.5;pointer-events:none}
  .apri{position:relative;z-index:31}
}
.vocimenu .geo-menu{display:none}
@media (max-width:760px){.vocimenu .geo-menu{display:block}}

/* ---------- Sezioni: nere e bianche che si alternano, telaio sottile ad angoli vivi ---------- */
.sez{position:relative;padding:var(--s7) var(--margine)}
.sez.nera{background:var(--nero);color:var(--bianco)}
.sez.bianca{background:var(--bianco);color:var(--nero)}
.sez.telaio::before{content:"";position:absolute;inset:var(--s3);border:1px solid var(--filo);pointer-events:none}
.sez.bianca.telaio::before{border-color:var(--filo-c)}
.dentro{position:relative;max-width:var(--larg);margin:0 auto}
@media (max-width:760px){.sez{padding:var(--s6) var(--margine)}.sez.telaio::before{inset:var(--s2)}}

/* ---------- Griglia aurea: 61,8 / 38,2 ---------- */
.aurea{display:grid;grid-template-columns:minmax(0,61.8fr) minmax(0,38.2fr);gap:var(--s5);align-items:center}
.aurea.inversa{grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr)}
.aurea.alto{align-items:start}
@media (max-width:900px){.aurea,.aurea.inversa{grid-template-columns:minmax(0,1fr);gap:var(--s4)}}

/* ---------- Etichetta: simbolo alchemico + parola ---------- */
.etichetta{display:flex;width:fit-content;align-items:center;gap:var(--s2);margin:0 0 var(--s3);font-family:var(--ft);font-weight:500;font-size:13px;letter-spacing:.21em;text-transform:uppercase;color:var(--verde)}
.bianca .etichetta{color:var(--nero)}
.etichetta svg{width:21px;height:21px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5}
.bianca .etichetta svg{stroke:var(--rosso)}
.etichetta a{text-decoration:none}
.etichetta a:hover{color:var(--bianco)}

/* ---------- Titoli: scala φ, una parola d'accento ---------- */
h1,h2,h3{font-family:var(--ft);margin:0;font-weight:800;letter-spacing:-.021em}
.h1{font-size:clamp(var(--t2),7.64vw,var(--t4));line-height:.96;text-transform:uppercase}
.h1.enorme{font-size:clamp(var(--t2),12.36vw,var(--t5))}
.h2{font-size:clamp(var(--t1),4.72vw,var(--t3));line-height:1;text-transform:uppercase}
.h3{font-size:var(--t1);line-height:1.13;text-transform:uppercase}
.accento{color:var(--verde)}
.bianca .accento{color:var(--nero);background:linear-gradient(transparent 61.8%,var(--verde) 61.8%,var(--verde) 90%,transparent 90%)}
.attacco{margin:var(--s4) 0 0;font-size:clamp(19px,1.8vw,var(--t1));line-height:1.382;max-width:28ch;font-weight:400}
.testo{font-size:clamp(var(--t0),1.6vw,22px);line-height:1.618;max-width:38ch;margin:0}
.testo+.testo{margin-top:var(--s3)}
.piccolo{font-size:13px;line-height:1.618;color:var(--grigio);max-width:62ch}
.bianca .piccolo{color:var(--grigio-c)}
.da{color:var(--verde);font-family:var(--fs);font-size:13px;font-weight:500}
.bianca .da{color:var(--rosso)}

/* ---------- Pulsanti: solo scritta con il filo, mai riquadri ---------- */
.vai{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--ft);font-weight:800;font-size:clamp(14px,1.2vw,var(--t0));letter-spacing:.089em;text-transform:uppercase;text-decoration:none;
  color:var(--verde);padding:0 0 var(--s1);border-bottom:2px solid currentColor;transition:color var(--m1) var(--curva),gap var(--m1) var(--curva)}
.vai::after{content:"→";font-family:var(--fs);font-weight:500;transition:transform var(--m1) var(--curva)}
.vai:hover{gap:var(--s3)}
.vai.rosso{color:var(--rosso)}
.vai.bianco{color:var(--bianco)}
.bianca .vai{color:var(--nero)}
.bianca .vai.rosso{color:var(--rosso)}
.vai.grande{font-size:clamp(var(--t1),4.72vw,var(--t3));letter-spacing:-.013em;border-bottom-width:3px;padding-bottom:var(--s2)}
.azioni{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);margin-top:var(--s5)}

/* ---------- Geometrie sacre: linee sottili che si disegnano ---------- */
.geo{fill:none;stroke:var(--verde);stroke-width:1;vector-effect:non-scaling-stroke}
.geo *{vector-effect:non-scaling-stroke}
.bianca .geo{stroke:var(--nero)}
.geo .r{stroke:var(--rosso)}
.geo .tenue{opacity:.38}
.js .geo [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--m4) var(--curva) var(--d,0s)}
.js .geo.in [pathLength]{stroke-dashoffset:0}
.geo text{stroke:none;fill:currentColor;font-family:var(--ft);font-size:13px;letter-spacing:.21em;text-transform:uppercase}

/* ---------- Entrate: dal basso, zoom, in sequenza 0,13 s ---------- */
.js [data-r]{opacity:0;transform:translateY(var(--s3));transition:opacity var(--m2) var(--curva) var(--d,0s),transform var(--m2) var(--curva) var(--d,0s)}
.js [data-r="zoom"]{transform:scale(.944)}
.js [data-r="sx"]{transform:translateX(calc(var(--s4) * -1))}
.js [data-r].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-r]{opacity:1;transform:none;transition:none}
  .js .geo [pathLength]{stroke-dashoffset:0;transition:none}
}

/* ---------- Apertura di pagina ---------- */
.apertura{min-height:min(100svh,987px);display:flex;align-items:center;padding-top:calc(var(--s7) + var(--s4))}
.apertura .dentro{width:100%}
.indice{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:var(--s5) 0 0;padding:0;list-style:none}
.indice a{font-family:var(--ft);font-size:13px;letter-spacing:.144em;text-transform:uppercase;text-decoration:none;color:var(--grigio);border-bottom:1px solid transparent;padding-bottom:4px;transition:color var(--m1),border-color var(--m1)}
.indice a:hover{color:var(--bianco);border-bottom-color:var(--verde)}

/* ---------- Panini ---------- */
.formula{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.formula svg.geo{position:absolute;inset:-11.8%;width:123.6%;height:123.6%;max-width:none}
.formula img{position:relative;width:89%;height:auto;filter:drop-shadow(0 34px 34px rgba(0,0,0,.6))}
.capo{display:grid;grid-template-columns:minmax(0,61.8fr) minmax(0,38.2fr);gap:var(--s5);align-items:end;padding-bottom:var(--s4);border-bottom:1px solid var(--filo);margin-bottom:var(--s5)}
.bianca .capo{border-bottom-color:var(--filo-c)}
.capo .conta{justify-self:end;font-family:var(--ft);font-size:13px;letter-spacing:.21em;text-transform:uppercase;color:var(--grigio)}
.bianca .capo .conta{color:var(--grigio-c)}
.prodotti{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5) var(--s4)}
.prodotti.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.prodotti.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.prodotto{position:relative;display:flex;flex-direction:column}
.prodotto .vetrina{aspect-ratio:1.618/1;display:flex;align-items:center;justify-content:center;margin-bottom:var(--s3);position:relative}
.prodotto .vetrina::before{content:"";position:absolute;width:61.8%;aspect-ratio:1;border:1px solid var(--filo);border-radius:50%;transition:border-color var(--m2) var(--curva),transform var(--m3) var(--curva)}
.bianca .prodotto .vetrina::before{border-color:var(--filo-c)}
.prodotto:hover .vetrina::before{border-color:var(--verde);transform:scale(1.13)}
.bianca .prodotto:hover .vetrina::before{border-color:var(--rosso)}
.prodotto img{position:relative;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 13px 21px rgba(0,0,0,.55));transition:transform var(--m2) var(--curva)}
.prodotto:hover img{transform:translateY(-8px) scale(1.034)}
.prodotto .n{font-family:var(--ft);font-size:11px;letter-spacing:.21em;color:var(--grigio);margin:0 0 var(--s1)}
.bianca .prodotto .n{color:var(--grigio-c)}
.prodotto h3{font-size:var(--t1);line-height:1;color:var(--rosso);letter-spacing:.013em}
.prodotto .frase{margin:var(--s2) 0 0;font-size:var(--t0);line-height:1.382;font-weight:500}
.prodotto .ingr{margin:var(--s1) 0 0;font-size:14px;line-height:1.618;color:var(--grigio)}
.bianca .prodotto .ingr{color:var(--grigio-c)}
.solo{grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr)}
.solo .vetrina{aspect-ratio:1/1}
.solo h3{font-size:var(--t3)}
.solo .frase{font-size:var(--t1);max-width:20ch}
@media (max-width:1100px){.prodotti.c4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .capo{grid-template-columns:1fr;gap:var(--s2)}
  .capo .conta{justify-self:start}
  .prodotti.c4,.prodotti.c3{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4) var(--s3)}
  .prodotto h3{font-size:19px}
  .prodotto .frase{font-size:14px}
  .prodotto .ingr{font-size:13px}
  .solo h3{font-size:var(--t2)}
  .solo .frase{font-size:19px}
}

/* ---------- Locali ---------- */
.vesica{width:100%;max-width:987px;margin:0 auto}
.vesica a{cursor:pointer}
.vesica a text{transition:fill var(--m1)}
.vesica a:hover text{fill:var(--verde)}
.vesica a:hover circle{stroke:var(--verde)}
.locale{padding:var(--s5) 0;border-top:1px solid var(--filo-c)}
.locale:last-child{border-bottom:1px solid var(--filo-c)}
.nera .locale{border-color:var(--filo)}
.locale .dati{margin:var(--s3) 0 0;font-size:var(--t0);line-height:1.618}
.stato{display:inline-flex;align-items:center;gap:var(--s1);margin:var(--s2) 0 0;font-size:14px;font-weight:500}
.stato::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.stato.aperto{color:#3A9900}
.nera .stato.aperto{color:var(--verde)}
.stato.chiuso{color:var(--rosso)}
.cornice-foto{position:relative;aspect-ratio:1.618/1;border:1px solid var(--filo);display:flex;align-items:flex-end;padding:var(--s3)}
.bianca .cornice-foto{border-color:var(--filo-c)}
.cornice-foto svg.geo{position:absolute;inset:0;width:100%;height:100%}
.cornice-foto span{position:relative;font-family:var(--ft);font-size:11px;letter-spacing:.21em;text-transform:uppercase;color:var(--grigio)}
.bianca .cornice-foto span{color:var(--grigio-c)}
table.orari{width:100%;border-collapse:collapse;font-size:var(--t0)}
table.orari th,table.orari td{padding:var(--s2) 0;border-bottom:1px solid var(--filo-c);text-align:left;vertical-align:top}
table.orari th{font-weight:500;width:38.2%;text-transform:capitalize}
table.orari td{color:var(--grigio-c)}
table.orari tr.oggi th,table.orari tr.oggi td{color:var(--nero);font-weight:700}
table.orari tr.oggi th span{background:linear-gradient(transparent 61.8%,var(--verde) 61.8%,var(--verde) 90%,transparent 90%)}
.citazione{font-family:var(--ft);font-weight:800;font-size:clamp(var(--t1),4.2vw,var(--t3));line-height:1.13;text-transform:uppercase;letter-spacing:-.013em;margin:0;max-width:18ch}

/* ---------- Franchising ---------- */
.stelle{position:absolute;right:-8%;top:50%;width:min(61.8vw,880px);transform:translateY(-50%);pointer-events:none}
.tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.tre .simbolo{width:89px;height:89px;margin-bottom:var(--s4)}
.tre h3{margin-bottom:var(--s2)}
.tre p{margin:0;color:var(--grigio);max-width:30ch}
.bianca .tre p{color:var(--grigio-c)}
.cinque{list-style:none;margin:0;padding:0;counter-reset:c}
.cinque li{display:grid;grid-template-columns:55px 1fr;gap:var(--s1) var(--s3);padding:var(--s4) 0;border-top:1px solid var(--filo-c);transition:background var(--m1)}
.cinque li:last-child{border-bottom:1px solid var(--filo-c)}
.cinque .n{grid-row:span 2;font-family:var(--ft);font-weight:800;font-size:var(--t1);line-height:1;color:var(--rosso)}
.cinque h3{font-size:19px}
.cinque p{margin:0;color:var(--grigio-c);max-width:46ch}
.cinque b{color:var(--nero)}
.pentagramma{width:100%;max-width:610px;margin:0 auto;position:sticky;top:var(--s6)}
.pentagramma .punto{transition:r var(--m2) var(--curva),fill var(--m2)}
.pentagramma .punto.acceso{fill:var(--rosso);stroke:var(--rosso)}
.pentagramma text{font-size:21px;letter-spacing:0}
.pacchetti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.pacchetto{aspect-ratio:1/1.618;border:1px solid var(--filo);padding:var(--s4);display:flex;flex-direction:column;justify-content:space-between}
.pacchetto .h3{color:var(--bianco)}
.pacchetto .lettera{font-family:var(--ft);font-weight:800;font-size:var(--t4);line-height:.8;color:var(--verde)}
@media (max-width:900px){
  .tre,.pacchetti{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .pacchetto{aspect-ratio:1.618/1}
  .stelle{position:relative;right:auto;top:auto;transform:none;width:100%;margin-top:var(--s4)}
  .pentagramma{position:relative;top:auto;max-width:377px}
}

/* ---------- Modulo: solo linee ---------- */
.modulo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5)}
.campo{display:flex;flex-direction:column;gap:var(--s1)}
.campo.largo,.consenso,.modulo .invia,.esito{grid-column:1/-1}
.campo label{font-family:var(--ft);font-size:11px;letter-spacing:.21em;text-transform:uppercase;color:var(--verde)}
.modulo input,.modulo select,.modulo textarea{font:inherit;font-size:var(--t0);color:var(--bianco);background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.38);border-radius:0;padding:var(--s2) 0;outline:none;transition:border-color var(--m1)}
.modulo select{appearance:none;-webkit-appearance:none;background:linear-gradient(45deg,transparent 50%,var(--verde) 50%) right 6px center/8px 8px no-repeat}
.modulo select option{background:var(--nero)}
.modulo textarea{min-height:89px;resize:vertical}
.modulo input:focus,.modulo select:focus,.modulo textarea:focus{border-bottom-color:var(--verde)}
.consenso{display:flex;gap:var(--s2);align-items:flex-start;font-size:13px;line-height:1.618;color:var(--grigio)}
.consenso input{margin-top:4px;accent-color:var(--verde)}
.consenso a{color:var(--verde)}
.modulo .invia{justify-self:start;background:none;border:0;border-bottom:3px solid var(--rosso);padding:0 0 var(--s2);color:var(--rosso);font-family:var(--ft);font-weight:800;font-size:var(--t1);letter-spacing:-.013em;text-transform:uppercase;cursor:pointer;transition:color var(--m1)}
.modulo .invia:hover{color:var(--bianco)}
@media (max-width:760px){.modulo{grid-template-columns:1fr}}

/* ---------- Ordina ---------- */
.canali{list-style:none;margin:0;padding:0}
.canali li{display:grid;grid-template-columns:89px 1fr auto;gap:var(--s4);align-items:center;padding:var(--s5) 0;border-top:1px solid var(--filo-c)}
.canali li:last-child{border-bottom:1px solid var(--filo-c)}
.canali .n{font-family:var(--ft);font-weight:800;font-size:var(--t2);line-height:1;color:var(--rosso)}
.canali h3{font-size:clamp(var(--t1),3vw,var(--t2))}
.canali p{margin:var(--s1) 0 0;color:var(--grigio-c);max-width:46ch}
.canali .link{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
@media (max-width:760px){.canali li{grid-template-columns:1fr;gap:var(--s2)}.canali .n{font-size:var(--t1)}}

/* ---------- Piede ---------- */
.piede{background:var(--nero);padding:var(--s6) var(--margine) var(--s5);border-top:1px solid var(--filo)}
.piede .payoff{font-family:var(--ft);font-weight:800;color:var(--rosso);text-transform:uppercase;font-size:clamp(var(--t1),4.72vw,var(--t3));line-height:1;letter-spacing:-.013em;margin:0;max-width:11ch}
.piede .vocipiede{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.piede .vocipiede a{font-family:var(--ft);font-size:13px;letter-spacing:.144em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid transparent}
.piede .vocipiede a:hover{border-bottom-color:var(--verde)}
.piede .vocipiede a.ordina{color:var(--rosso)}
.piede .legale{margin:var(--s6) 0 0;padding-top:var(--s3);border-top:1px solid var(--filo);font-size:11px;line-height:1.618;letter-spacing:.034em;color:rgba(255,255,255,.5)}
.piede .legale a{color:rgba(255,255,255,.72)}
.prova{position:fixed;z-index:40;right:var(--s2);bottom:var(--s1);margin:0;font-family:var(--fs);font-size:10px;letter-spacing:.21em;text-transform:uppercase;color:rgba(255,255,255,.5);mix-blend-mode:difference}
.vesica text{fill:var(--bianco)}
/* modulo su fondo bianco */
.bianca .campo label{color:var(--nero)}
.bianca .modulo input,.bianca .modulo select,.bianca .modulo textarea{color:var(--nero);border-bottom-color:rgba(10,10,10,.38)}
.bianca .modulo input:focus,.bianca .modulo select:focus,.bianca .modulo textarea:focus{border-bottom-color:var(--rosso)}
.bianca .modulo select{background-image:linear-gradient(45deg,transparent 50%,var(--rosso) 50%)}
.bianca .modulo select option{background:var(--bianco)}
.bianca .consenso{color:var(--grigio-c)}
.bianca .consenso a{color:var(--rosso)}
.bianca .consenso input{accent-color:var(--rosso)}
.bianca .modulo .invia:hover{color:var(--nero)}
.bianca .cinque .n{color:var(--rosso)}
.pentagramma{color:var(--nero)}
.pentagramma .punto{fill:var(--bianco)}
.pentagramma .punto.acceso + text{fill:var(--bianco)}
.apertura .formula{margin:0 -5% 0 5%}
@media (max-width:900px){.apertura .formula{margin:var(--s4) 6% 0}}

/* ---------- Scheda di stile ---------- */
.campioni{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.campione .tinta{aspect-ratio:1/1.618;border:1px solid var(--filo-c);display:flex;align-items:flex-end;padding:var(--s3);font-family:var(--ft);font-size:13px;letter-spacing:.144em}
.scala{list-style:none;margin:0;padding:0}
.scala li{display:grid;grid-template-columns:89px minmax(0,1fr) 233px;gap:var(--s4);align-items:baseline;padding:var(--s3) 0;border-top:1px solid var(--filo);overflow:hidden}
.scala .mis,.fib .mis,.tempi .mis{font-family:var(--ft);font-size:13px;letter-spacing:.089em;color:var(--verde);line-height:1.3}
.scala small,.fib small,.tempi small{color:var(--grigio);font-size:11px}
.scala .campione-t{font-family:var(--ft);font-weight:800;text-transform:uppercase;line-height:1;white-space:nowrap;letter-spacing:-.021em}
.fib{list-style:none;margin:0;padding:0}
.fib li{display:grid;grid-template-columns:minmax(0,1fr) 55px 55px;gap:var(--s3);align-items:center;padding:var(--s2) 0;border-top:1px solid var(--filo-c)}
.fib .barra{display:block;height:var(--s3);background:var(--nero)}
.fib li:nth-child(5) .barra{background:var(--rosso)}
.fib .mis{color:var(--nero)}
.fib small{color:var(--grigio-c)}
.dimostra>div{height:89px;border:1px solid var(--filo);display:flex;align-items:flex-end;padding:var(--s2)}
.dimostra>div:first-child{border-color:var(--verde)}
.dimostra.inversa>div:first-child{border-color:var(--filo)}
.dimostra.inversa>div:last-child{border-color:var(--verde)}
.dimostra span{font-family:var(--ft);font-size:11px;letter-spacing:.21em;text-transform:uppercase;color:var(--grigio)}
.libreria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--s4)}
.libreria figure{margin:0}
.libreria svg{width:100%;aspect-ratio:1/1;border:1px solid var(--filo-c);padding:var(--s3)}
.libreria figcaption{display:flex;flex-direction:column;gap:4px;margin-top:var(--s2)}
.tempi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.tempi li{border-top:1px solid var(--verde);padding-top:var(--s2);display:flex;flex-direction:column;gap:4px}
.tempi .mis{font-size:var(--t1);color:var(--bianco);font-weight:800}
.nera .cinque li{border-color:var(--filo)}
.nera .cinque p{color:var(--grigio)}
@media (max-width:900px){
  .campioni{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scala li{grid-template-columns:55px minmax(0,1fr)}
  .scala .uso{grid-column:2}
  .libreria{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
  .tempi{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.sez{overflow-x:clip}
.vocimenu{overflow:hidden}
.h1,.h2,.h3{font-family:var(--ft);font-weight:800;letter-spacing:-.021em;margin:0}
.h1.enorme{font-size:clamp(34px,9.4vw,var(--t5))}
.h2.stretto{font-size:clamp(var(--t1),3vw,var(--t2))}
.pacchetto{aspect-ratio:1.618/1}
@media (max-width:900px){
  .stelle{position:absolute;right:-38%;top:auto;bottom:-8%;width:110%;transform:none;opacity:.5;margin:0}
  .js .stelle[data-r]{opacity:0}.js .stelle[data-r].in{opacity:.5}
}
.prova a{color:inherit}
/* Login in alto a destra: sempre l'ultima voce della testata, in verde */
.testa{gap:var(--s4)}
.testa .vocimenu{margin-left:auto}
.testa .login{font-family:var(--ft);font-weight:500;font-size:13px;letter-spacing:.144em;text-transform:uppercase;text-decoration:none;color:var(--verde);
  padding:var(--s1) 0;border-bottom:2px solid transparent;transition:border-color var(--m1) var(--curva)}
.testa .login:hover{border-bottom-color:var(--verde)}
@media (max-width:760px){.testa .apri{margin-left:auto}.testa{gap:var(--s3)}}
.vesica a circle{fill:transparent;pointer-events:all}

/* ---------- Prova 8: foto da Canva, niente cerchio dietro i prodotti ---------- */
.prodotto .vetrina::before{display:none}
.prodotto img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 13px 21px rgba(0,0,0,.45));transition:transform var(--m2) var(--curva),filter var(--m2) var(--curva)}
.nera .prodotto img{filter:drop-shadow(0 13px 21px rgba(0,0,0,.8))}
.prodotto:hover img{transform:translateY(-13px) scale(1.055) rotate(-1.5deg)}
/* SPARK: il pentagramma gira piano, la scintilla pulsa; al passaggio il panino si alza */
.scintilla{position:relative}
.scintilla::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(224,55,45,.42) 0%,rgba(224,55,45,.12) 38.2%,transparent 61.8%);animation:pulsa 2.618s ease-in-out infinite}
.scintilla svg.geo{animation:gira 34s linear infinite}
.scintilla img{position:relative;width:72%!important;transition:transform var(--m2) var(--curva)}
.scintilla:hover img{transform:translateY(-13px) scale(1.08) rotate(-3deg)}
.scintilla:hover svg.geo{animation-duration:8s}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes pulsa{0%,100%{transform:scale(.89);opacity:.62}50%{transform:scale(1.06);opacity:1}}
@media (prefers-reduced-motion:reduce){.scintilla::before,.scintilla svg.geo{animation:none}}
/* Effetto Maillard */
.soglia{position:relative;aspect-ratio:1/1;max-width:440px;width:100%;justify-self:end;display:flex;align-items:center;justify-content:center}
.soglia svg.geo{position:absolute;inset:0;width:100%;height:100%}
.soglia svg.geo circle:first-child{stroke:var(--rosso)}
.soglia p{position:relative;margin:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s2);background:var(--bianco);padding:var(--s2) var(--s3)}
.soglia .gradi{font-family:var(--ft);font-weight:800;font-size:clamp(var(--t3),8vw,var(--t4));line-height:.9;color:var(--rosso);letter-spacing:-.034em}
.passi p{color:var(--grigio-c)}
.passi .simbolo{width:68px;height:68px;margin-bottom:var(--s3)}
@media (max-width:900px){.soglia{justify-self:center;max-width:320px}}
.prodotto .vetrina{overflow:visible}
.prodotto .vetrina img{position:absolute;inset:0;width:100%!important;height:100%;max-width:none!important;object-fit:contain}
.scintilla img{position:relative;inset:auto;height:auto}
.h1.lungo{font-size:clamp(var(--t2),6.18vw,89px)}
/* Sigillo della formula (apertura Smash): tre anelli di geometria sacra che girano piano in versi opposti */
.sigillo{position:relative;aspect-ratio:1/1;width:100%;max-width:610px;justify-self:end}
.sigillo svg.geo{position:absolute;inset:0;width:100%;height:100%}
.sigillo .anello1{animation:gira 89s linear infinite}
.sigillo .anello2{animation:gira 55s linear infinite reverse}
.sigillo .anello3{animation:gira 144s linear infinite}
.sigillo .anello3 circle:last-child{fill:var(--rosso)}
.sigillo::after{content:"";position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,rgba(224,55,45,.28),transparent 61.8%);animation:pulsa 3.236s ease-in-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){.sigillo svg.geo,.sigillo::after{animation:none}}
@media (max-width:900px){.sigillo{justify-self:center;max-width:377px;margin-top:var(--s4)}}

/* ---------- Franchising: numeri e formule (Grafica, 27/10/2026) ---------- */
.numeri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--s5)}
.numeri>div{border-top:1px solid var(--filo-c);padding-top:var(--s3)}
.numeri .cifra{font-family:var(--ft);font-weight:800;font-size:clamp(var(--t2),4.2vw,var(--t3));line-height:1;letter-spacing:-.03em;margin:0 0 var(--s2);color:var(--nero)}
.numeri .cifra.rosso{color:var(--rosso)}
.numeri p{margin:0;color:var(--grigio-c);max-width:30ch}
.pacchetti.formule .pacchetto{aspect-ratio:auto;gap:var(--s5);justify-content:flex-start}
.pacchetto .sotto{margin:var(--s2) 0 0;color:var(--grigio)}
.pacchetto .righe{list-style:none;margin:var(--s4) 0 0;padding:0}
.pacchetto .righe li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);padding:var(--s2) 0;border-top:1px solid var(--filo);font-size:15px;color:var(--grigio)}
.pacchetto .righe b{font-family:var(--ft);font-weight:800;font-size:15px;color:var(--bianco);text-align:right}
.nota-lavoratore{display:grid;grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr);gap:var(--s5);margin-top:var(--s6);padding-top:var(--s4);border-top:2px solid var(--verde)}
.nota-lavoratore p{margin:0}.nota-lavoratore b{color:var(--verde)}
@media (max-width:900px){.numeri{grid-template-columns:repeat(2,minmax(0,1fr))}.nota-lavoratore{grid-template-columns:minmax(0,1fr);gap:var(--s3)}}
@media (max-width:560px){.numeri{grid-template-columns:minmax(0,1fr)}.pacchetto .righe li{flex-wrap:wrap}}
.pacchetti.formule{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.pacchetti.formule{grid-template-columns:minmax(0,1fr)}}

/* Modulo franchising: campo trappola per i robot ed esito dell'invio (Web, 29/10/2026) */
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.esito{margin:0;font-size:14px;line-height:1.618;color:var(--rosso)}
.esito.ok{color:var(--verde)}
.modulo .invia[disabled]{opacity:.5;cursor:wait}

/* Pagina privacy e note legali: testo lungo su una colonna, misura di lettura 68 caratteri */
.legali{max-width:68ch}
.legali h2{font-family:var(--ft);font-weight:800;font-size:clamp(19px,2vw,var(--t1));line-height:1.236;text-transform:uppercase;letter-spacing:-.013em;margin:var(--s6) 0 var(--s3);scroll-margin-top:var(--s6)}
.legali h2:first-child{margin-top:0}
.legali h3{font-family:var(--ft);font-weight:500;font-size:13px;letter-spacing:.144em;text-transform:uppercase;margin:var(--s4) 0 var(--s2);color:var(--rosso)}
.legali p,.legali li{font-size:var(--t0);line-height:1.618;margin:0 0 var(--s2)}
.legali ul{margin:0 0 var(--s3);padding-left:var(--s3)}
.legali a{color:inherit}

/* Ordina: canali non ancora attivi — pulsante spento e scritta «In arrivo» (scelta del CEO, 29/10/2026) */
.vai.spento{opacity:.34;pointer-events:none;cursor:default}
.presto{font-family:var(--ft);font-size:11px;letter-spacing:.21em;text-transform:uppercase;color:var(--rosso);align-self:center}