.sfx{padding:10px 0 6px}
 .sfx-p{color:var(--muted);max-width:620px;margin:10px auto 0;font-size:15.5px;line-height:1.6}
 /* ALTEZZA DEL RIQUADRO = quanto e' grande la sfera. L'inquadratura la adatta al lato PIU'
    CORTO (fitCalc: min(W,H)), e il riquadro e' largo fino a 1040px ma era alto 470: era
    l'altezza a strozzarla, e il globo restava piccolo in mezzo all'aria. Legandola alla
    larghezza dello schermo la sfera cresce con la finestra invece di restare fissa. */
 .sfx-box{display:block;position:relative;height:clamp(520px,min(62vw,82vh),var(--sfx-h,880px));margin-top:18px;border-radius:20px;
  overflow:hidden;text-decoration:none;border:1px solid var(--border);
  background:radial-gradient(120% 90% at 50% 40%,rgba(255,250,235,.9),rgba(238,246,236,.55) 60%,rgba(245,248,243,0));
  box-shadow:0 10px 34px rgba(33,50,20,.09)}
 .sfx-box canvas{width:100%;height:100%;display:block;cursor:pointer}
 /* invito discreto: e' la sfera la protagonista, non il bottone */
 .sfx-cta{position:absolute;right:16px;bottom:16px;z-index:2;
  background:linear-gradient(135deg,var(--leo),var(--leo-dk));color:#fff;font-weight:700;font-size:12.5px;
  padding:7px 13px;border-radius:9px;box-shadow:0 4px 12px rgba(60,80,45,.22);white-space:nowrap;
  opacity:.92;transition:opacity .15s,transform .15s}
 .sfx-box:hover .sfx-cta{opacity:1}
 .sfx-box:hover .sfx-cta{transform:translateY(-2px)}
 @media(max-width:600px){.sfx-box{height:clamp(360px,100vw,520px);border-radius:16px;margin-inline:-10px}
  .sfx-cta{right:11px;bottom:11px;font-size:11.5px;padding:6px 11px;border-radius:8px}}